@charset "utf-8";
/* ==========================================================================
   maintain-style-20261022.css
   用途：站点维护/改造样式（不写入 mccbts.css，避免产品升级时被覆盖）
   内容：首页「业务体系」板块 —— 一核 / 两翼，每栏一张图
   日期：2026-10-23（版式：PC 左右两栏 + 栏内左文右图；手机自动纵向，查看详情靠右）
   --------------------------------------------------------------------------
   引入方式：在 mccbts.css 之后引入，例如
             <link rel="stylesheet" type="text/css" href="./images/maintain-style-20261022.css">
             （建议加在「头部嵌套」模板里，全站生效）
   依赖：mccbts.css 中的 .e5_w（板块外壳留白）、.e5_t（居中标题 + 横线），
         本文件不重复定义；HTML 里 .e5_t 内的 <span> 为横线，不可删除。
   前缀：e5n_ 为本次新增，与 mccbts.css 中 e5_ / e6_ 系列无冲突。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 容器与栅格
   -------------------------------------------------------------------------- */
.e5n_w { width: 1200px; margin: 0 auto; padding: 30px 0 42px; box-sizing: border-box; }

/* 两栏：列宽不足 470px 时自动换行成一栏（纵向） */
.e5n_grid { display: flex; flex-wrap: wrap; gap: 40px; }
.e5n_col { flex: 1 1 470px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }

/* --------------------------------------------------------------------------
   2. 栏内左侧文字
   -------------------------------------------------------------------------- */
.e5n_info { flex: 0 1 168px; width: 168px; max-width: 100%; }

.e5n_name { display: flex; align-items: baseline; flex-wrap: wrap; }   /* 中文 + 英文同一行 */
.e5n_name b {
  position: relative; display: block; padding: 0 0 0 14px;
  font-size: 22px; font-weight: 700; line-height: 1.2; color: #1b2b3a;
}
.e5n_name b:before {                /* 左侧蓝色竖条 */
  content: ""; position: absolute; left: 0; top: 3px; width: 4px; height: 20px;
  background-color: #045bb8; border-radius: 2px;
}
.e5n_name i {
  display: block; margin: 0 0 0 10px; font-style: normal; font-size: 11px;
  letter-spacing: 1px; color: #9aa7b4; text-transform: uppercase;
}
.e5n_rule { display: block; width: 34px; height: 3px; margin: 14px 0 13px 14px; background-color: #045bb8; }

.e5n_more {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: 30px; margin: 0 0 0 12px; padding: 0 30px 0 16px;
  border: 1px solid #d5dde4; border-radius: 3px;
  font-size: 12px; line-height: 1; color: #5d6b78; text-decoration: none;
  box-sizing: border-box; transition: all .3s;
}
.e5n_more:after {                   /* 右箭头 */
  content: ""; position: absolute; right: 13px; top: 50%; width: 5px; height: 5px;
  margin-top: -3px; border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.e5n_more:hover { color: #fff; border-color: #045bb8; background-color: #045bb8; }

/* --------------------------------------------------------------------------
   3. 栏内右侧图片
      宽屏 388 × 170（≈ 原图 800×350 等比，零裁切）；
      窄屏自动换行到下一行并撑满整栏，高度按图片比例自适应
   -------------------------------------------------------------------------- */
.e5n_pic {
  position: relative; display: block; flex: 1 1 300px; min-width: 0;
  overflow: hidden; background-color: #eaeef2;
}
.e5n_pic img {
  display: block; width: 100%; height: auto;
  transition: transform .7s ease;
}
.e5n_pic:after {                    /* hover 蓝色蒙版 + 查看详情 */
  content: "查看详情"; position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; letter-spacing: 2px; color: #fff;
  background-color: rgba(4, 91, 184, .5);
  opacity: 0; transition: opacity .35s ease;
}
.e5n_pic:hover img { transform: scale(1.05); }
.e5n_pic:hover:after { opacity: 1; }

/* --------------------------------------------------------------------------
   4. 响应式
      注意：原站 @media (min-width:480px) and (max-width:1199px) 把 body 固定为 480px，
            手机视口往往是 980，按视口写的 768 断点不会触发，故统一用 1199px
            （1199 以下即站点手机/平板版，body 恒为 480）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1199px) {
  .e5n_w { width: 100%; padding: 24px 10px 28px; }
  .e5n_grid { gap: 28px; }
  .e5n_col { gap: 14px; }

  /* 手机版：标题行「中文 + 英文」横向排列，"查看详情"靠右同一行，短线独占下一行 */
  .e5n_info { flex: 1 1 100%; width: auto; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
  .e5n_name { order: 1; flex: 1 1 auto; display: flex; align-items: baseline; flex-wrap: wrap; }
  .e5n_name i { margin: 0 0 0 10px; }
  .e5n_more { order: 2; margin: 0 0 0 12px; flex: 0 0 auto; }
  .e5n_rule {   /* 占满一行强制换行，但只在前 34px 画蓝色短线 */
    order: 3; display: block; flex: 0 0 100%; width: 100%; height: 3px;
    margin: 10px 0 0 14px;
    background-color: transparent;
    background-image: linear-gradient(90deg, #045bb8 0, #045bb8 34px, transparent 34px);
  }
  .e5n_pic { flex: 1 1 100%; }
}
@media screen and (max-width: 768px) {
  .e5n_w { padding: 20px 12px 24px; }
  .e5n_grid { gap: 26px; }
  .e5n_name b { font-size: 20px; }
  .e5n_name b:before { height: 18px; }
}