/*banner*/
.i-banner {height: 100%; width: 100%;}
.i-banner .swiper-container {height: 100%; width: 100%;}
.i-banner .swiper-slide,.i-banner .swiper-slide a{/* width:100%; height: 100%; */ display: block; height: 100%; background-position: center;background-repeat: no-repeat ; background-size: cover;}
.i-banner .swiper-slide img{display: none; width: 100%; height: 100%;}

.i-banner .swiper-pagination{position: absolute; bottom: 25px !important;}
.i-banner .swiper-pagination span{ width: 20px; height: 20px;  outline: none;}
.i-banner .swiper-pagination-bullet {border-radius: 40px!important; background:#fff; opacity: .7; outline: none;}
.i-banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 6px;}
.i-banner .swiper-pagination-bullet-active{background-color: #144582; opacity: 1;}
@media (max-width:1000px) {
	.i-banner .swiper-slide img{display: block;}
	.i-banner .swiper-slide img{width: 100%; height: auto;}
}

@media (max-width:480px) {
	.i-banner img{  height: 100%;}
	.i-banner .swiper-pagination span{ width: 15px; height: 15px; }	
}


.i-about{
	display: flex;
	display: -webkit-flex;
	height: 100%;
	width: 100%;
	align-items:center;
	justify-content:center;
	padding-left: 30%;
	background-position: center;
	background-repeat: no-repeat ;
}
.i-about-box{width: 800px; height:600px; background-color: #fff; padding: 100px 80px;}
.i-about-box h3{font-size: 28px; color: #333;}
.i-about-box h3 span{font-size: 18px; color: #999; font-family: arial; text-transform: uppercase;}
.i-about-box p{font-size: 16px; line-height: 26px; margin-top: 30px; color: #666;}
.i-about-more{margin-top: 80px;}
.i-about-more a{margin-right: 30px; padding: 10px 30px; color: #fff; background-color: #144586; display: inline-block; transition: all .2s;}
.i-about-more a:last-child{background-color: #DB6012;}
.i-about-more a:hover{opacity: .8;}

@media screen and (max-width:1200px) {
	.i-about{padding-left: 20%;}
	.i-about-box{width: 90%; height:auto; padding: 80px 10%;}
	.i-about-box h3{font-size: 24px;}
	.i-about-box h3 span{font-size: 16px; }
	.i-about-box p{font-size: 14px; line-height: 22px; }
	.i-about-more{margin-top: 60px;}
}
@media screen and (max-width:1000px) {
	.i-about{padding: 100px 0;}
	
}
@media screen and (max-width:768px) {
	.i-about{padding: 50px 5%; background-position: left center;}
	.i-about-box{width: 100%; height:auto; padding: 50px 10%;}
	.i-about-box h3{font-size: 24px;}
	.i-about-box h3 span{font-size: 16px; }
	.i-about-box p{font-size: 16px; line-height: 26px; }	
	.i-about-more a{margin-right: 10px; padding: 10px 20px; margin-bottom: 10px; }
}

.column{
	display: flex;
	display: -webkit-flex;
	height: 100%;
	width: 100%;
	align-items:center;
	justify-content:center;
	
}
.column ul{width: 100%;}
.column li{width: 33.33%; padding: 0 20px; float: left; text-align: center;}
.column li a{display: block;}
.column-con{width: 70%; float: left; text-align: center; /* display: none; */}
.column-con .swiper-slide{padding: 0 25px;}
.column-box{position: relative;}
.column-box span{
	position: absolute; 
	top: 0; 
	left: 0; 
	display: flex;
	display: -webkit-flex;
	height: 0%;
	width: 100%;
	align-items:center;
	justify-content:center;
	background-color: rgba(0,0,0,.7);
	transition: all .4s;
	opacity: 0;
}	
.column-box>img{width: 100%;}
.column li:hover .column-box span{height: 100%;	opacity: 1;}
.column-text{padding: 30px 0; background-color: #f3f3f3; line-height: 30px; transition: all .3s; border-bottom: 3px solid #f3f3f3;}
.column-text h3{font-size: 24px;}
.column-text p{font-size: 20px; color: #666;}
.column li:hover .column-text{background-color: #154587; border-bottom: 3px solid #DB6012; color: #fff;}
.column li:hover .column-text p{color: #ddd;}

@media screen and (max-width:1000px) {
	.column{padding: 100px 0;}
	.column ul li{padding: 0 10px;}
}
@media screen and (max-width:768px) {
	.column{padding: 50px 0;}
	.column-con{width: 100%;}
	.column ul li{width: 100%; float: none; margin: 20px 0;}
	.column li:hover .column-box span{height: 100%;	opacity: 0;}
}
@media screen and (max-width:480px) {
	
}








