.loading{position:absolute;width:100%;height:12.5%;background:url('../images/loading.jpg') no-repeat;background-size:100% 100%;z-index: 99;bottom: 0;}
.loading_img{position: absolute;left:32%;bottom: 0;width: 22%;}
.load_wave{
    position:absolute;top:50%;left:33%;width: 35.26%;height:5px;background-color: #002352;
}
.load_val{
    position:absolute;top:0;left:0;width: 0;height:100%;background-color: #c6deff;
}

/*音乐*/
.music_blk{z-index:999;position:fixed;bottom:35px;left:10px;display: none}
.music{width:30px;height:30px;background:url('../images/music_on.png') no-repeat;background-size:100% 100%;position: absolute}
.music_on{
    -webkit-animation:rotate 1.2s linear infinite;
    animation:rotate 1.2s linear infinite;
}

.share-page{
	display: none;
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 9;
}
.thumbs-up{
    vertical-align: baseline;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 30vh;
}
.thumbs-up div{
    font-weight: bold;
    color: white;
    font-size: 30px;
    margin: 0 20px;
    display: inline-block;
    min-width: 50px;
    text-align: center;
    min-height: 30px;
}
.thumbs-up img:first-child{
	width: 8%;
}
.thumbs-up img:nth-child(3){
    width: 32%;
}
.first{
	width: 100%;
}
.bg-img{
	width: 100%;
	height: 100vh;
}
.s-title{
    width: 84%;
    position: relative;
    margin: 16% 8%;
    animation: hand-bling 2s linear;
    -webkit-animation: hand-bling 2s linear;
}

.f-title{
    position: relative;
    width: 90%;
    margin: 0 5%;
    animation: hand-bling 2s linear;
    -webkit-animation: hand-bling 2s linear;
}
.rockt-hand{
	position: relative;
    width: 100%;
    height: 24vh;
}
.hand{
    position: absolute;
    width: 26vw;
    left: 35%;
    margin: 0 auto;
    bottom: 3%;
    animation: hand-bling 1s infinite linear;
    -webkit-animation: hand-bling 1s infinite linear;
}
.second{
	position: relative;
	bottom: 2%;
	width: 100%;
	height: 25vh;
}
.pof{position: fixed; z-index:9999}
.div_box{
	width: 100%;
	height: 100vh;
/*	border: 1px solid #3E454D;
*/	position: relative;
}
.fly-bird{
    width: 35%;
    animation: fly 3s infinite linear;
    -webkit-animation: fly 3s infinite linear;
}
.rocket{
    bottom: 15%;
	position: fixed;
	width: 10%;
	left: 47%;
	margin-left: -5%;
	height: auto;
	animation: shake-base 2s infinite;
}
.test1,.test2,.test3,.test4{
	position: relative;
	width: 50%;
	margin: 4% 0;
}

.test2,.test4{
	left: 46%;
}
.test1,.test2,.test3,.test4,.test3-5,.test3-3,.test3-1,.test4-5,.test4-3,.test4-2,.test5-6,.test5-5,.test5-3,.test6-3,.test6-2,.test6-1,.test7-5,.test7-3,.test7-1,.test8-2{
	visibility: hidden;
}
.test3-1,.test3-3,.test3-5{
	position: relative;
	width: 50%;
	margin: 12% 0;
}
.test3-2,.test3-4{
	position: absolute;
	width: 35%;
}
.test3-2{
	top: 21%;
    width: 62%;
    left: 33%;
    animation: astronaut-float 3s infinite linear;
	-webkit-animation: astronaut-float 3s infinite linear;
}
.test3-4{
    width: 36%;
    top: 58%;
    margin-left: -46%;
    animation: astronaut-float 5s infinite linear;
	-webkit-animation: astronaut-float 5s infinite linear;
    
}
.test3-3{
    margin-left:48%;
}
.test4-1,.test4-2,.test4-3,.test4-4,.test4-5{
	position: relative;
	width: 50%;
	margin: 3% 0;
}
.test4-2{
	margin: 7% 0;
}
.test4-1{
    width: 50%;
    margin: -24% 0;
    margin-left: 48%;
    animation: astronaut-float 3s infinite linear;
	-webkit-animation: astronaut-float 3s infinite linear;
}
.test4-3{
    width: 95%;
    margin: 3%;
}
.test4-4{
    width: 56%;
    animation: astronaut-float 2s infinite linear;
	-webkit-animation: astronaut-float 2s infinite linear;
}
.test4-5{
	margin-left: 48%;
}
.test5-1,.test5-2,.test5-3,.test5-4,.test5-5,.test5-6{
	position: relative;
	width: 50%;
	margin: 5% 0;
}
.test5-2{
	position: absolute;
    margin: -24% auto;
    animation: plane-fly 5s infinite linear;
	-webkit-animation: plane-fly 5s infinite linear;
}
.test5-3{
	margin: 7% 0;
	margin-left:48%;
	margin-bottom: 0;
}
.test5-4{
    width: 71%;
    left: 23%;
    animation: astronaut-float 5s infinite linear;
	-webkit-animation: astronaut-float 5s infinite linear;
}

