/* 
 * santa-fe-2023 > highlights.css
 * version : 20260714
*/

@charset "utf-8";

/* Key-Visual Area */
.keyVisual__title{top:127px;font-size:58px;line-height:64px;color:#000;}

/* Sub Key-Visual Area */
.sub-keyVisual__title{top:150px;}
.sub-keyVisual__title h2 span{margin-bottom:15px;}

/* title */
.section-media__title{margin:150px 0; text-align:center;}
.section-media__title .pip-title{margin-bottom:26px;}
.section-media__title .pip-desc{font-size:24px; line-height:28px;}
.section-media__title .pip-desc span{display:block; margin:15px 0; font-weight:bold; /*font-family:'HyundaiTextMedium';*/}

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

/* parallax */
.parallax {width: 100%;max-width: 1920px;margin: auto;font-family: 'HyundaiRegular';}
.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:10vh;width:100%;text-align:center;z-index:10;}
.parallax-02 .parallax__title h3 {font-family: 'HyundaiMedium';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;}

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

/* gallery */
.gallery .section-media__description{margin-bottom:60px;}
.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:'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}
.gallery-tab-cont.on {display:block}

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

@media print, screen and (min-width: 1023px) and (max-width: 20000px) {
    /* Sub Key-Visual Area */
    .keyVisual__title > span{display:inline-block; font-size:58px; line-height:64px;}

    /* youtube */
    .youtube-box + .youtube-box{margin-top:155px;}
    .section-media__elem + .section-media__elem .youtube-box{margin-top:155px;}
}

/* Mobile */
@media screen and (min-width:0) and (max-width:1023px){
    /* Key-Visual Area */
    .keyVisual__title{font-size:35px;line-height:35px;top:50px;color:#fff;}

    /* Sub Key-Visual Area */
    .sub-keyVisual__title{top:51px;}
    .sub-keyVisual__title h2{font-size:26px; line-height:32px;}

    /* title */
    .section-media__title{margin:75px 0;}
    .section-media__title .pip-title{margin-bottom:5px;}
    .section-media__title .pip-desc{font-size:14px; line-height:19px;}
    .section-media__title .pip-desc span{margin:5px 0;}

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

    /* parallax */
    .mobile {overflow: initial;height: initial;}
    .parallax-01{z-index: 0;}
    .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 {z-index: 5;}
    .parallax-02 .parallax__title{top:50px;}
    .parallax-02 .parallax__title h3 {font-size:26px;line-height:32px;}
    .parallax__title p {font-size:14px;line-height:19px;margin-top:15px}
    .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;}

    .section-media.gallery {margin-top:75px}
    .gallery .section-media__description{margin-bottom:25px;}
    .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: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}
}