/********************************************************
***************************特效*******************************/

/* CSS Document */
.animatedk_1 {
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	     -o-animation-duration: 1s;
	        animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}

.animated_2 {
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	     -o-animation-duration: 1s;
	        animation-duration: 1s;
	   -webkit-animation-delay:1s;
	      -moz-animation-delay: 1s;
	        -o-animation-delay: 1s;
	           animation-delay: 1s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}
.animated_3 {
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	     -o-animation-duration: 1s;
	        animation-duration: 1s;
	    -webkit-animation-delay:2s;
	      -moz-animation-delay: 2s;
	        -o-animation-delay: 2s;
	           animation-delay: 2s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}
.animated_4 {
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	     -o-animation-duration: 1s;
	        animation-duration: 1s;
	    -webkit-animation-delay:3s;
	      -moz-animation-delay: 3s;
	        -o-animation-delay: 3s;
	           animation-delay: 3s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}
.animated_5 {
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	     -o-animation-duration: 1s;
	        animation-duration: 1s;
	    -webkit-animation-delay:4s;
	      -moz-animation-delay: 4s;
	        -o-animation-delay: 4s;
	           animation-delay: 4s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}
/*以下效果需附加animated属性*/

/*定义属性：changeBig*/

.changeBig{
    -webkit-animation-name:changeBig;
	-moz-animation-name: changeBig;
	-o-animation-name: changeBig;
	animation-name: changeBig;
	}
@-webkit-keyframes changeBig{
	0%{opacity:0; -webkit-transform:scale(0,0);}
	40%{opacity:1; -webkit-transform:scale(1,1);}
	70%{opacity:1; -webkit-transform:scale(.5,.5);}
	100%{opacity:1; -webkit-transform:scale(1,1);}
	}
@-moz-keyframes changeBig {
	0%{opacity:0; -webkit-transform:scale(0,0);}
	40%{opacity:1; -webkit-transform:scale(1,1);}
	70%{opacity:1; -webkit-transform:scale(.5,.5);}
	100%{opacity:1; -webkit-transform:scale(1,1);}
}
@-o-keyframes changeBig {
	0%{opacity:0; -webkit-transform:scale(0,0);}
	40%{opacity:1; -webkit-transform:scale(1,1);}
	70%{opacity:1; -webkit-transform:scale(.5,.5);}
	100%{opacity:1; -webkit-transform:scale(1,1);}
}
@keyframes changeBig {
	0%{opacity:0; -webkit-transform:scale(0,0);}
	40%{opacity:1; -webkit-transform:scale(1,1);}
	70%{opacity:1; -webkit-transform:scale(.5,.5);}
	100%{opacity:1; -webkit-transform:scale(1,1);}
}

/* 定义属性：fadeInDown */
.page01.show .fadeInDown{
	-webkit-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-o-animation-name: fadeInDown;
	animation-name: fadeInDown;
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	     -o-animation-duration: 1s;
	        animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
	0% {opacity: 0;-webkit-transform: translateY(-20px);}
	100% {opacity: 1;-webkit-transform: translateY(0);}
}
@-moz-keyframes fadeInDown {
	0% {opacity: 0;-moz-transform: translateY(-20px);}
	100% {opacity: 1;-moz-transform: translateY(0);}
}
@-o-keyframes fadeInDown {
	0% {opacity: 0;-o-transform: translateY(-20px);}
	100% {opacity: 1;-o-transform: translateY(0);}
}
@keyframes fadeInDown {
	0% {opacity: 0;transform: translateY(-20px);}
	100% {opacity: 1;transform: translateY(0);}
}


