@charset "UTF-8";
html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,em,img,input,q,b,dl,dt,dd,ol,ul,li,form,label,canvas{
  margin:0;padding:0;border:0;outline:0;
}
ul,li{
  list-style: none;
}
body, button, input, select, textarea {
  font-family: 'Microsoft YaHei','helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei','\5FAE\8F6F\96C5\9ED1','\5B8B\4F53',sans-serif;
}
body{
	text-align:center;
	font-size:16px;
	background-color:#000;
	color:#000;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-appearance: none;
	outline:none;
}
html, body {
	position: relative;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}
::-webkit-input-placeholder{
	direction:ltr;
	text-align:center;
	color:#585858;
	font-size:24px;
}
img{
  width:100%;
  vertical-align: bottom;
  display: block;
  pointer-events: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.h0{
	opacity: 0;
}
.d0{
  display: none;
}
.abs{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}


.wp{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(../images/day.jpg) no-repeat;
  background-size: cover;
}
.wp li{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top:0;
}
.p1{
  position: absolute;
  width: 22.5%;
  left: 0;
  right: 0;
  margin: auto;
  top: 15%;
  display: inline-block;
}
.p1-left,.p1-right{
  position: absolute;
  width: 50%;
  left: 0;
  top: 0;
  height: 0%;
  background-image: url(../images/txt1.png);
  background-repeat: no-repeat;
  background-size: 200% auto;
  background-position:0 0;
}
.p1-left{
  -webkit-transition-duration: 6s;
  transition-duration: 6s;
}
.p1-right{
  left:50%;
  background-position: 100% 0;
  -webkit-transition-duration: 10s;
  transition-duration: 10s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}
.active .p1-left{
  height: 50%;
}
.active .p1-right{
  height: 100%;
}
/*.p1-right{
  left:50%;
  background-position: 100% 0;
  -webkit-transition-duration: 10s;
  transition-duration: 10s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}

.active .p1-right{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}*/

.wp-2 .p2 .txt{
  position: absolute;
  height: 37.5%;
  width: 100%;
  background: url(../images/txt2.png) no-repeat;
  background-size: auto 100%;
  background-position: center 0;
  top:12%;
}
.wp-2 .p2 .pimg{
  position: absolute;
  height: 50%;
  width: 200%;
  /*background: url(../images/p1_big.png) no-repeat;*/
  background-size: 100% auto;
  background-position: center 0;
  bottom: -20%;
  left: 15%;
}

.p3{
  opacity: 0;
  left:110%;
  top:0;
}
.p3 .txt{
  position: absolute;
  height: 27.5%;
  width: 100%;
  background: url(../images/txt3.png) no-repeat;
  background-size: auto 100%;
  background-position: center 0;
  top:10%;
}
.p3 .pimg{
  position: absolute;
  height: 40%;
  width: 100%;
  background: url(../images/p3.png) no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  top: 38%;
  -webkit-transform: scale3d(1.1,1.1,1.1);
  transform: scale3d(1.1,1.1,1.1);
}
.p3 .pbtn{
  position: absolute;
  height: 7.6%;
  width: 100%;
  background: url(../images/button.png) no-repeat;
  background-size: auto 100%;
  background-position: center 0;
  bottom: 10.6%;
}

.sky-out{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  left:0;
}
.sky{
  position: absolute;
  height: 100%;
  width: 100%;
  background: url(../images/cloud.png) no-repeat;
  background-repeat: repeat-x;
  background-size: auto 70%;
  background-position: 0% 0%;
  top: 0%;
}
.p4-plane{
  position: absolute;
  height: 13%;
  width: 100%;
  background: url(../images/plane.png) no-repeat;
  background-size: auto 100%;
  background-position: 50% 0%;
  top: 8%;
}

.car-out{
  position: absolute;
  height: 24%;
  width: 100%;
  bottom: 13.4%;
}
.p4-car{
  position: absolute;
  height: 100%;
  width: 200%;
  background: url(../images/car1_road.png) no-repeat;
  background-repeat: repeat-x;
  background-size: 200% 56%;
  background-position: 50% 100%;
}

.pcar{
  display: inline-block;
  height: 76%;
  position: absolute;
  left:20%;
}
.pcar img{
  height: 100%;
  width: auto;
}
.wheel{
  display: inline-block;
  height: 42.6%;
  left:0;
  bottom:3.2%;
  position: absolute;
}
.pcar .front-wheel{
  left: 76%;
}
.pcar .back-wheel{
  left: 14.8%;
}
.p4 .txt{
  height: 27%;
  width: 100%;
  position: absolute;
  background: url(../images/txt5.png) no-repeat;
  background-size: auto 100%;
  background-position: center 0;
  top: 28%;
  opacity: 0;
}
.car-txt{
  height: 27%;
  width: 100%;
  position: absolute;
  background: url(../images/txt4.png) no-repeat;
  background-size: auto 100%;
  background-position: -180% 0;
  bottom: 32%;
  opacity: 0;
}



/*.transfrom1 .p4,.transfrom2 .p4{
  transform: scale3d(1.5,1.5,1.5);
  top: -15%;
}
.transfrom1 .p4-car{
  transform: scale3d(1.5,1.5,1.5);
  bottom: 20%;
  left: -38%;
}
.transfrom2 .sky{
  transform: scale3d(2.2,2.2,2.2);
}
.transfrom2 .p4-plane{
  transform: scale3d(1,1,1);
  left: -30%;
  top: 37%;
}
.transfrom2 .p4-car{
  bottom:-20%;
}*/



.sky{
  -webkit-animation:bgMove2 10s linear both infinite;
  animation:bgMove2 10s linear both infinite;
}
.wheel{
  -webkit-animation:wheelRotate 0.1s linear both infinite;
  animation:wheelRotate 0.1s linear both infinite;
}
.p4-car{
  -webkit-animation:bgMove 0.1s linear both infinite;
  animation:bgMove 0.1s linear both infinite;
}
.flipOutY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}
.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