.test5-6{
    left: 46%;
}
.box_6 img{
	position: relative;
	width: 50%;
	margin: 5% 0;
}
.test6-1{
	left: 48%;
}
.box_7 img{
	position: relative;
	width: 50%;
	margin: 10% 0;
}
.box_7 .test7-4{
    width: 37%;
    margin: 0% 0;
    margin-left:48%; 
    animation: astronaut-float 5s infinite linear;
	-webkit-animation: astronaut-float 5s infinite linear;
}
.box_7 .test7-2{
    left: 0%;
    margin-top: -28%;
    animation: plane-fly 5s infinite linear;
	-webkit-animation: plane-fly 5s infinite linear;
    width: 30%;
    left: -30%;
    position: absolute;
    bottom: 58%
    
}
.plane-fly{
	width: 10%;
    position: absolute;
    visibility:inherit;
    -webkit-backface-visibility: hidden;
    animation: plane-fly-3 5s infinite linear;
	-webkit-animation: plane-fly-3 5s infinite linear;
}
.box_7 .test7-1{
	width: 98%;
}
.box_7 .test7-5{
    margin: -12% auto;
}
.test8-2{
    width: 50%;
    margin: 0% 20%;
}
.test8-1{
    width: 22%;
    margin: 70% 38%;
    margin-bottom:0 ;
}
.share-btn{
	width: 20%;
    position: relative;
    left: 80%;
}
/*.test1,.test3,.test3-1,.test4-2,.test5-5,.test6-3,.test6-2,.test7-5,.test7-1{
	animation: l-to-r 2s;
	-webkit-animation: l-to-r 2s;
}*/

@keyframes shake-base { 0% { transform: translate(0px, 0px) rotate(0deg); }
  10% { transform: translate(1.5px, 1.5px)  }
  22% { transform: translate(1.5px, 0.5px)  }
  28% { transform: translate(-1.5px, -0.5px)  }
  30% { transform: translate(-2.5px, 0.5px)  }
  34% { transform: translate(0.5px, -2.5px)  }
  36% { transform: translate(0.5px, -2.5px) }
  40% { transform: translate(-0.5px, 1.5px) }
  42% { transform: translate(1.5px, 1.5px)  }
  44% { transform: translate(-2.5px, -2.5px)  }
  48% { transform: translate(-0.5px, -2.5px) }
  50% { transform: translate(-0.5px, 0.5px)  }
  52% { transform: translate(1.5px, 0.5px)  }
  58% { transform: translate(-2.5px, -2.5px)  }
  60% { transform: translate(-0.5px, -2.5px) }
  68% { transform: translate(-1.5px, -0.5px)  }
  72% { transform: translate(-2.5px, 1.5px)  }
  80% { transform: translate(1.5px, -0.5px)  }
  82% { transform: translate(-1.5px, 0.5px) }
  86% { transform: translate(0.5px, -0.5px) }
  90% { transform: translate(-1.5px, 1.5px)  }
  98% { transform: translate(-0.5px, -1.5px) } }
  

/*云 左到右 l-to-r*/
@keyframes l-to-r{
	0% {
    opacity: 0;
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
}
100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
}
@-moz-keyframes l-to-r{
	0% {
    opacity: 0;
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
}
100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
}

@-webkit-keyframes l-to-r{
	0% {
    opacity: 0;
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
}
100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
}

@-o-keyframes l-to-r{
	0% {
    opacity: 0;
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
}
100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
}

/*云 右到左 r-to-l*/
@keyframes r-to-l{
	0% {
    opacity: 0;
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
}
100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
}
@-moz-keyframes r-to-l{
	0% {
    opacity: 0;
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
}
100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
}

@-webkit-keyframes r-to-l{
	0% {
    opacity: 0;
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
}
100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
}

