@charset "utf-8";
:root {
	--color-blue-main: #009DFF;
	--color-orange-main: #EE7100;
	--color-white: #FFFFFF;
	--color-dark-font: #000000;
	--color-lightDark-font: #222222;
	--color-darkGray-font: #666666;
	--color-gray-font: #828282;
	--color-blue-hover: #0077FF;
	--color-btn-back: #F5F6F7;
	--color-gray-hover: #EBEDF0;
	--color-yellow-lineHeight: #FFF6B2;
	--color-yellow-talk: #FEE500;
	--color-yellow-back: #FFEEDD;
	--color-blue-tableHead: #D5EDFF;
	--color-blue-back: #EAF6FF;
	--color-gray-border: #DDDDDD;
	--color-theme-books: #F5F7FF;
	--color-theme-guide: #FFF9F3;
	--color-theme-promotion: #FFF4FC;
	--color-theme-utility: #D8F7E7;
	--color-red: #FF4050;
}
/* 공통부분 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
*{box-sizing: border-box;}
body { margin:0; padding:0; font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--color-lightDark-font); font-family: 'Pretendard'; height: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;}
li {list-style-type: none;}
ul {padding: 0; margin: 0;}
a {text-decoration: none; color: inherit; color: var(--color-lightDark-font); transition: all 0.2s; cursor: pointer;}
em,i,address,cite {font-style: normal;}
h1 { font-size: 0; line-height: 0; height: 0; overflow: hidden; text-indent: -9999px;}
h2, h4, h5 {margin: 0;}
h3 {position: relative; font-size: 18px; margin: 30px 0 10px 0;}
h4 { margin: 10px 0; font-size: 16px; color: var(--color-gray-font);}
h5 {position: relative; font-size: 14px; margin: 10px 0;}
.wrap.main h2 { font-size: 0; line-height: 0; height: 0; overflow: hidden; text-indent: -9999px;}
dl, dd {margin: 0;}
textarea {width: 100%; line-height: 1.5; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--color-gray-border); font-family: 'Pretendard';}
input[type="text"] {padding: 8px 10px; border-radius: 10px; border: 1px solid var(--color-gray-border); font-family: 'Pretendard';}
input[type="checkbox"] { position:absolute;margin:0;padding:0;vertical-align:top;width:0;height:0;border:0;appearance:none;-moz-appearance:none;-webkit-appearance:none; }
input[type="checkbox"] + span { position: relative; display: flex; padding: 0 0 0 35px; min-height: 26px; align-items: center; }
input[type="checkbox"] + span:before { content: ""; position: absolute; top: calc(50%); transform: translateY(-50%); left:0; width: 26px; height: 26px; border-radius: 5px; background-color: var(--color-white);  background: url(../images/icon/check_box_outline.svg) center no-repeat; background-size: contain;}
input[type="checkbox"]:checked + span:before { content:""; position:absolute; top: calc(50%); transform: translateY(-50%); left:0; border: none; background: url(../images/icon/check_box_on.svg) center no-repeat; background-size: contain; }
input[type="radio"] { position:absolute;margin:0;padding:0;vertical-align:top;width:0;height:0;border:0;appearance:none;-moz-appearance:none;-webkit-appearance:none;}
input[type="radio"] + span { position: relative; display: flex; padding: 0 0 0 35px; min-height: 26px; align-items: center; }
input[type="radio"] + span:before { content: ""; position: absolute; top: calc(50%); transform: translateY(-50%); left:0; width: 26px; height: 26px; border-radius: 5px; background-color: var(--color-white);  background: url(../images/icon/radio_button_outline.svg) center no-repeat; background-size: contain;}
input[type="radio"]:checked + span:before { content:""; position:absolute; top: calc(50%); transform: translateY(-50%); left:0; border: none; background: url(../images/icon/radio_button_on.svg) center no-repeat; background-size: contain }
input:focus, textarea:focus, select:focus {outline: none;}
input:-webkit-autofill { box-shadow: 0 0 0 30px var(--color-white) inset; -webkit-text-fill-color: var(--color-dark-font); }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000000s ease-in-out 0s; }
select {position: relative; padding: 8px 10px; border: none; border: 1px solid var(--color-gray-border); font-size: 14px; color: var(--color-darkGray-font); border-radius: 10px; padding-left: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(../images/icon/arrow_down_gray.svg) 97% 50% no-repeat; background-size: 20px 20px; cursor: pointer; font-family: 'Pretendard';}
select option { padding-inline: 0px; padding-block-end: 0px; cursor: pointer;}
select::-ms-expand {display: none;}
label { cursor: pointer; }
button {padding: 0; border: 0; background: transparent; cursor: pointer; font-size: 14px; color: var(--color-lightDark-font); line-height: 1.5; transition: all 0.2s; font-family: 'Pretendard';}
.inner {position: relative; max-width: 1200px; margin: 0 auto; padding: 0 20px;}
.off {display: none;} 
@media screen and (min-width:1000px){
	h3 {font-size: 22px; margin: 50px 0 20px 0;}
	h4 {font-size: 18px;}
	h5 {font-size: 16px;}
}

.menuBack{ position: fixed; top: 60px; left: 0px; width: 100%; height: calc(100% - 60px); background: transparent; z-index: 10; display: none;}
/* ==== header ==== */
.header {width: 100%; position: relative; border-bottom: 1px solid var(--color-gray-border);} 
.header .dim {z-index: 22; display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-dark-font); opacity: .5;}
.header .inner {position: relative; display: flex;flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; height: 50px; }
.header .logo {z-index: 21; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); width: 100px; height: 30px; background: url(../images/etc/logo.svg) 50% 50% no-repeat; background-size: contain; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; }
.header .nav {z-index: 22; width: 280px; height: 100%; position: fixed; top: 0; right: -280px; bottom: 0; background: var(--color-white); display: none;}
.header .btnBox { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start;}
.header .btnBox .openSearch { width: 40px; height: 40px; background: url(../images/icon/icon_search.svg) 50% 50% no-repeat; background-size: 20px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.header .btnBox .btnMenu {cursor: pointer; width: 40px; height: 40px; background: url(../images/icon/header_menu.svg) 50% 50% no-repeat; background-size: 30px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
/* 공유하기 */
.shareBox {position: absolute; top: 5px; right: 100px;}  
.shareBox .box.off {display: none;}
.shareBox .box { position: absolute; top: 35px; right: 0; background-color: var(--color-blue-back); padding: 8px; gap: 10px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; border-radius: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; z-index: 1;}
.shareBox .box .kakao button { width: 30px; height: 30px; background: url(../images/icon/icon_kakao.svg) no-repeat center / contain; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; border-radius: 50%; }
.shareBox .box .url button { width: 30px; height: 30px; background: url(../images/icon/icon_link.svg) no-repeat center / contain; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px; border-radius: 50%; }
.shareBox > button {width: 40px; height: 40px; background: url(../images/icon/icon_share.svg) no-repeat center/contain; background-size: 18px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
/* 로그인, 로그아웃 */
.loginBtn {position: relative;}
.loginBtn > button {padding: 5px 10px 5px 30px; background-color: var(--color-blue-main); border: 1px solid var(--color-blue-main); border-radius: 30px; color: var(--color-white);}
.loginBtn > button::after {position: absolute; content: ''; top: 50%; left: 7px; transform: translateY(-50%); width: 18px; height: 18px; background: url(../images/icon/icon_login.svg) 50% 50% no-repeat; background-size: contain; }
.loginBtn .login::after { background: url(../images/icon/icon_login.svg) no-repeat center/contain; }
.loginBtn .logout::after { background: url(../images/icon/icon_logout.svg) no-repeat center/contain; }
.header .nav .loginBtn { position: absolute; top: 8px; left: 15px; }
/* 카카오톡, 상담전화 */
.header .nav .btn {width: 100%; height: 50px; border-bottom: 1px solid var(--color-gray-border); position: relative; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;}
.header .nav .btnClose {display: block; width: 40px; height: 40px; margin-right: 10px; background: url(../images/icon/close.svg) 50% 50% no-repeat; background-size: 25px 25px; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.header .nav .connect {display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; gap: 10px; width: 100%; padding: 20px; position: absolute; bottom: 0; left: 0; background: var(--color-white);}
.header .nav .connect span {display: block;}
.header .nav .connect span a {display: flex; align-items: center; font-size:18px; color: var(--color-blue-main); font-weight: 700; gap: 5px;}
.header .nav .connect span.talk a{color: var(--color-dark-font);}
.header .nav .connect span a img {background-color: var(--color-blue-main); border-radius: 50%; padding: 10px;}
.header .nav .connect span a img.talk{background-color: var(--color-yellow-talk);}
/* gnbArea */
.header .nav .gnbArea { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; height: calc(100% - 150px); padding-bottom: 100px; overflow-y: auto; }
.header .nav .gnbArea .gnb { width: 50%; }
.header .nav .gnbArea .gnb li button { display: block; width: 100%; text-align: center; font-size: 16px; font-weight: 500; color: var(--color-darkGray-font); padding: 15px 0;}
.header .nav .gnbArea .gnb li.on button { color: var(--color-dark-font); font-weight: 700; background-color: #EDF8FF; }
/* lnbArea */
.header .nav .gnbArea .lnbArea {width: 50%; }
.header .nav .gnbArea .lnbArea .lnb {width: 100%; height: 100%; background-color: #EDF8FF;}
.header .nav .gnbArea .lnbArea .lnb li {display: flex; flex-direction: column; padding: 0;}
.header .nav .gnbArea .lnbArea .lnb li.on {display: flex; background: #EDF8FF;}
.header .nav .gnbArea .lnbArea .lnb li a {display: block; color: var(--color-darkGray-font); font-weight: 500; text-align: center; padding: 15px 0; font-size: 15px;}
.header .nav .gnbArea .lnbArea .lnb li a.on {color: var(--color-blue-main);}
/* 검색창 */
.header .searchBox { z-index: 21; display: none; position: absolute; top: 8px; left: 50%; transform: translate(-50%, 0); width: 90%; border: 2px solid var(--color-blue-main); border-radius: 20px; background: var(--color-white);}
.header .searchBox .searchBoxForm { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 0 10px; margin: 0;}
.header .searchBox input {width: 100%;}
.header .searchBox input[name='keyword'] {width: calc(100% - 52px); border: 0; border-radius: 30px;}
.header .searchBox input::placeholder {color: var(--color-blue-main);}
.header .searchBox button.btnSearch {width: 20px; height: 20px; background: url(../images/icon/icon_search.svg) 50% 50% no-repeat; background-size: contain; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.header .searchBox .btnClose { width: 30px; height: 30px; background: url(../images/icon/close.svg) 50% 50% no-repeat; background-size: contain; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
/* 검색 결과 미리보기 */
.searchBoxForm .wordListValue { display: none; width: 100%; max-height: 300px; overflow-y: auto; border-top: 1px solid var(--color-gray-border)}
.searchBoxForm .wordListValue .recommBox {width: 100%;}
.searchBoxForm .wordListValue .recommBox h6 {margin: 5px 0; font-size: 14px; color: var(--color-blue-hover);}
.searchBoxForm .wordListValue .recommBox .wordList {display: flex; flex-direction: column; align-items: flex-start;}
.searchBoxForm .wordListValue .recommBox .wordList li {width: 100%;}
.searchBoxForm .wordListValue .recommBox .wordList li button {flex-direction: row-reverse;}
.searchBoxForm .wordListValue .recommBox .wordList li button .title {width: 25%; max-width: 75px; background-color: var(--color-blue-back); color: var(--color-blue-hover); padding: 2px 4px; font-size: 12px; border-radius: 5px;}
.searchBoxForm .wordListValue .recommBox .wordList li button {width: 100%; padding: 10px; border-radius: 10px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.searchBoxForm .wordListValue .recommBox .wordList li button .name {width: calc(75% - 5px); text-align: left; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.searchBoxForm .wordListValue .recommBox .wordList li button span.year {max-width: 75px; width: 25%; background-color: var(--color-gray-hover); padding: 2px 4px; font-size: 12px; border-radius: 5px;}
.searchBoxForm .wordListValue .recentBox {display: none;}
/* 검색 결과페이지 */
.mainBox .no-Result {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; height: 45vh; text-align: center; font-size: 16px; font-weight: 700; gap: 10px;}
.mainBox .no-Result img {width: 100%; max-width: 45px;}
.mainBox .result-summary { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 8px; padding: 70px 20px; margin-top: 20px; background-color: var(--color-blue-back); font-size: 16px;}
.mainBox .result-summary span {font-weight: 500;}
.mainBox .result-summary .separator {width: 2px; height: 10px; background-color: var(--color-blue-hover)}
.mainBox .result-summary .result-second {color: var(--color-blue-hover); font-weight: 700;}
.mainBox .category-section .titFix { display: inline-block; padding: 5px 15px; font-size: 16px; background-color: var(--color-blue-back); color: var(--color-blue-hover);border-radius: 10px; font-weight: 600; margin: 20px 0 0 0;}
.mainBox ul {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;}
.mainBox ul li {width: 100%; padding: 20px 10px; cursor: pointer;}
.mainBox ul li:not(:last-child) {border-bottom: 1px solid var(--color-gray-border);}
.mainBox .category-content > span {overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.mainBox .category-content .desc {margin: 0;}
.mainBox .category-content h4 { font-weight: 500; color: var(--color-lightDark-font); margin: 0; font-size: 14px;}
.mainBox .category-title { font-weight: 600; color: var(--color-dark-font); font-size: 16px; }

@media screen and (min-width:1000px){
	.header {height: 60px;}
	.header .dim {display: none;}
	.header nav {width: 100%;}
	.header .logo {z-index: 23;}
	.header .nav {position: inherit; display: flex; position: relative; width: 100%; height: 60px; right: 0; background: none;}
	.header .shareBox {display: none;}
	.header .nav .loginBtn {top: unset; left: 20px; bottom: 10px; z-index: 1;}
	.header .nav .connect {flex-direction: row; padding: 0 15px 0 220px; border-top:0; border-radius: 0 0 20px 20px; background-color: var(--color-blue-back);}
	.header .nav .connect span a {font-size: 15px; margin: 10px 0;}
	.header .nav .connect span a img {width: 100%; max-width: 30px; padding: 8px;}
	.header .inner { height: 60px; justify-content: flex-start;}
	.header .btnBox {z-index:23;}
	.header .btnBox .openSearch { display: none; }
	.header .searchBox { display: block; width: 23%; transform: translate(0, 0); top: 12px; left:auto; right: 65px; z-index: 23;}
	.header .searchBox .btnClose {display: none;}
	.header .nav .btn { display: none; width: auto; height: auto; border: none; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
	.header .nav .btn .btnClose {margin-right: 0;}
	.header .nav .gnbArea { position: relative; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; margin-left: 150px; margin-right: 400px; overflow-y: unset;  width: calc(100% - 550px); height: auto; padding-bottom: 0;}
	.header .nav .gnbArea .btnClose {display: none;}
	.header .nav .gnbArea .gnb {display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; height: 100%;}
	.header .nav .gnbArea .gnb li {width: 25%; height: 100%;}
	.header .nav .gnbArea .gnb li button {width: 100%; height: 60px; font-size: 18px; }
	.header .nav .gnbArea .gnb li.on button{ background-color: transparent;}
	.header .nav .gnbArea .lnbArea {display: none; width: 100%; position: absolute; top: 60px; left: 0; padding-bottom: 40px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; border-radius: 0 0 20px 20px;}
	.header .nav .gnbArea .lnbArea .lnb { display: flex; width: 100%; height: auto; padding-bottom: 15px; }
	.header .nav .gnbArea .lnbArea .lnb li {/*  display: block;  */width: 25%; height: 100%; border-radius: 0 0 20px 20px;}
	.header .nav .gnbArea .lnbArea .lnb li.on {display: block;}
	.header .nav .gnbArea .lnbArea .lnb li a {width: 100%; display: block; padding: 10px 0;}
	.searchBoxForm .wordListValue {max-height: 500px;}
	.searchBoxForm .wordListValue::-webkit-scrollbar { width: 5px;}
	.searchBoxForm .wordListValue::-webkit-scrollbar-track { background-color: var(--color-btn-back);}
	.searchBoxForm .wordListValue::-webkit-scrollbar-thumb { background-color: var(--color-gray-border);}
	.searchBoxForm .wordListValue::-webkit-scrollbar-track, .searchBoxForm .wordListValue::-webkit-scrollbar-thumb { border-radius: 10px;}
    .wrap.pc .shareBox > button:hover {background: url(../images/icon/icon_share_blue.svg) no-repeat center/contain;  background-size: 18px; width: 40px; height: 40px;}
	.wrap.pc .header .nav .gnbArea .gnb li button:hover {color: var(--color-dark-font);}
	.wrap.pc .header .nav .gnbArea .lnbArea .lnb li a:hover {color: var(--color-dark-font);}
	.wrap.pc .nav .gnbArea .lnbArea .lnb li a.on:hover {color: var(--color-blue-main);}
	.wrap.pc .loginBtn > button:hover {background-color: var(--color-blue-hover); border-color: var(--color-blue-hover)}
	.wrap.pc .mainBox ul li:hover .desc {text-decoration: underline;}
	.wrap.pc .searchBoxForm .wordListValue .recommBox .wordList li button:hover {background-color: var(--color-btn-back);}
	.wrap.pc .searchBoxForm .wordListValue .recommBox .wordList li.over button {background-color: var(--color-btn-back);}
}
/* ==== themeBox/bannerBox ==== */
.themeBox { position: relative; padding: 35px 20px; display: flex; flex-direction: column; align-items: center; border-radius: 15px; margin-bottom: 30px;}
.themeBox::after {position: absolute; content: ''; bottom: 20px; right: 20px; width: 60px; height: 60px; opacity: 0.3;}
.themeBox h2 { font-size: 24px; color: var(--color-dark-font); text-align: center; word-break: keep-all;}
.themeBox .sub { display: none; font-size: 16px; font-weight: 500; color: var(--color-darkGray-font); text-align: center; max-width: 600px; word-break: keep-all;}
.books .themeBox, .series .themeBox { background-color: var(--color-theme-books); }  
.books .themeBox::after, .series .themeBox::after { background: url(../images/theme/theme_books.png) no-repeat center/contain;}
.guide .themeBox { background-color: var(--color-theme-guide);}  
.guide .themeBox::after { background: url(../images/theme/theme_guide.png) no-repeat center/contain; opacity: 0.3;}
.promotion .themeBox { background-color: var(--color-theme-promotion); }  
.promotion .themeBox::after {background: url(../images/theme/theme_promotion.png) no-repeat center/contain; opacity: 0.3;}
.utility .themeBox { background-color: var(--color-theme-utility);}  
.utility .themeBox::after { bottom: 0; width: 120px; height: 120px; background: url(../images/theme/theme_utility.png) no-repeat center/contain; opacity: 0.3;}

@media screen and (min-width:1000px){
	.themeBox {padding: 40px 20px;}
	.themeBox::after {width: 100px; height: 100px;}
	.books .themeBox::after {opacity: 1;}
	.guide .themeBox::after {opacity: 1;}
	.promotion .themeBox::after {opacity: 1;}
	.utility .themeBox::after {opacity: 1;}
	.themeBox .sub { display: block;}
	
}
/* slideTab */
.slideTab {position: fixed; top: 50%; transform: translateY(-50%); right: 0; z-index: 25;}
.slideTab .recentSlide {background-color: var(--color-blue-back); padding: 13px; border-radius: 10px 0 0 10px; display: flex;flex-direction: column;justify-content: center;align-items: center;flex-wrap: nowrap; gap: 10px; }
.slideTab .recentSlide .tit {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 5px;}
.slideTab .recentSlide .tit span.name {font-weight: 500;}
.slideTab .recentSlide .tit span.num {color: var(--color-blue-hover); font-weight: 700;}
.slideTab .recentSlide .recentImage {display: flex;flex-direction: column;justify-content: center;align-items: center;flex-wrap: nowrap; gap: 10px; }
.slideTab .recentSlide .recentImage .list {max-width: 100px; background-color: var(--color-white); border-radius: 5px; padding: 5px;}
.slideTab .recentSlide .recentImage .list li a {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center;}
.slideTab .recentSlide .recentImage .list li a img {width: 100%; max-width: 100px;}
.slideTab .recentSlide .recentImage .list li a .name { text-align: center; width: 100px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-overflow: ellipsis; padding: 0px 5px;}
.slideTab .recentSlide .recentImage .slideBtn {display: flex; justify-content: space-around; align-items: center; width: 100%;}
.slideTab .recentSlide .recentImage .slideBtn button{ background: url(../images/icon/arrow_gray.svg) no-repeat center/contain; background-size: 17px 17px; width: 20px; height: 20px; background-color: var(--color-white); border-radius: 50%; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.slideTab .recentSlide .recentImage .slideBtn button.prev {transform: rotate(180deg);}
/* locationBox */
.locationBox { background-color: var(--color-white); position: relative; padding: 10px 0; }
.locationBox span {font-size: 13px;}
.locationBox a {position: relative; font-size: 13px; color: var(--color-darkGray-font);}
.locationBox a:not(:nth-last-of-type(1)) { padding-right: 18px;}
.locationBox a:not(:nth-last-of-type(1))::after { content:""; position: absolute; top: 50%; transform: translateY(-50%); right: -2px; width: 18px; height: 18px; background: url(../images/icon/arrow_gray.svg) 0 0 no-repeat; background-size: contain;}
.locationBox .scroll {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
.locationBox .scroll a:not(:last-child) { padding-right: 18px;}
.locationBox .scroll a:not(:last-child)::after { content:""; position: absolute; top: 50%; transform: translateY(-50%); right: -2px; width: 18px; height: 18px; background: url(../images/icon/arrow_gray.svg) 0 0 no-repeat; background-size: contain;}
.locationBox select {min-width: 100px; margin-right: 10px; transition: all 0.2s; font-size: 13px;}
.locationBox select:last-child {margin-right: 0;}
.locationBox .shareBox {display: none;}
.locationBox.fix {position: fixed; top: 0; z-index: 101; width: 100%; max-width: 1160px; margin: 0 auto; left: 0; padding: 10px;}


/* locationBox ul li */
.locationBox .selBox { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; margin-right: 15px; border: 1px solid var(--color-gray-border); border-radius: 10px;}
.locationBox .selBox:last-child {margin-right: 0;}
.wrap.brand .scroll div.selBox:not(:nth-last-of-type(1))::after {content: none;}
.locationBox .scroll div.selBox:not(:nth-last-of-type(1))::after { content: ''; padding-left: 18px; width: 18px; height: 18px; background: url(../images/icon/arrow_gray.svg) 0 0 no-repeat; background-size: contain;}
.locationBox .selBox > button {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 5px; position: relative; padding: 4px 30px 4px 20px; width: 100%; text-align: center; min-width: 100%;}
.locationBox .selBox > button::after { content:""; position: absolute; top: 50%; transform: translateY(-50%); right: 5px; width: 20px; height: 20px; background: url(../images/icon/arrow_down_gray.svg) 0 0 no-repeat; background-size: contain;}
.locationBox .selBox.open > button::after {transform: translateY(-50%) rotate(180deg);}
.locationBox .selBox > button span {color: var(--color-darkGray-font); transition: all 0.2s;}
.locationBox .selBox .list {max-width: 100%; max-height: 200px; overflow-y: auto; overflow-x: hidden; position: absolute; top: 35px; left: 0; border-top: none; border: 1px solid var(--color-gray-border); background-color: var(--color-white); border-radius: 0 0 10px 10px; z-index: 5;}
.locationBox .selBox .list ul { border-radius: 10px;}
.locationBox .selBox .list ul li {position: relative; height: 35px;}
.locationBox .selBox .list ul li.on button {color: var(--color-dark-font); background-color: var(--color-btn-back);}
.locationBox .selBox .list ul li button span { font-size: 12px;  }
.locationBox .selBox .list ul li button span.state1 {color: var(--color-blue-main); font-weight: 500; }
.locationBox .selBox .list ul li button span.state2 {color: #0ACB00; font-weight: 500;}
.locationBox .selBox .list ul li button span.state3 {color: var(--color-orange-main); font-weight: 500;}
.locationBox .selBox .list ul li button span.state4 {color: var(--color-gray-font); font-weight: 500;}
.locationBox .selBox .list ul li button, .locationBox .selBox .list ul li a {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 5px; width: 100%; height: 100%; padding: 10px; color: var(--color-darkGray-font); text-align: left; background-color: var(--color-white); font-size: 13px;}
.locationBox .selBox .list ul li:hover button, .locationBox .selBox .list ul li:hover a {color: var(--color-dark-font); background-color: var(--color-btn-back);}
.locationBox .selBox .list::-webkit-scrollbar {width: 7px;}
.locationBox .selBox .list::-webkit-scrollbar-track {background-color: var(--color-btn-back);}
.locationBox .selBox .list::-webkit-scrollbar-thumb {background-color: #CCC;}
.locationBox .selBox .list::-webkit-scrollbar-track, .locationBox .selBox .list::-webkit-scrollbar-thumb {border-radius: 10px;}


@media screen and (min-width:1000px){
	.themeBox h2 { font-size: 40px;}
	.themeBox .sub { font-size: 20px;}
	.locationBox .shareBox {display: block; top: 0px; right: 0;}
	.wrap.pc .locationBox a:not(:first-child):hover {color: var(--color-blue-main);}
	.wrap.pc .locationBox select:hover {color: var(--color-dark-font);}
	.wrap.pc .locationBox .selBox > button:hover span {color: var(--color-dark-font);}
}

/* ==== 각종 버튼, 더 보기 및 공통요소 ==== */
/* button */
.buttonBox { text-align: center; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 10px;}
.buttonBox button, .buttonBox a {background-color: var(--color-blue-main); color: var(--color-white); border-radius: 30px; font-size: 18px; flex: 1; padding: 5px 15px; border: 1px solid var(--color-blue-main); line-height: 1.5; white-space: nowrap;}
.buttonBox button.white, .buttonBox a.white {background-color: var(--color-white); color: var(--color-blue-main);}
.buttonBox button.arrow span, .buttonBox a.arrow span{position: relative; padding-right: 15px;}
.buttonBox button.arrow span::after, .buttonBox a.arrow span::after {position: absolute; content:''; top: 50%; right: -10px; transform: translateY(-50%); width: 25px; height: 25px; background: url(../images/icon/arrow_white.svg) 50% 50% no-repeat; background-size: contain; transition: all 0.3s; }
.buttonBox button.detailBtn {border: 1px solid var(--color-blue-main); background-color: var(--color-white); color: var(--color-blue-main);}
.buttonBox a.detailBtn {border: 1px solid var(--color-blue-main); background-color: var(--color-white); color: var(--color-blue-main);}
.buttonBox a.detailBtn span {position: relative; }
.buttonBox a.detailBtn.arrow span, .buttonBox button.detailBtn.arrow span {padding-right: 15px;}
.buttonBox a.detailBtn.arrow span::after, .buttonBox button.detailBtn.arrow span::after {position: absolute; content:''; top: 50%; right: -10px; transform: translateY(-50%) rotate(90deg); width: 25px; height: 25px; background: url(../images/icon/arrow_up_blue.svg) no-repeat center/contain; }
.buttonBox button:disabled {background-color: var(--color-gray-hover); border-color: var(--color-gray-hover); color: var(--color-gray-font); pointer-events: none;}
/* 옵션 더보기 버튼 */
.buttonBox.moreOpt button {font-size: 14px; padding: 3px 9px; background-color: var(--color-white); color: var(--color-gray-font); border-color: var(--color-gray-border);}
.buttonBox.moreOpt button.arrow span::after, .buttonBox.moreOpt a.arrow span::after {width: 15px; height: 15px; right: -3px; background: url(../images/icon/arrow_gray.svg) 50% 50% no-repeat;}
/* a태그 버튼 */
.linkBox {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;}
.linkBox > a {background-color: var(--color-white); color: var(--color-darkGray-font); border: 1px solid var(--color-gray-border); border-radius: 30px; padding: 2px 10px; font-size: 14px;}
.linkBox > a.arrow span { position: relative; padding-right: 10px; }
.linkBox > a.arrow span::after {position: absolute; content:''; top: 50%; right: -10px; transform: translateY(-50%); width: 20px; height: 20px; background: url(../images/icon/arrow_gray.svg) 50% 50% no-repeat; background-size: contain;}
/* 페이지 */
.pageBox {display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: nowrap; padding: 30px 0;}
.pageBox button {position: relative; padding: 10px; box-sizing: border-box;}
.pageBox button.now {background-color: rgba(0,157,255,0.13); border-radius: 50%; padding: 3px 10px;}
.pageBox button.now span{color: var(--color-blue-main); font-weight: 600;}
.pageBox button span { font-size: 14px;color: var(--color-gray-font); text-align: center; }
.pageBox button.first span {position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(180deg); width: 25px; height: 25px; background: url(../images/icon/icon_double_arrow.svg) 50% 50% no-repeat; background-size: contain; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.pageBox button.prev span {position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(90deg); width: 25px; height: 25px; background: url(../images/icon/arrow_down_gray.svg) 50% 50% no-repeat; background-size: contain; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.pageBox button.next span {position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(270deg); width: 25px; height: 25px; background: url(../images/icon/arrow_down_gray.svg) 50% 50% no-repeat; background-size: contain; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.pageBox button.last span {position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 25px; height: 25px; background: url(../images/icon/icon_double_arrow.svg) 50% 50% no-repeat; background-size: contain; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
/* 더보기 버튼 (화살표) */
.openFilter.up {width: 25px; height: 25px; background: url(../images/icon/icon_filter_down.svg) 50% 50% no-repeat; background-size: contain; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.openFilter.down {width: 25px; height: 25px; background: url(../images/icon/icon_filter_up.svg) 50% 50% no-repeat; background-size: contain; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.openMore.up { position: absolute; top: 0; right: 0; width: 25px; height: 25px; background: url(../images/icon/arrow_down_gray.svg) 50% 50% no-repeat; background-size: contain; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.openMore.up:hover { background: url(../images/icon/arrow_down_blue.svg) 50% 50% no-repeat; background-size: contain;}
.openMore.down { position: absolute; top: 0; right: 0; width: 25px; height: 25px; background: url(../images/icon/arrow_up_gray.svg) 50% 50% no-repeat; background-size: contain; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.openMore.down:hover {background: url(../images/icon/arrow_up_blue.svg) 50% 50% no-repeat; background-size: contain;}
/* 더보기 버튼 (사각형) */
.openMoreR { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 10px; margin-top: 5px;}
.openMoreR button { display: flex; flex-direction: row; align-items: center; justify-content: center; position: relative; width: 100%; text-align: center; border-radius: 10px; border: 1px solid var(--color-btn-back); background-color: var(--color-btn-back); padding: 12px; z-index: 1;}
.openMoreR button span{ color: var(--color-lightDark-font); text-indent: -9999px; font-size: 0; line-height: 0;}
.openMoreR.close button::before {content:'더 보기';  color: var(--color-lightDark-font); font-size: 16px;}
.openMoreR.open button::before{content:'접기'; color: var(--color-lightDark-font); font-size: 16px; }
.openMoreR.close button::after {content:''; width: 22px; height: 22px; background: url(../images/icon/double_arrow_up_gray.svg) no-repeat center/contain; }
.openMoreR.open button::after{content:''; width: 22px; height: 22px; background: url(../images/icon/double_arrow_up_gray.svg) no-repeat center/contain; transform: rotate(180deg); }
/* 더보기 버튼 (원형) */
.openMoreC button {width: 25px; height: 25px;font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.openMoreC.close button{ background: #fff url(../images/icon/double_arrow_up_gray.svg) no-repeat center / contain; z-index: 1; border: 1px solid var(--color-gray-border); border-radius: 50%;}
.wrap.pc .openMoreC.close button:hover{ background: #fff url(../images/icon/double_arrow_up_blue.svg) no-repeat center / contain; }
.openMoreC.open button{ background: #fff url(../images/icon/double_arrow_up_gray.svg) no-repeat center / contain; z-index: 1; border: 1px solid var(--color-gray-border); border-radius: 50%; transform: rotate(180deg);}
.wrap.pc .openMoreC.open button:hover{ background: #fff url(../images/icon/double_arrow_up_blue.svg) no-repeat center / contain; transform: rotate(180deg);}
/* 하단 고정 버튼 (카카오, 전화, 상담신청) */
.proBtn { position: fixed; bottom: 0; left: 0; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 20px; padding: 0 20px; height: 80px; background-color: #101e2e; z-index: 2;}
.proBtn button {flex:1; border-radius: 30px; font-size: 16px; padding: 12px 0; line-height: 1.5;}
.proBtn button.request {background-color: var(--color-blue-main); color: var(--color-white); border: 1px solid var(--color-blue-main);}
.proBtn .kakaoIcon{position: absolute; top: -80px; right: 20px; padding: 30px; display: inline-block; width: 25px; height: 25px; background: url(../images/icon/icon_talk.svg) 16px 16px no-repeat; background-size: 30px 30px; font-size: 0; line-height: 0; text-indent: -9999px; overflow: hidden; border-radius: 50%;  background-color: var(--color-yellow-talk);}
.proBtn a.tel {flex: 1; text-align: center; border-radius: 30px; font-size: 16px; padding: 13px 0; line-height: 1.5; background-color: var(--color-white); transition: all 0.3s; border: 1px solid var(--color-white); color: var(--color-blue-main);}
.proBtn a.tel span {position: relative; padding-left: 25px;}
.proBtn a.tel span::before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 18px; height: 18px; background: url(../images/icon/icon_tel_blue.svg) no-repeat center/contain; z-index: 2;}
/* 공지사항 */
.commentBox {padding: 10px; color: var(--color-darkGray-font); font-weight: 700; background-color: var(--color-btn-back); border-radius: 15px; margin: 20px 0;}
.alertBox {padding: 10px; color: var(--color-orange-main); font-weight: 700; background-color: var(--color-yellow-back); border-radius: 15px; margin: 20px 0;}
.noticeBox {padding: 10px; color: var(--color-blue-main); font-weight: 700; background-color: var(--color-blue-back); border-radius: 15px; margin: 20px 0;}
/* desc */
.descBox dl {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;}
.descBox dl dt { color: var(--color-orange-main); font-size: 16px; font-weight: 500; width: 100%; margin-bottom: 5px;}
.descBox dl dd { font-size: 14px; font-weight: 300; line-height: 1.4; color: var(--color-gray-font); margin-bottom: 20px;}
.descBox .desc.marginBottom {margin-bottom: 20px;}
.descBox .desc {font-size: 12px;}
.desc { margin: 10px 0; color: var(--color-darkGray-font);}

@media screen and (max-width: 400px) {
	.buttonBox button, .buttonBox a {padding: 6px; font-size: 14px;}
}
@media screen and (min-width:800px) {
	.descBox {border: 1px solid var(--color-gray-border); border-radius: 30px; padding: 20px;}
	.descBox dl { flex-direction: row; flex-wrap: wrap; align-items: flex-start; margin-top: 20px;}
	.descBox dl dt {width: 5%; margin: 0;}
	.descBox dl dd {width: 95%; margin-bottom: 20px; font-size: 16px;}
	.proBtn {height: 80px; gap: 50px;}
	.proBtn button {max-width: 300px; padding: 13px 0; font-size: 20px;}
	.proBtn a.tel {max-width: 300px; padding: 13px 0; font-size: 20px;}
}

@media screen and (min-width:1000px) {
	.filterBox .choice .input span {font-size: 16px;} 
	.filterBox .choice input[type="text"] {font-size: 16px; font-weight: 700;}
	.commentBox {padding: 12px 20px; color: var(--color-darkGray-font); font-size: 16px;}
	.alertBox {padding: 12px 20px; font-size: 16px;}
	.noticeBox {padding: 12px 20px; font-size: 16px;}
	.openMore.up { top: 50%; transform: translateY(-50%); }
	.openMore.down {top: 50%; transform: translateY(-50%); }
	.wrap.pc .buttonBox button:hover, .wrap.pc .buttonBox a:hover { background-color: var(--color-blue-hover); border: 1px solid var(--color-blue-hover);}
	.wrap.pc .buttonBox button.plus:hover {background-color: var(--color-gray-hover); border: 1px solid var(--color-gray-hover);}
	.wrap.pc .buttonBox button.detailBtn:hover {background-color: var(--color-gray-hover); border: 1px solid var(--color-gray-hover);}
	.wrap.pc .buttonBox a.detailBtn:hover {background-color: var(--color-gray-hover); border: 1px solid var(--color-gray-hover);}
	.wrap.pc .linkBox > a:hover {color: var(--color-dark-font); background-color: var(--color-gray-hover); border: 1px solid var(--color-gray-hover);}
	.wrap.pc .pageBox button:hover::before { position: absolute; content:''; width: 100%; padding-top: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0,157,255,0.13); border-radius: 50%;}
	.wrap.pc .proBtn button.request:hover {background-color: var(--color-blue-hover); color: var(--color-white); border: 1px solid var(--color-blue-hover);}
	.proBtn a.tel:hover {background-color: var(--color-gray-hover); border-color: var(--color-gray-hover);}
	.wrap.pc .buttonBox button:disabled, .wrap.pc .buttonBox button:disabled:hover {background-color: var(--color-gray-hover); border-color: var(--color-gray-hover); color: var(--color-gray-font); pointer-events: none;} 
	.wrap.pc .buttonBox.moreOpt button:hover, .wrap.pc .buttonBox.moreOpt a:hover {background-color: var(--color-gray-hover); border-color: var(--color-gray-hover);}
	/* .proBtn a.tel:hover span::before {background: url(../images/icon/icon_tel.svg) no-repeat center/contain;} */
	/*.proBtn a.tel:hover span::after { position: absolute; content: ''; width: 18px; height: 18px; top: 50%; left: -8px; transform: translateY(-50%); background-color: var(--color-blue-main); padding: 8px; border-radius: 50%;}
	.proBtn a.tel:hover span::before {background: url(../images/icon/icon_tel.svg) no-repeat center/contain;} */ 
}

/* ==== 탭메뉴 ==== */
.tabButton {overflow-x: auto; margin: 10px 0;}
.tabButton .list {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 15px; padding-bottom: 5px;}
.tabButton .list li button, .tabButton .list li a {display: block; padding: 6px 12px; white-space: nowrap; border: 1px solid var(--color-btn-back); background-color: var(--color-btn-back); color: var(--color-darkGray-font); font-size: 16px; border-radius: 30px;}
.tabButton .list li.on button, .tabButton .list li.on a {background-color: var(--color-white); border: 1px solid var(--color-blue-main); color: var(--color-blue-main); border-radius: 30px; font-weight: 600;}
.tabButton::-webkit-scrollbar { height: 5px;}
.tabButton::-webkit-scrollbar-track { background-color: var(--color-btn-back);}
.tabButton::-webkit-scrollbar-thumb { background-color: var(--color-gray-border);}
.tabButton::-webkit-scrollbar-track, .tabButton::-webkit-scrollbar-thumb { border-radius: 10px;}
/* tabBar */
.tabBar {margin-top: 30px;/*  line-height: 20px; overflow-x: auto; scrollbar-width: none; */}
.tabBar .list {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; border-top: 2px solid var(--color-gray-font);}
.tabBar .list li {width: 100%;}
.tabBar .list li button { font-size: 1em; width: 100%; display: inline-block; padding: 15px 0; font-weight: 600;text-align: center; color: var(--color-darkGray-font); border: 1px solid var(--color-gray-border); border-left: none;background-color: var(--color-btn-back);}
.tabBar .list li:first-child button {border-left: 1px solid var(--color-gray-border)}
.tabBar .list li.on button {color: var(--color-dark-font); background-color: var(--color-white); border-bottom: 1px solid transparent; }
.tabBar.fix {  position: fixed; top: 0; left: 0; right: 0; z-index: 22; width: 100%; max-width: 1160px; margin: 0 auto;}
/* tabRadio */
.tabRadio {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center;}
.tabRadio label{ margin: 0 0 -2px 0;}
.tabRadio label input[type="radio"] + span {font-size: 16px; padding: 8px 16px; background-color: var(--color-btn-back); font-weight: 500; color: var(--color-darkGray-font); border-radius: 15px 15px 0 0; border: 1px solid var(--color-btn-back); white-space: nowrap;}
.tabRadio label input[type="radio"]:checked + span { background-color: var(--color-white); border: 1px solid var(--color-blue-main); border-bottom: 0; color: var(--color-blue-main);}
.tabRadio label input[type="radio"]:checked:hover + span {background-color: var(--color-white); color: var(--color-blue-main); }
.tabRadio label input[type="radio"]:checked + span:before {background: none;}
.tabRadio label span::before {background: none;}
.tabRadio label span::before {background: none;}
/* btnRadio */
.btnRadio {display: flex; gap: 10px; flex-direction: row; flex-wrap: wrap; justify-content: flex-start;}
.btnRadio label input[type="radio"] + span {padding: 5px 10px; background-color: var(--color-btn-back); font-weight: 500; color: var(--color-darkGray-font); border-radius: 30px; border: 1px solid var(--color-btn-back); white-space: nowrap;}
.btnRadio label input[type="radio"]:checked + span { background-color: var(--color-white); border: 1px solid var(--color-blue-main); color: var(--color-blue-main);}
.btnRadio label input[type="radio"]:checked:hover + span { background-color: var(--color-white); border: 1px solid var(--color-blue-main); color: var(--color-blue-main);}
.btnRadio label input[type="radio"]:checked + span:before {background: none;}
.btnRadio label span::before {background: none;}

/* 브랜드페이지 tabButton */
.tabButton.brand .list {flex-wrap: wrap; align-items: center; gap: 0; }
.tabButton.brand .list li {padding: 5px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; border-radius: 15px; border: 1px solid transparent; }
.tabButton.brand .list li.on a {border: 1px solid var(--color-blue-main); color: var(--color-blue-main);}
.tabButton.brand .list li a { max-width: 90px; padding: 5px; min-height: 75px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; border-radius: 15px; border: none; background-color: var(--color-white);/*  border: 1px solid var(--color-gray-border); */ /* box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 6px, rgba(255, 255, 255, 0.5) 0px 3px 6px; */}
@media screen and (max-width:450px) {
	.tabBar .list li button {font-size: 0.79em; letter-spacing: -.5px;}
}
@media screen and (min-width:1000px) {
	.tabButton {margin: 50px 0 20px 0;}
	.tabBar .list li button {font-size: 1.14em;}
	.tabBar .list li a {font-size: 18px;}
	.btnRadio label input[type="radio"] + span {font-size: 16px;}
	.btnRadio label input[type="radio"] + span:hover {background-color: var(--color-gray-hover); color: var(--color-lightDark-font);}
	.tabRadio label input[type="radio"] + span:hover {background-color: var(--color-gray-hover); color: var(--color-lightDark-font);}
	.tabRadio label input[type="radio"]:checked {background-color: var(--color-white); color: var(--color-blue-main);}
	.wrap.pc .tabButton .list li:hover button, .wrap.pc .tabButton .list li:hover a{background-color: var(--color-gray-hover); border: 1px solid var(--color-gray-hover); color: var(--color-lightDark-font);}
	.wrap.pc .tabButton .list li.on:hover button, .wrap.pc .tabButton .list li.on:hover a{background-color: var(--color-white); border: 1px solid var(--color-blue-main); color: var(--color-blue-main);}
	.wrap.pc .tabBar .list li.on:hover button {color: var(--color-dark-font);}
	.wrap.pc .tabBar .list li button:hover {color: var(--color-dark-font); background-color: var(--color-white);}
	.wrap.pc .tabButton.brand .list li:hover a{background-color: var(--color-btn-back);}
	.wrap.pc .tabButton.brand .list li:hover a span {color: var(--color-lightDark-font);}
	.wrap.pc .tabButton.brand .list li.on:hover a {background-color: var(--color-white);}
	.wrap.pc .tabButton.brand .list li.on:hover a span {color: var(--color-blue-main);}
}

/* ==== 슬라이드 탭 & shadow ==== */
.slideBar.inline { margin-bottom: 20px; }
.slideBar .barBtn{width: 100%; position: relative; padding: 7px 40px 7px 20px; background-color: var(--color-blue-back); border-radius: 15px 15px 0 0; text-align: left;}
.slideBar .barBtn.open::after {position: absolute; content: ''; top: 50%; right: 10px; transform: translateY(-50%); width: 25px; height: 25px; background: url(../images/icon/arrow_up_gray.svg) no-repeat center/contain;}
.slideBar .barBtn.close::after {position: absolute; content: ''; top: 50%; right: 10px; transform: translateY(-50%) rotate(180deg); width: 25px; height: 25px; background: url(../images/icon/arrow_up_gray.svg) no-repeat center/contain;}
.slideBar .barBtn em {position: relative; padding-left: 30px; font-size: 18px; color: var(--color-blue-main);}
.slideBar .barBtn em::before { position: absolute; content: ''; top: 50%; left: 10px; transform: translateY(-50%); width: 9px; height: 3px; background-color: var(--color-blue-main); font-weight: 500;}
.slideBar .barBtn span {letter-spacing: -0.5px; font-size: 16px; color: var(--color-blue-main);}
h3.slideBar .barBtn span { letter-spacing: -0.5px; font-size: 16px; font-weight: 600; color: var(--color-dark-font);}
.slideBar .barBtn span.noti { color: var(--color-gray-font); font-size: 13px; font-weight: lighter;}
.slideBar .barBtn .count {font-size: 14px; font-weight: 300;}
.slideBar .barBtn .count::before {content:'(';}
.slideBar .barBtn .count::after {content:')';}
.slideBar.underline .barBtn{ background-color: var(--color-white); border-bottom: 1px solid var(--color-gray-border); }
@media screen and (min-width:1000px) {
	h3.slideBar .barBtn span { font-size: 20px;}
	.slideBar .barBtn em { font-size: 20px;}
	.slideBar .barBtn .count {font-size: 16px;}
	.wrap.pc .slideBar .barBtn:hover::after {background: url(../images/icon/arrow_up_blue.svg) no-repeat center/contain;}
} 

/* ==== 공통 filterBox  ==== */
.filterBox .choiced { position: relative; display: flex; align-items: center; justify-content: flex-start; border-bottom: 1px solid var(--color-gray-border); padding-right: 25px; min-height: 50px;}
.filterBox .choiced .title {min-width: 70px; padding-right: 10px; color: var(--color-gray-font); font-weight: 600; }
.filterBox .choiced .list {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; white-space: nowrap; gap: 10px; padding: 10px 0;}
.filterBox .choiced .list button.close {position: relative; border: 1px solid var(--color-blue-main); padding: 5px 25px 5px 10px; border-radius: 30px; color: var(--color-blue-main);}
.filterBox .choiced .list button.close span::after {content:''; position: absolute; top:50%; right: 5px; transform: translateY(-50%); width: 15px; height: 15px; background: url(../images/icon/close_blue.svg) no-repeat center/contain;}
.filterBox .choiced .openFilter { position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.filterBox .choice {padding-top: 10px; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 25px;}
.filterBox .choice > li {position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start;  gap: 5px 0;}
.filterBox .choice > li.addlocal.off { display: none; }
.filterBox .choice > li.addlocal .moreBrand {position: absolute; top: 2px; right: 0; border: 1px solid var(--color-yellow-back); background-color: var(--color-yellow-back); padding: 5px 15px; border-radius: 30px; color: var(--color-orange-main);  z-index: 1;}
.filterBox .choice > li .title {color: var(--color-darkGray-font); font-weight: 500;}
.brand .filterBox .choice > li .title {color: var(--color-blue-main); background-color: var(--color-blue-back); border-radius: 5px; padding: 3px 9px; font-weight: 700; text-align: center;}
.filterBox .choice .input {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; color: var(--color-gray-font); gap: 10px;}
.filterBox .choice .input .box { width: 43.1%; position: relative;}
.filterBox .choice .input .box span {position: absolute; top: 50%; transform: translateY(-50%); right: 10px; color: var(--color-gray-font);} 
.filterBox .choice li .priceBtnBox {text-align: center;}
.filterBox .choice li .priceBtnBox button {padding: 7px 21px; background-color: var(--color-blue-main); border: 1px solid var(--color-blue-main); color: var(--color-white); border-radius: 30px; white-space: nowrap; font-size: 16px;}
.filterBox .choice input[type="text"] { width: 100%; border-radius: 30px; text-align: right; padding: 10px 40px 10px 10px;} 
.filterBox .choice input[type="text"].focus {border: 1px solid var(--color-blue-main); color: var(--color-blue-main);}
.filterBox .choice .list {width: 100%;}
.filterBox .choice.adArrow .list {width: 100%; padding-right: 0;}
.filterBox .buttonBox {margin: 30px auto; max-width: 150px;}
.filterBox .choice > li .brandList.fastship {width: 100%; padding-right: 0;}
.brand .filterBox .choice {padding-top: 0;}
.brand .filterBox .choice > li {border-bottom: 1px solid var(--color-gray-border); padding: 20px 0; margin-bottom: 0; gap: 20px;}
.brand .filterBox .choice > li:first-child {padding-top: 0;}
.brand .filterBox .choice > li:last-child {border-bottom: none; padding-bottom: 0;}
.sales .filterBox .choice {padding-bottom: 10px; border-bottom: 1px solid var(--color-gray-border);}

/* 공통 리스트 */
.brandList { width: 100%; text-align: center; display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px;}
.addlocal .brandList { position: relative; padding-top: 40px; margin-bottom: 20px;}
.addlocal .brandList::after {content: attr(data-text); position: absolute; top: 5px; left: 0;color: var(--color-blue-main); background-color: var(--color-blue-back); border-radius: 5px; padding: 3px 9px; font-weight: 500;}
.brandList > li { width: calc(33.3% - 3.3px);}
.brandList > li button, .brandList > li a { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; width: 100%; text-align: center; padding: 5px; background-color: var(--color-white); border: 1px solid transparent;}
.brandList > li a {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 3px;}
.brandList > li img { width: 100%; max-width: 60px;}
.brandList > li span {color: var(--color-darkGray-font); font-weight: 500; font-size: 12px;}
.brandList > li.on button, .brandList > li.on a {background-color: var(--color-white); border: 1px solid var(--color-blue-main); color: var(--color-blue-main); border-radius: 10px;}
.brandList > li.on span {color: var(--color-blue-main); font-weight: 600;}
@media screen and (min-width:360px) {
	.brandList {gap: 10px;}
	.brandList > li { width: calc(25% - 7.5px); }
}
@media screen and (min-width:600px) {
	.filterBox .choiced .title {font-size: 16px;}
	.filterBox .choiced .list {width: calc(100% - 70px);}
    .filterBox .choice .input {flex-wrap: nowrap; max-width: 500px;} 
    .filterBox .choice li .priceBtnBox {width: auto;}
    .brandList > li {width: calc(16.66% - 8.3px);}
}
@media screen and (min-width:1000px) {
	.filterBox .choice > li .title {width: 80px; margin-top: 15px;}
	.filterBox .choice .list {/* width: calc(100% - 100px); */ text-align: center;}
	.filterBox .choice > li {flex-direction: row; align-items: flex-start;}
	.filterBox .choice > li.addlocal.main {flex-direction: row; flex-wrap: nowrap; align-items: center;}
	.filterBox .choice > li.addlocal {justify-content: flex-end;}
	.filterBox .choice > li.addlocal .brandBox {width: calc(100% - 70px); }
	.filterBox .choice .input {width: calc(100% - 70px);}
	.filterBox .choiced .list button.close:hover {background-color: var(--color-gray-hover); border: 1px solid var(--color-gray-hover);}
	.filterBox .choice li .priceBtnBox button:hover {background-color: var(--color-blue-hover); border-color: var(--color-blue-hover);}
	.brand .filterBox .choice {gap: 30px;}
	.brand .filterBox .choice > li {padding: 0; border-bottom: none;}
	.brand .filterBox .choice .list {padding-right: 0;}
	.brandList > li {width: calc(8.33% - 9.16px );}
	.brandList > li span {font-size: 14px;}
	.wrap.pc .filterBox .choice > li.addlocal .moreBrand:hover {background-color: var(--color-orange-main); border-color: var(--color-orange-main); color: var(--color-yellow-back);}
	.wrap.pc .brandList > li button:hover, .wrap.pc .brandList > li a:hover {background-color: var(--color-btn-back);  border-radius: 10px;}
	.wrap.pc .brandList > li button:hover span, .wrap.pc .brandList > li a:hover span {color: var(--color-lightDark-font);}
	.wrap.pc .brandList > li.on a:hover span {color: var(--color-blue-main); }
	.wrap.pc .brandList > li.on button:hover span {color: var(--color-blue-main);}
	.wrap.pc .brandList > li.on:hover button, .wrap.pc .brandList > li.on:hover a {background-color: var(--color-white);}
}

/* 필터박스 (차종, 연료) */
.typeList {display: flex; flex-direction: row; flex-wrap: wrap;}
.typeList li {padding: 5px;}
.typeList li button { background-color: var(--color-btn-back); border: 1px solid var(--color-btn-back); padding: 5px 15px; border-radius: 30px; color: var(--color-darkGray-font); font-weight: 500;}
.typeList li.on button {background-color: var(--color-white); border: 1px solid var(--color-blue-main); color: var(--color-blue-main); border-radius: 30px; font-weight: 600;}
.typeList li.none button {border: 1px solid var(--color-gray-border); background: var(--color-white); color: var(--color-gray-border); cursor: auto; font-weight: 200;}
@media screen and (min-width:1000px) {
	.typeList li button {font-size: 16px;}
	.wrap.pc .typeList li button:hover {background-color: var(--color-gray-hover); color: var(--color-lightDark-font); border: 1px solid var(--color-gray-hover);}
	.wrap.pc .typeList li.on button:hover {background-color: var(--color-white); color: var(--color-blue-main); border: 1px solid var(--color-blue-main);}
	.wrap.pc .typeList li.none button:hover {background-color: var(--color-white); color: var(--color-gray-border); border: 1px solid var(--color-gray-border);}
} 

/* 공통적용(즉시출고, 브랜드정보) */
.modelList {display: flex; width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; margin: 10px 0; gap: 20px;}
.modelList.off { display:none;}
.modelList li {position: relative; width: calc(50% - 10px);}
.modelList li a, .modelList li button {width: 100%; display: flex; flex-direction: column; align-items: center; flex-wrap: wrap; padding: 5px; }
.modelList li a .type, .modelList li button .type {display: none;}
.modelList li a .name, .modelList li button .name {text-align: center;}
.modelList li span .count { color: var(--color-blue-main); font-weight: 600;}
.modelList li span .count::before {content:'(';}
.modelList li span .count::after {content:')';}
.modelList li a .logo, .modelList li button .logo {position: absolute; top: 0; left: 0;}
.modelList li a .logo img, .modelList li button .logo img {display: block; width: 100%; max-width: 35px;}
.modelList li a img, .modelList li button img {width: 100%; max-width: 120px;} 
.modelList li.on a, .modelList li.on button {background-color: var(--color-white); border: 1px solid var(--color-blue-main); color: var(--color-blue-main); border-radius: 30px; font-weight: 600;}
@media screen and (min-width:600px) {
    .modelList li {width: calc(33.3% - 13.3px);}
    .modelList li a .logo {top: 5px; left: 5px;}
}
@media screen and (min-width:800px) {
	.modelList li {width: calc(25% - 15px);}
}

@media screen and (min-width:1000px) {
	.modelList {margin-bottom: 0; }
	.modelList li {width: calc(16.6% - 16.1px);}
	.wrap.pc .modelList li a:hover, .wrap.pc .modelList li button:hover {background-color: var(--color-gray-hover); color: var(--color-lightDark-font); border-radius: 15px;}
}

/* 즉시출고 */
.fastshipList {display: flex; flex-direction: column; margin-top: 30px;}
.fastshipList h3 {margin: 10px 0 0 0;}
.fastshipList h3 .count {font-size: 16px; font-weight: 400;}
.fastshipList h3 .count::before {content:'(';}
.fastshipList h3 .count::after {content:')';}
.fastshipList .list {display: flex; flex-direction: column; flex-wrap: nowrap;} 
.fastshipList .list.off {display: none;}
.fastshipList .list li { min-height: 120px; position: relative; padding: 10px; border-bottom: 1px solid var(--color-gray-border);}
.fastshipList .list li:last-child {border-bottom: 0;}
.fastshipList .list li.off {display: none;}
.fastshipList .list li .model .trim {font-size: 16px; font-weight: 700; margin-bottom: 5px; letter-spacing: 0.5px;}
.fastshipList .list li .model .option {color: var(--color-gray-font);font-weight: 300; margin-bottom: 5px;}
.fastshipList .list li .model .option span.on {background-color: var(--color-yellow-lineHeight); color: var(--color-lightDark-font); padding: 3px;}
.fastshipList .list li .model .color {font-weight: 500; margin-bottom: 5px; width: 60%; word-break: break-all;}
.fastshipList .list li .model .color span.on {background-color: var(--color-yellow-lineHeight); color: var(--color-lightDark-font); padding: 3px;}
.fastshipList .list li .price {position: absolute; right: 10px; bottom: 54px; color: var(--color-blue-main); font-weight: 700; font-size: 16px; line-height: 1.4;}
.fastshipList .list li .count {margin-bottom: 5px;}
.fastshipList .list li .count::before {content:'(';}
.fastshipList .list li .count::after {content:')';}
.fastshipList .list li .goods .lease {color: var(--color-blue-main); font-weight: 600; padding-right: 10px;}
.fastshipList .list li .goods .rent {color: var(--color-orange-main); font-weight: 600; padding-right: 10px;}
.fastshipList .list li .goods .buy {font-weight: 600; padding-right: 10px; }
.fastshipList .list li button {position: absolute; right: 10px; bottom: 10px; padding: 5px 15px; border: 1px solid var(--color-blue-main); color: var(--color-blue-main); font-weight: 600; border-radius: 30px; background-color: var(--color-white); }

@media screen and (min-width:600px) {
    .fastshipList .list li {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; padding: 20px;}
    .fastshipList .list li .model {width: 50%;}
    .fastshipList .list li .price {font-size: 18px; top: 20px; bottom: unset; transform: none; }
    .fastshipList .list li .model .color {margin-bottom: 0; width: 100%;}
    .fastshipList .list li .model .option {width: 65%;}
    .fastshipList .list li button {font-size: 18px;}
    .fastshipList .list li .count {position: absolute; bottom: 20px; right: 250px; font-size: 16px; margin-bottom: 0;}
    .fastshipList .list li .goods {position: absolute; right: 150px; bottom: 20px;}
    .fastshipList .list li .goods span {display: block; font-size: 16px;}
    .fastshipList .list li .goods .lease {padding-right: 0;}
    .fastshipList .list li .goods .rent {padding-right: 0;}
    .fastshipList .list li button {bottom: 20px;}
}

@media screen and (min-width:1000px) {
	.wrap.pc .fastshipList h3::before {height: 18px;}
	.wrap.pc .fastshipList .list li button:hover {background-color: var(--color-blue-main); border: 1px solid var(--color-blue-main); color: var(--color-white);}
}

/* ==== 브랜드 정보 ==== */
.brandDesc {max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center;}
.brandDesc .image {max-width: 450px;}
.brandDesc .image img {width: 100%;}
.brandDesc .descBox {width: 100%; text-align: center;}
.brandDesc .descBox h4 {text-align: left; color: var(--color-lightDark-font)}
.brandDesc .descBox .desc {font-size:14px; color: var(--color-darkGray-font); text-align: left;}
.modelBox > .list {gap: 10px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch;}
.wrap.brand .tabButton {margin: 0;}
.modelBox .list li .top {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; }
.modelBox .list li .top .title { width: 100%; /* font-size: 18px; background-color: var(--color-blue-back); color: var(--color-blue-main); padding: 8px 16px; border-radius: 15px 15px 0 0; font-weight: 600; */}
.modelBox .list li .top .openMore {right: 36px; top: unset; transform: none;}
.modelBox .list li .bottom .modelList {margin: 10px 0 0 0;}
.modelSeriesList { margin-bottom: 50px; }
.modelSeriesList .list {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 50px; margin-top: 10px;}
.modelSeriesList .list li {position: relative; transition: all 0.3s;}
.modelSeriesList .list li.state2::before { position: absolute; content: ''; top: 0; left: 0; width: 20px; height: 20px; background: url(../images/icon/icon_sales.svg) no-repeat center / contain;}
.modelSeriesList .list li.state3::before { position: absolute; content: ''; top: 0; left: 0; width: 20px; height: 20px; background: url(../images/icon/icon_limit.svg) no-repeat center / contain;}
.modelSeriesList .list li.state4::before { position: absolute; content: ''; top: 0; left: 0; width: 20px; height: 20px; background: url(../images/icon/icon_discontinued.svg) no-repeat center / contain;}
.modelSeriesList .list li a {display: flex; text-align: center; position: relative; flex-direction: column; align-items: center;}
.modelSeriesList .list li a .infoBox {width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 5px;}
.modelSeriesList .list li a .infoBox h4 {font-size: 18px; text-align: center; width: 100%; color: var(--color-lightDark-font); margin: 0;}
.modelSeriesList .list li a .infoBox h4 .year {font-size: 14px; color: var(--color-gray-font); padding-left: 5px;}
.modelSeriesList .list li a .imgBox img { width: 100%; max-width: 230px;}
.modelSeriesList .list li a .infoBox .spec {color: var(--color-darkGray-font); font-weight: 500; }
.modelSeriesList .list li a .infoBox .spec .type {margin-right: 10px;}
.modelSeriesList .list li a .wiki { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-align: left;}
.modelSeriesList .list li a .wiki.wait { position: relative; padding-left: 30px;}
.modelSeriesList .list li a .wiki.wait::before { position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 25px; height: 25px; background: url(../images/icon/icon_nodata.svg) no-repeat center/contain;}
.modelSeriesList .buttonBox {text-align: center;}		
.seriesDesc {max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center;}		
.seriesDesc .image {max-width: 450px;}		
.seriesDesc .image img {width: 100%;}
.seriesDesc .image .name {display: block; font-size: 18px; font-weight: 600; text-align: center; margin: 10px 0;} 
.seriesDesc .info {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px;}
.seriesDesc .info .summary {font-size: 18px; font-weight: 600; margin: 0; text-align: center; }
.seriesDesc .info .copy {position: relative; background-color: var(--color-btn-back); color: var(--color-darkGray-font); text-align: center; padding: 20px; border-radius: 30px; box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;  }
.seriesDesc .info .copy::before {position: absolute; content: ''; top: -9px; left: 50%; transform: translateX(-50%) rotate(45deg); background-color: var(--color-btn-back); width: 18px; height: 18px;  box-shadow: 0px -3px 5px -2px rgba(0, 0, 0, 0.15); }
.seriesDesc .info .spec { width: 100%; padding: 10px 0; font-size: 16px; font-weight: 600; text-align: center;}
.seriesDesc .info .spec .name {position: relative; padding-left: 35px; margin-right: 20px;}
.seriesDesc .info .spec .name::before {position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: '명칭 '; color: var(--color-gray-font); font-weight: 600;}
.seriesDesc .info .spec .type {position: relative; padding-left: 35px;}
.seriesDesc .info .spec .type::before {position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: '차종 '; color: var(--color-gray-font); font-weight: 600;}
.seriesBox .seriesList {display: flex;flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 30px;}
.seriesBox .seriesList li {width: 100%;  padding: 15px; box-shadow: 0 4px 14px 0 rgba(0, 0, 0, .06); border-radius: 30px; border: 1px solid var(--color-btn-back);}
.seriesBox .seriesList li a {display: flex; flex-direction: row-reverse; flex-wrap: nowrap; align-items: center; justify-content: space-between; }
.seriesBox .seriesList li a .name {width: 50%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; color: var(--color-gray-font);}
.seriesBox .seriesList li a .name .year {font-weight: 600;}
.seriesBox .seriesList li a .car {width: 50%; max-width: 130px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center;}
.seriesBox .seriesList li a .car img {width: 100%;}
.seriesBox .seriesList li a .car .name2 {font-size: 16px; font-weight: 600; text-align: center;}

@media screen and (min-width:600px) {
	.modelSeriesList .list li.state2::before {right: 0; left: unset;}
	.modelSeriesList .list li.state3::before {right: 0; left: unset;}
	.modelSeriesList .list li.state4::before {right: 0; left: unset;}
    .modelSeriesList .list li a { flex-direction: row-reverse; justify-content: space-between; align-items: center;}
    .modelSeriesList .list li a .infoBox {width: 70%; flex-wrap: wrap; justify-content: space-between;}
    .modelSeriesList .list li a .infoBox h4 {width: 100%; text-align: left; font-size: 18px; font-weight: 600;}
    .modelSeriesList .list li a .infoBox h4 .year {padding-left: 10px;}
    .modelSeriesList .list li a .infoBox .spec {width: 100%; text-align: left;}
    .modelSeriesList .list li a .wiki {display: block; text-align: left; font-size: 16px;}
    
}
@media screen and (min-width:800px) {
	.brandDesc .descBox {border: none;}
}
@media screen and (min-width:1000px) {
	.brandDesc {max-width: none; margin: auto; flex-direction: row; flex-wrap: nowrap; justify-content: space-between;}
	.brandDesc .image {width: 50%; }
	.brandDesc .descBox {width: 50%; font-size: 16px; padding: 0;}
	.brandDesc .descBox .desc {font-size: 16px;}
	.modelBox > .list {gap: 10px; margin-top: 20px;}
	.modelBox .list li .bottom .modelList { margin: 20px 0 0 0;}
	.modelBox .list li .title {font-size: 18px;}
	.seriesDesc { max-width: none; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between;}
	.seriesDesc .image {width: 50%;}
	.seriesDesc .info {width: 50%;}
	.seriesDesc .info .copy {box-shadow: none; padding: 0; border-radius: 0; background-color: var(--color-white); text-align: left;}
	.seriesDesc .info .copy::before {position: relative;}
	.seriesDesc .info .summary {font-size: 20px; text-align: left;}
	.seriesDesc .info .spec {text-align: left; padding: 0;}
	.wrap.pc .modelSeriesList .list li:hover a .wiki {text-decoration: underline;}
	.wrap.pc .modelSeriesList .list li:hover a .infoBox h4 {text-decoration: underline;}
}


/* ==== 모델정보 ==== */
.modelInfoBox .model {position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;}
.modelInfoBox .model .tabButton {padding-bottom: 10px;}
.modelInfoBox .model .tabButton::-webkit-scrollbar { display: none;}
.modelInfoBox .model .title {width: 100%; display: flex; align-items: center; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;}
.modelInfoBox .model .title span.logo {max-width: 60px; display: flex; margin-right: 5px;}
.modelInfoBox .model .title span.logo img {width: 100%;}
.modelInfoBox .model .title span.name {font-size:16px; font-weight: 600;}
.modelInfoBox .model .copyBox {width: 100%; display: flex; flex-direction: column; align-items: center; gap: 15px; margin-bottom: 20px;}
.modelInfoBox .model .copyBox .image {max-width: 250px; margin: 0 auto;}
.modelInfoBox .model .copyBox .image img {width: 100%;}
.modelInfoBox .model .detailBox {width: 100%;}
.modelInfoBox .model .detailBox dl { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; background: var(--color-btn-back); border-radius: 10px; padding: 10px; gap: 5px;}
.modelInfoBox .model .detailBox dl .summaryDetail {width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; line-height: 25px;}
.modelInfoBox .model .detailBox dl .summaryDetail dt{width: 30%; color: var(--color-gray-font);}
.modelInfoBox .model .detailBox dl .summaryDetail dd{width: 70%;}
.modelInfoBox .model .detailBox dl .summaryDetail dd span {display: block;}
.modelInfoBox .model .detailBox{display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; position: relative; width: 100%; gap: 20px;}
.modelInfoBox .model .detailBox .modelRelease {display: flex; flex-wrap: nowrap; flex-direction: column; align-items: stretch; gap: 10px;}
.modelInfoBox .model .detailBox .modelRelease .tit {font-size: 18px; font-weight: 600; }
.modelInfoBox .model .detailBox > .linkBox {position: absolute; top: 0; right: 0;}
.modelInfoBox .model .detailBox .list {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 10px; background-color: var(--color-blue-back);}
.modelInfoBox .model .detailBox .list li {width: 100%;}
.modelInfoBox .model .detailBox .list li .box {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between;}
/* .modelInfoBox .model .detailBox .list li .box span {color: var(--color-darkGray-font);} */
.modelInfoBox .model .detailBox .list li .box span.sale {position: relative; color: #0ACB00; padding-left: 25px; font-weight: 500;}
.modelInfoBox .model .detailBox .list li .box span.sale::before {position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background: url(../images/icon/icon_sale.svg) no-repeat center/contain;}
.modelInfoBox .model .detailBox .list li .box span.limit {position: relative; color: var(--color-blue-main); padding-left: 25px; font-weight: 500;}
.modelInfoBox .model .detailBox .list li .box span.limit::before {position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background: url(../images/icon/icon_limit.svg) no-repeat center/contain;}
.modelInfoBox .model .detailBox .list li .box span.soldOut {position: relative; color: var(--color-gray-font); padding-left: 25px; font-weight: 500;}
.modelInfoBox .model .detailBox .list li .box span.soldOut::before {position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background: url(../images/icon/icon_discontinued.svg) no-repeat center/contain;}
.modelInfoBox .model .detailBox .list li .linkBox a.arrow {border: none;}
.modelInfoBox .model .detailBox .modelLineUp .list li .box {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px;}
.modelInfoBox .model .detailBox .modelLineUp .list li .box .name {width: 100%;}
.books .financeBox {display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 20px; margin-top: 20px;}
.books .financeBox .adBox {gap: 20px; margin: 0;}
.books .financeBox .adBox img {display: block; max-width: 100%; border-radius: 15px;}
.books .financeBox .finceBox { width: 100%; position: relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 10px; }
.books .financeBox .finceBox .finceTop {position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;}
.books .financeBox .finceBox .finceTop span.maxDiscount {background-color: var(--color-yellow-back); color: var(--color-orange-main); font-weight: 700; padding: 5px 20px; border-radius: 10px;}
.books .financeBox .finceBox .fincDiscount {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; width: 45%; gap: 5px;}
.books .financeBox .finceBox .fincDiscount span.name {font-weight: 700; text-align: center; word-break: keep-all;}
.books .financeBox .finceBox .fincDiscount span.lineup {text-align: center; color: var(--color-gray-font);}
.books .financeBox .finceBox .fincDiscount .buttonBox.moreOpt {position: relative;}
.books .financeBox .finceBox .fincDiscount .buttonBox.moreOpt .option {box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 5px; position: absolute; top: 35px; left: 0; background-color: var(--color-blue-back); border-radius: 15px; width: 250px; padding: 15px; cursor: auto; z-index: 1;}
.books .financeBox .finceBox .fincDiscount .buttonBox.moreOpt .option.off{ display: none; }
.books .financeBox .finceBox .fincDiscount .buttonBox.moreOpt .option .close {position: absolute; top: 15px; right: 15px; width: 18px; height: 18px; background: url(../images/icon/close.svg) no-repeat center / contain; cursor: pointer;}
.books .financeBox .finceBox .fincDiscount .buttonBox.moreOpt .option .title {font-size: 15px; font-weight: 700;}
.books .financeBox .finceBox .fincDiscount .buttonBox.moreOpt .option div {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start;}
.books .financeBox .finceBox .fincDiscount .buttonBox.moreOpt .option div span.tit {color: var(--color-darkGray-font); width: 45px; text-align: left;}
.books .financeBox .finceBox .fincDiscount .buttonBox.moreOpt .option div.price span:last-child {color: var(--color-blue-main); font-weight: 700;}
.books .financeBox .finceBox .fincDiscount .buttonBox.moreOpt .option div span:last-child { width: calc(100% - 45px); text-align: left;}
.books .financeBox .finceBox .fincList {position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; justify-content: space-between; width: 51%; gap: 5px; }
.books .financeBox .finceBox .fincList .lowestMonthlyFee { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.books .financeBox .finceBox .fincList .lowestMonthlyFee span { padding-right: 5px; font-size: 16px; font-weight: 700; color: var(--color-dark-font);}
.books .financeBox .finceBox .fincList .lowestMonthlyFee button.helpBtn {width: 18px; height: 18px; background: url(../images/icon/tooltip.svg) no-repeat center/contain;}
.books .financeBox .finceBox .fincList .lowestMonthlyFee button.helpBtn .balloon { box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px; position: absolute; top: 25px; right: 0; background-color: var(--color-blue-back); border-radius: 15px; width: 250px; padding: 15px; cursor: auto; z-index: 1;} 
.books .financeBox .finceBox .fincList .lowestMonthlyFee button.helpBtn .balloon .close {position: absolute; top: 15px; right: 15px; width: 18px; height: 18px; background: url(../images/icon/close.svg) no-repeat center/contain; cursor: pointer;}
.books .financeBox .finceBox .fincList .lowestMonthlyFee button.helpBtn .balloon .title {font-size: 15px; font-weight: 700; }
.books .financeBox .finceBox .fincList .lowestMonthlyFee button.helpBtn .balloon .content {text-align: left; font-weight: 400; line-height: 1.4; color: var(--color-darkGray-font);}
.books .financeBox .finceBox .fincList .finc {width: 100%; border-radius: 30px; transition: all 0.3s;}
.books .financeBox .finceBox .fincList .finc a {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 100%;}
.books .financeBox .finceBox .fincList .finc a div:not(:first-child) {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 5px; position: relative; padding-right: 20px;}
.books .financeBox .finceBox .fincList .finc a div:not(:first-child)::after {position: absolute; top: 50%; transform: translateY(-50%); right: 0; content: ''; width: 20px; height: 20px; background: url(../images/icon/arrow_gray.svg) no-repeat center/contain}
.books .financeBox .finceBox .fincList .finc a div span {font-weight: 700; color: var(--color-blue-main);}
.books .financeBox .finceBox .fincList .finc a div.kind span {color: var(--color-lightDark-font)}
.books .financeBox .finceBox .fincList .condition {width: 51%; text-align: right; position: absolute; font-weight: 600; bottom: -10px; right: 0; font-size: 12px; color: var(--color-gray-font); }
.relationModel {display: flex; flex-direction: column; flex-wrap: nowrap;}
.relationModel .competitionModel {position: relative; overflow-x: auto;}
.relationModel .competitionModel .linkBox { position: absolute; top: 0; right: 0;}
.relationModel .competitionModel .list {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 20px; width: calc(60% * 4);}
.relationModel .competitionModel .list li {position: relative; width: calc(25% - 15px);}
.relationModel .competitionModel .list li a .num {display: flex; justify-content: center; align-items: center; flex-direction: row; flex-wrap: nowrap; background-color: var(--color-lightDark-font); color: var(--color-white); border-radius: 50%; font-weight: 600; width: 25px; height: 25px}
.relationModel .competitionModel .list li a .model {position: relative; padding-top: 20px; display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; gap: 10px;}
.relationModel .competitionModel .list li a .model .imgBox { max-width: 200px; margin: 0 auto;}
.relationModel .competitionModel .list li a .model .imgBox img {width: 100%;}
.relationModel .competitionModel .list li a .model .type {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; width: 100%; gap: 10px; white-space: nowrap;}
.relationModel .competitionModel .list li a .model .type .carType {flex: 1; text-align: center; padding: 3px 9px; background-color: var(--color-blue-back); color: var(--color-blue-main); font-weight: 500; border-radius: 5px; font-size: 12px;}
.relationModel .competitionModel .list li a .model .type .engine {flex: 1; text-align: center; padding: 3px 9px; background-color: var(--color-btn-back); color: var(--color-darkGray-font); font-weight: 500; border-radius: 5px; font-size: 12px;}
.relationModel .competitionModel .list li a .model .name {font-size: 18px; font-weight: 700; }
.relationModel .competitionModel .list li a .model .price {font-size: 16px;}
.relationModel .competitionModel .list li a .model .release {position: absolute; top: 0; right: 0; font-size: 14px; color: var(--color-gray-font);}
.relationModel .competitionModel .openMoreR {display: none;}
.newsYouBox { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;}
.newsYouBox .news {position: relative; width: 100%;}
.newsYouBox .linkBox { position: absolute; top: 30px; right: 0;}
.newsYouBox .news .list { display: flex;flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; }
.newsYouBox .news .list li {width: 100%; position: relative;}
.newsYouBox .news .list li a {display: flex; flex-direction: row; flex-wrap: nowrap; min-height: 80px; gap: 10px;}
.newsYouBox .news .list li a .thumb {transition: background-size 0.3s ease-in-out; overflow: hidden; width: 100%; max-width: 112px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); box-shadow: rgba(0, 0, 0, 0.11) 0px 1px 3px; border-radius: 10px; height: 74px;}
.newsYouBox .news .list li a .image { display: flex; max-width: 150px;}
.newsYouBox .news .list li a .image img {display: block; width: 100%; border-radius: 5px;}
.newsYouBox .news .list li a .cont {position: relative; display: flex; align-items: center; width: 100%; padding-left: 120px;}
.newsYouBox .news .list li a .cont .tit .title {color: var(--color-lightDark-font); font-weight: 600; font-size: 16px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: all 0.2s;}
.newsYouBox .news .list li a .cont .writingTime {color: var(--color-gray-font); font-weight: 300; font-size: 12px;}
.newsYouBox .news .list li a .cont .content {display: none;} 
.newsYouBox .youtube {position: relative; width: 100%;}
.newsYouBox .youtube .list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 30px; justify-content: space-between; }
.newsYouBox .youtube .list li {position: relative; width: 100%;}
.newsYouBox .youtube .list li a {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;}
.newsYouBox .youtube .list li a img {width: 100%; height: 100%; border-radius: 15px;}
.newsYouBox .youtube .list li a span {width: 100%; position: absolute; bottom: 0; left: 0; color: var(--color-white); padding: 3px; background-color: rgba(0,0,0,0.9); border-radius: 0 0 15px 15px; text-align: center; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.galleryBox {display: flex; flex-direction: column; flex-wrap: nowrap;}
.galleryBox .galleryExt { position: relative;}
.galleryBox h4 span {position: relative; font-weight: 600; padding-left: 5px; font-size: 16px;}
.galleryBox h4 span::before {content:'(';}
.galleryBox h4 span::after {content:')';}
.galleryBox .list {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;justify-content: space-between; gap: 2px;}
.galleryBox .list li button img { max-width: 100%;}
.galleryBox .list li.offM { display: none; }
.galleryBox .list li { width: calc(50% - 1px);}
.galleryBox .list li button {position: relative; display: flex;}
.galleryBox .list li button::before {  content: '';  position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); top: 0; left: 0;}
.galleryBox .list li button:hover::before { transition: all 0.3s linear; background-color: rgba(0,0,0,0); }
.galleryBox .galleryInt { position: relative;}
.helpBox {display: flex; flex-direction: column; flex-wrap: nowrap;}
.helpBox .loginBox {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 10px; margin-bottom: 10px; }
.helpBox .list {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; border-top: 2px solid var(--color-gray-border); border-bottom: 2px solid var(--color-gray-border); padding: 30px 0; gap: 50px;}
.helpBox .list li { width: 100%;}
.helpBox .list li > div {position: relative; color: var(--color-darkGray-font);}
.helpBox .inquireBox {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; margin-bottom: 20px;}
.helpBox .inquireBox textarea {width: 85%; background-color: var(--color-blue-back); border-color: transparent; border-radius: 10px 0 0 10px;}
.helpBox .inquireBox textarea:disabled {background-color: var(--color-gray-hover); pointer-events: none;}
.helpBox .inquireBox .contactBtn {width: 15%; min-width: 100px; background-color: var(--color-blue-main); color: var(--color-white); border-radius: 0 10px 10px 0; font-size: 16px; }
.helpBox .inquireBox .contactBtn:disabled {background-color: var(--color-gray-font); pointer-events: none;}
.helpBox .list li > div span.question {display: flex; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: wrap; position: relative; padding-left: 30px; margin-bottom: 20px; color: var(--color-lightDark-font)}
.helpBox .list li > div span.question::before {position: absolute; content:''; left: 0; top: 0; width: 25px; height: 25px; background: url(../images/icon/icon_tip.png) no-repeat center/contain}
.helpBox .list li > div span.question .data { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; font-weight: 300; font-size: 12px; color: var(--color-gray-font);}
.helpBox .list li > div span.answer {position: relative; display: block; padding: 25px; border-radius: 10px; background-color: var(--color-btn-back);}
.helpBox .list li.nodata {text-align: center; font-size: 16px;}
.helpBox[kind="qna"] .list li > div span.question::before {content: 'Q'; width: auto; height: auto; background: none; font-size: 25px; font-weight: 700; color: var(--color-blue-main);}
.siteBox { flex-direction: column; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
.siteBox .list {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px;}
.siteBox .list li a .thumb {display: flex;}
.siteBox .list li { width: 48%;}
.siteBox .list li a {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 10px;}
.siteBox .list li a .thumb img {width: 100%; border-radius: 15px;}
.adBox2 {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 10px}
.adBox2 .adList a {display: flex;}
.adBox2 .adList a img.w { display: none; }
.adBox2 .adList a img { max-width: 100%; border-radius: 10px;}

@media screen and (max-width:360px) { 
	.books .financeBox .finceBox .fincList .finc a .kind span, .books .financeBox .finceBox .fincList .finc a span.month {font-size: 12px;}
}
@media screen and (min-width:400px) {
	.books .financeBox .finceBox .fincList .condition {width: auto; bottom: 0;}
}
@media screen and (min-width:600px) { 
	.colorBox .color ul li {width: calc(50% - 7.5px);}
	.modelInfoBox .model .tabButton {display: none;}
	.modelInfoBox .model .detailBox .list li .box { justify-content: flex-start;}
	.modelInfoBox .model .detailBox .list li .box span {width: 25%;}
	.modelInfoBox .model .detailBox .list li .linkBox {width: 25%; justify-content: flex-end;}
	.modelInfoBox .model .title span.logo {max-width: 70px;}
	.modelInfoBox .model .title span.name {font-size: 22px;}
	.modelInfoBox .model .copyBox .copy {font-size: 16px;}
	.modelInfoBox .model .detailBox dl .summaryDetail {flex-direction: row; flex-wrap: nowrap;}
	.modelInfoBox .model .detailBox dl .summaryDetail dt {width: 25%;}
	.modelInfoBox .model .detailBox dl .summaryDetail dd {width: 75%;}
	.modelInfoBox .model .detailBox .modelRelease .list li .box span {font-size: 16px;}
	.modelInfoBox .model .detailBox .modelLineUp .list li .box {flex-wrap: nowrap;}
	.modelInfoBox .model .detailBox .modelLineUp .list li .box .name {width: 50%;}
    .books .financeBox .adBox { flex-direction: row; flex-wrap: nowrap; justify-content: space-between; gap: 20px;}
    .books .financeBox .finceBox { border: 1px solid var(--color-gray-border); padding: 20px; border-radius: 15px;}
    .books .financeBox .finceBox .fincDiscount {width: calc(50% - 5px); gap: 15px;}
    .books .financeBox .finceBox .fincDiscount span.maxDiscount {font-size: 16px;}
    .books .financeBox .finceBox .fincDiscount span.name {font-size: 18px;}
    .books .financeBox .finceBox .fincDiscount span.lineup {font-size: 16px;}
    .books .financeBox .finceBox .fincList .lowestMonthlyFee span {font-size: 18px;}
    .books .financeBox .finceBox .fincList {width: calc(50% - 5px);}
    .books .financeBox .finceBox .fincList {font-size: 18px;}
    .books .financeBox .finceBox .fincList .condition {text-align: right; font-size: 14px; bottom: 20px; right: 20px;}
    .books .financeBox .finceBox .fincDiscount .buttonBox.moreOpt button {padding: 5px 10px;}
    .books .financeBox .finceBox .fincDiscount .buttonBox.moreOpt button span{font-size: 16px;}
    .newsYouBox .youtube .list {gap: 10px;}
    .newsYouBox .youtube .list li {width: 49%;}
    .siteBox .list li {width: 32%;}
    .galleryBox .list {justify-content: flex-start; gap: 3px;}
	.galleryBox .list li {width: calc(25% - 2.25px);} 
	.adBox2 {flex-direction: row; flex-wrap: nowrap; justify-content: space-between;}
	.adBox2 .adList {width: 49%;}
	.adBox2 .adList a img.w { display: block; }
	.adBox2 .adList a img.m { display: none; }
	
}
@media screen and (min-width:1000px){
	.wrap.model .discountBox .discountList .list, .wrap.estimate .discountBox .discountList .list {margin-top: 0;}
	.modelInfoBox .tabBar {margin-top: 100px;}
	.modelInfoBox .model .copyBox {width: 50%; padding-right: 20px; margin-bottom: 0;}
	.modelInfoBox .model .copyBox .image {max-width: 350px;}
	.modelInfoBox .model .detailBox {width: 50%; padding-left: 20px;}
	.modelInfoBox .model .detailBox dl { background: none; padding: 0; flex-direction: row; flex-wrap: wrap;}
	.modelInfoBox .adBox img {border-radius: 30px;}
	.books .financeBox .adBox {width: calc(50% - 10px); flex-direction: column; flex-wrap: nowrap; align-items: center; margin: 0;}
	.books .financeBox .finceBox {width: calc(50% - 10px); align-items: flex-start;}
	.books .financeBox .finceBox .finceTop span.maxDiscount {font-size: 16px;}
	.books .financeBox .finceBox .fincDiscount span.name {font-size: 20px;}
	.books .financeBox .finceBox .fincList .lowestMonthlyFee {padding-left: 15px;}
	.books .financeBox .finceBox .fincList .lowestMonthlyFee span {font-size: 20px;}
	.books .financeBox .finceBox .fincList .finc {padding: 5px 15px;}
	.books .financeBox .finceBox .fincList .condition {width: 100%; position: relative; bottom: unset; right: unset;}
	.books .financeBox .finceBox .fincList .finc a div:not(:first-child)::after {right: -10px;}
	.relationModel .competitionModel {overflow: inherit; }
	.relationModel .competitionModel .list {width: 100%; flex-wrap: wrap;}
	.relationModel .competitionModel .list li {width: calc(25% - 15px);}
	.relationModel .competitionModel .list li a .model .type .carType {flex: 1; text-align: center; font-size: 14px;}
	.relationModel .competitionModel .list li a .model .type .engine {flex: 1; text-align: center; font-size: 14px;}
	.relationModel .competitionModel .openMoreR {display: flex;}
	.newsYouBox {flex-direction: row; justify-content: space-between;}
	.newsYouBox .youtube .list li {width: 48.5%;}
	.newsYouBox .linkBox {top: 52px;}
	.newsYouBox .news {width: 48%;}
	.newsYouBox .news .list li a .cont .tit {width: 100%; -webkit-line-clamp: 1;}
	.newsYouBox .news .list li a .cont .content {display: block; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
	.newsYouBox .news .list li a .cont { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center;}
	.newsYouBox .youtube {width: 48%;}
	.galleryBox > div{ font-size: 18px; }
	.galleryBox .galleryInt {margin-top: 20px;}
	.helpBox .list li > div span.question {flex-wrap: nowrap; font-size: 16px;}
	.helpBox .list li > div span.question .data {width: auto; font-size: 14px; display: inline-block;}
	.helpBox .list li > div span.answer {font-size: 16px;}
	.siteBox .list li {width: 24.2%;}
	.siteBox .list li a span {font-size: 16px;}
	.wrap.pc .newsYouBox .news .list li:hover a .cont .content{text-decoration: underline;}
	.wrap.pc .newsYouBox .news .list li:hover a .cont .tit .title{text-decoration: underline;}
    .wrap.pc .financeBox .finceBox .fincList .finc:hover {background-color: var(--color-gray-hover);}
	.wrap.pc .financeBox .finceBox .fincList .finc:hover a div:not(:first-child)::after {background: url(../images/icon/arrow_right_blue.svg) no-repeat center/contain;}
	.wrap.pc .helpBox .inquireBox .contactBtn:hover {background-color: var(--color-blue-hover)}

}
/* ==== 연식페이지 ==== */
.gradeBox {border-bottom: 1px solid var(--color-gray-border); padding-bottom: 30px;}
.gradeBox .gradeList > ul {display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 10px; }
.gradeBox .gradeList > ul > li {width: 100%;}
.gradeBox .gradeList > ul li .slideBar.inline {margin-bottom: 0;}
.gradeBox .gradeList > ul li .slideBar.underline .barBtn {border: 1px solid var(--color-gray-border); border-radius: 10px;}
.gradeBox .gradeList > ul li .slideBar.underline .barBtn h4 {margin: 0; font-size: 14px; color: var(--color-lightDark-font); padding: 7px 0;}
.gradeBox .gradeList > ul li .slideBar.underline .barBtn.open {border-bottom: 0; border-radius: 10px 10px 0 0;}
.gradeBox .gradeList > ul li:has(.trimList:not(.off)) .barBtn {border-bottom: 0; border-radius: 10px 10px 0 0;}
.gradeBox .gradeList > ul li .trimList:not(.off) { border: 1px solid var(--color-gray-border); border-top: none; padding: 0 10px 10px 10px; border-radius: 0 0 10px 10px;}
.gradeBox .gradeList > ul li:has(.trimList:not(.off)) .barBtn.close::after {transform: translateY(-50%) rotate(0deg);}
.gradeBox .gradeList > ul li .trimList .priceTable {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px;} 
.gradeBox .gradeList .trimList .priceTable > li {width: 100%;}
.gradeBox .gradeList .trimList .priceTable li .bar { padding: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; border-radius: 10px; overflow: hidden; transition: all 0.3s cubic-bezier(.25,.8,.25,1); box-shadow: 0px 1px 3px 0px var(--color-gray-border); background-color: var(--color-blue-back);}
.gradeBox .gradeList .trimList .priceTable li .bar .name {width: 70%;}
.gradeBox .gradeList .trimList .priceTable li .bar .box {width: 30%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 5px;}
.gradeBox .gradeList .trimList .priceTable li .bar .box span.tax {font-size: 12px; text-align: right;}
.gradeBox .gradeList .trimList .priceTable li .bar .box span.sum {color: var(--color-blue-main); font-weight: 600;}
.gradeBox .gradeList .trimList .priceTable .slidePrice .head { display: flex; flex-direction: row; justify-content: space-between; padding: 8px 15px 8px 15px; position: relative; cursor: pointer; font-size: 16px; font-weight: 600; }
.gradeBox .gradeList .trimList .priceTable .slidePrice .head::before { content: ""; position: absolute; top: 16px; right: 12px; width: 19px; height: 19px; background: url(../images/arr_5f_01.svg) center no-repeat; background-size: 13px auto; transform: rotate(180deg); }
.gradeBox .gradeList .trimList .priceTable .slidePrice .head::before { content: none; }
.gradeBox .gradeList .trimList .priceTable .slidePrice.open .head { border-radius: 15px 15px 0 0; }
.gradeBox .gradeList .trimList .priceTable .slidePrice .head .name span { font-size: 16px; font-weight: 600; }
.gradeBox .gradeList .trimList .priceTable .slidePrice .head .summary .text { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; }
.gradeBox .gradeList .trimList .priceTable .slidePrice .head .summary .text .tax { margin-right: 10px; }
.gradeBox .gradeList .trimList .priceTable .slidePrice .head .summary .text .sum { font-size: 14px; font-weight: 600; }
.gradeBox .gradeList .trimList .priceTable .slidePrice.open .head .summary .text .sum { color: #009EFF; }
.gradeBox .gradeList .trimList .priceTable .slidePrice .head:hover .summary .text .sum { color: #009EFF; }
.gradeBox .gradeList .trimList .priceTable .slidePrice .itemWrap { margin-top: 15px; }
.gradeBox .gradeList .trimList .priceTable .slidePrice h5::before { content: ''; position: absolute; top: 50%; right: 2px; transform: translateY(-50%) rotate(180deg); width: 20px; height: 20px; background: url(../images/icon/arrow_down_gray.svg) no-repeat center/contain; }
.gradeBox .gradeList .trimList .priceTable .slidePrice .items:not(.off) h5::before {transform: translateY(-50%) rotate(0deg);} 
.gradeBox .gradeList .trimList .priceTable .slidePrice .option:not(.off) h5::before {transform: translateY(-50%) rotate(0deg);} 
.gradeBox .gradeList .trimList .priceTable .slidePrice .spec:not(.off) h5::before {transform: translateY(-50%) rotate(0deg);} 
.gradeBox .gradeList .trimList .priceTable .slidePrice .option .list{ margin-top: 10px; width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 5px;}
.gradeBox .gradeList .trimList .priceTable .slidePrice .option .list .box { width: 100%; }
.gradeBox .gradeList .trimList .priceTable .slidePrice.open > div.option { padding: 10px 22px; }
.gradeBox .gradeList .trimList .priceTable .slidePrice.open > div.spec { padding: 10px 22px; }

/* 연식, 견적 공통사양 정보 */
[kind="info"] {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch;}
[kind="qna"] {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch;}
.infoPage .infoBox .barBtn {position: relative; border: 1px solid var(--color-gray-border); border-radius: 10px; padding: 7px 40px 7px 20px;}
.infoPage .infoBox .barBtn h4 {margin: 0; font-size: 14px; color: var(--color-lightDark-font); padding: 7px 0; text-align: left;}
.infoPage .infoBox .barBtn.close::after {position: absolute; content: ''; top: 50%; right: 10px;transform: translateY(-50%) rotate(180deg); width: 25px; height: 25px; background: url(../images/icon/arrow_up_gray.svg) no-repeat center / contain;}
.infoPage .infoBox .barBtn.open::after { position: absolute; content: ''; top: 50%; right: 10px; transform: translateY(-50%); width: 25px; height: 25px; background: url(../images/icon/arrow_up_gray.svg) no-repeat center / contain;}
.itemUnit { position: relative; border-radius: 10px; margin-top: 10px; background-color: var(--color-btn-back);}
.itemUnit .link { background-color: var(--color-gray-border); border-radius: 10px 10px 0 0; padding: 10px; font-weight: 700; display: block; }
.itemUnit dl {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 5px; padding: 10px;}
.itemUnit dl dt { position: relative; padding-left: 10px; font-size: 14px; font-weight: 600; }
.itemUnit dl dt::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 10px; background: var(--color-blue-hover); }
.itemUnit dl dd { color: var(--color-darkGray-font); font-size: 13px; font-weight: 400; line-height: 18px;}
.plusUnit {display: flex; justify-content: center; margin: 10px 0; }
.plusUnit span {position: relative; width: 40px; height: 40px; border: 2px solid var(--color-gray-border); border-radius: 50%; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.plusUnit span::before { content: ""; position: absolute; top : 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 4px; background-color: var(--color-gray-font); border-radius: 5px;}
.plusUnit span::after { content: ""; position: absolute; top : 50%; left: 50%; transform: translate(-50%, -50%); width: 4px; height: 20px; background-color: var(--color-gray-font); border-radius: 5px;}

.optionBox .box .ttl {position: relative; padding-left: 10px; margin: 5px 0; font-weight: 700;}
.optionBox .box .ttl::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 10px; background-color: var(--color-blue-hover);}
.optionList { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
.optionList li { width: 100%; position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; border: 2px solid transparent; }
.optionList li.dis { background-color: rgba(0, 0, 0, 0.05); border-radius: 10px;}
.optionList li.on { border: 1px solid var(--color-blue-main); border-radius: 8px; }
.optionList li.on span {color: var(--color-blue-main);}
.optionList li label { padding: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 100%;}
.optionList li.parts { border: none; width: 100%; margin-bottom: 2px; box-shadow: unset; padding: 0; height: 30px; }
.optionList li.parts .btnAoptionView { font-size: 14px; font-weight: 600; position: relative; background: #fff; display: table; width: 100%; padding: 10px;}
.optionList li.blank { border: none; padding: 0; color: #666; }
.optionList li .name { width: 70%; display: flex; flex-direction: row; flex-wrap: nowrap; font-size: 14px; }
.optionList li .price { width: 30%; font-size: 14px; font-weight: 600; text-align: right; }
.specList { margin-top: 10px; display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 10px;}
.specList.off { display: none; }
.specList > div { width: 100%;text-align: center;}
.specList h6 { position: relative; padding-left: 10px;; border-bottom: 1px solid var(--color-gray-border); text-align: left; margin: 0; font-size: 14px; font-weight: 600; }
.specList h6::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 10px; background-color: var(--color-blue-hover);}
.specList dl { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; }
.specList dl dt { width: 45%; background-color: var(--color-btn-back); padding: 5px; font-weight: 500; }
.specList dl dd { width: 55%; padding: 5px; position: relative; }

/* 가격표, 카탈로그 */

.priceCatalogBox {display: flex; flex-direction: column; flex-wrap: nowrap;}
.priceCatalogBox > div {display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start;}
.priceCatalogBox .catalog {margin-top: 10px;}
.priceCatalogBox > div ul {width: 100%; overflow-x: auto;display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 20px; }
.priceCatalogBox > div ul li .imgBox a {display: flex; flex-direction: column; align-items: center;}
.priceCatalogBox > div ul li .imgBox a img { width: 100%; height: 90px; border: 1px solid var(--color-gray-border); border-radius: 5px;}
.priceCatalogBox > div ul li.off { display: none; }
/* 견적- 가격표, 카탈로그 */
.wrap.estimate .priceCatalogBox > div ul {width: 100%; overflow-x: auto;display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; gap: 20px; }
.wrap.estimate .priceCatalogBox > div ul li {width: calc(50% - 10px);}
/* 외, 내장 색상 */
.colorBox {  display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
.colorBox .title { width: 100%; }
.colorBox .color { width: 100%;}
.colorBox .color.colorInt {margin-top: 10px;}
.colorBox .color ul { margin-top: 10px; gap: 15px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; }
.colorBox .color ul li {position: relative;  width: 100%; border: 2px solid transparent; }
.colorBox .color ul li button {width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; border: 2px solid transparent; padding: 3px; }
.colorBox .color ul li .circleBox { position: relative;  }
.colorBox .color ul li .circleBox .mainColor { width: 50px; height: 50px; display: block; border-radius: 10px; border: 1px solid var(--color-gray-border);}
.colorBox .color ul li .circleBox .subColor {position: absolute; bottom: 0; left: 0; border-radius: 0 0 10px 10px; width: 50px; height: 25px; border: 1px solid var(--color-gray-border); border-top: none;}

@media screen and (min-width:1000px){
	.gradeBox .gradeList > ul li .slideBar.underline .barBtn h4 {padding: 0;}
 	/* .gradeBox .gradeList .trimList .priceTable .slidePrice.open .head::before { transform: rotate(0deg); }
	.gradeBox .gradeList .trimList .priceTable .slidePrice h5::before { content: ""; position: absolute; top: 3px; right: 0; width: 19px; height: 19px; background: url(../images/arr_1e_01.svg) center no-repeat; background-size: 13px auto; transform: rotate(180deg); cursor: pointer; }
	.gradeBox .gradeList .trimList .priceTable .slidePrice h5:hover::before { content: ""; position: absolute; top: 3px; right: 0; width: 19px; height: 19px; background: url(../images/arr_1e_01_hover.svg) center no-repeat; background-size: 13px auto; transform: rotate(180deg); cursor: pointer; } */
/* 	.gradeBox .gradeList .trimList .priceTable .slidePrice.open > div.items { padding: 10px 15px; }
	.gradeBox .gradeList .trimList .priceTable .slidePrice.open > div.option { padding: 13px 22px; }
	.gradeBox .gradeList .trimList .priceTable .slidePrice.open > div.spec { padding: 13px 22px; } */
	.gradeBox {border: none; padding: 0;}
	.gradeBox .gradeList > ul {width: 100%;}
	.gradeBox .gradeList > ul li .slideBar.underline .barBtn {padding: 12px 40px 12px 15px;}
	.gradeBox .gradeList .trimList:not(.off) {padding: 0 15px 15px 15px;}
	.gradeBox .gradeList .trimList .priceTable .slidePrice h5:hover { cursor: pointer; }
	.gradeBox .gradeList .trimList .priceTable li .bar { cursor: pointer; }
	.gradeBox .gradeList .trimList .priceTable .slidePrice.open > div { padding: 10px 15px; }
	.gradeBox .gradeList .trimList .priceTable .slidePrice > div { padding: 10px 15px; }
	.gradeBox .gradeList .trimList .priceTable .slidePrice .option .list { gap: 20px; }
	.gradeBox .gradeList .trimList .priceTable .slidePrice .head .name span { font-size: 16px; font-weight: 600; }
	.gradeBox .gradeList .trimList .priceTable .option .optionList li.parts { height: 40px; }
	.gradeBox .gradeList .trimList .priceTable .slidePrice .option .optionList li.parts .btnAoptionView { font-size: 16px; }
	.itemUnit dl dt { font-size: 14px; }
	.optionList {flex-direction: row; flex-wrap: wrap;}
	.optionList li {width: calc(50% - 5px)}
    .specList { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between;}
    .specList > div { margin-bottom: 0; width: calc(33.3% - 6.6px);}
	.priceCatalogBox {border: none; padding: 0;}
	.colorBox .color ul li {width: calc(33.3% - 10px);}

}

.discountBox .discountList .list li .name { text-align: center; background-color: var(--color-blue-back); padding: 10px 0; font-size: 16px; font-weight: 600;}
.discountBox .discountList .list li .value {width: 100%; }
.discountBox .discountList .list li .value li {display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; justify-content: space-between; padding: 10px;}
.discountBox .discountList .list li .value li:last-child {margin-bottom: 0; }
.discountBox .discountList .list li .value li span.price {font-weight: 500; color: var(--color-blue-hover);}
.discountBox .discountList .list li .value li.reMark {width: 100%;}
.discountBox .discountList .list li .value li span.remark {width: 100%; text-align: center; color: var(--color-dark-font); font-weight: 600; letter-spacing: 0.5px;}
.discountBox .discountList .list li .text {width: 100%; border-radius: 10px; padding: 10px; background-color: var(--color-btn-back);}
.discountBox .discountList .list li .value li span { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
@media screen and (min-width:1000px) { 
	.model .discountBox .discountList .list, .wrap.estimate .discountBox .discountList .list  { gap: 0; }
	.model .discountBox .discountList .list > li, .wrap.estimate .discountBox .discountList .list > li, .wrap.model .discountBox .discountList .list > li { border:0; padding: 0; border-radius: 0; border-bottom: 1px solid var(--color-gray-border); position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-end; margin-bottom: 0;}
	.discountBox .discountList .list li::after { position: absolute; content: ''; top: 0; left: 0; width: 25%; background-color: var(--color-blue-back);}
	.discountBox .discountList .list li .name {width: 25%; display: flex; justify-content: center; align-items: flex-start; z-index: 1; padding: 20px;}
	.discountBox .discountList .list li .value {width: 75%; padding: 10px 0;}
	.discountBox .discountList .list li .value li {padding: 10px 0 10px 20px;}
	.discountBox .discountList .list li .value li span {font-size: 16px; word-break: keep-all; letter-spacing: -0.5px;}
	.discountBox .discountList .list li .text {width: 100%;}
}


/* ==== 시리즈 ==== */
.serieslist {position: relative; margin-bottom: 30px;}
.serieslist h3 {padding-left: 15px;}
.serieslist h3::before {position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 6px; height: 15px; background-color: var(--color-blue-main);}
.serieslist .linkBox { position: absolute; top: 0; right: 0;}
.serieslist .list {display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 30px;}
.serieslist .list li {width: 100%; position: relative; padding: 40px 0 0 0; transition: all 0.3s;}
.serieslist .list li a {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; justify-content: space-between; gap: 5px;}
.serieslist .list li a .car {width: 50%; max-width: 200px;}
.serieslist .list li a .car img {width: 100%;}
.serieslist .list li a .car .name2 {display: block; font-size: 18px; font-weight: 700; min-height: 48px;}
.serieslist .list li a .name {width: 50%; display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; justify-content: center; padding-left: 15px; gap: 5px;}
.serieslist .list li a .name2 {font-size: 16px; font-weight: 700; letter-spacing: -0.5px; word-break: keep-all;}
.serieslist .list li a .nameG {font-weight: 500;}
.serieslist .list li a .name > div { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.serieslist .list li a .year {font-size: 14px; color: var(--color-gray-font);}
.serieslist .list li.state2 a .state { padding-left: 25px; position: absolute; top: 15px; left: 15px; color: #0ACB00; font-weight: 700; font-size: 16px; }
.serieslist .list li.state2 a .state::before { position: absolute; content: ''; top: 50%; transform: translateY(-50%); left: 0; width: 20px; height: 20px; background: url(../images/icon/icon_sale.svg) no-repeat center / contain;}
.serieslist .list li.state3 a .state { padding-left: 25px; position: absolute; top: 15px; left: 15px;  color: var(--color-orange-main); font-weight: 700; font-size: 16px;}
.serieslist .list li.state3 a .state::before {  position: absolute; content: ''; top: 50%; transform: translateY(-50%); left: 0; width: 20px; height: 20px; background: url(../images/icon/icon_limit.svg) no-repeat center / contain;}
.serieslist .list li.state4 a .state {padding-left: 25px; position: absolute; top: 15px; left: 15px; color: var(--color-gray-font); font-weight: 700; font-size: 16px;}
.serieslist .list li.state4 a .state::before {  position: absolute; content: ''; top: 50%; transform: translateY(-50%); left: 0; width: 20px; height: 20px; background: url(../images/icon/icon_discontinued.svg) no-repeat center / contain;}

@media screen and (min-width:600px) { 
	.seriesDesc .info .copy {font-size: 16px;}
	.serieslist .list li a .name2 {font-size: 18px;}
	.serieslist .list li a .nameG {font-size: 16px;}
	
}
@media screen and (min-width:800px) { 
	.serieslist .list li {width: calc(33.3% - 20px); border-bottom: none;}
	.serieslist .list li a {flex-direction: column;}
	.serieslist .list li a .car {width: 100%;}
	.serieslist .list li a .name {width: 100%; padding-left: 0; align-items: center;}
	.serieslist .list li a .year {position: absolute; top: 18px; right: 15px;}
}
@media screen and (min-width:1000px) {
	.serieslist h3 { margin-top: 100px;}
	.serieslist h3::before { height: 18px;}
    .serieslist .list li {padding: 40px 15px 15px 15px; width: calc(25% - 22.5px);}
    .serieslist .list li:hover {background-color: var(--color-gray-hover); border-color: transparent; border-radius: 30px;}
	.serieslist .list li:hover a * {opacity: .7;}
	.serieslist .list li:hover a::after { content: ''; display: block; height: 50px; width: 50px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url(../images/icon/search_round.svg) no-repeat center/contain;}
}

/* ==== 뉴스 ==== */
.newsList { display: flex; flex-direction: column; flex-wrap: wrap;}
.newsList .main {width: 100%;}
.newsList .main > .list {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 30px;}
.newsList .main > .list li a { width: 100%; padding-right: 120px; position: relative; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between;}
.newsList .main > .list li a .subject {font-size: 16px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.newsList .main > .list li a span.press {display: block; font-size: 12px; margin-top: 5px; color: var(--color-gray-font); margin-bottom: 5px;}
.newsList .main > .list li a .date {font-size: 12px; color: var(--color-gray-font);}
.newsList .main > .list li a .desc {display: none;}
.newsList .main > .list li a .thumb { transition: background-size 0.3s ease-in-out; overflow:hidden; width: 100%; max-width: 112px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); box-shadow: rgba(0, 0, 0, 0.11) 0px 1px 3px; border-radius: 10px; height: 74px;}
.newsList .main > .openMoreR {margin: 10px 0 30px 0;}
.newsSide {border-top: 5px solid var(--color-gray-border);}
.newsSide h3 em { color: var(--color-blue-hover);}  
.newsSide .list{display: flex; flex-direction: column; flex-wrap: nowrap;gap: 30px;} 
.newsSide .list li:last-child {margin-bottom: 0;}
.newsSide .list li a { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; padding-right: 130px; position: relative; gap: 5px;}
.newsSide .list li a .subject {min-height: 48px; font-size: 16px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.newsSide .list li a .subject span {display: block; font-size: 12px;  color: var(--color-gray-font);} 
.newsSide .list li a .date {font-size: 12px; color: var(--color-gray-font);}
.newsSide .list li a .thumb  { transition: background-size 0.3s ease-in-out; overflow: hidden; width: 100%; max-width: 112px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); box-shadow: rgba(0, 0, 0, 0.11) 0px 1px 3px; border-radius: 10px; height: 74px;}
.newsView {display: flex; flex-direction: column; flex-wrap: wrap;}
.newsView .view {width: 100%; margin-bottom: 30px;}
.newsView .view .date {color: var(--color-gray-font); font-size: 12px; padding-bottom: 20px;}
.newsView .view .content img {max-width: 100%;}
.newsView .view .copyright {font-size: 12px; color: var(--color-gray-font);}

@media screen and (min-width:1000px) {
	.newsList {flex-direction: row; flex-wrap: nowrap; justify-content: space-between; margin-bottom: 0;}
	.newsList .main {padding-right: 80px; width: 70%;} 
	.newsList .main > .list {gap: 50px;}
	.newsList .main > .list li {position: relative;}
	.newsList .main > .list li:last-child {margin-bottom: 0;}
	.newsList .main > .list li a { flex-direction: row;}
	.newsList .main > .list li a .desc {display: block; font-weight: 300; letter-spacing: -0.5px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 0;}
	.newsList .main > .list li a .subject {width: 70%; font-size: 18px; margin-bottom: 5px;}
	.newsList .main > .list li a .press { width: 15%; text-align: right; margin-top: 0; }
	.newsList .main > .list li a .date { width: 15%; text-align: right;margin: 5px 0; }
	.newsList .main > .list li a .subject span {padding-left: 10px;}
	.newsList .main > .list li a img {top: 20px; right: 0;}
	.wrap.pc .newsList .main > .list li:hover a .subject,  .pc .newsList .main > .list li:hover a .desc{text-decoration: underline;}
	.newsSide {width: calc(30% - 25px); margin-top: 0; border: none;}
	.newsSide .list {gap: 50px;}
	.newsSide .list li a img {top: 50%; transform: translateY(-50%);}
	.wrap.pc .newsSide .list li:hover a .subject {text-decoration: underline;}
	.newsView {flex-direction: row; flex-wrap: nowrap; gap: 50px;}
	.newsView .view {width: calc(70% - 25px); margin-bottom: 0;}
	.newsView .view h3.subject {font-size: 28px; margin: 30px 0 10px 0;}
	.newsView .view .date {font-size: 14px;}
	.newsView .view .content p {font-size: 16px;}
} 
/* ==== 내차사기 ==== */
.subFilter {display: none;}
.salesList .list {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 20px; margin-top: 20px;}
.salesList .list li {position: relative; width: 100%; padding: 15px; border: 1px solid var(--color-gray-border); border-radius: 15px;}
.salesList .list li .box .linkBox {position: absolute; top: 15px; right: 15px;}
.salesList .list li .box .linkBox {display: flex;}
.salesList .list li .box .info {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; padding: 40px 0 90px 0; gap: 10px;}
.salesList .list li .box .info .image img {width: 100%; max-width: 200px;}
.salesList .list li .box .info .image img.brand {position: absolute; top: 15px; left: 15px; max-width: 55px;}
.salesList .list li .box .info .copyBox {width: 100%;}
.salesList .list li .box .info .copyBox .copy .maxDiscount {display: inline-block; padding: 5px 15px; background-color: var(--color-yellow-back); color: var(--color-orange-main); font-size: 16px; border-radius: 10px;}
.salesList .list li .box .info .copyBox .copy .maxDiscount span {white-space: nowrap;}
.salesList .list li .box .info .copyBox .copy .maxDiscount span em {font-weight: 700;}
.salesList .list li .box .info .copyBox .copy .desc {display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; margin: 0; gap: 10px;}
.salesList .list li .box .info .copyBox .copy .desc > div {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start;}
.salesList .list li .box .info .copyBox .copy .desc .name {font-size: 20px; color: var(--color-lightDark-font); font-weight: 700; margin-top: 10px;}
.salesList .list li .box .info .copyBox .copy .desc .year {cursor: pointer;}
.salesList .list li .box .info .copyBox .copy .desc .year .moreDetail .con {color: var(--color-lightDark-font);}
.salesList .list li .box .info .copyBox .copy .desc .year .moreDetail {width: 100%;}
.salesList .list li .box .info .copyBox .copy .desc .moreDetail{position: relative; width: calc(100% - 30px); padding-right: 20px; text-align: left;}
.salesList .list li .box .info .copyBox .copy .desc .moreDetail.open::after {position: absolute; content: ''; top: 0; right: 0; width: 20px; height: 20px; background: url(../images/icon/arrow_up_gray.svg) no-repeat center/contain;}
.salesList .list li .box .info .copyBox .copy .desc .moreDetail.close::after {position: absolute; content: ''; top: 0; right: 0; transform: rotate(180deg); width: 20px; height: 20px; background: url(../images/icon/arrow_up_gray.svg) no-repeat center/contain;}
.salesList .list li .box .info .copyBox .copy .desc .moreDetail .con{overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; width: 100%;}
.salesList .list li .box .info .copyBox .copy .desc .trim {display: none;}
.salesList .list li .box .info .copyBox .copy .desc .option {cursor: pointer;}
.salesList .list li .box .info .copyBox .copy .desc .option .title {width: 30px; color: var(--color-gray-font);}
.salesList .list li .box .info .copyBox .copy .desc .color {cursor: pointer;}
.salesList .list li .box .info .copyBox .copy .desc .color .title {width: 30px; color: var(--color-gray-font);}
.salesList .list li .box .info .eventList { display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; width: 100%;}
.salesList .list li .box .info .eventList .title {background-color: var(--color-blue-back); color: var(--color-blue-main); font-weight: 600; padding: 2px 10px; border-radius: 10px; font-size: 16px; margin-bottom: 10px;}
.salesList .list li .box .info .eventList span {font-weight: 600;}
.salesList .list li .box .info .price {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; position: absolute; bottom: 70px; right: 15px; color: var(--color-blue-main);font-weight: 700; font-size: 18px;}
.salesList .list li .box .info .price span {font-size: 20px; margin-right: 5px;}
.salesList .list li .box .buttonBox {width: 90%; position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); margin: 0;}
.salesList .list li .box .buttonBox a {padding: 7px 5px;}
@media screen and (min-width:600px) {
	.salesList .list {flex-direction: row; flex-wrap: wrap;}
	.salesList .list li {width: calc(50% - 10px);}
	.salesList .list.diagonal {flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
	.salesList .list.diagonal li {width: 100%;}
	.salesList .list.diagonal li .box .info {flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding-top: 30px; padding-bottom: 55px; gap: 20px; }
	.salesList .list.diagonal li .box .info .image {width: 40%;}
	.salesList .list.diagonal li .box .info .copyBox {width: 60%; margin-bottom: 30px;}
	.salesList .list.diagonal li .box .info .eventList {width: 40%; position: absolute; bottom: 15px; left: 15px;}
	.salesList .list.diagonal li .box .info .price { position: absolute; bottom: 70px; right: 15px; margin-bottom: 0;}
	.salesList .list.diagonal li .box .buttonBox { position: absolute; right: 35px; bottom: 15px; width: 40%; transform: none; left: unset;}
}

@media screen and (min-width:1000px) {
	.subFilter {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; margin: 30px 0;}
	.subFilter .listOrder { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 15px; padding-right: 20px;}
	.subFilter .listOrder button { color: var(--color-gray-font); font-size: 16px;}
	.subFilter .listOrder button.vertical { color: var(--color-gray-font); font-size: 16px;}
	.subFilter .listType { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; border-radius: 10px; border: 1px solid var(--color-gray-border);}
	.subFilter .listType button {padding: 5px 10px; border: 1px solid transparent;  box-sizing: content-box;}
	.subFilter .listType button.vertical {width: 25px; height: 25px; background: url(../images/icon/icon_vertical.svg) 50% 50% no-repeat; background-size: auto; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
	.subFilter .listType button.horizon {width: 25px; height: 25px; background: url(../images/icon/icon_horizon.svg) 50% 50% no-repeat; background-size: auto; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
	.subFilter .listType button.vertical.on {background: url(../images/icon/icon_vertical_on.svg) 50% 50% no-repeat; background-size: auto; border-radius: 0 10px 10px 0; border: 1px solid transparent; background-color: var(--color-blue-main);}
	.subFilter .listType button.horizon.on {background: url(../images/icon/icon_horizon_on.svg) 50% 50% no-repeat; background-size: auto;  border-radius: 10px 0 0 10px; border: 1px solid transparent; background-color: var(--color-blue-main);}
	.salesList .list.horizon li {width: calc(25% - 15px);}
	.salesList .list.vertical li {width: 100%;}
	.salesList .list.vertical li .box .info {width: 100%; flex-wrap: wrap; flex-direction: row; align-items: flex-start; justify-content: flex-start; padding: 0; gap: 40px;}
	.salesList .list.vertical li .box .info .image {width: 40%; max-width: 250px; margin: 30px 0 0 30px;}
	.salesList .list.vertical li .box .info .image img {max-width: 100%;}
	.salesList .list.vertical li .box .info .image img.brand {max-width: 70px;}
	.salesList .list.vertical li .box .info .copyBox {width: 30%;}
	.salesList .list.vertical li .box .info .eventList {width: 30%; }
	.salesList .list.vertical li .box .info .price {font-size: 24px;}
	.salesList .list.vertical li .box .info .copyBox .copy .maxDiscount span {font-size: 16px;}
	.salesList .list.vertical li .box .info .eventList .title {padding: 5px 15px;}
	.salesList .list.vertical li .box .info .eventList span {font-size: 16px;}
	.salesList .list.vertical li .box .fastship.buttonBox {justify-content: flex-end;}
	.salesList .list.vertical li .box .buttonBox { width: auto; right: 15px; bottom: 15px; left: unset; transform: unset;}
	.salesList .list.vertical li .box .buttonBox a {padding: 7px 14px;}
	.salesList .list.vertical li .box .buttonBox a span {white-space: nowrap;}
	.salesList .list.diagonal {flex-direction: row; flex-wrap: wrap;}
	.salesList .list.diagonal li {width: 49%;}
	.wrap.pc .subFilter .listOrder button:hover, .subFilter .listOrder button.on {color: var(--color-dark-font);} 
	.wrap.pc .subFilter .listType button.vertical:hover {background-color: var(--color-gray-hover); border-radius: 0 10px 10px 0; }
	.wrap.pc .subFilter .listType button.horizon:hover {background-color: var(--color-gray-hover); border-radius: 10px 0 0 10px; }
	.wrap.pc .subFilter .listType button.vertical.on:hover {background-color: var(--color-blue-hover); border-color: var(--color-blue-hover);}
	.wrap.pc .subFilter .listType button.horizon.on:hover {background-color: var(--color-blue-hover); border-color: var(--color-blue-hover);}
	.wrap.pc .salesList .list li .box .info .copyBox .copy .desc .moreDetail .con:hover {color: var(--color-blue-main);}
	.wrap.pc .salesList .list li .box .info .copyBox .copy .desc .moreDetail.open:hover::after {background: url(../images/icon/arrow_up_blue.svg) no-repeat center/contain;}
	.wrap.pc .salesList .list li .box .info .copyBox .copy .desc .moreDetail.close:hover::after { transform: rotate(180deg); background: url(../images/icon/arrow_up_blue.svg) no-repeat center/contain;}
}

/* ==== 신차견적 ==== */
.estimateTop { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center;}
.estimateTop .model {position: relative; overflow: hidden; display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; gap: 5px; margin-bottom: 10px;}
.estimateTop .model .image {display: flex; width: 100%;}
.estimateTop .model .image img {width: 100%; border-radius: 3px;}
.estimateTop .model .thumb {width: 100%; overflow-x: auto;}
.estimateTop .model .thumb .list {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 5px;}
.estimateTop .model .thumb .list li {flex: 0 0 25%;}
.estimateTop .model .thumb .list li button {width: 100%; height: 50px; }
.estimateTop .model .thumb::-webkit-scrollbar {height: 5px;}
.estimateTop .model .thumb::-webkit-scrollbar-track {background-color: var(--color-btn-back);}
.estimateTop .model .thumb::-webkit-scrollbar-thumb {background-color: #CCC;}
.estimateTop .model .thumb::-webkit-scrollbar-track, .estimateTop .model .thumb::-webkit-scrollbar-thumb {border-radius: 10px;}
.estimateTop .model .link {width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 8px;}
.estimateTop .model .link button, .estimateTop .model .link a { font-weight: 500; border: 1px solid var(--color-gray-border); color: var(--color-gray-font); padding: 5px 15px; border-radius: 30px;}
.estimateTop .choice {position: relative;  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: 100%; gap: 10px;}
.estimateTop .choice .priceSummaryBox {position:relative; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px;}
.estimateTop .choice .priceSummaryBox .modelName {width: 100%; padding-right: 90px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 5px;}
.estimateTop .choice .priceSummaryBox .modelName .logo {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; max-width: 55px;}
.estimateTop .choice .priceSummaryBox .modelName .logo img {width: 100%;}
.estimateTop .choice .priceSummaryBox .modelName .name {font-size: 18px; font-weight: 600;}
.estimateTop .choice .priceSummaryBox .linkBox {position: absolute; right: 0; top: 1px;}
.estimateTop .choice .priceSummaryBox .linkBox a {padding: 5px 10px;}
.estimateTop .choice .priceSummaryBox .discount {text-align: center; background-color: var(--color-yellow-back); color: var(--color-orange-main); padding: 8px 16px; border-radius: 10px; width: 100%;}
.estimateTop .choice .priceSummaryBox .discount span {position: relative; padding-left: 32px; font-weight: 700;}
.estimateTop .choice .priceSummaryBox .discount span::before {position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background: url(../images/icon/tooltip_orange.svg) no-repeat center/contain;}
.estimateTop .choice .priceSummaryBox .summary { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; width: 100%;}
.estimateTop .choice .priceSummaryBox .summary .priceInfo {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 10px; color: var(--color-darkGray-font); font-weight: 500;}
/* .estimateTop .choice .priceSummaryBox .summary .priceInfo div {display: inline-block;} */
.estimateTop .choice .priceSummaryBox .summary .priceInfo div.disturCost .price {font-size: 15px; font-weight: 700; color: var(--color-lightDark-font);}
.estimateTop .choice .priceSummaryBox .summary .priceInfo .disturCost {display: block;}
.estimateTop .choice .priceSummaryBox .summary .list {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 5px;}
.estimateTop .choice .priceSummaryBox .summary .list li  {width: 100%;}
.estimateTop .choice .priceSummaryBox .summary .list li .box {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 5px; cursor: pointer;}
.estimateTop .choice .priceSummaryBox .summary .list li .box:hover {text-decoration: underline;}
.estimateTop .choice .priceSummaryBox .summary .list li .box span {font-size: 16px; font-weight: 700;}
.estimateTop .choice .priceSummaryBox .summary .list li .box span.title em {font-size: 14px; font-weight: 500;}
.estimateTop .choice .priceSummaryBox .summary .list li .box span.price {position: relative; padding: 0 15px 0 23px;}
.estimateTop .choice .priceSummaryBox .summary .list li .box:not(.card) span.price::before {content: '월'; position: absolute; top: 50%; left: 0px; transform: translateY(-50%);}
.estimateTop .choice .priceSummaryBox .summary .list li .box:not(.card) span.price::after {content: '~'; position: absolute; top: 50%; right: 0px; transform: translateY(-50%);}
.estimateTop .choice .priceSummaryBox .summary .list li .box:not(.card).nodata span.price::before {content: '';}
.estimateTop .choice .priceSummaryBox .summary .list li .box:not(.card).nodata span.price::after {content: '';}
.estimateTop .choice .priceSummaryBox .summary .list li .box.nodata span.price {padding: 0; }
.estimateTop .choice .priceSummaryBox .summary .list li .box.card {color: var(--color-blue-hover);}
.estimateTop .choice .priceSummaryBox .summary .list li .box.card .result span.price { padding-left: 0;}
.estimateTop .choice .priceSummaryBox .summary .list li .box.card .result .cashBack {font-size: 14px; margin-right: 3px;}
.estimateTop .choice .priceSummaryBox .summary .list li .box.finance {color: var(--color-blue-hover);}
.estimateTop .choice .priceSummaryBox .summary .list li .box.lease {color: #FE6232}
.estimateTop .choice .priceSummaryBox .summary .list li .box.rent {color: #FE6232;}
.estimateTop .choice .estmBar {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;}
.estimateTop .choice .estmBar > li {width: 100%; border-bottom: 1px solid var(--color-gray-border); padding: 10px 0;}
.estimateTop .choice .estmBar > li:first-child {border-top: 1px solid var(--color-gray-border);}
.estimateTop .choice .estmBar li button {position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 5px;}
.estimateTop .choice .estmBar li button .title {width: 100%;font-size: 16px; text-align: left; color: var(--color-darkGray-font);}
.estimateTop .choice .estmBar li button .choiced {font-size: 13px; display: flex; flex-wrap: wrap; flex-direction: row; align-items: flex-start; justify-content: space-between; width: 100%; text-align: left;}
.estimateTop .choice .estmBar li button .choiced .name span {width: 100%;}
.estimateTop .choice .estmBar li button .choiced .optionCount { position: absolute; top: 1px; left: 40px; font-size: 14px;}
.estimateTop .choice .estmBar li button .choiced .sub { width: 100%; padding-right: 15px;}
.estimateTop .choice .estmBar li button .choiced .sub li { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;}
.estimateTop .choice .estmBar li button .choiced .sub li .optionP { width: 30%; text-align: right;}
.estimateTop .choice .estmBar li button .choiced .count { position: absolute; top: 0; right: 50px;}
.estimateTop .choice .estmBar li button .choiced .price { padding-right: 15px; font-size: 14px; font-weight: 700; position: relative; width: 100%; text-align: right; }
.estimateTop .choice .estmBar li button .choiced .price::after {position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: '원';}
.estimateTop .choice .estmBar li button .change {position: absolute; top: 0; right: 0; min-width: 45px; text-align: center; border: 1px solid var(--color-gray-border); color: var(--color-darkGray-font); border-radius: 30px; padding: 2px 8px; white-space: nowrap;}
.estimateTop .choice .estmBar li[tab="option"] button .choiced .price { width: 100%; text-align: right; }
.estimateTop .choice .estmBar li[tab="color"] button .choiced {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;}
.estimateTop .choice .estmBar li[tab="color"] button .choiced > div {width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center;}  
.estimateTop .choice .estmBar li[tab="color"] button .choiced .category {width: 30px; color: var(--color-darkGray-font);}
.estimateTop .choice .estmBar li[tab="color"] button .choiced .name {width: calc(70% - 15px); padding-left: 5px;}
.estimateTop .choice .estmBar li[tab="color"] button .choiced .price {width: calc(30% - 15px);}
.estimateTop .choice .term { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; width: fit-content; background-color: var(--color-red); color: var(--color-white); padding: 3px 9px; border-radius: 5px;}
.estimateTop .choice .term ul { padding-left: 5px; }
.estimateTop .choice .term.w {display : none;}
.estimateTop .choice .taxFree { display: flex; align-items: center; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; gap: 10px;}
.estimateTop .choice .taxFree.off { display: none; }
.estimateTop .choice .taxFree span {font-weight: 700; color: var(--color-red);}
.estimateTop .choice .sum {display: flex; align-items: center; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; font-size: 16px; text-align: right;}
.estimateTop .choice .sum span.price {position: relative; padding-right: 15px; font-weight: 700;}
.estimateTop .choice .sum span.price::after {position: absolute; content: '원'; top: 50%; right: 0; transform: translateY(-50%);}
.estimateTop .choice .sum .title {letter-spacing: -1px; margin-right: 5px;}
.estimateTop .choice .buttonBox {flex-direction: column; align-items: stretch;}
.estimateTop .choice .buttonBox button {padding: 8px 15px; font-size: 18px;}
/* 견적 차량가 num (원형 배경) */
.wrap.estimate span.ttl.color {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; font-size: 16px;}
.wrap.estimate span.ttl.color .num {margin: 0 5px; background-color: var(--color-blue-hover); color: var(--color-white); font-size: 12px; width: 22px; height: 22px; border-radius: 50%; display: flex; justify-content: center; align-items: center;}
.wrap.estimate span.ttl.color + span.price, .wrap.estimate span.price + span.unit { display: flex; flex-direction: row; justify-content: center; flex-wrap: nowrap; align-items: center; color: var(--color-blue-hover); font-size: 16px; gap: 3px; font-weight: 700;}
.wrap.estimate .estimateTop span.ttl.color .num, .wrap.estimate .totalPrice span.ttl.color .num {background-color: var(--color-orange-main);}
.wrap.estimate .estimateTop span.ttl.color + span.price, .estimateTop  span.price + span.unit {color: var(--color-orange-main);}
.wrap.estimate .totalPrice span.ttl.color + span.price, .wrap.estimate .totalPrice  span.price + span.unit {color: var(--color-orange-main);}
/* 견적tab - 구입비용(차량가격) */
.estmPage { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;}
.estmPage .estmCost {width: 100%;}
.estmPage .estmCost .choiceBox { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 20px; margin-bottom: 30px;}
.estmPage .estmCost .choiceBox .box { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;}
.estmPage .estmCost .choiceBox .box .title {font-weight: 600;}
.estmPage .estmCost .choiceBox .box .costSummary {width: 100%; position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px;}
.estmPage .estmCost .choiceBox .box .costSummary h4{margin: 0;}
.estmPage .estmCost .choiceBox .box .costSummary .totalPrice { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end;  position: absolute; top: 15px; right: 0;}
.estmPage .estmCost .choiceBox .box .costSummary .discountBox {position: relative; width: 100%; margin-top: 10px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; flex: 1; background-color: var(--color-btn-back); padding: 15px; border-radius: 10px; }
.estmPage .estmCost .choiceBox .box .costSummary .discountBox button {width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px; justify-content: space-between;}
.estmPage .estmCost .choiceBox .box .costSummary .discountBox button .title {width: 100%; text-align: left; color: var(--color-darkGray-font); font-size: 16px;}
.estmPage .estmCost .choiceBox .box .costSummary .discountBox button .sub li {text-align: left;}
.estmPage .estmCost .choiceBox .box .costSummary .discountBox button .change { position: absolute; top: 15px; right: 15px; min-width: 45px; text-align: center; background-color: var(--color-white); border: 1px solid var(--color-gray-border); color: var(--color-darkGray-font); border-radius: 30px; padding: 2px 8px;}
.estmPage .estmCost .choiceBox .box .costSummary .discountBox button .discount span.estmRslt_discount { font-weight: 700; padding: 0 3px;}
.estmPage .estmCost .choiceBox .box .costSummary .deliveryBox {width: 100%; display: flex; flex-direction: row; justify-content: flex-end; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1; padding: 15px; border: 1px solid var(--color-gray-border); border-radius: 10px;}
.estmPage .estmCost .choiceBox .box .costSummary .deliveryBox .title { display: flex; width: 75px; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 5px;}
.estmPage .estmCost .choiceBox .box .costSummary .deliveryBox .title button.helpBtn {position: relative; width: 15px; height: 15px; background: url(../images/icon/tooltip.svg) no-repeat center/contain;}
.estmPage .estmCost .choiceBox .box .costSummary .deliveryBox .title button.helpBtn .balloon { box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px; position: absolute; top: 20px; left: -45px; background-color: var(--color-white); border: 2px solid var(--color-blue-main); border-radius: 15px; width: 250px; padding: 15px; cursor: auto; z-index: 1;} 
.estmPage .estmCost .choiceBox .box .costSummary .deliveryBox .title button.helpBtn .balloon .close {position: absolute; top: 15px; right: 15px; width: 18px; height: 18px; background: url(../images/icon/close.svg) no-repeat center/contain; cursor: pointer;}
.estmPage .estmCost .choiceBox .box .costSummary .deliveryBox .title button.helpBtn .balloon .title {font-size: 15px; font-weight: 700; width: fit-content;}
.estmPage .estmCost .choiceBox .box .costSummary .deliveryBox .title button.helpBtn .balloon .content {text-align: left; font-weight: 400; line-height: 1.4; color: var(--color-darkGray-font);}
.estmPage .estmCost .choiceBox .box .costSummary .deliveryBox select { width: calc(50% - 47.5px); } 
.estmPage .estmCost .choiceBox .box .costSummary .deliveryBox .price {font-weight: 700;}
.estmPage .estmCost .choiceBox .box .costSummary .deliveryBox .desc {margin: 0;}
.estmPage .estmCost .choiceBox .box .costSummary .vehicleSum {width: 100%; display:flex; justify-content: flex-end; flex-direction: row; flex-wrap: nowrap; align-items: center; padding-right: 15px;}
.estmPage .estmCost .choiceBox .box .costSummary .vehicleSum span.estmRslt_vehicleSum {font-weight: 700;}
.estmPage .estmCost .choiceBox .box .takeList { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;}
.estmPage .estmCost .choiceBox .box .takeList ul { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; flex: 1; gap: 10px; padding: 15px; border: 1px solid var(--color-gray-border); border-radius: 10px;}
.estmPage .estmCost .choiceBox .box .takeList ul li {width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; flex: 1; gap: 5px;}
.estmPage .estmCost .choiceBox .box .takeList ul li .name {display: flex; width: 75px; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 5px;}
.estmPage .estmCost .choiceBox .box .takeList ul li .name button.helpBtn {position: relative; width: 15px; height: 15px; background: url(../images/icon/tooltip.svg) no-repeat center/contain;}
.estmPage .estmCost .choiceBox .box .takeList ul li .name button.helpBtn .balloon { box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px; position: absolute; top: 20px; left: -40px; background-color: var(--color-white); border: 2px solid var(--color-blue-main); border-radius: 15px; width: 250px; padding: 15px; cursor: auto; z-index: 1;} 
.estmPage .estmCost .choiceBox .box .takeList ul li .name button.helpBtn .balloon .close {position: absolute; top: 15px; right: 15px; width: 18px; height: 18px; background: url(../images/icon/close.svg) no-repeat center/contain; cursor: pointer;}
.estmPage .estmCost .choiceBox .box .takeList ul li .name button.helpBtn .balloon .title {font-size: 15px; font-weight: 700; }
.estmPage .estmCost .choiceBox .box .takeList ul li .name button.helpBtn .balloon .content {text-align: left; font-weight: 400; line-height: 1.4; color: var(--color-darkGray-font);}
.estmPage .estmCost .choiceBox .box .takeList ul li select {width: calc(100% - 80px);}
.estmPage .estmCost .choiceBox .box .takeList ul li .cont {width: calc(100% - 80px); display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center;}
.estmPage .estmCost .choiceBox .box .takeList ul li .cont.btn {justify-content: space-between;}
.estmPage .estmCost .choiceBox .box .takeList ul li .cont.btn span.memo {font-weight: 600; color: var(--color-red)}
.estmPage .estmCost .choiceBox .box .takeList ul li .cont .etc {width: calc(100% - 100px);}
.estmPage .estmCost .choiceBox .box .takeList ul li .cont .etc.btnInsute {width: auto;}
.estmPage .estmCost .choiceBox .box .takeList ul li .cont .desc {margin: 0;}
.estmPage .estmCost .choiceBox .box .takeList ul li .cont .price {width: 100px; text-align: right; font-weight: 700;}
.estmPage .estmCost .choiceBox .box .takeList ul li .cont .price .unit {padding-left: 3px;}
.estmPage .estmCost .choiceBox .box .takeList ul li .btnInsure {position: relative; font-size: 12px; text-align: center; font-weight: 700; border: 1px solid var(--color-blue-main); background-color: var(--color-white); color: var(--color-blue-main); padding: 3px 18px 3px 9px; border-radius: 5px;}
.estmPage .estmCost .choiceBox .box .takeList ul li .btnInsure::after {position: absolute; content: ''; top: 50%; right: 0; width: 18px; height: 18px; transform: translateY(-50%) rotate(90deg); background: url(../images/icon/arrow_up_blue.svg) no-repeat center/contain;}
.estmPage .estmCost .choiceBox .box .takeList .takePrice {width: 100%; display:flex; justify-content: flex-end; flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 10px 15px 10px 0;}
.estmPage .estmCost .choiceBox .box .takeList .takePrice span.price .takePriceSum {font-weight: 700;}
.estmPage .estmCost .choiceBox .box .takeList input[type="checkbox"] + span {font-size: 13px;}
.estmPage .estmCost .choiceBox .box .costSum { width: 100%; padding: 15px; background-color: var(--color-blue-back); border-radius: 10px; text-align: center; font-size: 16px; white-space: nowrap;}
.estmPage .estmCost .choiceBox .box .costSum span.cal {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.estmPage .estmCost .choiceBox .adBox {width: 100%; justify-content: center; margin: 0;}
.estmPage .estmCost .choiceBox .adBox img {width: 100%; border-radius: 10px;}
.estmPage .estmCost .choiceBox .adBox .estmAdM {display: flex;}
.estmPage .estmCost .choiceBox .adBox .estmAdW {display: none;}
/* 모바일 금융 탭박스 */
/* .estmPage .estmCost .financeBox .takeoverTab { margin-top: 20px; background-color: var(--color-theme-books); width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; z-index: 5;}
.estmPage .estmCost .financeBox .takeoverTab li { position: relative; width: 25%; }
.estmPage .estmCost .financeBox .takeoverTab li:not(:last-child)::after { content:""; position: absolute; top: 50%; right: 0; height: 50%; width: 1px; background-color: var(--color-gray-border); transform: translateY(-50%);}
.estmPage .estmCost .financeBox .takeoverTab li.on { border-bottom: 2px solid var(--color-blue-main); }
.estmPage .estmCost .financeBox .takeoverTab li button { color: var(--color-gray-font);  width: 100%; padding: 15px; font-weight: bold; text-align: center;}
.estmPage .estmCost .financeBox .takeoverTab li.cashback.on button { color: var(--color-blue-hover);}
.estmPage .estmCost .financeBox .takeoverTab li.finance.on button { color: var(--color-orange-main);}
.estmPage .estmCost .financeBox .takeoverTab li.rent.on button { color: #5240BF;}
.estmPage .estmCost .financeBox .takeoverTab li.lease.on button { color: #FF0048;} */
/* 견적tab - 구입비용(금융상품) */
.estmPage .estmCost .financeBox .noticeBox span {display: block; position: relative; padding-left: 30px;}
.estmPage .estmCost .financeBox .noticeBox span::before { position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background: url(../images/icon/tooltip_blue.svg) no-repeat center / contain; }
.estmPage .estmCost .financeBox .financeList {overflow-x: auto; margin-top: 10px; overflow-y: hidden;}
.estmPage .estmCost .financeBox .financeList .openMoreR {display: none;}
.estmPage .estmCost .financeBox .financeList > ul { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 10px;}
.estmPage .estmCost .financeBox .financeList > ul > li {width: 25%; min-width: 280px; border: 1px solid var(--color-gray-border); border-radius: 10px;}
.estmPage .estmCost .financeBox .financeList > ul > li.on { border: 2px solid var(--color-blue-main); }
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .title {text-align: center; font-size: 18px; padding: 10px; border-bottom: 1px solid var(--color-gray-border); margin: 0;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition {display: flex; padding: 10px; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;  gap: 10px;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list { transition: height 0.5s ease; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 12px 0; width: 100%; padding: 10px 0; border-bottom: 1px solid var(--color-gray-border); overflow: hidden;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list.folding { height: 100px; }
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition .list li .box {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition .list li .box span.name {width: 60px;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; width: calc(100% - 60px); gap: 0 5px;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox select {width: 100%; font-size: 12px;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox .copy { width: 100%; margin-bottom: 30px; }
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox .copy .slideBar { position: relative; }
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox .copy .slideBar .rowList { position: absolute; bottom: -25px; left: 0; width: 100%;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox .copy .slideBar .rowList ul { display: flex; flex-direction: row; flex-wrap: nowrap;  justify-content: space-between; align-items: center;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox .copy .slideBar .rowList ul li span{ color: var(--color-gray-font); text-align: center; display: block;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox .copy .slideBar .back { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; background-color: var(--color-gray-hover); border-radius: 20px;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox .copy .slideBar .back button { text-indent: -9999px; overflow: hidden; font-size: 0; line-height: 0; padding: 5px 0; z-index: 1; } 
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox .copy .slideBar .function { position: absolute; top: 0px; left: 0px; border-radius: 20px; background-color: #0077FF;  padding: 5px; }
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox .copy .slideBar .function .slideBtn { position: absolute; top: -5px; right: -10px; width: 20px; height: 20px; background-color: #0077FF; border-radius: 50%; border: 1px solid #5d5d5d52; text-indent: -9999px; z-index: 2;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox .copy .slideBar .function .slideBtn::after { content: ""; position: absolute; top: 50%; right: 50%; width: 10px; height: 10px; background: linear-gradient(to bottom, #D9D9D9 20%, #fff 50%); border-radius: 50%; transform: translate(50%, -50%);}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox .copy .slideBar .count { position: absolute; top: -35px; right: -25px; background-color: #fff;  padding: 2px 10px; text-align: center; border-radius: 10px; font-weight: bold; border: 1px solid #5d5d5d52;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox .copy .total  { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;     width: 100%;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox .copy .total .desc { font-size: 13px; color: #5d5d5d;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox .copy .total .price { font-weight: bold;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox > button { font-size: 12px; background-color: var(--color-white); border: 1px solid var(--color-gray-border); color: var(--color-darkGray-font); border-radius: 10px; padding: 4px 0px; }
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox > button.on { border: 1px solid var(--color-blue-main); color: var(--color-blue-main);}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox.len2 > button { width: calc(50% - 2.5px); }
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox.len3 > button { width: calc(33.3% - 2.5px); }
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox.len4 > button { width: calc(25% - 2.5px); }
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .box .selectBox.len5 > button { width: calc(20% - 2.5px); }
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition .notice { color: var(--color-gray-font); font-size: 12px; text-align: center; min-height:97px; display: flex; flex-direction: column; justify-content: center;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition .detailSetBox {width: 100%;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition .detailSetBox .setBtn { position: relative; width: 100%; color: var(--color-darkGray-font); background-color: var(--color-btn-back); text-align: center; padding: 5px 0; border-radius: 5px; font-weight: 700;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition .detailSetBox .setBtn.open::after { position: absolute; content: ''; top: 50%; right: 15px; transform: translateY(-50%); width: 25px; height: 25px; background: url(../images/icon/arrow_up_gray.svg) no-repeat center / contain; }
.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition .detailSetBox .setBtn.close::after { position: absolute; content: ''; top: 50%; right: 15px; transform: translateY(-50%) rotate(180deg); width: 25px;  height: 25px; background: url(../images/icon/arrow_up_gray.svg) no-repeat center / contain; }
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList {display: flex; flex-direction: column;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li {position: relative; border-bottom: 1px solid var(--color-gray-border);}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li.on::before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-blue-back); z-index: -1;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li:not(:last-child) {padding-bottom: 10px;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li:last-child {border-bottom: 0;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li > button {position: relative; width: 100%; gap: 2px; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; margin-top: 10px; padding: 10px; align-content: flex-end;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .desc { color: var(--color-lightDark-font); padding: 10px; border-radius: 10px; margin: 10px; background-color: var(--color-white);}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li .openMoreC {z-index: 1;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li .openMoreC.close { position: absolute; bottom: -13px; left: 50%;transform: translateX(-50%);}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li .openMoreC.open {position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%);}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li .more .button { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 0 10px;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li .more .button button { border: 1px solid var(--color-blue-main); width: calc(50% - 10px); text-align: center; background-color: var(--color-white); border-radius: 30px; font-size: 16px; flex: 1; padding: 8px 16px; font-weight: 500; color: var(--color-blue-main);}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li .more .button button.viewEstmDocu {background-color: var(--color-blue-main); border-color: var(--color-blue-main); color: var(--color-white);}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li button span.logo {position: absolute; top: 50%; left: 25px; transform: translateY(-50%); max-width: 100px;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li button span.logo img {width: 100%;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li button span.rank { position: absolute; top: 50%; transform: translateY(-50%); left: 6px; font-size: 20px; font-weight: 700;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li button span.capital { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: var(--color-darkGray-font); font-weight: bold; padding-left: 70px; height: 30px; line-height: 30px;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li button span.capital em {position: absolute; top: 0; left: 33px; display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; background-color: var(--color-yellow-back); border-radius: 15px; font-weight: bold; font-size: 20px; color: #FE6232;  }
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li button span.mon { display: none; }
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li button span.pmt { font-size: 16px; font-weight: 600; color: var(--color-darkGray-font);}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li:first-child button span.pmt { color: #009EFF; }
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li .more .detail { border-bottom: 1px dashed var(--color-blue-main); padding: 10px; text-align: center; font-weight: 500; margin-bottom: 10px; } 
.estmPage .estmCost .financeBox .financeList > ul > li.cashback .box .finctop .title {color: var(--color-blue-hover);}
.estmPage .estmCost .financeBox .financeList > ul > li.finance .box .finctop .title {color: var(--color-blue-hover);} 
.estmPage .estmCost .financeBox .financeList > ul > li.rent .box .finctop .title {color: #FE6232;}
.estmPage .estmCost .financeBox .financeList > ul > li.lease .box .finctop .title {color: #FE6232;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li button span.gap { display: none; }
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li button span.back1 {position:relative; padding-top: 15px;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li button span.back1::before { content:"카드사 제공 "; position: absolute; right: 0px; top: 0px; color: var(--color-darkGray-font);}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li button span.back2 {position:relative; padding-top: 15px; color: var(--color-orange-main); font-weight: 700;}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li button span.back2::before { content:"카위키 혜택 "; position: absolute; right: 0px; top: 0px; color: var(--color-orange-main); }
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li button span.rem::before { content:"잔가 "; color: var(--color-darkGray-font); }
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li button span.end::before { content:"만기인수 "; color: var(--color-darkGray-font);}
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li button span.pmt::before { content:"월 "; color: var(--color-darkGray-font); }
.estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li button span.rate::before { content:"금리 "; color: var(--color-darkGray-font); }
.estmPage .estmCost .financeBox .financeList > ul > li.cashback .box .list .dataList li button span.pmt {position:relative; }
.estmPage .estmCost .financeBox .financeList .openMoreR {position: relative; display: flex; }
.estmPage .estmCost .financeBox .financeList .openMoreR button {border-radius: 0;}
.estmPage .estmCost .financeBox .financeList .openMoreR::before {position: absolute; content: ''; top: -50px; left: 0; width: 100%; height: 100%; background: linear-gradient(to left top, var(--color-btn-back), var(--color-white)); opacity: .5;}
.estmPage .estmCost .financeBox .financeList > ul.close { max-height: 650px;}
.estmPage .estmCost .financeBox .financeList > ul.open { max-height: auto;}
.estmPage .estmCost .financeList ul:not(.close) + .openMoreR::before {content: none;}
/* 금융상품 하단 합계 메뉴 */
.estmPage .estmCost .proBtn .sum {display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; color: var(--color-white);}
.estmPage .estmCost .proBtn .sum span {font-size: 16px; }
.estmPage .estmCost .proBtn .sum span.price {font-weight: 700;}

@media screen and (max-width:360px) {
	.estimateTop .choice .priceSummaryBox .summary .list li .box.card .result .cashBack {font-size: 12px;}
	.estimateTop .choice .priceSummaryBox .summary .list li .box span.title em {font-size: 12px;}	
} 
@media screen and (min-width:600px) {
	.estimateTop .model .thumb .list li button {height: 70px;}
	.estimateTop .choice .priceSummaryBox {flex-direction: row; flex-wrap: wrap;}
	.estimateTop .choice .estmBar li button .choiced {flex-direction: row; justify-content: space-between; align-items: flex-end;}
	.estimateTop .choice .estmBar li.color button .choiced .colorExt {flex-wrap: nowrap;}
	.estimateTop .choice .estmBar li.color button .choiced .colorInt {flex-wrap: nowrap;}
	.estimateTop .choice .estmBar li.color button .choiced .name {width: 80%;}
	.estimateTop .choice .buttonBox {flex-direction: row; align-items: stretch;}
	.estmPage .estmCost .choiceBox .box .costSum {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 3px;}
	.estmPage .estmCost .choiceBox .box .costSummary .totalPrice {top:0; right: 15px;}
	.estmPage .estmCost .choiceBox .box .costSummary .discountBox {margin-top: 0;}
	.estmPage .estmCost .proBtn .sum {flex-direction: row; flex-wrap: nowrap; gap: 10px;}
}
@media screen and (min-width:1000px) { 
	.estimateTop { flex-direction: row; align-items: flex-start; gap: 30px;}
	.estimateTop .model { width: calc(50% - 15px); position: relative; margin-bottom: 0;}
	.estimateTop .model .thumb .list li {flex: 0 0 19.3%;}
	.estimateTop .choice { width: calc(50% - 15px); }
	.estimateTop .choice .priceSummaryBox {align-items: center;justify-content: space-between;}
	.estimateTop .choice .priceSummaryBox .summary .priceInfo {font-size: 16px; justify-content: flex-start;}
	.estimateTop .choice .priceSummaryBox .summary .list li .box span {font-size: 20px;}
	.estimateTop .choice .priceSummaryBox .summary .list li .box.card .result .cashBack {font-size: 20px;}
	.estimateTop .choice .priceSummaryBox .summary .list li .box span.title em {font-size: 16px;}
	.estimateTop .choice .priceSummaryBox .discount {width: auto; margin-right: 100px;}
	.estimateTop .choice .term.m {display : none;}
	.estimateTop .choice .term.w {display : flex;}
	.estimateTop .choice .estmBar {background-color: var(--color-btn-back); padding: 10px; border-radius: 10px;}
	.estimateTop .choice .estmBar > li:first-child {border-top: 0; padding-top: 0;}
	.estimateTop .choice .estmBar > li:last-child {border-bottom: 0; padding-bottom: 0;}
	.estimateTop .choice .estmBar li button {flex-direction: row; flex-wrap: nowrap;} 
	.estimateTop .choice .estmBar li button .title {width: 65px;}
	.estimateTop .choice .estmBar li button .choiced {width: calc(100% - 120px); font-size: 13px;}
	.estimateTop .choice .estmBar li button .choiced .name {width: 100%;}
	.estimateTop .choice .estmBar li button .choiced .count {left: 60px;}
	.estimateTop .choice .estmBar li button .choiced .sub.choice {padding-top: 20px;}
	.estimateTop .choice .estmBar li button .choiced .optionCount {position: inherit;}
	.estimateTop .choice .estmBar li button .change {position: inherit; background-color: var(--color-white);}
	.estimateTop .choice .estmBar li.color button .choiced .category {width: 11%;}
	.estimateTop .choice .estmBar li.color button .choiced .colorExt {gap: 5px;}
	.estimateTop .choice .estmBar li.color button .choiced .colorInt {gap: 5px;}
	.estimateTop .choice .estmBar li.color button .choiced .name {padding-left: 0;}
	.estimateTop .model .link button, .estimateTop .model .link a {font-size: 16px;}
	.estimateTop .choice .taxFree {width: calc(100% - 65px);}
	.estimateTop .choice .sum { width: calc(100% - 65px); font-size: 20px;}
	.estimateTop .choice .sum span.price {padding-right: 20px;}
	.estmPage .estmCost .choiceBox { flex-direction: row; flex-wrap: nowrap;}
	.estmPage .estmCost .choiceBox .box {width: calc(100% - 305px); flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: stretch;}
	.estmPage .estmCost .choiceBox .box h4 { margin: 10px 0; position: absolute; top: -50px;}
	.estmPage .estmCost .choiceBox .box .costSummary {justify-content: space-between; width: calc(50% - 5px); gap: 0;}
	.estmPage .estmCost .choiceBox .box .costSummary h4 { margin: 10px 0; }
	.estmPage .estmCost .choiceBox .box .costSummary .discountBox {margin-top: 0; margin-bottom: 10px;}
	.estmPage .estmCost .choiceBox .box .costSummary .vehicleSum {padding: 10px 15px 0 0;}
	.estmPage .estmCost .choiceBox .box .costSummary .totalPrice {top: -37px;}
	.estmPage .estmCost .choiceBox .box .takeList {position: relative; justify-content: space-between; width: calc(50% - 5px);}
	.estmPage .estmCost .choiceBox .box .takeList ul li .btnInsure:hover {background-color: var(--color-gray-hover); border-color: var(--color-gray-hover);}
	.estmPage .estmCost .choiceBox .box .takeList .takePrice {padding: 10px 15px 0 0;}
	.estmPage .estmCost .choiceBox .box .costSum .price { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 3px; padding-left: 5px; }
	.estmPage .estmCost .choiceBox {gap: 10px; margin: 50px 0 50px 0; position: relative; }
	.estmPage .estmCost .choiceBox .box .takeList ul li .btnInsure {font-size: 14px;}
	.estmPage .estmCost .choiceBox .adBox {width: 295px;}
	.estmPage .estmCost .choiceBox .adBox .estmAdM {display: none;}
	.estmPage .estmCost .choiceBox .adBox .estmAdW {display: flex;}
	.estmPage .estmCost .choiceBox .adBox .estmAdW img {border-radius: 15px;}
	.estmPage .estmCost .financeBox .tabBar {display: none;}
	/* .estmPage .estmCost .financeBox .financeList > ul > li.on { border: 1px solid var(--color-gray-border);} */
	.estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .selectBox .box .copy { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
    .estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .selectBox .box .title { width: 15%; font-size: 20px; }
    .estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .selectBox .box .copy .slideBar {  width: 85%; }
    .estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition > .list li .selectBox .box .copy .total .price { font-size: 20px; }
    .estmPage .estmCost .proBtn .sum span {font-size: 20px;}
    .wrap.pc .estmPage .estmCost .financeBox .financeList > ul > li .box .finctop .condition .detailSetBox .setBtn:hover::after {background: url(../images/icon/arrow_up_blue.svg) no-repeat center/contain;}
    .wrap.pc .estimateTop .model .link button:hover, .wrap.pc .estimateTop .model .link a:hover {background-color: var(--color-gray-hover); color: var(--color-lightDark-font); border-color: var(--color-gray-hover);}
    .wrap.pc .estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li .more .button button.viewScheDocu:hover {background-color: var(--color-gray-hover); border-color: var(--color-gray-hover) }
    .wrap.pc .estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li .more .button button.viewEstmDocu:hover {background-color: var(--color-blue-hover); color: var(--color-blue-back); border-color: var(--color-blue-hover);}
    .wrap.pc .estmPage .estmCost .financeBox .financeList > ul > li .box .list .dataList li:hover > button {background-color: var(--color-blue-back);}
}
/* 견적팝업 */
.estmPopup { position: fixed; top: 0; right: 0; width: 100%; height: 100%; z-index: 23; opacity: 1; visibility: visible;}
.estmPopup.close { opacity: 0; visibility: hidden; transition: all .5s ease;}
.estmPopup .dim {width: 100%; height: 100%; background-color: var(--color-dark-font); opacity: .5; z-index: 22;}
.estmPopup .frame {position: absolute; width: 100%; height: 100%; top: 0; right: 0; background: var(--color-white); max-width: 400px; transform: translateX(100%); transition: transform 0.5s ease;}
.estmPopup .frame.open { transform: translateX(0);}
.estmPopup .frame .head { position: relative; height: 60px; border-bottom: 2px solid var(--color-gray-border);}
.estmPopup .frame .head li { position: relative; line-height: 60px; font-size: 20px; font-weight: 600; padding-left: 15px; }
.estmPopup .frame .head .btn button {position: absolute; top: 50%; transform: translateY(-50%); right: 5px; width: 45px; height: 45px; background: url(../images/icon/close.svg) no-repeat center/contain; background-size: 20px; font-size: 0; line-height: 0;overflow: hidden;text-indent: -9999px; }
.estmPopup .frame .content { height: calc(100% - 120px); overflow-y: auto;}
.estmPopup .frame .content .list { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; width: 100%;}
.estmPopup .frame .content .list li {width: 100%;}
.estmPopup .frame .content .list li .group h4 { position: relative; padding: 0 15px 0 30px; margin: 0; display: flex; flex-direction: column; word-break: keep-all; line-height: 18px; font-size: 16px; color: var(--color-lightDark-font);}
.estmPopup .frame .content .list li .group h4::before {content: ''; position: absolute; top: 50%; left: 15px; transform: translateY(-50%); width: 4px; height: 10px; background: var(--color-blue-hover);}
.estmPopup .frame .content .list li .group .ttl { width: 100%; position:relative; border-bottom: 1px solid var(--color-gray-border); background-color: var(--color-white); text-align: left; font-size: 16px; padding: 15px;}
.estmPopup .frame .content .list li .group .ttl.open::after { content:""; position: absolute; top: 50%; transform: translateY(-50%); right: 15px; width: 24px; height: 24px; background: url(../images/icon/arrow_down_gray.svg) 0 0 no-repeat; background-size: contain;}
.estmPopup .frame .content .list li .group .ttl.close::after { content:""; position: absolute; top: 50%; transform: translateY(-50%) rotate(180deg); right: 15px; width: 24px; height: 24px; background: url(../images/icon/arrow_down_gray.svg) 0 0 no-repeat; background-size: contain;}
.estmPopup .frame .content .list li .group .ttl::after {background: url(../images/icon/arrow_up_blue.svg) no-repeat center/contain;}
.estmPopup .frame .content .list li .group .gradeSel .bar:first-child, .estmPopup .frame .content .list li .group .colorSel h4:first-child {margin-top: 15px;}
.estmPopup .frame .content .list li .group ul {padding: 15px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px;}
.estmPopup .frame .content .list li .group ul li {width: 100%; position: relative;}
.estmPopup .frame .content .list li .group ul li.noticeBox {padding: 10px; margin: 0; font-size: 14px;}
.estmPopup .frame .content .list li .group ul li.noticeBox .buttonBox a { padding: 5px 10px; max-width: 120px; font-size: 14px; margin-top: 10px;}
.estmPopup .frame .content .list li .group ul li button {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding: 17px 10px 17px 10px; width: 100%; font-weight: 500; border-radius: 10px; border: 1px solid transparent;}
.estmPopup .frame .content .list li .group ul li.on button {border: 1px solid var(--color-blue-main); background-color: var(--color-blue-main); }
.estmPopup .frame .content .list li .group ul li.on button span { color: var(--color-white); }
.estmPopup .frame .content .list li .group ul li button .name{ text-align: left; width: 70%; word-break: keep-all;}
.estmPopup .frame .content .list li .group ul li button .price{ text-align: right; width: 30%; font-weight: 700; }
.estmPopup .frame .content .list li .group ul li button .info { word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; width: 100%; margin-top: 4px; color: var(--color-gray-font); text-align: left;}
.estmPopup .frame .content .list li .group ul li button .color-name__wrap { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; gap: 5px;}
.estmPopup .frame .content .list li .group ul li button .colorChip { position: relative; display: flex; flex-direction: column;}
.estmPopup .frame .content .list li .group ul li button .colorChip .colorMain { position: relative; display: inline-block; width: 42px; height: 42px; border: 1px solid var(--color-gray-border); border-radius: 5px;}
.estmPopup .frame .content .list li .group ul li button .colorChip .colorSub { position: absolute; display: inline-block; width: 42px; height: 21px; border-radius: 5px 5px 0 0; border: 1px solid var(--color-gray-border); border-bottom: none;}
.estmPopup .frame .content .list li .group ul li button .color-name__wrap > .name-price--wrap { display: flex; text-align: left; justify-content: space-between; width: 100%;}
.estmPopup .frame .content::-webkit-scrollbar {width: 0;}
.estmPopup .frame .foot { background-color: #101e2e; padding: 0 15px; height: 60px; display: flex; justify-content: space-between; align-items: center; gap: 30px;}
.estmPopup .frame .foot .sum {width: calc(100% - 95px); display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; color: var(--color-white);}
.estmPopup .frame .foot .sum span {font-size: 16px; font-weight: 700;}
.estmPopup .frame .foot button {width: 65px; padding: 10px 0; border: 1px solid transparent; border-radius: 30px; background-color: var(--color-white); }
.estmPopup .estmPopup .frame .content .list li .group .optionSel h4, .estmPopup .frame .content .list li .group .discountSel h4 {margin: 0; padding-left: 30px;}
.estmPopup .estmPopup .frame .content .list li .group .optionSel h4::before, .estmPopup .frame .content .list li .group .colorSel h4::before, .estmPopup .frame .content .list li .group .discountSel h4::before {left: 15px;}
.estmPopup .estmPopup .frame .content .list li .group .colorSel h4:first-child {margin-top: 15px;}
/* 견적팝업 제원 */
.popupLayer .content .infoPopup {padding-bottom: 20px;}
.popupLayer .content .infoPopup h3 {font-size: 16px; margin: 0 0 10px 0;}
.popupLayer .content .infoPopup .spec {display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 10px;}
.popupLayer .content .infoPopup .spec .name {position: relative; padding-left: 10px; border-bottom: 1px solid var(--color-gray-border); text-align: left; margin-top: 5px; font-size: 16px; font-weight: 700;}
.popupLayer .content .infoPopup .spec .name::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 10px; background-color: var(--color-blue-hover);}
.popupLayer .content .infoPopup .spec dl {gap: 0;}
.popupLayer .content .infoPopup .spec dl dt {font-size: 14px; text-align: center; background-color: var(--color-btn-back); width: 40%; padding: 10px 0; word-break: keep-all;}
.popupLayer .content .infoPopup .spec dl dd {font-size: 14px; width: 60%; padding: 10px 0 10px 15px;}
/* 견적서 보기 */
.popupLayer .content .estmDocu { zoom: .6;}
.popupLayer .content .scheDocu { padding-bottom: 20px;}
.popupLayer .content .estmDocu .urlCopy {font-weight: 600; color: var(--color-blue-hover); background-color: var(--color-blue-back); padding: 3px 12px; border-radius: 30px;}
@media screen and (orientation: landscape) and (min-width: 720px), screen and (orientation: portrait) and (min-width: 640px) {
	.popupLayer .content .infoPopup .spec {flex-direction: row; flex-wrap: nowrap;}
	.popupLayer .content .infoPopup .spec .left {width: calc(50% - 5px)}
	.popupLayer .content .infoPopup .spec .right {width: calc(50% - 5px)}
	
}

/* 색상, 옵션 dis 재고한정 등등 */
.estmPopup .frame .content .list li .group .discountList li .name {position: relative; padding-left: 15px; line-height: 18px; margin-bottom: 15px; font-size: 16px; color: var(--color-lightDark-font); font-weight: 700;}
.estmPopup .frame .content .list li .group .discountList li .name::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 4px; height: 10px; background: var(--color-blue-hover);}
.estmPopup .frame .content .list li .group .discountList li > ul {padding: 0;}
.estmPopup .frame .content .list li .group .discountList li > ul li button {justify-content: flex-end;}
.estmPopup .frame .content .list li .group .discountList li > ul li button .require {width: 70%; text-align: left;}
.estmPopup .frame .content .list li .group .discountList li .info {color: var(--color-darkGray-font); background-color: var(--color-btn-back); margin-top: 15px; padding: 10px; border-radius: 10px;}
.estmPopup .frame .content .list li .group li.state3 button::before {position: absolute; content: '재고 한정'; top: 0; right: 0; background-color: var(--color-yellow-back); font-size: 12px; color: var(--color-orange-main); font-weight: 500; padding: 0px 8px; border-radius: 0 5px;}
.estmPopup .frame .content .list li .group li.dis {background-color: rgba(0, 0, 0, 0.05); border-radius: 10px;}
.estmPopup .frame .content .list li .group li.dis button {cursor: auto;}
.estmPopup .frame .content .list li .group li.dis button::after { position: absolute; right: 10px; bottom: 5px; font-size: 12px; color: var(--color-red); }
[kind="optionList"] li.dis[dis='sub'] button::after { content: '연계된 옵션 선택 필요';}
[kind="optionList"] li.dis[dis='sub2'] button::after { content: '선택된 옵션 선택 필요';}
[kind="optionList"] li.dis[dis='anti'] button::after { content: '선택된 옵션 조합 불가'; }
[kind="optionList"] li.dis[dis='intNot'] button::after { content: '선택된 내장 조합 불가'; }
[kind="optionList"] li.dis[dis='extNot'] button::after { content: '선택된 외장 조합 불가'; }
.colorList li.dis[dis='optionJoin'] button::after { content: '연계된 옵션 선택 필요'; }
.colorList li.dis[dis='optionNot'] button::after { content: '선택된 옵션 선택 필요';}
.colorList li.dis[dis='intNot'] button::after { content: '선택된 내장 조합 불가';}
.colorList li.dis[dis='extNot'] button::after { content: '선택된 외장 조합 불가';}

/* ===견적페이지 예외처리 */
/* 옵션, 색상 check */
.optionList li.check {border: 2px solid var(--color-red); border-radius: 10px;}
.optionList li.check .name {padding-left: 30px;}
.optionList li.check::before {position: absolute; content: ''; top:  50%; transform: translateY(-50%); left: 10px; width: 25px; height: 25px; background: url(../images/icon/icon_check.svg) no-repeat center/contain; z-index: 1; }
.colorBox .color ul li:hover { background-color: var(--color-gray-hover); border-radius: 10px;}
.colorBox .color ul li.check {border: 2px solid var(--color-red); border-radius: 10px;}
.colorBox .color ul li.check::before {position: absolute; content: ''; top: 15px; left: 18px; width: 25px; height: 25px; background: url(../images/icon/icon_check.svg) no-repeat center/contain; z-index: 1; }

/* 견적 priceTable plus 추가 */
.gradeBox .gradeList .trimList .priceTable .slidePrice h5::before {position: relative;}
/* 견적 h5 예외처리 */
.wrap.estimate .infoPage h5 {width: fit-content; background-color:var(--color-blue-back); color: var(--color-blue-hover); padding: 3px 9px; border-radius: 5px;}
.wrap.estimate .infoBox .itemUnit {margin-top: 0;}

/* 연식, 견적 - 판매조건 예외처리 */
.wrap.model .discountBox, .wrap.estimate .discountBox {display: flex; flex-direction: column;}
.wrap.model .discountBox .discountList .list, .wrap.estimate .discountBox .discountList .list {border-top: 1px solid var(--color-gray-border);}
.wrap.model .discountBox .discountList .list > li, .wrap.estimate .discountBox .discountList .list > li {padding: 0; border-radius: 0;}
.wrap.model .discountBox .discountList .list > li:last-child, .wrap.estimate .discountBox .discountList .list > li:last-child {border-bottom: 1px solid var(--color-gray-border);}

@media screen and (min-width:600px) { 
	.wrap.estimate .priceCatalogBox > div ul li {width: calc(25% - 15px);}
	
}
@media screen and (min-width:1000px){
	.popupLayer .content .estmDocu { zoom: 1;}
	.popupLayer .content .estmDocu .urlCopy:hover {background-color: var(--color-blue-hover); color: var(--color-btn-back);}
	.wrap.estimate .priceCatalogBox > div ul li {width: calc(16.6% - 16.2px);}
	.wrap.pc .estmPopup .frame .content .list li:not(:last-child) .group li:hover button {background-color: var(--color-btn-back);}
	.wrap.pc .estmPopup .frame .content .list li:not(:last-child) .group li.on:hover button {background-color: var(--color-blue-main)}
	.wrap.pc .estmPopup .frame .content .list li:not(:last-child) .group li.dis:hover {background-color: rgba(0, 0, 0, 0.05);}
	.wrap.pc .estmPopup .frame .content .list li .group .discountList li > ul li:hover button {background-color: --color-btn-back; }
}

/* ==== 유틸리티 ====  */
/* 유틸리티 table 공통 적용 */
.utility .overflowX {overflow-x: auto; }
.utility table {min-width: 480px; }
.utility table thead tr th {background-color: var(--color-blue-tableHead); padding: 8px; font-weight: 500; white-space: nowrap; font-size: 14px;} 
.utility table thead tr th:first-child {border-radius: 15px 0 0 0;}
.utility table thead tr th:last-child {border-radius: 0 15px 0 0;}
.utility table tbody tr td {padding: 8px; text-align: center; white-space: nowrap; font-size: 14px; } 
.utility table tbody tr td.set.on {background-color: var(--color-yellow-lineHeight); color: var(--color-lightDark-font);}
.utility table tbody tr td span.rate { color: var(--color-blue-main); font-weight: 500;} 
@media screen and (min-width:480px){
	.utility table {width: 100%;}
}
/* 유틸리티 필터박스 */
.wrap.calculator .openMoreC {display: none;}
.controlBox {width: 100%; padding: 20px 0; gap: 30px 0; display: flex; flex-direction: column; flex-wrap: nowrap; border-top: 2px solid var(--color-gray-border); border-bottom: 2px solid var(--color-gray-border);}
.controlBox .buttonBox {margin: 0 auto; min-width: 150px;}
.controlBox .condition {display: flex; flex-direction: column; flex-wrap: nowrap; gap: 15px 0;}
.controlBox .condition .desc {text-align: center; word-break: keep-all;}
.controlBox .condition .desc b {color: var(--color-orange-main);}
.controlBox .condition.off { display: none; }
.controlBox .condition .adjust {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; white-space: nowrap;}
.controlBox .condition .adjust.select {justify-content: flex-start;}
.controlBox .condition.sel .adjust.select.block {width: 100%;}
.controlBox .condition .adjust .title {width: 90px;  color: var(--color-gray-font); font-weight: 600; margin-top: 8px;}
.controlBox .condition .adjust .box { width: calc(100% - 90px); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px;}  
.controlBox .condition .adjust .inputBox {display: flex; width: 100%; max-width: 150px; flex-direction: row; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-start;}
.controlBox .condition .adjust .inputBox input[type="text"] { width: 70%; text-align: right;}
.controlBox .condition .adjust .inputBox b {width: 30%; color: var(--color-gray-font); text-align: left; padding-left: 5px; font-weight: 400;}
.controlBox .condition .adjust .inputBox select {width: 70%;}
.controlBox .condition .adjust .selBox {display: flex; gap: 10px; width: calc(100% - 90px); flex-direction: row; flex-wrap: wrap; justify-content: flex-start;}
.controlBox .condition .adjust.select.etc2 .selBox {width: auto;}
.controlBox .condition .adjust .selBox label input[type="radio"] + span {padding: 5px 10px; background-color: var(--color-btn-back); font-weight: 500; color: var(--color-darkGray-font); border-radius: 30px; border: 1px solid var(--color-btn-back); white-space: nowrap;}
.controlBox .condition .adjust .selBox label:last-child {margin-right: 0;}
.controlBox .condition .adjust .selBox label input[type="radio"] + span:hover {background-color: var(--color-gray-hover); color: var(--color-lightDark-font);}
.controlBox .condition .adjust .selBox label input[type="radio"]:checked + span { background-color: var(--color-white); border: 1px solid var(--color-blue-main); color: var(--color-blue-main);}
.controlBox .condition .adjust .selBox label span::before {background: none;}
@media screen and (min-width:600px){
	.controlBox .condition { flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
	.controlBox .condition .adjust {width: 48%;}
	.controlBox .condition .desc {text-align: left;}
}
/* 유틸리티(할부상품비교, 할부계산기) */
.calculatorBox .S .compairBox {display: flex; flex-direction: column; flex-wrap: nowrap; margin: 30px 0 0 0;}
.calculatorBox .S .compairBox .resultBox { border: 1px solid var(--color-gray-border); border-radius: 30px;}
.calculatorBox .S .compairBox .resultBox .goods {display: flex;flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; padding: 10px 0; min-height: 65px;}
.calculatorBox .S .compairBox .resultBox .goods img {width: 100%; max-width: 150px;}
.calculatorBox .S .compairBox .resultBox .goods span {color: var(--color-blue-hover); font-size: 18px; font-weight: 700;}
.calculatorBox .S .compairBox .resultBox .result dl > div {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; color: var(--color-gray-font); border-top: 1px solid var(--color-gray-border);}
.calculatorBox .S .compairBox .resultBox .result dl > div.fincePrice {background-color: var(--color-blue-back);}
.calculatorBox .S .compairBox .resultBox .result dl > div.fincePrice dt {background-color: var(--color-blue-back);;color: var(--color-lightDark-font); font-size: 16px; font-weight: 600;}
.calculatorBox .S .compairBox .resultBox .result dl > div.fincePrice dd span{color: var(--color-lightDark-font); font-size: 16px; font-weight: 600;}
.calculatorBox .S .compairBox .resultBox .result dl > div dt {width: 30%; background-color: var(--color-btn-back); text-align: center; color: var(--color-darkGray-font); padding: 10px 0;}
.calculatorBox .S .compairBox .resultBox .result dl > div dt.realRate { padding: 15px 0; background-color: var(--color-blue-main); color: var(--color-white); font-size: 16px; font-weight: 600; border-radius: 0 0 0 30px;}
.calculatorBox .S .compairBox .resultBox .result dl > div dd.realRate { padding: 15px 0; background-color: var(--color-blue-main); color: var(--color-white); font-size: 16px; font-weight: 600; border-radius: 0 0 30px 0;}
.calculatorBox .S .compairBox .resultBox .result dl > div dd.realRate span.unit {padding-right: 20px;}
.calculatorBox .S .compairBox .resultBox .result dl > div dd {width: 70%; text-align: right; color: var(--color-gray-font); padding: 10px 20px 10px 0;}
.calculatorBox .S .compairBox .finceList { margin: 30px 0 0 0; border-radius: 30px; border: 1px solid var(--color-gray-border);}
.calculatorBox .S .compairBox .finceList h3 {text-align: center; margin: 0; padding: 10px 0 0 0; line-height: 45px;}
.calculatorBox .S .compairBox .finceList .index {display: none;}
.calculatorBox .S .compairBox .finceList .finceBox { overflow-y: auto; max-height: 350px;}
.calculatorBox .S .compairBox .finceList ul li {position: relative; border: 1px solid transparent; padding: 5px;}
.calculatorBox .S .compairBox .finceList ul li button {width: 100%; padding: 80px 20px 20px 20px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; border: 1px solid transparent;}
.calculatorBox .S .compairBox .finceList ul li.on button {border: 1px solid var(--color-blue-main); border-radius: 10px;} 
.calculatorBox .S .compairBox .finceList ul li button .rank {position: absolute; content: ''; top: 20px; left: 20px; width: 25px; height: 25px; font-size: 16px; font-weight: 700;}
.calculatorBox .S .compairBox .finceList ul li.best button .rank {color: var(--color-blue-hover); font-size: 17px;}
.calculatorBox .S .compairBox .finceList ul li button .rank::after {content: '위';}
.calculatorBox .S .compairBox .finceList ul li button .logo {position: absolute; top:50%; transform: translateY(-50%); left: 20px;}
.calculatorBox .S .compairBox .finceList ul li button .logo img { max-width: 90px; }
.calculatorBox .S .compairBox .finceList ul li button .name {position: absolute; bottom: 17px; left: 20px; font-weight: 600; word-break: keep-all;}
.calculatorBox .S .compairBox .finceList ul li button .rate {position: absolute; top: 50%; right: 20px; transform: translateY(-50%); color: var(--color-orange-main); font-weight: 500; }
.calculatorBox .S .compairBox .finceList ul li button .cafe {display: none;}
.calculatorBox .S .compairBox .finceList ul li button .costR { position: absolute; top: 20px; right: 20px; color: var(--color-gray-font);}
.calculatorBox .S .compairBox .finceList ul li button .costR::before {content:'실납부이자 '; }
.calculatorBox .S .compairBox .finceList ul li button .pmt { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 5px; font-weight: 700; position: absolute; bottom: 15px; right: 20px; color: var(--color-blue-main); font-size: 16px; font-weight: 600;}
.calculatorBox .S .compairBox .finceList ul li button .pmt::before {content:'월 ';}
.calculatorBox .S .compairBox .finceList ul li button .gap {display: none;}

/* 유틸리티-상환스케줄표 */
.calculatorBox .scheduleBox h3 { width:100%; text-align: left; } 
.calculatorBox .scheduleBox .box {align-items: flex-start; display: flex; flex-direction: column; flex-wrap: nowrap; margin-top: 10px; gap: 10px;}
.calculatorBox .scheduleBox table { min-width: auto;}
.calculatorBox .scheduleBox .graph { width: 100%; }
.calculatorBox .scheduleBox .graph .index {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; margin-bottom: 10px;}
.calculatorBox .scheduleBox .graph .index > div {display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; } 
.calculatorBox .scheduleBox .graph .index em {font-size: 16px;}
.calculatorBox .scheduleBox .graph .index span {display: inline-block; width: 20px; height: 20px; margin-right: 5px; line-height: 1.0; font-size: 16px; font-weight: 300; }
.calculatorBox .scheduleBox .graph .index span.rate {margin-left: 10px; }
.calculatorBox .scheduleBox .graph table { width: 100%; height: 100px; border: 0; }
.calculatorBox .scheduleBox .graph td {padding: 0; text-align: center; border: 0; vertical-align: bottom; }
.calculatorBox .scheduleBox .graph td span{ display:block;  width: 70%; text-indent: -9999px;}
.calculatorBox .scheduleBox .graph span.pay {background-color: var(--color-blue-hover);}
.calculatorBox .scheduleBox .graph span.rate {background-color: var(--color-orange-main);}
.calculatorBox .scheduleBox .list { width: 100%;}
.calculatorBox .scheduleBox .box .left, .calculatorBox .S .scheduleBox .box .right {width: 100%;}
.calculatorBox .scheduleBox .list tbody tr td:first-child {background-color: var(--color-btn-back);}
.calculatorBox .scheduleBox .list tbody tr.cnt6 td { background-color: var(--color-yellow-lineHeight);}
.calculatorBox .scheduleBox .list tbody tr.start td { font-weight: bold; }
.calculatorBox .scheduleBox .list tbody tr.last {background-color: var(--color-blue-tableHead); }
.calculatorBox .scheduleBox .list tbody tr.last td { font-weight: 700; background-color: var(--color-blue-tableHead); }
.calculatorBox .compair .financeBox .index.fince .rate { display: none; font-weight: 500; width: 15%; }

/* 유틸리티-할부계산기 dual */
.calculatorBox.dual { display: flex; min-width: 700px; }
.calculatorBox.dual > div { width: 49%; }
.calculatorBox.dual > div.L { margin-right: 2%; }

.calculatorBox.dual .compairBox .resultBox { border: 1px solid var(--color-gray-border); box-shadow: none; }
.calculatorBox.dual .compairBox .resultBox .goods { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; padding: 10px 0; min-height: 65px; }
.calculatorBox.dual .compairBox .resultBox .goods span { color: var(--color-blue-hover); font-size: 18px; font-weight: 700; }

.calculatorBox.dual .compairBox .resultBox .result > dl div { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; color: var(--color-gray-font); border-top: 1px solid var(--color-gray-border); }
.calculatorBox.dual .compairBox .resultBox .result > dl > div > dt { width: 30%; background-color: var(--color-btn-back); text-align: center; color: var(--color-darkGray-font); padding: 10px 0;}
.calculatorBox.dual .compairBox .resultBox .result > dl > div > dd { width: 70%; text-align: right; color: var(--color-gray-font); padding: 0 20px 0 0; }
.result .gap { position: relative; left: 10px; float: left;}
.result .gap.high { color: var(--color-red);}
.result .gap.low { color: var(--color-blue-hover);}


.calculatorBox.dual .controlBox .condition > div { margin-bottom: 5px; }
.calculatorBox.dual .controlBox .condition .adjust { width: 100%; }
.calculatorBox.dual .scheduleBox .right { display: none; }

.calculatorBox.dual thead tr th { padding: 5px 0;}
.calculatorBox.dual tbody tr td { padding: 5px 0;}

.calculatorBoxWrap { width: 100%; overflow: auto;}

@media screen and (min-width:1000px){
	.calculatorBox.dual .controlBox .condition .adjust { width: 49%; }
}

@media screen and (max-width:380px) {
	.calculatorBox .S .scheduleBox .list thead tr th, .calculatorBox .S .scheduleBox .list tbody tr td {font-size: 12px; padding: 5px;}
}

/* 유틸리티-자동차세 */
.cartaxBox { display: flex; flex-direction: column; flex-wrap: nowrap;}
.cartaxBox .tabButton {margin: 10px 0;}
.cartaxBox table tbody tr td:first-child {background-color: var(--color-btn-back); }
.cartaxBox .resultBox .result {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; background: var(--color-blue-back); padding-top: 20px; border-radius: 30px;}
.cartaxBox .resultBox .result li .taxList { padding: 0 20px 20px 20px; }
.cartaxBox .resultBox .result li .taxList li {display: flex; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; align-items: center; margin-bottom: 20px;}
.cartaxBox .resultBox .result li .taxList li:last-child {margin-bottom: 0;}
.cartaxBox .resultBox .result li.pmt { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; background-color: var(--color-blue-main); padding: 15px 0; border: 1px solid var(--color-blue-main); border-radius: 0 0 30px 30px; text-align: center; font-size: 16px;}
.cartaxBox .resultBox .result li.pmt span {color: var(--color-white); }
.cartaxBox .resultBox .result li.pmt span.sum { font-weight: 700;}
.cartaxBox .resultBox .result li.pmt span.sum .unit {padding-left: 5px;}
.cartaxBox .taxPayBox .taxPay {overflow-x: auto;}
.electricBox .subsidyBox .discountBox .maker {background-color: var(--color-btn-back);}
.electricBox .subsidyBox .discountBox table tbody tr td {border-right: 1px solid var(--color-gray-border); border-top: 1px solid var(--color-gray-border);}
.electricBox .subsidyBox .discountBox table tbody tr th {background: var(--color-blue-tableHead); padding: 8px; white-space: nowrap;}
.electricBox .subsidyBox .discountBox table tbody tr td:hover a {text-decoration: underLine;}
.electricBox .buttonBox a {padding: 10px 15px; max-width: 150px;}
.electricBox .subsidyBox .desc {margin-top: 20px; color: var(--color-gray-font);}

@media screen and (min-width:800px) {
	.calculatorBox.dual thead tr th { padding: 8px;}
	.calculatorBox.dual tbody tr td { padding: 8px;}
	
	.controlBox .condition .adjust .selBox label {font-size: 16px;} 
	.calculatorBox .S .compairBox {flex-direction: row-reverse; flex-wrap: wrap; justify-content: space-between;}
	.calculatorBox .S .compairBox .resultBox {width: 49%; border: 1px solid var(--color-gray-border); box-shadow: none;}
	.calculatorBox .S .compairBox .finceList {width: 49%; margin: 0;}
	.calculatorBox .S .compairBox .finceList h3 {padding-bottom: 10px;}
	.calculatorBox .S .compairBox .finceList .index {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; padding: 10px 20px; background-color: var(--color-blue-back); }
	.calculatorBox .S .compairBox .finceList .index span {width: 100%; font-size: 16px; text-align: right;}
	.calculatorBox .S .compairBox .finceList .index span.rate {width: 20%; color: var(--color-orange-main); font-weight: 500;}
	.calculatorBox .S .compairBox .finceList .index span.pmt {width: 30%; color: var(--color-blue-main); font-weight: 500;}
	.calculatorBox .S .compairBox .finceList ul li button {align-items: center; flex-wrap: nowrap; justify-content: flex-end; flex-direction: row; padding: 15px; font-size: 16px;}
	.calculatorBox .S .compairBox .finceList ul li button .rank { display: inline-block; width: 10%; top: 50%; left: 0; transform: translateY(-50%); color: var(--color-gray-font);}
	.calculatorBox .S .compairBox .finceList ul li button .rate {position: unset; transform: none; width: 20%; text-align: right;}
	.calculatorBox .S .compairBox .finceList ul li button .pmt {position: unset; width: 30%; text-align: right;}
	.calculatorBox .S .compairBox .finceList ul li button .pmt::before {content: '';}
	.calculatorBox .S .compairBox .finceList ul li button .logo {left: 50px;}
	.calculatorBox .S .compairBox .finceList ul li button .name {position: unset; width: 30%; text-align: left; padding-left: 35px;}
	.calculatorBox .S .compairBox .finceList ul li button .costR {display: none;}
	.calculatorBox .S .compairBox .resultBox .result dl > div {font-size: 16px;}
	.calculatorBox .S .compairBox .resultBox .result dl > div dt.realRate {font-size: 20px;}
	.calculatorBox .S .compairBox .resultBox .result dl > div dd.realRate {font-size: 20px;}
	.calculatorBox .S .scheduleBox .box {flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
	.calculatorBox .S .scheduleBox .box .left, .calculatorBox .S .scheduleBox .box .right {width: calc(50% - 5px);}
	.cartaxBox{ flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 20px;}
	.cartaxBox h3, .cartaxBox .tabButton {margin-top: 10px;}
	.cartaxBox .resultBox h3 {margin: 0; padding: 20px;}
	.cartaxBox .resultBox {position: relative; width: calc(45% - 10px); border: 1px solid var(--color-gray-border); border-radius: 30px;}
	.cartaxBox .resultBox .result {background: var(--color-white); margin-top: 0; padding-top: 0;}
	.cartaxBox .resultBox .result li span {font-size: 16px;}
	.cartaxBox .resultBox .result li.pmt span{font-size: 18px;}
	.cartaxBox .taxPayBox {width: calc(55% - 10px); margin: 0; border: 1px solid var(--color-gray-border); border-radius: 30px; padding: 20px;}
	.cartaxBox .baseBox {width: calc(45% - 10px); margin: 0; border: 1px solid var(--color-gray-border); border-radius: 30px; padding: 20px;}
	.cartaxBox .discountBox {width: calc(55% - 10px); border: 1px solid var(--color-gray-border); border-radius: 30px; padding: 20px;}
	.utility table {min-width: auto;}
	.cartaxBox .descBox dl { flex-direction: row; flex-wrap: wrap; align-items: flex-start; margin-top: 0;}
}
@media screen and (min-width:1000px) {
	.controlBox {gap: 30px 0;}
	.controlBox .condition .adjust {margin-bottom: 0; width: 25%;}
	.controlBox .condition .adjust .title {font-size: 16px;}
	.controlBox .condition.sel .adjust.select {width: 50%;}
	.controlBox .condition .adjust.select.etc2 .selBox {flex-wrap: nowrap;}
	.controlBox .condition .adjust .box {flex-wrap: nowrap;}
	.controlBox .condition .adjust .selBox {width: auto;}
	.controlBox .condition .adjust .inputBox input[type="text"] {font-size: 16px;}
	.controlBox .condition .adjust .inputBox select {font-size: 16px;}
	.calculatorBox .S .compairBox .finceList .finceBox::-webkit-scrollbar { width: 5px;}
	.calculatorBox .S .compairBox .finceList .finceBox::-webkit-scrollbar-track { background-color: var(--color-btn-back);}
	.calculatorBox .S .compairBox .finceList .finceBox::-webkit-scrollbar-thumb { background-color: var(--color-gray-border);}
	.calculatorBox .S .compairBox .finceList .finceBox::-webkit-scrollbar-track, .calculatorBox .S .compairBox .finceList .finceBox::-webkit-scrollbar-thumb { border-radius: 10px;}
	.calculatorBox .S .compairBox .finceList ul li button:hover {background-color: var(--color-btn-back); border: 1px solid var(--color-btn-back)}
	.calculatorBox .S .compairBox .resultBox .goods span {font-size: 22px;}
	.cartaxBox .desc {margin-top: 10px;}
	.cartaxBox .descBox .desc {font-size: 14px;}
	.wrap.pc .calculatorBox .S .compairBox .finceList ul li button:hover {background-color: var(--color-btn-back); border-radius: 10px;}
	.wrap.pc .calculatorBox .S .compairBox .finceList ul li.on:hover button {background-color: var(--color-white); border-color: var(--color-blue-main)}
}

/* ==== 카위키 내비게이션 ==== */
.navigationBox .navigation {position: relative; }
.navigationBox .navigation .naviMenu {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px;}
.navigationBox .navigation .naviMenu li {position: relative; background-color: var(--color-white); border: 1px solid transparent; box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 6px, rgba(255, 255, 255, 0.5) 0px 3px 6px; border-radius: 40px;}
.navigationBox .navigation .naviMenu li a {padding: 10px; width: 150px; height: 150px; display: flex; flex-direction: column; justify-content: center; flex-wrap: nowrap;}
.navigationBox .navigation .naviMenu li a div {display: flex; flex-direction: column; align-items: center; gap: 15px;}
.navigationBox .navigation .naviMenu li a div span {font-size: 16px;}
.navigationBox .navigation .naviMenu li a div img {width: 100%; max-width: 30px;}
.adBox {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; margin: 30px 0; gap: 20px;}
.adBox .adCont a img.w { display: none; }
.adBox .adCont a img { max-width: 100%; border-radius: 10px;}
.navigationBox .tabButton .list li a  {padding: 8px 12px;}
.navigationBox .navigation .slideTab em {position: relative; padding-left: 30px; color: var(--color-blue-main); }
.navigationBox .navigation .slideTab em::before {position: absolute; content: ''; top: 50%; left: 10px; transform: translateY(-50%); width: 10px; height: 3px; background-color: var(--color-blue-main); }
.navigationBox .navigation .siteSearchBox .siteSearch {width: 100%; display: flex; justify-content: space-between; align-items: center; flex-direction: row; flex-wrap: nowrap; }
.navigationBox .navigation .siteSearchBox .siteSearch input[type="text"] {font-size: 16px; padding-left: 20px; width: 100%; border-radius: 30px; border: 2px solid var(--color-blue-main);}
.navigationBox .navigation .siteSearchBox .siteSearch button {position: absolute; right: 20px; width: 22px; height: 22px; background: url(../images/icon/icon_search.svg) 50% 50% no-repeat; background-size: contain; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.navigationBox .navigation .naviList {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;}
.navigationBox .navigation .naviList li {display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: center; width: 100%; padding: 30px 0; border-bottom: 1px solid var(--color-gray-border); }
.navigationBox .navigation .naviList li.off {display: none;}
.navigationBox .navigation .naviList li:first-child {padding-top: 0;}
.navigationBox .navigation .naviList li:last-child {border-bottom: none; padding-bottom: 0;}
.navigationBox .navigation .naviList li .thumb {width: 50%; height: 60px;}
.navigationBox .navigation .naviList li .thumb a {display: block; height: 100%; text-indent: -9999px;}
.navigationBox .navigation .naviList li .name {width: 50%;}
.navigationBox .navigation .naviList li .name a {font-size: 16px; font-weight: 600; display: block; word-break: keep-all; text-align: center;}
.navigationBox .navigation .naviList li .comment {margin-top: 10px; width: 100%; text-align: center;}
.navigationBox .navigation .naviList li .comment span {transition: all 0.2s;}
.navigationBox .navigation .naviList li .comment span.highlight {color: var(--color-blue-main);}
.navigationBox .navigation .naviList li .comment div {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 10px;  gap: 5px;} 
.navigationBox .navigation .naviList li .comment div a {padding: 8px 16px; background-color: var(--color-btn-back); border: 1px solid var(--color-btn-back); color: var(--color-darkGray-font); border-radius: 30px; font-weight: 500; white-space: nowrap;} 

@media screen and (max-width:370px) {
	.navigationBox .navigation .naviMenu {gap: 20px;}
	.navigationBox .navigation .naviMenu li a {width: 120px; height: 120px;}
	.navigationBox .navigation .naviMenu li a div {gap: 5px;}
}
@media screen and (min-width:600px) {
	.navigationBox .navigation .slideTab {margin-top: 30px;}
	.navigationBox .navigation .siteSearchBox .siteSearch {justify-content: flex-end;}
	.navigationBox .navigation .siteSearchBox .siteSearch input[type="text"] {max-width: 300px;}
	.navigationBox .navigation .naviMenu {gap: 49px;}
	.navigationBox .navigation .naviList li {  flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;}
	.navigationBox .navigation .naviList li .thumb {width: 15%; height: 80px;}
	.navigationBox .navigation .naviList li .name {width: 30%;}
	.navigationBox .navigation .naviList li .name a {font-size: 18px; text-align: left; word-break: unset;}
	.navigationBox .navigation .naviList li .comment {width: 55%; margin-top: 0; text-align: left; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
	.navigationBox .navigation .naviList li .comment span {font-size: 16px;}
	.navigationBox .navigation .naviList li .comment div {width: 100%; justify-content: flex-start;}
	.navigationBox .navigation .naviList li .comment div a {font-size: 16px;}
}
@media screen and (min-width:1000px) {
	.wrap.pc .navigationBox .navigation .naviMenu li:hover {top: 2px;}
	.wrap.pc .navigationBox .navigation .naviMenu li:hover a div span {font-weight: 600; color: var(--color-lightDark-font);}
	.wrap.pc .navigationBox .navigation .naviList li:hover .name a, .wrap.pc .navigationBox .navigation .naviList li:hover .comment span  {color: var(--color-blue-main);}
	.wrap.pc .navigationBox .navigation .naviList li .comment div a:hover {background-color: var(--color-gray-hover); color: var(--color-lightDark-font); border: 1px solid var(--color-gray-hover);}
	.adBox {flex-direction: row; flex-wrap: nowrap; justify-content: space-between;}
	.adBox .adCont {width: 49%;}
	.adBox .adCont a img.w { display: block; }
	.adBox .adCont a img.m { display: none; }
}

/* ==== 카위키 유튜브 ==== */
.youtubeBox {position: relative;}
.youtubeBox h3 {padding-left: 35px;}
.youtubeBox h3::before {position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: ''; width: 25px; height: 25px; background: url(../images/icon/youtube_normal.svg) no-repeat center/contain;}
.youtubeBox h3.like::before {width: 23px; height: 23px; background: url(../images/icon/youtube_like.svg) no-repeat center/contain;}
.youtubeBox h3.populity::before {width: 26px; height: 26px; background: url(../images/icon/youtube_populity.svg) no-repeat center/contain;}
.youtubeBox .listBox {overflow-x: auto; }
.youtubeBox .listBox ul{width: calc(40% * 5); display: flex; flex-direction: row; flex-wrap: nowrap;justify-content: flex-start; align-items: stretch; gap: 20px; margin-bottom: 5px;}
.youtubeBox .listBox ul.normal {width: 100%; margin-bottom: 0; flex-wrap: wrap;}
.youtubeBox .listBox ul.normal li {width: calc(50% - 10px); border-radius: 15px;}
.youtubeBox .listBox ul li {width: calc(100% / 5); }
.youtubeBox .listBox ul li .box a {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 5px;}
.youtubeBox .listBox ul li .box a .thumbBox {position: relative; transition: all 0.2s;}
.youtubeBox .listBox ul li .box a .thumbBox img {display: block; width: 100%; border-radius: 15px; border: 1px solid var(--color-gray-border); transition: all 0.2s;}
.youtubeBox .listBox ul li .box a .thumbBox::before {opacity: 0; transition: all 0.2s; position: absolute; content: ''; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: url(../images/icon/youtube_normal.svg) no-repeat center/contain; }
.youtubeBox .listBox ul li .box a .thumbBox::after {content:''; position:absolute; width:100%; height:100%; background: rgba(0,0,0,0.2); top:0; left:0; border-radius:15px;}
.youtubeBox .listBox ul li .box a .thumbBox:hover::after { transition: all 0.5s linear; background: none;}
.youtubeBox .listBox ul li .box a .thumbBox:hover::before { opacity: 1; }
.youtubeBox .listBox ul li .box a span.title {min-height: 45px; overflow: hidden; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis;}
.youtubeBox .listBox ul li .box a .copy { position: relative; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; color: var(--color-gray-font); font-size: 12px;}
.youtubeBox .listBox ul li .box a .copy .count {padding-left: 23px;}
.youtubeBox .listBox ul li .box a .copy .count::before {position: absolute; content: ''; top: 50%; left: 0; transform: translateY(-50%); width: 18px; height: 18px; background: url(../images/icon/views.svg) no-repeat center/contain;}
/* youtube nodata */
.youtubeBox .listBox ul li.nodata {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; width: 100%; height: 30vh;}
.youtubeBox .listBox ul li.nodata > div{display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; width: 100%;}
.youtubeBox .listBox ul li.nodata > div span {font-size: 18px; font-weight: 700;}
.youtubeBox .listBox ul li.nodata > div img {width: 100%; max-width: 30px; margin-right: 10px;}
.youtubeBox .listBox::-webkit-scrollbar {height: 5px;}
.youtubeBox .listBox::-webkit-scrollbar-track {background-color: var(--color-btn-back);}
.youtubeBox .listBox::-webkit-scrollbar-thumb {background-color: var(--color-gray-border);}
.youtubeBox .listBox::-webkit-scrollbar-track, .youtubeBox .listBox::-webkit-scrollbar-thumb {border-radius: 10px;}

@media screen and (min-width:800px) {
	.youtubeBox .listBox ul{width: calc(22.75% * 5);}
	.youtubeBox .listBox ul.normal li {width: calc(25% - 15px);}
} 
@media screen and (min-width:1000px) {
	.youtubeBox h3 {padding-left: 45px;}
	.youtubeBox h3::before {width: 30px; height: 30px;}
	.youtubeBox h3.like::before {width: 30px; height: 30px;}
	.youtubeBox h3.populity::before {width: 35px; height: 35px;}
	.youtubeBox .listBox ul {margin-bottom: 100px;}
	.youtubeBox .listBox ul:last-child {margin-bottom: 0;}
	.youtubeBox .listBox ul {width: 100%;}
	.youtubeBox .listBox ul.normal {width: 100%;}
	.youtubeBox .listBox ul.normal li {width: calc(20% - 16px);}
	.youtubeBox .listBox ul li.nodata > div span {font-size: 30px;}
	.youtubeBox .listBox ul li.nodata > div img {max-width: 100px; margin-right: 20px;}
}

/* ==== 판매, 할인조건 ==== */
.discountBox .brand {margin-top: 20px;}
.discountBox .box {position: relative; padding-top: 60px;}
.discountBox .box .filterSelect {position: absolute; right: 0; top: 10px; }
.discountBox .box .filterSelect select { color: var(--color-lightDark-font); padding: 8px 30px 8px 30px; letter-spacing: 1px; font-weight: 600;}
.discountBox .discountList .list {position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;}
.discountBox .discountList .list > li {position: relative; width: 100%; padding: 30px 0; border-bottom: 1px solid var(--color-gray-border);}
.discountBox .discountList .list li .modelBox .buttonBox { width: 100%;}
.discountBox .discountList .list li .modelBox {position: relative; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; max-width: 600px; margin: 0 auto;/*  background-color: var(--color-blue-back); padding: 20px; */}
.discountBox .discountList .list li .modelBox .modelInfo {width: 100%;}
.discountBox .discountList .list li .modelBox .modelInfo .type {position: absolute; top:0; left: 0; font-weight: 700;}
.discountBox .discountList .list li .modelBox .modelInfo .img {margin: 0 auto; max-width: 230px; padding-top: 45px;} 
.discountBox .discountList .list li .modelBox .modelInfo img {width: 100%;}
.discountBox .discountList .list li .modelBox .modelInfo .info {display: flex; justify-content: center; flex-direction: column; align-items: flex-end; flex-wrap: nowrap; margin: 10px 0;gap: 5px;}
.discountBox .discountList .list li .modelBox .modelInfo .info .maxDiscount { position: absolute; top: 0; right: 0; display: inline-block; padding: 5px 20px; background-color: var(--color-yellow-back); color: var(--color-orange-main); font-size: 16px; border-radius: 5px;}
.discountBox .discountList .list li .modelBox .modelInfo .info .maxDiscount span em {font-weight: 700;}
.discountBox .discountList .list li .modelBox .modelInfo .info span {font-size: 16px; font-weight: 500;}
.discountBox .discountList .list li .modelBox .modelInfo .info span.title {font-size: 18px; font-weight: 700;}
.discountBox .discountList .list li .modelBox button { width: 48%;}
.discountBox .discountList .list li .modelBox button.btnGoEstimate {display: none;}
.discountBox .discountList .list li .modelBox button.detailBtn.arrow span::after {background: url(../images/icon/arrow_down_blue.svg) no-repeat center / contain; transform: translateY(-50%);}
.discountBox .discountList .list li:has(.discount:not(.off)) button.detailBtn.arrow span::after {transform: translateY(-50%) rotate(180deg);}
.discountBox .discountList .list li:has(.discount:not(.off)) button.btnGoEstimate {display: block;}
.discountBox .discountList .list li .modelBox .openMore {position: absolute; right: 10px;}
.discountBox .discountList .list li .discount {margin-top: 20px;}
.discountBox .discountList .list li .discount > li { position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; margin-bottom: 10px;}
.discountBox .discountList .list li .discount > li.blank {align-items: center; justify-content: center; font-size: 16px; font-weight: 600; height: 20vh; gap: 5px; background-color: var(--color-blue-back);}
.discountBox .discountList .list li .discount > li.blank img {width: 30px;}
.discountBox .discountList .list li .discount > li:last-child {margin-bottom: 0;}
.discountBox .discountList .list li.term {position: relative;}
.discountBox .discountList .list li.term .linkBox {position: absolute; bottom: 5px; right: 10px; z-index: 1;}
.discountBox .discountList .list li .discount li.term .value li {position: relative;}
.discountBox .discountList .list li .discount li.term .value li span {font-weight: 600; padding-left: 15px;}
.discountBox .discountList .list li .discount li.term .value li span::before {position: absolute; content: ''; top: 50%; left: 10px; transform: translateY(-50%); width: 5px; height: 5px; background-color: var(--color-lightDark-font); border-radius: 50%;}
.discountBox .discountList .list li .discount li .name { width: 100%; text-align: center; background-color: var(--color-blue-back); padding: 10px 0; font-size: 16px; font-weight: 600;}
.discountBox .discountList .list li .discount li .name .tooltip {position: relative; font-size: 16px; font-weight: 600; padding-right: 25px; color: var(--color-lightDark-font);}
.discountBox .discountList .list li .discount li .name .tooltip::after {position: absolute; content: ''; top: 50%; right: 0; transform: translateY(-50%); width: 18px; height: 18px; background: url(../images/icon/tooltip.svg) no-repeat center/contain;}
.discountBox .discountList .list li .discount li .value {width: 100%; }
.discountBox .discountList .list li .discount li .value li {display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; justify-content: space-between; padding: 10px;}
.discountBox .discountList .list li .discount li .value li:last-child {margin-bottom: 0; }
.discountBox .discountList .list li .discount li .value li span.price {font-weight: 500; color: var(--color-blue-hover);}
.discountBox .discountList .list li .discount li .value li.reMark {width: 100%;}
.discountBox .discountList .list li .discount li .value li span.remark {width: 100%; text-align: center; color: var(--color-dark-font); font-weight: 600; letter-spacing: 0.5px;}
.discountBox .discountList .list li .discount li .text {width: 100%; padding: 10px; background-color: var(--color-btn-back); color: var(--color-lightDark-font);}
.discountBox .discountList .list li.nodata { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px}
.discountBox .discountList .list li.nodata img {width: 30px; height: 30px;}
.discountBox .discountList .list li.nodata span {font-size:16px; font-weight: 700;}
.discountBox .descBox {margin-top: 30px;}
/* 예상납기 */
.discountBox .termTable {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; width: 100%; margin: 30px 0; gap: 30px;}
.discountBox .termTable table {width: 100%; min-width: auto;}
.discountBox .termTable table tr:first-child th {background-color: var(--color-blue-tableHead); font-size: 16px; border: 1px solid var(--color-blue-tableHead);}
.discountBox .termTable table tr .titleBox {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;}
.discountBox .termTable table tr .titleBox img {width: 100%; max-width: 55px;}
.discountBox .termTable table.ge tr:first-child th {background-color: var(--color-gray-border); border: 1px solid var(--color-gray-border);}
.discountBox .termTable table.ki tr:first-child th {background-color: var(--color-yellow-back); border: 1px solid var(--color-yellow-back);}
.discountBox .termTable table tr th {padding: 5px 0; border-radius: 15px 15px 0 0;}
.discountBox .termTable table tbody tr td {padding: 8px; text-align: center; border-bottom: 1px solid var(--color-gray-border); }
.discountBox .termTable table tbody tr td b {font-size: 14px;}
.discountBox .termTable table tbody tr td > div { text-align: left; font-weight: 500; font-size: 14px;}
.discountBox .termTable table tbody tr td > div span {display: block; color: var(--color-gray-font); font-size: 13px; font-weight: 300;}
.discountBox .termTable table tbody tr td:first-child { background-color: var(--color-btn-back);}
@media screen and (min-width:600px) {
	.discountBox .box {display: flex; flex-direction: row; flex-wrap: nowrap;  justify-content: space-between; padding-top: 0; margin-top: 30px;}
	.discountBox .box .filterSelect {position: relative; top: unset; right: unset;}
	.discountBox .box .tabButton {margin: 30px 0 0 0;}
}
@media screen and (min-width:800px) {
	.discountBox .descBox dl dt {width: 20%;}
	.discountBox .descBox dl dd {width: 65%; margin-bottom: 0;}
}
@media screen and (min-width:1000px) {
	.discountBox .discountList .list {margin-top: 30px; gap: 30px;}
	.discountBox .discountList .list > li { border: 1px solid var(--color-gray-border); padding: 20px; border-radius: 30px; }
	.discountBox .discountList .list > li:last-child {margin-bottom: 0;}
	.discountBox .discountList .list li .modelBox {max-width: none; gap: 10px;}
	.discountBox .discountList .list li .modelBox .buttonBox { justify-content: flex-end;}
	.discountBox .discountList .list li .modelBox .modelInfo .img { max-width: 250px; margin: inherit; position: absolute; top: 50%; transform: translateY(-50%); left: 90px; padding-top: 0;}
	.discountBox .discountList .list li .modelBox .modelInfo .info {margin: inherit;}
	.discountBox .discountList .list li .modelBox .modelInfo .info span {font-size: 18px;}
	.discountBox .discountList .list li .modelBox .modelInfo .info span.title {font-size: 20px;}
	.discountBox .discountList .list li .modelBox button {max-width: 180px; font-size: 18px;}
	.discountBox .discountList .list li .modelBox .modelInfo .type {font-size: 16px;}
	.discountBox .discountList .list li .modelBox .modelInfo .info .maxDiscount {position: inherit; top: unset; right: unset;}
	.discountBox .discountList .list li .discount { border-top: 1px solid var(--color-gray-border);}
	.discountBox .discountList .list li .discount > li { flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-end; border-bottom: 1px solid var(--color-gray-border); margin-bottom: 0;}
	.discountBox .discountList .list li .discount > li::after { position: absolute; content: ''; top: 0; left: 0; width: 25%; background-color: var(--color-blue-back);}
	.discountBox .discountList .list li .discount > li:last-child {border: none;}
	.discountBox .discountList .list li .discount > li.blank {flex-direction: column; font-size: 18px;}
	.discountBox .discountList .list li .discount > li.blank img {width: 40px;}
	.discountBox .discountList .list li .discount li .name {width: 25%; display: flex; justify-content: center; align-items: flex-start; z-index: 1; padding: 20px;}
	.discountBox .discountList .list li .discount li .value {width: 75%; padding: 10px 0;}
	.discountBox .discountList .list li .discount li .value li {padding: 10px 0 10px 20px;}
	.discountBox .discountList .list li .discount li .value li span {font-size: 16px; word-break: keep-all; letter-spacing: -0.5px;}
	.discountBox .discountList .list li.term .linkBox {top: 50%; transform: translateY(-50%);}
	.discountBox .descBox dl {gap: 20px;}
	.discountBox .descBox dl dt {width: 20%;}
	.discountBox .termTable {flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 20px;}
	.wrap.pc .discountBox .discountList .list li .modelBox button.btnGoEstimate:hover {background-color: var(--color-blue-hover); color: var(--color-white);}
	.wrap.pc .discountBox .discountList .list li .discount li.term .linkBox:hover {background-color: var()}
}

/* ==== index ==== */
/* 메인 배너 */
.mySignSlide {position: relative; }
.mySignSlide .shareSummary{ overflow: hidden; position: relative;}
.mySignSlide .shareSummary ul li { display: block;}
.mySignSlide .shareSummary ul li a { font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.mySignSlide .shareSummary ul li a img.webAd { display: none; }
.mySignSlide .shareSummary ul li a img.mobileAd { display: block; margin-top: 20px; border-radius: 10px;}
.mySignSlide .pageSharing { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);}
.mySignSlide .pageSharing .pageBtn { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px;}
.mySignSlide .pageSharing .pageBtn button { width: 10px; height: 10px; border-radius: 20px; background: var(--color-gray-border);font-size: 0;text-indent: -9999px;color: transparent;}
.mySignSlide .pageSharing .pageBtn button.on {background-color: var(--color-white);}


.estimateTop .model .pageBtn { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px;}
.estimateTop .model .pageBtn button { width: 10px; height: 10px; border-radius: 20px; background: var(--color-gray-border); font-size: 0; text-indent: -9999px; color: transparent;}
.estimateTop .model .pageSharing { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);}
.estimateTop .model .pageSharing .pageBtn button.on {background-color: var(--color-white);}

/* 브랜드 */
.main .brandList .brandTop {position: relative; width: 100%; }
.main .brandList .brandTop h3 {text-align: left;}
.main .brandList .brandTop .linkBox {position: absolute; top: 30px; right: 0;}
/* 신차, 유틸리티 */
.homeNewcar { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start;}
.homeNewcar .newcarBox { width: 100% }
.homeNewcar .newcarBox .list { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 20px;}
.homeNewcar .newcarBox .list li {width: 100%; position: relative; background-color: #E8F7F2; border-radius: 10px; transition: all 0.2s; }
.homeNewcar .newcarBox .list li a {display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; padding: 20px; gap: 5px;}
.homeNewcar .newcarBox .list li a .date {color: #1AB359;}
.homeNewcar .newcarBox .list li a .date span {display: block; background-color: var(--color-white); padding: 5px 10px; border-radius: 10px; font-weight: 700;}
.homeNewcar .newcarBox .list li a .title {font-size: 16px; font-weight: 700;}
.homeNewcar .newcarBox .list li a .car img {width: 100%; position: absolute; bottom: 10px; right: 0; max-width: 150px;}
.homeNewcar .newcarBox .list li a dl { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.homeNewcar .newcarBox .list li a dl .summaryDetail {width: 100%; display: flex ; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;  align-items: center; gap: 10px;}
.homeNewcar .newcarBox .list li a dl .summaryDetail dt{ color: var(--color-darkGray-font);}
.homeNewcar .newcarBox .list li a dl .summaryDetail dd{display: flex; gap: 3px;}
.homeNewcar .newcarBox .list li a dl .summaryDetail dd span {display: block;}
.homeNewcar .utilityBox { width: 100%; }
.homeNewcar .utilityBox .list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; gap: 20px;}
.homeNewcar .utilityBox .list li {position: relative; display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: nowrap; width: calc(33.3% - 13.3px); border-radius: 30px; background-color: var(--color-blue-back); box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;}
.homeNewcar .utilityBox .list li a {width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; padding: 5px; gap: 5px;}
.homeNewcar .utilityBox .list li a img {width: 100%; max-width: 30px;}
.homeNewcar .utilityBox .list li a span{width: 100%; text-align: center; display: block; padding: 55px 0 10px 0; font-weight: 500;}
.homeNewcar .utilityBox .list li a span::after {position: absolute; content:''; top:20px; left:50%; transform: translateX(-50%); width: 35px; height: 35px;}
.homeNewcar .utilityBox .list li.newcar a span::after {background: url(../images/widget/newcar.svg) no-repeat center/contain;}
.homeNewcar .utilityBox .list li.calc a span::after {background: url(../images/widget/calc.svg) no-repeat center/contain;}
.homeNewcar .utilityBox .list li.tax a span::after {background: url(../images/widget/tax.svg) no-repeat center/contain;}
.homeNewcar .utilityBox .list li.fast a span::after {background: url(../images/widget/fast.svg) no-repeat center/contain;}
.homeNewcar .utilityBox .list li.condition a span::after {background: url(../images/widget/condition.svg) no-repeat center/contain;}
.homeNewcar .utilityBox .list li.talk {background-color: var(--color-yellow-talk);}
.homeNewcar .utilityBox .list li.talk a span {color: var(--color-lightDark-font)}
.homeNewcar .utilityBox .list li.talk a span::after {background: url(../images/widget/talk.svg) no-repeat center/contain; width: 30px; height: 30px;}
/* 광고배너 예외처리 */
.main .adBox2 {margin-top: 50px;}
/* 뉴스 */
.newsHome .list { display: none; }
.newsHome .list.on { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; gap: 20px; }
.newsHome .list li {width: 100%;}
.newsHome .list li a { position: relative; height: 74px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-left: 120px; }
.newsHome .list li a .thumb { transition: background-size 0.3sease-in-out; overflow: hidden; width: 100%; max-width: 112px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); box-shadow: rgba(0, 0, 0, 0.11) 0px 1px 3px; border-radius: 10px; height: 74px; }
.newsHome .list li a .subject {font-size: 16px; display: -webkit-box; overflow: hidden; white-space: normal; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; word-break: keep-all;}
.newsHome .list li a .desc { display: -webkit-box; overflow: hidden; white-space: normal; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: keep-all; margin: 0;}
/* 유튜브 */
.main .youtubeBox .populity { position: relative; }
.main .youtubeBox .populity .linkBox {  position: absolute; top: 2px; right: 0; }
/* 이달의 인기차종 */
.popularBox {overflow: hidden;}
.popularBox .popSlide { position: relative; width: 100%; overflow: hidden; }
.popularBox .popSlide ul {position: relative; display: flex;}
.popularBox .popSlide ul li { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 5px; padding: 0 10px;} 
.popularBox .popSlide ul li:hover a .image img:not(.brand) {transition: all .3s ease; transform: scale(1.1);}
.popularBox .popSlide ul li a {width: 100%;}
.popularBox .popSlide ul li a .image {display: flex; flex-direction: column; align-items: flex-start;}
.popularBox .popSlide ul li a .image img {margin: 0 auto; width: 100%; max-width: 180px;}
.popularBox .popSlide ul li a .image .brand {width: 100%; max-width: 55px; margin: unset;}
.popularBox .popSlide ul li a .copyBox {display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 5px; padding-left: 5px;}
.popularBox .popSlide ul li a .copyBox .name {font-size: 16px; font-weight: 700;}
.popularBox .popSlide ul li a .copyBox dl {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; width: 100%;}
.popularBox .popSlide ul li a .copyBox dl .summaryDetail { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 5px;}
.popularBox .popSlide ul li a .copyBox dl .summaryDetail dt {color: var(--color-darkGray-font);}
.popularBox .popSlide ul li a .copyBox dl .summaryDetail dd {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 5px;}

@media screen and (min-width:600px) { 
	.homeNewcar .newcarBox .list {flex-direction: row; flex-wrap: nowrap; align-items: stretch;}
	.homeNewcar .newcarBox .list li {background-color: var(--color-white); padding: 10px;}
	.homeNewcar .newcarBox .list li a {padding: 0;}
	.homeNewcar .newcarBox .list li a .date {width: 100%; text-align: center; margin-bottom: 85px;}
	.homeNewcar .newcarBox .list li a .date span {background-color: #E8F7F2; font-size: 16px;}
	.homeNewcar .newcarBox .list li a .car img {top: 55px; left: 50%; transform: translateX(-50%); bottom: unset; right: unset;}
	.homeNewcar .newcarBox .list li a .title {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
	.homeNewcar .utilityBox .list {flex-wrap: nowrap;}
	.homeNewcar .utilityBox .list li {width: calc(16.6% - 16.6px);}
	.popularBox .popSlide {width: calc(100% / 2); left: calc(100% / 2);overflow: visible;}
}
@media screen and (min-width:1000px) {
	.main .brandList .brandTop .linkBox {top: 50px;}
	.mySignSlide .shareSummary ul li a img.webAd { display: block; margin-top: 20px; border-radius: 10px;}
	.mySignSlide .shareSummary ul li a img.mobileAd { display: none; }
	.mySignSlide .pageSharing { bottom: 10px;}
	.homeNewcar {flex-direction: row; flex-wrap: nowrap; gap: 30px;}
	.homeNewcar .newcarBox {width: calc(70% - 15px);}
	.homeNewcar .newcarBox .list {flex-direction: row;}
	.homeNewcar .utilityBox {width: calc(30% - 15px);} 
	.homeNewcar .utilityBox .list {flex-wrap: wrap;}
	.homeNewcar .utilityBox .list li {width: calc(33.3% - 13.3px);}
	.newsHome .list li { width: calc(50% - 10px); }
	.news .tabButton, .press .tabButton{margin: 0 0 10px 0;}
	.popularBox .popSlide {width: calc(100% / 4); overflow: visible; left: calc((100% / 4) * 3); }
	.wrap.pc .homeNewcar .utilityBox .list li:hover {top: 2px;}
	.wrap.pc .homeNewcar .newcarBox .list li:hover {background-color: var(--color-btn-back); }
	.wrap.pc .homeNewcar .newcarBox .list li:hover a span {background-color: var(--color-btn-back);}
	.wrap.pc .homeNewcar .utilityBox .list li:hover a span {color: var(--color-blue-hover);}
	.wrap.pc .homeNewcar .utilityBox .list li.talk:hover a span {color: var(--color-dark-font);}
	.wrap.pc .newsHome .list li:hover a .subject, .wrap.pc .newsHome .list li:hover a .desc { text-decoration: underline; }
}

/* 견적 select */
.selectList .list {padding: 10px; border: 1px solid var(--color-gray-border); border-radius: 15px; margin-bottom: 10px;}
.selectList .list .select {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; margin-bottom: 15px;}
.selectList .list .select:last-child {margin-bottom: 0;}
.selectList .list .select .title {font-size: 14px; color: var(--color-gray-font); font-weight: 600; width: 70px;}
.selectList .list .select .choice {width: calc(100% - 70px);}
.selectList .list .select .choice select {width: 100%;}
.selectList .list .select.count2 .choice {display: flex; justify-content: space-between;}
.selectList .list .select.count2 .choice select {width: 49%;}
.selectList .list .take {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; margin-bottom: 15px; color: var(--color-gray-font);}
.selectList .list .take:last-child {margin-bottom: 0;}
.selectList .list .take .title {width: 20%; font-weight: 600; font-size: 14px;}
.selectList .list .take .desc {width: 50%; font-weight: 300; padding-left: 10px; word-break: break-all;}
.selectList .list .take .price {width: 30%; text-align: right; color: var(--color-lightDark-font);}
@media screen and (min-width:800px) {
	.selectList {display: flex; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap;}
	.selectList .list {width: 100%; max-width: 360px; margin-right: 10px;}
}

/* ====팝업창==== */
.popupExample {padding: 10px 15px; color: var(--color-white); background: var(--color-blue-main); border-radius: 15px;} /* 가이드 확인용 */
.alertExample { padding: 10px 15px; color: var(--color-white); background: var(--color-blue-main); border-radius: 15px;} /* 가이드 확인용 */
.comfirmExample { padding: 10px 15px; color: var(--color-white); background: var(--color-blue-main); border-radius: 15px;} /* 가이드 확인용 */
/* 팝업공통 */
.popupLayer { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; box-shadow: 6px 6px 20px 0px rgba(0,0,0,.45); }
.popupLayer .dimBg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-dark-font); opacity: .7;  }
.popupLayer .frame { position: absolute; top: 50%; left: 50%; min-width:300px; height: auto; background-color: var(--color-white); z-index: 10; border-radius: 5px;}
.popupLayer .head {position: relative; padding: 20px;}
.popupLayer .head h3 { text-align: left; font-size: 20px; margin: 0; font-weight: 500; color: var(--color-blue-hover); font-weight: 700; padding-right: 30px;}
.popupLayer .head .btnClose { width: 40px; height: 40px; background: url(../images/icon/close.svg) 50% 50% no-repeat; background-size: 20px; font-size: 0; text-indent: -9999px; padding: 0; position: absolute; top: 15px; right: 10px;}
.popupLayer .content { padding: 0 20px 0 20px; }
.popupLayer .content::-webkit-scrollbar { width: 5px;}
.popupLayer .content::-webkit-scrollbar-track { background-color: var(--color-btn-back);}
.popupLayer .content::-webkit-scrollbar-thumb { background-color: var(--color-gray-border);}
.popupLayer .content::-webkit-scrollbar-track, .popupLayer .content::-webkit-scrollbar-thumb { border-radius: 10px;}
.popupLayer .content .desc {margin: 0 0 10px 0; font-size: 13px;}
.popupLayer .content dl {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 15px; margin-bottom: 15px;}
.popupLayer .content dl dt { width: calc(25% - 7.5px); color: var(--color-darkGray-font);}
.popupLayer .content dl dt.wide { width: 100%; }
.popupLayer .content dl dt .necessary {color: var(--color-blue-hover); font-weight: 300;}
.popupLayer .content dl dd {width: calc(75% - 7.5px);}
.popupLayer .content dl dd.takeover {display: flex; flex-wrap: wrap; justify-content: space-between;}
.popupLayer .content dl dd.carCheck {text-align: left; background-color: var(--color-blue-back); padding: 10px; border-radius: 10px;}
.popupLayer .content dl dd.carCheck .list .name2 { font-weight: 600; }
.popupLayer .content dl dd.carCheck .list .option { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; margin-top: 5px; }
.popupLayer .content dl dd.carCheck .list .option .title { width: 45px; color: var(--color-darkGray-font); }
.popupLayer .content dl dd.carCheck .list .option .contents {width: calc(100% - 45px);}
.popupLayer .content dl dd.carCheck .cost {display: flex; justify-content: flex-end; align-items: center;}
.popupLayer .content dl dd.carCheck .cost .sumText { margin-right: 5px; }
.popupLayer .content dl dd.carCheck .cost .price { position: relative; color: var(--color-blue-main); font-size: 18px; font-weight: 700; padding-right: 23px;}
.popupLayer .content dl dd.carCheck .cost .price::before { content: "합계"; font-size: 16px; position: absolute; top: 2px; left: -35px; color: var(--color-lightDark-font); font-weight: 400; }
.popupLayer .content dl dd.carCheck .cost .price::after { content: "원"; position: absolute; top: 0; right: 5px; }
.popupLayer .content dl dd.wide { width: 100%; }
.popupLayer .content dl dd.counsel {display: flex; display: flex; flex-wrap: wrap; gap: 10px;}
.popupLayer .content dl dd input[type="text"]{width: 100%;}
.popupLayer .content dl dd textarea {min-height: 100px; border-radius: 10px; border: 1px solid var(--color-gray-border); padding: 10px;}
.popupLayer .content .agreeBox label span {display: block; padding-left: 40px; font-size: 16px; color: var(--color-gray-font);} 
.popupLayer .agree {display: flex; flex-direction: column; flex-wrap: nowrap;}
.popupLayer .agree .agreeAll { display: flex; justify-content: space-between;}
.popupLayer .agree .agreeAll .more { position: relative; }
.popupLayer .agree .agreeAll .more.open::after { content:""; position: absolute; top: 50%; transform: translateY(-50%) rotate(270deg); right: 0px; width: 24px; height: 24px; background: url(../images/icon/arrow_gray.svg) 0 0 no-repeat; background-size: contain;}
.popupLayer .agree .agreeAll .more.close::after { content:""; position: absolute; top: 50%; transform: translateY(-50%) rotate(90deg); right: 0px; width: 24px; height: 24px; background: url(../images/icon/arrow_gray.svg) 0 0 no-repeat; background-size: contain;}
.popupLayer .agree .agreeAll label {display: flex; align-items: center; font-size: 16px; font-weight: 600;}
.popupLayer .agree .agreeAll label .necessary {color: var(--color-blue-main); margin-right: 5px;}
.popupLayer .agree .privacy ul li {font-size: 12px; color: var(--color-gray-font);}
.popupLayer .agree .privacy1, .popupLayer .agree .privacy2 {margin-top: 15px;}
/* 알림팝업 */
.popupLayer .buttonBox {padding: 20px 0;}
.popupLayer .buttonBox button { max-width: 150px;}
.popupLayer.alert .content .desc {padding-top: 30px; font-size: 16px; text-align: center; margin: 0;}
/* 확인팝업 */
.popupLayer.confirm .content .desc {padding-top: 30px; font-size: 16px; font-weight: 500; color: var(--color-gray-font); text-align: center; margin-bottom: 0; overflow: hidden;}
.popupLayer.confirm .buttonBox button.cancle { background: var(--color-white); font-weight: 600; font-size: 16px; color: var(--color-blue-main); border: 1px solid var(--color-blue-main); border-radius: 30px;}
.wrap.pc .popupLayer.confirm .buttonBox button.cancle:hover {background: var(--color-gray-hover); border: 1px solid var(--color-gray-hover);}
/* 팝업로그인 */
.popupLayer.login .content { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 20px; padding: 0 20px 20px 20px;}
.popupLayer.login .content > button { position: relative; width: 100%; line-height: 50px; font-size: 16px; padding-left: 25px;}
.popupLayer.login .content .kakao { background-color: var(--color-yellow-talk);  color: #392020;} 
.popupLayer.login .content .naver { background-color: #03C75A;  color: var(--color-white);} 
.popupLayer.login .content .kakao::after {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 50px; height: 50px;  background:  url(../images/icon/icon_kakao.svg) 0 0 no-repeat; background-size: contain; }
.popupLayer.login .content .naver::after {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 50px; height: 50px; background:  url(../images/icon/icon_naver.svg) 0 0 no-repeat; background-size: contain; }
/* 로딩팝업 */
.loadingPopup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 200; }
.loadingPopup .dimBg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-dark-font); opacity: .7;}
.loadingPopup .frame::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 55px; height: 55px; background: url(../images/etc/loading.gif) no-repeat center/contain;}
/* 갤러리 팝업 */
.popupLayer.photo .head { padding: 0; }
.popupLayer.photo .head .btnClose {padding: 0; width: 40px; height: 40px; top: 0; right: 0; background-size: 20px; background: url(../images/icon/icon_close_white.svg) 50% 50% no-repeat;}
.popupLayer.photo .content {padding: 0;}
.popupLayer.photo .content img { width: 100%;}
.popupLayer.photo .arr { position: absolute; width: 60px; top: 50%; background: transparent; z-index: 10; font-size: 0; line-height: 0; text-indent: -9999px;}
.popupLayer.photo .arr::before {content: ""; position: absolute; top: 50%; left: -20px; width: 40px; height: 40px; border-radius: 50%; background: url(../images/icon/arrow_drop_down_white.svg) center no-repeat; background-size: 26px auto; transform: translateY(-50%) rotate(90deg); background-color: var(--color-dark-font);}
.popupLayer.photo .arr.next {right: 0px;}
.popupLayer.photo .arr.next::before { left: auto; right: -20px; transform: translateY(-50%) rotate(270deg);}

.popupLayer.EstmDocu { z-index: 99; }
@media screen and (min-width:600px) {
	.popupLayer .content dl dt { font-size: 15px; width: calc(15% - 7.5px)}
	.popupLayer .content dl dd { font-size: 15px; width: calc(85% - 7.5px)}
	.popupLayer .content dl dd.carCheck .list .option {flex-direction: row; font-size: 14px;}
	.popupLayer .content dl dd input::placeholder {font-size: 15px;}
	.popupLayer .content dl dd textarea::placeholder {font-size: 15px;}
}

.popupSlide {
  touch-action: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-white);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 99;
  overflow: hidden;
}


.popupSlide.active {
  transform: translateY(0);
}

.popupSlide .panelContent {
  height: 100%;
  overflow-y: auto;
  padding: 40px 20px 20px 20px;
  box-sizing: border-box;
  padding-bottom: 20px;
  background-color: var(--color-white);
  height: 70vh; /* 화면의 60% 높이 */
}

.popupSlide .closeBtn {
  display: block;
  width: 40px;
  height: 5px;
  background: #ccc;
  border-radius: 999px;
  margin: 10px auto 15px;
  text-indent: -9999px;
}
.popupSlide .panelContent h5{
	padding-top: 15px;
	font-size: 16px;
}
.popupSlide .panelContent .bar {
	padding: 10px 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, #ffffff 0%, #f9f9f9 100%);
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    z-index: 10;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}

.popupSlide .panelContent .bar .name {
    width: 70%;
    font-weight: 600;
    font-size: 16px;
    color: #333;
}

.popupSlide .panelContent .bar .box {
    width: 30%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.popupSlide .panelContent .bar .box span.sum {
    color: var(--color-blue-main);
    font-weight: 700;
    font-size: 16px;
}
.popupSlide .buttonBox {
	background-color: var(--color-white);
	padding: 10px;
}

.popupSlide .buttonBox button,.popupSlide .buttonBox a {
  	background-color: var(--color-white);
    border-radius: 0px;
    font-size: 14px;
    flex: 1;
    padding: 10px 15px;
    border: 1px solid var(--color-white);
    line-height: 1.5;
    white-space: nowrap;
    color: var(--color-dark-font);
    border-radius: 10px;
}

.popupSlide .buttonBox button.gray {
    background-color: var(--color-btn-back);
}
.popupSlide .buttonBox a.blue {
    background-color: var(--color-blue-main);
    color: var(--color-white);
}

body.modal-open {
  overflow: hidden;
  touch-action: none; /* 터치 스크롤 차단 */
  position: fixed;
  width: 100%;
}
/* 프로모션 예외처리 */
.wrap.promotion.finance h3 {margin: 0;}
/* 이벤트 */
.eventList { display: flex; flex-wrap: nowrap; flex-direction: column; align-items: center; margin-top: 30px; }
.eventList li.exit { background-color: var(--color-gray-border); border-radius: 15px;} 
.eventList li { position: relative; padding-bottom: 30px;}
.eventList li:last-child {padding-bottom: 0;}
.eventList li.exit::before {content: "종료된 이벤트 입니다."; position: absolute; top: 50%; left: 50%; width: 100%; text-align: center; z-index: 9; color: var(--color-white); font-size: 30px; font-weight: 500; transform: translate(-50%, -50%); text-shadow: 3px 3px 5px rgba(0, 0, 0, .2); }
.eventList li.exit a { position: relative; z-index: 8; pointer-events: none; opacity: 0.2; }
.eventList li .thumb {width: 100%; max-width: 600px; border-radius: 30px;}
.eventList li .thumb img {box-shadow: rgba(0, 0, 0, 0.02) 0px 6px 24px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; width: 100%; display: block; border-radius: 30px; }
.eventList li .text { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; width: 100%; gap: 5px; }
.eventList li .text .subj { font-size: 18px; padding: 0; font-weight: 600; text-align: center;}
.eventList li .text .desc { font-size: 14px; margin: 0; color: var(--color-gray-font); }
.eventList li .text .term { font-size: 14px; color: var(--color-gray-font); }
.eventList li:not(:first-child) { border-top: 1px dashed var(--color-gray-border); padding-top: 30px;}
.eventList li a { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 10px;}
.eventTab {overflow-x: auto; padding-bottom: 5px; margin-top: 30px;}
.eventTab::-webkit-scrollbar { height: 5px;}
.eventTab::-webkit-scrollbar-track { background-color: var(--color-btn-back);}
.eventTab::-webkit-scrollbar-thumb { background-color: var(--color-gray-border);}
.eventTab::-webkit-scrollbar-track, .eventTab::-webkit-scrollbar-thumb { border-radius: 10px;}
.eventTab ul { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 10px 5%;}
.eventTab ul li.exit { display: none; }
.eventTab ul li .thumb { display: flex; }
.eventTab ul li .thumb img { max-width: 200px; }
.eventTab ul li .text { display: none; }
.eventView { margin-top: 20px;}
.eventView .img img { width: 100%; }
@media screen and (min-width: 500px) {
	.eventList li .text {align-items: flex-start;}
}
@media screen and (min-width: 1000px) {
    .eventList li {padding-bottom: 50px;}
    .eventList li .thumb {max-width: none;}
    .eventList li:not(:first-child) {padding-top: 50px;}
    .eventList li a { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; }
    .eventList li .thumb { width: 45%; }
    .eventList li .text { width: 55%; padding-left: 30px;}
    .eventList li .text .subj { font-size: 22px; }
    .eventList li .text .desc { font-size: 16px; }
    .eventList li .text .term { font-size: 16px; }
    .eventTab ul {gap: 20px 2%; flex-wrap: wrap;}
    .eventTab ul li { width: 23.5%; }
    .eventTab ul li .thumb img {width: 100%; max-width: unset;}
}

/* 푸터에 있는 service 영역 (이용약관, 개인정보처리방침 등) */
.whiteBox { white-space: pre-line; }
.whiteBox .bigTitle {font-weight: 700; font-size: 18px;}
.whiteBox .title { font-weight: 700; color: var(--color-darkGray-font); }
.whiteBox .content {color: var(--color-gray-font); font-weight: 300; margin-top: -20px; }

@media screen and (min-width:1000px){
	.whiteBox { border: 1px solid var(--color-gray-border); padding: 20px; border-radius: 30px;}
	.whiteBox .bigTitle {font-size: 22px;}
	.whiteBox .title {font-size: 18px;}
	.whiteBox .content {font-size: 16px; letter-spacing: -0.5px;}
}

/* ==== footer ==== */
.footer{ background: var(--color-btn-back); margin-top: 30px;}
.footer .inner {padding: 20px;}
.wrap.promotion .footer .inner {padding: 20px 20px 100px 20px;}
.wrap.estimate .footer .inner {padding: 20px 20px 100px 20px;}
.footer .inner > img {margin-bottom: 10px;} 
.footer .infoBox {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; font-weight: 500; margin-bottom: 10px; gap: 15px;}
.footer .infoBox span:first-child a {text-decoration: underline;}
.footer .infoBox span { position: relative;}
.footer .infoBox span a {color: var(--color-darkGray-font);}
.footer .companyBox { display: flex; flex-direction: column; background-color: var(--color-gray-hover); padding: 20px; border-radius: 15px; gap: 10px;}
.footer .companyBox div, .footer .companyBox span a{color: var(--color-darkGray-font);}
.footer .companyBox div b {font-weight: 500;}
.footer .companyBox .sns {display: flex; justify-content: flex-end; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; }
.footer .companyBox .sns > div a {display: flex; font-size: 0; line-height: 0; overflow: hidden; text-indent: -9999px;}
.footer .companyBox .notice span {position: relative; display: block; padding-left: 10px; font-size: 12px;}
.footer .companyBox .notice span::before {position: absolute; content: ''; top: 50%; transform: translateY(-50%); left: 0; background-color: var(--color-gray-font); width: 5px; height: 5px; border-radius: 50%; }
.footer .copyWrite {text-align: center; font-size: 12px;}
@media screen and (min-width:1000px) {
	.footer{ margin-top: 50px; }
	.wrap.pc .footer .infoBox span a:hover { text-decoration: underline;}
}