/* =============================================================
   mobile.css — 移动端样式优化
   加载顺序：main.css（复刻原站，保持不动）→ theme-extra.css → 本文件
   只覆盖 ≤990px 的表现，桌面样式完全不受影响。

   目录
     1. 全局细节
     2. 顶部导航 / 侧滑菜单
     3. 首页首屏轮播
     4. 首页产品中心
     5. 首页应用领域
     6. 首页关于我们 / 我们的优势
     7. 首页底部 CTA
     8. 应用领域页：应用产品 3 列
     9. 产品详情页：图集箭头
    10. 内页横幅标题
   （搜索页的移动端样式在 search.css 里，随该页单独加载）
   ============================================================= */

@media (max-width: 990px) {

  /* ---------------- 1. 全局细节 ---------------- */

  /* 长段落行高放宽一档（原 24px 对 14px 字号偏挤，中文更吃行距） */
  .index-about .text,
  .index-appli .left .text,
  .index-lx .left .text,
  .index-appli .right ul li > a .name {
    line-height: 1.85;
  }

  /* 兜底：图片不撑破屏幕，防止出现横向滚动条 */
  .index-banner img,
  .index-pro img,
  .index-appli img,
  .index-about img,
  .index-lx img {
    max-width: 100%;
  }

  /* 去掉移动端点击时的灰色高亮块 */
  a,
  .mm-nav .bot > li > div {
    -webkit-tap-highlight-color: transparent;
  }

  /* ---------------- 2. 顶部导航 / 侧滑菜单 ---------------- */

  /* 固定导航高度 60px，与 body 的 padding-top 对齐，这里只收紧左右留白 */
  .mobile-nav {
    padding: 0 15px;
  }

  /* 侧滑菜单：一级菜单行距与点击区域加大，方便手指点按 */
  .mm-nav .bot > li {
    font-size: 17px;
  }
  .mm-nav .bot > li .list .left a {
    line-height: 46px;
  }

  /* ---------------- 3. 首屏轮播 ---------------- */

  /* 轮播原图 2176×1024，标题 / 副标题 / 标签 / "了解产品"按钮全部集中在左侧，
     原样式 object-fit:cover 居中裁切会把整段文案切掉 —— 改为左对齐，文案完整可见 */
  .index-banner .mySwipera .swiper-slide a > img {
    object-position: left center;
    /* 移动端关掉 20s 缓慢放大动画：既避免文案被二次裁切，也省电省性能 */
    -webkit-animation: none;
    animation: none;
  }

  /* 分页条压在图内，加一层极淡的底部渐显，保证在浅色画面上也看得清 */
  .index-banner .mySwipera .bant {
    bottom: 0;
    padding: 26px 0 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0));
  }
  .index-banner .mySwipera .bant .container {
    padding: 0 15px;
  }
  .index-banner .mySwipera .bant .swiper-button-prev1,
  .index-banner .mySwipera .bant .swiper-button-next1 {
    line-height: 1;
  }
  .index-banner .mySwipera .bant .swiper-pagination1a span {
    margin: 0 4px;
  }

  /* ---------------- 4. 产品中心 ---------------- */

  /* 卡片内文案距卡片底边过远（原 3rem≈42px），收紧让图文更紧凑 */
  .index-pro .swiper-container .swiper-slide .img .cont {
    bottom: 1.5rem;
  }
  .index-pro .swiper-container .swiper-slide .img .cont dt {
    font-size: 1.45rem;
  }
  .index-pro .swiper-container .swiper-slide .img .cont dd {
    font-size: .95rem;
    line-height: 1.6;
  }
  .index-pro .swiper-container .swiper-slide .img .cont a.more {
    margin-top: 1rem;
  }
  /* 分页圆点稍放大，提高可见度与点按命中率 */
  .index-pro .swiper-pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0 5px;
  }

  /* ---------------- 5. 应用领域 ---------------- */

  /* 6 个领域图标是各自的 SVG，固有宽高比不同，直接 height:2.5rem 会显得大小不一。
     这里统一限制在 35×35 的方框内并居中，视觉尺寸一致 */
  .index-appli .right .icon {
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .index-appli .right .icon img {
    width: auto;
    height: auto;
    max-width: 2.5rem;
    max-height: 2.5rem;
    object-fit: contain;
  }
  .index-appli .right ul li {
    padding: 12px 8px;
  }

  /* ---------------- 6. 关于我们 / 我们的优势 ---------------- */

  .index-about .text {
    font-size: .9375rem;
    /* 正文在后台是按自然段换行保存的，前台默认把换行折叠成空格 →
       移动端保留换行，段落清晰、便于阅读 */
    white-space: pre-line;
    /* 长段落居中在窄屏上很难读，改左对齐（标题保持居中不变） */
    text-align: left;
  }

  /* 移动端去掉磨砂效果：低端安卓滚动时 backdrop-filter 会明显掉帧，
     改用更实的底色保证文字对比度 */
  .index-about .adv ul {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, .88);
  }

  /* 优势图标同样按方框统一尺寸，避免三个图标一大两小 */
  .index-about .adv ul li .icon {
    height: 2.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .index-about .adv ul li .icon img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 2.875rem;
  }
  .index-about .adv ul li .con {
    padding-left: .875rem;
  }
  .index-about .adv ul li {
    padding: 22px 16px;
  }

  /* ---------------- 7. 底部 CTA ---------------- */

  /* 背景图按正中裁切，窄屏下不会只露出左上角 */
  .index-lx {
    background-position: center center;
  }
  .index-lx .left .title {
    font-size: 1.5rem;
  }

  /* ---------------- 8. 应用领域页：应用产品 3 列 ---------------- */

  /* 原断点没管这里的字号，18px 下「无缝拉链热熔胶膜」会换行，把三列拉得高低不一。
     收货一档字号 + 统一两行高度，三列始终对齐 */
  .appliaction-list .swiper-slide a > div:not(.over) {
    font-size: .9375rem;
    line-height: 1.4;
    margin-top: .5rem;
    min-height: 2.8em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* 原断点把图片高度写成 9rem(126px)，比容器 7rem(98px) 还高，会溢出圆角边框 */
  .appliaction-list .swiper-slide .over img {
    height: 100%;
  }

  /* ---------------- 9. 产品详情页：图集箭头 ---------------- */

  /* Swiper 默认箭头是白色图标，直接压在浅色产品图上几乎看不见，补一层半透明圆底 */
  .pro1 .swiper-button-prev,
  .pro1 .swiper-button-next {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .35);
    background-size: 1rem 1rem;
    background-position: center center;
  }
  .pro1 .swiper-button-prev { left: .75rem; }
  .pro1 .swiper-button-next { right: .75rem; }

  /* ---------------- 10. 内页横幅标题 ---------------- */

  /* 各内页横幅图明暗不一，白色标题压在浅色画面上（如「联系我们」的电脑图）会发糊，
     加一层投影提升对比度；窄屏横幅只有 200px 高，视觉上更需要可读性 */
  .nybanner .hover .t1,
  .nybanner .hover .t2 {
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  }
}

/* ---------------- 小屏（≤480px）微调 ---------------- */
@media (max-width: 480px) {

  /* 3 列网格在 360~430px 下每列约 120px，字号收一档避免换行挤压 */
  .index-appli .right .name {
    font-size: 15px;
  }

  .index-pro .swiper-container .swiper-slide .img .cont dt {
    font-size: 1.3rem;
  }
}