body {
    background: #f3f3f3;
}
.l-content {
    position: relative;
    width: 1200px;
    margin: 0 auto;
    color: #333333;
    font-family: MicrosoftYaHei;
    font-weight: normal;
    font-size: 14px;
    box-sizing: border-box;
}

/* 头部进度条样式 */
.header-step {
    display: flex;
    flex-direction: row;
    align-content: center;
    width: 1200px;
    background-color: #f3f3f3;
}

.header-step .step-item {
    display: flex;
    flex-direction: row;
    background-image: url(/vcommon/theme/selection/img/new/unselectArrow.png);
    background-size: cover;
    color: #999999;
    width: 214px;
    height: 58px;
    margin: 0 0 0 -13px;
}

.header-step .step-item:first-child {
    margin: 0 0 0 -4px;
    width: 215px;
}
.header-step .step-item.active {
    cursor: pointer;
    color: white;
}
.header-step .step-item.active:hover {
    color: #003399;
}
.header-step .step-item.current {
    cursor: pointer;
    color: #003399;
}
.header-step .step-item.disabled {
    cursor: not-allowed !important;
    color: #999999 !important;
}

.header-step .step-title {
    line-height: 24px;
    font-size: 18px;
    margin: 17px auto 17px 0;
    white-space: nowrap;
    z-index: 999;
}
.header-step .active:not(.current) .step-title {
    margin: 17px 10px 17px 0;
    text-decoration: underline;
}
/* header进度背景图 */
/* step1 */
.header-step .step-item:first-child.active {
    background-image: url(/vcommon/theme/selection/img/new/startSelectedArrow.png);
}
.header-step .step-item:first-child.active:not(.current):hover {
    background-image: url(/vcommon/theme/selection/img/new/startHoverArrow.png);
}
.header-step .step-item:first-child.current {
    background-image: url(/vcommon/theme/selection/img/new/startCurrentArrow.png);
}
/* step2-5 */
.header-step .step-item.active {
    background-image: url(/vcommon/theme/selection/img/new/selectedArrow.png);
}
.header-step .step-item.active:not(.current):hover {
    background-image: url(/vcommon/theme/selection/img/new/hoverArrow.png);
}
.header-step .step-item.current {
    background-image: url(/vcommon/theme/selection/img/new/currentArrow.png);
}
/* step5 追加工有区别  */
.header-step #step-5.active {
    background-image: url(/vcommon/theme/selection/img/new/selectedArrowAfterwork.png);
    color: #003399;
}
.header-step #step-5.active:not(.current):hover {
    background-image: url(/vcommon/theme/selection/img/new/hoverArrowAfterwork.png);
    color: #003399;
}
.header-step #step-5.current {
    background-image: url(/vcommon/theme/selection/img/new/currentArrowAfterwork.png);
    color: #003399;
}
.header-step #step-5.disabled {
    background-image: url(/vcommon/theme/selection/img/new/unabledArrowAfterwork.png);
}
/* step最后 */
.header-step .step-item:last-child {
    width: 220px;
    background-image: url(/vcommon/theme/selection/img/new/endUnselectArrow.png);
}
.header-step .step-item:last-child.active {
    background-image: url(/vcommon/theme/selection/img/new/endSelectedArrow.png);
}
.header-step .step-item:last-child.active:not(.current):hover {
    background-image: url(/vcommon/theme/selection/img/new/endHoverArrow.png);
}
.header-step .step-item:last-child.current {
    background-image: url(/vcommon/theme/selection/img/new/endCurrentArrow.png);
}
/* header数字图标 */
.header-step .step-num {
    width: 24px;
    height: 24px;
    margin: 17px 5px 17px auto;
    z-index: 999;
    background-size: cover;
}
/* step1 */
#step-1.active .step-num {
    background-image: url(/vcommon/theme/selection/img/1white.png);
}
#step-1.active:hover .step-num {
    background-image: url(/vcommon/theme/selection/img/1blue.png);
}
#step-1.current .step-num {
    background-image: url(/vcommon/theme/selection/img/1blue.png);
}
/* step2 */
#step-2 .step-num {
    background-image: url(/vcommon/theme/selection/img/2gray.png);
}
#step-2.active .step-num {
    background-image: url(/vcommon/theme/selection/img/2white.png);
}
#step-2.active:hover .step-num {
    background-image: url(/vcommon/theme/selection/img/2blue.png);
}
#step-2.current .step-num {
    background-image: url(/vcommon/theme/selection/img/2blue.png);
}
/* step3 */
#step-3 .step-num {
    background-image: url(/vcommon/theme/selection/img/3gray.png);
}
#step-3.active .step-num {
    background-image: url(/vcommon/theme/selection/img/3white.png);
}
#step-3.active:hover .step-num {
    background-image: url(/vcommon/theme/selection/img/3blue.png);
}
#step-3.current .step-num {
    background-image: url(/vcommon/theme/selection/img/3blue.png);
}
/* step4 */
#step-4 .step-num {
    background-image: url(/vcommon/theme/selection/img/4gray.png);
}
#step-4.active .step-num {
    background-image: url(/vcommon/theme/selection/img/4white.png);
}
#step-4.active:hover .step-num {
    background-image: url(/vcommon/theme/selection/img/4blue.png);
}
#step-4.current .step-num {
    background-image: url(/vcommon/theme/selection/img/4blue.png);
}
/* step5 */
#step-5 .step-num {
    background-image: url(/vcommon/theme/selection/img/5gray.png);
}
#step-5.active .step-num {
    background-image: url(/vcommon/theme/selection/img/5blue.png);
}
#step-5.active:hover .step-num {
    background-image: url(/vcommon/theme/selection/img/5blue.png);
}
#step-5.current .step-num {
    background-image: url(/vcommon/theme/selection/img/5blue.png);
}
#step-5.disabled .step-num {
    background-image: url(/vcommon/theme/selection/img/5gray.png) !important;
}
/* step6 */
#step-6 .step-num {
    background-image: url(/vcommon/theme/selection/img/unsuccess.png);
}
#step-6.active .step-num {
    background-image: url(/vcommon/theme/selection/img/successSelected.png);
}
#step-6.active:hover .step-num {
    background-image: url(/vcommon/theme/selection/img/success.png);
}
#step-6.current .step-num {
    background-image: url(/vcommon/theme/selection/img/success.png);
}
/* step-goto 进度栏文字右侧的向右箭头 */
.header-step .step-goto {
    width: 16px;
    height: 16px;
    margin: 21px auto 21px 5px;
    z-index: 999;
    background-size: cover;
    display: none;
}
.header-step .active:not(.current) .step-goto  {
    display: block;
    background-image: url(/vcommon/theme/selection/img/new/stepGo.png);
}
.header-step .active:not(.current):hover .step-goto {
    display: block;
    background-image: url(/vcommon/theme/selection/img/new/stepGoHover.png);
}
#step-5.active:not(.current) .step-goto {
    background-image: url(/vcommon/theme/selection/img/new/stepGoHover.png) !important;
}
/* 进度条浮动 */
.header-float {
    position: fixed;
    top: 0;
    z-index: 10000;
    background-color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.1);
}
.header-float .header-step {
    height: 70px;
    align-items: center;
}
/* 进度条浮动后的占位符 */
.header-float-placeholder {
    width: 100%;
    height: 58px;
}

