<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="kc" uri="/WEB-INF/tlds/kcc_tld.tld"%>
<%@ page
	import="egovframework.rte.fdl.security.userdetails.util.EgovUserDetailsHelper"%>

<script type="text/javascript">
	$(document).ready(
			function() {
				// 탑메뉴
				$("nav#menu ul.depth01").find('li').each(
						function(index, item) {
							$($(this).find('a')[0]).attr(
									'href',
									$($(this).find('.depth02').find('a')[0])
											.attr('href'));
						});

				//사이트맵
				$('.full_menu ul.depth01').find('li').each(
						function(index, item) {
							$($(this).find('a')[0]).attr(
									'href',
									$($(this).find('.depth02').find('a')[0])
											.attr('href'));
						});
			});

	/* 화면 확대 축소 */
	var nowZoom = 100;

	function zoomOut() { // 화면크기축소
		nowZoom = nowZoom - 10;
		if (nowZoom <= 70)
			nowZoom = 70; // 화면크기 최대 축소율 70%
		zooms();
	}

	function zoomIn() { // 화면크기확대
		nowZoom = nowZoom + 10;
		if (nowZoom >= 200)
			nowZoom = 200; // 화면크기 최대 확대율 200%
		zooms();
	}

	function zooms() {
		document.body.style.zoom = nowZoom + "%";
	}

	function depthTwoClick(obj) {
		var url = $($(obj).parent().find('ul.menu_depth03 li:first-child a'))
				.attr('href');
		if ($(obj).parents('[class]').first().attr('class') == 'm_sub_menu') {
			url = $($(obj).parent().find('ul.m_sub_depth02 li:first-child a'))
					.attr('href');
		}
		if (typeof url != 'undefined') {
			location.href = url;
		}
	}

	function searchTotalHeader() {
		$('#searchFormHeader #totalSearchKeyword').val(
				$('#searchTextHeader').val());
		$('#searchFormHeader').attr("action", "/web/usr/search/totalSearch.do")
		$('#searchFormHeader').submit();
	}
</script>

<form id="searchFormHeader" name="searchFormHeader"
	action="/web/usr/search/totalSearch.do" method="post">
	<input type="hidden" id="totalSearchKeyword" name="totalSearchKeyword"
		value="" />
</form>

<!-- skip메뉴 -->
<div class="skip_menu">
	<a href="#sub" class="contGo" title="본문 바로가기">본문 바로가기</a>
</div>

<!-- ============== header ============== -->
<header class="header">
	<style>
.mobile_nav, .sitemap {
	display: none;
}

.mobile_nav.active, .sitemap.active {
	display: flex !important;
}
</style>
	<div class="header_container">
		<div class="inner">
			<h1 class="logo">
				<a href="/web/main/mainPage.do"><img
					src="/publish/usr/images/common/logo.png" alt=""></a>
			</h1>
			<nav>
				<ul class="gnb">
					<c:forEach var="menu1" items="${menuResultList}">
						<c:if test="${menu1.depths eq '1'}">
							<li><a href="#" class="depth01"> <c:out
										value="${menu1.menuNm}" />
							</a>
								<div class="depth02_container">
									<ul class="depth02_ul">
										<c:forEach var="menu2" items="${menuResultList}">
											<c:if
												test="${menu2.depths eq '2' && menu2.upperMenuId eq menu1.menuNo}">
												<li><a
													href="${menu2.menuType ne 'M' ? menu2.url : '#'}"
													class="depth02"
													${menu2.menuType eq 'O' ? 'target="_blank"' : '' }> <c:out
															value="${menu2.menuNm}" />
												</a></li>
											</c:if>
										</c:forEach>
									</ul>
								</div></li>
						</c:if>
					</c:forEach>
				</ul>
			</nav>

			<ul class="header_util">
				<!-- <li><button type="button" class=""><i></i></button></li> -->
				<!-- <li><button type="button" class="btn_search" title="전체메뉴 보기"><i></i></button></li> -->
				<li>
					<div class="lang_switch">
						<i class="icon lang"></i>
						<button type="button" class="active">KOR</button>
						<button type="button" class="">ENG</button>
					</div>
				</li>
				<li><button type="button" class="btn_sitemap" title="전체메뉴 보기">
						<i></i>
					</button></li>
			</ul>
		</div>
	</div>

	<nav class="mobile_nav">
		<div class="mobile_nav_top">
			<h1 class="logo">
				<a href="/web/main/mainPage.do"><img
					src="/publish/usr/images/common/logo.png" alt=""></a>
			</h1>
			<button type="button" class="btn_close">
				<i class="icon close"></i>
			</button>
		</div>
		<ul class="gnb">
			<c:forEach var="menu1" items="${menuResultList}">
				<c:if test="${menu1.depths eq '1'}">
					<li>
						<button type="button" class="depth01">
							<c:out value="${menu1.menuNm}" />
							<i class="icon arrow bottom"></i>
						</button>
						<ul class="depth02_ul">
							<c:forEach var="menu2" items="${menuResultList}">
								<c:if
									test="${menu2.depths eq '2' && menu2.upperMenuId eq menu1.menuNo}">
									<li><a href="${menu2.menuType ne 'M' ? menu2.url : '#'}"
										class="depth02"
										${menu2.menuType
                                eq 'O' ? 'target="_blank"' : '' }>
											<c:out value="${menu2.menuNm}" />
									</a></li>
								</c:if>
							</c:forEach>
						</ul>
					</li>
				</c:if>
			</c:forEach>
		</ul>
	</nav>

	<nav class="sitemap">
		<div class="sitemap_top inner">
			<h1 class="logo">
				<a href="/web/main/mainPage.do"><img
					src="/publish/usr/images/common/logo.png" alt=""></a>
			</h1>
			<button type="button" class="btn_close">
				<i class="icon close"></i>
			</button>
		</div>
		<div class="inner">
			<ul class="sitemenu">
				<c:forEach var="menu1" items="${menuResultList}">
					<c:if test="${menu1.depths eq '1'}">
						<li><a href="#" class="depth01"> <c:out
									value="${menu1.menuNm}" />
						</a>
							<ul class="depth02_ul">
								<c:forEach var="menu2" items="${menuResultList}">
									<c:if
										test="${menu2.depths eq '2' && menu2.upperMenuId eq menu1.menuNo}">
										<li><a href="${menu2.menuType ne 'M' ? menu2.url : '#'}"
											class="depth02"
											${menu2.menuType
                                  eq 'O' ? 'target="_blank"' : '' }>
												<c:out value="${menu2.menuNm}" />
										</a></li>
									</c:if>
								</c:forEach>
							</ul></li>
					</c:if>
				</c:forEach>
			</ul>
		</div>
	</nav>
</header>
<!-- ============== header 끝 ============== -->