/* 定义属性：fadeInUp */
.fadeInUp {
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUp {
	0% {opacity: 0;-webkit-transform: translateY(100px);}
	100% {opacity: 1;-webkit-transform: translateY(0);}
}
@-moz-keyframes fadeInUp {
	0% {opacity: 0;-moz-transform: translateY(100px);}
	100% {opacity: 1;-moz-transform: translateY(0);}
}
@-o-keyframes fadeInUp {
	0% {opacity: 0;-o-transform: translateY(100px);}
	100% {opacity: 1;-o-transform: translateY(0);}
}
@keyframes fadeInUp {
	0% {opacity: 0;transform: translateY(100px);}
	100% {opacity: 1;transform: translateY(0);}
}

/* 定义属性：fadeInLeft */
.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
	-moz-animation-name: fadeInLeft;
	-o-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeft {
	0% {opacity: 0;-webkit-transform: translateX(-100px) ;}
	100% {opacity: 1;-webkit-transform: translateX(0) ;}
}
@-moz-keyframes fadeInLeft {
	0% {opacity: 0;-moz-transform: translateX(-100px);}
   100% {opacity: 1;-moz-transform: translateX(0);}
}
@-o-keyframes fadeInLeft {
	0% {opacity: 0;-o-transform: translateX(-100px);}
	100% {opacity: 1;-o-transform: translateX(0);}
}
@keyframes fadeInLeft {
	0% {opacity: 0;transform: translateX(-100px);}
	100% {opacity: 1;transform: translateX(0);}
}

/* 定义属性：fadeInRight */
.fadeInRight {
	-webkit-animation-name: fadeInRight;
	-moz-animation-name: fadeInRight;
	-o-animation-name: fadeInRight;
	animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRight {
	0% {opacity: 0;-webkit-transform: translateX(100px);}
	100% {opacity: 1;-webkit-transform: translateX(0);}
}
@-moz-keyframes fadeInRight {
	0% {opacity: 0;-moz-transform: translateX(100px);}
	100% {opacity: 1;-moz-transform: translateX(0);}
}
@-o-keyframes fadeInRight {
	0% {opacity: 0;-o-transform: translateX(100px);}
	100% {opacity: 1;-o-transform: translateX(0);}
}
@keyframes fadeInRight {
	0% {opacity: 0;transform: translateX(100px);}
	100% {opacity: 1;transform: translateX(0);}
}

/**********激进进入******************/
.lightSpeedIn {
	-webkit-animation-name: lightSpeedIn;
	-moz-animation-name: lightSpeedIn;
	-o-animation-name: lightSpeedIn;
	animation-name: lightSpeedIn;
	-webkit-animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;
	-o-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
	-webkit-animation-duration:1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
}
@-webkit-keyframes lightSpeedIn {
0% {-webkit-transform:translateX(-100%) skewX(30deg);opacity:0;}
60% {-webkit-transform:translateX(20%) skewX(-30deg);opacity:1;}
80% {-webkit-transform:translateX(0%) skewX(15deg);opacity:1;}
100% {-webkit-transform:translateX(0%) skewX(0deg);opacity:1;}
}
@-moz-keyframes lightSpeedIn {
0% {-moz-transform:translateX(-100%) skewX(30deg);opacity:0;}
60% {-moz-transform:translateX(20%) skewX(-30deg);opacity:1;}
80% {-moz-transform:translateX(0%) skewX(15deg);opacity:1;}
100% {-moz-transform:translateX(0%) skewX(0deg);opacity:1;}
}
@-moz-keyframes lightSpeedIn {
0% {-o-transform:translateX(100%) skewX(-30deg);opacity:0;}
60% {-o-transform:translateX(-20%) skewX(30deg);opacity:1;}
80% {-o-transform:translateX(0%) skewX(-15deg);opacity:1;}
100% {-o-transform:translateX(0%) skewX(0deg);opacity:1;}
}
@keyframes lightSpeedIn {
0% {transform:translateX(100%) skewX(-30deg);opacity:0;}
60% {transform:translateX(-20%) skewX(30deg);opacity:1;}
80% {transform:translateX(0%) skewX(-15deg);opacity:1;}
100% {transform:translateX(0%) skewX(0deg);opacity:1;}
}

/*******************渐现************************/
.appearIn {
	-webkit-animation-name: appearIn;
	-moz-animation-name: appearIn;
	-o-animation-name: appearIn;
	animation-name: appearIn;
	-webkit-animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;
	-o-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
	-webkit-animation-duration:2s;
	-moz-animation-duration: 2s;
	-o-animation-duration: 2s;
	animation-duration: 2s;
}
@-webkit-keyframes appearIn {
0% {opacity:0;}
60% {opacity:.6;}
80% {opacity:.8;}
100% {opacity:1;}
}
@-moz-keyframes appearIn {
0% {opacity:0;}
60% {opacity:.6;}
80% {opacity:.8;}
100% {opacity:1;}
}
@-moz-keyframes appearIn {
0% {opacity:0;}
60% {opacity:.6;}
80% {opacity:.8;}
100% {opacity:1;}
}
@keyframes appearIn {
0% {opacity:0;}
60% {opacity:.6;}
80% {opacity:.8;}
100% {opacity:1;}
}