@charset "utf-8";
/* 공통 */
.sub-pd { padding: 80px 0; border-bottom: none; background-image: repeating-linear-gradient(to right, #ddd 0px, #ddd var(--dash-length, 16px), transparent var(--dash-length, 16px), transparent var(--dash-gap, 32px)); background-position: bottom; background-size: var(--dash-gap, 32px) 1px; background-repeat: repeat-x;}
.sub-pd.first { padding-bottom: 80px; padding-top: 0; }
.sub-pd.last { padding-top: 80px; padding-bottom: 0; background: transparent;}
.subtit { font-size: 32px; color: #222; font-weight: 400; position: relative; font-family: var(--hakgyo); padding-left: 24px; margin-bottom: 55px; line-height: 1.2em; }
.subtit.mg { margin-bottom: 35px; }
.subtit::before { content: ""; position: absolute; left: 0; width: 4px; height: 28px; background: url(../images/sub/tit-bf.png) center no-repeat; background-size: contain; top: 4px; }
.subtit2 { font-size: 24px; font-weight: 500; line-height: 1.666em; color: #222; }
.subtxt { line-height: 1.8em; margin-bottom: 55px; }
.subtxt.mg { margin-bottom: 0; }
.sub-bg { padding: 120px 0; text-align: center; background-repeat: no-repeat; background-position: center; background-size: cover; color: #fff; margin-bottom: 60px; }
.sub-bg.bg1 { background-image: url(../images/sub/sub1-2-bg.jpg);}
.sub-bg.bg2 { background-image: url(../images/sub/sub4-3-bg.jpg); margin-bottom: 80px; }
.sub-bg h2 { font-size: 30px; line-height: 1.2em; margin-top: 30px; font-weight: 700; }
.sub-bg .subtit2 { color: #fff; margin-top: 45px; }
.sub-bg .subtit2 span { font-weight: 700; }
.sub-bg.bg2 .subtit2 { margin-top: 30px; }

/* 재단소개 */
.it-list { display: flex; flex-wrap: wrap; gap: 24px; }
.it-list li { flex: 1; text-align: center; border: 1px solid #ddd; border-radius: 16px; padding: 40px 15px 30px;}
.it-list li .tit { border-radius: 8px; width: 86px; height: 43px; display: flex; margin: 0 auto 30px; display: flex; align-items: center; justify-content: center; line-height: 1em; font-weight: 700; color: var(--color-primary); background: #fffaf3; }
.it-list li .tit.clr2 { background: #f4fbfd; color: #1ba8d2; }
.it-list li .tit.clr3 { background: #f5fbfb; color: #26b4a6; }
.it-list li .tit.clr4 { background: #f4f8fc; color: #1170b8; }
.it-list li .subtxt { margin-top: 20px; }
.it-inner { padding: 20px; border-radius: 120px; background: linear-gradient(to right, #fefbf6, #f4fbfd, #f4f8fc);margin-bottom: 40px;}
.it-list2 { display: flex; }
.it-list2 li { width: calc(100%/3 + 120px); background: rgba(255,255,255,0.72); border-radius: 110px; text-align: center; padding: 45px 10px; border: 1px solid var(--color-primary); color: var(--color-primary); margin-left: -60px; }
.it-list2 li:first-child { margin-left: 0; }
.it-list2 li .subtit2 { font-weight: 600; line-height: 1.2em; margin-top: 28px; }
.it-list2 li.clr2 { border-color: #1ba8d2; color: #1ba8d2; }
.it-list2 li.clr3 { border-color: #1170b8; color: #1170b8; }
.it-list3 { display: flex; flex-wrap: wrap; gap: 24px;}
.it-list3 li { width: calc(100%/3 - 16px); }
.it-list3 li .tit { text-align: center; line-height: 1.2em; font-size: 18px; font-weight: 600; color: #222; padding: 22px 10px 20px; border: 1px solid #ddd; border-radius: 16px; background: #fafafa; margin-bottom: 20px; }
.it-list3 li .txtbox { padding: 35px 40px; border: 1px solid #ddd; border-radius: 16px; min-height: 217px;}
.it-list3 li .txtbox p { line-height: 1.8em; margin-bottom: 10px; padding-left: 14px; position: relative; }
.it-list3 li .txtbox p::before { content: ""; position: absolute; left: 0; width:4px; height: 4px; background: #222; border-radius: 50%; top: 11px; }
.it-list3 li .txtbox p:last-child { margin-bottom: 0; }

/* 센터소개 */
.hst { padding-top: 60px; position: relative; border-top: 2px solid #686868;}
.hst::before { content: ""; position: absolute; z-index: -1; width: 1px; height: 90%; background: #ddd; left: 271px; top: 65px; }
.hst .group { margin-bottom: 80px; display: flex; }
.hst .group:last-child { margin-bottom: 0; }
.hst .group .year { padding-left: 60px; width: 272px; font-size: 32px; font-weight: 600; line-height: 1em; color: var(--color-primary); position: relative; }
.hst .group .year::after { content: ""; position: absolute; right: -12px; top: 3px; width: 24px; height: 24px; background: url(../images/sub/hst-dots.png) center no-repeat; background-size: contain; }
.hst .group .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 110px; }
.hst .group .info .col { display: flex; align-items: flex-start; margin-bottom: 13px; }
.hst .group .info .col:last-child { margin-bottom: 0; }
.hst .group .info .col .day { font-size: 20px; font-weight: 600; line-height: 1.4em; width: 225px; }
.hst .group .info .col .txt { flex: 1 1 auto; min-width: 0; width: 1%; }
.fc-titbox {margin-bottom: 60px; padding: 40px; display: flex; align-items: center; border: 1px solid #ddd; border-radius: 16px; }
.fc-titbox .info { display: flex; flex-wrap: wrap;}
.fc-titbox .info span { padding: 0 22px; position: relative; display: inline-block; }
.fc-titbox .info span strong { display: inline-block; font-weight: 600; color: #222; padding-right: 16px; }
.fc-titbox .info span::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; width: 1px; height: 10px; background: #ddd; }
.fc-titbox .info span:last-child::after { display: none; }
:root { --slider-active-width: 700px; }
.owl-carousel .owl-stage {display:flex; align-items:flex-start;}
.owl-carousel .owl-stage:after {display:none;}
.owl-carousel .owl-item {flex-shrink:0;}
.center-slider {position:relative; overflow:hidden;}
.center-slider .item {width:var(--slider-active-width); margin:0 30px;}
.center-slider .item .tit { text-align: center; font-size: 32px; font-weight: 600; line-height: 1.2em; color: #222; margin-top: 35px; display: none; }
.center-slider .owl-item .item {transform: scale(.8); transition:.6s ease; margin:0; position: relative; }
.center-slider .owl-item .item::before 
.center-slider .owl-item .item .img { position: relative;}
.center-slider .owl-item .item .img::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.56); border-radius: 16px; transition: .2s;}
.center-slider .owl-item .item img { border-radius: 16px; }
.center-slider .owl-item.active.center .item {transform:scale(1);}
.center-slider .owl-item.active.center .tit { display: block; }
.center-slider .owl-item.active.center .item .img::before { opacity: 0; }
.center-slider .owl-nav button {position:absolute; top:50%; margin-top:-32px; width:64px; height:64px; background:#fff !important; border-radius:100%; color:#fff !important; box-shadow: 0 0 8px rgba(0,0,0,0.08); }
.center-slider .owl-prev {left:calc((100% - var(--slider-active-width)) / 2); transform:translate(-50%, -50%); }
.center-slider .owl-prev::before { content: "←"; font-size: 20px; position: absolute; left: 0; right: 0; margin: auto; top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--color-primary);}
.center-slider .owl-next::before { content: "→"; font-size: 20px; position: absolute; left: 0; right: 0; margin: auto; top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--color-primary);}
.center-slider .owl-next {right:calc((100% - var(--slider-active-width)) / 2); transform:translate(50%, -50%);}
.organ { text-align: center; }

/* 조직도 */
.organ-tbl-wrap { overflow: auto; }
.organ-tbl { width: 100%; border-collapse: collapse; border-top: 2px solid #686868; }
.organ-tbl tr { border-bottom: 1px solid #ddd;}
.organ-tbl tr th { border-right: 1px solid #ddd; padding: 23px 10px; line-height: 1em; font-weight: 600; color: #222; background: #fafafa;}  
.organ-tbl tr th:last-child { border: none; }
.organ-tbl tr td { border-right: 1px solid #ddd; padding: 17px 10px; text-align: center; }  
.organ-tbl tr td:last-child { border: none; }
.organ-tbl tr td.left { text-align: left; padding-left: 20px; }
.organ-tbl tr td.left p { position: relative; padding-left: 14px; margin-bottom: 6px; }
.organ-tbl tr td.left p:last-child { margin-bottom: 0; }
.organ-tbl tr td.left p::before { content: ""; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; border-radius: 4px; background: var(--color-primary); }

/* 오시는 길 */
.map-wrap { display: flex; }
.map-wrap .map { width: 51%; border-radius: 24px; overflow: hidden;}
.map-wrap .info { width: 49%; padding-left: 24px; }
.map-wrap .info .info-wrap { display: flex; flex-direction: column; border-radius: 24px; padding: 20px; background: #f5f5f5; }
.map-wrap .info .info-wrap .info-card { margin-bottom: 20px; }
.map-wrap .info .info-wrap .info-card:last-child { margin-bottom: 0; }
.map-wrap .info-card { background: #fff; border-radius: 16px; padding: 35px 40px; display: flex; flex-direction: column; }
.map-wrap .info-card-tit { font-size: 28px; font-weight: 700; color: #f5af49; line-height: 1.5em; margin-bottom: 20px; }
.map-wrap .info-card-content { display: block; }
.map-wrap .info-address { display: block; margin-bottom: 24px; }
.map-wrap .info-address p { line-height: 1.777em; color: #484848; margin-bottom: 7px; }
.map-wrap .info-address p:last-child { margin-bottom: 0; }
.map-wrap .info-note { color: #1ba8d2 !important; font-weight: 600; line-height: 1.875em; }
.map-wrap .info-contact { display: block; }
.map-wrap .info-contact-item { display: flex; align-items: center; margin-bottom: 6px; }
.map-wrap .info-contact-item:last-child { margin-bottom: 0; }
.map-wrap .info-label { font-weight: 600; color: #1170b8; line-height: 1.777em; margin-right: 10px; }
.map-wrap .info-line { width: 1px; height: 10px; background: #ddd; margin-right: 10px; }
.map-wrap .info-value { line-height: 1.777em; color: #484848; }

/* 자립준비 */
.prep-section { display: flex; align-items: flex-end; }
.prep-section.al { align-items: center;}
.prep-content { flex: 1; display: block; }
.prep-content > * { margin-bottom: 30px; }
.prep-content > *:last-child { margin-bottom: 0; }
.prep-txt { padding-left: 24px; }
.prep-txt p { line-height: 1.875em; color: #484848; }
.prep-txt p strong { font-weight: 600; }
.prep-program { padding-left: 24px; }
.prep-program-box { background: #fff; border: 1px solid #ddd; border-radius: 24px; padding: 40px; display: block; }
.prep-program-tit { background: #f4f5fa; border: 1px solid #102e8c; border-radius: 24px; padding: 8px 16px; text-align: center; font-weight: 600; color: #102e8c; line-height: 1.875em; display: inline-block; margin-bottom: 40px; }
.prep-program-list { display: flex; flex-wrap: wrap; gap: 16px; }
.prep-tag { padding: 10px; border-radius: 8px; text-align: center; font-weight: 600; line-height: 1.875em; color: #484848; width: calc(100%/4 - 12px); }
.prep-tag:nth-child(4n) { margin-right: 0; }
.prep-tag.tag1 { background: #fff7eb; color: #f5af49; }
.prep-tag.tag2 { background: #e8f6f9; color: #1ba8d2; }
.prep-tag.tag3 { background: #eafaf8; color: #26b4a6; }
.prep-tag.tag4 { background: #eef4f9; color: #1170b8; }
.prep-img { width: 650px; border-radius: 24px; margin-left: 80px; }
.prep-inquiry { padding-left: 24px; display: block; }
.prep-inquiry-tit { font-weight: 600; line-height: 1.5em; color: #26b4a6; margin-bottom: 6px; font-size: 20px; }
.prep-inquiry-item { display: flex; align-items: center; font-size: 18px; }
.prep-inquiry-label { font-weight: 600; line-height: 1.777em; color: #f5af49; margin-right: 10px;}
.prep-inquiry-line { width: 1px; height: 10px; background: #ddd; margin-right: 10px; }
.prep-inquiry-value { line-height: 1.777em; color: #484848; }
.prep-txtbox { margin-top: 10px; }
.prep-txtbox p { padding-left: 14px; position: relative; line-height: 1.777em;}
.prep-txtbox p::before { content: ""; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; border-radius: 4px; background: var(--color-primary); }

/* 자립체험 */ 
.exp-activity { padding-left: 24px; display: flex; flex-wrap: wrap; gap: 24px; }
.exp-activity .exp-card { width: calc(100%/2 - 12px);}
.exp-card { background: #fff; border: 1px solid #ddd; border-radius: 24px; padding: 40px; width: 696px; display: block; }
.exp-card-tit { border-radius: 24px; padding: 6px 16px 5px; text-align: center; font-weight: 600; line-height: 1.875em; display: inline-block; margin-bottom: 35px; }
.exp-card-tit1 { background: #fefbf6; border: 1px solid #f5af49; color: #f5af49; }
.exp-card-tit2 { background: #f4fbfd; border: 1px solid #1ba8d2; color: #1ba8d2; }
.exp-card-content { display: block; }
.exp-item { display: flex; align-items: flex-start; padding-left: 16px; margin-bottom: 11px; }
.exp-item:last-child { margin-bottom: 0; }
.exp-dot { width: 4px; height: 4px; border-radius: 50%; background: #f5af49; flex-shrink: 0; margin-right: 10px; margin-top: 12px; }
.exp-dot2 { background: #1ba8d2; }
.exp-label { font-weight: 600; line-height: 1.875em; color: #484848; margin-right: 10px; flex-shrink: 0; }
.exp-line { width: 1px; height: 10px; background: #ddd; margin-right: 10px; flex-shrink: 0; margin-top: 10px; }
.exp-value { line-height: 1.875em; color: #484848; }
.exp-value p { margin-bottom: 0; }
.exp-process { padding-left: 24px; display: flex; align-items: center; gap: 32px; }
.exp-step { flex: 1; border-radius: 16px; padding: 16px; text-align: center; font-weight: 600; line-height: 1.875em; color: #fff; flex-shrink: 0; position: relative; }
.exp-step::after { content: ""; position: absolute; right: -24px; top: 0; bottom: 0; margin: auto; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: contain; } 
.exp-step:last-child::after { display: none; }
.exp-step.step1 { background: #f5af49; }
.exp-step.step2 { background: #88ab8d; }
.exp-step.step3 { background: #1ba8d2; }
.exp-step.step4 { background: #21aebc; }
.exp-step.step5 { background: #26b4a6; }
.exp-step.step6 { background: #1170b8; }
.exp-step.step1::after { background-image: url(../images/sub/sub2-2-arrow1.png);}
.exp-step.step2::after { background-image: url(../images/sub/sub2-2-arrow2.png);}
.exp-step.step3::after { background-image: url(../images/sub/sub2-2-arrow3.png);}
.exp-step.step4::after { background-image: url(../images/sub/sub2-2-arrow4.png);}
.exp-step.step5::after { background-image: url(../images/sub/sub2-2-arrow5.png);}

/* 자립생활 */
.life-list { padding-left: 24px; display: flex; flex-wrap: wrap; gap: 24px; }
.life-list li { width: calc(100%/2 - 12px); border: 1px solid #ddd; border-radius: 24px; padding: 35px 40px; min-height: 200px;}
.life-list li .tit { font-size: 20px; font-weight: 600; color: #102e8c; margin-bottom: 20px; line-height: 1.3em; }
.life-list li .txt { padding-left: 14px; position: relative; line-height: 1.777em;}
.life-list li .txt::before { content: ""; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; border-radius: 4px; background: #102e8c; }
.life-list li .txt span { font-weight: 600; }

/* 후원안내 및 신청 */
.sup-tab { display: flex; flex-wrap: wrap; margin-bottom: 80px; gap: 24px; }
.sup-tab li { width: calc(100%/3 - 16px); color: #fff; text-align: center; background: var(--color-primary); border-radius: 16px; overflow: hidden;}
.sup-tab li.clr2 { background: #1ba8d2; }
.sup-tab li.clr3 { background: #26B4A6; }
.sup-tab li a { display: flex; align-items: center; justify-content: center; height: 80px; font-size: 20px; font-weight: 600; line-height: 1em; }