@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
:root {
    --primary-navy: #223B49;
    --primary-darknavy: #1E323D;
    --primary-lightnavy: #24516B;
    --primary-orange: #F37B2C;
    --primary-darkorange: #EC6A2A;
    --primary-blue: #3A80F2;
    --primary-red: #EF4444;
    --main-font: #333333; 
    --navy-font: #223B49;  
    --bg-white: #FFFFFF;
    --white: #FFFFFF;
    --bg: #F3F4F6;
    --gray-50: #F8FAFC;
    --gray-100: #F1F3F5;
    --gray-200: #E5E8EB;
    --gray-300: #E5EAF1;   
    --gray-400: #9CA3AF;   
    --gray-500: #6B7280;   
    --orange-100: #FFF7ED;   
    --orange-200: #FFE8CC;   
    --orange-300: #FDEBE0;
    --dim-rgb: rgba(0,0,0,0.6); 
}

.dark { 
    --bg: #181A1F;
    --bg-white: #1F2228;
    --gray-50: #23262C;
    --gray-100: #2A2E35;
    --gray-200: #30353D;
    --gray-300: #2E3035; 
    --gray-400: #8C939D;
    --gray-500: #B4BAC2;
    --main-font: #E4E6E9;
    --primary-orange: #D97732;
    --primary-darkorange: #C96B2C; 
    --primary-navy: #2E3F4A;
    --primary-darknavy: #273742;
    --primary-lightnavy: #3C5563;
    --navy-font: #93A4B2;
    --orange-100: #2F2522;   
    --orange-200: #372C26;   
    --orange-300: #41332C;
    --primary-blue: #4C7FD9;
    --primary-red: #E06666;
} 

/* 
.dark { 
    --bg: #1C1F25;
    --bg-white: #1A1C21;
    --gray-50: #24272D;
    --gray-100: #2F333B;
    --gray-200: #3A3F4A;
    --gray-300: #2A2D35; 
    --gray-500: #A5A7AB;
    --main-font: #F5F6F7;
    --primary-orange: #C56424;
    --primary-darkorange: #C16225; 
    --primary-navy: #3A4B5A;
    --primary-darknavy: #445D6E;
    --primary-lightnavy: #5E6F7C;
    --navy-font: #6F8291;
    --orange-100: #333037;   
    --orange-300: #423430;
} 
    
D7D6D4
--primary-navy: #1E293B;
--primary-darknavy: #334155;
--gray-50: #E5E8EC;
--bg: #F6F6F6;
--gray-50: #EEEEEE;
--gray-100: #E2E2E2;
--gray-200: #CDD1D8; 

:root {
    --primary-navy: #223B49;
    --primary-darknavy: #1E323D;
    --primary-lightnavy: #24516B;
    --primary-orange: #F37B2C;
    --primary-darkorange: #EC6A2A;
    --primary-blue: #3A80F2;
    --primary-red: #EF4444;
    --main-font: #333333; 
    --navy-font: #1E293B;  
    --black: #000000;
    --bg-white: #FFFFFF;
    --white: #FFFFFF;
    --bg: #F1F3F5;
    --gray-50: #D7D6D4;
    --gray-100: #DADDE3;
    --gray-200: #CDD1D8;
    --gray-300: #E5EAF1;   
    --gray-400: #9CA3AF;   
    --gray-500: #6B7280;   
    --orange-100: #FFF7ED;   
    --orange-200: #FFE8CC;   
    --orange-300: #FDEBE0;
    --dim-rgb: rgba(0,0,0,0.6); 

}
    */


/* .dark { 
    --bg: #26272B;
    --bg-white: #2F3238;
    --gray-50: #373B43;
    --gray-100: #4B4D52;
    --gray-200: #2A2B2E;
    --gray-300: #3F4248; 
    --gray-500: #A5A7AB;
    --main-font: #F5F6F7;
    --primary-orange: #C56424;
    --primary-darkorange: #C16225; 
    --primary-navy: #373B43;
    --primary-darknavy: #2A3C4C;
    --primary-lightnavy: #373B43;
    --navy-font: #A2B8CE;
    --orange-100: #333037;   
    --orange-300: #423430;
} */

/* 공통 요소 */
* { box-sizing: border-box; }
html { width: 100%; height: 100%; margin: 0; padding: 0; scroll-behavior: smooth;}
body { height: 100%; margin: 0; padding: 0; font-size: 14px; line-height: 1.5; font-weight: 400; background-color: var(--bg); 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 { color: var(--primary-orange); 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); }
form { margin-bottom: 0; }
button { padding: 0; border: 0; background: transparent; color: var(--main-font); font-weight: 500; font-size: 14px; line-height: 1.5; cursor: pointer; font-family: 'Pretendard'; transition: all 0.1s; }
input, textarea, select { font-family: 'Pretendard'; font-size: 14px; color: var(--main-font); border-radius: 7px; border: 1px solid var(--gray-100); -webkit-appearance: none; appearance: none;}
input { padding: 8px; background-color: var(--gray-100); width: 100%;}
input[type="text"].price { text-align: right; }
input[type="text"][class^="rate"] { text-align: center; }
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; justify-content: flex-start; 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: url(../images/icons/icon_checkBox_outline.svg) no-repeat center/contain; }
input[type="checkbox"]:checked + span:before { background: url(../images/icons/icon_checkBox_on.svg) no-repeat center/contain; }
input[type="checkbox"]:disabled + span:before { background: url(../images/icons/icon_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: url(../images/icons/icon_radio_outline.svg) no-repeat center/contain; }
input[type="radio"]:checked + span:before { background: url(../images/icons/icon_radio_on.svg) no-repeat center/contain; }
input[type="radio"]:disabled + span:before { background: url(../images/icons/icon_radio_disabled.svg) no-repeat center/contain; }
input[type="date"] { background: var(--gray-100) url(../images/icons/icon_date.svg) no-repeat center right 8px; background-size: 16px; min-height: 30px;}
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
input[type="date"]::-webkit-date-and-time-value {text-align: left;}
input[type="range"] { -webkit-appearance: none; border: none; width: 100%; height: 3px; border-radius: 5px; background-color: var(--gray-100); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 25px; height: 25px; border-radius: 50%; background-color: var(--primary-orange); border: 5px solid var(--primary-orange); cursor: pointer; transition: .3s ease-in-out; }
input[type="range"]::-moz-range-thumb { width: 30px; height: 18px; border-radius: 50%; background-color: var(--primary-orange); cursor: pointer; }
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 0px 1000px transparent inset; box-shadow: 0 0 0px 1000px transparent inset; transition: background-color 5000s ease-in-out 0s; }
input:focus, textarea:focus, select:focus { outline: none; }
textarea { width: 100%; min-height: 100px; padding: 10px;  border-radius: 5px; background-color: var(--gray-100); resize: none;}
textarea::-webkit-scrollbar { display: none; }
select { padding: 8px 24px 8px 8px;  background: var(--gray-100) url(../images/icons/icon_arrow_dropdown.svg) no-repeat center right 2px; appearance: none; cursor: pointer; }
select option { cursor: pointer; }
label { display: inline-block; cursor: pointer; color: var(--main-font);}
.inner { position: relative; max-width: 1200px; padding: 0 15px; margin: 0 auto; }
.hide { display: none; }
.scrollH { overflow-x: auto; }
.wrapper { min-height: 100%; background-color: var(--bg); }
.wrapper .container main .inner { min-height: calc(100vh - 102px);}
img {max-width: 100%; border-radius: 2px;}
.through {opacity: 0.3; text-decoration: line-through;}

@media screen and (min-width: 1900px) {
    .wrapper.wide .inner { max-width: 100%; padding-right: 95px;}
}
/* 공통 - 새창 예외처리  */ 
.wrapper.openTab .header .inner .menuHome {display: none;}
.wrapper.openTab .mainTop {padding: 15px 15px 0 15px;}

@media screen and (min-width: 1000px) {
    .wrapper.openTab .mainTop {padding: 15px 0 0 55px;}
    .wrapper.openTab .header .inner .menuHome {left: 15px;}
}
/* 플로팅메뉴 */
.floatingMenu {position: fixed; background-color: rgba(255, 255, 255, 0.7); width: 60px; border-radius: 10px; right: 15px; bottom: 75px; box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 5px; z-index: 48; }
.floatingMenu ul { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.floatingMenu ul li {width: 100%; height: 60px;}
.floatingMenu ul li button, .floatingMenu ul li a { position: relative; display: flex; flex-direction: column; align-items: center; white-space: nowrap; justify-content: center; width: 100%; height: 100%; padding: 10px; font-size: 10px; border-bottom: 1px solid var(--gray-300);}
.floatingMenu ul li:last-child button, .floatingMenu ul li:last-child a {border-bottom: none;}
.floatingMenu ul li button::before, .floatingMenu ul li a::before { content: ''; top: 13px; width: 24px; height: 24px; background-repeat: no-repeat; background-size: contain; background-position: center;}
.floatingMenu ul li.onlineEst ::before {background-image: url(../images/icons/icon_computer.svg);}
.floatingMenu ul li.call ::before {background-image: url(../images/icons/icon_call_line.svg);}
.floatingMenu ul li.calc ::before {background-image: url(../images/icons/navigation/icon_utility.svg);}
.floatingMenu ul li.like ::before {background-image: url(../images/icons/navigation/icon_newcar.svg);}
.floatingMenu ul li.promotion ::before {background-image: url(../images/icons/icon_promotion.svg);}
.wrapper:not(.mobile) .floatingMenu {width: 70px;}
.wrapper:not(.mobile) .floatingMenu ul li button, .wrapper:not(.mobile) .floatingMenu ul li a {font-size: 12px;}
.wrapper:not(.mobile) .floatingMenu ul li button::before, .wrapper:not(.mobile) .floatingMenu ul li a::before {width: 28px; height: 28px;}
.wrapper[path="estimate_finance"] .floatingMenu, .wrapper[path="estimate_leaserent"] .floatingMenu {bottom: 150px;} 
.wrapper[path="estimate_finance"]:not(.mobile) .floatingMenu,.wrapper[path="estimate_leaserent"]:not(.mobile) .floatingMenu { bottom: 160px;}
/* 플로팅메뉴 - 온라인 견적 */
.onlineEstList ul li {width: calc(33.3% - 6.6px);}
.onlineEstList .btnCapital button, .onlineEstList .btnCapital a {width: 100%; padding: 10px;}
/* 플로팅메뉴 - 프로모션 */
.promotionBox ul {display: flex; flex-wrap: wrap; gap: 15px;}
.promotionBox ul li { position: relative; width: 100%; text-align: left; border-bottom: 1px solid var(--gray-300); padding-bottom: 15px;}
.promotionBox ul li:last-child {border-bottom: none; padding-bottom: 0;}
.promotionBox ul li h3 {position: relative; color: var(--navy-font); padding-left: 15px; }
.promotionBox ul li h3::before {position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 65%; border-radius: 2px; background-color: var(--navy-font);}
.promotionBox ul li .subject {color: var(--gray-500); padding: 10px 0 0 15px; display: block;}
.promotionBox ul li .link {position: absolute; top: 0; right: 0; padding: 3px 9px; background-color: var(--primary-navy); font-size: 12px; color: var(--white); border: 1px solid var(--primary-navy); border-radius: 7px;}
/* 토글 버튼 */
.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;}
/* 로케이션바 */ 
.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;}
/* orderList */
.orderList { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 20px; margin: 15px 0;}
.orderList button {color: var(--gray-400); white-space: nowrap; font-weight: 500; border-bottom: 1px solid transparent;}
.orderList button.on {color: var(--navy-font); font-weight: 700; color: var(--primary-orange); font-weight: 700; border-color: var(--primary-orange);}
/* tooltip */
[data-tooltip]{position:relative; z-index: 1;}
[data-tooltip]:before, [data-tooltip]:after {text-indent: initial; line-height: 1.2; font-size: 11px; pointer-events: none; visibility:hidden; opacity:0; position:absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; transition:all .2s ease; letter-spacing:.5px;}
[data-tooltip]:hover:before {content: attr(data-tooltip); position:absolute; top: -20px; padding: 5px 10px; border-radius:5px; color:var(--white); background-color:var(--primary-navy);}
[data-tooltip]:hover:after {content: ''; border: 7px solid transparent; border-left: 7px solid transparent; top:2px; border-right: 7px solid transparent; border-top: 7px solid var(--primary-navy);}
[data-tooltip]:not([data-tooltip=""]):hover:before{visibility:visible; opacity:1; top:-30px;}
[data-tooltip]:not([data-tooltip=""]):hover:after{visibility:visible; opacity:1; top:-8px;} 
/* 공통 버튼 */
.buttonBox:not(.hide) {width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;}
.buttonBox button, .buttonBox a { color: var(--white); flex: 1; padding: 8px; white-space: nowrap; background-color: var(--primary-orange); border: 1px solid var(--primary-orange); border-radius: 10px; text-align: center; }
.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);}
/* 라인 버튼 */
.buttonBoxLine:not(.hide) {width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; }
.buttonBoxLine button, .buttonBoxLine a { position: relative; color: var(--gray-500); flex: 1; white-space: nowrap; font-weight: 700; text-align: center; padding: 5px;} 
.buttonBoxLine button:not(.hide) + button:not(.hide)::after, .buttonBoxLine a:not(.hide) + a:not(.hide)::after { content: ''; position: absolute; left: 0; top: 50%;  transform: translateY(-50%); width: 2px; height: 40%;  background-color: var(--gray-300);}
/* 즉시출고 버튼 */
.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;}
/* 더 보기 버튼 */
.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: 50%; background-color: var(--primary-navy);} 
/* 숨기기 버튼 */
.btnHide {background: url(../images/icons/icon_visibility.svg) no-repeat center; background-size: 70%; width: 30px; height: 30px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
/* 위로 버튼 */
.btnGoTop {position: fixed; bottom: 15px; right: 15px; width : 40px; height: 40px; background: url(../images/icons/icon_arrow_upward_white.svg) no-repeat center; z-index: 1; background-size: 60%; background-color: var(--black); opacity: .8; border-radius: 50%; font-size: 0; text-indent: -9999px;}
/* 탭 버튼 */
.tabButton {overflow-x: auto;}
.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;}
/* 라디오버튼 */
.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 {padding: 4px 8px; color: var(--gray-500); border: 1px solid var(--gray-300); background-color: transparent; border-radius: 30px; 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: var(--primary-orange); border-color: var(--primary-orange); background-color: var(--orange-100); font-weight: 700;}
/* 라디오버튼 - 견적 색상 예외처리 */ 
.btnRadio.estmColor label input[type="radio"] + span {color: #333;}
.btnRadio.estmColor label input[type="radio"]:checked + span {color: var(--white); font-size: 13px; z-index: 1;}
.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;}
/* 체크박스버튼 */
.btnCheck { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 10px;}
.btnCheck label input[type="checkbox"] + span {padding: 3px 9px; color: var(--gray-500); border: 1px solid var(--gray-300); font-size: 13px; background-color: var(--bg-white); border-radius: 30px; font-weight: 500; white-space: nowrap; }
.btnCheck label input[type="checkbox"] + span:before {background: none;}
.btnCheck label input[type="checkbox"]:checked + span {color: var(--primary-orange); background-color: var(--orange-100); border-color: var(--primary-orange); font-weight: 700;}
/* close아이콘 */
.close {background: url(../images/icons/icon_close_dark.svg) no-repeat center; background-size: 50%; width: 30px; height: 30px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
/* 별 아이콘 */
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;}
/* 비교  아이콘 */
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%;}
/* Tab */
.tablist { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; border-bottom: 1px solid var(--gray-300); background-color: var(--bg);}
.tablist button {position: relative; color: var(--gray-400); font-weight: 700; padding: 7px;}
.tablist button.on {color: var(--primary-navy);} 
.tablist button.on::after {position: absolute; content: ''; width: 100%; height: 2px; left: 0; bottom: 0; background-color: var(--primary-navy);} 
/* Tab - round */
.tablist.round { justify-content: center; border-bottom: none; gap: 7px; background-color: var(--gray-100); max-width: 400px; margin: 0 auto; border-radius: 30px; padding: 7px;}
.tablist.round button {flex: 1;}
.tablist.round button.on {background-color: var(--bg); border-radius: 30px;} 
.tablist.round button.on::after {content: none;}
/* Tab - bookmark */
.tablist.bookmark { gap: 10px; border-bottom: 1px solid var(--bg); padding: 10px 10px 0 10px; border-radius: 10px 10px 0 0; background-color: var(--gray-50); margin-bottom: 10px;}
.tablist.bookmark button {padding: 10px; flex: 1;}
.tablist.bookmark button.on {background-color: var(--bg); border-radius: 7px 7px 0 0;}
.tablist.bookmark button.on::after {content: none;}
/* 공지사항 notice */
.noticeBox { width: 100%; border-radius: 0 10px 10px 0; background-color: var(--gray-50); 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: 50px; height: 50px; 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); border-radius: 7px; color: var(--main-font); padding: 6px; font-size: 15px;}
/* 테이블 */
table { font-size: 13px; width: 100%; border-collapse: collapse; text-align: center; transition: all 0.3s ease; border-spacing: 0; border: 1px solid var(--gray-300);}
.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; } 
/* 프로필 사진 */
.profileBox { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center;}
.profileBox .img {position: relative;}
.profileBox img {width: 80px; height: 80px; border-radius: 50%; border: 1px solid var(--gray-100);} 
.profileBox input {position: absolute; bottom: 0; right: -5px; width: 33px; height: 33px; text-indent: -9999px; font-size: 0; line-height: 0; background: #C9CED3 url(../images/icons/icon_add_photo.svg) no-repeat center; background-size: 63%; border: 3px solid var(--bg-white); border-radius: 50%; cursor: pointer;}
/* 필터박스 - 선택 결과 */
.filterBox { border-radius: 10px; padding: 15px; width: 100%; background-color: var(--bg-white); border: 1px solid var(--gray-300);}
.filterBox .reset { width: 30px; height: 30px; background: url(../images/icons/icon_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-50); 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(--gray-300); 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/icon_close_dark.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; color: var(--gray-500); 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(--gray-300); 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: var(--bg-white); 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;}
.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 .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-50); border: 0; border-radius: 10px; box-shadow: none;}
.filterBox .noUi-horizontal {height: 10px;}
.filterBox .noUi-connect {background-color: var(--gray-100);} 
.filterBox .noUi-connects {cursor: pointer;}
.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-tooltip { min-width: 46px; padding: 5px 10px; border-radius: 30px; font-weight: 500; font-size: 13px; color: var(--gray-500); border: 1px solid var(--gray-300); background-color: var(--bg-white);}
.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(--primary-orange); box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 6px; background-color: var(--orange-100); border-color: var(--primary-orange);}
.filterBox .slide.on .noUi-connect {background-color: var(--primary-orange);}
.filterBox .scrollH {width: calc(100% - 70px);}
/* 필터박스 - 검색창 */
.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 {padding: 6px 30px 6px 6px;}
/* 공통 dl */
dl {width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: stretch; color: var(--main-font); gap: 15px;}
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-weight: 700; color: var(--navy-font);font-size: 15px;}
dl .data dt .necessary {color: var(--primary-orange); font-weight: 700; padding-left: 3px;}
dl .data dd { 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 {width: 100%; flex: 1;}
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: -1px;}
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);}
/* 페이지 */
.paging { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: nowrap; padding: 15px 0; gap: 10px;}
.paging button {position: relative; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;}
.paging button.now {background-color: var(--primary-navy); color: var(--white);}
.paging button span {font-weight: 600;}
.paging button.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 button.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 button.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 button.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) {display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; align-items: center; padding: 0 10px 10px 10px;}
.blockWork span {white-space: nowrap;}
.blockWork .buttonBox {justify-content: flex-end;} 
.blockWork .buttonBox button {flex: none; padding: 3px 9px; border-radius: 5px; font-size: 12px;}
.blockWork .buttonBox .gray {background-color: var(--gray-200);}

@media screen and (min-width:600px){  
    dl.borderType .data {width: calc(50% - 7.5px);}
    dl .data.row {width: calc(50% - 7.5px);}
    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[path="estimate_finance"] .floatingMenu, .wrapper[path="estimate_leaserent"] .floatingMenu {bottom: 90px;} 
    .wrapper[path="estimate_finance"]: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: -26px;}
    .filterBox .noUi-horizontal .noUi-handle[data-handle="1"] .noUi-tooltip {right: -15px;}
    .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(95% - 75px)}
    .filterBox .choiced .openFilter {position: absolute; top: 0; right: 0;}
    .filterBox .choiced .reset {position: absolute; top: 0; right: 40px;} 
}
@media (hover: hover) and (pointer: fine) {
    .orderList button:hover {color: var(--primary-orange);}
    .locationBox .scrollH .selBox .list ul li:hover button, .locationBox .scrollH .selBox .list ul li:hover a { background-color: var(--orange-100); }
    .locationBox .scrollH .selBox .list ul li.on:hover button, .locationBox .scrollH .selBox .list ul li.on:hover a { background-color: var(--orange-100); color: var(--primary-orange); font-weight: 700;}
    .buttonBox button:hover, .buttonBox a:hover {background-color: var(--primary-darkorange); border: 1px solid var(--primary-darkorange);}
    .buttonBox button.navy:hover, .buttonBox a.navy:hover {background-color: var(--primary-darknavy); border-color: var(--primary-darknavy);}
    .buttonBox button.gray:hover, .buttonBox a.gray:hover {background-color: var(--gray-200); border-color: var(--gray-200); color: var(--main-font);}
    .buttonBox button.navyLine:hover, .buttonBox a.navyLine:hover {background-color: transparent; border-color: var(--primary-navy); color: var(--navy-font);}
    .buttonBox button.orangeLine:hover, .buttonBox a.orangeLine:hover {background-color: var(--orange-100); border-color: var(--primary-orange); color: var(--primary-orange);}
    .buttonBoxLine button:hover, .buttonBoxLine a:hover {color: var(--primary-orange);}
    .tabButton .list li button:hover, .tabButton .list li a:hover {background-color: var(--gray-50); color: var(--main-font);}
    .tabButton .list li.on button:hover, .tabButton .list li.on a:hover {background-color: var(--orange-100); color: var(--primary-orange);}
    .tablist button:hover {color: var(--primary-navy);} 
    .btnCapital button:hover, .btnCapital a:hover {background-color: var(--gray-50);}
    .btnCapital button.on:hover, .btnCapital a.on:hover {background-color: var(--orange-100);}
    .filterBox .openFilter:hover {background-color: var(--gray-100);}
    .filterBox .choice > li .list li:not(.none):hover {background-color: var(--gray-100); }
    .filterBox .choice > li .list li:not(.none):hover button { background-color: var(--gray-100); border-color: var(--gray-100); color: var(--main-font);}
    .filterBox .choice > li .list li.on:hover button {color: var(--primary-orange); background-color: var(--orange-100); border-color: var(--primary-orange);}
    .filterBox .choice > li .list.brandList li.on:hover button { border-color: var(--primary-orange); }
    .filterBox .choice > li .list.brandList li:hover {border-radius: 5px;}
    .filterBox .choice > li .list.brandList li.on:hover {background-color: var(--bg);}
    .paging button:hover {background-color: var(--gray-200);}
    .paging button.now:hover {background-color: var(--primary-navy);}
}
    
/* 메인 - 로그인 페이지 */
.wrapper[path="home_login"] .inner {padding: 0; position: unset}
.wrapper.phone .loginBox .main .box .right .login label {display: block;}
.loginBox {display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: stretch; gap: 15px;}
.loginBox .main .head .title { display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: flex-start; align-items: center; height: 60px; }
.loginBox .main .head .title h2 {position: relative; padding-left: 80px; letter-spacing: 1px;}
.loginBox .main .head .title h2::before {position: absolute; content: ''; top: 50%; left: 15px; transform: translateY(-50%); width: 50px; height: 50px; background: url(../images/logo/logo_v.svg) no-repeat center/contain;}
.loginBox .main .head .desc > div { padding: 15px; text-align: center; color: var(--gray-500); word-break: keep-all; font-weight: 500;}
.loginBox .main .box { display: flex; flex-direction: column-reverse; flex-wrap: nowrap; align-items: stretch; gap: 15px; padding: 0 15px;}
.loginBox .main .box .right { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; flex-wrap: nowrap;}
.loginBox .main .box .right > h3 {font-size: 26px; margin-bottom: 10px;}
.loginBox .main .box .right form {width: 100%;}
.loginBox .main .box .right .login {width: 100%;  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; gap: 15px; }
.loginBox .main .box .right .login label {display: none;}
.loginBox .main .box .right .login > div {width: 100%;}
.loginBox .main .box .right .login .txt input {width: 100%; padding: 16px; font-size: 16px; background-color: var(--bg-white); border-radius: 10px;}
.loginBox .main .box .right .login .buttonBox button {padding: 12px; font-size: 18px; font-weight: 700; width: 100%;}
.loginBox .main .box .left {width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 15px;}
.loginBox .main .box .left > div {width: 100%;}
.loginBox .main .box .left > div .title {font-size: 15px; font-weight: 700; color: var(--main-font); }
.loginBox .main .box .left > div .title .sub {font-size: 12px; color: var(--gray-500); font-weight: 400;}
.loginBox .main .box .left > div .desc {color: var(--gray-500); letter-spacing: -.5px; word-break: keep-all; font-size: 13px;}
.loginBox .main .box .left > div[class^="cell-"] { position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 5px; width:100%; border: 1px solid var(--gray-300); background-color: var(--bg-white); padding: 70px 15px 15px 15px; border-radius: 10px;}
.loginBox .main .box .left > div[class^="cell-"]::after {position: absolute; content: ''; top: 15px; left: 50%; transform: translateX(-50%); width: 50px; height: 50px;}
.loginBox .main .box .left > div[class^="cell-"] .desc {text-align: center;}
.loginBox .main .box .left > div.cell-A::after {background: url(../images/icons/icon_cell-A.png) no-repeat center/contain;}
.loginBox .main .box .left > div.cell-B::after {background: url(../images/icons/icon_cell-B.png) no-repeat center/contain;}
.loginBox .main .box .left > div.cell-C::after {background: url(../images/icons/icon_cell-C.png) no-repeat center/contain;}
.loginBox .main .box .left .cell-C .desc {width: 100%; display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px;}
.loginBox .main .box .left .cell-C .desc li {width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background-color: var(--gray-50); padding: 10px; border-radius: 10px; text-align: left;}
.loginBox .main .box .left .cell-C .desc li b {color: var(--primary-orange); font-weight: 700; font-size: 15px;}
.loginBox .link {width: 100%; text-align: right; margin: 10px 0 25px 0;}
.loginBox .link button { position: relative; color: var(--gray-500);}
.loginBox .link button { padding-left: 15px;}
.loginBox .link :not(:first-child)::before {position: absolute; content: ''; top: 50%; left: 5px; width: 2px; height: 50%; transform: translateY(-50%); background-color: var(--gray-400); }
.loginBox .snsLoginBox {width: 100%; display: flex; gap: 15px;}
.loginBox .snsLoginBox button {width: 100%; padding: 10px; border-radius: 10px;}
.loginBox .snsLoginBox .bot { position: relative; width: calc(50% - 7.5px); height: 100%;}
.loginBox .snsLoginBox .join {width: calc(50% - 7.5px); background-color: var(--primary-navy); color: var(--white); border: 1px solid var(--primary-navy); height: 100%;}
.loginBox .snsLoginBox .snsLogin {background-color: var(--bg-white); border: 1px solid var(--gray-300); color: var(--main-font);}
.loginBox .sns { position: absolute; width: 100%; top: 100%; left: 0; margin-top: 5px; background-color: var(--bg-white); border-radius: 10px; padding: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); opacity: 0; transform: translateY(-10px); transition: 0.25s ease;}
.loginBox .sns.on { opacity: 1; transform: translateY(0);}
.loginBox .sns .btn {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 15px;}
.loginBox .sns .btn button {width: 35px; height: 35px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; border-radius: 50%;}
.loginBox .sns .btn button.kakao {background: url(../images/sns/icon_kakao.svg) no-repeat center/contain;} 
.loginBox .sns .btn button.naver {background: url(../images/sns/icon_naver.svg) no-repeat center/contain;}
.loginBox .sns .btn button.google {background: url(../images/sns/icon_google.svg) no-repeat center/contain; border: 1px solid var(--gray-300);}
.loginBox .sns .btn button.apple {background: url(../images/sns/icon_apple_white.svg) no-repeat center; background-size: 44%; background-color: var(--main-font);}
.loginBox .foot {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; gap: 5px 10px; background-color: var(--bg); color: var(--gray-400); font-size: 13px; padding: 15px;}
.loginBox .foot > div a {text-decoration: underline;}

@media screen and (min-width: 600px) {  
    .loginBox .main .box .left .cell-C .desc {gap: 15px;}
    .loginBox .main .box .left .cell-C .desc li { flex: 0 0 calc(100% / 3 - 10px); flex-direction: column; text-align: center; }
} 
@media screen and (min-width: 768px) {  
    .wrapper.login { height: 100%;} 
    .loginBox {width: 100%; min-height: 100vh; max-width: 1000px; margin: 0 auto; gap: 30px;} 
    .loginBox .main {width: 100%;}
    .loginBox .main .head .title {justify-content: center; margin: 0 15px; padding: 15px;}
    .loginBox .main .head .title h2 {font-size: 24px;} 
    .loginBox .main .head .desc > div { padding: 15px 15px 30px 15px;} 
    .loginBox .main .box {flex-direction: row; flex-wrap: nowrap; gap: 15px;}    
    .loginBox .main .box .left {width: calc(50% - 15px); flex: 1;}
    .loginBox .main .box .left > div .title {padding-left: 35px;}
    .loginBox .main .box .left > div .title .sub {font-size: 14px;}
    .loginBox .main .box .left > div[class^="cell-"] {padding: 15px; align-items: flex-start; gap: 15px;}
    .loginBox .main .box .left > div[class^="cell-"]::after {top: 15px; left: 15px; transform: none; width: 30px; height: 30px; }
    .loginBox .main .box .left > div[class^="cell-"] .desc {text-align: left;}
    .loginBox .main .box .left .cell-C .desc li {font-size: 13px;}
    .loginBox .main .box .right {width: calc(50% - 15px); flex: 1; justify-content: space-between;} 
    .loginBox .main .box .right .login h3 {font-size: 24px;}
    .loginBox .main .box .right .login .btn button {padding: 15px; font-size: 18px;} 
    .loginBox .main .box .right .login .link {font-size: 16px;}
    .loginBox.sns {flex: 1;}
}
@media screen and (min-width:1000px){
    .loginBox .main .box {gap: 50px;} 
    .loginBox .main .box .left > div .desc {font-size: 14px;}
    .loginBox .main .box .left .cell-C .desc {max-width: none;}
    .loginBox .main .box .left .cell-C .desc li {font-size: 14px;}
    .loginBox .main .box .left > div .title {font-size: 18px;}
    .loginBox .main .box .right > h3 {margin-bottom: 0;}
}
@media (hover: hover) and (pointer: fine) {
    .loginBox .link button:hover {color: var(--main-font);}
    .buttonBox .snsLogin:hover{ background-color: var(--gray-50); border-color: var(--gray-300);}
}

