/*loading 추가 2025-02-25*/
.loading-container {
    position: relative;
    width: 300px;
    height: 300px;
    animation: rotateOrbit 4s infinite linear;
}
.circle {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation: moveCircles 2s infinite alternate ease-in-out;
}
.red { background-color: red;top: 0; left: 50%; transform: translateX(-50%); }
.yellow { background-color: yellow; left: 0; top: 50%; transform: translateY(-50%); }
.green { background-color: green; left: 100%; top: 50%; transform: translate(-100%, -50%); }
.blue { background-color: blue; top: 100%; left: 50%; transform: translate(-50%, -100%); }

@keyframes moveCircles {
    0% {
    }
    45% {
        top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.2);
        background-color: #ffffff;
    }
    55% {
        top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.2);
        background-color: #ffffff;
    }
    100% {
    }
}

@keyframes rotateOrbit {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(180deg); }
    75% { transform: rotate(270deg); }
    100% { transform: rotate(360deg); }
}
@keyframes blinkText {
    0% { opacity: 0.1; }
    50% { opacity: 1; }
    100% { opacity: 0.1; }
}
.loading p {
    animation: blinkText 2s infinite ease-in-out;
}