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

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

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

.animated.hinge {
	animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
	animation-duration: .75s;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translate3d(0, -100%, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.fadeInRight {
	animation-name: fadeInRight;
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.fadeInLeft {
	animation-name: fadeInLeft;
}



/*煙火*/
.fadeOut2 {
	animation-name: fadeOut2;
	-webkit-animation-name: fadeOut2;
	animation-duration: 3.6s;
	-webkit-animation-duration: 3.6s;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	/* visibility: visible !important; */
}

@keyframes fadeOut2 {
	0% {
		opacity: 0.0;
		filter: brightness(100%);
	}

	50% {
		transform: scale(0);
		filter: brightness(100%);
		opacity: 0;
	}

	60% {
		transform: scale(0.9);
		filter: brightness(100%);
		opacity: 1;
	}

	95% {
		transform: scale(1.2);
		filter: brightness(100%);
	}

	100% {
		transform:
			/*scale(1)*/
			translateY(10%);
		opacity: 0.0;
	}
}

@-webkit-keyframes fadeOut2 {
	0% {
		opacity: 0.0;
		filter: brightness(100%);
	}

	50% {
		transform: scale(0);
		filter: brightness(100%);
		opacity: 0;
	}

	60% {
		transform: scale(0.9);
		filter: brightness(100%);
		opacity: 1;
	}

	95% {
		transform: scale(1.2);
		filter: brightness(100%);
	}

	100% {
		transform:
			/*scale(1)*/
			translateY(10%);
		opacity: 0.0;
	}
}

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

	100% {
		-webkit-transform: translate(0, 0);
	}
}

@keyframes uptodown-play {
	0% {
		transform: translate(0, -15px);
	}

	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, -15px);
	}
}

@keyframes downtoup-play {
	0% {
		transform: translate(0, 0);
	}

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



/*轉轉3*/
.rotate3-play {
	-webkit-animation: rotate3-play 20s linear infinite;
	animation: rotate3-play 20s linear infinite;
}

@keyframes rotate3-play {
	100% {
		transform: rotate(-360deg);
	}
}

/*背景飄上*/
.bgupup-play {
	-webkit-animation: bgupup-play 40s linear infinite;
	animation: bgupup-play 40s linear infinite;
}

@keyframes bgupup-play {
	100% {
		background-position: center -925px;
	}
}



/*主標微亮*/
.minbright-play {
	-webkit-animation: minbright-play 2s infinite alternate;
	animation: minbright-play 2s infinite alternate;
}

@-webkit-keyframes minbright-play {
	0% {
		filter: brightness(110%);
	}

	100% {
		filter: brightness(100%);
	}
}

@keyframes minbright-play {
	0% {
		filter: brightness(110%);
	}

	100% {
		filter: brightness(100%);
	}
}

.zoomIn2 {
	animation: zoomIn2 2s ease-in-out .5s both;

	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;

}

@keyframes zoomIn2 {
	from {
		opacity: 0;
		transform: scale(0);
	}

	33% {
		opacity: 1;
		transform: scale(2);
	}

	66% {
		opacity: 0;
		transform: scale(.5);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}

}

/*閃光*/
.brightness-play {
	-webkit-animation: brightness2-play 2s -0.14s infinite;
	animation: brightness2-play 2s -0.14s infinite;
}

@keyframes brightness2-play {
	0% {
		filter: brightness(100%);
	}

	88% {
		filter: brightness(100%);
	}

	91% {
		filter: brightness(500%);
	}

	94% {
		filter: brightness(100%);
	}

	97% {
		filter: brightness(500%);
	}

	100% {
		filter: brightness(100%);
	}
}


.lefttoright {
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-name: lefttoright;
	animation-name: lefttoright;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in;
}

@-webkit-keyframes lefttoright {
	0% {
		transform: translate(0, 0px);
		opacity: 0
	}

	25% {
		transform: translate(0, 0px);
		opacity: 0
	}

	50% {
		opacity: 1;
		filter: brightness(130%);
	}

	75% {
		transform: translate(-230px, 0);
		opacity: 0
	}

	100% {
		transform: translate(-230px, 0);
		opacity: 0
	}
}

@keyframes lefttoright {
	0% {
		transform: translate(0, 0px);
		opacity: 0
	}

	25% {
		transform: translate(0, 0px);
		opacity: 0
	}

	50% {
		opacity: 1;
		filter: brightness(130%);
	}

	75% {
		transform: translate(-230px, 0);
		opacity: 0
	}

	100% {
		transform: translate(-230px, 0);
		opacity: 0
	}
}

.righttoleft {
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-name: righttoleft;
	animation-name: righttoleft;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in;
}

@-webkit-keyframes righttoleft {
	0% {
		transform: translate(0, 0px);
		opacity: 0
	}

	25% {
		transform: translate(0, 0px);
		opacity: 0
	}

	50% {
		opacity: 1
	}

	75% {
		transform: translate(230px, 0);
		opacity: 0
	}

	100% {
		transform: translate(230px, 0);
		opacity: 0
	}
}

@keyframes righttoleft {
	0% {
		transform: translate(0, 0px);
		opacity: 0
	}

	25% {
		transform: translate(0, 0px);
		opacity: 0
	}

	50% {
		opacity: 1
	}

	75% {
		transform: translate(230px, 0);
		opacity: 0
	}

	100% {
		transform: translate(230px, 0);
		opacity: 0
	}
}

/*熱*/
.hue-rotate-play {
	-webkit-animation: hue-rotate-play 5s infinite alternate;
	animation: hue-rotate-play 5s infinite alternate;
}

@keyframes hue-rotate-play {
	0% {
		filter: brightness(100%) hue-rotate(0deg);
	}

	20% {
		filter: brightness(100%) hue-rotate(0deg);
	}

	40% {
		filter: brightness(100%) hue-rotate(0deg);
	}

	60% {
		filter: brightness(130%) hue-rotate(0deg);
	}

	100% {
		filter: brightness(100%) hue-rotate(0deg);
	}
}

@-webkit-keyframes hue-rotate-play {
	0% {
		filter: brightness(100%) hue-rotate(0deg);
	}

	20% {
		filter: brightness(100%) hue-rotate(0deg);
	}

	40% {
		filter: brightness(100%) hue-rotate(0deg);
	}

	60% {
		filter: brightness(115%) hue-rotate(0deg);
	}

	100% {
		filter: brightness(100%) hue-rotate(0deg);
	}
}



@keyframes shake {
	from {
		transform: rotate(-10deg);
		transform-origin: 0% 100%;
	}

	to {
		transform: rotate(20deg);
		transform-origin: 0% 100%
	}
}

.shake {
	animation-name: shake;
	opacity: 1;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}



@keyframes shake2 {
	from {
		transform: rotate(10deg);
		transform-origin: 100% 100%;
	}

	to {
		transform: rotate(-20deg);
		transform-origin: 100% 100%
	}
}

.shake2 {
	animation-name: shake2;
	opacity: 1;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}



@keyframes shake3 {
	from {
		transform: rotate(-10deg);
		transform-origin: 0% 100%;
	}

	to {
		transform: rotate(20deg);
		transform-origin: 0% 100%
	}
}

.shake3 {
	animation-name: shake3;
	opacity: 1;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}



@keyframes shake4 {
	from {
		transform: rotate(10deg);
		transform-origin: 100% 100%;
	}

	to {
		transform: rotate(-20deg);
		transform-origin: 100% 100%
	}
}

.shake4 {
	animation-name: shake4;
	opacity: 1;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}