/* ==========================================================
   卡松科技首页 —— 泰星样式顶部导航 / 全屏幻灯 的补充样式
   导航沿用项目原有 DOM 结构与类名（section-header / section-nav
   / nav / nav-item / nav-sub 等），仅外观仿照泰星一行式头部；
   基础公共样式来自 https://www.shandong-energy.com/static/txhg/...
   ========================================================== */

/* ================= 顶部一行式头部（泰星样式） ================= */
/* 回顶部按钮：原模板 CSS 未加载，需自己补成固定定位 */
.icon_back {
  position: fixed;
  right: 30px;
  bottom: 80px;
  width: 68px;
  height: 68px;
  cursor: pointer;
  z-index: 999;
}

.section-header {
  height: 103px;
  background-color: #fff;
  position: relative;
}

/* 头部一行放宽到 1400（仅头部，不影响页面其它 .wrapper） */
.section-header .wrapper {
  width: 1400px;
}

.section-header .logo-wrapper {
  padding-top: 30px;
}

.section-header .logo-wrapper .logo-header {
  height: 42px;
}

/* 右侧：flex 一行，搜索图标在左、集团网站 在右（互换位置） */
.section-header .fr {
  position: relative;
  height: 103px;
  display: flex;
  align-items: center;
}

/* 旧模板的遮罩元素（WAP 专用），PC 下不占位 */
.section-header .body-mask {
  display: none;
}

/* 搜索：只留图标（原站行为：提交跳转搜索页，不弹窗） */
.section-header .search-container {
  position: static;
  transform: none;
  order: 1;
  border: none;
  height: 24px;
  width: 24px;
  margin: 0 20px 0 30px;
}

.section-header .search-container .search-text {
  display: none;
}

