html,body{
	margin:0px;
	padding:0px;

	height:100%;
	width:100%;
}

/*表格*/
.table{display:table;}
.table>div{display:table-cell;vertical-align:middle;}
  	
.scroll_panel{
	position:relative;
	left:0px;
	top:0px;
}
    	
section{
	background-color:#f1f1f1;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}
section[data-section-name='section-1']{
	background-image:url(../images/section-1.png);
}
section[data-section-name='section-2']{
	background-image:url(../images/section-2.png);
}
section[data-section-name='section-3']{
	
	background-color:#f1f1f1;
	background-size:847px 769px;
	background-position:center right;
	background-image:url(../images/section-3.png);
}
section[data-section-name='section-4']{
	background-color:#0e0e0e;
	background-size:1143px 906px;
	background-position:top left;
	background-image:url(../images/section-4.png);
}
section[data-section-name='section-5']{

	background-color:#e7e7e7;
	background-size:1662px 538px;
	background-position:bottom right;
	background-image:url(../images/section-5.png);
}
section[data-section-name='section-6']{

	background-color:#ffffff;
	background-image:url(../images/section-6-1.png),url(../images/section-6-2.png);
	background-size:111px 618px,69px 461px;
	background-position:35% 100%,20% 100%;
	
}
section[data-section-name='section-7']{

	background-color:#f6f6f6;
	background-size:883px 462px;
	background-position:50% 90%;
	background-image:url(../images/section-7.png);
}

section[data-section-name='section-8']{
	background-color:#e3e3e3;
	}
section[data-section-name='section-9']{
	
	background-color:#101010;
	
	}

/*动画 之上而下*/
#animation-1{
	position:absolute;
	width:500px;
	right:15%;
	top:31%;
	opacity:0.2;
	color:#FFF;
	font-family: "Microsoft YaHei", "Arial", "Helvetica", "SimSun", "Verdana", "sans-serif";
}
.logo{
	position:absolute;
	left:5%;
	top:5%;
}

.home{
	position:absolute;
	color:#FFF;
	font-size:18px;
	opacity:0.8;
	right:5%;
	top:5%;
	text-decoration:none;
}
.home:hover{

	animation-name:goHome;
	animation-duration:1s;
	animation-timing-function:linear;
	animation-delay:0s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	animation-play-state:running;
}
.am-1-1{
	font-size:20px;
	text-indent:40px; 
	word-spacing:40px; 
	letter-spacing:40px;
	text-align:center;
	margin-top:15px;
	font-family: "Microsoft YaHei", "Arial", "Helvetica", "SimSun", "Verdana", "sans-serif";
}

.am-1-2{
	font-size:18px;
	margin-top:110px;
	text-align:center;
}
.am-1-3{
	font-size:18px;
	text-align:center;
	margin:auto;
	margin-top:20px;
	width:90%;
}
.am-1-3 span{
	display:inline-block;
	width:30%;
}
	
#animation-2{
	position:absolute;
	width:890px;
	left:50%;
	margin-left:-445px;
	top:13%;
	opacity:0.5;
	color:#FFF;
	font-family: "Microsoft YaHei", "Arial", "Helvetica", "SimSun", "Verdana", "sans-serif";
}

.am-2-1{
	font-size:36px;
	text-align:center;
}

.am-2-2{
	font-size:18px;
	text-align:center;
	margin-top:30px;
	line-height:40px
}

.am-2-3{
	font-size:18px;
	text-align:center;
	margin:auto;
	margin-top:140px;
	width:600px;
}

.s2-icon{
	width:60px;
	height:60px;
	line-height:60px;
	vertical-align:middle;
	text-align:center;
	margin:auto;
}

#animation-3{
	position:absolute;
	width:580px;
	left:17%;
	top:20%;
	opacity:0.5;
	color:#757575;
	font-family: "Microsoft YaHei", "Arial", "Helvetica", "SimSun", "Verdana", "sans-serif";
}

