/*animation*/
@-webkit-keyframes scaleUpAnimation {
    from { opacity:0;-webkit-transform: scale(0.5); }
    to { opacity:1;-webkit-transform: scale(1); }
}
@-moz-keyframes scaleUpAnimation {
    from { opacity:0;-moz-transform: scale(0.5); }
    to { opacity:1;-moz-transform: scale(1); }
}
@-o-keyframes scaleUpAnimation {
    from { opacity:0;-o-transform: scale(0.5); }
    to { opacity:1;-o-transform: scale(1); }
}
@keyframes scaleUpAnimation {
    from { opacity:0;transform: scale(0.5); }
    to { opacity:1;transform: scale(1); }
}

@-webkit-keyframes scaleDownAnimation {
    from { opacity:0;-webkit-transform: scale(1.5); }
    to { opacity:1;-webkit-transform: scale(1); }
}
@-moz-keyframes scaleDownAnimation {
    from { opacity:0;-moz-transform: scale(1.5); }
    to { opacity:1;-moz-transform: scale(1); }
}
@-o-keyframes scaleDownAnimation {
    from { opacity:0;-o-transform: scale(1.5); }
    to { opacity:1;-o-transform: scale(1); }
}
@keyframes scaleDownAnimation {
    from { opacity:0;transform: scale(1.5); }
    to { opacity:1;transform: scale(1); }
}

@-webkit-keyframes slideUpAnimation {
    from { opacity:0;-webkit-transform: translateY(50px); }
    to { opacity:1;-webkit-transform: translateY(0px); }
}
@-moz-keyframes slideUpAnimation {
    from { opacity:0;-moz-transform: translateY(50px); }
    to { opacity:1;-moz-transform: translateY(0px); }
}
@-o-keyframes slideUpAnimation {
    from { opacity:0;-o-transform: translateY(50px); }
    to { opacity:1;-o-transform: translateY(0px); }
}
@keyframes slideUpAnimation {
    from { opacity:0;transform: translateY(50px); }
    to { opacity:1;transform: translateY(0px); }
}

@-webkit-keyframes slideDownAnimation {
    from { opacity:0;-webkit-transform: translateY(-50px); }
    to { opacity:1;-webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDownAnimation {
    from { opacity:0;-moz-transform: translateY(-50px); }
    to { opacity:1;-moz-transform: translateY(0px); }
}
@-o-keyframes slideDownAnimation {
    from { opacity:0;-o-transform: translateY(-50px); }
    to { opacity:1;-o-transform: translateY(0px); }
}
@keyframes slideDownAnimation {
    from { opacity:0;transform: translateY(-50px); }
    to { opacity:1;transform: translateY(0px); }
}

@-webkit-keyframes opacityAnimation {
    from { opacity:0;}
    to { opacity:1;}
}
@-moz-keyframes opacityAnimation {
    from { opacity:0;}
    to { opacity:1;}
}
@-o-keyframes opacityAnimation {
    from { opacity:0;}
    to { opacity:1;}
}
@keyframes opacityAnimation {
    from { opacity:0;}
    to { opacity:1;}
}
/*좌우로 움직이는 애니메이션*/
@-webkit-keyframes swayAnimation {
    from { transform:translateX(0)}
    to { transform:translateX(5px)}
}
@-moz-keyframes swayAnimation {
    from { transform:translateX(0)}
    to { transform:translateX(5px)}
}
@-o-keyframes swayAnimation {
    from { transform:translateX(0)}
    to { transform:translateX(5px)}
}
@keyframes swayAnimation {
    from { transform:translateX(0)}
    to { transform:translateX(5px)}
}

@-webkit-keyframes slide_right{
    from{opacity: 0;transform:translateX(50%);}
    to{opacity: 1;transform:translateX(0);}
}
@-moz-keyframes slide_right{
    from{opacity: 0;transform:translateX(50%);}
    to{opacity: 1;transform:translateX(0);}
}
@keyframes slide_right{
    from{opacity: 0;transform:translateX(50%);}
    to{opacity: 1;transform:translateX(0);}
}

@-webkit-keyframes slide_left{
    from{opacity: 0;transform:translateX(-50%);}
    to{opacity: 1;transform:translateX(0);}
}
@-moz-keyframes slide_left{
    from{opacity: 0;transform:translateX(-50%);}
    to{opacity: 1;transform:translateX(0);}
}
@keyframes slide_left{
    from{opacity: 0;transform:translateX(-50%);}
    to{opacity: 1;transform:translateX(0);}
}

@-webkit-keyframes slide_right_fast{
    0%{opacity: 0;transform:translateX(50%);}
    100%{opacity: 1;transform:translateX(0);}
}
@-moz-keyframes slide_right_fast{
    0%{opacity: 0;transform:translateX(50%);}
    100%{opacity: 1;transform:translateX(0);}
}
@keyframes slide_right_fast{
    0%{opacity: 0;transform:translateX(50%);}
    100%{opacity: 1;transform:translateX(0);}
}

@-webkit-keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
}

@-moz-keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
}

@-o-keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
}

@keyframes flash {
    0%, 50%, 100% {opacity: 1;}
    25%, 75% {opacity: 0;}
}

