.on-daiagram {min-height:610px; background:#191919; padding:180px 50px; max-width:1540px; margin: auto; border-radius: 36px  }
.up-dia {margin-top:-30px; margin-left:-10px;}
.down-dia {margin-top:120px !important; margin-left:-10px;}
.in_step {margin-top:-20px; margin-left:-20px;}
.in-first {margin-top:-50px; }
.in_circle span {margin-left:-10px; margin-top:20px; margin-bottom:25px; display:inline-block}
.in_circle p {text-align:center; width:100%; display:inline; margin:-6px auto 20px }
.last_step {margin-left:112% !important;}
.in_m img {margin-top:-50% !important;}
/* 이미지 그룹 스타일 */
.group-dia, .up-dia, .down-dia, .group-dia2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0px;
}

/* 내부 그룹의 이미지 정렬 */
.inner-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
/* 초기 상태: 숨김 */
.fade-in {
    opacity: 0;
    transform: translateX(-50px) !important; /* 아래에서 위로 이동하는 효과 */
    transform: translateY(0px) !important; /* 아래에서 위로 이동하는 효과 */
    transition: opacity 2s ease-in-out, transform 2s ease-in-out;
    display: block; /* 이미지가 숨겨지지 않도록 강제 표시 */
}

/* 보이는 상태: 애니메이션 완료 */
.visible {
    opacity: 1;
    transform: translateX(0) !important;
    transform: translateY(0) !important;
}
@media(max-width:768px) {
    .in-cir {margin-top:-10px !important;}
    .on-daiagram {min-height:610px; background:none; padding:10px 15px; max-width:1540px; margin: auto; border-radius: 36px  }
    .up-dia {margin-top:0px; margin-left:0px;}
    .down-dia {margin-top:0px !important; margin-left:0px;}
    .in_step {margin:0 auto}
    .in-first {margin-top:10px; }
    .in_circle span {margin-left:-10px; margin-top:20px; margin-bottom:25px; display:inline-block}
    .in_circle p {text-align:center; width:100%; display:inline; margin:-20px auto 0px }
    .last_step {margin-left:112% !important;}
    .in_m img {margin-top:-50% !important;}
    /* 이미지 그룹 스타일 */
    .group-dia, .up-dia, .down-dia, .group-dia2 {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0px;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    /* 내부 그룹의 이미지 정렬 */
    .inner-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }
    /* 초기 상태: 숨김 */
    .fade-in {
        opacity: 0;
        transform: translateY(-50px) ; /* 아래에서 위로 이동하는 효과 */
        transform: translateX(0px) ; /* 아래에서 위로 이동하는 효과 */
        transition: opacity 2s ease-in-out, transform 2s ease-in-out;
        display: block; /* 이미지가 숨겨지지 않도록 강제 표시 */
    }

    /* 보이는 상태: 애니메이션 완료 */
    .visible {
        opacity: 1;
        transform: translateY(0) ;
        transform: translateX(0) ;
    }


}