@charset "UTF-8";

/* ------------------------------------------------------------------------- */
/* RESET
/* ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body, div, span, h1, h2, h3, h4, h5, h6, p,
address, em, img, strong, i, dl, dt, dd, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, figure, button, input, select {
  margin: 0; padding: 0; border: 0; word-break: break-all;
}

:lang(ko) { word-break: keep-all; }
ul, li { list-style: none; }
ul, li a { display: block; }
a { text-decoration: none; color: inherit; }
em, address { font-style: normal; }
h1, h2, h3, h4, h5, h6, strong { font-weight: normal; }
article, aside, figcaption, figure, footer, header, nav, section, main { display: block; }
table { border-collapse: collapse; border-spacing: 0; }

input, button, select, textarea { font: inherit; border: none; border-radius: 0; background-color: transparent; }

select { appearance: none; -webkit-appearance: none; -moz-appearance: none; }
button, select { cursor: pointer; }
textarea { resize: none; outline: none; }

a:focus, button:focus, input:focus,
textarea:focus, select:focus { outline: none; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible { outline: 2px dashed currentColor; }
input:focus-visible { outline-offset: 0.2rem; }

img, svg, video, canvas, audio, iframe { display: block; }
img, video { max-width: 100%; height: auto; }

html { font-size: 62.5%; }

body {
  font: 400 1.6rem/1.5 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', '돋움', dotum, AppleGothic, sans-serif;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fff;
  overflow-x: hidden;
  min-height: 100vh;
}


/* ------------------------------------------------------------------------- */
/* FONT
/* ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Pretendard';
  src: url(../fonts/PretendardVariable.woff2) format('woff2');
  font-weight: 100 900;
  font-style: normal; 
  font-display: swap;
}
@font-face {
  font-family: 'Arita';
  src: url(../fonts/AritaBuriKR-SemiBold.ttf) format('truetype');
  font-weight: 600;
  font-style: normal; 
  font-display: swap;
}
@font-face {
  font-family: 'Arita';
  src: url(../fonts/AritaBuriKR-Bold.ttf) format('truetype');
  font-weight: 700;
  font-style: normal; 
  font-display: swap;
}


/* ------------------------------------------------------------------------- */
/* TOKEN
/* ------------------------------------------------------------------------- */
:root {
  --WT: #ffffff;
  --WT-a40: rgba(255, 255, 255, 0.4);
  --WT-a30: rgba(255, 255, 255, 0.3);
  --WT-a20: rgba(255, 255, 255, 0.2);

  --BK: #000000;
  --BK-95: #131416;
  --BK-90: #1E2124;
  --BK-80: #33363D;
  --BK-70: #464C53;
  --BK-50: #6D7882;
  --BK-40: #8A949E;
  --BK-10: #E6E8EA;
  --BK-5: #F4F5F6;
  --BK-a50: rgba(0, 0, 0, 0.5);
  --BK-a40: rgba(0, 0, 0, 0.4);
  --BK-a30: rgba(0, 0, 0, 0.3);
  --BK-a10: rgba(0, 0, 0, 0.1);

  --primary: #00A28D;
  --GN-80: #4A7969;
  --GN-60: #68AA94;
  --GN-30: #BEDAD1;
  --GN-20: #DAE6E5;
  --GN-10: #F0F7F4; 
  
  --YL-10: #FFF3A3;
  --YL-30: #E5A900;

  /* btn more */
  --more-bg: rgba(255, 255, 255, 0.05);
  --more-bg-blur: blur(30px);
  --more-border: rgba(255, 255, 255, 0.35);
  --radius: 9999px;

  /* font */
  --Arita-tit: 600 6rem / 1.3  'Arita';
  --Arita-subtit: 600 4.8rem / 1.3  'Arita';
  --Arita-xl: 600 7.2rem / 1.2  'Arita';
  --Arita-xs: 600 1.8rem / 2.4rem 'Arita';

  --Pretendard-30-700: 700 3rem / 1.5 'Pretendard';
  --Pretendard-28-600: 600 2.8rem / 1.5 'Pretendard';
  --Pretendard-28-500: 500 2.8rem / 1.5 'Pretendard';
  --Pretendard-22-700: 700 2.2rem / 1.5 'Pretendard';
  --Pretendard-18-600: 600 1.8rem / 1.7 'Pretendard';
  --Pretendard-18-500: 500 1.8rem / 1.7 'Pretendard';
  --Pretendard-18-400: 400 1.8rem / 1.5 'Pretendard';
  --Pretendard-17-700: 700 1.7rem / 1.5 'Pretendard';
  --Pretendard-17-600: 600 1.7rem / 1.5 'Pretendard';
  --Pretendard-17-500: 500 1.7rem / 1.5 'Pretendard';
  --Pretendard-17-400: 400 1.7rem / 1.5 'Pretendard';
  --Pretendard-16-600: 600 1.6rem / 1.5 'Pretendard';
  --Pretendard-16-400: 400 1.6rem / 1.5 'Pretendard';
  --Pretendard-15: 500 1.5rem / 1.5 'Pretendard';
  --Pretendard-14: 500 1.4rem / 1.5 'Pretendard';

  /* components */
  --inner-120: 0 12rem;
  --table-border: #DDDFE1;
  --border: #E3E5E7;
  --digi-bg: #111836;
  --label-bg : #245E53;
}


body.noScroll {overflow: hidden;}
.soundOnly {
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  border: 0 !important;
  position: absolute !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  clip: rect(0, 0, 0, 0) !important;
}
.ellipsis {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.ellipsis-2 {overflow: hidden; 
  display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

/* flex utility */
.fxBtween {display: flex; align-items: center; justify-content: space-between;}
.fxStart {display: flex; align-items: flex-start;}
.fxEndBtween {width: 100%; display: flex; align-items: flex-end; justify-content: space-between;}
.fxColStart {display: flex; flex-direction: column; align-items: flex-start;}



/* ------------------------------------------------------------------------- */
/* COMMON
/* ------------------------------------------------------------------------- */
#wrap { width: 100%; min-height: 100dvh; overflow: hidden; position: relative; }
/* .inner { width: 100%; padding: var(--inner-120);} */
.inner { 
  max-width: 192rem; width: 100%;  
  padding: var(--inner-120); margin: auto;
}


/*------ header -----*/
#header { 
  width: 100%; height: 11.2rem; 
  position: fixed; inset: 0; z-index: 100;
  transition: transform 0.4s ease, backdrop-filter 0.2s ease;
  backdrop-filter: none;
}

/* 헤더 기본 상태 */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

/* 메뉴 펼침 배경 */
#header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #fff;
    transition: height 0.3s ease;
    z-index: -1;
}


.xzoom-img {
    width: 100%;
    aspect-ratio: 337 / 224;
    object-fit: cover;
    display: block;
}

/* PC에서 마우스 오버 시 배경 확장 */
@media (min-width: 768px) {
    #header:hover::before {
        height: 42rem;
    }
}

/* 펼쳐진 메뉴와 본문 사이의 전체 분리선 */
#header .gnb::after {
    content: "";
    position: absolute;
    top: 37rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    border-bottom: 1px solid #d6d6d6;
    opacity: 0;
    pointer-events: none;
}

