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

/*--動態--*/



.animated {
  animation-iteration-count: infinite;
  -webkit-animation-duration: 0.1s;
  animation-duration: 0.1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-timing-function: ease;
  animation-delay:0.1s; /*等待0.5秒，然后开始动画：*/
  -webkit-animation-delay:0.1s; /* Safari 和 Chrome */}




.pulse{
	animation-name: pulse;
	-webkit-animation-name: pulse;	
	animation-duration: 1.0s;	
	-webkit-animation-duration: 1.0s;
	animation-iteration-count: infinite;/*重複播放*/
	-webkit-animation-iteration-count: infinite;/*重複播放*/
}

@keyframes pulse {
	0% {
		transform: scale(0.9);
		opacity: 1;		
	}
	50% {
		transform: scale(1);
		opacity: 1;	
	}	
	100% {
		transform: scale(0.9);
		opacity: 1;	
	}	
}

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


.floating{
	animation: float 3s infinite ease-in-out alternate;
	animation-name: floating;
	-webkit-animation-name: floating;
}

@-webkit-keyframes floating {
	from,
    to {
        transform: transofrmY(0);
    }
    50% {
        transform: translateY(8px);
    }	
}
@-moz-keyframes floating {
	from,
    to {
        transform: transofrmY(0);
    }
    50% {
        transform: translateY(8px);
    }
}
@-o-keyframes floating {
	from,
    to {
        transform: transofrmY(0);
    }
    50% {
        transform: translateY(8px);
    }	
}
@keyframes floating {
	from,
    to {
        transform: transofrmY(0);
    }
    50% {
        transform: translateY(8px);
    }	
}

.animated2 {
-webkit-animation:fadeInUp 1s .2s ease both;
-moz-animation:fadeInUp 1s .2s ease both;

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

/*彈起*/
.animation3 {
	-webkit-animation:bounce 3s .2s ease both;
	-moz-animation:bounce 3s .2s ease both;
	animation-iteration-count: infinite;/*重複播放*/
	-webkit-animation-iteration-count: infinite;/*重複播放*/
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform:translateY(0)
}
40% {
-webkit-transform:translateY(-20px)
}
60% {
-webkit-transform:translateY(-10px)
}
}
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform:translateY(0)
}
40% {
-moz-transform:translateY(-20px)
}
60% {
-moz-transform:translateY(-10px)
}
}






.floatX{
	animation-delay:1s; /*等待0.5秒，然后开始动画：*/
	animation-name: floatX;
	-webkit-animation-name: floatX;

	animation-duration: 5s;	
	-webkit-animation-duration: 5s;

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

@keyframes floatX {
	0% {
		transform: translateX(0%);	
	}
	50% {
		transform: translateX(0.8%);	
	}	
	100% {
		transform: translateX(0%);
	}			
}

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




/*.fadeInUp*/
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
}

.animated-fast {
    -webkit-animation-duration: .1s;
    animation-duration: .1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
	
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    visibility: hidden;
    /*-webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);*/
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }

  to {
    opacity: 1;
    /*visibility: visible;*/
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    visibility: hidden;
    /*-webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);*/
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }

  to {
    visibility: visible;
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}




/*彈簧效果*/
.animated.bounceIn {
	animation-delay:0s;
    -webkit-animation-delay:0s; 
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

@-webkit-keyframes bounceIn {
  0%, 7%, 35%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000, 1.000);
  }

  0% {
    opacity: 1;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  7% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  
  35% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  0%, 7%, 35%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000, 1.000);
  }

  0% {
    opacity: 1;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  7% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  
  35% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}