/* 步骤内容模块 */
.step-content {
    width: 1200px;
    margin-top: 6px;
    background-color: white;
    font-size: 14px;
    text-align: left;
    line-height: 19px;
    display: none;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.1);
}

.step-content.active-content {
    display: block;
}

.step-content .step-content-title {
    height: 28px;
    overflow-wrap: break-word;
    font-weight: 700;
    font-family: MicrosoftYaHei-Bold;
    font-size: 18px;
    text-align: left;
    white-space: nowrap;
    line-height: 28px;
    padding-top: 10px;
    margin-left: 10px;
}

.step-content .step-content-title::before {
    content: '';
    width: 5px;
    height: 25px;
    background-color: #003399;
    position: absolute;
    left: 0;
    margin-top: 1px;
}

.step-content .step-content-body {
    display: flex;
    padding: 20px 20px 0 20px;
    align-items: flex-start;
}
#step-3-body {
    flex-direction: column;
}

.img-block {
    cursor: pointer;
    background-color: white;
    border: 1px solid rgba(205, 205, 205, 1);
    margin-right: 20px;
    position: relative;
}

.step-content.error .img-block {
    border: 1px solid #E52F2C;
}

.step-content.error .step-error {
    display: block;
}
.img-block.selected {
    border: 1px solid #003399;
}
.img-block.selected .block-text {
    color: #003399;
}
.img-block .block-text {
    border-top: 1px solid #cdcdcd;
}
.img-block.selected::after {
    content: '';
    display: inline-block;
    background-image: url(/vcommon/theme/selection/img/choose.png);
    background-size: cover;
    position: absolute;
    right: -0.5px;
    bottom: -0.5px;
    width: 24px;
    height: 24px;
}
.step-content.error .img-block:hover,
.img-block:hover {
    border: 1px solid #003399;
}
.disabled .img-block:hover {
    border: 1px solid rgba(205, 205, 205, 1);
}

.img-block:hover .block-text {
    color: #003399;
}

#step-1-body .block-img, #claw-type-img {
    width: 338px;
    height: 280px;
}
.step-content .block-text {
    white-space: nowrap;
    line-height: 40px;
    align-content: center;
    text-align: center;
    background-color: #eef4fc;
    height: 39px;
    width: 100%;
}

.step-content .step-error {
    color: #E52F2C;
    font-size: 12px;
    margin: 10px 0px 0px 20px;
    position: absolute;
    display: none;
}