.active .p4{
  -webkit-animation:animP4 10s ease-in-out both;
  animation:animP4 10s ease-in-out both;
}
.active .car-out{
  -webkit-animation:animP4Car 10s ease-in-out both;
  animation:animP4Car 10s ease-in-out both;
}
.active .sky-out{
  -webkit-animation:animP4Sky 10s ease-in-out both;
  animation:animP4Sky 10s ease-in-out both;
}
.active .p4-plane{
  -webkit-animation:animP4Plane 10s ease-in-out both;
  animation:animP4Plane 10s ease-in-out both;
}
.active .car-txt{
  -webkit-animation:animCarTxt 10s ease-in-out both;
  animation:animCarTxt 10s ease-in-out both;
}
.active .p4 .txt{
  -webkit-animation:animP4Txt 10s ease-in-out both;
  animation:animP4Txt 10s ease-in-out both;
}


.active .p2{
  -webkit-animation:animP2Out 0.2s ease-in-out both;
  animation:animP2Out 0.2s ease-in-out both;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
.active .p2 .pimg{
  -webkit-animation:animP2Img 2.5s ease-in-out both;
  animation:animP2Img 2.5s ease-in-out both;
}
.active .p2 .txt{
  -webkit-animation:animTxt 1s ease-in-out both;
  animation:animTxt 1s ease-in-out both;
}
.active .p3{
  -webkit-animation:animP3 0.2s ease-in-out both;
  animation:animP3 0.2s ease-in-out both;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
.active .p3 .pimg{
  -webkit-animation:animP3Img 3s ease-in-out both;
  animation:animP3Img 3s ease-in-out both;
  -webkit-animation-delay: 3.2s;
  animation-delay: 3.2s;
}
.active .p3 .txt{
  -webkit-animation:animTxt 1s ease-in-out both;
  animation:animTxt 1s ease-in-out both;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
.active .p3 .pbtn{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
/*anim start*/
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}
@-webkit-keyframes animBtn {
  0%{

  }
  100%{
    -webkit-transform: none;
    transform: none;
  }

}
@-webkit-keyframes animP3Img {
  0%{
    -webkit-transform: scale3d(1.1,1.1,1.1);
    transform: scale3d(1.1,1.1,1.1);
  }
  100%{
    -webkit-transform: none;
    transform: none;
  }

}
@-webkit-keyframes animP2Out {
  0%{
    opacity: 1;
    left:0;
  }
  50%{
    left:-50%;
    opacity: 1;
  }
  51%{
    opacity: 0;
  }

  100%{
    opacity: 0;
    left:-100%;
  }

}
@-webkit-keyframes animP3 {
  0%{
    opacity: 1;
  }
  100%{
    opacity: 1;
    left:0;
  }

}
@-webkit-keyframes animTxt {
  0%{
    opacity: 0;
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100%{
    opacity: 1;
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

}
@-webkit-keyframes animP2Img {
  0%{
    -webkit-transform: scale3d(1.6,1.6,1.6);
    transform: scale3d(1.6,1.6,1.6);
    bottom: -20%;
    left: 15%;
  }
  30%{
    -webkit-transform: scale3d(1.6,1.6,1.6);
    transform: scale3d(1.6,1.6,1.6);
    bottom: -8%;
    left: -34%;
  }
  100%{
    -webkit-transform: scale3d(1.5,1.5,1.5);
    transform: scale3d(1.5,1.5,1.5);
    bottom: -8%;
    left: -34%;
  }

}
@keyframes animP2Img {
  0%{
    -webkit-transform: scale3d(1.6,1.6,1.6);
    transform: scale3d(1.6,1.6,1.6);
    bottom: -20%;
    left: 15%;
  }
  30%{
    -webkit-transform: scale3d(1.6,1.6,1.6);
    transform: scale3d(1.6,1.6,1.6);
    bottom: -8%;
    left: -34%;
  }
  100%{
    -webkit-transform: scale3d(1.5,1.5,1.5);
    transform: scale3d(1.5,1.5,1.5);
    bottom: -8%;
    left: -34%;
  }

}
@-webkit-keyframes animP4Txt {
  0%{
    opacity: 0;
  }
  95%{
    opacity: 0;
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100%{
    opacity: 1;
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

}
@-webkit-keyframes animCarTxt {
  0%{
    opacity: 0.6;
    background-position: -200% 0;
  }
  40%{
    opacity: 0.6;
    background-position: 300% 0;
  }
  50%,100%{
    background-position: 500% 0;
    opacity: 0;
  }

}
@-webkit-keyframes animP4Plane {
  0%{
  }
  40%{

  }

  40%{
    left: -30%;
    top: 37%;
  }

  75%{
    left: -26%;
    top: 37%;
  }

  100%{
    top: 8%;
    left:0;
  }
}
@-webkit-keyframes animP4Sky {
  0%{
    -webkit-transform: scale3d(2.2,2.2,2.2);
    transform: scale3d(2.2,2.2,2.2);
  }
  40%{
    -webkit-transition: none;
  }

  50%{
    -webkit-transition: none;
  }

  100%{
    -webkit-transition: none;
  }
}
@-webkit-keyframes animP4Car {
  0%{
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
    bottom: 15%;
    left: -70%;
  }
  20%{
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
    bottom: 15%;
    left: -56%;
  }

  35%{
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
    bottom:-20%;
    left: -56%;
  }

  70%{
    -webkit-transform: scale3d(0.67,0.67,0.67);
    transform: scale3d(0.67,0.67,0.67);
    bottom: -20%;
    left:-25%;
  }
  100%{
    -webkit-transform: scale3d(0.67,0.67,0.67);
    transform: scale3d(0.67,0.67,0.67);
    bottom: 13.4%;
    left:-25%;
  }
}
@-webkit-keyframes animP4 {
  0%,80%{
    -webkit-transform: scale3d(1.5,1.5,1.5);
    transform: scale3d(1.5,1.5,1.5);
    top: -15%;
  }
  100%{
    -webkit-transition: none;
    transform: none;
    top:0;
  }
}
@-webkit-keyframes bgMove2 {
  0% {
    background-position-x: 0%;
  }
  100%{
    background-position-x: 1000%;
  }
}
@-webkit-keyframes wheelRotate {
  0%{
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform:rotate3d(0,0,1,0deg);
    transform:rotate3d(0,0,1,0deg);
  }
  100%{
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform:rotate3d(0,0,1,360deg);
    transform:rotate3d(0,0,1,360deg);
  }
}
@-webkit-keyframes bgMove {
  0% {
    background-position-x: 0%;
  }
  100%{
    background-position-x: 100%;
  }
}
@-webkit-keyframes animTxt0 {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}


@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}



@-webkit-keyframes loadingSpin{
	0%{-webkit-transform:rotate(0deg)}
	100%{-webkit-transform:rotate(360deg)}
}

@-webkit-keyframes fadeIn{
  0%{
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
/*anim end*/



.queryloader__overlay__bar{
	display:none;
	visibility:hidden;
	opacity:0;
}

/*loading dom*/
.loading-overlay{
	position: absolute; 
	width: 100%; 
	height: 100%; 
	z-index: 666999; 
	top: 0px; 
	left: 0px;
    background: #fff url(../images/day.jpg) no-repeat;
    background-size: cover;
    overflow: hidden;
}
.load-content{
    position: absolute;
    height: 6%;
    width: 40%;
    top: 42.5%;
    left: 0;
    right: 0;
    margin: auto;
}
.load-plane{
    height: 50%;
    width: 100%;
    position: absolute;
    background-image: url(../images/plane_loading.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 0 0;
}
.load-bar{
  height: 0.6em;
  width: 100%;
  bottom: 0%;
  left: 0;
  position: absolute;
  border: 0.1px solid #343434;
  border-radius: 5px;
}
.lbar{
  position: relative;
  width: 100%;
  height: 0.4em;
  border: 1px solid #1b1b1b;
  background-color: #1b1b1b;
  border-radius: 5px;
}
.lnum{
  position: absolute;
  right: -3em;
  font-size: 0.4em;
  top: -0.4em;
}

.music_ico {
  position: absolute;
  right: .65rem;
  top: .65rem;
  height: 32px;
  width: 32px;
  z-index: 1000;
  text-align: right;
}

.rotateCla {
  -webkit-animation: loadingSpin 10s linear infinite;
  -ms-animation: loadingSpin 10s linear infinite;
  animation: loadingSpin 10s linear infinite;
}
.noline {
  display: inline-block;
}

.logo{
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  width: auto;
  margin: auto;
  height: 5%;
}
.logo img{
  height: 100%;
  width: auto;
  display: inline-block;
}











/*后两页*/
/* 白天 */
.day{
  width: 100%;
  height: 100%;
  background: url(../images/day.jpg) no-repeat center center;
  background-size: cover;
  opacity: 1;
  position: absolute;
  left: 0px;
  top:0px;
}
.day .dial{
  width: 77.33333333333333%;
  height: 48.09286898839138%;
  position: absolute;
  left: 50%;
  margin-left: -39%;
  top:10.44776119402985%;
  background: url(../images/dial.png) no-repeat center top;
  background-size: auto 200%;
  overflow: hidden;
}
.day .wait{
  width: 13.44827586206897%;
  height: 36.55172413793103%;
  position: absolute;
  background-image: url(../images/wait-day.png);
  background-size: 200% 155.6603773584906%;
  z-index: 10;
}
.day .wait1{
  left: 36.20689655172414%;
  top: 22.06896551724138%;
  background-position: left top;
}
.day .wait2{
  left: 49.6551724137931%;
  top: 43.10344827586207%;
  background-position: right bottom;
}
.day .circle,.day .minute,.day .hour{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  background-image: url(../images/indicator.png);
  background-repeat:no-repeat;
  background-size: 100% 600%;
}
.day .circle{
  background-position: 0 0;
  z-index: 1;
}
.day .minute{
  background-position: 0 20%;
}
.day .hour{
  background-position: 0 40%;
}
.day .car{
  width: 100%;
  height:20.14925373134328%;
  position: absolute;
  left: 0px;
  top:61.85737976782753%;
  background: url(../images/car.png) no-repeat center top;
  background-size: auto 300%;
}

/* 晚上 */
.night{
  width: 100%;
  height: 100%;
  background: url(../images/night.jpg) no-repeat center center;
  background-size: cover;
  position: absolute;
  left: 0px;
  top:0px;
  opacity: 0;
}
.night .dial{
  width: 77.33333333333333%;
  height: 48.09286898839138%;
  position: absolute;
  left: 50%;
  margin-left: -39%;
  top:10.44776119402985%;
  background: url(../images/dial.png) no-repeat center bottom;
  background-size: auto 200%;
  overflow: hidden;
}
.night .wait{
  width: 13.44827586206897%;
  height: 36.55172413793103%;
  position: absolute;
  background-image: url(../images/wait-night.png);
  background-size: 200% 155.6603773584906%;
  z-index: 10;
}
.night .wait1{
  left: 36.20689655172414%;
  top: 22.06896551724138%;
  background-position: left top;
}
.night .wait2{
  left: 49.6551724137931%;
  top: 43.10344827586207%;
  background-position: right bottom;
}
.night .circle,.night .minute,.night .hour{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  background-image: url(../images/indicator.png);
  background-repeat:no-repeat;
  background-size: 100% 600%;
}
.night .circle{
  background-position: 0 60%;
  z-index: 1;
}
.night .minute{
  background-position: 0 80%;
}
.night .hour{
  background-position: 0 100%;
}
.night .car{
  width: 100%;
  height:20.14925373134328%;
  position: absolute;
  left: 0px;
  top:61.85737976782753%;
  background: url(../images/car.png) no-repeat center 50%;
  background-size: auto 300%;
}
.night .halo{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  background: url(../images/halo.png) no-repeat center center;
  background-size: cover;
  opacity: 0;
}
.night .car .light{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  background: url(../images/light.png) no-repeat center center;
  background-size:auto 100%;
  opacity: 0;
}

/* 最后领礼包页 */
.present{
  width: 100%;
  height: 100%;
  background: url(../images/day.jpg) no-repeat center center;
  background-size: cover;
  position: absolute;
  left: 0px;
  top:0px;
  opacity: 0;
  overflow: hidden;
}
.present .pt-txt{
  height: 33%;
  width: 100%;
  position: absolute;
  left:0;
  top:0;
  background: url(../images/txt7.png) no-repeat;
  background-size: auto 100%;
  background-position: center 0;
}
.present .pt-txt2{
  opacity: 0;
}
.present .sentence1{
  width: 100%;
  height:10.77943615257048%;
  position: absolute;
  left: 0px;
  top:4.31177446102819%;
  background: url(../images/prenset-sentence.png) no-repeat center top;
  background-size: auto 198.4615384615385%;
  opacity: 1;
}
.present .sentence2{
  width: 100%;
  height:5.38971807628524%;
  position: absolute;
  left: 0px;
  top:15.17412935323383%;
  background: url(../images/prenset-sentence.png) no-repeat center 65.38759689922481%;
  background-size: auto 396.9230769230769%;
  opacity: 1;
}
.present .sentence3{
  width: 100%;
  height:5.38971807628524%;
  position: absolute;
  left: 0px;
  top:20.56384742951907%;
  background: url(../images/prenset-sentence.png) no-repeat center bottom;
  background-size: auto 396.9230769230769%;
  opacity: 1;
}
.present .plane{
  width: 100%;
  height: 11.60862354892206%;
  position: absolute;
  left: 0px;
  top: 35.65505804311774%;
  background: url(../images/present-plan.png)no-repeat left top;
  background-size: 100%;
}
.present .car{
  width: 100%;
  height: 22.55389718076285%;
  position: absolute;
  left: 0px;
  top: 40.04975124378109%;
  background: url(../images/present-car.png)no-repeat right top;
  background-size: auto 100%;
  opacity: 0;
  z-index: 10;

}
.present .person{
  width: 80%;
  height: 50.5804311774461%;
  position: absolute;
  left: -10%;
  top: 32.83582089552239%;
  background: url(../images/present-person.png)no-repeat left top;
  background-size: auto 100%;
  opacity: 0;
  z-index: 10000;
}
.present .btn{
  width: 100%;
  height: 8.29187396351575%;
  position: absolute;
  left: 0px;
  top: 86.40132669983416%;
  background: url(../images/present-btn.png)no-repeat center center;
  background-size: auto 100%;
}

.active .day .minute{
  -webkit-animation:minute-day  linear forwards ;
  -webkit-animation-delay:0s;
  -webkit-animation-duration:4s;
  animation:minute-day linear forwards;
  animation-delay:0s;
  animation-duration:4s;
  -webkit-transform-origin:50% 50%;
  transform-origin:50% 50%;
}
.active .day .hour{
  -webkit-animation:hour-day  linear forwards ;
  -webkit-animation-delay:0s;
  -webkit-animation-duration:4s;
  animation:hour-day linear forwards;
  animation-delay:0s;
  animation-duration:4s;
  -webkit-transform-origin:50% 49.5%;
  transform-origin:50% 49.5%;
}

.active .day{
  -webkit-animation:day linear forwards ;
  -webkit-animation-delay:1.9s;
  -webkit-animation-duration:3s;
  animation:day linear forwards;
  animation-delay:1.9s;
  animation-duration:3s;
}

.active .night{
  -webkit-animation:night  linear forwards ;
  -webkit-animation-delay:2.9s;
  -webkit-animation-duration:3s;
  animation:night linear forwards;
  animation-delay:2.9s;
  animation-duration:3s;
}

.active .night .minute{
  -webkit-animation:minute-day  linear forwards ;
  -webkit-animation-delay:4s;
  -webkit-animation-duration:4s;
  animation:minute-day linear forwards;
  animation-delay:4s;
  animation-duration:4s;
  -webkit-transform-origin:50% 50%;
  transform-origin:50% 50%;
}
.active .night .hour{
  -webkit-animation:hour-day  linear forwards ;
  -webkit-animation-delay:4s;
  -webkit-animation-duration:4s;
  animation:hour-day linear forwards;
  animation-delay:4s;
  animation-duration:4s;
  -webkit-transform-origin:50% 49.5%;
  transform-origin:50% 49.5%;
}

.active .night .halo{
  -webkit-animation:fadeIn  linear forwards ;
  -webkit-animation-delay:6s;
  -webkit-animation-duration:.1s;
  animation:fadeIn linear forwards;
  animation-delay:6s;
  animation-duration:.1s;
}

.active .night .light{
  -webkit-animation:fadeIn  linear forwards ;
  -webkit-animation-delay:6.2s;
  -webkit-animation-duration:.3s;
  animation:fadeIn linear forwards;
  animation-delay:6.2s;
  animation-duration:.3s;
}

.active .present{
  -webkit-animation:fadeIndex100  linear forwards ;
  -webkit-animation-delay:8s;
  -webkit-animation-duration:1s;
  animation:fadeIndex100 linear forwards;
  animation-delay:8s;
  animation-duration:1s;
}

.active .present .car{
  -webkit-animation:fadeInRight  linear forwards ;
  -webkit-animation-delay:9s;
  -webkit-animation-duration:.5s;
  animation:fadeInRight linear forwards;
  animation-delay:9s;
  animation-duration:.5s;
}

.active .present .person{
  -webkit-animation:rotatePerson  linear forwards ;
  -webkit-animation-delay:10s;
  -webkit-animation-duration:1s;
  animation:rotatePerson linear forwards;
  animation-delay:10s;
  animation-duration:1s;
  -webkit-transform-origin:100% 50%;
  transform-origin:10% 50%;
  z-index: 10000;
}


.active .pt-txt{
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay:9.5s;
  animation-delay:9.5s;
}
.active .pt-txt2{
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay:10.5s;
  animation-delay:10.5s;
  opacity: 1;
}


/* 动画 */
@-webkit-keyframes day{
  0%{opacity: 1;}
  99%{opacity: 0;}
  100%{opacity: 0;}
}
@keyframes day{
  0%{opacity: 1;}
  99%{opacity: 0;}
  100%{opacity: 0;}
}

@-webkit-keyframes minute-day{
  0%{-webkit-transform:rotate(0deg);}
  20%{-webkit-transform:rotate(360deg);}
  40%{-webkit-transform:rotate(720deg);}
  80%{-webkit-transform:rotate(1080deg);}
  80%{-webkit-transform:rotate(1440deg);}
  100%{-webkit-transform:rotate(1800deg);}
}
@keyframes minute-day{
  0%{transform:rotate(0deg);}
  20%{transform:rotate(360deg);}
  40%{transform:rotate(720deg);}
  60%{transform:rotate(1080deg);}
  80%{transform:rotate(1440deg);}
  100%{transform:rotate(1800deg);}
}

@-webkit-keyframes hour-day{
  0%{-webkit-transform:rotate(0deg);}
  20%{-webkit-transform:rotate(30deg);}
  40%{-webkit-transform:rotate(60deg);}
  80%{-webkit-transform:rotate(90deg);}
  80%{-webkit-transform:rotate(120deg);}
  100%{-webkit-transform:rotate(150deg);}
}
@keyframes hour-day{
  0%{transform:rotate(0deg);}
  20%{transform:rotate(30deg);}
  40%{transform:rotate(60deg);}
  60%{transform:rotate(90deg);}
  80%{transform:rotate(120deg);}
  100%{transform:rotate(150deg);}
}

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

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


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

@-webkit-keyframes fadeIndex100{
  0%{opacity: 0;z-index: 100;}
  50%{opacity: 1;z-index: 100;}
  100%{opacity: 1;z-index: 100;}
}
@keyframes fadeIndex100{
  0%{opacity: 0;z-index: 100;}
  50%{opacity: 1;z-index: 100;}
  100%{opacity: 1;z-index: 100;}
}


@-webkit-keyframes fadeInRight{
  0%{opacity: 1;-webkit-transform:translateX(300px);z-index: 10;}
  100%{opacity: 1;-webkit-transform:translateX(0px);z-index: 10;}
}
@keyframes fadeInRight{
  0%{opacity: 1; transform:translateX(300px);z-index: 10;}
  100%{opacity: 1;transform:translateX(0px);z-index: 10;}
}

@-webkit-keyframes rotatePerson{
  0%{opacity: 1;-webkit-transform:rotateY(-90deg);}
  100%{opacity: 1;-webkit-transform:rotateY(0deg);z-index: 10000;}
}
@keyframes rotatePerson{
  0%{opacity: 1;transform:rotateY(-90deg);}
  100%{opacity: 1;transform:rotateY(0deg);z-index: 10000;}
}