*{margin:0;padding:0}

i{font-style:normal;}

html, body {

  width: 750px;

  height: 100%;

  overflow: hidden;

  background: url(bg.jpg) no-repeat scroll 0 0 / 100% 100%

}

#pageload {

  color:white;

  background: rgba(0, 0, 0, 0.9);

  height: 100%;

  left: 0;

  position: fixed;

  text-align: center;

  top: 0;

  width: 100%;

  z-index: 99;

}.loading_percent {

  font-size: 1.2em;

  margin-top: 55%;

}

.main {

  height: 100%;

  position: relative;

  width: 750px;

}

.main > img:nth-child(1) {

  position: absolute;

  right: 50px;

  top: 40px;

}.main > img:nth-child(2) {

  bottom: -5%;

  left: 0;

  position: absolute;

}

.yc,.result{

  width: 100%;

  height: 100%;

}
.yc > img:nth-child(1) {

    position: absolute;

    top: 27%;

    left: 20px;

  }

.test{

      position: absolute;

    top: 68%;

    left: 0;

    font-size: 2.2em;

    color: white;

    text-align: center;

    width: 100%;

}

.test input {

  background: url("in.png") no-repeat scroll 0 0;

  display: block;

  height: 90px;

  margin:30px 0 30px 168px;

  width: 420px;

  font-size: 1em;

}

.test > span {

  background:url("st.png") repeat scroll 0 0;

  display: block;

  height: 90px;

  line-height: 90px;

  margin: 30px auto;

  width: 420px;

}

.result{

    display:none;

    position: absolute;

    top: 0;

    left: 0;

    text-align: center;

    color: white;

    background-color:rgba(0,0,0,0.8);

}

.time {

  margin-top: 64%;

  position: relative;

  text-align: center;

  animation:sc 0.5s 1s both;

  -webkit-animation:sc 0.5s 1s both;

}

.l1{

      font-size: 1.8em;

left: 50px;

    position: absolute;

    text-align: center;

    top: 60.5%;

    width: 230px;

    font-weight: bold;

}

.l2{

      font-size: 1.8em;

  left: 270px;

    position: absolute;

    top: 60.5%;

    width: 220px;

    font-weight: bold;

}

.l3{

      font-size: 1.8em;

  position: absolute;

  left: 470px;

    top: 60.5%;

    width: 220px;

    font-weight: bold;

}.sn {

  left: 0;

  position: absolute;

  right: 0;

  top: 75%;

  animation:up 0.5s 1.5s both;

  -webkit-animation:up 0.5s 1.5s both;

}

.sn > p{

    margin-top: 20px;

    font-size: 1.3em;

}.result > p{

    position: absolute;

    top: 25%;

    left: 0;

    right: 0;

    font-size: 3em;

    font-weight: bold;

    animation:up 0.5s both;

  -webkit-animation:up 0.5s both;

}

.result > p:nth-child(2){

    top: 29%;

    animation:up 0.5s 0.3s both;

  -webkit-animation:up 0.5s 0.3s both;

}

.result > p:nth-child(3){

    top: 34%;

    animation:up 0.5s 0.6s both;

  -webkit-animation:up 0.5s 0.6s both;

}

.dream {

    width: 100%;

    height: 100%;

    position: absolute;

    overflow: hidden;

    left: 0;

    top: 0

}

.ss {

  left: 200px;

  position: absolute;

  top: 50px;

  animation:shine 4s both infinite;

  -webkit-animation:shine 4s both infinite;

}

.stars {

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    overflow: hidden;

}.star {

    display: block;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #FFF;

    top: 100px;

    left: 400px;

    position: absolute;

    transform-origin: 100% 0;

    animation: star-ani 2.5s ease-out infinite;

    -webkit-animation: star-ani 2.5s ease-out infinite;

    box-shadow: 0 0 15px 15px rgba(255,255,255,0.4);

    opacity: 0;

    z-index: 11;

}

.star-big .star:after {

    border-bottom-width: 8px;

}

.star:after {

    content: '';

    display: block;

    top: 0;

    left: 8px;

    border: 0 solid #fff;

    border-width: 0 190px 2px 190px;

    border-color: transparent transparent transparent rgba(255,255,255,0.3);

    transform: rotate(-45deg) translate3d(1px,9px,0);

    box-shadow: 0 0 1px 0 rgba(255,255,255,0.1);

    transform-origin: 0 100%;

}

.pink {

    top: 30px;

    left: 395px;

    background: #FFF;

    animation-delay: 1s;

    -webkit-animation-delay: 1s;

}.yellow {

    top: 50px;

    left: 600px;

    background: #FFF;

    animation-delay: .8s;

}.pink:after {

    border-color: transparent transparent transparent #FFF;

    animation-delay: 1s;

    -webkit-animation-delay: 1s;

}.yellow:after {

    border-color: transparent transparent transparent #FFF;

    animation-delay: .8s;

}

.dream > img{

  position: absolute;

}

.arc {

  background-color:#5b245e;

  bottom: 0;

  color: #fff;

  font-size: 1.4rem;

  height: 2.45rem;

  line-height: 2.45rem;

  position: absolute;

  text-align: center;

  width: 100%;

  z-index: 10;

}

@-webkit-keyframes up{

  from{

    opacity: 0;

    transform:translate(0,1.5em);

  }

  to{

    transform:none

  }

}

@-webkit-keyframes sw{

  from{

    width:0;

  }

  to{

    transform:none

  }

}

@-webkit-keyframes move{

  from{

    transform:translate(0,-2em);

  }

  to{

    transform:translate(0,2em);

  }

}

@-webkit-keyframes ro1{

  from{

    transform:rotate(50deg);

  }

  to{

    transform:rotate(410deg);

  }

}

@-webkit-keyframes sc{

  0%{

    transform:scale(0);

  }

  90%{

    transform:scale(1.1);

  }

  100%{

    transform:scale(1);

  }

}

@-webkit-keyframes shine{

  0%{

    opacity:0;

    transform:rotate(0deg);

  }

  50%{

    opacity:1;

    transform:rotate(180deg);

  }

  100%{

    opacity:0;

    transform:rotate(360deg);

  }

}

@-webkit-keyframes star-ani{

    0%{opacity:0;transform:scale(0) rotate(0) translate3d(0,0,0);

        -webkit-transform:scale(0) rotate(0) translate3d(0,0,0)}

20%{opacity:1;transform:scale(1) rotate(0) translate3d(-500px,300px,0);

    -webkit-transform:scale(1) rotate(0) translate3d(-500px,300px,0)}

100%{opacity:0;transform:scale(1) rotate(0) translate3d(-900px,600px,0);

    -webkit-transform:scale(1) rotate(0) translate3d(-900px,600px,0)}

}