/* 회원가입 페이지 */
.wrapper[path="service_apply"] .popup .content .search {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px;}
.wrapper[path="service_apply"] .popup .content .search .title {width: 40px; text-align: left; font-weight: 700;}
.wrapper[path="service_apply"] .popup .content .search .inputBox {width: calc(100% - 50px);}
.wrapper[path="service_apply"] .popup .content .search .inputBox input {width: 100%;}
.wrapper[path="service_apply"] .popup .content .search .buttonBox {width: auto;}
.wrapper[path="service_apply"] .popup .content .list {display: flex; flex-direction: column; flex-wrap: nowrap; margin-top: 15px; overflow-y: auto; max-height: 350px; }
.wrapper[path="service_apply"] .popup .content .list li button {width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; padding: 10px; border-bottom: 1px solid var(--gray-300);}
.wrapper[path="service_apply"] .popup .content .list li:last-child button {border-bottom: 0;}
.wrapper[path="service_apply"] .popup .content .noticeBox {margin-top: 15px; align-items: center;}
.joinBox form {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px; margin-top: 15px;}
.joinBox form .check {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.joinBox form .check .buttonBox {width: auto;}
.joinBox form .check .buttonBox a {max-width: 150px; padding: 3px 9px; flex: none; background-color: var(--bg); border: 1px solid var(--gray-300);}
.joinBox form .buttonBox button {max-width: 150px; padding: 11px;}
.joinBox dl {background-color: var(--bg-white); padding: 15px; border-radius: 10px; border: 1px solid var(--gray-300);}
@media screen and (min-width:800px){
    .joinBox form dl .data {width: calc(50% - 7.5px);}
} 

/* 메뉴 */ 
.header .inner .menuHome { position: absolute; top: 11px; left: 15px; width: 40px; height: 40px; z-index: 45; transition: none; background: url(../images/logo/logo_v.svg) no-repeat center/contain; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.header .inner .menuDesk { display: none; }
.menuFixed:not(.hide) { display: flex; align-items: center; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; position: fixed; width: 100%; height: 60px; left: 0; bottom: 0; border-top: 1px solid var(--gray-300); background: var(--bg); z-index: 49;}
.menuFixed ul { width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;}
.menuFixed ul li {width: 25%; height: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center;}
.menuFixed ul li a, .menuFixed ul li button {display: flex; width: 100%; height: 100%; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 1px;}
.menuFixed ul li div {width: 24px; height: 24px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.menuFixed ul li div.home {background: url(../images/icons/navigation/icon_home.svg) no-repeat center/contain;}
.menuFixed ul li div.newcar {background: url(../images/icons/navigation/icon_newcar.svg) no-repeat center/contain;}
.menuFixed ul li div.estimate {background: url(../images/icons/navigation/icon_estimate.svg) no-repeat center/contain;}
.menuFixed ul li div.stock {background: url(../images/icons/navigation/icon_stock.svg) no-repeat center/contain;}
.menuFixed ul li div.menu {background: url(../images/icons/navigation/icon_menu.svg) no-repeat center/contain;}
.menuFixed ul li.on div.home {background: url(../images/icons/navigation/icon_home_on.svg) no-repeat center/contain;}
.menuFixed ul li.on div.newcar {background: url(../images/icons/navigation/icon_newcar_on.svg) no-repeat center/contain;}
.menuFixed ul li.on div.estimate {background: url(../images/icons/navigation/icon_estimate_on.svg) no-repeat center/contain;}
.menuFixed ul li.on div.stock {background: url(../images/icons/navigation/icon_stock_on.svg) no-repeat center/contain;}
.menuFixed ul li span {font-size: 12px; color: var(--main-font);}
.menuFixed ul li.on span {color: var(--primary-orange);}
.menuMain {position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; flex-direction: column; z-index: 52;}
.wrapper:not(.openTab) .menuMain.open {display: flex; overflow-y: auto;}
.menuMain.open::-webkit-scrollbar {display: none;}
.menuMain .dimBg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--dim-rgb); z-index: 50;}
.menuMain .menuBox { flex: 1; background: var(--bg); position: relative; z-index: 51;}
.menuMain .menuBox .menuTop { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: 15px; }
.menuMain .menuBox .menuTop .menuDesk {display: none;}
.menuMain .menuBox .menuTop .home {display: none;}
.menuMain .menuBox .menuTop .info {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 10px; color: var(--main-font);}
.menuMain .menuBox .menuTop .info .logout {background-color: var(--primary-navy); color: var(--white); padding: 3px 9px; border-radius: 5px; font-weight: 600; font-size: 12px;}
.menuMain .menuBox .menuTop .icon {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 10px;}
.menuMain .menuBox .menuTop .icon button {width: 30px; height: 30px; border-radius: 50%; background-color: var(--gray-200); background-size: 60%; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.menuMain .menuBox .menuTop .icon .darkMode { width: 30px; height: 30px; background: var(--gray-200) url(../images/icons/icon_darkmode.svg) no-repeat center/contain; background-size: 60%; }
.menuMain .menuBox .menuTop .icon .brightMode { width: 30px; height: 30px; background: var(--gray-200) url(../images/icons/icon_brightmode.svg) no-repeat center; background-size: 60%; }
.menuMain .menuBox .menuTop .info button.home { width: 20px; height: 20px; background: url(../images/icons/icon_home.svg) no-repeat center/contain; }
.menuMain .menuBox .menuList { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; padding: 0 15px 15px 15px; }
.menuMain .menuBox .menuList .gnb { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; background: var(--bg-white); border-radius: 15px;}
.menuMain .menuBox .menuList .gnb .title { width: 100%; }
.menuMain .menuBox .menuList .gnb .title button { position: relative; width: 100%; text-align: left; font-size: 18px; font-weight: 700; padding: 15px 20px 15px 45px; transition: none;}
.menuMain .menuBox .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 .menuBox .menuList .gnb .title button.open::after { background: url(../images/icons/icon_arrowdown_orange.svg) no-repeat center/contain; transform: translateY(-50%) rotate(180deg); }
.menuMain .menuBox .menuList .gnb .title button.open { color: var(--primary-orange); }
.menuMain .menuBox .menuList .gnb .lnb { display: none; }
.menuMain .menuBox .menuList .gnb .lnb.open { width: 100%; display: flex; flex-direction: column; padding: 0 20px 15px 20px;}
.menuMain .menuBox .menuList .gnb .lnb li {width: 100%;}
.menuMain .menuBox .menuList .gnb .lnb li a { position: relative; display: flex; align-items: center; gap: 3px; color: var(--gray-500); padding: 7px; font-size: 16px;} 
.menuMain .menuBox .menuList .gnb .lnb li a .new { position: relative; top: -5px; font-weight: 900; border-radius: 50%; font-size: 12px; color: var(--primary-orange);}
.menuMain .menuBox .menuList .gnb .lnb li.on a { font-weight: 700; color: var(--main-font);}
/* 아이콘 추가 */
.menuMain .menuBox .menuList .gnb .title button::before {content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: block; background-repeat: no-repeat; background-position: center; background-size: contain;}
.menuMain .menuBox .menuList .gnb.newcar .title button::before {background-image:url(../images/icons/navigation/icon_newcar.svg);}
.menuMain .menuBox .menuList .gnb.newcar .title button.open::before {background-image:url(../images/icons/navigation/icon_newcar_on.svg);}
.menuMain .menuBox .menuList .gnb.estimate .title button::before {background-image:url(../images/icons/navigation/icon_estimate.svg);}
.menuMain .menuBox .menuList .gnb.estimate .title button.open::before {background-image:url(../images/icons/navigation/icon_estimate_on.svg);}
.menuMain .menuBox .menuList .gnb.finance .title button::before {background-image:url(../images/icons/navigation/icon_finance.svg);}
.menuMain .menuBox .menuList .gnb.finance .title button.open::before {background-image:url(../images/icons/navigation/icon_finance_on.svg);}
.menuMain .menuBox .menuList .gnb.stock .title button::before {background-image:url(../images/icons/navigation/icon_stock.svg);}
.menuMain .menuBox .menuList .gnb.stock .title button.open::before {background-image:url(../images/icons/navigation/icon_stock_on.svg);}
.menuMain .menuBox .menuList .gnb.customer .title button::before {background-image:url(../images/icons/navigation/icon_customer.svg);}
.menuMain .menuBox .menuList .gnb.customer .title button.open::before {background-image:url(../images/icons/navigation/icon_customer_on.svg);}
.menuMain .menuBox .menuList .gnb.utility .title button::before {background-image:url(../images/icons/navigation/icon_utility.svg);}
.menuMain .menuBox .menuList .gnb.utility .title button.open::before {background-image:url(../images/icons/navigation/icon_utility_on.svg);}
.menuMain .menuBox .menuList .gnb.guide .title button::before {background-image:url(../images/icons/navigation/icon_guide.svg);}
.menuMain .menuBox .menuList .gnb.guide .title button.open::before {background-image:url(../images/icons/navigation/icon_guide_on.svg);}
.menuMain .menuBox .menuList .gnb.shopping .title button::before {background-image:url(../images/icons/navigation/icon_shopping.svg);} 
.menuMain .menuBox .menuList .gnb.shopping .title button.open::before {background-image:url(../images/icons/navigation/icon_shopping_on.svg);}
.menuMain .menuBox .menuList .gnb.mypage .title button::before {background-image:url(../images/icons/navigation/icon_mypage.svg);}
.menuMain .menuBox .menuList .gnb.mypage .title button.open::before {background-image:url(../images/icons/navigation/icon_mypage_on.svg);}

/* mainTop */
.mainTop { position: relative; padding: 15px 0 0 55px; margin-bottom: 30px; }
.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: 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; }
.mainTop .right button { position: relative; padding: 5px 10px 5px 25px; color: var(--gray-500);}
.mainTop button:not(.hide), .mainTop a:not(.hide) { position: relative; display: block; color: var(--gray-500); padding: 5px 10px 5px 25px; }
.mainTop button::before, .mainTop a::before { position: absolute; content: ''; top: 50%; left: 3px; transform: translateY(-50%); width: 18px; height: 18px; }
/* 검색창 */
.mainTop .searchBoxForm, .mainTop .searchBox { position: relative; }
.mainTop .searchBoxForm input, .mainTop .searchBox input { border-radius: 30px; padding: 8px 30px 8px 10px; max-width: 90px; background-color: var(--bg-white); font-size: 14px; }
.mainTop .searchBoxForm .btnSearch, .mainTop .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: 60%; font-size: 0; overflow: hidden; text-indent: -9999px; }
.mainTop select {background-color: var(--bg-white); border-radius: 30px;}
/* 아이콘 */
.mainTop .custom::before { background: url(../images/icons/icon_custom.svg) no-repeat center/contain; }
.mainTop .list::before { background: url(../images/icons/icon_list.svg) no-repeat center/contain; }
.mainTop .list.open::before { width: 12px; height: 12px; background: url(../images/icons/icon_listup.svg) no-repeat center/contain; }
.mainTop .list .count { display: flex; justify-content: center; align-items: center; position: absolute; left: 10px; top: 0; font-size: 9px; background-color: var(--primary-orange); width: 16px; height: 16px; color: var(--white); border-radius: 30px; }
.mainTop .setting::before { background: url(../images/icons/icon_setting.svg) no-repeat center/contain; }
.mainTop .channel::before { background: url(../images/logo/ch_logo.svg) no-repeat center/contain; }
.mainTop .reload { height: 21px; background: url(../images/icons/icon_reload.svg) no-repeat center/contain; background-size: 55%; font-size: 0; overflow: hidden; text-indent: -9999px; }
.mainTop .order::before { background: url(../images/icons/icon_msgSend.svg) no-repeat center/contain; } 
.mainTop .book::before { background: url(../images/icons/icon_msgBook.svg) no-repeat center/contain; }
.mainTop .editor::before {background: url(../images/icons/icon_editor.svg) no-repeat center/contain; }
.mainTop .call::before { background: url(../images/icons/icon_call.svg) no-repeat center/contain; width: 16px; height: 16px;}
.mainTop .progress::before { background: url(../images/icons/icon_delivery_speed.svg) no-repeat center/contain; }
.mainTop .del::before { background: url(../images/icons/icon_del.svg) no-repeat center/contain; }
.mainTop .custoList::before { background: url(../images/icons/icon_customerList.svg) no-repeat center/contain; }
.mainTop .more::before { background: url(../images/icons/icon_more.svg) no-repeat center/contain; } 
.mainTop .open::before { background: url(../images/icons/icon_open.svg) no-repeat center/contain; }
.mainTop .share::before { background: url(../images/icons/icon_share.svg) no-repeat center/contain; }
.mainTop .info::before { background: url(../images/icons/icon_help.svg) no-repeat center/contain; }
.mainTop .addUser::before { background: url(../images/icons/icon_user_add.svg) no-repeat center/contain; }

