@charset "UTF-8";
/* ===== 서브 공통 =====
   모바일 : 모바일 가이드(가로 842px) 기준 → --u = 1px(가이드) 를 화면 폭 비율로 환산
   PC : 시안 전 임시 배치 */

/* G마켓 산스 Light (눈누 CDN) : 모바일 서브 메뉴용 (Medium 보다 한 단계 얇게) */
@font-face { font-family: 'GmarketSansLight'; font-weight: 300; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff'); }

/* --- 서브 상단 배너 --- */
.sub-top { position: relative; }
.sub-visual { position: relative; overflow: hidden; }
.sub-visual picture { display: block; }
.sub-visual .bg { display: block; width: 100%; height: auto; margin-top: -.3%; }   /* 배너 이미지 맨 위 남색 줄 숨김 */
/* PC : 배경 높이 530 고정, 이미지는 원본 크기 그대로 가운데 맞춤 (넘치는 위·아래·양옆만 가림) */
@media (min-width: 768px) {
	.sub-visual { height: 530px; }
	.sub-visual picture { height: 100%; }
	.sub-visual .bg { height: 100%; margin-top: 0; object-fit: none; object-position: center; }
}
@media (min-width: 1991px) { .sub-visual .bg { object-fit: cover; } }   /* 원본(1990)보다 넓은 화면은 빈칸 없이 채움 */
.sub-visual .sub-tit { position: absolute; left: 0; right: 0; top: 64%; transform: translateY(-50%); font-family: 'Noto Sans KR', sans-serif; font-size: 45px; font-weight: 700; color: #fff; text-align: center; letter-spacing: -.02em; line-height: 1; }
.js .sub-visual .sub-tit[data-ani="up"] { transform: translateY(calc(-50% + 40px)); }
.js .sub-visual .sub-tit[data-ani].is-in { transform: translateY(-50%); }

/* --- 서브 메뉴 : 배너 아래 끝에 붙은 흰 박스 (시안) — 바깥 테두리 · 그림자 없음, 칸 사이 짧은 세로선 --- */
.sub-tab { position: relative; z-index: 2; width: 1100px; max-width: calc(100% - 40px); margin: -72px auto 0; background: #fff; border-radius: 15px 15px 0 0; overflow: hidden; }
.sub-tab ul { display: flex; }
.sub-tab a { -webkit-text-stroke: .35px currentColor; }   /* Light 보다 아주 조금 굵게 (Medium 은 너무 두꺼움) */
.sub-tab, .sub-tab a { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }   /* 탭 글자 드래그·선택 방지 */
.sub-tab li { position: relative; flex: 1; }
.sub-tab li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 44px; margin-top: -22px; background: #c6c6c6; }
.sub-tab li.on::before, .sub-tab li.on + li::before { display: none; }
.sub-tab a { display: flex; align-items: center; justify-content: center; height: 72px; font-family: 'GmarketSansLight', 'Noto Sans KR', sans-serif; font-size: 19px; color: #999; letter-spacing: -.02em; transition: color .3s, background-color .3s; }
.sub-tab a:hover { color: #2fa7dc; }
.sub-tab li.on a { background: #2fa7dc; color: #fff; }

/* --- 서브 내용 --- */
.sub-con { padding: 170px 20px; text-align: center; }   /* 메뉴 박스 ~ 이미지 위 170 = 이미지 끝 ~ 푸터 170 */
.sub-con img { display: inline-block; max-width: 100%; height: auto; }
/* 탭 내용 : 선택된 것만 */
.sub-panel { display: none; }
.sub-panel.on { display: block; }
/* 탭 내용 : 나타날 때마다 아래에서 살짝 올라오며 등장 (탭 바꿀 때도 다시) */
.js .sub-panel.on > * { opacity: 0; }
.js .sub-panel.on.is-ready > * { animation: subUp .9s cubic-bezier(.22,.61,.36,1) both; }   /* 이미지 받아진 뒤 시작 */
@keyframes subUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .sub-panel.on > * { opacity: 1; animation: none; } }
.sub-ready { padding: 120px 0; font-size: 18px; color: #999; }
/* 조직도 : 원본(1926px)이 1920 화면보다 살짝 넓음 → 큰 화면에선 줄이지 않고 원본 그대로, 가운데 맞춰 양끝만 몇 px 가려짐 */
@media (min-width: 1880px) {
	#organization { margin: 0 -20px; overflow: hidden; }
	#organization img { display: block; position: relative; left: 50%; max-width: none; width: 1926px; margin-left: -963px; }
}

/* 이미지 속 버튼 자리에 투명 링크 덮기 (지명원 다운로드 등) */
.img-map { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.img-map img { display: block; }
.img-map picture, .loc-wrap picture { display: block; }
.img-map .map-link { position: absolute; display: block; border-radius: 4px; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }   /* 위치는 각 링크 style 의 --x · --y · --w · --h (모바일은 --mx …) */

/* 오시는 길 : 이미지 위 회색 지도 자리(1055×539 / 이미지 1055×868)에 카카오맵 겹치기 */
.loc-wrap { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.loc-wrap img { display: block; }
.loc-map { position: absolute; left: 0; top: 0; width: 100%; height: 62.10%; background: #e9e9e9; }
.loc-map .root_daum_roughmap { width: 100% !important; height: 100% !important; display: flex; flex-direction: column; }
.loc-map .root_daum_roughmap .wrap_map { flex: 1; width: 100% !important; height: auto !important; }
.loc-map .root_daum_roughmap .cont, .loc-map .root_daum_roughmap .wrap_controllers { display: none !important; }   /* 지도 아래 카카오 주소·전화·길찾기 막대 숨김 → 지도만 */

/* ===== 모바일 (가이드 842px 기준) ===== */
@media (max-width: 767px) {
	.sub { --u: calc(100vw / 842); }
	.sub-visual { height: auto; }
	.sub-visual .bg { height: auto; margin-top: -.6%; } /* 배너 이미지 맨 위 남색 줄(4px) 숨김 */
	.sub-visual .sub-tit { top: 58%; font-size: calc(var(--u) * 62); }   /* 가이드 75 → 62 로 줄임 */

	/* 메뉴 칸 1개 = 205 × 80 (가이드 기준), 회색 선 없음 / 두 줄 모두 배너 안, 박스 아래 = 배너 아래 끝 (PC 와 같음) */
	.sub-tab { width: calc(var(--u) * 615); max-width: none; margin-top: calc(var(--u) * -160); border-radius: calc(var(--u) * 14) calc(var(--u) * 14) 0 0; }
	.sub-tab ul { flex-wrap: wrap; }
	.sub-tab li { flex: 0 0 33.333%; border: 0; }
	.sub-tab li::before { display: none; }
	.sub-tab a { height: calc(var(--u) * 80); font-family: 'GmarketSansLight', 'Noto Sans KR', sans-serif; font-size: max(12px, calc(var(--u) * 22)); color: #b4b4b5; }
	.sub-tab li.on a { color: #fff; }
	/* 박스 폭은 PC 처럼 항상 같음 (615) : 탭 3개 이하 = 한 줄, 1~2개면 칸이 박스 폭을 나눠 채움 (빈칸 없음) */
	.sub-tab:not(:has(li:nth-child(4))) { margin-top: calc(var(--u) * -80); }
	.sub-tab:has(li:only-child) li, .sub-tab:has(li:nth-child(2):last-child) li { flex: 1; }

	.sub-con { padding: calc(var(--u) * 170) 0; }   /* PC 와 같이 위·아래 170 (가이드 기준) */
	.sub-con picture img { width: calc(var(--u) * var(--mw, 740)); max-width: none; }   /* 모바일 이미지 원본 폭 = 가이드 px (--mw) 그대로 */
	.img-map .map-link { left: var(--mx); top: var(--my); width: var(--mw); height: var(--mh); }
	.loc-map { height: 53.26%; }   /* 모바일 이미지(751×721) 회색 지도 자리 높이 384 */
	.sub-ready { padding: 60px 0; font-size: 14px; }
}

/* ===== 이미지 크게 보기 (모바일 조직도 : "이미지 클릭 시 크게 보입니다" → 누르면 이미지 주소로 이동) ===== */
@media (max-width: 767px) { .sub-con img.zoomable { cursor: zoom-in; } }