.hero {
    width: 100%;
    margin: 0 auto;
    height: 600px;
    background-color: #f5f5f5;
}


.hero .swiper {
    width: 100%;
    height: 100%;
}

.hero__content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-1 {
    background-image: url('/static/whl/banner/1.jpg');
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
}

.slide-2 {
    background-image: url('/static/whl/banner/2.jpg');
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
}

.slide-3 {
    background-image: url('/static/whl/banner/3.jpg');
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
}

.hero__title {
    font-family: var(--font-family);
    font-size: var(--header-font-size-xl);
    line-height: 1.2;
    color: #ffffff;
    margin: 0;
}

/* --------------------------------------------
   文字动画效果
   -------------------------------------------- */
.animate-text {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.swiper-slide-active .animate-text {
    opacity: 1;
    transform: translateY(0);
}

/* 副标题先出现，标题后出现 */
.swiper-slide-active .hero__left-subtitle {
    transition-delay: 0.1s;
}

.swiper-slide-active .hero__left-title {
    transition-delay: 0.25s;
}





@media screen and (max-width: 768px) {
    .hero {
        height: 300px;
    }
}


/* ============================================
   Products 模块 - 推荐产品区块
   BEM 命名：.products / .products__*
   说明：仅作用于 .products 区域内的样式，
         不影响 header / footer / hero 等其他模块
   ============================================ */

/* --------------------------------------------
   区块容器 - Products Block Container
   -------------------------------------------- */

/**
 * Products 区块外层
 * 作为整个推荐产品区的根容器
 */
.products {
    width: 100%;
    background-color: #ffffff;
}

/**
 * Products 内容容器
 * 限制最大宽度并水平居中
 */
.products__container {
    max-width: var(--banxin-width);
    margin: 0 auto;
    padding: 60px 0 70px;
    box-sizing: border-box;
}

/* --------------------------------------------
   区块头部 - Products Header
   包含左侧标题与右侧"More products"按钮
   -------------------------------------------- */

/**
 * 区块头部布局容器
 * 使用 flex 实现标题与按钮的两端对齐
 */
.products__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

/**
 * 区块主标题
 * "Recommended Products" 文字样式
 */
.products__title {
    font-family: var(--font-family);
    font-size: var(--header-font-size-xl);
    line-height: 1.2;
    color: var(--header-color-text);
    margin: 0;
}

/**
 * "More products" 跳转按钮
 * 圆角胶囊形按钮：左圆形箭头 + 右文字
 */
.products__more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 18px 0 8px;
    background-color: #fcbc04;
    color: var(--header-color-text);
    border-radius: 999px;
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

/**
 * 按钮悬停态：加深背景 + 轻微位移
 */
.products__more:hover {
    background-color: #f0b400;
    transform: translateY(-1px);
}

/**
 * 按钮左侧圆形图标容器
 * 深色圆形 + 白色右箭头
 */
.products__more-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #1a2a44;
    color: #ffffff;
    flex-shrink: 0;
}

.products__more-icon svg {
    display: block;
}

/**
 * 按钮右侧文字
 */
.products__more-text {
    white-space: nowrap;
}

/* --------------------------------------------
   卡片网格 - Products Grid
   3 列等宽卡片，间距 30px
   -------------------------------------------- */

/**
 * 网格容器：使用 CSS Grid 三列布局
 */
.products__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/**
 * 单个产品卡片
 */
.products__card {
    display: block;
}

/**
 * 卡片链接（整卡可点击）
 */
.products__card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* --------------------------------------------
   卡片媒体 - Products Card Media
   图片容器，保持原始 408x257 比例
   -------------------------------------------- */

/**
 * 图片容器
 * 使用 aspect-ratio 锁定原始 257px 高度对应比例
   通过 background 占位防止图片加载前塌陷
 */
.products__card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 384 / 257;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f5f5f5;
}

/**
 * 卡片图片
   object-fit: cover 保证响应时不变形填充
   transition 让悬停缩放更平滑
 */
.products__card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/**
 * 卡片悬停时图片轻微放大
 */
.products__card-link:hover .products__card-img {
    transform: scale(1.05);
}

/* --------------------------------------------
   卡片正文 - Products Card Body
   标题 + 描述文字
   -------------------------------------------- */

/**
 * 卡片正文容器
 */
.products__card-body {
    padding: 18px 4px 0;
}

/**
 * 卡片标题
 * 产品名称：粗体深色
 */
.products__card-title {
    font-family: var(--font-family);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--header-color-text);
    margin: 0 0 10px;
}

/**
 * 卡片描述
 * 次要说明文字：灰色、常规字重
 */
.products__card-desc {
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--header-color-text-secondary);
    margin: 0;
    display: flex;
    flex-direction: column;
    /* 超出3行省略号显示 */
    /* overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; */
}

.products__card-link:hover .products__card-desc {
    color: var(--header-color-accent-2);
}


