html,body {
	padding: 0;
	margin: 0;
	font-size: 12px;
	font-family: '\5FAE\8F6F\96C5\9ED1';
	color: #444
}

hr,p,blockquote,dl,dt,dd,pre,form,fieldset,legend,button,input,textarea,td,figure,figcaption {
	border: 0;
	padding: 0;
	margin: 0;
	list-style: none;
	font-family: '\5FAE\8F6F\96C5\9ED1'
}

h1,h2,h3,h4,h5,h6 {
	padding: 0;
	margin: 0
}

em {
	font-style: normal
}

button {
	cursor: pointer
}

img {
	border: 0;
	vertical-align: middle
}

a {
	color: #444;
	text-decoration: none;
	outline: 0;
	blr: expression(this.onFocus=this.blur())
}

.transition {
	-webkit-transition: all .2s ease-in-out 0;
	-moz-transition: all .2s ease-in-out 0;
	-o-transition: all .2s ease-in-out 0;
	-ms-transition: all .2s ease-in-out 0;
	transition: all .2s ease-in-out 0
}

a:hover {
	color:#264a85;
	text-decoration: none
}

input,select,textarea {
	vertical-align: middle;
	font-size: 12px;
	font-family: "Microsoft Yahei",Verdana,Arial
}

table {
	border: 0;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0
}

.line-height {
	line-height:22px;
}

.list-unstyled {
	margin: 50px auto auto 50px !important;
	padding: 0 !important
}

.list-unstyled,
.list-unstyled > li {
	padding-left: 0;
	list-style: none
}

.list-unstyled,
.list-unstyled li {
	*margin: 0;
	*padding: 0;
	*list-style: none
}

.list-unpadding {
	padding-left: 0
}

.pull-left {
	float: left !important;
	display: inline
}

.pull-right {
	float: right !important;
	display: inline
}

.text-center {
	text-align: center!important
}

.text-left {
	text-align: left!important
}

.text-right {
	text-align: right!important
}

.clearfix:after,.row:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden
}

.clearfix,.row {
	display: inline-table
}

*html .clearfix,*html .row {
	height: 1%
}

.clearfix,.row {
	display: block
}

.clear {
	clear: both;
	*zoom: 1;
	height: 0;
	line-height: 0;
	font-size: 0;
	overflow: hidden
}

.hide {
	display: none!important;
	display: none
}

.col-md-1 {
	width: 8.3333333333%
}

.col-md-2 {
	width: 16.6666666667%
}

.col-md-3 {
	width: 25%
}

.col-md-4 {
	width: 33.3333333333%
}

.col-md-5 {
	width: 41.6666666667%
}

.col-md-6 {
	width: 50%
}

.col-md-7 {
	width: 58.3333333333%
}

.col-md-8 {
	width: 66.6666666667%
}

.col-md-9 {
	width: 75%
}

.col-md-10 {
	width: 83.3333333363%
}

.col-md-11 {
	width: 91.6666666667%
}

.col-md-12 {
	width: 100%
}

.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 {
	float: left;
	display: inline
}

.animated {
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both
}

.animated.hinge {
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-o-animation-duration: 2s;
	animation-duration: 2s
}

@-webkit-keyframes shake {
	0,100% {
		-webkit-transform: translateX(0)
	}

	10%,30%,50%,70%,90% {
		-webkit-transform: translateX(-10px)
	}

	20%,40%,60%,80% {
		-webkit-transform: translateX(10px)
	}
}

@-moz-keyframes shake {
	0,100% {
		-moz-transform: translateX(0)
	}

	10%,30%,50%,70%,90% {
		-moz-transform: translateX(-10px)
	}

	20%,40%,60%,80% {
		-moz-transform: translateX(10px)
	}
}

@-o-keyframes shake {
	0,100% {
		-o-transform: translateX(0)
	}

	10%,30%,50%,70%,90% {
		-o-transform: translateX(-10px)
	}

	20%,40%,60%,80% {
		-o-transform: translateX(10px)
	}
}

@keyframes shake {
	0,100% {
		transform: translateX(0)
	}

	10%,30%,50%,70%,90% {
		transform: translateX(-10px)
	}

	20%,40%,60%,80% {
		transform: translateX(10px)
	}
}

.shake {
	-webkit-animation-name: shake;
	-moz-animation-name: shake;
	-o-animation-name: shake;
	animation-name: shake
}

.rounded {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	behavior: url(pie.htc)\9
}

.circle {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	behavior: url(pie.htc)
}

.arrow {
	font-style: normal;
	font-family: monospace;
	margin-left: 5px
}

.placeholder {
	color: #777
}

