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

.fanzhuan {
 -webkit-animation:flipInX 1.2s .2s ease both;
-moz-animation:flipInX 1.2s .2s ease both;
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform:perspective(400px) rotateX(90deg);
opacity:0
}
40% {
-webkit-transform:perspective(400px) rotateX(-10deg)
}
70% {
-webkit-transform:perspective(400px) rotateX(10deg)
}
100% {
-webkit-transform:perspective(400px) rotateX(0deg);
opacity:1
}
}
@-moz-keyframes flipInX {
0% {
-moz-transform:perspective(400px) rotateX(90deg);
opacity:0
}
40% {
-moz-transform:perspective(400px) rotateX(-10deg)
}
70% {
-moz-transform:perspective(400px) rotateX(10deg)
}
100% {
-moz-transform:perspective(400px) rotateX(0deg);
opacity:1
}
}
.leftIn {
 -webkit-animation:fadeInLeftBig .7s ease both;
 -moz-animation:fadeInLeftBig .7s ease both;
}
 @-webkit-keyframes fadeInLeftBig {
 0% {
opacity:0;
 -webkit-transform:translateX(-1000px)
}
 100% {
opacity:1;
 -webkit-transform:translateX(0)
}
}
 @-moz-keyframes fadeInLeftBig {
 0% {
opacity:0;
 -moz-transform:translateX(-1000px)
}
 100% {
opacity:1;
 -moz-transform:translateX(0)
}
}
.rightIn {
 -webkit-animation:fadeInRightBig .7s .32s ease both;
 -moz-animation:fadeInRightBig .7s .32s ease both;
}
 @-webkit-keyframes fadeInRightBig {
 0% {
opacity:0;
 -webkit-transform:translateX(1000px)
}
 100% {
opacity:1;
 -webkit-transform:translateX(0)
}
}
 @-moz-keyframes fadeInRightBig {
 0% {
opacity:0;
 -moz-transform:translateX(1000px)
}
 100% {
opacity:1;
 -moz-transform:translateX(0)
}
}
.fadeIn {
-webkit-animation:fadeIn 2s .2s ease both;
-moz-animation:fadeIn 2s .2s ease both;
}
@-webkit-keyframes fadeIn {
0% {
opacity:0
}
100% {
opacity:1
}
}
@-moz-keyframes fadeIn {
0% {
opacity:0
}
100% {
opacity:1
}
}
.cycleIn {
	-webkit-animation:bounceIn 0.8s ease both;
	-moz-animation:bounceIn 0.8s ease both;
}
 @-webkit-keyframes bounceIn {
 0% {
opacity:0;
 -webkit-transform:scale(.5)
}
 50% {
opacity:1;
 -webkit-transform:scale(1.05)
}
 70% {
-webkit-transform:scale(.95)
}
 100% {
-webkit-transform:scale(1)
}
}
 @-moz-keyframes bounceIn {
 0% {
opacity:0;
 -moz-transform:scale(.5)
}
 50% {
opacity:1;
 -moz-transform:scale(1.05)
}
 70% {
-moz-transform:scale(.95)
}
 100% {
-moz-transform:scale(1)
}
}
.scaleFadeIn {
	-webkit-animation:scaleFadeIn 1.2s ease both;
	-moz-animation:scaleFadeIn 1.2s ease both;
}
 @-webkit-keyframes scaleFadeIn {
 0% {
opacity:0;
-webkit-transform:scale(.5)
}
 100% {
opacity:1;
-webkit-transform:scale(1)
}
}
 @-moz-keyframes scaleFadeIn {
 0% {
opacity:0;
-moz-transform:scale(.5)
}
 100% {
opacity:1;
-moz-transform:scale(1)
}
}
.topIn {
-webkit-animation:fadeInDown 1s .2s ease both;
-moz-animation:fadeInDown 1s .2s ease both;
}
@-webkit-keyframes fadeInDown {
0% {
opacity:0;
-webkit-transform:translateY(-30px)
}
100% {
opacity:1;
-webkit-transform:translateY(0)
}
}
@-moz-keyframes fadeInDown {
0% {
opacity:0;
-moz-transform:translateY(-30px)
}
100% {
opacity:1;
-moz-transform:translateY(0)
}
}
.topAndDown {
	-webkit-animation-name: slidedownani;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-out;
	-moz-animation-name: slidedownani;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: ease-out;
	-ms-animation-name: slidedownani;
	-ms-animation-duration: 2s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function: ease-out;
}
@-webkit-keyframes slidedownani {
 0% {
 -webkit-transform: translateY(0);
}
 50% {
 -webkit-transform: translateY(10px);
}
 100% {
 -webkit-transform: translateY(0);
}
}
@-moz-keyframes slidedownani {
 0% {
 -moz-transform: translateY(0);
}
 50% {
 -moz-transform: translateY(10px);
}
 100% {
 -moz-transform: translateY(0);
}
}
@-ms-keyframes slidedownani {
0% {
-ms-transform: translateY(0);
}
50% {
-ms-transform: translateY(20px);
}
100% {
-ms-transform: translateY(0);
}
}
.rotate {
 -webkit-animation:rotateIn 1s .2s ease both;
-moz-animation:rotateIn 1s .2s ease both;
}
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin:center center;
-webkit-transform:rotate(-200deg);
opacity:0
}
100% {
-webkit-transform-origin:center center;
-webkit-transform:rotate(0);
opacity:1
}
}
@-moz-keyframes rotateIn {
0% {
-moz-transform-origin:center center;
-moz-transform:rotate(-200deg);
opacity:0
}
100% {
-moz-transform-origin:center center;
-moz-transform:rotate(0);
opacity:1
}
}
.bounceTop {
-webkit-animation:bounceInDown 1.4s .4s ease both;
-moz-animation:bounceInDown 1.4s .4s ease both;
}
@-webkit-keyframes bounceInDown {
0% {
opacity:0;
-webkit-transform:translateY(-1000px)
}
60% {
-webkit-transform:translateY(30px)
}
80% {
-webkit-transform:translateY(-10px)
}
100% {
opacity:1;
-webkit-transform:translateY(0)
}
}
@-moz-keyframes bounceInDown {
0% {
opacity:0;
-moz-transform:translateY(-1000px)
}
60% {
-moz-transform:translateY(30px)
}
80% {
-moz-transform:translateY(-10px)
}
100% {
opacity:1;
-moz-transform:translateY(0)
}
}
.xRotation {
-webkit-animation:flipInX 1s .2s ease both;
-moz-animation:flipInX 1s .2s ease both;
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform:perspective(400px) rotateX(90deg);
opacity:0
}
40% {
-webkit-transform:perspective(400px) rotateX(-10deg)
}
70% {
-webkit-transform:perspective(400px) rotateX(10deg)
}
100% {
-webkit-transform:perspective(400px) rotateX(0deg);
opacity:1
}
}
@-moz-keyframes flipInX {
0% {
-moz-transform:perspective(400px) rotateX(90deg);
opacity:0
}
40% {
-moz-transform:perspective(400px) rotateX(-10deg)
}
70% {
-moz-transform:perspective(400px) rotateX(10deg)
}
100% {
-moz-transform:perspective(400px) rotateX(0deg);
opacity:1
}
}
.fadeFromDown {
-webkit-animation:fadeInUp 1s .2s ease both;
-moz-animation:fadeInUp 1s .2s ease both;
}
@-webkit-keyframes fadeInUp {
0% {
opacity:0;
-webkit-transform:translateY(50px)
}
100% {
opacity:1;
-webkit-transform:translateY(0)
}
}
@-moz-keyframes fadeInUp {
0% {
opacity:0;
-moz-transform:translateY(50px)
}
100% {
opacity:1;
-moz-transform:translateY(0)
}
}
.fadeInRight {
-webkit-animation:fadeInRight 0.8s .2s ease both;
-moz-animation:fadeInRight 0.8s .2s ease both;
}
@-webkit-keyframes fadeInRight {
0% {
opacity:0;
-webkit-transform:translateX(60px)
}
50% {
opacity:0.2;
}
100% {
opacity:1;
-webkit-transform:translateX(0)
}
}
@-moz-keyframes fadeInRight {
0% {
opacity:0;
-moz-transform:translateX(60px)
}
50% {
opacity:0.2;
}
100% {
opacity:1;
-moz-transform:translateX(0)
}
}
.fadeInLeft {
-webkit-animation:fadeInLeft 0.8s .2s ease both;
-moz-animation:fadeInLeft 0.8s .2s ease both;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity:0;
-webkit-transform:translateX(-60px)
}
50% {
opacity:0.2;
}
100% {
opacity:1;
-webkit-transform:translateX(0)
}
}
@-moz-keyframes fadeInLeft {
0% {
opacity:0;
-moz-transform:translateX(-60px)
}
50% {
opacity:0.2;
}
100% {
opacity:1;
-moz-transform:translateX(0)
}
}
.scaleRotation {
	-webkit-animation:scaleRotation 0.7s ease both;
	-moz-animation:scaleRotation 0.7s ease both;
}
 @-webkit-keyframes scaleRotation {
 0% {
-webkit-transform:scale(1);
}
 50% {
-webkit-transform:scale(1.02)
}
 100% {
-webkit-transform:scale(1);
}
}
 @-moz-keyframes scaleRotation {
 0% {
-moz-transform:scale(1);
}
 50% {
-moz-transform:scale(1.02);
}
 100% {
-moz-transform:scale(1);
}
}

.delay-l{animation-delay:.2s;-webkit-animation-delay:.2s;}
.delay-2{animation-delay:.4s;-webkit-animation-delay:.4s;}
.delay-3{animation-delay:.6s;-webkit-animation-delay:.6s;}
.delay-4{animation-delay:.8s;-webkit-animation-delay:.8s;}
.delay-1s{animation-delay:1s;-webkit-animation-delay:1s;}
.delay-1_2s{animation-delay:1.2s;-webkit-animation-delay:1.2s;}
.delay-1_4s{animation-delay:1.4s;-webkit-animation-delay:1.4s;}
.delay-1_6s{animation-delay:1.6s;-webkit-animation-delay:1.6s;}
.delay-1_8s{animation-delay:1.8s;-webkit-animation-delay:1.8s;}
.delay-2s{animation-delay:2s;-webkit-animation-delay:2s;}
.delay-3s{animation-delay:3s;-webkit-animation-delay:3s;}
.delay-4s{animation-delay:4s;-webkit-animation-delay:4s;}
.delay-15s{animation-delay:15s;-webkit-animation-delay:15s;}