/* 首屏动效 */
@keyframes blueLineRotate {
  0% {
    opacity: 1;
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }

  12% {
    opacity: 1;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
  }

  13% {
    opacity: 0;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
  }

  25% {
    opacity: 0;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
  }

  26% {
    opacity: 1;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
  }

  38% {
    opacity: 1;
    transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }

  100% {
    opacity: 1;
    transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
}
@keyframes greenLineRotate {
  0% {
    opacity: 1;
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }

  13% {
    opacity: 1;
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }

  28% {
    opacity: 1;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
  }

  29% {
    opacity: 0;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
  }

  50% {
    opacity: 0;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
  }

  51% {
    opacity: 1;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
  }

  63% {
    opacity: 1;
    transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }

  100% {
    opacity: 1;
    transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
}
@keyframes purpleLineRotate {
  0% {
    opacity: 1;
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }

  38% {
    opacity: 1;
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
  }

  51% {
    opacity: 0;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
  }

  75% {
    opacity: 0;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
  }

  76% {
    opacity: 1;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
  }

  88% {
    opacity: 1;
    transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }

  100% {
    opacity: 1;
    transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
}
@keyframes redLineRotate {
  0% {
    opacity: 1;
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }

  62% {
    opacity: 1;
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }

  63% {
    opacity: 1;
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
  }

  75% {
    opacity: 1;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
  }

  76% {
    opacity: 0;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
  }

  88% {
    opacity: 0;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
  }

  89% {
    opacity: 1;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
  }

  100% {
    opacity: 1;
    transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
  }
}
/* 第一模块动效 */
@keyframes lineMove {
  0%{
    width: 20%;
    left: 40%;
    top: 33%;
    opacity: 0;
  }
  1% {
    width: 20%;
    left: 40%;
    top: 33%;
    opacity: 1;
  }
  99%{
    width: 80%;
    left: 10%;
    top: 3%;
    opacity: 0;
  }
  100% {
    width: 80%;
    left: 10%;
    top: 3%;
    opacity: 0;
  }
}
@keyframes phoneApper1 {
  0% {
    top: 35%;
    opacity: 0;
  }

  100% {
    top: 15%;
    opacity: 1;
  }
}
@keyframes shadowApper1 {
  0% {
    top: 30%;
    opacity: 0;
  }

  100% {
    top: 10%;
    opacity: 0.7;
  }
}
@keyframes transApper {
  0% {
    top: 4%;
    opacity: 0;
  }

  100% {
    top: 0;
    opacity: 1;
  }
}
@keyframes musicApper {
  0% {
    opacity: 1;
  }

  100% {
    transform: translateX(50%);
    -o-transform: translateX(50%);
    -ms-transform: translateX(50%);
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    opacity: 1;
  }
}
@keyframes fileApper1 {
  0% {
    opacity: 1;
  }

  100% {
    transform: translateX(200%);
    -o-transform: translateX(200%);
    -ms-transform: translateX(200%);
    -webkit-transform: translateX(200%);
    -moz-transform: translateX(200%);
    opacity: 1;
  }
}
@keyframes videoApper {
  0% {
    opacity: 1;
  }

  100% {
    transform: translateX(300%);
    -o-transform: translateX(300%);
    -ms-transform: translateX(300%);
    -webkit-transform: translateX(300%);
    -moz-transform: translateX(300%);

    opacity: 1;
  }
}
@keyframes game2Apper {
  0% {
    opacity: 1;
  }

  100% {
    transform: translateX(50%);
    -o-transform: translateX(50%);
    -ms-transform: translateX(50%);
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    opacity: 1;
  }
}
@keyframes picApper {
  0% {
    opacity: 1;
  }

  100% {
    transform: translateX(180%);
    -o-transform: translateX(180%);
    -ms-transform: translateX(180%);
    -webkit-transform: translateX(180%);
    -moz-transform: translateX(180%);
    opacity: 1;
  }
}
@keyframes gameShow {
  0% {
    opacity: 0;
  }

  100% {
    transform: translateX(350%);
    -o-transform: translateX(350%);
    -ms-transform: translateX(350%);
    -webkit-transform: translateX(350%);
    -moz-transform: translateX(350%);
    opacity: 1;
  }
}
@keyframes appApper {
  0% {
    opacity: 0;
  }

  100% {
    transform: translateX(750%);
    -o-transform: translateX(750%);
    -ms-transform: translateX(750%);
    -webkit-transform: translateX(750%);
    -moz-transform: translateX(750%);
    opacity: 1;
  }
}
/* 第二模块动效 */
@keyframes phoneApper2 {
  0% {
    opacity: 0;
    top: 50%;
  }

  100% {
    opacity: 1;
    top: 40%;
  }
}
@keyframes shadowApper2 {
  0% {
    opacity: 0;
    top: 55%;
    z-index: 1;
  }

  100% {
    top: 45%;
    opacity: 0.7;
    z-index: 1;
  }
}
@keyframes allApper1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes ballMove1 {
  0% {
    opacity: 1;
  }

  25% {
    transform: translateY(-15%);
    -o-transform: translateY(-15%);
    -ms-transform: translateY(-15%);
    -webkit-transform: translateY(-15%);
    -moz-transform: translateY(-15%);
  }

  50% {
    transform: translateY(0%);
    -o-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
  }

  75% {
    transform: translateY(15%);
    -o-transform: translateY(15%);
    -ms-transform: translateY(15%);
    -webkit-transform: translateY(15%);
    -moz-transform: translateY(15%);
  }

  100% {
    transform: translateY(0%);
    -o-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    opacity: 1;
  }
}

/* //第三模块动效 */
@keyframes phoneApper3 {
  0% {
    opacity: 0;
    top: 65%;
  }

  100% {
    opacity: 1;
    top: 45%;
  }
}
@keyframes shadowApper3 {
  0% {
    opacity: 0;
    top: 65%;
  }

  100% {
    opacity: 0.5;
    top: 27%;
  }
}
@keyframes lightApper {
  0% {
    top: 20%;
    opacity: 0;
  }

  100% {
    top: 20%;
    opacity: 1;
  }
}
@keyframes fileApper {
  0% {
    top: 80%;
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
/* 第四模块动效 */
@keyframes phoneApper4 {
  0% {
    opacity: 0;
    top: 35%;
  }

  100% {
    opacity: 1;
    top: 15%;
  }
}
@keyframes shadowApper4 {
  0% {
    opacity: 0;
    top: 30%;
  }

  100% {
    opacity: 1;
    top: 10%;
  }
}
@keyframes musicApper1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes filletApper1 {
  0% {
    opacity: 0;
    width: 30%;
    top: 29%;
    left: 14%;
  }

  100% {
    width: 50%;
    top: 27%;
    left: 16%;
    opacity: 1;
  }
}
@keyframes wrapApper {
  0% {
    opacity: 0;
    width: 26%;
    height: 10%;
    top: 30%;
    left: 20%;
  }

  100% {
    opacity: 1;
    width: 42%;
    height: 130px;
    top: 30%;
    left: 20%;
  }
}
@keyframes picMove4 {
  0% {
    left: 0;
    opacity: 1;
  }

  20% {
    left: 0;
  }

  60% {
    left: -70%;
  }

  100% {
    left: -70%;
    opacity: 1;
  }
}
/* 第五模块动效 */
@keyframes phoneApper5 {
  0% {
    opacity: 0;
    top: 30%;
  }

  100% {
    opacity: 1;
    top: 10%;
  }
}
@keyframes shadowApper5 {
  0% {
    opacity: 0;
    top: 25%;
  }

  100% {
    opacity: 0.7;
    top: 5%;
  }
}
@keyframes scaleApper {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes btnUp {
  0% {
    opacity: 1;
    transform: translateY(0%);
  }

  100% {
    opacity: 1;
    transform: translateY(-110%);
  }
}
@keyframes btnDown {
  0% {
    opacity: 1;
    transform: translateY(0%);
  }

  100% {
    opacity: 1;
    transform: translateY(90%);
  }
}
@keyframes lineUp2 {
  0% {
    height: 55%;
    top: 45%;
  }

  100% {
    height: 80%;
    top: 20%;
  }
}
@keyframes lineUp3 {
  0% {
    height: 60%;
    top: 40%;
  }

  100% {
    height: 90%;
    top: 10%;
  }
}
@keyframes lineUp5 {
  0% {
    height: 30%;
    top: 70%;
  }

  100% {
    height: 70%;
    top: 30%;
  }
}
@keyframes lineDown1 {
  0% {
    height: 70%;
    top: 30%;
  }

  100% {
    height: 40%;
    top: 60%;
  }
}
@keyframes lineDown4 {
  0% {
    height: 80%;
    top: 20%;
  }

  100% {
    height: 46%;
    top: 53%;
  }
}
@keyframes changeGreen {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes changeWhite {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@keyframes tableApper {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* 第六模块动效 */
@keyframes phoneApper6 {
  0% {
    opacity: 0;
    top: 35%;
  }

  100% {
    opacity: 1;
    top: 15%;
  }
}
@keyframes shadowApper6 {
  0% {
    opacity: 0;
    top: 25%;
  }

  100% {
    opacity: 1;
    top: 5%;
  }
}
@keyframes wrapApper6 {
  0% {
    opacity: 0.7;
    top: 40%;
  }

  100% {
    top: 21%;
    opacity: 1;
  }
}
@keyframes otherShow6 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes otherMove6 {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  25% {
    transform: translateY(-20%);
  }

  50% {
    transform: translateY(0);
  }

  75% {
    transform: translateY(20%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes navApper6 {
  0% {
    opacity: 0;
    width: 12%;
    height: 1%;
    left: 30%;
  }

  100% {
    opacity: 1;
  }
}
@keyframes picMove6 {
  0% {
    left: 0;
    opacity: 1;
  }

  26% {
    left: 0;
  }

  37% {
    left: -109%;
  }

  63% {
    left: -109%;
  }

  74% {
    left: -218%;
  }

  100% {
    left: -218%;
    opacity: 1;
  }
}
@keyframes spanMove {
  0% {
    left: 18.5%;
    opacity: 1;
  }

  26% {
    left: 18.5%;
  }

  37% {
    left: 46.5%;
  }

  63% {
    left: 46.5%;
  }

  74% {
    left: 77%;
  }

  100% {
    left: 77%;
    opacity: 1;
  }
}