.SCF_303020_3 { width:100%; float: left; }
.SCF_303020_3 .sub_stit{ width:100%; float:left;font-size:calc(var(--tit-mds-size) * 1.2); color: #000; font-weight: 900 ;margin-bottom:clamp(10px, 2.344vw, 30px) }
.SCF_303020_3 .sub_stit2{ width:100%; float: left; color: #222; font-size: var(--tit-mds-size); font-weight:600; line-height: 100%; letter-spacing: -1px; margin-bottom: clamp(10px, 1.563vw, 20px)}

/* 구분 -----------------------------------*/
/* ===== PC (>=768px): 4열 지그재그 — 1→2→3→4↓ / 8←7←6←5↓ / 9→10→11→12 ===== */
@media (min-width:768px){
  .SCF_303020_3 { --arr-size:55px; --arr-off:55px; }

  .SCF_303020_3 .step_box{
    width:100%;
    float:left;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:1fr;
    grid-gap:40px;
  }

  .SCF_303020_3 .step_box>.step_inbox{
    position:relative;
    width:100%; float:left;
    border:1px dashed #b2b2b2; border-radius:15px;
    padding:20px 25px 15px; background:#f7f7f7;
  }

  /* 기본: 모든 칸 화살표 숨김 (이후 규칙으로 필요한 칸만 표시) */
  .SCF_303020_3 .step_box>.step_inbox:before{
    content:""; display:none; pointer-events:none;
    position:absolute; z-index:3;
    width:var(--arr-size); height:var(--arr-size);
    border-radius:50%;  background-color: #fff; color:#333; font-size:25px;
    margin-top:calc(-1 * var(--arr-size) / 1.8);  box-shadow:3px 3px 30px rgba(0,0,0,0.05);

    display:none; margin-right: 7px; border: 1px solid rgba(204,204,204,0.15)
  }

  /* ── 홀수행(1·3·5…) 진행방향: 오른쪽 ──
     각 블록 8개가 한 사이클(1~8, 9~16, …)
     → 사이클 내 1,2,3 번째만 오른쪽 화살표 */
  .SCF_303020_3 .step_box>.step_inbox:nth-child(6n+1):before,
  .SCF_303020_3 .step_box>.step_inbox:nth-child(6n+2):before,
  .SCF_303020_3 .step_box>.step_inbox:nth-child(6n+3):before{
    display:grid; place-items:center;
    content:"\ebb5";               /* → (unicons-line) */
    font-family:unicons-line, system-ui, sans-serif;
    top:50%; right:calc(-1 * var(--arr-off));
  }

/* 짝수 행(2행, 4행 …) 진행방향: 5,6,7 모두 ← */
.SCF_303020_3 .step_box>.step_inbox:nth-child(6n+4):before,
.SCF_303020_3 .step_box>.step_inbox:nth-child(6n+5):before,
.SCF_303020_3 .step_box>.step_inbox:nth-child(6n+6):before {
  display:grid; place-items:center;
  content:"\ebb5";               /* ← */
  font-family:unicons-line, system-ui, sans-serif;
  position:absolute; left:calc(-1 * var(--arr-off)); top:50%;
  width:var(--arr-size); height:var(--arr-size);
  margin-top:calc(-1 * var(--arr-size) / 1.8);
  border-radius:50%;   background-color: #fff; color:#333; font-size:25px;margin-left: 7px; border: 1px solid rgba(204,204,204,0.15); transform:rotate(180deg) 
}
  /* ── 행 경계: 4, 8, 12, … 은 “아래 ↓” ── */
  .SCF_303020_3 .step_box>.step_inbox:nth-child(3n):before{
    display:grid; place-items:center;
    content:"\ebb5";               /* → 를 회전해서 ↓ */
    font-family:unicons-line, system-ui, sans-serif;
    transform:rotate(90deg);
    left:50%; bottom:calc(-1 * var(--arr-off)); top:auto;
    margin-left:calc(-1 * var(--arr-size) / 1.8);bottom: -47px;  border: 1px solid rgba(204,204,204,0.15)
  }

  /* 마지막 칸은 어떤 규칙에도 걸려도 최종적으로 숨김 */
  .SCF_303020_3 .step_box>.step_inbox:last-child:before{
    display:none !important;
  }
	
/* Row1: 1~4 그대로 */
/* Row1: 1 2 3 4 */
.SCF_303020_3 .step_box>.step_inbox:nth-child(1)  { order: 1; }
.SCF_303020_3 .step_box>.step_inbox:nth-child(2)  { order: 2; }
.SCF_303020_3 .step_box>.step_inbox:nth-child(3)  { order: 3; }


/* Row2: 8 7 6 5 (역순) */
.SCF_303020_3 .step_box>.step_inbox:nth-child(4)  { order: 6; }
.SCF_303020_3 .step_box>.step_inbox:nth-child(5)  { order: 5; }
.SCF_303020_3 .step_box>.step_inbox:nth-child(6)  { order: 4; }


/* Row3: 9 10 11 12 */
.SCF_303020_3 .step_box>.step_inbox:nth-child(7)  { order: 7; }
.SCF_303020_3 .step_box>.step_inbox:nth-child(8) { order: 8; }
.SCF_303020_3 .step_box>.step_inbox:nth-child(9) { order: 9; }


/* Row4: 16 15 14 13 (역순) */
.SCF_303020_3 .step_box>.step_inbox:nth-child(10) { order: 12; }
.SCF_303020_3 .step_box>.step_inbox:nth-child(11) { order: 11; }
.SCF_303020_3 .step_box>.step_inbox:nth-child(12) { order: 10; }




/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
    
}

/**** 모바일 ****/
@media only all and (max-width:767px) {
    .SCF_303020_3 .step_box{ 
        width: 100%; 
        float: left; 
        display: grid; 
        grid-template-columns: repeat(2, 1fr); 
        border-radius: 15px; 
        padding: 10px 10px 0px 0px!important; 
        margin-bottom: 10px; 
        grid-gap: 10px; 
        box-shadow:none!important; 
        border: none;
    }
    
    .SCF_303020_3 .step_box>.step_inbox{ 
        width: 100%; 
        float: left; 
        border : 1px dashed #b2b2b2; 
        border-radius: 15px; 
        padding: 10px 25px 15px 25px; 
        position: relative; 
        height: auto;
    }
    
    .SCF_303020_3 .step_box>.step_inbox:before{
        position: absolute; 
        right: -20px; 
        top: 50%; 
        margin-top: -15px; 
        width: 30px; 
        height: 30px; 
        border-radius: 100%; 
        background-color: #333; 
        color: #fff; 
        font-size: 25px;
        content: "\ebb5"; 
        font-family: unicons-line; 
        z-index: 99; 
        display: grid; 
        place-items: center; 
        padding-right: -2px; 
        padding-bottom: 2px;
    }
    
    .SCF_303020_3 .step_box>.step_inbox:last-child:before{
        display: none;
    }
}

/**** 모바일2 ****/
@media only all and (max-width:400px) {
    .SCF_303020_3 .step_box{ 
        width: 100%; 
        float: left; 
        display: grid; 
        grid-template-columns: repeat(2, 1fr); 
        border-radius: 15px; 
        padding:clamp(10px, 1.953vw, 25px) 10px; 
        margin-bottom: 10px;
    }
}

/* 구분 //end -----------------------------------*/
.SCF_303020_3 .step_box>.step_inbox .step_um{ 
    width:40px; 
    aspect-ratio:1 / 1;
    float: left; 
    font-size:calc(var(--tx-sm-size) * 0.9); 
    color:#fff; 
    border-radius:10px; 
    background-color:var(--primary); 
    font-weight:800; 
    line-height: 100%; 
    letter-spacing: -1px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin-bottom: 20px;
}

.SCF_303020_3 .step_box>.step_inbox .step_tt{ 
    width:100%; 
    float: left; 
    font-size: clamp(14px, 1.563vw, 20px); 
    color:#222; 
    font-weight:700; 
    line-height: 130%; 
    letter-spacing: -1px;
}

.SCF_303020_3 .wg_btn { 
    width:auto; 
    float: left; 
    padding: 10px 20px; 
    border-radius: 6px; 
    background-color: #333; 
    color: #fff; 
    font-size: calc(var(--tx-sm-size) * 0.9); 
    margin-top: 10px;
}

.SCF_303020_3 .wg_btn:hover{ 
    background-color: var(--primary);
}