@charset "utf-8";
/* ==========================================================
sub.css : 서브 상단(배경 띠 + 제목) / 경로 바(홈 · 드롭다운) / 본문 머리 / 3뎁스 탭
원주시 통합예약플랫폼(yeyak.wonju.go.kr) site/www/css/sub_layout.css 의
.sub_head / .breadcrumbs 규칙을 그대로 옮기고 색만 이 사이트 녹색으로 바꿈
========================================================== */
/* 서브 상단 띠 : 헤더(100px) 포함 330px, 아래 모서리 85px — 참고 .sub_head:before (top:-90px; height:320px; radius 85) */
.subVisual {position:relative;z-index:20;height:330px}
.subVisualImg {position:absolute;left:0;top:0;z-index:-1;width:100%;height:100%;border-radius:0 0 85px 85px;background:linear-gradient(145deg, #eef6f1 0%, #eaf4ef 48%, #ecf5f1 70%, #edf5f2 100%);overflow:hidden}
.subVisualImg .visual-inner {width:100%;height:100%;background-position:50% 100%;background-size:cover;opacity:.15}
/* 서브 헤더는 띠 위에 투명하게 얹힌다 (메뉴 펼침·스크롤 고정 때만 흰 배경) */
.sub #header:not(.top-fixed):not(.gnb-open) #headerInnerWrap:before {background:transparent;border-bottom-color:transparent}
/* 제목 — 참고 .sub_title {padding:56px 0 72px} h2 44px/60px JalnanGothic 500 */
.subVisualText {position:relative;z-index:1;display:block;padding:calc(var(--header-height) + 56px) 20px 72px;text-align:center}
.subVisualText h2 small {display:block;margin-bottom: 15px;color:var(--c-green);font-family:var(--font-family4);font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.subVisualText h2 big {display:block;color:#1f1f1f;font-family:var(--font-family3);font-size:44px;font-weight:500;line-height:60px;letter-spacing:0}
/* 경로 바 — 참고 .breadcrumbs : 제목 아래, 띠 아래선을 38px 넘어 내려온다 */
.subVisualMenu {position:absolute;left:0;top:calc(var(--header-height) + 188px);width:100%}
.subMenu {max-width:var(--inner);margin:0 auto;padding:0 20px}
.lnb {position:relative;display:flex;align-items:flex-start;font-size:0;line-height:0} /* 홈 원(80)과 흰 알약(80)의 위아래를 정확히 맞춘다 */
.lnb-home {position:absolute;left:0;top:0;z-index:3;display:flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:100%;background:linear-gradient(300deg, #1e9b6e 0%, #23a97a 99%);color:#fff;font-size:22px;box-shadow:21px 34px 50px 0 rgba(20,70,50,.14);transition:filter .2s}
.lnb-home:hover {color:#fff;filter:brightness(1.06)}
.lnb-list {display:inline-block;position:relative;z-index:1;vertical-align:top;padding-left:80px;border-radius:80px;background:#fff;box-shadow:0 30px 60px 0 rgba(20,70,50,.06);font-size:0;line-height:0}
.lnb-drop {display:inline-block;position:relative;min-width:250px;vertical-align:top;font-size:16px;line-height:1.4}
.lnb-drop.open {z-index:5} /* 열린 항목(패널 테두리)이 옆 버튼보다 위에 오게 — 테두리가 일부 가려지던 문제 */
.lnb-drop:after {content:"";display:block;position:absolute;top:0;right:0;bottom:0;z-index:2;width:1px;height:20px;margin:auto 0;background:#d5d7dd}
.lnb-drop:last-child:after,
.lnb-drop.open:after {display:none}
.lnb-drop__btn {position:relative;z-index:2;display:block;width:100%;height:80px;margin-top:1px;padding:0 55px 0 30px;border:0;border-radius: 20px;background:#fff;color:#1f1f1f;font-family:inherit;font-size:20px;font-weight:600;line-height:59px;text-align:left;cursor:pointer;transition:border-radius .25s ease-in-out}
.lnb-drop__btn span {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lnb-drop__btn i {position:absolute;top:0;right:28px;bottom:0;height:20px;margin:auto 0;font-size:20px;line-height:1;transition:transform .25s ease-in-out}
.lnb-drop.open .lnb-drop__btn i {transform:rotateX(180deg)}
/* 펼침 패널 : 버튼 뒤에 깔리고 위 100px 은 버튼 자리 — 참고 .breadcrumbs_panel */
.lnb-drop__list {position:absolute;top:0;left:-1px;right:-1px;z-index:1;padding:100px 25px 28px;border:1px solid var(--c-green);border-radius:20px;background:#fff;box-shadow:3px 6px 20px 0 rgba(30,120,90,.08);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .25s ease, transform .25s ease, visibility .25s}
.lnb-drop__list:before {content:"";display:block;position:absolute;top:80px;left:50%;width:0;height:1px;background:#d4d4d4;transform:translateX(-50%);transition:width .25s ease-in-out}
.lnb-drop.open .lnb-drop__list {opacity:1;visibility:visible;transform:translateY(0)}
.lnb-drop.open .lnb-drop__list:before {width:calc(100% - 38px)}
.lnb-drop__list li + li {margin-top:10px}
.lnb-drop__list li {opacity:0;transform:translateY(-6px);transition:opacity .25s ease, transform .25s ease}
.lnb-drop.open .lnb-drop__list li {opacity:1;transform:translateY(0)}
.lnb-drop.open .lnb-drop__list li:nth-child(2) {transition-delay:.04s}
.lnb-drop.open .lnb-drop__list li:nth-child(3) {transition-delay:.08s}
.lnb-drop.open .lnb-drop__list li:nth-child(4) {transition-delay:.12s}
.lnb-drop.open .lnb-drop__list li:nth-child(5) {transition-delay:.16s}
.lnb-drop.open .lnb-drop__list li:nth-child(n+6) {transition-delay:.2s}
.lnb-drop__list a {display:block;color:#808080;font-size:18px;font-weight:600;line-height:30px;transition:color .2s}
.lnb-drop__list a:hover,
.lnb-drop__list li.on a {color:var(--c-green)}
.lnb-drop__list a i {font-size:14px;color:#aaa}
/* 본문 : 경로 바가 띠 아래로 38px 내려오므로 그만큼 띄운다 */
#subContents {padding: 140px 0 120px;}
#subContents .area {max-width:var(--inner);margin:0 auto;padding:0 20px}
#subContents.subContentsWide .area {max-width:var(--inner-wide)}
.subHead {margin-bottom:50px;text-align:center}
.subHead.noTitle {margin-bottom:0}
.subTitle {font-family:var(--font-family2);font-size:36px;font-weight:600;letter-spacing:-.04em}
/* 3뎁스 탭 : 흰 알약 바 안에 항목이 균등 배치, 현재 항목만 녹색 알약 */
.subTabs {margin-bottom:60px}
.subTabs ul {position:relative;display:flex;flex-wrap:wrap;padding:10px;border-radius:20px;background:#fff;box-shadow:0 10px 40px rgba(27,59,134,.1)}
.subTabs li {flex:1 1 0;min-width:0}
.subTabs li a {position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;height:56px;padding:0 20px;border-radius:10px;color:#444;font-size: 20px;font-weight:600;letter-spacing:-.02em;word-break:keep-all;transition:background .25s, color .25s}
.subTabs li a i {font-size:16px;font-weight:normal}
.subTabs li a:hover {background:#eef6f2;color:var(--c-green)}
.subTabs li.on a, .subTabs li.on a:hover {background:var(--c-green);color:#fff}
/* 슬라이딩 온박스 (js/nav.js) : 녹색 알약 하나가 마우스를 따라 미끄러지고, 벗어나면 현재 항목으로 돌아온다 */
.subTabs-ind {position:absolute;z-index:0;top:0;left:0;width:0;height:0;border-radius:10px;background:var(--c-green);opacity:0;pointer-events:none}
.subTabs.has-ind .subTabs-ind.is-ready {transition:left .4s cubic-bezier(.4,0,.2,1), top .4s cubic-bezier(.4,0,.2,1), width .4s cubic-bezier(.4,0,.2,1), height .4s cubic-bezier(.4,0,.2,1), opacity .25s}
.subTabs.has-ind .subTabs-ind.is-show {opacity:1}
.subTabs.has-ind li a, .subTabs.has-ind li a:hover, .subTabs.has-ind li.on a {background:transparent;color:#444}
.subTabs.has-ind li.is-hover a, .subTabs.has-ind li.on a {color:#fff}
.subTabs.has-ind.is-hovering li.on:not(.is-hover) a {color:#444}
/* 참고 사이트 반응형 : 1280 → 폭 100% 로 나눠 쓰기, 1024 → 띠 축소, 640 → 경로 바 숨김 */
@media (max-width:1280px) {
.lnb-list {display:flex;flex:1 1 auto;min-width:0} /* 1280 이하 : 흰 알약이 남은 폭을 다 쓰고 항목이 균등 분할 (내용 폭만큼 줄어들어 글자가 잘리던 문제) */
.lnb-drop {flex:1 1 0;min-width:0;width:auto}
.lnb-drop__btn {font-size:18px;line-height:24px;word-break:keep-all}
}
@media (max-width:1024px) {
.subVisual {height:195px}
.subVisualImg {border-radius:0 0 45px 45px}
.subVisualText {padding:calc(var(--header-height) + 20px) 20px 0}
.subVisualText h2 small {font-size:13px;margin-bottom:2px}
.subVisualText h2 big {font-size:25px;line-height:30px}
.subVisualMenu {top:calc(var(--header-height) + 70px)}
.lnb-home {width:60px;height:60px;font-size:18px}
.lnb-list {padding-left:60px;border-radius:60px}
.lnb-drop__btn {height:60px;padding:0 40px 0 18px;font-size:16px}
.lnb-drop__btn i {right:16px}
.lnb-drop__list {padding:75px 18px 20px}
.lnb-drop__list:before {top:60px}
.lnb-drop__list a {font-size:16px;line-height:26px}
#subContents {padding:70px 0 80px}
.subTitle {font-size:28px}
.subTabs {margin-bottom:40px}
.subTabs ul {padding:6px}
.subTabs li a, .subTabs-ind {border-radius:14px}
.subTabs li {flex:1 1 50%}
.subTabs li a {height:48px;padding:0 12px;font-size:16px}
}
@media (max-width:640px) {
.subVisual {height:145px}
.subVisualText {padding-top:calc(var(--header-height) + 22px)}
.subVisualText h2 big {font-size:22px;line-height:30px}
.subVisualMenu {display:none}
#subContents {padding-top:40px}
}
/* ==========================================================
찾아오시는 길 (sub1_5.php) — 삼천리 찾아오시는길(.map-item / .map-info) 구조 참고, 폭은 우리 콘텐츠 폭
지도 : 기존 사이트와 같은 카카오맵 퍼가기(roughmap)
========================================================== */
.location-map {position:relative;overflow:hidden;border:1px solid #e0e0e0;border-radius:20px;background:#f8f9fa}
.location-map .root_daum_roughmap {width:100% !important}
/* 카카오 퍼가기 자체 테두리는 끄고(우리 박스 테두리와 겹쳐 두 줄로 보임) 높이만 지정 */
.location-map .root_daum_roughmap .wrap_map {height:520px !important;border:0 !important}
.location-map .root_daum_roughmap .map_border {display:none !important} /* 카카오가 지도 위에 덧그리는 1px 테두리 */
.location-map .root_daum_roughmap .wrap_map .map,
.location-map .root_daum_roughmap .cont {border:0 !important}
/* 아래 컨트롤 바(확대·축소·로드뷰·길찾기)의 테두리가 박스 아래선과 겹쳐 두 줄로 보여 끈다 */
.location-map .root_daum_roughmap .wrap_controllers {border:0 !important;border-top:1px solid #f0f0f0 !important}
/* 정보 박스 (PC 기본) : 한 줄에 [아이콘+항목명 150px] [내용], 줄 사이 20px */
.location-info {margin-top:30px;padding:36px 40px;position: relative;padding: 44px 40px;border: 1px solid #d5d7dd;border-radius: 20px;background: #fff;box-shadow: 8px 6px 20px rgba(32, 54, 121, .07);}
.location-info__list {display:flex;flex-direction:column;gap:20px}
.location-info__item {display:flex;align-items:center;gap:0}
.location-info__head {display:flex;flex:none;align-items:center;gap:8px;width:150px;color:#383838;font-size:17px;font-weight: 600;}
.location-info__head i {display:inline-flex;flex:none;justify-content:center;align-items:center;width:26px;font-size:22px;line-height:1;color:var(--c-green);font-weight:normal}
.location-info__head span {display:inline-block;width:3em;white-space:nowrap}
.location-info__head span.is-2 {letter-spacing:1em} /* 두 글자 라벨 : 주 소 처럼 벌려 세 글자 폭에 맞춘다 (크롬은 한글 양쪽맞춤을 안 벌려서 자간으로 처리) */
.location-info__desc {flex:1;min-width:0;margin:0;color:#222;font-size:17px;line-height:1.6;word-break:keep-all}
.location-info__desc a:hover {color:var(--c-green);text-decoration:underline}
.location-info__desc .dot {margin:0 10px;color:#ccc}
.location-btns {display:flex;gap:8px}
.location-btns a {display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border:1px solid #dfe3ea;border-radius:40px;color:#444;font-size:14px;font-weight:600;transition:border-color .2s, color .2s, background .2s}
.location-btns a i {font-size:16px;font-weight: normal;}
.location-btns a:hover {border-color:var(--c-green);background:var(--c-green);color:#fff}
.location-btns a.btn-kakao:hover {border-color:#fee500;background:#fee500;color:#191919} /* 카카오 옐로 */
.location-btns a.btn-naver:hover {border-color:#03c75a;background:#03c75a;color:#fff} /* 네이버 그린 */
@media (max-width:1024px) {
.location-map .root_daum_roughmap .wrap_map {height:400px !important}
.location-map {border-radius:14px}
.location-info {margin-top:20px;padding:22px 20px;border-radius:14px}
.location-info__list {gap:16px}
.location-info__item {flex-direction:column;align-items:flex-start;gap:4px}
.location-info__head {width:auto;font-size:15px}
.location-info__desc {font-size:15px}
}
@media (max-width:640px) {
.location-map .root_daum_roughmap .wrap_map {height:300px !important}
.location-btns {flex-wrap:wrap}
}
/* ===== 조직도 (sub1_4) : 음성군 청소년문화의집 조직 및 업무안내 참고 ===== */
.org-wrap {padding:70px 40px 80px;border-radius:20px;background: #f4f4f9;}
.org-chart {position:relative;max-width:1000px;margin:0 auto}
.org-box {display:flex;align-items:center;justify-content:center;height:64px;padding:0 20px;border:1px solid #d6e3dc;border-radius:12px;background:#fff;color:#333;font-size:18px;font-weight:600;letter-spacing:-.02em;text-align:center;word-break:keep-all}
.org-box--lg {height:80px;border:0;background:#1c2d5a;color:#fff;font-family:var(--font-family2);font-size:26px} /* 창업지원단 : 짙은 네이비 채움, 테두리 없음 */
.org-box--outline {border:3px solid var(--c-green);color:var(--c-green-dark)}
.org-box--fill {border-color:var(--c-green);background:var(--c-green);color:#fff;font-size:20px}
.org-box--pill {border-radius:40px}
/* 1단 */
.org-top {position:relative;display:flex;justify-content:center;padding-bottom:40px}
.org-top .org-box {width:320px}
.org-top:after {content:'';position:absolute;left:50%;bottom:0;height:40px;border-left:2px dashed #b9cfc4}
/* 2단 : 센터장 + 학장 */
.org-head {position:relative;display:flex;justify-content:center}
.org-head > .org-box--fill {position:relative;z-index:1;width:320px}
.org-dean {position:absolute;top:50%;left:calc(50% + 160px);display:flex;align-items:center;transform:translateY(-50%)}
.org-dean:before {content:'';width:60px;border-top:2px dashed #b9cfc4}
.org-dean .org-box {height:56px;border-width:2px;font-size:16px}
/* 3단 : 위원회 (가운데 세로선 + 양쪽으로 점선) */
.org-committee {position:relative;display:flex;justify-content:space-between;padding:40px 0}
.org-committee:before {content:'';position:absolute;left:50%;top:0;bottom:0;border-left:2px solid #b9cfc4}
.org-committee:after {content:'';position:absolute;left:200px;right:200px;top:50%;border-top:2px dashed #b9cfc4}
.org-committee .org-box {position:relative;z-index:1;width:200px}
/* 4단 : 부서 (가로선 → 각 박스로 세로선 + 화살표) */
.org-depts {position:relative;display:flex;gap:24px;padding-top:40px}
/* 가로선은 각 칸이 자기 몫(간격 절반 포함)을 그려 첫·끝 칸은 가운데까지만 : 칸 수가 바뀌어도 중심이 어긋나지 않는다 */
.org-depts li .org-box:before {content:'';position:absolute;left:-12px;right:-12px;top:-40px;border-top:2px solid #b9cfc4}
.org-depts li:first-child .org-box:before {left:50%}
.org-depts li:last-child .org-box:before {right:50%}
.org-depts li {position:relative;flex:1 1 0;min-width:0}
.org-depts li:before {content:'';position:absolute;left:50%;top:-40px;height:40px;border-left:2px solid #b9cfc4}
/* 표 */
.org-table-wrap {margin-top:60px}
/* 소제목 공통 : 잎 아이콘 + 짙은 녹색 (.sub-tit 로 다른 페이지에서도 사용) */
.sub-tit, .org-table-title {position:relative;margin:50px 0 15px;padding-left:30px;color:#003a30;font-family:var(--font-family2);font-size:26px;font-weight:600;line-height:34px;letter-spacing:-.03em} /* 수원시 영흥수목원 h3 */
.sub-tit:first-child, .org-table-title:first-child {margin-top:0}
.sub-tit i, .org-table-title i {position:absolute;left:0;top:5px;font-size:22px;line-height:1;font-weight:normal;color:inherit}
.scroll-table {overflow-x:auto}
/* 표 공통 (.tbl 로 다른 페이지에서도 사용) : 수원시 영흥수목원 .table 참고. thead 배경만 우리 색 유지 */
.tbl, .org-table {width:100%;margin:5px 0 10px;border-collapse:collapse;border-top:2px solid #000;font-size:18px;line-height:30px;letter-spacing:-.03em}
.tbl th, .tbl td, .org-table th, .org-table td {padding: 14px 20px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;text-align:center;vertical-align:middle}
.tbl th:last-child, .tbl td:last-child, .org-table th:last-child, .org-table td:last-child {border-right:0}
.tbl thead th, .org-table thead th {background:#f5faf7;color:#000;font-weight: 600;}
.tbl tbody th, .org-table tbody th {color:#437961;font-weight:400}
.tbl td, .org-table td {color:#333;font-weight:400}
.tbl td a, .org-table td a {color:inherit}
.tbl .bu, .org-table .bu {padding:0 10px 0 20px;text-align:left} /* 셀 기본 여백(10px)에 더해 불릿 목록은 왼쪽을 더 띄운다 */
.tbl .bu li, .org-table .bu li {position:relative;padding-left:14px}
.tbl .bu li:before, .org-table .bu li:before {content:'';position:absolute;left:0;top:13px;width:5px;height:5px;border-radius:50%;background:var(--c-green)}
@media (max-width:1024px) {
.org-wrap {padding:40px 20px 50px;border-radius:14px}
.org-box {height:56px;font-size:16px}
.org-box--lg {height:68px;font-size:22px}
.org-top .org-box, .org-head > .org-box--fill {width:260px}
.org-dean {left:calc(50% + 130px)}
.org-dean:before {width:30px}
.org-dean .org-box {height:48px;padding:0 12px;font-size:14px}
.org-committee .org-box {width:160px}
.org-committee:after {left:160px;right:160px}
.org-table-wrap {margin-top:40px}
.sub-tit, .org-table-title {margin:36px 0 12px;padding-left:26px;font-size:21px;line-height:30px}
.sub-tit i, .org-table-title i {top:5px;font-size:19px}
.tbl, .org-table {font-size:15px;line-height:26px}
.tbl th, .tbl td, .org-table th, .org-table td {padding:11px 8px}
.tbl .bu, .org-table .bu {padding:0 6px 0 12px}
.tbl .bu li:before, .org-table .bu li:before {top:11px}
}
@media (max-width:768px) {
/* 모바일 : 학장 박스를 센터장 아래로 내리고 선은 단순화 */
.org-head {flex-direction:column;align-items:center;gap:12px}
.org-dean {position:static;transform:none}
.org-dean:before {display:none}
.org-committee {gap:12px;padding:30px 0}
.org-committee .org-box {flex:1 1 0;width:auto}
.org-committee:after {left:25%;right:25%}
.org-depts {flex-direction:column;gap:12px;padding-top:30px}
.org-depts li .org-box:before, .org-depts li:before {display:none}
.org-depts:after {content:'';position:absolute;left:50%;top:0;height:30px;border-left:2px solid #b9cfc4}
.tbl, .org-table {min-width:560px}
}
/* ===== 본문 공통 : 불릿 목록 · 설명 목록 ===== */
.bu-list {display:flex;flex-direction:column;gap:8px;color:#333;font-size:18px;line-height:30px;letter-spacing:-.03em;word-break:keep-all}
.bu-list li {position:relative;padding-left:16px}
.bu-list li:before {content:'';position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%;background:var(--c-green)}
.desc-list {border-top:2px solid #000}
.desc-list__row {display:flex;border-bottom:1px solid #ccc}
.desc-list dt {flex:none;display:flex;align-items:center;justify-content:center;width:260px;text-align:center;padding:16px 20px;background:#f5faf7;color:#003a30;font-size:18px;font-weight:600;letter-spacing:-.03em;word-break:keep-all}
.desc-list dd {flex:1;min-width:0;margin:0;padding:16px 24px;color:#333;font-size:18px;line-height:30px;letter-spacing:-.03em;word-break:keep-all}
/* ===== 운영계획 (sub1_1_b) : Cals Bio-Venture Valley 원형 다이어그램 ===== */
/* 포항공대 의공학과 .big-cir 구조 : 700 정사각 안에 가운데 원(흰 300 + 그라데이션 링 480 + 흰 바닥 650) 과 위성 원 180 */
.valley {position:relative;margin:60px 0 80px;padding:40px 0;overflow:hidden;border-radius: 20px;background: #f4f4f9;}
.valley:before {content:'';position:absolute;left:50%;top:50%;width: 900px;height: 900px;border: 2px dotted #004d31;border-radius:50%;transform:translate(-50%,-50%);opacity: .1;}
.valley-wr {position:relative;width:700px;height:700px;margin:0 auto;background: #1e9b6e0a;border-radius: 50%;}
/* 가운데 */
.valley-core {position:absolute;left:50%;top:50%;z-index:2;display:flex;align-items:center;justify-content:center;width:300px;height:300px;border-radius:50%;background:#fff;box-shadow:19px 23px 40px rgba(0,0,0,.05);transform:translate(-50%,-50%)}
.valley-core:before {content:'';position:absolute;left:50%;top:50%;z-index:-2;width:650px;height:650px;border-radius:50%;background:#fff;box-shadow:19px 23px 40px rgba(0,0,0,.05);transform:translate(-50%,-50%)}
.valley-core:after {content:'';position:absolute;left:50%;top:50%;z-index:-1;width:480px;height:480px;border-radius:50%;background:linear-gradient(to right, #0f6e4c 0%, var(--c-green) 100%);box-shadow:19px 23px 36px 4px rgba(30,155,110,.2);transform:translate(-50%,-50%)}
.valley-core__inner {display:flex;align-items:center;justify-content:center;width:280px;height:280px;border-radius:50%;background:#fff;text-align:center}
.valley-core__inner strong {display:block;padding:14px 22px;border-radius:30px;background:#fff;color:#0f3d2b;font-family:var(--font-family4);font-size:30px;font-weight:700;line-height:1.15;letter-spacing:-.02em}
/* 위성 6개 : 중심에서 260px, 60도 간격 (좌상 → 시계방향) */
.valley-item {position:absolute;z-index:3;width:180px;height:180px;border-radius:50%;box-shadow:0 10px 20px rgba(0,0,0,.1)}
.valley-item:nth-child(1) {left:130px;top:35px}
.valley-item:nth-child(2) {left:390px;top:35px}
.valley-item:nth-child(3) {left:520px;top:260px}
.valley-item:nth-child(4) {left:390px;top:485px}
.valley-item:nth-child(5) {left:130px;top:485px}
.valley-item:nth-child(6) {left:0;top:260px}
.valley-item__inner {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;padding:24px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:inset 0 0 50px rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#0f6e4c;text-align:center;transition:background .3s, transform .3s}
.valley-item__inner i {font-size:30px;line-height:1;color:var(--c-green)}
.valley-item__inner b {font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.03em;word-break:keep-all}
.valley-item__inner small {font-family:var(--font-family4);font-size:14px;font-weight:500;color:#5a8a78}
.valley-item:hover .valley-item__inner {background:rgba(255,255,255,.9);transform:scale(1.06)}
/* 수원 ↔ 관악 양방향 화살표 : 1·2번 위성 사이(x 310~390) 한가운데 원형 배지 */
.valley-arrow {position:absolute;z-index:4;left:328px;top:103px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background: #004d31;color:#fff;font-size:22px;box-shadow:0 6px 14px rgba(30,155,110,.35)}
.valley-arrow i {line-height:1}
@media (max-width:1024px) {
.bu-list {font-size:16px;line-height:26px}
.bu-list li:before {top:11px}
.desc-list dt {width:180px;padding:12px 14px;font-size:16px}
.desc-list dd {padding:12px 16px;font-size:16px;line-height:26px}
/* 다이어그램 전체를 0.8 배로 */
.valley {margin:40px 0 60px;padding:20px 0;height:600px}
.valley-wr {transform:scale(.8);transform-origin:top center}
.valley:before {width:800px;height:800px}
}
@media (max-width:768px) {
/* 모바일 : 원형 배치를 풀고 가운데 원 + 2열 목록으로 */
.valley {height:auto;padding:0}
.valley:before {display:none}
.valley-wr {width:auto;height:auto;transform:none}
.valley-core {position:relative;left:auto;top:auto;width:240px;height:240px;margin:20px auto 30px;transform:none}
.valley-core:before {display:none}
.valley-core:after {width:300px;height:300px;box-shadow:0 10px 30px rgba(30,155,110,.2)}
.valley-core__inner {width:220px;height:220px}
.valley-core__inner strong {font-size:24px}
.valley-list {display:grid;grid-template-columns:repeat(2, 1fr);gap:12px;padding-top:30px}
.valley-item {position:static;width:auto;height:auto;border-radius:16px;box-shadow:none}
.valley-item__inner {height:auto;padding:18px 12px;border:1px solid #d6e3dc;border-radius:16px;background:#fff;box-shadow:none;backdrop-filter:none}
.valley-arrow {display:none}
.valley-item__inner b {font-size:15px}
.desc-list__row {flex-direction:column}
.desc-list dt {width:auto;padding:10px 14px}
.desc-list dd {padding:10px 14px}
}
/* ===== 아이콘 설명 박스 (.content-box) : 음성군 농업기술센터 .content_box 참고 ===== */
.content-box {position:relative;margin:0 0 50px;padding:44px 40px 44px 180px;border:1px solid #d5d7dd;border-radius:20px;background:#fff;box-shadow:8px 6px 20px rgba(32,54,121,.07)}
.content-box__icon {position:absolute;left:40px;top:40px;display:flex;align-items:center;justify-content:center;width:100px;height:100px;border-radius:50%;background: #f4f4f9;color:var(--c-green);font-size:46px;line-height:1}
.content-box__icon img {width: 48px;height: 48px;object-fit:contain}
.content-box__title {margin:0 0 12px;color:#0f3d2b;font-family:var(--font-family2);font-size:21px;font-weight:600;line-height:29px;letter-spacing:-.03em}
.content-box .bu-list {font-size:17px;line-height:28px}
.content-box .bu-list li:before {top:12px}
@media (max-width:1024px) {
.content-box {margin-bottom:40px;padding:30px 24px 30px 130px;border-radius:14px}
.content-box__icon {left:24px;top:28px;width:80px;height:80px;font-size:38px}
.content-box__icon img {width:44px;height:44px}
.content-box__title {font-size:19px}
.content-box .bu-list {font-size:15px;line-height:26px}
}
@media (max-width:640px) {
.content-box {padding:24px 20px}
.content-box__icon {position:static;width:64px;height:64px;margin-bottom:14px;font-size:30px}
.content-box__icon img {width:36px;height:36px}
}
/* ===== 운영체제 (sub1_1_c) : 고려대 기술경영전문대학원 .value 블록 참고 ===== */
/* 가운데 320 원(흰 테두리 28) 아래로 회색 띠가 깔리고, 항목 5개의 아이콘이 원 둘레(반지름 205 = 160 + 아이콘 반지름 35 + 간격 10)에
같은 간격으로 놓인다. 각도 : 위 양옆 ±55°(수직 기준), 아래 양옆 ±60°, 맨 아래 0° */
.sys {position:relative;padding:120px 0 80px;text-align:center} /* 위 여백 : 탭과 위쪽 반원 그림자(원 위로 80px)가 겹치지 않게 */
.sys:before {content:'';position:absolute;left:50%;top:285px;bottom:-120px;z-index:-1;width:100vw;margin-left:-50vw;background:#f7f7f7}
/* 가운데 원 */
.sys-core {position:relative;z-index:1;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:320px;height:320px;padding:20px;border:28px solid transparent;border-radius:50%;background:linear-gradient(145deg, #1e9b6e 0%, #0f6e4c 100%) padding-box, linear-gradient(to bottom, #e3e3e3 0%, #fff 55%) border-box;color:#fff} /* 흰 테두리 : 위는 연회색 → 아래는 흰색 (흰 배경에서도 윗부분이 보이게) */
/* 반원 그림자 두 개 : 아래(:before)는 참고 사이트와 같이 아래로 갈수록 진하게, 위(:after)는 반대로 위로 갈수록 진하게 */
.sys-core:before, .sys-core:after {content:'';position:absolute;left:50%;top:50%;z-index:-1;width:480px;height:480px;transform:translate(-50%,-50%)}
.sys-core:before {border-radius:0 0 50% 50%;background:linear-gradient(to top, #e1e1e1 0%, rgba(0,0,0,0) 40%)}
.sys-core:after {border-radius:50% 50% 0 0;background:linear-gradient(to bottom, #e1e1e1 0%, rgba(0,0,0,0) 40%)}
.sys-core small {font-family:var(--font-family4);font-size:14px;font-weight:500;letter-spacing:.2em;opacity:.85}
.sys-core strong {font-family:var(--font-family2);font-size:28px;font-weight:700;line-height:1.3;letter-spacing:-.03em}
/* 항목 : 목록 상단 = 원 상단(margin-top -320). 원 중심 = (50%, 160px). 아이콘(70)이 원 둘레에 오도록 절대 배치 */
.sys-list {position:relative;z-index:2;height:500px;margin-top:-320px;text-align:left}
.sys-item {position:absolute;display:flex;align-items:flex-start;gap:20px}
.sys-item__icon {flex:none;display:flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:50%;background:var(--ico, #0f6e4c);color:#fff;font-size:34px;line-height:1;box-shadow:0 8px 18px var(--ico-shadow, rgba(15,110,76,.3))}
/* 아이콘 원 색 : 그린 → 블루 계열로 5가지 (위 왼쪽부터 시계방향) */
.sys-item:nth-child(1) .sys-item__icon {--ico:#0f6e4c;--ico-shadow:rgba(15,110,76,.3)} /* 딥 그린 */
.sys-item:nth-child(2) .sys-item__icon {--ico:#1f8a8f;--ico-shadow:rgba(31,138,143,.3)} /* 틸 */
.sys-item:nth-child(5) .sys-item__icon {--ico:#2a7bbf;--ico-shadow:rgba(42,123,191,.3)} /* 블루 */
.sys-item:nth-child(4) .sys-item__icon {--ico:#1f4f8f;--ico-shadow:rgba(31,79,143,.3)} /* 딥 블루 */
.sys-item:nth-child(3) .sys-item__icon {--ico:#1e9b6e;--ico-shadow:rgba(30,155,110,.3)} /* 그린 */
.sys-item__title {display:block;margin-bottom:8px;color:#222;font-size:20px;font-weight:700;letter-spacing:-.03em;word-break:keep-all}
.sys-item__desc {margin:0;color:#555;font-size:16px;line-height:26px;letter-spacing:-.02em;word-break:keep-all}
/* 위 양옆 : 아이콘 중심 (±168, -118) → 아이콘 안쪽 변 = 중심에서 133, 윗변 = 7 */
.sys-item:nth-child(1) {left:0;right: calc(50% + 140px);top: -35px;flex-direction:row-reverse;text-align:right}
.sys-item:nth-child(2) {left: calc(50% + 140px);right:0;top: -35px;}
/* 아래 양옆 : 아이콘 중심 (±178, +103) → 안쪽 변 143, 윗변 228 */
.sys-item:nth-child(3) {left:0;right: calc(50% + 175px);top:228px;flex-direction:row-reverse;text-align:right}
.sys-item:nth-child(5) {left: calc(50% + 175px);right:0;top:228px}
/* 맨 아래 : 아이콘 중심 (0, +205) → 윗변 330. 세로형(아이콘 위, 글 가운데) */
.sys-item:nth-child(4) {left:0;right:0;top: 360px;flex-direction:column;align-items:center;gap:24px;width:max-content;max-width:420px;text-align:center;margin:0 auto}
@media (max-width:1024px) {
/* 태블릿 : 감싸기 해제, 원 아래 2 + 3 그리드 */
.sys {padding:60px 0 50px}
.sys:before {top:190px;bottom:-80px}
.sys-core {width:260px;height:260px;border-width:20px}
.sys-core:before, .sys-core:after {width:380px;height:380px}
.sys-core strong {font-size:22px}
.sys-list {display:grid;grid-template-columns:repeat(6, 1fr);column-gap:24px;row-gap:28px;height:auto;margin-top:40px}
.sys-item, .sys-item:nth-child(1), .sys-item:nth-child(2), .sys-item:nth-child(3), .sys-item:nth-child(4), .sys-item:nth-child(5) {position:static;flex-direction:row;align-items:flex-start;gap:20px;width:auto;max-width:none;text-align:left;transform:none}
.sys-item:nth-child(1), .sys-item:nth-child(2) {grid-column:span 3}
.sys-item:nth-child(3), .sys-item:nth-child(4), .sys-item:nth-child(5) {grid-column:span 2}
.sys-item__icon {width:56px;height:56px;font-size:28px}
.sys-item__title {font-size:18px}
.sys-item__desc {font-size:15px;line-height:24px}
}
@media (max-width:768px) {
/* 모바일 : 한 열 카드, 아이콘 왼쪽 */
.sys-list {grid-template-columns:1fr;row-gap:20px}
.sys-item, .sys-item:nth-child(1), .sys-item:nth-child(2), .sys-item:nth-child(3), .sys-item:nth-child(4), .sys-item:nth-child(5) {grid-column:auto;padding:18px;border-radius:14px;background:#fff;border:1px solid #e5e5e5}
.sys-core {width:220px;height:220px;border-width:16px}
.sys-core:before, .sys-core:after {display:none}
.sys-core strong {font-size:20px}
}
/* ===== 설립목적 (sub1_1_a) : 15세상담연구소 인사말(.greeting) 구조 ===== */
/* 사진(562x387, 원본 크기)이 왼쪽 위에 놓이고, 글 영역은 사진 오른쪽 끝에서 60px 겹치게 시작한다.
제목은 사진을 피해 오른쪽으로, 본문 박스(연한 민트)는 사진 뒤로 깔린다 */
.purpose-greet {position:relative;padding-left:502px} /* 562 - 60 */
.purpose-greet__photo {position:absolute;left:0;top:0;z-index:2;width:562px;margin:0;border-radius:50px 20px;box-shadow:0 5px 20px rgba(75,96,118,.15);overflow:hidden}
.purpose-greet__photo img {display:block;width:100%;height:auto}
.purpose-greet__title {margin:0;padding:30px 0 30px 120px;color:#333;font-family:var(--font-family2);font-size:40px;font-weight:600;line-height:52px;letter-spacing:-.04em;word-break:keep-all}
.purpose-greet__title strong {font-weight:inherit;color:var(--c-green-dark)}
.purpose-greet__body {position:relative;padding: 60px 50px 60px 120px;border-radius: 30px;background: #1c2d5a05;backdrop-filter: blur(10px);}
.purpose-greet__body p {margin:30px 0 0;color:#494949;font-size:18px;line-height:1.6;letter-spacing:-.02em;word-break:keep-all}
.purpose-greet__body p.first-text {margin:0;color: #0b4b39;font-family: var(--font-family2);font-size: 30px;font-weight:600;line-height:36px;letter-spacing:0}
@media (max-width:1280px) {
.purpose-greet {padding-left:380px} /* 사진 440 - 60 */
.purpose-greet__photo {width:440px}
.purpose-greet__title {padding:20px 0 24px 100px;font-size:32px;line-height:44px}
.purpose-greet__body {padding:30px 40px 40px 100px}
}
@media (max-width:1024px) {
.purpose-greet {padding-left:0}
.purpose-greet__photo {position:static;width:100%;max-width:562px;margin:0 auto 30px}
.purpose-greet__title {padding:0 0 20px;font-size:26px;line-height:38px}
.purpose-greet__body {padding:28px 24px 32px;border-radius:14px}
.purpose-greet__body p {margin-top:20px;font-size:15px;line-height:1.7}
.purpose-greet__body p.first-text {font-size:20px;line-height:30px}
}
/* 설립목적 : 사진 아래 문구 + 바닥 장식 문구 (포스텍 융합학부 인사말 .text-move 참고) */
.purpose {position:relative;padding: 60px 0 60px;} /* 위 40 : 탭 박스와 사진 사이 여백. 옆으로 넘치는 장식 문구는 #allWrap(overflow:hidden)이 잘라 준다 */
.purpose-greet__caption {position:absolute;left:0;top:427px;width:562px;padding:0 10px}
.purpose-greet__caption strong {display:block;margin-bottom:12px;color:#0b4b39;font-family:var(--font-family2);font-size: 26px;font-weight:600;line-height:1.4;letter-spacing:-.04em;word-break:keep-all}
.purpose-greet__caption p {margin:0;color:#666;font-size: 17px;line-height:1.7;letter-spacing:-.02em;word-break:keep-all}
/* 포스텍 융합학부 .text-move 원본값(200px, #666, opacity .03, left 30%) + 글꼴은 사이트 제목체(원모바일 타이틀) */
.text-move {position:absolute;left:30%;top:calc(100% - 60px);z-index:-1;color: var(--c-green);font-family:var(--font-family2);font-size:200px;font-weight:700;line-height:200px;white-space:nowrap;opacity:.03;pointer-events:none;will-change:transform}
.text-move b {font-weight:inherit}
@media (max-width:1280px) {
.purpose-greet__caption {top:340px;width:440px} /* 사진 440 x 303 */
.purpose-greet__caption strong {font-size:21px}
.text-move {font-size:150px;line-height:150px}
}
@media (max-width:1024px) {
.purpose {padding:20px 0 60px}
.purpose-greet__caption {position:static;width:auto;max-width:562px;margin:0 auto 30px;padding:0;text-align:center}
.purpose-greet__caption strong br, .purpose-greet__caption p br {display:none}
.text-move {font-size:90px;line-height:90px;top:calc(100% - 20px)}
}
/* ===== 기업 지원 (sub2_3) : 요약 카드 4개 + 구분/항목/세부 표 ===== */
.support-cards {display:grid;grid-template-columns:repeat(4, 1fr);gap:24px;margin-bottom:70px}
.support-cards a {display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 20px 30px;border:1px solid #e0e6e2;border-radius:20px;background:#fff;text-align:center;transition:border-color .25s, box-shadow .25s, transform .25s}
.support-cards i {display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin-bottom:10px;border-radius:50%;background:#f3f8f5;color:var(--c-green);font-size:34px;line-height:1;transition:background .25s, color .25s}
.support-cards strong {color:#222;font-size:19px;font-weight:700;letter-spacing:-.03em;word-break:keep-all}
.support-cards span {color:#888;font-family:var(--font-family4);font-size:14px}
.support-cards a:hover {border-color:var(--c-green);box-shadow:0 14px 30px rgba(30,155,110,.12);transform:translateY(-4px)}
.support-cards a:hover i {background:var(--c-green);color:#fff}
.support-table tbody th {background:#f9fbfa;color:#0f3d2b;font-weight:600;vertical-align:middle}
.support-table tbody th i {display:block;margin:0 auto 6px;color:var(--c-green);font-size:28px;line-height:1}
.support-table tbody td:nth-child(2), .support-table tbody tr:not([id]) td:first-child {color:#222;font-weight:500}
.support-table .bu li + li {margin-top:2px}
@media (max-width:1024px) {
.support-cards {grid-template-columns:repeat(2, 1fr);gap:14px;margin-bottom:40px}
.support-cards a {padding:22px 14px 20px;border-radius:14px}
.support-cards i {width:56px;height:56px;font-size:26px}
.support-cards strong {font-size:16px}
.support-table {min-width:640px}
}
@media (max-width:640px) {
.support-cards {grid-template-columns:1fr 1fr;gap:10px}
}
/* ===== 입주 신청 (sub2_4) : 중앙대 창업보육센터 입주신청 구성 ===== */
.move-in > div + div, .move-in .step-flow + div {margin-top:70px}
.move-in__head {display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px}
.move-in__head .sub-tit {margin:0}
.btn-down {display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border-radius:46px;background:var(--c-green);color:#fff;font-size:15px;font-weight:600;transition:background .2s, transform .2s}
.btn-down i {font-size:18px}
.btn-down:hover {background:var(--c-green-dark);color:#fff;transform:translateY(-2px)}
/* 절차 */
.step-flow {display:grid;grid-template-columns:repeat(5, 1fr);gap:40px;margin-bottom:0}
.step-flow li {position:relative;padding:34px 20px 30px;border:1px solid #e0e6e2;border-radius:20px;background:#fff;text-align:center}
.step-flow li + li:before {content:'';position:absolute;left:-30px;top:50%;width:20px;height:20px;margin-top:-10px;background:no-repeat center / contain url("data:image/svg+xml;utf8,")}
.step-flow__num {position:absolute;left:20px;top:16px;color:var(--c-green);font-family:var(--font-family4);font-size:15px;font-weight:700;letter-spacing:.02em}
.step-flow li i {display:flex;align-items:center;justify-content:center;width:70px;height:70px;margin:0 auto 14px;border-radius:50%;background:#f3f8f5;color:var(--c-green);font-size:32px;line-height:1}
.step-flow li strong {display:block;margin-bottom:8px;color:#222;font-size:19px;font-weight:700;letter-spacing:-.03em;word-break:keep-all}
.step-flow li p {margin:0;color:#777;font-size:14px;line-height:1.6;letter-spacing:-.02em;word-break:keep-all}
/* 행 머리 표 (왼쪽 th 가 제목) */
.tbl-row tbody th {background:#f9fbfa;color:#0f3d2b;font-weight:600}
.tbl-row td {text-align:left}
.tbl-row td small {display:block;color:#888;font-size:15px}
/* 주의 박스 */
.note-box {margin-top:20px;padding:26px 30px;border-radius:20px;background:#fff8f1;border:1px solid #f3e3d0}
.note-box__title {display:flex;align-items:center;gap:6px;margin-bottom:12px;color:#c0632a;font-size:18px;font-weight:700}
.note-box__title i {font-size:22px}
.note-box .bu-list {font-size:16px;line-height:28px;gap:4px}
.note-box .bu-list li:before {top:12px;background:#e39a5c}
/* 비용 */
.cost-grid {display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start}
.tbl-cap {display:flex;align-items:center;gap:8px;margin:0 0 10px;color:#222;font-size:18px;font-weight:600}
.tbl-cap:before {content:'';width:8px;height:8px;border-radius:50%;background:var(--c-green)}
/* 문의 */
.contact-list {display:flex;flex-direction:column;gap:14px;padding:30px 36px;border:1px solid #e0e0e0;border-radius:20px}
.contact-list li {display:flex;align-items:flex-start;gap:12px;color:#333;font-size:17px;line-height:1.6;word-break:keep-all}
.contact-list i {flex:none;width:26px;margin-top:2px;color:var(--c-green);font-size:22px;line-height:1;text-align:center}
.contact-list a {color:inherit}
.contact-list a:hover {color:var(--c-green)}
@media (max-width:1280px) {
.step-flow {gap:28px}
.step-flow li + li:before {left:-24px}
.step-flow li {padding:30px 14px 26px}
.step-flow li strong {font-size:17px}
}
@media (max-width:1024px) {
.move-in > div + div, .move-in .step-flow + div {margin-top:44px}
.move-in__head {flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:20px}
.btn-down {height:40px;padding:0 18px;font-size:14px}
.step-flow {grid-template-columns:repeat(3, 1fr);gap:14px}
.step-flow li + li:before {display:none}
.step-flow li {padding:22px 12px 20px;border-radius:14px}
.step-flow li i {width:56px;height:56px;margin-bottom:10px;font-size:26px}
.cost-grid {grid-template-columns:1fr;gap:24px}
.note-box {padding:18px 18px;border-radius:14px}
.contact-list {padding:18px 18px;border-radius:14px}
.contact-list li {font-size:15px}
}
@media (max-width:640px) {
.step-flow {grid-template-columns:1fr 1fr;gap:10px}
}
/* ===== 입주안내 (sub2_1) : 공간현황 숫자 카드 + 02~09 번호 목록 ===== */
.guide-num {margin-right:10px;color:var(--c-green);font-family:var(--font-family4);font-style:normal;font-weight:700}
.guide-stats {display:grid;grid-template-columns:repeat(4, 1fr);gap:24px}
.guide-stats.is-2 {grid-template-columns:repeat(2, 1fr)} /* 보육실 현황 : 카드 2개 */
.guide-stats li {position:relative;padding:34px 30px 30px;border:1px solid #e0e6e2;border-radius:20px;background:#fff;overflow:hidden}
/* 오른쪽 아래 민트 원 안에 아이콘 */
.guide-stats i {position:absolute;right:24px;bottom:24px;display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:#f3f8f5;color:var(--c-green);font-size:34px;line-height:1}
.guide-stats strong {display:block;color:#111;font-family:var(--font-family4);font-size:44px;font-weight:700;line-height:1;letter-spacing:-.02em}
.guide-stats strong small {margin-left:2px;font-size:20px;font-weight:600;color:#555}
.guide-stats span {display:block;margin-top:10px;color:#222;font-size:19px;font-weight:600;letter-spacing:-.03em}
.guide-stats em {display:block;margin-top:4px;color:#888;font-size:14px;font-style:normal}
.guide-list {border-top:2px solid #0f3d2b}
.guide-list > li {display:grid;grid-template-columns:140px 1fr;gap:30px;padding:40px 0;border-bottom:1px solid #e0e0e0}
.guide-list__num {color:var(--c-green);font-family:var(--font-family4);font-size:48px;font-weight:700;font-style:normal;line-height:1;letter-spacing:-.02em}
.guide-list__body h4 {margin:0 0 16px;color:#111;font-family:var(--font-family2);font-size:26px;font-weight:600;line-height:1.3;letter-spacing:-.03em;word-break:keep-all}
.guide-list__body h4 small {margin-left:10px;color:#888;font-family:var(--font-family1);font-size:16px;font-weight:400}
.guide-lead {margin:0;color:#222;font-size:18px;line-height:1.7;letter-spacing:-.02em;word-break:keep-all}
.guide-lead small {color:#777;font-size:16px}
.guide-sub {margin-top:12px;font-size:16px;line-height:28px;gap:4px}
.guide-sub li:before {top:12px}
.guide-list__body .note-box {margin-top:20px}
.note-box__foot {margin:12px 0 0;color:#c0632a;font-size:15px}
.guide-list__body .btn-down {margin-top:18px}
.guide-dl {display:flex;flex-direction:column;gap:10px}
.guide-dl > div {display:flex;gap:16px;font-size:18px;line-height:1.7;letter-spacing:-.02em;word-break:keep-all}
.guide-dl dt {position:relative;flex:none;width:220px;padding-left:14px;color:#0f3d2b;font-weight:600}
.guide-dl dt:before {content:'';position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:var(--c-green)}
.guide-dl dd {flex:1;margin:0;color:#444}
.guide-steps {display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:20px} /* 간격 60 : 30px 배지 양옆으로 15px 씩 여유 */
.guide-steps li {position:relative;padding:24px 26px 24px 26px;border-radius:16px;background:#f5faf7}
.guide-steps li + li:before {content:'\EA6E';position:absolute;left:-45px;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:#79cfb0;color:#fff;font-family:remixicon;font-size:24px} /* ri-arrow-right-s-line · left = -(30 + 15) */
.guide-steps span {display:inline-block;margin-bottom:8px;padding:3px 12px;border-radius:20px;background:var(--c-green);color:#fff;font-family:var(--font-family4);font-size:13px;font-weight:600}
.guide-steps strong {display:block;margin-bottom:6px;color:#111;font-size:19px;font-weight:700}
.guide-steps p {margin:0;color:#555;font-size:16px;line-height:1.65;word-break:keep-all}
.guide-list__body .contact-list {padding:0;border:0;border-radius:0}
@media (max-width:1280px) {
.guide-stats {gap:16px}
.guide-stats li {padding:26px 22px 24px}
.guide-stats strong {font-size:38px}
}
@media (max-width:1024px) {
.guide-stats {grid-template-columns:repeat(2, 1fr);gap:12px}
.guide-stats li {padding:20px 18px;border-radius:14px}
.guide-stats i {right:14px;bottom:14px;width:52px;height:52px;font-size:24px}
.guide-stats strong {font-size:32px}
.guide-stats span {font-size:16px}
.guide-list > li {grid-template-columns:1fr;gap:10px;padding:26px 0}
.guide-list__num {font-size:30px}
.guide-list__body h4 {margin-bottom:10px;font-size:21px}
.guide-list__body h4 small {display:block;margin:4px 0 0;font-size:14px}
.guide-lead {font-size:16px}
.guide-dl > div {flex-direction:column;gap:2px;font-size:16px}
.guide-dl dt {width:auto}
.guide-steps {grid-template-columns:1fr;gap:40px}
.guide-steps li + li:before {left:50%;top:-35px;margin:0 0 0 -15px;transform:rotate(90deg)} /* 40px 간격 한가운데 */
.guide-steps li {padding:18px}
}
/* ===== 모집공고 (sub2_2) : 입주안내 구성 재사용 + 일정 3칸 · 체크 목록 ===== */
.guide-steps--3 {grid-template-columns:repeat(3, 1fr)}
.guide-steps--3 li + li:before {left:-45px}
.check-list li {padding-left:28px}
.check-list li:before {top:6px;width:18px;height:18px;border-radius:50%;background:var(--c-green) url("data:image/svg+xml;utf8,") no-repeat center / 12px}
.check-list small {margin-left:4px;color:#888;font-size:15px}
.guide-list__body .btn-down {margin-top:20px}
@media (max-width:1024px) {
.guide-steps--3 {grid-template-columns:1fr}
.guide-steps--3 li + li:before {left:50%}
}
/* ===== 입주 안내 (sub2_1) 통합 후 추가 : 01 입주 절차 안내 ===== */
.guide-list__head {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.guide-list__head h4 {margin:0}
.guide-list__body .step-flow {margin-top:0}
.step-flow--plain li {padding:30px 16px 26px}
.step-flow--plain li i {margin-bottom:12px}
.step-flow--plain li strong {margin-bottom:0;font-size:18px}
.guide-list__table {margin-top:24px}
@media (max-width:1024px) {
.guide-list__head {flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:14px}
.guide-list__table {margin-top:16px}
}