@charset "utf-8";

/* Sub Key-Visual Area */
.sub-keyVisual__title{position:static; margin:0 auto; padding:100px 0 50px; text-align:center;}
.sub-keyVisual__title h2{color:#000; font-size:44px;line-height:54px;}
.sub-keyVisual__title > p{margin-top:20px; font-size:16px; color:#000;}
.sub-keyVisual .sub-keyVisual__media{background:#000;}

/* section */
.section-media.full-media .pip-title{text-align:center;}

/* 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 {position:absolute;left:0;top:150px;width:100%;height:100vh;text-align:center;z-index: 10;font-family: 'HyundaiMedium';}
.parallax-01 .parallax__title.fixed{position:fixed;height:100%;}
.parallax-01 .parallax__title.fixed.sticky{position:sticky; top:0; height:100vh; padding-top:150px;}
.parallax-01 .parallax__title h3{font-size:110px;line-height:129px;}
.parallax-01 .parallax__title p{margin:0 0 4px; font-size:44px;line-height:54px;}

.parallax-02 .parallax__title {position:absolute;left:0;top:100px;width:100%;text-align:center;z-index:10; color:#fff;}
.parallax-02 .parallax__title h3 {font-family: 'HyundaiMedium';font-size:44px;line-height:54px;font-weight:400;}
.parallax__title p {font-size:16px;line-height:28px;margin-top:20px;}
.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;}

/* gallery */
.gallery{margin-top:0;}
.gallery .pip-title{margin-bottom:50px;}
.gallery .btnWrap{margin-top:21px;}
.gallery-swiper .swiper-slide{max-width:1340px; width:70%;}
.gallery-swiper .swiper-pagination{position:static; width:1120px; margin:28px auto 0; text-align:right;}
.gallery-swiper .swiper-pagination span{font-family:'HyundaiKRMedium'; font-size:18px; color:#000; line-height:23px;}
.gallery-swiper .swiper-pagination .swiper-pagination-total{opacity:40%;}
.gallery-swiper .swiper-pagination .swiper-pagination-total::before{content:''; display:inline-block; width:16px; height:1px; margin:9px 8px 0; background:#000; vertical-align:top;}


/* Mobile */
@media screen and (min-width:0) and (max-width:740px){
    /* Sub Key-Visual Area */
    .sub-keyVisual__title{padding:60px 0 35px;}
    .sub-keyVisual__title h2{font-size:27px;line-height:32px;}
    .sub-keyVisual__title > p{margin-top:12px; font-size:14px;}
    .sub-keyVisual__media video{aspect-ratio:1/1;}

    /* section */
    .section-media{margin:60px 0;}

    /* parallax */
    .mobile {overflow: initial;height: initial;}
    .parallax-01 .parallax__title{top:60px;}
    .parallax-01 .parallax__title.fixed{top:127px;}
    .parallax-01 .parallax__title.fixed.sticky{padding-top:127px;}
    .parallax-01 .parallax__title h3{font-size:55px;line-height:65px;}
    .parallax-01 .parallax__title p{margin-bottom:2px; font-size:22px;line-height:27px;}
    .parallax-02 .parallax__title{top:60px;}
    .parallax-02 .parallax__title h3 {font-size:27px;line-height:32px;}
    .parallax-02 .parallax__title p {font-size:14px;line-height:21px;margin-top:12px}
    .parallax-01{z-index: 0;}
    .parallax-02 {z-index: 5;}
    .scroll-point{z-index:5}
    .icon-scroll img {width: 18px;}

    /* gallery */
    .gallery .pip-title{margin-bottom:35px;}
    .gallery-swiper .swiper-slide{max-width:330px; width:90%; margin-right:15px;}
    .gallery-swiper .swiper-slide:last-child{margin:0;}
    .gallery-swiper .swiper-slide img{height:auto; aspect-ratio:1/1.342}
    .gallery-swiper .swiper-pagination{width:100%; margin-top:24px; padding:0 15px;}
    .gallery-swiper .swiper-pagination span{font-size:12px; line-height:14px;}
    .gallery-swiper .swiper-pagination .swiper-pagination-total::before{width:8px; margin:7px 4px 0;}
    .gallery .btnWrap {padding-bottom:0;}
    .gallery .btnWrap .btn{max-width:180px;height:45px;}
}

/* tablet */
@media screen and (min-width:741px) and (max-width:1366px){

}