@charset "utf-8";


#banner{ width: 100%; height: 4.5rem; overflow: hidden; position: relative; margin-top: 80px; top: 0; background-color: #000;}
#banner .banner{position: relative; height: 100%;}
#banner .banner .video-box{	position: absolute;	left: 0;top: 0;	width: 100%;height: 100%;overflow: hidden;}
#banner .banner .video-box video{position: absolute;width: auto;height: auto;max-width: 100%;min-width: 100%; max-width: calc(100%+1px);min-width: calc(100%+1px); object-fit:fill; top: 50%; left: 50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
#banner .banner-bg{position: relative; height: 100%; background-position: center bottom; background-repeat: no-repeat; background-size: cover;}
#banner a img{width: 100%; display: block;}
#banner .banner-con{text-align: left; position: absolute; width: 90%; max-width: 1400px; margin: 0 auto; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fff;}
#banner .banner-con h2{font-size: .45rem; text-align: center; letter-spacing: .02rem; margin-bottom: .4em; line-height: 1.2em; text-shadow: 0 0 3px rgba(0,0,0,.4);}
#banner .swiper-slide{ position: relative; height: auto !important;}
#banner .swiper-button-prev{left: 10px;opacity: .1; transition: all 0.3s ease-in-out;}
#banner .swiper-button-next{right: 10px;opacity: .1; transition: all 0.3s ease-in-out;}
#banner:hover .swiper-button-prev{opacity: .2; }
#banner:hover .swiper-button-next{opacity: .2; }
#banner .swiper-button-prev:after{font-size: 30px; padding: 15px 10px; color: #fff; border-top-right-radius: 5px; border-bottom-right-radius: 5px;}
#banner .swiper-button-next:after{font-size: 30px; padding: 15px 10px; color: #fff; border-top-left-radius: 5px;border-bottom-left-radius: 5px;}
#banner .swiper-button-prev:hover{opacity: 1;}
#banner .swiper-button-next:hover{opacity: 1;}
#banner .swiper-pagination-bullet-active{background-color: #20A091;}



