/*!
 * bpgc-ui.css
 * Copyright (c) 2024 - 2025 bpgc.org.cn
 * All rights reserved.
 *
 *
 * Version: 1.0.1
 * Last Updated: 2025-11-04
 */

*{
    padding: 0;
    margin: 0;
}
body{
    overscroll-behavior: none;
    background-color: #F0F0F0;
}

/* 锁定页面滚动 */
body.noscroll {
    overflow: hidden;
    height: 100%;   /* 有些浏览器需要同时设置 */
}

header{
    width: 100%;
    background-color: #16b777;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

nav{
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 10px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav a i{
    font-size: 40px!important;
    color: #FFFFFF;
    cursor: pointer;
}
.bpgc-center-nav{
    justify-content: center;
}

.bpgc-center-nav a:hover{
    cursor: pointer;
}

nav a img{
    height: 40px;
    /*padding-top: 2px;*/
}

main{
    display: flex;
    justify-content:space-between;
    margin-top: 10px!important;
    width: calc(100% - 20px);
}

.bpgc-content{
    max-width: 1220px;
    margin: 0 auto;
    padding: 10px;
}
.bpgc-max-width{
    max-width: 1220px;
    margin: 0 auto;
}

.bpgc-card{
    margin-top: 10px;
    border-radius: 2px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}
.bpgc-card:first-child{
    margin-top: 60px;
}

.bpgc-menu{
    width: calc(100% - 20px);
    height: 39px;
    line-height: 39px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #F0F0F0;
    position: sticky;
    top: 60px;
    left: 0;
    z-index: 999;
    margin-top: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bpgc-clear{
    height: 10px;
    background-color: #F0F0F0;
}
.bpgc-menu ul{
    display: flex;
    justify-content: flex-start;
    justify-items: center;
    width: calc(76% - 5px);
}
.bpgc-menu ul li{
    margin: 0 10px;
    display: inline-block;
    position: relative;
}
.bpgc-menu ul li a{
    cursor: pointer;
}
.bpgc-menu ul li::after {
    content: "";
    position: absolute;
    left: 50%;               /* 初始居中 */
    bottom: 0;
    width: 0;                /* 初始不可见 */
    height: 4px;
    background: #16a777;
    border-radius: 2px;       /* 圆角弧度 */
    transition: all 0.3s ease;
    transform: translateX(-50%); /* 居中修正 */
    color: #16b777;
}
.bpgc-menu ul li:hover::after {
    width: 100%;             /* 悬停时展开 */
}
.bpgc-this a{
    color: #16b777;
    font-weight: bold;
}.bpgc-this a:hover{
     color: #16b777;
 }
.bpgc-this:after{
    content: none !important;

}

.bpgc-menu .bpgc-input-wrap{
    position: relative;
    width: calc(24% - 5px);
    text-align: center;
}
.bpgc-menu .bpgc-input-prefix{
    pointer-events: none;
    left: 0;
    border-radius: 2px 0 0 2px;
    position: absolute;
    right: 0;
    top: 0;
    width: 35px;
    height: 100%;
    text-align: center;
    transition: all .3s;
    box-sizing: border-box;
}
.bpgc-menu .bpgc-input-prefix i{
    font-size: 24px!important;
    color: #B2B2B2;
    margin-left: 10px;
}
.bpgc-menu .bpgc-input{
    width: calc(100% - 80px);
    padding: 0 30px 0 35px;
    height: 28px;
    border: 1px solid #B2B2B2;
    background-color: #fff;
    color: #B2B2B2!important;
    border-radius: 5px;
}

.bpgc-menu .bpgc-input:focus{
    border-color: #16b777;
}


.bpgc-panel-content .bpgc-input-wrap{
    position: relative;
    height: 30px;
}
.bpgc-panel-content .bpgc-input-prefix{
    pointer-events: none;
    left: 0;
    border-radius: 2px 0 0 2px;
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 100%;
    text-align: center;
    transition: all .3s;
    box-sizing: border-box;
}
.bpgc-panel-content .bpgc-input-prefix i{
    font-size: 24px!important;
    line-height: 30px;
    color: #B2B2B2;
    margin-left: 4px;
}
.bpgc-panel-content .bpgc-input{
    width: calc(100% - 68px);
    padding: 0 30px 0 35px;
    height: 28px;
    line-height: 1.3;
    border-width: 1px;
    border-style: solid;
    border-color: #B2B2B2;
    background-color: #fff;
    color: #B2B2B2!important;
    border-radius: 5px;
}

.bpgc-panel-content .bpgc-input:focus{
    border-color: #16b777;
}
.bpgc-panel-content .bpgc-input-prefix i:focus {
    border-color: #16b777;
}

.bpgc-btn{
    display: inline-block;
    vertical-align: middle;
    height: 30px;
    line-height: 28px;
    border: 1px solid transparent;
    padding: 0 20px;
    background-color: #ff5722;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    border-radius: 15px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.bpgc-flex-jsc{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bpgc-bind{
    width: calc(100% - 20px);
    height: 40px;
    padding: 0 10px;
    background-color: #ff5722;
    color: #FFFFFF;
    position: sticky;
    top: 99px;
    left: 0;
    z-index: 997;
}
.bpgc-bind a{
    width: 28px;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    background-color: #FFFFFF;
    padding: 2px 15px;
    color: #ff5722;
    border-radius: 15px;
    cursor: pointer;
}
.bpgc-bind a:hover{
    color: #FFFFFF;
    border:1px solid #FFFFFF;
    background-color: #ff5722;
}

article {
    width: calc(76% - 5px);
    height: 2200px;
    background: #FFFFFF;
}

/* ===== Banner 基础样式 ===== */
.bpgc-banner{
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 210px;
    overflow: hidden;
}

/* 兼容不支持 aspect-ratio 的旧环境（可选） */
/* .bpgc-banner::before{content:"";display:block;padding-top:24%;} */

.bpgc-banner-track{
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform .5s ease;
    will-change: transform;
}

.bpgc-banner-track > img{
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* 铺满裁切，保证视觉充满 */
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* ===== 底部分页胶囊 ===== */
.bpgc-banner-dot{
    position: absolute;
    left: 50%;
    bottom: 10px;                 /* 和设计图类似的下边距 */
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    border-radius: 9999px;
    background: rgba(242,242,242,.40);   /* 半透明白 */
    backdrop-filter: blur(6px);           /* 毛玻璃效果（支持的浏览器生效） */
}

.bpgc-dot{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background:#fff;
    opacity: .85;                 /* 非激活弱化 */
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
}



.bpgc-dot:hover{ opacity: .8; transform: scale(1.08); }
.bpgc-dot.active{ opacity: 1; background-color: #16b777;}

/* ===== 左上角标题角标 ===== */

.bpgc-banner-item{
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}
.bpgc-banner-item > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}
.bpgc-banner-title {
    position: absolute;
    top: 8px;
    left: 8px;
    max-width: 60%;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    background: rgba(178, 178, 178, 0.6);
    border-radius: 6px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    z-index: 2;
}

/* 右下角 查看详情 按钮 */
.bpgc-banner-link {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 5px 15px;
    font-size: 14px;
    color: #16b777;
    background: #fff;
    border-radius: 20px;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 6px 16px rgba(22,183,119,.25);
    z-index: 2;
}
.bpgc-banner-link:hover {
    background: #16b777;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(22,183,119,.35);
    cursor: pointer;
}
.bpgc-banner-link:active { transform: translateY(0); }

/* ===== 授权页banner CSS【BEGAN】 ===== */

.bpgc-auth-banner{
    position: relative;
    width: 800px;
    height: 600px;
    background: #bfbfbf;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    overflow: hidden;
}

/* 左上角固定：margin=20, padding=5 15 */
.bpgc-banner-badge {
    position: absolute; top: 0; left: 0;
    line-height: 16px;
    margin: 10px; padding: 5px 10px;
    background: rgba(178, 178, 178, 0.8); color: #FFFFFF; border-radius: 8px;
    font-size: 16px; box-shadow: 0 2px 6px rgba(0,0,0,.06);
    z-index: 3;                      /* 关键：抬高层级 */
}

/* 轮播区 */
.bpgc-banner-slides, .bpgc-banner-slide{ width:100%; height:100%; }
.bpgc-banner-slides{ position: relative; }
.bpgc-banner-slide{ position:absolute; inset:0; opacity:0; transition:opacity .4s; z-index: 1;}
.bpgc-banner-slide.is-active{ opacity:1; }
.bpgc-banner-slide img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 底部正中：dots（自适应宽度 + 绝对定位 + 水平居中） */
.bpgc-dots {
    position: absolute; left: 50%; bottom: 20px;
    transform: translateX(-50%);
    display: flex; gap: 10px; padding: 5px 8px;
    background: rgba(242, 242, 242, .40);
    border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.06);
    width: auto;
    z-index: 3;                      /* 关键：抬高层级 */
}
.bpgc-dots .dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: #e6e6e6;
    cursor: pointer;
    transition: all .25s ease;
}
.bpgc-dots .dot.is-active {
    width: 32px;
    height: 16px;
    border-radius: 999px;
    background: #16B777;
}
/* 新增：当只有一张图时禁用椭圆效果 */
.bpgc-dots.single .dot.is-active {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

/* 右下角固定：padding=5 15 */
.bpgc-banner-more {
    position: absolute; right: 20px; bottom: 20px;
    padding: 5px 15px; background: #FFFFFF; color: #16B777;
    border-radius: 999px; text-decoration: none;
    box-shadow: 0 4px 10px rgba(22,183,119,.24);
    z-index: 3;
    cursor: pointer;
}

.bpgc-banner-more:hover{
    background-color: #16b777;
    color: #FFFFFF;
}
/* ===== 授权页banner CSS【END】 ===== */

/* ===== 响应式微调 ===== */
@media (max-width: 768px){
    .bpgc-banner{ height: 160px; }   /* 移动端更“高”一点，按需调整 */
    .bpgc-banner-dot{ bottom: 8px; padding: 4px 10px; gap: 8px; }
    .bpgc-dot{ width: 12px; height: 12px; }
    .bpgc-banner-title {
        font-size: 12px;
        max-width: 70%;
        padding: 2px 10px;
        top: 8px; left: 8px;
    }
    .bpgc-banner-link {
        font-size: 12px;
        padding: 4px 10px;
        right: 6px; bottom: 6px;
    }
    .bpgc-banner-link:hover {
        background: #fff;
        color: #16b777;
    }
}


.bpgc-top {
    position: fixed;
    right: 10px;
    top: 87.5%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}

.bpgc-top-item {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.bpgc-top-item:hover {
    background: #16b777;
    transform: scale(1.1);
}
.bpgc-top-item:hover i{
    color: #FFFFFF;
}

.bpgc-top-item i {
    font-size: 20px;
    color: #16b777;
}

.bpgc-article-content{
    padding: 10px;
}
.bpgc-article-content a{
    position: relative;
    display: block;
    text-decoration: none;
    border: 1px solid #F0F0F0;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}
.bpgc-article-content a:hover{
    background-color: #F0F0F0;
}
.bpgc-article-content .icon-zhiding-top-right {
    position: absolute;
    top: 0;   /* 距离上方 8px，可调整 */
    right: 0; /* 距离右侧 8px，可调整 */
    font-size: 32px; /* 图标大小 */
    color: #7B8D8E;  /* 图标颜色，按需要修改 */
}
.bpgc-article-content .icon-zhiding-right {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 32px;
    color: #16b777;
}
.bpgc-article-content .icon-top1, .icon-top2, .icon-top3, .icon-top4, .icon-top5{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 32px;
    color: red;
}
.bpgc-article-content .icon-top2{
    font-size: 32px;
    color: #C0C0C0;
}
.bpgc-article-content .icon-top3{
    font-size: 32px;
    color: #CD7F32;
}
.bpgc-article-content .icon-top4{
    font-size: 32px;
    color: #4A90E2;
}
.bpgc-article-content .icon-top5{
    font-size: 32px;
    color: #7B8D8E;
}

.bpgc-article-title,.bpgc-article-info{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bpgc-article-title h4{
    font-family: "思源黑体 Medium";
    font-size: 18px;
    width: 95%;
    display: -webkit-box;
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 超出显示省略号 */
    -webkit-line-clamp: 2;  /* 限制显示的行数 */
    -webkit-box-orient: vertical;
}

.bpgc-article-description p{
    margin: 5px 0;
    text-indent: 2em;
    text-align: justify;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;  /* 限制显示的行数 */
    overflow: hidden;
    text-overflow: ellipsis;
}
.bpgc-article-tag{
    padding: 5px 0 10px 0;
    border-bottom: 1px dashed #F0F0F0;
    margin-bottom: 5px;
}
.bpgc-article-tag span{
    font-size: 12px;
    color: #FFFFFF;
    background-color: #16b777;
    border-radius: 5px;
    padding: 4px 10px;
    margin-right: 5px;
}
.bpgc-article-info{
    color: #16b777;
}
.bpgc-article-info span:last-child {
    font-size: 14px;
    font-weight: bold;
}
.bpgc-article-info span:last-child i{
    font-weight: normal;
    font-size: 13px;
    margin-right: 2px;
}
/* 默认隐藏返回顶部按钮 */
#back-to-top {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

/* 滚动到一定距离后显示 */
#back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

aside {
    width: calc(24% - 5px);
    min-height: 100px;
    height: 100%;
    position: sticky;
    top: 100px;
    left: 0;
    z-index: 1990;
}
.bpgc-aside-card:first-child{
    margin: 0;
}
.bpgc-aside-card{
    background-color: #FFFFFF;
    margin-top: 10px;
}
.bpgc-aside-card-header{
    padding: 8px 10px;
    border-bottom: 1px solid #F0F0F0;
}
.bpgc-aside-card-header p span{
    color: #16b777;
    font-weight: bold;
}

.bpgc-aside-card-body{
    padding: 10px;
}
.bpgc-aside-card-body a{
    display: block;
    cursor: pointer;
}
.bpgc-aside-card-body a:first-child button{
    margin-top: 0;
}
.bpgc-aside-card-body a button{
    width: 100%;
    margin: 5px 0;
    background-color: #16b777!important;
}
.bpgc-aside-card-body a:hover{
    color: #16b777;
}

.bpgc-footer-index{
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 10px 10px 10px;
}

.bpgc-footer{
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    border-radius: 2px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}
.bpgc-footer-content p{
    padding: 5px;
    color: #16b777;
    display: flex;
    justify-items: center;
}
.bpgc-footer-content p a{
    cursor: pointer;
}
.bpgc-footer-content p a:hover{
    color: #16b777;
}
.bpgc-footer-qr{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.bpgc-footer-qr img{
    width: 120px;
    height: 120px;
}
#bpgc-gba{
    color: #333;
}
#bpgc-gba:hover{
    color: #16b777;
}


/* 自定义滚动条样式 */
body::-webkit-scrollbar {
    width: 0;
}

body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 1px;
}

body::-webkit-scrollbar-thumb {
    background: #16b777;
    border-radius: 1px;
}

body::-webkit-scrollbar-thumb:hover {
    background: #10aeff;
}

@media (max-width: 767px) {
    .bpgc-content{
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-content: start;
    }

    main{
        width: 100%;
    }

    article {
        width: 100%;
    }

    aside {
        display: none;
    }
    .layui-input-wrap{
        display: block;
    }
    header{
        height: 50px;
    }
    nav{
        height: 50px;
    }
    nav a i{
        font-size: 30px!important;
    }
    nav a img{
        height: 30px;
    }

    .bpgc-bind{
        display: none;
    }

    .bpgc-card-mobile{
        margin-top: 50px!important;
    }

    header nav a:first-child{
        display: inline-flex!important;
    }

    /* 滑出面板（位于 header 正下方） */
    .slide-panel {
        position: fixed;          /* ✅ 固定在视口，而不是随页面滚动 */
        top: 50px; left: 0; right: 0;
        background:#fff;
        box-shadow:0 8px 20px rgba(0,0,0,.08);
        z-index:991;              /* 层级调高，避免被主体覆盖 */

        max-height: 0;
        opacity: 0;
        transform: translateY(-8px);
        transition: max-height .3s ease, opacity .2s ease, transform .3s ease;
        will-change: max-height, opacity, transform;

        visibility: hidden;
        pointer-events: none;
        overflow: hidden;         /* 避免动画过程中内容溢出 */
    }

    .slide-panel.open {
        max-height: 80dvh;        /* 小屏展开高度 */
        opacity: 1;
        transform: translateY(0);

        visibility: visible;
        pointer-events: auto;
    }
    .bpgc-panel-content{
        padding:10px;
        max-height: 80dvh;        /* 限制内容最大高度 */
        overflow-y: auto;         /* 内容多时内部滚动 */
    }
    .bpgc-menu{
        display: none;
    }
    .bpgc-menu-list{
        margin-bottom: 10px;
    }
    .bpgc-menu-list ul {
        display: flex;
        flex-wrap: wrap;         /* 允许换行 */
        justify-content: start;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .bpgc-menu-list li {
        flex: 0 0 calc(50% - 10px);       /* 每个 li 固定一半宽 */
        max-width: 50%;
        box-sizing: border-box;
        padding: 8px;
        text-align: center;
        margin: 5px;
        background-color: #EDEDED;
    }
    .bpgc-footer-qr{
        display: none;
    }
    .bpgc-article-content a{
        padding: 5px 10px;
    }
    .bpgc-article-content a:hover{
        background-color: #FFFFFF;
    }
    .bpgc-article-tag span{
        font-size: 10px;
        padding: 4px 5px;
    }
    .bpgc-article-title h4{
        font-size: 16px;
    }
    .bpgc-article-info span:last-child{
        font-size: 12px;
    }
    .bpgc-article-info span:last-child i{
        font-size: 11px;
    }
    .bpgc-article-description p{
        -webkit-line-clamp: 3;
    }
    .bpgc-new-login{
        height: 450px!important;
        width: 100%;
        margin-top: 60px!important;

    }
    .bpgc-new-login-left{
        display: none;
    }
    .bpgc-new-login-right{
        height: 450px!important;
        width: 100%;
        min-width: 0!important;
    }
    .bpgc-login-email {
        width: calc(100% - 40px)!important;
    }
    /* 隐藏微信扫码容器、分隔线、其它登录方式 */
    #wechat_login,
    .bpgc-divider,
    .bpgc-new-login-other {
        display: none !important;
        visibility: hidden !important;
    }
    #login-wechat {
        display: none !important;
        visibility: hidden !important;
    }
    #login-email {
        display: block !important;
        visibility: visible !important;
    }
    .bpgc-login-icon {
        display: none !important;
    }
}
/* 大于 767px：彻底隐藏 slidePanel */
@media (min-width: 768px) {
    .slide-panel {
        display: none !important;
    }
}

/* 小于360px：一行一个，占100% */
@media (max-width: 360px) {
    .bpgc-menu-list li {
        flex: 0 0 calc(100% - 10px);
        max-width: 100%;
    }
}

@media (max-width: 520px){
    .bpgc-footer-content p{
        padding: 0!important;
        flex-direction: column;    /* 改为纵向排列 */
        align-items: center;   /* 左对齐（如果要居中改成 center） */
    }

    .bpgc-footer-content p:last-child{
        display: none;
    }
    .bpgc-footer-content p a{
        display: block;
    }
    .bpgc-footer-content p a:last-child{
        display: none;
    }
    .bpgc-footer-content p span{
        display: none;
    }
    #bpgc-gba{
        display: block!important;
        color: #333;
    }
}

.bpgc-demo{
    background-color: #0c8bcc;
    color: #FFFFFF;
    text-align: center;
}

/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
    font-family: "思源黑体 Medium";font-weight: 500;src: url("//at.alicdn.com/wf/webfont/5DNqdfm49V1d/yv6VDPFYZfqq.woff2") format("woff2"),
url("//at.alicdn.com/wf/webfont/5DNqdfm49V1d/260rPLZEUoCY.woff") format("woff");font-variation-settings: normal;font-display: swap;
}

.webfont {
    font-family: "思源黑体 Medium";font-variation-settings: normal; /* Chrome 140 以下版本需要 */}


.bpgc-new-register,
.bpgc-new-login{
    height: 600px;
    width: 100%;
    background-color: #FFFFFF;
    margin-top: 100px;
    border-radius: 5px;
    box-shadow: 1px 1px 1px #F2F2F2;
    display: flex;
    align-items: center;
    justify-content: space-between
}
.bpgc-new-login-left{
    height: 600px;
    background-color: #16b777;
    width: 100%;
    max-width: 800px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.bpgc-new-login-left img{
    width: 100%;
    max-width: 800px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    object-fit: cover;
}
.bpgc-new-login-right{
    height: 600px;
    min-width:420px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.bpgc-new-login-form{
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}
.bpgc-new-login-title{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.bpgc-new-login-title i{
    font-size: 34px;
    color: #16b777;
    margin-right: 5px;
}
.bpgc-new-login-title p{
    font-size: 24px;
    font-weight: bold
}
.bpgc-new-login-other{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* 图标之间间距 */
}
.bpgc-new-login-info{
    position: absolute;
    width: 100%;
    right: 0;
    bottom: 10px;
    display:flex;
    align-items:center;
    justify-content: center;
    gap:2px;
}

.layui-form-item .layui-form-checkbox[lay-skin=primary] {
     margin-top: 0!important;
}
.bpgc-new-login-info a{
    cursor: pointer;
}
.bpgc-new-login-info a:hover{
    color: #16b777;
}

.bpgc-forget-password{
    height: 400px;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.bpgc-login-icon{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #F2F2F2;
    cursor: pointer;
}
.bpgc-login-icon:hover{
    background-color: #16b777;
    color: #fff;
}
.bpgc-login-icon.hidden {
    visibility: hidden;
    pointer-events: none; /* 禁止点击 */
}
.bpgc-login-icon i{
    line-height: 40px;
    font-size: 24px;
    padding-left: 8px;
}
.bpgc-wecaht-qr i{
    color:#16b777;
    font-size:30px;
}
#wechat_login {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 20px 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #eee;
}

#wechat_login iframe {
    width: 160px;
    height: 160px;
    border: none;
    display: block;
}

.bpgc-divider {
    width: 80%;
    display: flex;
    align-items: center;
    margin: 25px 0;
    color: #7a8599;
    font-size: 14px;
}

.bpgc-divider::before,
.bpgc-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e6e9ef;
}

.bpgc-divider span {
    padding: 0 15px;
}
.bpgc-login-email{
    width: calc(100% - 80px);
}

.bpgc-checkbox-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.bpgc-checkbox-item input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.bpgc-check-icon {
    width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 未选中状态 - 使用空心图标 */
.bpgc-checkbox-item input ~ .bpgc-check-icon::before {
    content: "\e67a";
    font-family: "iconfont";
    font-size: 16px;
    color: #ccc;
    transition: all 0.3s ease;
}

/* 选中状态 - 使用实心图标并改变颜色 */
.bpgc-checkbox-item input:checked ~ .bpgc-check-icon::before {
    content: "\e6f5";
    color: #16b777;
}


/* 协议未勾选时的通用禁用态 */
.bpgc-disabled {
    pointer-events: none !important;
    opacity: .6;
}

/* 微信二维码容器的模糊效果 */
.bpgc-blur {
    filter: blur(4px);
}

/* 遮罩提示 */
.policy-mask {
    position: absolute;
    inset: 0;
    display: none;           /* 默认隐藏，未勾选时显示 */
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    background: rgba(255,255,255,.7);
    font-size: 14px;
    color: #333;
    z-index: 2;
    border-radius: 8px;
    user-select: none;
}
.policy-mask.show { display: flex; }

/* 微信扫码区域需要相对定位以承载遮罩 */
.bpgc-wecaht-qr {
    position: relative;
    border-radius: 8px;
}

.bpgc-error{
    display: flex;
    flex-direction : column ;
    justify-content: center;
    align-items: center;
    height: 500px;
}
.bpgc-error h1:first-child {
    font-size: 48px;
    margin-bottom: 10px;
}
.bpgc-error a{
    margin-top: 20px;
}

/******** LayUI Reset ********/
.layui-form-item a{
    cursor: pointer!important;
}
.layui-form-item a:hover {
    color: #16b777 !important;
}
/****** LayUI Reset(END) *****/

/******** Flex布局 ********/
.bpgc-flex-jc__space-between{
    display: flex;
    justify-content: space-between;
}
/****** Flex布局(END) *****/