@charset "utf-8";
/*
 * dependency : zReset.css, zLayout.css, zCommon.css, zComponent.css
 */

/* **************************************** *
 * style common
 * **************************************** */
.container b,
.container strong{font-weight:600;}
.container *[disabled]{opacity: .3 !important; cursor: inherit; touch-action: none;}
.container_guide{padding:25rem; line-height:29rem; height:80rem; background: #101010; color:#fff; text-align: center; font-size:20rem; font-weight:600;}
.container_guide p{display: inline-block; vertical-align: middle;}
.list-ul{font-size: 0;}
.list-ul > li{display: inline-block; font-size:17rem; vertical-align: top;}
.dl__dt{display:inline-block; color: var(--textTertiary); word-break: keep-all;}
.dl .dl__dt{display: block;}
.dl .dl__dd{display: block;}
.dl__dt[data-css-layout]{align-items: center;}
.no-data{cursor:default;}
a .no-data{cursor: inherit;}
.button-box .button-tag{position: absolute;}
.button-box .button-tag.ico-beta{top:-4px; right:-6px; width: 41rem; height: 21rem; box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.1);}
.video-box {aspect-ratio: 16 / 9;}
.video-box .video{display: block; width: 100%; height:100%; object-fit: cover;}

/* **************************************** *
 * header fixed
 * **************************************** */
