/* ============================================================
   全站移动端适配（除首页外所有页面，由 public/header.html 引用）
   建立日期：2026-10-19
   断点：≤1024px
   说明：全部规则包在 @media 内，桌面端不受影响
   ============================================================ */

#header .m-nav-btn { display: none; }

@media (max-width: 1024px) {

  /* ---------- 0. 全局 ---------- */
  html, body {
    min-width: 0 !important;
    width: 100%;
    overflow-x: hidden !important;
    font-size: 16px;
  }
  img { max-width: 100%; height: auto; }
  #slider { display: none !important; }
  [id$="-container"] { width: 100%; }

  /* ---------- 1. 顶部导航（汉堡 + 抽屉） ---------- */
  #header {
    height: 56px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 999;
  }
  #header .logo { width: 118px; order: 1; margin: 0; }
  #header .logo img { width: 100%; height: auto; }

  #header .m-nav-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    order: 2;
    margin-left: auto;
    width: 26px; height: 18px;
    padding: 0; background: none; border: 0; cursor: pointer;
  }
  #header .m-nav-btn span {
    display: block; width: 100%; height: 2px;
    background: #fff; border-radius: 2px;
    transition: transform .25s, opacity .2s;
  }
  #header.m-nav-open .m-nav-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  #header.m-nav-open .m-nav-btn span:nth-child(2) { opacity: 0; }
  #header.m-nav-open .m-nav-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  #header .nav {
    display: none;
    position: fixed;
    top: 56px; left: 0; right: 0;
    width: 100%;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    background: #414590 linear-gradient(180deg, #414590, #6C35B2);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
    padding: 6px 0 14px;
    z-index: 998;
  }
  #header.m-nav-open .nav { display: flex; }
  #header .nav li { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  #header .nav li:last-child { border-bottom: 0; }
  #header .nav li a { display: block; padding: 14px 20px; font-size: 15px; line-height: 1.4; }
  #header .nav li.active a { font-size: 15px; }
  #header .right-box { display: none; }

  /* ---------- 2. 通用 banner（各栏目页共用） ---------- */
  #banner {
    flex-direction: column;
    margin-top: 56px;
    margin-bottom: 8px;
  }
  #banner .right-box {
    width: 100% !important;
    height: auto;
    padding-top: 190px;
  }
  #banner .right-box .tab {
    width: 100%; height: auto;
    margin-top: 0;
    padding: 8px 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
    flex-wrap: nowrap;
  }
  #banner .right-box .tab .item { margin-right: 8px; flex: 0 0 auto; }
  #banner .right-box .tab .item a { font-size: 12px; height: 28px; padding: 0 12px; line-height: 26px; }
  #banner .right-box .tab .img-box { top: 0; left: 0; width: 100%; height: 190px; }

  /* ---------- 3. 通用标题 ---------- */
  .zixun-title {
    font-size: 1.5rem !important;
    line-height: 2rem;
    margin-bottom: 16px !important;
  }

  /* ---------- 4. 品牌咨询 / 包装（zixun、baozhuang） ---------- */
  #zixun-container .fl-1,
  #baozhuang-container .fl-1 { padding: 20px 14px; }
  #zixun-container .fl-1 .list .li,
  #baozhuang-container .fl-1 .list .li {
    width: 100% !important;
    height: auto !important;
    min-height: 190px;
    margin: 0 0 10px !important;
    padding: 20px;
    box-sizing: border-box;
    background-size: 5rem 5rem !important;
    background-position: right 1rem bottom 1rem !important;
  }
  #zixun-container .fl-1 .list .li .tit,
  #baozhuang-container .fl-1 .list .li .tit { font-size: 1.25rem; line-height: 1.75rem; }
  #zixun-container .fl-1 .list .li ul li,
  #baozhuang-container .fl-1 .list .li ul li { font-size: .875rem; line-height: 1.4rem; margin-right: .75rem; }

  #zixun-container .fl-2 { padding: 16px 14px; }
  #zixun-container .fl-2 .list .li {
    width: 100% !important;
    margin: 0 0 14px !important;
  }
  #zixun-container .fl-2 .list .li .img { height: 200px; }
  #zixun-container .fl-2 .list .li .info { padding: 14px; }
  #zixun-container .fl-2 .list .li .info .tit { font-size: 1.125rem; line-height: 1.6rem; }
  #zixun-container .fl-2 .list .li .info .des { font-size: .875rem; line-height: 1.4rem; }

  /* ---------- 5. 标志 VI（biaozhi） ---------- */
  #biaozhi-container .fl-1 { padding: 20px 0 0; margin-bottom: 10px; }
  #biaozhi-container .fl-1 .title { font-size: 1.375rem; margin-bottom: 16px; }
  #biaozhi-container .fl-1 .list .li { width: 33.33%; padding: .5rem; }
  #biaozhi-container .fl-2 { padding: 0 12px 12px; }
  #biaozhi-container .fl-2 .item {
    width: 100% !important;
    float: none;
    margin: 0 0 12px !important;
    padding-top: 1.5rem;
  }
  #biaozhi-container .fl-2 .item ul li { width: 50%; }
  #biaozhi-container .fl-2 .item ul li a { padding: .625rem 1rem; }
  #biaozhi-container .fl-2 .item .title { font-size: 1.25rem; }
  #biaozhi-container .fl-2 .more-title { font-size: 1.125rem; margin: 1.25rem 0; }

  /* ---------- 6. 包装详情块 ---------- */
  #baozhuang-container .fl-2 { padding: 20px 12px 0; }
  #baozhuang-container .fl-2 .subtitle { font-size: 1.125rem; margin-bottom: 1rem; }
  #baozhuang-container .fl-2 .img { padding: 8px; }
  #baozhuang-container .fl-3 { padding: 24px 0; }
  #baozhuang-container .fl-3 .list .li { width: 100% !important; margin: 0 0 10px; }

  /* ---------- 7. 空间（kongjian） ---------- */
  #kongjian-container .fl-1 { padding: 20px 14px; max-width: none; }
  #kongjian-container .fl-1 .item { width: 100% !important; margin: 0 0 18px !important; }
  #kongjian-container .fl-1 .item .img { height: 200px; margin-bottom: 12px; }
  #kongjian-container .fl-1 .item .title { font-size: 1.125rem; }
  #kongjian-container .fl-1 .item .subtitle { font-size: .9375rem; }

  /* ---------- 8. 吉祥物（jixiangwu） ---------- */
  #jixiangwu-container .fl-1 { padding: 20px 14px; }
  #jixiangwu-container .fl-1 .item {
    width: 100% !important;
    padding-top: 100%;
    margin: 0 0 12px !important;
  }
  #jixiangwu-container .fl-1 .item .title-box { padding: 0 1.25rem; opacity: 1; }
  #jixiangwu-container .fl-1 .item .title-box .tit { font-size: 1.25rem; line-height: 1.75rem; margin-bottom: .5rem; }
  #jixiangwu-container .fl-1 .item .title-box .subtit { font-size: .9375rem; line-height: 1.4rem; }

  /* ---------- 9. 传播（chuanbo） ---------- */
  #chuanbo-container .fl-1 { padding: 20px 14px; }
  #chuanbo-container .fl-1 .item { width: 100% !important; margin: 0 0 14px !important; }
  #chuanbo-container .fl-1 .item .img { height: 200px; }
  #chuanbo-container .fl-1 .item .info { padding: 12px 14px 16px; }
  #chuanbo-container .fl-1 .item .info .tit { font-size: 1.125rem; line-height: 1.6rem; }
  #chuanbo-container .fl-1 .item .info .subtit { font-size: .875rem; line-height: 1.3rem; }

  /* ---------- 10. 业务资讯（yewu） ---------- */
  #yewu-container .fl-1 { padding: 20px 14px; }
  #yewu-container .fl-1 .item { width: 100% !important; margin: 0 0 14px !important; }
  #yewu-container .fl-1 .item .img { height: 180px; }
  #yewu-container .fl-1 .item .tit { font-size: 1rem; line-height: 1.5rem; }
  #yewu-container .fl-1 .item .des { font-size: .8125rem; line-height: 1.3rem; }

  /* ---------- 11. 关于我们（about） ---------- */
  #about-container .fl-1 { padding: 30px 18px; }
  #about-container .fl-1 .ic { display: none; }
  #about-container .fl-1 .title { font-size: 1.25rem; line-height: 1.75rem; }
  #about-container .fl-1 .subtitle { font-size: .875rem; line-height: 1.25rem; margin-bottom: 1.5rem; }
  #about-container .fl-1 .smtit { font-size: 1.75rem; line-height: 2.25rem; margin-bottom: 1.5rem; }
  #about-container .fl-1 .description { font-size: .9375rem; line-height: 1.6rem; max-width: none; }
  #about-container .fl-1 .line { margin: 2rem 0; }
  #about-container .fl-1 .li { margin: 0 0 1.5rem !important; }
  #about-container .fl-1 .li .t1 { font-size: 1.125rem; line-height: 1.6rem; }
  #about-container .fl-1 .li .t2 { font-size: .875rem; margin-bottom: 1.5rem; }
  #about-container .fl-1 .li .t3 { font-size: 2rem; line-height: 1.5rem; }
  #about-container .fl-2 { padding: 24px 14px; }
  #about-container .fl-2 .pic { width: 100% !important; margin: 0 0 10px !important; float: none; }

  /* ---------- 12. 详情页（detail） ---------- */
  #detail-container {
    flex-direction: column;
    padding: 12px 14px 24px;
    box-sizing: border-box;
  }
  #detail-container .left { display: none; }
  #detail-container .right { display: none; }
  #detail-container .center { width: 100% !important; padding: 0; margin-top: 56px; }
  #detail-container .center .title { font-size: 1.375rem; line-height: 1.9rem; }
  #detail-container .center .kehu { font-size: .875rem; line-height: 1.4rem; }
  #detail-container .center .text img { max-width: 100%; height: auto; }
  #detail-container .center .text p { font-size: .9375rem; line-height: 1.7rem; }

  /* ---------- 13. 留言条 / 联系我们 / 页脚 ---------- */
  #message {
    height: auto !important;
    flex-direction: column;
    align-items: stretch;
    padding: 20px 16px;
    box-sizing: border-box;
  }
  #message .info {
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 0;
    box-sizing: border-box;
  }
  #message .info .tit { font-size: .9375rem; line-height: 1.4rem; margin-bottom: 6px; }
  #message .info .num { font-size: 1.25rem; line-height: 1.8rem; word-break: break-all; }
  #message .info .from { flex-direction: column; }
  #message .info .from .ipt {
    width: 100% !important; height: 44px;
    font-size: .9375rem; padding: 12px 14px; margin-bottom: 10px; box-sizing: border-box;
  }
  #message .info .from .btn { width: 100% !important; height: 46px; font-size: 1rem; }

  #contact {
    flex-direction: column;
    padding: 26px 16px 30px;
  }
  #contact .left-box,
  #contact .right-box { width: 100% !important; padding: 0 !important; border-right: 0; }
  #contact .left-box { margin-bottom: 24px; }
  #contact .title { font-size: 1.25rem; line-height: 1.75rem; margin-bottom: 16px; }
  #contact .left-box ul li { margin-bottom: 16px; }
  #contact .left-box ul li .tit { font-size: 1rem; width: auto; margin-right: 6px; }
  #contact .left-box ul li .des { font-size: .9375rem; line-height: 1.5rem; word-break: break-all; }
  #contact .left-box ul li .des span { font-size: 1rem; line-height: 1.5rem; }
  #contact .right-box .from .ipt,
  #contact .right-box .from .ipt.xs,
  #contact .right-box .from .ipt.sm {
    width: 100% !important; height: 46px;
    font-size: .9375rem; padding: 12px 14px; margin-bottom: 10px; box-sizing: border-box;
  }
  #contact .right-box .from .ipt.lg { height: 110px; }
  #contact .right-box .from .btn { height: 48px; font-size: 1rem; margin-top: 6px; }

  #footer { height: auto; padding: 14px 12px 22px; font-size: .8125rem; line-height: 1.4rem; }
  #footer a { font-size: .8125rem; }
}

@media (max-width: 360px) {
  #header .logo { width: 100px; }
  #banner .right-box { padding-top: 160px; }
  #banner .right-box .tab .img-box { height: 160px; }
}