@charset "utf-8";
/* ============================================================
   鸿孚科技官网 响应式覆盖样式
   原则：桌面版(>=1200px)零改动；向下逐级接管布局
   ============================================================ */

/* ---------- 全局防溢出 ---------- */
/* 汉堡按钮基础样式（桌面隐藏，手机端在下方媒体查询中显示） */
#mobileMenuBtn{
  display:none;
  position:absolute; right:15px; top:22px;
  width:38px; height:34px; cursor:pointer; z-index:9999;
  border:1px #ddd solid; border-radius:4px; background:#fff;
}
#mobileMenuBtn span{
  display:block; width:20px; height:2px; background:#0083cb;
  margin:5px auto; border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.headerbox.menu-open #mobileMenuBtn span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.headerbox.menu-open #mobileMenuBtn span:nth-child(2){ opacity:0; }
.headerbox.menu-open #mobileMenuBtn span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media screen and (max-width:1199px){
  img{max-width:100%;height:auto;}
  /* 统一容器流体化 */
  .dingbox span,.headerbox,.ylbox span,.footbox1,.timu,.timu2,.timu3,
  #zzsc,.casebox,.indexbox4,.casetop span,.fenleibox,.caseboxk,.wenzhangbox,
  .xxbox,.biaotibox,.fujian,.neirong,#page_navigation,
  .newstop h1,.newstop h2,.newstop h3,.newstop span,.xxtop span,
  .section,.wangzhanbox1,.wangzhanbox2,.appbox1,.appbox2,.appbox3,
  .aboutbox1,.aboutbox2,.abouttimu,.abouttimu1,.abouttimu2,.gaishubox,
  .hexinbox,.linianbox,.liuchengbox,.lxbox,.lxbox1,.jobbox,.mianfeibox,
  .qubie,.servicesBox,.fufeibox,.jichubox,.guandianbox,.vchat,.vgaishu,
  .p2pbox1,.p2pbox2,.p2ptimu,.p2ptop,.p2pyoushi,.apptimu,.apptimu1,.apptimu2,
  .apptop,.apptopbox,.appchat,.one_fourth_box,.map,.ofb,.miaoshu
  { width:auto; max-width:1140px; margin-left:auto; margin-right:auto; padding-left:15px; padding-right:15px; box-sizing:border-box; }
  /* 内部超宽 UL 收回 */
  #zzsc ul,.casebox ul,.caseboxk ul,.indexbox4 ul,.wenzhangbox ul,.section ul,#zzsck ul{ width:auto !important; }
  .ylbox span h1{ width:auto; float:none; overflow:hidden; }
  .ylbox span h1 a{ width:auto; margin-right:18px; float:left; }
  /* 顶部条与头部 */
  .dingbox span{ max-width:1140px; }
  .menu{ width:auto; max-width:60%; }
  .menu ul li{ margin-left:18px; }
  /* 轮播图等比缩放 */
  .slides,.slideInner,.slideInner a{ height:52vw; max-height:460px; }
  .slideInner .datu1 .img1,.slideInner .datu1 .img2,.slideInner .datu1 .img3,.slideInner .datu1 .img4,
  .slideInner .datu2 .img1,.slideInner .datu2 .img2,.slideInner .datu2 .img3,
  .slideInner .datu3 .img1,.slideInner .datu3 .img2,.slideInner .datu3 .img3{
    width:97%; left:1.5%; margin-left:0;
  }
  .slideInner .datu1 .img1,.slideInner .datu2 .img1,.slideInner .datu3 .img1{ top:15%; }
  .slideInner .datu1 .img2,.slideInner .datu2 .img2,.slideInner .datu3 .img2{ top:28%; }
  .slideInner .datu1 .img3,.slideInner .datu2 .img3,.slideInner .datu3 .img3{ top:44%; }
  .slideInner .datu1 .img4{ top:54%; }
  .navListBox{ left:50%; top:auto; bottom:10px; margin-left:-60px; }
  /* 案例/服务双列 */
  #zzsc ul li,#zzsck ul li{ width:calc(50% - 30px) !important; }
  #zzsc ul li span,#zzsck ul li span{ width:100% !important; }
  .case_li,.case_lik{ width:calc(50% - 30px) !important; }
  .case_li_txt,.case_li_txtk{ width:calc(100% - 20px) !important; }
  .case_li_txt p,.span_mr_txt,.span_font,.span_mr_txtk,.span_fontk{ width:auto !important; }
  /* 新闻/文章列表 */
  .indexbox4 ul li,.wenzhangbox ul li{ width:calc(50% - 30px) !important; }
  .casetop span h1 a{ width:33% !important; }
  .fenleibox ul li{ width:25% !important; }
}

