body {margin:0 auto;overflow:hidden;}  

/*=============第一页=============*/	
.header{
	margin:0 auto;
	width:100%;
	height:640px;
	background-color:#000;
	position:relative;
	}
.header canvas {
	width:100%;height:auto/*默认全屏显示 可自己设置高度640px*/;
	display:inline-block;vertical-align:baseline
	position:absolute;
	z-index:-1;
	}
/*用来解决视频右键菜单，用于视频上面的遮罩层*/
/*设置音乐显示位置*/
/*
.header .canvaszz{ 
	width:100%;
	background-image: url(img/in_top_bj.jpg);
	height:640px;
	position:absolute;
	z-index:10;
		filter:alpha(opacity=40);  
      	-moz-opacity:0.4;  
      	-khtml-opacity: 0.4;  
      	opacity: 0.4;
	}
.audio{ 

	width:45px;
	position:fixed;top:65px;left:94%;
	z-index:100;
	filter:alpha(opacity=30);  
      -moz-opacity:0.3;  
      -khtml-opacity: 0.3;  
      opacity: 0.3;
	}
*/
.header .top_logo{
	background-image: url(img/top_logo.png);
	margin:0 auto;
	width:750px;
	height:200px;
	position:absolute;
	z-index:30;
	top:10px;
	left: 50%;
	margin-left: -390px;
	}	

.header .nav{
	width:804px;
	height:auto;
	position:absolute;
	z-index:30;
	top:420px;
	left: 50%;
	margin-left: -400px;
	}
.header .nav a.gv { 
	text-decoration:none; 
	background:url(img/nav_gv.png) repeat 0px 0px; 
	width: 130px; 
	height: 43px; 
	display: block; 
	text-align:center;		/*水平居中*/
	line-height:43px;  /*上下居中*/
	cursor:pointer;
	float:left;/*左浮动*/
	margin:8px 2px 8px 2px;
	font:18px/43px 'microsoft yahei'; color:#066197;
	}
.header .nav a.gv span {
	 display: none;
	 	
}
.header .nav a.gv:hover { 
	background: url(img/nav_gv.png) repeat 0px -43px; 
	color:#1d7eb8;
	-webkit-box-shadow: 0 0 6px #1d7eb8;
	transition-duration: 0.5s;
	}
	
.header	.topcn{
	width: 980px;
	top:200px;
	left: 50%;
	margin-left: -490px;
	position:absolute;
	z-index:20;

	}

html,body,div,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,p { margin:0; padding:0; }
img { border:0; vertical-align:bottom; }
a { text-decoration:none; }
#bolang { width:100%; position:fixed; bottom:0; left:0; right:0; z-index:1; }
#bolang img { width:100%; height:auto; display:block; }
#beijing { width:100%; height:100%;background:url(../bj.png) no-repeat center;background-size:100% 100%;position:absolute;top:0;left:0;}

