/* =====================================================================
   FEIKEN · 主导航样式（对应 header.html 的多级导航结构）
   覆盖两层类：
     骨架类   .nav_bg / .wrap / .nav / #nav-toggle / .nav-toggle-btn
     主题类   .header__menu--* / .header__sub--menu* / .header__multi--label__* /
              .header__four--label__sub--menu* / .dropdown-submenu / .active / .now
   配色：黑底(#1a1a1a) + 白字 + 金黄(#ffc600) hover/当前项
   ===================================================================== */

/* ---------- 导航条外框 ---------- */
.nav_bg { width:100%; background:#1a1a1a; }
.wrap   { width:100%; max-width:1260px; margin:0 auto; padding:0 15px; box-sizing:border-box; }

/* ---------- 顶部汉堡开关（桌面隐藏，手机显示） ---------- */
#nav-toggle { display:none; }                 /* 纯CSS开关，隐藏原生勾选框 */
.nav-toggle-btn { display:none; cursor:pointer; }
.nav-toggle-btn i {
  display:block; width:24px; height:2px; margin:5px auto; background:#fff; transition:.2s;
}

/* ---------- 一级导航（横排） ---------- */
.nav {
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; flex-wrap:wrap;
}
.nav > li { position:relative; }              /* HOME 与 .header__menu--items 同级 */
.nav > li > a,
.header__menu--link {
  display:block; padding:0 18px; height:50px; line-height:50px;
  color:#fff; font-size:15px; text-decoration:none; white-space:nowrap;
  transition:background .2s, color .2s;
}
.nav > li > a:hover,
.header__menu--link:hover { background:#ffc600; color:#1a1a1a; }

/* 当前栏目高亮（.now 是 HOME 用，.active 是循环项用） */
.nav > li.now > a,
.header__menu--items.active > .header__menu--link { background:#ffc600; color:#1a1a1a; }

/* ---------- 一级里的 + 号（有子菜单时显示） ---------- */
.menu__plus--icon {
  display:inline-block; margin-left:6px; font-size:14px; color:#fff; opacity:.7;
}

/* ================= 二级菜单 ================= */
.header__sub--menu {
  list-style:none; margin:0; padding:0;
  position:absolute; left:0; top:100%; min-width:200px;
  background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.18);
  display:none; z-index:99;
}
.header__menu--items:hover > .header__sub--menu { display:block; }   /* 悬停展开 */

.header__sub--menu__items { position:relative; }
.nav .header__sub--menu__link {
  display:flex; align-items:center; box-sizing:border-box;
  width:100%; min-height:46px; padding:0 18px;   /* 关键：左右内边距放在链接自己身上 */
  color:#333; font-size:14px; line-height:1.2;   /* 行高固定，垂直居中 */
  text-decoration:none; border-bottom:1px solid #f0f0f0; white-space:nowrap;
}

.nav .header__sub--menu__link:hover { background:#ffc600; color:#1a1a1a; }
.header__sub--menu__items.active > .header__sub--menu__link {color:#1a1a1a; font-weight:700; }

/* 子菜单里的向右箭头 */
.header__submenu__plus--icon {
  float:right; margin-top:2px; color:#999;
}
.header__submenu__plus--icon svg { display:block; }

/* ================= 三级菜单 ================= */
.header__multi--label__sub--menu {
  list-style:none; margin:0; padding:0;
  position:absolute; left:100%; top:0; min-width:200px;
  background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.18);
  display:none; z-index:99;
}
.header__sub--menu__items:hover > .header__multi--label__sub--menu { display:block; }

.header__multi--label__sub--menu__items { position:relative; }
.nav .header__multi--label__sub--menu__link {
  display:block; padding:10px 18px; color:#333; font-size:14px;
  text-decoration:none; border-bottom:1px solid #f0f0f0; white-space:nowrap;
}
.nav .header__multi--label__sub--menu__link:hover { background:#ffc600; color:#1a1a1a; }
.header__multi--label__sub--menu__items.active > .header__multi--label__sub--menu__link { color:#ffc600; }

/* ================= 四 / 五级菜单（结构相同） ================= */
.header__four--label__sub--menu {
  list-style:none; margin:0; padding:0;
  position:absolute; left:100%; top:0; min-width:200px;
  background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.18);
  display:none; z-index:99;
}
.header__four--label__sub--menu__items:hover > .header__four--label__sub--menu { display:block; }
.nav .header__four--label__sub--menu__link {
  display:block; padding:10px 18px; color:#333; font-size:14px;
  text-decoration:none; border-bottom:1px solid #f0f0f0; white-space:nowrap;
}
.nav .header__four--label__sub--menu__link:hover { background:#ffc600; color:#1a1a1a; }
.header__four--label__sub--menu__items.active > .header__four--label__sub--menu__link { color:#ffc600; }

/* 有下级时的小箭头提示（dropdown-submenu） */
.dropdown-submenu > .header__sub--menu__link:after,
.dropdown-submenu > .header__multi--label__sub--menu__link:after {
  content:""; display:inline-block; margin-left:8px;
  border:5px solid transparent; border-left-color:#999; vertical-align:middle;
}

/* ================= 手机端（≤768px） ================= */
@media (max-width:768px) {
  .nav-toggle-btn { display:block; padding:14px 0; }   /* 显示汉堡 */

  /* 默认收起导航，点汉堡展开 */
  .nav {
    display:none; flex-direction:column; align-items:stretch; width:100%;
    background:#1a1a1a;
  }
  #nav-toggle:checked ~ .nav { display:flex; }

  .nav > li, .header__menu--items { width:100%; }
  .nav > li > a, .header__menu--link { height:auto; line-height:44px; padding:0 15px; }

  /* 手机端不做悬停下拉，子菜单改为平铺展开（可滚动查看） */
  .header__sub--menu,
  .header__multi--label__sub--menu,
  .header__four--label__sub--menu {
    position:static; display:block; min-width:0;
    box-shadow:none; background:#222; padding-left:16px;
  }
  .nav .header__sub--menu__link,
  .nav .header__multi--label__sub--menu__link,
  .nav .header__four--label__sub--menu__link {
    color:#ddd; border-bottom:1px solid #333;
  }
  .header__sub--menu__link:hover,
  .header__multi--label__sub--menu__link:hover,
  .header__four--label__sub--menu__link:hover { background:#ffc600; color:#1a1a1a; }

  /* 手机端隐藏箭头，避免占空间 */
  .header__submenu__plus--icon,
  .dropdown-submenu > .header__sub--menu__link:after,
  .dropdown-submenu > .header__multi--label__sub--menu__link:after { display:none; }
}
/* =====================================================================
   FEIKEN · 新闻列表页样式（News List · 模板 body 专用）
   ---------------------------------------------------------------------
   放置位置：{HOME_THEME_PATH}css/news_list.css
   引入方式（加在新闻列表 body 模板顶部）：
       <link rel="stylesheet" href="{HOME_THEME_PATH}css/news_list.css">
   ▲ 与产品列表 product_list.css 完全独立、类名已加 news_ 前缀，互不干扰。
   ▲ 若你的新闻页已引用 product_list.css，下面【BASE 段】可整段删掉（重复）。

   配色沿用原站：金黄 #ffc600 / 分割线 #dedede / 面包屑底 #E5EBEF
   版心 1100px 居中，自带 15px 内边距做移动端留白，完全自适应。
   ===================================================================== */

/* ===================== BASE 段（与 product_list.css 相同，可删） ===================== */
.row-title { width:100%; background:#E5EBEF; padding:55px 0; }
.row-title .container { display:flex; justify-content:space-between; align-items:center; }
.row-title h2 {
  float:left; margin:0; font-size:1em; font-weight:600; color:#1B1B1B;
  visibility:hidden; max-width:10px; max-height:1px; overflow:hidden;
}
.row-title .breadcrumb { float:right; margin:0; padding:8px 0; font-size:13px; color:#4C7793; }
.breadcrumb a { color:#4C7793; }
.breadcrumb a:hover { color:#ffc600; }

.container { width:100%; max-width:1100px; margin:0 auto; padding:0 15px; clear:both; box-sizing:border-box; }

.pagess { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:24px 0; clear:both; padding:0; }
.pagess li a, .pagess li span {
  display:block; padding:8px 14px; border:1px solid #dedede; color:#333; font-size:14px;
}
.pagess li.thisclass a, .pagess li a:hover {
  background:#ffc600; color:#fff; border-color:#ffc600;
}

.hot_title {
  display:block; width:100%; margin-top:30px;
  border-bottom:1px dashed #000; color:#ffc600;
  font-size:30px; line-height:1.3; text-transform:uppercase;
}
/* ===================== /BASE 段 ===================== */


/* ===== 主体两栏：左新闻列表 + 右分类导航 ===== */
.news_list_le { float:left; width:78%; padding:20px 20px 20px 0; box-sizing:border-box; }
.news_list_le .title,
.news_list_ri .title {
  width:100%; border-bottom:3px solid #dedede; color:#ffc600;
  font-size:30px; line-height:1.3; text-transform:uppercase;
}

.news_list_ri { float:right; width:210px; margin-top:20px; box-sizing:border-box; }

/* 右栏分类列表（样式同产品页 .cates） */
.news_cates { margin:18px 0 0; }
.news_cates dl dt {
  width:100%; height:60px; line-height:53px; background:#f3f3f3;
  text-align:center; border-bottom:7px solid #fff; transition:.25s;
}
.news_cates dl dt a { display:block; width:90%; margin:0 auto; color:#000; }
.news_cates dl dt:hover { background:#ffc600; }
.news_cates dl dt:hover a { color:#fff; }
.news_cates dl dt.now { background:#ffc600; }
.news_cates dl dt.now a { color:#fff; }


/* ===== 新闻列表卡片（左缩略图 + 右：日期/分类/标题/摘要） ===== */
.news_list { list-style:none; padding:24px 0; margin:0; }
.news_item {
  display:flex; gap:20px; padding:18px; margin-bottom:26px;
  border:1px solid #eee; background:#fff; transition:box-shadow .2s;
  align-items:flex-start; box-sizing:border-box;
}
.news_item:hover { box-shadow:0 4px 18px rgba(0,0,0,.16); }
/* 横版缩略图（新闻图多为横图，4:3 比例裁切不变形） */
.news_thumb { flex:0 0 220px; display:block; }
.news_thumb img {
  width:220px; aspect-ratio:4/3; object-fit:cover;
  border:1px solid #f0f0f0; display:block;
}
.news_text { flex:1; min-width:0; }
/* 日期 + 分类 meta */
.news_meta { margin-bottom:8px; font-size:13px; display:flex; gap:14px; align-items:center; }
.news_date { color:#ffc600; font-weight:bold; }
.news_cat  { color:#999; }
.news_cat::before { content:"•"; margin-right:6px; color:#ccc; }
.news_tit { font-size:17px; line-height:30px; }
.news_tit a { color:#1b1b1b; }
.news_tit a:hover { color:#ffc600; }
.news_desc { font-size:14px; line-height:26px; color:#555; }
.news_more { color:#ffc600; font-weight:bold; }
.news_more:hover { text-decoration:underline; }


/* ===== 底部 推荐阅读 / 热门新闻（3 条） ===== */
.news_hot {
  width:100%; margin-top:20px; list-style:none; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.news_hot_item { list-style:none; border:1px solid #dedede; background:#fff; overflow:hidden; }
.news_hot_thumb img { width:100%; height:200px; object-fit:cover; display:block; }
.news_hot_body { padding:9px 16px; }
.news_hot_tit { margin:0; }
.news_hot_tit a {
  display:block; color:#000; font-size:16px; line-height:60px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.news_hot_tit a:hover { color:#ffc600; }
.news_hot_desc { margin:0; height:122px; font-weight:normal; line-height:30px; word-wrap:break-word; overflow:hidden; }
.news_hot_more a {
  display:block; width:100px; height:40px; margin-top:4px;
  text-align:center; line-height:40px; background:#ffc600;
  color:#fff; border-radius:8px;
}
.news_hot_more a:hover { background:#e5b200; color:#fff; }


/* ===== 响应式 ===== */
@media (max-width:900px) {
  .news_list_le, .news_list_ri { float:none; width:100%; padding-right:0; }
  .news_list_ri { margin-top:24px; }
  .news_list_le .title, .news_list_ri .title, .hot_title { font-size:24px; }
  .row-title { padding:32px 0; }
  .news_hot { grid-template-columns:repeat(2,1fr); }
  .news_cates dl { display:grid; grid-template-columns:repeat(2,1fr); gap:0 10px; }
  .news_cates dl dt { height:48px; line-height:41px; }
}

@media (max-width:768px) {
  /* 手机端：新闻卡片竖向堆叠（图在上） */
  .news_item { flex-direction:column; }
  .news_thumb { flex:none; width:100%; }
  .news_thumb img { width:100%; aspect-ratio:4/3; }
  .news_tit { line-height:26px; }
}

@media (max-width:560px) {
  .row-title { padding:22px 0; }
  .row-title .breadcrumb { float:none; text-align:left; }
  .news_list_le { padding:14px 0; }
  .news_list_le .title, .news_list_ri .title, .hot_title { font-size:20px; }
  .news_list { padding:14px 0; }
  .news_item { padding:14px; margin-bottom:18px; }
  .news_tit { font-size:15px; }
  .news_desc { font-size:13px; }
  .news_hot { grid-template-columns:1fr; }
  .news_hot_thumb img { height:auto; }
  .news_hot_desc { height:auto; }
  .news_cates dl { grid-template-columns:1fr; }
}