틀:CSULoading/styles.css 문서 원본 보기

/* Z축 */
.CSUo-z5 {
    z-index: 5;
}

.CSUo-z6 {
    z-index: 6;
}

/* 로딩 화면 애니메이션 */
.CSULoading-LDP {
    display: inherit;
    z-index: 6;
    animation: CSULoading-LDP;
    animation-delay: 2s;
    animation-iteration-count: 1;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    overflow: hidden;
    height: 100vh;
    opacity: 1;
}

@keyframes CSULoading-LDP {
    from { height: 100vh; opacity: 1; z-index: 5; display: inherit; }
    to { height: 0px; opacity: 0; z-index: -1; display: none; }
}

/* 로딩 화면 배경 */
.CSULoading-bg {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #0D0D0D; /* 배경색 변경 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    overflow: hidden;
    z-index: -3;
}

/* 타이핑 애니메이션 */
.typing-container {
    font-family: 'Courier New', Courier, monospace;
    color: #F2BF91; /* 포인트 컬러 */
    font-size: 32px;
    white-space: nowrap;
    border-right: 4px solid #F2BF91; /* 커서 색상 */
    overflow: hidden;
    width: 0;
    animation: typing 3s steps(20, end), blink-caret 0.75s step-end infinite;
    text-align: center;
}

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

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: #F2BF91; }
}

/* 모바일 반응성 */
@media screen and (min-width: 700px) {
    .CSULoading-WebDisplay {
        display: inherit;
    }
}
@media screen and (min-width: 700px) {
    .CSULoading-MobileDisplay {
        display: none;
    }
}
@media screen and (max-width: 700px) {
    .CSULoading-WebDisplay {
        display: none;
    }
}
@media screen and (max-width: 700px) {
    .CSULoading-MobileDisplay {
        display: inherit;
    }
}