/* 메뉴에 마우스가 올라갔을 때 분리선 표시 */
@media (min-width: 768px) {
    #header:hover .gnb::after {
        opacity: 1;
    }
}


#header.hidden {transform: translateY(-100%);}
#header.is-blur {
  backdrop-filter: blur(10px);
  background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.3) 0%,
transparent 100%
);
}
#header .inner {height: 100%;}
nav.gnb {
  width: 100%; height: 100%;
  font: var(--Pretendard-18-600); color: var(--WT); 
  transition: color 0.2s ease;
}
nav.gnb ul li {transition: color 0.2s ease;}
nav.gnb ul.dep1 {height: 100%; display: flex; align-items: center; justify-content: space-between;}
nav.gnb ul.dep1 > li {
  max-width: 17rem; width: 100%; height: 100%; padding-block: 0.8rem;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
nav.gnb ul.dep1 > li  a {
  display: block; 
  width: 100%; height: 100%; 
  display: flex; align-items: center; justify-content: center;
}
nav.gnb ul.dep1 li .gnb-logo img {max-width: 12.4rem; transition: filter 0.2s ease;}
nav.gnb ul.dep1 li.gnb-util {display: flex; align-items: center; gap: 0.8rem; flex-direction: row;}
nav.gnb ul.dep1 li.gnb-util button{
  width: 4.4rem; height: 4.4rem;
  background-repeat: no-repeat; background-position: center;
}
nav.gnb ul.dep1 li.gnb-util .search {background-image: url(../img/ico_search.svg);}
nav.gnb ul.dep1 li.gnb-util .allMenu {background-image: url(../img/ico_allMenu.svg);}


/* 1차 메뉴 중앙 정렬 */
#header .gnb > .dep1 {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 검색 + 삼선 버튼을 gnb 오른쪽으로 */
#header .gnb > .dep1 > .gnb-util {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* dep2 */
nav.gnb ul.dep2 {
  display: flex; align-items: center;
  flex-direction: column; gap: 2rem; 
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  white-space: nowrap; background-color: transparent;
  height: 0; overflow: hidden; opacity: 0; visibility: hidden;
  transition: height 0.7s ease, opacity 0.2s ease 0.2s, visibility 0.3s ease 0.2s;
}
#header nav.gnb ul.dep2 li {
  width: 100%;
  font: var(--Pretendard-16-600); text-align: center; 
  color: transparent; transition: color 0.1s ease;
}
#header nav.gnb ul.dep2 li > a {padding-block: 0;}

/* 헤더 컬러 모드 */
#header.is-BK nav.gnb { color: var(--BK); }
#header.is-WT nav.gnb { color: var(--WT); }

#header.is-WT nav.gnb .gnb-logo img,
#header.is-WT nav.gnb ul li.gnb-util button.search,
#header.is-WT nav.gnb ul li.gnb-util button.allMenu {filter: invert(0);}

#header.is-BK nav.gnb .gnb-logo img,
#header.is-BK nav.gnb ul li.gnb-util button.search,
#header.is-BK nav.gnb ul li.gnb-util button.allMenu,

#header:hover nav.gnb .gnb-logo img,
#header:hover nav.gnb ul li.gnb-util button.search,
#header:hover nav.gnb ul li.gnb-util button.allMenu {filter: invert(1);}

#header::before { content: ''; display: inline-block;
  width: 100%; height: 0;
  position: absolute; inset: 0; top: 0rem; z-index: 0;
  background-color: var(--WT);
  transition: height 0.5s ease, background-color 0.3s ease;
}


#header::after {content: ''; display: block;
  width: 100%; height: 1px;
  /* background-color: transparent; 
  opacity: 0; */
  background-color: var(--BK-10);
  opacity: 1;
  position: absolute; left: 0; top: 11.2rem;
  transition: background-color 0.2s ease, opacity 0.3s ease;
}

/* 메인 화면: 기존처럼 hover할 때만 표시 */
#header.is-WT::after {
    background-color: transparent;
    opacity: 0;
}
#header.is-WT:hover::after {
    background-color: var(--BK-10);
    opacity: 1;
}

#header:hover::before {height: 37rem; background-color: var(--WT);}
#header:hover::after {background-color: var(--BK-10); opacity: 1;}
#header:hover nav.gnb ul li {color: var(--BK-95);}
#header:hover nav.gnb ul.dep2 {
  width: 100%; 
  height: 25.8rem; 
  padding-block: 3.2rem;
  border-top: 2px solid transparent;
  opacity: 1; visibility: visible;
}
#header nav.gnb ul.dep1 li:hover ul.dep2,
#header nav.gnb ul.dep2:hover {background-color: var(--BK-5); border-color: var(--primary);}
#header:hover nav.gnb ul.dep2 li:hover {color: var(--primary);}



/*------ footer -----*/
footer {width: 100%; height: 13rem; border-top: 1px solid var(--border);}
footer .inner {height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem;}
footer .ft-cont {display: flex; align-items: center; gap: 6rem;}
footer .ft-cont .ft-logo {max-width: 13.2rem; filter: invert(1);}
footer .ft-cont .ft-nav ul {
  display: flex; align-items: center; gap: 2.4rem;
  font: var(--Pretendard-15); color: var(--BK-80);
}
footer .ft-cont .ft-nav ul li {display: flex; align-items: center; position: relative; white-space: nowrap;}
footer .ft-cont .ft-nav ul li:not(:last-child)::after {content: ''; 
  display: inline-block;
  width: 1px; height: 1.4rem;
  background-color: var(--BK-40);
  position: absolute; right: -1.2rem; 
}
footer .ft-cont .copyright {font: var(--Pretendard-14); color: var(--BK-80);}
footer .ft-org {display: flex; align-items: center; justify-content: center; gap: 2.4rem;}

@media (max-width: 1800px) {
  footer .ft-cont.drop {flex-direction: column; gap: 2rem; align-items: flex-start;}
}

/*------ section -----*/
.sec {padding: 8rem 0;} /*16rem*/
.sec-item {display: flex; align-items: flex-start; gap: 6rem;}
.sec-item + .sec-item {margin-top: 12rem;}
.sec-head {display: flex; align-items: flex-end; justify-content: space-between; flex: 1;}
.sec-head.center {justify-content: center;}
.sec-head.fxStart {align-items: center; justify-content: flex-start; gap: 5rem;}
.sec-head.ty-col {flex-direction: column; align-items: flex-start; gap: 4rem;}
.sec-con > .sec-head { margin-bottom: 5rem; }

