@charset "utf-8";
#header .menu-con>ul>li.nav9>a>span.cn{
	background-color: #3c7fa3;
}

#wrap{background: #fff;}
#banner{ width: 100%; min-width: 1024px; overflow: hidden; position: relative;}
#banner img{width: 100%; display: block;}
#banner .banner-bg{position: relative; height: 130px; background-position: center center; background-repeat: no-repeat; background-size: cover;}
#banner .banner-con{text-align: left;  position: absolute;  margin: 0 auto; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fff;}
#banner .banner-con h2{font-size: .48rem; font-weight: bold;  line-height: 1.2em; text-shadow: 0px 3px 15px rgba(0,0,0,0.16);}
#banner .banner-con h4{font-size: .2rem; font-weight: bold; text-transform: uppercase; position: relative; top: 0; text-shadow: 0 0 3px rgba(0,0,0,.4);}
#banner .swiper-slide{box-shadow: 0 0 50px rgba(0,0,0,0.8);}
#banner .swiper-button-prev,#banner .swiper-button-next{margin-top: 30px;}
#banner .swiper-button-prev{left: 0;}
#banner .swiper-button-next{right: 0;}
#banner .swiper-button-prev:after{font-size: 22px;padding: 15px 10px;color: #fff;border-top-right-radius: 5px;border-bottom-right-radius: 5px;}
#banner .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after{font-size: 22px;padding: 15px 10px;color: #fff;border-top-left-radius: 5px;border-bottom-left-radius: 5px;}


