/* CSS Document */ @font-face { /* font-properties */ font-family: "MyNewFont"; src:url('font.otf'), url('font.otf') } body{-webkit-text-size-adjust:none; background:#000; width: 100%; height: 100%;} *{-webkit-text-size-adjust:none; font-size:12px; font-family:"微软雅黑"; margin:0; padding:0; outline:none;} *, *::before, *::after { box-sizing: border-box;} input,textarea,select{ font-size:100%;}ul{ list-style:none;} a{ display:inline-block; border: medium none;display: inline-block;outline: medium none;text-decoration: none;-webkit-tap-highlight-color: rgba(0,0,0,0);} img{vertical-align:top; border:none;pointer-events: none;} .box{width:100%; height:100%; overflow: hidden;position:relative;} .rel{ position:relative;} .abs{position:absolute; } .page{ position:absolute; width:100%; height:100%; top:0; left:0; z-index:3; display: none;} .main{ position:absolute; width:100%; height:1137px;top: 0; left: 0;} #canvas3d { border: none; /*cursor: move;*/ background-color: #EEEEEE; } .left_display { position: absolute; top:5px; left:5px; width: 200px; height: 60px; z-index:10000000; background: black; opacity: 0.5; font-size: 12px; color:white; display: none; } .hidden{ visibility: hidden;} .loading{ background:url(../images/planet_bg.jpg) no-repeat 0 0; width: 100%; height: 1137px;} .loading .loadTxt{ position: absolute; font-size: 30px; top: 400px; left: 0; width: 100%; text-align: center; color: #fff;} .startLayer{ width: 100%; top: 0; left: 0; overflow: hidden; display: none; z-index: 99;} .startLayer img{ width: 100%;} .startBg{ width: 100%; height: 3212px; left: 0; top: 0;} .light_ball{ width: 31.7%; bottom: 156px; left: 35.5%;-webkit-animation: lightBall 2s ease-in-out infinite alternate; animation: lightBall 2s ease-in-out infinite alternate;background:url(../images/planet_bg.jpg) no-repeat -9999px -9999px;} .light_bounce{-webkit-animation:bounceInball .5s 0s ease both;animation:bounceInball .5s 0s ease both;} .rocket_layer{ width: 100%; top: 250px; left: 0; opacity:0;transition: all 0.5s ease-out 0.2s;-webkit-transition: all 0.5s ease-out 0.2s; display: none;} .star_layer{ width: 100%; bottom: 250px; left: 0; } .light_rocket{ top: 0; left: 29.1%;} .rocket{ top: 109px; left: 43.2%;} .rocketscale{animation: rocketscale .06s linear infinite;-webkit-animation: rocketscale .06s linear infinite alternate;} .bg_run{-webkit-animation: startRun 8s ease-in-out both; animation: startRun 8s ease-in-out both;font-family: "MyNewFont";} .btn_lock{ width: 8%; top: 90px; right: 10px; z-index: 99;} .btn_lock img{ width: 100%;} .btn_lock img:nth-child(2){ display: none;} .btn_lock img:nth-child(1){ display: block;} .lock_stop img:nth-child(2){ display: block;} .lock_stop img:nth-child(1){ display: none;} .btn_pause{ position:fixed; width:8%; top:20px; right:10px; z-index:99;} .btn_play{ -webkit-transform-origin:center center;transform-origin:center center;animation:2s linear 0s normal none infinite runAround; -webkit-animation:2s linear 0s normal none infinite runAround;} .btn_pause img{ width:100%;} .img_pause{ position:absolute; top:0; left:0; opacity: 0;} .btn_play .img_pause{ opacity: 1;} .ball span{ position: absolute; width: 100%; height: 100%; left:0; top: 0;} .ball1{ width: 210px; height: 210px;/*background: url("../images/ball1_bg1.png") no-repeat;animation: step 0.6s steps(10) both infinite;-webkit-animation: step 0.6s steps(10) both infinite;*/} .ball2{ width:90px; height: 90px; } .ball3{ width:90px; height: 90px; } .ball4{ width:90px; height: 90px; } .ball5{ position: fixed; width:97px; height: 97px; display: none ; bottom: 10px; right: 10px; z-index: 99;} .ball1 span{ background: url("../images/ball1.png") no-repeat 0 0 / contain;-webkit-animation:wording 4s 0s infinite ease-in-out both;animation:wording 4s 0s infinite ease-in-out both;} .ball2 span{ background: url("../images/ball2.png") no-repeat 0 0 / contain;-webkit-animation:wording 4s 2.3s infinite ease-in-out both;animation:wording 4s 2.3s infinite ease-in-out both;} .ball3 span{ background: url("../images/ball3.png") no-repeat 0 0 / contain;-webkit-animation:wording 4s 3.7s infinite ease-in-out both;animation:wording 4s 3.7s infinite ease-in-out both;} .ball4 span{ background: url("../images/ball4.png") no-repeat 0 0 / contain;-webkit-animation:wording 4s 3.3s infinite ease-in-out both;animation:wording 4s 3.3s infinite ease-in-out both;} .ball_bounce span{-webkit-animation:bounceInball .5s 0s ease both;animation:bounceInball .5s 0s ease both;} .canvas3dLayer{ width: 100%; height: 100%; top: 0; left: 0;} .infoLayer{ display: none; position: absolute; width: 640px; top: 0; left: 0; background: #000; z-index: 99;} .infoLayer img,.ball5 img{ width: 100%;} .infoLayer .layer_bg { background: url(../images/space_star.png) no-repeat 0 0 / cover;position: absolute;width: 100%;height: 100%;top: 0;left: 0;} .layer_bg_ani{-webkit-animation: space_star_anim linear 3s infinite both; animation: space_star_anim linear 3s infinite both; } .layer_bg_ani2{-webkit-animation: space_star_anim linear 3s 1.5s infinite both; animation: space_star_anim linear 3s 1.5s infinite both;} .planet_box{ position: absolute; width: 100%; height: 100%; top: -70px; left: 0; display: none;} .layer_planet{ position: absolute; width: 100%; top: 0; left:0;-webkit-animation: loadingTit 2s ease-in-out infinite alternate; animation: loadingTit 2s ease-in-out infinite alternate;} .planet_ball{position: absolute; width: 100%; top: 0; left:0;-webkit-animation: planetShake 3s ease-in-out infinite alternate; animation: planetShake 3s ease-in-out infinite alternate;} .layer_planetIn{-webkit-animation: planetIn .5s ease-in-out both; animation: planetIn .5s ease-in-out both;} .planet_item{ position:absolute; } .planet_1{ top:204px; left:112px;width: 435px; height: 488px; background: url("../images/ball1_bg.png") no-repeat;animation: step1 8s steps(40) both infinite;-webkit-animation: step1 8s steps(40) both infinite;} .planet_2{ top:187px; left:114px;width: 438px; height: 505px; background: url("../images/ball2_bg.png") no-repeat;animation: step2 6s steps(15) both infinite;-webkit-animation: step2 6s steps(15) both infinite;} .planet_3{ top:187px; left:112px;width: 435px; height: 500px; background: url("../images/ball3_bg.png") no-repeat;animation: step3 12s steps(20) both infinite;-webkit-animation: step3 12s steps(20) both infinite;} .planet_4{ top:265px; left:109px;width: 441px; height: 425px; background: url("../images/ball4_bg.png") no-repeat;animation: step4 10s steps(25) both infinite;-webkit-animation: step4 10s steps(25) both infinite;} .planet_circle{ position: absolute; width: 735px; top: 392px; left: -58px;} .planet_btn_box{ position:fixed; width: 100%; top: 0; left: 0;} .planet_btn_box strong{ position: absolute; width: 7.7%; top: 473px; left: 45px;} .layer_1 .planet_btn_box strong:nth-child(1){animation: lightShow 2.5s 0.1s infinite linear;-webkit-animation: lightShow 2.5s 0.1s infinite linear;} .layer_1 .planet_btn_box strong:nth-child(2){ top:626px; left: 64px;animation: lightShow 2.5s 1.1s infinite linear;-webkit-animation: lightShow 2.5s 1.1s infinite linear;} .layer_1 .planet_btn_box strong:nth-child(3){ top:690px; left: 297px;animation: lightShow 2.5s 2.1s infinite linear;-webkit-animation: lightShow 2.5s 2.1s infinite linear;} .layer_2 .planet_btn_box strong:nth-child(1){ top:626px; left: 64px;animation: lightShow 2.5s 0.1s infinite linear;-webkit-animation: lightShow 2.5s 0.1s infinite linear;} .layer_2 .planet_btn_box strong:nth-child(3){ top:690px; left: 297px;} .layer_3 .planet_btn_box strong:nth-child(1){ top:626px; left: 64px;animation: lightShow 2.5s 0.1s infinite linear;-webkit-animation: lightShow 2.5s 0.1s infinite linear;} .layer_3 .planet_btn_box strong:nth-child(3){ top:690px; left: 297px;} .layer_4 .planet_btn_box strong:nth-child(1){ top:626px; left: 64px;animation: lightShow 2.5s 0.1s infinite linear;-webkit-animation: lightShow 2.5s 0.1s infinite linear;} .layer_4 .planet_btn_box strong:nth-child(2){ top:690px; left: 297px;} .hit_hand{ width:61px;top:721px; left:23.3%;animation: point 1.5s infinite linear;-webkit-animation: point 1.5s infinite linear;} .planet_name{ font-size: 29px; color: #fff; width: 100%; left: 0; top: 870px; text-align: center;} .layer_btn{ width: 54%; position: fixed; bottom: 20px; left: 0; right: 0; margin: auto;} .layer_btn span{ position:absolute; top:0;width: 20%; height: 100%;} .layer_btn_left{ left: 0;} .layer_btn .layer_btn_close{ left:41.3%; width: 60px; height: 60px;background: url(../images/btn_closeball.png) no-repeat 0 0 / cover; visibility: hidden;} .layer_btn_right{ right: 0;} .layer_btn_other{ visibility: hidden;} .planet_right_out{-webkit-animation: layerplane_r_out .8s ease-in-out forwards;animation: layerplane_r_out .8s ease-in-out forwards;} .planet_right_in{-webkit-animation: layerplane_r_in .8s ease-in-out forwards;animation: layerplane_r_in .8s ease-in-out forwards;} .planet_left_out{-webkit-animation: layerplane_l_out .8s ease-in-out forwards; animation: layerplane_l_out .8s ease-in-out forwards;} .planet_left_in{-webkit-animation: layerplane_l_in .8s ease-in-out forwards;animation: layerplane_l_in .8s ease-in-out forwards;} .introduceLayer{ position: fixed; width: 100%; top: 0; left: 0; background: rgba(0,0,0,.5);z-index: 99; display: none;} .introduceLayer img{ width: 100%;} .introduceCon{ width: 566px; height: 523px; background: #fff; left: 5.8%; top: 16.7%;} .introducClose{ width: 80px; top: 2px; right: 0; background: #fff;} .introduceLayerShow{-webkit-animation: planetIn .8s cubic-bezier(0.52, 0.01, 0.38, 1.32) forwards; animation: planetIn .8s cubic-bezier(0.52, 0.01, 0.38, 1.32) forwards;} .introduceInner{ padding: 28px 0 0 28px; width:538px ; height: 492px; overflow: hidden;} .introduceLogo{ width: 132px; display: block;} .introduceTop{ padding: 15px 0 0 0; min-height: 100px;} .introduceText{ font-size: 28px; color: #3eb134;} .introduceText strong{ font-size: 31px; display: block; font-weight: normal; padding: 0 0 15px 0;} .introduceText span{ font-size: 20px; display: block;} .introduceBottom{ width: 510px; height: 285px; overflow: hidden;} .introduceBottom video{ width: 100%; height: 100%;} .introduceScroll{ width: 510px; overflow: hidden ; position: relative; display: none;} .introduceScroll .slick-slider{ margin: 20px 0 0 0;} .introduceScroll .slick-prev,.introduceScroll .slick-next{width:15px; height:120px; top:130px; text-indent:-9999px; background:url(../images/arrow_left.png) no-repeat 0 0 / 100% auto;} .introduceScroll .slick-prev{ left:5px;} .introduceScroll .slick-next{ background:url(../images/arrow_right.png) no-repeat 0 0 / 100% auto; right:5px;} .nameText{ float: left; height: 56px; width: 315px; font-size: 30px; color: #3eb134; padding: 0 10px;} .btn_putname{ float: right; width: 110px; height: 56px; background: #2a7b23; border-radius: 5px; font-size: 30px; text-align: center; line-height: 56px; color: #fff; margin: 0 9px 0 0;} .cardLayer{ position: fixed; width: 100%; height: 100%; display: none; top: 0; left: 0; z-index: 99; background: rgba(0,0,0,.5);} .cardLayer .card{ display: none; position:absolute; width: 120%; left: 0; top: 0;-webkit-transform:rotate(90deg); transform:rotate(90deg); border-radius: 15px; overflow: hidden;} .cardLayer .cardName{ top: 647px;top: 368px; top: 454px; left: 110px; left: 115px; color: #fff; font-size: 30px; line-height:44px;/*font-family: "MyNewFont"; */} .cardLayer .card1 .cardName{top: 648px; top: 368px; left: 343px; top: 452px; left: 356px;} .cardLayer .card2 .cardName{ top: 653px; top: 373px; top: 456px;} .cardLayer .card3 .cardName{top: 652px; top: 372px; top: 455px;} .hint_save,.hint_save1{ color: #fff; left: 30px; top: 745px; font-size: 24px; top: 465px; top: 565px;} .hint_save1{ top: 295px; top: 15px;} .cardLayer img,.qrCode img{ width: 100%;} .qrCode{ width: 116px; top: 780px; left: 449px; display: none;} .nameHint{ color: #f26213; bottom:2px; left:30px; font-size: 24px; display: none;} .showHiht{-webkit-animation: hintShow 2s linear both;animation: hintShow 2s linear both;} .endBox{ width: 100%;} .endBox img{ width: 100%;} .hit_handstart{ /*width: 11.7%;*/ bottom: 120px; top: auto; left: 53%;} .hintLayer{ position: fixed; width: 100%; height: 100%; top: 0; left: 0;background: rgba(0,0,0,.5); z-index: 99; color: #fff;} .rocket_show{ opacity: 1; display: block;} .fire_light,.firefly_1,.fly_line{ width: 46.4%; left: 33.7%; top: 0;} .fire_light{ width: 100%; left: 0;} .fire2_light{ width: 100%; left: 0; left: 0;} .rocket_show .fire_light{animation: lightShow 1.5s infinite linear;-webkit-animation: lightShow 1.5s infinite linear;} .rocket_show .fire2_light{animation: lightShow 1.5s infinite linear;-webkit-animation: lightShow 1.5s infinite linear;} .firefly_2{ left: 136px; top: 115px; width: 199px;} .fly_line{ width: 297px; height: 339px; top: 70px; overflow: hidden;} .fly_line strong{width: 297px;overflow: hidden; position: absolute;right: 0; bottom: 0; } .fly_line img{ width: 297px; height:339px;position: absolute; bottom: 0; right: 0;} .rocket_show .firefly_1{-webkit-animation: fireFly 3.6s linear both;animation: fireFly 3.6s linear both;} .rocket_show .fly_line strong{-webkit-animation: lineShow 7s linear both;animation: lineShow 7s linear both;} .card_con{ width: 450px; height: 290px; margin: 5px auto 0 auto;} .card_con li{ width: 220px; float: left; padding: 0 0 2px 2px; position: relative;} .selectCard{ overflow: visible;} .selectCard .introduceTop{ min-height: auto;} .selectCard .introduceText{ width: 450px; font-size: 28px;margin:5px auto;} .selectCard .introduceBottom{ overflow:visible; height: 385px;} .selectCard .introduceBottom p{ width: 450px; margin: 0 auto;} .selected{ position: absolute; display: none; bottom: 0; right: 0; width: 50px; height: 50px;background: url(../images/ico_select.png) no-repeat 0 0 / cover;} .cardSelect .selected{ display: block;} .hintLayer span{ position:absolute;top:265px; left:250px;width: 137px; height: 168px; background: url("../images/hint_mobile.png") no-repeat;animation: step5 2s steps(4) both infinite;-webkit-animation: step5 2s steps(4) both infinite;} .hintLayer strong{position:absolute;top:465px; left:0; width: 100%; text-align: center; font-size: 36px; color: #fff;} .talk_title{ font-size: 27px; width: 100%; text-align: center; top: 12px; color: #000;} .talk_name{ font-size: 24px; top: 82px; left: 230px; color: #3eb134; font-weight: bold;} .talk_hospital{ font-size: 21px; left: 230px; top: 121px; width: 240px;} .fireFly{ width: 100%; height: 100%; top: 0; left: 0;} .fireFly span{ position: absolute; width: 199px;} .fireFly span img{ width: 100%;} .fireFly span:nth-child(1){ top: 181px; left: 21px;-webkit-animation: fireFly 3.6s linear both;animation: fireFly 3.6s linear both;} .fireFly span:nth-child(2){ top: 96px; left: 421px;-webkit-animation: fireFly 3.6s 0.3s linear both;animation: fireFly 3.6s 0.3s linear both;} .fireFly span:nth-child(3){ top: 368px; left: 218px;animation: lightShow 2.5s 0.1s infinite linear;-webkit-animation: lightShow 2s 0.1s infinite linear;} .fireFly span:nth-child(4){ top: 215px; left: 256px;-webkit-animation: fireFly 3.6s 0.7s linear both;animation: fireFly 3.6s 0.7s linear both;} .fireFly span:nth-child(5){ top: 379px; left: 493px;animation: lightShow 3s 0.4s infinite linear;-webkit-animation: lightShow 3s 0.4s infinite linear;} .fire_light1{ width: 153px; top: 318px; left: -50px;animation: lightShow 2s 0.1s infinite linear;-webkit-animation: lightShow 2s 0.2s infinite linear;} .fire_light2{ width: 117px; top: -27px; left: 117px;animation: lightShow 2s 3.4s infinite linear;-webkit-animation: lightShow 2s 3.4s infinite linear;} .fire_light3{ width: 163px; top: 273px; left: 176px;animation: lightShow 2s 2.4s infinite linear;-webkit-animation: lightShow 2s 2.4s infinite linear;} .fire_light4{ width: 163px; top: 392px; left: 251px;animation: lightShow 2s 1.4s infinite linear;-webkit-animation: lightShow 2s 1.4s infinite linear;} .fire_light5{ width: 163px; top: 201px; left: 347px;animation: lightShow 2s 0.7s infinite linear;-webkit-animation: lightShow 2s 0.7s infinite linear;} .fire_light6{ width: 163px; top: 27px; left: 394px;animation: lightShow 2s 3.1s infinite linear;-webkit-animation: lightShow 2s 3.1s infinite linear;} .fire_light7{ width: 163px; top: 175px; left: 527px;animation: lightShow 2s 0.4s infinite linear;-webkit-animation: lightShow 2s 0.4s infinite linear;} .fire_light8{ width: 117px; top: 268px; left: 568px;animation: lightShow 2s 1.7s infinite linear;-webkit-animation: lightShow 2s 1.7s infinite linear;} .fire_light9{ width: 163px; top: -262px; left: 394px;animation: lightShow 2s 0.7s infinite linear;-webkit-animation: lightShow 2s 0.7s infinite linear;} .fire_light10{ width: 163px; top: -200px; left: 24px;animation: lightShow 2s 3.1s infinite linear;-webkit-animation: lightShow 2s 3.1s infinite linear;} .fire_light11{ width: 163px; top: 500px; left: 327px;animation: lightShow 2s 0.4s infinite linear;-webkit-animation: lightShow 2s 0.4s infinite linear;} .fire_light12{ width: 117px; top: 658px; left: 68px;animation: lightShow 2s 1.7s infinite linear;-webkit-animation: lightShow 2s 1.7s infinite linear;} .star1{ width: 36px; /*top: 213px; */bottom: 724px; left: 141px;animation: lightShow 2s 0.1s infinite linear;-webkit-animation: lightShow 2s 0.2s infinite linear;} .star2{ width: 40px;/* top: 162px;*/bottom: 674px; left: 278px;animation: lightShow 2s 1.1s infinite linear;-webkit-animation: lightShow 2s 1.1s infinite linear;} .star3{ width: 43px; /*top: 347px;*/ bottom: 524px;left: 287px;animation: lightShow 2s 2.4s infinite linear;-webkit-animation: lightShow 2s 2.4s infinite linear;} .star4{ width: 52px; /*top: 71px;*/bottom: 624px; left: 408px;animation: lightShow 2s 1.4s infinite linear;-webkit-animation: lightShow 2s 1.4s infinite linear;} .star5{ width: 60px;/* top: 433px; */bottom: 824px;left: 458px;animation: lightShow 2s 0.7s infinite linear;-webkit-animation: lightShow 2s 0.7s infinite linear;} .mapCon{ width: 310px; /*height: 285px;*/} #map{ width: 310px; /*height: 285px;*/} .smallpeo{ float: left; width: 186px; height: 323px;background: url("../images/smallpeo_bg.png") no-repeat;animation: step6 1.5s steps(3) both infinite;-webkit-animation: step6 1.5s steps(3) both infinite;} .overflowShow{ height: 360px;} .overflowAuto{ overflow: auto;} .scrollDNA{position: absolute; top: 0; right: 0; width: 310px; z-index: 99;} .scrollDNA span{ display: block; color: #3eb134; font-size: 24px; text-align: justify;} .scrollDNA .DNAtext1{ font-size: 21px; line-height: 27px;} .scrollDNA .DNAtext2{ margin-top: 10px;} .scrollDNA .DNAtext3{ margin-top: 80px;} .scrollDNA .DNAtext3 strong{ display: block; text-align: justify; font-size: 24px; padding: 0 0 20px 30px; font-weight:normal;background: url("../images/ico_list.png") no-repeat 0 5px;} .scrollDNA .DNAImg{ width:300px;} .introduceScrollItem1,.introduceScrollItem2{ overflow: auto; height: 285px; margin: 20px 0 0 0; position: relative;} .arrow_up{ position: fixed; width: 40px; bottom: 33px; left: 50%; margin-left: -20px;animation:1.5s ease-in-out 0s normal none infinite start; -webkit-animation:1.5s ease-in-out 0s normal none infinite start;} .right_number {bottom: 250px; right:-88px;transform: rotate(-90deg); -webkit-transform: rotate(-90deg);font-size:18px;color:#fff; z-index: 99;} @-webkit-keyframes showInDown { 0%{-webkit-transform: translate3d(0,50px,0);} 100% {-webkit-transform: translate3d(0,0,0);} } @keyframes showInDown { 0%{transform: translate3d(0,50px,0);} 100% {transform: translate3d(0,0,0);} } @-webkit-keyframes circleIn { 0% {opacity: 0; -webkit-transform: scale3d(0, 0, 0);} 50% {opacity: 1;} 100% {opacity: 0; -webkit-transform: scale3d(1, 1, 1);} } @keyframes circleIn { 0% {opacity: 0; transform: scale3d(0, 0, 0);} 50% {opacity: 1;} 100% {opacity: 0;transform: scale3d(1, 1, 1);} } @-webkit-keyframes layerplane_r_out{ from { transform: translate(0,0); -webkit-transform: translate(0,0); } to { transform: translate(100vw,-100vh); -webkit-transform: translate(100vw,-100vh); } } @keyframes layerplane_r_out{ from { transform: translate(0,0); -webkit-transform: translate(0,0); } to { transform: translate(100vw,-100vh); -webkit-transform: translate(100vw,-100vh); } } @-webkit-keyframes layerplane_r_in{ from { transform: translate(-100vw,100vh); -webkit-transform: translate(-100vw,100vh); } to { transform: translate(0,0); -webkit-transform: translate(0,0); } } @keyframes layerplane_r_in{ from { transform: translate(-100vw,100vh); -webkit-transform: translate(-100vw,100vh); } to { transform: translate(0,0); -webkit-transform: translate(0,0); } } @-webkit-keyframes layerplane_l_in{ from { transform: translate(100vw,-100vh); -webkit-transform: translate(100vw,-100vh); } to { transform: translate(0,0); -webkit-transform: translate(0,0); } } @keyframes layerplane_l_in{ from { transform: translate(100vw,-100vh); -webkit-transform: translate(100vw,-100vh); } to { transform: translate(0,0); -webkit-transform: translate(0,0); } } @-webkit-keyframes layerplane_l_out{ from { transform: translate(0,0); -webkit-transform: translate(0,0); } to { transform: translate(-100vw,100vh); -webkit-transform: translate(-100vw,100vh); } } @keyframes layerplane_l_out{ from { transform: translate(0,0); -webkit-transform: translate(0,0); } to { transform: translate(-100vw,100vh); -webkit-transform: translate(-100vw,100vh); } } @-webkit-keyframes loadingTit { from { transform: translatey(0) rotate(-3deg); -webkit-transform: translatey(0) rotate(-3deg); } to { transform: translatey(-15px) rotate(3deg); -webkit-transform: translatey(-15px) rotate(3deg); } } @keyframes loadingTit { from { transform: translatey(0); -webkit-transform: translatey(0); } to { transform: translatey(-15px); -webkit-transform: translatey(-15px); } } @-webkit-keyframes loadingTit { from { transform: translatey(0); -webkit-transform: translatey(0); } to { transform: translatey(-15px); -webkit-transform: translatey(-15px); } } @keyframes planetShake { from { transform:rotate(-3deg); -webkit-transform:rotate(-3deg); } to { transform:rotate(3deg); -webkit-transform:rotate(3deg); } } @-webkit-keyframes planetShake { from { transform:rotate(-3deg); -webkit-transform:rotate(-3deg); } to { transform:rotate(3deg); -webkit-transform:rotate(3deg); } } @-webkit-keyframes space_star_anim { 0% { opacity: 0; -webkit-transform: scale3d(0.8, 0.8, 0.8); transform: scale3d(0.8, 0.8, 1); } 33.3% { opacity: 1; -webkit-transform: scale3d(1.2, 1.2, 1.2); transform: scale3d(1.2, 1.2, 1); } 66.6% { opacity: 1; -webkit-transform: scale3d(1.6, 1.6, 1.6); transform: scale3d(1.6, 1.6, 1); } 100% { opacity: 0; -webkit-transform: scale3d(2, 2, 2); transform: scale3d(2, 2, 45); } } @keyframes space_star_anim { 0% { opacity: 0; -webkit-transform: scale3d(0.8, 0.8, 0.8); transform: scale3d(0.8, 0.8, 1); } 33.3% { opacity: 1; -webkit-transform: scale3d(1.2, 1.2, 1.2); transform: scale3d(1.2, 1.2, 1); } 66.6% { opacity: 1; -webkit-transform: scale3d(1.6, 1.6, 1.6); transform: scale3d(1.6, 1.6, 1); } 100% { opacity: 0; -webkit-transform: scale3d(2, 2, 2); transform: scale3d(2, 2, 45); } } @-webkit-keyframes planetIn { from { transform:scale(0,0); -webkit-transform:scale(0,0); } to { transform:scalse(1,1); -webkit-transform:scalse(1,1); } } @keyframes planetIn { from { transform:scale(0,0); -webkit-transform:scale(0,0); } to { transform:scalse(1,1); -webkit-transform:scalse(1,1); } } @keyframes step1 { 0% {background-position: 0 0;} 100% {background-position: -17400px 0;} } @-webkit-keyframes step1 { 0% {background-position: 0 0;} 100% {background-position: -17400px 0;} } @keyframes step2 { 0% {background-position: 0 0;} 100% {background-position: -6570px 0;} } @-webkit-keyframes step2 { 0% {background-position: 0 0;} 100% {background-position: -6570px 0;} } @keyframes step3 { 0% {background-position: 0 0;} 100% {background-position: -8700px 0;} } @-webkit-keyframes step3 { 0% {background-position: 0 0;} 100% {background-position: -8700px 0;} } @keyframes step4 { 0% {background-position: 0 0;} 100% {background-position: -11025px 0;} } @-webkit-keyframes step4 { 0% {background-position: 0 0;} 100% {background-position: -11025px 0;} } @keyframes step5 { 0% {background-position: 0 0;} 100% {background-position: -548px 0;} } @-webkit-keyframes step5 { 0% {background-position: 0 0;} 100% {background-position: -548px 0;} } @keyframes step6 { 0% {background-position: 0 0;} 100% {background-position: -558px 0;} } @-webkit-keyframes step6 { 0% {background-position: 0 0;} 100% {background-position: -558px 0;} } @keyframes wording { 0%,100% {transform:translate3d(0,-15px,0)} 50% {transform:translate3d(0,0,0)} } @-webkit-keyframes wording { 0%,100% {-webkit-transform:translate3d(0,-15px,0)} 50% {-webkit-transform:translate3d(0,0,0)} } @keyframes bounceInball { 20%,40%,60%,80%,from,to { animation-timing-function:cubic-bezier(.215,.61,.355,1) } 0% { opacity:1; transform:scale3d(.9,.9,.9) } 60% { opacity:1; transform:scale3d(1.03,1.03,1.03) } 80% { transform:scale3d(.97,.97,.97) } to { opacity:1; transform:scale3d(1,1,1) } } @-webkit-keyframes bounceInball { 20%,40%,60%,80%,from,to { animation-timing-function:cubic-bezier(.215,.61,.355,1) } 0% { opacity:1; -webkit-transform:scale3d(.9,.9,.9) } 60% { opacity:1; -webkit-transform:scale3d(1.03,1.03,1.03) } 80% { -webkit-transform:scale3d(.97,.97,.97) } to { opacity:1; -webkit-transform:scale3d(1,1,1) } } @keyframes bounceInball_qlip { 20%,40%,60%,80%,from,to { animation-timing-function:cubic-bezier(.215,.61,.355,1) } 0% { opacity:1; transform:scale3d(.9,.9,.9); -webkit-transform:rotate(180deg); transform:rotate(180deg) } 60% { opacity:1; transform:scale3d(1.03,1.03,1.03); -webkit-transform:rotate(180deg); transform:rotate(180deg) } 80% { transform:scale3d(.97,.97,.97); -webkit-transform:rotate(180deg); transform:rotate(180deg) } to { opacity:1; transform:scale3d(1,1,1); -webkit-transform:rotate(180deg); transform:rotate(180deg) } } @-webkit-keyframes lightBall { from { opacity: 0.9; transform:scale(0.8,0.8); -webkit-transform:scale(0.8,0.8); } to { opacity: 1; transform:scalse(1,1); -webkit-transform:scalse(1,1); } } @keyframes lightBall { from { opacity: 0.9; transform:scale(0.8,0.8); -webkit-transform:scale(0.8,0.8); } to { opacity: 1; transform:scalse(1,1); -webkit-transform:scalse(1,1); } } @-webkit-keyframes startRun { 100% { transform: translatey(0); -webkit-transform: translatey(0); } } @keyframes startRun { 100% { transform: translatey(0); -webkit-transform: translatey(0); } } @keyframes rocketscale{ 0%{ transform: scale(1,0.9); -webkit-transform: scale(1,0.9); } 100%{ transform: scale(1.05,1.1); -webkit-transform: scale(1.05,1.1); } } @-webkit-keyframes rocketscale{ 0%{ transform: scale(1,0.9); -webkit-transform: scale(1,0.9); } 100%{ transform: scale(1.05,1.1); -webkit-transform: scale(1.05,1.1); } } @-webkit-keyframes runAround { from{-webkit-transform:rotate(0deg)} to{-webkit-transform:rotate(360deg)} } @keyframes runAround { from{transform:rotate(0deg)} to{transform:rotate(360deg)} } @keyframes point { 0% {transform: translate(-10px,-10px);} 70% {transform: translate(0,0);} 100% {transform: translate(-10px,-10px);} } @-webkit-keyframes point { 0% {-webkit-transform: translate(-10px,-10px);} 70% {-webkit-transform: translate(0,0);} 100% {-webkit-transform: translate(-10px,-10px);} } @keyframes hintShow { 0% { opacity: 0;} 33% {opacity:1;} 66% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes hintShow { 0% { opacity: 0;} 33% {opacity:1;} 66% {opacity:0;} 100% {opacity:1;} } @keyframes lightShow { 0% { opacity: 1;} 50% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes lightShow { 0% { opacity: 1;} 50% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes fireFly{ 0% { transform: translate(163px,304px); -webkit-transform: translate(163px,304px); } 30% { transform: translate(131px,185px); -webkit-transform: translate(131px,185px); } 60% { transform: translate(34px,128px); -webkit-transform: translate(34px,128px); } 80% { transform: translate(12px,53px); -webkit-transform: translate(12px,53px); } 100% { transform: translate(0,0); -webkit-transform: translate(0,0); } } @keyframes fireFly{ 0% { transform: translate(163px,304px); -webkit-transform: translate(163px,304px); } 30% { transform: translate(131px,185px); -webkit-transform: translate(131px,185px); } 60% { transform: translate(34px,128px); -webkit-transform: translate(34px,128px); } 80% { transform: translate(12px,53px); -webkit-transform: translate(12px,53px); } 100% { transform: translate(0,0); -webkit-transform: translate(0,0); } } @keyframes lineShow { 0% { height: 0;} 90% {height:393px;} 100%{height: 0;} } @-webkit-keyframes lineShow { 0% { height: 0;} 90% {height:393px;} 100%{height: 0;} } @keyframes start { 0%, 30% { opacity: 0; transform: translate(0px, 10px); } 60% { opacity: 1; transform: translate(0px, 0px); } 100% { opacity: 0; transform: translate(0px, -8px); } } @-webkit-keyframes start { 0%, 30% { opacity: 0; -webkit-transform: translate(0px, 10px); } 60% { opacity: 1; -webkit-transform: translate(0px, 0px); } 100% { opacity: 0; -webkit-transform: translate(0px, -8px); } }