<?php 
include_once('./common.php');

?>
<script
 src="https://code.jquery.com/jquery-3.6.0.min.js"
 integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
 crossorigin="anonymous"></script>
<link rel="stylesheet" href="<?=G5_JS_URL?>/font-awesome/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">
<!-- 그누보드 내부에서는 아래 코드만 복사하여 사용이 가능합니다. 
그누보드 head.php 혹은 tail.php를 포함하지 않는 페이지에서는 상단의 코드와 함께 꼭 css초기화 코드를 함께 넣어주셔야 정상적으로 작동 합니다.
-->
<style>
/* 초기화 시작 _ 그누보드 외부 페이지에서 사용하는 초기화 코드입니다. */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size:0.75em;font-family:'Malgun Gothic', dotum, sans-serif;background:#fff}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Malgun Gothic', dotum, sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Malgun Gothic', dotum, sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'Malgun Gothic', dotum, sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
-webkit-box-shadow:0 0 5px #9ed4ff;
-moz-box-shadow:0 0 5px #9ed4ff;
box-shadow:0 0 5px #9ed4ff;
border:1px solid #558ab7 !important;
}

/* 초기화 코드 종료_ 그누보드 내 에서는 위 초기화 코드를 삭제 후 사용해주시면 됩니다. */

#sitemap { font-size:20px; padding:5px 20px; background:#222; color:#fff; }

#phantom_sitemap_gnb {width:100%; color:#fff; padding:20px 15px; background:#333; display:inline-block; }
#phantom_sitemap_gnb .wrap_menu { width:100%; max-width:1200px; margin:0 auto; }
#phantom_sitemap_gnb .wrap_menu ul { width:100%; display:flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; }
#phantom_sitemap_gnb .wrap_menu ul li { width:calc(25% - 10px); margin:15px 5px; background:#222; font-size:14px; text-align:left; padding:30px; letter-spacing:-1px; }
#phantom_sitemap_gnb .wrap_menu ul li h1 a { position:relative; color:#fff; display:block; font-size:18px; margin-bottom:15px; padding-bottom:15px; border-bottom:2px solid #fff; } 
#phantom_sitemap_gnb .wrap_menu ul li p { margin-bottom:10px; color:#ccc; transition:0.2s ease all; }
#phantom_sitemap_gnb .wrap_menu ul li p:hover { color:#fff; transition:0.2s ease all; }
.gnb_menu_btn {cursor:pointer; }

.sitemap_modal{display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgb(0, 0, 0); background-color:rgba(0, 0, 0, 0.4); }
.sitemap_modal_content {z-index:99; margin:8% auto; padding:40px; max-width:1200px; background-color:#fff; border:1px solid #dcdcdc; border-top:5px solid #000; position:relative; width:100%; -webkit-box-shadow:0 3px 8px 0 rgba(0, 0, 0, 0.4); -moz-box-shadow:0 3px 8px 0 rgba(0, 0, 0, 0.4); box-shadow:0 3px 8px 0 rgba(0, 0, 0, 0.4); -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; }
.sitemap_modal_content .subject { width:100%; word-break:keep-all; text-align:left; font-size:24px; letter-spacing:-1px; color:#222; font-weight:600; padding:15px 0px; padding-top:0; }
.sitemap_modal_content .content { position:relative; overflow-y:scroll; max-height:500px; margin-bottom:0; width:100%; text-align:center; font-size:14px; letter-spacing:-1px; color:#222; font-weight:600; }
.sitemap_modal_content .content textarea { border:none; resize:none; width:100%; height:auto; overflow-y:scroll; overflow-x:hidden; padding:15px; background:#f9f9f9; min-height:400px; clear:both; }
.sitemap_modal_content .close { position:absolute; top:40px; right:40px; font-weight:100; font-size:24px; }
.sitemap_modal_content .close i:hover { cursor:pointer; }

@media (max-width:1024px) {
#phantom_sitemap_gnb .wrap_menu ul li { width:100%; margin:0; margin-bottom:15px; }
#phantom_sitemap_gnb .wrap_menu ul li:nth-last-child(1) { margin-bottom:0; }
.sitemap_modal_content { width:96%; padding:20px;}
#phantom_sitemap_gnb .wrap_menu ul li h1 a, .sitemap_modal_content .subject { font-size:min(16px, 4vw); }
.sitemap_modal_content .close { top:20px; right:20px; font-size:min(16px, 4vw); }
.sitemap_modal_content { height:90%; }
.sitemap_modal_content .content { max-height:94%; }
}
</style>

<a id="sitemap">사이트맵</a>

<div class="sitemap_modal sitemap">
	<div class="sitemap_modal_content">
		<div class="subject">팬텀디자인 사이트맵</div>
			<!-- 닫기 시작 -->
			<span class="close" onClick="sitemap_close(); ">
				<i class="fa fa-times" aria-hidden="true"></i>
			</span>
			<!-- 닫기 종료 -->
		<div class="content">
			<div id="phantom_sitemap_gnb">
				<div class="wrap_menu">
					<ul>
						<?php
						$sql = " select *
									from {$g5['menu_table']}
									where me_use = '1'
									and length(me_code) = '2'
									order by me_order, me_id "; 
						$result = sql_query($sql, false); 
						$gnb_zindex = 999; // gnb_1dli z-index 값 설정용
						for ($i=0; $row=sql_fetch_array($result); $i++) {
							 echo '<li>'; 
						?>
						<h1><a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>"><?php echo $row['me_name'] ?></a></h1>
						<?php
						$cells++; 
						$sql2 = " select *
									 from {$g5['menu_table']}
									 where me_use = '1'
									 and length(me_code) = '4'
									 and substring(me_code, 1, 2) = '{$row['me_code']}'
									 order by me_order, me_id "; 
						$result2 = sql_query($sql2); 

						for ($k=0; $row2=sql_fetch_array($result2); $k++) {
						?>
						<a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><p><?php echo $row2['me_name'] ?></p></a>
						<?php 
							}
						}
						echo '</li>'; 
						?>
					</ul>
				</div>
			</div>
		</div>
  </div>
</div>


<script type="text/javascript">
  //모달을 페이지 로딩시 자동으로 띄워줌
  jQuery('#sitemap').click(function() {
      $('.sitemap').show(); 
  }); 
  //닫기버튼을 누르면 모달을 숨김
   function sitemap_close(flag) {
     $('.sitemap').hide(); 
  }; 
	$(document).mouseup(function (e){
		var container = $('.sitemap'); 
		if( container.has(e.target).length === 0){
		container.css('display','none'); 
		}
	}); 
</script>