/* ======================================================================================================================================================================== */
/* ============================================================ header style start  =========================================================================== */
/* ======================================================================================================================================================================== */

#header {position: fixed; z-index: 99999; 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;}
#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: center; padding: 5px 0; max-width: 1400px; 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 ul {display: flex; width: 100%; overflow: hidden; text-align: center; flex: 1;justify-content: space-evenly;}
nav #nav_wrap ul li {width: 16.6%; 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: 20px; color: #fff;  font-family: "GmarketSansBold";}
nav #nav_wrap > ul > li > a.on {color: #008d70 !important;}
nav #nav_wrap > ul > li > a::before {width: 100%;}
nav #nav_wrap ul li > a.on {color: #008d70 !important;}

#logo-right{position: absolute;top:30px;right: 30px;}

/*모바일메뉴*/
#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: 35px; 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: #008d70;color: #fff;}




@media screen and (max-width:1400px){
nav #nav_wrap ul{max-width:800px;}
nav #nav_wrap .logo{padding-right: 0;}
#logo-right{top:30px;right: 10px;}

}
/* ============================== 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: 220px;}
	nav #nav_wrap {position: absolute; display: none; top: 70px; 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 {float: left; width: 33.3%; -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;}
	
	#logo-right{display: none;}

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


	#header {background: #fff;}
	#header_wrap {padding: 0;padding-top: 15px; border-bottom: 1px solid #ccc;}
	nav #nav_wrap.on {right: 0; 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-bottom: 1px solid #ccc;}
	#header.on2 nav #nav_wrap {background: rgba(255,255,255,0.9); border-bottom: 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:769px){
	#quick_menu {display: none;}
}
@media screen and (max-width:425px){
	#m_phone {max-width: 100%; left: 10px;}
	#m_menu {right: 10px;}
	nav #nav_wrap {top: 66px;}
	nav #nav_wrap.on ul li a {font-size: 13px;}
	nav #nav_wrap ul li a:before {display: none;}

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

/* =====================================================
   GNB 2단 메뉴 공통
===================================================== */

/* 서브메뉴 잘림 방지 */
nav #nav_wrap,
nav #nav_wrap ul { 
  overflow: visible !important;
}

/* 기존 가로 비율 고정 해제 */
nav #nav_wrap ul.gnb { 
  display: flex;
  align-items: center;
  gap: 24px;
}

nav #nav_wrap ul.gnb > li {
  position: relative;
  width: auto;
}

/* 2단 있는 메뉴 표시 */
nav #nav_wrap .has-sub > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ▼ caret */
nav #nav_wrap .caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform .2s ease;
}

/* =====================================================
   PC : 드롭다운 (세로형)
===================================================== */
nav #nav_wrap .sub {
  position: absolute;
  left: 0;
  top: 56px;
  min-width: 200px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 10px 24px rgba(0,0,0,.1);
  border-radius: 12px;
  padding: 8px 0;
  z-index: 10000;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .2s ease;
}

nav #nav_wrap .sub li {
  width: 100%;
}

nav #nav_wrap .sub a {
  display: block;
  padding: 10px 16px;
  color: #333 !important;
  text-align: left;
}


/* hover 시 드롭다운 */
@media (hover:hover){
  nav #nav_wrap .has-sub:hover > .sub,
  nav #nav_wrap .has-sub:focus-within > .sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  nav #nav_wrap .has-sub:hover > a .caret {
    transform: rotate(180deg);
  }
}

/* =====================================================
   Mobile : 아코디언 (1 x N)
===================================================== */
@media screen and (max-width:1200px){

  nav #nav_wrap ul.gnb {
    display: block;
  }

  nav #nav_wrap ul.gnb > li {
    width: 100%;
  }

  nav #nav_wrap ul.gnb > li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
  }

  /* 모바일에서는 기본 숨김 */
  nav #nav_wrap .sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
  }

  /* open 클래스 시 노출 */
  nav #nav_wrap .has-sub.open > .sub {
    display: block;
  }

  nav #nav_wrap .sub a {
    padding: 12px 24px;
    background: #fff;
    border-top: 1px solid #eee;
  }

  nav #nav_wrap .has-sub.open > a .caret {
    transform: rotate(180deg);
  }

  /* 기존 메뉴 밑줄 애니메이션 제거(모바일 흔들림 방지) */
  nav #nav_wrap ul li a::before {
    display: none !important;
  }
}

