/* =====================================================
   大屏等比缩放：以 1400px 版心为设计基准，
   视口越窄根字号逐级下调，实现整页等比例缩小
   （常见笔记本 1366 / 1280 分别落在 15px / 14px 档）
   ===================================================== */
@media only screen and (max-width: 1650px) {
  html {
    font-size: 13.5px;
  }

  .indexModule .atf-service-item {
    padding: 3.1rem 2.5rem;
  }

  .indexModule .faq-layout {
    display: grid;
    grid-template-columns: 1fr 0.7fr;
    gap: 2.5rem;
    align-items: start;
  }
}

@media only screen and (max-width: 1400px) {
  html {
    font-size: 13px;
  }
}

@media only screen and (max-width: 1280px) {
  html {
    font-size: 13px;
  }
}

@media only screen and (max-width: 1080px) {
  html {
    font-size: 13px;
  }
}

@media only screen and (max-width: 768px) {
  html {
    font-size: 15px;
  }

  .pageAbout .about-media {
    flex-direction: column;
    height: auto;
    gap: 1rem;
    margin-bottom: 3.5rem;
  }

  .pageAbout .about-media-main,
  .pageAbout .about-media-sub {
    flex: none;
    width: 100%;
    height: 15rem;
  }

  .pageAbout .about-media .about_round_image {
    right: 0.5rem;
    bottom: -2.5rem;
    transform: none;
  }

  .pageAbout .about-text-meta {
    justify-content: center;
  }

  .listProduct .atf-sidebar-category {
    padding: 1.25rem 0.9375rem 0.625rem !important;
  }

  .listProduct .atf-sidebar-title {
    margin-bottom: 0.75rem !important;
  }

  .listProduct .atf-sidebar-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.625rem;
    margin: 0;
    padding-bottom: 0.625rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .listProduct .atf-sidebar-list::-webkit-scrollbar {
    display: none;
  }

  .listProduct .atf-sidebar-item {
    flex-shrink: 0;
    margin-bottom: 0;
    white-space: nowrap;
  }

  .listProduct .atf-sidebar-item a {
    padding: 0.5625rem 1.375rem;
    white-space: nowrap;
    transform: none;
  }

  .listProduct .atf-sidebar-item a:hover,
  .listProduct .atf-sidebar-item.active a {
    transform: none;
  }

  .listProduct .atf-sidebar-item.active a::after {
    display: none;
  }


  /* 地图 */
  .map-wrap {
    padding: 0 0.75rem;
    margin-bottom: 3.75rem;
  }

  .map-head {
    padding: 0.9375rem 1rem;
  }

  .map-head-icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.125rem;
    border-radius: 0.75rem;
  }

  .map-head-text h3 {
    font-size: 1.0625rem;
  }

  .map-head-text p {
    font-size: 0.8125rem;
    white-space: normal;
  }

  .map-head-btn {
    padding: 0.4375rem 0.75rem;
    font-size: 0.75rem;
  }

  .map-card iframe {
    height: 420px;
  }

  /* =====================================================
     首页「关于我们」区域移动端适配（HTML 不变）
     ===================================================== */
  /* 左列图库：清掉顶部大留白、宽度随屏自适应 */
  .indexModule .about-image-gallery {
    padding-top: 0;
    margin-bottom: 3.75rem;
  }

  /* 主图：整行自适应，按原 7:8 比例裁切，避免横向溢出 */
  .indexModule .about-image-gallery .worker-image {
    width: 100%;
    height: auto;
    aspect-ratio: 7 / 8;
    border-width: 0.375rem;
  }

  /* 次图：缩为主图右侧下探的小卡，形成错落排版 */
  .indexModule .about-image-gallery .secondary-image {
    top: auto;
    right: 0;
    bottom: -3rem;
    width: 62%;
    height: auto;
    aspect-ratio: 7 / 8;
    border-width: 0.375rem;
    z-index: 3;
  }

  /* 经验计数卡：改为图上方的独立胶囊横条，不再绝对定位叠加 */
  .indexModule .experience-counter {
    position: relative;
    top: auto;
    left: auto;
    width: fit-content;
    height: auto;
    margin: 0 auto 1.75rem;
    padding: 0.5rem 1.25rem 0.5rem 0.5rem;
    border-radius: 999px;
    justify-content: flex-start;
    box-shadow: 0 0.375rem 1.25rem rgba(15, 23, 42, 0.1);
  }

  .indexModule .experience-counter .icon-circle {
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 3.5rem;
  }

  .indexModule .experience-counter h4,
  .indexModule .experience-counter_ceontent .counter-number {
    font-size: 1.75rem;
  }

  /* 旋转徽章：骑在主图左下、小幅缩小 */
  .indexModule .atf-about-area .about_round_image {
    left: 0;
    right: auto;
    bottom: -1.25rem;
    transform: scale(0.85);
    transform-origin: bottom left;
  }

  .indexModule .about_round_text_area {
    width: 7rem;
  }

  .indexModule .about_round_text_area .about_round_text text {
    font-size: 1rem;
  }

  /* 右侧文案：标题居中、简介左对齐，切换标签收紧居中 */
  .indexModule .atf-about-area .atf-section-title {
    text-align: center;
  }

  .indexModule .atf-about-area .atf-section-title .describtion {
    text-align: left;
  }

  .indexModule .atf-about-nav-list .nav-tabs {
    justify-content: center;
    gap: 0.5rem;
  }

  .indexModule .atf-about-nav-list .nav-tabs .nav-link {
    margin-right: 0;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
  }

  .indexModule .feature-list li {
    font-size: 0.9375rem;
  }

  .atf-footer-widget-logo img {
    width: 60%;
  }

  .atf-footer-widget-logo {
    text-align: center;
  }

  /* ============ 页脚（手机端适配） ============ */
  .atf-footer-area {
    padding-top: 4.375rem;
    padding-bottom: 2.5rem;
  }

  /* 各栏目间距：两列排布时也自然形成行距 */
  .atf-footer-area .row>[class*="col-"] {
    margin-bottom: 2.5rem;
  }

  .atf-footer-area .row>[class*="col-"]:last-child {
    margin-bottom: 0;
  }

  /* 栏目内容水平居中 */
  .atf-footer-area .atf-footer-widget {
    text-align: center;
  }

  /* 第一栏 logo 已居中，介绍文字限宽居中 */
  .atf-footer-area .atf-footer-widget.footer-col-4-1 p {
    margin-left: auto;
    margin-right: auto;
    max-width: 22rem;
  }

  .atf-footer-area .atf-footer-widget-logo.mb-40 {
    margin-bottom: 1.25rem;
  }

  /* 菜单列：去掉默认缩进，链接居中、整行可点 */
  .atf-footer-area .atf-footer-widget-menu ul {
    padding: 0;
  }

  .atf-footer-area .atf-footer-widget-menu ul li {
    text-align: center;
  }

  .atf-footer-area .atf-footer-widget-menu ul li a {
    display: inline-block;
  }

  /* 联系方式：图标与文本整组居中，文字保持左对齐可读 */
  .atf-footer-area .atf-footer-widget-info {
    justify-content: center;
    text-align: left;
  }

  /* 栏目标题底部间距收紧（原 3.125rem） */
  .atf-footer-area .atf-footer-widget-title {
    margin-bottom: 1.875rem;
  }

  .atf-cta-area {
    display: none;
  }

  .atf-hamburger-logo img {
    width: 60%;
  }
}

