/* ============================================================
   现代化科技化风格增强层 modern.css（叠加在原样式之上，不破坏原结构）
   ============================================================ */

:root{
  --md-accent:#5fbf5f;
  --md-accent2:#2dd4bf;
  --md-grad:linear-gradient(135deg,#5fbf5f 0%,#2dd4bf 100%);
  --md-shadow:0 8px 30px rgba(0,0,0,.12);
  --md-radius:10px;
}

html{scroll-behavior:smooth;}
/* ---------- 字体统一（全站仅 微软雅黑 + Arial 两族） ---------- */
body{
  font-family:"微软雅黑","Microsoft YaHei","PingFang SC",Arial,sans-serif !important;
  font-size:15px;
}
h1,h2,h3,h4,h5,h6,p,a,li,span,div,td,th,dt,dd,label,input,textarea,button,select,em,i,b,strong{
  font-family:inherit !important;
}
::selection{background:rgba(95,191,95,.25);}

/* ---------- 滚动条现代化 ---------- */
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:rgba(0,0,0,.05);}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#5fbf5f,#2dd4bf);border-radius:9px;}
::-webkit-scrollbar-thumb:hover{background:#4daa4d;}

/* ---------- 顶部导航：毛玻璃 + 悬停动效 ---------- */
#header,.contacthead,.headerb{
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:box-shadow .3s ease;
}
.nav ul li a,.nav2 ul li a{
  position:relative;
  transition:color .25s ease;
}
.nav ul li a::after,.nav2 ul li a::after{
  content:"";
  position:absolute;
  left:50%;bottom:2px;
  width:0;height:2px;
  background:var(--md-grad);
  border-radius:2px;
  transform:translateX(-50%);
  transition:width .28s ease;
}
.nav ul li a:hover::after,.nav2 ul li a::after,
.nav ul li a.on::after,.nav2 ul li a.on::after{width:60%;}
.nav ul li a:hover{color:var(--md-accent);}

/* ---------- 表单控件（全局统一，联络页/留言板共用） ---------- */
.gbin,.gbta{
  width:100%;box-sizing:border-box;
  margin-bottom:12px;padding:11px 14px;
  border:1px solid rgba(255,255,255,.2);border-radius:8px;
  background:rgba(0,0,0,.25);color:#eee;font-size:14px;
  transition:border-color .22s ease,box-shadow .22s ease;
}
.gbta{height:110px;resize:vertical;line-height:1.6;}
.gbin::placeholder,.gbta::placeholder{color:rgba(255,255,255,.45);}
.gbcodebox{display:flex;align-items:center;gap:10px;}
.gbcodebox .gbcode{margin-bottom:0 !important;}
.gbcode{width:130px;margin-bottom:12px;flex:none;}
.gbcodebox .codeimg{height:44px;cursor:pointer;border-radius:8px;display:block;}
.gbsub{
  padding:10px 36px;border:0;border-radius:22px;
  background:var(--md-grad);color:#fff;font-size:15px;cursor:pointer;
  box-shadow:0 4px 14px rgba(45,212,191,.35);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.gbsub:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(45,212,191,.5);filter:brightness(1.06);}

/* 留言条目 */
.gbookitem{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:14px 16px;color:#eee;font-size:14px;line-height:1.7;}
.gbookitem b{color:#7fc3ea;margin-right:6px;}
.gbookitem i{display:block;text-align:right;color:#888;font-style:normal;font-size:12px;margin-top:6px;}
.gbookreply{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.15);color:#a8d08d;font-size:13px;}

/* ---------- 按钮：渐变科技感 ---------- */
.bannerbtn a,.gbsub,.contactqqzx a,a.morebtn{
  background:var(--md-grad) !important;
  border:none !important;
  border-radius:24px !important;
  box-shadow:0 4px 14px rgba(45,212,191,.35);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease !important;
}
.bannerbtn a:hover,.gbsub:hover,.contactqqzx a:hover,a.morebtn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(45,212,191,.5);
  filter:brightness(1.06);
}

/* ---------- 卡片：悬浮上浮 + 光影 ---------- */
.worktdlistcon,.newcaselist li,.topvework li,.homenewslist li,
.contactqq,.contactmail,.gbookitem,.gbookform{
  border-radius:var(--md-radius) !important;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.newcaselist li:hover,.topvework li:hover,.homenewslist li:hover{
  transform:translateY(-4px);
  box-shadow:var(--md-shadow);
}
.contactqq,.contactmail{border:1px solid rgba(255,255,255,.14) !important;background:rgba(255,255,255,.05) !important;}
.contactqq:hover,.contactmail:hover{border-color:rgba(95,191,95,.55) !important;box-shadow:0 6px 24px rgba(45,212,191,.22);transform:translateY(-2px);}

/* ---------- 分页胶囊化 ---------- */
#pages{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;}
#pages a,#pages span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 12px;
  border-radius:17px !important;
  font-size:13px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.14);
  color:#ddd !important;
  transition:all .22s ease;
}
#pages a:hover{
  background:var(--md-grad);
  color:#fff !important;
  border-color:transparent;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(45,212,191,.4);
}
#pages a.page-num-current{
  background:var(--md-grad);
  color:#fff !important;
  border-color:transparent;
  font-weight:600;
}
#pages span{background:transparent;border-color:transparent;color:#999 !important;}