.sec-tit, .sec-tit2 {
  font: var(--Arita-tit); color: var(--BK-90);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.sec-tit2 {font: var(--Arita-subtit);}
.sub-tit {font: var(--Pretendard-28-600);}
.sub-tit2 {font: var(--Pretendard-22-700);}
.sec-label {font: var(--Arita-xs); color: var(--GN-10);}
.desc {font: var(--Pretendard-18-400); color: var(--GN-10);}
.desc span {  -webkit-box-decoration-break: clone; box-decoration-break: clone;}

/* WT text */
.sec-tit.WT,
.sub-tit2.WT {color: var(--WT);}



/* ------------------------------------------------------------------------- */
/* BUTTON
/* ------------------------------------------------------------------------- */
button, input, textarea {font: var(--Pretendard-18-500); letter-spacing: -0.02em;} 

/* 바로가기 */
.btn.more {
  min-height: 5.7rem;
  padding: 1.5rem 3rem; margin-top: 5rem;
  display: inline-flex; align-items: center; flex-shrink: 0;
  background-color: var(--more-bg); backdrop-filter: var(--more-bg-blur);
  border: 1px solid var(--more-border); border-radius: var(--radius);
  color: var(--WT);
  transition: background-color 0.3s ease, color 0.3s ease; 
}
.btn.more::after{content: ''; display: inline-block;
  width: 0; height: 2.4rem; overflow: hidden;
  mask: url(../img/ico_outLink.svg) no-repeat center / contain;
  -webkit-mask: url(../img/ico_outLink.svg) no-repeat center / contain;
  background-color: var(--primary); opacity: 0;
  transition: width 0.3s ease, opacity 0.1s linear;
}
.btn.more:hover {background-color: var(--WT); color: var(--primary); gap: 1rem;}
.btn.more:hover::after {width: 2.4rem; opacity: 1;}

/* ty2 */
.btn.more.ty2:hover {color: var(--BK-80);}
.btn.more.ty2:hover::after {background-color: var(--BK-80); color: var(--BK-80);}

/* BK */
.btn.more.BK {color: var(--BK-90); font: var(--Pretendard-18-500); background-color: rgba(0, 0, 0, 0.05);}
.btn.more.BK:hover {font: var(--Pretendard-18-500);background-color: var(--WT); color: var(--primary);}

/* 화살표 바로가기 */
.ico {
  min-width: 5.2rem; height: 5.2rem;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--WT); border: 1px solid transparent; border-radius: var(--radius);
  background-repeat: no-repeat; background-position: center;
  transition: background-color 0.2s ease, border-color 0.3s linear, color 0.2s ease;
}
.ico.link {border-color: var(--border); background-image: url(../img/ico_outLink.svg);}
.ico.link:hover {border-color: var(--BK-80);}



/* ------------------------------------------------------------------------- */
/* TABLE
/* ------------------------------------------------------------------------- */
table {width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0;}
th, td {padding: 0; text-align: left; vertical-align: middle;}
th {font-weight: normal;}

.tbl table th, .tbl table td {height: 7.3rem; padding: 0.6rem;}
.tbl table td {
  font: var(--Pretendard-18-500); color: var(--BK-90); letter-spacing: -0.02em;
  transition: background-color 0.3s linear;
}

/* 정렬 */
.tbl table td.tar {text-align: right;}
.tbl table td.tac {text-align: center;}

/* list 타입 */
.tbl.list table td {border: 1px solid var(--table-border); border-left: 0; border-right: 0;}
.tbl.list table td.day {font: var(--Pretendard-17-400); color: var(--BK-50); white-space: nowrap;}

