/* =========================================================
   ORICO 新首页样式（独立命名空间：ni- 前缀，全部作用域在
   .ni-home 内，避免与 PHP 项目其他页面样式冲突）
   命名规范：.ni-模块__元素--修饰符（BEM 简化版）
   当前仅包含：模块1 Banner 轮播（纯图片）
   ========================================================= */

/* ---- 鸿蒙字体（复用项目 CDN 字体文件，与移动端 style.css 同源） ---- */
@font-face {
  font-family: "HarmonyOS-SemiBold";
  src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Bold.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "HarmonyOS";
  src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "HarmonyOS-Medium";
  src: url("//ow.static.f2b211.com/static/fonts/HarmonyOS_Sans_SC_Medium.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

/* ---- 作用域根节点与设计变量 ----
   字体复用项目 CDN 鸿蒙字体；rem 基准为浏览器默认 16px（不设置 html 根字号，
   不影响公共 header/footer 的 rem 体系） */
.ni-home {
  --ni-blue: #2b5bf7;          /* 品牌蓝 */
  --ni-blue-dark: #1e46d6;
  --ni-dark: #0d1724;
  --ni-bg-soft: #f5f6f8;       /* 浅灰背景 */
 
  margin: 0;
  padding: 0;
  background: #F5F5F7 ;
  font-family: 'HarmonyOS-SemiBold', 'HarmonyOS', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* =========================================================
   模块1：Banner 轮播（纯图片）
   ========================================================= */
.ni-home .ni-banner {
  background: var(--ni-bg-soft);
}
.ni-home .ni-banner__slide { position: relative; overflow: hidden; }
.ni-home .ni-banner__slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* 左右箭头（透明底，尺寸随根字号缩放） */
.ni-home .ni-banner__prev,
.ni-home .ni-banner__next {
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: transparent;
  color: #333;
}
.ni-home .ni-banner__prev::after,
.ni-home .ni-banner__next::after { font-size: 1.375rem; font-weight: 700; }

/* ---- 手机端：隐藏箭头 ---- */
@media (max-width: 560px) {
  .ni-home .ni-banner__prev,
  .ni-home .ni-banner__next { display: none; }
}

/* =========================================================
   模块2：专题图（纯图片，宽高自适应）
   ========================================================= */
.ni-home .ni-zt {
  margin-top: 1.25rem; /* 距 banner 20px（1.25rem，随根字号缩放） */
}
.ni-home .ni-zt img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
   模块3：分类图（满宽一行两张，悬停放大）
   设计稿标准 2560px：单图 1270×1000，2×1270 + 20 间距 = 2560 满宽
   ========================================================= */
.ni-home .ni-cate__grid {
  margin-top: 1.25rem;      /* 距上一模块 20px，随根字号缩放 */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;             /* 图与图之间 20px，随根字号缩放 */
}
.ni-home .ni-cate__item {
  overflow: hidden;         /* 悬停放大的图片不溢出格子 */
}
.ni-home .ni-cate__item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .35s ease;
}
.ni-home .ni-cate__item:hover img { transform: scale(1.05); }

/* =========================================================
   模块4：场景轮播（居中大图 + 两侧露出边缘）
   设计稿标准 2560px：单图 1600×1000（62.5% 宽），间距 20px，
   左右箭头 82px 圆形（黑透底白箭头），分页点白色（未选中半透明白）
   ========================================================= */
.ni-home .ni-m1 {
  margin-top: 3.75rem;      /* 距上一模块 60px，随根字号缩放 */
}
.ni-home .ni-m1__swiper { overflow: hidden; }
.ni-home .ni-m1__slide {
  width: 62.5%;             /* 1600 / 2560，两侧自动露出相邻图 */
  box-sizing: border-box;
}
.ni-home .ni-m1__slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* 左右箭头：82px 圆形、黑色透明底、白色箭头，贴中图左右内缘 */
.ni-home .ni-m1__prev,
.ni-home .ni-m1__next {
  top: 50%;
  width: 3.5rem;          /* 82px，随根字号缩放 */
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  transition: background .2s ease;
}
.ni-home .ni-m1__prev { left: calc((100% - 62.5%) / 2 + 1.5rem); }
.ni-home .ni-m1__next { right: calc((100% - 62.5%) / 2 + 1.5rem); }
.ni-home .ni-m1__prev:hover,
.ni-home .ni-m1__next:hover { background: rgba(0, 0, 0, .55); }
.ni-home .ni-m1__prev::after,
.ni-home .ni-m1__next::after { font-size: 1.35rem; font-weight: 700; }

/* 底部分页：长条，选中纯白，未选中半透明白 */
.ni-home .ni-m1__page {
  bottom: 1.25rem;
}
.ni-home .ni-m1__page .swiper-pagination-bullet {
  width: 1.375rem; height: .25rem;
  border-radius: .25rem;
  background: rgba(255, 255, 255, .4);
  opacity: 1;
  transition: background .25s ease;
}
.ni-home .ni-m1__page .swiper-pagination-bullet-active { background: #fff; }

/* ---- 手机端：箭头缩小 ---- */
@media (max-width: 560px) {
  .ni-home .ni-m1__prev,
  .ni-home .ni-m1__next {
    width: 2.75rem; height: 2.75rem;
  }
  .ni-home .ni-m1__prev { left: .75rem; }
  .ni-home .ni-m1__next { right: .75rem; }
}

/* =========================================================
   模块5：视频（自动循环播放，禁止操作）
   设计稿标准 2560px：2560×1440（16:9 满宽，视频原始比例）
   ========================================================= */
.ni-home .ni-video {
  margin-top: 3.75rem;      /* 距上一模块 60px，随根字号缩放 */
}
.ni-home .ni-video video {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;     /* 禁止一切点击/拖动/右键操作 */
}

/* =========================================================
   模块6：小轮播（满宽单图 + 左右按钮，无分页）
   设计稿标准 2560px：单图 2560×1000 满宽，
   按钮 50px 圆形（黑透底白箭头），距左右 100px
   ========================================================= */
.ni-home .ni-m2 {
  margin-top: 3.75rem;      /* 距上一模块 60px，随根字号缩放 */
}
.ni-home .ni-m2__slide { position: relative; overflow: hidden; }
.ni-home .ni-m2__slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
   模块7：关于我们（左切换 + 右展示）
   设计稿标准 2560px：标题 72px/500 #000，
   内容面板 1440×770 圆角30 白底，section 底 #F5F5F7，
   左切换列 440 宽（单项 440×144，内边距 44/50），右展示 1000×770
   ========================================================= */
.ni-home .ni-about {
  background: #F5F5F7;
  padding-bottom: 4rem;
}
.ni-home .ni-about__title {
  margin: 0;
  padding-top: 8.75rem;     /* 标题距 section 顶部 140px */
  text-align: center;
  font-size: 4.5rem;        /* 72px */
  font-weight: 500;
  color: #000;
  font-family: 'HarmonyOS-Medium', 'HarmonyOS', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 内容面板：1440×770 圆角30 白底 */
.ni-home .ni-about__panel {
  display: flex;
  width: 90rem;             /* 1440px */
  height: 48.125rem;        /* 770px */
  margin: 8.75rem auto 0;   /* 距标题 140px */
  background: #fff;
  border-radius: 1.875rem;  /* 30px */
  overflow: hidden;
}

/* 左侧切换列 */
.ni-home .ni-about__tabs {
  display: flex;
  flex-direction: column;
  width: 27.5rem;           /* 440px */
  height: calc(100% - 2.5rem); /* 扣除顶部 40px */
  margin-top: 2.5rem;       /* 距面板顶部 40px */
}
.ni-home .ni-about__tab {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 9rem;             /* 144px */
  padding: 2.75rem 3rem; /* 上下44 左右50 */
  border: 0;
  margin-top: 5%;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .3s ease;
}
.ni-home .ni-about__tab-title {
  display: block;
  font-size: 1.625rem;      /* 26px */
  font-family: 'HarmonyOS-Medium', 'HarmonyOS', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-weight: normal;
  color: #000;
  transition: color .3s ease;
}
.ni-home .ni-about__tab-desc {
  display: block;
  margin-top: .875rem;      /* 14px */
  font-size: 1.125rem;      /* 18px */
  font-family: 'HarmonyOS', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #333;
}
/* 选中态：白→#EBF1FF 从上到下渐变，标题变蓝 */
.ni-home .ni-about__tab.is-active {
  background: linear-gradient(180deg, #FFFFFF 0%, #EBF1FF 100%);
}
.ni-home .ni-about__tab.is-active .ni-about__tab-title { color: #004BFA; }

/* 右侧展示区 */
.ni-home .ni-about__show {
  position: relative;
  flex: 1;
  height: 100%;
}
.ni-home .ni-about__view {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.ni-home .ni-about__view.is-active {
  opacity: 1;
  visibility: visible;
}
.ni-home .ni-about__view > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- 品牌故事（view 2）：上图片下文字 ----
   内容区距上下 60px、左右 80px；图 841×281；
   图下 79px 标题 30px/500 #000；标题下 38px 首段；
   段落 18px #666（Metropolis），段间距 35px */
.ni-home .ni-about__story {
  box-sizing: border-box;
  height: 100%;
  padding: 3.75rem 5rem;    /* 60px 80px */
  overflow: hidden;
}
.ni-home .ni-about__story-img {
  width: 100%;              /* 841px ≈ 内容区宽，随缩放自适应 */
  height: auto;
}
.ni-home .ni-about__story-title {
  margin: 4rem 0 0;    /* 距图 79px */
  font-size: 1.875rem;      /* 30px */
  font-weight: 500;
  color: #000;
  font-family: 'HarmonyOS-Medium', 'HarmonyOS', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.ni-home .ni-about__story-text {
  margin: 1rem 0 0;    /* 段间距 35px */
  font-size: 1.125rem;      /* 18px */
  line-height: 1.5;
  color: #666;
  font-family: 'HarmonyOS', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.ni-home .ni-about__story-text:first-of-type {
  margin-top: 2.375rem;     /* 首段距标题 38px */
}

/* ---- 品牌里程（view 3）：上图 + 标题 + 可滚动时间线 ----
   距上 60px 左右 80px；图 841×281；图下 79px 标题 30px/500 #000；
   时间线：左侧蓝色圆点 + 蓝色虚线，年份 22px #000，
   年份下 10px 说明 18px #666 */
.ni-home .ni-about__mile {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  padding: 3.75rem 5rem 0;  /* 上60 左右80，底部交给滚动区 */
  overflow: hidden;
}
.ni-home .ni-about__mile-img {
  width: 100%;
  height: auto;
  flex-shrink: 0;
}
.ni-home .ni-about__mile-title {
  margin: 4rem 0 0;    /* 距图 79px */
  font-size: 1.875rem;      /* 30px */
  font-weight: 500;
  color: #000;
  flex-shrink: 0;
  font-family: 'HarmonyOS-Medium', 'HarmonyOS', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.ni-home .ni-about__mile-scroll {
  flex: 1;
  margin-top: 1.75rem;      /* 标题与时间线间距 */
  overflow-y: auto;
  padding-bottom: 2.5rem;
  scrollbar-width: none;          /* Firefox 隐藏滚动条 */
  -ms-overflow-style: none;       /* 旧 Edge 隐藏滚动条 */
}
.ni-home .ni-about__mile-scroll::-webkit-scrollbar { display: none; }
.ni-home .ni-about__mile-list {
  margin: 0;
  padding: .25rem 0 0 2rem; /* 左侧留给时间线 */
  list-style: none;
  position: relative;
}
/* 蓝色虚线 */
.ni-home .ni-about__mile-list::before {
  content: '';
  position: absolute;
  left: .38rem;
  top: .75rem;
  bottom: 0;
  border-left: .125rem dotted #4a86ff;
}
.ni-home .ni-about__mile-item {
  position: relative;
  margin-bottom: 1.5rem;    /* 条目间距 */
}
/* 蓝色圆点（外圈浅蓝光环） */
.ni-home .ni-about__mile-item::before {
  content: '';
  position: absolute;
  left: -1.89rem;
  top: .375rem;
  width: .625rem;           /* 10px 圆点 */
  height: .625rem;
  margin-left: .0625rem;
  border-radius: 50%;
  background: #2f6bff;
  box-shadow: 0 0 0 .1875rem rgba(47, 107, 255, .22);
}
.ni-home .ni-about__mile-year {
  display: block;
  font-size: 1.375rem;      /* 22px */
  font-weight: 500;
  color: #000;
  font-family: 'HarmonyOS', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.ni-home .ni-about__mile-text {
  font-size: 1.125rem;      /* 18px */
  color: #666;
  margin: 0.1rem;
  font-family: 'HarmonyOS', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ---- 品牌动态（view 4）：新闻卡片轮播 ----
   轮播距上 128px、左 80px；单卡 370×490 圆角20 底色 #F5F5F7；
   卡内上图 370×240（顶部圆角20）；图下 30px 标题 24px Bold #000
   左右留 30px；标题下 18px 说明 18px/1.5 #666；
   卡底部 30px、左 30px 蓝色箭头；卡间距 20px */
.ni-home .ni-news__swiper {
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 上下居中 */
  margin: 0 0 0 5rem;          /* 左 80 */
  overflow: hidden;
}
.ni-home .ni-news__item {
  box-sizing: border-box;
  display: block;              /* 动态数据时整卡为 <a> 链接，跳转文章详情 */
  width: 23.125rem;         /* 370px */
  height: 30.625rem;        /* 490px */
  border-radius: 1.25rem;   /* 20px */
  background: #F5F5F7;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.ni-home .ni-news__img {
  display: block;
  width: 100%;
  height: 15rem;            /* 240px */
  object-fit: cover;
  border-radius: 1.25rem 1.25rem 0 0;
}
.ni-home .ni-news__title {
  margin: 1.875rem 1.875rem 0; /* 图下 30px，左右 30px */
  font-size: 1.5rem;           /* 24px */
  font-weight: 700;            /* Bold */
  color: #000;
  white-space: nowrap;         /* 超过一行省略 */
  overflow: hidden;
  text-overflow: ellipsis;
}
.ni-home .ni-news__text {
  margin: 1.125rem 1.875rem 0; /* 标题下 18px */
  font-size: 1.125rem;         /* 18px */
  line-height: 1.5;
  color: #666;
  display: -webkit-box;        /* 超过三行省略 */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.ni-home .ni-news__arrow {
  position: absolute;
  left: 1.875rem;              /* 30px */
  bottom: 1.875rem;            /* 30px */
  width: 1.625rem;             /* 26px */
  height: 1.125rem;            /* 18px */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18' fill='none'%3E%3Cpath d='M2 9h20M16 3l6 6-6 6' stroke='%232F6BFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---- 手机端：面板改为上下堆叠 ---- */
@media (max-width: 760px) {
  .ni-home .ni-about__panel {
    flex-direction: column;
    width: calc(100% - 2rem);
    height: auto;
  }
  .ni-home .ni-about__tabs { width: 100%; }
  .ni-home .ni-about__tab {
    height: auto;
    padding: 1.25rem 1.5rem;
  }
  .ni-home .ni-about__tab + .ni-about__tab { border-top: 1px solid #F0F0F0; }
  .ni-home .ni-about__show {
    height: 16rem;
    flex: none;
  }
  .ni-home .ni-about__mile { padding: 1.25rem 1.5rem 0; }
  .ni-home .ni-about__mile-title { margin-top: 1.5rem; }
  .ni-home .ni-about__mile-scroll { margin-top: 1rem; }
  .ni-home .ni-about__mile-item { margin-bottom: 1rem; }
  .ni-home .ni-news__swiper { margin: 1.5rem 0 0 1rem; }
  .ni-home .ni-news__item { width: 13rem; height: 19rem; }
  .ni-home .ni-news__img { height: 8.75rem; }
  .ni-home .ni-news__title { font-size: 1.125rem; margin: 1rem 1rem 0; }
  .ni-home .ni-news__text { font-size: .875rem; margin: .5rem 1rem 0; }
  .ni-home .ni-news__arrow { left: 1rem; bottom: 1rem; }
}

/* 左右按钮：50px 圆形、黑色透明底、白色箭头，距左右 100px */
.ni-home .ni-m2__prev,
.ni-home .ni-m2__next {
  top: 50%;
  width: 3.125rem;          /* 50px，随根字号缩放 */
  height: 3.125rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  transition: background .2s ease;
}
.ni-home .ni-m2__prev { left: 6.25rem; }   /* 100px */
.ni-home .ni-m2__next { right: 6.25rem; }  /* 100px */
.ni-home .ni-m2__prev:hover,
.ni-home .ni-m2__next:hover { background: rgba(0, 0, 0, .55); }
.ni-home .ni-m2__prev::after,
.ni-home .ni-m2__next::after { font-size: 1.25rem; font-weight: 700; }

/* ---- 手机端：按钮缩小并贴边 ---- */
@media (max-width: 560px) {
  .ni-home .ni-m2__prev,
  .ni-home .ni-m2__next {
    width: 2.5rem; height: 2.5rem;
  }
  .ni-home .ni-m2__prev { left: .75rem; }
  .ni-home .ni-m2__next { right: .75rem; }
}

/* =========================================================
   大屏适配（仅中文新首页生效，不影响其他页面）
   背景：public.css 将 body 锁定 max-width:1920px 居中，
   本页设计稿为 2560px，解锁后公共 header 白底 / footer 黑底
   可铺满全屏，首页内容区 ≤2560 满宽、>2560 锁 2560 居中。
   双保险：:has() 现代浏览器即时生效；JS 兜底加 ni-home-page
   class（ni-index.js 首行），老内核由该规则接管。
   ========================================================= */
body:has(.ni-home),
body.ni-home-page {
  max-width: none;
}

/* 顶部导航：白底铺满全屏，导航内容仍按 1920 居中（视觉与 1920 屏一致） */
body:has(.ni-home) .header,
body.ni-home-page .header {
  max-width: none;
  left: 0;
}
body:has(.ni-home) .header-nav-outer,
body.ni-home-page .header-nav-outer {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}
/* header 铺满后，产品/购买下拉面板（left:0;right:0;max-1920）保持居中 */
body:has(.ni-home) .header-dropdown,
body.ni-home-page .header-dropdown,
body:has(.ni-home) .header-buy-dropdown,
body.ni-home-page .header-buy-dropdown {
  margin-left: auto;
  margin-right: auto;
}

/* 首页内容区：≤2560 满宽流式（2560 屏与设计稿 1:1，1920 屏图片缩小更清晰）；
   >2560 锁定 2560 居中，避免图片无限拉伸模糊 */
.ni-home {
  max-width: 2560px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   英文版专属微调（.ni-home--en，模板仅英文语言挂载该类，
   中文版不受影响；置于文件末尾保证覆盖上面同名规则）
   ========================================================= */
.ni-home--en .ni-about__tab { padding: 0 3rem; }
.ni-home--en .ni-about__story-title { margin: 3rem 0 0; }
.ni-home--en .ni-about__story-text { line-height: 1.4; }