@charset "utf-8";

#main{width: 100%; overflow: hidden;}
.main{overflow: hidden; width: 100%; }
.mcnt1{overflow: hidden; position: relative;width: 100%; max-width:100%;  height: 100dvh; transition:.3s; overflow: hidden;}
.mcnt1 .mv_owl .item{width: 100%; height: 100%; position: relative; overflow: hidden; }
.mcnt1 .mv_owl .item .mv_img{width: 100%; height: 100dvh;}
.mcnt1 .mv_owl .item .mv_img img{transition:1.2s .2s; width: 100%; height: 100dvh; object-fit:cover;}
.mcnt1 .mv_owl .active .item .mv_img img{scale:1.1; }

.mcnt1 .mv_owl .m_txt{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items:center; justify-content: center; box-sizing: border-box; padding-top:20px;}
.mcnt1 .mv_owl .m_txt h3{position: relative; top: 20px; transition:.6s; font-size: 68px; line-height: 88px; color: #fff;  letter-spacing: -0.02em !important; opacity: 0; margin-bottom: 30px; font-weight: 500; filter:blur(5px); }
.mcnt1 .mv_owl .m_txt p{position: relative; top: 20px; transition:.6s .6s;  font-size: 20px; line-height: 40px; letter-spacing: -0.02em; color: #fff; opacity: 0; filter:blur(5px); }
.mcnt1 .mv_owl .active .m_txt h3,
.mcnt1 .mv_owl .active .m_txt p{opacity: 1; top: 0; filter:blur(0px); scale:1}
.mcnt1 .info-mv{position: absolute; left: 50%; translate: -800px 0; bottom: 80px; z-index: 100; display: flex; flex-wrap:wrap; width: 200px; padding: 0 5px; box-sizing: border-box;}
.mcnt1 .info-mv .mv_bt{vertical-align: middle; line-height: 0; display: flex; align-items:center; cursor: pointer;}
.mcnt1 .info-mv .mv_bt img{display: inline-block; vertical-align: middle; transition:.3s;}
.mcnt1 .info-mv .mv_bt:hover img{rotate:-20deg; }
.mcnt1 .info-mv .mv_prev:hover img{rotate:20deg;}
.mcnt1 .info-mv .mv_num{display: flex; align-items:center; width: 140px; padding: 1px 2px; box-sizing: border-box;}
.mcnt1 .info-mv .mv_num span{position: relative; width: 50%; font-size: 14px; line-height: 1.5; color: #fff; letter-spacing: -0.03em; text-align: center;}
.mcnt1 .info-mv .mv_num span:first-child:after{position: absolute; content: ''; width: 1px; height: 14px; background: rgba(255,255,255,0.3); right: 0; top: 4px;}
.mcnt1 .info-mv .mv-bar{position: relative; width: calc(100% + 10px); height: 2px; margin-left: -5px; background: rgba(255,255,255,0.3); margin-top: 24px;}
.mcnt1 .info-mv .mv-bar span{position: absolute; left: 0; top: 0; display: block; width: 0%; height: 2px; background: #fff; }
.mcnt1 .info-mv .mv-bar span.on{ animation: 5s ease 0s infinite normal none running; animation-name:mvBar; animation-timing-function : linear;}
.mcnt1 .info-mv .mv-bar span.on2{ animation: 5s ease 0s infinite normal none running; animation-name:mvBar2; animation-timing-function : linear;}
@keyframes mvBar {0% {width: 0; } 100% {width: 100%;} }
@keyframes mvBar2 {0% {width: 0; } 100% {width: 100%;} }
.mcnt1 .mv_owl .owl-nav {display: none;}
.mcnt1 .mv_owl .owl-dots{display: none;}
.main-tit h3{font-size: 68px; line-height: 1.5; color: #111; font-weight: 500; letter-spacing: 0;}
.main_more{display: flex; justify-content: flex-end; margin-top: 40px;}
.main_more > a{position: relative; font-family:"Wanted Sans Variable"; font-size: 18px; line-height: 1; color: #111; letter-spacing: -0.02em; padding: 0 37px;  overflow: hidden; font-weight: 400; transition:.3s;}
.main_more > a:before,
.main_more > a:after{position: absolute; content: ''; width: 15px;	height: 15px; background: url(../img/main/mcnt2_3.png) center no-repeat; left: -37px; top: 0; transition:.3s;}
.main_more > a:after{left: auto; right: 0px }
.main_more > a:hover{padding-right: 0;}
.main_more > a:hover:before{left: 0;}
.main_more > a:hover:after{right: -37px;}

.mcnt2 {overflow: hidden;}
.mcnt2_cnt{display: flex; flex-wrap:wrap; margin-top: 55px;}
.mcnt2_cnt > li{width: 22.18%; margin-right: 3.76%; border-radius: 20px; overflow: hidden;}
.mcnt2_cnt > li:nth-child(4n+4){margin-right: 0;}
.mcnt2_cnt > li > a{position: relative;}
.mcnt2_cnt > li > a .tbx{position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; background: rgba(16,53,84,0.8); opacity: 0; transition:.3s; padding: 70px 50px 0; box-sizing: border-box;}
.mcnt2_cnt > li > a .tbx p{font-family:"Wanted Sans Variable"; font-size: 24px; line-height: 39px; letter-spacing: -0.02em; color: #fff; font-weight: 500; word-break: keep-all;}
.mcnt2_cnt > li > a .tbx:after{position: absolute; content: ''; width: 35px; height: 35px; background: url(../img/main/mcnt2_2.png) center no-repeat; right: 50px; bottom: 50px;}
.mcnt2_cnt > li:hover > a .tbx{opacity: 1;}
.mcnt3{display: flex; height: 100dvh; position: relative; }
.mcnt3 > a{position: relative; color: #fff; transition:.8s; width: 30%; background: url(../img/main/mcnt3_bg1.jpg) center no-repeat; filter: grayscale(1); }
.mcnt3 > a:before{position: absolute; content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.35); left: 0; top: 0; transition:.8s;}
.mcnt3 > a:after{position: absolute; content: ''; width: 61px; height: 61px; background: url(../img/main/mcnt3_more.png) center no-repeat; left: 80px; top: 80px; opacity: 1; transition:.8s;}
.mcnt3 > a:first-child{padding-left: 160px;}
.mcnt3 > a:last-child{ background: url(../img/main/mcnt3_bg2.jpg) center no-repeat; background-position: 60%, center;}
.mcnt3 > a.on:last-child{padding-left: 100px;}
.mcnt3 > a .tbx{transition:.8s; }
.mcnt3 > a .tbx .box{/* text-align: right;  */ text-align: left;   width: 100%; padding-right: 80px; margin-bottom: 110px;  filter: grayscale(0);}
.mcnt3 > a .tbx small{font-size: 20px; line-height: 1; color: #fff; font-weight: 400; letter-spacing: -0.02em; display: block; margin-bottom: 36px; padding-left: 425px; transition:.8s;}
.mcnt3 > a .tbx h4{font-size: 40px; line-height: 1.5; color: #fff; letter-spacing: 0; transition:.8s; margin-bottom: 0; font-weight: 500; padding-left: 193px;}
.mcnt3 > a .tbx p{font-size: 0; line-height: 0; transition:.8s; }
.mcnt3 > a .tbx span{transition:.8s; opacity: 0; width: 0; bottom: 0; overflow: hidden;}
.mcnt3 > a .tbx {font-family:"Wanted Sans Variable"; display: flex; width: 100%; height: 100%; align-items: flex-end; } 
.mcnt3 > a.on {width: 70%; filter: grayscale(0);}
.mcnt3 > a.on:before{opacity: 0;}
.mcnt3 > a.on:after{opacity: 0;}
.mcnt3 > a.on .tbx .box{text-align: left; }
.mcnt3 > a.on .tbx small{padding-left: 0;}
.mcnt3 > a.on .tbx h4{font-size: 68px; line-height: 1.5; color: #fff; letter-spacing: 0; font-weight: 500; margin-bottom: 31px; padding-left: 0;}
.mcnt3 > a.on .tbx p{font-size: 20px; line-height: 40px; color: #fff; letter-spacing: -0.02em; display: block;}
.mcnt3 > a.on .tbx span{display: inline-block;	position: relative; font-size: 18px; letter-spacing: -0.02em; color: #fff; line-height: 1; padding: 0 33px; padding-left: 0; overflow: hidden; transition:.8s; margin-top: 254px; width: auto; height: auto; opacity: 1;}
.mcnt3 > a.on .tbx span:before,
.mcnt3 > a.on .tbx span:after{position: absolute; content: ''; width: 15px; height: 15px; background: url(../img/main/mcnt3_1.png) center no-repeat; left: -33px; top: 0; transition:.3s;}
.mcnt3 > a.on .tbx span:after{left: auto; right: 0;}
.mcnt3 > a.on .tbx span:hover{padding-right: 0; padding-left: 33px;}
.mcnt3 > a.on .tbx span:hover:before{left: 0;}
.mcnt3 > a.on .tbx span:hover:after{right: -33px;}
.mcnt4_wrap{position: relative; z-index: 19;}
.mcnt4 figure{position: relative; margin-top: 53px; border-radius: 20px; overflow: hidden;}
.mcnt4 figure figcaption{position: absolute; right: 0; bottom: 86px; font-size: 32px; line-height: 52px; color: #fff; letter-spacing: -0.02em; font-weight: 400; margin-right: 140px;}
.mcnt5_wrap{position: relative; z-index: 10;}
.mcnt5_wrap:before{position: absolute; content: ''; left: 0; bottom: 0px; background: url(../img/main/mcnt4_bg.jpg) center bottom no-repeat; width: 100%; height: 1700px; z-index: -1;}
.mcnt5 {display: flex; flex-wrap:wrap; height: 100dvh; align-items:center; overflow: hidden;}
.mcnt5 .tbx{width: 62.5%; box-sizing: border-box; padding-right: 16%; font-family:"Wanted Sans Variable"; }
.mcnt5 .tbx .box h4{font-size: 32px; line-height: 1.5; color: #111; letter-spacing: -0.02em; font-weight: 500; border-bottom: 5px solid #111; padding-bottom: 30px; margin-top: 83px; margin-bottom: 40px;}
.mcnt5 .tbx .box p{font-size: 20px; line-height: 40px; letter-spacing: -0.02em; color: #666; margin-bottom: 30px;}
.mcnt5 .tbx .box a{display: inline-block; width: 260px; line-height: 88px; border-radius: 50px; border: 1px solid #111; vertical-align: middle; box-sizing: border-box; text-align: center; margin-top: 40px;  font-size: 18px; letter-spacing: -0.02em; color: #111; transition:.3s;}
.mcnt5 .tbx .box a i{display: inline-block; vertical-align: middle; line-height: 0; margin-left: 15px; transition:.3s;}
.mcnt5 .tbx .box a:hover i{translate:5px -5px}
.mcnt5 .mcnt5_slick{width: 1%; flex:1 1 auto; height: 100%; }
.mcnt5 .mcnt5_slick .slider-main{height: 100%;  display: flex; align-items:center; justify-content: flex-end; text-align: right;}
.mcnt5 .mcnt5_slick .slider-main .slick-list{overflow: visible;}
.mcnt5 .mcnt5_slick .slick-slide{margin: 40px 0; outline:none;}
.mcnt5 .mcnt5_slick .slick-slide img{transition:1s; position: relative; translate:0px 0; display: inline-block;}
.mcnt5 .mcnt5_slick  .slick-active img{translate:-200px 0}

#main #fp-nav.fp-right{right: 67px; margin-top: 20px; transition:.3s;}
#main  #fp-nav ul li a span, #main  .fp-slidesNav ul li a span{width: 8px; height: 8px; background: #ddd;}
#main #fp-nav ul li a.active span, #main .fp-slidesNav ul li a.active span, #main #fp-nav ul li:hover a.active span,  #main .fp-slidesNav ul li:hover a.active span{background: #103554; margin: -2px 0 0 -2px;}
#main #fp-nav ul li:hover a span, #main .fp-slidesNav ul li:hover a span{margin: -2px 0 0 -2px;}
#main #fp-nav ul li, #main .fp-slidesNav ul li{width: 8px; height: 8px; margin-bottom: 42px;}
#main #fp-nav ul li:last-child, #main .fp-slidesNav ul li:last-child{display: none;}



.fp-viewing-Footer #fp-nav.fp-right{opacity: 0; z-index: -1000;}