/* 下一步按钮 */
.button_next {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-wrap: break-word;
    font-size: 18px;
    cursor: pointer;
    height: 50px;
    width: 182px;
    border-width: 0px;
    background: inherit;
    background-color: rgba(255, 204, 0, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-left: 20px;
}

.button_next:hover {
    background-color: #FFEA98;
}

.step_button {
    display: flex;
    flex-direction: row;
}

.step-1-button {
    margin-top: 80px;
    padding-bottom: 20px;
}


/* step2 */

#step-2-body .condition-block {
    width: 423px;
    background-color: #f8f8f8;
    padding-top: 20px;
}
.condition-input-content {
    position: relative;
    flex: 0 0 136px;
}
.condition-input-content.inputed .clear-button {
    visibility: visible;
}
.condition-item {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    padding: 0 10px;
}
#step-2-content .condition-select-item,
.condition-input-item {
    height: 60px;
}


.condition-title {
    flex: 0 0 148px;
    line-height: 19px;
    margin-right: 10px;
}
.condition-input-title {
    margin-top: 10px;
}
#condition-u .condition-title {
    margin-top: 4px;
}
.condition-title .title-tip {
    color: #999999;
    font-size: 12px;
    line-height: 16px;
}

.condition-input {
    width: 136px;
    line-height: 40px;
    background-color: white;
    box-sizing: border-box;
    border: 1px solid #CDCDCD;
    outline: none;
    text-align: left;
    text-transform: none;
    display: inline-block;
    padding: 0 30px 0 10px;
}
.condition-input:focus,
.condition-input:not(:disabled):hover {
    border: 1px solid #003399;
}
.condition-input:disabled {
    background-color: #f3f3f3;
    color: #cdcdcd;
}
.condition-input:disabled + .clear-button {
    visibility: hidden;
}

.condition-input::placeholder {
    font-size: 12px;
    color: #999999;
}
.range-error .condition-input,
.input-error .condition-input {
    border: 1px solid #E52F2C;
}
.input-error .condition-input:hover {
    border: 1px solid #003399;
}
.input-error .error-msg {
    display: block;
}
.range-error:not(.input-error) .um-error-msg {
    display: block;
}
.clear-button {
    cursor: pointer;
    visibility: hidden;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 16px;
    width: 16px;
    top: 13px;
    right: 10px;
    background-image: url(/vcommon/theme/selection/img/close.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
}
.clear-button:hover {
    background-image: url(/vcommon/theme/selection/img/closeHover.png);
}
.um-error-msg,
.other-error-msg,
.error-msg {
    color: #E52F2C;
    font-size: 12px;
    line-height: 16px;
    display: none;
}
#condition-m .um-error-msg,
#condition-u .error-msg {
    position: absolute;
    white-space: nowrap;
}

.condition-unit {
    color: #666666;
    font-size: 12px;
    line-height: 16px;
    margin-left: 5px;
    margin-top: 12px;
    word-break: break-all;
}

.condition-text-item {
    height: 19px;
    margin-bottom:20px;
}
.condition-text-content {
    line-height: 19px;
    margin-left: 10px;
    width: 136px;
}

.gray-line {
    width: 100%;
    height: 1px;
    background: #e9e9e9;
    
}
.condition-check-item {
    margin-top: 20px;
    margin-bottom: 20px;
}

#ste-3-content .condition-check-item {
    margin-top: 0px;
}

.step-content .stepTips {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #fff7d6;
    color: #333;
    width: 305px;
    height: 33px;
    left: -2px;
    bottom: -42px;
    border: 1px #e8e8e8;
    border-radius: 2px;
    z-index: 999;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    display: none;
    font-size: 12px;
}

.step-content .stepTips::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 25px;
    border-width: 0 7px 9px 7px;
    border-style: solid;
    border-color: transparent transparent #fff7d6 transparent;
}

.step-content .stepTips img {
    height: 16px;
    width: 16px;
    margin-left: 10px;
    margin-right: 5px;
}

