@charset "utf-8";
/* CSS Document */

.animated {
  animation-duration: 2s;
  animation-fill-mode: both;
}

.animated.zoomIn {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

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

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



.wrap {position: absolute; width: 100px;height: 200px; left: -32%; top: 60%;}

@media screen and (max-width:767px){
			.wrap { position: absolute;top: 28%; left: -2%; width: 43%;height: 33%; z-index: 0;		}
	}

.drop {
  width: 40px;
  height: 40px;
  left: 50%;
  margin-left: -20px;
  position: absolute;
  -webkit-animation: drop 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s infinite;
          animation: drop 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s infinite;
}

.drop circle {
  fill: #2a96ed;
}

.drop-outer {
  position: absolute;
  box-sizing: border-box;
  /* border: 1px solid #333; */
  width: 100px;
  height: 200px;
  overflow: hidden;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  background-clip: padding-box;
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

.ripple {
  position: absolute;
  box-sizing: border-box;
  width: 1216px;
  height: 208px;
  top: 68px;
  left: -70px;
  perspective: 100;
  transform: rotateX(65deg);
}
@media screen and (max-width:767px){
			.ripple  {position:absolute;top:79%; left:0%; width:90%; height:44%; z-index:995;}
			
	}




.ripple-1 {
  -webkit-animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s infinite;
          animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s infinite;
}

.ripple-1 .ripple-svg {
  -webkit-animation: fade-in-out 2s linear 0s infinite;
          animation: fade-in-out 2s linear 0s infinite;
}

.ripple-1 .ripple-svg circle {
  -webkit-animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s infinite;
          animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s infinite;
}

.ripple-2 {
  -webkit-animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s infinite;
          animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s infinite;
}

.ripple-2 .ripple-svg {
  -webkit-animation: fade-in-out 2s linear 0.2s infinite;
          animation: fade-in-out 2s linear 0.2s infinite;
}

.ripple-2 .ripple-svg circle {
  -webkit-animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s infinite;
          animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s infinite;
}

.ripple-3 {
  -webkit-animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s infinite;
          animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s infinite;
}

.ripple-3 .ripple-svg {
  -webkit-animation: fade-in-out 2s linear 0.35s infinite;
          animation: fade-in-out 2s linear 0.35s infinite;
}

.ripple-3 .ripple-svg circle {
  -webkit-animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s infinite;
          animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s infinite;
}

.ripple-4 {
  -webkit-animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s infinite;
          animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s infinite;
}

.ripple-4 .ripple-svg {
  -webkit-animation: fade-in-out 2s linear 0.35s infinite;
          animation: fade-in-out 2s linear 0.35s infinite;
}

.ripple-4 .ripple-svg circle {
  -webkit-animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s infinite;
          animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s infinite;
}

@-webkit-keyframes drop {
  0% {
    transform: scale3d(0.01,0.01,0.01) translateY(0)
  }
  10% {
    transform: scale3d(1,1,1) 
  }
  44% {
    transform: scale3d(1,1,1) translateY(200px)
  }
  100% {
    transform: scale3d(1,1,1) translateY(200px)
  }
}



@keyframes drop {
  0% {
    transform: scale3d(0.01,0.01,0.01) translateY(0)
  }
  10% {
    transform: scale3d(1,1,1) 
  }
  44% {
    transform: scale3d(1,1,1) translateY(200px)
  }
  100% {
    transform: scale3d(1,1,1) translateY(200px)
  }
}

@-webkit-keyframes fade-in-out {
  0% {opacity: 0}
  42% {opacity: 0}
  52% {opacity: 1}
  65% {opacity: 1}
  100% {opacity: 0}
}

@keyframes fade-in-out {
  0% {opacity: 0}
  42% {opacity: 0}
  52% {opacity: 1}
  65% {opacity: 1}
  100% {opacity: 0}
}

@-webkit-keyframes ripple {
  0% { transform: rotateX(65deg) scale3d(0.2, 0.2, 0.2) }
  42% { transform: rotateX(65deg) scale3d(0.2, 0.2, 0.2) }
  100% { transform: rotateX(65deg) scale3d(0.9, 0.9, 0.9) }
}

@keyframes ripple {
  0% { transform: rotateX(65deg) scale3d(0.2, 0.2, 0.2) }
  42% { transform: rotateX(65deg) scale3d(0.2, 0.2, 0.2) }
  100% { transform: rotateX(65deg) scale3d(0.9, 0.9, 0.9) }
}

@-webkit-keyframes border {
  0% { stroke-width: 6px }
  42% { stroke-width: 6px }
  100% {stroke-width: 2px }
}

@keyframes border {
  0% { stroke-width: 6px }
  42% { stroke-width: 6px }
  100% {stroke-width: 2px }
}






/*斜向來回滑動*/
.slideInLeft1 {
			-webkit-animation:slideInLeft2 5.5s ease infinite ;
					animation:slideInLeft2 5.5s ease infinite ;
}
@keyframes slideInLeft2 {
	  0%  {opacity:1;-webkit-transform:translate(0px, 0px);transform:translate(0px, 0px)}
	  50%  {opacity:1;-webkit-transform:translate(-30px, -10px);transform:translate(-30px, -10px)}
	 75%  {opacity:1;-webkit-transform:translate(-20px, 10px);transform:translate(-20px, 10px)}
	  100%  {opacity:1;-webkit-transform:translate(0px, 0px);transform:translate(0px, 0px)}

}



/*蝴蝶*/
.bird_Area {     z-index: 1; position: absolute; top: 30px;left: 1310px;}
.bird_box { position:relative;  -webkit-transform:rotate(0deg); transform:rotate(0deg);}

.bird_box .bird { position:absolute; top:0; left:0;}
.bird_box .bird_l { position:absolute; top:15px; left:0; transform-origin: 50% 50%; z-index:-6;}
.bird_box .bird_r { position:absolute; top:0; left:0;transform-origin: 55% 50%;  z-index:-5;}
.bird_box .bird_l img {transform: rotate(17deg)}
.bird_box .bird_r img {transform: rotate(354deg)}

	@media screen and (max-width:767px){
		.bird {    width: 18%;top: 15vw;  left: 69vw; -webkit-transform:scale(0.5); transform:scale(0.5); -webkit-transform-origin:top right; transform-origin:top right;}
	}

	/*蝴蝶動畫*/
	.bird-play { animation-fill-mode:forwards;
		              -webkit-animation:bird-play 6s linear 1;
							  animation:bird-play 6s linear 1;}
		@media screen and (max-width:767px){
			.bird-play { -webkit-animation:none; animation:none ;}
		}
							  
		@-webkit-keyframes bird-play { 
			0%   { -webkit-transform: translate(90px,-90px) scale(.8); } 
			40%   { -webkit-transform: translate(90px,-90px) scale(.8); } 
			100%  { -webkit-transform: translate(0px,0px) scale(1);  opacity: 1;}
		}
		@keyframes bird-play{ 
			0%   { transform: translate(90px,-90px) scale(.8); } 
			40%   { transform: translate(90px,-90px) scale(.8); } 
			100%  { transform: translate(0px,0px) scale(1);  opacity: 1;}
		}
		
	.bird_Area-play {-webkit-animation:bird_Area-play 0.6s -0.15s ease-in-out infinite alternate-reverse;
							      animation:bird_Area-play 0.6s -0.15s ease-in-out infinite alternate-reverse;}
		@-webkit-keyframes bird_Area-play { 
			0%   { -webkit-transform: translateY(0px);} 
			50%  { -webkit-transform: translateY(6px);}
			100% { -webkit-transform: translateY(0px);}
		}
		@keyframes bird_Area-play{ 
			0%   { transform: translateY(0px);} 
			50%  { transform: translateY(6px);}
			100% { transform: translateY(0px);}
		}
		
	.bird_l-play { -webkit-animation:bird_l-play 0.3s ease-in-out infinite alternate;
								animation:bird_l-play 0.3s ease-in-out infinite alternate;}
		@-webkit-keyframes bird_l-play { 
			0%   { -webkit-transform: scale(1,1)   skew(0deg,20deg);} 
			100% { -webkit-transform: scale(1.1,1) skew(8deg,23deg);}
		}
		@keyframes bird_l-play { 
			0%   { transform: scale(1,1)   skew(0deg,20deg);} 
			100% { transform: scale(1.1,1) skew(8deg,23deg);}
		}
	.bird_r-play { -webkit-animation:bird_r-play 0.3s -0.3s ease-in-out infinite alternate;
								animation:bird_r-play 0.3s -0.3s ease-in-out infinite alternate; }
		@-webkit-keyframes bird_r-play { 
			0%   { -webkit-transform: scale(1,1)   skew(0deg,20deg);} 
			100% { -webkit-transform: scale(1,1.2) skew(2deg,21deg);}
		}
		@keyframes bird_r-play { 
			0%   { transform: scale(1,1)   skew(0deg,20deg);} 
			100% { transform: scale(1,1.2) skew(2deg,21deg);}
		}


/*右*/
	.playR { -webkit-animation:playR 3s linear infinite; animation:playR 30s linear infinite ;}
		@-webkit-keyframes playR {
		  0%   { background-position:0 0;}
		  100% { background-position:2000px 0;}
		}
		@keyframes playR {
		  0%   { background-position:0 0;}
		  100% { background-position:2000px 0;}
		}

/*右*/
	.playRbottom { -webkit-animation:playR 3s linear infinite; animation:playR 90s linear infinite ;}
		@-webkit-keyframes playR {
		  0%   { background-position:0 0;}
		  100% { background-position:2000px 0;}
		}
		@keyframes playR {
		  0%   { background-position:0 0;}
		  100% { background-position:2000px 0;}
		}

/*左*/
	.playL { -webkit-animation:playL 50s linear infinite; animation:playL 80s linear infinite ;}
		@-webkit-keyframes playL {
		  0%   { background-position:2000px 0;}
		  100% { background-position:0 0;}
		}
		@keyframes playL {
		  0%   { background-position:2000px 0;}
		  100% { background-position:0 0;}
		}


/*右*/
	.mbgtop_r-play { -webkit-animation:mbgtop_r-play 50s linear infinite; animation:mbgtop_r-play 80s linear infinite ;}
		@-webkit-keyframes mbgtop_r-play {
		  0%   { background-position:0 0;}
		  100% { background-position:2000px 0;}
		}
		@keyframes mbgtop_r-play {
		  0%   { background-position:0 0;}
		  100% { background-position:2000px 0;}
		}

/*右*/
	.mbottom_r-play { -webkit-animation:mbgtop_r-play 90s linear infinite; animation:mbgtop_r-play 100s linear infinite ;}
		@-webkit-keyframes mbgtop_r-play {
		  0%   { background-position:0 0;}
		  100% { background-position:2000px 0;}
		}
		@keyframes mbgtop_r-play {
		  0%   { background-position:0 0;}
		  100% { background-position:2000px 0;}
		}
/*左*/
	.mbgtop_L-play { -webkit-animation:mbgtop_L-play 50s linear infinite; animation:mbgtop_L-play 80s linear infinite ;}
		@-webkit-keyframes mbgtop_L-play {
		  0%   { background-position:0 2000px ;}
		  100% { background-position:0 0;}
		}
		@keyframes mbgtop_L-play {
		  0%   { background-position: 0 2000px;}
		  100% { background-position:0 0;}
		}


/*斜向來回滑動*/
.slideInLeft2 {
			-webkit-animation:slideInLeft1 5s ease infinite ;
					animation:slideInLeft1 5s ease infinite ;
}
@keyframes slideInLeft1 {
	  0%  {opacity:1;-webkit-transform:translate(-10px, 0px);transform:translate(-10px, 0px)}
	  50%  {opacity:1;-webkit-transform:translate(7px,0 );transform:translate(7px, 0)}
	  100%  {opacity:1;-webkit-transform:translate(0px, 0px);transform:translate(0px, 0px)}

}


.shake {
  animation-name: shake;
       opacity: 1;
	   animation-duration: 2s;
	   animation-iteration-count: infinite;
	   animation-direction: alternate;}
	
@keyframes shake {
  from {
    transform: rotate(-10deg);
transform-origin:0% 100%;
  }
  to {
    transform: rotate(20deg);
transform-origin:0% 100%
  }
}


.shake2{animation-name: shake2;
       opacity: 1;
	   animation-duration: 2s;
	   animation-iteration-count: infinite;
	   animation-direction: alternate;
	   }

@keyframes shake2 {
  from {
    transform: rotate(10deg);
transform-origin:100% 100%;
  }
  to {
    transform: rotate(-20deg);
transform-origin:100% 100%
  }
}
.wheel_area .wheel {position:relative;
	animation:TestMove2 4s;/*IE*/
	-moz-animation:TestMove2 4s;/*FireFox*/
	-webkit-animation:TestMove2 4s;/*Chrome,Safari*/
	 animation-timing-function: ease-out; 
 	-webkit-animation-timing-function: ease-out;
	 animation-iteration-count: infinite;
 	-webkit-animation-iteration-count: infinite;  
	}
	@keyframes TestMove2 {
		from {left:0%;transform:translateX(0px);opacity:0;}
		1% {left:0%;transform:translateX(0px);opacity:1;}
		20% {left:0%;transform:translateX(360px);opacity:1;}
		35% {left:0%;transform:translateX(380px);opacity:0;}
		to {left:0%;transform:translateX(0px);opacity:0;}
		}
	@-moz-keyframes TestMove2 {
		from {left:0%;transform:translateX(0px);opacity:0;}
		1% {left:0%;transform:translateX(0px);opacity:1;}
		20% {left:0%;transform:translateX(360px);opacity:1;}
		35% {left:0%;transform:translateX(380px);opacity:0;}
		to {left:0%;transform:translateX(0px);opacity:0;}
		}
	@-webkit-keyframes TestMove2 {
		from {left:0%;transform:translateX(0px);opacity:0;}
		1% {left:0%;transform:translateX(0px);opacity:1;}
		20% {left:0%;transform:translateX(360px);opacity:1;}
		35% {left:0%;transform:translateX(380px);opacity:0;}
		to {left:0%;transform:translateX(0px);opacity:0;}
		}
		
		
	@media screen and ( max-width:736px) {
		
	@keyframes TestMove2 {
		from {left:0%;transform:translateX(0px);opacity:0;}
		1% {left:0%;transform:translateX(0px);opacity:1;}
		20% {left:0%;transform:translateX(61vw);opacity:1;}
		35% {left:0%;transform:translateX(65vw);opacity:0;}
		to {left:0%;transform:translateX(0px);opacity:0;}
		}
	@-moz-keyframes TestMove2 {
		from {left:0%;transform:translateX(0px);opacity:0;}
		1% {left:0%;transform:translateX(0px);opacity:1;}
		20% {left:0%;transform:translateX(61vw);opacity:1;}
		35% {left:0%;transform:translateX(65vw);opacity:0;}
		to {left:0%;transform:translateX(0px);opacity:0;}
		}
	@-webkit-keyframes TestMove2 {
		from {left:0%;transform:translateX(0px);opacity:0;}
		1% {left:0%;transform:translateX(0px);opacity:1;}
		20% {left:0%;transform:translateX(61vw);opacity:1;}
		35% {left:0%;transform:translateX(65vw);opacity:0;}
		to {left:0%;transform:translateX(0px);opacity:0;}
		}
		
	}	





/*圖片替換*/
.turn { animation: turn 4s linear infinite; -webkit-animation: turn 4s linear infinite;}
@-webkit-keyframes turn{
	0%{ opacity:0;}
	49%{ opacity:0;}
	50%{ opacity:1;}
	100%{ opacity:1;}
}
@keyframes turn{
	0%{ opacity:0;}
	49.5%{ opacity:0;}
	50%{ opacity:1;}
	100%{ opacity:1;}
}

.ball { width: 536px; height: 523px; background: url(ball.png?t=1750733307695);
		-webkit-animation: ball 1.5s steps(6) infinite;
						animation: ball 1.5s steps(6) infinite;
}
    @media screen and (max-width:767px){
      .ball { width: 65vw; height: 64vw; background-size: 600% 100%;
                          -webkit-animation: m_ball 1.5s steps(6) infinite; /*由前到後的分別是：[動畫名稱momoco]，[撥放時間1秒]，[10張影格_取決於圖片內有幾個動作]，[撥放幾次_infinite=重複]，[alternate=會倒著撥回去]*/
                                  animation: m_ball 1.5s steps(6) infinite;}
    }
@-webkit-keyframes ball {
	 from { background-position:    0px; }
		 to { background-position: -3216px; }
}
@keyframes ball {
	 from { background-position:    0px; }
		 to { background-position: -3216px; }
}
  @-webkit-keyframes m_ball {
    from { background-position:      0; } /*圖片左邊，基本上都是0*/
      to { background-position: -600%; } /*圖片最右邊，就是圖片的寬，CSS已上面設定的寬度，一部份一部份的切換圖片到最後的這個數值*/
  }
  @keyframes m_ball {
    from { background-position:      0; }
      to { background-position: -600%; }
  }


/*閃光*/				  
.brightness-play { -webkit-animation:brightness2-play 3s -0.14s  infinite ; animation:brightness2-play 2s -0.14s  infinite ;}
	@keyframes brightness2-play {
	  0% { 
		filter:brightness(100%);
	  }
	  88% { 
		filter:brightness(100%);
	  }
	  91% { 
		filter:brightness(150%);
	  }
	  94% { 
		filter:brightness(100%);
	  }
	  97% { 
		filter:brightness(150%);
	  }
	  100% { 
		filter:brightness(100%);
	  }
	}
	
	
	/*閃光*/				  
.brightness-play4 { -webkit-animation:brightness-play4 4s infinite ;
				           animation:brightness-play4 4s infinite ;
				  }
	@keyframes brightness-play4 {
	  0% { 
		filter:brightness(110%);
	  }
	  25% { 
		filter:brightness(90%);
	  }
	  50% { 
		filter:brightness(140%);
	  }
	  75% { 
		filter:brightness(90%);
	  }
	  100% { 
		filter:brightness(110%);
	  }
	}

/*左邊搖擺*/
.swing3{
 -webkit-animation:swing3 1s  infinite alternate;
  animation:swing3 1s  infinite alternate;}
@keyframes swing3 {
  20% {transform: rotate3d(0, 0, 1, -2deg);}

  40% {transform: rotate3d(0, 0, 1, 2deg);}

  60% {transform: rotate3d(0, 0, 1, -2deg);}

  80% {transform: rotate3d(0, 0, 1, 2deg);}

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

/*左邊搖擺*/
.swing2{
 -webkit-animation:swing2 1s  infinite alternate;
  animation:swing2 1s  infinite alternate;}
@keyframes swing2 {
  20% {transform: rotate3d(0, 0, 1, 2deg);}

  40% {transform: rotate3d(0, 0, 1, -2deg);}

  60% {transform: rotate3d(0, 0, 1, 2deg);}

  80% {transform: rotate3d(0, 0, 1, -2deg);}

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

/** 倒數閃燈 **/
.TIMERLan  {
  -webkit-animation:TIMERLan 0.25s infinite alternate linear;
   -moz-animation:TIMERLan 0.25s infinite alternate linear;
    -ms-animation:TIMERLan 0.25s infinite alternate linear;
     -o-animation:TIMERLan 0.25s infinite alternate linear;
      animation:TIMERLan 0.25s infinite alternate linear;}
  @keyframes TIMERLan {
    0%   { 
      -webkit-transform:scale(1);
       -moz-transform:scale(1);
        -ms-transform:scale(1);
         -o-transform:scale(1);
          transform:scale(1);	
    }
    100% { 
      -webkit-transform:scale(0.95);
       -moz-transform:scale(0.95);
        -ms-transform:scale(0.95);
         -o-transform:scale(0.95);
          transform:scale(0.95);	
    }
  }

/*飄-上下*/
.uptodown-play { -webkit-animation:uptodown-play 1.5s infinite alternate;
				         animation:uptodown-play 1.5s infinite alternate;}
	@-webkit-keyframes uptodown-play { 
		0% { 
			-webkit-transform: translate(0,-10px);  
		} 
		100% { 
			-webkit-transform: translate(0,0);
		}
	}
	@keyframes uptodown-play { 
		0% { 
			transform: translate(0,-10px);  
		} 
		100% { 
			transform: translate(0,0);
		}
	}

/*飄-下上*/
.downtoup-play { -webkit-animation:downtoup-play 1.5s infinite alternate;
				         animation:downtoup-play 1.5s infinite alternate;}
	@-webkit-keyframes downtoup-play { 
		0% { 
			-webkit-transform: translate(0,0);  
		} 
		100% { 
			-webkit-transform: translate(0,-10px);
		}
	}
	@keyframes downtoup-play { 
		0% { 
			transform: translate(0,0);  
		} 
		100% { 
			transform: translate(0,-10px);
		}
	}



/*轉轉3*/
.rotate3-play { -webkit-animation:rotate3-play 20s linear infinite ;
				       animation:rotate3-play 20s linear infinite ;}
	@keyframes rotate3-play {
	  100% { 
			transform: rotate(-360deg);
	  }
	}

/*背景飄上*/
.bgupup-play { -webkit-animation:bgupup-play 40s linear infinite ;
				       animation:bgupup-play 40s linear infinite ;}
	@keyframes bgupup-play {
	  100% { background-position: center -925px;
	  }
	}


/*心跳A*/
.heartbeat-play {-webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-name: heartbeat-play;  animation-name: heartbeat-play;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;/* -webkit-animation-direction: alternate;animation-direction: alternate;*/}
	@-webkit-keyframes heartbeat-play {   
		0%   { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		40%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);} 
		60%  { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		80%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);}
		100% { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		}
	@keyframes heartbeat-play { 
		0%   { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		40%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);} 
		60%  { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		80%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);}
		100% { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
	}

/*心跳A*/
.heartbeat-play1 { -webkit-animation-duration: 1s;  animation-duration: 1s; -webkit-animation-name: heartbeat-play1;  animation-name: heartbeat-play1;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;/* -webkit-animation-direction: alternate;animation-direction: alternate;*/}
	@-webkit-keyframes heartbeat-play1 {   
		0%   { -webkit-transform: scale(1); transform: scale(1);} 
		40%  { -webkit-transform: scale(0.98); transform: scale(0.98);} 
		60%  { -webkit-transform: scale(1); transform: scale(1); } 
		80%  { -webkit-transform: scale(0.98); transform: scale(0.98);}
		100% { -webkit-transform: scale(1); transform: scale(1);} 
		}
	@keyframes heartbeat-play1 { 
		0%   { -webkit-transform: scale(1); transform: scale(1);} 
		40%  { -webkit-transform: scale(0.98); transform: scale(0.98);} 
		60%  { -webkit-transform: scale(1); transform: scale(1);} 
		80%  { -webkit-transform: scale(0.98); transform: scale(0.98);}
		100% { -webkit-transform: scale(1); transform: scale(1);} 
	}

/*彈跳*/	
.bounce-play { -webkit-animation:bounce-play 3s linear infinite ;
				          animation:bounce-play 3s linear infinite ;}
	@-webkit-keyframes bounce-play {
	  0%, 5%, 12.5%, 20%, 25% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	  }
	
	  10% {
		-webkit-transform: translateY(-10%);
		transform: translateY(-10%);
	  }
	
	  15% {
		-webkit-transform: translateY(-5%);
		transform: translateY(-5%);
	  }
	}
	
	@keyframes bounce-play {
	  0%, 5%, 12.5%, 20%, 25% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	  }
	
	  10% {
		-webkit-transform: translateY(-10%);
		transform: translateY(-10%);
	  }
	
	  15% {
		-webkit-transform: translateY(-5%);
		transform: translateY(-5%);
	  }
	}

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  animation-name: slideInDown;
}
@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  animation-name: slideInLeft;
}

