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

/*slogan強力進入的動態*/
@-webkit-keyframes bounceOut2 {
	0% {
	  opacity: 0.5;
	  -webkit-transform: scale3d(5, 5, 5);
	  transform: scale3d(5, 5, 5);
	}
	20% {
	  opacity: 0.3;
	  -webkit-transform: scale3d(0.1, 0.1, 0.1);
	  transform: scale3d(0.1, 0.1, 0.1);
	}
	50%, 55% {
	  opacity: 0.5;
	  -webkit-transform: scale3d(1.1, 1.1, 1.1);
	  transform: scale3d(1.1, 1.1, 1.1);
	}
  
	to {
	  opacity: 1;
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
  }
  
  @keyframes bounceOut2 {
	0% {
	  opacity: 0.5;
	  -webkit-transform: scale3d(5, 5, 5);
	  transform: scale3d(5, 5, 5);
	}
	20% {
	  opacity: 0.3;
	  -webkit-transform: scale3d(0.1, 0.1, 0.1);
	  transform: scale3d(0.1, 0.1, 0.1);
	}
  
	50%, 55% {
	  opacity: 0.5;
	  -webkit-transform: scale3d(1.1, 1.1, 1.1);
	  transform: scale3d(1.1, 1.1, 1.1);
	}
  
	to {
	  opacity: 1;
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
  }

  .bounceOut2 {
    -webkit-animation-name: bounceOut2;
    animation-name: bounceOut2;
  }
  
.pulse2{
	animation-name: pulse2;
	-webkit-animation-name: pulse2;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse2 {
	0% {
		transform: scale(1);
	
	}
	50% {
		transform: scale(0.9);

	}	
	100% {
		transform: scale(1);

	}			
}

@-webkit-keyframes pulse2 {
	0% {
		transform: scale(1);
	
	}
	50% {
		transform: scale(0.9);

	}	
	100% {
		transform: scale(1);

	}			
}



@-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 upmove {
	0%{transform: translateY(0);}
	100%{transform: translateY(-5%);}
  }

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

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

}

/* -----從上漸入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(5%);}
	50% {transform: translateY(0);}
	100% {transform: translateY(5%);}
}

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

.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: translateX(0);
	}
	
	50% {
		transform: translateX(12%);
	}
	
	100% {
		transform: translateX(0);
	}
}

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



@keyframes fishmove {
	20% {
		transform: rotate(0);
	}
	100% {
		/* 顺时针旋转90度 */
		transform: rotate(5deg);
	}
}

@-webkit-keyframes fishmove {
	20% {
		transform: rotate(0);
	}
	100% {
		/* 顺时针旋转 */
		transform: rotate(5deg);
	}
}

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


@keyframes fishmove2 {
	20% {
		transform: rotate(0);
	}
	100% {
		/* 顺时针旋转90度 */
		transform: rotate(-5deg);
	}
}

@-webkit-keyframes fishmove2 {

	20% {
		transform: rotate(0);
	}
	100% {
		/* 逆时针旋转 */
		transform: rotate(-5deg);
	}
}

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


/* 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 shine1{
  0%{
    filter:brightness(.9);
    }
 50%{
    filter:brightness(1);
  }
  100%{
      filter:brightness(.9);
    }
  }

@-webkit-keyframes shine1{
  0%{
    filter:brightness(.9);
    }
 50%{
    filter:brightness(1);
  }
  100%{
      filter:brightness(.9);
    }
  }


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

}

/* 發光的動態 */
@keyframes shine2{
  0%{

    filter:brightness(1);
    }
 50%{

    filter:brightness(2);

  }
  100%{

     filter:brightness(1);
    }
  }

@-webkit-keyframes shine2{
  0%{

    filter:brightness(1);
    }
 50%{

    filter:brightness(2);

  }
  100%{

     filter:brightness(1);
    }

  }

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

}

/* 放大進場動態 */
@-webkit-keyframes zoomIn_big {
	0% {
	  opacity:0; transform: scale(3,3); 
	}
	100% {
	  opacity:1; transform: scale(1,1); 
	}
}

@keyframes zoomIn_big {
	0% {
	  opacity:0; transform: scale(3,3); 
	}
	100% {
	  opacity:1; transform: scale(1,1); 
	}
}

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


@-webkit-keyframes titlezoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(2, 2, 2);
    transform: scale3d(2, 2, 2);
  }

  50% {
    opacity: 1;
  }
}

@keyframes titlezoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(2, 2, 2);
    transform: scale3d(2, 2, 2);
  }

  50% {
    opacity: 1;
  }
}

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

/* 呼吸燈 */
@-webkit-keyframes breath {
	from {
		opacity: 1;
	}
	50% {
		opacity: 2;
	}
	to {
		opacity: 1;
	}
}

@keyframes breath {
	from {
		opacity: 1;
	}
	50% {
		opacity: 2;
	}
	to {
		opacity: 1;
	}
}

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