/* ===== end of preview base ===== */
/* =========================
   Header (기존 유지)
========================= */
:root {--menu1d_color:#333; }


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.header { position: fixed; top: 0; z-index: 999999; width: 100%;   transition: background 0.3s; padding: 10px 0px 30px 0px; height: calc(var(--header-h) + 10px);background-color: rgba(255,255,255,1); backdrop-filter: blur(10px);}
	

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.header { position: fixed; top: 0; z-index: 21474836; width: 100%;   transition: background 0.3s; padding: 0px 0px 0px 0px; height: var(--header-h);background-color: #fff}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



.header.bg {background-color: rgba(255,255,255,1);  backdrop-filter: blur(10px); }

/* ① 한국어/auto일 때: 번역 배너는 숨기고, body 보정도 제거 */
html[lang="ko"] .goog-te-banner-frame,
html[lang="auto"] .goog-te-banner-frame,
html[lang="ko"] .goog-te-menu-frame,
html[lang="auto"] .goog-te-menu-frame {
  display: none !important;
}

html[lang="ko"] body,
html[lang="auto"] body {
  top: 0 !important; /* 구글이 body에 준 보정값 무력화 */
}

/* ② 외국어(ko/auto 제외)일 때만 헤더 내려주기 */
html:not([lang="ko"]):not([lang="auto"]) header.header {
  top: 40px; /* 필요하면 배너 높이에 맞춰 조정 */
}

/* ③ 한국어/auto일 때는 헤더 원위치(안전망) */
html[lang="ko"] header.header,
html[lang="auto"] header.header {
  top: 0 !important;
}


/* ① 한국어/auto일 때: 번역 배너는 숨기고, body 보정도 제거 */
html[lang="ko"] .goog-te-banner-frame,
html[lang="auto"] .goog-te-banner-frame,
html[lang="ko"] .goog-te-menu-frame,
html[lang="auto"] .goog-te-menu-frame {
 top: 40px; /* 필요하면 배너 높이에 맞춰 조정 */
}


/* --------------------  외국어 대응  1댑스 폰트 크기 조절 ------------------------ */

/* 한국어 & auto = 원래 크기 */
html[lang="ko"], html[lang="auto"]{
  --top1d-scale: 1;
  --top1d-letter: normal;
  --top1d-lh: 1.2;
}

/* 영어 */
html[lang="en"]{
  --top1d-scale: 0.8;
  --top1d-letter: 0.005em;
  --top1d-lh: 1.2;
}

/* 일본어 */
html[lang="ja"]{
  --top1d-scale: 0.92;
  --top1d-letter: 0.01em;
  --top1d-lh: 1.25;
}

/* 중국어(간체) */
html[lang="zh-CN"]{
  --top1d-scale: 0.94;
  --top1d-letter: 0.005em;
  --top1d-lh: 1.25;
}

/* 중국어(번체) */
html[lang="zh-TW"]{
  --top1d-scale: 0.94;
  --top1d-letter: 0.005em;
  --top1d-lh: 1.25;
}

/* --------------------  외국어 대응  1댑스 간격조절 ------------------------ */

/* 한국어 & auto = 기준값 유지 */
html[lang="ko"], html[lang="auto"]{
  --top1d-gap-scale-left: 1;
  --top1d-gap-scale-right: 1;
}

/* 영어: 단어 길이 변동이 커서 살짝 넓게 */
html[lang="en"]{
  --top1d-gap-scale-left: 0.5;
  --top1d-gap-scale-right: 0.5;
}

/* 일본어: 라벨이 짧은 편이라 약간 좁게 */
html[lang="ja"]{
  --top1d-gap-scale-left: 0.7;
  --top1d-gap-scale-right: 0.7;
}

/* 중국어(간체/번체): 글자수 짧은 편 → 조금 좁게 */
html[lang="zh-CN"],
html[lang="zh-TW"]{
  --top1d-gap-scale-left: 0.7;
  --top1d-gap-scale-right: 0.7;
}



/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	.head_inner { height:calc(var(--header-h) - 50px);  }
.head_inner .logo {margin-top: -20px; display: flex;flex-direction: row; display: flex;  justify-content: center;  align-items: center;  grid-gap: 25px}
.head_inner .logo a:first-child {border-right: 1px solid #ccc; padding-right: 30px}
		

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	.head_inner { height:var(--header-h);  padding-top: 5px }
.head_inner .logo {display: flex;flex-direction: row; display: flex;  justify-content: center;  align-items: center;  grid-gap: 5px}
.head_inner .logo a:first-child {border-right: 1px solid #ccc; padding-right:10px}
		
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/




.head_inner .logo img{ width: var(--logo-size-w); }

.head_inner .logo img.White { filter: var(--logo-White)!important; /* 흰색으로 변경 */; }

/* 상위 컨테이너가 메뉴를 자르지 않도록 */
.header_right, .gnb { overflow: visible !important; }
.header_right{ width: auto;}

/* =========================
   공통 gnb 레이아웃
========================= */
.gnb .menu, .gnb .menu ul { list-style: none; margin: 0; padding: 0; }
.gnb a { text-decoration: none; outline: none; }
.gnb a:focus-visible { outline: 2px solid #1155f9; outline-offset: 4px; border-radius: 4px; }

/* =========================
   PC: 드롭다운 유지 (.gnb.pc)
========================= */

.head_inner .gnb.pc { width: 100%; height:calc( var(--header-h) - 70px); position: relative; z-index: 60; }

/**** 모바일 ****/
@media only all and (max-width:767px) {.head_inner .gnb.pc {display: none}
}


.head_inner .gnb.pc > .menu { 
  display: flex!important; flex-direction: row!important;align-items: center; gap:var(--top1d-margin-right); height: 100%;
}
.head_inner .gnb.pc > .menu > li { position: relative; height: 100%;}
.head_inner .gnb.pc > .menu > li:last-child {margin-right: 0px }
.head_inner .gnb.pc > .menu > li > a {
  display: flex; justify-content: center; align-items: center; height: 100%;
  padding: 0 0px; color: var(--menu1d_color); font-size:  var(--top1d-font-size)!important; font-weight:var(--top1d-font-weight);  letter-spacing: -0.5px; white-space: nowrap; position: relative;
  /* 텍스트 컬러 애니메이션 */
  background-image: linear-gradient(to right, var(--primary) 0%, var(--primary) 100%);
  background-size: 0% 100%; background-repeat: no-repeat; -webkit-background-clip: text; -webkit-text-fill-color:var(--menu1d_color);
  transition: background-size .6s ease, -webkit-text-fill-color .6s ease;
}
/* hover: 텍스트 채움 + 밑줄 */
.head_inner .gnb.pc > .menu > li:hover > a { /*background-size: 100% 100%; -webkit-text-fill-color: transparent; */ }
.head_inner .gnb.pc > .menu > li > a:before {
  content: ""; width: 0%; height: 2px; background-color: var(--primary);
  position: absolute; bottom:20%; left: 0; transition: width .5s;
}
.gnb.pc.subcolor .menu > li:first-child > a:before{ background: var(--sub-color10)!important; }
.gnb.pc.subcolor .menu > li:nth-child(2) > a:before{ background: var(--sub-color20)!important;}
.gnb.pc.subcolor .menu > li:nth-child(3) > a:before { background: var(--sub-color30)!important;}
.gnb.pc.subcolor .menu > li:nth-child(4) > a:before { background: var(--sub-color40)!important;}
.gnb.pc.subcolor .menu > li:nth-child(5) > a:before { background: var(--sub-color50)!important;}
.gnb.pc.subcolor .menu > li:nth-child(6) > a:before { background: var(--sub-color60)!important;}
.gnb.pc.subcolor .menu > li:nth-child(7) > a:before { background: var(--sub-color70)!important;}
.gnb.pc.subcolor .menu > li:nth-child(8) > a:before { background: var(--sub-color80)!important;}
.gnb.pc.subcolor .menu > li:nth-child(9) > a:before { background: var(--sub-color90)!important;}




.head_inner .gnb.pc > .menu > li:hover > a:before { width: 100%; }




/* 하위메뉴 (PC 드롭다운) */
.gnb.pc .menu > li > .sublist {
  position: absolute; top: 100%; left: 0; min-width: 200px; margin: 0; padding: 8px 0;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.08);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 9999; pointer-events: none;
}
.gnb.pc .menu > li:hover > .sublist,
.gnb.pc .menu > li:focus-within > .sublist,
.gnb.pc .menu > li.open > .sublist { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.gnb.pc .sublist > li > a.sublink { display:block; padding:6px 14px; color:#111; font-size:14px; white-space:nowrap; transition: all .3s; }
.gnb.pc .sublist > li > a.sublink:hover { background: var(--primary); color:#fff; }


/* 하위메뉴  2뎁스메뉴 a  */
.gnb.pc .menu > li > .sublist  .subitem a{ width: 100%; padding: 7px 15px; font-size:  var(--top2d-font-size)!important;  font-weight: 500; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 
}
.gnb.pc .menu > li > .sublist  .subitem a:hover{  background: var(--primary); color:#fff;}


.gnb.pc.subcolor .menu > li:first-child > .sublist  .subitem a:hover{ background: var(--sub-color10)!important; color: #fff; }
.gnb.pc.subcolor .menu > li:nth-child(2) > .sublist  .subitem a:hover { background: var(--sub-color20)!important; color: #fff; }
.gnb.pc.subcolor .menu > li:nth-child(3) > .sublist  .subitem a:hover { background: var(--sub-color30)!important; color: #fff; }
.gnb.pc.subcolor .menu > li:nth-child(4) > .sublist  .subitem a:hover { background: var(--sub-color40)!important; color: #fff; }
.gnb.pc.subcolor .menu > li:nth-child(5) > .sublist  .subitem a:hover { background: var(--sub-color50)!important; color: #fff; }
.gnb.pc.subcolor .menu > li:nth-child(6) > .sublist  .subitem a:hover { background: var(--sub-color60)!important; color: #fff; }
.gnb.pc.subcolor .menu > li:nth-child(7) > .sublist  .subitem a:hover { background: var(--sub-color70)!important; color: #fff; }
.gnb.pc.subcolor .menu > li:nth-child(8) > .sublist  .subitem a:hover { background: var(--sub-color80)!important; color: #fff; }
.gnb.pc.subcolor .menu > li:nth-child(9) > .sublist  .subitem a:hover { background: var(--sub-color90)!important; color: #fff; }



/* PC에서 체크박스/토글은 숨김(호버 드롭다운) */
.gnb.pc input.acc,
.gnb.pc label.acc-toggle { display: none !important; }

/* 2뎁스 아이템 중 자식이 있는 경우, 3뎁스 위치 기준점 */
.gnb.pc .sublist > li.has-sub { position: relative; }

/* 3뎁스: 기본은 2뎁스 우측으로 플라이아웃 */
.gnb.pc .sublist > li.has-sub > .sublist{
  position: absolute;
  top: 0;                          /* 2뎁스 항목의 상단과 맞춤 */
  left: calc(100% + 0px);          /* 2뎁스 폭을 '감지'해서 그 오른쪽에 붙임 */
  min-width: 200px;
  margin: 0; padding: 8px 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 10000;                  /* 2뎁스보다 위 */
}

/* 2뎁스 항목 hover/focus 시 3뎁스 열기 */
.gnb.pc .sublist > li.has-sub:hover   > .sublist,
.gnb.pc .sublist > li.has-sub:focus-within > .sublist{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0);
}

/* 3뎁스 안의 링크 스타일(당신 CSS와 톤 맞춤) */
.gnb.pc .sublist > li.has-sub > .sublist > li > a{
  display: block; padding: 6px 14px; color: #111; font-size: 14px; white-space: nowrap; transition: all .3s;
}
.gnb.pc .sublist > li.has-sub > .sublist > li > a:hover{
  background: var(--primary); color: #fff;
}

/* 우측 경계에 부딪히면 왼쪽으로 뒤집기(클래스 토글용) */
.gnb.pc .sublist > li.has-sub > .sublist.flip-left{
  left: auto; right: calc(100% + 8px);
  transform: translateX(-8px);
}
.gnb.pc .sublist > li.has-sub:hover   > .sublist.flip-left,
.gnb.pc .sublist > li.has-sub:focus-within > .sublist.flip-left{
  transform: translateX(0);
}



/* =========================
   모바일/햄버거: 아코디언 (.gnb.mo) — 드롭인 교체본
   - +/– 버튼은 1뎁스 우측에 고정 (안 내려감)
   - 서브는 height 트랜지션(부드럽게), JS가 height 값을 넣어줌
   - 1/2/3뎁스 시각 구분 강화
========================= */
/* =========================
   모바일 아코디언 (스코프: .gnb.mo)
   - HTML 변경 없이 동작
   - id/for 불필요 (중복 문제 회피)
========================= */
.gnb.mo{  padding-top: 80px;}

.gnb.mo .menu, 
.gnb.mo .menu ul{ list-style:none; margin:0;}
.gnb.mo .menu ul li{ list-style:none; margin:0!important; padding:0; }

.gnb.mo .menu > .cell{ position:relative;background-color: transparent!important}
.gnb.mo .menu a{ text-decoration:none; }

/* 1뎁스 라인 */
.gnb.mo .depth1{
  position: relative;            /* 레이어 기준 */
  display:block;
  min-height:auto;
  padding:10px 0px 10px 16px;   /* 우측 + 자리 */
  color:#fff; font-weight:700; white-space:nowrap;
  background:#0b0b0b;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
 
  z-index:1;                     /* 토글보다 아래 */
}

/* 1뎁스: 우측 + 아이콘(라벨은 시각 전용) */
.gnb.mo .cell.has-sub{ padding-right:0px; position: relative; margin-bottom: 0px!important;}
.gnb.mo .cell.has-sub > .acc-toggle{
  position:absolute; right:12px; top:20px; transform:translateY(-50%);
  width:28px; height:28px; line-height:28px; text-align:center;
  font-size:18px; color:#fff; z-index:2; pointer-events:none; /* 클릭은 체크박스가 받음 */
}
.gnb.mo .cell.has-sub > .acc-toggle::after{ content:'+'; }

/* ★ 체크박스(실제 클릭 영역) — 오버레이로 올려 눌리게 */
.gnb.mo .cell.has-sub > .acc[hidden]{
  display:block !important;      /* hidden 속성 무력화 (UA CSS override) */
}
.gnb.mo .cell.has-sub > .acc{
  position:absolute; right:12px; top:20px;transform:translateY(-50%);
  width:28px; height:28px; margin:0;
  opacity:0; appearance:none;    /* 보이지 않지만 클릭 가능 */
  cursor:pointer; z-index:3;     /* 라벨 위 */
}

/* 열림 상태에 따른 아이콘/패널 */
.gnb.mo .cell.has-sub > .acc:checked ~ .acc-toggle::after{ content:'–'; }

/* 서브 패널(1뎁스) */
.gnb.mo .sublist{
  background:#1f1f1f;

  overflow:hidden;
  max-height:0; opacity:0; padding:0; margin-top:-6px; border-radius:0 0 10px 10px;
  transition:max-height .35s ease, opacity .25s ease, padding .25s ease; 
}
.gnb.mo .cell.has-sub > .acc:checked ~ .sublist{
  max-height:900px; opacity:1; padding:0px 0 0px;
}

/* 2/3뎁스 항목 */
.gnb.mo .sublist .subitem{ position:relative; }
.gnb.mo .depth2, .gnb.mo .depth3{ display:block; color:#fff; border-radius:10px; }
.gnb.mo .depth2{
  padding:7px 16px 12px 16px; font-size:15px; background-color: #333;margin: 2px 0px

}
.gnb.mo .depth3{
  padding:5px 16px 10px 36px; font-size:14px; opacity:.96;
  border-left:2px dashed rgba(255,255,255,.22);border-radius: 0px
}
.gnb.mo .sublist .subitem > a:hover{ background:rgba(255,255,255,.08); }

/* 2뎁스 중첩 아코디언 — 동일 패턴 */
.gnb.mo .sublist .subitem.has-sub{ padding-right:0px; }
.gnb.mo .sublist .subitem.has-sub > .acc-toggle{
  position:absolute; right:10px; top:14px;
  width:24px; height:24px; line-height:24px; text-align:center;
  font-size:16px; color:#fff; z-index:2; pointer-events:none;
}
.gnb.mo .sublist .subitem.has-sub > .acc-toggle::after{ content:'+'; }

/* ★ 중첩 체크박스도 오버레이 클릭 영역으로 */
.gnb.mo .sublist .subitem.has-sub > .acc[hidden]{ display:block !important; }
.gnb.mo .sublist .subitem.has-sub > .acc{
  position:absolute; right:10px; top:10px; /* depth2 라인의 실제 높이에 맞춰 조정 */
  width:24px; height:24px; margin:0;
  opacity:0; appearance:none; cursor:pointer; z-index:3;
}

.gnb.mo .sublist .subitem.has-sub > .acc:checked ~ .acc-toggle::after{ content:'–'; }
.gnb.mo .sublist .subitem.has-sub > .acc:checked ~ .sublist{
  max-height:900px; opacity:1; padding:6px 0 6px;
}

/* 접근성: 포커스 링(체크박스 포커스 시 라벨에 표시) */
.gnb.mo .cell.has-sub > .acc:focus-visible ~ .acc-toggle,
.gnb.mo .sublist .subitem.has-sub > .acc:focus-visible ~ .acc-toggle{
  outline:2px solid #4c8dff; outline-offset:4px; border-radius:6px;
}

/* PC에서는 체크박스/라벨 숨김 (공유 gnb 보호) */
.gnb.pc .acc, .gnb.pc .acc-toggle{ display:none !important; }










/* =========================================================
   Sitemap Overlay — Clean UI
   마크업
   <div class="gnb sitemap" id="sitemapLayer">
     <div class="sm-backdrop" id="sitemapBackdrop"></div>
     <div class="sm-panel" role="dialog" aria-modal="true" aria-labelledby="sitemapTitle">
       <div class="sm-head">
         <h2 id="sitemapTitle">전체 메뉴</h2>
         <button class="sm-close" id="sitemapClose" aria-label="닫기">×</button>
       </div>
       <nav class="gnb sm">
         <ul class="menu" id="menu-sitemap"></ul>
       </nav>
     </div>
   </div>
   ========================================================= */

/* ---------- Theme tokens ---------- */
:root{
  --sm-backdrop: rgba(15,18,23,0.95);
  --sm-panel-bg: rgba(255,255,255,0.00);
  --sm-ink: #fff;
  --sm-ink-muted: #fff;
  --sm-border: #e5e7eb;
  --sm-radius: 16px;
  --sm-shadow:;
  --sm-head-h: 60px;
  --sm-panel-w: min(1446px, 92vw);
  --sm-panel-h: min(82vh, 800px);
  --sm-gap: 24px;
  --sm-focus: #2563eb;
}

/* ---------- Overlay container ---------- */
.gnb.sitemap{
  position: fixed; inset: 0; z-index: 9999;
  display: block;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .24s ease, visibility .24s linear; height: 100vh!important
}
.gnb.sitemap.active{
  visibility: visible; opacity: 1; pointer-events: auto;
}

/* Backdrop */
.gnb.sitemap .sm-backdrop{
  position: absolute; inset: 0;
  background: var(--sm-backdrop);
  -webkit-backdrop-filter: saturate(1.1) blur(2px);
          backdrop-filter: saturate(1.1) blur(2px);
}

/* ---------- Panel ---------- */
.gnb.sitemap .sm-panel{
  position: absolute; left:50%; top: 50%;
  width: var(--sm-panel-w); height: var(--sm-panel-h);
  transform: translate(-50%, calc(-50% + 8px));
  background: var(--sm-panel-bg);
  color: var(--sm-ink);
  border-radius: var(--sm-radius);
  box-shadow: var(--sm-shadow);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .24s ease;
}
.gnb.sitemap.active .sm-panel{
  transform: translate(-50%, -50%);
}

/* ---------- Header ---------- */
.gnb.sitemap .sm-head{
  position: sticky; top: 0; z-index: 1;
  height: var(--sm-head-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0px; 
  
  background: var(--sm-panel-bg);
}
.gnb.sitemap .sm-head h2{
  margin: 0; font-size: 26px; font-weight: 700; letter-spacing: .2px; margin-bottom: 30px;
}


.gnb.sitemap .sm-close{
  display: inline-flex; align-items: center; justify-content: center;
  width:50px; height: 50px; border-radius: 10px;
 background: transparent; color: var(--sm-ink);
  font-size: 50px; line-height: 1; cursor: pointer;
  transition: transform .12s ease, background-color .30s ease; position: absolute; right: 0px; top: 0px;
}
.gnb.sitemap .sm-close:hover{  }
.gnb.sitemap .sm-close:active{ transform: scale(.96); }
.gnb.sitemap .sm-close:focus-visible{
  outline: 2px solid var(--sm-focus); outline-offset: 2px;
}

/* ---------- Body (nav.gnb.sm) ---------- */
.gnb.sitemap .sm-panel .gnb.sm{
  flex: 1 1 auto; overflow: auto;
  padding: 16px 16px 20px;
}

/* UL as grid (깔끔한 카드형 리스트) */
.gnb.sitemap .sm-panel .gnb.sm .menu{
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sm-gap);
}

/* 각 1뎁스 블록을 카드 느낌으로 */
.gnb.sitemap .sm-panel .gnb.sm .menu > .cell{
  list-style: none;

  padding: 0px;
  box-sizing: border-box;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; border-left: 1px solid rgba(204,204,204,0.1) ; padding-left: 30px; 
}
.gnb.sitemap .sm-panel .gnb.sm .menu > .cell:hover{
  border-color: #dbe0e8;
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
}
.gnb.sitemap .sm-panel .gnb.sm .menu > .cell:active{
  transform: translateY(1px);
}

/* 1 depth */
.gnb.sitemap .sm-panel .gnb.sm .menu > .cell > .depth1{
  display: block; margin: 2px 0 20px;
  font-size: 26px; font-weight: 700; color: var(--sm-ink);
  text-decoration: none;
}

.gnb.sitemap [aria-current="page"]{ text-decoration: underline; }

/* sub list */
.gnb.sitemap .sm-panel .gnb.sm>.sublist{
  margin: 0; padding: 0 0px 0px 0px;; list-style: none;
  display: block; margin-left: -10px
}
.gnb.sitemap .sm-panel .gnb.sm .subitem{
  list-style: none; margin: 0; width: 100%; float: left
}
.gnb.sitemap .sm-panel .gnb.sm .subitem > .depth2{
  display: block;
  padding: 7px 0px ;
 font-size:calc(var(--tx-sm-size) * 0.9); line-height: 1.45;
  color: var(--sm-ink-muted);
  text-decoration: none; border-radius: 8px; margin-bottom: 5px;width: auto!important; float: left; position: relative
}
.gnb.sitemap .sm-panel .gnb.sm .subitem > .depth2:before{
content: "";  position: absolute; left: 0px; bottom: 5px; height: 1px; background-color: #fff; width: 0%; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 

}
.gnb.sitemap .sm-panel .gnb.sm .subitem > .depth2:hover:before{
content: "";  position: absolute; left: 0px; bottom: 5px; height: 1px; background-color: #fff; width: 100%
}


.gnb.sitemap .sm-panel .gnb.sm .subitem > .depth3{
  display: block;
  padding: 4px 10px 4px 20px;
  font-size:calc(var(--tx-sm-size) * 0.9); line-height: 1.45;
  color: rgba(255,255,255,0.50);
  text-decoration: none;  position: relative;float: left; width: auto; 
}



.gnb.sitemap .sm-panel .gnb.sm .subitem > .depth3:before{
height: 100%; position: absolute; left: 10px; top: 0px;   content: ""; 
}
.gnb.sitemap .sm-panel .gnb.sm .subitem > .depth2:hover,
.gnb.sitemap .sm-panel .gnb.sm .subitem > .depth3:hover{
width: auto!important;
  text-decoration: none;
}

.gnb.sitemap .sm-panel .gnb.sm .subitem > .depth3:after{
content: "";  position: absolute; left: 20px; bottom: 5px; height: 1px; background-color: #fff; width: 0%; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 

}
.gnb.sitemap .sm-panel .gnb.sm .subitem > .depth3:hover:after{
content: "";  position: absolute; left: 20px; bottom: 5px; height: 1px; background-color: #fff; width: calc(100% - 30px)
}



/* 항상 펼침: checkbox/label 숨김 */
.gnb.sitemap .sm-panel .gnb.sm input.acc,
.gnb.sitemap .sm-panel .gnb.sm label.acc-toggle{ display: none !important; }

/* 포커스 가시성 */
.gnb.sitemap .sm-panel .gnb.sm a:focus-visible{
  outline: 2px solid var(--sm-focus); outline-offset: 2px;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 980px){
  :root{ --sm-gap: 16px; }
  .gnb.sitemap .sm-panel{ width: min(100vw, 92vw); height: min(88vh, 760px); }
  .gnb.sitemap .sm-panel .gnb.sm{ padding: 12px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .gnb.sitemap, .gnb.sitemap .sm-panel{ transition: none !important; }
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --sm-panel-bg: #0b1220;
    --sm-ink: #e5e7eb;
    --sm-ink-muted: #cbd5e1;
    --sm-border: #1f2937;
    --sm-shadow: 0 24px 64px rgba(0,0,0,.6);
  }
  .gnb.sitemap .sm-close:hover{ background: #0f172a; }
  .gnb.sitemap .sm-panel .gnb.sm .menu > .cell{ background: #0b1220; }
  .gnb.sitemap .sm-panel .gnb.sm .subitem > .depth2:hover,
  .gnb.sitemap .sm-panel .gnb.sm .subitem > .depth3:hover{ background: #111827; }
}

/* ---------- High-contrast (Windows HC) ---------- */
@media (forced-colors: active){
  .gnb.sitemap .sm-backdrop{ background: Canvas; }
  .gnb.sitemap .sm-panel{
    background: Canvas; color: CanvasText; border: 1px solid CanvasText;
  }
  .gnb.sitemap .sm-close{ border-color: CanvasText; }
}

/* ---------- Print ---------- */
@media print{ .gnb.sitemap{ display: none !important; } }




/*언어선택*/
.lang-select {
  position: relative;
  display: inline-block;
}

.lang-btn {
  background: rgba(0,0,0,0.3);
  border: 2px solid #fff;
  padding: 4px 20px;
  cursor: pointer; border-radius: 50px;  font-size:13px;  color: #fff
}

.lang-options {
  position: absolute;
  top: 100%;
  left: 0;
  background: #333;
 
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: none;
  z-index: 10; border-radius: 10px;     color: #fff; overflow: hidden
}

.lang-options li {
  padding: 3px 14px;
  cursor: pointer;font-size:13px; 
}

.lang-options li:hover {
  background: var(--primary);; color: #fff
}

.lang-select.open .lang-options {
  display: block;
}
.lang-options {

}
.lang-options[aria-hidden="false"] {
  display: block;
}
.lang-options li {
  padding: 6px 12px;
  cursor: pointer;
}
.lang-options li:focus {
  outline: none;
  background: var(--primary);;
}

.lang-select { position: relative; }

.lang-options[aria-hidden="false"] { display:block; }





/*글로벌 메뉴*/


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.Global_area{width: 100%; float: left; min-height: 35px }
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.Global_area{width: 100%; float: left;  position: absolute; top: 20px;right: 60px }
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/





/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	
	.Global_area.noview{display: none}
.Global_menu.noview{display: none}
.Global_menu{width: auto}
.Global_menu a{width: auto; font-size:calc(var(--tx-sm-size) * 0.9); position: relative; padding-right: 10px;  }
.Global_menu a:before{content: "";   width: 10px; height: 10px; border-radius: 100%; background-color: #ccc;  position: absolute; right:-5px; top:50%;transform: translateY(-50%);}

.Global_menu a:last-child:before{display: none  }


	
	.Global_menu_m.noview{display: none}
.Global_menu_m{width: auto ; margin-top: 30px;  display: none}
.Global_menu_m a{width: auto; font-size:calc(var(--tx-sm-size) * 0.9); position: relative; padding-right: 10px;  color: #fff;}
.Global_menu_m a:before{content: "";   width: 10px; height: 10px; border-radius: 100%; background-color: #ccc;  position: absolute; right:-5px; top:50%;transform: translateY(-50%);}

.Global_menu_m a:last-child:before{display: none  }

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	
	
	.Global_area.noview{display: none}
.Global_menu.noview{display: none}
.Global_menu{width: auto; display: none}
.Global_menu a{width: auto; font-size:calc(var(--tx-sm-size) * 0.9); position: relative; padding-right: 10px;  }
.Global_menu a:before{content: "";   width: 10px; height: 10px; border-radius: 100%; background-color: #ccc;  position: absolute; right:-5px; top:50%;transform: translateY(-50%);}

.Global_menu a:last-child:before{display: none  }


	
	.Global_menu_m.noview{display: none}
.Global_menu_m{width: auto ; margin-top: 40px; padding-left: 10px}
.Global_menu_m a{width: auto; font-size:calc(var(--tx-sm-size) * 0.9); position: relative; padding-right: 10px;  color: #fff; margin-right: 10px;}
.Global_menu_m a:before{content: "";   width: 10px; height: 10px; border-radius: 100%; background-color: rgba(204,204,204,0.40);  position: absolute; right:-10px; top:50%;transform: translateY(-50%);}

.Global_menu_m a:last-child:before{display: none  }

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/










/*관리메뉴*/

.admin_topbtn{width:auto;   float: left; display: flex; flex-direction: row;}
.admin_topbtn .icon_btn{width:auto;   float: left; display: flex;  justify-content:flex-start;  align-items: center;   color:var(--menu1d_color)!important; font-size: 0.9em; position: relative; cursor: pointer;  
	 height: 35px; width: 30px; line-height: 38px;}
	
.admin_topbtn .icon_btn::before{font-family: unicons-line;  font-size:25px; margin-top: -2PX; color:var(--menu1d_color); }
	


.loginbtn:before{color: var(--menu1d_color); }	
.logoutbtn:before{   color: var(--menu1d_color); }
.joinbtn:before{  color: var(--menu1d_color); margin-top: -5PX}	
.memberbtn:before{  color: var(--menu1d_color); }	
.adminbtn:before{content: "\ec60";   color:var(--menu1d_color)!important; }		
.adminbtn2:before{content: "\ec3f";      font-family: unicons-solid!important; color:var(--menu1d_color); }		
	

/* 버튼 스타일 */
        .tooltip_ov { position: relative; }
/* 말풍선 스타일 */
        .tooltip_ov .tooltip { position: absolute; bottom: -65%; left: 42%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.75); color: white; padding: 5px 5px!important; line-height: 120%!important; border-radius: 5px; font-size: 11px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.2s ease-in-out; }
/* 말풍선 화살표 */
       .tooltip_ov .tooltip::after { content: ""; position: absolute; top: -10px; left:17px; border-width: 6px; border-style: solid; border-color: rgba(0, 0, 0, 0.75) transparent transparent transparent; transform:rotate(180deg); }
/* 마우스 오버 시 말풍선 표시 */
        .tooltip_ov:hover .tooltip { opacity: 1; visibility: visible; }





/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	/* ===== 햄버거 버튼 ===== */
.btn-allmenu {
  position: relative;
  width: 25px;
  height: 22px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.btn-allmenu .bar {
  display: block;
  width: 100%;
  height: 2px;
  margin: 5px 0;
  background-color:var(--menu1d_color);
  transition: all 0.3s ease;
}
/* 활성화 시 X 모양 */

.btn-allmenu .bar:nth-child(2) {
 width: 20px;
}


}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	/* ===== 햄버거 버튼 ===== */
.btn-allmenu {
  position: relative;
  width: 22px;
  height: 22px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.btn-allmenu .bar {
  display: block;
  width: 100%;
  height: 2px;
  margin: 5px 0;
  background-color:var(--menu1d_color);
  transition: all 0.3s ease;
}
/* 활성화 시 X 모양 */

.btn-allmenu .bar:nth-child(2) {
 width: 20px;
}


}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



/* 활성화 시 X 모양 */
.btn-allmenu.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg); 
}
.btn-allmenu.active .bar:nth-child(2) {
  opacity: 0;
}
.btn-allmenu.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ===== 사이드 메뉴 ===== */
.side-menu {
  position: fixed;
  top: 0;
  right: -300px; /* 처음에는 화면 밖 */
  width: 300px;
  height: 100%;
  background: #222;
  color: #fff;
  transition: right 0.3s ease;
  z-index: 1000;height: 100vh; overflow-y: hidden
}
.side-menu.active {
  right: 0;
}
.side-menu-inner {
  padding: 20px;
}
.side-menu-inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.side-menu-inner ul li {
  margin-bottom: 15px;
}
.side-menu-inner ul li a {
  color: #fff;
  text-decoration: none;
}
.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
  float: right;
}

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.allmenu{display:none }
.sitemap{}/*불꽃에서는 사용안함*/
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.allmenu{ }
.sitemap{display:none}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/


/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {#google_translate_element{ margin-right: 100px!important;}
	
	#gt-desktop{margin-right: 100px;  }

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {#google_translate_element{ margin-right: -10px; margin-top: -3px}

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/
/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {.notranslate{margin-right: 100px; font-size: 13px; background: url("/_img/svg/line_icon/arw_bottom.svg")no-repeat; background-position: 90% center ; background-size: 15px!important; padding-right: 30px!importantx; border-radius: 6px}

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {.notranslate{margin-right: -10px; font-size: 12px;  background-position: 90% center ; background-size: 15px!important; margin-top: -5px; border-radius: 6px; padding: 0px 20px 0px 10px!important; height: 30px!important; line-height: 30px!important; }

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/





        /* 기본 옵션 텍스트 */
        .notranslate option:first-child {
            color: #666;
        }


        /* 태블릿 */
        @media screen and (max-width: 1024px) and (min-width: 769px) {
            .notranslate {
                width:55px!important;
                height: 35px;
                font-size: 0;
                color: transparent;
                background-image: 
                    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"),
                    url("/_img/svg/line_icon/arw_bottom.svg")!important;
                background-position: center, 90% center!important;
                background-repeat: no-repeat, no-repeat!important;
                background-size: 25x, 20px !important;
            }
        }
        /* 모바일에서 지도 아이콘 표시 */
        @media screen and (max-width: 768px) {
            .notranslate {
                width:50px;
                height: 40px;
                font-size: 0; /* 텍스트 숨기기 */
                color: transparent;
                background-image: 
                    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")!important;
                background-position: center, 90% center;
                background-repeat: no-repeat, no-repeat;
                background-size: 25px, 20px !important;
                margin-right: -10;
                padding: 0;
                cursor: pointer; border: none!important
            }
 .notranslate:focus{
                width:40px;
                height: 40px;
                font-size: 0; /* 텍스트 숨기기 */
                color: transparent!important;
                background-image: 
                    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")!important;
                background-position: center, 90% center;
                background-repeat: no-repeat, no-repeat;
                background-size: 25px, 20px !important;
                margin-right: -10;
                padding: 0;
                cursor: pointer; border: none!important; background-color: #fff!important
            }

            /* 모바일에서 첫 번째 옵션의 텍스트도 숨기기 */
            .notranslate option {
                font-size: 14px;
                color: initial;
            }
        }

        /* 데모용 컨테이너 */
        .demo-container {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .demo-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
        }

        .device-info {
            background: #f5f5f5;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 15px;
            font-size: 14px;
            color: #666;
        }