/* 响应式页面（node_xiangyingshi）内联样式迁移
   仅作用于 body.body1200 下的 .page-h5-one 区域，避免影响其他页面 */

/* 页面级变量（本页专用） */
.body1200{ --xys-red:#ff4d4f; --xys-blue:#2f54eb; }

/* 容器宽度与标题色彩增强 */
.body1200 .page-h5-one .zcon{ max-width:1180px; margin:0 auto; }
.body1200 .page-h5-one .zcon>p{ font-weight:600; color:#1f2d3d; }
.body1200 .page-h5-one .zcon>i{ display:block; height:2px; width:86px; margin:10px auto 26px; background:linear-gradient(90deg,var(--xys-red),var(--xys-blue)); border-radius:2px; }

/* 卡片容器增强：不改变HTML结构，仅增强视觉与交互 */
.body1200 .page-h5-one .zcon>div{ position:relative; overflow:hidden; background:transparent; border:1px solid rgba(0,0,0,.06);
  border-radius:14px; padding:16px 14px; box-shadow:0 8px 22px rgba(15,35,65,.08);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background-size .45s ease; }
.body1200 .page-h5-one .zcon>div::before,
.body1200 .page-h5-one .zcon>div::after{ content:""; position:absolute; left:12px; right:12px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--xys-red),var(--xys-blue)); background-size:0% 2px; background-repeat:no-repeat; }
.body1200 .page-h5-one .zcon>div::before{ top:0; background-position:left top; }
.body1200 .page-h5-one .zcon>div::after{ bottom:0; background-position:right bottom; }
.body1200 .page-h5-one .zcon>div:hover{ transform:translateY(-6px); box-shadow:0 14px 34px rgba(15,35,65,.16), inset 0 0 0 1px rgba(47,84,235,.2); }
.body1200 .page-h5-one .zcon>div:hover::before,
.body1200 .page-h5-one .zcon>div:hover::after{ background-size:100% 2px; }

/* 左图标右文字布局优化 */
.body1200 .page-h5-one .zcon>div h3{ float:left; width:56px; text-align:left; }
.body1200 .page-h5-one .zcon>div h3 img{ width:56px; height:56px; display:block; border-radius:12px; filter:drop-shadow(0 6px 10px rgba(47,84,235,.18));
  transition:transform .28s ease; }
