@charset "utf-8";

/* HyundaiSansText */
@font-face {
    font-family: "HDtextBold";
    src: url("../font/Hyundai-Sans/HyundaiSansTextKRBold.eot");
    src: url("../font/Hyundai-Sans/HyundaiSansTextKRBold.eot?#iefix") format("embedded-opentype"),
        url("../font/Hyundai-Sans/HyundaiSansTextKRBold.woff2") format("woff2"),
        url("../font/Hyundai-Sans/HyundaiSansTextKRBold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "HDTextMedium";
    src: url("../font/Hyundai-Sans/HyundaiSansTextKRMedium.eot");
    src: url("../font/Hyundai-Sans/HyundaiSansTextKRMedium.eot?#iefix") format("embedded-opentype"),
        url("../font/Hyundai-Sans/HyundaiSansTextKRMedium.woff2") format("woff2"),
        url("../font/Hyundai-Sans/HyundaiSansTextKRMedium.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "HDTextRegular";
    src: url("../font/Hyundai-Sans/HyundaiSansTextKRRegular.eot");
    src: url("../font/Hyundai-Sans/HyundaiSansTextKRRegular.eot?#iefix") format("embedded-opentype"),
        url("../font/Hyundai-Sans/HyundaiSansTextKRRegular.woff2") format("woff2"),
        url("../font/Hyundai-Sans/HyundaiSansTextKRRegular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

body.renewal-v2 {background: #f5f5f7;}
body.renewal-v2, .renewal-v2 {color: #252525;}

#header.header-v2 {border-bottom: none; background: transparent; text-align: left; transform: translateY(0%); will-change: transform; top: -1px; height: 57px;}
#header.header-v2.white {background: #fff;}

#header.header-v2 .header-inner {display: flex; justify-content: space-between; align-items: center; padding: 0 24px; height: 100%;}
#header.header-v2 .has-car {position: relative; padding-right: 24px; font-family:"HeadBold"; font-size: 18px; line-height: 24px;}
#header.header-v2 .has-car::after {position: absolute; top: 0; right: 7px;  display: inline-block; vertical-align: top; margin-top: 4px; width: 9px; height: 9px; border: solid #252525; border-width: 2px 2px 0  0; transform: rotate(135deg); content: '';}
#header.header-v2 ul li:nth-child(n + 2) {margin-left: 4px;}
#header.header-v2 ul li a.maintenance { width: 40px; height: 40px; background:url(../images/common/renewal-v2/ic-header-maintenance.svg) no-repeat center; }
#header.header-v2 ul li a.coupon { width: 40px; height: 40px; background:url(../images/common/renewal-v2/ic-header-coupon.svg) no-repeat center; }
#header.header-v2 ul li a.setting { width: 40px; height: 40px; background:url(../images/common/renewal-v2/ic-header-setting.svg) no-repeat center; }
#header.header-v2 ul li a.barcode { width: 40px; height: 40px; background:url(../images/common/renewal-v2/ic-header-barcode.svg) no-repeat center; }
#header.header-v2 ul li a.shop { width: 40px; height: 40px; background:url(../images/common/renewal-v2/ic-header-shop.svg) no-repeat center; }
#header.header-v2 ul li a.login { width: 40px; height: 40px; background:url(../images/common/renewal-v2/ic-header-login.svg) no-repeat center; }
#header.header-v2 ul li a.alram { width: 40px; height: 40px; background:url(../images/common/renewal-v2/ic-header-alram.svg) no-repeat center; }
#header.header-v2 ul li a.alram.on { width: 40px; height: 40px; background:url(../images/common/renewal-v2/ic-header-alram_on.svg) no-repeat center; }

#header.header-v2 .sub-header {position: relative; width: 100%; height: 100%; background-color: #fff; text-align: center; border-bottom: 1px solid #F5F5F7;}
#header.header-v2 .sub-header .back {position: absolute; top: 8px; left: 8px; background:url(../images/common/renewal-v2/ic-header-back.svg) no-repeat center; width: 40px; height: 40px;}
#header.header-v2 .sub-header .sub-title {position: static;}
#header.header-v2 .sub-header .sub-title span {font-size: 18px; color: #252525; font-family:"HeadRegular";}

#nav.nav-v2 { position: fixed; left: 0; bottom: -1px; right: 0;  margin:0 auto;  min-width: 320px;  height: 67px;  background:transparent;  border-top: none;  z-index: 10;  padding-top: 12px;  padding-bottom: calc(env(safe-area-inset-bottom) - 2px);  padding-bottom: calc(constant(safe-area-inset-bottom) - 2px);}
#nav.nav-v2 ul { z-index: 2; position: relative; display: flex; width: 100%; height: 54px; background:#fff; box-shadow: 0px 0px 8px rgba(45, 45, 51, 0.2);}
#nav.nav-v2 ul::before { z-index: 1; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 52px; height: 52px; border-radius: 100%; background: #fff !important; box-shadow: 0px 0px 8px rgba(45, 45, 51, 0.2); content: '';}
#nav.nav-v2 ul::after { z-index: 2; display: block; position: absolute;  left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: #fff; content: '';}
#nav.nav-v2 ul li { position:relative; z-index: 3; flex:1; align-items:stretch; text-align:center; }
#nav.nav-v2 ul li a { display: block;  width: 100%; height: 100%; padding: 7px 0 0; margin: 0 auto;  background: none !important;}
#nav.nav-v2 ul li a::before { display: block;  margin: 0 auto; width: 24px; height: 24px; background-repeat: no-repeat; background-position: center; background-size: contain; content: '';}
#nav.nav-v2 ul li .name {display: block; margin-top: 2px; text-align: center; font-size: 11px; line-height: 14px; color: #586069;}
#nav.nav-v2 ul li.on .name {color: #002C5F}
#nav.nav-v2 ul li.on::after {display: none;}
#nav.nav-v2 ul li.home a::before { background-image:url(../images/common/renewal-v2/btn-nav-home.svg); }
#nav.nav-v2 ul li.home.on a::before { background-image:url(../images/common/renewal-v2/btn-nav-home_on.svg); }
#nav.nav-v2 ul li.service a::before { background-image:url(../images/common/renewal-v2/btn-nav-service.svg); }
#nav.nav-v2 ul li.service.on a::before { background-image:url(../images/common/renewal-v2/btn-nav-service_on.svg); }
#nav.nav-v2 ul li.shop a::before { background-image:url(../images/common/renewal-v2/btn-nav-shop.svg); }
#nav.nav-v2 ul li.shop.on a::before { background-image:url(../images/common/renewal-v2/btn-nav-shop_on.svg); }
#nav.nav-v2 ul li.my a::before { background-image:url(../images/common/renewal-v2/btn-nav-my.svg); }
#nav.nav-v2 ul li.my.on a::before { background-image:url(../images/common/renewal-v2/btn-nav-my_on.svg); }
#nav.nav-v2 ul li.mycar a { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: block; padding: 0; height: 62px;}
#nav.nav-v2 ul li.mycar a::before { width: 52px; height: 52px;  background-image:url(../images/common/renewal-v2/btn-nav-start.png);}
#nav.nav-v2 ul li:active,
#nav.nav-v2 ul li a:active { background-color:rgba(70, 74, 89, 0.1);}
#nav.nav-v2 ~ .toast-pop {z-index: 9;}

/* top refresh */
.renewal-v2 .refresh-area {position: relative; z-index: 1; height: 40px; padding: 4px 0; text-align: center;}
.renewal-v2 .refresh-area .ic-refresh {display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background-color: #fff; border-radius: 100%;}
.renewal-v2 .refresh-area .ic-refresh::before {display: inline-block; width: 16px; height: 16px; animation: rotate 500ms linear ; background: url(../images/common/renewal-v2/ic-refresh-sm.svg) 100% 0 no-repeat; background-size: contain; content: '';}
.renewal-v2 .refresh-area.show {display: block;}
.renewal-v2 .refresh-area.hide {display: none;}
@keyframes rotate {
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

/* handlebar UI */
.handlebar-container {}
.handlebar-container {position:fixed; top: 100%; bottom: 0; width: 100%; z-index: 13;}
.handlebar-container .touch-handle { position: relative; width: 100%; height: 32px; }
.handlebar-container .touch-handle::after { position: absolute; bottom: 0; display: block; width: 100%; height: 100%; background: #F5F5F7;  border-radius: 20px 20px 0 0; content: "";}
.handlebar-container .touch-handle::before { position: absolute; bottom: 20px; left: 50%; display: block; width: 32px; height: 4px; margin: 0 auto; background: #DDDDDF;  border-radius: 5px; transform: translateX(-50%); z-index: 1; content: "";}
.handlebar-container.white .touch-handle::after {background: #fff; }
.handlebar-container.white .handlebar-inner {background: #fff; }
.handlebar-container .handlebar-inner { height: calc(100% - 32px); background-color: #F5F5F7; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;}
.handlebar-container .handlebar-inner.posr {position: relative; z-index: 100; overflow: visible;}
.handlebar-container .handlebar-inner.flex-box {flex-wrap: wrap;}
.handlebar-container .handlebar-inner.w-btn {padding-bottom: 68px;}
.renewal-v2 .ui-resizable-n {height: 44px}
.renewal-v2 .handlebar-container .win-pop-wrap {z-index: 100;}
.handlebar-container.flex-handlebar .handlebar-inner {height: auto; max-height: calc(100% - 32px);}
.handlebar-container.flex-handlebar .ui-resizable-n {height: 32px}

.handlebar-container.flex-handlebar .btn-wrap-v2.floating {position: relative;}
body.open .handlebar-container .btn-wrap-v2.floating {position: fixed;}

/* map + handlebar UI */
.handlebar-flexible {position:fixed; top: 100%; bottom: 0; width: 100%; z-index: 9;}
.handlebar-flexible::before {position: absolute; top: 32px; left: 0; display: block; width: 100%; height: 100%; background-color: #fff; content: "";}
.handlebar-flexible .touch-handle { position: relative; width: 100%; height: 32px; }
.handlebar-flexible .touch-handle::after { position: absolute; bottom: 0; display: block; width: 100%; height: 100%; background: #F5F5F7;  border-radius: 20px 20px 0 0; content: "";}
.handlebar-flexible .touch-handle::before { position: absolute; bottom: 20px; left: 50%; display: block; width: 32px; height: 4px; margin: 0 auto; background: #DDDDDF;  border-radius: 5px; transform: translateX(-50%); z-index: 1; content: "";}
.handlebar-flexible.white .touch-handle::after {background: #fff; }
.handlebar-flexible.white .handlebar-inner {background: #fff; }
.handlebar-flexible .handlebar-inner { height: auto; max-height: calc(100% - 32px); background-color: #F5F5F7; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;}
.handlebar-flexible .handlebar-inner.posr {position: relative; z-index: 100; overflow: visible;}
.handlebar-flexible .handlebar-inner.flex-box {flex-wrap: wrap;}
.handlebar-flexible .ui-resizable-n {height: 32px}
.handlebar-flexible .map-contents {max-height: unset !important;}
.map-container .type-flex .map.un-mheight {min-height: unset;}

.renewal-v2 #container { background: #f5f5f7; padding-bottom: calc(constant(safe-area-inset-bottom) + 66px); padding-bottom: calc(env(safe-area-inset-bottom) + 66px);}
.renewal-v2 #container.white { background-color: #ffffff;}
.renewal-v2 .contents {position: relative; padding-bottom: 30px}

.renewal-v2 .weather-bg {position: absolute; top: 0; right: 0; width: 220px; height: 220px; background-position: 100% 0; background-repeat: no-repeat; background-size: contain;}
.renewal-v2 .weather-bg.sun {background-image:url(../images/common/renewal-v2/bg-home-sun.svg)}
.renewal-v2 .weather-bg.rain {background-image:url(../images/common/renewal-v2/bg-home-rain.svg)}
.renewal-v2 .weather-bg.cloud {background-image:url(../images/common/renewal-v2/bg-home-cloud.svg)}
.renewal-v2 .weather-bg.snow {background-image:url(../images/common/renewal-v2/bg-home-snow.svg)}

.renewal-v2 section.section {margin: 0; padding: 16px 24px; background: transparent;}
.renewal-v2 section.section.first-sec {padding-top: 0;}
.renewal-v2 section.section.white {background-color: #fff;}

.renewal-v2 .flex-column {display: flex; flex-flow: column wrap; justify-content: space-between;}
.renewal-v2 .flex-row {display: flex; justify-content: space-between; align-items: center;}
.renewal-v2 .flex-align-start {display: flex; justify-content: flex-start; align-items: center;}
.renewal-v2 .align-start {align-items: flex-start !important;}
.renewal-v2 .calc-height {min-height: calc(100vh - (env(safe-area-inset-bottom) + 56px + 68px));} /* top + button area */
.renewal-v2 .contents .calc-height {min-height: calc(100vh - (env(safe-area-inset-bottom) + 56px));}
.renewal-v2 .is-bottom {padding-bottom: 0;}
.renewal-v2 .is-bottom .calc-height {min-height: calc(100vh - (env(safe-area-inset-bottom) + 56px + 84px));}

.renewal-v2 .text-big {height: unset; font-size: 18px; line-height: 24px;}
.renewal-v2 .text-mid {font-size: 16px; line-height: 20px;}
.renewal-v2 .text-rgl {font-size: 14px; line-height: 16px;}
.renewal-v2 .text {font-size: 12px; line-height: 14px;}
.renewal-v2 .text-s {font-size: 11px; line-height: 13px;}

.renewal-v2 .card {overflow: hidden; padding: 24px; border-radius: 12px; box-shadow: 0px 5px 12px rgba(39, 46, 53, 0.08); background-color: #fff;}
.renewal-v2 .card.lime {background-color: #DEF7A8;}
.renewal-v2 .card.navy {background-color: #002C5F;}
.renewal-v2 .card.skyblue {background-color: #C2E8FC;}
.renewal-v2 .card.yellow {background-color: #FAEBAA;}
.renewal-v2 .card.lightgreen {background-color: #B9EDE9;}
.renewal-v2 .card.type2 {box-shadow: none;}
.renewal-v2 .card.type3 {box-shadow: none; padding: 0;}

.renewal-v2 .banner-title {display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; min-height: 20px; font-family:"HeadRegular";}
.renewal-v2 .banner-title h3 .num {display: inline-block; margin-left: 6px; color: #A0A6AD;}
.renewal-v2 .banner-title .more {width: 20px; height: 20px;}
.renewal-v2 .banner-title .more::before {display: block; width: 100%; height: 100%; background:url(../images/common/renewal-v2/ic-arr-more.svg) 50% no-repeat; content: '';}
.renewal-v2 .banner-title .info {color: #999; font-size: 12px; line-height: 20px; font-family:"HeadRegular";}

.renewal-v2 .banner-ad .banner-ad-swiper {position: relative; margin-right: 0; margin-left: 0; padding-right: 0; padding-left: 0;}
.renewal-v2 .banner-ad .swiper-slide {overflow: hidden; width: 100%; border-radius: 12px; text-align: center;}
.renewal-v2 .banner-ad img {width: 100%; object-fit: cover;}
.renewal-v2 .banner-ad .pagination {z-index: 2; display: inline-block; position: absolute; left: unset; right: 1.9%; bottom: 6.9%; padding: 2px 7px; width: unset; background-color: #252525d8; border-radius: 16px; font-size: 10px; font-family: "HDTextMedium"; color: #fff;}
.renewal-v2 .banner-ad .card {display: block; padding: 0; background: none;}

.renewal-v2  .has-bottom-banner {min-height:calc(100vh - 57px - 67px); padding-bottom: calc(23.8% + 24px);}
.renewal-v2 .banner-bottom {position: absolute; bottom: 24px; left: 0; right: 0; padding: 0 24px;}
.renewal-v2 .banner-bottom a { display: block; width: 100%; }
.renewal-v2 .banner-bottom img {width: 100%; object-fit: cover;}

.renewal-v2 .tx-blue {color: #00AAD2;}
.renewal-v2 .tx-red {color: #E63312}
.renewal-v2 .anchor-text {display: block; font-family: "HDTextMedium"; color: #586069}
.renewal-v2 .anchor-text:after {display: inline-block; vertical-align: middle; margin: -2px 0 0 6px; width: 7px; height: 7px; border: solid #99A2AD; border-width: 1px 1px 0 0; transform: rotate(45deg); content: '';}

.btn-wrap-v2 {display: flex; padding: 16px; position: relative; column-gap: 8px;}
.btn-wrap-v2::before {position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 40px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0.9) 100%); content: '';}
.btn-wrap-v2.floating {position: fixed; bottom: 0; left: 0; right: 0; padding-bottom: calc(constant(safe-area-inset-bottom) + 16px ); padding-bottom: calc(env(safe-area-inset-bottom) + 16px); z-index: 1;}
.btn-wrap-v2.normal {padding: 0;}
.btn-wrap-v2.normal::before {display: none;}
.btn-wrap-v2 .btn {position: relative; text-align: center; display: flex; align-items: center; justify-content: center; flex: 1; border-radius: 12px; font-family:"HDTextMedium";}
.btn-wrap-v2 .btn.s1 {font-size: 16px;}
.btn-wrap-v2 .btn.blue {background: #002C5F; color: #fff; box-shadow: 0px 2px 4px rgba(45, 45, 51, 0.08);}
.btn-wrap-v2 .btn.secondary {background: #F5F5F7; color: #002C5F; box-shadow: 0px 2px 4px rgba(45, 45, 51, 0.08);}
.btn-wrap-v2 .btn.white {background: #fff; color: #002C5F; box-shadow: 0px 2px 4px rgba(45, 45, 51, 0.08);}
.btn-wrap-v2 .btn.disabled {pointer-events: none; background: #ACB9C9; box-shadow: 0px 2px 4px rgba(45, 45, 51, 0.06); color: #fff;}

.floating-wrap {z-index: 1; position: fixed; bottom: 54px; left: 0; right: 0; margin: 0; padding: 0 16px 16px; background: none;}
.floating-wrap::before {position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 40px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0.9) 100%); content: '';}
.floating-wrap .inner {position: relative; padding: 13px 20px; border-radius: 12px; background-color: #00AAD2;}

.ic::before {display: inline-block; vertical-align: middle; background-position: 0 0; background-repeat: no-repeat; background-size: cover; content: '';}
.ic.ic-info-wht::before {width: 16px; height: 16px; background-image: url(../images/common/renewal-v2/ic-info-white.svg);}
.ic.ic-info-red::before {width: 16px; height: 16px; background-image: url(../images/common/renewal-v2/ic-info-red.svg);}
.ic.ic-info-gray::before {width: 16px; height: 16px; background-image: url(../images/common/renewal-v2/ic-info-gray.svg);}
.ic.ic-info-bk::before {width: 16px; height: 16px; background-image: url(../images/common/renewal-v2/ic-info-black.svg);}
.ic.ic-chk-wht::before,
.ic.ic-chk-white::before {width: 16px; height: 16px; background-image: url(../images/common/renewal-v2/ic-chk-white.svg);}

.toggle-wrap .toggle-checkbox { position: absolute; right: 0; z-index: 2; width: 40px; height: 26px; margin-top: -5px; background: transparent; opacity: 0;}
.toggle-wrap .toggle-checkbox::-ms-check { display:none; }
.toggle-wrap .toggle-label { display: block; overflow: hidden; cursor: pointer; width: 36px; height: 20px; background:#E5E8EB; border-radius: 22px;}
.toggle-wrap .toggle-handle { position: absolute; top: 50%; right: 17px; transform: translateY(-50%); display: block; width: 17px; height: 17px; background: #fff; border-radius: 100%; transition: all 0.3s ease-in 0s;}
.toggle-wrap .toggle-checkbox:checked + .toggle-label { background:#00AAD2; }
.toggle-wrap .toggle-checkbox:checked + .toggle-label .toggle-handle { right: 1px; }
.toggle-wrap .toggle-checkbox:disabled + .toggle-label , .toggle-wrap .toggle-checkbox:disabled +  .switch-label .switch-handle { border-color:#ccc; background:#fff; }

input[type="text"].inp, 
input[type="password"].inp,
input[type="number"].inp,
input[type="tel"].inp,
input[type="search"].inp,
input[type="email"].inp {
    width: 100%; height: 40px; padding: 8px 35px 8px 0; background: #fff; border: 1px solid #F5F5F7; border-width: 0 0 2px 0; border-radius: 0; outline: none; font-size: 18px; line-height: 24px; font-family:"HDTextRegular"; color: #252525;
}
input[type="text"].inp:focus, 
input[type="password"].inp:focus,
input[type="number"].inp:focus,
input[type="tel"].inp:focus,
input[type="search"].inp:focus,
input[type="email"].inp:focus { caret-color: #AACAE6; border-bottom-color: #00AAD2;}
input::placeholder { caret-color: #AACAE6; border-bottom-color: #00AAD2;}
input[type="text"].inp.active {caret-color: #AACAE6; border-bottom-color: #00AAD2;}
input[type="text"].inp.active + button.btn-clear {opacity: 1; display: inline-block;}

input[type="text"].inp:focus + button.btn-clear, 
input[type="password"].inp:focus + button.btn-clear,
input[type="number"].inp:focus + button.btn-clear,
input[type="tel"]:focus + button.btn-clear,
input[type="search"].inp:focus + button.btn-clear,
input[type="email"].inp:focus + button.btn-clear {opacity: 1;}
input::placeholder { color: #A0A6AD;}
.input-box .inp + button.btn-clear {top: 2px; right: 0; opacity: 0;}

.inp-wrap .tit {color: #A0A6AD; font-family: "HDTextMedium";}
.inp-wrap + .inp-wrap {margin-top: 32px;}

.renewal-v2 .error-box input { border-width: 0 0 2px 0 !important; }
.renewal-v2 .input-box.read input {border: none; font-family: "HDTextMedium"; }
.renewal-v2 .error-box .error-txt { padding: 6px 0 0 20px; font-size: 14px; line-height: 16px; color:#e63312; background:url(../images/common/ic_error.svg) no-repeat 2px 7px; text-align: initial;}
.renewal-v2 .inp-wrap .inp-desc {margin-top: 6px; color: #A0A6AD; font-size: 14px; line-height: 16px; }
.renewal-v2 .inp-wrap .inp-tit-active {color: #00AAD2;}
.renewal-v2 button.btn-clear {background:url(../images/common/renewal-v2/ic-inp-clear.svg) 50% no-repeat; background-size: 24px auto;}

.inp-list {z-index: 1; position: absolute; top: 40px; left: 0; overflow-x: hidden; overflow-y: auto; width: 100%; height: 0; max-height: 156px; opacity: 0; visibility: hidden; transition: all .5s;}
.inp-list .item {display: block; padding: 15px 16px; color: #252525; background: #F5F5F7; border-bottom: 1px solid #E3E5E8;}
.inp-list.visible {opacity: 1; visibility: visible; height: auto;}

.renewal-v2 .single-datepicker { position:relative; overflow:hidden; }
.renewal-v2 .single-datepicker input {  padding: 0px 32px 0 0; max-width: 100%; height: 40px; background: #fff url(../images/common/renewal-v2/ic_calender.svg) no-repeat right center; background-size: 24px; border: 1px solid #F5F5F7; border-width: 0 0 2px 0; outline: none; font-size: 18px; line-height: 24px; font-family: "HDTextMedium"; color: #252525;}

/* datepicker layer  */
.datepicker-v2 .ui-widget-content {color:#252525;}
.datepicker-v2 .ui-datepicker { padding-bottom:0 !important; width: 100% !important; border:none !important; border-radius:0; z-index:999 !important; }
.datepicker-v2 .ui-datepicker-inline {width: 100% !important;}
.datepicker-v2 .ui-datepicker-header{ padding:0 !important; height:48px !important; border:none !important; border-radius: 12px; background-color: #F5F5F7;}
.datepicker-v2 .ui-datepicker-title {margin: 0 48px; line-height:48px; font-size:16px; color:#252525; font-family: "HDTextMedium";}
.datepicker-v2 .ui-datepicker-title span {display: inline-block; line-height:48px; font-family: "HDTextMedium"; margin-left: 0 !important;}
.datepicker-v2 .ui-datepicker .ui-datepicker-prev, 
.datepicker-v2 .ui-datepicker .ui-datepicker-next {top: 4px !important; width:40px; height:40px; background:none; }
.datepicker-v2 .ui-datepicker .ui-datepicker-prev {left: 8px !important;}
.datepicker-v2 .ui-datepicker .ui-datepicker-next {right: 8px !important;}
.datepicker-v2 .ui-datepicker-prev span { top:0 !important; margin:0 !important; left:0 !important; width:40px; height:40px; background: url(../images/common/renewal-v2/ic_calender_arrow.svg) no-repeat 0 0 !important; background-size:36px 36px;}
.datepicker-v2 .ui-datepicker-next { right:0 !important; }
.datepicker-v2 .ui-datepicker-next span { top:0 !important; margin:0 !important; left:0 !important; width:40px; height:40px; background: url(../images/common/renewal-v2/ic_calender_arrow.svg) no-repeat 0 0 !important; background-size:36px 36px; transform: rotate(180deg);}
.datepicker-v2 .ui-datepicker th { height:32px; padding: 8px 0 4px; box-sizing: content-box; font-family: "HDTextMedium"; font-size: 14px !important; color:#586069;}
.datepicker-v2 .ui-datepicker th:first-child span { color:#e63312; }
.datepicker-v2 .ui-datepicker th:last-child span { color:#586069; }
.datepicker-v2 .ui-datepicker td { position:relative; width:36px; height: 38px; padding: 4px 0; }
.datepicker-v2 .ui-datepicker td span, 
.datepicker-v2 .ui-datepicker td a { position:absolute; top:50%; left:50%; display:block; padding:0 !important; margin:0 !important; width:36px; height:36px; text-align:center; line-height:36px; border:none !important; background:none !important; color:#252525 !important; font-family: "HDTextRegular"; font-size: 16px !important; transform:translate(-50%,-50%); }
.datepicker-v2 .ui-datepicker .ui-datepicker-today a {  border-radius:50%; }
.datepicker-v2 .ui-datepicker .ui-state-active { background:#00AAD2 !important; color:#fff !important; border-radius:50%; }
.datepicker-v2 .ui-datepicker-title .ui-datepicker-year:after {display: none;}
.datepicker-v2 .ui-datepicker-title .ui-datepicker-month{ margin-left:-3px;}
.datepicker-v2 .ui-datepicker-inline { width:100% !important; }
.datepicker-v2 .ui-state-disabled, .datepicker-v2 .ui-widget-content .ui-state-disabled, .datepicker-v2 .ui-widget-header .ui-state-disabled { opacity:1 !important; color:#CDD0D4 !important; }
.datepicker-v2 .ui-state-disabled span, .datepicker-v2 .ui-widget-content .ui-state-disabled span, .datepicker-v2 .ui-widget-header .ui-state-disabled span { color:#CDD0D4 !important; }

/* dot loading */
.dot-loading {display: flex; column-gap: 5px;}
.dot-loading span {width: 5px; height: 5px; border-radius: 10px; background-color: #ffffff; animation: dot-loading 1500ms linear infinite;}
.dot-loading span:nth-child(2) {animation-delay: 500ms;}
.dot-loading span:nth-child(3) {animation-delay: 1000ms;}
@keyframes dot-loading {
    0% {opacity: 0.25;}
    33% {opacity: .6;}
    66% {opacity: 1;}
}

/* fix tab */
.fix-tab {padding-top: 52px;}
.fix-tab .sub-nav {z-index: 2; position: fixed; top: 56px; left: 0; right: 0; background: #fff; /* padding: 0 16px; */ border-bottom: 1px solid #e3e5e8;}
.renewal-v2 .contents .fix-tab + .calc-height {min-height: calc(100vh - (env(safe-area-inset-bottom) + 108px));}

/* home contents */
.renewal-v2  section.weather {display: flex; justify-content: space-between; align-items: flex-start; padding-top: 4px; padding-bottom: 0;}
.renewal-v2  section.weather.welcome-user {align-items: center;}
.renewal-v2  section.weather.welcome-user .today-weather {margin-top: 0;}
.renewal-v2 .weather .today-weather {display: flex; align-items: center; column-gap: 4px; margin-top: 44px; min-height: 21px; font-family: "HDTextRegular";}
.renewal-v2 .weather .today-weather .status {color: #586069}
.renewal-v2 .weather .today-weather .temperature {color: #A0A6AD}
.renewal-v2 .weather .today-weather .icon {display: none; width: 16px; height: 16px; font-size: 0;}
.renewal-v2 .weather .today-weather .icon:before {display: block; width: 100%; height: 100%; background-position: 0 0; background-repeat: no-repeat; background-size: contain; content: '';}
.renewal-v2 .weather .today-weather .icon.sun:before {background-image:url(../images/common/renewal-v2/ic-weather-sun.svg)}
.renewal-v2 .weather .today-weather .icon.rain:before {background-image:url(../images/common/renewal-v2/ic-weather-rain.svg)}
.renewal-v2 .weather .today-weather .icon.cloud:before {background-image:url(../images/common/renewal-v2/ic-weather-cloud.svg)}
.renewal-v2 .weather .today-weather .icon.snow:before {background-image:url(../images/common/renewal-v2/ic-weather-snow.svg)}
.renewal-v2 .weather .location {display: flex; padding: 6px 8px 6px 6px; min-height: 28px; border-radius: 22px; background: #fff; font-family:"HDTextRegular";}
.renewal-v2 .weather .location::before {display: inline-block; vertical-align: top; margin-right: 2px; width: 16px; height: 16px; background:url(../images/common/renewal-v2/ic-target.svg) 50% no-repeat; content: '';}
.renewal-v2 .weather ~ section.welcome {padding-top: 6px;}

.renewal-v2 section.welcome {padding-top: 8px}
.renewal-v2 .welcome h2 {display: block; font-family:"HeadMedium"; line-height: 33px; font-size: 26px;}
.renewal-v2 .welcome .login {display: inline-block; margin-top: 16px; padding: 10px 20px; border-radius: 46px; background-color: #002C5F; color: #fff; font-size: 14px; line-height: 18px;}

.renewal-v2 .notice .card {position: relative; padding: 16px 20px 16px 24px;}
.renewal-v2 .notice .card:nth-child(n + 2) {margin-top: 12px;}
.renewal-v2 .notice a {display: flex; align-items: center; font-family: "HDTextRegular";}
.renewal-v2 .notice a::after {margin-left: auto; width: 8px; height: 8px;  border: 1px solid #8995A3; border-width: 1px 1px 0 0; transform: rotate(45deg); content: '';}
.renewal-v2 .notice .icon {position: relative; margin-right: 8px; width: 16px; height: 16px;}
.renewal-v2 .notice .icon::before {display: block; width: 100%; height: 100%; background: url(../images/common/renewal-v2/ic-notice.svg) 50% no-repeat; background-size: contain; content: '';}
.renewal-v2 .notice .icon.alram::before {display: block; width: 100%; height: 100%; background: url(../images/common/renewal-v2/ic-alram.svg) 50% no-repeat; background-size: contain; content: '';}
.renewal-v2 .notice .num {color: #00AAD2; font-family: "HDTextMedium";}
.renewal-v2 .notice .num strong {vertical-align: middle;}

.renewal-v2 .notice .card.in-progress {background-color: #00AAD2; color: #fff}
.renewal-v2 .notice .card.in-progress .icon.alram::before {display: block; width: 100%; height: 100%; background: url(../images/common/renewal-v2/ic-alram2.svg) 50% no-repeat; background-size: contain; content: '';}
.renewal-v2 .notice .card.in-progress a::after {border-color: #fff;}

.renewal-v2 .card-basic .card {display: block;}
.renewal-v2 .card-basic .title-area {display: flex; justify-content: space-between; align-items: center;}
.renewal-v2 .card-basic .text-rgl {color: #586069; font-family: "HDTextRegular";}
.renewal-v2 .card-basic h3,
.renewal-v2 .card-basic .text-big {margin-top: 8px; font-family:"HDTextBold";}
.renewal-v2 .card-basic h3 img {vertical-align: middle;}
.renewal-v2 .card-basic .icon {display: inline-block; margin-right: -4px; margin-top: -2px;}
.renewal-v2 .card-basic .icon:nth-child(n + 2) {margin-left: 4px;}
.renewal-v2 .card-basic .icon::before {display: block; width: 100%; height: 100%; background-position: 0 0; background-repeat: no-repeat; background-size: contain; content: '';}
.renewal-v2 .card-basic .icon.epit {width: 44px; height: 20px;} 
.renewal-v2 .card-basic .icon.epit::before {background-image:url(../images/common/renewal-v2/ic-epit.svg)} 
.renewal-v2 .card-basic .icon.ev {width: 24px; height: 24px;}
.renewal-v2 .card-basic .icon.ev::before {background-image:url(../images/common/renewal-v2/ic-ev.svg)} 
.renewal-v2 .card-basic .icon.fuel {width: 24px; height: 24px;}
.renewal-v2 .card-basic .icon.fuel::before {background-image:url(../images/common/renewal-v2/ic-fuel.svg)} 
.renewal-v2 .card-basic .icon.datahub {width: 66px; height: 20px;}
.renewal-v2 .card-basic .icon.datahub::before {background-image:url(../images/common/renewal-v2/ic-datahub.svg)} 
.renewal-v2 .card-basic .icon.driving-insight {width: 87px; height: 20px;}
.renewal-v2 .card-basic .icon.driving-insight::before {background-image:url(../images/common/renewal-v2/ic-driving-insight.svg)} 
.renewal-v2 .card-basic .icon.h2 {width: 24px; height: 24px;}
.renewal-v2 .card-basic .icon.h2::before {background-image:url(../images/common/renewal-v2/ic-h2.svg)} 

.renewal-v2 .usedcar-price {margin-top: 8px; font-family:"HeadMedium"; font-size: 24px; line-height: 28px;}
.renewal-v2 .usedcar {display: flex; justify-content: space-between; margin-top: 16px; width: 100%;}
.renewal-v2 .usedcar li {display: flex; flex: 1; align-items: center; gap: 12px; font-family: "HDTextRegular";}
.renewal-v2 .usedcar li::before {width: 32px; height: 32px; background-position: 0 0; background-repeat: no-repeat; background-size: contain; content: '';}
.renewal-v2 .usedcar .down::before {background-image: url(../images/common/renewal-v2/ic-usedcar-arr-down.svg)}
.renewal-v2 .usedcar .plus::before {background-image: url(../images/common/renewal-v2/ic-usedcar-plus.svg)}
.renewal-v2 .card-basic .usedcar strong {font-family:"HDTextMedium"; color: #252525;}
.renewal-v2 .usedcar li span {display: block; opacity: .75;}
.renewal-v2 .usedcar li strong {display: block; margin-top: 4px;}

.renewal-v2 .usedcar-card .card  {display: block;}
.renewal-v2 .usedcar-card p {color: #586069; font-family: "HDTextRegular";}
.renewal-v2 .usedcar-card .text-title {margin-bottom: 6px; color: #586069; line-height: 20px;}
.renewal-v2 .usedcar-card .sub-text {font-size: 12px; line-height: 16px;}
.renewal-v2 .usedcar-card .price {position: relative; display: flex; align-items: center; }
.renewal-v2 .usedcar-card .icon-arrow {position: relative; display: block; margin-left: 6px; width: 16px; height: 16px; border-radius: 100%; background-color: #00AAD2;}
.renewal-v2 .usedcar-card .icon-arrow::after {position: absolute; top: 5px; left:5px; display: block; width: 5px; height: 5px; border: 1px solid #fff; border-width: 1px 1px 0 0; transform: rotate(45deg); content: "";}
.renewal-v2 .usedcar-card .price strong {font-family:"HeadMedium"; color: #252525; font-size: 24px; line-height: 28px;}
.renewal-v2 .usedcar-card dl {position: relative; padding-left: 44px; margin-top: 16px; color: #252525; }
.renewal-v2 .usedcar-card dl:before {position: absolute; top: 0; left: 0; display: block; width: 32px; height: 32px; border-radius: 100%; background: #f5f5f7 url(../images/common/renewal-v2/ic-time.svg) center no-repeat; background-size: 14px 14px; content: "";}
.renewal-v2 .usedcar-card dt {opacity: .75;}
.renewal-v2 .usedcar-card dd {margin-top: 4px; font-family:"HeadMedium";}
.renewal-v2 .usedcar-card .info {margin-top: 16px;}
.renewal-v2 .usedcar-card .info p {text-indent: -10px; padding-left: 10px;}
.renewal-v2 .usedcar-card .info p + p {margin-top: 4px;}
.renewal-v2 .usedcar-card .text-regi {display: block; margin-top: 16px; font-family:"HeadMedium"; font-size: 18px; line-height: 24px;}

.renewal-v2 .usedcar-card .title-area .text-regi {line-height: 20px;}
.renewal-v2 .usedcar-card .title-area + p {margin-top: 8px; line-height: 16px;}
.renewal-v2 .usedcar-card .title-area ~ .text-big {margin-top: 16px;}
.renewal-v2 .usedcar-card .text-big strong {font-family: "HDTextBold";}
.renewal-v2 .usedcar-card .usedcar-banner {background-color: #E3F6FF;}
.renewal-v2 .usedcar-card .usedcar-banner .title-area ~ .text-big {margin-top: 8px;}
.renewal-v2 .usedcar-card .usedcar-banner .logo {display: inline-block;}

.renewal-v2 .banner-certified .card {display: block; padding: 22px 24px; background-color: #E4F0FD; color: #002C5F;}
.renewal-v2 .banner-certified .logo {display: block;}
.renewal-v2 .banner-certified h3 {margin-top: 6px; font-family:"HeadMedium";}
.renewal-v2 .banner-certified h3 + p {margin-top: 4px;}

.renewal-v2 .app-introduction a {display: block; background: #fff url(../images/common/renewal-v2/bg-app-introduction.png) right bottom no-repeat; background-size: auto 80px;}
.renewal-v2 .app-introduction h3 {color: #00AAD2; font-family: "HDTextRegular";}
.renewal-v2 .app-introduction p {margin-top: 6px; font-family:"HDTextBold";}
.renewal-v2 .app-introduction span {margin-top: 48px; display: block; font-family:"HDTextMedium"; color: #A0A6AD;}

.renewal-v2 .driving-decision a {display: block; background: #fff url(../images/common/renewal-v2/bg-driving-decision.png) right bottom no-repeat; background-size: auto 80px;}
.renewal-v2 .driving-decision h3 {color: #00AAD2; font-family: "HeadRegular";}
.renewal-v2 .driving-decision p {margin-top: 6px; font-family:"HDTextBold";}
.renewal-v2 .driving-decision span {margin-top: 48px; display: block; font-family:"HDTextMedium"; color: #A0A6AD;}

.renewal-v2 .bluem-point a {display: block;}
.renewal-v2 .bluem-point h3 {color: #fff; opacity: .75; font-family: "HDTextRegular";}
.renewal-v2 .bluem-point .point {display: flex;  margin-top: 8px; font-family: "HeadMedium"; font-size: 24px; line-height: 28px; color: #fff}
.renewal-v2 .bluem-point .point::after {display: block; margin-left: auto; width: 70px; height: 28px; background: url(../images/common/renewal-v2/bluem-barcode.png) 0 0 no-repeat; background-size: contain; content: '';}
.renewal-v2 .bluem-point .point span {margin-left: 5px; font-family:"HDTextRegular"; }

.renewal-v2 .carousel-swiper {position: relative; margin:0 -24px; padding: 0 24px;}
.renewal-v2 .carousel-swiper img {max-width: 100%;}
.renewal-v2 .carousel-swiper .thumb {position: relative;}
.renewal-v2 .carousel-swiper .text-info {padding: 8px 0 0; color: #A0A6AD; text-align: right; font-family: "HDTextRegular";}
.renewal-v2 .carousel-swiper .play {position: absolute; bottom: 0; left: 0; width: 40px; height: 32px;}
.renewal-v2 .carousel-swiper .play::before {display: block; width: 100%; height: 100%; background: url(../images/common/renewal-v2/btn-play.png) 0 0 no-repeat; background-size: contain; content: '';}

.renewal-v2 section.banner-list1 {}
.renewal-v2 .banner-list1 .text-big {margin-top: 16px; font-family:"HDTextBold";}
.renewal-v2 .banner-list1 .thumb {overflow: hidden; border-radius: 12px; box-shadow: 0px 5px 12px rgba(39, 46, 53, 0.08);}
.renewal-v2 .banner-list1 .thumb img {width: 100%; height: 100%; object-fit: cover; border-radius: 12px;}
.renewal-v2 .banner-list1 .text-info {padding: 8px 0 0; color: #A0A6AD; text-align: right; font-family: "HDTextRegular";}

.renewal-v2 .youtube-video-wrap .thumb {height: 180px; min-height: unset;}

.renewal-v2 section.banner-list2,
.renewal-v2 .banner-list2 {padding-bottom: 0;}
.renewal-v2 .banner-list2 .carousel-swiper {padding-bottom: 16px;}
.renewal-v2 .banner-list2 .swiper-wrapper {min-height: 228px;}
.renewal-v2 .banner-list2 .swiper-slide {width: 182px; height: auto; text-align: center;}
.renewal-v2 .banner-list2 .swiper-slide.card {display: flex; flex-direction: column; padding: 24px 0;}
.renewal-v2 .banner-list2 h4 {padding: 0 16px; font-size: 18px; line-height: 24px; font-family:"HeadMedium"; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.renewal-v2 .banner-list2 .car-img {overflow: hidden; margin-top: 8px; width: 100%;}
.renewal-v2 .banner-list2 .car-img img {max-width: 100%; max-height: 97px;}
.renewal-v2 .banner-list2 dl {margin-top: 9px;}
.renewal-v2 .banner-list2 dt {font-family:"HDTextBold"; color: #00AAD2;}
.renewal-v2 .banner-list2 dd {margin-top: 6px; color: #586069; font-family: "HDTextRegular";}
.renewal-v2 .banner-list2 .price {margin-top: 4px; font-family:"HDTextMedium"; font-size: 16px; line-height: 20px; color: #00AAD2;}
.renewal-v2 .banner-list2 .price ~ .car-img {margin-top: 0;}
.renewal-v2 .banner-list2 .info {width: 102px; margin: 8px auto 0;}
.renewal-v2 .banner-list2 .info tr + tr {margin-top: 6px;}
.renewal-v2 .banner-list2 .info td {color: #252525;}
.renewal-v2 .banner-list2 .info .lt {width: 45px; padding-right: 13px; text-align: left; opacity: .75; font-size: 12px; vertical-align: top;}
.renewal-v2 .banner-list2 .info .rt {width: auto; text-align: right; font-family:"HDTextMedium"; font-size: 14px; /*word-break: break-all;*/}
.renewal-v2 .banner-list2 .info + dl {margin-top: 24px;}
.renewal-v2 .banner-list2 .review {display: block; margin-top: 24px; color: #A0A6AD; font-size: 12px; font-family:"HDTextMedium"; }

.renewal-v2 .banner-list3,
.renewal-v2 section.banner-list3 {padding-bottom: 0;}
.renewal-v2 .banner-list3 .carousel-swiper {padding-bottom: 16px;}
.renewal-v2 .banner-list3 .card {position: relative;}
.renewal-v2 .banner-list3 .sale {display: block; font-family:"HDTextMedium"; color: #00AAD2; font-size: 16px; line-height: 20px;}
.renewal-v2 .banner-list3 .title {margin-top: 8px; font-family:"HDTextBold";}
.renewal-v2 .banner-list3 .title span {font-family:"HDTextRegular";}
.renewal-v2 .banner-list3 .coupon-name {display: inline-block; max-width: calc(100% - 47px); overflow:hidden; vertical-align: top; text-overflow:ellipsis; white-space: nowrap;}

.renewal-v2 .banner-list3 .date {display: block; margin-top: 8px; margin-bottom: 0; color: #A0A6AD; font-family: "HDTextRegular";}

.renewal-v2 section.hmc-story,
.renewal-v2 .hmc-story {/*padding-bottom: 0;*/}
.renewal-v2 .hmc-story .swiper-container {overflow: visible;}
.renewal-v2 .hmc-story .card {position: relative; display: block; padding: 0; /*margin-bottom: 16px;*/}
.renewal-v2 .hmc-story .thumb {overflow: hidden; font-size: 0; position: relative; padding-top: 57.69232%;}
.renewal-v2 .hmc-story .thumb img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; right: 0;}
.renewal-v2 .hmc-story .thumb-single {height: 180px;}
.renewal-v2 .hmc-story .thumb-single img {width: 100%; height: 100%; object-fit: cover;}
.renewal-v2 .hmc-story .thumb-single + dl .tag {max-height: 15px; text-overflow: unset; white-space: unset; display: block; line-height: 1.4; word-break: break-all;}
.renewal-v2 .hmc-story .thumb-gallery {position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(2, 1fr); border-radius: 12px 12px 0 0; font-size: 0; height: 180px;}
.renewal-v2 .hmc-story .thumb-gallery img {width: 100%; height: 100%; max-width: 100%; object-fit: cover;}
.renewal-v2 .hmc-story .thumb-gallery [class^="thumb"] {position: relative;}
.renewal-v2 .hmc-story .thumb-gallery [class^="thumb"] img {position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover;}
.renewal-v2 .hmc-story .thumb-gallery .thumb1 {grid-row: 1/3;}
.renewal-v2 .hmc-story .thumb-full {position: relative; overflow: hidden; padding-top: 102%;}
.renewal-v2 .hmc-story .thumb-full::after {position: absolute; top: -2px; left: -2px; width: calc(100% + 4px); height: calc(100% + 4px); background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #002C5F 100%); content: "";}
.renewal-v2 .hmc-story .thumb-full img {position: absolute; top: 0; lefT: 0; right: 0; width: 100%; height: 100%; object-fit: cover;}
.renewal-v2 .hmc-story .thumb-full ~ dl {position: absolute; bottom: 0; right: 0; left: 0;}
.renewal-v2 .hmc-story .thumb-full ~ dl .text-big {color: #fff;}

.renewal-v2 .hmc-story.hmc-list {}
.renewal-v2 .hmc-story.hmc-list a {display: flex;}
.renewal-v2 .hmc-story.hmc-list .thumb-list {overflow: hidden; flex-shrink: 0; width: 108px; height: 108px; border-radius: 12px;}
.renewal-v2 .hmc-story.hmc-list .thumb-list img {display: block; width: 100%; height: 100%; object-fit: cover;}
.renewal-v2 .hmc-story.hmc-list dl {overflow: hidden; padding: 0; margin-left: 16px;}
.renewal-v2 .hmc-story.hmc-list dt {font-size: 12px; line-height: 16px; font-family:"HeadMedium";}
.renewal-v2 .hmc-story.hmc-list .text-big {font-size: 14px; line-height: 20px; font-family:"HDTextMedium";}
.renewal-v2 .hmc-story.hmc-list .tag {max-height: 34px; text-overflow: unset; white-space: unset; display: block; line-height: 1.4; word-break: break-all;}

.renewal-v2 .hmc-story dl {padding: 20px 24px 24px; font-family: "HDTextRegular";}
.renewal-v2 .hmc-story dl dt {display: flex; justify-content: space-between; color: #586069; }
.renewal-v2 .hmc-story dl dt strong {overflow: hidden; max-height: 32px; color: #00AAD2; font-family:"HeadMedium";}
.renewal-v2 .hmc-story dl dd {margin-top: 8px;}
.renewal-v2 .hmc-story dl dd.text-big {min-height: 40px; font-family:"HDTextBold"; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.renewal-v2 .hmc-story dl dd.text {color: #A0A6AD;}
.renewal-v2 .hmc-story dl .nickname {color: #586069; font-size: 12px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.renewal-v2 .hmc-story dl .tag {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "HDTextMedium";}
.renewal-v2 .hmc-story dl .tag span {display: inline-block;}
.renewal-v2 .hmc-story dl .tag span {margin-right: 2px;}
.renewal-v2 .hmc-story .swiper-slide {width: 100%; height: auto;}
.renewal-v2 .hmc-story .inner {padding: 24px;}
.renewal-v2 .hmc-story .title {font-family: "HDTextBold"; height: 24px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.renewal-v2 .hmc-story .text-content {margin-top: 8px; line-height: 18px; color: #616C78; overflow:hidden; text-overflow:ellipsis;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-family: "HDTextRegular";}
.renewal-v2 .hmc-story.hmc-story-banner .thumb {padding-top: 180px;}

.renewal-v2 .hmc-news {}
.renewal-v2 .hmc-news .news-list a {display: block;}
.renewal-v2 .hmc-news .news-list .thumb {overflow: hidden; border-radius: 4px;}
.renewal-v2 .hmc-news .news-list .thumb img {display: block; width: 100%; height: 100%; object-fit: cover;}
.renewal-v2 .hmc-news .news-list p {font-family: "HDTextRegular"; font-size: 14px; line-height: 20px; color: #252525; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.renewal-v2 .hmc-news .news-list.grid-type {display: flex; flex-wrap: wrap; gap: 16px;}
.renewal-v2 .hmc-news .news-list.grid-type a {width: calc(50% - 8px)}
.renewal-v2 .hmc-news .news-list.grid-type .thumb {}
.renewal-v2 .hmc-news .news-list.grid-type p {margin-top: 8px;}
.renewal-v2 .hmc-news .news-list.list-type a {display: flex; flex-wrap: wrap; gap: 12px;}
.renewal-v2 .hmc-news .news-list.list-type a + a {margin-top: 10px;}
.renewal-v2 .hmc-news .news-list.list-type .thumb {width: 105px; height: 64px; flex-shrink: 0;}
.renewal-v2 .hmc-news .news-list.list-type p {margin-top: 9px; min-width: 0; flex: 1; display: flex; flex-direction: column;}
.renewal-v2 .hmc-news .news-list.list-type p span {text-overflow: ellipsis;overflow: hidden;overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.renewal-v2 .hmc-news .btn-refresh {margin-top: 16px; display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; border-radius: 12px; text-align: center; background: #fff; color: #252525;}
.renewal-v2 .hmc-news .btn-refresh::before {display: inline-block; margin-right: 10px; width: 16px; height: 16px; background: url(../images/common/renewal-v2/ic-refresh-sm.svg) 100% 0 no-repeat; background-size: contain; content: "";}

.renewal-v2 .hot-keyword {display: flex; flex-wrap: wrap; gap: 8px;}
.renewal-v2 .hot-keyword .item {padding: 6px 16px; border-radius: 18px; background-color: #fff; font-size: 12px; line-height: 24px; color: #252525; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10);}

.renewal-v2 .card-datahub .card {position: relative;}
.renewal-v2 .card-datahub .title-area {align-items: flex-start;}
.renewal-v2 .card-datahub .title-area p {line-height: 17px;}

.renewal-v2 section.card-driving-insight,
.renewal-v2 .card-driving-insight {}
.renewal-v2 .card-driving-insight .card {position: relative; padding-right: 20px;}
.renewal-v2 .card-driving-insight .title-area {align-items: flex-start;}
.renewal-v2 .card-driving-insight .title-area p {line-height: 17px;}

.renewal-v2  .card-buyinfo-a .card {position: relative; padding-right: 128px; min-height: 96px;}
.renewal-v2  .card-buyinfo-a .img-car {position: absolute; top: 23px; right: 8px;}
.renewal-v2  .card-buyinfo-a .img-car img {width: 123px; height: 56px; }

.renewal-v2  .card-buyinfo-b .card {position: relative; height: 180px;}
.renewal-v2  .card-buyinfo-b .title-area,
.renewal-v2  .card-buyinfo-b h3 {position: relative; z-index: 2;}
.renewal-v2  .card-buyinfo-b .title-area .text-rgl {color: #F5F5F7}
.renewal-v2  .card-buyinfo-b .title-area + h3 {margin-top: 6px; color: #fff; font-family:"HeadMedium";}
.renewal-v2  .card-buyinfo-b .img-car {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.renewal-v2  .card-buyinfo-b .img-car img {width: 100%; height: 100%; object-fit: cover;}

.renewal-v2 .card-service-date .title {margin: 8px 0 16px;}
.renewal-v2 .card-service-date .card {display: flex; justify-content: space-between; align-items: flex-start;}
.renewal-v2 .card-service-date dl {flex: 1;}
.renewal-v2 .card-service-date dt {font-family:"HDTextBold";}
.renewal-v2 .card-service-date dd {margin-top: 8px; color: #606973;}
.renewal-v2 .card-service-date .d-day {width: 44px; height: 44px; border-radius: 100%; background-color: #F5F5F7; color: #00AAD2; font-size: 14px; line-height: 44px; text-align: center; font-family:"HDtextBold";}
.renewal-v2 .card-service-date .status {padding: 6px 12px; background: #F5F5F7; border-radius: 20px; color: #00AAD2; font-family:"HDTextMedium";}
.renewal-v2 .card-service-date .swiper-slide {width: 100%;}

.renewal-v2 .near-charging {}
.renewal-v2 .near-charging .card {display: block;}
.renewal-v2 .near-charging .title {font-family:"HDTextMedium"; color: #586069;}
.renewal-v2 .near-charging .text {font-family:"HDTextMedium"; color: #A0A6AD;}
.renewal-v2 .near-charging .charging-list {position: relative; overflow: hidden; display: flex; align-items: center; margin: 12px -4px; padding: 4px; background: #F5F5F7; border-radius: 24px;}
.renewal-v2 .near-charging .charging-list::before,
.renewal-v2 .near-charging .charging-list::after {position: absolute; left: 0; width: 100%; height: 10px; background: linear-gradient(180deg, rgba(245, 245, 247, 0.7) 0%, rgba(245, 245, 247, 0) 100%); content: '';}
.renewal-v2 .near-charging .charging-list::before {top: 0;}
.renewal-v2 .near-charging .charging-list::after {bottom: 0; transform: rotate(180deg);}
.renewal-v2 .near-charging .charging-list ul {flex: 1; overflow: hidden; height: 40px;}
.renewal-v2 .near-charging .charging-list ul li p {display: flex; align-items: center; padding: 12px; height: 40px; font-family:"HDtextBold";}
.renewal-v2 .near-charging .charging-list ul li p::before {display: block; margin-right: 8px; width: 24px; height: 24px; background-position: 0 0; background-repeat: no-repeat; background-size: contain; content: '';}
.renewal-v2 .near-charging .charging-list ul li .ev::before {background-image:url(../images/common/renewal-v2/ic-ev.svg)} 
.renewal-v2 .near-charging .charging-list ul li .fuel::before {background-image:url(../images/common/renewal-v2/ic-fuel.svg)} 
.renewal-v2 .near-charging .charging-list ul li .h2::before {background-image:url(../images/common/renewal-v2/ic-h2.svg)} 
.renewal-v2 .near-charging .charging-list ul li .epit::before {width: 44px; height: 20px; background-image:url(../images/common/renewal-v2/ic-epit.svg)} 
.renewal-v2 .near-charging .charging-list ul li .srv::before {background-image:url(../images/common/renewal-v2/ic-service-network.svg)} 
.renewal-v2 .near-charging .charging-list .search {position: relative; z-index: 1; width: 76px; line-height: 40px; background: #002C5F; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06); border-radius: 46px; color: #fff; text-align: center; font-family: "HDTextMedium";}

.renewal-v2 section.recommed-gas,
.renewal-v2 .recommed-gas {padding-bottom: 0;}
.renewal-v2 .recommed-gas .carousel-swiper {padding-bottom: 16px;}
.renewal-v2 .recommed-gas .swiper-slide {width: 272px;}
.renewal-v2 .recommed-gas .card {display: block;}
.renewal-v2 .recommed-gas dt {overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-family:"HDTextMedium";}
.renewal-v2 .recommed-gas dt strong {margin-right: 2px; font-family:"HDTextBold"; color: #00AAD2;}
.renewal-v2 .recommed-gas dd {margin-top: 6px; color: #586069; font-family: "HDTextRegular";}

.renewal-v2 .section-bottom {z-index:2; position: relative; padding: 20px 24px; margin: 0; background: none;}
.renewal-v2 .section-bottom .inner {position: fixed; bottom: calc(constant(safe-area-inset-bottom) + (60px - 16px)); bottom: calc(env(safe-area-inset-bottom) + (60px - 16px)); right: 0; left: 0; margin: 8px 0 0; border-radius: 12px 12px 0px 0px; background: #FFFFFF; box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.06); }
.renewal-v2 .section-bottom .inner {padding: 20px 24px; border-bottom: 1px solid #F5F5F7; }
.renewal-v2 .section-bottom dt {font-family:"HDTextMedium";}
.renewal-v2 .section-bottom dd {margin-top: 4px; font-family:"HDTextRegular"; color: #8995A3;}

.renewal-v2 .wash-service {padding: 24px; margin: 0; background: none; color: #fff}
.renewal-v2 .wash-service dt {font-family:"HDTextBold";}
.renewal-v2 .wash-service dd {margin-top: 2px; opacity: .75;}

.renewal-v2 .car-subsidy {}
.renewal-v2 .car-subsidy .card {display: block;}
.renewal-v2 .car-subsidy .title-area {align-items: flex-end;}
.renewal-v2 .car-subsidy .title-area p {flex: 1}
.renewal-v2 .car-subsidy .title-area .icons {font-size: 0;} 
.renewal-v2 .car-subsidy .icon {margin: 0 0 0 4px;}
.renewal-v2 .car-subsidy .icon.ev {width: 20px; height: 20px;}
.renewal-v2 .car-subsidy .icon.h2 {width: 20px; height: 20px;}
.renewal-v2 .car-subsidy a {position: relative; overflow: hidden; display: flex; align-items: center; margin: 10px -4px 0; padding: 4px 4px 4px 16px; background: #F5F5F7; border-radius: 24px;}
.renewal-v2 .car-subsidy a p {flex: 1; font-size: 18px; line-height: 24px; font-family:"HDtextBold";}
.renewal-v2 .car-subsidy .search {position: relative; z-index: 1; width: 73px; line-height: 40px; background: #002C5F; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06); border-radius: 20px; color: #fff; text-align: center; font-family: "HDTextMedium";}

/* home contents - 3.0 */
.renewal-v2 .section.quick-link-wrap {padding-right: 0;}
.renewal-v2 .quick-link-wrap .quick-inner {overflow: hidden; width: 100%; height: 88px;}
.renewal-v2 .quick-link-wrap .quick-menus {overflow-x: auto;  display: flex; column-gap: 24px; width: 100%; padding-right: 24px; padding-bottom: 30px; justify-content: left;}
.renewal-v2 .quick-link-wrap .quick-menus a {width: 52px; text-align: center; display: inline-block;}
.renewal-v2 .quick-link-wrap .quick-menus .img {display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; overflow: hidden; background-color: #fff; border-radius: 12px;}
.renewal-v2 .quick-link-wrap .quick-menus .img img {width: 32px; height: 32px;}
.renewal-v2 .quick-link-wrap .quick-menus .name {margin-top: 8px; display: block; word-break: break-all; color: #586069; font-size: 12px; line-height: 14px; font-family: "HDTextRegular";}
body.font-big .renewal-v2 .quick-link-wrap .quick-menus .name {font-size: 14px;}

@media (min-width: 768px) {
    .renewal-v2 .quick-link-wrap .quick-menus {justify-content: center; padding-right: 0;}
}

/* SHOP */
.renewal-v2 section.shop-top {margin-top: -56px; margin-bottom: 16px; padding-top: 56px; padding-bottom: 24px;}
.renewal-v2 .my-point-area {}
.renewal-v2 .my-point-area .my-point,
.renewal-v2 .my-point-area .login {display: block; justify-content: flex-start; align-items: center; padding: 18px 0; }
.renewal-v2 .my-point-area .login::after {margin-left: 6px; margin-top: -1px; vertical-align: middle; display: inline-block; width: 8px; height: 8px;  border: 1px solid #8995A3; border-width: 1px 1px 0 0; transform: rotate(45deg); content: '';}
.renewal-v2 .my-point-area .my-point .point {font-family:"HDTextMedium"; color: #00AAD2;}
.renewal-v2 .search-area {position: relative;}
.renewal-v2 .search-area .icon {position: absolute; top: 0; left: 0; width: 34px; height: 100%; padding-top: 14px; text-align: center;}
.renewal-v2 .search-area .icon::before {display: inline-block; width: 16px; height: 16px; background: url(../images/common/renewal-v2/ic-search.svg) 0 0 no-repeat; background-size: contain; content: '';}
.renewal-v2 .search-area input[type="text"],
.renewal-v2 .search-area input[type="search"] {height: 44px; padding: 12px 12px 12px 34px; background-color: #F5F5F7; border-radius: 6px; font-family: "HDTextRegular";}
.renewal-v2 .search-area input[type="text"]::placeholder,
.renewal-v2 .search-area input[type="search"]::placeholder {color: #A0A6AD;}
.renewal-v2 .search-area input[type="text"]:focus,
.renewal-v2 .search-area input[type="search"]:focus {border-bottom: none;}

.renewal-v2 .deal-list {}
.renewal-v2 .deal-list .swiper-slide {width: 150px; margin-right: 12px;}
.renewal-v2 .deal-list .thumb {overflow: hidden; position: relative; width: 150px; height: 150px; border-radius: 12px;}
.renewal-v2 .deal-list .thumb > img {object-fit: cover; width: 100%; height: 100%;}
.renewal-v2 .deal-list .thumb .deal-time {position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; background-color: #000000b2; text-align: center; color: #fff; line-height: 30px; font-family: "HDTextRegular";}
.renewal-v2 .deal-list .thumb .deal-time strong {font-family: "HDtextBold";}
.renewal-v2 .deal-list .price-area {margin-top: 12px;}
.renewal-v2 .deal-list .price-area p {font-size: 16px; line-height: 16px; font-family: "HDtextBold";}
.renewal-v2 .deal-list .price-area .percent {color: #00AAD2}
.renewal-v2 .deal-list .prod-text {margin-top: 8px; font-family: "HDTextRegular"; overflow:hidden; text-overflow:ellipsis;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 15px;}
.renewal-v2 .deal-list .dimmed-msg {z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff;}
.renewal-v2 .deal-list .dimmed-msg .tit {font-family:"HDTextBold";}
.renewal-v2 .deal-list .dimmed-msg .text-date {margin-top: 4px; font-family: "HDTextMedium";}
.renewal-v2 .deal-list .deal-dimmed {pointer-events: none;}
.renewal-v2 .deal-list .deal-dimmed .thumb::after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .65; content: ''}
.renewal-v2 .deal-list .deal-dimmed .price-area {opacity: .4;}

.renewal-v2 .category-lst {}
.renewal-v2 .category-lst .swiper-slide {width: 52px; text-align: center;}
.renewal-v2 .category-lst .thumb {overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 5px; width: 52px; height: 52px; border-radius: 12px; background-color: #fff;}
.renewal-v2 .category-lst .thumb img {max-width: 100%; object-fit: cover;}
.renewal-v2 .category-lst .category-name {margin-top: 10px; font-family: "HDTextMedium"; color: #586069; height: 28px; line-height: 14px; word-break: break-all;}
.renewal-v2 .brand-lst .item {width: 117px; height: 186px; padding: 12px 0; border-radius: 12px; background-color: #fff;}
.renewal-v2 .brand-lst .item .thumb {display: flex; align-items: center; justify-content: center; margin-bottom: 12px; padding: 0; width: 100%; height: 122px;}
.renewal-v2 .brand-lst .item p {color: #586069; font-size: 12px; line-height: 14px; font-family: "HDTextMedium"; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}

.renewal-v2 section.best-list,
.renewal-v2 .best-list {padding-bottom: 0;}
.renewal-v2 .best-list .card {margin-bottom: 16px;}
.renewal-v2 .best-list .swiper-slide {position: relative; width: 182px; height: auto; padding: 20px 20px 24px;}
.renewal-v2 .best-list .thumb {position: relative; overflow: hidden; width: 100%; height: 142px; border-radius: 100%;}
.renewal-v2 .best-list .thumb:after {position: absolute; left: 0; top: 0; background-color: #000; opacity: .03; border-radius: 100%; width: 100%; height: 100%; content: '';}
.renewal-v2 .best-list .thumb img {max-width: 100%; max-height: 100%;}
.renewal-v2 .best-list .rank {z-index: 1; position: absolute; top: 20px; left: 20px; padding-top: 6px; width: 26px; height: 32px; color: #fff; font-family: "HDtextBold"; text-align: center;}
.renewal-v2 .best-list .rank::before {position: absolute; top:0; left: 0; width: 100%; height: 100%; background: url(../images/common/renewal-v2/ic-rank.svg) 0 0 no-repeat; background-size: contain; content: '';}
.renewal-v2 .best-list .rank span {position: relative; display: block; line-height: 16px;}
.renewal-v2 .best-list .price-area {margin-top: 20px; word-break: break-all;}
.renewal-v2 .best-list .price-area p {font-family: "HDtextBold";}
.renewal-v2 .best-list .price-area p * {display: inline-block;}
.renewal-v2 .best-list .price-area .percent {margin-right: 4px; color: #00AAD2}
.renewal-v2 .best-list .price-area .won {margin-left: -2px; line-height: 24px;}
.renewal-v2 .best-list .price-area .normal-price {margin-top: 4px; text-decoration: line-through; font-family: "HDTextRegular"; color: #A0A6AD;}
.renewal-v2 .best-list .prod-text {margin-top: 8px; line-height: 18px; font-family: "HDTextRegular"; overflow:hidden; text-overflow:ellipsis;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

/* service */
.renewal-v2 .service-top-area {margin-top: -56px; margin-bottom: 12px; padding-top: 56px; padding-bottom: 20px; background-color: #fff;}
.renewal-v2 .tab-round {display: flex; align-items: center; column-gap: 8px;}
.renewal-v2 .tab-round button {padding: 0 10px; border-radius: 35px; height: 28px; border: 1px solid #E3E5E8; background-color: #fff; text-align: center; color: #A0A6AD; font-size: 14px; line-height: 16px; font-family: "HDTextMedium";}
.renewal-v2 .tab-round button.on {background-color: #00AAD2; color: #fff; border: none;}

.renewal-v2 .service-home,
.renewal-v2 section.service-home {padding-right: 17px; padding-left: 17px;}
.renewal-v2 .service-home .tab-round {padding-right: 7px; padding-left: 7px;}
.renewal-v2 .service-home-lst {display: grid; grid-template-columns: repeat(4, 60px); justify-content: space-between;}
.renewal-v2 .service-home-lst > a {margin-top: 16px; padding-top: 8px; display: flex; flex-direction: column; align-items: center; width: 60px; text-align: center;}
.renewal-v2 .service-home-lst .icon {display: inline-block; width: 40px; height: 40px; background-repeat: no-repeat; background-position: 50%; background-size: cover;}
.renewal-v2 .service-home-lst .tx {display: block; margin-top: 8px; font-size: 14px; line-height: 16px; font-family: "HDTextRegular";}
.renewal-v2 .service-home .service-home-lst {display: grid; grid-template-columns: repeat(4, 72px); justify-content: space-between;}
.renewal-v2 .service-home .service-home-lst a {width: 72px; min-height: 85px; margin-bottom: 15px;}
.renewal-v2 .service-home .service-home-lst .tx {margin-top: 10px;}
.renewal-v2 .tab-round ~ .service-home-lst {margin-top: 24px;}
.renewal-v2 .tab-round ~ .service-home-lst > a {margin-top: 0; padding-top: 0;}

/* visit ,detailing ,pickup ,driver ,delivery ,insurance ,e-pit ,maintenance ,emergency ,goto ,warranty ,network ,gas ,electric, hydrogen, ioniq */
.renewal-v2 .service-home-lst .icon.visit {background-image: url(../images/common/renewal-v2/ic-service-visit.png)}
.renewal-v2 .service-home-lst .icon.detailing {background-image: url(../images/common/renewal-v2/ic-service-detailing.png)}
.renewal-v2 .service-home-lst .icon.pickup {background-image: url(../images/common/renewal-v2/ic-service-pickup.png)}
.renewal-v2 .service-home-lst .icon.driver {background-image: url(../images/common/renewal-v2/ic-service-driver.png)}
.renewal-v2 .service-home-lst .icon.delivery {background-image: url(../images/common/renewal-v2/ic-service-delivery.png)}
.renewal-v2 .service-home-lst .icon.insurance {background-image: url(../images/common/renewal-v2/ic-service-insurance.png)}
.renewal-v2 .service-home-lst .icon.e-pit {background-image: url(../images/common/renewal-v2/ic-service-epit.png)}
.renewal-v2 .service-home-lst .icon.maintenance {background-image: url(../images/common/renewal-v2/ic-service-maintenance.png)}
.renewal-v2 .service-home-lst .icon.emergency {background-image: url(../images/common/renewal-v2/ic-service-emergency.png)}
.renewal-v2 .service-home-lst .icon.goto {background-image: url(../images/common/renewal-v2/ic-service-goto.png)}
.renewal-v2 .service-home-lst .icon.warranty {background-image: url(../images/common/renewal-v2/ic-service-warranty.png)}
.renewal-v2 .service-home-lst .icon.ioniq {background-image: url(../images/common/renewal-v2/ic-service-ioniq.png)}
.renewal-v2 .service-home-lst .icon.remote {background-image: url(../images/common/renewal-v2/ic-service-remote.png)}
.renewal-v2 .service-home-lst .icon.network {background-image: url(../images/common/renewal-v2/ic-service-network.png)}
.renewal-v2 .service-home-lst .icon.gas {background-image: url(../images/common/renewal-v2/ic-service-gas.png)}
.renewal-v2 .service-home-lst .icon.electric {background-image: url(../images/common/renewal-v2/ic-service-electric.png)}
.renewal-v2 .service-home-lst .icon.hydrogen {background-image: url(../images/common/renewal-v2/ic-service-hydrogen.png)}
.renewal-v2 .service-home-lst .icon.self-diagnosis {background-image: url(../images/common/renewal-v2/ic-service-self-diagnosis.png)}
.renewal-v2 .service-home-lst .icon.KONA {background-image: url(../images/common/renewal-v2/ic-service-kona.png)}
.renewal-v2 .service-home-lst .icon.luckyH {background-image: url(../images/common/renewal-v2/ic-service-luckyH.png)}
.renewal-v2 .service-home-lst .icon.EV-care {background-image: url(../images/common/renewal-v2/ic-service-EV-care.png)}
.renewal-v2 .service-home-lst .icon.EV-card {background-image: url(../images/common/renewal-v2/ic-service-EV-card.png)}
.renewal-v2 .service-home-lst .icon.whistle {background-image: url(../images/common/renewal-v2/ic-service-whistle.png)}
.renewal-v2 .service-home-lst .icon.newcar {background-image: url(../images/common/renewal-v2/ic-service-newcar.png)}
.renewal-v2 .service-home-lst .icon.lpg {background-image: url(../images/common/renewal-v2/ic-service-lpg.png)}

/* settings */
.renewal-v2 .settings {margin: 0; padding: 12px 0; background: none;}
.renewal-v2 .settings .title {display: block; padding: 12px 24px; font-size: 14px; line-height: 16px; color: #A0A6AD; font-family: "HDTextRegular";}
.renewal-v2 .settings .title + .setting-box {padding-top: 0;}
.renewal-v2 .settings .setting-box {padding: 12px 0;}
.renewal-v2 .settings .lst {background-color: #fff;}
.renewal-v2 .settings .item {position: relative; font-family: "HDTextRegular";}
.renewal-v2 .settings .item:nth-child(n + 2) {border-top: 1px solid #F5F5F7;}
.renewal-v2 .settings .item .inner {position: relative; display: block; padding: 20px 64px 20px 24px;}
.renewal-v2 .settings .item a::after {position: absolute; right: 26px; top: 25px; width: 7px; height: 7px; border: 1px solid #A0A6AD; border-width: 1px 1px 0 0; transform: rotate(45deg); content: '';}
.renewal-v2 .settings .item h3 {font-size: 16px; line-height: 20px; font-family: "HDTextRegular";}
.renewal-v2 .settings .sub-text {margin-top: 8px; color: #586069; font-size: 14px; line-height: 16px; font-family: "HDTextRegular";}
.renewal-v2 .settings .link {text-decoration: underline;}
.renewal-v2 .settings .update {position: absolute; top: 19px; right: 38px; color: #00AAD2; font-family: "HDTextMedium";}
.renewal-v2 .settings .toggle-wrap { width: 36px; height: 20px; position: absolute; top: 20px; right: 24px;}
.renewal-v2 .settings .withdraw a {color: #515961}

/* my */
.renewal-v2 .my-top-area {margin-top: -56px; padding-top: 56px; padding-bottom: 16px; background-color: #fff;}
.renewal-v2 section.my-home-profile {display: flex; justify-content: space-between; padding-top: 24px; }
.renewal-v2 .my-home-profile .profile .name {font-size: 24px; line-height: 32px;} 
.renewal-v2 .my-home-profile .profile .name::after {display: inline-block; margin-top: 11px; margin-left: 10px; vertical-align: top; width: 9px; height: 9px;  border: 1px solid #A0a6AD; border-width: 1px 1px 0 0; transform: rotate(45deg);  content: '';} 
.renewal-v2 .my-home-profile .profile .mail {margin-top: 4px; color: #A0A6AD; font-family: "HDTextRegular";}
.renewal-v2 .my-home-profile .logout {margin-top: 8px; color: #586069; font-family: "HDTextMedium";}
.renewal-v2 .my-home-profile .logout::after {display: inline-block; margin-left: 4px; vertical-align: top; width: 16px; height: 16px; background: url(../images/common/renewal-v2/ic-exit.svg) 0 0 no-repeat; background-size: contain; content: '';}

.renewal-v2 .my-bluemembers,
.renewal-v2 section.my-bluemembers {padding-top: 8px;}
.renewal-v2 .my-bluemembers .card {padding: 0;}
.renewal-v2 .my-bluemembers .blue-point {display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding: 24px; min-height: 80px; background-color: #002C5F; color: #fff;}
.renewal-v2 .my-bluemembers .blue-point dt {font-family: "HDTextRegular";}
.renewal-v2 .my-bluemembers .blue-point .point {font-size: 24px; line-height: 32px; font-family: "HDTextRegular";}
.renewal-v2 .my-bluemembers .blue-point .point strong {font-family: "HeadMedium";}
.renewal-v2 .my-bluemembers .blue-point .btn-refresh {display: block; width: 50px; height: 24px; text-align: right;}
.renewal-v2 .my-bluemembers .blue-point .btn-refresh::before {display: inline-block; width: 100%; height: 100%; background: url(../images/common/renewal-v2/ic-refresh.svg) 100% 0 no-repeat; background-size: contain; content: '';}
.renewal-v2 .my-bluemembers .blue-point .partner {width: 100%; text-align: right;  padding-top: 10px; }
.renewal-v2 .my-bluemembers .blue-point .partner a {display: inline-block;}
.renewal-v2 .my-bluemembers .blue-point .partner a::after {display: inline-block; margin-left: 2px; width:8px; height: 8px; border: 1px solid #fff; border-width: 1px 1px 0 0; transform: rotate(45deg);  content: "";}

.renewal-v2 .my-bluemembers .menu {position: relative; display: flex;}
.renewal-v2 .my-bluemembers .menu .item {position: relative; z-index: 1; flex: 1; margin: 16px 0; text-align: center; font-family: "HDTextMedium";}
.renewal-v2 .my-bluemembers .menu .item:nth-child(n + 2) {border-left: 1px solid #00000019;}
.renewal-v2 .my-bluemembers .menu .item .num {color: #00AAD2;}

.renewal-v2 .my-bluemembers .link-shop {margin-top: -20px; padding-bottom: 24px; background-color: #002C5F;}
.renewal-v2 .my-bluemembers .link-shop a {display: block; padding: 0 24px; font-size: 12px; color: #ffffff7f;}
.renewal-v2 .my-bluemembers .link-shop a span {display: inline-block; padding-right: 9px; margin-right: 5px;}
.renewal-v2 .my-bluemembers .link-shop a::after {display: inline-block; margin-left: -5px; vertical-align: middle; width: 40px; height: 40px; background:url(../images/common/renewal-v2/ic-header-shop-white.svg) no-repeat center;  content: "";}

.renewal-v2 section.my-home-menu {padding: 32px 24px 16px;}
.renewal-v2 .my-home-menu .service-home-lst > a {margin-top: 0; padding-top: 0;}
.renewal-v2 .my-home-menu .icon {width: 40px; height: 40px;}
.renewal-v2 .my-home-menu .icon.service {background-image: url(../images/common/renewal-v2/ic-my-home-service.svg)}
.renewal-v2 .my-home-menu .icon.event {background-image: url(../images/common/renewal-v2/ic-my-home-event.svg)}
.renewal-v2 .my-home-menu .icon.story {background-image: url(../images/common/renewal-v2/ic-my-home-story.svg)}
.renewal-v2 .my-home-menu .icon.manual {background-image: url(../images/common/renewal-v2/ic-my-home-manual.svg)}

.renewal-v2 .my-home-link h3 {margin-bottom: 16px;}
.renewal-v2 .my-home-link .card {display: flex; flex-wrap: wrap; row-gap: 24px;}
.renewal-v2 .my-home-link a {display: flex; align-items: center; width: 50%; font-family: "HDTextRegular";}
.renewal-v2 .my-home-link a::before {display: inline-block; margin-right: 12px; flex: 0 0 20px; height: 20px; border-radius: 6px; background-repeat: no-repeat; background-position: 50%; background-size: cover; content: '';}

.renewal-v2 .my-home-link .facebook::before {background-image: url(../images/common/renewal-v2/ic-sns-facebook.png)}
.renewal-v2 .my-home-link .insta::before {background-image: url(../images/common/renewal-v2/ic-sns-insta.png)}
.renewal-v2 .my-home-link .youtube::before {background-image: url(../images/common/renewal-v2/ic-sns-youtube.png)}
.renewal-v2 .my-home-link .kakao::before {background-image: url(../images/common/renewal-v2/ic-sns-kakaostory.png)}
.renewal-v2 .my-home-link .bluelink::before {background-image: url(../images/common/renewal-v2/ic-family-bluelink.png)}
.renewal-v2 .my-home-link .selection::before {background-image: url(../images/common/renewal-v2/ic-family-selection.png)}
.renewal-v2 .my-home-link .digitalkey::before {background-image: url(../images/common/renewal-v2/ic-family-digitalkey.png)}
.renewal-v2 .my-home-link .carpay::before {background-image: url(../images/common/renewal-v2/ic-family-carpay.png)}
.renewal-v2 .my-home-link .truckbus::before {background-image: url(../images/common/renewal-v2/ic-family-truckbus.png)}
.renewal-v2 .my-home-link .epit::before {background-image: url(../images/common/renewal-v2/ic-family-epit.png)}
.renewal-v2 .my-home-link .drive::before {background-image: url(../images/common/renewal-v2/ic-family-drive.png)}
.renewal-v2 .my-home-link .homepage::before {background-image: url(../images/common/renewal-v2/ic-family-homepage.png)}
.renewal-v2 .my-home-link .x::before {background-image: url(../images/common/renewal-v2/ic-sns-x.png)} 

.renewal-v2 .my-home-list .card {padding: 0;}
.renewal-v2 .my-home-list li:nth-child(n + 2) {border-top: 1px solid #F5F5F7;}
.renewal-v2 .my-home-list li a {display: flex; align-items: center; padding: 16px 24px; font-size: 16px; line-height: 20px; font-family: "HDTextRegular";}
.renewal-v2 .my-home-list li a::after {flex-shrink: 0; margin-left: auto; width: 8px; height: 8px;  border: 1px solid #A0a6AD; border-width: 1px 1px 0 0; transform: rotate(45deg); content: '';}

/* my - 서비스 소개 */
.renewal-v2 .welcome-myhd {}
.renewal-v2 .welcome-myhd .intro-swiper {margin: 0; text-align: center; background: #fff;}
.renewal-v2 .welcome-myhd .intro-swiper .swiper-slide {width: 100%; min-height: 588px; padding-top: 24px;}
.renewal-v2 .welcome-myhd .intro-swiper .swiper-slide h3 {min-height: 48px; display: flex; align-items: center; justify-content: center; flex-direction: column; font-family: "HDTextRegular";}
.renewal-v2 .welcome-myhd .intro-swiper .swiper-slide h3 strong {font-family: "HDTextBold";}
.renewal-v2 .welcome-myhd .intro-swiper .app-img img {max-width: 100%; }

.renewal-v2 .welcome-myhd .intro-swiper .first-swiper h2 {font-family:"HeadMedium"; font-size: 24px; line-height: 32px; color: #002C5F;}
.renewal-v2 .welcome-myhd .intro-swiper .first-swiper h2 + p {margin: 4px auto 2px; max-width: 246px; line-height: 20px; font-family: "HDTextRegular";}
.renewal-v2 .welcome-myhd .intro-swiper .first-swiper .text-intro2 {margin-top: -24px; color: #00AAD2; font-family: "HDTextMedium";}

.renewal-v2 .welcome-myhd .intro-swiper .intro-btn {position: absolute; top: 50%; width: 56px; height: 56px; margin-top: calc(-1 * var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center;}
.renewal-v2 .welcome-myhd .intro-swiper .intro-btn.prev {left: 0;}
.renewal-v2 .welcome-myhd .intro-swiper .intro-btn.next {right: 0;}
.renewal-v2 .welcome-myhd .intro-swiper .intro-btn::after {width: 24px; height: 24px; background: url(../images/common/renewal-v2/btn-intro-arrow.svg) 50% no-repeat; content: '';}
.renewal-v2 .welcome-myhd .intro-swiper .intro-btn.prev::after {transform: rotate(-180deg);}
.renewal-v2 .welcome-myhd .intro-swiper .intro-btn.swiper-button-disabled {opacity: 0;}

.renewal-v2 .welcome-myhd .all-menu {padding: 16px 24px 32px}
.renewal-v2 .welcome-myhd .all-menu .card.link {border: 1px solid #E3E5E8;}

.renewal-v2 section.service-intro-menu {margin: 0; padding-top: 32px; background: none;}
.renewal-v2 .service-intro-menu h3 {margin-bottom: 16px; font-family: "HDTextRegular";}
.renewal-v2 .service-intro-menu .carousel-swiper {padding-bottom: 16px;}
.renewal-v2 .service-intro-menu .swiper-slide.card {padding: 20px; width: 96px; height: 104px; text-align: center; color: #586069;}
.renewal-v2 .service-intro-menu .icon {display: block; margin: 0 auto 8px; width: 40px; height: 40px;}
.renewal-v2 .service-intro-menu .icon::before {display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50%; background-size: cover; content: '';}
.renewal-v2 .service-intro-menu .icon.ic-service-join::before {background-image: url(../images/common/renewal-v2/ic-service-join.svg)}
.renewal-v2 .service-intro-menu .icon.ic-service-point::before {background-image: url(../images/common/renewal-v2/ic-service-point.svg)}
.renewal-v2 .service-intro-menu .icon.ic-service-partner::before {background-image: url(../images/common/renewal-v2/ic-service-partner.svg)}
.renewal-v2 .service-intro-menu .icon.ic-service-card::before {background-image: url(../images/common/renewal-v2/ic-service-card.svg)}

.renewal-v2 .service-intro-menu .mycar-info-wrap {padding-top: 16px;}

/* onboarding */
.renewal-v2 #pop-container.onboarding {padding-top: 0;}
.renewal-v2 #pop-container.onboarding .welcome-myhd .intro-swiper .first-swiper h2 {display: block; padding: 0; margin-bottom: 0; border: none; font-family:"HeadMedium"; font-size: 24px; line-height: 32px; color: #002C5F;}
.renewal-v2 #pop-container.onboarding .welcome-myhd {position: relative; display: flex; flex-direction: column; height: 100vh; background-color: #fff;}
.renewal-v2 #pop-container.onboarding .welcome-myhd .intro-swiper  {padding-top: 64px; flex: 1;}
.renewal-v2 #pop-container.onboarding .welcome-myhd .swiper-slide {padding-top: 0; min-height: unset;  display: flex; flex-direction: column; height: 100%;}
.renewal-v2 #pop-container.onboarding .welcome-myhd .title {height: 78px;}
.renewal-v2 #pop-container.onboarding .welcome-myhd .app-img {position: relative; flex: 1; height: calc(100% - 78px);}
.renewal-v2 #pop-container.onboarding .welcome-myhd .app-img img {max-height: 100%;}
.renewal-v2 #pop-container.onboarding .welcome-myhd .app-img .text-intro2 {position: absolute; width: 100%; text-align: center; bottom: 4.6%;}
.renewal-v2 #pop-container.onboarding .welcome-myhd .swiper-pagination {top: 40px; bottom: unset; font-size: 0;}
.renewal-v2 #pop-container.onboarding .welcome-myhd .swiper-pagination .swiper-pagination-bullet {margin: 0 2px; width: 4px; height: 4px; background: #E3E5E8; opacity: 1;}
.renewal-v2 #pop-container.onboarding .welcome-myhd .swiper-pagination .swiper-pagination-bullet-active {background: #00AAD2;}
.renewal-v2 #pop-container.onboarding .welcome-myhd .btn-wrap-v2 {column-gap: 8px;}

/* my car */
.renewal-v2 .mycar-wrap {display: flex; flex-flow: column wrap; padding: 0 24px 16px; width: 100%; }
.renewal-v2 .mycar-wrap section {margin: 0; background: none; width: 100%;}
.renewal-v2 .mycar-wrap .sec {padding: 12px 0;}
.renewal-v2 .mycar-wrap .sec .title {color: #586069; font-family: "HDTextRegular";}

.renewal-v2 .mycar-wrap .mycar-top-fixed {z-index: 91; position: absolute; top: 32px; left: 0; right: 0; background-color: #F5F5F7; padding: 0 24px; }
.renewal-v2 .handlebar-container .handlebar-inner.posr .mycar-top-fixed {top: 0; }
.renewal-v2 .mycar-wrap .mycar-top .title {position: relative; z-index: 91; display: inline-block; font-size: 24px; line-height: 32px; font-family:"HeadMedium"; padding-right: 20px; max-width: calc(100% - 80px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.renewal-v2 .mycar-wrap .mycar-top .title span {font-family:"HeadLight";}
.renewal-v2 .mycar-wrap .mycar-top label.title::after {position: absolute; top: 0; right: 5px;  display: inline-block; vertical-align: top; margin: 8px 0 0 0; width: 9px; height: 9px; border: solid #252525; border-width: 2px 2px 0  0; transform: rotate(135deg); content: '';}
.renewal-v2 .mycar-wrap .mycar-top .no-car {font-family:"HeadLight"}
.renewal-v2 .mycar-wrap .mycar-top .sub-text {display: block; padding-top: 4px; padding-bottom: 16px; color: #586069; font-family: "HDTextRegular";}
.renewal-v2 .mycar-wrap .mycar-top .sub-text.add-num {color: #A0A6AD;}
.renewal-v2 .mycar-wrap .mycar-top input[type="checkbox"],
.renewal-v2 .mycar-wrap .mycar-top input[type="radio"] {position: absolute; height: 1px; width: 1px; overflow: hidden;  clip: rect(1px,1px,1px,1px); clip: rect(1px 1px 1px 1px);}

.renewal-v2 .mycar-wrap .mycar-top .chk-mycar:checked ~ .mycar-lst {visibility: visible; opacity: 1; height: auto; transform: scaleY(1);}
.renewal-v2 .mycar-wrap .mycar-top .chk-mycar:checked ~ .my-info {margin-top: 22px;}
.renewal-v2 .mycar-wrap .mycar-top .chk-mycar:checked ~ label.title::after {margin-top: 12px; transform: rotate(315deg);}

.renewal-v2 .mycar-wrap .mycar-top.open .mycar-lst{visibility: visible; opacity: 1; height: auto; transform: scaleY(1);}
.renewal-v2 .mycar-wrap .mycar-top.close .mycar-lst {visibility: hidden; opacity: 0; height: 0; transform: scaleY(0); transform-origin:0 0; }

.renewal-v2 .mycar-wrap .mycar-top .mycar-lst {visibility: hidden; opacity: 0; height: 0; transform: scaleY(0); transform-origin:0 0; transition: all .3s ease; display: flex; flex-wrap: wrap;  }
.renewal-v2 .mycar-wrap .mycar-top .mycar-lst .carousel-swiper {width: calc(100% + 48px); padding: 24px; background-color: #DADBE3;}
.renewal-v2 .mycar-wrap .mycar-top .mycar-lst .item {width: 96px;}
.renewal-v2 .mycar-wrap .mycar-top .mycar-lst label {position: relative; overflow: hidden; display: block; border-radius: 12px; height: 64px; background-color: #fff; text-align: center;}
.renewal-v2 .mycar-wrap .mycar-top .mycar-lst label img {width: 100%; height: 100%; object-fit: contain;}
.renewal-v2 .mycar-wrap .mycar-top .mycar-lst .chk {display: none; position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; border-radius: 20px; background-color: #00AAD2; text-align: center;}
.renewal-v2 .mycar-wrap .mycar-top .mycar-lst .chk::after {display: inline-block; vertical-align: top; margin-top: 4px; width: 4px; height: 7px; border: solid #fff; border-width: 1px 0 0 1px; transform: rotate(-135deg); content: '';}
.renewal-v2 .mycar-wrap .mycar-top .mycar-lst .tx-abbr {padding-top: 17px; font-size: 24px; color: #66717D; font-family:"HeadLight";}
.renewal-v2 .mycar-wrap .mycar-top .mycar-lst p.text {margin-top: 8px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: "HDTextRegular";}
.renewal-v2 .mycar-wrap .mycar-top .mycar-lst .item input[type="radio"]:checked + label .chk {display: block;}
.renewal-v2 .mycar-wrap .mycar-top .mycar-lst .item input[type="radio"]:checked ~ p {color: #00AAD2;}

.renewal-v2 .mycar-wrap .mycar-top .btns {display: inline-flex; z-index: 92; position: absolute; top: 0; right: 24px; column-gap: 8px;}
.renewal-v2 .mycar-wrap .mycar-top .btns button {width: 32px; height: 32px; border-radius: 100px; }
.renewal-v2 .mycar-wrap .mycar-top .btns .bt-boolmark {background:#E3E5E8 url(../images/common/renewal-v2/ic-star.svg) 50% no-repeat; background-size: 14px 15px;}
.renewal-v2 .mycar-wrap .mycar-top .btns .bt-boolmark.active {background-color: #00AAD2;}
.renewal-v2 .mycar-wrap .mycar-top .btns .bt-more {background: url(../images/common/renewal-v2/btn-more.svg) 0 no-repeat; background-size: cover; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06);}

.renewal-v2 .mycar-wrap .mycar-top .my-info .icon {background-repeat: no-repeat; background-position: 50%; background-size: cover;}
.renewal-v2 .mycar-wrap .mycar-top .my-info ul {margin-bottom: 8px;}
.renewal-v2 .mycar-wrap .mycar-top .my-info li {display: flex; align-items: center;}
.renewal-v2 .mycar-wrap .mycar-top .my-info li:nth-child(n + 2) {margin-top: 8px;}
.renewal-v2 .mycar-wrap .mycar-top .my-info li a {display: flex; align-items: center;}
.renewal-v2 .mycar-wrap .mycar-top .my-info li a::after {margin-left: 2px; width: 8px; height: 8px; border: 1px solid #9FAAB5; border-width: 1px 1px 0 0; transform: rotate(45deg); content: '';}
.renewal-v2 .mycar-wrap .mycar-top .my-info li .icon {margin-right: 8px; width: 20px; height: 20px;}
.renewal-v2 .mycar-wrap .mycar-top .my-info li .ic-heart {background-image: url(../images/common/renewal-v2/ic-heart.svg)}
.renewal-v2 .mycar-wrap .mycar-top .my-info li .ic-gauge {background-image: url(../images/common/renewal-v2/ic-gauge.svg)}
.renewal-v2 .mycar-wrap .mycar-top .my-info li .ic-fix {background-image: url(../images/common/renewal-v2/ic-fix.svg)}
.renewal-v2 .mycar-wrap .mycar-top .my-info li .ic-fix-gray {background-image: url(../images/common/renewal-v2/ic-fix-gray.svg)}
.renewal-v2 .mycar-wrap .mycar-top .my-info li span {font-family: "HDTextMedium"; color: #515961;}
.renewal-v2 .mycar-wrap .mycar-top .my-info li strong {display: inline-block; vertical-align: top; margin-top: 3px; font-size: 11px; line-height: 12px; font-family: "HDtextBold"; color: #18AE87;}
.renewal-v2 .mycar-wrap .mycar-top .my-info .ic-bluelink,
.renewal-v2 .mycar-wrap .mycar-top .my-info .ic-digitalkey,
.renewal-v2 .mycar-wrap .mycar-top .my-info .ic-epit {display: inline-block; vertical-align: top; margin-right: 3px;}
.renewal-v2 .mycar-wrap .mycar-top .my-info .ic-bluelink {width: 58px; height: 20px; background-image: url(../images/common/renewal-v2/ic-bluelink.png)}
.renewal-v2 .mycar-wrap .mycar-top .my-info .ic-digitalkey {width: 58px; height: 20px; background-image: url(../images/common/renewal-v2/ic-digitalkey.png)}
.renewal-v2 .mycar-wrap .mycar-top .my-info .ic-epit {width: 40px; height: 20px; background-image: url(../images/common/renewal-v2/ic-epit.png)}

.renewal-v2 .mycar-wrap .car-rcmnd {width: calc(100% + 48px); margin: 24px -24px 40px;}
.renewal-v2 .mycar-wrap .car-rcmnd .swiper-container {height: 100%;}
.renewal-v2 .mycar-wrap .car-rcmnd .swiper-slide {width: 82.3%; display: flex; align-items: center;}
.renewal-v2 .mycar-wrap .car-rcmnd .swiper-slide img {width: 100%; opacity: .5; }
.renewal-v2 .mycar-wrap .car-rcmnd .swiper-slide-active img {opacity: 1;}

.renewal-v2 .mycar-wrap .car-rcmnd-lst .title {margin-bottom: 16px; line-height: 19px; font-family: "HDTextRegular"; color: #515961;}
.renewal-v2 .mycar-wrap .car-rcmnd-lst .carousel-swiper {padding-bottom: 24px;}
.renewal-v2 .mycar-wrap .car-rcmnd-lst .swiper-slide {width: 150px; height: auto; padding: 0;}
.renewal-v2 .mycar-wrap .car-rcmnd-lst .thumb {padding-top: 66.666%; background-position: 50%; background-repeat: no-repeat; background-size: cover;}
.renewal-v2 .mycar-wrap .car-rcmnd-lst .thumb img {object-fit: cover; width: 100%;}
.renewal-v2 .mycar-wrap .car-rcmnd-lst dl {padding: 20px 20px 24px;}
.renewal-v2 .mycar-wrap .car-rcmnd-lst dt {font-size: 18px; line-height: 24px; font-family:"HDTextMedium";}
.renewal-v2 .mycar-wrap .car-rcmnd-lst dd {margin-top: 4px; font-size: 12px; line-height: 14px; color: #9EA3A8;}

.renewal-v2 .mycar-wrap .mycar-img {margin-top: 8px; text-align: center;}
.renewal-v2 .mycar-wrap .mycar-img img {width: 100%;}

.renewal-v2 .mycar-wrap .mycar-info {}
.renewal-v2 .mycar-wrap dl.mycar-info {margin-bottom: 24px; display: flex; flex-wrap: wrap; row-gap: 12px; line-height: 1.2;}
.renewal-v2 .mycar-wrap .mycar-info dt {flex: 40%; color: #586069; font-family: "HDTextRegular";}
.renewal-v2 .mycar-wrap .mycar-info dd {flex: 60%; text-align: right; font-family: "HDTextMedium";}
.renewal-v2 .mycar-wrap .mycar-info + .anchor-text {display: block; margin: 0 -24px; border-top: 1px solid #F5F5F7; text-align: center;}

.renewal-v2 .mycar-wrap .mycar-detail {padding-bottom: 12px;}
.renewal-v2 .mycar-wrap .mycar-detail .card {padding: 0;}
.renewal-v2 .mycar-wrap .mycar-detail .info {position: relative; display: flex; justify-content: center; padding: 16px 0;}
.renewal-v2 .mycar-wrap .mycar-detail .info .item {flex: 1; text-align: center; font-family: "HDTextMedium";}
.renewal-v2 .mycar-wrap .mycar-detail .info .item:nth-child(n + 2) {border-left: 1px solid #F5F5F7;}
.renewal-v2 .mycar-wrap .mycar-detail .info dt {color: #586069;}
.renewal-v2 .mycar-wrap .mycar-detail .info dd {margin-top: 6px; font-family: "HDTextMedium";}
.renewal-v2 .mycar-wrap .mycar-detail .text-status {display: inline-block; margin-right: 4px;}

.renewal-v2 .mycar-wrap .mycar-detail .btn-tooltip {}
.renewal-v2 .mycar-wrap .mycar-detail .btn-tooltip:after {display: inline-block; width: 16px; height: 16px; vertical-align: middle; background: url(../images/common/renewal-v2/ic-info-question.svg) no-repeat; background-size: cover; content: '';}
.renewal-v2 .mycar-wrap .mycar-detail .box-tooltip.show {display: flex;}
.renewal-v2 .mycar-wrap .mycar-detail .box-tooltip {display: none; position: absolute; top: 46px; right: 6px; max-width: 280px; padding: 9px 6px 9px 16px; border-radius: 12px; background: #252525; text-align: left;}
.renewal-v2 .mycar-wrap .mycar-detail .box-tooltip::before {position: absolute; display: block; top: -10px; left: 0; width: 12px; height: 10px; background: url(../images/common/renewal-v2/ic-arr-tooltip.svg) no-repeat; background-size: cover; content: '';}
.renewal-v2 .mycar-wrap .mycar-detail .box-tooltip.lt::before {left: 12px;}
.renewal-v2 .mycar-wrap .mycar-detail .box-tooltip.ct::before {left: 50%; transform: translateX(-50%);}
.renewal-v2 .mycar-wrap .mycar-detail .box-tooltip.rt::before {left: unset; right: 12px;}
.renewal-v2 .mycar-wrap .mycar-detail .box-tooltip .cont {flex: 1; color: #E3E5E8; line-height: 1.4; padding: 3px 0; font-family: "HDTextRegular";}
.renewal-v2 .mycar-wrap .mycar-detail .box-tooltip .cont p {line-height: 1.4; font-family: "HDTextRegular";}
.renewal-v2 .mycar-wrap .mycar-detail .box-tooltip .close {position: relative; margin-left: 6px; width: 24px; height: 24px;}
.renewal-v2 .mycar-wrap .mycar-detail .box-tooltip .close::before,
.renewal-v2 .mycar-wrap .mycar-detail .box-tooltip .close::after {position: absolute; top: 3px; left: 11px; display: block; width: 1px; height: 18px; background: #A0A6AD; content: '';}
.renewal-v2 .mycar-wrap .mycar-detail .box-tooltip .close::before {transform: rotate(45deg);}
.renewal-v2 .mycar-wrap .mycar-detail .box-tooltip .close::after {transform: rotate(-45deg);}

.renewal-v2 .mycar-wrap .mycar-detail .ic-charging {display: inline-block; vertical-align: middle; width: 10px; height: 16px; background: url(../images/common/renewal-v2/ic-charging.svg) no-repeat; background-size: cover;}
.renewal-v2 .mycar-wrap .mycar-detail .ic-battery {display: inline-block; width: 24px; height: 10px; border-radius: 4px; overflow: hidden; background: #E3E5E8;}
.renewal-v2 .mycar-wrap .mycar-detail .ic-battery::before {display: block; width: 100%; height: 100%; background: #fff; content: '';}
.renewal-v2 .mycar-wrap .mycar-detail .ic-battery.very-high::before {width: 100%; background:#2ABD69;}
.renewal-v2 .mycar-wrap .mycar-detail .ic-battery.high::before {width: 18px; background:#2ABD69;}
.renewal-v2 .mycar-wrap .mycar-detail .ic-battery.normal::before {width: 12px; background:#FAC548;}
.renewal-v2 .mycar-wrap .mycar-detail .ic-battery.low::before {width: 6px; background:#DE534A;}
.renewal-v2 .mycar-wrap .mycar-detail .status-info {display: flex; flex-wrap: wrap; justify-content: center; column-gap: 16px; row-gap: 4px; padding: 12px 24px; border-top: 1px solid #F5F5F7;}
.renewal-v2 .mycar-wrap .mycar-detail .status-info.over-icon {display: grid; grid-template-columns: repeat(5, 40px); grid-template-areas:
        "x a b c y"
        "g e d f h";}
.renewal-v2 .mycar-wrap .mycar-detail .status-info.over-icon span:nth-child(1) {grid-area: a;}
.renewal-v2 .mycar-wrap .mycar-detail .status-info.over-icon span:nth-child(2) {grid-area: b;}
.renewal-v2 .mycar-wrap .mycar-detail .status-info.over-icon span:nth-child(3) {grid-area: c;}
.renewal-v2 .mycar-wrap .mycar-detail .status-info.over-icon span:nth-child(4) {grid-area: d;}
.renewal-v2 .mycar-wrap .mycar-detail .status-info.over-icon span:nth-child(5) {grid-area: e;}
.renewal-v2 .mycar-wrap .mycar-detail .status-info.over-icon span:nth-child(6) {grid-area: f;}
.renewal-v2 .mycar-wrap .mycar-detail .status-info.over-icon span:nth-child(7) {grid-area: g;}

.renewal-v2 .mycar-wrap .mycar-detail .status-info .br {background: transparent; flex-basis: 100%; height: 1px;}
.renewal-v2 .mycar-wrap .mycar-detail .status-info.over-wrap .icon:nth-child(5) {order: 5;}
.renewal-v2 .mycar-wrap .mycar-detail .status-info.over-wrap .icon:nth-child(6) {order: 6;}
.renewal-v2 .mycar-wrap .mycar-detail .status-info.over-wrap .icon:nth-child(7) {order: 7;}
.renewal-v2 .mycar-wrap .mycar-detail .status-info.over-wrap .icon:nth-child(8) {order: 8;}
.renewal-v2 .mycar-wrap .mycar-detail .status-info.over-wrap .icon:nth-child(9) {order: 9;}

.renewal-v2 .mycar-wrap .mycar-detail .status-info .icon {width: 40px; height: 40px; background: url(../images/common/renewal-v2/ic-mycar-info.svg) no-repeat; background-size: cover; }
.renewal-v2 .mycar-wrap .mycar-detail .status-info .icon.active {width: 40px; height: 40px; background-image: url(../images/common/renewal-v2/ic-mycar-info-active.svg);}
.renewal-v2 .mycar-wrap .mycar-detail .status-info .ic-Brake {background-position: 0 0;}
.renewal-v2 .mycar-wrap .mycar-detail .status-info .ic-EngineOil {background-position: -40px 0;}
.renewal-v2 .mycar-wrap .mycar-detail .status-info .ic-Tires {background-position: -80px 0;}
.renewal-v2 .mycar-wrap .mycar-detail .status-info .ic-Fuel {background-position: -120px 0;}
.renewal-v2 .mycar-wrap .mycar-detail .status-info .ic-Washer {background-position: -160px 0;}
.renewal-v2 .mycar-wrap .mycar-detail .status-info .ic-LampWire {background-position: -200px 0;}
.renewal-v2 .mycar-wrap .mycar-detail .status-info .ic-Key {background-position: -240px 0;}
.renewal-v2 .mycar-wrap .mycar-detail .tx-date {margin-bottom: 8px; text-align: right; opacity: .75; color: #A0A6AD; font-family: "HDTextRegular";}

.renewal-v2 .mycar-wrap .basic-check dt {margin-top: 8px; font-family: "HDtextBold";}
.renewal-v2 .mycar-wrap .basic-check dd {margin-top: 8px; color: #99A2AD; font-family: "HDTextRegular";}

.renewal-v2 .mycar-wrap {}
.renewal-v2 .mycar-wrap .safety-score {font-family: "HDTextRegular";}
.renewal-v2 .mycar-wrap .safety-score .score-header {display: flex; justify-content: space-between; align-items: flex-start;}
.renewal-v2 .mycar-wrap .safety-score .title {margin-bottom: 8px;}
.renewal-v2 .mycar-wrap .safety-score .text-info {color: #586069;}
.renewal-v2 .mycar-wrap .safety-score .text-error {color: #E63312;}
.renewal-v2 .mycar-wrap .safety-score .btn-refresh {display: inline-flex;}
.renewal-v2 .mycar-wrap .safety-score .ic-refresh {display: inline-block; vertical-align: middle; margin-left: 3px;  width: 32px; height: 32px;}
.renewal-v2 .mycar-wrap .safety-score .ic-refresh::before {display: inline-block; width: 100%; height: 100%; background: url(../images/common/renewal-v2/ic-refresh-blue.svg) 50% 1px no-repeat; background-size: contain; content: '';}

.renewal-v2 .mycar-wrap .safety-score .score {display: flex; font-size: 0;}
.renewal-v2 .mycar-wrap .safety-score .score .my-score {font-size: 24px; line-height: 28px; font-family: "HeadMedium";}
.renewal-v2 .mycar-wrap .safety-score .score .up,
.renewal-v2 .mycar-wrap .safety-score .score .down {position: relative; margin-top: 2px; margin-left: 6px; padding-left: 13px; font-family: "HeadMedium";}
.renewal-v2 .mycar-wrap .safety-score .score .up::before,
.renewal-v2 .mycar-wrap .safety-score .score .down::before {position: absolute; top: 4px; left: 0; width: 11px; height: 9px; background-position: 0 0; background-repeat: no-repeat; background-size: contain; content: '';}
.renewal-v2 .mycar-wrap .safety-score .score .up::before {background-image: url(../images/common/renewal-v2/ic-up.svg);}
.renewal-v2 .mycar-wrap .safety-score .score .down::before {background-image: url(../images/common/renewal-v2/ic-down.svg);}
.renewal-v2 .mycar-wrap .safety-score .overall {display: flex; align-items: center; margin-top: 12px;}
.renewal-v2 .mycar-wrap .safety-score .overall dt {margin-right: 6px; padding: 5px 10px; font-size: 12px; line-height: 1.2; color: #586069; background: #F5F5F7; border-radius: 20px; }
.renewal-v2 .mycar-wrap .safety-score .overall dt:nth-child(n + 2) {margin-left: 29px;}
.renewal-v2 .mycar-wrap .safety-score .text-not {margin-top: 8px; color: #A0A6AD; font-family: "HDTextMedium";}
.renewal-v2 .mycar-wrap .safety-score .text-datahub {font-family: "HDtextBold";}
.renewal-v2 .mycar-wrap .safety-score .text-datahub img {vertical-align: bottom;}
.renewal-v2 .mycar-wrap .safety-score .dot-loading {display: inline-flex; vertical-align: middle; margin-right: 3px;}
.renewal-v2 .mycar-wrap .safety-score .dot-loading span {background: #586069;}

.renewal-v2 .mycar-wrap .report {margin-top: 12px; border-radius: 8px; background-color: #F5F5F7;}
.renewal-v2 .mycar-wrap .report li:nth-child(n + 2) {border-top: 1px solid #fff;}
.renewal-v2 .mycar-wrap .report li a {display: block; padding: 14px 20px; font-family: "HDTextRegular";}

.renewal-v2 .mycar-wrap .mycar-bottom {margin-top: auto;}
.renewal-v2 .mycar-wrap .noti-box {margin-top: 12px; margin-bottom: 8px; display: block; background-color: #E0E0E5;}
.renewal-v2 .mycar-wrap .noti-box dt {font-family: "HDTextBold";}
.renewal-v2 .mycar-wrap .noti-box dd {margin-top: 6px; line-height: 1.4; color: #515961; font-family: "HDTextRegular";}
.renewal-v2 .mycar-wrap .anchor-text {display: block; padding-top: 16px; padding-bottom: 16px; color: #515961;}
.renewal-v2 .mycar-wrap .car-contract {display: block; padding: 24px;}
.renewal-v2 .mycar-wrap .car-contract .floating-wrap {bottom: 0;}
.renewal-v2 .mycar-wrap .car-contract p {color: #fff; font-family: "HDtextBold";}
.renewal-v2 .mycar-wrap .car-contract .car-img {width: 32px; height: 32px;}
.renewal-v2 .mycar-wrap .car-contract .car-img img {width: 100%; height: 100%; object-fit: contain;}

.renewal-v2 .mycar-info-wrap {padding: 12px 0 0; font-family: "HDTextRegular";}
.renewal-v2 .mycar-info-wrap .section {padding-top: 12px; padding-bottom: 12px;}
.renewal-v2 .mycar-info-wrap .section h3 {margin-bottom: 8px; color: #586069; font-family: "HDTextMedium";}
.renewal-v2 .mycar-info-wrap .card-wrap .card:nth-child(n + 2) {margin-top: 24px;}
.renewal-v2 .mycar-info-wrap .card {display: block; padding: 16px 24px}
.renewal-v2 .mycar-info-wrap .flex-box {display: flex; justify-content: space-between; align-items: center; width: 100%;}
.renewal-v2 .mycar-info-wrap .card.link {padding-right: 20px;}
.renewal-v2 .mycar-info-wrap .card.link::after {width: 8px; height: 8px;  border: 1px solid #9FAAB5; border-width: 1px 1px 0 0; transform: rotate(45deg); content: '';}
.renewal-v2 .mycar-info-wrap .card.list {padding: 0;}
.renewal-v2 .mycar-info-wrap .card.list li {padding: 16px 24px; }
.renewal-v2 .mycar-info-wrap .card.list li:nth-child(n + 2) {border-top: 1px solid #F5F5F7;}
.renewal-v2 .mycar-info-wrap .card.list .not {color: #A0A6AD;}
.renewal-v2 .mycar-info-wrap dl.card dt {font-family: "HDTextMedium";}
.renewal-v2 .mycar-info-wrap dl.card dd {margin-top: 8px; color: #A0A6AD;}
.renewal-v2 .mycar-info-wrap .desc {line-height: 22px;}
.renewal-v2 .mycar-info-wrap .disabled {color: #9FAAB5}

.renewal-v2 .mycar-info-wrap .battery-number {overflow: hidden; border-radius: 12px; background-color: #fff;}
.renewal-v2 .mycar-info-wrap .battery-number button {padding: 14px 20px; height: 52px; justify-content: flex-start; border-bottom: 1px solid #eee;}
.renewal-v2 .mycar-info-wrap .battery-number button:only-child {border-bottom: none;}
.renewal-v2 .mycar-info-wrap .battery-number .num {margin-right: 12px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background-color: #BFC3C7; border-radius: 4px; font-size: 12px; font-family: "HDTextBold"; color: #fff;}
.renewal-v2 .mycar-info-wrap .battery-number .icon {margin-left: auto;}
.renewal-v2 .mycar-info-wrap .battery-number .more {display: block; width: 100%; display: flex; align-items: center; justify-content: center;}
.renewal-v2 .mycar-info-wrap .battery-number .more::after {margin: -4px 0 0 7px; width: 7px; height: 7px; border: 1px solid #A0A6AD; border-width: 1px 1px 0 0; transform: rotate(135deg); content: "";}
.renewal-v2 .mycar-info-wrap .battery-number .fold::after {margin-top: 3px; transform: rotate(-45deg);}

.renewal-v2 .mycar-info-wrap .icon::after {display: block; width: 24px; height: 24px; background-position: 0 0; background-repeat: no-repeat; content: '';}
.renewal-v2 .mycar-info-wrap .nickname::after {opacity: .5; background-image: url(../images/common/renewal-v2/ic-edit.svg);}
.renewal-v2 .mycar-info-wrap .copy::after {background-image: url(../images/common/renewal-v2/ic-copy.svg);}
.renewal-v2 .mycar-info-wrap .expnd-info {display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 12px;}
.renewal-v2 .mycar-info-wrap .expnd-info .card {display: flex; padding: 18px 19px 18px 20px; width: calc(50% - 6px); font-family: "HDTextRegular";}
.renewal-v2 .mycar-info-wrap .expnd-info .card.not {background: #E3E5E8; box-shadow: none; min-height: 72px;}
.renewal-v2 .mycar-info-wrap .expnd-info .img {width: 32px; height: 32px; margin-right: 12px;}
.renewal-v2 .mycar-info-wrap .expnd-info .img img {width: 100%; height: 100%; object-fit: contain;}
.renewal-v2 .mycar-info-wrap .expnd-info dl {font-family: "HDTextMedium";}
.renewal-v2 .mycar-info-wrap .expnd-info dt {color: #586069;}
.renewal-v2 .mycar-info-wrap .expnd-info dd {margin-top: 6px; font-family: "HDTextMedium";}
.renewal-v2 .mycar-info-wrap .expnd-info .danger {color: #E63312}

.renewal-v2 .mycar-info-wrap .info-area {margin-top: auto;}
.renewal-v2 .mycar-info-wrap .info-area p {font-family: "HDTextMedium";}
.renewal-v2 .mycar-info-wrap .info-area .ic-info-bk::before {vertical-align: top; margin-top: 1px;}
.renewal-v2 .mycar-info-wrap .info-area ul {line-height: 19px;}
.renewal-v2 .mycar-info-wrap .info-area li {position: relative; padding-left: 20px; margin-top: 8px; color: #586069;}
.renewal-v2 .mycar-info-wrap .info-area li::before {display: block; position: absolute; top: 7px; left: 7px; width: 2px; height: 2px; background-color: #586069; border-radius: 100%; content: '';}
.renewal-v2 .mycar-info-wrap .info-area li:nth-child(n + 2) {margin-top: 6px;}

.renewal-v2 .mycar-nickname {padding: 24px;}
.renewal-v2 .mycar-nickname li:nth-child(n + 2) {margin-top: 32px;}

.renewal-v2 .mycar-other {padding: 24px; font-family: "HDTextRegular";}
.renewal-v2 .mycar-other dl {margin-bottom: 48px;}
.renewal-v2 .mycar-other dt {font-family: "HDtextBold";}
.renewal-v2 .mycar-other dd {margin-top: 8px; color: #586069;}
.renewal-v2 .mycar-other dd .ic {vertical-align: top; display: inline-block;}
.renewal-v2 .mycar-other dd .ic::before {vertical-align: top;}
.renewal-v2 .mycar-other h3 {color: #A0A6AD; font-family: "HDTextMedium";}
.renewal-v2 .mycar-other li:nth-child(n + 2) {margin-top: 32px;}
.renewal-v2 .mycar-other .datepicker-v2 {margin-top: 32px;}

.renewal-v2 .my-service-wrap section.service-header,
.renewal-v2 .my-service-wrap .service-header {padding-top: 8px; padding-bottom: 18px;}
.renewal-v2 .my-service-wrap .service-header p {color: #586069; font-family: "HDTextRegular";}
.renewal-v2 .my-service-wrap .service-header .has-car {display: block; margin-top: 8px; font-size: 24px; line-height: 32px; font-family:"HeadMedium";}
.renewal-v2 .my-service-wrap .service-header .has-car::after {display: inline-block; margin: 9px 0 0 10px; vertical-align: top; width: 9px; height: 9px; border-style: solid; border-color: #252525; border-width: 2px 0 0 2px; transform: rotate(-135deg); content: '';}
.renewal-v2 .my-service-wrap .service-header + .section.card-wrap {padding-top: 2px;}

.renewal-v2 .my-service-wrap .ic-setting,
.renewal-v2 .my-service-wrap .ic-bluelink,
.renewal-v2 .my-service-wrap .ic-digitalkey,
.renewal-v2 .my-service-wrap .ic-epit {display: block; background-repeat: no-repeat; background-position: 0 0; background-size: cover;}
.renewal-v2 .my-service-wrap .ic-setting {width: 24px; height: 24px; background-image: url(../images/common/renewal-v2/ic-setting.svg)}
.renewal-v2 .my-service-wrap .ic-bluelink {width: 75px; height: 20px; background-image: url(../images/common/renewal-v2/ic-bluelink2.png)}
.renewal-v2 .my-service-wrap .ic-digitalkey {width: 80px; height: 20px; background-image: url(../images/common/renewal-v2/ic-digitalkey2.png)}
.renewal-v2 .my-service-wrap .ic-epit {width: 37px; height: 20px; background-image: url(../images/common/renewal-v2/ic-epit2.png)}

.renewal-v2 .my-service-wrap dl.card dt {font-family: "HDTextMedium";}
.renewal-v2 .my-service-wrap dl.card dd {font-family: "HDTextRegular";}
.renewal-v2 .my-service-wrap dl.card dd.txt-srv {color: #252525;}

.renewal-v2 .my-service-wrap .no-service {flex: 1; display: flex; align-items: center; justify-content: center;}
.renewal-v2 .my-service-wrap .no-service .msg {color: #A0A6AD; font-family: "HDTextRegular";}
.renewal-v2 .my-service-wrap .no-service .msg::before { display: block; margin: 0 auto 8px; width: 40px; height: 40px; background: url(../images/common/renewal-v2/ic-empty.svg) 50% no-repeat; content: '';}

.renewal-v2 .mycar-warning-wrap {font-family: "HDTextRegular";}
.renewal-v2 .mycar-warning-wrap .ic-wran {display: flex; align-items: center; justify-content: center; margin: 36px auto 0; width: 120px; height: 120px; background: #FFFFFF; border: 1px solid #E3E5E8; box-shadow: 0px 6px 12px rgba(45, 45, 51, 0.1); border-radius: 24px; text-align: center;}
.renewal-v2 .mycar-warning-wrap .ic-wran::before { display: inline-block; width: 80px; height: 80px; background-position: 50%; background-repeat: no-repeat; background-size: contain; content: '';}
.renewal-v2 .mycar-warning-wrap .ic-wran.tire::before {background-image: url(../images/common/renewal-v2/ic-warning-tire.svg)}
.renewal-v2 .mycar-warning-wrap .ic-wran.low-fuel::before {background-image: url(../images/common/renewal-v2/ic-warning-low-fuel.svg)}
.renewal-v2 .mycar-warning-wrap .ic-wran.light::before {background-image: url(../images/common/renewal-v2/ic-warning-light.svg)}
.renewal-v2 .mycar-warning-wrap .ic-wran.engine-oil::before {background-image: url(../images/common/renewal-v2/ic-warning-engine-oil.svg)}
.renewal-v2 .mycar-warning-wrap .ic-wran.smartkey::before {background-image: url(../images/common/renewal-v2/ic-warning-smartkey.svg)}
.renewal-v2 .mycar-warning-wrap .ic-wran.washer::before {background-image: url(../images/common/renewal-v2/ic-warning-washer.svg)}
.renewal-v2 .mycar-warning-wrap .ic-wran.brake::before {background-image: url(../images/common/renewal-v2/ic-warning-brake.svg)}

.renewal-v2 .mycar-warning-wrap h3 {display: block; margin-top: 24px; text-align: center; font-family: "HDtextBold";}
.renewal-v2 .mycar-warning-wrap .msg-box {margin: 24px 0; padding: 24px; background: #F5F5F7; border-radius: 12px;}
.renewal-v2 .mycar-warning-wrap .msg-box p {font-size: 14px; line-height: 19px; word-break: normal; }
.renewal-v2 .mycar-warning-wrap .msg-box .sub-txt {margin-top: 16px; padding-left: 10px; text-indent: -10px; color: #586069;}
.renewal-v2 .mycar-warning-wrap .msg-box .sub-txt + .sub-txt  {margin-top: 8px;} 

/* 보조금 조회 */
.renewal-v2 section.car-subsidy-wrap,
.renewal-v2 .car-subsidy-wrap {padding-top: 32px;}
.renewal-v2 .car-subsidy-wrap .text-info {color: #586069; font-family: "HDtextRegular"; line-height: 20px;}
.renewal-v2 .car-subsidy-wrap .form-warp {padding-top: 20px;}
.renewal-v2 .car-subsidy-wrap .form-warp .form-item {padding-top: 12px;}
.renewal-v2 .car-subsidy-wrap .form-warp .form-item dt {margin-bottom: 12px; font-size: 16px; line-height: 20px; }
.renewal-v2 .car-subsidy-wrap .form-warp .form-item dt .link {color: #00AAD2; font-family: "HeadMedium"; font-size: 12px; line-height: 14px; text-decoration: underline; text-underline-position: under;}
.renewal-v2 .car-subsidy-wrap .form-warp .form-item dd + dd {margin-top: 8px;}
.renewal-v2 .car-subsidy-wrap .info-list {margin-top: 32px; padding-left: 8px; text-indent: -8px; color: #586069; font-size: 12px; line-height: 16px; font-family: "HDtextRegular";}
.renewal-v2 .car-subsidy-wrap .info-list li + li {margin-top: 4px;}
.renewal-v2 .car-subsidy-wrap .subsidy-view h4 {font-family:"HeadBold";}
.renewal-v2 .car-subsidy-wrap .subsidy-view .car-img {max-width: 100%; text-align: center;}
.renewal-v2 .car-subsidy-wrap .subsidy-view .car-img img {max-width: 100%; height: auto;}
.renewal-v2 .car-subsidy-wrap .car-info .item {display: flex; justify-content: space-between; align-items: center;}
.renewal-v2 .car-subsidy-wrap .car-info .detail {padding: 24px 24px 16px;}
.renewal-v2 .car-subsidy-wrap .car-info .detail .item {font-size: 14px; line-height: 20px; font-family: "HDTextRegular";}
.renewal-v2 .car-subsidy-wrap .car-info .detail .item + .item {margin-top: 8px;}
.renewal-v2 .car-subsidy-wrap .car-info .detail dd {word-break: normal; text-align: right;}
.renewal-v2 .car-subsidy-wrap .car-info .detail .depth {padding-left: 12px; color: #A0A6AD}
.renewal-v2 .car-subsidy-wrap .car-info .total {padding: 16px 24px 20px; border-top: 1px solid #F5F5F7; font-family:"HeadMedium";}
.renewal-v2 .car-subsidy-wrap .car-info .total dd {color: #00AAD2}
.renewal-v2 .car-subsidy-wrap .car-info .total dd strong {font-size: 24px; line-height: 32px;}
.renewal-v2 .car-subsidy-wrap .car-info .total dd span {font-size: 16px; line-height: 32px;}

.renewal-v2 .car-subsidy-wrap .item-list + .item-list {margin-top: 24px;}
.renewal-v2 .car-subsidy-wrap .item-list .title-area {display: flex; justify-content: space-between; align-items: center; padding: 10px 24px;}
.renewal-v2 .car-subsidy-wrap .item-list .del {position: relative; margin-left: 6px; width: 24px; height: 24px;}
.renewal-v2 .car-subsidy-wrap .item-list .del::before,
.renewal-v2 .car-subsidy-wrap .item-list .del::after {position: absolute; top: 3px; left: 11px; display: block; width: 1px; height: 18px; background: #A0A6AD; content: '';}
.renewal-v2 .car-subsidy-wrap .item-list .del::before {transform: rotate(45deg);}
.renewal-v2 .car-subsidy-wrap .item-list .del::after {transform: rotate(-45deg);}
.renewal-v2 .car-subsidy-wrap .item-list .info-wrap {display: flex; align-items: center; padding: 24px 24px 16px; border-top: 1px solid #F5F5F7; padding-left: 5px;}
.renewal-v2 .car-subsidy-wrap .item-list .car-img {flex: 132px;}
.renewal-v2 .car-subsidy-wrap .item-list .car-info {flex: 1 1 145px; padding-left: 10px;}
.renewal-v2 .car-subsidy-wrap .item-list .car-info .detail .item + .item {margin-top: 4px;}
.renewal-v2 .car-subsidy-wrap .item-list .detail {padding: 0 0 12px;}
.renewal-v2 .car-subsidy-wrap .item-list .detail .depth {padding-left: 0; font-size: 12px;}
.renewal-v2 .car-subsidy-wrap .item-list .total {padding: 12px 0 0;}
.renewal-v2 .car-subsidy-wrap .item-list .total dt,
.renewal-v2 .car-subsidy-wrap .item-list .total dd strong,
.renewal-v2 .car-subsidy-wrap .item-list .total dd span {font-size: 14px; line-height: 20px;}
.renewal-v2 .car-subsidy-wrap .item-list .date {margin-top: 16px; color: #A0A6AD; text-align: right; font-family: "HDTextRegular";}

.renewal-v2 .no-data {min-height: 100%; flex: 1; display: flex; align-items: center; justify-content: center;}
.renewal-v2 .no-data .msg {color: #A0A6AD; font-family: "HDTextRegular";}
.renewal-v2 .no-data .msg::before { display: block; margin: 0 auto 8px; width: 40px; height: 40px; background: url(../images/common/renewal-v2/ic-empty.svg) 50% no-repeat; content: '';}

/* [20230313] 자가진단 */
section.section.self-diagnosis-wrap {padding: 24px;}
.self-diagnosis-wrap {}
.self-diagnosis-wrap .txt-noti {margin-bottom: 32px; color: #586069; font-family: "HDTextRegular";}
.self-diagnosis-wrap .car-diagnosis {position: relative; color: #252525;}
.self-diagnosis-wrap .txt-car {margin-bottom: 16px; font-size: 16px; line-height: 24px; font-family: "HDtextBold";}
.self-diagnosis-wrap .title {position: relative; display: block; font-size: 24px; line-height: 32px; font-family:"HeadMedium"; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.self-diagnosis-wrap .title::after {display: inline-block; vertical-align: middle; margin-left: 9px; margin-top: -6px; width: 9px; height: 9px; border: solid #252525; border-width: 2px 2px 0  0; transform: rotate(135deg); content: '';}

.self-diagnosis-wrap .diagnosis-lst {position: absolute; top: 32px;  left: 0; width: calc(100% + 48px); margin: 0 -24px;  visibility: hidden; opacity: 0; height: 0; transform: scaleY(0); transform-origin:0 0; transition: all .3s ease;  display: flex; flex-wrap: wrap;}
.self-diagnosis-wrap .diagnosis-lst .diagnosis-swiper { width: calc(100% + 48px); padding: 24px; background-color: #DADBE3;}
.self-diagnosis-wrap .diagnosis-lst .item {width: 96px;}
.self-diagnosis-wrap .diagnosis-lst label {position: relative; overflow: hidden; display: block; border-radius: 12px; height: 64px; background-color: #fff; text-align: center;}
.self-diagnosis-wrap .diagnosis-lst label img {width: 100%; height: 100%; object-fit: contain;}
.self-diagnosis-wrap .diagnosis-lst .chk {display: none; position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; border-radius: 20px; background-color: #00AAD2; text-align: center;}
.self-diagnosis-wrap .diagnosis-lst .chk::after {display: inline-block; vertical-align: top; margin-top: 4px; width: 4px; height: 7px; border: solid #fff; border-width: 1px 0 0 1px; transform: rotate(-135deg); content: '';}
.self-diagnosis-wrap .diagnosis-lst .tx-abbr {padding-top: 17px; font-size: 24px; color: #66717D; font-family:"HeadLight";}
.self-diagnosis-wrap .diagnosis-lst p.text {margin-top: 8px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: "HDTextRegular";}
.self-diagnosis-wrap .diagnosis-lst .item input[type="radio"]:checked + label .chk {display: block;}
.self-diagnosis-wrap .diagnosis-lst .item input[type="radio"]:checked ~ p {color: #00AAD2;}
.self-diagnosis-wrap input[type="checkbox"]:checked ~ .diagnosis-lst {visibility: visible; opacity: 1; height: auto; transform: scaleY(1);}
.self-diagnosis-wrap input[type="checkbox"]:checked ~ label.title::after {margin-top: 0; transform: rotate(315deg);}

.self-diagnosis-wrap .car-diagnosis.open label.title::after {margin-top: 0; transform: rotate(315deg);}
.self-diagnosis-wrap .car-diagnosis.open .diagnosis-lst {visibility: visible; opacity: 1; height: auto; transform: scaleY(1);}

.self-diagnosis-wrap .car-diagnosis.close label.title::after {transform: rotate(135deg);}
.self-diagnosis-wrap .car-diagnosis.close .diagnosis-lst {visibility: hidden; opacity: 0; height: 0; transform: scaleY(0); transform-origin:0 0;}

.self-diagnosis-wrap .car-img {margin-top: 36px; text-align: center;}
.self-diagnosis-wrap .car-img img {max-width: 100%; /*max-height: 184px;*/}

.self-diagnosis-wrap .enter-code .tit {margin-top: 24px; color: #A0A6AD; font-family: "HDTextMedium";}
.self-diagnosis-wrap .enter-code .inp-tit-active {color: #00AAD2;}
.self-diagnosis-wrap .enter-code .tit + .inp-wrap {margin-top: 0;}
.self-diagnosis-wrap .enter-code .inp-wrap + .inp-wrap {margin-top: 24px;}
.self-diagnosis-wrap .enter-code .add-code {margin-top: 24px;}
.self-diagnosis-wrap .enter-code .add-code button {font-family:"HDTextMedium"; color: #515961;}
.self-diagnosis-wrap .enter-code .add-code button::before {display: inline-block; margin-right: 4px; width: 10px; height: 10px; background: url(../images/common/renewal-v2/ic-plus.svg) no-repeat center; content: "";}
.self-diagnosis-wrap .enter-code + .tips-caution {margin-top: 24px;}
.self-diagnosis-wrap .enter-code + .tips-caution + .tips-caution {margin-top: 5px;}

.self-diagnosis-wrap .service-intro .intro-body {padding: 4px 0 0 0;}
.self-diagnosis-wrap .service-intro .intro-body dl:last-child dd {margin-bottom: 0;}
.self-diagnosis-wrap .service-guide {padding: 0;}

.self-diagnosis-box {padding: 16px 24px 24px; height: 100%;}
.self-diagnosis-box .box {padding: 24px; border-radius: 12px; background: #F5F5F7; }
.self-diagnosis-box .box + .box {margin-top: 16px;}
.self-diagnosis-box dl {color: #252525; line-height: 20px;}
.self-diagnosis-box dt {padding-bottom: 16px; margin-bottom: 10px; border-bottom: 1px solid #E3E5E8; }
.self-diagnosis-box dt strong {display: block; margin-bottom: 4px; font-size: 16px;  font-family: "HDtextBold";}
.self-diagnosis-box dd {color: #586069; font-family: "HDTextRegular";}

.font-big .self-diagnosis-wrap .txt-car {font-size: 18px; line-height: 26px;}
.font-big .self-diagnosis-wrap .title {font-size: 26px; line-height: 34px;}
.font-big .self-diagnosis-wrap .diagnosis-lst .tx-abbr {font-size: 26px;}
.font-big .self-diagnosis-box dl {line-height: 22px;}
.font-big .self-diagnosis-box dt strong {font-size: 18px;}

/* 현대 EV 충전 솔루션 */
.renewal-v2 .section.tab-content-wrap,
.tab-content-wrap {padding: 0;}
.tab-content-wrap .tab-round {padding: 17px 24px;}
.tab-content-wrap .settings { padding: 0; border-bottom: 1px solid #F5F5F7;}
.tab-content-wrap .settings .lst {display: flex; flex-flow: column wrap;}
.tab-content-wrap .settings .item:nth-child(n) {border-top: 1px solid #F5F5F7;}
.tab-content-wrap + .section.banner-ad {padding-top: 27px; padding-bottom: 32px;}

.tab-content-wrap .lst.order-RCMND li[data-order-RCMND="RCMND1"] {order: 1;}
.tab-content-wrap .lst.order-RCMND li[data-order-RCMND="RCMND2"] {order: 2;}
.tab-content-wrap .lst.order-RCMND li[data-order-RCMND="RCMND3"] {order: 3;}
.tab-content-wrap .lst.order-RCMND li[data-order-RCMND="RCMND4"] {order: 4;}
.tab-content-wrap .lst.order-RCMND li[data-order-RCMND="RCMND5"] {order: 5;}
.tab-content-wrap .lst.order-RCMND li[data-order-RCMND="RCMND6"] {order: 6;}
.tab-content-wrap .lst.order-RCMND li[data-order-RCMND="RCMND7"] {order: 7;}
.tab-content-wrap .lst.order-RCMND li[data-order-RCMND="RCMND8"] {order: 8;}
.tab-content-wrap .lst.order-RCMND li[data-order-RCMND="RCMND9"] {order: 9;}
.tab-content-wrap .lst.order-RCMND li[data-order-RCMND="RCMND10"] {order: 10;}
.tab-content-wrap .lst.order-RCMND li[data-order-RCMND="RCMND11"] {order: 11;}
.tab-content-wrap .lst.order-RCMND li[data-order-RCMND="RCMND12"] {order: 12;}

.tab-content-wrap .lst.order-FRQNC li[data-order-FRQNC="FRQNC1"] {order: 1;}
.tab-content-wrap .lst.order-FRQNC li[data-order-FRQNC="FRQNC2"] {order: 2;}
.tab-content-wrap .lst.order-FRQNC li[data-order-FRQNC="FRQNC3"] {order: 3;}
.tab-content-wrap .lst.order-FRQNC li[data-order-FRQNC="FRQNC4"] {order: 4;}
.tab-content-wrap .lst.order-FRQNC li[data-order-FRQNC="FRQNC5"] {order: 5;}
.tab-content-wrap .lst.order-FRQNC li[data-order-FRQNC="FRQNC6"] {order: 6;}
.tab-content-wrap .lst.order-FRQNC li[data-order-FRQNC="FRQNC7"] {order: 7;}
.tab-content-wrap .lst.order-FRQNC li[data-order-FRQNC="FRQNC8"] {order: 8;}
.tab-content-wrap .lst.order-FRQNC li[data-order-FRQNC="FRQNC9"] {order: 9;}
.tab-content-wrap .lst.order-FRQNC li[data-order-FRQNC="FRQNC10"] {order: 10;}
.tab-content-wrap .lst.order-FRQNC li[data-order-FRQNC="FRQNC11"] {order: 11;}
.tab-content-wrap .lst.order-FRQNC li[data-order-FRQNC="FRQNC12"] {order: 12;}

.tab-content-wrap .lst.order-ABC li[data-order-ABC="ABC1"] {order: 1;}
.tab-content-wrap .lst.order-ABC li[data-order-ABC="ABC2"] {order: 2;}
.tab-content-wrap .lst.order-ABC li[data-order-ABC="ABC3"] {order: 3;}
.tab-content-wrap .lst.order-ABC li[data-order-ABC="ABC4"] {order: 4;}
.tab-content-wrap .lst.order-ABC li[data-order-ABC="ABC5"] {order: 5;}
.tab-content-wrap .lst.order-ABC li[data-order-ABC="ABC6"] {order: 6;}
.tab-content-wrap .lst.order-ABC li[data-order-ABC="ABC7"] {order: 7;}
.tab-content-wrap .lst.order-ABC li[data-order-ABC="ABC8"] {order: 8;}
.tab-content-wrap .lst.order-ABC li[data-order-ABC="ABC9"] {order: 9;}
.tab-content-wrap .lst.order-ABC li[data-order-ABC="ABC10"] {order: 10;}
.tab-content-wrap .lst.order-ABC li[data-order-ABC="ABC11"] {order: 11;}
.tab-content-wrap .lst.order-ABC li[data-order-ABC="ABC12"] {order: 12;}

/* 맞춤형 충전 솔루션 찾기 */
.renewal-v2 .section.custom-solution-intro,
.custom-solution-intro {padding-top: 44px; padding-bottom: 54px;}
.custom-solution-intro .graphic {display: block; margin: 0 auto 40px; width: 160px; height: 176px; background: url(../images/common/renewal-v2/img-custom-solution.png) 50% top no-repeat; background-size: contain; content: "";}
.custom-solution-intro .intro-text {color: #586069; font-family: "HDTextRegular";}
.custom-solution-intro .intro-text + .intro-text {margin-top: 8px;}
.custom-solution-intro .menu {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px;}
.custom-solution-intro .menu li {padding: 13px 16px; width: calc(50% - 4px); height: 68px; border: 1px solid #eee; border-radius: 12px;}
.custom-solution-intro .menu strong {display: block; color: #00AAD2; font-family:"HeadMedium";}
.custom-solution-intro .menu p {font-family: "HDTextRegular"; color: #252525;}

.number-step {position: relative; display: flex; justify-content: center; column-gap: 28px; margin: 0 auto; padding: 24px 50px; background-color: #fff;}
.number-step li {position: relative; padding-bottom: 24px;}
.number-step li::before {position: absolute; top: 10px; left: 21px; width: 28px; height: 1px; border-top: 1px dashed #ddd;  content: "";}
.number-step li:last-child::before {display: none;}
.number-step .num {position: relative; z-index: 2; display: block; width: 20px; height: 20px; background-color: #D6D6D6; border-radius: 100%; text-align: center; font-family:"HeadRegular"; color: #fff;}
.number-step strong {display: none; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: max-content;}
.number-step .done .num {background-color: #999; font-size: 0;}
.number-step .done .num::before {position: absolute; top: 4px; left: 8px; width: 5px; height: 9px; border: 1px solid #fff; border-width: 1px 0 0 1px; transform: rotate(-135deg); content: "";}
.number-step .on .num {background-color: #00AAD2;}
.number-step .on strong {display: block; color: #00AAD2; line-height: 16px;}

.custom-solution-wrap {padding-bottom: 24px;}
.custom-solution-wrap section {background: none;}
.custom-solution-wrap .card {display: block; box-shadow: none; padding: 24px 16px;}
.custom-solution-wrap .card + .card {margin-top: 16px;}
.custom-solution-wrap h3 {display: block; padding-bottom: 16px; border-bottom: 1px solid #E3E5E8; font-size: 16px; line-height: 24px; font-family:"HeadMedium";}
.custom-solution-wrap .text-q {margin-top: 16px; font-size: 16px; line-height: 20px; color: #252525;}
.custom-solution-wrap .text-info {margin-top: 8px; color: #586069;}
.custom-solution-wrap .q-list {margin-top: 24px;}
.custom-solution-wrap .q-list li + li {margin-top: 8px;}
.custom-solution-wrap .q-list input[type="radio"] {position: absolute; opacity: 0; z-index: -1;}
.custom-solution-wrap .q-list label {position: relative; display: block; padding: 16px 42px 16px 16px; border: 1px solid #E5E5E5;}
.custom-solution-wrap .q-list label span {color: #252525;}
.custom-solution-wrap .q-list input[type="radio"]:checked + label {border-color: #00AAD2;}
.custom-solution-wrap .q-list input[type="radio"]:checked + label::before {position: absolute; top: 16px; right: 18px; width: 10px; height: 14px; border: 1px solid #00AAD2; border-width: 2px 0 0 2px; transform: rotate(-135deg); content: "";}
.custom-solution-wrap .q-list input[type="radio"]:checked + label span {color: #00AAD2; font-family:"HeadMedium";}
.custom-solution-wrap .link {display: block; margin-top: 16px;}
.custom-solution-wrap .link span {display: inline-block; font-family:"HDTextMedium"; color: #586069;}
.custom-solution-wrap .link span::after {display: inline-block; margin-left: 3px; width: 7px; height: 7px; border: 1px solid #A0A6AD; border-width: 1px 1px 0 0; transform: rotate(45deg); content: "";}
.custom-solution-wrap .result-rcmd {padding: 32px 24px 24px; margin-bottom: 32px; background-color: #fff;}
.custom-solution-wrap .result-rcmd .title {text-align: center; font-size: 18px; line-height: 24px; color: #222; }
.custom-solution-wrap .result-rcmd .tag {margin-top: 24px; display: flex; gap: 6px; flex-wrap: wrap;}
.custom-solution-wrap .result-rcmd .tag span {padding: 7px 11px; border: 1px solid #E3E5E8; border-radius: 16px; color: #586069; font-size: 12px; line-height: 16px;}
.custom-solution-wrap .text-btm-info {font-size: 16px; line-height: 24px;}

.font-big .custom-solution-wrap h3 {font-size: 18px; line-height: 26px;}
.font-big .custom-solution-wrap h3 {font-size: 18px; line-height: 22px;}
.font-big .custom-solution-wrap .result-rcmd .title {font-size: 20px; line-height: 26px;}
.font-big .custom-solution-wrap .result-rcmd .tag span {font-size: 14px; line-height: 18px;}
.font-big .custom-solution-wrap .text-btm-info {font-size: 18px; line-height: 26px;}

/* 현대 인증중고차 */
.usedcar-intro-wrap {color: #222; padding-bottom: 60px;}
.usedcar-intro-wrap .image {margin: 0 -24px; text-align: center;}
.usedcar-intro-wrap .image img {max-width: 480px; width: 100%;}

.usedcar-intro-wrap .tab-content {padding: 0 24px;}
.usedcar-intro-wrap .intro-title {padding-top: 60px;}
.usedcar-intro-wrap .intro-title h2 { font-size: 24px; line-height: 32px; font-family:"HeadLight";}
.usedcar-intro-wrap .intro-title h2 + p {margin-top: 16px; font-size: 14px; line-height: 20px; color: #777;}
.usedcar-intro-wrap .paragraph {margin-top: 60px;}
.usedcar-intro-wrap .paragraph h3 {display: block; text-align: center; color: #000; font-family:"HeadMedium"; font-size: 18px; line-height: 24px;}
.usedcar-intro-wrap .paragraph h3 + .image {margin-top: 32px;}
.usedcar-intro-wrap .paragraph .image + h3 {margin-top: 32px;}
.usedcar-intro-wrap .paragraph .image + .txt {margin-top: 32px}
.usedcar-intro-wrap .paragraph .txt {color: #222; font-size: 14px; line-height: 20px;}
.usedcar-intro-wrap .paragraph .txt + .txt {margin-top: 8px;}
.usedcar-intro-wrap .paragraph dl {margin-top: 32px;}
.usedcar-intro-wrap .paragraph dl + dl {margin-top: 24px; padding-top: 24px; border-top: 1px solid #eee;}
.usedcar-intro-wrap .paragraph dt {font-size: 16px; line-height: 20px;}
.usedcar-intro-wrap .paragraph dd {margin-top: 8px; font-size: 14px; line-height: 20px;}
.usedcar-intro-wrap .service-guide {padding: 0; margin-top: 32px;}
.usedcar-intro-wrap .service-guide .txt {margin-top: 6px; color: #586069;}
.usedcar-intro-wrap .service-guide .step {margin-top: 16px;}
.usedcar-intro-wrap .service-guide .step p {position: relative; padding-left: 34px; padding-bottom: 20px; color: #252525;}
.usedcar-intro-wrap .service-guide .step p::before {display: block; position: absolute; top: 6px; left: 8px; width: 8px; height: 8px; border: 2px solid #8F8F8F; border-radius: 100%; content: "";}
.usedcar-intro-wrap .service-guide .step p::after {position: absolute; top: 20px; left: 11px; width: 1px; height: calc(100% - 20px); border-left: 1px dashed #8F8F8F; content: "";}
.usedcar-intro-wrap .service-guide .step p:last-child {padding-bottom: 0;}
.usedcar-intro-wrap .service-guide .step p:last-child::after {display: none;}
.usedcar-intro-wrap .box {margin-top: 60px; padding: 24px; border-radius: 12px; background-color: #F5F5F7;}
.usedcar-intro-wrap .box p {font-size: 14px; line-height: 20px; color: #222;}
.usedcar-intro-wrap .box strong {display: block; margin-top: 8px; font-size: 16px; line-height: 22px; color: #000;}

body.font-big .usedcar-intro-wrap .intro-title h2 { font-size: 26px; line-height: 34px; }
body.font-big .usedcar-intro-wrap .intro-title h2 + p {font-size: 16px; line-height: 22px;}
body.font-big .usedcar-intro-wrap .paragraph h3 {font-size: 20px; line-height: 26px;}
body.font-big .usedcar-intro-wrap .paragraph dt {font-size: 18px; line-height: 22px;}
body.font-big .usedcar-intro-wrap .paragraph dd {font-size: 16px; line-height: 22px;}
body.font-big .usedcar-intro-wrap .paragraph .txt {font-size: 16px; line-height: 22px;}
body.font-big .usedcar-intro-wrap .box p {font-size: 16px; line-height: 22px;}
body.font-big .usedcar-intro-wrap .box strong {font-size: 18px; line-height: 24px;}

/* layer bottom */
.layer-bottom-sheet {z-index: 103; position: fixed; bottom: 0; right: 0; left: 0; min-width:100%; background-color: #fff; border-radius: 12px 12px 0px 0px; }
.layer-bottom-sheet .layer-header {position: relative; display: flex; justify-content: space-between; align-items: center; padding: 32px 24px 16px;}
.layer-bottom-sheet .layer-header .title {font-size: 16px; line-height: 20px; font-family: "HDtextBold";}
.layer-bottom-sheet .layer-header .title2 {font-size: 18px; line-height: 24px; font-family:"HeadMedium";}
.layer-bottom-sheet .layer-header .btn-close {position: absolute; top: 0; right: 0; padding: 31px 24px 16px 24px; color: #66717D; font-family: "HDTextRegular"; cursor: pointer;}
.layer-bottom-sheet .layer-container {padding: 0 24px 24px;}
.layer-bottom-sheet .inner-scroll {overflow-x: hidden; overflow-y: auto; height: 240px;}
.layer-bottom-sheet .inner-scroll.maxHeight460 {max-height: 460px; height: unset;}
.layer-bottom-sheet .inner-scroll.autoY {height: unset}
.layer-bottom-sheet .select-rdo-list {padding: 0 24px 16px;}
.layer-bottom-sheet .select-rdo-list li:nth-child(n + 2) {border-top: 1px solid #E4E4E5;}
.layer-bottom-sheet .select-rdo-list .rdo {position: absolute; opacity: 0; z-index: -1;}
.layer-bottom-sheet .select-rdo-list .label-sel {position: relative; display: flex; align-items: center; padding: 16px 32px 16px 0; font-family: "HDTextRegular";}
.layer-bottom-sheet .select-rdo-list .label-sel::before {position: absolute; margin-top: -10px; top: 50%; right: 12px;  width: 9px; height: 16px; border: 2px solid #00AAD2; border-width:2px 0 0 2px; transform: rotate(225deg); opacity: 0; transition: .3s all ease; content: '';}
.layer-bottom-sheet .select-rdo-list .label-sel.top::before {top: 18px; margin-top: 0;}
.layer-bottom-sheet .select-rdo-list .inner {width: 100%;}
.layer-bottom-sheet .select-rdo-list .label-text {display: block; width: 100%; font-size: 16px; line-height: 20px; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;}
.layer-bottom-sheet .select-rdo-list .label-subText {display: block; margin-top: 4px; color: #A0A6AD;}
.layer-bottom-sheet .select-rdo-list input.rdo:checked + .label-sel,
.layer-bottom-sheet .select-rdo-list input.rdo:checked + .label-sel .label-text,
.layer-bottom-sheet .select-rdo-list input.rdo:checked + .label-sel .label-subText {color: #00AAD2;}
.layer-bottom-sheet .select-rdo-list input.rdo:checked + .label-sel .color-blk {color: #252525;}
.layer-bottom-sheet .select-rdo-list input.rdo:checked + .label-sel::before {opacity: 1;}
.layer-bottom-sheet .select-rdo-list input.rdo:disabled + .label-sel {color: #BFC3C7;}

.layer-bottom-sheet .select-rdo-list.has-badge {justify-content: flex-start; }
.layer-bottom-sheet .select-rdo-list.has-badge .label-text  {width: unset}
.layer-bottom-sheet .select-rdo-list.has-badge .badge {margin-left: 8px; height: 20px; border-radius: 100px; padding-top: 3px; padding-bottom: 3px; min-width: fit-content; font-family:"HeadRegular";}

.layer-bottom-sheet .layer-container .select-rdo-list {padding: 0;}
.layer-bottom-sheet .layer-container .select-rdo-list li:first-child {margin-top: -8px;}
.layer-bottom-sheet .hidden-inp {position: absolute; opacity: 0; z-index: -1;}
.layer-bottom-sheet .info-text {position: relative; margin-top: 8px; padding-left: 20px; font-size: 12px; color: #999; font-family:'HeadRegular';}
.layer-bottom-sheet .info-text::before {position: absolute; top: 0; left: 0; width: 16px; height: 16px; background: url(../images/common/ic_caution.svg) no-repeat center; content: "";}
.layer-bottom-sheet .sub-text {display: block; margin-top: 4px; font-size: 12px; line-height: 14px;}
.layer-bottom-sheet .enabled {color: #00AAD2}
.layer-bottom-sheet .failed {color: #E63312}


/* bottom layer - text list */
.select-text-list li {font-size: 16px; line-height: 20px; border-top: 1px solid #F5F5F7;}
.select-text-list li a {display: block; padding: 16px 0; }
.select-text-list li:first-child {margin-top: -6px; border-top: none;}

/* bottom layer - 차량 경고등 */
.select-warning-list {display: grid; grid-template-columns: repeat(3, calc(33.333% - 6px)); justify-content: space-between; gap: 6px; }
.select-warning-list li {width: 100%;}
.select-warning-list label {display: block; width: 100%; height: 72px; padding-top: 4px; background-color: #fff; border: 1px solid #E3E5E8; border-radius: 4px; text-align: center; color: #586069; font-family:"HeadRegular"; font-size: 16px;}
.select-warning-list .tx {display: block; font-size: 12px; line-height: 14px; text-align: center;}
.select-warning-list .icon {display: block; margin: 0 auto; width: 48px; height: 48px; background-repeat: no-repeat; background-position: center top; background-size: contain;}
.select-warning-list .ic-EPS {background-image:url(../images/common/renewal-v2/layer-warning-EPS.svg);}
.select-warning-list .ic-VSCESP {background-image:url(../images/common/renewal-v2/layer-warning-VSCESP.svg);}
.select-warning-list .ic-brake {background-image:url(../images/common/renewal-v2/layer-warning-brake.svg);}
.select-warning-list .ic-water {background-image:url(../images/common/renewal-v2/layer-warning-water.svg);}
.select-warning-list .ic-TPMS {background-image:url(../images/common/renewal-v2/layer-warning-TPMS.svg);}
.select-warning-list .ic-engine {background-image:url(../images/common/renewal-v2/layer-warning-engine.svg);}
.select-warning-list .ic-charge {background-image:url(../images/common/renewal-v2/layer-warning-charge.svg);}
.select-warning-list input.active + label,
.select-warning-list input:checked + label {color: #00AAD2; border-color: #00AAD2;}

/* bottom layer - 상담시간 */
.select-time-list {display: grid; grid-template-columns: repeat(3, calc(33.333% - 6px)); justify-content: space-between; gap: 6px; padding-bottom: 24px;}
.select-time-list li {width: 100%;}
.select-time-list label {display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; background-color: #fff; border: 1px solid #E3E5E8; border-radius: 4px; text-align: center; color: #252525; font-family:"HeadRegular"; font-size: 16px;}
.select-time-list input.active + label,
.select-time-list input:checked + label {color: #00AAD2; border-color: #00AAD2;}
.select-time-list input:disabled + label {background-color: #F5F5F7; color: #A0A6AD; border: none;}

/*============================================================
layer-popup
=============================================================*/
.layer-pop-round {overflow: hidden; position:fixed; top:50%; left:50%; max-width:500px; width:calc(100% - 48px); border-radius: 12px; background-color:#fff; transform: translate(-50%,-50%); opacity:1; z-index:1001; }
.layer-pop-round .layer-pop-body {padding: 32px 16px;}
.layer-pop-round .layer-pop-footer {border-top: 0;}
.layer-pop-wrap .login-msg {text-align: center;}
.layer-pop-wrap .login-msg dt {font-size: 18px; line-height: 1.35; font-family: "HDtextBold";}
.layer-pop-wrap .login-msg dd {margin-top: 8px; font-size: 14px; line-height: 1.2; color: #586069; font-family: "HDTextRegular";}
.layer-pop-wrap .msg {text-align: center;}
.layer-pop-wrap .msg dt {font-size: 16px; line-height: 1.4; font-family: "HDtextBold";}
.layer-pop-wrap .msg dd {margin-top: 16px; font-size: 14px; line-height: 1.3; color: #586069; font-family: "HDTextRegular";}
.layer-pop-wrap p.msg-text {font-size: 14px; line-height: 1.3; color: #586069; font-family: "HDTextRegular"; text-align: center;}
.layer-pop-wrap .txt {text-align: center; font-size: 14px;}
.layer-pop-wrap .txt-info {position: relative; padding-left: 20px; margin-top: 16px; font-size: 12px; color: #999;}
.layer-pop-wrap .txt-info::before {position: absolute; top: 1px; left: 0; margin-right: 4px; width:16px; height:16px; background:url(../images/common/ic-caption-info.svg) no-repeat 0 0; background-size:16px; content: "";}
.layer-pop-wrap .bold {font-family:"HeadMedium";}
.layer-pop-wrap .align-left {text-align: left;}
.layer-pop-wrap .btn-area ul {column-gap: 8px; padding: 0 16px 16px; height: 60px;}
.layer-pop-wrap .btn-area ul a {height: 100%; border-radius: 12px; background-color: #F5F5F7; color: #002C5F; font-size: 14px; line-height: 1; font-family: "HDTextMedium";}
.layer-pop-wrap .btn-area ul a.active {background-color: #002C5F; color: #fff;}

body.font-big .layer-pop-wrap .login-msg dt {font-size: 20px;}
body.font-big .layer-pop-wrap .login-msg dd {font-size: 16px;}
body.font-big .layer-pop-wrap .msg dt {font-size: 18px;}
body.font-big .layer-pop-wrap .msg dd {font-size: 16px;}
body.font-big .layer-pop-wrap p.msg-text {font-size: 16px;}

/*============================================================
instant message
=============================================================*/
.toast-pop { display:none; position:fixed; bottom: 16px; right: 0; left: 0; opacity: 1; z-index:999; padding: 0 16px 16px; }
.toast-pop.bottom {bottom: 0;}
.toast-pop::before {position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 40px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 0.9) 100%); content: '';}
.toast-pop.has-nav {bottom: 54px;}
.toast-pop.black .msg { background:#252525d8; }
.toast-pop.red .msg { background:#E63312d8; }
.toast-pop.blue .msg { background:#00AAD2d8; }
.toast-pop .msg {position: relative; z-index: 1; padding: 12px; border-radius: 12px; color: #fff; font-size: 12px; line-height: 14px; font-family: "HDTextRegular";}
.toast-pop .ic-info-wht {margin-right: 4px; vertical-align: top; margin-top: -1px;}
.toast-pop.has-button {bottom: 64px;}
.toast-pop.has-button::before {display: none;}
.toast-pop.has-oldbutton {bottom: 52px;}

/*============================================================
popup
=============================================================*/
.win-pop-wrap.win-pop-v2 {background: #F5F5F7;}
.win-pop-wrap.win-pop-v2.white {background: #fff;}
#pop-header-v2,
.pop-header-v2  {position: fixed; top: 0; left: 0; right: 0; height: 56px; min-width: 288px; padding: 0 8px; background: #fff; overflow: hidden; z-index: 101; text-align: center;}
#pop-header-v2.line,
.pop-header-v2.line  {border-bottom: 1px solid #F5F5F7;}
#pop-header-v2 .pop-title,
.pop-header-v2 .pop-title {font-size: 16px; line-height: 56px;}
#pop-header-v2 .back,
.pop-header-v2 .back {position: absolute; top: 8px; left: 8px; background:url(../images/common/renewal-v2/ic-header-back.svg) no-repeat center; width: 40px; height: 40px;}
#pop-header-v2 .close,
.pop-header-v2 .close {position: absolute; top: 8px; right: 8px; background:url(../images/common/renewal-v2/ic-header-close.svg) no-repeat center; width: 40px; height: 40px;}
#pop-container.w-btn,
.pop-container.w-btn {padding-bottom: 68px;}

/*============================================================
'font-big' contents
=============================================================*/
body.font-big.renewal-v2 {font-size:17px;}
body.font-big.renewal-v2 .text-big {font-size: 21px; line-height: 27px;}
body.font-big.renewal-v2 .text-mid {font-size: 19px; line-height: 23px;}
body.font-big.renewal-v2 .text-rgl {font-size: 17px; line-height: 19px;}
body.font-big.renewal-v2 .text {font-size: 15px; line-height: 17px;}
body.font-big.renewal-v2 .text-s {font-size: 13px; line-height: 16px;}

body.font-big input[type="text"].inp, 
body.font-big input[type="password"].inp, 
body.font-big input[type="number"].inp, 
body.font-big input[type="tel"], 
body.font-big input[type="search"].inp, 
body.font-big input[type="email"].inp {font-size: 21px; line-height: 27px;}
body.font-big .error-box .error-txt {font-size: 17px; line-height: 19px;}
body.font-big .inp-wrap .inp-desc {font-size: 17px; line-height: 19px;}
body.font-big.renewal-v2 .single-datepicker input {font-size: 21px; line-height: 27px;}
body.font-big.renewal-v2 input[type="text"], body.font-big.renewal-v2 input[type="password"], body.font-big.renewal-v2 input[type="number"], body.font-big.renewal-v2 input[type="tel"] {padding-left: 0;}

body.font-big.renewal-v2 #header.header-v2 .has-car {font-size: 21px; line-height: 27px;}
body.font-big.renewal-v2 #header.header-v2 .sub-header .sub-title span {font-size: 21px;}

body.font-big.renewal-v2 .welcome .login {font-size: 14px; line-height: 18px;}
body.font-big.renewal-v2 .welcome h2 {font-size: 29px; line-height: 36px;}
body.font-big.renewal-v2 .bluem-point .point {font-size: 27px;}
body.font-big.renewal-v2 .card-datahub .title-area p {line-height: 20px;}
body.font-big.renewal-v2 .card-service-date .d-day {font-size: 17px;}
body.font-big.renewal-v2 .banner-list2 h4 {font-size: 21px; line-height: 27px;}
body.font-big.renewal-v2 .banner-list3 .sale {font-size: 19px; line-height: 23px;}
body.font-big.renewal-v2 .deal-list .price-area p {font-size: 19px; line-height: 19px;}
body.font-big.renewal-v2 .best-list .prod-text {line-height: 21px;}
body.font-big.renewal-v2 .tab-round button {font-size: 17px; line-height: 19px;}
body.font-big.renewal-v2 .service-home-lst .tx {font-size: 17px; line-height: 19px;}
body.font-big.renewal-v2 .settings .title {font-size: 17px; line-height: 19px;}
body.font-big.renewal-v2 .settings .setting-box .item h3 {font-size: 19px;}
body.font-big.renewal-v2 .settings .setting-box .sub-text {font-size: 17px; line-height: 19px;}
body.font-big.renewal-v2 .my-home-profile .profile .name {font-size: 27px;}
body.font-big.renewal-v2 .my-bluemembers .blue-point .point {font-size: 27px; line-height: 32px;}
body.font-big.renewal-v2 .mycar-wrap .car-rcmnd-lst dt {font-size: 21px; line-height: 27px;}
body.font-big.renewal-v2 .mycar-wrap .car-rcmnd-lst dt {font-size: 21px; line-height: 27px;}
body.font-big.renewal-v2 .mycar-wrap .car-rcmnd-lst dd {font-size: 15px; line-height: 17px;}
body.font-big.renewal-v2 .mycar-wrap .safety-score .score .my-score {font-size: 27px; line-height: 28px;}
body.font-big.renewal-v2 .mycar-wrap .safety-score .overall dt {font-size: 15px;}
body.font-big.renewal-v2 .mycar-info-wrap .card.list li {font-size: 19px; line-height: 23px;}
body.font-big.renewal-v2 .mycar-info-wrap .info-area ul {line-height: 22px;}
body.font-big.renewal-v2 .my-service-wrap .service-header .has-car {font-size: 27px; line-height: 35px;}
body.font-big.renewal-v2 .mycar-warning-wrap .msg-box p {font-size: 17px; line-height: 22px;}
body.font-big.renewal-v2 .my-home-list li a {font-size: 19px; line-height: 23px;}
body.font-big.renewal-v2 .welcome-myhd .intro-swiper .first-swiper h2 {font-size: 27px; line-height: 35px;}
body.font-big.renewal-v2 .category-lst .category-name {line-height: 17px; height: 34px; word-break: keep-all;}

body.font-big.renewal-v2 .banner-list2 .price {font-size: 18px; line-height: 22px;}
body.font-big.renewal-v2 .banner-list2 .info .lt {font-size: 14px;}
body.font-big.renewal-v2 .banner-list2 .info .rt {font-size: 16px;}
body.font-big.renewal-v2 .banner-list2 .info .review {font-size: 14px;}
body.font-big.renewal-v2 .hmc-story.hmc-list dt {font-size: 14px; line-height: 18px;}
body.font-big.renewal-v2 .hmc-story.hmc-list .text-big {font-size: 16px; line-height: 22px;}
body.font-big.renewal-v2 .hmc-story dl .nickname {font-size: 14px;}
body.font-big.renewal-v2 .hot-keyword .item {font-size: 14px; line-height: 26px;}
body.font-big.renewal-v2 .hmc-news .news-list .txt {font-size: 16px; line-height: 22px;}

body.font-big.renewal-v2 .car-subsidy a p {font-size: 21px; line-height: 27px;}

body.font-big.renewal-v2 .car-subsidy-wrap .form-warp .form-item dt {font-size: 17px; line-height: 22px;}
body.font-big .renewal-v2 .car-subsidy-wrap .form-warp .form-item dt .link {font-size: 14px; line-height: 16px;}
body.font-big.renewal-v2 .car-subsidy-wrap .info-list {font-size: 14px; line-height: 18px;}
body.font-big.renewal-v2 .car-subsidy-wrap .car-info .detail .item {font-size: 16px; line-height: 22px;}
body.font-big.renewal-v2 .car-subsidy-wrap .car-info .total dd strong {font-size: 26px; line-height: 34px;}
body.font-big.renewal-v2 .car-subsidy-wrap .car-info .total dd span {font-size: 18px; line-height: 34px;}
body.font-big.renewal-v2 .car-subsidy-wrap .item-list .detail .depth {font-size: 14px;}
body.font-big.renewal-v2 .car-subsidy-wrap .item-list .total dt,
body.font-big.renewal-v2 .car-subsidy-wrap .item-list .total dd strong,
body.font-big.renewal-v2 .car-subsidy-wrap .item-list .total dd span {font-size: 16px; line-height: 22px;}

body.font-big .layer-bottom-sheet .layer-header .title {font-size: 19px; line-height: 23px;}
body.font-big .layer-bottom-sheet .layer-header .title2 {font-size: 21px; line-height: 27px;}
body.font-big .layer-bottom-sheet .layer-header .label-text {font-size: 19px;}
body.font-big .layer-bottom-sheet .info-text {font-size: 14px;}

body.font-big .select-time-list label {font-size: 19px;}
body.font-big .select-text-list li {font-size: 19px; line-height: 23px;}
body.font-big .select-warning-list .tx {font-size: 15px; line-height: 17px;}

body.font-big .layer-pop-wrap .login-msg dt {font-size: 21px;}
body.font-big .layer-pop-wrap .login-msg dd {font-size: 17px;}
body.font-big .layer-pop-wrap .txt {font-size: 17px;}
body.font-big .layer-pop-wrap .btn-area ul a {font-size: 17px;}

body.font-big .toast-pop p {font-size: 17px; line-height: 19px;}

body.font-big #pop-header-v2 .pop-title,
body.font-big .pop-header-v2 .pop-title {font-size: 19px;}

body.font-big .renewal-v2 .banner-title .info {font-size: 12px; line-height: 22px;}

body.font-big.renewal-v2 .usedcar-price {font-size: 26px; line-height: 30px;}
body.font-big.renewal-v2 .usedcar-card .sub-text {font-size: 14px; line-height: 18px;}
body.font-big.renewal-v2 .usedcar-card .price strong {font-size: 26px; line-height: 30px;}
body.font-big.renewal-v2 .usedcar-card .text-regi {font-size: 20px; line-height: 26px;}

/*============================================================
'skeleton-ui' contents
=============================================================*/
@keyframes skeleton-shine {
    from {
        left: -200px;
    }
    to {
        left: 100%;
    }
}
.skeleton-ui .flex {display: flex; justify-content: space-between; }

.skeleton-ui .white {background: #fff;}
.skeleton-ui .box-gd, .skeleton-ui .box-gl {overflow: hidden; position: relative; border-radius: 4px;}
.skeleton-ui .box-gd {background: #E9E9ED;}
.skeleton-ui .box-gl {background: #F5F5F7;}

.skeleton-ui .box-gd::before,
.skeleton-ui .box-gl::before,
.skeleton-ui .bottom-nav ul li span::before,
.skeleton-ui .shine {
    z-index: 99; position: absolute; top: 0; width: 200px; height: 100%; 
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%); opacity: .5;
    animation: skeleton-shine 1s cubic-bezier(0.25, 0.25, 0.75, 0.75) infinite; content: '';
}

.skeleton-ui {display: none; z-index: 9; position: absolute; top: 0; left: 0; width: 100%; height: 100%}
.skeleton-ui.show {display: block;}
.skeleton-ui .ui {width: 100%; height: 100%}
.skeleton-ui .skeleton-card {padding: 24px; width: 100%; height: 100%; background: #fff; border-radius: 12px;}
.skeleton-ui .item-circle {width: 24px; height: 24px; border-radius: 100%;}

.skeleton-ui.home .skeleton-card.notice {padding: 16px 24px;}
.skeleton-ui.home .skeleton-card.notice .item-title {margin-top: 0; width:135px; height: 17px;}
.skeleton-ui.home .flex {margin-bottom: 8px;}
.skeleton-ui.home .item-title {width: 132px; height: 24px;}
.skeleton-ui.home .item-txt {margin-top: 8px; width: 214px; height: 16px;}
.skeleton-ui.home .item-thumb {width: 100%; min-height: 180px; height: calc(100% - 22px); border-radius: 11px;}
.banner-list1 .text-big + .skeleton-ui.home .item-thumb {height: calc(100% - 40px);}
.skeleton-ui.home .item-thumb-txt {margin-top: 16px; width: 100%; height: 24px;}
.skeleton-ui.home .item-thumb-date {margin-top: 8px; text-align: right;}
.skeleton-ui.home .item-thumb-date .box-gd {display: inline-block; width: 200px; height: 22px;}

.skeleton-ui.shop .thumb-deal {width: 150px; height: 150px;}
.skeleton-ui.shop .thumb-title {width: 100%; height: 16px; margin-top: 12px;}
.skeleton-ui.shop .thumb-txt1 {width: 100%; height: 14px; margin-top: 8px;}
.skeleton-ui.shop .thumb-txt2 {width: 100px; height: 14px; margin-top: 2px;}
body.font-big .skeleton-ui.shop .thumb-title {height: 19px;}
body.font-big .skeleton-ui.shop .thumb-txt1 {height: 17px;}

.skeleton-ui.shop .best-deal {width: 182px; height: 294px; padding: 20px 20px 24px;}
.skeleton-ui.shop .best-thumb {width: 142px; height: 142px; border-radius: 100%;}
.skeleton-ui.shop .best-price {width: 100%; height: 24px; margin-top: 20px;}
.skeleton-ui.shop .best-normal {width: 71px; height: 16px; margin-top: 4px;}
.skeleton-ui.shop .best-txt1 {width: 100%; height: 16px; margin-top: 8px;}
.skeleton-ui.shop .best-txt2 {width: 71px; height: 16px; margin-top: 4px;}