/*初始化*/
* {
	margin: 0;
	padding: 0;
	font-style: normal;
	vertical-align: baseline;
}
html, body {
	-webkit-overflow-scrolling: touch;
	font-family: "Microsoft Yahei", Helvetica, sans-serif;
	-webkit-user-select: none;
	user-select: none;
}
html {
	font-size: 100%;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;/* 2 */
	-webkit-text-size-adjust: 100%;/* 2 */
	background: #eeeeee;
}
body {
	color: #000;
	font-weight: normal;
	letter-spacing: 0.2px;
	line-height: 1.5;
}
a {
	color: #000;
	text-decoration: none;
	outline: none;
}
ol, ul {
	list-style: none;
}
img {
	vertical-align: top;
	border: none;
}
a, img {
	-webkit-touch-callout: none
}
a, div, img, button, input, textarea, label, select {
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
input, textarea {
	-webkit-appearance: none;
	appearance: none
}
h1, h2, h3, h4, h5, b {
	font-weight: normal;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/*.clearfix {
	*+height: 1%;
}*/
.pf {
	position: fixed;
	height: 100%;
	width: 100%;
}
.pr {
	position: relative;
}

/* M */
#dowebok  { width: 100%; height: 100%;  }
.section {
	text-align: center;
	background: #fff;
	width: 100%; height: 100%;
	position: relative;
	
}

.section span {
	padding-left: 0.4em;
	padding-right: 0.4em;
}

/*.section a { display:inline-block; background:url(../images/download.png) no-repeat; background-color:#3d8ce2; background-position:31px; height:54px; width:200px; border-radius:32px; color:#fff; font-size:27px; line-height:54px; padding-left: 16px; border:rgba(255,255,255,0.6) 4px solid; }*/
.section-first {
	background: url(../images/page1.jpg) no-repeat;
	background-size: 100% 100%;
}
.section-second {
	background: #fff;
}
.section-third {
	background: url(../images/page3.jpg) bottom center no-repeat;
	background-size: 100% 100%;
}
.section-fourth {
	/*background: url(../images/page4.jpg) no-repeat;*/
	background-size: 100% 100%;
}
.section-fifth {
	background: url(../images/page5.jpg) bottom center no-repeat;
	background-size: 100% 100%;
}
.section-sixth {
	/*background: url(../images/page6.jpg) no-repeat;*/
	background-size: 100% 100%;
}
.section-seventh {
	background: url(../images/page7.jpg) bottom center no-repeat;
	background-size: 100% 100%;
}
.section-eighth {
	/*background: url(../images/page8.jpg) no-repeat;*/
	background-size: 100% 100%;
}
.section-ninth {
	background: url(../images/page9.jpg) bottom center no-repeat;
	background-size: 100% 100%;
}
.fp-tableCell {
	position: relative;
	text-align: center;
}
.fp-tableCell img {
	max-height: 100%;
}
.div-img {
	position: absolute;
	bottom: 5%;
	left: 0;
	width: 100%;
	text-align: center;
	z-index: 3;
}
.fp-tableCell img {
	max-height: 100%;
}
.section-download a {
	display: inline-block;
	font-size: 16px;
	color: #000;
	border: #949494 1px solid;
	width: 118px;
	height: 38px;
	line-height: 38px;
	text-align: center;
	margin-right: 6px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}
.section-download a:hover {
	color: #fff;
	background-color: #acd952;
	border: #acd952 1px solid;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}
.section-download {
	z-index: 100;
	padding-top: 2%;
	text-align: left;
	margin-left: 50px;
	position: fixed;
	left: 0;
	top: 0;
	display: none;
}
.section-download img {
	padding-right: 6px;
	margin-top: 12px;
}

/*section-public*/
#s1_wrapper {
	width: 992px;
	height: 600px;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -496px;
}
#s2_wrapper, #s3_wrapper, #s4_wrapper, #s5_wrapper, #s6_wrapper, #s7_wrapper, #s8_wrapper, #s9_wrapper {
	width: 992px;
	height: 600px;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -300px 0 0 -496px;
}
.div-h1 {
	position: relative;
}
.div-h1, .div-h2, .download, .section-sec-content h3, .section-sec-content p {
	opacity: 0;
	-webkit-transform: translate3d(0, 125%, 0);
	-moz-transform: translate3d(0, 125%, 0);
	-ms-transform: translate3d(0, 125%, 0);
	transform: translate3d(0, 125%, 0);
	-webkit-transition: opacity 0.6s, transform 0.6s;
	-webkit-transition-delay: 1s;
	-moz-transition: opacity 0.6s, transform 0.6s;
	-moz-transition-delay: 1s;
	-ms-transition: opacity 0.6s, transform 0.6s;
	-ms-transition-delay: 1s;
	transition: opacity 0.6s, transform 0.6s;
	transition-delay: 1s;
}
.active.div-h1, .active.div-h2, .download.active, .section.active .section-sec-content h3, .section.active .section-sec-content p {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity: 1;
}
#s1 #s1_wrapper {
	position: absolute;
	height: 260px;
	width: 506px;
	margin: 0;
	left: auto;
	right: 15%;
	top: auto;
	bottom: 10%;
}
.div-h2, .section-sec-content p {
	transition-delay: 1.5s;
}

#s1 .active.div-h2 {
    transition-delay: 3.9s;
    padding-top: 20px;
}
.download {
	transition-delay: 4.2s;
}
.download {
	    margin-top: 18px !important;
    text-align: left;
    padding-left: 2px;
}
.download a {
	margin-right: 14px;
	 display: inline-block;
}
.download a:hover {
	background-color: #acd952;

    border-radius: 8px;
}
.div-h1-a {
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin: 0 -307px
}
.div-a-con {
	width: 100%;
	height: 74px;
	position: absolute;
	bottom: 0;
	left: 0;
}
.div-h1 img {
	padding-bottom: 10px;
}
.div-h1-a img {
	height: 63px;
	width: 614px;
	padding-bottom: 10px;
	border-bottom: 1px solid #838884;
	max-height: auto !important;
}
.div-h1.active .div-h1-a {
	-webkit-animation: load1h 1.5s linear 1.6s both;
	-moz-animation: load1h 1.5s linear 1.6s both;
	-ms-animation: load1h 1.5s linear 1.6s both;
	-o-animation: load1h 1.5s linear 1.6s both;
	animation: load1h 1.5s linear 1.6s both;	/*animation: load1h 5.5s ease-in-out forwards infinite*/
}
@-webkit-keyframes load1h {
	0% {
		width: 0px;
	}
	100% {
		width: 614px;
	}
}
@-moz-keyframes load1h {
	0% {
		width: 0px;
	}
	100% {
		width: 614px;
	}
}
@-ms-keyframes load1h {
	0% {
		width: 0px;
	}
	100% {
		width: 614px;
	}
}
@-o-keyframes load1h {
	0% {
		width: 0px;
	}
	100% {
		width: 614px;
	}
}
@keyframes load1h {
	0% {
		width: 0px;
	}
	100% {
		width: 614px;
	}
}
.div-h2 {
	padding-top: 14px;
}
.section-sec-content {
	width: 690px;
	padding-top: 3%;
	margin: 0 auto;
}
.section-sec-content h3 {
	font-size: 38px;
	line-height: 80px;
}
.section-sec-content p {
	color: #666b70;
	font-size: 16px;
	line-height: 24px;
	padding: 0 26px;
}

/*页面二动画*/
.s2-icon {
	width: 502px;
	height: 380px;
	position: absolute;
	bottom: 4%;
	left: 50%;
	margin-left: -251px;
}
.s2-img1 {
	background: url(../images/banner2.png) no-repeat;
	background-size: 100%;
	width: 502px;
	height: 289px;
	position: absolute;
	bottom: 10px;
	left: 50%;
	margin-left: -251px;
	z-index: 10;
}
.active .s2-img1 {
	-webkit-animation: process 0.6s linear 1.5s both;
	-moz-animation: process 0.6s linear 1.5s both;
	-ms-animation: process 0.6s linear 1.5s both;
	-o-animation: process 0.6s linear 1.5s both;
	animation: process 0.6s linear 1.5s both;
}
@-webkit-keyframes process {
	0% {
		opacity: 0;
		-webkit-transform: scale(0)
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
}
@-moz-keyframes process {
	0% {
		opacity: 0;
		-webkit-transform: scale(0)
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
}
@keyframes process {
	0% {
		opacity: 0;
		-webkit-transform: scale(0)
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
}
.s2-img2-position {
	width: 404px;
	height: 327px;
	position: absolute;
	bottom: 53px;
	left: 50%;
	margin-left: -202px;
	z-index: 6;
}
.s2-img2-left {
	background-color: #fff;
	overflow: hidden;
	opacity: 1;
	width: 202px;
	height: 327px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 6;
}
.s2-img2-right {  
	background-color: #fff;
	overflow: hidden;
	opacity: 1;
	width: 202px;
	height: 327px;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 6;
}
.s2-img2 {
	background: url(../images/s2-img2.png) no-repeat;
	background-size: 100%;
	width: 404px;
	height: 327px;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -202px;
	z-index: 3;
}
.active  .s2-img2-left {
	-webkit-animation: s2-bot 0.5s linear 2.0s both;
	-moz-animation: s2-bot 0.5s linear 2.0s both;
	-ms-animation: s2-bot 0.5s linear 2.0s both;
	-o-animation: s2-bot 0.5s linear 2.0s both;
	animation: s2-bot 0.5s linear 2.0s both;
}
.active  .s2-img2-right {
	-webkit-animation: s2-bot 0.5s linear 2.5s both;
	-moz-animation: s2-bot 0.5s linear 2.5s both;
	-ms-animation: s2-bot 0.5s linear 2.5s both;
	-o-animation: s2-bot 0.5s linear 2.5s both;
	animation: s2-bot 0.5s linear 2.5s both;
}
@-webkit-keyframes s2-bot {
	0% {
		height: 327px;
	}
	100% {
		height: 0;
	}
}
@-moz-keyframes s2-bot {
	0% {
		height: 327px;
	}
	100% {
		height: 0;
	}
}
@-ms-keyframes s2-bot {
	0% {
		height: 327px;
	}
	100% {
		height: 0;
	}
}
@keyframes s2-bot {
	0% {
		height: 327px;
	}
	100% {
		height: 0;
	}
}
.s2-img3,.s2-i3 {
	background: url(../images/s2-b1.png) no-repeat;
    background-size: 100%;
    width: 112px;
    height: 112px;
    position: absolute;
    bottom: -11px;
    left: -17px;
    z-index: 11;
    opacity: 0;
}
.s2-img3-1 {
	background: url(../images/banner2-electric.png) no-repeat;
	background-size: 100%;
	width: 94px;
	height: 93px;
	position: absolute;
	bottom: 140px;
	left: 13px;
	z-index: 10;
	opacity: 0;
}
.s2-img4,.s2-i4 {
	    background: url(../images/s2-b2.png) no-repeat;
    background-size: 100%;
    width: 112px;
    height: 112px;
    position: absolute;
    top: -3px;
    left: -6px;
    z-index: 11;
    opacity: 0;
}
.s2-img4-1 {
	background: url(../images/banner2-heat.png) no-repeat;
	background-size: 100%;
	width: 94px;
	height: 93px;
	position: absolute;
	top: -18px;
	left: 100px;
	z-index: 10;
	opacity: 0;
}
.s2-img5,.s2-i5 {
	    background: url(../images/s2-b3.png) no-repeat;
    background-size: 100%;
    width: 112px;
    height: 112px;
    position: absolute;
    top: -11px;
    right: -6px;
    z-index: 11;
    opacity: 0;
}
.s2-img5-1 {
	background: url(../images/banner2-building.png) no-repeat;
	background-size: 100%;
	width: 94px;
	height: 93px;
	position: absolute;
	top: -18px;
	right: 100px;
	z-index: 10;
	opacity: 0;
}
.s2-img6,.s2-i6 {
	background: url(../images/s2-b4.png) no-repeat;
    background-size: 100%;
    width: 112px;
    height: 112px;
    position: absolute;
    bottom: -10px;
    right: -8px;
    z-index: 11;
    opacity: 0.3;
}
.s2-img6-1 {
	background: url(../images/banner2-water.png) no-repeat;
	background-size: 100%;
	width: 94px;
	height: 93px;
	position: absolute;
	bottom: 140px;
	right: 2px;
	z-index: 10;
	opacity: 0;
}
.active .tStart .s2-img3 {
	opacity: 0;
	-webkit-animation: s2-iconbig 2s linear 2.4s both;
	-moz-animation: s2-iconbig 2s linear 2.4s both;
	-ms-animation: s2-iconbig 2s linear 2.4s both;
	animation: s2-iconbig 2s linear 2.4s both;
}
.active .tStart .s2-img3.hover {
	opacity: 1 !important;
	animation:none;
}


@-webkit-keyframes s2-ihover {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.6)
	}
	
	100% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
}

.active .tTime.tStart .s2-img3 {
	-webkit-animation: s2-iconbig 2s linear 0.2s both;
	-moz-animation: s2-iconbig 2s linear 0.2s both;
	-ms-animation: s2-iconbig 2s linear 0.2s both;
	animation: s2-iconbig 2s linear 0.2s both;
}
.active  .s2-img3-1 {
	-webkit-animation: s2-icon  0.1s linear 3.2s both;
	-moz-animation: s2-icon  0.1s linear 3.2s both;
	-ms-animation: s2-icon  0.1s linear 3.2s both;
	animation: s2-icon  0.1s linear 3.2s both;
}
.active .tTime.tStart .s2-img3-1 {
	-webkit-animation: s2-icon  0.1s linear 1.6s both;
	-moz-animation: s2-icon  0.1s linear 1.6s both;
	-ms-animation: s2-icon  0.1s linear 1.6s both;
	animation: s2-icon  0.1s linear 1.6s both;
}
.active .s2-img4-1 {
	-webkit-animation: s2-icon 0.1s linear 4s both;
	-moz-animation: s2-icon  0.1s linear 4s both;
	-ms-animation: s2-icon  0.1s linear 4s both;
	animation: s2-icon  0.1s linear 4s both;
}
.active .tTime.tStart .s2-img4-1 {
	-webkit-animation: s2-icon 0.1s linear 3.1s both;
	-moz-animation: s2-icon  0.1s linear 3.1s both;
	-ms-animation: s2-icon  0.1s linear 3.1s both;
	animation: s2-icon  0.1s linear 3.1s both;
}
.active  .s2-img5-1 {
	-webkit-animation: s2-icon  0.1s linear 4.8s both;
	-moz-animation: s2-icon  0.1s linear 4.8s both;
	-ms-animation: s2-icon  0.1s linear 4.8s both;
	animation: s2-icon  0.1s linear 4.8s both;
}
.active .tTime.tStart .s2-img5-1 {
	-webkit-animation: s2-icon  0.1s linear 4.7s both;
	-moz-animation: s2-icon  0.1s linear 4.7s both;
	-ms-animation: s2-icon  0.1s linear 4.7s both;
	animation: s2-icon  0.1s linear 4.7s both;
}
.active .s2-img6-1 {
	-webkit-animation: s2-icon  0.1s linear 5.6s both;
	-moz-animation: s2-icon 0.1s linear 5.6s both;
	-ms-animation: s2-icon 0.1s linear 5.6s both;
	animation: s2-icon  0.1s linear 5.6s both;
}
.active .tTime.tStart .s2-img6-1 {
	-webkit-animation: s2-icon  0.1s linear 6.2s both;
	-moz-animation: s2-icon 0.1s linear 6.2s both;
	-ms-animation: s2-icon 0.1s linear 6.2s both;
	animation: s2-icon  0.1s linear 6.2s both;
}
.active .tStart .s2-img4 {
	opacity: 0;
	-webkit-animation: s2-iconbig 2s linear 3.2s both;
	-moz-animation: s2-iconbig 2s linear 3.2s both;
	-ms-animation: s2-iconbig 2s linear 3.2s both;
	animation: s2-iconbig 2s linear 3.2s both;
}
.active .tTime.tStart .s2-img4 {
	opacity: 0;
	-webkit-animation: s2-iconbig 2s linear 2.1s both;
	-moz-animation: s2-iconbig 2s linear 2.1s both;
	-ms-animation: s2-iconbig 2s linear 2.1s both;
	animation: s2-iconbig 2s linear 2.1s both;
}
.active .tStart .s2-img5 {
	opacity: 0;
	-webkit-animation: s2-iconbig 2s linear 4s both;
	-moz-animation: s2-iconbig 2s linear 4s both;
	-ms-animation: s2-iconbig 2s linear 4s both;
	animation: s2-iconbig 2s linear 4s both;
}
.active .tTime.tStart .s2-img5 {
	-webkit-animation: s2-iconbig 2s linear 3.6s both;
	-moz-animation: s2-iconbig 2s linear 3.6s both;
	-ms-animation: s2-iconbig 2s linear 3.6s both;
	animation: s2-iconbig 2s linear 3.6s both;
}

.active .tStart .s2-img6 {
	opacity: 0;
	-webkit-animation: s2-iconbig 2s linear 4.8s both;
	-moz-animation: s2-iconbig 2s linear 4.8s both;
	-ms-animation: s2-iconbig 2s linear 4.8s both;
	animation: s2-iconbig 2s linear 4.8s both;
}

.s2-i5 {
	
	opacity: 0;
    -webkit-transition: opacity 0.5s;
    -webkit-transition-delay: 6.6s;
    -moz-transition: opacity 0.5s;
    -moz-transition-delay: 6.6s;
    -ms-transition: opacity 0.5s;
    -ms-transition-delay: 6.6s;
    -o-transition: opacity 0.5s;
    -o-transition-delay: 6.6s;
    transition: opacity 0.5s;
    transition-delay: 6.6s;
}
.active .tStart .s2-i5 { 
	opacity: 1;
}

@-webkit-keyframes s2-iconbig {
	0% {
		opacity: 0;
		-webkit-transform: scale(1)
	}
	40% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
	60% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(0.6)
	}
}
@-moz-keyframes s2-iconbig {
	0% {
		opacity: 0;
		-webkit-transform: scale(1)
	}
	40% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
	60% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(0.6)
	}
}
@-ms-keyframes s2-iconbig {
	0% {
		opacity: 0;
		-ms-transform: scale(1)
	}
	40% {
		opacity: 1;
		-ms-transform: scale(1)
	}
	60% {
		opacity: 1;
		-ms-transform: scale(1)
	}
	100% {
		opacity: 0;
		-ms-transform: scale(0.6)
	}
}

