@charset "UTF-8";


/*반응형(였던 것)*/
/*
@media all and (max-width: 479px) {

}



@media screen and (min-width: 768px) and (max-width: 1023px) {

}
@media screen and (min-width: 1200px) {

}
*/








@keyframes slideIn {
    0% {
        width: 0;
    }
    100% {
        width: 100%; /* 100%의 너비로 변화 */
    }
}




@keyframes proj_bg {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }

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




@keyframes graphText {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }

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








/* The typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 70% }

}

/* The typewriter cursor effect */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #FF553E; }
}


@keyframes subtitle_bg {
    0% {
        opacity: 0;
        transform: translateY(250px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}





@keyframes bubbleAniL {
    0% {
        opacity: 0;
        transform: translateX(-250px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes bubbleAniR {
    0% {
        opacity: 0;
        transform: translateX(250px);
    }

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



@keyframes fontcolorAni {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}





@keyframes progress {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}




@keyframes personaAni {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}