@charset "utf-8";
/* =========================================================
   产品中心页  products.css
   ========================================================= */

/* ===== Banner 文案 ===== */
.art-products-banner .art-inner-banner-container { -webkit-justify-content: flex-start; justify-content: flex-start; padding-top: 295px;}
.art-products-banner_sub { margin-top: 12px; font-size: 36px; line-height: 44px; font-weight: 400; color: #fff;}

/* ===== 主体（左侧 440 灰带 + 右侧白底） ===== */
.art-products { position: relative; padding: 90px 0 110px; background-color: #fff; background-image: -webkit-linear-gradient(left, #F1F4F9 0, #F1F4F9 440px, #fff 440px); background-image: linear-gradient(90deg, #F1F4F9 0, #F1F4F9 440px, #fff 440px);}
.art-products_layout { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; padding: 0 160px 0 40px;}
.art-products-side { width: 360px; -webkit-flex: none; flex: none; margin-right: 111px;}
.art-products-main { -webkit-flex: 1; flex: 1; min-width: 0;}

/* ===== 左侧分类（统一手风琴树结构） ===== */
.art-products-cats { margin: 0; padding: 0;}
.art-products-cats>li { list-style: none;}

/* —— 折叠态标题（默认）—— */
/* 继承原设计稿"分隔线下 18 项"视觉：h60 透明底 深灰文字 无圆角 */
.art-products-cat_title { position: relative; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 60px; padding-left: 30px; margin-top: 13px; background-color: transparent; border-radius: 0; color: #757575; font-size: 18px; font-weight: 500; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-transition: background-color .25s ease, color .25s ease, border-radius .25s ease; transition: background-color .25s ease, color .25s ease, border-radius .25s ease;}
/* 首个一级分类无顶部间距 */
.art-products-cats>li:first-child>.art-products-cat_title { margin-top: 0;}

/* —— 展开态标题 —— */
/* 继承原设计稿"蓝标题栏"视觉：h60 蓝底 白字 bold r10 */
.art-products-cat.expanded>.art-products-cat_title { background-color: #005BAC; color: #fff; font-weight: bold; border-radius: 10px;}

/* 图标 */
.art-products-cat_icon { width: 16px; height: 16px; -webkit-flex: none; flex: none; margin-right: 18px;}
.art-products-cat_icon svg { display: block; width: 16px; height: 16px;}

/* —— 指示器：折叠态灰色 "+" —— */
/* 横线 + 竖线重叠 = "+" */
.art-products-cat_indicator { position: absolute; right: 25px; top: 50%; margin-top: -1px; width: 14px; height: 2px; background-color: #999; -webkit-transition: background-color .25s ease; transition: background-color .25s ease;}
.art-products-cat_indicator::before { content: ''; position: absolute; left: 6px; top: -6px; width: 2px; height: 14px; background-color: #999; -webkit-transition: opacity .25s ease, background-color .25s ease; transition: opacity .25s ease, background-color .25s ease;}

/* —— 指示器：展开态白色 "-" —— */
/* 横线变白 + 竖线隐藏 = "-" */
.art-products-cat.expanded>.art-products-cat_title .art-products-cat_indicator { background-color: #fff;}
.art-products-cat.expanded>.art-products-cat_title .art-products-cat_indicator::before { opacity: 0;}

/* —— 二级子列表 —— */
/* 折叠态：max-height 0 + 隐藏 overflow */
.art-products-cat_children { margin-top: 0; max-height: 0; overflow: hidden; -webkit-transition: max-height .35s ease, margin-top .35s ease; transition: max-height .35s ease, margin-top .35s ease;}
/* 展开态：max-height 800px + 13px 顶部间距 */
.art-products-cat.expanded>.art-products-cat_children { max-height: 800px; margin-top: 13px;}

/* —— 二级子项 —— */
/* 继承原设计稿"一级列表"视觉：h38 字号 16px padding-left 63px */
.art-products-cat_children>li { height: 38px; padding-left: 63px;}
.art-products-cat_children>li>a { display: block; height: 38px; line-height: 38px; font-size: 16px; color: #757575;}
.art-products-cat_children>li>a:hover { color: #005BAC;}
.art-products-cat_children>li.active>a { color: #005BAC; text-decoration: underline; -webkit-text-underline-offset: 2px; text-underline-offset: 2px;}

/* ===== 筛选 ===== */
.art-products-filter { position: relative; height: 117px; background-color: #F4F8FB; border-radius: 8px;}
.art-products-filter_head { position: absolute; left: 0; top: 0; width: 128px; height: 117px; padding: 22px 0 0 41px; border-radius: 8px 0 0 8px; background-color: #767F86; background-image: url(/images/prod-filter-deco.png); background-repeat: no-repeat; background-position: center center; background-size: 128px 117px; color: #fff; font-size: 24px; font-weight: bold; line-height: 36px;}
.art-products-filter_head span { display: block;}
.art-products-filter_body { padding: 27px 0 0 163px;}
.art-products-filter_row { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 22px;}
.art-products-filter_row + .art-products-filter_row { margin-top: 19px;}
.art-products-filter_item { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; margin-right: 56px; font-size: 16px; line-height: 22px; color: #545454; white-space: nowrap; cursor: pointer;}
.art-products-filter_item:hover { color: #005BAC;}
.art-products-filter_item svg { width: 9px; height: 9px; -webkit-flex: none; flex: none; margin-left: 8px; fill: none; stroke: #9AA0A6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;}
.art-products-filter_row .art-products-filter_item:last-child { margin-right: 0;}
.art-products-filter_row + .art-products-filter_row .art-products-filter_item { margin-right: 53px;}

/* ===== 已选条件 ===== */
.art-products-chips { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-top: 36px;}
.art-products-chips_label { margin-right: 18px; font-size: 14px; color: #999;}
.art-products-chip { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; height: 36px; padding: 0 14px 0 17px; border: 1px solid #D4DDE6; border-radius: 18px; background-color: #F4F8FB; font-size: 16px; white-space: nowrap;}
.art-products-chip + .art-products-chip { margin-left: 16px;}
.art-products-chip_label { color: #9A9A9A;}
.art-products-chip_val { margin-left: 14px; color: #005BAC;}
.art-products-chip_del { width: 12px; height: 12px; -webkit-flex: none; flex: none; margin-left: 31px; fill: none; stroke: #005BAC; stroke-width: 1.8; stroke-linecap: round; cursor: pointer;}
.art-products-chip_del:hover { stroke: #DD0F0F;}
.art-products-line { height: 1px; margin-top: 34px; background-color: #E6E6E6;}

/* ===== 产品卡片 ===== */
.art-products-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 42px; margin-top: 50px;}
.art-products-card { position: relative; height: 470px; border: 1px solid #DBE0E4; border-radius: 8px; background-color: #fff; overflow: hidden; -webkit-transition: all .3s ease; transition: all .3s ease;}
.art-products-card_img { display: block; width: 100%; height: 313px; -o-object-fit: cover; object-fit: cover;}
.art-products-card_info { position: relative; height: 155px; padding: 28px 32px 0; background-color: #F1F4F9;}
.art-products-card_info::after { content: ''; position: absolute; right: 1px; top: 7px; width: 234px; height: 59px; background: url(/images/prod-deco-gray.png) no-repeat right top; background-size: 234px 59px;}
.art-products-card_title { font-size: 24px; line-height: 32px; font-weight: bold; color: #212121;}
.art-products-card_desc { width: 300px; max-width: 100%; margin-top: 10px; font-size: 16px; line-height: 29px; color: #666;}
/* hover 态 = 原设计稿蓝底效果 */
.art-products-card:hover { border-color: #005BAC; box-shadow: 0 9px 18px rgba(0, 91, 172, .16);}
.art-products-card:hover .art-products-card_info { background-color: #005BAC;}
.art-products-card:hover .art-products-card_info::after { background-image: url(/images/prod-deco-white.png);}
.art-products-card:hover .art-products-card_title { color: #fff;}
.art-products-card:hover .art-products-card_desc { color: rgba(255, 255, 255, .82);}

/* ===== 分页 ===== */
.art-products-pager { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; gap: 12px; margin-top: 55px;}
.art-products-pager a { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #E6E6E6; border-radius: 8px; background-color: #fff; font-size: 16px; color: #666;}
.art-products-pager a svg { width: 12px; height: 12px; fill: none; stroke: #999; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.art-products-pager a:hover { border-color: #005BAC; color: #005BAC;}
.art-products-pager a:hover svg { stroke: #005BAC;}
.art-products-pager a.active { border-color: #005BAC; background-color: #005BAC; color: #fff;}

/* ===== 右侧悬浮工具栏 ===== */
.art-products-tool { position: absolute; right: 4px; top: 750px; width: 69px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; gap: 5px;}
.art-products-tool a { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; height: 60px; border-radius: 8px; background-color: #005BAC; color: #fff; font-size: 12px; line-height: 1;}
.art-products-tool a svg { width: 26px; height: 26px; fill: #fff;}
.art-products-tool .compare { -webkit-flex-direction: column; flex-direction: column; background-color: #DD0F0F; font-size: 14px; line-height: 18px;}
.art-products-tool .compare b { display: block; font-size: 15px; line-height: 18px;}
.art-products-tool .tel svg, .art-products-tool .wx svg, .art-products-tool .mail svg { stroke: #fff;}
.art-products-tool .mail svg { fill: none;}
.art-products-tool .top svg { width: 16px; height: 16px; margin-bottom: 5px;}
.art-products-tool a:hover { opacity: .88;}

/* ===== 页脚 ===== */
.art-footer { padding-top: 85px;}
/* logo 原始尺寸 219x49，固定高度让宽度按比例自适应，防止变形切边 */
.art-footer_logo img { display: block; width: auto; height: 50px;}
/* 覆盖 common.css header logo 尺寸：原始 219x49 高清原图 */
.art-header-logo img { width: auto; height: 50px;}
/* header 两张 logo 切换：默认深色版（白底 header），透明态切换白色版 */
.art-header-logo_white { display: none;}
.art-header-logo_dark { display: block;}
/* 透明 header → 显示白色 logo；白底（.fxd）→ 显示深色 logo */
.art-header-trans .art-header-logo_dark { display: none;}
.art-header-trans .art-header-logo_white { display: block;}
.art-header-trans.fxd .art-header-logo_dark { display: block;}
.art-header-trans.fxd .art-header-logo_white { display: none;}
.art-footer_top { -webkit-align-items: flex-end; align-items: flex-end; padding-bottom: 48px; border-bottom: 1px solid #343434;}
.art-footer_btn { margin: 0 1px 0 0;}
.art-footer_btn a { width: 166px; height: 44px;}
.art-footer_btn a svg { width: 18px; height: 18px;}
.art-footer_col h4 { font-size: 24px; font-weight: 500; margin-bottom: 34px;}
.art-footer-container { padding-top: 62px; padding-bottom: 78px; border-bottom: 1px solid #343434;}
.art-footer_bottom { padding: 35px 0 38px;}

/* ===== 响应式 ===== */
@media (max-width:1680px) {
  .art-products-banner .art-inner-banner-container { -webkit-justify-content: center; justify-content: center; padding-top: 0;}
  .art-products-banner_sub { font-size: 30px; line-height: 38px; margin-top: 12px;}
  .art-products { padding: 70px 0 90px; background-image: -webkit-linear-gradient(left, #F1F4F9 0, #F1F4F9 380px, #fff 380px); background-image: linear-gradient(90deg, #F1F4F9 0, #F1F4F9 380px, #fff 380px);}
  .art-products_layout { padding: 0 60px 0 28px;}
  .art-products-side { width: 300px; margin-right: 50px;}
  .art-products-cat_title { padding-left: 22px; font-size: 17px;}
  .art-products-cat_indicator { right: 18px;}
  .art-products-cat_children>li { padding-left: 50px;}
  .art-products-filter { height: auto; min-height: 117px; padding-bottom: 16px;}
  .art-products-filter_head { width: 110px; height: 100%; padding-left: 30px; font-size: 21px; background-size: 110px 100%;}
  .art-products-filter_body { padding: 20px 16px 0 134px;}
  .art-products-filter_row { -webkit-flex-wrap: wrap; flex-wrap: wrap; height: auto;}
  .art-products-filter_row + .art-products-filter_row { margin-top: 6px;}
  .art-products-filter_item, .art-products-filter_row + .art-products-filter_row .art-products-filter_item { margin: 0 26px 8px 0; font-size: 15px;}
  .art-products-cards { gap: 30px 26px;}
  .art-products-card { height: 430px;}
  .art-products-card_img { height: 285px;}
  .art-products-card_info { height: 143px; padding: 24px 26px 0;}
  .art-products-card_info::after { -webkit-transform: scale(.86); transform: scale(.86); -webkit-transform-origin: right top; transform-origin: right top;}
  .art-products-tool { top: 700px;}
  .art-footer { padding-top: 70px;}
  .art-footer_top { padding-bottom: 40px;}
  .art-footer-container { padding-top: 52px; padding-bottom: 70px;}
  .art-footer_col h4 { font-size: 23px; margin-bottom: 28px;}
}
@media (max-width:1280px) {
  .art-products-banner_sub { font-size: 26px; line-height: 34px;}
  .art-products { padding: 56px 0 70px; background-image: -webkit-linear-gradient(left, #F1F4F9 0, #F1F4F9 300px, #fff 300px); background-image: linear-gradient(90deg, #F1F4F9 0, #F1F4F9 300px, #fff 300px);}
  .art-products_layout { padding: 0 30px 0 20px;}
  .art-products-side { width: 250px; margin-right: 30px;}
  .art-products-cat_title { height: 52px; font-size: 16px;}
  .art-products-cat_indicator { top: 26px; right: 18px;}
  .art-products-cat_children>li>a { font-size: 14px;}
  .art-products-filter { min-height: 100px;}
  .art-products-filter_head { width: 92px; height: 100%; padding: 18px 0 0 22px; font-size: 18px; line-height: 30px; background-size: 92px 100%;}
  .art-products-filter_body { padding: 20px 16px 0 112px;}
  .art-products-filter_item, .art-products-filter_row + .art-products-filter_row .art-products-filter_item { margin: 0 22px 8px 0; font-size: 14px;}
  .art-products-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px;}
  .art-products-card { height: 400px;}
  .art-products-card_img { height: 250px;}
  .art-products-card_info { height: 148px; padding: 20px 22px 0;}
  .art-products-card_title { font-size: 20px; line-height: 26px;}
  .art-products-card_desc { margin-top: 8px; font-size: 14px; line-height: 24px;}
  .art-products-pager { margin-top: 40px;}
  .art-products-tool { top: 560px; width: 54px;}
  .art-products-tool a { height: 48px;}
  .art-products-tool a svg { width: 22px; height: 22px;}
  .art-footer_top { padding-bottom: 32px;}
  .art-footer-container { padding-top: 40px; padding-bottom: 50px;}
  .art-footer_bottom { padding-top: 24px;}
  .art-footer_col h4 { font-size: 20px; margin-bottom: 22px;}
}
@media (max-width:1080px) {
  .art-products { background-image: none; background-color: #F1F4F9;}
  .art-products_layout { -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: stretch; align-items: stretch; padding: 0 20px;}
  .art-products-side { width: 100%; margin-right: 0; margin-bottom: 20px;}
  .art-products-main { background-color: #fff; border-radius: 8px; padding: 16px 16px 24px;}
  .art-products-tool { display: none;}
  .art-footer_top { -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; gap: 16px;}
}
@media (max-width:767px) {
  .art-products-banner_sub { font-size: 16px; line-height: 24px; letter-spacing: 0;}
  .art-products { padding: 24px 0 34px;}
  .art-products_layout { padding: 0 14px;}
  .art-products-cat_title { height: 46px; padding-left: 14px; font-size: 15px;}
  .art-products-cat_icon { margin-right: 10px;}
  .art-products-cat_indicator { display: none;}
  .art-products-main { padding: 12px 12px 20px;}
  .art-products-filter_head { position: static; width: 100%; height: 46px; padding: 0 14px; line-height: 46px; border-radius: 8px 8px 0 0; background-color: #767F86; font-size: 16px;}
  .art-products-filter_head span { display: inline;}
  .art-products-filter_head span + span { margin-left: 10px;}
  .art-products-filter_body { padding: 14px 12px 0;}
  .art-products-filter_item { margin: 0 16px 8px 0; font-size: 13px;}
  .art-products-chips { -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-top: 18px;}
  .art-products-chips_label { width: 100%; margin: 0 0 8px; font-size: 13px;}
  .art-products-chip { height: 30px; margin: 0 8px 8px 0; padding: 0 12px 0 10px; font-size: 13px;}
  .art-products-chip_val { margin-left: 8px;}
  .art-products-chip_del { margin-left: 14px; width: 10px; height: 10px;}
  .art-products-line { margin-top: 18px;}
  .art-products-cards { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 14px; margin-top: 20px;}
  .art-products-card { height: 340px;}
  .art-products-card_img { height: 210px;}
  .art-products-card_info { height: 128px; padding: 16px 16px 0;}
  .art-products-card_info::after { -webkit-transform: scale(.6); transform: scale(.6);}
  .art-products-card_title { font-size: 18px; line-height: 24px;}
  .art-products-card_desc { font-size: 13px; line-height: 21px;}
  .art-products-pager { margin-top: 24px; gap: 8px;}
  .art-products-pager a { width: 34px; height: 34px; font-size: 14px;}
  .art-footer-container { padding-top: 24px;}
}