.fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s ease-out;
        }

     .logo img
     {
         border-radius: 0px;
     }



        .process,
        .cases,
        .equipment {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }

        .product-process {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 60px;
            background-image: url("../../images/product-design-line.png");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center 65%;
            /* 居中显示 */
            background-size: 80% auto;

        }

        .product-process div {

            padding: 20px;

        }

        .product-process div img {
            width: 128px;
        }

        .case-container {

            margin: 0 auto;
            font-family: Arial, sans-serif;
        }

        .case-cards {
            position: relative;
           max-height: 350px;
            overflow: hidden;
        }

        .case-card {
            display: none;
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
            background: #f9f9f9;
            border-radius: 10px;

            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: opacity 0.5s ease-in-out;
        }

        .case-card.active {
            display: flex;
        }

        .case-image {
            width: 45%;
            height: auto;
            object-fit: cover;
            border-radius: 6px;
        }

        .case-content {
            width: 50%;
            padding-top: 20px;
        }

        .case-title {
            font-size: 20px;
            margin-bottom: 20px;
            text-align: left;
            font-weight: normal;

        }

        .case-description {
            font-size: 14px;
            color: #555;
            line-clamp: 4;
            padding-right: 20px;
            text-align: left;
        }

        /* 进度栏 */
        .case-progress {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            font-size: 14px;
            color: #333;
        }

        .case-controls .case-btn {
            background: #fff;
            color: #285BA9;
            border: none;
            width: 36px;
            height: 36px;
            font-size: 18px;
            border: 1px solid #285BA9;
            margin-left: 10px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .case-controls .case-btn:hover {
            background: #1a3c70;
        }

        .process div,
        .cases div,
        .equipment div {
            flex: 1 1 200px;
            padding: 20px;
            background: #f3f6fa;
            border-radius: 10px;
            min-height: 120px;
        }

        .equipment-title {
            display: flex;
            /* 1. 将 .equipment-title 设置为 flex 容器 */
            justify-content: flex-start;
            /* 2. 使 flex 项目（图片和文字）在主轴（默认是水平方向）上居中 */
            align-items: center;
            /* 3. 使 flex 项目在交叉轴（默认是垂直方向）上居中，这能确保图片和文字垂直对齐 */
            /* 可选：如果你希望图片和文字之间有一些间距 */
            gap: 10px;
            /* 在图片和文字之间添加 10px 的间距 */
            /* 或者，你也可以只给图片添加右边距： */
            /* margin-right: 10px; (如果用这个，就注释掉上面的 gap) */

        }






        .equipment-title img {
            width: 40px;
        }

        .equipment-title span {
            line-height: 40px;
            color: #285BA9;
            font-size: 20px;
        }

        img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
        }

        .product-cards {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            padding: 20px;
        }

        .product-card {
            flex: 1 1 200px;
            /* 卡片宽度自适应，最小宽度 200px */
            background: #f9f9f9;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .product-overlay-images-section {

            padding: 20px;
        }

        .product-text {
            padding: 15px;
        }

        .product-title {
            font-size: 18px;

            margin-bottom: 10px;
        }

        .product-description {
            font-size: 12px;
            color: #333;
            line-height: 1.5;
        }

        .overlay-images-section {
            background: #f9f9f9;
            padding: 15px 0;
            text-align: center;
            padding-bottom: 10px;
        }

        .overlay-container {
            position: relative;
            display: inline-block;
            /* 让容器宽度由内容决定 */
            width: 200px;
            /* 可根据需要调整 */
            height: 200px;
            /* 可根据需要调整 */
        }

        .overlay-container img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .overlay-bg {
            width: 200px;
            height: 200px;
            z-index: 1;
            transform-origin: center center;
            transform: translate(-50%, -50%) rotate(0deg);
        }

        .overlay-bg.bg90 {
            transform: translate(-50%, -50%) rotate(90deg);

        }

        .overlay-bg.bg180 {
            transform: translate(-50%, -50%) rotate(180deg);

        }

        .overlay-bg.bg270 {
            transform: translate(-50%, -50%) rotate(270deg);

        }

        .overlay-fg {
            width: 35px;
            height: 35px;
            height: auto;
            z-index: 2;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;


        }

        .product1 {
            position: relative;
            width: 100%;
            min-height: 500px;
            /* 撑满整个屏幕高度 */
        
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            /* 完全覆盖容器 */
        }

        .overlay-bg-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* 图片拉伸填满容器 */
            z-index: 1;
            opacity: 1;
        }

        .product-text-2 {
            position: absolute;
            max-width: 47%;
            /* 取 15% 和 200px 中较小的值 */
            top: 10px;
            left:48%;
        }

        .product-list {


            list-style: none;
            /* 移除默认的列表符号 */
            padding: 0;
            margin: 0;

            padding-bottom: 100px;
            z-index: 2;

        }

        .product-list li {
            display: flex;
            /* 使用 flex 布局 */
            align-items: center;
            /* 垂直居中对齐 */
            margin-bottom: 20px;
            /* 列表项之间的间距 */
        }

        .product-icon {
            width: 10px;
            /* 图标宽度 */
            height: 10px;
            /* 图标高度 */
            margin-right: 10px;
            /* 图标与文本之间的间距 */
        }


        .product-list .product-text2 {
            font-size: 12px;
            /* 文本大小 */
            line-height: 1.5;
            color: #333;
            /* 文本颜色 */

        }

        .product-title2 {
            text-align: left;
            padding-bottom: 20px;
            padding-top: 70px;
        }

        .product-title2 h3 {
            font-size: 20px;
            color: #285BA9;
            font-weight: normal;

        }

        .product-title2 h3 img {
            padding-right: 10px;
            width: 28px;
        }

        .product-title2 p {
            font-size: 30px;
            color: #222;
            padding-top: 10px;
        }

        .productbg3 {
            background-image: url("../../images/product-bg3.png");
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            padding-top: 60px;
            padding-bottom: 60px;
        }

        .tc {
            text-align: center;
        }

        .equipment-section {
            padding: 20px 20px;

        }



        .equipment-container {
            display: flex;
            gap: 40px;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .equipment-column {
            flex: 1;
            min-width: 45%;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .equipment-card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            transition: box-shadow 0.3s ease;
            min-height: 354px;
        }

        .equipment-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .equipment-images {
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            flex-wrap: wrap;
            margin-bottom: 15px;
        }
        .equipment-text
        {
            font-size: 12px;
    color: #333;
    margin-top: 6px;
    text-align: left;
    padding-left: 10px;
        }
        .equipment-text.f14{
            font-size: 14px;
            line-height: 16px;
            padding-bottom: 10px;
            font-weight: 500;
            
        }

        .equipment-image-wrapper {
            text-align: center;
            width: 30%;

            margin: 5px 0;
        }

        .equipment-image-wrapper.images2 {
            width: 46%;
        }

        .equipment-image {
            width: 100%;
            height: auto;
            object-fit: contain;
            border-radius: 6px;
            transition: transform 0.3s ease;
        }

        .equipment-image:hover {
            transform: scale(1.05);
        }

        .equipment-image-text {
            font-size: 12px;
            color: #333;
            margin-top: 6px;
            text-align: left;
        }


        /* 容器样式 */
.product-container {
     display: flex!important;
    justify-content: space-between; /* 项目之间留有空间，第一个项目靠左，最后一个项目靠右 */
    align-items: center; /* 垂直居中对齐项目 */
    padding: 20px; /* 给容器一些内边距，可选 */
    gap: 20px; /* 在文本内容和图片之间添加20px的间隙，如果justify-content: space-between; 效果不理想时可以辅助 */
    /* border: 1px solid #eee; */ /* 可选：用于可视化容器边界 */
    padding-top: 60px;
}

.product-container2{
    padding-top: 20px;
}
/* 左侧文本内容区域 */
.product-text-content {
    /* flex: 1; */ /* 可选：如果希望文本区域占据更多可用空间，可以取消注释 */
    /* max-width: 60%; */ /* 可选：限制文本区域的最大宽度，给图片留出空间 */
    width: 550px;
}
.product-text-content .p1{
    font-weight: 300;
}

.product-text-content .p11{
    font-weight: 300;
      font-size: 40px;
}

.product-text-content .p21{
   
      font-size: 53px;
}

.product-text-content .p2{
    font-weight: bold;
}

.product-text-content h2 {
    margin-top: 0; /* 移除h2默认的上边距，使其与容器顶部对齐更好看 */
    margin-bottom: 18px; /* h2 和 p 之间的间距 */
  
    color: #222;
    font-size: 24px;
    text-align: left;
  
}

.product-text-content p {
    margin-top: 0;
    margin-bottom: 0; /* 移除p默认的下边距 */
    color: #285BA9;
    font-size: 56px;
    text-align: left;
}

/* 右侧图片区域 */
.product-image {
    /* flex-shrink: 0; */ /* 可选：防止图片在空间不足时被压缩 */
    max-width: max(50%,600px); /* 限制图片的最大宽度，确保它不会过大 */
    /* 或者使用固定宽度，例如 width: 300px; */
    height: auto; /* 保持图片的宽高比 */
    display: block; /* 移除图片下方的额外空间（如果图片是inline元素）*/
    border-radius: 8px; /* 可选：给图片加个圆角 */
}

/* 响应式调整：当屏幕宽度小于某个值时，可以考虑将布局变为堆叠式 */
@media (max-width: 768px) {
    .product-container {
        flex-direction: column; /* 项目垂直堆叠 */
        align-items: flex-start; /* 左对齐堆叠的项目 */
        /* 或者 align-items: center; 如果希望堆叠后也居中 */
        text-align: center; /* 如果希望堆叠后文本也居中 */
    }

    .product-text-content {
        max-width: 100%; /* 在堆叠时，文本区域可以占据全部宽度 */
        margin-bottom: 20px; /* 文本和图片之间的间距 */
        /* text-align: left; */ /* 如果上面设置了text-align: center，这里可以覆盖 */
    }

    .product-image {
        max-width: 80%; /* 在堆叠时，图片宽度可以调整 */
        /* margin: 0 auto; */ /* 如果希望图片在堆叠时水平居中 */
        align-self: center; /* 如果希望图片在堆叠时水平居中 */
    }
}

/* fade-in 类的基本实现 (如果需要) */
.fade-in {
    opacity: 0;
    animation: fadeInAnimation 1s ease-in-out forwards;
}

@keyframes fadeInAnimation {
    from {
        opacity: 0;
        transform: translateY(20px); /* 可选的轻微向上滑动效果 */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


        @media (max-width: 768px) {
            .equipment-container {
                flex-direction: column;
                align-items: center;
            }

            .equipment-column {
                min-width: 100%;
            }
        }

        @media (max-width: 768px) {


            .process div,
            .cases div,
            .equipment div {
                flex: 1 1 100%;
            }

            .banner {
                font-size: 1.2em;
                height: 30vh;
            }
        }
      .tab-nav {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 40px 0 20px;
            height: 180px;
          
        }

        .tab-nav::before,
        .tab-nav::after {
            content: '';
            width: calc(100% / 10);
        }

        .tab-line {
            position: absolute;
            top: 95px;
            /* Raised a bit */
            left: 0;
            right: 0;
            height: 1px;
            background-color: rgba(40, 91, 169, 0.3);
            z-index: 0;
        }

        .tab-node {
            position: relative;
            z-index: 1;
            text-align: center;
            cursor: pointer;
            padding-top: 5px;
            padding-top: 10px;
        }
        .tab-node img{
           height: 40px;
           padding-bottom: 10px;
        }

        .tab-dot {
            width: 12px;
            height: 12px;
            border-radius: 0;
            /* 取消圆形 */
            background-color: transparent;
            margin: 0 auto;
            position: relative;
        }

        .tab-dot::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 6px solid #285BA9;
            /* 蓝色向上箭头 */
        }

        .tab-label {
            font-size: 14px;
            color: #555;
            margin-top: 4px;
            white-space: nowrap;
            padding-bottom: 10px;
            padding-top: 10px;
        }

        .tab-node.active .tab-label {
            color: #007bff;
            font-weight: bold;
        }


        .tab-content {
            display: none;
            margin-top: 30px;
            position: relative;
        }


  

.image-container {
    width:max(52%, 600px);
    
    position: relative;
    overflow: hidden;
    clip-path: ellipse(54% 107% at 28% 64%);
}

.image-container img {
  width: 100%;
  height: 500px;
  display: block;
  border-radius: 0px;

}

.text-content {
  width: 50%;
  padding: 0 40px;
}

.highlight {
  color: #4a90e2;
  font-weight: bold;
}

.text-content h1 {
  font-size: 28px;
  margin: 10px 0 20px;
  color: #333;
}

.text-content ul {
  padding-left: 20px;
}

.text-content li {
  margin-bottom: 15px;
  font-size: 16px;
  color: #444;
  line-height: 1.6;
  list-style: none;
  position: relative;
}

.text-content li::before {
  content: "▶";
  color: #4a90e2;
  margin-right: 8px;
}
        .tab-node.active .tab-label a
 {
    color: #007bff;
    font-weight: bold;
}



   .product-timeline {
            position: relative;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .product-timeline-line {
            position: absolute;
            top: calc(50% + 30px);
            left: 50px;
            /* 从第一个节点右侧开始 */
            right: 50px;
            /* 到最后一个节点左侧结束 */
            height: 1px;
            background: repeating-linear-gradient(to right, #4a90e2 0, #4a90e2 3px, transparent 5px, transparent 10px);
            z-index: 1;
            transform: translateY(-50%);
            margin-left: 10px;
            margin-right: 10px;
        }

        .product-nodes-container {
            display: flex;
            justify-content: space-between;
            position: relative;
            z-index: 2;
            padding: 0 50px;
            /* 与虚线的左右边距匹配 */
        }

        .product-node {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            flex: 1;
            /* 使节点均匀分布 */
            max-width: 80px;
            /* 控制节点最大宽度 */
        }

     
        .product-node-name {
            margin-bottom: 20px;
            font-weight: bold;
            color: #333;
            font-size: 12px;
            text-align: center;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 8px;
        }

        .product-node-name img {
            width: 20px;
            height: 20px;
            border-radius: 0;
        }

        .product-node-image-wrapper {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px solid #4a90e2;
            padding: 10px;
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .product-node-image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            background-color: #eee;
        }