/* hover, 링크(임의) */
.tbl.list table tbody tr:has(a):hover td {background-color: #f0f7f463; cursor: pointer;}
.tbl.list table tbody tr:has(a):hover td a {text-decoration: underline; text-underline-offset: 3px;}

/* 말줄임 */
.tbl table .ellipsis {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}


/* ------------------------------------------------------------------------- */
/* TAB
/* ------------------------------------------------------------------------- */
.tab {display: flex; align-items: center; justify-content: center; gap: 1rem;}
.tab .tab-menu {
  /*height: 5.2rem;
  height: 7.2rem;*/
  height: 6.0rem;
  padding: 1.6rem 2.9rem; /*padding: 1.4rem 2.4rem;*/
  border: 1px solid var(--BK-a10); border-radius: var(--radius);
  background-color: var(--WT); color: var(--BK-80);
  font: var(--Pretendard-17-700);
  transition: background-color 0.2s linear, border 0.2s ease, color 0.2s linear;
} /*width:7.2rem ;*/
.tab .tab-menu.active {background: var(--BK-90); color: var(--WT);}
.tab .tab-menu.link {background-image: url(../img/ico_outLink.svg); background-repeat: no-repeat; background-position: center;}
.tab .tab-menu:hover {border-color: var(--BK-90);}

/* 탭 패널 */
[data-tab-panel] { position: absolute; visibility: hidden; pointer-events: none;}
[data-tab-panel].active { position: relative; visibility: visible; pointer-events: auto;}

/* 탭 > 텍스트박스 */
.tab-text {
  margin-top: 2.4rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem;
}
.tab-text h4 {
  width: 100%; 
  font: var(--Pretendard-22-700); color: var(--BK-95); letter-spacing: 0.03em; 
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 
}
.tab-text p {font: var(--Pretendard-18-400); color: var(--BK-70);}
.tab-text .day {font: var(--Pretendard-17-400); color: var(--BK-40);}


/*---- 탭 > 스와이퍼 버튼 ----*/
.swiper-controls.tcon {
  width: 100%; 
  position: absolute; z-index: 10;
  top: 50%; transform: translateY(-50%); left: -2%;
  opacity: 0; transition: opacity 0.3s ease;
}

.swiper-controls.tcon .sw-btns {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.swiper-controls.tcon .sw-btns button {
  width: 5.2rem; height: 5.2rem;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--WT-a40); backdrop-filter: blur(4px);
  border-radius: var(--radius); border: 1px solid transparent;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s ease, filter 0.2s ease;
}
.swiper-controls.tcon .sw-btns .swiper-next {position: absolute; right: -8%;}
.swiper-controls.tcon .sw-btns button::before {
  content: ''; display: block;
  width: 2.6rem; height: 2.6rem;
  mask-repeat: no-repeat; mask-position: center; mask-size: contain;
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
  background-color: var(--BK-90);
}
.swiper-controls.tcon .sw-btns .swiper-prev::before {
  mask-image: url(../img/ico_prev_BK.svg); 
  -webkit-mask-image: url(../img/ico_prev_BK.svg);
}
.swiper-controls.tcon .sw-btns .swiper-next::before {
  mask-image: url(../img/ico_next_BK.svg); 
  -webkit-mask-image: url(../img/ico_next_BK.svg);
}

/* state */
.tab-contents:hover .swiper-controls.tcon {opacity: 1;}

.swiper-controls.tcon .sw-btns button:hover,
.swiper-controls.tcon .sw-btns button:active {border-color: var(--WT); filter: brightness(1.1);}

.swiper-controls.tcon .sw-btns button:disabled,
.swiper-controls.tcon .sw-btns button:disabled:hover,
.swiper-controls.tcon .sw-btns button:disabled:active {
  filter: none;  backdrop-filter: blur(10px); 
  border-color: transparent; 
  opacity: 0.7; cursor: not-allowed; pointer-events: none;
}


/* ------------------------------------------------------------------------- */
/* swiper
/* ------------------------------------------------------------------------- */
.swiper-slide:hover {cursor: pointer;}




/* =========================
   collection
========================= */

.sec.collection {position: relative;}
.sec.collection .inner {display: flex;align-items: flex-start;}
.sec.collection .sec-head {flex: 0 0 auto;}
.sec.collection .sec-tit {margin: 0;}
/*.sec.collection .sw-collec {overflow: hidden;}*/
.sec.collection .sw-collec {
  flex: 1 1 auto;
  min-width: 0;
}
.sec.collection .swiper-wrapper {display: flex;}
.sec.collection .swiper-slide {box-sizing: border-box;}

/* PC */
#header.is-BK nav.gnb {color: var(--BK);}
#header.is-WT nav.gnb {color: var(--WT);}
#header.is-WT nav.gnb .gnb-logo img,
#header.is-WT nav.gnb ul li.gnb-util button.search,
#header.is-WT nav.gnb ul li.gnb-util button.allMenu {filter: invert(0);}
#header.is-BK nav.gnb .gnb-logo img,
#header.is-BK nav.gnb ul li.gnb-util button.search,
#header.is-BK nav.gnb ul li.gnb-util button.allMenu,
#header:hover nav.gnb .gnb-logo img,
#header:hover nav.gnb ul li.gnb-util button.search,
#header:hover nav.gnb ul li.gnb-util button.allMenu {filter: invert(1);}


















/* =========================
   모바일
========================= */
@media (max-width: 767px) {
 .sec.curation { padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; }
  /* sec-tit : 한 줄 */
 .sec.curation .sec-head { width: 100%; margin-bottom: 3rem; }
 .sec.curation .sec-tit { white-space: nowrap; width: 100%;  }
 .mo { display: block;}
  /* 탭 영역 */
 /* 큐레이션 탭 버튼 */
 .sec.curation .tab[data-tab="curation"] {display: grid;grid-template-columns: repeat(3, 1fr);gap: 1rem;width: 100%;overflow: visible;}
/* 일반 탭 버튼 + 바로가기 버튼 */
 .sec.curation .tab[data-tab="curation"] .tab-menu {width: 100%;min-width: 0; white-space: nowrap;box-sizing: border-box;}
/* 바로가기 버튼 */
 .sec.curation .tab[data-tab="curation"] .tab-menu.link {display: flex;align-items: center;justify-content: center;width: 100%;}
	  /* 바로가기 버튼 */
 .sec.curation .tab[data-tab="curation"] .tab-menu.link {flex: 0 0 auto;  }
  /* ====== marquee ========= */
 .sec.curation .marquee-wrap {width: 100%;overflow: hidden;}
 .sec.curation .marquee {display: flex;flex-wrap: nowrap;width: max-content;}
 .sec.curation .marquee-item {flex: 0 0 70vw;width: 70vw;box-sizing: border-box;}

.sec.collection .inner {display: block;width: auto;margin-left: 16px;margin-right: 16px;padding-left: 0;padding-right: 0;}
.sec.collection .sec-head {margin-bottom: 20px;}
.sec.collection .sw-collec {width: 100%;overflow: hidden;}
.sec.collection .swiper-wrapper {display: flex;flex-direction: column;width: 100%;transform: none !important;}
.sec.collection .swiper-slide {display: block;width: 100% !important;height: auto !important;margin: 0 0 20px 0 !important;flex: 0 0 auto;}
.sec.collection .swiper-slide img {display: block;width: 100%;height: 180px;object-fit: cover;}
.sec.collection .swiper-slide .sub-tit {margin: 8px 0 0;text-align: center;font-size: 25px;line-height: 1.4;word-break: keep-all;}
.sec.collection .swiper-slide:last-child {margin-bottom: 0 !important;}
.sec.collection .swiper-controls-collec {display: block;}


/* ==== curation2 ========= */
/* 제목 1줄 */
.sec.curation2 .sec-tit2 {white-space: nowrap;word-break: keep-all;}
/* 탭 전체 1줄 */
.sec.curation2 .tab {display: flex;flex-wrap: nowrap;align-items: center;width: 100%;}
/* 탭 3개 */
.sec.curation2 .tab .tab-menu {flex: 1 1 0;min-width: 0;white-space: nowrap;text-align: center;}
/* 마지막 바로가기 */
.sec.curation2 .tab .tab-menu.link {flex: 0 0 auto;width: 44px;}

/* =========================================
   Swiper
   1줄에 1개 표시
   ========================================= */
.sec.curation2 .sw-item {width: 100%;overflow: hidden;}
.sec.curation2 .sw-item .swiper-wrapper {display: flex;}
.sec.curation2 .sw-item .swiper-slide {flex: 0 0 100%;width: 100% !important;box-sizing: border-box;}

/* 이미지 */
.sec.curation2 .sw-item .swiper-slide img {display: block;width: 100%;height: auto;}


.sec.curation2 .inner {padding-left: 20px;padding-right: 20px;}
.sec.curation2 .sec-con {width: 100%;padding-left: 0;padding-right: 0;}
.sec.curation2 .sec-item {width: 100%;min-width: 0;display: flex;flex-direction: column;}
.sec.curation2 .sec-tit2 {width: 100%;margin: 0;padding: 0;white-space: nowrap;word-break: keep-all;}
	.sec.curation2 .tab {display: grid;grid-template-columns: repeat(3, 1fr);gap: 0.8rem;align-items: center;width: 100%;min-width: 0;}
.sec.curation2 .tab .tab-menu {width: 100%;min-width: 0;height: 7.2rem;padding: 1.4rem 1.2rem;box-sizing: border-box;white-space: nowrap;text-align: center;}
.sec.curation2 .tab .tab-menu.link {width: 100%;min-width: 0;}

/* 핵심 */
.sec.curation2 .tab-contents {display: block;width: 100% !important;min-width: 0 !important;flex: 0 0 auto;overflow: hidden;}
.sec.curation2 .tab-con {width: 100% !important;min-width: 0 !important;overflow: hidden;}
.sec.curation2 .sw-item {display: block;width: 100% !important;min-width: 0 !important;height: auto;overflow: hidden;}
.sec.curation2 .sw-item .swiper-slide img {display: block;width: 100%;height: auto;}

.sec.noti-sns .inner {width: 100%;padding: 0 2rem;box-sizing: border-box;}
.sec.noti-sns .sec-con.notice {width: 100%;}
.sec.noti-sns .sec-head {display: flex;align-items: center;justify-content: space-between;margin-bottom: 1.6rem;}
.sec.noti-sns .sec-tit2 {margin: 0;}
.sec.noti-sns .tbl {width: 100%;}
.sec.noti-sns .tbl table {width: 100%;table-layout: fixed;}
.sec.noti-sns .tbl col:first-child {width: calc(100% - 9rem) !important;}
.sec.noti-sns .tbl col:last-child {width: 9rem !important;}
.sec.noti-sns .tbl td {padding: 1.2rem 0;box-sizing: border-box;vertical-align: middle;}
.sec.noti-sns .tbl td:first-child {padding-right: 1rem;}
.sec.noti-sns .tbl td:last-child {white-space: nowrap;text-align: right;}
.sec.noti-sns .tbl .go {display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.sec.noti-sns .tbl .day {font-size: 1.3rem;}
	.sec.noti-sns .sec-con.sns {display: none;}
.sec.noti-sns .sec-con.notice {width: 100%;}

footer {width: 100%;height: auto;min-height: 34rem;}
footer .inner {width: 100%;height: auto;padding: 3rem 2rem;box-sizing: border-box;display: block;}
/* 메인 로고 */
footer .ft-cont {display: block;width: 100%;}
footer .ft-cont .ft-logo {display: block;width: 10rem;max-width: 10rem;height: auto;margin: 0 auto 2.4rem;}
/* 메뉴 영역 */
footer .ft-cont.drop {display: block;width: 100%;}
footer .ft-nav {width: 100%;}
/* PC의 display:flex, gap:3.4rem을 모바일에서 제거 */
	footer .ft-cont .ft-nav ul {display: flex !important;flex-wrap: wrap;justify-content: center;align-items: center;width: 100%;margin: 0;padding: 0;column-gap: 1.2rem;row-gap: 0.2rem;list-style: none;}
footer .ft-cont .ft-nav li {display: block;width: auto;margin: 0;padding: 0;text-align: center;border: 0 !important;}
footer .ft-cont .ft-nav li::before,
footer .ft-cont .ft-nav li::after {display: none !important;content: none !important;}
footer .ft-cont .ft-nav a {display: block;width: auto;padding: 0.1rem 0;white-space: nowrap;text-align: center;border: 0 !important;}
/* 3번째 메뉴 뒤에서 줄바꿈 */
footer .ft-cont .ft-nav li:nth-child(3)::after {content: "" !important;display: block !important;}
/* 저작권 */
footer .copyright {display: block;width: 100%;margin-top: 2rem;text-align: center;font-size: 1.1rem;line-height: 1.7;}
/* 기관 로고 */
footer .ft-org {display: flex !important;justify-content: center;align-items: center;gap: 1.5rem;width: 100%;margin-top: 2.8rem;}
footer .ft-org a {display: block !important;flex: 0 0 auto;}
footer .ft-org img {display: block !important;width: auto;max-width: 7rem;height: auto;}

/* =========================================================
   MOBILE HEADER
   ========================================================= */
#header {position: fixed;top: 0;left: 0;width: 100%;height: 64px;z-index: 1000;/*background: #fff;*/box-sizing: border-box;}
#header .inner {width: 100%;height: 100%;padding: 0 20px;box-sizing: border-box;}
#header .gnb {width: 100%;height: 100%;}
#header .gnb > .dep1 {display: flex;align-items: center;justify-content: space-between;width: 100%;height: 100%;margin: 0;padding: 0;}
#header .gnb-logo-wrap {display: block;order: 1;margin: 0;}
#header .gnb-logo {margin: 0;padding: 0;width: auto;height: 55px;line-height: 0;}
#header .gnb-logo a {display: block;height: 55px;line-height: 0;}
#header .gnb-logo img {display: block;width: auto;height: 55px;max-width: 180px;}
#header .gnb > .dep1 > li:not(.gnb-logo-wrap):not(.gnb-util) {display: none;}
#header .gnb-util {display: flex !important;align-items: center;gap: 14px;margin: 0 0 0 auto;padding: 0;order: 2;}
#header .gnb-util .util {position: relative;display: block;width: 24px;height: 24px;margin: 0;padding: 0;border: 0;background: none;cursor: pointer;}
#header .gnb-util .search {width: 24px;height: 24px;}
#header .gnb-util .search::before {content: "";position: absolute;left: 3px;top: 3px;width: 13px;height: 13px;border: 2px solid #111;border-radius: 50%;box-sizing: border-box;}
#header .gnb-util .search::after {content: "";position: absolute;width: 8px;height: 2px;background: #111;right: 2px;bottom: 5px;transform: rotate(45deg);transform-origin: right center;}
#header .gnb-util .allMenu {width: 24px;height: 24px;}
#header .gnb-util .allMenu::before,
#header .gnb-util .allMenu::after {content: "";position: absolute;left: 2px;width: 20px;height: 2px;background: #111;}
#header .gnb-util .allMenu::before {top: 6px;box-shadow: 0 6px 0 #111, 0 12px 0 #111;}
#header .gnb-util .soundOnly {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}
#header .dep2 {display: none !important;}

#header.is-WT .gnb-util .search::before {border-color: #111 !important;}
#header.is-WT .gnb-util .search::after {background-color: #111 !important;}
#header.is-WT .gnb-util .allMenu::before {background-color: #111 !important;box-shadow:0 6px 0 #111,0 12px 0 #111 !important;}

/* #header {background: #fff !important;} */
#header nav.gnb {color: #111 !important;}
#header nav.gnb .gnb-logo img {filter: invert(1) !important;}
#header nav.gnb ul li.gnb-util button.search,
#header nav.gnb ul li.gnb-util button.allMenu {filter: none !important;opacity: 1 !important;}
#header .gnb-util .search::before {border-color: #111 !important;}
#header .gnb-util .search::after {background-color: #111 !important;}
#header .gnb-util .allMenu::before {background-color: #111 !important;box-shadow:0 6px 0 #111,0 12px 0 #111 !important;}
#header:hover nav.gnb .gnb-logo img {filter: invert(1) !important;}
#header:hover nav.gnb ul li.gnb-util button.search,
#header:hover nav.gnb ul li.gnb-util button.allMenu {filter: none !important;}

/* =========================================================
   MOBILE MENU
   ========================================================= */
/* 메뉴 열림 상태 */
#header.mobile-menu-open {height: 100vh;background: #fff !important;}
#header.mobile-menu-open .gnb {height: 100%;}
#header.mobile-menu-open .gnb > .dep1 {display: block;height: auto;padding-top: 80px;}
/* 기존 로고/유틸 위치 */
#header.mobile-menu-open .gnb-logo-wrap {display: none !important;}
#header.mobile-menu-open .gnb-util {position: absolute;top: 20px;right: 20px;display: flex !important;}
/* ---------------------------------
   1차 메뉴
   --------------------------------- */
#header.mobile-menu-open .gnb > .dep1 > li {display: block !important;width: 100%;margin: 0;padding: 0 20px;box-sizing: border-box;}
#header.mobile-menu-open .gnb > .dep1 > li > a {display: block;padding: 18px 0;border-bottom: 1px solid #ddd;color: #111 !important;font-size: 20px;font-weight: 600;text-decoration: none;}
/* ---------------------------------
   2차 메뉴
   --------------------------------- */
#header.mobile-menu-open .gnb .dep2 {display: none !important;position: static;width: 100%;margin: 0;padding: 8px 0;background: #f7f7f7;}
#header.mobile-menu-open .gnb > .dep1 > li.menu-open .dep2 {display: block !important;}
#header.mobile-menu-open .gnb .dep2 li {display: block;width: 100%;}
#header.mobile-menu-open .gnb .dep2 li a {display: block;padding: 12px 20px;color: #333 !important;font-size: 15px;text-decoration: none;}
/* ---------------------------------
   디지털처럼 2차 메뉴가 없는 메뉴
   --------------------------------- */
#header.mobile-menu-open .gnb > .dep1 > li.gnb-logo-wrap {display: none !important;}

}


@media (max-width: 767px) {
    nav.gnb ul.dep1 > li {
        width: auto;
    }

    nav.gnb ul.dep1 > li a {
        width: auto;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


@media (max-width: 767px) {

    /* 메뉴 열림 */
    #header.mobile-menu-openxx,
    #header2.mobile-menu-openxx {
        height: 100vh;
        background: #fff !important;
    }

    #header.mobile-menu-open .gnb,
    #header2.mobile-menu-open .gnb2 {
        width: 100%;
        height: 100%;
    }

    /* 메뉴 영역 */
    #header.mobile-menu-open .gnb > .dep1,
    #header2.mobile-menu-open .gnb2 > .dep1 {
        display: block;
        width: 100%;
        height: 100%;
        padding-top: 80px;
        box-sizing: border-box;
    }

    /* 로고 숨김 */
    #header.mobile-menu-open .gnb-logo-wrap,
    #header2.mobile-menu-open .gnb-logo-wrap {
        display: none !important;
    }

    /* 검색 + 삼색선 */
    #header.mobile-menu-open .gnb-util,
    #header2.mobile-menu-open .gnb-util {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 10;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        width: auto;
        height: 24px;
        margin: 0;
        padding: 0;
    }

    /* 1차 메뉴 */
    #header.mobile-menu-open .gnb > .dep1 > li:not(.gnb-util),
    #header2.mobile-menu-open .gnb2 > .dep1 > li:not(.gnb-util) {
        display: block !important;
        width: 100%;
        margin: 0;
        padding: 0 20px;
        box-sizing: border-box;
    }

    /* 1차 메뉴 링크 */
    #header.mobile-menu-open .gnb > .dep1 > li > a,
    #header2.mobile-menu-open .gnb2 > .dep1 > li > a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: auto;
        padding: 18px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
        color: #111 !important;
        font-size: 20px;
        font-weight: 600;
        text-decoration: none;
    }

    /* 2차 메뉴 */
    #header.mobile-menu-open .gnb .dep2,
    #header2.mobile-menu-open .gnb2 .dep2 {
        display: none !important;
        position: static;
        width: 100%;
        margin: 0;
        padding: 8px 0;
        background: #f7f7f7;
    }

    /* 2차 메뉴 열림 */
    #header.mobile-menu-open .gnb > .dep1 > li.menu-open .dep2,
    #header2.mobile-menu-open .gnb2 > .dep1 > li.menu-open .dep2 {
        display: block !important;
    }

    /* 2차 메뉴 링크 */
    #header.mobile-menu-open .gnb .dep2 li a,
    #header2.mobile-menu-open .gnb2 .dep2 li a {
        display: block;
        width: 100%;
        padding: 12px 20px;
        box-sizing: border-box;
        color: #333 !important;
        font-size: 15px;
        text-decoration: none;
    }
}



