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


}


.ani-view.slow{


    -webkit-animation-duration:1.5s;


    -moz-animation-duration:1.5s;


    -o-animation-duration:1.5s;


    animation-duration:1.5s;


}





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


}<!--ºÄʱ1764539741.9237Ãë-->