.am-3-1{
	font-size:30px;
	text-align:left;
	color:#010101;
}
.am-3-2{
	font-size:18px;
	text-align:left;
	margin-top:30px;
	line-height:30px
}
.am-3-3{
	font-size:18px;
	text-align:center;
	margin:auto;
	margin-top:60px;
	width:580px;
}
.s3-icon{

	height:150px;
	line-height:150px;
	
	vertical-align:middle;
	text-align:center;
	margin:auto;
}
.s3-icon img{
	margin:auto;
	vertical-align:middle
	}
	
#animation-4{
	position:absolute;
	width:500px;
	right:17%;
	top:20%;
	opacity:1;
	color:#FFF;
	font-family: "Microsoft YaHei", "Arial", "Helvetica", "SimSun", "Verdana", "sans-serif";
}
.am-4-1{
	font-size:30px;
	text-align:left;
	color:#FFF;
}
.am-4-2{
	font-size:18px;
	text-align:left;
	margin-top:30px;
	line-height:30px
}
.am-4-3{
	font-size:18px;
	text-align:center;
	margin-top:60px;
	border:1px solid #7f7f7f;
	width:140px;
	height:140px;
	border-radius:5px;
}
.s4-icon{
	
	/*
	height:150px;
	line-height:150px;
	*/
	vertical-align:middle;
	text-align:center;
	margin:auto;
}
.s4-icon img{
	margin:auto;
	vertical-align:middle
}

#animation-5{
	position:absolute;
	width:580px;
	left:17%;
	top:15%;
	opacity:1;
	color:#b4b4b4;
	font-family: "Microsoft YaHei", "Arial", "Helvetica", "SimSun", "Verdana", "sans-serif";
}

.am-5-1{
	font-size:30px;
	text-align:left;
	color:#000000;
}
.am-5-2{
	font-size:18px;
	text-align:left;
	margin-top:30px;
	line-height:30px
}
.am-5-3{
	font-size:18px;
	text-align:center;
	margin-top:60px;
	border:1px solid #cccccc;
	width:140px;
	height:140px;
	border-radius:5px;
}
.s5-icon{
	/*
	height:150px;
	line-height:150px;
	*/
	vertical-align:middle;
	text-align:center;
	margin:auto;
}
.s5-icon img{
	margin:auto;
	vertical-align:middle
	}
	
#animation-6{
	position:absolute;
	width:550px;
	right:17%;
	top:25%;
	opacity:1;
	color:#9b9b9b;
	font-family: "Microsoft YaHei", "Arial", "Helvetica", "SimSun", "Verdana", "sans-serif";
}

.am-6-1{
	font-size:30px;
	text-align:left;
	color:#000000;
}
.am-6-2{
	font-size:18px;
	text-align:left;
	margin-top:30px;
	line-height:30px
}
.am-6-3{
	font-size:18px;
	text-align:center;
	margin-top:60px;
	border:1px solid #cccccc;
	width:140px;
	height:140px;
	border-radius:5px;
}
.s6-icon{
	/*
	height:150px;
	line-height:150px;
	*/
	vertical-align:middle;
	text-align:center;
	margin:auto;
}
.s6-icon img{
	margin:auto;
	vertical-align:middle
	}
	
#animation-7{
	position:absolute;
	width:890px;
	left:50%;
	margin-left:-445px;
	top:10%;
	opacity:1;
	color:#9b9b9b;
	font-family: "Microsoft YaHei", "Arial", "Helvetica", "SimSun", "Verdana", "sans-serif";
}

.am-7-1{
	font-size:36px;
	text-align:center;
	color: #000000;
}

.am-7-2{
	font-size:18px;
	text-align:center;
	margin-top:30px;
	line-height:40px
}

.am-7-3{
	font-size:18px;
	text-align:center;
	margin:auto;
	margin-top:30px;
	
	width:450px;
}

.s7-icon{
	width:60px;
	height:80px;
	line-height:80px;
	vertical-align:middle;
	text-align:center;
	margin:auto;
}
.s7-icon img{
	margin:auto;
	vertical-align:middle
}
	