/* ============================================
   响应式适配 - Products Responsive
   ============================================ */

/* 平板：两列布局，缩小标题字号 */
@media screen and (max-width: 1024px) {
    .products__container {
        padding: 50px 24px 60px;
    }

    .products__title {
        font-size: 28px;
    }

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

/* 手机端：单列布局 */
@media screen and (max-width: 768px) {
    .products__container {
        padding: 40px 16px 50px;
    }

    .products__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 24px;
    }

    .products__title {
        font-size: 36px;
    }

    .products__more {
        align-self: flex-end;
    }

    .products__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .products__card-body {
        padding: 14px 2px 0;
    }

    .products__card-title {
        font-size: 18px;
    }

    .products__card-desc {
        font-size: 13px;
    }
}


/* ============================================
   About 模块 - 关于我们区块
   BEM 命名：.about / .about__*
   说明：仅作用于 .about 区域内的样式，
         不影响 header / footer / products 等其他模块
   ============================================ */

/* --------------------------------------------
   区块容器 - About Block Container
   -------------------------------------------- */

/**
 * About 区块外层
 * 作为整个关于我们区的根容器
 */
.about {
    width: 100%;
    background-color: #ffffff;
}

/**
 * About 内容容器
 * 限制最大宽度并水平居中，使用 flex 实现左右两栏布局
 */
.about__container {
    max-width: var(--banxin-width);
    margin: 0 auto;
    padding: 70px 0 80px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* --------------------------------------------
   左侧文本 - About Content
   包含标题、副标题、段落文字与跳转按钮
   -------------------------------------------- */

/**
 * 左侧文本容器
 * 占据约 50% 宽度
 */
.about__content {
    flex: 1 1 50%;
    min-width: 0;
}

/**
 * 主标题 "About US"
 * 大号粗体黑色
 */
.about__title {
    font-family: var(--font-family);
    font-size: var(--header-font-size-xl);
    line-height: 1.1;
    color: var(--header-color-text);
    margin: 0 0 60px;
}

/**
 * 副标题 "Our History"
 * 中等字号、品牌黄色
 */
.about__subtitle {
    font-family: var(--font-family);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--header-color-accent-2);
    margin: 0 0 18px;
}

/**
 * 描述段落
 * 次要灰色，行高较大利于阅读
 */
.about__text {
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--header-color-text-secondary);
    margin: 0 0 18px;
}

/**
 * 段落最后一项去除底部间距
 */
.about__text:last-of-type {
    margin-bottom: 80px;
}

/* --------------------------------------------
   跳转按钮 - About More Button
   与 .products__more 风格一致的黄色胶囊按钮
   -------------------------------------------- */

/**
 * "View more" 跳转按钮
 * 圆角胶囊形：左圆形深色箭头 + 右文字
 */
.about__more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 22px 0 8px;
    background-color: #fcbc04;
    color: var(--header-color-text);
    border-radius: 999px;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

/**
 * 按钮悬停态：加深背景 + 轻微位移
 */
.about__more:hover {
    background-color: #f0b400;
    transform: translateY(-1px);
}

/**
 * 按钮左侧深色圆形图标容器
 */
.about__more-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #1a2a44;
    color: #ffffff;
    flex-shrink: 0;
}

.about__more-icon svg {
    display: block;
}

/**
 * 按钮右侧文字
 */
.about__more-text {
    white-space: nowrap;
}

/* --------------------------------------------
   右侧图片 - About Media
   拼图式四宫格产品图（含中心 Logo 与 OUR PRODUCT 文字）
   -------------------------------------------- */

/**
 * 右侧图片容器
 * 占据约 50% 宽度，限制最大宽度保持图片比例
 */
.about__media {
    flex: 0 0 50%;
    max-width: 600px;
}

/**
 * 右侧图片
 * 宽度撑满容器，固定原始宽高比显示
 * hover 时轻微放大，增强交互反馈
 */
