/* 
 * santa-fe-2023 > common.css 
 * version : 202309
*/

@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:135px;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;}
.sub-keyVisual__title {position:absolute;left:calc(50% - var(--cont-max-width)/2);top:150px;max-width: var(--cont-max-width);width:100%;z-index:5}
.sub-keyVisual__title h2 {font-family:"HyundaiMedium";font-size:58px;line-height:68px;color:#fff;}
.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;}

/* 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;font-family: "HyundaiSansHeadMedium";}
.txt-col__elem .pip-subTitle{margin-bottom:18px;    font-family: "HyundaiSansHeadMedium";}
.txt-desc{font-size:16px;line-height:28px;}
.txt-info{font-family:'HyundaiSansTextRegular';font-size:24px;line-height:28px;font-weight:400;}

.pip-desc{font-family:'HyundaiSansTextRegular';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;    font-family: "HyundaiSansHeadMedium";}
.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.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;left:30px;bottom:30px;font-family:'HyundaiSansTextRegular';font-size:16px;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:100px}

/* gallery area */
.gallery{display:flex;flex-direction:column;gap:32px;width: 100%;}
.gallery img{width: 100%;}
.gallery-col {display:flex;gap:32px;justify-content:space-between;}

/* Count number Area */
.count-num-area{position: absolute;left: calc(50% - 560px);bottom:100px;max-width:1120px;width:100%;color: #fff;}
.count__elem{position: relative;display: flex; gap:55px; justify-content: space-between;} 
.count__elem .pip-txtWrap{margin-bottom: 0;}
.count__item{display: flex; gap:30px; 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;}
.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:50px;left:18px;font-size:35px;}
    .keyVisual__title > span {font-size:19px;line-height:39px; 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}

    /* 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;}
    .txt-col__elem .pip-subTitle{margin:10px 0 20px;}
    
    /* 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;    width: 95%;}
    .section-media__elem img,
    .section-media__elem video {width:100%;height:auto}
    
    .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:185px;font-size:15px;line-height:39px;}
    .btnWrap + .li-asterisk{margin-top:37px;}
    .li-asterisk li + li{margin-top:10px;} 

    /* 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:45px;}
    .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%);}
}