@charset "utf-8";
/* ==========================================================================
   延嘉数字科技 · 全站美术增强层  yj-art.css
   --------------------------------------------------------------------------
   设计原则（务必遵守，否则会打乱模板的绝对定位版面）：
     只做「视觉呈现」增强 —— 颜色 / 阴影 / 滤镜 / 过渡 / 装饰 / 动效
     绝不修改影响布局的尺寸：width / height / margin / padding /
     font-size / line-height / position / left / top
   层级：本文件在每页 </head> 前最后引入，特异性相同时可覆盖模板 CSS。
   ========================================================================== */

/* ---------- 01 设计变量 ---------- */
:root {
  --yj-red: #c8392b;
  --yj-red-lt: #dd5541;
  --yj-red-dk: #9d2a1f;
  --yj-navy: #0a2342;
  --yj-ink: #1b2028;
  --yj-ease: cubic-bezier(.22, .61, .36, 1);
  --yj-shadow-1: 0 2px 8px rgba(10, 35, 66, .06);
  --yj-shadow-2: 0 10px 28px -10px rgba(10, 35, 66, .20);
  --yj-shadow-3: 0 22px 48px -20px rgba(10, 35, 66, .34);
}

/* ---------- 02 字体渲染与基础质感 ---------- */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

::selection {
  background: rgba(200, 57, 43, .90);
  color: #fff;
  text-shadow: none;
}

::-moz-selection {
  background: rgba(200, 57, 43, .90);
  color: #fff;
  text-shadow: none;
}

/* ---------- 03 滚动条 ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #eef1f5;
}

::-webkit-scrollbar-thumb {
  background: #c3cbd7;
  border: 2px solid #eef1f5;
  border-radius: 10px;
  transition: background .3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--yj-red);
}

/* ---------- 04 图片质感统一（全站照片一套调性） ---------- */
img {
  filter: saturate(1.04) contrast(1.015);
}

/* 只有「带链接的图片」做 hover 反馈，避免整页图片乱闪 */
a > img {
  transition: filter .55s var(--yj-ease);
}

a:hover > img,
a:focus-visible > img {
  filter: saturate(1.12) contrast(1.045) brightness(1.025);
}

/* 图片链接内的箭头/图标类小图不做滤镜抖动 */
a > img[src*="icon"],
a > img[src*="Icon"],
a > img[src*="ICON"] {
  filter: none;
}

/* ---------- 05 文字与链接 ---------- */
.editableContent a,
.w-list-titlelink,
.w-list-piclink {
  transition: color .3s var(--yj-ease), opacity .3s var(--yj-ease);
}

.editableContent a:hover,
.w-list-titlelink:hover {
  color: var(--yj-red) !important;
}

/* 首屏浅色照片上的白色标题 —— 由 yj-art.js 加类，提升可读性与层次 */
.yj-tsh {
  text-shadow: 0 1px 3px rgba(0, 15, 30, .30), 0 12px 32px rgba(0, 15, 30, .26);
}

/* 深色区块上的大数字发光 */
.yj-num {
  text-shadow: 0 4px 18px rgba(120, 190, 255, .35), 0 1px 2px rgba(0, 0, 0, .25);
  font-variant-numeric: tabular-nums;
}

/* 大尺寸照片的统一内框：让图文边界清晰，版面更有秩序（outline 不占空间） */
.yj-frame {
  outline: 1px solid rgba(10, 35, 66, .075);
  outline-offset: -1px;
}

/* 英文小标（Service Features 一类）加字距，与中文标题形成层次 */
.yj-eyebrow {
  letter-spacing: .08em;
}

/* ---------- 06 顶部导航 ---------- */
.w-nav-item-link {
  position: relative;
  transition: color .32s var(--yj-ease) !important;
}

.w-nav-item-link::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(200, 57, 43, 0), var(--yj-red) 15%, var(--yj-red) 85%, rgba(200, 57, 43, 0));
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
  transition: transform .42s var(--yj-ease), opacity .3s ease;
}

.w-nav-item:hover > .w-nav-item-link::after,
.w-nav-item-link:hover::after,
.yj-cur .w-nav-item-link::after {
  transform: scaleX(1);
  opacity: 1;
}

.w-nav-item-link:hover,
.yj-cur .w-nav-item-link {
  color: var(--yj-red) !important;
}

/* 二级下拉：左缘红色进度条 + 柔和底纹 */
.w-subnav-link {
  position: relative;
  transition: background-color .28s ease, color .28s ease !important;
}

.w-subnav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--yj-red);
  transform: scaleY(0);
  transition: transform .3s var(--yj-ease);
}

.w-subnav-link:hover::before {
  transform: scaleY(1);
}

.w-subnav-link:hover {
  background-color: rgba(200, 57, 43, .055) !important;
  color: var(--yj-red) !important;
}

/* 下拉面板投影，使其从页面上"浮"起来 */
.w-subnav,
.w-nav-item .w-subnav-wrap {
  box-shadow: var(--yj-shadow-2);
}

/* ---------- 07 搜索框 ---------- */
.w-search-input,
.w-search-box input,
input[type="text"].w-search-key {
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.w-search-input:focus,
.w-search-box input:focus {
  outline: none;
  border-color: var(--yj-red) !important;
  box-shadow: 0 0 0 3px rgba(200, 57, 43, .12);
}

/* ---------- 08 按钮 ---------- */
.w-button {
  will-change: transform;
  transition: transform .35s var(--yj-ease), box-shadow .35s var(--yj-ease), filter .35s var(--yj-ease) !important;
}

.w-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 12px 26px -12px rgba(200, 57, 43, .62);
}

.w-button:active {
  transform: translateY(0) scale(.99);
  box-shadow: 0 4px 12px -6px rgba(200, 57, 43, .45);
}