@keyframes s2-iconbig {
	0% {
		opacity: 0;
		-webkit-transform: scale(1)
	}
	40% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
	60% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(0.6)
	}
}

@-webkit-keyframes s2-iconbi1g {
	0% {
		opacity: 0;
		-webkit-transform: scale(1)
	}
	40% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
	60% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(0.6)
	}
}
@-moz-keyframes s2-iconbi1g {
	0% {
		opacity: 0;
		-webkit-transform: scale(1)
	}
	40% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
	60% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(0.6)
	}
}
@-ms-keyframes s2-iconbi1g {
	0% {
		opacity: 0;
		-ms-transform: scale(1)
	}
	40% {
		opacity: 1;
		-ms-transform: scale(1)
	}
	60% {
		opacity: 1;
		-ms-transform: scale(1)
	}
	100% {
		opacity:1;
		-ms-transform: scale(0.6)
	}
}

@keyframes s2-iconbi1g {
	0% {
		opacity: 0;
		-webkit-transform: scale(1)
	}
	40% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
	60% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
}


@-webkit-keyframes s2-icon {
	0% {
		opacity: 0;
		-webkit-transform: scale(0)
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
}
@-moz-keyframes s2-icon {
	0% {
		opacity: 0;
		-webkit-transform: scale(0)
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
}
@-ms-keyframes s2-icon {
	0% {
		opacity: 0;
		-ms-transform: scale(0)
	}
	100% {
		opacity: 1;
		-ms-transform: scale(1)
	}
}
@keyframes s2-icon {
	0% {
		opacity: 0;
		-webkit-transform: scale(1)
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1)
	}
}

/*.pathway {
	position:absolute;
	left:50%;
	margin-left:-240px;
	z-index:0;
	height:480px;
	width:480px;
	bottom:20px;
	opacity: 0;
    -webkit-transition: opacity 1.5s;
    -webkit-transition-delay: 1s;
    -moz-transition: opacity 1.5s;
    -moz-transition-delay: 1s;
    -ms-transition: opacity 1.5s;
    -ms-transition-delay: 1s;
    -o-transition: opacity 1.5s;
    -o-transition-delay: 1s;
    transition: opacity 1.5s;
    transition-delay: 1s;
}
.active .pathway {
    opacity: 1;
}
.pathway>.content-pathway {
	position:relative;
	z-index:0;
    height: 100%;
    width: 100%;
}
.pathway>.content-pathway.forie {
	display:none
}
.pathway>.content-pathway>div {
	position:absolute;
	width:328px;
	height:328px;
	border-radius:50%;
	border:1px solid #e3e3e7;
	
}
.pathway>.content-pathway> .spn-1 {
border:1px solid #e3e3e7; left: 75px;  top: 75px;
}
.pathway>.content-pathway> .spn-2 {
height:478px;
width:478px;
z-index:-1
}
.pathway>.content-pathway>div>div {
	width:100%;
	height:100%;
	position:absolute;
	-webkit-transform-style:preserve-3d;
	-webkit-animation:trail_ 5s infinite linear;
	-moz-transform-style:preserve-3d;
	-moz-animation:trail_ 5s infinite linear;
	-ms-transform-style:preserve-3d;
	-ms-animation:trail_ 5s infinite linear;
	-o-transform-style:preserve-3d;
	-o-animation:trail_ 5s infinite linear;
	transform-style:preserve-3d;
	animation:trail_ 5s infinite linear
}
.pathway>.content-pathway>div>div:after { background:#a6a6a6; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;
	content:"";
	position:absolute;
	top:-8px;
	left:50%;
	width:16px;
	height:16px;
	margin:0;
	background-size: 100%;
	border-radius:50%;
	
}
.pathway>.content-pathway>div.spn-2>div {
	width:100%;
	height:100%;
	position:absolute;
	-webkit-transform-style:preserve-3d;
	-webkit-animation:trail_ 5s infinite linear;
	-moz-transform-style:preserve-3d;
	-moz-animation:trail2_ 5s infinite linear;
	-ms-transform-style:preserve-3d;
	-ms-animation:trail2_ 5s infinite linear;
	-o-transform-style:preserve-3d;
	-o-animation:trail2_ 5s infinite linear;
	transform-style:preserve-3d;
	animation:trail2_ 5s infinite linear
}
 .pathway>.content-pathway>div.spn-2>div:after  { background:#a6a6a6; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;
	content:"";
	position:absolute;
	top:-8px;
	left:50%;
	width:16px;
	height:16px;
	margin:0;
	background-size: 100%;
	border-radius:50%;
}
@-webkit-keyframes trail_ {
from {
-webkit-transform:rotateZ(0)
}
to {
	-webkit-transform:rotateZ(-360deg)
}
}
@-moz-keyframes trail_ {
from {
-moz-transform:rotateZ(0)
}
to {
	-moz-transform:rotateZ(-360deg)
}
}
@-o-keyframes trail_ {
from {
-o-transform:rotateZ(0)
}
to {
	-o-transform:rotateZ(-360deg)
}
}
@keyframes trail_ {
from {
transform:rotateZ(0)
}
to {
	transform:rotateZ(-360deg)
}
}


@-webkit-keyframes trail2_ {
from {
-webkit-transform:rotateZ(90deg)
}
to {
	-webkit-transform:rotateZ(450deg)
}
}
@-moz-keyframes trail2_ {
from {
-moz-transform:rotateZ(90deg)
}
to {
	-moz-transform:rotateZ(450deg)
}
}
@-o-keyframes trail2_ {
from {
-o-transform:rotateZ(90deg)
}
to {
	-o-transform:rotateZ(450deg)
}
}
@keyframes trail2_ {
from {
transform:rotateZ(90deg)
}
to {
	transform:rotateZ(450deg)
}
}


.s2-icon {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
}

/*加上*/

/*.safe{ width:100%; height:100%; background: url(../images/banner2.png) no-repeat; background-size:60%; background-position:center; position:absolute;top:0;left:0;z-index:50}
.point {
	background: url(../images/s2-virus.png) no-repeat;
	height: 100%;
    width: 100%;
	position:absolute;
	top:0;
	left:0;
	_border:#000 solid 1px;
	z-index:6;
	-webkit-transform:translateZ(0);
	-moz-transform:translateZ(0);
	transform:translateZ(0);
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	backface-visibility:hidden
}
.active .point {
	-webkit-animation:pointAnimations 4s linear infinite;
	-moz-animation:pointAnimations 4s linear infinite;
	-ms-animation:pointAnimations 4s linear infinite;
	animation:pointAnimations 4s linear infinite
}
@-webkit-keyframes pointAnimations {
0% {
transform:rotate(-90deg)
}
100% {
transform:rotate(270deg)
}
}
@-moz-keyframes pointAnimations {
0% {
transform:rotate(-90deg)
}
100% {
transform:rotate(270deg)
}
}
@-ms-keyframes pointAnimations {
0% {
transform:rotate(-90deg)
}
100% {
transform:rotate(270deg)
}
}
@keyframes pointAnimations {
0% {
transform:rotate(-90deg)
}
100% {
transform:rotate(270deg)
}
}*/*/

/*加上*/

/*.s2-icon-1 { 
    background:url(../images/banner2-electric.png) no-repeat;
    background-size: 100%;
    width: 110px;
    height: 110px;
    position: absolute;
    left: -50px;
    top: 50%;
    margin-top: -50px;
	z-index: 10;
}
.s2-icon-2 {
    background: url(../images/banner2-heat.png) no-repeat;
    background-size: 100%;
    width: 105px;
    height: 105px;
    position: absolute;
    left: 50%;
    top: 50px;
    margin-left: -50px;
	z-index: 10;
}
.s2-icon-3 {
    background: url(../images/banner2-water.png) no-repeat;
    background-size: 100%;
    width: 104px;
    height: 104px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    right: -50px;
	z-index: 10;
	}
.s2-icon-4 {
    background: url(../images/banner2-building.png) no-repeat;
    background-size: 100%;
    width: 104px;
    height: 104px;
    position: absolute;
    left: 50%;
    bottom: 23px;
    margin-left: -50px;
	z-index: 10;
}
.active .s2-icon-1 {
    -webkit-animation: rota 0.4s linear 3.9s both;
    -moz-animation: rota 0.4s linear 3.9s both;
    -ms-animation: rota 0.4s linear 3.9s both;
    -o-animation: rota 0.4s linear 3.9s both;
    animation: rota 0.4s linear 3.9s both;
}
.active .s2-icon-2 {
    -webkit-animation: rota 0.4s linear 4.9s both;
    -moz-animation: rota 0.4s linear 4.9s both;
    -ms-animation: rota 0.4s linear 4.9s both;
    -o-animation: rota 0.4s linear 4.9s both;
    animation: rota 0.4s linear 4.9s both;
}
.active .s2-icon-3 {
    -webkit-animation: rota 0.4s linear 1.9s both;
    -moz-animation: rota 0.4s linear 1.9s both;
    -ms-animation: rota 0.4s linear 1.9s both;
    -o-animation: rota 0.4s linear 1.9s both;
    animation: rota 0.4s linear 1.9s both;
}
.active .s2-icon-4 {
    -webkit-animation: rota 0.4s linear 2.9s both;
    -moz-animation: rota 0.4s linear 2.9s both;
    -ms-animation: rota 0.4s linear 2.9s both;
    -o-animation: rota 0.4s linear 2.9s both;
    animation: rota 0.4s linear 2.9s both;
}
@-webkit-keyframes rota {
    0% {
		opacity: 0;
		-webkit-transform:scale(0)
	}
	100% {
		opacity: 1;
		-webkit-transform:scale(1)
	}
}
@-moz-keyframes rota {
    0% {
		opacity: 0;
		-webkit-transform:scale(0)
	}
	100% {
		opacity: 1;
		-webkit-transform:scale(1)
	}
}
@-ms-keyframes rota {
   0% {
		opacity: 0;
		-webkit-transform:scale(0)
	}
	100% {
		opacity: 1;
		-webkit-transform:scale(1)
	}
}
@-o-keyframes rota {
    0% {
		opacity: 0;
		-webkit-transform:scale(0)
	}
	100% {
		opacity: 1;
		-webkit-transform:scale(1)
	}
}
@keyframes rota {
    0% {
		opacity: 0;
		-webkit-transform:scale(0)
	}
	100% {
		opacity: 1;
		-webkit-transform:scale(1)
	}
}*/

/*页面二动画结束*/

/*页面三*/
.s3-con {
	width: 1140px;
	height: 500px;
	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-left: -570px;
	z-index: 3
}
.s3-img1 {
	position: absolute;
	right: 50%;
	bottom: 20px;
	margin-right: -552px;
	width: 1104px;
	height: 248px;
	background: url(../images/banner3-img1.png) center center no-repeat;
}
.s3-img2 {
	position: absolute;
	opacity: 0;
	right: 50%;
	margin-right: -436px;
	bottom: 66px;
	width: 185px;
	height: 185px;
	background: url(../images/banner3-img2.png) center center no-repeat;
	background-size: 100%;
	transition: opacity 2s;
	transition-delay: 1.5s;
}
.s3-img3 {
	position: absolute;
	right: 50%;
	margin-right: 182px;
	bottom: 148px;
	height: 84px;
	width: 64px;
	background: url(../images/banner3-img3.png) center center no-repeat;
}
.s3-img4 {
	position: absolute;
	right: 50%;
	margin-right: 50px;
	bottom: 208px;
	width: 64px;
	height: 84px;
	background: url(../images/banner3-img4.png) center center no-repeat;
}
.s3-img5 {
	position: absolute;
	right: 50%;
	margin-right: -180px;
	bottom: 218px;
	width: 64px;
	height: 84px;
	background: url(../images/banner3-img5.png) center center no-repeat;
}
.s3-img1 {
	opacity: 0;
	-webkit-transform: translate3d(-100%, 0, 0);
	-webkit-transition: opacity 1.5s, transform 1.5s;
	-webkit-transition-delay: 0.7s;
	-moz-transform: translate3d(-100%, 0, 0);
	-moz-transition: opacity 1.5s, transform 1.5s;
	-moz-transition-delay: 0.7s;
	-ms-transform: translate3d(-100%, 0, 0);
	-ms-transition: opacity 1.5s, transform 1.5s;
	-ms-transition-delay: 0.7s;
	-o-transform: translate3d(-100%, 0, 0);
	-o-transition: opacity 1.5s, transform 1.5s;
	-o-transition-delay: 0.7s;
	transform: translate3d(-100%, 0, 0);
	transition: opacity 1.5s, transform 1.5s;
	transition-delay: 0.7s;
}
.active .s3-img1 {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.active .s3-img2 {
	opacity: 1;
	-webkit-animation: update 5s infinite;
	-moz-animation: update 5s infinite;
	-ms-animation: update 5s infinite;
	-o-animation: update 5s infinite;
	animation: update 5s infinite;
	animation-iteration-count: 2;
	-webkit-animation-iteration-count: 2;
}
@-webkit-keyframes update {
	0% {
		-webkit-transform: rotateZ(0deg);
	}
	20% {
		-webkit-transform: rotateZ(180deg);
	}
	50% {
		-webkit-transform: rotateZ(180deg);
	}
	70% {
		-webkit-transform: rotateZ(360deg);
	}
	100% {
		-webkit-transform: rotateZ(360deg);
	}
}
@-moz-keyframes update {
	0% {
		-moz-transform: rotateZ(0deg);
	}
	20% {
		-moz-transform: rotateZ(180deg);
	}
	50% {
		-moz-transform: rotateZ(180deg);
	}
	70% {
		-moz-transform: rotateZ(360deg);
	}
	100% {
		-moz-transform: rotateZ(360deg);
	}
}
@-ms-keyframes update {
	0% {
		-ms-transform: rotateZ(0deg);
	}
	20% {
		-ms-transform: rotateZ(180deg);
	}
	50% {
		-ms-transform: rotateZ(180deg);
	}
	70% {
		-ms-transform: rotateZ(360deg);
	}
	100% {
		-ms-transform: rotateZ(360deg);
	}
}
@keyframes update {
	0% {
		transform: rotateZ(0deg);
	}
	20% {
		transform: rotateZ(180deg);
	}
	50% {
		transform: rotateZ(180deg);
	}
	70% {
		transform: rotateZ(360deg);
	}
	100% {
		transform: rotateZ(360deg);
	}
}
.active .s3-img3 {
	-webkit-animation: load2h 0.4s ease-out 3s both;
	-moz-animation: load2h 0.4s ease-out 3s both;
	-ms-animation: load2h 0.4s ease-out 3s both;
	animation: load2h 0.4s ease-out 3s both;
}
.active .s3-img4 {
	-webkit-animation: load2h 0.4s ease-out 4.4s both;
	-moz-animation: load2h 0.4s ease-out 4.4s both;
	-ms-animation: load2h 0.4s ease-out 4.4s both;
	animation: load2h 0.4s ease-out 4.4s both;
}
.active .s3-img5 {
	-webkit-animation: load2h 0.4s ease-out 6s both;
	-moz-animation: load2h 0.4s ease-out 6s both;
	-ms-animation: load2h 0.4s ease-out 6s both;
	animation: load2h 0.4s ease-out 6s both;
}
@-webkit-keyframes load2h {
	0% {
		opacity: 0;
		-webkit-transform:scale(0.3);
	}
	100% {
		opacity: 1;
		-webkit-transform:scale(1);
	}
}
@-moz-keyframes load2h {
	0% {
		opacity: 0;
		-moz-transform:scale(0.3);
	}
	100% {
		opacity: 1;
		-moz-transform:scale(1);
	}
}
@-ms-keyframes load2h {
	0% {
		opacity: 0;
		-ms-transform:scale(0.3);
	}
	100% {
		opacity: 1;
		-ms-transform:scale(1);
	}
}
@keyframes load2h {
	0% {
		opacity: 0;
		transform:scale(0.3)
	}
	100% {
		opacity: 1;
		transform:scale(1);
	}
}
.s3-line-1 div, .s3-line-2 div, .s3-line-3 div{
	background: url(../images/banner3-line1.png) left top no-repeat;
	height: 179px;
	width: 554px;
	position: absolute;
	right: 0;
}
.s3-line-2 div{
	background: url(../images/banner3-line2.png) no-repeat;
	width: 429px;
	height: 125px;
}
.s3-line-3 div{
	background: url(../images/banner3-line3.png) no-repeat;
	width: 153px;
	height: 65px;
}
.s3-line-1, .s3-line-2, .s3-line-3 {
	position: absolute;
	height: 179px;
	width: 0;
	margin-right: -326px;
	bottom: 192px;
	right: 50%;
	overflow: hidden;
	width: 0;
	-webkit-transition: width 1.5s;
	-webkit-transition-delay: 2s;
	-moz-transition: width 1.5s;
	-moz-transition-delay: 2s;
	-ms-transition: width 1.5s;
	-ms-transition-delay: 2s;
	transition: width 1.5s;
	transition-delay: 2s;
}
.s3-line-2 {
	-webkit-transition: width 1.3s;
	-webkit-transition-delay: 3.3s;
	-moz-transition: width 1.3s;
	-moz-transition-delay: 3.3s;
	-ms-transition: width 1.3s;
	-ms-transition-delay: 3.3s;
	transition: width 1.3s;
	transition-delay: 3.3s;
	
	height: 125px;
}
.s3-line-3 {
	-webkit-transition: width 1s;
	-webkit-transition-delay: 5.5s;
	-moz-transition: width 1s;
	-moz-transition-delay: 5.5s;
	-ms-transition: width 1s;
	-ms-transition-delay: 5.5s;
	transition: width 1s;
	transition-delay: 5.5s;

	height: 65px;
}
.active  .s3-line-1 {
	width: 554px;
}
.active  .s3-line-2 {
	width: 429px;
}
.active  .s3-line-3 {
	width: 153px;
}

/*页面四*/
.s4-con .s4-img1 {
	background: url(../images/banner4-img1.png) no-repeat;
	width: 760px;
	height: 89px;
	position: absolute;
	left: 50%;
	margin-left: -380px;
}
.s4-con .s4-img1 {
	opacity: 0;
	bottom: 5px;
	-webkit-transition: opacity 1.5s, transform 1.5s;
	-webkit-transition-delay: 0.8s;
	-moz-transition: opacity 1.5s, transform 1.5s;
	-moz-transition-delay: 0.8s;
	-ms-transition: opacity 1.5s, transform 1.5s;
	-ms-transition-delay: 0.8s;
	transition: opacity 1.5s, transform 1.5s;
	transition-delay: 0.8s;

	-webkit-transform: translate3d(0, 300%, 0);
	-moz-transform: translate3d(0, 300%, 0);
	-ms-transform: translate3d(0, 300%, 0);
	transform: translate3d(0, 300%, 0);
}
.active .s4-con .s4-img1 {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.s4-con .s4-img2 {
	background: url(../images/banner4-img2.png) no-repeat;
	width: 668px;
	height: 320px;
	position: absolute;
	left: 50%;
	margin-left: -516px;
	opacity: 0;
	bottom: 160px;
}
.s4-con {
	position: absolute;
	width: 990px;
	height: 450px;
	left: 50%;
	bottom: 7%;
	margin-left: -360px;
}
.active .s4-img2 {
	-webkit-animation: house 1s ease-out 1.8s both;
	-moz-animation: house 1s ease-out 1.8s both;
	-ms-animation: house 1s ease-out 1.8s both;
	-o-animation: house 1s ease-out 1.8s both;
	animation: house 1s ease-out 1.8s both;
}
@-webkit-keyframes house {
	0% {
		opacity: 0;
		bottom: -320px;
	}
	100% {
		opacity: 1;
		bottom: 0;
	}
}
@-moz-keyframes house {
	0% {
		opacity: 0;
		bottom: -320px;
	}
	100% {
		opacity: 1;
		bottom: 0;
	}
}
@-ms-keyframes house {
	0% {
		opacity: 0;
		bottom: -320px;
	}
	100% {
		opacity: 1;
		bottom: 0;
	}
}
@-o-keyframes house {
	0% {
		opacity: 0;
		bottom: -320px;
	}
	100% {
		opacity: 1;
		bottom: 0;
	}
}
@keyframes house {
	0% {
		opacity: 0;
		bottom: -320px;
	}
	100% {
		opacity: 1;
		bottom: 0;
	}
}
.s4-con .s4-img3 {
	background: url(../images/banner4-img3.png) no-repeat;
	width: 78px;
	height: 69px;
	position: absolute;
	left: 50%;
	margin-left: -240px;
	bottom: 180px;
	opacity: 0;
}
.s4-img4 {
	background: url(../images/banner4-img4.png) no-repeat;
	width: 97px;
	height: 103px;
	position: absolute;
	left: 50%;
	margin-left: -240px;
	bottom: 180px;
	opacity: 0;
}
.active .s4-img3 {
	-webkit-animation: move 0.9s ease-out 3s both;
	-moz-animation: move 0.9s ease-out 3s both;
	-ms-animation: move 0.9s ease-out 3s both;
	-o-animation: move 0.9s ease-out 3s both;
	animation: move 0.9s ease-out 3s both;
}
@-webkit-keyframes move {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -240px;
		bottom: 180px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: -512px;
		bottom: 336px;
	}
}
@-moz-keyframes move {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -240px;
		bottom: 180px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: -512px;
		bottom: 336px;
	}
}
@-ms-keyframes move {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -240px;
		bottom: 180px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: -512px;
		bottom: 336px;
	}
}
@-o-keyframes move {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -240px;
		bottom: 180px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: -512px;
		bottom: 336px;
	}
}
@keyframes move {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -240px;
		bottom: 180px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: -512px;
		bottom: 336px;
	}
}
.active .s4-img4 {
	-webkit-animation: move1 0.9s ease-out 3.4s both;
	-moz-animation: move1 0.9s ease-out 3.4s both;
	-ms-animation: move1 0.9s ease-out 3.4s both;
	-o-animation: move1 0.9s ease-out 3.4s both;
	animation: move1 0.9s ease-out 3.4s both;
}
@-webkit-keyframes move1 {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -240px;
		bottom: 180px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: -380px;
		bottom: 228px;
	}
}
@-moz-keyframes move1 {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -240px;
		bottom: 180px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: -380px;
		bottom: 228px;
	}
}
@-ms-keyframes move1 {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -240px;
		bottom: 180px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: -380px;
		bottom: 228px;
	}
}
@-o-keyframes move1 {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -240px;
		bottom: 180px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: -380px;
		bottom: 228px;
	}
}
@keyframes move1 {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -240px;
		bottom: 180px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: -380px;
		bottom: 228px;
	}
}
.s4-img5 {
	background: url(../images/banner4-img5.png) no-repeat;
	width: 50px;
	height: 51px;
	position: absolute;
	left: 50%;
	margin-left: -240px;
	bottom: 180px;
	opacity: 0;
}
.active .s4-img5 {
	-webkit-animation: move2 0.6s ease-out 3.8s both;
	-moz-animation: move2 0.6s ease-out 3.8s both;
	-ms-animation: move2 0.6s ease-out 3.8s both;
	-o-animation: move2 0.6s ease-out 3.8s both;
	animation: move2 0.6s ease-out 3.8s both;
}
@-webkit-keyframes move2 {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -240px;
		bottom: 180px;
	}
	100% {
		opacity: 0.6;
		left: 50%;
		margin-left: -280px;
		bottom: 210px;
	}
}
@-moz-keyframes move2 {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -240px;
		bottom: 180px;
	}
	100% {
		opacity: 0.6;
		left: 50%;
		margin-left: -280px;
		bottom: 210px;
	}
}
@-ms-keyframes move2 {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -240px;
		bottom: 180px;
	}
	100% {
		opacity: 0.6;
		left: 50%;
		margin-left: -280px;
		bottom: 210px;
	}
}
@-o-keyframes move2 {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -240px;
		bottom: 180px;
	}
	100% {
		opacity: 0.6;
		left: 50%;
		margin-left: -280px;
		bottom: 210px;
	}
}
@keyframes move2 {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -240px;
		bottom: 180px;
	}
	100% {
		opacity: 0.6;
		left: 50%;
		margin-left: -280px;
		bottom: 210px;
	}
}
.s4-img6 {
	background: url(../images/banner4-img6.png) no-repeat;
	width: 112px;
	height: 100px;
	position: absolute;
	left: 50%;
	margin-left: -240px;
	bottom: 180px;
	opacity: 0;
}
.active .s4-img6 {
	-webkit-animation: move-r1 0.9s ease-out 3.2s both;
	-moz-animation: move-r1 0.9s ease-out 3.2s both;
	-ms-animation: move-r1 0.9s ease-out 3.2s both;
	-o-animation: move-r1 0.9s ease-out 3.2s both;
	animation: move-r1 0.9s ease-out 3.2s both;
}
@-webkit-keyframes move-r1 {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -100px;
		bottom: 200px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: 56px;
		bottom: 330px;
	}
}
@-moz-keyframes move-r1 {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -100px;
		bottom: 200px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: 56px;
		bottom: 330px;
	}
}
@-ms-keyframes move-r1 {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -100px;
		bottom: 200px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: 56px;
		bottom: 330px;
	}
}
@-o-keyframes move-r1 {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -100px;
		bottom: 200px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: 56px;
		bottom: 330px;
	}
}
@keyframes move-r1 {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -100px;
		bottom: 200px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: 56px;
		bottom: 330px;
	}
}
.s4-img7 {
	background: url(../images/banner4-img7.png) no-repeat;
	width: 112px;
	height: 100px;
	position: absolute;
	left: 50%;
	margin-left: -240px;
	bottom: 180px;
	opacity: 0;
}
.active .s4-img7 {
	-webkit-animation: move-r2 0.6s ease-out 3.5s both;
	-moz-animation: move-r2 0.6s ease-out 3.5s both;
	-ms-animation: move-r2 0.6s ease-out 3.5s both;
	-o-animation: move-r2 0.6s ease-out 3.5s both;
	animation: move-r2 0.6s ease-out 3.5s both;
}
@-webkit-keyframes move-r2 {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -100px;
		bottom: 200px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: -34px;
		bottom: 270px;
	}
}
@-moz-keyframes move-r2 {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -100px;
		bottom: 200px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: -34px;
		bottom: 270px;
	}
}
@-ms-keyframes move-r2 {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -100px;
		bottom: 200px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: -34px;
		bottom: 270px;
	}
}
@-o-keyframes move-r2 {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -100px;
		bottom: 200px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: -34px;
		bottom: 270px;
	}
}
@keyframes move-r2 {
	0% {
		opacity: 0;
		left: 50%;
		margin-left: -100px;
		bottom: 200px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: -34px;
		bottom: 270px;
	}
}

