body {
    background-color: black;
    color: white;
    font-family: 'IBM Plex Sans Thai', sans-serif;
}

.unite_1 {
    animation: unite_1 1s ease-out;
}

@keyframes unite_1 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0px);
    }
}

.unite_2 {
    animation: unite_2 1s ease-out 250ms;
    animation-fill-mode: both;
}

@keyframes unite_2 {
    from {
        opacity: 0;
        transform: translateX(-50%) rotate(60deg) translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) rotate(60deg) translateY(0px);
    }
}

.unite_3 {
    animation: unite_3 1s ease-out 500ms;
    animation-fill-mode: both;
}

@keyframes unite_3 {
    from {
        opacity: 0;
        transform: translateX(-50%) rotate(120deg) translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) rotate(120deg) translateY(0px);
    }
}

.unite_logo_out {
    animation: unite_logo_out 0.25s ease-out;
    animation-fill-mode: forwards;
}

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

.unite_text {
    animation: unite_text 1s ease-out;
}

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

.unite_text_main {
    animation: unite_text_main 1s ease-out;
}

@keyframes unite_text_main {
    from {
        opacity: 0;
        transform: translateY(80px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

.unite_text_second {
    animation: unite_text_main 1s ease-out 500ms;
    animation-fill-mode: both;
}

@keyframes unite_text_second {
    from {
        opacity: 0;
        transform: translateY(80px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

.move_logo_to_top {
    scale: 0.7;
    animation: move_logo_to_top 1s ease-in-out;
}
@keyframes move_logo_to_top {
    from {
        scale: 1;
    }
    to {
        scale: 0.7;
    }
}

@media (min-width: 768px) {
    .move_logo_to_top {
        scale: 0.7;
        animation: move_logo_to_top 1s ease-in-out;
    }
    @keyframes move_logo_to_top {
        from {
            scale: 1;
        }
        to {
            scale: 0.7;
        }
    }
}

.bg_image {
    animation: bg_image 1s ease-in-out;
}

@keyframes bg_image {
    from {
        opacity: 0;
    }
    to {
        opacity: .3;
    }
}

.bg_gradient {
    animation: bg_gradient 1s ease-in-out;
}

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

.scroll_btn {
    animation: scroll_btn 1s ease-in-out;
    animation-fill-mode: both;
}

@keyframes scroll_btn {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

/* .toppicks {
    animation: toppicks 1s ease-in-out;
    animation-fill-mode: both;
}

@keyframes toppicks {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
} */

.client_btn {
    animation: client_btn 1s ease-in-out;
}

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