@charset "utf-8";


/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2017 Daniel Eden
 */


.tr-bag {
  -webkit-transform: skewX(0deg) scaleY(1);
          transform: skewX(0deg) scaleY(1);
  -webkit-animation: tr-bag 4s linear infinite;
          animation: tr-bag 4s linear infinite;}
	@-webkit-keyframes tr-bag {
	  0% {
		-webkit-transform: translate(2px, 5px);
				transform: translate(2px, 5px);
	  }

	  30% {
		-webkit-transform: translate(1px, 3px);
				transform: translate(1px, 3px);
	  }

	  60% {
		-webkit-transform: translate(3px, 1px);
				transform: translate(3px, 1px);
	  }

	  90% {
		-webkit-transform: translate(1px, 4px);
				transform: translate(1px, 4px);
	  }

	  100% {
		-webkit-transform: translate(1px, 5px);
				transform: translate(1px, 5px);
	  }
	  1% {
		-webkit-transform: scaleY(1) skewX(0deg);
				transform: scaleY(1) skewX(0deg);
	  }

	  2% {
		-webkit-transform: scaleY(1) skewX(0deg);
				transform: scaleY(1) skewX(0deg);
	  }
	  52% {
		-webkit-transform: scaleX(1.5) scaleY(0.2) skewX(0deg);
				transform: scaleX(1.5) scaleY(0.2) skewX(0deg);
	  }
	  53% {
		-webkit-transform: scaleX(1) scaleY(1) skewX(0deg);
				transform: scaleX(1) scaleY(1) skewX(0deg);
	  }
	}
	@keyframes tr-bag {
	  0% {
		-webkit-transform: translate(2px, 5px);
				transform: translate(2px, 5px);
	  }

	  20% {
		-webkit-transform: translate(2px, 1px);
				transform: translate(2px, 1px);
	  }

	  40% {
		-webkit-transform: translate(2px, 3px);
				transform: translate(2px, 3px);
	  }

	  60% {
		-webkit-transform: translate(3px, 1px);
				transform: translate(3px, 1px);
	  }

	  80% {
		-webkit-transform: translate(2px, 5px);
				transform: translate(2px, 5px);
	  }
		
	  100% {
		-webkit-transform: translate(1px, 5px);
				transform: translate(1px, 5px);
	  }
	  1% {
		-webkit-transform: scaleY(1) skewX(0deg);
				transform: scaleY(1) skewX(0deg);
	  }
		
	  52% {
		-webkit-transform: scaleX(1) scaleY(1) skewX(0deg);
				transform: scaleX(1) scaleY(1) skewX(0deg);
	  }

	  53% {
		-webkit-transform: scaleX(1) scaleY(1) skewX(0deg);
				transform: scaleX(1) scaleY(1) skewX(0deg);
	  }
	}


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

/*跳跳跳*/
.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) ;}
	
}



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

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

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

/*左邊韻律感*/				  
.waves2-play{ -webkit-animation:waves2-play 1s  linear infinite ;
	  			          animation:waves2-play 1s 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);}
	}


/*飄-上下*/
.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);
		}
	}

/*飄-上下*/
.uptodown-play2 { -webkit-animation:uptodown-play2 3s infinite alternate;
	animation:uptodown-play2 3s infinite alternate;}
@-webkit-keyframes uptodown-play2 { 
0% { 
-webkit-transform: translate(0,-5px);  
} 
100% { 
-webkit-transform: translate(0,0);
}
}
@keyframes uptodown-play2 { 
0% { 
transform: translate(0,-5px);  
} 
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);
		}
	}



@keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

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

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

  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: flipInX;
}




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


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

}


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

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

.slideInLeft {
  animation-name: slideInLeft;
}

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

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

.slideInRight {
  animation-name: slideInRight;
}


/*轉轉2*/	
.rotate2-play { -webkit-animation:rotate2-play 25s linear infinite ;
				        animation:rotate2-play 25s linear infinite ;}
	@keyframes rotate2-play {
	  0% { 
			transform: rotate(0deg);
	  }
	  100% { 
			transform: rotate(360deg);
	  }
	}


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

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

  50% {
    opacity: 1;
  }
}