/*页面五*/
.s5-con .s5-img1 {
	background: url(../images/banner5.png) no-repeat;
	width: 616px;
	height: 192px;
	position: absolute;
	left: 50%;
	margin-left: -308px;
}
.s5-con .s5-img1 {
	opacity: 0;
	bottom: 5px;
	-webkit-transform: translate3d(-200%, 0, 0);
	-webkit-transition: opacity 1.5s, transform 1.5s;
	-webkit-transition-delay: 0.5s;
	-moz-transform: translate3d(-200%, 0, 0);
	-moz-transition: opacity 1.5s, transform 1.5s;
	-moz-transition-delay: 0.5s;
	-ms-transform: translate3d(-200%, 0, 0);
	-ms-transition: opacity 1.5s, transform 1.5s;
	-ms-transition-delay: 0.5s;
	-o-transform: translate3d(-200%, 0, 0);
	-o-transition: opacity 1.5s, transform 1.5s;
	-o-transition-delay: 0.5s;
	transform: translate3d(-200%, 0, 0);
	transition: opacity 1.5s, transform 1.5s;
	transition-delay: 0.5s;
}
.active .s5-con .s5-img1 {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.s5-img2 {
	background: url(../images/banner5-img1.png) no-repeat;
	width: 281px;
	height: 71px;
	position: absolute;
	left: 50%;
	bottom: 354px;
	margin-left: -110px;
}
.active .s5-img2 {
	-webkit-animation: s5-building 1s ease-out 1.8s both;
	-moz-animation: s5-building 1s ease-out 1.8s both;
	-ms-animation: s5-building 1s ease-out 1.8s both;
	-o-animation: s5-building 1s ease-out 1.8s both;
	animation: s5-building 1s ease-out 1.8s both;
}
@-webkit-keyframes s5-building {
	0% {
		opacity: 0;
		left:0;
	    bottom:600px;
	}
	100% {
		opacity: 1;
		left: 50%;
	    bottom: 354px;
	    margin-left: -110px;
	}
}
@-moz-keyframes s5-building {
	0% {
		opacity: 0;
		left:0;
	    bottom:600px;
	}
	100% {
		opacity: 1;
		left: 50%;
	    bottom: 354px;
	    margin-left: -110px;
	}
}
@-ms-keyframes s5-building {
	0% {
		opacity: 0;
		left:0;
	    bottom:600px;
	}
	100% {
		opacity: 1;
		left: 50%;
	    bottom: 354px;
	    margin-left: -110px;
	}
}
@-o-keyframes s5-building {
	0% {
		opacity: 0;
		left:0;
	    bottom:600px;
	}
	100% {
		opacity: 1;
		left: 50%;
	    bottom: 354px;
	    margin-left: -110px;
	}
}
@keyframes s5-building {
	0% {
		opacity: 0;
		left:0;
	    bottom:600px;
	}
	100% {
		opacity: 1;
		left: 50%;
	    bottom: 354px;
	    margin-left: -110px;
	}
}
.s5-img3 {
	background: url(../images/banner5-img2.png) no-repeat;
	width: 281px;
	height: 58px;
	position: absolute;
	left: 50%;
	bottom: 314px;
    margin-left: -95px;
}
.active .s5-img3 {
	-webkit-animation: s5-heat 1s ease-out 2s both;
	-moz-animation: s5-heat 1s ease-out 2s both;
	-ms-animation: s5-heat 1s ease-out 2s both;
	-o-animation: s5-heat 1s ease-out 2s both;
	animation: s5-heat 1s ease-out 2s both;
}
@-webkit-keyframes s5-heat {
	0% {
		opacity: 0;
		left:0;
	    bottom:560px;
	}
	100% {
		opacity: 1;
		left: 50%;
	    bottom: 314px;
        margin-left: -95px;
	}
}
@-moz-keyframes s5-heat {
	0% {
		opacity: 0;
		left:0;
	    bottom:560px;
	}
	100% {
		opacity: 1;
		left: 50%;
	    bottom: 314px;
        margin-left: -95px;
	}
}
@-ms-keyframes s5-heat {
	0% {
		opacity: 0;
		left:0;
	    bottom:560px;
	}
	100% {
		opacity: 1;
		left: 50%;
	    bottom: 314px;
        margin-left: -95px;
	}
}
@-o-keyframes s5-heat {
	0% {
		opacity: 0;
		left:0;
	    bottom:560px;
	}
	100% {
		opacity: 1;
		left: 50%;
	    bottom: 314px;
        margin-left: -95px;
	}
}
@keyframes s5-heat {
	0% {
		opacity: 0;
		left:0;
	    bottom:560px;
	}
	100% {
		opacity: 1;
		left: 50%;
	    bottom: 314px;
        margin-left: -95px;
	}
}
.s5-img4 {
	background: url(../images/banner5-img3.png) no-repeat;
	width: 281px;
	height: 56px;
	position: absolute;
	left: 50%;
	bottom: 262px;
    margin-left: -80px;
}
.active .s5-img4 {
	-webkit-animation: s5-electric 1s ease-out 2.2s both;
	-moz-animation: s5-electric 1s ease-out 2.2s both;
	-ms-animation: s5-electric 1s ease-out 2.2s both;
	-o-animation: s5-electric 1s ease-out 2.2s both;
	animation: s5-electric 1s ease-out 2.2s both;
}
@-webkit-keyframes s5-electric {
	0% {
		opacity: 0;
		left:0;
	    bottom:510px;
	}
	100% {
		opacity: 1;
		left: 50%;
	    bottom: 262px;
        margin-left: -80px;
	}
}
@-moz-keyframes s5-electric {
	0% {
		opacity: 0;
		left:0;
	    bottom:510px;
	}
	100% {
		opacity: 1;
		left: 50%;
	    bottom: 262px;
        margin-left: -80px;
	}
}
@-ms-keyframes s5-electric {
	0% {
		opacity: 0;
		left:0;
	    bottom:510px;
	}
	100% {
		opacity: 1;
		left: 50%;
	    bottom: 262px;
        margin-left: -80px;
	}
}
@-o-keyframes s5-electric {
	0% {
		opacity: 0;
		left:0;
	    bottom:510px;
	}
	100% {
		opacity: 1;
		left: 50%;
	    bottom: 262px;
        margin-left: -80px;
	}
}
@keyframes s5-electric {
	0% {
		opacity: 0;
		left:0;
	    bottom:510px;
	}
	100% {
		opacity: 1;
		left: 50%;
	    bottom: 262px;
        margin-left: -80px;
	}
}
.s5-img5 {
	background: url(../images/banner5-img4.png) no-repeat;
	width: 281px;
	height: 71px;
	position: absolute;
	left: 50%;
	margin-left: -65px;
    bottom: 210px;
}
.active .s5-img5 {
	-webkit-animation: s5-water 1s ease-out 2.4s both;
	-moz-animation: s5-water 1s ease-out 2.4s both;
	-ms-animation: s5-water 1s ease-out 2.4s both;
	-o-animation: s5-water 1s ease-out 2.4s both;
	animation: s5-water 1s ease-out 2.4s both;
}
@-webkit-keyframes s5-water {
	0% {
		opacity: 0;
		left:0;
	    bottom:450px;
	}
	100% {
		opacity: 1;
		left: 50%;
	    margin-left: -65px;
        bottom: 210px;
	}
}
@-moz-keyframes s5-water {
	0% {
		opacity: 0;
		left:0;
	    bottom:450px;
	}
	100% {
		opacity: 1;
		left: 50%;
	    margin-left: -65px;
        bottom: 210px;
	}
}
@-ms-keyframes s5-water {
	0% {
		opacity: 0;
		left:0;
	    bottom:450px;
	}
	100% {
		opacity: 1;
		left: 50%;
	    margin-left: -65px;
        bottom: 210px;
	}
}
@-o-keyframes s5-water {
	0% {
		opacity: 0;
		left:0;
	    bottom:450px;
	}
	100% {
		opacity: 1;
		left: 50%;
	    margin-left: -65px;
        bottom: 210px;
	}
}
@keyframes s5-water {
	0% {
		opacity: 0;
		left:0;
	    bottom:450px;
	}
	100% {
		opacity: 1;
		left: 50%;
	    margin-left: -65px;
        bottom: 210px;
	}
}
.s5-img6 {
	background: url(../images/banner5-img5.png) no-repeat;
	width: 84px;
	height: 58px;
	position: absolute;
	left: 50%;
	margin-left: -42px;
    z-index: 3;
}

.s5-img7,.s5-img7-1 {
	background: url(../images/banner5-img1-b.png) no-repeat;
	opacity: 0;
	width: 281px;
	height: 71px;
	position: absolute;
	left: 50%;
	bottom: 354px;
	margin-left: -110px;
}


.s5-img8,.s5-img8-1 {
	background: url(../images/banner5-img2-b.png) no-repeat;
	opacity: 0;
	width: 281px;
	height: 58px;
	position: absolute;
	left: 50%;
	bottom: 314px;
    margin-left: -95px;
}

.s5-img9,.s5-img9-1 {
	background: url(../images/banner5-img3-b.png) no-repeat;
	opacity: 0;
	width: 281px;
	height: 56px;
	position: absolute;
	left: 50%;
	bottom: 262px;
    margin-left: -80px;
}

.s5-img10,.s5-img10-1 {
	background: url(../images/banner5-img4-b.png) no-repeat;
	opacity: 0;
	width: 281px;
	height: 71px;
	position: absolute;
	left: 50%;
	margin-left: -65px;
    bottom: 210px;
}


.s5-img11,.s5-img11-1 {
	background: url(../images/banner5-img1-left.png) no-repeat;
	opacity: 0;
	width: 183px;
	height: 175px;
	position: absolute;
	left: 50%;
	margin-left: -260px;
	bottom: 220px;
}
.s5-img15,.s5-img16,.s5-img17,.s5-img18,.s5-img15-1,.s5-img16-1,.s5-img17-1,.s5-img18-1 {
	background:  url(../images/rings.svg) no-repeat;
	opacity: 0;
	width: 42px;
	height: 42px;
	position: absolute;
	right:-8px;
	top:-12px;
}

.s5-img12,.s5-img12-1 {
	background: url(../images/banner5-img2-left.png) no-repeat;
	opacity: 0;
	width: 183px;
	height: 175px;
	position: absolute;
	left: 50%;
	margin-left: -244px;
	bottom: 164px;
}

.s5-img13,.s5-img13-1 {
	background: url(../images/banner5-img3-left.png) no-repeat;
	opacity: 0;
	width: 183px;
	height: 175px;
	position: absolute;
	left: 50%;
	margin-left: -230px;
	bottom: 114px;
}

.s5-img14,.s5-img14-1 {
	background: url(../images/banner5-img4-left.png) no-repeat;
	opacity: 0;
	width: 183px;
	height: 175px;
	position: absolute;
	left: 50%;
	margin-left: -216px;
	bottom: 62px;
}

/*页面6*/
.s6-img1 {
	background: url(../images/banner6-img1.png) no-repeat;
	opacity: 0;
	width: 539px;
	height: 434px;
	position: absolute;
	left: 50%;
	margin-left: -269px;
}
.active .s6-img1 {
	-webkit-animation: folder 1s ease-out 1.4s both;
	-moz-animation: folder 1s ease-out 1.4s both;
	-ms-animation: folder 1s ease-out 1.4s both;
	-o-animation: folder 1s ease-out 1.4s both;
	animation: folder 1s ease-out 1.4s both;
}
@-webkit-keyframes folder {
	0% {
		opacity: 0;
		top: -100px;
		z-index: 2;
	}
	100% {
		z-index: 2;
		opacity: 1;
		top: 200px;
	}
}
@-moz-keyframes folder {
	0% {
		opacity: 0;
		top: -100px;
		z-index: 2;
	}
	100% {
		z-index: 2;
		opacity: 1;
		top: 200px;
	}
}
@-ms-keyframes folder {
	0% {
		opacity: 0;
		top: -100px;
		z-index: 2;
	}
	100% {
		z-index: 2;
		opacity: 1;
		top: 200px;
	}
}
@keyframes folder {
	0% {
		opacity: 0;
		top: -100px;
		z-index: 2;
	}
	100% {
		z-index: 2;
		opacity: 1;
		top: 200px;
	}
}
.s6-img2 {
	background: url(../images/banner6-img2.png) no-repeat;
	opacity: 0;
	width: 539px;
	height: 434px;
	position: absolute;
	left: 50%;
	margin-left: -229px;
}
.active .s6-img2 {
	-webkit-animation: folder1 1s ease-out 1s both;
	-moz-animation: folder1 1s ease-out 1s both;
	-ms-animation: folder1 1s ease-out 1s both;
	-o-animation: folder1 1s ease-out 1s both;
	animation: folder1 1s ease-out 1s both;
}
@-webkit-keyframes folder1 {
	0% {
		opacity: 0;
		top: -100px;
	}
	100% {
		opacity: 1;
		top: 226px;
	}
}
@-moz-keyframes folder1 {
	0% {
		opacity: 0;
		top: -100px;
	}
	100% {
		opacity: 1;
		top: 226px;
	}
}
@-ms-keyframes folder1 {
	0% {
		opacity: 0;
		top: -100px;
	}
	100% {
		opacity: 1;
		top: 226px;
	}
}
@keyframes folder1 {
	0% {
		opacity: 0;
		top: -100px;
	}
	100% {
		opacity: 1;
		top: 226px;
	}
}
.s6-img3 {
	
	opacity: 0;
	width: 445px;
	height: 173px;
	position: absolute;
	right: 538px;
	top: 176px;
	z-index: 3;
}
.s6-img3 {
	background: url(../images/banner6-img3.png) right top no-repeat;
	width: 445px;
	height: 173px;
}
.active .s6-img3 {
	-webkit-animation: system 1.5s ease-out 2.0s both;
	-moz-animation: system 1.5s ease-out 2.0s both;
	-ms-animation: system 1.5s ease-out 2.0s both;
	-o-animation: system 1.5s ease-out 2.0s both;
	animation: system 1.5s ease-out 2.0s both;
}
@-webkit-keyframes system {
	0% {
		opacity: 0;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 445px;
	}
}
@-moz-keyframes system {
	0% {
		opacity: 0;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 445px;
	}
}
@-ms-keyframes system {
	0% {
		opacity: 0;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 445px;
	}
}
@keyframes system {
	0% {
		opacity: 0;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 445px;
	}
}
.s6-img4 {
	background: url(../images/banner6-img4.png) no-repeat;
	opacity: 0;
	width: 297px;
	height: 162px;
	position: absolute;
	left: 50%;
	margin-left: 177px;
	top: 250px;
	z-index: 3;
}
.active .s6-img4 {
	-webkit-animation: material 1.5s ease-out 2.5s both;
	-moz-animation: material 1.5s ease-out 2.5s both;
	-ms-animation: material 1.5s ease-out 2.5s both;
	-o-animation: material 1.5s ease-out 2.5s both;
	animation: material 1.5s ease-out 2.5s both;
}
@-webkit-keyframes material {
	0% {
		opacity: 0;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 445px;
	}
}
@-moz-keyframes material {
	0% {
		opacity: 0;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 445px;
	}
}
@-ms-keyframes material {
	0% {
		opacity: 0;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 445px;
	}
}
@-o-keyframes material {
	0% {
		opacity: 0;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 445px;
	}
}
@keyframes material {
	0% {
		opacity: 0;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 445px;
	}
}
.s6-img5 {
	background: url(../images/banner6-img5.png) no-repeat;
	opacity: 0;
	width: 565px;
	height: 125px;
	position: absolute;
	left: 50%;
	margin-left: -195px;
	top: 503px;
	z-index: 3;
}
.active .s6-img5 {
	-webkit-animation: principle 1.5s ease-out 2.5s both;
	-moz-animation: principle 1.5s ease-out 2.5s both;
	-ms-animation: principle 1.5s ease-out 2.5s both;
	-o-animation: principle 1.5s ease-out 2.5s both;
	animation: principle 1.5s ease-out 2.5s both;
}
@-webkit-keyframes principle {
	0% {
		opacity: 0;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 565px;
	}
}
@-moz-keyframes principle {
	0% {
		opacity: 0;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 565px;
	}
}
@-ms-keyframes principle {
	0% {
		opacity: 0;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 565px;
	}
}
@-o-keyframes principle {
	0% {
		opacity: 0;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 565px;
	}
}
@keyframes principle {
	0% {
		opacity: 0;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 565px;
	}
}

/*页面7*/
.s7-img1 {
	background: url(../images/s7-img01.png) no-repeat;
	width: 93px;
	height: 93px;
	position: absolute;
	right: 50%;
	bottom: 150px;
	margin-right: -350px;
}
.active .s7-img1 {
	z-index: 5;
	-webkit-animation: square-rota 1s linear 1.5s both;
	-moz-animation: square-rota 1s linear 1.5s both;
	-ms-animation: square-rota 1s linear 1.5s both;
	-o-animation: square-rota 1s linear 1.5s both;
	animation: square-rota 1s linear 1.5s both;
}
@-webkit-keyframes square-rota {
	0% {
		opacity: 0;
		-webkit-transform: rotateZ(0deg);
	}
	100% {
		opacity: 1;
		-webkit-transform: rotateZ(360deg);
	}
}
@-moz-keyframes square-rota {
	0% {
		opacity: 0;
		-moz-transform: rotateZ(0deg);
	}
	100% {
		opacity: 1;
		-moz-transform: rotateZ(360deg);
	}
}
@-ms-keyframes square-rota {
	0% {
		opacity: 0;
		-ms-transform: rotateZ(0deg);
	}
	100% {
		opacity: 1;
		-ms-transform: rotateZ(360deg);
	}
}
@-o-keyframes square-rota {
	0% {
		opacity: 0;
		-o-transform: rotateZ(0deg);
	}
	100% {
		opacity: 1;
		-o-transform: rotateZ(360deg);
	}
}
@keyframes square-rota {
	0% {
		opacity: 0;
		transform: rotateZ(0deg);
	}
	100% {
		opacity: 1;
		transform: rotateZ(360deg);
	}
}
.s7-img2-position {
	width: 599px;
	height: 406px;
	position: absolute;
	left: 50%;
	bottom: -42px;
	margin-left: -303px;
	overflow: hidden;
	transform: rotate(0deg);
	z-index: 3;
}
.s7-img2-removeleft {
	/*background: #f2f3f5;*/
	width: 0;
	height: 406px;
	position: absolute;
	right: 0;
	z-index: 4;
	overflow: hidden;
}
.s7-img2 {
	background: url(../images/s7-img02.png) no-repeat;
	width: 599px;
	height: 406px;
	position: absolute;
	right: 0;
	z-index: 3;
}
.active .s7-img2-removeleft {
	-webkit-animation: lines 2s linear 2.5s both;
	-moz-animation: lines 2s linear 2.5s both;
	-ms-animation: lines 2s linear 2.5s both;
	-o-animation: lines 2s linear 2.5s both;
	animation: lines 1s linear 2.5s both;
}
@-webkit-keyframes lines {
	0% {
		opacity: 1;
		width: 0;
	}
	100% {
		opacity: 1;
		
		width: 599px;
	}
}
@-moz-keyframes lines {
	0% {
		opacity: 1;
		width: 0;
	}
	100% {
		opacity: 1;
		
		width: 599px;
	}
}
@keyframes lines {
	0% {
		opacity: 1;
		width: 0;
	}
	100% {
		opacity: 1;
		
		width: 599px;
	}
}
.s7-img3 {
	background: url(../images/s7-img03.png) no-repeat;
	width: 599px;
	height: 406px;
	position: absolute;
	left: 50%;
	bottom: -42px;
	margin-left: -303px;
	z-index: 3;
}
.active .s7-img3 {
	-webkit-animation: lines1 2s linear 3.5s both;
	-moz-animation: lines1 2s linear 3.5s both;
	-ms-animation: lines1 2s linear 3.5s both;
	-o-animation: lines1 2s linear 3.5s both;
	animation: lines1 1s linear 3.5s both;
}
@-webkit-keyframes lines1 {
	0% {
		opacity: 1;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 599px;
	}
}
@-moz-keyframes lines1 {
	0% {
		opacity: 1;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 599px;
	}
}
@-ms-keyframes lines1 {
	0% {
		opacity: 1;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 599px;
	}
}
@-o-keyframes lines1 {
	0% {
		opacity: 1;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 599px;
	}
}
@keyframes lines1 {
	0% {
		opacity: 1;
		width: 0;
	}
	100% {
		opacity: 1;
		width: 599px;
	}
}
.s7-img4 {
	background: url(../images/s7-img04.png) no-repeat;
	width: 599px;
	height: 406px;
	position: absolute;
	left: 50%;
	bottom: -60px;
	margin-left: -298px;
	z-index: 2;
}
.active .s7-img4 {
	z-index: 1;
	-webkit-animation: pic-scale 0.8s ease 4.4s both;
	-moz-animation: pic-scale 0.8s ease 4.4s both;
	-ms-animation: pic-scale 0.8s ease 4.4s both;
	-o-animation: pic-scale 0.8s ease 4.4s both;
	animation: pic-scale 0.8s ease 4.4s both;
}
@-webkit-keyframes pic-scale {
	0% {
		opacity: 0;
		transform: scale(0, 0);
	}
	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}
@-moz-keyframes pic-scale {
	0% {
		opacity: 0;
		transform: scale(0, 0);
	}
	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}
@-ms-keyframes pic-scale {
	0% {
		opacity: 0;
		transform: scale(0, 0);
	}
	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}
@-o-keyframes square-rota {
	0% {
		opacity: 0;
		transform: scale(0, 0);
	}
	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}
@keyframes pic-scale {
	0% {
		opacity: 0;
		transform: scale(0, 0);
	}
	100% {
		opacity: 1;
		transform: scale(1, 1);
	}
}

/*页面8*/
.s8_img_1 {
	background: url(../images/banner8-img1.png) no-repeat;
	height: 83px;
	width: 693px;
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -346px;
}
.active  .s8_img_1 {
	-webkit-animation: ellipse 1.6s ease-out 1s both;
	-moz-animation: ellipse 1.6s ease-out 1s both;
	-ms-animation: ellipse 1.6s ease-out 1s both;
	-o-animation: ellipse 1.6s ease-out 1s both;
	animation: ellipse 1.6s ease-out 1s both;
}
@-webkit-keyframes ellipse {
	0% {
		opacity: 0;
		bottom: 600px;
	}
	100% {
		opacity: 1;
		bottom: 10px;
	}
}
@-moz-keyframes ellipse {
	0% {
		opacity: 0;
		bottom: 600px;
	}
	100% {
		opacity: 1;
		bottom: 10px;
	}
}
@-ms-keyframes ellipse {
	0% {
		opacity: 0;
		bottom: 600px;
	}
	100% {
		opacity: 1;
		bottom: 10px;
	}
}
@-o-keyframes ellipse {
	0% {
		opacity: 0;
		bottom: 600px;
	}
	100% {
		opacity: 1;
		bottom: 10px;
	}
}
@keyframes ellipse {
	0% {
		opacity: 0;
		bottom: 600px;
	}
	100% {
		opacity: 1;
		bottom: 60px;
	}
}
.s8_img_2 {
	background: url(../images/banner8-img2.png) no-repeat;
	height: 81px;
	width: 681px;
	position: absolute;
	left: 50%;
	margin-left: -340px;
}
.active .s8_img_2 {
	-webkit-animation: ellipse1 1.6s ease-out 1.3s both;
	-moz-animation: ellipse1 1.6s ease-out 1.3s both;
	-ms-animation: ellipse1 1.6s ease-out 1.3s both;
	-o-animation: ellipse1 1.6s ease-out 1.3s both;
	animation: ellipse1 1.6s ease-out 1.3s both;
}
@-webkit-keyframes ellipse1 {
	0% {
		opacity: 0;
		bottom: 650px;
	}
	100% {
		opacity: 1;
		bottom: 50px;
	}
}
@-moz-keyframes ellipse1 {
	0% {
		opacity: 0;
		bottom: 650px;
	}
	100% {
		opacity: 1;
		bottom: 50px;
	}
}
@-ms-keyframes ellipse1 {
	0% {
		opacity: 0;
		bottom: 650px;
	}
	100% {
		opacity: 1;
		bottom: 50px;
	}
}
@-o-keyframes ellipse1 {
	0% {
		opacity: 0;
		bottom: 650px;
	}
	100% {
		opacity: 1;
		bottom: 50px;
	}
}
@keyframes ellipse1 {
	0% {
		opacity: 0;
		bottom: 650px;
	}
	100% {
		opacity: 1;
		bottom: 100px;
	}
}
.s8_img_3_position {
	height: 400px;
	width: 232px;
	position: absolute;
	left: 50%;
	margin-left: -100px;
	bottom: 2px;
}
.s8_img_3 {
	background: url(../images/banner8-img3.png) no-repeat;
	height: 400px;
	width: 232px;
	position: absolute;
	top: 0;
	z-index: 2;
}
.s8_img_4_position {
	height: 400px;
	width: 232px;
	position: absolute;
	left: 50%;
	margin-left: -100px;
	bottom: 2px;
}
.s8_img_4 {
	background: url(../images/banner8-img4.png) no-repeat;
	height: 400px;
	width: 232px;
	position: absolute;
	top: 0;
	z-index: 2;
}
.s8_img_5 {
	background: url(../images/banner8-img5.png) no-repeat;
	height: 400px;
	width: 232px;
	position: absolute;
	left: 50%;
	margin-left: -100px;
	bottom: 2px;
}
.s8_img_6_position {
	height: 400px;
	width: 232px;
	position: absolute;
	left: 50%;
	margin-left: -100px;
	bottom: 2px;
}
.s8_img_6 {
	background: url(../images/banner8-img6.png) no-repeat;
	height: 400px;
	width: 232px;
	position: absolute;
	top: 0;
}
.active .s8_img_3 {
	-webkit-animation: buildingm 0.6s linear 2.9s both;
	-moz-animation: buildingm 0.6s linear 2.9s both;
	-ms-animation: buildingm 0.6s linear 2.9s both;
	-o-animation: buildingm 0.6s linear 2.9s both;
	animation: buildingm 0.6s linear 2.9s both;
}
.active .s8_img_4 {
	-webkit-animation: buildingm 0.6s linear 2.9s both;
	-moz-animation: buildingm 0.6s linear 2.9s both;
	-ms-animation: buildingm 0.6s linear 2.9s both;
	-o-animation: buildingm 0.6s linear 2.9s both;
	animation: buildingm 0.6s linear 2.9s both;
}
.active .s8_img_5 {
	-webkit-animation: buildingm 0.6s linear 3.5s both;
	-moz-animation: buildingm 0.6s linear 3.5s both;
	-ms-animation: buildingm 0.6s linear 3.5s both;
	-o-animation: buildingm 0.6s linear 3.5s both;
	animation: buildingm 0.6s linear 3.5s both;
}
.active .s8_img_6 {
	-webkit-animation: buildingm 1s ease 4.7s both;
	-moz-animation: buildingm 1s ease 4.7s both;
	-ms-animation: buildingm 1s ease 4.7s both;
	-o-animation: buildingm 1s ease 4.7s both;
	animation: buildingm 1s ease 4.7s both;
}
@-webkit-keyframes buildingm {
	0% {
		opacity: 0;
		height: 0;
	}
	100% {
		opacity: 1;
		height: 400px;
	}
}
@-moz-keyframes buildingm {
	0% {
		opacity: 0;
		height: 0;
	}
	100% {
		opacity: 1;
		height: 400px;
	}
}
@-ms-keyframes buildingm {
	0% {
		opacity: 0;
		height: 0;
	}
	100% {
		opacity: 1;
		height: 400px;
	}
}
@-o-keyframes buildingm {
	0% {
		opacity: 0;
		height: 0;
	}
	100% {
		opacity: 1;
		height: 400px;
	}
}
@keyframes buildingm {
	0% {
		opacity: 0;
		height: 0;
	}
	100% {
		opacity: 1;
		height: 400px;
	}
}
.s8_img_7 {
	background: url(../images/banner8-img7.png) no-repeat;
	height: 205px;
	width: 125px;
	position: absolute;
	left: 50%;
	margin-left: -238px;
	bottom: 42px;
}
.active .s8_img_7 {
	-webkit-animation: buildingl 0.6s linear 3.8s both;
	-moz-animation: buildingl 0.6s linear 3.8s both;
	-ms-animation: buildingl 0.6s linear 3.8s both;
	-o-animation: buildingl 0.6s linear 3.8s both;
	animation: buildingl 0.6s linear 3.8s both;
}
@-webkit-keyframes buildingl {
	0% {
		opacity: 0;
		height: 0;
	}
	100% {
		opacity: 1;
		height: 205px;
	}
}
@-moz-keyframes buildingl {
	0% {
		opacity: 0;
		height: 0;
	}
	100% {
		opacity: 1;
		height: 205px;
	}
}
@-ms-keyframes buildingl {
	0% {
		opacity: 0;
		height: 0;
	}
	100% {
		opacity: 1;
		height: 205px;
	}
}
@-o-keyframes buildingl {
	0% {
		opacity: 0;
		height: 0;
	}
	100% {
		opacity: 1;
		height: 205px;
	}
}
@keyframes buildingl {
	0% {
		opacity: 0;
		height: 0;
	}
	100% {
		opacity: 1;
		height: 205px;
	}
}
.s8_img_8 {
	background: url(../images/banner8-img8.png) no-repeat;
	height: 205px;
	width: 125px;
	position: absolute;
	left: 50%;
	margin-left: 92px;
	bottom: 42px;
}
.active .building .s8_img_8 {
	-webkit-animation: buildingr 0.6s linear 4.1s both;
	-moz-animation: buildingr 0.6s linear 4.1s both;
	-ms-animation: buildingr 0.6s linear 4.1s both;
	-o-animation: buildingr 0.6s linear 4.1s both;
	animation: buildingr 0.6s linear 4.1s both;
}
@-webkit-keyframes buildingr {
	0% {
		opacity: 0;
		height: 0;
	}
	100% {
		opacity: 1;
		height: 205px;
	}
}
@-moz-keyframes buildingr {
	0% {
		opacity: 0;
		height: 0;
	}
	100% {
		opacity: 1;
		height: 205px;
	}
}
@-ms-keyframes buildingr {
	0% {
		opacity: 0;
		height: 0;
	}
	100% {
		opacity: 1;
		height: 205px;
	}
}
@-o-keyframes buildingr {
	0% {
		opacity: 0;
		height: 0;
	}
	100% {
		opacity: 1;
		height: 205px;
	}
}
@keyframes buildingr {
	0% {
		opacity: 0;
		height: 0;
	}
	100% {
		opacity: 1;
		height: 205px;
	}
}

/*页面9*/

/*.s9-a a{ display:inline-block; width:201px; height:51px; background:url(../images/banner9-img1.png) no-repeat; font-size:22px; line-height:51px; padding:0 11px;}*/
.drainage {
	width: 202px;
	height: 52px;
	overflow: hidden;
	position: relative;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	transform: rotate(0deg);
	float: left;
	margin: 0 10px;
}
.drainage {
	opacity: 0;
	-webkit-transform: translate3d(0, 125%, 0);
	-moz-transform: translate3d(0, 125%, 0);
	-ms-transform: translate3d(0, 125%, 0);

	-webkit-transform: translate3d(0, 125%, 0);
	-webkit-transition: opacity 0.6s, transform 0.6s;
	-webkit-transition-delay: 1.5s;

	-moz-transform: translate3d(0, 125%, 0);
	-moz-transition: opacity 0.6s, transform 0.6s;
	-moz-transition-delay: 1.5s;

	-ms-transform: translate3d(0, 125%, 0);
	-ms-transition: opacity 0.6s, transform 0.6s;
	-ms-transition-delay: 1.5s;

	transform: translate3d(0, 125%, 0);
	transition: opacity 0.6s, transform 0.6s;
	transition-delay: 1.5s;
}
.active .drainage {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity: 1;
}
.drainage-frame {
	background: url(../images/banner9-img1.png) no-repeat;
	position: absolute;
	left: -15px;
	top: -90px;
	height: 230px;
	width: 230px;
	-webkit-animation: drainage-spinning 2s infinite linear;
	-moz-animation: drainage-spinning 2s infinite linear;
	-ms-animation: drainage-spinning 2s infinite linear;
	-o-animation: drainage-spinning 2s infinite linear;
	animation: drainage-spinning 2s infinite linear;
}
.drainage a {
	width: 200px;
	height: 50px;
	display: inline-block;
	margin: 0 auto;
	z-index: 3;
	line-height: 50px;
	background-color: #fdfdfd;
	position: absolute;
	top: 1px;
	left: 1px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	font-size: 22px;
}
.drainage a:hover {
	    background-color: #acd952;
	    color: #fff;
}
@-webkit-keyframes drainage-spinning {
	from {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}
@-moz-keyframes drainage-spinning {
	from {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}
@-o-keyframes drainage-spinning {
	from {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}
@keyframes drainage-spinning {
	from {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}
.s9-img1 {
	background: url(../images/banner9-img2.png) no-repeat;
	height: 254px;
	width: 464px;
	position: absolute;
	left: 50%;
	margin-left: -232px;
	bottom: 50px;
}
.active .s9-img1 {
	-webkit-animation: paper 2s ease-out 1.8s both;
	-moz-animation: paper 2s ease-out 1.8s both;
	-ms-animation: paper 2s ease-out 1.8s both;
	-o-animation: paper 2s ease-out 1.8s both;
	animation: paper 2s ease-out 1.8s both;
}
@-webkit-keyframes paper {
	0% {
		opacity: 0;
		left: -446px;
		bottom: -254px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: -232px;
		bottom: 50px;
	}
}
@-moz-keyframes paper {
	0% {
		opacity: 0;
		left: -446px;
		bottom: -254px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: -232px;
		bottom: 50px;
	}
}
@-ms-keyframes paper {
	0% {
		opacity: 0;
		left: -446px;
		bottom: -254px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: -232px;
		bottom: 50px;
	}
}
@-o-keyframes paper {
	0% {
		opacity: 0;
		left: -446px;
		bottom: -254px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: -232px;
		bottom: 50px;
	}
}
@keyframes paper {
	0% {
		opacity: 0;
		left: -446px;
		bottom: -254px;
	}
	100% {
		opacity: 1;
		left: 50%;
		margin-left: -232px;
		bottom: 50px;
	}
}
.s9-img2 {
	background: url(../images/banner9-img3.png) no-repeat;
	opacity: 0;
	width: 314px;
	height: 222px;
	position: absolute;
	left: 50%;
	margin-left: -242px;
	bottom: 50px;
}
.active .s9-img2 {
	-webkit-animation: conduit 2.5s ease-out 3.8s both;
	-moz-animation: conduit 2.5s ease-out 3.8s both;
	-ms-animation: conduit 2.5s ease-out 3.8s both;
	-o-animation: conduit 2.5s ease-out 3.8s both;
	animation: conduit 2.5s ease-out 3.8s both;
}
@-webkit-keyframes conduit {
	0% {
		opacity: 0;
		bottom: 120px;
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		bottom: 50px;
	}
}
@-moz-keyframes conduit {
	0% {
		opacity: 0;
		bottom: 120px;
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		bottom: 50px;
	}
}
@-ms-keyframes conduit {
	0% {
		opacity: 0;
		bottom: 120px;
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		bottom: 50px;
	}
}
@-o-keyframes conduit {
	0% {
		opacity: 0;
		bottom: 120px;
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		bottom: 50px;
	}
}
@keyframes conduit {
	0% {
		opacity: 0;
		bottom: 120px;
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		bottom: 50px;
	}
}
.s9-img3 {
	background: url(../images/banner9-img4.png) no-repeat;
	opacity: 0;
	width: 314px;
	height: 222px;
	position: absolute;
	left: 50%;
	margin-left: -242px;
	bottom: 100px;
}
.active .s9-img3 {
	-webkit-animation: conduit1 2.5s ease-out 3.8s both;
	-moz-animation: conduit1 2.5s ease-out 3.8s both;
	-ms-animation: conduit1 2.5s ease-out 3.8s both;
	-o-animation: conduit1 2.5s ease-out 3.8s both;
	animation: conduit1 2.5s ease-out 3.8s both;
}
@-webkit-keyframes conduit1 {
	0% {
		opacity: 0;
		bottom: 180px;
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		bottom: 50px;
	}
}
@-moz-keyframes conduit1 {
	0% {
		opacity: 0;
		bottom: 180px;
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		bottom: 50px;
	}
}
@-ms-keyframes conduit1 {
	0% {
		opacity: 0;
		bottom: 180px;
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		bottom: 50px;
	}
}
@-o-keyframes conduit1 {
	0% {
		opacity: 0;
		bottom: 180px;
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		bottom: 50px;
	}
}
@keyframes conduit1 {
	0% {
		opacity: 0;
		bottom: 180px;
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		bottom: 50px;
	}
}
.bigbody .div-h1 {
	padding-top: 15%;
}
.bigbody .s4-con {
	bottom: 4%;
}
.bigbody .download {
	margin-top: 3%;
}
.wbody #s1_wrapper, .wbody #s2_wrapper, .wbody #s3_wrapper, .wbody #s4_wrapper, .wbody #s5_wrapper, .wbody #s6_wrapper, .wbody #s7_wrapper, .wbody #s7_wrapper, .wbody #s8_wrapper, .wbody #s9_wrapper {
	height: 480px;
	margin: -240px 0 0 -496px;
}
.wbody .section-sec-content {
	padding-top: 0%;
}
.wbody .section-sec-content h3 {
	line-height: 1;
	padding-bottom: 18px;
}
.wbody .tiny-stars {
	top: 18%;
}
.wbody .s4-con {
	bottom: 2%;
}
.wbody .rocketa, .wbody .rocket {
	bottom: 1%;
}
.wbody .s5_con {
	bottom: -2%
}
.wbody #s6_wrapper .section-sec-content h3 {
	padding-bottom: 10px;
}
.wbody #s6_wrapper .section-sec-content {

	/*margin-top: -2%;*/
}
.wbody .s6-download {
	margin-top: 1%;
}
.active .sdd.act {
	z-index: 101;
}
.wbody .s6-con {
	margin-top: -4%;
}
.minbody .section-sec-content h3 {
	font-size: 35px;
	padding-bottom: 12px;
	padding-bottom: 15px;
}
.minbody .section-sec-content p {
	font-size: 16px;
}
.minbody .div-h1 img {
	height: 80px;
	height: auto;
}
.minbody .div-h1 {
	padding-top: 12%;
}
.minbody .download {
	margin-top: 3%;
}
.minbody .div-img {
	height: 300px;
}
.minbody .section0-text {
	margin: 0 0 0 -400px;
	bottom: 0%;
}
.minbody .section0-text1 {
	margin: 0px 0 0 -417px;
	bottom: 0%;
}
.minbody  #s1_ani {
	margin-top: 4%;
}
.minbody .tiny-stars {
	top: 13%;
}
.minbody .building {
	margin-top: 0%;
}
.minbody .s4-con {
	bottom: 1%;
}
.minbody .rocketa, .minbody .rocket {
	bottom: -10%;
}
.minbody #s1_ani {
	width: 380px;
	height: 380px;
}
.minbody #s1_ani > div {
	width: 380px;
	height: 380px;
	background-size: 100%;
}
.minbody .tiny-stars {
	width: 480px;
	height: 480px;
	margin-left: -250px;
}
.minbody .tiny-stars img {
	max-width: 100%;
}
.minbody #s1_wrapper, .minbody #s2_wrapper, .minbody #s3_wrapper, .minbody #s4_wrapper, .minbody #s5_wrapper, .minbody #s6_wrapper {
	height: 440px;
	margin: -220px 0 0 -496px;
}
.star {
	display: inline-block;
}

