@charset "utf-8";
/* CSS Document */

.clear{clear:both;height:0;overflow:hidden;}
a img{border:none;}

.slideBox{ 
	width:100%; height:100%;
	overflow:hidden; 
	position:relative;
}
.slideBox .hd{ 
	position:absolute;
	bottom:5%;
	left:0;
	width:100%;
	padding-left:60px; 
	z-index:1; 
}
.slideBox .hd ul{ overflow:hidden; zoom:1;}
.slideBox .hd ul li{
	
	width:15px;height:15px;
	margin:0px 3px;
	display:inline-block;
	background-repeat: no-repeat;
	background-size: 15px 15px;
	background-position: top center;
	cursor: pointer;
	background-image: url(../images/xl_qb.png);
}
.slideBox .hd ul li.on{background-image: url(../images/xl_dq.png)}


.slideBox .bd{ 
	height:100%; width: 100%; 
	z-index:0;   
}
.slideBox .bd .tempWrap{
	height:100%; width: 100%; 
}

.slideBox .bd .tempWrap ul{
	height:100%; 
}
.slideBox .bd ul li{
	overflow: hidden;
	height: 100%;
	position: relative;
	background-size: cover!important;
	background-repeat: no-repeat!important;
	background-position: top center!important;
}
.slideBox .bd li a{
	display:block; 
	height:100%; width: 100%; 
	margin:0 auto; 
	position: relative;
}

.b1{
	background:url(../images/b1.png); width:133px; height:190px;position:absolute; left:21%; top:21%; 
	background-position: top center;
	background-size: 100% 100%;
	background-size: cover;
	-webkit-animation: b1d 2s;
	-moz-animation: b1d 2s;
	-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/b1.png',sizingMethod='scale');
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/b1.png',sizingMethod='scale');
}
@-webkit-keyframes b1d{
	0%{opacity:0;
	-webkit-transform:translateX(-30%)}
	100%{opacity:1;
	-webkit-transform:translateX(0)}
}
@-moz-keyframes  b1d{
	0%{opacity:0;
	-moz-transform:translateX(-30%)}
	100%{opacity:1;
	-moz-transform:translateX(0)}
}
@-ms-keyframes  b1d{
	0%{opacity:0;
	-ms-transform:translateX(-30%)}
	100%{opacity:1;
	-ms-transform:translateX(0)}
}
@keyframes  b1d{
	0%{opacity:0;
	-ms-transform:translateX(-30%)}
	100%{opacity:1;
	-ms-transform:translateX(0)}
}

.b2{
	background:url(../images/b2.png); width:352px; height:40px;position:absolute; left:28%; top:23%; 
	background-position: top center;
	background-size: 100% 100%;
	background-size: cover;
	-webkit-animation:b2d 2s .2s ease both;
	-moz-animation:b2d 2s .2s ease both;
}
@-webkit-keyframes b2d{
	0%{opacity:0;
	-webkit-transform:translateY(-20%)}
	100%{opacity:1;
	-webkit-transform:translateY(0)}
}
@-moz-keyframes b2d{
	0%{opacity:0;
	-moz-transform:translateY(-20%)}
	100%{opacity:1;
	-moz-transform:translateY(0)}
}
@-ms-keyframes b2d{
	0%{opacity:0;
	-ms-transform:translateY(-20%)}
	100%{opacity:1;
	-ms-transform:translateY(0)}
}
@keyframes b2d{
	0%{opacity:0;
	-ms-transform:translateY(-20%)}
	100%{opacity:1;
	-ms-transform:translateY(0)}
}

