@charset "utf-8";
/* ============================================================================
   内页视觉优化 · inner-beautify.css
   ----------------------------------------------------------------------------
   适用范围：仅链接了本文件的模板（product / newslist / service / quanyuyingxiao）
   不修改 skin/css/style.css —— 未链接本文件的页面（首页 / about / join 等）零影响
   配色沿用站点品牌色：主蓝 #3396fb · 深蓝 #0a6ae0 · 强调橙 #ffb035 · #ff7a00
   与首页美化（index.html 内联样式）保持同一套视觉语言
   ========================================================================== */

/* ===========================================================================
   1. 内页顶部：通栏图 + 页面标题
   =========================================================================== */

/* 通栏图：统一高度，避免原图比例不受控把首屏顶得很高 */
.banner-sub{position:relative;overflow:hidden;line-height:0;background:#0d2137;}
.banner-sub img{display:block;width:100%;height:230px;object-fit:cover;}
/* 栏目没配图时（如「技术经验」），img 为空 src，隐藏后整块自然收起 */
.banner-sub img[src=""]{display:none;}
/* 图片底部向标题带过渡 */
.banner-sub::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;pointer-events:none;
  background:linear-gradient(to top,#eef6ff,rgba(238,246,255,0));}

/* 页面标题：模板里原本是屏幕阅读器隐藏的 H1，这里改成可见标题带
   —— 顺带把「内页顶部很突兀 / 无可见 H1」两个问题一起解决 */
main#main > h1.sr-only{
  position:static!important;width:auto!important;height:auto!important;
  margin:0!important;padding:44px 20px 0!important;overflow:visible!important;
  clip:auto!important;white-space:normal!important;border:0!important;
  font-size:34px;font-weight:700;line-height:1.3;color:#0e2338;letter-spacing:-.5px;text-align:center;
  background:linear-gradient(180deg,#eef6ff,#ffffff);
}
main#main > h1.sr-only::after{content:"";display:block;width:56px;height:4px;margin:20px auto 0;
  border-radius:4px;background:linear-gradient(90deg,#3f9dff,#0a6ae0);}

/* ===========================================================================
   2. 栏目切换（子栏目胶囊 tab）
   =========================================================================== */
.lanmu{border:0;padding:30px 0 32px;text-align:center;background:#fff;}
.lanmu a{display:inline-block;vertical-align:middle;line-height:44px;padding:0 26px;margin:5px 7px;
  font-size:15px;color:#5a6b7d;background:#fff;border:1px solid #e8eff7;border-radius:999px;
  transition:color .25s,background .25s,border-color .25s,box-shadow .25s,transform .25s;}
.lanmu a:hover{color:#0a6ae0;background:#f5f9ff;border-color:#cfe2fb;transform:translateY(-2px);}
.lanmu a.active{color:#fff;border-color:transparent;background:linear-gradient(135deg,#3f9dff,#0a6ae0);
  box-shadow:0 10px 22px rgba(10,106,224,.28);}
/* 没有子栏目时（如「技术经验」）整条不占高度、不留横线 */
.lanmu .container:empty{display:none;}
.lanmu .container:empty + *{margin-top:0;}

/* ===========================================================================
   3. 列表页：图文卡片 + 分页
   =========================================================================== */
.section-sub{padding:52px 0 34px;background:#f5f9ff;}

.list-4 li{margin:0 0 22px;}
.list-4 li a{display:flex;align-items:flex-start;gap:26px;
  margin:0;padding:22px 24px;border:0;border-radius:18px;background:#fff;
  box-shadow:0 6px 22px rgba(15,45,90,.055);
  transition:transform .3s,box-shadow .3s,background .3s;}
.list-4 li a:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(15,45,90,.13);}

.list-4 li .img-center{float:none;width:262px;flex:none;height:168px;overflow:hidden;
  border-radius:12px;background:#f2f5f9;line-height:0;}
.list-4 li .img-center img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s;}
.list-4 li a:hover .img-center img{transform:scale(1.05);}

.list-4 li .text{flex:1;min-width:0;margin:0;}
.list-4 li .text h4{margin:0;font-size:19px;font-weight:600;line-height:1.5;color:#0e2338;
  white-space:normal;overflow:visible;text-overflow:clip;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .25s;}
.list-4 li a:hover .text h4{color:#ff6a00;}
.list-4 li .text p{margin:12px 0 0;height:auto;font-size:14.5px;line-height:1.85;color:#7a8b9d;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* 模板里预留的空 <span>，用伪元素补一颗「阅读全文」按钮，不改结构 */
.list-4 li .text span{display:inline-flex;align-items:center;margin:18px 0 0;font-size:0;line-height:0;color:transparent;}
.list-4 li .text span::after{content:"阅读全文 →";font-size:13px;line-height:1;font-weight:600;color:#2b7fff;
  padding:8px 16px;border-radius:999px;background:#eef5ff;transition:color .25s,background .25s;}
.list-4 li a:hover .text span::after{color:#fff;background:linear-gradient(135deg,#ffb035,#ff7a00);}

/* 分页 */
.pagebar{padding:26px 0 6px;clear:both;}
.pagebar .pagination{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:6px;}
.pagination a{display:inline-block;margin:0;padding:10px 15px;font-size:13px;line-height:1;color:#5a6b7d;
  background:#fff;border:1px solid #e8eff7;border-radius:10px;transition:all .25s;}
.pagination a:hover{color:#0a6ae0;border-color:#3f9dff;background:#f5f9ff;}
.pagination a.page-num-current{color:#fff;font-weight:600;border-color:transparent;
  background:linear-gradient(135deg,#3f9dff,#0a6ae0);box-shadow:0 8px 18px rgba(10,106,224,.3);}
.pagination span{display:inline-block;margin:0;padding:10px 6px;font-size:13px;color:#9aa9ba;background:none;border:0;}

/* ===========================================================================
   4. 图文交替块（product 页的「我们做什么 / 怎么做 …」）
   =========================================================================== */
.prd-item{margin:0;padding:38px 42px;background:#fff;border:1px solid #e9f0f8;border-radius:22px;
  box-shadow:0 10px 30px rgba(15,45,90,.055);}
.prd-item dt{float:left;width:44%;line-height:0;}
.prd-item dt img{width:100%;height:auto;border-radius:16px;box-shadow:0 12px 30px rgba(15,45,90,.10);}
.prd-item dd{margin:0 0 0 50%;padding-top:24px;}
.prd-item dd h4{margin:0 0 18px;font-size:25px;font-weight:600;line-height:1.35;color:#0e2338;}
.prd-item dd h4:after{content:'';display:block;margin-top:18px;width:52px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,#3f9dff,#0a6ae0);}
.prd-item dd p{margin:0;font-size:16px;line-height:1.9;color:#5a6b7d;text-align:justify;}
/* 偶数段（.pr_b）左右互换 */
.pr_b{background-color:#f5f9ff;}
.pr_b .prd-item dt{float:right;}
.pr_b .prd-item dd{margin:0 50% 0 0;}

/* ===========================================================================
   5. 平台 / 客户图标网格（product 页的 12 个 AI 平台）
   =========================================================================== */
.more-adv{margin:0;}
.more-adv li{float:left;width:16.666666%;padding:0 8px;box-sizing:border-box;}
.more-adv li .wrap{margin:20px 0 0;padding:24px 8px 20px;background:#fff;border:1px solid #e9f0f8;
  border-radius:16px;box-shadow:0 6px 20px rgba(15,45,90,.05);
  transition:transform .3s,box-shadow .3s,border-color .3s;}
.more-adv li .wrap:hover{transform:translateY(-6px);border-color:#cfe2fb;box-shadow:0 18px 38px rgba(15,45,90,.13);}
.more-adv li .img-center{height:66px;line-height:66px;}
.more-adv li .img-center img{max-height:58px;width:auto;vertical-align:middle;}
.more-adv li .text{margin:14px 0 0;text-align:center;}
.more-adv li .text h4{margin:0;font-size:16px;font-weight:600;color:#0e2338;}

/* ===========================================================================
   6. 区块标题（与首页同一套）
   =========================================================================== */
.section-title{margin-bottom:52px;font-size:34px;font-weight:700;line-height:1.3;color:#0e2338;
  letter-spacing:-.5px;text-align:center;}
.section-title::after{content:"";display:block;width:56px;height:4px;margin:20px auto 0;border-radius:4px;
  background:linear-gradient(90deg,#3f9dff,#0a6ae0);}
.section-title p{margin:12px 0 0;font-size:16px;font-weight:400;letter-spacing:.5px;color:#8b9aab;}

/* ===========================================================================
   7. 底部留言条（与首页一致：渐变通栏 + 胶囊输入组 + 橙色按钮）
   =========================================================================== */
.free-form{position:relative;overflow:hidden;padding:64px 0;
  background:linear-gradient(120deg,#0a5fd6 0%,#1c86ff 52%,#0a4db3 100%);}
.free-form::before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;
  background:radial-gradient(circle at 12% 18%,rgba(255,255,255,.16),rgba(255,255,255,0) 46%),
             radial-gradient(circle at 88% 84%,rgba(255,255,255,.12),rgba(255,255,255,0) 42%);}
.free-form .container{position:relative;z-index:2;}
.free-form .section-title{color:#fff;margin-bottom:34px;}
.free-form .section-title::after{background:linear-gradient(90deg,#ffd08a,#ff8a00);}
.free-form form{display:inline-flex;align-items:center;width:min(640px,92%);padding:6px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);border-radius:999px;}
.free-form input{flex:1 1 auto;display:block;width:auto;min-width:0;box-sizing:border-box;
  padding:14px 22px;font-size:16px;color:#fff;background:transparent;border:0;border-radius:999px;}
.free-form input::-webkit-input-placeholder{color:rgba(255,255,255,.78);opacity:1;}
.free-form input::placeholder{color:rgba(255,255,255,.78);opacity:1;}
.free-form button{flex:0 0 auto;width:auto;height:auto;padding:14px 32px;font-size:16px;font-weight:600;
  letter-spacing:1px;color:#fff;cursor:pointer;border:0;border-radius:999px;
  background:linear-gradient(135deg,#ffb035,#ff7a00);transition:transform .3s,box-shadow .3s;}
.free-form button:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(255,122,0,.42);}
/* 页面最底部那条（深色） */
.free-form-1{padding:76px 0;background:linear-gradient(120deg,#102a4c 0%,#1b4272 58%,#0c1e34 100%);}

/* ===========================================================================
   8. 页脚微调
   =========================================================================== */
.footer{background:linear-gradient(180deg,#081a38,#061430);}
.footer dt{font-size:17px;letter-spacing:1px;}
.footer dt::after{content:"";display:block;width:28px;height:3px;margin-top:10px;border-radius:3px;
  background:linear-gradient(90deg,#3f9dff,#0a6ae0);}
.footer dd a{transition:color .25s;}
.footer dd a:hover{color:#fff;}
.footer-info .ewm img{border-radius:10px;background:#fff;padding:5px;}
.footer-copy{background-color:rgba(0,0,0,.28);font-size:12.5px;letter-spacing:.3px;}

/* ===========================================================================
   9. 响应式
   =========================================================================== */
@media (max-width:1100px){
  .prd-item{padding:32px 30px;}
  .prd-item dt{width:42%;}
  .prd-item dd{margin-left:48%;}
  .pr_b .prd-item dd{margin:0 48% 0 0;}
  .more-adv li{width:25%;}
}
@media (max-width:900px){
  .banner-sub img{height:180px;}
  main#main > h1.sr-only{padding:32px 16px 0!important;font-size:27px;}
  main#main > h1.sr-only::after{width:46px;height:3px;margin-top:16px;}
  .lanmu{padding:22px 0 24px;}
  .lanmu a{line-height:40px;padding:0 20px;font-size:14px;margin:4px 5px;}
  .section-sub{padding:40px 0 26px;}
  .section-title{margin-bottom:38px;font-size:26px;}
  .section-title p{font-size:14px;}

  /* 列表卡片改为「上图下文」 */
  .list-4 li a{flex-direction:column;gap:0;padding:16px;}
  .list-4 li .img-center{width:100%;height:196px;}
  .list-4 li .text{margin:16px 2px 0;}
  .list-4 li .text h4{font-size:17px;}
  .list-4 li .text p{font-size:14px;-webkit-line-clamp:3;}
  .list-4 li .text span{margin-top:14px;}

  /* 图文交替块上下叠放 */
  .prd-item{padding:26px 22px;}
  .prd-item dt,.pr_b .prd-item dt{float:none!important;width:auto;}
  .prd-item dd,.pr_b .prd-item dd{margin:0!important;padding-top:22px;}
  .prd-item dd h4{font-size:20px;}
  .prd-item dd h4:after{margin-top:14px;width:42px;height:3px;}
  .prd-item dd p{font-size:14.5px;text-align:left;}

  .more-adv li{width:33.333333%;}
  .more-adv li .wrap{padding:18px 6px 16px;}
  .more-adv li .img-center{height:52px;line-height:52px;}
  .more-adv li .img-center img{max-height:46px;}
  .more-adv li .text h4{font-size:14px;}

  .free-form{padding:50px 0;}
  .free-form-1{padding:56px 0;}
  .free-form .section-title{font-size:23px;}
  .footer dl{margin:0 0 0 10px;}
}
@media (max-width:600px){
  .banner-sub img{height:150px;}
  main#main > h1.sr-only{padding:26px 14px 0!important;font-size:22px;letter-spacing:0;}
  main#main > h1.sr-only::after{margin-top:13px;}
  .lanmu a{line-height:36px;padding:0 15px;font-size:13px;margin:4px 4px;}
  .section-title{font-size:22px;margin-bottom:30px;}

  .list-4 li .img-center{height:168px;}
  .list-4 li .text h4{font-size:16px;-webkit-line-clamp:2;}
  .list-4 li .text p{-webkit-line-clamp:2;line-height:1.8;}
  .pagination a{padding:8px 11px;font-size:12px;}
  .pagination .page-link.hidden-sm{display:none;}

  .more-adv li{width:50%;}
  .free-form form{flex-wrap:wrap;width:100%;padding:8px;border-radius:20px;}
  .free-form input{flex:1 1 100%;padding:12px 14px;text-align:center;}
  .free-form button{flex:1 1 100%;margin-top:6px;padding:13px 0;}

  .footer-info{text-align:center;}
  .footer-copy{font-size:12px;}
}