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

header {position: fixed; z-index: 999999; top: 0; width: 100%; transition: 0.5s ease-out; background: #fff; box-shadow: 5px 5px 20px -22px;}

/* 메뉴 */
nav {position: relative;}
nav #nav_wrap {display: flex; align-items: center; justify-content: space-between; padding: 20px 0; max-width: 1330px; width: 100%; margin: 0 auto;}
nav #nav_wrap .logo {max-width: 300px; width: 100%; z-index: 90;}
nav #nav_wrap .logo img {width: 100%;}
nav #nav_wrap .head-sub {width: 285px;}
nav #nav_wrap .head-sub:last-child {text-align: right;}
nav #nav_wrap > div > a {display: inline-block; width: 100%;}
nav .menu {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
nav .menu ul {display: flex; justify-content: center; max-width: 1400px; width: 100%; margin: 0 auto; overflow: hidden; text-align: center; flex: 1;}
nav .menu ul li {width: 10%; cursor: pointer; transition:all 0.5s ease-out;}
nav .menu ul li a {position: relative; display: inline-block; width: auto; text-align: center; padding: 15px 0; font-size: 18px; color: #333; font-weight: 700;}
nav .menu ul li a::before {position: absolute; content: ''; left: 0; bottom: 10px; width: 0; height: 5px; background: linear-gradient(45deg, #037ddf, #009eb7); transition: all 0.2s ease-in-out;}
nav .menu ul li:hover a {color: #009eb7 !important;}
nav .menu ul li:hover a::before {width: 100%;}
nav .menu ul li a.on {color: #009eb7 !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; top: 50%; left: 20px; transform: translateY(-50%);}
#m_phone div {display: inline-block; max-width: 60px; padding: 2px; border-radius: 10px; background: #009eb7;}


/* ================== 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: 200px; width: 100%;}
	nav #nav_wrap {display: none;}
	nav .menu {position: absolute; display: none; top: 76px; width: 100%; background: rgba(255,255,255,0.98); border-bottom: 1px solid #ccc; padding: 0; transition: 0.5s;}
	nav .menu.on {display: block;}
	nav .menu.on ul li {float: left; width: 33.3%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
	nav .menu.on ul li:nth-child(n+0):nth-child(-n+9) {border-bottom: 1px solid #ccc;}
	nav .menu.on ul li:nth-child(n+0):nth-child(-n+20):not(:nth-child(3n)) {border-right: 1px solid #ccc;}
	nav .menu.on ul li a {font-size: 14px; width: 100%; color: #333;}
	nav .menu.on ul li:hover a {color: #333;}
	nav .menu.on ul li a:before {left: 5px;}
	nav .menu.on ul li a.on {color: #333;}
	nav .menu ul {display: block; max-width: 100%;}
	nav .menu ul li a::before {display: none;}

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

	#header {background: #fff;}
	#header_wrap {position: relative; padding: 15px 0; border-bottom: 1px solid #ccc; margin: 0 auto;}
	nav .menu.on {right: 0; display: block ;}
	nav #nav_wrap .logo {display: none;}

}
	


/* ============================== 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: 480px){
	#m_phone {max-width: 100%; left: 10px;}
	#m_phone div {max-width: 50px;}
	#m_menu {right: 10px;}
	nav .menu {top: 76px;}
	nav .menu ul li a {padding: 10px 0;}
	nav .menu ul li a:before {display: none;}
}



/* DB 팝업 */
#db-btn{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

#db-btn > div {
	position: relative;
		width: 1330px;
	margin: 0 auto;
	height: 100%;
}

#db-btn a{
	position: absolute;
	top: 27px;
	right: 200px;
	width: 220px;
}

#m-db-btn {
	position: absolute;
	display: none;
	box-shadow: rgb(38, 57, 77) 0px 3px 30px -10px;
}
#m-db-btn a{
		writing-mode: vertical-lr;
		color: #fff;
		font-size: 24px;
		font-weight: 700;

}

@media (max-width:1330px) {
	#db-btn {
		display: none;
		
	}
	
	#m-db-btn {
		display: flex;
		position: fixed;
		justify-content: center;
		align-items: center;
		
		background-color: #3a909d;
		border-radius: 0 15px 15px 0;
		left: 0;
		padding: 20px 4px;
		bottom: 120px;
	}
}