//arrow 클래스 활성화
function activateStep(stepNumber) {
    if (stepNumber >= 1 && stepNumber <= 9) {
        document.getElementById('arrow' + stepNumber).classList.add('active');
    }
}

//arrow 클래스 초기화
function resetArrows() {
    for (let i = 1; i <= 9; i++) {
        document.getElementById('arrow' + i).classList.remove('active');
    }
}

//스텝별 arrow 클래스활성화 이벤트
function startProcess() {
    let step = 1;
    const interval = setInterval(() => {
        if (step <= 9) {
            activateStep(step);
            step++;
        } else {
            clearInterval(interval);
            setTimeout(() => {
                resetArrows();
                startProcess();
            }, 1000); 
        }
    }, 1000); 
}

startProcess();