@charset "utf-8";
/* Style Reset */
*{ margin:0; padding:0}
ul, ol, li, dl, dt, dd {list-style:none;}
a{text-decoration:none;outline:0px;color:#666}
img{ border:0;max-width: 100%;}
.ccsl{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: block;}
.clear {clear:both;}
body{ width:100%;max-width:512px; margin:0 auto; background:#fff; font-size:12px; line-height:24px; color:#333}


.banner{ width:100%;max-width:512px; overflow:hidden; position:relative;font-size:0; margin:0 auto;}
.b-img{ position:absolute; left:0; top:0;}
.b-img img{ display:block;float:left;}
.b-list{ height:20px;margin:0 auto;position:relative;z-index:1;}
.b-list span{ display:block;cursor:pointer; width:10px; height:10px; border-radius:50%; background:#adc9fd; float:left; margin:0 5px; _margin:0 3px;}
.b-list .spcss{ background:#3278f9}


.btnBox{ padding:20px; overflow:hidden; padding-top:40px}
.btnBox .a1{ width:40%; display:block; float:left; height:40px; line-height:40px; border:1px solid #3278f9; border-radius:30px; text-align:center; background:#fff; color:#3278f9; letter-spacing:4px; margin-left:5%; font-size:16px; cursor:pointer}
.btnBox .a2{width:40%; display:block; float:right; height:40px; line-height:40px; border:1px solid #3278f9; border-radius:30px; text-align:center; background:#3278f9; color:#fff; letter-spacing:4px;margin-right:5%;font-size:16px;cursor:pointer}


.txtBox { 
    overflow: hidden;
    margin: 5px 0; /* 给整个txtBox添加上下外边距（20px可调整） */
    /* 若需要内部间距，可加padding: 20px 0; */
}
.txtBox p { 
    color: #3278f9; 
    text-align: center; 
    letter-spacing: 1px;
    margin: 5px 0; /* 给段落标签单独添加上下间距（15px可调整） */
}

.txtBox_2{ background:url(/h5/images/userlogin/images/linebg.jpg) repeat-x; text-align:center; margin-top:25px; margin-bottom:20px}
.txtBox_2 p{display:inline-block; background:#fff; padding:0 15px; color:#6F6F6F; letter-spacing:1px}


.loginBox{ padding:0 20px 20px; overflow:hidden}
.loginBox ul{ overflow:hidden; padding:0 20px}
.loginBox ul li{ float:left; width:33.3%}
.loginBox ul li img{ display:block; width:50px;margin:0 auto;}

.imgBox{ width:100%; overflow:hidden}
.imgBox img{ display:block; width:100%}

.itemBox{ padding:40px; overflow:hidden; padding-bottom:0}
.itemBox .item{ border-bottom:1px solid #cdcdcd; color:#a7a7a7; height:40px; line-height:40px; margin-bottom:15px; display:flex}
.itemBox .item .L{ float:left; width:40px; height:40px; overflow:hidden}
.itemBox .item .L img{ display:block; width:20px; margin:10px;}
.itemBox .item .R{ flex:1; position:relative;}
.itemBox .item .R input{ width:90%; background:none; height:40px; line-height:40px; border:0; outline:none; letter-spacing:1px}
.itemBox .item .C{ flex:1}
.itemBox .item .C input{width:90%; background:none; height:40px; line-height:40px; border:0; outline:none; letter-spacing:1px}
.itemBox .item .yzm{ float:right}
.itemBox .item .yzm img{ display:block; height:38px}

/* 密码显示切换按钮样式 */
.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    color: #999;
}

.toggle-password:hover {
    background-color: rgba(50, 120, 249, 0.1);
    color: #3278f9;
}

.toggle-password:focus {
    outline: none;
    background-color: rgba(50, 120, 249, 0.1);
    box-shadow: 0 0 0 2px rgba(50, 120, 249, 0.2);
}

.toggle-password svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.toggle-password:hover svg {
    transform: scale(1.1);
}

.itemBox .item2{height:42px; overflow:hidden; margin-bottom:10px; margin-top:40px}
.itemBox .item2 .btn{ width:100%; height:40px; line-height:40px; text-align:center; color:#fff;background:#3278f9; color:#fff; border-radius:6px; outline:none; border:1px solid #3278f9; letter-spacing:2px;cursor:pointer}
.itemBox .item3{height:42px; overflow:hidden;}
.itemBox .item3 .btn{width:100%; height:40px; line-height:40px; text-align:center; color:#fff;background:#fff; color:#3278f9; border-radius:6px; outline:none; border:1px solid #3278f9; letter-spacing:2px;cursor:pointer}

.txtBox_3{ overflow:hidden;}
.txtBox_3 a{ display:block; color:#3278f9; text-align:center; letter-spacing:1px}

/* 注册方式选择区域整体容器样式 */
.register-type-container {
    padding: 16px;          /* 上下左右内边距 */
    margin-top: -24px;     /* 向上偏移，与背景图衔接更自然 */
    margin-bottom: 20px;   /* 底部外边距，与下方表单拉开距离 */
}

/* 注册方式选择器的父容器样式 */
.type-select {
    display: flex;                 /* 弹性布局，使子元素横向排列 */
    background: #fff;              /* 白色背景 */
    overflow: hidden;              /* 隐藏子元素溢出部分（配合圆角） */
    max-width: 300px;              /* 最大宽度限制，适配不同设备 */
    margin: 0 auto;                /* 水平居中 */
}

/* 单个注册方式选项的样式 */
.type-option {
    flex: 1;                       /* 弹性占比，使两个选项平分宽度 */
    display: flex;                 /* 弹性布局，使文字垂直居中 */
    align-items: center;           /* 垂直居中 */
    justify-content: center;       /* 水平居中 */
    padding: 12px 0;               /* 上下内边距，增加点击区域 */
    cursor: pointer;               /* 鼠标悬浮时显示手型，提示可点击 */
    color: #666;                   /* 未选中时的文字颜色 */
    font-size: 15px;               /* 文字大小 */
    position: relative;            /* 为下方激活态下划线做定位准备 */
}

/* 激活态的注册方式选项样式 */
.type-option.active {
    color: #3278f9;    /* 激活时的文字颜色（品牌蓝色） */
    font-weight: 500;  /* 激活时的文字加粗 */
}

/* 激活态选项的下划线样式（视觉提示当前选中项） */
.type-option.active::after {
    content: '';                  /* 伪元素必须有content属性 */
    position: absolute;           /* 绝对定位 */
    bottom: 0;                    /* 位于选项底部 */
    left: 0;                      /* 从左侧开始 */
    width: 100%;                  /* 宽度占满父元素 */
    height: 2px;                  /* 下划线高度 */
    background: #3278f9;          /* 下划线颜色（与激活文字颜色一致） */
}

        

        /* 密码显示切换按钮 */
        .toggle-password {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 28px;
            height: 28px;
            border: none;
            background: none;
            cursor: pointer;
            color: #999;
        }
        .toggle-password:hover {
            color: #3278f9;
        }

        

        /* 已注册链接 */
        .txtBox_3 {
            text-align: center;
            margin: 16px 0 24px;
        }

        /* 协议勾选 */
        .agreement {
            margin-top: 8px;
            padding: 0 4px;
        }
        .checkbox-label {
            display: flex;
            align-items: center;
            cursor: pointer;
            color: #666;
            font-size: 13px;
        }
        .checkbox-custom {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 1px solid #ddd;
            border-radius: 3px;
            margin-right: 8px;
            position: relative;
            transition: all 0.2s ease;
        }
        #agree:checked + .checkbox-custom {
            background: #3278f9;
            border-color: #3278f9;
        }
        #agree:checked + .checkbox-custom::after {
            content: '';
            position: absolute;
            left: 5px;
            top: 2px;
            width: 5px;
            height: 10px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        #agree {
            display: none;
        }
        .agreement-link {
            color: #3278f9;
            text-decoration: underline;
        }

        /* 提示框 */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 12px 20px;
            background: rgba(0,0,0,0.7);
            color: #fff;
            border-radius: 8px;
            font-size: 14px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 1000;
        }
        .toast.show {
            opacity: 1;
            visibility: visible;
        }