.step-content .stepTips .tipsFont {
    margin-left: 5px;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 12px;
    font-weight: normal;
    text-align: left;
    line-height: 16px;
    padding: 8px 0;
}
#condition-accuracy {
    height: 80px;
    margin: auto 0;
    display: flex;
    align-items: center;
}
#condition-brake {
    height: 50px;
    align-items: flex-start;
    margin-bottom: 0;
    margin-top: 10px;
}
[modeltype="rotation"] .step-3-con-1  {
    display: none;
}
.white-block {
    width: 100%; 
    height: 205px; 
    background-color: #ffffff;
}
.brake-img {
    display: none;
    width: 279px;
    height: 237px;
    position: absolute;
    top: 0;
    left: 0;
}
[modeltype="paraller"] .brake-img {
    display: block;
}
[modeltype="rotation"] .brake-img {
    display: none;
}
.use-condition-legend {
    width: 402px; 
    height: 345px;
}
[modeltype="rotation"] .use-condition-legend {
    width: 402px;
    height: 345px;
}
.step-3-con {
    display: flex;
}
.step-3-con-1 {
    display: flex;
    margin-top: -93px;
}
.step-3-con-2 {
    display: none;
}
#step-3-content .condition-item-block {
    margin-top: 0;
}
.step-3-con-2 .condition-item-block {
    height: 80px;
    margin-top: 0;
    padding-top: 0;
}
[modeltype="rotation"] .step-3-con-2 {
    display: flex;
    margin-top: 20px;
}
#condition-accuracy .selection-content:not(.open) .sselection-arrow:hover ~ .stepTips {
    display: flex;
}
#condition-accuracy .selection-content:not(.open) .selection-label:hover ~ .stepTips,
#condition-accuracy .selection-content:not(.open) .selection-arrow:hover ~ .stepTips
 {
    display: flex;
}
#condition-accuracy .stepTips:hover {
    display: flex;
}
.accuracy-table {
    position: absolute;
    top: 0;
    left: 0;
    width: 381px;
    height: 141px;
}
.rotation-accuracy-table {
    position: relative;
    margin-left: 10px; 
}
.rotation-claw-block {
    position: relative;
    margin-left: 416px;
}
.rotation-claw-img {
    position: absolute;
    width: 310px;
    height: 184px;
    top: 0;
    left: 0;
}
#condition-accuracy .selection-content {
    margin-left: 0;
    width: 136px;
}

.condition-radios, .condition-radio-item {
    display: flex;
    line-height: 22px;
}
.condition-check-content .custom-radio {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    margin-top: 3px;
    background-image: url(/vcommon/theme/selection/img/radio-default.png);
    background-size: cover;
    cursor: pointer;
}
.condition-check-content .custom-radio:hover {
    background-image: url(/vcommon/theme/selection/img/radio-hover.png);
    background-size: cover;
}

.condition-check-item.input-error .custom-radio {
    background-image: url(/vcommon/theme/selection/img/radio-error.png);
}
.condition-check-item.input-error .custom-radio:hover {
    background-image: url(/vcommon/theme/selection/img/radio-error.png);
}
.condition-check-content .custom-radio.selected {
    background-image: url(/vcommon/theme/selection/img/radio-checked.png);
}

#condition-force {
    background-color: #DFEEFF;
    line-height: 40px;
}

#condition-force .condition-title, #condition-force .condition-text-content {
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
    line-height: 40px;
}

#condition-force .condition-unit {
    font-size: 12px;
    color: #666666;
}
#condition-formula {
    background-color: white;
    padding: 10px;
    display: flex;
}
.condition-href {
    font-size: 12px;
    color: #003399;
    line-height: 16px;
    text-decoration: underline;
    cursor: pointer;
}
#force-error {
    margin-left: 36px;
}

.work-piece-img {
    position: relative;
    width: 236px; 
    height: 392px; 
    margin-left: 73px;
    background-image: url(/vcommon/theme/selection/img/workPiece.png);
    background-size: cover;
}
.work-piece-mark-m {
    background-image: url(/vcommon/theme/selection/img/workPieceM.png);
}
.work-piece-mark-u {
    background-image: url(/vcommon/theme/selection/img/workPieceU.png);
}
.work-piece-mark-finger {
    background-image: url(/vcommon/theme/selection/img/workPieceFinger.png);
}
.work-piece-mark-workpice {
    background-image: url(/vcommon/theme/selection/img/workPieceWorkpice.png);
}
.work-piece-mark-c {
    background-image: url(/vcommon/theme/selection/img/workPieceC.png);
}
.work-piece-mark-force {
    background-image: url(/vcommon/theme/selection/img/workPieceForce.png);
}
.work-piece-img.elgp-type {
    position: relative;
    width: 236px; 
    height: 392px; 
    margin-left: 73px;
    background-image: url(/vcommon/theme/selection/img/workPiecePing.png);
    background-size: cover;
}
.elgp-type.work-piece-mark-m {
    background-image: url(/vcommon/theme/selection/img/workPiecePingM.png);
}
.elgp-type.work-piece-mark-u {
    background-image: url(/vcommon/theme/selection/img/workPiecePingU.png);
}
.elgp-type.work-piece-mark-finger {
    background-image: url(/vcommon/theme/selection/img/workPiecePingFinger.png);
}
.elgp-type.work-piece-mark-workpice {
    background-image: url(/vcommon/theme/selection/img/workPiecePingWorkpice.png);
}
.elgp-type.work-piece-mark-c {
    background-image: url(/vcommon/theme/selection/img/workPiecePingC.png);
}
.elgp-type.work-piece-mark-force {
    background-image: url(/vcommon/theme/selection/img/workPiecePingForce.png);
}
.mark-m,.mark-u,.mark-force,.mark-c, .mark-itinerary, .mark-clamp-distance {
    position: absolute;
    left: 91px;
    bottom: -25px;
    text-align: center;
    width: 100px;
    color: #000000;
}
.elgp-type .mark-force {
    bottom: 55px;
}
.elgp-type .mark-c {
    bottom: 98px;
}
.mark-u-left {
    left: -18px;
    bottom: 2px;
    text-align: right;
}
.mark-u-right {
    left: 191px;
    bottom: 2px;
    text-align: left;
}
.mark-force-left {
    left: -60px;
    bottom: 44px;
    text-align: right;
}
.mark-force-right {
    left: 238px;
    bottom: 44px;
    text-align: left;
}
.mark-c {
    left: 230px;
    bottom: 83px;
    text-align: left;
}
.step-2-button {
    margin-top: 27px;
    padding-bottom: 20px;
}
#step-2-body.short-body + .step-2-button {
    margin-top: 51px;
}

