@charset "utf-8";

/* ============================================================
   울산광역시 열린시장실 — layout.css (헤더 / GNB / 사이트맵 / 푸터)
   ============================================================ */

/* header - 시작 */
.header{position:absolute; top:0; left:0; z-index:100; width:100%; color:#fff;}
.header .h_wrap{width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter);}

.h_util{display:flex; align-items:center; justify-content:flex-end; padding-top:2rem; font-size:1.4rem; font-weight:500;}
.h_util .util_list{display:flex; align-items:center; gap:3rem;}
.h_util .util_list li{position:relative;}
.h_util .util_list li .shortcut_link {
	position: relative;
    overflow: hidden;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 15px;
	margin-top:-6px;
	margin-bottom:-6px;
	margin-right:-18px;
    border-radius: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0);
    background: transparent;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .3s, box-shadow .3s, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.h_util .util_list li .shortcut_link::after{
  content: "";
  position: absolute;
  top: 50%; left: 0;
  transform: translate(0,-50%);
  background-color:white;
  border-radius: 100%;
  width:5px;
  height:5px;
  z-index: -1;
  opacity: 0.3;
  transition: ease 0.1s;
}
.h_util .util_list li .shortcut_link::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, #4d7ce8, #274bcf);
  opacity: 0;
  transition: opacity .3s cubic-bezier(.16, 1, .3, 1);
  z-index: -1;
}
.h_util .util_list li .shortcut_link:hover {
  border-color: #4d7ce8; 
  box-shadow: 0 0.8rem 1.8rem -0.8rem rgba(15, 29, 74, 0.4);
  transform: translateY(3px);
}
.h_util .util_list li .shortcut_link:hover::before {
  opacity: 1;
}
.h_util .util_list li .shortcut_link:hover::after{
  opacity: 0;
}

.h_util .util_list.depth-1 > li + li::before{content:""; position:absolute; left:-1.5rem; top:50%; width:.3rem; height:.3rem; margin-top:-.15rem; border-radius:50%; background:rgba(255,255,255,.5);}
.h_util .util_right{gap:2.2rem;}
.h_util .util_right li + li::before{display:none;}
.h_util .lang{display:inline-flex; align-items:center; gap:.6rem;}
.h_util .ico_arrow{width:0; height:0; border-left:.4rem solid transparent; border-right:.4rem solid transparent; border-top:.5rem solid currentColor;}

