@charset "UTF-8";
/* CSS Document */
  
/* 由左往右淡入動畫 */
  .fadeInLeftToRightAnimate{
    position: relative;
    opacity: 0;
    left: -6vw;
  }
  @-webkit-keyframes fadeInLeftToRightAnimate {
      0% {
          left: -3vw;
          opacity: 0;
      }
      100% {
          left: 0;
          opacity: 1;
      }
  }
  @keyframes fadeInLeftToRightAnimate {
      0% {
          left: -3vw;
          opacity: 0;
      }
      100% {
          left: 0;
          opacity: 1;
      }
  }
  .aos-animate.fadeInLeftToRightAnimate{
      animation: fadeInLeftToRightAnimate 1.0s forwards;
      -webkit-animation: fadeInLeftToRightAnimate 1.0s forwards;
  }
  

/* 由右往左淡入動畫 */
  .fadeInRightToLeftAnimate{
    position: relative;
    opacity: 0;
    right: -6vw;
  }
  @-webkit-keyframes fadeInRightToLeftAnimate {
      0% {
          right: -3vw;
          opacity: 0;
      }
      100% {
          right: 0;
          opacity: 1;
      }
  }
  @keyframes fadeInRightToLeftAnimate {
      0% {
          right: -3vw;
          opacity: 0;
      }
      100% {
          right: 0;
          opacity: 1;
      }
  }
  .aos-animate.fadeInRightToLeftAnimate{
      animation: fadeInRightToLeftAnimate 1.0s forwards;
      -webkit-animation: fadeInRightToLeftAnimate 1.0s forwards;
  }
  

/* 由上往下淡入動畫 */
  .haveAnimate,
  .fadeInTopToBottomAnimate{
    opacity: 0;
    transform: translate(0, -20px);
    -webkit-transform: translate(0, -20px);
  }
  @-webkit-keyframes fadeInTopToBottomAnimate {
      0% {
          transform: translate(0, -20px);
          -webkit-transform: translate(0, -20px);
          opacity: 0;
      }
      100% {
          transform: translate(0, 0);
          -webkit-transform: translate(0, 0);
          opacity: 1;
      }
  }
  @keyframes fadeInTopToBottomAnimate {
      0% {
          transform: translate(0, -20px);
          -webkit-transform: translate(0, -20px);
          opacity: 0;
      }
      100% {
          transform: translate(0, 0);
          -webkit-transform: translate(0, 0);
          opacity: 1;
      }
  }
  .aos-animate.swiper-slide-active .fadeInTopToBottomAnimate,
  .aos-animate.fadeInTopToBottomAnimate{
      animation: fadeInTopToBottomAnimate 1.0s forwards;
      -webkit-animation: fadeInTopToBottomAnimate 1.0s forwards;
  }

/* 純淡入動畫 */
  .onlyFadeInAnimate{
    opacity: 0;
    position: relative;

  }
  @-webkit-keyframes onlyFadeInAnimate {
      0% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }
  @keyframes onlyFadeInAnimate {
      0%{
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }
  .aos-animate .onlyFadeInAnimate{
      animation: onlyFadeInAnimate 1.0s forwards;
      -webkit-animation: onlyFadeInAnimate 1.0s forwards;
  }

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}


.aos-animate.delay-1s {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.aos-animate.delay-2s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.aos-animate.delay-3s {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.aos-animate.delay-4s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.aos-animate.delay-5s {
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}
.aos-animate.delay-6s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
.aos-animate.delay-7s {
  -webkit-animation-delay: 3.5s;
  animation-delay: 3.5s;
}
.aos-animate.delay-8s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
