/**
------------------------------------------------------------
 * @프로그램명 : login 스타일시트
 * @파일명 : login.css
 * @작성일 : 2020. 11. 26.
 * @작성자 : 엄윤섭
 * @수정일 : 2023. 05. 10.
 * @수정내역 : MRP시스템용 mrp 폴더로 복사한 뒤 수정
------------------------------------------------------------
*/

.login_body { position:absolute; z-index:100; width:100%; height:100% }
.login_area { background:rgba(255,255,255,0.85); max-width:500px; height:100vh; margin:0 auto; display:flex; align-items:center }
.main_content_wrap  { position:relative; height:100vh }
.main_visual { width:100%; height:100%; margin-left:auto; margin-right:auto; position:fixed; top:0; left:0; right:0; bottom:0; z-index: 0 }
.main_visual .cycle-slideshow { position:absolute; width:100%; left:0; top:0; margin:0; height:100%; overflow:hidden }
.main_visual .cycle-slide  { width:100%; height:100% }
.main_visual .cycle-slide > img  { object-fit:cover; width:100%; height:100% }

/* 태블릿 가로 2560 뷰포트 세로일때 */
@media only screen and (max-width :2560px) and (orientation : portrait) {
   .main_visual .cycle-slideshow {}
   .login_area {width:100%; margin:0; max-width:100%;}
}
/* ratio 2 기준 세로 1600일때 */
@media only screen and (max-width :800px) and (-webkit-device-pixel-ratio: 2) {
   .login_area {width:100%; margin:0; max-width:100%;}
}
/* 기본 768 이하 */
@media only screen and (max-width :768px) {
   .login_area {width:100%; margin:0; max-width:100%;}
}


/* 로그인 */
.login_inner { text-align:center; max-width:400px; width:100%; margin:0 auto }
.login_inner h1 { padding-bottom:32px }
.login_inner .loginTitle { text-align:left; padding-bottom:19px }
.login_inner .loginTitle h2 { color:#3c3c3c; font-size:25px; text-align:center }
.login_inner .loginTitle p { color:#ffffff; font-size:15px }

.login_area .group { padding:20px 0 0 0; position:relative; border-bottom:1px solid #7c7c7c }
.login_area .group input.inputMaterial { display:block; width:100%; height:42px; line-height:40px; padding:5px 17px; 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 { font-size:13px; 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:23px 0 0; position:relative;}
.login_area .login_function_area .border-checkbox-section {position:absolute; left:0; top:-1px;}
.login_area .login_function_area .border-checkbox-section .border-checkbox-label {color:#000; font-weight:normal; font-size:13px; padding-left:25px }
.login_area .login_function_area .border-checkbox-section .border-checkbox-group-default .border-checkbox-label:before { width:20px; height:20px; left:0; top:-1px }
.login_area .login_function_area .border-checkbox-section .border-checkbox-group-default .border-checkbox-label:after { height:12px; left:4px; 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 }

.btn_login_area { display:flex; margin:59px auto 18px }
.btn_login_area > button[type=button]  { flex:1; font-size:18px; height:50px; letter-spacing:0px; text-align:center; cursor:pointer }
.btn_login_area > button[type=button] + button[type=button]  { margin-left:2%; border:1px solid #69aa85; color:#69aa85 }

.login_area .login_btn { background:#73956a; border:0; color:#fff; font-size:17px; width:100%; height:47px; display:block; letter-spacing:0px; text-align:center; cursor:pointer; transition:none }
.login_area .login_btn_otp { background:#73956a; border:0; color:#fff }
.login_area .login_btn:hover, 
.login_area .login_btn:focus, 
.login_area .login_btn:active { background:#69aa85; border:0 }

.btn_ty1  { padding-right:8px }
.btn_ty1:not(:first-of-type)  { padding-left:8px; padding-right:0 }
.btn_ty1:hover { color:#42af96 }

.login_area #div_memberJoin {cursor:pointer; color:#42af96; 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:#42af96}

.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;}