.product-header-fixed {position: fixed; top:0; left:0; z-index:100; width:100%; padding:17rem 0 16rem; background-color:#fff; border-bottom:1px solid #ededed; transform:translatey(-100%);}
.product-header-fixed .wrap{display:flex; justify-content:space-around; align-items:center;}
.fixed-subject{width:300rem; padding-right:16rem;}
.fixed-subject[data-css-layout]{flex:1 1 0; justify-content:flex-start; align-items:center;}
/*.fixed-subject #fixCarTrim { max-width: 428rem; }*/
.fixed-subject .subject_item {display:inline-block; line-height:30rem; font-size:20rem; font-weight:600; vertical-align:middle;}
.fixed-subject .subject_item:last-child {position:relative; padding-left:24rem; margin-left:24rem;}
.fixed-subject .subject_item:last-child:before {content:""; display:block; position:absolute; top:50%; left:0; width:2rem; height:15rem; margin-top:-7.5rem; background-color:#d9d9d9;}
.fixed-subject .subject_item:not(.subject_trim) {flex: none;}
.fixed-subject .subject_type[data-css-layout]{align-items: baseline;}
.fixed-subject .subject_type .type{display: inline-block; line-height:1; margin-left: 8rem; font-size: 15px; font-weight: 700; color: #7590F4;}
.fixed-subject .subject_type .type span{display: inline-block; line-height: 1; vertical-align: inherit;}
.fixed_util{font-size: 0;}
.fixed_util[data-css-layout]{align-items:center;}
.fixed_util .button-box{height: 46rem; line-height: 44rem; font-size: 15rem;}
.fixed_util .button-box:last-child{min-width:250rem;}
.fixed_util .button-box,
.fixed_util .button-box + .button-box {min-width: 164rem;}
.fixed_util .button-ico + button-box{margin-right:11rem;}
.fixed_util .button-ico{padding:9rem 6rem; margin:0; flex:none;}
.fixed_util .button-ico .ico{width:38rem; height:38rem;}
.fixed_util .button-ico .ico.ico-sm {width: 14rem; height:14rem;}
.fixed_util .button-ico + .button-box:last-child{min-width:250rem;}
.fixed_util .button-ico:first-child{padding-left:12rem; padding-right: 6rem;}
.fixed_util .button-ico:first-child + .button-ico{padding-right:12rem; padding-left: 6rem;}

/* **************************************** *
 * product summary
 * **************************************** */
.product-summary {padding:18rem 0 50rem;}
.summary_info[data-css-layout]{align-items: center;}
.summary_info > li{display:inline-block; position:relative; font-size:15rem;} 
.summary_info > li span{display:inline-block; position:relative; padding:0 8rem;} 
.summary_info > li span:before{content:""; display:block; position:absolute; top:50%; left:0; width:1rem; height:5rem; margin-top:-3rem; background-color:#c2c2c2;} 
.summary_info > li:first-child span{padding-left:0;} 
.summary_info > li:first-child span:before{content:none;} 

.summary_subject{display:block; width:100%; line-height:46rem;}
.summary_subject[data-css-layout]{justify-content:space-between; align-items:end;}
.summary_subject .subject{display:inline-block; width:991rem; font-size:32rem;}
.summary_subject .price[data-css-layout] {flex: none; align-items: baseline; }
.summary_subject .price{display:inline-block; padding-bottom:7rem; font-size:30rem; text-align:right; color:var(--textPrimary);}
.summary_subject .price em{display:inline-block; margin-right:4rem; font-size:34rem; font-weight:700;}
.summary_subject .price .type {display: inline-block; line-height:1; margin-right: 16rem; padding-bottom:2rem; font-size: 20rem; font-weight:700; color:#7590F4; }

.summary_type { margin-top: 14rem; padding-bottom: 6rem;}
.type-description[data-css-layout]{align-items:center; justify-content: center;}
.type-description{ padding: 10px 0; background-color:#f8f8f8; border-radius: 5rem; text-align: center; }
.type-description .ico {margin-right: 12rem;}
.type-description p {display: inline-block; font-size:15rem; font-weight:400; color: #555;}
.type-description p strong {font-weight:700;}


.summary-photo {margin-top:18rem;}
.photo-gallery .mark-brand,
.photo-gallery .mark-partner,
.photo-gallery .mark-live{position: absolute; z-index:10;}
.photo-gallery .mark-brand{top: -6rem; right: 169.5rem; width: 90rem; height: 95rem;}
.photo-gallery .mark-partner{top: 20rem; right: 169.5rem; width: 90rem; height: 102rem;}
.photo-gallery .mark-live {top: 16rem; left: 167rem; width:137rem; height:47rem; padding:0 16rem; line-height:47rem; border-radius:24rem; background-color: rgba(0, 0, 0, 0.7); color:#fff; font-size:15rem;}
.photo-gallery .mark-live .ico{margin-right: 8rem;}
.photo-gallery {position:relative; height:628rem;}
.photo-gallery .gallery-wrap{overflow: hidden; position: relative; width:100%; height: 100%;}
.photo-gallery .gallery-wrap:after{content:""; display: block; position: absolute; top: 50%; left: 50%; z-index: -1; width: 900rem; height: 100%; background:#f8f8f8 url(/pc/images/icon-symbol-loading.svg) no-repeat 50% 50%; background-size: 126rem auto; transform:translate(-50%, -50%);}
.photo-gallery .gallery-wrap .gallery-slide{visibility: hidden;opacity: 0; position: absolute;top: 50%;left:50%; width:900rem; height:100%; transform:translate(-50%, -50%);}
.photo-gallery .gallery-wrap .gallery-slide img{display: block; position: absolute; top: 50%; left: 50%; max-width:100%; object-fit: cover; width: 100%; height: 100%; transform:translate(-50%, -50%);}
.photo-gallery .gallery-wrap .gallery-slide .shortform-info {
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: calc(100% - 24px);
    height: 40px;
}
.photo-gallery .gallery-wrap .gallery-slide .shortform-info .badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 100%;
    z-index: 1;
    transform: none;
}
.photo-gallery .gallery-wrap .gallery-slide .shortform-info p {
    position: absolute;
    top: 0;
    left: 30px;
    height: 100%;
    font-size: 20px;
    line-height: 40px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0);
    text-align: right;
    background: rgba(0, 0, 0, .3);
    border-radius: 99px;
    padding: 0 16px 0 90px; /* left: 120px - 30px (padding left - position left) */
    transform: scaleX(0);
    transform-origin: left;
    animation: animationBadge 1s .5s ease-out forwards;
}

@keyframes animationBadge {
    80% {
        transform: scaleX(1);
        color: rgba(255, 255, 255, 0);
    }
    100% {
        transform: scaleX(1);
        color: rgba(255, 255, 255, 1);
    }
}

.photo-gallery .gallery-wrap .gallery-slide .shortform-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    z-index: 1;
    transform: none;
}

.photo-gallery .gallery-wrap .gallery-slide .shortform-thumbnail.-hidden {
    display: none;
}

.gallery-slide .control-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .3s;
}

.gallery-slide .control-wrapper .control-btn {
    display: none;
}

.gallery-slide .control-wrapper.-active {
    opacity: 1;
}

.gallery-slide .control-wrapper.-active .control-btn {
    display: block;
}

.gallery-slide .play-btn {
    position: absolute;
    width: 76px;
    height: 76px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-image: url(/pc/images/sf/i_pause.webp); /* 다음 동작 > 일시정지 */
    background-repeat: no-repeat;
    background-size: cover;
}

.gallery-slide .play-btn.-pause {
    background-image: url(/pc/images/sf/i_play.webp); /* 다음 동작 > 재생 */
}

.gallery-slide .sound-btn {
    position: absolute;
    width: 32px;
    height: 32px;
    bottom: 14px;
    left: 16px;
    background-image: url(/pc/images/sf/i_muted.webp);
    background-repeat: no-repeat;
    background-size: cover;
}

.gallery-slide .sound-btn.-unmuted {
    background-image: url(/pc/images/sf/i_unmuted.webp);
}

.photo-gallery .gallery-hide.hide{opacity: 0;}

.photo-gallery.ratio_16-9 .gallery-wrap:after,
.photo-gallery.ratio_16-9 .gallery-wrap .gallery-slide{width: 1200rem;}
.photo-gallery.ratio_16-9 .mark-live{left: 16rem;}
.photo-gallery.ratio_16-9 .mark-brand{right: 20rem;}
.photo-gallery.ratio_16-9 .mark-partner{right: 20rem;}
.photo-gallery.ratio_4-3 .gallery-wrap .gallery-slide{width: 900rem;}
.photo-gallery.ratio_4-3 .mark-live{left: 167rem;}
.photo-gallery.ratio_4-3 .mark-brand{right: 169.5rem;}
.photo-gallery.ratio_4-3 .mark-partner{right: 169.5rem;}

.photo-thumb{margin-top:2rem; font-size:0; background:url(/pc/images/img_lazy_thumb.svg) repeat-x 0 0;} /* 기본, 20개 노출 */
.photo-thumb.photo-thumb-sm{background-size: 57.1px 42px;} /* shortform 이 있을 경우, 21개 노출 */
.photo-thumb a{display:inline-block; position:relative; width:60rem; height:45rem; padding:1rem; background-color:#fff;}
.photo-thumb.photo-thumb-sm a{width:57.1rem; height:42rem;}
.photo-thumb a.current:before{content:""; display:block; position:absolute; top:0rem; left:0; width:100%; height:100%; border:5rem solid #FF673E; border:5rem solid #0740e4;}
.photo-thumb .img{display:inline-block; width:100%; height:100%; background:no-repeat 50% 50%; background-size:cover;}
.photo-thumb .thumb-shortform {
    background: #000;
}
.photo-thumb .thumb-shortform .img:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.7);
    background:url(/pc/images/sf/i_play.webp) 100% 0 / cover;
}

.photo-move{display:block; position:absolute; top:50%; z-index:10; width:80rem; height:80rem; border-radius:50%; transform:translatey(-50%); background-color:rgba(0, 0, 0, 0.1);}
.photo-move.photo-prev{left:16rem;}
.photo-move.photo-next{right:16rem;}
.photo-move:hover{background-color:rgba(0, 0, 0, 1);}
.photo-move .ico{width:100%; height:100%;}
/*선택 옵션*/
.summary-photo-optional{display: flex;}
.photo-optional .mark-brand,
.photo-optional .mark-partner,
.photo-optional .mark-live{position: absolute; z-index:10;}
.photo-optional .mark-brand{top: -6rem; right: 169.5rem; width: 90rem; height: 95rem;}
.photo-optional .mark-partner{top: 20rem; right: 169.5rem; width: 90rem; height: 102rem;}
.photo-optional .mark-live {top: 16rem; left: 167rem; width:137rem; height:47rem; padding:0 16rem; line-height:47rem; border-radius:24rem; background-color: rgba(0, 0, 0, 0.7); color:#fff; font-size:15rem;}
.photo-optional .mark-live .ico{margin-right: 8rem;}

.photo-optional {position:relative; flex:none; width: 576rem; height:432rem; margin-right: 48px;}
.photo-optional .sec-swiper {height: 100%;}
.photo-optional .optional-wrap{overflow: hidden; position: relative; width:100%; height: 100%;border-radius: 10px;}

.title-info{margin-left: 4px;}
.photo-optional.ratio_16-9 .optional-wrap:after,
.photo-optional.ratio_16-9 .optional-wrap .gallery-slide{width: 576rem;}
.photo-optional.ratio_16-9 .mark-live{left: 16rem;}
.photo-optional.ratio_16-9 .mark-brand{right: 20rem;}
.photo-optional.ratio_16-9 .mark-partner{right: 20rem;}
.photo-optional.ratio_4-3 .optional-wrap .gallery-slide{width: 576rem;}
.photo-optional.ratio_4-3 .mark-live{left: 167rem;}
.photo-optional.ratio_4-3 .mark-brand{right: 169.5rem;}
.photo-optional.ratio_4-3 .mark-partner{right: 169.5rem;}
.photo-optional .optional-wrap .optional-slide{width: 576rem; height: 432rem;}
.photo-optional .optional-wrap .optional-slide .optional-img{width: 100%; height: 100%; object-fit: cover; object-position: center center;}

/*선택옵션*/
.optional-list{position: relative;display: flex;flex-direction: column;align-items: center;width: 100%;}
.optional-list .optional-total-price {display:flex; justify-content: space-between; margin-bottom: 8px; padding:0 40px; width: 100%;}
.optional-list .optional-total-price span{font-size: 25px;font-style: normal;font-weight: 700;line-height: normal;color: var(--textTertiary);}
.optional-list .optional-total-price > div{flex: 0 0 30%;text-align: right;}
.optional-list .optional-total-price .price{font-size: 30px;font-style: normal;font-weight: 600;line-height: normal;color: var(--secondary800);}
.optional-list .optional-total-price .price-text{font-size: 25px;font-style: normal;font-weight: 700;line-height: normal;color: var(--secondary800);}
.optional-list .optional-line{width: 100%; height: 4px;border-radius: 5px;background: #555;}

.optional-detail-list {width: 96%;padding-right: 12px;padding-bottom: 42px;background:url(/pc/images/icon-subtract.png) no-repeat; background-size: contain;height: 377px;margin-left: 10px;}
.optional-detail-list.lg {width: 1168px;height: 100%;margin-left:  0;padding-right: 4px;background: #f8f8f8;border: 1px solid #ededed;}
.optional-detail-list.lg:after {position: absolute;left: 36px; bottom: 0; content: "";display: block;width:94%;height: 14px;background-image: url(/mo/images/ico_deco_receipt.svg);background-repeat: repeat-x;background-position: left 6px bottom;}
.optional-detail-list .optional-text{display: flex;align-items: center; justify-content:space-between; padding: 16px 0px;margin: 0 14px 0 32px;font-size: 17px;font-style: normal;font-weight: 400;line-height: normal;color: #707070; cursor: text;background-image: linear-gradient(to right, #C2C2C2 4px, rgba(255, 255, 255, 0) 4px, rgba(255, 255, 255, 0) 100%);background-position: bottom;background-size: 7px 1px;background-repeat: repeat-x;}
.optional-list-wrap ul li:first-child {padding-top: 19px;}
.optional-list-wrap ul li:last-child a {border-bottom: none;padding-bottom: 0px; background: none;}
.optional-detail-list .optional-text.current{position:relative;font-size: 17px;font-style: normal;font-weight: 700;line-height: normal;color: var(--textPrimary);}
.optional-list .optional-text.current:after{content: ""; position: absolute; left: -12px; display: block;width:8px;height: 8px; border-radius: 50%;background-color: #FF673E;}
.optional-detail-list .optional-text .optional-name{flex: 0 0 80%;}
.optional-detail-list .optional-text .optional-name .optional-tooltip{margin-left: 4px;}
.optional-detail-list::-webkit-scrollbar-track {background-color: rgba(0,0,0,0);}
.optional-detail-list.lg .optional-list-wrap{max-height: 640px;}
.optional-list-wrap{overflow-y: auto; height: 100%;}
.optional-photo-move{display:block; position:absolute; top:50%; z-index:10; width:80rem; height:80rem; border-radius:50%; transform:translatey(-50%); opacity: 65%;}
.optional-photo-move.photo-prev{left:16rem;}
.optional-photo-move.photo-next{right:16rem;}
.optional-photo-move:hover{ opacity: 1;}
.optional-photo-move .ico{width:100%; height:100%;}

.photo-pagination {display:flex; align-content: center; justify-content: center; gap: 4px; position: absolute; bottom: 20px; left: 50%; z-index: 10; padding:8px 12px; line-height: 16px; border-radius: 50px; background:rgba(0, 0, 0, 0.20); transform:translateX(-50%); text-align: center; font-size: 14px; font-weight:400; color:rgba(255, 255, 255, 0.70);}
.photo-pagination span {font-weight: 500;}
.photo-pagination .current {color: #ffffff;}

.optional-shadow{position: absolute;bottom: 11px;width: 90%;height: 80px;background: linear-gradient(180deg, rgba(248, 248, 248, 0.00) 0%, #F8F8F8 67.19%);}
.optional-info:after{display: none;}

.summary_list {margin-top:21rem;}
.list-utils {width:100%; font-size: 0;}
.list-utils[data-css-layout] {justify-content:space-between;}
.list-utils .button-box.button-sm{height:43rem; line-height:41rem; font-weight:400;}
.list-utils .util-reference .button-box{position: relative; z-index:1; vertical-align: top;}
.list-purchase{margin-top:2rem;}
.list-purchase > li a{display:inline-block; position:relative; line-height:1; font-size:17rem;}
.list-purchase > li a:after{content:""; display:block; position:absolute; bottom:1.5rem; left:0; z-index:-1; width:100%; height:3rem; background-color:#dadada;}
.list-purchase > li a:hover{color:#707070;}
.list-purchase > li + li{margin-left:13rem;}
.list-keyinfo{width:calc(100% + 16rem); margin-top:16rem;}
.list-keyinfo > li{padding-right:16rem;}
.list-keyinfo .keyinfo{width:100%; min-height:120rem; padding:0 16rem 0 92rem; border:1rem solid #ededed; border-radius:5rem; background-color:#ffffff; font-size:17rem;}
.list-keyinfo .keyinfo[data-css-layout]{justify-content:center;}
.list-keyinfo .keyinfo .ico{position:absolute; top:50%; left:16rem; transform:translatey(-50%)}
.list-keyinfo .keyinfo .dl__dd{display:block; line-height:29rem; font-size:20rem;}
.list-keyinfo .keyinfo:hover{border-color:rgba(7, 64, 228, 0.3);}
.list-keyinfo .keyinfo.no-data{border-color:#f8f8f8; background-color:#f8f8f8;}


#fixContacted{margin-left:12rem;}
.util-button{display: flex;}
.util-button-item{display: inline-block; display: inline-flex; align-items: center;}
.util-button-item + .util-button-item{margin-left: 6rem;}
.button-ico.-active .ico-heart{border-color:rgba(255, 0, 0, 0.15) !important;}
.util-button-item.contacted {margin-left:21rem;}

/* 230126, OP21-843, 보험료 팝업 열기 -> 재사용불가 */
#tipInsurance .list-random-item{display: flex; flex-direction: row; flex-wrap: wrap; margin-top: -25px;} /*li padding: 12, margin:12, border:1*/
#tipInsurance .list-random-item:after{content:""; display: block; position: absolute; top:4px; left:0; width: 100%; height: 4px; background: #fff;}
#tipInsurance .list-random-item li{display:flex; order:2; margin-top: 12px; padding-top: 12px; border-top:1px dashed #ededed;}
#tipInsurance .list-random-item li a{display: block; width: 140px; line-height:0;}

/* **************************************** *
 * product section
 * **************************************** */
/* section component */
.product-section .section{position:relative;}
.section{padding:64rem 0;}
.section:first-child{padding-top:52rem;}
.section:last-child{padding-bottom:150rem;}

.sec-title{position:relative; margin-bottom:40rem;}
.sec-title .title__link{position:absolute; bottom:0; right:0;}
.sec-title .title__link:hover{color:#101010;}
.sec-title .title{line-height:36rem; font-weight:600; font-size:25rem; color: var(--textPrimary);}
.sec-title .title-sub{line-height:25rem; font-weight:600;}
.sec-divider + .sec-divider{margin-top:40rem;}
.sec-box {padding: 18rem 5rem 17.5rem; border-radius:5rem; background-color: rgba(7, 64, 228, 0.1); text-align: center; font-weight: 600; color:#0740e4;}

.sec-swiper {overflow:hidden; position:relative;}
.sec-swiper .swiper-container,
.sec-swiper .swiper-wrapper,
.sec-swiper .swiper-slide {height:100% !important;}
.sec-swiper .swiper-slide .img{display: block; width:100%; height:100%; font-size:0; background: no-repeat 50% 50%; background-size:cover;}
.sec-swiper .swiper-button{opacity: 0; display: block; position: absolute; top:50%; z-index: 10; width:150rem; height:150rem; border-radius: 50%; background-color: #101010; cursor:pointer;}
.sec-swiper .swiper-next{right: 0; transform: translate(50%, -50%);}
.sec-swiper .swiper-prev{left: 0; transform: translate(-50%, -50%);}
.sec-swiper .swiper-button:before,
.sec-swiper .swiper-button:after{content:""; display: block; position: absolute; top: 50%; transform: translatey(-50%);}
.sec-swiper .swiper-button:before{width: 100%; height: 200%;}
.sec-swiper .swiper-button:after{width:32rem; height:32rem; background:no-repeat 50% 50%; background-size:auto 38rem;}
.sec-swiper .swiper-prev:before{left: 50%; transform:translate(-50%,-50%);}
.sec-swiper .swiper-prev:after{left: 50%; margin-left: 10rem; background-image:url(/pc/images/icon-angle-left-WH.svg)}
.sec-swiper .swiper-next:before{right: 50%; transform:translate(50%,-50%);}
.sec-swiper .swiper-next:after{right: 50%; margin-right: 10rem; background-image:url(/pc/images/icon-angle-right-WH.svg)}
.sec-swiper .swiper-button:hover{opacity: 1; visibility: visible;}
.sec-swiper .swiper-button[aria-disabled=true]{opacity: 0; visibility: hidden;}

.sec-alert{margin-top: 24rem; font-size:15rem;}

.sec-progress[data-css-layout]{align-items:center;}
.progress{position:relative;}
.progress-bar {display:inline-block; width:142rem; height:142rem; transform:rotate(-90deg);}
.progress-bar__bg{opacity:10%; fill:none; stroke:#d9d9d9; stroke-width:1.5;}
.progress-bar__prg{fill:none; stroke:#d9d9d9; stroke-dasharray:100 100; stroke-dashoffset:100; stroke-linecap:round; stroke-width:1.5;}
.progress-horiz__bg{display:block; width:100%; height:30rem; border-radius:5rem; background-color: var(--gray100);}
.progress-horiz__prg{display:block; position:absolute; top:0; right:0; min-width: 90px; width:100%; height:100%; border-radius:5rem; background-color: var(--gray900);}
.progress-horiz__prg:after{content:""; display:block; position:absolute; top:50%; right:calc(100% - 40px); z-index: 2; width:170rem; height:112rem; background: url(/pc/images/img_progress_car.webp) no-repeat 50% 50%; transform:translate(50%, -50%);}
.progress-status{position:absolute; top:50%; left:0; display:block; width:100%; padding:0 2rem; color: var(--textPrimary); text-align:center; transform:translatey(-50%);}
.progress-status.no-data{color: var(--textTertiary);}
.progress-detail{padding-left:24rem; font-weight:500; color: var(--textSecondary);}
.progress-detail > *{display:block;}
.progress-detail > *:first-child{margin-bottom:8rem; font-size:20rem; color: var(--textPrimary);}

.progress-max,
.progress-min{position:absolute; top:50%; transform:translatey(-50%); font-size:13rem; font-weight:600;}
.progress-max{left:12rem; color: var(--textTertiary); white-space: nowrap;} /* white-space ios */
.progress-min{right:12rem; color: var(--textAssitive);}
.progress-max .count-unit,
.progress-min .count-unit{display: inline-block; margin-left: 2rem;}
.primary .progress-bar__bg,
.primary .progress-bar__prg{stroke: var(--primary800);}
.primary .progress-detail em{color: var(--primary800);}
.secondary .progress-bar__bg,
.secondary .progress-bar__prg{stroke: var(--secondary800);}
.secondary .progress-detail em{color: var(--secondary800);}

.sec-inp{display: block; position: relative; width: 350rem; height: 80rem; line-height:78rem; border:1px solid #ededed; border-radius:5rem; background: #f8f8f8; cursor: pointer;}
.sec-inp .inp{display: inline-block; width: 100%; height: 100%; padding: 0 46rem 0 73rem; text-align:left; vertical-align: top; color:inherit; cursor:inherit;}
.sec-inp .inp:before,
.sec-inp .inp:after{content:""; display: block; position:absolute; top: 50%; width:32rem; height:32rem; transform:translatey(-50%); background: no-repeat 50% 50%; background-size:auto 100%;}
.sec-inp .inp:before{left:29rem; background:url(/pc/images/icon-angle-down-M.svg) no-repeat 50% 50%; background-size:auto 100%;}
.sec-inp .inp:after{right:29rem; background-image:url(/pc/images/icon-angle-down-M.svg);}
.sec-inp-distance .inp:before{background-image:url(/pc/images/icon-location.svg);}
.sec-inp-charge .inp:before{background-image:url(/pc/images/icon-bolt.svg);}
.sec-inp-charge .inp:after{background-image:url(/pc/images/icon-toggle.svg);}
.sec-inp-electric .inp:before{background-image:url(/pc/images/icon-battery-bolt.svg);}
.sec-inp.primary{border: 1rem solid rgba(7, 64, 228, 0.1); background-color: rgba(7, 64, 228, 0.03); color:#0740e4;}
.sec-inp.no-data{cursor: default;}
.sec-inp.no-data .inp:after{content:none;}
.sec-inp-electric.no-data{font-size: 25rem;}
.sec-inp:not(.no-data):hover{background-color: #fff;}
.sec-inp:not(.no-data) .inp.active{background-color: #fff;}

/* content : 성능정보 */
.cont-inspect.no-data {overflow:hidden; width:100%; height: 369rem; background:url(/pc/images/img-perform-error.webp) no-repeat 50% 50%;}
.cont-inspect.no-data * {display: none;}
.cont-inspect{position: relative;}
.cont-inspect [class*=fix]{position:absolute; font-size:0;}
.cont-inspect .inspect-detail{padding-left:24rem;}
.cont-inspect .img{position: relative;}
.cont-inspect .img img{max-width:100%;}
.cont-inspect .img + .img{margin-left:-20rem;}
.cont-inspect .iframe{overflow:hidden; position:relative; width:100%; height:345px; background:#fff; border:1rem solid #d9d9d9; border-radius:5rem;}
.cont-inspect .iframe iframe{width: 100%; height:100%; padding:18rem 0 0;}
.cont-inspect .iframe .iframe-link{position: absolute; bottom:11rem; right:20rem;}
.cont-inspect .iframe .iframe-link:hover{transform:scale(1.05)}
.cont-inspect .no-data-text{position: absolute; top:50%; left:0; width:100%; text-align: center; transform:translatey(-50%);}
.cont-inspect .no-data-text b{font-size:20rem;}
.cont-inspect .no-data-text p{margin-top: 8rem; color:#707070;}
.cont-inspect > div + div{margin-top: 20rem;} /* 삭제 */
.cont-inspect .inspect-img .tooltip-expand{display: flex; width:auto; padding: 16rem; text-align:center;}

.cont-inspect .iframe.no-carmodoo {background:url(/pc/images/img-perform-carmodoo.webp) no-repeat 50% 50%;}
.cont-inspect .iframe.no-carmodoo * {display: none;}

.inspect-img [class*=fix]:not(.-on) .ico:after{content:none;}
.inspect-img .fix1  {left:59rem; top:26rem;}
.inspect-img .fix2  {left:44rem; top:146rem;}
.inspect-img .fix3  {left:59rem; top:119rem;}
.inspect-img .fix4a {left:97rem; top:105rem;}
.inspect-img .fix4b {left:97rem; top:151rem;}
.inspect-img .fix4c {left:97rem; top:197rem;}
.inspect-img .fix5  {left:59rem; top:170rem;}
.inspect-img .fix6  {left:69rem; top:232rem;}
.inspect-img .fix7  {left:198rem; top:46rem;}
.inspect-img .fix8  {left:198rem; top:163rem;}
.inspect-img .fix9  {left:198rem; top:255rem;}
.inspect-img .fix10 {left:84rem; top:18rem;}
.inspect-img .fix11 {left:84rem; top:34rem;}
.inspect-img .fix12 {left:47rem; top:58rem;}
.inspect-img .fix13 {left:50rem; top:83rem;}
.inspect-img .fix14 {left:65rem; top:66rem;}
.inspect-img .fix15 {left:102rem; top:66rem;}
.inspect-img .fix16 {left:118rem; top:58rem;}
.inspect-img .fix17 {left:120rem; top:84rem;}
.inspect-img .fix18 {left:84rem; top:161rem;}
.inspect-img .fix19 {left:84rem; top:219rem;}
.inspect-img .fix20 {left:45rem; top:233rem;}
.inspect-img .fix21 {left:61rem; top:239rem;}
.inspect-img .fix22 {left:84rem; top:239rem;}
.inspect-img .fix23 {left:108rem; top:239rem;}
.inspect-img .fix24 {left:124rem; top:233rem;}
.inspect-img .fix25 {left:84rem; top:258rem;}
.inspect-img .fix26 {left:221rem; top:33rem;}
.inspect-img .fix27 {left:221rem; top:119rem;}
.inspect-img .fix28a {left:182rem; top:107rem;}
.inspect-img .fix28b {left:182rem; top:153rem;}
.inspect-img .fix28c {left:182rem; top:199rem;}
.inspect-img .fix29 {left:221rem; top:170rem;}
.inspect-img .fix30 {left:234rem; top:146rem;}
.inspect-img .fix31 {left:84rem; top:98rem;}
.inspect-img .fix32 {left:84rem; top:114rem;}
.inspect-img .fix33 {left:210rem; top:232rem;}

.inspect-img .list-label{margin-top:11rem; padding-right:28rem;}
.list-label{text-align:center;}
.list-label > li .ico{margin-right:4rem;}
.list-label > li + li{margin-left:32rem;}

.list-summary{gap: 60rem; padding:20rem 0 19rem; border:1rem solid #d9d9d9; border-radius:5rem; background-color:#f8f8f8;}
.list-summary[data-css-layout]{justify-content:center;}
.list-summary > li{font-size:20rem;}
.list-summary > li > a{display: block;}
.list-summary > li .dl__dt{margin-right:16rem; color: var(--textPrimary); vertical-align: middle;}
.list-summary > li .dl__dd{font-size:25rem; vertical-align: middle;}
.list-summary + .list-detail{margin-top: 31rem;}

.list-detail{padding:0 22rem 0 24rem;}
.list-detail > li{position:relative; margin-top:24rem;}
.list-detail > li:before{content:""; display:block; position:absolute; top:50%; left:0; z-index:-1; width:100%; height:1rem; background-color:#ededed;}
.list-detail > li:first-child{margin-top: 0;}
.list-detail .dl[data-css-layout]{justify-content:space-between;}
.list-detail .dl__dt{position:relative; width:122rem; background-color:#fff;}
.list-detail .dl__dd{max-width:273rem; text-align:right; background-color:#fff;}
.list-detail .dl__dd .ellip{width:100%;}
.list-detail .dl__dt span {display:inline-block; position:relative;}
.list-detail .dl__dt span:after,
.list-detail .dl__dd:after{content:""; display:block; position:absolute; top:50%; width:60rem; height:100%; background-color:#fff;}
.list-detail .dl__dt span:after{left:100%; transform:translatey(-50%);}
.list-detail .dl__dt span + div{margin-left:2rem}
.list-detail .dl__dd:after{transform:translate(-100%, -50%);}

/* content : 배너 */
.cont-banner{overflow:hidden; position: relative; padding:24rem 24rem 24rem 100rem; border-radius: 5rem; background: rgba(7, 64, 228, 0.03) url(/pc/images/img_banner_bg.webp) no-repeat 50% 50%; background-size:cover;}
.cont-banner:before{content:""; display: block; position:absolute; top:50%; left:48rem; width:40rem; height:40rem; background:url(/pc/images/icon-symbol-charancha.svg) no-repeat 50% 50%; background-size: auto 100%; transform:translatey(-50%);}
.cont-banner:last-child{margin-top:40rem;}
.cont-banner .banner-tit{display: block;}
.cont-banner .banner-txt{margin-top:4px; color:#555; font-size:15rem;}
.cont-banner .banner-txt a{color:#a7a7a7; text-decoration: underline; font-size:13rem;}
.cont-banner .banner-txt a:last-child{margin:0 9rem;}

/* content : 딜러정보 */
.cont-dealer[data-css-layout]{justify-content: space-between}
.cont-dealer .button-text{color:#a7a7a7;}
.cont-dealer .button-text:hover{color:#555555;}
.cont-dealer .dealer-profile{width:406rem;}
.cont-dealer .dealer-detail{width: 746rem;}
.dealer-detail .comp-button{padding-top: 24rem; border-top:1rem solid #ededed; text-align: center;}
.dealer-detail .comp-button .button{display: inline-flex; font-size:17rem;}
.dealer-detail .dealer-video .video {margin-bottom:32px;}

/* 딜러 스켈레톤 */
/*.cont-dealer .skeleton,*/
/*.cont-dealer .skeleton-wrap {*/
/*    display: none;*/
/*}*/
.cont-dealer:empty .skeleton {background-color: lightgray; border-radius: 10px;}
.cont-dealer:empty .skeleton-wrap {}
.cont-dealer:empty .skeleton.st-profile {width: 406rem; height: 136rem;}
.cont-dealer:empty .skeleton.st-userInst {margin-top: 15rem; width: 406rem; height: 200rem;}
.cont-dealer:empty .skeleton.st-carInst {width: 779rem; height: 445rem;}

.profile-frame{display: inline-block; vertical-align: top;}
.profile-frame:after{content:""; display: block; clear:both;}
.profile-frame > *{display: block}
.profile-frame .thumb{float: left; display: block; position: relative; margin: 0 auto; font-size:0;}
.profile-frame .thumb .ico{position:absolute; bottom:0rem; right:0rem;}
.profile-frame .thumb .img{overflow:hidden; display: inline-block; position: relative; width:128rem; height:128rem; border-radius:50%; vertical-align: top;}
.profile-frame .thumb .img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; width: 100%; height: 100%; aspect-ratio: auto 100 / 100;}
.profile-frame .thumb ~ *{margin-left:156rem;}
.profile-frame .thumb.thumb-lg .img{width: 210rem; height:210rem;}
.profile-frame .name{font-size: 20rem;}
.profile-frame .contact{font-size:17rem; margin-top:8rem;}
.profile-frame .contact .more{margin-left:4rem; font-size:15rem; text-decoration: underline; color: var(--textTertiary);}
.profile-frame .group{font-size:17rem;}
.profile-frame .info{margin-top:9rem; font-size:0;}
.profile-frame .info > a{margin-right:6rem; font-size: 17rem;}
.profile-frame .group + .info{margin-top:43rem;}

.profile-greeting{position:relative; margin-top:15rem; padding:26rem 24rem 24rem; border:1rem solid var(--gray200); background: var(--backgroundSecondary); border-radius:5rem;}
.profile-greeting:after{content:""; display: block; position: absolute; bottom:100%; left:56rem; margin-bottom:-1rem; width:22rem; height:17rem; background:url(/pc/images/icon-comment-tail.svg) no-repeat 50% 50%;}
.profile-greeting b{display: block; margin-bottom: 6rem;}
.profile-greeting .js-read-btn { margin-top: 15rem; }

/* content: 단지정보 */
.cont-map{width:100%; height:100%; background: #f8f8f8 no-repeat 50% 50%; background-size:cover;}
.cont-map-address{margin-top:16rem;}
.cont-map-address b{display: block; font-size:20rem;}
.cont-map-address address{display: block; margin-top:6rem;}
.cont-map .root_daum_roughmap,
.cont-map .wrap_map{width: 100% !important; height: 100% !important;}
.cont-map .root_daum_roughmap .map_border{display: none !important;}
.cont-map.no-data{background: url(/pc/images/img_kakao_error.webp) no-repeat 50%;} /* 221117, OP21-884 */

/* content: 기본정보 */
.list-basic{margin-bottom:-26rem;}
.list-basic > li{margin-bottom:25rem;}
.list-basic .dl__dt{width:90rem;}
.list-basic .dl__dd{flex:1 1 0; display:inline-block; width:calc(100% - 90rem); font-weight:500;}

/* content: 옵션정보 */
.list-option-part > li{opacity:.3; text-align:center; font-weight:500;}
.list-option-part > li .ico{display:block; margin:0 auto 4rem;}
.list-option-part > li.on{opacity:1;}

.list-option-total > li{padding:32rem 0; border-top:1rem solid #ededed;}
.list-option-total > li:after{content:""; display:block; clear:both;}
.list-option-total > li:last-child{padding-bottom:24rem;}
.list-option-total > li > b{display:block; float:left; width:20%; color: var(--textPrimary);}
.list-option-total > li > ul{margin-left:240rem;}
.list-option-total .list-depth{margin-bottom:-16rem;}
.list-option-total .list-depth > li{margin-bottom:20rem; font-size:15rem; /*font-weight:400;*/ color:#c2c2c2;}
.list-option-total .list-depth .on{color: var(--textSecondary);}
.list-option-total .list-depth .off{color: var(--textAssitive);}
.list-option-total .list-depth.no-data > li{width:100%;}
.list-option-total .list-depth > li.no-data{color:#555555;}
.list-option-total .list-depth .name {cursor: pointer;}

.list-guarantee > li:nth-child(2n){padding-left:25rem;}

/* content: 신차대비 */
.list-comparison > li > div{display: inline-block; text-align:left;}
.list-comparison > li:nth-child(4n-3) {text-align:left}
.list-comparison > li:nth-child(4n-2){padding-left:64rem;}
.list-comparison > li:nth-child(4n-1){padding-left:160rem;}
.list-comparison > li:nth-child(4n){text-align:right;}
.list-comparison > li:nth-child(4n) .dl__dt{text-align:right}
.list-comparison > li:nth-child(4n) .dl__dd{text-align:right;}
.list-comparison .dl__dt{display:block; color: var(--textPrimary);}
.list-comparison .comp-count{display:inline-block; font-size:42rem; white-space: nowrap;} /* white-space ios */
.list-comparison .comp-count .count-unit{display: inline-block; margin-left: 4rem;}

/*.list-comparison .comp-count .count{width:calc(100% + 10rem)}*/
.list-comparison .comp-count .count-unit{display: inline-block; font-size:30rem;}
/* 0603 end */
.list-comparison .count-shadow{margin-right:4rem;}
.list-comparison .count{display:inline-block;}
.list-comparison .comp-count.no-data{margin-top: 7rem; color:#C2C2C2; font-size: 34rem; font-weight: 700;}

/* content: 보험이력 */
.list-insure{text-align:center;}
.list-insure .ico{margin-bottom:-4rem;}
.list-insure .dl__dt{}
.list-insure .dl__dd{font-size:15rem; color:#3c3c3c}
.list-insure .dl{position: relative;}
.list-insure .dl .more{opacity: 0; visibility: hidden; display: block; position: absolute; top:50%; left:50%; width:100rem; height:100rem; border-radius: 100%; color:#fff; font-size:15rem; text-align: center; transform:translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.6);}
.list-insure .dl .more b{display: block; position: absolute; top:50%; left:50%; width:100%; transform:translate(-50%, -50%);}
.list-insure .dl .more .ico{display: block; width:16rem; height:14rem; margin: 0 auto;}
.list-insure .dl .more .ico:after{background-size:auto;}
.list-insure .dl:hover .more{opacity: 1; visibility: visible;}

/* content: 추천모델 */
.list-prd .production{display: block; width:100%; height:100%; border:1px solid var(--grayBorderTertiary); border-radius: 5rem;}
.list-prd .production.no-data{background-color: var(--backgroundSecondary); border-color:var(--backgroundSecondary);}
.list-prd .production.no-data > * {opacity: .4;}
.list-prd .production.no-data .production-img .img,
.list-prd .production .production-img.no-data .img {background-image:url(/pc/images/img-prd-NOIMG.webp);}
.list-prd .production:not(.no-data):hover .production-img .img{transform:scale(1.05); transform-origin: center;}
.production-img{padding: 8rem 16rem 0;}
.production-img .img{width: 100%; height: 0; padding-top:71.134%; background: no-repeat 50% 50%; background-size:auto 100%;}
.production-img img{width: 100%; height: auto; vertical-align: middle;}
.production-detail{padding:20rem 15rem 20rem;}
.production-detail .sort{font-size: 15rem;}
.production-detail .name{display: block;}
.production-detail .list-depth{margin-top:5rem; font-size:15rem;}
.production-detail .list-depth > li + li{margin-top: 4rem;}
.production-detail .list-depth .dl__dt{color: var(--textTertiary); font-size:15rem; vertical-align: middle;}
.production-detail .list-depth .dl__dd{padding-left: 8rem; font-size:15rem; vertical-align: middle;}

/* content: eco 배터리정보 */
.cont-battery[data-css-layout]{justify-content: space-between}
.battery-img{width: 520rem;}
.battery-img svg{display: block;}
.battery-detail{padding-top:13rem; width:660rem;}
.battery-detail .list-battery-guarantee{margin: 0 42rem;}
.list-battery-guarantee{padding:32rem 0 30rem; border:1rem solid rgba(7, 64, 228, 0.1); border-radius: 5px; background-color: rgba(7, 64, 228, 0.03); text-align:center;}
.list-battery-guarantee .dl__dt{font-size: 20rem;}
.list-battery-guarantee .dl__dd{line-height:43px; font-size:30rem; color:#0740e4;}
.list-battery-guarantee .dl__dd.no-data{opacity: .3;}
.list-battery-guarantee .count-unit{position: relative; z-index:2; background: #f7f9fe;}
.list-battery{margin-top: 52rem; text-align:center;}
.list-battery > li{position: relative;}
.list-battery.column3 > li{width: 32.5%;}
.list-battery.column3 > li:nth-child(3n-1){width: 35%; padding: 0 20rem;}
.list-battery.column3 > li:nth-child(3n-2){padding-right: 20rem;}
.list-battery.column3 > li:nth-child(3n-3){padding-left: 20rem;}
.list-battery > li:before{content:""; display: block; position: absolute; top: 50%; left: 0; width:2rem; height:20rem; margin-left:-1rem; margin-top: -10rem; background-color: #ededed;}
.list-battery > li:first-child:before{content:none;}
.list-battery .dl__dt{font-size:20rem; color:#939393;}
.list-battery .dl__dt .ico{top: -1rem; width: 32rem; height: 32rem; vertical-align: middle;}
.list-battery .dl__dd{margin-top:3rem; font-size:30rem; color:#555555;}
.list-battery .dl__dd.no-data{color:#c2c2c2; font-size:25rem;}

/* content: eco 복합전비 */
.cont-cal-mileage[data-css-layout]{justify-content: space-between; align-items: center;}
.cont-cal-mileage > .ico{top: 20rem;}
.cont-cal-mileage > .ico:after{background-size:auto;}
.cont-cal-mileage > .ico-equal{margin:0 7rem;}
.cont-cal-mileage .sort{display: block; margin-bottom: 12rem; padding-left: 10px; font-size:20rem;}
.cont-cal-mileage .sec-inp.no-data{color:#d9d9d9;}
.cont-cal-mileage .sec-inp.no-data .unit{display: none;}
.cont-cal-mileage .inp{font-weight:600; font-size: 25rem;}
.cont-cal-mileage .cal-result .sec-inp{cursor:inherit;}
.cont-cal-mileage .cal-result .inp{text-align:right; font-size: 30rem;}
.cont-cal-mileage .cal-result .inp:before{left:24rem;}
.cont-cal-mileage .cal-result .inp:after{content:none;}
.cont-cal-mileage .cal-result .no-data .inp{font-size:25rem;}
.cont-cal-mileage .js-select-ul > li{padding: 16rem 24rem; font-size: 20rem; line-height:30rem;}
.cont-cal-mileage .select-value .value{display: inline-block; width: 100%; height: 100%; background-color: transparent; font:inherit; color:inherit; vertical-align: initial; cursor: inherit;}

.cont-cal-mileage .cal-result .sort{padding-left: 5rem;}

/* content: section */
.section-homeService{display: none;padding: 64rem 0!important;}
.section-basic{padding-top: 52rem;}
.section-option .sec-alert{margin-top:0;}
.section-option .list-option-part{margin-left:-30rem; margin-right:-30rem; margin-bottom: 30rem;}
.section-option .option-switch{margin-bottom:9rem; text-align:right;}
.section-guarantee .sec-title{margin-bottom:35rem;}
.section-guarantee .sec-alert{margin-top:18rem;}
.section-comparison .sec-title{margin-bottom:77rem;}
.section-comparison .progress-horiz{margin-bottom:46rem;}
.section-performance .sec-title{margin-bottom:32rem;}
.section-inspect .sec-title,
.section-insure .sec-title{margin-bottom:24rem;}
.section-optional .sec-title{display: flex;}
.section-location .title{color: var(--textTertiary)}
.section-location .title span{color: var(--textPrimary)}
.section-location .sec-swiper{height:317rem;}
.section-location .sec-swiper .swiper-button:before{width: 296rem;}
.section-location .sec-swiper .swiper-container{max-width:1136rem;}
.section-recommend .sec-swiper{min-height: 290rem;} 
.section-recommend .sec-swiper .swiper-container{max-width:1162rem;}
.section-recommend .sec-swiper .swiper-button:before{width: 176rem;}
.section-battery .sec-alert{margin-top:0;}
.section-dealer .profile-frame .thumb{margin-top:-4rem;}
.section-dealer .profile-frame .thumb .img{margin-right: 12rem; margin-bottom: 12rem;}

/* content: default */
#defaultView .button-box:not(.default),
#defaultView .button.primary{background:transparent; border-color:#f8f8f8; color:transparent;}
#defaultView .button-box .ico:after{opacity:0;}
#defaultView .list-keyinfo .keyinfo .ico:after{background:#fafafa; border-radius:4rem;}
#defaultView .photo-thumb a.current:before{border-color:transparent;}
#defaultView .sec-box{background:transparent; color:transparent;}
#defaultView .ico[class*=hex]:after{background-color:#fafafa}
#defaultView .sec-inp.primary{background:transparent; border-color:#f8f8f8; color:transparent;}
#defaultView .list-battery-guarantee{border-color:transparent; background-color: transparent;}
#defaultView .list-battery-guarantee .dl__dd{color:transparent;}
#defaultView .list-battery-guarantee .count-unit{background-color:transparent;}
#defaultView .primary .progress-detail em{color:transparent;}
#defaultView .primary .progress-bar__bg,#defaultView .primary .progress-bar__prg{stroke:transparent;}

/* content: eco */
#ecoSellView .button-box:not(.default) {border-color: rgba(131, 177, 0, 0.1); background-color: rgba(131, 177, 0, 0.03); color: var(--green800);}
#ecoSellView .button-box:not(.default):hover {border-color:rgba(131, 177, 0, 0.4);}
#ecoSellView .button-box.primary {border-color:var(--green800); background-color: var(--green800); color:var(--whiteOpacity100);}
#ecoSellView .list-keyinfo .keyinfo:not(.no-data):hover{border-color: rgba(131, 177, 0, 0.4);}
#ecoSellView .photo-thumb a.current:before{border-color:var(--green800);}
#ecoSellView .primary .progress-bar__bg,
#ecoSellView .primary .progress-bar__prg{stroke:var(--green800);}
#ecoSellView .primary .progress-detail em{color:var(--green800);}
#ecoSellView .sec-inp.primary{border-color:rgba(131, 177, 0, 0.2); background: rgba(131, 177, 0, 0.03); color:var(--green800);}
#ecoSellView .sec-inp.no-data.primary{color:rgba(131, 177, 0, 0.3);}
#ecoSellView .cont-cal-mileage .js-select-ul > li:hover,
#ecoSellView .cont-cal-mileage .js-select-ul > li.active{background-color: rgba(131, 177, 0, 0.03); color:var(--green800);}
#ecoSellView .comp-switch .nudge.on{background: var(--green800);}
#ecoSellView .list-battery-guarantee{border-color:rgba(131, 177, 0, 0.2); background-color: rgba(131, 177, 0, 0.03);}
#ecoSellView .list-battery-guarantee .dl__dd{color:var(--green800);}
#ecoSellView .list-battery-guarantee .count-unit{background-color:#fbfdf7;}
#ecoSellView .sec-box {background-color: rgba(131, 177, 0, 0.1); color:var(--green800);}
#ecoSellView [data-wrap="displacement"] {display: none!important;}
#ecoSellView .sec-homeService .setp-wrap .step .step__info .step__num{color:var(--green800);}
#ecoSellView .sec-homeService .homeService-content strong{color:var(--green800);}

#wrap.eco-sell-view .button-box:not(.default) {border-color: rgba(131, 177, 0, 0.1); background-color: rgba(131, 177, 0, 0.03); color: var(--green800);}
#wrap.eco-sell-view .button-box:not(.default):hover {border-color:rgba(131, 177, 0, 0.4);}
#wrap.eco-sell-view .button-box.primary {border-color:var(--green800); background-color: var(--green800); color:var(--whiteOpacity100);}

/* content: dialog*/
.dealerProfileDig.hidden {display: none;}
.dealerProfileDig .dialog__content{position: relative; padding:32rem; border-radius:5rem; background: #fff;}
.dealerProfileDig .dealer-profile {margin-top: -137rem; margin-bottom: 32rem;}
.dealerProfileDig .dialog-tit span{display: inline-block; vertical-align: top;}
.dealerProfileDig .dialog-tit .greet {display: block; font-weight: 400;}
.dealerProfileDig .close{bottom: 100%; right: 0; width: 48rem; height: 48rem; margin-bottom: 28rem;}
.dealerProfileDig .dialog-txt{line-height: 22rem; max-height: 88rem; -webkit-line-clamp: 4;}

.list-sns a:hover{text-decoration: underline;}

/* **************************************** *
 * 딜러정보
 * **************************************** */
.dealer__banner {height: 300rem;}
.dealer__banner img {width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;}
.dealer {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.dealer .dealer__profile {overflow:hidden; padding: 0; margin-right: 62rem; width: 234rem; height: 234rem; border-radius:50%;}
.dealer .dealer__profile img {width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;}
.dealer .dealer__contents {width: calc( 100% - 296rem);}
.dealer .dealer__contents--code {display: block; font-size: 15rem; font-weight: 400; color: #939393;}
.dealer .dealer__contents--name {font-size: 30rem; font-weight: 700; color: #101010;}
.dealer .dealer__contents--status {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16rem; margin: 8rem 0;}
.dealer .dealer__contents--status li {font-size: 20rem; font-weight: 400; color: #101010;}
.dealer .dealer__contents--status li span {font-weight: 700;}
.dealer .dealer__contents--list{overflow: hidden;}
.dealer .dealer__contents--list-items {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; flex-wrap: wrap; margin-left:-25rem;}
.dealer .dealer__contents--list-items span {position: relative; display: inline-block; padding-left:25rem; font-size: 17rem; font-weight: 400; color: #101010;}
.dealer .dealer__contents--list-items > li span:before {content: ""; position: absolute; left: 12rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1rem; height: 10rem; background: #d9d9d9;}
.dealer .dealer__contents .address {margin-top: 16rem; padding-top: 16rem; border-top: 1px solid #ededed;}
.dealer .dealer__contents .address__name {margin-bottom: 8rem; font-size: 17rem; font-weight: 700; color: #707070;}
.dealer .dealer__contents--list-items.address__content span{color:#707070;}
.dealer .dealer__comment {margin-top: 64rem; width: 100%;}
.dealer .dealer__comment--title {display: block; margin-bottom: 12rem; font-size: 20rem; font-weight: 700; color: #101010;}
.dealer .dealer__comment--text-wrap {padding: 24rem 32rem; background: rgba(248, 248, 248, 0.5); border: 1px solid #ededed; border-radius: 5rem;}
.dealer .dealer__comment--text-wrap .comment {overflow: hidden; font-size: 17rem; font-weight: 400; color: #101010;}
.dealer .dealer__comment--text-wrap .comment.active {max-height: 125rem;}
.dealer .dealer__comment--text-wrap .more-btn {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6rem; margin-top: 24rem; font-size: 17rem; font-weight: 500; line-height: 25rem; color: #a7a7a7;}
.dealer .dealer__comment--text-wrap .more-btn:hover{color:#555555;}
.dealer .dealer__map {margin-top: 64rem; width: 100%;}
.dealer .dealer__map--title {display: block; margin-bottom: 12rem; font-size: 20rem; font-weight: 700; color: #101010;}
.dealer .dealer__map--address {margin-bottom: 17rem; font-size: 17rem; font-weight: 500; color: #555;}
.dealer .dealer__map--address span { position: relative; margin-left: 25rem; }
.dealer .dealer__map--address span:before { content: ""; display: block; position: absolute; left: -12rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 12rem; background: #d9d9d9; }
.dealer .dealer__map--box {width: 100%; height: 340rem; background: #f8f8f8;}
.dealer .dealer__map--box.no-data{background:url(/pc/images/img_kakao_error.webp) no-repeat 50%;} /* 221016, OP21-884 */
.dealer .status-tab {margin-top: 136rem; margin-bottom: 24rem; width: 100%;}
.dealer .status-tab ul {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.dealer .status-tab ul li {width: 50%; background: #101010; border-top: 1px solid #101010; line-height: 78rem; font-size: 20rem; font-weight: 400; text-align: center; color: rgba(255, 255, 255, 0.5); cursor: pointer;}
.dealer .status-tab ul li.active {background: #fff; font-weight: 700; color: #101010;}
.dealer .status-tab ul li.active span {font-weight: 600;}
.dealer .tab-target {width: 100%;}

/* 2023-01-30, OP21-1040 */
.dealer .tab-content {display: none;}
.dealer .tab-content.active {display: block;}

.tab-target.cars-list {border-bottom:0;}
.tab-target.cars-list .cars__ul {margin-top:-20px;}
.tab-target .cars__ul .cars__li {display:table; position:relative; width:100%; height:233px; border-bottom:1px solid #D8D8D8; padding:40px 0 40px 227px; vertical-align:middle;}
.tab-target .cars__ul .empty {display: flex; flex-direction: column; gap: 16rem; align-items: center; text-align: center; padding: 205rem 0; border-bottom:1px solid #D8D8D8;} /* 2023-01-30, OP21-1040 */
.tab-target .cars__ul .empty p {font-size: 17rem; font-weight: 500; color: #d9d9d9;}
.tab-target.cars-list .cars__ul .cars__li:before {display:none;}
.tab-target .cars__ul .cars__li .cars__list {display:table-cell; vertical-align:middle; width:564px;}
.tab-target .cars__ul .cars__photo {position:absolute; top:50%; left:0; margin: 0; width:204px; height:154px; transform:translateY(-50%);} /* 2023-01-30, OP21-1040 */
.tab-target .cars__ul .cars__photo img {width:204px; height:154px;}
/* 2023-01-30, OP21-1040 */
.tab-target .cars__ul .soldout {position: absolute; top: 50%; left: 0; z-index: 5; width: 204px; height: 154px; padding-top: 45px; background-color: rgba(0,0,0,0.5); color: #fff; font-weight: bold; text-align: center; line-height: 24px; transform:translateY(-50%);}
.tab-target .cars__ul .soldout:before {content:'';display:block;width:44px;height:44px;margin:0 auto 4px;background:url(/pc/img/spr_common2.png) no-repeat -64px -120px;}
.tab-target .cars__ul .cars__link:hover .brand,
.cars__link:hover .name {color: #222;}

.tab-target .cars__ul .cars__name>.option {display:block; margin-top:4px; font-size:14px; color:#808388;}
.tab-target .cars__ul .cars__price {position:absolute; right:0; top:50%; transform: translateY(-50%);}
.tab-target .cars__ul .cars__price>.price {display:inline-block; line-height:1.5; text-align:right; font-size:24px; color:#3767FF; font-weight:700; display:block;}
.tab-target .cars__ul .cars__price>.price>.won {font-size:16px; line-height:28px;}
.tab-target .cars__ul .cars__price>.month {font-size:16px; color:#a5a4af; display:block; text-align:right; margin-top:8px; font-weight:700;} /*2차 오픈*/
.tab-target .cars__ul .cars__price>.month:before {display:none;}
.tab-target .cars__ul .cars__buttons {position:absolute; bottom:-1.2px; right:0;}
/* 2023-01-30, OP21-1040 */
.tab-target .cars__ul .cars__tags {margin-bottom: 4px;}
.tab-target .cars__ul .cars__name {width:100%; margin-top: 0;}

.tab-target .cars__ul .cars__name>.brand,
.tab-target .cars__ul .cars__name>.name {font-size:20px;}
.tab-target .cars__ul .cars__name.-row>.brand,
.tab-target .cars__ul .cars__name.-row>.name {width:100%;}
.tab-target .cars__info .cars__name.-row+.option>span {font-size:13px;}



/* **************************************** *
 * ico
 * **************************************** */
.ico-symbol-loading:after    {background-image:url(/pc/images/icon-symbol-loading.svg);}
.ico-brand-mark:after        {background-image:url(/pc/images/icon-brand-mark2303.svg);}
.ico-partner-mark:after      {background-image:url(/pc/images/icon-partner-mark2303.svg);}
.ico-enlarge:after           {background-image:url(/pc/images/icon-enlarge.svg);}
.ico-circle-home:after       {background-image: url(/pc/images/icon-circle-home.svg);}

.ico-file-searching:after    {background-image:url(/pc/images/icon-file-searching.svg);}
.ico-file-guarding:after     {background-image:url(/pc/images/icon-file-guarding.svg);}
.ico-file-writing:after      {background-image:url(/pc/images/icon-file-writing.svg);}
.ico-file-calcuration:after  {background-image:url(/pc/images/icon-file-calcuration.svg);}
.eco-sell-view .ico-file-searching:after    {background-image:url(/pc/images/icon-file-searching-GR.svg);}
.eco-sell-view .ico-file-guarding:after     {background-image:url(/pc/images/icon-file-guarding-GR.svg);}
.eco-sell-view .ico-file-writing:after      {background-image:url(/pc/images/icon-file-writing-GR.svg);}
.eco-sell-view .ico-file-calcuration:after  {background-image:url(/pc/images/icon-file-calcuration-GR.svg);}
.no-data .ico-file-searching:after    {background-image:url(/pc/images/icon-file-searching-NONE.svg);}
.no-data .ico-file-guarding:after     {background-image:url(/pc/images/icon-file-guarding-NONE.svg);}
.no-data .ico-file-writing:after      {background-image:url(/pc/images/icon-file-writing-NONE.svg);}
.no-data .ico-file-calcuration:after  {background-image:url(/pc/images/icon-file-calcuration-NONE.svg);}

.ico-car-insure1:after       {background-image:url(/pc/images/icon-car-insure1.svg);}
.ico-car-insure2:after       {background-image:url(/pc/images/icon-car-insure2.svg);}
.ico-car-insure3:after       {background-image:url(/pc/images/icon-car-insure3.svg);}
.ico-car-insure4:after       {background-image:url(/pc/images/icon-car-insure4.svg);}
.ico-car-insure5:after       {background-image:url(/pc/images/icon-car-insure5.svg);}
.ico-car-insure6:after       {background-image:url(/pc/images/icon-car-insure6.svg);}
.ico-car-insure7:after       {background-image:url(/pc/images/icon-car-insure7.svg);}
.ico-car-insure8:after       {background-image:url(/pc/images/icon-car-insure8.svg);}


.ico-car-op-MG001:after      {background-image:url(/pc/images/icon-car-op-15601.svg);}
.ico-car-op-MG002:after      {background-image:url(/pc/images/icon-car-op-temp1.svg);}
.ico-car-op-MG003:after      {background-image:url(/pc/images/icon-car-op-5603R.svg);}
.ico-car-op-MG004:after      {background-image:url(/pc/images/icon-car-op-5603C.svg);}
.ico-car-op-MG005:after      {background-image:url(/pc/images/icon-car-op-temp2.svg);}
.ico-car-op-MG006:after      {background-image:url(/pc/images/icon-car-op-25201.svg);}
.ico-car-op-MG007:after      {background-image:url(/pc/images/icon-car-op-17811.svg);}
.ico-car-op-MG008:after      {background-image:url(/pc/images/icon-car-op-17819D.svg);} 
/* 0513 end */


.ico-circle-mark-A:after     {background-image:url(/pc/images/icon-circle-mark-a.svg);}
.ico-circle-mark-C:after     {background-image:url(/pc/images/icon-circle-mark-c.svg);}
.ico-circle-mark-T:after     {background-image:url(/pc/images/icon-circle-mark-t.svg);}
.ico-circle-mark-U:after     {background-image:url(/pc/images/icon-circle-mark-u.svg);}
.ico-circle-mark-W:after     {background-image:url(/pc/images/icon-circle-mark-w.svg);}
.ico-circle-mark-X:after     {background-image:url(/pc/images/icon-circle-mark-x.svg);}
.ico-circle-mark-2:after     {background-image:url(/pc/images/icon-circle-mark-2.svg);}

.ico-home:after              {background-image:url(/pc/images/icon-home.svg);}
.ico-beta:after              {background-image:url(/pc/images/icon-beta.svg);}
/* 0525 End */

/* 230719, OP21-1338 */
.ico-lease-man:after     {background-image:url(/pc/images/icon-lease-man.webp);}

/* **************************************** *
 * lottie
 * **************************************** */
.lottie{display: inline-block; vertical-align: top;}
#lottieElectric{width: 124rem;}
#lottiesScan{transform:translate3d(0,0,0);}
#lottiesScan {position: relative; width: 100%; min-height:308rem;}
#lottiesScan svg{position: relative; z-index:1;}
#lottiesScan:after{content:""; display: block; position: absolute; z-index:0; top: 1rem; left: -1rem; width:100%; height:100%; background:url(/pc/images/img_scan_0.webp) no-repeat 50% 50%; background-size: 100% auto; transform: matrix(0.11676, 0, 0, 0.1024, -0.0119934, 0) scale(8.5874);}
#lottiesScan.js-load-complete:after{opacity: 0;}


/* **************************************** *
 * filter
 * **************************************** */
.no-data-filter{filter:blur(4px); -webkit-filter: blur(4px)}
.no-data-filter:after{content:""; display:block; position: absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(0, 0, 0, 0.02);}


/* **************************************** *
 * transition
 * **************************************** */
.photo-gallery .gallery-hide{transition:opacity .35s ease, visibility .35s ease;}

.comp-switch .nudge:after{transition:left .35s ease;}
.sec-swiper .swiper-button{transition:opacity .35s ease .5s, visibility .35s ease .5s;}
.sec-swiper .swiper-button:hover{transition:opacity .35s ease 0s, visibility .35s ease 0s;}
.sec-inp{transition:background .35s ease;}

.product-header-fixed{transition:transform .4s cubic-bezier(0.42, 0, 0.43, 0.98);}
.photo-move{transition:background .35s ease;}
.optional-photo-move{transition:background .35s ease;}

.list-purchase > a{transition:color .35s ease;}
.list-keyinfo .keyinfo:hover{transition:border-color .35s ease;}
.list-prd .production .production-img .img{transition:transform .35s ease;}
.list-insure .dl .more{transition:opacity .35s ease .5s, visibility .35s ease .5s;}
.list-insure .dl .more:hover{transition:opacity .35s ease 0s, visibility .35s ease 0s;}

.cont-inspect .iframe .iframe-link{transition:transform .35s ease;}

#lottiesScan:after{transition:opacity .35s ease;}

.progress-bar__prg{transition:stroke-dashoffset 2s cubic-bezier(0.42, 0, 0.43, 0.98);}
.progress-horiz__prg{transition:width 1.2s cubic-bezier(0.42, 0, 0.43, 0.98);}


/* **************************************** *
 * fetch
 * **************************************** */
.contFetch{position: relative;}
.contFetch:not(.fetch){overflow:hidden; height:240rem; padding: 0; margin: 0;}
.contFetch:not(.fetch):after{content:""; display: block; position: absolute; top:50%; left:50%; z-index:-1;  width: 100%; height: 100%; background: #f8f8f8 url(/pc/images/icon-symbol-loading.svg) no-repeat 50% 50%; background-size: 100rem auto; transform:translate(-50%, -50%);}
.contFetch:not(.fetch) * {opacity: 0; visibility: hidden; height: 0; width: 0;}


/* **************************************** *
 * 미리보기
 * **************************************** */
.not-function{position: relative;opacity: .3;}
.not-function * {cursor: default;touch-action: none;}
.not-function:after{content:"";display: block;position: absolute;top: 0;left: 0; z-index:1000; width: 100%; height: 100%;}


/* **************************************** *
 * 2023 운영건 관련 추가, 디자인상 하드코딩
 * **************************************** */
/* OP21-843 */
#tipInsuranceParent{z-index:1;}
#tipInsuranceParent:before{opacity: 0; visibility: hidden; content:""; position: absolute; top: 0; left: 0; display:block; width: 194px; height: 177px;}
#tipInsuranceParent:hover:before{opacity: 1; visibility: visible;}

/* OP21-1058 */
#hsToolTipWrap.comp-tooltip-tip:after{background-image: url(/pc/images/icon-etc-tail-BK.svg);}
#hsToolPcTip .tooltip__button{width: 14px; height: 14px; vertical-align: middle;}
#hsToolPcTip .tooltip__button .ico{vertical-align: top;}

/* OP21-1495, only Tmap, 홈서비스 혜택정보 노출 */
/*.notTmap.comp-tooltip-tip:after {content: none;}*/

/*홈서비스 소개*/
.sec-homeService{padding: 40rem 24rem 24rem; border: 1rem solid var(--grayBorderTertiary); border-radius: 5rem;}
.sec-homeService .setp-wrap{display: flex; gap: 16rem; margin-bottom: 40rem;}
.sec-homeService .setp-wrap .step{display: flex; align-items: center;}
.sec-homeService .setp-wrap .step .step__info{display: flex; flex-direction: column; text-align: center; width: 249rem; margin-right: 16rem;}
.sec-homeService .setp-wrap .step .step__info img{width: 56rem; height: 56rem; margin: 0 auto;}
.sec-homeService .setp-wrap .step .step__info .step__num{margin-top:2rem; color: var(--primary750); font-size: 15rem; font-weight: 700;}
.sec-homeService .setp-wrap .step .step__info .step__txt{margin-top:2rem; font-size: 17rem; font-weight: 700; letter-spacing: -0.34rem;}
.sec-homeService .homeService-content{padding: 22rem 20rem; background-color: var(--backgroundSecondary); border-radius: 5rem;text-align: center; color: var(--textTertiary);font-size: 17rem;font-weight: 400;line-height: 22rem;letter-spacing: -0.34rem;}
.sec-homeService .homeService-content strong{color: var(--primary800); font-weight: 700;}