/* ============================================================
   hy0532.com 全站 UI 美化覆盖层 (style-v3.css)
   版本: v3.0
   说明: 在 style-v2.css 之后引入，重点修复图片占位、横幅适配、
         卡片交互与移动端细节。
   ============================================================ */

/* 1. 图片占位与缩略图 */
.zoomimgs,
.artzoomimgs,
.media-img{
  background-color:#eef2f7;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  border-radius:8px;
}

.portfolio-img a{
  padding:0;
  border:0;
  background:none;
  box-shadow:0 2px 8px rgba(31,60,120,.08);
}

.pro-item{
  border-radius:10px;
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease;
}

.pro-item:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 30px rgba(31,60,120,.12);
}

.pro-item h2,
#fh5co-case-list .show-list h2{
  padding:12px 8px 14px;
}

.pro-item h2 a,
#fh5co-case-list .show-list h2 a{
  color:#333;
  line-height:1.55;
  max-height:46px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.pro-item h2 a:hover,
#fh5co-case-list .show-list h2 a:hover{
  color:#317EF3;
}

/* 2. 首页与内页横幅 */
#fh5co-hero .flexslider,
#fh5co-hero .flexslider .slides,
#fh5co-hero .flexslider .slides li{
  overflow:hidden;
  border-radius:0;
}

#fh5co-hero .flexslider .slides img{
  width:100%;
  height:auto;
  max-height:440px;
  object-fit:cover;
  display:block;
}

#carousel-banner,
#carousel-banner .slideshow{
  width:100%;
  overflow:hidden;
}

#carousel-banner .slideshow img,
#carousel-banner img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}

@media (min-width:769px){
  #carousel-banner .slideshow img,
  #carousel-banner img{
    height:340px;
  }
}

/* 3. 内容页排版 */
#fh5co-content_show .show_content{
  background:#fff;
  border-radius:10px;
  box-shadow:0 2px 14px rgba(31,60,120,.06);
  padding:20px 22px 30px;
}

.show_body.detail{
  font-size:16px;
  line-height:1.95;
  color:#3b3b3b;
}

.show_body.detail h2{
  font-size:20px;
  margin:26px 0 12px;
  padding-left:12px;
  border-left:4px solid #317EF3;
  line-height:1.5;
  color:#1e5cc8;
}

.show_body.detail h3{
  font-size:17px;
  margin:22px 0 10px;
  color:#222;
}

.show_body.detail img{
  max-width:100%;
  height:auto;
  border-radius:8px;
}

.show_body.detail p{
  margin:10px 0;
}

/* 4. 左侧栏 */
#fh5co-content_show .lefter h2.left_h{
  background:#fff;
  border-left:4px solid #317EF3;
  padding:10px 14px;
  border-radius:0 8px 8px 0;
  color:#1e5cc8;
}

#fh5co-content_show .lefter .nav li a{
  color:#555;
  font-size:14px;
}

#fh5co-content_show .lefter .nav li a:hover{
  color:#317EF3;
}

