@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard.css");
/*
    variable
********************/
:root {

      /* contents point colors */
      --premium-box-color:#afbf67;
      --premium-tit-color:#000;
      --premium-status-bar:#011142;
      --premium-btn-hover-color:#24a544;

    }


/*
      MAIN
*******************/
.pc-only {display:block;}
.m-only {display:none;}
.main_container {overflow: hidden;}
.main_visual {position:relative; width: 100%; height: 100%;}
.main_visual .swiper{width: 100%; height: 100%;}
.main_visual .swiper-slide{overflow: hidden;}
.main_visual .swiper-slide .bg{transform: scale(1.2);}
.main_visual .swiper-slide-active .copy02{transition-delay: 0.3s;}
.main_visual .swiper-slide-active .bg{animation: main_visual 5s both ease-in-out;}
@keyframes main_visual{
      0%{transform: scale(1.2);}
      100%{transform: scale(1);}
}
.main_visual.initial-load .swiper-slide-active .copy,
.main_visual.initial-load .swiper-slide-active .copy02 {transform: translateY(50px); opacity: 0; transition: none;}

.main_visual .swiper .slide_option{position: absolute; bottom: 50px; left: 50px; width: 250px; height: 20px; display: flex; align-items: center;}
.main_visual .swiper .slide_option .swiper-button-prev,
.main_visual .swiper .slide_option .swiper-button-next{background: url('/resources/img/main/main_slide_arrow.svg') center center/cover no-repeat; width: 7px; height: 13px; color: unset; margin: unset; top: unset; left: unset; right: unset;}
.main_visual .swiper .slide_option .swiper-button-prev{transform: scaleX(-1); left: 0;}
.main_visual .swiper .slide_option .swiper-button-next{right: 0;}
.main_visual .swiper .slide_option .swiper-button-prev:after, 
.main_visual .swiper .slide_option .swiper-button-next:after{display: none;}
.main_visual .swiper .slide_option .swiper-progress-bar {position: absolute; bottom: 0; top: 0; left: 55px; width: 0%; max-width: 135px; height: 2px; background: #fff; transform-origin: left center; z-index: 1; margin: auto;}
.main_visual .swiper .slide_option .swiper-progress-bar::after{content: ""; position: absolute; bottom: 0; left: 0; width: 135px; height: 2px; background: #fff; opacity: 0.4;}
.main_visual .swiper .slide_option .swiper-pagination-custom {position: absolute; bottom: 0; left: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 0 20px;}
.main_visual .swiper .slide_option .swiper-pagination-custom span{font-size: 16px; color: #fff; font-weight: bold;}
.main_visual .swiper .slide_option .swiper-pagination-custom span:last-child{opacity: 0.4;}

.main_visual .fottxt{position: absolute; right: 50px; bottom: 50px; color: #fff; font-size: 14px; font-family: 'Noto Sans KR'; opacity: 0.4;}

.main_visual .swiper-slide01 .bg{position: absolute; top: 0; left: 549px; right: 0; height:100%; background:url("../../images/main_visual01.jpg") center center/cover no-repeat; pointer-events: none;}
.main_visual .swiper-slide01 .inner {position:absolute; top:0; left:0; width:549px; height:100%; background:#fff;}
.main_visual .swiper-slide01 .visual_inr{position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; width:80%;}
.main_visual .swiper-slide01 .copy {position:relative; top:50%; left: 0; right: 0; width:100%; text-align: center;}
.main_visual .swiper-slide01 .copy img { max-width: 100%;}
.main_visual .swiper-slide01 .copy h3 {font-size: 54px; color: #05205f; font-weight: 400; }
.main_visual .swiper-slide01 .copy h3 span {font-size: 64px; font-weight: 700;}
.main_visual .swiper-slide01 .copy p {font-size:20px; color:#05205f;padding-top:185px; padding-bottom:24px;}
.main_visual .swiper-slide-active .copy h3 {animation: main_txt 0.9s 0.2s both; animation-timing-function :ease-out ;}
.main_visual .swiper-slide-active .copy p {animation: main_txt 0.9s 1.2s both; animation-timing-function :ease-out ;}
.main_visual .swiper-slide-active .copy .img {animation: main_txt 0.9s 1.7s both; animation-timing-function :ease-out ;}
@keyframes main_txt {
    from { opacity: 0; transform: translateY(80px);  }
    to { opacity: 1; }
}

.main_visual .swiper-slide02 .bg{position: absolute; top: 0; left: 0; width:100%; height:100%; background:url("/resources/img/main/main_visual02.jpg") center center/cover no-repeat; pointer-events: none;}
.main_visual .swiper-slide02 .inner {position:relative; width:100%; height:100%; margin:0 auto; padding: 10%;}
/* .main_visual .swiper-slide02 .copy p:nth-of-type(1){font-size: 40px; color: #fff; font-weight: 500; margin-bottom: 18px;}
.main_visual .swiper-slide02 .copy h3{font-size: 82px; color: #fff; font-weight: 800; margin-bottom: 30px;}
.main_visual .swiper-slide02 .copy p:nth-of-type(2){font-size: 62px; color: #fff; font-weight: 800;} */
.main_visual .swiper-slide02 .copy p:nth-of-type(1){font-size: 30px; color: #0066B3; font-weight: 500; margin-bottom: 18px;}
.main_visual .swiper-slide02 .copy h3{font-size: 72px; color: #0066B3; font-weight: 800; margin-bottom: 30px;}
.main_visual .swiper-slide02 .copy h3 span{color: #001960;}
.main_visual .swiper-slide02 .copy p:nth-of-type(2){font-size: 52px; color: #001960; font-weight: 800;}

.main_visual .swiper-slide03 .bg{position: absolute; top: 0; left: 0; width:100%; height:100%; background:url("/resources/img/main/main_visual03.jpg") center 0%/cover no-repeat; pointer-events: none;}
.main_visual .swiper-slide03 .inner {position:relative; width:100%; height:100%; margin:0 auto; padding: 10%;}
.main_visual .swiper-slide03 .copy p:nth-of-type(1){font-size: 30px; color: #0066B3; font-weight: 500; margin-bottom: 18px;}
.main_visual .swiper-slide03 .copy h3{font-size: 72px; color: #0066B3; font-weight: 800; margin-bottom: 30px;}
.main_visual .swiper-slide03 .copy h3 span{color: #001960;}
.main_visual .swiper-slide03 .copy p:nth-of-type(2){font-size: 52px; color: #001960; font-weight: 800;}

.main_visual .scroll_box{width: 125px; height: 125px; position: absolute; bottom: 100px; right: 50px; z-index: 2; display: flex; align-items: center; justify-content: center;}
.main_visual .scroll_box div{position: absolute;}
.main_visual .scroll_box div img{display: block;}
.main_visual .scroll_box .txt{animation: main_scroll 10s infinite linear;}
@keyframes main_scroll{
      0%{transform: rotate(0);}
      100%{transform: rotate(360deg);}
}
.main_visual .scroll_box .txt img{width: 125px; height: 125px;}

.quick_link {position:fixed; right:80px; bottom:70px; display:flex; flex-direction: column; gap: 10px; width:140px; z-index:99;}
.quick_link a{display: block;}
.fp-viewing-sec5 .quick_link{display: none;}

#fp-nav.left{left: 80px;}
#fp-nav ul{display: flex; flex-direction: column; justify-content: center; gap: 30px;}
#fp-nav ul li{display: block; width: 14px; height: 14px; margin: 0px; position: relative;}
#fp-nav ul li:first-child{width: 13px; height: 40px;}
#fp-nav ul li:last-child{display: none;}
#fp-nav ul li:first-child::after{display: none;}
#fp-nav ul li a{display: flex; align-items: center; justify-content: center;}
#fp-nav ul li:first-child a span{background: url("/resources/img/main/left_nav01.svg") center center/cover no-repeat; width: 13px; height: 40px; border-radius: unset; margin: 0; left: 0; top: 0; display: block; opacity: 0.4;}
#fp-nav ul li:first-child a.active span,
#fp-nav ul li:first-child:hover a.active span{background: url("/resources/img/main/left_nav01.svg") center center/cover no-repeat; width: 13px; height: 40px; margin: 0; border-radius: unset;}
#fp-nav ul li:not(:first-child) a span{background: url("/resources/img/main/left_nav02.svg") center center/cover no-repeat; width: 14px; height: 14px; border-radius: 14px; overflow: hidden; position: relative; left: 0; top: 0; display: block; margin: 0; opacity: 0.4;}
#fp-nav ul li:hover a span,
#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span{opacity: 1;}
#fp-nav ul li:not(:first-child):hover a span{width: 14px; height: 14px; margin: 0;} 

.fp-viewing-sec1.on ul li:first-child a span,
.fp-viewing-sec1.on ul li:first-child a.active span,
.fp-viewing-sec1.on ul li:first-child:hover a.active span,
.fp-viewing-sec4 ul li:first-child a span,
.fp-viewing-sec5 ul li:first-child a span{background: url("/resources/img/main/left_nav01_bl.svg") center center/cover no-repeat !important;}

.fp-viewing-sec1.on ul li:not(:first-child) a span,
.fp-viewing-sec4 ul li:not(:first-child) a span,
.fp-viewing-sec5 ul li:not(:first-child) a span{background: url("/resources/img/main/left_nav02_bl.svg") center center/cover no-repeat !important;}

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

.fp-viewing-sec2 .side_box,
.fp-viewing-sec3 .side_box,
.fp-viewing-sec4 .side_box,
.fp-viewing-sec5 .side_box,
.fp-viewing-sec6 .side_box{opacity: 0; visibility: hidden; pointer-events: none;}

.side_box{position: fixed; top: 50%; right: -1000px; transform: translateY(-50%); z-index: 3; height: 620px; opacity: 1; visibility: visible; transition: opacity 0.5s;}
.side_box.on{right: 0; z-index: 9998;}
.side_box img{display: block;}
.side_box .popup_box{z-index: 1;}
.side_box .popup_box,
.side_box .event_box{position: absolute; transition: all 0.3s;}
.side_box .popup_box.on,
.side_box .event_box.on{transform: translateX(60px) !important; z-index: 1;}
.side_box .popup_box{top: 18px;}
.side_box .event_box{bottom: 18px;}
.side_box .popup_box .arrow, 
.side_box .event_box .arrow{position: absolute; width: 10px; height: 18px; left: 24px; bottom: 50px; margin: auto;}
.side_box .popup_box.on .arrow, 
.side_box .event_box.on .arrow{transform: scaleX(-1);}
.side_box .event_box .event_zone{display: none;}
.side_box .popup_box .popup_zone, 
.side_box .event_box .event_zone{padding: 45px 40px; position: absolute; top: 0; left: 60px; display: flex; white-space: nowrap; box-sizing: content-box;}
.side_box .popup_box .popup_zone{background: #001960;}
.side_box .event_box .event_zone{background: #0066b3; top: unset; bottom: 20px; height: 564px;}

.main_content_wrap {background: #fff; position: relative;}

#section2{background: url("../../images/sec02_bg.jpg") center center/cover no-repeat;}
#section2 .txt_wrap{position: absolute; top: 50%; left: 50%; transform: translate(0%,-50%);}
#section2 .txt_wrap .logo{transition: all 0.9s 0.2s ease-out; transform: translateX(60px); opacity: 0; margin-left: -78px; }
#section2 .txt_wrap .txt_inner{}
#section2 .txt_wrap .txt_inner .rolling_box{position: absolute; width: 163px; height: 163px; display: flex; align-items: center; justify-content: center; top: 310px; left: 440px;}
#section2 .txt_wrap .txt_inner .rolling_box div{position: absolute;}
#section2 .txt_wrap .txt_inner .rolling_box div img{display: block;}
#section2 .txt_wrap .txt_inner .rolling_box .txt_rolling{width: 163px; height: 163px; transform-origin: center center; animation: main_scroll 10s infinite linear;}
#section2 .txt_wrap .txt_inner .rolling_box .txt{top: 25px; left: 25px;}
#section2 .txt_wrap .txt_inner .txt_box{margin-left: 20px;}
#section2 .txt_wrap .txt_inner .txt_box h3{transition: all 0.9s 0.7s ease-out; transform: translateX(60px); opacity: 0; color: #05205f; font-size: 86px; font-weight: 300; line-height: 90px;}
#section2 .txt_wrap .txt_inner .txt_box p{transition: all 0.9s 1.2s ease-out; transform: translateY(60px); opacity: 0; color: #fff; font-size: 18px; font-weight: 400; line-height: 30px; margin-top:200px;}
#section2.active .txt_wrap .logo{transform: translateX(0); opacity: 1;}
#section2.active .txt_wrap .txt_inner .txt_box h3{transform: translateX(0); opacity: 1;}
#section2.active .txt_wrap .txt_inner .txt_box p{transform: translateY(0); opacity: 1;}

#section3{background: url("../../images/sec03_bg.jpg") center center/cover no-repeat;}
#section3 .swiper{width:100%;height:100%;}
#section3 .swiper .swiper-button-prev{background: url('../../images/sec03_prev.png') center center/cover no-repeat; width: 92px; height: 92px; top: 50%; left: 50%; margin: 150px 0 0 254px;}
#section3 .swiper .swiper-button-next{background: url('../../images/sec03_next.png') center center/cover no-repeat; width: 92px; height: 92px; top: 50%; left: 50%; margin: 226px 0 0 254px;}
#section3 .swiper .swiper-button-prev:after {display:none;}
#section3 .swiper .swiper-button-next:after {display:none;}
#section3 .swiper .swiper-pagination {position: absolute; bottom: 60px; left: 50%; z-index: 1; display: flex; justify-content: space-between; align-items: center; width:450px; margin-left: -225px;}
#section3 .swiper .swiper-pagination:after {content:'';position:absolute;top:4px;left:0;width:100%;height:1px;background:rgba(255,255,255,.2);}
#section3 .swiper .swiper-pagination .swiper-pagination-bullet {margin:-14px 0 0;width:10px;height:10px;background:#fff;opacity: 1;position:relative;z-index:1;}
#section3 .swiper .swiper-pagination .swiper-pagination-bullet-active {width:25px;height:31px;background:url(../../images/sec03_icon.png) no-repeat;margin:-8px 0 0 -8px;text-align:center;}
#section3 .swiper .swiper-pagination .swiper-pagination-bullet-active:nth-child(1):after {content:'01';font-size:14px;color:#fff;position:absolute;top:40px;left:0;width:25px;}
#section3 .swiper .swiper-pagination .swiper-pagination-bullet-active:nth-child(2):after {content:'02';font-size:14px;color:#fff;position:absolute;top:40px;left:0;width:25px;}
#section3 .swiper .swiper-pagination .swiper-pagination-bullet-active:nth-child(3):after {content:'03';font-size:14px;color:#fff;position:absolute;top:40px;left:0;width:25px;}
#section3 .swiper .swiper-pagination .swiper-pagination-bullet-active:nth-child(4):after {content:'04';font-size:14px;color:#fff;position:absolute;top:40px;left:0;width:25px;}
#section3 .swiper .swiper-pagination .swiper-pagination-bullet-active:nth-child(5):after {content:'05';font-size:14px;color:#fff;position:absolute;top:40px;left:0;width:25px;}
#section3 .swiper .swiper-pagination .swiper-pagination-bullet-active:nth-child(6):after {content:'06';font-size:14px;color:#fff;position:absolute;top:40px;left:0;width:25px;}
#section3 .swiper .swiper-pagination .swiper-pagination-bullet-active:nth-child(7):after {content:'07';font-size:14px;color:#fff;position:absolute;top:40px;left:0;width:25px;}
#section3 .swiper .swiper-pagination .swiper-pagination-bullet-active:nth-child(8):after {content:'08';font-size:14px;color:#fff;position:absolute;top:40px;left:0;width:25px;}
#section3 .swiper .swiper-slide{transition: all 1s; transform: scale(0.5); filter: grayscale(1); width: 1052px; margin:0 -150px 0 -200px;}
#section3 .swiper .swiper-slide-active{transform: scale(1); filter: grayscale(0); width: 1052px; margin:0 -200px 0 -150px; z-index: 1;}
#section3 .swiper .swiper-slide .slide_img{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#section3 .swiper .swiper-slide .txt_box{position: absolute; left: 0; top: 50%; z-index:1; transform: translateY(-28%); display: flex; flex-direction: column; gap: 55px; word-break: keep-all; transition: all 1s; opacity: 0; }
#section3 .swiper .swiper-slide-active .txt_box{opacity: 1;}
#section3 .swiper .swiper-slide .next_sd{font-size: 36px; color: #fff; position: absolute; top: 50%; left: 22%; -transform: translate(-50%,-50%); opacity: 1; width:54%; margin-top: 380px; text-align:right;}
#section3 .swiper .swiper-slide-active .next_sd{opacity: 0;}

#section4{background: url("../../images/sec04_bg.jpg") center center/cover no-repeat;}
#section4 .show_room_wrap {position: absolute; top: 50%; left: 50%; transform: translate(0%,-50%);margin-left:128px;text-align:left;}
#section4 .show_room_wrap .title {font-size:62px;color:#05205f;line-height:72px;font-weight:300;margin-bottom:34px;}
#section4 .show_room_wrap .title h3 {font-size:62px;}
#section4 .show_room_wrap dl {overflow:hidden;padding:15px 0 15px 15px;border-bottom:1px solid #757575;}
#section4 .show_room_wrap dl dt {float:left;font-size:16px;color:#535353;line-height:45px;}
#section4 .show_room_wrap dl dt span {color:#1b1b1b;font-weight:500;}
#section4 .show_room_wrap dl dd {float:right;}

#section5{background: url("../../images/sec05_bg.jpg") center center/cover no-repeat;}
#section5 .s05_wrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);text-align:center;}
#section5 .s05_wrap p {font-size:18px;color:#94a6c2;line-height:30px;padding-top:28px;}
#section5 .s05_wrap .line {width:1px;height:70px;background:#fff;margin:30px auto 20px;}
#section5 .s05_wrap .t1 {font-size:33px;color:#fff;line-height:50px;}
#section5 .s05_wrap .t1 span {font-weight:500;}
#section5 .s05_wrap .t2 {font-size:20px;color:#fff;line-height:30px;}
#section5 .s05_wrap .btn {margin-top:75px;}


.video_layer_wrap .movie_btn_skip {position:absolute; bottom:-20px; left:0%; width:100%; text-align:center; z-index:1002;}


.video_layer_wrap {background:rgba(0,0,0,0.6); width:100%; height:100vh; position:fixed; top:0; left:0; z-index:9999;}
.video_layer_wrap .inner {position:relative; display:flex; flex-direction:column; align-items: center; justify-content: center; width:100%; height:100%;}
.video_layer_wrap .btn_skip {position:absolute; width:100%; left:0; bottom:30px; text-align:center; z-index:1001; }
.video_con {
      position:relative;
      max-width:1120px;
      width:90%;
      /* height:0;  */
      /* padding-bottom:56.2%;  */
}
.video_con video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video_con .movie_btn_sound {display:block; width:25px; height:25px; background-repeat:no-repeat; background-size:100% 100%; background-position:0 0; background-image:url("/resources/img/btn_sound_off.png"); position:absolute; top:50%; right:3%; margin-top:23%; z-index:1001; text-indent: -9999px; overflow:hidden;}
.video_con .movie_btn_sound.on {background-image:url("/resources/img/btn_sound_on.png");}

.mov_responsive {
      position: relative;
      padding-bottom: 56.2%;
      height: 0;
      overflow: hidden;
}
.mov_responsive iframe,
.mov_responsive object,
.mov_responsive embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
}

.intro_wrap {
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      height: 100dvh;
      z-index: 400;
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-align-items: center;
      align-items: center;
      z-index: 99999;
      background: #fff;
}
.intro_wrap.black {background: #fff; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; transition: 1s ease-in-out;}
.intro_wrap.hide {width: 0; opacity: 0;}
.intro_wrap .load_logo {
      opacity: 1;
      width: 400px;
      -webkit-transition: 0.6s ease-in-out;
      -moz-transition: 0.6s ease-in-out;
      transition: 0.6s ease-in-out;
      position: relative;
      overflow: hidden;
}
.intro_wrap .load_logo svg path {fill: none; stroke: #001f5f; stroke-width: 0.7px; stroke-dasharray: 450px; stroke-dashoffset: 450px;}
.intro_wrap .load_logo.show svg path {-webkit-animation: load_animation 1.8s both; animation: load_animation 1.8s both;}
@-webkit-keyframes load_animation {
      0% { stroke-dashoffset: 450px; fill: #fff; }
      60% { stroke-dashoffset: 0; fill: #fff; }
      75% { stroke-dashoffset: 0; fill: #fff; }
      100% { stroke-dashoffset: 0; fill: #001f5f; }
}
@keyframes load_animation {
      0% { stroke-dashoffset: 450px; fill: #fff; }
      60% { stroke-dashoffset: 0; fill: #fff; }
      75% { stroke-dashoffset: 0; fill: #fff; }
      100% { stroke-dashoffset: 0; fill: #001f5f; }
}
.intro_wrap .load_logo::after {
      content: '';
      width: 100%;
      height: 100%;
      display: block;
      background: #fff;
      position: absolute;
      left: -100%;
      top: 0;
      -webkit-transition: 0.6s ease-in-out;
      -moz-transition: 0.6s ease-in-out;
      transition: 0.6s ease-in-out;
}
.intro_wrap .load_logo.hide:after {left: 0;}
@media screen and (max-width: 1024px) {
      .intro_wrap .loading {width: 100%;}
      .intro_wrap .load_logo {width: 50%; max-width: 250px; margin: auto; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
}