/*.minbody .s4-con > div {
width: 440px;
height: 285px;
background-size: 100%;
}*/

/*.minbody .s4-con .s4-img2 {
  bottom: 130px;
  margin-left: -194px;
  width: 400px;
  height: 245px;
}
.minbody .s4-con .s4-img3 {
  bottom: 118px;
  margin-left: -211px;
  width: 400px;
  height: 245px;
}
.minbody .s4-con .s4-img4 {
 bottom: 106px;
  margin-left: -228px;
  width: 400px;
  height: 245px;
}*/

.minbody .s6-con {
	margin-top: -4%;
}
.minbody .s5_con {
	bottom: -6%;
}

/* new */
.wbody .pathway {
	width: 442px;
	height: 442px;
	margin-left: -221px;
}
.wbody .pathway>.content-pathway> .spn-2 {
	width: 440px;
	height: 440px;
}
.wbody .pathway>.content-pathway>div {
	width: 310px;
	height: 310px;
}
.wbody .pathway>.content-pathway> .spn-1 {
	left: 65px;
	top: 65px;
}
.wbody .pathway {
	background-size: 270px;
}
.s2-icon-2 {
	top: 20px;
}
.s2-icon-4 {
	bottom: 20px;
}



/***************to-top***********/
.s9-con {
	position: absolute;
	width: 100%;
	bottom: -10%;
	left: 0;
}
.building {
	width: 100%;
	position: absolute;
	bottom: 8%;
	left: 0;
}

