@charset "utf-8";
/* CSS Document */

@import url('/common/css/font-noto.css');

/* animation */
@keyframes icon_ani {
    0% {background-position: center 0px;}
    20% {background-position: center -5px;}
    40% {background-position: center 0px;}
    60% {background-position: center -5px;}
    100% {background-position: center 0px;}
}

html, body {min-width:320px;height:100%;font-family: 'noto',  'Nanum Gothic', 'Helvetica', sans-serif;font-weight: 400;color: #333;}

/* Login Page */
.login-body {
	background:#f5f5f5 url(../images/login_bg.jpg) no-repeat center;
	background-size:cover;
	width:100%;
	max-width: 100%;
	height: 100%;
	overflow:auto;
	padding:0 0 30px 0;
	margin:0;
}
.login-body .login-box {
	position:absolute;
	margin:auto;
	padding:0;
	width:90%;
	height: 480px;
	top:50%;
	left:50%;
	margin-left:-45%;
	margin-top: -280px;
	vertical-align:top;
}
.login-body .login-box > .container {
	position:relative;
	max-width:100%;
	padding:0;
	width: 800px;
}
.login-body .login-box h1 {
    text-align: center;
	display: flex;
    justify-content: center;
    align-items: center;
}
.login-body .login-box h1 img {
	width: 184px;
}
.login-body .login-box h1 > span {
    position: relative;
    font-size: 22px;
    color: #fff;
    padding-left: 1.3rem;
    margin-left: 1rem;
}
.login-body .login-box h1 > span:after {
	content:'';
	position:absolute;
	top: 6px;
	left: 3px;
	display: inline-block;
	width: 1px;
	height: 15px;
	background: rgba(255, 255, 255, 0.55);
}
.login-body .login-box > .container .cont-top {
	background: #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 9px;
	-webkit-box-shadow:0 0 20px rgba(0,0,0,.1);
	box-shadow:0 0 20px rgba(0,0,0,.1);
	padding: 5%;
	margin:20px auto;
}
.login-body .login-box > .container .cont-bottom {
	padding:0;
	width:auto;
	margin:0 auto 50px;
}
.login-body .login-box > .container header h1 {
	margin:0 0 15px 0;
	padding:0;
	font-size:0;
	line-height:1em;
}
.login-body .login-box > .container header h1 > span {
	font-size:22px;
	color:#222;
	display:block;
	line-height:1em;
}
.login-body .login-box > .container header h1 > strong {
	font-size: 30px;
	font-weight: 800;
	display:block;
	line-height:1em;
	color: #002965;
}
.login-body .login-box > .container header .login-img {
	margin:0;
	padding:0;
	position:absolute;
	z-index:10;
	top:-280px;
	right:0;
	background:url(../images/login_img.png) no-repeat right bottom;
	background-size:100% auto;
	width:580px;
	max-width:50%;
	height:340px;
}
.login-body .login-box > .container header h1 .logo {
	margin-bottom:15px;
	display:block;
}
.login-body .login-box > .container header > p {
	font-size: 14px;
	line-height:1.25em;
	color: #010101;
	text-align:justify;
	letter-spacing: -0.05em;
}
.login-body .login-box > .container header > p > strong {
	color:#222;
}
.login-body .login-box > .container .form-signin {
	padding-top:0px;
}
.login-body .login-box > .container .form-signin .form-signin-heading {
	margin:0 0 10px 0;
	padding:0;
	min-height:25px;
	font-size: 22px;
	font-weight: 800;
	color:#000;
	line-height:1em;
	
}
.login-body .login-box > .container .alert-wrap {
	min-height:40px;
}
.login-body .login-box > .container .alert-wrap .alert {
	margin-bottom:0;
	padding-top:9px;
	padding-bottom:9px;
}
.login-body .login-box > .container .user-group {
	padding-top:25px;
}
.login-body .login-box > .container .user-group label {
	font-family: 'Nanum Gothic Bold';
	font-weight:600;
	font-size:14px;
	color:#333;
}
.login-body .login-box > .container .form-signin-group {
	position:relative;
	margin-top:10px;
	margin-bottom:10px;
}
.login-body .login-box > .container .form-group {
	margin-bottom: 10px;
}
.login-body .login-box > .container .form-group .form-control {
	max-width: 67%;
	min-height:40px;
	border: #dcdcdc solid 1px;
	color: #858585;
	font-size: 14px;
}
.login-body .login-box > .container .form-group .form-control:focus {
	font-family: 'Nanum Gothic Bold';
	font-weight:600;
}
.login-body .login-box > .container .btn-login {
	width: 30%;
	min-width: 30%;
	min-height: 90px;
	position:absolute;
	top:0;
	right:0;
	-webkit-box-shadow:0 2px 1px rgba(0,0,0,.2);
	box-shadow:0 2px 1px rgba(0,0,0,.2);
	line-height:73px;
	border: 1px solid #0b366d;
	background: #002965;
}
.login-body .login-box > .container .btn-login.btn-block {
	position:relative;
	width:100%;
	min-width: 100%;
	min-height: 40px;
	line-height: 40px;
}
.login-body .login-box > .container .btn-login:hover,
.login-body .login-box > .container .btn-login:focus {
	background: #043a8a;
}

.login-body .login-box > .container .form-signin-welcome {
	font-family: 'Nanum Gothic Bold';
	font-weight:600;
	font-size:12px;
	margin-top:20px;
	margin-bottom:20px;
}
.login-body .login-box > .container .user-info {
	position:relative;
	margin-bottom:10px;
	padding:35px 20px 20px 20px;
	background:#fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
	min-height:130px;
}
.login-body .login-box > .container .user-info > .alert {
	padding:5px;
	font-size:12px;
}
.login-body .login-box > .container .btn-logout {
	width:30%;
	position:absolute;
	top:35px;
	right:20px;
	text-align:right;
}
.login-body .login-box > .container .btn-logout input {
	margin-bottom:2px;
	width:100%;
}
.login-body .login-box > .container .user-info > img {
    float: left;
    width: 64px;
    height: 64px;
    margin: 0 10px 0 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	border:#fff solid 2px;
	-webkit-box-shadow:0px 0px 8px rgba(0,0,0,.25);
	box-shadow:0px 0px 8px rgba(0,0,0,.25);
}
.login-body .login-box > .container .user-info > .user-id {
	font-size:12px;
	font-family: 'Nanum Gothic Bold';
	font-weight:600;
	display:block;
	line-height:1.25em;
	padding-right:35%;
	padding-top:10px;
}
.login-body .login-box > .container .user-info > .user-name {
	font-size:15px;
	font-family: 'Nanum Gothic Bold';
	font-weight:600;
	color:#424448;
	line-height:1.5em;
	padding-right:35%;
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	word-wrap:normal;
	display:block;
	margin-bottom:15px;
}