@charset "utf-8";

/*=======================================================
						LOGIN
=======================================================*/

/* Login SaveID Checkbox */
.login_checkbox_wrap { position:relative; }
.login_checkbox_wrap .checkbox-inline { padding-left:27px; line-height: 22px; }
.login_checkbox_wrap .checkbox-inline .checkbox-custom { opacity:0; margin:0; outline:none; cursor:pointer; position:absolute; top:0; left:0; width:22px; height:22px; }
.login_checkbox_wrap .checkbox-inline .checkbox-custom-dummy { margin:0; outline:none; cursor:pointer; pointer-events:none;  position:absolute; top:0; left:0; width:22px; height:22px; background:url('../images/login/check_bg.png') no-repeat center; }
.login_checkbox_wrap .checkbox-inline .checkbox-custom-dummy:after { opacity:0; content:''; position:absolute; margin:0; top:0; left:0; width:22px; height:22px; background:url('../images/login/check_bg_o.png') no-repeat center; }
.login_checkbox_wrap .checkbox-inline .checkbox-custom:focus { outline:none; }
.login_checkbox_wrap .checkbox-inline .checkbox-custom:checked + .checkbox-custom-dummy:after { opacity:1; }

.login_box_wrap { width:100%; height:100%; background:#f8f8f8; background-size:cover; }
.login_box_wrap .login_box { padding:15px; width:100%; text-align:center;}
.login_box_wrap .login_box .login_hello {padding:15px 0;}
.login_box_wrap .login_box .login_hello > h1 {font-size:1.525em;}
.login_box_wrap .login_box .login_hello p img {width: 100px;}
.login_box_wrap .login_box .login_hello > p {padding:0 0 10px; }
.login_box_wrap .login_box .login_form {width:100%; margin:0 auto;}
.login_box_wrap .login_box .login_form li {padding:5px 0; }
.login_box_wrap .login_box .login_form .save_id {text-align:left; color:#959595; }
.login_box_wrap .login_box .form_login {padding:0 10px; border-radius:2px; height:50px; width:100%; background:#fff; border:1px solid #d9d9d9; font-size:16px; }
.login_box_wrap .login_box .btn_login {padding:0 30px; border-radius:2px; height:50px; width:100%; color:#fff; background:#0978e1; font-size:1em; outline:none; border:0; cursor:pointer; transition:all 150ms ease-in;}
.login_box_wrap .login_box .btn_login:hover {background:#0053a1;}
.login_box_wrap .login_box .member_menu {padding:10px 0; }
.login_box_wrap .login_box .member_menu > ul li {display:block; padding:0 0 10px 0; line-height:1em; font-size:0.95em; color:#959595; border-left:none; }
.login_box_wrap .login_box .member_menu > ul li:first-child {border:0; }

@media (min-width: 400px){
	.login_box_wrap .login_box .member_menu > ul li {display:inline-block; padding:0 10px; border-left:1px solid #d2d2d2; }
}

@media (min-width: 580px){
	.login_box_wrap .login_box { width:600px; margin-left: auto; margin-right: auto; padding:100px; }	
	.login_box_wrap .login_box .login_form { margin:0 auto; }
    .login_box_wrap .login_box .login_hello p img {width: 130px;}
}
@media (min-width: 1200px){
	.login_box_wrap { padding-top:40px; padding-bottom: 75px; }	
}


.login_box_wrap.simple { min-height:auto; background:#fff; padding-top:50px; }
.login_box_wrap.simple .login_box {margin:0; padding:20px; width:auto; text-align:center; border-radius:0; background:#fff; border-width:0; }
.login_box_wrap.simple .login_box .login_hello {padding:15px 0; }
.login_box_wrap.simple .login_box .login_hello > h1 {font-size:2em; font-weight:600; }
.login_box_wrap.simple .login_box .login_hello > h1:after {display:block; padding-top:15px; font-size:13px; color:#898989; font-weight:normal; content:"로그인 후 서비스를 이용하세요."; }
.login_box_wrap.simple .login_box .login_hello > p {display:none; }
.login_box_wrap.simple .login_box .login_form .save_id {text-align:left; padding-left:0; color:#959595; }
.login_box_wrap.simple .login_box .form_login {padding:0 20px; border-radius:0; height:54px; }
.login_box_wrap.simple .login_box .btn_login {padding:0 20px; border-radius:0; height:54px; font-weight:600; }
.login_box_wrap.simple .login_box .save_id {padding-bottom:10px; }
.login_box_wrap.simple .login_box .member_menu {padding:15px 0 0; }
.login_box_wrap.simple .login_box .member_menu > ul li:first-child {border:0; }

@media (min-width: 400px){
	.login_box_wrap.simple .login_box .member_menu > ul li {display:inline-block; padding:0 10px; border-left:1px solid #d2d2d2; }
}

@media (min-width: 580px){
	.login_box_wrap.simple .login_box { width:480px; margin-left: auto; margin-right: auto; }	
	.login_box_wrap.simple .login_box .login_form { margin:0 auto; }
}