@charset "gb2312";
/* CSS Document */

@charset "GB2312";
/* 初始化CSS */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
fieldset, img { border:none; }
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
ul, ol { list-style:none; }
input { padding-top:0; padding-bottom:0; }
input::-moz-focus-inner {border:none;padding:0;}
select, input { vertical-align:middle; }
select, input, textarea { font-size:12px; margin:0; }
input[type="text"], input[type="password"], textarea { outline-style:none; -webkit-appearance:none; }
textarea { resize:none; }
table { border-collapse:collapse; }
body { background:#fff; color:#333; padding:0; font:12px/20px "宋体";/* -webkit-text-size-adjust:none */ }
.clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { zoom:1; }
.clearit { clear:both; height:0; font-size:0; overflow:hidden; }
a {  text-decoration:none; }
a:visited {  }

h1, h2, h3, h4, h5, em { font-weight:normal; }
.clearfix{display: block; clear: both; overflow: hidden;}

.clearfix:after{zoom:1;}

html{height: 100%; width: 100%;}
body{
	
	
	width: 100%;
	height: 100%;
	
	font-family:Verdana,Tahoma,Helvetica,Arial,sans-serif;
}
img{
	display: block;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}


.wrap1,.wrap2{
	width: 100%; height: 100%; position: absolute; left: 0; top:0; overflow: hidden;
	background: url('http://n.sinaimg.cn/news/a8903bbc/20160520/H503cover.jpg') 0 0 no-repeat;
	background-size: 100% 100%;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.wrap2{
	background: #FFF;
	overflow: visible;
	display: none;
}

.wrap1 .title{
	position: absolute;
	top: 20.3%;
	width: 100%;
	opacity: 0;

	-moz-animation:animationsop 1.5s linear 0s normal forwards ;
		-webkit-animation:animationsop 1.5s linear 0s normal forwards ;
		-o-animation:animationsop 1.5s linear 0s normal forwards ;
		-ms-animation:animationsop 1.5s linear 0s normal forwards ;
		animation:animationsop 1.5s linear 0s normal forwards ;
}

.wrap1 .title img{
	width: 100%;
}

.wrap1 .logo{
 	position: absolute; top: 72%; left: 59%; width: 32.6%;
	
	-webkit-transform: translateX(150%);
	-ms-transform: translateX(150%);
	-o-transform: translateX(150%);
	transform: translateX(150%);



 	-moz-animation:atioanimnsload 1.5s linear 1.5s normal forwards ;
 		-webkit-animation:atioanimnsload 1.5s linear 1.5s normal forwards ;
 		-o-animation:atioanimnsload 1.5s linear 1.5s normal forwards ;
 		-ms-animation:atioanimnsload 1.5s linear 1.5s normal forwards ;
 		animation:atioanimnsload 1.5s linear 1.5s normal forwards ;
}

.wrap1 .logo img{
	width: 100%;
}

.upicon{
	width: 5.4%; position: absolute; left: 47.2%; bottom: 5%;
	-moz-animation:animationsop 1.5s linear 0s infinite alternate ;
	-webkit-animation:animationsop 1.5s linear 0s infinite alternate ;
	-o-animation:animationsop 1.5s linear 0s infinite alternate ;
	-ms-animation:animationsop 1.5s linear 0s infinite alternate ;
	animation:animationsop 1.5s linear 0s infinite alternate ;
}

.upicon img{
	width: 100%;
}





.pagedown{
	-moz-animation:atioanimnsback 0.5s linear 0s normal forwards ;
		-webkit-animation:atioanimnsback 0.5s linear 0s normal forwards ;
		-o-animation:atioanimnsback 0.5s linear 0s normal forwards ;
		-ms-animation:atioanimnsback 0.5s linear 0s normal forwards ;
		animation:atioanimnsback 0.5s linear 0s normal forwards ;
}

.pageup{
	-moz-animation:animationsup 0.5s linear 0s normal forwards ;
		-webkit-animation:animationsup 0.5s linear 0s normal forwards ;
		-o-animation:animationsup 0.5s linear 0s normal forwards ;
		-ms-animation:animationsup 0.5s linear 0s normal forwards ;
		animation:animationsup 0.5s linear 0s normal forwards ;
}

/*第二页样式*/

.content{
	padding:50px 0 10px 0;
}

.content p,.content h3{
	padding: 0 6% 0;
}

.shade{
	position: relative; overflow: hidden;
	
}
.shade .front{
	position: relative;
	width: 100%;
	display: block;
	height: 100%;
}
.shade .back{
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
}


.content h3{
	font-size: 2rem; text-align: center; line-height: 50px; font-weight: bold;
}

.content p{
	text-indent: 2rem; font-size: 12px; line-height: 2rem; padding-bottom: 30px;
}

.content .smalltitle{
	font-size: 1.5rem; text-align: center; line-height: 50px; text-align: left;
	font-family: "微软雅黑";
}


 .picbox{
	padding-bottom: 30px;
}
.video{
	background: black; margin-bottom: 30px;
}
.video video{
	
	width: 100%; 
}

.picbox p{
	font-size: 1rem; color: #666666; text-indent: 0; padding: 0 6%;
}

.picbox img{
	width: 100%;
}

.creative h3{
	font-size: 1.5rem; text-align: left;
}
.creative .namelist{
	padding: 0 6%;
}
.creative span{
	font-size: 1rem; color: #666666; margin-right: 1rem;
}

.menue{
	width: 100%;
	height: 30px;
	position: fixed;
	right: 0;
	bottom: 100px;
	z-index: 1000;
}
.musicicon{
	width: 40px;
	height: 40px;
	background: url(http://n.sinaimg.cn/news/65e00feb/20160107/icon_03.png) 0 0 no-repeat;
	position: fixed;
	right: 10px;
	top: 10px;
	background-size: 100%;
	z-index: 100;
}

.musicpush{
	background-image: url(http://n.sinaimg.cn/news/65e00feb/20160107/stopicon_06.png);
}


.music{
	display: none;
}





/*浮动按钮样式*/

.menuebut,.comments,.listbut,.share{
	width: 40px;
	height: 40px;
	background: url(http://n.sinaimg.cn/news/65e00feb/20160107/icon_22.png) 0 0 no-repeat;
	background-size: 100%;
	position: absolute;
	z-index: 100;

}

.menuebut{
	width: 40px;
	height: 40px;
	right: 10px;
	z-index: 100;
}

.listbut ul{
	display: none;
}

.messList{
	width: 80%;
	position: absolute;
	right: 21px;
	background: black;
	padding:5% 0;
	top:-273px;
	display: none;
}

.messList ul li{
	text-align: center;
	font-family:'微软雅黑';
	font-size: 2rem ;
	line-height:4rem;
	font-weight: bold;
}

.messList ul li a{
	display: inline-block;
	border-top: 1px solid #3b3b3b;
	width: 80%;
	height: 100%;
	color: #3b3b3b;
}

.messList ul .active{
	background:#1b1b1b;
}

.messList ul .active a{
	color:#FFF;
}



.messList .angle{
	position: absolute;

	width: 0; height: 0;
	border:20px solid transparent;
	border-right: 20px solid black;
	bottom: -10px;
	right: 0;
}

.rotatean{
	-moz-animation:atioanimnsrotate 0.5s linear 0s normal forwards ;
		-webkit-animation:atioanimnsrotate 0.5s linear 0s normal forwards ;
		-o-animation:atioanimnsrotate 0.5s linear 0s normal forwards ;
		-ms-animation:atioanimnsrotate 0.5s linear 0s normal forwards ;
		animation:atioanimnsrotate 0.5s linear 0s normal forwards ;
}
<!--.comments{
	background-image: url(http://n.sinaimg.cn/news/65e00feb/20160107/icon_07.png); top: 0; right: 60px;
	display: none; opacity: 0;
}
-->

.share{
	background-image: url(http://n.sinaimg.cn/news/65e00feb/20160107/icon_18.png); top: 50px; right: 10px;
	display: none; opacity: 0;
}

.listbut{
	background-image: url(http://n.sinaimg.cn/news/65e00feb/20160107/icon_14.png); top: -50px; right: 10px;
	display: none; opacity: 0;

}

.menueshow .comments{
	display: block;
	-moz-animation:butshow 0.3s linear 0.3s normal forwards ;
		-webkit-animation:butshow 0.3s linear 0.3s normal forwards ;
		-o-animation:butshow 0.3s linear 0.3s normal forwards ;
		-ms-animation:butshow 0.3s linear 0.3s normal forwards ;
		animation:butshow 0.3s linear 0.3s normal forwards ;
}

.menueshow .share{
	display: block;
	-moz-animation:butshow 0.3s linear 0.6s normal forwards ;
		-webkit-animation:butshow 0.3s linear 0.6s normal forwards ;
		-o-animation:butshow 0.3s linear 0.6s normal forwards ;
		-ms-animation:butshow 0.3s linear 0.6s normal forwards ;
		animation:butshow 0.3s linear 0.6s normal forwards ;
}

.menueshow .listbut{
	display: block;
	-moz-animation:butshow 0.3s linear 0s normal forwards ;
		-webkit-animation:butshow 0.3s linear 0s normal forwards ;
		-o-animation:butshow 0.3s linear 0s normal forwards ;
		-ms-animation:butshow 0.3s linear 0s normal forwards ;
		animation:butshow 0.3s linear 0s normal forwards ;
}


.menuehild .comments,.menuehild .share,.menuehild .listbut{
	-moz-animation:buthild 0.5s linear 0s normal forwards ;
		-webkit-animation:buthild 0.5s linear 0s normal forwards ;
		-o-animation:buthild 0.5s linear 0s normal forwards ;
		-ms-animation:buthild 0.5s linear 0s normal forwards ;
		animation:buthild 0.5s linear 0s normal forwards ;
}

.menuehild .rotateback{
	-moz-animation:rotateback 0.5s linear 0s normal forwards ;
		-webkit-animation:rotateback 0.5s linear 0s normal forwards ;
		-o-animation:rotateback 0.5s linear 0s normal forwards ;
		-ms-animation:rotateback 0.5s linear 0s normal forwards ;
		animation:rotateback 0.5s linear 0s normal forwards ;
}

.listicon{text-align: center; position: absolute; width: 100%;}
.piclist .listicon li{border-radius: 50%; margin-right: 10px; float: none; width: 5px; height: 5px; display: inline-block; vertical-align: middle; border: 2px solid #fff; }
.listicon .active{background: #fff;}


/*显示按钮动画*/

@-webkit-keyframes butshow{
	0%{opacity: 0;}
	
	100%{opacity: 1;}
}

@-moz-keyframes butshow{
	0%{opacity: 0;}
	
	100%{opacity: 1;}
}

@-o-keyframes butshow{
	0%{opacity: 0;}
	
	100%{opacity: 1;}
}

@-ms-keyframes butshow{
	0%{opacity: 0;}
	
	100%{opacity: 1;}
}

@keyframes butshow{
	0%{opacity: 0;}
	
	100%{opacity: 1;}
}

/*隐藏按钮动画*/

@-webkit-keyframes buthild{
	0%{opacity: 1;}
	
	100%{opacity: 0;}
}

@-moz-keyframes buthild{
	0%{opacity: 1;}
	
	100%{opacity: 0;}
}

@-o-keyframes buthild{
	0%{opacity: 1;}
	
	100%{opacity: 0;}
}

@-ms-keyframes buthild{
	0%{opacity: 1;}
	
	100%{opacity: 0;}
}

@keyframes buthild{
	0%{opacity: 1;}
	
	100%{opacity: 0;}
}

/*浮动按钮旋转动画*/

@-webkit-keyframes atioanimnsrotate{
	0%{-webkit-transform: rotateZ(0deg)}
	
	100%{-webkit-transform: rotateZ(-45deg)}
}

@-moz-keyframes atioanimnsrotate{
	0%{-moz-transform: rotateZ(0deg)}
	
	100%{-moz-transform: rotateZ(-45deg)}
}

@-o-keyframes atioanimnsrotate{
	0%{ -o-transform: rotateZ(0deg)}
	
	100%{ -o-transform: rotateZ(-45deg)}
}

@-ms-keyframes atioanimnsrotate{
	0%{ -ms-transform: rotateZ(0deg)}
	
	100%{ -ms-transform: rotateZ(-45deg)}
}

@keyframes atioanimnsrotate{
	0%{transform: rotateZ(0deg)}
	
	100%{transform: rotateZ(-45deg)}
}

/*按钮旋转回复动画*/

@-webkit-keyframes rotateback{
	0%{-webkit-transform: rotateZ(-45deg)}
	
	100%{-webkit-transform: rotateZ(0deg)}
}

@-moz-keyframes rotateback{
	0%{-moz-transform: rotateZ(-45deg)}
	
	100%{-moz-transform: rotateZ(0deg)}
}

@-o-keyframes rotateback{
	0%{ -o-transform: rotateZ(-45deg)}
	
	100%{ -o-transform: rotateZ(0deg)}
}

@-ms-keyframes rotateback{
	0%{ -ms-transform: rotateZ(-45deg)}
	
	100%{ -ms-transform: rotateZ(0deg)}
}

@keyframes rotateback{
	0%{transform: rotateZ(-45deg)}
	
	100%{transform: rotateZ(0deg)}
}


/*幻灯片组件*/

.piclist ul li{
	float: left;
}
.piclist ul{
	position: absolute; left: 0; 
}


.piclist{
	width: 100%; overflow: hidden; position: relative;
}

.piclist .touchbox{
	position: absolute; width: 100%; height: 100%;  z-index: 100;
}


/*向上滑屏动画*/

@-webkit-keyframes atioanimnsback{
	0%{-webkit-transform: translateY(-100%)}
	
	100%{-webkit-transform: translateY(0)}
}

@-moz-keyframes atioanimnsback{
	0%{-moz-transform: translateY(-100%)}
	
	100%{-moz-transform: translateY(0)}
}

@-o-keyframes atioanimnsback{
	0%{ -o-transform: translateY(-100%)}
	
	100%{ -o-transform: translateY(0)}
}

@-ms-keyframes atioanimnsback{
	0%{ -ms-transform: translateY(-100%)}
	
	100%{ -ms-transform: translateY(0)}
}

@keyframes atioanimnsback{
	0%{transform: translateY(-100%)}
	
	100%{transform: translateY(0)}
}
/*向下滑屏动画*/

@-webkit-keyframes animationsup{
	0%{-webkit-transform: translateY(0)}
	
	100%{-webkit-transform: translateY(-100%)}
}

@-moz-keyframes animationsup{
	0%{-moz-transform: translateY(0)}
	
	100%{-moz-transform: translateY(-100%)}
}

@-o-keyframes animationsup{
	0%{ -o-transform: translateY(0)}
	
	100%{ -o-transform: translateY(-100%)}
}

@-ms-keyframes animationsup{
	0%{ -ms-transform: translateY(0)}
	
	100%{ -ms-transform: translateY(-100%)}
}

@keyframes animationsup{
	0%{transform: translateY(0)}
	
	100%{transform: translateY(-100%)}
}


/*logo滚动动画*/

@-webkit-keyframes animationstr{
	0%{left:0;}
	
	100%{left:-290%;}
}

@-moz-keyframes animationstr{
	0%{left:0;}
	
	100%{left:-290%;}
}

@-o-keyframes animationstr{
	0%{left:0;}
	
	100%{left:-290%;}
}

@-ms-keyframes animationstr{
	0%{left:0;}
	
	100%{left:-290%;}
}

@keyframes animationstr{
	0%{left:0;}
	
	100%{left:-290%;}
}


/*文字淡入效果*/

@-webkit-keyframes animationsop{
	0%{opacity: 0;}
	
	100%{opacity: 1;}
}

@-moz-keyframes animationsop{
	0%{opacity: 0;}
	
	100%{opacity: 1;}
}

@-o-keyframes animationsop{
	0%{opacity: 0;}
	
	100%{opacity: 1;}
}

@-ms-keyframes animationsop{
	0%{opacity: 0;}
	
	100%{opacity: 1;}
}

@keyframes animationsop{
	0%{opacity: 0;}
	
	100%{opacity: 1;}
}



/*首页logo移动动画*/

@-webkit-keyframes atioanimnsload{
	0%{-webkit-transform: translateX(120%)}
	
	100%{-webkit-transform: translateX(0)}
}

@-moz-keyframes atioanimnsload{
	0%{-moz-transform: translateX(120%)}
	
	100%{-moz-transform: translateX(0)}
}

@-o-keyframes atioanimnsload{
	0%{ -o-transform: translateX(120%)}
	
	100%{ -o-transform: translateX(0)}
}

@-ms-keyframes atioanimnsload{
	0%{ -ms-transform: translateX(120%)}
	
	100%{ -ms-transform: translateX(0)}
}

@keyframes atioanimnsload{
	0%{transform: translateX(120%)}
	
	100%{transform: translateX(0)}
}


/*向上滑屏动画*/

@-webkit-keyframes atioanimnsback{
	0%{-webkit-transform: translateY(-100%)}
	
	100%{-webkit-transform: translateY(0)}
}

@-moz-keyframes atioanimnsback{
	0%{-moz-transform: translateY(-100%)}
	
	100%{-moz-transform: translateY(0)}
}

@-o-keyframes atioanimnsback{
	0%{ -o-transform: translateY(-100%)}
	
	100%{ -o-transform: translateY(0)}
}

@-ms-keyframes atioanimnsback{
	0%{ -ms-transform: translateY(-100%)}
	
	100%{ -ms-transform: translateY(0)}
}

@keyframes atioanimnsback{
	0%{transform: translateY(-100%)}
	
	100%{transform: translateY(0)}
}