/* ======================================================================================================================================================================== */
/* ============================================================ header style start (yangyunji) =========================================================================== */
/* ======================================================================================================================================================================== */

#header {position: fixed; z-index: 9999; top: 0; width: 100%; transition: 0.5s ease-out; background:linear-gradient(to bottom, rgba(0,0,0,0.3),transparent); box-shadow: none;}

#header.on,
#header.on2 {background: rgba(255,255,255,0.9); box-shadow: 5px 5px 20px -22px;}

#header.on nav #nav_wrap ul li a,
#header.on2 nav #nav_wrap ul li a {color: #333;}

#header_wrap {padding: 20px 0; border-bottom: 1px solid #fff;}
#header_wrap #logo {display: flex; justify-content:space-between; align-items:center; padding:20px 0; max-width: 100%; margin: 0 auto; text-align:center;}
#header_wrap #logo > a {flex:1;}

/* 메뉴 */
nav #nav_wrap {display: flex; align-items: center; justify-content: space-between; padding: 5px 0; max-width: 1300px; width: 100%; margin: 0 auto;}
nav #nav_wrap .logo{padding-right: 50px;}
nav #nav_wrap .logo a {display: inline-block; max-width: 230px;}
nav #nav_wrap .logo img {width: 100%;}
nav #nav_wrap ul {display: flex; justify-content: center; max-width: 1000px; width: 100%; overflow: hidden; text-align: center; flex: 1;}
nav #nav_wrap ul li {width: 14.28%; cursor: pointer; transition:all 0.5s ease-out;}
nav #nav_wrap ul li a {position: relative; display: inline-block; width: auto; text-align: center; padding: 15px 0; font-size: 17px; color: #fff; font-weight: 700;}
nav #nav_wrap ul li a::before {  display: none !important;position: absolute; content: ''; left: 0; bottom: 5px; width: 0; height: 5px; background: #c3a983; transition: all 0.2s ease-in-out;}
nav #nav_wrap ul li:hover a {color: #c3a983 !important;}
nav #nav_wrap ul li:hover a::before {width: 100%;}
nav #nav_wrap ul li a.on {color: #c3a983 !important; font-weight: 900;}