/* 英文站的 CSS 按钮 */
.yj-en-btn {
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--yj-ease), box-shadow .35s var(--yj-ease), filter .35s var(--yj-ease);
}

.yj-en-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 12px 26px -12px rgba(200, 57, 43, .62);
}

.yj-en-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .38), rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .62s var(--yj-ease);
}

.yj-en-btn:hover::after {
  left: 120%;
}

/* ---------- 09 表单（留言/搜索/日期） ---------- */
input[type="text"],
input[type="tel"],
input[type="email"],
textarea,
select {
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--yj-red) !important;
  box-shadow: 0 0 0 3px rgba(200, 57, 43, .10);
  background-color: #fff !important;
}

/* 占位文字统一为更克制的灰 */
::placeholder {
  color: #a6b0bd;
  opacity: 1;
}

/* ---------- 10 列表与卡片 ---------- */
.w-list-titlelink {
  transition: color .3s var(--yj-ease);
}

.w-list-item,
.w-list-li {
  transition: transform .4s var(--yj-ease), box-shadow .4s var(--yj-ease);
}

/* 新闻/案例列表的分隔线更轻 */
.w-list-item + .w-list-item,
.w-list-li + .w-list-li {
  border-top-color: rgba(10, 35, 66, .07) !important;
}

/* 表格 */
.editableContent table {
  border-color: rgba(10, 35, 66, .10);
}

.editableContent td,
.editableContent th {
  border-color: rgba(10, 35, 66, .10) !important;
}

/* ---------- 11 页脚与备案区 ---------- */
.footer a,
.page-bottom--area a {
  transition: color .3s var(--yj-ease), opacity .3s var(--yj-ease);
}

.footer a:hover,
.page-bottom--area a:hover {
  color: var(--yj-red-lt) !important;
}

.page-bottom--area {
  border-top: 1px solid rgba(10, 35, 66, .06);
  background: #f7f9fb;
}

/* ---------- 12 悬浮客服按钮（widget.js 注入） ---------- */
.yjw-btn {
  background-image: linear-gradient(150deg, #d2503c 0%, var(--yj-red) 45%, var(--yj-red-dk) 100%) !important;
  box-shadow: 0 10px 26px -8px rgba(157, 42, 31, .62), 0 0 0 1px rgba(255, 255, 255, .16) inset !important;
  transition: transform .4s var(--yj-ease), box-shadow .4s var(--yj-ease) !important;
}

.yjw-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 16px 34px -10px rgba(157, 42, 31, .72), 0 0 0 1px rgba(255, 255, 255, .22) inset !important;
}

/* 呼吸光环：只用伪元素，不占布局 */
.yjw-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid rgba(200, 57, 43, .55);
  animation: yjPulse 2.8s var(--yj-ease) infinite;
  pointer-events: none;
}

@keyframes yjPulse {
  0% {
    transform: scale(1);
    opacity: .55;
  }

  70% {
    transform: scale(1.28);
    opacity: 0;
  }

  100% {
    transform: scale(1.28);
    opacity: 0;
  }
}

/* ---------- 13 滚动进场 ---------- */
.yj-rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .85s var(--yj-ease), transform .85s var(--yj-ease);
}

.yj-rv.yj-in {
  opacity: 1;
  transform: none;
}

/* ---------- 14 可访问性：键盘焦点 ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--yj-red);
  outline-offset: 2px;
}

/* ---------- 15 降低动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .yj-rv {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- 16 页脚纵向压缩（2026-11-03） ----------
   目标：收紧链接行距，把最下方分隔线与版权行上移，
   同步降低深色页脚与底部备案条高度，保持整体节奏协调。
   模板为绝对定位固定盒，故按 id 覆盖 top / height。 */
#smv_tem_13_18 { top: 15px !important; }
#smv_tem_15_30 { top: 48px !important; }
#smv_tem_21_44 { top: 64px !important; }

#smv_tem_24_52,
#smv_tem_25_53,
#smv_tem_26_21,
#smv_tem_27_34,
#smv_tem_28_50 { top: 92px !important; }

#smv_tem_23_55,
#smv_tem_29_35,
#smv_tem_30_40,
#smv_tem_31_43 { top: 126px !important; }

#smv_tem_23_55 li,
#smv_tem_29_35 li,
#smv_tem_30_40 li,
#smv_tem_31_43 li { padding: 5px 0 !important; }

#smv_tem_32_54 { top: 123px !important; }
#smv_tem_33_40,
#smv_tem_34_41 { top: 208px !important; }
#smv_tem_38_37,
#smv_tem_39_59 { top: 296px !important; }

#smv_tem_35_58 { top: 330px !important; }
#smv_tem_36_19 { top: 353px !important; }
#smv_tem_37_32 { top: 354px !important; }

#smv_tem_12_21 { height: 383px !important; }
.footer { height: 390px !important; }

/* 底部备案条：两行并一行，压缩留白 */
#all-icp-bottom { padding-top: 2px !important; }
#all-icp-bottom .page-bottom--area { padding: 7px 0 !important; }
#all-icp-bottom .bottom-content {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: auto !important;
  min-height: 0 !important;
}
#all-icp-bottom .bottom-content > div {
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
#all-icp-bottom .bottom-area .divider { display: none !important; }

/* 页脚当前栏目：模板会给 .w-nav-item.current 打红色底块，
   在深色页脚里显得突兀，这里改为纯文字高亮。 */
.footer .w-nav-item.current { background: transparent !important; }
.footer .w-nav-item.current a { background: transparent !important; color: #ffffff !important; }
.footer .w-nav-item.current > a,
.footer .w-nav-item.current > a:link,
.footer .w-nav-item.current > a:visited { color: #ff8f85 !important; }