/*選單觸動動畫*/
.event img{ display: inline-block;
  
  -webkit-transform: translateZ(0);
  		  transform: translateZ(0);
		  
  -webkit-backface-visibility: hidden;
 		  backface-visibility: hidden;
		  
  -moz-osx-font-smoothing: grayscale;
  
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
		  
  -webkit-transition-property: transform;
          transition-property: transform;}
  
.event img:hover, .event img:focus, .event img:active {
  -webkit-transform: scale(0.95); 
          transform: scale(0.95);}


.main_title2 * {  display: inline-block;
  -webkit-transition: all 0.9s ease;
     -moz-transition: all 0.9s ease;
      -ms-transition: all 0.9s ease;
       -o-transition: all 0.9s ease;
          transition: all 0.9s ease;
}

.main_title2:hover b{
  -webkit-transform: rotate(5deg); 
          transform: rotate(5deg);
  -webkit-transform-origin: bottom top;
		  transform-origin: bottom top;
		 }
.main_title2:hover span{
  -webkit-transform: rotate(3deg); 
          transform: rotate(3deg);
  -webkit-transform-origin: bottom right;
		  transform-origin: bottom right;
		 }


.twinkling {
  -webkit-animation:twinkling 1s;
     -moz-animation:twinkling 1s;
      -ms-animation:twinkling 1s;
       -o-animation:twinkling 1s;
          animation:twinkling 1s;
}
@-webkit-keyframes twinkling {   0% { opacity:0;} 100%{ opacity:1;}}
@keyframes twinkling { 0% { opacity:0;} 100%{ opacity:1;}}




.zoominzoomout {-webkit-animation-duration: 0.8s;  animation-duration: 0.8s;  -webkit-animation-name: zoominzoomout;  animation-name: zoominzoomout;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite; -webkit-animation-direction: alternate;animation-direction: alternate;}
@-webkit-keyframes zoominzoomout {   0% { transform: scale(1); } 100%{ transform: scale(0.95);}}
@keyframes zoominzoomout { 0% { transform: scale(1);} 100%{ transform: scale(0.95);}}




.zoominzoomout {-webkit-animation-duration: 0.8s;  animation-duration: 0.8s;  -webkit-animation-name: zoominzoomout;  animation-name: zoominzoomout;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite; -webkit-animation-direction: alternate;animation-direction: alternate;}
@-webkit-keyframes zoominzoomout {   0% { transform: scale(1); } 100%{ transform: scale(0.90);}}
@keyframes zoominzoomout { 0% { transform: scale(1);} 100%{ transform: scale(0.90);}}


.approch1 {-webkit-animation-duration: 2s;  animation-duration: 2s;  -webkit-animation-name: approch1;  animation-name: approch1;  -webkit-animation-iteration-count: 1;    animation-iteration-count:1; -webkit-animation-direction: alternate;animation-direction: alternate;}
@-webkit-keyframes approch1 { 0% { transform: translate(0,-100px); opacity:0.2 } 100%{ transform: translate(0,0); opacity:1 }}
@keyframes approch1 { 0% { transform: translate(0,-100px); opacity:0.2 } 50%{ transform: translate(0,50px); opacity:0.5 } 100%{ transform: translate(0,0); opacity:1 }}

.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,-30px);  } 100%{ transform: translate(0,0);}}
@keyframes uptodown { 0% { transform: translate(0,-30px);  } 100%{ transform: translate(0,0);}}


.downtoup {-webkit-animation-duration: 2s;  animation-duration: 2s;  -webkit-animation-name: downtoup;  animation-name: downtoup;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite; -webkit-animation-direction: alternate;animation-direction: alternate;}
@-webkit-keyframes downtoup { 0% { transform: translate(0,0);  } 100%{ transform: translate(0,-30px);}}
@keyframes downtoup { 0% { transform: translate(0,0);  } 100%{ transform: translate(0,-30px);}}


/*car*/				  
.hue-rotate-play { -webkit-animation:hue-rotate-play 0.8s linear infinite alternate;
				           animation:hue-rotate-play 0.8s linear infinite alternate;}

	@keyframes hue-rotate-play {
			  10% {
		-webkit-transform: translate(2px, 3px);
				transform: translate(2px, 3px);
	  }
	  20% {
		-webkit-transform: translate(2px, 1px);
				transform: translate(2px, 1px);
	  }
	  30% {
		-webkit-transform: translate(3px, 3px);
				transform: translate(3px, 3px);
	  }
	  40% {
		-webkit-transform: translate(3px, 2px);
				transform: translate(3px, 2px);
	  }
	  50% {
		-webkit-transform: translate(1px, 1px);
				transform: translate(1px, 1px);
	  }
	  60% {
		-webkit-transform: translate(2px, 3px);
				transform: translate(2px, 3px);
	  }
	  70% {
		-webkit-transform: translate(3px, 3px);
				transform: translate(3px, 3px);
	  }
	  80% {
		-webkit-transform: translate(3px, 2px);
				transform: translate(3px, 2px);
	  }
	  90% {
		-webkit-transform: translate(3px, 1px);
				transform: translate(3px, 1px);
	  }
	  98% {
		-webkit-transform: translate(2px, 3px);
				transform: translate(2px, 3px);
	  }
	  100% {
		-webkit-transform: translate(1px, 3px);
				transform: translate(1px, 3px);
	  }
	  
	}


		@-webkit-keyframes hue-rotate-play {

	  10% {
		-webkit-transform: translate(2px, 3px);
				transform: translate(2px, 3px);
	  }
	  20% {
		-webkit-transform: translate(2px, 1px);
				transform: translate(2px, 1px);
	  }
	  30% {
		-webkit-transform: translate(3px, 3px);
				transform: translate(3px, 3px);
	  }
	  40% {
		-webkit-transform: translate(3px, 2px);
				transform: translate(3px, 2px);
	  }
	  50% {
		-webkit-transform: translate(1px, 1px);
				transform: translate(1px, 1px);
	  }
	  60% {
		-webkit-transform: translate(2px, 3px);
				transform: translate(2px, 3px);
	  }
	  70% {
		-webkit-transform: translate(3px, 3px);
				transform: translate(3px, 3px);
	  }
	  80% {
		-webkit-transform: translate(3px, 2px);
				transform: translate(3px, 2px);
	  }
	  90% {
		-webkit-transform: translate(3px, 1px);
				transform: translate(3px, 1px);
	  }
	  98% {
		-webkit-transform: translate(2px, 3px);
				transform: translate(2px, 3px);
	  }
	  100% {
		-webkit-transform: translate(1px, 3px);
				transform: translate(1px, 3px);
	  }

	}

/******延遲出現********/
@-webkit-keyframes fade-in {
         0% {opacity: 0;}  
         40% {opacity: 0;}  
         100% {opacity: 1;}  
     } 
@keyframes fade-in {  
         0% {opacity: 0;}
         40% {opacity: 0;} 
         100% {opacity: 1;}
     }  
/******延遲出現********/