@charset "utf-8";

.keyVisual.highlights {background-image:url('/content/dam/hyundai/ww/en/images/find-a-car/pip/suv/kona-sx2/highlights/sx2-kona-highlights-kv-pc.jpg');z-index:10}
.keyVisual__title {top:118px}
.section-col > h3{width:1120px;margin:0 auto 90px;text-align:center}

/* parallax */
.parallax {width: 100%;max-width: 1920px;margin: auto;font-family: 'HyundaiSansTextRegular';    width: 99vw;
    margin-left: calc(-50vw + 50.8%);}
.parallax__wrap {position:relative}
.parallax__wrap canvas {width: 100%;height: 100vh;position: sticky;top: 0;object-fit: cover;}

.parallax-01 .parallax__title {opacity:0;position:sticky;left:0;top:0;width:100%;height:100vh;padding-top:200px;text-align:center;z-index: 10;}
.parallax-01 .parallax__title.on {opacity:1;position:fixed;top:200px;height:100%;padding-top:0}
.parallax-01 .parallax__title h3 span {display:inline-block;margin-left:12px;font-family: 'HyundaiSansHeadMedium';font-size:68px;line-height:96px;opacity: 0;}
.parallax-01 .parallax__title h3 span:last-child {margin-left:0;font-size:100px;line-height:110px;font-weight:400;}

.parallax-02 .parallax__title {position:absolute;left:0;top:90px;width:100%;text-align:center;z-index:10;}
.parallax-02 .parallax__title h3 {font-family: 'HyundaiSansHeadMedium';font-size:58px;line-height:64px;font-weight:400;}
.parallax__title p {font-size:28px;line-height:38px;margin-top:26px;}
.parallax__title.io-hide {opacity: 0;visibility: hidden;display: none;}
.parallax__title.io-hide.wait {opacity: 1;visibility:visible;display: block;}
.icon-scroll {position: fixed;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);bottom: 40px;z-index: 0;display: none;}
.icon-scroll img {width: 24px;aspect-ratio:12/25}
.icon-scroll.active {display: block;}

.btnWrap .btn{
      display: inline-block;
    min-width: 140px;
    padding: 0 30px;
    font-size: 18px;
    line-height: 36px;
    text-align: center;
    text-decoration: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #002c5f;
    color: #fff;
    cursor: pointer;
    border: none;
    font-family: 'HyundaiSansTextRegular';  
}

#content-contain {
    overflow: initial;
    box-sizing: border-box;
}

/* rotate gallery */
:root {
    --item-width: 507px;
    --item-height: 230px;
    --item-translateX-offset: 0;
    --item-translateY-offset: 0;
    --item-scale-offset : 1;
    --item-rotation-offset: 0;
    --item-transition-duration:1.2s;
    --item-transition-easing: ease;
}
.rotate-gallery {position: relative;width: 100%;height:768px;background-size:cover;background-image:url('/sites/all/themes/responsive/images/kona-electric-2024/highlights/sx2-kona-rectangle-bg-pc.png');text-align:center;    width: 99vw;
    margin-left: calc(-50vw + 50.8%);}