.s6-con {
	position: relative;
	top: -150px;
}
.htmleaf-container {
	position: relative;
	height: 74px;
	margin-top: 10%;
}
.minbody .htmleaf-container {
	margin-top: 14%;
}
svg {
	padding-bottom: 5px;
}
.s1-line {
	border-bottom: 1px solid #888e89;
	height: 0px;
	width: 0;
}
.s1-line {
}

/*.active .s3-img4 {
 -webkit-animation: load2h 0.6s ease-out 3.7s both;
 -moz-animation: load2h 0.6s ease-out 3.7s both;
 -ms-animation: load2h 0.6s ease-out 3.7s both;
 -o-animation: load2h 0.6s ease-out 3.7s both;
 animation: load2h 0.6s ease-out 3.7s both;
}*/
.active.s1-line {
	-webkit-animation: s1line 4.1s  both;
	-moz-animation: s1line 4.1s both;
	-ms-animation: s1line 4.1s both;
	animation: s1line 4.1s  both;
}
.wrapper { height: 100%; position: relative;  }
.wzcolor { position: relative; margin: 0 auto; width: 100%; height: 72px; left: -1px; top: 6px; background: url(../images/s1-banner.png) center top no-repeat;  }

.active.wzcolor {
	-webkit-animation: wzcolor 1.2s 3.2s  both;
	-moz-animation: wzcolor 1.2s 3.2s both;
	-ms-animation: wzcolor 1.2s 3.2s both;
	animation: wzcolor 1.2s 3.2s both;
}

