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

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

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

.animated.hinge {
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  animation-duration: .75s;
}



/*閃亮效果*/
.btn_gather{ z-index: 1; position: relative; }
.btn_gather:after,
.btn_gather:before,
.btn_gather { border-radius:100px;
          -webkit-transition: all 0.2s ease;
           -moz-transition: all 0.2s ease;
            -ms-transition: all 0.2s ease;
             -o-transition: all 0.2s ease;
              transition: all 0.2s ease;}
.btn_gather:after,
.btn_gather:before { background-color:rgba(255,255,255);  filter: blur(2px);}
.btn_gather:hover::after,
.btn_gather:hover::before,
.btn_gather:hover { background-color:rgba(255,111,0,1.00);}
.btn_gather:hover { background-color: transparent;}
.btn_gather:after,
.btn_gather:before { content: ""; z-index:-1; position:absolute; top:-5%; left:0%; padding:0; box-shadow: none; width:100%; height:110%; -webkit-transform:scale(1); transform:scale(1); opacity:0.5; }
.btn_gather:after,
.btn_gather:before {-webkit-animation:btn_more-play 1.5s infinite ease-in;
                                       animation:btn_more-play 1.5s infinite ease-in;}
  .btn_gather:before { -webkit-animation-delay:.5s; animation-delay:.5s;}
  @-webkit-keyframes btn_more-play {
      75% { -webkit-transform:scale(1.3); transform:scale(1.3); opacity:0;}
     100% { -webkit-transform:scale(1.3); transform:scale(1.3); opacity:0; }
  }
  @keyframes btn_more-play {
      75% { -webkit-transform:scale(1.3); transform:scale(1.3); opacity:0; }
     100% { -webkit-transform:scale(1.3); transform:scale(1.3); opacity:0; }
  }




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

/*飄-下上*/
.downtoup-play { -webkit-animation:downtoup-play 1.9s ease-in-out infinite alternate;
				         animation:downtoup-play 1.9s ease-in-out infinite alternate;}
	@-webkit-keyframes downtoup-play { 
		0% { 
			-webkit-transform: translate(0,0);  
		} 
		100% { 
			-webkit-transform: translate(0,-30px);
		}
	}
	@keyframes downtoup-play { 
		0% { 
			transform: translate(0,0);  
		} 
		100% { 
			transform: translate(0,-30px);
		}
	}
 
/*背景飄上*/
.bgupup-play { -webkit-animation:bgupup-play 40s linear infinite ;
				       animation:bgupup-play 40s linear infinite ;}
	@keyframes bgupup-play {
	  100% { background-position: center -925px;
	  }
	}

/*放大縮小*/
.zoominzoomout-play { -webkit-animation-duration: 0.7s;  animation-duration: 0.7s; animation-delay:-1s;  -webkit-animation-name: zoominzoomout-play;  animation-name: zoominzoomout-play;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;-webkit-animation-direction: alternate;animation-direction: alternate;}
	@-webkit-keyframes zoominzoomout-play {   
		0%  { -webkit-transform: scale(1); transform: scale(1);} 
		100%{ -webkit-transform: scale(0.95); transform: scale(0.95); }
		}
	@keyframes zoominzoomout-play { 
		0%  { -webkit-transform: scale(1); transform: scale(1); } 
		100%{ -webkit-transform: scale(0.95); transform: scale(0.95);}
	}


/*箭頭閃*/
.opacity1{ -webkit-animation:opacity1 2.5s linear infinite normal; animation:opacity1 2.5s linear infinite  normal;}
	@-webkit-keyframes opacity1 {
	  0% { 	opacity:1; }
	  25%{ 	opacity:0; }
	  50%{ 	opacity:0; }
	  75%{ 	opacity:0; }
	  100%{ opacity:1; }
	}
	@keyframes opacity1 {
	  0% { 	opacity:1; }
	  25%{ 	opacity:0; }
	  50%{ 	opacity:0; }
	  75%{ 	opacity:0; }
	  100%{ opacity:1; }
	}	
