@charset "utf-8";

.sub-part+.sub-part {margin-top:50px;}
.sub-part h3 {font-size:28px; color:#000; padding-left:30px; position:relative; margin-bottom:30px;}
.sub-part h3:before {content:""; display:block; width:10px; height:10px; border-radius:50%; background:var(--border1); position:absolute; top:8px; left:0;}

.contents .procedure {display:flex; flex-wrap:wrap; gap:45px; max-width:1340px; padding-left:30px;}
.procedure .step {text-align:center; position:relative;}
.procedure .step .circle {width:150px; height:150px; border-radius:50%; border:10px solid #dbdbdb; display:flex; justify-content:center; align-items:center; box-sizing:border-box;}
.procedure .step:nth-of-type(1) .circle {border:10px solid #F4AE82;}
.procedure .step:nth-of-type(3) .circle {border:10px solid #EDCA5A;}
.procedure .step:nth-of-type(5) .circle {border:10px solid #9BCD9E;}
.procedure .step:nth-of-type(7) .circle {border:10px solid #BDCF58;}
.procedure .step:nth-of-type(9) .circle {border:10px solid #4BAA84;}
.procedure .step p {color:#000; line-height:1.2; margin-top:20px;}
.procedure .arrow {width:23px; height:150px; background:url(/images/guide/welfare-step_arrow.svg) no-repeat center / contain;}

.contents .bar-list {padding-left:30px;}
.bar-list li {padding-left:15px; position:relative;}
.bar-list li:before {content:""; display:block; width:6px; height:2px; background:#d9d9d9; position:absolute; left:0; top:14px;}
.bar-list li+li {margin-top:5px;}


.welfare .procedure .step:nth-of-type(1) .circle img {transform:translateX(7px);}

/* ************************ 태블릿 (~991) ************************ */
@media screen and (max-width:991px) {
.sub-part h3 {font-size:24px; padding-left:20px; margin-bottom:20px;}
.sub-part h3:before {content:""; display:block; width:7px; height:7px; border-radius:50%; background:var(--border1); position:absolute; top:8px; left:0;}

.contents .procedure {gap:30px; padding-left:20px;}
.procedure .step p {margin-top:15px; font-size:18px;}

.contents .bar-list {padding-left:20px;}
.bar-list li {font-size:18px;}
.bar-list li:before {top:12px;}
}


/* ************************ 모바일 (~767) ************************ */
@media screen and (max-width:767px) { 
.sub-part+.sub-part {margin-top:40px;}
.sub-part h3 {font-size:22px;}
.sub-part .subject {font-size:17px;}
.sub-part .spe-note span {font-size:17px;}
.sub-part .spe-note span i {height:17px;}

.procedure .step .circle {width:120px; height:120px;}
.procedure .step .circle img {transform:scale(0.8);}	
.welfare .procedure .step:nth-of-type(1) .circle img {transform:translateX(7px) scale(0.8);}
.procedure .arrow {height:120px; width:18px;}
.procedure .step p {font-size:17px;}

.bar-list li {font-size:17px;} 	
} 

/* ************************ 모바일 (~500) ************************ */ 
@media screen and (max-width:500px) { 
.contents .procedure {gap:25px 20px; padding-left:0px;}
.procedure .step .circle {width:100px; height:100px;}
.procedure .step .circle img {transform:scale(0.6);}	
.procedure .step p {margin-top:10px; width:100px;}
.procedure .step p br {display:none;}
.procedure .arrow {height:100px; width:15px;}

.contents .bar-list {padding-left:5px;}
}