@charset "utf-8";
/* ==========================================================================
   qxoutdoor.com 移动端适配补丁  mobile.css
   适用：仅在 <=950px 生效，不改变桌面端渲染
   目的：修正顶部工具栏图标缺失/过矮、banner 比例失真、产品卡片图片高度不齐
   日期：2026-11-02
   ========================================================================== */

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

  /* ---------- 0. 页面基础：取消绝对定位与固定最小宽度 ---------- */
  html, body {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden;
  }
  body {
    padding-top: 44px;                 /* 给固定工具栏让位，避免遮挡顶部橙条 */
    -webkit-text-size-adjust: 100%;
  }
  img { max-width: 100%; height: auto; }

  /* ---------- 1. 顶部固定工具栏：44px 触控高度 + 纯 CSS 图标 ---------- */
  .mobile-head-items {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    background: #0c1c31;
    box-sizing: border-box;
    z-index: 100000;
  }
  .mobile-head-item {
    float: none;
    width: 44px;
    height: 44px;
  }
  .mobile-head-item .title {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 0;                       /* 隐藏字体图标字符，改由背景图绘制 */
    text-align: center;
    color: #fff;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
  }
  /* 清除原字体图标与 WebKit 缺字方框 */
  .mobile-head-item .title:before,
  .mobile-head-item .title:after {
    content: none !important;
    display: none !important;
  }
  /* 汉堡图标：三条 22x2 白线 */
  .mobile-head-item.mobile-head-nav .title {
    background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
    background-size: 22px 2px, 22px 2px, 22px 2px;
    background-position: center 14px, center 21px, center 28px;
  }
  /* 搜索图标 */
  .mobile-head-item.mobile-head-search .title {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
    background-size: 52% auto;
  }
  /* 抽屉面板：与关闭态位移匹配，宽度保持 70%，避免遮住汉堡按钮 */
  .mobile-head-item .side-content-wrap,
  .mobile-head-item .content-wrap {
    top: 0;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-ico-close {
    right: 8px;
    top: 8px;
  }
  .mobile-head-item .side-content-wrap .content-wrap {
    padding: 44px 0 20px;
  }
  /* 抽屉里的导航：加大点击区，去掉桌面下拉定位 */
  .mobile-head-item .head_nav > li {
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
  }
  /* 隐藏原字体箭头（移动端缺字体会显示成方块） */
  .mobile-head-item .head_nav b,
  .mobile-head-item .head_nav > li > em {
    display: none !important;
  }
  .mobile-head-item .head_nav > li > a,
  .mobile-head-item .head_nav > li > em {
    display: block;
    padding: 12px 18px;
    line-height: 1.4;
  }
  .mobile-head-item .head_nav > li > ul {
    position: static !important;
    display: block;
    width: auto !important;
    box-shadow: none;
    background: #f7f7f7;
  }
  .mobile-head-item .head_nav > li > ul > li > a {
    display: block;
    padding: 9px 28px;
    font-size: 13px;
  }
  .mobile-head-item .head_nav > li > ul > li > ul > li > a {
    display: block;
    padding: 7px 28px 7px 42px;
    font-size: 12px;
    color: #666;
  }

  /* ---------- 2. 顶部信息条与 Logo ---------- */
  .head_top .layout { padding: 0 10px; }
  .head_left {
    float: none;
    max-width: 100%;
    line-height: 31px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .head_layer .layout {
    padding: 8px 10px;
    text-align: center;
  }
  .head_layer .logo {
    float: none;
    display: inline-block;
  }
  .head_layer .logo img {
    max-height: 56px;
    width: auto;
  }

  /* ---------- 3. Banner：保持 1920x700 原始比例，不再被裁成 160px ---------- */
  .slider_banner {
    width: 100%;
    height: auto !important;
    aspect-ratio: 1920 / 700;
    overflow: hidden;
  }
  .slider_banner .swiper-wrapper,
  .slider_banner .swiper-slide {
    width: 100%;
    height: 100%;
  }
  .slider_banner .swiper-slide img {
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    object-fit: cover;
    transform: none !important;
  }
  .slider_banner .swiper-slide img + img { display: none; }
  .slider_banner .slider_swiper_control { bottom: 8px; }
  .slider_banner .swiper-pagination .swiper-pagination-bullet { padding: 4px 0; margin: 0 5px; }
  .slider_banner .swiper-pagination .swiper-pagination-bullet:before { width: 18px; height: 4px; }

  /* ---------- 4. 首页产品卡片：统一 1:1 图窗，避免高矮不齐留白 ---------- */
  .index_product .product_item .item_img,
  .items_list .product_item .item_img,
  .product_item .item_img {
    aspect-ratio: 1 / 1;
    height: auto;
    background: #f5f5f5;
  }
  .index_product .product_item .item_img img,
  .items_list .product_item .item_img img,
  .product_item .item_img img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: cover;
    transform: none;
  }
  .product_item figure { margin: 0 5px 20px; }
  .product_item figcaption { padding: 6px 2px 0; }
  .product_item .item_title { font-size: 13px; }
  .product_item .item_title a { line-height: 1.5; height: auto; max-height: 3em; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* ---------- 5. 新闻卡片 ---------- */
  .index_news .news_hot_item .item_img,
  .index_news .news_cell .cell_img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .index_news .news_hot_item .item_img img,
  .index_news .news_cell .cell_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .index_news .news_cell .cell_info { margin-left: 0; }

  /* ---------- 6. 区块间距与标题 ---------- */
  .index_product, .index_news, .index_company_intr { padding-top: 24px !important; }
  .index_hd { padding-top: 22px !important; padding-bottom: 22px !important; margin-bottom: 16px !important; background-size: cover !important; }
  .index_hd .hd_title { font-size: 22px; }
  .index_bd .layout,
  .index_company_intr .index_bd .layout { padding: 16px 12px; }
  .index_company_intr { padding-bottom: 20px; }
  .index_company_intr .company_intr_title { font-size: 16px; }

  /* ---------- 7. 页脚 ---------- */
  .web_footer .foot_service { padding: 24px 0; }
  .foot_item { margin-bottom: 18px; }
  .foot_contact_list .contact_item { font-size: 13px; }
  .foot_bar .copyright { font-size: 12px; line-height: 1.6; padding: 10px; text-align: center; }

  /* ---------- 8. 内页通用 ---------- */
  .path_bar { padding: 8px 0; font-size: 12px; }
  .page_main .side_wrap, .page_main .side-widget { display: none; }
  .page_main .page_cont, .page_main .content { width: 100% !important; float: none !important; padding: 0 12px; }
  .page_tit, .page_title { font-size: 22px; }
  .page_cont p, .content p { font-size: 14px; line-height: 1.75; }
  .page_cont table, .content table { display: block; width: 100%; overflow-x: auto; }
  .news_tags li, .product_cates li { margin-bottom: 8px; }

  /* 表单 */
  .inquiry-form input[type="text"],
  .inquiry-form input[type="email"],
  .inquiry-form input[type="tel"],
  .inquiry-form textarea,
  .guestbook input[type="text"],
  .guestbook textarea {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* 右侧悬浮客服：小屏隐藏，避免遮挡 */
  .scrollsidebar { display: none !important; }
}

@media only screen and (max-width: 480px) {
  .index_bd .layout,
  .index_company_intr .index_bd .layout { padding: 12px 8px; }
  .product_item figure { margin: 0 3px 16px; }
  .product_item .item_title { font-size: 12px; }
  .head_layer .logo img { max-height: 46px; }
}

/* ===== 产品菜单分组 20261102 ===== */
@media only screen and (max-width: 950px) {
  /* 还原产品名大小写（桌面样式 .head_nav li ul li 会把文字转小写） */
  .mobile-head-item .head_nav li ul li { text-transform: none; }
  /* 去掉列表项前的竖条装饰 */
  .mobile-head-item .head_nav li ul li a:before { display: none; }
  /* 分组标题：小字、加粗、灰、上分隔线，不可点 */
  .mobile-head-item .head_nav li.menu-group {
    padding: 13px 0 3px;
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #98a2b0;
    font-weight: 700;
    background: none;
    border-top: 1px solid #edf0f4;
    border-bottom: 0;
  }
  .mobile-head-item .head_nav li.menu-group:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 2px;
  }
  .mobile-head-item .head_nav li.menu-group:after { display: none; }
}

/* ===== 移动端菜单列表净化 20261102 ===== */
@media only screen and (max-width: 950px) {
  .mobile-head-item .head_nav,
  .mobile-head-item .head_nav ul,
  .mobile-head-item .head_nav li {
    list-style: none !important;
    list-style-type: none !important;
  }
  /* 隐藏 fontawesome 图标（字体未加载时显示为方块） */
  .mobile-head-item .head_nav > li:after,
  .mobile-head-item .head_nav li b:after,
  .mobile-head-item .head_nav li.menu-group:before,
  .mobile-head-item .head_nav li.menu-group:after {
    content: none !important;
    display: none !important;
  }
  /* 产品项左侧留出与分组标题对齐的呼吸位 */
  .mobile-head-item .head_nav li.menu-group { padding-left: 0; }
}

/* ===== 抽屉左缘裁切 20261102 ===== */
@media only screen and (max-width: 950px) {
  .mobile-head-item .head_nav { overflow: hidden; }
  .mobile-head-item .head_nav li.menu-group,
  .mobile-head-item .head_nav li ul li { padding-left: 2px; }
}