h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;}
.logo-h1{display:inline;margin:0;padding:0;font-size:inherit;font-weight:inherit;line-height:inherit;}
/* =========================================
   义佳 Sailing3D 官方网站 - 全局样式表
   完全重写，抛弃 Mobirise 痕迹
   本文件控制整个网站的颜色、字体、布局和动画效果
   ========================================= */

/* =========================================
   前置部分：本地字体声明（@font-face）
   思源黑体 Source Han Sans CN —— SIL Open Font License 1.1，可免费商用
   许可说明见 assets/fonts/README.txt；中文优先使用，失败时回退系统字体
   字重只加载全站在用的 400/500/700（对应 Regular/Medium/Bold）
   ========================================= */
@font-face {
  font-family: 'Source Han Sans CN';
  src: url('https://sailing-public.oss-cn-huhehaote.aliyuncs.com/public/fonts/SourceHanSansCN-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;   /* 字体加载期间先用回退字体显示，避免文字长时间不可见 */
}
@font-face {
  font-family: 'Source Han Sans CN';
  src: url('https://sailing-public.oss-cn-huhehaote.aliyuncs.com/public/fonts/SourceHanSansCN-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Han Sans CN';
  src: url('https://sailing-public.oss-cn-huhehaote.aliyuncs.com/public/fonts/SourceHanSansCN-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================
   第 1 部分：CSS 变量定义（自定义属性）
   作用：定义一套全局颜色和尺寸，方便在整站各处统一使用
   优点：只需在这里改一次，全站自动生效
   ========================================= */
:root {
  --color-primary: #f26522;      /* 品牌橙色：用于标题、按钮、强调文字 */
  --color-dark: #1a1a1a;         /* 深灰色/近黑色：用于深色背景、深色文字 */
  --color-light: #f5f5f5;         /* 浅灰色：用于页面局部背景色 */
  --color-white: #ffffff;        /* 纯白色：用于文字和背景 */
  --color-text: #333333;         /* 正文深灰色：用于正文段落 */
  --font-cn: 'Source Han Sans CN', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
                                 /* 中文字体栈：优先本地思源黑体（OFL 可商用），
                                    回退系统字体（苹方/冬青黑体/系统默认）。
                                    不可用微软雅黑（非免费商用字体，已移除） */
  --font-en: 'Inter', sans-serif;
                                 /* 英文字体栈：Inter 是谷歌开源字体（OFL），
                                    经 Google Fonts 加载，失败回退系统默认无衬线 */
  --nav-height: 64px;            /* 导航栏固定高度：所有页面顶部留出此空间 */
  --max-width: 1600px;            /* 内容最大宽度：防止在超宽屏幕上过度拉伸 */
}

/* =========================================
   第 2 部分：全局重置与基础设置
   作用：清除浏览器默认差异，保证所有浏览器显示一致
   ========================================= */

/* 选择所有元素、伪元素，统一设置： */
*,
*::before,   /* ::before 表示在元素内部最前面插入虚拟元素 */
*::after {   /* ::after 表示在元素内部最后面插入虚拟元素 */
  margin: 0;        /* 清除默认外边距（浏览器默认会给 body、h1 等加 margin） */
  padding: 0;       /* 清除默认内边距（浏览器默认会给 ul、ol 等加 padding） */
  box-sizing: border-box;
                     /* 盒模型：宽高的计算方式改为包含内边距和边框 */
                     /* 不加此属性时，width 只算内容区；加了后，width 包含内容+padding+border */
}

/* html 是根元素，设置全局默认字体大小和滚动行为 */
html {
  scroll-behavior: smooth;   /* 平滑滚动：点击锚点链接时不是瞬间跳转，而是平滑动画 */
  font-size: 16px;           /* 基准字体大小：1rem = 16px，所有 rem 单位以此为基准 */
}

/* body 是页面主体容器，设置全局字体和颜色 */
body {
  font-family: var(--font-cn);      /* 使用中文字体栈 */
  color: var(--color-text);          /* 正文颜色使用 CSS 变量 #333333 */
  line-height: 1.6;                   /* 行高：字体高度的 1.6 倍，阅读更舒适 */
  overflow-x: hidden;                 /* 隐藏水平滚动条：防止内容过宽出现横向滚动 */
  background: var(--color-white);     /* 页面整体背景为白色 */
}

/* 自定义滚动条样式（仅对 Webkit 浏览器如 Chrome/Edge/Safari 生效） */
::-webkit-scrollbar {
  width: 8px;                        /* 滚动条宽度 8 像素 */
}
::-webkit-scrollbar-track {
  background: #f1f1f1;               /* 滚动条轨道背景：浅灰色 */
}
::-webkit-scrollbar-thumb {
  background: #c1c1c1;               /* 滚动条滑块颜色：灰色 */
  border-radius: 4px;                /* 滑块圆角 */
}

/* =========================================
   第 3 部分：导航栏（Navbar）
   作用：固定在页面顶部，包含 Logo 和菜单
   ========================================= */

/* 导航栏外层容器：固定定位 */
.navbar {
  position: fixed;                   /* 固定定位：不随页面滚动而移动，始终悬浮在顶部 */
  top: 0; left: 0; right: 0;        /* 贴紧视口的上、左、右三边 */
  z-index: 1000;                   /* 层级：1000 表示在最上层，覆盖其他元素 */
  height: var(--nav-height);         /* 高度引用 CSS 变量 64px */
  background: rgba(0, 0, 0, 0.25);  /* 半透明黑色背景：25% 不透明度，透出下方图片 */
  backdrop-filter: blur(12px);       /* 毛玻璃效果：模糊导航栏背后的内容 */
  -webkit-backdrop-filter: blur(12px); /* 兼容 Safari 的写法 */
  transition: background 0.35s ease; /* 背景色变化动画：0.35 秒，ease 缓动 */
}

/* 导航栏滚动后的状态：当页面滚动超过 50px 时，JS 会给 .navbar 添加 .scrolled 类 */
.navbar.scrolled {
  background: rgba(20, 20, 20, 0.25);  /* 滚动后背景色微调为深灰，仍保持 25% 不透明度 */
  box-shadow: 0 2px 20px rgba(0,0,0,0.15);  /* 添加底部阴影：0 横向偏移，2px 向下，20px 模糊，15% 黑色 */
}

/* 导航栏内部容器：限制最大宽度，居中显示 */
.navbar-container {
  max-width: var(--max-width);       /* 最大宽度 1440px */
  margin: 0 auto;                    /* 上下外边距 0，左右自动（居中） */
  padding: 0 32px;                 /* 左右内边距 32px，让内容不贴边 */
  height: 100%;                     /* 高度填满父元素 .navbar 的 64px */
  display: flex;                    /* 弹性布局：让子元素在一行排列 */
  align-items: center;              /* 垂直居中对齐 */
  justify-content: space-between;     /* 两端对齐：Logo 在左，菜单在右 */
}

/* Logo 区域：点击可返回首页 */
.navbar-logo a {
  display: flex;                   /* 弹性布局，让图片垂直居中 */
  align-items: center;              /* 垂直居中 */
  text-decoration: none;            /* 去掉链接默认下划线 */
}

/* Logo 图片 */
.navbar-logo img {
  height: 38px;                     /* 固定高度 38px，宽度自动按比例缩放 */
  width: auto;                       /* 宽度自动：保持原始宽高比 */
  display: block;                    /* 块级显示：消除图片下方默认空白间隙 */
}

/* 桌面端菜单：横向排列的导航列表 */
.navbar-menu {
  display: flex;                    /* 弹性布局：列表项横向排列 */
  list-style: none;                 /* 去掉列表默认的小圆点 */
  align-items: center;              /* 列表项垂直居中对齐 */
  gap: 4px;                         /* 列表项之间间距 4px */
}

/* 导航菜单中的链接和可点击文字 */
.navbar-menu > li > a,
.navbar-menu > li > span {
  color: var(--color-white);          /* 文字颜色白色 */
  text-decoration: none;            /* 去掉下划线 */
  font-size: 15px;                    /* 字号 15px */
  padding: 8px 14px;                 /* 上下 8px、左右 14px 的点击热区 */
  border-radius: 6px;                /* 圆角 6px */
  cursor: pointer;                   /* 鼠标悬停时变成手型 */
  transition: background 0.25s, color 0.25s;  /* 背景色和文字颜色变化动画 */
  display: block;                    /* 块级：使 padding 完整生效 */
  white-space: nowrap;               /* 文字不换行：避免菜单文字折行 */
}

/* 导航链接悬停效果：鼠标放上去时 */
.navbar-menu > li > a:hover,
.navbar-menu > li > span:hover {
  background: rgba(255,255,255,0.12);  /* 背景变成半透明白色（12% 不透明度） */
  color: var(--color-primary);         /* 文字变成橙色（品牌色） */
}

/* =========================================
   第 4 部分：下拉菜单（Dropdown）
   作用：鼠标悬停时展开二级菜单
   ========================================= */

/* 下拉菜单容器：设置相对定位，让子菜单以它为基准绝对定位 */
.dropdown {
  position: relative;               /* 相对定位：子元素 .dropdown-menu 的 top/left 以此为基准 */
}

/* 下拉菜单面板：默认隐藏 */
.dropdown-menu {
  position: absolute;               /* 绝对定位：脱离文档流，不占用下方空间 */
  top: calc(100% + 12px);            /* 顶部位置：在父元素下方 12px 处（100% 是父元素高度） */
  left: 0;                           /* 左边与父元素对齐 */
  background: rgba(30, 30, 30, 0.85); /* 深灰色半透明背景，96% 不透明度 */
  backdrop-filter: blur(8px);        /* 更强的毛玻璃模糊效果 */
  border-radius: 10px;               /* 圆角 10px */
  padding: 20px 20px;                /* 内部留白：上下 20px，左右 24px */
  min-width: 220px;                  /* 最小宽度 220px，保证菜单不会太窄 */
  opacity: 0;                        /* 默认完全透明（看不见） */
  visibility: hidden;                /* 默认不可见，且不可交互（鼠标点击无效） */
  transform: translateY(-8px);      /* 默认向上偏移 8px（动画起始位置） */
  transition: all 0.3s ease;          /* 所有属性变化 0.3 秒 ease 缓动 */
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);  /* 底部阴影：营造悬浮感 */
}

/* 鼠标悬停在 .dropdown 上时，显示 .dropdown-menu */
.dropdown:hover .dropdown-menu {
  opacity: 1;                        /* 完全不透明（可见） */
  visibility: visible;                /* 可见且可交互 */
  transform: translateY(0);          /* 回到原位（从上方 8px 滑入的动画） */
}

/* 下拉菜单中不同组之间的分隔线（如"微纳熔覆系列"和"芳颜系列"之间） */
.dropdown-group + .dropdown-group {
  margin-top: 16px;                   /* 两组之间间距 16px */
  padding-top: 16px;                  /* 上方内边距 16px */
  border-top: 1px solid rgba(255,255,255,0.08);  /* 顶部 1px 半透明白色分隔线 */
}

/* 下拉菜单中的分组标题（如"义佳·微纳熔覆系列"） */
.dropdown-title {
  color: var(--color-primary);       /* 橙色 */
  font-size: 14px;                    /* 字号 14px */
  font-weight: 700;                   /* 字重粗体 */
  margin-bottom: 8px;                 /* 与下方链接间距 8px */
  display: block;                     /* 块级显示 */
  letter-spacing: 0.05em;             /* 字间距 0.05em，微微拉开 */
}

/* 下拉菜单中的链接项 */
.dropdown-menu a {
  color: rgba(255,255,255,0.85);    /* 白色 85% 不透明度，比纯白色柔和 */
  text-decoration: none;            /* 去掉下划线 */
  display: block;                    /* 块级：整行可点击 */
  padding: 6px 0;                    /* 上下 6px，左右 0 */
  font-size: 14px;                    /* 字号 14px */
  transition: color 0.2s, padding-left 0.2s;  /* 颜色和左内边距动画 */
}

/* 下拉菜单链接悬停：鼠标放上去时 */
.dropdown-menu a:hover {
  color: var(--color-white);           /* 文字变纯白色 */
  padding-left: 6px;                   /* 向右微移 6px（动画效果） */
}

/* =========================================
   第 5 部分：通用区块（Section）与图片容器
   作用：每个页面由多个 section 堆叠而成，每个 section 放一张大图
   ========================================= */

/* 等比缩放框架：设计稿宽度容器，配合 main.js 第五部分的 zoom 使用。
   页面内容按 1920px 设计稿制作，JS 计算 缩放比 = 视口宽 / 1920 后对
   本容器和导航栏施加 zoom，实现"整体等比缩放、相对位置不变"的 PC 专属框架 */
.design-frame {
  width: 1920px;                        /* 固定为设计稿宽度，内部所有 vw 已换算为此宽度下的 px */
  margin: 0 auto;                       /* 视口大于 1920 时（2K/4K 显示器）水平居中 */
}

/* 页面区块：一个 section = 一张大图区域 */
.section {
  position: relative;                /* 相对定位：为内部的文字覆盖层提供定位基准 */
  width: 100%;                        /* 宽度填满整个屏幕 */
  overflow: hidden;                   /* 隐藏溢出内容：防止图片过大撑出容器 */
}

/* 区块中的图片：自适应全宽 */
.section-img {
  width: 100%;                        /* 宽度填满父容器 */
  height: auto;                       /* 高度自动：保持原始宽高比 */
  display: block;                     /* 块级：消除图片下方默认留白 */
}

/* 文字覆盖层：悬浮在图片上方的文字 */
.text-overlay {
  position: absolute;                 /* 绝对定位：基于最近的相对定位父元素（.section） */
  z-index: 2;                         /* 层级 2：确保文字在图片（z-index 默认 0）之上 */
  pointer-events: auto;               /* 允许鼠标交互：文字本身可点击、可选中 */
}

/* =========================================
   第 6 部分：定位预设类（文字覆盖层的位置）
   作用：通过预定义类快速控制文字在图片上的位置
   说明：这些类与 .text-overlay 组合使用
   ========================================= */

/* 顶部居中：文字在图片顶部，水平居中 */
.pos-top-center {
  top: 7%;                            /* 距离顶部 7% */
  left: 50%;                          /* 左边距 50% */
  transform: translateX(-50%);        /* 向左回退自身宽度的一半，实现水平居中 */
  text-align: center;                  /* 文字水平居中 */
}

/* 顶部左对齐：文字在图片左上角 */
.pos-top-left {
  top: 7%;                            /* 距离顶部 7% */
  left: 5%;                           /* 距离左边缘 5% */
  text-align: left;                   /* 文字左对齐 */
}

/* 左侧垂直居中 */
.pos-center-left {
  top: 50%;                           /* 顶部到中线 */
  left: 5%;                           /* 左边缘 5% */
  transform: translateY(-50%);        /* 向上回退自身高度的一半，实现垂直居中 */
  text-align: left;                   /* 左对齐 */
}

/* 底部居中：文字在图片底部 */
.pos-bottom-center {
  bottom: 7%;                         /* 距离底部 7% */
  left: 50%;                          /* 水平中心 */
  transform: translateX(-50%);        /* 水平居中 */
  text-align: center;                  /* 居中 */
}

/* =========================================
   第 7 部分：文字样式预设类
   作用：预定义几种常用的文字样式，方便在 HTML 中直接引用
   ========================================= */

/* 大标题：如首页轮播中的"义佳·微纳熔覆" */
.style-title-lg {
  font-size: clamp(2.2rem, 4.2vw, 3.8rem);  /* 动态字号：最小 2.2rem，最大 3.8rem，中间值随视口宽度的 4.2% 变化 */
  font-weight: 700;                          /* 粗体 */
  letter-spacing: 0.12em;                    /* 字间距 */
  line-height: 1.2;                          /* 行高 */
  margin-bottom: 12px;                       /* 下方间距 */
  text-shadow: 0 4px 20px rgba(0,0,0,0.4);   /* 文字阴影：右下 4px，模糊 20px，黑色 40% 透明度，增加可读性 */
}

/* 中标题：如"关于塞领" */
.style-title-md {
  font-size: clamp(1.8rem, 3vw, 2.8rem);     /* 动态字号：中号标题 */
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  margin-bottom: 10px;
}

/* 副标题：如"微纳熔覆高端金属烤瓷牙" */
.style-subtitle {
  font-size: clamp(0.9rem, 1.4vw, 1.2rem);   /* 动态字号：副标题 */
  letter-spacing: 0.2em;                      /* 较宽字间距，营造高级感 */
  margin-bottom: 20px;
  line-height: 1.5;
}

/* 标语/口号：如"无惧核磁 · 拒绝过敏 · 不伤对颌" */
.style-slogan {
  font-size: clamp(1rem, 1.8vw, 1.5rem);       /* 动态字号：标语 */
  letter-spacing: 0.25em;                     /* 更宽字间距 */
  font-weight: 500;                           /* 中等粗细 */
  line-height: 1.6;
}

/* 正文段落 */
.style-body {
  font-size: clamp(1rem, 1.4vw, 1.2rem);   /* 动态字号：正文 */
  line-height: 1.9;                            /* 行高 1.9，阅读舒适 */
  max-width: 850px;                            /* 最大宽度 760px：超过此宽度自动换行，避免行过长 */
  letter-spacing: 0.04em;                      /* 微微加宽字间距 */
}

/* 颜色修饰类：直接改变文字颜色 */
.text-orange { color: var(--color-primary); }                    /* 橙色：品牌色 */
.text-white { color: var(--color-white); text-shadow: 0 2px 12px rgba(0,0,0,0.35); }  /* 白色 + 阴影 */
.text-dark { color: var(--color-dark); }                         /* 深色 */
.text-gray { color: #666; }                                       /* 灰色 */

/* =========================================
   第 8 部分：轮播组件（Carousel）
   作用：首页三张图片自动轮播切换
   ========================================= */

/* 轮播最外层容器：隐藏溢出内容，只显示一张图 */
.carousel {
  position: relative;                 /* 相对定位：为控制按钮和圆点提供定位基准 */
  overflow: hidden;                   /* 隐藏超出容器的图片：只显示当前一张 */
}

/* 轮播轨道：内部所有图片横向排列，通过 transform 移动显示不同图片 */
.carousel-track {
  display: flex;                     /* 弹性布局：让所有 .carousel-slide 横向排成一行 */
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);  /* 移动动画：0.6 秒，贝塞尔曲线让动画更自然 */
}

/* 每张轮播图：宽度等于容器宽度，确保一次只显示一张 */
.carousel-slide {
  min-width: 100%;                    /* 最小宽度 100%：保证每张图至少占满整个容器 */
  position: relative;                 /* 相对定位：为内部文字覆盖层提供基准 */
}

/* 轮播圆点指示器：位于轮播底部中央 */
.carousel-dots {
  position: absolute;                  /* 绝对定位：悬浮在轮播图上方 */
  bottom: 24px;                       /* 距离底部 24px */
  left: 50%;                          /* 水平中心 */
  transform: translateX(-50%);          /* 回退自身宽度一半，实现水平居中 */
  display: flex;                      /* 弹性布局：圆点横向排列 */
  gap: 10px;                           /* 圆点间距 10px */
  z-index: 5;                          /* 层级 5：在图片和文字之上 */
}

/* 单个圆点 */
.carousel-dot {
  width: 10px; height: 10px;          /* 尺寸 10x10 像素 */
  border-radius: 50%;                 /* 圆角 50%：变成圆形 */
  background: rgba(255,255,255,0.45);  /* 白色 45% 不透明度：默认半透明 */
  cursor: pointer;                      /* 手型鼠标：可点击 */
  transition: background 0.3s, transform 0.3s;  /* 颜色和缩放动画 */
  border: none;                        /* 去掉边框 */
  padding: 0;                          /* 去掉内边距 */
}

/* 当前激活的圆点：更亮且稍大 */
.carousel-dot.active {
  background: var(--color-white);      /* 纯白色 */
  transform: scale(1.2);              /* 放大到 1.2 倍 */
}

/* 左右箭头按钮容器：覆盖在轮播图两侧 */
.carousel-arrows {
  position: absolute;                  /* 绝对定位 */
  top: 50%; left: 0; right: 0;        /* 垂直居中，左右贴边 */
  transform: translateY(-50%);         /* 向上回退自身高度一半，实现垂直居中 */
  display: flex;                        /* 弹性布局 */
  justify-content: space-between;         /* 两端对齐：左箭头在左，右箭头在右 */
  padding: 0 24px;                     /* 左右留白 24px */
  pointer-events: none;                /* 默认不拦截鼠标事件：让图片区域仍可点击 */
  z-index: 5;                          /* 层级 5 */
}

/* 单个箭头按钮 */
.carousel-arrow {
  width: 44px; height: 44px;            /* 按钮尺寸 44x44 像素 */
  border-radius: 50%;                  /* 圆形 */
  background: rgba(0,0,0,0.25);        /* 半透明黑色背景 */
  color: var(--color-white);            /* 箭头颜色白色 */
  border: none;                         /* 无边框 */
  cursor: pointer;                       /* 手型 */
  display: flex;                          /* 弹性布局：让箭头符号居中 */
  align-items: center;                     /* 垂直居中 */
  justify-content: center;                 /* 水平居中 */
  font-size: 18px;                       /* 箭头符号字号 */
  pointer-events: auto;                   /* 恢复鼠标交互：按钮本身可点击 */
  transition: background 0.3s;            /* 背景色动画 */
  backdrop-filter: blur(4px);             /* 轻微毛玻璃 */
}

/* 箭头悬停：鼠标放上去时背景变深 */
.carousel-arrow:hover {
  background: rgba(0,0,0,0.5);           /* 黑色 50% 不透明度 */
}

/* =========================================
   第 9 部分：图片画廊（关于我们页）
   作用：横向滚动的图片展示区域
   ========================================= */

/* 画廊外层容器 */
.gallery-carousel {
  position: relative;                  /* 相对定位 */
  overflow: hidden;                     /* 隐藏溢出：只显示部分图片，其余需要滚动 */
  padding: 40px 0;                      /* 上下留白 40px，左右 0 */
  background: #f8f8f8;                   /* 浅灰色背景，区别于白色页面背景 */
}

/* 画廊轨道：横向排列所有图片 */
.gallery-track {
  display: flex;                         /* 弹性布局：横向排列 */
  gap: 24px;                             /* 图片间距 24px */
  transition: transform 0.5s ease;         /* 滑动动画：0.5 秒 ease */
  padding: 0 48px;                         /* 左右留白 48px */
}

/* 单张画廊图片卡片 */
.gallery-slide {
  flex: 0 0 auto;                          /* 不伸缩，不收缩，按自身宽度显示 */
  width: 320px;                            /* 固定宽度 320px */
  border-radius: 12px;                      /* 圆角 12px */
  overflow: hidden;                          /* 隐藏溢出：图片圆角裁剪 */
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);     /* 柔和阴影 */
  background: var(--color-white);               /* 白色背景 */
}

/* 画廊图片 */
.gallery-slide img {
  width: 100%; height: 240px;              /* 宽度填满，高度固定 240px */
  object-fit: cover;                          /* 裁剪填充：保持比例，多余部分裁剪 */
  display: block;                             /* 块级显示 */
}

/* =========================================
   第 10 部分：防伪查询表单（认证查询页）
   作用：在页面中央悬浮的输入框和按钮
   ========================================= */

/* 表单容器：绝对定位在图片中央 */
.auth-form {
  position: absolute;                         /* 绝对定位：基于父元素 .section */
  top: 50%; left: 50%;                         /* 左上角到中心 */
  transform: translate(-50%, -50%);            /* 回退自身宽高一半，实现完美居中 */
  z-index: 5;                                   /* 层级 5 */
  display: flex;                                 /* 弹性布局：输入框和按钮横向排列 */
  gap: 12px;                                      /* 间距 12px */
  align-items: center;                            /* 垂直居中 */
}

/* 输入框 */
.auth-input {
  width: 280px;                                   /* 固定宽度 280px */
  padding: 14px 20px;                             /* 上下 14px，左右 20px */
  border: 1px solid rgba(255,255,255,0.3);         /* 半透明白色边框 */
  border-radius: 8px;                             /* 圆角 8px */
  background: rgba(0,0,0,0.4);                       /* 半透明黑色背景 */
  backdrop-filter: blur(8px);                         /* 毛玻璃效果 */
  color: var(--color-white);                          /* 文字白色 */
  font-size: 15px;                                     /* 字号 15px */
  outline: none;                                        /* 去掉焦点时的蓝色外边框 */
  transition: border-color 0.3s;                         /* 边框颜色动画 */
}

/* 输入框占位符文字（placeholder）的颜色 */
.auth-input::placeholder {
  color: rgba(255,255,255,0.6);                          /* 白色 60% 不透明度 */
}

/* 输入框获得焦点：用户点击输入框时 */
.auth-input:focus {
  border-color: var(--color-primary);                      /* 边框变橙色 */
}

/* 查询按钮 */
.auth-btn {
  padding: 14px 32px;                                    /* 上下 14px，左右 32px */
  border: none;                                           /* 无边框 */
  border-radius: 8px;                                      /* 圆角 8px */
  background: var(--color-primary);                           /* 橙色背景 */
  color: var(--color-white);                                   /* 白色文字 */
  font-size: 15px;                                              /* 字号 15px */
  font-weight: 600;                                              /* 半粗体 */
  cursor: pointer;                                                /* 手型 */
  transition: background 0.3s, transform 0.2s;                       /* 背景色和位移动画 */
  text-decoration: none;                                          /* 去掉下划线（因为是 <a> 标签） */
  display: inline-block;                                           /* 行内块级：保留 padding 和 margin */
}

/* 按钮悬停：鼠标放上去时 */
.auth-btn:hover {
  background: #e0551a;                                                /* 背景变深橙色 */
  transform: translateY(-2px);                                         /* 向上微移 2px（悬浮效果） */
}

/* =========================================
   第 11 部分：页脚联系条
   作用：通用底部区域，包含电话、地址、邮箱和公众号提示
   ========================================= */

/* 页脚外层：相对定位，承载背景和覆盖层 */
.footer-bar {
  position: relative;                                                   /* 相对定位 */
  width: 100%;                                                            /* 全宽 */
  overflow: hidden;                                                        /* 隐藏溢出 */
}

/* 页脚背景图片 */
.footer-bar-img {
  width: 100%; height: auto;                                               /* 全宽，高度自适应 */
  display: block;                                                          /* 块级显示 */
}

/* 页脚内容覆盖层：悬浮在图片上方 */
.footer-overlay {
  position: absolute;                                                        /* 绝对定位：基于 .footer-bar */
  top: 0; left: 0; width: 100%; height: 100%;                                /* 填满整个父元素 */
  display: flex;                                                                /* 弹性布局 */
  align-items: center;                                                           /* 垂直居中 */
  padding: 0 5%;                                                                 /* 左右留白 5% */
  pointer-events: none;                                                           /* 默认不拦截鼠标：让图片可点击 */
}

/* 页脚内容容器：左右分列（左侧信息，右侧公众号） */
.footer-content {
  display: flex;                                                                   /* 弹性布局 */
  justify-content: space-between;                                                    /* 两端对齐 */
  align-items: center;                                                                /* 垂直居中 */
  width: 100%;                                                                          /* 全宽 */
  max-width: var(--max-width);                                                           /* 最大宽度 1440px */
  margin: 0 auto;                                                                        /* 居中 */
  pointer-events: auto;                                                                   /* 恢复鼠标交互 */
}

/* 左侧联系信息（电话、地址、邮箱） */
.footer-info p {
  color: var(--color-white);                                                                /* 白色文字 */
  font-size: 16px;                                                                           /* 字号 16px */
  margin: 12px 0;                                                                              /* 上下间距 12px */
  display: flex;                                                                                /* 弹性布局：图标和文字在一行 */
  align-items: center;                                                                             /* 垂直居中 */
  gap: 8px;                                                                                         /* 图标和文字间距 8px */
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);                                                             /* 文字阴影，增强可读性 */
}

/* 图标（电话、定位、邮箱） */
.footer-info .icon {
  width: 30px; height: 30px;                                                                             /* 图标区域尺寸 */
  display: inline-flex;                                                                                     /* 行内弹性布局 */
  align-items: center;                                                                                        /* 垂直居中 */
  justify-content: center;                                                                                      /* 水平居中 */
}

/* 右侧公众号区域 */
.footer-qr {
  text-align: top;                                                                                           /* 居中 */
}

.footer-qr p {
  color: var(--color-white);                                                                                      /* 白色文字 */
  font-size: 12px;                                                                                                  /* 字号 12px */
  margin-bottom: 6px;                                                                                                 /* 下方间距 6px */
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);                                                                               /* 阴影 */
}

