@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* 카판 색상 */
.wrapper {
    --main-font: #333333;
    --dim-color: rgba(0,0,0,.6);
    --primary-navy: #223B49;
    --primary-darknavy: #1E323D;
    --primary-lightnavy: #24516B;
    --primary-orange: #F37B2C;
    --primary-darkorange: #EC6A2A;
    --primary-blue: #3A80F2;
    --primary-red: #EF4444;
    --navy-font: #223B49;
    --bg-white: #FFFFFF;
    --white: #FFFFFF;
    --bg-color: #FCFBFC;
    --gray-50: #F9FAFC;
    --gray-100: #F5F5F8;
    --gray-200: #EFEFF2;
    --gray-300: #E5EAF1;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --orange-100: #FFF7ED;
    --orange-200: #FFE8CC;
    --orange-300: #FDEBE0;
    --dim-rgb: rgba(0,0,0,.6);
    --line-color: #E7EAF0;
    --sub-font: #6C748C;
    --gray-bg-color: #F0F3F5;
    --main-color: #F37B2C;
    --icon-main-color: #F37B2C;
    --icon-line-color: #D1D1D1;
}

/* black */
.wrapper.black:not(.work),
.wrapper.work.black:is([path^="desk"], [path="estimate_request"]) {
    --main-color: #0A0B0C;
    --icon-main-color: #0A0B0C;
    --icon-line-color: #D1D1D1;
}

/* red */
.wrapper.red:not(.work),
.wrapper.work.red:is([path^="desk"], [path="estimate_request"]) {
    --main-color: #AF0F22;
    --icon-main-color: #AF0F22;
    --icon-line-color: #D1D1D1;
}

/* gray */
.wrapper.gray:not(.work),
.wrapper.work.gray:is([path^="desk"], [path="estimate_request"]) {
    --main-color: #999;
    --icon-main-color: #999;
    --icon-line-color: #D1D1D1;
}

/* blue */
.wrapper.blue:not(.work),
.wrapper.work.blue:is([path^="desk"], [path="estimate_request"]) {
    --main-color: #002B5C;
    --icon-main-color: #002B5C;
    --icon-line-color: #D1D1D1;
}

/* mustard */
.wrapper.mustard:not(.work),
.wrapper.work.mustard:is([path^="desk"], [path="estimate_request"]) {
    --main-color: #CFAB57;
    --icon-main-color: #CFAB57;
    --icon-line-color: #D1D1D1;
}

/* purple */
.wrapper.purple:not(.work),
.wrapper.work.purple:is([path^="desk"], [path="estimate_request"]){
    --main-color: #2D2A4A;
    --icon-main-color: #2D2A4A;
    --icon-line-color: #D1D1D1;
}


/* 공통 요소 */
* { box-sizing: border-box; }
*::-webkit-scrollbar {  width: 8px;  height: 8px;}
*::-webkit-scrollbar-track { background: transparent;}
*::-webkit-scrollbar-thumb {  background: #D1D5DB;  border-radius: 30px; border: 2px solid transparent;background-clip: padding-box;}
*::-webkit-scrollbar-thumb:hover {background: #9CA3AF;border: 2px solid transparent; background-clip: padding-box;}
html { width: 100%; height: 100%; margin: 0; padding: 0; scroll-behavior: smooth;}
body { height: 100%; margin: 0; padding: 0; font-size: 15px; line-height: 1.5; font-weight: 400; background-color: var(--bg-color); color: var(--main-font); font-family: 'Pretendard'; -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
ul, li, dl, dd { margin: 0; padding: 0; list-style: none; }
a { text-decoration: none; color: inherit; transition: all 0.2s; cursor: pointer; }
em { word-break: keep-all; font-style: normal; }
i, address, cite { font-style: normal; }
h1 { font-size: 0; line-height: 0; height: 0; overflow: hidden; text-indent: -9999px; }
h2, h3, h4, h5 { margin: 0; font-size: 18px; color: var(--main-font); }
h4, h5 {font-size: 16px;}
form { margin-bottom: 0; }
button { padding: 0; border: 0; background: transparent; color: var(--main-font); font-weight: 500; font-size: 15px; line-height: 1.5; cursor: pointer; font-family: 'Pretendard'; transition: all 0.1s; }
input, textarea, select {font-family:'Pretendard'; width: 100%; font-size: 14px; color:var(--main-font); border: 1px solid var(--line-color); border-radius: 7px; padding:8px; -webkit-appearance:none; appearance:none;}
input[type="text"], input[type="password"], input[type="number"], textarea {width:100%;}
input[type="text"].price{text-align:right;}
input[type="text"][class*="rate"]{text-align:center;}
input[type="text"]:disabled, input[type="text"]:read-only {opacity:.5; pointer-events:none;}
input[type="checkbox"], input[type="radio"], input[type="file"] {position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);}
input[type="checkbox"] + span, input[type="radio"] + span{position:relative; display:flex; align-items: center; padding-left:24px; cursor:pointer; gap:3px; word-break:keep-all;}
input[type="checkbox"] +span::before{content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); width:20px; height:20px; border-radius:3px; background-color: var(--icon-line-color); -webkit-mask: url('../images/icons/checkBox_line.svg') no-repeat center/contain; mask: url('../images/icons/checkBox_line.svg') no-repeat center/contain;}
input[type="checkbox"]:checked + span::before{background-color: var(--icon-main-color); -webkit-mask: url('../images/icons/checkBox_checked.svg') no-repeat center/contain; mask: url('../images/icons/checkBox_checked.svg') no-repeat center/contain;}
input[type="checkbox"]:disabled + span::before{background:url(../images/icons/checkBox_disabled.svg) no-repeat center/contain;}
input[type="radio"] + span::before { content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); width:20px; height:20px; background-color: var(--icon-line-color); -webkit-mask: url('../images/icons/radio_line.svg') no-repeat center/contain; mask: url('../images/icons/radio_line.svg') no-repeat center/contain;}
input[type="radio"]:checked + span::before {background-color: var(--icon-main-color); -webkit-mask: url('../images/icons/radio_checked.svg') no-repeat center/contain; mask: url('../images/icons/radio_checked.svg') no-repeat center/contain;}
input[type="radio"]:disabled + span::before {background:url(../images/icons/radio_disabled.svg) no-repeat center/contain; mask: unset;}

input[type="date"]{background: url(../images/icons/icon_date.svg) no-repeat right 8px center/16px; min-height:30px; color: var(--sub-font); font-size: 14px;}
input[type="date"]::-webkit-calendar-picker-indicator {opacity:0; cursor:pointer;}
input[type="date"]::-webkit-date-and-time-value{text-align:left;}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
input:-webkit-autofill{-webkit-text-fill-color:var(--main-font);-webkit-box-shadow:0 0 0 1000px transparent inset; box-shadow:0 0 0 1000px transparent inset; transition:background-color 5000s;}
input:focus,textarea:focus,select:focus{outline:none;}
textarea { width: 100%; min-height: 100px; padding: 10px; border-radius: 5px; resize: none;}
select { padding: 8px 24px 8px 8px;  background: url(../images/icons/icon_arrowdown.svg) no-repeat right 6px center; background-size: 20px 20px; appearance: none; cursor: pointer; }
select option { background-color: var(--bg-color); color: var(--main-font); }
label { display: inline-block; cursor: pointer; color: var(--main-font);}
.hide { display: none; }
.wrapper {background-color: var(--bg-color); }
.wrapper .container main{ position:relative; min-height: 100vh; }
.wrapper .container main > .inner { padding: 0 20px 20px 20px; min-height: 100vh; overflow-y: auto;}
.wrapper .container main:has(.header) > .inner {position:absolute; inset: 20px; top: 120px; padding: 0; height: calc(100vh - 120px); min-height: auto; padding-bottom: 20px;}
.wrapper .container main:has(.bottomFixed) {height:100vh;}
.wrapper .container main:has(.bottomFixed) > .inner { position:absolute; inset: 20px; top: 120px; bottom: 120px; padding: 0; height: auto; min-height: auto; overflow-y: clip;} 
img {max-width: 100%; border-radius: 2px;}
.through {opacity: 0.3; text-decoration: line-through;}
@media (orientation: portrait) {
    .wrapper .container main:has(.header) > .inner {overflow-y: auto;}
    .wrapper .container main:has(.bottomFixed) > .inner {overflow-y: auto;} 
    .wrapper .container main:has(.bottomFixed) > .inner::-webkit-scrollbar {display: none;}
}
/* 테블릿 가로 */
@media (orientation: landscape) and (min-width: 768px) and (max-width: 1399px) {
    /* .wrapper .container main:has(.bottomFixed) > .inner {position: unset; padding: 120px 20px 120px 20px; } */
    /* .wrapper .container main:has(.header) > .inner {overflow-y: auto;} */
    /* .wrapper .container main:has(.bottomFixed) > .inner {overflow-y: auto;}  */
    .wrapper .container main:has(.bottomFixed) > .inner::-webkit-scrollbar {display: none;}
}