#header .lang {display: flex; align-items: center; margin: 0;position: absolute;right: 100px;top: 35px;}
#header .lang a {display: block;width: 100%;max-width: 35px; margin: 0 3px;cursor: pointer;}
.lang a:hover{border: 2px solid #c3a983;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}

/*모바일메뉴*/
#m_menu {display: none; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); cursor: pointer;}
#logo_m {display: none;}
#m_phone {display: none; position: absolute; max-width: 40px; top: 50%; left: 20px; transform: translateY(-50%);}


/* ================== sub-menu ===================== */
/* member-menu */
.member-menu{border-top: 1px solid #eee;border-bottom: 1px solid #eee;}
.member-menu ul{display: flex;max-width:900px;margin: auto;}
.member-menu ul li{width: 50%;text-align: center;border-right: 1px solid #eee;}
.member-menu ul li:first-child{border-left: 1px solid #eee;}
.member-menu ul li a{display: block;padding: 10px;}
.member-menu ul li a:hover{background: #c3a983;color: #fff;}


/* ============================== Mobile size : 1200px ============================== */

@media screen and (max-width:1200px){

	#logo {display:none;}
	#logo_m {display: block; width: 100%; height: auto; text-align: center;}
	#logo_m img {max-width: 240px; width: 100%;}
	nav #nav_wrap {position: absolute; display: none; top: 76px; background: rgba(255,255,255,0.5);  border-bottom: 1px solid #fff; padding: 0; transition: 0.5s;}
	nav #nav_wrap.on {display: block;}
	nav #nav_wrap.on ul li {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
	nav #nav_wrap.on ul li:nth-child(n+0):nth-child(-n+10) {border-bottom: 1px solid #fff;}
	nav #nav_wrap.on ul li:nth-child(n+0):nth-child(-n+11):not(:nth-child(3n)) {border-right: 1px solid #fff;}
	nav #nav_wrap.on ul li a {font-size: 14px; width: 100%; color: #333;}
	nav #nav_wrap.on ul li:hover a {color: #333;}
	nav #nav_wrap.on ul li a:before {left: 5px;}
	nav #nav_wrap.on ul li a.on {color: #333;}
	nav #nav_wrap ul {display: block; max-width: 100%;}
	nav #nav_wrap ul li a::before {display: none;}

	/*메뉴버튼*/
	#m_menu {display: block;}
	#m_menu span {display: none;}
	#m_phone {display: block;}


	#header {background: #fff;}
	#header_wrap {padding: 15px 0; border-bottom: 1px solid #ccc;}
	nav #nav_wrap.on {right: 0; top:15px;display: block ;}
	nav #nav_wrap > div:first-child {display: none;}
	#header.on .menu .dropdown > li > a {color: #111;}
	#header.on2 .menu .dropdown > li > a {color: #111;}
	#header.on nav #nav_wrap {background: rgba(255,255,255,0.9); border-top: 1px solid #ccc;}
	#header.on2 nav #nav_wrap {background: rgba(255,255,255,0.9); border-top: 1px solid #ccc;}
	#header.on nav #nav_wrap ul li:nth-child(n+0):nth-child(-n+10) {border-bottom: 1px solid #ccc;}
	#header.on nav #nav_wrap ul li:nth-child(n+0):nth-child(-n+11):not(:nth-child(3n)) {border-right: 1px solid #ccc;}
	#header.on2 nav #nav_wrap ul li:nth-child(n+0):nth-child(-n+10) {border-bottom: 1px solid #ccc;}
	#header.on2 nav #nav_wrap ul li:nth-child(n+0):nth-child(-n+11):not(:nth-child(3n)) {border-right: 1px solid #ccc;}
}
	

/* ============================== Mobile size : 1024px ============================== */
@media screen and (max-width:1024px){
}

/* ============================== Mobile size : 769px ============================== */
@media screen and (max-width:480px){
	#m_phone {max-width: 100%; left: 10px;}
	#m_phone img {width: 60%;}
	#m_menu {right: 10px;}
	nav #nav_wrap {top: 63px;}
	nav #nav_wrap.on ul li a {font-size: 13px;}
	nav #nav_wrap ul li a:before {display: none;}

	#logo_m img {max-width: 175px;}

	#header .lang {display: none;}
}


/* ----- GNB 기본 정렬 보완 ----- */
nav #nav_wrap ul.gnb {display:flex; align-items:center; gap:24px; max-width:1000px; width:100%;}
nav #nav_wrap ul.gnb > li {position:relative; /* width: auto로 덮어쓰기 */ width:auto; padding:0 2px;}
/* 기존: nav #nav_wrap ul li {width:14.28%;} 이 규칙은 더 아래 이 규칙으로 덮임 */

/* ----- 2단 메뉴 공통 ----- */
nav #nav_wrap .has-sub > a {display:inline-flex; align-items:center; gap:8px;}
nav #nav_wrap .has-sub > a .caret {
  display:inline-block; width:0; height:0; border-left:5px solid transparent;
  border-right:5px solid transparent; border-top:6px solid currentColor; transform:translateY(1px);
  transition:transform .2s ease;
}

/* 데스크톱 드롭다운 박스 */
nav #nav_wrap .sub {
  position:absolute; left:50%; top:56px; transform:translateX(-50%) translateY(8px);
  min-width:200px; background:#fff; border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.08); border-radius:12px;
  padding:8px; opacity:0; visibility:hidden; transition:all .18s ease;
  z-index:1000;
}
#header.on nav #nav_wrap .sub, #header.on2 nav #nav_wrap .sub {border-color:rgba(0,0,0,.12);}
nav #nav_wrap .sub li {width:100%;}
nav #nav_wrap .sub a {display:block; padding:10px 12px; color:#333 !important; font-weight:600; border-radius:8px;}
nav #nav_wrap .sub a:hover {background:#f7f7f7; color:#111 !important}

/* 호버/포커스 오픈 */
@media (hover:hover){
  nav #nav_wrap .has-sub:hover > .sub,
  nav #nav_wrap .has-sub:focus-within > .sub {
    opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
  }
  nav #nav_wrap .has-sub:hover > a .caret,
  nav #nav_wrap .has-sub:focus-within > a .caret {transform:rotate(180deg);}
}

/* 헤더가 투명일 때 서브메뉴 대비 */
#header:not(.on):not(.on2) nav #nav_wrap .sub {border-color:rgba(255,255,255,.2)}

/* ----- 모바일(<=1200px) : 아코디언 ----- */
@media screen and (max-width:1200px){
  nav #nav_wrap ul.gnb {display:block; padding:8px 0;}
  nav #nav_wrap ul.gnb > li {width:100%; padding:0;}
  nav #nav_wrap ul.gnb > li > a {display:flex; justify-content:space-between; align-items:center; padding:14px 16px; width:100%;}
  nav #nav_wrap .has-sub .caret {margin-left:8px; transform:none;}
  nav #nav_wrap .sub {
    position:static; transform:none; opacity:1; visibility:visible;
    box-shadow:none; border:none; border-radius:0; padding:0; display:none; background:transparent;
  }
  nav #nav_wrap .sub li a {padding:12px 20px; font-weight:600;}
  nav #nav_wrap .sub li + li a {border-top:1px solid #eee;}
  /* 열린 상태 표시 */
  nav #nav_wrap .has-sub.open > .sub {display:block;}
  nav #nav_wrap .has-sub.open > a .caret {transform:rotate(180deg);}
}

/* 헤더 색상 변화 시 링크 컬러 유지 보완 */
#header.on nav #nav_wrap .has-sub > a,
#header.on2 nav #nav_wrap .has-sub > a {color:#333;}

/* --- FIX: 2단 메뉴가 호버 시 보이도록 --- */
nav #nav_wrap,
nav #nav_wrap ul,
nav #nav_wrap ul.gnb { overflow: visible !important; }

nav { position: relative; z-index: 9999; }
nav #nav_wrap ul.gnb > li { position: relative; }

/* 데스크톱: 호버/포커스 시 드롭다운 표시 */
nav #nav_wrap .has-sub:hover > .sub,
nav #nav_wrap .has-sub:focus-within > .sub {
  opacity: 1; visibility: visible; 
}

