*{margin:0;padding:0;list-style: none;border:none;font-style: normal;font-family: 微软雅黑;}
html{font-size: 26.66667vw;}
body{font-size: 16px;background-color:#fff;}
a{text-decoration:none;color:#8c8c8c;	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz-user-focus: none;-moz-user-select: none;}
ul { list-style: none; }
input{border:0;outline:none;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
::-webkit-scrollbar{display:none;}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    height: 120vh;
    background: url('/ascn/mobile/images/background.png') no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.close-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    font-family: "iconfont" !important; /* 确保使用图标字体 */
    font-size: 30px;
    color: #d1d1d1;
    text-decoration: none;
    z-index: 100;
    cursor: pointer;
    transition: opacity 0.3s;
}

.close-btn:hover {
    opacity: 0.8;
}

.login-container {
    width: 90%;
    max-width: 400px;
    background-color: rgba(255, 255, 255, 0.6); /* 透明背景 */
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    /* margin-top: 160px; */
}

.register-container {
    width: 90%;
    max-width: 400px;
    background-color: rgba(255, 255, 255, 0.6); /* 透明背景 */
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    margin-top: 100px;
}


.remember-me {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    position: relative; /* 为绝对定位提供参考 */
}

.remember-me input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #ccc;
    border-radius: 50%; /* 圆形 */
    margin-right: 10px;
    cursor: pointer;
    position: relative;
}

.remember-me input[type="checkbox"]:checked {
    background-color: #0367fd;
    border-color: #0367fd;
}

.remember-me label {
    font-size: 14px;
    cursor: pointer;
}

.forgot-password {
    position: absolute;
    right: 0; /* 右对齐 */
    font-size: 14px;
    color: #000;
    text-decoration: none;
}

.forgot-password a {
    font-size: 14px;
    text-decoration: none;
}

.login-btn, .register-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 10px;
    transition: all 0.3s;
}

.login-btn {
    background-color: #0367fd;
    color: white;
}

.register-btn-submit {
    background-color: #0367fd;
    color: white;
}

.register-btn-submit, .login-btn-back {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 10px;
    transition: all 0.3s;
}

.register-btn {
    background-color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.login-btn-back {
    background-color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    font-size: 14px;
}

.footer-links a {
    text-decoration: none;
    display: flex;
    align-items: center;
    color: #8c8c8c;
}

.footer-links .divider {
    margin: 0 10px;
}

.footer-links .icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}
.input-group {
position: relative;
margin-bottom: 20px;
display: flex;
align-items: center;
width: 100%;
}
/* 密码输入框样式 */
#password {
    flex: 1;
    padding-right: 40px; /* 为图标预留空间 */
}
/* 图标样式 */
.input-group .iconfont:first-child {
position: absolute;
left: 15px; /* 与输入框左间距一致 */
top: 50%;
transform: translateY(-50%); /* 垂直居中 */
font-size: 20px; /* 图标大小 */
color: #b3b2b2; /* 图标颜色（半透明白） */
z-index: 2; /* 确保图标在输入框上方 */
}

/* 输入框样式 */
.input-group input {
width: 100%;
padding: 10px 10px 10px 45px; /* 左内边距留出图标空间 */
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 30px;
/* background-color: rgba(255, 255, 255, 0.3); */
font-size: 16px;
color: #333;
outline: none;
/* 新增阴影 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s;
}

/* 输入框聚焦时图标颜色变化 */


.input-group input:hover {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.input-group input:focus {
box-shadow: 0 0 0 3px rgba(3, 103, 253, 0.3);
border-color: #0367fd;
}

/* 图标容器样式 */
.toggle-password-container {
    position: absolute;
    right: 10px; /* 调整位置 */
    width: 40px; /* 扩大点击区域宽度 */
    height: 100%; /* 与输入框同高 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; /* 移除点击高亮 */
    user-select: none; /* 禁止文本选中 */
    outline: none; /* 移除焦点轮廓 */
}

/* 密码输入框右侧图标样式 */
.input-group .toggle-password {
font-size: 20px;
color: #b3b2b2;
transition: color 0.3s;
}

/* 切换密码图标 - 点击后状态 */
.toggle-password.active {
    color: #1890ff !important; /* 点击后蓝色 */
}

/* 新增验证码专用样式 */
.captcha-container {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    height: 100%;
    z-index: 2;
}
.captcha-img {
    height: 30px;
    cursor: pointer;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    padding-left: 10px;
}
.input-group.captcha-group input {
    padding-right: 100px;
}