@keyframes wzcolor {
	0% {
		width: 0px;
	}
	100% {
		width: 100%;
	}
}


/*.active .s1-line {
 -webkit-transition: width 0.3s;
 -webkit-transition-delay: 0s;
 -moz-transition: width 0.3s;
 -moz-transition-delay: 0s;
 -ms-transition: width 0.3s;
 -ms-transition-delay: 0s;
 transition: width 3s;
 transition-delay: 0s;
}*/
@-webkit-keyframes s1line {
	0% {
		width: 0px;
	}
	100% {
		width: 100%;
	}
}
@-moz-keyframes s1line {
	0% {
		width: 0px;
	}
	100% {
		width: 100%;
	}
}
@-ms-keyframes s1line {
	0% {
		width: 0px;
	}
	100% {
		width: 100%;
	}
}
@-o-keyframes s1line {
	0% {
		width: 0px;
	}
	100% {
		width: 100%;
	}
}
@keyframes s1line {
	0% {
		width: 0px;
	}
	100% {
		width: 100%;
	}
}
.div-h1 {
	display: none;
}
.s9-a {
	padding-top: 50px;
}
#s9_wrapper .section-sec-content {
	position: relative;
	top: 50%;
	margin-top: -150px;
}
svg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
}


.s1bg { background: #000; opacity: 0.9; position: absolute; height: 100%; width: 100%; z-index: 9991  }

#s1 .con { position: relative; z-index: 9992;  }


.s6-img3 div:before,.s6-img4:before,.s6-img5:before {
	content: '';
    background: url(../images/rings.svg) no-repeat;
    opacity: 1;
    width: 42px;
    height: 42px;
    position: absolute;
    right: -10px;
    bottom: -2px;
}

.s6-img4:before {
	right: auto;
	    left: -14px;
    bottom: -9px;
}
.s6-img5:before {
	right: auto;
	    left: -14px;
    bottom: 54px;
}

#page_loading {
    display: block;
    background: #000;
    position: fixed; z-index: 9999999; 
    top: 0; left: 0; height: 100%;  width: 100%;
}
.loading div, #page_loading div {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -90px 0 0 -90px;
    background: url(../images/loading.png) no-repeat center center;

   background-size: contain;
   -webkit-animation: rotate 2s linear 0s infinite;
}