.gnb .gnb_in{display:flex; align-items:center; justify-content:space-between; /*padding-top:1rem;*/padding-top: 0.7rem;}
.logo{display:flex; align-items:center; gap:1rem; min-width:0; color:#fff;}

.logo .logo_img{display:block; height:calc(4.7rem * var(--fx)); margin-bottom:-1.2rem;}
.logo .logo_img1{display:block; width:calc(18.5rem * var(--fx)); max-width:100%; height:auto; object-fit:contain;}
.logo .logo_img2{display:block; width:calc(13rem * var(--fx)); max-width:100%; height:auto; object-fit:contain; margin-top:.2rem;}
.logo .logo_mark{display:grid; place-items:center; width:4.4rem; height:4.4rem; border-radius:1.1rem; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);}
.logo .logo_mark::after{content:""; width:0; height:0; border-left:.9rem solid transparent; border-right:.9rem solid transparent; border-bottom:1.5rem solid #35c4c9; transform:translateY(-.1rem);}
.logo .logo_txt strong{display:block; font-size:2.2rem; font-weight:800; letter-spacing:-.05rem;}
.logo .logo_txt em{font-weight:700;}
.logo .logo_eng{display:block; margin-top:.4rem; font-size:1rem; font-weight:600; letter-spacing:.2rem; opacity:.7;}

.gnb_menu.depth-1{display:flex; align-items:center; gap:4.6rem; font-size:1.9rem; font-weight:600;}
.gnb_menu.depth-1 > li{position:relative;}
.gnb_menu.depth-1 > li > a{position:relative; display:block; padding:1rem 0;}
.gnb_menu.depth-1 > li > a::after{content:""; position:absolute; left:0; right:0; bottom:.4rem; height:.2rem; background:#fff; transform:scaleX(0); transition:transform .25s;}
.gnb_menu.depth-1 > li > a:hover{color:#6593ff;}
.gnb_sub.depth-2{overflow:hidden; position:absolute; left:50%; top:100%; transform:translateX(-50%); min-width:17rem; max-height:0; padding:0; border-radius:1.4rem; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%); box-shadow:0 1.8rem 4rem -1.4rem rgba(15,29,74,.32), inset 0 0 0 1px rgba(26,95,180,.08); opacity:0; transition:max-height .32s cubic-bezier(.16,1,.3,1), padding .32s cubic-bezier(.16,1,.3,1), opacity .22s ease;}
.gnb_menu.depth-1 > li:hover .gnb_sub.depth-2{max-height:30rem; padding:.7rem; opacity:1;}
.gnb_sub.depth-2 a{position:relative; display:flex; align-items:center; padding:1.05rem 1.6rem; border-radius:.9rem; font-size:1.7rem; font-weight:600; letter-spacing:-.02rem; color:#3a4252; white-space:nowrap; transition:color .2s, background-color .2s, transform .2s cubic-bezier(.16,1,.3,1);}
.gnb_sub.depth-2 a:hover{color:var(--point); background:rgba(26,95,180,.07);}

.gnb_right{display:flex; align-items:center; gap:1.8rem;}
.gnb_menu.depth-1 .m_head{display:none;}
.btn_menu{display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:.5rem; width:2.8rem; height:2.4rem;}
.btn_menu .bar{display:block; width:100%; height:.2rem; border-radius:.2rem; background:#fff; transition:transform .3s,opacity .2s;}
.m_dim{display:block; position:fixed; inset:0; z-index:110; background:rgba(8,12,20,.55); opacity:0; pointer-events:none; transition:opacity .35s;}
.header.is_sitemap .m_dim{opacity:1; pointer-events:auto;}
/* 사이트맵(PC 전용 전체메뉴) */
.sitemap_panel{position:fixed; left:0; right:0; top:0; z-index:115; max-height:0; overflow:hidden; background:linear-gradient(155deg,#0d1219 0%,#141a22 55%,#0d1219 100%); box-shadow:0 3rem 8rem -3rem rgba(0,0,0,.7); transition:max-height .45s cubic-bezier(.16,1,.3,1);}
.sitemap_panel::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 10% 0%,rgba(77,124,232,.16),transparent 55%),radial-gradient(circle at 90% 100%,rgba(43,167,172,.14),transparent 55%); pointer-events:none;}
.sitemap_panel::after{content:""; position:absolute; left:0; right:0; top:0; height:.4rem; background:linear-gradient(90deg,#4d7ce8,#33b6bb,#f26f42);}
.header.is_sitemap .sitemap_panel{max-height:54rem;}
.sitemap_in{position:relative; display:grid; grid-template-columns:repeat(5,1fr); max-width:var(--container); margin:0 auto; padding:15rem var(--gutter) 6rem;}
.sitemap_col{position:relative; padding:0 2.8rem;}
.sitemap_col:first-child{padding-left:0;}
.sitemap_col:last-child{padding-right:0;}
.sitemap_col + .sitemap_col{border-left:1px solid rgba(255,255,255,.09);}
.sitemap_col .num{display:block; margin-bottom:1.2rem; font-family:"PartialSansKR","Pretendard",sans-serif; font-size:3.2rem; font-weight:400; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.28);}
.sitemap_col strong{display:block; margin-bottom:2.2rem; padding-bottom:1.6rem; border-bottom:2px solid rgba(255,255,255,.7); font-size:2.4rem; font-weight:800; letter-spacing:-.05rem; line-height:1.3;}
.sitemap_col strong a{display:block; font-size:inherit; font-weight:inherit; color:#fff; transition:color .2s;}
.sitemap_col strong a:hover{color:#a9c4ff;}
.sitemap_col:nth-child(1) strong{border-color:#4d7ce8;}
.sitemap_col:nth-child(2) strong{border-color:#33b6bb;}
.sitemap_col:nth-child(3) strong{border-color:#f2996f;}
.sitemap_col:nth-child(4) strong{border-color:#4d7ce8;}
.sitemap_col:nth-child(5) strong{border-color:#33b6bb;}
.sitemap_col ul{display:flex; flex-direction:column; gap:1.4rem;}
.sitemap_col ul a{position:relative; display:inline-flex; align-items:center; gap:.9rem; font-size:1.5rem; color:rgba(255,255,255,.6); transition:color .2s,transform .2s;}
.sitemap_col ul a::before{content:""; width:.9rem; height:.1rem; background:currentColor; opacity:.5; transition:width .2s;}
.sitemap_col ul a:hover{color:#fff; transform:translateX(.4rem);}
.sitemap_col ul a:hover::before{width:1.6rem;}
.btn_sitemap_close{position:absolute; right:var(--gutter); top:4rem; z-index:2; display:grid; place-items:center; width:4.4rem; height:4.4rem; border-radius:1.2rem; background:rgba(255,255,255,.08); color:#fff; font-size:2.6rem; line-height:1; transition:background .2s,transform .3s;}
.btn_sitemap_close:hover{background:rgba(255,255,255,.16); transform:rotate(90deg);}
/* 닫기 아이콘 : × 글리프는 폰트 baseline 때문에 미세하게 어긋나므로 가상요소로 직접 그린다 */
.btn_sitemap_close > span[aria-hidden], .btn_mclose > span[aria-hidden]{display:none;}
.btn_mclose{position:relative;}
.btn_sitemap_close::before, .btn_sitemap_close::after,
.btn_mclose::before, .btn_mclose::after{
  content:""; position:absolute; left:50%; top:50%; width:16px; height:2px;
  background:currentColor; border-radius:1px;}
.btn_sitemap_close::before, .btn_mclose::before{transform:translate(-50%,-50%) rotate(45deg);}
.btn_sitemap_close::after, .btn_mclose::after{transform:translate(-50%,-50%) rotate(-45deg);}
@media (max-width:1439px){ .sitemap_panel{display:none;} }
.gnb_right .btn_search{display:grid; place-items:center; width:2.2rem; height:2.2rem; color:#fff; transition:opacity .2s;}
.gnb_right .btn_search:hover{opacity:.7;}
.ico_search{display:block; width:2.4rem; height:2.4rem;}
.ico_ext{ margin-left:.4rem; font-size:1.1rem; opacity:.85; font-weight:400; }
/* 데스크톱에서는 숨김 — m_head와 마찬가지로 모바일 전체메뉴에서만 보여야 함 (1439px 미디어쿼리에서 다시 켬) */
.gnb_menu.depth-1 .mo_shortcut_group{ display:none; }

	/* 미디어쿼리 시작 */
	/* 메뉴가 문장형 라벨(예: "목소리를 듣겠습니다")이라 가로 배치 시 필요한 폭이 큼 → 1024px가 아닌
	   1439px부터 여유 있게 전체메뉴(슬라이드)로 전환해 좁은 노트북 폭에서 메뉴가 겹치거나 줄바꿈되는 것을 방지 */
	@media (max-width:1439px){
		.logo .logo_img1{width:16.5rem;}
		.logo .logo_img2{width:11.6rem; margin-top:0;}
		/* 모바일 탭 영역 최소 4.4rem 확보 — 우측 버튼은 줄지 않고 로고만 유동 축소 */
		.gnb_right{flex-shrink:0; gap:.4rem; margin-right:-1rem;}
		.gnb_right .btn_search{width:4.4rem; height:4.4rem;}
		.gnb_right .btn_search img{width:2.2rem;}
		.btn_menu{display:flex; align-items:center; width:4.4rem; height:4.4rem; padding:1rem .8rem;}
		.m_dim{display:block; pointer-events:none;}
		.header.is_menu .m_dim{opacity:1; pointer-events:auto;}

		.gnb_menu.depth-1{position:fixed; right:0; top:0; z-index:120; display:block; width:min(34rem,86vw); height:100%; padding:1rem 0 4rem; background:#12181f; box-shadow:none; transform:translateX(100%); transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; overflow-y:auto; overscroll-behavior:contain; font-size:1.8rem;}
		.header.is_menu .gnb_menu.depth-1{transform:none; box-shadow:-2rem 0 6rem -3rem rgba(0,0,0,.8);}
		.h_util .util_right{display:none;}
		.gnb_menu.depth-1 .m_head{display:flex; align-items:center; justify-content:flex-end; gap:1rem; padding:1.4rem 1.6rem 1.6rem;}
		.gnb_menu.depth-1 .mo_shortcut_group{ display:flex; align-items:center; gap:1rem; padding:2rem 2rem 0; }
		.gnb_menu.depth-1 .mo_shortcut_group .mo_shortcut{ flex:1; justify-content:center; padding:1.1rem 1.4rem; font-size:1.5rem; }
		.btn_mclose{flex-shrink:0; display:grid; place-items:center; width:4.4rem; height:4.4rem; border-radius:1.2rem; background:rgba(255,255,255,.08); color:#fff; font-size:2.6rem; line-height:1;}
		.gnb_menu.depth-1 > li > .mo_shortcut{position:relative; overflow:hidden; z-index:1; display:inline-flex; align-items:center; margin:0; padding:.8rem 1.4rem; border:1px solid rgba(255,255,255,.22); border-radius:2rem; background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05)); -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 .6rem 1.6rem -.8rem rgba(0,0,0,.6); color:#fff; font-size:1.4rem; font-weight:500; letter-spacing:-.02rem; line-height:1.2; transition:border-color .25s, background .25s, box-shadow .25s, transform .3s cubic-bezier(.16,1,.3,1);}
		.gnb_menu.depth-1 > li > .mo_shortcut::before{content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(to bottom,#4d7ce8,#274bcf); opacity:0; transition:opacity .3s cubic-bezier(.16,1,.3,1); z-index:-1;}
		.gnb_menu.depth-1 > li > .mo_shortcut::after{content:none; display:none;}
		/* PC 바로가기와 동일한 호버 : 파란 그라데이션 배경이 서서히 채워진다 */
		.gnb_menu.depth-1 > li > .mo_shortcut:hover{border-color:#4d7ce8; box-shadow:0 .8rem 1.8rem -.8rem rgba(15,29,74,.4); transform:translateY(3px); color:#fff; opacity:1;}
		.gnb_menu.depth-1 > li > .mo_shortcut:hover::before{opacity:1;}
		.gnb_menu.depth-1 > li{border-top:1px solid rgba(255,255,255,.08);}
		.gnb_menu.depth-1 > li.m_head{border-top:0;}
		.gnb_menu.depth-1 > li > a{display:flex; align-items:center; justify-content:space-between; padding:1.7rem 2.2rem; color:#fff;}
		.gnb_menu.depth-1 > li > a::after{content:""; position:static; width:.9rem; height:.9rem; border:0; border-right:.2rem solid rgba(255,255,255,.5); border-bottom:.2rem solid rgba(255,255,255,.5); background:none; transform:rotate(45deg) translateY(-.2rem); transition:transform .3s;}
		.gnb_menu.depth-1 > li.is_open > a::after{transform:rotate(-135deg) translateY(-.2rem);}
		.gnb_menu.depth-1 > li > a:hover{color:#8fb4e6;}
		.gnb_sub.depth-2{position:static; transform:none; min-width:0; padding:0; border-radius:0; background:rgba(255,255,255,.04); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; max-height:0; opacity:1;}
		.gnb_menu.depth-1 > li:hover .gnb_sub.depth-2{max-height:0; padding:0;}
		.gnb_menu.depth-1 > li.is_open .gnb_sub.depth-2{max-height:30rem; padding:.6rem 0 1rem;}
		.gnb_sub.depth-2 a{padding:1.2rem 2.2rem; border-radius:0; text-align:left; font-size:1.6rem; color:rgba(255,255,255,.72);}
		.gnb_sub.depth-2 a::before{display:none;}
		.gnb_sub.depth-2 a:hover{color:#fff; background:rgba(255,255,255,.06);}
	}
	@media (max-width:768px){
		.h_util{padding-top:1.4rem; font-size:1.5rem;}
		.h_util .util_list{gap:2.4rem;}
		.gnb .gnb_in{padding-top:0;}
		.logo .logo_img1{width:14.5rem;}
		.logo .logo_img2{width:10.2rem;}
	}
	@media (max-width:480px){
		.h_util{font-size:1.4rem;}
		.h_util .util_list{gap:2rem;}
		.logo{gap:.6rem; flex:0 1 auto; min-width:0;}
		.logo .logo_img1{width:min(12.4rem, 30vw);}
		.logo .logo_img2{width:min(8.7rem, 21vw);}
		.gnb_right{gap:.2rem;}
	}
	/* 미디어쿼리 끝 */
/* header - 끝 */


/* footer - 시작 */
.footer{background:#2c2e31; color:#c9cdd2;}
.footer .f_wrap{display:flex; align-items:flex-start; justify-content:space-between; gap:4rem; width:100%; max-width:var(--container); margin:0 auto; padding:5.6rem var(--gutter) 6.4rem;}
.footer .f_logo{display:flex; align-items:center; gap:1.2rem; flex-shrink:0;}
.footer .f_logo_img{display:block; height:4.2rem; width:auto;}
.footer .f_logo .logo_mark{display:grid; place-items:center; width:3.8rem; height:3.8rem; border-radius:.9rem; background:rgba(255,255,255,.1);}
.footer .f_logo .logo_mark::after{content:""; width:0; height:0; border-left:.8rem solid transparent; border-right:.8rem solid transparent; border-bottom:1.3rem solid #35c4c9;}
.footer .f_logo .logo_txt strong{display:block; font-size:2rem; font-weight:800; color:#fff;}
.footer .f_logo .logo_eng{display:block; margin-top:.4rem; font-size:1.1rem; font-weight:600; letter-spacing:.2rem; opacity:.6;}
.footer .f_cont{flex:1;}
.footer .f_link.depth-1{display:flex; flex-wrap:wrap; gap:3.6rem; margin-bottom:2.2rem; font-size:1.5rem; font-weight:600;}
.footer .f_link.depth-1 a{color:#e6e9ed;}
.footer .f_link.depth-1 a.on{color:#8fb4e6;}
.footer .f_link.depth-1 a:hover{color:#fff;}
.footer .f_info{display:flex; flex-wrap:wrap; gap:.4rem 2rem; font-size:1.4rem; line-height:1.9; color:#9aa0a7;}
.footer .f_info .copy{width:100%; opacity:.7;}
.footer .f_sns.depth-1{display:flex; gap:1.2rem;}
.footer .f_sns.depth-1 a{display:grid; place-items:center; width:4.4rem; height:4.4rem; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; font-size:1.5rem; font-weight:800; transition:background .2s;}
.footer .f_sns.depth-1 a:hover{background:rgba(255,255,255,.2);}
.footer .f_sns.depth-1 a{display:block; position:relative; width:6rem; height:6rem; text-indent:-999px; overflow:hidden; border-radius:2rem; background:rgba(255,255,255,.1);}
.footer .f_sns.depth-1 a:before {content:""; display:block; position:absolute; top:50%; left:50%; margin:-1rem 0 0 -1rem; width:2rem; height:2rem; background:url(../uploads/sns_list.svg) no-repeat 0 0 / auto 2rem;}
.footer .f_sns.depth-1 a.inst:before {background-position-x:0;}
.footer .f_sns.depth-1 a.ytub:before {background-position-x:-3rem;}
.footer .f_sns.depth-1 a.face:before {background-position-x:-6rem;}
.footer .f_sns.depth-1 a.blog:before {background-position-x:-9rem;}

	/* 미디어쿼리 시작 */
	@media (max-width:1280px){
		.footer .f_wrap{gap:3rem;}
		.footer .f_link.depth-1{gap:2.4rem;}
	}
	@media (max-width:1024px){
		.footer .f_wrap{flex-wrap:wrap; gap:3rem;}
		.footer .f_cont{flex:1 1 100%; order:2;}
		.footer .f_sns.depth-1{order:3; align-self:flex-start; width:100%;}
		.footer .f_sns.depth-1 a{width:5.2rem; height:5.2rem; border-radius:1.6rem;}
	}
	@media (max-width:768px){
		.footer .f_wrap{flex-direction:column; padding-top:4.6rem; padding-bottom:5.4rem;}
		.footer .f_logo_img{height:3.6rem;}
		.footer .f_link.depth-1{gap:1.6rem 2.4rem; margin-bottom:1.8rem; font-size:1.6rem;}
		.footer .f_info{font-size:1.5rem; line-height:1.8;}
	}
	@media (max-width:480px){
		.footer .f_wrap{padding-top:4rem; padding-bottom:4.4rem; gap:2.4rem;}
		.footer .f_logo .logo_txt strong{font-size:1.8rem;}
		.footer .f_link.depth-1{gap:1.4rem 2rem; margin-bottom:1.6rem; font-size:1.55rem;}
		.footer .f_info{gap:.4rem 1.4rem; font-size:1.45rem; line-height:1.75;}
		.footer .f_sns.depth-1 a{width:4.6rem; height:4.6rem; border-radius:1.4rem;}
	}
	/* 미디어쿼리 끝 */
/* footer - 끝 */


/* ==========================================================================
   전체메뉴(사이트맵) v2 — 풀페이지   [서브페이지와 동일]
   ========================================================================== */
/* 뒤 페이지를 흐리게 하는 레이어는 패널이 직접 담당하므로 기존 dim 은 아주 옅게만 */
.header.is_sitemap .m_dim{opacity:1;}
.m_dim{background:rgba(8,12,20,.28);}

/* 패널 : 화면 전체 */
.sitemap_panel{
	position:fixed; inset:0; z-index:115;
	max-height:none; height:100%; overflow:hidden;
	display:flex; align-items:center; justify-content:center;
	padding:13rem var(--gutter);
	overflow-y:auto; overscroll-behavior:contain;
	background:rgba(10,15,24,.52);
	-webkit-backdrop-filter:blur(22px) saturate(120%);
	backdrop-filter:blur(22px) saturate(120%);
	box-shadow:none;
	opacity:0; visibility:hidden;
	transition:opacity .42s cubic-bezier(.22,.61,.36,1), visibility 0s linear .42s,
	           -webkit-backdrop-filter .42s ease, backdrop-filter .42s ease;
}
.sitemap_panel::before,
.sitemap_panel::after{display:none;}
.header.is_sitemap .sitemap_panel{
	max-height:none;
	opacity:1; visibility:visible;
	transition:opacity .42s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s,
	           -webkit-backdrop-filter .42s ease, backdrop-filter .42s ease;
}

/* 내용 : 화면 중앙 정렬, 구분선·번호 없는 심플 그리드 */
.sitemap_in{
	display:grid; grid-template-columns:repeat(5,auto); justify-content:center;
	grid-template-rows:auto auto;
	gap:5.2rem 0;
	width:max-content; max-width:100%;
	margin:auto; padding:5.6rem 0;
	border-top:0;
	position:relative;
}
/* 제목 위 헤어라인은 화면 좌우 끝까지 이어진다 */
.sitemap_in::before{
	content:""; position:absolute; top:0; left:50%; z-index:0;
	width:100vw; height:1px; margin-left:-50vw;
	background:rgba(255,255,255,.16);
}

/* 상단 바 : 헤더와 같은 위치에 로고 + 닫기 */
.sitemap_top{
	position:fixed; left:0; right:0; top:0; z-index:116;
	display:flex; align-items:center; justify-content:space-between;
	width:100%; max-width:var(--container); height:13rem;
	margin:0 auto; padding:0 var(--gutter);
}
.sitemap_logo{
	display:flex; align-items:center; gap:1.2rem;
	opacity:0; transform:translateY(-.8rem);
	transition:opacity .4s ease .18s, transform .4s ease .18s;
}
/* 로고 SVG 아래쪽 빈 여백 때문에 광학적으로 위로 떠 보인다(헤더도 같은 이유로 음수 마진 사용) */
.sitemap_logo .logo_img1{width:calc(18.5rem * var(--fx)); height:auto; margin-bottom:-.8rem; object-fit:contain;}
.sitemap_logo .logo_img2{width:calc(13rem * var(--fx)); height:auto; margin-bottom:-.8rem; margin-top:.2rem; object-fit:contain;}
.header.is_sitemap .sitemap_logo{opacity:1; transform:none;}
/* 제목 줄 수가 달라도 목록 시작선이 컬럼끼리 맞도록 행을 공유한다 */
.sitemap_col{display:grid; grid-row:span 2; grid-template-rows:subgrid; gap:inherit; padding:0 4.8rem; border:0; transition:opacity .3s ease;}
/* 한 컬럼에 마우스를 올리면 나머지는 물러난다 — 선 없이 영역을 구분하는 방식 */
.sitemap_in:hover .sitemap_col{opacity:.4;}
.sitemap_in:hover .sitemap_col:hover{opacity:1;}
.sitemap_col + .sitemap_col{border-left:0;}
.sitemap_col .num{display:none;}

.sitemap_col strong{
	display:flex; flex-direction:column; align-items:flex-start; gap:2.2rem;
	margin:0; padding:0; border:0;
	font-size:2.6rem; font-weight:800; letter-spacing:-.06rem; line-height:1.25; color:#fff;
	max-width:22rem;
	text-wrap:balance;
	opacity:0; transform:translateY(2.2rem);
	transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.sitemap_col:nth-child(n) strong{border-color:transparent;}
.sitemap_col strong a{color:#fff;}
.sitemap_col strong a:hover{color:#9dc2f5;}
/* 제목 길이가 달라도 밑줄은 전 컬럼이 같은 높이에 오도록 auto 마진으로 밀어낸다 */
.sitemap_col strong::after{content:""; margin-top:auto; width:3.2rem; height:2px; background:rgba(255,255,255,.55); transition:width .3s ease, background .3s ease;}
.sitemap_col:hover strong::after{width:5.6rem; background:#9dc2f5;}

.sitemap_col ul{display:flex; flex-direction:column; gap:1.6rem;}
.sitemap_col ul li{
	opacity:0; transform:translateY(1.8rem);
	transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}
.sitemap_col ul a{
	display:inline-flex; align-items:center; gap:0;
	font-size:1.7rem; font-weight:500; letter-spacing:-.03rem;
	color:rgba(255,255,255,.78);
	transition:color .2s, transform .2s;
}
.sitemap_col ul a::before{display:none;}
.sitemap_col ul a:hover{color:#fff; transform:translateX(.5rem);}

/* 순차 등장 : 배경(.42s) → 컬럼 제목 → 하위 항목 */
.header.is_sitemap .sitemap_col strong,
.header.is_sitemap .sitemap_col ul li{opacity:1; transform:none;}

.sitemap_col:nth-child(1) strong{transition-delay:.34s;}
.sitemap_col:nth-child(2) strong{transition-delay:.42s;}
.sitemap_col:nth-child(3) strong{transition-delay:.50s;}
.sitemap_col:nth-child(4) strong{transition-delay:.58s;}
.sitemap_col:nth-child(5) strong{transition-delay:.66s;}

.sitemap_col:nth-child(1) ul li:nth-child(1){transition-delay:.50s;}
.sitemap_col:nth-child(1) ul li:nth-child(2){transition-delay:.56s;}
.sitemap_col:nth-child(1) ul li:nth-child(3){transition-delay:.62s;}
.sitemap_col:nth-child(1) ul li:nth-child(4){transition-delay:.68s;}
.sitemap_col:nth-child(2) ul li:nth-child(1){transition-delay:.58s;}
.sitemap_col:nth-child(2) ul li:nth-child(2){transition-delay:.64s;}
.sitemap_col:nth-child(2) ul li:nth-child(3){transition-delay:.70s;}
.sitemap_col:nth-child(2) ul li:nth-child(4){transition-delay:.76s;}
.sitemap_col:nth-child(3) ul li:nth-child(1){transition-delay:.66s;}
.sitemap_col:nth-child(3) ul li:nth-child(2){transition-delay:.72s;}
.sitemap_col:nth-child(3) ul li:nth-child(3){transition-delay:.78s;}
.sitemap_col:nth-child(3) ul li:nth-child(4){transition-delay:.84s;}
.sitemap_col:nth-child(4) ul li:nth-child(1){transition-delay:.74s;}
.sitemap_col:nth-child(4) ul li:nth-child(2){transition-delay:.80s;}
.sitemap_col:nth-child(4) ul li:nth-child(3){transition-delay:.86s;}
.sitemap_col:nth-child(4) ul li:nth-child(4){transition-delay:.92s;}
.sitemap_col:nth-child(5) ul li:nth-child(1){transition-delay:.82s;}
.sitemap_col:nth-child(5) ul li:nth-child(2){transition-delay:.88s;}
.sitemap_col:nth-child(5) ul li:nth-child(3){transition-delay:.94s;}
.sitemap_col:nth-child(5) ul li:nth-child(4){transition-delay:1.00s;}

/* subgrid 미지원 브라우저 폴백 : 2줄 기준 높이 확보 */
@supports not (grid-template-rows:subgrid){
	.sitemap_in{gap:0;}
	.sitemap_col{display:block;}
	.sitemap_col strong{min-height:9.6rem; margin-bottom:5.2rem;}
}

/* 닫힐 때는 지연 없이 한 번에 사라진다 */
.sitemap_panel:not(.is_on) .sitemap_col strong,
.sitemap_panel:not(.is_on) .sitemap_col ul li{transition-delay:0s;}

/* 닫기 버튼 : 사각 배경 없는 얇은 × */
.btn_sitemap_close{
	position:relative; top:auto; right:auto; z-index:2;
	width:5.2rem; height:5.2rem; border-radius:0; flex-shrink:0;
	margin-right:-1.4rem; margin-top:.5rem;
	background:none; color:#fff;
	opacity:0; transform:translateY(-.8rem);
	transition:opacity .4s ease .2s, transform .4s ease .2s, color .2s;
}
.header.is_sitemap .btn_sitemap_close{opacity:1; transform:none;}
.btn_sitemap_close:hover{background:none; transform:rotate(90deg); color:#9dc2f5;}
.btn_sitemap_close::before,
.btn_sitemap_close::after{width:3.2rem; height:2px;}

@media (max-width:1439px){
	.sitemap_panel{display:none;}
}
/* 화면이 낮을 때 : 스케일을 줄여 한 화면에 담고, 모자라면 스크롤한다 */
@media (max-height:860px){
	.sitemap_panel{padding:11rem var(--gutter) 4rem;}
	.sitemap_top{height:11rem;}
	.sitemap_in{gap:3.6rem 0; padding:4rem 0 0;}
	.sitemap_col strong{font-size:2.2rem; gap:1.6rem;}
	.sitemap_col ul{gap:1.2rem;}
	.sitemap_col ul a{font-size:1.6rem;}
}
@media (max-height:680px){
	.sitemap_panel{padding:9.6rem var(--gutter) 3rem;}
	.sitemap_top{height:9.6rem;}
	.sitemap_in{gap:2.8rem 0; padding:3rem 0 0;}
	.sitemap_col{padding:0 3.4rem;}
	.sitemap_col strong{font-size:2rem; gap:1.2rem;}
	.sitemap_col strong::after{width:2.4rem;}
	.sitemap_col ul{gap:1rem;}
	.sitemap_col ul a{font-size:1.5rem;}
}
@media (prefers-reduced-motion:reduce){
	.sitemap_panel,
	.sitemap_col strong,
	.sitemap_col ul li,
	.btn_sitemap_close{transition-duration:.01ms !important; transition-delay:0s !important;}
}


/* ============================================================
   사이트맵(PC 전용) 1440px 이상 : 화면 폭에 따라 유동 스케일업
   — rem 단계 확대만으로는 큰 화면에서 고정된 느낌이 나므로 vw 를 섞는다
   ============================================================ */
	@media (min-width:1440px){
		.sitemap_in{gap:clamp(5.2rem, 3.8vw, 6.4rem) 0; padding:clamp(5.6rem, 4vw, 7rem) 0;}
		.sitemap_col{padding:0 clamp(5rem, 3.5vw, 6.4rem);}
		.sitemap_col strong{gap:clamp(2.2rem, 1.7vw, 2.8rem); font-size:clamp(2.8rem, 1.75vw, 3.2rem); max-width:clamp(23rem, 15vw, 26rem);}
		.sitemap_col strong::after{width:clamp(3.4rem, 2.4vw, 4.4rem);}
		.sitemap_col:hover strong::after{width:clamp(5.8rem, 4vw, 7rem);}
		.sitemap_col ul{gap:clamp(1.7rem, 1.25vw, 2.2rem);}
		.sitemap_col ul a{font-size:clamp(1.8rem, 1.15vw, 2rem);}
		.sitemap_top{height:clamp(13rem, 8.6vw, 14.4rem);}
		.btn_sitemap_close{width:clamp(4.6rem, 3vw, 5.2rem); height:clamp(4.6rem, 3vw, 5.2rem);}
	}


/* ==========================================================================
   통합검색 패널 (헤더 검색 버튼)
   ========================================================================== */
.search_panel{position:fixed; inset:0; z-index:130;}
.search_panel[hidden]{display:none;}
.search_panel .sch_dim{position:absolute; inset:0; background:rgba(8,12,20,.55); backdrop-filter:blur(.6rem); -webkit-backdrop-filter:blur(.6rem);
	opacity:0; transition:opacity .38s cubic-bezier(.16,1,.3,1);}
.search_panel .sch_body{position:absolute; left:0; right:0; top:0; padding:0 0 6rem;
	background:linear-gradient(155deg,#0d1219 0%,#141a22 55%,#0d1219 100%);
	box-shadow:0 3rem 8rem -3rem rgba(0,0,0,.6);
	transform:translateY(-100%); transition:transform .48s cubic-bezier(.16,1,.3,1);}
.search_panel .sch_body::after{content:""; position:absolute; left:0; right:0; bottom:0; height:.4rem;
	background:linear-gradient(90deg,#4d7ce8,#33b6bb,#f26f42);}
.search_panel.is_on .sch_dim{opacity:1;}
.search_panel.is_on .sch_body{transform:translateY(0);}

.search_panel .sch_in{position:relative; width:100%; max-width:var(--container); margin:0 auto; padding:12rem var(--gutter) 0; color:#fff;}
.search_panel .sch_eyebrow{display:flex; align-items:center; gap:1rem; font-family:"Pretendard Variable",sans-serif; font-size:1.3rem; font-weight:600; letter-spacing:.24em; color:rgba(255,255,255,.5);}
.search_panel .sch_eyebrow::before{content:""; width:2.4rem; height:1px; background:rgba(255,255,255,.35);}

.search_panel .sch_form{display:flex; align-items:center; gap:1.6rem; margin:2rem 0 0; padding:0 0 1.8rem; border-bottom:2px solid rgba(255,255,255,.22); transition:border-color .3s;}
.search_panel .sch_form:focus-within{border-color:#4d7ce8;}
.search_panel .sch_input{flex:1 1 auto; min-width:0; height:6.4rem; border:0; background:none; color:#fff; font-size:3.6rem; font-weight:600; letter-spacing:-.06rem;}
.search_panel .sch_input::placeholder{color:rgba(255,255,255,.34); font-weight:400;}
.search_panel .sch_input:focus{outline:none;}
.search_panel .sch_input::-webkit-search-cancel-button{-webkit-appearance:none;}
.search_panel .sch_submit{flex:0 0 auto; display:grid; place-items:center; width:5.6rem; height:5.6rem; border-radius:50%;
	background:linear-gradient(180deg,#4d7ce8,#2f5fd0); color:#fff; transition:transform .25s, box-shadow .25s;}
.search_panel .sch_submit svg{width:2.4rem; height:2.4rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;}
.search_panel .sch_submit:hover{transform:scale(1.06); box-shadow:0 1.2rem 2.4rem -.6rem rgba(77,124,232,.7);}

.search_panel .sch_rows{display:flex; flex-wrap:wrap; gap:3rem 6rem; margin:3.6rem 0 0;}
.search_panel .sch_row{display:flex; align-items:flex-start; gap:1.6rem; min-width:0;}
.search_panel .sch_label{flex:0 0 auto; padding-top:.7rem; font-size:1.4rem; font-weight:600; color:rgba(255,255,255,.5);}
.search_panel .sch_list{display:flex; flex-wrap:wrap; gap:.8rem;}
.search_panel .sch_key{display:inline-flex; align-items:center; height:3.8rem; padding:0 1.6rem; border-radius:999px;
	border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05); color:rgba(255,255,255,.86); font-size:1.5rem; transition:background .25s, border-color .25s, color .25s, transform .25s;}
.search_panel .sch_key:hover{background:#fff; border-color:#fff; color:#12181f; transform:translateY(-.2rem);}
.search_panel .sch_go{display:inline-flex; align-items:center; gap:.6rem; height:3.8rem; padding:0 .4rem; color:rgba(255,255,255,.86); font-size:1.5rem; transition:color .25s;}
.search_panel .sch_go::after{content:"→"; font-size:1.4rem; opacity:.6; transition:transform .25s;}
.search_panel .sch_go:hover{color:#fff;}
.search_panel .sch_go:hover::after{transform:translateX(.3rem);}

.search_panel .sch_close{position:absolute; right:var(--gutter); top:4.4rem; display:grid; place-items:center; width:4.8rem; height:4.8rem; border-radius:50%;
	border:1px solid rgba(255,255,255,.24); color:#fff; transition:background .25s, transform .35s, border-color .25s;}
.search_panel .sch_close svg{width:2rem; height:2rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round;}
.search_panel .sch_close:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5); transform:rotate(90deg);}

@media (max-width:1024px){
	.search_panel .sch_in{padding-top:10rem;}
	.search_panel .sch_input{height:5.6rem; font-size:2.8rem;}
	.search_panel .sch_rows{gap:2.4rem 4rem;}
	.search_panel .sch_close{top:3.2rem;}
}
@media (max-width:768px){
	.search_panel .sch_body{padding-bottom:4.4rem;}
	.search_panel .sch_in{padding-top:9rem;}
	.search_panel .sch_form{gap:1rem; padding-bottom:1.4rem;}
	.search_panel .sch_input{height:4.8rem; font-size:2.2rem;}
	.search_panel .sch_submit{width:4.6rem; height:4.6rem;}
	.search_panel .sch_submit svg{width:2rem; height:2rem;}
	.search_panel .sch_rows{flex-direction:column; gap:1.8rem; margin-top:2.8rem;}
	.search_panel .sch_row{flex-direction:column; gap:1rem;}
	.search_panel .sch_label{padding-top:0;}
	.search_panel .sch_close{top:2.4rem; width:4.4rem; height:4.4rem;}
}