#logo { width:38%; margin-left:5%;margin-top:1.8%;opacity:0; }
#logo img { width:100%; display:block; }
.imgAnimation { 
	animation-name:imgAnimation; 
	animation:imgAnimation 0.5s alternate; 
	-webkit-animation:imgAnimation 0.5s alternate; 
	-moz-animation:imgAnimation 0.5s alternate; 
	animation-fill-mode:forwards; 
}
#one { 
	width:50.989583333333%; margin:0 auto; margin-top:4.5%;
	opacity:0; 
	animation:change 1.5s alternate; 
	-moz-animation:change 1.5s alternate; 
	-webkit-animation:change 1.5s alternate; 
	-o-animation:change 1.5s alternate; 
	animation-delay:0.5s; 
	-webkit-animation-delay:0.5s; 
	animation-fill-mode:forwards; 
}		
#one img { width:100%; display:block; }
#two { 
	width:40%; margin:0 auto; margin-top:6%; 
	opacity:0; animation-name:imgAnimation5; 
	animation:imgAnimation5 1s ; 
	-webkit-animation:imgAnimation5 1s; 
	-moz-animation:imgAnimation5 1s; 
	animation-delay:1.6s; 
	-webkit-animation-delay:1.6s; 
	animation-fill-mode:forwards; 
}
#two img { width:100%; display:block; }
#three { width:50%; margin:0 auto; margin-top:2%;}
#three-1{
	float:left;width:10%;margin-left:4.2%;
	opacity:0; 
	animation-name:imgAnimation6; 
	animation: imgAnimation6 0.5s alternate; 
	-webkit-animation:imgAnimation6 0.5s alternate; 
	-moz-animation:imgAnimation6 0.5s alternate; 
	animation-delay:2.2s; 
	-webkit-animation-delay:2.2s; 
	animation-fill-mode:forwards; 
}
#three-2{
	float:left;width:10%;margin-left:4.2%;
	opacity:0; 
	animation-name:imgAnimation6; 
	animation: imgAnimation6 0.5s alternate; 
	-webkit-animation:imgAnimation6 0.5s alternate; 
	-moz-animation:imgAnimation6 0.5s alternate; 
	animation-delay:2.6s; 
	-webkit-animation-delay:2.6s; 
	animation-fill-mode:forwards; 
}
#three-3{
	float:left;width:10%;margin-left:4.2%;
	opacity:0; 
	animation-name:imgAnimation6; 
	animation: imgAnimation6 0.5s alternate; 
	-webkit-animation:imgAnimation6 0.5s alternate; 
	-moz-animation:imgAnimation6 0.5s alternate; 
	animation-delay:3s; 
	-webkit-animation-delay:3s; 
	animation-fill-mode:forwards; 
}
#three-4{
	float:left;width:10%;margin-left:4.2%;
	opacity:0; 
	animation-name:imgAnimation6; 
	animation: imgAnimation6 0.5s alternate; 
	-webkit-animation:imgAnimation6 0.5s alternate; 
	-moz-animation:imgAnimation6 0.5s alternate; 
	animation-delay:3.4s; 
	-webkit-animation-delay:3.4s; 
	animation-fill-mode:forwards; 
}
#three-5{
	float:left;width:10%;margin-left:4.2%;
	opacity:0; 
	animation-name:imgAnimation6; 
	animation: imgAnimation6 0.5s alternate; 
	-webkit-animation:imgAnimation6 0.5s alternate; 
	-moz-animation:imgAnimation6 0.5s alternate; 
	animation-delay:3.8s; 
	-webkit-animation-delay:3.8s; 
	animation-fill-mode:forwards; 
}
#three-6{
	float:left;width:10%;margin-left:4.2%;
	opacity:0; 
	animation-name:imgAnimation6; 
	animation: imgAnimation6 0.5s alternate; 
	-webkit-animation:imgAnimation6 0.5s alternate; 
	-moz-animation:imgAnimation6 0.5s alternate; 
	animation-delay:4.2s; 
	-webkit-animation-delay:4.2s; 
	animation-fill-mode:forwards; 
}
#three-7{
	float:left;width:10%;margin-left:4.2%;
	opacity:0; 
	animation-name:imgAnimation6; 
	animation: imgAnimation6 0.5s alternate; 
	-webkit-animation:imgAnimation6 0.5s alternate; 
	-moz-animation:imgAnimation6 0.5s alternate; 
	animation-delay:4.6s; 
	-webkit-animation-delay:4.6s; 
	animation-fill-mode:forwards; 
}
#rukou { 
	width:16%; margin:0 auto; font-family:"微软雅黑"; font-weight:bold; font-size:26px; line-height:85px; text-align:center;margin-top:3.5%; background:url(../kou.png) no-repeat center;
	opacity:0; 
	animation-name:imgAnimation7; 
	animation:imgAnimation7 1s alternate; 
	-webkit-animation:imgAnimation7 1s alternate; 
	-moz-animation:imgAnimation7 1s alternate; 
	animation-delay:5s; -webkit-animation-delay:5s; 
	animation-fill-mode:forwards; 
	z-index:2; 
	position:relative; 
}
#rukou a { color:#39daff; }

@-webkit-keyframes imgAnimation { 
	0% { opacity:0; -webkit-transform:translateX(-100px); }	
	100% { opacity:1; -webkit-transform:translateX(0px); }
}
@keyframes imgAnimation {  
	0% { opacity:0; -webkit-transform:translateX(-100px); }	
	100% { opacity:1; -webkit-transform:translateX(0px); }
}
@-webkit-keyframes change {
	from { opacity:0; -webkit-transform:translateY(0px); }
	to {-webkit-transform:translateY(50px);  opacity: 1; }
}
@keyframes change {
	from { opacity:0; -webkit-transform:translateY(0px); }
	to {-webkit-transform:translateY(50px);  opacity: 1; }
}

@keyframes imgAnimation5 {  
   	0% { opacity:0;  }	
	100% { opacity:1;  }
}
@-webkit-keyframes imgAnimation5 {  
   	0% { opacity:0; }	
	100% { opacity:1; }
}
@keyframes imgAnimation6 {  
   	0% { opacity:0; -webkit-transform:translateX(0px); }	
	100% { opacity:1; -webkit-transform:translateX(-20px); }
}
@-webkit-keyframes imgAnimation6 {  
   	0% { opacity:0; -webkit-transform:translateX(0px); }	
	100% { opacity:1; -webkit-transform:translateX(-20px); }
}
@keyframes imgAnimation7 {  
   	0% { opacity:0; -webkit-transform:translateY(0px); }	
	100% { opacity:1; -webkit-transform:translateY(-20px); }
}
@-webkit-keyframes imgAnimation7 {  
   	0% { opacity:0; -webkit-transform:translateY(0px); }	
	100% { opacity:1; -webkit-transform:translateY(-20px); }
}