@media (max-width: 767px) {

    /* 메뉴가 열렸을 때 */
    #header.mobile-menu-open {
        height: 100vh;
        background: #fff !important;
    }

    #header.mobile-menu-open .gnb {
        height: 100%;
    }

    /* dep1 전체 */
    #header.mobile-menu-open .gnb > .dep1 {
        display: block !important;
        width: 100%;
        height: auto;
        padding: 84px 0 30px;
        margin: 0;
        box-sizing: border-box;
    }

    /* 로고는 모바일 메뉴에서 숨김 */
    #header.mobile-menu-open .gnb > .dep1 > .gnb-logo-wrap {
        display: none !important;
    }

    /* 검색/삼색선은 상단 오른쪽에 고정 */
    #header.mobile-menu-open .gnb > .dep1 > .gnb-util {
        position: absolute;
        top: 20px;
        right: 20px;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        width: auto !important;
        height: 24px;
        margin: 0;
        padding: 0;
        z-index: 20;
    }

    /* 실제 메뉴 1차 li */
    #header.mobile-menu-open .gnb > .dep1 > li:not(.gnb-logo-wrap):not(.gnb-util) {
        display: block !important;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0 20px;
        box-sizing: border-box;
    }

    /* 1차 메뉴 링크 */
    #header.mobile-menu-open .gnb > .dep1 > li:not(.gnb-logo-wrap):not(.gnb-util) > a {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        width: 100% !important;
        height: auto !important;
        min-height: 56px;
        padding: 16px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
        color: #111 !important;
        font-size: 20px;
        font-weight: 600;
        text-decoration: none;
    }

    /* 2차 메뉴는 기본 숨김 */
    #header.mobile-menu-open .gnb > .dep1 > li > .dep2 {
        display: none !important;
        position: static;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 8px 0;
        background: #f7f7f7;
        box-sizing: border-box;
    }

    /* 1차 메뉴 클릭 시 2차 메뉴 */
    #header.mobile-menu-open .gnb > .dep1 > li.menu-open > .dep2 {
        display: block !important;
    }

    /* 2차 메뉴 */
    #header.mobile-menu-open .gnb > .dep1 > li > .dep2 > li {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
    }

    #header.mobile-menu-open .gnb > .dep1 > li > .dep2 > li > a {
        display: block;
        width: 100%;
        height: auto;
        padding: 12px 20px;
        box-sizing: border-box;
        color: #333 !important;
        font-size: 15px;
        text-decoration: none;
    }
}