/* 메인 홈 - 팝업 */
.popup .content .favoritesMenu {display: flex; flex-direction: column; gap: 15px;}
.popup .content .favoritesMenu h3 { position: relative; color: var(--primary-navy); padding-left: 15px; margin-bottom: 10px; font-size: 16px;}
.popup .content .favoritesMenu h3::before {position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 65%; border-radius: 2px; background-color: var(--primary-navy);}
.popup .content .favoritesMenu .favorites ul {display: flex; flex-wrap: wrap; align-items: stretch; gap: 15px;}
.popup .content .favoritesMenu .favorites ul li {flex: 0 0 calc(100% / 3 - 10px); }
.popup .content .favoritesMenu .favorites ul li button { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--primary-navy); border: 1px solid var(--gray-300); color: var(--white); border-radius: 10px; padding: 10px;}
.popup .content .favoritesMenu .favorites ul li.not button {background-color: var(--bg-white); color: var(--main-font);}
.popup .content .favoritesMenu .favorites ul li.on button { background-color: var(--gray-100); color: var(--main-font);}
.popup .content .favoritesMenu .menuPick .menu {display: flex; flex-direction: column; flex-wrap: wrap; gap: 15px;} 
.popup .content .favoritesMenu .menuPick .menu.row {flex-direction: row; gap: 5px 15px;}
.popup .content .favoritesMenu .menuPick .menu > li { display: flex; flex-wrap: wrap; gap: 3px;}
.popup .content .favoritesMenu .menuPick .menu li .title {width: 100%; font-size: 16px; font-weight: 700;}
.popup .content .favoritesMenu .menuPick .menu li .subMenu {display: flex; flex-wrap: wrap; gap: 5px; }
.popup .content .favoritesMenu .menuPick .menu li button {color: var(--gray-500); padding: 2px 6px; border-radius: 7px; border: 1px solid transparent;}
.popup .content .favoritesMenu .menuPick .menu li.on button {background-color: var(--primary-navy); border: 1px solid var(--gray-300); color: var(--white);} 
/* 메인 홈 */ 
.deskBox {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 30px;}
.deskBox .titleBox {display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;}
.deskBox h3.title { position: relative; padding-left: 15px; color: var(--primary-navy); }
.deskBox h3.title::before { position: absolute;  content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 65%; border-radius: 2px; background-color: var(--primary-navy);}
.deskBox .more {position: relative; color: var(--gray-500); 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 .setting { position: relative; color: var(--gray-500); padding-left: 20px;}
.deskBox .setting::before {position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 18px; height: 18px; background: url(../images/icons/icon_setting.svg) no-repeat center; background-size: 90%;}
.deskBox .top {width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 15px;}
.deskBox .top .myBox { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; border: 1px solid var(--gray-300); background-color: var(--primary-navy); border-radius: 10px; color: var(--white);}
.deskBox .top .myBox .infoBox {width: 100%; padding: 15px; background-color: var(--primary-navy); border-radius: 10px 10px 0 0; }
.deskBox .top .myBox .infoBox .member { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0 3px; padding-right: 60px; font-size: 16px;}
.deskBox .top .myBox .infoBox .member .end {width: 100%; font-weight: 400; color: var(--gray-400);}
.deskBox .top .myBox .infoBox .member .log { position: absolute; right: 0; top: 0; padding: 4px 9px; background-color: rgba(255, 255, 255, .1); color: var(--white); border: 1px solid rgba(255, 255, 255, .1); border-radius: 5px; font-size: 12px;}
.deskBox .top .myBox .infoBox .member .end {font-size: 12px; color: #A1AEBA;}
.deskBox .top .myBox .infoBox ul li {color: #A1AEBA; font-size: 12px;} 
.deskBox .top .myBox .infoBox .point {color: var(--primary-orange); font-size: 15px;}
.deskBox .top .myBox .buttonBoxLine {padding: 15px; background-color: var(--bg-white); border-radius: 0 0 8px 8px;}
.deskBox .top .myBox .buttonBoxLine a, .deskBox .top .myBox .buttonBoxLine button {position: relative; padding-top: 50px;}
.deskBox .top .myBox .buttonBoxLine .dues::before {position: absolute; content: ''; top: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; background: #EFF6FF url(../images/icons/icon_pay.svg) no-repeat center; border-radius: 10px;}
.deskBox .top .myBox .buttonBoxLine .info::before {position: absolute; content: ''; top: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; background: #F0FDFA url(../images/icons/icon_manage.svg) no-repeat center; border-radius: 10px;}
.deskBox .top .listBox {height: auto;}
.deskBox .favoritesMenuBox .list {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 15px;}
.deskBox .favoritesMenuBox .list li {flex: 0 0 calc(100% / 2 - 7.5px); border: 1px solid var(--gray-300); background-color: var(--bg-white);border-radius: 15px; transition: all .2s; } 
.deskBox .favoritesMenuBox .list li a { width: 100%; display: flex; justify-content: center; align-items: center; height: 100%; padding: 20px 5px; word-break: keep-all; text-align: center; font-size: 15px; font-weight: 600; border-radius: 10px; color: var(--navy-font); }
.deskBox .favoritesListBox .list {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 15px;}
.deskBox .favoritesListBox .list > li {width: 100%;}
.deskBox .listBox { width: 100%; height: 100%; border: 1px solid var(--gray-300); border-radius: 10px; background-color: var(--bg-white);}
.deskBox .listBox .title {display: flex; align-items: center; justify-content: space-between; background-color: var(--gray-50); border-bottom: 1px solid var(--gray-300); padding: 15px; border-radius: 10px 10px 0 0;}
.deskBox .listBox .title h4 {font-size: 16px; color: var(--navy-font);}
.deskBox .listBox .subList { display: flex; flex-direction: column; gap: 7px; padding: 15px; color: var(--main-font);}
.deskBox .listBox .subList li a { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 5px;}
.deskBox .listBox .subList li a .cate { font-weight: 500;}
.deskBox .listBox.notice .subList li a .cate {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.deskBox .listBox .subList li a .content {flex: 1 1 0;  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.deskBox .listBox .subList li a .date { white-space: nowrap; width: 65px; font-size: 12px; color: var(--gray-400); text-align: right;}
.deskBox .listBox .title h4 { position: relative; padding-left: 40px;}
.deskBox .listBox .title h4::before { position: absolute; content: ''; width: 30px; height: 30px; top: 50%; left: 0; transform: translateY(-50%); border-radius: 50%;}
.deskBox .listBox.save .title h4::before {background: #CBD8E5 url(../images/icons/icon_restore.svg) no-repeat center; background-size: 60%;}
.deskBox .listBox.notice .title h4::before {background: #FEE2E2 url(../images/icons/icon_campaign.svg) no-repeat center; background-size: 60%;}
.deskBox .listBox.promotion .title h4::before {background: #FEE2E2 url(../images/icons/icon_campaign.svg) no-repeat center; background-size: 60%;}
.deskBox .listBox.channel .title h4::before {background: var(--orange-200) url(../images/logo/ch_logo.svg) no-repeat center; background-size: 60%;}
.deskBox .listBox.freeboard .title h4::before {background: var(--primary-lightnavy) url(../images/icons/icon_edit.svg) no-repeat center; background-size: 60%;}
.deskBox .listBox.schedule .title h4::before {background: #DBEAFE url(../images/icons/icon_date_navy.svg) no-repeat center; background-size: 60%;}
.deskBox .listBox.excel .title h4::before { background: #DCFCE7 url(../images/icons/icon_grid_green.svg) no-repeat center; background-size: 60%;}
.deskBox .listBox.finance .title h4::before {background: #E0E7FF url(../images/icons/icon_wallet.svg) no-repeat center; background-size: 60%;}
.deskBox .listBox.customer .title h4::before {background: var(--gray-200) url(../images/icons/icon_custom.svg) no-repeat center; background-size: 60%;}
.deskBox .listBox.guide .title h4::before {background: var(--orange-300) url(../images/icons/icon_help_orange.svg) no-repeat center; background-size: 60%;}
.deskBox .bannerBox { display: flex; flex-wrap: wrap; gap: 15px;}
.deskBox .bannerBox a {text-align: center; display: flex; width: 100%; }
.deskBox .bannerBox img {border-radius: 10px;}

 @media screen and (min-width: 600px) {
    .deskBox .bannerBox a {flex: 0 0 calc(100% / 2 - 7.5px) }
    .popup .content .favoritesMenu .menuPick .menu li {flex-wrap: nowrap; gap: 0;}
    .popup .content .favoritesMenu .menuPick .menu li .title {width: 80px;}
    .popup .content .favoritesMenu .menuPick .menu li .subMenu {width: calc(100% - 80px);}
    .popup .content .favoritesMenu .favorites ul li {flex: 0 0 calc(100% / 4 - 11.25px);}
    .deskBox .favoritesMenuBox .list li {flex: 0 0 calc(100% / 3 - 10px);}
 }

 @media screen and (min-width: 800px) {
    .deskBox .top .myBox {width: calc(40% - 7.5px);}
    .deskBox .top .listBox {width: calc(60% - 7.5px);}
    .deskBox .favoritesMenuBox .list li {flex: 0 0 calc(100% / 6 - 12.5px);}
    .deskBox .favoritesListBox .list > li {width: calc(50% - 7.5px);} 
}
@media screen and (min-width: 1000px) {
    .header .inner .menuDesk { display: block; position: absolute; top: 15px; left: 15px; width: 35px; height: 35px; z-index: 45; background: url(../images/icons/navigation/icon_menu.svg) no-repeat center; background-size: 70%; border-radius: 10px; font-size: 0; line-height: 0; text-indent: -9999px; }
    .header .inner .menuDesk:hover {background: url(../images/icons/navigation/icon_menu_on.svg) no-repeat center; background-size: 70%;}
    .header .inner .menuHome {left: 62px;}
    .mainTop {padding: 15px 0 0 100px;}
    .wrapper.menuOpen .menuMain .menuBox .menuTop .home { display: block; width: 35px; height: 35px; background: url(../images/icons/navigation/icon_home.svg) no-repeat center; background-size: 80%; font-size: 0; line-height: 0; text-indent: -9999px;}
    .wrapper.menuOpen .menuMain .menuBox .menuTop .home:hover { background: url(../images/icons/navigation/icon_home_on.svg) no-repeat center; background-size: 80%; }
    .wrapper.menuOpen .header .inner .menuDesk {display: none;}
    .wrapper.menuOpen .menuMain {transform: translateX(0); opacity: 1;}
    .wrapper.menuOpen .menuMain .menuBox .menuTop .menuDesk:hover { background: url(../images/icons/navigation/icon_menu_on.svg) no-repeat center; background-size: 70%;}
    .menuMain .menuBox .menuTop .menuDesk {display: block; width: 35px; height: 35px; z-index: 45; background: url(../images/icons/navigation/icon_menu.svg) no-repeat center; background-size: 70%; font-size: 0; line-height: 0; text-indent: -9999px; }
    .menuMain .menuBox .menuTop .icon .close {display: none;}
    .menuFixed:not(.hide) {display: none;}
    .menuMain { position: fixed; top: 0; left: 0; height: 100%; transform: none;}
    .menuMain .menuBox {flex: unset ; width: 240px; height: 100%; background-color: var(--bg-white); display: flex; flex-direction: column;} 
    .menuMain .menuBox .menuTop { padding: 10px; height: 60px; justify-content: flex-start; gap: 5px;} 
    .menuMain .menuBox .menuTop .icon {position: absolute; width: 240px; bottom: 0; left: 0; z-index: 50; height: 60px; padding: 15px; justify-content: space-between; background-color: var(--bg-white);}
    .menuMain .menuBox .menuTop .info .name {position: absolute; right: 15px; }
    .menuMain .menuBox .menuTop .info .logout {position: absolute; bottom: 16px; right: 15px; z-index: 51;}
    .menuMain .menuBox nav {overflow-y: auto; min-height: 0; padding-bottom: 60px;}
    .menuMain .menuBox .menuList {gap: 0; padding: 0;}
    .menuMain .menuBox .menuList > li:not(:last-child) {border-bottom: 1px solid var(--gray-300); border-radius: 0;}
    .menuMain .menuBox .menuList .gnb {flex-wrap: wrap; align-items: center; background-color: transparent; gap: 0;}
    .menuMain .menuBox .menuList .gnb .title button {font-size: 16px; }
    .menuMain .menuBox .menuList .gnb .title button::after {position: absolute;} 
    .menuMain .menuBox .menuList .gnb .title button:hover {color: var(--primary-orange);}
    .menuMain .menuBox .menuList .gnb .lnb.open { width: 100%; display: flex; align-items: flex-start; padding: 0 15px 8px 7px;}
    .menuMain .menuBox .menuList .gnb .lnb li a {font-size: 14px;}
    .wrapper:not(.menuOpen) .menuMain .menuBox {background-color: var(--bg);} 
    .wrapper:not(.menuOpen) .menuMain .menuBox .menuTop {border: none;}
    .wrapper:not(.menuOpen) .menuMain .menuBox .menuTop .menuDesk {display: none;}
    .wrapper:not(.menuOpen) .menuMain .menuBox .menuList > li:not(:last-child) {border: none;}
} 
@media screen and (min-width: 1350px) { 
    .wrapper .mainTop {padding: 15px 0 0 55px;}
    .wrapper .header .inner .menuHome {left: 15px;} 
    .wrapper.menuOpen:not(.openTab) .menuMain {display: block;}
    .wrapper:not(.menuOpen) .header .inner .menuDesk { position: fixed; left: 22px; z-index: 53;}
    .wrapper:not(.menuOpen) .menuMain .dimBg {display: none;}
    .wrapper:not(.menuOpen) .menuMain { display: block; width: 80px; }
    .wrapper:not(.menuOpen) .menuMain .menuBox {width: 80px;}
    .wrapper:not(.menuOpen) .menuMain .menuBox .menuTop .icon {width: 80px; justify-content: center; background-color: var(--bg);}
    .wrapper:not(.menuOpen) .menuMain .menuBox .menuList .gnb .title button::after {content: none;}
    .wrapper:not(.menuOpen) .menuMain .menuBox .menuList .gnb .title button { text-align: center; font-size: 12px; font-weight: 400; padding: 35px 10px 10px 10px }
    .wrapper:not(.menuOpen) .menuMain .menuBox .menuList .gnb .title button::before {left: 50%; top: 10px; transform: translateX(-50%);} 
    .wrapper:not(.menuOpen) .menuMain .menuBox .menuTop .info, .wrapper:not(.menuOpen) .menuMain .menuBox .menuList .lnb { display: none; }
}
@media screen and (min-width: 1400px) {  
    .wrapper .container, .wrapper .header {margin-left: 80px;}
    .wrapper.menuOpen .container, .wrapper.menuOpen .header {margin-left: 240px;}
    .wrapper.menuOpen:not(.wide) .menuMain { width: 240px; }
}
@media (hover: hover) and (pointer: fine) {
    .wrapper[path="service_apply"] .popup .content .list li:hover {background-color: var(--gray-50);}
    .menuMain .menuBox .menuList .gnb.newcar .title button:hover::before {background-image: url(../images/icons/navigation/icon_newcar_on.svg);}
    .menuMain .menuBox .menuList .gnb.estimate .title button:hover::before {background-image: url(../images/icons/navigation/icon_estimate_on.svg);}
    .menuMain .menuBox .menuList .gnb.finance .title button:hover::before {background-image: url(../images/icons/navigation/icon_finance_on.svg);}
    .menuMain .menuBox .menuList .gnb.stock .title button:hover::before {background-image: url(../images/icons/navigation/icon_stock_on.svg);}
    .menuMain .menuBox .menuList .gnb.customer .title button:hover::before {background-image: url(../images/icons/navigation/icon_customer_on.svg);}
    .menuMain .menuBox .menuList .gnb.utility .title button:hover::before {background-image: url(../images/icons/navigation/icon_utility_on.svg);}
    .menuMain .menuBox .menuList .gnb.guide .title button:hover::before {background-image: url(../images/icons/navigation/icon_guide_on.svg);}
    .menuMain .menuBox .menuList .gnb.guide .title button:hover::before {background-image: url(../images/icons/navigation/icon_guide_on.svg);}
    .menuMain .menuBox .menuList .gnb.shopping .title button:hover::before {background-image: url(../images/icons/navigation/icon_shopping_on.svg);}
    .menuMain .menuBox .menuList .gnb.mypage .title button:hover::before {background-image: url(../images/icons/navigation/icon_mypage_on.svg);}
    .menuMain .menuBox .menuList .gnb .lnb li:hover a { color: var(--main-font); }
    .deskBox .more:hover {text-decoration: underline;} 
    .deskBox .top .myBox .infoBox ul li:hover a {text-decoration: underline;}
    .deskBox .listBox .subList li:hover a span:not(.date) {text-decoration: underline;}
    .deskBox .favoritesMenuBox .list li:hover {border-color: var(--primary-navy); background-color: var(--primary-navy);} 
    .deskBox .favoritesMenuBox .list li:hover a {color: var(--white);}
    .popup .content .favoritesMenu .menuPick .menu li:hover.on button {background-color: var(--primary-navy);}
    .popup .content .favoritesMenu .menuPick .menu li .subMenu li:hover.on button {color: var(--white);}
}
/*  견적 메뉴 상단
    @media screen and (min-width: 1000px) {
    .header .inner .menuDesk { display: block; position: absolute; top: 15px; left: 15px; width: 35px; height: 35px; z-index: 45; background: url(../images/icons/navigation/icon_menu.svg) no-repeat center; background-size: 70%; border-radius: 10px; font-size: 0; line-height: 0; text-indent: -9999px; }
    .header .inner .menuDesk:hover {background: url(../images/icons/navigation/icon_menu_on.svg) no-repeat center; background-size: 70%;}
    .header .inner .menuHome {left: 62px;}
    .mainTop {padding: 15px 0 0 100px;}
    .mainTop {padding: 15px 0 0 100px;}
    .wrapper.menuOpen .menuMain .menuBox .menuTop .home { display: block; width: 35px; height: 35px; background: url(../images/icons/navigation/icon_home.svg) no-repeat center; background-size: 80%; font-size: 0; line-height: 0; text-indent: -9999px;}
    .wrapper.menuOpen .menuMain .menuBox .menuTop .home:hover { background: url(../images/icons/navigation/icon_home_on.svg) no-repeat center; background-size: 80%; }
    .wrapper.menuOpen .header .inner .menuDesk {display: none;}
    .wrapper.menuOpen .menuMain {transform: translateX(0); opacity: 1;}
    .wrapper.menuOpen .menuMain .menuBox .menuTop .menuDesk:hover { background: url(../images/icons/navigation/icon_menu_on.svg) no-repeat center; background-size: 70%;}
    .menuMain .menuBox .menuTop .menuDesk {display: block; width: 35px; height: 35px; z-index: 45; background: url(../images/icons/navigation/icon_menu.svg) no-repeat center; background-size: 70%; font-size: 0; line-height: 0; text-indent: -9999px; }
    .menuMain .menuBox .menuTop .icon .close {display: none;}
    .menuFixed {display: none;}
    .menuMain { position: fixed; top: 0; left: 0; height: 100%; transform: none;}
    .menuMain .menuBox {flex: unset ; width: 240px; height: 100%; background-color: var(--bg-white); display: flex; flex-direction: column;} 
    .menuMain .menuBox .menuTop { padding: 10px; height: 60px; justify-content: flex-start; gap: 5px;} 
    .menuMain .menuBox .menuTop .icon {position: absolute; width: 240px; bottom: 0; left: 0; z-index: 50; height: 60px; padding: 15px; justify-content: space-between; background-color: var(--bg-white);}
    .menuMain .menuBox .menuTop .info .name {position: absolute; right: 15px; }
    .menuMain .menuBox .menuTop .info .logout {position: absolute; bottom: 16px; right: 15px; z-index: 51;}
    .menuMain .menuBox nav {overflow-y: auto; min-height: 0; padding-bottom: 60px;}
    .menuMain .menuBox .menuList {gap: 0; padding: 0;}
    .menuMain .menuBox .menuList > li:not(:last-child) {border-bottom: 1px solid var(--gray-300); border-radius: 0;}
    .menuMain .menuBox .menuList .gnb {flex-wrap: wrap; align-items: center; background-color: transparent; gap: 0;}
    .menuMain .menuBox .menuList .gnb .title button {font-size: 16px; }
    .menuMain .menuBox .menuList .gnb .title button::after {position: absolute;} 
    .menuMain .menuBox .menuList .gnb .title button:hover {color: var(--primary-orange);}
    .menuMain .menuBox .menuList .gnb .lnb.open { width: 100%; display: flex; align-items: flex-start; padding: 0 15px 8px 7px;}
    .menuMain .menuBox .menuList .gnb .lnb li:hover.on a {color: var(--primary-orange);} 
    .wrapper:not(.menuOpen) .menuMain .menuBox {background-color: var(--bg);} 
    .wrapper:not(.menuOpen) .menuMain .menuBox .menuTop {border: none;}
    .wrapper:not(.menuOpen) .menuMain .menuBox .menuTop .menuDesk {display: none;}
    .wrapper:not(.menuOpen) .menuMain .menuBox .menuList > li:not(:last-child) {border: none;}
} 
@media screen and (min-width: 1350px) { 
    .wrapper:not(.wide) .mainTop {padding: 15px 0 0 55px;}
    .wrapper:not(.wide) .header .inner .menuHome {left: 15px;} 
    .wrapper:not(.wide, .menuOpen) .header .inner .menuDesk { position: fixed; left: 22px; z-index: 53;}
    .wrapper:not(.wide, .menuOpen) .menuMain .dimBg {display: none;}
    .wrapper:not(.wide, .menuOpen) .menuMain { display: block; width: 80px; }
    .wrapper:not(.wide, .menuOpen) .menuMain .menuBox {width: 80px;}
    .wrapper.menuOpen .menuMain {display: block;}
    .wrapper:not(.menuOpen) .menuMain .menuBox .menuTop .icon {width: 80px; justify-content: center; background-color: var(--bg);}
    .wrapper:not(.menuOpen) .menuMain .menuBox .menuList .gnb .title button::after {content: none;}
    .wrapper:not(.menuOpen) .menuMain .menuBox .menuTop .info, .wrapper:not(.menuOpen) .menuMain .menuBox .menuList .lnb { display: none; }
    .wrapper:not(.menuOpen) .menuMain .menuBox .menuList .gnb .title button { text-align: center; font-size: 12px; font-weight: 400; padding: 35px 10px 10px 10px }
    .wrapper:not(.menuOpen) .menuMain .menuBox .menuList .gnb .title button::before {left: 50%; top: 10px; transform: translateX(-50%);} 
}
@media screen and (min-width: 1400px) {  
    .wrapper.menuOpen:not(.wide) .header .inner .menuHome {left: 140px;}
    .wrapper.menuOpen:not(.wide) .container {margin-left: 240px;}
    .wrapper.menuOpen:not(.wide) .menuMain { width: 240px; }
    .wrapper.menuOpen:not(.wide) .menuMain .menuBox { width: 240px; }
    .wrapper.wide.menuOpen .menuMain { display: none;}
    .wrapper.wide.menuOpen .menuMain.open { display: block;}
    .wrapper.wide.menuOpen .header .inner .menuDesk {display: block;}
} */

/* 브랜드리스트 */
.brandBox { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px; width: 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; }
.brandList { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 10px;}
.brandList li {width: calc(25% - 7.5px);}
.brandList li button, .brandList li a {width: 100%; padding: 5px; border: 1px solid transparent; border-radius: 10px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 3px;}
.brandList li button .name, .brandList li a .name {word-break: break-all; font-size: 13px; color: var(--gray-500);}
.brandList li.on button, .brandList li.on a {color: var(--primary-orange); border: 1px solid var(--primary-orange); background-color: var(--orange-100);}
.brandList li.on button .name, .brandList li.on a .name {color: var(--primary-orange);}
.brandList .logo {display: flex; max-width: 50px;}
.brandList .logo img { width: 100%; }
/* 모델 리스트 */ 
.modelList { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; gap: 15px;}
.modelList li {position: relative; width: calc(50% - 7.5px);}
.modelList li button, .modelList li a {width: 100%; height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 5px; border-radius: 10px;}
.modelList li.on button { border: 1px solid var(--primary-orange); background-color: var(--orange-100);}
.modelList li.on button .name {color: var(--primary-orange);}
.modelList li.on button .car, .modelList li.on a .car {background-color: var(--orange-100);}
.modelList li button .car, .modelList li a .car { width: 100%; display: flex; justify-content: center; padding: 30px 10px 10px 10px; border-radius: 10px;}
.modelList li button .car img, .modelList li a .car img {max-width: 130px;}
.modelList li button img, .modelList li a img {width: 100%;}
.modelList li button .logo, .modelList li a .logo { position: absolute; top: 5px; left: 5px; display: flex; max-width: 35px;}
.modelList li.e::before {position: absolute; content: 'EV'; top: 5px; right: 5px; padding: 3px 20px 3px 10px; font-weight: 700; font-size: 10px; color: var(--main-font); background: var(--gray-100) url(../images/icons/icon_electronic.png) no-repeat center right -1px;border-radius: 30px;}
.modelList li.x::before {position: absolute; content: 'HEV'; top: 5px; right: 5px; padding: 3px 20px 3px 10px; font-weight: 700; font-size: 10px; color: var(--main-font); background: var(--gray-100) url(../images/icons/icon_eco.png) no-repeat center right -1px;border-radius: 30px;}
.modelList li.state3::after { content: "재고 한정"; position: absolute; top: 5px; left: 40px; background-color: var(--gray-100); padding: 3px 9px; border-radius: 30px; font-size: 10px; font-weight: 500; color: var(--gray-500);} 
.modelList li button .name, .modelList li a .name { color: var(--gray-500); text-align: center; font-size: 13px;}
.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;}

/* 모델 리스트 - wide 예외처리 */
.modelList.wide li {width: 100%; border: 1px solid var(--gray-200); border-radius: 10px; }
.modelList.wide li a {align-items: flex-start; justify-content: space-between;}
.modelList.wide li a .infoBox {width: 100%;}
.modelList.wide li a .price { width: 100%; text-align: right; font-size: 16px; font-weight: 700; color: var(--primary-orange); padding: 0 10px 10px 10px;}
.modelList.wide li button img, .modelList.wide li a img {max-width: 180px; margin: 0 auto;}
.modelList.wide li button .car, .modelList.wide li a .car {max-width: unset; border-radius: 10px 10px 0 0;}
.modelList.wide li button .title,.modelList.wide li a .title { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; padding: 10px;}
.modelList.wide li button .title .name, .modelList.wide li a .title .name {font-size: 15px; font-weight: 700; color: var(--main-font);}
.modelList.wide li button dl, .modelList.wide li a dl {display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; padding: 0 10px; 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 dl .data dd i {color: var(--gray-500); font-size: 12px;} 
.modelList.wide li.state3::after {left: 45px;}
.modelList.wide li.no {width: 100%; border: none; font-weight: 700; position: relative; font-size: 16px; background-color: transparent; color: var(--main-font); min-height:45vh; gap: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.modelList.wide li.no::before {content: ''; width: 60px; height: 60px; background: url(../images/icons/icon_blank.svg) no-repeat center/contain; }
/* 모델 */
.wrapper[path="model_search"] .filterBox {padding: 15px 15px 25px 15px;}
.wrapper[path="model_search"] .filterBox .choice > li {align-items: baseline;}
.wrapper[path="model_search"] .filterBox .choice > li .list.brandList {width: 100%;}
.wrapper[path="model_search"] .orderList {flex-direction: column; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 5px;}
.wrapper[path="model_search"] .orderList .searchBox { position: relative;}
.wrapper[path="model_search"] .orderList .searchBox input {padding: 8px 30px 8px 10px; max-width: 150px; border-radius: 30px; background-color: var(--bg-white);}
.wrapper[path="model_search"] .orderList .box:last-child {align-self: flex-end;}
.wrapper[path="model_search"] .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;}
.wrapper[path="model_search"] .orderList .box { display: flex; gap: 10px; align-items: center;}
.wrapper[path="model_search"] .orderList .box .searchCnt { position: relative; color: var(--primary-orange); font-weight: 700;}
.wrapper[path="model_search"] .orderList .box .searchCnt::before { content: "총 ";}
.wrapper[path="model_search"] .orderList .box .searchCnt::after { content: " 대";}
.modelBox .modelList.wide {gap: 15px;}
.modelBox .modelList.wide li {background-color: #f8f8f8;}
.modelBox .modelList.wide li a .car {background-color: var(--bg-white);}
.modelBox .modelList.wide li:hover {border-color: var(--navy-font);}
.modelBox .modelList.wide li.no {background-color: var(--bg);}
.modelBox .popup .content .noticeBox { padding: 10px; border-radius: 10px; margin: 8px 0; align-items: center; text-align: center; color: var(--main-font);}
.modelBox .popup .content .noticeBox .title {font-size: 15px; font-weight: 700; color: var(--white);}
.modelBox .popupSlide {bottom: 60px; z-index: 48;}
.modelBox .popupSlide .frame .panelContent {min-height: auto;}
/* 모델 상세 */
.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 {display: flex; justify-content: center; max-width: 400px; margin: 0 auto;}
.modelBox .modelDetail .left .image img {width: 100%;} 
.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 { position: relative; width: 100%; word-break: keep-all; color: var(--navy-font); padding-left: 10px;}
.modelBox .modelDetail .right h3.title::before {position: absolute; content: ''; background-color: var(--navy-font); top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 60%; border-radius: 2px;}
.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); 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; word-break: keep-all;}
.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);}

/* 모델 상세 - 가격표/카탈로그 */
.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) {
    .brandList li {width: calc(33.3% - 10px);}
    .filterBox .choice > li .list.btnCapital li {width: calc(33.3% - 10px);}
}
@media screen and (min-width: 400px) {
    .modelList.wide li {width: calc(50% - 7.5px);}
}
@media screen and (min-width: 600px) {
    .brandList li {width: calc(16.6% - 8.3px);}
    .modelList li {width: calc(33.3% - 10px);}
    .modelList.wide li {width: calc(33.3% - 10px);}
    .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);}
    .modelList li {width: calc(16.6% - 12.6px);}
    .brandList li {width: calc(12.5% - 8.75px)}
    
}
@media screen and (min-width: 1000px) {
    .wrapper[path="model_search"] .filterBox .choice > li > .title {margin-top: 0;}
    .modelList li {width: calc(16.6% - 12.5px);}
    .modelList.wide li a .price {font-size: 18px;}
    .brandBox{width: calc(100% - 75px);}
    .brandList li {width: calc(8.33% - 9.16px)}
    .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% - 11.25px);}
}
@media (hover: hover) and (pointer: fine) {
    .brandList li:hover button {background-color: var(--gray-100);}
    .modelBox .infoBox .gradeList .list li .like:hover {background: url(../images/icons/icon_like_on.svg) no-repeat center; background-size: 50%;}
    .modelList li:hover a, .modelList li:hover button { background-color: var(--gray-100); /* transform: scale(1.1); transition: transform 0.3s ease-in-out; */}
    .modelList li.on:hover a, .modelList li.on:hover button {background-color: var(--orange-100);}
    .discountsList > .buttonBox button:hover {background-color: var(--gray-100); border-color: var(--gray-100);}
}/* 비교하기 */
.wrapper[path="model_compare"] .mainTop {padding: 15px 0 0 70px;}
.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"] .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: 70px; left: 50%; transform: translateX(-50%); left: 50%; z-index: 51; max-width: 1170px; width: 100%; border-radius: 15px; background-color: var(--bg); padding: 0 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: -50px; right: 0;}
.wrapper[path="model_compare"] .estmCell .vehicle.open .btn .btnEstmVehicleOpen { width: 40px; height: 40px; 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;}
/* .wrapper[path="model_compare"] .container main { overflow-x: auto;} */
.compareBox { /* min-width: 1200px; max-width: max-content; margin: 0 auto; */ position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; background-color: var(--bg);}
.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 .body {min-width: max-content;} */
.compareBox .comRight .horizonScroll table tbody tr:not(.hide) {flex-wrap: unset;}
/* left영역 */
.compareBox .comLeft { width: 140px; background-color: var(--bg-white); position: sticky; top: 0; left: 0; border-bottom: 0; border-right: 0; z-index: 48;}
.compareBox .comLeft .stickyWrap {width: 140px; border: 1px solid var(--gray-300);}
.compareBox .comLeft .stickyWrap::-webkit-scrollbar {display: none;}
.compareBox .comLeft .stickyWrap .head {height: 100%;}
.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 .head .menu { position: relative; display: flex; height: 100%; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center;}
.compareBox .comLeft .head .menu .menuList { position: relative; color: var(--gray-500); padding: 3px 9px; padding-right: 18px; }
.compareBox .comLeft .head .menu .menuList::after {content: ''; position: absolute; transform: translateY(-50%) rotate(-90deg); top: 50%; width: 18px; height: 18px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center/contain;}
.compareBox .comLeft .head .menu .subList:not(.hide) { width: 100%; position: absolute; top: 60%; padding: 10px 15px; border-radius: 10px; background-color: var(--bg-white); border: 1px solid var(--gray-300); display: flex; flex-direction: column; align-items: center; flex-wrap: nowrap; z-index: 1;}
.compareBox .comLeft .head .menu .subList li{ width: 100%; padding: 5px 0; text-align: center;}
.compareBox .comLeft .head .menu .subList li button {width: 100%;}
.compareBox .comLeft .body ul li .mainTopic {text-align: center; font-weight: 700; padding: 10px; background-color: var(--primary-navy); color: var(--white); border-bottom: 1px solid var(--gray-300); } 
.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; letter-spacing: -.5px; gap: 3px; font-size: 12px; padding: 10px 5px; text-align: center; word-break: keep-all; color: var(--gray-500); font-weight: 500;}
.compareBox .comLeft .body ul li .sub > li.cate { background-color: var(--gray-200); border-top: 0; color: var(--navy-font);}
.compareBox .comLeft .body ul li .sub > li button {text-decoration: underline solid #d1d1d1; text-underline-offset: 2px; color: var(--gray-500); font-size: 13px; }
.compareBox .comLeft .body ul li .sub > li button:hover { color: var(--main-font); text-decoration-color: var(--gray-400);}
.compareBox .comLeft .body ul li .sub table {table-layout: fixed;}
.compareBox .comLeft .body ul li .sub table tbody tr td { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; height: 42px; color: var(--gray-500);}
.compareBox .comLeft .body ul li .sub table tbody tr td:first-child {width: 43px;}
.compareBox .comLeft table tbody tr td {letter-spacing: -.5px; }
/* right 영역 */
.compareBox .comRight {background-color: var(--bg); overflow-x: auto; overflow-y: hidden;} 
.compareBox .comRight .horizonScroll { position: relative; 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; } 
.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); 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/icon_visibility_off.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: 50%; transform: translateX(-50%);}
.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_white.svg) no-repeat center; background-size: 65%; background-color: var(--gray-300); border-radius: 50%;}
.compareBox .comRight table tbody tr td { position: relative; min-height: 42px; background-color: var(--bg-white); width: 265px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; flex-direction: row; letter-spacing: -.5px; 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-200); 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: 40px; 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); justify-content: flex-start; }
.compareBox .comRight table tbody tr:not(.default) td.mask .selBox {justify-content: flex-end; }
.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-size: 13px;};
.compareBox .comRight .itemBox td button:hover { color: var(--main-font); text-decoration-color: var(--gray-400);}
.compareBox .comRight .itemBox td a { font-size: 13px; position: relative; }
.compareBox .comRight .itemBox td a::after { content: ""; position: absolute; width: 18px; height: 20px; margin-left: 5px; 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); min-width: 1060px;}
.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_white.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_white.svg) no-repeat center/contain; transform: translateY(-50%) rotate(0deg);}
.compareBox .comRight .body .mainTopic .itemClassify { position: absolute; top: 0; right: 40px; width: 120px; height: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 10px;}
.compareBox .comRight .body .mainTopic .itemClassify button { padding: 3px 9px; border-radius: 30px; font-size: 12px; border: 1px solid var(--white); color: var(--white)}
.compareBox .comRight .body .mainTopic .itemClassify button::after { display: none; }
.compareBox .comRight .body .mainTopic .itemClassify button.on { background-color: var(--bg-white); color: var(--navy-font); border-color: var(--navy-font);}
/* 총 차량가격 , 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: 60px; 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 8px; background-color: var(--primary-orange); border: 1px solid var(--primary-orange); color: var(--white); border-radius: 5px; font-size: 13px; }
.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 .resultBox tbody tr td .gap {top: 2px; right: 10px;}
.compareBox .comRight .resultBox tbody tr td {justify-content: flex-end; align-items: stretch; height: 70px; background-color: var(--bg-white);}
/* .compareBox .comRight .stickyWrap.fixed {overflow: hidden;} */
.compareBox .comRight .stickyWrap.fixed table tbody td {padding: 10px 15px;}
.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;}
.compareBox .comRight .optionList li button::before, .compareBox .comRight .optionList li label::before { top: 10px; left: 0;}
.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;}
.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"] .estmCell .vehicle.open .btn {top: 1px;}
    .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"] .mainTop {padding: 15px 0 0 100px;}
    .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 {left: 15px;}
    .compareBox .comLeft::before { content: ''; position: absolute; top: 0; left: -16px; width: 16px; background-color: var(--bg); height: 100%; }
    .compareBox .comRight .body .mainTopic {min-width: auto;}
    .compareBox .resultBox.fixed, .compareBox .comLeft .body .price.fixed {bottom: 0;}
}
@media screen and (min-width: 1200px) {
    .wrapper[path="model_compare"] .estmBox:not(.hide) {padding: 0;}
    .wrapper[path="model_compare"] .container main .inner { padding: 0 15px;}
}
@media screen and (min-width: 1350px) {
    .wrapper[path="model_compare"] .estmBox:not(.hide) {max-width: 1200px; transform: translateX(calc(-50% + 15px));}
    .wrapper[path="model_compare"] .container main {position: relative; width: 100%;}
    .wrapper[path="model_compare"] .container main .inner .mainTop {max-width: 1200px; width: 100%; padding: 15px 0 0 55px;}
    .compareBox {min-width: 1200px; max-width: max-content; margin: 0 auto;}
    .compareBox .comLeft {left: 95px;}
    .compareBox .comRight {overflow: visible;}
    
}
@media screen and (min-width: 1400px) {  
    .wrapper[path="model_compare"] .header .inner .menuHome {left: 0;} 
    .wrapper.menuOpen .compareBox .comLeft {left: 255px;}
    .wrapper[path="model_compare"] .container main .inner {min-width: unset; max-width: unset; align-items: center;}
    .wrapper[path="model_compare"] .estmBox:not(.hide) {transform: translateX(calc(-50% + 40px)); }
    .wrapper[path="model_compare"].menuOpen .estmBox:not(.hide) {transform: translateX(calc(-50% + 120px)); }
}

/* 새창팝업 예외처리 */ 
.wrapper[path="model_compare"].openTab .mainTop {padding: 15px 15px 0 15px; margin-bottom: 15px;}
.wrapper[path="model_compare"].openTab .mainTop .right .close {display: block;}
.wrapper.openTab .compareBox .resultBox.fixed, .wrapper.openTab .compareBox .comLeft .body .price.fixed {bottom: 0;}
@media screen and (min-width: 1000px) {
    .wrapper[path="model_compare"].openTab .mainTop {padding: 15px 0 0 0;}
    .wrapper[path="model_compare"].openTab .inner {margin: unset;}
}
@media screen and (min-width: 1350px) {
    .wrapper[path="model_compare"].openTab .container main .inner .mainTop {padding: 15px 0 0 0;;}
    .wrapper[path="model_compare"].openTab .estmBox:not(.hide) {transform: translateX(-50%);}
    .wrapper[path="model_compare"].openTab .container {margin-left: 0;}
    .wrapper[path="model_compare"].openTab:not(.menuOpen) .header .inner .menuHome {left: 15px;}
    .wrapper[path="model_compare"].openTab:not(.menuOpen) .compareBox .comLeft {left: 15px;}
    .wrapper[path="model_compare"].openTab .container main .inner {align-items: flex-start;}
}

