@charset "utf-8";
/* ============================================================
   利川市飞萌科技有限公司 · 移动端适配层（仅 <=768px 生效）
   作用：将桌面端固定宽度画布（1200px）在手机上
        转为可阅读的纵向流式布局；桌面端渲染完全不受影响。
   ============================================================ */

/* ---------- 0. 基础 ---------- */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    -webkit-text-size-adjust: 100% !important;
  }

  /* ---------- 1. 解除所有 1200px 硬约束并让容器自适应高度 ---------- */
  #mainContentWrapper,
  .main-layout-wrapper,
  #mod_AreaHeaderWrapper,
  #mod_AreaMainWrapper,
  #mod_AreaFooterWrapper,
  #mod_MainContent,
  #mod_HeaderContent,
  #mod_FooterContent,
  .mediaWrapper,
  .mediaContainer,
  .header,
  .footer,
  body > div,
  body > div > div,
  [style*="min-width:1200px"],
  [style*="min-width: 1200px"],
  [id^="mod_Area"] {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    left: 0 !important;
    margin-left: 0 !important;
    background-size: 100% auto !important;
  }

  /* ---------- 2. 内容块：绝对定位 → 文档流（按 DOM 顺序自上而下） ---------- */
  .mediaContainer > div[id^="mod_blk_"],
  .mediaContainer div.smartAbs,
  .mediaContainer [id^="smc_"],
  #mod_HeaderContent div[id^="mod_el_"],
  [data-region="header"],
  [data-region="header"] div[id^="mod_el_"],
  [data-region="footer"],
  [data-region="footer"] div[id^="mod_el_"],
  #mainContentWrapper div[ctype] {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 内容框解除溢出裁剪（PC 端靠裁剪做视觉，手机端需完整显示） */
  .frameContent,
  .editableContent {
    overflow: visible !important;
    height: auto !important;
  }

  /* ---------- 2b. 内联固定宽度的后代元素统一收窄（大量 width:1200px 内联样式） ---------- */
  #mainContentWrapper div,
  #mainContentWrapper p,
  #mainContentWrapper ul,
  #mainContentWrapper ol,
  #mainContentWrapper li,
  #mainContentWrapper a,
  #mainContentWrapper img,
  #mainContentWrapper table,
  #mainContentWrapper td,
  #mainContentWrapper span,
  #mainContentWrapper h1,
  #mainContentWrapper h2,
  #mainContentWrapper h3 {
    max-width: 100% !important;
  }
  #mainContentWrapper [style*="1200px"],
  #mainContentWrapper [style*="1920px"],
  #mainContentWrapper [style*="1160px"],
  #mainContentWrapper [style*="1380px"],
  #mainContentWrapper [style*="1600px"] {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* ---------- 2b-2. 常用内层容器（fullcolumn / w-container 等）收窄 ---------- */
  .fullcolumn-outer,
  .fullcolumn-inner,
  .w-container,
  .smAreaC,
  .w-detail,
  .w-detailcont,
  .main-layout,
  .main-layout-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    box-sizing: border-box !important;
  }

  /* ---------- 2c. 全站底部区域（page-bottom）解除 1200px 固定宽 ---------- */  .page-bottom--area,
  .page-bottom--area .bottom-content,
  .page-bottom--area .top-area,
  .page-bottom--area .bottom-area,
  .page-bottom--area .bottom-content > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .page-bottom--area .top-area,
  .page-bottom--area .bottom-area { display: block !important; text-align: center !important; }

  /* ---------- 3. 图片：不超出屏幕 ---------- */
  #mainContentWrapper img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ---------- 4. 头部（data-region=header）：logo + 导航纵向堆叠 ---------- */
  [data-region="header"] {
    background-color: #0b0b0b !important;
    background-image: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 6px !important;
  }
  [data-region="header"] .fullcolumn-inner,
  [data-region="header"] .smAreaC { width: 100% !important; max-width: 100% !important; }
  [data-region="header"] div[ctype="image"] { padding: 10px 12px 4px !important; }
  #mainContentWrapper [data-region="header"] div[ctype="image"] .w-image-box,
  #mainContentWrapper [data-region="header"] div[ctype="image"] a { width: auto !important; height: 38px !important; }
  #mainContentWrapper [data-region="header"] div[ctype="image"] img { width: auto !important; height: 38px !important; }
  [data-region="header"] div[ctype="nav"] { padding: 0 4px !important; }
  [data-region="header"] .w-nav,
  [data-region="header"] .nav_pc_t_3 { display: flex !important; flex-wrap: wrap !important; width: 100% !important; }
  [data-region="header"] .w-nav-inner {
    width: auto !important;
    min-width: 24% !important;
    flex: 1 1 24% !important;
    height: 38px !important;
    line-height: 38px !important;
  }
  [data-region="header"] .w-nav-item-link,
  [data-region="header"] .w-link-txt { color: #fff !important; font-size: 14.5px !important; }
  [data-region="header"] .sliding-box,
  [data-region="header"] .sliding { display: none !important; }

  /* ---------- 5. 首页大banner / 轮播：保留首帧，固定手机高度 ---------- */
  .mediaContainer div[ctype="fullpageSlide"],
  .mediaContainer div[ctype="slideset"],
  .mediaContainer [id^="lider_mod_"] {
    overflow: hidden !important;
  }
  .mediaContainer div[ctype="fullpageSlide"] { height: 200px !important; }
  .mediaContainer div[ctype="slideset"] { height: 170px !important; }
  .mediaContainer div[ctype="fullpageSlide"] .w-slide,
  .mediaContainer div[ctype="slideset"] .w-slide,
  .mediaContainer div[ctype="fullpageSlide"] .w-slide-inner,
  .mediaContainer div[ctype="slideset"] .w-slide-inner,
  .mediaContainer div[ctype="fullpageSlide"] .content-box,
  .mediaContainer div[ctype="slideset"] .content-box,
  .mediaContainer div[ctype="fullpageSlide"] .content-box-inner,
  .mediaContainer div[ctype="slideset"] .content-box-inner {
    width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
    position: relative !important;
    height: 100% !important;
  }
  .mediaContainer div[ctype="fullpageSlide"] .content-box,
  .mediaContainer div[ctype="slideset"] .content-box { display: none !important; }
  .mediaContainer div[ctype="fullpageSlide"] .content-box:first-child,
  .mediaContainer div[ctype="slideset"] .content-box:first-child { display: block !important; }
  .mediaContainer div[ctype="fullpageSlide"] .content-box-inner,
  .mediaContainer div[ctype="slideset"] .content-box-inner {
    background-size: cover !important;
    background-position: 50% 50% !important;
  }
  .mediaContainer div[ctype="fullpageSlide"] .smAreaC,
  .mediaContainer div[ctype="slideset"] .smAreaC { display: none !important; }
  .mediaContainer .w-slide-btn-box,
  .mediaContainer .w-slide-arrowl,
  .mediaContainer .w-slide-arrowr { display: none !important; }

  /* ---------- 6. 按钮块：自适应宽高 ---------- */
  .mediaContainer div[ctype="button"] .w-button {
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    line-height: 1.5 !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    white-space: normal !important;
    display: block !important;
  }

  /* ---------- 7. 商品/新闻列表：两列自适应 ---------- */
  .mediaContainer div[ctype="listproduct"] ul,
  .mediaContainer div[ctype="listproductcategory"] ul,
  .mediaContainer div[ctype="listnews"] ul,
  .mediaContainer div[ctype="productSlideBind"] ul,
  .mediaContainer div[ctype="productSlideBind"] .w-product-list {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .mediaContainer div[ctype="listproduct"] li,
  .mediaContainer div[ctype="listproductcategory"] li,
  .mediaContainer div[ctype="listnews"] li,
  .mediaContainer div[ctype="productSlideBind"] li {
    width: 50% !important;
    max-width: 50% !important;
    float: none !important;
    margin: 0 0 12px !important;
    box-sizing: border-box !important;
  }
  .mediaContainer div[ctype="listnews"] li { width: 100% !important; max-width: 100% !important; }
  .mediaContainer div[ctype="listproduct"] li img,
  .mediaContainer div[ctype="productSlideBind"] li img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* ---------- 8. 文本块：手机可读字号 ---------- */
  .mediaContainer div[ctype="text"] { padding: 4px 12px !important; }
  .mediaContainer div[ctype="text"] .editableContent { font-size: 14px !important; line-height: 1.9 !important; }
  .mediaContainer div[ctype="text"] .editableContent p { line-height: 1.9 !important; }
  .mediaContainer div[ctype="text"] .editableContent span { font-size: 15px !important; }
  .mediaContainer div[ctype="text"] .editableContent h1,
  .mediaContainer div[ctype="text"] .editableContent h2 { font-size: 20px !important; }
  .mediaContainer div[ctype="text"] table { width: 100% !important; }

  /* ---------- 9. 页脚（data-region=footer）：纵向堆叠 ---------- */
  [data-region="footer"] {
    background: #1a1a1a !important;
    background-image: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 0 18px !important;
  }
  [data-region="footer"] .fullcolumn-inner,
  [data-region="footer"] .smAreaC { width: 100% !important; max-width: 100% !important; }
  [data-region="footer"] div[ctype="text"] { padding: 3px 14px !important; }
  [data-region="footer"] div[ctype="text"] .editableContent { font-size: 12.5px !important; line-height: 1.9 !important; }
  [data-region="footer"] div[ctype="text"] .editableContent span,
  [data-region="footer"] div[ctype="text"] .editableContent p { font-size: 12.5px !important; color: #cfcfcf !important; }
  [data-region="footer"] div[ctype="text"] .editableContent a { color: #cfcfcf !important; }
  [data-region="footer"] div[ctype="nav"] { margin-top: 6px !important; }
  [data-region="footer"] .w-nav { display: flex !important; flex-wrap: wrap !important; width: 100% !important; }
  [data-region="footer"] .w-nav-inner {
    width: auto !important;
    flex: 1 1 24% !important;
    min-width: 24% !important;
    height: 34px !important;
    line-height: 34px !important;
  }
  [data-region="footer"] .w-nav-item-link,
  [data-region="footer"] .w-link-txt { font-size: 13px !important; color: #cfcfcf !important; }
  [data-region="footer"] .sliding-box,
  [data-region="footer"] .sliding { display: none !important; }

  /* ---------- 10. 注入内容块（fm-*） ---------- */
  .fm-band { padding: 18px 0 !important; }
  .fm-band-inner { width: auto !important; margin: 0 12px !important; }
  .fm-extra-page { padding: 16px 14px !important; }
  .fm-extra-page h2 { font-size: 17px !important; }
  .fm-extra-page p { font-size: 13px !important; line-height: 1.85 !important; }
  .fm-extra { padding: 16px 14px !important; }
  .fm-extra h2 { font-size: 17px !important; }
  .fm-intro, .fm-spec-wrap { padding: 16px 14px !important; }
  .fm-spec-wrap table { width: 100% !important; font-size: 13px !important; }
  .fm-spec-wrap th, .fm-spec-wrap td { padding: 7px 8px !important; }
  .fm-extra-page table { width: 100% !important; font-size: 13px !important; }

  
  .fm-extra-area{position:static!important;left:0!important;top:auto!important;width:100%!important;height:auto!important;}
  .fm-extra-inner{max-width:100%!important;padding:28px 16px!important;box-sizing:border-box!important;}
  .fm-extra-area *{box-sizing:border-box!important;}

  /* 在线订购页 */
  #fm-order { width: auto !important; margin: 18px 12px 36px !important; min-height: 0 !important; }
  #fm-order h1 { font-size: 22px !important; }
  #fm-order .fm-sub { font-size: 13px !important; }
  .fm-flex { display: block !important; }
  #fm-form { width: auto !important; padding: 16px 14px !important; }
  .fm-aside { width: auto !important; margin: 16px 0 0 !important; }
  .fm-row { display: block !important; }
  .fm-row > div { width: 100% !important; margin: 0 0 12px !important; }
  .fm-form-row label { font-size: 13px !important; }
  #fm-form input, #fm-form select, #fm-form textarea { width: 100% !important; font-size: 15px !important; }
  .fm-loc-card, .fm-pay, .fm-note { max-width: 100% !important; width: auto !important; }
  .fm-pay-list { display: block !important; }
}