body{width:100vw;height:100vh;overflow:hidden;padding:0;margin:0;background-color:#ebebeb;}

.loginForm{width:350px;height:550px;position:absolute;top:50%;left:50%;margin:-275px 0 0 -225px;box-shadow:0 6px 15px rgb(0 0 0 / 16%);padding:0 50px;border-radius:10px;background-color:#fff;}
.loginForm h1{padding:0;margin:0;overflow:hidden;height:45px;margin:65px 0 40px 0;font-size:25px;}
.loginForm .loginInput{height:37px;margin:10px 0 5px 0;position:relative;}
.loginForm .loginInput label.userId, .loginForm .loginInput label.userPwd{display:block;width:55px;height:32px;overflow:hidden;position:absolute;top:8px;left:0;font-size:13px;letter-spacing:-1px;color:#666;}
.loginForm .loginInput input.userId, .loginForm .loginInput input.userPwd{width:100%;height:35px;border:none;padding:0;margin:0;line-height:35px;font-size:18px;font-weight:500;border-bottom:2px solid #bcbcbc;}
.loginForm .loginInput .userIdBd, .loginForm .loginInput .userPwdBd{display:block;}
.loginForm .loginInput .userIdBd.focus:after, .loginForm .loginInput .userPwdBd.focus:after{content:'';display:block;width:100%;height:2px;background-color:#17263a;position:absolute;bottom:0;left:0;animation-name:inputBorderFocus;animation-duration:.3s;}
.loginForm .loginInput .userIdBd.focus.error:after, .loginForm .loginInput .userPwdBd.focus.error:after{content:'';display:block;width:100%;height:2px;background-color:#ff0000;position:absolute;bottom:0;left:0;animation-name:inputBorderFocus;animation-duration:.3s;}
.loginForm .loginInput .userIdBd.blur:after, .loginForm .loginInput .userPwdBd.blur:after{content:'';display:block;width:0;height:2px;background-color:#17263a;position:absolute;bottom:0;left:0;animation-name:inputBorderBlur;animation-duration:.3s;}
.loginForm .loginMsg{clear:both;padding-bottom:20px;font-size:12px;height:18px;line-height:18px;color:#666;}
.loginForm .loginMsg.error{color:#f20c1e;}
.loginForm .loginMsg.success{color:#1272cd;}
.loginForm .loginInput .material-icons{position:absolute;top:3px;right:0;color:#ccc;cursor:pointer;}
.loginForm .loginInput .material-icons.eyes:after{content:'';display:block;position:absolute;top:0;left:10px;width:2px;height:23px;background-color:#ccc;transform:rotate(45deg);}
.loginForm .loginInput .material-icons:hover{color:#17263a;}
.loginForm .loginInput .material-icons.eyes:hover:after{background-color:#17263a;}
.loginForm .loginInput .material-icons.eyes.on:after{display:none;}
.loginForm .loginInput .help_tooltip{display:none;position:absolute;top:40px;right:-15px;width:390px;height:100px;background-color:#000;z-index:10;color:#fff;padding:20px;border-radius:10px;line-height:170%;font-weight:400;font-size:14px;}
.loginForm .loginInput .help_tooltip a{color:#ffd53b;}
.loginForm .loginInput.save{margin-bottom:10px;}

.loginForm .findArea{width:calc(100% - 100px);height:calc(100% - 130px);position:absolute;top:0;left:0;background-color:#fff;padding:65px 50px;border-radius:10px;}
.loginForm .findArea .logo{padding:0;margin:0;height:36px;line-height:36px;text-align:center;font-size:1.5rem;}
.loginForm .findArea .notice{margin:15px 0 40px 0;padding:10px;border:1px dashed #aaa;font-size:12px;line-height:18px;}
.loginForm .findArea .findInput{height:37px;margin:10px 0 5px 0;position:relative;}
.loginForm .findArea .findInput .findLabel{display:block;width:70px;height:32px;overflow:hidden;position:absolute;top:8px;left:0;font-size:13px;letter-spacing:-1px;color:#666;}
.loginForm .findArea .findInput .findText{width:calc(100% - 110px);height:35px;border:none;padding:0;margin:0;line-height:35px;font-size:18px;font-weight:500;border-bottom:2px solid #bcbcbc;}
.loginForm .findArea .findInput .findButton{display:block;width:100px;height:37px;border:none;position:absolute;top:0;right:0;border:2px solid #000;background-color:#000;color:#fff;cursor:pointer;}
.loginForm .findArea .findInput .findButton[disabled="disabled"]{border-color:#ccc;background-color:#ccc;color:#fff;}
.loginForm .findArea .findInput .findInputBd{display:block;}
.loginForm .findArea .findInput .findInputBd.focus:after{content:'';display:block;width:calc(100% - 110px);height:2px;background-color:#17263a;position:absolute;bottom:0;left:0;animation-name:inputBorderFocus;animation-duration:.3s;}
.loginForm .findArea .findInput .findInputBd.focus.error:after{content:'';display:block;width:calc(100% - 110px);height:2px;background-color:#ff0000;position:absolute;bottom:0;left:0;animation-name:inputBorderFocus;animation-duration:.3s;}
.loginForm .findArea .findInput .findInputBd.blur:after{content:'';display:block;width:0;height:2px;background-color:#17263a;position:absolute;bottom:0;left:0;animation-name:inputBorderBlur;animation-duration:.3s;}
.loginForm .findArea .findSendMsg, .loginForm .findArea .findConfirmMsg{clear:both;padding-bottom:20px;font-size:12px;height:18px;line-height:18px;color:#666;}
.loginForm .findArea .findSendMsg.error, .loginForm .findArea .findConfirmMsg.error{color:#f20c1e;}
.loginForm .findArea .findSendMsg.success, .loginForm .findArea .findConfirmMsg.success{color:#1272cd;}
.loginForm .findArea .findCancel{padding:0;margin-top:20px;width:100%;border:none;height:3rem;border-radius:25px;background:#ababab;color:#fff;font-weight:bold;cursor:pointer;font-size:15px;font-weight:400;}

.w_check_label, .w_check_label:active, .w_check_label:hover{border:none;background:none;padding:0;font-size:12px;color:#000;height:30px;line-height:30px;color:#666;outline:0;}
.w_check_label.ui-state-active, .w_check_label.ui-state-active:active, .w_check_label.ui-state-active:hover{border:none;background:none;padding:0;color:#333;height:30px;line-height:30px;outline:0;}
.w_check_label.ui-visual-focus, .w_check_label.ui-visual-focus:active, .w_check_label.ui-visual-focus:hover{border:none;background:none;padding:0;box-shadow:none;color:#333;height:30px;line-height:30px;outline:0;}
.w_check_label.ui-state-hover .ui-icon, .w_check_label.ui-state-focus .ui-icon, .w_check_label.ui-button:hover .ui-icon, .w_check_label.ui-button:focus .ui-icon{background:none;}
.w_check_label .ui-icon{background:none;width:16px;height:16px;border-radius:3px;border:1px solid #ccc;box-shadow:none;position:relative;}
.w_check_label.ui-checkboxradio-label.ui-checkboxradio-checked .ui-icon, .w_check_label.ui-checkboxradio-label.ui-checkboxradio-checked:hover .ui-icon{width:16px;height:16px;border:1px solid #17263a;background-color:#17263a;}
.w_check_label.ui-checkboxradio-label.ui-checkboxradio-checked .ui-icon:before, 
.w_check_label.ui-checkboxradio-label.ui-checkboxradio-checked:hover .ui-icon:before{
	content:'';position:absolute;width:6px;height:9px;top:1px;left:4px;border-bottom:2px solid #fff;border-right:2px solid #fff;-ms-transform:rotate(35deg);-webkit-transform:rotate(35deg);transform:rotate(35deg);
}
.loginForm .loginInput .w_check_label .ui-icon{border-radius:50%;}
.loginForm .loginBtn .loginSubmit{padding:0;width:100%;border:none;height:48px;border-radius:3px;background:#17263a;color:#fff;font-weight:400;cursor:pointer;font-size:15px;}
.loginForm .loginMenu{padding:40px 0;}
.loginForm .loginMenu a{font-size:15px;text-decoration:none;color:#666;}
.loginForm .loginMenu a:hover{text-decoration:underline;}
.loginForm .loginManual{text-align:center;}
.loginForm .loginManual a{display:inline-block;width:65px;height:55px;text-indent:-10000px;overflow:hidden;background:url(/theme/default/img/company/manual_download.png) center no-repeat;}

.loginConetents{width:500px;height:750px;position:absolute;top:50%;left:50%;margin:-375px 0 0 0;background-image:url(/theme/default/img/common/bg_login2.jpg);background-repeat:no-repeat;background-position:center;background-size:cover;border-radius:15px;overflow:hidden;}
.loginConetents:before{content:'';height:100%;width:100%;background-color:rgba(2, 2, 3, 0.6);right:0;top:0;position:absolute;z-index:0;}
.loginConetents:after{content:'';left:0;top:20%;position:absolute;z-index:1;width:0;height:0;border-top:15px solid transparent;border-left:20px solid #fff;border-bottom:15px solid transparent;}
.loginConetents .wrap{width:100%;height:100%;position:absolute;top:0;left:0;z-index:2;}
.loginConetents .wrap h1{display:block;padding:0;margin:0;margin-top:100px;text-align:center;opacity:1;animation-name:intro1;animation-duration:1s;}
.loginConetents .wrap h1 img{width:70%;}
.loginConetents .wrap h2{display:block;padding:0;margin:0;margin-top:200px;text-align:center;font-size:21px;color:#fff;line-height:180%;opacity:1;animation-name:intro2;animation-duration:1s;}
.loginConetents .wrap p{display:block;padding:40px 20px;margin:0;text-align:center;font-size:13px;color:#fff;line-height:250%;opacity:1;animation-name:intro3;animation-duration:1s;}

@keyframes intro1 {
    from {margin-top:200px;opacity:0;}
    to {margin-top:100px;opacity:1;}
}

@keyframes intro2 {
    from {margin-top:200px;opacity:0;}
    to {margin-top:200px;opacity:1;}
}

@keyframes intro3 {
    from {opacity:0;}
    to {opacity:1;}
}

@media all and (max-width:600px) {
    body{height:auto;overflow:visible;}

    .loginForm{width:calc(100% - 100px);padding:15px 30px;top:0;left:0;margin:50px 20px 0 20px;}
    .loginForm .joinArea{width:calc(100% - 60px);padding:15px 30px;margin:50px 0 0 0;top:0;}
    .loginForm .findArea{width:calc(100% - 60px);padding:15px 30px;margin:50px 0 0 0;}

    .loginConetents{width:calc(100% - 20px);height:100px;top:10px;left:10px;margin:0 0 0 0;}
    .loginConetents:after, .loginConetents .wrap h2, .loginConetents .wrap p{display:none;}
    .loginConetents .wrap h1{margin-top:15px;animation-name:none;animation-duration:0s;}
    .loginConetents .wrap h1 img{height:70px;width:auto;}
}