/* AEV Bio Labs - Header CSS */

:root {
  --primary-color: #252828;
  --secondary-color: #B9C8D7;
  --color-charcoal: #252828;
  --color-off-white: #F2F0EF;
  --color-warm-beige: #F7E6CA;
  --color-soft-teal: #BEE5E4;
  --color-metallic-silver: #B9C8D7;
}

/* 1단: 로고(좌) + 회원메뉴(우) 얇은 상단 바 */
#header .head {background-color: #F9F7F4; border-bottom: 1px solid #eceae7;}
#header .head .wrap {display: flex; align-items: center; justify-content: space-between; margin: 0 auto; padding: 12px 0; box-sizing: border-box; max-width: 1400px; width: 100%;}
#header .head .logo {display: inline-flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; gap: 6px;}
#header .head .logo .logo_sub {font-size: 14px; font-weight: 500; color: #8a9baa; letter-spacing: 0.08em;}
#header .head .logo img {height: 22px !important; width: auto !important; max-width: none;}
#header .head .member_menu {list-style: none; margin: 0; padding: 0; display: flex; flex-shrink: 0;}
#header .head .member_menu li {display: inline-block; position: relative;}
#header .head .member_menu li a {font-size: 13px; font-weight: 500; color: #777; padding: 0 8px; display: inline-block; letter-spacing: 0.2px; transition: color 0.2s ease;}
#header .head .member_menu li a:hover {color: var(--primary-color);}

/* 헤더 고정 */
#header {position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; box-shadow: 0 1px 8px rgba(0,0,0,0.04);}

/* 2단: 네비게이션 */
#header .menu {background-color: #F9F7F4; color: var(--primary-color); padding: 12px 0; position: relative; border-bottom: 1px solid #eceae7;}
#header .menu .wrap {display: flex; align-items: center; margin: 0 auto; box-sizing: border-box; max-width: 1400px; width: 100%;}
#header .menu ul {list-style: none; margin: 0; padding: 0; font-size: 16px; font-weight: 400;}
#header .menu ul.nav_center {display: flex; gap: 36px; align-items: center; width: 100%;}
#header .menu ul.nav_center li {flex-shrink: 0;}
#header .menu ul.nav_center li:last-child {margin-left: auto;}
#header .menu ul.nav_center li a {color: var(--primary-color); font-size: 16px; font-weight: 500; letter-spacing: 0.02em; transition: opacity 0.2s;}
#header .menu ul.nav_center li a:hover {opacity: 0.75;}
#header .menu ul.nav_center li a.btn {font-weight: 700; padding: 10px 44px; border-radius: 6px; background-color: var(--primary-color); color: #fff; border: none; font-size: 16px; letter-spacing: -0.01em;}
#header .menu ul.nav_center li a.btn:hover {background-color: var(--primary-color); opacity: 0.85;}
#header .menu nav {display: none;}
#header .menu .mobile_menu {display: none;}

@media screen and (max-width:1050px) {
	#header .menu {padding: 18px 0;}
	#header .mobile_bg {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1001; display: none;}
	#header .mobile_bg.on {display: block;}
	#header .mobile_btn {position: absolute; top: 50%; right: 0; transform: translate(0,-50%); padding: 20px; cursor: pointer; z-index: 1;}
	#header .mobile_btn span {display: block; width: 24px; height: 2px; background-color: var(--primary-color); margin: 5px 0;}
	#header .menu ul.nav_center {display: none;}
	#header .menu nav { position: fixed; top: 0; right: 0; transform: none; background-color: #fff; width: 80%; max-width: 360px; height: 100%; box-shadow: 0 0 15px rgb(0 0 0 / 8%); z-index: 1002;}
	#header .menu .m_menu.on {display: block;}
	#header .menu nav .mobile_menu {display: block; padding: 60px 0 0;}
	#header .menu nav .mobile_menu ul.menu1 {overflow: hidden; border-top: 1px solid #e8e8e8; width: 100%;}
	#header .menu nav .mobile_menu ul.menu1 li {float: left; width: 50%; border-bottom: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; box-sizing: border-box;}
	#header .menu nav .mobile_menu ul.menu1 li a { font-size: 14px; text-align: center; padding: 13px 10px; display: block; color: var(--primary-color);}
	#header .menu nav .mobile_menu ul.menu2 {padding: 0; width: 100%; margin: 0; border-top: 1px solid #e8e8e8;}
	#header .menu nav .mobile_menu ul.menu2 li {display: block; border-bottom: 1px solid #f0f0f0;}
	#header .menu nav .mobile_menu ul.menu2 li a {padding: 15px 25px; color: var(--primary-color); font-size: 14px; background-color: #fff; display: block;}
	#header .menu nav .mobile_menu .mobile_close {position: absolute; top: 4px; right: 0; padding: 20px; cursor: pointer; z-index: 1;}
	#header .menu nav .mobile_menu .mobile_close span {display: block; width: 25px; height: 2px; background-color: var(--primary-color); margin: 5px 0;}
	#header .menu nav .mobile_menu .mobile_close span:nth-child(1) {transform: rotate(45deg);}
	#header .menu nav .mobile_menu .mobile_close span:nth-child(2) {transform: rotate(-45deg) translateY(-5px) translateX(5px)}
}

@media screen and (max-width:1440px) {
	#header .head .wrap, #header .menu .wrap {padding-left: 48px; padding-right: 48px;}
}
@media screen and (max-width:1280px) {
	#header .head .wrap, #header .menu .wrap {padding-left: 48px; padding-right: 48px;}
}
@media screen and (max-width:1024px) {
	#header .head .wrap, #header .menu .wrap {padding-left: 32px; padding-right: 32px;}
}
@media screen and (max-width:768px) {
	#header .head .wrap {padding: 16px 20px;}
	#header .menu .wrap {padding-left: 20px; padding-right: 20px;}
	#header .head .member_menu li a {font-size: 12px; padding: 0 6px;}
	#header .head .logo .logo_sub {font-size: 12px;}
	#header .head .logo img {height: 20px !important;}
}
@media screen and (max-width:480px) {
	#header .head .wrap {padding: 12px 16px;}
	#header .menu .wrap {padding-left: 16px; padding-right: 16px;}
	#header .head .logo .logo_sub {font-size: 11px;}
	#header .head .logo img {height: 18px !important;}
	#header .head .member_menu li a {font-size: 11px; padding: 0 4px;}
}





#chat {position: fixed; right: 3%; bottom: 5%; z-index: 2;}
#chat .chat_img {background-color: #fff; border-radius: 50%; box-shadow: 4px 7px 11.28px 0.72px rgb(0 0 0 / 8%); width: 80px; height: 80px; position: relative;}
#chat .chat_img .img {padding: 21px;}
#chat .chat_img .new {position: absolute; right: 2px; top: 3px;}


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