/* 页脚小屏：产品中心/网站导航 并排两列，其余通栏 */
@media only screen and (max-width: 575px) {

  .atf-footer-area .row>[class*="col-"]:nth-child(2),
  .atf-footer-area .row>[class*="col-"]:nth-child(3) {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* 首页数据统计：小屏（xs）也保持一行显示两个 */
@media only screen and (max-width: 575px) {
  .atf-funfact-wrapp .row>[class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* 两行之间留出间距，避免 2x2 排列时上下贴紧 */
  .atf-funfact-wrapp .row>[class*="col-"]:nth-child(n + 3) {
    margin-top: 1.5rem;
  }

  .indexModule .atf-gallery-area-plr {
    padding-left: 0;
    padding-right: 0;
  }
}

/* =====================================================
   首页「数据统计」（.atf-funfact-wrapp）移动端优化
   问题：.atf-funfact-title 是 3.75rem，手机端根字号 15px 时为 56px，
        2×2 排列下每列只有半屏宽，“1200套+” 会折行、又大又挤。
   处理：按屏宽分级缩小字号，收紧间距，并修正 2×2 时的分隔线。
   ===================================================== */
@media only screen and (max-width: 768px) {

  /* 整块上下留白：80px → 40px（.pt-80 / .pb-80） */
  .atf-funfact-wrapp {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  /* 数字：56px → 34px；去掉字距，保证一行放下 */
  .atf-funfact-title {
    font-size: 2.25rem;
    line-height: 1.15;
    letter-spacing: 0;
  }

  /* 说明文字：15px → 14px，行高 1.9 → 1.5 */
  .atf-funfact-item p {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  /* 让列成为 flex 容器，卡片随之撑满列高，
     这样竖分隔线才能贯穿整行、与下面的横分隔线严丝合缝地接上 */
  .atf-funfact-wrapp .row>[class*="col-"] {
    display: flex;
  }

  /* 去掉 responsive.css（≤767px）给每块加的 12px 上下外边距；
     卡片横向撑满列宽，纵向由列高决定 */
  .atf-funfact-wrapp .atf-funfact-item {
    flex: 1 1 auto;
    width: 100%;
    margin: 0;
  }

  /* 2×2 排列：竖分隔线只保留中间的，去掉第 2、4 块的右侧线 */
  .atf-funfact-wrapp .row>[class*="col-"]:nth-child(2n) .atf-funfact-item {
    border-right: 0;
  }

  /* 第二行：取消原来的外边距留白，改用一条横分隔线 + 内边距 */
  .atf-funfact-wrapp .row>[class*="col-"]:nth-child(n + 3) {
    margin-top: 0;
  }

  .atf-funfact-wrapp .row>[class*="col-"]:nth-child(n + 3) .atf-funfact-item {
    border-top: 0.0625rem solid var(--atf-border-1);
    padding-top: 1.5rem;
    margin-top: 0;
  }
}

/* 小屏（≤575px）列更窄，字号再降一档 */
@media only screen and (max-width: 575px) {

  .atf-funfact-title {
    font-size: 1.875rem;
  }

  .atf-funfact-item p {
    font-size: 0.875rem;
  }
}

/* =====================================================
   首页「常见问题」移动端适配
   说明：本文件上方（≤1650px）的 .indexModule .faq-layout 会把布局设为
   1fr 0.7fr 两列，权重(0,2,0)高于 style.css 中 ≤991px 的
   .faq-layout(0,1,0)，导致手机端仍是两列错乱。
   这里用同权重且更靠后的规则覆盖为单列，恢复“图片在上、问题在下”。
   ===================================================== */
@media only screen and (max-width: 991px) {
  .indexModule .faq-layout {
    grid-template-columns: 1fr;
    gap: 1.875rem;
  }
}

@media only screen and (max-width: 768px) {
   

  /* 卡片之间间距收紧 */
  .indexModule .faq-grid {
    gap: 1rem;
  }

  /* 问题头部：内边距与图标缩小，避免标题换行挤压 */
  .indexModule .faq-q-head {
    gap: 0.625rem;
    padding: 1rem 1rem;
  }

  .indexModule .faq-q-icon {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
  }

  .indexModule .faq-q-title {
    font-size: 1rem;
  }

  /* 答案区左右内边距与头部保持一致 */
  .indexModule .faq-answer {
    padding: 0 1rem 1rem;
  }

  /* 底部「查看更多」按钮上间距收紧 */
  .indexModule #faq .atf-team-btn {
    margin-top: 2.5rem;
  }
}

/* 页脚产品中心：两列展示，避免单列过长 */
.atf-footer-widget-menu ul.footer-product-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.25rem;
  padding-left: 0;
  padding-right: 0;
}

.atf-footer-widget-menu ul.footer-product-list li {
  min-width: 0;
  margin-bottom: 0.625rem;
}

/* =====================================================
   首页首屏轮播（#home.atf-slick-slider-1）：手机端改用竖版手机海报
   1) 背景图：script.js 是读取 data-background 后写成「行内」background-image 的，
      行内样式权重最高，所以这里必须 !important 才能覆盖；
      轮播是 slick 的 fade + infinite，会克隆 slide，克隆节点同样带
      data-background 属性，所以用属性选择器可以一并命中。
   2) 高度：两张手机海报为 626×1080 与 590×1080（约 1.75:1 竖版），
      手机端按屏宽等比铺满，替换原来的 51rem 固定高度。
   ===================================================== */
@media only screen and (max-width: 768px) {

  .atf-slick-slider-1,
  .atf-slick-slider-1 .atf-single-slider {
    height: 176vw;
  }

  .atf-slick-slider-1 .atf-single-slider {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* 第一屏：swiper2.jpg → wap_swiper2.jpg（床品） */
  .atf-slick-slider-1 .atf-single-slider[data-background$="swiper2.jpg"] {
    background-image: url("/static/images/wap_swiper2.jpg") !important;
  }

  /* 第二屏：swiper.jpg → wap_swiper.jpg（门店） */
  .atf-slick-slider-1 .atf-single-slider[data-background$="swiper.jpg"] {
    background-image: url("/static/images/wap_swiper.jpg") !important;
  }
}

/* =====================================================
   首页「荣誉资质」横向滚动：手机端放慢
   速度来源：script.js 按固定 40px/s 计算时长（--partner-duration），
   屏幕越窄，同样的位移看起来越快，所以手机端把时长整体乘 1.8
   （约 40px/s → 22px/s）。想更慢就加大这个系数。
   ===================================================== */
@media only screen and (max-width: 768px) {

  #partnerMarquee .partner-marquee-track {
    animation-duration: calc(var(--partner-duration, 20s) * 1.8);
  }
}