.opacity2{ -webkit-animation:opacity2 2s linear infinite normal; animation:opacity2 2s linear infinite  normal;}
	@-webkit-keyframes opacity2 {
	  0% { 	opacity:0; }
	  25%{ 	opacity:1; }
	  50%{ 	opacity:0; }
	  75%{ 	opacity:0; }
	  100%{ opacity:0; }
	}
	@keyframes opacity2 {
	  0% { 	opacity:0; }
	  25%{ 	opacity:1; }
	  50%{ 	opacity:0; }
	  75%{ 	opacity:0; }
	  100%{ opacity:0; }
	}
.opacity3{ -webkit-animation:opacity3 2s linear infinite normal; animation:opacity3 2s linear infinite  normal;}
	@-webkit-keyframes opacity3 {
	  0% { 	opacity:0; }
	  25%{ 	opacity:0; }
	  50%{ 	opacity:1; }
	  75%{ 	opacity:0; }
	  100%{ opacity:0; }
	}
	@keyframes opacity3 {
	  0% { 	opacity:0; }
	  25%{ 	opacity:0; }
	  50%{ 	opacity:1; }
	  75%{ 	opacity:0; }
	  100%{ opacity:0; }
	}
.opacity4{ -webkit-animation:opacity4 2s linear infinite  normal; animation:opacity4 2s linear infinite  normal;}
	@-webkit-keyframes opacit4 {
	  0% { 	opacity:0; }
	  25%{ 	opacity:0; }
	  50%{ 	opacity:0; }
	  75%{ 	opacity:0; }
	  100% {opacity:0; }
	}
	@keyframes opacity4 {
	  0% { 	opacity:0; }
	  25%{ 	opacity:0; }
	  50%{ 	opacity:0; }
	  75%{ 	opacity:1; }
	  100% {opacity:0; }

	}

/*閃光*/				  
.brightness-play { -webkit-animation:brightness-play 3.5s ease both infinite; ;
				           animation:brightness-play 3.5s ease both infinite;}
	
	@keyframes brightness-play {
	  0% { 
		filter:brightness(100%);
	  }
	  5% { 
		filter:brightness(100%);
	  }
	 10% { 
		filter:brightness(150%);
	  }
	 11% { 
		filter:brightness(100%);
	  }
	 18% { 
		filter:brightness(150%);
	  }
	 20% { 
		filter:brightness(100%);
	  }
	  70%{ 
		filter:brightness(100%);
	  }
	  100% { 
		filter:brightness(100%);
	  }
	}
	@-webkit-keyframes brightness-play {
	  0% { 
		filter:brightness(100%);
	  }
	  5% { 
		filter:brightness(100%);
	  }
	 10% { 
		filter:brightness(150%);
	  }
	 11% { 
		filter:brightness(100%);
	  }
	 18% { 
		filter:brightness(150%);
	  }
	 20% { 
		filter:brightness(100%);
	  }
	  70%{ 
		filter:brightness(100%);
	  }
	  100% { 
		filter:brightness(100%);
	  }
	}


/*背景主標微亮*/	
.minbright-play-bg { -webkit-animation:minbright-play-bg 2s linear infinite alternate; animation:minbright-play-bg 3s linear infinite alternate ;}
	@-webkit-keyframes minbright-play-bg {
	  0% { 
		filter:brightness(20%) hue-rotate(0deg);
	  }
	  100% { 
		filter:brightness(200%) hue-rotate(0deg);
	  }
	}
	@keyframes minbright-play-bg {
	  0% { 
		filter:brightness(20%) hue-rotate(0deg);
	  }
	  100% { 
		filter:brightness(200%) hue-rotate(0deg);
	  }
	}	  
	
.minbright-play { -webkit-animation:minbright-play 3s linear infinite alternate; animation:minbright-play 3s linear infinite alternate ;}
	@-webkit-keyframes minbright-play {
	  0% { 
		filter:brightness(80%) hue-rotate(0deg);
	  }
	  100% { 
		filter:brightness(150%) hue-rotate(360deg);
	  }
	}
	@keyframes minbright-play {
	  0% { 
		filter:brightness(80%) hue-rotate(0deg);
	  }
	  100% { 
		filter:brightness(150%) hue-rotate(360deg);
	  }
	}


