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

#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: 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 {position: absolute; content: ''; left: 0; bottom: 5px; width: 0; height: 5px; background: #80cc32; transition: all 0.2s ease-in-out;}
nav #nav_wrap ul li:hover a {color: #80cc32 !important;}
nav #nav_wrap ul li:hover a::before {width: 100%;}
nav #nav_wrap ul li a.on {color: #80cc32 !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 #80cc32;-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: #80cc32;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 {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;}

	/*메뉴버튼*/
	#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-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){
#header .lang {left: 0 !important;top:25px !important;}

}

/* ============================== Mobile size : 480 ============================== */
@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: 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: 175px;}

	
}
/* ============================== Mobile size : 350 ============================== */
@media screen and (max-width:350px){
	#header .lang {display: none;}

	
}