/*重磅登場*/
.bangIn {-webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-name: bangIn;  animation-name: bangIn;   animation-timing-function:linear; }

	@keyframes bangIn { 
		0%   { -webkit-transform: scale(3); transform: scale(3); filter:brightness(120%);opacity:0;} 
		40%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(120%);} 
		60%  { -webkit-transform: scale(1.05); transform: scale(1.05); filter:brightness(120%);} 
		80%  { -webkit-transform: scale(1); transform: scale(1); filter:brightness(100%);}
	}
	@-webkit-keyframes bangIn {   
		0%   { -webkit-transform: scale(3); transform: scale(3); filter:brightness(120%);opacity:0;} 
		40%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(120%);} 
		60%  { -webkit-transform: scale(1.05); transform: scale(1.05); filter:brightness(120%);} 
		80%  { -webkit-transform: scale(1); transform: scale(1); filter:brightness(100%);}
		}

/*閃光*/				  
.brightness-play { -webkit-animation:brightness2-play 3s -0.14s  infinite ; animation:brightness2-play 2s -0.14s  infinite ;}
	@keyframes brightness2-play {
	  0% { 
		filter:brightness(100%);
	  }
	  88% { 
		filter:brightness(100%);
	  }
	  91% { 
		filter:brightness(150%);
	  }
	  94% { 
		filter:brightness(100%);
	  }
	  97% { 
		filter:brightness(150%);
	  }
	  100% { 
		filter:brightness(100%);
	  }
	}
	
	/*閃光*/				  
