html {
      font-size: 20px;
    }

    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #fff;
      color: #333;
      font-size: 1.15rem;
    }

    section {
      padding: 1em 1.25em;
      margin: auto;
    }

    h2.section-title {
      text-align: center;
      font-size: 2.1em;
      margin-bottom: 1.2em;
    }

    .intro-flex-row {
      display: flex;
      flex-wrap: wrap;
      gap: 2.5em;
      justify-content: space-between;
      align-items: stretch;
      margin-bottom: 1.8em;
    }

    .intro-left,
    .intro-right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 1 1 0;
      min-width: 0;
    }

    .intro-right img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .intro-left {
      align-items: flex-start;
      min-width: 20em;
    }

    .intro-right {
      min-width: 20em;
    }

    .highlight-box {
      background-color: #f90;
      color: white;
      padding: 1em;
      margin-bottom: 1.2em;
      border-radius: 0.38em;
      font-weight: bold;
      text-align: left;
      font-size: 1.2em;
      width: 100%;
      box-sizing: border-box;
    }

    .feature-list {
      margin-top: 15px;
      width: 100%;
    }

    .feature-list ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .feature-list li {
      margin-bottom: 0.7em;
      color: #333;
      background: #fffbe6;
      border-left: 0.25em solid #f90;
      padding: 0.6em 0.9em;
      border-radius: 0.25em;
      font-size: 1.05em;
      font-weight: 500;
    }

    .feature-list li:first-child {
      margin-bottom: 0.7em;
      background: #fffbe6;
      border-left: 0.25em solid #f90;
      color: #333;
      /* font-weight: 600; */
    }

    .placeholder-img {
      width: 90%;
      max-width: 22em;
      height: 12.5em;
      background: repeating-linear-gradient(135deg,
          #eee,
          #eee 1.25em,
          #ddd 1.25em,
          #ddd 2.5em);
      border: 0.13em dashed #bbb;
      border-radius: 0.63em;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #aaa;
      font-size: 1.25em;
      margin-bottom: 1.1em;
    }

    .video-demo {
      text-align: center;
      margin-top: 1.25em;
      width: 100%;
    }

    .video-demo button {
      padding: 0.7em 1.4em;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 0.25em;
      cursor: pointer;
      font-size: 1.05em;
    }

    .video-demo button:hover {
      background-color: #0056b3;
    }

    .flex-row {
      display: flex;
      flex-wrap: wrap;
      gap: 1.25em;
      justify-content: space-between;
    }

    .card {
      padding: 1.25em;
      flex: 1 1 45%;
      border-radius: 0.5em;
      font-size: 1.05em;
      position: relative;
      overflow: hidden;
    }

    /* 禁止符号背景，仅用于传统带外管理方案 */
    .card.card-forbidden-bg {}

    .card.card-forbidden-bg::before {
      content: "\f05e";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      color: #e0e0e0;
      font-size: 15em;
      position: absolute;
      left: 0.01em;
      top: 0.01em;
      opacity: 1;
      pointer-events: none;
      z-index: 0;
    }

    .card.card-forbidden-bg>* {
      position: relative;
      z-index: 1;
    }

    /* 产品优势整体白色 */
    #product-advantages {
      background: #fff !important;
      border-radius: 0.7em;
    }

    /* 产品优势ul li无符号，增加间距 */
    #product-advantages ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    #product-advantages li {
      margin-bottom: 1.1em;
      padding-left: 0;
      position: relative;
      font-size: 1.08em;
      line-height: 1.7;
      /* 不显示符号 */
    }

    #product-advantages li .li-strong {
      font-weight: bold;
    }

    .card.card-orange-bg li {
      color: #fff !important;
    }

    .card.card-orange-bg li .li-strong {
      color: #fff !important;
    }

    .scenario-flex-row {
      display: flex;
      flex-wrap: wrap;
      gap: 1.25em;
      justify-content: space-between;
    }

    .scenario-left {
      flex: 1 1 0;
      min-width: 16em;
      max-width: 30em;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
      min-height: 18em;
    }

    .scenario-left-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
    }

    .scenario-left-title {
      margin-top: -200px;
      font-weight: bold;
      font-size: 1.15em;
      margin-bottom: 0.7em;
      color: #808080;
    }

    .scenario-right {
      flex: 2 1 0;
      min-width: 22em;
      display: flex;
      flex-direction: row;
      gap: 1.25em;
      flex-wrap: wrap;
    }

    .scenario-block {
      flex: 1 1 45%;
      min-width: 15em;
      margin-bottom: 0.5em;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }

    .scenario-block-title {
      font-weight: bold;
      font-size: 1.08em;
      margin-bottom: 0.5em;
      margin-left: 0.1em;
      color: #808080;
    }

    .scenario-block-content {
      background: rgba(239, 237, 237, 0.8);
      border-radius: 0.5em;
      padding: 1em 1.1em;
      font-size: 1em;
      color: #333;
      min-height: 3.5em;
      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.03);
      border: 1px solid #e0e0e0;
    }

    .orange-highlight-title {
      color: #f90 !important;
      font-weight: bold;
    }

    .orange-highlight-content {
      color: #f90 !important;
      /* border-color: #f90 !important; */
      background: #fffbe6 !important;
      box-shadow: 0 1px 4px 0 rgba(255, 153, 0, 0.06) !important;
      background: rgba(239, 237, 237, 0.8) !important;
    }

    .table-container {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin: 1.25em 0;
      font-size: 1.05em;
    }

    th,
    td {
      border: 1px solid #ccc;
      padding: 0.7em;
      text-align: left;
    }

    .solution-diagram,
    .deployment-img {
      width: 100%;
      margin-top: 1.25em;
      border: 1px solid #ddd;
    }

    #application-scenario {
      background: #f5f5f5;
      border-radius: 0.7em;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.03);
      margin-top: 2em;
      margin-bottom: 2em;
    }

    /* 新滑动轮播样式 */
    .scenario-carousel-slider-outer {
      overflow: hidden;
      position: relative;
      width: 100%;
      padding-top: 1.5em;
      padding-bottom: 1.5em;
      background: transparent;
      border-radius: 0;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.02);
    }

    .scenario-carousel-slider {
      display: flex;
      transition: transform 0.6s cubic-bezier(.4, 0, .2, 1);
      will-change: transform;
      width: 100%;
      /* 不要设置宽度为N*100%，否则会拉伸子元素 */
    }

    .scenario-carousel-slide {
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
      flex-shrink: 0;
      flex-grow: 0;
      flex-basis: 100%;
      /* 保持原有内容样式 */
      display: block;
    }

    .scenario-carousel-nav {
      display: flex;
      justify-content: stretch;
      align-items: center;
      width: 100%;
      max-width: none;
      border-radius: 0;
      overflow: hidden;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
      background: #fff;
      border: 1px solid #8b8b8b;
    }

    .scenario-carousel-nav-item {
      flex: 1 1 0;
      text-align: center;
      padding: 1em 0.5em;
      font-size: 1.08em;
      font-weight: 500;
      color: #666;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5em;
      border-right: 1px solid #8b8b8b;
      border-radius: 0;
    }

    .scenario-carousel-nav-item:last-child {
      border-right: none;
    }

    .scenario-carousel-nav-item i {
      color: #f90;
      font-size: 1.2em;
      margin-right: 0.3em;
      min-width: 1.2em;
      display: inline-block;
      vertical-align: middle;
    }

    .scenario-carousel-nav-item.active,
    .scenario-carousel-nav-item:hover {
      background: #f90;
      color: #fff;
    }

    .scenario-carousel-nav-item.active i,
    .scenario-carousel-nav-item:hover i {
      color: #fff;
    }

    /* 左右箭头按钮 */
    .scenario-carousel-arrow {
      position: absolute;
      top: 65%;
      transform: translateY(-50%);
      z-index: 10;
      background: rgba(255, 255, 255, 0.85);
      border: 1.5px solid #f90;
      color: #f90;
      border-radius: 50%;
      width: 2.2em;
      height: 2.2em;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3em;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      box-shadow: 0 2px 8px 0 rgba(255, 153, 0, 0.08);
      outline: none;
      user-select: none;
    }

    .scenario-carousel-arrow:hover {
      background: #f90;
      color: #fff;
    }

    .scenario-carousel-arrow.left {
      left: 0.5em;
    }

    .scenario-carousel-arrow.right {
      right: 0.5em;
    }

    .orange-bg-h3 {
      background: #ff9900 !important;
      color: #fff !important;
      padding: 0.5em 1em;
      margin: -1.25em -1.25em 1em -1.25em;
      font-weight: bold;
      font-size: 1.18em;
      display: inline-block;
      box-shadow: 0 2px 8px 0 rgba(255, 153, 0, 0.08);
      width: 70%
    }

    /* 产品参数灰色背景和flex布局 */
    #product-parameters {
      background: #f5f5f5 !important;
      padding: 2em 1.5em;
    }

    .product-params-flex {
      display: flex;
      flex-wrap: wrap;
      gap: 1em;
      padding: 0.5em;
      justify-content: space-between;
      background: #ff9900 !important;
      border-radius: 0.7em;
    }

    .product-param-block {
      background: #fff;
      border-radius: 0.5em;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
      padding: 1.5em 1.5em 1.2em 1.5em;
      flex: 1 1 320px;
      margin-bottom: 0;
      display: flex;
      flex-direction: column;
      gap: 0.7em;
    }

    .product-param-title {
      font-weight: bold;
      font-size: 1.18em;
      margin-bottom: 0.8em;
      color: #f90;
      letter-spacing: 0.02em;
    }

    .product-param-title.black {
      color: #111 !important;
    }

    .product-param-row {
      display: flex;
      align-items: flex-start;
      font-size: 1.05em;
      margin-bottom: 0.5em;
      gap: 1.2em;
    }

    .product-param-label {
      font-weight: bold;
      min-width: 5.5em;
      color: #333;
      flex-shrink: 0;
    }

    .product-param-value {
      color: #555;
      word-break: break-all;
      flex: 1 1 0;
    }

    @media (max-width: 900px) {
      .product-params-flex {
        flex-direction: column;
        gap: 1.5em;
      }

      .product-param-block {
        max-width: 100%;
      }
    }

    /* 独立部署方案自定义样式 */
    #independent-deployment-solution {
      background: #fff;
      border-radius: 0.7em;
      margin: 0 2em;
      padding: 0;
      box-sizing: border-box;
    }

    .indep-top-area {
      border: 2px solid #ff9900;
      border-radius: 1em;
      background: #fff;
      margin-bottom: 2em;
      padding: 2em 1.5em;
      display: flex;
      flex-direction: row;
      gap: 2em;
      align-items: stretch;
      box-sizing: border-box;
    }

    .indep-top-left {
      flex: 2 1 0;
      display: flex;
      flex-direction: row;
      gap: 1.5em;
      min-width: 0;
    }

    .indep-top-left-col {
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      gap: 1em;
      justify-content: center;
    }

    /* 修改开始：indep-feature-main 固定高度，indep-feature 两列布局 */
    .indep-feature-main {
      background: #ff9900;
      color: #fff;
      font-weight: bold;
      font-size: 0.92em;
      border-radius: 0.5em;
      padding: 0.45em 0.3em;
      text-align: center;
      margin-bottom: 0.3em;
      box-shadow: 0 2px 8px 0 rgba(255, 153, 0, 0.08);
      height: 2.5em;
      /* 固定高度 */
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: unset;
      flex: unset;
    }

    .indep-features-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.7em;
      margin-bottom: 0.2em;
    }

    .indep-feature {
      background: #fffbe6;
      color: #ff9900;
      border: 1.5px solid #ff9900;
      border-radius: 0.5em;
      padding: 0.9em 0.5em;
      text-align: center;
      font-size: 1em;
      font-weight: 500;
      margin-bottom: 0;
      height: 2.5em;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 calc(50% - 0.35em);
      /* 两列 */
      min-width: 0;
      box-sizing: border-box;
    }

    /* 修改结束 */
    .indep-top-right {
      flex: 1 1 0;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
    }

    .indep-img-placeholder {
      width: 100%;
      max-width: 220px;
      height: 180px;
      background: repeating-linear-gradient(135deg, #eee, #eee 1.25em, #ddd 1.25em, #ddd 2.5em);
      border: 2px dashed #ff9900;
      border-radius: 0.7em;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ff9900;
      font-size: 1.1em;
      font-weight: bold;

    }

    .indep-bottom-area {
      border: 2px solid #ff9900;
      border-radius: 1em;
      background: #fff;
      padding: 2em 1.5em 1.5em 1.5em;
      box-sizing: border-box;
    }

    .indep-bottom-title {
      color: #ff9900;
      font-weight: bold;
      font-size: 1.15em;
      margin-bottom: 1.2em;
      text-align: left;
    }

    .indep-bottom-content {
      width: 100%;
      display: flex;
      flex-direction: row;
      gap: 2em;
      justify-content: space-between;
      align-items: stretch;
    }

    .indep-bottom-card {
      flex: 1 1 0;
      background: #fff;
      border: 1.5px solid #e0e0e0;
      border-radius: 0.7em;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1.2em 0.7em;
      min-width: 0;
      min-height: 180px;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.03);
    }

    .indep-bottom-img-placeholder {
      width: 100%;
      max-width: 120px;
      height: 90px;
      background: repeating-linear-gradient(135deg, #eee, #eee 1.25em, #ddd 1.25em, #ddd 2.5em);
      border: 1.5px dashed #bbb;
      border-radius: 0.5em;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #bbb;
      font-size: 1em;
      font-weight: bold;
      margin-bottom: 0.7em;
    }

    .indep-bottom-card-title {
      color: #333;
      font-size: 1.05em;
      font-weight: bold;
      text-align: center;
    }

    @media (max-width: 1100px) {

      .indep-top-area,
      .indep-bottom-content {
        flex-direction: column;
        gap: 1.2em;
      }

      .indep-top-left {
        flex-direction: column;
        gap: 1.2em;
      }
    }

    @media (max-width: 700px) {

      .indep-top-area,
      .indep-bottom-area,
      .indep-bottom-content {
        flex-direction: column;
        gap: 1em;
        padding: 1em 0.5em;
      }

      .indep-top-left,
      .indep-bottom-content {
        flex-direction: column;
        gap: 1em;
      }

      .indep-features-grid {
        flex-direction: column;
        gap: 0.7em;
      }

      .indep-feature {
        flex: 1 1 100%;
      }

      .scenario-carousel-arrow {
        top: unset;
        bottom: 0.5em;
        transform: none;
      }

      .scenario-carousel-arrow.left {
        left: 1em;
      }

      .scenario-carousel-arrow.right {
        right: 1em;
      }
    }

    #application-scenario-carousel {
      position: relative;
      background-image: url('uploads/6.png');
      background-size: cover;
      background-position: center;
      z-index: 0;
    }

    #application-scenario-carousel::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(226, 227, 227, 0.85);
      /* 灰色半透明蒙版，透明度调高，灰色更强烈 */
      z-index: 1;
      pointer-events: none;
    }

    #application-scenario-carousel>* {
      position: relative;
      z-index: 2;
    }

    /* 视频弹窗自定义样式 */
    .swal2-video-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.7em;
      margin-bottom: 1em;
      justify-content: center;
    }

    .swal2-video-thumb {
      width: 90px;
      height: 60px;
      background: #eee;
      border-radius: 0.3em;
      border: 2px solid #ff9900;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      overflow: hidden;
      position: relative;
      transition: border 0.2s;
    }

    .swal2-video-thumb.selected,
    .swal2-video-thumb:hover {
      border: 2.5px solid #007bff;
    }

    .swal2-video-thumb video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
    }

    .swal2-video-thumb .swal2-thumb-label {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(255, 153, 0, 0.85);
      color: #fff;
      font-size: 0.6em;
      text-align: center;
      padding: 0.1em 0;
      font-weight: bold;
      pointer-events: none;
    }

    .swal2-video-player {
      width: 100%;
      max-width: 600px;
      margin: 0 auto 0.5em auto;
      display: flex;
      justify-content: center;
    }

    .swal2-video-player video {
      width: 100%;
      max-width: 600px;
      height: 340px;
      background: #000;
      border-radius: 0.5em;
      outline: none;
    }

    @media (max-width: 700px) {
      .swal2-video-player video {
        max-width: 95vw;
        height: 38vw;
        min-height: 180px;
      }

      .swal2-video-list {
        gap: 0.3em;
      }

      .swal2-video-thumb {
        width: 60px;
        height: 40px;
      }
    }

    /* ====== 动画样式 ====== */
    .animate-on-scroll {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.7s cubic-bezier(.4, 0, .2, 1), transform 0.7s cubic-bezier(.4, 0, .2, 1);
      will-change: opacity, transform;
    }

    .animate-on-scroll.animated {
      opacity: 1;
      transform: none;
    }

    /* 可选：不同方向动画 */
    .fade-in-up {
      transform: translateY(40px);
    }

    .fade-in-down {
      transform: translateY(-40px);
    }

    .fade-in-left {
      transform: translateX(-40px);
    }

    .fade-in-right {
      transform: translateX(40px);
    }

    .fade-in-up.animated,
    .fade-in-down.animated,
    .fade-in-left.animated,
    .fade-in-right.animated {
      transform: none;
      opacity: 1;
    }