.container {
	width: 1100px;
	min-width: 1100px;
	margin: 0 auto
}
.relative {position:relative}
.absolute {position:absolute}
.circle,.rounded {position:relative; z-index:1}

.icon {display: inline-block; *display: inline; *zoom:1; width:30px; height:30px; vertical-align:middle; background:url('../Images/sprite.png') no-repeat}
.icon-home {background-position:-30px 0}
.icon-play {background-position:-60px 0}
.icon-catg {background-position:-90px 0}

html,body {background:url('../Images/page3.jpg') no-repeat center top; background-size:auto 100%; position:relative}
.section {background-size:auto 100%; background-position:center top; background-repeat:no-repeat}

.page1 {background-image:url('../Images/page1.jpg')}
.page2 {background-image:url('../Images/page2.jpg')}
.page4 {background-image:url('../Images/page4.jpg')}

.page4 .fp-tableCell {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	height: 100%;
}

.page4 .info {height:140px; width:500px; position:absolute; left:50%; top:50%; margin-left:-250px; margin-top:-70px; line-height:30px; font-size:16px; color:#fff}
.page4 .info img {width:500px; margin-bottom:30px}


#nav {height:165px; width:21px; position:absolute; right:20px; top:50%; margin-top:-82px}
#nav a {display:block; width:21px; height:21px; margin:10px 0; background:url('../Images/dot.png') no-repeat 5px 5px}
#nav a.active {background-position:center bottom}

.page1 .wrap {width:580px; margin:0px auto auto auto; position:relative; height:100%; }
.page1 h2 {font-size:48px; font-weight:normal; position:absolute;top:100px; opacity:0; }
.page1 ul {display:block; position:absolute; top:100px; opacity:0;}
.page1 li {line-height:2em; font-size:16px;}
.page1 li .icon {margin-right:10px}

.page2 .wrap {width:100%; display:block; margin:0 auto; padding-top:100px}
.page2 .wrap h2,
.page2 .wrap h2 {display:inline-block; *display:inline; *zoom:1; font-size:60px; font-weight:normal; line-height:60px; height:60px; padding:20px 40px; border:1px solid #fff}
.page2 .wrap p {line-height:30px; font-size:20px; margin-top:50px}

.page3 .wrap {width:1000px; display:block; overflow:hidden; margin:0 auto; padding-top:100px}
.page3 .wrap h2 {display:inline-block; *display:inline;margin-bottom:50px; padding:10px 40px; font-size:60px; border:1px solid #333;}

.page3 .wrap ul {width:920px; position:relative; margin-right:-30px}
.page3 .wrap li {float:left; display:inline; width:190px; height:69px; overflow:hidden; padding-right:40px; padding-bottom:10px}
.page3 .wrap li a {display:block; width:188px; height:67px; border:1px solid #808080; overflow:hidden}
.page3 .wrap li a img {width:188px; height:67px}

.page5 .wrap {height:100%; position:relative; width:1000px; overflow:hidden; margin:0 auto}
.page5 .wrap .logo {width:40%; height:260px; margin-top:-150px; position:absolute; left:-40%; top:50%; text-align:right; opacity:0}
.page5 .wrap .contact {width:50%; height:260px; font-size:16px; line-height:50px; position:absolute; right:-50%; top:50%; margin-top:-120px; opacity:0}
.page5 .copyright {width:100%; height:30px; line-height:30px; font-size:12px; position:absolute; left:0; bottom:10px}


.page3.active ul {
	-webkit-animation:rolling 1s both;
	animation:rolling 1s both;
}
@keyframes rolling {
	0 {
		transform: scale(1,1);
		animation-timing-function: ease-out;
	}
	
	25% {
		transform: scale(0.95,0.95);
		animation-timing-function: ease-out;
	}
	
	50% {
		transform: scale(0.95,0);
		animation-timing-function: ease-out;
	}
	
	75% {
		transform: scale(0.95,0.95);
		animation-timing-function: ease-out;
	}
	
	100% {
		transform: scale(1,1);
		animation-timing-function: ease-out;
	}
}
@-webkit-keyframes rolling {
	0 {
		-webkit-transform: scale(1,1);
		transform: scale(1,1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	
	25% {
		-webkit-transform: scale(0.95,0.95);
		transform: scale(0.95,0.95);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	
	50% {
		-webkit-transform: scale(0.95,0);
		transform: scale(0.95,0);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	
	75% {
		-webkit-transform: scale(0.95,0.95);
		transform: scale(0.95,0.95);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
	
	100% {
		-webkit-transform: scale(1,1);
		transform: scale(1,1);
		-webkit-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
	}
}