@charset "utf-8";
/* 공통 */
.wrapper.dark h2, .wrapper.dark h3, .wrapper.dark h4, .wrapper.dark h5, .wrapper.dark h6 {color: var(--main-font);} 
.wrapper.dark input[type="checkbox"]:checked + span:before { background: url(../images/icons/dark/icon_checkBox_on.svg) no-repeat center/contain; }
.wrapper.dark input[type="radio"]:disabled + span:before {background: url(../images/icons/dark/icon_radio_disabled.svg) no-repeat center/contain;}
.wrapper.dark .btnCheck label input[type="checkbox"] + span:before {background: none;}
.wrapper.dark input[type="radio"]:checked + span:before { background: url(../images/icons/dark/icon_radio_on.svg) no-repeat center / contain;}
.wrapper.dark .btnRadio label input[type="radio"] + span:before {background: none;}
.wrapper.dark .btnRadio.estmColor label input[type="radio"]:checked + span::before {background: var(--primary-orange);}
.wrapper.dark button.checked.on {background: url(../images/icons/dark/icon_check_on.svg) no-repeat center; background-size: 60%;}
.wrapper.dark button.diff.on {background: url(../images/icons/dark/icon_diff_on.svg) no-repeat center; background-size: 60%;}
.wrapper.dark.desktop .buttonBox button.navyLine:hover, .wrapper.dark.desktop .buttonBox a.navyLine:hover {background-color: rgba(58, 75, 90, 0.15); border-color: #9FB1C1; color: #9FB1C1;}
.wrapper.dark .buttonBoxLine button, .wrapper.dark .buttonBoxLine a {color: var(--gray-500);} 
.wrapper.dark .paging button:hover {color: var(--main-font);}
.wrapper.dark .noticeBox {color: var(--gray-500);}
.wrapper.dark .noticeBox b {color: var(--main-font);} 
.wrapper.dark .tablist button.on { color: var(--primary-orange);}
.wrapper.dark .tablist button.on::after {background-color: var(--primary-orange);}
.wrapper.desktop.dark .tablist button:hover {color: var(--primary-orange);}  
.wrapper.dark .btnLogo button, .btnLogo a {background-color: var(--white);}
.wrapper.dark .btnCapital img {background-color: var(--white);}
.wrapper.dark .footer .inner .topButton {background: var(--bg-white) url(../images/icons/icon_arrow_upward_white.svg) no-repeat center; background-size: 50%;}
/* 공통 - 플로팅, 뒤로가기 */
.wrapper.dark .floatingMenu {background-color: var(--gray-100)}
.wrapper.dark .mainTop .swipeButton button, .wrapper.dark .mainTop .estmHead button {background-color: var(--gray-100);}

/* 공통 -  필터 */
.wrapper.dark .filterBox {border: 1px solid var(--gray-300); box-shadow: none;}
.wrapper.dark .brandList .logo {background-color: var(--white); border-radius: 5px; }
/* 플로팅메뉴 */
.wrapper.dark .floatingMenu ul li.calc button::before {background-image: url(../images/icons/dark/navigation/icon_utility.svg);}
.wrapper.dark .floatingMenu ul li.like ::before {background-image: url(../images/icons/dark/navigation/icon_newcar.svg);}
.wrapper.dark .floatingMenu ul li.onlineEst ::before {background-image: url(../images/icons/dark/icon_computer.svg);}
.wrapper.dark .floatingMenu ul li.promotion ::before {background-image: url(../images/icons/dark/icon_promotion.svg);}
.wrapper.dark .floatingMenu ul li.call ::before {background-image: url(../images/icons/dark/icon_call_line.svg);}
/* 로그인 화면 , 헤더영역 */
.wrapper.dark .loginBox .sns .btn button.apple {background-color: var(--gray-200);}
.wrapper.dark .header .inner .menuHome { background: url(../images/logo/dark/logo_v.svg) no-repeat center / contain;}  
.wrapper.dark .header .inner .menuDesk {background: url(../images/icons/dark/navigation/icon_menu.svg) no-repeat center; background-size: 70%;}
.wrapper.dark .loginBox .main .head .title h2::before { background: url(../images/logo/dark/logo_v.svg) no-repeat center / contain;} 
.wrapper.dark .menuMain .menuBox .menuTop .info .home { background: url(../images/logo/dark/logo_v.svg) no-repeat center / contain;}
/* 메뉴 - mainTop / menuFixed 아이콘 색상 변경 */
.wrapper.dark .menuMain .menuBox .menuList .gnb.newcar .title button::before {background-image:url(../images/icons/dark/navigation/icon_newcar.svg);}
.wrapper.dark .menuMain .menuBox .menuList .gnb.newcar .title button.open::before {background-image:url(../images/icons/dark/navigation/icon_newcar_on.svg);}
.wrapper.dark .menuMain .menuBox .menuList .gnb.estimate .title button::before {background-image:url(../images/icons/dark/navigation/icon_estimate.svg);}
.wrapper.dark .menuMain .menuBox .menuList .gnb.estimate .title button.open::before {background-image:url(../images/icons/dark/navigation/icon_estimate_on.svg);}
.wrapper.dark .menuMain .menuBox .menuList .gnb.finance .title button::before {background-image:url(../images/icons/dark/navigation/icon_finance.svg);}
.wrapper.dark .menuMain .menuBox .menuList .gnb.finance .title button.open::before {background-image:url(../images/icons/dark/navigation/icon_finance_on.svg);}
.wrapper.dark .menuMain .menuBox .menuList .gnb.stock .title button::before {background-image:url(../images/icons/dark/navigation/icon_stock.svg);}
.wrapper.dark .menuMain .menuBox .menuList .gnb.stock .title button.open::before {background-image:url(../images/icons/dark/navigation/icon_stock_on.svg);}
.wrapper.dark .menuMain .menuBox .menuList .gnb.customer .title button::before {background-image:url(../images/icons/dark/navigation/icon_customer.svg);}
.wrapper.dark .menuMain .menuBox .menuList .gnb.customer .title button.open::before {background-image:url(../images/icons/dark/navigation/icon_customer_on.svg);}
.wrapper.dark .menuMain .menuBox .menuList .gnb.utility .title button::before {background-image:url(../images/icons/dark/navigation/icon_utility.svg);}
.wrapper.dark .menuMain .menuBox .menuList .gnb.utility .title button.open::before {background-image:url(../images/icons/dark/navigation/icon_utility_on.svg);}
.wrapper.dark .menuMain .menuBox .menuList .gnb.guide .title button::before {background-image:url(../images/icons/dark/navigation/icon_guide.svg);}
.wrapper.dark .menuMain .menuBox .menuList .gnb.guide .title button.open::before {background-image:url(../images/icons/dark/navigation/icon_guide_on.svg);}
.wrapper.dark .menuMain .menuBox .menuList .gnb.shopping .title button::before {background-image:url(../images/icons/dark/navigation/icon_shopping.svg);}
.wrapper.dark .menuMain .menuBox .menuList .gnb.shopping .title button.open::before {background-image:url(../images/icons/dark/navigation/icon_shopping_on.svg);}
.wrapper.dark .menuMain .menuBox .menuList .gnb.mypage .title button::before {background-image:url(../images/icons/dark/navigation/icon_mypage.svg);}
.wrapper.dark .menuMain .menuBox .menuList .gnb.mypage .title button.open::before {background-image:url(../images/icons/dark/navigation/icon_mypage_on.svg);}
@media (hover: hover) and (pointer: fine) {
    .wrapper.dark .menuMain .menuBox .menuList .gnb.newcar .title button:hover::before {background-image: url(../images/icons/navigation/icon_newcar_on.svg);}
    .wrapper.dark .menuMain .menuBox .menuList .gnb.estimate .title button:hover::before {background-image: url(../images/icons/navigation/icon_estimate_on.svg);}
    .wrapper.dark .menuMain .menuBox .menuList .gnb.finance .title button:hover::before {background-image: url(../images/icons/navigation/icon_finance_on.svg);}
    .wrapper.dark .menuMain .menuBox .menuList .gnb.stock .title button:hover::before {background-image: url(../images/icons/navigation/icon_stock_on.svg);}
    .wrapper.dark .menuMain .menuBox .menuList .gnb.customer .title button:hover::before {background-image: url(../images/icons/navigation/icon_customer_on.svg);}
    .wrapper.dark .menuMain .menuBox .menuList .gnb.utility .title button:hover::before {background-image: url(../images/icons/dark/navigation/icon_utility_on.svg);}
    .wrapper.dark .menuMain .menuBox .menuList .gnb.guide .title button:hover::before {background-image: url(../images/icons/dark/navigation/icon_guide_on.svg);}
    .wrapper.dark .menuMain .menuBox .menuList .gnb.guide .title button:hover::before {background-image: url(../images/icons/dark/navigation/icon_guide_on.svg);}
    .wrapper.dark .menuMain .menuBox .menuList .gnb.shopping .title button:hover::before {background-image: url(../images/icons/dark/navigation/icon_shopping_on.svg);}
    .wrapper.dark .menuMain .menuBox .menuList .gnb.mypage .title button:hover::before {background-image: url(../images/icons/dark/navigation/icon_mypage_on.svg);}
}

.wrapper.dark .menuMain .menuBox .menuTop .menuDesk {background-image: url(../images/icons/dark/navigation/icon_menu.svg);}
.wrapper.dark.menuOpen .menuMain .menuBox .menuTop .home {background-image: url(../images/icons/dark/navigation/icon_home.svg);}
.wrapper.dark .menuFixed ul li div.home {background: url(../images/icons/dark/navigation/icon_home.svg) no-repeat center/contain;}
.wrapper.dark .menuFixed ul li div.newcar {background: url(../images/icons/dark/navigation/icon_newcar.svg) no-repeat center/contain;}
.wrapper.dark .menuFixed ul li div.estimate {background: url(../images/icons/dark/navigation/icon_estimate.svg) no-repeat center/contain;}
.wrapper.dark .menuFixed ul li div.stock {background: url(../images/icons/dark/navigation/icon_stock.svg) no-repeat center/contain;}
.wrapper.dark .menuFixed ul li div.menu {background: url(../images/icons/dark/navigation/icon_menu.svg) no-repeat center/contain;}
.wrapper.dark .menuFixed ul li.on div.home {background: url(../images/icons/dark/navigation/icon_home_on.svg) no-repeat center/contain;}
.wrapper.dark .menuFixed ul li.on div.newcar {background: url(../images/icons/dark/navigation/icon_newcar_on.svg) no-repeat center/contain;}
.wrapper.dark .menuFixed ul li.on div.estimate {background: url(../images/icons/dark/navigation/icon_estimate_on.svg) no-repeat center/contain;}
.wrapper.dark .menuFixed ul li.on div.stock {background: url(../images/icons/dark/navigation/icon_stock_on.svg) no-repeat center/contain;}

/* 메인 홈 */
.wrapper.dark .deskBox h3.title::before {background-color: var(--white);} 
.wrapper.dark .deskBox .favoritesMenuBox .list li:hover {border-color: var(--navy-font);}
.wrapper.dark .popup .content .favoritesMenu h3 {color: var(--white);}
.wrapper.dark .popup .content .favoritesMenu h3::before {background-color: var(--white);}
/* 모델 */
.wrapper[path="model_search"].dark .modelList.wide li {background-color: var(--gray-100);}
.wrapper[path="model_search"].dark .modelList.wide li.no {background-color: var(--bg);}
/* 마이페이지 - 로그인설정 */ 
.wrapper.dark .loginsetBox h3.loginSet::before { background: url(../images/icons/icon_setting_white.svg) no-repeat center / contain;}
.wrapper.dark .loginsetBox h3.today::before { background: url(../images/icons/dark/icon_date.svg) no-repeat center / contain;}
.wrapper.dark .loginsetBox h3.auto::before { background: url(../images/icons/dark/icon_circle_navy.svg) no-repeat center / contain;}
.wrapper.dark .loginsetBox h3.recent::before { background: url(../images/icons/dark/icon_schedule_navy.svg) no-repeat center / contain;}
/* 마이페이지 - 알림메세지 */ 
.wrapper.dark .notimsgBox .pointBox li .title {color: var(--gray-500);} 
/* 문자발송 */
.wrapper.dark .smsBox .guideBox ul li {color: var(--gray-500);}
.wrapper.dark .smsBox .saveBox .save .title::before {background: url(../images/icons/dark/icon_info_navy.svg) no-repeat center / contain; }
.wrapper.dark .wrapper[path="sms_main"] .tableBox table input {color: var(--gray-500);}
/* 즉시출고 */
.wrapper.dark .fastshipList > li .top .cnt {color: var(--main-font);}
/* 판매조건 */
.wrapper.dark .discountsList .list li .title {color: var(--main-font);}
/* 유틸리티 */
.wrapper[path^="utility"].dark .descBox h3 {color: var(--main-font);}
.wrapper[path^="utility"].dark .descBox h3::before { background: url(../images/icons/dark/icon_info_navy.svg) no-repeat center / contain;}
.wrapper.dark .calculatorBox .repaymentBox .box tr.start td {color: var(--primary-orange);}
.wrapper.dark .controlBox .box.resultBox .result.pmt {background-color: rgba(0, 0, 0, .1);}
/* 게시판 */
.wrapper.dark .boardView .commentBox .list li .writer .author {background-color: var(--gray-50);}
.wrapper.dark .boardView .commentBox .list li .writer .who .me::after {background-color: var(--gray-50);}
.wrapper.dark .boardEdit form .desc {color: var(--main-font); border-color: var(--gray-300);} 
.wrapper.dark .boardEdit form .attachBtn button[kind="file"] {background-image:url(../images/icons/dark/icon_file.svg);}
.wrapper.dark .boardEdit form .attachBtn button[kind="photo"] {background-image:url(../images/icons/dark/icon_image.svg);}
.wrapper.dark .boardEdit form .attachBtn button[kind="youtube"] {background-image:url(../images/icons/dark/icon_youtube.svg);}
.wrapper.dark .boardEdit form .attachBtn button[kind="website"] {background-image:url(../images/icons/dark/icon_website.svg);}
/* 할부, 캐시백비교 */
.wrapper.dark .finContBox .list li .detail .detailBox .top .result {color: var(--main-font);}
.wrapper.dark .finContBox .list li .top .repayInfo span.principal {background-image: url(../images/icons/dark/icon_principal.png); }
.wrapper.dark .finContBox .list li .top .repayInfo span.equal {background-image: url(../images/icons/dark/icon_equal.png);}
.wrapper.dark .finContBox .list li .top .repayInfo span.nofee {background-image: url(../images/icons/dark/icon_nofee.png); background-size: 13px;}
.wrapper.dark .finContBox .list li .top .repayInfo span.norecord {background-image: url(../images/icons/dark/icon_norecord.png);}
.wrapper[path^="finance"].dark .orderList .repay span.equal::before {background: url(../images/icons/dark/icon_equal.png) no-repeat center/contain;}
.wrapper[path^="finance"].dark .orderList .repay span.principal::before {background: url(../images/icons/dark/icon_principal.png) no-repeat center/contain;}
.wrapper[path^="finance"].dark .orderList .repay span.nofee::before {background: url(../images/icons/dark/icon_nofee.png) no-repeat center/contain; }
.wrapper[path^="finance"].dark .orderList .repay span.norecord::before {background: url(../images/icons/dark/icon_norecord.png) no-repeat center; background-size: 80%;}
.wrapper.dark .finContBox .list li .content .box.rate span:not(.price, .on) { color: rgba(255, 255, 255, .3);}
.wrapper[path='finance_compareCard'].dark .finContBox .list li .content .box.price span.rate:not(.price) { color: rgba(255, 255, 255, .3);}
.wrapper.dark .finContBox .list li .content .box.price span.rate.on:not(.price) { color: rgba(255, 255, 255, 1);}
.wrapper.dark .finContBox .list li .content .box.rate[length='2'] span.rate{ color: rgba(255, 255, 255, 1);}
/* 쇼핑 */
.wrapper.dark .addInfoBox .deliveryNotice {color: var(--gray-500);}
.wrapper.dark .shopBox .buyList ul li .box .sales .info .amount a {background-color: var(--bg); }
/* 고객관리 */ 
.wrapper.dark .customerEditBox .customerTop {box-shadow: none; border: 1px solid var(--gray-300);}
.wrapper[path="customer_list"].dark .popup .content .relationbox dl .data dd ul li button {color: var(--main-font);}
.wrapper.dark .customerBox .customerList .list li .dir .dirlist span {color: var(--gray-500);}
.wrapper.dark .customerBox .customerList .list li .dir .plusBox .directoryList li button {color: var(--gray-500);}
.wrapper.dark .customerBox .customerList .list li .dir .plusBox .directoryList li.on button {border: 1px solid var(--gray-300);}
.wrapper.dark .customerEditBox h4.basic::before {background-image:url(../images/icons/dark/icon_info_navy.svg);}
.wrapper.dark .customerEditBox h4.infoTitle::before {background-image:url(../images/icons/dark/icon_info_navy.svg);}
.wrapper.dark .customerEditBox h4.comTitle::before {background-image:url(../images/icons/dark/icon_company_navy.svg);}
.wrapper.dark .customerEditBox h4.memoTitle::before {background-image:url(../images/icons/dark/icon_manageMemo.svg);}
.wrapper.dark .customerEditBox h4.carTitle::before {background-image:url(../images/icons/dark/icon_car_navy.svg);}
.wrapper.dark .customerEditBox h4.scheTitle::before {background-image:url(../images/icons/dark/icon_schedule_navy.svg);}
.wrapper.dark .customerEditBox h4.estmTitle::before {background-image:url(../images/icons/dark/icon_estm_send.svg);}
.wrapper.dark .customerEditBox h4.listTitle::before {background-image:url(../images/icons/dark/icon_listmanage_navy.svg);}
.wrapper.dark .customerEditBox h4.backupTitle::before {background-image:url(../images/icons/dark/icon_backup_navy.svg);}
.wrapper.dark .configBox h4::before {background: url(../images/icons/dark/icon_info_navy.svg) no-repeat center/contain;}
.wrapper.dark .configBox h4.listTitle::before {background: url(../images/icons/dark/icon_listmanage_navy.svg) no-repeat center/contain;}
.wrapper.dark .configBox h4.backupTitle::before {background: url(../images/icons/dark/icon_backup_navy.svg) no-repeat center/contain;}
/* 저장견적 */
.wrapper.dark .estListBox .EstimateList li .group .detail .finc {color: var(--gray-500);}
/* 일정관리 */
.wrapper.dark .scheduleBox .scheduleList li .moreButton.edit button {background: url(../images/icons/icon_edit.svg) no-repeat center; background-size: 60%;}
.wrapper.dark .scheduleBox .calender .markBox span.reser::before {background-color: var(--navy-font);}
.wrapper.dark .scheduleBox .calender .table td .mark span.reser {background-color: var(--navy-font);}
.wrapper.dark .scheduleList li .title.reser::before {background-color: var(--navy-font);}
/* 견적 */
.wrapper.dark .estmCount .count .set {color: var(--main-font);}
.wrapper.dark .estmCell .vehicle .choice .box li .top button .title {color: var(--main-font);}
.wrapper.dark .compList li .logo img {background-color: var(--white);}
.wrapper.dark .compList li.on > button::before {background: url(../images/icons/dark/icon_check_on.svg) no-repeat center; background-size: 60%;}
.wrapper.dark .optionList li.on button::before, .wrapper.dark .optionList li.on label::before {background: url(../images/icons/dark/icon_checkBox_on.svg) no-repeat center / contain;}
.wrapper.dark .estmBar.open > .btn button::after { background: url(../images/icons/dark/icon_arrowdown_orange.svg) no-repeat center / contain; transform: rotate(180deg);} 
/* 견적 - 팝업 */
.wrapper.dark .popup .content .infoBox .descBox .descTitle::before {background: url(../images/icons/dark/icon_info_navy_dark.svg) no-repeat center / contain;}
.wrapper.dark .popup .btnOpenPromotion::after {background: url(../images/icons/dark/icon_arrowdown_navy.svg) no-repeat center/contain;}
/* 판매조건 */
.wrapper.dark .termTable table tr th .top {color: #333;}
/* 팝업 */ 
.wrapper.dark .popup .content .spec .name {color: var(--main-font);} 
.wrapper.dark .popup .content .custoEstmList h3 {color: var(--main-font);}
.wrapper.dark .popup .content .custoEstmList h3::before {background-color: var(--main-font);}
.wrapper.dark .popup .content .popupForm .list li span.title {color: var(--gray-500);}
.wrapper.dark .popup .tabCont h3::before {background-color: var(--white);}