.spinner-wrapper {
    position: relative;
    width: 110px;
    height: 110px;
	margin:60px auto 0 auto;
}

.spinner {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
    animation: rotate 2s linear infinite;
}

.base-ring {
    opacity: 0.4;
}

.active-segment {
    transform-origin: 50% 50%;
    animation: rotate 2s linear infinite, colorShift 3s ease-in-out infinite;
}

/* 회전 애니메이션 */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 색상 변환 애니메이션 */
@keyframes colorShift {
    0% {
        --start-color: #00FFD1;
        --end-color: #FF00F5;
    }
    25% {
        --start-color: #FF00F5;
        --end-color: #6100FF;
    }
    50% {
        --start-color: #6100FF;
        --end-color: #FF00D6;
    }
    75% {
        --start-color: #FF00D6;
        --end-color: #00FFD1;
    }
    100% {
        --start-color: #00FFD1;
        --end-color: #FF00F5;
    }
}

/* 그라데이션 색상 적용 */
.gradient-start {
    stop-color: var(--start-color, #00ffff);
    animation: gradientStart 3s ease-in-out infinite;
}

.gradient-end {
    stop-color: var(--end-color, #FF00F5);
    animation: gradientEnd 3s ease-in-out infinite;
}

@keyframes gradientStart {
    0%, 100% {
        stop-color: #00ffff;
    }
    25% {
        stop-color: #ff00ff;
    }
    50% {
        stop-color: #ff0080;
    }
    75% {
        stop-color: #ff4000;
    }
}

@keyframes gradientEnd {
    0%, 100% {
        stop-color: #ff00ff;
    }
    25% {
        stop-color: #ff0080;
    }
    50% {
        stop-color: #ff4000;
    }
    75% {
        stop-color: #00ffff;
    }
}


.loading-box{display:none;z-index:9999;position:fixed;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,0.60);}
.loading-box.on{display:block}
.loading-box .loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-color:#fff;border-radius:20px;width:577px;height:342px;text-align:center}