.contact-content{
  background:linear-gradient(180deg,#eef4ff 0%,#ffffff 100%);
  border:1px solid #e2ebf9;
  border-radius:10px;
  padding:16px 18px;
  line-height:1.9;
}

/* 5. 分页与标签 */
.pagination li a,
.pagination li span{
  border-radius:6px;
  margin:0 3px;
  padding:6px 12px;
}

.pagination li a:hover{
  background:#317EF3;
  color:#fff;
  border-color:#317EF3;
}

.pager li a{
  display:inline-block;
  padding:8px 18px;
  border:1px solid #dbe4f0;
  border-radius:24px;
  color:#1e5cc8;
  background:#fff;
  transition:all .25s ease;
}

.pager li a:hover{
  background:#317EF3;
  color:#fff;
  border-color:#317EF3;
}

/* 6. 底部与悬浮按钮 */
footer .footer-bot{
  padding-top:46px;
  padding-bottom:38px;
}

.foot-link{
  margin-bottom:16px;
}

footer .foot-link .nav li a{
  font-size:14px;
  color:#fff;
  opacity:.88;
}

.phone{
  position:fixed;
  left:0;
  bottom:0;
  z-index:99999;
  background:linear-gradient(90deg,#1e5cc8 0%,#317EF3 100%);
  text-align:center;
  padding:11px 0;
  box-shadow:0 -4px 16px rgba(31,94,200,.22);
}

.phone a{
  font-size:15px;
  letter-spacing:1px;
  color:#fff !important;
}

.backToTop{
  right:18px;
  bottom:76px;
  border-radius:50%;
  box-shadow:0 4px 12px rgba(31,94,200,.25);
}

/* 7. 移动端微调 */
@media (max-width:768px){
  #fh5co-hero .flexslider .slides img{
    max-height:240px;
  }

  #carousel-banner .slideshow img,
  #carousel-banner img{
    height:200px;
  }

  #fh5co-content_show .show_content{
    padding:14px 14px 22px;
    border-radius:8px;
  }

  .show_body h1{
    font-size:20px;
  }

  .pro-item h2 a{
    font-size:14px;
  }
}


/* 8. 内容表格（GEO 数据维度） */
.show_body.detail table{
  width:100%;
  border-collapse:collapse;
  margin:16px 0 20px;
  font-size:14px;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:8px;
  overflow:hidden;
}

.show_body.detail table th{
  background:#317EF3;
  color:#fff;
  font-weight:600;
  padding:10px 12px;
  text-align:left;
  border:1px solid #2b6fd0;
}

.show_body.detail table td{
  padding:10px 12px;
  border:1px solid #e6e8ee;
  color:#444;
  line-height:1.6;
}

.show_body.detail table tr:nth-child(even) td{
  background:#f7faff;
}

.show_body.detail table tr:hover td{
  background:#eef4ff;
}


/* ============================================================
   v3.1 ????????
   ============================================================ */
:root{
  --primary:#317EF3;
  --primary-dark:#1e5cc8;
  --ink:#1f2733;
  --muted:#5b6b7f;
  --line:#e5eaf2;
  --soft:#f5f7fb;
  --radius:12px;
}

html{ scroll-behavior:smooth; }

body{
  background:var(--soft);
  color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ transition:color .2s ease, background-color .2s ease, opacity .2s ease; }

/* ---------- ????? ---------- */
#fh5co-header{
  background:#fff;
  box-shadow:0 2px 14px rgba(31,60,120,.08);
  position:sticky;
  top:0;
  z-index:1000;
}

#fh5co-header .logo img{
  max-height:56px;
  width:auto;
  display:block;
}

#fh5co-header .header-nav{
  background:linear-gradient(90deg,#0b2f6b 0%,#1e5cc8 55%,#317EF3 100%) !important;
}

#fh5co-header .header-nav .nav-menu > li > a{
  color:#fff !important;
  font-size:15px;
  line-height:46px;
  padding:0 16px;
  position:relative;
  letter-spacing:.2px;
}

#fh5co-header .header-nav .nav-menu > li > a:hover,
#fh5co-header .header-nav .nav-menu > li.current > a{
  background:rgba(255,255,255,.14);
}

#fh5co-header .nav .drop-menu{
  background:#fff;
  border:1px solid var(--line);
  border-radius:0 0 10px 10px;
  box-shadow:0 12px 26px rgba(31,60,120,.14);
  padding:6px 0;
  min-width:150px;
}

#fh5co-header .nav .drop-menu li a{
  color:#34445c;
  padding:9px 18px;
  font-size:14px;
}

#fh5co-header .nav .drop-menu li a:hover{
  background:#eef4ff;
  color:var(--primary);
}

/* ---------- ???? ---------- */
.fh5co-heading h2{
  color:#0b2f6b;
  font-weight:700;
  letter-spacing:.5px;
}

.fh5co-heading{
  margin-bottom:18px;
}

.text-center.fh5co-heading h2{
  position:relative;
  padding-bottom:12px;
  display:inline-block;
}

