#alCmnArrow {
  position: fixed;
  right: 24px;
  bottom: 15px;
  z-index: 5;
  opacity: 1;
  transform: translateY(100px);
}
@media (max-width: 1023px) {
  #alCmnArrow {
    right: 4vw;
  }
}
#alCmnArrow > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  transition: all 0.3s;
}
#alCmnArrow > a > img {
  width: 100%;
  height: 100%;
}

#alCmnArrow.UpMove {
  animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#alCmnArrow.DownMove {
  animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(100px);
  }
}