html,button {
	font: 12px/24px "Microsoft YaHei","微软雅黑",Helvetica,Tahoma,Arial,SimSun,"宋体",sans-serif;
	color: #000;
	outline: 0
}

body,div,dl,dt,dd,ul,ol,li,menu,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
	outline: 0
}

html,body {
	font-size: 100%;
	overflow: hidden;
	-webkit-transition: opacity 400ms;
	-moz-transition: opacity 400ms;
	transition: opacity 400ms;
	display: block;
	position: static;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%
}

html {
	-webkit-transition: opacity 400ms;
	-moz-transition: opacity 400ms;
	transition: opacity 400ms
}

body {
	background: #fff;
	color: #fff;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.7;
	position: relative;
	-webkit-transition: all 800ms ease-in-out;
	-moz-transition: all 800ms ease-in-out;
	-o-transition: all 800ms ease-in-out;
	transition: all 800ms ease-in-out
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: 400
}

a {
	color: #3498db;
	-webkit-transition: 300ms;
	-moz-transition: 300ms;
	-o-transition: 300ms;
	transition: 300ms;
	color: #fff;
	text-decoration: none
}

.clearfix {
	*zoom: 1
}

.clearfix:before,.clearfix:after {
	content: " ";
	display: table
}

.clearfix:after {
	clear: both
}

.hide {
	display: none
}

.antialiased {
	-webkit-font-smoothing: antialiased
}

.inner {
	width: 960px;
	margin: 0 auto;
	height: 100%;
	position: relative
}


.main {
	overflow: hidden
}

.main,.onescroll-page {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden
}

.onescroll-page {
	height: 955px
}

.onepage-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%
}

#output {
	opacity: .3;
	width: 100%;
	height: 100%;
	-webkit-transition: all 400ms ease-in-out;
	-ms-transition: all 400ms ease-in-out;
	-o-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out
}

.container {
	position: absolute;
	height: 100%;
	width: 100%
}

.pti_download,.pta_download,.ptc_download {
	display: block
}

.header {
	position: fixed;
	top: 0;
	z-index: 999999;
	width: 100%;
	border-bottom:1px solid #333;
	/*background:url(bg_dot.png);*/
	background:#111;
	opacity: .9;
}

.header .toolbar {
	width: 1000px;
	height: 52px;
	margin: 0 auto
}

.header .toolbar>a {
	display: block;
	background: url(logo_vgace.png) no-repeat 0 8px;
	float: left;
	text-indent: 26px;
	line-height: 49px !important;
	text-decoration: none
}

.header .toolbar span {
	color: #fff;
	font-size: 26px;
	text-transform:uppercase;
}

.header .toolbar .user-box {
	float: right
}

.header .toolbar a {
	display: inline-block;
	padding: 0 15px;
	font-size: 16px;
	line-height: 52px;
	color: #fff;
	text-decoration: none
}

.header .toolbar .user-box a.active {
	background-color: rgba(0,0,0,.3)
}

.onepage-pagination {
	position: absolute;
	right: 10px;
	top: 50%;
	z-index: 5;
	list-style: none;
	height: 140px;
	margin-top: -70px
}

.onepage-pagination li {
	padding: 0;
	text-align: center
}

.onepage-pagination li a {
	position: relative;
	width: 20px;
	height: 22px;
	display: block;
	background: url(sprite.png) no-repeat 4px -141px;
	text-decoration: none
}

.onepage-pagination li a.active,.onepage-pagination li a:hover {
	background: url(sprite.png) no-repeat 4px -93px
}

.onepage-pagination li a .name {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	right: 20px;
	color: #fff;
	line-height: 1;
	top: 5px;
	letter-spacing: 1px;
	font-size: 13px;
	text-align: right;
	white-space: nowrap
}

.onepage-pagination li a:hover .name {
	opacity: 1;
	visibility: visible
}

@media screen and (max-width:960px) {
	.main {
		overflow-x: auto
	}
}

.page1 h1 {
	position: absolute;
	top: 30px;
	left: 0
}

.page1 h1 a {
	color: #fff;
	display: block;
	overflow: hidden;
	height: 47px;
	line-height: 45px;
	font-size: 24px;
	padding-left: 52px;
	background: url(sprite.png) no-repeat 0 0
}

.page1 h1 a:hover {
	text-decoration: none
}

.page1 .textBox {
	width: 630px;
	height: 300px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -170px 0 0 -315px;
	text-align: center
}

.page1 .textBox h2 {
	font-size: 44px
}

.page1 .textBox h2.hot {
	font-size: 64px;
	margin-bottom:30px
}

.page1 .textBox h3 {
	font-size: 24px
}

.page1 .textBox a {
	color: #fff
}