.footer-qr img {
  width: 100px; height: 100px;                                                                                              /* 二维码尺寸 */
  border-radius: 4px;                                                                                                       /* 圆角 */
}

/* 版权信息栏 */
.copyright {
  text-align: center;                                                                                                        /* 居中 */
  padding: 18px 24px;                                                                                                         /* 上下 18px，左右 24px */
  background: #151515;                                                                                                          /* 深色背景 #151515 */
  color: #888;                                                                                                                   /* 灰色文字 */
  font-size: 13px;                                                                                                                /* 字号 13px */
  letter-spacing: 0.05em;                                                                                                           /* 微微加宽字间距 */
}

/* =========================================
   第 12 部分：设备介绍页（page10.html）
   作用：设备页的顶部 Banner、吸顶次级导航、锚点式机型区块
   页面结构：.device-banner → #device-nav → 多个 .device-block
   交互：main.js 第六部分（scroll-spy）处理锚点平滑跳转与当前项高亮
   ========================================= */

/* 顶部 Banner：固定 480px 高，图片居中裁剪铺满，标题叠加在左侧 */
.device-banner {
  position: relative;                 /* 相对定位：为标题覆盖层和渐变层提供定位基准 */
  height: 480px;                      /* 固定高度：区别于 .section 的高度自适应 */
  overflow: hidden;                   /* 隐藏溢出：图片裁剪时不撑出容器 */
}
.device-banner img {
  width: 100%; height: 100%;          /* 填满整个 Banner 区域 */
  object-fit: cover;                  /* 裁剪填充：保持比例，多余部分裁掉 */
  display: block;                     /* 块级：消除图片下方默认留白 */
}
/* Banner 左侧压暗渐变：保证左侧白色标题文字在亮图上可读 */
.device-banner::after {
  content: "";
  position: absolute; inset: 0;       /* 填满整个 Banner */
  background: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 70%);
}
/* Banner 标题覆盖层：垂直居中，左缘与全站统一网格公式对齐 */
.device-banner-title {
  position: absolute;
  top: 50%; transform: translateY(-50%);              /* 垂直居中 */
  left: max(32px, calc((100% - 1600px) / 2 + 32px));  /* 与首页 #id2、页脚同一左缘公式 */
  z-index: 2;                                          /* 在渐变层之上 */
}