/* 공통 헤더 */
.header {position: fixed; top: 0; left: 0; right: 0; z-index: 49; background-color: #fff; border-bottom: 1px solid var(--line-color); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08); /*  margin: 0 -20px 20px; */ }
.wrapper .container .header .inner { padding: 0 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; height: 100px;}
.header .inner .logo img {display: block; width: 200px; height: 50px;}
.header .inner .pageTitle h2 {font-size: 24px;}
.header .inner .pageTitle .desc {color: var(--sub-font); margin: 0;}
.header .inner .right {margin-left: auto; display: flex; align-items: center; gap: 20px;}
.header .inner .right button, .header .inner .right a {padding: 5px 20px; border: 1px solid var(--line-color); background-color: #Fff; border-radius: 7px; white-space: nowrap;}
.header .inner .right .menuBtn, .header .inner .right .menuDesk  {border: 0;}
.menuBtn { width: 40px; height: 40px; border-radius: 10px; background:url(../images/icons/menu.svg) no-repeat center; background-size: 60%; border: 0; font-size: 0; text-indent: -9999px;}

/* 하단 고정 */
.bottomFixed:not(.hide) { position: fixed; bottom: 0; left: 0; right: 0; height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; z-index: 49; background-color: var(--main-color); box-shadow: 0 50px 0 50px #fff;}
.bottomFixed .botLeft, .bottomFixed .botRight { position: relative; color: #fff; width: calc(50% - 10px);}
.bottomFixed .botLeft .step {position: absolute; top: 50%; transform: translateY(-50%) rotate(180deg); left: 0; width: 40px; height: 40px; border-radius: 7px; z-index: 1; background: #fff url(../images/icons/arrow_right_alt.svg) no-repeat center; background-size: 60%; font-size: 0; text-indent: -9999px; }
.bottomFixed .botLeft:has(.step) .priceBox {padding-left: 30px;}
/* 하단 - 차량가 */
.bottomFixed .priceBox {display: flex;}
.bottomFixed .priceBox .box:not(.hide) { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: 1;}
.bottomFixed .priceBox .box:not(:last-child)::after{content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 2px; height: 60%; background-color:var(--line-color); opacity: .4;}
.bottomFixed .priceBox .box .price{font-size:16px;font-weight:700;}
.bottomFixed .priceBox .box .title { text-align: center; word-break: keep-all;}
.bottomFixed .priceBox .box .title > .desc {font-size: 13px; opacity: .8; display: block;} 
.bottomFixed .buttonBox:not(.hide) { flex-wrap: nowrap; justify-content: flex-end; gap: 20px;}
.bottomFixed .buttonBox button, .bottomFixed.price .buttonBox a { position: relative; color: #fff; padding: 0 10px; min-height: 45px; max-width: 200px; }
.bottomFixed .buttonBox button.line, .bottomFixed.price .buttonBox a.line { color: #fff; border-color: var(--line-color);}
.bottomFixed .buttonBox .request {background-color: #fff; color: var(--main-font); border-color: var(--main-color);}
.bottomFixed .buttonBox .step { display: flex; align-items: center; justify-content: center; gap: 5px; background-color: transparent; border-color: #fff; background-color: #Fff; color: var(--main-font);}
.bottomFixed .buttonBox .step::after { content: ''; width: 20px; height: 20px; background:url(../images/icons/arrow_right_alt.svg) no-repeat center/contain;}
.bottomFixed .like {position: relative; display: flex; flex-direction: column-reverse; align-items: center; gap: 5px; flex: unset; gap: 0; font-size: 14px; margin-right: 10px;}
.bottomFixed .like::before { content: ''; width: 30px; height: 30px; background: url(../images/icons/icon_like_white.svg) no-repeat center; background-size: 80%; }
.bottomFixed .like:hover::before { background: url(../images/icons/icon_like_white_on.svg) no-repeat center; background-size: 80%;}
.bottomFixed .like.active::before { background: url(../images/icons/icon_like_white_on.svg) no-repeat center; background-size: 80%;}
.bottomFixed.price .botLeft {width: calc(70% - 10px);}
.bottomFixed.price .botRight {width: calc(30% - 10px);}
/* 하단 - QR */ 
.bottomFixed .qrBox {display: flex; align-items: center; gap: 20px;}
.bottomFixed .qrInfo .desc {opacity: .8;}
.bottomFixed .qrBox .image {background-color: #Fff; padding: 5px; border-radius: 5px; width: 66px; height: 66px;}
.bottomFixed .qrBox img { display: block; width: 100%;}
/* 하단 - 프로필 */
.bottomFixed .managerBox {display: flex; align-items: center; gap: 20px;}
.bottomFixed .managerBox .image {width: 66px; height: 66px;}
.bottomFixed .managerBox .image img { display: block; width: 100%; height: 100%; border-radius: 5px; } 
.bottomFixed .managerInfo .title {font-size: 15px;}
.bottomFixed .managerInfo .info .name {margin-right: 5px; font-size: 16px;}
/* .bottomFixed .managerInfo * {display: block;} */
/* 모바일 차량가 */
.bottomFixed .detailPrice {display:none;}

/* 세로 */
@media (orientation: portrait) {
    .bottomFixed .buttonBox:not(.hide) {gap: 10px;}
    .bottomFixed .buttonBox button, .bottomFixed.price .buttonBox a {font-size: 13px;}
    .bottomFixed .priceBox .box:not(.hide) {font-size: 13px;}
    .bottomFixed .priceBox .box:not(:last-child)::after {content: unset;}
    .bottomFixed.price .botLeft {width: calc(55% - 10px);}
    .bottomFixed.price .botRight {width: calc(45% - 10px);}
    .bottomFixed .priceBox .box:not(.hide) {font-size: 14px;}
    .bottomFixed .priceBox .box .price {font-size: 14px;}
    .bottomFixed .like {margin-right: 0;}
    .bottomFixed.price .botRight .buttonBox button, .bottomFixed.price .botRight .buttonBox a {font-size: 12px; max-width: fit-content;}

}
/* 태블릿 가로 */
@media (orientation: landscape) and (min-width: 768px) and (max-width: 1399px) {
    .bottomFixed .buttonBox:not(.hide) {gap: 10px;}
    .bottomFixed .priceBox .box:not(:last-child)::after {content: unset;}
    .bottomFixed.price .botLeft {width: calc(60% - 10px);}
    .bottomFixed.price .botRight {width: calc(40% - 10px);}
    .bottomFixed .priceBox .box:not(.hide) {font-size: 14px;}
    .bottomFixed .priceBox .box .price {font-size: 14px;}
    .bottomFixed .like {margin-right: 0;}
    .bottomFixed.price .botRight .buttonBox button, .bottomFixed.price .botRight .buttonBox a {font-size: 12px; max-width: fit-content;}
}


@media (max-width: 800px){ 
    .bottomFixed .detailPrice {display:flex;align-items:center;justify-content:space-between;}
    .bottomFixed .detailPrice .box {display:flex; flex-direction:column;}
    .bottomFixed .detailPrice .title {font-size:12px; opacity: .8;}
    .bottomFixed .detailPrice .price {font-size:20px; font-weight: 700; }
    .bottomFixed .updown {display:flex; align-items:center; gap: 5px; background:none; border:0; color:#fff; font-size:13px;}
    .bottomFixed .updown::after {content:''; width: 18px; height: 18px; transform:rotate(-180deg); background: url(../images/icons/icon_arrowdown.svg) no-repeat center/contain;}
    .bottomFixed.open .updown::after {transform:rotate(0deg); }
    .bottomFixed .priceBox {position: fixed; left:0; right:0; bottom: 100px; display:flex; flex-direction:column; padding:10px 20px; background:#fff; color:var(--main-font); box-shadow:0 -8px 20px rgba(0,0,0,.15); border-radius: 25px 25px 0 0; transform:translateY(30px); opacity:0; visibility: hidden; transition: .3s ease; }
    .bottomFixed .priceBox .box:not(.hide) { flex-direction: row; padding: 5px 0; align-items: baseline; } 
    .bottomFixed .priceBox .box .title{text-align:left; font-size: 14px; } 
    .bottomFixed.open .priceBox {transform: translateY(0); opacity: 1; visibility: visible;}
}
@media (max-width: 400px){ 
    .wrapper[path="estimate_customer"] .container .header .inner {height: 80px;}
    .wrapper[path="estimate_customer"] .container main:has(.bottomFixed) > .inner {top: 100px; bottom: 170px;}
    .bottomFixed:not(.hide) {flex-direction: column; gap: 10px; height: 150px;}
    .bottomFixed.price .botLeft, .bottomFixed.price .botRight { width: 100%;}  
    .bottomFixed .buttonBox button, .bottomFixed.price .buttonBox a {max-width: unset;}
    .bottomFixed .priceBox {bottom: 140px;}
}

/* 필터박스 - new */
.filterBox .filterList {display: flex; flex-direction: column; gap: 15px;}
.filterBox .filterList li {display: flex; align-items: baseline;}
.filterBox .filterList .theme {width: 70px; font-size: 13px; color: var(--main-font);}
.filterBox .filterList .list {width: calc(100% - 70px); display: flex; flex-wrap: wrap; gap: 5px 10px;}
.filterBox .filterList button {padding: 5px 10px; border: 1px solid var(--line-color); border-radius: 7px; font-size: 14px;}
.filterBox .filterList button.on {border-color: var(--main-color); color: var(--main-color);}
.filterBox .filterList button.dis {background-color: var(--gray-bg-color); border-color: transparent; color: var(--sub-font);}
.filterBox .filterList button.click {background-color: var(--main-color); color: #fff; border-color: var(--main-color); }

/* 공통 버튼 */
.buttonBox:not(.hide) {width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px;}
.buttonBox button, .buttonBox a { flex: 1; color: #fff; padding: 8px 16px; white-space: nowrap; background-color: var(--main-color); border: 1px solid var(--main-color); border-radius: 7px; text-align: center; }
.buttonBox button.line, .buttonBox a.line {background-color: transparent; border-color: var(--main-color); color: var(--main-color);}

/* 탭 버튼 */
.tabButton {display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; padding-bottom: 20px; }
.tabButton button, .tabButton a { display: flex; position: relative; padding: 6px 18px; font-weight: 700; white-space: nowrap; border: 1px solid var(--gray-bg-color); background-color: var(--gray-bg-color); border-radius: 7px; font-size: 14px;}
.tabButton button.on, .tabButton a.on {background-color: var(--main-color); border: 1px solid var(--main-color); color: #fff;}
.tabButton .list {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 10px;}
.tabButton .list li button, .tabButton .list li a { display: block; padding: 5px 10px; white-space: nowrap; border: 1px solid var(--gray-300); font-size: 13px; background-color: var(--bg-white); color: var(--gray-500); border-radius: 30px;}
.tabButton .list li.on button, .tabButton .list li.on a {background-color: var(--orange-100); color: var(--primary-orange); border-color: var(--primary-orange); font-weight: 700;}
.tabButton button.E, .tabButton button.X {padding: 5px 35px 5px 20px;}
.tabButton button.E::before { content: ''; position: absolute; right: 11px; width: 24px; height: 24px; background: transparent url(../images/icons/icon_electronic.png) no-repeat center / contain;}
.tabButton button.X::before { content: ''; position: absolute; right: 11px; width: 24px; height: 24px; background: transparent url(../images/icons/icon_eco.png) no-repeat center / contain;}

/* 탭 메뉴 */
.tabMenu {display: flex; gap: 20px; width: 100%;}
.tabMenu button{ position: relative;  flex: 1; padding: 10px; border-radius: 7px; border: 1px solid var(--line-color); background-color: #fff; }
.tabMenu button.on {border: 1px solid var(--main-color); background-color: var(--main-color); color: #fff; }


.tablist { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; border-bottom: 1px solid var(--line-color); background-color: #fff;}
.tablist button {position: relative; color: var(--sub-font); font-weight: 700; padding: 7px; flex: 1;}
.tablist button.on {color: var(--main-color);} 
.tablist button::after {position: absolute; content: ''; width: 100%; height: 2px; left: 0; bottom: 0; background-color: var(--main-color); transform: scaleX(0); transition: transform .2s ease;} 
.tablist button.on::after { transform: scaleX(1);}

/* 라디오 버튼*/
.btnRadio { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 5px 10px;}
.btnRadio label input[type="radio"] + span { justify-content: center; padding: 7px; color: var(--sub-font); border: 1px solid var(--line-color); background-color: transparent; border-radius: 7px; font-weight: 500; white-space: nowrap; font-size: 13px;}
.btnRadio label input[type="radio"] + span::before {background: none;}
.btnRadio label input[type="radio"]:checked + span { color: #fff; border-color: var(--main-color); background-color: var(--main-color);}
/* 라디오버튼 - 견적 색상 예외처리 */ 
.btnRadio.estmColor label {border-radius: 30px;}
.btnRadio.estmColor label input[type="radio"] + span {color: var(--border); border-color: var(--border); background: var(--back);}
.btnRadio.estmColor label input[type="radio"]:checked + span { color: #fff; border-color: var(--border); background: var(--border);}
.btnRadio.estmColor label input[type="radio"]:checked + span::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;  background: var(--primary-orange); z-index: -1; border: 2px solid var(--primary-orange); border-radius: 30px;}
.btnRadio.estmColor label input[type="radio"]:checked + span::before { display: none; }

/* 체크박스 버튼*/
.btnCheck { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 5px 10px;}
.btnCheck label input[type="checkbox"] + span { justify-content: center; padding: 4px 8px; min-height: 40px; color: var(--sub-font); border: 1px solid var(--line-color); background-color: transparent; border-radius: 7px; font-weight: 500; white-space: nowrap; font-size: 13px;}
.btnCheck label input[type="checkbox"] + span::before {background: none;}
.btnCheck label input[type="checkbox"]:checked + span { color: #fff; border-color: var(--main-color); background-color: var(--main-color);}

/* 더 보기 버튼 */
.moreButton {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; z-index: 10;}
.moreButton button, .moreButton a { background: url(../images/icons/icon_more_white.svg) no-repeat center; background-size: 50%; width: 45px; height: 45px; border-radius: 50px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; background-color: var(--primary-navy); }
.moreButton.user button, .moreButton.user a {background: url(../images/icons/icon_user_add_white.svg) no-repeat center; background-color: var(--primary-navy); background-size: 50%;} 
.moreButton.edit button, .moreButton.edit a {background: url(../images/icons/icon_edit.svg) no-repeat center; background-size: 80%;} 

/* 공통 dl */
dl {width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: stretch; color: var(--main-font); gap: 20px;}
dl .data:not(.hide) { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 5px;}
dl .data dt { width: 100%; font-size: 14px; }
dl .data dt .necessary {color: var(--main-color); font-weight: 700; padding-left: 3px;}
dl .data dd:not(.hide) { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 500;}
dl .data dd .desc {font-size: 12px; color: var(--gray-500); font-weight: 500;}
dl .data dd.sel2 input {width: calc(50% - 5px);} 
dl .data dd.sel2 select {width: calc(50% - 5px);} 
dl .data dd.mark span { padding: 5px 10px; background-color: var(--white); color: var(--gray-500); border: 1px solid var(--gray-100); border-radius: 7px; font-weight: 500; white-space: nowrap; cursor: pointer; }
dl .data dd.mark span.on { background-color: var(--primary-orange); border-color: var(--primary-orange); color: var(--white); }
dl .data dd.mark span.none { background-color: var(--gray-50); border-color: var(--gray-50); color: var(--gray-400); pointer-events: none; }
dl .data .searchBox { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px;}
dl .data .searchBox button { position: absolute; right: 10px; width: 45px; padding: 2px 8px; font-size: 12px; background-color: var(--primary-navy); border: 1px solid var(--primary-navy); color: var(--white); border-radius: 5px; white-space: nowrap;}
dl .data.len dd {flex-wrap: nowrap; align-items: center; white-space: nowrap;}
dl .data.full {width: 100%;} 
dl .data.colRow dd {flex-direction: column;}
dl input, dl select {flex: 1; width: 100%;}
dl.borderType {align-items: stretch; background-color: var(--bg-white); border: 1px solid var(--gray-300); border-radius: 10px; padding: 15px;} 
dl.borderType .desc {letter-spacing: -.5px;}
dl.borderType .data { display: block; padding: 0 10px 15px 10px; border-bottom: 1px solid var(--gray-300);}
dl.borderType .data dt {margin-bottom: 3px;}
dl.row .data {width: calc(50% - 15px);}

/* 별 아이콘 */
button.star {width: 40px; height: 40px; background: url(../images/icons/icon_star_outline.svg) no-repeat center; background-size: 60%; z-index: 10; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
button.star.on {background: url(../images/icons/icon_star_on.svg) no-repeat center; background-size: 60%; }
.starBox {display: flex; flex-direction: row; flex-wrap: nowrap;}
.starBox span {display: none;}
.starBox span.on { width: 22px; height: 22px; line-height: 0; text-indent: -9999px; font-size: 0; display: inline-block; background: url(../images/icons/icon_star_on.svg) no-repeat center / contain;}
.starBox button { width: 22px; height: 22px; line-height: 0; text-indent: -9999px; font-size: 0; display: inline-block; background: url(../images/icons/icon_star_outline.svg) no-repeat center / contain;}
.starBox button.on {background: url(../images/icons/icon_star_on.svg) no-repeat center / contain;}

/* 페이지 */
.paging { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: nowrap; padding: 15px 0; gap: 10px;}
.paging button, .paging a {position: relative; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;}
.paging .now, .paging .on {background-color: var(--main-color); color: var(--white);}
.paging button span, .paging a span {font-weight: 600;}
.paging .first span {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 25px; height: 25px; background: url(../images/icons/icon_double_arrow.svg) no-repeat center; background-size: 70%; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.paging .prev span {position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(90deg); width: 25px; height: 25px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center; background-size: 70%; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.paging .next span {position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(270deg); width: 25px; height: 25px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center; background-size: 70%; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.paging .last span {position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(180deg); width: 25px; height: 25px; background: url(../images/icons/icon_double_arrow.svg) no-repeat center; background-size: 70%; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}

/* 전체삭제 / 전체선택 */
.blockWork:not(.hide) { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 20px;}
.blockWork span {white-space: nowrap;}
.blockWork .buttonBox { display: flex; align-items: center; justify-content: flex-end;} 
.blockWork .buttonBox button { padding: 5px 10px; border-radius: 5px; font-size: 12px; flex: unset;} 

/* 메뉴 */ 
.menuHome { width: 40px; height: 40px; transition: none; background: url(../images/icons/menuHome.svg) no-repeat center; background-size: 70%; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.menuDesk { width: 40px; height: 40px; background: #fff url(../images/icons/menu.svg) no-repeat center; background-size: 60%; font-size: 0; text-indent: -9999px; border: 1px solid var(--line-color); border-radius: 7px; z-index: 100;}
.menuMain {position:fixed; inset:0; z-index:101; visibility:hidden; pointer-events:none; transition:.4s;}
.menuMain.open {visibility:visible; pointer-events:auto;}
.menuMain .dimBg {position:absolute; inset:0; background:rgba(0,0,0,.6); opacity:0; transition:.4s ease-out; z-index:1;}
.menuMain.open .dimBg {opacity:1;}
/* 메뉴 박스 */
.menuMain .menuBox {position:absolute; top:0; right:0; width:500px; max-width:90vw; height: 100%; background:#fff; display:flex; flex-direction:column; transform:translateX(100%); z-index: 1; transition:.35s; box-shadow:-10px 0 30px rgba(0,0,0,.15);}
/* 열림 */
.menuMain.open {pointer-events:auto;} 
.menuMain.open .dimBg {opacity:1;}
.menuMain.open .menuBox {transform:translateX(0);}
.menuMain nav {flex:1; overflow-y:auto; padding:20px;}
.menuMain .menuTop { position: relative; display:flex; align-items:center; gap:15px; padding:20px; border-bottom: 1px solid var(--line-color);}
.menuMain .menuTop .info {margin-left: auto; padding-right: 45px; display: flex; align-items: center; gap: 5px;}
.menuMain .menuTop .logout { display: flex; align-items: center; padding: 5px 10px; border-radius: 5px; color: var(--sub-font); border: 1px solid var(--line-color); margin-left: 10px; gap: 5px;}
.menuMain .menuTop .logout::before {content: ''; width: 18px; height: 18px; background: url(../images/icons/logout.svg) no-repeat center/contain;}
.menuMain .menuTop .close {position: absolute; content: ''; top: 50%; right: 15px; transform: translateY(-50%); width: 40px; height: 40px; background: url(../images/icons/close.svg) no-repeat center; background-size: 60%; font-size: 0; text-indent: -9999px;}
.menuMain .menuList {display:flex; flex-direction:column;} 
.menuMain .menuList .gnb .title { font-weight:700; width:100%;}
.menuMain .menuList .gnb .title button { position: relative; display:flex; justify-content:space-between; align-items:center; width:100%; height: 56px; padding:0 20px; font-size:16px; border-bottom: 1px solid var(--line-color);}
.menuMain .menuList .gnb .title button::after {position: absolute; content: ''; top: 50%; right: 15px; transform: translateY(-50%); width: 24px; height: 24px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center / contain;}
.menuMain .menuList .gnb.calc .title button::after {content: none;}
.menuMain .menuList .gnb .title button.open {border-bottom: 0;}
.menuMain .menuList .gnb .title button.open::after {transform: translateY(-50%) rotate(180deg);}
.menuMain .menuList .lnb {display: none; flex-wrap: wrap; gap: 10px; padding: 0 15px 15px 15px; }
.menuMain .menuList .lnb.open {display:flex; border-bottom: 1px solid var(--line-color);}
.menuMain .menuList .lnb > li {width:calc(50% - 5px);}
.menuMain .menuList .lnb li a { display: flex; justify-content: center; text-align: center; padding: 10px; border: 1px solid var(--line-color); background-color: #fff; border-radius: 7px; font-size:14px; font-weight:500;}

/* 상담용 메뉴 */
.menuMain .menuList .lnb > li.tipWrap {width: 100%;}
.menuMain .menuList .lnb > li.tipWrap .consultTipBox {padding: 0; border: none;}
.menuMain .menuList .lnb > li.tipWrap .tabButton {padding: 0 0 20px 0;}
.menuMain .menuList .lnb > li.tipWrap .tabButton button {font-size: 14px;}

/* 데스크 - 상담용 예외처리 */
.wrapper[path="desk_counsel"] .deskBox, .wrapper[path="desk_counsel"] .modelBox {height: 100%;}
.wrapper[path="desk_counsel"] .deskBox .contBox{ display: flex; flex-direction: column; min-height: 0;}
.wrapper[path="desk_counsel"] .deskBox .quickMenu{position: sticky; bottom: 0; flex-shrink: 0; z-index: 10;}
/* 상담용 데스크 */
.deskBox {display: flex; flex-direction: column; gap: 20px;}
.deskBox .more {position: relative; color: var(--sub-font); padding-left: 10px; font-size: 12px; padding-right: 18px;}
.deskBox .more::after {position: absolute; content: ''; top: 50%; right: 0; transform: translateY(-50%) rotate(-90deg); width: 18px; height: 18px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center / contain;}
.deskBox .tabButton {padding-bottom: 0;}
/* 상담용 데스크 - 모델, 브랜드 */
.deskBox .contBox {flex:1; display: flex; flex-direction: column; gap: 20px; border: 1px solid var(--line-color); background-color: #fff; border-radius: 7px; padding: 20px;}
.deskBox .contBox .titleBox {width: 100%; display: flex; align-items: baseline; white-space: nowrap; flex-shrink: 0; gap: 10px; }
.deskBox .contBox .titleBox .changeBtn { border: 1px solid var(--line-color); border-radius: 5px; font-size: 13px; padding: 5px 10px; background-color: #fff;}
.deskBox .contBox .titleBox .tabButton {margin-left: auto; justify-content: flex-end;}
.deskBox .brandCont .title {width: 80px;}
.deskBox .brandList:not(.hide) {width: calc(100% - 100px);}
.deskBox .brandList li {width: calc(8.3% - 18.3px);}
/* 상담용 데스크 - 상담팁, 할부계산기 */
.deskBox .quickMenu ul { display: flex; flex-wrap: wrap; gap: 20px; }
.deskBox .quickMenu ul li {width: calc(50% - 10px);}
.deskBox .quickMenu ul li > button { position:relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 25px 20px; border: 1px solid var(--line-color); border-radius: 7px; background: #fff; font-size: 18px; font-weight: 500;}
.deskBox .quickMenu .list li button.tip::before {content:''; width: 24px; height:24px; background:url(../images/icons/counsel_tip.svg) no-repeat center/contain;}
.deskBox .quickMenu .list li button.tip::after {content:''; width:24px; height:24px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center/contain;}
.deskBox .quickMenu .list li button.tip.on::after {transform: rotate(180deg);}
.deskBox .quickMenu .list li button.calc::before {content:''; display:block; width: 24px; height:24px; background:url(../images/icons/calculate.svg) no-repeat center/contain;}
.deskBox .consultTipBox { width: 100%; display: none; padding: 20px; border-radius: 10px; border: 1px solid var(--line-color); background-color: #Fff;}
/* 상담용 상담팁 열림 */
.consultTipBox .tabButton {padding: 20px 0;}
.consultTipBox h4 {position: relative; display: flex; gap: 10px; }
.consultTipBox h4.tip::before {content:''; width: 24px; height:24px; background:url(../images/icons/counsel_tip.svg) no-repeat center/contain;}
.consultTipBox .subList { display: flex; flex-direction: column; gap: 10px; max-height: 250px; overflow-y: auto;}
.consultTipBox .subList li a, .consultTipBox .subList li button { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 5px; border-radius: 7px; padding: 15px; border: 1px solid var(--gray-bg-color); }
.consultTipBox .subList li a .cate, .consultTipBox .subList li button .cate { font-weight: 500;}
.consultTipBox .subList li a .content, .consultTipBox .subList li button .content {flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-align: left; text-overflow: ellipsis;}
.consultTipBox .subList li a .date, .consultTipBox .subList li button .date { white-space: nowrap; width: 65px; font-size: 12px; color: var(--sub-font); text-align: right; }
.consultTipBox.listBox {height: auto;}
/* 업무용 데스크 */
.menuGrid{display:flex; flex-wrap: wrap; align-items: stretch; gap:20px;}
.menuCate { width: calc(20% - 16px); padding: 20px; border:1px solid var(--line-color); border-radius: 7px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.04);}
.menuCate .cateTitle {display:flex;align-items:center;gap:20px;font-size:20px;font-weight:700;margin-bottom:20px;}
.menuCate .cateList{display: flex; flex-wrap: wrap; gap: 15px;} 
.menuCate .cateList li {width: 100%;}
.menuCate .cateList li a,.menuCate .cateList li button { height: 100%; display:flex; justify-content:center; align-items:center; padding: 15px 5px; border:1px solid var(--line-color); border-radius: 7px;background:#fff;  text-align: center; }
.menuCate.utility .cateList li {width: calc(50% - 7.5px);}
.menuCate .cateTitle::before{ content: ''; width: 44px; height: 44px; border-radius: 7px; background-repeat:no-repeat; background-position:center; background-size: 60%; flex-shrink:0;}
.menuCate.newcar .cateTitle::before{background-image: url(../images/icons/newcar.svg); background-color: #EEF3FD;}
.menuCate.estimate .cateTitle::before{background-image: url(../images/icons/estimate.svg); background-color: #EEF4FD;}
.menuCate.stock .cateTitle::before{background-image: url(../images/icons/stock.svg); background-color: #EAF8F4;}
.menuCate.utility .cateTitle::before{background-image: url(../images/icons/utility.svg); background-color: #F4EFF9;}
.menuCate.mypage .cateTitle::before{background-image: url(../images/icons/mypage.svg); background-color: #FCF5EF;}

@media (orientation:portrait){ 
    .header .inner .pageTitle h2 {font-size: 20px;}
    .tabButton button, .tabButton a {font-size: 13px;}
    .deskBox .salesModel .titleBox h3 {font-size: 15px;}
    .menuCate{width:calc(50% - 10px); }
    .menuCate .cateTitle{gap:14px;margin-bottom:16px;font-size:18px;}
    .menuCate .cateTitle::before{width:40px;height:40px;} 
    .menuCate.utility .cateList li{width:calc(50% - 7.5px);} 
    .menuCate.mypage {width: 100%;}
    .menuCate.mypage  .cateList li {width: calc(50% - 7.5px);}
}

.workBottom{display:flex; gap:20px; margin-top:20px;}
.workBottom .box {flex:1; background:#fff; border:1px solid var(--line-color); border-radius:7px; overflow:hidden;}
.workBottom .boxHead {display:flex; align-items:center; justify-content:space-between; padding:20px;}
.workBottom .boxHead .more { position: relative; font-size:13px; color:var(--sub-font); display: flex; align-items: center;} 
.workBottom .boxHead .more::after { content: ''; transform: rotate(-90deg); width: 18px; height: 18px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center / contain;}
.workBottom .list li {display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line-color);}
.workBottom .list li a { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 5px; width: 100%; padding: 15px 20px; }
.workBottom .list li .title {flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.workBottom .list li a .content, .workBottom .list li button .content {flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.workBottom .list li .date {flex-shrink:0; white-space: nowrap; width: 65px; font-size: 12px; color: var(--sub-font); text-align: right; margin-left: auto;} 
.workBottom .list li.nodata {width: auto; height: auto; justify-content: center; min-height: 240px; font-weight: 400; font-size: 14px;color:var(--sub-font);}
.workBottom .list li.nodata::before {content: none;}
.workBottom .placeholder {display:flex;align-items:center;justify-content:center;min-height:240px;margin:0;border-top:1px solid var(--line-color);font-size:14px;color: var(--sub-font);}

/* 데스크 - 리스트 */
/* .deskBox .listBox { width: 100%; height: 100%; border: 1px solid var(--line-color); border-radius: 7px; background-color: #fff;}
.deskBox .listBox .title { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px;}
.deskBox .listBox .title h4 {position: relative;} 
.deskBox .listBox .subList { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line-color); padding: 20px;}
.deskBox .listBox .subList li { width: 100%;}
.deskBox .listBox .subList li a { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 5px;  width: 100%;}
.deskBox .listBox .subList li a .cate, .deskBox .listBox .subList li button .cate { font-weight: 500;}
.deskBox .listBox .subList li a .content, .deskBox .listBox .subList li button .content {flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.deskBox .listBox .subList li a .date, .deskBox .listBox .subList li button .date { white-space: nowrap; width: 65px; font-size: 12px; color: var(--sub-font); text-align: right;}
.deskBox .listBox .detail {display: none;} */


/* 브랜드 리스트 */
.brandBox:not(.hide) { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px; width: 100%; height: 100%;}
.brandBox > .title { position: relative; color: var(--navy-font); font-weight: 600; padding-left: 10px; font-size: 12px; }
.brandBox > .title::before { position: absolute; content: ''; background-color: var(--navy-font); top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 65%; border-radius: 2px; }
.brandCont { overflow-y:auto; min-height:0; width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px;}
.brandCont .title { padding: 5px 10px; text-align: center; width: fit-content; font-weight: 700; white-space: nowrap; border: 1px solid var(--line-color); background-color: #fff; border-radius: 7px; font-size: 14px;}
.brandList:not(.hide) { width: 100%; display: flex; flex-wrap: wrap; align-items: stretch; gap: 20px;}
.brandList li {position: relative; width: calc(12.5% - 17.5px);}
.brandList li button, .brandList li a { position: relative; display: flex; flex-direction: column; align-items: center; padding: 10px; border: 1px solid var(--line-color); background-color: #fff; border-radius: 7px; width: 100%; height: 100%; gap: 5px;}
.brandList li button .name {font-size: 13px;}
.brandList li button .logo, .brandList li a .logo { display: flex; max-width: 50px;}
.brandList li.on button, .brandList li.on a {border-color: var(--main-color);}

/* 모델 리스트 */ 
.wrapper[path="model_search"] .brandList li {width: calc(8.33% - 9.16px);}
.wrapper.work .modelList li.state3::after { content: "재고 한정"; position: absolute; top: 2px; right: 0; background-color: rgba(0,0,0,0.05); padding: 3px 9px; border-radius: 5px; font-size: 12px; font-weight: 500;} 
.modelBox {height: 100%; display: flex; flex-direction: column;}
.modelCont { overflow-y:auto; min-height:0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 30px 20px;}
.modelCont .title { width: 55px; padding: 5px 0; text-align: center; height: fit-content; font-weight: 700; white-space: nowrap; border: 1px solid var(--gray-bg-color); background-color: #fff; border-radius: 7px; font-size: 15px;}
.modelCont .modelList {width: calc(100% - 75px);}
.modelCont .modelList li button, .modelCont .modelList li a { flex-direction: column-reverse; justify-content: flex-end; padding: 15px;}
.modelList { width: 100%; display: flex; flex-wrap: wrap; align-items: stretch; gap: 20px;}
.modelList li {position: relative; width: calc(12.5% - 17.5px);}
.modelList li button, .modelList li a { position: relative; display: flex; flex-direction: column; padding: 40px 20px 20px 20px; border: 1px solid var(--line-color); background-color: #fff; border-radius: 7px; width: 100%; height: 100%; gap: 10px;}
.modelList li button .car, .modelList li a .car { width: 100%; display: flex; justify-content: center;}
.modelList li button .logo, .modelList li a .logo { position: absolute; top: 5px; left: 5px; display: flex; max-width: 35px;}
.modelList li button .name, .modelList li a .name {  text-align: left;}
.modelList li button .name .cnt, .modelList li a .name .cnt {font-size: 12px; color: var(--primary-orange); font-weight: 700; margin-left: 3px; word-break: keep-all;}
.modelList li.x::before {position: absolute; content: ''; width: 18px; height: 18px; top: 10px; right: 5px; font-weight: 700; font-size: 12px; color: var(--main-font); background: url(../images/icons/icon_eco.png) no-repeat center / contain;  z-index: 1;}
.modelList li.e::before { position: absolute; content: ''; width: 18px; height: 18px; top: 10px; right: 5px; font-weight: 700; font-size: 12px; color: var(--main-font); background: url(../images/icons/icon_electronic.png) no-repeat center / contain; z-index: 1;}
.modelList li.e.x::before { content: ''; width: 36px; height: 18px; right: 5px; background: transparent url(../images/icons/icon_electroniceco.png) no-repeat center / contain; }
.modelList.wide .name { display: block; font-size: 16px; font-weight: 700; margin: 10px 0;}
.modelList.wide .price {text-align: right; font-size: 16px; font-weight: 700; margin-top: auto;}
.modelList.wide li button dl, .modelList.wide li a dl {display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; gap: 0;}  
.modelList.wide li button dl .data, .modelList.wide li a dl .data {display: flex; flex-wrap: wrap; flex-direction: row;}
.modelList.wide li button dl .data dt, .modelList.wide li a dl .data dt {width: 30px; color: var(--gray-500); font-weight: 500; font-size: 13px;}
.modelList.wide li button dl .data dd, .modelList.wide li a dl .data dd {width: calc(100% - 35px); font-weight: 500; word-break: keep-all; font-size: 13px; color: var(--gray-500);}
.modelList.wide li button dl .data dd .unit, .modelList.wide li a dl .data dd .unit {font-size: 11px; color: var(--gray-500);}
.modelList.wide li.e::before {position: absolute; content: 'EV'; top: 15px; right: 20px; padding: 5px 20px 5px 10px; font-weight: 700; font-size: 12px; color: var(--main-font); background: var(--gray-bg-color) url(../images/icons/icon_electronic.png) no-repeat center right -1px;border-radius: 30px;}
.modelList.wide li.x::before {position: absolute; content: 'HEV'; top: 15px; right: 20px; padding: 5px 30px 5px 10px; font-weight: 700; font-size: 12px; color: var(--main-font); background: var(--gray-bg-color) url(../images/icons/icon_eco.png) no-repeat center right -1px;border-radius: 30px;}

/* 옵션리스트 */
.optionList {display: flex; flex-wrap: wrap; gap: 20px;}
.optionList li {position: relative; width: 100%;}
.optionList li button { width: 100%; display: flex; align-items: stretch; padding: 10px; border-radius: 7px; border: 1px solid var(--line-color); gap: 10px; }
.optionList li button .image {position: relative; display: flex; justify-content: center; height: 100px;}
.optionList li button .image img { width: 140px; height: 100px; object-fit: cover; border-radius: 7px; display: block;}
.optionList li button .icons {position: absolute; top: 82px; left: 15px; }
.optionList li button .icons a { display: block; width: 25px; height: 25px; background:rgba(0,0,0,0.19) url(../images/icons/icon_fullscreen.svg) no-repeat center; background-size: 75%; border-radius: 5px;}
.optionList li button .image .photo {display: flex;}
.optionList li button .image .count {position: absolute; bottom: 5px; right: 5px; padding: 2px 6px; font-size: 12px; color: #fff; background-color: rgba(0,0,0,.65); border-radius: 5px; min-height: 25px; display: flex; align-items: center;}
.optionList li button .data {display: flex; flex-direction: column-reverse; flex: 1;}
.optionList li button .data .name {text-align: left; font-size: 15px; }
.optionList li button .data .info {color: var(--sub-font); text-align: left; font-weight: 400; font-size: 13px; letter-spacing: -.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; word-break: break-word;}
.optionList li button .data .price {margin-top: auto; text-align: right; font-weight: 700; font-size: 16px; }
.optionList li button:not(:has(.image)) .icons {bottom: 8px; top: unset; }
.optionList li.on button {border-color: var(--main-color);}
.optionList li.dis button {opacity: .7; padding: 10px 10px 20px 10px; background-color: var(--gray-bg-color); }
.optionList li.dis button::after { position: absolute; right: 10px; bottom: 5px; font-size: 11px; color: var(--main-color);}
.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: #0B2C6E; content: '필수 선택 옵션';}
.optionList li.state3::after {content: "재고 한정"; position: absolute; top: 0; right: 0; background-color: rgba(0,0,0,0.05); padding: 3px 9px; border-radius: 5px; font-size: 10px; font-weight: 500; color: var(--sub-font);}
.wrapper.work .optionList li button .icons {position: unset;}
/* 옵션 직접입력 */
.optionList li.self button .data {flex-direction: column;}
.optionList li.self button .data .name {padding-right: 25px;}
.optionList li.self .btnDelSelf {position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; background: url(../images/icons/close.svg) no-repeat center; background-size: 50%; font-size: 0; text-indent: -9999px;}

/* 색상리스트 */
.colorList {display: flex; flex-wrap: wrap; gap: 20px;}
.colorList li {position: relative; width: calc(50% - 10px);}
.colorList li button { width: 100%; height: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; padding: 10px; border-radius: 7px; border: 1px solid var(--line-color); gap: 0 10px; }
.colorList li button .image {position: relative; display: flex; overflow: hidden; flex-shrink: 0; border-radius: 7px; width: 110px;}
.colorList li button img {border-radius: 7px; transform: scale(1.5) translateX(20px); display: block;}
.colorList li button .icons {position: absolute; top: 50px; left: 15px;}
.colorList li button .icons a { display: block; width: 25px; height: 25px; background:rgba(0,0,0,0.19) url(../images/icons/icon_fullscreen.svg) no-repeat center; background-size: 75%; border-radius: 5px;}
.colorList li button .name {width: calc(100% - 120px); text-align: left; word-break: keep-all; font-size: 14px;}
.colorList li button .price {color: var(--sub-font); font-size: 13px; width: 100%; text-align: right; font-weight: 700;}
.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(--line-color); 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(--line-color); 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 .colorChip + .name {width: calc(100% - 46px);}
.colorList li.on button {border-color: var(--main-color);}
.colorList.colorIntCont li button img {transform: none; height: 70px; width: 110px; object-fit: cover;}
.colorList.colorExtCont li button .icons {top: 40px; left: 10px;}
.colorList li.dis button { background-color: var(--gray-100); opacity: .7;} 
.colorList li.dis button::after { position: absolute; right: 5px; bottom: 2px; font-size: 11px; color: var(--main-color); }
.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.state3::after {content: "재고 한정"; position: absolute; top: 0; right: 0; background-color: rgba(0,0,0,0.05); padding: 3px 9px; border-radius: 5px; font-size: 10px; font-weight: 500; color: var(--gray-500);}
/* 색상 직접입력 */
.colorList li.self button .data {display: flex; flex-wrap: wrap; width: 100%;}
.colorList li.self button .name {width: 100%; padding-right: 25px;}
.colorList li.self .btnDelSelf {position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; background: url(../images/icons/close.svg) no-repeat center; background-size: 50%; font-size: 0; text-indent: -9999px;}


/* 판매조건 */ 
.discountList { width: 100%; padding: 20px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto;} 
.discountList > li {position: relative;}
.discountList > li .name { position: relative; display:flex; align-items:center; gap:5px;font-size:14px; font-weight:600;}
.discountList > li .help {  content: ''; width: 20px; height: 20px; background: url(../images/icons/icon_help.svg) no-repeat center; background-size: 90%; font-size: 0; text-indent: -9999px; }
.discountList > li .sub li {margin-top: 10px;}
.discountList > li .sub li.on button {border-color: var(--main-color);}
.discountList > li.notice {font-size:13px; text-align: center; }
.discountList > li .buttonBox {margin-top:12px; justify-content: center;}
.discountList > li .buttonBox a {padding: 8px; border-radius: 7px; background-color: var(--main-color); color:#fff;}
.discountList > li.dis .sub button {opacity: .7; background-color: var(--gray-bg-color); border-radius: 5px; }
.discountList > li.dis .sub button::after { position: absolute; right: 10px; bottom: 5px; font-size: 12px; color: var(--main-color);}
.discountList > li.dis::before {display: none;} 
.discountList > li.dis[dis='sub'] .sub button::after { content: '연계된 할인 선택 필요';}
.discountList > li.dis[dis='anti'] .sub button::after { content: '선택된 할인 조합 불가';}
.discountList .sub {display:flex; flex-direction:column; gap: 8px;}
.discountList .sub button { position: relative; display:flex; justify-content:space-between; align-items:baseline; gap: 5px; width:100%; padding: 10px 10px 20px 10px; border:1px solid var(--line-color); border-radius: 7px; background:#fff;}
.discountList .sub button .require {text-align: left; font-size: 14px; width: calc(55% - 2.5px); }
.discountList .sub button .price {font-size: 14px; width: calc(45% - 2.5px); text-align: right; }
.discountList .sub button .price input {width: 100%;}
.discountList .info { display: block; margin-top: 10px; padding: 10px; border-radius: 7px; background-color:var(--gray-bg-color); font-size: 12px; }
/* 판매조건 - 전기차 지자체 보조금 */
.discountList > li .selBtn .list {display: none;}
.discountList > li .selBtn .list.open {display: flex; position: absolute; padding: 10px; left: 0; background: #fff; z-index: 1; }
.discountList > li.hide {display: none;}
.discountList > li .box.cnt2 { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 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: 1px solid var(--line-color); border-radius: 7px; cursor: pointer;}
.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);}
/* 판매조건 직접입력 */ 
.discountList li.self button {padding: 10px;}
.discountList li.self .price {text-align: left; width: 100%;}
.discountList li.self .btnDelSelf {position: absolute; bottom: 6px; right: 5px; width: 30px; height: 30px; background: url(../images/icons/close.svg) no-repeat center; background-size: 50%; font-size: 0; text-indent: -9999px;}
/* 판매조건 팝업 */ 
.popup .content .discountList {padding: 0;}

/* open일 경우 */
.estmBar.open .btn .sub { display: none; }
.estmBar.open > .btn button {border: 1px solid var(--primary-navy); border-bottom: 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: #fff; z-index: 11;}
.estmBar.open > .list { 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(--main-color); width: 3px; height: 65%; border-radius: 2px;} 

/* 차량 선택 페이지 */
.modelSelBox { width: 100%; height: 100%; display: flex; flex-wrap: wrap; gap: 20px;}
.modelSelBox .top { width: 100%; display: flex; align-items: center; gap: 10px;}
.modelSelBox .top button, .modelSelBox .top a { border: 1px solid var(--line-color); border-radius: 5px; font-size: 13px; padding: 5px 10px; background-color: #fff;}
.modelSelBox .top button.on {border-color: var(--main-color); color: var(--main-color);}
.modelSelBox .top  h3 + :is(button, a) {margin-left: auto;}
.modelSelBox > .box { position: relative; display: flex; flex-direction: column; width: calc(33.33% - 13.3px); gap: 10px; overflow-y: auto; height: 100%; padding: 20px; border-radius: 7px; border: 1px solid var(--line-color); background-color: #fff;}
.modelSelBox > .box h4 {margin: 20px 0 10px 0;}
.modelSelBox .filterBox {border: none; padding: 0; } 
.modelSelBox .scroll {overflow-y: auto; overflow-x: hidden;}
.modelSelBox .colorBox {overflow-y: auto; height: 100%; width: calc(33.33% - 13.3px); display: flex; flex-wrap: wrap; gap: 20px;}
.modelSelBox .colorBox .box { display: flex; flex-direction: column; gap: 10px; width: 100%; height: calc(50% - 10px); padding: 20px; border-radius: 7px; border: 1px solid var(--line-color); background-color: #fff;}
.modelSelBox .colorBox .ext { height: calc(65% - 10px);}
.modelSelBox .colorBox .int { height: calc(35% - 10px);}
.modelSelBox .colorBox h3 {display: flex; align-items: center; width: fit-content;}
.modelSelBox .selVehicle {width: 100%; display: flex; flex-direction: column; }
.modelSelBox .selVehicle .selVehicleList {overflow-x: auto; padding-bottom: 5px;}
.modelSelBox .selVehicle .selVehicleList ul {display: flex; gap: 10px;} 
.modelSelBox .selVehicle .selVehicleList .blank:not(.hide) { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 3px; font-weight: 700; font-size: 13px; color: var(--sub-font); word-break: keep-all;} 
.modelSelBox .selVehicle .selVehicleList .blank::before { content: ''; width: 24px; height: 24px; background: url(../images/icons/icon_blank.svg) no-repeat center / contain;}
.modelSelBox .selVehicle .selVehicleList ul.more li {flex: 0 0 calc(50% - 5px);}
.modelSelBox .selVehicle .selVehicleList ul li { flex: 0 0 100%; position: relative;}
.modelSelBox .selVehicle .selVehicleList ul li button {width: 100%; height: 100%; padding: 10px; border-radius: 7px; border: 1px solid var(--line-color); display: flex; flex-direction: column; align-items: flex-start; font-weight: 400; color: var(--sub-font); font-size: 13px;}
.modelSelBox .selVehicle .selVehicleList ul li button .title { width: 100%; text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.modelSelBox .selVehicle .selVehicleList ul li button .name {text-align: left;}
.modelSelBox .selVehicle .selVehicleList ul li button .title .model {font-size: 16px; font-weight: 700; color: var(--main-font);}
.modelSelBox .selVehicle .selVehicleList ul li button .price { position: absolute; bottom: 10px; right: 10px; font-weight: 700; text-align: right; font-size: 15px; color: var(--main-font);}
.modelSelBox .selVehicle .selVehicleList ul li.on button {border-color: var(--main-color);}
.modelSelBox .selVehicle .selVehicleList ul li.state3::after { content: "재고 한정";  position: absolute; top: 0; right: 0; background-color: rgba(0,0,0,0.05); padding: 3px 9px; border-radius: 5px; font-size: 10px; color: var(--gray-500);}
.modelSelBox .imageBox {margin-top: auto; display: flex; flex-direction: column; flex: 1;/*  min-height: 180px; */}
.modelSelBox .imageBox .image {display: flex; align-items: center; justify-content: center; flex: 1; overflow: hidden;}
.modelSelBox .imageBox .image img {height: 200px; object-fit: contain; object-position: center; }
.modelSelBox .imageBox .btnVehicle {display: flex; gap: 20px;}
.modelSelBox .imageBox .btnVehicle button, .modelSelBox .imageBox .btnVehicle a { display: block; text-align: center; flex: 1; padding: 6px; font-size: 14px; border: 1px solid var(--line-color); border-radius: 7px; white-space: nowrap;}
/* 팝업 예외처리 */
.popup .content .modelSelBox {gap: 0;}
.popup .content .modelSelBox > div {width: 100%;}
.popup .content .modelSelBox > .box {width: 100%;}
.popup .content .modelSelBox h4:first-child {margin-top: 0;}
.popup .content .modelSelBox h4 {margin: 15px 0 10px 0;}

/* 견적 상세 - 할인, 보조금, 면세, 탁송  */
.estmBody, #estmBody, .estmBox {height: 100%;}

/* 견적 - 직접입력 및 변경 */
.estmSelfBtn, .estmChangeBtn {margin-left: auto; border: 1px solid var(--line-color); border-radius: 5px; font-size: 13px; padding: 5px 10px; background-color: #fff;}
.wrapper:not(.work) .estmSelf:not(.hide) { display: flex; flex-wrap:wrap; gap:15px; margin-top: 15px; padding: 20px; border:1px solid var(--line-color); border-radius: 7px;background-color: var(--bg-color);} 
.wrapper:not(.work) .estmSelf > div { display: flex; align-items: center; gap:10px; width: 100%;}
.wrapper:not(.work) .estmSelf .name {flex-shrink:0; width: 45px; font-size:14px; }
.wrapper:not(.work) .estmSelf select, .wrapper:not(.work) .estmSelf input {width:100%; padding: 12px 40px 12px 12px; background-color: #fff; }
.wrapper:not(.work) .estmSelf .inputBox { position:relative; display:block; width:100%;} 
.wrapper:not(.work) .estmSelf .unit { position:absolute; top: 50%; right: 15px; transform: translateY(-50%); font-size: 13px; color: var(--sub-font);}
.wrapper:not(.work) .estmSelf .buttonBox .line {background-color: #fff;}
/* 직접입력 팝업 */
.wrapper:not(.work) .popup .content .estmSelf:not(.hide) {background-color: transparent; border: 0; padding: 0;}
.wrapper:not(.work) .popup .content .estmSelf .inputBox input {padding: 12px 40px 12px 12px; text-align: right;}

/* summary 공통 영역 */
.estimateBox {display:flex; flex-wrap: wrap; gap:20px; align-items: flex-start; width: 100%; height: 100%; min-height: 0%;}
.estimateBox .summaryBox {width: calc(20% - 10px); display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 20px;}
.estimateBox .summaryBox .btnChange {padding: 2px 8px; border: 1px solid var(--line-color); border-radius: 5px; font-size: 13px; background-color: #fff;}
.estimateBox .summaryBox .vehicleInfo .info {position: relative;}
.estimateBox .summaryBox .vehicleInfo .info .model {font-size: 24px; font-weight: 700; padding: 0 45px 5px 0;}
.estimateBox .summaryBox .vehicleInfo .info .price {font-size: 16px; font-weight: 700; text-align: right;}
.estimateBox .summaryBox .vehicleInfo .info .btnChange { position: absolute; top: 4px; right: 0;}
.estimateBox .summaryBox .vehicleInfo .image {max-width: 400px; margin: 0 auto; display: flex; align-items: center; justify-content: center;}
.estimateBox .summaryBox .vehicleOption {border: 1px solid var(--line-color); background-color: #fff; border-radius: 7px; padding: 15px; height: 100%; overflow-y: auto; flex: 1; min-height: 0;}
.estimateBox .summaryBox .vehicleOption .title {margin-bottom: 10px; font-weight:700; display: flex; align-items: center;}
.estimateBox .summaryBox .vehicleOption .title .btnChange {margin-left: auto;}
.estimateBox .summaryBox dl {gap: 15px; color: var(--sub-font); }
.estimateBox .summaryBox dl + dl {margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line-color);} 
.estimateBox .summaryBox dl .data {flex-wrap: nowrap; gap: 0;}
.estimateBox .summaryBox dl .data dt {width: 100px; text-align: left;}
.estimateBox .summaryBox dl .data dd:not(.hide) {flex: 1; justify-content: flex-end; font-weight: 400; font-size: 14px; text-align: right; }
.estimateBox .summaryBox dl .data .btnChange {width: 100%; display: flex; align-items: baseline; padding: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); } 
.estimateBox .summaryBox .totalBox {flex-shrink: 0; margin-top:auto; padding: 20px; border-radius: 7px; background-color: #fff; border: 1px solid var(--line-color);}
.estimateBox .summaryBox .totalBox .total, .estimateBox .summaryBox .totalBox .totalPrice { width: 100%; font-weight:700; display:flex; flex-wrap: wrap; justify-content:space-between; align-items: center;}
.estimateBox .summaryBox .totalBox .total + .total {margin-top:8px;}
.estimateBox .summaryBox .totalBox .totalPrice .price {font-size:24px;}

/* 조건 선택 */
.estimateBox .conditionBox {flex:1; display: flex; flex-wrap: wrap; gap:20px; width: calc(80% - 10px); height: 100%;}
.estimateBox .conditionBox .cont:not(.hide) { flex: 1; display:flex; flex-direction:column; border:1px solid var(--line-color); border-radius:7px; background:#fff; height: 100%;}
.estimateBox .conditionBox .cont .top {padding: 15px 20px; border-bottom:1px solid var(--line-color); display: flex; align-items: center;}
.estimateBox .conditionBox .cont .top h3 {color: var(--main-color);}
.estimateBox .conditionBox .cont .top .buttonBox {margin-left: 10px;}
.estimateBox .conditionBox .cont .middle {padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 20px; overflow-y: auto;}
.estimateBox .conditionBox .bottom {display:flex; justify-content:space-between; align-items:center; min-height: 55px; margin-top:auto; padding: 0 20px; border-top:1px solid var(--line-color);}
.estimateBox .conditionBox .bottom .title, .estimateBox .conditionBox .bottom .name {font-size:13px; color:var(--sub-font);}
.estimateBox .conditionBox .bottom .price {font-size:18px; font-weight:700;}
.estimateBox .conditionBox .bottom .blank {font-size:13px; color:var(--sub-font);}
.estimateBox .conditionBox .taxPrice {display:flex; justify-content:space-between; align-items: baseline; font-size: 14px;}
.estimateBox .conditionBox .taxPrice .title { text-align: left;}
.estimateBox .conditionBox .taxPrice .price { font-weight:700; color:#ff4d4f; text-align: right;}
.estimateBox .conditionBox .taxCheck {display:flex; flex-wrap:wrap; gap:12px;}
.estimateBox .conditionBox .taxCheck label {display:flex; align-items:center; gap: 10px;}   
.estimateBox .conditionBox .deliveryTab:not(.hide) {display: flex; flex-wrap: wrap; gap: 5px 10px;}
.estimateBox .conditionBox .deliveryType .title, .estimateBox .conditionBox .deliveryArea .title {margin-bottom: 10px; font-size: 14px; font-weight: 600;}
.estimateBox .conditionBox .deliveryType .name {display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;}
.estimateBox .conditionBox .deliveryType .name button { position: relative; border: 1px solid var(--line-color); padding: 7px 10px; border-radius: 7px; text-align: left; flex: 1; font-size: 13px;}
.estimateBox .conditionBox .deliveryType .name button::after { position: absolute; content: ''; top: 50%; right: 3px; transform: translateY(-50%); width: 18px; height: 18px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center / contain;}
.estimateBox .conditionBox .deliveryType.self:not(.hide) {display: flex; flex-wrap: wrap; align-items: center; gap: 10px;}
.estimateBox .conditionBox .deliveryType.self .inputBox {position: relative; width: 100%;}
.estimateBox .conditionBox .deliveryType.self .inputBox  input[type="text"] {padding: 8px 25px 8px 25px; width: 100%;}
.estimateBox .conditionBox .deliveryType.self .inputBox .pre {position: absolute; top: 50%; left: 8px; transform: translateY(-50%); z-index: 1; font-size: 12px; color: var(--sub-font); font-weight: 400; letter-spacing: -.5px; }
.estimateBox .conditionBox .deliveryType.self .inputBox .unit {position: absolute; top: 50%; right: 8px; transform: translateY(-50%); z-index: 1; font-size: 12px; color: var(--sub-font); font-weight: 400; letter-spacing: -.5px; }
.estimateBox .conditionBox .deliveryType.self .cancel { width: 100%; background-color: var(--gray-bg-color); padding: 5px 10px; font-size: 12px; border-radius: 7px; white-space: nowrap;}
.estimateBox .conditionBox .deliveryArea .selectBox {display: flex; flex-wrap: wrap; gap: 10px;}
.estimateBox .conditionBox .deliveryArea .selectBox select {width: 100%;}
.estimateBox .conditionBox .check [class^="tax"], .estmData .bondTypeCheck [class^="tax"], .estimateBox .conditionBox .sub {width: 100%; font-size: 13px; color: var(--sub-font);}
.estimateBox .conditionBox .check [class^="estmRslt"], .estmData .bondTypeCheck [class^="estmRslt"], .estimateBox .conditionBox .taxfree .sub .price {float: right;}
.estimateBox .conditionBox .btnRadio label {flex: 1;}
.estimateBox .conditionBox .subList li button .price {float: unset}
.estimateBox .subList:not(.hide), .popup .content .subList:not(.hide) { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 10px;}
.estimateBox .subList li, .popup .content .subList li { width: calc(50% - 5px);} 
.estimateBox .subList li button, .popup .content .subList li button { width:100%; height: 100%; padding: 7px; border:1px solid var(--line-color); border-radius:7px; background-color:#fff; color: var(--sub-font); font-size:13px; text-align: center; word-break: keep-all;}
.estimateBox .subList li.on button, .popup .content .subList li.on button { background-color: var(--main-color); color: #fff; border-color: var(--main-color);}
.estimateBox .subList li.on button .price, .popup .content .subList li.on button .price {color: #fff;}
.estimateBox .subList li.notice {width: 100%; text-align: center; font-weight: 600;}
.estimateBox .subList.cnt2 li, .popup .content .subList.cnt2 li { width: calc(50% - 5px); }
.estimateBox .subList.cnt3 li, .popup .content .subList.cnt3 li { width: calc(33.3% - 6.6px); }
.estimateBox .subList.deliverySel li { width: calc(33.3% - 6.6px);}

.estimateBox .conditionBox .contCol {display: flex; flex-direction: column; gap: 20px; flex: 1; height: 100%;}
.estimateBox .conditionBox .contCol .cont {min-height: 0;}
.estimateBox .conditionBox .contCol .cont.downPay {flex: 0 0 auto; height: auto;}
.estimateBox .conditionBox .contCol .cont.downPay .choiced { flex-direction: row; justify-content: space-between; border: 0;}
.estimateBox .downSel {display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 10px;}
.estimateBox .downSel li button, .popup .content .downSel li button { width: 100%; height: 100%; word-break: keep-all; padding: 7px; border: 1px solid var(--line-color); border-radius: 7px; color: var(--sub-font); font-size: 13px;}
.estimateBox .downSel li.on button, .popup .content .downSel li.on button {background-color: var(--main-color); color: #fff;}

/* 조건선택 팝업 예외처리 및 추가 */
.popup .content .estimateBox .conditionBox .cont:not(.hide) {border: 0; border-radius: 0;}
.popup .content .estimateBox .conditionBox .cont .middle {padding: 0;}
.popup .content .middle {display: flex; flex-direction: column; gap: 15px;}
.popup .content .subList:not(.hide) { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 10px;}
.popup .content .subList li { width: calc(50% - 5px);}  
.popup .content .subList.cnt2 li { width: calc(50% - 5px); }
.popup .content .subList.cnt3 li { width: calc(33.3% - 6.6px); }

/* 구입 조건 선택 */
.purchaseBox {/* flex:1; min-height: 0; */ display: flex; flex-direction: column; flex-wrap: wrap; gap:20px; width: calc(80% - 10px); height: 100%;}
.purchaseBox .tabMenu .tab {flex: 1; position: relative;}  
.purchaseBox .tabMenu button::before {content: ''; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); width: 20px; height: 20px; background-color: var(--icon-line-color); -webkit-mask: url('../images/icons/icon_check_dis.svg') no-repeat center/contain; mask: url('../images/icons/icon_check_dis.svg') no-repeat center/contain;}
.purchaseBox .tabMenu button .count {display: none; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); width: 22px; height: 22px; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background-color: var(--main-color); border-radius: 50%; color: #fff;}
.purchaseBox .tabMenu button .count:not(:empty) {display: flex;}
.purchaseBox .tabMenu button:has(.count:not(:empty))::before {content: none;}
.purchaseBox .tabMenu button.on .count {background-color: #fff; color: var(--main-color);}

/* .purchaseBox .tabMenu button[data-count]::before { content: attr(data-count); position: absolute; top: 50%; left: 10px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: #fff; background-color: var(--main-color); border-radius: 50%; font-size: 12px; font-weight: 600;}
.purchaseBox .tabMenu button.on[data-count]::before { background-color: #fff; color: var(--main-color);}
.purchaseBox .tabMenu button:not([data-count])::before { content: ''; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); width: 20px; height: 20px; background-color: var(--icon-line-color); -webkit-mask: url('../images/icons/icon_check_dis.svg') no-repeat center/contain; mask: url('../images/icons/icon_check_dis.svg') no-repeat center/contain;}
.purchaseBox .tabMenu button {width: 100%;}
.purchaseBox .tabMenu button:not([tab="cash"])::before { content: ''; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); width: 20px; height: 20px; background-color: var(--icon-line-color); -webkit-mask: url('../images/icons/icon_check_dis.svg') no-repeat center/contain; mask: url('../images/icons/icon_check_dis.svg') no-repeat center/contain;} 
.purchaseBox .tabMenu button.on + label span::before {background-color: #fff;}
.purchaseBox .tabMenu label {position: absolute; top:50%; left: 10px; transform: translateY(-50%); z-index: 1;}
.purchaseBox .tabMenu button.selected::before {background-color: var(--main-color); -webkit-mask: url('../images/icons/icon_check_on.svg') no-repeat center/contain; mask: url('../images/icons/icon_check_on.svg') no-repeat center/contain;}
.purchaseBox .tabMenu button.selected.on::before {background-color: #fff; -webkit-mask: url('../images/icons/icon_check_on.svg') no-repeat center/contain; mask: url('../images/icons/icon_check_on.svg') no-repeat center/contain;} */
.purchaseBox .tabCont > div{ display:none;}
.purchaseBox .purchaseCont { position: relative; display: flex; flex-direction: column; gap: 20px; width: 100%; padding: 20px; background-color: #fff; border-radius: 7px; border: 1px solid var(--line-color); flex: 1;/*  overflow-y: auto;  */min-height: 0;}
.purchaseBox .purchaseCont .cont {display: flex; flex-wrap: wrap; gap: 20px; width: 100%;}
.purchaseBox .purchaseCont .notice:not(.hide) { display: flex; align-items: center; gap: 10px; background-color: var(--gray-bg-color); word-break: keep-all; padding: 15px 85px 15px 15px; color: var(--main-color); font-size: 14px; width: 100%; border-radius: 7px; font-weight: 600;}
.purchaseBox .purchaseCont .addFincCell { position: absolute; top: 33px; right: 35px; background-color: #fff; border-radius: 5px; font-size: 13px; padding: 3px 9px; border: 1px solid var(--line-color); margin-left: auto; white-space: nowrap;} 
.purchaseBox .purchaseCont .fincCell .summary {width: 100%; position: relative; display: none;}
.purchaseBox .purchaseCont .fincCell .summary .fincSumy { min-height: 50px; border-radius: 7px; border: 1px solid var(--gray-300); display: flex; flex-direction: row; flex-wrap: wrap; gap: 0 10px; justify-content: center; align-items: center; width: 100%; padding: 10px 70px 10px 15px;}
.purchaseBox .purchaseCont .fincCell .summary .fincSumy::after {position: absolute; content: ''; top: 50%; right: 15px; width: 24px; height: 24px; transform: translateY(-50%); background-color: var(--icon-main-color); -webkit-mask: url('../images/icons/icon_arrowdown.svg') no-repeat center/contain; mask: url('../images/icons/icon_arrowdown.svg') no-repeat center/contain;}
.purchaseBox .purchaseCont .fincCell:has(.config.open) .summary .fincSumy::after {transform: translateY(-50%) rotate(180deg);}
.purchaseBox .purchaseCont .fincCell .summary .delFincCell {position: absolute; content: ''; top: 50%; right: 40px; width: 40px; height: 40px; transform: translateY(-50%); background-color: var(--icon-main-color); -webkit-mask: url('../images/icons/delete.svg') no-repeat center; mask: url('../images/icons/delete.svg') no-repeat center; mask-size: 55%; text-indent: -9999px; font-size: 0;}
.purchaseBox .purchaseCont h3 {margin-bottom: 15px; display: flex; align-items: center; } 
.purchaseBox .purchaseCont .item {width: 100%; flex: 1; overflow-y: auto; height: 100%;}
.purchaseBox .purchaseCont .item .subTitle {width: 100%; margin: 15px 0 10px 0;}
.purchaseBox .purchaseCont .item .choiced:not(.hide) { display: flex; align-items: center; justify-content: space-between;/*  min-height: 50px; */ gap: 15px; margin: 15px 0; /* padding: 10px 15px;  border: 1px solid var(--line-color); border-radius: 7px; background:var(--bg-color); */}
.purchaseBox .purchaseCont .item .choiced .data:not(.hide) { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px;}
.purchaseBox .purchaseCont .item .choiced .name { font-size: 13px;}
.purchaseBox .purchaseCont .item .choiced .price {font-weight:700; text-align: right;}
.purchaseBox .purchaseCont .item .choiced .price::after {content: '원'; margin-left: 5px; font-size:13px; font-weight:500; color: var(--sub-font);} 
.purchaseBox .purchaseCont .btnRadio em {font-size:13px;}
.purchaseBox .purchaseCont .btnRadio strong {display:block; font-size:16px; color: var(--main-font);}
.purchaseBox .purchaseCont .btnRadio em {font-size:13px; color: var(--sub-font); font-style:normal;}
.purchaseBox .purchaseCont .btnRadio.card > label > span { flex-direction:column; min-height: 80px;}
.purchaseBox .purchaseCont .btnRadio.sel > label {min-width:0;}
.purchaseBox .purchaseCont .btnRadio.sel > label > span {flex-direction:column; gap: 7px; min-height:140px; text-align:center;}
.purchaseBox .purchaseCont .btnRadio.sel strong {font-size:15px;}
.purchaseBox .purchaseCont .btnRadio.sel b {font-size:22px;}
.purchaseBox .purchaseCont .btnRadio.sel input:checked + span {background: var(--main-color); border-color: var(--main-color);}
.purchaseBox .purchaseCont .btnRadio input:checked + span strong, .purchaseCont .btnRadio input:checked + span b, .purchaseCont .btnRadio input:checked + span em {color:#fff;}
.purchaseBox .purchaseCont .regBox {display: flex; flex-direction: column; gap: 20px;}
.purchaseBox .purchaseCont .config .bar:not(.hide) {width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 5px 10px; padding: 10px 15px;}
.purchaseBox .purchaseCont .config .bar .title {width: 60px; color:  var(--sub-font); font-size: 13px; } 
.purchaseBox .purchaseCont .config .bar > :not(.title) { width:calc(100% - 70px); }
.purchaseBox .purchaseCont .config .bar .full {width: calc(100% - 70px);}  
.purchaseBox .purchaseCont .config .bar .insureBC {font-size: 12px; color: var(--sub-font);}
.purchaseBox .purchaseCont .config .bar .radio, .purchaseBox .purchaseCont .config .bar .check {display: flex; flex-wrap: wrap; gap: 5px 10px;}
.purchaseBox .purchaseCont .config .bar .check input[type="checkbox"] + span {font-size: 12px; padding-left: 18px;}
.purchaseBox .purchaseCont .config .bar .check input[type="checkbox"] + span:before {width: 15px; height: 15px;}
.purchaseBox .purchaseCont .config .bar .half {width: calc(50% - 40px); position: relative;} 
.purchaseBox .purchaseCont .config .bar .right {width: calc(50% - 40px); text-align: right; position: relative; font-weight: 700;}
.purchaseBox .purchaseCont .config .bar .right.text {padding-right: 5px;} 
.purchaseBox .purchaseCont .config .bar select { width: 100%; padding: 8px 25px 8px 10px; }
.purchaseBox .purchaseCont .config .bar .half select, .estmBox .purchaseBox .purchaseCont .config .bar .full select { padding: 8px 25px 8px 10px; }  
.purchaseBox .purchaseCont .config .bar .detailView { padding: 5px 20px; background-color: #fff; border: 1px solid var(--line-color); border-radius: 5px; font-size: 12px;}
.purchaseBox .purchaseCont .config .bar .pre {position: absolute; top: 50%; left: 8px; transform: translateY(-50%); z-index: 1; font-size: 10px; color: var(--sub-font); font-weight: 400; letter-spacing: -.5px;}
.purchaseBox .purchaseCont .config .bar .unit {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--sub-font); font-size: 12px; font-weight: 400; }
.purchaseBox .purchaseCont .config .bar input[type="text"] {padding: 8px 25px 8px 10px; font-weight: 500; text-align: left; } 
.purchaseBox .purchaseCont .config .bar input[type="text"].price { text-align: right; }
.purchaseBox .purchaseCont .config .bar input[type="text"][class*='rate'] { text-align: center; padding: 8px 25px 8px 25px; } 
.purchaseBox .purchaseCont .config .bar select[name='monthH'] { text-align: center; }
.purchaseBox .purchaseCont .config .bar .arrivalHead { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border: 1px solid var(--line-color); border-radius: 7px; text-align: left; font-size: 14px;} 
.purchaseBox .purchaseCont .config .bar .arrivalHead::after {content: ''; width: 20px; height: 20px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center/contain;}
.purchaseBox .purchaseCont .config .bar.open .arrivalHead::after { transform: rotate(180deg);}
.purchaseBox .purchaseCont .config .bar.issueArrival .subList  {margin-top: 5px;}
.purchaseBox .purchaseCont .config.fincConf .btnRadio { display: grid; grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); gap: 10px;  /* flex-wrap: nowrap; */} 
.purchaseBox .purchaseCont .config.fincConf .btnRadio label {flex: 1;}
.purchaseBox .purchaseCont .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); }
.purchaseBox .purchaseCont .config .pmt .title { width: 100%; font-weight: 700; }
.purchaseBox .purchaseCont .config .pmt .desc {font-size: 12px; color: var(--sub-font);}
.purchaseBox .purchaseCont .config .pmt .hold { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; width: 50%; gap: 5px; }
.purchaseBox .purchaseCont .config .pmt .main { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; width: 50%; gap: 5px;}
.purchaseBox .purchaseCont .config .pmt .data { color: var(--primary-orange); font-weight: 700; font-size: 16px; }
.purchaseBox .purchaseCont .config .btn:not(.hide) { position: relative; padding: 10px; z-index: 1; border-radius: 10px; min-height: 55px;}
.purchaseBox .purchaseCont .contBox {width: 100%; height: 100%; display: flex; gap: 20px; min-height: 0; flex: 1;}
/* 직접 입력 예외처리 */
.purchaseBox .purchaseCont .config .bar .select:not(.self) input, .purchaseBox .purchaseCont .config .bar .select:not(.self) .unit, .purchaseBox .purchaseCont .config .bar .select:not(.self) button { display: none;}
.purchaseBox .purchaseCont .config .bar .select.self select {display: none;}
/* 2개 이상 예외처리 */
/* fincCell */
.purchaseCont:has(.contBox > .fincCell[tab="card"] ~ .fincCell[tab="card"]) .fincCell[tab="card"], 
.purchaseCont:has(.contBox > .fincCell[tab="halbu"] ~ .fincCell[tab="halbu"]) .fincCell[tab="halbu"],
.purchaseCont:has(.contBox > .fincCell[tab="rent"] ~ .fincCell[tab="rent"]) .fincCell[tab="rent"],
.purchaseCont:has(.contBox > .fincCell[tab="lease"] ~ .fincCell[tab="lease"]) .fincCell[tab="lease"] { position: relative; flex-direction: column; flex-wrap: nowrap; flex: 1; }
/* summary */
.purchaseCont:has(.contBox > .fincCell[tab="card"] ~ .fincCell[tab="card"]) .fincCell[tab="card"] .summary, 
.purchaseCont:has(.contBox > .fincCell[tab="halbu"] ~ .fincCell[tab="halbu"]) .fincCell[tab="halbu"] .summary,
.purchaseCont:has(.contBox > .fincCell[tab="rent"] ~ .fincCell[tab="rent"]) .fincCell[tab="rent"] .summary,
.purchaseCont:has(.contBox > .fincCell[tab="lease"] ~ .fincCell[tab="lease"]) .fincCell[tab="lease"] .summary { display: flex;}
/* confComp */
.purchaseCont:has(.contBox > .fincCell[tab="card"] ~ .fincCell[tab="card"]) .fincCell[tab="card"] .confComp,
.purchaseCont:has(.contBox > .fincCell[tab="halbu"] ~ .fincCell[tab="halbu"]) .fincCell[tab="halbu"] .confComp,
.purchaseCont:has(.contBox > .fincCell[tab="rent"] ~ .fincCell[tab="rent"]) .fincCell[tab="rent"] .confComp,
.purchaseCont:has(.contBox > .fincCell[tab="lease"] ~ .fincCell[tab="lease"]) .fincCell[tab="lease"] .confComp { flex-direction: column; flex-wrap: nowrap; width: 100%; overflow-y: auto;}
/* config */
.purchaseCont:has(.contBox > .fincCell[tab="card"] ~ .fincCell[tab="card"]) .fincCell[tab="card"] .confComp .config,
.purchaseCont:has(.contBox > .fincCell[tab="halbu"] ~ .fincCell[tab="halbu"]) .fincCell[tab="halbu"] .confComp .config,
.purchaseCont:has(.contBox > .fincCell[tab="rent"] ~ .fincCell[tab="rent"]) .fincCell[tab="rent"] .confComp .config,
.purchaseCont:has(.contBox > .fincCell[tab="lease"] ~ .fincCell[tab="lease"]) .fincCell[tab="lease"] .confComp .config {width: 100%; display: none;}
/* config.open */
.purchaseCont:has(.contBox > .fincCell[tab="card"] ~ .fincCell[tab="card"]) .fincCell[tab="card"] .confComp .config.open, 
.purchaseCont:has(.contBox > .fincCell[tab="halbu"] ~ .fincCell[tab="halbu"]) .fincCell[tab="halbu"] .confComp .config.open, 
.purchaseCont:has(.contBox > .fincCell[tab="rent"] ~ .fincCell[tab="rent"]) .fincCell[tab="rent"] .confComp .config.open,
.purchaseCont:has(.contBox > .fincCell[tab="lease"] ~ .fincCell[tab="lease"]) .fincCell[tab="lease"] .confComp .config.open {display: block; width: 100%; height: auto; overflow-y: unset; background-color: #fff; padding: 10px; z-index: 1; border: 1px solid var(--line-color); border-radius: 7px;/* border-top: 0; max-height: 161px; overflow-y: auto; box-shadow: 0 6px 10px -6px rgba(0, 0, 0, 0.25); */}
/* comp */
.purchaseCont:has(.contBox > .fincCell[tab="card"] ~ .fincCell[tab="card"]) .fincCell[tab="card"] .confComp .comp,
.purchaseCont:has(.contBox > .fincCell[tab="halbu"] ~ .fincCell[tab="halbu"]) .fincCell[tab="halbu"] .confComp .comp,
.purchaseCont:has(.contBox > .fincCell[tab="rent"] ~ .fincCell[tab="rent"]) .fincCell[tab="rent"] .confComp .comp,
.purchaseCont:has(.contBox > .fincCell[tab="lease"] ~ .fincCell[tab="lease"]) .fincCell[tab="lease"] .confComp .comp {width: 100%; overflow-y: unset;}
/* 3개 태블릿영역 예외처리 */
@media (min-width: 768px) and (max-width: 1600px) {
    .purchaseBox .purchaseCont .contBox {overflow-x: auto; overflow-y: clip;}
    .purchaseCont:has(.contBox > .fincCell[tab="card"] ~ .fincCell[tab="card"] ~ .fincCell[tab="card"]) .fincCell[tab="card"], 
    .purchaseCont:has(.contBox > .fincCell[tab="halbu"] ~ .fincCell[tab="halbu"]) .fincCell[tab="halbu"],
    .purchaseCont:has(.contBox > .fincCell[tab="rent"] ~ .fincCell[tab="rent"]) .fincCell[tab="rent"],
    .purchaseCont:has(.contBox > .fincCell[tab="lease"] ~ .fincCell[tab="lease"]) .fincCell[tab="lease"] {min-width: 450px;} 
    
}
 

/* 데이터 표시 */
.estmData { padding: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; border: 1px solid var(--line-color); border-radius: 7px;}
.estmData .title {width: 55px; text-align: left; color: var(--sub-font); font-weight: 400; font-size: 13px; margin-bottom: 0; }
.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 .extra5Check { text-align: left; width: calc(65% - 5px);}
.estmData .choice .data .desc { text-align: left; width: calc(65% - 5px); font-size: 13px;}
.estmData .choice .data .desc.wide {width: auto;}
.estmData .choice .data .desc button {font-size: 12px; color: #fff; background-color: var(--main-color); padding: 2px 6px; border-radius: 3px;}
.estmData .choice .data .desc .setTakeExtra { padding: 0; border-radius: 0; position: absolute; margin-left: 3px; width: 20px; height: 20px; background: url(../images/icons/icon_setting.svg) no-repeat center; background-size: 90%; text-indent: -9999px; font-size: 0;}
.estmData .choice .data .price { text-align: right; width: calc(35% - 5px); font-weight: 700; font-size: 14px;}
.estmData .choice .data .priceS { text-align: right; } 
.estmData .choice .data .estmGap { position: absolute; bottom: -14px; right: 0; }
.estmData.downPay {flex-direction: column; gap: 5px;}
.estmData.downPay .title {width: 100%; display: flex; align-items: center;}
.estmData.downPay .title .estmSelfBtn {padding: 3px 9px; font-size: 12px;}
.estmData.downPay .choiced {display: flex; justify-content: space-between; width: 100%;}

/* 금융리스트 (숨기기는 none 처리) */
.fincCell[tab="cash"] .confComp .config {width: 100%;}
.confComp { width: 100%; height: 100%; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; flex: 1; min-height: 0;}
.confComp .config {width: calc(40% - 10px); overflow-y: auto; height: 100%;}
.confComp .comp { width: calc(60% - 10px); position: relative; overflow-y: auto; height: 100%;}
.compList:has(.none) {height: 100%;}
.compList { width: 100%; display:flex; flex-wrap: wrap; gap: 20px; }
.compList li {position:relative; width: 100%; border:1px solid var(--line-color); border-radius: 7px; background:#fff;} 
.compList li.on {border-color: var(--main-color);}
.compList li > button {display:flex; align-items:flex-start; width:100%; height:100%; padding: 60px 20px 27px 100px; }
.compList li .rank {position:absolute; left: 18px; top:50%; transform:translateY(-50%); font-size: 24px; font-weight:700; line-height:1;}
.compList li .logo img { position: absolute; top: 50%; transform: translateY(-50%); left: 50px; width: 30px; height: 30px; object-fit: contain;}
.compList li .company {position: absolute; top: 31px; left: 99px; font-size: 18px; font-weight:700;} 
.compList li .name {width: 45%; text-align: left; font-size: 14px; word-break: keep-all;}
.compList li .gap { position: absolute; left: 55%; top: 13px; font-size: 11px; }
.compList li .gap.up {color: #FE4947;}
.compList li .gap.down {color: #3986E5;}
.compList li .price {position:absolute; left: 55%; top: 26px; font-size:22px; font-weight:700; }
.compList li .price .sub {font-size: 16px;}
.compList li .info { position:absolute; left: 55%; top: 61px; /* top: calc(50% + 6px); */ font-size:13px; color:var(--sub-font); text-align: left; word-break: keep-all;}
.compList li .fold { display:none; }
.compList li .help { position:absolute; right: 11px; top: 8px; 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 .exception { position:absolute; bottom: 7px; font-size: 12px; color: var(--sub-font); right: 15px; font-weight: 400;}
/* ficStep 예외처리 */
.compList.fincStep li > button {padding: 60px 20px 27px 20px;}
.compList.fincStep li .logo img {top: 26px; left: 15px; transform: unset;}
.compList.fincStep li .company {top: 26px; left: 55px;}
.compList.fincStep li .price { font-size: 20px;} 
/* 업종순 예외 */ 
.compList.fincComp li.orderS .logo img {left: 25px;} 
.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; }
/* failure, exception 부분 예외처리 */
.compList li.failure, .compList li.exception {background-color: var(--gray-bg-color);}
.compList li.failure > div, .compList li.exception > div, .compList li.exception > button {position:relative; display:flex; flex-direction: column; padding: 20px; }
.compList li.failure > button, .compList li.exception > button {padding: 25px; flex-direction: column;}
.compList li.failure .company, .compList li.exception .company {position: unset; font-weight: 600;}
.compList li.failure .logo, .compList li.exception .logo {display: flex; align-items: center; gap: 10px; margin-bottom: 5px;}
.compList li.failure .logo img, .compList li.exception .logo img { position: unset; transform: unset; left: 20px;} 
.compList li.failure .info, .compList li.exception .info {top: 56px;}
/* reference 부분 rank none처리 */
.compList li.reference .rank {display: none;}

.compList li.none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; font-weight: 700; font-size: 16px; color: var(--sub-font); padding: 20px; word-break: keep-all;}
.wrapper:not(.work) .compList li.none::before { content: ''; width: 40px; height: 40px; background: url(../images/icons/icon_blank.svg) no-repeat center / contain;}
.wrapper.work .compList li.none { align-items: stretch;}
.compList li.none .desc {text-align: left; font-size: 14px; font-weight: 400;}

/* 리스렌트 금융상품 팝업 */
.popup .content .productInfo .topBox {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;}
.popup .content .productInfo .link:not(.hide) {display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.popup .content .productInfo .link .capitalTip { font-size: 14px;} 
.popup .content .productInfo .link .capitalUrl {background-color: var(--main-color); text-align: center; padding: 3px 9px; color: #fff; border-radius: 5px; font-size: 13px;} 
.popup .content .tabCont .box {display: none;} 
.popup .content .tabCont .box.on {display: block;} 

/* 상담신청 페이지 */
.requestBox .filterBox .choice {padding-top: 0; flex-direction: row; flex-wrap: wrap; gap: 10px;}
.requestBox .filterBox .choice > li {gap: 10px; flex-wrap: nowrap;}
.requestBox .filterBox .calenderBox { display: flex; flex-direction: row; align-items: center; gap: 10px; color: var(--sub-font);}
.requestBox .filterBox .calenderBox input[type="date"] {width: 100%;} 
.requestBox .filterBox input, .requestBox .filterBox select {min-width: 150px;}
.requestBox .blockWork {margin: 15px 0;}
.requestBox .blockWork .stateChange {display: flex; align-items: center; gap: 10px;}
.requestBox .blockWork .stateChange .title {font-size: 13px;}
.requestBox .blockWork .stateChange select {background-color: #Fff; padding: 5px 24px 5px 10px; min-width: 50px;}
.requestBox .comCount {margin: 15px 0 15px 5px; font-weight: 700;}
.requestBox .comCount .cnt {color: var(--main-font);}
.requestBox .comCount .cnt::after {content: ' 건';}
.requestBox .index {display:flex; align-items:center; padding: 15px; font-weight:700; border: 1px solid var(--line-color); border-radius: 7px 7px 0 0;}
.requestBox .index .check {width: 5%; display: flex; align-items: center;  justify-content: center;}
.requestBox .index .num {width: 10%; text-align:center;}
.requestBox .index .brand {width: 10%; text-align:center;}
.requestBox .index .model {width: 20%; text-align:center;}
.requestBox .index .name {width: 10%; text-align:center;}
.requestBox .index .phone {width: 15%; text-align:center;}
.requestBox .index .date {width: 10%; text-align:center;}
.requestBox .index .state {width: 10%; text-align:center;}
.requestBox .index .detail {width: 10%; text-align:center;}
.requestBox .requestList { border: 1px solid var(--line-color); border-top: 0; border-bottom: 0;}
.requestBox .requestList li {display:flex; align-items:center; flex-wrap: wrap; padding: 20px 15px; border-bottom:1px solid var(--line-color); background-color: #fff; border-radius: 0 0 7px 7px; overflow: hidden; font-size: 14px;}
.requestBox .requestList li .check {width: 5%; display: flex; align-items: center;  justify-content: center;}
.requestBox .requestList li .num {width: 10%; text-align:center;}
.requestBox .requestList li .brand {width: 10%; text-align:center;}
.requestBox .requestList li .model {width: 20%; text-align:center;}
.requestBox .requestList li .name {width: 10%; text-align:center;}
.requestBox .requestList li .phone {width: 15%; text-align:center;}
.requestBox .requestList li .date {width: 10%; text-align:center;}
.requestBox .requestList li .state {width: 10%; display:flex;justify-content:center;}
.requestBox .requestList li .detail {width: 10%; display:flex; justify-content:center; }
.requestBox .requestList li .detail span {font-size: 13px; padding: 3px 10px; border: 1px solid var(--main-font); border-radius: 5px;}
.requestBox .requestList li .badge {padding: 3px 12px; border-radius: 30px; font-size: 14px; font-weight: 500;}
.requestBox .requestList li .badge.receipt {background-color:#EEF5FF; color:#3B82F6;}
.requestBox .requestList li .badge.consult {background-color:#EAF7EF; color:#1E8E4A;}
.requestBox .requestList li .badge.contract {background-color:#FDF5E5; color:#D89907;}
.requestBox .requestList li .badge.delivery {background-color:var(--gray-bg-color); color:var(--sub-font);}

/* 상담신청 상세보기 팝업 */
.popup .content .vehicleInfoBox {display: flex; flex-direction: column; gap: 20px;} 
.popup .content .vehicleInfoBox h3 {margin-bottom: 10px;}
.popup .content .vehicleInfoBox .statusBox select { width: 130px; padding: 10px 30px 10px 20px; }
.popup .content .vehicleInfoBox .statusBox select.consult {color: #3B82F6; border-color: #3B82F6; }
.popup .content .vehicleInfoBox .statusBox select.receipt {color: #D89907; border-color: #F59E0B;}
.popup .content .vehicleInfoBox .statusBox select.contract {color: #1E8E4A; border-color: #10B981;}
.popup .content .vehicleInfoBox .statusBox select.delivery {color: var(--sub-font); border-color: var(--sub-font);}
.popup .content .vehicleInfoBox .summaryBox {display:flex; gap: 10px; align-items: center; padding: 15px; border: 1px solid var(--line-color); border-radius: 7px;}
.popup .content .vehicleInfoBox .summaryBox .thumb {width: calc(40% - 5px);}
.popup .content .vehicleInfoBox .summaryBox dl {width: calc(60% - 5px)}
.popup .content .vehicleInfoBox dl {gap: 8px;}
.popup .content .vehicleInfoBox dl dt {width: 70px; color: var(--sub-font);}
.popup .content .vehicleInfoBox dl dd {width: calc(100% - 75px); font-size: 14px;}
.popup .content .vehicleInfoBox dl .data {padding-top: 8px;}
.popup .content .vehicleInfoBox dl .data + .data {border-top:1px dashed var(--line-color);}
.popup .content .vehicleInfoBox .customerBox {padding: 15px; border: 1px solid var(--line-color); border-radius: 7px;}
 

/* 영업소 설정 페이지 */
.officeSetBox {display:flex; flex-direction:column; gap:20px;}
.officeSetBox .setBox {background:#fff; border:1px solid var(--line-color); border-radius: 7px; padding: 20px;}
.officeSetBox .setBox > p {margin: 10px 0; color:var(--sub-font); letter-spacing: -.5px; }
.officeSetBox .themeColor {display:flex; gap:20px;}
.officeSetBox .themeColor .color {display:flex; flex-direction:column; align-items:center; gap:10px;}
.officeSetBox .themeColor .colorChip {position:relative; width: 140px; height: 80px; border:2px solid var(--line-color); border-radius: 7px; }
.officeSetBox .themeColor .name {font-size:14px;}
.officeSetBox .themeColor .color.on .colorChip::before {content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:20px; height:20px; background:#fff; -webkit-mask:url("../images/icons/radio_checked.svg") no-repeat center/contain; mask:url("../images/icons/radio_checked.svg") no-repeat center/contain;}
.officeSetBox .themeColor .black .colorChip {background:#02030A;}
.officeSetBox .themeColor .red .colorChip {background:#C50F13;}
.officeSetBox .themeColor .gray .colorChip {background:#999999;}
.officeSetBox .themeColor .blue .colorChip {background:#002B5C;}
.officeSetBox .themeColor .mustard .colorChip {background:#CFAB57;}
.officeSetBox .themeColor .purple .colorChip {background:#2D2A4A;}
.officeSetBox .feeList {display:flex; gap: 20px;}
.officeSetBox .feeList .box { position: relative; display:flex; flex-direction:column; gap: 5px; width:100%; padding: 30px 20px; border: 1px solid var(--line-color); border-radius: 7px; background:#fff; text-align:left; }
.officeSetBox .feeList .box:not(.info)::after { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); content: ''; width: 24px; height: 24px; background: url(../images/icons/arrow_right_alt.svg) no-repeat center/contain;}
.officeSetBox .feeList .title {display:flex; align-items:center; gap:8px; font-size:16px; font-weight:700; }
.officeSetBox .feeList .txt {font-size:14px; color:var(--sub-font);}
.officeSetBox .feeList .info dl {gap: 5px;} 
.officeSetBox .feeList .info dl .data {flex-wrap: nowrap;}
.officeSetBox .feeList .info dl .data dt {font-size:13px; color:var(--sub-font);}
.officeSetBox .feeList .info dl .data dd { font-weight:700; justify-content: flex-end; }
.officeSetBox .feeList .info dl .data dd .sub { position: relative; font-size: 13px; color: var(--sub-font); white-space: nowrap;}
.officeSetBox .feeList .info dl .data dd .sub::before { content: '( ';}
.officeSetBox .feeList .info dl .data dd .sub::after { content: ' )';}
.officeSetBox .feeList .info .title .sub {font-size:12px; color: #0B2C6E; background-color: #E5EDF5; padding: 3px 9px; border-radius: 30px;}
.officeSetBox .themePhoto {display:flex; gap:20px; align-items:stretch;}
.officeSetBox .themePhoto .scroll {flex:1; overflow-x:auto;} 
.officeSetBox .themePhoto .list {display:flex; gap: 20px; }
.officeSetBox .themePhoto .list li { position: relative; flex: 0 0 220px;}
.officeSetBox .themePhoto .list button {display:block; width:100%; border:1px solid var(--line-color); border-radius: 7px; overflow:hidden; background:#fff;}
.officeSetBox .themePhoto .list li.on button { border-color: var(--main-color);}
.officeSetBox .themePhoto .list li.on::before {content:""; position:absolute; top: 10px; right:10px; width:22px; height:22px; background: var(--main-color); -webkit-mask:url("../images/icons/radio_checked.svg") no-repeat center/contain; mask:url("../images/icons/radio_checked.svg") no-repeat center/contain;}
.officeSetBox .themePhoto .list .thumb {display: flex; justify-content: center; align-items: flex-start; overflow: hidden; background-color: var(--gray-bg-color); aspect-ratio: 16 / 9;}
.officeSetBox .themePhoto .list .thumb img {display:block; width:100%; height: 100%; object-fit: cover;}
.officeSetBox .themePhoto .list .name {display:block; padding: 15px; text-align:center; }
.officeSetBox .themePhoto .upload {flex:0 0 220px; display:flex; flex-direction:column; justify-content:center; align-items:center; border:2px dashed var(--line-color); border-radius:7px; }
.officeSetBox .themePhoto .upload input[type="file"] { position: relative; margin-bottom: 10px; clip: auto; width: 60px; height: 60px; background: url(../images/icons/icon_more.svg) no-repeat center; border-radius: 50%; background-size: 50%; text-indent: -9999px; font-size: 0; line-height: 0;}
.officeSetBox .themePhoto .upload .name {font-size:16px; font-weight:600; margin-bottom: 5px;}
.officeSetBox .themePhoto .upload .txt {font-size:13px; color:var(--sub-font); text-align:center;}

/* 사용자 관리 페이지 */
.userManage select {padding: 10px 35px 10px 20px; background-color: #fff; color: var(--sub-font);}
.userManage .listTop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;} 
.userManage .listTop b {margin-left: 5px;}
.userManage .listTop .userFilter {display: flex; align-items: center; gap: 20px; }
.userManage .listTop .userFilter .searchBox { position: relative; min-width: 250px; }
.userManage .listTop .userFilter .searchBox input { border-radius: 7px; padding: 10px 35px 10px 20px; background-color: #fff; }
.userManage .listTop .userFilter .searchBox .btnSearch { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 40px; height: 40px; background: url(../images/icons/icon_search.svg) no-repeat center; background-size: 50%; font-size: 0; overflow: hidden; text-indent: -9999px; }
.userManage .index {display:flex; align-items:center; padding: 15px; font-weight:700; border:1px solid var(--line-color); border-radius:7px 7px 0 0; background-color:#fff;}
.userManage .index span {text-align: center;}
.userManage .index .name {width:20%;}
.userManage .index .phone {width:20%;}
.userManage .index .date {width:20%;}
.userManage .index .state {width:10%;}
.userManage .index .manage {width:30%;}
.userManage ul {border:1px solid var(--line-color); border-top: 0; border-bottom: 0;}
.userManage ul li {display:flex; align-items:center; padding: 18px 15px; border-bottom:1px solid var(--line-color); background-color:#fff; font-size:14px;}
.userManage ul li span { text-align: center;}
.userManage ul li:last-child {border-radius: 0 0 7px 7px;}
.userManage ul li .name {width:20%;}
.userManage ul li .phone {width:20%;}
.userManage ul li .date {width:20%;}
.userManage ul li .state {width:10%; display:flex; justify-content:center;}
.userManage ul li .manage {width:30%; display:flex; justify-content:center; gap:10px;}
.userManage ul li .badge {padding: 5px 15px; border-radius: 30px; font-size: 13px; font-weight: 500;}
.userManage ul li .badge.on {background-color:#EAF7EF; color:#1E8E4A;}
.userManage ul li .manage .btn { padding: 5px 15px; font-size:13px; border-radius: 7px;}
.userManage ul li .manage .userPwReset {border:1px solid var(--line-color); background:#fff;}
.userManage ul li .manage .userWithdraw {border:1px solid #FFB9B9; color:#F44336; background:#fff;} 
.userManage .listBottom { position: relative; display: flex; align-items: center; margin: 20px 0; } 
.userManage .listBottom select {position: absolute; right: 0; width: fit-content;}
.userManage .userNotice { display: flex; flex-direction: column; gap: 10px; padding: 20px; border:1px solid var(--line-color); border-radius: 7px; background-color:var(--gray-50); font-size:14px; color:var(--sub-font); margin-bottom: 0;}
.userManage .userNotice::before {content:'안내 사항'; font-weight:700; color: var(--main-font); font-size: 15px; }

/* 로그인 페이지 */
.wrapper[path="home_login"] .container main > .inner {padding: 0;}
.loginBox { width: 100%; height: 100vh;display: flex; flex-direction: column; justify-content: center; position: relative; }
.loginBox .loginBg {position: absolute; inset: 0; background: url(../images/loginBg_V.jpg) no-repeat 0 0/cover;}
.loginBox .loginWrap { position:absolute; top:0; right: 0; width: 100%; max-width: 35vw; height: 100%;}
.loginBox .loginWrap::before { content:''; position:absolute; inset:0; backdrop-filter: blur(10px); background: rgba(255,255,255,.2); clip-path:polygon( 130px 0, 100% 0, 100% 100%, 0 100% ); /* clip-path:polygon( 150px 0, 100% 0, 100% 100%, 150px 100%, 0 50% ); */}
.loginBox .loginWrap .box { position: absolute; top: 50%; left: 130px; right: 60px; transform: translateY(-50%); width: auto; max-width: 400px; margin: 0 auto;}
.loginBox .loginWrap .box .loginHead {width: 100%; display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;}
.loginBox .loginWrap .box .loginHead h2 { font-size: 34px; color: var(--main-font); word-break: keep-all; text-align: center; }
.loginBox .loginWrap .box .loginHead p { margin: 0 0 20px 0; word-break: keep-all; line-height: 1.6; text-align: center;}
.loginBox .loginWrap .box .loginType { border-radius: 7px; background: rgba(255,255,255,.5); backdrop-filter: blur(10px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 25px; margin-bottom: 25px; box-shadow: 0 8px 30px rgba(0,0,0,0.04);}
.loginBox .loginWrap .box .loginType input[type="radio"] + span::before {background-color: #aaa;}
.loginBox .loginWrap .box .loginType input[type="radio"]:checked + span::before {background-color: var(--main-color);}
.loginBox .loginWrap .box .loginType label {flex: 1; display: flex; justify-content: center;}
.loginBox .loginWrap .box .loginForm .login {display: flex; flex-direction: column; gap: 15px;}
.loginBox .loginWrap .box .loginForm .txt {position: relative;}
.loginBox .loginWrap .box .loginForm .txt input {background-color: rgba(255,255,255,.5); backdrop-filter: blur(30px); padding: 18px; font-size: 16px; border: 0; box-shadow: 0 10px 30px rgba(0,0,0,0.04);}
.loginBox .loginWrap .box .loginForm .txt.pw .btnHide {content: ''; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); width: 30px; height: 30px; background-color: #aaa; mask: url(../images/icons/visibility_off.svg) no-repeat center; mask-size: 70%; font-size: 0; text-indent: -9999px;}
.loginBox .loginWrap .box .loginForm .txt.pw .btnHide.show {content: ''; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); width: 30px; height: 30px; mask: url(../images/icons/visibility.svg) no-repeat center; font-size: 0; text-indent: -9999px;}
.loginBox .loginWrap .box .loginForm .buttonBox button { width: 100%; margin-top: 10px; padding: 19px; font-size: 18px; box-shadow: 0 18px 30px rgba(0,0,0,0.22);}
.loginBox .info {margin-top: 50px; text-align: center;}

/* 기본 세로 */
@media (orientation: portrait) {
    .loginBox .loginBg {background: url(../images/loginBg_H.jpg) no-repeat 0 0/cover;}
    .loginBox .loginWrap {max-width: 60vw;}
    .deskBox .brandList li {width: calc(16.6% - 16.6px );}
    .modelList li {width: calc(25% - 15px);}
    .popup .content .modelList li {width: calc(33.3% - 13.3px);}
    .colorList li {width: 100%;}
    .optionList li {width: calc(50% - 10px);} 
    .optionList li button {height: 100%;}
    .popup .content .optionList li {width: 100%;} 
    .modelSelBox {height: auto;}
    .modelSelBox > .box {width: 100%; height: auto; flex-direction: row; flex-wrap: wrap;}
    .modelSelBox > .box .filterBox,
    .modelSelBox > .box .selVehicle,
    .modelSelBox .scroll {width: 100%;}
    .modelSelBox .selVehicle .selVehicleList ul.more li {flex: 0 0 55%;}
    .modelSelBox .colorBox, .modelSelBox .imageBox, .estimateBox .summaryBox, .estimateBox .conditionBox {width: 100%;}
    .modelSelBox .colorBox .box {width: calc(50% - 10px);}
    .estimateBox {height: auto;}
    .estimateBox .conditionBox {overflow-x: auto; flex-wrap: nowrap;}
    .estimateBox .conditionBox .cont:not(.hide) {min-width: 330px;}
    .confComp .config {width: 100%;}
    .confComp .comp {width: 100%;}
    .purchaseBox {width: 100%;}
}

/* 태블릿 가로 */
@media (orientation: landscape) and (min-width: 768px) and (max-width: 1399px) {
    .loginBox .loginWrap {max-width: 45vw;}
    .deskBox .brandList li {width: calc(16.6% - 16.6px );} 
    .modelList li {width: calc(16.6% - 16.66px);}
    .colorList li {width: 100%;}
    .modelSelBox .imageBox .image {height: 150px;}
    .modelSelBox .selVehicle .selVehicleList ul.more li {flex: 0 0 70%;}
    .modelSelBox .selVehicle .selVehicleList ul li button .title .model { font-size: 15px; margin-bottom: 0;} 
    .estimateBox .summaryBox {width: calc(25% - 10px);}
    .estimateBox .summaryBox .vehicleInfo .info .model {font-size: 18px;}
    .estimateBox .summaryBox .totalBox .title {font-size: 14px;} 
    .estimateBox .summaryBox .totalBox .totalPrice .price {font-size: 15px;} 
    .estimateBox .summaryBox dl .data .btnChange {padding: 13px 10px;}
    .estimateBox .summaryBox dl .data dt { width: 60px; font-size: 13px;}
    .estimateBox .summaryBox dl .data dd:not(.hide) {font-size: 13px;}
    .estimateBox .conditionBox {overflow-x: auto; flex-wrap: nowrap;}
    .estimateBox .conditionBox .cont:not(.hide) {min-width: 330px;}
    .purchaseBox {width: calc(75% - 10px);}
    .compList li .rank {font-size: 18px;}
    .compList li .logo img {max-width: 25px;}
    .compList li .company {font-size: 16px;}
    .compList li .name {font-size: 13px;}
    .compList li .price {font-size: 20px;}
    .purchaseBox .purchaseCont .fincCell .summary .fincSumy {font-size: 14px;} 
} 
@media (min-width: 1400px) and (max-width: 1600px) {
    .colorList li {width: 100%;}
    .popup .content .colorList li {width: calc(50% - 10px);} 
    .estimateBox .summaryBox .totalBox .totalPrice .price {font-size: 20px;}
}

/* 모바일 */  
@media screen and (max-width: 600px) {
    .filterBox .filterList li {flex-direction: column; gap: 5px;}
    .filterBox .filterList .list {width: 100%;}
    .optionList li, .colorList li, .modelSelBox .colorBox .box {width: 100%;}
    .colorList.colorIntCont .image * {width: 100%;}
}

@media screen and (max-width: 400px) {
    .modelSelBox .colorBox .box {width: 100%;} 
}

/* 팝업 */
.popup { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 101;} 
.popup .dimBg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--dim-color); z-index: 102; }
.popup .frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 7px; z-index: 103; }
.popup .frame > .head { position: relative; text-align: center; padding: 15px 50px 15px 15px; min-height: 50px; display: flex; align-items: center;}
.popup .frame > .head h3 { display: flex; align-items: flex-start; font-size: 18px; text-align: left; width: 100%;}
.popup .frame > .head .back {width: 30px; height: 30px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center bottom; background-size: 80%; transform: rotate(90deg); font-size: 0; text-indent: -9999px;}
.popup .frame > .head .close { position: absolute; top: 6px; right: 5px; background: url(../images/icons/close.svg) no-repeat center; background-size: 40%; width: 44px; height: 44px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.popup .frame > .head .share:not(.hide) {display: flex; position: relative; align-items: center; gap: 3px; margin-left: auto; white-space: nowrap;}
.popup .frame > .head .share::before {content: ''; width: 24px; height: 24px; background: url(../images/icons/upload.svg) no-repeat center/contain;}
.popup .frame > .buttonBox {gap: 15px; padding: 15px;}
.popup .frame > .buttonBox[btnlen="0"] {padding: 0;}
.popup .frame > .buttonBox button, .popup .frame > .buttonBox a {padding: 10px;}
.popup .frame > .buttonBox .check {background-color: var(--main-color); color: #fff; border-color: var(--main-color);}
.popup .frame > .buttonBox .cancel {background-color: #fff; color: var(--main-color); border-color: var(--main-color);}
.popup .frame > .buttonBox .line {border-color: var(--main-color); color: var(--main-color);}
.popup .frame .close { width: 48px; height: 48px; background-size: 40%; position: absolute; top: 3px; right: 1px; z-index: 1;}
.popup .content { position: relative; padding: 0 15px 15px 15px; word-break: keep-all; color: var(--main-font);}
.popup .content h3 {font-size: 16px;} 
.popup .content #modeChangeForm {display: flex; flex-direction: column; gap: 15px; padding: 20px; border: 1px solid var(--line-color); border-radius: 7px;}
.popup .content #modeChangeForm .modeRadios {display: flex; gap: 20px; justify-content: center;}
.popup .content #modeChangeForm .modeRadios label + label {margin-left: 10px;}
/* 팝업- 알림창 */
.popup .content .noticeBox {margin: 10px 0; background-color: var(--gray-bg-color);} 
.popup.noticePopup {z-index: 102;} 
.popup.noticePopup .frame > .buttonBox {padding: 0 15px 15px 15px;}
.popup.noticePopup .content {padding: 15px; text-align: center;}

/* 팝업 tab */
.popup .content .tablist, .popupSlide .tablist { position: sticky; left: 0; top: -1px; z-index: 2; background-color: var(--bg-white); margin-bottom: 15px; } 
.popup .content .tablist.bookmark {justify-content: flex-start; gap: 0;}
.popup .content .tablist.bookmark button {flex: unset; font-size: 14px; padding: 5px 10px;}            
.popup .content .tabCont { display: flex; flex-direction: column; gap: 30px; width: 100%; }  
/* 팝업 탭 내부 tabCont */
.popup .tabCont h3 { margin: 10px 0;}
.popup .tabCont .title {position: relative; font-weight: 700; margin-bottom: 10px; word-break: keep-all;} 
.popup .tabCont .cont {display: flex; flex-direction: column; align-items: center; flex-wrap: nowrap; gap: 10px;}
.popup .tabCont .cont .msg {text-align: left; padding: 10px; background-color: var(--blue-50); border: 1px solid var(--gray-50); border-radius: 10px; font-weight: 500;}
.popup .tabCont .cont .file {width: 100%;}
.popup .tabCont .cont .file a { position: relative; display: block; word-break: keep-all; background-color: var(--primary-navy); color: var(--white); padding: 10px 35px 10px 10px; border-radius: 10px;}
.popup .tabCont .cont .file a::after { position: absolute; content: ''; top: 50%; right: 10px; transform: translateY(-50%); width: 24px; height: 24px; background: url(../images/icons/download.svg) no-repeat center/contain; }

/* 팝업 리스트 공통 스타일 */
.popup .content .listBox { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;}
.popup .content .listBox li {width: 100%; text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line-color);}
.popup .content .listBox li:last-child {border-bottom: 0; padding-bottom: 0;}
.popup .content .listBox li > a {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.popup .content .listBox li a .subj {width: 100%; padding-right: 20px;}
.popup .content .listBox li a .info {width: 100%;}
.popup .content .listBox li a .desc {width: 100%; color: var(--sub-font); font-size: 13px;}
.popup .content .listBox li a .finc {width: 50%; color:  var(--main-color); font-size: 12px;}
.popup .content .listBox li a .date { color: var(--sub-font); font-size: 12px; font-weight: 400;}
.popup .content .listBox li a .other {color: var(--sub-font); font-size: 13px;}
.popup .content .listBox li a div:not(.date) {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

/* 금융상품 팝업 */
.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-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%; border: 1px solid var(--gray-300);}
.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 .spec { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 15px; } 
.popup .content .spec > div {flex: 1;} 
.popup .content .spec .name {text-align: center; padding: 6px; font-weight: 700; border-radius: 7px; background-color: var(--gray-bg-color);}
.popup .content .spec dl {display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; padding: 0; gap: 0; color: var(--gray-500);}
.popup .content .spec dl dt { font-size: 13px; text-align: center; border-bottom: 1px solid var(--line-color); width: 50%; padding: 6px; word-break: keep-all; letter-spacing: -.5px;}
.popup .content .spec dl dd { font-size: 13px; width: 50%; padding: 6px; text-align: center; border-bottom: 1px solid var(--line-color);}
.popup .content .spec .left dl:nth-of-type(1) {margin-bottom: 15px;}
.popup .content .spec dl dt .icons { display: inline-block; vertical-align: middle;}
.popup .content .spec dl dt .icons .help {width: 30px; height: 24px; background: url(../images/icons/icon_help.svg) no-repeat 3px 3px; background-size: 50%; vertical-align: middle; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; display: inline-block;}
.popup .content .spec dl dt .icons .photo {width: 30px; height: 24px; background: url(../images/icons/icon_image_gray.svg) no-repeat 3px 3px; background-size: 52%; vertical-align: middle; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; display: inline-block;}
.popup .content .spec dl dt .icons .all {width: 48px; height: 24px; background: url(../images/icons/icon_infoImage.svg) no-repeat 3px 3px; background-size: 65%; vertical-align: middle; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; display: inline-block;}
.popup .content .infoBox .descBox .desc {color: var(--sub-font); font-size: 13px; }

/* 팝업 inputBox */
.popup .content .inputBox:not(.hide) { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; width: 100%;}
.popup .content .inputBox input {flex: 1; padding: 8px 25px 8px 8px;}
.popup .content .inputBox .buttonBox {width: auto;}
.popup .content .inputBox .buttonBox button {border-radius: 5px; padding: 3px 9px; font-size: 14px;} 
.popup .content .inputBox b {position: absolute; right: 10px; color: var(--gray-500); top: 50%; transform: translateY(-50%); font-size: 12px;} 

/* 팝업 - dl 2열 */ 
.popup .content dl.row {margin-bottom: 15px;}
.popup .content dl.row .data {width: 100%;}
.popup .content dl.row .data dt {width: 100%; padding: 5px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;}
.popup .content dl.row .data dd {width: 100%;} 
.popup .content .popupForm .list li span.title { color: var(--main-font); font-weight: 400;}

/* 팝업 모델페이지 - optionList, result */
.popup .content .resultNum { position: sticky; width: 100%; bottom: -16px; right: 0; background-color: #fff; padding: 10px; text-align: right; z-index: 1; display: flex; align-items: baseline; justify-content: flex-end; flex-direction: row; flex-wrap: wrap; gap: 0 10px;} 
.popup .content .resultNum .tax {font-size: 13px; color: var(--gray-500);}
.popup .content .resultNum .tax .taxDC {color: var(--gray-500); font-weight: 700;}
.popup .content .resultNum .result { font-size: 18px; font-weight: 700; }
.popup .content .resultNum .result .num {color: var(--primary-orange);}
.popup .content .optionList {gap: 15px;}
.popup .content .optionList li.dis {border-radius: 0;}
.popup .content .optionList li:last-child {border-bottom: 0;}
.popup .content .optionList li.blank {width: 100%; font-weight: 700; position: relative; padding-top: 55px; text-align: center; font-size: 16px;}
.popup .content .optionList li.blank::before {position: absolute; content: ''; top: 20px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; background: url(../images/icons/icon_blank.svg) no-repeat center/contain; }
.popup .content .optionList input[type="checkbox"] + span, input[type="checkbox"] + div {padding: 0;} 
.wrapper.work .popup .content .optionList li button {border-color: transparent;}
.wrapper.work .popup .content .optionList li.on button {border-color: transparent;}

@media screen and (min-width:600px){ 
    .popup .content dl.row .data {width: calc(50% - 10px);} 
}


/* 비교하기 팝업 */ 
.popup .content .contCompBox .tablist {margin-bottom: 0;}
.contCompBox .left { width: 120px; font-weight: 500; word-break:keep-all;}
.contCompBox td {padding: 10px; vertical-align:top; }
.contCompBox table { table-layout:fixed;}
.contCompBox .compTop {position: sticky; top: 0; background-color: #fff; z-index: 1;}
.contCompBox .head .info {display:flex; flex-wrap: wrap;}
.contCompBox .head .left {vertical-align: middle;}
.contCompBox .head .lineup, .contCompBox .head .trim { font-size:13px; color:var(--sub-font); text-align: left;}
.contCompBox .head .car {max-width: 150px;}
.contCompBox .head .car img {width: 100%; height: auto;}
.contCompBox .head .title {display: flex; align-items: center; width: calc(100% - 150px);}
.contCompBox .head .title .logo img {max-width: 30px; display: block;}
.contCompBox .head .title .model {text-align: left; font-weight: 700; font-size: 15px;} 
.contCompBox .head td {border: 1px solid var(--line-color);}
.contCompBox .compCont td { border:1px solid var(--line-color); border-top: 0; }
.contCompBox .compCont button, .contCompBox .compCont span { text-align: left; font-size: 14px; font-weight: 400;}
.contCompBox .compCont button + button, .contCompBox .compCont button + span, .contCompBox .compCont span + button { margin-top: 5px;}
.contCompBox .compCont em { color: #2563eb; }
.contCompBox .compCont .unit {font-size: 10px; color: var(--sub-font); margin-left: 5px;}
.contCompBox .compCont .colorList li {width: 100%;}
.contCompBox .compCont .colorList li button .name {margin-top: 5px; font-size: 13px;}
.contCompBox .compCont .optionList li button .image {max-width: 140px;} 
.contCompBox .compCont .optionList li button .data .name {font-size: 13px; margin-top: 5px; margin-bottom: 3px;}
.contCompBox .compCont .optionList li button .data .price {font-size: 13px; color: var(--sub-font); }
.contCompBox .compCont li[tab="item"] button, .contCompBox .compCont li[tab="item"] span {display: block; text-decoration: underline solid #d1d1d1; color: var(--sub-font); text-underline-offset: 2px; }
.contCompBox .compCont li[tab="item"] .differ {color: var(--main-font);}
.contCompBox .compCont li[tab="spec"] .title {background-color: var(--gray-bg-color);}
.contCompBox .compCont li[tab="spec"] table {table-layout: auto;}

.contCompBox .foot {position: sticky; bottom: 0; box-shadow: 0 15px 0px 0 #fff; background-color: #fff; border-top: 1px solid var(--line-color); z-index: 10;}
.contCompBox .foot td { position: relative; border: 1px solid var(--line-color); border-top: 0;}
.contCompBox .foot .openEstimateMode {position: absolute; top: 7px; right: 5px; padding: 3px 10px; background-color: var(--main-color); border: 1px solid var(--main-color); color: #fff; border-radius: 5px;}
.contCompBox .foot .num {display: block; width: 100%; text-align: left; font-size: 15px; font-weight: 700;}
.contCompBox .foot .taxcost {text-align: left; color: var(--sub-font);}

/* 가격표 공유 팝업 */
.popup .content .priceShareBox dl dt { width: 100%; padding: 10px; border-radius: 7px; border: 1px solid var(--line-color); gap: 10px; justify-content: flex-start;}
.popup .content .priceShareBox dl.row {margin-bottom: 0;}
.popup .content .priceShareBox dl .data {gap: 10px;}
.popup .content .priceShareBox dl .data dd {width: 100%;}
.popup .content .priceShareBox dl .data dd .list {padding: 0 10px;}
.popup .content .priceShareBox dl .data .btnHide { background: url(../images/icons/visibility.svg) no-repeat center; background-size: 70%; width: 30px; height: 30px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.popup .content .priceShareBox dl .data.dis .btnHide {background: url(../images/icons/visibility_off.svg) no-repeat center; background-size: 70%;}
.popup .content .priceShareBox .document .btnSendBox {display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0;}
.popup .content .priceShareBox .document .btnSendBox button, .popup .content .priceShareBox .document .btnSendBox a { flex: 1; border: 1px solid var(--gray-300); background-color: var(--gray-100); padding: 4px 8px; border-radius: 7px; color: var(--primary-navy); text-align: center; font-size: 12px;}
.popup .content .priceShareBox .document .noticeBox {margin-bottom: 0;}

/* 외/내장 팝업 */ 
.estmTable td.on { color: var(--main-color); }
.popup .content .imageBox .inbox img { text-align: center;}
.popup .content .imageBox .inbox span {width: 100%; display: block; font-size: 12px; color: var(--sub-font); 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 .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(--sub-font); }
.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(--sub-font); 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(--sub-font);} 
.popup .content .specBox dl .data dd button:hover {color: var(--main-font); text-decoration-color: var(--sub-font);}
.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(--sub-font);}
.popup .content .infoBox .descTitle { position: relative; display: block; margin-bottom: 5px; width: 100%; font-weight: 700; color: var(--main-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/info.svg) no-repeat center/contain; } 

@media screen and (min-width: 1000px) {
    .popup .content .specBox dl .data {gap: 10px;}
    .popup .content .specBox dl .data dt {width: 80px;}
    .popup .content .specBox dl .data dd {width: calc(100% - 90px);}
}

/* 팝업 직접입력 (사용안함) */
.popup .content .directInputPopup {display:flex; flex-direction:column; gap: 20px;}
.popup .content .directInputPopup em {color: var(--sub-font); font-size: 13px;}
.popup .content .directInputPopup > .desc { color: var(--sub-font); }
.popup .content .directInputPopup .input {position: relative; width: 100%;}
.popup .content .directInputPopup .inputBox {flex-wrap: wrap;}
.popup .content .directInputPopup .inputBox .title { width: 100%; font-size:14px; font-weight:600; }
.popup .content .directInputPopup .input input {width:100%; height:56px; padding:0 50px 0 15px; border:1px solid var(--main-font); border-radius:8px; font-size:18px; font-weight:700; text-align:right;}
.popup .content .directInputPopup .input .unit {position:absolute; top:50%; right:16px; transform:translateY(-50%); font-size:16px; font-weight:600;}
.popup .content .directInputPopup .downSel {display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
.popup .content .directInputPopup .downSel button { width: 100%; height:48px; border:1px solid var(--line-color); border-radius:8px; background:#fff; font-size:14px; font-weight:600; transition:.2s;}
.popup .content .directInputPopup .downSel .reset {background:var(--gray-bg-color); border-color: var(--gray-bg-color);}
.popup .content .directInputPopup .notice { padding:15px; background:var(--gray-bg-color); border-radius: 8px;}
.popup .content .directInputPopup .notice p {position:relative; padding-left:25px; font-size:13px; margin: 0; color: var(--sub-font);}
.popup .content .directInputPopup .notice p::before {content:''; position:absolute; left:0; top:0; width:18px; height:18px; background:url(../images/icons/info_full.svg) no-repeat center/contain; }
.popup .content .directInputPopup .notice p + p {margin-top: 10px;}

/* 팝업 계약금 변경 */
.popup .content .downPayPopup {display:flex; flex-direction:column; gap: 30px;}
.popup .content .downPayPopup em {color: var(--sub-font); font-size: 13px;}
.popup .content .downPayPopup dl {gap: 30px;}
.popup .content .downPayPopup dl .data dt {font-weight: 600;} 
.popup .content .downPayPopup .default {color: var(--sub-font); font-size: 13px;}
.popup .content .downPayPopup .downSel { width: 100%; display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
.popup .content .downPayPopup .downSel li button { min-height: 40px; }
.popup .content .downPayPopup .estmSelf {margin-top: 0; gap: 30px;}
.popup .content .downPayPopup .estmSelf > div {gap: 5px; flex-direction: column; align-items: flex-start;}
.popup .content .downPayPopup .estmSelf > div .name {font-weight: 600;}
.popup .content .downPayPopup select { height: 40px;}
.popup .content .downPayPopup .input {position: relative; width: 100%;} 
.popup .content .downPayPopup .input input {width:100%; height: 40px; padding: 0 50px 0 15px; }
.popup .content .downPayPopup .input .unit {position:absolute; top:50%; right:16px; transform:translateY(-50%); color: var(--sub-font); font-size: 14px; } 


/* 팝업 모드변경 로그아웃 추가 */
.popup .frame > .buttonBox .modeLogout {flex: 0 0 100%; position: relative; border-color: transparent; color: var(--sub-font); display: flex; align-items: center; justify-content: center; gap: 5px;}
.popup .frame > .buttonBox .modeLogout::before {content: ''; width: 18px; height: 18px; background: url(../images/icons/logout.svg) no-repeat center/contain;}

/* 팝업 할부계산기 */
.popup .content .calculatorBox{ width:100%; }
.popup .content .calculatorBox .calCell {position:relative;width:100%;background:#fff;border-radius:20px; gap: 0;}
.popup .content .calculatorBox .calCell .btnCalDel{display:none;}
.popup .content .calculatorBox .calCell .controlBox{width:100%;}
.popup .content .calculatorBox .calCell .controlBox .box {width:100%; display: flex; flex-direction: column; border: none; padding: 0;} 
.popup .content .calculatorBox .calCell .controlBox .box .btnCheck { position: unset; width: 100%; margin-bottom: 10px; }
.popup .content .calculatorBox .calCell .controlBox .box .btnCheck label {flex: 1;}
.popup .content .calculatorBox .calCell .controlBox .box .set:not(.hide) { width: 100%; display: flex; flex-wrap: wrap; align-items: center;}
.popup .content .calculatorBox .calCell .controlBox .box .set .title{width: 70px; text-align: left;}
.popup .content .calculatorBox .calCell .controlBox .box .set .inputBox:not(.hide) {width: calc(100% - 70px); position: relative;}  
.popup .content .calculatorBox .calCell .controlBox .box .set .inputBox .unit{position:absolute; right:10px; top: 50%; transform: translateY(-50%); color:var(--sub-font); font-size: 12px; font-weight: 400;}
.popup .content .calculatorBox .calCell .controlBox .resultBox{ align-items: center; margin-top: 20px; padding: 20px; background:var(--main-color); border-radius:10px; color:#fff; gap: 0;}
.popup .content .calculatorBox .calCell .controlBox .resultBox .result {background-color: transparent; border: none; border-radius: 0; padding: 0; display: block;}
.popup .content .calculatorBox .calCell .controlBox .resultBox .result .titleBox {display:flex; justify-content: center; align-items:center;}
.popup .content .calculatorBox .calCell .controlBox .resultBox .result .titleBox .title {font-weight: 400; width: auto; color: #fff;}
.popup .content .calculatorBox .calCell .controlBox .resultBox .result .titleBox .gap {flex:1;}
.popup .content .calculatorBox .calCell .controlBox .resultBox .result .sumBox { width: auto; display:flex; align-items:center;justify-content:center;}
.popup .content .calculatorBox .calCell .controlBox .resultBox .result .sumBox .row:not(.hide) {display: flex; align-items: center; width: 100%; justify-content: center; gap: 5px;}
.popup .content .calculatorBox .calCell .controlBox .resultBox .result .sumBox .row .ttl {position:relative; padding-right:18px; margin-right: 18px; font-size:20px; font-weight:600; width: 80px;}
.popup .content .calculatorBox .calCell .controlBox .resultBox .result .sumBox .row .ttl::after{ content: ''; position:absolute; top:50%; right:0; width:1px; height: 80%; background: rgba(255,255,255,.15);transform:translateY(-50%);}
.popup .content .calculatorBox .calCell .controlBox .resultBox .result .sumBox .sum {font-size:40px; color:#fff;} 
.popup .content .calculatorBox .calCell .controlBox .resultBox .result .sumBox .unit{font-size:18px;font-weight:600; color:#fff;}
.popup .content .calculatorBox .calCell .controlBox .resultBox .result:not(.pmt, .hide) {display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-top: 10px; border-top:1px solid rgba(255,255,255,.15); width: 100%; padding: 10px;}
.popup .content .calculatorBox .calCell .controlBox .resultBox .result:not(.pmt) .sumBox .sum{font-size:16px; font-weight: 400;}
.popup .content .calculatorBox .calCell .controlBox .resultBox .result:not(.pmt) .sumBox .unit{font-size: 16px; font-weight: 400;}
.popup .content .calculatorBox .calCell .controlBox .slideBox {width: 100%; margin-top: 20px;}
.popup .content .calculatorBox .calCell .controlBox .slideBox .notice {display: flex; align-items: center; justify-content: space-between; color: var(--sub-font); font-size: 13px; margin-top: 20px;}
.popup .content .calculatorBox .calCell .controlBox .slide { position: relative; width: 100%; margin: 0 auto;}
.popup .content .calculatorBox .calCell .controlBox .noUi-target { background-color: var(--line-color); border: 0; border-radius: 10px; box-shadow: none;}
.popup .content .calculatorBox .calCell .controlBox .noUi-horizontal {height: 10px; position: relative; padding: 0 17px;}
.popup .content .calculatorBox .calCell .controlBox .noUi-horizontal .noUi-handle {width: 20px; height: 20px; top: -7px; border-radius: 50%; border: none; box-shadow: none; cursor: pointer; background-color: transparent;}
.popup .content .calculatorBox .calCell .controlBox .noUi-horizontal .noUi-tooltip {-webkit-transform: none; position: absolute; left: 0; bottom: -10px;}
.popup .content .calculatorBox .calCell .controlBox .noUi-horizontal .noUi-handle[data-handle="0"] {right: -5px;}
.popup .content .calculatorBox .calCell .controlBox .noUi-horizontal .noUi-handle[data-handle="0"] .noUi-tooltip {left: -10px; right: -5px;}  
.popup .content .calculatorBox .calCell .controlBox .noUi-connect {background-color: var(--gray-bg-color);} 
.popup .content .calculatorBox .calCell .controlBox .noUi-connects {cursor: pointer;}
.popup .content .calculatorBox .calCell .controlBox .noUi-tooltip { min-width: 46px; border-radius: 30px; font-weight: 500; font-size: 13px; color:#fff; border: 1px solid var(--main-color); background-color: var(--main-color); text-align: center;}
.popup .content .calculatorBox .calCell .controlBox .noUi-touch-area {background-color: transparent; box-shadow: none;}
.popup .content .calculatorBox .calCell .controlBox .noUi-handle:after, .calculatorBox .calCell .controlBox .noUi-handle:before {content: none;}
.popup .content .calculatorBox .calCell .controlBox .slide.on .noUi-tooltip {color: #fff; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 6px; background-color: var(--main-color); border-color: var(--main-color);}
.popup .content .calculatorBox .calCell .controlBox .slide.on .noUi-connect {background-color: var(--main-color);}
.popup .content .calculatorBox .calCell .noticeBox {margin-top: 20px; padding: 0; border-color: transparent; font-size:12px; color:var(--sub-font);}
.popup .content .calculatorBox .directBtn button { width: 100%; padding: 10px; border: 1px solid var(--main-color); border-radius: 7px; margin-top: 20px;}

/* 팝업 - 상담신청 */
.popup .content .requestBox .agree {display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px;}
.popup .content .requestBox .agree > div {width: 100%;}
.popup .content .requestBox .agree > div .check {margin-bottom: 5px; font-size: 14px;}
.popup .content .requestBox .agree > div .check .necessary {color: var(--main-color);}
.popup .content .requestBox .agree .privacy ul {padding: 10px; border-radius: 5px; border: 1px solid var(--line-color);}
.popup .content .requestBox .agree .privacy ul li {font-size: 13px; color: var(--sub-font);}

/* 팝업 - 로그인 테마 사진 등록 */
.themePhotoPopup p {margin:0 0 15px; font-size: 14px; color: var(--sub-font);}
.themePhotoPopup .inputBox {margin-bottom: 15px;}
.themePhotoPopup .necessary {font-weight: 700; color: var(--main-color);}
.themePhotoPopup .photoCols {display: flex; gap: 15px;}
.themePhotoPopup .photoCols .photoCol {flex:1; padding: 15px; border:1px solid var(--line-color); border-radius: 7px;}
.themePhotoPopup .photoCols .photoCol .colHead {display: flex; flex-direction: column; gap: 5px; margin-bottom: 20px;}
.themePhotoPopup .photoCols .photoCol .colHead strong {font-size: 18px;}
.themePhotoPopup .photoCols .photoCol .colHead .title { color:var(--sub-font); font-size: 14px;}
.themePhotoPopup .photoCols .photoCol .colHead .size { width: fit-content; padding:3px 9px; border-radius: 5px; background-color:#e8f1fb; font-size:12px; font-weight:600; color:#2b6cb0;}
.themePhotoPopup .photoCols .dropZone {position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; border: 2px dashed var(--line-color); padding: 20px; border-radius: 7px; cursor:pointer;}
.themePhotoPopup .photoCols .dropZone::before {content:''; width: 60px; height: 60px; margin-bottom: 10px; background: url(../images/icons/addPhoto.svg) no-repeat center/contain;}
.themePhotoPopup .photoCols .dropZone .title {margin-bottom: 5px; font-weight: 600;}
.themePhotoPopup .photoCols .dropZone .desc {font-size:13px;color:var(--sub-font); text-align: center;}
.themePhotoPopup .photoCols .previewBox {margin-top:24px;}
.themePhotoPopup .photoCols .previewBox .title {margin-bottom: 15px; font-weight: 700; display: block;}
.themePhotoPopup .photoCols .previewBox .imgBox {display: flex; justify-content: center; align-items: center; border:1px solid var(--line-color); border-radius: 7px; background: var(--gray-bg-color); overflow:hidden;}
.themePhotoPopup .photoCols .previewBox.H .imgBox {aspect-ratio: 16/9;}
.themePhotoPopup .photoCols .previewBox.V .imgBox {width:140px; aspect-ratio:9/16; margin:0 auto;}
.themePhotoPopup .photoCols .previewImg {max-height: 100%;}
.themePhotoPopup .photoCols .previewEmpty {font-size: 12px; color: var(--sub-font);}


/* 슬라이드 팝업 */
.popupSlide {position: fixed; inset: 0; z-index: 100; visibility: hidden; transition: opacity .4s, visibility .4s;}
.popupSlide.active {visibility: visible;}
.popupSlide .dimBg {position: absolute; inset: 0; background-color: rgba(0,0,0,.6); opacity: 0; visibility: hidden; transition: .4s ease-out; z-index: 1;}
.popupSlide.active .dimBg {opacity: 1; visibility: visible;}
.popupSlide .frame {display: flex; flex-direction: column; pointer-events: auto; position: absolute; top: 0; right: 0; width:60%; height: 100vh; background-color: #fff; transform: translateX(100%); z-index: 2; transition: transform .4s ease-out; box-shadow: rgba(0,0,0,.24) 0 3px 20px;}
.popupSlide.active .frame {transform: translateX(0);}
.popupSlide .frame > .head {position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 20px; gap: 10px;}
.popupSlide .frame > .head .close { position: absolute; top: 10px; right: 10px; background: url(../images/icons/close.svg) no-repeat center; background-size: 50%; width: 44px; height: 44px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.popupSlide .frame > .head .back {width: 30px; height: 30px; background: url(../images/icons/icon_arrowdown_navy.svg) no-repeat center 10px; background-size: 80%; transform: rotate(90deg); font-size: 0; text-indent: -9999px;}
.popupSlide .frame > .head h3:not(.hide) {display: flex; align-items: center; flex-wrap: wrap; gap: 5px;}
.popupSlide .frame > .head h3 span {font-size: 12px; color: var(--primary-orange); font-weight: 500;}
.popupSlide .frame > .head .updown {position: absolute; right: 10px; display: none; width: 30px; height: 30px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center; transform: rotate(180deg); background-size: 90%; font-size: 0; text-indent: -9999px;}
.popupSlide .frame > .head .updown.open {transform: none;}
.popupSlide .frame > .head #changeBrand {border: 1px solid var(--line-color); border-radius: 5px; font-size: 13px; padding: 5px 10px;}
.popupSlide .frame .panelContent {display: flex; flex-direction: column; justify-content: flex-start; flex: 1; overflow-y: auto; max-height: none; padding: 0 20px 20px 20px;}
.popupSlide .frame .closeBtn {position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 15%; height: 5px; border-radius: 3px; background-color: var(--line-color); font-size: 0; text-indent: -9999px; display: none;}

/* 슬라이드팝업 - 모델선택 */
.popupSlide .modelBox .modelList {max-height: fit-content;}
.popupSlide .modelList li {width: calc(16.6% - 16.66px);}
.popupSlide .modelList li.state3::after { top: unset; left: unset; bottom: 0; right: 0; font-size: 12px; }
/* 슬라이드팝업 - 찜 목록 */
.popupSlide .wishList .blockWork {padding-left: 20px;}
.popupSlide .wishList ul {display: flex; flex-wrap: wrap; gap: 20px;}
.popupSlide .wishList ul li { position: relative; width: 100%; padding: 20px; border: 1px solid var(--line-color); border-radius: 10px; }
.popupSlide .wishList ul li .selBox { position: absolute; top: 30px; display: flex; align-items: center; justify-content: space-between; }
.popupSlide .wishList ul li .box {display: flex; flex-wrap: wrap; align-items: center; gap: 10px;}
.popupSlide .wishList ul li .box .image {width: calc(35% - 5px); height: 150px; display: flex; justify-content: center;}
.popupSlide .wishList ul li .info { display: flex; flex-direction: column; width: calc(65% - 5px); gap: 10px;}
.popupSlide .wishList ul li .title { font-size: 18px; font-weight: 700;}
.popupSlide .wishList ul li .option {display: flex; flex-wrap: wrap; gap: 5px 10px;}
.popupSlide .wishList ul li .option span { font-size: 12px; color: var(--sub-font); padding: 2px 6px; border: 1px solid var(--line-color); border-radius: 3px; background: #F8FAFC; border: 1px solid var(--line-color); }
.popupSlide .wishList ul li .specs { display: flex; flex-direction: column;gap: 4px; font-size: 13px; color: var(--sub-font);}
.popupSlide .wishList ul li .specs .lineup {font-weight: 500;}
.popupSlide .wishList ul li .specs .trim::before { content: '트림 -'; margin-right: 6px; color: var(--sub-font);}
.popupSlide .wishList ul li .specs .colorInt::before {content: '내장 -'; margin-right: 6px; color: var(--sub-font);}
.popupSlide .wishList ul li .specs .colorExt::before {content: '외장 -'; margin-right: 6px; color: var(--sub-font);}
.popupSlide .wishList ul li .price { font-size:18px; font-weight:500; margin-top: auto;}
.popupSlide .wishList ul li .price span { font-size: 24px; font-weight:700; margin-right: 5px;}
.popupSlide .wishList ul li .buttonBox { width: auto; position: absolute; bottom: 18px; right: 25px; justify-content: flex-end;}
.popupSlide .wishList ul li .buttonBox button, .popupSlide .wishList ul li .buttonBox a {padding: 6px 20px; border-color: var(--line-color); color: var(--main-font);}

/* 슬라이드 팝업 - 차량 찜목록 */ 
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent.open .likeList ul {max-height: unset;}
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList .all {  position: absolute; top: 20px; right: 20px; font-size: 12px; font-weight: 700; color: var(--gray-500); border: 1px solid var(--gray-300); border-radius: 5px; padding: 4px 8px;}
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 10px; max-height: 300px;}
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul li { position: relative; width: 100%; padding: 10px; background-color: var(--gray-50); border-radius: 10px; display: flex; flex-direction: row; flex-wrap: wrap;}
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul li.hide {display: none;}
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul li .selBox { width: 100%; height: 20px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between;}
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul li .title { margin-left: -10px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis;}
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul li .title .logo {display: flex;}
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul li .title .logo img {max-width: 35px;}
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul li .box { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px;} 
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul li .box img {max-width: 40%;}
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul li .box .info { width: calc(100% - 10px); display: flex; flex-direction: column; flex-wrap: nowrap; color: var(--main-font);}
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul li .box .info .lineup {color: var(--gray-500); font-size: 13px; word-break: keep-all;}
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul li .box .info .trim {color: var(--gray-500); font-size: 13px;} 
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul li .box .info .price {text-align: right; font-weight: 700;}   
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul li.nodata { width: 100%; flex-direction: column; padding: 20px 0; background-color: transparent; min-height: auto;}
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul li.nodata img {width: 50px;} 
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul li.state3::after { content: "재고 한정"; position: absolute; top: 10px; right: 10px; background-color: rgba(0,0,0,0.05); padding: 3px 9px; border-radius: 30px; font-size: 10px; color: var(--gray-500);}
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul li.state4::after { content: "단종"; position: absolute; top: 10px; right: 10px; background-color: var(--primary-navy); padding: 3px 9px; border-radius: 30px; font-size: 10px; color: var(--white);}
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList .desc {color: var(--gray-500); text-align: center;}
.wrapper[path="model_vehicle"] .popupSlide .frame .panelContent:has(.nodata) .panelContent {justify-content: center;}
.wrapper[path="model_vehicle"] .popupSlide .frame > .buttonBox { background-color: var(--bg-white); padding: 10px 20px; gap: 20px;}
.wrapper[path="model_vehicle"] .popupSlide .frame > .buttonBox .del {flex: unset;}

@media screen and (min-width:600px){
    .wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul li {width: calc(50% - 5px);}
} 
@media screen and (min-width: 800px) { 
    .wrapper[path="model_vehicle"] .popupSlide .frame {top: auto; left: 50%; right: auto; bottom: 0; width: 100%; height: auto; max-height: 90vh; transform: translate(-50%, 100%); border-radius: 20px 20px 0 0;}
    .wrapper[path="model_vehicle"] .popupSlide.active .frame {transform: translate(-50%, 0);}
    .wrapper[path="model_vehicle"] .popupSlide .frame .head .updown {display: block;}
    .wrapper[path="model_vehicle"] .popupSlide .frame > .buttonBox {justify-content: flex-end; padding: 20px;}
    .wrapper[path="model_vehicle"] .popupSlide .frame > .buttonBox a, .popupSlide .frame > .buttonBox button {flex: auto; max-width: 180px;}
    .wrapper[path="model_vehicle"] .popupSlide .frame > .buttonBox .del {margin-right: auto;}
    .wrapper[path="model_vehicle"] .popupSlide .frame .panelContent {max-height: 80vh;}
    .wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul { max-height: none; overflow: hidden;}
    .wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul { max-height: 100%; }
    .wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList .all {right: 50px;}

}
@media screen and (min-width: 1000px) {
    .wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList .all {right: 50px;}
    .wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul li {width: calc(25% - 7.5px);}
    .wrapper[path="model_vehicle"] .popupSlide .frame .panelContent .likeList ul li .box {flex-direction: column; height: 100%;}  
    .wrapper[path="model_vehicle"] .popupSlide .frame .head .updown {display: block;}
}
/* 팝업 세로 모드 */
@media (orientation: portrait) {
    .popupSlide .frame {top: auto; left: 50%; right: auto; bottom: 0; width: 100%; height: auto; max-height: 90vh; transform: translate(-50%, 100%); border-radius: 20px 20px 0 0;}
    .popupSlide .frame .closeBtn {display: block;}
    .popupSlide .frame > .head .close {display: none;}
    .popupSlide .frame .panelContent {max-height: 65vh;}
    .popupSlide.active .frame {transform: translate(-50%, 0);}
    .popupSlide.content .frame {transform: translate(-50%, calc(100% - 60px));}
    .popupSlide .modelList li {width: calc(33.3% - 13.33px);}
    /* .popupSlide .wishList ul li .box .image, .popupSlide .wishList ul li .info {width: 100%;} */
}
/* 태블릿 예외처리 */
@media (orientation: landscape) and (max-width: 1399px) {
    .popupSlide .modelList li {width: calc(25% - 15px);} 
    .popupSlide .brandList li {width: calc(16.6% - 16.66px);}
}

/* 푸터 */
.footer {border-top: 1px solid var(--line-color);}
.footer .inner {text-align: center; display: flex; flex-direction: column; font-size: 13px; color: var(--sub-font);}

/* === 기존 카판 === */
.wrapper:not([path="desk_work"], [path="desk_setting"]).work .inner {max-width: 1400px; margin: 0 auto;}
/* 카판 버튼 */
.buttonBox button.navy, .buttonBox a.navy {background-color: var(--primary-navy); border-color: var(--primary-navy); color: var(--white);}
.buttonBox button.navyLine, .buttonBox a.navyLine {background-color: transparent; border-color: var(--navy-font); color: var(--navy-font);}
.buttonBox button.orangeLine, .buttonBox a.orangeLine {background-color: transparent; border-color: var(--primary-orange); color: var(--primary-orange);}
.buttonBox button.gray, .buttonBox a.gray {background-color: var(--gray-100); border-color: var(--gray-100); color: var(--gray-500);}
.buttonBox button.dis, .buttonBox a.dis {background-color: var(--gray-100); border-color: var(--gray-100); color: var(--gray-500); pointer-events: none; opacity: .5;}
.buttonBox button.more span {position: relative; padding-right: 24px;}
.buttonBox button.more span::after {position: absolute; content: ''; top: 50%; right: 0; transform: translateY(-50%); width: 20px; height: 20px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center / contain;}
.buttonBox button.more.down span::after {transform: translateY(-50%) rotate(180deg);}

/* 공지사항 notice */
.noticeBox { width: 100%; border-radius: 0 10px 10px 0; background-color: #fff; padding: 15px; font-weight: 500; color: var(--gray-500); word-break: keep-all; gap: 3px; border-left: 4px solid transparent; color: var(--main-font);}
.noticeBox > * {display: block;}
.noticeBox.alert {border-color: var(--primary-orange);}
.noticeBox.comment {border-color: var(--navy-font);}
.noticeBox.notice {border-color: var(--gray-400);}
/* 캐피탈 로고 */  
.btnCapital {display: flex; flex-wrap: wrap; gap: 10px;}
.btnCapital img {width: 30px; padding: 2px; border-radius: 50%;}
.btnCapital button, .btnCapital a { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; word-break: keep-all; gap: 5px; font-size: 13px; font-weight: 400; background-color: var(--bg-white); padding: 3px 9px; border: 1px solid var(--gray-300); border-radius: 10px;}
.btnCapital button.on, .btnCapital a.on {border-color: var(--primary-orange); color: var(--primary-orange); background-color: var(--orange-100);}
.btnCapital.btnCheck label input[type="checkbox"] + span { border-radius: 10px; justify-content: center;}
/* 캐피탈 로고 - row 버전 */
.btnCapital.row button {flex-direction: row; border-radius: 10px;}
/* 데이터 없을 때 */ 
.nodata:not(.hide) { background-color: transparent; border: none; width: 100%; min-height: 25vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; font-weight: 700; font-size: 16px; color: var(--gray-500); word-break: keep-all;} 
.nodata::before { content: ''; width: 40px; height: 40px; background: url(../images/icons/icon_blank.svg) no-repeat center / contain;}
.nodata:hover {background-color: transparent;}
/* 파일 커스텀 */
.filebox {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px; width: 100%;}
.filebox .upload-name {color: var(--gray-300);}
.filebox input.uploadName {flex: 1;}
.filebox label { padding: 6px 10px; font-size: 12px; color: var(--white); background-color: var(--primary-navy); border-radius: 5px; cursor: pointer; display: flex; align-items: center;}
.filebox > div {flex: 1; background-color: var(--bg-color); border-radius: 7px; color: var(--main-font); padding: 6px; font-size: 15px;}
/* 즉시출고 버튼 */
.buttonBox.fastshipLink { justify-content: flex-end; width: auto; }
.buttonBox.fastshipLink button, .buttonBox.fastshipLink a {flex: unset; padding: 2px 6px; font-size: 12px; border-radius: 5px;}
/* 테이블 */
table { font-size: 13px; width: 100%; border-collapse: collapse; text-align: center; transition: all 0.3s ease; border-spacing: 0;}
.tableBox { overflow-x: auto;}
.tableBox table tr th { color: var(--main-font); background-color: var(--gray-50); border: 1px solid var(--gray-300); font-weight: 600; padding: 5px; word-break: keep-all; }
.tableBox table tr td { background-color: var(--bg-white); padding: 5px; border: 1px solid var(--gray-300); word-break: keep-all; color: var(--main-font); transition: background-color 0.2s ease; color: var(--gray-500);}
.tableBox table tr td a {text-decoration: underline; color: var(--primary-orange);}
.tableBox table tr td b {color: var(--main-font);}
.tableBox table tr td .necessary { color: var(--primary-orange); font-weight: 700; }
.tableBox table tr td .buttonBox { display: flex; justify-content: center; align-items: center; padding-top: 5px; }
.tableBox table tr td .buttonBox a { max-width: fit-content; text-decoration: none; padding: 4px 12px; border-radius: 5px; font-size: 13px; }
.tableBox table .title { color: var(--main-font); font-weight: 700; background-color: var(--gray-50); }
.tableBox table input { background-color: var(--gray-50); border: 1px solid var(--gray-300); padding: 8px; width: 100%; border-radius: 5px; font-size: 14px; color: #4a5568; }
.tableBox table tr td .btnDel { width: 25px; height: 25px; background: url(../images/icons/icon_close_dark.svg) no-repeat center; background-size: 50%; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; cursor: pointer; transition: background 0.3s ease; } 

/* 로케이션바 */ 
.locationBox { position: relative; margin-bottom: 15px;}
.locationBox a {position: relative; color: var(--gray-500);}
.locationBox a:not(:nth-last-of-type(1)) {padding-right: 18px;}
.locationBox .scrollH { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; white-space: nowrap; overflow-y: hidden;}
.locationBox .scrollH div.selBox:not(:nth-last-of-type(1))::after {content: ''; padding-left: 18px; width: 18px; height: 18px; transform: rotate(-90deg); background: url(/images/icons/icon_arrowdown.svg) no-repeat center/contain;}
.locationBox .scrollH .selBox {  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; border: 1px solid var(--gray-300); border-radius: 7px;}
.locationBox .scrollH .selBox:not(:last-child) {margin-right: 15px;}
.locationBox .selBox > button::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 8px; width: 18px; height: 18px; background: url(/images/icons/icon_arrowdown.svg) no-repeat center/contain;}
.locationBox .selBox.open > button::after {transform: translateY(-50%) rotate(180deg)}
.locationBox .scrollH .selBox > button { display: flex ; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; border-radius: 7px; gap: 5px; position: relative; background-color: var(--bg-white); padding: 4px 30px 4px 20px; width: 100%; text-align: center; min-width: 100%; }
.locationBox .scrollH .selBox .list {max-width: 100%; max-height: 200px; overflow-y: auto; overflow-x: hidden; position: absolute; top: 35px; border: 1px solid var(--gray-300); border-radius: 7px; z-index: 5;}
.locationBox .scrollH .selBox .list::-webkit-scrollbar { display:none; } 
.locationBox .scrollH .selBox .list ul li {position: relative; height: 35px;}
.locationBox .scrollH .selBox .list ul li button, .locationBox .scrollH .selBox .list ul li a { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; color: var(--gray-500); width: 100%; height: 100%; padding: 10px; font-size: 13px; background-color: var(--bg-white); }
.locationBox .scrollH .selBox .list ul li.on button, .locationBox .scrollH .selBox .list ul li.on a { background-color: var(--orange-100); color: var(--primary-orange); font-weight: 700;}

/* 필터박스 - 선택 결과 */
.filterBox { border-radius: 10px; padding: 15px; width: 100%; background-color: #fff; border: 1px solid var(--line-color);}
.filterBox .reset { width: 30px; height: 30px; background: url(../images/icons/reload.svg) no-repeat center; background-size: 65%; border-radius: 5px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.filterBox .openFilter { width: 30px; height: 30px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center; transform: rotate(180deg); background-size: 22px 22px; background-color: var(--gray-bg-color); border-radius: 5px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.filterBox .openFilter.up {transform: rotate(0deg);}
.filterBox .choiced { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding-bottom: 10px; border-bottom: 1px solid var(--gray-300); gap: 5px; color: var(--main-font);}
.filterBox .choiced .filterBtn {display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; align-items: stretch;}
.filterBox .choiced .title { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 15px; font-weight: 700; }
.filterBox .choiced .list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 5px; }
.filterBox .choiced .list .choicedList span { display: block; position: relative; border: 1px solid var(--line-color); border-radius: 30px; padding: 5px 25px 5px 10px; font-size: 12px; letter-spacing: -.5px; }
.filterBox .choiced .list .choicedList span::after { position: absolute; content: ''; top: 50%; right: 7px; transform: translateY(-50%); width: 13px; height: 13px; background: url(../images/icons/close.svg) no-repeat center/contain; }
/* 필터박스 - 선택 */ 
.filterBox .choice { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px; padding-top: 15px;}
.filterBox .choice > li { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 5px;} 
.filterBox .choice > li[kind="brand"] button.close {position: absolute; top: 0; right: 0;}
.filterBox .choice > li > .title {width: 70px; font-weight: 700;  font-size: 13px;}
.filterBox .choice > li .list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 10px; width: 100%;}
.filterBox .choice > li .list li:not(.hide) {position: relative; display: flex; border-radius: 30px;}
.filterBox .choice > li .list li button {border: 1px solid var(--line-color); border-radius: 30px; padding: 5px 10px; word-break: keep-all; font-size: 13px; }
.filterBox .choice > li .list li.on button {color: var(--primary-orange); border-color: var(--primary-orange); background-color: var(--orange-100);}
.filterBox .choice > li .list li.none button, .filterBox .choice > li .list li.none a { opacity: .4; pointer-events: none;}
.filterBox .choice > li.addlocal.main.hide {display: none;}
.filterBox .choice > li .list li.capital button { background-color: #Fff; padding: 3px;}
/* 필터박스 - 브랜드, 색상 예외처리 */
.filterBox .choice > li .list.brandList {padding: 0;}
.filterBox .choice > li .list.brandList li button { border: 1px solid transparent; padding: 5px 0; border-radius: 5px; gap: 3px; }
.filterBox .choice > li .list.brandList li.on button { border: 1px solid var(--primary-orange); }
.filterBox .choice > li .list.brandList li.on button .name {color: var(--primary-orange); }
.filterBox .choice > li .list.colorList li {width: auto;}
.filterBox .choice > li .list.colorList li button {border: none; font-size: 0; padding: 0; background: none;}
.filterBox .choice > li .list.colorList li.on button .colorChip .colorMain {border: 2px solid var(--primary-orange);}
.filterBox .choice > li .list.colorList li.on button .colorChip .colorSub {border: 2px solid var(--primary-orange); border-bottom: none;}
.filterBox .brandList li {width: calc(8.33% - 9.16px);}
/* 필터박스 - 금융사로고 예외처리 */
.filterBox .choice > li .list.btnCapital li button { width: 100%; border: 1px solid transparent; border-radius: 5px; gap: 3px; padding: 5px; }
.filterBox .choice > li .list.btnCapital li.on button { border: 1px solid var(--primary-orange); background-color: var(--orange-100);}
.filterBox .choice > li .list.btnCapital li {width: calc(25% - 7.5px);}
/* 필터박스 - 가격, 연비 예외처리 */
.filterBox li[kind="efficiency"] { gap: 20px; }
.filterBox li[kind="price"] { gap: 20px;}
.filterBox .slide {width: 100%; margin: 0 auto;}
.filterBox .noUi-target {background-color: var(--gray-bg-color); border: 0; border-radius: 10px; box-shadow: none;}
.filterBox .noUi-horizontal {height: 10px;}
.filterBox .noUi-horizontal .noUi-handle {width: 20px; height: 20px; top: -7px; border-radius: 50%; border: none; box-shadow: none; cursor: pointer; background-color: transparent;}
.filterBox .noUi-horizontal .noUi-tooltip {-webkit-transform: none; left: 0; bottom: -5px;}
.filterBox .noUi-horizontal .noUi-handle[data-handle="1"] {right: -5px;}
.filterBox .noUi-horizontal .noUi-handle[data-handle="1"] .noUi-tooltip {left: unset; right: 0;} 
.filterBox .noUi-connect {background-color: var(--gray-bg-color);} 
.filterBox .noUi-connects {cursor: pointer;}
.filterBox .noUi-tooltip { min-width: 46px; padding: 5px 10px; border-radius: 30px; font-weight: 500; font-size: 13px; color: var(--sub-font); border: 1px solid var(--line-color); background-color: #fff;}
.filterBox .noUi-touch-area {background-color: transparent; box-shadow: none;}
.filterBox .noUi-handle:after, .filterBox .noUi-handle:before {content: none;}
.filterBox .slide.on .noUi-tooltip {color: var(--main-color); box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 6px; background-color: var(--orange-100); border-color: var(--main-color);}
.filterBox .slide.on .noUi-connect {background-color: var(--main-color);}
/* 필터박스 - 검색창 */
.filterBox .searchBox {position: relative;}
.filterBox .searchBox input {max-width: 150px;} 
.filterBox .searchBox .btnSearch {position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 30px; height: 30px; background: url(../images/icons/icon_search.svg) no-repeat center; background-size: 70%; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.filterBox select, .filterBox input {max-width: 150px;}

/* orderList */
.orderList { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 20px; margin: 15px 0;}
.orderList button {color: var(--sub-font); white-space: nowrap; font-weight: 500; border-bottom: 1px solid transparent;}
.orderList button.on {color: var(--main-color); font-weight: 700; font-weight: 700; border-color: var(--main-color);}
.orderList .box { display: flex; gap: 10px; align-items: center;}
.orderList .box .searchCnt { position: relative; color: var(--main-color); font-weight: 700;}
.orderList .box .searchCnt::before { content: "총 ";}
.orderList .box .searchCnt::after { content: " 대";}
.orderList .searchBox { position: relative;}
.orderList .searchBox input {padding: 8px 30px 8px 10px; max-width: 150px; border-radius: 30px; background-color: #fff;}
.orderList .box:last-child {align-self: flex-end;}
.orderList .searchBox .btnSearch { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 30px; height: 30px; background: url(../images/icons/icon_search.svg) no-repeat center; background-size: 70%; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}

@media screen and (min-width:600px){  
    dl.borderType .data {width: calc(50% - 10px);}
    dl .data.row {width: calc(50% - 10px);}
    dl .data.colRow dd {flex-direction: row;} 
    .tablist button {font-size: 15px;}
    .filterBox .choice > li .list.btnCapital li {width: calc(12.5% - 8.75px);}
}
@media screen and (min-width:1000px){
    .floatingMenu { bottom: 15px;}
    .wrapper.work .floatingMenu, .wrapper[path="estimate_leaserent"] .floatingMenu {bottom: 90px;} 
    .wrapper.work:not(.mobile) .floatingMenu,.wrapper[path="estimate_leaserent"]:not(.mobile) .floatingMenu {bottom: 100px;}
    .tablist {justify-content: center;}
    .tablist.bookmark {justify-content: flex-start;}
    .tablist.bookmark button {flex: none;}
    .filterBox .choiced {flex-direction: row; align-items: center; padding-right: 75px; min-height: 45px;}
    .filterBox .choice > li .list.btnCapital li { width: calc(8.33% - 9.16px);}
    .filterBox .choiced .title {width: 70px; min-height: 30px;}
    .filterBox .choiced .list {width: calc(100% - 75px)}  
    .filterBox .choice > li .list {width: calc(100% - 75px);}
    .filterBox .choice > li > .title {margin-top: 5px;}
    .filterBox .noUi-horizontal .noUi-tooltip {left: 0;}
    .filterBox .noUi-horizontal .noUi-handle[data-handle="1"] .noUi-tooltip {right: 0;}
    .filterBox li[kind="efficiency"] {gap: 5px; align-items: center; margin-top: 8px;}
    .filterBox li[kind="efficiency"] .title {margin-top: 0;}
    .filterBox li[kind="price"] {gap: 5px; align-items: center; margin-top: 8px;}
    .filterBox .slide {width: calc(100% - 75px)}
    .filterBox .choiced .openFilter {position: absolute; top: 0; right: 0;}
    .filterBox .choiced .reset {position: absolute; top: 0; right: 40px;} 
}

/* mainTop */
.mainTop { position: relative; padding: 20px 0;}
.mainTop::after { content: ''; display: block; clear: both; height: 0; visibility: hidden; }
.mainTop .left:not(.hide) { float: left; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-height: 35px; }
.mainTop .left h2 {font-size: 16px;}
.mainTop .left h2 em { font-size: 13px; margin-left: 3px; } 
.mainTop .right:not(.hide) { float: right; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; min-height: 35px; gap: 10px; }
.mainTop .right button:not(.menuBtn, .standard) { position: relative; color: var(--sub-font); padding: 5px 10px; border-radius: 7px; border: 1px solid var(--line-color); font-size: 13px; background-color: var(--white); }
.mainTop button:not(.hide), .mainTop a:not(.hide) { position: relative; display: block; color: var(--sub-font);}
.mainTop .list .count { display: flex; justify-content: center; align-items: center; position: absolute; right: -7px; top: -5px; font-size: 9px; line-height: 1.1; background-color: var(--primary-orange); width: 16px; height: 16px; color: var(--white); border-radius: 30px;}
/* .mainTop button::before, .mainTop a::before { position: absolute; content: ''; top: 50%; left: 3px; transform: translateY(-50%); width: 18px; height: 18px; } */

/* 모델 상세 */
.modelBox .modelDetail { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 15px; background-color: var(--bg-white); border-radius: 10px; padding: 15px; border: 1px solid var(--gray-300); margin-bottom: 15px;}
.modelBox .modelDetail .fastshipLink { position: absolute; top: 15px; right: 15px;}
.modelBox .modelDetail .left {display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; width: 100%; gap: 10px;}
.modelBox .modelDetail .left .title { width: 100%; font-size: 18px; font-weight: 700; color: var(--navy-font); word-break: keep-all; display: flex; flex-direction: column;}
.modelBox .modelDetail .left .title .logo {display: flex; flex-wrap: nowrap; align-items: center; margin-left: -7px; font-size: 14px;}
.modelBox .modelDetail .left .title .logo img {max-width: 45px;}
.modelBox .modelDetail .left .title em {font-size: 14px; color: var(--gray-500); font-weight: 400;}
.modelBox .modelDetail .left .image {position: relative; display: flex; justify-content: center; max-width: 400px; margin: 0 auto;}
.modelBox .modelDetail .left .image img {width: 100%;}
.modelBox .modelDetail .left .image .colorName { position: absolute; left: 0; bottom: -5px; width: 100%; text-align: center; color: var(--main-font);} 
.modelBox .modelDetail .right {width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 10px;} 
.modelBox .modelDetail .right h3.title em {font-size: 12px; color: var(--navy-font);}
.modelBox .modelDetail .discountsList { width: 100%;}
.modelBox .modelDetail .discountsList .list.maxH {max-height: 150px;}
.modelBox .modelDetail .discountsList .list li .value > li:last-child {padding-bottom: 5px;}
.modelBox .modelDetail .discountsList .seeMore button { width: 100%; background-color: var(--gray-100); border-color: var(--gray-100);}
.modelBox .modelDetail .discountsList .seeMore button:hover {background-color: var(--gray-200);}
.modelBox .modelDetail .discountsList .nodata { width: 100%; height: 100%; background-color: var(--bg-white); border: none;}
.modelBox .infoBox {display: flex; flex-direction: column;}
.modelBox .infoBox h3 { position: relative; margin: 30px 0 10px;}  
.modelBox .infoBox h3 span {font-size: 13px; color: var(--gray-400); font-weight: 500; margin-right: 5px;}
.modelBox .infoBox h3 em {font-size: 13px; color: var(--gray-400); font-weight: 500;}
.modelBox .infoBox h3 a, .modelBox .infoBox h3 button {display: inline-block; padding: 3px 9px; background-color: var(--primary-navy); color: var(--white); border-radius: 5px; font-size: 12px;} 
.modelBox .infoBox .gradeList .list {display: flex; flex-direction: row ; flex-wrap: wrap; gap: 15px;}
.modelBox .infoBox .gradeList .list li { position: relative; width: calc(50% - 7.5px); background-color: var(--bg-white); border-radius: 10px; border: 1px solid var(--gray-300);}
.modelBox .infoBox .gradeList .list li .item {width: 100%; text-align: left; z-index: 1; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
.modelBox .infoBox .gradeList .list li.disabled { background-color: var(--bg-color); border: 1px solid var(--gray-200); opacity: .4; pointer-events: none; box-shadow: none;}
.modelBox .infoBox .gradeList .list li .like { z-index: 2; position: absolute; top: 3px; right: 3px; background: url(../images/icons/icon_like.svg) no-repeat center; background-size: 50%; width: 40px; height: 40px; text-indent: -9999px; line-height: 0; font-size: 0;}
.modelBox .infoBox .gradeList .list li .like.on {background: url(../images/icons/icon_like_on.svg) no-repeat center; background-size: 50%;} 
.modelBox .infoBox .gradeList .list li .info { width: 100%; display: flex; flex-direction: column; justify-content: flex-start;}
.modelBox .infoBox .gradeList .list li .info .trim {font-weight: 500; padding-right: 20px; color: var(--main-font);}
.modelBox .infoBox .gradeList .list li .info .fule { font-size: 13px; color: var(--gray-400)}
.modelBox .infoBox .gradeList .list li .price {font-weight: 700; font-size: 15px; color: var(--primary-orange); white-space: nowrap;}
.modelBox .infoBox .gradeList .list li.oLink:not(.disabled)::before { content:"옵션 선택 필요"; position: absolute; font-size: 12px; right: 15px; bottom: 0; color: var(--navy-font);}
.modelBox .infoBox .gradeList .list li.on {border-color: var(--primary-orange);}
.modelBox .modelList li button .logo, .modelBox .modelList li a .logo {top: 15px; left: 15px; max-width: 45px;}
.modelBox .modelList.wide li.state3::after { top: 17px; left: 65px;}

/* 모델 상세 - 가격표/카탈로그 */
.priceCatal {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 5px; margin-top: 30px;}
.priceCatal h3 {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: space-between;}
.priceCatal .list { display: flex; flex-wrap: nowrap; flex-direction: row; align-items: stretch; justify-content: flex-start; gap: 15px; width: 100%;}
.priceCatal .list li {padding: 15px; border-radius: 10px; align-items: stretch; border: 1px solid var(--gray-300); flex: 0 0 auto; color: var(--main-font); background-color: var(--bg-white); }
.priceCatal .list li .thumb { height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 7px; justify-content: center; align-items: center; cursor: pointer;}
.priceCatal .list li .thumb span {color: var(--gray-500);}
.priceCatal .list li .thumb img {margin: auto 0;}

@media screen and (max-width: 360px) {
    .filterBox .choice > li .list.btnCapital li {width: calc(33.3% - 10px);}
}
@media screen and (min-width: 400px) {
    .modelList.wide li {width: calc(50% - 10px);}
}
@media screen and (min-width: 600px) {
    .modelList.wide li {width: calc(33.3% - 13.3px);}
    .wrapper[path="model_search"] .orderList { flex-direction: row; align-items: center; flex-wrap: nowrap;}
    .wrapper[path="model_search"] .orderList .searchBox input {max-width: 200px;}
    .modelBox .modelDetail .left .image img {max-width: 350px;}
    .modelBox .modelDetail .left dl > div {font-size: 14px;}
    .modelBox .infoBox .gradeList .list li {width: calc(33.3% - 10px);}
}
@media screen and (min-width: 768px) {
    .modelBox .infoBox .gradeList .list li {width: calc(25% - 11.25px);}
    
}
@media screen and (min-width: 1000px) {
    .wrapper[path="model_search"] .filterBox .choice > li > .title {margin-top: 0;}
    .modelList.wide li a .price {font-size: 18px;}
    .brandBox{width: calc(100% - 75px);}
    .modelBox .popupSlide {bottom: 0;}
    .modelBox .modelDetail .left { position: relative; width: calc(45% - 7.5px);}
    .modelBox .modelDetail .left .image {width: 100%;}
    .modelBox .modelDetail .left .title { font-size: 22px;}
    .modelBox .modelDetail .left .price {font-size: 22px;}
    .modelBox .modelDetail .right {width: calc(55% - 7.5px); padding-top: 30px; }
    .modelBox .modelDetail .right .title { font-size: 16px;} 
    .modelBox .modelDetail .right .title em {font-size: 14px;}
    .modelBox .infoBox .gradeList .list li {width: calc(20% - 12px);}
    .modelBox .nodata {height: 100%;}
}

@media screen and (min-width: 1200px) {
    .modelList.wide li {width: calc(25% - 15px);}
}

/* 판매조건 */ 
.wrapper[path^="discount"] .noticeBox { border: 1px solid var(--primary-navy); font-weight: 500; margin: 15px 0; border-radius: 10px;}
.wrapper[path^="discount"] .filterBox .brandList li a, .wrapper[path^="discount"] .filterBox .brandList li button {border-color: transparent;}
.wrapper[path^="discount"] .filterBox .brandList li.on a { border-color: var(--primary-orange); background-color: var(--orange-100); }
.wrapper[path^="discount"] .filterBox .brandList li.on .name { color: var(--primary-orange); }
.discountBox { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px; margin-top: 15px; }
.discountBox .top {display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px;} 
.discountBox .top .selectBox { text-align: right; align-self: flex-end;}
.discountBox .top .selectBox select {background-color: var(--bg-white);}
.discountBox .discount .fullList {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 20px;}
.discountBox .discount .fullList > li:not(.hide) { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 15px; border: 1px solid var(--gray-300); background-color: var(--bg-white); border-radius: 10px; padding: 15px;}
.discountBox .discount .fullList .box { width: 100%; position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 15px; }
.discountBox .discount .fullList .box .modelInfo {width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px;}
.discountBox .discount .fullList .box .modelInfo .type {font-weight: 500; font-size: 13px; color: var(--gray-500); width: calc(30% - 5px);}
.discountBox .discount .fullList .box .modelInfo .fastshipLink {width: calc(70% - 5px); text-align: right;}
.discountBox .discount .fullList .box .modelInfo .fastshipLink a {flex: unset;}
.discountBox .discount .fullList .box .modelInfo .image {width: 100%; text-align: center;}
.discountBox .discount .fullList .box .info { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center;}
.discountBox .discount .fullList .box .info span {font-size: 20px; font-weight: 700; color: var(--main-font);} 
.discountBox .discount .fullList .box .info .price {color: var(--primary-orange);}
.discountBox .discount .fullList .box .buttonBoxLine {border: 1px solid var(--gray-300); border-radius: 5px;}
.discountBox .discountInfo {padding: 15px; border-radius: 10px; background-color: #fff; }
.discountBox .discountInfo ul {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px;}
.discountBox .discountInfo ul li {display: flex; flex-direction: column; flex-wrap: nowrap; color: var(--main-font);}
.discountBox .discountInfo ul li .title {font-weight: 700; font-size: 15px; word-break: keep-all;}
.discountBox .discountInfo ul li .text {color: var(--gray-500); padding: 5px 10px;}

/* 판매조건 */
.discountsList { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; background-color: #fff;}
.discountsList .list:not(.hide) {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px; position: relative;}
.discountsList .list.maxH { max-height: 270px; overflow: hidden;}
.discountsList .list > li { position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; padding: 10px; border-radius: 7px; border: 1px solid var(--gray-300); }
.discountsList .list > li.nodata {align-items: center;}
.discountsList .list li .title { position: relative; width: 100%; font-size: 15px; font-weight: 700; color: var(--main-font); margin-bottom: 5px;}
.discountsList .list li .title.subd {padding-left: 25px;}
.discountsList .list li .title.subd::before { position: absolute; top: 2px; left: 0; content: ''; width: 20px; height: 20px; background: url(../images/icons/icon_electronic.png) no-repeat center/contain;}
.discountsList .list li .title button {font-size: 15px; font-weight: 700;}
.discountsList .list li .buttonBox {position: absolute; top: 7px; right: 7px; width: auto;}
.discountsList .list li .buttonBox a {flex: none; padding: 3px 9px; font-size: 13px;} 
.discountsList .list li .title .tooltip { position: relative; } 
.discountsList .list li .title .tooltip::after{ position: absolute; content: ''; width: 18px; height: 18px; top: 50%; right: -22px; transform: translateY(-50%); background: url(../images/icons/icon_help.svg) no-repeat center/contain}
.discountsList .list li .text { width: 100%; padding: 10px; background-color: var(--gray-500-dark); color: var(--main-font-dark); border-radius: 10px; font-weight: 500; font-size: 13px;}
.discountsList .list li .value { position: relative; width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap;}
.discountsList .list li .value > li:not(.hide) {display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; padding: 5px; color: var(--gray-500);}
.discountsList .list li .value > li:last-child {border-bottom: 0; padding-bottom: 0;}
.discountsList .list li .value li .price {font-weight: 500; color: var(--navy-font); padding-left: 5px;}
.discountsList .list li .value li .price .unit {padding-left: 3px;}
.discountsList .list li .value li ul {width: 100%;}
.discountsList .list li .value li ul li:not(.hide) {display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; padding: 3px 0; }
.discountsList .list li .value .buttonBox {position: absolute; top: 10px; right: 10px; justify-content: flex-end;}
.discountsList .list li .value .buttonBox a {flex: unset; padding: 3px 9px;}
.discountsList .list li .value .remark {padding-left: 0; justify-content: center; font-weight: 700;}
.discountsList .nodata img {width: 70px;}
.discountsList .nodata span {font-size: 16px;} 
.discountsList > .buttonBox {padding-top: 10px;}
.discountsList .select {float: right; text-align: right;}
.discountsList .select select {padding: 5px 24px 5px 8px; font-size: 12px;}

/* 예상납기 table */
.termTable { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: 15px;}
.termTable table {width: 100%; border-collapse: collapse; white-space: normal;}
.termTable table tbody tr td { padding: 10px; font-size: 14px; line-height: 1.4;}
.termTable table tbody tr td > div {color: var(--gray-500);}
.termTable table tr .top { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; padding: 5px; gap: 5px; font-size: 16px; color: var(--main-font);}
.termTable table tr .top img {width: 100%; max-width: 50px;}
.termTable table tr .top .date {font-weight: 500; font-size: 14px;}
.termTable table tr th { border-radius: 10px;}
.termTable table.hd tr:first-child th {background-color: #A2B8CE;}
.termTable table.ge tr:first-child th {background-color: #abb4c2;}
.termTable table.ki tr:first-child th {background-color: #D3C7BF;}
.termTable table tbody tr td {border-bottom: 1px solid var(--gray-300); color: var(--main-font);}

@media screen and (min-width: 400px) {
    .discountBox .top {flex-direction: row;}
}  
@media screen and (min-width: 1000px) {
    .discountsList {width: calc(65% - 10px); justify-content: space-between;}
    .discountBox .discount .fullList > li:not(.hide) {flex-direction: row; flex-wrap: nowrap; gap: 20px;}
    .discountBox .discount .fullList .box {width: calc(35% - 10px); justify-content: space-between;}
    .discountBox .discountInfo ul {gap: 0;}
    .discountBox .discountInfo ul li {flex-direction: row; align-items: center; border-bottom: 1px dashed var(--gray-300); padding: 10px 0;}
    .discountBox .discountInfo ul li:first-child {padding-top: 0}
    .discountBox .discountInfo ul li:last-child {border-bottom: none; padding-bottom: 0;}
    .discountBox .discountInfo ul li .title {width: 20%; text-align: center;}
    .discountBox .discountInfo ul li .text {width: 80%;} 
    .termTable {flex-direction: row;}
    .termTable table {width: calc(33.3% - 10px);}
}

/* 선구매(즉시출고) */
.wrapper[path^="fastship"] .filterBox .choice {padding-top: 0;}
.fastshipBox {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px;}
.fastshipBox .adBox {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 10px;}
.fastshipBox .adBox button {display: flex; width: 100%;}
.fastshipBox .adBox button img {width: 100%; border-radius: 3px;}
.fastshipBox .modelList li button, .fastshipBox .modelList li a {padding: 0; border: none; background-color: none; }
.fastshipBox .modelList li button .car, .fastshipBox .modelList li a .car { display: flex; justify-content: center; padding: 30px 10px 10px 10px; border-radius: 10px; background-color: var(--gray-200);}
.fastshipBox .modelList li button .name, .fastshipBox .modelList li a .name {font-size: 13px; text-align: center;}
.fastshipList {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 15px; margin-top: 15px; background-color: var(--bg-white); padding: 10px;border: 1px solid var(--gray-300); border-radius: 10px;}
.fastshipList > li {width: 100%;}
.fastshipList > li .top { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding: 10px 20px; border-radius: 10px; background-color: var(--gray-100); color: var(--main-font);}
.fastshipList > li .top .title { width: 80%; font-weight: 700; word-break: keep-all;}
.fastshipList > li .top .cnt { width: 20%; color: var(--primary-navy); font-weight: 700; text-align: right;}
.fastshipList > li .list { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start;}
.fastshipList > li .list li:not(.hide) { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; padding: 15px 10px; gap: 15px 5px; border-bottom: 1px solid var(--gray-300); }
.fastshipList > li .list li:last-child {border-bottom: none; }
.fastshipList > li .list li .goods { position: absolute; top: 15px; right: 10px; width: fit-content; border: 1px solid var(--primary-navy); padding: 0 8px; border-radius: 30px; }
.fastshipList > li .list li .goods span { position: relative; font-size: 12px; color: var(--navy-font); font-weight: 500;}
.fastshipList > li .list li .goods span:not(:first-child)::before { content: ', ';}
.fastshipList > li .list li .name { width: 100%; font-weight: 700; font-size: 15px; color: var(--main-font); padding-right: 95px;}
.fastshipList > li .list li .cont { width: calc(50% - 2.5px); display: flex; flex-direction: column; flex-wrap: nowrap; color: var(--gray-500);font-size: 13px;}
.fastshipList > li .list li .cont .option { position: relative; padding-left: 35px; color: var(--gray-500); font-weight: 500;} 
.fastshipList > li .list li .cont .option::before { position: absolute; top:0; left: 0; content: '옵션 '; color: var(--gray-400); font-weight: 400;}
.fastshipList > li .list li .cont .option span {display: block;} 
.fastshipList > li .list li .cont .color { color: var(--gray-500); font-weight: 500;} 
.fastshipList > li .list li .cont .color span {position: relative; display: block; padding-left: 35px;} 
.fastshipList > li .list li .cont .color .ext::before { position: absolute; top: 0; left: 0; content: '외장 '; color: var(--gray-400); font-weight: 400;}
.fastshipList > li .list li .cont .color .int::before { position: absolute; top: 0; left: 0; content: '내장 '; color: var(--gray-400); font-weight: 400;} 
.fastshipList > li .list li .cont .my { position: relative; padding-left: 35px;}
.fastshipList > li .list li .cont .my::before {position: absolute; top: 0; left: 0; content: '연식 '; color: var(--gray-400); font-weight: 400;}  
.fastshipList > li .list li .priceInfo { width: calc(50% - 2.5px); display: flex; flex-direction: column; flex-wrap: wrap; align-items: stretch; justify-content: space-between; color: var(--main-font); text-align: right;}
.fastshipList > li .list li .priceInfo .date { width: 100%; font-size: 12px; text-align: right;}
.fastshipList > li .list li .priceInfo .logo {display: flex; align-items: center; justify-content: flex-end; gap: 5px;}
.fastshipList > li .list li .priceInfo .logo img { max-width: 25px; background-color: var(--white); border-radius: 50%; padding: 2px;}
.fastshipList > li .list li .priceInfo .logo .company { font-size: 12px; }
.fastshipList > li .list li .priceInfo .capital { width: 100%; font-size: 12px; text-align: right;}
.fastshipList > li .list li .priceInfo .price { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 5px; font-weight: 700; font-size: 15px; color: var(--primary-orange);}
.fastshipList > li .list li .priceInfo .price .cnt {font-size: 12px; color: var(--gray-500);}
.fastshipList > li .list li .priceInfo .memo {text-align: right;}
.fastshipList > li .list li .priceInfo .refmemo {color: var(--gray-400); font-size: 12px;}
.fastshipList > li .list li .priceInfo .release {font-size: 12px;}
.fastshipList > li .list li .buttonBox button {padding: 6px; } 
.fastshipList > li .list li span.on {color: var(--primary-orange); }
.fastshipList > li .list li .dealer.on {color: var(--primary-orange); }


@media screen and (min-width:600px){
    .fastshipBox .adBox {flex-direction: row; flex-wrap: nowrap;}
    .fastshipBox .adBox button {width: calc(50% - 5px);}
    
} 
@media screen and (min-width:768px){
    .fastshipBox { gap: 30px;} 
    .fastshipBox.stock .fastshipList > li .list li:not(.hide) {padding: 15px 10px; align-items: stretch;}
    .fastshipBox.stock .fastshipList > li .list li .priceInfo { padding-bottom: 0;}
    .fastshipBox.stock .fastshipList > li .list li .priceInfo .price {position: unset;}
    .fastshipList > li .list li:not(.hide) {padding: 35px 10px 10px 10px; justify-content: space-between;}
    .fastshipList > li .list li .goods { top: 8px; left: 10px;}
    .fastshipList > li .list li .name {width: calc(30% - 3.33px); padding-right: 0;}
    .fastshipList > li .list li .cont {width: calc(40% - 3.33px);}
    .fastshipList > li .list li .priceInfo {width: calc(30% - 3.33px); padding-bottom: 40px;}
    .fastshipList > li .list li .priceInfo .memo {position: absolute; top: 10px; right: 10px;}
    .fastshipList > li .list li .priceInfo .price {position: absolute; bottom: 10px; left: 10px;}
    .fastshipList > li .list li .buttonBox { width: auto; position: absolute; bottom: 10px; right: 10px;}
    .fastshipList > li .list li .buttonBox button {flex: unset;}  
    .fastshipList > li .top .title {font-size: 16px;}
}


/* 비교하기 */
.wrapper[path="model_compare"] .mainTop {padding: 20px;}
.wrapper[path="model_compare"] .estmBody, .wrapper[path="model_compare"] #estmBody, .wrapper[path="model_compare"] .estmBox { height: auto;}
.wrapper[path="model_compare"] .container main > .inner {overflow-y: clip;}
.wrapper[path="model_compare"] .mainTop .right .close {display: none;}
.wrapper[path="model_compare"] .popup .content .optionList li button::before {content: none;}
.wrapper[path="model_compare"] .popup .content .optionList li button .data .name .icons {display: none;}
.wrapper[path="model_compare"] .popup .content .optionList li button, .wrapper[path="model_compare"] .popup .content .optionList li label {padding: 10px 10px 20px 10px;}
.wrapper[path="model_compare"] .estmCell .vehicle.open .choice .box li.on .cont {overflow: unset;}
.wrapper[path="model_compare"] .modelList li.x::before {content: ''; width: 20px; height: 20px; padding: 0; top: 0; right: 0; background: transparent url(../images/icons/icon_eco.png) no-repeat center / contain;}
.wrapper[path="model_compare"] .modelList li.e::before {content: ''; width: 20px; height: 20px; padding: 0; top: 0; right: 0; background: transparent url(../images/icons/icon_electronic.png) no-repeat center / contain;}
.wrapper[path="model_compare"] .estmBox:not(.hide) {position: fixed; top: 0; left: 50%; transform: translateX(-50%); left: 50%; z-index: 51; max-width: 1170px; width: 100%; border-radius: 15px; background-color: var(--bg-color); padding: 50px 15px 15px 15px;}
.wrapper[path="model_compare"] .estmCell .vehicle .choice .box {max-height: calc(100vh - 130px); overflow-y: auto;}
.wrapper[path="model_compare"] .estmCell .vehicle.open .btn {display: block; position: absolute; top: -41px; right: 0;}
.wrapper[path="model_compare"] .estmCell .vehicle.open .btn .btnEstmVehicleOpen { font-size: 0; width: 35px; height: 35px; background: url(../images/icons/icon_close_white.svg) no-repeat center; background-size: 50%; background-color: var(--primary-orange); border-radius: 50%;}
.wrapper[path="model_compare"] .container main .inner { display: flex; flex-direction: column; padding: 0;}
.wrapper:not(.mobile) .compareBox .comRight {overflow: unset;}
.compareBox { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; background-color: var(--bg-color);}
.compareBox table { height: 100%; white-space: normal;}
.compareBox table tbody td { color: var(--main-font); padding: 10px; text-align: center; border: 1px solid var(--gray-300); border-left: 0; border-bottom: 0;}
.compareBox table tr.head td:not(:empty):nth-last-child(2) button.crossing {display: none;} 
.compareBox .comRight .horizonScroll table tbody tr:not(.hide) {flex-wrap: unset;}
/* left영역 */
.compareBox .comLeft { width: 140px; background-color: var(--gray-50); position: sticky; top: 0; left: 0; border-bottom: 0; border-right: 0; border-left: 1px solid var(--gray-300); z-index: 48;}
.compareBox .comLeft .stickyWrap {width: 140px; border: 1px solid var(--gray-300); border-left: none; border-top: 0;}
.compareBox .comLeft .stickyWrap::-webkit-scrollbar {display: none;}
.compareBox .comLeft .stickyWrap .head {height: 100%; background-color: var(--bg-color);}
.compareBox .comLeft .stickyWrap.fixed { background-color: var(--bg-white); border-top : 1px solid var(--gray-300);}
.compareBox .comLeft .stickyWrap.fixed .head .menu { width: inherit; }
.compareBox .comLeft .stickyWrap.fixed .head .menu .subList li {width: calc(50% - 5px);}
.compareBox .comLeft .stickyWrap.fixed .head .menu .subList li:nth-child(odd) {border-right: 1px solid var(--gray-300);}
.compareBox .comLeft .head .menu { position: relative; display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; padding: 10px; gap: 10px;}
.compareBox .comLeft .head .menu .menuList { position: relative; color: var(--navy-font); font-weight: 700; }
.compareBox .comLeft .head .menu .subList:not(.hide) { width: 100%; height: 100%; display: flex; flex-wrap: wrap; align-items: stretch; z-index: 1; gap: 10px;}
.compareBox .comLeft .head .menu .subList li { width: 100%; text-align: center; display: flex; align-items: stretch; border: 1px solid var(--gray-300); background-color: var(--bg-white); border-radius: 5px;}
.compareBox .comLeft .head .menu .subList li button {width: 100%; }
.compareBox .comLeft .head .menu .subList li button.on {background-color: var(--primary-navy); border-color: var(--primary-navy); color: var(--white); border-radius: 5px;}
.compareBox .comLeft .body ul li .mainTopic {text-align: center; font-weight: 700; padding: 10px; background-color: var(--primary-navy); border-bottom: 1px solid var(--gray-300); color: var(--white); } 
.compareBox .comLeft .body ul li .sub > li { border-top: 1px solid var(--gray-300); border-right: 1px solid var(--gray-300); }
.compareBox .comLeft .body ul li .sub > li:not(.hide) { width: 140px; height: 42px; position: relative; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--main-font); font-weight: 400; letter-spacing: -.5px; gap: 3px; padding: 10px 5px; text-align: center; word-break: keep-all;}
.compareBox .comLeft .body ul li .sub > li.cate { background-color: var(--gray-300); border-top: 0;}
.compareBox .comLeft .body ul li .sub > li button {text-decoration: underline solid #d1d1d1; text-underline-offset: 2px; letter-spacing: -.5px; font-size: 13px; font-weight: 400; }
.compareBox .comLeft .body ul li .sub table {table-layout: fixed;} 
.compareBox .comLeft .body ul li .sub table tbody tr td { background-color: var(--gray-50); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; height: 42px; font-size: 13px;}
.compareBox .comLeft .body ul li .sub table tbody tr td:first-child {width: 43px;}
.compareBox .comLeft .body ul li .sub table tbody tr td.define {width: 97px;}
.compareBox .comLeft table tbody tr td {letter-spacing: -.5px; }
/* right 영역 */
.compareBox .comRight {background-color: var(--bg-color); overflow-x: auto; overflow-y: hidden;} 
.compareBox .comRight .horizonScroll { position: relative; width: fit-content; height: 100%; } 
.compareBox .comRight .horizonScroll table tbody tr:not(.hide) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; min-height: 42px; }
.compareBox .comRight .head table tbody tr td { flex-direction: column; border-bottom: 1px solid var(--gray-300); background-color: var(--bg-white); gap: 5px; min-height: 200px;} 
.compareBox .comRight .head table tbody tr td .moreBtn { background-image: url(../images/icons/icon_more_menu.svg);}
.compareBox .comRight .head table tbody tr td .selBox { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between;}
.compareBox .comRight .head table tbody tr td .selBox > button { font-size: 0; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.compareBox .comRight .head table tbody tr td .selBox .standard { background-image: url(../images/icons/icon_pin.svg); }
.compareBox .comRight .head table tbody tr td .selBox .standard.on { background-image: url(../images/icons/icon_pin_on.svg);}
.compareBox .comRight .head table tbody tr td .selBox .btnBox {display: none; }
.compareBox .comRight .head table tbody tr td .selBox .btnBox.open {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; background-color: var(--bg-color); border: 1px solid var(--gray-300); z-index: 1; border-radius: 10px; position: absolute; right: 0; top: 25px;}
.compareBox .comRight .head table tbody tr td .selBox .btnBox button, .compareBox .comRight .head table tbody tr td .selBox .btnBox a { position: relative; padding: 10px 10px 10px 35px; text-align: left; font-weight: 500; width: 100%; font-size: 12px; color: var(--gray-500);}
.compareBox .comRight .head table tbody tr td .selBox .btnBox button::before, .compareBox .comRight .head table tbody tr td .selBox .btnBox a::before { position: absolute; content: ''; top: 50%; transform: translateY(-50%); left: 9px; width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: contain;}
.compareBox .comRight .head table tbody tr td .selBox .btnBox .mask::before { background-image: url(../images/icons/visibility_off.svg);}
.compareBox .comRight .head table tbody tr td .selBox .btnBox .mask.show::before { background-image: url(../images/icons/visibility.svg);}
.compareBox .comRight .head table tbody tr td .selBox .btnBox .change::before {background-image: url(../images/icons/icon_change.svg);}
.compareBox .comRight .head table tbody tr td .selBox .btnBox .copy::before { background-image: url(../images/icons/icon_copy.svg);}
.compareBox .comRight .head table tbody tr td .selBox .btnBox .del::before {background-image: url(../images/icons/icon_close_dark.svg);}
.compareBox .comRight .head table tbody tr td .selBox .btnBox .crossing::before {background-image: url(../images/icons/icon_change_lr.svg);}  
.compareBox .comRight .head table tbody tr td .box { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%;}
.compareBox .comRight .head table tbody tr td .box .info:not(.hide) { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center;}
.compareBox .comRight .head table tbody tr td .box .info .car {width: 100%;}
.compareBox .comRight .head table tbody tr td .box .info .car img { max-width: 200px;}   
.compareBox .comRight .head table tbody tr td .box .info .title { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; }
.compareBox .comRight .head table tbody tr td:not(.mask) .box .info .title .logo {display: flex; max-width: 35px; margin-left: -7px;}
.compareBox .comRight .head table tbody tr td .box .info .logo img { width: 100%;} 
.compareBox .comRight .head table tbody tr td .box .info .model {font-weight: 700; font-size: 15px; text-align: left; color: var(--main-font);}
.compareBox .comRight .head table tbody tr td .box .info .lineup { font-size: 13px; color: var(--gray-500); text-align: left; width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; }
.compareBox .comRight .head table tbody tr td .box .info .trim { font-size: 13px; color: var(--gray-500); text-align: left; width: 100%;overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis;}
.compareBox .comRight .head table tbody tr td .price {width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; font-weight: 700; color: var(--primary-orange); font-size: 15px;}
.compareBox .comRight .head table tbody tr td .price span {color: var(--main-font);}
.compareBox .comRight .head table tbody tr td .price .num {position: relative; color: var(--primary-orange);}
.compareBox .comRight .head table tbody tr td .price .num::after {content: ' 원';}
.compareBox .comRight .head table tbody tr td.mask .selBox .btnBox.open {right: unset; left: 0;}
.compareBox .comRight .box .addBox { display: flex; align-items: center; flex-direction: column; flex-wrap: nowrap; justify-content: center; gap: 10px; padding: 15px 0; color: var(--gray-400); height: 100%; }
.compareBox .comRight .box .addBox button { font-size: 0; width: 40px; height: 40px; background: url(../images/icons/icon_more.svg) no-repeat center; background-size: 60%; border: 2px dashed var(--gray-300); border-radius: 50%;}
.compareBox .comRight table tbody tr td { position: relative; min-height: 42px; background-color: var(--bg-white); width: 200px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; flex-direction: row;  word-break: keep-all; }
.compareBox .comRight table tbody tr td .gap {position: absolute; bottom: 0px; right: 5px; font-size: 12px; font-weight: 400; letter-spacing: -.5px;}
.compareBox .comRight table tbody tr td .gap span {position: relative;}
.compareBox .comRight table tbody tr td .gap .down {color: var(--primary-blue);}
.compareBox .comRight table tbody tr td .gap .down::before { content: '- ';}
.compareBox .comRight table tbody tr td .gap .up {color: var(--primary-red); }
.compareBox .comRight table tbody tr td .gap .up::before {content: '+ ';}
.compareBox .comRight table tbody tr td .unit {padding-left: 3px; font-size: 11px; color: var(--gray-400);}
.compareBox .comRight table tbody tr.default td { background-color: var(--gray-300); border: 0;}
.compareBox .comRight table tbody tr td { transition: width 0.4s ease, background-color 0.4s ease;}
.compareBox .comRight table tbody tr td.mask { width: 50px; text-indent: -9999px; line-height: 0;}
.compareBox .comRight table tbody tr td.mask > * {display: none;}
.compareBox .comRight table tbody tr:not(.default) td.mask { background-color: var(--bg-color); justify-content: flex-start; }
.compareBox .comRight table tbody tr:not(.default) td.mask .selBox {justify-content: center; }
.compareBox .comRight table tbody tr:not(.default) td.mask .selBox .standard {display: none; }
.compareBox .comRight .itemBox td button {text-decoration: underline solid #d1d1d1; text-underline-offset: 2px; font-weight: 400; font-size: 13px;};
.compareBox .comRight .itemBox td a { font-size: 13px; position: relative; padding-right: 10px; }
.compareBox .comRight .itemBox td a::after { content: ""; position: absolute; width: 18px; height: 18px; background: url(../images/icons/icon_help.svg) no-repeat center; background-size: 88%;}
/* title 영역 (접기) */
.compareBox .comRight .body {height: 100%;} 
.compareBox .comRight .body .mainTopic { position: relative; background-color: var(--primary-navy); padding: 10px; border-bottom: 1px solid var(--gray-300);}
.compareBox .comRight .body .mainTopic .down {width: 100%; text-indent: -9999px;}
.compareBox .comRight .body .mainTopic .down::after {width: 20px; height: 20px; top: 50%; right: 10px; transform: translateY(-50%) rotate(180deg); position: absolute; content: ''; background: url(../images/icons/icon_arrowdown.svg) no-repeat center/contain;}
.compareBox .comRight .body .mainTopic .up {width: 100%; text-indent: -9999px;}
.compareBox .comRight .body .mainTopic .up::after { width: 20px; height: 20px; top: 50%; right: 10px; transform: translateY(-50%) rotate(180deg); position: absolute; content: ''; background: url(../images/icons/icon_arrowdown.svg) no-repeat center/contain; transform: translateY(-50%) rotate(0deg);}
.compareBox .comRight .body .mainTopic .itemClassify:not(.hide) { position: absolute; top: 0; left: 0; height: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 10px 10px 0 10px;}
.compareBox .comRight .body .mainTopic .itemClassify button { height: 100%; border-radius: 5px 5px 0 0; padding: 5px 10px; font-size: 12px; background-color: #475264; color: var(--white); font-weight: 700; white-space: nowrap;}
.compareBox .comRight .body .mainTopic .itemClassify button::after { display: none; }
.compareBox .comRight .body .mainTopic .itemClassify button.on { background-color: var(--white); color: var(--primary-navy); border-color: var(--white);}
/* 총 차량가격 , fixed 영역 */
.compareBox .resultBox {border-bottom: 0;}
.compareBox .resultBox, .compareBox .comLeft .body .price {position: sticky; bottom: -1px; left: 15px; background-color: var(--bg-white); height: 70px; margin-bottom: -1px; z-index: 47;}
.compareBox .resultBox.fixed, .compareBox .comLeft .body .price.fixed {position: fixed; bottom: 0; left: unset;}
.compareBox .resultBox tbody tr td { position: relative; font-size: 15px; border-bottom: none; align-items: flex-start; font-weight: 700;}   
.compareBox .resultBox tbody tr td .openEstimateMode { width: 30%; height: fit-content; padding: 2px 4px; background-color: var(--primary-orange); border: 1px solid var(--primary-orange); color: var(--white); border-radius: 5px; font-size: 12px; }
.compareBox .resultBox tbody tr td .num { width: 70%; text-align: right; top: 5px; position: relative;}
.compareBox .resultBox tbody tr td .price {font-weight: 700; font-size: 16px;}
.compareBox .resultBox tbody tr td .unit { color: var(--main-font); font-weight: 700; font-size: 16px;}
.compareBox .resultBox tbody tr td .taxcost {font-size: 12px; color: var(--gray-500); font-weight: 400; width: 100%; text-align: right;}
.compareBox .comRight .resultBox tbody tr td .gap {top: 2px; right: 10px; bottom: unset;}
.compareBox .comRight .resultBox tbody tr td {justify-content: flex-end; align-items: stretch; height: 70px; background-color: var(--bg-white);}
.compareBox .comRight .stickyWrap.fixed table tbody td {padding: 10px 15px;}
.compareBox .comRight .stickyWrap.fixed .head table tbody tr td {min-height: 130px;}
.compareBox .comRight .stickyWrap.fixed .box .info .car { display: none;}  
.compareBox .comRight .stickyWrap.fixed .head table {border-bottom: none;}
.compareBox .stickyWrap.fixed {position: fixed; top: 0; z-index: 10; box-shadow: 0 2px 4px rgba(0,0,0,0.08);}
.compareBox .comLeft .body .price {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; width: 140px; border-top: 1px solid var(--gray-300); border-right: 1px solid var(--gray-300); color: var(--main-font);}
/* 옵션 예외처리 */
.compareBox .comRight table tbody tr.option td {align-items: flex-start;}
.compareBox .comRight .optionList {padding-bottom: 0;}
.compareBox .comRight .optionList li button {padding: 10px 10px 20px 30px; border-color: transparent;}
.compareBox .comRight .optionList li button::before, .compareBox .comRight .optionList li label::before { top: 10px; left: 0;}
.compareBox .comRight .optionList li button .name {font-size: 14px;}
.compareBox .comRight .optionPrice td {padding: 10px; font-size: 15px; font-weight: 700;}
.compareBox .comRight .body table tbody tr.optionPrice td {align-items: center;}
/* 색상 예외처리 */
.compareBox .comRight .colorBox table tbody tr td {align-items: flex-start; justify-content: flex-start;}
.compareBox .comRight .colorList li button {flex-wrap: nowrap;}
.compareBox .comRight .selColor td {gap: 5px;}
.compareBox .comRight .selColor td div { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline;}
.compareBox .comRight .selColor td div .title {width: 30px; color: var(--gray-500);}
.compareBox .comRight .selColor td div .colorName {width: calc(100% - 30px); text-align: right; font-weight: 700;}
.compareBox .comRight .selColor td div .price {color: var(--gray-500); font-size: 12px; margin-left: 3px;}
/* 주요사양 예외처리 */
.compareBox.star .comLeft li[kind='item'] .sub li:not(.star) {display: none;}
.compareBox.star .comRight .itemBox tr:not(.star) {display: none;}
.compareBox .comLeft .body ul li .sub > li.star,  .compareBox .comLeft .body ul li .sub > li.star button {color: var(--primary-orange);}
.compareBox .comRight .horizonScroll table tbody tr td.star a, .compareBox .comRight .horizonScroll table tbody tr td.star span, .compareBox .comRight .itemBox td.star button { width: 100%; color: var(--primary-orange);}
.compareBox.star .comLeft .body ul li .sub > li.star, .compareBox.star .comLeft .body ul li .sub > li.star button {color: var(--main-font);}
.compareBox.star .comRight .horizonScroll table tbody tr td.star a, .compareBox.star .comRight .horizonScroll table tbody tr td.star span, .compareBox.star .comRight .itemBox td.star button {color: var(--main-font);}


@media screen and (min-width: 1000px) {
    .wrapper[path="model_compare"] .estmBox:not(.hide) {padding: 15px;}
    .wrapper[path="model_compare"] .estmCell .vehicle .choice .box {overflow-y: unset;}
    .wrapper[path="model_compare"] .estmCell .vehicle.open .btn {top: -5px; right: -5px;}
    .wrapper[path="model_compare"] .estmCell .vehicle.open .choice .box { padding-bottom: 0; box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.3);}
    .wrapper[path="model_compare"] .estmCell .vehicle.open .choice .box li.on .cont {overflow-y: auto;}
    .wrapper[path="model_compare"] .container main .inner {padding-left: 15px;}
    .wrapper[path="model_compare"] .brandList li { width: calc(25% - 7.5px);}
    .wrapper[path="model_compare"] .modelList li button, .wrapper[path^="model_compare"] .modelList li a {box-shadow: none;} 
    .compareBox .comLeft::before { content: ''; position: absolute; top: 0; left: -16px; width: 16px; background-color: var(--bg-color); height: 100%; }
    .compareBox .comRight .body .mainTopic {min-width: auto;}
    .compareBox .comRight table tbody tr td {width: 265px;}
}
@media screen and (min-width: 1200px) {
    .wrapper[path="model_compare"] .estmBox:not(.hide) {padding: 0;}
    .wrapper[path="model_compare"] .estmCell .vehicle.open .btn {top: 2px; right: 2px;}
    .wrapper[path="model_compare"] .container main .inner { padding: 0 15px;}
}
@media screen and (min-width: 1350px) {
    .wrapper[path="model_compare"] .container main {position: relative; width: 100%;}
    .wrapper[path="model_compare"] .container main .inner .mainTop {max-width: 1200px; width: 100%;}
    .wrapper[path="model_compare"] .estmBox:not(.hide) {max-width: 1200px;}
    .compareBox {min-width: 1200px; max-width: max-content; margin: 0 auto;}
    .compareBox .comRight {overflow: visible;}
    
}
@media screen and (min-width: 1400px) {  
    .wrapper[path="model_compare"] .container main .inner {min-width: unset; max-width: unset; align-items: center;}
}
@media (hover: hover) and (pointer: fine) {
    .compareBox .comLeft .body ul li .sub > li button:hover { color: var(--main-font); text-decoration-color: var(--gray-400);}
    .compareBox .comLeft .head .menu .subList li button:hover {background-color: var(--primary-navy); border-color: var(--primary-navy); color: var(--white); border-radius: 5px;}
    .compareBox .comRight .itemBox td button:hover { color: var(--main-font); text-decoration-color: var(--gray-400);}
}
/* 비교하기 공유 예외처리 */ 
.wrapper.share .container, .wrapper.share .header, .footer {margin-left: 15px;}
.wrapper.share .compareBox .comLeft {left: 15px;}


/* 유틸리티 - 공통 */
.wrapper[path^="utility"] table {white-space: nowrap;}
.wrapper[path^="utility"] table tbody tr td span.rate {color: var(--primary-orange); font-weight: 700; font-size: 13px;}
.wrapper[path^="utility"] table tbody tr td.set.on {background-color: var(--primary-navy); color: var(--white);}
.wrapper[path^="utility"] .descBox { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; padding: 15px; border-radius: 10px; background-color: #fff; border: 1px solid var(--gray-300); }
.wrapper[path^="utility"] .descBox dl dt {position: relative; font-size: 15px; font-weight: 600;}
.wrapper[path^="utility"] .descBox dl dd {color: var(--gray-500); font-weight: 500; word-break: keep-all;}
.wrapper[path^="utility"] .descBox dl .list {margin: 5px 0;}
.wrapper[path^="utility"] .descBox dl .list li {position: relative; padding-left: 13px;}
.wrapper[path^="utility"] .descBox dl .list li::before {position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 5px; height: 2px; border-radius: 2px; background-color: var(--gray-400);}
.wrapper[path^="utility"] .descBox dl > div {width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 5px;}
.wrapper[path^="utility"] .descBox dl > div:last-child {border-bottom: none; padding-bottom: 0;}
.wrapper[path^="utility"] .descBox .info { margin-top: 10px; color: var(--gray-500); font-size: 12px; word-break: keep-all;}
.wrapper[path^="utility"] .gap {margin-left: 3px; font-size: 11px; font-weight: 600; white-space: nowrap; letter-spacing: -.3px;}
.wrapper[path^="utility"] .gap.down {color: var(--primary-blue);}
.wrapper[path^="utility"] .gap.down::before { content: '- '; }
.wrapper[path^="utility"] .gap.up { color: var(--primary-red);}
.wrapper[path^="utility"] .gap.up::before { content: '+ '; }

/* 유틸리티 - 할부계산기 */
.calculatorBox {overflow-x: auto; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 15px;}
.controlBox { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 15px;}
.controlBox .box { width: 100%; position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; padding: 15px; border: 1px solid var(--gray-300); background-color: var(--bg-white); border-radius: 15px; color: var(--main-font); }
.controlBox .box .top {font-size: 18px; font-weight: 700; width: 100%; text-align: left;}
.controlBox .box .btnCheck {width: 100%; padding: 5px 0;}
.controlBox .box .set:not(.hide) { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 10px;}
.controlBox .box .set .title {width: 50px; font-weight: 500; color: var(--main-font);}
.controlBox .box .set .inputBox:not(.hide), .controlBox .box .set .selectBox:not(.hide) {width: calc(100% - 50px); align-items: center; display: flex; flex-direction: row; flex-wrap: nowrap;}
.controlBox .box .set .inputBox input { flex: 1; text-align: center;}
.controlBox .box .set .inputBox .input {flex: 1; text-align: center; font-weight: 700;}
.controlBox .box .set .selectBox select { flex: 1; text-align: center; }
.controlBox .box .set .unit { width: 35px; color: var(--gray-500); font-weight: 500; font-size: 13px; text-align: center;}
.controlBox.btn .condition:not(.hide) { width: 100%; display: flex; flex-direction: column; gap: 15px;}
.controlBox.btn .box {gap: 10px;} 
.controlBox.btn .box .set { align-items: flex-start; padding: 0;}
.controlBox.btn .box .set .title {width: 75px; margin-top: 8px;}
.controlBox.btn .box .set .inputBox {width: calc(100% - 75px);}
.controlBox.btn .box .set .btnRadio {width: calc(100% - 75px);}
.controlBox.btn .box .set .btnCheck {width: calc(100% - 75px);}
.controlBox.btn .box .set .wrapBox {width: calc(100% - 75px); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px;}
.controlBox.btn .box .set .wrapBox .inputBox {width: 100%;}
.controlBox.btn .box .set .wrapBox .inputBox select {flex: 1;}
.controlBox.btn .box .set .wrapBox .btnCheck {width: auto;}
.controlBox.btn .box .set.block {width: 100%;}   
.controlBox .box.resultBox { background-color: var(--primary-navy); border-color: var(--primary-navy);}
.controlBox .box.resultBox .top {color: var(--white);}
.controlBox .box.resultBox .cartaxResult {width: 100%;}
.controlBox .box.resultBox .result { position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 15px 10px;  color: var(--white);} 
.controlBox .box.resultBox .result .titleBox {position: relative;}
.controlBox .box.resultBox .result .titleBox .gap { position: absolute; top: 50%; transform: translateY(-50%); }
.controlBox .box.resultBox .result .tax {font-size: 12px; color: var(--gray-400); font-weight: 400; margin-right: 5px;}
.controlBox .box.resultBox .result .title { width: 70px; font-weight: 500; color: var(--gray-400);}
.controlBox .box.resultBox .result .sumBox { width: calc(100% - 70px); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 5px; font-weight: 700; text-align: right; word-break: keep-all;}
.controlBox .box.resultBox .result .sumBox .hold { position: absolute; bottom: 0; font-size: 12px; color: var(--gray-400); font-weight: 300; text-align: right;}
.controlBox .box.resultBox .result.pmt {background-color: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); border-radius: 15px;}
.controlBox .box.resultBox .result.pmt .title { color: var(--white); }
.controlBox .box.resultBox .result.pmt .sum:not(.hide) { display: flex; align-items: center; gap: 0 5px; color: var(--primary-orange); font-size: 18px; font-weight: 700;}
.controlBox .box.resultBox .result.pmt .unit { color: var(--gray-400); font-weight: 400; font-size: 14px;}
.controlBox .box.resultBox .btnRadio label input[type="radio"] + span {color: var(--gray-400); background-color: transparent; border-color: rgba(255, 255, 255, .1);}
.controlBox .box.resultBox .btnRadio label input[type="radio"]:checked + span {color: var(--primary-orange); border-color: var(--primary-orange);}
/* 유틸리티 - 할부계산기 (비교 예외처리) */
.calculatorBox .calCell { position: relative; width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 30px;}
.calculatorBox .btnCalDel {position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background: url(../images/icons/icon_trash.svg) no-repeat center; background-size: 70%; z-index: 1; font-size: 0; text-indent: -9999px;}
.calculatorBox[calLen='1'] .btnCalDel {display: none;}
.calculatorBox[calLen='3'] .controlBox .box .set:not(.hide) {width: 100%;}
.calculatorBox:not([calLen='1']) .calCell {flex: 1;} 
.calculatorBox:not([calLen='1']) .noticeBox {display: none;}
.calculatorBox:not([calLen='1']) .controlBox .box .btnCheck {position: unset; width: 100%; justify-content: flex-start; margin: 5px 0;}
.calculatorBox:not([calLen='1']) .calCell .repaymentBox .right {display: none;}
/* 유틸리티 - 상환스케줄표 */ 
.calculatorBox .repaymentBox {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px;} 
.calculatorBox .repaymentBox .graph {width: 100%;}
.calculatorBox .repaymentBox .graph .index {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; margin-bottom: 10px;}
.calculatorBox .repaymentBox .graph .index > div {display: flex; flex-direction: row; align-items: baseline; flex-wrap: nowrap; gap: 3px; font-weight: 700; color: var(--main-font);} 
.calculatorBox .repaymentBox .graph .index em {font-size: 16px; font-weight: 700; color: var(--main-font);}
.calculatorBox .repaymentBox .graph .index span {display: inline-block; width: 20px; height: 20px; border-radius: 5px;}
.calculatorBox .repaymentBox .graph .index span.rate {margin-left: 5px;}
.calculatorBox .repaymentBox .graph table { height: 100px; border: 0; border-radius: 0;}
.calculatorBox .repaymentBox .graph tr td {padding: 0; text-align: center; border: 0; vertical-align: bottom;}
.calculatorBox .repaymentBox .graph td span { position: relative; display: block; width: 70%; text-indent: -9999px;}
.calculatorBox .repaymentBox .graph span.pay {background-color: var(--primary-navy);}
.calculatorBox .repaymentBox .graph span.rate {background-color: var(--primary-orange);}
.calculatorBox .repaymentBox .left {width: 100%;}
.calculatorBox .repaymentBox .right {width: 100%; display: none;}
.calculatorBox .repaymentBox .box {display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px;}
.calculatorBox .repaymentBox .box tr th {/*  background: none; */ border: none;}
.calculatorBox .repaymentBox .box tr td { border: none; font-size: 13px; letter-spacing: -.5px; padding: 5px 3px;}
.calculatorBox .repaymentBox .box tr.start td { color: var(--primary-navy); font-weight: 700;}
.calculatorBox .repaymentBox .box tr.last td {background-color: var(--primary-navy); color: var(--white); font-weight: 700;}
.calculatorBox .repaymentBox .box tr.cnt6 td {background-color: var(--gray-100); font-weight: 700; color: var(--navy-font);}
/* 유틸리티 - 자동차세 */
.cartaxBox {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 30px 15px;}
.cartaxBox h3 {width: 100%;} 
.cartaxBox .desc {font-size: 12px; font-weight: 500; color: var(--gray-500)}
.cartaxBox .taxPayBox { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; padding: 15px; border: 1px solid var(--gray-300); background-color: var(--bg-white); border-radius: 15px;}
.cartaxBox .baseBox {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; padding: 15px; border: 1px solid var(--gray-300); background-color: var(--bg-white); border-radius: 15px;}
.cartaxBox .baseBox .box > div:not(.hide) { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; margin-top: 5px;}
.cartaxBox .baseBox .box {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px;}
.cartaxBox .baseBox .basicCar {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px;}
.cartaxBox .paymentBox {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px; padding: 15px; border: 1px solid var(--gray-300); background-color: var(--bg-white); border-radius: 15px;}
.cartaxBox .paymentBox > div { width: 100%;} 
.cartaxBox .paymentBox > div h3 { margin-bottom: 10px;} 
.cartaxBox .paymentBox > div .desc { margin-top: 10px;} 
/* 유틸리티 - 개별소비세 계산기 */
.consumptionTax {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px;}
.consumptionTax .tableBox {padding: 15px; border: 1px solid var(--gray-300); background-color: var(--bg-white); border-radius: 15px;}
.consumptionTax .controlBox.btn .box .set {justify-content: center;}
.consumptionTax .controlBox.btn .box .set .title {width: 40px;}
.consumptionTax .controlBox.btn .box .set .btnRadio {width: 100%; justify-content: center;}
.consumptionTax .controlBox.btn .box .top {width: 100%;}
.consumptionTax .controlBox.btn .box .btnRadio {width: 100%;}
.consumptionTax .controlBox.btn .box.resultBox .result {padding: 0;}
.consumptionTax .controlBox.btn .box.resultBox .result.pmt {padding: 10px;}
.consumptionTax .controlBox.btn .box.resultBox .result.pmt .sumBox .gap { font-size: 12px; font-weight: 400; color: var(--gray-400); margin-right: 5px;}
.consumptionTax .controlBox.btn .box.resultBox .result.pmt .sumBox .gap span {color: var(--gray-400);} 
.consumptionTax .descBox dl > div {width: 33.3%}
/* 유틸리티 - 전기차보조금 */
.electricBox {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 30px; color: var(--main-font);}
.electricBox .buttonBox a {max-width: 150px;}
.electricBox .elecTable {padding: 15px; border: 1px solid var(--gray-300); background-color: var(--bg-white); border-radius: 15px;}
.electricBox .elecTable h3 {margin-bottom: 10px;}
.electricBox .elecTable .title {display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 10px;}
.electricBox .elecTable .title span { position: relative; color: var(--gray-500); font-size: 12px; font-weight: 500;}
.electricBox .elecTable .title span::after {content: ' : 만원';}
.electricBox .elecTable .tableBox table tbody tr td:hover {background-color: var(--gray-100); color: var(--main-font);}
@media screen and (min-width:420px){
    .controlBox .box .set:not(.hide) {width: 50%;}
    .calculatorBox[calLen='2'] .controlBox .box .set:not(.hide) {width: 100%;}
    .controlBox.btn .box .set {width: 100%;}
}

@media screen and (min-width:600px){
    .controlBox.btn .condition:not(.hide) {flex-direction: row;}
    .controlBox.btn .box .set {width: calc(50% - 7.5px);}
    .controlBox.btn .box .set .title {text-align: left;}
    .controlBox .box .top {width: 100%;}
    .controlBox .box .btnCheck{ width: auto; padding: 0; position: absolute; top: 15px; right: 15px; justify-content: flex-end;}
}
@media screen and (min-width:800px){
    .wrapper[path^="utility"] .descBox {gap: 0;}
    .wrapper[path^="utility"] .descBox dl {gap: 0;}
    .wrapper[path^="utility"] .descBox dl > div {flex-direction: row; align-items: baseline; padding: 10px 0; gap: 0; }
    .wrapper[path^="utility"] .descBox dl > div dt {width: 5%;}
    .wrapper[path^="utility"] .descBox dl > div dd {width: 95%;}
    .wrapper[path^="utility"] .consumptionTax .descBox dl dt { width: 12%; } 
    .wrapper[path^="utility"] .consumptionTax .descBox dl dd { width: 88%; }
    .controlBox .box {width: calc(65% - 7.5px);}
    .controlBox .box.resultBox {width: calc(35% - 7.5px);}
    .controlBox .box .set:not(.hide) {width: 33.3%;}
    .controlBox.btn .box .set:not(.hide) {width: 50%;}
    .controlBox .box .set .title {text-align: center;}
    .controlBox .box.resultBox .result.pmt .sum {font-size: 22px;}
    .calculatorBox .repaymentBox .left {width: calc(50% - 5px);}
    .calculatorBox .repaymentBox .right {width: calc(50% - 5px); display: block;}
    .calculatorBox .repaymentBox .graph td span.pay.zero::after {content: unset;}
    .cartaxBox {flex-direction: row; flex-wrap: wrap;}
    .cartaxBox .baseBox, .cartaxBox .paymentBox {width: calc(50% - 7.5px);}
    .cartaxBox .baseBox .box {flex-direction: row; flex-wrap: wrap;}
    .consumptionTax .controlBox.btn .box .set:not(.hide) {width: calc(50% - 7.5px);}
    .calculatorBox[calLen='2'] .controlBox .box .set:not(.hide) {width: 50%;}
    .calculatorBox[calLen='2'] .controlBox .box, .calculatorBox[calLen='3'] .controlBox .box {width: 100%;}
    .calculatorBox[calLen='2'] .repaymentBox .graph td span.pay::after, .calculatorBox[calLen='3'] .repaymentBox .graph td span.pay::after {content: unset;} 
    .calculatorBox[calLen='2'] .repaymentBox .left, .calculatorBox[calLen='3'] .repaymentBox .left {width: 100%;}
    .calculatorBox[calLen='2'] .repaymentBox .right, .calculatorBox[calLen='3'] .repaymentBox .right {width: 100%;}
    .electricBox .buttonBox {justify-content: flex-end;}
}
/* 대행사 / 고객센터 */
.supportBox {display: flex; flex-wrap: wrap; gap: 15px;} 
.supportBox .csResult {width: 100%;}
.supportBox .filterBox .choice {padding-top: 0;}
.partnerBox {border-radius: 10px; border: 1px solid var(--gray-300); overflow: hidden; width: 100%;}
.partnerBox .index {display: none; flex-direction: row; flex-wrap: nowrap; background-color: var(--gray-50); justify-content: flex-start; align-items: center; padding: 15px 10px; border-radius: 10px 10px 0 0; border-bottom: 1px solid var(--gray-300); color: var(--gray-500);}
.partnerBox .listBox { width: 100%; background-color: var(--bg-white);}
.partnerBox .listBox li:not(.nodata) {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; padding: 10px; border-bottom: 1px solid var(--gray-300); word-break: keep-all;}
.partnerBox .listBox li:last-child { border-bottom: 0;}
.partnerBox .listBox li span {color: var(--main-font);}
.partnerBox .listBox li .title {width: 100%; } 
.partnerBox .listBox li .sigungu {width: 100%; }
.partnerBox .listBox li .link { display: inline-block; padding: 3px 9px; background-color: var(--primary-navy); font-size: 12px; color: var(--white); border: 1px solid var(--primary-navy); border-radius: 7px;}
.partnerBox .listBox li .note {color: var(--gray-500); font-size: 12px; white-space: pre-wrap;}
.partnerBox.agency .box {display: flex; flex-wrap: wrap;}
.partnerBox.agency .box .service {width: 100%; text-align: center; display: flex; align-items: center;}
.partnerBox.agency .box .service .title {width: 30%; padding: 10px; display: flex; align-items: center; justify-content: center; height: 100%; background-color: var(--bg-white); color: var(--main-font); border: 1px solid var(--gray-300); border-left: 0; border-top: 0;}
.partnerBox.agency .box .service:last-child .title {border-bottom: none;}
.partnerBox.agency .box .service:last-child .listBox {border-bottom: none;}
.partnerBox.agency .listBox {border: none; width: 70%;}
.partnerBox.agency .listBox:last-child {border-bottom: 1px solid var(--gray-300);}

@media screen and (min-width: 600px){
    .partnerBox .index {display: flex; text-align: center;}
    .partnerBox .index .title {width: 30%;}
    .partnerBox .index .phone { width: 35%;}
    .partnerBox .index .note {width: 35%;}
    .partnerBox .index .sigungu {width: 30%;}
    .partnerBox .index .name {width: 35%;}
    .partnerBox .listBox li span {text-align: center;}
    .partnerBox .listBox li .title {width: 30%;}
    .partnerBox .listBox li .phone { width: 35%;}
    .partnerBox .listBox li .note {width: 35%;}
    .partnerBox .listBox li .sigungu {width: 30%;}
    .partnerBox .listBox li .name {width: 35%;}
    .partnerBox .listBox li .note {color: var(--main-font); font-size: 14px;}
    .partnerBox.agency .box .service span {width: 35%;}
    .partnerBox.agency .listBox li .name {width: 50%;}
    .partnerBox.agency .listBox li .phone {width: 50%;}
}

/* 내 정보 */
.myinfoBox {display: flex; flex-direction: column; gap: 50px;}
.myinfoBox .infoCard .myPhoto {display: flex; gap: 10px; align-items: center;}
.myinfoBox .infoCard .myPhoto img {width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--gray-300);}
.myinfoBox .buttonBox {margin-top: 30px; justify-content: center;}
.myinfoBox .buttonBox button { max-width: 150px;}
.myinfoBox .pwSection {margin-top: 20px;}
.myinfoBox .pwSection > button { position: relative; width: 100%; font-size: 16px; font-weight: 700; margin-bottom: 10px; text-align: left;} 
.myinfoBox .passwdForm .field + .field { margin-top: 20px;}
.myinfoBox .passwdForm .field .label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 500;}
.myinfoBox .passwdForm .field .inputWrap { position: relative;}
.myinfoBox .passwdForm .inputWrap {width: 100%;}
.myinfoBox .passwdForm input {padding: 12px;}
.myinfoBox .passwdForm .buttonBox {margin-top: 40px;}
.myinfoBox .passwdForm .pwToggle {content: '';  position: absolute; top: 50%; right: 15px; transform: translateY(-50%); width: 30px; height: 30px; background: url(../images/icons/visibility_off.svg) no-repeat center; background-size: 70%; font-size: 0; text-indent: -9999px;}
.myinfoBox .passwdForm .pwToggle.on {content: '';  position: absolute; top: 50%; right: 15px; transform: translateY(-50%); width: 30px; height: 30px; background: url(../images/icons/visibility.svg) no-repeat center; background-size: 70%; font-size: 0; text-indent: -9999px;}
.myinfoBox .passwdForm .hint {font-size: 12px; margin-left: 10px; color: var(--primary-orange);}

/* 구매가이드 매뉴얼 */
.manualBox {word-break: keep-all; background-color: var(--bg-white); padding: 15px; border-radius: 15px;}
.manualBox section {margin: 15px 0;}
.manualBox h3 { font-size: 20px; padding: 10px;} 
.manualBox h4 {font-size: 18px; margin-bottom: 15px;}
.manualBox h5 { font-size: 16px; margin: 10px 0; }
.manualBox h6 { font-size: 15px; margin: 10px 0; }
.manualBox p {color: var(--gray-500); line-height: 1.8;}
.manualBox b {color: var(--main-font);}
.manualBox img {border-radius: 2px;}
.manualBox a {text-decoration: underline; font-weight: 500;}
.manualBox [class^="highLight-"] {width: fit-content; font-weight: 700; padding: 0 4px; border-radius: 1px; }
.manualBox [class^="highLight-"] b {color: #333;}
.manualBox .highLight-yellow {background-color: #FFF59C; color: #333;}
.manualBox .highLight-orange {background-color: #FFDAB1; color: #333;}
.manualBox .highLight-green {background-color: #CFF5B7; color: #333;}
.manualBox .listBox {padding: 0 0 15px 15px;}
.manualBox .listBox h6 {margin: 0 0 5px 0;}
.manualBox .listBox p {line-height: 1.5; margin: 5px;}
.manualBox .manualList ul {display: flex; flex-direction: column; flex-wrap: nowrap;}
.manualBox .manualList ul li {color: var(--gray-500); line-height: 1.8;}
.manualBox .manualList ul li[class^="highLight-"] {color: #333;}
.manualBox .manualList ul li[class^="highLight-"] b {color: #333;}
.manualBox .manualList ul:not(:last-child), .manualBox .manualList ol:not(:last-child) {margin-bottom: 10px;}
.manualBox .summaryBox { text-align: left; padding: 15px; border: 2px solid #BCCDA1; border-radius: 10px; margin: 15px 0; }
.manualBox .summaryBox p {line-height: 1.5; margin: 5px 0;}
.manualBox .summaryBox h5 {margin: 0;}
.manualBox .summaryBox.tip { border-color: #C3D3E3;}
.manualBox .summaryBox.alert { border-color: #CD8D80;}
.manualBox .tableBox {margin: 15px 0;}
.manualBox .tableBox table .title td { background-color: var(--gray-50);}
.manualBox .photo {text-align: center;}
.manualBox .photo .caption {color: var(--gray-500); font-size: 13px; }
.manualBox .file {padding: 0 15px;}
.manualBox .file a { color: var(--primary-blue); font-weight: 500; text-decoration: underline; }
.manualBox .file:before {content:"[파일]"; font-weight: 500; margin-right: 5px; font-size: 13px; color: var(--main-font);}
.manualBox .youtube { position: relative; width: 100%; padding-bottom: 75%; margin-bottom: 60px; margin-top: 20px; overflow: hidden;}
.manualBox .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.manualBox .youtube .caption { position: absolute; width: 100%; bottom: -30px; left: 0; text-align: center; }

/* 견적 예외처리 */ 

/* 토글 버튼 */
.switchBox {margin-right: 10px;}
.switchBox label { display: flex; align-items: center; gap: 5px; } 
.switchBox .switch { width: 40px; height: 18px; background: var(--gray-300); border-radius: 30px; position: relative; cursor: pointer; transition: background 0.3s; } 
.switchBox .switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--white); border-radius: 50%; transition: transform 0.3s; } 
.switchBox input:checked ~ .switch { background-color: var(--primary-orange); } 
.switchBox input:checked ~ .switch::before { transform: translateX(22px); } 
.switchBox .text { display: inline-block; white-space: nowrap; padding: 0; color: var(--gray-500);} 
.switchBox input:checked ~ .text { color: var(--primary-orange); font-weight: 700;}
.switchBox input[type="checkbox"] + span::before { display: none;}
.switch::after { content: "OFF"; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: 10px; color: var(--gray-500); opacity: .5; transition: all .3s;}
.switchBox input:checked ~ .switch::after { content: "ON"; left: 6px; right: auto; color: var(--white); opacity: 1;}

/* 견적 공통 */
.mainTop .swipeButton button, .mainTop .estmHead button {position: fixed; width: 60px; height: 60px; bottom: 20px; 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%;}
button.diff {width: 40px; height: 40px; background: url(../images/icons/icon_diff_line.svg) no-repeat center; background-size: 60%; z-index: 10; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
button.diff.dis {background: url(../images/icons/icon_diff_dis.svg) no-repeat center; background-size: 60%; }
button.diff.on {background: url(../images/icons/icon_diff_on.svg) no-repeat center; background-size: 60%; }
button.checked {width: 40px; height: 40px; background: url(../images/icons/icon_check_line.svg) no-repeat center; background-size: 60%; z-index: 10; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
button.checked.on {background: url(../images/icons/icon_check_on.svg) no-repeat center; background-size: 60%; }
button.checked.dis {background: url(../images/icons/icon_check_dis.svg) no-repeat center; background-size: 60%;}
.estmCell .vehicle.open .choice .box li.on .tab button {white-space: nowrap;}
.wrapper[path="model_compare"] .modelList li button .car {padding: 15px 10px 10px 10px;}
.wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .estmCount {display: none;}
.wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .mainTop .searchBoxForm, .wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .mainTop .addUser {display: none;}
/* .wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .mainTop .right button:not(.menuBtn), .wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .mainTop .right .switchBox {display: none;} */
.wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .brandCont {gap: 10px; flex-wrap: nowrap;}
.wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .brandList {gap: 10px;}
.wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .estmCell .vehicle .choice .box li .cont .title { border: 0; border-top: 1px solid var(--gray-300); width: 100%; border-radius: 0; padding: 10px; text-align: left;}
.wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"])[path^="estimate"] .brandList li, .wrapper[path$="compare"] .brandList li {width: calc(25% - 7.5px);}
.wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .brandList li button {border-color: transparent;}
.wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .brandList li button .name {color: var(--gray-500);}
.wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .brandList li.on button {border-color: var(--primary-orange); background-color: var(--orange-100);}
.wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .brandList li.on button .name {color: var(--primary-orange);}
.wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .modelList {gap: 15px; width: 100%; align-items: stretch;}
.wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"])[path^="estimate"] .modelList li, .wrapper[path$="compare"] .modelList li {width: calc(25% - 12.5px);}
.wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .modelList li button, .wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .modelList li a { border-color: transparent; flex-direction: column; align-items: center; justify-content: flex-start; padding: 5px;}
.wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .modelList li.on button {border-color: var(--primary-orange); background-color: var(--orange-100);}
.wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .modelList li.on button .name {color: var(--primary-orange);}
.wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .modelCont {gap: 0; flex-wrap: nowrap;}
.wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .modelCont .modelList li button .name, .wrapper:is([path="estimate_finance"], [path="estimate_leaserent"], [path="model_compare"]) .modelCont .modelList li a .name { color: var(--gray-500); font-size: 13px; text-align: center;}
.wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .modelList li button .car img, .wrapper:is([path="estimate_finance"], [path="estimate_leaserent"],[path="model_compare"]) .modelList li a .car img {max-width: 100%;}
/* 옵션 목록 */ 
.wrapper.work .optionList {gap: 10px;}
.wrapper.work .optionList li button .data::after, .optionList li label .data::after { content: ''; display: block; clear: both;}
.wrapper.work .optionList li { width: 100%; position: relative; }
.wrapper.work .optionList li button, .wrapper.work .optionList li label { width: 100%; position: relative; display: block; text-align: left; border-radius: 10px; padding: 10px 10px 20px 40px; border-color: transparent;}
.wrapper.work .optionList li button .data, .wrapper.work .optionList li label .data {position: relative; display: block; }
.wrapper.work .optionList li button .data .name, .wrapper.work .optionList li label .data .name { font-size: 13px; display: inline; font-weight: 400; text-align: left; vertical-align: middle; }
.wrapper.work .optionList li button .data .price, .wrapper.work .optionList li label .data .price {  float: right; padding-left: 20px; white-space: nowrap; font-weight: 700; font-size: 14px;}
.wrapper.work .optionList li button .info, .wrapper.work .optionList li label .info { color: var(--gray-500); text-align: left; font-size: 13px; letter-spacing: -.1px; }
.wrapper.work .optionList li button .data .icons {position: unset;}
.wrapper.work .optionList li.dis button {background-color: var(--gray-100); opacity: .7; }
.wrapper.work .optionList li.dis button::before {display: none;}
.wrapper.work .optionList li.dis button::after { position: absolute; right: 10px; bottom: 5px; font-size: 12px; color: var(--navy-font);}
.wrapper.work .optionList li.dis button {padding: 10px 10px 20px 40px;}
.wrapper.work .optionList li.dis[dis='sub'] button::after, .wrapper.work .optionList li.dis[dis='sub'] label::after { content: '연계된 옵션 선택 필요';}
.wrapper.work .optionList li.dis[dis='sub2'] button::after, .wrapper.work .optionList li.dis[dis='sub2'] label::after { content: '선택된 옵션 선택 필요';}
.wrapper.work .optionList li.dis[dis='anti'] button::after, .wrapper.work .optionList li.dis[dis='anti'] label::after { content: '선택된 옵션 조합 불가';}
.wrapper.work .optionList li.dis[dis='intNot'] button::after, .wrapper.work .optionList li.dis[dis='intNot'] label::after { content: '선택된 내장 조합 불가';}
.wrapper.work .optionList li.dis[dis='extNot'] button::after, .wrapper.work .optionList li.dis[dis='extNot'] label::after { content: '선택된 외장 조합 불가';}
.wrapper.work .optionList li.default button {padding-bottom: 20px; }
.wrapper.work .optionList li.default button::after { position: absolute; right: 10px; bottom: 5px; font-size: 12px; color: var(--primary-blue); content: '필수 선택 옵션';}
.wrapper.work .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);}
.wrapper.work .discountList {padding: 0; }
/* 색상 선택*/
.wrapper.work .estmBar.colorExt .btn button .choiced .data .name, .wrapper.work .estmBar.colorInt .btn button .choiced .data .name {width: 65%; text-align: left;}
.wrapper.work .estmBar .btn button .choiced .data .colorChip { position: relative; display: flex; flex-direction: column; padding-right: 5px;}
.wrapper.work .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%;}
.wrapper.work .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;}
.wrapper.work .estmSelf .buttonBox {width: auto;}
.wrapper.work .discountList > li .sub li button {border: none;}
.wrapper.work .colorList { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px;}
.wrapper.work .colorList li {width: 100%; position: relative;}
.wrapper.work .colorList li button {position: relative; align-items: center; width: 100%; flex-wrap: nowrap; padding: 10px 10px 15px 10px; border: 1px solid transparent; border-radius: 10px;}
.wrapper.work .colorList li.on button {background-color: var(--orange-100); border: 1px solid var(--primary-orange);}
.wrapper.work .colorList li.on button .name, .wrapper.work .colorList li.on button .price {color: var(--primary-orange)}
.wrapper.work .colorList li button .colorChip { position: relative; display: flex; flex-direction: column;}
.wrapper.work .colorList li button .colorChip .colorMain {position: relative; display: inline-block; width: 36px; height: 36px; border: 1px solid var(--gray-300); border-radius: 50%;}
.wrapper.work .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;}
.wrapper.work .colorList li button .colorPrice { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; align-items: baseline; width: 100%; }
.wrapper.work .colorList li button .name {width: 100%; text-align: left; padding-left: 10px; font-size: 13px;}
.wrapper.work .colorList li button .price {font-weight: 700; padding-left: 10px; width: auto;}
.wrapper.work .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;}
.wrapper.work .colorList li.dis button { background-color: var(--gray-100); opacity: .7;}
.wrapper.work .colorList li.dis button::after { position: absolute; right: 10px; bottom: 0; font-size: 12px; color: var(--navy-font); }
.wrapper.work .colorList li.dis[dis='optionJoin'] button::after { content: '연계된 옵션 선택 필요'; }
.wrapper.work .colorList li.dis[dis='optionNot'] button::after { content: '선택된 옵션 선택 필요'; }
.wrapper.work .colorList li.dis[dis='intNot'] button::after { content: '선택된 내장 조합 불가'; }
.wrapper.work .colorList li.dis[dis='extNot'] button::after { content: '선택된 외장 조합 불가'; }
.wrapper.work .colorList li button .icons { position: unset; display: inline-block; vertical-align: middle; }
.wrapper.work .colorList li.dis button .icons { display: inline-block; }
.wrapper.work .colorList li.state3::after {content: "재고 한정"; position: absolute; top: 1px; 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);}
/* 등록/부대비용  */
.wrapper.work .estmData {border-radius: 0; border-bottom: 1px solid var(--gray-300); border-top: 0;}
/* 금융리스트 */
.wrapper.work .confComp {gap: 0;}
.wrapper.work .confComp .comp {display: block; width: 100%; overflow: visible;}
.wrapper.work .confComp .config {width: 100%;}
.wrapper.work .compList {flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 0; padding-bottom: 0; }
.wrapper.work .compList li {position: relative; padding: 0; border-radius: 0; flex: unset; height: auto; border: 0;}
.wrapper.work .compList li:last-child {border-bottom: none;}
.wrapper.work .compList li > button { position: relative; padding: 62px 10px 27px 10px; border-bottom: 1px solid var(--gray-300);}
.wrapper.work .compList li.failure > button { border: 0;}
.wrapper.work .compList li:not(.failure).on {border: 1px solid var(--primary-orange); }
.wrapper.work .compList li .rank {transform: unset; top: 10px; left: 10px; font-size: 18px; }
.wrapper.work .compList li .logo { position: absolute; top: 33px; left: 10px; display: flex; align-items: center; margin-top: auto;} 
.wrapper.work .compList li .logo img {position: unset; transform: unset;}
.wrapper.work .compList li .logo .company { font-size: 14px; position: unset;}
.wrapper.work .compList li .price { left: unset; top: 30px; font-size: 18px;}
.wrapper.work .compList li .price .sub { font-weight: 400; font-size: 12px; padding-right: 5px; color: var(--gray-500);}
.wrapper.work .compList li .info {position: unset;}
.wrapper.work .compList li .gap {left: unset;}
.wrapper.work .compList li.failure > div {padding: 40px 10px 30px 10px;}
.wrapper.work .compList li.failure .logo {top: 10px; left: 7px;}
.wrapper.work .compList li .fold {display: block;}
.wrapper.work .compList li .help {top: unset; right: unset;}
.wrapper.work .compList li.folding {height: 30px;}
.wrapper.work .compList li.folding .fold {height: 30px;}
.wrapper.work .compList li.none .title:not(.hide) {font-size: 14px; gap: 5px; padding-bottom: 10px;}
.wrapper.work .compList.fincStep li > button {padding: 45px 10px 27px 10px;}
.wrapper.work .compList.fincStep li .price, .wrapper.work .compList.fincStep li .logo {top: 13px;}
.wrapper.work .compList li:last-child > button{border-bottom: 0;}
/* 업종순 예외처리 */
.wrapper.work .compList.fincComp li.orderS > button {padding: 45px 10px 27px 10px;}
.wrapper.work .compList li.failure .info {position: absolute; top: 17px; right: 10px; text-align: right;}
.wrapper.work .compList.fincComp li.failure .name {position: unset; text-align: left;}

/* 기존 estimate 예외처리 */
.compList li:not(.failure) > button::before {top: 2px; left: 25px;}
.estmSub.data label:not(:last-child) {margin-right: 10px;}
.estmCell .subList li button .price {margin-left: 5px;}
.purchaseBox .purchaseCont .fincCell .config.open.notUp {border-bottom: 0;}
.fincCell .notice {font-size: 13px;}
.lineupList li button .name {font-size: 14px;}
/* .wrapper.work .estmCell .vehicle .modelList li button, .wrapper.work .estmCell .vehicle .modelList li a {gap: 5px;}

/* 견적서 영역 */
.wrapper.work .estmDocu .buttonBox {justify-content: center;}
.wrapper.fixed .estmCell .vehicle .choice {max-width: 1360px;}
.wrapper:not([path="desk_work"]).work.wide .inner {max-width: 100%;}
.estmDocu .workbox button {/* background-color: var(--primary-navy); border-color: var(--primary-navy);  */font-size: 13px;}
.estmDocu .btnRadio label input[type="radio"] + span {min-height: auto; padding: 4px 8px;}
.estmDocu .btnRadio label input[type="radio"]:checked + span {border-color: var(--primary-orange); color: var(--primary-orange); background-color: transparent;}
.estmCell .vehicle .modelList li.state3::after {font-size: 10px;}
/* 견적서 편집 */
.popup .content .popupForm .list li .data {min-height: 34px;}
.popup .content .popupForm .list li .data a { font-size: 12px; background-color: var(--gray-bg-color); border: 1px solid var(--gray-bg-color); padding: 3px 9px; border-radius: 5px; font-weight: 500;}
.popup .content .popupForm .list li .data a:first-child {margin-left: auto;} 
/* 견적 대행사 */
.popup .content .partnerBox {font-size: 14px;}
.popup .content .partnerBox .listBox li:last-child {padding-bottom: 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(--line-color); border: 1px solid var(--line-color); padding: 3px 9px; border-radius: 5px; font-weight: 500;}
@media screen and (min-width: 600px) {
    #formEstmSave dl .data.connectBox { padding-right: 0 !important;}
}

@media screen and (min-width: 1900px) {
    .wrapper.fixed.wide .estmCell .vehicle .choice { width: calc(60% - 23px - 7.5px);}
}


/* 저장 견적 */
.wrapper[path="estimate_save"] .filterBox .choice {padding-top: 0;}
.wrapper[path="estimate_save"] .popup .content dl .data dd .starBox button {width: 35px; height: 35px; background: url(../images/icons/icon_star_outline.svg) no-repeat center; background-size: 70%;}
.wrapper[path="estimate_save"] .popup .content dl .data dd .starBox button.on {background: url(../images/icons/icon_star_on.svg) no-repeat center; background-size: 70%;}
.wrapper[path="estimate_save"] .popup .content dl.editBox .data dd .cancel { position: absolute; top: -30px; right: 0; width: 30px; height: 30px; background: url(../images/icons/icon_reload.svg) no-repeat center; background-size: 65%; font-size: 0; text-indent: -9999px;}
.wrapper[path="estimate_save"] .popup .content .saveDesc .listBox {overflow-y: auto; max-height: 200px; border: 2px solid var(--gray-300); border-right: 0; border-left: 0; margin: 10px 0; }
.wrapper[path="estimate_save"] .popup .content .saveDesc .listBox::-webkit-scrollbar {display: none;}
.wrapper[path="estimate_save"] .popup .content .saveDesc .listBox li {position: relative;}
.wrapper[path="estimate_save"] .popup .content .saveDesc .listBox li:last-child {padding-bottom: 10px;}
.wrapper[path="estimate_save"] .popup .content .saveDesc .listBox .subj {display: block;}
.wrapper[path="estimate_save"] .popup .content .saveDesc .listBox .subj b {width: 100%;}
.wrapper[path="estimate_save"] .popup .content .saveDesc .listBox .subj .other {display: flex; flex-direction: row; flex-wrap: wrap; gap: 0 10px;}
.wrapper[path="estimate_save"] .popup .content .saveDesc .listBox .desc {font-size: 12px;}
.wrapper[path="estimate_save"] .popup .content .saveDesc .listBox .date {width: auto; position: absolute; top: 10px; right: 10px;}
.wrapper[path="estimate_save"] .popup .content .saveDesc > .desc { text-align: center; font-weight: 700; color: var(--primary-navy); border: 1px solid var(--primary-navy); border-radius: 10px; padding: 10px; }
.estListBox .blockWork { padding: 0 10px; margin: 0;}
.estListBox {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px;} 
.estListBox .viewBox .data dd {justify-content: space-between;}
.estListBox .viewBox .data dd a {padding: 3px 9px; color: var(--white); font-size: 12px; font-weight: 600; border-radius: 5px; background-color: var(--primary-navy);}
.estListBox .viewBox .data dd .starBox {margin-left: auto;}
.estListBox .viewBox .data dd .date {font-size: 12px; color: var(--gray-500); margin-left: auto;} 
.estListBox .EstimateList { display: flex; flex-direction: row; flex-wrap: wrap; gap: 15px}
.estListBox .EstimateList li {position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; width: 100%; border: 1px solid var(--gray-300); background-color: var(--bg-white); border-radius: 10px;}
.estListBox .EstimateList li .group { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.estListBox .EstimateList li .group .selBox {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 5px; background-color: var(--primary-navy); padding: 7px 10px; border-radius: 10px 10px 0 0; }
.estListBox .EstimateList li .group .selBox .title { color: var(--white);font-size: 13px;}
.estListBox .EstimateList li .group .selBox .type {color: var(--white); font-size: 12px;}
.estListBox .EstimateList li .group .info {padding: 0 10px 10px 10px; display: block; text-align: center; border-bottom: 1px solid var(--gray-300); color: var(--main-font);}
.estListBox .EstimateList li .group .info > b {display: block; margin-bottom: 5px;}
.estListBox .EstimateList li .group .info .phone {color: var(--gray-500);}
.estListBox .EstimateList li .group .detail {padding: 0 10px; font-size: 13px;}
.estListBox .EstimateList li .group .detail .trim { font-weight: 500; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.estListBox .EstimateList li .group .detail .title { color: var(--main-font); font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.estListBox .EstimateList li .group .detail .finc {font-size: 12px; color: var(--gray-400); font-weight: 500; margin-top: 5px;}
.estListBox .EstimateList li .group .dirs { font-weight: 500; font-size: 13px; color: var(--main-font); padding: 0 10px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.estListBox .EstimateList li .box { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; padding: 5px 10px; min-height: 30px;}
.estListBox .EstimateList li .box .date {font-size: 12px; color: var(--gray-500);}
.estListBox .EstimateList li .box .etc {display: flex; align-items: center; gap: 5px;}
.estListBox .EstimateList li .box em {font-size: 12px; font-weight: 400;}
.estListBox .EstimateList li .box .starBox span {width: 18px; height: 18px;} 
.estListBox > .buttonBox {margin-bottom: 30px; justify-content: center;}
.estListBox .buttonBox.estm {margin-top: 15px; justify-content: center;}


@media screen and (min-width: 600px) { 
    .estListBox .EstimateList li {width: calc(50% - 7.5px);} 
    .estListBox .EstimateList li .group .info { min-height: 74px;}
    .estListBox > .buttonBox button {max-width: 150px;}
    .estListBox > .buttonBox .gray {background-color: var(--gray-200);}
}  

@media screen and (min-width: 1000px) { 
    .estListBox > .buttonBox {margin-bottom: 50px;}
    .estListBox .EstimateList li { width: calc(25% - 11.25px); }
}