html {
  font-size: 100px;
}

/* .container {
  width: 100%;
} */


/* 特效层 */
.effect {
  width: 7.5rem;
  height: 100vh;
  background: url(../images/cloud-bg.png);
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 333;
  animation: cloudHide 2s linear;
}

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

  100% {
    opacity: 0;
  }
}

.effect .cloud-top {
  width: 10rem;
  height: 6.45rem;
  background: url(../images/cloud.png);
  background-size: cover;
  position: absolute;
  top: -1rem;
  right: 3rem;
  scale: 2;
  z-index: 999;
  animation: moveRight 2s linear;
}

.effect .cloud-bottom {
  width: 10rem;
  height: 6.45rem;
  background: url(../images/cloud.png);
  background-size: cover;
  position: absolute;
  bottom: 0;
  right: 2rem;
  scale: 2;
  z-index: 999;
  animation: moveLeft 2s linear;
}

@keyframes moveRight {
  0% {
    right: 3rem
  }

  100% {
    right: -20rem;
    opacity: 0;
  }
}

@keyframes moveLeft {
  0% {
    right: 2rem
  }

  100% {
    right: 13rem;
  }
}