@charset "utf-8";

/*轮播图*/
.banner{ width:100%;height:520px; position:relative;}
.banner .list{ width:100%; height:100%; overflow:hidden; position:relative; z-index:1;list-style-type:none;}
.banner .list li{ width:100%; height:100%; position:absolute; left:0px; top:0px; display:none;list-style-type:none;}
.banner .list li a{ width:100%; margin:0 auto; position:relative; display:block; overflow:hidden; height:100%;}
.banner .list li a:hover{ text-decoration:none;}
.banner .list .banner-li-bgimg{
	position: absolute;
	bottom: 0;
	height: 100%;
	min-width: 100%;
}

.banner .btn{ position:absolute; bottom:20px; left:50%; margin-left:-480px; z-index:100;list-style-type:none;}
.banner .btn li{ margin-left: 12px; background: #fff; text-indent: -999em; float: left; width: 14px; height: 14px; cursor: pointer; border-radius:50%; }
.banner .btn li.hover{ background: #FC3; }

/*banner*/
.banner-wen {
	position: relative;
	margin-top: 160px;
}
.banner-wen>div {
	margin-bottom: 15px;
}
.banner .list .banner-kshch h1{
	font-size: 48px;
	color: rgb(255, 255, 255);
	position: relative;
}
.banner .list .banner-kshen {
	font-size: 28px;
	color: rgb(211, 211, 211);
	position: relative;
}
.banner .list .banner-right {
	position: relative;
	text-align: right;
	margin: 80px 0px;
}
.banner .list .banner-right img {
	width: 330px;
	height: 330px;
}
.banner .list .bg1 .banner-right img {
	width: 400px;
	height: 200px;
	margin-top: 80px;
}
.banner .list .bg4 .banner-right,
.banner .list .bg2 .banner-right {
	text-align: left;
}
.banner .list .bg3 .banner-right img {
	width: 400px;
	height: 250px;
	margin-top: 50px;
}
/*bg1*/
.banner .list .bg1 .banner-kshch {
	animation: bg1_character 0.5s;
	-moz-animation: bg1_character 0.5s;
	-webkit-animation: bg1_character 0.5s;
	-o-animation: bg1_character 0.5s;
}
.banner .list .bg1 .banner-kshen {
	animation: bg1_character 0.7s;
	-moz-animation: bg1_character 0.7s;
	-webkit-animation: bg1_character 0.7s;
	-o-animation: bg1_character 0.7s;
}
.banner .list .bg1 .banner-right {
	animation: bg1_character_img 1s;
	-moz-animation: bg1_character_img 1s;
	-webkit-animation: bg1_character_img 1s;
	-o-animation: bg1_character_img 1s;
}
/*bg2*/
.banner .list .bg2 .banner-kshch {
	animation: bg2_character 0.5s;
	-moz-animation: bg2_character 0.5s;
	-webkit-animation: bg2_character 0.5s;
	-o-animation: bg2_character 0.5s;
}
.banner .list .bg2 .banner-kshen {
	animation: bg2_character 0.7s;
	-moz-animation: bg2_character 0.7s;
	-webkit-animation: bg2_character 0.7s;
	-o-animation: bg2_character 0.7s;
}
.banner .list .bg2 .banner-right img {
	animation: bg2_rotating 1s;
	-moz-animation: bg2_rotating 1s;
	-webkit-animation: bg2_rotating 1s;
	-o-animation: bg2_rotating 1s;
}
/*bg3*/
.banner .list .bg3 .banner-kshch {
	animation: bg1_character 0.5s;
	-moz-animation: bg1_character 0.5s;
	-webkit-animation: bg1_character 0.5s;
	-o-animation: bg1_character 0.5s;
}
.banner .list .bg3 .banner-kshen {
	animation: bg1_character 0.7s;
	-moz-animation: bg1_character 0.7s;
	-webkit-animation: bg1_character 0.7s;
	-o-animation: bg1_character 0.7s;
}
.banner .list .bg3 .banner-right {
	animation: bg2_character 1s;
	-moz-animation: bg2_character 1s;
	-webkit-animation: bg2_character 1s;
	-o-animation: bg2_character 1s;
}
/*bg4*/
.banner .list .bg4 .banner-kshch {
	animation: bg2_character 0.5s;
	-moz-animation: bg2_character 0.5s;
	-webkit-animation: bg2_character 0.5s;
	-o-animation: bg2_character 0.5s;
}
.banner .list .bg4 .banner-kshen {
	animation: bg2_character 0.7s;
	-moz-animation: bg2_character 0.7s;
	-webkit-animation: bg2_character 0.7s;
	-o-animation: bg2_character 0.7s;
}
.banner .list .bg4 .banner-right {
	opacity: 0;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.banner .list .bg4 .banner-right img {
	animation: bg1_rotating 1s;
	-moz-animation: bg1_rotating 1s;
	-webkit-animation: bg1_rotating 1s;
	-o-animation: bg1_rotating 1s;
}

/*文字漂浮*/
@keyframes bg1_character {0% {left: -800px;top: 0px;}100% {left: 0px;top: 0px;}}
@-moz-keyframes bg1_character{0% {left: -800px;top: 0px;}100% {left: 0px;top: 0px;}}
@-webkit-keyframes bg1_character{0% {left: -800px;top: 0px;}100% {left: 0px;top: 0px;}}
@-o-keyframes bg1_character{0% {left: -800px;top: 0px;}100% {left: 0px;top: 0px;}}

@keyframes bg1_character_img {0% {left: 0px;top: -500px;}100% {left: 0px;top: 0px;}}
@-moz-keyframes bg1_character_img{0% {left: 0px;top: -500px;}100% {left: 0px;top: 0px;}}
@-webkit-keyframes bg1_character_img{0% {left: 0px;top: -500px;}100% {left: 0px;top: 0px;}}
@-o-keyframes bg1_character_img{0% {left: 0px;top: -500px;}100% {left: 0px;top: 0px;}}



@keyframes bg2_character {0% {left: 800px;top: 0px;}100% {left: 0px;top: 0px;}}
@-moz-keyframes bg2_character{0% {left: 800px;top: 0px;}100% {left: 0px;top: 0px;}}
@-webkit-keyframes bg2_character{0% {left: 800px;top: 0px;}100% {left: 0px;top: 0px;}}
@-o-keyframes bg2_character{0% {left: 800px;top: 0px;}100% {left: 0px;top: 0px;}}

/*创建3D动画*/
/*旋转*/
@keyframes bg1_rotating {from {transform: rotate(0)}to {transform: rotate(360deg)}}
@-webkit-keyframes bg1_rotating {from {transform: rotate(0)}to {transform: rotate(360deg)}}
/*变大*/
@keyframes bg2_rotating {0% {transform: scale(0.5)}75% {transform: scale(1.1)}100% {transform: scale(1)}}
@-webkit-keyframes bg2_rotating {0% {transform: scale(0.5)}75% {transform: scale(1.1)}100% {transform: scale(1)}}

/*延时显示*/
@keyframes fadeIn {0% {opacity: 0}50% {opacity: 0.5}100% {opacity: 1}}
@-webkit-keyframes fadeIn {0% {opacity: 0}50% {opacity: 0.5}100% {opacity: 1}}

@media (max-width: 768px) {
	.banner .list .banner-kshch h1 {
		font-size: 24px;
		text-align: center;
	}
	.banner .list .banner-kshen {
		font-size: 14px;
		text-align: center;
	}
	.banner .list .banner-btn {
		text-align: center;
	}
	.banner .list .banner-right img {
		margin-top: 20px;
		width: 230px;
		height: 230px;
	}
	.banner .list .bg1 .banner-right img {
		width: 300px;
		height: 150px;
		margin-top: 80px;
	}
	.banner .list .bg3 .banner-right img {
		width: 330px;
		height: 200px;
		margin-top: 40px;
	}
	.banner-wen {
		position: relative;
		margin-top: 60px;
	}
	.banner .list .banner-right,
	.banner .list .bg2 .banner-right,
	.banner .list .bg4 .banner-right {
		text-align: center;
	}
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
	.banner .list .banner-kshch h1{
		font-size: 32px;
	}
	.banner .list .banner-kshen {
		font-size: 18px;
	}
	.banner .list .banner-right img {
		margin-top: 35px;
		width: 280px;
		height: 280px;
	}
	.banner .list .bg1 .banner-right img {
		width: 350px;
		height: 175px;
		margin-top: 100px;
	}
	.banner .list .bg3 .banner-right img {
		width: 360px;
		height: 230px;
		margin-top: 60px;
	}
	.banner-wen {
		position: relative;
		margin-top: 200px;
	}
}