@charset "utf-8";

.login_wrap{visibility: hidden; opacity:0; }
.login_wrap.active{visibility: visible; opacity:1; }

.login_bg {position:fixed;left:0;top:0; z-index:10; width:100%;height:100%;background:rgba(0, 0, 0, 0.6);z-index:99999; }
.layer_login {position:fixed;width:400px;top:50%;left:50%;transform:translate(-50%, -50%);background:#FFFFFF;border-radius:10px;z-index:999999999;}
.layer_logins {padding:50px 30px; margin:0 auto;}

@media (max-width: 600px) {
    .layer_login {width:90%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);margin:0;}
}

.layer_login h1 {color:#000;font-size:24px;font-weight:700;text-align:left;padding:35px 0px 20px; text-align:center;}
.layer_login a {color:#333;text-decoration:none;}

.layer_login .user,
.layer_login .pw {background-color:#f3f3f3;width:100%;border-radius:4px;margin:5px auto;}

.layer_login .user:hover,
.layer_login .pw:hover {}

.layer_login input[type="text"],
.layer_login input[type="password"] {width:100%;padding:10px 0px;background:#fff;border:0;outline:none;color:#666;text-indent:20px;border-radius:5px;border:1px solid #ddd;}
.layer_login button[type="submit"] {background:var(--point-color-1);border:0;height:50px;border-radius:5px;color:#fff;padding:0px 25px;cursor:pointer;width:100%;}
.layer_login button[type="submit"]:hover {}

.layer_login .bt_div {width:100%;margin:0 auto;}

.layer_login .remember {padding:10px 0px;font-size:0.9em;line-height:15px;display:inline-block;width:35%;float:left;}
.layer_login .remember2 {padding:10px 0px;font-size:0.9em;line-height:15px;display:inline-block;width:65%;float:right;text-align:right;}

.layer_login .close {width:32px;height:32px;display:block;border:0;position:absolute;top:30px;right:40px;padding:0px;cursor:pointer;}
.layer_login .close:after {content:'';display:block;position:absolute;width:3px;height:16px;transform:rotate(45deg);background:#333;margin:-8px 0px 0px 14px}
.layer_login .close:before {content:'';display:block;position:absolute;width:3px;height:16px;transform:rotate(-45deg);background:#333;margin:-8px 0px 0px 14px;}
.layer_login .close:hover:before,
.layer_login .close:hover:after {background:#777;transition:all 0.2s linear;}

.social_login {width:100%;margin:20px 0 40px;}
.layer_login  .join_link h2{padding-bottom:10px;text-align:center;color:#333;font-weight:normal; font-size:16px;}
.layer_login  .join_link a{width:100%; height:50px; line-height:48px; border-radius:5px; border:1px solid var(--point-color-1); color:var(--point-color-1); display:block; text-align:center; }

@media (max-width: 768px) {
.layer_login h1{font-size:20px; padding:20px 0; }
.layer_logins{padding:30px 20px;}
.social_login{margin:10px 0 20px;}
.layer_login .join_link a,
.layer_login button[type="submit"]{height:40px; line-height:40px;}
}