@charset "utf-8";

@keyframes eye {
    0% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    90% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes eye2 {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    60% {
        opacity: 0;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


@keyframes tfx {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0%);
    }
}

@keyframes bgp {
    0% {
        background-position: -150% 55%;
    }

    100% {
        background-position: 70% 55%;
    }
}

@keyframes txt {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.txtbx {
    animation: txt 2.5s ease-in-out 2.2s forwards;
}

.content {
    animation: bgp 3s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
}

.imgbx {
    animation: tfx 3.2s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
}



.eye_open {
    animation: eye 5s step-end 3s infinite;
}

.eye_close {
    animation: eye2 5s step-end 3s infinite;
}