#page_loading p {
    width: 140px;
    position: absolute;
    padding-top: 34px;
    left: 50%;
    top: 50%;
    margin: -13px 0 0 -58px;
    color: #fff;
    text-align: center;
    font-size: 24px;
    background: url(../images/logo0.png) no-repeat top center;
    background-size: 100%;
    
}

@-webkit-keyframes rotate{
 0%{-webkit-transform:rotate(0deg);}
 100%{-webkit-transform:rotate(359deg);}
}
@-moz-keyframes rotate{
 0%{-webkit-transform:rotate(0deg);}
 100%{-webkit-transform:rotate(359deg);}
}
@-ms-keyframes rotate{
 0%{-webkit-transform:rotate(0deg);}
 100%{-webkit-transform:rotate(359deg);}
}
@keyframes rotate{
 0%{-webkit-transform:rotate(0deg);}
 100%{-webkit-transform:rotate(359deg);}
}

.s2-i3,.s2-i4,.s2-i5,.s2-i6 { 
  display: none;
  /*opacity: 1 !important;*/
}
.s2-i5 { display: block;  }
/*.s2-img3-1:hover .s2-i3 { display: block;   }
.s2-img4-1:hover .s2-i4 { display: block;   }
.s2-img5-1:hover .s2-i5 { display: block;   }
.s2-img6-1:hover .s2-i6 { display: block;   }*/


