.motion.showAreaDown {
  margin-top: -80px;
  opacity: 0;
}

.motion.showAreaDown.on {
  animation: fadeInDown 0.6s forwards;
}

.motion.showAreaUp {
  margin-top: 80px;
  opacity: 0.1;
}

.motion.showAreaUp.on {
  animation: fadeInUp 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1);
}

.motion.showLeftMove {
  margin-left: -80px;
  opacity: 0;
}

.motion.showLeftMove.on {
  animation: leftMove 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1);
}

.motion.showRightMove {
  margin-left: 80px;
  opacity: 0;
}

.motion.showRightMove.on {
  animation: rightMove 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}

@keyframes leftMove {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    margin-left: 0;
  }
}

@keyframes rightMove {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    margin-left: 0;
  }
}

.fadeIn {
  transition: opacity 0.2s;
  opacity: 0;
}

.fadeIn.show {
  opacity: 1;
}

.scrTextMotion {
  transition: all 1s;
}

.scrTextMotion.Up {
  transform: translateY(0);
}

.scrTextMotion.Down {
  transform: translateY(-25px);
}

.scrBgMotion {
  transition: all 1.2s;
  background-size: 120%;
  background-position-y: 0;
}

.scrBgMotion.Up {
  background-position-y: 50%;
}

.scrBgMotion.Down {
  background-position-y: 100%;
}

.showAreaBg {
  bottom: -160px;
  opacity: 0;
  transition: all 0.6s 0.2s;
}

.showAreaBg.on {
  bottom: -126px;
  opacity: 1;
}