@charset "utf-8";

.main{max-width:100%; overflow: hidden;}
.mcnt1{overflow: hidden; position: relative;width: 100%; max-width:100%;  height: 100vh !important; transition:.3s; }
.mcnt1 .item{width: 100%; height: 100vh; position: relative; overflow: hidden; }
.mcnt1 .item .mv_img{width: 100%; height: 100%;}
.mcnt1 .item .mv_img img{width: 100%; height: 100%; object-fit:cover; transition:2.2s; transform:scale(1.1) rotate(0.1deg)} 
.mcnt1 .active .item .mv_img video,
.mcnt1 .active .item .mv_img img{ transform: scale(1) rotate(0deg); }
.mcnt1 .item .m_txt {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; display: flex; align-items:center; padding-top: 47px;}
.mcnt1 .item .m_txt .tit{display: flex; flex-direction: column; gap:21px;  position: relative; top: 50px; opacity: 0; transition:.6s;  filter:blur(5px); margin-bottom: 50px;}
.mcnt1 .item .m_txt .tit p{color: #FFF; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.36); font-size: 80px; font-weight: 200; letter-spacing: -1.6px; line-height: 1;  }
.mcnt1 .item .m_txt .tit b{color: #FFF;  font-weight: 700; letter-spacing: -1.6px; line-height: 1;}
.mcnt1 .item .m_txt .box > p{ color: #FFF; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.58); font-size: 24px; font-weight: 400; line-height: 40px;  letter-spacing: -0.48px; position: relative; top: 30px; transition:.6s .3s; opacity: 0;	filter:blur(5px)}
.mcnt1 .active .item .m_txt *{opacity: 1; filter:blur(0px); top: 0;}
.mcnt1 .active .item .m_txt .box > p{opacity: 1; filter:blur(0px); top: 0;}
.mcnt1 .mv-controll{position: absolute; left: 50%; translate:-50% 0;bottom: 20.6vh; z-index: 15; display: flex; align-items:center; max-width:1260px; width: 100%;}
.main-num{display: flex; flex-wrap:wrap; align-items:center; margin-right: 16px;}
.main-num span{color: #FFF; font-size: 14px; font-weight: 500; line-height: 130%; }
.main-num b{color: #FFF; font-size: 14px; font-weight: 500; line-height: 130%; margin: 0 5px;}
.mcnt1 .mv-controll .line-bar{position: relative; width: 159px; height: 3px; border-radius: 5px; background: rgba(255, 255, 255, 0.30); }
.mcnt1 .mv-controll .line-bar i{position: absolute; display: block; left: 0; top: 0;	width: 20%; height: 3px; background: #FFF; left: 0; top: 0;  border-radius: 5px;}
.mcnt1 .mv-btn-wrap{display: flex; align-items:center; gap:4px; margin-left: 3px;}
.mcnt1 .mv-btn-wrap .btn.next:hover{translate:5px 0;}
.mcnt1 .mv-btn-wrap .mv-btn {position: relative; width: 24px; height: 28px;}
.mcnt1 .mv-btn-wrap .mv-btn > *{position: absolute; width: 24px; height: 28px; display: flex; align-items:center; justify-content: center; text-align: center; line-height: 0; left: 0; top: 0;	transition:.3s; opacity: 1; z-index: 2; cursor: pointer;} 
.mcnt1 .mv-btn-wrap .mv-btn > *.on{opacity: 0; z-index: 0;}
.mcnt1 .scroll-mv{position: absolute; right: 40px; bottom: 31px; z-index: 10;  z-index: 100; cursor: pointer; animation: 1.2s ease 0s infinite normal none running; animation-name:mvScroll;}
@keyframes mvScroll {0% {transform:translateY(0)} 60% {transform:translateY(-21px)} 100% {transform:translateY(0)} }

.mcnt2{position: relative; background: url(../img/main/mcnt2-bg.jpg) center / cover no-repeat; height: 100vh; display: flex; align-items:center; border-radius: 0 0 600px 0; overflow: hidden; position: relative; z-index: 15;}
.mcnt2 .tbx{display: flex; flex-direction: column; }
.mcnt2 .tbx .tit{margin-bottom: 52px;}
.mcnt2 .tbx .tit p{color: #FFF; font-size: 47px; font-weight: 200; line-height: 71px; letter-spacing: -0.94px;}
.mcnt2 .tbx .tit p b{ text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); font-size: 47px; font-weight: 700; line-height: 71px;  letter-spacing: -0.94px;}
.mcnt2 .tbx .txt {display: flex; flex-direction: column; gap:52px; margin-bottom: 84px;}
.mcnt2 .tbx .txt b{color: #FFF; font-size: 24px; font-weight: 600; line-height: 40px; letter-spacing: -0.48px;}
.mcnt2 .tbx .txt p{color: #FFF; font-size: 20px; font-weight: 400; line-height: 38px; letter-spacing: -0.4px;}
.mcnt2 .tbx > p{color: #FFF;  font-size: 20px; font-weight: 700; line-height: 38px;  letter-spacing: -0.4px; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font;}

.mcnt3{position: relative; padding: 141px 0 222px;  z-index: 10;}
.mcnt3 big{position: absolute; right: 0; bottom: 0;}
.mcnt3:before{position: absolute; content: ''; width: 598px; height: 598px; background: url(../img/main/mcnt3-bg1.png) center no-repeat; right: -209px; top: -273px; z-index: -1;}
.mcnt3:after{position: absolute; content: ''; width: 850px; height: 850px; background: url(../img/main/mcnt3-bg2.png) center no-repeat; left: -432px; top: 64px; z-index: -1;}

.mcnt3 .tit{display: flex; flex-direction: column; text-align: center; gap:35px;}
.mcnt3 .tit b{color: #0D3A5C; font-size: 34px; font-weight: 200; line-height: 61px; letter-spacing: -0.68px;}
.mcnt3 .tit b strong{font-weight: 700;}
.mcnt3 .tit b strong span{position: relative; }
.mcnt3 .tit b strong span:before{position: absolute; content: ''; left: 50%; top: -14px; width: 4px; height: 4px; border-radius: 50%; translate:-50% 0; background: #0D3A5C; transition:.3s;}

.mcnt3 .tit > p{color: #666; text-align: center; font-size: 24px; font-weight: 400; line-height: 40px;  letter-spacing: -0.48px;}
.mcnt3 .cnt{display: flex; flex-wrap:wrap; gap:40px; margin-top: 96px;}
.mcnt3 .cnt > a{flex:1; position: relative; display: flex;     justify-content: center; height: 485px; flex-direction: column; align-items: center; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); z-index: 1; transition:.4s;}
.mcnt3 .cnt > a:before{position: absolute; content: ''; width: 100%; height: 100%;  background: linear-gradient(0deg,rgba(0, 0, 0, 0.20) 0%,rgba(0, 0, 0, 0.20) 100% ); ;left: 0; top: 0; transition:.4s; }
.mcnt3 .cnt > a:after{position: absolute; content: ''; width: 100%; height: 100%;  background: #0D3A5C; opacity: 0.8 ;left: 0; top: 0; transition:.4s; opacity: 0;}
.mcnt3 .cnt > a > img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit:cover; z-index: -1;}
.mcnt3 .cnt > a .tit{position: relative; z-index: 1; color: #FFF; text-align: center; font-size: 24px;  font-weight: 700; line-height: 40px;  letter-spacing: -0.48px; padding-bottom: 120px; transition:.4s;}
.mcnt3 .cnt > a .link-box{position: absolute; left: 50%; bottom: 81px; translate:-50% 0; display: flex; align-items:center; justify-content: center; flex-direction: column; gap:7px; z-index: 1; opacity: 0; transition:.4s}
.mcnt3 .cnt > a .link-box > p{color: #FFF; text-align: center; font-size: 18px; font-weight: 600; line-height: 33px;  letter-spacing: -0.36px;}
.mcnt3 .cnt > a:hover{border-radius: 260px;
	&:before{opacity: 0;}
	&:after{opacity: 0.8;} 
	.tit{padding-bottom: 240px;}
	.link-box{opacity: 1;}
}

.mcnt4 {background: #F2F2F2; padding: 140px 0 155px;}
.mcnt4 > div > .tit{display: flex; flex-direction: column;text-align: center; align-items:center; justify-content: center; gap:20px; margin-bottom: 120px;}
.mcnt4 > div > .tit b{color: #0D3A5C;  font-size: 34px; font-weight: 700; line-height: 120%; }
.mcnt4 > div > .tit p{color: #666; font-size: 22px; font-weight: 400; line-height: 160%; }
.mcnt4 .flex-box{display: flex; flex-wrap:wrap; gap:60px; }
.mcnt4 .flex-box .box{flex:1;}
.mcnt4 .flex-box .box .dt{display: flex; flex-wrap:wrap;  display: flex; justify-content: space-between; align-items:center;  height: 64px; padding: 0 32px 0 30px;  gap: 10px; border-radius: 5px; background: #0D3A5C;}
.mcnt4 .flex-box .box .dt .tit{display: flex; align-items:center; gap:18px;}
.mcnt4 .flex-box .box .dt .tit span{color: #FFF;font-size: 20px; font-weight: 400; letter-spacing: -0.4px;}
.mcnt4 .flex-box .box .dt .tit p{color: #FFF; font-size: 30px; font-weight: 600; letter-spacing: -0.6px;}
.mcnt4 .flex-box .box .dt > a{line-height: 0;}
.mcnt4 .flex-box .box .dt > a svg{transition:.3s;}
.mcnt4 .flex-box .box .dt > a:hover svg{rotate:-180deg;}
.mcnt4 .flex-box .box .dd{padding: 20px 0; border-bottom: 2px solid #0D3A5C;}
.mcnt4 .flex-box .box .dd ul{display: flex; flex-direction: column; gap:10px}
.mcnt4 .flex-box .box .dd ul > li {list-style:disc; margin-left: 30px;}
.mcnt4 .flex-box .box .dd ul > li > a{display: flex; align-items:center; padding: 6px 10px 6px 0; ;position: relative; }
.mcnt4 .flex-box .box .dd ul > li > a p{color: #222; font-size: 22px; font-weight: 400; line-height: 160%;  transition:.3s; width: calc(100% - 110px); transition:.3s;}
.mcnt4 .flex-box .box .dd ul > li > a span{color: #999; font-size: 16px; font-weight: 400; line-height: 160%; width: 110px;}
.mcnt4 .flex-box .box .dd ul > li > a:hover{
	p{font-weight: 700;}
}