/**
 * spin animation
 */

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes u_spin {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}



/* scroll to top button */
@keyframes scroll_top {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}


@keyframes hide_scroll_top {
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}


/* the showcase cover */
@keyframes open_showcase_cover {
    0%{
        left:0;
        right: 100%;
    }
    100%{
        left:0;
        right: 0;
    }
}

@keyframes close_showcase_cover {
    0%{
        left:0;
        right: 0;
    }
    100%{
        left:100%;
        right: 0;
    }
}


/* the stage in left bottom information dialog */
/* left_icon */
@keyframes left_icon_keyframe {
    0% {
        top: 50px;
        height: 0;
    }
    35% {
        top: 0;
        height: 100px;
    }
    65% {
        top: 45px;
        height: 10px;
    }
    100% {
        top: 0;
        height: 100px;
    }
}

@-webkit-keyframes left_icon_keyframe {
    0% {
        top: 50px;
        height: 0;
    }
    35% {
        top: 0;
        height: 100px;
    }
    65% {
        top: 45px;
        height: 10px;
    }
    100% {
        top: 0;
        height: 100px;
    }
}

/* right information */
@keyframes right_information_keyframe {
    0% {
        width: 0;
        height:10px;
    }
    45% {
        width: 290px;
        height:10px;
    }
    50% {
        width: 290px;
        height: 10px;
    }
    100% {
        width: 290px;
        height: 100px;
    }
}

@-webkit-keyframes right_information_keyframe {
    0% {
        width: 0;
        height:10px;
    }
    45% {
        width: 290px;
        height:10px;
    }
    55% {
        width: 290px;
        height: 10px;
    }
    100% {
        width: 290px;
        height: 100px;
    }
}

/* cover remove */
@keyframes remove_cover_keyframe {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes remove_cover_keyframe {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* main keyframe anime */
@keyframes main_keyframe {
    0% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}



/* stage login methods button box show type */
@keyframes up{
     from{
         bottom: -220px;
     }
     to{
         bottom: 0;
     }
 }




/* menu open and close */
@keyframes show_menu {
    0%{
        left: 100vw;
    }
    100%{
        left:0;
    }
}

@keyframes close_menu {
    0%{
        left:0;
    }
    100%{
        left:100vw;
    }
}




@keyframes stage_city_image_scroll {
    0%{
        top: 0;
        opacity: 0;
    }
    5%{
        top: -300px;
        opacity: 1;
    }
    95%{
        top: -2840px;
        opacity: 1;
    }
    100%{
        top: -3140px;
        opacity: 0;
    }
}