/* ============================================================
   Common.css — 全站公共样式
   包含：CSS 重置、变量、工具类、头部、底部、内页公共、响应式
   ============================================================ */

/* ====== 1. CSS 变量 ====== */
:root {
  /* 主色调 */
  --color-primary: #3369c0;       /* 蓝色主色 */
  --color-primary-hover: #0d2b4e;
  --color-accent: #f33132;        /* 强调红 */
  --color-accent-hover: #e62600;
  --color-yellow: #ffd200;
  --color-dark: #333;
  --color-gray: #666;
  --color-light: #999;
  --color-bg: #f8f8f8;
  --color-border: #eee;
  --color-white: #fff;

  /* 排版 */
  --font-family: "Microsoft YaHei", "微软雅黑", Arial, Helvetica, sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;

  /* 容器 */
  --wrapper-width: 1400px;
}

/* ====== 2. Reset & Base ====== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-dark);
  background: var(--color-white);
  min-width: 320px;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
  -webkit-transition: all .9s ease 0s;
  transition: all .9s ease 0s;
}

a {
  text-decoration: none;
  color: var(--color-dark);
  outline: none;
}

a:hover {
  color: var(--color-primary);
}

ul, ol, li, dl, dt, dd {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

table {
  word-break: break-all;
  font-size: 16px !important;
  line-height: 32px;
  border-collapse: collapse;
}
table tr:nth-child(odd) {
  background: var(--color-border);
}
table td, table th {
  border: 1px solid var(--color-border);
}
table tr:hover, table tr:hover p {
  background: var(--color-primary-hover);
  color: var(--color-white);
}

/* ====== 3. 工具类 ====== */

