//-----------------動畫用-----------------//
//animation: rightAnimationRotate180 1.8s 0s ease infinite;

@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate360R {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

@keyframes scrollUp {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes scrollDown {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(5px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes scrollDown2 {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes downAnimation {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(5px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes rightAnimation {
  0% {
    transform: translateX(0px);
  }

  50% {
    transform: translateX(5px);
  }

  100% {
    transform: translateX(0px);
  }
}

@keyframes leftAnimation {
  0% {
    transform: translateX(0px);
  }

  50% {
    transform: translateX(-5px);
  }

  100% {
    transform: translateX(0px);
  }
}

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

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes moveRight {
  0% {
    background-position: left center;
  }

  100% {
    background-position: right center;
  }
}

@keyframes pulsate2 {
  0% {
    transform: translate(50%, -50%) scale(1);
    opacity: 0.1;
  }

  50% {
    transform: translate(50%, -50%) scale(100);
    opacity: 0.1;
  }

  100% {
    transform: translate(50%, -50%) scale(200);
    opacity: 0.0;
  }
}

@keyframes bgAnimation {
  0% {
    background-position: 0;
  }

  100% {
    background-position: 150%;
  }
}

//-----------------動畫用-----------------//