@keyframes lineBounce {
    0% { width: 0; left: 0; opacity: 1; ; }
    50% { width: 100%; left: 0; opacity: 1;  }
    100% { width: 0; left: 100%; opacity: 1; }
}

.sectionSixTextWrap::after {
    content: "";
    position: absolute;
    width: 0;  /* 처음엔 너비 0 */
    top: 50%;
    height: 2px;
    background: linear-gradient(to right, rgba(118, 118, 118, 0) 10%, 
                                          rgba(118, 118, 118, 0.7) 50%, 
                                          rgba(118, 118, 118, 0) 90%);
    transform: translateY(-50%);
    
    /* 애니메이션 적용 */
    animation: lineBounce 4s infinite ease-in-out;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px); /* 더 부드럽게 올라오도록 설정 */
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.sectionSixText {
    opacity: 0; /* 처음에는 안 보이도록 설정 */
    transform: translateY(30px); /* 처음에는 아래쪽에 위치 */
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out; /* 부드럽게 변하도록 설정 */
}

.sectionSixText.in-view {
    opacity: 1;
    transform: translateY(0);  /* 스크롤 시 나타날 위치 */
}

/* 각 요소가 0.5초 간격으로 순차적으로 나타나도록 설정 */
.sectionSixText:nth-child(1) { transition-delay: 0s; }
.sectionSixText:nth-child(2) { transition-delay: 0.3s; }
.sectionSixText:nth-child(3) { transition-delay: 0.5s; }
.sectionSixText:nth-child(4) { transition-delay: 0.7s; }

/* 배포 게이지 */
@keyframes changeBorderColor {
    0% {
        width: 0;
    }
    100% {
        width: calc(100% - 240px); 
    }   
}

/* 아키텍처 plus 버튼 */
@keyframes TooltipSize {
    0% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.9);
    }
}
.sectionImg .plusWrap .plus {
    animation: TooltipSize 1.5s infinite ease-in-out;
}

.sectionImg .plusWrap .plus:hover {
    animation: none;
}