/* ue-patch.css — loaded AFTER the original stylesheets.
   Re-declares iconfont to use the locally-hosted woff2 so icons work offline.
   Later @font-face with the same family name wins. */

/* Self-hosted Google Fonts (fonts.googleapis.com is unreachable in this
   environment; family names match the original @import so the original
   stylesheet's font stacks resolve to these). */
@import url("/templates/font/google/poppins/index.css");
@import url("/templates/font/google/noto-sans-sc/index.css");

@font-face {
  font-family: iconfont;
  src: url("/templates/font/iconfont.woff2") format("woff2");
  font-display: swap;
}

/* Next.js root wrappers must not constrain the fluid rem layout */
#__next,
body > div[data-nextjs-scroll-focus-boundary] {
  width: 100%;
}

/* The original stylesheet hides .app on desktop via orientation queries.
   Nothing else is overridden here — the clone intentionally ships the
   original stylesheet for pixel-perfect fidelity (local learning use). */

/* r4: the original site keeps the .group .swiper viewport at one slide
   wide (7.3rem) while the following slides stay visible beside it. The
   Swiper bundle stylesheet shipped by npm forces .swiper{overflow:hidden},
   so restore the original overflow-visible card strip. */
.home .r4 .inner .group .swiper {
  overflow: visible;
  margin-left: 0;
  margin-right: 0;
}

/* 卡片用 Next Link 软跳，避免原生 <a> 整页刷新；铺满 slide 以沿用 :hover */
.home .r4 .inner .group .swiper .swiper-slide > a.r4CardHit {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* r4 矮屏横屏：section 锁 100vh + .row overflow:hidden，卡片固定 4.6rem
   时会把下方「了解更多」与翻页裁掉（常见于笔记本 / 系统缩放后的可视高度）。 */
@media screen and (orientation: landscape) and (max-height: 920px) {
  .home .r4 .inner {
    padding-top: 1rem;
    padding-bottom: 0.65rem;
  }
  .home .r4 .inner .layer-topic > p.mt-50 {
    margin-top: 0.28rem;
  }
  .home .r4 .inner .group {
    padding-top: 0.12rem;
    padding-bottom: 0.12rem;
  }
  .home .r4 .inner .group .btm {
    margin-top: 0.28rem;
    flex-shrink: 0;
  }
  .home .r4 .inner .group .swiper .swiper-slide .layer-img {
    height: min(4.6rem, calc(100vh - 5.2rem));
  }
}

@media screen and (orientation: landscape) and (max-height: 760px) {
  .home .r4 .inner {
    padding-top: 0.75rem;
    padding-bottom: 0.45rem;
  }
  .home .r4 .inner .layer-topic > p.f-30 {
    margin-bottom: 0.04rem;
  }
  .home .r4 .inner .group .swiper .swiper-slide .layer-img {
    height: min(4.6rem, calc(100vh - 4.6rem));
  }
}

/* --- Rebrand readability fixes (purple theme) ---
   1) Home hero: the white headline/tagline sits over bright cloud/sky
      slides; give it a soft dark scrim so it stays readable on any slide.
   2) About values cards: the description used the brand color, which was
      a bright yellow-green in the original design; the new brand purple
      (#7C3AED) is too dark on bright photos, so switch the description
      to white and add a soft shadow to both title and description. */
.home .banner .inner .group .msgBox .msg h1,
.home .banner .inner .group .msgBox .msg p {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45), 0 0 4px rgba(0, 0, 0, 0.3);
}

/* Banner 擦除（Chrome 兼容）：
   Chrome 对「父级 clip-path 裁 <video>」基本无效（Edge 正常）。
   改为：关掉 clip-path，用 overflow:hidden + 宽度收到 0；
   内部 .pic/video 保持视口宽，视觉上仍是从右往左擦除。 */
.home .banner .bg .sliderPic .photo {
  -webkit-clip-path: none !important;
  clip-path: none !important;
  overflow: hidden !important;
  /* 用 100% 而不是 100vw，避免滚动条宽度把容器撑出 1 帧横移 */
  width: 100% !important;
  max-width: none;
  -webkit-transition: width 1.2s var(--picEase) !important;
  transition: width 1.2s var(--picEase) !important;
}

/* 擦除时 .photo 变窄，.pic / video 仍按视口宽，避免被压扁。
   不用 cqw：部分手机 WebView 里 container query 会把视频宽算成 0，露出原生播放器。 */
.home .banner .bg .sliderPic .photo .pic,
.home .banner .bg .sliderPic .photo .pic video {
  -webkit-clip-path: none !important;
  clip-path: none !important;
  width: 100vw !important;
  min-width: 100vw;
  height: 100% !important;
  max-width: none;
}

/* 关掉原站 Ken Burns（scale 1.1→1 会让视频重采样抖动）。
   禁止 translateZ / 3D：iOS/微信会把带 3D 祖先的 video 提成系统播放器。 */
