.warp-in{
    animation: warp_in 0.5s forwards;
}

.warp-out{
    animation: warp_in 0.2s forwards;
}

.warp-bottom{
    animation: warp_bottom 1.2s forwards,warp_in 1.2s forwards;;
}

.warp-bottom12{
    animation: warp_bottom12 1.2s forwards,warp_in 2.8s forwards;;
}

.warp-bottom18px{
    animation: warp_bottom18px 1.2s forwards,warp_in 2.8s forwards;;
}

@keyframes warp_bottom12 {
    0%{
        margin-top: 108px;
    }
    100%{
        margin-top: 48px;
    }
}

@keyframes warp_bottom18px {
    0%{
        margin-top: 86px;
    }
    100%{
        margin-top: 18px;
    }
}


@keyframes warp_bottom {
    0%{
        margin-top: 108px;
    }
    100%{
        margin-top: 32px;
    }
}

@keyframes warp_in {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes warp_out {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}