@charset "utf-8";
/* CSS Document */
/* Underline From Center */
.hvr-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: #ff2a00;
  height: 12px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
  left: 0;
  right: 0;
}
/* Underline From Center */
.hvr-underline-from-center01 {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-center01:before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: rgba(255,0,252,0.5);
  height: 135px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-center01:hover:before, .hvr-underline-from-center01:focus:before, .hvr-underline-from-center01:active:before {
  left: 0;
  right: 0;
}
/* Shrink */
.hvr-shrink {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

.shadow-pop-br:hover {
	-webkit-animation: shadow-pop-br 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
	        animation: shadow-pop-br 0.3s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-9-30 8:38:6
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shadow-pop-br
 * ----------------------------------------
 */
@-webkit-keyframes shadow-pop-br {
  0% {
    -webkit-box-shadow: 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000;
            box-shadow: 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
  100% {
    -webkit-box-shadow: 1px 1px #000000, 2px 2px #000000, 3px 3px #000000, 4px 4px #000000, 5px 5px #000000, 6px 6px #000000, 7px 7px #000000, 8px 8px #000000;
            box-shadow: 1px 1px #000000, 2px 2px #000000, 3px 3px #000000, 4px 4px #000000, 5px 5px #000000, 6px 6px #000000, 7px 7px #000000, 8px 8px #000000;
    -webkit-transform: translateX(-8px) translateY(-8px);
            transform: translateX(-8px) translateY(-8px);
  }
}
@keyframes shadow-pop-br {
  0% {
    -webkit-box-shadow: 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000;
            box-shadow: 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000, 0 0 #000000;
    -webkit-transform: translateX(0) translateY(0);
            transform: translateX(0) translateY(0);
  }
  100% {
    -webkit-box-shadow: 1px 1px #000000, 2px 2px #000000, 3px 3px #000000, 4px 4px #000000, 5px 5px #000000, 6px 6px #000000, 7px 7px #000000, 8px 8px #000000;
            box-shadow: 1px 1px #000000, 2px 2px #000000, 3px 3px #000000, 4px 4px #000000, 5px 5px #000000, 6px 6px #000000, 7px 7px #000000, 8px 8px #000000;
    -webkit-transform: translateX(-8px) translateY(-8px);
            transform: translateX(-8px) translateY(-8px);
  }
}


.wordlittle {

    /* animation 參數設定 */
    animation-name: MoveToRight;    /*動畫名稱，需與 keyframe 名稱對應*/
    animation-duration: 2s;    /*動畫持續時間，單位為秒*/
    animation-iteration-count: infinite;    /*動畫次數，infinite 為無限次*/    
}

@keyframes MoveToRight {
    0% { top:200px }
    25% { top:195px }
    50% { top:200px }
    75% { top:205px }
    100% { top:201px }
}

.coupon {

    /* animation 參數設定 */
    animation-name: movecoupon;    /*動畫名稱，需與 keyframe 名稱對應*/
    animation-duration: 3s;    /*動畫持續時間，單位為秒*/
    animation-iteration-count: infinite;    /*動畫次數，infinite 為無限次*/    
}

@keyframes movecoupon {
    0% { background-size: 100% auto;}
    10% { background-size: 95% auto; }
    20% { background-size: 100% auto; }
	
}

.rotall {

    /* animation 參數設定 */
    animation-name: rot;    /*動畫名稱，需與 keyframe 名稱對應*/
    animation-duration: 3s;    /*動畫持續時間，單位為秒*/
    animation-iteration-count: infinite;    /*動畫次數，infinite 為無限次*/    
}

@keyframes rot {
    0% { transform: rotate(5deg)}
    25% { transform: rotate(0deg) }
    50% { transform: rotate(-5deg) }
	75% { transform: rotate(0deg) }
    100% { transform: rotate(5deg) }
}