.module-title{padding: .5rem 0 .2rem 0; display: block; position: relative; }
.module-title h2{color: #13284A; font-size: .33rem; line-height: 1.5em; display: block; position: relative;}
.module-title .more{ box-sizing: border-box; font-size: .16rem; color: #000; width: 1rem; text-align: center; line-height: .4rem; height: .42rem;  border: solid 1px #DBDBDB; transition: all 0.3s ease-in-out; background: #fff; position: absolute; right: 0; top: .65rem;}
.module-title .more:hover{	background: #13284A ; border-color: #13284A;	color: #fff;}


.main{
	margin: 20px 0 0;
	background: url(../img/login-bg.svg) no-repeat center top; background-size: 100%;
}
.main .title{
}
.main .title h2{
	font-size: .32rem; 
	font-family: AucmaSharpSans;
	text-transform: uppercase; 
	font-weight: bold; 
	display: inline-block;
	line-height: 1.2em; 
}
.module-1 .content{
    position: relative;
    z-index: 2;
    padding: .2rem 0;
    border-radius: .3rem;
    background-color: #fff;
    margin-bottom: .7rem;
    margin-top: .3rem;
    line-height: 1.5em;
    box-shadow: 0 0.05rem .3rem rgba(0,0,0,0.02);
}

.module-2{
	position: relative;
}
.module-2 .mainBox{
	position: relative;
}
	.main .form-box{
		position: relative;
		z-index: 2;
		padding: .2rem .8rem 1rem 0;
		background-color: #fff;
		margin-bottom: .7rem;
		margin-right: 460px;
		margin-top: .1rem;
	}
	.main .form-box .form-list{
		overflow: hidden;
		margin-bottom: 20px;
	}
	.main .form-box .form-list a:hover{color: #E31111}
	.main .form-box .form-title{
		padding: 15px 0;
		color: #888;
		font-size: .8em;
	}
	.main .form-box .form-content{
		position: relative;
		width: 100%;
	}
	.main .form-box .form-content input{
		width: 100%;
		border: 1px solid #f1f1f1;
		padding: 15px 25px;
		border-radius: 2px;
		position: relative;
		font-size: 1em;
	}
	.main .form-box .form-content textarea{
		width: 100%;
		border: 1px solid #f1f1f1;
		padding: 15px 25px;
		border-radius: 2px;
		position: relative;
		font-size: 1em;
	}
	.main .form-box .form-content select{
		width: 100%;
		background-color: #fff;
		border: 1px solid #f1f1f1;
		padding: 15px 25px;
		border-radius: 10px;
		font-size: 1em;
	}
	.main .form-box .form-content.form-select::before{
		content: "";
		border: 3px solid #333;
		border-radius: 2px;
		border-left: 0;
		border-bottom: 0;
		width: 6px;
		height: 6px;
		position: absolute;
		right:20px;
		top: 50%;
		transform: translate(0,-55%)  rotate(135deg);
		
	}
	.main .form-box .form-info{
		padding: 10px 0 20px 230px;
		color: #888;
	}

	.main .form-box .form-list.checkbox{
		display: flex;
		padding: 5px 0;
	}
	
	
	.main .form-box .form-list.submit{
	}
	.main .form-box .form-list.submit button{width: 208px; overflow: hidden; height: 46px; position: relative; left: 0; margin-top: 50px; line-height: 46px; text-align: center; display: block; font-size: 16px; color: #fff; border-radius: 5px; cursor: pointer;}
	.main .form-box .form-list.submit button span{width: 300%; height: 46px; position: absolute; z-index: 0; right: 0; line-height: 46px; background: linear-gradient(90.19deg, #0077AF -94.81%, #03547A 100.62%); border-radius: 5px; transition: all 0.2s ease-in-out;}
	.main .form-box .form-list.submit button b{position: relative;}
	.main .form-box .form-list.submit button:hover span{ right: -400px;}

	
	.checkbox[type="checkbox"] {
	  position: relative;
	  top: -1px;
	  margin-right: 10px;
	  padding: 0;
	  width: 22px;
	  height: 22px;
	  background: #FFF;
	  border: 1px solid #D1D1D1;
	  overflow: hidden;
	  border-radius: 5px;
	  transition: all .3s;
	  -webkit-appearance: none;
	  appearance: none;
	  cursor: pointer;
	}
	
	.checkbox[type=checkbox]:focus {
		border: 1px solid #1D1D1F
	}
	
	.checkbox[type=checkbox]:checked {
		background: #0077AF;
		border-color: #0077AF;
		border: 0;
		-webkit-appearance: none;
		appearance: none
	}
	
	.checkbox[type=checkbox]:checked:after {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 20px;
		height: 15px;
		background-position: center center;
		background-repeat: no-repeat;
		background-image: url(../img/check-white.svg);
		background-size: 70%;
		transform: translate(-50%, -50%);
		content: ''
	}
	
.content-box{
	position: absolute;
	width: 420px;
	background-color: #f8f8f8;
    border: 1px solid #f1f1f1;
	right: 0;
	top: 0;
	padding: .4rem .3rem .7rem;
}
.content-box h2{
	font-size: 1.3em;
	margin-bottom: .2rem;
}
.content-box .con div{
	display: flex;
	align-items: flex-start;
	padding: .1rem 0;
}
.content-box .con div span{
	width: 30px;
	height: 30px;
	border-radius: 20px;
	border: 2px solid #666;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: .1rem;
	position: relative;
	top: -0;
}
.content-box .con div b{
	font-weight: normal;
	flex: 1;
	font-size: 0.9em;
}
.content-box .con div a:hover{
	color: #E31111;
}




@media screen and (max-width: 768px) {

	#banner{ width: 100%; height: 50vw; min-width: 100%; overflow: hidden; position: relative; top: 0px;}
	#banner .banner-bg{background-size: cover; height: 50vw; background-position: right -35vw top;}
	#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: 0px;}
	#banner .swiper-pagination-bullet-active{background-color: #1576D1;}
	#banner .banner-con{text-align: center; position: absolute; width: 100%; left: 0%; top: 56%; transform: translate(0,0%); color: #fff;}
	#banner .banner-con h2{font-size: .8rem; padding-left: 0; letter-spacing: 2px; line-height: 1.2em; text-shadow: 0 0 3px rgba(0,0,0,.4);}
	#banner .banner-con h4{font-size: .7rem; padding-left: 0; font-weight: lighter; letter-spacing: 1px; position: relative; top: -2px; text-shadow: 0 0 3px rgba(0,0,0,.4); display: none;}
	
	
	.module-title{padding: 10px 0 0 0; display: block; margin: .5rem 0 0; position: relative; }
	.module-title h2{color: #000; font-size: .7rem; text-align: center; line-height: 1.2em; margin-bottom: .2rem; display: block; position: relative;}
	.module-title span{height: 2px; position: relative; border-radius: 3px; margin:2px auto 10px; width: 1rem; display: block;}
	.module-title .more{ position: relative; right: 0; top: 46px; text-transform: uppercase; box-sizing: border-box; font-size: 12px; color: #888; width: 110px; padding-left: 18px; line-height: 26px; height: 28px;  border: solid 1px #E4E4E4; border-radius: 20px; transition: all 0.3s ease-in-out; background: #fff no-repeat right 115px center;}
	.module-title .more:hover{
		background: #0077AF url(../img/icon-more.png) no-repeat right 15px center;
		border-color: #0077AF;
		color: #fff;
		width: 130px;
	}
	

	.main{
		margin: 50px 0 0;
		background: url(../img/login-bg.svg) no-repeat center top; background-size: 100%;
	}
	.main .title{
		padding: .3rem .3rem !important;
	}
	.main .title h2{
		font-size: .62rem; 
		font-family: AucmaSharpSans;
		text-transform: uppercase; 
		font-weight: bold; 
		letter-spacing: .05rem; 
		display: inline-block;
		line-height: 1.2em; 
	}
	.main .title p{
		font-size: .28rem;
		padding-top: .1rem;
		line-height: 1.4em;
	}

	.module-2{
		position: relative;
	}
	.module-2 .mainBox{
		position: relative;
	}
	.main .form-box{
		position: relative;
		z-index: 2;
		padding: .3rem .3rem;
		border-radius: .3rem;
		background-color: #fff;
		margin-bottom: .7rem;
		margin-right: 0;
		margin-top: 0rem;
		box-shadow: 0 0.05rem .3rem rgba(0,0,0,0.02);
	}
	.main .form-box .form-list{
		overflow: hidden;
		margin-bottom: 20px;
	}
	.main .form-box .form-title{
		padding: 0;
		color: #888;
		line-height: 1.2em;
		font-size: .28rem;
	}
	.main .form-box .form-content{
		position: relative;
		width: 100%;
	}
	.main .form-box .form-content input{
		width: 100%;
		border: 1px solid #f1f1f1;
		padding: 10px 15px;
		border-radius: 10px;
		position: relative;
		font-size: .32rem;
	}
	.main .form-box .form-content select{
		width: 100%;
		background-color: #fff;
		border: 1px solid #f1f1f1;
		padding: 10px 15px;
		border-radius: 10px;
		font-size: .32rem;
	}
	.main .form-box .form-content.form-select::before{
		content: "";
		border: 3px solid #333;
		border-radius: 2px;
		border-left: 0;
		border-bottom: 0;
		width: 6px;
		height: 6px;
		position: absolute;
		right:20px;
		top: 50%;
		transform: translate(0,-55%)  rotate(135deg);
		
	}
	.main .form-box .form-info{
		padding: 10px 0 20px 230px;
		color: #888;
	}

	.main .form-box .form-list.checkbox{
		display: flex;
		padding: 5px 0;
	}
	.main .form-box .form-list.checkbox label{
		flex: 1;
		font-size: .28rem;
		line-height: 1.4em;
	}
	
	.main .form-box .form-list.submit{
	}
	.main .form-box .form-list.submit button{width: 208px; overflow: hidden; height: 42px; position: relative; left: 0; margin:0 auto; margin-top: 50px; line-height: 42px; text-align: center; display: block; font-size: 16px; color: #fff; border-radius: 115px; cursor: pointer;}
	.main .form-box .form-list.submit button span{width: 300%; height: 42px; position: absolute; z-index: 0; right: 0; line-height: 42px; background-image: linear-gradient(273deg,  #FF5757 0%, #E31111 33%); border-radius: 115px; transition: all 0.2s ease-in-out;}
	.main .form-box .form-list.submit button b{position: relative;}
	.main .form-box .form-list.submit button:hover span{ right: -400px;}

	
	.checkbox[type="checkbox"] {
	  position: relative;
	  top: -1px;
	  margin-right: 10px;
	  padding: 0;
	  width: 22px;
	  height: 22px;
	  background: #FFF;
	  border: 1px solid #D1D1D1;
	  overflow: hidden;
	  border-radius: 5px;
	  transition: all .3s;
	  -webkit-appearance: none;
	  appearance: none;
	  cursor: pointer;
	}
	
	.checkbox[type=checkbox]:focus {
		border: 1px solid #1D1D1F
	}
	
	.checkbox[type=checkbox]:checked {
		background: #0077AF;
		border-color: #0077AF;
		border: 0;
		-webkit-appearance: none;
		appearance: none
	}
	
	.checkbox[type=checkbox]:checked:after {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 20px;
		height: 15px;
		background-position: center center;
		background-repeat: no-repeat;
		background-image: url(../img/check-white.svg);
		background-size: 70%;
		transform: translate(-50%, -50%);
		content: ''
	}
	
	.content-box{
		position: relative;
		width: 100%;
		background-color: #fff;
		right: 0;
		top: 0;
		padding: 0rem .3rem .7rem;
		border-radius: .3rem;
	}
	.content-box h2{
		font-size: .42rem; 
		font-family: AucmaSharpSans;
		text-transform: uppercase; 
		font-weight: bold; 
		letter-spacing: .05rem; 
		display: inline-block;
		line-height: 1.2em; 
		margin-bottom: .2rem;
	}
	.content-box .con div{
		display: flex;
		align-items: flex-start;
		padding: .3rem 0;
	}
	.content-box .con div span{
		width: 30px;
		height: 30px;
		border-radius: 20px;
		border: 2px solid #666;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: .1rem;
		position: relative;
		top: -4px;
	}
	.content-box .con div b{
		font-weight: normal;
		flex: 1;
		font-size: .28rem;
		line-height: 1.4em;
	}
	.content-box .con div a:hover{
		color: #E31111;
	}



	.module-7{
		background: url(../img/pic-08.jpg) no-repeat center;
		background-attachment: fixed;
		background-size: cover;
		height: 4rem;
		display: flex;
		overflow: hidden;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 2;
		border-radius: 0.5rem 0.5rem 0 0;
		margin: 0;
	}
	.module-7 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%);}
	.module-7 .module-bg{
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 0;
		background: linear-gradient(to bottom,  rgba(8,44,138,0.7) 0%, rgba(8,44,138,0.3) 100%); 
	}
	.module-7 .module-title h2{
		text-align: center;
		color: #fff;
		font-size: .36rem;
	}
	.module-7 .con .describe{
		font-size: .24rem;
		font-weight: normal;
		color: #fff;
		text-align: center;
		padding: .1rem .3rem;
		line-height: 1.2em;
		width: 100%;
		position: relative;
		z-index: 2;
	}
	.module-7 .con .more{
		display: block;
		width: 1.25rem;
		padding: .16rem 0 .16rem .95rem;
		background: #fff url(../img/vr.svg) no-repeat .2rem center;
		border-radius: .4rem;
		line-height: 1.2em;
		margin: .2rem auto;
		transition: all 0.3s ease-in-out;
		position: relative;
		z-index: 2;
		font-size: .28rem;
	}
	.module-7 .con .more:hover{
		transform: scale(1.1);
		background: #0077AF url(../img/vr-hover.svg) no-repeat .2rem center;
		color: #fff;
	}

}