@charset "utf-8";

/* css animation */
.trans{

 -webkit-transition: all .5s ease;
 -moz-transition:all .5s ease;
 -o-transition:all .5s ease;
 -ms-transition:all .5s ease;
 transition:all .5s ease;
}

/* page animation */

.ani-view {
 -webkit-animation-duration:1s;
 -moz-animation-duration:1s;
 -o-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-fill-mode:forwards;
 -moz-animation-fill-mode:forwards;
 -o-animation-fill-mode:forwards;
 animation-fill-mode:forwards;
}

@-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)
 }
}

.ani-view.fade-in-down{
 opacity:0;
 opacity:1\0/IE9;
 
 -webkit-transform:translateY(20px);
 -moz-transform:translateY(20px);
 -o-transform:translateY(20px);
 transform:translateY(20px);
 -ms-transform:translateY(0)\0/IE9;
}
.ani-view.fadeInDown {
 -webkit-animation-name:fadeInDown;
 -moz-animation-name:fadeInDown;
 -o-animation-name:fadeInDown;
 animation-name:fadeInDown;

}


@-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)
 }
}
.ani-view.fade-in-left{

 opacity:0;
 opacity:1\0/IE9;
 

 -webkit-transform:translateX(-100px);
 -moz-transform:translateX(-100px);
 -o-transform:translateX(-100px);
 transform:translateX(-100px);
 -ms-transform:translateX(0)\0/IE9;
}
.ani-view.fadeInLeft {
 -webkit-animation-name:fadeInLeft;
 -moz-animation-name:fadeInLeft;
 -o-animation-name:fadeInLeft;
 animation-name:fadeInLeft;
}


@-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)
 }
}
@-ms-keyframes fadeInRight {
 0% {
 opacity:0;
 -ms-transform:translateX(100px)
 }
 100% {
 opacity:1;
 -ms-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)
 }
}
.ani-view.fade-in-right{
 opacity:0;
 opacity:1\0/IE9;
 
 -webkit-transform:translateX(100px);
 -moz-transform:translateX(100px);
 -o-transform:translateX(100px);
 transform:translateX(100px);
 -ms-transform:translateX(0)\0/IE9;
}
.ani-view.fadeInRight {
 -webkit-animation-name:fadeInRight;
 -moz-animation-name:fadeInRight;
 -o-animation-name:fadeInRight;
 animation-name:fadeInRight;
}


/*图片放大*/
 .show-pic{
	width: 798px;
	height: 309px;
	position: absolute;
	left: 50%;
	margin-left: -399px;
	bottom: -80px;
	cursor: pointer;
} 
.show-pic:hover img{
	webkit-transition: all 1s ease 0s;
 -moz-transition: all 1s ease 0s;
 -ms-transition: all 1s ease 0s;
 transition: all 1s ease 0s;
 -moz-transform:scale(1.1,1.1);
	-webkit-transform:scale(1.1,1.1);
	-o-transform:scale(1.1,1.1);
}

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

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

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

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

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


.ani-view.fade-in-up{
 opacity:0;
 opacity:1\0/IE9;
 
 -webkit-transform:translateY(20px);
 -moz-transform:translateY(20px);
 -o-transform:translateY(20px);
 transform:translateY(20px);
 -ms-transform:translateY(0)\0/IE9;
}
.ani-view.fadeInUp {
 -webkit-animation-name:fadeInUp;
 -moz-animation-name:fadeInUp;
 -o-animation-name:fadeInUp;
 animation-name:fadeInUp;

}