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



@-webkit-keyframes jello3 {
  0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}
    22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}
    33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}
    44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}
    55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}
    66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}
    77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}
    88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}
}

@keyframes jello3 {
  0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}
    22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}
    33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}
    44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}
    55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}
    66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}
    77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}
    88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}
}

.jello3 {
  -webkit-animation-name: jello3;
  animation-name: jello3;
}


@-webkit-keyframes tada2 {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  60%,
  68% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  72%,
  76%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  70%,
  74%,
  78% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada2 {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  60%,
  68% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  72%,
  76%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  70%,
  74%,
  78% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada2 {
  -webkit-animation-name: tada2;
  animation-name: tada2;

}



@-webkit-keyframes jello2 {
  from,
  70%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  72% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  74% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  76% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  78% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  80% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  85% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello2 {
  from,
  70%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  72% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  74% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  76% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  78% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  80% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  85% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello2 {
  -webkit-animation-name: jello2;
  animation-name: jello2;
  -webkit-transform-origin: center;
  transform-origin: center;
}


/* -----從上漸入20%------ */
@keyframes flyin {
	0% {opacity: 0;}
	100% {opacity: 1;}
	0%{transform: translateY(-20%);}
	100%{transform: translateY(0);}
  }

@-webkit-keyframes flyin {
	0% {opacity: 0;}
	100% {opacity: 1;}
	0%{transform: translateY(-20%);}
	100%{transform: translateY(0);}
  }

.flyin {
  -webkit-animation-name: flyin;
	animation-name: flyin;

}


/* -----從上漸入5% 內頁特效------ */
@keyframes pageIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
	0%{transform: translateY(-5%);}
	100%{transform: translateY(0);}
}

@-webkit-keyframes pageIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
	0%{transform: translateY(-5%);}
	100%{transform: translateY(0);}
}

.pageIn {
  -webkit-animation-name: pageIn;
	animation-name: pageIn;
}	
	


/* -----點綴動畫------ */
/* -----慢慢往上------ */
@-webkit-keyframes menu-hover {
	0% {transform: translateY(0);}
	100% {transform: translateY(-4%);}

}

@keyframes menu-hover {
	0% {transform: translateY(0);}
	100% {transform: translateY(-4%);}

}

.menu-hover {
  -webkit-animation-name: menu-hover;
	animation-name: menu-hover;
}

/* -----上下浮動02------ */
@keyframes wave {
	0% {transform: translateY(3%);}
	50% {transform: translateY(0);}
	100% {transform: translateY(3%);}
}

@-webkit-keyframes wave {
	0% {transform: translateY(3%);}
	50% {transform: translateY(0);}
	100% {transform: translateY(3%);}
}

.wave {
  -webkit-animation-name: wave;
	animation-name: wave;
}



/* 掃光1 */
@keyframes light1{
	0% {
	  opacity: 0;
	}
	50% {
	  opacity: 1;		
	}	
	100% {
	  opacity: 0;

	}
}

@-webkit-keyframes light1{
	0% {
	  opacity: 0;

	}
	50% {
	  opacity: 1;		
	}	
	100% {
	  opacity: 0;

	}
}


/* 掃光2 */
@keyframes light2{
	0% {
	  opacity: 0;
	  left:80%;
	}
	50% {
	  opacity: 1;		
	}	
	100% {
	  opacity: 0;
	  left:10%;
	}
}

@-webkit-keyframes light2{
	0% {
	  opacity: 0;
	  left:80%;
	}
	50% {
	  opacity: 1;		
	}	
	100% {
	  opacity: 0;
	  left:10%;
	}
}


@keyframes lighting {
	  0% { 
		filter:opacity(0%);
	  }
	  25% { 
		filter:opacity(50%);
	  }
	  50% { 
		filter:opacity(100%);
	  }
	  75% { 
		filter:opacity(50%);
	  }
	  100% { 
		filter:opacity(0%);
	  }	  
	}

@-webkit-keyframes lighting {
	  0% { 
		filter:opacity(0%);
	  }
	  25% { 
		filter:opacity(50%);
	  }
	  50% { 
		filter:opacity(100%);
	  }
	  75% { 
		filter:opacity(50%);
	  }
	  100% { 
		filter:opacity(0%);
	  }	  
	}


/* 往上漸淡 */
@keyframes fadein_move{
   0% {
	 opacity: 0;  
     transform: translateY(0);
   }
   50% {
	 opacity: 1;
     transform: translateY(-15%);
   }
   100% {
	 opacity: 0;  	   
     transform: translateY(-30%);
   }
}

@-webkit-keyframes fadein_move{
   0% {
	 opacity: 0;  
     transform: translateY(0);
   }
   50% {
	 opacity: 1;
     transform: translateY(-15%);
   }
   100% {
	 opacity: 0;  	   
     transform: translateY(-30%);
   }
}


@keyframes move {
	0% {
		transform: translateY(0);
	}
	
	100% {
		transform: translateY(20%);
	}
}

@-webkit-keyframes move {
	0% {
		transform: translateY(0);
	}
	
	100% {
		transform: translateY(20%);
	}
}

@keyframes move2 {
	0% {transform: translateY(0);}
	50% {transform: translateY(3%);}
	100% {transform: translateY(0);}
}

@-webkit-keyframes move2 {
	0% {transform: translateY(0);}
	50% {transform: translateY(3%);}
	100% {transform: translateY(0);}
}

@keyframes move3 {
	0% {transform: translateY(0);}
	50% {transform: translateY(-10%);}
	100% {transform: translateY(0);}
}

@-webkit-keyframes move3 {
	0% {transform: translateY(0);}
	50% {transform: translateY(-10%);}
	100% {transform: translateY(0);}
}

/* Menu的動態 */
@keyframes Birds{
	0%{background-position: 0 0;}
	12.5%{background-position: 0 -80px;}
	25%{background-position: 0 -160px;}
	37.5%{background-position: 0 -240px;}
	50%{background-position: 0 -320px;}
	62.5%{background-position: 0 -400px;}
	75%{background-position: 0 -480px;}
	100%{background-position: 0 -560px;}
}

@-webkit-keyframes Birds{
	0%{background-position: 0 0;}
	12.5%{background-position: 0 -80px;}
	25%{background-position: 0 -160px;}
	37.5%{background-position: 0 -240px;}
	50%{background-position: 0 -320px;}
	62.5%{background-position: 0 -400px;}
	75%{background-position: 0 -480px;}
	100%{background-position: 0 -560px;}
}

/* -----大標閃亮------ */
@keyframes title_glow{ 
 0%{filter: brightness(1);}
 10%{filter: brightness(1.02);}
 20%{filter: brightness(1);}
 30%{filter: brightness(1);}
 40%{filter: brightness(1);}
 50%{filter: brightness(1);}
 60%{filter: brightness(1);}
 70%{filter: brightness(1.02);}
 80%{filter: brightness(1);}
 90%{filter: brightness(1.1);}
 100%{filter: brightness(1);}
}

@-webkit-keyframes title_glow{ 
  0%{filter: brightness(1);}
  10%{filter: brightness(1.02);}
  20%{filter: brightness(1);}
  30%{filter: brightness(1);}
  40%{filter: brightness(1);}
  50%{filter: brightness(1);}
  60%{filter: brightness(1);}
  70%{filter: brightness(1.02);}
  80%{filter: brightness(1);}
  90%{filter: brightness(1.1);}
  100%{filter: brightness(1);}
 }

/* -----大煙火閃亮------ */
@keyframes Fire_Works { 
  0%{filter: brightness(0.5);}
  10%{filter: brightness(1.07);}
  20%{filter: brightness(1);}
  60%{filter: brightness(0.5);}
  70%{filter: brightness(1.07);}
  80%{filter: brightness(1);}
  90%{filter: brightness(1.3);}
  100%{filter: brightness(0.5);}
}

@-webkit-keyframes Fire_Works { 
  0%{filter: brightness(0.5);}
  10%{filter: brightness(1.07);}
  20%{filter: brightness(1);}
  60%{filter: brightness(0.5);}
  70%{filter: brightness(1.07);}
  80%{filter: brightness(1);}
  90%{filter: brightness(1.3);}
  100%{filter: brightness(0.5);}
}

@keyframes smoke {
  0% {opacity: 1;}
  25% {opacity: 0.5;}
  50% {opacity: 0;}
  75% {opacity: 0.5;}
  100% {opacity: 1;}
}