@media (max-width: 767px) {

    /* 모바일에서는 마우스 hover로 메뉴가 펼쳐지지 않도록 */
    #header:hover,
    #header2:hover {
        height: 64px;
    }

    #header:hover .gnb > .dep1,
    #header2:hover .gnb2 > .dep1 {
        height: 100%;
    }

    /* 클릭해서 mobile-menu-open이 붙었을 때만 메뉴 표시 */
    #header:not(.mobile-menu-open) .gnb > .dep1 > li:not(.gnb-logo-wrap):not(.gnb-util),
    #header2:not(.mobile-menu-open) .gnb2 > .dep1 > li:not(.gnb-logo-wrap):not(.gnb-util) {
        display: none !important;
    }

}


@media (max-width: 767px) {

    /* =========================================================
       모바일에서는 PC hover 메뉴 기능 완전히 차단
       ========================================================= */

    #header:hover,
    #header2:hover {
        height: 64px !important;
    }

    #header:hover::before,
    #header:hover::after,
    #header2:hover::before,
    #header2:hover::after {
        display: none !important;
    }

    #header:hover .gnb > .dep1,
    #header2:hover .gnb2 > .dep1 {
        height: 100% !important;
        max-height: none !important;
    }


    /* =========================================================
       닫힌 상태에서는 1차 메뉴 숨김
       ========================================================= */

    #header:not(.mobile-menu-open) .gnb > .dep1 > li:not(.gnb-logo-wrap):not(.gnb-util),
    #header2:not(.mobile-menu-open) .gnb2 > .dep1 > li:not(.gnb-logo-wrap):not(.gnb-util) {
        display: none !important;
    }


    /* =========================================================
       클릭해서 mobile-menu-open 되었을 때만 메뉴 표시
       ========================================================= */

    #header.mobile-menu-open .gnb > .dep1 > li:not(.gnb-logo-wrap):not(.gnb-util),
    #header2.mobile-menu-open .gnb2 > .dep1 > li:not(.gnb-logo-wrap):not(.gnb-util) {
        display: block !important;
    }

}