/* 판매조건 */ 
.wrapper[path^="discount"] .noticeBox { border: 1px solid var(--primary-navy); font-weight: 500; margin: 15px 0; border-radius: 10px;}
.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 .btnGoVehicle span {position: relative; padding-right: 20px; color: var(--gray-500); font-size: 13px;}
.discountBox .discount .fullList .box .modelInfo .btnGoVehicle span:hover {text-decoration: underline;}
.discountBox .discount .fullList .box .modelInfo .btnGoVehicle span::after {position: absolute; content: ''; width: 20px; height: 20px; top: 50%; right: 0; transform: translateY(-50%) rotate(-90deg); background: url(../images/icons/icon_arrowdown.svg) no-repeat center/contain;} */
.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: var(--bg-white); }
.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: var(--bg-white);}
.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 .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 .car, .fastshipBox .modelList li a .car {background-color: var(--gray-200);}
.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 .option span.on {color: var(--primary-orange); } */
.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 .color span.on {color: var(--primary-orange); } */
.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 .cont .my span.on {color: var(--primary-orange); } */
.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); }
/* 재고차 예외처리 */
.wrapper[path^="stock"] .filterBox .choice {padding-top: 0;} 
.fastshipBox.stock .fastshipList li .memo { width: 100%; font-size: 12px; color: var(--gray-400);}
.fastshipBox.stock .fastshipList > li .list li .name {padding-right: 0;}
.fastshipBox.stock .fastshipList > li .list li .priceInfo .date {width: 100%; text-align: right;} 
.fastshipBox.stock .fastshipList > li .list li .priceInfo .price {width: 100%;}
.fastshipBox.stock .fastshipList > li .list li .memo span.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^="finance"] .controlBox .box { width: 100%; justify-content: center; }
.wrapper[path^="finance"] .controlBox .box .set .title {width: 70px;}
.wrapper[path^="finance"] .controlBox .box .set .inputBox, .wrapper[path^="finance"] .controlBox .box .set .selectBox {width: calc(100% - 70px);}
.wrapper[path^="finance"] .controlBox .box .set .inputBox input, .wrapper[path^="finance"] .controlBox .box .set .selectBox select {/* color: var(--primary-navy); */font-weight: 700;}
.wrapper[path^="finance"] .controlBox .box .set .inputBox .cnt {font-size: 12px; color: var(--primary-orange);}
.wrapper[path^="finance"] .orderList {flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px;}
.wrapper[path^="finance"] .orderList .repay:not(.hide) {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px 10px; font-size: 12px; color: var(--gray-500);}
.wrapper[path^="finance"] .orderList .repay span {position: relative; padding-left: 20px;}
.wrapper[path^="finance"] .orderList .repay span::before {width: 15px; height: 15px; position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%);}
.wrapper[path^="finance"] .orderList .repay span.equal::before {background: url(../images/icons/icon_equal.png) no-repeat center/contain;}
.wrapper[path^="finance"] .orderList .repay span.principal::before {background: url(../images/icons/icon_principal.png) no-repeat center/contain;}
.wrapper[path^="finance"] .orderList .repay span.nofee::before {background: url(../images/icons/icon_nofee.png) no-repeat center/contain; }
.wrapper[path^="finance"] .orderList .repay span.norecord::before {background: url(../images/icons/icon_norecord.png) no-repeat center; background-size: 80%;}
.wrapper[path^="finance"] .orderList .check {display: flex; gap: 10px; align-self: flex-end;}
.wrapper[path^="finance"] .noticeBox .title { position: relative; font-weight: 700; padding-left: 25px;}
.wrapper[path^="finance"] .noticeBox .title::before {position: absolute; content: ''; top: 50%; transform: translateY(-50%); left: 0; width: 18px; height: 18px; background: url(../images/icons/icon_help_orange.svg) no-repeat center/contain;}
.wrapper[path="finance_compareFinc"] .finContBox .list li .content .box.price .rate::before { display: none; content: "기준"; position: absolute; top: 50%; left: 75px; transform: translateY(-50%); font-weight: 700; color: var(--gray-700); }
.wrapper[path="finance_compareFinc"] .finContBox .list li .content .box.rate span:not(.price) { color: rgba(0,0,0,.3);}
.wrapper[path="finance_compareFinc"] .finContBox .list li .content .box.rate span.on:not(.price) {color: var(--main-font); }
.wrapper[path='finance_compareCard'] .finContBox .list li .content .box.price .rate:nth-child(1)::before { display: none; content: "1천 만원~"; position: absolute; top: 50%; left: 75px; transform: translateY(-50%); font-weight: 700; color: var(--gray-700); }
.wrapper[path='finance_compareCard'] .finContBox .list li .content .box.price .rate:nth-child(2)::before { display: none; content: "2천 만원~"; position: absolute; top: 50%; left: 75px; transform: translateY(-50%); font-weight: 700; color: var(--gray-700); }
.wrapper[path='finance_compareCard'] .finContBox .list li .content .box.price .rate:nth-child(3)::before { display: none; content: "3천 만원~"; position: absolute; top: 50%; left: 75px; transform: translateY(-50%); font-weight: 700; color: var(--gray-700); }
.wrapper[path='finance_compareCard'] .finContBox .list li .content .box.price .rate:nth-child(4)::before { display: none; content: "4천 만원~"; position: absolute; top: 50%; left: 75px; transform: translateY(-50%); font-weight: 700; color: var(--gray-700); }
.wrapper[path='finance_compareCard'] .finContBox .list li .content .box.price span.rate:not(.price) { color: rgba(0,0,0,.3);}
.wrapper[path='finance_compareCard'] .finContBox .list li .content .box.price span.rate.on:not(.price) {color: var(--main-font);}
.financeBox .buttonBox {margin-top: 30px;}
.financeBox .buttonBox button {max-width: 150px;} 
.financeBox .noticeBox {margin: 15px 0;}
.finContBox .index { gap: 10px; text-align: center; display: none; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-end; border-bottom: 1px solid var(--gray-300); }
.finContBox .index .box.name {gap: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; width: 38%; /* border-bottom: 1px solid var(--gray-300); */}
.finContBox .index .box.name span:not(.check) { display: inline-block; width: 31%; padding: 5px; /* border-bottom: 1px solid var(--gray-300); */ border-radius: 0; color: var(--main-font);}
.finContBox .index .box.name span.repayInfo { display: inline-block; padding: 5px; border-bottom: 0; border-radius: 0;}
.finContBox .index .box.name span.check { width: 7%; }
.finContBox .index .box.rate { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; color: var(--main-font); }
.finContBox .index .box.rate[length='6'] { width: 41%; }
.finContBox .index .box.rate[length='2'] { width: 14%; }
.finContBox .index .box.rate .subBox { gap: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 100%; }
.finContBox .index .box.rate .subBox.first { margin-bottom: 10px; } 
.finContBox .index .box.rate .subBox.first span.rate  { /* font-size: 16px; background-color: var(--primary-navy); color: var(--white); */ padding: 7px; display: block; width: 100%; border-bottom: 1px solid var(--gray-300); } 
.finContBox .index .box.rate .subBox span { padding: 5px; font-weight: bold;}
.finContBox .index .box.rate[length='6'] .subBox span { width: 16%; }
.finContBox .index .box.rate[length='6'] .subBox span.price { width: 20%; }
.finContBox .index .box.rate[length='2'] .subBox:not(.first) span.rate { width: 40%; }
.finContBox .index .box.rate[length='2'] .subBox:not(.first) span.price { width: 60%; }
/* .finContBox .index .box.rate .subBox:not(.first) span.price { background-color: var(--gray-100); border-radius: 5px;} */
/* .finContBox .index .box.rate .subBox span.rate { color: var(--primary-navy); border: 1px solid var(--primary-navy);} */
.finContBox .index .box.charge { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: 14%;}
.finContBox .index .box.charge[length='5'] { width: 41%; } 
.finContBox .index .box.charge[length='5'] .subBox:not(.first) { display: grid; grid-template-columns: repeat(4, 20fr) 20fr; }
.finContBox .index .box.charge[length='5'] .subBox:not(.first) span { grid-column: span 1; }
/* .finContBox .index .box.charge[length='2'] { width: 14%; } */
.finContBox .index .box.charge .subBox { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 100%;}
.finContBox .index .box.charge .subBox.first { margin-bottom: 10px; width: 100%; } 
.finContBox .index .box.charge .subBox.first span.charge { /* background-color: var(--primary-orange); color: var(--white); */ padding: 7px; display: block; width: 100%; border-bottom: 1px solid var(--gray-300);}
.finContBox .index .box.charge .subBox span { white-space: nowrap; padding: 5px; font-weight: bold; color: var(--main-font);}
/* .finContBox .index .box.charge .subBox span.charge.price {background-color: var(--gray-100); border-radius: 5px; }  */
.finContBox .index .box.charge .subBox:not(.first) { gap: 10px; }
.finContBox .index .box.charge[length="2"] .subBox:not(.first) span.charge { width: 40%; }
.finContBox .index .box.charge[length="2"] .subBox:not(.first) span.price { width: 60%; /* background-color: var(--primary-orange); color: var(--white); */}
.finContBox .index .box.charge[length="5"] .subBox:not(.first) span.charge { grid-column: span 1; }
.finContBox .index .box.charge[length="5"] .subBox:not(.first) span.price { grid-column: span 1; /* background-color: var(--primary-orange); color: var(--white); */}
.finContBox .list { display: flex; flex-direction: column; gap: 15px; }
.finContBox .list li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 15px; border: 1px solid var(--gray-300); border-radius: 10px; background-color: var(--bg-white);}
.finContBox .list li .top { padding-top: 25px; width: 100%; display: flex; align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: flex-start;}
.finContBox .list li .top .sel { position: absolute; top: 8px; left: 10px; width: 30px; height: 30px; background: url(../images/icons/icon_check_line.svg) no-repeat center; background-size: 70%; font-size: 0; text-indent: -9999px; }
.finContBox .list li .top .sel.on { background-image: url(../images/icons/icon_check_on.svg); }
.finContBox .list li .top .logo { /* width: 30%; */ display: flex; align-items: center; justify-content: flex-start; margin-right: 5px; gap: 5px;}
.finContBox .list li .top .logo .company {color: var(--main-font); font-size: 13px; letter-spacing: -.5px;}
.finContBox .list li .top .logo img { max-width: 30px; background-color: var(--white); border-radius: 50%; padding: 2px;}
.finContBox .list li .top .title { /* width: 50%; */ color: var(--main-font); font-size: 13px; text-align: center; letter-spacing: -.5px; }
.finContBox .list li .top .repayInfo {/*  width: 20%; */ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 5px; margin-left: 5px;}
.finContBox .list li .top .repayInfo span {width: 20px; height: 20px; border: 1px solid var(--gray-300); border-radius: 3px; background-repeat: no-repeat; background-position: center; background-size: 10px;}
.finContBox .list li .top .repayInfo span.principal {background-image: url(../images/icons/icon_principal.png); }
.finContBox .list li .top .repayInfo span.equal {background-image: url(../images/icons/icon_equal.png);}
.finContBox .list li .top .repayInfo span.nofee {background-image: url(../images/icons/icon_nofee.png); background-size: 13px;}
.finContBox .list li .top .repayInfo span.norecord {background-image: url(../images/icons/icon_norecord.png);}
.finContBox .list li .content { display: flex; flex-direction: column; gap: 10px; }
.finContBox .list li .content .box { width: 100%; font-size: 13px; color: var(--main-font); }
.finContBox .list li .content .box:last-child { border-top: 1px solid var(--gray-300); padding-top: 10px; }
.finContBox .list li .content .box.price { display: flex; flex-direction: column; align-items: start; align-content: flex-end; flex-wrap: wrap; position: relative; gap: 5px; }
.finContBox .list li .content .box.price span { position: relative; width: 100%; text-align: right;}
.finContBox .list li .content .box.price::before { content: "캐시백"; position: absolute; top: 18px; left: 0; font-weight: 700; }
.finContBox .list li .content .box.price .rate { display: flex; align-items: center; justify-content: flex-end; }
.finContBox .list li .content .box.price .price { display: flex; align-items: center; justify-content: flex-end; font-weight: 700; }
.finContBox .list li .content .box.price .price::before { content: "금액"; position: absolute; top: 50%; left: 75px; transform: translateY(-50%);color: var(--primary-orange); }
.finContBox .list li .content .box.rate { position: relative; display: flex; flex-direction: column; align-items: start; align-content: flex-end; flex-wrap: wrap; gap: 5px; }
.finContBox .list li .content .box.rate::before { content: "수수료"; position: absolute; top: 0; left: 0; font-weight: 700; }
.finContBox .list li .content .box.rate span { position: relative; width: 100%; text-align: right;}
.finContBox .list li .content .box.rate span.price  {border-color: transparent;}
/* .finContBox .list li .content .box.rate span.price {color: var(--primary-orange); font-weight: 700;}  */
.finContBox .list li .content .box.rate span:first-child::before { content: "기준"; position: absolute; top: 50%; left: 75px; transform: translateY(-50%); color: var(--main-font); }
.finContBox .list li .content .box.rate .price::before { content: "금액"; position: absolute; top: 50%; left: 75px; transform: translateY(-50%); color: var(--primary-orange); font-weight: 700; }
.finContBox .list li .updown { display: flex; justify-content: flex-end; }
.finContBox .list li .updown button { width: 100%; height: 30px; position: relative; font-size: 0; text-indent: -9999px; }
.finContBox .list li .updown button::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center/contain; }
.finContBox .list li .updown.open button::after { transform: translate(-50%, -50%) rotate(180deg); } 
.finContBox .list li .detail { width: 100%; padding-bottom: 30px; display: none; }
.finContBox .list li .detail .detailBox {position: relative; display: flex; flex-direction: row; flex-wrap: wrap;}
.finContBox .list li .detail .detailBox .top { width: 100%; background-color: var(--gray-50); flex-direction: column; flex-wrap: wrap; justify-content: center; padding: 20px; border-radius: 10px; text-align: center; color: var(--main-font);}
.finContBox .list li .detail .detailBox .top .result {color: var(--primary-navy); display: flex; flex-direction: column; justify-content: center;}
.finContBox .list li .detail .detailBox .top .result b {font-size: 16px;}
.finContBox .list li .detail .detailBox .top .buttonBox { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); margin-top: 0;} 
.finContBox .list li .detail .detailBox .top .buttonBox button {padding: 6px 10px;} 
.finContBox .list li .detail .detailBox dl { gap: 0; padding: 10px 10px 15px 10px; max-width: 600px; margin: 0 auto;}
.finContBox .list li .detail .detailBox dl .data {border-bottom: 1px solid var(--gray-300); align-items: stretch;}
.finContBox .list li .detail .detailBox dl .data:last-child {border-bottom: none;}
.finContBox .list li .detail .detailBox dl .data dt {width: 100px; font-size: 14px; padding: 7px;}
.finContBox .list li .detail .detailBox dl .data dd {width: calc(100% - 105px); padding: 7px; white-space: normal; text-align: left;} 
.finContBox .list li .detail .detailBox dl .data dd.tableBox table tr th { padding: 3px; } 
.finContBox .list li .detail .detailBox dl .data dd.tableBox table tbody tr td { padding: 3px;}
 
@media screen and (min-width:600px){
    .wrapper[path^="finance"] .orderList {flex-direction: row; flex-wrap: nowrap;}
    .wrapper[path='finance_compareCard'] .orderList {justify-content: flex-end;}
}
@media screen and (min-width:800px){
    .wrapper[path^="finance"] .controlBox .box {padding: 30px 180px;}
    .wrapper[path^="finance"] .financeBox .controlBox .box .set { width: 50%; padding: 5px;} 
} 

@media screen and (min-width: 1000px) {
    .wrapper[path^="finance"] .controlBox .box {padding: 40px 300px;}
    .wrapper[path='finance_compareFinc'] .finContBox .list li .content .box.price .rate::before { display: none; }
    .finContBox .index { display: flex; background-color: var(--gray-50); border: 1px solid var(--gray-300); border-radius: 10px 10px 0 0; padding: 10px;}
    .finContBox .index .box.name span.check {width: 5%;}
    .finContBox .index .box.name span.name {width: 44%;}
    .finContBox .index .box.name span.repayInfo {width: 20%;}
    /* .finContBox {background-color: var(--bg-white); padding: 15px; border-radius: 10px; border: 1px solid var(--gray-300);} */
    .finContBox .list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px; background-color: var(--bg-white); border: 1px solid var(--gray-300); border-top: none; border-radius: 0 0 10px 10px;}
    .finContBox .list li { padding: 10px; border: 0; box-shadow: none; background-color: transparent; gap: 10px; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: 100%;}
    .finContBox .list li .top { flex-wrap: nowrap; padding-top: 0px; width: 38%; gap: 10px;} 
    .finContBox .list li .top .sel { position: relative; top: unset; left: unset; width: 5%; background-size: 100%;}
    .finContBox .list li .top .logo {width: 31%; justify-content: flex-start; margin-right: 0;}
    .finContBox .list li .top .title {width: 44%; }
    .finContBox .list li .top .repayInfo {width: 20%; margin-left: 0;}
    .finContBox .list li .content { gap: 10px; width: 56%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center;}
    .finContBox .list li .content .box.price { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; width:30%; gap: 10px; border: 0; padding-top: 0px;}
    .finContBox .list li .content .box.price[length='5'] { display: grid; grid-template-columns: repeat(4, 20fr) 20fr; gap: 10px; width: 75%;}
    .finContBox .list li .content .box.rate[length='6'] { display: grid; grid-template-columns: repeat(5, 16fr) 20fr; gap: 10px; width: 88%;}
    .finContBox .list li .content .box span { display: inline-block; letter-spacing: -.5px; padding: 5px; text-align: center; border: 1px solid var(--gray-100); border-radius: 7px; }
    .finContBox .list li .content .box.price .price {border-color: transparent;}
    .finContBox .list li .content .box.rate::before { display: none; }
    .finContBox .list li .content .box.price::before { display: none; }
    .finContBox .list li .content .box.rate span:first-child::before { display: none; }
    .finContBox .list li .content .box.rate .price::before { display: none; }
    .finContBox .list li .content .box.rate .price::before { display: none; }
    .finContBox .list li .content .box.price .price::before { display: none; }
    .finContBox .list li .content .box.rate span { /* background-color: #F3FBFE; */ text-align: center;}
    .finContBox .list li .content .box.rate span.rate.on {border-color: var(--gray-400);}
    .finContBox .list li .content .box.rate span.price {/*  background-color: var(--gray-100);  border-radius: 5px; */  color: var(--main-font); font-weight: 700;}
    .finContBox .list li .content .box.rate[length='2'] { display: grid; grid-template-columns: repeat(1, 16fr) 20fr; gap: 10px; width: 25%; }
    .finContBox .list li .content .box.price[length='5'] span.rate { grid-column: span 1;}
    .finContBox .list li .content .box.price[length='5'] span.rate.colspan2 { grid-column: span 2;}
    .finContBox .list li .content .box.price[length='5'] span.rate.colspan3 { grid-column: span 3;}
    .finContBox .list li .content .box.price[length='5'] span.rate.colspan4 { grid-column: span 4;}
    .finContBox .list li .content .box.price[length='5'] span.price { grid-column: span 1;}
    .finContBox .list li .content .box.rate[length='6'] span:not(.price) { grid-column: span 1; margin-right: 0; }
    .finContBox .list li .content .box.rate[length='6'] span.price {grid-column: span 1; margin-right: 0; }
    .finContBox .list li .content .box.rate[length="6"] span.colspan2 { grid-column: span 2; }
    .finContBox .list li .content .box.rate[length="6"] span.colspan3 { grid-column: span 3; }
    .finContBox .list li .content .box.rate[length="6"] span.colspan4 { grid-column: span 4; }
    .finContBox .list li .content .box.rate[length="6"] span.colspan5 { grid-column: span 5; }
    .finContBox .list li .content .box.rate[length='2'] span { grid-column: span 1; }
    .finContBox .list li .content .box.rate[length='2'] span.price { grid-column: span 1; }
    .wrapper[path='finance_compareCard'] .finContBox .list li .content .box.price span.rate.on:not(.price) {border-color: var(--gray-400);}
    .finContBox .list li .content .box.price span.rate {/*  background-color: var(--orange-100);  */display: block; text-align: center; border: 1px solid var(--gray-300);}
    .finContBox .list li .content .box.price span.price { color: var(--main-font); /* background-color: var(--gray-100); border-radius: 5px; */ display: block; text-align: center;}
    .finContBox .list li .content .box.price[length='2'] span.rate { width: 40%; border-color: var(--gray-400);}
    .finContBox .list li .content .box.rate[length='2'] span.rate { border-color: var(--gray-400);}
    .finContBox .list li .content .box.price[length='2'] span.price { width: 60%; }
    .finContBox .list li .updown button { width: 30px; background-size: 70%;}
    .finContBox .list li .detail .detailBox { max-width: 70%; margin: 15px auto; border: 1px solid var(--gray-300); border-radius: 10px;}
    .finContBox .list li .detail .detailBox .top {width: 30%; border-radius: 10px 0 0 10px;}
    .finContBox .list li .detail .detailBox .top .buttonBox {position: unset;transform: none;}
    .finContBox .list li .detail .detailBox dl {width: 70%; max-width: unset; padding: 20px;}
}


/* 인센티브 계산
.wrapper[path^="finance"] .controlBox .box .process { width: 100%; text-align: center; border-top: 1px dashed var(--gray-300); padding-top: 15px;}
.wrapper[path^="finance"] .noticeBox {align-items: center; font-weight: 700; text-align: center;}
.wrapper[path^="finance"] .popup .content .popupForm .noticeBox { align-items: center;}
.wrapper[path^="finance"] .popup .content form dl.borderType .data {width: 100%;}
.incentiveBox {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px;}
.incentiveBox .buttonBox button {max-width: 150px;}
.incentiveBox .result {display: flex; flex-direction: column; flex-wrap: nowrap;}
.incentiveBox .result .index {display: none;}
.incentiveBox .result .list {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }
.incentiveBox .result .list li {position: relative; width: 100%;}
.incentiveBox .result .list li:not(:last-child) {border-bottom: 1px solid var(--gray-300);}
.incentiveBox .result .list li a {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px; padding: 40px 15px;}
.incentiveBox .result .list li a span {font-weight: 500; color: var(--gray-500);}
.incentiveBox .result .list li a .logo { width: 100%; display: flex; }
.incentiveBox .result .list li a .logo img { max-width: 90px; margin-left: -5px;}
.incentiveBox .result .list li a .name {width: 100%; color: var(--main-font); font-weight: 700; letter-spacing: -.5px; font-size: 13px;}
.incentiveBox .result .list li a .back {position: absolute; top: 15px; right: 10px; padding-left: 35px;}
.incentiveBox .result .list li a .back::before {position: absolute;content: '캐시백'; top: 2px; left: 0; color: var(--gray-500); font-size: 12px;}
.incentiveBox .result .list li a .incen {position: absolute; bottom: 10px; right: 10px; padding-left: 45px;}
.incentiveBox .result .list li a .incen::before {position: absolute;content: '인센티브'; top: 2px; left: 0; color: var(--gray-500); font-size: 12px;}
.incentiveBox .result .list li a .rate {position: absolute; top: 12px; right: 15px; padding-left: 25px;}
.incentiveBox .result .list li a .rate::before {position: absolute;content: '금리'; left: 0; color: var(--gray-500); font-size: 13px;}
.incentiveBox .result .list li a .pmt {position: absolute; top: 50%; transform: translateY(-50%); right: 15px; padding-left: 53px;}
.incentiveBox .result .list li a .pmt::before {position: absolute;content: '월 할부금'; left: 0; color: var(--gray-500); font-size: 13px;}
.incentiveBox .result .list li a .cash {position: absolute; bottom: 10px; right: 15px; padding-left: 90px;}
.incentiveBox .result .list li a .cash::before {position: absolute;content: '캐시백/포인트'; left: 0; color: var(--gray-500);}
.incentiveBox .result .list li a .incen.through {color: var(--gray-500); text-decoration: line-through;}
.incentiveBox .result .list li.on { background-color: var(--orange-100);}
.incentiveBox .result[tab="cashback"] .list li a {padding: 10px; justify-content: flex-end;}
.incentiveBox .desc {margin-top: 15px; text-align: center; font-weight: 700; word-break: keep-all; color: var(--primary-navy); font-size: 15px;} 
금융상담 - desktop hover 
.wrapper.desktop .incentiveBox .result .list li:hover {background-color: var(--gray-50);}
.wrapper.desktop .incentiveBox .result .list li:hover a span {color: var(--main-font);}
.wrapper.desktop .incentiveBox .result .list li.on:hover {background-color: var(--gray-50);} 
  @media screen and (min-width:800px){
    .wrapper[path^="finance"] .controlBox .box {padding: 20px 200px;}
    .wrapper[path^="finance"] .controlBox .box .set:not(.hide) {width: 50%; max-width: 320px;}
    .incentiveBox .result .index { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; padding: 12px 20px; color: var(--gray-50); background-color: var(--primary-navy); border-radius: 10px;}
    .incentiveBox .result .index span { font-size: 15px; font-weight: 700; text-align: right;}
    .incentiveBox .result .index .rate {width: 15%;}
    .incentiveBox .result .index .cash {width: 15%;}
    .incentiveBox .result .index .pay {width: 15%;}
    .incentiveBox .result .index .back {width: 15%;}
    .incentiveBox .result .index .cashPoint {width: 15%;}
    .incentiveBox .result .index .incen {width: 15%;}
    .incentiveBox .result .index .point {width: 15%;}
    .incentiveBox .result .list li a {padding: 12px 20px;}
    .incentiveBox .result .list li a span {text-align: right;}
    .incentiveBox .result .list li a .logo {width: 15%;}
    .incentiveBox .result .list li a .logo img {max-width: 100px;}
    .incentiveBox .result .list li a .name { width: 40%; text-align: left; font-size: 14px;}
    .incentiveBox .result .list li a .back {position: unset; padding-left: 0; width: 15%;}
    .incentiveBox .result .list li a .back::before {content: unset;}
    .incentiveBox .result .list li a .incen {position: unset; padding-left: 0; width: 15%;}
    .incentiveBox .result .list li a .incen::before {content: unset;}
    .incentiveBox .result .list li a .rate {position: unset; padding-left: 0; width: 15%;}
    .incentiveBox .result .list li a .rate::before {content: unset;}
    .incentiveBox .result .list li a .pay {position: unset; padding-left: 0; width: 15%; transform: none;}
    .incentiveBox .result .list li a .pay::before {content: unset;}
    .incentiveBox .result .list li a .back {position: unset; width: 15%;padding-left: 0;}
    .incentiveBox .result .list li a .back::before {content: unset;}
    .incentiveBox .result .list li a .pmt {position: unset; width: 15%;padding-left: 0; transform: unset;}
    .incentiveBox .result .list li a .pmt::before {content: unset;}
    .incentiveBox .result .list li a .point {width: 15%;}
    .incentiveBox .result[tab="cashback"] .list li a {padding: 12px 20px; gap: 0;}
    .incentiveBox .result[tab="cashback"] .list li a .name {width: 55%;}
} */

/* 금융상담 - 목록 */
.financeListBox {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 60px;}
.financeListBox .financeList {display: flex; flex-direction: column; flex-wrap: nowrap; background-color: var(--bg-white); border-radius: 10px; border: 1px solid var(--gray-300);} 
.financeListBox .financeList li { position: relative; border-bottom: 1px solid var(--gray-300); color: var(--main-font);}
.financeListBox .financeList li:last-child {border-bottom: none;}
.financeListBox .financeList li a {display: flex; flex-direction: row; flex-wrap: wrap; padding: 15px;}
.financeListBox .financeList li a .title {display: flex; flex-direction: row; flex-wrap: wrap; gap: 0 5px;}
.financeListBox .financeList li a .title .model {font-weight: 500; word-break: keep-all;}
.financeListBox .financeList li a .desc {width: 100%; position: relative; padding-left: 22px; color: var(--gray-500); font-weight: 500;}
.financeListBox .financeList li a .desc::before {position: absolute; content: ''; top: 2px; left: 0; width: 16px; height: 16px; background: url(../images/icons/icon_radio_on.svg) no-repeat center/contain;}
.financeListBox .financeList li a .date {width: 100%; text-align: right; font-size: 12px; color: var(--gray-500);}
.financeListBox .buttonBox button {max-width: 150px;}
/* 금융상담 상세 뷰 */
.finDetailBox {margin-bottom: 0; background-color: var(--bg-white); border: 1px solid var(--gray-300); border-radius: 10px; padding: 15px;}
.finDetailBox dl {padding: 0; border: none;}
.finDetailBox dl .data dd .add {margin-left: 3px; padding: 3px 9px; border-radius: 5px; background-color: var(--primary-navy); color: var(--white); font-weight: 700; font-size: 12px;}
.finDetailBox dl .data dd .desc { width: 100%; font-size: 13px; letter-spacing: -.5px; font-weight: 500; color: var(--gray-500);}
.finDetailBox dl .data dd a {word-break: break-all; text-decoration: underline;}
.finDetailBox dl .data.memo dd {flex-direction: column; gap: 0; align-items: flex-start;}
.finDetailBox .buttonBox {margin: 60px 0 15px 0;}
.finDetailBox .buttonBox button {flex: none; background-color: var(--gray-200); border-color: var(--gray-200);}
@media screen and (min-width:600px){
    .financeListBox .financeList li a {gap: 5px;}
    .financeListBox .financeList li a .title { width: 100%; padding-right: 80px;}
    .financeListBox .financeList li a .date {position: absolute; top: 10px; right: 10px; width: auto;}
    .finDetailBox dl .data.memo {width: 100%;}
}
/* 리스렌트 Tip */
.capitalButton {margin-bottom: 15px;}
.capitalButton .tip { font-size: 0; gap: 0; background-color: var(--white);}
.capitalButton .tip img { width: 100px;}
.capitalButton .commonBtn button { font-size: 0; padding: 5px; background-color: var(--white); max-width: 150px; border: 1px solid var(--gray-300); border-radius: 10px;}
.capitalButton .commonBtn button.on {border-color: var(--primary-orange);}
.capitalButton .commonBtn button img {width: 90px;}
.capitalButton h5 {color: var(--gray-500); font-size: 15px; margin: 10px 0; border-top: 1px dashed var(--gray-300); padding-top: 5px;}
.faqBox .listTit { position: relative; background-color: var(--gray-200); padding: 10px 10px 10px 20px; border-radius: 10px; margin-bottom: 15px;}
.faqBox .listTit::before {position: absolute; content: ''; top: 50%; left: 10px; transform: translateY(-50%); width: 4px; height: 30%; border-radius: 2px; background-color: var(--primary-orange);}
.faqBox .listTit span {font-size: 15px; font-weight: 700;}
.faqBox .listTit span b {color: var(--primary-orange);}
.faqBox .tipList { display: flex; flex-direction: row; flex-wrap: wrap; gap: 15px; margin-bottom: 10px; }
.faqBox .tipList li {width: 100%; }
.faqBox .tipList li.nodata {width: 100%;}
.faqBox .tipList li > a { position: relative; display: block; padding: 7px 35px 7px 15px; color: var(--main-font); border: 1px solid var(--gray-300); border-radius: 10px; font-weight: 500; background-color: var(--bg-white);}
.faqBox .tipList li > a::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;}
.faqBox .tipList li.open > a { border-color: var(--primary-orange); color: var(--primary-orange);}
.faqBox .tipList li.open > a::after {transform: translateY(-50%) rotate(180deg); background: url(../images/icons/icon_arrowdown_orange.svg) no-repeat center/contain;}
.faqBox .tipList li > a button {padding: 2px 8px; font-size: 12px; background-color: var(--gray-100); border-radius: 5px; color: var(--gray-500); position: absolute; right: 35px;}
.faqBox .tipList li .cont {display: none;}
.faqBox .tipContBox .onlineLink { display: inline-block; background: var(--primary-navy); color: var(--white); padding: 7px 30px 7px 10px; border-radius: 10px; margin-left: 10px; position: relative;}
.faqBox .tipContBox .onlineLink::after {position: absolute; content: ''; top: 50%; right: 7px; transform: translateY(-50%) rotate(90deg); width: 18px; height: 18px; background: url(../images/icons/icon_arrowup_white.svg) no-repeat center/contain;}
.faqBox p {margin: 10px; font-weight: 500;}
.faqBox .downBox {border: 1px solid var(--gray-300); border-radius: 10px; background-color: var(--bg-white);}
.faqBox .downBox h5 { position: relative; font-size: 15px; padding: 7px 35px 7px 20px; cursor: pointer;}
.faqBox .downBox h5::before {position: absolute; content: ''; top: 50%; left: 10px; transform: translateY(-50%); width: 4px; height: 30%; border-radius: 2px; background-color: var(--primary-orange);}
.faqBox .downBox h5::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;}
.faqBox .downBox h5.open::after {transform: translateY(-50%) rotate(180deg);}
.faqBox .downBox ul {padding-bottom: 10px; display: none;}
.faqBox .downBox ul li {position: relative; padding: 10px 100px 10px 10px; border-bottom: 1px dashed var(--gray-300);}
.faqBox .downBox ul li:last-child {border-bottom: 0; padding-bottom: 0;}
.faqBox .downBox ul li a {position: absolute; top: 10px; right: 10px; padding: 3px 27px 3px 9px; font-size: 12px; font-weight: 600; color: var(--white); background-color: var(--primary-navy); border-radius: 5px;}
.faqBox .downBox ul li a::after { position: absolute; content: ''; width: 18px; height: 18px; top: 50%; right: 7px; transform: translateY(-50%); background: url(../images/icons/icon_download.svg) no-repeat center/contain;}
.faqBox .buttonBox {justify-content: flex-start;}
.faqBox .buttonBox button {max-width: 150px;}
.contBox .moreButton {position: fixed; bottom: 75px; right: 15px;}
@media screen and (min-width:600px){
    .faqBox .tipList li {width: calc(50% - 7.5px);}
}
@media screen and (min-width:800px){
    .faqBox .tipList li {width: calc(33.3% - 10px);}
}
@media screen and (min-width:1000px){
    .contBox .moreButton {bottom: 15px;}
}
@media (hover: hover) and (pointer: fine) {
    .financeListBox .financeList li:hover {background-color: var(--gray-100);}
    .capitalButton .commonBtn button:hover img {transform: scale(1.1); transition: ease-out .3s;}
    .faqBox .tipContBox .onlineLink:hover {background-color: var(--primary-darknavy);} 
    .faqBox .downBox ul li a:hover {background-color: var(--primary-darknavy);}
}

/* 유틸리티 - 공통 */
.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: var(--bg-white); }
.wrapper[path^="utility"] .descBox h3 {position: relative; padding-left: 30px; color: var(--primary-navy);}
.wrapper[path^="utility"] .descBox h3::before {position: absolute; content: ''; top: 50%; transform: translateY(-50%); left: 0; width: 20px; height: 20px; background: url(../images/icons/icon_info_navy.svg) no-repeat center/contain;}
.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, .controlBox .box .set .selectBox {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 { 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; margin-top: 30px;}
.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;}
}

