@charset "utf-8";

.back-media{width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover; z-index: -1;}
.bg-gray{background: #F5F5F5;}
.red-text{color: var(--primary); font-size: 24px; font-weight: 600;}
.more{font-size: 16px; font-weight: 500; min-width: 179px; width: 179px; height: 53px; border-radius: 27px; display: flex; align-items: center; justify-content: center; color: #9C9C9C; font-family: var(--ff-third); transition: all .6s; border: 1px solid #9C9C9C;}
.section .container--wide{height: 100%;}
.red{color: var(--primary);}
.yellow-color{color: #FFC400;}

/* section1 */
#section1 {padding-block: 0 !important; position: relative;}
#section1 .main-visual {width: 100%; height: 100vh; position: relative;}
#section1 .main-visual .swiper-wrapper {height: 100%;}
#section1 .main-visual .visual-slide {width: 100%; height: 100%; position: relative; overflow: hidden;}
#section1 .main-visual .visual-slide video {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: opacity 1.4s ease, transform 6s ease;}
#section1 .main-visual .visual-slide.swiper-slide-active video {transform: translate(-50%, -50%) scale(1);}
#section1 .main-visual .visual-slide .bg::before {content: ''; display: block; width: 100%; height: 100%; background-color: rgba(25,31,56,0.5); mix-blend-mode: multiply; position: absolute; top: 0; left: 0; z-index: 1;}
#section1 .main-visual .visual-slide .bg img {transform: scale(1); transition: transform 7s ease;}
#section1 .main-visual .visual-slide.swiper-slide-active .bg img {transform: scale(1.05);}
#section1 .main-visual .container--wide{opacity: 0; transform: translate3d(100px, 0, 0); transition: opacity .5s ease, transform .5s ease;}
#section1 .main-visual .visual-slide.is-text-active .container--wide{opacity: 1; transform: translate3d(0, 0, 0);}

.main-visual-pagination {display: flex; gap: 7px; list-style: none; margin: 0 0 65px 0; padding: 0;}
.main-visual-pagination li {width: 13px; height: 13px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transition: background 0.3s; cursor: pointer;}
.main-visual-pagination li.active {background: var(--primary); width: 70px; border-radius: 7px;}

#section1{color: #fff;}
#section1 .container--wide{display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 148px;}
#section1 h1{font-size: 52px; font-weight: 600; line-height: 1.4; margin-bottom: 28px;}
#section1 span{line-height: 1.6;}
    /* video progress bar */
.video-progress-container{position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: rgba(255, 255, 255, 0.3); z-index: 1;}
.video-progress-bar{height: 100%; width: 0%; background: var(--primary); will-change: width;}

/* section2,3 */
.half-cont .flex{height: 100%; overflow: hidden;}
.half-cont .flex:has(.reverse){gap: 40px;}
.half-cont .flex>img{object-fit: cover; display: block; width: 50%; height: 100vh;}
.half-cont .cont{display: flex; flex-direction: column; justify-content: center; padding-left: 6.6vw; max-width: 700px; flex: 1; position: relative; padding-top: 100px;}
.half-cont .cont.reverse{margin-left: auto; padding-left: initial;}
.half-cont h2{font-size: 67px; font-weight: 600; line-height: 1.16; margin-block: 13px 25px;}
.half-cont p{font-size: 17px; line-height: 1.65;}
.half-cont .cont .bottom{display: flex; margin-top: 62px; align-items: flex-end; gap: 45px;}
.half-cont .cont .bottom .more{margin-bottom: 56px;}
#section2.half-cont .cont img{min-width: 899px; margin: 0;}
#section3.half-cont .cont .bottom{margin-top: 14px; padding-bottom: 50px;}
#section3.half-cont .cont .bottom a{margin-bottom: 0;}
#section3.half-cont .cont img{margin-left: -70px;}

@media screen and (max-width: 1600px) {
    .half-cont .flex:has(.reverse){gap: 0px;}
    .half-cont .cont .bottom{flex-direction: column-reverse; align-items: flex-start; gap: 40px;}
    .half-cont .cont .bottom .more{margin-bottom: 0;}
    #section3.half-cont .cont img{margin-left: 0px;}
}
@media screen and (max-width: 1600px) and (max-height: 1050px) {
    #section2.half-cont .cont img{min-width: 499px;}
    #section3.half-cont .cont img{max-width: 410px; min-width: 400px; margin-left: 0;}
    .half-cont .cont .bottom{margin-top: 40px;}
}
@media (hover: hover) {
    .more:hover{background: var(--primary); color: #fff; border-color: var(--primary);}
}

/* section4,5,6 */
.text-box{display: flex; flex-direction: column; height: 100vh; color: #fff; width: 100%;  text-align: left; padding-top: calc(14vh + 100px);}
#section4 .text-box{padding-top: 0; justify-content: center;}
.text-box h1{font-size: 243px; font-weight: 600; color: rgba(255,255,255,.5); line-height: 1.16; margin-block: 11.85vh 2.7vh;}
.text-box h2{font-size: 50px; line-height: 1.33; margin-block: 19px 35px;}
.text-box h2 span{font-weight: 700;}
.text-box p{font-size: 18px;}
.more.ver2{background: rgba(0,0,0,.1); backdrop-filter: blur(3px); border: none; color: #fff;}
.more.ver2:hover{background: var(--primary); border-color: var(--primary);}
#section4 .more.ver2{margin-top: 94px; border: 1px solid #8F8F8F;}
.text-box li:has(.flex){margin-top: auto;}
.text-box .flex{justify-content: space-between; gap: 25px; margin-bottom: 126px;}
.text-box .flex a{display: flex; align-items: center; justify-content: space-between; max-width: 450px; width: 100%; border-top: 4px solid #fff; padding-block: 15px 0; position: relative; font-size: 25px; font-weight: 600;}
.text-box .flex a::after{content: ''; width: 1px; height: 57.5px; background: rgba(255,255,255,.4); position: absolute; right: -12px; top: -8px;}
.text-box .flex a:last-child:after{display: none;}
.text-box .flex a div{width: 24px; height: 25px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.3); backdrop-filter: 30px; border-radius: 50%;}
.text-box .flex a>*{opacity: .6;}
.text-box .flex a div{opacity: .8;}

@media (hover: hover) {
    .text-box .flex a:hover>*{opacity: 1;}
}

.back-media.ani {
  transform: scale(1.1);
  transition: transform 6s;
}

/* 특정 섹션에 있을 때만 scale(1)로 변경 */
body.fp-viewing-3 .back-media.ani,
body.fp-viewing-4 .back-media.ani,
body.fp-viewing-5 .back-media.ani {
  transform: scale(1);
}


/* section5 */
#section5{background: #f8f8f8; position: relative;}
#section5 .container--wide{display: flex; align-items: center; justify-content: center; padding-top: 430px;}
#section5 .relative{position: relative; height: fit-content;}
#section5 .container--wide>div>div.flex{font-size: 20px; font-weight: 700; align-items: center; color: var(--primary); justify-content: center; line-height: 1;}
#section5 b{font-size: 60px; font-weight: 700; display: block; text-align: center; line-height: 1.2; margin: 0 0 43px; font-family: var(--ff-third); color: #CFCFCF;}
#section5 p{font-size: 44px; font-weight: 700; text-align: center; line-height: 1.2; font-family: var(--ff-third);}
#section5 div>span{font-size: 18px; line-height: 1.6; text-align: center; color: #8C8C8C; margin: 22px 0 58px; display: block;}
#section5 .more{margin: 0 auto;}

#section5 .card.mo{display: none;}
#section5 .card img{position: absolute;}
#section5 .card img:nth-child(1){left: calc(50% - 653px); transform: translateX(-50%); bottom: 0px;}
#section5 .card img:nth-child(2){left: calc(50% - 540px); transform: translateX(-50%); bottom: 186px;}
#section5 .card img:nth-child(3){left: calc(50% - 367px); transform: translateX(-50%); bottom: 339px;}
#section5 .card img:nth-child(4){left: calc(50% - 124px); transform: translateX(-50%); bottom: 438px;}
#section5 .card img:nth-child(5){right: calc(50% - 124px); transform: translateX(+50%); bottom: 438px;}
#section5 .card img:nth-child(6){right: calc(50% - 367px); transform: translateX(+50%); bottom: 339px;}
#section5 .card img:nth-child(7){right: calc(50% - 540px); transform: translateX(+50%); bottom: 186px;}
#section5 .card img:nth-child(8){right: calc(50% - 653px); transform: translateX(+50%); bottom: 0px;}


/* media */
.media{padding: 248px 0 215px; position: relative; overflow: hidden;}
.media>img{width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover;}
.media .container--wide{position: relative; z-index: 1;}
.media h2{font-weight: 600; line-height: 1.14; margin: 0 0 58.5px; color: #fff; display: block; font-size: 94px; position: relative; width: fit-content;}
.media h2::after{content: ''; width: 28px; height: 28px; background: var(--primary); border-radius: 50%; position: absolute; right: -30px; bottom: 20px;}
.media .flex{color: #fff; font-size: 25px; font-weight: 600; gap: 77px; line-height: 1.68; border-top: 1px solid #D5D5D5; padding-top: 53.5px;}
.media .red{font-size: 20px; font-weight: 600; line-height: 1.5;}

/* media-menu */
.media-menu-cover{background: #F5F5F5; height: 269px;}
.media-menu{margin-top: -143px;}
.media-menu ul{display: grid; grid-template-columns: repeat(5,1fr); gap: 13px;}
.media-menu ul li{padding: 21px 17px 31px 22px; position: relative; box-shadow: 10px 10px 19px rgba(107,123,155,.24); border-radius: 25px; background: #fff; height: 227px; display: flex; flex-direction: column; transition: all .4s;}
.media-menu ul .flex{justify-content: flex-end; margin: 0 0 auto;}
.media-menu ul .flex .img-box{display: flex; align-items: center; justify-content: center; width: 67px; height: 67px ; background-color: #F5F5F5; border-radius: 48px;}
.media-menu ul b{font-size: 24px; line-height: 1.3;}
.media-menu ul p{font-size: 20px; line-height: 1.3; margin: 0 0 7px; color: var(--primary); font-weight: 600;}
.media-menu ul span{display: block; color: #fff; font-weight: 300; display: none; margin: auto 0 0; line-height: 1.5; font-size: 17px;}

@media screen and (min-width: 767px) {
    @media (hover: hover) {
        .media-menu ul li:hover{height: 269px;}
        .media-menu ul li:nth-child(3):hover{height: 315px; margin-top: -45px;}
        .media-menu ul li:hover .flex{margin: 0 0 -61px;}
        .media-menu ul li:hover{background: var(--primary); color: #fff; margin-top: -25px;}
        .media-menu ul li:hover .flex .img-box{background: #FC4500;}
        .media-menu ul li:hover p{color: #fff;}
        .media-menu ul li:hover span{display: block;}
        .media-menu ul li:nth-child(1):hover .flex .img-box img{content: url(../images/main/sub-visual-1.png);}
        .media-menu ul li:nth-child(2):hover .flex .img-box img{content: url(../images/main/sub-visual-2.png);}
        .media-menu ul li:nth-child(3):hover .flex .img-box img{content: url(../images/main/sub-visual-3.png);}
        .media-menu ul li:nth-child(4):hover .flex .img-box img{content: url(../images/main/sub-visual-4.png);}
        .media-menu ul li:nth-child(5):hover .flex .img-box img{content: url(../images/main/sub-visual-5.png);}
    }
}

/* news */
.news{padding: 100px 0 231px;}
.news .container--wide>.flex{justify-content: space-between;}
.news .left{display: flex; flex-direction: column;}
.news .title{font-size: 56px; font-weight: 700; color: #848484;}
.news .left p{font-size: 21px; margin: 30px 0 417px;}
.news .more{margin-left: 0;}

.news .right ul{padding-top: 13px;}
.news .right li{display: flex; flex-direction: column; gap: 40px; padding: 21.5px 0 18.5px; border-bottom: 1px solid #D1D1D1; padding-inline: 20.5px;}
.news .right li a{display: flex; align-items: center; position: relative; width: 916px;}
.news .right li::before{content: ''; width: 100%; height: 1px; background: #D1D1D1; position: absolute; left: 0; top: 0px;}
.news .right li:first-child::before{height: 2px;}
.news .right li>div{margin: 0 auto 0 33.5px;}
.news .right li .flex{font-size: 18px; gap: 16px; line-height: 1; align-items: center;}
.news .right li .flex p{color: #fff; border-radius: 23px; padding: 3.5px 13.5px; background: #464646; font-weight: bold; position: relative;}
.news .right li .flex.not p{background: var(--primary);}
.news .right li .flex span{color: #B1B1B1;}
.news .right li a>span{max-width: 406px; display: block;}
.news .right li a>div:has(span){margin-inline: 39.5px auto; min-width: 0;}
.news .right li a>div:has(span) .lineclamp--2{word-break: keep-all;}
.news .right li b{font-size: 23px; line-height: 1.478; margin: 20px 0 14px; display: block;}
.news .right a div:last-child{width: 54px; height: 54px; border-radius: 50%; background: #B8BDC6; display: flex; align-items: center; justify-content: center; min-width: 54px; margin-left: 20px;}
.news .right a img{transition: all .6s; max-width: 305px;}


@media (hover: hover) {
    .news .right a:hover img{border-radius: 82px;}
    .news .right a:hover div:last-child{background: var(--primary);}
}

/* footer section */
#section-footer.fp-auto-height{
    height: auto !important;
}
#section-footer .footer{
    position: relative;
}

/* Base */
@media (hover: hover) {}
@media screen and (max-width: 1399px) {
    html, body{overflow-x: hidden;}
    #fp-container .section {overflow: hidden;}
    
    #section1 h1{font-size: 32px;}
    .red-text{font-size: 20px;}
    .half-cont h2{font-size: 47px;}
    .half-cont .cont.reverse{padding-left: 15px;}
    .half-cont p{font-size: 16px;}
    .text-box h1{font-size: 110px; margin-block: 11.85vh 5vh;}
    .text-box h2{font-size: 40px;}
    .text-box .flex a{font-size: 20px;}

    #section3.half-cont .cont .bottom{padding-bottom: 0;}

    /* section5 */
    #section5{height: initial;}
    #section5 .container--wide{padding-top: 0;}
    #section5 b{line-height: 1.35;}
    #section5 .card.pc{display: none;}
    #section5 .card.mo{display: block; margin-block: 0px -100px;}
    #section5 .card img:nth-child(1){position: initial; transform: initial;}

    .media{padding: 148px 0 180px;}
    .media h2{font-size: 80px;}
    .media h2::after{right: -20px;}
    .media .flex{font-size: 18px; gap: 20px;}
    .media-menu-cover{height: initial;}
    .media-menu ul{grid-template-columns: repeat(3, 1fr);}
    .media-menu ul li{height: 230px;}
    .media-menu ul li .flex{margin: 0 0 -61px;}
    .media-menu ul span{display: block; color: #000; font-size: 14px;}
    .media-menu ul b{font-size: 20px;}
    .media-menu ul p{font-size: 14px;}

    .news{padding: 80px 0 160px;}
    .news .title{font-size: 40px;}
    .news .container--wide>.flex{flex-direction: column;}
    .news .left{flex-direction: row; justify-content: space-between; margin-bottom: 40px;}
    .news .left p{margin: 0;}
    .news .right ul{padding: 0;}
    .news .right li a{width: 100%;}
    .news .right li b{font-size: 18px; margin: 14px 0 10px;}
    .news .right li span{font-size: 14px;}
    .news .right li .flex p{font-size: 14px;}
    .news .right a img{width: 215px;}
}
@media screen and (max-width: 767px) {
    .main-visual-pagination{justify-content: center; margin: 0 0 20px 0;}

    #section1 .container--wide{padding-bottom: 100px; text-align: center;}
    #section1 h1{font-size: 24px; text-align: center;}
    .half-cont .flex{flex-direction: column;}
    .half-cont .flex>img{width: 100%; height: auto;}
    .half-cont .cont{padding: 80px 15px; text-align: center; max-width: 100%;}
    .half-cont .cont .bottom{align-items: center;}
    .half-cont .cont .bottom .more{width: 139px; min-width: 139px; height: 43px; margin-bottom: 0;}
    #section2.half-cont .cont img{min-width: 700px; margin: 0 -350px 0 0;}
    .half-cont .cont.reverse{margin-left: 0;}
    #section3.half-cont .cont img{max-width: 500px; min-width: initial; width: 100%;}
    #section3 .fp-tableCell>.flex{flex-direction: column-reverse;}
    .more{font-size: 14px;}
    .reverse .more{right: 50%;}
    .red-text{font-size: 16px;}
    .half-cont h2{font-size: 34px; margin-block: 10px 24px;}
    .half-cont p{font-size: 14px;}
    #section4.fp-section,#section5.fp-section,#section6.fp-section{height: fit-content !important;}
    #section4 .fp-tableCell,#section6 .fp-tableCell{position: relative;}
    #section4 .fp-tableCell::before,#section6 .fp-tableCell::before{content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,.3);}
    #section5 .fp-tableCell,.fp-tableCell:has(.text-box){height: fit-content !important;}
    .text-box{padding-top: 120px; text-align: center; height: fit-content; padding-bottom: 120px;}
    .text-box h2{font-size: 24px; margin-block: 14px 40px;}
    .text-box h1{font-size: 54px; margin-block: 20px 40px;}
    .text-box p{font-size: 14px;}
    .text-box p br{display: none;}
    #section4 .text-box{padding-top: 120px;}
    #section4 .text-box h2{margin-block: 14px 20px;}
    #section4 .more.ver2{margin-top: 40px;}
    #section4{max-height: fit-content;}
    .text-box .flex{flex-direction: column; margin-bottom: 0px; margin-top: 60px; align-items: center;}
    .text-box .flex a{font-size: 16px;}
    .text-box .flex a>*{opacity: 1;}
    .text-box .flex a::after{display: none;}
    .more.ver2{margin: auto;}
    
  
    /* section5 */
    #section5 .container--wide{padding-block: 80px;}
    #section5 .card.mo{margin-block: 0;}
    #section5 .container--wide>div>div.flex{font-size: 16px;}
    #section5 b{font-size: 24px; margin: 0 0 20px;}
    #section5 b br{display: none;}
    #section5 p{font-size: 28px;}
    #section5 div>span{font-size: 14px;}
    #section5 div>span br{display: none;}

    .media{text-align: center; padding: 80px 0 180px;}
    .media h2{font-size: 34px; margin: 0 auto 30px;}
    .media h2::after{right: 20px; display: none;}
    .media .flex{flex-direction: column; font-size: 16px; padding-top: 30px;}
    .media .red{font-size: 18px;}
    .media-menu ul{grid-template-columns: 1fr; width: 330px; margin: auto;}
    .media-menu ul b{font-size: 18px;}
    
    /* news */
    .news{padding: 80px 0 100px;}
    .news .left{flex-direction: column; text-align: center;}
    .news .title{font-size: 34px;}
    .news .left p{font-size: 18px; margin: 30px 0 20px;}
    .news .right li{padding: 20px 0;}
    .news .right li a{flex-direction: column;}
    .news .right a img{width: 100%;}
    .news .right li a>div:has(span){margin-inline: 0; margin-top: 30px; width: 100%;}
    .news .right li .flex{justify-content: space-between;}
    .news .right li span br{display: none;}
    .news .right a div:last-child{display: none;}
}