@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: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; -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(-25px) }
    100% { opacity: 1; -webkit-transform: translateX(0) }
}

@-moz-keyframes fadeInLeft {
    0% { opacity: 0; -moz-transform: translateX(-25px) }
    100% { opacity: 1; -moz-transform: translateX(0) }
}

@-o-keyframes fadeInLeft {
    0% { opacity: 0; -o-transform: translateX(-25px) }
    100% { opacity: 1; -o-transform: translateX(0) }
}

@keyframes fadeInLeft {
    0% { opacity: 0; transform: translateX(-25px) }
    100% { opacity: 1; transform: translateX(0) }
}

.ani-view.fade-in-left { opacity: 0; opacity: 1\0/IE9; -webkit-transform: translateX(-25px); -moz-transform: translateX(-25px); -o-transform: translateX(-25px); transform: translateX(-25px); -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(25px) }
    100% { opacity: 1; -webkit-transform: translateX(0) }
}

@-moz-keyframes fadeInRight {
    0% { opacity: 0; -moz-transform: translateX(25px) }
    100% { opacity: 1; -moz-transform: translateX(0) }
}

@-ms-keyframes fadeInRight {
    0% { opacity: 0; -ms-transform: translateX(25px) }
    100% { opacity: 1; -ms-transform: translateX(0) }
}

@-o-keyframes fadeInRight {
    0% { opacity: 0; -o-transform: translateX(25px) }
    100% { opacity: 1; -o-transform: translateX(0) }
}

@keyframes fadeInRight {
    0% { opacity: 0; transform: translateX(25px) }
    100% { opacity: 1; transform: translateX(0) }
}

.ani-view.fade-in-right { opacity: 0; opacity: 1\0/IE9; -webkit-transform: translateX(25px); -moz-transform: translateX(25px); -o-transform: translateX(25px); transform: translateX(25px); -ms-transform: translateX(0)\0/IE9; }
.ani-view.fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; }