@CHARSET "UTF-8";

#mz_wrap{background:;width:100%;text-decoration:none; margin:0 auto; padding:0}
#mz_article{position:relative; overflow:hidden;width:320px;height:48px; margin:0 auto}
#mz_m_icon {width:320px; position:relative; margin-top:28px; text-align:right}
#mz_first {position:absolute; left:0; top:0}
#mz_first.active  {left:0; top:0;
			-webkit-animation:mz_flip 0.8s 1;
			-moz-animation:mz_flip 0.8s 1;
			-ms-animation:mz_flip 0.8s 1;
			-o-animation:mz_flip 0.8s 1;
			}
			
/* animate */
@-webkit-keyframes mz_flip {
	0% {
		-webkit-transform: perspective(320px) rotateY(0);
		-webkit-animation-timing-function: ease-out;
	}
	40% {
		-webkit-transform: perspective(320px) translateZ(150px) rotateY(170deg);
		-webkit-animation-timing-function: ease-out;
	}
	50% {
		-webkit-transform: perspective(320px) translateZ(150px) rotateY(190deg) scale(1);
		-webkit-animation-timing-function: ease-in;
	}
	80% {
		-webkit-transform: perspective(320px) rotateY(360deg) scale(.95);
		-webkit-animation-timing-function: ease-in;
	}
	100% {
		-webkit-transform: perspective(320px) scale(1);
		-webkit-animation-timing-function: ease-in;
	}
}
@-moz-keyframes mz_flip {
	0% {
		-moz-transform: perspective(320px) rotateY(0);
		-moz-animation-timing-function: ease-out;
	}
	40% {
		-moz-transform: perspective(320px) translateZ(150px) rotateY(170deg);
		-moz-animation-timing-function: ease-out;
	}
	50% {
		-moz-transform: perspective(320px) translateZ(150px) rotateY(190deg) scale(1);
		-moz-animation-timing-function: ease-in;
	}
	80% {
		-moz-transform: perspective(320px) rotateY(360deg) scale(.95);
		-moz-animation-timing-function: ease-in;
	}
	100% {
		-moz-transform: perspective(320px) scale(1);
		-moz-animation-timing-function: ease-in;
	}
}
@-o-keyframes mz_flip {
	0% {
		-o-transform: perspective(320px) rotateY(0);
		-o-animation-timing-function: ease-out;
	}
	40% {
		-o-transform: perspective(320px) translateZ(150px) rotateY(170deg);
		-o-animation-timing-function: ease-out;
	}
	50% {
		-o-transform: perspective(320px) translateZ(150px) rotateY(190deg) scale(1);
		-o-animation-timing-function: ease-in;
	}
	80% {
		-o-transform: perspective(320px) rotateY(360deg) scale(.95);
		-o-animation-timing-function: ease-in;
	}
	100% {
		-o-transform: perspective(320px) scale(1);
		-o-animation-timing-function: ease-in;
	}
}
@keyframes mz_flip {
	0% {
		transform: perspective(320px) rotateY(0);
		animation-timing-function: ease-out;
	}
	40% {
		transform: perspective(320px) translateZ(150px) rotateY(170deg);
		animation-timing-function: ease-out;
	}
	50% {
		transform: perspective(320px) translateZ(150px) rotateY(190deg) scale(1);
		animation-timing-function: ease-in;
	}
	80% {
		transform: perspective(320px) rotateY(360deg) scale(.95);
		animation-timing-function: ease-in;
	}
	100% {
		transform: perspective(320px) scale(1);
		animation-timing-function: ease-in;
	}
}

.mz_flip {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: mz_flip;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: mz_flip;
	-o-backface-visibility: visible !important;
	-o-animation-name: mz_flip;
	backface-visibility: visible !important;
	animation-name: mz_flip;
}