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

@charset "utf-8";

/* Key-Visual Area */
.keyVisual {background-image:url('/content/dam/hyundai/ww/en/images/find-a-car/pip/cars/sonata-dn8-2023/highlights/dn8-sonata-2023-highlights-kv-pc.jpg');}
.keyVisual__title{top:127px;font-size:58px;line-height:64px;color:#000;}

/* Sub Key-Visual Area */
.sub-keyVisual__title{top:100px;}
.sub-keyVisual__title h2{line-height:64px;}

/* section */
.section-col > h3{width:1120px;margin:0 auto 90px;text-align:center}

/* parallax */
.parallax {width: 99vw;margin-left: calc(-50vw + 50.8%);;max-width: 1920px;font-family: HyundaiSansTextRegular;}
.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: 'HyundaiMedium';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:140px;width:100%;text-align:center;z-index:10; color: #fff;}
.parallax-02 .parallax__title h3 {font-family: 'HyundaiSansHeadMedium';font-size:55px;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;}

/* cinema-swiper */
.cinema-swiper{width: 100%;}
.cinema-swiper video{vertical-align: middle;}
.cinema-swiper .swiper-pagination {bottom: 60px !important;}

/* gallery */
.galleryThumb-swiper .swiper-slide{filter:brightness(0.5);cursor:pointer}
.galleryThumb-swiper .swiper-slide.swiper-slide-thumb-active {filter:brightness(1)}
.gallery-swiper button,
.galleryThumb-swiper button{font-family:'HyundaiMedium';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}

/* youtube */
.youtube-box iframe{width:100%; height:auto; aspect-ratio:16/9;}

@media print, screen and (min-width: 741px) and (max-width: 20000px) {
    /* button */
    .btnWrap{margin-top:30px;}
    .btnWrap .btn{max-width:260px;height:56px;font-size:16px;line-height:36px;}

    /* youtube */
    .youtube-box{width:100%;height:630px;}
    .youtube-box + .youtube-box{margin-top:155px;}
    .section-media__elem + .section-media__elem .youtube-box{margin-top:155px;}
}

.btnWrap .btn{
      background-color: #002c5f;
    color: #fff;
    cursor: pointer;
    font-family: HyundaiSansHeadRegular;
    margin-bottom: 100px;  
}

/* Mobile */
@media screen and (min-width:0) and (max-width:740px){
    /* Key-Visual Area */
    .keyVisual{background-image:url('/content/dam/hyundai/ww/en/images/find-a-car/pip/cars/sonata-dn8-2023/highlights/dn8-sonata-2023-highlights-kv-m.jpg');}
    .keyVisual__title{font-size:30px;line-height:39px;top:53px}

    /* Sub Key-Visual Area */
    .sub-keyVisual__title{top:35px;}
    .sub-keyVisual__title h2{font-size: 26px;line-height: 32px;text-align: center;width: 80%;margin: auto;}

    /* section */
    .section-media {position:relative;box-sizing: border-box;}
    .section-media.section-bg{padding:90px 15px 50px}
    .section-col > h3 {width:100%;margin:0 auto 40px}
    .section-col .section-media__description,
    .section-col .section-media__elem{width:100%}

    /* button */
    .btnWrap .btn{max-width:200px;height:42px;font-size:16px;line-height:45px;display: none;}
    .btnWrap + .li-asterisk{margin-top:75px;}
    .li-asterisk li + li {margin-top:8px}

    /* parallax */
    //.mobile {overflow: initial;height: initial;}
    body{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:26px;line-height:32px;}
    .parallax__title p {font-size:15px;line-height:19px;margin-top:15px}
    .parallax-01{z-index: 0;}
    .parallax-02 {z-index: 5;}
    .parallax-02 .parallax__title{top: 0; padding: 34px 16px 0; width: 92%;}
    .scroll-point{z-index:5}
    .icon-scroll img {width: 18px;}


    /* cinema-swiper */
    .cinema-swiper .swiper-pagination {bottom: 20px !important;}
    .cinema-swiper .swiper-slide img {aspect-ratio: 1 / 1; height: auto;}

    /* youtube */
    .youtube-box{width:100%; height:auto; aspect-ratio:16/9;}
    .youtube-box + .youtube-box{margin-top:78px;}

    /* gallery */
    .section-media.gallery {margin-top:75px}
    .gallery .pip-title {margin-bottom:10px}
    .gallery-swiper .swiper-slide img {width:100%;height:auto}
    .galleryThumb-swiper .swiper-slide img {width:100%;height:auto}
    .gallery-swiper .swiper-button-next, .gallery-swiper .swiper-button-prev {width:35px;height:35px;background: none;top:calc(50% + -11px);}
    .galleryThumb-swiper .swiper-button-next, .galleryThumb-swiper .swiper-button-prev {width:35px;height:35px;top: calc(50% + -16px);}
    .galleryThumb-swiper .swiper-button-next{right: 0;}
    .galleryThumb-swiper .swiper-button-prev{left: 0;}
    .gallery-swiper .swiper-button-next::after, .gallery-swiper .swiper-button-prev::after{font-size: 27px;}
    .galleryThumb-swiper .swiper-button-next::after, .galleryThumb-swiper .swiper-button-prev::after {font-size:9px}
    .gallery-swiper + .galleryThumb-swiper{margin-top: 10px;}
    #content-contain {overflow: initial;box-sizing: border-box;}
    #moreThanContent.bgDB.navig{width: 95vw;margin-left: calc(-50vw + 50%);margin-top: 50px;margin-bottom: 70px;}
}