@charset "UTF-8";

/*  ------------------------ 로그인 ------------------------  */

	.login #container {display:flex; align-items: center; justify-content: space-around; min-height:100vh; width:100%; background:#fff;}
	
	.login_wrap {display:flex; height:100%; position:relative; vertical-align:middle; padding-bottom:40px;}
	.login_form {display:block; position:relative; margin:0 auto; width:600px; padding:30px;font-size:16px; background:#fff; border: 4px solid var(--main-color); transition: all 0.5s ease-in-out; border-radius:10px; overflow:hidden;}
	.card_body {padding:10px; text-align:center;}
	.login_form h1 {position:relative; padding-bottom:20px;}
	.login_form h1 img {width:200px;}
	.login_form h1 p {margin-top:-20px; margin-bottom:20px;  color:#002C48;}
	.login_form h1 em {display:block; font-size:16px; color:#666;font-style:normal; font-weight:300;}
	.login_form input {display:block; width:100%; height:50px; padding:13px 15px; padding-left:20px; border:0; outline:none; font-size:14px; min-height:31px; line-height:1.5; color:#333;
						transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; border-radius:10px; box-shadow:none; background:#eee;}
	.login_form input::placeholder{color: #656a6c;}
	.login_form input:-ms-input-placeholder{color: #656a6c;}
	.login_form input::-ms-input-placeholder{color: #656a6c;}
	.login_form .id{position:relative; }
	.login_form .id:after{position:absolute; content:url(/images/admin_icon02.png); left:15px; top:50%; transform:translateY(-50%); width:20px; height:20px; }
	.login_form .pw{position:relative; }
	.login_form .pw:after{position:absolute; content:url(/images/admin_icon01.png); left:15px; top:50%; transform:translateY(-50%); width:20px; height:20px; }
	.login_form .pw.none:after{transform:none; margin-top:-22px;}
	.login_form form ul li {margin-bottom:20px;}
	.login_form form ul li.none input {box-shadow:inset 0 0 0 3px #ffafaf;}
	.login_form form ul li.none input:focus {outline:none; background-color:#fbfbfb;}
	.login_form form ul li.none p {margin-top:5px; color:#B10418; font-size:14px; text-align:left;}

	.login_wrap .login_btn button, .login_wrap .login_btn a {display:inline-block; margin:0 auto; padding:10px; border-radius:10px; width:100%; font-size:20px; background:#002C48; border:0; color:#fff; font-weight:400; text-align:center; cursor:pointer; outline:none;
						 -webkit-box-shadow: 0 10px 18px 0 rgba(62, 57, 107, 0.2);
						box-shadow: 0 10px 18px 0 rgba(62, 57, 107, 0.2);
						-webkit-transition: all 0.3s ease-in-out;
						transition: all 0.3s ease-in-out;}
	.login_wrap .login_btn button:hover,
	.login_wrap .login_btn button:focus,
	.login_wrap .login_btn a:hover,
	.login_wrap .login_btn a:focus {background:#000c14; }

	.login_wrap .find_box{display:flex; width:100%; margin-top:10px; height:50px; margin-bottom:10px;}
	.login_wrap .find_box a{position:relative; display:inline-block; width:33%;line-height:50px; font-size:16px;}
	.login_wrap .find_box a + a:after {position:absolute; content:''; width:1px; height:18px; left:0; background:#999; top:50%; transform:translateY(-50%);}
	.login_wrap .find_box a:hover{text-decoration:underline;}
	
	
	.login_wrap .login_etc {padding-top:20px; border-top:1px solid #ebebeb;}
	.login_wrap .login_etc p {font-weight:400; word-break:keep-all; line-height:1.4em;}
	.login_wrap .login_etc .login_btn {margin-top:20px;}
	.login_wrap .login_etc .login_btn button {background:#848484;}

	.login_wrap .login_etc .article {margin:0 0 20px 0; border-radius:20px;}
	.login_wrap .login_etc .article .page_guide {padding:10px 20px; border-radius:12px;}

	.login_bottom {position:absolute; display:block; bottom:0;  padding:10px; width:100%; border-top:1px solid rgba(0,0,0,0.2); text-align:center;}
	.login_bottom p{color:#505050; opacity:.4; font-weight: 300; font-size: 12px;}
	.login_bottom span {font-weight:bold;font-size: 14px;}



@media all and (max-width:640px) {
	.login_wrap  {width:95%;}
}


@media all and (max-width:550px) {
	.login_wrap .login_etc p br {display:none;}
}

@media all and (max-width:480px) {
	.login_form {padding:40px 20px;}
	.card_body {padding:0;}
	.login_form form ul li {margin-bottom:10px;}
	.login_wrap .login_etc .article {margin:0 0 10px 0;}
	.login_wrap .login_etc p {font-size:14px;}
	.login_wrap .login_etc .login_btn {margin-top:10px;}
	.login_wrap .find_box a {font-size:13px;}
	
}