@media (max-width: 767px) {

    /* =====================================================
       모바일 메뉴 열림
       ===================================================== */

    #header.mobile-menu-open,
    #header2.mobile-menu-open {
        position: fixed;
        top: 0;
        left: 0;
        width: 80%;
        height: 100vh;
        z-index: 9999;
        background: #fff !important;
        box-sizing: border-box;
        overflow-y: auto;
        overflow-x: hidden;
    }


    /* 헤더 내부 */
    #header.mobile-menu-open .gnb,
    #header2.mobile-menu-open .gnb2 {
        width: 100%;
        height: auto;
    }


    /* 메뉴 전체 */
    #header.mobile-menu-open .gnb > .dep1,
    #header2.mobile-menu-open .gnb2 > .dep1 {
        display: block !important;
        width: 100%;
        height: auto;
        min-height: 100vh;
        padding: 84px 0 30px;
        margin: 0;
        box-sizing: border-box;
    }


    /* 로고 숨김 */
    #header.mobile-menu-open .gnb > .dep1 > .gnb-logo-wrap,
    #header2.mobile-menu-open .gnb2 > .dep1 > .gnb-logo-wrap {
        display: none !important;
    }


    /* 검색 + 삼색선 */
    #header.mobile-menu-open .gnb > .dep1 > .gnb-util,
    #header2.mobile-menu-open .gnb2 > .dep1 > .gnb-util {
        position: absolute;
        top: 20px;
        right: 20px;
        display: flex !important;
        width: auto !important;
        height: 24px;
        margin: 0;
        padding: 0;
        z-index: 10000;
    }


    /* 1차 메뉴 */
    #header.mobile-menu-open .gnb > .dep1 > li:not(.gnb-logo-wrap):not(.gnb-util),
    #header2.mobile-menu-open .gnb2 > .dep1 > li:not(.gnb-logo-wrap):not(.gnb-util) {
        display: block !important;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0 20px;
        box-sizing: border-box;
    }


    /* 메뉴 링크 */
    #header.mobile-menu-open .gnb > .dep1 > li:not(.gnb-logo-wrap):not(.gnb-util) > a,
    #header2.mobile-menu-open .gnb2 > .dep1 > li:not(.gnb-logo-wrap):not(.gnb-util) > a {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        width: 100% !important;
        height: auto !important;
        min-height: 56px;
        padding: 16px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
        color: #111 !important;
        font-size: 20px;
        font-weight: 600;
    }


    /* 2차 메뉴 */
    #header.mobile-menu-open .gnb .dep2,
    #header2.mobile-menu-open .gnb2 .dep2 {
        display: none !important;
        position: static;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 8px 0;
        background: #f7f7f7;
    }


    /* 2차 메뉴 열림 */
    #header.mobile-menu-open .gnb > .dep1 > li.menu-open > .dep2,
    #header2.mobile-menu-open .gnb2 > .dep1 > li.menu-open > .dep2 {
        display: block !important;
    }

}




/* =========================================================
   모바일 메뉴 : 헤더와 완전히 분리된 고정 레이어
========================================================= */

.mobile-menu {
    display: none;
}

@media (max-width: 767px) {

    .mobile-menu {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 99999;

        visibility: hidden;
        pointer-events: none;
    }

    /* 화면 전체 배경 */
    .mobile-menu-bg {
        position: absolute;
        inset: 0;

        background: rgba(0, 0, 0, .35);

        opacity: 0;
        transition: opacity .25s ease;
    }

    /* 실제 메뉴 */
    .mobile-menu-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: 80%;
        height: 100%;

        background: #fff;

        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        transform: translateX(-100%);
        transition: transform .3s ease;
    }

    /* 메뉴 열림 */
    .mobile-menu.is-open {
        visibility: visible;
        pointer-events: auto;
    }

    .mobile-menu.is-open .mobile-menu-bg {
        opacity: 1;
    }

    .mobile-menu.is-open .mobile-menu-panel {
        transform: translateX(0);
    }


    /* 메뉴 상단 */
    .mobile-menu-head {
        height: 7rem;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 0 2rem;
        border-bottom: 1px solid #eee;
    }

    .mobile-menu-logo img {
        display: block;
        width: 12rem;
        height: auto;
    }


    /* 닫기 버튼 */
    .mobile-menu-close {
        position: relative;

        width: 4rem;
        height: 4rem;

        padding: 0;
        border: 0;
        background: transparent;
    }

    .mobile-menu-close span {
        position: absolute;
        left: 50%;
        top: 50%;

        width: 2.2rem;
        height: 1px;

        background: #111;
    }

    .mobile-menu-close span:nth-child(1) {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .mobile-menu-close span:nth-child(2) {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .mobile-menu-close span:nth-child(3) {
        display: none;
    }


    /* 메뉴 */
    .mobile-menu-nav {
        padding: 2rem;
    }

    .mobile-menu-nav > ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mobile-menu-nav .dep1 {
        border-bottom: 1px solid #eee;
    }

    .mobile-menu-nav .dep1 > button,
    .mobile-menu-nav .dep1 > a {
        position: relative;

        display: flex;
        align-items: center;

        width: 100%;
        min-height: 6rem;

        padding: 0;

        border: 0;
        background: transparent;

        color: #111;
        font-size: 1.8rem;
        font-weight: 600;
        text-decoration: none;

        text-align: left;
    }


    /* + 버튼 */
    .mobile-menu-nav .dep1 > button::after {
        content: "+";

        position: absolute;
        right: 0;
        top: 50%;

        transform: translateY(-50%);

        font-size: 2.4rem;
        font-weight: 300;
    }

    /* 열렸을 때 - */
    .mobile-menu-nav .dep1.is-open > button::after {
        content: "−";
    }


    /* 2차 메뉴 */
    .mobile-menu-nav .dep2 {
        display: none;

        margin: 0;
        padding: 0 0 1.5rem;

        list-style: none;
    }

    .mobile-menu-nav .dep1.is-open .dep2 {
        display: block;
    }

    .mobile-menu-nav .dep2 li a {
        display: block;

        padding: 1rem 1rem;

        color: #555;
        font-size: 1.5rem;
        text-decoration: none;
    }


    /* 메뉴 열렸을 때 본문 스크롤 방지 */
    html.menu-open,
    body.menu-open {
        overflow: hidden;
    }
}

@media (max-width: 767px) {

    #header .gnb,
    #header2 .gnb2 {
        position: fixed;

        top: 0;
        left: 0;

        width: 80%;
        max-width: 300px;
        height: 100vh;

        background: #fff;

        z-index: 10000;

        overflow-y: auto;
        overflow-x: hidden;

        box-sizing: border-box;

        transform: translateX(-100%);
        transition: transform .3s ease;

        visibility: hidden;
    }


    /* 메뉴 열림 */
    #header.mobile-menu-open .gnb,
    #header2.mobile-menu-open .gnb2 {
        transform: translateX(0);

        visibility: visible;
    }


    /* 메뉴 내용 */
    #header.mobile-menu-open .gnb > .dep1,
    #header2.mobile-menu-open .gnb2 > .dep1 {

        display: block !important;

        width: 100%;
        height: auto;

        min-height: 100vh;

        padding: 84px 0 30px;
        margin: 0;

        box-sizing: border-box;
    }

}







