@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900&display=swap");
 .clear {
  font-size: 0;
  line-height: 0;
  clear: both;
  overflow: hidden;
  zoom: 1;
}
.fr {
  float: right;
}
.fl {
  float: left;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
  color: #c01701;
  transition: all 0.2s linear 0s;
}
        /* ===== 全局重置 ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        
        .container {margin:10vw auto;
            max-width: 88%;
            width: 100%;
        }

        /* ===== 页面标题 ===== */
        .page-title {
            text-align: center;
            font-size: 2.5rem;
            font-weight: 700;
            color: #0b2b44;
            letter-spacing: 1px;
            margin-bottom: 0px;}

        .page-subtitle {
            text-align: center;
            font-size: 1rem;
            color: #666;
            margin-bottom: 2rem;
            letter-spacing: 0px;
        }

        /* ===== 网格布局：每行 4 个 ===== */
        .team-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 3rem;
        }

        /* ===== 专家卡片 ===== */
        .expert-card {            
            border-radius: 0px;
            padding: 0px 0 30px 0;
            box-shadow: 0 8px 28px rgba(0, 20, 40, 0.06);
            text-align: center;
            transition: transform 0.25s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid rgba(0, 0, 0, 0.02);
        }

        .expert-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 16px 40px rgba(0, 30, 60, 0.12);
        }

        /* ===== 头像 ===== */
        .avatar {padding: 3% 8%;
            width: 100%;height: auto;
            border-radius: 0%;
            object-fit: cover;
            background: #e8edf3;
            margin-bottom: 18px;
            border: 0px solid #ffffff;
            box-shadow: 0 4px 14px rgba(0, 20, 40, 0.08);
            transition: border-color 0.25s;
        }

        .expert-card:hover .avatar {
            border-color: #7b4b8c;
        }

        /* ===== 名字 ===== */
        .expert-name {
            font-size: 1.2rem;
    font-weight: 700;
    color: #000;
    margin-bottom: .5rem;
        }

        /* ===== 职位 ===== */
        .expert-title {
            font-size: .85rem;
    font-weight: 500;
    color: #666;
    background: #eaf2fb;
    display: inline-block;
    padding: 0.2rem 2rem;
    border-radius: 30px;
    margin-bottom: 1rem;
    letter-spacing: 0.2px;
        }

        /* ===== 专业擅长 ===== */
        .expert-specialty {
            font-size: 14px;
            color: #3e4e5e;
            line-height: 1.6;
            margin-bottom: 20px;
            flex: 1;
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
        }

        .expert-specialty span {
            padding: 0;
    border-radius: 30px;
    font-size: .75vw;
    color: #666;
    display: inline-block;
    margin: 0.1vw 0.3vw;
        }

        /* ===== 查看更多按钮 ===== */
        .btn-more {background: #7b4b8c;
            color: #ffffff;            
            border-color: #7b4b8c;                     
            padding: 10px 28px;
            border-radius: 40px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s ease;
            letter-spacing: 0.5px;
            width: 100%;
            max-width: 180px;
            
        }

        .btn-more:hover {
            
            color: #fff;
        }

        .btn-more:active {
            transform: scale(0.96);
        }

        /* ===== 响应式 ===== */
        @media (max-width: 1024px) {
            .team-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 24px;
            }
        }

        @media (max-width: 768px) {
            body {
                padding: 32px 0px;
            }

            .team-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }

            .page-title {
                font-size: 26px;
            }

            .avatar {
                width: 100px;
                height: 100px;
            }

            .expert-name {
                font-size: 18px;
            }
        }

        @media (max-width: 480px) {
            .team-grid {
                grid-template-columns: 1fr 1fr;
                gap: 14px;
            }

            .expert-card {
                padding: 20px 12px 18px;
                border-radius: 16px;
            }

            .avatar {
                width: 80px;
                height: 80px;
                margin-bottom: 12px;
            }

            .expert-name {
                font-size: 16px;
            }

            .expert-title {
                font-size: 12px;
                padding: 1px 12px;
            }

            .expert-specialty {
                font-size: 12px;
                min-height: 36px;
            }

            .btn-more {
                font-size: 12px;
                padding: 8px 16px;
                max-width: 140px;
            }

            .page-title {
                font-size: 22px;
            }
            .page-subtitle {
                font-size: 14px;
                margin-bottom: 28px;
            }
        }

        @media (max-width: 380px) {
            .team-grid {
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }

            .expert-card {
                padding: 14px 8px 14px;
            }

            .avatar {
                width: 64px;
                height: 64px;
                border-width: 3px;
            }

            .expert-name {
                font-size: 14px;
            }

            .expert-title {
                font-size: 10px;
                padding: 1px 10px;
            }

            .expert-specialty span {
                font-size: 10px;
                padding: 2px 10px;
            }

            .btn-more {
                font-size: 11px;
                padding: 6px 12px;
                max-width: 120px;
            }
        }
		/* ===== 移动端适配 (仅针对 ≤768px 设备) ===== */
/* 所有文字使用 vw 单位，且最小不小于 3vw */
/* 不影响原有电脑端样式 */

