/*-----------------------------------------------------*/
/* 上移顯示動畫 */
@keyframes up_show {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*下移消失動畫*/
@keyframes down_hide {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(50%);
  }
}

.animation-show-up-def{
	opacity: 0;
	transform: translateY(50%);
}
.animation-show-up-1{
	animation: up_show 0.5s forwards;
}

.animation-show-up-2{
	animation: up_show 1s forwards;
}

.animation-show-up-3{
	animation: up_show 1.5s forwards;
}

.animation-show-up-4{
  animation: up_show 2s forwards;
}

/*-----------------------------------------------------*/
/* 進入頁面顯示LOGO */
@keyframes fadeout_hide {
  0% {
    opacity: 1;    
  }
  100% {
    opacity: 0;
  }
}

.fadeout-hide-1{
	opacity: 1;
	animation: fadeout_hide 1s forwards;
}
/*-----------------------------------------------------*/

/*-----------------------------------------------------*/
/*旋轉消失顯示*/
@keyframes rotate-and-disappear {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0;
  }
}

@keyframes rotate-and-appear {
  0% {
    transform: rotate(0deg);
    opacity: 0;
  }
  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}

.rotate-and-disappear {
  animation: rotate-and-disappear 0.3s ease forwards !important;
}

.rotate-and-appear {
  animation: rotate-and-appear 1s ease forwards;
}
/*-----------------------------------------------------*/

.hidden {
  display: none;
}