/* 页面背景图 */
.about-bg {
    background: url("../assets/about/bg.png") no-repeat;
    background-size: 100% 100%;
}

/* 账户通介绍tabs */
.tabs-container {
    position: relative;
}


.tab-btn {

    font-weight: 500;

    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn.tabsActive {
    color: #315EF3;
    font-weight: 700;
}

.tab-btn.tabsActive::after {
    content: '';
    position: absolute;
    bottom: -0.11rem;
    /* 调整到边框下方 */
    left: 0;
    width: 100%;
    height: 0.02rem;
    background-color: #315EF3;
    border-radius: 0.01rem;
}


.tab-panel {
    display: none;
    animation: fadeIn 0.5s;
}

.tab-panel.tabsActive {
    display: block;
}




.list-items::before {
    content: '';
    display: block;
    width: 0.06rem;
    height: 0.06rem;
    background-color: #315EF3;
    /* 标记颜色 */
    border-radius: 50%;
    position: absolute;
    left: 0;
    /* 控制标记的水平位置 */
    top: 50%;
    transform: translateY(-50%);
}

@keyframes fadeIn {
    from {
        opacity: 0;
   
    }

    to {
        opacity: 1;
    }
}

/* 账户通介绍tabs */

/* 我的服务 */


.server-box {
    overflow: hidden;
    flex: 1;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    position: relative;
    background: linear-gradient(182deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.624) 100%);
}

/* 收起状态样式 */

.server-top {
    align-items: baseline;

}


/* 展开状态样式（默认隐藏） */
.server-expanded {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    bottom: 0;
    right: 0;
    /* padding: 0.3rem; */
    opacity: 0;
    transform: translateY(0.01rem);
    transition: all 0.3s ease 0.1s;
}

/* 悬停效果 */
.server-row:hover .server-box {
    flex: 0.69;
    /* 非悬停项缩小 */
}


/* 悬停效果 */
.server-row:hover .server-box:hover {
    flex: 1.6;
    box-shadow: 0 0.01rem 0.1rem rgba(0, 0, 0, 0.15);
}

.server-box:hover .server-collapsed {
    opacity: 0;
    transform: translateY(-0.01rem);
}

.server-box:hover .server-expanded {
    opacity: 1;

    background-size: 100% 100%;
    transform: translateY(0);
}

/* .server-box:hover ~ .server-box {
    flex: 0.69;
    align-items: center;
} */
/* 我的服务 */
.advant {
    align-items: center;
    justify-content: center;

}

/*   合作模式 */
.collaborationModeBox {
    background: linear-gradient(182deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.624) 100%);
}

.collaborationMode .collaborationModeBox .line {
    height: 0.01rem;
    height: 0px;
    /* border: 0.01rem solid; */
    border-image: linear-gradient(270deg, rgba(160.22124499082565, 195.13976007699966, 255, 1), rgba(181.65929943323135, 206.10619962215424, 255, 1), rgba(179.3362408876419, 147.8097277879715, 255, 1)) 1 1;
}

/* 合作模式 */
.collaborationMode .supplier::after {
    content: "";
    position: absolute;
    display: inline-block;
    
    width: 0.16rem;
    /* 图标宽度 */
    height: 0.16rem;
    /* 图标高度 */

    background-image: url('../../assets/about/duihao1.png');
    /* 替换为实际的图标路径 */
    background-size: cover;
    vertical-align: middle;
    left: 0;
}

.collaborationMode .Merchant::after {
    content: "";
    position: absolute;

    display: inline-block;
    width: 0.16rem;
    /* 图标宽度 */
    height: 0.16rem;
    /* 图标高度 */
    background-image: url('../../assets/about/duihao3.png');
    /* 替换为实际的图标路径 */
    background-size: cover;
    vertical-align: middle;
    left: 0;
}

.collaborationMode .Operator::after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 0.16rem;
    /* 图标宽度 */
    height: 0.16rem;
    /* 图标高度 */
    background-image: url('../../assets/about/duihao2.png');
    /* 替换为实际的图标路径 */
    background-size: cover;
    vertical-align: middle;
    left: 0;
}

.collaborationMode .btn:hover {
    background: linear-gradient(275deg, #2760E7 0%, #6692FF 100%);
    color: #fff;
    border: none;
}

.collaborationMode .btn:after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 0.2rem;
    /* 图标宽度 */
    height: 0.2rem;
    /* 图标高度 */
    background-image: url('../../assets/about/s1.png');
    /* 替换为实际的图标路径 */
    background-size: cover;
    vertical-align: middle;
    right: 0.15rem;

}
.collaborationMode .btn:hover::after {
    background-image: url('../../assets/about/s2.png');
}


.collaborationMode .btn1:hover {
    background: linear-gradient(275deg, #2760E7 0%, #6692FF 100%);
    color: #fff;
    border: none;
}
.collaborationMode .btn1:after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 0.16rem;
    /* 图标宽度 */
    height: 0.16rem;
    /* 图标高度 */
    background-image: url('../../assets/about/s1.png');
    /* 替换为实际的图标路径 */
    background-size: cover;
    vertical-align: middle;
    right: 0.04rem;

}
.collaborationMode .btn1:hover::after {
    background-image: url('../../assets/about/s2.png');
}