.home .banner .bg .sliderPic .photo .pic,
.home .banner .bg .sliderPic.first .photo .pic,
.home .banner .bg .sliderPic.on .pic,
.home .banner .bg .sliderPic.in .pic,
.home .banner .bg .sliderPic.out .photo .pic {
  -webkit-transform: scale(1) !important;
  transform: scale(1) !important;
  -webkit-transition: opacity 1s var(--picEase) !important;
  transition: opacity 1s var(--picEase) !important;
}

.home .banner .bg .sliderPic.out .photo {
  width: 0 !important;
}

.home .banner .bg .sliderPic.out .photo .pic {
  opacity: 0.5;
}

.home .banner .pic video {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  /* 移动端：禁止点到 video 唤起系统播放器，文案叠在上层 */
  pointer-events: none;
  -webkit-touch-callout: none;
}

/* 隐藏 WebKit / 国产内核自带控件条（图一那种进度条、「存网盘」） */
.home .banner .pic video::-webkit-media-controls,
.home .banner .pic video::-webkit-media-controls-enclosure,
.home .banner .pic video::-webkit-media-controls-panel,
.home .banner .pic video::-webkit-media-controls-start-playback-button,
.home .banner .pic video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* 保证文案层始终压过视频层 */
.home .banner .inner {
  position: relative;
  z-index: 20;
}
.home .banner .bg {
  z-index: 0;
}

/* 无视频/无封面：白底，文案改深色以免看不见 */
.home .banner .bg .sliderPic.empty .photo {
  background-color: #fff !important;
}

.home .banner.bannerEmpty .inner .group .msgBox .msg h1,
.home .banner.bannerEmpty .inner .group .msgBox .msg h2,
.home .banner.bannerEmpty .inner .group .msgBox .msg p {
  color: var(--black) !important;
  text-shadow: none !important;
}

.about .r2 .inner .group .box .msg p.mc {
  color: #fff;
}

.about .r2 .inner .group .box .msg .after {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

/* 3) Values cards: the hover description sits on a bright photo and even
      white text washes out. Dim the photo with a dark gradient scrim while
      the description is visible so the copy always pops. */
.about .r2 .inner .group .box .layer-img {
  position: relative;
}

.about .r2 .inner .group .box .layer-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35, 20, 56, 0.15) 0%, rgba(35, 20, 56, 0.6) 100%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.about .r2 .inner .group .box:hover .layer-img::after {
  opacity: 1;
}

/* 4) The description copy lives inside <span> children that index.css
      colors with the dark ink token (--black), overriding the white on
      the <p>. Force the spans to white as well. */
.about .r2 .inner .group .box .msg p.mc span {
  color: #fff;
}

/* 5) Hero tagline: same nested-span issue — the <p> is white but its
      <span> children inherit the dark ink token, making "We are NewTorch /
      A Green Energy Solutions Provider" invisible on bright slides. */
.home .banner .inner .group .msgBox .msg p span {
  color: #fff;
}

/* Banner SEO: only the first slide headline is an <h1>; slides 2+ render
   <h2> with identical styling/letter-stagger (mirrors the h1 rules above). */
