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

header {position: fixed; z-index: 999999; 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: 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; justify-content: center; max-width: 1100px; width: 100%; overflow: hidden; text-align: center; flex: 1;}
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: 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: #004940; transition: all 0.2s ease-in-out;}
nav #nav_wrap ul li:hover a {color: #004940 !important;}
nav #nav_wrap ul li:hover a::before {width: 100%;}
nav #nav_wrap ul li a.on {color: #004940 !important; font-weight: 900;}

/*모바일메뉴*/
#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 ===================== */
/* tab-menu */
.tab-menu-wrap {position:relative; height: 50px;}
.tab-menu {position: absolute; top: 0; width: 100%; z-index: 9999;}
.tab-menu * {font-size: 15px;}
.tab-menu::before {content: ''; background-color: #f3f7fb; display: block; width: 100%; position: absolute; height: 50px; z-index: -4; left: 0; top: 0; border-bottom: 1px solid #dcdcdc;}
.tab-menu .home-btn {display:inline-block; padding: 15px 15px; text-align:left; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; height: 50px;} 
.tab-menu .home-btn img {width: 50px;height: auto;}
.tab-menu .inner div p.btn:hover, .tab-menu .home-btn.hover {background-color: #f3f7fb;}
.tab-menu .inner {display: flex;}
.tab-menu .inner div {width: 100%;}
.tab-menu .inner div ul {cursor:pointer; position:relative; width: 100%;}
.tab-menu .inner div p.btn {min-height: 50px; position: relative ; color:#333 ; padding: 12px 10px ; border-right: 1px solid #dcdcdc ; cursor: pointer;}
.tab-menu .inner div p.btn::after {transition: all ease 0.5s; transform: translate(0, -50%); content: ''; position: absolute; top:50%; right: 2%; width: 22px; height: 22px; background: url(../img/sub_navi_off.png) 0 0 no-repeat;}
.tab-menu .inner div:hover p.btn::after {background: url(../img/sub_navi_on.png) 0 0 no-repeat; transition: all ease 0.5s;}
.tab-menu .inner div ul {display: none; border: 1px solid #dcdcdc;}
.tab-menu .inner div ul li a {display: block; color: #000; padding: 7px 10px; background-color: #f3f7fb;}
.tab-menu .inner div ul li a:hover {background-color: #6aa6e2; 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: 220px;}
	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+6) {border-bottom: 1px solid #fff;}
	nav #nav_wrap.on ul li:nth-child(n+0):nth-child(-n+8):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-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+6) {border-bottom: 1px solid #ccc;}
	header.on nav #nav_wrap ul li:nth-child(n+0):nth-child(-n+8):not(:nth-child(3n)) {border-right: 1px solid #ccc;}
	header.on2 nav #nav_wrap ul li:nth-child(n+0):nth-child(-n+6) {border-bottom: 1px solid #ccc;}
	header.on2 nav #nav_wrap ul li:nth-child(n+0):nth-child(-n+8):not(:nth-child(3n)) {border-right: 1px solid #ccc;}


}
	


/* ============================== Mobile size : 1024px ============================== */
@media screen and (max-width:1024px){
	.tab-menu .inner {padding: 0;}
}

/* ============================== Mobile size : 769px ============================== */
@media screen and (max-width:769px){
	#quick_menu {display: none;}
	.tab-menu * {font-size: 12px;}
	.tab-menu .inner div p.btn {padding: 15px 10px;}
	.tab-menu .inner div p.btn:after {width: 18px; height: 18px; background-size: cover;}
	.tab-menu .inner div:hover p.btn:after {width: 18px; height: 18px; background-size: cover;}
}
@media screen and (max-width:425px){
	#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: 150px;}
}