/* ---------- 列表标题行：渐变下划线动效 ---------- */
.homenewslist li h2 a,.newcaselist li h2 a{
  transition:color .22s ease;
  background-image:var(--md-grad);
  background-repeat:no-repeat;
  background-size:0 2px;
  background-position:0 100%;
  padding-bottom:3px;
}
.homenewslist li h2 a:hover,.newcaselist li h2 a:hover{
  background-size:100% 2px;
  color:var(--md-accent) !important;
}

/* ---------- 表单控件 ---------- */
.gbin:focus,.gbta:focus,input[type=text]:focus,textarea:focus{
  outline:none !important;
  border-color:var(--md-accent2) !important;
  box-shadow:0 0 0 3px rgba(45,212,191,.18) !important;
}

/* ---------- 图片缩放细节 ---------- */
.newcaselist li img,.topvework li img{transition:transform .4s ease;}
.newcaselist li:hover img,.topvework li:hover img{transform:scale(1.05);}

/* ---------- 全站细节 ---------- */
.pagefooter a{transition:color .2s ease;}
.pagefooter a:hover{color:var(--md-accent2) !important;}
.footnavlink h2 a{transition:color .2s ease,padding-left .2s ease;}
.footnavlink p a{transition:color .2s ease,padding-left .25s ease;}
.footnavlink p a:hover{padding-left:6px;color:var(--md-accent2) !important;}

/* ---------- 移动端菜单重构修复（原 slideDown 对 fixed+100% 高度不可靠） ---------- */
html,body{overflow-x:hidden;}
body.menuopen{overflow:hidden;}
@media screen and (max-width:780px){
  .menulist{
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    position:fixed;z-index:999;top:0;left:0;width:100%;height:100%;
    margin:0;padding:0;
    background:#59b38d url("../images/menulistbg.jpg") no-repeat scroll center center / cover;
    opacity:0;visibility:hidden;
    transition:opacity .3s ease,visibility .3s ease;
  }
  .menulist.open{opacity:1;visibility:visible;}
  .menulistlogo{
    position:absolute;top:36px;left:0;right:0;width:100%;margin:0;
    opacity:0;transition:opacity .4s ease .12s;
  }
  .menulist.open .menulistlogo{opacity:1;}
  .menuclos{
    display:block;position:absolute;left:50%;bottom:26px;
    margin:0;transform:translateX(-50%);
  }
  .menuclos:before{display:none;}
  .menulistcon{position:static;margin:0;width:auto;max-width:96vw;}
  .menulistcon ul{display:flex;flex-wrap:wrap;justify-content:center;margin:0;padding:0;list-style:none;}
  .menulistcon ul li{float:none;}
  .menulistcon ul li a{width:30vw;max-width:150px;box-sizing:border-box;}
  /* 手机端头部更紧凑 */
  .logo img{height:44px;width:auto;}
  .topve a{font-size:16px;}
  /* 手机端内容边距与标题 */
  .servicebannerinfo h1,.caselistbannerinfo h1,.ideabannerinfo h1{font-size:2em !important;}
  .servicebannerinfo h2,.caselistbannerinfo h2,.ideabannerinfo h2{font-size:1.1em !important;}
}

/* ---------- 全站美化弹窗（替代原生 alert） ---------- */
#mdmodal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(8,18,14,.55);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;}
#mdmodal.show{opacity:1;visibility:visible;}
.mdmodal-box{background:#fff;border-radius:14px;padding:34px 38px 26px;text-align:center;max-width:86vw;width:340px;box-shadow:0 20px 60px rgba(0,0,0,.3);transform:translateY(14px) scale(.96);transition:transform .25s ease;}
#mdmodal.show .mdmodal-box{transform:translateY(0) scale(1);}
.mdmodal-ico{width:58px;height:58px;line-height:58px;margin:0 auto 16px;border-radius:50%;font-size:30px;font-weight:700;color:#fff;box-sizing:border-box;}
.mdmodal-ico.ok{background:linear-gradient(135deg,#5fbf5f,#2dd4bf);box-shadow:0 8px 22px rgba(45,212,191,.45);}
.mdmodal-ico.err{background:linear-gradient(135deg,#f0655a,#f0995a);box-shadow:0 8px 22px rgba(240,101,90,.4);}
.mdmodal-text{color:#333;font-size:15px;line-height:1.7;margin-bottom:20px;}
.mdmodal-btn{padding:9px 40px;border:0;border-radius:20px;background:linear-gradient(135deg,#5fbf5f,#2dd4bf);color:#fff;font-size:14px;cursor:pointer;box-shadow:0 4px 14px rgba(45,212,191,.35);transition:filter .2s ease,transform .2s ease;}
.mdmodal-btn:hover{filter:brightness(1.06);transform:translateY(-1px);}