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

}

.pagnation { text-align: center; margin-top: 32px; }
.pagnation a { display: inline-block; width: 34px; height: 34px; line-height: 34px; overflow: hidden; background: url(../images/sprite.png) no-repeat 0 -29px; margin-left: 4px; font-size: 16px; vertical-align: top; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out;color: #333; }
.pagnation a:hover { background-position: 0 -64px; color: #fff; text-decoration: none }
.pagnation .page-prev, .pagnation .page-next { line-height: 555px; }
.pagnation .page-prev { background-position: -35px -29px; }
.pagnation .page-prev:hover { background-position: -35px -64px; }
.pagnation .page-next { background-position: -70px -29px; }
.pagnation .page-next:hover { background-position: -70px -64px; }
.pagnation .current { background-position: 0px -64px; color: #fff }
.pagnation-tips { margin-top: 10px; color: #999; text-align: center }