.button_previous {
    display: flex;
    align-items: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    height: 50px;
    width: 182px;
    font-style: normal;
    font-size: 18px;
    border-width: 0px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(255, 204, 0, 1);
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
    margin-left: 20px;
}
.button_previous:hover {
    background-color: #FFF7D6;
}

#step-3-content .condition-title {
    flex-basis: 113px;
}
.condition-item-block {
    background-color: #F8F8F8;
    /* height: 60px; */
    margin-top: 30px;
    padding-top: 20px;
    width: 419px;
}
.step-3-button {
    padding-bottom: 20px;
    margin-top: 70px;
}
[modeltype='rotation'] ~ .step-3-button {
    padding-bottom: 22px;
}
[modeltype='paraller'] ~ .step-3-button {
    padding-bottom: 18px;
    margin-top: 207px;
}
.use-condition-imgs {
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}
.condition-itinerary-img {
    width: 314px; 
    height: 202px;
    background-image: url(/vcommon/theme/selection/img/conditionItinerary.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
}
.condition-itinerary-img.mark-trip {
    background-image: url(/vcommon/theme/selection/img/conditionItineraryMarkTrip.png);
}
.condition-itinerary-img.mark-distance {
    background-image: url(/vcommon/theme/selection/img/conditionItineraryMarkClampDistance.png);
}
.mark-itinerary.mark-itinerary-left {
    font-size: 12px;
    left: 23px;
    bottom: -19px;
    font-size: 12px;
    font-weight: bold;
    font-family: "SourceHanSansCN";
}
.mark-itinerary.mark-itinerary-right {
    left: 152px;
    bottom: -19px;
    font-size: 12px;
    font-weight: bold;
    font-family: "SourceHanSansCN";
}
.mark-clamp-distance {
    left: 230px;
    bottom: 89px;
    font-size: 12px;
    font-weight: bold;
    font-family: "SourceHanSansCN";
}
/* step4 */
#step-4-body, #step-5-body {
    flex-direction: column;
}
.selection-block {
    display: flex;
    height: 60px;
}
.selection-title {
    width: 84px;
    line-height: 40px;
}
#cable-length {
    margin-top: 40px;
}
.selection-label {
    position: relative;
    padding: 9px 29px 9px 9px;
    border: 1px solid #CDCDCD;
    cursor: pointer;
    background-color: #fff;
    user-select: none;
    font-size: 12px;
    color: #999999;
    text-align: left;
    font-style: normal;
    line-height: 20px;
    height: 20px;
    white-space: nowrap;
}
.selection-subtitle {
    margin: 0 0 20px 0;
    line-height: 19px;
}
.selection-content {
    position: relative;
    display: inline-block;
    width: 369px;
    height: 40px;
    margin-left: 10px;
    box-sizing: border-box;
}
#step-2-content .selection-content {
    margin-left: 0;
    width: 136px;
}
.line-style-block {
    position: relative;
}
.line-style-block .step-error {
    margin-left: 0;
}
.mark-line-type {
    display: none;
    position: absolute;
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    font-family: "SourceHanSansCN";
    line-height: 18px;
    text-align: left;
}
.selected .mark-line-type {
    display: block;
}
.mark-line-type-s {
    top: 228px;
    left: 225px;
}
.mark-line-type-d {
    top: 227px;
    left: 146px;
}
.selection-content.border-error .selection-label,
.selection-content.error .selection-label {
    border-color: #E5312C;
}
.selection-content.error .error-msg {
    display: block;
}
.selection-content .selection-label:hover {
    border-color: #003399;
}

.selection-arrow {
    cursor: pointer;
    position: absolute;
    height: 16px;
    width: 16px;
    right: 10px;
    top: 50%;
    transform-origin: center;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
}

.disabled .selection-arrow {
    cursor: not-allowed;
} 

