@charset "utf-8";
/* 견적 차이 표시 */
.mainTop .standard { font-size: 0; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(../images/icons/icon_pin.svg); }
.mainTop .standard.on { background-image: url(../images/icons/icon_pin_on.svg); }

/* 이용현황 */
.estmCount {padding: 15px; margin-bottom: 15px; border-radius: 10px; background-color: var(--bg-white); border: 1px solid var(--gray-300); word-break: keep-all;}
.estmCount .detail { position: relative; padding-top: 30px; font-weight: 700; color: var(--main-font);}
.estmCount .detail a { position: absolute; top: 0; left: 0; padding: 1px 8px; border: 1px solid var(--primary-navy); background-color: var(--primary-navy); color: var(--white); border-radius: 5px; font-size: 12px; }
.estmCount .count {margin-top: 5px; color: var(--gray-500);}
.estmCount .count .set {font-weight: 700; color: var(--primary-navy);}
.estmCount .count .use {font-weight: 700; color: var(--primary-orange);}

/* 견적 목록 */
.estmList ul { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; margin-bottom: 15px; background-color: var(--bg-white); border: 1px solid var(--gray-300); border-radius: 10px; overflow: hidden; }
.estmList li {width: 100%; position: relative; padding: 15px; border-bottom: 1px dashed var(--gray-300); display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px; align-items: center;}
.estmList li:last-child {border-bottom: none;}
.estmList li button.star {width: 30px; height: 30px; background: url(../images/icons/icon_doublecheck_dis.svg) no-repeat center; background-size: 75%; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.estmList li button.star.on {background: url(../images/icons/icon_doublecheck_on.svg) no-repeat center; background-size: 75%;}
.estmList li span.num {color: var(--gray-500);}
.estmList li.on span.num, .estmList li.on span.name {font-weight: 700; color: var(--primary-orange)} 
.estmList li button.del { position: absolute; top: 15px; right: 10px; width: 30px; height: 30px; background: url(../images/icons/icon_trash.svg) no-repeat center; background-size: 60%; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.estmList li button.cont { width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; gap: 3px; }
.estmList li button.cont span {text-align: left;}
.estmList li button.cont span.name {font-weight: 700;}
.estmList li button.cont span.desc {color: var(--gray-500);}

@media screen and (min-width: 1000px) {
    .estmCount .detail { padding-top: 0;}
    .estmCount .detail a {left: unset; right: 0;}
    .estmList li button.star { position: absolute; left: 7px; bottom: 10px; }
    .estmList li span.num { position: absolute; top: 15px; left: 17px; }
    .estmList li button.cont {padding-left: 30px;}
}
/* 견적 구성 */
.estmBox .nodata {position: relative; font-size: 14px; min-height: auto; padding: 30px 0;} 
.estmBox:not(.hide) {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 30px;}
.estmBox.start .setting, .estmBox.start .compare, .estmBox.start .btnOpenSlide, .estmBox.start .estmDocu, .estmBox.start .counselBar { display: none;}
.estmBox .estmMain {width: 100%;}

/* swipe 영역 */
.wrapper:not(.mobile) .mainTop .swipeButton {display: none;}
.mainTop .swipeButton button, .mainTop .estmHead button {position: fixed; width: 60px; height: 60px; bottom: 75px; z-index: 2; padding: 10px; background-color: rgba(255,255,255,.7); box-shadow: rgba(0,0,0,.24) 0px 1px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%;}
.mainTop .swipeButton button {flex-direction: column; font-size: 12px; color: var(--main-font); white-space: nowrap;}
.mainTop .swipeButton button::before, .mainTop .estmHead button::before { position: unset; content: ''; width: 24px; height: 24px; background: url(../images/icons/icon_arrowdown_orange.svg) no-repeat center / contain;}
.mainTop .estmHead button {font-size: 0;}
.mainTop .swipeLeft, .mainTop .estmHead .arrowLeft {left: 15px;}
.mainTop .swipeRight, .mainTop .estmHead .arrowRight {right: 15px;}
.mainTop .swipeLeft::before, .mainTop .estmHead .arrowLeft::before {transform: rotate(90deg);}
.mainTop .swipeRight::before, .mainTop .estmHead .arrowRight::before {transform: rotate(-90deg);}
.estmViewport { overflow: hidden; width: 100%; position: relative; z-index: 1; }
.estmViewport .estmBox:not(.hide) { align-items: flex-start; flex-direction: row; gap: 0; }
.estmStep { flex: 0 0 100%; width: 100%; }
.wrapper:not(.mobile) .estmViewport {overflow-x: clip; overflow-y: visible;}
.wrapper:not(.mobile) .estmViewport .estmBox:not(.hide) {flex-direction: column; gap: 30px;} 
.wrapper:not(.mobile) .estmStep.estmModel {display: none;}
@media screen and (min-width: 1000px) { 
    .mainTop .swipeButton button, .mainTop .estmHead button {bottom: 15px;}
}
@media screen and (min-width: 1900px) { 
    .estmBox.open { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0; } 
    .estmBox.open .estmMain {flex: 0 0 calc(60% - 7.5px);}
    .estmBox.open .estmDocu {flex: 0 0 calc(40% - 7.5px);}
    .wrapper:not(.mobile) .estmViewport .estmBox:not(.hide) {flex-direction: row; gap: 15px;} 
}
/* 화면 표시 */
.estmCell:not(.on) { display: none; }
/* 차량 선택 */
.estmCell .vehicle { position: relative; }
.estmCell .vehicle .choice .box { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px; overflow: hidden; }
.estmCell .vehicle .choice .box > li { width: 100%; position: relative; max-height: 100dvh; display: flex; flex-direction: column;}
.estmCell .vehicle .choice .box li .top { position: relative; background-color: var(--gray-100); border-radius: 10px;}
.estmCell .vehicle .choice .box li .top button { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; position: relative; padding: 10px 15px; width: 100%; text-align: left; gap: 10px; border: 1px solid var(--gray-300); background-color: var(--bg-white); border-radius: 10px;}
.estmCell .vehicle .choice .box li .top button::after {position: absolute; content: ''; width: 20px; height: 20px; top: 50%; right: 10px; transform: translateY(-50%); background: url(../images/icons/icon_arrowdown.svg) no-repeat center/contain;}
.estmCell .vehicle .choice .box li.on .top button {border-bottom: none; border-radius: 10px 10px 0 0;}
.estmCell .vehicle .choice .box li.on .top button::after, .estmCell .vehicle .choice .box li.view .top button::after { transform: translateY(-50%) rotate(180deg);}
.estmCell .vehicle .choice .box li .top button .title {width: 45px; white-space: nowrap; color: var(--primary-navy); font-size: 13px; font-weight: 700;}
.estmCell .vehicle .choice .box li:last-child .top button {padding-right: 60px;}
.estmCell .vehicle .choice .box li .tab { display: none;} 
.estmCell .vehicle .choice .box li .cont { display: none;} 
.estmCell .vehicle.open .choice .box li.on .cont, .estmCell .vehicle.open .choice .box li.view .cont { overflow-y: auto; z-index: 1; display: flex; flex-direction: column; background-color: var(--bg-white); padding: 0 10px; border-radius: 0 0 10px 10px; border: 1px solid var(--gray-300); border-top: none;}
.estmCell .vehicle.open .choice .box li.on .filterBox { padding: 10px 15px; }
.estmCell .vehicle .choice .box li .cont .title { margin-top: 10px; border-top: 1px solid var(--gray-300); font-size: 13px; font-weight: 500; color: var(--gray-500); padding: 10px;}
.estmCell .vehicle .choice .box li .cont .blank:not(.hide) { color: var(--gray-400); text-align: center; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; min-height: 20vh; }
.estmCell .vehicle .choice .box li .cont .brandList, .estmCell .vehicle .choice .box li .cont .modelList, .estmCell .vehicle .choice .box li .cont .lineupList {margin-bottom: 10px;} 
.estmCell .vehicle .choice .box li .cont .trimBox .title {border-bottom: 1px solid var(--gray-300);}
.estmCell .vehicle .choice .box li .cont .trimBox .title .model {color: var(--main-font); font-size: 15px; font-weight: 600;}
.estmCell .vehicle .choice .box li .cont .trimBox .title .year { color: var(--main-font); background-color: var(--gray-100); padding: 3px 9px; border-radius: 30px; font-size: 12px; width: fit-content; margin: 5px 0;}
.estmCell .vehicle .choice .box li .cont .trimBox .title .sub {display: block; text-align: right; font-size: 12px;}
.estmCell .vehicle .choice .top .data {width: calc(100% - 55px); display: flex; align-items: center; gap: 5px; padding-right: 20px; }
.estmCell .vehicle .choice .top .data.estmRslt_lineupName .year {/* width: 100%;  */font-size: 12px; color: var(--gray-500);}
.estmCell .vehicle .choice .top .data .name {color: var(--main-font); font-weight: 700;}
.estmCell .vehicle .choice .top .data .name .sub {color: var(--gray-500); font-size: 12px; display: block;}
.estmCell .vehicle .choice .top .data .logo {display: flex; max-width: 40px;}
.estmCell .vehicle .choice .top .data .car {display: flex; max-width: 40px;}
.estmCell .vehicle .choice .top .data .car img {width: 100%;}
.estmCell .vehicle .choice .top .data .info { display: none; }
.estmCell .vehicle .choice .top .data .price { display: none; }
.estmCell .vehicle .choice .buttonBox {display: none;}
.estmCell .vehicle .choice .price .title {margin-right: 5px;}
.estmCell .vehicle .choice .price .num {margin-right: 5px; color: var(--primary-orange);}
.estmCell .vehicle .choice .price .num::after {content: ' 원';}
.estmCell .vehicle .btn {display: none;}
.estmCell .vehicle .btn button.updown { position: absolute; top: 50%; transform: translateY(50%) rotate(180deg); right: 0; width: 40px; height: 40px; background: url(../images/icons/icon_arrowup_white.svg) no-repeat center; background-size: 40%; border-radius: 30px; box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; background-color: var(--primary-navy); font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.estmCell .vehicle .modelList li button, .estmCell .vehicle .modelList li a {gap: 0;}
.estmCell .vehicle .modelList li.state3::after {border-radius: 5px; padding: 2px 6px; top: 5px; right: 5px; left: unset;}
.estmCell .vehicle .modelList li.e::before { content: ''; top: 5px; left: 5px; width: 20px; height: 20px; padding: 0; background: transparent url(../images/icons/icon_electronic.png) no-repeat center / contain;}
.estmCell .vehicle .modelList li.x::before { content: ''; top: 5px; left: 5px; width: 20px; height: 20px; padding: 0; background: transparent url(../images/icons/icon_eco.png) no-repeat center / contain;}
.estmCell .vehicle .modelList li.e.x::before { width: 30px; background: transparent url(../images/icons/icon_electroniceco.png) no-repeat center / contain; }
/* choiced */ 
.estmCell .vehicle .choiced:not(.hide) { display: block; }
.estmCell .vehicle .choiced .box { display: flex; justify-content: space-between; }
.estmCell .vehicle .choiced .box li .cont .logo img { width: 60px;}
.estmCell .vehicle .choiced .box li .cont .car img { width: 100px; }
/* choice, choiced summary  공통 사용 */
.estmCell .vehicle .summary .btns { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; border-radius: 5px; margin-bottom: 10px; }
.estmCell .vehicle .summary button, .estmCell .vehicle .summary a {padding: 3px 9px; font-weight: 600; border-radius: 5px; font-size: 12px; background-color: var(--bg-white); border: 1px solid var(--gray-300); color: var(--gray-500); }
.estmCell .vehicle .summary .price .num { position: relative; color: var(--primary-orange); font-weight: 700;}
.estmCell .vehicle .summary .price .num::after {content: ' 원';}
.estmCell .vehicle .choice .summary {display: none;}
.estmCell .vehicle .choiced .summary {position: relative; margin-top: 10px;}
.estmCell .vehicle .choiced .summary::after {content: ''; display: block; height: 0; clear: both; visibility: hidden; }
.estmCell .vehicle .choiced .summary .btns { float: left;}
.estmCell .vehicle .choiced .summary .price { float: right; font-size: 20px; font-weight: 700; }
.estmCell .vehicle .choiced .summary .price .title {color: var(--main-font); margin-right: 10px;}

/* 모델 예외처리 */
.wrapper[path^="estimate"] .modelList {align-items: flex-start;}
.wrapper[path^="estimate"] .modelList li button .car, .wrapper[path^="estimate"] .modelList li a .car {padding: 15px 10px 10px 10px; border-radius: 10px;}
.wrapper[path^="estimate"] .modelList li button .car img, .wrapper[path^="estimate"] .modelList li a .car img {max-width: 100px;} 
 
/* 라인업 */
.lineupList { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
.lineupList li {position: relative; width: 100%;}
.lineupList li button {width: 100%; padding: 10px; border-radius: 10px;}
.lineupList li button .year {text-align: left; font-size: 12px; color: var(--gray-500);}
.lineupList li button .name { width: 100%; position: relative; text-align: left; word-break: keep-all; color: var(--gray-500);}
.lineupList li button .name .sub { float: right; text-align: right; font-size: 12px; }
.lineupList li.on button { border: 1px solid var(--primary-orange); background-color: var(--orange-100);}
.lineupList li.on button .name { color: var(--primary-orange);}
.lineupList li.state3::after { content: "재고 한정"; position: absolute; top: 9px; right: 10px; background-color: rgba(0,0,0,0.05); padding: 2px 6px; border-radius: 5px; font-size: 10px; color: var(--main-font);}
/* 트림 */
.trimList { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px; margin-top: 10px;}
.trimList li {position: relative; width: 100%;}
.trimList li button { color: var(--gray-500); padding: 10px; width: 100%; border-radius: 10px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
.trimList li button .name {width: 100%; text-align: left; word-break: break-word;}
.trimList li button .info {width: 55%; text-align: left; font-size: 12px;}
.trimList li button .price {width: 45%; text-align: right;}
.trimList li.on button { border: 1px solid var(--primary-orange); background-color: var(--orange-100); color: var(--primary-orange);} 
.trimList li.state3::after { content: "재고 한정"; position: absolute; top: 1px; right: 4px; background-color: rgba(0,0,0,0.05); padding: 2px 6px; border-radius: 5px; font-size: 10px; color: var(--main-font);}

@media screen and (min-width: 600px) { 
    .lineupList li button .name .sub {width: auto;}
} 
@media screen and (min-width: 1000px) {
    .estmCell .vehicle .modelList li.e::before {top: 3px; right: 3px;}
    .estmCell .vehicle .modelList li.x::before {top: 3px; right: 3px;}
    .estmCell .vehicle .choice { border: 1px solid var(--gray-300); border-radius: 10px; background-color: var(--bg-white);}
    .estmCell .vehicle .choice .box {flex-direction: row; flex-wrap: nowrap; align-items: stretch;}
    .estmCell .vehicle .choice .box > li {flex: 1; display: block;}
    .estmCell .vehicle .choice .box li .cont {height: 350px; padding: 0 10px; overflow-y: auto; }
    .estmCell .vehicle .choice .box li .top { position: relative; flex: 1; background-color: var(--bg);}
    .estmCell .vehicle .choice .box li:last-child .top::after{position: relative;}
    .estmCell .vehicle .choice .box li .top::after {position: relative;}
    .estmCell .vehicle .choice .box li .top button { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; height: 100%; background-color: var(--bg-white); min-height: 90px; border: none;}
    .estmCell .vehicle .choice .box li .top button::after {position: relative; content: none;}
    .estmCell .vehicle .choice .box li .top button .title {width: auto;}
    .estmCell .vehicle .choice .box li.on .top button::after, .estmCell .vehicle .choice .box li.view .top button::after {position: relative; content: none;}
    .estmCell .vehicle .choice .box li:first-child .cont {display: none;}
    .estmCell .vehicle .summary .btns {margin-bottom: 0;}
    .estmCell .vehicle .choice .buttonBox {display: block; }
    .estmCell .vehicle .choice .buttonBox button {display: none;}
    .estmCell .vehicle .choice .top .data {padding: 0; width: 100%;}
    .estmCell .vehicle .btn { display: block; position: absolute; right: 10px; top: 10px;}
    /* fixed */  
    .wrapper.fixed .estmCell .vehicle {padding-top: 120px;}
    .wrapper.fixed .estmCell .vehicle .choice {position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 5px; max-width: 1170px; z-index: 46;}
    .wrapper.fixed .estmCell .vehicle:not(.open) .choice > .summary {display: flex; align-items: center; justify-content: space-between; padding: 0 10px 10px 10px;}
    .wrapper.fixed .estmCell .vehicle:not(.open) .choice > .summary .price {font-size: 16px;}
    /* open일 경우 */ 
    .wrapper[path^="estimate"] .modelList li, .wrapper[path$="compare"] .modelList li {width: calc(25% - 12.5px);}
    .wrapper[path^="estimate"] .brandList li, .wrapper[path$="compare"] .brandList li {width: calc(25% - 7.5px);}
    .estmCell .vehicle.open .choice .box { /* padding-bottom: 20px; */ gap: 0;} 
    .estmCell .vehicle.open .choice .box > li.on {flex: 2;} 
    .estmCell .vehicle.open .choice .box li .top .data { display: none; } 
    .estmCell .vehicle.open .choice .box li .top button {flex-direction: row; width: 100%; height: auto; background-color: var(--gray-100); border-radius: 0; min-height: auto;}
    .estmCell .vehicle.open .choice .box li:first-child .top button {border-radius: 10px 0 0 0;}
    .estmCell .vehicle.open .choice .box li:last-child .top button {border-radius: 0 10px 0 0;}
    .estmCell .vehicle.open .choice .box li.on .top button {background-color: var(--bg-white);} 
    .estmCell .vehicle.open .choice .box li.on .top { background-color: var(--bg-white);}
    .estmCell .vehicle.open .choice .box li .cont .title {margin-top: 0;} 
    .estmCell .vehicle.open .choice .box li.on .tab { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 5px; position: absolute; top: 8px; right: 15px;}
    .estmCell .vehicle.open .choice .box li.on .tab button {padding: 3px 9px; color: var(--gray-500); border-radius: 30px; border: 1px solid var(--gray-300); font-size: 12px; display: flex;}
    .estmCell .vehicle.open .choice .box li.on .tab button.E::before { content: ''; width: 18px; height: 18px; background: transparent url(../images/icons/icon_electronic.png) no-repeat center / contain;}
    .estmCell .vehicle.open .choice .box li.on .tab button.X::before { content: ''; width: 18px; height: 18px; background: transparent url(../images/icons/icon_eco.png) no-repeat center / contain;}
    .estmCell .vehicle.open .choice .box li.on .tab button.on {background-color: var(--gray-100); border-color: var(--gray-100); color: var(--main-font); }
    .estmCell .vehicle.open .choice .box li .cont { display: block;}
    .estmCell .vehicle.open .choice .box li.on .cont, .estmCell .vehicle.open .choice .box li.view .cont {border-top: 0; border: none;}
    .estmCell .vehicle.open .choice .buttonBox button:not(.hide) {display: block; width: 100%; border-radius: 0 0 10px 10px; border: 1px solid var(--gray-300); background-color: var(--bg); color: var(--main-font); padding: 5px 10px; font-size: 14px;}
    .estmCell .vehicle.open .choiced {display: none;} 
    .estmCell .vehicle.open .btn { top: 1px; }
    .estmCell .vehicle.open .btn button.updown {background: url(../images/icons/icon_arrowup_white.svg) no-repeat center; background-size: 40%; background-color: var(--primary-navy); border-radius: 30px; transform: rotate(360deg); box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;} 

    /* 예외처리 */
    .estmCell .vehicle .choice .box li:not(.on) .brandList {flex-direction: column; flex-wrap: nowrap; align-items: flex-start;}
    .estmCell .vehicle .choice .box li:not(.on) .brandList li {width: 100%;}
    .estmCell .vehicle .choice .box li:not(.on) .brandList li button {width: 100%; flex-direction: row; justify-content: flex-start; gap: 10px;}
    .estmCell .vehicle .choice .box li:not(.on) .brandList li button .logo {max-width: 45px;}
    .estmCell .vehicle .choice .box li:not(.on) .cont .title:first-child { border-top: none; }
    .estmCell .vehicle .choice .box li:not(.on) .modelList {flex-direction: column; flex-wrap: nowrap; align-items: flex-start;}
    .estmCell .vehicle .choice .box li:not(.on) .modelList li {width: 100%;}
    .estmCell .vehicle .choice .box li:not(.on) .modelList li button {width: 100%; flex-direction: row; justify-content: flex-start; padding: 10px; gap: 5px;}
    .estmCell .vehicle .choice .box li:not(.on) .modelList li button .name {text-align: left;}
    .estmCell .vehicle .choice .box li:not(.on) .modelList li.state3::after {top: 0; right: 0; left: unset;}
    .estmCell .vehicle .choice .box li:not(.on) .modelList li button .car {width: 50px; background: transparent; padding: 0;} 
    .estmCell .vehicle .choice .box li:not(.on) .modelList li button .name {flex: 1;}
    .estmCell .vehicle .choice .box li:not(.on) .modelList li.e::before {top: 0; left: 0;}
    .estmCell .vehicle .choice .box li:not(.on) .modelList li.x::before {top: 0; left: 0;}
    .estmCell .vehicle .choice .box li:not(.on) .lineupList li {padding: 0;}
    .estmCell .vehicle .choice .box li:not(.on) .lineupList li button .name {font-size: 13px; text-align: left; letter-spacing: -.5px;}
    .estmCell .vehicle .choice .box li:not(.on) .trimList li button {justify-content: space-between; font-size: 13px; letter-spacing: -.5px;}
    .estmCell .vehicle .choice .box li:not(.on) .trimList li button .info, .estmCell .vehicle .choice .box li:not(.on) .trimList li button .price {width: auto; letter-spacing: -.5px;}
    .estmCell .vehicle .choice .box li:not(.on) .filterBox {padding: 10px 15px; border: none;}
    .estmCell .vehicle .choice .box li:not(.on) .filterBox .filterList li {flex-direction: column; gap: 10px;}
    .estmCell .vehicle .choice .box li:not(.on) .filterBox .filterList li .list {width: 100%;}
    .estmCell .vehicle .choice .cont::-webkit-scrollbar {width: 5px;} 
    .estmCell .vehicle .choice .cont::-webkit-scrollbar-track {background-color: transparent;}
    .estmCell .vehicle .choice .cont::-webkit-scrollbar-thumb {background-color: var(--gray-300);}
    .estmCell .vehicle .choice .cont::-webkit-scrollbar-track, .estmCell .vehicle .choice .cont::-webkit-scrollbar-thumb {border-radius: 30px; cursor: pointer; }
    /* 견적 화면 처리 */
    .estmBox.start .estmCell .vehicle .choice .box li .cont {height: 600px;}
    .estmBox.start .estmCell .vehicle .btn { display: none;}
   
}
@media screen and (min-width: 1200px) {
    .wrapper.fixed .estmCell .vehicle .choice {left: unset; transform: unset;}
}
@media screen and (min-width: 1900px) {
    .wrapper.fixed.wide .estmCell .vehicle .choice {width: calc(60% - 114px - 7.5px); max-width: unset;}
}

/* 옵션 - setting */ 
.wrapper[path="estimate_leaserent"] .estmCell .setting .top {background-color: var(--primary-lightnavy); border-color: var(--primary-lightnavy);}
.wrapper[path="estimate_leaserent"] .estmCell .compare .fincCell .top .title {background-color: var(--primary-lightnavy); border-color: var(--primary-lightnavy);}
.estmCell .setting { display: flex; flex-direction: column; flex-wrap: nowrap; margin-top: 30px; gap: 30px;}
.estmCell .setting > div { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; color: var(--main-font); border: 1px solid var(--gray-300); border-radius: 10px; background-color: var(--bg-white);}
.estmCell .setting > div .sum { position: relative; border-radius: 0 0 10px 10px; padding: 15px; background-color: var(--gray-200);}
.estmCell .setting > div .sum div:not(.taxMod) { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; font-weight: 500; }
.estmCell .setting > div .sum .total .price, .estmCell .setting > div .sum .total .title {font-size: 18px; font-weight: 700;}
.estmCell .setting > div .sum .total .price { color: var(--primary-orange);}
.estmCell .setting > div .cont {position: relative;/*  padding: 0 10px; */}
.estmCell .setting .top { position: relative; border: 1px solid var(--primary-navy); color: var(--white); background-color: var(--primary-navy); padding: 8px 20px; border-radius: 10px 10px 0 0; text-align: left; font-size: 16px; font-weight: 700;}
.estmCell .setting .top .btnBox { position: absolute; top: 50%; transform: translateY(-50%); right: 20px; display: flex; align-items: center; gap: 10px;} 
.estmCell .setting .top .btnBox button { border-bottom: 1px solid var(--gray-400); color: var(--gray-400); font-size: 12px;}
.estmCell .btn {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.estmCell .btn .updown { width: 35px; height: 35px; background: url(../images/icons/icon_arrowup_white.svg) no-repeat center; background-size: 40%; background-color: var(--primary-navy); border-radius: 30px; transform: rotate(360deg);font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;} 
.estmCell .btn .left, .estmCell .compare .fincCell .config .btn .right {padding: 5px 20px; background-color: var(--bg-white); border: 1px solid var(--gray-300); border-radius: 5px; font-size: 12px;}
.estmCell .btn .left {position: absolute; left: 10px;}
.estmCell .btn .right {position: absolute; right: 10px;}
.estmCell .taxMod { position: absolute; left: 88px; bottom: 18px; }
.estmCell .taxMod button { font-size: 12px; margin-left: 5px; border: 1px solid var(--gray-100); width: 30px; background: var(--bg-white); border-radius: 30px;}
.estmCell .taxMod button.on {border: 1px solid var(--primary-navy); background-color: var(--primary-navy); color: var(--white);}
/* 선택 Bar */
.estmBar { border-bottom: 1px solid var(--gray-300); }
.estmBar:last-child {border-bottom: none;}  
.estmBar > .btn button { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; padding: 12px 35px 12px 10px; border: 1px solid transparent;}
.estmBar > .btn button::after {position: absolute; content: ''; width: 24px; height: 24px; top: 10px; right: 8px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center/contain;}
.estmBar.open > .btn button::after {background: url(../images/icons/icon_arrowdown_orange.svg) no-repeat center/contain; transform: rotate(180deg);}
.estmBar .btn button .title {width: 60px; color: var(--gray-500); text-align: left; font-size: 13px; font-weight: 400;}
.estmBar .btn button .choiced {width: calc(100% - 60px); display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; }
.estmBar .btn button .choiced .data { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: baseline; width: 100%; font-size: 13px;}
.estmBar .btn button .choiced .data .count, .estmBar .btn button .choiced .data .name {width: 60%; text-align: left; font-weight: 400; font-size: 13px;}
.estmBar .btn button .choiced .data .price {width: 40%; text-align: right; font-weight: 700; }
.estmBar .btn button .choiced .sub:not(.hide) {width: 100%; display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; margin-top: 5px; }
.estmBar .btn button .choiced .sub li { width: 100%; display: flex; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; align-items: baseline;}
.estmBar .btn button .choiced .sub li span {color: var(--gray-500); font-size: 13px; letter-spacing: -.5px; font-weight: 400;}
.estmBar .btn button .choiced .sub li span.name {width: 70%; text-align: left; word-break: keep-all;}
.estmBar .btn button .choiced .sub li span.price {width: 30%; text-align: right;}
.estmBar .list { display: none; position: relative; }
.estmBar .list .info { width: 100%; display: block; color: var(--gray-400); font-size: 13px; }
.estmBar .list .accent { color: var(--primary-orange); }
.estmBar .list ul:not(.optionList) .data:not(.hide) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: 10px;}
.estmBar ul li.self button {padding: 10px 10px 30px 40px;}
.estmBar ul li.self .btnDelSelf {position: absolute; bottom: 4px; right: 3px; color: var(--gray-400); font-size: 12px; padding: 3px 9px; } 
.estmBar .nodata::before {width: 30px; height: 30px;}
.estmBar .nodata::after { content: "선택할 항목이 없습니다.\A필요시 직접 추가할 수 있습니다."; white-space: pre-line; font-weight: 700; color: var(--gray-500);} 
/* 면세 */
.estmBar.taxfree .subList {margin-top: 10px;}
.estmBar.taxfree.open .taxYearCheck {display: none;}
.estmBar .check:not(.hide) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px 0; padding: 0 10px 10px 70px;}
.estmBar .check .name {flex: 1;}
.estmBar .check .price { max-width: 100px;}
.estmBar .check .price input[type="text"] {font-weight: 700; text-align: right; padding: 5px;}
.estmBar .check span { font-size: 13px;}
.estmBar .list .data.taxfreeCheck {margin-bottom: 10px;}
.estmBar .list .deliveryTab {display: flex; flex-wrap: wrap; gap: 0 10px; align-items: center;} 
.estmBar .taxYearCheck [class^="tax"], .estmData .bondTypeCheck [class^="tax"] {width: 100%; font-size: 13px; color: var(--gray-500);}
.estmBar .taxYearCheck [class^="estmRslt"], .estmData .bondTypeCheck [class^="estmRslt"] {float: right; color: var(--gray-500);}
/* open일 경우 */
.estmBar.open .btn .sub { display: none; }
.estmBar.open > .btn button {border: 1px solid var(--primary-navy); border-bottom: 0; /* border-radius: 10px 10px 0 0; */background-color: var(--gray-100);}
.estmBar.open .btn button .choiced .sub { display: none; }
.estmBar.open .list { display: block; position: absolute; padding: 10px; width: 100%; left: 0; background-color: var(--bg-white); z-index: 11;}
.estmBar.open > .list {border: 1px solid var(--primary-navy); border-top: none; border-radius: 0 0 10px 10px;}
.estmBar.open .list .btn {padding-top: 10px;}
.estmBar.open .list .title { position: relative; color: var(--navy-font); padding-left: 13px; font-weight: 700; font-size: 15px;}
.estmBar.open .list .title::before { position: absolute; content: ''; top: 50%; left: 3px; transform: translateY(-50%); background-color: var(--navy-font); width: 3px; height: 65%; border-radius: 2px;} 
.estmBar.open .list::-webkit-scrollbar { width: 5px;}
.estmBar.open .list::-webkit-scrollbar-track { background-color: transparent;}
.estmBar.open .list::-webkit-scrollbar-thumb { background-color: var(--gray-300);}
.estmBar.open .list::-webkit-scrollbar-track, .estmBar.open .list::-webkit-scrollbar-thumb { border-radius: 30px; cursor: pointer; }
/* 색상 선택*/
.estmBar.colorExt .btn button .choiced .data .name, .estmBar.colorInt .btn button .choiced .data .name {width: 65%; text-align: left;}
.estmBar .btn button .choiced .data .colorChip { position: relative; display: flex; flex-direction: column; padding-right: 5px;}
.estmBar .btn button .choiced .data .colorChip .colorMain {position: relative; display: inline-block; width: 26px; height: 26px; border: 1px solid var(--gray-300); border-radius: 50%;}
.estmBar .btn button .choiced .data .colorChip .colorSub { position: absolute; display: inline-block; width: 26px; height: 13px; border-radius: 30px 30px 0 0; border: 1px solid var(--gray-300); border-bottom: none;}
.colorList { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px;}
.colorList li {width: 100%; position: relative;}
.colorList li button {position: relative; width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; padding: 10px 10px 15px 10px; border: 1px solid transparent; border-radius: 10px;}
.colorList li.on button {background-color: var(--orange-100); border: 1px solid var(--primary-orange);}
.colorList li.on button .name, .colorList li.on button .price {color: var(--primary-orange)}
.colorList li button .colorChip { position: relative; display: flex; flex-direction: column;}
.colorList li button .colorChip .colorMain {position: relative; display: inline-block; width: 36px; height: 36px; border: 1px solid var(--gray-300); border-radius: 50%;}
.colorList li button .colorChip .colorSub { position: absolute; display: inline-block; width: 36px; height: 18px; border-radius: 30px 30px 0 0; border: 1px solid var(--gray-300); border-bottom: none;}
.colorList li button .colorPrice { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; align-items: baseline; width: 100%; }
.colorList li button .name {width: 100%; text-align: left; padding-left: 10px; font-size: 13px;}
.colorList li button .price {font-weight: 700; padding-left: 10px;}
.colorList li.selNot button { width: 100%; background-color: var(--gray-100); border-radius: 10px; padding: 8px 0; text-align: center; justify-content: center; color: var(--gray-500); font-weight: 500;}
.colorList li.dis button { background-color: var(--gray-100); opacity: .7;}
.colorList li.dis button::after { position: absolute; right: 10px; bottom: 0; font-size: 12px; color: var(--navy-font); }
.colorList li.dis[dis='optionJoin'] button::after { content: '연계된 옵션 선택 필요'; }
.colorList li.dis[dis='optionNot'] button::after { content: '선택된 옵션 선택 필요'; }
.colorList li.dis[dis='intNot'] button::after { content: '선택된 내장 조합 불가'; }
.colorList li.dis[dis='extNot'] button::after { content: '선택된 외장 조합 불가'; }
.colorList li button .icons { display: inline-block; vertical-align: middle; }
.colorList li button .icons .photo {width: 30px; height: 24px; background: url(../images/icons/icon_image_gray.svg) no-repeat 0px 3px; background-size: 52%; vertical-align: middle; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; display: inline-block; }
.colorList li.dis button .icons { display: inline-block; }
.colorList li.state3::after {content: "재고 한정"; position: absolute; top: 1px; right: 5px; background-color: rgba(0,0,0,0.05); padding: 2px 6px; border-radius: 30px; font-size: 10px; font-weight: 500; color: var(--gray-500);}
/* 옵션 목록 */ 
.optionList { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 5px;}
.optionList li button .data::after, .optionList li label .data::after { content: '';  display: block; clear: both;}
.optionList li { width: 100%; position: relative; }
.optionList li button, .optionList li label { width: 100%; position: relative; display: block; text-align: left; /* display: flex; justify-content: flex-start; flex-direction: row;  flex-wrap: wrap;  align-items: center; */ border-radius: 10px;padding: 10px 10px 20px 40px; gap: 3px;}
.optionList li button::before, .optionList li label::before {position: absolute; content: ''; top: 10px; left: 10px; width: 20px; height: 20px; background: url(../images/icons/icon_checkBox_outline.svg) no-repeat center/contain; border-radius: 3px;}
.optionList li.on button::before, .optionList li.on label::before {background: url(../images/icons/icon_checkBox_on.svg) no-repeat center/contain;}
.optionList li button .data, .optionList li label .data {position: relative; display: block; /*  width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; */}
.optionList li button .data .name, .optionList li label .data .name { display: inline;  font-weight: 400; text-align: left; vertical-align: middle; /*  width: 65%; text-align: left; display: flex; align-items: flex-start; */}
.optionList li button .data .price, .optionList li label .data .price { /* width: 35%; text-align: right;  */  float: right; padding-left: 20px; white-space: nowrap; font-weight: 700;}
.optionList li button .data .icons { display: inline-block; vertical-align: middle;}
.optionList li button .data .icons .help {width: 30px; height: 24px; background: url(../images/icons/icon_help.svg) no-repeat 0px 3px; background-size: 50%; vertical-align: middle; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; display: inline-block;}
.optionList li button .data .icons .photo {width: 30px; height: 24px; background: url(../images/icons/icon_image_gray.svg) no-repeat 0px 3px; background-size: 52%; vertical-align: middle; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; display: inline-block;}
.optionList li button .data .icons .all {width: 48px; height: 24px; background: url(../images/icons/icon_infoImage.svg) no-repeat 0px 3px; background-size: 65%; vertical-align: middle; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; display: inline-block;}
.optionList li button .info, .optionList li label .info { color: var(--gray-500); text-align: left; font-size: 13px; letter-spacing: -.1px; }
.optionList li.dis button {background-color: var(--gray-100); opacity: .7; }
.optionList li.dis button::before {display: none;}
.optionList li.dis button::after { position: absolute; right: 10px; bottom: 5px; font-size: 12px; color: var(--navy-font);}
.optionList li.dis button {padding: 10px 10px 20px 40px;}
.optionList li.dis[dis='sub'] button::after, .optionList li.dis[dis='sub'] label::after { content: '연계된 옵션 선택 필요';}
.optionList li.dis[dis='sub2'] button::after, .optionList li.dis[dis='sub2'] label::after { content: '선택된 옵션 선택 필요';}
.optionList li.dis[dis='anti'] button::after, .optionList li.dis[dis='anti'] label::after { content: '선택된 옵션 조합 불가';}
.optionList li.dis[dis='intNot'] button::after, .optionList li.dis[dis='intNot'] label::after { content: '선택된 내장 조합 불가';}
.optionList li.dis[dis='extNot'] button::after, .optionList li.dis[dis='extNot'] label::after { content: '선택된 외장 조합 불가';}
.optionList li.default button {padding-bottom: 20px; }
.optionList li.default button::after { position: absolute; right: 10px; bottom: 5px; font-size: 12px; color: var(--primary-blue); content: '필수 선택 옵션';}
.optionList li.state3::after {content: "재고 한정"; position: absolute; top: -7px; right: 5px; background-color: rgba(0,0,0,0.05); padding: 3px 9px; border-radius: 30px; font-size: 10px; font-weight: 500; color: var(--gray-500);}
/* 용품 */
.partsList { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
.partsList li { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; }
.partsList li > div.name {width: 70px;color: var(--gray-500);font-weight: 400; font-size: 13px; }
.partsList li > div:not(.name) {width: calc(100% - 70px); position: relative; }
.partsList li .select {width: calc(100% - 70px);}
.partsList li select, .partsList li input[type='text'] { width: 100%;}
.partsList li .pre {position: absolute; top: 50%; left: 8px; transform: translateY(-50%); z-index: 1;}
.partsList li button {position: absolute; right: 8px; top: 50%; transform: translateY(-50%);}
.partsList li .select:not(.self) input, .partsList li .select:not(.self) button { display: none;}
/* 직접 입력 */
.estmSelf:not(.hide) { position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px; margin-top: 10px; border-top: 1px solid var(--gray-300); padding-top: 10px;}
.estmSelf > div { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 10px; }
.estmSelf > div .name {width: 40px; color: var(--gray-500); font-weight: 500;}
.estmSelf > div select, .estmSelf > div input { width: calc(80% - 50px); }
.estmSelf > div .explan {width: 20%; text-align: right; font-size: 12px; font-weight: 500; color: var(--primary-orange); white-space: nowrap;}
.estmSelf > div .inputBox {width: calc(80% - 50px);}
.estmSelf .buttonBox { width: auto; position: absolute; bottom: 0; right: 10px;} 
.estmSelf .buttonBox button { padding: 5px 10px; font-size: 12px;}
/* .estmSelf > div.price {position: relative;} */
/* .estmSelf > div.price input[type="text"] {padding: 8px 25px 8px 10px} */
/* .estmSelf > div.price span.unit {position: absolute; right: 25%; top: 50%; transform: translateY(-50%);} */
/* 예상 납기일 */
.estmShip:not(.hide) { display: flex; flex-wrap: wrap; align-items: stretch; padding: 12px 10px; width: 100%; border-bottom: 1px solid var(--gray-300);} 
.estmShip .title { width: 60px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; color: var(--gray-500); font-size: 13px;} 
.estmShip .detail .buttonBox {width: auto; justify-content: flex-end;} 
.estmShip .detail .buttonBox a, .estmShip .detail .buttonBox button { padding: 2px 6px; font-size: 12px; border-radius: 5px; flex: unset;}
.estmShip .detail {width: calc(100% - 60px);}
.estmShip .detail .sub { width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; gap: 3px;}
.estmShip .detail .sub li { position: relative; width:100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; color: var(--gray-500); font-size: 13px; gap: 0 5px; letter-spacing: -.5px; }
.estmShip .detail .sub li.focus {color: var(--primary-orange);font-weight: 700;}
.estmShip .detail .sub li .ref {font-size: 12px; color: var(--gray-500);}
.estmShip.two {gap: 0;}
.estmShip.two .right {width: calc(100% - 60px);}
.estmShip.two .buttonBox {justify-content: flex-start; margin-bottom: 10px;}
.estmShip.two .title {width: 60px; align-items: baseline;}
.estmShip [data-tooltip]:hover:before {border: 1px solid var(--bg-white);}

/* gap표시 */
.estmGap span { position: relative; font-size: 12px; font-weight: 400; letter-spacing: -.5px; }
.estmGap .down { color: var(--primary-blue); }
.estmGap .down::before { content: '- '; }
.estmGap .up { color: var(--primary-red); }
.estmGap .up::before { content: '+ '; }



/* 데이터 표시 */
.estmData { padding: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; border-bottom: 1px solid var(--gray-300); }
.estmData:last-child {border-bottom: none;}
.estmData .title {width: 55px; text-align: left; color: var(--gray-500); font-weight: 400; font-size: 13px; }
.estmData .choice { width: calc(100% - 55px); display: flex; flex-direction: column; flex-wrap: nowrap; gap: 5px; }
.estmData .choice .data:not(.hide) { position: relative;  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px;}
.estmData .choice .data input[type="text"] {max-width: 75px; padding: 5px; font-weight: 700;}
.estmData .choice .data .desc:not(.wide) { text-align: left; width: calc(65% - 5px);}
.estmData .choice .data .desc button {font-size: 12px; color: var(--white); background-color: var(--primary-navy); padding: 2px 6px; border-radius: 3px;}
.estmData .choice .data .desc .setTakeExtra { padding: 0; border-radius: 0; position: absolute; margin-left: 3px; width: 18px; height: 18px; background: url(../images/icons/icon_setting.svg) no-repeat center bottom; background-size: 85%; text-indent: -9999px; font-size: 0;}
.estmData .choice .data .price { text-align: right; width: calc(35% - 5px); font-weight: 700;}
.estmData .choice .data .priceS { text-align: right; }
.estmData .choice .data .estmGap { position: absolute; bottom: -14px; right: 0; }
/* 할인 */
.discountList {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;}
.discountList > li { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; width: 100%; border-top: 1px solid var(--gray-300); padding: 10px 0;}
.discountList > li:first-child {padding-top: 0; border-top: 0;}
.discountList > li .name { position: relative; padding-left: 10px; font-weight: 700; color: var(--navy-font); display: flex; align-items: center;}
.discountList > li .name::before { position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); background-color: var(--navy-font); width: 3px; height: 65%; border-radius: 2px;}
.discountList > li .name .help {width: 25px; height: 25px; background: url(../images/icons/icon_help.svg) no-repeat center; background-size: 65%; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.discountList > li .sub {width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; gap: 5px;}
.discountList > li .sub li {position: relative;}
.discountList > li .sub li button {position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 10px 20px 40px;}
.discountList > li .sub li button .require {text-align: left;}
.discountList > li .sub li button .price input {max-width: 100px;}
.discountList > li .sub li button::before {position: absolute; content: ''; top: 10px; left: 10px; width: 20px; height: 20px; background: url(../images/icons/icon_radio_outline.svg) no-repeat center/contain;}
.discountList > li .sub li.on button::before {background: url(../images/icons/icon_radio_on.svg) no-repeat center/contain;}
.discountList > li .sub li.on button {color: var(--primary-orange);}
.discountList > li.self .sub li button {padding: 10px 10px 30px 35px;}
.estmBar .discountList li.self .btnDelSelf {bottom: 15px; right: 10px;} 
.discountList > li.dis button {padding: 10px 10px 20px 40px;}
.discountList > li.dis .sub button {opacity: .7; background-color: var(--gray-100); padding: 10px 10px 20px 40px; border-radius: 5px; }
.discountList > li.dis::before {display: none;} 
.discountList > li.dis .sub button::after { position: absolute; right: 10px; bottom: 5px; font-size: 12px; color: var(--primary-red);}
.discountList > li.dis[dis='sub'] .sub button::after { content: '연계된 할인 선택 필요';}
.discountList > li.dis[dis='anti'] .sub button::after { content: '선택된 할인 조합 불가';}
.discountList > li.notice {gap: 10px; text-align: center; font-weight: 500;}
.discountList > li.notice .buttonBox a {max-width: 150px;}
/* 전기차 지자체 보조금 */
.discountList > li .selBtn .list {display: none;}
.discountList > li .selBtn .list.open {display: flex;}
.discountList > li.hide {display: none;}
.discountList > li .box.cnt2 {width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px;}
.discountList > li .box.cnt2 .selBtn {width: calc(50% - 6.6px);} 
.discountList > li .box.cnt2 .selBtn .discountBtn { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; position: relative; padding: 8px; border-bottom: 1px solid var(--gray-300);}
.discountList > li .box.cnt2 .selBtn .discountBtn::after {position: absolute; content: ''; top: 50%; right: 10px; transform: translateY(-50%); width: 18px; height: 18px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center/contain;}
.discountList > li .box.cnt2 .selBtn .discountBtn.open::after {transform: translateY(-50%) rotate(180deg);}
/* 세부 선택 */
.estmSub {margin-top: 10px;}
.estmSub .name { width: 100%; display: flex; justify-content: flex-start; position: relative; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px;}
.estmSub .name button { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; position: relative; padding: 8px; border-bottom: 1px solid var(--gray-300); }
.estmSub .name button::after {position: absolute; content: ''; top: 50%; right: 10px; transform: translateY(-50%); width: 18px; height: 18px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center/contain;}
.estmSub .name button.on::after {transform: translateY(-50%) rotate(180deg);}
.estmSub .name.cnt3 button {width: calc(33.3% - 6.6px);} 
.estmSub .sub { /*display: none;*/ padding-top: 10px; }
.estmSub.deliveryType.self:not(.hide) { display: flex; align-items: center; gap: 10px;}
.estmSub.deliveryType.self input { width: 100%; min-width: 90px;}
.estmSub.deliveryType.self .cancel {background-color: var(--gray-100); padding: 6px 9px; font-size: 12px; border-radius: 7px; white-space: nowrap;}
.estmCell .subList:not(.hide) { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 10px; background-color: var(--bg-white);}
.estmCell .subList li { width: calc(50% - 5px);} 
.estmCell .subList li button { width: 100%; height: 100%; font-size: 13px; padding: 7px; border-radius: 7px; word-break: keep-all; background-color: var(--gray-100);}
.estmCell .subList li.on button {background-color: var(--primary-navy); color: var(--white); border-color: var(--primary-navy);} 
.estmCell .subList.cnt2 li { width: calc(50% - 5px); }
.estmCell .subList.cnt3 li { width: calc(33.3% - 6.6px); } 
.estmCell .subList li.notice { color: var(--primary-red); width: 100%; text-align: center; }
/* 금융선택 */
.estmBox:not(.start) .estmCell .compare:not(.hide) {display: flex; align-items: flex-start; gap: 10px; margin-top: 30px; color: var(--main-font); overflow-x: auto;}
.estmCell .compare .fincCell { flex: 0 0 calc((100% - 20px) / 3); min-width: 350px; background-color: var(--bg-white); border-radius: 12px; border: 1px solid var(--gray-300);}  
.estmCell .compare .fincCell .top { position: relative; }
.estmCell .compare .fincCell .top .title { border: 1px solid var(--primary-navy); background-color: var(--primary-navy); color: var(--white); padding: 8px; border-radius: 10px 10px 0 0; }
.estmCell .compare .fincCell .top .title span.no {font-size: 16px; font-weight: 700; margin-right: 10px;}
.estmCell .compare .fincCell .top .title .diff {position: absolute; top: 0; left: 2px; }
.estmCell .compare .fincCell .top .title .checked {position: absolute; top: 0; left: 2px; }
.estmCell .compare .fincCell .top .title .bar {position: relative; width: 100%; text-align: left; font-size: 16px; font-weight: 700; color: var(--white); padding-left: 35px;}
.estmCell .compare .fincCell .top .title .bar::after {position: absolute; content: ''; top: 50%; right: 10px; width: 18px; height: 18px; transform: translateY(-50%); background: url(../images/icons/icon_arrowdown_white.svg) no-repeat center/contain;}
.estmCell .compare .fincCell .top .title .bar:hover::after {background: url(../images/icons/icon_arrowdown_orange.svg) no-repeat center/contain !important; }
.estmCell .compare .fincCell .top.open .title .bar::after {background: url(../images/icons/icon_arrowdown_orange.svg) no-repeat center/contain; transform: translateY(-50%) rotate(180deg);}
.estmCell .compare .fincCell .top.open .subList { position: absolute; z-index: 2; background-color: var(--bg-white); border: 1px solid var(--primary-navy); border-radius: 0 0 10px 10px; padding: 10px;} 
.estmCell .compare .fincCell .summary button {position: relative; min-height: 50px; border-bottom: 1px solid var(--gray-300); display: flex; flex-direction: row; flex-wrap: wrap; gap: 0 10px; align-items: center; justify-content: center; width: 100%; padding: 10px 40px 10px 10px;}
.estmCell .compare .fincCell .summary button::after {position: absolute; content: ''; top: 50%; right: 20px; transform: translateY(-50%); width: 18px; height: 18px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center/contain;}
.estmCell .compare .fincCell .summary button:hover::after {background: url(../images/icons/icon_arrowdown_orange.svg) no-repeat center/contain;}
.estmCell .compare .fincCell:has(.config.open) .summary button::after { background: url(../images/icons/icon_arrowdown_orange.svg) no-repeat center/contain; transform: translateY(-50%) rotate(180deg); }
.estmCell .compare .fincCell:has(.config.open) .summary button {background-color: var(--gray-100); border: 1px solid var(--primary-navy); border-bottom: none; border-top: none;}
.estmCell .compare .fincCell .config .bar > div { position: relative; }
.estmCell .compare .fincCell .config { display: none; position: relative; border-bottom: 1px solid var(--gray-300);}
.estmCell .compare .fincCell .config.open { display: block; border: 1px solid var(--primary-navy); border-top: 0; border-radius: 0 0 10px 10px;}
.estmCell .compare .fincCell .config.open.notUp {border: none; border-bottom: 1px solid var(--gray-300);} /*{padding: 10px;} updown 버튼 없는 경우 */  
.estmCell .compare .fincCell .config .bar:not(.hide) {width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 5px 10px; padding: 10px;}
.estmCell .compare .fincCell .config .bar .title {width: 60px; color: var(--gray-500); font-size: 13px; } 
.estmCell .compare .fincCell .config .bar > :not(.title) { width:calc(100% - 70px); }
.estmCell .compare .fincCell .config .bar .full {width: calc(100% - 70px);}  
.estmCell .compare .fincCell .config .bar .radio, .estmCell .compare .fincCell .config .bar .check {display: flex; flex-wrap: wrap; gap: 5px 10px;}
.estmCell .compare .fincCell .config .bar .check input[type="checkbox"] + span {font-size: 12px; padding-left: 18px;}
.estmCell .compare .fincCell .config .bar .check input[type="checkbox"] + span:before {width: 15px; height: 15px;}
.estmCell .compare .fincCell .config .bar .half {width: calc(50% - 40px); position: relative;} 
.estmCell .compare .fincCell .config .bar .right {width: calc(50% - 40px); text-align: right; position: relative; font-weight: 700;}
.estmCell .compare .fincCell .config .bar .right.text {padding-right: 5px;} 
.estmCell .compare .fincCell .config .bar select { width: 100%; padding: 8px 25px 8px 10px; }
.estmCell .compare .fincCell .config .bar .half select, .estmBox .estmCell .compare .fincCell .config .bar .full select { padding: 8px 25px 8px 10px; }  
.estmCell .compare .fincCell .config .bar .detailView { padding: 5px 20px; background-color: var(--bg-white); border: 1px solid var(--gray-300); border-radius: 5px; font-size: 12px;}
.estmCell .compare .fincCell .config .bar .pre {position: absolute; top: 50%; left: 8px; transform: translateY(-50%); z-index: 1; font-size: 10px; color: var(--gray-500); font-weight: 400; letter-spacing: -.5px;}
.estmCell .compare .fincCell .config .bar .unit {position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--gray-500); font-size: 10px; }
.estmCell .compare .fincCell .config .bar input[type="text"] {padding: 8px 25px 8px 10px; font-weight: 500; text-align: left; } 
.estmCell .compare .fincCell .config .bar input[type="text"].price { text-align: right; }
.estmCell .compare .fincCell .config .bar input[type="text"][class*='rate'] { text-align: center; padding: 8px 25px 8px 25px; } 
.estmCell .compare .fincCell .config .bar select[name='monthH'] { text-align: center; }
.estmCell .compare .fincCell .config.fincConf .btnRadio { /* display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 10px; */ flex-wrap: nowrap;} 
.estmCell .compare .fincCell .config.fincConf .btnRadio label {flex: 1;}
.estmCell .compare .fincCell .config.fincConf .btnRadio label input[type="radio"] + span { border-radius: 7px; padding: 5px; justify-content: center;}
.estmCell .compare .fincCell .config .pmt:not(.hide) { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; border-radius: 0 0 10px 10px; padding: 15px; background-color: var(--gray-200); }
.estmCell .compare .fincCell .config .pmt .title { width: 100%; font-weight: 700; }
.estmCell .compare .fincCell .config .pmt .desc {font-size: 12px; color: var(--gray-500);}
.estmCell .compare .fincCell .config .pmt .hold { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; width: 50%; gap: 5px; }
.estmCell .compare .fincCell .config .pmt .main { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; width: 50%; gap: 5px;}
.estmCell .compare .fincCell .config .pmt .data { color: var(--primary-orange); font-weight: 700; font-size: 16px; }
.estmCell .compare .fincCell .config .btn:not(.hide) { position: relative; padding: 10px; z-index: 1; border-radius: 10px; min-height: 55px;}
.estmCell .compare .fincCell .top .list { display: none; }
.estmCell .compare .fincCell .top.open .list { display: block; }
.estmCell .compare .subList li.on button {background-color: var(--primary-navy);}
.estmCell .setting .inputBox { position: relative; display: inline-block; } /* 견적 설정 가격 입력 input 위치의 pre/unit 기능 추가 */
.estmCell .setting .inputBox input[type="text"] { padding: 8px 25px 8px 25px; width: 100%; }
.estmCell .setting .inputBox .pre {position: absolute; top: 50%; left: 8px; transform: translateY(-50%); z-index: 1; font-size: 10px; color: var(--gray-500); font-weight: 400; letter-spacing: -.5px; }
.estmCell .setting .inputBox .unit {position: absolute; top: 50%; right: 8px; transform: translateY(-50%); z-index: 1; font-size: 10px; color: var(--gray-500); font-weight: 400; letter-spacing: -.5px; }
.estmCell .setting .total { position: relative; }
.estmCell .setting .total .estmGap { position: absolute; bottom: -15px; right: 0; font-size: 12px; font-weight: 400;}
/* 공지 */
.fincCell .notice { color: var(--primary-orange); text-align: center; background-color: var(--gray-50); word-break: keep-all; border: 1px solid var(--gray-300); padding: 10px; border-radius: 10px; margin: 10px; }
.fincConf .sub:not(:first-child) { border-top: 1px solid var(--gray-300); }
/* 직접 입력 예외처리 */
.estmCell .compare .fincCell .config .bar .select:not(.self) input, .estmCell .compare .fincCell .config .bar .select:not(.self) .unit, .estmCell .compare .fincCell .config .bar .select:not(.self) button { display: none;}
.estmCell .compare .fincCell .config .bar .select.self select {display: none;}

/* 구입조건 상세설정 */
.wrapper[path="estimate_leaserent"] .estmCell .counselBar .view  {background-color: var(--primary-lightnavy);}
.wrapper[path="estimate_leaserent"] .estmCell .counselBar.open .view {background: var(--bg-white); color: var(--main-font);}
.estmCell .counselBar { margin: 30px 0; position: relative; }
.estmCell .counselBar .view { width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 5px; padding: 10px; background: var(--primary-navy); color: var(--white); border: 1px solid var(--gray-300); border-radius: 10px; font-size: 15px; }
.estmCell .counselBar .view::after { content: ''; width: 24px; height: 24px; background: url(../images/icons/icon_arrowdown_white.svg) no-repeat center / contain;}
.estmCell .counselBar.open .view{ background: var(--bg-white); color: var(--main-font); }
.estmCell .counselBar.open .view::after {background: url(../images/icons/icon_arrowdown.svg) no-repeat center / contain; transform: rotate(180deg);}
.estmCell .counselBar .add { display: none; position: absolute; width: 35px; height: 35px; top: 50%; right: 10px; border-radius: 50%; transform: translateY(-50%); background: var(--primary-navy) url(../images/icons/icon_more_white.svg) no-repeat center; background-size: 50%; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.estmCell .counselBar.open .add {display: block;}
.estmCell .counselBar .desc { color: var(--primary-orange); text-align: center; background-color: var(--gray-50); word-break: keep-all; border: 1px solid var(--gray-300); border-radius: 10px; margin-top: 15px; text-align: center; padding: 15px; }
.estmCell .counselBar.open .desc { display: none; }
.estmCell[fincLen='3'] .counselBar .add { display: none; } 
/* 비교항목 삭제 */
.estmCell .compare .fincCell .top .title button.del { position: absolute; top: 0px; right: 40px; width: 40px; height: 40px; background: url(../images/icons/icon_trash.svg) no-repeat center; background-size: 50%; z-index: 10; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; }
.estmCell .compare .fincCell .delFincCell { display: none; }
.estmCell .compare .fincCell .config {position: unset; }
.estmCell[fincLen='2'] .fincCell[fincNo='2'] .delFincCell { display: inline-block; }
.estmCell[fincLen='3'] .fincCell[fincNo='3'] .delFincCell { display: inline-block; }
/* 금융설정 복사/전체적용 */
.estmCell .fincCell .config .btn .right.applyAll { display: none; }
.estmCell .fincCell .pmt .main { position: relative; } 
.estmCell .fincCell .pmt .main .estmGap { position: absolute; top: -22px; right: 10px; }
.estmCell[fincLen='3'] .fincCell .config .btn .right.applyAll { display: inline-block; }
.estmCell[fincLen='3'] .fincCell .config .btn .right.copyFincCell { display: none; }
/* 금융상품 갯수별 예외 */    
.estmCell[fincLen='1'] .compare .fincCell {flex: unset; min-width: 100%;}
.estmCell[fincLen='1'] .compare .fincCell[fincView='step'] .confComp {min-height: 200px;}
.estmCell[fincLen='2'] .compare .fincCell { flex: 0 0 calc((100% - 10px) / 2); }
.estmCell[fincLen='2'] .compare .fincCell .config {background-color: var(--bg-white);}

@media screen and (min-width: 1000px) {
    .estmCell[fincLen='1'] .compare .confComp { background: var(--bg-white); border-radius: 0 0 10px 10px; }
    .estmCell[fincLen='1'] .compare .fincCell .config, .estmCell[fincLen='1'] .compare .fincCell .config.open.notUp { border: none; }
    .estmBox:not(.start) .estmCell .compare:not(.hide) {overflow-x: unset;}
    .estmCell .compare .fincCell {min-width: auto;}
    .estmCell[fincLen='1'] .compare .fincCell {width: 100%; background-color: var(--bg); border: none;}
    .estmCell[fincLen='1'] .compare .fincCell .top {width: 33.3%;}
    .estmCell[fincLen='1'] .compare .fincCell .config {display: block; background-color: var(--bg-white); border: 1px solid var(--gray-300); border-radius: 0 0 0 10px;}
    .estmCell[fincLen='1'] .compare .fincCell .config > .sub.step1 {margin-top: 0;}
    .estmCell[fincLen='1'] .compare .fincCell .notice {margin: unset; position: absolute; top: -43px; right: 0; width: 66.7%; border-radius: 10px 10px 0 0;}
    .estmCell[fincLen='1'] .compare .fincCell .confComp .comp {position: relative;}
    .estmCell[fincLen='1'] .compare .fincCell .confComp .comp > .notice {width: 100%;}
    .estmCell[fincLen='1'] .fincConf .sub:not(:first-child) {border-top: none;}

    .estmCell[fincLen='1'] .compare .fincCell[fincView='self'] .config, .estmCell[fincLen='1'] .compare .fincCell[fincView='step'] .config {position: relative; display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 55px; border-radius: 0 10px 10px 10px; background-color: var(--bg-white); border: 1px solid var(--gray-300);}
    .estmCell[fincLen='1'] .compare .fincCell[fincView='self'] .config .sub, .estmCell[fincLen='1'] .compare .fincCell[fincView='step'] .config .sub {width: 33.3%; border-right: 1px solid var(--gray-300);}
    .estmCell[fincLen='1'] .compare .fincCell[fincView='self'] .config .btn, .estmCell[fincLen='1'] .compare .fincCell[fincView='step'] .config .btn {position: absolute; bottom: 0; left: 0; width: 33.3%; border: 1px solid var(--gray-300); border-left: 0; border-bottom: 0; border-radius: 0;}
    .estmCell[fincLen='1'] .compare .fincCell[fincView='self'] .config {flex-wrap: nowrap; justify-content: space-between;}
    .estmCell[fincLen='1'] .compare .fincCell[fincView='self'] .pmt {position: absolute; bottom: 0; right: 0; width: 33.4%; padding: 10px; border-radius: 0 0 10px 0;}

    .estmCell[fincLen='1'] .compare .fincCell[fincView='list'] .summary {display: none;}
    .estmCell[fincLen='1'] .compare .fincCell[fincView='list'] .updown {display: none;}
    .estmCell[fincLen='1'] .compare .fincCell[fincView='list'] .confComp {display: flex;}
    .estmCell[fincLen='1'] .compare .fincCell[fincView='list'] .confComp .config {width: 33.3%; border-radius: 0 0 0 10px; border-right: 1px solid var(--gray-300);}
    .estmCell[fincLen='1'] .compare .fincCell[fincView='list'] .config .sub {border-right: 0;}
    .estmCell[fincLen='1'] .compare .fincCell[fincView='list'] .confComp .comp {width: 66.7%;}
    .estmCell[fincLen='1'] .compare .fincCell[fincView='list'] .confComp .comp .compList {display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 0 10px;}
    .estmCell[fincLen='1'] .compare .fincCell[fincView='list'] .confComp .comp .compList li {width: calc(50% - 5px);}
    .estmCell[fincLen='1'] .compare .fincCell[fincView='list'] .confComp .comp .compList li.nodata {width: 100%; height: 100%;}

    .estmCell[fincLen='1'] .compare .fincCell[fincView='multi'] .confComp {position: relative; display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 55px;}
    .estmCell[fincLen='1'] .compare .fincCell[fincView='multi'] .confComp .config {width: 33.3%; border-right: 1px solid var(--gray-300);}
    .estmCell[fincLen='1'] .compare .fincCell[fincView='multi'] .confComp .comp {width: 66.7%;}
    .estmCell[fincLen='1'] .compare .fincCell[fincView='multi'] .confComp .comp .compList {flex-direction: row; flex-wrap: wrap; gap: 0 10px;}
    .estmCell[fincLen='1'] .compare .fincCell[fincView='multi'] .confComp .comp .compList li {width: calc(50% - 5px);}
    .estmCell[fincLen='1'] .compare .fincCell[fincView='multi'] .confComp .comp .compList li.nodata {width: 100%; height: 100%;}
    }

/* 정렬 조회순 예외 */
.compList.fincComp li.orderS > button { padding-top: 40px; }
.compList.fincComp li.orderS.folding > button { padding-top: 0; }
.compList.fincComp li.orderS > button .rank, .compList.fincComp li.orderS > button .gap, .compList.fincComp li.orderS > button .price, .compList.fincComp li.orderS > button .info { display: none; }
.compList li.orderS > button::before { display: none; }
.compList.fincComp li.orderS .name { position: absolute; top: 10px; right: 10px; text-align: right; left: unset; }
.compList.fincComp li.orderS > button .logo { top: 10px; }
.compList.fincComp li.orderS.failure .info { bottom: 5px; top: unset; }
.compList.fincStep li.base button::after {content: "기준상품"; position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 2px 10px; color: var(--main-font); background-color: var(--gray-100); font-size: 12px; border-radius: 0 0 10px 10px; }

/* 상담모드 예외처리 */
.estmMain.counsel { } 



/* 금융리스트 */
.compList {display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; background-color: var(--bg-white); }
.compList li {position: relative; width: 100%; border-bottom: 1px solid var(--gray-300); background: var(--bg-white); }
.compList li:last-child {border-bottom: none;}
.compList li > button { position: relative; width: 100%; font-weight: 400; display: flex; justify-content: space-between; align-items: center; border: 1px solid transparent; padding: 62px 10px 27px 10px;}
.compList li:not(.failure) > button::before { position: absolute; content: ''; top: 5px; left: 20px; width: 30px; height: 30px; border-radius: 3px; background: url(../images/icons/icon_check_line.svg) no-repeat center; background-size: 60%; }
.compList li:not(.failure).on {border: 1px solid var(--primary-orange); background-color: var(--orange-100); border-radius: 1px; margin-top: -1px; z-index: 1;}
/* .compList li:last-child:not(.failure).on {border-radius: 0 0 12px 12px;} */
.compList li .rank {font-size: 15px; position: absolute; top: 10px; left: 10px; font-weight: 700;}
.compList li .logo { position: absolute; top: 33px; left: 10px; display: flex; align-items: center;} 
.compList li .logo img { width: 25px; height: 25px; padding: 2px; background-color: transparent; border-radius: 50%;}
.compList li .logo .company { display: flex; align-items: center; padding-left: 4px; font-weight: 700; letter-spacing: .5px;}
.compList li .help { position: absolute; bottom: 0; left: 4px; width: 30px; height: 30px; background: url(../images/icons/icon_help.svg) no-repeat center; background-size: 60%; font-size: 0; line-height: 0; text-indent: -9999px;}
.compList li .name { width: 40%; letter-spacing: -.5px; text-align: left; font-size: 13px; color: var(--gray-500); }  
.compList li .exception {position: absolute; bottom: 5px; left: 30px; font-size: 12px; color: var(--navy-font); font-weight: 500; }
.compList li .price { position: absolute; top: 33px; right: 10px; font-weight: 700; font-size: 18px;}
.compList li .price .sub { font-weight: 400; font-size: 12px; padding-right: 5px; color: var(--gray-500);}
.compList li .info { color: var(--gray-500); }
.compList li .info .extra {font-weight: 400; font-size: 12px; padding-right: 5px; color: var(--gray-500);} 
.compList li .paysum { text-align: right; } 
.compList li .gap { position: absolute; top: 11px; right: 10px; font-size: 13px;} 
.compList li .gap.up { color: var(--primary-red);} 
.compList li .gap.down { color: var(--primary-blue);}
.compList li .fold { position: absolute; bottom: 0; right: 11px; font-size: 10px; width: 48px; height: 30px; line-height: 30px; text-align: right; }
.compList li.on > button::before { background: url(../images/icons/icon_check_on.svg) no-repeat center; background-size: 60%;}
.compList li.on button .rank {color: var(--primary-orange); }
.compList li.failure { background-color: var(--gray-50); opacity: .6;}
.compList li.failure > button, .compList li.failure > div {padding: 40px 10px 30px 10px;}
.compList li.failure .logo { top: 10px; left: 7px;} 
.compList li.failure .name { top: unset; left: 10px;}
.compList li.failure .info { position: absolute; top: 10px; right: 10px;}                                                          
.compList li.failure .memo { position: absolute; top: 10px; right: 10px; color: var(--primary-orange); font-size: 12px;}
.compList li.failure .fold {display: none;} 
.compList li.folding { height: 30px; background: var(--gray-100); border-radius: 5px; opacity: .6;}
.compList li.folding .fold {font-size: 0; text-align: right;}
.compList li.folding .fold::before { content: '펼치기'; font-size: 12px;}
.compList li.folding span, .compList li.folding .help {display: none;}
.compList li.folding > button {display: none;}
.compList li.folding > button::before {position: unset; background: none;}
.compList li.update > button::after {content: "견적 수정 중"; position: absolute; left: 50px; top: 10px; background-color: var(--orange-300); color: var(--primary-orange); padding: 2px 4px; border-radius: 5px; font-size: 10px; font-weight: 500; }
.compList li.on .fold { display: none; }
.compList li.none {border: none;}
.compList li.none .title:not(.hide) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; text-align: center; color: var(--gray-500); font-weight: 700; position: relative; padding: 30px 0; background-color: transparent; word-break: keep-all; }
.compList li.none .title::before {content: ''; width: 30px; height: 30px; background: url(../images/icons/icon_blank.svg) no-repeat center / contain;}
.compList li.none .desc {padding: 15px; border-radius: 10px; background-color: var(--gray-50); font-size: 13px; font-weight: 500;}
.compList li .noticeBox, .compList li .desc {margin: 10px; width: auto;}
.compList.fincStep li { border-radius: 0;}
.compList.fincStep li > button {padding: 45px 10px 27px 10px;}
.compList.fincStep li:not(.failure).on {background-color: transparent; border-color: var(--navy-font);}
.compList.fincStep li .logo {top: 13px;}
.compList.fincStep li .price {top: 13px;}
.compList.fincStep li:not(.failure) > button::before {content: none;}
.compList.fincStep li:last-child:not(.failure).on {border-radius: 10px; margin: 10px; width: calc(100% - 20px);}
.compList li:not(.failure).exception > button::before {left: 0;}

/* 금융상품 팝업 */
.popup .content .financeView {display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start;} 
.popup .content .financeView li { width: 100%; display: flex; padding: 10px 0; border-bottom: 1px solid var(--gray-300); }
.popup .content .financeView li:last-child {border-bottom: none; padding-bottom: 0;}
.popup .content .financeView li > .title {width: 100px; font-weight: 700; color: var(--navy-font); font-size: 13px;}
.popup .content .financeView li .data {font-weight: 500; display: block;} 
.popup .content .financeView li :not(.title, .noticeBox) {width: calc(100% - 100px);}
.popup .content .financeView li .tableBox table {width: 100%;}
.popup .content .financeView li .tableBox table tr th {padding: 3px 10px;} 
.popup .content .financeView li .tableBox table tr td {padding: 3px 10px;}
.popup .content .promotion:not(.hide) {display: flex; flex-direction: column; flex-wrap: nowrap; padding-top: 10px; gap: 10px;}
.popup .content .promotion {margin-top: 15px;}
.popup .content .promotion .tableBox table tr:not(:last-child) {border-bottom: 1px dashed var(--gray-300);}
.popup .content .promotion .tableBox table tr th {padding: 3px;}
.popup .content .promotion .tableBox table .title {padding: 3px; font-size: 13px; background-color: var(--gray-50);}
.popup .content .promotion .tableBox table tr td {font-size: 13px; }
.popup .btnOpenPromotion {position: relative;}
.popup .btnOpenPromotion::after {position: absolute; content: ''; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background: url(../images/icons/icon_arrowdown_navy.svg) no-repeat center/contain;}
.popup .btnOpenPromotion.fold::after {transform: translateY(-50%) rotate(180deg);}

/* 리스렌트 금융상품 팝업 */
.popup .content .productInfo .topBox {display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 10px;}
.popup .content .productInfo .link:not(.hide) {display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px;}
.popup .content .productInfo .link .capitalTip { color: var(--navy-font);} 
.popup .content .productInfo .link .capitalUrl {background-color: var(--primary-navy); text-align: center; padding: 3px 9px; color: var(--white); border-radius: 5px; font-size: 13px;} 
@media screen and (min-width: 420px) {
    .popup .content .productInfo .topBox {flex-wrap: nowrap;}
    .popup .content .productInfo .link:not(.hide) {width: auto;}
}
/* 외/내장 팝업 */ 
.estmTable td.on { color: var(--primary-orange); }
.popup .content .imageBox .inbox img { text-align: center;}
.popup .content .imageBox .inbox span {width: 100%; display: block; font-size: 12px; color: var(--gray-500); text-align: center;}
.popup .content .imageBox.colorExt .inbox { padding-top: 50%; position: relative;}
.popup .content .imageBox.colorExt .inbox img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 600px; width: 100%;}
.popup .content .imageBox.colorInt { display: flex; gap: 10px; justify-content: center; width: 100%;}
.popup .content .imageBox.colorInt.scroll {overflow-x: auto; justify-content: flex-start;}
.popup .content .imageBox.colorInt.scroll img { max-width: unset;}
.popup .content .imageBox.colorInt img { max-height: 300px;}
.popup .content .imageBox.colorInt::-webkit-scrollbar { width: 5px; height: 8px;}
.popup .content .imageBox.colorInt::-webkit-scrollbar-track { background-color: transparent;}
.popup .content .imageBox.colorInt::-webkit-scrollbar-thumb { background-color: var(--gray-300);}
.popup .content .imageBox.colorInt::-webkit-scrollbar-track, .popup .content .imageBox.colorInt::-webkit-scrollbar-thumb { border-radius: 30px; cursor: pointer; }
.popup .content .infoBox .colorList {justify-content: center; margin-bottom: 20px; }
.popup .content .infoBox .colorList li {width: fit-content;}
.popup .content .infoBox .colorList li button {padding: 0;}
.popup .content .infoBox .colorList li.on button {border-radius: 50%;}
.popup .content .infoBox .box.name { margin-top: -20px; font-weight: 700; }
.popup .content .infoBox .box.desc { font-size: 13px; color: var(--gray-500); }
.popup .content .infoBox [data-tooltip]:before, .popup .content .infoBox [data-tooltip]:after { white-space: pre-line; }
.popup .content .infoBox [data-tooltip]:not([data-tooltip=""]):hover:before {top: unset; bottom: 115%;}
/* 사양 팝업 (모델, 견적 동일 사용) */
.popup .content .specBox dl .data {align-items: flex-start;} 
.popup .content .specBox dl .data dd {color: var(--gray-500); font-size: 13px;}
.popup .content .specBox dl .data dd button { text-align: left; text-decoration: underline solid #d1d1d1; text-underline-offset: 2px; font-size: 13px; color: var(--gray-500);} 
.popup .content .specBox dl .data dd button:hover {color: var(--main-font); text-decoration-color: var(--gray-400);}
.popup .content .infoBox {display: flex; flex-wrap: wrap; gap: 10px; text-align: left;}
.popup .content .infoBox .box {width: 100%; text-align: center;}
.popup .content .infoBox .box .title {display: block; width: 100%; font-size: 12px; color: var(--gray-500);}
.popup .content .infoBox .descTitle { position: relative; display: block; margin-bottom: 5px; width: 100%; font-weight: 700; color: var(--navy-font); padding-left: 24px; font-size: 13px; text-align: left;}
.popup .content .infoBox .descTitle::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 18px; height: 18px; background: url(../images/icons/icon_info_navy.svg) no-repeat center/contain; } 
.popup .content .infoBox .descBox .desc {color: var(--gray-500); display: block; font-size: 13px;}
/* (견적) 팝업 리스트 - 채권 */
.popup .content .bondCutBox .index {display: flex; align-items: center; padding: 5px; background-color: var(--gray-50); border-radius: 10px 10px 0 0; text-align: center; border: 1px solid var(--gray-300); border-bottom: none; }
.popup .content .bondCutBox .index span {font-size: 12px; width: 23%;}
.popup .content .bondCutBox .index .date {width: 31%;}
.popup .content .bondCutBox .noticeBox {margin: 0; border-radius: 0 0 10px 10px;}
.popup .content .bondCutBox ul {border: 1px solid var(--gray-300); border-radius: 0 0 10px 10px;}
.popup .content .bondCutBox ul li {border-bottom: 1px solid var(--gray-300);}
.popup .content .bondCutBox ul li:last-child {border-bottom: none;}
.popup .content .bondCutBox ul li button { width: 100%; padding: 10px 5px; font-size: 12px; display: flex; align-items: center;}
.popup .content .bondCutBox ul li button span { width: 23%;} 
.popup .content .bondCutBox ul li button .date { width: 31%;} 
.popup .content .bondCutBox ul li button.on {color: var(--primary-orange);}
/* 팝업 리스트 - 대행사  */
.popup .content .partnerBox {display: flex; flex-direction: column; gap: 15px; border: none;}
.popup .content .partnerBox .box {background-color: var(--gray-50); border: 1px solid var(--gray-300); border-radius: 10px; display: flex; flex-direction: column;}
.popup .content .partnerBox .box .title {font-weight: 700; color: var(--navy-font); font-size: 15px;}
.popup .content .partnerBox .box .service { display: flex; align-items: stretch;}
.popup .content .partnerBox .box .service:first-child {border-bottom: 1px solid var(--gray-300);}
.popup .content .partnerBox .box .service .title {width: 60px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--gray-300);}
.popup .content .partnerBox .box .service .listBox { width: calc(100% - 60px);}
.popup .content .partnerBox .box .service .listBox li {justify-content: space-between;}
.popup .content .partnerBox .listBox {background-color: var(--gray-50);}
.popup .content .partnerBox .listBox li {padding: 10px;}
.popup .content .partnerBox .selectBox {display: flex; align-items: center; justify-content: space-between; padding: 5px 10px;}
.popup .content .partnerBox .selectBox select { background-color: transparent; border: none; border-radius: 0; width: auto;}
/* 
.popup .content .partnerBox .box {background-color: var(--gray-50); border: 1px solid var(--gray-300); border-radius: 10px; display: flex; flex-direction: column;}
.popup .content .partnerBox .box .title {font-weight: 700; color: var(--navy-font); font-size: 15px;}
.popup .content .partnerBox .box .service { display: flex; align-items: stretch; }
.popup .content .partnerBox .box .service:first-child {border-bottom: 1px solid var(--gray-300);}
.popup .content .partnerBox .box .service .title {width: 60px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--gray-300);}
.popup .content .partnerBox .box .service .listBox { width: calc(100% - 60px);}
.popup .content .partnerBox .box .service .listBox li {justify-content: space-between;}
.popup .content .partnerBox .selectBox {display: flex; align-items: center; justify-content: space-between; padding: 5px 10px;}
.popup .content .partnerBox .selectBox select { background-color: transparent; border: none; border-radius: 0; width: auto;}
.popup .content .partnerBox .listBox li {display: flex; flex-wrap: wrap; align-items: center; padding: 10px;}
.popup .content .partnerBox .listBox li .sigungu {width: 100%; font-weight: 700;} 
.popup .content .partnerBox .listBox li .name {width: 60%; word-break: break-word;} 
.popup .content .partnerBox .listBox li .phone {width: 40%; text-align: right; font-size: 12px; color: var(--gray-400); white-space: nowrap; letter-spacing: -.5px;}
.popup .content .partnerBox .listBox li .link { padding: 3px 9px; background-color: var(--primary-navy); font-size: 12px; color: var(--white); border: 1px solid var(--primary-navy); border-radius: 7px;} */

/* 팝업 리스트 견적 - 고객, 견적 */
.popup .content .custoEstmList h3:not(:first-child) {margin-top: 30px;}
.popup .content .custoEstmList h3 {position: relative; padding-left: 10px; color: var(--primary-navy);}
.popup .content .custoEstmList h3::before {position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 65%; border-radius: 2px; background-color: var(--primary-navy);}
.popup .content .custoEstmList ul li {position: relative;}
.popup .content .custoEstmList ul li:not(.nodata)::before {position: absolute; content: ''; top: 10px; right: 7px; width: 20px; height: 20px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center/contain;}
.popup .content .custoEstmList ul li .fin {width: 100%;}
.popup .content .custoEstmList ul li:has(.more:not(.hide))::before { transform: rotate(180deg);}
.popup .content .custoEstmList .more:not(.hide) {display: flex; flex-wrap: wrap; gap: 5px 10px; align-items: center; justify-content: center; margin-top: 10px;}
.popup .content .custoEstmList .more a, .popup .content .custoEstmList .more button {flex: 1; font-weight: 700; padding: 5px; white-space: nowrap; text-align: center; border: 1px solid var(--navy-font); color: var(--navy-font); border-radius: 7px; font-size: 12px;}
/* 팝업 dl 구조 조정 - 견적서 편집 */
.popup .content .popupForm dl.row .data {gap: 10px;}
.popup .content .popupForm dl.row .data dt { background-color: var(--primary-lightnavy); color: var(--white); border-radius: 10px; gap: 10px;}
.popup .content .popupForm dl.row .data dt input[type="radio"] + span {color: var(--white); font-size: 12px;}
.popup .content .popupForm dl dt {display: flex; align-items: center; gap: 10px;}
.popup .content .popupForm .list:not(.hide) {width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px;}
.popup .content .popupForm .list.dis { opacity: 0.3; }
.popup .content .popupForm .list li:not(.hide) { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; }
.popup .content .popupForm .list li span.title {width: 60px; text-align: left; color: var(--primary-navy); font-size: 13px; font-weight: 700; }
.popup .content .popupForm .list li span.data {width: calc(100% - 60px); text-align: left;}
.popup .content .popupForm .list li .data {flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; }
.popup .content .popupForm .list li .data .inputBox { position: relative; gap: 5px; align-items: center;}
.popup .content .popupForm .list li.edit .data span, .popup .content .popupForm .list li.edit .data input {width: calc(100% - 35px);}
.popup .content .popupForm .moreButton button {width: 25px; height: 25px;} 
.popup .content .popupForm .list li .btnHide {position: absolute; top: -3px; right: 0;}
.popup .content .popupForm .list li .data.dis .dataBox {opacity: 0.3; text-decoration: line-through;}

@media screen and (min-width:600px){
    .popup .content .partnerBox .box .service .listBox li .name {width: 65%; text-align: left;}
    .popup .content .partnerBox .box .service .listBox li .phone { text-align: right;}
    /* .popup .content .partnerBox .listBox li {text-align: center;}
    .popup .content .partnerBox .listBox li .sigungu {width: 30%;}
    .popup .content .partnerBox .listBox li .name {width: 40%;}
    .popup .content .partnerBox .listBox li .phone {width: 30%; text-align: center;} 
    .popup .content .partnerBox .box .service .listBox li .name {width: 70%;} */

} 
 
@media screen and (min-width: 1000px) {
    .wrapper[path="estimate_leaserent"] .estmCell .setting .dcBox .sum {min-height: auto;}
    .estmCell .setting {flex-direction: row; gap: 10px;}
    .estmCell .setting > div {width: calc(33.3% - 6.6px); flex: 1; justify-content: space-between;}
    .estmCell .setting .optBox .sum {min-height: auto;}
    .estmCell .setting > div .cont {flex: 1;}
    .estmCell .setting > div .sum {display: flex; flex-direction: column; justify-content: space-between; min-height: 105px;}
    /* .floatingEstm {display: block;} */
    .popup .content .specBox dl .data {gap: 10px;}
    .popup .content .specBox dl .data dd {width: calc(100% - 80px);}
}

/* hover */
@media (hover: hover) and (pointer: fine) {
    .brandList li button:hover, .lineupList li button:hover, .trimList li button:hover {background-color: var(--gray-100);}
    .brandList li.on button:hover, .lineupList li.on button:hover, .trimList li.on button:hover {background-color: var(--orange-100);}
    .estmBar > .btn button:hover::after {background: url(../images/icons/icon_arrowdown_orange.svg) no-repeat center/contain;}
    .optionList li button:hover, .discountList > li .sub li button:hover {background-color: var(--gray-100); border-radius: 10px;}
    .optionList li.dis button:hover, .optionList li.dis label:hover, .colorList li.dis button:hover, .discountList > li.dis .sub button:hover {background-color: var(--gray-100); }
    .discountList > li .sub li button:hover .price input {border: 1px solid var(--gray-400);}
    .estmList li:hover {background-color: var(--gray-100);}
    .estmList li button.del:hover {background: url(../images/icons/icon_trash_darkgray.svg) no-repeat center/contain; background-size: 60%;}
    .estmSub .name button:hover::after {background: url(../images/icons/icon_arrowdown_orange.svg) no-repeat center/contain;}
    .estmCell .vehicle .choice .box li:not(.on) .modelList li:hover button {background-color: var(--gray-100);}
    .estmCell .vehicle .choice .box li:not(.on) .modelList li.on:hover button {background-color: var(--orange-100);}
    .estmCell .subList li:hover button {background-color: var(--gray-100); border-color: var(--gray-100);}
    .estmCell .subList li.on:hover button {background-color: var(--primary-darknavy); color: var(--white); border-color: var(--primary-darknavy);}
    .estmCell .compare .fincCell .top .title button.bar:hover::after {background: url(../images/icons/icon_arrowdown_white.svg) no-repeat center/contain;}
    .estmCell .btn .left:hover, .estmCell .btn .right:hover {background-color: var(--gray-50);}
    .estmCell .vehicle .choiced .summary button:hover, .estmCell .vehicle .choiced .summary a:hover {background-color: var(--gray-100);}
    .estmCell .vehicle.open .choice .box li .top button:hover {background-color: var(--gray-200);}  
    .estmCell .vehicle.open .choice .box li.on .top button:hover {background-color: var(--bg-white);}    
    .estmCell .vehicle.open .choice .box li.on .tab button:hover {background-color: var(--gray-50);}
    .estmCell .vehicle.open .choice .box li.on .tab button.on:hover {background-color: var(--gray-100); border-color: var(--gray-100); color: var(--main-font);}
    .estmCell .vehicle.open .choice .buttonBox button:not(.hide):hover {background-color: var(--gray-200);}
    .compList li:not(.failure):hover button {background-color: var(--gray-100); } 
    .compList li:not(.failure).on:hover button {background-color: var(--orange-100);} 
    .compList.fincStep li:not(.failure).on:hover button {background-color: transparent;}
}

/* 견적 설정 */
#formConfig .tabCont > div:not(.on) { display: none; }
#formConfig .tabCont .inputBox .name {width: 100px; font-size: 13px; color: var(--gray-500);}
#formConfig .tabCont .inputBox {flex: 1;}
#formConfig .tabCont .inputBox input {width: calc(100% - 110px);}
#formConfig .tabCont .total {width: 100%; text-align: right; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between;}
#formConfig .tabCont .total .sel {display: flex; align-items: center; gap: 10px;}
#formConfig .tabCont .total .price { font-size: 16px; font-weight: 700; color: var(--primary-orange);}
#formConfig .tabCont .total .price .num {margin: 0 3px 0 10px;} 
#formConfig .tabCont .selectBox {width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#formConfig .tabCont .selectBox::after {content: url('../images/icons/icon_arrowdown.svg'); margin-bottom: -10px;}
@media screen and (min-width: 600px) {
    #formConfig .tabCont .inputBox .name {width: auto;} 
    #formConfig .tabCont .selectBox {width: auto; flex-direction: row; flex-wrap: nowrap;}
    #formConfig .tabCont .selectBox::after {margin-bottom: 0; transform: rotate(-90deg); margin-left: 10px;}
}

/* 견적 저장 */
#formEstmSave .inputBox {flex: 1;} 
#formEstmSave dl .data.connectBox { position: relative; gap: 10px;}
#formEstmSave dl .data.connectBox dt {display: flex; justify-content: space-between; align-items: center;}
#formEstmSave dl .data .btn { display: flex; gap: 5px;}
#formEstmSave dl .data .btn a { font-size: 12px; background-color: var(--gray-100); border: 1px solid var(--gray-100); padding: 3px 9px; border-radius: 5px; font-weight: 500;}
           
/* 견적서 */    
.btnOpenSlide, .btnCloseDocu { display: none;}
.wrapper:not(.mobile) .btnOpenSlide:not(.hide) { width: 70px; height: 70px; position: fixed; bottom: 75px; right: 15px; display: flex; align-items: center; justify-content: center; z-index: 48;}
.wrapper:not(.mobile) .btnCloseDocu:not(.hide) {width: 70px; height: 70px; position: fixed; bottom: 75px; right: 15px; display: flex; align-items: center; justify-content: center; z-index: 48; background-color: var(--gray-50); color: var(--gray-400); padding-top: 26px; box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 5px; border-radius: 10px;}
.wrapper:not(.mobile) .btnOpenDocu {position: relative; width: 100%; height: 100%; border-radius: 10px; border-radius: 10px; background-color: var(--primary-orange); color: var(--white); padding-top: 26px; opacity: .9; box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 5px;}
.wrapper:not(.mobile) .btnOpenDocu::before {position: absolute; content: ''; top: 12px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; background: url(../images/icons/navigation/icon_estimate_white.svg) no-repeat center/contain;}
.btnCloseDocu::before {position: absolute; content: ''; top: 12px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; background: url(../images/icons/icon_close_dark.svg) no-repeat center/contain;}
.estmBox.open .btnOpenSlide { display: none; }
.estmDocu:not(.hide) { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px;}
.estmDocu .tablist { border-bottom: 1px solid var(--gray-200); gap: 5px;} 
.estmDocu .tabBox {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; gap: 15px; width: 100%; max-width: 770px; margin: 0 auto;} 
.estmDocu .tabBox .doculist { width: 100%; text-align: right;}
.estmDocu .tabBox .doculist label {margin-right: 10px;}  
.estmDocu .docuBox { max-width: 770px; margin: 0 auto;}
.estmDocu .buttonBox { max-width: 770px; margin: 0 auto; gap: 5px; }
.estmDocu .buttonBox .sendBox:not(.hide), .estmDocu .buttonBox .workbox:not(.hide), .estmDocu .buttonBox .downBox:not(.hide) {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px;}
.estmDocu .buttonBox .urlBox {position: relative;}
.estmDocu .buttonBox .urlBox .urlCopy { position: absolute; width: 20px; height: 20px; top: 50%; transform: translateY(-50%); right: 36px; border: none; background: url(../images/icons/icon_copy.svg) no-repeat center/contain; text-indent: -9999px; font-size: 0;}
.estmDocu .buttonBox .urlBox .urlOpen {position: absolute; width: 20px; height: 20px; top: 50%; transform: translateY(-50%); right: 8px; border: none; background: url(../images/icons/icon_open.svg) no-repeat center/contain; text-indent: -9999px; font-size: 0;}
.estmDocu .buttonBox .urlBox input {padding: 5px 60px 5px 8px; border: 1px solid var(--gray-300); background-color: var(--gray-50); }
.estmDocu .buttonBox button {padding: 4px 8px; border-radius: 7px; font-size: 12px; flex: unset; }
.estmDocu .buttonBox .kakao { width: 28px; height: 28px; border-radius: 7px; background: url(../images/sns/icon_kakao.svg) no-repeat center/contain; font-size: 0; text-indent: -9999px; border: none; padding: 0; } 
.estmDocu .buttonBox .gray {border-color: var(--gray-300); background-color: var(--gray-200);}
.estmDocu .btnRadio { justify-content: center;}
.estmDocu .btnRadio label input[type="radio"] + span {background-color: var(--bg-white); border-radius: 7px; font-size: 12px;}
.estmDocu .btnRadio label input[type="radio"]:checked + span {background-color: var(--orange-100);}
.estmDocu .select:not(.hide) {display: flex; gap: 5px; align-items: center;}
.estmDocu select {padding: 6px 24px 6px 8px; border: 1px solid var(--gray-300); border-radius: 7px; background-color: var(--bg-white); font-size: 12px; text-align: center; color: var(--gray-500); font-weight: 500;}
.estmDocu button[tab='checked'] {background: url(../images/icons/icon_check_line.svg) no-repeat left center; background-size: 22px; padding-left: 25px; }
.estmDocu button[tab='checked'].on {background: url(../images/icons/icon_check_on.svg) no-repeat left center; background-size: 22px; }
.estmDocu button[tab='diff'] {background: url(../images/icons/icon_diff_line.svg) no-repeat left center; background-size: 22px; padding-left: 25px; }
.estmDocu button[tab='diff'].on {background: url(../images/icons/icon_diff_on.svg) no-repeat left center; background-size: 22px;}
.estmDocu button[tab='multi'] { background: url(../images/icons/icon_doublecheck_on.svg) no-repeat left center; background-size: 22px; padding-left: 25px; }

/* 팝업 - 견적 */
.popup .content .docuMain {padding: 0; border: none;}

@media screen and (min-width: 600px) {
    #formEstmSave dl .data.connectBox {gap: 5px; padding-right: 150px;}
    #formEstmSave dl .data.connectBox dt .btn {position: absolute; top: 50%; right: 10px; transform: translateY(-50%); }
} 

@media screen and (min-width: 1000px) {
    .estmDocu .tablist {gap: 25px;}
    .wrapper:not(.mobile) .btnOpenSlide:not(.hide), .wrapper:not(.mobile) .btnCloseDocu:not(.hide) {bottom: 15px;}
    .wrapper:not(.mobile) .btnOpenSlide button{width: 150px;}  
} 

@media screen and (min-width: 1900px) {
    .wrapper:not(.mobile).wide .mainTop {width: calc(60% - 7.5px);}
    .wrapper:not(.mobile).wide .estmViewport {overflow: visible;}
    .wrapper:not(.mobile).wide .estmBox.open .estmDocu {margin-top: -66px;}
    .wrapper:not(.mobile).wide .estmDocu:not(.hide) {gap: 5px;}
    .wrapper:not(.mobile).wide .estmCell .compare .fincCell {min-width: auto;}
}
@media (hover: hover) and (pointer: fine) {
    .estmDocu .buttonBox .urlBox .urlCopy:hover {background-color: transparent; border: none;}
    .estmDocu .buttonBox .urlBox .urlOpen:hover {background-color: transparent; border: none;}
    .estmDocu .buttonBox .kakao:hover {border: none;}
}





