/* ============================================================
   广东志合官网 · 移动端（H5）适配样式
   ------------------------------------------------------------
   设计参照：原站手机版  http://www.gdzhihe.cn/m/index.html?gomobile=1
   把 /m/ 的移动设计语言，嫁接到本站「镜像 PC 模板 + 响应式」方案上：

     · 顶部固定栏 App Bar ：白底、左 logo、右汉堡三横线，60px，点击变 ✕
     · 全屏下拉导航       ：顶栏下方铺满，竖排 58px 行、底边细线分隔
     · 栏目标题           ：居中 18px 标题 + 100px 细线，线中央 6px 品牌红圆点
     · 内容行             ：底部 1px #eee 分隔线，标题单行省略、日期右对齐
     · 底部固定 Tab 栏    ：白底 52px、4 格等分、图标 + 文字，选中变品牌红
     · 品牌色             ：红 #da251c / 金 #bf9f62

   落地方式：不新建独立 /m/ 站点（沿用既有决策）。
     手机端专属的「顶栏 / 导航抽屉 / 底栏 Tab」由模板中带 .m-mobile
     标记的元素补入，PC 端靠行内 display:none + 本文件规则彻底隐藏；
     其余全部是 @media (max-width:768px) 内的样式覆盖 —— PC 端零影响。
   ============================================================ */