.module-title{padding: 20px 0 20px 0; display: block; margin: .5rem 0 0; position: relative; }
.module-title h2{color: #20A091; font-size: 2em; line-height: 1.2em; margin-bottom: .1rem; display: block; position: relative;}
.module-title span{height: 3px; position: relative; background: #20A091; border-radius: 3px; margin: 8px 0 10px; width: .5rem; display: block;}
.module-title .more{ position: absolute; right: 0; top: 23px; display: block; text-transform: uppercase; box-sizing: border-box; font-size: .12rem; color: #888; padding:0 0.18rem; line-height: 0.26rem; height: 0.28rem;  border: solid 1px #E4E4E4; border-radius: 0.2rem; transition: all 0.3s ease-in-out; background: #fff no-repeat right 115px center;}
.module-title .more:hover{
	background: #20A091 url(../img/icon-more.png) no-repeat right 15px center;
	border-color: #20A091;
	color: #fff;
	padding:0 40px 0 0.18rem;
}


.module-1{display: flex; justify-content: space-between; padding: 1rem 0;}
.module-1 .left-box{width: 42%;}
.module-1 .left-box img{ border-radius: .12rem; width: 100%;}
.module-1 .right-box{width: 55%;}
.module-1 .right-box h2{color: #20A091; font-size: .28rem;}
.module-1 .right-box p{text-align: justify;}
.module-1 .right-box span{height: 3px; position: relative; background: #20A091; border-radius: 3px; margin: 8px 0 20px; width: .5rem; display: block; }

.module-4{height: 6rem; background: url(../img/about-02.jpg) no-repeat center top; background-size: cover; position: relative;}
.module-4 .con{position: absolute;	width: 12rem; left: 50%; padding: 0.1rem; top: 50%; transform: translate(-50%,-50%); border: 3px solid rgba(255,255,255,0.2);}
.module-4 .con .box{background-color: rgba(255,255,255,0.1); backdrop-filter: blur(10px); text-align: center; color: #fff; padding: .6rem 0;}
.module-4 .con .box h2{	font-weight: bold; font-size: 38px;	line-height: 1.2em;	text-align: center;	color: #fff; text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.06);}
.module-4 .con .more{ background-color: rgba(255,255,255,0.56); margin-top: .3rem; color: #2C7CCB; font-size: 15px; display: inline-block; padding: .03rem .3rem;transition: all 0.3s ease-in-out; border-radius: .4rem;}
.module-4 .con .more:hover{	background-color: rgba(255,255,255,1);}

@media screen and (max-width: 768px) {
	
	#banner{ width: 100%; height: 45vw; min-width: 100%; max-height: 45vw; margin-top: 50px; overflow: hidden; position: relative; top: 0px; background-color: #000;}
	#banner .video-box{	position: absolute;	left: 0; top: 0;	width: 100%;height: 100%;overflow: hidden;	}
	#banner .video-box video{position: absolute;width: auto;height: auto;max-width: 100%;min-width: 100%;max-width:  calc(100%+2px);min-width: calc(100%+2px);object-fit:fill;top: 50%;	left: 50%;	-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
	#banner a img{width: 100%; display: block;}
	#banner .swiper-slide{box-shadow: 0 0 50px rgba(0,0,0,0.8); position: relative; height: auto !important;}
	#banner .swiper-button-prev, #banner .swiper-button-next{display: none;}
	#banner .swiper-pagination{bottom: 5px;}
	#banner .swiper-pagination-bullet-active{background-color: #E40012;}
	#banner .banner-con{text-align: left; position: absolute; width: 90%; left: 5%; top: 40%; transform: translate(0,-10%); color: #fff;}
	#banner .banner-con h2{font-size: .6rem; font-weight: bold; letter-spacing: 2px; line-height: 1.2em; text-shadow: 0 0 3px rgba(0,0,0,.4);}
	#banner .banner-con h4{font-size: .7rem; font-weight: normal; letter-spacing: 1px; position: relative; top: -2px; text-shadow: 0 0 3px rgba(0,0,0,.4);}
	#banner .banner-con h5{font-size: 12px; font-weight: normal; letter-spacing: 2px; position: relative; margin-top: 10px; text-shadow: 0 0 3px rgba(0,0,0,.4);}
	#banner .banner-con span{width: 100px; display: none; height: 32px; text-align: center; padding: 0; line-height: 30px; margin: 5px auto; opacity: .8; box-shadow: 0 0 3px rgba(0,0,0,.4);}
	#banner .banner-con h3{font-size: 14px; font-weight: normal; letter-spacing: 4px; position: relative; text-shadow: 0 0 3px rgba(0,0,0,.4);}
	
	.module-title{padding: 10px 20px 0 ; display: block; margin: .25rem 0 0; position: relative; }
	.module-title h2{color: #000; font-size: .37rem; line-height: 0.6em; text-align: left; margin-bottom: .1rem; display: block; position: relative;}
	.module-title span{height: 2px; position: relative; border-radius: 3px; margin:2px 0 10px; width: 0.5rem; display: block;}
	.module-title .more{ position: absolute; right: 20px; top: 0; text-transform: uppercase; box-sizing: border-box; font-size: 12px; height: 26px; line-height: 24px; color: #888; width: 70px; padding-left: 0; border-radius: 3px; transition: all 0.3s ease-in-out; background: none; }
	.module-title .more:hover{
		background: none;
		border: none;
		color: #fff;
		width: 100%;
	}
	
	
	.module-1{display: flex; justify-content: space-between; padding: 1rem 0;}
	.module-1 .left-box{width: 42%; display: none;}
	.module-1 .left-box img{ border-radius: .12rem; width: 100%;}
	.module-1 .right-box{width: 100%; padding: 20px;}
	.module-1 .right-box h2{color: #20A091; font-size: .33rem;}
	.module-1 .right-box p{text-align: justify;}
	.module-1 .right-box span{height: 3px; position: relative; background: #20A091; border-radius: 3px; margin: 8px 0 20px; width: .5rem; display: block; }


	.module-4{height: 3rem; background: url(../img/about-02.jpg) no-repeat center top; background-size: cover; position: relative;}
	.module-4 .con{position: absolute;	width: 7rem; left: 50%; padding: 0.1rem; top: 50%; transform: translate(-50%,-50%); border: 3px solid rgba(255,255,255,0.2);}
	.module-4 .con .box{background-color: rgba(255,255,255,0.1); backdrop-filter: blur(10px); text-align: center; color: #fff; padding: .6rem 0;}
	.module-4 .con .box h2{	font-weight: bold; font-size: .3rem;	line-height: 1.2em;	text-align: center; color: #fff; text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.06);}
	.module-4 .con .more{ background-color: rgba(255,255,255,0.56); margin-top: .3rem; color: #2C7CCB; font-size: .24rem;  display: inline-block; padding: .05rem .3rem;transition: all 0.3s ease-in-out; border-radius: .4rem;}
	.module-4 .con .more:hover{	background-color: rgba(255,255,255,1);}
}