/* CSS Document */

html,body{ width: 100%; height: 100%; }
body{ margin: 0; padding: 0; font-family:'microsoft yahei';}


/*global*/
.logo,.update-log,.Dbbs,.platforms a,.down a,.stage .download{ background-image: url(../img/global.png); background-repeat: no-repeat;}

.logo{ width: 192px; height: 56px; margin-top:20px; float:left;  }
.update-log{ width: 92px; height: 30px; position: absolute; background-position: 0 -56px; right: 580px; top: 30px; z-index: 998}
.Dbbs{ width: 70px; height: 30px; position: absolute; background-position: 0 -86px; z-index: 998; right:28%; top:25px; z-index: 998;text-decoration: none;}
.hom{  width: 92px; height: 30px; position: absolute; left:280px; top: 30px; z-index: 998;font-size:23px;color:#666; text-decoration: none;}
.dow{  width: 92px; height: 30px; position: absolute; left:350px; top: 30px; z-index: 998;font-size:23px;color:#666; text-decoration: none;}
.gm{  width: 92px; height: 30px; position: absolute; left:420px; top: 30px; z-index: 998;font-size:23px;color:#666; text-decoration: none;}
.fw{  width: 92px; height: 30px; position: absolute; left:490px; top: 30px; z-index: 998;font-size:23px;color:#666; text-decoration: none;}
.wreg{  width: 55px; height: 30px; position: absolute; right:36%; top: 30px; z-index: 998;font-size:18px;color:#666; text-decoration: none;}
.Lreg{  width:500px; height: 30px; position: absolute; right:32.5%; top: 30px; z-index: 998;font-size:16px;color:#666; text-decoration: none; text-align:right}
.headerLogin{  width: 45px; height: 30px; position: absolute; right:33%; top: 30px; z-index: 998;font-size:18px;color:#666; text-decoration: none;}
a.update-log:hover,a.bbs:hover{ opacity: .8; filter:alpha(opacity=80);}
 .platforms{ height: 95px; width: 90px; position: absolute; right: 1%; margin-left: 90%;  z-index: 9999;}
.platforms a.yqs{ width: 92px; height: 93px; background-position: -15px -116px; position: absolute; bottom: 1px; left:-150px;top:200px}
.platforms a.yqs:hover{ background-position: -106px -116px;}
.platforms a.yqs:active{ background-position: -15px -116px;}
.platforms a.yqs.selected{ background-position: -288px -116px; cursor: default;}
.platforms a.mac{ width: 92px; height: 93px; background-position: -15px -211px; position: absolute; bottom: 1px;left:-150px;top:250px}
.platforms a.mac:hover{ background-position: -106px -211px;}
.platforms a.mac:active{ background-position: -15px -211px;}
.platforms a.mac.selected{ background-position: -288px -211px; cursor: default;}

.platforms a.ios{ width: 92px; height: 93px; background-position: -15px -308px; position: absolute; bottom: 1px; left:-150px;top:300px }
.platforms a.ios:hover{ background-position: -106px -308px;}
.platforms a.ios:active{ background-position: -15px -308px;}
.platforms a.ios.selected{ background-position: -288px -308px; cursor: default;}

.platforms a.android{ width: 92px; height: 93px; background-position: 0 -401px; position: absolute; bottom: 1px; left:-630px;top:585px  }
.platforms a.android:hover{ background-position: -92px -401px;}
.platforms a.android:active{ background-position: -184px -401px;}
.platforms a.android.selected{ background-position: -280px -401px; cursor: default;}




.down{ width: 194px; height: 48px; position: absolute; left: 50%; bottom: 23px; margin-left: -98px; z-index: 999; display:none;}
.down a{ display: none; position: absolute;}
.down .yqs,.down .android{ width: 194px; height: 48px; left: 0; top: 0; background-position: 0 -592px;}
.down .yqs:hover,.down .android:hover{ background-position: -196px -592px;}
.down .yqs:active,.down .android:active{ background-position: -392px -592px;}
.down .mac{ width: 194px; height: 48px; left: 0; top: 0; background-position: 0 -640px;}
.down .mac:hover{ background-position: -196px -640px;}
.down .mac:active{ background-position: -392px -640px;}
.down .ios{ width: 194px; height: 48px; left: 20px; top: 0; margin: 0 auto; background-position: 0 -640px;}
.down .ios:hover{ background-position: -196px -640px;}
.down .ios:active{ background-position: -392px -640px;}
.down.yqs,.down.android,.down.ios,.down.mac{ display:block;}
.down.yqs .yqs{ display: block;}
.down.android .android{ display: block;}
.down.android .android.soon{ background-position: 0 -470px; cursor: default;}
.down.ios .ios{ display: block;}
.down.mac .mac{ display: block;}

.indexes{ width: 12px; height: 100px; position: absolute; right: 20px; top: 60%; margin-top: -80px; z-index: 999;}
.indexes span{ display: block;  overflow: hidden; border-radius: 12px; width: 15px; height: 15px; background-color: #FFCCCC; margin-top: 15px; cursor: default;}
.indexes span.current{ width: 15px; height: 15px; border: none; background-color: #1cadf0; }

.line{ width: 100%; height: 1px; overflow: hidden; background-color: #ff9933; position: absolute;}
.line.other{ top: 1px; margin: 0;}

.stage{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; }
.stage .elem{ position: absolute; left: 50%; top: 50%;}
.stage .scene{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: none;}
.stage a:hover{ opacity: .8; filter:alpha(opacity=80); }
.stage .anim{ width: 100%; height: 100%; position: absolute; left: 0; top: 0}


.s0 .yqs,.s0 .mac,.s0 .ios,.s0 .android{ display: none; position:absolute; width:100%; height:100%; z-index:0;}
.s0 .yqs { background-image: url(../img/dw1.png); background-repeat: no-repeat;background-position:center center;position:absolute;z-index:0}
.s0 .yqs .elem{ background-image: url(../img/s0_win.png); background-repeat: no-repeat;}
.s0 .yqs .elem.display{ width: 476px; height: 160px; background-image: url(../img/soft.png); margin:-30px 0 0 -225px;}
.s0 .yqs .elem.lamp1{ width: 432px; height: 278px; background-position:0 0; margin: -168px 0 0 -550px; }

.s0 .yqs .elem.brush{ width: 200px; height: 145px; background-position:-694px 0; margin: 60px 0 0 -450px; }
/*
.s0 .yqs .elem.c1{ width: 17px; height: 17px; background-color: #1cadf0;  border-radius: 17px; margin:-160px 0 0 -390px; z-index: 1;
    -webkit-animation: breath 3s ease-in-out 0.1s  infinite both ;
    -moz-animation: breath 3s  ease-in-out 0.1s infinite both ;
    animation: breath 3s  ease-in-out 0.1s infinite both ;}
.s0 .yqs .elem.c2{ width: 18px; height: 18px; background-color: #1cadf0;  border-radius: 18px; margin:-200px 0 0 -280px; z-index: 1;
    -webkit-animation: breath 4s ease-in-out .2s  infinite both ;
    -moz-animation: breath 4s  ease-in-out .2s infinite both ;
    animation: breath 4s  ease-in-out .2s infinite both ;}
.s0 .yqs .elem.c3{ width: 18px; height: 18px; background-color: #1cadf0; border-radius: 18px; margin:-230px 0 0 280px; z-index: 1;
    -webkit-animation: breath 6s ease-in-out .3s  infinite both ;
    -moz-animation: breath 6s  ease-in-out .3s infinite both ;
    animation: breath 6s  ease-in-out .3s infinite both ;}
.s0 .yqs .elem.c4{ width: 15px; height: 15px; background-color: #1cadf0; border-radius: 15px; margin:0 0 0 390px; z-index: 1;
    -webkit-animation: breath 5s ease-in-out .4s  infinite both ;
    -moz-animation: breath 5s  ease-in-out .4s infinite both ;
    animation: breath 5s  ease-in-out .4s infinite both ;}

.s0 .yqs .elem.x1{background-image: url(../img/s0_mac.png); background-repeat: no-repeat; width: 34px; height: 35px; background-position: -690px -209px; margin:-280px 0 0 -200px; z-index: 1;
    -webkit-animation: breath 3s ease-in-out .5s  infinite both ;
    -moz-animation: breath 3s  ease-in-out .5s infinite both ;
    animation: breath 3s  ease-in-out .5s infinite both ;}
.s0 .yqs .elem.x2{background-image: url(../img/s0_mac.png); background-repeat: no-repeat; width: 34px; height: 35px; background-position: -690px -209px; margin:-240px 0 0 160px; z-index: 1;
    -webkit-animation: breath 4s ease-in-out .6s  infinite both ;
    -moz-animation: breath 4s  ease-in-out .6s infinite both ;
    animation: breath 4s  ease-in-out .6s infinite both ;}
.s0 .yqs .elem.x3{ background-image: url(../img/s0_mac.png); background-repeat: no-repeat;width: 26px; height: 26px; background-position: -724px -209px; margin:-100px 0 0 330px; z-index: 1;
    -webkit-animation: breath 3.5s ease-in-out .7s  infinite both ;
    -moz-animation: breath 3.5s  ease-in-out .7s infinite both ;
    animation: breath 3.5s  ease-in-out .7s infinite both ;}
*/
	

.s0 .yqs a.download:hover{ background-position: -196px -592px;}
.s0 .yqs a.download:active{ background-position: -392px -592px;}
.s0 .yqs .desc a{ color: #a2c5ff; text-decoration: underline;}
.s0 .yqs .desc a:hover{ opacity: .9; filter:alpha(opacity=90);}

.s0 .mac .elem{ background-image: url(../img/s0_mac.png); background-repeat: no-repeat;}
.s0 .mac .elem.snow{ width: 129px; height: 27px; background-position: -450px -321px; margin: 183px 0 0 -270px; z-index: 1; -webkit-transform-origin: center 100%; -moz-transform-origin: center 100%; transform-origin: center 100%;}
.s0 .mac .elem.snowman{ width: 365px; height: 236px; background-position: -585px 0; margin: 80px 0 0 180px; z-index: 1; -webkit-transform-origin: center 100%; -moz-transform-origin: center 100%; transform-origin: center 100%;}
.s0 .mac .elem.c1{ width: 17px; height: 17px; background-color: #4fa4ff;  border-radius: 17px; margin:-160px 0 0 -390px; z-index: 1;
    -webkit-animation: breath 3s ease-in-out 0.1s  infinite both ;
    -moz-animation: breath 3s  ease-in-out 0.1s infinite both ;
    animation: breath 3s  ease-in-out 0.1s infinite both ;}
.s0 .mac .elem.c2{ width: 8px; height: 8px; background-color: #1cadf0;  border-radius: 8px; margin:-200px 0 0 -280px; z-index: 1;
    -webkit-animation: breath 4s ease-in-out .2s  infinite both ;
    -moz-animation: breath 4s  ease-in-out .2s infinite both ;
    animation: breath 4s  ease-in-out .2s infinite both ;}
.s0 .mac .elem.c3{ width: 8px; height: 8px; background-color: #1cadf0; border-radius: 8px; margin:-230px 0 0 280px; z-index: 1;
    -webkit-animation: breath 6s ease-in-out .3s  infinite both ;
    -moz-animation: breath 6s  ease-in-out .3s infinite both ;
    animation: breath 6s  ease-in-out .3s infinite both ;}
.s0 .mac .elem.c4{ width: 5px; height: 5px; background-color: #1cadf0; border-radius: 5px; margin:0 0 0 390px; z-index: 1;
    -webkit-animation: breath 5s ease-in-out .4s  infinite both ;
    -moz-animation: breath 5s  ease-in-out .4s infinite both ;
    animation: breath 5s  ease-in-out .4s infinite both ;}
.s0 .mac .elem.x1{background-image: url(../img/s0_mac.png); background-repeat: no-repeat; width: 34px; height: 35px; background-position: -922px -246px; margin:-280px 0 0 -200px; z-index: 1;
    -webkit-animation: breath 3s ease-in-out .5s  infinite both ;
    -moz-animation: breath 3s  ease-in-out .5s infinite both ;
    animation: breath 3s  ease-in-out .5s infinite both ;}
.s0 .mac .elem.x2{background-image: url(../img/s0_mac.png); background-repeat: no-repeat; width: 34px; height: 35px; background-position: -890px -246px; margin:-240px 0 0 160px; z-index: 1;
    -webkit-animation: breath 4s ease-in-out .6s  infinite both ;
    -moz-animation: breath 4s  ease-in-out .6s infinite both ;
    animation: breath 4s  ease-in-out .6s infinite both ;}
.s0 .mac .elem.x3{ background-image: url(../img/s0_mac.png); background-repeat: no-repeat;width: 26px; height: 26px; background-position: -922px -246px; margin:-100px 0 0 330px; z-index: 1;
    -webkit-animation: breath 3.5s ease-in-out .7s  infinite both ;
    -moz-animation: breath 3.5s  ease-in-out .7s infinite both ;
    animation: breath 3.5s  ease-in-out .7s infinite both ;}
.s0 .mac a.download{ width: 194px; height: 48px; position: absolute;top:50%;left:50%; margin: 170px 0 0 -97px; background-position: 0 -640px; }
.s0 .mac a.download:hover{ background-position: -196px -640px;}
.s0 .mac a.download:active{ background-position: -392px -640px;}
.s0 .mac .desc a{ color: #a2c5ff; text-decoration: underline;}
.s0 .mac .desc a:hover{ opacity: .9; filter:alpha(opacity=90);}


.s0 .ios{background-image: url(../img/cloud_bg.png);background-repeat: no-repeat; filter:alpha(opacity=50);  
      -moz-opacity:0.5;  
      -khtml-opacity: 0.5;  
      opacity: 0.5;   }
.s0 .ios .elem{ background-image: url(../img/s0_ios.png); background-repeat: no-repeat;}
.s0 .ios .elem.display{ width: 476px; height: 160px; background-image: url(../img/yun.png); margin: -30px 0 0 -225px; z-index: 1}
.s0 .ios .elem.tree{ width: 157px; height: 260px; background-position: -220px 0; margin: -47px 0 0 -500px; -webkit-transform-origin: center 100%; -moz-transform-origin: center 100%; transform-origin: center 100%; }
.s0 .ios .elem.balloon-big{ width: 365px; height: 235px; background-image: url(../img/cloud.png); margin: -300px 0 0 -180px;}
.s0 .ios .elem.balloon-small{ width: 136px; height: 85px; background-position: -476px -113px; margin: 150px 0 0 300px;}
.s0 .ios .elem.signs1{ width: 176px; height: 174px; background-position: -220px -260px; margin: 37px 0 0 400px; -webkit-transform-origin: center 100%; -moz-transform-origin: center 100%; transform-origin: center 100%; }
.s0 .ios .elem.bird{ width: 140px; height: 189px; background-position: -660px 0px; margin: -260px 0 0 320px}
.s0 .ios .qrcode{ width: 230px; height: 220px; overflow: hidden; position: absolute; left: 50%; top: 50%; margin: 100px 0 0 250px}
.s0 .ios .qrcode img{ display: block; width: 147px; height: 147px; overflow: hidden; margin: 0 auto;}
.s0 .ios .qrcode .text{ line-height: 40px; text-align: center; color: #a6c8ff; font-size: 14px;}

.s0 .ios .elem.c11{ width: 17px; height: 17px; background-color: #1cadf0;  border-radius: 17px; margin:-160px 0 0 -390px; z-index: 1;
    -webkit-animation: breath 3s ease-in-out 0.1s  infinite both ;
    -moz-animation: breath 3s  ease-in-out 0.1s infinite both ;
    animation: breath 3s  ease-in-out 0.1s infinite both ;}
.s0 .ios .elem.c21{ width: 18px; height: 18px; background-color: #1cadf0;  border-radius: 18px; margin:-200px 0 0 -280px; z-index: 1;
    -webkit-animation: breath 4s ease-in-out .2s  infinite both ;
    -moz-animation: breath 4s  ease-in-out .2s infinite both ;
    animation: breath 4s  ease-in-out .2s infinite both ;}
.s0 .ios .elem.c13{ width: 18px; height: 18px; background-color: #1cadf0; border-radius: 18px; margin:-230px 0 0 280px; z-index: 1;
    -webkit-animation: breath 6s ease-in-out .3s  infinite both ;
    -moz-animation: breath 6s  ease-in-out .3s infinite both ;
    animation: breath 6s  ease-in-out .3s infinite both ;}
.s0 .ios .elem.c41{ width: 15px; height: 15px; background-color: #1cadf0; border-radius: 15px; margin:0 0 0 450px; z-index: 1;
    -webkit-animation: breath 5s ease-in-out .4s  infinite both ;
    -moz-animation: breath 5s  ease-in-out .4s infinite both ;
    animation: breath 5s  ease-in-out .4s infinite both ;}
.s0 .ios .elem.x11{background-image: url(../img/s0_mac.png); background-repeat: no-repeat; width: 34px; height: 35px; background-position: -690px -209px; margin:-280px 0 0 -200px; z-index: 1;
    -webkit-animation: breath 3s ease-in-out .5s  infinite both ;
    -moz-animation: breath 3s  ease-in-out .5s infinite both ;
    animation: breath 3s  ease-in-out .5s infinite both ;}
.s0 .ios .elem.x21{background-image: url(../img/s0_mac.png); background-repeat: no-repeat; width: 34px; height: 35px; background-position: -690px -209px; margin:-240px 0 0 160px; z-index: 1;
    -webkit-animation: breath 4s ease-in-out .6s  infinite both ;
    -moz-animation: breath 4s  ease-in-out .6s infinite both ;
    animation: breath 4s  ease-in-out .6s infinite both ;}
.s0 .ios .elem.x31{ background-image: url(../img/s0_mac.png); background-repeat: no-repeat;width: 26px; height: 26px; background-position: -724px -209px; margin:-100px 0 0 500px; z-index: 1;
    -webkit-animation: breath 3.5s ease-in-out .7s  infinite both ;
    -moz-animation: breath 3.5s  ease-in-out .7s infinite both ;
    animation: breath 3.5s  ease-in-out .7s infinite both ;}

.s0 .ios .boossios{ width: 230px; height: 220px; overflow: hidden; position: absolute; left: 50%; top: 50%; margin: -110px 0 0 250px}
.s0 .ios .boossios img{ display: block; width: 147px; height: 147px; overflow: hidden; margin: 0 auto;}
.s0 .ios .boossios .text{ line-height: 40px; text-align: center; color: #a6c8ff; font-size: 14px;}

.s0 .ios .andr{ width: 230px; height: 220px; overflow: hidden; position: absolute; left: 50%; top: 50%; margin: 100px 0 0 -465px}
.s0 .ios .andr img{ display: block; width: 147px; height: 147px; overflow: hidden; margin: 0 auto;}
.s0 .ios .andr .text{ line-height: 40px; text-align: center; color: #f8720d; font-size: 14px;}

.s0 .ios .bossandr{ width: 230px; height: 220px; overflow: hidden; position: absolute; left: 50%; top: 50%; margin: -110px 0 0 -465px}
.s0 .ios .bossandr img{ display: block; width: 147px; height: 147px; overflow: hidden; margin: 0 auto;}
.s0 .ios .bossandr .text{ line-height: 40px; text-align: center; color: #f8720d; font-size: 14px;}

.s0 .ios a.download{ width: 194px; height: 48px; position: absolute; left: 50%; top: 50%; margin: 250px 0 0 -97px; background-position: 0 -640px; }
.s0 .ios a.download:hover{ background-position: -196px -640px;}
.s0 .ios a.download:hover{ background-position: -392px -640px;}
.s0 .ios .desc{ width: 300px; overflow: hidden; text-align: center; line-height: 24px; font-size: 14px; font-family: microsoft yahei; color: #1cadf0; position: absolute; left: 50%; top: 50%; margin: 310px 0 0 -150px;}

.s0 .android .elem{ background-image: url(../img/s0_android.png); background-repeat: no-repeat;}
.s0 .android .elem.display{ width: 450px; height: 368px; background-position: 0 0; margin: -150px 0 0 -240px; z-index: 1}
.s0 .android .elem.planet{ width: 190px; height: 193px; background-position: -470px 0; margin: -56px 0 0 -500px;}
.s0 .android .elem.bubbles1{ width: 417px; height: 229px; background-position: -225px -266px; margin: -300px 0 0 -220px}
.s0 .android .elem.meteorites{ width: 350px; height: 150px; background-position: 0 -410px; margin: 80px 0 0 200px;}
.s0 .android .elem.c1{ width: 17px; height: 17px; background-color: #1cadf0;  border-radius: 17px; margin:-160px 0 0 -390px; z-index: 1;
    -webkit-animation: breath 3s ease-in-out 0.1s  infinite both ;
    -moz-animation: breath 3s  ease-in-out 0.1s infinite both ;
    animation: breath 3s  ease-in-out 0.1s infinite both ;}
.s0 .android .elem.c2{ width: 18px; height: 18px; background-color: #1cadf0;  border-radius: 18px; margin:-200px 0 0 -280px; z-index: 1;
    -webkit-animation: breath 4s ease-in-out .2s  infinite both ;
    -moz-animation: breath 4s  ease-in-out .2s infinite both ;
    animation: breath 4s  ease-in-out .2s infinite both ;}
.s0 .android .elem.c3{ width: 18px; height: 18px; background-color: #1cadf0; border-radius: 18px; margin:-230px 0 0 280px; z-index: 1;
    -webkit-animation: breath 6s ease-in-out .3s  infinite both ;
    -moz-animation: breath 6s  ease-in-out .3s infinite both ;
    animation: breath 6s  ease-in-out .3s infinite both ;}
.s0 .android .elem.c4{ width: 15px; height: 15px; background-color: #1cadf0; border-radius: 15px; margin:0 0 0 390px; z-index: 1;
    -webkit-animation: breath 5s ease-in-out .4s  infinite both ;
    -moz-animation: breath 5s  ease-in-out .4s infinite both ;
    animation: breath 5s  ease-in-out .4s infinite both ;}
.s0 .android .elem.x1{background-image: url(../img/s0_mac.png); background-repeat: no-repeat; width: 34px; height: 35px; background-position: -690px -209px; margin:-280px 0 0 -200px; z-index: 1;
    -webkit-animation: breath 3s ease-in-out .5s  infinite both ;
    -moz-animation: breath 3s  ease-in-out .5s infinite both ;
    animation: breath 3s  ease-in-out .5s infinite both ;}
.s0 .android .elem.x2{background-image: url(../img/s0_mac.png); background-repeat: no-repeat; width: 34px; height: 35px; background-position: -690px -209px; margin:-240px 0 0 160px; z-index: 1;
    -webkit-animation: breath 4s ease-in-out .6s  infinite both ;
    -moz-animation: breath 4s  ease-in-out .6s infinite both ;
    animation: breath 4s  ease-in-out .6s infinite both ;}
.s0 .yqs .elem.x3{ background-image: url(../img/s0_mac.png); background-repeat: no-repeat;width: 26px; height: 26px; background-position: -724px -209px; margin:-100px 0 0 330px; z-index: 1;
    -webkit-animation: breath 3.5s ease-in-out .7s  infinite both ;
    -moz-animation: breath 3.5s  ease-in-out .7s infinite both ;
    animation: breath 3.5s  ease-in-out .7s infinite both ;}
	



.s0 .android .qrcode{ width: 200px; height: 220px; overflow: hidden; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 170px}
.s0 .android .qrcode img{ display: block; width: 180px; height: 180px; overflow: hidden; margin: 0 auto;}
.s0 .android .qrcode .text{ line-height: 40px; text-align: center; color: #a6c8ff; font-size: 14px;}
.s0 .android a.download{ width: 194px; height: 48px; position: absolute; left: 50%; top: 50%; margin: 250px 0 0 -99px; background-position: 0 -592px; }
.s0 .android a.download:hover{ background-position: -196px -592px;}
.s0 .android a.download:active{ background-position: -392px -592px;}
.s0 .android a.download.soon{ background-position: 0 -470px; cursor: default;}
.s0 .android .desc{ width: 300px; overflow: hidden; text-align: center; line-height: 24px; font-size: 14px; font-family: microsoft yahei; color: #1cadf0; position: absolute; left: 50%; top: 50%; margin: 310px 0 0 -150px;}

.s0 .copyright{ width: 100%; height: 24px; line-height: 24px; text-align: center; color: #4fa4ff; font-family: verdana; position: absolute; bottom: 30px; left: 0; font-size: 18px; z-index: 0}

.s1 .elem,.s2 .elem,.s3 .elem,.s4 .elem,.s5 .elem{ background-image: url(../img/page.png); background-repeat: no-repeat;}
.s1 .text,.s2 .text,.s3 .text,.s4 .text,.s5 .text{ background-image: url(../img/text.png); background-repeat: no-repeat; position: absolute; left: 50%; top: 50%;}


@media screen and (max-height:870px)
{
    .s0 .yqs .elem.cup{ width: 380px; height: 191px; background-image: url(../img/5.0.png); background-repeat: no-repeat; margin: -230px 0 0 -180px; z-index: 2}
   .s0 .yqs .desc{ width: 400px;  text-align: center; line-height: 24px; font-size: 14px; font-family: microsoft yahei; color: #1cadf0; position: absolute; left: 47%; top:27%;  margin: -130px 0 0 -150px;}
    .s0 .yqs .sy{ width: 400px;  text-align: center; line-height: 24px; font-size: 14px; font-family: microsoft yahei; color: #1cadf0; position: absolute; left: 47%; top:27%; margin: 305px 0 0 -150px; }
  .s0 .yqs a.download{ width: 194px; height: 48px; position: absolute; left: 50%; top: 45%; margin: 120px 0 0 -99px; background-position: 0 -592px; }
.s0 .mac .elem.tree{ width: 357px; height: 225px; background-image: url(../img/wf.png);  margin: -230px 0 0 -180px; z-index: 1; -webkit-transform-origin: center 100%; -moz-transform-origin: center 100%; transform-origin: center 100%;}
.s0 .mac .elem.display{ width: 500px; height: 160px;  background-image: url(../img/jx.png); margin: 0 0 0 -225px; z-index: 1}
.s0 .mac .desc{ width: 400px; overflow: hidden; text-align: center; line-height: 24px; font-size: 14px; font-family: microsoft yahei; color: #1cadf0; position: absolute; left: 47%; top: 32%; margin: 230px 0 0 -150px;}
.s0 .mac .sy{ width: 400px; overflow: hidden; text-align: center; line-height: 24px; font-size: 14px; font-family: microsoft yahei; color: #1cadf0; position: absolute; left: 47%; top: 27%; margin: 340px 0 0 -150px;}


    .s1 .text {width:810px;height:140px;background-position: -1115px -260px;margin: -250px 0 0 -400px;}
    .s2 .text{ width:1000px;height:180px; background-position: -0px -500px; margin: -250px 0 0 -400px;}
    .s3 .text{width:986px;height:180px; background-position: -0px -1170px; margin: -250px 0 0 -400px;}
    .s4 .text{width:783px;height:180px; background-position: -1115px -670px; margin: -250px 0 0 -400px;}
    .s5 .text{width:820px;height:130px; background-position: -1100px -460px;margin: -250px 0 0 -400px;}
    
    }
  @media screen and (min-height:870px)
{
    .s0 .yqs .elem.cup{ width: 380px; height: 191px; background-image: url(../img/5.0.png); background-repeat: no-repeat; margin: -300px 0 0 -180px; z-index: 2}
    .s0 .yqs .desc{ width: 400px; overflow: hidden; text-align: center; line-height: 24px; font-size: 14px; font-family: microsoft yahei; color: #1cadf0; position: absolute; left: 47%; top: 50%; margin: 230px 0 0 -150px;}
     .s0 .yqs .sy{ width: 400px; overflow: hidden; text-align: center; line-height: 24px; font-size: 14px; font-family: microsoft yahei; color: #1cadf0; position: absolute; left: 47%; top: 53%; margin: 230px 0 0 -150px;}
   .s0 .yqs a.download{ width: 194px; height: 48px; position: absolute; left: 50%; top: 50%; margin: 170px 0 0 -99px; background-position: 0 -592px; }
.s0 .mac .elem.tree{ width: 357px; height: 225px; background-image: url(../img/wf.png);  margin: -300px 0 0 -180px; z-index: 1; -webkit-transform-origin: center 100%; -moz-transform-origin: center 100%; transform-origin: center 100%;}
.s0 .mac .elem.display{ width: 500px; height: 160px;  background-image: url(../img/jx.png); margin: -30px 0 0 -225px; z-index: 1}
.s0 .mac .desc{ width: 400px; overflow: hidden; text-align: center; line-height: 24px; font-size: 14px; font-family: microsoft yahei; color: #1cadf0; position: absolute; left: 47%; top: 50%; margin: 230px 0 0 -150px;}
.s0 .mac .sy{ width: 400px; overflow: hidden; text-align: center; line-height: 24px; font-size: 14px; font-family: microsoft yahei; color: #1cadf0; position: absolute; left: 47%; top: 53%; margin: 230px 0 0 -150px;}

    .s1 .text {width:810px;height:140px;background-position: -1115px -260px;margin: -320px 0 0 -400px;} 
    .s2 .text{ width:1000px;height:180px; background-position: -0px -500px; margin: -350px 0 0 -400px;} 
    .s3 .text{width:986px;height:180px; background-position: -0px -1170px; margin: -320px 0 0 -400px;}
    .s4 .text{width:783px;height:180px; background-position: -1115px -670px; margin: -320px 0 0 -400px;}
    .s5 .text{width:820px;height:130px; background-position: -1100px -460px;margin: -320px 0 0 -400px;}
   
    
}

.s1 .elem.leaves-big{ width: 400px; height: 388px; background-position: 0 0; margin:-100px 0 0 -350px;}
.s1 .elem.leaves-small{width: 230px; height: 220px; background-image: url(../img/bossios.png); margin:50px 0 0 80px; }
.s1 .elem.leaves-smal{ width: 230px; height: 220px; background-image: url(../img/khandroid.png);  margin:50px 0 0 250px; }
.s1  .txt{ width: 230px; height: 220px;   margin:580px 0 0 820px;color: #f8720d; }
.s1  .txtad{ width: 230px; height: 220px;   margin:35% 0 0 64%;color: #f8720d; }



.s2 .elem.circular{ width: 568px; height: 480px; background-position: 0 -388px; margin:-200px 0 0 -300px;
	
}
.s2 .elem.triangle{ width: 66px; height: 67px; background-position: -406px -150px; margin:185px 0 0 -85px;
	-webkit-animation: rotateZ 3s ease-in-out 1s  infinite;
	-moz-animation: rotateZ 3s  ease-in-out 1s infinite;
	animation: rotateZ 3s  ease-in-out 1s infinite;
}
.s2 .elem.square{ width: 73px; height: 84px; background-position: -480px -150px; margin:224px 0 0 110px;
	-webkit-animation: rotateZ 2s ease-in-out 2s  infinite;
	-moz-animation: rotateZ 2s  ease-in-out 2s infinite;
	animation: rotateZ 2s  ease-in-out 2s infinite;
}
.s2 .elem.money{ width: 61px; height: 78px; background-position: -560px -150px; margin:70px 0 0 -158px;
	-webkit-animation: rotateZ 4s ease-in-out 2s  infinite;
	-moz-animation: rotateZ 4s  ease-in-out 2s infinite;
	animation: rotateZ 4s  ease-in-out 2s infinite;
}



.s3 .elem.bulb{ width: 759px; height: 454px; background-position: 0 -865px; margin: -150px 0 0 -400px}
.s3 .elem.light{ width: 141px; height: 179px; opacity:0; background-position: -660px 0px; margin: -20px 0 0 -100px;
	-webkit-animation: breath 2s ease-in-out 1s  infinite;
	-moz-animation: breath 2s  ease-in-out 1s infinite;
	animation: breath 2s  ease-in-out 1s infinite;
}
.s3 .elem.chain{ width: 83px; height: 108px; opacity:0; background-position: -690px -180px; margin: -60px 0 0 -300px;
	-webkit-animation: breath 2s ease-in-out 2s  infinite;
	-moz-animation: breath 2s  ease-in-out 2s infinite;
	animation: breath 2s  ease-in-out 2s infinite;
}
.s3 .elem.chain1{ width: 83px; height: 108px; opacity:0; background-position: -690px -180px; margin: 80px 0 0 150px;
	-webkit-animation: breath 2s ease-in-out 2s  infinite;
	-moz-animation: breath 2s  ease-in-out 2s infinite;

	animation: breath 2s  ease-in-out 2s infinite;
}
.s3 .elem.chain2{ width: 83px; height: 108px; opacity:0; background-position: -550px -10px; margin: -150px 0 0 280px;
	-webkit-animation: breath 2s ease-in-out 2s  infinite;
	-moz-animation: breath 2s  ease-in-out 2s infinite;
	animation: breath 2s  ease-in-out 2s infinite;
}
.s3 .elem.chain3{ width: 83px; height: 108px; opacity:0; background-position: -550px -10px; margin: -120px 0 0 110px;
	-webkit-animation: breath 2s ease-in-out 2s  infinite;
	-moz-animation: breath 2s  ease-in-out 2s infinite;
	animation: breath 2s  ease-in-out 2s infinite;
}
.s3 .elem.chain4{ width: 83px; height: 108px; opacity:0; background-position: -690px -180px; margin: -60px 0 0 160px;
	-webkit-animation: breath 2s ease-in-out 2s  infinite;
	-moz-animation: breath 2s  ease-in-out 2s infinite;
	animation: breath 2s  ease-in-out 2s infinite;
}




.s4 .elem.plane{ width: 134px; height: 174px; background-position: -662px -300px; margin: 50px 0 0 -200px}

.s4 .elem.plane1{ width: 426px; height: 238px; background-position: 0px -1320px; margin: 10px 0 0 -300px}
.s4 .elem.l1{ width: 334px; height: 143px; background-position: -430px -1330px; margin: 98px 0 0 -210px; 
	-webkit-animation: breath 2s ease-in-out 2s  infinite;
	-moz-animation: breath 2s  ease-in-out 2s infinite;
	animation: breath 2s  ease-in-out 2s infinite;
}

.s4 .elem.l2{ width: 189px; height: 387px; background-position: -800px 0px; margin: -110px 0 0 170px; 
	-webkit-animation: breath 2s ease-in-out 1s  infinite;
	-moz-animation: breath 2s  ease-in-out 1s infinite;
	animation: breath 2s  ease-in-out 1s infinite;
}



.s5 .elem.label{ width: 737px; height: 396px; background-position: 0px -1600px; margin: -84px 0 0 -400px;
	
}
.s5 .elem.shadow{ width: 386px; height:374px; background-position: -630px -498px; margin: -80px 0 0 -260px;
	-webkit-animation: go_scale 1s ease-in-out alternate infinite; 
	-moz-animation: go_scale 1s ease-in-out alternate infinite; 
	animation: go_top 1s ease-in-out alternate infinite;
}

@-webkit-keyframes plane_line{
    0%{ opacity: 0 ; -webkit-transform: translateY(-300px) translateX(300px);}
    50%{ opacity: 1 ; -webkit-transform: translateY(0) translateX(0);}
    100%{ opacity: 0 ; -webkit-transform: translateY(300px) translateX(-300px);}
}
@-moz-keyframes plane_line{
    0%{ opacity: 0 ; -moz-transform: translateY(-300px) translateX(300px);}
    50%{ opacity: 1 ; -moz-transform: translateY(0) translateX(0);}
    100%{ opacity: 0 ; -moz-transform: translateY(300px) translateX(-300px);}
}
@keyframes plane_line{
    0%{ opacity: 0 ; transform: translateY(-300px) translateX(300px);}
    50%{ opacity: 1 ; transform: translateY(0) translateX(0);}
    100%{ opacity: 0 ; transform: translateY(300px) translateX(-300px);}
}

@-webkit-keyframes go_top{
    0%{ -webkit-transform: translateY(0px);}
    100%{ -webkit-transform: translateY(-30px);}
}
@-moz-keyframes go_top{
    0%{ -moz-transform: translateY(0);}
    100%{ -moz-transform: translateY(-30px);}
}
@keyframes go_top{
    0%{ transform: translateY(0);}
    100%{ transform: translateY(-30px);}
}

@-webkit-keyframes go_scale{
    0%{ -webkit-transform: scale(1);}
    100%{ -webkit-transform: scale(.8);}
}
@-moz-keyframes go_scale{
    0%{ -moz-transform: scale(1);}
    100%{ -moz-transform: scale(.8);}
}
@keyframes go_scale{
    0%{ transform: scale(1);}
    100%{ transform: scale(.8);}
}

@-webkit-keyframes breath{
    0%{ opacity:0 }
    40%{ opacity:1 }
    100%{ opacity: 0}
}
@-moz-keyframes breath{
    0%{ opacity:0 }
    40%{ opacity:1 }
    100%{ opacity: 0}
}
@keyframes breath{
    0%{ opacity:0 }
    40%{ opacity:1 }
    100%{ opacity: 0}
}

@-webkit-keyframes rotateZ{
    0%{ -webkit-transform: rotateZ(0); }
    30%{ -webkit-transform: rotateZ(360deg); }
    100%{ -webkit-transform: rotateZ(360deg); }
}
@-moz-keyframes rotateZ{
    0%{ -moz-transform: rotateZ(0); }
    30%{ -moz-transform: rotateZ(360deg); }
    100%{ -moz-transform: rotateZ(360deg); }
}
@keyframes rotateZ{
    0%{ transform: rotateZ(0); }
    30%{ transform: rotateZ(360deg); }
    100%{ transform: rotateZ(360deg); }
}

@-webkit-keyframes drop{
	0%{ -webkit-transform: rotateZ(-10deg) translateX(0) translateY(-250px); opacity: 0 }
    30%{ -webkit-transform: rotateZ(10deg) translateX(150px) translateY(-50px); opacity: 1 }
    60% { -webkit-transform: rotateZ(30deg) translateX(300px) translateY(150px); opacity: 0}
    100% { -webkit-transform: rotateZ(30deg) translateX(300px) translateY(150px); opacity: 0}
}
@-moz-keyframes drop{
	0%{ -moz-transform: rotateZ(-10deg) translateX(0) translateY(-250px); opacity: 0 }
    30%{ -moz-transform: rotateZ(10deg) translateX(150px) translateY(-50px); opacity: 1 }
    60% { -moz-transform: rotateZ(30deg) translateX(300px) translateY(150px); opacity: 0}
    100% { -moz-transform: rotateZ(30deg) translateX(300px) translateY(150px); opacity: 0}
}
@keyframes drop{
	0%{ transform: rotateZ(-10deg) translateX(0) translateY(-250px); opacity: 0 }
    30%{ transform: rotateZ(10deg) translateX(150px) translateY(-50px); opacity: 1 }
    60% { transform: rotateZ(30deg) translateX(300px) translateY(150px); opacity: 0}
    100% { transform: rotateZ(30deg) translateX(300px) translateY(150px); opacity: 0}
}

@media screen and (max-height: 800px) {
    .s0 .yqs a.download{ margin: 225px 0 0 -99px;}
    .s0 .mac a.download{ margin: 225px 0 0 -99px;}
    .s0 .ios a.download{ margin: 225px 0 0 -97px;}
    .s0 .android a.download{ margin: 225px 0 0 -99px;}
    .s0 .copyright{ bottom: 0;}
    .s0 .yqs .desc{ height: 24px; overflow: hidden; margin: 280px 0 0 -150px}
    .s0 .mac .desc{ height: 24px; overflow: hidden; margin: 280px 0 0 -150px}
    .s0 .ios .desc{ height: 24px; overflow: hidden; margin: 280px 0 0 -150px}
    .s0 .android .desc{ height: 24px; overflow: hidden; margin: 280px 0 0 -150px}
}