/* ---------- 0. 手机端专属元素：默认隐藏（PC 端不占位） ---------- */
.m-mobile {
    display: none;
}

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

    /* ==========================================================
       1. 骨架流式化：干掉 1200 / 1300 / 1100px 固定宽度
       ========================================================== */
    #mBody1,
    #mBody2,
    #mOuterBox,
    #mTop,
    #mTopMiddle,
    #mBottom,
    #mBottomMiddle,
    #mMain,
    [id^="tmf"],
    [id^="mfid"],
    [id^="bmf"] {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        float: none !important;
        height: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .ct,
    .ct_box,
    .mf,
    .box7 {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 为固定顶栏 / 底栏让出空间，避免遮挡内容 */
    #mBody1 {
        padding-top: 60px !important;
        padding-bottom: 52px !important;
    }

    /* 正文左右留白（页脚单独处理，保持深色底通栏） */
    #mMain {
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }

    /* 手机端统一收紧栏目之间的纵向间距（PC 端多为 30~60px 的大留白） */
    #mMain > [id^="mfid"],
    #mMain > .ct > [id^="mfid"],
    #mMain > .mf > [id^="mfid"] {
        margin-top: 16px !important;
        margin-bottom: 0 !important;
    }

    /* ==========================================================
       2. 顶部固定栏（App Bar） —— 对应 /m/ 的 .header
       ========================================================== */
    .m-appbar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 999;
        width: 100%;
        height: 60px;
        box-sizing: border-box;
        padding: 0 12px;
        background: #fff;
        border-bottom: 1px solid #f2f2f2;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
    }

    .m-appbar__logo {
        display: block;
        height: 100%;
        line-height: 0;
        padding: 12px 0;
        box-sizing: border-box;
    }

    .m-appbar__logo img {
        max-height: 36px;
        width: auto;
        max-width: 64vw;
    }

    .m-appbar__btn {
        position: relative;
        flex: 0 0 auto;
        width: 44px;
        height: 100%;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .m-line {
        position: absolute;
        left: 50%;
        width: 26px;
        height: 2px;
        margin-left: -13px;
        background: #333;
        border-radius: 2px;
        transition: all .4s ease;
    }

    .m-line1 { top: 22px; }
    .m-line2 { top: 29px; }
    .m-line3 { top: 36px; }

    .m-appbar__btn.is-open .m-line1 { transform: translateY(7px) rotate(45deg); }
    .m-appbar__btn.is-open .m-line2 { opacity: 0; transform: scaleX(.4); }
    .m-appbar__btn.is-open .m-line3 { transform: translateY(-7px) rotate(-45deg); }

    /* ==========================================================
       3. 全屏下拉导航 —— 对应 /m/ 的 .navbar
       ========================================================== */
    .m-navpanel {
        display: block !important;
        position: fixed;
        left: 0;
        right: 0;
        top: 60px;
        bottom: 0;
        z-index: 998;
        background: #fff;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .3s ease, transform .3s ease, visibility .3s;
    }

    .m-navpanel.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .m-navpanel__inner {
        padding: 0 24px 30px;
    }

    .m-navpanel__item {
        display: block;
        height: 58px;
        line-height: 58px;
        font-size: 15px;
        color: #999;
        text-decoration: none;
        border-bottom: 1px solid #ededed;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .m-navpanel__item:last-child {
        border-bottom: 0;
    }

    .m-navpanel__item.is-current {
        color: #da251c;
    }

    /* ==========================================================
       4. 隐藏 PC 顶栏（欢迎条 + logo + 横向导航），由 App Bar 接管
       ========================================================== */
    #tmf4,
    #tmf5 {
        display: none !important;
    }

    /* ==========================================================
       5. 焦点图：按 /m/ 的 640:214 比例（33.4vw）自适应
       ========================================================== */
    [class^="box806"] .main_image,
    [class^="box806"] .main_image ul,
    [class^="box806"] .main_image li,
    [class^="box806"] .main_image li span,
    [class^="box806"] .main_image li a,
    #fan {
        height: 33.4vw !important;
        max-height: 240px !important;
    }

    [class^="box806"] .main_image li span {
        background-size: cover !important;
        background-position: center center !important;
    }

    /* 手机端触摸滑动即可，隐藏左右箭头（原样式带 !important，需提高权重覆盖） */
    #mTop #fan #btn_prev,
    #mTop #fan #btn_next {
        display: none !important;
    }

    /* 首页 banner 外层容器的上下 30px 大间距收窄 */
    #tmf10 {
        margin: 10px 0 !important;
    }

    /* ==========================================================
       5.1 首页「高级搜索」：PC 端绝对定位在 banner 右下角，
           手机端改为常规流式、占满一行的搜索条
       ========================================================== */
    #mfid2,
    #mfid9,
    #mfid7 {
        position: static !important;
        float: none !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    #mfid7 {
        margin: 10px 0 0 !important;
    }

    #mfid9 {
        margin: 0 !important;
    }

    .box227_-6376 {
        width: auto !important;
        float: none !important;
    }

    .box227_-6376 .kwCont {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        float: none !important;
    }

    .box227_-6376 .kwCont form {
        display: flex !important;
        align-items: stretch;
    }

    .box227_-6376 .kwCont .textCont {
        flex: 1 1 auto;
        float: none !important;
        width: auto !important;
        height: 40px !important;
        line-height: 28px !important;
        padding: 4px 8px !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }

    .box227_-6376 .anSearch {
        flex: 0 0 46px;
        width: 46px !important;
        height: 40px !important;
        box-sizing: border-box !important;
        background-size: 18px auto !important;
        background-position: center center !important;
    }

    /* ==========================================================
       6. 栏目标题：/m/ 的「居中标题 + 细线 + 红点」
          —— 覆盖首页/内页各栏目的 .box3_* H1（原为左对齐 + 小图标）
       ========================================================== */
    [class^="box3"] {
        margin-bottom: 14px !important;
    }

    [class^="box3"] h1 {
        position: relative;
        text-align: center !important;
        font-size: 18px !important;
        font-weight: normal !important;
        color: #333 !important;
        line-height: 1.5 !important;
        padding: 0 !important;
        margin: 4px 0 12px !important;
        background: none !important;
    }

    [class^="box3"] h1 > span {
        padding-left: 0 !important;
        color: #333 !important;
    }

    /* 100px 细线 */
    [class^="box3"] h1::after {
        content: "";
        display: block;
        width: 100px;
        height: 1px;
        margin: 7px auto 0;
        background: #999;
    }

    /* 线中央的 6px 品牌红圆点 */
    [class^="box3"] h1::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -3px;
        width: 6px;
        height: 6px;
        margin-left: -3px;
        border-radius: 50%;
        background: #da251c;
    }

    /* 「更多 >>」改为右上角小字 */
    [class^="box3"] h1 > .rr {
        position: absolute !important;
        right: 0 !important;
        top: 4px !important;
        float: none !important;
        padding: 0 !important;
        font-size: 12px !important;
        font-weight: normal !important;
    }

    [class^="box3"] h1 > .rr a {
        color: #999 !important;
    }

    /* ==========================================================
       7. 内容行：底部分隔线 + 标题单行省略 + 日期右对齐
       ========================================================== */
    [class^="box3"] ul {
        padding: 0 !important;
        margin: 0 !important;
    }

    [class^="box3"] li {
        height: auto !important;
        min-height: 0 !important;
        padding: 11px 0 !important;
        line-height: 1.5 !important;
        font-size: 14px !important;
        background: none !important;
        border-bottom: 1px solid #eee !important;
        overflow: visible !important;
    }

    [class^="box3"] li > span {
        display: flex !important;
        align-items: baseline;
        padding: 0 !important;
    }

    [class^="box3"] li span a,
    [class^="box3"] li span a:link,
    [class^="box3"] li span a:visited {
        flex: 1 1 auto;
        min-width: 0;
        float: none !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: #333 !important;
        text-indent: 0 !important;
        background: none !important;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    [class^="box3"] li span.newtime {
        flex: 0 0 auto;
        float: none !important;
        padding: 0 0 0 10px !important;
        font-size: 12px !important;
        color: #999 !important;
    }

    /* ==========================================================
       8. 列表页顶部栏目切换条：横向滑动
       ========================================================== */
    [class^="box222"] .mainList {
        padding: 16px 0 6px !important;
    }

    [class^="box222"] .mainList ul {
        white-space: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        text-align: left !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    /* 隐藏横向滚动条（含 Win 原生滚动条两端的箭头按钮） */
    [class^="box222"] .mainList ul::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    [class^="box222"] .mainList ul li {
        display: inline-block !important;
        margin-bottom: 10px !important;
    }

    [class^="box222"] .mainList ul li.fgx {
        display: none !important;
    }

    [class^="box222"] .mainList a {
        padding: 0 16px !important;
        font-size: 13px !important;
    }

    /* ==========================================================
       9. 新闻列表页：日期方块缩小 + 摘要两行截断
       ========================================================== */
    [class^="box288"] .news_box .news_list .news_no1 {
        margin-top: 14px !important;
        padding-bottom: 14px !important;
        border-bottom: 1px solid #eee !important;
    }

    [class^="box288"] .news_box .news_list .news_no1 .rl {
        display: flex !important;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        width: 46px !important;
        height: 46px !important;
        margin-right: 12px !important;
        margin-bottom: 0 !important;
        background: #da251c !important;
        background-image: none !important;
        border-radius: 3px;
        text-align: center !important;
    }

    [class^="box288"] .news_box .news_list .news_no1 .rl h2,
    [class^="box288"] .news_box .news_list .news_no1 .rl h3 {
        position: static !important;
        left: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        color: #fff !important;
    }

    [class^="box288"] .news_box .news_list .news_no1 .rl h3 {
        font-size: 17px !important;
        line-height: 20px !important;
        font-weight: normal !important;
    }

    [class^="box288"] .news_box .news_list .news_no1 .rl h2 {
        font-size: 10px !important;
        line-height: 13px !important;
        color: rgba(255, 255, 255, .78) !important;
    }

    [class^="box288"] .news_box .news_list .news_no1 .news_content {
        float: none !important;
        width: auto !important;
        overflow: hidden;
    }

    [class^="box288"] .news_box .news_list .news_no1 .news_content h1,
    [class^="box288"] .news_box .news_list .news_no1 .news_content h1 a {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    [class^="box288"] .news_box .news_list .news_no1 .news_content p {
        margin-top: 6px !important;
        font-size: 12px !important;
        line-height: 1.6 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 分页 */
    [class^="box288"] .list_btn,
    [class^="box288"] .list_btn .list_no {
        width: auto !important;
        margin-top: 20px !important;
    }

    [class^="box288"] .list_btn .list_no {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 0 4px !important;
    }

    [class^="box288"] .list_btn .list_no dd {
        float: none !important;
        margin-right: 0 !important;
    }

    [class^="box288"] .list_btn .list_no dt,
    [class^="box288"] .list_btn .list_no dd a {
        font-size: 13px !important;
    }

    /* ==========================================================
       10. 图库 / 资质墙：两列网格
       ========================================================== */
    [class*="pro-list"] {
        margin-right: 0 !important;
    }

    [class*="pro-list"] li {
        width: 48% !important;
        margin-right: 2% !important;
        margin-bottom: 2% !important;
    }

    [class*="pro-list"] .pro-img {
        height: auto !important;
        aspect-ratio: 4 / 3;
        overflow: hidden;
    }

    [class*="pro-list"] .pro-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

    [class*="pro-list"] .p-caption {
        padding: 10px 8px !important;
        font-size: 13px !important;
    }

    /* 分页按钮 / 下拉 */
    .page1,
    .page1 .textr {
        text-align: center !important;
    }

    .page1 a {
        font-size: 13px !important;
    }

    /* ==========================================================
       11. 首页右侧栏（交易平台登录 + 咨询热线）
           /m/ 手机版没有登录表单，且电话号码已在底部 Tab 提供；
           这里隐去登录表单，把咨询热线压缩成一条红色 CTA 带。
       ========================================================== */
    #tmf12,
    #tmf13 {
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    .denglu {
        width: 100% !important;
        height: auto !important;
        margin-top: 10px !important;
        box-sizing: border-box !important;
    }

    .denglu-title,
    .denglu-data,
    .phone-margin {
        display: none !important;
    }

    .phone-bg {
        padding: 12px 0 !important;
    }

    /* 原为「左侧图标 + 右侧多行电话」，手机端压成居中一行 */
    .index-phone {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0 14px;
        height: auto !important;
        padding: 0 !important;
        background: none !important;
    }

    .index-phone .phone-title,
    .index-phone .phone-number {
        margin: 0 !important;
        padding: 0 !important;
        text-indent: 0 !important;
        font-size: 14px !important;
        font-weight: normal !important;
        line-height: 1.9 !important;
        color: #fff !important;
    }

    .index-phone .phone-title {
        opacity: .85;
    }

    /* ==========================================================
       12. 页脚：服务条目 /m/ 化 + 底部信息居中
       ========================================================== */
    .fwys,
    .fwys ul {
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

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

    .fwys ul li,
    .fwys ul li.left_item,
    .fwys ul li.right_item {
        width: 100% !important;
        float: none !important;
        margin-bottom: 18px !important;
        padding: 10px 0 !important;
        text-align: left !important;
        border-bottom: 1px solid #f0f0f0;
        overflow: hidden;
    }

    .fwys ul li:last-child {
        border-bottom: 0;
        margin-bottom: 6px !important;
    }

    .fwys ul li h3 {
        font-size: 16px !important;
        color: #333 !important;
        margin-top: 0 !important;
    }

    .fwys ul li p {
        margin-top: 6px !important;
        margin-left: 54px !important;
        margin-right: 0 !important;
        font-size: 12px !important;
        color: #666 !important;
        line-height: 1.6 !important;
    }

    .fwys ul li img,
    .fwys .left_item img,
    .fwys .right_item img {
        float: left !important;
        width: 39px !important;
        height: 39px !important;
        margin: 0 15px 0 0 !important;
        object-fit: contain;
    }

    .fwys .right_item img {
        margin: 0 15px 0 0 !important;
    }

    .c-footer {
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 26px 16px !important;
    }

    .c-footer .container {
        text-align: center;
    }

    .c-footer .items,
    .c-footer .items.address,
    .c-footer .items.tell {
        width: 100% !important;
        float: none !important;
        text-align: center !important;
        font-size: 13px !important;
        line-height: 1.9 !important;
    }

    .c-footer .tell dl {
        padding-left: 0 !important;
        margin-top: 0 !important;
        background: none !important;
    }

    .c-footer .tell dd {
        font-size: 15px !important;
    }

    .c-footer .tell dd span {
        font-size: 15px !important;
    }

    .c-footer .items.address span {
        font-size: 13px !important;
    }

    .c-footer .container img {
        float: none !important;
        width: 110px !important;
        height: 110px !important;
        margin: 14px auto 0 !important;
    }

    /* ==========================================================
       13. 底部固定 Tab 栏 —— 对应 /m/ 的 .bottom-bar-pannel
       ========================================================== */
    .m-tabbar {
        display: flex !important;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 997;
        width: 100%;
        height: 52px;
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-sizing: content-box;
        background: #fff;
        border-top: 1px solid #e3e3e3;
    }

    .m-tabbar__item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 4px;
        font-size: 11px;
        line-height: 1.2;
        color: #666;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .m-tabbar__item.is-current {
        color: #da251c;
    }

    .m-tabbar__icon {
        display: block;
        height: 20px;
        margin-bottom: 3px;
    }

    .m-tabbar__icon svg {
        display: block;
        width: 20px;
        height: 20px;
        fill: currentColor;
    }

    /* ==========================================================
       14. 文章/单页详情：图片、表格、长文本自适应
       ========================================================== */
    .content,
    .nscontent,
    [class^="box166"],
    [class^="box222"] .news_content {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .content img,
    .nscontent img,
    [class^="box166"] img {
        max-width: 100% !important;
        height: auto !important;
    }

    .content table,
    .nscontent table,
    [class^="box166"] table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
        word-break: break-word !important;
    }

    /* 单页（联系我们等）的多列表格：手机上改为竖向堆叠卡片 */
    .nrmk,
    .box15_1 {
        width: auto !important;
        max-width: 100% !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
    }

    .nrmk h1 {
        font-size: 20px !important;
        line-height: 1.4 !important;
        margin: 8px 0 12px !important;
    }

    .box15_1 .n-btitle {
        font-size: 17px !important;
        line-height: 1.5 !important;
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
    }

    .shou_contact,
    .shou_map {
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .shou_contact table,
    .shou_contact table tbody,
    .shou_contact table tr,
    .shou_contact table th,
    .shou_contact table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border: 0 !important;
    }

    .shou_contact table th {
        display: flex !important;
        align-items: center;
        padding: 10px 0 !important;
        text-align: left !important;
        border-bottom: 1px solid #eee !important;
    }

    .shou_contact table tr:last-child th:last-child {
        border-bottom: 0 !important;
    }

    .shou_contact table th img {
        float: none !important;
        flex: 0 0 42px;
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        object-fit: contain;
    }

    .shou_contact table th p {
        float: none !important;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 0 0 12px !important;
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    .shou_contact table th p span {
        display: block;
        color: #999;
        font-size: 12px;
    }

    /* 地图 / 视频等 iframe 自适应 */
    .shou_map iframe,
    .content iframe,
    .nscontent iframe,
    [class^="box166"] iframe {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 260px !important;
    }

    [class^="box166"] .title h1,
    [class^="box166"] .title h2,
    [class^="box166"] h1 {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    /* ==========================================================
       15. 留言 / 反馈表单：PC 端多列并排，手机端一律竖排整行
       ========================================================== */
    [class^="box855"] .from-list {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 12px !important;
        box-sizing: border-box !important;
    }

    [class^="box855"] .from-txt,
    [class^="box855"] .from-OptTxt,
    [class^="box855"] .msg-area,
    [class^="box855"] .code-txt {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }

    [class^="box855"] .msg-area {
        min-height: 120px !important;
    }

    [class^="box855"] .send {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ==========================================================
       16. 全局兜底
       ========================================================== */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    body {
        font-size: 14px !important;
        -webkit-text-size-adjust: 100%;
    }

    /* 手机端不再需要 hover 触发的二级下拉，避免误触遮挡 */
    .box185_-6466 > ul > li > ul,
    .box185_-2028 > ul > li > ul {
        display: none !important;
    }
}