.text-center.fh5co-heading h2::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:46px;
  height:3px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--primary-dark),var(--primary));
}

/* ---------- ????? ---------- */
.pro-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(31,60,120,.06);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.pro-item:hover{
  transform:translateY(-6px);
  border-color:#c7d8f8;
  box-shadow:0 18px 38px rgba(31,60,120,.14);
}

#fh5co-case-list .show-list > .xm3,
#fh5co-product-list .show-list > .xm3{
  margin-bottom:18px;
}

.article-media li{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:10px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.article-media li:hover{
  transform:translateX(4px);
  border-color:#bfd6ff;
  box-shadow:0 8px 18px rgba(31,60,120,.08);
}

.article-media li a{
  color:#26344a;
  font-size:14.5px;
  line-height:1.6;
}

.article-media li a:hover{
  color:var(--primary);
}

/* ---------- ??? ---------- */
#fh5co-content_show .show_content{
  border:1px solid var(--line);
}

.show_body.detail h1{
  font-size:24px;
  color:#0b2f6b;
  line-height:1.5;
  margin-bottom:14px;
}

.show_body.detail a{
  color:var(--primary-dark);
}

.show_body.detail blockquote{
  margin:16px 0;
  padding:12px 16px;
  background:#f2f7ff;
  border-left:4px solid var(--primary);
  border-radius:0 8px 8px 0;
  color:#40506a;
}

.breadcrumb-nav{
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 12px;
  font-size:13px;
  color:var(--muted);
  margin-bottom:14px;
}

.breadcrumb-nav a{
  color:var(--primary-dark);
}

/* ---------- ?? ---------- */
.btn-info{
  background:linear-gradient(90deg,var(--primary-dark),var(--primary));
  border:0;
  border-radius:24px;
  padding:10px 22px;
  color:#fff !important;
  box-shadow:0 6px 14px rgba(31,94,200,.22);
}

.btn-info:hover{
  box-shadow:0 10px 20px rgba(31,94,200,.3);
  opacity:.94;
}

/* ---------- ?? ---------- */
footer{
  background:linear-gradient(180deg,#0b2f6b 0%,#071f4a 100%);
}

footer .footer-bot{
  padding-top:48px;
  padding-bottom:44px;
}

footer .foot-link .nav li a{
  color:#fff;
  opacity:.92;
  font-size:14px;
  margin:0 8px;
}

footer .foot-link .nav li a:hover{
  opacity:1;
  color:#fff;
}

footer .Copyright{
  color:#c6d3ea;
  font-size:13px;
  line-height:1.9;
}

footer .Copyright a{
  color:#dce7fb;
}

/* ---------- ??????? ---------- */
.phone{
  background:linear-gradient(90deg,#1e5cc8 0%,#317EF3 100%);
  padding:12px 0;
}

.backToTop{
  right:18px;
  bottom:80px;
  width:42px;
  height:42px;
  line-height:42px;
  background:#317EF3;
  color:#fff;
  border-radius:50%;
  box-shadow:0 6px 16px rgba(31,94,200,.28);
}

/* ---------- ??? ---------- */
@media (max-width:768px){
  #fh5co-header .header-nav .nav-menu > li > a{
    line-height:42px;
    padding:0 11px;
    font-size:14px;
  }

  #fh5co-header .logo img{
    max-height:46px;
  }

  .show_body.detail h1{
    font-size:20px;
  }

  .fh5co-heading h2{
    font-size:19px;
  }

  .pro-item h2 a{
    font-size:14px;
  }
}


/* ============================================================
   v3.2 ??Banner / ???? / ??? / ????
   ============================================================ */