.selection-arrow {
    background-image: url(/vcommon/theme/selection/img/arrowBottom.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.selection-content.open .selection-arrow {
    background-image: url(/vcommon/theme/selection/img/arrowTop.png);
}
#step-5-content .selection-content:not(.open) .clean-btn {
    cursor: pointer;
    position: absolute;
    height: 16px;
    width: 16px;
    right: 10px;
    top: 50%;
    transform-origin: center;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
    background-image: url(/vcommon/theme/selection/img/close.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
#step-5-content .selection-content:not(.open) .clean-btn:hover {
    background-image: url(/vcommon/theme/selection/img/closeHover.png);
}
.selection-content.open .selection-label {
    border-color: #003399;
}
.selection-content.disabled .selection-arrow {
    background-image: url(/vcommon/theme/selection/img/arrowBottomDisabled.png);
}
.selection-content.disabled .selection-label {
    cursor: not-allowed;
    background-color: #F3F3F3;
    color: #CDCDCD;
}
.selection-content.disabled .selection-label:hover {
    border-color: #CDCDCD;
}

.selection-options {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
    /* border: 0.1px solid #ccc; */
    box-shadow: 0px 3px 10px 4px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    z-index: 10;
    max-height: 150px;
    overflow-y: auto;
}
#step-2-body .selection-options {
    max-height: 360px;
}

.selection-options li {
    padding: 0px 10px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 14px;
    color: #333333;
    height: 40px;
    line-height: 40px;
    list-style: none outside none;
}

.selection-content.open .selection-options {
    display: block;
}

.selection-options li:hover,
.selection-options li.len-selected {
    background-color: rgba(223, 238, 255, 1);
    color: #003399;
}
.hover-border {
    border-color: #003399 !important;
}
.line-styles {
    display: flex;
}
.line-styles .block-img {
    width: 338px;
    height: 280px;
}
.button_after_process {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-wrap: break-word;
    font-size: 18px;
    cursor: pointer;
    height: 50px;
    width: 182px;
    border-width: 0px;
    background: inherit;
    background-color: #003399;
    color: white;
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-left: 20px;
}
.button_after_process:hover {
    background-color: #325BAD;
}
.button_after_process.disabled {
    background-color: #F3F3F3;
    color: #CDCDCD;
    cursor: not-allowed;
}
.button_after_process.disabled:hover {
    background-color: #F3F3F3;
}
.step4-tips {
    font-size: 12px;
    margin: 6px 17px;
    height: 38px;
    background-color: #EEF4FC;
    display: flex;
    position: relative;
    border-radius: 3px;
    border: 1px solid #003399;
}
.step4-tips img {
    width: 16px;
    height: 16px;
    margin: 12px 5px 10px 5px;
}
.step4-tips .tip-text {
    overflow-wrap: break-word;
    color: #003399;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: normal;
    text-align: left;
    line-height: 20px;
    padding: 9px 10px 9px 0;
}
.step4-tips::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -15px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent #003399 transparent transparent;
    transform: translateY(-50%);
}
.step4-tips::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -14px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent #EEF4FC transparent transparent;
    transform: translateY(-50%);
}

.step-4-button{
    padding: 60px 0 20px 0;
}
.step-5-button {
    padding: 80px 0 20px 0;
}
/* step5 追加工 */
#step5-title-tip, #step6-title-tip {
    font-size: 14px;
    display: inline-block;
    line-height: 28px;
    vertical-align: bottom;
    padding-left: 10px;
}
#step6-title-tip {
    padding-left: 5px;
}
.step5-sub-title {
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
}
#step5-sub-title-tip {
    display: none;
}
.disabled #step5-sub-title-text {
    color: #999999;
}
.disabled #step5-sub-title-tip {
    display: inline-block;
}
.step5-sub-content {
    padding: 20px 0 40px 0;
    display: flex;
}
#change-dircetion-block {
    display: flex;
    align-items: flex-start;
}
#line-styles.disabled .img-block,
#change-dircetion-block.disabled .img-block {
    cursor: not-allowed;
}
#line-styles.disabled .block-text,
#change-dircetion-block.disabled .block-text {
    background-color: #f3f3f3;
    color: #999999;
}
#change-dircetion-block .block-img {
    width: 138px;
    height: 238px;
}
.direct-table {
    width: 500px;
    height: 256px;
    margin-top: 12px;
    margin-left: 20px;
}
#protocol-converter .selection-content {
    margin: 20px 0;
}
.protocol-table {
    margin-top: 20px;
    width: 620px;
    height: 488px;
}

/* 6 选型结果 */
#step6-title-tip {
    font-family: MicrosoftYaHei;
    font-weight: normal;
}

.title-tip-block::before {
    content: '';
    display: inline-block;
    background-color: #DFEEFF;
    border: 1px solid #CDCDCD;
    width: 12px;
    height: 12px;
    margin: 3px 5px -2px 0;
}
#title-tip-yellow::before {
    background-color: #FFF7D6;
}

.step6-input-info {
    margin: 20px 27px 20px 20px;
    border-color: #cdcdcd;
}
.step6-input-info th, .step6-input-info td {
    width: 145px;
    text-align: center;
    border: 1px solid #CDCDCD;
    font-weight: normal;
}
.step6-input-info th {
    height: 58px;
    background-color: #DFEEFF;
}
.step6-input-info .af-th {
    background-color: #FFF7D6;
}
.step6-input-info td {
    height: 78px;
    background-color: white;
    margin: 20px 13px;
 }


