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

        opacity: 1\0/IE9;

        filter: alpha(opacity=0);

        filter: alpha(opacity=100\0/IE9);

        -webkit-transform:translateY(20px)

    }

    100% {

        opacity: 1;

        filter: alpha(opacity=100);

        -webkit-transform:translateY(0)

    }

}

@-moz-keyframes fadeInDown {

    0% {

       opacity: 0;

        opacity: 1\0/IE9;

        filter: alpha(opacity=0);

        filter: alpha(opacity=100\0/IE9);

        -webkit-transform:translateY(20px)

    }

    100% {

         opacity: 1;

        filter: alpha(opacity=100);

        -webkit-transform:translateY(0)

    }

}

@-o-keyframes fadeInDown {

    0% {

        opacity: 0;

        opacity: 1\0/IE9;

        filter: alpha(opacity=0);

        filter: alpha(opacity=100\0/IE9);

        -webkit-transform:translateY(20px)

    }

    100% {

         opacity: 1;

        filter: alpha(opacity=100);

        -webkit-transform:translateY(0)

    }

}

@keyframes fadeInDown {

    0% {

        opacity: 0;

        opacity: 1\0/IE9;

        filter: alpha(opacity=0);

        filter: alpha(opacity=100\0/IE9);

        -webkit-transform:translateY(20px)

    }

    100% {

        opacity: 1;

        filter: alpha(opacity=100);

        -webkit-transform:translateY(0)

    }

}



.ani-view.fade-in-down{

    opacity: 0;

    opacity: 1\0/IE9;

    filter: alpha(opacity=0);

    filter: alpha(opacity=100\0/IE9);

    -webkit-transform:translateY(20px);

    -moz-transform:translateY(20px);

    -o-transform:translateY(20px);

    transform:translateY(20px);

}

.ani-view.fadeInDown {

    -webkit-animation-name:fadeInDown;

    -moz-animation-name:fadeInDown;

    -o-animation-name:fadeInDown;

    animation-name:fadeInDown;

}





@-webkit-keyframes fadeInLeft {

    0% {

         opacity: 0;

        opacity: 1\0/IE9;

        filter: alpha(opacity=0);

        filter: alpha(opacity=100\0/IE9);

        -webkit-transform:translateX(-100px)

    }

    100% {

        opacity: 1;

        filter: alpha(opacity=100);

        -webkit-transform:translateX(0)

    }

}

@-moz-keyframes fadeInLeft {

    0% {

         opacity: 0;

        opacity: 1\0/IE9;

        filter: alpha(opacity=0);

        filter: alpha(opacity=100\0/IE9);

        -moz-transform:translateX(-100px)

    }

    100% {

        opacity: 1;

        filter: alpha(opacity=100);

        -moz-transform:translateX(0)

    }

}

@-o-keyframes fadeInLeft {

    0% {

     opacity: 0;

        opacity: 1\0/IE9;

        filter: alpha(opacity=0);

        filter: alpha(opacity=100\0/IE9);

    -o-transform:translateX(-100px)

    }

    100% {

    opacity: 1;

        filter: alpha(opacity=100);

    -o-transform:translateX(0)

    }

}

@keyframes fadeInLeft {

    0% {

     opacity: 0;

        opacity: 1\0/IE9;

        filter: alpha(opacity=0);

        filter: alpha(opacity=100\0/IE9);

    transform:translateX(-100px)

    }

    100% {

    opacity: 1;

        filter: alpha(opacity=100);

    transform:translateX(0)

    }

}

.ani-view.fade-in-left{

     opacity: 0;

        opacity: 1\0/IE9;

        filter: alpha(opacity=0);

        filter: alpha(opacity=100\0/IE9);

    -webkit-transform:translateX(-100px);

    -moz-transform:translateX(-100px);

    -o-transform:translateX(-100px);

    transform:translateX(-100px);

}

.ani-view.fadeInLeft {

    -webkit-animation-name:fadeInLeft;

    -moz-animation-name:fadeInLeft;

    -o-animation-name:fadeInLeft;

    animation-name:fadeInLeft;

}





@-webkit-keyframes fadeInRight {

    0% {

     opacity: 0;

        opacity: 1\0/IE9;

        filter: alpha(opacity=0);

        filter: alpha(opacity=100\0/IE9);

    -webkit-transform:translateX(100px)

    }

    100% {

    opacity: 1;

    filter: alpha(opacity=100);

    -webkit-transform:translateX(0)

    }

}

@-moz-keyframes fadeInRight {

    0% {

     opacity: 0;

        opacity: 1\0/IE9;

        filter: alpha(opacity=0);

        filter: alpha(opacity=100\0/IE9);

    -webkit-transform:translateX(100px)

    }

    100% {

    opacity: 1;

    filter: alpha(opacity=100);

    -webkit-transform:translateX(0)

    }

}

@-ms-keyframes fadeInRight {

    0% {

     opacity: 0;

        opacity: 1\0/IE9;

        filter: alpha(opacity=0);

        filter: alpha(opacity=100\0/IE9);

    -webkit-transform:translateX(100px)

    }

    100% {

    opacity: 1;

    filter: alpha(opacity=100);

    -webkit-transform:translateX(0)

    }

}

@-o-keyframes fadeInRight {

    0% {

     opacity: 0;

        opacity: 1\0/IE9;

        filter: alpha(opacity=0);

        filter: alpha(opacity=100\0/IE9);

    -webkit-transform:translateX(100px)

    }

    100% {

    opacity: 1;

    filter: alpha(opacity=100);

    -webkit-transform:translateX(0)

    }

}

@keyframes fadeInRight {

    0% {

     opacity: 0;

        opacity: 1\0/IE9;

        filter: alpha(opacity=0);

        filter: alpha(opacity=100\0/IE9);

    -webkit-transform:translateX(100px)

    }

    100% {

    opacity: 1;

    filter: alpha(opacity=100);

    -webkit-transform:translateX(0)

    }

}

.ani-view.fade-in-right{

     opacity: 0;

        opacity: 1\0/IE9;

        filter: alpha(opacity=0);

        filter: alpha(opacity=100\0/IE9);

    -webkit-transform:translateX(100px);

    -moz-transform:translateX(100px);

    -o-transform:translateX(100px);

    transform:translateX(100px);

}

.ani-view.fadeInRight {

    -webkit-animation-name:fadeInRight;

    -moz-animation-name:fadeInRight;

    -o-animation-name:fadeInRight;

    animation-name:fadeInRight;

}