.rotate-gallery__tab {display:inline-flex;width:auto;height:38px;background-color: #000;margin:41px auto 0;padding:0 5px;transform-style: preserve-3d;}
.rotate-gallery__tab li {font-family:'HyundaiSansHeadMedium';font-size:16px;line-height:38px;color:#fff;white-space: nowrap;cursor:pointer;padding:0 25px;    list-style: none;}
.rotate-gallery__tab li.on {color:#04A1CD}
.rotate-gallery__list {position: relative;width: 100%;height:500px;margin-top:70px;}
.rotate-gallery__item {
    position: absolute;
    left: calc(50% - var(--item-width) / 6);
    top: 0;
    transform: translate(var(--item-translateX-offset), var(--item-translateY-offset)) rotateY(var(--item-rotation-offset)) scale(var(--item-scale-offset));
    display: inline-block;
    width: var(--item-width);
    height: var(--item-height);
    transition: transform var(--item-transition-duration) var(--item-transition-easing);
    user-select: none;
    z-index:10;
}
.rotate-gallery__item.current-item {
    --item-translateX-offset: -260px;
    --item-translateY-offset: 86%;
    --item-scale-offset: 1.62;
    --item-transition-easing: ease;
    --item-transition-duration: 1s;
    z-index:50;
}
.rotate-gallery__item.prev-item {
    --item-translateX-offset: calc(var(--item-width) * -1.48);
    --item-translateY-offset: 35%;
}
.rotate-gallery__item.next-item {
    --item-translateX-offset: calc(var(--item-width) * 0.82);
    --item-translateY-offset: 67%;
}

.right .rotate-gallery__item.prev-item {z-index: 30;}
.right .rotate-gallery__item.next-item {z-index: 20;}
.left .rotate-gallery__item.prev-item {z-index: 20;}
.left .rotate-gallery__item.next-item {z-index: 30;}

.rotate-gallery__item img {width: 100%;height: auto;}
.rotate-gallery__pagination {position:absolute;left:calc(50% - 30px);bottom:90px;display:flex;gap:12px}
.rotate-gallery__pagination span{width:12px;height:12px;border-radius:50%;background-color:#fff;font-size:0;cursor:pointer;}
.rotate-gallery__pagination span.on{background-color:#02B0D3}

@keyframes rotate-axis {
    from {
        transform: rotateZ(350deg) perspective(1000px) rotateY(0deg);
    }
    to {
        transform: rotateZ(350deg) perspective(10000px) rotateY(360deg);
    }
}


/* gallery */
.galleryThumb-swiper .swiper-slide{filter:brightness(0.3);cursor:pointer}
.galleryThumb-swiper .swiper-slide.swiper-slide-thumb-active {filter:brightness(1)}
.gallery-swiper button,
.galleryThumb-swiper button{font-family:'HyundaiSansHeadMedium';font-size:20px;line-height:75px;text-align:center;color:#B2B2B2;text-decoration:none;}
.gallery-swiper .on button,
.galleryThumb-swiper .on button{color:#00AAD2}
.gallery-swiper .swiper-button-next,
.galleryThumb-swiper .swiper-button-next{right:0}
.gallery-swiper .swiper-button-prev,
.galleryThumb-swiper .swiper-button-prev{left:0}
.gallery-swiper .swiper-button-next,
.gallery-swiper .swiper-button-prev,
.galleryThumb-swiper .swiper-button-next,
.galleryThumb-swiper .swiper-button-prev {width:44px;height:44px;background-color:rgba(0,0,0,0.3);top:calc(50% + 6px)}
.gallery-swiper .swiper-button-next::after,
.gallery-swiper .swiper-button-prev::after,
.galleryThumb-swiper .swiper-button-next::after,
.galleryThumb-swiper .swiper-button-prev::after {font-size:14px}
.gallery-tab-cont {display:none}
.gallery-tab-cont.on {display:block}

/* country List */
.more-country {border:2px solid #E4DCD3;padding:21px 0;margin-top:66px;}
.more-country__title{text-align:center;font-size:20px}
.more-country__title button{position:relative;padding-right:30px;text-decoration: none;}
.more-country__title button::after{content:'';position:absolute;right:3px;top:4px;width:7px;height:7px;border: solid #000;border-width: 0 2px 2px 0;display:inline-block;transform: rotate(45deg);-webkit-transform: rotate(45deg)}
.more-country__title button.on::after{top:8px;transform: rotate(-135deg);-webkit-transform: rotate(-135deg)}
.more-country__List {display:none;width:900px;margin:5px auto 25px}
.more-country__List.on{display:flex;flex-wrap: wrap;}
.more-country__List li{width:300px;font-size:14px;line-height:19px}
.more-country__List li a{text-align:left;text-decoration: none;}
.more-country__List li{margin-top:35px}

@media print, screen and (min-width: 741px) and (max-width: 20000px) {
    /* youtube */
    #youtube__iframe {width:100%;height:630px;}
}

@media print, screen and (min-width: 741px) and (max-width: 1120px) {
    /* rotate gallery */
    :root {
        --item-scale-offset : 0.8;
    }
}


/* Mobile */
@media screen and (min-width:0) and (max-width:740px){
    /* KV Area */
    .keyVisual.highlights {background-image:url('/content/dam/hyundai/ww/en/images/find-a-car/pip/suv/kona-sx2/highlights/sx2-kona-highlights-kv-m.jpg');z-index:10}
    .keyVisual__title {font-size:35px;height:17px;top:49px}

    .section-media {position:relative;box-sizing: border-box;}
    .section-media.section-bg{padding:90px 15px 50px;width: 99vw;
    margin-left: calc(-50vw + 50.8%);}
    .section-col > h3 {width:100%;margin:0 auto 40px}
    .section-col .section-media__description,
    .section-col .section-media__elem{width:100%}

    .section-media.full-media {padding:0}

    /* rotate gallery */
    :root {
        --item-width: 194px;
        --item-height: 88px;
        --item-translateX-offset: 0;
        --item-translateY-offset: 0;
        --item-scale-offset : 1;
        --item-transition-duration: 0.8s;
        --item-transition-easing: ease-in;
    }
    .rotate-gallery {height:414px;background-image:url('/sites/all/themes/responsive/images/kona-electric-2024/highlights/sx2-kona-rectangle-bg-m.png');overflow:hidden;}
    .rotate-gallery__tab {width:auto;margin:30px auto 0;padding:0 10px}
    .rotate-gallery__tab li {font-size:17px;line-height:38px;padding:0 15px;}
    .rotate-gallery__list {height:220px;margin-top:40px}
    .rotate-gallery__item {
        left: calc(50% - var(--item-width) / 2 + 30px);
        top:0;
        transition: transform var(--item-transition-duration) var(--item-transition-easing);
    }
    .rotate-gallery__item.current-item {
        --item-translateX-offset:-40px;
        --item-translateY-offset: 155%;
        --item-scale-offset: 1.65;
    }
    .rotate-gallery__item.prev-item{
        --item-translateX-offset:calc(var(--item-width) * -1.06);
        --item-translateY-offset: 68%;
    }
    .rotate-gallery__item.next-item{
        --item-translateX-offset:calc(var(--item-width) * 0.74);
        --item-translateY-offset: 79%;
    }
    .rotate-gallery__pagination{left:calc(50% - 17px);bottom:15px;gap:7px}
    .rotate-gallery__pagination span{width:7px;height:7px;}

    .mobile {overflow: initial;height: initial;}
    .parallax-01 .parallax__title h3 span {font-size:30px;line-height:37px;margin-left:5px}
    .parallax-01 .parallax__title h3 span:last-child {font-size:30px;line-height:37px}
    .parallax-02 .parallax__title h3 {font-size:30px;line-height:37px;}
    .parallax__title p {font-size:14px;line-height:19px;margin-top:15px}
    .parallax-01{z-index: 0;}
    .parallax-02 {z-index: 5;}
    .scroll-point{z-index:5}
    .icon-scroll img {width: 18px;}

    .section-media.full-media .section-media__description {width:100%}

    .section-media.gallery {margin-top:100px;padding: 0;}
    .gallery .pip-title {margin-bottom:10px}
    .gallery-swiper .swiper-slide img {width:100%;height:192px}
    .galleryThumb-swiper .swiper-slide img {width:100%;height:64px}
    .gallery-swiper .swiper-button-next, .gallery-swiper .swiper-button-prev {width:26px;height:26px;background-color:rgba(0, 0, 0, 0.57);top:calc(50% + -11px);}
    .galleryThumb-swiper .swiper-button-next, .galleryThumb-swiper .swiper-button-prev {display:none}
    .gallery-swiper .swiper-button-next::after, .gallery-swiper .swiper-button-prev::after, 
    .galleryThumb-swiper .swiper-button-next::after, .galleryThumb-swiper .swiper-button-prev::after {font-size:9px}

    .btnWrap {padding-bottom:0;margin-top:20px}
    .btnWrap .btn{max-width:200px;height:42px;}
    .btnWrap + .li-asterisk{margin-top:75px}
    .li-asterisk li {color:#707070;line-height:19px}
    .li-asterisk li + li {margin-top:8px}

    /* youtube */
    #youtube__iframe {width:100%;height:202px;}

    /* country List */
    .more-country {border:1px solid #E4DCD3;padding:7px 0;margin:40px 0 -20px;}
    .more-country__title{font-size:12px;line-height:28px}
    .more-country__title button{padding-right:15px;}
    .more-country__title button::after{right:3px;top:9px;width:5px;height:5px;border-width: 0 1px 1px 0;}
    .more-country__title button.on::after{top:12px;}
    .more-country__List {width:100%;margin:5px auto 15px;}
    .more-country__List li{width:50%;font-size:12px;line-height:16px;text-align:center}
    .more-country__List li a{text-align:center;}
    .more-country__List li{margin-top:34px}

    #moreThanContent.bgDB.navig{
          width: 95vw;
    }

    .galleryThumb-swiper .swiper-wrapper .swiper-slide {
    width: 33.33%;
}
}