@charset "utf-8";

/* 대메뉴 영역 */
.hidden { position:absolute; text-indent:-9999px; width:0px; height:0px; margin:-1px; overflow:hidden;}

nav#topMenu ul li a{color:#000; font-size:17px; line-height:81px; font-weight:700;}
nav#topMenu ul li a:hover{color:#164896; text-decoration:none;	background:url(../images/sub/bg_gnb_on.png) bottom no-repeat;}
nav#topMenu ul li ul li a {color:#fff !important; font-weight:600 !important; font-size:14px;line-height:30px;}

nav#topMenu { width:100%;max-width: 1000px; width:-webkit-calc(100% - 200px); width:-moz-calc(100% - 200px);width:calc(100% - 200px); float:right;z-index:2000;}
nav#topMenu ul {           /* 메인 메뉴 안의 ul을 설정함: 상위메뉴의 ul+하위 메뉴의 ul */
	margin: 0px;            /* 메인 메뉴 안의 ul의 margin을 없앰 */
	padding: 0px;           /* 메인 메뉴 안의 ul의 padding을 없앰 */
	width:100%;
	text-align:right;
}
nav#topMenu ul li {            /* 메인 메뉴 안에 ul 태그 안에 있는 li 태그의 스타일 적용(상위/하위메뉴 모두) */
	color: #000;               /* 글씨 색을 흰색으로 설정 */
	vertical-align: middle;     /* 세로 정렬을 가운데로 설정 */
	padding:0 2%;
	display:inline-block;
	letter-spacing:-1px;
	text-align: center;         /* 텍스트를 가운데로 정렬 */
	position:relative;
}
nav#topMenu ul li a {
	*zoom:1;
	display:block;
}
nav#topMenu ul li ul li{
	font-size:14px;
	line-height:1.3 !important;
	letter-spacing:0;
	padding:5px 10px;
	text-align:left;
	display:inline-block;
}
nav#topMenu ul ul li a:hover{ 
	color:#e9e7ac!important;
	background-image:none;
}
.submenu {              	/* 하위 메뉴 스타일 설정 */
	width:200px !important;
	position: absolute;     /* html의 flow에 영향을 미치지 않게 absolute 설정 */
	height: 0px;            /* 초기 높이는 0px로 설정 */
	left:-80px;
	top:74px;
	overflow: hidden;      
	transition: height 0.5s; 
	-webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
}
nav#topMenu ul li:hover .submenu { /* 상위 메뉴에 마우스 모버한 경우 그 안의 하위 메뉴 스타일 설정 */
	height: 300px;           /* 높이 설정 */
}

@media all and (max-width: 780px) {
/* 토글 메뉴 */

.toggle_menu { position:absolute; top:28px; right:10px; width:35px; height:30px; cursor: pointer; z-index:2000; display:block;}
.toggle_menu:hover #burger span {background:#363463;}

#burger{ cursor:pointer; display:block;}
#burger span{ background: #363463; display:block; width:30px; height:3px; margin-bottom: 8px; position: relative; top:0; transition: all ease-in-out 0.4s; }

.toggle_menu.open span:nth-child(1){transform: rotate(-45deg) translate(-10px, 9px);}
.toggle_menu.open span:nth-child(2){width: 0;   opacity:0;}
.toggle_menu.open span:nth-child(3){transform: rotate(45deg) translate(-6px, -6px);}


/* 대메뉴 영역 */

nav#topMenu { display:none;}

nav.m-menu { top:90px;z-index:1000; position:absolute;right:0; background:#fff;display:block !important;}
nav.m-menu { width:-webkit-calc(100% - 0px) !important; width:-moz-calc(100% - 0px)!important; width:calc(100% - 0px)!important;
		box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
}
nav.m-menu ul li{
	width:100%;
	float:none;
	border-bottom:1px solid #003366;
	position:relative;
	padding:0px !important;
	background:#fff !important;
}
nav.m-menu ul li a:hover{color:#164896; text-decoration:none; background:url(../images/sub/bg_gnb-m.png) left center no-repeat !important;}
nav.m-menu ul li a { line-height:60px !important; font-size:20px !important;}

.submenu {              	/* 하위 메뉴 스타일 설정 */
	width:94% !important;
	height:120px !important;
	position:relative;  
	transition: height 0.5s; 
	-webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    -ms-transition: height 0.5s;
	left:0px; top:0px; overflow:visible;
	background:#003366 !important;
	margin-left:3% !important;
	margin-bottom:10px !important;
}
nav.m-menu ul li ul li { line-height:40px !important; text-align:center !important;background:#003366 !important;	border-bottom:1px solid #4d7194 !important;}
nav.m-menu ul li ul li a { font-size:16px !important;}
nav.m-menu ul li:hover .submenu { /* 상위 메뉴에 마우스 모버한 경우 그 안의 하위 메뉴 스타일 설정 */
	height:120px !important;           /* 높이 설정 */
}

}