*,
  *::before,
  *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      transition: all 0.3s ease;

  }

  /* 全局根变量，所有页面都能调用 */
  :root {
      /* 主色 */
      --color-primary: #000000;
      /* 辅助色 */
      --color-secondary-one: #101B39;
      --color-secondary-two: #FFC125;
      --color-secondary-three: #3A9341;
      /* 文字色 */
      --color-text: #212326;
      --color-text-light: #84868A;
      /* 背景色 */
      --color-bg: #ffffff;
      --color-bg-gray: #f5f5f5;
      /* 边框/分割线 */
      --color-border: #3A9341;
  }

  :root {
      --font-min: 14px;
  }


  html {
      font-size: max(var(--font-min), 1vw);
  }



  @font-face {
      font-family: "HarmonyOS Sans SC";
      src: url("../font/HarmonyOS_SansSC_Light.ttf") format("woff");
      font-display: swap;
  }

  @font-face {
      font-family: "HarmonyOS Sans SC Light";
      src: url("../font/HarmonyOS_SansSC_Light.ttf") format("woff");
      font-display: swap;
  }

  @font-face {
      font-family: "HarmonyOS Sans SC Bold";
      src: url("../font/HarmonyOS_SansSC_Regular.ttf") format("woff");
      font-display: swap;
  }

  ::-webkit-scrollbar {
      width: 8px;
      /* 垂直滚动条宽度 */
      height: 8px;
      /* 水平滚动条高度 */
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
      background: #bbb;
      border-radius: 4px;
  }

  /* 滚动条轨道背景 */
  ::-webkit-scrollbar-track {
      background: #eeeeee;
  }

  html {
      scroll-behavior: smooth
  }

  img {
      display: block;
  }

  html {
      scroll-behavior: smooth;
  }

  b,
  strong {
      font-family: "HarmonyOS Sans SC Bold", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
      font-weight: 400;
  }

  body {
      font-family: "HarmonyOS Sans SC", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
      color: var(--color-text);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      font-size: max(var(--font-min), 1vw);
      margin: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      font-family: "HarmonyOS Sans SC Bold", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
      font-weight: 100;
  }

  a {
      text-decoration: none;
      color: inherit;
  }

  button {
      border: none;
      background: none;
      cursor: pointer;
      font-family: inherit;
  }

  img {
      display: block;
      max-width: 100%;
  }

  .main {
      width: 80%;
      margin: auto;
  }

  .padding {
      padding: 6vw 0
  }

  /* ===== Navigation ===== */
  .nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 50px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background: rgba(0, 0, 0, 0.1);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 48px;
  }



  .nav-logo {
      width: 8vw;
      height: auto;
      text-align: left;
      max-width: 170px;
  }

  .nav-logo img {
      width: 100%;
      height: auto;
      display: block;
  }

  .nav-menu {
      display: flex;
      align-items: center;
      gap: 0;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      height: 50px;
  }

  .nav-item {
      color: rgba(255, 255, 255, 0.8);
      font-size: max(var(--font-min), 0.8vw);
      line-height: 24px;
      padding: 0 1.8vw;
      height: 50px;
      display: flex;
      align-items: center;
      transition: color 0.3s;
      white-space: nowrap;
      position: relative;
      cursor: pointer;
  }

  .nav-item:hover {
      color: #fff;
  }

  .nav-lang {
      display: flex;
      align-items: center;
      gap: 6px;
      color: rgba(255, 255, 255, 0.8);
      font-size: 13px;
      cursor: pointer;
  }

  .nav-lang img {
      width: 20px;
      height: 20px;
  }

  .nav-lang-sep {
      width: 1px;
      height: 12px;
      background: rgba(255, 255, 255, 0.3);
      transform: rotate(20deg);
      margin: 0 10px;
  }

  .nav-item.active {
      color: #fff;
      font-weight: 600;
  }

  .nav-item.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 32px;
      right: 32px;
      height: 4px;
      background: var(--color-secondary-two);
      border-radius: 2px;
  }

  .has-subnav {
      position: relative;
  }

  .nav-sub {
      position: absolute;
      top: 50px;
      width: 100%;
      left: 0;
      text-align: center;
      background: #ffffff;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 100;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
  }

  .has-subnav:hover .nav-sub {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0px);
  }

  .nav-sub a {
      display: block;
      width: 100%;
      color: #000;
      font-size: max(var(--font-min), 0.729vw);
      padding: 10px;
      white-space: nowrap;
      transition: color .2s ease, background .2s ease;
      text-decoration: none;
  }

  .nav-sub a:hover {
      color: #000;
      background: rgba(211, 211, 211, 0.5);
  }


  .nav .nav-logo img:nth-child(2) {
      display: none;
  }

  .sticky .nav,
  .hover .nav {
      background-color: #FFF;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  }

  .sticky .nav .nav-item,
  .sticky .nav-lang,
  .hover .nav .nav-item,
  .hover .nav-lang {
      color: var(--color-primary);
  }

  .sticky .nav .nav-logo img:nth-child(1),
  .hover .nav .nav-logo img:nth-child(1) {
      display: none;
  }

  .sticky .nav .nav-logo img:nth-child(2),
  .hover .nav .nav-logo img:nth-child(2) {
      display: block;
  }

  /* ===== Footer ===== */
  .footer {
      width: 100%;
      background: var(--color-bg-gray);
      padding: 3vw 0;
      display: flex;
      justify-content: center;
  }

  .footer-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  .footer-brand {
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .footer-logo {
      width: 226px;
      height: 74px;
      display: flex;
      align-items: center;
  }

  .footer-logo img {
      width: 100%;
      height: auto;
      max-height: 24px;
  }

  .footer-slogan {
      font-size: 18px;
      color: var(--color-text);
      opacity: 0.6;
      letter-spacing: 9px;
      line-height: normal;
  }

  .footer-links {
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: flex-end;
  }

  .footer-link-row {
      display: flex;
      gap: 2.3vw;
      font-size: max(var(--font-min), 0.729vw);
      color: var(--color-text);
      line-height: normal;
  }

  .footer-link-row a {
      cursor: pointer;
      transition: opacity 0.3s;
  }

  .footer-link-row a:hover {
      opacity: 0.7;
  }

  .footer-copyright {
      font-size: 12px;
      color: var(--color-text);
      opacity: 0.74;
      line-height: normal;
      display: flex;
      gap: 15px;
  }

  .footer-copyright a {
      cursor: pointer;
      text-decoration: none;
  }

  .footer-copyright a:hover {
      opacity: 0.8;
  }

	.footer-tip{
		font-size: 12px;
		color: #999;
	}

  /* ===== App Section ===== */
  .app-section {
      width: 100%;
      position: relative;
      overflow: hidden;
      background: url("../images/img-app-bg.webp") no-repeat center center;

      background-size: 100% 100%, cover;
      background-position: center center;

  }

  .app-section-inner {
      width: 70vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10vw 2vw;
  }



  .app-title {
      font-size: max(var(--font-min), 2.7vw);
      color: var(--color-primary);
  }

  .app-subtitle {
      font-size: max(var(--font-min), 1.5vw);
      color: var(--color-primary);
  }

  .app-features {
      color: var(--color-text-light);
      font-size: max(var(--font-min), 1.1vw);
      line-height: 1.7;
      margin-top: 40px;
  }

  .app-qr-area {
      display: flex;
      gap: 40px;
      margin-top: 60px;
  }

  .app-qr-item {
      text-align: center;
  }

  .app-qr-bg {
      width: 100%;
      background: var(--color-bg);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
  }

  .app-qr-bg img {
      width: 8.5vw;
      object-fit: contain;
      border-radius: 4px;
  }

  .app-qr-label {
      font-size: max(var(--font-min), 1vw);
      color: var(--color-primary);
      margin-top: 19px;
  }

  .app-phone {
      width: 22%;
  }

  .app-phone img {
      width: 100%;
      height: 100%;
      object-fit: contain;
  }

  .page-top {
      font-size: max(var(--font-min), 2.8vw);
      color: var(--color-text);
      margin-bottom: 40px;
  }

  .page-top span {
      position: relative;
      font-size: max(var(--font-min), 1.2vw);
      letter-spacing: 10px;
      color: var(--color-text-light);
      padding-left: 40px;
      text-transform: uppercase;
      margin-left: 40px;
  }

  .page-top span::after {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 8px solid var(--color-secondary-two);
      /* 三角颜色 */
  }

  .swiper-pagination {
      position: static;
      margin-top: 40px;
      text-align: left;
  }

  .swiper-pagination {
      height: auto;
      line-height: normal;
  }

  .swiper-pagination-bullet {
      width: 20px;
      height: 3px;
      border-radius: 0;
      background: #ccc;
      margin: 0 5px;
      opacity: 1;
  }

  .swiper-pagination-bullet-active {
      background-color: var(--color-secondary-two);
  }

  .header-top {
      height: 50px;
  }
	.news-banner{ height:100vh; overflow:hidden}
	.news-banner img {
    width: 100%;height: 100%; 
    object-fit: cover;
}
  #backTop {
      position: fixed;
      bottom: 2vw;
      right: 2vw;
      z-index: 10;
      background-color: #FFF;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
  }

  #backTop.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
  }

  #backTop:hover {
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  }

  /* MOBILE MENU */
  .mobile-menu {
      position: fixed;
      top: 50px;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 99;
      pointer-events: none;
      visibility: hidden;
      transition: visibility 0s .35s
  }

  .mobile-menu.show {
      pointer-events: auto;
      visibility: visible;
      transition: visibility 0s
  }

  .mobile-menu .mm-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      opacity: 0;
      transition: opacity .35s ease
  }

  .mobile-menu.show .mm-overlay {
      opacity: 1
  }

  .mobile-menu .mm-panel {
      position: absolute;
      top: 0;
      right: 0;
      width: 85%;
      max-width: 340px;
      bottom: 0;
      background: rgba(18, 20, 24, 0.98);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transform: translateX(100%);
      transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1);
      overflow-y: auto;
      padding-top: 12px
  }

  .mobile-menu.show .mm-panel {
      transform: translateX(0)
  }

  .mm-inner {
      display: flex;
      flex-direction: column;
      padding: 8px 28px 40px;
      gap: 0
  }

  .mm-inner a {
      color: rgba(255, 255, 255, 0.85);
      text-decoration: none;
      font-size: 17px;
      font-weight: 400;
      padding: 16px 0;
      display: flex;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      transition: color .2s;
      -webkit-tap-highlight-color: transparent
  }

  .mm-inner a:hover,
  .mm-inner a:active {
      color: #fff
  }

  .mm-inner hr {
      border: none;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      margin: 16px 0
  }

  .mm-sub-wrap {
      position: relative;
  }

  .mm-alink.has-sub {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
  }

  .mm-alink.has-sub::after {
      content: '';
      display: inline-block;
      width: 7px;
      height: 7px;
      border-right: 1.5px solid rgba(255, 255, 255, 0.5);
      border-bottom: 1.5px solid rgba(255, 255, 255, 0.5);
      transform: rotate(45deg);
      transition: transform .25s ease;
      margin-top: -3px;
      flex-shrink: 0;
  }

  .mm-alink.has-sub.open::after {
      transform: rotate(-135deg);
      margin-top: 0;
  }

  .mm-lang {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 0
  }

  .mm-lang a {
      color: rgba(255, 255, 255, 0.5);
      font-size: 14px;
      border: none;
      padding: 4px 0
  }

  .mm-lang a.mm-lang-active {
      color: #fff
  }

  .mm-lang span {
      color: rgba(255, 255, 255, 0.2)
  }

  /* Hamburger animation */
  /* Deskop only: dropdown arrow indicator stays visible */
  .has-subnav .nav-alink .arr {
      display: inline-block;
  }

  .mm-sub {
      height: 0;
      overflow: hidden;

  }


  .mm-sub.open {
      height: auto;
      padding: 10px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .mm-sub a {
      color: rgba(255, 255, 255, 0.6);
      border-bottom: none;
      font-size: 15px;
      padding: 10px 0;
      display: block;
  }

  /* Hamburger sizing & X animation */
  .nav-hamburger {
      width: 24px;
      height: 20px;
      display: none;
      flex-direction: column;
      justify-content: space-between;
      cursor: pointer;
      position: relative;
      z-index: 101;
      padding: 2px 0;
      transform-origin: center
  }

  .nav-hamburger span {
      display: block;
      height: 2px;
      background: #fff;
      border-radius: 2px;
      transition: all .25s ease;
      transform-origin: center;
      margin-left: auto;
  }

  .sticky .nav-hamburger span,
  .hover .nav-hamburger span {
      background: #000;
  }

  .nav-hamburger span:nth-child(1) {
      width: 20px;
      transform-origin: center
  }

  .nav-hamburger span:nth-child(2) {
      width: 16px
  }

  .nav-hamburger span:nth-child(3) {
      width: 20px;
      transform-origin: center
  }

  .nav-hamburger.active span:nth-child(1) {
      width: 24px;
      position: absolute;
      top: 50%;
      transform: rotate(45deg) translateY(-50%);
  }

  .nav-hamburger.active span:nth-child(2) {
      width: 24px;
      opacity: 0
  }

  .nav-hamburger.active span:nth-child(3) {
      width: 24px;
      position: absolute;
      top: 50%;
      transform: rotate(-45deg) translateY(-50%);
  }

  .pager {
      text-align: right;
      margin-top: 6vw;
  }

  .pagination {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: flex-end;
  }

  .pagination li {
      margin: 0;
      list-style: none;
      display: inline-block;
  }

  .pagination li a,
  .pagination li span {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      text-decoration: none;
      color: #333;
      box-sizing: border-box;
      width: 42px;
      height: 42px;
      line-height: 42px;
      border-radius: 8px;
  }

  /* 正常页码 hover 效果 */
  .pagination li a:hover {
      border-color: #ccc;
      background-color: #e6e6e6;
  }

  /* 当前激活页 红色样式（截图红色底色白字） */
  .pagination li.active span {
      color: #ffffff;
      background-color: var(--color-secondary-two);
  }

  /* 禁用上一页 « 样式 */
  .pagination li.disabled span {
      background-color: #f9f9f9;
      color: #999;
      cursor: not-allowed;
  }

  @media(max-width:1024px) {
		.news-banner{ height:40vh;}
      .nav-menu {
          display: none;
      }


      body {

          font-size: 14px;
      }

      .padding {
          padding: 10vw 0;
      }

      .main {
          width: 88vw;
          margin: auto;
      }

      .nav-logo {
          width: 100px;
          display: block;
      }


      .nav {
          padding: 25px;
      }


      /* Mobile: no hover dropdown, all via JS expand */
      .nav-sub {
          display: none;
      }

      .nav-lang {
          display: none
      }

      .nav-hamburger {
          display: flex;
      }


      .swiper-pagination-bullet {
          width: 10px
      }

      .swiper-pagination-bullet-active {
          width: 20px
      }

      .page-top {
          font-size: 22px;
      }

      .page-top span {
          font-size: 12px;
          letter-spacing: 5px;
          padding-left: 20px;
          margin-left: 10px;
      }

      .page-top span::after {

          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          border-left: 6px solid var(--color-secondary-two);
      }

      .app-title {
          font-size: 22px;
      }

      .app-subtitle {
          font-size: 18px;
      }

      .footer-inner,
      .footer-copyright {
          flex-direction: column;
          justify-content: center;
          gap: 15px;
      }

      .footer-slogan {
          font-size: 18px;
      }

      .footer-links {
          text-align: center;
          gap: 10px;
          align-items: center;
      }

      .footer-brand {
          text-align: center;
          align-items: center;
      }

      #backTop {
          width: 40px;
          right: 15px;
          bottom: 15px;
      }

      .footer-logo img {
          max-height: 17px;
      }

      .app-qr-bg img {
          width: 100%;
      }

      .app-phone {
          display: none;
      }

      .app-section-inner {
          text-align: center;
          justify-content: center;
      }
  }