/* 次级导航：锚点跳转式（参考 page8 的 #id17-nav），
   吸顶在主导航（64px）正下方；点击平滑滚动到对应机型区块，
   滚动时由 main.js 第六部分自动把当前机型高亮为橙色（spy-active）。
   注意：链接样式只能集中写在这里，不要写内联 style，
   否则内联优先级会盖住 hover / spy-active 的变色效果 */
.device-nav {
  position: sticky;
  top: 64px;                          /* 吸顶位置：正好贴在 64px 主导航下方 */
  z-index: 900;                       /* 低于主导航（1000），不遮挡下拉菜单 */
  background: var(--color-white);
  border-bottom: 1px solid #eee;      /* 与下方区块的分隔线 */
  display: flex;
  justify-content: center;            /* 文字项整体水平居中 */
  gap: 64px;
  font-size: 17px;
  letter-spacing: 0.05em;
  padding: 18px 0;
}
.device-nav a { color:#555; text-decoration:none; padding-bottom:2px; border-bottom:2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; cursor:pointer; }
.device-nav a:hover { color: var(--color-primary); }   /* 悬停：品牌橙 */
.device-nav a.spy-active {
  color: var(--color-primary);        /* 当前阅读区块对应项：品牌橙（页面打开默认第一项） */
  font-weight: 700;
  border-bottom-color: var(--color-primary);           /* 激活项带橙色下划线 */
}

/* 机型区块：四个区块整页依次排开展示，点击次级导航锚点跳转到对应区块。
   scroll-margin-top 124px = 主导航 64px + 次级导航约 60px，
   保证无 JS 的原生锚点跳转时区块上边缘也不被两层导航遮住。
   上下留白压缩到 60px：配合右侧内容紧凑排版，整块高度控制在
   视口可用高度（约 950 设计稿 px）以内，点击导航后一屏正好完整显示 */
.device-block { padding: 40px 0; scroll-margin-top: 80px; }
.device-block.alt { background: #f8f8f8; }   /* 偶数区块浅灰底，与白底区块交替 */

/* 区块内容容器：左右结构（产品图 + 产品介绍），
   按全站统一的 1600px 居中网格，两侧留白随视口自适应 */
.device-panel {
  display: flex;
  align-items: center;                /* 图片与文字垂直居中对齐 */
  gap: 80px;                          /* 左右两栏之间的间距 */
  margin: 0 max(32px, calc((100% - 1600px) / 2 + 32px));
}
/* 偶数区块图片右置：row-reverse 反转左右顺序，形成左右交错排版 */
.device-panel.reverse { flex-direction: row-reverse; }

/* 左侧产品图：宽度 50%，图片高度约 480px，不撑高区块 */
.device-photo { width: 50%; flex-shrink: 0; display: flex; justify-content: center; }
.device-photo img {
  max-width: 100%;
  max-height: 640px;                /* 限制高度：竖版产品图也不会把区块撑出一屏 */
  width: auto; height: auto;
  display: block;
  /* 透明背景产品图不要用 box-shadow/border-radius（会沿矩形边缘画出可见边界），
     用 drop-shadow 沿设备轮廓投射柔和阴影 */
  filter: drop-shadow(0 24px 30px rgba(0,0,0,0.16));
}

/* 右侧产品介绍 */
.device-info { flex: 1; min-width: 0; }   /* min-width:0 防止长文字撑破弹性布局 */

/* 产品名称：型号大字 + 一句标语 */
.device-name {
  font-size: 35px;
  font-weight: 700;
  color: var(--color-dark);
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.device-tagline {
  margin-top: 10px;
  font-size: 14px;                  /* 与 .style-subtitle 同字号（1920 设计稿下） */
  color: #888;
  letter-spacing: 0.08em;
}

/* 区块小标题（产品特性 / 产品参数）：左侧橙色竖条 + 粗体文字 */
.device-info-title {
  margin-top: 32px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-dark);
  display: flex;
  align-items: center;
  gap: 12px;
}
.device-info-title::before {
  content: "";
  width: 5px; height: 22px;
  background: var(--color-primary);   /* 品牌橙竖条 */
  border-radius: 3px;
}

/* 产品特性列表：橙色小方块作为列表符号 */
.device-features {
  margin-top: 12px;
  list-style: none;
}
.device-features li {
  position: relative;                 /* 为 ::before 小方块提供定位基准 */
  padding-left: 24px;
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.8;
  color: #555;
}
.device-features li::before {
  content: "";
  position: absolute;
  left: 0; top: 12px;                 /* 与首行文字垂直对齐 */
  width: 8px; height: 8px;
  background: var(--color-primary);
  border-radius: 2px;
}

/* 产品参数：标签 + 数值的两列行，行间细分隔线 */
.device-specs { margin-top: 6px; }
.device-spec-row {
  display: flex;
  align-items: baseline;              /* 标签和数值按文字基线对齐 */
  gap: 24px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;      /* 行间分隔线 */
}
.device-spec-row dt {
  width: 150px;
  flex-shrink: 0;                     /* 标签列固定宽度，不被压缩 */
  font-size: 14px;
  font-weight: 700;
  color: var(--color-dark);
}
.device-spec-row dd {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
}


/* =========================================
   第 13 部分：软件介绍页（page11.html）
   作用：软件页的顶部 Banner（复用 .device-banner）、页面引言、软件清单
   页面结构：.device-banner → .software-intro → 多个 .software-item
   ========================================= */

/* 页面引言：标题 + 一段总述，按全站 1600px 居中网格 */
.software-intro {
  margin: 0 max(32px, calc((100% - 1440px) / 2 + 32px));
  padding: 64px 0 48px;
  text-align: center;
}
.software-intro-title {
  font-size: 35px;
  font-weight: 700;
  color: var(--color-dark);
  letter-spacing: 0.02em;
}
.software-intro-desc {
  margin: 20px auto 0;
  max-width: 1100px;
  font-size: 15px;
  line-height: 2;
  color: #666;
}

/* 软件清单：每个软件一个条目区块，偶数条目浅灰底，与全站区块节奏一致 */
.software-item { padding: 48px 0; }
.software-item.alt { background: #f8f8f8; }
.software-item-inner {
  margin: 0 max(32px, calc((100% - 1440px) / 2 + 32px));
}

/* 条目头部：整组靠左对齐 —— 橙色竖条 + 软件代号（粗体大字）+ 中文全称 + 版本号标签；
   align-items: center 让竖条、代号、中文全称、版本号在行内上下居中对齐 */
.software-item-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-left: 20px;
  border-left: 5px solid var(--color-primary);
}
.software-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-dark);
  letter-spacing: 0.02em;
}
.software-cn {
  font-size: 20px;
  color: #555;
  font-weight: 500;
}
.software-ver {
  font-size: 16px;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 20px;
  padding: 3px 14px;
  letter-spacing: 0.05em;
}

/* 条目简介：纯文字段落，靠左对齐，左缘与头部竖条后的文字对齐 */
.software-desc {
  margin-top: 14px;
  padding-left: 25px;
  font-size: 18px;
  line-height: 2;
  color: #555;
}

/* ============================================================
   翻页组件（全站共用一份定义，勿在页面内重复定义以免样式漂移）
   使用方：videos.html（视频内容页）、news/index.html（最新资讯列表页）
   结构：.pagination > .page-btn + .page-info + .page-btn
   显示：默认 display:none，总页数 > 1 时由 JS 加 .show 显示
   ============================================================ */
.pagination {
  display: none;               /* 默认隐藏，由 JS 控制显示 */
  justify-content: center;
  align-items: center;
  gap: 48px;
  padding: 40px 0 8px;
}
.pagination.show { display: flex; }
.page-btn {
  font-size: 15px;
  color: var(--color-primary);
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease;
}
.page-btn:hover { text-decoration: underline; }
.page-btn.disabled {
  color: #ccc;
  cursor: default;
  text-decoration: none;
}
.page-info {
  font-size: 15px;
  color: #999;
  font-family: var(--font-en);
  min-width: 48px;
  text-align: center;
}