/* ✅ 서브메뉴 ul은 flex 영향 받지 않게 강제 (가로 나열 문제 해결) */
nav #nav_wrap ul.sub{
  display: block !important;     /* 기존 nav #nav_wrap ul {display:flex} 덮기 */
  flex: none !important;
}

nav #nav_wrap ul.sub > li{
  width: 100% !important;
  float: none !important;
}

nav #nav_wrap ul.sub > li > a{
  width: 100% !important;
  display: block !important;
}

/* 모바일 구간에서도 확실히 1열로 */
@media screen and (max-width:1200px){
  nav #nav_wrap.on ul.sub,
  nav #nav_wrap ul.sub{
    display: none !important; /* 기본 닫힘 유지 */
  }
  nav #nav_wrap .has-sub.open > ul.sub{
    display: block !important; /* 열리면 세로로 */
  }
}


/* 251221 기존 모바일 메뉴 대신 */
/* =====================================================
   ✅ 모바일: 햄버거 없이 로고 밑 4x2 그리드 메뉴
===================================================== */
@media screen and (max-width:1200px){

  /* 햄버거 버튼 숨김 */
  #m_menu{ display:none !important; }
  
  nav #nav_wrap .caret{display: none;}

  /* nav_wrap 항상 노출(토글 X) */
  nav #nav_wrap{
    position: static !important;
    display: block !important;
    top: auto !important;
    right: auto !important;
    background: transparent !important;
    border-bottom: 0 !important;
    margin: 10px 0 0 !important;
    transition: none !important;
  }
  nav #nav_wrap.on{ display:block !important; } /* 혹시 on 붙어도 동일 */

  /* 로고 숨김(모바일 로고(#logo_m) 쓰는 구조라면) */
  nav #nav_wrap .logo{ display:none !important; }

  /* ✅ 4x2 그리드 */
  nav #nav_wrap ul{
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 4칸 */
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    overflow: visible !important;
    justify-content: initial !important;
  }

  /* ✅ 각 칸 1/4 */
  nav #nav_wrap ul li{
    width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
    border-right: 1px solid #eee !important;
    border-bottom: 1px solid #eee !important;
  }

  /* 오른쪽 경계선 정리(4열의 마지막) */
  nav #nav_wrap ul li:nth-child(4n){
    border-right: 0 !important;
  }

  /* 아래 경계선 정리(8개 기준: 1~4 줄1, 5~8 줄2) */
  nav #nav_wrap ul li:nth-child(n+5){
    /* 2번째 줄부터는 border-bottom 유지/원하면 마지막 줄은 제거 가능 */
  }
  /* 만약 정확히 8개면 마지막 줄 아래선 빼고 싶을 때 */
  nav #nav_wrap ul li:nth-last-child(-n+4){
    border-bottom: 0 !important;
  }

  /* 링크 스타일 */
  nav #nav_wrap ul li a{
    display: block !important;
    width: 100% !important;
    padding: 10px 6px !important;
    font-size: 13px !important;
    color: #333 !important;
  }

  /* hover 밑줄 제거(모바일) */
  nav #nav_wrap ul li a::before{ display:none !important; }
}


/* PC / Mobile 메뉴 텍스트 분기 */
.pc-only { display: inline; }
.mo-only { display: none; }

@media screen and (max-width:1200px){
/* ✅ 진료과목 아래 서브메뉴(2단) 완전 숨김 */
nav #nav_wrap ul.sub,
nav #nav_wrap .sub {
  display: none !important;
}
  .pc-only { display: none; }
  .mo-only { display: inline; }
}