/* 新统一容器 */
.wrapper {
  width: var(--wrapper-width);
  max-width: 100%;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* 旧容器 — 向后兼容，不改动现有模板 */
.wid14 {
  width: 1400px;
  margin: 0 auto;
}

.wrap {
  width: 1400px;
  margin: 0 auto;
  overflow: hidden;
}

.c {
  clear: both;
}

.dad {
  overflow: hidden;
}
.dad:hover img {
  transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
}

.imgZoom img {
  transition: transform .6s ease;
}
.imgZoom:hover img {
  transform: scale(1.08);
}

/* ====== 4. 头部导航 ====== */
.tou {
  /* 头部容器，如需背景可在此设置 */
}
.logo,
.nav ul,
.tel {
  float: left;
}
.logo img {
  float: right;
  margin-top: 23px;
}
.nav ul {
  width: 48%;
}
.nav div {
  width: 26%;
}
.nav li {
  float: left;
  width: 16.66%;
  text-align: center;
  line-height: 125px;
  font-size: 20px;
}
.nav li.on a {
  color: var(--color-accent);
}
.nav a {
  display: block;
}
.tel {
  background-color: #057d08;
}

/* ====== 5. 底部 ====== */
.mo9 {
  background-color: var(--color-primary);
}
.mo9 .wid14 {
  padding: 110px 0 70px;
}
.mo9 .mo9a div {
  float: left;
  color: var(--color-white);
  width: 18%;
}
.mo9 dt {
  font-size: 20px;
  margin-bottom: 35px;
}
.mo9 dl a {
  font-size: 16px;
  line-height: 35px;
  color: var(--color-white);
}
.callus dl {
  line-height: 35px;
}
.mo9 span {
  font-size: 36px;
  font-weight: bold;
}
.callus {
  width: 40% !important;
}
.mo9b {
  width: 24%;
  float: left;
  color: var(--color-white);
}
.mo9b img {
  display: inline-block;
}
.mo9a {
  width: 76%;
  float: left;
}

/* 版权 */
.bq {
  height: 70px;
  line-height: 70px;
  background-color: var(--color-primary);
  border-top: 1px solid #7196d3;
}
.bq a {
  color: var(--color-white);
}

/* 友情链接 */
.friendlink {
  line-height: 30px;
  padding: 10px 0;
  font-size: 15px;
}

/* 移动端底部固定导航 */
.fdh {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
}
.fdh li {
  float: left;
  width: 33.3%;
  text-align: center;
  background: var(--color-dark);
  line-height: 40px;
}
.fdh li a {
  color: var(--color-white);
}
.red {
  background: var(--color-accent-hover) !important;
}

/* ====== 6. 内页公共 ====== */

/* 内页 banner */
.zw img{width:100%;display:block}

/* 面包屑 */
.mbbg {
  background: #f6f6f6;
  font: 15px/50px "微软雅黑";
  margin-bottom: 50px;
}
.mbbg .mbnav a {
  padding: 0 5px;
}
.shouhou {
  display: none;
  line-height: 50px;
  text-align: center;
}

/* 内页标题 */
h1 {
  text-align: center;
  margin-bottom: 30px;
}

/* 文章/案例内容页 */
.tou h2 {
  font-size: 24px;
  text-align: center;
  font-weight: 600;
  margin: 30px 0 20px 0;
}
.tou h3 {
  background: url(../images/xgt2.png) no-repeat;
  color: var(--color-white);
  padding-left: 25px;
}
.info {
  border-top: 1px solid var(--color-border);
  font: 14px/40px "微软雅黑";
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.daodu {
  padding: 20px 0 20px 98px;
  height: 110px;
  font: 16px/35px "微软雅黑";
  background: url(../images/a16.png) no-repeat 20px center #f3f3f3;
  border-radius: 15px;
  margin-top: 20px;
  box-sizing: border-box;
}
.neirong {
  margin-top: 30px;
}
.neirong p {
  line-height: 35px;
  font-size: 18px;
}
.xiayige {
  margin: 30px 0;
}
.pre { float: left; }
.next { float: right; }

.casenei img {
  margin: 0 auto;
}

/* 新闻列表 */
.Pnew1 {
  text-align: center;
}
.Pnew2 {
  margin-top: 50px;
}
.Pnew2 li {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 16px;
  margin-bottom: 16px;
  -webkit-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
}
.Pnew2 li:hover {
  transform: translateX(15px);
}
.Pnew2 li:hover h4 {
  color: var(--color-primary);
}

.datebox {
  background: #f4f7ff;
  border-radius: 6px;
  float: left;
  text-align: center;
  width: 99px;
  font-size: 42px;
  padding-top: 14px;
}
.datebox p {
  clear: both;
  display: block;
  font-style: normal;
  background: #fff;
  font-size: 16px;
  line-height: 30px;
  margin: 14px 1px 4px 1px;
  border-radius: 6px;
  color: #161616;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.06);
}

.newbody {
  float: right;
  width: 90%;
}
.newbody h4 {
  font-size: 22px;
}
.newbody p {
  font-size: 16px;
  line-height: 26px;
  margin-top: 12px;
  height: 52px;
}

/* 产品/案例列表 */
.lp {
  /* 列表页容器 */
}
.lp1 {
  margin-top: 35px;
}
.pro2 {
  font-size: 26px;
  font-weight: normal;
  background: url(../images/mr.png) no-repeat left center;
  padding-left: 50px;
  color: var(--color-dark);
  text-align: left;
}
.pro3 {
  float: right;
  padding: 5px 10px;
  background: var(--color-accent);
  border-radius: 5px;
  color: var(--color-white);
}
.pro4 {
  float: left;
  width: 23%;
  margin: 0 0.5%;
  padding: 10px 0.5%;
}
.pro4 .dad {
  border-radius: 10px;
}
.pro4 .dad img {
  height: 241px;
  width: 100%;
}
.pro4 span {
  padding-left: 25px;
  background: url(../images/dian.png) no-repeat left center;
  font: 18px/40px "微软雅黑";
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* 案例分类标签 */
.case1 {
  text-align: center;
  margin-bottom: 40px;
}
.caseshow {
  display: inline-block;
  width: 20%;
  margin: 0 30px;
  text-align: center;
  border-radius: 5px;
}
.caseshow span {
  display: block;
  font-size: 20px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  height: 40px;
  line-height: 40px;
}
.caseshow:hover,
.active span {
  background: var(--color-primary);
}
.caseshow:hover span,
.active span {
  color: var(--color-white);
  display: block;
}

/* 关于我们/单页 */
.about {
  padding-bottom: 50px;
  overflow: hidden;
}
.about img,
.neirong img,
.jieshao img {
  max-width: 100% !important;
  height: auto !important;
}
.about table,
.neirong table,
.jieshao table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}
.ab1 p {
  line-height: 35px;
  font-size: 18px;
  text-indent: 2em;
}
.ab3 {
  margin: 30px 0;
}
.ab3a {
  line-height: 50px;
  height: 50px;
  background: var(--color-border);
}
.ab3a h2 {
  background: url(../images/xgt2.png) no-repeat;
  color: var(--color-white);
  padding-left: 25px;
}
.ab3b li {
  padding: 10px 0;
  font: 15px/30px "微软雅黑";
  border-bottom: 1px solid #ddd;
  float: left;
  width: 43%;
  margin: 0 3%;
}
.ab3b a {
  color: #7d7d7d;
}
.ab3b li:hover a {
  color: var(--color-dark);
}
.ab3b span {
  color: #7d7d7d;
  float: right;
}

.xjabout_t{ text-align:center; font-size:2em; margin-bottom:30px;}
.xjabout_n img{width:100%; margin-bottom:40px;}
.xjabout_n2{ display:grid;  grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-bottom:40px;}
.xjabout_n2 li{ border:1px solid #eee; transition:all .9s ease 0s; overflow:hidden;}
.xjabout_n2 li img{ width:100%;}
.xjabout_n2 li:hover{box-shadow: 0 0 10px rgba(0,0,0,0.3);}
.xjabout_n2 li:hover img{transform:scale(1.1, 1.1); transition:all .9s ease 0s;}



/* 产品详情 */
.nei {
  /* 产品详情主体 */
}
.neia,
.neib {
  float: left;
  width: 50%;
}
.neia img {
  border-radius: 5px;
}
.neib h4 {
  font-size: 36px;
  margin-bottom: 25px;
}
.neib1 {
  clear: both;
  line-height: 35px;
  background: url(../images/proleftbg.jpg);
  padding: 10px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--color-border);
  border-radius: 10px;
}
.neib1 p {
  padding-left: 30px;
  font-size: 16px;
}
.neib1 span {
  color: red !important;
}
.coushu {
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2) inset;
  padding: 10px 0;
  border-radius: 10px;
}
.neib2 {
  /* 联系区域 */
}
.xiaoren {
  background: url(../images/kf.png) no-repeat left center;
  line-height: 60px;
  padding-left: 60px;
  font-size: 20px;
}
.xiaoren span {
  font-weight: bold;
  font-size: 35px;
  margin: 0 5px;
}
.dhua {
  margin-top: 25px;
}
.dhua a {
  background-image: linear-gradient(90deg, #f05c05 30%, #f39c04 50%, #f05c05);
  background-size: 200% 100%;
  transition: background-position .6s ease;
  display: block;
  width: 212px;
  font-size: 20px;
  color: var(--color-white);
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: red;
  border-radius: 5px;
  margin-left: 5px;
  margin-top: 25px;
}
.dhua a:hover {
  background-position: right center;
}
.rexian {
  font-size: 25px;
  font-weight: bold;
  margin-top: 25px;
}

/* 产品详情 — 标签切换 */
.si li {
  float: left;
  width: 20%;
  margin: 0 2.4%;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  line-height: 40px;
  text-align: center;
}
.si a {
  display: block;
  border-radius: 10px;
  background: var(--color-primary-hover);
  color: var(--color-white);
}
.si a:hover {
  background: var(--color-accent);
  color: var(--color-white);
}

/* 产品详情 — 介绍区域 */
.jieshao {
  margin: 50px 0;
}
.jieshao > div {
  margin-bottom: 30px;
}
.jieshao h2 {
  margin: 10px 0;
}
.jieshao p {
  line-height: 35px;
  font-size: 18px;
}
.jieshao img {
  display: inline;
  width: 60%;
}

.xialeft {
  margin-top: 50px;
  padding-top: 50px;
  border-top: 1px solid var(--color-border);
}

/* 产品详情 — 相关产品 / 案例 */
.xg {
  border: 1px solid var(--color-border);
  margin-bottom: 15px;
}
.xg .tou {
  line-height: 50px;
  height: 50px;
  background: url(../images/proleftbg.jpg);
}
.xg li p {
  padding-left: 25px;
  background: url(../images/dian.png) no-repeat left center;
  line-height: 39px;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xgpro {
  margin-top: 35px;
}
.xgpro li {
  float: left;
  width: 23%;
  margin: 0 0.5%;
  padding: 10px 0.5%;
}
.rigimg {
  border-radius: 10px;
}

/* 联系我们 */
.lxt {
  /* 联系页头部 */
}
.lxLeft {
  padding-top: 80px;
}
.lxLeft,
.lxRig {
  float: left;
  width: 48%;
  line-height: 32px;
}
.lxRig img {
  float: right;
}
.lxlx {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--color-border);
}
.lxlx a {
  padding: 1px 15px;
  display: inline-block;
  background: #0860c9;
  color: var(--color-white);
  border-radius: 5px;
  margin: 20px 0;
}
.map0 h1,
.map1 {
  text-align: center;
}

/* 留言表单（首页和内页共用） */
.ly p {
  color: #3369bf;
  font-size: 28px;
  margin-bottom: 15px;
  font-weight: bold;
}
.ly textarea {
  width: 100%;
  height: 160px;
  border: 0;
  padding: 0 10px;
  font: 16px/53px "微软雅黑";
}
.lyk {
  width: 100%;
  float: left;
  margin: 0 0.2% 5px;
  border: 1px solid #adadad;
}
.lyk input {
  border: 0;
  font: 16px/53px "微软雅黑";
  display: block;
  padding: 0 10px;
  width: 100%;
  background: transparent;
  color: var(--color-dark);
  box-sizing: border-box;
}
.lyk1 {
  height: 160px;
}
.btn1 {
  border: 1px solid var(--color-white);
  height: 45px;
  line-height: 45px;
  width: 100%;
  background: #f13637;
  color: var(--color-white);
  margin-top: 20px;
  cursor: pointer;
}

/* 分页 */
.page {
  line-height: normal;
  font-size: 14px;
  margin: 20px 0;
}
.page span,
.page a {
  font-weight: normal;
  text-decoration: none;
  float: left;
  display: block;
  margin: 0 2px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  color: var(--color-dark);
}
.page a {
  border: 1px solid #ccc;
  padding: 0 10px;
}
.page input {
  color: #04316e;
  border: 0;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  padding: 0 5px;
  width: 38px;
  height: 38px;
  line-height: 38px;
}

/* 新闻详情内页 */
.art {
  background: var(--color-border);
  padding: 45px 0 40px 0;
}
.art:nth-child(2n) {
  background: var(--color-white);
}

/* 分页条 */
.case2 span {
  display: block;
}


/* ====== 7. 响应式 ====== */

/* 1400px 以下 */
@media screen and (max-width: 1400px) {
  .wid14 {
    width: 90%;
    margin: 0 auto;
  }
}

/* 1200px 以下 */
@media screen and (max-width: 1200px) {
  .tel {
    display: none;
  }
  .nav ul {
    width: 74%;
  }
  .si li {
    margin: 0 2.0%;
  }
  
  .xjabout_n2{ grid-template-columns: repeat(4, 1fr);}
}

/* 1000px 以下 */
@media screen and (max-width: 1000px) {
  .neia,
  .neib {
    width: 100%;
    margin-top: 30px;
    text-align: center;
  }
  .neia img {
    margin: 0 auto;
  }
  .mo9a {
    width: 100%;
  }
  .gy,
  .cpzs,
  .news {
    display: none;
  }
  .callus {
    width: 100% !important;
    margin: 0 auto;
    text-align: center;
  }
  .mo9b {
    width: 100%;
    text-align: center;
  }
  .mo9b img {
    margin: 0 auto;
  }
  .ab3b li {
    width: 94%;
  }
  .lxRig {
    display: none;
  }
  .lxLeft {
    width: 100%;
  }
  .newbody {
    width: 85%;
  }
  /* 兼容旧首页样式在新模板未加载时的兜底 */
  .mbbg {
    background: #0d2b4e !important;
  }
  .shouhou {
    background: #0d2b4e;
    display: block !important;
    color: #fff;
    border-radius: 0 0 30px 30px;
  }
  .mbnav {
    color: #fff;
    border-bottom: 1px solid #fff;
    text-align: center;
  }
  .mbnav a {
    color: #fff;
  }
  .xjabout_n2{ grid-template-columns: repeat(3, 1fr);}
}

/* 800px 以下 */
@media screen and (max-width: 800px) {
  .zw {
    display: none;
  }
  .bq1 {
    display: none;
  }
  .nav ul {
    width: 100%;
  }
  .logo {
    width: 100% !important;
    text-align: center;
  }
  .logo img {
    float: none;
    margin: 0 auto;
  }
  .nav li {
    line-height: 50px;
    margin-left: -2px;
    border: 1px solid #eee;
  }
  .newbody {
    width: 80%;
  }
  .newbody p {
    height: auto;
  }
  .xgpro li,
  .pro4 {
    width: 48%;
  }
}

/* 600px 以下 */
@media screen and (max-width: 600px) {
  .nav li {
    width: 33.3%;
    background-color: #0d2b4e;
    color: #fff;
  }
  .nav li a {
    color: #fff;
  }
  .xialeft {
    margin-top: 25px;
    padding-top: 25px;
  }
  .dhua a {
    margin: 0 auto;
  }
  .rexian {
    font-size: 16px;
  }
  .xiaoren {
    display: none;
  }
  .caseshow {
    width: 40%;
    margin: 0 5%;
  }
  .datebox {
    display: none;
  }
  .newbody {
    width: 100%;
  }
  .newbody h4 {
    background: url(../images/dian.png) no-repeat left center;
    padding-left: 20px;
  }
  .newbody p {
    height: 52px;
    overflow: hidden;
    text-indent: 2em;
  }
}

/* 500px 以下 */
@media screen and (max-width: 500px) {
  .daodu {
    display: none;
  }
  .mo9 .wid14 {
    padding: 35px 0;
  }
  .mo9 span {
    font-size: 16px;
  }
  .bq3 {
    display: none;
  }
  .neib1 p {
    padding: 0;
  }
  .pro3 {
    display: none;
  }
  .xjabout_n2{ grid-template-columns: repeat(2, 1fr);}
}

/* 400px 以下 */
@media screen and (max-width: 400px) {
  .si li {
    width: 45%;
    margin-top: 20px;
  }
}

/* 移动端底部间距 */
@media screen and (max-width: 780px) {
  .bq {
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 780px) {
  .fdh {
    display: none;
  }
}

.pro-detail{padding:40px 0 60px}
.pro-top{display:flex;gap:40px;margin-bottom:40px}
.pro-gallery{flex:0 0 48%;min-width:0}
.pro-main-img{display:none;border-radius:10px;overflow:hidden;background:#f5f7fa}
.pro-main-img.show{display:block}
.pro-main-img img{width:100%;display:block}
.pro-gallery-swiper{border-radius:10px;overflow:hidden;background:#f5f7fa}
.pro-gallery-swiper .swiper-slide{aspect-ratio:3/2}
.pro-gallery-swiper .swiper-slide img{width:100%;height:100%;object-fit:cover;display:block}
.pro-gallery-swiper .swiper-pagination{bottom:12px}
.pro-gallery-swiper .swiper-pagination-bullet{width:10px;height:10px;background:rgba(255,255,255,.7);opacity:1;margin:0 5px;transition:all .3s}
.pro-gallery-swiper .swiper-pagination-bullet-active{width:28px;border-radius:5px;background:#f47920}
.pro-gallery-swiper .swiper-button-prev,.pro-gallery-swiper .swiper-button-next{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.85);color:#333;transition:all .3s}
.pro-gallery-swiper .swiper-button-prev:hover,.pro-gallery-swiper .swiper-button-next:hover{background:#f47920;color:#fff}
.pro-gallery-swiper .swiper-button-prev::after,.pro-gallery-swiper .swiper-button-next::after{font-size:14px;font-weight:bold}
.pro-gallery-swiper .swiper-button-prev{left:8px}
.pro-gallery-swiper .swiper-button-next{right:8px}
.pro-info{flex:1}
.pro-info h1{font-size:30px;color:#222;font-weight:bold;text-align:left;margin-bottom:20px;line-height:1.3}
.pro-params{background:url(../images/proleftbg.jpg);border-radius:10px;padding:14px 18px;box-shadow:inset 0 2px 8px rgba(0,0,0,.06);margin-bottom:20px}
.pro-params p{display:flex;padding:8px 0;font-size:15px;color:#333;border-bottom:1px dashed rgba(0,0,0,.08)}
.pro-params p:last-child{border-bottom:0}
.pro-params p em{flex:0 0 80px;font-weight:bold;color:#555;font-style:normal}
.pro-params p span{flex:1;color:#153791;font-weight:bold}
.pro-cta-wrap{padding-top:4px}
.pro-cta-quote{font-size:18px;color:#555;line-height:1.6;margin-bottom:16px}
.pro-cta-quote span{color:#f47920;font-size:28px;font-weight:bold;vertical-align:-2px;margin:0 3px}
.pro-cta-tel{display:inline-block;padding:13px 42px;background:linear-gradient(90deg,#f05c05 30%,#f39c04 50%,#f05c05);background-size:200% 100%;color:#fff;font-size:18px;font-weight:bold;border-radius:30px;transition:background-position .5s}
.pro-cta-tel:hover{background-position:right center;color:#fff}
.pro-cta-hotline{font-size:16px;color:#555;margin-top:14px}
.pro-cta-hotline span{color:#f47920;font-size:20px;font-weight:bold}

.pro-section{margin-bottom:40px}
.pro-section h2{font-size:22px;color:#222;font-weight:bold;padding-bottom:14px;border-bottom:2px solid #153791;margin-bottom:20px}
.pro-body{font-size:15px;line-height:30px;color:#555}
.pro-body img{max-width:100%;height:auto;border-radius:6px;margin:10px 0}
.pro-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pro-table-wrap table{min-width:700px;border-collapse:collapse}
.pro-table-wrap table td,.pro-table-wrap table th{border:1px solid #ddd;padding:10px 14px;font-size:14px}
.pro-table-wrap table th{background:#f5f7fa;font-weight:bold;color:#333;white-space:nowrap}
.pro-table-wrap table tr:nth-child(even){background:#fafbfc}

.pro-pager{display:flex;justify-content:space-between;padding:20px 0;border-top:1px solid #eee;border-bottom:1px solid #eee;margin:40px 0;font-size:14px;color:#999}
.pro-pager a{color:#666}
.pro-pager a:hover{color:#153791}

.contact-page{padding:40px 15px 60px}
.contact-page h1{text-align:center;font-size:30px;color:#222;margin-bottom:40px}
.contact-row{display:flex;gap:40px}
.contact-info-card{flex:0 0 420px;background:#f9fafb;border-radius:12px;padding:30px}
.cic-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid #eee}
.cic-item:first-child{padding-top:0}
.cic-item i{font-size:20px;color:#f47920;flex-shrink:0;width:24px;text-align:center;margin-top:3px}
.cic-text strong{display:block;font-size:13px;color:#999;font-weight:normal;margin-bottom:2px}
.cic-text p{font-size:16px;color:#333}
.cic-cta{padding-top:20px}
.cic-cta p{font-size:14px;color:#888;margin-bottom:18px;line-height:24px}
.cic-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border-radius:6px;font-size:15px;background:#f47920;color:#fff;margin-right:10px;margin-bottom:8px}
.cic-btn:hover{color:#fff;opacity:.9}
.cic-btn-tel{background:#153791}
.contact-map{flex:1;min-height:500px;border-radius:12px;overflow:hidden;background:#f5f7fa}

@media screen and (max-width:900px){
  .contact-row{flex-direction:column}
  .contact-info-card{flex:auto}
  .contact-map{min-height:400px}
}
.pro-related h2{font-size:22px;color:#222;font-weight:bold;margin-bottom:24px}
.pro-rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pro-rel-card{display:block;background:#fff;border-radius:10px;overflow:hidden;border:1px solid #eee;transition:transform .3s,box-shadow .3s}
.pro-rel-card:hover{transform:translateY(-4px);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.pro-rel-img{display:block;aspect-ratio:4/3;overflow:hidden}
.pro-rel-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pro-rel-card:hover .pro-rel-img img{transform:scale(1.06)}
.pro-rel-name{display:block;text-align:center;padding:14px 12px;font-size:15px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media screen and (max-width:1000px){
  .pro-top{flex-direction:column;gap:24px}
  .pro-gallery{flex:auto}
  .pro-rel-grid{grid-template-columns:repeat(2,1fr)}
}
@media screen and (max-width:768px){
  .pro-info h1{font-size:20px}
  .pro-cta-tel{display:block;text-align:center}
  .pro-rel-grid{grid-template-columns:repeat(2,1fr);gap:10px}
}
/* ====== 变量（首页专属） ====== */
:root {
  --nav-blue: #0d2b4e;        /* 导航深蓝 */
  --accent-orange: #f47920;   /* 强调橙 */
  --text-dark: #444;
  --text-gray: #777;
}

/* ====== 头部 — 上层白底通栏 ====== */
.header-top {
  background: #fff;
  padding: 18px 0;
  border-bottom: 1px solid #eee;
}

.header-top .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 左侧 LOGO + 口号 */
.ht-left {
  display: flex;
  align-items: center;
  gap: 28px;
}
.ht-left .logo-link {
  display: block;
  flex: 0 0 auto;
}
.ht-left img {
  max-height: 68px;
  width: auto;
}

/* 口号文字 */
.ht-slogan {
  flex: 0 0 auto;
}
.ht-slogan1 {
  font-family: "SimHei", "黑体", "Microsoft YaHei", sans-serif;
  font-size: 19px;
  color: #444;
  line-height: 1.5;
  letter-spacing: 1px;
}
.ht-slogan1 .ht-accent {
  color: #f47920;
  font-weight: bold;
}
.ht-slogan2 {
  font-family: "SimHei", "黑体", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* 右侧热线 */
.ht-right {
  flex: 0 0 auto;
  text-align: right;
  margin-left: auto;
}
.ht-hotline {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.ht-hotlabel {
  font-family: "SimHei", "黑体", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  color: #888;
}
.ht-hotnum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "SimHei", "黑体", "Microsoft YaHei", sans-serif;
  font-size: 22px;
  color: #0d2b4e;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.ht-hotnum i {
  color: #f47920;
  font-size: 20px;
}

/* ====== 头部 — 下层深蓝导航栏 ====== */
.header-nav {
  background: #0d2b4e;
}

.header-nav .wrapper {
  /* wrapper 已定义在 common.css */
}

.hn-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.hn-list > li {
  flex: 1;
  text-align: center;
  position: relative;
}

.hn-list > li > a {
  display: block;
  padding: 0 12px;
  height: 58px;
  line-height: 58px;
  font-family: "SimHei", "黑体", "Microsoft YaHei", sans-serif;
  font-size: 17px;
  color: #fff;
  letter-spacing: 1px;
  white-space: nowrap;
  position: relative;
}
.hn-list > li > a::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: #fff;
  transition: width .25s ease;
}
.hn-list > li > a i {
  font-size: 10px;
  margin-left: 5px;
  vertical-align: middle;
}
.hn-list > li:hover > a::after,
.hn-list > li.active > a::after {
  width: 30px;
}

/* 下拉子菜单 */
.hn-sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 130px;
  background: #fff;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  z-index: 100;
  padding: 6px 0;
}
.hn-list > li:hover .hn-sub {
  display: block;
}
.hn-sub li a {
  display: block;
  padding: 10px 22px;
  font-size: 15px;
  color: #333;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.hn-sub li a:hover {
  color: #153791;
  background: #f5f7fa;
}

/* ====== 响应式 — 头部 ====== */

/* 平板及以下 */
@media screen and (max-width: 1000px) {
  .ht-slogan {
    display: none;
  }
  .hn-list > li > a {
    font-size: 15px;
    height: 48px;
    line-height: 48px;
    padding: 0 8px;
  }
}

/* 手机端 */
@media screen and (max-width: 768px) {
  .header-top {
    padding: 12px 0;
  }
  .ht-left {
    max-width: 140px;
  }
  .ht-left img {
    max-height: 48px;
  }
  .ht-hotlabel {
    font-size: 12px;
  }
  .ht-hotnum {
    font-size: 17px;
  }
  .hn-list {
    flex-wrap: wrap;
  }
  .hn-list > li {
    flex: 0 0 33.333%;
  }
  .hn-list > li > a {
    font-size: 14px;
    height: 42px;
    line-height: 42px;
    border: 1px solid rgba(255,255,255,.12);
  }
  .hn-sub {
    display: none !important;
  }
}

@media screen and (max-width: 480px) {
  .ht-right {
    display: none;
  }
  .ht-left {
    max-width: 120px;
    margin: 0 auto;
  }
  .hn-list > li {
    flex: 0 0 50%;
  }
}
/* ====== 底部 ====== */
.footer {
  background: #1a1f2b;
  color: rgba(255,255,255,.7);
}

.footer-main {
  padding: 70px 0 50px;
}

/* 4列网格 */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.3fr 1.2fr;
  gap: 50px;
}

.footer-title {
  font-family: "SimHei", "黑体", "Microsoft YaHei", sans-serif;
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 22px;
}

/* 公司简介列 */
.footer-desc {
  font-size: 14px;
  line-height: 26px;
  margin-bottom: 20px;
}

.footer-social {
  display: flex;
  gap: 12px;
}
.fs-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 18px;
  transition: background .3s ease;
  cursor: pointer;
  text-decoration: none;
}
.fs-icon:hover {
  background: #f47920;
  color: #fff;
}

/* 二维码弹出 */
.fs-qr-trigger {
  position: relative;
}
.fs-qr-popup {
  display: none;
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
  padding: 8px 8px 10px;
  z-index: 99;
}
.fs-qr-popup::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}
.fs-qr-popup img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}
.fs-qr-label {
  display: block;
  text-align: center;
  font-size: 12px;
  color: #666;
  margin-top: 6px;
  line-height: 1.4;
}
.fs-qr-trigger:hover .fs-qr-popup {
  display: block;
}

/* 导航列 */
.footer-nav ul li a {
  font-size: 14px;
  line-height: 34px;
  color: rgba(255,255,255,.7);
  transition: color .3s ease;
}
.footer-nav ul li a:hover {
  color: #f47920;
}

/* 联系列 */
.footer-contact ul li {
  font-size: 14px;
  line-height: 34px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.footer-contact ul li i {
  color: #f47920;
  font-size: 14px;
  margin-top: 10px;
  width: 16px;
  flex-shrink: 0;
}
.footer-contact ul li a {
  color: rgba(255,255,255,.7);
}
.footer-contact ul li a:hover {
  color: #f47920;
}

/* 新闻列 */
.footer-news ul li a {
  font-size: 14px;
  line-height: 34px;
  color: rgba(255,255,255,.7);
  transition: color .3s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.footer-news ul li a:hover {
  color: #f47920;
}

/* 版权栏 */
.footer-bar {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 18px 0;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.4);
}
.footer-bar a {
  color: rgba(255,255,255,.4);
}
.footer-bar a:hover {
  color: #fff;
}

/* 响应式 */
@media screen and (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 30px;
  }
  .footer-main {
    padding: 50px 0 30px;
  }
}
@media screen and (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-main {
    padding: 40px 0 20px;
  }
  .footer-title {
    margin-bottom: 14px;
    font-size: 16px;
  }
}

/* ====== 侧边悬浮栏 ====== */
.side-bar {
  position: fixed;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.side-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #fff;
  color: #555;
  font-size: 12px;
  text-decoration: none;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  position: relative;
  transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  gap: 2px;
}
.side-item i {
  font-size: 20px;
}
.side-label {
  font-size: 10px;
  line-height: 1;
}
.side-item:hover {
  background: #153791;
  color: #fff;
  transform: translateX(-4px);
  box-shadow: 0 4px 20px rgba(21,55,145,.3);
}
.side-item:hover i {
  transform: scale(1.15);
}

/* 电话/邮箱 hover 弹出 */
.side-popup {
  display: none;
  position: absolute;
  right: 64px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: #153791;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: .5px;
  box-shadow: 0 4px 16px rgba(21,55,145,.25);
}
.side-popup::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid #153791;
}
.side-hover:hover .side-popup {
  display: block;
}

/* 微信二维码弹出 */
.side-qr {
  cursor: pointer;
}
.side-qr-popup {
  display: none;
  position: absolute;
  right: 64px;
  top: 50%;
  transform: translateY(-50%);
  width: 136px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.15);
  padding: 8px;
}
.side-qr-popup::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid #fff;
}
.side-qr-popup img {
  width: 100%;
  display: block;
  border-radius: 6px;
}
.side-qr:hover .side-qr-popup {
  display: block;
}

/* 移动端隐藏 */
@media screen and (max-width: 768px) {
  .side-bar {
    display: none;
  }
}