/* ---------- 平板竖屏 / 小屏笔记本 ---------- */
@media screen and (max-width:860px){
  .menu ul li a{ font-size:14px; }
  .casetop span h1 a{ width:50% !important; }
  .fenleibox ul li{ width:33% !important; }
  #zzsc ul li,#zzsck ul li,.case_li,.case_lik,.indexbox4 ul li,.wenzhangbox ul li{ width:100% !important; float:none; margin-right:0; }
  .timu h1,.timu2 h1,.timu3 h1{ font-size:24px; }
  .newstop{ height:auto; padding:60px 0 40px; }
  .footzuo{ width:100%; float:none; }
  .footyou{ width:100%; float:none; margin-top:25px; background-image:none; border-top:1px rgba(255,255,255,.25) solid; padding-top:15px; }
  .footyou h1,.footyou h2,.footyou h3,.footyou h4,.footyou span{ margin-left:0; }
  /* 案例卡片：手机上去掉悬停浮层，直接展示 */
  .case_li,.case_lik{ height:auto !important; padding-bottom:10px; }
  .case_li_txt,.case_li_txtk{ position:static !important; height:auto !important; margin:0 10px 10px !important; }
}

/* ---------- 手机 ---------- */
@media screen and (max-width:767px){
  body{ font-size:14px; line-height:24px; }
  /* 顶部灰条(公司名/二维码)隐藏 */
  .dingbox{ display:none; }
  /* 头部改为块级排列 */
  .headerbox{ padding:12px 15px 0; height:auto; overflow:visible; }
  .headerbox p{ float:none; margin-top:0; }
  .headerbox h1{ float:none; height:auto; line-height:32px; margin:6px 0 0; background-image:none; padding-left:0; }
  /* 汉堡菜单 */
  #mobileMenuBtn{ display:block; }
  .menu{ float:none; width:100%; max-width:100%; height:auto; margin-top:10px; }
  .menu ul{ display:none; height:auto; overflow:visible; padding-bottom:8px; }
  .headerbox.menu-open .menu{ display:block; position:absolute; left:0; right:0; top:100%; background:#fff; z-index:99999; padding:0 15px 12px; box-sizing:border-box; box-shadow:0 8px 16px rgba(0,0,0,.12); border-top:1px #eee solid; height:auto; }
  .headerbox.menu-open .menu ul{ display:block; height:auto; max-height:70vh; overflow:auto; }
  .menu ul li{ float:none; margin-left:0; border-top:1px #eee solid; }
  .menu ul li a{ float:none; display:block; line-height:44px; height:44px; font-size:15px; padding-left:4px; }
  .menu .block{ display:none; }
  /* 轮播：手机端给足高度，避免分层图被裁 */
  .slides,.slideInner,.slideInner a{ height:62vw; min-height:210px; max-height:320px; }
  /* 各区块标题 */
  .timu h1,.timu2 h1,.timu3 h1{ font-size:20px; line-height:28px; }
  .timu h2,.timu2 h2,.timu3 h2{ padding:0 6px; }
  .newstop h1{ font-size:22px; }
  .biaotibox h1{ font-size:18px; line-height:26px; }
  .indexbox4 ul li h1{ font-size:16px; }
  .wenzhangbox ul li h1{ font-size:16px; }
  /* 分类页 */
  .casetop{ height:auto; }
  .casetop span{ margin-top:8px; padding-bottom:8px; height:auto; }
  .casetop span h1 a{ width:50% !important; font-size:14px; line-height:40px; height:40px; }
  .fenleibox ul li{ width:50% !important; }
  .hangye{ float:none; width:auto; margin-left:0; }
  .quanbu,.fenleibox ul{ width:auto !important; float:none; }
  /* 页脚 */
  .ylbox span h1 a{ width:auto; margin-right:14px; }
  .footzuo h1 a{ padding:0 8px 0 0; }
  /* 浮动咨询(悬停型)在触屏无意义，隐藏 */
  .floating_ck{ display:none; }
  /* 二维码案例等小卡片 */
  .appma{ width:auto; }
  #page_navigation{ width:auto !important; }
}

/* ============================================================
   自动生成：全站固定宽度容器的流体化覆盖（由 CSS 静态分析产出）
   ============================================================ */
@media screen and (max-width:1199px){
  .aboutbox1,
  .abouttimu,
  .gaishubox,
  .abouttimu1,
  .youshibox,
  .youshibox ul,
  .abouttimu2,
  .linianbox,
  .linianbox ul,
  .lxbox,
  .lxbox1,
  .map,
  .jobbox,
  .apptopbox,
  .apptimu,
  #zzsck,
  #zzsck ul,
  .apptimu1,
  .guandianbox,
  .apptimu2,
  .appbox3 p,
  .liuchengbox,
  .liuchengbox ul,
  .casetop span,
  .fenleibox,
  .caseboxk,
  .caseboxk ul,
  .dingbox span,
  .headerbox,
  .ylbox span,
  .ylbox span h1,
  .footbox1,
  .timu,
  #zzsc,
  #zzsc ul,
  .timu2,
  .casebox,
  .casebox ul,
  .timu3,
  .indexbox4,
  .indexbox4 ul,
  .newstop h1,
  .newstop h2,
  .newstop h3,
  .newstop span,
  .wenzhangbox,
  .wenzhangbox ul,
  .xxbox,
  .biaotibox,
  .fujian,
  .neirong,
  .xxtop span,
  #page_navigation,
  .nav,
  .wztimu1,
  /* section */ .section,
  .section ul,
  #x_contant,
  #x_contant ul,
  /*增值服务*/ .zengzhi,
  .zengzhi1,
  .weixintop a,
  .weixinbox1,
  .weixintimu,
  .vgaishu,
  .jichubox,
  .qubie,
  .weixinbox3,
  .weixinbox3 ul,
  .button3
  {
    width: auto !important;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
  }
  /* 各页顶部横幅：固定高度改为按图片比例自适应 */
  .wangzhantop,.newstop,.casetop,.xxtop,.p2ptop,.apptop,.abouttop{ height:auto !important; overflow:hidden; }
  .wangzhantop img,.apptop img,.abouttop img,.p2ptop img{ width:100%; height:auto; display:block; }
}

/* ---------- 二级页面卡片栅格（≤860 单列） ---------- */
@media screen and (max-width:860px){
  .section ul li,.section ul li .photo,.section .rsp,.section .text,
  .section .text h3,.section .text a,.miaoshu,.case_lip,
  .one_fourth_box{ width:100% !important; }
  .section ul li{ height:auto !important; margin-right:0; }
  .section ul li .photo img{ width:100%; height:auto; }
  .ofb-text,.ofb-text-top{ left:0; right:0; width:auto; padding:0 15px; }
}

/* ---------- 各页顶部视觉区（手机） ---------- */
@media screen and (max-width:767px){
  /* APP 页：背景图是 1140px 大字设计稿，手机上隐藏，保留深色底 + 内容自适应 */
  .apptop{ background-image:none !important; background-color:#1f2233; height:auto !important; padding:30px 0 35px; }
  .apptopbox span{ width:100% !important; float:none !important; margin-left:0 !important; text-align:center; margin-top:0 !important; }
  .apptopbox span h2{ padding-top:20px; }
  .apptopbox span h4{ margin-top:18px; }
  .apptopbox p{ float:none !important; margin:20px auto 0 !important; text-align:center; }
  .apptopbox p img{ max-width:86%; height:auto; }
  /* 关于我们 */
  .abouttop{ height:auto !important; padding:40px 15px 35px; background-size:cover; background-position:center; }
  .abouttop h1 img{ max-width:100%; height:auto; }
  .abouttop h1{ margin-top:0; }
  /* 网络推广页 */
  .p2ptop{ height:auto !important; }
  .p2ptop a{ width:100% !important; height:auto !important; }
  .p2ptop a img{ width:100%; height:auto; }
  /* 新闻页头部（350px 纯色，压缩高度） */
  .newstop{ padding:40px 0 30px; }
  .newstop h1{ margin-top:0; }
  .newstop span{ margin-top:25px; }
}

/* ---------- 溢出修正 ---------- */
@media screen and (max-width:767px){
  .abouttop,.newstop,.apptop,.p2ptop,.wangzhantop,.casetop,.xxtop{ box-sizing:border-box; max-width:100%; }
  .lxbox1 ul,.lxbox ul{ width:auto !important; }
  .lxbox1 ul li,.lxbox ul li,.lxbox1 ul li span{ width:100% !important; float:none !important; max-width:100%; }
  .map iframe,.map{ max-width:100% !important; }
  iframe{ max-width:100%; }
}

/* ---------- 手机端底部固定拨号栏（唯一 CTA） ---------- */
.m-fixbar{ display:none; }
@media screen and (max-width:767px){
  .m-fixbar{
    display:block;
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:99998;
    height:calc(58px + env(safe-area-inset-bottom, 0px));
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .m-fixbar a.m-call{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%; height:100%;
    background:linear-gradient(135deg,#0a92e8 0%,#0067b0 100%);
    color:#fff;
    font-size:17px;
    font-weight:bold;
    letter-spacing:.5px;
    text-decoration:none;
    box-shadow:0 -3px 14px rgba(0,80,150,.28);
  }
  .m-fixbar a.m-call:before{
    content:"\260E";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px; height:28px;
    margin-right:10px;
    font-size:17px;
    background:rgba(255,255,255,.22);
    border-radius:50%;
    animation:mRing 2.6s ease-in-out infinite;
  }
  @keyframes mRing{
    0%,68%,100%{ transform:rotate(0deg); }
    76%{ transform:rotate(-13deg); }
    84%{ transform:rotate(13deg); }
    92%{ transform:rotate(-6deg); }
  }
  /* 给页面底部留出高度，防止内容被固定栏遮住 */
  body{ padding-bottom:calc(58px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---------- 首页案例卡片：图片与名称卡片等宽对齐（手机+平板） ---------- */
@media screen and (max-width:1023px){
  .casebox ul{ margin:0 !important; padding:0 !important; overflow:visible; }
  .case_li{
    height:auto !important;
    padding:0 !important;
    overflow:hidden;
    border-radius:6px;
  }
  .case_li p{ margin:0 !important; width:100% !important; }
  .case_li img{ display:block; width:100% !important; height:auto !important; max-width:100%; }
  .case_li_txt{
    position:static !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:14px 12px 18px !important;
    box-sizing:border-box;
    background:#fff !important;
  }
  .span_mr_txt,.span_font{
    width:auto !important;
    height:auto !important;
    line-height:1.45 !important;
    padding:0 0 4px !important;
    font-size:15px !important;
    color:#333;
  }
  .span_detail{ width:auto !important; margin:12px 0 0 !important; display:flex; justify-content:center; }
  .span_detail h3{ float:none !important; width:auto !important; display:inline-block !important; margin:0 7px; }
}
@media screen and (max-width:767px){
  .casebox{ padding:0 15px !important; box-sizing:border-box; }
  .casebox ul{ width:100% !important; }
  .case_li{
    width:100% !important;
    float:none !important;
    margin:0 0 18px !important;
    display:block !important;
  }
}

/* ---------- 首页「为什么选择鸿孚」数字区 ---------- */
@media screen and (max-width:1023px){
  .indexbox3 #wrap{ width:100% !important; padding:0 15px !important; margin-top:26px !important; box-sizing:border-box; }
  .indexbox3 .ysbox{
    width:100% !important;
    float:none !important;
    margin:0 0 22px !important;
    display:flex;
    align-items:flex-start;
    overflow:visible;
    box-sizing:border-box;
  }
  .indexbox3 .ysbox h1,
  .indexbox3 h1.jumbo{
    float:none !important;
    width:92px !important;
    height:82px !important;
    flex:0 0 92px;
    line-height:82px !important;
    font-size:25px !important;
    letter-spacing:-1px;
    background-size:100% 100% !important;
    background-repeat:no-repeat;
    border-radius:8px;
    color:#fff;
  }
  .indexbox3 .ysbox dl{ width:auto !important; float:none !important; flex:1; padding-left:14px; }
  .indexbox3 .ysbox dl dt{ font-size:19px !important; padding-top:2px; line-height:1.3; }
  .indexbox3 .ysbox dl dd{ font-size:13px !important; line-height:20px !important; padding-top:6px; }
  .indexbox3 .ysbox{ margin-bottom:14px !important; }
  .indexbox3 .anniu,.indexbox3 .anniuk{ margin-top:22px !important; }
  .indexbox3{ padding-bottom:26px !important; }
}

/* ---------- 品牌案例 / 案例列表页卡片（手机+平板） ---------- */
@media screen and (max-width:1023px){
  .caseboxk{ padding:0 15px !important; box-sizing:border-box; }
  .caseboxk ul{ width:100% !important; margin:0 !important; padding:0 !important; overflow:visible; }
  .case_lip{
    width:100% !important;
    height:auto !important;
    float:none !important;
    margin:0 0 18px !important;
    display:block !important;
    overflow:hidden;
    border-radius:6px;
    background:#fff;
  }
  .case_lip p{ margin:0 !important; width:100% !important; }
  .case_lip p img{
    width:100% !important;
    height:210px !important;
    object-fit:cover;
    object-position:top center;
    display:block;
  }
  .case_li_txtp,.case_li_txtp_hover{
    position:static !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:14px 12px 18px !important;
    box-sizing:border-box;
    background:#fff !important;
  }
  .span_mr_txtp,.span_fontp{
    width:auto !important;
    height:auto !important;
    line-height:1.45 !important;
    padding:0 0 4px !important;
    font-size:15px !important;
    color:#333;
  }
  .case_lip .erweima{ margin-top:12px; }
  .case_lip .erweima img{ width:96px !important; height:96px !important; }
  .case_lip .tishi{ font-size:13px; color:#888; margin-top:4px; }
  .case_lip .appma{
    width:auto !important;
    margin-top:12px !important;
    display:flex;
    justify-content:center;
  }
  .case_lip .appma dl{ float:none !important; margin:0 12px !important; width:auto !important; }
  .case_lip .appma dl dt img{ width:88px !important; height:88px !important; }
  .case_lip .span_detailp{ width:auto !important; margin-top:14px !important; }
  .case_lip .span_detailp h3{ width:auto !important; float:none !important; display:inline-block !important; }
}

/* ---------- 案例分类导航（手机两列，替代高蓝块） ---------- */
@media screen and (max-width:767px){
  .casetop{ height:auto !important; padding:12px 0; }
  .casetop span{
    width:100% !important;
    margin-top:0 !important;
    height:auto !important;
    overflow:hidden;
    padding:0 10px;
    box-sizing:border-box;
  }
  .casetop span h1{
    width:50% !important;
    float:left !important;
    display:block !important;
  }
  .casetop span h1 a{
    width:100% !important;
    height:42px !important;
    line-height:42px !important;
    font-size:14px !important;
    box-sizing:border-box;
  }
}

/* ---------- 案例卡片（网站案例 .case_lik 系列） ---------- */
@media screen and (max-width:1023px){
  .case_lik{
    width:100% !important;
    height:auto !important;
    float:none !important;
    margin:0 0 18px !important;
    display:block !important;
    overflow:hidden;
    border-radius:6px;
    background:#fff;
  }
  .case_lik p{ margin:0 !important; width:100% !important; }
  .case_lik p img{
    width:100% !important;
    height:210px !important;
    object-fit:cover;
    object-position:top center;
    display:block;
  }
  .case_lik p a{ display:block; }
  .case_li_txtk,.case_li_txtk_hover{
    position:static !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:14px 12px 18px !important;
    box-sizing:border-box;
    background:#fff !important;
  }
  .span_mr_txtk,.span_fontk{
    width:auto !important;
    height:auto !important;
    line-height:1.45 !important;
    padding:0 0 4px !important;
    font-size:15px !important;
    color:#333;
  }
  .span_detailk{ width:auto !important; margin:12px 0 0 !important; display:flex; justify-content:center; }
  .span_detailk h3{ width:auto !important; float:none !important; display:inline-block !important; margin:0 7px; }
}