#m_header {
    display: none;
}

.m-header-wrapper {
    display: none;
}

#sideMenu {
    display: none;
}


@media (max-width: 767px) {

    /* PC 헤더는 모바일에서 클릭을 가로채지 않도록 */
    #header,
    #header2 {
        display: none !important;
        pointer-events: none !important;
    }

    /* 모바일 헤더 */
    #m_header {
        display: block;
        position: relative;
        z-index: 10000;
    }

}


@media (max-width: 767px) {

	/* 모바일 헤더 스타일 */
	#m_header {
	    display: block;
	}
	
	.m-header-wrapper {
	    display: block;
	}
	
	.m-header-inner {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    padding: 10px 15px;
	    background: white;
	}
	
	.m-header-inner h1 {
	    margin: 0;
	    flex-grow: 1;
	}
	
	.m-header-inner h1 a {
	    display: flex;
	    align-items: center;
	}
	
	.m-header-inner h1 img {
	    max-width: 100%;
	    height: auto;
	}
	
.m-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-toggle-m {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
    margin: 0;
}

.menu-toggle-m a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0;
    margin: 0;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.menu-toggle-m .menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    margin: 0;
    padding: 0;

    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
	
	/* 사이드 메뉴 스타일 */
    #m_header {
        display: block;
        position: relative;
        z-index: 100;
    }

    /* 사이드 메뉴 */
    #sideMenu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: #fff;
        z-index: 9999;
        box-sizing: border-box;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* 사이드 메뉴가 열렸을 때 */
    #sideMenu.show {
        display: flex;
        flex-direction: column;
    }

    /* 뒤쪽 화면을 덮는 배경 */
    #back_cover {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
    }

    #back_cover.show {
        display: block;
    }
	
.side-menu-wrapper {
    width: 100%;
    height: 100%;
    flex-direction: column;
}

#sideMenu {
    display: none;
}

#sideMenu.show {
    display: flex;
}
	
	.side-menu-title {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding: 15px 20px;
	    border-bottom: 1px solid #ddd;
	    font-weight: 600;
	    color: #333;
	}
	
	.menu-title-text {
	    font-weight: 600;
	}
	
	.menu-close-icon {
	    font-size: 24px;
	    cursor: pointer;
	    color: #555;
	}
	
	.side-menu-content {
	    flex: 1;
	    overflow-y: auto;
	}
	
	.side-nav {
	    padding: 0;
	}
	
	.side-nav-list {
	    list-style: none;
	    padding: 0;
	    margin: 0;
	}
	
	.side-nav-item {
	    list-style: none;
	    border-bottom: 1px solid #eee;
	}
	
	.side-nav-item > .side-nav-title {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding: 12px 20px;
	    cursor: pointer;
	    color: #333;
	    font-weight: 500;
	}
	
	.side-nav-item > a {
	    display: block;
	    padding: 12px 20px;
	    color: #333;
	    text-decoration: none;
	    font-weight: 500;
	}
	
	.side-nav-arrow {
	    font-size: 16px;
	    transition: transform 0.3s;
	}
	
	.side-nav-item.active > .side-nav-title {
	    background: #f5f5f5;
	}
	
	.side-nav-item.active > .side-nav-title .side-nav-arrow {
	    transform: rotate(90deg);
	}
	
	.side-nav-sub {
	    list-style: none;
	    padding: 0;
	    margin: 0;
	    background: #f9f9f9;
	    display: none;
	}
	
	.side-nav-item.active > .side-nav-sub {
	    display: block;
	}
	
	.side-nav-sub li {
	    list-style: none;
	}
	
	.side-nav-sub li a {
	    display: block;
	    padding: 10px 20px 10px 40px;
	    color: #666;
	    text-decoration: none;
	    font-size: 13px;
	    border-left: 3px solid transparent;
	}
	
	.side-nav-sub li a:hover {
	    background: #f0f0f0;
	    border-left-color: #667eea;
	}
	
	.menu-level-4 {
	    display: none;
	    position: absolute;
	    top: 0;
	    left: 100%;
	    background: white;
	    min-width: 180px;
	    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
	    list-style: none;
	    padding: 0;
	    margin: 0;
	    z-index: 102;
	}
	
	.menu-level-3 li {
	    position: relative;
	}
	
	.menu-level-3 li:hover > .menu-level-4 {
	    display: block;
	}
	
	.menu-level-4 li a {
	    display: block;
	    padding: 8px 16px;
	    color: #333;
	    text-decoration: none;
	    font-size: 13px;
	    white-space: nowrap;
	    transition: background 0.2s;
	}
	
	.menu-level-4 li a:hover {
	    background: #f0f0f0;
	    color: #667eea;
	}
	
	#back_cover {
	    display: none;
	    position: fixed;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(0,0,0,0.5);
	    z-index: 999;
	}
	
	#back_cover.show {
	    display: block;
	}
	
	
	
	
	
/* =========================================================
   사이드 메뉴 레벨별
   ========================================================= */
    /* 공통 */
    .side-nav-list,
    .side-nav-sub {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    /* 1레벨 */
.side-nav-level-1 > .side-nav-title,
.side-nav-level-1 > .side-nav-link {
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
}

/* 레벨 1 펼침 상태 */
.side-nav-level-1 > .side-nav-title[aria-expanded="true"] {
    border-bottom-color: #00A28D;
    border-bottom-width: 2px;
}

    /* 2레벨 */
    .side-nav-level-2 > .side-nav-title,
    .side-nav-level-2 > .side-nav-link {
        padding: 11px 20px 11px 40px;
        font-size: 15px;
        font-weight: 400;
    }

    /* 3레벨 */
    .side-nav-level-3 > .side-nav-title,
    .side-nav-level-3 > .side-nav-link {
        padding: 10px 20px 10px 60px;
        font-size: 14px;
        font-weight: 400;
    }

    /* 4레벨 */
    .side-nav-level-4 > .side-nav-title,
    .side-nav-level-4 > .side-nav-link {
        padding: 9px 20px 9px 80px;
        font-size: 13px;
        font-weight: 400;
    }

    .side-nav-title,
    .side-nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        color: #333;
        text-decoration: none;
        border-bottom: 1px solid #eee;
    }

    .side-nav-title {
        cursor: pointer;
    }

.side-nav-arrow {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
}

.side-nav-arrow::before,
.side-nav-arrow::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 1px;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.side-nav-arrow::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* 펼쳐진 상태 */
.side-nav-title[aria-expanded="true"] .side-nav-arrow::after {
    display: none;
}

    .side-nav-sub {
        background: #f9f9f9;
    }

    .side-nav-level-3 > .side-nav-sub,
    .side-nav-level-4 > .side-nav-sub {
        background: #f5f5f5;
    }


}