/* ========================= CSS 模块索引（按 index.html 页面结构顺序） =========================
   1. 页头（Header）：logo / 导航（.header-container, .nav-menu, .banner, .has-submenu, .submenu, .submenu-item, .menu-toggle）
   2. 语言切换（Language Switcher）：#languageSwitcher, .language-dropdown, .language-option
   3. 首屏轮播（Hero Carousel）：.carousel-slides, .carousel-slide, .carousel-indicator
   4. 公司简介（Company Profile）：.why_choice_us, .subtitle, .content-text, .stats-*
   5. 质量认证（Quality Cert）：.cert-subtitle
   6. 为什么选择我们（Why Choose Us）：.gallery-*, .content-title
   7. 应用领域（Application Field）：.field-*, .field-container, .field-slide, .field-nav, .field-dot
   8. 新闻与行业动态（News & Trends）：.news-*, .tab-content
   9. 页脚（Footer）：.footer-*, .bottom_*
  10. 响应式（Responsive）：@media 1100 / 1024 / 768
  提示：模块内样式尽量靠近页面结构；若需快速定位，请搜索上述类名或查看本索引。
*/
:root {
    --brand-primary: #50A26F;
    /* 主品牌绿色，来自设计稿 */
    --brand-primary-dark: #227E51;
    /* 深绿色，用于分隔线与 hover */
    --brand-bg-light: #f6f8fa;
    /* 浅灰背景，用于内容区块 */
    --brand-gray-light: #ebeef0;
    /* 卡片背景灰 */
    --text-gray-700: #57595B;
    /* 日期文字等深灰 */
    --text-gray-500: #737475;
    /* 次级说明文字灰 */
    --white: #FFFFFF;

    /* 字体占位：待替换指定字体，已设置合理中文/英文字体回退 */
    --font-heading: "Montserrat", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
    --font-body: "Inter", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
}

/* 全局样式重置和基础设置 */
body {
    margin: 0;
    padding: 0;
    padding-top: 80px;
    font-family: var(--font-body);
    /* 全局正文字体：与设计稿对齐（先使用占位回退） */
}

/* 全局 a 标签样式：点击后不变色，无下划线 */
a,
a:link,
a:visited,
a:hover,
a:active {
    color: inherit;
    /* 继承父元素颜色 */
    text-decoration: none;
    /* 去掉下划线 */
}

a:visited {
    color: inherit;
    /* 访问后保持原色，不变紫色 */
    text-decoration: none;
}

/* 全局：限制横向滚动，避免页面在左右滑动时出现白边 */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
    /* 禁止水平滚动 */
}

.rect_show {
    display: flex;
    flex-direction: column;
    padding-top: calc((80/1918) * 100vw);
    padding-bottom: calc((40/1918) * 100vw);
    padding-left: calc((94/1918) * 100vw);
    padding-right: calc((94/1918) * 100vw);
    width: 100%;
    align-items: center;
    box-sizing: border-box;
}

/* 顶部导航样式 */
.banner {
    color: #000000;
    font-size: calc((20/1918) * 100vw);
    line-height: calc((26/1918) * 100vw);
    padding-left: calc((20/1918) * 100vw);
    padding-right: calc((20/1918) * 100vw);
    position: relative;
    cursor: pointer;
    align-items: center;
    font-weight: bold;
}

/*.banner.active {*/
/*    color: #3ca9dc;*/
/*}*/

/* 二级菜单样式 */
.has-submenu {
    position: relative;
    /* padding-bottom: calc((20/1918) * 100vw); */
    cursor: pointer;
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    z-index: 1000;
    min-width: 200px;
    padding: 10px 0;
}

/* 移动端点击展开子菜单 */
@media (max-width: 1100px) {
    .has-submenu.active .submenu {
        display: block;
        position: static;
        margin-top: 10px;
        min-width: auto;
        width: 100%;
    }
}

/* 语言切换器样式 */
.language-switcher {
    display: flex;
    align-items: center;
    margin-right: 80px;
}

/* ===== 模块 2：语言切换（与页头相邻） ===== */
/* 语言切换按钮基本样式（与 .language-switcher 视觉配合） */
#languageSwitcher {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 10px 0;
    position: relative;
    z-index: 1001;
}

.language-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.language-text {
    font-weight: 500;
}

/* 语言下拉菜单默认隐藏，并添加动画过渡效果 */
.language-dropdown {
    display: none;
    min-width: 100px;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}



.submenu-item {
    padding: 10px 20px;
    font-size: 16px;
    color: #333;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

.submenu-item:hover {
    background-color: #f6f8fa;
    color: #3ca9dc;
}

/* 汉堡菜单按钮样式 */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 5px;
    z-index: 1001;
}

.menu-toggle span {
    width: 30px;
    height: 3px;
    background-color: #000;
    margin: 3px 0;
    transition: 0.3s;
}

/* 汉堡菜单按钮动画效果 */
.menu-toggle.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* 页面布局容器 */
.page-container {
    display: flex;
    flex-direction: column;
}

/* ========= 统一交互与按钮（新增） ========= */
/* 顶部导航 hover：与效果图一致，悬停变蓝色 */
.banner:hover {
    color: #3ca9dc;
}

/* 通用按钮：用于 “More” 等入口，统一 hover 动效 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    border-radius: 20px;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    color: white;
}

.btn-solid {
    background-color: var(--brand-primary);
    color: white !important;
}

.btn-solid:hover {
    background-color: #2f7e53;
    color: white !important;
}

.btn-solid:active,
.btn-solid:visited,
.btn-solid:focus {
    color: white !important;
}

.btn-outline {
    border: 1px solid var(--brand-primary);
    color: var(--brand-primary);
    background-color: transparent;
}

.btn-outline:hover {
    background-color: var(--brand-primary);
    color: var(--white);
}

/* 首屏横幅按钮 hover 变绿底白字 */
.banner_text_bottom {
    transition: all 0.25s ease;
}