.body1200 .page-h5-one .zcon>div:hover h3 img{ transform:rotate(6deg) scale(1.06); }
.body1200 .page-h5-one .zcon>div h2{ float:right; width:calc(100% - 72px); text-align:left; }
.body1200 .page-h5-one .zcon>div h2 b{ display:block; font-weight:600; color:#1f2d3d; margin-bottom:6px; }
.body1200 .page-h5-one .zcon>div h2 c{ display:block; color:#4d5b6a; font-size:.92em; line-height:1.7; }

/* 入场动效：运行时添加类，默认不影响可见性（无障碍优先） */
.body1200 .page-h5-one .zcon>div.xys-reveal{ opacity:0; transform:translateY(12px); }
.body1200 .page-h5-one .zcon>div.xys-reveal.in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce){
  .body1200 .page-h5-one .zcon>div,
  .body1200 .page-h5-one .zcon>div *{ transition:none!important; }
  .body1200 .page-h5-one .zcon>div.xys-reveal{ opacity:1; transform:none; }
}

/* 三列自适应栅格 */
.body1200 .page-h5-one .zcon{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.body1200 .page-h5-one .zcon>div{ width:auto!important; margin:0!important; }
@media (max-width:1199px){ .body1200 .page-h5-one .zcon{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:639px){ .body1200 .page-h5-one .zcon{ grid-template-columns:1fr; } }
/* 标题与分隔线独占整行，避免错位导致“串行” */
.body1200 .page-h5-one .zcon>p,
.body1200 .page-h5-one .zcon>i{ grid-column:1/-1; }

/* 为前6个卡片设置不同图标与颜色 */
.body1200 .page-h5-one .zcon>div h3::before{ background-color:currentColor; }
/* 1 蓝：箭头 */
.body1200 .page-h5-one .zcon>div:nth-of-type(1) h3{ color:#1e90ff; }
.body1200 .page-h5-one .zcon>div:nth-of-type(1) h3::before{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M13.172 12L8.222 7.05l1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M13.172 12L8.222 7.05l1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>'); }
/* 2 红：齿轮 */
.body1200 .page-h5-one .zcon>div:nth-of-type(2) h3{ color:#ff4d4f; }
.body1200 .page-h5-one .zcon>div:nth-of-type(2) h3::before{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 8a4 4 0 100 8 4 4 0 000-8Zm9 4a7.9 7.9 0 01-.09 1.2l2 1.55-2 3.46-2.4-.5a8.2 8.2 0 01-2.07 1.2l-.58 2.39H9.14l-.58-2.39a8.2 8.2 0 01-2.07-1.2l-2.4.5-2-3.46 2-1.55A7.9 7.9 0 013 12c0-.41.03-.81.09-1.2L1 9.25l2-3.46 2.4.5c.64-.47 1.33-.86 2.07-1.2L8.05 2h3.9l.58 2.39c.74.34 1.43.73 2.07 1.2l2.4-.5 2 3.46-2 1.55c.06.39.09.79.09 1.2Z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 8a4 4 0 100 8 4 4 0 000-8Zm9 4a7.9 7.9 0 01-.09 1.2l2 1.55-2 3.46-2.4-.5a8.2 8.2 0 01-2.07 1.2l-.58 2.39H9.14l-.58-2.39a8.2 8.2 0 01-2.07-1.2l-2.4.5-2-3.46 2-1.55A7.9 7.9 0 013 12c0-.41.03-.81.09-1.2L1 9.25l2-3.46 2.4.5c.64-.47 1.33-.86 2.07-1.2L8.05 2h3.9l.58 2.39c.74.34 1.43.73 2.07 1.2l2.4-.5 2 3.46-2 1.55c.06.39.09.79.09 1.2Z"/></svg>'); }
/* 3 绿：柱状图 */
.body1200 .page-h5-one .zcon>div:nth-of-type(3) h3{ color:#52c41a; }
.body1200 .page-h5-one .zcon>div:nth-of-type(3) h3::before{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 21h18v-2H3v2Zm2-4h3V7H5v10Zm5 0h3V3h-3v14Zm5 0h3V11h-3v6Z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 21h18v-2H3v2Zm2-4h3V7H5v10Zm5 0h3V3h-3v14Zm5 0h3V11h-3v6Z"/></svg>'); }
/* 4 橙：链接 */
.body1200 .page-h5-one .zcon>div:nth-of-type(4) h3{ color:#fa8c16; }
.body1200 .page-h5-one .zcon>div:nth-of-type(4) h3::before{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M10.59 13.41a1 1 0 0 1 0-1.41l2.59-2.59a1 1 0 1 1 1.41 1.41l-2.59 2.59a1 1 0 0 1-1.41 0Zm-5.66 5.66a4 4 0 0 1 0-5.66l3-3a4 4 0 0 1 5.66 0 1 1 0 1 1-1.41 1.41 2 2 0 0 0-2.83 0l-3 3a2 2 0 1 0 2.83 2.83l1.29-1.29a1 1 0 1 1 1.41 1.41l-1.29 1.29a4 4 0 0 1-5.66 0Zm8.48-14.14a4 4 0 0 1 5.66 0 4 4 0 0 1 0 5.66l-3 3a4 4 0 0 1-5.66 0 1 1 0 1 1 1.41-1.41 2 2 0 0 0 2.83 0l3-3a2 2 0 0 0-2.83-2.83l-1.29 1.29a1 1 0 1 1-1.41-1.41l1.29-1.29Z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M10.59 13.41a1 1 0 0 1 0-1.41l2.59-2.59a1 1 0 1 1 1.41 1.41l-2.59 2.59a1 1 0 0 1-1.41 0Zm-5.66 5.66a4 4 0 0 1 0-5.66l3-3a4 4 0 0 1 5.66 0 1 1 0 1 1-1.41 1.41 2 2 0 0 0 2.83 0l3-3a2 2 0 0 0-2.83-2.83l-1.29 1.29a1 1 0 1 1-1.41-1.41l1.29-1.29Z"/></svg>'); }
/* 5 青：数据(数据库) */
.body1200 .page-h5-one .zcon>div:nth-of-type(5) h3{ color:#13c2c2; }
.body1200 .page-h5-one .zcon>div:nth-of-type(5) h3::before{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 3c-5 0-9 1.79-9 4v10c0 2.21 4 4 9 4s9-1.79 9-4V7c0-2.21-4-4-9-4Zm0 2c3.87 0 7 .9 7 2s-3.13 2-7 2-7-.9-7-2 3.13-2 7-2Zm7 5v2c0 1.1-3.13 2-7 2s-7-.9-7-2V10c1.95 1.21 5 2 7 2s5.05-.79 7-2Zm0 5v2c0 1.1-3.13 2-7 2s-7-.9-7-2v-2c1.95 1.21 5 2 7 2s5.05-.79 7-2Z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 3c-5 0-9 1.79-9 4v10c0 2.21 4 4 9 4s9-1.79 9-4V7c0-2.21-4-4-9-4Zm0 2c3.87 0 7 .9 7 2s-3.13 2-7 2-7-.9-7-2 3.13-2 7-2Zm7 5v2c0 1.1-3.13 2-7 2s-7-.9-7-2V10c1.95 1.21 5 2 7 2s5.05-.79 7-2Zm0 5v2c0 1.1-3.13 2-7 2s-7-.9-7-2v-2c1.95 1.21 5 2 7 2s5.05-.79 7-2Z"/></svg>'); }
/* 6 紫：分析(折线图) */
.body1200 .page-h5-one .zcon>div:nth-of-type(6) h3{ color:#7c4dff; }
.body1200 .page-h5-one .zcon>div:nth-of-type(6) h3::before{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 17h2.59l5-5 3 3 6.41-6.41L21 7l-7 7-3-3-6 6Z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 17h2.59l5-5 3 3 6.41-6.41L21 7l-7 7-3-3-6 6Z"/></svg>'); }

/* 使用可换色 SVG mask 替换原图片箭头 */
.body1200 .page-h5-one .zcon>div h3 img{ display:none!important; }
.body1200 .page-h5-one .zcon>div h3{ width:56px; }
.body1200 .page-h5-one .zcon>div h3::before{ content:""; display:block; width:56px; height:56px; border-radius:12px;
  background-color:currentColor; -webkit-mask:no-repeat center/28px 28px; mask:no-repeat center/28px 28px;
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M13.172 12L8.222 7.05l1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>');
          mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M13.172 12L8.222 7.05l1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>'); }

/* 循环不同颜色（网格序号） */
.body1200 .page-h5-one .zcon>div:nth-child(3n+1) h3{ color:#1e90ff; }
.body1200 .page-h5-one .zcon>div:nth-child(3n+2) h3{ color:#ff4d4f; }
.body1200 .page-h5-one .zcon>div:nth-child(3n)   h3{ color:#52c41a; }