.page1 .textBox .register {
	display: block;
	border: 1px solid #fff;
	width: 180px;
	line-height: 55px;
	margin: 0 auto;
	color: #fff;
	margin-top: 70px;
	font-size: 18px;
	margin-bottom: 14px;
	text-decoration: none
}

.page1 .textBox .login {
	text-decoration: underline
}

.gotopageBox {
	text-align: center;
	color: #fff;
	font-size: 12px;
	width: 180px;
	cursor: pointer;
	bottom: 17px;
	position: absolute;
	left: 50%;
	margin-left: -90px
}
.gotopageBox p{color:#616161;}
.gotopageBox a {
	display: block;
	width: 37px;
	height: 19px;
	background: url(down.png) no-repeat;
	margin: 0 auto 10px;
	text-indent: -9999px;
	position: relative;
	animation: flashing 1s linear infinite;
	-moz-animation: flashing 1s linear infinite;
	-webkit-animation: flashing 1s linear infinite;
	-o-animation: flashing 1s linear infinite;
}

@-webkit-keyframes flashing{
	0%{
		opacity:0.1;
	}
	50%{
		opacity:1;
	}
	100%{
		opacity:0.1;
	}
	
}
@keyframes flashing{
	0%{
		opacity:0.1;
	}
	50%{
		opacity:1;
	}
	100%{
		opacity:0.1;
	}
}


.page1 h1,.page1 .textBox,.page1 .gotopageBox {
	opacity: 0
}

.page1_current h1,.page1_current .textBox,.page1_current .gotopageBox {
	opacity: 1
}

.page1 .gotopageBox {
	-webkit-animation: both 1s bounceInUp;
		    animation: both 1s bounceInUp;
}

.page4 .textBox,.page5 .textBox {
	width: 500px;
	height: 450px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -225px 0 0 -253px;
	text-align: center
}

.page5 .textBox h2 {
	margin-bottom: 20px;
	font-size: 36px
}


.page5 .textBox div {
	padding-top:20px;
	font-size: 18px;
	text-align: center
}



.page1 .inner,.page2 .inner,.page3 .inner,.page4 .inner,.page5 .inner {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 820px;
	height: 600px;
	margin: -300px 0 0 -410px;
	text-align: center
}

.page2 .textBox {
	width: 800px;
	height: 450px;
	position: relative;
	left: 50%;
	top: 50%;
	margin: -225px 0 0 -403px;
	text-align: center
}

.page2 h1 {
	font-size: 40px
}

.page2 p {
	margin-top: 20px;
	text-indent: 2em;
	font-size: 20px;
	text-align: left
}
.page2 .textBox {
	width:600px;
	height: 450px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -225px 0 0 -303px;
	text-align: center
}
.page2 .textBox h2 {
	font-size: 20px;
	margin-top: 16px
}

.page2 .devicePanel {
	width: 260px;
	height: 260px;
	margin: 15px auto 0;
	background: url(fang.png) no-repeat;
	position: relative;
	background-size: 80%;
	background-position: center bottom;
	
}

.page2 img {
	width: 100%
}

.page3 .textBox {
	width: 600px;
	height: 450px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -225px 0 0 -303px;
	text-align: center
}

.page3 .textBox h2 {
	font-size: 36px;
	margin-top: 16px
}

.page4 .textBox h2 {
	font-size: 36px;
	text-align: center;
	height: 55px
}

.page3 .textBox p,.page4 .textBox p {
	margin: 30px 0;
	margin-bottom: 20px;
	text-indent: 2em;
	font-size: 18px;
	text-align: left
}

.p4_body {
	margin-top: 30px;
	text-align: left
}

.p4_body ul {
	margin: 20px;
	list-style: disc
}

.p4_body li {
	font-size: 20px
}



.header .toolbar .user-box a {
	text-decoration: none
}

.header .toolbar .user-box a:hover {
	background-color: rgba(0,0,0,.3)
}

.lt-ie9 .page3 .devicePanel {
	width: 680px;
	height: 550px;
	zoom: .6
}

.lt-ie9 .p5_body {
	width: 880px;
	margin-left: 0;
	height: 380px;
	zoom: .7;
	background-position: 264px -182px
}


@media screen and (max-width:820px) {
	.page1 .inner,.page2 .inner,.page3 .inner,.page4 .inner,.page5 .inner {
		left: 0;
		width: 100%;
		margin-left: 0
	}
}

@media screen and (max-width:520px) {
	.page1 .textBox,.page2 .textBox,.page3 .textBox,.page4 .textBox,.page5 .textBox {
		left: 0;
		margin-left: 0;
		width: 100%
	}

	* {
		font-size: 100% !important
	}

	.header .user-box {
		visibility: hidden
	}
}