/*@media only screen and (max-width:880px) {
	.active .tStart .s2-img6 {
		opacity: 0;
		-webkit-animation: s2-iconbi1g 2s linear 4.8s both;
		-moz-animation: s2-iconbi1g 2s linear 4.8s both;
		-ms-animation: s2-iconbi1g 2s linear 4.8s both;
		animation: s2-iconbi1g 2s linear 4.8s both;
	}
}*/



/*.active .s5-img7 {
	-webkit-animation: s5-b 2s ease-out 3.4s both;
	-moz-animation: s5-b 2s ease-out 3.4s both;
	-ms-animation: s5-b 2s ease-out 3.4s both;
	-o-animation: s5-b 2s ease-out 3.4s both;
	animation: s5-b 1.4s ease-out 3.4s both;
}
.active .s5-img8 {
	-webkit-animation: s5-b 2s ease-out 5.4s both;
	-moz-animation: s5-b 2s ease-out 5.4s both;
	-ms-animation: s5-b 2s ease-out 5.4s both;
	-o-animation: s5-b 2s ease-out 5.4s both;
	animation: s5-b 1.4s ease-out 4.8s both;
}
.active .s5-img9 {
	-webkit-animation: s5-b 2s ease-out 7.4s both;
	-moz-animation: s5-b 2s ease-out 7.4s both;
	-ms-animation: s5-b 2s ease-out 7.4s both;
	-o-animation: s5-b 2s ease-out 7.4s both;
	animation: s5-b 1.4s ease-out 6.2s both;
}
.active .s5-img10 {
	-webkit-animation: s5-b 2s ease-out 9.4s both;
	-moz-animation: s5-b 2s ease-out 9.4s both;
	-ms-animation: s5-b 2s ease-out 9.4s both;
	-o-animation: s5-b 2s ease-out 9.4s both;
	animation: s5-b 1.4s ease-out 7.6s both;
}
*/
.active .s5-img7,.active .s5-img11, .active .s5-img15 {
	-webkit-animation: air-logo 1.5s linear 3.5s both;
	-moz-animation: air-logo 1.5s linear 3.5s both;
	-ms-animation: air-logo 1.5s linear 3.5s both;
	-o-animation: air-logo 1.5s linear 3.5s both;
	animation: air-logo 1.5s linear 3.5s both;
}
.active .s5-img8,.active .s5-img12,.active .s5-img16 {
	-webkit-animation: air-logo 1.5s linear 5s both;
	-moz-animation: air-logo 1.5s linear 5s both;
	-ms-animation: air-logo 1.5s linear 5s both;
	-o-animation: air-logo 1.5s linear 5s both;
	animation: air-logo 1.5s linear 5s both;
}
.active .s5-img9,.active .s5-img13,.active .s5-img17 {
	-webkit-animation: air-logo 1.5s linear 6.5s both;
	-moz-animation: air-logo 1.5s linear 6.5s both;
	-ms-animation: air-logo 1.5s linear 6.5s both;
	-o-animation: air-logo 1.5s linear 6.5s both;
	animation: air-logo 1.5s linear 6.5s both;
}
.active .s5-img10,.active .s5-img14,.active .s5-img18 {
	-webkit-animation: air-logo 1.5s linear 8s both;
	-moz-animation: air-logo 1.5s linear 8s both;
	-ms-animation: air-logo 1.5s linear 8s both;
	-o-animation: air-logo 1.5s linear 8s both;
	animation: air-logo 1.5s linear 8s both;
}




.active .s5-img7-1,.active .s5-img11-1, .active .s5-img15-1 {
	-webkit-animation: air-logo 1.5s linear 9.5s both;
	-moz-animation: air-logo 1.5s linear 9.5s both;
	-ms-animation: air-logo 1.5s linear 9.5s both;
	-o-animation: air-logo 1.5s linear 9.5s both;
	animation: air-logo 1.5s linear 9.5s both;
}
.active .s5-img8-1,.active .s5-img12-1,.active .s5-img16-1 {
	-webkit-animation: air-logo 1.5s linear 11s both;
	-moz-animation: air-logo 1.5s linear 11s both;
	-ms-animation: air-logo 1.5s linear 11s both;
	-o-animation: air-logo 1.5s linear 11s both;
	animation: air-logo 1.5s linear 11s both;
}
.active .s5-img9-1,.active .s5-img13-1,.active .s5-img17-1 {
	-webkit-animation: air-logo 1.5s linear 12.5s both;
	-moz-animation: air-logo 1.5s linear 12.5s both;
	-ms-animation: air-logo 1.5s linear 12.5s both;
	-o-animation: air-logo 1.5s linear 12.5s both;
	animation: air-logo 1.5s linear 12.5s both;
}
.active .s5-img10-1,.active .s5-img14-1,.active .s5-img18-1 {
	-webkit-animation: air-logo 1.5s linear 14s both;
	-moz-animation: air-logo 1.5s linear 14s both;
	-ms-animation: air-logo 1.5s linear 14s both;
	-o-animation: air-logo 1.5s linear 14s both;
	animation: air-logo 1.5s linear 14s both;
}

@-webkit-keyframes air-logo {
	0% {
		opacity: 0;
	}
	35%{
		opacity: 1;
	}
	65%{
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@-moz-keyframes air-logo {
	0% {
		opacity: 0;
	}
	40%{
		opacity: 1;
	}
	60%{
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@-ms-keyframes air-logo {
	0% {
		opacity: 0;
	}
	40%{
		opacity: 1;
	}
	60%{
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes air-logo {
	0% {
		opacity: 0;
	}
	35%{
		opacity: 1;
	}
	65%{
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}










.active .s5-img6 {
	-webkit-animation: mouse 10s linear 1s both;
	-moz-animation: mouse 10s linear 1.4s both;
	-ms-animation: mouse 10s linear 1.4s both;
	-o-animation: mouse 10s linear 1.4s both;
	animation: mouse 14s linear 1.5s both;
}
@-webkit-keyframes mouse {
	0% {
		opacity: 0;
		margin-left: 300px;
		bottom: 0px;
	}


	10% {
		opacity: 1;
		margin-left: 100px;
		bottom: 340px;
	}
	12% {
		opacity: 1;
		margin-left: 100px;
		bottom: 340px;
	}
	14% {
		opacity: 1;
		margin-left: 95px;
		bottom: 335px;
	}
	16% {
		opacity: 1;
		margin-left: 100px;
		bottom: 340px;
	}
	19% {
		opacity: 1;
		margin-left: 100px;
		bottom: 340px;
	}




	21% {
		opacity: 1;
		margin-left: 100px;
		bottom: 295px;
	}
	23% {
		opacity: 1;
		margin-left: 100px;
		bottom: 295px;
	}
	25% {
		opacity: 1;
		margin-left: 95px;
		bottom: 290px;
	}
	27% {
		opacity: 1;
		margin-left: 100px;
		bottom: 295px;
	}
	30% {
		opacity: 1;
		margin-left: 100px;
		bottom: 295px;
	}



	32% {
		opacity: 1;
		margin-left: 100px;
		bottom: 255px;
	}
	34% {
		opacity: 1;
		margin-left: 100px;
		bottom: 255px;
	}
	36% {
		opacity: 1;
		margin-left: 95px;
		bottom: 250px;
	}
	38% {
		opacity: 1;
		margin-left: 100px;
		bottom: 255px;
	}
	41% {
		opacity: 1;
		margin-left: 100px;
		bottom: 255px;
	}


    43% {
		opacity: 1;
		margin-left: 100px;
		bottom: 215px;
	}
	45% {
		opacity: 1;
		margin-left: 100px;
		bottom: 215px;
	}
	47% {
		opacity: 1;
		margin-left: 95px;
		bottom: 210px;
	}
	49% {
		opacity: 1;
		margin-left: 100px;
		bottom: 215px;
	}
	52% {
		opacity: 1;
		margin-left: 100px;
		bottom: 215px;
	}




    54% {
		opacity: 1;
		margin-left: 100px;
		bottom: 340px;
	}
	56% {
		opacity: 1;
		margin-left: 100px;
		bottom: 340px;
	}
	58% {
		opacity: 1;
		margin-left: 95px;
		bottom: 335px;
	}
	60% {
		opacity: 1;
		margin-left: 100px;
		bottom: 340px;
	}
	63% {
		opacity: 1;
		margin-left: 100px;
		bottom: 340px;
	}

	

	65% {
		opacity: 1;
		margin-left: 100px;
		bottom: 295px;
	}
	67% {
		opacity: 1;
		margin-left: 100px;
		bottom: 295px;
	}
	69% {
		opacity: 1;
		margin-left: 95px;
		bottom: 290px;
	}
	71% {
		opacity: 1;
		margin-left: 100px;
		bottom: 295px;
	}
	74% {
		opacity: 1;
		margin-left: 100px;
		bottom: 295px;
	}
 

    76% {
		opacity: 1;
		margin-left: 100px;
		bottom: 255px;
	}
	78% {
		opacity: 1;
		margin-left: 100px;
		bottom: 255px;
	}
	80% {
		opacity: 1;
		margin-left: 95px;
		bottom: 250px;
	}
	82% {
		opacity: 1;
		margin-left: 100px;
		bottom: 255px;
	}
	85% {
		opacity: 1;
		margin-left: 100px;
		bottom: 255px;
	}
  

    87% {
		opacity: 1;
		margin-left: 100px;
		bottom: 215px;
	}
	89% {
		opacity: 1;
		margin-left: 100px;
		bottom: 215px;
	}
	91% {
		opacity: 1;
		margin-left: 95px;
		bottom: 210px;
	}
	93% {
		opacity: 1;
		margin-left: 100px;
		bottom: 215px;
	}
	96% {
		opacity: 1;
		margin-left: 100px;
		bottom: 215px;
	}

	100% {
		opacity: 0;
		margin-left: 300px;
		bottom: 0px;
	}
}

.ie-1 img,.ie-2 img,.ie-3 img,.ie-4 img,.ie-5 img,.ie-6 img,.ie-7 img,.ie-8 img,.ie-9 img {
	max-height: 100%;
} 
.ie-1 { 
	display: none;
    width: 560px;
    height: 110px;
    text-align: center;
        margin-top: 50px;
    
 }
.ie-2 {
	display: none;
	width: 100%;
    height: 401px;
    text-align: center;
    position: absolute;
    bottom:3%;
    left: -100%;
}

.minbody .ie-2 {
   height: 360px;
}

.ie-3 {
	display: none;
	width: 100%;
    height: 354px;
    text-align: center;
    position: absolute;
    bottom:3%;
    left: 100%;

}



.ie-4 {
	display: none;
	text-align: center;
	height: 460px;
	
	position: absolute;
	width: 100%;
	position: absolute;
	bottom: 1%;
	left: -100%;
}
.ie-5 {
	display: none;
	text-align: center;
	height: 440px;
	position: absolute;
	width: 100%;
	position: absolute;
	bottom: 0%;
	left: 100%;
}
.ie-6 {
	display: none;
	text-align: center;
	height: 460px;
	position: absolute;
	width: 100%;
	position: absolute;
	bottom: 0%;
	left: -100%;;
}
.ie-7 {
	display: none;
	text-align: center;
	height: 406px;
	width: 100%;
	position: absolute;
	bottom: 1%;
	left: 100%;;
}
.ie-8 {
	display: none;
	text-align: center;
	height: 391px;
	position: absolute;
	width: 100%;
	position: absolute;
	bottom: 5%;
	left: -100%;
}
.ie-9 {
	display: none;
	text-align: center;
	height: 254px;
	position: absolute;
	width: 100%;
	position: absolute;
	bottom: 15%;
	left:100%;
}
.minbody .ie-4 {
	height: 420px;
	bottom: -30px;
}
.minbody .ie-5 {
	bottom: 0%;
	height:400px;
}
.minbody .ie-6 {
	bottom: 0%;
	height: 420px;
}
.minbody .ie-7 {
	bottom: 0%;

}
.minbody .ie-8 {
	bottom: 0%;

}

.byie {   } 
.byie .div-h1, .byie .div-h2, .byie .download, .byie .section-sec-content h3, .byie .section-sec-content p {
	opacity: 1;
	transition-delay: 0s;
	-webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

#fp-nav { z-index: 99999;  }

#menu-wrapper { z-index: 9999 !important;  }

/* HEADER */

@media only screen and (max-width: 990px) {
	/*
	.web-top{ width:100%;height:60px;}
	.web-top  .web-logo{ width: 65%; margin:0 auto;float:none; line-height: 60px;height: 60px;}
	*/
	.web-top .web-logo a{display:block;width:80%; height:56px;margin: 5px auto; line-height:56px;text-align: center; color: #07a8dc; font-size: 18px;}
	.web-top .web-logo img{width: auto;}
	.web-top  .min-dh-div{ display: block;cursor: pointer; position: absolute; top:3px; left: 10px;text-align: center;}
	.web-top  .min-dh-div img{ margin-top: 0.5em; width: 60%;}

}