/* 게시판 */ 
.wrapper[path^="board_excel"] .btnCapital {margin-bottom: 10px;}
.boardBox .index {display: none;}
.boardBox .moreButton {position: fixed; bottom: 75px; right: 15px;}
.boardList {display: flex; flex-direction: column; flex-wrap: nowrap; background-color: var(--bg-white); border-radius: 10px; border: 1px solid var(--gray-300); overflow: hidden;}
.boardList li { position: relative; border-bottom: 1px solid var(--gray-100); color: var(--main-font);}
.boardList li:last-child {border: none;}
.boardList li a {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 15px;}
.boardList li a .theme {font-weight: 600; word-break: keep-all;}
.boardList li a .subject {width: 100%; text-align: left; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 5px; margin: 5px 0;}
.boardList li a .subject > span:not(.cmnt) { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.boardList li a .subject .cmnt {font-size: 12px; color: var(--primary-orange); font-weight: 700;}
.boardList li a .who { position: relative; width: 60%; padding-left: 25px;}
.boardList li a .who::before {position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 18px; height: 18px; background: url(../images/icons/icon_person.svg) no-repeat center / contain;}
.boardList li a .date {width: 40%; text-align: right; color: var(--gray-400); font-size: 12px;}
.boardList li a .date.today {color: var(--primary-orange);}
/* .boardList li.notice {background-color: var(--primary-lightnavy); color: var(--white);} */
.boardList li.notice.now {background-color: var(--gray-100); color: var(--main-font);}
.boardList li.notice.now a .date {color: var(--main-font);}
.boardList li.notice a .date {color: var(--white);}
.boardList li.notice a .theme {background-color: var(--primary-orange); color: var(--white); padding: 3px 15px; border-radius: 7px; font-size: 13px; }
.boardList li.now {background-color: var(--gray-100);}
.boardList li.blind {pointer-events: none;}
.boardList li.blind::after {position: absolute; content: ''; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95%; height: 3px; background-color: var(--primary-navy); z-index: 1;}
/* 게시판 - 공지사항 분류 제거 */
.boardBox.notice .boardList li a .subject {width: 100%;}       
.boardBox.notice .index .theme {display: none;}
.boardBox.notice .boardList li a .theme {display: none;}
/* 게시판 뷰 */
.boardView {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px; color: var(--main-font);}
.boardView .content {display: flex; flex-direction: column; flex-wrap: nowrap; border: 1px solid var(--gray-300); background-color: var(--bg-white); border-radius: 15px; padding: 15px;}
.boardView .content .top {display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; /* background-color: var(--primary-lightnavy); color: var(--white); padding: 15px; border-radius: 10px; */ font-size: 16px; }
.boardView .content .top .theme {font-weight: 600; white-space: nowrap; text-align: center;}
.boardView .content .top .subject { font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.boardView .content .writer {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 15px 0;}
.boardView .content .writer .who { font-size: 12px; color: var(--gray-500); }
.boardView .content .writer .date { font-size: 12px; color: var(--gray-400); }
.boardView .content .writer [class^="sns"] {position: relative; padding-left: 30px; }
.boardView .content .writer [class^="sns"]::before { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 18px; height: 18px; content: ''; background: url(../images/icons/icon_person.svg) no-repeat center/contain;}
.boardView .content .view {padding-top: 15px; font-weight: 500; word-break: keep-all; border-top: 1px solid var(--gray-300); font-size: 15px;} 
.boardView .content .website {margin-top: 20px; margin-bottom: 20px; }
.boardView .content .website a {color: var(--primary-blue); font-weight: 600; }
.boardView .content .file {padding: 0 15px;}
.boardView .content .file:before {content:"[파일]"; font-weight: 500; margin-right: 5px; color: var(--gray-500);}
.boardView .content .file a { font-weight: 500; text-decoration: underline; font-size: 13px; color: var(--gray-500);}
.boardView .content .photo { text-align: center; margin: 50px 0;}
.boardView .content .youtube { position: relative; width: 100%; padding-bottom: 75%; margin-bottom: 60px; margin-top: 20px; overflow: hidden;}
.boardView .content .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.boardView .content .youtube .caption { position: absolute; width: 100%; bottom: -30px; left: 0; text-align: center; }
.boardView .content .caption {font-weight: 700; color: var(--gray-500); font-size: 13px;}
.boardView .content .buttonBox {margin-top: 15px;}
.boardView .content .buttonBox a, .boardView .content .buttonBox button {flex: none; padding: 3px 9px;}
.boardView .content .buttonBox select {padding: 3px 24px 3px 9px;}
.boardView .content .buttonBox form { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px;}
.boardView .content table {margin: 10px 0;}
.boardView .content table tr th {padding: 5px; background-color: var(--gray-50); border: 1px solid var(--gray-300);}
.boardView .content table tr td {padding: 5px; border: 1px solid var(--gray-300);}
/* 게시판 뷰 - 댓글 */
.boardView .commentBox { display: flex; flex-direction: column; flex-wrap: nowrap; color: var(--main-font);}
.boardView .commentBox .comment {width: 100%;}
.boardView .commentBox .comment .textBox { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; border-radius: 15px; padding: 15px; background-color: var(--bg-white); border: 1px solid var(--gray-300);}
.boardView .commentBox .writer { position: relative; width: 55%; padding-left: 30px;}
.boardView .commentBox .writer::before { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 22px; height: 22px; content: ''; background: url(../images/icons/icon_person.svg) no-repeat center/contain;}
.boardView .commentBox .comment .textBox .btnRadio {width: 45%; font-size: 13px; justify-content: flex-end;}
.boardView .commentBox .comment .textBox .btnRadio label input[type="radio"] + span {padding: 2px 6px; font-size: 12px;}
.boardView .commentBox .comment .textBox textarea {border: none; margin: 5px 0; padding: 7px 0; min-height: 80px; background-color: transparent;}
.boardView .commentBox .comment .textBox .sendInfo {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end; width: 100%; gap: 10px;}
.boardView .commentBox .comment .textBox .sendInfo .length {font-size: 12px; color: var(--gray-400);}
.boardView .commentBox .comment .textBox .sendInfo .btn button { background: url(../images/icons/icon_send.svg) no-repeat center; background-size: 65%; width: 30px; height: 30px; background-color: var(--gray-300); border-radius: 50px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.boardView .commentBox .comment .textBox .sendInfo .btn button.on {background-color: var(--primary-orange);}
.boardView .commentBox .comCount .cnt {color: var(--primary-orange); font-weight: 700;}
.boardView .commentBox .division {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; margin: 15px 0;}
.boardView .commentBox .division .comCount {color: var(--main-font); white-space: nowrap; font-size: 16px;}
.boardView .commentBox .division .orderList {margin: 0; justify-content: flex-end;}
.boardView .commentBox .list {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; margin-bottom: 15px;}
.boardView .commentBox .list li { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; padding: 15px; border: 1px solid var(--gray-300); border-radius: 20px; background-color: var(--bg-white);}
.boardView .commentBox .list li.depth1::before, .boardView .commentBox .list li.depth2::before, .boardView .commentBox .list li.depth3::before {content: '↪'; position: absolute; left: -30px; top: 5px; font-size: 18px; font-weight: 700;}
.boardView .commentBox .list li.depth1 {margin-left: 25px;}
.boardView .commentBox .list li.depth2 {margin-left: 55px;}
.boardView .commentBox .list li.depth2 .comment .textBox .writer, .boardView .commentBox .list li.depth3 .comment .textBox .writer {width: 100%;}
.boardView .commentBox .list li.depth2 .comment .textBox .btnRadio, .boardView .commentBox .list li.depth3 .comment .textBox .btnRadio {width: 100%;}
.boardView .commentBox .list li.depth2 form .comment .textBox, .boardView .commentBox .list li.depth3 form .comment .textBox {padding: 20px 15px 15px 15px;}
.boardView .commentBox .list li.depth3 {margin-left: 85px;}
.boardView .commentBox .list li.blind {background-color: var(--gray-50); border-color: var(--gray-50); justify-content: center; text-align: center; word-break: keep-all; border-radius: 15px; color: var(--navy-font);}
.boardView .commentBox .list li.blind .alert {font-weight: 700;}
.boardView .commentBox .list li.delete, .boardView .commentBox .list li.secret {background-color: var(--bg-white); justify-content: center; text-align: center; word-break: keep-all; border-radius: 15px; font-weight: 700;}
.boardView .commentBox .list li.delete .alert, .boardView .commentBox .list li.secret .alert {color: var(--navy-font);}
.boardView .commentBox .list li > .writer { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px;}
.boardView .commentBox .list li .writer .who .me::after {content: 'me'; padding: 4px 8px; background-color: var(--orange-100); color: var(--primary-orange); font-size: 12px; font-weight: 700; border-radius: 5px; margin-left: 3px;}
.boardView .commentBox .list li .writer .date { font-size: 12px; color: var(--gray-400);}
.boardView .commentBox .list li .writer .author {padding: 4px 8px; background-color: var(--orange-100); color: var(--primary-orange); border-radius: 5px; font-weight: 700; font-size: 11px; margin-left: 3px;}
.boardView .commentBox .list li .message { width: 100%; word-break: keep-all; font-weight: 500; font-size: 15px; letter-spacing: -.5px; margin-top: 10px; text-align: left; color: var(--gray-500);}
.boardView .commentBox .list li .admin {width: 100%; text-align: right;}
.boardView .commentBox .list li .admin button {font-size: 13px; color: var(--gray-400);}
.boardView .commentBox .list li .user:not(.hide), .boardView .commentBox .list li .admin:not(.hide) { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; gap: 10px;}
.boardView .commentBox .list li .user button { font-size: 13px; color: var(--gray-400);}
.boardView .commentBox .list li form {width: 100%;}
.boardView .commentBox .list li form .comment { margin-top: 10px;} 
.boardView .commentBox .list li form .comment .textBox {padding: 30px 15px 15px 15px;}
.boardView .commentBox .list li form .comment .textBox .closeBtn {position: absolute; top: 1px; right: 5px;}
.boardView .commentBox .list li form .comment .textBox .closeBtn button {background: url(../images/icons/icon_arrowdown.svg) no-repeat center; transform: rotate(180deg);}
/* 게시판 뷰 - disabled */
.boardView .commentBox .comment.disabled { position: relative; }
.boardView .commentBox .comment.disabled .textBox { opacity: .4; box-shadow: none; }
.boardView .commentBox .comment.disabled .textBox textarea { pointer-events: none; }
.boardView .commentBox .comment.disabled .alert:not(.hide) { background-color: var(--bg-white); border-radius: 15px; padding: 15px; border: 1px solid var(--gray-300); width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 16px; font-weight: 700; word-break: keep-all; z-index: 1;}
.boardView .commentBox .comment.disabled .alert .buttonBox { width: auto; }
.boardView .commentBox .comment.disabled .alert .buttonBox button { flex: none; }
/* 게시판 글쓰기 */
.boardEdit {background-color: var(--bg-white); padding: 15px; border-radius: 10px; border: 1px solid var(--gray-300);}
.boardEdit form {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px;}
.boardEdit form .notice {color: var(--main-font);}
.boardEdit form .desc { font-weight: 700; color: var(--primary-orange);}
.boardEdit form .necessary {font-weight: 700; color: var(--primary-orange);}
.boardEdit form .check {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center;} 
.boardEdit form dl .data {align-items: flex-start; gap: 10px;}
.boardEdit form dl .data span {width: 100%;}
.boardEdit form dl .data .photo {display: flex;}
.boardEdit form dl .data dd {flex-direction: column; align-items: stretch;}
.boardEdit form dl .data dd textarea[name="message"] {min-height: 300px;}
.boardEdit form .check .buttonBox {width: auto;}
.boardEdit form .check .buttonBox a {max-width: 150px; padding: 3px 9px; flex: none; background-color: var(--bg-white); border: 1px solid var(--gray-300);}
.boardEdit form .buttonBox button {max-width: 150px; padding: 11px;}
.boardEdit form .attachBtn {display:flex; flex-direction:row; flex-wrap:wrap; gap:10px;}
.boardEdit form .attachBtn button {width:40px; height:40px; border-radius:50%; background-color:var(--gray-100); border:1px solid var(--gray-100); background-repeat:no-repeat; background-position:center; background-size:60%; text-indent:-9999px; line-height:0; font-size:0;}
.boardEdit form .attachBtn button[kind="file"] {background-image:url(../images/icons/icon_file.svg);}
.boardEdit form .attachBtn button[kind="photo"] {background-image:url(../images/icons/icon_image.svg);}
.boardEdit form .attachBtn button[kind="youtube"] {background-image:url(../images/icons/icon_youtube.svg);}
.boardEdit form .attachBtn button[kind="website"] {background-image:url(../images/icons/icon_website.svg);}
.boardEdit form .attachList li:not(.hide) { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px; padding: 10px;}
.boardEdit form .attachList li .top { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.boardEdit form .attachList li .top .title {width: 70px;}
.boardEdit form .attachList li .button {position: absolute; top: 5px; right: 10px;}
.boardEdit form .attachList li .button button { width: 25px; height: 25px; border-radius: 50%; text-indent: -9999px; line-height: 0; font-size: 0;}
.boardEdit form .attachList li .button .up {background: url(../images/icons/icon_arrow_dropdown.svg) no-repeat center; background-size: 90%; transform: rotate(180deg); border: 1px solid var(--gray-300);}
.boardEdit form .attachList li .button .down {background: url(../images/icons/icon_arrow_dropdown.svg) no-repeat center; background-size: 90%; border: 1px solid var(--gray-300);}
.boardEdit form .attachList li .button .delete {background: url(../images/icons/icon_trash_darkgray.svg) no-repeat center; background-size: 80%;}
.boardEdit form .attachList li .detail {width: 100%;}
.boardEdit form .attachList li .detail .filebox { align-items: center; gap: 5px; font-size: 12px;}
.boardEdit form .attachList li .subj {width: 100%;}
.boardEdit form .infoBox {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px; margin-top: 0;}
.boardEdit form .infoBox .noticeBox {align-items: center; text-align: center;}
.boardEdit form .infoBox .infoList { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 5px; padding: 15px; border: 1px solid var(--gray-300); border-radius: 10px; color: var(--main-font);}
@media screen and (min-width:600px){
.boardView .commentBox .list li form .comment .textBox {padding: 15px; } 
.boardView .commentBox .list li form .comment .textBox .btnRadio {padding-right: 25px;}
.boardView .commentBox .list li form .comment .textBox .closeBtn {top: 12px; right: 9px;}
.boardView .commentBox .list li.depth2 .comment .textBox .writer, .boardView .commentBox .list li.depth3 .comment .textBox .writer {width: 55%;}
.boardView .commentBox .list li.depth2 .comment .textBox .btnRadio, .boardView .commentBox .list li.depth3 .comment .textBox .btnRadio {width: 45%;}
.boardView .commentBox .list li.depth2 form .comment .textBox, .boardView .commentBox .list li.depth3 form .comment .textBox {padding: 15px;}
}
@media screen and (min-width:1000px){
    .wrapper[path^="board_excel"] .boardBox .index .theme {width: 20%;} 
    .wrapper[path^="board_excel"] .boardBox .index .subject {width: 50%;}
    .wrapper[path^="board_excel"] .boardList li a .theme {width: 20%; max-width: 100%;}
    .wrapper[path^="board_excel"] .boardList li a .subject {width: 50%;}
    .boardBox .index {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; padding: 15px; border: 1px solid var(--gray-300); border-bottom: none; background-color: var(--gray-50); border-radius: 15px 15px 0 0; color: var(--gray-500);}
    .boardBox .index span {text-align: center;}
    .boardBox .index .theme {width: 10%;}
    .boardBox .index .subject {width: 60%;}
    .boardBox .index .who {width: 15%; text-align: left;}
    .boardBox .index .date {width: 15%;}
    .boardBox.notice .index .subject {width: 70%;}
    .boardBox.notice .index .who {width: 15%; text-align: center;}
    .boardBox.notice .index .date {width: 15%;}
    .boardBox.notice .boardList li a .subject {width: 70%;}
    .boardBox.notice .boardList li a .who {width: 15%; text-align: left;}
    .boardBox.notice .boardList li a .date {width: 15%;}
    .boardList {border-radius: 0 0 15px 15px;}
    .boardList li a span {text-align: center;}
    .boardList li a {flex-wrap: nowrap; justify-content: flex-start; gap: 0;}
    .boardList li a .theme {width: 10%;}
    .boardList li.notice a .theme {width: 10%; max-width: 55px; margin: 0 auto;}
    .boardList li a .subject {width: 60%; margin: 0;}
    .boardList li a .who {width: 15%; text-align: left;}
    .boardList li a .date {width: 15%; text-align: center; font-size: 14px;}
    .boardView .content .buttonBox {justify-content: flex-end;}
    .boardView .commentBox .comment .textBox textarea {font-size: 16px;}
    .boardView .commentBox .list li .user button, .boardView .commentBox .list li .admin button {font-size: 14px;}
}
@media screen and (min-width:1000px){
    .boardBox .moreButton { bottom: 15px;}
}
@media (hover: hover) and (pointer: fine) {
    .controlBox .box .top .del:hover { background: url(../images/icons/icon_trash_darkgray.svg) no-repeat center; background-size: 70%; }
    .boardList li:hover:not(.nodata) {background-color: var(--gray-100); }
    .boardList li:hover a .subject > span:not(.cmnt) {text-decoration: underline;}
    .boardView .commentBox .list li .user button:hover {color: var(--main-font);}
}

/* 고객관리 - 간편문자 팝업창 */
.wrapper[path^="customer"] .popup .content .messagePopup dl .data dd.msgBox { padding: 10px; background-color: var(--gray-100); border-radius: 10px;}
.wrapper[path^="customer"] .popup .content .messagePopup dl .data dd.msgBox textarea {padding: 0; border: none;}
.wrapper[path^="customer"] .popup .content .messagePopup dl .data dd.msgBox .textBot {width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between;}
.wrapper[path^="customer"] .popup .content .messagePopup dl .data dd.msgBox .textBot a {font-size: 12px; padding: 2px 8px; background-color: var(--bg-white); border: 1px solid var(--gray-300); font-weight: 700; border-radius: 5px;}
.wrapper[path^="customer"] .popup .content .messagePopup dl .data dd.msgBox .textBot span {font-size: 12px;}
.wrapper[path^="customer"] .popup .content .messagePopup dl .data dd.msgBox .textBot span.msgType {margin-right: 3px;}
.wrapper[path^="customer"] .popup .content .messagePopup dl .data dd.msgBox .messageSaveList:not(.hide) {max-height: 90px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 10px; background-color: var(--bg-white); border-radius: 10px; padding: 5px;}
.wrapper[path^="customer"] .popup .content .messagePopup dl .data dd.msgBox .messageSaveList:not(.hide)::-webkit-scrollbar {display: none;}
.wrapper[path^="customer"] .popup .content .messagePopup dl .data dd.msgBox .messageSaveList li a {padding: 5px 10px;  font-size: 13px; display: block;}
.wrapper[path^="customer"] .popup .content .messagePopup .reserSchedule:not(.hide) {display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px 10px; width: 100%;}
.wrapper[path^="customer"] .popup .content .messagePopup .reserSchedule input, .wrapper[path^="customer"] .popup .content .messagePopup .reserSchedule select {width: auto;}
/* 고객 관리 */
.wrapper[path="customer_list"] .filterBox .choice {padding-top: 0;}
/* 고객관리 - 관계도 팝업창 */
.wrapper[path="customer_list"] .popup .content .relationbox {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 15px;}
.wrapper[path="customer_list"] .popup .content .relationbox .title { position: relative; min-width: 121px; text-align: center; padding: 5px 10px; border-radius: 30px; background-color: var(--primary-navy); color: var(--white); font-size: 15px; font-weight: 700;}
.wrapper[path="customer_list"] .popup .content .relationbox .title::before { position: absolute; content: ''; top: 10px; left: 50%; transform: translateX(-50%); width: 2px; height: 40px; background-color: var(--gray-300); z-index: -1;}
.wrapper[path="customer_list"] .popup .content .relationbox .line { width: 68%; border: 1px solid var(--gray-300);}
.wrapper[path="customer_list"] .popup .content .relationbox dl {width: 100%; gap: 10px; align-items: flex-start; padding: 0;}
.wrapper[path="customer_list"] .popup .content .relationbox dl .data {position: relative; width: calc(33.3% - 6.6px); padding: 10px; background-color: var(--white); border-radius: 10px; background-color: var(--gray-50); border: 2px solid var(--gray-50); gap: 10px;}
.wrapper[path="customer_list"] .popup .content .relationbox dl .data::before { position: absolute; content: ''; top: -18px; left: 50%; transform: translateX(-50%); width: 2px; height: 45px; background-color: var(--gray-300); z-index: -1;}
.wrapper[path="customer_list"] .popup .content .relationbox dl .data dt { text-align: center; font-size: 14px; color: var(--main-font); }
.wrapper[path="customer_list"] .popup .content .relationbox dl .data dd { position: relative; justify-content: center;}
.wrapper[path="customer_list"] .popup .content .relationbox dl .data dd ul { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 5px;}
.wrapper[path="customer_list"] .popup .content .relationbox dl .data dd ul li button { position: relative; padding: 3px 6px; border-radius: 30px; font-size: 12px; letter-spacing: -.5px; font-weight: 400; border: 1px solid var(--primary-navy); color: var(--primary-navy);}
/* 고객관리 - 고객리스트 */
.customerBox {display: flex; flex-direction: column; flex-wrap: nowrap;}
.customerBox .filterBox select[name="theme"] {width: 70px;}
.customerBox .filterBox .search {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px;}
.customerBox .filterBox .calenderBox {width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px;}
.customerBox .filterBox .calenderBox input[type="date"] {width: 100%;}
.customerBox .customerList .list {display: flex; flex-direction: row; flex-wrap: wrap; gap: 15px;}
.customerBox .customerList .list li .group {padding: 10px;}
.customerBox .customerList .list > li { position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; width: 100%; background-color: var(--bg-white); border: 1px solid var(--gray-300); border-radius: 10px; }
.customerBox .customerList .list li .group .selBox { width: 100%; gap: 5px; color: var(--main-font); display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; font-size: 12px;}
.customerBox .customerList .list li .group .selBox .rela { position: absolute; top: 40px; right: 5px; width: 30px; height: 30px; background: url(../images/icons/icon_organization.svg) no-repeat center; background-size: 80%; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.customerBox .customerList .list li .group .selBox .star { position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; background-size: 80%; }
.customerBox .customerList .list li .group .selBox .star.on {background: url(../images/icons/icon_star_on.svg) no-repeat center;}
.customerBox .customerList .list li .group .selBox .date {position: absolute; right: 39px; top: 13px; font-size: 12px; color: var(--gray-500);}
.customerBox .customerList .list li .group a {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; gap: 10px;}
.customerBox .customerList .list li .group a .info { width:100%; display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 10px;}
.customerBox .customerList .list li .group a .info .infoBox { color: var(--main-font); width: 100%; text-align: center;}
.customerBox .customerList .list li .group a .info .infoBox .name {font-size: 15px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px;}
.customerBox .customerList .list li .group a .info .infoBox .name .title {font-size: 10px; background-color: var(--orange-300); padding: 2px 6px; border-radius: 10px; color: var(--primary-orange); font-weight: 700;}
.customerBox .customerList .list li .group a .cont { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px;}
.customerBox .customerList .list li .group a .cont > div {position: relative; width: 100%; font-size: 13px; color: var(--gray-500); letter-spacing: -.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.customerBox .customerList .list li .group a .cont > div::before {content:''; font-size: 12px; width: 60px; color: var(--gray-400); display: inline-block; /* position:absolute;  top:-3px; left:-2px; width:25px; height:25px; border-radius:5px; background-repeat:no-repeat; background-position:center; background-size:70%; */}
.customerBox .customerList .list li .group a .cont .addrH::before {content:'자택시도';}
.customerBox .customerList .list li .group a .cont .model::before {content:'관심모델';}
.customerBox .customerList .list li .group a .cont .buy::before {content:'구입예정일';}
.customerBox .customerList .list li .group a .cont .path::before {content:'소개경로';}
.customerBox .customerList .list li .group a .cont .phoneH::before {content:'자택전화';}
.customerBox .customerList .list li .group a .cont .mail::before {content:'이메일';}
.customerBox .customerList .list li .group a .cont .phoneC::before {content:'직장전화';}
.customerBox .customerList .list li .group a .cont .company::before {content:'직장정보';}
.customerBox .customerList .list li .group a .cont .addrC::before {content:'직장시도';}
.customerBox .customerList .list li .group a .cont .memo::before {content:'메모';}
.customerBox .customerList .list li .dir {position: relative; height: 38px; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; outline: 1px solid var(--primary-navy); padding: 8px; background-color: var(--primary-navy); border-radius: 0 0 10px 10px;}
.customerBox .customerList .list li .dir .dirlist { width: calc(100% - 30px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.customerBox .customerList .list li .dir .dirlist span {display: inline-block; padding: 2px 8px; color: var(--gray-100); font-size: 12px; font-weight: 500; }
.customerBox .customerList .list li .dir .plus { position: absolute; top: 4px; right: 3px; width: 30px; height: 30px; background: url(../images/icons/icon_tag.svg) no-repeat center; background-size: 60%; font-size: 0; text-indent: -9999px;}
.customerBox .customerList .list li .dir .plusBox {position: absolute; width: 100%; top: 42px; left: 0; background-color: var(--bg-white); border: 1px solid var(--gray-300); padding: 7px; border-radius: 10px; z-index: 12;}
.customerBox .customerList .list li .dir .plusBox .box {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
.customerBox .customerList .list li .dir .plusBox .box button {width: 55px; font-size: 12px; font-weight: 700; padding: 2px 6px; border-radius: 5px; background-color: var(--primary-navy); border: 1px solid var(--primary-navy);color: var(--white); }
.customerBox .customerList .list li .dir .plusBox .box input { width: calc(100% - 65px); padding: 5px; }
.customerBox .customerList .list li .dir .plusBox .directoryList {display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px; margin-top: 10px; max-height: 55px; overflow-y: auto;}
.customerBox .customerList .list li .dir .plusBox .directoryList li button { padding: 2px 8px; color: var(--primary-navy); font-size: 12px; font-weight: 600;}
.customerBox .customerList .list li .dir .plusBox .directoryList li.on button { border: 1px solid var(--primary-navy); border-radius: 5px;}
.customerBox .customerList .list > li.nodata {width: 100%; border: none; background-color: transparent; font-weight: 700; justify-content: center; text-align: center; font-size: 16px;}
/* .customerBox .customerList .list li.blank {width: 100%; border: none; background-color: transparent; font-weight: 700; position: relative; padding: 90px 0 20px 0; text-align: center; font-size: 16px;}
.customerBox .customerList .list li.blank::before {position: absolute; content: ''; top: 20px; left: 50%; transform: translateX(-50%); width: 60px; height: 60px; background: url(../images/icons/icon_blank.svg) no-repeat center/contain; } */
.customerBox .moreButton {position: fixed; bottom: 75px; right: 20px; z-index: 11;}
/* 고객등록 */
.customerEditBox {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px;}
.customerEditBox .customerTop { padding: 10px; border-radius: 10px; color: var(--gray-500); background-color: var(--bg-white); border: 1px solid var(--gray-300);}
.customerEditBox .customerTop b {width: 100%;}
.customerEditBox .customerTop .tags {display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 10px;}
.customerEditBox .customerTop .tags .groups {width: 70px;}
.customerEditBox .customerTop .tags .dirs {width: calc(100% - 135px); display: flex; flex-wrap: wrap; gap: 10px;}
.customerEditBox .customerTop .tags .dirs span { display: inline-block; padding: 2px 8px; border-radius: 5px; background-color: var(--gray-50); color: var(--gray-500); font-size: 12px; font-weight: 500; }
.customerEditBox .customerTop .tags button {padding: 3px 9px; color: var(--gray-500); border: 1px solid var(--gray-300); background-color: var(--bg--white); border-radius: 30px; white-space: nowrap;}
.customerEditBox .customerTop .tags button.on { color: var(--primary-orange); border-color: var(--primary-orange);}
.customerEditBox .customerTop .tags .openSet { width: 45px; padding: 2px 6px;  font-size: 12px; font-weight: 600; border: 1px solid var(--primary-navy); background-color: var(--primary-navy); color: var(--white); border-radius: 5px;}
.customerEditBox .customerTop .tags .openSet.on {background-color: var(--primary-navy); color: var(--white); border-color: var(--primary-navy);}
.customerEditBox .customerTop .tags input {width: auto;}
.customerEditBox .customerTop .btnRadio {margin-bottom: 10px;}
.customerEditBox dl .data.full { width: 100%; }
/* 고객등록 - 고객 정보 */
.customerEditBox h3 {color: var(--primary-navy);}
.customerEditBox h4 {position: relative; padding-left: 30px; font-size: 16px; color: var(--primary-navy); margin-bottom: 10px;}
.customerEditBox h4::before {position:absolute; content:''; top:50%; left:0; transform:translateY(-50%); width:24px; height:24px; background-repeat:no-repeat; background-position:center; background-size:contain;}
.customerEditBox h4.basic::before {background-image:url(../images/icons/icon_info_navy.svg);}
.customerEditBox h4.infoTitle::before {background-image:url(../images/icons/icon_info_navy.svg);}
.customerEditBox h4.comTitle::before {background-image:url(../images/icons/icon_company_navy.svg);}
.customerEditBox h4.memoTitle::before {background-image:url(../images/icons/icon_manageMemo.svg);}
.customerEditBox h4.carTitle::before {background-image:url(../images/icons/icon_car_navy.svg);}
.customerEditBox h4.scheTitle::before {background-image:url(../images/icons/icon_schedule_navy.svg);}
.customerEditBox h4.estmTitle::before {background-image:url(../images/icons/icon_estm_send.svg);}
.customerEditBox h4.listTitle::before {background-image:url(../images/icons/icon_listmanage_navy.svg);}
.customerEditBox h4.backupTitle::before {background-image:url(../images/icons/icon_backup_navy.svg);}
.customerEditBox .customerInfo {background-color: var(--bg-white); border-radius: 10px; padding: 15px; border: 1px solid var(--gray-300);} 
.customerEditBox .customerInfo .profileBox {margin: 15px 0; display: flex; align-items: center; justify-content: center;}
.customerEditBox .customerInfo .profileBox img {width: 100px; height: 100px; display: block;}
.customerEditBox .customerInfo .basicInfo dl .data dd .call { position: absolute; top: 3px; right: 35px; width: 25px; height: 25px; border: 1px solid var(--gray-300); background: var(--white) url(../images/icons/icon_call_navy.svg) no-repeat center; background-size: 65%; border-radius: 5px; text-indent: -9999px;}
.customerEditBox .customerInfo .basicInfo {margin-top: 15px;}
.customerEditBox .customerInfo .basicInfo dl .data dd .msg {position: absolute; top: 3px; right: 5px; width: 25px; height: 25px; border: 1px solid var(--gray-300); background: var(--white) url(../images/icons/icon_msg_navy.svg) no-repeat center; background-size: 65%; border-radius: 5px; text-indent: -9999px;}
.customerEditBox .customerInfo .comTitle {margin-top: 20px;}
.customerEditBox .customerInfo .memoTitle {margin-top: 20px;}
.customerEditBox .customerInfo .buttonBox { width: 100%; margin-top: 15px; }
.customerEditBox .customerInfo > div dl .data.agree .agreeMent {width: 55px; color: var(--primary-orange); font-weight: 700;}
.customerEditBox .customerInfo > div dl .data.agree select {width: calc(100% - 65px);} 
/* 고객등록 - 차량정보 */
.customerEditBox .blank { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.customerEditBox .blank h4 {margin: 0;}
.customerEditBox .blank .title { width: 55px;  font-weight: 700; font-size: 14px;}
.customerEditBox .blank .no { width: calc(100% - 80px); color: var(--gray-500); font-weight: 700; text-align: center;}
.customerEditBox .blank .moreButton button {width: 25px; height: 25px;} 
.customerEditBox .carInfoBox, .customerEditBox .scheduleInfo, .customerEditBox .estminfoBox { background-color: var(--bg-white); border-radius: 10px; padding: 15px; border: 1px solid var(--gray-300); }
.customerEditBox .carInfoBox .top { position: relative; margin: 5px 0; color: var(--gray-500);}
.customerEditBox .carInfoBox .top .side {position: absolute; top: 50%; transform: translateY(-50%); right: 0;}
.customerEditBox .carInfoBox .top .side span {color: var(--gray-500); font-size: 12px;}
.customerEditBox .carInfoBox .carInfo dl {padding: 10px;}
.customerEditBox .carInfoBox .carInfo dl:first-child {margin-bottom: 10px;}
.customerEditBox .carInfoBox .carInfo dl .data.photo img {max-width: 100px; border-radius: 5px;}
.customerEditBox .carInfoBox .buttonBox {margin-top: 5px;}
.customerEditBox .estminfoBox .no {width: calc(100% - 55px); padding-right: 25px;}
.customerEditBox .estminfoBox .estmInfo .list {display: flex; flex-direction: column; flex-wrap: nowrap;}
.customerEditBox .estminfoBox .estmInfo .list li { position: relative; padding: 15px 10px; border-bottom: 1px dashed var(--gray-300); word-break: keep-all;}
.customerEditBox .estminfoBox .estmInfo .list li:last-child { border-bottom: 0; padding-bottom: 0;}
.customerEditBox .estminfoBox .estmInfo .list li a {display: flex; flex-direction: row; flex-wrap: wrap; gap: 3px; color: var(--gray-500);}
.customerEditBox .estminfoBox .estmInfo .list li a .subj {width: 100%;}
.customerEditBox .estminfoBox .estmInfo .list li a .subj b {word-break: keep-all;}
.customerEditBox .estminfoBox .estmInfo .list li a .theme {color: var(--main-font); font-weight: 600;}
.customerEditBox .estminfoBox .estmInfo .list li a .date { font-size: 12px; width: 100%; text-align: right; color: var(--gray-500);}
.customerEditBox .estminfoBox .estmInfo .list li a .memo { position: relative; width: 100%; font-size: 13px; color: var(--gray-500); padding-left: 23px;}
.customerEditBox .estminfoBox .estmInfo .list li a .memo::before {position: absolute; content: ''; top: 1px; left: 0; width: 18px; height: 18px; background: url(../images/icons/icon_radio_on.svg) no-repeat center / contain;}
/* 분류함 */
.configBox { background-color: var(--bg-white); border-radius: 10px; padding: 15px; border: 1px solid var(--gray-300); }
.configBox h3 { color: var(--primary-navy);}
.configBox h4 {position: relative; padding-left: 30px; font-size: 16px; color: var(--primary-navy); margin-bottom: 10px;}
.configBox h4::before {position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 24px; height: 24px; background: url(../images/icons/icon_info_navy.svg) no-repeat center/contain;}
.configBox h4.listTitle::before {background: url(../images/icons/icon_listmanage_navy.svg) no-repeat center/contain;}
.configBox h4.backupTitle::before {background: url(../images/icons/icon_backup_navy.svg) no-repeat center/contain;}
.configBox .dirsAdd {position: relative; width: 100%; margin-bottom: 10px;}
.configBox .dirsAdd .title {color: var(--main-font);}
.configBox .dirsAdd input {width: calc(100% - 70px); padding: 8px 70px 8px 8px;}
.configBox .dirsAdd button {position: absolute; top: 50%; right: 20px; transform: translateY(-50%); background-color: var(--primary-navy); padding: 2px 8px; border-radius: 5px; font-size: 12px; border: 1px solid var(--primary-navy); color: var(--white); font-weight: 500;}
.configBox .dirsBox { padding: 15px 0;}
.configBox .dirsBox h3 {margin-bottom: 5px; margin-bottom: 5px;}
.configBox .dirsBox .buttonBox { position: relative; margin: 10px 0;}
.configBox .dirsBox .buttonBox .change:not(.hide) {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; overflow-x: auto;}
.configBox .dirsBox .buttonBox .change input {min-width: 90px;}
.configBox .dirsBox .buttonBox button {max-width: 150px;}

@media screen and (min-width:380px){
    .customerBox .filterBox .calenderBox {flex-wrap: nowrap;}
    .customerBox .filterBox .calenderBox input[type="date"] {width: auto;}
}
@media screen and (min-width:600px){
    .customerBox .customerList .list > li {width: calc(50% - 7.5px); gap: 10px;} 
    .customerBox .customerList .list li .group {padding: 10px 10px 0 10px;}
    .customerBox .customerList .list li .group a .info {min-height: 115px;}
    .customerEditBox .customerInfo .companyInfo {margin-top: 30px;}
    .customerEditBox .customerInfo .manage {margin-top: 30px;}
    .customerEditBox dl {padding: 0;}
    .customerEditBox h3 {font-size: 22px;}
    .customerEditBox dl .data {width: calc(50% - 7.5px);}
    .customerEditBox .customerInfo .buttonBox button {max-width: 150px;}
    .customerEditBox .carInfoBox .buttonBox button {max-width: 150px;}
    .configBox h3 {font-size: 22px;} 
} 
@media screen and (min-width:1000px){
    .customerEditBox .carInfoBox .carInfo dl {gap: 30px;}
    .customerEditBox .carInfoBox .carInfo dl .data:not(.full) {width: calc(33.3% - 20px);}
    .customerBox .filterBox .calenderBox {width: calc(100% - 75px);}
    .customerBox .customerList .list > li {width: calc(25% - 11.25px);}
    .customerEditBox .customerTop b {width: 70px;}
    .customerEditBox dl { gap: 10px;}
    .customerEditBox dl .data {width: calc(33.3% - 6.6px);}
    .customerEditBox .customerInfo .basicInfo h4{width: 100%;}
    .customerEditBox .customerInfo .basicInfo {display: flex; flex-direction: row; flex-wrap: wrap;}
    .customerEditBox .customerInfo .basicInfo .profileBox {width: 20%; margin: 0;} 
    .customerEditBox .customerInfo .basicInfo .info {width: 80%;}
    .customerEditBox .customerInfo .profileBox img {width: 120px; height: 120px;}
    .customerEditBox .estminfoBox .estmInfo .list li a .subj {padding-right: 70px;}
    .customerEditBox .estminfoBox .estmInfo .list li a .date {position: absolute; width: auto; top: 16px; right: 10px;}
    .configBox .dirsBox .buttonBox {justify-content: flex-end;}
    .customerBox .moreButton { bottom: 100px; right: 28px;}
}


/* 차량 관리 */
.wrapper[path="vehicle_list"] .filterBox .choice {padding-top: 0;}
.wrapper[path="vehicle_list"] .filterBox .choice li[kind="date"] .calenderBox { flex-wrap: wrap; width: 100%; justify-content: center; align-items: center; color: var(--main-font); border-radius: 0; }
.wrapper[path="vehicle_list"] .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="vehicle_list"] .popup .content dl .data dd .starBox button.on {background: url(../images/icons/icon_star_on.svg) no-repeat center; background-size: 70%;}
.vehicleBox {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px;}
.vehicleBox .blockWork { padding: 0 10px; margin: 0;}
.vehicleBox .vehicleList { display: flex; flex-direction: row; flex-wrap: wrap; gap: 15px}
.vehicleBox .vehicleList li {position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; gap: 10px; width: 100%; background-color: var(--bg-white); border: 1px solid var(--gray-300); border-radius: 10px;}
.vehicleBox .vehicleList li .group {padding: 10px 10px 0 10px;}
.vehicleBox .vehicleList li .group .selBox {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 10px; }
.vehicleBox .vehicleList li .group .selBox input[type="checkbox"] + span {font-size: 12px;}
.vehicleBox .vehicleList li .group .info {display: block; margin: 15px 0; min-height: 45px;}
.vehicleBox .vehicleList li .group .info .top { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; font-size: 15px; color: var(--main-font);}
.vehicleBox .vehicleList li .group .detail { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px;}
.vehicleBox .vehicleList li .group .detail > div {position: relative; width: 100%; font-size: 13px; color: var(--gray-500); letter-spacing: -.5px;  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.vehicleBox .vehicleList li .group .detail > div::before {content: ''; font-size: 12px; color: var(--gray-400); width: 60px; display: inline-block; /* position:absolute;  top:-3px; left:-2px; width:25px; height:25px; border-radius:5px; background-repeat:no-repeat; background-position:center; background-size:70%; */}
.vehicleBox .vehicleList li .group .detail .model::before {content: '모델명'; }
.vehicleBox .vehicleList li .group .detail .model::after {content:'관심'; font-size:11px; background-color:var(--orange-300); border-radius:30px; font-weight:700; color:var(--primary-orange); padding:3px 8px; margin-left:3px;}
.vehicleBox .vehicleList li .group .detail .insureD::before {content: '보험일'; }
.vehicleBox .vehicleList li .group .detail .memo::before {content: '메모'; }
.vehicleBox .vehicleList li .group .detail .financeEndD::before {content: '납일만료일'; }
.vehicleBox .vehicleList li .group .detail .vin::before {content: '차량번호'; }
.vehicleBox .vehicleList li .group .detail .salesD::before {content: '출고일'; }
.vehicleBox .vehicleList li .group .detail .inspectD::before {content: '검사일'; }
.vehicleBox .vehicleList li .group .detail .finceN::before {content: '금융상품명'; }
.vehicleBox .vehicleList li .group .photo {text-align: center;}
.vehicleBox .vehicleList li .group .photo img { max-width: 50%; border-radius: 5px;}
.vehicleBox .vehicleList li .box { width: 100%; outline: 1px solid var(--primary-navy); background-color: var(--primary-navy); border-radius: 0 0 10px 10px;}
.vehicleBox .vehicleList li .box .date {color: var(--white); font-size: 12px; padding: 5px 10px; min-height: 30px;}
@media screen and (min-width: 370px) {
.wrapper[path="vehicle_list"] .filterBox .choice li[kind="date"] .calenderBox {flex-wrap: nowrap; gap: 10px; justify-content: flex-start;} 
}
@media screen and (min-width: 600px) {
    .vehicleBox .vehicleList li { width: calc(50% - 7.5px);}
    .vehicleBox .vehicleList li .group .info { min-height: 45px;}
    .wrapper[path="vehicle_list"] .filterBox .choice li[kind="date"] .calenderBox input[type="date"] {width: auto; padding: 6px;}
}  
@media screen and (min-width: 1000px) {
    .vehicleBox .vehicleList li { width: calc(25% - 11.25px);}
}

/* 저장 견적 */
.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 .date {font-size: 12px; color: var(--gray-500);}
.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;}
.estListBox .buttonBox.estm {margin-top: 15px;}
 
@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);}
    /* .estListBox .EstimateList li .group .detail .trim { min-height: 45px;} */ 
} 

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


/* 문자 발송 */
.smsBox { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 15px; color: var(--main-font);}
.smsBox .necessary {font-weight: 700; color: var(--primary-orange);}
.smsBox .guideBox { width: 100%; padding: 15px; background-color: var(--primary-navy); border-radius: 10px;}
.smsBox .guideBox ul { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 3px;}
.smsBox .guideBox ul li {color: var(--gray-300);}
.smsBox .guideBox ul li em {color: var(--white); font-weight: 700;}
.smsBox .guideBox ul li button {padding: 3px 9px; border: 1px solid var(--white); border-radius: 5px; color: var(--white); font-size: 13px; font-weight: 700;}
.smsBox .box { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 10px; background-color: var(--bg-white); border: 1px solid var(--gray-300); border-radius: 10px; padding: 15px;}  
.smsBox .box .searchBox { position: relative; width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px;}
.smsBox .box .searchBox .notice {padding: 10px; border-radius: 10px; background-color: var(--gray-50); color: var(--main-font);}
.smsBox .box .searchBox .top {display: flex; flex-direction: column; flex-wrap: nowrap;}
.smsBox .box .searchBox .top .search select {width: 100%;}
.smsBox .box .searchBox .top .subBox { display: flex; flex-direction: row; flex-wrap: wrap;  gap: 10px;}
.smsBox .box .searchBox .top .subBox .sub { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px;}
.smsBox .box .searchBox .top .subBox .sub .inputBox {display: flex; flex-direction: row;  flex-wrap: wrap;  gap: 10px; justify-content: space-between;}
.smsBox .box .searchBox .top .subBox .sub .inputBox input {flex: none;}
.smsBox .box .searchBox .top .subBox .sub .inputBox .num {width: 100%;}
.smsBox .box .searchBox .top .subBox .sub .inputBox .name {width: calc(50% - 5px);}
.smsBox .box .searchBox .top .subBox .sub .inputBox .title {width: calc(50% - 5px);}
.smsBox .box .searchBox .top .subBox .sub .add {padding: 3px 18px; border-radius: 5px; background: url(../images/icons/icon_more_white.svg) no-repeat center; background-size: 75%; background-color: var(--primary-navy); color: var(--white); white-space: nowrap; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.smsBox .box .searchBox .top .subBox .sub .addBox {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px;}
.smsBox .box .searchBox .top .subBox .sub .addBox .excel {background: url(../images/icons/icon_excel.svg) no-repeat center; background-size: 70%; width: 35px; height: 35px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2); border-radius: 10px;font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.smsBox .box .searchBox .top .subBox .sub .addBox .btnSearch {background: url(../images/icons/icon_search.svg) no-repeat center; background-size: 70%; width: 35px; height: 35px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2); border-radius: 10px;font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.smsBox .box .searchBox .list {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px;}
.smsBox .box .searchBox .list .total {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; font-size: 13px; padding: 0 5px;}
.smsBox .box .searchBox .list .total .cnt {font-weight: 700; color: var(--primary-orange);}
.smsBox .box .messageBox {position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; border: 6px solid var(--primary-navy); border-left: none; border-right: none; border-radius: 30px; padding: 40px 0 10px 0;}
.smsBox .box .messageBox form {width: 100%;}
.smsBox .box .messageBox::before { position: absolute; content: ''; top: -1px; left: 50%; transform: translateX(-50%); width: 120px; height: 17px; background: var(--primary-navy); border-radius: 0 0 10px 10px; }
.smsBox .box .messageBox .screen {overflow-y: auto; width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.smsBox .box .messageBox .screen .messageTitle input {width: 100%;}
.smsBox .box .messageBox .screen .message {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 5px; padding: 10px; border-radius: 10px; border: 1px solid var(--gray-300);}
.smsBox .box .messageBox .screen .message .ad {font-size: 12px; font-weight: 700; }
.smsBox .box .messageBox .screen .message .textBox {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 5px;}
.smsBox .box .messageBox .screen .message .textBox textarea {min-height: 263px; background-color: var(--bg-white); border-color: var(--bg-white); padding: 0;}
.smsBox .box .messageBox .screen .message .textBox .textBot {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-end; align-items: center; font-size: 12px;}
.smsBox .box .messageBox .screen .message .textBox .textBot .commentMax {  width: 100%; text-align: right;}
.smsBox .box .messageBox .screen .message .textBox .textBot .commentMax .msgType {position: relative; padding-right: 10px;}
.smsBox .box .messageBox .screen .message .textBox .textBot .commentMax .msgType::after {position: absolute; content: ''; width: 2px; height: 80%; top: 50%; transform: translateY(-50%); right: 3px; background-color: var(--gray-500); border-radius: 1px;}
.smsBox .box .messageBox .screen .message .textBox .textBot .commentMax .num em {font-weight: 700;}
.smsBox .box .messageBox .screen .message .buttonBox button {padding: 3px 9px; border-radius: 5px;} 
.smsBox .box .messageBox .screen .optionBox {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 5px;}
.smsBox .box .messageBox .screen .optionBox .option {display: flex; flex-direction: column; flex-wrap: nowrap;}
.smsBox .box .messageBox .screen .optionBox .option .kind {display: flex; flex-wrap: nowrap; gap: 10px; align-items: center;}
.smsBox .box .messageBox .screen .optionBox .reserSchedule:not(.hide) {display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-end; gap: 5px;}
.smsBox .box .messageBox .screen > .buttonBox button {max-width: 150px;} 
.smsBox .buttonBox .submit span {position: relative; padding-right: 25px; font-size: 16px;}
.smsBox .buttonBox .submit span::after {position: absolute; content: ''; width: 20px; height: 20px; top: 50%; transform: translateY(-50%); right: 0; background: url(../images/icons/icon_send.svg) no-repeat center; background-size: inherit; }
.smsBox .saveBox {width: 100%;}
.smsBox .saveBox .save { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 10px; background-color: var(--bg-white); border: 1px solid var(--gray-300); padding: 15px; border-radius: 10px;}
.smsBox .saveBox .save .title { display: flex; align-items: center; justify-content: space-between; position: relative; font-weight: 700; font-size: 16px; padding-left: 25px; color: var(--main-font);}
.smsBox .saveBox .save .title::before {position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background: url(../images/icons/icon_info_navy.svg) no-repeat center/contain; }
.smsBox .saveBox .save ul { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 15px; height: 100%;}
.smsBox .saveBox .save ul li { background-color: var(--bg); width: 100%; border-radius: 5px;}
.smsBox .saveBox .save ul li a {display: block; padding: 10px; cursor: pointer; color: var(--main-font);}
.smsBox .saveBox .save ul li.nodata {background-color: transparent;}
.smsBox .saveBox .save ul::-webkit-scrollbar { width: 5px; height: 8px;}
.smsBox .saveBox .save ul::-webkit-scrollbar-track { background-color: transparent;}
.smsBox .saveBox .save ul::-webkit-scrollbar-thumb { background-color: var(--gray-300);}
.smsBox .saveBox .save ul::-webkit-scrollbar-track, .smsBox .saveBox .save ul::-webkit-scrollbar-thumb {  border-radius: 30px; }
/* 문자 - 테이블 예외처리 */
.wrapper[path="sms_main"] .tableBox {width: 100%;} 
.wrapper[path="sms_main"] .tableBox table .title {background-color:  var(--bg-white); font-size: 12px; padding: 5px;}
.wrapper[path="sms_main"] .tableBox table tr td {padding: 0; background-color: var(--bg-white); border-radius: 0;}
.wrapper[path="sms_main"] .tableBox table input {background-color:  var(--bg-white); border-color: var(--bg-white);}
.wrapper[path="sms_main"] .scrollW {overflow-y: auto; max-height: 350px; -ms-overflow-style: none; }
.wrapper[path="sms_main"] .scrollW::-webkit-scrollbar { display:none; }
/* 문자 - 팝업(엑셀) */
.wrapper[path="sms_main"] .popup .content .buttonBox {width: auto; justify-content: flex-start; gap: 0; margin-top: 10px;}
.wrapper[path="sms_main"] .popup .content .noticeBox .input {background-color: var(--white);}
.wrapper[path="sms_main"] .popup .content .sampleBox .tableBox.sample {width: 100%;}
.wrapper[path="sms_main"] .popup .content .sampleBox .tableBox.sample tr td {padding: 5px;}
.wrapper[path="sms_main"] .popup .content .sampleBox {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 5px; margin-top: 10px;} 
.wrapper[path="sms_main"] .popup .content .sampleBox .total {width: 100%; text-align: right; color: var(--main-font);}
.wrapper[path="sms_main"] .popup .content .sampleBox .total .cnt {color: var(--primary-orange); font-weight: 700;}
/* 문자 - 팝업(고객검색) */
.wrapper[path^="sms_main"] .popup .content .inputBox {padding: 5px 10px;}
/* 문자 발송이력 */
.wrapper[path="sms_history"] .popup .content dl {display: flex ; flex-direction: row; flex-wrap: wrap; text-align: left;}
.wrapper[path="sms_history"] .popup .content dl dt {width: 100%; font-size: 16px; color: var(--gray-500);}
.wrapper[path="sms_history"] .popup .content dl dd {width: 100%; margin-bottom: 10px; font-size: 15px; border-bottom: 1px solid var(--gray-300); padding: 10px;}
.wrapper[path="sms_history"] .popup .content dl dd ul {padding: 10px;}
.wrapper[path="sms_history"] .popup .content dl dd ul li {color: var(--primary-red); font-weight: 700;}
.wrapper[path="sms_history"] .popup .content dl dd ul li b {color: var(--main-font);}
.wrapper[path="sms_history"] .popup .content dl dd:last-child {margin-bottom: 0; padding-bottom: 0; border-bottom: none;}
.smsBox .index {position: relative; display: none;}
.smsBox .paging { padding: 0; }
.smsBox .boardWork:not(.hide) { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0 5px; color: var(--main-font);}
.smsBox .boardWork .buttonBox {width: auto;}
.smsBox .boardWork .buttonBox button {padding: 5px 10px; background-color: var(--gray-200);}
.historyList { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; border-top: 1px solid var(--gray-300);border-bottom: 1px solid var(--gray-300);}
.historyList li {position: relative; background-color: var(--bg-white); border-bottom: 1px solid var(--gray-300);}
.historyList li:last-child {border-bottom: none;}
.historyList li a {display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; padding: 10px 10px 10px 35px;}
.historyList li a .check { position: absolute; top: 10px; left: 6px;}
.historyList li a .theme {width: 100%;}                                                                                 
.historyList li a .subject {width: 100%;}
.historyList li a .who {width: 30%;}
.historyList li a .date {width: 70%; text-align: right; font-size: 12px; color: var(--gray-500);} 

@media screen and (min-width:600px){
    .smsBox .box .messageBox {border: 5px solid var(--primary-navy); padding: 40px 10px 10px 10px;}
    .smsBox .box .messageBox .screen > .buttonBox button {max-width: none;}
}
@media screen and (min-width:800px){
    .smsBox .guideBox {position: relative; padding: 15px 140px 15px 15px;}
    .smsBox .guideBox ul li button {position: absolute; top: 10px; right: 10px;}
    .smsBox .box { width: 100%;}
    .smsBox .box .searchBox {width: calc(55% - 5px);}
    .smsBox .box .searchBox .top {flex-direction: row; flex-wrap: nowrap; align-items: flex-start;}
    .smsBox .box .searchBox .top .head {width: 85px; margin-top: 8px; color: var(--main-font);}
    .smsBox .box .searchBox .top .search {width: calc(100% - 85px);}
    .smsBox .box .searchBox .top .inputBox {width: calc(100% - 85px);}
    .smsBox .box .searchBox .top .subBox { width: calc(100% - 85px);}
    .smsBox .box .searchBox .list .text textarea {min-height: 250px;}
    .smsBox .box .messageBox {width: calc(45% - 5px);}
    .smsBox .saveBox .save {height: 100%;}
    .smsBox .saveBox .save ul {overflow-y: auto; max-height: 490px;}
    .smsBox .box .messageBox .screen .optionBox .option {flex-direction: row; flex-wrap: nowrap; align-items: center;}
    .smsBox .box .messageBox .screen .optionBox .option .title {width: 85px;}
    .smsBox .box .messageBox .screen .optionBox .option .kind {width: calc(100% - 85px);}
    .smsBox .index { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; padding: 15px 10px 15px 35px; gap: 5px; background-color: var(--gray-50); border-radius: 10px 10px 0 0;}
    .smsBox .index .check {position: absolute; top: 50%; left: 6px; transform: translateY(-50%);}
    .smsBox .index .theme {width: 5%; text-align: center;}
    .smsBox .index .subject {width: 70%;}
    .smsBox .index .who {width: 10%;}
    .smsBox .index .date {width: 15%; text-align: center;} 
    .smsBox .boardWork:not(.hide) {justify-content: flex-end;}
    .smsBox .boardWork > label {display: none;}
    .historyList li a { flex-wrap: nowrap; gap: 5px;}
    .historyList li a .check {top: 50%; transform: translateY(-50%);}
    .historyList li a .theme {width: 5%; text-align: center;}
    .historyList li a .subject {width: 70%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
    .historyList li a .who {width: 10%;}
    .historyList li a .date {width: 15%; text-align: center; font-size: 14px;}
}
@media screen and (min-width:1000px){
    .smsBox .box { width: calc(70% - 7.5px);}
    .smsBox .saveBox {width: calc(30% - 7.5px);}
}


/* 일정 관리 */
.wrapper[path="schedule_main"] .filterBox  {margin-bottom: 15px;}
.scheduleBox {display: flex; flex-wrap: wrap; gap: 15px; color: var(--main-font); background-color: var(--bg-white); padding: 15px; border-radius: 10px;} 
.scheduleBox .calender { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 15px;}
.scheduleBox .calender .top { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 10px;}
.scheduleBox .calender .top input[type="date"] { font-size: 22px; color: var(--main-font); font-weight: 700; padding: 0; background-color: var(--bg-white); border: none; text-align: center; background-size:22px; }
.scheduleBox .calender .top .currentDate {font-size: 18px; font-weight: 700;}
.scheduleBox .calender .top .prev {transform: rotate(90deg); width: 40px; height: 40px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center; background-size: 65%; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.scheduleBox .calender .top .next {transform: rotate(270deg); width: 40px; height: 40px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center; background-size: 65%; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.scheduleBox .calender .top .selectDate {width: 30px; height: 30px; background: url(../images/icons/icon_datetime.svg) no-repeat center; background-size: inherit; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.scheduleBox .calender .markBox {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px;}
.scheduleBox .calender .markBox span {padding: 5px 10px 5px 30px; border-radius: 30px; position: relative; font-weight: 500;}
.scheduleBox .calender .markBox span.reser {background-color: var(--gray-100);}
.scheduleBox .calender .markBox span.reser::before {position: absolute; content: ''; top: 50%; left: 10px; width: 10px; height: 10px; transform: translateY(-50%); background-color: var(--primary-lightnavy); border-radius: 2px;}
.scheduleBox .calender .markBox span.activ {background-color: var(--orange-300);}
.scheduleBox .calender .markBox span.activ::before {position: absolute; content: ''; top: 50%; left: 10px; width: 10px; height: 10px; transform: translateY(-50%); background-color: var(--primary-orange); border-radius: 2px;}
.scheduleBox .calender .table { border-collapse: collapse; width: 100%; /* border: 1px solid var(--gray-300); border-left: 0; border-right: 0; */ } 
.scheduleBox .calender .table tr {border-bottom: 1px solid var(--gray-100);}
.scheduleBox .calender .table th {padding: 10px; color: var(--main-font);}
.scheduleBox .calender .table th.sun {color: var(--primary-orange);}
.scheduleBox .calender .table th.sat {color: var(--primary-orange);} 
.scheduleBox .calender .table tbody tr:not(:first-child) {border-top: 1px solid var(--gray-100);}
.scheduleBox .calender .table td { padding: 0; width: 80px; height: 60px; text-align: center; word-break: keep-all; }  
.scheduleBox .calender .table td button { display: flex; flex-direction: column; align-items: flex-start; padding: 5px; width: 100%; height: 100%; background: transparent; position: relative; gap: 5px;}
.scheduleBox .calender .table td .day {font-size: 13px; }
.scheduleBox .calender .table td.today .day { display: flex; align-items: center; justify-content: center; line-height: normal; width: 23px; height: 23px; background-color: var(--primary-navy); color: var(--white); border-radius: 50%;}
.scheduleBox .calender .table td.now {background-color: var(--gray-50);}
.scheduleBox .calender .table td .mark {font-size: 13px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 5px;} 
.scheduleBox .calender .table td .mark span { width: 8px; height: 8px; border-radius: 2px;} 
.scheduleBox .calender .table td .mark span.reser { background-color: var(--primary-lightnavy);} 
.scheduleBox .calender .table td .mark span.activ { background-color: var(--primary-orange); } 
.scheduleBox .calender .table td.dis button { color: var(--gray-400);} 
.scheduleBox .calender .table td.dis:first-child .day, .scheduleBox .calender .table td.dis:last-child .day{ color: var(--gray-300);} 
.scheduleBox .calender .table td:first-child .day, .scheduleBox .calender .table td:last-child .day { color: var(--primary-orange); }  
.scheduleBox .calender .table td.memo .day { color: var(--primary-red); } 
.scheduleBox .calender .table td .memo { width: 100%; text-align: right; font-size: 10px; color: var(--gray-400);} 
.scheduleBox .schedule { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 15px;}
.scheduleBox .schedule .top {width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px;}
.scheduleBox .schedule .top .nowDate {font-weight: 700; font-size: 18px;}
.scheduleBox .schedule .top .moreButton button {width: 25px; height: 25px;}
.scheduleBox .schedule .list {width: 100%;}
.scheduleBox .schedule .scheduleList li.info {width: 100%; padding: 5px 10px; background-color: var(--gray-50); border-radius: 5px; font-weight: 600; text-align: center; }
.scheduleBox .scheduleList li .moreButton.edit button { width: 30px; height: 30px; background: url(../images/icons/icon_edit_dark.svg) no-repeat center; background-color: var(--bg-white); background-size: 60%; border-radius: 0; } 
.scheduleList {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;}
.scheduleList li:not(.hide, .info) { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 5px; padding: 15px 10px 15px 25px; border-bottom: 1px dashed var(--gray-300);}
.scheduleList li:last-child {border-bottom: none;}
.scheduleList li > div { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--main-font);}
.scheduleList li .title { width: 100%; position: relative; font-weight: 700; padding-right: 25px;} 
.scheduleList li .memo {color: var(--gray-500); width: 100%;}
.scheduleList li .cus {width: 100%;}
.scheduleList li .title.reser::before {position: absolute; content: ''; top: 5px; left: -18px; width: 10px; height: 10px; background-color: var(--primary-lightnavy); border-radius: 3px;}
.scheduleList li .title.activ::before {position: absolute; content: ''; top: 5px; left: -18px; width: 10px; height: 10px; background-color: var(--primary-orange); border-radius: 3px;}
.scheduleList li.buy .title::before {position: absolute; content: ''; top: 5px; left: -18px; width: 10px; height: 10px; background-color: var(--primary-blue); border-radius: 3px;}
.scheduleList li.buy .memo {padding-right: 0; padding-left: 5px;}
.scheduleList li.birth .title::before {position: absolute; content: ''; top: 1px; left: -19px; width: 16px; height: 16px; background: url(../images/icons/icon_cake.svg) no-repeat center/contain;}
.scheduleList li.birth .title {padding-right: 0; color: var(--primary-red);}
.scheduleList li.birth .date { font-size: 12px; color: var(--gray-500); width: 100%; text-align: right;}
.scheduleList li .side { width: 100%; text-align: right; color: var(--gray-500); font-size: 12px;}
.scheduleList li .moreButton.edit { width: auto; position: absolute; top: 10px; right: 2px; } 
.scheduleList li .moreButton.edit button { width: 25px; height: 25px; background: url(../images/icons/icon_edit_dark.svg) no-repeat center; background-size: 70%; border-radius: 0;} 

@media screen and (min-width:600px){
    .wrapper[path="schedule_main"] .scheduleList li .memo {padding-right: 25px;}
    .scheduleList li .cus {padding-right: 75px;}
    .scheduleList li .memo {padding-right: 100px;}
    .scheduleList li .side {position: absolute; bottom: 15px; right: 10px; width: auto;}
    .scheduleList li.birth .date {position: absolute; right: 10px; bottom: 15px; width: auto;}
}
@media screen and (min-width:1000px){
    .scheduleBox {align-items: stretch; gap: 50px;}
    .scheduleBox .calender {width: calc(50% - 25px);}
    .scheduleBox .calender .top {justify-content: flex-start;}
    .scheduleBox .calender .top .currentDate {font-size: 22px;}
    .scheduleBox .calender .top .selectDate {width: 30px; height: 30px; background-size: 65%;}
    .scheduleBox .schedule {width: calc(50% - 25px);}
    .scheduleBox .schedule .top .nowDate {font-size: 22px;}
    .scheduleBox .schedule .nodata {height: 100%;} 
}
@media (hover: hover) and (pointer: fine) {
    .filterBox .choice li[kind="date"] .calenderBox:hover {background-color: transparent;}
    .customerBox .customerList .list li .group a:hover .info .infoBox .name {text-decoration: underline;}
    .customerBox .customerList .list li .dir .plus:hover {background: url(../images/icons/icon_tag_on.svg) no-repeat center; background-size: 60%;}
    .customerEditBox .estminfoBox .estmInfo .list li:hover a .subj {text-decoration: underline;}
    .wrapper[path^="customer"] .popup .content .messagePopup dl .data dd.msgBox .messageSaveList li:hover a {text-decoration: underline;} 
    .vehicleBox .vehicleList li .group .info .top:hover { text-decoration: underline; }
    .estListBox .EstimateList li .group .info:hover { text-decoration: underline; }
    .historyList li:hover a .subject {text-decoration: underline;}
    .scheduleBox .calender .table td:hover {background-color: var(--gray-50);}
    .scheduleBox .calender .table td.dis:hover {background-color: var(--gray-50);}
 }

/* 마이페이지 - 내 정보 */
.myinfoBox form dl .data dd .myPhoto {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px;}
.myinfoBox form dl .data dd .myPhoto img {width: 60px; height: 60px; border-radius: 50%;} 
.myinfoBox form .checkBox {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 15px; margin-top: 15px;}
.myinfoBox form .checkBox .check {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.myinfoBox form .checkBox .check .buttonBox {width: auto;}
.myinfoBox form .checkBox .check .buttonBox a {max-width: 150px; padding: 3px 9px; flex: none; background-color: var(--gray-50); border: 1px solid var(--gray-300);}
.myinfoBox form .checkBox .buttonBox button {max-width: 150px; padding: 11px;}
/* 마이페이지 - 보유포인트 */
.mypointBox {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px;}
.mypointBox .mypoint {display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 15px;}
.mypointBox .mypoint .box { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; padding: 15px; background-color: var(--primary-navy); gap: 10px; border-radius: 10px;}
.mypointBox .mypoint .box span {font-size: 16px; font-weight: 700; color: var(--white);}
.mypointBox .mypoint .box span.point {color: var(--primary-orange); font-weight: 700; display: flex; flex-direction: row; align-items: center; gap: 3px;}
.mypointBox .mypoint .box span.point .unit { color: var(--primary-orange); display: flex; justify-content: center; align-items: center;}
.mypointBox .mypoint .noticeBox {width: 100%;}
.mypointBox .tableBox table tr th {padding: 10px;}
.mypointBox .tableBox table tr td {padding: 10px;}
.mypointBox .desc {color: var(--primary-orange); font-weight: 500;}
/* 마이페이지 - 이용료 결제 */
.contBox {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 15px; color: var(--main-font);}
.contBox .box {display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 15px; color: var(--main-font);}
.contBox .box .couponBox { width: 100%; display: flex; justify-content: center; align-items: center; padding: 15px; background-color: var(--primary-navy); border-radius: 10px; border: 1px solid var(--gray-300);}
.contBox .box .couponBox .pointNow { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap;}
.contBox .box .couponBox .pointNow > div { padding: 10px 15px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; gap: 10px; color: var(--white);}
.contBox .box .couponBox .pointNow > div .point {color: var(--primary-orange); font-weight: 700; display: flex; flex-direction: row; align-items: center; gap: 3px;}
.contBox .box .couponBox .pointNow > div .point .unit { color: var(--primary-orange); }
.contBox .box .couponBox .pointNow > div.nowPoint { font-size: 16px; border-radius: 10px; color: var(--white); border: 1px solid rgba(255, 255, 255, .1); background-color: rgba(255, 255, 255, .1); border-radius: 15px; }
.contBox .box .duesBox {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--gray-300); padding: 15px; border-radius: 10px; background-color: var(--bg-white);}
.contBox .box .duesBox .finBox {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px;} 
.contBox .duesDesc {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 25px;}
.contBox .duesDesc .tableBox h3 { margin-bottom: 10px;}
.contBox .duesDesc .tableBox table tr th {padding: 10px;}
.contBox .duesDesc .tableBox table tr td {padding: 10px;}
.contBox .duesDesc .bankBox {  background-color: var(--bg-white); padding: 15px; border-radius: 10px; border: 1px solid var(--gray-300); } 
.contBox .duesDesc .bankBox h3 { position: relative; padding-left: 55px;} 
.contBox .duesDesc .bankBox h3::before { position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 40px; height: 40px; background: #EFF6FF url(../images/icons/icon_pay.svg) no-repeat center; border-radius: 10px; } 
.contBox .duesDesc .bankBox .bank { display: flex; flex-wrap: wrap; align-items: center; background-color: var(--gray-100); padding: 15px; border-radius: 10px; margin: 15px 0;}
.contBox .duesDesc .bankBox .bank span {width: 100%; text-align: center; font-weight: 500;}
.contBox .duesDesc .bankBox .bank .account {font-size: 16px; font-weight: 700; color: var(--primary-orange);}
.contBox .duesDesc .bankBox .list li { position: relative; display: flex; flex-wrap: wrap; align-items: center; padding: 10px 50px 10px 10px; border-bottom: 1px solid var(--gray-300);}
.contBox .duesDesc .bankBox .list li span {word-break: keep-all; font-size: 13px; color: var(--gray-500);}
.contBox .duesDesc .bankBox .list li .amount {width: 100%; font-weight: 700; font-size: 15px; color: var(--main-font);}
.contBox .duesDesc .bankBox .list li .btnBankCancel { position: absolute; bottom: 10px; right: 10px; font-size: 12px;} 
.contBox .duesDesc .bankBox .list li:last-child {border-bottom: none;}
.contBox .duesDesc .bankBox .list .btnBankCancel {padding: 3px 9px; border-radius: 5px; background-color: var(--gray-200); border-radius: 5px ; }
.contBox .duesDesc .bankBox .complete {margin-top: 15px;}
.contBox.mypage {gap: 25px;}
.pointBox { min-width: 600px; border: 1px solid var(--gray-300); border-radius: 10px; overflow: hidden; margin-top: 10px;}
.pointBox li {display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; padding: 14px 18px; background-color: var(--bg-white); border-bottom: 1px solid var(--gray-300); color: var(--main-font);}
.pointBox li.index {font-weight: 700; border-radius: 10px 10px 0 0; background-color: var(--gray-50); color: var(--main-font);}
.pointBox li.index span {font-weight: 700; color: var(--main-font);}
.pointBox li.index .use {color: var(--main-font);}
.pointBox li.index .sum {color: var(--navy-font);}
.pointBox li span {text-align: center; word-break: keep-all; color: var(--gray-500);}
.pointBox li .date {width: 15%;}
.pointBox li .kind {width: 20%;}
.pointBox li .price {width: 15%;} 
.pointBox li .originEnd {width: 15%;}
.pointBox li .extenEnd {width: 15%;} 
.pointBox li .note {width: 20%;}
.pointBox li .get {width: 15%;} 
.pointBox li .use {width: 15%; color: var(--main-font); font-weight: 500;} 
.pointBox li .sum {width: 20%; font-weight: bold; color: var(--navy-font);}
.pointBox li .remark {width: 20%;}
.pointBox .buttonBox a {padding: 3px 9px; flex: none; font-size: 12px; border-radius: 7px}
/* 마이페이지 - 찜목록 */
.wrapper[path="mypage_like"] .popup.layerPopup .content {margin-top: 35px;}
.wrapper[path="mypage_like"] .popup .content .noticeBox {margin: 15px 0; align-items: center; text-align: center;}
.likeBox {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px;}
.likeBox ul {display: flex; flex-direction: row; flex-wrap: wrap; gap: 15px;}
.likeBox ul 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); color: var(--main-font); padding: 15px; border-radius: 10px;} 
.likeBox ul li .box .selBox { height: 20px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between;}
.likeBox ul li .box img {max-width: 200px; margin: 0 auto;}
.likeBox ul li .box .info {display: flex; flex-direction: column; flex-wrap: nowrap;}
.likeBox ul li .box .info .title { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; font-weight: 700; margin-left: -10px;}
.likeBox ul li .box .info .title .logo {display: flex;}
.likeBox ul li .box .info .title .logo img {max-width: 45px;}
.likeBox ul li .box .info .lineup {color: var(--gray-500);}
.likeBox ul li .box .info .trim {color: var(--gray-500);}    
.likeBox ul li .botBox .price {text-align: right; font-weight: 700; font-size: 16px; margin-bottom: 5px;}
.likeBox ul li.state3::after {content: "재고 한정"; position: absolute; top: 15px; right: 15px; background-color: var(--gray-100); padding: 3px 9px; border-radius: 30px; font-size: 10px; color: var(--gray-500);}
.likeBox ul li.state4::after {content: "단종"; position: absolute; top: 15px; right: 15px; background-color: var(--primary-navy); color: var(--white);padding: 3px 9px; border-radius: 30px; font-size: 10px;}
.likeBox > .buttonBox { width: 100%; justify-content: flex-end;}
.likeBox > .buttonBox .gray {background-color: var(--gray-200);}
.likeBox > .buttonBox::before {position: absolute; content: ''; width: 15px; top: 0; left: -15px; background-color: var(--bg); height: 100%;}
.likeBox > .buttonBox::after {position: absolute; content: ''; width: 15px; top: 0; right: -15px; background-color: var(--bg); height: 100%;}
/* 마이페이지 - 알림 메세지 */
.notimsgBox .pointBox {min-width: auto; }
.notimsgBox .pointBox li:first-child {border-bottom: none}
.notimsgBox .pointBox li {padding: 10px; position: relative;}
.notimsgBox .pointBox li a {width: 100%;}
.notimsgBox .pointBox li span {display: block; text-align: left;}
.notimsgBox .pointBox li .date { white-space: nowrap; color: var(--gray-500); font-weight: 500;} 
.notimsgBox .pointBox li .read {position: absolute; top: 10px; right: 10px; color: var(--primary-orange); font-weight: 700; font-size: 13px;}
.notimsgBox .pointBox li .blank {width: 100%; border: none; text-align: center; font-weight: 700; position: relative; font-size: 16px; background-color: transparent; color: var(--main-font); min-height:45vh; gap: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.notimsgBox .pointBox li .blank::before {content: ''; width: 60px; height: 60px; background: url(../images/icons/icon_blank.svg) no-repeat center/contain; }
/* 마이페이지 - 로그인설정 */
.loginsetBox {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 30px; color: var(--gray-500); background-color: var(--bg-white); padding: 10px; border-radius: 10px; border: 1px solid var(--gray-300);}
.loginsetBox form > .buttonBox { margin-top: 15px;}
.loginsetBox h3 {position: relative; padding-left: 30px; color: var(--primary-navy); }
.loginsetBox h3::before {position: absolute; content: ''; top: 2px; left: 0; width: 24px; height: 24px; background: url(../images/icons/icon_info_navy.svg) no-repeat center / contain;}
.loginsetBox h3.loginSet::before {background: url(../images/icons/icon_setting_navy.svg) no-repeat center / contain;}
.loginsetBox h3.recent::before {background: url(../images/icons/icon_schedule_navy.svg) no-repeat center / contain;}
.loginsetBox h3.auto::before {background: url(../images/icons/icon_circle_navy.svg) no-repeat center / contain;}
.loginsetBox h3.today::before {background: url(../images/icons/icon_call_navy.svg) no-repeat center / contain;}
.loginsetBox dl {padding: 10px;}  
.loginsetBox dl .data label {margin-left: 15px;}
.loginsetBox .deviceList { border-top: 1px solid var(--gray-300); padding-top: 30px;}
.loginsetBox .deviceList ul {display: flex; flex-direction: row; flex-wrap: wrap;}
.loginsetBox .deviceList ul li { position: relative; width: 100%; padding: 10px; border-bottom: 1px dashed var(--gray-300);}
.loginsetBox .deviceList ul li:last-child {border-bottom: 0;}
.loginsetBox .deviceList ul li span {display: block;}   
.loginsetBox .deviceList ul li .size { width: 100%; display: block; font-weight: 700; color: var(--primary-darkorange);}
.loginsetBox .deviceList ul li button {position: absolute; top: 10px; right: 10px; padding: 3px 9px; font-size: 12px; font-weight: 500; color: var(--white); background-color: var(--primary-navy); border-radius: 3px;}
.loginsetBox .deviceList ul li .this { position: absolute; top: 10px; right: 10px; font-size: 13px; font-weight: 700; color: var(--primary-darkorange); white-space: nowrap;}

@media screen and (min-width:600px){
    .contBox .box .duesBox .finBox {flex-direction: row;}
    .contBox .duesDesc .bankBox .complete a {max-width: 150px;}
    .mypointBox .mypoint .box {width: calc(40% - 7.5px);}
    .mypointBox .mypoint .noticeBox {width: calc(60% - 7.5px);} 
    .likeBox ul li {width: calc(50% - 7.5px);}
    .likeBox > .buttonBox button, .likeBox > .buttonBox a { max-width: 100px;}
    .loginsetBox form > .buttonBox button { max-width: 150px;}
    .loginsetBox .deviceList ul li span {display: inline-block; margin-right: 15px;} 
    .loginsetBox .deviceList ul li .this {margin-right: 0;}
    .contBox .box .duesBox .buttonBoxLine {border: none;}
    .contBox .box .duesBox .buttonBoxLine button {max-width: 150px; flex: 1;}
    .contBox .box .duesBox .buttonBoxLine button:not(.hide) + button:not(.hide)::after, .contBox .box .duesBox .buttonBoxLine a:not(.hide) + a:not(.hide)::after {content: '';}
}
@media screen and (min-width:800px){ 
    .contBox .duesDesc .bankBox .bank {gap: 15px; justify-content: center;}
    .contBox .duesDesc .bankBox .bank span {width: auto;}
    .contBox .duesDesc .bankBox .list li {gap: 15px;}
    .contBox .duesDesc .bankBox .list li .amount {width: auto;}
    .contBox .duesDesc .bankBox .list li .btnBankCancel {bottom: unset; top: 10px; }
    .contBox .box {flex-direction: row;} 
    .contBox .box .duesBox {width: calc(60% - 7.5px);}
    .contBox .box .couponBox {width: calc(40% - 7.5px);} 
    .likeBox ul li {width: calc(33.3% - 10px);} 
}

@media screen and (min-width:1000px){ 
    .likeBox > .buttonBox {bottom: 0;}
    .likeBox ul li {width: calc(25% - 11.25px);} 
    .likeBox ul li.nodata span {font-size: 16px;}
}
@media (hover: hover) and (pointer: fine) {
    .notimsgBox .pointBox li:not(.nodata):hover {background-color: var(--gray-50);}
    .notimsgBox .pointBox li:hover .title {text-decoration: underline;}
}
/* 쇼핑 - 공통으로 들어갈 부분 */
.wrapper[path^="shop"]:not([path="shop_list"]) .footer .inner {padding: 15px 15px 150px 15px;}
.shopBox .price {font-weight: 700;} 
.shopBox .unit {font-weight: 700; color: var(--primary-orange);} 
.shopBox .num {color: var(--primary-orange); font-weight: 700;}
.shopBox .specs .amount .buttonBox {width: fit-content;}
.shopBox .specs .amount .buttonBox a {flex: auto; padding: 2px 8px; background-color: var(--gray-50); border-color: var(--gray-300); border-radius: 5px; font-size: 12px;}
.shopBox .resultBox { position: fixed; bottom: 60px; left: 0; width: 100%; z-index: 48; padding: 15px; border-radius: 10px 10px 0 0; background-color: var(--bg); display: flex; flex-wrap: nowrap; flex-direction: row; align-items: center; gap: 10px; }
.shopBox .resultBox .point {width: calc(50% - 5px); color: var(--main-font); border: 1px solid transparent; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 5px; padding: 8px; background-color: var(--gray-200); border: 1px solid var(--gray-200); border-radius: 10px;}
.shopBox .resultBox button {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 5px;}
.shopBox .resultBox .buttonBox {width: calc(50% - 5px); }
.shopBox .amount {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 5px; margin-top: 5px;}
.shopBox .price {display: flex; flex-direction: row; align-items: center; gap: 3px;} 
/* 쇼핑 - 상품목록 */
.shopBox { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 15px;} 
.shopBox .saleCate {width: 100%; position: relative;}   
.shopBox .saleCate .box {float: left;} 
.shopBox .saleCate .box .title { color: var(--gray-500); font-weight: 500; position: relative; padding-right: 20px; } 
.shopBox .saleCate .box .title::after { content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(-90deg); width: 18px; height: 18px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center/contain; } 
.shopBox .saleCate .box select { background-color: var(--bg-white); border-radius: 30px; color: var(--gray-500);} 
.shopBox .saleCate .count { float: right; color: var(--gray-500); min-height: 32px; display: flex; align-items: center; gap: 5px;} 
.shopBox .saleCate .count .point { color: var(--primary-orange); font-weight: 700; }  
.shopBox .group { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; width: 100%; background-color: var(--bg-white); border: 1px solid var(--gray-300); padding: 15px; border-radius: 10px;} 
.shopBox .group .cate { position: relative; width: 100%; color: var(--navy-font); padding-left: 15px; font-size: 16px; font-weight: 700; }
.shopBox .group .cate::before {position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 65%; border-radius: 2px; background-color: var(--navy-font); }
.shopBox .group .cate.vip {padding-left: 45px;} 
.shopBox .group .cate.vip::before {position: absolute; content: ''; top: 8px; left: 5px; width: 35px; height: 35px; background: url(../images/icons/icon_vip.png) no-repeat center/contain; }
.shopBox .group .saleList { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 30px 15px; } 
.shopBox .group .saleList li { width: calc(50% - 7.5px); } 
.shopBox .group .saleList li a { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; color: var(--gray-500); } 
.shopBox .group .saleList li a .info { width: 100%; font-weight: 700; border-top: 1px solid var(--gray-300); padding-top: 10px; margin-top: 10px;}
.shopBox .group .saleList li a .photo { width: 100%; display: flex; align-items: center; justify-content: center;} 
.shopBox .group .saleList li a .photo img {border-radius: 10px; background-color: var(--white);}
.shopBox .group .saleList li a .name { color: var(--main-font); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.shopBox .group .saleList li a .subject {color: var(--gray-500); font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.shopBox .group .saleList li a .price .num {color: var(--primary-orange);}
.shopBox .group .saleList li.vip a .photo img {background-color: transparent;}
.shopBox .saleList {width: 100%;}
/* 쇼핑 - 제품상세 */
.shopBox .saleView { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 15px; border: 1px solid var(--gray-300); background-color: var(--bg-white); padding: 15px; border-radius: 10px; }
.shopBox .saleView .thumb { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; }
.shopBox .saleView .thumb .main {position: relative; display: flex; justify-content: center;}
.shopBox .saleView .thumb .main img { width: 100%; border-radius: 5px;}
.shopBox .saleView .thumb .photo {overflow-x: auto; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; margin-top: 10px;}
.shopBox .saleView .thumb .photo img {width: 100%; border-radius: 5px; } 
.shopBox .saleView .thumb .photo li { display: flex; width: calc(25% - 7.5px); flex: 0 0 auto; cursor: pointer;}
.shopBox .saleView .specs { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; width: 100%;}
.shopBox .saleView .specs .info { display: block; width: 100%;}
.shopBox .saleView .specs .info .name {font-size: 20px; font-weight: 500; color: var(--main-font);} 
.shopBox .saleView .specs .info .dc {font-size: 16px; color: var(--gray-400); text-decoration: line-through; letter-spacing: -.5px;}
.shopBox .saleView .specs .info .price { position: relative; font-size: 18px; color: var(--main-font);} 
.shopBox .saleView .specs .info .price .cmnt { color: var(--main-font); margin-right: 5px;}
.shopBox .saleView .specs .info dl {gap: 0; padding: 0; margin-top: 15px;}   
.shopBox .saleView .specs .info dl .data {padding: 15px; border-bottom: 1px solid var(--gray-300); flex-wrap: nowrap;} 
.shopBox .saleView .specs .info dl .data dt {width: 80px; color: var(--gray-500); font-size: 14px; }
.shopBox .saleView .specs .info dl .data dd {width: calc(100% - 80px); font-size: 14px; word-break: keep-all;}
.shopBox .saleView .specs .info dl .data dd .countBox { width: 100%; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px;}
.shopBox .saleView .specs .info dl .data dd .countBox .count { display: flex; flex-wrap: nowrap; flex-direction: row; align-items: stretch; justify-content: center;}
.shopBox .saleView .specs .info dl .data dd .countBox .count button { width: 30px; height: 30px; border: 1px solid var(--gray-300); background-color: var(--bg-white); font-size: 15px; font-weight: 700;}
.shopBox .saleView .specs .info dl .data dd .countBox .count button.minus { border-radius: 5px 0 0 5px; border-right: 0;}
.shopBox .saleView .specs .info dl .data dd .countBox .count button.plus { border-radius: 0 5px 5px 0; border-left: 0;}
.shopBox .saleView .specs .info dl .data dd .countBox .count input[type="number"] {width: 30px; height: 30px; padding: 0; border-radius: 0; background-color: var(--bg-white); text-align: center; border: 1px solid var(--gray-300); border-left: none; border-right: none; }
.shopBox .saleView .specs .info dl .data dd .countBox .sum { width: 100%; justify-content: flex-end; gap: 5px;}
.shopBox .saleView .specs .info dl .data dd .countBox .sum .num {color: var(--primary-orange);}
.shopBox .saleView .specs .info dl .data dd .countBox .sum .unit {color: var(--primary-orange);}
.shopBox .saleView .specs .plusmsg {text-align: center; font-weight: 600; word-break: keep-all; background-color: var(--primary-navy); color: var(--white); border-radius: 8px; padding: 7px;}
.shopBox .saleView .specs .plusmsg span {font-weight: 700; color: var(--primary-orange);}
.shopBox .option {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 5px;}
.shopBox .option .optionBar {border: 1px solid var(--gray-300); border-radius: 7px;}
.shopBox .option .optionBar button { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; justify-content: flex-start; padding: 10px 35px 10px 10px; text-align: left;}
.shopBox .option .optionBar button::after { position: absolute;  content: ''; width: 15px; height: 15px; top: 12px; right: 10px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center / contain;}
.shopBox .option .optionBar button.down::after { transform: translateY(-50%) rotate(180deg);}
.shopBox .option .optionBar button .title {width: 70px; font-weight: 500;}
.shopBox .option .optionBar button .default {width: calc(100% - 70px); display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; justify-content: flex-start;}
.shopBox .option .optionBar button .default .name {width: 75%; word-break: keep-all;}
.shopBox .option .optionBar button .default .price {width: 25%; justify-content: flex-end;}
.shopBox .option .optionBar .list {border-top: 1px solid var(--gray-300); overflow-y: auto; max-height: 250px;}
.shopBox .option .optionBar .list li {padding: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; justify-content: flex-start; cursor: pointer;}
.shopBox .option .optionBar .list li .name {width: 75%; color: var(--gray-500); word-break: keep-all;}
.shopBox .option .optionBar .list li .price {width: 25%; justify-content: flex-end; color: var(--main-font);}

/* 쇼핑 - vip */
.shopBox .saleView.vip .thumb .main::after {position: absolute; content: ''; top: 10px; right: 10px; width: 20%; height: 20%; background: url(../images/icons/icon_vip.png) no-repeat center/contain; }
/* 쇼핑 - 주문하기 */
.shopBox .buyBox .resultBox button .unit {background-color: var(--white); color: var(--primary-red);}
.shopBox .buyBox { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; gap: 15px; max-width: 600px; margin: 0 auto; } 
.shopBox .buyBox .orderAddress {width: 100%; margin-bottom: 15px;}
.shopBox .buyBox .orderAddress h3 {margin-bottom: 5px;}
.shopBox .buyBox .orderAddress .delivery { position: relative; border: 1px solid var(--gray-300); background-color: var(--bg-white); border-radius: 10px; padding: 15px; } 
.shopBox .buyBox .orderAddress .delivery .info { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } 
.shopBox .buyBox .orderAddress .delivery .info .content { flex: 1; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 3px; } 
.shopBox .buyBox .orderAddress .delivery .info .content .name { color: var(--main-font); padding-right: 50px; font-size: 18px; font-weight: 700;}
.shopBox .buyBox .orderAddress .delivery .info .content .tel .phone { color: var(--gray-500); font-weight: 500; } 
.shopBox .buyBox .orderAddress .delivery .info .content .address {color: var(--gray-400);  } 
.shopBox .buyBox .orderAddress .delivery .changeBtn {position: absolute; top: 15px; right: 15px;} 
.shopBox .buyBox .orderAddress .delivery .changeBtn button {border: 1px solid var(--gray-300); border-radius: 5px; padding: 3px 9px; font-size: 13px;} 
.shopBox .buyBox .orderAddress .delivery .memoSelect { margin-top: 10px; } 
.shopBox .buyBox .orderAddress .delivery .memoSelect span { display: block; margin-bottom: 5px; font-weight: 500; } 
.shopBox .buyBox .orderAddress .delivery .memoSelect select { width: 100%; background-color: var(--gray-50); border-color: var(--gray-50); } 

/* 쇼핑 주문하기 - 배송지 정보 없을 때 */
.orderAddress .delivery .addDelivery { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 5px;}
.orderAddress .delivery .addDelivery .imgBox{ width: 70px;}
.orderAddress .delivery .addDelivery .imgBox img{width: 100%;}
.orderAddress .delivery .addDelivery .notice{font-size: 18px; font-weight: 700; color: var(--main-font);}
.orderAddress .delivery .addDelivery .ment{color: var(--gray-400); text-align: center; word-break: keep-all;letter-spacing: -.5px;}
.orderAddress .delivery .addDelivery .plus { position: relative; padding: 10px; border-radius: 10px; font-size: 16px; font-weight: bold; background-color: var(--gray-100); border: 1px solid var(--gray-100); margin-top: 10px; width: 100%;}
.orderAddress .delivery .addDelivery .plus span { position: relative;}
.orderAddress .delivery .addDelivery .plus span::before { content: "+"; position: absolute; top: 50%; left: -15px; transform: translate(0%, -50%);}

/* 쇼핑 주문하기 - 배송지 목록 팝업 */
.deliveryListBox .plus { position: relative; padding: 10px; border-radius: 10px; font-size: 16px; font-weight: 700; background-color: var(--gray-100); border: 1px solid var(--gray-50); margin-bottom: 15px; width: 100%; } 
.deliveryListBox .plus span { position: relative; } 
.deliveryListBox .plus span::before { content: "+"; position: absolute; top: 50%; left: -15px; transform: translate(0%, -50%); } 
.deliveryListBox .deliveryList { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px; } 
.deliveryListBox .deliveryList > li { color: var(--main-font); display: flex; flex-direction: row; flex-wrap: wrap; border: 1px solid var(--gray-300); border-radius: 10px; padding: 15px; text-align: left; gap: 5px; cursor: pointer; }
.deliveryListBox .deliveryList li .deliveryInfo {width: 100%;}
.deliveryListBox .deliveryList li .deliveryInfo .deliveryTop .name { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px; font-weight: 700; font-size: 16px; margin-bottom: 5px;}
.deliveryListBox .deliveryList li.basic .deliveryInfo .deliveryTop .name::after { content: '기본배송지'; background-color: var(--orange-200); color: var(--primary-orange); font-size: 12px; padding: 3px 9px; border-radius: 5px; font-weight: 600;}
.deliveryListBox .deliveryList li.selected { border: 2px solid var(--primary-orange); } 
.deliveryListBox .deliveryList li .deliveryInfo .address {color: var(--gray-400);}
.deliveryListBox .deliveryList li .deliveryInfo .telList {margin-bottom: 5px;}
.deliveryListBox .deliveryList li .buttonBox {justify-content: flex-start;} 
.deliveryListBox .deliveryList li .buttonBox button { flex: auto; max-width: fit-content; background: var(--bg); border: 1px solid var(--gray-300); padding: 6px 12px; font-size: 13px; color: var(--main-font); border-radius: 5px;} 
/* 쇼핑 주문하기 - 배송지 목록 수정 팝업 */
.editDelivery .optional { font-weight: 500; font-size: 12px; color: var(--gray-400); margin-left: 5px; } 
.editDelivery .divide { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between;} 
.editDelivery .divide button { width: 30px; height: 30px; background: url(../images/icons/icon_search.svg) no-repeat center; background-size: 60%; text-indent: -9999px;} 
.editDelivery label {margin-top: 10px;}
/* 쇼핑 주문하기 - 추가정보입력 */ 
.addInfoBox { width: 100%; margin-bottom: 15px;} 
.addInfoBox h3 {margin-bottom: 5px;}
.addInfoBox .addInfoItem { background-color: var(--bg-white); border: 1px solid var(--gray-300); border-radius: 10px; padding: 15px; }
.addInfoBox .addInfoItem dl {padding: 0; margin-bottom: 10px;}
.addInfoBox .deliveryNotice {color: var(--primary-navy); font-weight: 500; word-break: keep-all; text-align: center; letter-spacing: -1px;}
/* 쇼핑 주문하기 - 주문상품 */
.shopBox .buyBox .goodsBox { width: 100%; margin-bottom: 15px; } 
.shopBox .buyBox .goodsBox h3 {margin-bottom: 5px;}
.shopBox .buyBox .goodsBox .topInfo {color: var(--main-font); width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px; border: 1px solid var(--gray-300); background-color: var(--bg-white); border-radius: 10px; padding: 15px; }
.shopBox .buyBox .goodsBox .topInfo .photo img {width: 100%; max-width: 100px; border-radius: 5px;}
.shopBox .buyBox .goodsBox .topInfo .name {width: calc(100% - 110px); font-size: 16px;}
.shopBox .buyBox .goodsBox .topInfo .cate {width: 100%;font-weight: bold;font-size: 16px;}
.shopBox .buyBox .goodsBox .topInfo .specs {padding: 15px; background-color: var(--bg);  width: 100%; gap: 10px; display: flex; flex-direction: column; border-radius: 10px;}
.shopBox .buyBox .goodsBox .topInfo .specs .sales { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; border-radius: 5px;}
.shopBox .buyBox .goodsBox .topInfo .specs > div {gap: 0;}
.shopBox .buyBox .goodsBox .topInfo .specs .option {flex-direction: row;}
.shopBox .buyBox .goodsBox .topInfo .specs .option .info span:not(.title) {position: relative; width: 100%; word-break: keep-all;}
.shopBox .buyBox .goodsBox .topInfo .specs .option .info span:not(.title)::before {content: '- '; margin-right: 3px;}
.shopBox .buyBox .goodsBox .topInfo .specs .amount{ justify-content: space-between; margin-top: 0;}
.shopBox .buyBox .goodsBox .topInfo .specs .amount .num{margin-right: 5px; font-weight: 700;}
.shopBox .buyBox .goodsBox .topInfo .specs .title {font-weight: 500; color: var(--gray-500); width: 70px;}
.shopBox .buyBox .goodsBox .topInfo .specs .info { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: calc(100% - 70px);}
.shopBox .buyBox .goodsBox .topInfo .pay{ padding: 0 5px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 100%;}
.shopBox .buyBox .goodsBox .topInfo .pay .title{font-size: 16px; font-weight: bold;}
.shopBox .buyBox .goodsBox .topInfo .pay .price {font-size: 16px; font-weight: bold; color: var(--primary-orange);}
.shopBox .buyBox .goodsBox .topInfo .pay .info{display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center;}
/* 쇼핑 - 주문내역 */
.shopBox .buyList { max-width: 600px; margin: 0 auto; width: 100%; }
.shopBox .buyList > ul {display: flex; flex-direction: row; flex-wrap: wrap; background-color: var(--bg-white); padding: 15px; border: 1px solid var(--gray-300); border-radius: 10px;}
.shopBox .buyList ul li { width: 100%; position: relative; padding: 10px 0; border-bottom: 1px solid var(--gray-300); color: var(--main-font);}
.shopBox .buyList ul li:last-child {border-bottom: none;}
.shopBox .buyList ul li.state .top .state { width: fit-content; padding: 3px 6px; border-radius: 5px; font-size: 12px; font-weight: 700; background-color: var(--gray-100); white-space: nowrap; }
.shopBox .buyList ul li.state8 .top .state { background-color: var(--gray-50); color: var(--navy-font); }
.shopBox .buyList ul li.state6 .top .state, .shopBox .buyList ul li.state7 .top .state { background-color: var(--primary-orange); color: var(--white); }
.shopBox .buyList ul li.state1 .top .state, .shopBox .buyList ul li.state2 .top .state { background-color: var(--orange-200); color: var(--primary-orange);}
.shopBox .buyList ul li .top { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 5px; margin-bottom: 10px;}
.shopBox .buyList ul li .top .orderNo {font-weight: 500; color: var(--gray-500); font-size: 13px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.shopBox .buyList ul li .box { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }
.shopBox .buyList ul li .box .sales { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px;}
.shopBox .buyList ul li .box .sales img {width: 100%; max-width: 100px; border-radius: 5px;}
.shopBox .buyList ul li .box .sales .info {width: calc(100% - 110px);}
.shopBox .buyList ul li .box .sales .info .amount a {padding: 2px 8px; background-color: var(--bg); font-weight: 500; border: 1px solid var(--gray-300); border-radius: 5px; font-size: 12px;}
.shopBox .buyList ul li .box .pay { width: 100%; display: flex; flex-direction: row; padding: 10px; justify-content: space-between; font-size: 16px; font-weight: 700;}
.shopBox .buyList ul li .detail {width: 100%; border-top: 1px dashed var(--gray-300);}
.shopBox .buyList ul li .detail > button {position: relative; width: 100%; padding: 10px; text-align: left;}
.shopBox .buyList ul li .detail > button::after { position: absolute; content: ''; width: 15px; height: 15px; top: 50%; transform: translateY(-50%); right: 10px; background: url(../images/icons/icon_arrowdown.svg) no-repeat center / contain;}
.shopBox .buyList ul li .detail > button.down::after { transform: translateY(-50%) rotate(180deg);}
.shopBox .buyList ul li .detail .detailList { display: none; margin: 0 10px 10px 10px; border: 1px solid var(--gray-300); border-radius: 10px; padding: 0 15px;}
.shopBox .buyList ul li .detail .detailList > div {position: relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; border-bottom: 2px dashed var(--gray-300); padding: 10px 0; gap: 5px 0;}
.shopBox .buyList ul li .detail .detailList > div:last-child {border-bottom: 0;}
.shopBox .buyList ul li .detail .detailList .addInfoBox {display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 0;}
.shopBox .buyList ul li .detail .detailList .addInfoBox .ttl {width: 100%; font-weight: 600;}
.shopBox .buyList ul li .detail .detailList .addInfoBox .info .memo { word-break: keep-all;}
.shopBox .buyList ul li .detail .detailList > div .title {width: 80px; font-weight: 500; color: var(--gray-500);}
.shopBox .buyList ul li .detail .detailList > div .info {width: calc(100% - 80px); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0 3px;}
.shopBox .buyList ul li .detail .detailList > div .info .receipt { margin-left: 3px; padding: 2px 8px; font-size: 12px; font-weight: 700; background-color: var(--primary-navy); border-radius: 5px; color: var(--white);}
.shopBox .buyList ul li .detail .detailList .receive .box { width: 100%; flex-wrap: wrap; flex-direction: row; }
.shopBox .buyList ul li .detail .detailList .receive .box .title {margin-bottom: 5px;}
.shopBox .buyList ul li .detail .detailList .receive .box .name {width: 100%; font-weight: 700;}  
.shopBox .buyList ul li .detail .detailList .receive .box .phone { width: 100%; }
.shopBox .buyList ul li .detail .detailList .receive .box .address { width: 100%; color: var(--gray-500); word-break: keep-all;}
.shopBox .buyList ul li .detail .detailList .buttonBox {width: fit-content; position: absolute; top: 9px; right: 0; }
.shopBox .buyList ul li .detail .detailList .buttonBox button { flex: auto; padding: 2px 8px; background-color: var(--bg); border-color: var(--gray-300); border-radius: 5px; font-size: 12px;}
.shopBox .buyList ul:has(li.nodata) {background-color: var(--bg); border: none;}
/* .shopBox .buyList ul li.blank { width: 100%; text-align: center; min-height: 45vh; gap: 10px; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--gray-500);}
.shopBox .buyList ul li.blank::before {content: ''; width: 60px; height: 60px; background: url(../images/icons/icon_blank.svg) no-repeat center / contain;} */

@media screen and (min-width:600px){
    .shopBox .group .saleList li { width: calc(25% - 11.25px);}
    .shopBox .saleList li.blank {width: 100%;}
    .shopBox .saleView .thumb {width: calc(45% - 7.5px);}
    .shopBox .saleView .specs {width: calc(55% - 7.5px); justify-content: space-between;} 
    .shopBox .saleView .specs .info .name {font-size: 24px;}
    .shopBox form dl {flex-direction: row; flex-wrap: wrap;}  
    .shopBox .buyList ul li .box .pay {font-size: 18px;} 
} 
@media screen and (min-width:800px){
    .wrapper[path^="shop"]:not([path="shop_list"]) .footer .inner {padding: 15px 15px 75px 15px;}
    .shopBox .group .cate {font-size: 18px;}
    .shopBox .resultBox {position: unset; padding: 0; box-shadow: none; height: auto; background-color: transparent;}
    .shopBox .buyBox .goodsBox .topInfo .pay .price {font-size: 22px;}
    .shopBox .saleView .specs form .countBox .sum {font-size: 18px;}
    .shopBox .saleView .specs .info .price {font-size: 22px;}
    .shopBox .saleView .specs .info .dc {font-size: 18px;}
    .shopBox .saleView .thumb .photo::-webkit-scrollbar { height: 8px;}
    .shopBox .saleView .thumb .photo::-webkit-scrollbar-track { background-color: var(--white);}
    .shopBox .saleView .thumb .photo::-webkit-scrollbar-thumb { background-color: var(--gray-300);}
    .shopBox .saleView .thumb .photo::-webkit-scrollbar-track, .shopBox .saleView .thumb .photo::-webkit-scrollbar-thumb { border-radius: 10px; cursor: pointer;}
    .shopBox .group .saleList li {padding: 10px;} 
    .shopBox .option .optionBar .list::-webkit-scrollbar { width: 4px;}
    .shopBox .option .optionBar .list::-webkit-scrollbar-track { background-color: var(--white);}
    .shopBox .option .optionBar .list::-webkit-scrollbar-thumb { background-color: var(--gray-300);}
    .shopBox .option .optionBar .list::-webkit-scrollbar-track, .shopBox .option .optionBar .list::-webkit-scrollbar-thumb { border-radius: 10px; cursor: pointer;}
}
@media screen and (min-width:1000px){
    .wrapper[path^="shop"]:not([path="shop_list"]) .footer .inner {padding: 15px;}
}
@media (hover: hover) and (pointer: fine) {
    .shopBox .option .optionBar .list li:hover {background-color: var(--gray-50); border-radius: 5px;}
    .shopBox .option .optionBar .list li:hover .name {color: var(--main-font);} 
    .shopBox .buyBox .orderAddress .delivery .changeBtn button:hover {border-color: var(--primary-orange); color: var(--primary-orange);}
    .orderAddress .delivery .addDelivery .plus:hover { border-color: var(--gray-100); background-color: var(--gray-200);}
    .deliveryListBox .plus:hover { border-color: var(--gray-200); background-color: var(--gray-200);}
    .deliveryListBox .deliveryList > li:hover {background-color: var(--gray-50);} 
    .deliveryListBox .deliveryList li.selected:hover { background-color: var(--orange-100);} 
    .deliveryListBox .deliveryList li .buttonBox button:hover { border-color: var(--primary-orange); color: var(--primary-orange); background-color: transparent;}
}
/* 이용약관 */ 
.privosionBox {padding: 15px; border-radius: 10px; background-color: var(--bg-white); border: 1px solid var(--gray-300);}
.privosionBox .item {color: var(--gray-500); padding: 5px;}
.privosionBox .item b {color: var(--main-font);} 
.privosionBox .item .sub {padding-left: 15px; font-size: 13px; letter-spacing: -.5px;}
.privosionBox .item .impor { color: var(--primary-darkorange); font-weight: 700;}
.privacyBox {display: flex; flex-direction: column; flex-wrap: nowrap; padding: 15px; background-color: var(--bg-white); border-radius: 10px; border: 1px solid var(--gray-300);}
.privacyBox .item {color: var(--gray-500); padding: 5px 15px;}
.privacyBox .item b {color: var(--main-font);}
.privacyBox .intro { font-weight: 700; word-break: keep-all; color: var(--main-font);} 
.privacyBox dl { gap: 0; flex-direction: column; padding: 0 10px;}

/* 기본 팝업 공통*/
.popup { display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 78;} 
.popup .dimBg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--dim-rgb); z-index: 79; }
.popup .frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--bg-white); border-radius: 10px; z-index: 80; }
.popup .frame > .head { position: relative; text-align: center; padding: 15px 40px 15px 15px; min-height: 50px; display: flex; align-items: center;}
.popup .frame > .head h3 { font-size: 16px; text-align: left; word-break: keep-all;}
.popup .frame > .head .back {/*  position: absolute; top: 3px; left: 0;  */ 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 > .buttonBox {gap: 15px; padding: 15px;}
.popup .frame > .buttonBox[btnlen="0"] {padding: 0;}
.popup .frame > .buttonBox button, .popup .frame > .buttonBox a {padding: 10px;}
.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: 15px;} 
/* 팝업 - 스크롤바 */
.popup .content::-webkit-scrollbar { width: 5px; height: 8px;}
.popup .content::-webkit-scrollbar-track { background-color: transparent;}
.popup .content::-webkit-scrollbar-thumb { background-color: var(--gray-300);}
.popup .content::-webkit-scrollbar-track, .popup .content::-webkit-scrollbar-thumb { border-radius: 30px; }
/* 팝업- 알림창 */
.popup .content .noticeBox {margin: 10px 0;} 
.popup.noticePopup {z-index: 81;} 
.popup.noticePopup .frame > .buttonBox {padding: 0 15px 15px 15px;}
.popup.noticePopup .content {padding: 15px; text-align: center;}
/* 팝업 - 배너용 */
.popup.bannerPopup .frame >.head {min-height: unset; padding: 0;}
.popup.bannerPopup .frame > .head .close { width: 40px; height: 40px; top: 10px; right: 10px; background-size: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.15); background-color: rgba(255,255,255,.8); border-radius: 10px;}
.popup.bannerPopup .content {padding: 0;}
.popup.bannerPopup .content .bannerAdBox .imgBox {display: flex;}
.popup.bannerPopup .content .bannerAdBox .imgBox img {border-radius: 10px;}
.popup.bannerPopup .content .bannerAdBox .kakao {position: absolute; width: 80%; height: 11%; bottom: 7%; left: 50%; transform: translateX(-50%); }
.popup.bannerPopup .content .bannerAdBox .tel {position: absolute; width: 90%; height: 11%; bottom: 9%; left: 50%; transform: translateX(-50%); }
.popup.bannerPopup .content .bannerAdBox .tel2 {position: absolute; width: 35%; height: 15%; bottom: 7%; left: 13%; }
.popup.bannerPopup .content .bannerAdBox .kakao2 {position: absolute; width: 35%; height: 15%; bottom: 7%; right: 13%; }
/* 팝업 - 프로필 간편등록 */
.popup .content .addUserbox .profileBox {margin: 15px 0 10px 0;}
.popup .content .addUserbox .profileBox img {width: 100px; height: 100px;}
.popup .content .addUserbox .tabButton .list { flex-wrap: wrap; justify-content: center; margin-bottom: 10px;}
.popup .content .addUserbox dl .data dd .tag {position: absolute; top: 0; right: 5px; width: 30px; height: 30px; background: url(../images/icons/icon_tag_on.svg) no-repeat center; background-size: 70%; font-size: 0; text-indent: -9999px;}
.popup .content .addUserbox .directoryList:not(.hide) { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; max-height: 55px; overflow-y: auto; width: 100%; }
.popup .content .addUserbox .directoryList li button {padding: 3px 9px; border-radius: 5px; border: 1px solid var(--gray-300); color: var(--gray-500); font-size: 13px; font-weight: 600;}
.popup .content .addUserbox .directoryList li.on button { color: var(--white); border-color: var(--primary-navy); background-color: var(--primary-navy); }
/* 팝업 푸쉬 알림 */
.popup .content .pushView .title {text-align: center; font-size: 16px; font-weight: 700; color: var(--primary-orange); margin-bottom: 10px;}
.popup .content .pushView .msg {text-align: center; color: var(--main-font);} 
/* 팝업 제원 */
.popup .content .spec { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px; } 
.popup .content .spec > div {width: 100%;}
.popup .content .spec .name {text-align: center; background-color: var(--gray-100); color: var(--primary-navy); padding: 6px; font-weight: 700; border-radius: 10px; }
.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(--gray-300); width: 40%; padding: 6px; word-break: keep-all; letter-spacing: -.5px;}
.popup .content .spec dl dd { font-size: 13px; width: 60%; padding: 6px; text-align: center; border-bottom: 1px solid var(--gray-300);}
.popup .content .spec .left dl:nth-of-type(1) {margin-bottom: 10px;}
/* 팝업 - 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 .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(--gray-300);}
.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(--gray-500); font-size: 13px;}
.popup .content .listBox li a .finc {width: 50%; color: var(--primary-orange); font-size: 12px;}
.popup .content .listBox li a .date { color: var(--gray-400); font-size: 12px; font-weight: 400;}
.popup .content .listBox li a .other {color: var(--gray-500); 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;}
/* dl - 가격표 공유 */
.popup .content .priceShareBox dl dt {background-color: var(--primary-lightnavy); color: var(--white); padding: 10px; border-radius: 10px; gap: 10px; justify-content: flex-start;}
.popup .content .priceShareBox dl .data {gap: 10px;}
.popup .content .priceShareBox dl .data dt input[type="radio"] + span { color: var(--white); font-size: 12px;}
.popup .content .priceShareBox dl .data dt input[type="radio"] + span { color: var(--white); font-size: 12px;}
.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 top(상단) / phoneList*/ 
.popup .content .top { position: relative; color: var(--main-font); display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; background-color: var(--gray-50); margin-bottom: 10px; padding: 5px 10px; border-radius: 7px; gap: 10px; }
.popup .content .top .count {position: absolute; top: 50%; transform: translateY(-50%); right: 10px; color: var(--gray-500)}
.popup .content .top .count em { font-weight: 700;}
.phoneList {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;}
.phoneList li { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; border-bottom: 1px solid var(--gray-300); padding: 10px; text-align: left; }
.phoneList li label {width: 100%;}
.phoneList li:last-child {border-bottom: none;}
.phoneList li input[type="checkbox"] + span::before {top: 0; transform: none;}
.phoneList li .name {margin-right: 10px;} 
.phoneList li .box {width: 100%; } 
.phoneList li .phone {color: var(--gray-500);}
.phoneList li .star { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center;}
.phoneList li .star span {display: none;}
.phoneList li .star span.on {display: block; width: 18px; height: 18px; background: url(../images/icons/icon_star_on.svg) no-repeat center/contain; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.phoneList li.blank {flex-direction: column; border: 0;}
/* 팝업 tab */
.popup .content .tablist { position: sticky; left: 0; top: -1px; z-index: 2; background-color: var(--bg-white); margin-bottom: 15px; } 
.popup .content .tablist button, .popup .content .tablist a {flex: 1;}
.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; } 
/* 팝업 탭 내부 tabCont */
.popup .tabCont h3 { position: relative; padding-left: 10px; color: var(--primary-navy); margin-bottom: 10px;}
.popup .tabCont h3::before { position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 65%; border-radius: 2px; background-color: var(--primary-navy);}
.popup .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: 22px; height: 22px; background: url(../images/icons/icon_download.svg) no-repeat center/contain; }
/* 팝업 inputBox */
.popup .content .inputBox { 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;} 
.popup .content .inputBox b {position: absolute; right: 10px; color: var(--gray-500); top: 50%; transform: translateY(-50%); font-size: 12px;} 
/* 팝업 모델페이지 - optionList */
.popup .content .resultNum { position: sticky; width: 100%; bottom: -16px; right: 0; background-color: var(--bg-white); 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 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;} 
/* 팝업 - 로그인 예외처리 */
.popup .content .loginBox {height: auto; max-width: 400px; margin: 0 auto; margin-bottom: 15px;}
.popup .content .loginBox .link {margin: 0;}
.popup .content .loginBox .buttonBox button {max-width: 100%;} 
/* (견적) 팝업 리스트 - 채권 */
.popup .content .bondCutBox .index {display: flex; align-items: center; padding: 5px; background-color: var(--primary-navy); border-radius: 10px; color: var(--white); text-align: center;}
.popup .content .bondCutBox .index span {font-size: 12px; width: 23%;}
.popup .content .bondCutBox .index .date {width: 31%;}
.popup .content .bondCutBox ul li {border-bottom: 1px solid var(--gray-300);}
.popup .content .bondCutBox ul li:last-child {border-bottom: none;}
.popup .content .bondCutBox ul li button { width: 100%; padding: 10px 5px; font-size: 12px; display: flex; align-items: center;}
.popup .content .bondCutBox ul li button span { width: 23%;} 
.popup .content .bondCutBox ul li button .date { width: 31%;} 
.popup .content .bondCutBox ul li button.on {color: var(--primary-orange);}

/* 슬라이드 팝업 */
.popupSlide { overflow: hidden; touch-action: none; width: 100%; max-width: 1170px; transform: translate(-50%, 100%); position: fixed; bottom: 0; left: 50%; background-color: var(--bg-white); z-index: 50; transition: transform .3s ease-out; border-radius: 20px 20px 0 0; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 20px;}
.popupSlide.active { transform: translate(-50%, 0);}
.popupSlide.content {transform: translate(-50%, calc(100% - 60px));}
.popupSlide .frame {display: flex; flex-direction: column; flex-wrap: nowrap;}
.popupSlide .frame > .head { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; padding: 20px;}
.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 .closeBtn {position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 15%; height: 4px; border-radius: 3px; background-color: var(--gray-300); font-size: 0; text-indent: -9999px; }
.popupSlide .frame .panelContent { display: flex; flex-direction: column; justify-content: flex-start; overflow-y: auto; max-height: 65vh; padding: 0 20px;}
.popupSlide .frame .panelContent.open .likeList ul {max-height: unset;}
/* 팝업 - 스크롤바 */
.popupSlide .frame .panelContent::-webkit-scrollbar { width: 5px; height: 8px;}
.popupSlide .frame .panelContent::-webkit-scrollbar-track { background-color: transparent;}
.popupSlide .frame .panelContent::-webkit-scrollbar-thumb { background-color: var(--gray-300);}
.popupSlide .frame .panelContent::-webkit-scrollbar-track, .popupSlide .frame .panelContent::-webkit-scrollbar-thumb { border-radius: 30px; }
/* 슬라이드 팝업 - 모바일 메뉴 lnb영역 */
.popupSlide .frame .panelContent .lnb li a { display: block; padding: 10px 0; color: var(--gray-500); font-size: 16px; font-weight: 500;}
/* 슬라이드 팝업 - 차량 찜목록 */ 
.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;}
.popupSlide .frame .panelContent .likeList ul { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 10px; max-height: 300px;}
.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;}
.popupSlide .frame .panelContent .likeList ul li.hide {display: none;}
.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;}
.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;}
.popupSlide .frame .panelContent .likeList ul li .title .logo {display: flex;}
.popupSlide .frame .panelContent .likeList ul li .title .logo img {max-width: 35px;}
.popupSlide .frame .panelContent .likeList ul li .box { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px;} 
.popupSlide .frame .panelContent .likeList ul li .box img {max-width: 40%;}
.popupSlide .frame .panelContent .likeList ul li .box .info { width: calc(100% - 10px); display: flex; flex-direction: column; flex-wrap: nowrap; color: var(--main-font);}
.popupSlide .frame .panelContent .likeList ul li .box .info .lineup {color: var(--gray-500); font-size: 13px; word-break: keep-all;}
.popupSlide .frame .panelContent .likeList ul li .box .info .trim {color: var(--gray-500); font-size: 13px;} 
.popupSlide .frame .panelContent .likeList ul li .box .info .price {text-align: right; font-weight: 700;}   
.popupSlide .frame .panelContent .likeList ul li.nodata { width: 100%; flex-direction: column; padding: 20px 0; background-color: transparent; min-height: auto;}
.popupSlide .frame .panelContent .likeList ul li.nodata img {width: 50px;} 
.popupSlide .frame .panelContent .likeList ul li.state3::after { content: "재고 한정"; position: absolute; top: 10px; right: 10px; background-color: var(--gray-100); padding: 3px 9px; border-radius: 30px; font-size: 10px; color: var(--gray-500);}
.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);}
.popupSlide .frame .panelContent .likeList .desc {color: var(--gray-500); text-align: center;}
.popupSlide .frame .panelContent:has(.nodata) .panelContent {justify-content: center;}
.popupSlide .frame > .buttonBox { background-color: var(--bg-white); padding: 10px 20px; gap: 20px;}
.popupSlide .frame > .buttonBox .del {flex: unset;}
@media screen and (max-width:360px){
    .popupSlide .frame > .head h3:not(.hide) {flex-direction: column; align-items: flex-start; gap: 0;}
}
@media screen and (min-width:600px){
    .popup .frame > .head h3 {font-size: 18px;}
    .popup .content dl .data dt {width: 70px; font-size: 13px;}
    .popup .content .priceShareBox dl dt { width: 100%;}
    .popup .content dl .data dd {width: calc(100% - 75px);}
    .popup .content dl.row .data {width: calc(50% - 7.5px);} 
    .popup .content .spec {flex-direction: row; flex-wrap: nowrap;} 
    .popup .content .spec > div {width: calc(50% - 5px);} 
    .popup .content .bondCutBox .index span {font-size: 13px;}
    .popup .content .bondCutBox ul li button {font-size: 13px;}
    .phoneList li .star {position: absolute; right: 10px; bottom: 15px; width: auto;} 
    /* 팝업 - 체크박스 width 조정 */ 
    .popup .content dl .data dd.check input[type="checkbox"] + span:before, .popup .content dl .data dd.check input[type="radio"] + span::before {transform: unset; top: 1px;}
    .popup .content dl .data dd.check {align-items: flex-start;}
    .popup .content dl .data dd.check label {width: calc(33.3% - 6.6px);}
    .popupSlide .frame .panelContent .likeList ul li {width: calc(50% - 5px);}

} 
@media screen and (min-width: 800px) { 
    .popupSlide .frame > .buttonBox {justify-content: flex-end; padding: 20px;}
    .popupSlide .frame > .buttonBox a, .popupSlide .frame > .buttonBox button {flex: auto; max-width: 180px;}
    .popupSlide .frame > .buttonBox .del {margin-right: auto;}
    .popupSlide .frame .panelContent .likeList ul { max-height: none; overflow: hidden;}
    .popupSlide .frame .panelContent {max-height: 80vh;}
    .popupSlide .frame .panelContent .likeList ul { max-height: 100%; }

}
@media screen and (min-width: 1000px) {
    .popupSlide .frame .panelContent .likeList .all {right: 50px;}
    .popupSlide .frame .panelContent .likeList ul li {width: calc(25% - 7.5px);}
    .popupSlide .frame .panelContent .likeList ul li .box {flex-direction: column; height: 100%;} 
    .popupSlide .frame .head h3 span {font-size: 14px;}
    .popupSlide .frame .head .updown {display: block;}
}
@media screen and (min-width: 1400px) {
    .popupSlide.active { transform: translate(calc(-50% + 120px), 0px);}
}
@media (hover: hover) and (pointer: fine) {
    .popup .tabCont .cont .file a:hover {background-color: var(--primary-darknavy);}
}

/* footer */
.footer { margin-top: 30px; background-color: var(--bg); color: var(--main-font); border-top: 1px solid var(--gray-300);}
.footer .inner { padding: 15px 15px 75px 15px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 10px; }
.footer .inner span {  text-align: center; word-break: keep-all;}
.footer .inner .info {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 5px;}
.footer .inner a {text-decoration: underline; color: var(--gray-500);}
.footer .inner .btnInquiry {padding: 3px 9px; background-color: var(--gray-200); border-radius: 5px; font-size: 12px;}
.footer .inner .topButton {position: fixed; bottom: 75px; right: 15px; background: var(--bg-white) url(../images/icons/icon_arrow_upward.svg) no-repeat center; background-size: 50%; width: 50px; height: 50px; box-shadow: rgba(0, 0, 0, 0.24) 0px 1px 5px; border-radius: 50%; z-index: 10; font-size: 0; text-indent: -9999px;}
@media screen and (min-width:1000px){
    .footer .inner {padding: 15px}
    .footer .inner .topButton {bottom: 15px;}
}

/* 구매가이드 매뉴얼 */
.manualBox { max-width: 740px; margin: 0 auto; 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;}
.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; }

 
/* .manualBox .manualList ol {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px; padding-left: 28px;}
.manualBox .manualList ol li { color: var(--gray-500); line-height: 1.8;}
.manualBox .manualList strong { display: block; color: var(--main-font); font-size: 15px;} */
/* .manualBox h4.title { position: relative; max-width: 400px; padding: 25px 35px; margin: 0 auto; margin-top: 100px; margin-bottom: 30px; color: var(--primary-navy);}
.manualBox h4.title::before {content: ''; position: absolute; top: 0; left: 0; border-width: 5px 0 0 5px; border-style: solid; width: 24px; height: 24px;}
.manualBox h4.title::after {content: ''; position: absolute; bottom: 0; right: 0; border-width: 0 5px 5px 0; border-style: solid; width: 24px; height: 24px;}
.manualBox h6 ~ p {line-height: 1.5; margin: 0;} */

@media screen and (min-width:1000px){
    .manualBox h3 {font-size: 28px;}
    .manualBox h4 { font-size: 24px;}
}

/* 에러페이지 */
.wrapper[path^="error"] .inner { max-width: 100%; padding: 0; display: flex; align-items: center; justify-content: center; height: 100vh; }
.errorBox { display: flex; flex-direction: column; align-items: center; max-width: 420px; width: 100%; margin: 0 auto; padding: 40px 15px; }
.errorBox .icon {width: 150px;height: 150px; background:url(../images/icons/icon_error.svg) no-repeat center/contain;}
.errorBox .title { font-size: 20px; margin-bottom: 15px;}
.errorBox .message { position: relative; margin-bottom: 15px; padding-left: 15px; font-weight: 700; color: var(--primary-orange);}
.errorBox .message::before { position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 6px; height: 60%; background-color: var(--primary-orange); border-radius: 5px;}
.errorBox .notice {text-align: center; color: var(--gray-500); font-weight: 500; letter-spacing: -.5px; font-size: 13px; word-break: keep-all;}
@media screen and (min-width:800px){
    .wrapper[path^="error"] .inner {background-color: var(--gray-50);}
    .errorBox { padding: 40px 30px; border-radius: 20px;}
}