html{
    font-family: "Microsoft YaHei", "微软雅黑", Tahoma, Geneva, sans-serif;
}



/*  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;

}