@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; max-width:1370px; padding-left:30px; gap:13px;}
.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; margin: 0 auto;}
.procedure .step .circle.green {border:10px solid var(--base3);}
.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;}

.sub-part .info-guide {padding-left:30px;}
.sub-part .info-guide p {font-weight:500; color:#000;}
.sub-part .info-guide ul {margin-top:5px;}
.sub-part .info-guide ul li {position:relative; padding-left:20px; color:#333;}
.sub-part .info-guide ul li span {position:absolute; top:0px; left:0;}

.sub-part .subject {padding-left:30px; color:#000; font-weight:500;}
.sub-part .spe-note {display:flex; flex-wrap:wrap; padding-left:30px; margin-top:20px; gap:10px;}
.sub-part .spe-note span {display:inline-flex; background:#f4f4f4; padding:10px 15px; color:#000; font-weight:500;}
.sub-part .spe-note span+span {}
.sub-part .spe-note span i {display:inline-block; width:19px; height:19px; background:url(/images/common/i-spe_note.svg) no-repeat center / contain; margin-right:10px; margin-top:6px;}

.sub-part .phone-number {padding-left:30px;}
.sub-part .phone-number a {display:flex; align-items:center; gap:10px; color:var(--base3); font-weight:700; font-size:24px;}

.welfare .procedure .step:nth-of-type(1) .circle img {transform:translateX(7px);}
.contents .slogan-bx {padding-bottom:60px; text-align:center;}
.slogan-bx dt {font-family:'NPSfont'; font-weight: 600; font-size:50px;}
.slogan-bx dt span {font-size:55px;}
.slogan-bx dd {margin-top:5px; color:#000; font-size:20px; font-weight:500;}
.volunteer .slogan-bx dt {color:var(--base2);}
.volunteer .slogan-bx dt span {color:#01C486;}

/* ************************ 태블릿 (~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;}

.sub-part .subject {padding-left:20px; font-size:18px;}
.sub-part .spe-note {padding-left:20px;}
.sub-part .spe-note span {font-size:18px;}
.sub-part .spe-note span i {margin-top:4px;}

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

.sub-part .info-guide {font-size:18px;}


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

.slogan-bx dt {font-size:35px;}
.slogan-bx dt span {color:#01C486; font-size:50px;}
}


/* ************************ 모바일 (~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;}

.sub-part .info-guide {font-size:17px; padding-left:20px;}

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

.slogan-bx dt {font-size:30px; line-height:1.2;}
.slogan-bx dt span {font-size:45px;}
.slogan-bx dd {font-size:16px; margin-top:15px;}


.contents .slogan-bx {padding-bottom:50px;}
.sub-part .phone-number {padding-left:20px;}
} 

/* ************************ 모바일 (~500) ************************ */ 
@media screen and (max-width:500px) { 
.contents .procedure {gap:25px 20px; padding-left:0px; display:grid;         grid-template-columns:repeat(4, 1fr); padding-left:20px;}
.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; justify-self:center;}

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

.contents .slogan-bx {padding-bottom:40px;}

.slogan-bx dt {font-size:25px;}
.slogan-bx dt span {font-size:30px;}
}