.scaleBg{
	-webkit-animation:scale-bg 6s linear forwards;
	animation:scale-bg 6s linear forwards;}
@keyframes scale-bg{
	from{
		opacity:0;
		-webkit-transform:scale(0);
		transform:scale(0);
	}
	to{opacity:1;
		-webkit-transform:scale(1);
		transform:scale(1);
	}
}



.slideLeft{
	animation-name: slideLeft;
	-webkit-animation-name: slideLeft;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;		

}

@keyframes slideLeft {
	0% {
		transform: translateX(150%);
		opacity: 0;
	}		
	100% {
		transform: translateX(0%);
		opacity: 1;
	}	
}

@-webkit-keyframes slideLeft {
	0% {
		-webkit-transform: translateX(150%);
		opacity: 0;
	}		
	100% {
		-webkit-transform: translateX(0%);
		opacity: 1;
	}
}




.slideRight{
	animation-name: slideRight;
	-webkit-animation-name: slideRight;	
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;
	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;		

}

@keyframes slideRight {
	0% {
		 -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
		transform: translateX(-150%);
		opacity: 0;
	}		
	100% {
		 -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
		transform: translateX(0%);
		opacity: 1;
	}	
}

@-webkit-keyframes slideRight {
	0% {
		 -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
		transform: translateX(-150%);
		opacity: 0;
	}		
	100% {
		 -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
		transform: translateX(0%);
		opacity: 1;
	}	
}




.driveInLeft {
  -webkit-animation-name: driveInLeft;
  animation-name: driveInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s; }

