<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" session="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta http-equiv="content-language" content="ko">
<meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1" />
<title><spring:message code="sys.name" /></title>
<%-- <link type="text/css" rel="stylesheet" href="<c:url value='css/reset.css'/>" > --%>
<script type="text/javascript" src="js/jquery_3.3.1.min.js"></script>
<!-- <script type="text/javascript" src="/js/lib/jquery-1.12.4.min.js"></script> -->
	<script type="text/javascript" src="/js/lib/jquery-ui.min.js"></script>
<style>
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	text-decoration: none;
	list-style: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-family:  "Nanum Gothic", sans-serif;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
	.hide{display:none}
	 clearfix{*zoom:1;}
	 .clearfix:after{display:block;clear:both;content:'';}
	 .inner{width:970px;margin:0 auto;}
	 .sr_only{position:absolute;left:-99999px;}
	 #wrap{width:100%;}
	 .loginBox{width:430px;height:610px;margin:150px auto 0;background-color:#b8b8b8;}
	 .loginBox > .loginBox_TopBar{position:relative;width:100%;height:50px;background-color:#4272b2;}
	 .loginBox > .loginBox_TopBar > ul{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:300px;height:40px;background-color:pink;}
	 .loginBox > .loginBox_TopBar > ul > li{float:left;width:150px;height:40px;background-color:#535151;}
	 .loginBox > .loginBox_TopBar > ul > li.on{background-color:#fff;}
	 .loginBox > .loginBox_TopBar > ul > li > a{display:block;width:100%;height:100%;line-height:40px;text-align:center;font-size:14px;font-weight:600;color:#b9b9b9;letter-spacing:1.5px;}
	 .loginBox > .loginBox_TopBar > ul > li > a.on{color:#4272b2;}
	 .loginBox > .loginBox_BotBar{position:relative;width:100%;height:560px;background-color:green;}
	 .loginBox > .loginBox_BotBar > .external{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff;z-index:99999;}
	 .loginBox > .loginBox_BotBar > .external > .hellow{width:100%;height:200px;}
	 .loginBox > .loginBox_BotBar > .external > .hellow > h3{position:relative;padding-top:80px;text-align:center;font-size:45px;font-weight:600;color:#4272b2;}
	 .loginBox > .loginBox_BotBar > .external > .hellow > h3:after{position:absolute;bottom:-25px;left:50%;transform:translateX(-50%);font-size:16px;color:#222;content:'이곳은 외사정보시스템입니다';}
	 .loginBox > .loginBox_BotBar > .external > .id_pw{width:100%;height:90px;}
	 .loginBox > .loginBox_BotBar > .external > .id_pw > div > ul{height:45px;}
	 .loginBox > .loginBox_BotBar > .external > .id_pw > div > ul > li{float:left;font-size:17px;font-weight:600;color:#4272b2;line-height:45px;text-align:center;}
	 .loginBox > .loginBox_BotBar > .external > .id_pw > div > ul > li:first-child{width:100px;height:100%;}
	 .loginBox > .loginBox_BotBar > .external > .id_pw > div > ul > li > input{display:block;width:300px;height:30px;margin-top:5px;padding-left:10px;border:1px solid #4272b2;color:#222;letter-spacing:2px;}
	 .loginBox > .loginBox_BotBar > .external > .id_pw > .id_section{width:100%;height:45px;}
	 .loginBox > .loginBox_BotBar > .external > .id_pw > .pw_section{width:100%;height:45px;}
	 .loginBox > .loginBox_BotBar > .external > .remember_id{position:relative;width:100%;height:30px;line-height:30px;}
	 .loginBox > .loginBox_BotBar > .external > .remember_id > input[type="checkbox"]{width:20px;height:20px;padding:0;margin:0;position:absolute;top:50%;right:120px;transform:translateY(-50%);background-color:transparent;border:2px solid #4272b2;overflow:hidden;}
	 .loginBox > .loginBox_BotBar > .external > .remember_id > label{position:absolute;top:45%;right:20px;transform:translateY(-50%);}
	 .loginBox > .loginBox_BotBar > .external > .remember_id > label > span{font-size:13px;}
	 .loginBox > .loginBox_BotBar > .external > .login_Sign{width:100%;height:110px;}
	 .loginBox > .loginBox_BotBar > .external > .login_Sign > div{width:400px;height:40px;margin:0 auto;}
	 .loginBox > .loginBox_BotBar > .external > .login_Sign > .login{margin-top:5px;margin-bottom:10px;background-color:#4272b2;}
	 .loginBox > .loginBox_BotBar > .external > .login_Sign > .login > input{width:100%;height:100%;font-size:16px;background-color:#4272b2;outline:none;border:none;color:#fff;cursor:pointer;}
	 .loginBox > .loginBox_BotBar > .external > .login_Sign > .sign{position:relative;text-align:center;background-color:#4272b2;}
	 .loginBox > .loginBox_BotBar > .external > .login_Sign > .sign > a{display:block;line-height:40px;font-size:16px;letter-spacing:3px;color:#fff;}
	 .loginBox > .loginBox_BotBar > .external > .login_Sign > .sign:after{position:absolute;bottom:-35px;left:50%;transform:translateX(-13%);width:230px;font-size:12px;line-height:1.4em;text-align:right;content:'사용자 외에는 접근할 수 없도록 개인정보를 잘 관리하여 주시기 바랍니다';}
	 .loginBox > .loginBox_BotBar > .external > .logo{margin:40px auto 0;width:182px;height:53px;text-indent:-99999px;background-image:url(/images/new/logo.png);*/ background-repeat:no-repeat;background-size:contain;}
	 .loginBox > .loginBox_BotBar > .ocean{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#e04b78;}
	footer {
          margin-top: 89px;
           width: 100%;
           height: 100px;
           background-color: #191919; color: #fff;}

          h1 {float: left; display: block; margin-top: 13px; margin-left: 100px;width: 108px; height: 72px; text-indent: -99999px; background-image: url(/images/new/f_logo.png); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;}
          address {float: left; margin-left: 30px; margin-top: 13px;}
          .topic {position: relative; font-size: 22px; margin-bottom: 10px; font-weight: 600; letter-spacing: 3px;}
          .topic:after {position: absolute; top: 50%; right: -100px; width: 77px; height: 59px; background-image: url(/images/new/w3c.png); background-size: cover; content: '';}
          .f_info {width: 100%;}
          .f_info ul {;}
          .f_info ul li {display: block; font-size: 12px; font-weight: normal; line-height: 1.7em;}

        .mVisual_img {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
        .mVisual_img ul li{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; text-indent: -99999px;}
        .mVisual_img ul li:nth-child(1) {background-image: url(/images/new/img01.jpg);}
        .mVisual_img ul li:nth-child(2) {background-image: url(/images/new/img02.jpg);}
   </style>
</head>
<body>
    <form:form name="detailForm" action="/j_spring_security_check" onsubmit="return fn_egov_login();">
    <div id="wrap">
        <h2 class="sr_only">통합홈페이지입니다.</h2>
        <div class="mVisual_img">
            <ul>
                <li>img1</li>
                <li>img2</li>
            </ul>
        </div>
        <div class="inner">
            <div class="loginBox">
                <div class="loginBox_TopBar"><!--상단 버튼-->
                    <ul class="clearfix">
                        <li class="on"><a href="#" class="on">외사정보시스템</a></li>
                        <li><a href="http://10.29.9.40">국제해양정보시스템</a></li>
                    </ul>
                </div><!-- end of loginBox_TopBar -->
                <div class="loginBox_BotBar">
                <input type=hidden name=login_error value="${login_error}" />
                    <div class="external">
                        <div class="hellow">
                            <h3>반갑습니다</h3>
                        </div><!--end of hellow -->
                        <div class="id_pw">
                            <div class="id_section"><!--아이디 input-->
                                <ul class="clearfix">
                                    <li>
                                        아이디
                                    </li>
                                    <li class="id_val">
                                        <!-- <input type="text" class="ID_123" name="ID" placeholder="아이디를 입력하세요."> -->
                                        <input type="text" name="j_username" maxlength="16" title="id" placeholder="아이디를 입력하세요."/>
                                    </li>
                                </ul>
                            </div><!--end of id_section-->
                            <div class="pw_section"><!--패스워드 input-->
                                <ul class="clearfix">
                                    <li>
                                        패스워드
                                    </li>
                                    <li>
                                        <input type="password" class="PW_val" name="j_password" placeholder="패스워드를 입력하세요.">
                                    </li>
                                </ul>
                            </div><!--end of pw_section-->
                        </div><!--end of id_pw-->
                        <div class="remember_id"> <!--아이디 저장하기 버튼-->
                            <input type="checkbox" class="check_id" name="remember_id" value="">
                            <label for="c1">
                                <span>아이디 저장하기</span>
                            </label>
                        </div><!--end of remember_id -->
                        <div class="login_Sign"> <!--로그인, 회원가입 버튼-->
                            <div class="login">
                            	<input type="submit" title="submit" class="login-btn" value="<spring:message code="member.login" />"/>
                            </div><!-- end of login -->
                            <!-- <div class="sign">
                                <a href="#">회원가입</a>
                            </div> --><!--end of sign -->
                        </div><!--end of login_Sign-->
                        <p class="logo">logo</p><!--하단 로고 deco-->
                    </div><!-- end of external -->
                    <div class="ocean">

                    </div><!-- end of ocean -->
                </div><!-- end of loginBox_BotBar -->

            </div><!--end of loginBox-->

        </div><!--end of inner -->
        <footer>
            <div class="inner clearfix">
                <h1>logo</h1>
                <address>
                    <div class="topic">
                        외사 및 국제 정보시스템
                    </div>
                    <div class="f_info">
                        <ul>
                            <li>
                                30128 세종특별자치시 정부2청사로 13 (나성동) TEL 044-205-2469 | FAX 044-205-8995
                            </li>
                            <li>
                                COPYRIGHT(C)2011 MINISTRY OF REPUBLIC ADMINISTRATION AND SECURITY. ALL RIGHT RESERVED
                            </li>
                        </ul>
                    </div><!--end of f_info -->
                </address>
            </div><!--end of inner -->
        </footer>
    </div><!--end of wrap-->
      </form:form>
</body>
<script type="text/javascript">
		
		function getCookie(cname) {
		    var name = cname + "=";
		    var decodedCookie = decodeURIComponent(document.cookie);
		    var ca = decodedCookie.split(';');
		    for(var i = 0; i <ca.length; i++) {
		        var c = ca[i];
		        while (c.charAt(0) == ' ') {
		            c = c.substring(1);
		        }
		        if (c.indexOf(name) == 0) {
		            return c.substring(name.length, c.length);
		        }
		    }
		    return "";
		}
		
		$(document).ready(function(){
			if (getCookie("popupOpenAnymore") != "Y") {
				$('#divBrowserSetting').dialog({
					width: 630
				});
			}
			
			// ContextMenu 방지 코드
			$(document).contextmenu(function(){
				return false;
			});
			
			$('#divBrowserSetting').on('dialogclose', function(event) {
				if ($('#chkOpenAnymore').is(':checked'))
					var todayDate = new Date();
					todayDate.setDate(todayDate.getDate() + 7);
					document.cookie = "popupOpenAnymore=Y; path=/; expires=" + todayDate.toGMTString() + ";"
			});
			
			
			document.detailForm.j_username.focus();
			  
			$('.tab a').on('click', function(e) {
				e.preventDefault();
		
				$(this).parent().addClass('active');
				$(this).parent().siblings().removeClass('active');
		
				var href = $(this).attr('href');
				$('.forms > form').hide();
				$(href).fadeIn(500);
			});
			
		
			var error = document.detailForm.login_error.value;
			if(error == 1){
				alert('${sessionScope["SPRING_SECURITY_LAST_EXCEPTION"].message}');
			}
		});
		
		/* 로그인 function */
		function fn_egov_login() {
			mberId = document.detailForm.j_username.value;
			password = document.detailForm.j_password.value;
			
			if(mberId == "" && password == ""){
				alert("<spring:message code="member.blankBoth" />");
				return false;
			}else if(mberId != "" && password == ""){
				document.detailForm.j_password.focus();
				alert("<spring:message code="member.blankPass" />");
				return false;
			}else if(password != "" && mberId == ""){
				document.detailForm.j_username.focus();
				alert("<spring:message code="member.blankId" />");
				return false;
			}
			
			return true;
		}
		
		
		$(function(){
	           var $img = $(".mVisual_img ul li");
	           var nowIdx = 0;
	           var oldIdx = nowIdx;
	           console.log($img.length)

	            function nextFnc() {
	                $img.eq(nowIdx).stop().fadeIn(600);
	                $img.eq(oldIdx).stop().fadeOut(600);

	                oldIdx = nowIdx;
	            }

	            function nextIdx() {
	                if(nowIdx == $img.length-1) {
	                    nowIdx = 0
	                }else {
	                    nowIdx++
	                }
	            }

	            function start() {
	                setInterval(function(){
	                    nextFnc();
	                    nextIdx();
	                    console.log(nowIdx)
	                },4000)
	            }

	            $(document).ready(function(){
	                nowIdx = $img.index($(this));
	                $img.hide().eq(0).show();
	                start();
	            });

	           $("#wrap").height($(window).height);
	           $(".mVisual_img").height($(window).height);

	       });
	</script>
</html>
