/* =========================================================
   m.css - Mobile Override
   适配你这份 HTML 页面（<=768px）
   放在其它 CSS 后面引入（你已满足）
   ========================================================= */
@media screen and (max-width: 768px) {

  /* ---------- 全局 ---------- */
  html, body {
    width: 100%;
    overflow-x: hidden;
  }

  body {
    font-size: 14px;
    line-height: 1.6;
    background: #fff;
    -webkit-text-size-adjust: 100%;
  }

  * {
    box-sizing: border-box;
    max-width: 100%;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }

  /* ---------- Header 顶部导航（你这里是 header + nav + dl） ---------- */
  header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
  }

  .head-logo {
    padding: 10px 12px 0;
    display: flex;
    align-items: center;
  }

  .head-logo img {
    height: 28px !important;
    width: auto;
  }

  header nav {
    width: 100%;
    padding: 8px 10px 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  header nav dl {
    display: inline-block;
    vertical-align: top;
    margin: 0 10px 0 0;
  }

  header nav dt a {
    display: inline-block;
    font-size: 14px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f6f6f6;
  }

  header nav dt .xian {
    display: none; /* 手机端不需要那条线 */
  }

  /* 下拉菜单：手机端不建议 hover，直接隐藏避免乱 */
  header nav dd {
    display: none !important;
  }

  /* ---------- Banner ---------- */
  .banner {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .banner .pics_wrap {
    width: 100%;
  }

  /* 兼容 html5zoo 轮播图图片撑满 */
  #html5zoo-1,
  .html5zoo-slides,
  .html5zoo-slides li {
    width: 100% !important;
  }

  .html5zoo-slides li img {
    width: 100% !important;
    height: auto !important;
  }

  /* ---------- Box 通用间距 ---------- */
  .box-1,
  .box-2,
  .box-3 {
    padding-left: 12px;
    padding-right: 12px;
  }

  .box-1-title,
  .box-2-title,
  .box-3-title {
    padding: 18px 0 10px;
    text-align: center;
  }

  .box-1-title h1,
  .box-2-title h1,
  .box-3-title h1 {
    font-size: 18px;
    margin: 0 0 6px;
    line-height: 1.3;
  }

  .box-1-title p,
  .box-2-title p,
  .box-3-title p {
    font-size: 13px;
    margin: 0;
    color: #666;
    line-height: 1.6;
  }

  /* ---------- Tabs：8个入口 + content ---------- */
  .tabs {
    width: 100%;
    margin: 0;
  }

  .tabs nav {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 0 4px !important;
  }

  .tabs nav ul {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;

    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
  }

  /* 一行两格：8个tab正好4行 */
  .tabs nav ul li {
    width: calc(50% - 6px) !important;
    margin: 0 0 10px !important;
  }

  .tabs nav ul li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    height: 78px !important;          /* 像素级：给图标+文字足够空间 */
    padding: 10px 6px !important;

    border-radius: 12px !important;
    background: #f7f8fa !important;
    text-decoration: none !important;
    text-align: center !important;
  }

  .tabs nav ul li a img {
    width: 28px !important;
    height: 28px !important;
    margin: 0 0 8px !important;
  }

  .tabs nav ul li a br {
    display: none; /* 你写了 <br>，手机端不要它 */
  }

  .tabs nav ul li a span {
    font-size: 14px !important;
    color: #333 !important;
    line-height: 1.2 !important;
  }

  /* 激活态（cbpFWTabs 会加 tab-current） */
  .tabs nav ul li.tab-current a {
    background: #009688 !important;
  }

  .tabs nav ul li.tab-current a span {
    color: #fff !important;
    font-weight: 600 !important;
  }

  /* ---------- Tabs 内容区：section-left/right 由左右改上下 ---------- */
  .content-wrap {
    width: 100% !important;
    padding: 10px 0 0 !important;
  }

  .content-wrap section {
    padding: 12px 0 !important;
  }

  /* 左右列改成竖排 */
  .content-wrap .section-left,
  .content-wrap .section-right {
    width: 100% !important;
    float: none !important;
  }

  .content-wrap .section-left h1 {
    font-size: 18px !important;
    margin: 0 0 8px !important;
    text-align: left !important;
  }

  .content-wrap .section-left .desc {
    font-size: 13px !important;
    line-height: 1.7 !important;
    color: #555 !important;
    margin-bottom: 12px !important;
  }

  /* 统计块：三列 -> 两列（第三行自动换行） */
  .content-wrap .count {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 10px 0 12px !important;
  }

  .content-wrap .count .item {
    width: calc(50% - 5px) !important;
    background: #fff !important;
    border-radius: 10px !important;
    padding: 10px 10px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.04) !important;
  }

  .content-wrap .count .item .val {
    font-size: 16px !important;
    line-height: 1.2 !important;
    color: #111 !important;
    margin-bottom: 4px !important;
  }

  .content-wrap .count .item .val span {
    font-size: 22px !important;
    font-weight: 700 !important;
  }

  .content-wrap .count .item .lab {
    font-size: 12px !important;
    color: #666 !important;
    line-height: 1.4 !important;
  }

  /* CTA 按钮：手机端全宽，44px高 */
  .g-btn {
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    line-height: 44px !important;
    border-radius: 10px !important;
    text-align: center !important;
    font-size: 15px !important;
    margin: 12px 0 0 !important;
  }

  /* section-right 图片布局：堆叠+留白 */
  .content-wrap .section-right {
    margin-top: 12px !important;
  }

  .content-wrap .section-right .img1,
  .content-wrap .section-right .img2 {
    width: 100% !important;
    margin: 0 0 10px !important;
  }

  .content-wrap .section-right .img1 img,
  .content-wrap .section-right .img2 img {
    width: 100% !important;
    border-radius: 12px !important;
  }

  /* 你有内联 style="width:320px"，手机端强制覆盖 */
  .content-wrap img[style*="width: 320px"],
  .content-wrap img[style*="width:320px"] {
    width: 100% !important;
    height: auto !important;
  }

  /* ---------- Box-2：目标区/图片+按钮 ---------- */
  .mubiao {
    position: relative;
    padding: 0;
    margin: 0;
  }

  .mubiao img {
    width: 100% !important;
    border-radius: 12px !important;
  }

  .mubiao .threeBtn {
    position: static !important; /* PC 可能绝对定位，手机直接流式 */
    margin-top: 12px !important;
  }

  .bbg {
    padding: 14px 0 0 !important;
  }

  .bbg h1 {
    font-size: 18px !important;
    margin: 0 0 8px !important;
  }

  .bbg p {
    font-size: 13px !important;
    line-height: 1.8 !important;
    margin: 0 !important;
  }

  .bbg .threeBtn {
    margin-top: 12px !important;
  }

  /* ---------- 表单留言（layui） ---------- */
  .box-liuyan {
    padding: 0 0 18px !important;
  }

  #guestbook {
    width: 100% !important;
  }

  .layui-form-item {
    margin-bottom: 12px !important;
  }

  .layui-input,
  .layui-textarea {
    border-radius: 10px !important;
    font-size: 14px !important;
  }

  .layui-textarea {
    min-height: 110px !important;
  }

  .layui-btn {
    width: 100% !important;
    height: 44px !important;
    line-height: 44px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
  }

  /* ---------- Footer 底部：四列改竖排 ---------- */
  #footer {
    margin-top: 10px !important;
  }

  .footer {
    width: 100% !important;
    display: block !important;
    padding: 16px 12px !important;
  }

  .footer1,
  .footer2,
  .footer3 {
    width: 100% !important;
    float: none !important;
    margin: 0 0 12px !important;
  }

  .footer1 img {
    width: 140px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .footer2 h1,
  .footer3 h1 {
    font-size: 16px !important;
    margin: 0 0 6px !important;
  }

  .footer2 p,
  .footer3 p {
    font-size: 13px !important;
    margin: 0 0 4px !important;
    color: #555 !important;
  }

  .footer4 {
    padding: 12px 12px 18px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    text-align: center !important;
  }

  /* ---------- 右侧悬浮导航：手机端缩小+避免遮挡 ---------- */
  .right_nav {
    bottom: 90px !important;
    z-index: 999 !important;
  }

  .right_nav li {
    right: 0 !important;            /* 手机端直接贴边，不做滑出 */
    padding: 8px !important;
    margin: 6px 0 !important;
  }

  .right_nav li h4 {
    display: none !important;        /* 手机屏幕小，隐藏文字 */
  }

  .right_nav li img {
    width: 26px !important;
    height: 26px !important;
  }

  /* hover 弹层在手机上经常误触，直接禁用 */
  .right_nav li .hideBox {
    display: none !important;
  }

  /* ---------- 防横向溢出兜底（表格/长英文/长数字） ---------- */
  table {
    width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  td, th, p, div, span {
    word-break: break-word;
  }
}
/* =========================
   Mobile Drawer Nav
   ========================= */
@media screen and (max-width: 768px) {

  /* 隐藏原 nav */
  header nav {
    display: none !important;
  }

  /* 右上角菜单按钮 */
  .mobile-menu-btn {
    position: fixed;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #009688;
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2001;
  }

  /* 抽屉菜单 */
  .mobile-drawer {
    position: fixed;
    top: 0;
    right: -260px;
    width: 260px;
    height: 100vh;
    background: #fff;
    z-index: 2000;
    transition: right .3s ease;
    box-shadow: -6px 0 20px rgba(0,0,0,.08);
    padding: 60px 16px 20px;
  }

  /* 打开状态 */
  body.menu-open .mobile-drawer {
    right: 0;
  }

  /* 菜单项 */
  .mobile-drawer a {
    display: block;
    padding: 14px 10px;
    font-size: 15px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
  }

  /* 遮罩 */
  .mobile-mask {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1999;
    display: none;
  }

  body.menu-open .mobile-mask {
    display: block;
  }
}
/* =========================
   Mobile Fixed Footer
   ========================= */
@media screen and (max-width: 768px) {

  .footer-fixed {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 56px;
    background: #fff;
    border-top: 1px solid #eee;
    z-index: 1500;

    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .footer-fixed a {
    flex: 1;
    text-align: center;
    font-size: 13px;
    color: #333;
  }

  .footer-fixed a strong {
    display: block;
    font-size: 15px;
    color: #009688;
  }

  /* 给 body 留空间，防止被压住 */
  body {
    padding-bottom: 70px;
  }
}
/* =========================
   Mobile Form Redesign
   ========================= */
@media screen and (max-width: 768px) {

  .layui-form-pane {
    background: #fff;
    padding: 18px 16px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,.06);
  }

  .layui-form-pane .layui-form-item {
    margin-bottom: 14px;
  }

  .layui-form-pane .layui-input,
  .layui-form-pane .layui-textarea {
    border-radius: 12px !important;
    border: 1px solid #e5e5e5 !important;
    font-size: 15px !important;
    padding: 12px 14px !important;
  }

  .layui-form-pane .layui-textarea {
    min-height: 120px !important;
  }

  .layui-form-pane .layui-input:focus,
  .layui-form-pane .layui-textarea:focus {
    border-color: #009688 !important;
    box-shadow: 0 0 0 2px rgba(0,150,136,.15);
  }

  /* 提交按钮 */
  .layui-form-pane .layui-btn {
    width: 100%;
    height: 48px;
    line-height: 48px;
    border-radius: 14px;
    font-size: 16px;
    background: linear-gradient(135deg,#00bfa5,#009688);
  }
}