/*
* @Author: tanbei
* @Date:   2016-06-28 11:14:48
* @Last Modified by:   tanbei
* @Last Modified time: 2016-07-27 14:43:39
*/
html,body,img,div {
  margin: 0;
  padding: 0;
}
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.wrapper {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  height: 100%;
  overflow: hidden;
  background: url(../img/xingzuob-g.png) no-repeat center center;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  position: relative;
}
.download {
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: 37%;
  margin-left: -18%;
}
.click_download {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.xingxing {
  width: 100%;
  height: 66%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.title {
  width: 60%;
  height: 10%;
  background: url(../img/xingzuoTitle.png) no-repeat center center;
  -webkit-background-size: contain;
  background-size: contain;
  position: absolute;
  left: 50%;
  top: 6%;
  transform: translate(-50%,0);
  -ms-transform:translate(-50%,0);
  -moz-transform:translate(-50%,0);
  -webkit-transform:translate(-50%,0);
  -o-transform:translate(-50%,0);
}
.stars {
  width: 97%;
}
.icon {
  width: 45%;
  position: absolute;
  top: 28%;
  left: 50%;
  -ms-transform:translate(-50%,0);
  -moz-transform:translate(-50%,0);
  -webkit-transform:translate(-50%,0);
  -o-transform:translate(-50%,0);
  transform: translate(-50%,0);
  z-index: 6;
}
.firstStar {
  width: 15%;
  position: absolute;
  right: 5%;
  top: 7%;
  animation: firstStar 5s linear forwards;
  -webkit-animation: firstStar 5s linear forwards;
  -moz-animation: firstStar 5s linear forwards;
  -o-animation: firstStar 5s linear forwards;
  -ms-animation: firstStar 5s linear forwards;
}
.secondStar {
  width: 60%;
  position: absolute;
  top: 19%;
  left: 22%;
  animation: secondStar 3s linear forwards;
  -webkit-animation: secondStar 3s linear forwards;
  -moz-animation: secondStar 3s linear forwards;
  -o-animation: secondStar 3s linear forwards;
  -ms-animation: secondStar 3s linear forwards;
}
.thirdStar {
  width: 71%;
  position: absolute;
  top: 19%;
  left: 15%;
  animation: firstStar 5s linear forwards;
  -webkit-animation: firstStar 5s linear forwards;
  -moz-animation: firstStar 5s linear forwards;
  -o-animation: firstStar 5s linear forwards;
  -ms-animation: firstStar 5s linear forwards;
}
.astronaut {
  width: 17%;
  position: absolute;
  top: 25%;
  left: 20%;
  z-index: 3;
  -webkit-animation: astronaut 8s linear infinite;
  -moz-animation: astronaut 8s linear infinite;
  -o-animation: astronaut 8s linear infinite;
  -ms-animation: astronaut 8s linear infinite;
  animation: astronaut 8s linear infinite;
}
@-webkit-keyframes astronaut{
  0% {
    transform: translate(0,0) rotateZ(0deg);
    -webkit-transform: translate(0,0) rotateZ(0deg);
    -moz-transform: translate(0,0) rotateZ(0deg);
  }
  50% {
    transform: translate(10%,30%) rotateZ(-15deg);
    -webkit-transform: translate(10%,30%) rotateZ(-15deg);
    -moz-transform: translate(10%,30%) rotateZ(-15deg);
  }
  75% {
    transform: translate(10%,20%) rotateZ(-15deg);
    -webkit-transform: translate(10%,20%) rotateZ(-15deg);
    -moz-transform: translate(10%,20%) rotateZ(-15deg);
  }
  100% {
    transform: translate(0,0%) rotateZ(0deg);
    -webkit-transform: translate(0,0%) rotateZ(0deg);
    -moz-transform: translate(0,0%) rotateZ(0deg);
  }
}
@keyframes astronaut{
  0% {
    transform: translate(0,0) rotateZ(0deg);
    -webkit-transform: translate(0,0) rotateZ(0deg);
    -moz-transform: translate(0,0) rotateZ(0deg);
  }
  50% {
    transform: translate(10%,30%) rotateZ(-15deg);
    -webkit-transform: translate(10%,30%) rotateZ(-15deg);
    -moz-transform: translate(10%,30%) rotateZ(-15deg);
  }
  75% {
    transform: translate(10%,20%) rotateZ(-15deg);
    -webkit-transform: translate(10%,20%) rotateZ(-15deg);
    -moz-transform: translate(10%,20%) rotateZ(-15deg);
  }
  100% {
    transform: translate(0,0%) rotateZ(0deg);
    -webkit-transform: translate(0,0%) rotateZ(0deg);
    -moz-transform: translate(0,0%) rotateZ(0deg);
  }
}
.ship {
  width: 10%;
  position: absolute;
  bottom: 38%;
  left: 9%;
  z-index: 2;
  transform-origin: top right;
  transform: rotateZ(-45deg);
  -webkit-animation: ship 8s ease-in;
  -moz-animation: ship 8s ease-in;
  -o-animation: ship 8s ease-in;
  -ms-animation: ship 8s ease-in;
  animation: ship 8s ease-in;
}
@-webkit-keyframes ship{
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,0,0) scale(1.5);
    -moz-transform: rotateZ(0deg) translate3d(0,0,0) scale(1.5);
    transform: rotateZ(0deg) translate3d(0,0,0) scale(1.5);
  }
  85% {
    -webkit-transform: rotateZ(-120deg) translate3d(600px,50px,0) scale(0.4);
    -moz-transform: rotateZ(-120deg) translate3d(600px,50px,0) scale(0.4);
    transform: rotateZ(-120deg) translate3d(600px,50px,0) scale(0.4);
  }
  86% {
    -webkit-transform: rotateZ(-90deg) translate3d(100px,20px,0) scale(0.4);
    -moz-transform: rotateZ(-90deg) translate3d(100px,20px,0) scale(0.4);
    transform: rotateZ(-90deg) translate3d(100px,20px,0) scale(0.4);
  }
  97% {
    -webkit-transform: rotateZ(-30deg) translate3d(0,0,0) scale(1);
    -moz-transform: rotateZ(-30deg) translate3d(0,0,0) scale(1);
    transform: rotateZ(-30deg) translate3d(0,0,0) scale(1);
  }
  100% {
    -webkit-transform: rotateZ(-45deg) translate3d(0,0,0) scale(1);
    -moz-transform: rotateZ(-45deg) translate3d(0,0,0) scale(1);
    transform: rotateZ(-45deg) translate3d(0,0,0) scale(1);
  }
}
@keyframes ship{
  0% {
    -webkit-transform: rotateZ(0deg) translate3d(0,0,0) scale(1.5);
    -moz-transform: rotateZ(0deg) translate3d(0,0,0) scale(1.5);
    transform: rotateZ(0deg) translate3d(0,0,0) scale(1.5);
  }
  85% {
    -webkit-transform: rotateZ(-120deg) translate3d(600px,50px,0) scale(0.4);
    -moz-transform: rotateZ(-120deg) translate3d(600px,50px,0) scale(0.4);
    transform: rotateZ(-120deg) translate3d(600px,50px,0) scale(0.4);
  }
  86% {
    -webkit-transform: rotateZ(-90deg) translate3d(100px,20px,0) scale(0.4);
    -moz-transform: rotateZ(-90deg) translate3d(100px,20px,0) scale(0.4);
    transform: rotateZ(-90deg) translate3d(100px,20px,0) scale(0.4);
  }
  97% {
    -webkit-transform: rotateZ(-30deg) translate3d(0,0,0) scale(1);
    -moz-transform: rotateZ(-30deg) translate3d(0,0,0) scale(1);
    transform: rotateZ(-30deg) translate3d(0,0,0) scale(1);
  }
  100% {
    -webkit-transform: rotateZ(-45deg) translate3d(0,0,0) scale(1);
    -moz-transform: rotateZ(-45deg) translate3d(0,0,0) scale(1);
    transform: rotateZ(-45deg) translate3d(0,0,0) scale(1);
  }
}
.universe {
  width: 14%;
  position: absolute;
  bottom: 37%;
  right: 9%;
  z-index: 2;
  animation: universe 10s linear infinite;
  -webkit-animation: universe 10s linear infinite;
  -moz-animation: universe 10s linear infinite;
  -o-animation: universe 10s linear infinite;
  -ms-animation: universe 10s linear infinite;
}
@-webkit-keyframes universe{
  0% {
    transform: translate3d(0,0,0) scale(1.3);
    -webkit-transform: translate3d(0,0,0) scale(1.3);
    -moz-transform: translate3d(0,0,0) scale(1.3);
  }
  12.5% {
    transform: translate3d(5px,5px,0) scale(1.2);
    -webkit-transform: translate3d(5px,5px,0) scale(1.2);
    -moz-transform: translate3d(5px,5px,0) scale(1.2);
  }
  25% {
    transform: translate3d(10px,10px,0) scale(1.1);
    -webkit-transform: translate3d(10px,10px,0) scale(1.1);
    -moz-transform: translate3d(10px,10px,0) scale(1.1);
  }
  37.5% {
    transform: translate3d(15px,5px,0) scale(1);
    -webkit-transform: translate3d(15px,5px,0) scale(1);
    -moz-transform: translate3d(15px,5px,0) scale(1);
  }
  50% {
    transform: translate3d(20px,0px,0) scale(0.9);
    -webkit-transform: translate3d(20px,0px,0) scale(0.9);
    -moz-transform: translate3d(20px,0px,0) scale(0.9);
  }
  62.5% {
    transform: translate3d(15px,-5px,0) scale(1);
    -webkit-transform: translate3d(15px,-5px,0) scale(1);
    -moz-transform: translate3d(15px,-5px,0) scale(1);
  }
  75% {
    transform: translate3d(10px,-10px,0) scale(1.1);
    -webkit-transform: translate3d(10px,-10px,0) scale(1.1);
    -moz-transform: translate3d(10px,-10px,0) scale(1.1);
  }
  87.5% {
    transform: translate3d(5px,-5px,0) scale(1.2);
    -webkit-transform: translate3d(5px,-5px,0) scale(1.2);
    -moz-transform: translate3d(5px,-5px,0) scale(1.2);
  }
  100% {
    transform: translate3d(0px,0px,0) scale(1.3);
    -webkit-transform: translate3d(0px,0px,0) scale(1.3);
    -moz-transform: translate3d(0px,0px,0) scale(1.3);
  }
}
@keyframes universe{
  0% {
    transform: translate3d(0,0,0) scale(1.3);
    -webkit-transform: translate3d(0,0,0) scale(1.3);
    -moz-transform: translate3d(0,0,0) scale(1.3);
  }
  12.5% {
    transform: translate3d(5px,5px,0) scale(1.2);
    -webkit-transform: translate3d(5px,5px,0) scale(1.2);
    -moz-transform: translate3d(5px,5px,0) scale(1.2);
  }
  25% {
    transform: translate3d(10px,10px,0) scale(1.1);
    -webkit-transform: translate3d(10px,10px,0) scale(1.1);
    -moz-transform: translate3d(10px,10px,0) scale(1.1);
  }
  37.5% {
    transform: translate3d(15px,5px,0) scale(1);
    -webkit-transform: translate3d(15px,5px,0) scale(1);
    -moz-transform: translate3d(15px,5px,0) scale(1);
  }
  50% {
    transform: translate3d(20px,0px,0) scale(0.9);
    -webkit-transform: translate3d(20px,0px,0) scale(0.9);
    -moz-transform: translate3d(20px,0px,0) scale(0.9);
  }
  62.5% {
    transform: translate3d(15px,-5px,0) scale(1);
    -webkit-transform: translate3d(15px,-5px,0) scale(1);
    -moz-transform: translate3d(15px,-5px,0) scale(1);
  }
  75% {
    transform: translate3d(10px,-10px,0) scale(1.1);
    -webkit-transform: translate3d(10px,-10px,0) scale(1.1);
    -moz-transform: translate3d(10px,-10px,0) scale(1.1);
  }
  87.5% {
    transform: translate3d(5px,-5px,0) scale(1.2);
    -webkit-transform: translate3d(5px,-5px,0) scale(1.2);
    -moz-transform: translate3d(5px,-5px,0) scale(1.2);
  }
  100% {
    transform: translate3d(0px,0px,0) scale(1.3);
    -webkit-transform: translate3d(0px,0px,0) scale(1.3);
    -moz-transform: translate3d(0px,0px,0) scale(1.3);
  }
}
.mask {
  width: 100%;
  height: 100%;
  background-color: #444;
  position: relative;
  z-index: 666;
  display: none;
  text-align: center;
}
.mask div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  -o-transform:translate(-50%,-50%);
}
.mask img {
  width: 70%;
  display: inline-block;
  margin: 0 auto;
  vertical-align: middle;
  margin-bottom: 2%;
}
.mask p {
  font-size: 1.5em;
  color: #fff;
}

@-webkit-keyframes firstStar{
  0% {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
  }
  50% {
    opacity: 0.7
    transform: scale(0.1);
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
  }
}

@keyframes firstStar{
  0% {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
  }
  50% {
    opacity: 0.7
    transform: scale(0.1);
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
  }
}

@-webkit-keyframes secondStar{
  0% {
    opacity: 1;
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
  }
}
@keyframes secondStar{
 0% {
    opacity: 1;
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
  }
}