.about__image {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

/**
 * 鼠标悬停于图片区域时：图片轻微放大
 */
.about__media:hover .about__image {
    transform: scale(1.04);
}


/* ============================================
   响应式适配 - About Responsive
   ============================================ */

/* 平板：缩小标题字号，缩小左右间距 */
@media screen and (max-width: 1024px) {
    .about__container {
        padding: 60px 24px 70px;
        gap: 40px;
    }

    .about__title {
        font-size: 44px;
        margin-bottom: 24px;
    }

    .about__subtitle {
        font-size: 20px;
    }

    .about__text {
        font-size: 15px;
    }
}

/* 手机端：左右两栏改为上下堆叠 */
@media screen and (max-width: 768px) {
    .about__container {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 16px 50px;
        gap: 32px;
    }

    .about__content {
        flex: 1 1 100%;
        width: 100%;
    }

    .about__title {
        font-size: 36px;
        margin-bottom: 20px;
    }

    .about__subtitle {
        font-size: 18px;
        margin-bottom: 14px;
    }

    .about__text {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 14px;
    }

    .about__text:last-of-type {
        margin-bottom: 24px;
    }

    .about__media {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
}


/* ============================================
   News 模块 - 新闻区块
   BEM 命名：.news / .news__*
   说明：仅作用于 .news 区域内的样式，
         不影响 header / footer / products / about 等其他模块
   ============================================ */

/* --------------------------------------------
   区块容器 - News Block Container
   -------------------------------------------- */

/**
 * News 区块外层
 * 作为整个新闻区的根容器
 */
.news {
    width: 100%;
    background-color: #ffffff;
}

/**
 * News 内容容器
 * 限制最大宽度并水平居中
 */
.news__container {
    max-width: var(--banxin-width);
    margin: 0 auto;
    padding: 60px 0 70px;
    box-sizing: border-box;
}

/* --------------------------------------------
   区块头部 - News Header
   包含左侧标题与右侧"View more"按钮
   -------------------------------------------- */

/**
 * 区块头部布局容器
 * 使用 flex 实现标题与按钮的两端对齐
 */
.news__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

/**
 * 区块主标题
 * "News" 文字样式：大号粗体黑色
 */
.news__title {
    font-family: var(--font-family);
    font-size: var(--header-font-size-xl);
    line-height: 1.2;
    color: var(--header-color-text);
    margin: 0;
}

/**
 * "View more" 跳转按钮
 * 圆角胶囊形按钮：左圆形箭头 + 右文字
 * 风格与 .products__more / .about__more 保持一致
 */
.news__more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 18px 0 8px;
    background-color: #fcbc04;
    color: var(--header-color-text);
    border-radius: 999px;
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

/**
 * 按钮悬停态：加深背景 + 轻微位移
 */
.news__more:hover {
    background-color: #f0b400;
    transform: translateY(-1px);
}

/**
 * 按钮左侧圆形图标容器
 * 深色圆形 + 白色右箭头
 */
.news__more-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #1a2a44;
    color: #ffffff;
    flex-shrink: 0;
}

.news__more-icon svg {
    display: block;
}

/**
 * 按钮右侧文字
 */
.news__more-text {
    white-space: nowrap;
}

/* --------------------------------------------
   卡片网格 - News Grid
   3 列等宽卡片，间距 30px
   -------------------------------------------- */

/**
 * 网格容器：使用 CSS Grid 三列布局
 */
.news__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/**
 * 单个新闻卡片
 */
.news__card {
    display: block;
    background-color: #F4F4F4;
    border-radius: 8px;
    overflow: hidden;
}

/**
 * 卡片链接（整卡可点击）
 */
.news__card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* --------------------------------------------
   卡片媒体 - News Card Media
   图片容器，固定 4:3 比例
   -------------------------------------------- */

/**
 * 图片容器
 * 使用 aspect-ratio 锁定 4:3 宽高比
 * 通过 background 占位防止图片加载前塌陷
 */
.news__card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f5f5f5;
}

/**
 * 卡片图片
 * object-fit: cover 保证响应时不变形填充
 * transition 让悬停缩放更平滑
 */
.news__card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/**
 * 卡片悬停时图片轻微放大
 */
.news__card-link:hover .news__card-img {
    transform: scale(1.05);
}

/* --------------------------------------------
   卡片正文 - News Card Body
   标题 + 日期徽章
   -------------------------------------------- */

/**
 * 卡片正文容器
 */
.news__card-body {
    padding: 25px 15px;

}

/**
 * 卡片标题
 * 新闻标题：常规字重深色，支持多行
 */
.news__card-title {
    font-family: var(--font-family);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--header-color-text);
    margin: 0 0 18px;
    /* 超出3行省略号显示 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/**
 * 卡片悬停时标题变为品牌黄色
 */
.news__card-link:hover .news__card-title {
    color: var(--header-color-accent-2);
}

/**
 * 日期徽章
 * 黑色背景 + 黄色文字的胶囊形标签
 */
.news__card-date {
    display: inline-block;
    padding: 6px 14px;
    background-color: #1a2a44;
    color: #fcbc04;
    border-radius: 999px;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
}


/* ============================================
   响应式适配 - News Responsive
   ============================================ */

/* 平板：两列布局，缩小标题字号 */
@media screen and (max-width: 1024px) {
    .news__container {
        padding: 50px 24px 60px;
    }

    .news__title {
        font-size: 36px;
    }

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

/* 手机端：单列布局 */
@media screen and (max-width: 768px) {
    .news__container {
        padding: 40px 16px 50px;
    }

    .news__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 24px;
    }

    .news__title {
        /* font-size: 24px; */
    }

    .news__more {
        align-self: flex-end;
    }

    .news__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .news__card-body {
        padding: 25px 15px;
    }

    .news__card-title {
        font-size: 16px;
        margin-bottom: 14px;
    }

    .news__card-date {
        font-size: 12px;
        padding: 5px 12px;
    }
}