@-o-keyframes r-to-l{
	0% {
    opacity: 0;
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
}
100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
}
/*淡入淡出 闪烁*/
@keyframes hand-bling{
	0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

@-moz-keyframes hand-bling{
	0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

@-webkit-keyframes hand-bling{
	0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

@-o-keyframes hand-bling{
	0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

/*宇航员漂浮动画*/
@keyframes astronaut-float{
	0% {
	    -webkit-transform: translate(10px,20px) rotate(5deg);
	    transform: translate(10px,20px) rotate(5deg);
}
	20% {
	    -webkit-transform: translate(10px,30px) rotate(0deg);
	    transform: translate(10px,30px) rotate(0deg);
	}
	80% {
	    -webkit-transform: translate(0px,10px) rotate(-5deg);
	    transform: translate(0px,10px) rotate(-5deg);
	    
	}
	100% {
    	-webkit-transform: translate(10px,20px) rotate(5deg);
	    transform: translate(10px,20px) rotate(5deg);	
}
}
@-webkit-keyframes astronaut-float{
	0% {
	    -webkit-transform: translate(10px,20px) rotate(5deg);
	    transform: translate(10px,20px) rotate(5deg);
}
	20% {
	    -webkit-transform: translate(10px,30px) rotate(0deg);
	    transform: translate(10px,30px) rotate(0deg);
	}
	80% {
	    -webkit-transform: translate(0px,10px) rotate(-5deg);
	    transform: translate(0px,10px) rotate(-5deg);
	    
	}
	100% {
    	-webkit-transform: translate(10px,20px) rotate(5deg);
	    transform: translate(10px,20px) rotate(5deg);	
}
}
@-o-keyframes astronaut-float{
	0% {
	    -webkit-transform: translate(10px,20px) rotate(5deg);
	    transform: translate(10px,20px) rotate(5deg);
}
	20% {
	    -webkit-transform: translate(10px,30px) rotate(0deg);
	    transform: translate(10px,30px) rotate(0deg);
	}
	80% {
	    -webkit-transform: translate(0px,10px) rotate(-5deg);
	    transform: translate(0px,10px) rotate(-5deg);
	    
	}
	100% {
    	-webkit-transform: translate(10px,20px) rotate(5deg);
	    transform: translate(10px,20px) rotate(5deg);	
}
}
/*鸟飞翔动画*/
@keyframes fly{
	0% {
    -webkit-transform: translateX(-150px);
    transform: translateX(-150px);
}
100% {
    -webkit-transform: translateX(300px);
    transform: translateX(300px);
}
}
@-webkit-keyframes fly{
	0% {
    -webkit-transform: translateX(-150px);
    transform: translateX(-150px);
}
100% {
    -webkit-transform: translateX(300px);
    transform: translateX(300px);
}
}
@-o-keyframes fly{
	0% {
    -webkit-transform: translateX(-150px);
    transform: translateX(-150px);
}
100% {
    -webkit-transform: translateX(300px);
    transform: translateX(300px);
}
}
/*火箭飞出来*/
@keyframes plane-fly{
	0% {
		width: 5%;
		-webkit-transform: translate(100px,0px);
	    transform: translate(100px,0px);
	    left: 0%;
	}
	50% {
		width: 30%;
	    -webkit-transform: translate(200px,-200px);
	    transform: translate(200px,-200px);
	    left: 50%;
	}
	100% {
		width: 50%;
	    -webkit-transform: translate(300px,-400px);
	    transform: translate(300px,-400px);
	    left: 100%;
	}
}
@-webkit-keyframes plane-fly{
	0% {
		width: 5%;
		-webkit-transform: translate(100px,0px);
	    transform: translate(100px,0px);
	    left: 0%;
	}
	50% {
		width: 30%;
	    -webkit-transform: translate(200px,-150px);
	    transform: translate(200px,-150px);
	    left: 20%;
	}
	100% {
		width: 50%;
	    -webkit-transform: translate(300px,-550px);
	    transform: translate(300px,-550px);
	    left: 100%;
	}
}
@-o-keyframes plane-fly{
	0% {
		width: 5%;
		-webkit-transform: translate(100px,0px);
	    transform: translate(100px,0px);
	    left: -20%;
	}
	50% {
		width: 30%;
	    -webkit-transform: translate(200px,-250px);
	    transform: translate(200px,-250px);
	    left: 20%;
	}
	100% {
		width: 50%;
	    -webkit-transform: translate(300px,-550px);
	    transform: translate(300px,-550px);
	    left: 100%;
	}
}
@-webkit-keyframes plane-fly-2{
	0% {
		-webkit-transform: translate(100px,0px);
	    transform: translate(100px,0px);
	    left: 0%;
	}
	50% {
	    -webkit-transform: translate(200px,-150px);
	    transform: translate(200px,-150px);
	    left: 20%;
	}
	100% {
	    -webkit-transform: translate(300px,-300px);
	    transform: translate(300px,-300px);
	    left: 100%;
	}
}
@-o-keyframes plane-fly-3{
	0% {
		display: none;
	    -webkit-transform: translate(100px,0px);
	    transform: translate(100px,0px);
	    left: 20%;
	    width: 10%;
	}
	50% {
		display: block;
	    -webkit-transform: translate(200px,-150px);
	    transform: translate(200px,100px);
	    left: 25%;
	    width: 50%;
	}
	100% {
	    -webkit-transform: translate(300px,-300px);
	    transform: translate(300px,200px);
	    left: 30%;
	    width: 80%;
	    display: none;
	}
}
@keyframes plane-fly-3{
	0% {
	    -webkit-transform: translate(100px,0px);
	    transform: translate(100px,0px);
	    left: 20%;
	    width: 10%;
	}
	50% {
	    -webkit-transform: translate(200px,-150px);
	    transform: translate(200px,100px);
	    left: 25%;
	    width: 50%;
	}
	100% {
	    -webkit-transform: translate(300px,-300px);
	    transform: translate(300px,200px);
	    left: 30%;
	    width: 80%;
	}
}
@keyframes plane-fly-3{
	0% {
	    -webkit-transform: translate(100px,0px);
	    transform: translate(100px,0px);
	    left: 20%;
	    width: 10%;
	}
	50% {
	    -webkit-transform: translate(200px,-150px);
	    transform: translate(200px,100px);
	    left: 25%;
	    width: 50%;
	}
	100% {
	    -webkit-transform: translate(300px,-300px);
	    transform: translate(300px,200px);
	    left: 30%;
	    width: 80%;
	}
}