@charset "utf-8";

/* MAIN-VISUAL */
.main-visual {position: relative;}
.main-visual .item {position: relative; height: 100vh;}
.main-visual .img-box {transform: scale(1.1); position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-repeat: no-repeat; background-position: left 60% top; background-size: cover;}
.main-visual .item:nth-child(1) .img-box {background-image: url('../img/main/main-visual01.jpg');}
.main-visual .item:nth-child(2) .img-box {background-image: url('../img/main/main-visual02.jpg');}
.main-visual .slick-active .img-box {transform: scale(1); transition: all 2.5s;}
.main-visual .text-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 5; max-width: 1624px; width: 100%; padding: 0 20px; display: flex; justify-content: flex-end;}
.main-visual .item:nth-child(1) .text-box {padding-bottom: 32px;}
.main-visual .item:nth-child(2) .text-box {padding-top: 42px;}
.main-visual .text-box .inner {width: 695px;} 
.main-visual .text-box .sub-title-eng {font-size: 24px; font-weight: 700; line-height: 1.6em; letter-spacing: 1.92px; color: #E20011; margin-bottom: 20px;}
.main-visual .text-box .title {font-size: 56px; font-weight: 700; line-height: 1.3em; color: #222; margin-bottom: 20px;}
.main-visual .text-box .title-wh {color: #fff; text-shadow: 1px 2px 5px rgba(0,0,0,0.2);}
.main-visual .text-box .title span {color: #E20011;}
.main-visual .text-box .sub-title-kor {font-size: 22px; font-weight: 500; line-height: 1.6em; color: #444;}
.main-visual .slick-active .text-box .sub-title-eng {animation: text-up 1.2s both 0.5s;}
.main-visual .slick-active .text-box .title {animation: text-up 1.2s both 0.7s;}
.main-visual .slick-active .text-box .sub-title-kor {animation: text-up 1.2s both 0.9s;}
@keyframes text-up {
    0% {
        transform: translateY(60px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

.main-visual .controler-wrap {position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); display: flex; gap: 20px;}
.main-visual .paging-wrap {position: relative; width: 200px; height: 44px; border-radius: 22px; background: rgba(0, 0, 0, 0.30);}
.main-visual .slick-arrow {position: absolute; top: 50%; margin-top: -6px; width: 24px; height: 12px; background-repeat: no-repeat; background-position: center center; background-color: transparent; border: 0; font-size: 0; }
.main-visual .slick-prev {left: 28px; background-image: url('../img/main/btn-main-visual-prev.png');}
.main-visual .slick-next {right: 28px; background-image: url('../img/main/btn-main-visual-next.png');}
.main-visual .paging {height: 100%;}
.main-visual .paging ul {height: 100%;}
.main-visual .paging li {display: none; height: 100%;} 
.main-visual .paging li.slick-active {display: flex; justify-content: center; align-items: center;}
.main-visual .paging li > div {width: 42px; padding: 0 12px; font-size: 14px; font-weight: 500; line-height: 1.6em; color: #ccc;}
.main-visual .paging li .current {color: #fff;}
.main-visual .paging li .line {display: block; width: 1px; height: 7px; background: #83888E;} 
.main-visual .controler button {width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, 0.30); background-repeat: no-repeat; background-position: center center; border: 0;}
.main-visual .controler .btn-stop {background-image: url('../img/main/btn-main-visual-stop.png');}
.main-visual .controler .btn-play {display: none; background-image: url('../img/main/btn-main-visual-play.png');}

/* 섹션 공통 */
.section-title h3 {opacity: 0; font-size: 50px; font-weight: 700; line-height: 1.5em; letter-spacing: -1px; color: #222; text-align: center; margin-bottom: 20px;}
.section-title p {opacity: 0;  font-size: 28px; font-weight: 500; line-height: 1.4em; color: #666; text-align: center;}
.section-title.section-title-wh h3  {color: #F8F8F8; margin-bottom: 0;}
.section-title.section-title-wh p {color: #F8F8F8;}
.btn-more {opacity: 0; width: 268px; padding: 12px 32px; background: #E20011; border: 3px solid #E20011; border-radius: 39px; font-size: 20px; font-weight: 700; color: #fff; text-align: center; margin: 50px auto 0; transition: all 0.5s;}
.btn-more.eng {font-family: "Poppins", sans-serif; line-height: 1.3em;}
.btn-more:hover {border-radius: 39px 0 39px 39px; background: transparent; color: #E20011;}
.section.on .section-title h3 {animation: text-up 1.2s both .4s;}
.section.on .section-title p {animation: text-up 1.2s both .6s;}
.section.on .btn-more {animation: text-up 1.2s both .8s;}

/* MEDIA */
/* .media {position: relative;}
.media .fp-tableCell {justify-content: flex-end;}
.media .backdrop {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; background: #000;}
.media .backdrop .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; opacity: 0; transition: opacity 0.5s ease;}
.media .backdrop .bg0 {opacity: 1;}
.media .text-box {margin-bottom: 65px;}
.media .text-box .section-title {margin-bottom: 116px;}
.media .text-box ul {display: flex; margin: 0 -30px;}
.media .text-box ul li {opacity: 0; width: 20%; padding: 0 30px;}
.media .text-box ul li a {position: relative; height: 100%; background: rgba(255, 255, 255, 0.30); backdrop-filter: blur(10px); padding: 37px 30px; text-align: center; transition: all 0.5s; overflow: hidden;}
.media .text-box ul li.active a {background: #C2000F; backdrop-filter: blur(20px);}
.media .text-box ul li a:after {opacity: 0; position: absolute; bottom: -20px; right: 0; content: ''; width: 111px; height: 100px; background: url('../img/main/section01-deco.png') no-repeat right bottom; transition: all 0.5s;}
.media .text-box ul li.active a:after {opacity: 1; bottom: 0; right: 0;}
.media .text-box ul li .icon {margin-bottom: 4px;}
.media .text-box ul li h4 {font-family: 'Noto Sans KR'; font-size: 18px; font-weight: 700; line-height: 1.6em; color: #fff;} */

.media {position: relative;}
.media .fp-tableCell {justify-content: flex-end;}
.media .backdrop {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; background: #000;}
.media .backdrop .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; opacity: 0; transition: opacity 0.5s ease;}
.media .backdrop .bg0 {opacity: 1;}
.media .text-box {margin-bottom: 65px;}
.media .text-box .section-title-wrap {position: relative; /* height: 200px; */ margin-bottom: 116px; }
.media .text-box .section-title {position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: all 0.5s;}
.media .text-box .section-title01 {opacity: 1;}

.media .text-box ul {display: flex; margin: 0 -30px;}
.media .text-box ul li {opacity: 0; width: 20%; padding: 0 30px;}
.media .text-box ul li a {position: relative; height: 100%; background: rgba(255, 255, 255, 0.30); backdrop-filter: blur(10px); padding: 37px 30px; text-align: center; transition: all 0.5s; overflow: hidden;}
.media .text-box ul li.active a {background: #C2000F; backdrop-filter: blur(20px);}
.media .text-box ul li a:after {opacity: 0; position: absolute; bottom: -20px; right: 0; content: ''; width: 111px; height: 100px; background: url('../img/main/section01-deco.png') no-repeat right bottom; transition: all 0.5s;}
.media .text-box ul li.active a:after {opacity: 1; bottom: 0; right: 0;}
.media .text-box ul li .icon {margin-bottom: 4px;}
.media .text-box ul li h4 {font-family: 'Noto Sans KR'; font-size: 18px; font-weight: 700; line-height: 1.6em; color: #fff;}

.media.on .text-box ul li:nth-child(1) {animation: text-up 1.2s both .8s;}
.media.on .text-box ul li:nth-child(2) {animation: text-up 1.2s both .85s;}
.media.on .text-box ul li:nth-child(3) {animation: text-up 1.2s both .9s;}
.media.on .text-box ul li:nth-child(4) {animation: text-up 1.2s both .95s;}
.media.on .text-box ul li:nth-child(5) {animation: text-up 1.2s both 1s;}

/* WORKS */
.works {position: relative; background: #F5F5F5; overflow: hidden;}
.works:before {position: absolute; bottom: -200px; right: 0; content: ''; width: 577px; height: 761px; background: url('../img/main/section02-bg.png') no-repeat right bottom;}
.works .content-box {display: flex; flex-direction: column; justify-content: center; height: 100%; padding-top: 85px;}

/* PARTNER */
.partner .content-box {padding-top: 76px;}
.partner .section-title {margin-bottom: 80px;}
.partner .section-title h3 {font-size: 44px;}
.partner .section-title p {font-size: 24px;}
.partner .slide-items {display: flex; width: max-content; animation: rolling 50s linear infinite;}
.partner .slide-items:not(:last-child) {margin-bottom: 24px;}
.partner .item {padding: 5px 25px;}
.partner .item img {width: 200px;}
@keyframes rolling {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* CONTACT */
.contact-wrap {height: 100%; background: url('../img/main/section04-bg.png') no-repeat center center/cover; }
.contact-wrap .content-box {display: flex; flex-direction: column; justify-content: center; height: 100%; padding-top: 86px;}
.contact-wrap .section-title h3 {margin-bottom: 8px;}

/* FULLPAGE NAV */
#fp-nav {position: absolute; top: 50%; right: 40px; z-index: 50;}
#fp-nav li:not(:last-child) {margin-bottom: 32px;}
#fp-nav li a {position: relative; width: 32px; height: 32px; }
#fp-nav li a:before {opacity: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); content: ''; width: 8px; height: 8px; border-radius: 50%; background: #999; transition: all 0.3s;}
#fp-nav li a:after {opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); content: ''; width: 100%; height: 100%; background: url('../img/main/nav-active.png') no-repeat center center; transition: all 0.3s;}
#fp-nav li a.active:before {opacity: 0;}
#fp-nav li a.active:after {opacity: 1;}