.step-6-result {
    width: 1160px;
    /* height: 246px; */
    margin-left: 20px;
    background: #eef4fc;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.step-6-result-item.result-button {
    margin-top: 20px;
}
.step-6-result-item {
    display: flex;
    flex-direction: row;
    margin-top: 15px;
    margin-left: 20px;
    line-height: 19px;
    text-align: left;
}
.step-6-result-model {
    line-height: 36px;
}

#model {
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
}

#unit-price {
    color: #e52f2c;
    line-height: 19px;
    font-weight: bold;
    font-family: MicrosoftYaHei-Bold;
}
.v-line {
    background: #cdcdcd;
    width: 1px;
    height: 16px;
    margin-left: 10px;
    margin-right: 10px;
}
#productDetail {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    background: #FFCC00;
    width: 186px;
    height: 36px;
    justify-content: center;
    align-items: center;
}
#productDetail:hover {
    background-color: #ffea98;
}
#download {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    background: #ffffff;
    border: 1px solid #003399;
    width: 186px;
    height: 36px;
    margin-left: 20px;
    line-height: 20px;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
    box-sizing: border-box;
    color: #003399;
}
#download:hover,
#searchReport:hover {
    background-color: #EEF4FC;
}
#back_step_5 {
    margin-left: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    width: 186px;
    height: 36px;
    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    border-width: 0px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(255, 204, 0, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    box-sizing: border-box;
}
#back_step_5:hover {
    background-color: #fff7d6;
}

img.sixteen {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.result-tips {
    font-weight: bold;
    margin: 10px 0 20px 20px;
    font-family: MicrosoftYaHei-Bold;
}
#discount-content {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 296px;
    height: 222px;
    background-color: white;
    border: 1px solid #eef4fc;
    font-size: 12px;
}
.discount-title {
    line-height: 16px;
    font-family: MicrosoftYaHei-Bold;
    font-weight: bold;
    margin: 15px 0 0 25px;
}
.discount-table {
    border: 1px solid #e8e8e8;
    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
    margin: 10px 20px;
    background-color: white;
}
.discount-table th {
    background-color: #f5f5f5;
    font-weight: bold;
}
.discount-quantity {
    width: 95px;
}
.discount-price {
    width: 160px;
}
.discount-table th, .discount-table td {
    text-align: center;
    height: 28px;
    border: 1px solid #e8e8e8;
}
.discount-tip {
    color: #999999;
}
.discount-after {
    display: none;
}
.discount-more {
    display: none;
}
.discount-more td {
    line-height: 16px;
    font-size: 12px;
    color: #003399;
    cursor: pointer;
}
.discount-more-text {
    display: inline-block;
}
.discount-more .discount-more-content {
    content: '';
    display: inline-block;
    background-image: url(/vcommon/theme/selection/img/arrow_down_full.png);
    background-size: cover;
    width: 16px;
    height: 16px;
    transform: translateY(3px);
}
.discount-more.on .discount-more-content {
    background-image: url(/vcommon/theme/selection/img/arrow_up_full.png);
}


#loadingPage {
    display: none;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 1160px;
    background: #000000;
    opacity: 0.3;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}
#loadingPage img {
    width: 80px;
    height: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.select-tip1 {
    margin-top: 10px;
    font-size: 12px;
    line-height: 16px;
}
.sel-button {
    color: #003399;
    cursor: pointer;
    margin-left: 10px;
}
#searchReport {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(0, 51, 153);
    align-items: center;
    box-sizing: border-box;
    text-align: center;
    align-content: center;
    overflow-wrap: break-word;
    color: #003399;
    line-height: 20px;
    margin-left: 20px;
    width: 186px;
    height: 36px;
    font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
    font-weight: 400;
    font-style: normal;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
}