@media (max-width: 768px) {
    .container {
        max-width: 94% !important;
        margin: 4vw auto !important;
        padding: 0 2vw !important;
    }

    .page-title {
        font-size: 5.8vw !important;
        margin-bottom: 0.5vw !important;
        letter-spacing: 0.5px !important;
    }

    .page-subtitle {
        font-size: 3.6vw !important;
        margin-bottom: 4vw !important;
        letter-spacing: 0.3px !important;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 3vw !important;
    }

    .expert-card {
        padding: 2vw 1.5vw 4vw !important;
        border-radius: 2vw !important;
        box-shadow: 0 0.6vw 2.4vw rgba(0, 20, 40, 0.06) !important;
    }

    .expert-card:hover {
        transform: translateY(-0.4vw) !important;
        box-shadow: 0 1.2vw 3.6vw rgba(0, 30, 60, 0.12) !important;
    }

    .avatar {
        width: 100% !important;
        height: auto !important;
        padding: 4% 6% !important;
        margin-bottom: 2vw !important;
        border-width: 0 !important;
        box-shadow: 0 0.3vw 1.2vw rgba(0, 20, 40, 0.08) !important;
    }

    .expert-name {
        font-size: 4.2vw !important;
        margin-bottom: 0.6vw !important;
        font-weight: 700 !important;
    }

    .expert-title {
        font-size: 3.2vw !important;
        padding: 0.4vw 2vw !important;
        margin-bottom: 1.2vw !important;
        border-radius: 4vw !important;
        font-weight: 500 !important;
        letter-spacing: 0.2px !important;
    }

    .expert-specialty {
        min-height: auto !important;
        margin-bottom: 2.5vw !important;
        padding: 0 1vw !important;
        font-size: 0 !important;
        line-height: normal !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5vw !important;
    }

    .expert-specialty span {
        font-size: 3vw !important;
        padding: 0.3vw 1.2vw !important;
        margin: 0 !important;
        border-radius: 4vw !important;
        display: inline-block !important;
        line-height: 1.4 !important;
        background: transparent !important;
        color: #666 !important;
        border: none !important;
    }

    .btn-more {
        font-size: 3.2vw !important;
        padding: 1.8vw 4vw !important;
        max-width: 100% !important;
        border-radius: 4vw !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px !important;
        background: #7b4b8c !important;
        color: #ffffff !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.25s ease !important;
        width: 100% !important;
        display: inline-block !important;
        text-align: center !important;
    }

    .btn-more:hover {
        background: #7b4b8c !important;
        color: #fff !important;
        transform: none !important;
    }

    .btn-more:active {
        transform: scale(0.96) !important;
    }
}

/* ===== 小屏手机 (≤480px) ===== */
@media (max-width: 480px) {
    .container {
        max-width: 96% !important;
        margin: 15.5vw auto !important;
        padding: 0 1.5vw !important;
    }

    .page-title {
        font-size: 5.5vw !important;
    }

    .page-subtitle {
        font-size: 3.4vw !important;
        margin-bottom: 3.5vw !important;
    }

    .team-grid {
        gap: 2.5vw !important;
    }

    .expert-card {
        padding: 1.8vw 1.2vw 3.2vw !important;
        border-radius: 2.4vw !important;
    }

    .avatar {
        padding: 4% 5% !important;
        margin-bottom: 1.8vw !important;
    }

    .expert-name {
        font-size: 4vw !important;
        margin-bottom: 4.4vw !important;
    }

    .expert-title {
        font-size: 3vw !important;
        padding: 0.3vw 1.8vw !important;
        margin-bottom: 1vw !important;
    }

    .expert-specialty {
        gap: 0.4vw !important;
        margin-bottom: 2.2vw !important;
    }

    .expert-specialty span {
        font-size: 3vw !important;
        padding: 0.2vw 1vw !important;
    }

    .btn-more {
        font-size: 3vw !important;
        padding: 1.5vw 3vw !important;
        border-radius: 4vw !important;
    }
}

/* ===== 极小屏手机 (≤380px) ===== */
@media (max-width: 380px) {
    .container {
        max-width: 98% !important;
        margin: 18vw auto !important;
        padding: 0 1vw !important;
    }

    .page-title {
        font-size: 5.2vw !important;
    }

    .page-subtitle {
        font-size: 3.2vw !important;
        margin-bottom: 3vw !important;
    }

    .team-grid {
        gap: 1.8vw !important;
    }

    .expert-card {
        padding: 1.2vw 0.8vw 2.8vw !important;
        border-radius: 2vw !important;
    }

    .avatar {
        padding: 3% 4% !important;
        margin-bottom: 1.5vw !important;
    }

    .expert-name {
        font-size: 3.8vw !important;
        margin-bottom: 4.3vw !important;
    }

    .expert-title {
        font-size: 3vw !important;
        padding: 0.2vw 1.5vw !important;
        margin-bottom: 0.8vw !important;
    }

    .expert-specialty {
        gap: 0.3vw !important;
        margin-bottom: 2vw !important;
    }

    .expert-specialty span {
        font-size: 3vw !important;
        padding: 0.1vw 0.8vw !important;
    }

    .btn-more {
        font-size: 3vw !important;
        padding: 1.2vw 2.5vw !important;
        border-radius: 3.6vw !important;
    }
}