.zoomIn {
  animation-name: zoomIn;
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInDown {
  animation-name: zoomInDown;
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInLeft {
  animation-name: zoomInLeft;
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInRight {
  animation-name: zoomInRight;
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInUp {
  animation-name: zoomInUp;
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

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

  to {
    opacity: 0;
  }
}

.zoomOut {
  animation-name: zoomOut;
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutDown {
  animation-name: zoomOutDown;
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    transform: scale(.1) translate3d(-2000px, 0, 0);
    transform-origin: left center;
  }
}

.zoomOutLeft {
  animation-name: zoomOutLeft;
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    transform: scale(.1) translate3d(2000px, 0, 0);
    transform-origin: right center;
  }
}

.zoomOutRight {
  animation-name: zoomOutRight;
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutUp {
  animation-name: zoomOutUp;
}

.zoomIn2 {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
	
  animation-name: zoomIn2;
  -webkit-animation-name: zoomIn2; 
  -moz-animation-name: zoomIn2;
  -ms-animation-name: zoomIn2;
  -o-animation-name: zoomIn2;
  
  animation-duration: 0.8s;	
  -webkit-animation-duration: 0.8s;	
  -moz-animation-duration: 0.8s;	
  -ms-animation-duration: 0.8s;	
  -o-animation-duration: 0.8s;	
  
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;	
  -moz-animation-timing-function: ease-in-out;	  
  -ms-animation-timing-function: ease-in-out;	  
  -o-animation-timing-function: ease-in-out;	  
}


@keyframes zoomIn2 {
  from {    opacity: 0;transform: scale3d(0, 0, 0);
			-moz-opacity: 0;-moz-transform: scale3d(0, 0, 0);
			-ms-opacity: 0;-ms-transform: scale3d(0, 0, 0);
			-o-opacity: 0;-o-transform: scale3d(0, 0, 0); }
  50% {    opacity: 0;transform: scale3d(0, 0, 0);
		   -moz-opacity: 0;-moz-transform: scale3d(0, 0, 0);
		   -ms-opacity: 0;-ms-transform: scale3d(0, 0, 0);
		   -o-opacity: 0;-o-transform: scale3d(0, 0, 0); }
  100% {    opacity: 1;
		   -moz-opacity: 1;
		   -ms-opacity: 1;
		   -o-opacity: 1;  }
}
@-webkit-keyframes zoomIn2 {
  from {    -webkit-opacity: 0; -webkit-transform: scale3d(0, 0, 0); }
  50% {    -webkit-opacity: 0; -webkit-transform: scale3d(0, 0, 0);  }
  100% {    -webkit-opacity: 1; }
}



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







/*跳跳跳*/
.uptodown {-webkit-animation-duration: 2s;  animation-duration: 2s;  -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) ;}
	
}	


.uptoright {-webkit-animation-duration: 2s;  animation-duration: 2s;  -webkit-animation-name: uptoright;  animation-name: uptoright;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite; -webkit-animation-direction: alternate;animation-direction: alternate;}
@-webkit-keyframes uptoright { 

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


/*心跳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%);} 
	}




.go1 { -webkit-animation:go1 2s linear infinite ;
			   animation:go1 2s linear infinite ;}	
@-webkit-keyframes go1{
	  0%   {opacity:0;-webkit-transform:scale(-0.5); transform:scale(-0.5); }
	  10%  {opacity:1;-webkit-transform:scale(1); transform:scale(1); }
	  80%  {opacity:1;-webkit-transform:scale(1); transform:scale(1); }
	 100%  {opacity:0;-webkit-transform:scale(1); transform:scale(1); }
}
@keyframes go1{
	  0%   {opacity:0;-webkit-transform:scale(-0.5); transform:scale(-0.5); }
	  10%  {opacity:1;-webkit-transform:scale(1); transform:scale(1); }
	  80%  {opacity:1;-webkit-transform:scale(1); transform:scale(1); }
	 100%  {opacity:0;-webkit-transform:scale(1); transform:scale(1); }
}




.righttoleft{-webkit-animation-duration: 25s;  animation-duration: 25s;  -webkit-animation-name: righttoleft;  animation-name:righttoleft;  -webkit-animation-iteration-count: infinite; animation-iteration-count:infinite; }
@-webkit-keyframes righttoleft {
	 0% { transform: translate(0px,0px);  }  
	 100%{ transform: translate(-6000px,0);} 
	 }
@keyframes righttoleft { 
	 0% { transform: translate(0px,0px);  }  
	 100%{ transform: translate(-6000px,0);}	 
	 }



.righttoleft_m{-webkit-animation-duration: 18s;  animation-duration: 18s;  -webkit-animation-name: righttoleft_m;  animation-name:righttoleft_m;  -webkit-animation-iteration-count: infinite; animation-iteration-count:infinite; }
@-webkit-keyframes righttoleft_m {
	 0% { transform: translate(0,0);  }  
	 100%{ transform: translate(-400vw,0);}	 
	 }
@keyframes righttoleft_m { 
	 0% { transform: translate(0,0);  }  
	 100%{ transform: translate(-400vw,0);}	 
	 
	 }




/*短距位移*/
@keyframes fadeInRight_s {
  from {
    opacity: 0;
    transform: translate3d(20%, 0, 0);
  }

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

.fadeInRight_s {
  animation-name: fadeInRight_s;
  animation-duration:1s;
}