.b3{
	background:url(../images/b3.png); width:250px; height:104px;position:absolute; left:32%; top:35%; 
	background-position: top center;
	background-size: 100% 100%;
	background-size: cover;
	-webkit-animation:b3d 3s 1s ease both;
	-moz-animation:b3d 3s 1s ease both;
}
@-webkit-keyframes b3d{
	0%{opacity: 0;}
	100%{opacity: 1;}
}
@-moz-keyframes b3d{
	0%{opacity: 0;}
	100%{opacity: 1;}
}
@-ms-keyframes b3d{
	0%{opacity: 0;}
	100%{opacity: 1;}
}
@keyframes b3d{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

.b4{
	background-image:url(../images/b5.png); width:450px; height:187px;position:absolute; left:21%; top:21%; 
	background-position: top center;
	
	background-size: cover;
	-webkit-animation: b4d 2s;
	-moz-animation: b4d 2s;
	-ms-animation: b4d 2s;
	animation: b4d 2s;
}
@-webkit-keyframes b4d{
	0%{opacity:0;
	-webkit-transform:translateX(-30%)}
	100%{opacity:1;
	-webkit-transform:translateX(0)}
}
@-moz-keyframes  b4d{
	0%{opacity:0;
	-moz-transform:translateX(-30%)}
	100%{opacity:1;
	-moz-transform:translateX(0)}
}
@-ms-keyframes  b4d{
	0%{opacity:0;
	-ms-transform:translateX(-30%)}
	100%{opacity:1;
	-ms-transform:translateX(0)}
}
@keyframes  b4d{
	0%{opacity:0;
	transform:translateX(-30%)}
	100%{opacity:1;
	transform:translateX(0)}
}

.b5{
	background-image:url(../images/b5.png); width:450px; height:187px;position:absolute; left:21%; top:21%; 
	background-position: top center;
	
	background-size: cover;
	-webkit-animation: b5d 2s;
	-moz-animation: b5d 2s;
	-ms-animation: b5d 2s;
	animation: b5d 2s;
}
@-webkit-keyframes b5d{
	0%{opacity:0;
	-webkit-transform:translateX(-30%)}
	100%{opacity:1;
	-webkit-transform:translateX(0)}
}
@-moz-keyframes  b5d{
	0%{opacity:0;
	-moz-transform:translateX(-30%)}
	100%{opacity:1;
	-moz-transform:translateX(0)}
}
@-ms-keyframes  b5d{
	0%{opacity:0;
	-ms-transform:translateX(-30%)}
	100%{opacity:1;
	-ms-transform:translateX(0)}
}
@keyframes  b5d{
	0%{opacity:0;
	transform:translateX(-30%)}
	100%{opacity:1;
	transform:translateX(0)}
}

.b6{
	background-image:url(../images/b5.png); width:450px; height:187px;position:absolute; left:21%; top:21%; 
	background-position: top center;
	
	background-size: cover;
	-webkit-animation: b6d 2s;
	-moz-animation: b6d 2s;
	-ms-animation: b6d 2s;
	animation: b6d 2s;
}
@-webkit-keyframes b6d{
	0%{opacity:0;
	-webkit-transform:translateX(-30%)}
	100%{opacity:1;
	-webkit-transform:translateX(0)}
}
@-moz-keyframes  b6d{
	0%{opacity:0;
	-moz-transform:translateX(-30%)}
	100%{opacity:1;
	-moz-transform:translateX(0)}
}
@-ms-keyframes  b6d{
	0%{opacity:0;
	-ms-transform:translateX(-30%)}
	100%{opacity:1;
	-ms-transform:translateX(0)}
}
@keyframes  b6d{
	0%{opacity:0;
	transform:translateX(-30%)}
	100%{opacity:1;
	transform:translateX(0)}
}


.animation20{
	background:url(../images/banner2.png) no-repeat; width:44em; height:28.6em; float:left;
	-webkit-animation:flash 2s .2s ease both;
	-moz-animation:flash 2s .2s ease both;}
	@-webkit-keyframes flash{
	0%{opacity: 0;}
	100%{opacity: 1;}
	}
	@-moz-keyframes flash{
	0%{opacity: 0;}
	100%{opacity: 1;}
	}
	@-ms-keyframes flash{
	0%{opacity: 0;}
	100%{opacity: 1;}
}
.animation21{
	-webkit-animation:fadeInDown 2s .2s ease both;
	-moz-animation:fadeInDown 2s .2s ease both;
}
	@-webkit-keyframes fadeInDown{
	0%{opacity:0;
	-webkit-transform:translateY(-1.5em)}
	100%{opacity:1;
	-webkit-transform:translateY(0)}
	}
	@-moz-keyframes fadeInDown{
	0%{opacity:0;
	-moz-transform:translateY(-1.5em)}
	100%{opacity:1;
	-moz-transform:translateY(0)}
	}
	@-ms-keyframes fadeInDown{
	0%{opacity:0;
	-ms-transform:translateY(-1.5em)}
	100%{opacity:1;
	-ms-transform:translateY(0)}
}
#a24{position:absolute; left:27em; top:9.5em; margin:-1em 0 0 -9em;color:#FFFFFF; font-size:1.9em; border:1px solid #fff; height:2em; line-height:2em;  border-radius:2em; -webkit-border-radius:2em; -moz-border-radius:2em; width:18.5em; text-align:center;}
.animation22{
	-webkit-animation:fadeInRight 1s .2s ease both;
	-moz-animation:fadeInRight 1s .2s ease both;}

@-webkit-keyframes fadeInRight{
0%{opacity:0;
-webkit-transform:translateX(2em)}
100%{opacity:1;
-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInRight{
0%{opacity:0;
-moz-transform:translateX(2em)}
100%{opacity:1;
-moz-transform:translateX(0)}
}
@-ms-keyframes fadeInRight{
0%{opacity:0;
-ms-transform:translateX(2em)}
100%{opacity:1;
-ms-transform:translateX(0)}
}

/*第一屏*/

.content2{ width:70.7em; height:28.6em; margin:0 auto;  position:relative;display: inline-block;}
.animation5{
	 width:302px; height:77px;position: absolute;right: 24%; top: 55%;
	-webkit-animation:flash 3s 1s ease both;
	-moz-animation:flash 3s 1s ease both;}
	@-webkit-keyframes flash{
	0%{opacity: 0;}
	100%{opacity: 1;}
	}
	@-moz-keyframes flash{
	0%{opacity: 0;}
	100%{opacity: 1;}
	}
	@-ms-keyframes flash{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

.animation3{
	 width:340px; height:43px; position: absolute; top: 23%; left: 26%;
	-webkit-animation:fadeInDown 2s 1s ease both;
	-moz-animation:fadeInDown 2s 1s ease both;}
	@-webkit-keyframes fadeInDown{
	0%{opacity:0;
	-webkit-transform:translateY(-200px)}
	30%{opacity:0.6;
	-webkit-transform:translateY(200px)}
	60%{opacity:1;-webkit-transform:translateY(-10px)}
	100%{opacity:1;-webkit-transform:translateY(0)}
	}
	@-moz-keyframes fadeInDown{
	0%{opacity:0;
	-webkit-transform:translateY(-200px)}
	30%{opacity:0.6;
	-webkit-transform:translateY(200px)}
	60%{opacity:1;-webkit-transform:translateY(-10px)}
	100%{opacity:1;-webkit-transform:translateY(0)}
	}
	@-ms-keyframes fadeInDown{
	0%{opacity:0;
	-webkit-transform:translateY(-200px)}
	30%{opacity:0.6;
	-webkit-transform:translateY(200px)}
	60%{opacity:1;-webkit-transform:translateY(-10px)}
	100%{opacity:1;-webkit-transform:translateY(0)}
}
.animation4{
	background:url(../images/b1.png); width:133px; height:190px;position:absolute; left:21%; top:21%; 
	background-position: top center;
	background-size: 100% 100%;
	background-size: cover;
	-webkit-animation:fadeInRight 2s;
	-moz-animation:fadeInRight 2s;
}
	@-webkit-keyframes fadeInRight{
	0%{opacity:0;
	-webkit-transform:translateX(-30%)}
	100%{opacity:1;
	-webkit-transform:translateX(0)}
	}
	@-moz-keyframes fadeInRight{
	0%{opacity:0;
	-moz-transform:translateX(-30%)}
	100%{opacity:1;
	-moz-transform:translateX(0)}
	}
	@-ms-keyframes fadeInRight{
	0%{opacity:0;
	-ms-transform:translateX(-30%)}
	100%{opacity:1;
	-ms-transform:translateX(0)}
}

/*第三屏*/

.content3{ width:70.7em; height:28.6em; margin:0 auto;display: inline-block;}
.animation6{
	width:19em; height:6em; margin:2.35em 0 0 8.6em; float:left;
	-webkit-animation:bounceInDown 1s .2s ease both;
	-moz-animation:bounceInDown 1s .2s ease both;}
	@-webkit-keyframes bounceInDown{
	0%{opacity:0;
	-webkit-transform:translateY(-2000px)}
	60%{opacity:1;
	-webkit-transform:translateY(30px)}
	80%{-webkit-transform:translateY(-10px)}
	100%{-webkit-transform:translateY(0)}
	}
	@-moz-keyframes bounceInDown{
	0%{opacity:0;
	-moz-transform:translateY(-2000px)}
	60%{opacity:1;
	-moz-transform:translateY(30px)}
	80%{-moz-transform:translateY(-10px)}
	100%{-moz-transform:translateY(0)}
}
@-ms-keyframes bounceInDown{
	0%{opacity:0;
	-ms-transform:translateY(-2000px)}
	60%{opacity:1;
	-ms-transform:translateY(30px)}
	80%{-ms-transform:translateY(-10px)}
	100%{-ms-transform:translateY(0)}
}
#a9,#a10{opacity: 0;filter:alpha(opacity=0);}
.animation7{
	font-size:3.2em; width:100%; float:left; margin:0.7em 0 0 2.5em; font-weight:bold;color: #333;
	-webkit-animation:fadeInDown 1s .2s ease both;
	-moz-animation:fadeInDown 1s .2s ease both;}
	@-webkit-keyframes fadeInDown{
	0%{opacity:0;
	-webkit-transform:translateY(-2em)}
	100%{opacity:1;
	-webkit-transform:translateY(0)}
	}
	@-moz-keyframes fadeInDown{
	0%{opacity:0;
	-moz-transform:translateY(-2em)}
	100%{opacity:1;
	-moz-transform:translateY(0)}
}
@-ms-keyframes fadeInDown{
	0%{opacity:0;
	-ms-transform:translateY(-2em)}
	100%{opacity:1;
	-ms-transform:translateY(0)}
}
.animation7 span{  color:#009EFE; font-size:1em;}
/*新添第二屏*/
.slide ul li.banner4{width:100%; height:28.6em; background:url(../images/banner4.png) center center no-repeat;}
.animation8{
	 width:32.1em; height:10.6em; float:right;top: 11.7em;right:10em;position: absolute;
	-webkit-animation:fadeInRightBig 3s .5s ease both;
	-moz-animation:fadeInRightBig 3s .5s ease both;
}
	@-webkit-keyframes fadeInRightBig{
	0%{opacity:0;
	-webkit-transform:translateX(13em)}
	100%{opacity:1;
	-webkit-transform:translateX(0)}
	}
	@-moz-keyframes fadeInRightBig{
	0%{opacity:0;
	-moz-transform:translateX(13em)}
	100%{opacity:1;
	-moz-transform:translateX(0)}
}
@-ms-keyframes fadeInRightBig{
	0%{opacity:0;
	-ms-transform:translateX(13em)}
	100%{opacity:1;
	-ms-transform:translateX(0)}
}
.animation9{
 	width:62.5em; height:28.6em; float:left;
	-webkit-animation:fadeInLeftBig 3s .5s ease both;
	-moz-animation:fadeInLeftBig 3s .5s ease both;
}
	@-webkit-keyframes fadeInLeftBig{
	0%{opacity:0;
	-webkit-transform:translateX(-20em)}
	100%{opacity:1;
	-webkit-transform:translateX(0)}
	}
	@-moz-keyframes fadeInLeftBig{
	0%{opacity:0;
	-moz-transform:translateX(-20em)}
	100%{opacity:1;
	-moz-transform:translateX(0)}
}
@-ms-keyframes fadeInLeftBig{
	0%{opacity:0;
	-ms-transform:translateX(-20em)}
	100%{opacity:1;
	-ms-transform:translateX(0)}
}