@charset "utf-8";

#main{max-width:100%; overflow: hidden;}
main{ padding-top:104px; background: #F8F8F8; }

.main-tit{display: flex; flex-direction: column;}
.main-tit h4{color: #222;font-family: "Anton SC";font-size: 100px;font-weight: 400;line-height: normal;letter-spacing: 5px; margin-bottom: 47px;}
.main-tit b{color: #222;font-size: 20px;font-weight: 800;line-height: normal;letter-spacing: -0.4px; margin-bottom: 15px;}
.main-tit p{color: #888; font-size: 18px; font-weight: 500; line-height: 157.5%; /* 28.35px */ letter-spacing: -0.36px;}
.main-tit .link-box{margin-top: 73px;}
.main-tit .link-box > a{display: flex; align-items:center; color: var(--main-color); font-size: 16px;font-weight: 600; line-height: normal; gap:37px; transition:.3s;}
.main-tit .link-box > a i{width: 62px; height: 62px; box-sizing: border-box; border: 1px solid var(--main-color); display: flex; align-items:center; justify-content: center; rotate:45deg; border-radius: 20px;transition:.3s; }
.main-tit .link-box > a i svg{rotate:-45deg; transition:.3s;}
.main-tit .link-box > a i svg path{transition:.3s;}
.main-tit .link-box > a:hover {
	i{background: var(--main-color); }
	i svg path{stroke:#fff;}
}

.mcnt1{display: flex; gap:20px; height: 800px; translate:10% 0%; filter:blur(15px); transition:.8s; opacity: 0;} 
.mcnt1.on{translate:0% 0; opacity: 1; filter:blur(0px)}

.mcnt1 .box{position: relative; flex:9.41%; background: url(../img/main/mcnt1-1.jpg) center no-repeat; border-radius: 10px; overflow: hidden; cursor: pointer; transition:.8s;}
.mcnt1 .box:after{position: absolute; content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.4); left: 0; top: 0; transition:.3s;}
.mcnt1 .box .more{position: absolute; left: 50%; top: 50%; translate:-50% -50%; z-index: 1; width: 62px; height: 62px; background: rgba(230, 0, 18, 0.7); display: flex; align-items:center; justify-content: center; rotate:45deg; border-radius: 20px; transition:.3s;}
.mcnt1 .box .more img{rotate:-45deg; transition:.3s;}
.mcnt1 .box .more:hover img{rotate:45deg;}
.mcnt1 .box .tbx {display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 100%; padding: 0 0 150px 170px; opacity: 0; }
.mcnt1 .box .tbx > *{ opacity: 0; translate:0 50px; filter:blur(10px); }
.mcnt1 .box .tbx b{color: #FFF;text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);font-family: "Anton SC";font-size: 100px;font-weight: 400;line-height: normal; }
.mcnt1 .box .tbx p{color: #FFF;font-size: 28px;font-weight: 600;line-height: normal; letter-spacing: -0.56px; }
.mcnt1 .box1{background: url(../img/main/mcnt1-1.jpg) center no-repeat;}
.mcnt1 .box2{background: url(../img/main/mcnt1-2.jpg) center no-repeat;}
.mcnt1 .box3{background: url(../img/main/mcnt1-3.jpg) center no-repeat;}
.mcnt1 .box.on{
	&{flex:79.02%;}
	&:after{opacity: 0;}
	& .more{opacity: 0;}
	& .tbx{opacity: 1;}		
	& .tbx > b{transition:.8s .8s;}
	& .tbx > p{transition:.8s 1s; }	
	& .tbx > *{opacity: 1; translate:0 0; filter:blur(0px);}	
}

.mcnt2{border-radius: 10px; background: #FFF; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.04); max-width:1826px; margin-top: 72px; }
.mcnt2 .wrap2{display: flex; flex-wrap:wrap; justify-content: space-between; padding-top: 65px; padding-bottom: 50px;}
.mcnt2 .wrap2 .rbx .img-box{position: relative; width: 878px; height: 744px; }
.mcnt2 .wrap2 .rbx .img-box .item{position: absolute; left: 50%; top: 50%; margin-left: -168px; margin-top: -211px; overflow: hidden; border-radius: 10px; box-shadow: 20px 20px 4px 0 rgba(0, 0, 0, 0.10); border: 1px solid rgba(255, 255, 255, 0.60); transition:.6s;}
.mcnt2 .wrap2 .rbx .img-box .item1{translate:0 160px; z-index: 10;}
.mcnt2 .wrap2 .rbx .img-box .item2{translate:-280px 87px; z-index: 9;}
.mcnt2 .wrap2 .rbx .img-box .item3{translate:-208px -123px; z-index: 8;}
.mcnt2 .wrap2 .rbx .img-box .item4{translate:193px -163px; z-index: 6;}
.mcnt2 .wrap2 .rbx .img-box .item5{translate:263px 47px; z-index: 7;}

.mcnt3{position: relative; background: rgba(190, 0, 15, 1); z-index: 1; padding: 132px 0; height: 1089px; margin-top: 78px; overflow: hidden;}
.mcnt3 > svg{position: absolute; width: 1052px; height: 1130px; left: -170px; top: -50px; z-index: -1;}
.mcnt3 .top_box{display: flex; flex-wrap:wrap; justify-content: space-between; align-items:flex-end;} 
.mcnt3 .top_box .main-tit h4{margin-bottom: 0;}
.mcnt3 .top_box .mcnt3-controll{display: flex; align-items:center; gap:39px; margin-right: -55px; position: relative; top: -5px;} 
.mcnt3 .top_box .mcnt3-controll span{width: 62px; height: 62px; box-sizing: border-box; border: 1px solid #fff; display: flex; align-items:center; justify-content: center; rotate:45deg; border-radius: 20px; cursor: pointer; transition:.3s; } 
.mcnt3 .top_box .mcnt3-controll span svg{rotate:-45deg; transition:.3s; }
.mcnt3 .top_box .mcnt3-controll span:hover{
	&{background: #fff;}
	& svg path{stroke:var(--main-color); }
}
.mcnt3 .owl-wrap{margin-top: 75px; box-sizing: border-box; padding-right: 280px;}
.mcnt3 .owl-wrap .owl-carousel .owl-stage-outer{overflow: visible;}
.mcnt3 .owl-wrap .item{border-radius: 10px; overflow: hidden; transition:.3s;}
.mcnt3 .owl-wrap .before .item{opacity: 0; 	}

.mcnt3 .owl-wrap .item:hover{translate:0 -50px}
.mcnt3 .owl-wrap .item .tbx{display: flex; flex-direction: column; align-items: stretch; text-align: center; padding: 36px 15px 40px; box-sizing: border-box; background: #fff;}
.mcnt3 .owl-wrap .item .tbx b{color: #222;font-size: 20px;font-weight: 800;line-height: normal;letter-spacing: -0.4px; }
.mcnt3 .owl-wrap .item .tbx p{color: #888; font-size: 18px; font-weight: 500; line-height: normal; letter-spacing: -0.36px; margin: 23px 0 6px;}
.mcnt3 .owl-wrap .item .tbx span{color: #E60012;font-size: 16px;font-weight: 500;line-height: normal;letter-spacing: -0.32px;}
.mcnt3 .owl-nav{display: none;}