/*跳跳跳*/
.uptodown {-webkit-animation-duration: 1.5s;  animation-duration: 1.5s;  -webkit-animation-name: uptodown;  animation-name: uptodown;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite; -webkit-animation-direction: alternate;animation-direction: alternate;}
@-webkit-keyframes uptodown { 

 0%    { transform: translate(0,0px) ;}
 10%    { transform: translate(0,0px) ;}
 15%    { transform: translate(0,-10px) ;}
 20%    { transform: translate(0,0px) ;}
 100%  { transform: translate(0,0px) ;}


}

/*蝴蝶*/
.bird_Area { z-index:1; position:absolute; top:110px; left:-50px;filter: hue-rotate(30deg) saturate(0.55);}
.bird_box { position:relative; filter: drop-shadow(-8px 8px 6px rgba(0,0,0,0.2)); -webkit-transform:rotate(0deg); transform:rotate(0deg);}

.bird_box .bird { position:absolute; top:0; left:0;}
.bird_box .bird_l { position:absolute; top:0; left:0; transform-origin: 50% 50%; z-index:1;}
.bird_box .bird_r { position:absolute; top:0; left:0;transform-origin: 50% 50%;}
	@media screen and (max-width:767px){
		.bird { top:15%; left: inherit; right:24%; -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(10deg,0);} 
			100% { -webkit-transform: scale(1.1,1) skew(10deg,-30deg);}
		}
		@keyframes bird_l-play { 
			0%   { transform: scale(1,1)   skew(10deg,0);} 
			100% { transform: scale(1.1,1) skew(10deg,-30deg);}
		}
	.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(0,0);} 
			100% { -webkit-transform: scale(1,1.2) skew(6deg,30deg);}
		}
		@keyframes bird_r-play { 
			0%   { transform: scale(1,1)   skew(0,0);} 
			100% { transform: scale(1,1.2) skew(6deg,30deg);}
		}
		

/*左邊韻律感*/				  
.waves2-play{ -webkit-animation:waves2-play 1.5s  linear infinite ;
	  			          animation:waves2-play 1.5s linear infinite ;}
	@-webkit-keyframes waves2-play {
	  0% { -webkit-transform: scale(1.01) rotate(360deg) translateX(0px) translateY(2px) rotate(-360deg); transform: scale(1.01) rotate(360deg) translateX(0px) translateY(2px) rotate(-360deg);}
	  100%   { -webkit-transform: scale(1.01) rotate(0deg) translateX(0px) translateY(2px) rotate(0deg); transform: scale(1.01) rotate(0deg) translateX(0px) translateY(2px) rotate(0deg);}
	}

	@keyframes waves2-play {
	  0% { -webkit-transform: scale(1.01) rotate(360deg) translateX(0px) translateY(2px) rotate(-360deg); transform: scale(1.01) rotate(360deg) translateX(0px) translateY(2px) rotate(-360deg);}
	  100%   { -webkit-transform: scale(1.01) rotate(0deg) translateX(0px) translateY(2px) rotate(0deg); transform: scale(1.01) rotate(0deg) translateX(0px) translateY(2px) rotate(0deg);}
	}

/*右邊韻律感*/				  
.waves1-play{ -webkit-animation:waves2-play 1.5s  linear infinite ;
	  			     animation:waves2-play 1.5s linear infinite ;}
	@-webkit-keyframes waves2-play {
	  0% { -webkit-transform: scale(1.01) rotate(360deg) translateX(0px) translateY(2px) rotate(360deg); transform: scale(1.01) rotate(-360deg) translateX(0px) translateY(2px) rotate(360deg);}
	  100%   { -webkit-transform: scale(1.01) rotate(0deg) translateX(0px) translateY(2px) rotate(0deg); transform: scale(1.01) rotate(0deg) translateX(0px) translateY(2px) rotate(0deg);}
	}

	@keyframes waves2-play {
	  0% { -webkit-transform: scale(1.01) rotate(360deg) translateX(0px) translateY(2px) rotate(360deg); transform: scale(1.01) rotate(-360deg) translateX(0px) translateY(2px) rotate(360deg);}
	  100%   { -webkit-transform: scale(1.01) rotate(0deg) translateX(0px) translateY(2px) rotate(0deg); transform: scale(1.01) rotate(0deg) translateX(0px) translateY(2px) rotate(0deg);}
	}

 /*輸送帶*/