/* ---------- ?? Banner ---------- */
#fh5co-hero{ position:relative; }
#fh5co-hero .flexslider .slides li{ position:relative; }
#fh5co-hero .flexslider .slides li::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:45%;
  background:linear-gradient(180deg,rgba(11,47,107,0) 0%,rgba(11,47,107,.42) 100%);
  pointer-events:none;
}
#fh5co-hero .flexslider .slides img{
  width:100%;
  height:440px;
  object-fit:cover;
  display:block;
}
.flexslider .flex-control-nav{ bottom:20px; z-index:3; }
.flexslider .flex-control-nav li a{
  background:#fff;
  box-shadow:0 2px 8px rgba(11,47,107,.25);
  width:10px; height:10px;
}
.flexslider .flex-control-nav li a.flex-active{
  background:#317EF3;
  width:26px;
  border-radius:6px;
}

.index-h1{
  background:#fff;
  border-left:5px solid #317EF3;
  padding:14px 20px;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(31,60,120,.10);
  color:#0b2f6b;
}

/* ---------- ?? Banner ---------- */
#carousel-banner{ position:relative; }
#carousel-banner::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:50%;
  background:linear-gradient(180deg,rgba(11,47,107,0) 0%,rgba(11,47,107,.36) 100%);
  pointer-events:none;
}

/* ---------- ???????? ---------- */
.article-media li{
  position:relative;
  padding:14px 16px 14px 20px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  margin-bottom:10px;
}

.article-media li::before{
  content:"";
  position:absolute;
  left:0; top:14px; bottom:14px;
  width:4px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--primary-dark),var(--primary));
  opacity:.85;
}

.article-media li .float-right{
  background:#eef4ff;
  color:var(--primary-dark);
  border-radius:999px;
  padding:2px 10px;
  font-size:12px;
  line-height:1.6;
}

.article-media li a{
  display:block;
  padding-right:6px;
}

/* ---------- ?????? ---------- */
.product_list_box .pro-item .portfolio-img a{
  height:190px;
  display:block;
}

.product_list_box .pro-item h2{
  min-height:46px;
}

/* ---------- ??? ---------- */
#fh5co-content_show .lefter{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
}

#fh5co-content_show .lefter .nav.submenu li a{
  display:block;
  padding:9px 12px;
  border-radius:8px;
  margin-bottom:4px;
  background:#f6f9ff;
  color:#34445c;
  transition:all .2s ease;
}

#fh5co-content_show .lefter .nav.submenu li a:hover{
  background:#eef4ff;
  color:var(--primary);
  transform:translateX(3px);
}

.lefter .contact-content{
  border-radius:10px;
}

/* ---------- ???? ---------- */
.form-block .form-group .input{
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fbfcfe;
  padding:11px 14px;
  font-size:14px;
  color:var(--ink);
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.form-block .form-group .input:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(49,126,243,.12);
  outline:none;
}

.form-block textarea.input{
  min-height:132px;
  resize:vertical;
}

.form-button .button{
  border:0;
  border-radius:24px;
  padding:10px 26px;
  background:linear-gradient(90deg,var(--primary-dark),var(--primary));
  color:#fff;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(31,94,200,.22);
  transition:opacity .2s ease, box-shadow .2s ease;
}

.form-button .button:hover{
  opacity:.92;
  box-shadow:0 10px 20px rgba(31,94,200,.3);
}

/* ---------- ??? Banner ---------- */
@media (max-width:768px){
  #fh5co-hero .flexslider .slides img{
    height:260px;
  }

  .index-h1{
    font-size:19px;
    padding:12px 16px;
  }
}


/* ============================================================
   v3.3 Header phone alignment fix
   ============================================================ */
#fh5co-header .search-top{
  width:auto !important;
  min-width:260px;
  max-width:100%;
  height:80px;
  float:right;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin:0 !important;
  padding:0;
}

#fh5co-header .search-top span{
  position:static !important;
  top:auto !important;
  left:auto !important;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  font-size:22px;
  line-height:1.2;
  font-weight:700;
  color:#1e5cc8;
  background:#eef4ff;
  border:1px solid #dbe8ff;
  border-radius:999px;
  padding:9px 18px;
  letter-spacing:.3px;
  box-shadow:0 4px 12px rgba(31,94,200,.08);
}

#fh5co-header .header-nav .nav-menu > li > a{
  white-space:nowrap;
}

@media (max-width:768px){
  #fh5co-header .search-top{
    width:100% !important;
    min-width:0;
    height:auto;
    float:none;
    justify-content:center;
    padding:0 0 10px;
  }

  #fh5co-header .search-top span{
    font-size:17px;
    padding:7px 14px;
  }
}


/* ============================================================
   v3.4 Header overlap & nav click fix
   ============================================================ */
#fh5co-header .search-top{
  height:auto !important;
  min-height:0;
  padding:12px 0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:auto !important;
  float:right;
  margin:0 !important;
  overflow:visible;
}

#fh5co-header .search-top span{
  position:static !important;
  top:auto !important;
  left:auto !important;
  display:inline-block !important;
  white-space:nowrap;
  font-size:20px;
  line-height:1.35;
  font-weight:700;
  color:#1e5cc8;
  background:#eef4ff;
  border:1px solid #dbe8ff;
  border-radius:10px;
  padding:8px 16px;
  letter-spacing:.3px;
  box-shadow:none;
}

#fh5co-header .header-nav{
  position:relative;
  z-index:50;
  overflow:visible;
}

#fh5co-header .nav-menu{
  position:relative;
  z-index:60;
}

#fh5co-header .nav-menu > li{
  position:relative;
  z-index:70;
}

#fh5co-header .nav-menu > li > a{
  position:relative;
  z-index:80;
  cursor:pointer;
}

@media (max-width:768px){
  #fh5co-header .search-top{
    width:100% !important;
    padding:6px 0 10px;
  }

  #fh5co-header .search-top span{
    font-size:17px;
    padding:7px 14px;
  }
}

/* ============================================================
   v3.5 Mobile sidebar cleanup
   ============================================================ */
@media (max-width: 768px){
  #fh5co-content_show > .lefter{
    display:none !important;
  }
}

/* v3.8 shared tag cloud grid */
.hy-tag-cloud {
  height: auto;
  overflow: visible;
}
.hy-tag-cloud .tag-grid {
  height: auto;
  overflow: visible;
  padding-bottom: 2px;
}
.hy-tag-cloud .tag-grid > ul {
  position: static;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  height: auto !important;
  margin: 0;
  padding: 0;
}
.hy-tag-cloud .tag-grid > ul > li {
  min-width: 0;
  margin-bottom: 0;
}
.hy-tag-cloud .tag-grid > ul > li .float-right {
  display: none !important;
}
.hy-tag-cloud .tag-grid > ul > li > a {
  display: block;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.5;
}
.hy-tag-cloud .tag-more {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f6f9ff;
  color: var(--primary-dark);
  font-size: 14px;
  line-height: 1.5;
}
.hy-tag-cloud .tag-more:hover {
  border-color: #bfd6ff;
  background: #eef4ff;
  color: var(--primary);
}
@media (max-width: 640px) {
  .hy-tag-cloud .tag-grid > ul {
    grid-template-columns: 1fr;
  }
  .hy-tag-cloud .tag-grid > ul > li:nth-child(n+13) {
    display: none;
  }
}

/* v3.9 navigation dropdown text fix */
#fh5co-header .nav-menu > li.current .drop-menu li a,
#fh5co-header .nav-menu > li.currents .drop-menu li a,
#fh5co-header .nav .drop-menu li a {
  color: #34445c;
  background: transparent;
  padding: 10px 18px;
  line-height: 1.6;
  white-space: nowrap;
}
#fh5co-header .nav-menu > li.current .drop-menu li a:hover,
#fh5co-header .nav-menu > li.currents .drop-menu li a:hover,
#fh5co-header .nav .drop-menu li a:hover {
  color: #317EF3;
  background: #eef4ff;
}
@media (max-width: 768px) {
  #fh5co-header .nav .drop-menu {
    min-width: 168px;
    padding: 5px 0;
  }
  #fh5co-header .nav .drop-menu li a {
    padding: 9px 16px;
    line-height: 1.5;
  }
}