/* 드롭다운이 다른 요소 위로 오게 */
nav #nav_wrap .sub { z-index: 10000; }

/* ==============================
   2단 서브메뉴 : 세로형 레이아웃
============================== */

/* 기본 스타일 초기화 */
nav #nav_wrap ul.gnb { overflow: visible !important; }
nav #nav_wrap ul.gnb > li { position: relative; }

/* 공통 서브메뉴 */
nav #nav_wrap .sub {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  min-width: 180px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out;
  z-index: 9999;
}

/* 메뉴 항목 */
nav #nav_wrap .sub li {
  display: block;
  width: 100%;
}

nav #nav_wrap .sub li a {
  display: block;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  color: #333 !important;
  text-align: left;
  border-radius: 6px;
  transition: all 0.2s ease;
}

nav #nav_wrap .sub li a:hover {
  background: #f5f5f5;
  color: #111 !important;
}

/* 호버 시 나타나기 */
nav #nav_wrap .has-sub:hover > .sub,
nav #nav_wrap .has-sub:focus-within > .sub {
  opacity: 1;
  visibility: visible;
}

/* caret 방향 변화 */
nav #nav_wrap .has-sub:hover > a .caret,
nav #nav_wrap .has-sub:focus-within > a .caret {
  transform: rotate(180deg);
}

/* 모바일 (세로형 아코디언) */
@media screen and (max-width:1200px){
  nav #nav_wrap .sub {
    position: static;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    display: none;
    padding: 0;
  }
  nav #nav_wrap .has-sub.open > .sub {
    display: block;
  }
  nav #nav_wrap .sub li a {
    font-size: 14px;
    font-weight: 600;
    padding: 10px 24px;
    border-top: 1px solid #eee;
    background: #fff;
    color: #333;
  }
  nav #nav_wrap .sub li:first-child a {
    border-top: none;
  }
}
/* 1) 데스크톱: X축 이동 제거 (가운데정렬 대신 좌측 기준) */
nav #nav_wrap .sub{
  left: 0 !important;              /* 50% → 0 */
  transform: translateY(10px) !important;  /* translateX 제거 */
  min-width: 200px;                /* 필요 시 넓이 보정 */
}

/* 호버 시 Y축만 부드럽게 */
nav #nav_wrap .has-sub:hover > .sub,
nav #nav_wrap .has-sub:focus-within > .sub{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) !important;     /* X축 이동 없음 */
}

/* 2) 모바일: 아코디언 고정 + X축 이동/트랜지션 완전 해제 */
@media screen and (max-width:1200px){
  nav #nav_wrap ul,
  nav #nav_wrap ul.gnb { text-align: left; }  /* 중앙정렬이면 살짝 흔들림 생김 */

  nav #nav_wrap .sub{
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    transition: none !important;   /* 터치 시 미세 이동 방지 */
    display: none;
  }
  nav #nav_wrap .has-sub.open > .sub{ display: block; }

  /* 링크 밑줄 효과도 모바일에선 고정 (폭 변화로 미세 흔들림 방지) */
  nav #nav_wrap ul li a::before{ display:none !important; }
}

/* 3) 공통: 서브메뉴가 잘리지 않도록 */
nav #nav_wrap,
nav #nav_wrap ul,
nav #nav_wrap ul.gnb{ overflow: visible !important; }

/* 2단 메뉴 기본 글자색은 검정 */
nav #nav_wrap .sub a {
  color: #333 !important;
}

/* 2단 메뉴 hover 시만 황토색 */
nav #nav_wrap .sub a:hover {
  color: #c3a983 !important;
  background: #f7f7f7;
}

/* 상위 메뉴 hover 시 서브까지 황토색으로 번지는 현상 방지 */
nav #nav_wrap .has-sub:hover > a {
  color: #c3a983 !important; /* 상위 메뉴만 황토색 */
}
nav #nav_wrap .has-sub:hover .sub a {
  color: #333 !important; /* 서브메뉴는 기본 검정 유지 */
}

/* =====================================================
   모바일 서브메뉴 (아코디언) - 1200px 이하
===================================================== */

nav #nav_wrap ul.sub-menu {
  position: static !important;
  transform: none !important;
  min-width: 100% !important;
  width: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #f5f5f5 !important;
  display: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 서브메뉴 열림 */
nav #nav_wrap > ul > li.has-sub.open > ul.sub-menu {
  display: block !important;
}