.section-header .search-container .search-button {
  width: 24px;
  height: 24px;
  display: block;
  cursor: pointer;
  background: url(https://www.shandong-energy.com/static/txhg/images/icon-search.png) center center / contain no-repeat;
}

.section-header .search-container .search-button:hover {
  opacity: 0.8;
}

/* 集团网站（图标背景 + 分隔间距样式） */
.section-header .home-link {
  order: 2;
  color: #999;
  font-size: 16px;
  line-height: normal;
  text-decoration: none;
  padding-left: 25px;
  background: url(https://img11.litenews.cn/29/2026/08/18/d0363874e30e482c9208f8127ad55b33.png) 0 center no-repeat;
  background-size: 19px 19px;
}

.section-header .home-link:hover {
  color: #206BD1;
}

/* ================= 导航：与 logo 同一行（泰星样式） ================= */
.section-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 103px;
  background-color: transparent;
  /* 覆盖整行，空白区域不拦截点击（右侧搜索/集团网站可点） */
  pointer-events: none;
}

.section-nav .wrapper {
  width: 1400px;
  padding-left: 230px;
  padding-right: 190px;
  box-sizing: border-box;
}

/* 仅导航内容区域可点击，左右留白穿透（不挡右侧搜索/集团网站） */
.section-nav .nav {
  pointer-events: auto;
}

/* 多出来的宽度平均分配给导航内容（两端对齐、间隔均分） */
.section-nav .nav {
  display: flex;
  justify-content: space-between;
  line-height: 103px;
  color: #333;
}

.section-nav .nav-item {
  width: auto;
  display: inline-block;
  position: relative;
  text-align: center;
  font-size: 16px;
  background: none !important;
}

.section-nav .nav-item a {
  color: #333;
  font-weight: bold;
}

.section-nav .nav-item:hover a,
.section-nav .nav-item.cur a {
  color: #003EA1;
}

/* 下拉菜单（照泰星 hcUi：白底列表、最大高度过渡；卡松栏目多，高度足够容纳不滚动） */
.section-nav .nav-sub {
  display: block;
  position: absolute;
  top: 103px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  max-height: 0;
  overflow: hidden;
  z-index: 999;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: max-height 0.3s ease;
}

.section-nav .nav-item:hover .nav-sub {
  max-height: 640px;
}

.section-nav .nav-sub .nav-sub-item {
  height: 48px;
  line-height: 48px;
  font-size: 15px;
  font-weight: normal;
  text-align: center;
  background-color: #fff;
  color: #666;
}

.section-nav .nav-sub .nav-sub-item a {
  color: inherit;
  font-weight: normal;
}

.section-nav .nav-sub .nav-sub-item:hover {
  background-color: #EAF3FF;
  color: #003EA1;
}

/* ================= 全屏幻灯（泰星样式） ================= */
/* 主幻灯采用图片高度 780px（覆盖泰星默认 700px），移动端维持 rem 高度 */
.scontainer {
  height: 780px;
}

.swiper-slide .slide-link {
  display: inline;
}

/* ================= 双列视频模块 ================= */
/* 左右布局宽度参考线上产业布局模块（587px x 2），高度按宽度 16:9 换算 */
.section-video .pic-news-container {
  margin: 18px -40px 0 0;
}

.section-video .pic-news-item {
  width: 587px;
  margin: 0 40px 0 0;
  position: relative;
  background-color: #fff;
}

.section-video .pic-news-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.section-video .pic-news-img video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ================= 新增模块统一样式 ================= */
/* 视频 / 解决方案 / 典型案例 / 荣誉资质：灰底 + 上下 40px */
.section-video,
.section-solution,
.section-case,
.section-honor {
  background-color: #f3f3f3;
  padding: 40px 0;
}

/* 标题自带 padding-top 22px，与模块 40px 叠加，这里归零保持统一 */
.section-video .section-title,
.section-solution .section-title,
.section-case .section-title,
.section-honor .section-title {
  padding-top: 0;
}

/* ================= 全站版块标题（照线上产品布局样式） ================= */
.section-title {
  text-align: center;
  color: #333;
  padding-top: 22px;
  margin-bottom: 50px;
  position: relative;
}

.section-title-main {
  font-size: 22px;
}

.section-title-sub {
  font-size: 18px;
  font-weight: normal;
  color: #999;
}

.section-title::after {
  width: 87px;
  height: 3px;
  background: #88CC2F;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: -16px;
  margin: auto;
}

/* ================= 荣誉资质模块（照泰星荣誉：白底证书卡、一行 5 个） ================= */
.section-honor .swiperBox {
  margin-top: 30px;
}

/* ================= 典型案例模块（照线上产品布局：两张大卡 587px） ================= */
.section-case .pic-news-container {
  margin: 18px -40px 0 0;
}

.section-case .pic-news-link {
  display: inline-block;
}

.section-case .pic-news-item {
  width: 587px;
  margin: 0 40px 0 0;
}

.section-video .pic-news-link:last-child .pic-news-item,
.section-case .pic-news-link:last-child .pic-news-item {
  margin-right: 0;
}

/* 案例大图 hover 放大 */
.section-case .pic-news-img {
  overflow: hidden;
}

.section-case .pic-news-img img {
  transition: transform 0.5s ease;
}

.section-case .pic-news-link:hover .pic-news-img img {
  transform: scale(1.05);
}

/* ================= 解决方案模块（泰星荣誉式轮播） ================= */
.section-solution .swiperBox {
  margin-top: 30px;
}

/* 卡片：正方形行业图 + 底部蓝色标签条（照线上卡松设计） */
.section-solution .morea_a {
  height: auto;
  padding: 0;
  position: relative;
}

.section-solution .morea_imgBox {
  width: 100%;
}

.section-solution .morea_img {
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
}

.section-solution .morea_tag {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 44px;
  line-height: 44px;
  background-color: #206BD1;
  color: #fff;
  font-size: 18px;
  text-align: center;
  z-index: 2;
}

.section-solution .morea_a:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.section-footer .footer-text a {
  display: inline-block;
  margin: 0 10px;
}

.pagination.pagination-3 .swiper-pagination-bullet{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#fff;
  opacity:0.4;
  margin:0 5px;
  display:inline-block;
  min-width: 10px;
  padding: 0;
}
.pagination.pagination-3 .swiper-pagination-bullet-active{
  opacity:1;
}

/* ==========================================================
   移动端适配（750 设计稿，100px = 1rem）
   ========================================================== */
@media screen and (max-width: 900px) {
  .fl {
    float: none;
  }

  .wrapper {
    width: 100%;
    padding: 0;
  }

  .scontainer {
    height: 3rem;
  }

  /* 移动端隐藏 PC 头部与导航（泰星逻辑：mobile-inner fixed 接管） */
  .section-header,
  .section-nav,
  .section-notice {
    display: none;
  }

  /* 占位：把幻灯从 fixed 移动头部(1.03rem)下方推出，避免被导航遮住（页面缺的 padding-top） */
  .scontainer {
    margin-top: 1.03rem;
  }

  .headline-item .headline-title-link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .headline-item .headline-text {
    display: none;
  }

  /* 模块容器：全宽 + 左右留白 */
  .section-video .wrapper,
  .section-solution .wrapper,
  .section-case .wrapper,
  .section-honor .wrapper {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.24rem;
  }

  /* 模块间距 40px -> 0.4rem */
  .section-video,
  .section-solution,
  .section-case,
  .section-honor {
    padding: 0.4rem 0;
  }

  /* 版块标题 rem 化 */
  .section-video .section-title,
  .section-solution .section-title,
  .section-case .section-title,
  .section-honor .section-title {
    padding-top: 0;
    margin-bottom: 0.5rem;
  }

  .section-title-main {
    font-size: 0.36rem;
  }

  .section-title::after {
    width: 0.8rem;
    height: 0.04rem;
    bottom: -0.2rem;
  }

  /* 精彩视频：单列堆叠 */
  .section-video .pic-news-container {
    margin: 0;
  }

  .section-video .pic-news-item {
    width: 100%;
    margin: 0 0 0.4rem;
  }

  .section-video .pic-news-link {
    display: block;
    margin-top: 0.2rem;
  }

  /* 典型案例：上下堆叠 */
  .section-case .pic-news-container {
    margin: 0;
  }

  .section-case .pic-news-item {
    width: 100%;
    margin: 0 0 0.4rem;
  }

  .section-case .pic-news-item:last-child {
    margin-top: 0.2rem;
    margin-bottom: 0;
  }

  .section-case .pic-news-img {
    height: auto;
    aspect-ratio: 587 / 230;
  }

  .section-case .pic-news-text {
    padding: 0.28rem 0.3rem 0.4rem;
  }

  .section-case .pic-news-title {
    font-size: 0.32rem;
  }

  .section-case .pic-news-detail {
    font-size: 0.26rem;
    margin-top: 0.06rem;
  }

  /* 解决方案：横滑（一行 2 个由 JS breakpoints 控制）
     txhg index_mobile.css 会把 .swiperBox 隐藏，这里重新显示 */
  .section-solution .swiperBox,
  .section-honor .swiperBox {
    display: block;
  }

  .section-solution .swiperBox {
    width: 100%;
    margin-top: 0.3rem;
  }

  .section-solution .morea_tag {
    height: 0.44rem;
    line-height: 0.44rem;
    font-size: 0.26rem;
  }

  .section-solution .morea_imgBox {
    width: 100%;
  }

  /* 固定图片高度，防止幻灯容器塌陷不显示 */
  .section-solution .morea_img {
    height: 3.4rem;
    width: 100%;
  }

  /* 荣誉资质：横滑（一行 2 个由 JS breakpoints 控制），证书卡固定 rem 高度 */
  .section-honor .swiperBox {
    width: 100%;
    margin-top: 0.3rem;
  }

  .section-honor .morea_a {
    height: 2.8rem;
    padding: 0.1rem;
    box-sizing: border-box;
  }

  .section-honor .morea_img {
    height: 2.6rem;
    width: 100%;
  }

  /* 移动端隐藏轮播箭头，手势滑动 */
  .section-solution .moreanext,
  .section-solution .moreaprev,
  .section-honor .moreanext,
  .section-honor .moreaprev {
    display: none;
  }

  .gallery-wrapper {
    height: auto;
  }

  .gallery-wrapper .section-title {
    position: static;
    width: 100%;
    height: 1.2rem;
    background-color: transparent;
    color: #333;
    margin-bottom: 0;
  }

  .gallery-wrapper .section-title-main {
    font-size: 0.36rem;
    color: #333;
    position: relative;
    padding-top: 0;
  }

  .gallery-wrapper .section-title-main::after {
    width: 87px;
    height: 3px;
    background: #88CC2F;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: -16px;
    margin: auto;
  }

  .gallery-wrapper .gallery-item {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 10px 0;
  }


  .section-footer {
    display: block;
  }

  .section-footer .footer-a {
    padding: .38rem .25rem 0;
  }

  .section-footer .title-bar {
    font-size: .34rem;
    border-left: .03rem solid #fff;
  }

  .section-footer .col-wrapper {
    width: 100%;
    margin-bottom: .4rem;
  }

  .section-footer .col-wrapper:nth-of-type(1) {
    width: 100%;
  }

  .section-footer .footer-text a {
    display: block;
    margin: 0 10px;
  }

  .section-footer .footer-b {
    height: auto;
  }

  .section-footer .footer_webs_list a {
    font-size: .28rem;
    word-break: break-all;
  }

  .section-footer .contact-text {
    font-size: .28rem;
  }

  .icon_back {
    display: none;
  }
}