/*******************************
  -------[=banner]-------
*******************************/
#ban{width: 100%;clear: both;padding: 0;}

#ban .items{
    position: relative;height: 520px;width: 100%;
    background-position: center center;background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}
#ban .items a{
    display: block; position: relative;height: 100%;width: 100%;overflow: hidden;

}
#ban .items a .img{
	height: 100%; width: 100%;
	background-repeat: no-repeat;background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
@keyframes a-big{
	to{ 
		-webkit-transform: scale(1.08);
		-moz-transform: scale(1.08); 
		-ms-transform: scale(1.08); 
		-o-transform: scale(1.08); 
		transform: scale(1.08);
		transform-origin: 50% 50%;
	}
}
@-moz-keyframes a-big{
	to{ 
		-webkit-transform: scale(1.08);
		-moz-transform: scale(1.08); 
		-ms-transform: scale(1.08); 
		-o-transform: scale(1.08); 
		transform: scale(1.08);
		transform-origin: 50% 50%;
	}
}
@-webkit-keyframes a-big{
	to{ 
		-webkit-transform: scale(1.08);
		-moz-transform: scale(1.08); 
		-ms-transform: scale(1.08); 
		-o-transform: scale(1.08); 
		transform: scale(1.08);
		transform-origin: 50% 50%;
	}
}
@-o-keyframes a-big{
	to{ 
		-webkit-transform: scale(1.08);
		-moz-transform: scale(1.08); 
		-ms-transform: scale(1.08); 
		-o-transform: scale(1.08); 
		transform: scale(1.08);
		transform-origin: 50% 50%;
	}
}

#ban .items.slick-active a .img{    
	animation:a-big 5s;
	-moz-animation:a-big 5s; 
	-webkit-animation:a-big 5s;
	-o-animation:a-big 5s; }

#ban .txt{
	position: absolute;left:50%;top: 50%; 
    margin-top: -150px;margin-left: -600px;
    max-width: 680px;
}
#ban .txt img{display: block;}

#ban .slick-dots{
    position: absolute;
    bottom: 2%;
    text-align: center;
    width: 100%;
}
#ban .slick-dots li{
    display: inline-block;
    margin:0 5px;
}
#ban .slick-dots li button{
	display: block;
	outline: none;
	font-size: 0;
	padding:0;
	width: 12px;
	height:12px;
	background:#fff;
	border:0;
	border-radius: 50%;
}
#ban .slick-dots li.slick-active button{
    background:rgba(0,0,0,0.4);
}

#ban .slick-prev,#ban .slick-next{
    position: absolute;
    z-index: 9;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background:#b1b2bf url(../images/arr-l.png) no-repeat center center;
    -webkit-background-size: 27px 27px;
    background-size: 27px 27px;
    font-size: 0;
    border: none;outline: none;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
}
#ban .slick-prev:hover,#ban .slick-next:hover{background-color:#C11523;}
#ban .slick-prev {
    left: 50px;
    top: 48%;
}
#ban .slick-next {
    right: 50px;
    top: 48%;
    background-image:url(../images/arr-r.png); 
}

#ban .items .txt{display: none;}

#ban .items.slick-active .txt{
    display: block;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
   }

#ban .txt{

}
#ban .txt h3{font-size: 56px;}
#ban .txt .p1{font-size: 24px;}
#ban .txt .p2{font-size: 16px;}
#ban .txt .p3{font-size: 20px;}
#ban .txt em{font-size: 36px;}

#ban .items1 h3{  
	color: #C11523;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration:1.6s;
	animation-duration:1.6s;
}
#ban .items1 .p1{color: #515151;}
#ban .items1 .p2{color: #636363;}
#ban .items1 .con em{color: #ffa200;}
#ban .items1 .con{
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration:1.5s;
	animation-duration:1.5s;
	animation-delay:0.5s;
	-webkit-animation-delay:0.5s;
}

#ban .items2 .txt{background:rgba(193,21,35,0.8);padding: 20px 30px;	-webkit-animation-duration:1.6s;
	animation-duration:1.6s;}
#ban .items2 h3{color: #ffc600;}
#ban .items em{color: #ff560b;}
#ban .items2 .p3,#ban .items2 .p1{color: #fff;}

#ban .items3 h3{
	color: #C11523;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration:1.6s;
	animation-duration:1.6s;
}
#ban .items3 .p3{
	color: #3f3f3f;padding-top: 20px;max-width: 550px;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration:1.5s;
	animation-duration:1.5s;
	animation-delay:0.5s;
	-webkit-animation-delay:0.5s;
}


#ban .items4{color: #fff;}
#ban .items4 a{	background-position: center center;}
#ban .items4 h4{
	font-size: 70px;
	color: #febe72;
	opacity: 0.6;
	filter: alpha(opacity=60);
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration:1.2s;
	animation-duration:1.2s;
}
#ban .items4 .con{  
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	animation-delay:0.8s;
	-webkit-animation-delay:0.8s;
	-webkit-animation-duration:1s;
	animation-duration:1s;
}
#ban .items4 .con span{font-size: 29px;}
#ban .items4 .con .p4{font-size: 37px;}
#ban .items4 .con .p3 span{display: inline-block;vertical-align: middle;font-size: 36px;color: #f4bf60;opacity: 0.6;filter: alpha(opacity=60);padding-right: 25px;}

@media only screen and (max-width: 1300px) {
 	#ban .items{height: 400px;}
	#ban .txt h3{font-size: 40px;}
	#ban .txt .p1{font-size: 20px;}
	#ban .txt .p2{font-size: 14px;}
	#ban .txt .p3{font-size: 16px;}
	#ban .txt em{font-size: 26px;}
	#ban .txt { margin-top: -100px;margin-left: 0;left: 100px;max-width: 480px;}
	#ban .items4 h4{font-size: 50px;}
	#ban .items4 .con .p4{font-size: 24px;}

}
@media only screen and (max-width: 959px) {
	#ban .items4 h3{display: none;}
	#ban .items{height: 330px;}
		#ban .txt h3{font-size: 30px;}
		#ban .txt em{font-size: 16px;}
		#ban .txt {margin-top: -80px;max-width: 400px;}
	 	#ban .items{height: 330px;}


}
@media only screen and (max-width: 767px) {
		#ban .txt h3{font-size: 28px;}
		#ban .txt .p1{font-size: 16px;}
		#ban .items2 .p3,
		#ban .items3 .p1,
		#ban .txt .p2,#ban .txt em{display: none;}
		#ban .items2 .txt{padding: 10px 10px 10px 20px;}
		#ban .txt {margin-top: -50px;left: 50px;max-width:100%;}
	 	#ban .items{height: 240px;}
	 	#ban .items h3 span{display: block;}
	 	#ban .items3 .p3 span{display: none;}
	 	#ban .items4 h4{font-size: 35px;}
	 	#ban .items4 .con .p3 span{font-size: 20px;}
}
@media only screen and (max-width: 479px) {
	#ban .items4 a{	background-position: center 0;}
	#ban .items{height: 200px;}
	#ban .txt{left: 20px;}
	#ban .txt h3{font-size: 24px;}
	#ban .txt .p1{font-size: 14px;}
	#ban .items4 h4{font-size: 28px;}
}