.brightness-play4 { -webkit-animation:brightness-play4 4s infinite ;
				           animation:brightness-play4 4s infinite ;
				  }
	@keyframes brightness-play4 {
	  0% { 
		filter:brightness(110%);
	  }
	  25% { 
		filter:brightness(90%);
	  }
	  50% { 
		filter:brightness(140%);
	  }
	  75% { 
		filter:brightness(90%);
	  }
	  100% { 
		filter:brightness(110%);
	  }
	}




/*主標微亮*/		  
.minbright-play { -webkit-animation:minbright-play 2s infinite alternate; animation:minbright-play 2s infinite alternate ;}
	@-webkit-keyframes minbright-play {
	  0% { 
		filter:brightness(110%);
	  }
	  100% { 
		filter:brightness(100%);
	  }
	}
	@keyframes minbright-play {
	  0% { 
		filter:brightness(110%);
	  }
	  100% { 
		filter:brightness(100%);
	  }
	}

/*閃光*/				  
.brightness-play1 { -webkit-animation:brightness-play 3s infinite ;
				           animation:brightness-play 3s infinite ;}
	@-webkit-keyframes brightness-play {
	  0% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(100%); 
		        filter:brightness(100%);
	  }
	  92% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(100%); 
		        filter:brightness(100%);
	  }
	  94% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" /><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(120%); 
		        filter:brightness(200%);
	  }
	  96% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(100%); 
		        filter:brightness(100%);
	  }
	  98% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" /><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(120%); 
		        filter:brightness(120%);
	  }
	  100% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/1500/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(100%); 
		        filter:brightness(100%);
	  }
	}
	@keyframes brightness-play {
	  0% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(100%); 
		        filter:brightness(100%);
	  }
	  92% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(100%); 
		        filter:brightness(100%);
	  }
	  94% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" /><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(120%); 
		        filter:brightness(120%);
	  }
	  96% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(100%); 
		        filter:brightness(100%);
	  }
	  98% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" /><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(120%); 
		        filter:brightness(120%);
	  }
	  100% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(100%); 
		        filter:brightness(100%);
	  }
}