/*
------------------------------------------------------------
 * @프로그램명 : login 스타일시트
 * @파일명 : login.css
 * @작성일 : 2020. 11. 26.
 * @작성자 : 엄윤섭
------------------------------------------------------------
*/

/* 로그인 */
.login_body {height:100vh; position:relative; background-color:#2E3B41; background-size:auto 135%; padding-top:48%;}
.login_area {position:absolute; top:0; left:33.3%; bottom:0; width:33.4%; background:rgba(255,255,255,0.80); background-size:auto 135%; padding:15vh 5vh 0;}
.login_left {position:absolute; top:0; bottom:0; left:0; width:33.3%; height:100%; background-color:#2E3B41; background-size:cover;}
.login_right {position:absolute; top:0; bottom:0; right:0; width:33.3%; height:100%; background-color:#2E3B41; background-size:cover;}

.login_area .loginTitle {padding:10px 0 60px 0;margin:0;position:relative;text-align:center;font-size:85px;color:#ffffff;overflow:hidden;}
.login_area .loginTitle:after{display:block;content:'';clear:both;}

.login_area .loginTitle h1,
.login_area .loginTitle h2 {display:block;width:100%;}
.login_area .loginTitle h1 {background:url(/resources/images/common/login_logo_new.png) 0 0 no-repeat; background-size: 170px; text-indent:-9999px; line-height:120px; background-position:center;}
.login_area .loginTitle h2 {padding:20px 0 0 0;height:70px;line-height:50px; font-size:25px; color:#606060; font-family:NanumBarunGothic;}

.login_area .group {padding:20px 0 0 0;position:relative;border-bottom:2px solid #c0c0c0;}
.login_area .group input.inputMaterial {display:block;width:100%;height:40px;line-height:40px;padding:0 10px;color:#000;font-size:18px;}
.login_area .group input.inputMaterial:focus{outline:none;background-color:transparent}
.login_area .group input.inputMaterial:focus ~ label, .inputMaterial:valid ~ label {top:-5px; font-size:14px; color:#000;}
.login_area .group input[type="password"]{font-family:'Malgun Gothic' !important;}
.login_area .group input::placeholder {color:#808080;}

.login_area .group .form_clear {z-index:10; pointer-events:auto; cursor:pointer;}
.login_area .group .btn_clear {width:40px;height:40px;line-height:40px;position:absolute;top:20px;right:0;color:#b8b8b8;text-align:center;font-family:'Glyphicons Halflings';font-style:normal;font-weight:400;-webkit-font-smoothing:antialiased;cursor:pointer;}
.login_area .group .btn_clear::before {content:"\e014";}
.login_area .group .glyphicon::-ms-clear {display:none;}

.login_area .login_function_area {text-align:right; margin:10px 0 30px; position:relative;}
.login_area .login_function_area .border-checkbox-section .border-checkbox-group{padding-top:10px;}
.login_area .login_function_area .border-checkbox-section {position:absolute; left:0; top:0;}
.login_area .login_function_area .border-checkbox-section .border-checkbox-label {color:#000; font-weight:normal; font-size:13px;}
.login_area .login_function_area .border-checkbox-section .border-checkbox-group-default .border-checkbox-label:before {width:15px; height:15px; left:10px; top:2px;}
.login_area .login_function_area .border-checkbox-section .border-checkbox-group-default .border-checkbox-label:after {height: 10px; left:12px; top:10px;}

.login_area .login_function_area a.pw_reset {display:inline-block; border:none; background:none; padding:0; margin:0; transition:0.2s; font-size:16px; font-weight:400; color:#fff;}
.login_area .login_function_area a.pw_reset:hover {color:#257bca;}

.login_area .login_btn {background-color:#2E3B41; border:none; color:#ffffff; font-size:18px; width:100%; height:50px; display:block; margin:90px auto 0; letter-spacing:0px; text-align:center; cursor:pointer; -webkit-transition:all 0.2s linear 0s; -o-transition:all 0.2s linear 0s; transition:all 0.2s linear 0s;}
.login_area .login_btn:hover, 
.login_area .login_btn:focus, 
.login_area .login_btn:active {background-color:#566369;}

.login_area #div_memberJoin {cursor:pointer; color:#154fa7; text-align:right; font-size:14px; font-weight:700;}
.login_area #div_memberJoin {margin-top:15px; text-align:right; float:right; padding:10px; margin-right:-10px; color:#fff; font-size:14px; font-weight:700; cursor:pointer; transition:0.2s; display:inline-block;}
.login_area #div_memberJoin:hover {color:#3041bf;}

.login_area #loading {width:100%; height:100%; line-height:100%; position:absolute; top:0; left:0; opacity: 0.5; background: white; z-index: 99;font-size:0;display:flex; justify-content:center;
            align-items:center;}
.login_area #loading > img {margin:auto; z-index:100;}

/* 반응형 */
/* @media all and (max-width:500px){ */
/* 	.login_area {width:100%;padding:60px 40px;margin-left:inherit;left:inherit;} */
/* } */

/* 모바일 */
/* @media all and (max-width:480px){
	.bg-white{background-color: #2e3b41;color: #717171}
	.login_body{background-color:#2e3b41;}
	
 	.login_area {width:100%;padding:60px 40px;margin-left:inherit;left:inherit;}	
	.login_area .loginTitle{padding:0 0 30px;}
	.login_area .loginTitle h2 {float:left;display:block;width:50%;height:50px;line-height:50px;font-size:20px;text-align:right;}
} */

@media screen and (max-width:800px) {
	.login_body {width:100%; height:100vh; background-size:auto 100%; margin:0; position:fixed;}
	.login_area {width:100%; height:100%; left:0; padding-top:10vh; overflow:auto}
	.login_left {display:none;}
	.login_right {display:none;}
}