.bgtop_r-play { -webkit-animation:bgtop_r-play 50s linear infinite; animation:bgtop_r-play 50s linear infinite ;}
		@-webkit-keyframes bgtop_r-play {
		  0%   { background-position:0 0;}
		  100% { background-position:0px 702px;}
		}
		@keyframes bgtop_r-play {
		  0%   { background-position:0 0;}
		  100% { background-position:0px -702px;}
		}
.bgtop_l-play { -webkit-animation:bgtop_r-play 160s linear infinite alternate-reverse; animation:bgtop_r-play 160s linear infinite alternate-reverse;}
	
	/*輸送帶*/
.bgtop_r-play2 { -webkit-animation:bgtop_r-play2 50s linear infinite; animation:bgtop_r-play2 50s linear infinite ;}
		@-webkit-keyframes bgtop_r-play2 {
		  0%   { background-position:0 0;}
		  100% { background-position:0 -702px;}
		}
		@keyframes bgtop_r-play2 {
		  0%   { background-position:0 0;}
		  100% { background-position:0 702px;}
		}
.bgtop_l-play { -webkit-animation:bgtop_r-play2 160s linear infinite alternate-reverse; animation:bgtop_r-play2 160s linear infinite alternate-reverse;}



/*煙霧01*/
.fadeOut2{

 animation-timing-function: ease-out; 
 -webkit-animation-timing-function: ease-out;

 
 
 -webkit-animation:fadeOut2 10s infinite ;
animation:fadeOut2 10s infinite ;
/* visibility: visible !important; */
}
@keyframes fadeOut2 {
		0% { transform: translate(0,0) scale(1); opacity: 0;} 
		2% { transform: translate(0,0) scale(1); opacity: 0;} 
		50% { transform: translate(-20px,-10px) scale(1.3); opacity: 1;} 
		98%{ transform: translate(-40px,-30px) scale(1.5);opacity: 0;}
  	100%{ transform: translate(-40px,-30px) scale(1.5);opacity:0;}
 }
@-webkit-keyframes fadeOut2 {
		0% { transform: translate(0,0) scale(1); opacity: 0;} 
		2% { transform: translate(0,0) scale(1); opacity: 0;} 
		50% { transform: translate(-20px,-10px) scale(1.3); opacity: 1;} 
		98%{ transform: translate(-40px,-30px) scale(1.5);opacity: 0;}
  	100%{ transform: translate(-40px,-30px) scale(1.5);opacity:0;}
}


/*飄-上下*/
.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,-15px);  
		} 
		100% { 
			-webkit-transform: translate(0,0);
		}
	}
	@keyframes uptodown-play { 
		0% { 
			transform: translate(0,-15px);  
		} 
		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,-15px);
		}
	}
	@keyframes downtoup-play { 
		0% { 
			transform: translate(0,0);  
		} 
		100% { 
			transform: translate(0,-15px);
		}
	}



/*轉轉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;
	  }
	}



/*主標微亮*/		  
.minbright-play { -webkit-animation:minbright-play 2s infinite alternate; animation:minbright-play 2s infinite alternate ;}
	@-webkit-keyframes minbright-play {
	  0% { 
		filter:brightness(120%);
	  }
	  100% { 
		filter:brightness(100%);
	  }
	}
	@keyframes minbright-play {
	  0% { 
		filter:brightness(120%);
	  }
	  100% { 
		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%);
	  }
	}
	

.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 5s;/*IE*/
	-moz-animation:TestMove2 5s;/*FireFox*/
	-webkit-animation:TestMove2 5s;/*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(560px);opacity:1;}
		35% {left:0%;transform:translateX(580px);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(560px);opacity:1;}
		35% {left:0%;transform:translateX(580px);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(560px);opacity:1;}
		35% {left:0%;transform:translateX(580px);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;}
		}
		
	}