@charset "UTF-8";

.top_zoomIn {
  animation-name: top_zoomIn;
  animation-duration: .5s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes top_zoomIn {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.slideInLeft {
  opacity: 0;
  animation-name: slideInLeft;
  animation-duration: .4s;
  animation-delay: .5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes slideInLeft {
  from {
    transform: translate(-50%, 0);
    opacity: 0;
  }

  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

.slideInRight {
  opacity: 0;
  animation-name: slideInRight;
  animation-duration: .4s;
  animation-delay: .5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes slideInRight {
  from {
    transform: translate(50%, 0);
    opacity: 0;
  }

  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

.circleRotate-1 {
  animation: circleRotate-1 6s infinite linear;
}

@keyframes circleRotate-1 {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(90deg);
  }

  30% {
    transform: rotate(90deg); /* 停止 */
  }

  50% {
    transform: rotate(180deg);
  }

  60% {
    transform: rotate(180deg); /* 停止 */
  }

  80% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.circleRotate-2 {
  animation: circleRotate-2 8s infinite linear;
}

@keyframes circleRotate-2 {
  0% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(-60deg);
  }

  20% {
    transform: rotate(-60deg); /* 停止 */
  }

  45% {
    transform: rotate(-180deg);
  }

  55% {
    transform: rotate(-180deg); /* 停止 */
  }

  70% {
    transform: rotate(-270deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.circleRotate-3 {
  animation: circleRotate-3 10s infinite linear;
}

@keyframes circleRotate-3 {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(90deg);
  }

  40% {
    transform: rotate(90deg); /* 停止 */
  }

  55% {
    transform: rotate(180deg);
  }

  65% {
    transform: rotate(180deg); /* 停止 */
  }

  90% {
    transform: rotate(330deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.circleRotate-4 {
  animation: circleRotate-4 12s infinite linear;
}

@keyframes circleRotate-4 {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(-120deg);
  }

  35% {
    transform: rotate(-120deg); /* 停止 */
  }

  60% {
    transform: rotate(-240deg);
  }

  75% {
    transform: rotate(-240deg); /* 停止 */
  }

  100% {
    transform: rotate(-360deg);
  }
}

.d1 {
  animation-delay: 0s;
}

.d2 {
  animation-delay: 0.1s;
}

.d3 {
  animation-delay: 0.2s;
}

.d4 {
  animation-delay: 0.3s;
}

.d5 {
  animation-delay: 0.4s;
}

.d6 {
  animation-delay: 0.5s;
}

.d7 {
  animation-delay: 0.6s;
}

.t1 {
  opacity: 0;
  animation-name: t1-left;
  animation-duration: .5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes t1-left {
  from {
    transform: translate3d(-50%, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}


.t2 {
  opacity: 0;
  animation-name: t2_opacity;
  animation-duration: 0.2s;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes t2_opacity {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.t3 {
  opacity: 0;
  animation-name: t3_opacity;
  animation-duration: 0.2s;
  animation-delay: 1.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes t3_opacity {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}