@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;}

.define .txt {display:flex; gap:50px; padding:30px 50px; color:#000; border:1px solid var(--border1);}
.define .txt .icon {display:flex; justify-content:center; align-items:center; border:3px solid var(--border1); width:136px; height:136px; border-radius:50%; box-shadow:3px 3px 10px rgba(0, 0, 0, 0.03); box-sizing:border-box;}
.define .txt dl {width:calc(100% - 186px);}
.define .txt dt {font-size:28px; font-weight:700;}
.define .txt dd {font-weight:500; margin-top:15px;}
.define .ref-photo {padding:50px 0;}
.define .ref-photo ul {display:grid; grid-template-columns:repeat(4,1fr); gap:27px;}
.define .ref-photo ul li {overflow:hidden; border-radius:20px;}
.define .ref-photo ul li img {aspect-ratio:330/200; object-fit:cover; width:100%; object-position:center;}

.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;}

.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;}

.b-target {display:grid; gap:10px;}
.b-target.item3 {grid-template-columns:repeat(3,1fr);}
.b-target .bx {border:3px solid var(--border1); padding:50px 20px; box-sizing:border-box; text-align:center;}
.b-target .bx h4 {position:relative; padding-bottom:25px; font-size:24px; font-weight:600; margin-bottom:10px;}
.b-target .bx h4:after {content:""; display:block; width:26px; height:26px; background:url(/images/business/target_arrow.svg) no-repeat center / contain; transform:translateX(-50%); position:absolute; left:50%; bottom:-5px;}
.b-target .bx p {color:#000; height:calc(100% - 50px); display:flex; justify-content:center;
 align-items:center;}

.b-target li:nth-of-type(1) {border-top:3px solid #F4AE82;}
.b-target li:nth-of-type(2) {border-top:3px solid #EDCA5A;}
.b-target li:nth-of-type(3) {border-top:3px solid #9BCD9E;}
.b-target li:nth-of-type(1) h4 {color:#F4AE82;}
.b-target li:nth-of-type(2) h4 {color:#EDCA5A;}
.b-target li:nth-of-type(3) h4 {color:#9BCD9E;}

.contents .procedure.typeB {gap:15px;}
.procedure.typeB .step {border:3px solid var(--border1); width:220px; box-sizing:border-box; padding:40px 15px; border-radius:15px;}
.lifelong .procedure.typeB .step {width:330px;}
.procedure.typeB .arrow {height:auto;}

.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;}



/* ************************ 태블릿 (~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;}

.define .txt {padding:30px; gap:30px;}
.define .txt dl {width:calc(100% - 166px);}
.define .txt dt {font-size:24px;}
.define .txt dd {margin-top:5px; font-size:18px;}
.define .ref-photo ul {gap:10px;}

.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;}

.b-target .bx {padding:40px 20px;}
.b-target .bx h4 {font-size:22px;}
.b-target .bx p {font-size:18px;}

.contents .procedure {gap:30px; padding-left:20px;}
.procedure .step p {margin-top:15px; font-size:18px;}

.procedure.typeB .step {padding:30px 15px;}

.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;}
}


/* ************************ 모바일 (~767) ************************ */
@media screen and (max-width:767px) { 
.sub-part+.sub-part {margin-top:40px;}
.sub-part h3 {font-size:22px;}
.define .txt {padding:30px 20px;}
.define .txt dl {width:calc(100% - 130px);}
.define .txt dt {font-size:22px;}
.define .txt dd {font-size:17px;}
.define .txt .icon {width:100px; height:100px;}
.define .txt .icon img {width:45px;}
.define .ref-photo {padding:30px 0 40px;}
.define .ref-photo ul {grid-template-columns:1fr 1fr;}
.sub-part .spe-note span {font-size:17px;}
.sub-part .spe-note span i {margin-top:3px;}

.lifelong .procedure.typeB .step {width:250px;}
.procedure .step .circle {width:120px; height:120px;}
.procedure .step .icon-bx img {height:60px;}	
.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;}

.procedure.typeB .step {width:180px; padding:20px 10px;}

.sub-part .info-guide {font-size:17px; padding-left:20px;} 

.b-target .bx {padding:20px;}
.b-target .bx h4 {font-size:20px; margin-bottom:5px;} 
.b-target .bx h4:after {width:20px; bottom:-2px;}
.b-target .bx p {font-size:17px;}
.b-target.item3 {grid-template-columns:repeat(1,1fr);}


.bar-list li {font-size:17px;} 	
} 

/* ************************ 모바일 (~500) ************************ */ 
@media screen and (max-width:500px) { 
.define .txt {flex-direction:column; gap:15px; padding:20px;}
.define .txt dl {width:100%;}
.define .txt .icon {width:80px; height:80px;}
.define .txt .icon img {width:40px;}

.contents .procedure {gap:25px 20px; padding-left:0px;}
.procedure .step .circle {width:100px; height:100px;}
.procedure .step .icon-bx img {height:50px;}	
.procedure .step p {margin-top:10px;}
.procedure .step p br {display:none;}
.procedure .arrow {height:100px; width:15px;}
.procedure.typeB .step {width:130px;}
.contents .procedure.typeB {gap:15px 10px; padding-left:20px;}
.lifelong .procedure.typeB .step {width:calc(100% - 25px);}

.contents .bar-list {padding-left:5px;}
} 