.disclaimer {
    display: flex;
    align-items: center;
    height: 36px;
    background: #f8f8f8;
    margin: 20px 1px 1px 1px;
    padding-left: 20px;
    font-size: 12px;
    color: #999999;
    line-height: 16px;
    text-align: left;
    font-style: normal;
}
.white-content {
    background-color: white;
}
.spec-table {
    display: flex;
    margin: 20px;
}
.product-spec-img {
    margin-left: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 400px;
    position: relative;
}
.product-spec {
    display: flex;
    flex-direction: column;
}
.product-spec-item {
    width: 460px;
    border: 1px solid #CDCDCD;
    line-height: 19px;
    padding: 20px;
    padding-top: 19px;
    border-bottom: none;
    box-sizing: border-box;
}
.product-spec-item:last-child {
    border-bottom: 1px solid #CDCDCD;
}
.product-img {
    max-width: 100%;
    max-height: 100%;
}
.product-img-tips {
    color: #E52F2C;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 16px;
    left: 0;
}
.elgp-type #result-f-left,
.elgp-type #result-f-right {
    bottom: 53px;
}
.result-mark-label {
    font-size: 12px;
    position: absolute;
    width: 100px;
}
#result-m {
    text-align: center;
    left: 46px;
    bottom: 0px;
}
#result-u-left {
    text-align: right;
    left: -45px;
    bottom: 15px;
}
#result-u-right {
    text-align: left;
    left: 132px;
    bottom: 15px;
}
#result-f-left {
    text-align: right;
    left: -73px;
    bottom: 43px;
}
#result-f-right {
    text-align: left;
    left: 159px;
    bottom: 43px;
}
.elgp-type #result-c {
    bottom: 79px;
}
#result-c {
    text-align: left;
    left: 155px;
    bottom: 69px;
}
#result-itinerary-left {
    text-align: center;
    left: 26px;
    top: 204px;
}
#result-itinerary-right {
    text-align: center;
    left: 154px;
    top: 204px;
}
#result-clamp-distance {
    text-align: center;
    left: 230px;
    top: 95px;
}
.des-item {
    padding: 40px 20px;
    display: flex;
    flex-direction: row;
    position: relative;
}
.des-item-1 {
    padding-top: 20px;
}
.des-item .h-line {
    background: #e8e8e8;
    width: 1160px;
    height: 1px;
    margin-top: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.des-item .des-v-line {
    width: 1px;
    height: 280px;
    border-left: 1px dashed #e8e8e8;
}
.des-item .des-content-title {
    font-weight: bold;
    font-family: MicrosoftYaHei-Bold;
    margin-bottom: 20px;
}
.des-content {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
}
.des-content .inline {
    display: inline-block;
}
#condition-img-block {
    margin-left: 95px;
    margin-right: 108px;
    position: relative;
}
#condition-img-block img {
    width: 154px;
    height: 263px;
}
.des-sub-item-1 {
    width: 580px;
    display: flex;
}
.des-sub-item-2 {
    width: 579px;
    display: flex;
}
#use-condition-img-block {
    display: flex;
    flex-direction: column;
    position: relative;
}
#des-item-3 .des-content {
    margin-left: 44px;
}
#line-img {
    width: 338px;
    height: 280px;
    margin: 0 0 0 20px;
}
#direction-des-img {
    width: 284px;
    height: 240px;
    margin: 0 54px 0 0;
}
.gray-font {
    color: #999999;
}
#des-item-4 {
    position: relative;
}
#result-cbLength {
    bottom: 40px;
    left: 225px;
    text-align: center;
    font-weight: bold;
    font-family: "SourceHanSansCN";
}
.res-line-type-d #result-cbLength {
    left: 146px;
}
/* 重选弹窗 */

.modal {
    display: none;
    position: fixed;
    z-index: 10001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    overflow: hidden;
    font-size: 14px;
    line-height: 19px;
    text-align: left;
    font-style: normal;
}
.modal-content {
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 276px;
    position: relative;
}

.modal-content .close {
    cursor: pointer;
    color: #aaa;
    position: absolute;
    right: 10px;
    top: 10px;
}
.modal-content .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
}
.modal-content .paragraph_1 {
    margin-top: 30px;
    width: 224px;
    height: 40px;
    overflow-wrap: break-word;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    line-height: 20px;
 }
.modal-content .confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: rgba(255, 204, 0, 1);
    height: 36px;
    width: 120px;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 14px;
    font-weight: normal;
    white-space: nowrap;
    line-height: 36px;
 }
.modal-content .cancel {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 20px;
    align-content: center;
    background-color: rgba(255, 255, 255, 1);
    height: 36px;
    border: 1px solid rgba(255, 204, 0, 1);
    width: 120px;
    overflow-wrap: break-word;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    line-height: 36px;
 }
 #downloadItems {
    width: 598px;
    height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#download_modal_content {
    width: 638px;
    height: 480px;
}
.modal-title {
    height: 40px;
    background: #eef4fc;
    line-height: 40px;
    padding-left: 10px;
    font-weight: bold;
}
.modal-content-title {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    margin-left: 20px;
}

#calcModal .modal-content {
    width: 700px;
    height: 496px;
}
#calcModal .content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 40px 20px 20px 20px;
}
#calcModal .calc-text {
    display: flex;
    flex-direction: column;
    margin-left: 40px;
}
#calcModal .calc-text .calc-text-title,
#calcModal .calc-f-mg,
#calcModal .calc-f-mg-c {
    font-family: MicrosoftYaHei-Bold;
    font-size: 18px;
    text-align: left;
    font-weight: bold;
}
#calcModal .calc-text p {
    margin-top: 20px;
}
#calcModal .calc-f-mg,
#calcModal .calc-f-mg-c {
    color: #E52F2C;
    margin-top: 10px;
}
#calcModal .text-1 {
    margin-top: 40px;
}
#calcModal .text-2 {
    margin-top: 5px;
}

.black-color {
    color: #333 !important;
    font-size: 14px !important;

}
.border-button {
    box-sizing: border-box;
}
.hide {
    display: none;
}