.home .banner .inner .group .msgBox .msg h2{line-height:1.15;text-align:center;-webkit-perspective:5rem;perspective:5rem}
.home .banner .inner .group .msgBox .msg h2 .letter{display:inline-block;-webkit-transition:opacity 1s var(--ease),color .3s var(--ease),-webkit-transform 1s var(--ease);transition:opacity 1s var(--ease),color .3s var(--ease),-webkit-transform 1s var(--ease);transition:opacity 1s var(--ease),transform 1s var(--ease),color .3s var(--ease);transition:opacity 1s var(--ease),transform 1s var(--ease),color .3s var(--ease),-webkit-transform 1s var(--ease);opacity:0;-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-transform:translate3d(0,.2rem,0);transform:translate3d(0,.2rem,0)}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(1){-webkit-transition-delay:0.03s;transition-delay:0.03s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(2){-webkit-transition-delay:0.06s;transition-delay:0.06s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(3){-webkit-transition-delay:0.09s;transition-delay:0.09s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(4){-webkit-transition-delay:0.12s;transition-delay:0.12s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(5){-webkit-transition-delay:0.15s;transition-delay:0.15s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(6){-webkit-transition-delay:0.18s;transition-delay:0.18s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(7){-webkit-transition-delay:0.21s;transition-delay:0.21s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(8){-webkit-transition-delay:0.24s;transition-delay:0.24s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(9){-webkit-transition-delay:0.27s;transition-delay:0.27s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(10){-webkit-transition-delay:0.30s;transition-delay:0.30s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(11){-webkit-transition-delay:0.33s;transition-delay:0.33s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(12){-webkit-transition-delay:0.36s;transition-delay:0.36s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(13){-webkit-transition-delay:0.39s;transition-delay:0.39s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(14){-webkit-transition-delay:0.42s;transition-delay:0.42s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(15){-webkit-transition-delay:0.45s;transition-delay:0.45s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(16){-webkit-transition-delay:0.48s;transition-delay:0.48s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(17){-webkit-transition-delay:0.51s;transition-delay:0.51s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(18){-webkit-transition-delay:0.54s;transition-delay:0.54s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(19){-webkit-transition-delay:0.57s;transition-delay:0.57s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(20){-webkit-transition-delay:0.60s;transition-delay:0.60s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(21){-webkit-transition-delay:0.63s;transition-delay:0.63s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(22){-webkit-transition-delay:0.66s;transition-delay:0.66s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(23){-webkit-transition-delay:0.69s;transition-delay:0.69s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(24){-webkit-transition-delay:0.72s;transition-delay:0.72s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(25){-webkit-transition-delay:0.75s;transition-delay:0.75s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(26){-webkit-transition-delay:0.78s;transition-delay:0.78s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(27){-webkit-transition-delay:0.81s;transition-delay:0.81s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(28){-webkit-transition-delay:0.84s;transition-delay:0.84s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(29){-webkit-transition-delay:0.87s;transition-delay:0.87s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(30){-webkit-transition-delay:0.90s;transition-delay:0.90s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(31){-webkit-transition-delay:0.93s;transition-delay:0.93s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(32){-webkit-transition-delay:0.96s;transition-delay:0.96s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(33){-webkit-transition-delay:0.99s;transition-delay:0.99s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(34){-webkit-transition-delay:1.02s;transition-delay:1.02s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(35){-webkit-transition-delay:1.05s;transition-delay:1.05s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(36){-webkit-transition-delay:1.08s;transition-delay:1.08s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(37){-webkit-transition-delay:1.11s;transition-delay:1.11s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(38){-webkit-transition-delay:1.14s;transition-delay:1.14s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(39){-webkit-transition-delay:1.17s;transition-delay:1.17s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(40){-webkit-transition-delay:1.20s;transition-delay:1.20s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(41){-webkit-transition-delay:1.23s;transition-delay:1.23s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(42){-webkit-transition-delay:1.26s;transition-delay:1.26s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(43){-webkit-transition-delay:1.29s;transition-delay:1.29s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(44){-webkit-transition-delay:1.32s;transition-delay:1.32s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(45){-webkit-transition-delay:1.35s;transition-delay:1.35s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(46){-webkit-transition-delay:1.38s;transition-delay:1.38s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(47){-webkit-transition-delay:1.41s;transition-delay:1.41s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(48){-webkit-transition-delay:1.44s;transition-delay:1.44s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(49){-webkit-transition-delay:1.47s;transition-delay:1.47s}
.home .banner .inner .group .msgBox .msg h2 .letter:nth-child(50){-webkit-transition-delay:1.50s;transition-delay:1.50s}
.home .banner .inner .group .msgBox .msg.on h2 .letter{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}
.home .banner .inner .group .msgBox .msg.in h2 .letter{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}

/* 主营业务 msgRow：接口 coinUrl 作为右上角图标 */
.business .msgRow .inner .col:nth-of-type(2) > img.icon {
  position: absolute;
  top: 0.3rem;
  right: 0;
  width: 0.5rem;
  height: 0.5rem;
  object-fit: contain;
}

/* 联系我们：多总部 regionInfo 轮播，宽度对齐原 .box */
.contact .banner .inner .group .hqSw {
  width: 7rem;
  overflow: hidden;
}
.contact .banner .inner .group .hqSw .box {
  width: 100%;
}
@media (orientation: portrait) {
  .contact .banner .inner .group .hqSw {
    width: 100%;
  }
}

/*
  竖屏 header：搜索胶囊原是 absolute; right:1.2rem，和汉堡菜单各自定位，
  平板宽度上会贴在一起。改成跟菜单同一行 flex，用 gap 拉开。
*/
#app header .appNav .right {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  gap: 0.56rem;
}
#app header .appNav .right .set {
  position: relative;
  right: auto;
  top: auto;
  bottom: auto;
  margin: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
#app header .appNav .right #menu {
  margin-left: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

/* 首页业务布局地球：竖屏/平板不要顶到标题 */
@media screen and (orientation: portrait), screen and (max-width: 900px) {
  .home .r3 .inner .layer-topic {
    position: relative;
    z-index: 3;
  }
  .home .r3 .bg .map {
    width: min(5.2rem, 70vw) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    top: calc(2rem + 12vw) !important;
  }
}
@media screen and (orientation: portrait) and (min-width: 700px) {
  .home .r3 .inner .layer-topic {
    margin-bottom: 10rem;
  }
  .home .r3 .bg .map {
    width: min(6.4rem, 56vw) !important;
    top: calc(3.8rem + 14vw) !important;
  }
}

/* 加入紫火炬 · 紫火炬生活：卡片标题强制白色（含内部 span） */
#app.join .r2 .inner .group .swiper .swiper-wrapper .swiper-slide .box .note h3,
#app.join .r2 .inner .group .swiper .swiper-wrapper .swiper-slide .box .note h3 span {
  color: #fff !important;
}