/* 인트로 */
.intro_container{width: 100%; height: 100%; position: relative;}
.intro_container .bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.intro_container .bg img{width: 100%; height: 100%; object-fit: cover;}
.intro_container .bg video{width: 100%; height: 100%; object-fit: cover;}
.intro_container .txt_box{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; display: flex; align-items: center; justify-content: center; gap: 50px; width: 100%; height: 100%; transition: all 1s;}
.intro_container .txt_box p{color: #FFF; font-size: 40px; font-weight: 500; line-height: normal; letter-spacing: -0.8px; opacity: 0; transition: all 2s;}
.intro_container .txt_box p strong{font-weight: 700;}
.intro_container .txt_box h3{color: #FFF; font-size: 45px; font-weight: 700; line-height: normal; letter-spacing: -0.9px; opacity: 0; transition: all 2s;}
.intro_container .txt_box span{display: block; width: 0px; height: 1px; background: #fff; opacity: 0.5; transition: all 2s;}

.intro_container .mask_box{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 3s;}
.intro_container .mask_box .bg1{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.intro_container .mask_box .bg1::after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background: #001241; transition: all 2s ease-in-out;}
.intro_container .mask_box .bg1::before{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: #001241; transition: all 2s ease-in-out;}
.intro_container .mask_box .bg2{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.intro_container .mask_box .bg2::after{content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: #001241; transition: all 2s ease-in-out;}
.intro_container .mask_box .bg2::before{content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: #001241; transition: all 2s ease-in-out;}
.intro_container .mask_box .mask{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #001241; transform: scale(0); -webkit-mask-image: url('/resources/img/main/intro_mask.png'); -webkit-mask-size: cover; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; mask-image: url('/resources/img/main/intro_mask.png'); mask-size: cover; mask-position: center; mask-repeat: no-repeat; transition: all 2s ease-in-out; z-index: 3;}

.intro_container.on1 .mask_box{opacity: 1;}
.intro_container.on2 .txt_box p{opacity: 1;}
.intro_container.on2 .txt_box span{width: 150px;}
.intro_container.on3 .txt_box h3{opacity: 1;}
.intro_container.on4 .txt_box{opacity: 0;}
.intro_container.on5 .mask_box .bg1::after{height: 5%;}
.intro_container.on5 .mask_box .bg1::before{height: 5%;}
.intro_container.on5 .mask_box .bg2::after{width: 5%;}
.intro_container.on5 .mask_box .bg2::before{width: 5%;}
.intro_container.on5 .mask_box .mask{transform: scale(1);}
.intro_container.on6 .mask_box{opacity: 0;}

.intro_container .cursor {position:fixed; transform:translate(-50%, -50%); pointer-events: none; z-index:9000;}

.intro_container .cursor{z-index: 8; position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); cursor: pointer; pointer-events: all;}
.intro_container .cursor .cursor_trace{width: 70px; height: 70px; border-radius: 70px; background: rgba(255,255,255,1.0); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;}
.intro_container .cursor .cursor_trace::before{
    width: 86px;
    height: 86px;
    border-radius: 86px;
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    background-color: rgba(255,255,255,0.4);
    animation-name: cursor_skip, cursor_skip2;
    animation-duration: 2.1s, 2.1s;
    animation-delay: 0s, 0s;
    animation-timing-function: ease, ease;
    animation-fill-mode: both, both;
    animation-iteration-count: infinite, infinite;
}
@keyframes cursor_skip {
    0% {transform: scale(0.7);}
    30% {transform: scale(0.7);}
    80% {transform: scale(1);}
    100% {transform: scale(1);}
}
@keyframes cursor_skip2 {
    0% {opacity: 0;}
    20% {opacity: 0.3;}
    70% {opacity: 0.3;}
    100% {opacity: 0;}
}
.intro_container .cursor span{font-size: 12px; color: #001241; font-weight: 600; font-family: 'URWClassico';}

@media screen and (max-width: 1140px) {
    .intro_container .txt_box p{font-size: 26px;}
    .intro_container .txt_box h3{font-size: 26px;}
    .intro_container.on2 .txt_box span{width: 120px;}
}

@media screen and (max-width: 1024px) {
    .intro_container .bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('/resources/img/main/m_sec01.jpg') center bottom / cover no-repeat;}
    .intro_container .bg img{display: none;}
    .intro_container .txt_box{flex-direction: column; gap: 36px;}
    .intro_container .txt_box p{font-size: 22px;}
    .intro_container .txt_box h3{font-size: 32px;}
    .intro_container .txt_box span{height: 0; width: 1px;}
    .intro_container.on2 .txt_box span{height: 60px; width: 1px;}
    .intro_container .cursor{top: 100px; bottom: unset; left: unset; right: 0px;}
}


/* 메인시작 */
#fullpage section{overflow: hidden;}

/* indicator */
body #fp-nav.right{right: 50px;}
body #fp-nav ul{display: flex; flex-direction: column; align-items: center;}
body #fp-nav ul li{margin: 0; width: 6px; height: 6px; margin-bottom: 20px;}
body #fp-nav ul li a span{position: relative; top: 0; left: 0; margin: 0; display: block; width: 6px; height: 6px; background: rgba(255,255,255,0.2);}
body #fp-nav ul li a.active span{margin: 0; width: 6px; height: 6px;}
body #fp-nav ul li:hover a span{width: 6px; height: 6px; margin: 0;}
body #fp-nav ul li:hover a.active span{width: 6px; height: 6px; margin: 0;}
body #fp-nav ul li:nth-child(1){width: 14px; height: 16px; margin-bottom: 105px;}
body #fp-nav ul li:nth-child(1)::after{content: ""; position: absolute; top: 40px; left: 0; right: 0; margin: auto; width: 1px; height: 60px; background: rgba(255,255,255,0.2);}
body #fp-nav ul li:nth-child(1) a span{width: 14px; height: 16px; border-radius: unset; background: url("/resources/img/main/indi_home.svg") center center/cover no-repeat;}
body #fp-nav ul li:nth-child(1) a.active span{margin: 0; width: 14px; height: 16px; border-radius: unset;}
body #fp-nav ul li:nth-child(1):hover a span{width: 14px; height: 16px; margin: 0; border-radius: unset;}
body #fp-nav ul li:nth-child(1):hover a.active span{width: 14px; height: 16px; margin: 0; border-radius: unset;}

body #fp-nav ul li:not(:nth-child(1)) a::after{position: absolute; top: -2px; right: 10px; font-size: 10px; font-family: 'Paperlogy'; font-weight: 400; color: #000; letter-spacing: 0.5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: all 0.5s;}
body #fp-nav ul li:not(:nth-child(1)) a.active::after{opacity: 1;}
body #fp-nav ul li:not(:nth-child(1)) a:hover::after{opacity: 1;}
body #fp-nav ul li:nth-child(2) a::after{content: "PREMIUM";}
body #fp-nav ul li:nth-child(3) a::after{content: "LOCATION";}
body #fp-nav ul li:nth-child(4) a::after{content: "BRAND STORY";}
body #fp-nav ul li:nth-child(5) a::after{content: "CONTACT US";}
body #fp-nav ul li:nth-child(6) a{display: none;}

body:not(.fp-viewing-0) #fp-nav ul li a span{background: rgba(0,23,62,0.2);}
body:not(.fp-viewing-0) #fp-nav ul li a.active span{background: rgba(0,23,62,1);}
body:not(.fp-viewing-0) #fp-nav ul li:nth-child(1)::after{background: rgba(0,0,0,0.13);}
body:not(.fp-viewing-0) #fp-nav ul li:nth-child(1) a span{background: url("/resources/img/main/indi_home_bk.svg") center center/cover no-repeat;}

body:not(.fp-viewing-0).fp-viewing-2 #fp-nav ul li a span{background: rgba(255, 255, 255, 0.20);}
body:not(.fp-viewing-0).fp-viewing-2 #fp-nav ul li a.active span{background: rgba(255, 255, 255, 1);}
body:not(.fp-viewing-0).fp-viewing-2 #fp-nav ul li:nth-child(1)::after{background: rgba(255, 255, 255, 0.40);}
body:not(.fp-viewing-0).fp-viewing-2 #fp-nav ul li:nth-child(1) a span{background: url("/resources/img/main/indi_home.svg") center center/cover no-repeat; opacity: 0.5;}
body:not(.fp-viewing-0).fp-viewing-2 #fp-nav ul li:not(:nth-child(1)) a::after{color: #fff;}

.fp-viewing-5 #fp-nav{display: none;}

/* section1 */
#section1 .bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: url('/resources/img/main/sec01.jpg') center bottom/cover no-repeat;}
#section1 .bg::after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 18, 65, 0.00) 82.87%, rgba(0, 18, 65, 0.80) 100%);}
#section1 .bg video{width: 100%; height: 100%; object-fit: cover; will-change: transform;}
#section1 .bg img{width: 100%; height: 100%; object-fit: cover; will-change: transform;}
#section1 .bg video,
#section1.fp-completely .bg video,
.fp-section .bg video{display: block !important; opacity: 1 !important; visibility: visible !important;}

#section1 .bottom_txt{position: absolute; bottom: 0; left: 0; right: 0; text-align: center; z-index: 1;}
#section1 .bottom_txt span{position: relative; display: block; overflow: hidden; height: 72px;}
#section1 .bottom_txt p{display: flex; align-items: center; justify-content: center; color: #FFF; font-family: 'URWClassico'; line-height: 76px; font-size: clamp(60px, 5vw, 100px); font-weight: 400; letter-spacing: 13px; opacity: 0.2; position: relative; transform: translateY(100%); transition: all 1s ease-in-out;}
#section1 .bottom_txt p i{font-style: normal; margin-right: 30px;}



#section1 .sec_inner{max-width: 1920px; width: 100%; height: 100%; margin: auto; padding: 200px 100px 0; position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: center;}
#section1 .sec_inner .txt_box div:nth-child(1){height: 87px; overflow: hidden; position: relative; margin-bottom: 38px;}
#section1 .sec_inner .txt_box div:nth-child(2){height: 36px; overflow: hidden; position: relative; margin-bottom: 36px;}
#section1 .sec_inner .txt_box div:nth-child(3){height: 41px; overflow: hidden; position: relative;}
#section1 .sec_inner .txt_box .txt{color: #FFF; font-size: 18px; font-weight: 500; line-height: 28.249px; letter-spacing: -0.36px; transition: all 1s ease-in-out; transform: translateY(100%); text-align: center;}
#section1 .sec_inner .txt_box .txt span{font-size: 15.537px; letter-spacing: -0.311px;}
#section1 .sec_inner .txt_box .txt strong{font-weight: 700;}
#section1 .sec_inner .txt_box img{opacity: 0; transition: all 1s ease-in-out;}
#section1 .sec_inner .txt_box .tit1{color: #FFF; font-size: 30px; font-weight: 500; line-height: normal; letter-spacing: -0.6px; transition: all 1s ease-in-out; transform: translateY(100%);}
#section1 .sec_inner .txt_box .tit1 strong{font-weight: 700;}
#section1 .sec_inner .txt_box .tit2{color: #FFF; font-size: 35px; font-weight: 700; line-height: normal; letter-spacing: -0.7px; transition: all 1s ease-in-out; transform: translateY(100%);}

/* section01-animation */
#section1.ani1 .bottom_txt p{transform: translateY(0);}
#section1.ani2 .txt_box .txt{transform: translateY(0);}
#section1.ani3 .txt_box img{opacity: 1;}
#section1.ani3 .txt_box .tit1{transform: translateY(0);}
#section1.ani4 .txt_box .tit2{transform: translateY(0);}

/* section2 */
#section2 .swiper{width: 100%; height: 100%;}
#section2 .swiper-slide{display: flex; align-items: center; justify-content: center;}
#section2 .swiper-slide .slide_inner{max-width: 1920px; width: 100%; margin: auto; padding: 90px 100px; display: flex; gap: 120px;}
#section2 .swiper-slide .slide_inner .left_box{max-width: 730px; width: 100%; position: relative; transform: translateY(50px); opacity: 0; transition: all 1s 0.5s;}
#section2 .swiper-slide .slide_inner .left_box p{writing-mode: vertical-rl; transform: scale(-1, -1); position: absolute; top: 40px; right: -28px; font-size: 12px; font-weight: 300; color: #565656; letter-spacing: 0.5px;}
#section2 .swiper-slide .slide_inner .left_box p strong{font-weight: 500;}
#section2 .swiper-slide .slide_inner .right_box{padding-top: 25px;}
#section2 .swiper-slide .slide_inner .right_box > h3{font-family: 'URWClassico'; font-size: 105px; letter-spacing: 10.5px; white-space: nowrap; font-weight: 300; color: #333; margin-bottom: 50px; height: 110px; overflow: hidden; position: relative;}
#section2 .swiper-slide .slide_inner .right_box > h3 span{transform: translateY(110px); position: absolute; transition: all 1s 0.5s;}
#section2 .swiper-slide .slide_inner .right_box .txt_wrap{display: flex; gap: 50px; transform: translateY(50px); opacity: 0; transition: all 1s 0.5s;}
#section2 .swiper-slide .slide_inner .right_box .txt_wrap .txt_box{padding-top: 40px;}
#section2 .swiper-slide .slide_inner .right_box .txt_wrap .txt_box p{font-size: 18px; font-weight: 300; color: #111; line-height: 30px; margin-bottom: 10px; word-break: keep-all;}
#section2 .swiper-slide .slide_inner .right_box .txt_wrap .txt_box p i{font-style: normal; font-size: 14px;}
#section2 .swiper-slide .slide_inner .right_box .txt_wrap .txt_box h3{font-size: 32px; font-weight: bold; color: #111; line-height: 36px; margin-bottom: 50px; word-break: keep-all;}
#section2 .swiper-slide .slide_inner .right_box .txt_wrap .txt_box a{font-size: 14px; font-weight: 400; color: #000; border: 1px solid #CDCDCD; padding: 15px 28px; position: relative; transition: all 0.3s;}
#section2 .swiper-slide .slide_inner .right_box .txt_wrap .txt_box a::after{content: ""; position: absolute; left: 0; top: 0; width: 0%; height: 100%; background: #001241; transition: all 0.3s; z-index: -1;}
#section2 .swiper-slide .slide_inner .right_box .txt_wrap .txt_box a:hover{color: #fff;}
#section2 .swiper-slide .slide_inner .right_box .txt_wrap .txt_box a:hover::after{width: 100%;}
#section2 .swiper-slide .slide_inner .right_box .num_box{margin-top: 36px; display: flex; align-items: center; gap: 18px;}
#section2 .swiper-slide .slide_inner .right_box .num_box p{font-size: 16px; font-weight: 500; color: #000;}
#section2 .swiper-slide .slide_inner .right_box .num_box p:last-child{font-weight: 300; color: #888888;}
#section2 .swiper-slide .slide_inner .right_box .num_box span{display: block; width: 40px; height: 1px; background: #D2D2D2;}

/* section2-animation */
#section2 .swiper-slide.open .left_box{transform: translateY(0); opacity: 1;}
#section2 .swiper-slide.open .right_box h3 span{transform: translateY(0);}
#section2 .swiper-slide.open .slide_inner .right_box .txt_wrap{transform: translateY(0); opacity: 1;}


/* section3 */
#section3 .sec_inner{position: relative; width: 100%; height: 100%; background: #001241;}
#section3 .sec_inner .bg{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
#section3 .sec_inner .bg img{width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; bottom: 0;}
#section3 .sec_inner .cont_box{width: 100%; max-width: 820px; height: 100%; margin-left: auto; position: relative; z-index: 1;}
#section3 .sec_inner .cont_box .tit{position: absolute; writing-mode: sideways-lr; left: 0; top: 130px; opacity: 0.3; color: #FFF; font-family: 'URWClassico'; font-size: 67px; font-weight: 400; line-height: 65px; letter-spacing: 9.38px;}
#section3 .sec_inner .cont_box .box_inner{width: 100%; height: 100%; margin-left: auto; padding: 186px 156px 186px 0; text-align: right;}
#section3 .sec_inner .cont_box .box_inner .txt_box{margin-bottom: 50px; transition: all 1s ease-in-out; transform: translateX(-50px); opacity: 0;}
#section3 .sec_inner .cont_box .box_inner .txt_box .txt1{color: #FFF; font-size: 22px; font-weight: 400; line-height: normal; letter-spacing: -0.44px; margin-bottom: 14px;}
#section3 .sec_inner .cont_box .box_inner .txt_box .txt1 span{font-size: 16px;}
#section3 .sec_inner .cont_box .box_inner .txt_box .txt2{color: #FFF; font-size: 44px; font-weight: 700; line-height: 130%; letter-spacing: -0.88px;}
#section3 .sec_inner .cont_box .box_inner .txt_box .txt2 span{font-size: 20px; font-weight: 400;}
#section3 .sec_inner .cont_box .box_inner .line{width: 1px; height: 0; opacity: 0.5; background: #fff; margin-bottom: 58px; margin-left: auto; transition: all 1s ease-in-out;}
#section3 .sec_inner .cont_box .box_inner ul{display: flex; flex-direction: column; gap: 28px; text-align: right;}
#section3 .sec_inner .cont_box .box_inner ul li{transition: all 1s ease-in-out; transform: translateX(-50px); opacity: 0;}
#section3 .sec_inner .cont_box .box_inner ul li:nth-child(2){transition-delay: 0.1s;}
#section3 .sec_inner .cont_box .box_inner ul li:nth-child(3){transition-delay: 0.2s;}
#section3 .sec_inner .cont_box .box_inner ul li:nth-child(4){transition-delay: 0.3s;}
#section3 .sec_inner .cont_box .box_inner ul li h3{color: #FFF; font-size: 20px; font-weight: 700; line-height: normal; margin-bottom: 8px;}
#section3 .sec_inner .cont_box .box_inner ul li p{color: #CCC; font-size: 16px; font-weight: 400; line-height: normal;}
#section3 .sec_inner .cont_box .box_inner ul li p span{font-size: 14px;}

/* section3-animation */
#section3.ani1 .sec_inner .cont_box .box_inner .txt_box{transform: translateX(0); opacity: 1;}
#section3.ani2 .sec_inner .cont_box .box_inner .line{height: 160px;}
#section3.ani3 .sec_inner .cont_box .box_inner ul li{transform: translateX(0); opacity: 1;}


/* section4 */
#section4 .bg{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
#section4 .bg img{width: 100%; height: 100%; object-fit: cover;}
#section4 .sec_inner{max-width: 1280px; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; margin: auto; position: relative;}
#section4 .sec_inner .top_txt{color: #263545; text-align: center; font-family: 'URWClassico'; font-size: 20px; font-weight: 700; line-height: normal; letter-spacing: 2px; margin-bottom: 120px; padding-top: 120px;}
#section4 .sec_inner .motion_txt{height: 100%; padding-bottom: 100px; display: flex; flex-direction: column; justify-content: space-between;}
#section4 .sec_inner .motion_txt .tit_box{transform: scale(1); opacity: 1; transform-origin: center bottom; transition: all 1.5s;}
#section4 .sec_inner .motion_txt h3{font-size: 60px; font-weight: 400; color: #001241 ; text-align: center; line-height: 80px; height: 80px; overflow: hidden; position: relative;}
#section4 .sec_inner .motion_txt h3 strong{font-weight: 700;}
#section4 .sec_inner .motion_txt h3 span{position: absolute; text-align: center; left: 0; right: 0; transform: translateY(80px); opacity: 0; transition: all 1s 1s;}
#section4 .sec_inner .motion_txt h3:last-child{margin-top: 43px;}
#section4 .sec_inner .motion_box{position: absolute; width: 380px; height: 570px; overflow: hidden; border-radius: 300px; left: 0; right: 0; bottom: 85px; transform: translateY(50%); margin: auto; transition: all 1.5s;}
#section4 .sec_inner .motion_box .img_box{text-align: center;}
#section4 .sec_inner .motion_box .img_box img{width: 100%; height: 100%; object-fit: cover;}
#section4 .sec_inner .video_box{position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: all 1s;}
#section4 .sec_inner .video_box .video_bg{width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; transition: all 0.3s;}
#section4 .sec_inner .video_box .video_bg img{width: 100%; height: 100%; object-fit: cover;}
#section4 .sec_inner .video_box .utll_btn{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 48px; z-index: 2; transition: all 0.3s;}
#section4 .sec_inner .video_box .utll_btn div{position: absolute; top: 0; left: 0; cursor: pointer;}
#section4 .sec_inner .video_box .utll_btn div.pause{display: none;}
#section4 .sec_inner .video_box video{width: 100%; height: 100%; object-fit: cover;}
#section4 .sec_inner .video_box.play .video_bg,
#section4 .sec_inner .video_box.play .utll_btn{opacity: 0; visibility: hidden;}

/* section4-animation */
#section4.active .sec_inner .motion_txt h3 span{transform: translateY(0); opacity: 1;}

#section4.ani1 .sec_inner .motion_txt .tit_box{transform: scale(0.4); opacity: 0;}
#section4.ani1 .sec_inner .motion_box{bottom: 50%;}
#section4.ani1 .sec_inner .motion_txt p span{transform: translateY(0); opacity: 1;}

#section4.ani2 .sec_inner .motion_box{width: 100%; height: 100%; max-height: 640px; border-radius: 0;}
#section4.ani2 .sec_inner .motion_box .video_box{opacity: 1; visibility: visible;}



/* section5 */
#section5 .bg{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
#section5 .bg img{width: 100%; height: 100%; object-fit: cover;}
#section5 .sec_inner{max-width: 1080px; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; margin: auto; position: relative;}
#section5 .sec_inner .top_txt{color: #263545; text-align: center; font-family: 'URWClassico'; font-size: 20px; font-weight: 700; line-height: normal; letter-spacing: 2px; margin-bottom: 56px;}
#section5 .sec_inner ul{display: flex; align-items: center; justify-content: center; gap: 40px;}
#section5 .sec_inner ul li{transition: all 1s ease-in-out; opacity: 0;}
#section5 .sec_inner ul li:nth-child(1){transform: translateX(-50px);}
#section5 .sec_inner ul li:nth-child(2){transform: translateX(50px);}
#section5 .sec_inner ul li .img_box{width: 520px; position: relative; cursor: pointer; margin-bottom: 21px;}
#section5 .sec_inner ul li .img_box img{width: 100%; display: block;}
#section5 .sec_inner ul li .img_box .line{position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#section5 .sec_inner ul li .img_box .line::after{transition: all 0.3s;}
#section5 .sec_inner ul li .img_box .line::before{transition: all 0.3s;}
#section5 .sec_inner ul li .img_box .line:nth-child(1)::after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #D3D3D3;}
#section5 .sec_inner ul li .img_box .line:nth-child(1)::before{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #D3D3D3;}
#section5 .sec_inner ul li .img_box .line:nth-child(2)::after{content: ""; position: absolute; bottom: 0; left: 0; width: 1px; height: 100%; background: #D3D3D3;}
#section5 .sec_inner ul li .img_box .line:nth-child(2)::before{content: ""; position: absolute; bottom: 0; right: 0; width: 1px; height: 100%; background: #D3D3D3;}
#section5 .sec_inner ul li .img_box:hover .line:nth-child(1)::after{background:#001241; height: 2px;}
#section5 .sec_inner ul li .img_box:hover .line:nth-child(1)::before{background:#001241; height: 2px;}
#section5 .sec_inner ul li .img_box:hover .line:nth-child(2)::after{background:#001241; width: 2px;}
#section5 .sec_inner ul li .img_box:hover .line:nth-child(2)::before{background:#001241; width: 2px;}
#section5 .sec_inner ul li .txt_box{display: flex; justify-content: space-between; gap: 74px;}
#section5 .sec_inner ul li .txt_box .txt{display: flex; align-items: center; gap: 12px;}
#section5 .sec_inner ul li .txt_box .txt strong{color: #001241; font-size: 18px; font-weight: 700; line-height: normal;}
#section5 .sec_inner ul li .txt_box .txt .line{width: 1px; height: 16px; background: #001241;}
#section5 .sec_inner ul li .txt_box .txt p{color: #666; font-size: 18px; font-weight: 400; line-height: normal;}
#section5 .sec_inner ul li .txt_box .btn_box{display: flex; align-items: center; gap: 9px;}
#section5 .sec_inner ul li .txt_box .btn_box a{display: block;}


/* section5-animation */
#section5.ani1 .sec_inner ul li{opacity: 1; transform: translateX(0);}


/* 반응형 */
@media screen and (max-width: 1840px) {
    #section3 .sec_inner .bg{width: 85%;}
}

@media screen and (max-width: 1795px) {
    #section2 .swiper-slide .slide_inner .left_box{max-width: unset; width: 40%;}
    #section2 .swiper-slide .slide_inner .left_box img{width: 100%;}
    #section2 .swiper-slide .slide_inner .right_box .img_box{width: 40%; min-width: 300px;}
    #section2 .swiper-slide .slide_inner .right_box .img_box img{width: 100%;}
}

@media screen and (max-width: 1700px) {
    #section1 .bottom_txt span{height: clamp(60px, 4vw, 88px);}
    #section1 .bottom_txt p{font-size: clamp(60px, 4vw, 100px); line-height: 60px;}
}

@media screen and (max-width: 1630px) {
    #section3 .sec_inner .cont_box{max-width: 50%;}
    #section3 .sec_inner .cont_box .box_inner{padding: 186px 125px 186px 0;}
    #section3 .sec_inner .cont_box .tit{left: 5%; font-size: 45px; line-height: 40px;}
    #section3 .sec_inner .cont_box .box_inner .txt_box .txt2{font-size: 30px;}
    #section3 .sec_inner .cont_box .box_inner ul li p{font-size: 14px;}
}

@media screen and (max-width: 1620px){
    #section2 .swiper-slide .slide_inner .right_box > h3{font-size: 60px; height: 68px;}
    #section2 .swiper-slide .slide_inner .right_box > h3 span{transform: translateY(68px);}
    #section2 .swiper-slide.open .right_box h3 span{transform: translateY(0);}
}

@media screen and (max-width: 1550px) {
    #section1 .sec_inner{margin-bottom: 15%;}
}

@media screen and (max-width: 1400px){
    #section2 .swiper-slide .slide_inner{gap: 80px;}
    #section2 .swiper-slide .slide_inner .left_box{min-width: 450px;}
    #section2 .swiper-slide .slide_inner .right_box .txt_wrap .txt_box p:nth-child(1){font-size: 14px;}
    #section2 .swiper-slide .slide_inner .right_box .txt_wrap .txt_box p:nth-child(2){font-size: 26px; line-height: 30px;}
}

@media screen and (max-width: 1310px) {
    #section1 .bottom_txt span{height: clamp(48px, 4vw, 88px);}
    #section1 .bottom_txt p{font-size: clamp(40px, 3vw, 100px);}
}

@media screen and (max-width: 1300px){
    #section2 .swiper-slide .slide_inner .right_box .txt_wrap{gap: 20px;}
    #section2 .swiper-slide .slide_inner .right_box .img_box{min-width: 200px;}
}

@media screen and (max-width: 1250px){
    #section3 .sec_inner .cont_box .box_inner ul{width: 50%; margin-left: auto; word-break: keep-all;}

    #section4 .sec_inner{max-width: 1024px;}
}

@media screen and (max-width: 1200px){
    #section2 .swiper-slide .slide_inner .left_box {min-width: 350px;}
    #section2 .swiper-slide .slide_inner .left_box p{top: 10px;}
    #section2 .swiper-slide .slide_inner .right_box > h3 {font-size: 40px; height: 44px;}
    #section2 .swiper-slide .slide_inner .right_box > h3 span{transform: translateY(44px);}
    #section2 .swiper-slide.open .right_box h3 span{transform: translateY(0);}

    #section5 .sec_inner ul li .img_box{width: 400px;}
    #section5 .sec_inner ul li .txt_box{gap: 10px; flex-direction: column; justify-content: center; align-items: center;}
}

@media screen and (max-height: 1040px){
    #section1 .sec_inner .txt_box img{width: 70%; margin: auto; display: block;}

    #section2 .swiper-slide .slide_inner{padding: 0 40px;}
    #section2 .swiper-slide .slide_inner .left_box{max-width: 660px; width: 65vh;}
    #section2 .swiper-slide .slide_inner .left_box img{width: 100%;}
    #section2 .swiper-slide .slide_inner .right_box{width: 50%;}
    #section2 .swiper-slide .slide_inner .right_box .img_box{width: 40vh;}
    #section2 .swiper-slide .slide_inner .right_box .img_box img{width: 100%;}

    #section3 .sec_inner .cont_box .box_inner{padding: 70px 125px 70px 0;}
    #section3 .sec_inner .cont_box .box_inner .txt_box{margin-bottom: 20px;}
    #section3.ani2 .sec_inner .cont_box .box_inner .line{height: 100px; margin-bottom: 20px;}
}
@media screen and (max-height: 950px){
    #section1 .sec_inner{padding: 140px 100px 0;}
}
@media screen and (max-height: 850px){
    #section2 .swiper-slide .slide_inner .left_box{width: 60vh;}
    #section2 .swiper-slide .slide_inner .right_box .img_box{width: 35vh;}
}


/* 모바일 */
@media screen and (max-width: 1024px){
    #fp-nav{display: none;}

    #section1{height: 100vh; position: relative;}
    #section1 .bg{background: url('/resources/img/main/m_sec01.jpg') center bottom / cover no-repeat;}
    #section1 .bg::after{display: none;}
    #section1 .sec_inner{justify-content: center; align-items: flex-start; margin: 0; padding: 163px 0 0;}
    #section1.ani2 .txt_box .txt{text-align: center;}
    #section1 .sec_inner .txt_box img{content: url("/resources/img/main/m_sec01_tit.svg");}
    #section1 .sec_inner .txt_box .tit1{text-align: center;}
    #section1 .sec_inner .txt_box .tit2{text-align: center;}

    #section2{height: 852px; position: relative;}
    #section2 .swiper-slide .slide_inner{flex-direction: column; align-items: center; padding: 0 30px; gap: 30px; max-width: 100%; height: 100%;}
    #section2 .swiper-slide .slide_inner .left_box{width: 335px; max-width: unset; min-width: unset;}
    #section2 .swiper-slide .slide_inner .left_box p{right: unset; left: 0; top: 36px;}
    #section2 .swiper-slide .slide_inner .left_box img{width: 100%;}
    #section2 .swiper-slide01 .slide_inner .left_box img{content: url('/resources/img/main/m_sec02_slide01.jpg');}
    #section2 .swiper-slide02 .slide_inner .left_box img{content: url('/resources/img/main/m_sec02_slide02.jpg');}
    #section2 .swiper-slide03 .slide_inner .left_box img{content: url('/resources/img/main/m_sec02_slide03.jpg');}
    #section2 .swiper-slide04 .slide_inner .left_box img{content: url('/resources/img/main/m_sec02_slide04.jpg');}
    #section2 .swiper-slide05 .slide_inner .left_box img{content: url('/resources/img/main/m_sec02_slide05.jpg');}
    #section2 .swiper-slide06 .slide_inner .left_box img{content: url('/resources/img/main/m_sec02_slide06.jpg');}
    #section2 .swiper-slide .slide_inner .right_box{width: 100%; max-width: 335px; margin: 0 auto; padding: 0;}
    #section2 .swiper-slide .slide_inner .right_box > h3{margin-bottom: 18px; letter-spacing: 3.7px;}
    #section2 .swiper-slide .slide_inner .right_box .txt_wrap .txt_box{margin-bottom: 30px; padding: 0;}
    #section2 .swiper-slide .slide_inner .right_box .txt_wrap .txt_box p{line-height: 22px; font-size: 16px;}
    #section2 .swiper-slide .slide_inner .right_box .txt_wrap .txt_box p i{font-size: 10px;}
    #section2 .swiper-slide .slide_inner .right_box .txt_wrap .txt_box h3{font-size: 26px; margin-bottom: 30px;}
    #section2 .swiper-slide .slide_inner .right_box .txt_wrap .txt_box a{position: relative; bottom: 0; right: 0; display: inline-block;}
    #section2 .swiper-slide .slide_inner .right_box .num_box{position: relative; right: 0; margin: 0;}
    #section2 .swiper-slide .slide_inner .right_box .num_box span{width: 40px;}

    #section2 .swiper-slide .slide_inner .right_box .img_box{display: none;}
    #section2 .swiper-pagination{bottom: 20px;}
    #section2 .swiper-pagination-bullet-active{background: #00173E;}

    #section3{height: auto; position: relative;}
    #section3 .sec_inner{display: grid; grid-template-columns: repeat(1, 1fr); padding-bottom: 50px;}
    #section3 .sec_inner .bg{max-width: 700px; width: 100%; margin: auto; position: relative;}
    #section3 .sec_inner .bg img{content: url("/resources/img/main/m_sec03_map.jpg"); position: relative; width: 100%; height: unset; object-fit: unset;}
    #section3 .sec_inner .cont_box{max-width: 700px; width: 100%; margin: auto; padding: 22px 30px;}
    #section3 .sec_inner .cont_box .tit{position: relative; left: 0; top: 0; writing-mode: unset; line-height: 65px; letter-spacing: 6.3px; margin-bottom: 34px; display: block;}
    #section3 .sec_inner .cont_box .box_inner{padding: 0;}
    #section3 .sec_inner .cont_box .box_inner .txt_box{text-align: center;}
    #section3 .sec_inner .cont_box .box_inner .txt_box .txt1{font-size: 16px; margin-bottom: 10px;}
    #section3 .sec_inner .cont_box .box_inner .txt_box .txt1 span{font-size: 12px;}
    #section3 .sec_inner .cont_box .box_inner .txt_box .txt2{font-size: 28px; margin-bottom: 42px;}
    #section3 .sec_inner .cont_box .box_inner .txt_box .txt2 span{font-size: 14px;}
    #section3 .sec_inner .cont_box .box_inner .line{display: none;}
    #section3 .sec_inner .cont_box .box_inner ul{width: 100%; text-align: center; gap: 20px;}
    #section3 .sec_inner .cont_box .box_inner ul li h3{font-size: 18px;}

    #section4{height: 852px; position: relative;}
    #section4 .sec_inner .top_txt{padding-top: 100px; margin-bottom: 140px; font-size: 18px;}
    #section4 .sec_inner .motion_txt h3{font-size: 28px; line-height: 40px; height: 40px;}
    #section4 .sec_inner .motion_box{width: 220px; height: 330px;}
    #section4.ani2 .sec_inner .motion_box{max-height: 380px;}

    #section5{height: 1030px; position: relative;}
    #section5 .sec_inner .top_txt{font-size: 18px;}
    #section5 .sec_inner ul{flex-direction: column; gap: 45px;}
    #section5 .sec_inner ul li .img_box{width: 333px; margin: 0 auto 24px;}
    #section5 .sec_inner ul li .txt_box{gap: 20px;}
    #section5 .sec_inner ul li .txt_box .txt{flex-direction: column; gap: 8px;}
    #section5 .sec_inner ul li .txt_box .txt strong{font-size: 16px;}
    #section5 .sec_inner ul li .txt_box .txt .line{display: none;}
    #section5 .sec_inner ul li .txt_box .txt p{font-size: 16px;}



}

@media screen and (max-width: 1024px) and (max-height: 1040px){
    #section1 .sec_inner .txt_box img{width: 100%; margin: auto; display: block;}
}
@media screen and (max-width: 1024px) and (max-height: 750px){
    #section1 .sec_inner{padding: 100px 0 0;}
}

@media screen and (max-width: 680px) {
    #section1 .bottom_txt p{font-size: 35px; letter-spacing: 1.05px; line-height: 48px;}

    #section3 .sec_inner .bg{max-width: 100%;}
    #section3 .sec_inner .cont_box{max-width: 393px;}
    #section4 .sec_inner .video_box .video_bg img{content: url('/resources/img/main/m_sec04_poster.jpg');}
}

@media screen and (max-width: 600px){
    #section4 .txt_box{margin-bottom: 50px;}
    #section4 .txt_box h3{font-size: 20px; line-height: 26px;}
    #section4 .logo{max-width: 260px; width: 100%; margin-bottom: 50px;}
    #section4 .logo img{content: url('/resources/img/main/sec04_logo_mo.svg');}
    #section4 .sub_txtbox{flex-direction: column; gap: 0; margin-bottom: 16px;}
    #section4 .sub_txtbox span{display: none;}
    #section4 .sub_txtbox h3{line-height: 32px;}
    #section4 .sub_txtbox p{font-size: 18px; line-height: 32px;}
}

@media screen and (max-width: 460px){
    #section2 .swiper-slide .slide_inner .right_box .img_box{min-width: 140px;}
}
@media screen and (max-width: 430px){
    #section1 .sec_inner .txt_box .txt{font-size: 13px;}
    #section1 .sec_inner .txt_box .txt span{font-size: 10px;}
    #section1 .sec_inner .txt_box .tit1{font-size: 21px;}
    #section1 .sec_inner .txt_box .tit2{font-size: 24px;}
    #section1 .sec_inner .txt_box div:nth-child(1){height: 80px; margin-bottom: 45px;}
    #section1 .sec_inner .txt_box div:nth-child(2){height: 27px; margin-bottom: 22px;}
    #section1 .sec_inner .txt_box div:nth-child(3){height: 30px;}

}