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







/*首页第2屏载入特效*/

@-webkit-keyframes indCon2fadeInDown { 0% {
 opacity:0;
 -webkit-transform:translateY(167px)
}
 100% {
 opacity:1;
 -webkit-transform:translateY(0)
}
}
 @-moz-keyframes indCon2fadeInDown { 0% {
 opacity:0;
 -moz-transform:translateY(167px)
}
 100% {
 opacity:1;
 -moz-transform:translateY(0)
}
}
 @-ms-keyframes indCon2fadeInDown { 0% {
 opacity:0;
 -ms-transform:translateY(167px)
}
 100% {
 opacity:1;
 -ms-transform:translateY(0)
}
}
 @-o-keyframes indCon2fadeInDown { 0% {
 opacity:0;
 -o-transform:translateY(167px)
}
 100% {
 opacity:1;
 -o-transform:translateY(0)
}
}
 @keyframes indCon2fadeInDown { 0% {
 opacity:0;
 transform:translateY(167px)
}
 100% {
 opacity:1;
 transform:translateY(0)
}
}
.ani-view.indCon2-fade-in-down { opacity: 0; opacity: 1\0/IE9; -webkit-transform: translateY(167px); -moz-transform: translateY(167px); -o-transform: translateY(167px); transform: translateY(167px); -ms-transform: translateY(0)\0/IE9; }
.ani-view.indCon2fadeInDown { -webkit-animation-name: indCon2fadeInDown; -moz-animation-name: indCon2fadeInDown; -o-animation-name: indCon2fadeInDown; animation-name: indCon2fadeInDown; }
 @-webkit-keyframes indCon2fadeInUp { 0% {
 opacity:0;
 -webkit-transform:translateY(-167px)
}
 100% {
 opacity:1;
 -webkit-transform:translateY(0)
}
}
 @-moz-keyframes indCon2fadeInUp { 0% {
 opacity:0;
 -moz-transform:translateY(-167px)
}
 100% {
 opacity:1;
 -moz-transform:translateY(0)
}
}
 @-ms-keyframes indCon2fadeInUp { 0% {
 opacity:0;
 -ms-transform:translateY(-167px)
}
 100% {
 opacity:1;
 -ms-transform:translateY(0)
}
}
 @-o-keyframes indCon2fadeInUp { 0% {
 opacity:0;
 -o-transform:translateY(-167px)
}
 100% {
 opacity:1;
 -o-transform:translateY(0)
}
}
 @keyframes indCon2fadeInUp { 0% {
 opacity:0;
 transform:translateY(-167px)
}
 100% {
 opacity:1;
 transform:translateY(0)
}
}
.ani-view.indCon2-fade-in-up { opacity: 0; opacity: 1\0/IE9; -webkit-transform: translateY(-167px); -moz-transform: translateY(-167px); -o-transform: translateY(-167px); transform: translateY(-167px); -ms-transform: translateY(0)\0/IE9; }
.ani-view.indCon2fadeInUp { -webkit-animation-name: indCon2fadeInUp; -moz-animation-name: indCon2fadeInUp; -o-animation-name: indCon2fadeInUp; animation-name: indCon2fadeInUp; }