/* 
 * sonata-dn8-2023 > common.css 
 * version : 202306
*/

@charset "utf-8";

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

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

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

/* Sub Key-Visual Area */
.sub-keyVisual {position: relative; width: 99vw;margin-left: calc(-50vw + 50.8%);}
.sub-keyVisual__title {position:absolute;left:calc(50% - var(--cont-max-width)/2);top:100px;max-width: var(--cont-max-width);width:100%;z-index:5}
.sub-keyVisual__title h2 {font-family:'HyundaiSansHeadMedium';font-size:58px;line-height:68px;color:#fff; font-weight: 400;}
.sub-keyVisual__title h2 > span {display:block; font-size:34px;line-height:42px;}
.sub-keyVisual__title > p{font-family:'HyundaiRegular';font-size:34px;line-height:45px;margin-top:21px;color:#fff;}
.sub-keyVisual__media img,
.sub-keyVisual__media video{object-fit: cover;width: 100%;height: auto;}

/* 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:left;margin-bottom: 22px;}
.bottom-banner__button {display:block;min-width:262px;width:fit-content;border:1px solid #fff;text-align:center;margin-right:20.8em}
.bottom-banner__button:hover{color:#fff;}
.bottom-banner__button span{color:#fff;font-size:16px;line-height:58px}

/* h */
.pip-title{font-size:44px;line-height:54px;font-weight:500;margin-bottom:10px;letter-spacing:-0.01em; font-family: 'HyundaiSansHeadMedium';}
.pip-subTitle{font-size:30px;line-height:40px;font-weight:500;margin-bottom:26px;letter-spacing:-0.02em}
.txt-col__elem .pip-subTitle{margin-bottom:18px}
.txt-desc{font-size:16px;line-height:28px;}
.txt-info{font-family:'HyundaiTextRegular';font-size:24px;line-height:28px;font-weight:400;}

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

/* 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__elem{text-align:left}
.txt-col__elem + .txt-col__elem {width:55%;}

.txt-col--half{margin-top:102px; gap:160px 0;}
.txt-col--half .txt-col__elem{width:50%;}

/* section */
.section-media{width:100%;max-width:var(--cont-max-width);margin:150px auto}
.section-media__description{margin:0 0 50px;text-align:center}
.section-media__elem {text-align:center}
.section-media__elem .p-asterisk {margin-top:37px;font-size:16px;line-height:28px;text-indent: -8px;padding-left:8px;}
.section-media__elem .p-asterisk::before {content:"* "}
.section-media__elem .img-desc{margin-top:20px; color:#a9a9a9; text-align:right;}

.section-media.full-media {max-width:100%}
.section-media.full-media .section-media__description{width:var(--cont-max-width);margin:0 auto 50px;}

.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:30px}
.section-col .section-media__description{width:30%;text-align:left}
.section-col .section-media__elem{width:73%;text-align:left}
.section-col .section-media__elem img{width:100%}

.section-col.section-media__elem {display: flex;flex-wrap:wrap;align-items: center;}
.section-col__elem {width: 50%;}
.section-col__elem img {width: 100%;display: block;}
.section-col__txt {padding:0 70px;}

.section-col.section-col--half .section-media__inner {flex-direction: row-reverse;align-items: center;}
.section-col.section-col--half .section-media__description {width:50%;margin:0}
.section-col.section-col--half .section-media__elem {width:50%}

/* img comment */
.img-comment {position:relative}
.img-comment__txt, 
.img-comment--wide{position:absolute;right:40px;bottom:44px;font-family:'HyundaiTextRegular';font-size:20px;line-height:28px;color:#fff}
.img-comment--wide{right:calc(50% - var(--cont-max-width)/2);bottom:80px;} 
.img-comment--right {text-align:right;}

/* tab */
.section__tab {display:flex}
.section__tab li{flex: 1;height:71px;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:22px;line-height:71px;text-align:center;color:#B2B2B2;text-decoration:none;}

/* button */
.btnWrap{text-align:center;margin-top:50px;padding:0;}
.btnWrap .btn{max-width:300px;width:100%;font-size:22px;line-height:80px;}

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

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

/* gallery area */
.gallery{display:flex;flex-direction:column;gap:24px;width: 100%;}
.gallery img{width: 100%;}
.gallery-col {display:flex;gap:24px;}
.gallery-col div{width:50%}

/* Count number Area */
.count-num-area{position: absolute;left: calc(50% - 560px);bottom:97px;max-width:1296px;width:100%;color: #fff;}
.count__elem{position: relative;display: flex; gap:100px; justify-content: space-between;} 
.count__elem .pip-txtWrap{margin-bottom: 0;}
.count__item{display: flex; gap:60px; position: relative; padding-top:50px; font-family:'HyundaiMedium';}
.count__tit{position:absolute; left:0; top:0; font-size:30px; line-height:37px;}
.count__list  > p{text-align:right;}
.count__list strong{font-size:60px;line-height:80px;font-weight: normal;display: inline-block;letter-spacing:2px;}
.count__list .val-max{display:block; margin-bottom:9px; font-size:16px; line-height:20px;}
.count__list .val-unit{margin-left:6px;font-family:'HyundaiRegular'; font-size: 20px;line-height:1px;}
.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;}

/* 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: 14px;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;}

/* Youtube Area */
.youtube-box {position: relative;overflow: hidden;}
.youtube-box .youtube__background {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 5;cursor: pointer;}
.youtube-box .youtube__background img {-o-object-fit: cover;object-fit: cover;width: 100%;height: 100%;aspect-ratio:16/9}
.youtube-box .youtube__background .io-btn-play {width: 60px;height: 60px;}
.youtube-box .youtube__background.io-hide{display: none;}
.io-btn-play {width: 60px;height: 60px;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);cursor: pointer;}
.io-btn-play.io-hide {display: none;}

@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}

    /* Key-Visual Area */
    .keyVisual {height:340px;}
    .keyVisual__title {top:60px;left:18px;font-size:35px;}
    .keyVisual__title > span {font-size:19px;line-height:24px; margin:0;}

    /* Sub Key-Visual Area */
    .sub-keyVisual.bg-img{height:473px}
    .sub-keyVisual__title {width:auto; left:25px; top:39px;}
    .sub-keyVisual__title h2 {font-size:35px; line-height:43px;}
    .sub-keyVisual__title h2 > span {font-size:15px;line-height:18px;margin-bottom:6px}
    .sub-keyVisual__title > p {font-size:16px;line-height:22px;margin-top:20px}

    /* 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:16px;line-height:21px;margin-bottom: 5px;}
    .bottom-banner__button {width:100px;min-width: 100px;margin-right:5em}
    .bottom-banner__button span{line-height: 28px;font-size: 10px;}

    /* text column */
    .txt-col {flex-direction:column;}
    .txt-col__elem + .txt-col__elem{width:100%;}

    .txt-col.txt-col--half {margin-top:36px; gap:36px;}
    .txt-col--half .txt-col__elem{width:100%}
    
    /* h */
    .pip-txtWrap{margin-bottom: 30px;} 
    .pip-title{font-size: 26px;line-height: 31px;margin-bottom: 8px;}
    .pip-subTitle{font-size: 16px;line-height: 21px;margin-bottom: 15px;}
    .pip-desc,
    .txt-info{font-size: 14px;line-height: 19px;}

    /* section */
    .section-media{margin:50px auto}
    .section-media__description{margin:0 0 30px;}
    /* .section-media__description.align-center-mobile {text-align:left} */
    .section-media{padding: 0 15px;}
    .section-media__elem img,
    .section-media__elem video {width:100%;height:auto}
    .section-media__elem .img-desc{margin-top:10px; padding-left:10px; text-align:left; text-indent:-10px;}
    
    .section-media + .sub-keyVisual {margin-top:60px}
    .section-media.section-bg{padding:50px 15px 40px;}

    .section-col .section-media__inner{flex-direction:column}
    .section-col .section-media__elem{width:100%;}
    .section-col .section-media__description{width:100%}

    .section-col.section-media__elem {flex-direction:column;gap:30px;}
    .section-col .section-col__elem {width:100%;text-align: left;padding: 0}
    .section-col.section-col--half .section-media__inner {flex-direction: column;gap:30px}
    .section-col.section-col--half .section-media__description,
    .section-col.section-col--half .section-media__elem {width: 100%;}

    /* button */
    .btnWrap{margin-top:15px;}
    .btnWrap .btn{max-width:150px;font-size:11px;line-height:40px;}
    

    /* img comment */
    .img-comment__txt, 
    .img-comment__txt--wide {font-size: 11px;line-height: 14px;width:100%;text-align:center;right:0;bottom:15px;}
    .img-comment__txt--wide {right: 0;bottom: 25px;} 

    /* 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);}

    /* gallery area */
    .gallery,
    .gallery-col{gap:6px;}
   
    /* Count number */
    .count-num-area{width:auto; left:25px; bottom:47px;}
    .count__tit{font-size:15px; line-height:20px;}
    .count__item{padding-top:30px; gap:30px;}
    .count__list .val-max{font-size:8px; line-height:10px; margin-bottom:4px;}
    .count__list strong{font-size:30px; line-height:40px; letter-spacing:0;}
    .count__list .val-unit{margin-left:0; font-size:10px; line-height:12px;}
    .li-asterisk li{line-height:19px;color:#707070}

    /* Graph Area */
    .graph__box{flex-direction: column;gap: 48px;}
    .graph__elem{width: 80%;margin: 0 auto;}
    .graph__desc{width: 100%;}
    .graph__spec{margin-top:0;gap:0;padding:0 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{width:50%;font-size:12px;line-height:21px;}
    .graph__icon:before{width: 43px;height: 42px;}
    .graph__unit{font-size: 12px;width:50%}
    .graph__unit.i-power .graph__icon:before, .graph__unit.i-torque .graph__icon:before{width: 40px;height: 40px;}

    /* Youtube Area */
    .youtube-box .youtube__background .io-btn-play {width: 30px;height: 30px;}
    .io-btn-play {width: 30px;height: 30px;}
}


/* 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%);}
}