@charset "utf-8";

.members-page {min-height:100vh;display:flex;align-items:center;justify-content:center;padding:100px 20px;background:#fff;}
.members-page .members-box{width:420px;max-width:100%;text-align:center;}
.members-page .members-box .logo{font-size:0;margin:0 0 10px 0;text-align:center;}
.members-page .members-box .logo a{display:inline-block;}
.members-page .members-box .logo img{width:auto;height:auto;width:222px;}
.members-page .members-box .page-title{font-size:32px;margin-top:30px;color:#313A47;font-weight:700;}
.members-page .members-box .signup-form{display:block; margin-top:42px}
.members-page .members-box .login-form{display:block; margin-top:42px}
.members-page .members-box .input-group{position:relative; margin-top:10px;}
.members-page .members-box .input-group:first-child{margin-top:0;}
.members-page .members-box .input-group .btn-input {cursor: pointer; position:absolute; right:16px; top:15px; height:34px; line-height:33px; font-size:14px; font-weight: 700; color:#fff; padding:0 10px; background-color:#4678FD; border-radius:28px;}

.members-page .members-box .input-wrap{display:block; position:relative;}
.members-page .members-box .input-wrap input{width:100%; height:64px; line-height:64px; padding:0 16px ;border:1px solid #dedede;background:#fff;font-size:14px;color:#333;transition:border-color 0.3s;}
.members-page .members-box .input-wrap input[type="password"]{padding-right:50px;}
.members-page .members-box .input-wrap input::placeholder{color:#919191}
.members-page .members-box .input-wrap input:focus{outline:none;border-color:#5b2bff;}
.members-page .members-box .input-wrap input.error{border-color:#ff3232;}
.members-page .members-box .input-wrap input.valid{border-color:#5b2bff;}
.members-page .members-box .input-wrap input:disabled{background:#f5f5f5; cursor:not-allowed;}
.members-page .members-box .input-group .btn-input:disabled {background-color:#999; cursor:not-allowed;}

.members-page .members-box .btn-password-toggle{opacity:0.5; position:absolute; right:16px; top:50%; width:36px; height:36px; transform:translateY(-50%); font-size:0; background:url('../images/icon_eye.svg') center no-repeat; border:none; padding:0; cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center; transition:opacity 0.3s;}
.members-page .members-box .btn-password-toggle.visible {opacity:1}

.members-page .members-box .input-group.phone input {padding-right:100px;}
.members-page .members-box .input-group.email input {padding-right:120px;}
.members-page .members-box .input-group.code input {padding-right:100px;}

.members-page .members-box .validation-message{display:block;margin-top:6px;font-size:12px;color:#ff3232;text-align:left;min-height:18px;}
.members-page .members-box .validation-message.noti{color:#5b2bff;}
.members-page .members-box .validation-message:empty{display:none;}
.members-page .members-box .noti-message{display:block;margin-top:6px;font-size:12px;color:#5b2bff;text-align:left;min-height:18px;}

.members-page .members-box .btn{display:block;width:100%; height:62px; line-height:61px; border-radius:12px;border:1px solid #dedede;background:#fff;color:#313A47;font-size:18px;cursor:pointer;position:relative; margin-top:10px;}
.members-page .members-box .btn.primary{background:#4678FD;border:none;color:#fff;font-weight:600;border-radius:8px; margin-top:26px;}
.members-page .members-box .btn.primary:after{content:'';display:inline-block;width:7px;height:12px;margin-left:14px;background:url('../images/icon_btn_arrow.svg') no-repeat;}
.members-page .members-box .btn.outline{background:#fff;border:1px solid #cfcfcf}
.members-page .members-box .btn.outline:after{content:'';display:inline-block;width:7px;height:12px;margin-left:14px;background:url('../images/icon_btn_arrow_gray.svg') no-repeat;}
.members-page .members-box .extra-link{margin-top:25px}
.members-page .members-box .extra-link a{color:#313A47;text-decoration:none;font-size:18px;position:relative}
.members-page .members-box .extra-link a:after{content:'';display:inline-block;width:7px;height:12px;margin-left:8px;background:url('../images/icon_btn_arrow_gray.svg') no-repeat;}

.members-page .members-box .agree-box {position:relative; display:flex; justify-content: space-between; text-align: left; margin-top:17px;}
.members-page .members-box .agree-box + .agree-box {margin-top:8px;}
.members-page .members-box .agree-box label {position:relative; font-size:14px; line-height:24px; padding-left:33px;}
.members-page .members-box .agree-box label::before {content:''; display:block; position:absolute; left:0; top:-2px; width:24px; height:24px; border:1px solid #919191; background:#fff; border-radius:6px;}
.members-page .members-box .agree-box input:checked + label::before {border-color: #4678FD; background: #4678FD url('../images/icon_check.svg') center no-repeat;}
.members-page .members-box .agree-box a {color: #313A47; font-size:14px; line-height:24px; text-decoration: underline;}