@charset "utf-8";

/* common */
body,
.contentWrap .contTop {background-color:#fff}
.topBgTxtArea {display:none !important;}

:root {
    --cont-max-width:1120px;
    --cont-wide-width: 1600px;
}

/* Key-Visual Area */
.keyVisual {position:relative; overflow:hidden; width:100%; height:760px;}
.keyVisual > img {width:100%; object-fit:cover;}
.keyVisual__title {position:absolute; left:calc(50% - var(--cont-max-width)/2); top:78px; font-family:"HyundaiMedium"; font-size:68px; line-height:1; color:#fff; z-index:1;}
.keyVisual__title > span {display:block; font-size:38px; line-height:1; margin-bottom:5px}

/* Sub Key-Visual Area */
.sub-keyVisual {position: relative;}
.sub-keyVisual__title {position:absolute;left:calc(50% - var(--cont-max-width)/2);top:100px;max-width: var(--cont-max-width);width:100%;}
.sub-keyVisual__title h2 {font-family:"HyundaiMedium";font-size:58px;line-height:56px;color:#fff;}
.sub-keyVisual__title h2 > span {display:block;font-family:'HyundaiMedium';font-size:34px;line-height:40px;margin: 0 0 6px;}
.sub-keyVisual__title > p{margin-top:10px; color:#fff; font-size:30px;}
.sub-keyVisual__media img,
.sub-keyVisual__media video{object-fit: cover;width: 100%;height: auto;vertical-align: middle;}


/* Banner Area */
.bottom-banner{position:relative;height:435px;background-size:cover;text-align:center;}
.bottom-banner--kona{background-image:url('/content/dam/hyundai/ww/en/images/find-a-car/pip/suv/kona-sx2/sx2-kona-digital-studio-banner-pc.jpg');}
.bottom-bannerWrap{--cont-max-width:1320px;max-width: var(--cont-max-width);width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);display: flex;flex-direction: column;
align-items: flex-end;}
.bottom-banner__box{padding: 0 40px;}
.bottom-banner__title {font-family:'HyundaiMedium';font-size:56px;line-height:66px;color:#fff;text-align:right;margin-bottom: 22px;}
.bottom-banner__button {display:block;min-width:262px;width:fit-content;border:1px solid #fff;text-align:center;}
.bottom-banner__button:hover{color:#fff;}
.bottom-banner__button span{color:#fff;font-size:16px;line-height:58px}

/* h */
.pip-title{font-family:'HyundaiMedium';font-size:44px;line-height:54px;margin-bottom:4px;letter-spacing:-0.01em}
.pip-subTitle{font-family:'HyundaiMedium';font-size:30px;line-height:40px;margin-bottom:28px;}
.txt-desc{font-size:16px;line-height:28px;}
.txt-info{font-size:24px;line-height:28px;}

.pip-desc{line-height: 28px;font-family: 'HyundaiTextRegular';}
.pip-txtWrap{margin-bottom:50px}

/* text column */
.txt-col{display:flex;flex-wrap: wrap;justify-content:space-between;align-items:stretch;width: 100%;}
.txt-col .pip-title{margin-bottom:0}
.txt-col .pip-subTitle{margin-bottom: 20px;}
.txt-col__elem{text-align:left}
.txt-col__elem + .txt-col__elem {width:55%;}
.txt-col--1{width: 100%;}
.txt-col__elem--1{width: 50%;margin-top: 100px;} 
.txt-col__elem--1 + .txt-col__elem--1{width: 48%;}
.txt-col__elem--1 .pip-subTitle{font-size: 20px;line-height: 28px;margin-bottom: 0;}

/* section */
.section-media{width:100%;max-width:var(--cont-max-width);margin:100px auto}
.section-media__description{margin:0 0 50px;text-align:center}
.section-media__elem video {width: 100%;height: auto;}

.section-media.full-media {max-width:100%}
.section-media.full-media .section-media__description{margin:0 auto 50px;}
.section-media.full-media .section-media__elem{width: 100%; margin: 0 auto;}
.section-media.full-media .section-media__elem video, .section-media.full-media .section-media__elem img {width: 100%; object-fit: cover; vertical-align: top;}


.section-bg{width:100%;max-width:initial;background-color:#F6F3F2;padding:100px 0;}
.section-bg .section-media__inner{max-width:var(--cont-max-width);margin:0 auto}

.section-col .section-media__inner{display:flex;gap:50px}
.section-col .section-media__description{width:27%;text-align:left}
.section-col .section-media__elem{width:73%;text-align:left}
.section-col .section-media__elem img{width:100%}
.section-col--1 {display: flex;flex-wrap:wrap;align-items: center;}

.section-col__box{width: 50%;}
.section-col__box img{width: 100%;display: block;}
.section-col__box.txt-col{padding-left: 70px;}
.section-col__box.txt-col .txt-col__elem{width: 80%;}

.section-col--2{display: flex;gap: 24px;flex-direction: row-reverse;align-items: center;}
.section-col--2 .section-col__box {text-align: left; margin-bottom: 0;}
.section-col--2 .pip-txtWrap {margin-bottom: 0;}

.section-media--wide {max-width: var(--cont-wide-width);}
.section-media--wide .section-media__elem video, 
.section-media--wide .section-media__elem img {width: 100%;object-fit: cover;vertical-align: top;}

/* tab */
.section__tab {display:flex}
.section__tab li{flex: 1;height:75px;text-align:center;border-bottom:4px solid #e5e5e5;cursor:pointer}
.section__tab li.on{border-color:#00AAD2;color:#00AAD2}
.section__tab li{font-family:'HyundaiMedium';font-size:20px;line-height:75px;text-align:center;color:#B2B2B2;text-decoration:none;}

/* button */
.btnWrap{text-align:center;margin-top:30px;}
.btnWrap .btn{max-width:260px;width:100%;height:56px;}

/* List */
.li-asterisk li{font-size:14px;line-height:28px;text-indent: -8px;padding-left:8px;}
.li-asterisk li::before {content:"* "}

.btnWrap + .li-asterisk{margin-top:160px}

/* Graph Area */
.graph__box{display: flex;justify-content: space-between;align-items: center;gap: 60px;}
.graph__elem{width: 50%;}
.graph__desc{width: 50%;}
.graph__spec{display: flex;align-items: center;gap: 52px;justify-content: space-between;}
.graph__item{display: flex;gap: 20px;}
.graph__item strong{font-size: 80px;line-height: 1;color: #444;font-weight: 500;letter-spacing: -4px;}
.graph__icon{font-size: 14px;line-height: 1;color: #00aad2;font-weight: 700;text-align: center;}
.graph__icon.i-torque {color:#002C5F;}
.graph__icon:before{display: block;content: "";width: 48px;height:48px;background-size: cover;margin: 0 auto 2px;}
.graph__icon.i-power:before{background: url('/content/dam/hyundai/ww/en/images/find-a-car/pip/suv/kona-sx2/hev/sx2-kona-hev-performance_icon_1.png') center / contain;background-repeat: no-repeat;}
.graph__icon.i-torque:before{background: url('/content/dam/hyundai/ww/en/images/find-a-car/pip/suv/kona-sx2/hev/sx2-kona-hev-performance_icon_2.png') center / contain;background-repeat: no-repeat;}
.graph__unit{width: 100%;}

/* swiper */
:root {
    --swiper-pagination-bullet-size: 12px;
    --swiper-pagination-bullet-horizontal-gap: 6px;
    --swiper-theme-color: #02B0D3 !important;
    --swiper-pagination-bullet-inactive-color:#fff;
    --swiper-pagination-bullet-inactive-opacity:1;
    --swiper-navigation-color:#fff;
    --swiper-navigation-size: 57px !important;
    --swiper-pagination-bottom:44px;
}
.swiper-pagination{line-height:1;}
.swiper-button span{opacity:0;font-size:0}
.swiper-button .swiper-button-prev {left:var(--swiper-navigation-sides-offset, 40px)}
.swiper-button .swiper-button-next {right:var(--swiper-navigation-sides-offset, 40px)}



/* full page */
.fp-section-wrap{width: 100%;height: 100%;}
.fp-section{width: 100%;height: 100%;position: relative;}
.fp-section .sub-keyVisual__title{padding-top: 100px;}
.fp-section img{height: 920px;}

/* Count number Area */
.count-num-area{position: absolute;left: calc(50% - var(--cont-max-width)/2);bottom: 80px;max-width: var(--cont-max-width);width: 100%;color: #fff;}
.count__elem{position: relative;display: flex;} 
.count__elem .pip-txtWrap{margin-bottom: 0;}
.count__item{display: flex;position: relative; padding-top:50px; font-family:'HyundaiMedium'; width:50%;}
.count__item + .count__item{justify-content:flex-end;}
.count__item + .count__item::before{content: "";position: absolute; left:0; top: 0px;width: 1px;height: 100%;background-color: rgba(255,255,255,0.2);}
.count__item + .count__item .count__tit{left:56px;}
.count__tit{position:absolute; left:0; top:0; font-size:30px;}
.count__list{position: relative; min-width:220px;}
.count__list + .count__list{min-width:285px; padding-left:45px;}
.count__list + .count__list::before{content:""; position:absolute; left:0; top:0; width:1px; height:100%; border-left:1px dotted rgba(255, 255, 255, 0.3);}
.count__list strong{font-size: 80px;line-height: 65px;font-weight: normal;display: inline-block;}
.count__list .val-max{display:block; margin-bottom:20px; font-size:16px;}
.count__list .val-unit{font-family:'HyundaiRegular'; font-size: 24px;line-height: 28px;font-weight: 500;}
.count__item .val-desc{margin-top:5px; font-size:30px;}
.notice-txt{position: absolute;bottom: 204px;left: calc(50% - var(--cont-max-width)/2);max-width: var(--cont-max-width);width: 100%;}
.notice-txt .pip-desc{font-size: 30px;line-height: 40px;font-weight: 400;color: #fff;}
.count__list .val-desc span{font-family:'HyundaiRegular'; font-size:24px;}
.notice-extra-txt{position: absolute;bottom: 80px;left: calc(50% - var(--cont-max-width)/2);width: 100%;max-width: var(--cont-max-width);}
.notice-extra-txt .pip-desc{color: #fff;}


@media print, screen and (min-width: 741px) and (max-width: 20000px) {
    .topArea .sharing {top: 120px;}
    .navigationTabWrap.fixed {z-index: 100;}
}

/* Mobile */
@media screen and (min-width:0) and (max-width:740px){
    /* common */
    .contentWrap .contTop{padding-top:0;}
    .navigationTabWrap.fixed {z-index: 100;}
    .txt-col.align-center-mobile .txt-col__elem{text-align:center}

    /* KV Area */
    .keyVisual {height:340px;}
    .keyVisual__title {top:26px;left:25px;font-size:34px;}
    .keyVisual__title > span {font-size:19px;line-height: 24px;}

    /* Sub KV Area */
    .sub-keyVisual.bg-img{height:473px}
    .sub-keyVisual__title {left:15px; top:32px; max-width: 100%;}
    .sub-keyVisual__title h2{font-size:35px; line-height:37px;}
    .sub-keyVisual__title h2 > span{margin-bottom:8px; font-size:16px; line-height:24px;}
    .sub-keyVisual__title > p{margin-top:5px; font-size:19px}

    /* Banner Area */
    .bottom-banner{height: 135px;}
    .bottom-banner--kona{background-image:url('/content/dam/hyundai/ww/en/images/find-a-car/pip/suv/kona-sx2/sx2-kona-digital-studio-banner-m.jpg');}
    .bottom-bannerWrap{padding: 0 16px;}
    .bottom-banner__title {font-size:26px;line-height:31px;margin-bottom: 15px;}
    .bottom-banner__button {width:100px;min-width: 100px;}
    .bottom-banner__button span{line-height: 28px;font-size: 10px;}

    .txt-col{display:block}
    .txt-col .pip-subTitle{margin-bottom: 18px;}
    .txt-col__elem + .txt-col__elem{width:100%;margin-top:6px}
    .txt-col__elem--1{width: 100%;margin-top: 40px;}
    .txt-col__elem--1 + .txt-col__elem--1{margin-top: 40px;}
    .txt-col__elem--1 .pip-subTitle{font-size: 16px;line-height: 21px;margin-bottom: 15px;}
    
    .pip-txtWrap{margin-bottom: 30px;} 
    .pip-title{font-size: 27px;line-height: 32px;margin-bottom: 3px;}
    .pip-subTitle{font-size: 19px;line-height: 24px;margin-bottom: 18px;}
    .pip-desc, .txt-info{font-size: 14px;line-height: 21px;}


    /* section */
    .section-media{margin:50px auto}
    .section-media__description{margin:0 0 35px;}
    .section-media{padding: 0 15px;}
    .section-media__elem img,
    .section-media__elem video {width:100%;height:auto}

    .section-media.full-media {padding: 0;}
    .section-media.full-media .section-media__description{margin: 0 15px 35px;}
    
    .section-media + .sub-keyVisual {margin-top:60px}
    .section-media.section-bg{padding:60px 15px;}

    .section-col .section-media__inner{display:block;}
    .section-col .section-media__elem{width:100%;}
    .section-col .section-media__description{width:100%}

    .section-col--1{gap: 30px;}
    .section-col--1 .section-col__box .pip-desc--extra{position: absolute;bottom: 15px;left: 50%;transform: translateX(-50%);font-size: 11px;line-height: 8px;color: #fff;width: 100%;text-align: center;}
    .section-col__box{width: 100%;}
    .section-col__box{position: relative;}
    .section-col__box.txt-col .txt-col__elem{width: 100%;}

    .section-col--2{flex-direction: column;flex-wrap: nowrap; gap: 0;}
    .section-col--2 .pip-txtWrap {margin-bottom: 30px;}


    /* tab */
    .section__tab li{height:51px;border-width:2px;font-size:13px;line-height:51px;}
    
    /* swiper */
    :root {
        --swiper-pagination-bullet-size: 7px;
        --swiper-pagination-bullet-horizontal-gap: 3px;
        --swiper-navigation-size: 5px !important;
        --swiper-pagination-bottom:15px;
    }
    .swiper-slide img{aspect-ratio: 16/9;height:202px;}
    .exterior-swiper .swiper-button-prev{left:0}
    .exterior-swiper .swiper-button-next{right:0}
    .exterior-swiper .swiper-button-next, 
    .exterior-swiper .swiper-button-prev{width:26px;height:26px;background-color:rgba(0,0,0,0.5);}


    /* Graph Area */
    .graph__box{flex-direction: column;gap: 48px;}
    .graph__elem{width: 80%;margin: 0 auto;}
    .graph__desc{width: 100%;}
    .graph__spec{display: flex;align-items: center;margin-top: 0;gap: 20px;}
    .graph__item{align-items: center;width: 50%;gap: 0;}
    .graph__item + .graph__item{margin-top: 0;}
    .graph__item strong{font-size: 40px;font-weight: 500;letter-spacing: -3px;}
    .graph__icon{font-size: 12px;width: 90%;}
    .graph__icon:before{width: 43px;height: 42px;}
    .graph__unit{font-size: 12px;}
    .graph__unit.i-power .graph__icon:before, .graph__unit.i-torque .graph__icon:before{width: 40px;height: 40px;}

    /* Count number Area */
    .fp-section img{height: 585px;}
    .fp-section .sub-keyVisual__media{background-color: #000;height: 106em;min-height: 1420px;}
    .fp-section .sub-keyVisual__title{padding-top: 34px;}
    .count-num-area{left: 0;bottom: 30px;max-width: 100%;}
    .count__elem:last-child .pip-txtWrap{display: none;}
    .count__elem{display:block;}
    .count__elem .pip-subTitle{display: none;}
    .count__item{width:100%; padding:40px 15px 0;}
    .count__item + .count__item{margin-top:35px;}
    .count__item + .count__item::before{display:none;}
    .count__item + .count__item .count__tit{left:15px;}
    .count__tit {left:15px; font-size:19px;}
    .count__list{min-width:50%;}
    .count__list + .count__list{padding-left:18px; min-width:50%;}
    .count__list + .count__list::before {left:-5px;}
    .count__list .val-max {margin-bottom:4px; font-size:12px;}
    .count__list strong {font-size:39px; line-height:1;}
    .count__list .val-unit {font-size:14px;}
    .count__list .val-desc {margin-top:0; font-size:16px;}
    .count__list .val-desc span{font-family:'HyundaiRegular'; font-size:14px;}
    .notice-txt{left: 0;top: 33%;width: 100%;max-width: var(--cont-max-width);padding: 34px 15px 0;}
    .notice-txt .pip-desc{font-size: 14px;line-height: 19px;}
    .notice-extra-txt{left: 0;bottom:4%;width: 100%;max-width: var(--cont-max-width);padding: 34px 15px 0;} /* 230403 modify */
    .notice-extra-txt .pip-desc{font-size: 14px;line-height: 19px;color: rgba(112, 112, 112, 1);}


    
    /* tab */
    .section__tab li{height:51px;border-width:2px;font-size:13px;line-height:51px;}


}


/* tablet */
@media screen and (min-width:741px) and (max-width:1366px){
    .keyVisual{height: 630px;}
    .bottom-banner {height: 280px;}
    .full-swiper .swiper-button .swiper-button-prev {left: var(--swiper-navigation-sides-offset, 10%);}
    .full-swiper .swiper-button .swiper-button-next {right: var(--swiper-navigation-sides-offset, 10%);}
}