﻿html, body, div, h1, h3, p, pre, a, address, em, img, dl, dt, dd, ol, ul, li, form, label, tbody, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit}
html, body {width: 100%;height: 100%;font-family: "microsoft yahei", 'SimSun', Tahoma, Verdana, Arial, Helvetica, sans-serif;font-size: 100%;}
ul, ol, li {list-style: none;}
img {margin: 0;padding: 0;border: 0;outline: 0;}
a,i{text-decoration: none}

.white{ color:#fff;}
.icon{ background:url(img/icon.png) no-repeat;}
.hide{ display:none;}
.show{ display:block;}
.w1000 {width: 1000px;margin: 0 auto; position:relative;}
.pad-l32{padding-left:32px;}
.topBar {width: 100%;height: 77px;background: #434d57;position: fixed;top: 0;z-index: 800}
.topBar h1 {float: left;width: 220px}
.gotop{ background-position:0 0; height:50px; width:290px; margin-top:14px; text-indent:-9999px; display:block; }
.topBar .pageNav {float: right;}
#topBar, #pageContent {display: none;min-width: 1000px;}
.pageNav a {float: left;text-align: right;line-height: 77px;font-size: 20px;color: #ffffff;padding:0 40px;}
.pageNav a.active {color: #00aaaf;background-color:#3d4750;padding:0 40px;}

.banner {height: 724px;margin-top:77px; width:100%;overflow:hidden;position:relative;
 background-color:#fff; }
.bann1-bg{background:url(img/bg1.jpg) no-repeat center top;}
.bann2-bg{background: url(img/banner22.png) no-repeat center top; background-size:1082px 687px; position:absolute; width:1082px; height:724px; top:77px;left:50%; margin-left:-541px;opacity:0.1;opacity:1\9;/*filter:alpha(opacity=100)\9;*/}
.anim-bann2-bg{-webkit-animation: bann2-bg 5s; animation: bann2-bg 5s;}
@-webkit-keyframes bann2-bg {0% {opacity: 0.1;}40% {opacity: 1; }90% {opacity: 1; }100% {opacity: 0.5; }}
@keyframes bann2-bg {0% {opacity: 0.1;}40% {opacity: 1; }90% {opacity: 1; }100% {opacity: 0.5; }}
.banner_inner{position:relative;height:724px;width:1000px;margin:0 auto;}
.bann1,.bann2{ z-index:10; position:relative;}
.bann2{ width:1000px; margin:0 auto; height:724px;}
.anim-bann1{-webkit-animation: bann1 10s; animation: bann1 10s;}
@-webkit-keyframes bann1 {0% {opacity: 0.5;}10% {opacity: 1;}90% {opacity: 1; }100% {opacity: 0; }}
@keyframes bann1 {0% {opacity: 0.5;}10% {opacity: 1;}90% {opacity: 1; }100% {opacity: 0; }}


.banner01{ background-position:0px -66px; height:212px; width:777px; display:inline-block; margin-left:111px; margin-top:180px;}
.anim-banner01{-webkit-animation: banner01 1s; animation: banner01 1s;}
@-webkit-keyframes banner01 {
0% {-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3); opacity: 0;}10% {opacity: 1;}}
@keyframes banner01 {
0% {-webkit-transform:scale(.3);-ms-transform:scale(.3); opacity: 0;}10% {opacity: 1;}}


.banner02{ background-position:0px -286px; height:116px; width:300px; display:inline-block; position:absolute; left:100px; top:523px; cursor:pointer;}
.anim-banner02{-webkit-animation: banner02 1s both; animation: banner02 1s both; }
@-webkit-keyframes banner02 {
0% {-webkit-transform:translateX(1900px); opacity: 0;}
100% {-webkit-transform:translateX(0px);opacity: 1;}}
@keyframes banner02 {
0% {transform:translateX(1900px);opacity: 0;}
100% {transform:translateX(0px);opacity: 1;}}

.banner03{ background-position:-312px -286px; height:116px; width:274px; display:inline-block; position:absolute; left:430px; top:523px;cursor:pointer;}
.anim-banner03{-webkit-animation: banner03 .8s both;animation: banner03 .8s both;}	
@-webkit-keyframes banner03 {
0% {-webkit-transform:translateX(2230px);opacity: 0;}
100% {-webkit-transform:translateX(0px); opacity: 1;}}
@keyframes banner03 {
0% {transform:translateX(2230px);opacity: 0;}
100% {transform:translateX(0px);opacity: 1;}}		

.banner04{ background: url(img/erweima.png) no-repeat; height:164px; width:144px; display:inline-block; position:absolute; left:760px; top:473px; }
.anim-banner04{-webkit-animation: banner04 .6s  both;animation: banner04 .6s both;}	
@-webkit-keyframes banner04 {
0% {-webkit-transform:translateX(2560px);transform:translateX(2560px);opacity: 0;}
100% {-webkit-transform:translateX(0px); transform:translateX(0px);opacity: 1;}}
@keyframes banner04 {
0% {transform:translateX(2560px);opacity: 0;}
100% {transform:translateX(0px); transform:translateX(0px);opacity: 1;}}	


.banner05{ background: url(img/banner21.png) no-repeat; height:376px; width:375px; display:inline-block;  z-index:11;  position:absolute;left: 50%;margin-left: 105px; top:724px; top:190px\0;top:190px\9;
 }
.anim-banner05{-webkit-animation: banner05 5s;animation: banner05 5s;}
@-webkit-keyframes banner05 {
	0% {opacity: 0; -webkit-transform:translate(-880px,400px); transform:translate(-880px,400px);}
	15% {opacity: 1; -webkit-transform:translate(0px,-540px); transform:translate(0px,-540px); }
	90% {opacity: 1; -webkit-transform:translate(0px,-540px); transform:translate(0px,-540px); }
	100% {opacity: 0;-webkit-transform:translate(600px,-1180px); transform:translate(600px,-1180px); }}
@keyframes banner05 {
	0% {opacity: 0; -webkit-transform:translate(-600px,-200px); transform:translate(-600px,-200px);}
	15% {opacity: 1; -webkit-transform:translate(0px,-540px); transform:translate(0px,-540px); }
	90% {opacity: 1; -webkit-transform:translate(0px,-540px); transform:translate(0px,-540px); }
	100% {opacity: 0;-webkit-transform:translate(600px,-1180px); transform:translate(600px,-1180px); }}
	

.banner06{ background: url(img/banner2.png) no-repeat;height:320px; width:647px; top:200px; display:inline-block; opacity:1; /*filter:alpha(opacity=100);*/-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1); z-index:12; position:absolute; left:50%; margin-left:-460px; }
.anim-banner06{-webkit-animation: banner06 5s;animation: banner06 5s;}	
@-webkit-keyframes banner06 {
	0% {opacity: 0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3);}
	20% {opacity: 1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
	90% {opacity: 1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
	100% {opacity: 0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}
@keyframes banner06 {
	0% {opacity: 0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3);}
	20% {opacity: 1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
	90% {opacity: 1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
	100% {opacity: 0;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}}

.control{width:60px;position:absolute;top:750px;left:50%;margin-left:-24px; z-index:98;}	
.control1{width:60px;position:absolute;top:750px;left:50%;margin-left:-24px; z-index:99;}
.dot{float:left;margin-left:15px;width:15px;height:15px;border-radius:50%;cursor:pointer;background-color:#2c7090;z-index:99; transition-property: opacity, background-color; transition-duration: .5s;}	
.current{background:#00aaaf;z-index:100;}
.anim-dot1{background-color:#00aaaf;}


.function-title{background-color:#ebedf0; height:100px; z-index:20;}
.function-title li{ float:left; width:500px; line-height:100px; text-align:center; border:0 none; position:relative;}
.function-title li.function-li-first{padding-right:25px;}
.function-title li a{ line-height:100px; text-align:center; color:#818d9e; font-size:24px; cursor:pointer; padding:0 65px; display:block; text-indent:2em;}


.i-video{ background-position:0 -443px;  height:32px; width:60px; display: inline-block; position:absolute; left:110px;}
.i-android{ background-position:-94px -439px;  height:45px; width:60px; display: inline-block; position:absolute; left:190px; top:28px;}
.i-iphone{ background-position:-170px -439px;  height:45px; width:60px; display: inline-block; position:absolute; left:190px; top:28px;}
.video{ background-color:#f5f6f8;height:270px;}
.product-intruduction{display: inline-block;position: absolute;top: 40px;line-height: 30px;color: #818d9e;font-size: 24px;left: 88px;}
.product-content{ position:absolute; top:100px; line-height:24px; color:#818D9E; font-size:14px; left:88px; width:420px;}
.play{background:url(img/video.jpg) no-repeat center center; width: 252px;height: 197px;position: absolute;right: 80px;top: 36px;}
.video .video-i{ background-position:-644px -397px; height:134px; width:134px; position:absolute; left:50%; top:50%; margin-left:-67px; margin-top:-67px; cursor:pointer;}
.anim-videoscale{-webkit-animation: videoscale 3s linear;animation: videoscale 3s linear;}
@-webkit-keyframes videoscale {
0% {-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1); }
25% {-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8); }
50% {-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1); }
75% {-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2); }
100% {-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1); }}
@keyframes videoscale {
0% {-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1); }
25% {-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8); }
50% {-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1); }
75% {-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2); }
100% {-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1); }}


.andriod{ background: url(img/andriod.png) no-repeat 88px 75px #ffffff;; height:680px; width:1000px; margin:0 auto; position:relative;}
.iphone{ background:url(img/ios.png) no-repeat 638px 75px #ffffff; height:680px; width:1000px; margin:0 auto; position:relative;}
.side{height: 680px;background:url(img/bg3.jpg) no-repeat center top; position:relative}
.homepage{height: 680px; background-color:#fff;}
.resource{height: 680px;background:url(img/bg5.jpg) no-repeat center top;}
.faq{height: 680px; background-color:#fa5a5a;}
.update{height: 920px; background-color:#fff; }

.footer {position: relative;width: 100%;height: 146px;background: #434d57;}
.copyright {float: right;width: 1000px;}
.copyright label {color: #fff;font-size: 14px;line-height: 36px;padding-top: 25px;vertical-align: middle;display: block;text-align: center;}
.copyright label a {color: #fff;text-decoration: underline;}
.copyright label a:hover {color: #ADAFB1;text-decoration: underline;}
.copyright > a{color: #fff;margin-top: 33px;float: right;font-size: 14px;text-decoration: underline;}
.copyright > a:hover{color: #ADAFB1;}
.on{ background-color:#dee0e5;}
.cont-right{padding-left:500px; padding-top:80px;opacity:0;opacity:1!\9;/*filter:alpha(opacity=100)\9;*/}
.cont-right-small{padding-left:600px; padding-top:80px; width:400px;opacity:0;opacity:1\9;/*filter:alpha(opacity=100)\9;*/}
.cont-left{padding-top:80px; width:500px;display: inline-block;position: absolute;opacity:0;opacity:1\9;/*filter:alpha(opacity=100)\9;*/}
.cont-left-small{padding-top:80px; width:380px;opacity:0;opacity:1\9;/*filter:alpha(opacity=100)\9;*/}
.faq-title{ font-size:48px; padding-top:10px; opacity:0;opacity:1\9;/*filter:alpha(opacity=100)\9;*/}
.faqMore{ font-size:14px; color:#19212f; padding-left:20px; cursor:pointer;}
h3{ font-size:60px; padding-top:100px; padding-bottom:20px;}
h2{ font-size:24px; padding:15px 0 10px; margin:0;}
h4{ font-size:16px; padding:15px 0 0 10px; margin:0; }
p{ font-size:24px; line-height:36px;}
#update h2{ color:#333333;}
#faq dl{ opacity:0;}
dd{ font-size:14px; line-height:24px;}
.faq-i1{ background-position:0 -508px; height:25px; width:32px; display:inline-block; vertical-align:middle;}
.faq-i2{ background-position:-40px -508px; height:25px; width:32px; display:inline-block; vertical-align:middle;}
.faq-i3{ background-position:-79px -508px; height:25px; width:32px; display:inline-block; vertical-align:middle;}
.faq-i4{ background-position:-119px -508px; height:25px; width:32px; display:inline-block; vertical-align:middle;}
.update-i{ background-position:-157px -508px; height:25px; width:32px; display:inline-block; vertical-align:middle;}
.update-android{ width:470px; float:left; padding-top:20px;opacity:0;opacity:1\9;/*filter:alpha(opacity=100)\9;*/}
.update-ios{ width:470px; float:right; padding-top:20px; right:0; position:absolute;opacity:0;opacity:1\9;/*filter:alpha(opacity=100)\9; */}
.update-title{ line-height:48px; border-bottom:1px solid #d9dee6; font-size:20px; color:#818d9e;}
.update-android dl,.update-ios dl{ padding:10px 0 20px; border-bottom:1px dotted #d9dee6;}

.overlay {display:none;position:absolute;left:0;top:0;z-index:9000;width:100%;height:100%;background-color:#000;opacity:.6}
.windows, .windows-video {background:#fff;position:absolute;position:fixed;_position:absolute;z-index:999999999999;width:760px;height:500px;left:50%;top:50%;margin:-250px 0 0 -380px;padding:0;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 0 30px #333;-webkit-box-shadow:0 0 30px #333;box-shadow:0 0 30px #333}
.closeDiv {background-position:0 0;font-size:0;width:12px;height:10px;text-indent:-999999px;position:absolute;right:15px;top:15px}
.closeDiv:hover {background-position:0 -11px}
.close {width:36px;height:36px;position:absolute;background:url(img/close.png) no-repeat 0 0;right:-18px;top:-18px}
.ico {background:url(img/close_sm.png) no-repeat;}
#products,#videoplay {color:#333;width:760px}
#products header,#videoplay header{ background-color:#434d57;}
#products header h1,#videoplay header h1, .h1{font-size:16px;height:47px;line-height:47px;width:750px;border-bottom:1px #ccc solid;clear:both;background-color:#434d57;color:#ffffff;padding-left:10px;border-raduis:8px 8px 0 0;}
.tshk {width:0;float:left;background-color:#dedede;height:452px;border-radius: 0 0 0 8px;overflow:hidden;}
#products .manualList {width:198px;float:left;margin-top:20px;background-color:#dedede;}
#products .manualList li {width:198px;height:55px;line-height:55px;cursor:pointer;zoom:1;}
#products .manualList li:after {content:" ";display:block;clear:both}
#products .manualList li:hover {background:#efefef}
#products .manualList h2 a {color:#333;font-size:16px;text-indent:15px;text-decoration:none;display:block}
#products .manualList li.active {background:#999}
#products .manualList li.active h2 a {color:#fff}
#products .details {color:#666;width:740px;float:left;margin-left:20px;}
#products .details div {height:450px;overflow:auto}
#products .details h3 {background:url(img/point.png-t=20120814.png) no-repeat 0 center;color:#333;font-size:14px;padding-left:10px}
#products .details h3 i {color:#999;font-size:11px;padding:0 10px}
#products .details p {font-size:12px;line-height:24px;padding:10px}
#products .details img {padding:0 0 20px 10px}
#products .details .detail display:none}
#products .details .detail.active {display:block}
.details a {color:#65a3de;white-space:nowrap}
.details a:hover {color:#0884cd;}


.side-page{background: url(img/shenbian2.png) no-repeat;width: 253px;height: 435px;position: absolute;top:120px;right:253px; right:0\9;  z-index:10;}
.anim-side-page{-webkit-transition-property: -webkit-transform;-webkit-transition-duration: .5s;-moz-transition-property: -moz-transform;-moz-transition-duration: .5s;-webkit-animation: slide 1s ease both;animation: slide 1s ease both;right:253px; right:0\9\0;}
@-webkit-keyframes slide {from {right:253px;}to {right:0px;}}
@keyframes slide {from {right:253px;}to {right:0px;}}


.scanning{ background: url(img/shenbian4.png) no-repeat center center; background-size:330px 330px; width: 330px;height: 330px;position: absolute;right: -36px; overflow:hidden; z-index:12;}
.anim-scanning{-webkit-transition-property: -webkit-transform;-webkit-transition-duration: 1s;-moz-transition-property: -moz-transform;-moz-transition-duration: 1s;
-webkit-animation: rotate 2s linear 1.5s 2;animation: rotate 2s linear 1.5s 2;}
@-webkit-keyframes rotate {from {-webkit-transform: rotate(0deg)}to {-webkit-transform: rotate(360deg)}}
@keyframes rotate {from {transform: rotate(0deg)}to {transform: rotate(360deg)}}


.side-person{background: url(img/shenbian5.png) no-repeat center center; background-size:330px 330px; opacity:0;opacity:1\9;/*filter:alpha(opacity=100)\9;*/ width: 260px;height: 330px;position: absolute;top: 128px;right: 19px; overflow:hidden; z-index:13;}
.anim-side-person{-webkit-animation: sideperson 1s ease both;-moz-animation: sideperson 1s ease both;-o-animation: sideperson 1s ease both ;animation: sideperson 1s ease both;}
@-webkit-keyframes sideperson {from {-webkit-transform:scale(0,0); opacity:0;}to {-webkit-transform:scale(1,1); opacity:1}}
@keyframes sideperson {from {transform:scale(0,0); opacity:0;}to {transform:scale(1,1); opacity:1;}}


.side-btn{ background: url(img/shenbian3.png) no-repeat center center; background-size:90px 90px; width: 90px;height: 90px;position: absolute;top: 250px;right: 104px; z-index:14;}
.side-mobile{ background: url(img/shenbian1.png) no-repeat;width: 295px;height: 562px;position: absolute;top: 60px;right: 220px; z-index:11;}
.scan{width: 260px;height: 330px;position: absolute;top: 128px;right: 19px; overflow:hidden; z-index:12;}
.homepage-page{background: url(img/redian.png) no-repeat;width: 252px;height: 435px;position: absolute;top:120px; left:0; left:265px\9; z-index:10;}
.anim-homepage-page{-webkit-transition-property: -webkit-transform;-webkit-transition-duration: .5s;-moz-transition-property: -moz-transform;-moz-transition-duration: .5s;-webkit-animation: hpslide 1s ease both;animation: hpslide 1s ease both;}
@-webkit-keyframes hpslide {from {left:0px;}to {left:265px;}}
@keyframes hpslide {from {left:0px;}to {left:265px;}}

.homepage-mobile{ background: url(img/homepage.png) no-repeat;width: 295px;height: 562px;position: absolute;top: 60px;left: 0px; z-index:11;}
.resource-mobile{background: url(img/more.png) no-repeat;width: 295px;height: 562px;position: relative;top: 60px;left: 638px; z-index:11;}

.resource-cont-out{ width:257px; z-index:12;position:absolute; top:66px; display:inline-block; height:418px; left:19px; overflow:hidden;}
.resource-cont{ background:url(img/resource.jpg) no-repeat; height:418px;  z-index:12; position:absolute; top:0px;transform: translateX(0);clip: rect(0,257px,418px,0); display:inline-block;width: 1799px;left: 0px;}
.anim-resource-cont{-webkit-animation: resourceslide 10s ease-out both;animation: resourceslide 10s ease-out both;}
@-webkit-keyframes resourceslide {
0%{-webkit-transform: translateX(0);clip: rect(0,257px,418px,0);}
8%{-webkit-transform: translateX(0);clip: rect(0,257px,418px,0);}
16%{-webkit-transform: translateX(-257px); clip: rect(0,514px,418px,0);}
24%{-webkit-transform: translateX(-257px); clip: rect(0,514px,418px,0);}
32%{-webkit-transform: translateX(-514px); clip: rect(0,771px,418px,514px);}
40%{-webkit-transform: translateX(-514px); clip: rect(0,771px,418px,514px);}
48%{-webkit-transform: translateX(-771px); clip: rect(0,1028px,418px,771px);}
56%{-webkit-transform: translateX(-771px); clip: rect(0,1028px,418px,771px);}
64%{-webkit-transform: translateX(-1028px); clip: rect(0,1285px,418px,1028px);}
72%{-webkit-transform: translateX(-1028px); clip: rect(0,1285px,418px,1028px);}
80%{-webkit-transform: translateX(-1285px); clip: rect(0,1542px,418px,1285px);}
88%{-webkit-transform: translateX(-1285px); clip: rect(0,1542px,418px,1285px);}
96%{-webkit-transform: translateX(-1542px); clip: rect(0,1799px,418px,1542px);}
100%{-webkit-transform: translateX(-1542px); clip: rect(0,1799px,418px,1542px);}}
@keyframes resourceslide {
0%{transform: translateX(0);clip: rect(0,257px,418px,0);}
8%{transform: translateX(0);clip: rect(0,257px,418px,0);}
16%{transform: translateX(-257px); clip: rect(0,514px,418px,257px);}
24%{transform: translateX(-257px); clip: rect(0,514px,418px,257px);}
32%{transform: translateX(-514px); clip: rect(0,771px,418px,514px);}
40%{transform: translateX(-514px); clip: rect(0,771px,418px,514px);}
48%{transform: translateX(-771px); clip: rect(0,1028px,418px,771px);}
56%{transform: translateX(-771px); clip: rect(0,1028px,418px,771px);}
64%{transform: translateX(-1028px); clip: rect(0,1285px,418px,1028px);}
72%{transform: translateX(-1028px); clip: rect(0,1285px,418px,1028px);}
80%{transform: translateX(-1285px); clip: rect(0,1542px,418px,1285px);}
88%{transform: translateX(-1285px); clip: rect(0,1542px,418px,1285px);}
96%{transform: translateX(-1542px); clip: rect(0,1799px,418px,1542px);}
100%{transform: translateX(-1542px); clip: rect(0,1799px,418px,1542px);}}

.iphone-out{width:257px;z-index: 12;position: absolute;top: 186px;display: inline-block;height: 326px;left: 651px; overflow:hidden;}
.iphonecont{background: url(img/ios_wifi.jpg) no-repeat; width:257px;z-index: 12;position: absolute;top: 0px;transform: translateY(0);clip: rect(0,257px,326px,0);display: inline-block;height: 652px;left: 0px;}
.anim-iphonecont{-webkit-animation: iphonecont 1.8s ease-out both ;animation: iphonecont 1.8s ease-out both;}
@-webkit-keyframes iphonecont {
0%{-webkit-transform: translateY(0);clip: rect(0,257px,326px,0);}
50%{-webkit-transform: translateY(0);clip: rect(0,257px,326px,0);}
75%{-webkit-transform: translateY(-326px);clip: rect(326px,257px,652px,0);}
100%{-webkit-transform: translateY(-326px);clip: rect(326px,257px,652px,0);}}
@keyframes iphonecont {
0%{transform: translateY(0);clip: rect(0,257px,326px,0);}
50%{transform: translateY(0);clip: rect(0,257px,326px,0);}
75%{transform: translateY(-326px);clip: rect(326px,257px,652px,0);}
100%{transform: translateY(-326px);clip: rect(326px,257px,652px,0);}}

.anim-con2{-webkit-animation: con2 .5s ease-out both ;-moz-animation: con2 .5s ease-out both;-o-animation: con2 .5s ease-out both;animation: con2 .5s ease-out both; position:absolute;}
@-webkit-keyframes con2 {0%{top:500px;opacity:0;}100%{top:0px;opacity:1}}
@keyframes con2 {0%{top:500px;opacity:0;}100%{top:0px;opacity:1}}
.anim-con3{-webkit-animation: con3 .4s ease-out both ;-moz-animation: con3 .4s ease-out both;-o-animation: con3 .4s ease-out both;animation: con3 .4s ease-out both; position:absolute; }
@-webkit-keyframes con3 {0%{top:-200px;opacity:0;}100%{top:0px;opacity:1}}
@keyframes con3 {0%{top:-200px;opacity:0;}100%{top:0px;opacity:1}}
.anim-side-word{-webkit-animation: side-word .8s ease .3s both ;-moz-animation: side-word .8s ease .3s both;-o-animation: side-word .8s ease .3s both;animation: side-word .8s ease .3s both; position:absolute; }
@-webkit-keyframes side-word {0%{left:50%;opacity:0;}100%{left:0;opacity:1}}
@keyframes side-word {0%{left:50%;opacity:0;}100%{left:0;opacity:1}}
.anim-homepage-word{-webkit-animation: homepage-word .8s ease-out .3s both ;-moz-animation: homepage-word .8s ease-out .3s both;-o-animation: homepage-word .8s ease-out .3s both;animation: homepage-word .8s ease-out .3s both; position:absolute; }
@-webkit-keyframes homepage-word {0%{padding-left:1100px;opacity:0;}100%{padding-left:600px;opacity:1}}
@keyframes homepage-word {0%{padding-left:1100px;opacity:0;}100%{padding-left:600;opacity:1}}
.anim-resource-word{-webkit-animation: resource-word .8s ease-out .3s both ;-moz-animation: resource-word .8s ease-out .3s both;-o-animation: resource-word .8s ease-out .3s both;animation: resource-word .8s ease-out .3s both; position:absolute; }
@-webkit-keyframes resource-word {0%{left:-50%;opacity:0;}100%{left:0;opacity:1}}
@keyframes resource-word {0%{left:-50%;opacity:0;}100%{left:0;opacity:1}}
.anim-update-android{-webkit-animation: update-android 1s ease-out .3s both ;-moz-animation: update-android 1s ease-out .3s both;-o-animation: update-android 1s ease-out .3s both;animation: update-android 1s ease-out .3s both; position:absolute; }
@-webkit-keyframes update-android {0%{left:-50%;opacity:0;}100%{left:0;opacity:1}}
@keyframes update-android {0%{left:-50%;opacity:0;}100%{left:0;opacity:1}}
.anim-update-ios{-webkit-animation: update-ios .8s ease .3s both;-moz-animation: update-ios .8s ease-out .3s both;-o-animation: update-ios .8s ease-out .3s both;animation: update-ios .8s ease-out .3s both; position:absolute; }
@-webkit-keyframes update-ios {0%{right:-50%;opacity:0;}100%{right:0;opacity:1}}
@keyframes update-ios {0%{right:-50%;opacity:0;}100%{right:0;opacity:1}}
#faq-title{top:10px; opacity:1\9;/*filter:alpha(opacity=100)\9;*/ position:absolute;}
.anim-faq-title{-webkit-animation: faq-title .5s ease-out both ;-moz-animation: faq-title .5s ease-out both;-o-animation: faq-title .5s ease-out both;animation:faq-title .5s ease-out both; }
@-webkit-keyframes faq-title {0%{top:710px;opacity:0;}100%{top:10px;opacity:1}}
@keyframes faq-title {0%{top:710px;opacity:0;}100%{top:10px;opacity:1}}
#faq dl#dl1{top:80px; opacity:1\9;/*filter:alpha(opacity=100)\9;*/}
.anim-dl1{-webkit-animation: dl1 .7s ease-out both ;-moz-animation: dl1 .7s ease-out both;-o-animation: dl1 .7s ease-out both;animation:dl1 .7s ease-out both; position:absolute; }
@-webkit-keyframes dl1 {0%{top:780px;opacity:0;}100%{top:80px; opacity:1}}
@keyframes dl1 {0%{top:780px;opacity:0;}100%{top:80px;opacity:1}}
#faq dl#dl2{top:155px; opacity:1\9;/*filter:alpha(opacity=100)\9;*/}
.anim-dl2{-webkit-animation: dl2 .7s ease-out both ;-moz-animation: dl2 .7s ease-out both;-o-animation: dl2 .7s ease-out both;animation:dl2 .7s ease-out both; position:absolute;}
@-webkit-keyframes dl2 {0%{top:855px;opacity:0;}100%{top:155px;opacity:1}}
@keyframes dl2 {0%{top:855px;opacity:0;}100%{top:155px;opacity:1}}
#faq dl#dl3{top:375px; opacity:1\9;/*filter:alpha(opacity=100)\9;*/}
.anim-dl3{-webkit-animation: dl3 .7s ease-out both ;-moz-animation: dl3 .7s ease-out both;-o-animation: dl3 .7s ease-out both;animation:dl3 .7s ease-out both; position:absolute;}
@-webkit-keyframes dl3 {0%{top:1075px;opacity:0;}100%{top:375px;opacity:1}}
@keyframes dl3 {0%{top:1075px;opacity:0;}100%{top:375px;opacity:1}}
#faq dl#dl4{top:570px; opacity:1\9;/*filter:alpha(opacity=100)\9;*/}
.anim-dl4{-webkit-animation: dl4 .7s ease-out both ;-moz-animation: dl4 .7s ease-out both;-o-animation: dl4 .7s ease-out both;animation:dl4 .7s ease-out both; position:absolute;}
@-webkit-keyframes dl4 {0%{top:1270px;opacity:0;}100%{top:570px;opacity:1}}
@keyframes dl4 {0%{top:1270px;opacity:0;}100%{top:570px;opacity:1}}



.androidcont{background: url(img/android-link.jpg) no-repeat;width: 257px;height: 418px;z-index: 12;position: absolute; left: 101px;top: 192px;  display: inline-block;}
.anim-androidcont{-webkit-animation: androidcont 3s ease-out both ;-moz-animation: androidcont 3s ease-out both;-o-animation: androidcont 3s ease-out both;animation: androidcont 3s ease-out both;}
@-webkit-keyframes androidcont {0%{opacity:0}50%{opacity:0}51.1%{opacity:1}100%{opacity:1}}
@keyframes androidcont {0%{opacity:0}50%{opacity:0}51.1%{opacity:1}100%{opacity:1}}

.androiddeploy-out{ position:absolute;width: 257px;height: 368px;z-index: 13; overflow:hidden;top: 186px;left: 101px;}
.androiddeploy{background: url(img/android.png) no-repeat;width: 257px;height: 297px;z-index: 13;position: absolute; left:0px;  display: inline-block;}
.anim-androiddeploy{
	-webkit-animation: androiddeploy 2s ease-out .5s both;animation: androiddeploy 2s ease-out .5s both;}
@-webkit-keyframes androiddeploy {0%{top:-297px}45%{top:0px}55%{top:0px}100%{top:-297px}}
@keyframes androiddeploy {0%{top:-297px}45%{top:0px}55%{top:0px}100%{top:-297px}}

.goto{background: url(img/goto.png) no-repeat;position:fixed;top:270px;right:6px;width:150px;height:350px;z-index:9000;	}
.goto a{color:#042836;text-decoration: none;text-align:center;display:block;width:150px;font: 14px "宋体";}
.goto a.a1{position:absolute;top:306px;}