/*下移動*/
@keyframes down {
 from {
    top: -100px;
  }

  to {
    top: 0;
  }
}
/*縮小淡入*/
@keyframes scale-b-fade {
 from {
    transform: scale(1.2);
    opacity: 0.1;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}
/*放大淡出*/
@keyframes scale-b-out {
 0% {
    transform: scale(1);

  }


  to {
    transform: scale(1.2);

  }
}

/* 呼吸 */
@keyframes scale-s {
 from {
    transform: scale(1);
    
  }

  to {
    transform: scale(1.05);
   
  }
}
@keyframes scale {
 from {
    transform: scale(1.1);
    
  }

  to {
    transform: scale(1);
   
  }
}

/*淡入*/
@-webkit-keyframes fade {
  from {
    opacity: 0;
   
  }

  to {
    opacity: 1;

  }
}
@keyframes fade {
 from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*淡出*/
@-webkit-keyframes fade-out {
  from {
    opacity: 1;
   
  }

  to {
    opacity: 0;

  }
}
@keyframes fade-out {
 from {
    opacity:1 ;
  }
  to {
    opacity: 0;
  }
}
/*右邊快速進入*/
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(20%, 0, 0);
    transform: translate3d(20%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(20%, 0, 0);
    transform: translate3d(20%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
/*左邊進入*/
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/*上方進入*/

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
/*下方進入*/

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/*上方進入無淡入*/

@-webkit-keyframes InDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes InDown {
  from {

    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {

    -webkit-transform: none;
    transform: none;
  }
}
/* 上方無淡入離開 */
@-webkit-keyframes Inout {
  from {

    -webkit-transform: none;
    transform: none;
  }

  to {

    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes Inout {
  from {
    
    -webkit-transform: none;
    transform: none;
  }

  to {

    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

/*上方離開*/

@-webkit-keyframes fadeInout {
  from {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }
}

@keyframes fadeInout {
  from {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }
}
/*左方離開*/

@-webkit-keyframes fadeleftout {
  from {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

  to {
    opacity: 0.4;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }
}

@keyframes fadeleftout {
  from {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

  to {
    opacity: 0.4;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }
}
/*下方離開*/

@-webkit-keyframes fadeUpout {
  from {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
  }
}

@keyframes fadeUpout {
  from {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
  }
}





/*top進入*/
@-webkit-keyframes top {
  from {
    top: 0px;
  }

  to {
 
    top: -80px;
  }
}

@keyframes top {
  from {
    top: 0px;
  }

  to {
 
    top: -80px;
  }
}
/*左移進入*/
@-webkit-keyframes left {
  from {
    left: 0px;
  }

  to {
   left: -80px;
  }
}

@keyframes left {
  from {
    left: 0px;
  }

  to {
    left: -80px;
  }
}

/*bottom進入*/
@-webkit-keyframes bottom {
  from {
    transform: translateY(100px)  rotate(-6deg);;
  }

  to {
    transform: translateY(0px)  rotate(-6deg);;
  }
}

@keyframes bottom {
  from {
    transform: translateY(100px)  rotate(-6deg);;
  }

  to {
    transform: translateY(0px)  rotate(-6deg);;
  }
}

/*下方上移*/
@-webkit-keyframes top-up {
  from {
    top: 0px;
  }

  to {
 
    top: -50px;
  }
}

@keyframes top-up{
  from {
    top: 0px;
  }

  to {
 
    top: -50px;
  }
}

/*線條打開*/
@-webkit-keyframes line {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes line {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}
/*線條打開2*/
@-webkit-keyframes line2 {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes line2 {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}
/* 線條關閉 */
@keyframes line-out {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}
@-webkit-keyframes line-out {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}
/*旋轉*/
@-webkit-keyframes rotate {
  from {
    transform: rotate(0deg);
  }

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


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

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

/*縮小放大*/
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}
/*放大縮小*/
  @-webkit-keyframes pulseS {
    0% {
      opacity: 0;
      -webkit-transform:scale(1.3, 1.3);
      -moz-transform:scale(1.3, 1.3); 
      -ms-transform:scale(1.3, 1.3);
      -o-transform:scale(1.3, 1.3);
      transform:scale(1.3, 1.3)
    }
    100% {
      opacity: 1;
      -webkit-transform:scale(1, 1); 
      -moz-transform:scale(1, 1); 
      -ms-transform:scale(1, 1); 
      -o-transform:scale(1, 1); 
      transform:scale(1, 1)
    }
  }
  @-moz-keyframes pulseS {
    0% {
      opacity: 0;
      -webkit-transform:scale(1.3, 1.3);
      -moz-transform:scale(1.3, 1.3); 
      -ms-transform:scale(1.3, 1.3);
      -o-transform:scale(1.3, 1.3);
      transform:scale(1.3, 1.3)
    }
    100% {
      opacity: 1;
      -webkit-transform:scale(1, 1); 
      -moz-transform:scale(1, 1); 
      -ms-transform:scale(1, 1); 
      -o-transform:scale(1, 1); 
      transform:scale(1, 1)
    }
  }
  @-o-keyframes pulseS {
     0% {
      opacity: 0;
      -webkit-transform:scale(1.3, 1.3);
      -moz-transform:scale(1.3, 1.3); 
      -ms-transform:scale(1.3, 1.3);
      -o-transform:scale(1.3, 1.3);
      transform:scale(1.3, 1.3)
    }
    100% {
      opacity: 1;
      -webkit-transform:scale(1, 1); 
      -moz-transform:scale(1, 1); 
      -ms-transform:scale(1, 1); 
      -o-transform:scale(1, 1); 
      transform:scale(1, 1)
    }
  }

  @keyframes pulseS {
     0% {
      opacity: 0;
      -webkit-transform:scale(1.3, 1.3);
      -moz-transform:scale(1.3, 1.3); 
      -ms-transform:scale(1.3, 1.3);
      -o-transform:scale(1.3, 1.3);
      transform:scale(1.3, 1.3)
    }
    100% {
      opacity: 1;
      -webkit-transform:scale(1, 1); 
      -moz-transform:scale(1, 1); 
      -ms-transform:scale(1, 1); 
      -o-transform:scale(1, 1); 
      transform:scale(1, 1)
    }
  }

/*滑鼠移標*/
@-webkit-keyframes mouse {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
    
  }

  to {
    opacity: 1;
     -webkit-transform: none;
    transform: none;
  }
}

@keyframes mouse {
   from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
    
  }

  to {
    opacity: 1;
     -webkit-transform: none;
    transform: none;
  }
}
/*縮小*/
@keyframes scale-b {
 from {
    transform: scale(1.2);
  }

  to {
    transform: scale(1);
  }
}

/* 文字間距 */

@keyframes word {
  from {
    letter-spacing: 5px;
    transform: scale(1.05);
  }

  to {
    letter-spacing: 2px;
    transform: scale(1);
  }
}

/* 煙火縮小綻放 */
@keyframes firework {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }
  100%{
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes firework2-1 {
  0% {
    transform: scale(0);
  }

  60% {
    transform: scale(1);
    opacity: 1;
  }
  100%{
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes firework2-2 {
  0% {
    transform: scale(0);
  }

  60% {
    transform: scale(1);
    opacity: 1;
  }
  100%{
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes firework2-3 {
  0% {
    transform: scale(0);
  }

  80% {
    transform: scale(1);
    opacity: 1;
  }
  100%{
    transform: scale(1);
    opacity: 0;
  }
}
/* 波浪 */
@keyframes waves{
  0% {
    -webkit-transform: translate3d(0px, 10px, 0);
    transform: translate3d(0px, 10px, 0);
  }


  50%{
    -webkit-transform: translate3d(-100px, 0%, 0);
    transform: translate3d(-100px, 0%, 0);
  }

  100%{
    -webkit-transform: translate3d(-200px, 10px, 0);
    transform: translate3d(-200px, 10px, 0);
  }
}



@keyframes waves2{
  0% {
    -webkit-transform: translate3d(0px, 0%, 0);
    transform: translate3d(0px, 0%, 0);
  }


  50%{
    -webkit-transform: translate3d(100px, 0%, 0);
    transform: translate3d(100px, 0%, 0);
  }

  100%{
    -webkit-transform: translate3d(200px, 0%, 0);
    transform: translate3d(200px, 0%, 0);
  }
}





/* 地球旋轉 */

@keyframes rotate2{
  0% {
    transform: rotate3d(1,1,0,450deg)  scale(1);
  }  
  50% {
    transform: rotate3d(0,0,0,225deg)  scale(1.05);
  }

  100%{
    transform: rotate3d(-1,-1,0,0deg)  scale(1.1);
  }
}


/* 字的遮罩右移 */

@keyframes right-out{
  0% {
    right: 0;
  }  


  100%{
    right: -100%;
  }
}

/* banner箭頭上下移動 */
@keyframes fadeUpout-banner-arrow {
  from {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

  to {
    opacity: 0.4;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }
}

/* 寬度100%-50% */
@keyframes width-50{
  from {
    width: 100%;
  }

  to {
    width: 50%;
  }
}


/* 位子上移 */
@keyframes translate-top{
  from {
    transform: translateY(0px);
  }

  to {
    transform: translateY(-100px);
  }
}

@keyframes arrow-left {
  from {
    opacity: 0.6;
    -webkit-transform: none;
    transform: none;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(-5px,0, 0);
    transform: translate3d(-5px, 0, 0);
  }
}

@keyframes arrow-right {
  from {
    opacity: 0.6;
    -webkit-transform: none;
    transform: none;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(5px,0, 0);
    transform: translate3d(5px, 0, 0);
  }
}

/* rotateY轉一圈 */
@keyframes swing {
  from {
    
      transform: rotateY(0deg)
  }

  to {
    
      transform: rotateY(360deg)
  }
}



@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes index-contact-list-rotate{
  0%{
    opacity: 0;
    transform: rotate(20deg) ;
  }
  10%{
    opacity: 1;
    transform: rotate(-20deg) ;
  }
  25%{
    opacity: 1;
    transform: rotate(10deg) ;
  }
  40%{
    opacity: 1;
    transform: rotate(-10deg) ;
  }
  60%{
    opacity: 1;
    transform: rotate(5deg) ;
  }
  80%{
    opacity: 1;
    transform: rotate(-5deg) ;
  }
  90%{
    opacity: 1;
    transform: rotate(0deg) ;
  }
  100%{
    opacity: 1;
    transform: rotate(0deg) ;
  }
}

/* 往下方移動 */
@keyframes bottom-move{
  from {
    bottom: 0px;
  }

  to {
    bottom: -100px;
  }
}

/*下一頁*/
@keyframes next-arrow {
  from {
    opacity: .4;
    -webkit-transform: none;
    transform: none;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }
}
/*上一頁*/
@keyframes prev-arrow {
  from {
    opacity: .4;
    -webkit-transform: none;
    transform: none;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }
}


/*banner*/

@-webkit-keyframes banner-fadein {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
  }

  30% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100%{
     opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }
  
}

@keyframes banner-fadein {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
    transform: translate3d(0, 20%, 0);
  }

  30% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
   80% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100%{
     opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }
}
/*文字效果*/
@keyframes loading-word{
  0% {
    opacity: 0;
    transform: translate(-25px,50px) rotate(25deg);
  }  

  100%{
    opacity: 1;
     transform: translate(0px,0px) rotate(0deg);
  }
}

@keyframes tadmin--login-circular-svg {
 from {
        stroke-dashoffset: 1492;
  }

  to {
        stroke-dashoffset: 0;
  }
}
@keyframes tadmin--login-circular-svg2 {
 from {
        stroke-dasharray: 240;
  }

  to {
      stroke-dasharray: 215;
  }
}


/*右邊快速進入*/
@-webkit-keyframes InLeft2 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
  }
  to {
    opacity: 0.2;
    -webkit-transform: none;
    transform: none;
  }
}


@keyframes bounceInUp {
    0%,60%,75%,90%,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0,100px,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0,-10px,0)
    }

    75% {
        transform: translate3d(0,10px,0)
    }

    90% {
        transform: translate3d(0,-5px,0)
    }

    to {
        transform: translateZ(0)
    }
}



@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotateX(-20deg);
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        transform: perspective(400px)
    }
}


/*按鈕hover*/
@-webkit-keyframes hover-cmn-slide-tween-1 { 
  0% 
    { -webkit-transform-origin: top left; transform-origin: top left;
    -webkit-transform: scaleX(0);
            transform: scaleX(0); 
    }
  100% 
    { -webkit-transform-origin: top left; transform-origin: top left;
    -webkit-transform: scaleX(1);
            transform: scaleX(1); } 
    }
@keyframes hover-cmn-slide-tween-1 { 
  0% 
  { -webkit-transform-origin: top left; transform-origin: top left;
    -webkit-transform: scaleX(0);
            transform: scaleX(0); 
    }
  100% 
  { -webkit-transform-origin: top left; transform-origin: top left;
    -webkit-transform: scaleX(1);
            transform: scaleX(1); } 
  }

@-webkit-keyframes hover-cmn-slide-tween-2 { 
  0% { -webkit-transform-origin: top right; transform-origin: top right;
    -webkit-transform: scaleX(1);
            transform: scaleX(1); 
          }
  100% { -webkit-transform-origin: top right; transform-origin: top right;
    -webkit-transform: scaleX(0);
            transform: scaleX(0); } 
          }

@keyframes hover-cmn-slide-tween-2 { 
  0% 
  { -webkit-transform-origin: top right; transform-origin: top right;
    -webkit-transform: scaleX(1);
            transform: scaleX(1); 
          }
  100% 
  { -webkit-transform-origin: top right; transform-origin: top right;
    -webkit-transform: scaleX(0);
            transform: scaleX(0); } 
  }

@keyframes loading-right{
  from {
    left: 0;
  }

  to {
 
    left: 100%;
  }
}


@keyframes circular-rotate{
  0%{
    transform: rotate(0deg) ;
  }
  
  100%{
    transform: rotate(360deg) ;
  }
}


@keyframes coin-rotate{
  0%{
    transform: rotateY(90deg);
  }
  
  100%{
    transform: rotateY(0deg) ;
  }
}


@keyframes mask-right-out{
  0%{
    right: 0;
  }
  
  100%{
    right: -100%;
  }
}



@keyframes mask-right-in-out {
  0% {
      transform: scale(0,1) translateX(0);

  }
  50% {
      transform: scale(1,1) translateX(0);
    
  }
  99% {
     transform: scale(1,1) translateX(100%);
  }
  100% {
  
     transform: scale(1,1) translateX(100%);
  }
}