.banner_text_bottom:hover {
    background-color: var(--brand-primary);
    color: var(--white);
    border-color: var(--brand-primary);
}

/* 可点击卡片 hover：用于新闻列表与图片卡片 */
.clickable-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clickable-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* 小图 hover 轻微缩放增强层级感 */
.img-item {
    transition: transform 0.25s ease;
}

.img-item:hover {
    transform: scale(1.02);
}

/* 轮播指示点 hover 强调 */
.carousel-indicator {
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.carousel-indicator:hover {
    background-color: var(--brand-primary);
    transform: scale(1.1);
}

/* 链接重置：卡片可点击时不影响文字颜色 */
.news-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* 无障碍：用户偏好减少动画时禁用过渡 */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* 头部导航容器 */
.header-container {
    display: flex;
    flex-direction: row;
    padding-left: calc((40/1918) * 100vw);
    padding-right: calc((40/1918) * 100vw);
    height: 80px;
    align-items: center;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #fff;
    z-index: 999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 导航菜单容器 */
.nav-menu {
    flex: 1;
    justify-content: center;
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* 标题样式 */
.section-title {
    color: var(--brand-primary);
    font-size: 64px;
    line-height: 54px;
    margin-top: 80px;
}

.subtitle {
    margin-top: calc((36/1918) * 100vw);
    font-size: calc((44/1918) * 100vw);
    line-height: calc((63/1918) * 100vw);
    font-weight: bold;
    color: #2d2e2f;
}

.content-text {
    margin-top: calc((53.5/1918) * 100vw);
    /* line-height: calc((63/1918) * 100vw); */
    margin-bottom: calc((50/1918) * 100vw);
    line-height: calc((43/1918) * 100vw);
    color: #2d2e2f;
    padding-right: 50px;
    font-size: 16px;
}

/* 数字统计样式 */
.number_left {
    color: var(--brand-primary);
    font-size: calc((60/1918) * 100vw);
    line-height: calc((79/1918) * 100vw);
    font-weight: bold;
    width: 200px;
}

.number_right {
    color: #737475;
    font-size: calc((22/1918) * 100vw);
    line-height: calc((34/1918) * 100vw);
    width: calc((340/1918) * 100vw);
}

.stats-container {
    display: flex;
    flex-direction: column;
    flex: 640;
    justify-content: space-between;
}

.stats-divider {
    width: 100%;
    background-color: var(--brand-primary);
    height: 1px;
    /* margin-bottom: 20px; */
}

.stats-row {
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
    gap: 44px;
}

/* 认证部分样式 */
.cert-section {
    display: flex;
    flex-direction: column;
    padding-top: calc((124/1918) * 100vw);
    padding-bottom: calc((124/1918) * 100vw);
    background-color: var(--brand-primary);
    width: 100%;
    align-items: center;
}

.cert-subtitle {
    padding-left: 50px;
    padding-right: 50px;
    color: #FFFFFF;
    font-size: calc((34/1918) * 100vw);
    line-height: 45px;
    text-align: center;
    font-weight: bold;
}

/* 为什么选择我们部分样式 */
.why-choose-section {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    align-items: center;
    padding-top: calc((154/1918) * 100vw);
    padding-left: calc((91/1918) * 100vw);
    padding-right: calc((91/1918) * 100vw);
    padding-bottom: calc((0/1918) * 100vw);
    box-sizing: border-box;
}

.content-title {
    font-size: 24px;
    font-weight: bold;
}

.gallery-container {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    box-sizing: border-box;
    gap: 25px;
}

.gallery-four {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gallery-large-container {
    flex: 1;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.gallery-large {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    color: white;
}

.gallery-text {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
}



.gallery-column {
    height: 50%;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    overflow: hidden;
    justify-content: space-between;
    gap: calc((24/1918) * 100vw);
}

.gallery-column .img-item {
    /* 关键修复：两张小图 + gap 之和为 100%，避免 50% + gap 造成水平溢出 */
    width: calc((100% - ((24/1918) * 100vw)) / 2);
    aspect-ratio: 418/262;
    /* 418:262 宽高比 */
    object-fit: cover;
    object-position: center;
}

.field_img {
    width: calc((683/1918) * 100vw);
    height: calc((388/1918) * 100vw);
    object-fit: cover;
}

.field_title1 {
    font-size: calc((38/1918) * 100vw);
    font-weight: bold;
}

.field_title2 {
    font-size: calc((30/1918) * 100vw);
    color: var(--brand-primary);
    margin-top: 7px;
    line-height: 1.4;
    max-width: 100%;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    margin-bottom: 20px;
}

.gallery-img {
    width: 100%;
    object-fit: cover;
}

/* 新闻和应用领域部分样式 */
.news-app-section {
    display: flex;
    flex-direction: column;
    padding-left: calc((145/1918) * 100vw);
    padding-right: calc((145/1918) * 100vw);
    width: 100%;
    box-sizing: border-box;
}

.news-app-header {
    display: flex;
    flex-direction: row;
    padding-bottom: calc((65/1918) * 100vw);
    width: 100%;
}

.news-container {
    display: flex;
    gap: 20px;
    box-sizing: border-box;
}

.news-item {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

.news-content {
    background-color: #ebeef0;
    padding-left: calc((38/1918) * 100vw);
    padding-right: calc((38/1918) * 100vw);
    padding-top: calc((20/1918) * 100vw);
    padding-bottom: calc((50/1918) * 100vw);
    display: flex;
    flex-direction: column;
    gap: 10px;
    line-height: calc((35/1918) * 100vw);
    color: #3a3d3f;

}

.news-date {
    color: #57595B;
    font-size: 18px;
    line-height: 24px;
    color: #57595b;
    margin-top: 20px;
}

.news-title {
    font-size: 18px;
    font-weight: bold;
    height: 55px;
    line-height: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 底部样式 */
.footer {
    background-color: var(--brand-primary-dark);
    display: flex;
    flex-direction: column;
}

.footer-header {
    display: flex;
    flex-direction: row;
    margin-left: calc((100/1918) * 100vw);
    margin-right: calc((100/1918) * 100vw);
    /* 新增右侧间距以容纳社交图标 */
    height: calc((75/1918) * 100vw);
    align-items: center;
    justify-content: space-between;
    /* 左右分布：左侧 Logo，右侧社交图标 */
}

/* 页脚社交图标容器与图标样式 */
.social-icons {
    /* 社交图标容器：水平排列 */
    display: flex;
    align-items: center;
    gap: 12px;
    /* 图标之间的间距 */
}

.social-icon {
    /* 通用社交图标：小方块，白色文字居中 */
    width: calc((32/1918) * 100vw);
    height: calc((32/1918) * 100vw);
    min-width: 28px;
    /* 防止极窄屏过小 */
    min-height: 28px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    font-weight: 700;
    text-decoration: none;
}

.social-icon.img-icon {
    /* 图片类图标（如微信）透明背景 */
    background-color: transparent;
    border: none;
}

.social-icon.img-icon img {
    /* 让图片在方块内完整显示 */
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-divider {
    width: calc(100% - (186/1918) * 100vw);
    height: 1px;
    background-color: #227e51;
    margin-left: calc((93/1918) * 100vw);
}

.footer-content {
    display: flex;
    flex-direction: row;
    padding-bottom: 45px;
    justify-content: flex-start;
    /* 采用靠左排列，剩余空间交由左侧内容平分 */
    align-items: flex-start;
    /* 右侧联系信息的高度以内容为准，避免被挤压 */
    flex-wrap: nowrap;
    /* 大屏默认：单行显示，避免右侧联系方式被挤到下一行 */
    gap: 24px 20px;
    /* 列间距，保证多列之间的呼吸感 */
}

.footer-loop {
    display: flex;
    flex-direction: row;
    /* 关键：让左侧各内容块均分剩余空间并允许自由收缩，保持单行 */
    flex: 1 1 0;
    min-width: 0;
    /* 允许在需要时压缩列宽，避免因为最小宽度导致换行或溢出 */
}

/* 右侧联系信息与垂直分隔线样式 */
.footer-v-divider {
    /* 垂直分隔线 */
    width: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    /* 统一为白色 30% 透明度 */
    /* 关键修复：原色与背景色一致导致不可见，改为半透明白色提高对比 */
    margin: 0 20px;
    align-self: stretch;
    /* 关键修复：在 Flex 容器中拉伸至与两侧内容同高 */
}

.footer-contact {
    /* 右侧联系信息容器 */
    display: flex;
    flex-direction: column;
    /* 右侧外边距保持适中，避免过大导致可视区域不足 */
    /* margin-right: 16px; */
    margin-top: 53px;
    /* 与左侧栏目顶对齐 */
    flex: 0 0 320px;
    /* 固定宽度调整为 320 像素（桌面端更紧凑） */
    width: 320px;
    max-width: 320px;
    /* 统一固定宽为 320 px，避免各断点不一致导致布局抖动 */
    overflow-wrap: anywhere;
    /* 长地址/邮箱自动换行，避免溢出 */
}

.contact-line {
    /* 每一条联系信息行 */
    display: flex;
    align-items: center;
    gap: 12px;
    color: #FFFFFF;
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 30px;
}

/* 联系信息图标尺寸控制，防止图标过大导致文字被挤压 */
.contact-icon {
    width: 20px;
    height: 20px;
    min-width: 18px;
    min-height: 18px;
    object-fit: contain;
}

/* ===== 响应式优化：1100–1280 像素区间 =====
   目标：让右侧联系方式更宽（460 px），左侧栏目自动换行或缩窄列宽，避免挤压与溢出。
*/
@media (min-width: 1100px) and (max-width: 1280px) {
    .footer-content {
        /* 中宽设备也保持单行显示，避免联系方式被挤下去 */
        flex-wrap: nowrap;
        gap: 24px 20px;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .footer-loop {
        /* 让左侧内容块均分剩余空间并允许收缩 */
        flex: 1 1 0;
        min-width: 0;
    }

    .footer-v-divider {
        /* 保持固定间距，不使用 auto，以避免布局被推挤 */
        margin: 0 16px;
    }

    .footer-contact {
        /* 统一为 320 px 固定宽，确保左侧栏目与右侧联系方式在同一行 */
        flex: 0 0 320px;
        width: 320px;
        max-width: 320px;
        margin-right: 0px;
    }
}

/* ===== 大屏优化：分两档确保不截断 ===== */
/* 桌面普通宽度（1281–1600 px）：联系方式设为 520 px，避免总宽超出导致被截断 */
@media (min-width: 1281px) and (max-width: 1600px) {
    .footer-content {
        flex-wrap: nowrap;
        /* 桌面保持单行 */
    }

    .footer-loop {
        flex: 1 1 0;
        /* 左侧分栏可收缩 */
        min-width: 0;
    }

    .footer-v-divider {
        margin: 0 16px;
    }

    .footer-contact {
        flex: 0 0 320px;
        /* 固定宽度为 320 px，减少对整体栅格的占用 */
        width: 320px;
        max-width: 320px;
        /* margin-right: 16px; */
    }
}

/* 超宽桌面（≥1601 px）：联系方式扩大为 560 px，提升可读性 */
@media (min-width: 1601px) {
    .footer-content {
        flex-wrap: nowrap;
    }

    .footer-loop {
        flex: 1 1 0;
        min-width: 0;
    }

    .footer-v-divider {
        margin: 0 16px;
    }

    .footer-contact {
        flex: 0 0 320px;
        width: 320px;
        max-width: 320px;
        margin-right: 16px;
    }
}

.bottom_content {
    display: flex;
    flex-direction: column;
    margin-top: 53px;
    flex: 1;
}

.bottom_top {
    color: #FFFFFF;
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 34.7px;
    text-align: center;
    font-weight: bold;
}

.bottom_list {
    color: #FFFFFF;
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 20px;
    text-align: center;
}

.why_choice_us {
    color: var(--brand-primary);
    font-family: var(--font-heading);
    font-size: calc((64/1918) * 100vw);
    line-height: calc((85/1918) * 100vw);
    /* margin-bottom: calc((24/1918) * 100vw); */
}

.application_title {
    margin-bottom: calc((90/1918) * 100vw);
}

.choice_us {
    color: #737475;
    font-family: var(--font-body);
    font-size: calc((24/1918) * 100vw);
    line-height: calc((36/1918) * 100vw);
    text-align: center;
    margin-top: calc((24/1918) * 100vw);
    margin-bottom: calc((76/1918) * 100vw);
    /* margin-left: 89px; */
    width: calc(100% - (14/1918) * 100vw);
    padding: 0px calc((200/1918) * 100vw);
    box-sizing: border-box;
}

.application_field {
    padding: 0px 0px;
    height: 90px;
    margin-bottom: calc((150/1918) * 100vw);
}

/* 解决rect_show和content_with_num同时存在时的样式冲突 */
.rect_show.content_with_num {
    flex-direction: row;
    gap: 20px;
    align-items: stretch;
    /* 确保子元素高度一致 */
}

.content_with_num_content {
    display: flex;
    flex-direction: column;
    flex: 900;
}

/* 统一“公司简介（content_with_num）”两列布局在 Pad/桌面端的比例与伸缩行为 */
@media (min-width: 1101px) {
    .rect_show.content_with_num {
        /* Pad/桌面端保持横向排列，并统一间距 */
        flex-direction: row;
        gap: 24px;
        /* 统一两列间距为 24 px */
        align-items: stretch;
        /* 两侧区域高度保持一致 */
    }

    .content_with_num_content {
        /* 文案内容：在横向布局下等比分配空间，并允许在极端宽度下收缩 */
        flex: 6 1 0;
        min-width: 0;
        /* 关键：允许收缩，避免强制换行导致布局破裂 */
    }

    .stats-container {
        /* 统计卡片：与文案区域同等权重，避免出现“数据挤压或溢出” */
        flex: 4 1 0;
        min-width: 0;
        margin-top: 40px;
        position: relative;
    }
}

.banner_text {
    position: absolute;
    top: calc((260/1918) * 100vw);
    left: calc((120/1918) * 100vw);
    color: white;
    z-index: 10;
}

.banner_text_top {
    font-size: calc((68/1918) * 100vw);
    font-weight: bold;
    margin-bottom: calc((20/1918) * 100vw);
    width: 60%;
    line-height: calc((90/1918) * 100vw);
}

.banner_text_bottom {
    background-color: transparent;
    color: white;
    border: 1px solid white;
    font-size: calc((24/1918) * 100vw);
    width: calc((156/1918) * 100vw);
    height: calc((47/1918) * 100vw);
    border-radius: calc((23.5/1918) * 100vw);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}


.field {
    margin-top: calc((72/1918) * 100vw);
    display: flex;
    flex-direction: row;
    gap: 40px;
}

/* ===== 模块 7：应用领域（轮播组件样式） =====
   说明：将应用领域轮播样式上移，紧跟应用字段落，便于按页面结构快速定位。
*/
.field-container {
    position: relative;
    width: 100%;
    /* max-width: 1200px; */
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}

.field-slider {
    position: relative;
    transition: transform 0.5s ease;
    display: flex;
    width: 100%;
}

.field-slide {
    display: none;
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    transition: opacity 0.5s ease;
}

.field-slide.active {
    display: flex;
    opacity: 1;
}
.field_img {
    width: 40%;
    height: auto;
    object-fit: cover;
}

.field-nav {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    gap: 10px;
}

.field-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.field-dot.active {
    background-color: var(--brand-primary);
}



/* 响应式调整（手机端 ≤ 1100 px） */
@media (max-width: 1100px) {
    .field-container {
        padding: 0;
        width: 100%;
    }

    .field-slide {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 0;
        box-sizing: border-box;
        width: 100%;
    }

    .field-slide > div {
        width: 100%;
        box-sizing: border-box;
        padding: 0 20px;
    }

    .field_img {
        width: 100%;
        max-width: 100%;
    }

    .choice_us {
        font-size: 16px;
        line-height: 24px;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .field_title1 {
        font-size: 26px;
        margin-bottom: 10px;
        word-wrap: break-word;
        width: 100%;
    }

    .field_title2 {
        font-size: 16px;
        margin-bottom: 15px;
        line-height: 24px;
        word-wrap: break-word;
        white-space: normal;
        height: auto;
        overflow: visible;
        text-overflow: clip;
        width: 100%;
    }

    .field-nav {
        margin-top: 20px;
        padding: 0 20px;
    }
}

/* Pad 端（1101–1280 px） */
@media (min-width: 1101px) and (max-width: 1280px) {
    .field-slide {
        gap: 30px;
    }

    .field_img {
        width: 45%;
    }
}

.content-title {
    cursor: pointer;
    transition: color 0.3s ease;
    color: #afb1b2;
}

.content-title.active {
    color: var(--brand-primary);
    /* 绿色 */
}

.tab-content {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.tab-content .news-item {
    flex: 1;
    min-width: 300px;
}



@media (max-width: 1100px) {

    /* 移动端点击显示 */
    .has-submenu.active .submenu {
        display: block;
        position: static;
        margin-top: 10px;
        margin-bottom: 10px;
        box-shadow: none;
        background-color: #f6f8fa;
        
    }

    .submenu-item {
        padding: 10px 40px;
        border-bottom: 1px solid #eee;
        text-align: center;
        
    }

    .submenu-item:last-child {
        border-bottom: none;
    }

    .rect_show {
        display: flex;
        flex-direction: column;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 60px;
        padding-top: 40px;
        width: 100%;
        align-items: center;
    }

    /* .content_with_num {
                display: flex;
                flex-direction: column;
            } */


    .news-app-section {
        display: flex;
        flex-direction: column;
        padding-left: 20px;
        padding-right: 20px;
        width: 100%;
        /* 避免 100vw 在移动端包含滚动条导致的宽度溢出 */
        /* box-sizing: border-box; */
    }

    /* 新闻区域手机端布局调整 */
    .news-app-header {
        padding-bottom: 30px;
    }

    /* 隐藏桌面端按钮 */
    .btn-right-desktop,
    .btn-bottom-desktop {
        display: none !important;
    }

    /* 显示移动端按钮 */
    .btn-right-mobile {
        display: flex !important;
        width: 140px !important;
        max-width: 140px !important;
        margin: 30px auto 0 auto !important;
        left: auto !important;
        right: auto !important;
        position: static !important;
        box-sizing: border-box !important;
    }

    .btn-bottom-mobile {
        display: flex !important;
        width: 140px !important;
        max-width: 140px !important;
        left: auto !important;
        right: auto !important;
        position: static !important;
        box-sizing: border-box !important;
    }

    /* 确保所有移动端按钮都居中 */
    #news .btn-right-mobile,
    #company-profile .btn-bottom-mobile {
        align-self: center;
    }

    /* 响应式样式 - 小屏幕上单列显示 */
    .tab-content {
        flex-direction: column !important;
        gap: 15px;
    }

    .tab-content .news-item {
        width: 100% !important;
        flex: none !important;
    }

    .stats-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 20px;
        margin-top: 30px;
        margin-bottom: 40px;
    }

    .stats-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        border-bottom: none;
        padding-right: 20px;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0px;
    }

    .stats-row:last-of-type {
        border-right: none;
        padding-right: 0;
    }

    .number_right {
        position: relative;
        font-size: 14px;
        line-height: 22px;
        width: 100%;
        padding: 0;
        box-sizing: border-box;
    }

    .cert-subtitle {
        /* margin-top: 30px; */
        font-size: 20px;
        padding: 0;
    }

    .gallery-text {
        font-size: 16px;
        line-height: 28px;
    }

    .number_left {
        color: var(--brand-primary);
        font-size: 36px;
        line-height: 48px;
        padding: 0;
        width: 100%;
        font-weight: bold;
    }

    .news-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        box-sizing: border-box;
        width: 100%;
    }

    .news-item {
        display: flex;
        flex-direction: column;
        width: 100%;
        background-color: #ebeef0;
        padding: 20px;
        margin-bottom: 10px;
    }



    .news-content {
        background-color: transparent;
        padding: 0;
        flex-direction: column;
        justify-content: space-between;
        /* align-items: center; */
        width: 100%;
        gap: 10px;
    }

    .news-title {
        flex: 1;
        margin-right: 15px;
        font-size: 16px;
        /* text-align: right; */
        /* order: -1; */
        height: 40px;
    }

    .news-date {
        white-space: nowrap;
        font-size: 14px;
    }

    .gallery-container {
        display: flex;
        flex-direction: column;
        /* max-width: 100%; */
        /* box-sizing: border-box; */
        gap: 25px;
    }

    .gallery-column {
        display: flex;
        flex-direction: row;
        /* flex: 414; */
        /* width: 100%; */
        flex: 1;
        gap: 10px;
        /* 修复单位：gap 需带单位 */
        /* box-sizing: border-box; */
        /* overflow: hidden; */
        /* justify-content: space-between; */
    }

    .img-item {
        flex: 1;
        /* width: 50%; */
        aspect-ratio: 418/262;
        /* 418:262 宽高比 */
        object-fit: cover;
        object-position: center;
    }

    .btn-solid {
        position: static;
        left: auto;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-content {
        display: flex;
        flex-direction: column;
        padding: 0;
        width: 100%;
        gap: 0px;
    }

    .footer-loop {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .bottom_content {
        margin: 0;
        padding: 0 20px;

        width: 100%;
        box-sizing: border-box;
    }

    .bottom_top {
        font-size: 18px;
        margin: 0;
        padding: 15px 0px;
        font-weight: bold;
        text-align: left;
        cursor: pointer;
        /* 小屏：将箭头放在最右侧，文本保持靠左 */
        display: block;
        /* 不使用 Flex，避免伪元素与文本紧贴在一起 */
        position: relative;
        /* 为伪元素定位提供参照 */
        padding-right: 40px;
        /* 为右侧箭头预留空间，避免覆盖文字 */
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* 将原来的文字箭头替换为图片箭头（assets/list.png） */
    .bottom_top::after {
        content: '';
        /* 使用图片作为箭头，路径相对于 css 文件 */
        background-image: url('/img/list.png');
        background-size: contain;
        /* 图片完整显示 */
        background-repeat: no-repeat;
        background-position: center;
        width: 20px;
        /* 设定伪元素尺寸，保证可点击与视觉一致 */
        height: 20px;
        /* 绝对定位到最右侧，并垂直居中 */
        position: absolute;
        right: 0px;
        top: 50%;
    /* 默认指向下（折叠状态）：图片本身已向下，保持 0° */
    transform: translateY(-50%) rotate(0deg);
        transition: transform 0.3s ease;
    }

    .bottom_content.active .bottom_top::after {
        /* 展开后旋转 180°，由向下变为向上 */
        transform: translateY(-50%) rotate(180deg);
    }

    .bottom_content .bottom_list {
        display: none;
        font-size: 16px;
        margin: 0;
        padding: 10px 20px 10px 0px;
        text-align: left;
        /*        background-color: rgba(0, 0, 0, 0.1);*/
    }

    .footer-contact {
        width: 100% !important;
        flex: 0 0 0;
    }

    .bottom_content.active .bottom_list {
        display: block;
    }

    /* 页脚版权信息调整 */
    .footer-divider:last-child+.bottom_list {
        padding: 20px;
        text-align: center;
        font-size: 14px;
    }

    /* 移动端：社交图标与联系信息样式优化 */
    .social-icon {
        /* 小屏下图标缩小到 28px */
        width: 28px;
        height: 28px;
    }

    .footer-v-divider {
        /* 小屏不显示垂直分隔线 */
        display: none;
    }

    .footer-contact {
        /* 小屏联系信息作为独立区块显示 */
        margin: 0;
        padding: 15px 20px;
        /*        border-bottom: 1px solid rgba(255, 255, 255, 0.2);*/
        max-width: none;
    }

    .contact-line {
        /* 小屏字体与行高微调，保证可读性 */
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 10px;
    }

    .contact-icon {
        margin-top: 0px !important;
    }

    .gallery-four {
        display: flex;
        flex-direction: row;
        gap: 5px;
        /* 修复单位：gap 需带单位 */
    }

    /* 顶部导航栏移动端适配 */
    .header-container {
        padding-left: 20px;
        padding-right: 20px;
        height: 60px;
        flex-wrap: wrap;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        box-sizing: border-box;
        background-color: #fff;
        z-index: 999;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    .header-container .header-logo {
        width: 120px!important;
    }

    body {
        padding-top: 60px;
        overflow-x: hidden;
    }

    .banner {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 18px;
        line-height: 24px;
    }
    .language-switcher {
        margin-right: 30px;
    }
    .language-icon {
        width: 30px;
        height: 30px;
    }

    .language-text {
        font-size: 18px;
    }

    /* 汉堡菜单按钮在小屏幕上显示 */
    .menu-toggle {
        display: flex;

    }

    /* 导航菜单在小屏幕上默认隐藏 */
    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #fff;
        position: absolute;
        top: 60px;
        left: 0;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* 导航菜单展开时显示 */
    .nav-menu.active {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }

    .nav-menu .banner {
        padding: 10px 0;
        border-bottom: 1px solid #eee;
        text-align: center;
    }

    .nav-menu .banner:last-child {
        border-bottom: none;
    }

    .why-choose-section {
        display: flex;
        flex-direction: column;
        background-color: #ffffff;
        align-items: center;
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        box-sizing: border-box;
    }

    .why_choice_us {
        color: var(--brand-primary);
        font-family: var(--font-heading);
        width: 100%;
        font-size: 30px;
        /* align-items: center; */
        /* justify-content: center; */
        text-align: center;
        line-height: 40px;
        /* 1.328 */
        margin-top: 30px;
        margin-bottom: 20px;
        padding: 0;
        box-sizing: border-box;
    }

    .application_title {
        margin-bottom: 40px !important;
    }

    .choice_us {
        color: var(--text-gray-700);
        font-family: var(--font-body);
        font-size: 16px;
        line-height: 28px;
        width: 100%;
        margin-bottom: 10px;
        margin-left: 0;
        padding-right: 20px;
        margin-bottom: 30px;
        padding-left: 20px;
        height: auto;
        box-sizing: border-box;
    }

    .application_field {
        padding: 0 !important;
        height: auto !important;
        margin-bottom: 20px !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* 应用领域中的按钮居中显示 */
    .field-slide .btn-solid {
        margin: 20px auto 0 auto !important;
        width: 140px !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
    }

    .banner_text {
        position: absolute;
        top: 60px;
        color: white;
        z-index: 10;
    }

    .banner_btn {
        left: 0;
        margin-left: 0;
    }

    .carousel-slides {
        position: relative;
    }

    .banner_text_top {
        font-weight: bold;
        margin-bottom: 20px;
        width: max(200px, 60%);
        /* text-align: center;
        position: relative;
        left: 50%;
        margin-left: -300px; */
        margin-top: calc((60/1918) * 100vw);
       
    }

    .banner_text_bottom {
        background-color: transparent;
        color: white;
        border: 1px solid white;
        font-size: 12px;
        /* 修复单位 */
        width: 80px;
        /* 修复单位 */
        height: 32px;
        /* 修复单位 */
        border-radius: 16px;
        /* 修复单位 */
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .subtitle {
        margin-top: 10px;
        font-size: 20px;
        text-align: center;
        line-height: 32px;
    }

    .section-title {
        color: var(--brand-primary);
        font-size: 64px;
        line-height: 54px;
        margin-top: 0px;
    }

    .content-text {
        font-size: 16px;
        line-height: 32px;
        padding: 0;
    }


    /* 解决rect_show和content_with_num同时存在时的样式冲突 */
    .rect_show.content_with_num {
        flex-direction: column;
        align-items: stretch;
        /* 确保子元素高度一致 */
        padding-bottom: 30px;
    }

    .field {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .field_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .footer-header {
        display: flex;
        flex-direction: row;
        /* margin-left: calc((129/1918) * 100vw); */
        /* height: calc((75/1918) * 100vw); */
        margin-left: 20px;
        margin-right: 20px;
        /* 移动端右侧间距 */
        height: 50px;
        align-items: center;
        justify-content: space-between;
        /* 移动端保持左右分布 */
    }

}


/* ================= 页脚修复覆盖样式（优先生效）================= */
/* 分割线颜色与留白（1px，白色 30% 透明度） */
.footer-divider {
    height: 1px !important;
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.footer-v-divider {
    background-color: rgba(255, 255, 255, 0.3) !important;
    /* 统一 30% 透明度 */
    margin: 18px 0px !important;
    align-self: stretch !important;
}

/* 列表左对齐与交互动效 */
.bottom_content {
    align-items: flex-start !important;
}

.bottom_top {
    text-align: left !important;
    height: 44px;
}

.bottom_list {
    text-align: left !important;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.bottom_list:hover {
    transform: translateX(4px);
    color: #e9fff5;
}

.bottom_list:active {
    transform: translateX(2px) scale(0.98);
    opacity: 0.9;
}

/* 社交图标动效与位置：与 Logo 同侧显示 */
.footer-header {
    justify-content: flex-start !important;
    gap: 12px;
    border-bottom: 1px solid #4aa076;
    padding: 10px 0;
}

.social-icons {
    margin-left: 12px;
}

/* 社交图标动效 */
.social-icon:hover {
    transform: translateY(-1px) scale(1.03);
    filter: brightness(1.1);
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* 联系信息图标尺寸统一 */
.contact-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* 版权信息左对齐，与分割线边距一致 */
.footer-copyright {
    text-align: left;
    margin-left: calc((93/1918) * 100vw);
    margin-top: calc((30/1918) * 100vw);
}

/* 页脚桌面端栅格优化：降低左右内边距与列最小宽度，确保联系方式不被截断 */
@media (min-width: 1101px) {
    .footer-content {
        /* 左右内边距降低：释放更多内容宽度 */
        padding-left: calc((93/1918) * 100vw);
        padding-right: calc((93/1918) * 100vw);
        /* 将水平列间距降至 0，CONTACT 与分隔线完全贴近（由分隔线自身 margin 控制最小视觉空隙） */
        column-gap: 0px;
        /* 桌面端：移除水平间距 */
        /* 列间距为 0，避免多余空白 */
        align-items: flex-start;
    }

    /* 保留分组容器以参与 Flex 伸缩，避免列总宽度过大 */
    .footer-loop {
        display: flex;
        /* 恢复为 Flex 容器 */
        flex-direction: row;
        flex: 7 1 0;
        /* 左侧分栏整体参与收缩 */
        min-width: 0;
        /* 允许整体在窄屏下收缩 */
    }

    /* 每个栏目最小宽度降低，必要时标题可换行以避免挤压联系方式 */
    .bottom_content {
        flex: 1 1 120px;
        /* 降低最小宽度到 120 px */
        min-width: 120px;
        padding: 0 12px;
        /* 内边距小幅降低以释放宽度 */
        margin-right: calc((40/1918) * 100vw);
        width: 14%;
    }

    .footer-loop .bottom_content:last-child {
        margin-right: 20px;
    }

    .footer-loop .mar_r {
        margin-right: 20px!important;
        flex: 0 0 auto !important
    }
}

@media (min-width:2000px){
    .bottom_content {
        flex: 1 1 120px;
        /* 降低最小宽度到 120 px */
        min-width: 120px;
        padding: 0 12px;
        /* 内边距小幅降低以释放宽度 */
        margin-right: calc((40/1918) * 100vw);
        width: 16%;
    }
}

/* 页脚间距微调：让 CONTACT 列更靠近垂直分隔线（桌面端） */
@media (min-width: 1101px) {

    /* 调整垂直分隔线的左侧外边距，使其更靠近 CONTACT 一列 */
    .footer-v-divider {
        /* margin-left: 20px !important; */
        /* 与 CONTACT 贴近 */
        margin-right: 20px !important;
        /* 保持右侧与联系信息区的间距 */
    }

    /* 去掉 CONTACT（左侧最后一列）的右内边距，进一步缩短与分隔线的距离 */
    .footer-loop .bottom_content:last-child {
        padding-right: 10 !important;
        /* 去除右内边距，避免额外空隙 */
        padding-left: 0 !important;
        /* 去除左内边距，防止列本身占宽 */
        flex: 0 0 auto !important;
        /* 最后一列按内容宽度收缩，不再均分宽度 */
        min-width: auto !important;
        /* 解除 120 px 最小宽限制，避免留白 */
    }
}

/* 中宽桌面端：右侧联系方式固定为 320 px，避免被截断且释放左侧列空间 */
@media (min-width: 1101px) and (max-width: 1280px) {
    .footer-contact {
        min-width: 320px;
        flex: 0 0 320px;
        width: 320px;
        flex: 3 1 0;
    }
}

/* 移动端版权左对齐修复 */
@media (max-width: 1100px) {
    .footer-divider:last-child+.bottom_list {
        text-align: left !important;
    }
}

@media (min-width: 375px) and (max-width: 750px) {

    /* .subtitle {
        font-size: 18px;
        line-height: 26px;
    }

    .stats-container {
        gap: 10px;
    }

    .cert-subtitle {
        line-height: 18px;
    }

    .why_choice_us {
        margin-bottom: 20px;
    }

    .footer-contact {
        box-sizing: border-box;
        padding-right: 20px;
    }

    .bottom_top,
    .footer-copyright,
    .contact-line {
        font-size: 14px;
    }

    .bottom_list {
        font-size: 12px;
    }

    .news-title {
        font-size: 14px;
        line-height: 18px;
        text-align: center;
    }


    .gallery-overlay {
        padding: 20px;
        font-size: 14px;
    }

    .cert-subtitle {
        font-size: 14px;
    } */

    /* 移动端：统一图片箭头尺寸，避免受字体大小影响 */
    .bottom_top::after {
        width: 18px;
        /* 移动端稍微缩小 */
        height: 18px;
        background-size: contain;
    }
    .bottom_top {
        text-align: left !important;
        height: auto!important;
    }
}

/* ========================= 分页样式 ========================= */
.pagination {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.pagination li {
    display: inline-block;
}

.pagination li a,
.pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-gray-700);
    text-decoration: none;
    background-color: var(--white);
    border: 1px solid var(--brand-gray-light);
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pagination li a:hover {
    background-color: var(--brand-primary);
    color: var(--white);
    border-color: var(--brand-primary);
}

.pagination li.active span {
    background-color: var(--brand-primary);
    color: var(--white);
    border-color: var(--brand-primary);
    cursor: default;
}

.pagination li.disabled span {
    color: var(--text-gray-500);
    background-color: #f5f5f5;
    border-color: var(--brand-gray-light);
    cursor: not-allowed;
}

/* 移动端分页样式 */
@media (max-width: 768px) {
    .pagination {
        gap: 5px;
    }
    
    .pagination li a,
    .pagination li span {
        min-width: 32px;
        height: 32px;
        padding: 0 10px;
        font-size: 13px;
    }
}

/* ========================= Tabs 通用样式 ========================= */
/* 去掉所有 tabs 区域内 a 标签的下划线 */
.product-tabs a,
.news-tabs a,
.contact-tabs a,
.content-title a {
    text-decoration: none;
}

.product-tabs a:hover,
.news-tabs a:hover,
.contact-tabs a:hover,
.content-title a:hover {
    text-decoration: none;
}

/* ========================= 按钮响应式控制 ========================= */
/* PC端：隐藏移动端按钮 */
.btn-right-mobile,
.btn-bottom-mobile {
    display: none;
}

/* PC端：显示桌面端按钮 */
.btn-right-desktop,
.btn-bottom-desktop {
    display: flex;
}

/* ========================= 右侧漂浮栏样式 ========================= */
#floating-sidebar {
    position: fixed;
    right: 0;
    z-index: 9999;
}

.floating-item {
    display: block;
    width: 50px;
    height: 50px;
    margin-bottom: 2px;
    cursor: pointer;
    position: relative;
    text-decoration: none;
}

/* 二维码按钮 */
#floating-qrcode {
    top: 420px;
    position: fixed;
    right: 10px;
}

#floating-qrcode .qrcode-trigger {
    display: block;
    width: 50px;
    height: 50px;
    background: url(/images/sbtn.png) 0 -0px no-repeat;
    text-indent: -9999px;
    overflow: hidden;
}

#floating-qrcode .qrcode-trigger:hover {
    background: url(/images/sbtn.png) -50px -0px no-repeat;
}

/* 二维码弹出框 */
#floating-qrcode .qrcode-popup {
    position: absolute;
    display: none;
    left: -280px;
    top: -200px;
    width: 275px;
    height: 281px;
    background: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10000;
}

#floating-qrcode .qrcode-popup img {
    width: 100%;
    height: auto;
    display: block;
}

/* 返回顶部按钮 */
#floating-top {
    top: 472px;
    background: url(/images/sbtn.png) 0 -101px no-repeat;
    width: 50px;
    height: 50px;
    text-indent: -9999px;
    overflow: hidden;
    position: fixed;
    right: 10px;
}

#floating-top:hover {
    background: url(/images/sbtn.png) -50px -101px no-repeat;
}

/* 屏幕阅读器隐藏文本 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* 移动端响应式 */
@media (max-width: 768px) {
    #floating-sidebar {
        right: 5px;
    }
    
    .floating-item {
        width: 45px;
        height: 45px;
        margin-bottom: 8px;
    }
    
    #floating-qrcode .qrcode-trigger {
        width: 45px;
        height: 45px;
        background-size: 90px auto;
    }
    
    #floating-qrcode .qrcode-trigger:hover {
        background-size: 90px auto;
    }
    
    #floating-top {
        width: 45px;
        height: 45px;
        background-size: 90px auto;
    }
    
    #floating-top:hover {
        background-size: 90px auto;
    }
    
    #floating-qrcode .qrcode-popup {
        left: -250px;
        width: 240px;
        height: 300px;
        top: -150px;
    }
}