@-webkit-keyframes bounce {
    0%,  50%, 80%, 100% {-webkit-transform: translateY(0); opacity: 1}
    20%,40% {-webkit-transform: translateY(-30px); opacity: 1}
    60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounce {
    0%,  50%, 80%, 100% {-moz-transform: translateY(0); opacity: 1}
    20%,40% {-moz-transform: translateY(-30px); opacity: 1}
    60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes bounce {
    0%,  50%, 80%, 100% {-o-transform: translateY(0); opacity: 1}
    20%,40% {-o-transform: translateY(-30px);}
    60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
    0%,  50%, 80%, 100% {transform: translateY(0); opacity: 1}
    20%,40% {transform: translateY(-30px); opacity: 1}
    60% {transform: translateY(-15px);}
}



@-webkit-keyframes move {
    0% {
        -webkit-transform: translate3d(0, 0, 0px);
        transform: translate3d(0, 0, 0px); }
    33% {
        -webkit-transform: translate3d(-10px, -10px, 25px);
        transform: translate3d(-10px, -10px, 25px); }
    66% {
        -webkit-transform: translate3d(10px, 10px, 50px);
        transform: translate3d(10px, 10px, 50px); }
    100% {
        -webkit-transform: translate3d(0, 0, 0px);
        transform: translate3d(0, 0, 0px); }
}

@keyframes move {
    0% {
        -webkit-transform: translate3d(0, 0, 0px);
        transform: translate3d(0, 0, 0px); }
    33% {
        -webkit-transform: translate3d(-10px, -10px, 25px);
        transform: translate3d(-10px, -10px, 25px); }
    66% {
        -webkit-transform: translate3d(10px, 10px, 50px);
        transform: translate3d(10px, 10px, 50px); }
    100% {
        -webkit-transform: translate3d(0, 0, 0px);
        transform: translate3d(0, 0, 0px); }
}

@-webkit-keyframes move_opa {
    0% {
        -webkit-transform: translate3d(0, 0, 0px);
        transform: translate3d(0, 0, 0px);}

    100% {
        -webkit-transform: translate3d(-10px, -10px, 25px);
        transform: translate3d(-10px, -10px, 25px);
        opacity: 1;}
}

@keyframes move_opa {
    0% {
        -webkit-transform: translate3d(0, 0, 0px);
        transform: translate3d(0, 0, 0px);}

    100% {
        -webkit-transform: translate3d(-20px, -20px, 25px);
        transform: translate3d(-20px, -20px, 25px);
        opacity: 1;}
}

@-webkit-keyframes criss-cross-left {
    0% {
        left: -20px;
    }
    50% {
        left: 50%;
        width: 20px;
        height: 20px;
    }
    100% {
        left: 50%;
        width: 375px;
        height: 375px;
    }
}

@keyframes criss-cross-left {
    0% {
        left: -20px;
    }
    50% {
        left: 50%;
        width: 20px;
        height: 20px;
    }
    100% {
        left: 50%;
        width: 375px;
        height: 375px;
    }
}
@-webkit-keyframes criss-cross-right {
    0% {
        right: -20px;
    }
    50% {
        right: 50%;
        width: 20px;
        height: 20px;
    }
    100% {
        right: 50%;
        width: 375px;
        height: 375px;
    }
}
@keyframes criss-cross-right {
    0% {
        right: -20px;
    }
    50% {
        right: 50%;
        width: 20px;
        height: 20px;
    }
    100% {
        right: 50%;
        width: 375px;
        height: 375px;
    }
}

@-webkit-keyframes upDownAnimation {
    from { transform:translateY(0)}
    to { transform:translateY(5px)}
}
@-moz-keyframes upDownAnimation {
    from { transform:translateY(0)}
    to { transform:translateY(5px)}
}
@-o-keyframes upDownAnimation {
    from { transform:translateY(0)}
    to { transform:translateY(5px)}
}
@keyframes upDownAnimation {
    from { transform:translateY(0)}
    to { transform:translateY(5px)}
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg); transform:rotate(360deg);
    }
}

/*@-moz-keyframes scaleX {*/
    /*0% {*/
        /*-moz-transform: scaleX(0);*/
        /*-moz-transform-origin: 0;*/
    /*}*/
    /*50% {*/
        /*-moz-transform: scaleX(1);*/
        /*-moz-transform-origin: 0;*/
    /*}*/
    /*100% {*/
        /*-moz-transform: scaleX(0);*/
        /*-moz-transform-origin: 100%;*/
    /*}*/
/*}*/
/*@-webkit-keyframes scaleX {*/
    /*0% {*/
        /*-webkit-transform: scaleX(0);*/
        /*-webkit-transform-origin: 0;*/
    /*}*/
    /*50% {*/
        /*-webkit-transform: scaleX(1);*/
        /*-webkit-transform-origin: 0;*/
    /*}*/
    /*100% {*/
        /*-webkit-transform: scaleX(0);*/
        /*-webkit-transform-origin: 100%;*/
    /*}*/
/*}*/
@keyframes scaleX {
    0% {
        -webkit-transform: scaleX(0); transform: scaleX(0);
    }
    100% {
        -webkit-transform: scaleX(1); transform: scaleX(1);
    }
}

@keyframes de-scaleX {
    0% {
        -webkit-transform: scaleX(1); transform: scaleX(1);
    }
    100% {
        -webkit-transform: scaleX(0); transform: scaleX(0);
    }
}




@-webkit-keyframes bottom-circleAni {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0.8;
        transform: scale(.9);
    }
}