/* ======================================================================================================================================================================== */
/* ============================================================ 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; 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: 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: 12.5%; 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-weight: 700;}
nav #nav_wrap ul li a::before {position: absolute; content: ''; left: 0; bottom: 5px; width: 0; height: 5px; background: #37c1a5; transition: all 0.2s ease-in-out;}
nav #nav_wrap ul li:hover a {color: #37c1a5 !important;}
nav #nav_wrap ul li:hover a::before {width: 100%;}
nav #nav_wrap ul li a.on {color: #37c1a5 !important; font-weight: 900;}

#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: 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: #37c1a5;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: 15px 0; 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;}
}