#animation-8{
	position:absolute;
	width:1000px;
	left:50%;
	margin-left:-445px;
	bottom:20px;
	opacity:1;
	color:#9b9b9b;
	font-family: "Microsoft YaHei", "Arial", "Helvetica", "SimSun", "Verdana", "sans-serif";
}

.am-8-1{
	position:relative;
	top:100px;
	font:14px/1.5 arial,"\5FAE\8F6F\96C5\9ED1", tahoma, "\5b8b\4f53", sans-serif;
	font-size:36px;
	text-align:center;
	color: #010101;
}

.am-8-2{

	font:14px/1.5 arial,"\5FAE\8F6F\96C5\9ED1", tahoma, "\5b8b\4f53", sans-serif;
	font-size:18px;
	text-align:center;
	margin-top:110px;
	line-height:30px;
	color: #000000;
}

.am-8-3{
	font-size:18px;
	text-align:center;
	margin:auto;
	
	/*
	margin-top:70px;
	width:450px;
	*/
}

.s8-icon{
	float:left;
	margin:10px;
	width:480px;
	height:320px;
	
	vertical-align:middle;
	text-align:center;
	margin:auto;
	
	background-image:url(../images/point-w.png);
	background-size:470px 310px;
	background-repeat:no-repeat;
	background-position:center;
}
.s8-icon img{
	margin:40px auto;
	vertical-align:middle
}

.s8-icon>div:nth-child(2){
	color:#282828;
	}
.s8-icon>div:nth-child(3){
color:#7575758;
font-size:14px;
}
.s8-icon a{
	color:#282828;
	text-decoration:none;
}
	
#animation-9{
	position:absolute;
	width:100%;
	left:0;
	top:50%;
	opacity:1;
	color:#fff;
	font-family: "Microsoft YaHei", "Arial", "Helvetica", "SimSun", "Verdana", "sans-serif";
	background:#101010;
}
.am-9-1{
	margin-top:-10%;
	text-align:center;
}
.am-9-2{
	margin-top:20px;
	text-align:center;
	font-size:18px;
}
.am-9-3{
	margin-top:5px;
	text-align:center;
	font-size:14px;
}
.am-9-4{
	text-align:center;
	margin:30px auto;
}

.am-9-4 img{
	
	position:relative;
	cursor:pointer;
	animation-name:goTop;
	animation-duration:1s;
	animation-timing-function:linear;
	animation-delay:2s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
	animation-play-state:running;
}



/*导航点*/
.nav_panel{ position:fixed; top:50%; width:14px; right:20px; -webkit-transform:translate3d(0,-50%,0);  -moz-transform:translate3d(0,-50%,0);  -ms-transform:translate3d(0,-50%,0); transform:translate3d(0,-50%,0); z-index:9; -webkit-transition:opacity .5s, width .5s; -moz-transition:opacity .5s, width .5s; -ms-transition:opacity .5s, width .5s; transition:opacity .5s, width .5s; color:#7a7a7a; font-size:12px;} 
.nav_panel ul{padding:0px;width:7px;}
.nav_panel li{list-style: none;cursor:pointer;}
.nav_panel li .tips{ float:right; width:7px; height:7px; background-color:#7A7A7A; border-radius:50%; margin-bottom:15px; -webkit-transition:opacity .5s, width .5s; -moz-transition:opacity .5s, width .5s; -ms-transition:opacity .5s, width .5s; transition:opacity .5s, width .5s;}   
.nav_panel .active .tips,.nav_panel li:hover .tips{width:14px; background-color:#30A6E6; border-radius:7px;}


@keyframes goTop{
0%   {top:0px;}
50% {top:5px;}
75% {top:8px;}
100% {top:10px;}
}
@keyframes goHome{
0%   {right:5%;}
50% {right:5.5%;}
75% {right:5.8%;}
100% {right:6%;}
}