@keyframes driveInLeft {
  0% {
    opacity: 0.5;

    -webkit-transform: translate3d(-50px, 0, 0);
    transform: translate3d(-50px, 0, 0); }


  100% {
 opacity: 1; 
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
	
.driveInRight {
  -webkit-animation-name: driveInRight;
  animation-name: driveInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s; }

@keyframes driveInRight {
  0% {
    opacity: 0.5;

    -webkit-transform: translate3d(50px, 0, 0);
    transform: translate3d(50px, 0, 0); }

  100% {    opacity: 1; 
   
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
	
.driveInTop {
  -webkit-animation-name: driveInTop;
  animation-name: driveInTop;
  -webkit-animation-duration: 1s;
  animation-duration: 1s; }

@keyframes driveInTop {
  0% {
   opacity: 0.5;

    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0,-50px, 0);  }


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


.driveInBottom {
  -webkit-animation-name: driveInBottom;
  animation-name: driveInBottom;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s; }

@keyframes driveInBottom {
  0% {
    opacity: 0.5;
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: translate3d(0,100px, 0);
    transform: translate3d(0,100px, 0); }
  30% {
    opacity: 1; }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
	
	
	
	
	




@-webkit-keyframes clockwise{
  0%  { -webkit-transform: rotate(0deg) ;  }
  100%{ -webkit-transform: rotate(360deg); }
}

@keyframes clockwise {
  0%  { transform: rotate(0deg) ; }
  100%{ transform: rotate(360deg); }
}

@-webkit-keyframes counter-clockwise {
  0%  { -webkit-transform: rotate(360deg) ;  }
  100%{ -webkit-transform: rotate(0deg); }
}

@keyframes counter-clockwise {
  0%  { transform: rotate(360deg) ;  }
  100%{ transform: rotate(0deg); }
}




.kuan {
  -webkit-animation-name: kuan;
  animation-name: kuan;
  animation-timing-function: ease-in;	
	-webkit-animation-timing-function: ease-in;
  -webkit-animation-duration: 1s;
  animation-duration: 1s; }
@keyframes kuan {
0% {
right:0;
width:0px;
}
100% {
right:0;
width: 200px;

}
}



.kuan1 {
  -webkit-animation-name: kuan1;
  animation-name: kuan1;
  animation-timing-function: ease-in;	
	-webkit-animation-timing-function: ease-in;
  -webkit-animation-duration: 1s;
  animation-duration: 1s; }
@keyframes kuan {
	100% {
right:0;
width: 200px;

}
0% {
right:0;
width:0px;
}

}
.xiaon {animation:xiaon 5s 1 forwards;-mzoanimation:xiaon 5s 1 forwards;-webkit-animation:xiaon 5s 1 forwards;-o-animation:xiaon 5s 1 forwards;}

@keyframes xiaon {
  0% {
       width:0;opacity:0;
    }    100% {
      width:100;opacity:1;
    }
}


.zifadeInUp {
  -webkit-animation-name: zifadeInUp;
  animation-name: zifadeInUp; }
@-webkit-keyframes zifadeInUp{
	0%{
		-webkit-transform:translateY(50px);
		opacity: 0;
	}
	100%{
		-webkit-transform:translateY(0px);
		opacity: 1;
	}
}
@-ms-keyframes zifadeInUp{
	0%{
		-ms-transform:translateY(50px);
		opacity: 0;
	}
	100%{
		-ms-transform:translateY(0px);
		opacity: 1;
	}
}
@keyframes zifadeInUp{
	0%{
		transform:translateY(50px);
		opacity: 0;
	}
	100%{
		transform:translateY(0px);
		opacity: 1;
	}
}



.zifadeInDown {
  -webkit-animation-name: zifadeInDown;
  animation-name: zifadeInDown; }

@-webkit-keyframes zifadeInDown{
	0%{
		-webkit-transform:translateY(-80px);
		opacity: 0;
	}
	100%{
		-webkit-transform:translateY(0px);
		opacity: 1;
	}
}
@-ms-keyframes zifadeInDown{
	0%{
		-ms-transform:translateY(-80px);
		opacity: 0;
	}
	100%{
		-ms-transform:translateY(0px);
		opacity: 1;
	}
}
@keyframes zifadeInDown{
	0%{
		transform:translateY(-80px);
		opacity: 0;
	}
	100%{
		transform:translateY(0px);
		opacity: 1;
	}
}

.shake1 {animation:shake1 5s infinite;-mzoanimation:shake1 5s infinite;-webkit-animation:shake1 5s infinite;-o-animation:shake1 5s infinite;}
@keyframes shake1 {
  0%, 100% {
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px);
  }
}

.shake2 {animation:shake2 1s infinite;-mzoanimation:shake2 1s infinite;-webkit-animation:shake2 1s infinite;-o-animation:shake2 1s infinite;}
@keyframes shake2 {
  0%, 100% {
    -webkit-transform: translateX(5px);
    -ms-transform: translateX(5px);
    transform: translateX(5px);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-5px);
    -ms-transform: translateX(-5px);
    transform: translateX(-5px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(5px);
    -ms-transform: translateX(5px);
    transform: translateX(5px);
  }
}


.spinIn {
  -webkit-animation-name: spinIn;
  animation-name: spinIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-iteration-count:infinite; }

@keyframes spinIn {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transform: rotateZ(0deg) scale3d(0, 0, 0);
    transform: rotateZ(0deg) scale3d(0, 0, 0);
    -webkit-transform-origin: center center;
    transform-origin: center center; }
  50% {
    opacity: 1; }
  70% {
    -webkit-transform: rotateZ(380deg) scale3d(1, 1, 1);
    transform: rotateZ(380deg) scale3d(1, 1, 1);
    -webkit-transform-origin: center center;
    transform-origin: center center; }
  100% {
    -webkit-transform: rotateZ(360deg) scale3d(1, 1, 1);
    transform: rotateZ(360deg) scale3d(1, 1, 1);
    -webkit-transform-origin: center center;
    transform-origin: center center; } }


.rotate{
	transform:rotate(360deg) ;
	-ms-transform:rotate(360deg); 	/* IE 9 */
	-moz-transform:rotate(360deg); 	/* Firefox */
	-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
	-o-transform:rotate(360deg);
	-webkit-transition-duration: 0.7s;

}




.fangun {animation:fangun 5s infinite;-mzoanimation:fangun 5s infinite;-webkit-animation:fangun 5s infinite;-o-animation:fangun 5s infinite;}
@keyframes fangun {
  0%{
   transform:rotateY(0deg);
	-moz-transform:rotateY(0deg);
	 -webkit-transform:rotateY(0deg); 
    -o-transform:rotateY(0deg);
  }
  100% {
    transform:rotateY(360deg);
	-moz-transform:rotateY(360deg);
	 -webkit-transform:rotateY(360deg); 
    -o-transform:rotateY(360deg);
  }
}



 @-webkit-keyframes circleProgressLoad {

 0% {
 transform: rotate(0deg);
 -webkit-transform: rotate(0deg);

}

100% {
 transform: rotate(360deg);
 -webkit-transform: rotate(360deg);

}

}


.zifadeInRight {
  -webkit-animation-name: zifadeInRight;
  animation-name: zifadeInRight; }
@-webkit-keyframes zifadeInRight{
	0%{
		-webkit-transform:translateX(100px);
		opacity: 0;
	}
	100%{
		-webkit-transform:translateX(0px);
		opacity: 1;
	}
}
@-ms-keyframes zifadeInRight{
	0%{
		-ms-transform:translateX(100px);
		opacity: 0;
	}
	100%{
		-ms-transform:translatranslateXteY(0px);
		opacity: 1;
	}
}
@keyframes zifadeInRight{
	0%{
		transform:translateX(100px);
		opacity: 0;
	}
	100%{
		transform:translateX(0px);
		opacity: 1;
	}
}


.zifadeInLeft {
  -webkit-animation-name: zifadeInLeft;
  animation-name: zifadeInLeft; }
@-webkit-keyframes zifadeInLeft{
	0%{
		-webkit-transform:translateX(-100px);
		opacity: 0;
	}
	100%{
		-webkit-transform:translateX(0px);
		opacity: 1;
	}
}
@-ms-keyframes zifadeInLeft{
	0%{
		-ms-transform:translateX(-100px);
		opacity: 0;
	}
	100%{
		-ms-transform:translatranslateXteY(0px);
		opacity: 1;
	}
}
@keyframes zifadeInLeft{
	0%{
		transform:translateX(-100px);
		opacity: 0;
	}
	100%{
		transform:translateX(0px);
		opacity: 1;
	}
}



.popIn {
  -webkit-animation-name: popIn;
  animation-name: popIn; }

@keyframes popIn {
  0% {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    opacity: 0; }
  20% {
    opacity: 1; }
  40% {
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    -webkit-transform: scale3d(1.08, 1.08, 1.08);
    transform: scale3d(1.08, 1.08, 1.08); }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  80% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03); }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }