/* ===== 恒鼎 VI 真实色板（2026-09-07 鑫哥提供）=====

  标准色（logo 主色）：
    品牌红   CMYK 0/100/100/15   → #D90000
    品牌黑   CMYK 20/0/0/100     → #000000

  背景色（页面/区块底色）：
    主背景    白                  → #FFFFFF
    深色块    黑                  → #000000

  辅助色：
    浅灰      CMYK 0/0/0/30       → #B3B3B3
    深灰      CMYK 0/0/0/60       → #666666
    暖橙      CMYK 0/50/100/0     → #FF8000
    深蓝灰    CMYK 60/45/45/30    → #476262
    专色金    PANTONE 874C        → #8E6327（RGB 近似；印刷烫金工艺）
    专色银    PANTONE 877C        → #9C9C9C（RGB 近似；印刷烫银工艺）

  注：PANTONE 874C/877C 是印刷专色（金属），
  屏幕上无"真金属感"，logo 实际渲染用红色或黑色。
=========================================================== */


:root{
  /* === 标准色（logo 主色，导航/主按钮/标题强调）=== */
  --hz-brand:        #D90000;     /* 品牌红 */
  --hz-brand-dark:   #B30000;     /* 红色 hover/激活 */
  --hz-brand-2:      #000000;     /* 品牌黑（标题/文字） */

  /* === 背景色 === */
  --hz-bg:           #FFFFFF;     /* 页面主背景 */
  --hz-bg-dark:      #000000;     /* 深色块（hero / 页脚底） */
  --hz-bg-soft:      #F7F7F7;     /* 浅块/分隔条 */

  /* === 辅助色 === */
  --hz-gray-30:      #B3B3B3;     /* 浅灰（K30）*/
  --hz-gray-60:      #666666;     /* 深灰（K60）*/
  --hz-orange:       #FF8000;     /* 暖橙（强调/标签） */
  --hz-bluegray:     #476262;     /* 深蓝灰（行业冷调平衡） */
  --hz-gold:         #8E6327;     /* PANTONE 874C 金，RGB 近似 */
  --hz-silver:       #9C9C9C;     /* PANTONE 877C 银，RGB 近似 */

  /* === 文本 / 边框 === */
  --hz-text:         #1a1a1a;     /* 主文本（近黑，比纯黑柔和） */
  --hz-text-muted:   #666666;     /* 次要文本（= hz-gray-60） */
  --hz-text-inverse: #FFFFFF;     /* 深底反白文字 */
  --hz-link:         var(--hz-brand);
  --hz-link-hover:   var(--hz-brand-dark);
  --hz-border:       #e5e5e5;
  --hz-divider:      #B3B3B3;     /* = hz-gray-30 */

  /* === 布局 === */
  --hz-maxw:         1200px;
}

/* ===== 基础重置 ===== */
*,*::before,*::after{ box-sizing:border-box; }
img{ max-width:100%; height:auto; }
body{
  color:var(--hz-text);
  background:var(--hz-bg);
  font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  line-height:1.7;
}
a{ color:var(--hz-link); text-decoration:none; transition:color .15s; }
a:hover, a:focus{ color:var(--hz-link-hover); }

/* ===== 品牌色应用示例（阶段 3 落地后可见效果；阶段 4/6 会扩展）===== */
.hz-btn-primary{
  display:inline-block; padding:10px 24px;
  background:var(--hz-brand); color:#fff;
  border:0; border-radius:2px;
  font-size:14px; font-weight:500;
  transition:background .15s;
}
.hz-btn-primary:hover{ background:var(--hz-brand-dark); color:#fff; }

/* ===== 布局容器 ===== */
.container{ max-width:var(--hz-maxw); margin:0 auto; padding:0 16px; }

/* ===== 首页两栏 home-left(65%) / home-right(35%) ===== */
.home-columns{
  display:grid;
  grid-template-columns:65% 35%;
  gap:24px;
  max-width:var(--hz-maxw);
  margin:32px auto;
  padding:0 16px;
}
.home-col h2,.home-col h3{ color:var(--hz-brand-2); }
.home-col--right{ border-left:1px solid var(--hz-divider); padding-left:24px; }

/* ===== 响应式：窄屏单栏堆叠 ===== */
@media (max-width:768px){
  .home-columns{ grid-template-columns:1fr; gap:20px; }
  .home-col--right{ border-left:none; padding-left:0; border-top:1px solid var(--hz-divider); padding-top:20px; }
}

/* ===== 首页轮播（模块 110 · 满幅铺 + 品牌红遮罩 + 标题）===== */
.hz-banner{
  position:relative;
  width:100%;
  border-radius:8px;
  overflow:hidden;
}
.hz-banner .swiper-slide{ position:relative; }
.hz-banner__link{ display:block; position:relative; }

/* 图片：任何比例（4:3 / 3:2 / 16:9）都自动裁成 57:20(2.85:1)，满幅、不变形、不留白 */
.hz-banner .swiper-slide .hz-banner__img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:57 / 20;
  object-fit:cover;
}
@media (max-width:768px){
  .hz-banner .swiper-slide .hz-banner__img{ aspect-ratio:57 / 30; }
}

/* 遮罩：左暗 + 底品牌红渐变，保证亮图上白字可读 */
.hz-banner__overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,0) 68%),
    linear-gradient(0deg, rgba(217,0,0,.50) 0%, rgba(217,0,0,0) 38%);
}

/* 标题起点对齐「全民捕鱼电玩城app官方下载安装 Logo 左侧」：
   站点 body=wrapper-static，.grid-child 为居中 1320px + .5em 内边距。
   用 left:50% + translateX(-50%) 实现绝对定位元素可靠居中，
   再配合 max-width:1320px + padding-left:.5em，文字左对齐 → 起点 = Logo 左边缘。 */
.hz-banner__caption{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:14%;
  width:100%;
  max-width:1320px;
  padding-left:.5em;
  padding-right:.5em;
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
  text-align:left;
  pointer-events:none;
}
.hz-banner__title{ margin:0; font-size:clamp(22px,3.2vw,42px); font-weight:700; line-height:1.2; }
.hz-banner__sub{ margin:8px 0 0; font-size:clamp(14px,1.5vw,20px); font-weight:400; opacity:.92; }

@media (max-width:768px){
  .hz-banner__caption{ bottom:10%; }
}

/* 轮播跨满两列，实现通栏 Banner */
.home-columns > .hz-banner:first-child{
  grid-column:1 / -1;
  width:100%;
}
@media (max-width:768px){
  .home-columns > .hz-banner:first-child{ grid-column:auto; }
}

body.itemid-101 .com-content-article{ display:none; }

/* ===== 公司简介块高度限制 + 底部渐变遮罩 ===== */
.hz-intro{
  max-height:280px;
  overflow:hidden;
  position:relative;
}
.hz-intro::after{
  content:"";
  position:absolute;
  bottom:0; left:0; right:0;
  height:60px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events:none;
}
.hz-intro p{
  display:-webkit-box;
  -webkit-line-clamp:6;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* header v4 */
.header.container-header.full-width{
  display:flex !important;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  background-color:#e9e9e9 !important;
  background-image:none !important;
  border-bottom:1px solid #d0d0d0;
  padding:10px 20px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.header.container-header.full-width > .grid-child{
  width:auto;
  max-width:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
}
.header .grid-child:first-child{ flex:0 0 auto; }
.header.container-header.full-width .navbar-brand{ margin-inline-end:0; }
.header.container-header.full-width .container-nav{
  flex:0 1 auto;
  margin-left:40px;
}
.header .brand-logo{ display:inline-flex; align-items:center; }
.header .brand-logo img{ height:80px; width:auto; }
.header .mod-menu{
  display:flex; flex-wrap:wrap; justify-content:flex-start; gap:4px 28px;
}
.header .mod-menu > li{ position:relative; }

/* ===== 顶部一级菜单字体颜色（浅灰导航栏背景）===== */
.header .mod-menu > li > a,
.header .mod-menu .nav-header{
  color:#333333 !important;
  font-size:16px !important;
  font-weight:500 !important;
  line-height:1.4;
  cursor:pointer;
}
.header .mod-menu > li > a:hover{
  color:#D90000 !important;
}
.header .mod-menu > li.current > a,
.header .mod-menu > li.active > a{
  color:#D90000 !important;
  font-weight:600 !important;
}

.header .mod-menu > li.deeper .mod-menu__sub{
  display:none;
  position:absolute;
  top:100%; left:0;
  min-width:180px;
  margin-top:0;
  padding:8px 0;
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:4px;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  z-index:999;
}
.header .mod-menu > li.deeper:hover > .mod-menu__sub{
  display:block;
}
.header .mod-menu .mod-menu__sub a,
.header .mod-menu .mod-menu__sub span{
  display:block;
  padding:8px 18px;
  color:#333 !important;
  white-space:nowrap;
}
.header .mod-menu .mod-menu__sub a:hover,
.header .mod-menu .mod-menu__sub span:hover{
  background:#f7f7f7;
  color:#D90000 !important;
}
.header .mod-menu__toggle-sub{
  background:transparent; border:0; padding:0; pointer-events:none;
}
.header .mod-menu__toggle-sub .icon-chevron-down{ display:none; }
@media (max-width:768px){
  .header.container-header.full-width{ flex-wrap:wrap; justify-content:center; padding:10px; }
  .header.container-header.full-width > .grid-child{ width:100%; justify-content:center; }
  .header.container-header.full-width .container-nav{ margin-left:0; }
  .header .mod-menu{ justify-content:center; gap:4px 14px; }
  .header .mod-menu > li.deeper .mod-menu__sub{ position:static; box-shadow:none; border:none; padding-left:12px; }
  .header .mod-menu__toggle-sub .icon-chevron-down{ display:inline-block; }
}

/* ===== 2026-09-14 页脚导航 hover 二级菜单 =====
   v14 修正：二级菜单相对父项左侧向右偏移 70px 出现（不再贴列最右边缘），
   与一级菜单列右侧保留固定间距，落在红框所示的空白区。其余规则与 v13 一致。 */
.footer .mod-menu > li.deeper{ position:relative; }

/* 页脚一级菜单（链接型）常态：深蓝底上的白字 */
.footer .mod-menu a,
.footer .mod-menu li > a,
.footer .mod-menu > li > span{
  color:#ffffff !important;
  font-weight:500;
}
.footer .mod-menu a:hover{
  color:#D90000 !important;
}

/* 页脚父项（带二级目录）在 Joomla 里是「标题/分隔符」类型，
   渲染为 <button class="mod-menu__toggle-sub"> 包裹标题文字。
   v7 曾误将整个按钮 display:none 导致父项文字消失；这里只隐藏小三角，保留文字。 */
.footer .mod-menu__toggle-sub{
  display:block;
  width:100%;
  margin:0;
  padding:2px 0;
  background:transparent;
  border:0;
  text-align:left;
  cursor:default;
  color:#ffffff !important;
  font-weight:500;
  font-size:16px;
  font-family:inherit;
}
.footer .mod-menu__toggle-sub .mod-menu__heading{
  color:#ffffff !important;
}
.footer .mod-menu__toggle-sub:hover,
.footer .mod-menu__toggle-sub:hover .mod-menu__heading{
  color:#D90000 !important;
}
.footer .mod-menu__toggle-sub .icon-chevron-down{ display:none; }

/* 二级菜单默认隐藏；hover 父项时以 absolute 浮层出现在父项【右侧】、【竖排】，
   且相对父项左侧向右偏移 70px（不是贴列最右边缘 left:100%）。
   关键：
   1) left:70px; top:0; margin:0 → 与一级菜单文本右侧保留固定间距，无死区；
   2) position:absolute + 父 li position:relative → 不占文档流，不撑开页面 → 无抖动；
   3) 实底 + 阴影 + 高 z-index → 正常浮层。 */
.footer .mod-menu > li.deeper > .mod-menu__sub{
  display:none;
  position:absolute;
  top:0;
  left:70px;
  flex-direction:column;
  gap:2px 0;
  margin:0;
  padding:8px 12px;
  list-style:none;
  background:#1a2a4a;
  border:1px solid #2a3a5a;
  border-radius:4px;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  z-index:1000;
  min-width:160px;
}
.footer .mod-menu > li.deeper:hover > .mod-menu__sub{
  display:flex;
}

/* 竖排子项：每个二级项一行 */
.footer .mod-menu .mod-menu__sub > li{
  padding:0;
  white-space:nowrap;
}
.footer .mod-menu .mod-menu__sub > li > a{
  display:block;
  padding:6px 12px;
  color:#fff !important;
}
.footer .mod-menu .mod-menu__sub > li > a:hover{
  color:#D90000 !important;
}

/* hover 时父项高亮 */
.footer .mod-menu > li.deeper:hover > .mod-menu__heading,
.footer .mod-menu > li.deeper:hover > a{
  color:#D90000 !important;
}

/* 窄屏：流内缩进竖排（避免小屏溢出） */
@media (max-width:768px){
  .footer .mod-menu > li.deeper > .mod-menu__sub{
    position:static;
    top:auto; left:auto;
    margin:4px 0 4px 14px;
    padding:6px 10px;
  }
}

/* ===== 2026-09-15 内容页图片轮播（全民捕鱼电玩城app下载安装最新版资质/证书等：图片 + 下方文字说明）=====
   用法：在任意内页放一个「自定义内容模块」，模块内容用 .hz-gallery-swiper 骨架；
   模板已在全站加载 Swiper 并对 .hz-gallery-swiper 自动初始化。 */
.hz-gallery-swiper{
  max-width:760px;
  margin:0 auto 28px;
}
.hz-gallery-swiper .swiper-slide{
  text-align:center;
  background:#fff;
  border:1px solid var(--hz-border, #e5e5e5);
  border-radius:8px;
  padding:18px 18px 14px;
  box-sizing:border-box;
}
.hz-gallery-swiper .swiper-slide img{
  max-width:100%;
  max-height:540px;
  width:auto;
  height:auto;
  margin:0 auto;
  display:block;
  border-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.hz-cert-cap{
  margin:16px 0 2px;
  font-size:16px;
  font-weight:600;
  color:var(--hz-text, #1a1a1a);
}
.hz-gallery-swiper .swiper-button-prev,
.hz-gallery-swiper .swiper-button-next{
  color:var(--hz-brand, #D90000);
}
.hz-gallery-swiper .swiper-pagination-bullet-active{
  background:var(--hz-brand, #D90000);
}
@media (max-width:768px){
  .hz-gallery-swiper{ max-width:100%; }
  .hz-gallery-swiper .swiper-slide img{ max-height:360px; }
}


/* 核心代码：图片左右浮动 */

.pic-left {
  float: left;       
  width: 500px;
  margin: 15px; /* 建议加上边距，让文字和图片有点呼吸感 */
}

.pic-left-2 {  /* 文章内容2张图片并排显示  */
  float: left;       
  width: 430px;
  margin: 15px; /* 建议加上边距，让文字和图片有点呼吸感 */
}

.pic-left-3 {  /* 文章内容3张图片并排显示  */
  float: left;       
  width: 300px;
  margin: 15px; /* 建议加上边距，让文字和图片有点呼吸感 */
}

.pic-right {
  float: right;       
  width: 500px;
  margin: 15px; /* 建议加上边距，让文字和图片有点呼吸感 */
}

.box {  
  overflow: hidden;  /* 清除浮动（防止外层容器高度塌陷，简单处理方案） */
}


/* 文章正文排版统一（公司简介等内页，2026-09-18） */
.com-content-article__body {
  line-height: 1.6;          /* 行距约1.6倍（想更紧改1.5） */
  letter-spacing: .13em;     /* 字间距 */
  text-align: justify;       /* 两端对齐 */
  padding: 10px;             /* 正文四周内边距（鑫哥加） */
}
.com-content-article__body p {
  text-indent: 2em;          /* 段落首行缩进 2 个汉字 */
}

/* =========================================================
   新闻/全民捕鱼电玩城案例 分类博客列表 + 文章详情页样式（2026-09-18）
   ========================================================= */

/* 文章详情页标题居中 */
.hz-article-title,
.com-content-article__header .article-title {
  text-align: center;
}

/* 分类博客列表项统一卡片 */
.hz-blog-item {
  padding: 1rem 0;
  border-bottom: 1px solid #e5e5e5;
}
.hz-blog-item:last-child {
  border-bottom: none;
}
.hz-blog-item .blog-item__title {
  margin: 0 0 .5rem;
  font-size: 1.15rem;
  font-weight: 600;
}
.hz-blog-item .blog-item__title a {
  color: var(--hz-text, #333);
  text-decoration: none;
}
.hz-blog-item .blog-item__title a:hover {
  color: var(--hz-brand, #D90000);
}
.hz-blog-item .blog-item__meta {
  color: #888;
  font-size: .9rem;
  margin-bottom: .5rem;
}
.hz-blog-item .blog-item__intro {
  color: #555;
  font-size: .95rem;
  line-height: 1.6;
  margin-bottom: .75rem;
  /* 限制约两行 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hz-blog-item .blog-item__readmore {
  text-align: right;
}
.hz-blog-item .blog-item__readmore a {
  color: var(--hz-brand, #D90000);
  font-size: .9rem;
  text-decoration: none;
}
.hz-blog-item .blog-item__readmore a:hover {
  text-decoration: underline;
}

/* 文章详情页上一篇/下一篇导航 */
.hz-article-nav {
  clear: both;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e5e5;
}
.hz-article-nav a {
  display: block;
  color: var(--hz-text, #333);
  text-decoration: none;
  max-width: 48%;
  min-width: 180px;
  overflow: hidden;
}
.hz-article-nav a:hover {
  color: var(--hz-brand, #D90000);
}
.hz-article-nav__label {
  display: block;
  font-size: .85rem;
  color: #888;
  margin-bottom: .25rem;
}
.hz-article-nav__title {
  display: block;
  font-size: .95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hz-article-nav__next {
  text-align: right;
}

@media (max-width: 768px) {
  .hz-article-nav {
    flex-direction: column;
    gap: .75rem;
  }
  .hz-article-nav a {
    max-width: 100%;
  }
  .hz-article-nav__next {
    text-align: left;
  }
}

.com-content-article__header {
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: .75rem;
  margin-bottom: 1rem;
}

.hz-article-nav__prev {
  text-align: left;
}