#nav > ul > li a
{
    color: #555;
}
#nav > ul > li a:hover,#nav > ul > li.current a
{
    color: #52b03f;
}
.navbar
{
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.wrapper.style1.grey
{
    background-color:#F3F6F9 ;
}
/* 容器：图文组合 */
    .design-content {
      display: flex;
  
      align-items: flex-start;
      justify-content: flex-start;
      padding-top: 120px;
      max-width: 1250px;
      margin: auto;
      position: relative;
    }

    /* 图片叠加容器 */
    .design-image-container {
      position: relative;
      width:min(35%,600px);
      aspect-ratio: 1 / 1;
      margin: 20px;
      margin-left: 120px;
      margin-bottom: 60px;

      /* filter: drop-shadow(0 0 15px rgba(100, 220, 150, 0.6)); 浅绿色阴影 */
    }

    .circular-image {
      width: 100%;
      height: 100%;
      /* 使用clip-path创建圆形 */
      clip-path: circle(min(45%,600px) at center);
      /* 确保图片覆盖整个区域 */
      object-fit: cover;
      /* 相对定位为伪元素提供定位上下文 */
      position: relative;
     
    }

    .design-image-container::before {
      content: '';
      position: absolute;
      top: -0.5em;
      /* 调整圆环位置 */
      left:-0.5em;
      right:-0.5em;
      bottom:-0.1em;
      border: 1.5em solid #DEEACD;
      /* 灰色圆环 */
      border-radius: 50%;
      pointer-events: none;
      /* 防止干扰点击 */

    }


    .design-image-container::after {
      content: '';
      position: absolute;
      top: -40px;
      left: -40px;
      right: -40px;
      bottom: -40px;
      border: 1px solid #DEEACD;
      /* 绿色 */
      border-radius: 50%;
      pointer-events: none;
    }


    @keyframes rotateArc {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }


        .design-text {
      flex: 1;
      padding: 20px;
      max-width: 600px;
    }

    .design-text-title {
      color: #000;
      font-size: 1.5em;
      font-weight: 700;
      line-height: 2;
      margin-bottom: 0;
    }

    .design-text-title .green
    {
        color: #8bc540;
    }
 

    .design-text-content {
      color: #555;
      font-size: 0.75em;
      font-weight: 400;
      line-height: 2;
      margin-top: 10px;
       text-align: justify;
  text-justify: inter-word; /* 或 inter-character, distribute */
    }
    .ft14
    {
      font-size: 1em;
    }
    .design-text-content .black
    {
      color: #000;
    }

/* 成功案例 */
    .cases {
      text-align: left;
  
  
    }

     .cases .container
     {
       position: relative;
       overflow: hidden;
       padding-top: 40px;
       text-align: center;

     }

     .cases .container h2{
       padding-bottom: 20px;
     }

     .cases-container {
            position: relative;
            height: 420px;
            perspective: 1200px;
            margin-bottom: 60px;
        }
        
        .case-box {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            opacity: 0;
            transform-style: preserve-3d;
            transition: transform 0.8s ease, opacity 0.8s ease;
            transform: rotateY(180deg);
        }
        
        .case-box.active {
            opacity: 1;
            transform: rotateY(0deg);
            z-index: 10;
        }
        
        .case-box.prev {
            opacity: 0.6;
            transform: rotateY(30deg) translateX(-80%) scale(0.8);
            z-index: 1;
        }
        
        .case-box.next {
            opacity: 0.6;
            transform: rotateY(-30deg) translateX(80%) scale(0.8);
            z-index: 1;
        }

 .case-text-title
 {
   font-size: 24px;
   color: #222;
   text-align: left;
   padding-bottom: 10px;
   border-bottom:  1px solid #ddd;
   margin-bottom: 10px;
 }
 .case-text-desc
 {
   text-align: left;
   width: 100%;
     
 }


 .case-text-desc p, .case-text-desc p span,.case-text-desc ul li
 {
    font-size:0.75em!important;
   line-height: 2;
      white-space: normal !important;  /* 覆盖 nowrap */
  word-wrap: break-word !important;  /* 允许长单词换行 */
  overflow-wrap: break-word !important;  /* 更现代的属性 */
 }

 .case-btn
 {

 
   border: none;
   background-color: #fff;
      background: transparent; /* 完全透明 */
       transition: transform 0.3s ease; /* 平滑过渡动画 */
      cursor: pointer;

 }

  
     .case-img {
            flex: 1;
            min-width: 50%;
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
        }
        
        .case-img::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
           
        }
        
        .case-text {
            flex: 1;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            background-color: #F0F8F2;
         
        }
        
        .case-text h3 {
            color: #222222;
            font-size: 2rem;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 15px;
        }
        
        .case-text h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background: #3498db;
        }
        
        .case-text p {
            color: #555;
            font-size: 1.1rem;
            line-height: 1.7;
            margin-bottom: 25px;
        }
        

          /* 产品卡片容器（Flex 布局） */
    .product-card-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
      width: 1200px;
      margin: 0 auto;
    }

    /* 单个产品卡片 */
    .product-card {
      flex:1;
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* 产品卡片标题（居中） */
    .product-card-title {
      font-size: 1.2rem;
      font-weight: bold;
      padding: 15px;
      margin: 0;
      text-align: center; /* 标题居中 */
    }

    /* 产品标题下方的横线 */
    .product-divider {
      height: 1px;
      background: #e0e0e0;
      margin: 0 15px;
    }
    .product-card-icon img{
      max-width: 90%;
      height: 90px;
      text-align: center;
    }
    .product-card-icon
    {
      text-align: center;

    }

    /* 产品卡片内容（居中） */
    .product-card-content {
      padding: 15px;
      flex-grow: 1;
      text-align: center; /* 内容居中 */
      font-size: 0.8em;
      font-weight: 600;
    }

    .product-card-content p {
      margin: 0 0 10px;
      line-height: 1.5;
    }

    /* 产品卡片底部图片 */
    .product-card-image {
      width: 90%;
      height: 200px;
      object-fit: cover;
      margin: 0 auto;
      margin-bottom: 1.5em;
      margin-top: 1em;
    }

     .timeline-container {
            max-width: 100%;
            margin: 0 auto;
            position: relative;
            padding: 300px 0;
        }

        /* 主时间线 */
        .timeline-line {
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 2px;
            /* Adjust thickness */
            border-top: 1px solid #8bc540;
            transform: translateY(-50%);
            z-index: 1;
        }

        .timeline-items {
            display: flex;
            justify-content: center;
            position: relative;
            z-index: 2;

        }

        .timeline-item {
            position: relative;
            width: 300px;
            min-width: 150px;
        }

        /* 时间节点 */
        .timeline-node {
            width: 10px;
            height: 10px;
            background-color: #8bc540;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            z-index: 3;
            box-shadow: 0 0 10px rgba(139, 197, 64, 0.6);
            /* Glow effect */
            transition: box-shadow 0.3s ease;
        }

        .timeline-item:nth-child(odd) .timeline-node {
            top: -120px
        }

        .timeline-item:nth-child(even) .timeline-node {
            top: 120px;
        }

        /* 上下延伸线 */
        .timeline-connector {
            position: absolute;
            width: 2px;
            background-color: #8bc540;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        /* 卡片容器 */
        .timeline-card {
          
            border-radius: 8px;
          
            position: absolute;
            width: 280px;
            transition: all 0.3s ease;
        }
        .timeline-section
        {
          background-color: #fff;
          text-align: center;
          margin-top: 1em;
          margin-bottom: 1em;
          padding-top: 2em;
        }

        /* 交替显示在上方和下方 */
        .timeline-item:nth-child(odd) .timeline-connector {
            height: 120px;
            bottom: 100%;
            top: auto;
        }

        .timeline-item:nth-child(odd) .timeline-card {
            bottom: calc(100% + 10px);
            left: 100%;
            transform: translateX(-50%);
        }

        .timeline-item:nth-child(even) .timeline-connector {
            height: 120px;
            top: 100%;
        }

        .timeline-item:nth-child(even) .timeline-card {
            top: calc(100% + 10px);
            left: 100%;
            transform: translateX(-50%);
        }

        .timeline-card h3 {
           
            margin-bottom: 0.8em;
            font-size: 0.8em;
        }
        .timeline-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin: 0 auto;
    border-radius: 8px;
  
}

        .timeline-card p {
            color: #555;
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 0;
        }

        .timeline-card .date {
            color: #2ecc71;
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 14px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .timeline-items {
                flex-direction: column;
                align-items: flex-start;
                padding-left: 40px;
            }

            .timeline-line {
                left: 20px;
                width: 4px;
                height: 100%;
                top: 0;
                transform: none;
            }

            .timeline-item {
                width: 100%;
                margin-bottom: 60px;
                min-width: auto;
            }

            .timeline-node {
                left: -32px;
                top: 50%;
                transform: translateY(-50%);
            }

            .timeline-connector {
                height: 2px;
                width: 20px;
                top: 50%;
                left: -12px;
                transform: translateY(-50%);
            }

            .timeline-card {
                position: relative;
                width: 100%;
                top: auto;
                bottom: auto;
                left: auto;
                transform: none;
                margin-top: 15px;
            }

            .timeline-item:nth-child(odd) .timeline-card,
            .timeline-item:nth-child(even) .timeline-card {
                top: auto;
                bottom: auto;
                left: auto;
                transform: none;
            }
        }
        .tc
        {
          text-align: center;

        }
        .pb2
        {
          padding-bottom: 2em;
        }

        .product-flow-carousel-wrapper {
  width: 100%;
  max-width: 1200px; /* 新增最大宽度限制 */

  margin: 40px auto;
  position: relative;
}

.product-flow-carousel-track {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 2vw;
  transition: all 0.5s ease;
  padding-bottom: 60px;
  position: relative;
}

.product-flow-slide {
  flex: 0 0 calc(28vw - (28vw * 0.4)); /* 调整为5:3比例 */
  height: calc((28vw - (28vw * 0.4)) * 0.6); /* 5:3比例计算高度 */
  max-width: 400px; /* 防止在大屏幕上过大 */
  max-height: 240px; /* 5:3比例对应高度 */

  transform-origin: center bottom;

  transition: all 0.5s ease;
  position: relative;
  z-index: 1;
  aspect-ratio: 5/3; /* 确保保持5:3比例 */
}

.product-flow-slide.active {
  transform: scale(1.2);
  opacity: 1;
  z-index: 3;
}

.product-flow-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  display: block;
  aspect-ratio: 5/3; /* 图片保持5:3比例 */
}

.product-flow-badge {
  position: absolute;
  left: 0.5em;
  bottom: 0.5em;
  font-weight: bold;
  color: #fff;
  font-size: 1em;

  pointer-events: none;
}

.product-flow-carousel-nav {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 20px;
}

.product-flow-button {
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
   background: transparent; /* 完全透明 */
       transition: transform 0.3s ease; /* 平滑过渡动画 */
}



.product-flow-button:hover {
    /* transform: scale(1.1); 放大到 1.1 倍 */
}

@media (max-width: 768px) {
  .product-flow-slide {
    flex: 0 0 calc(36vw - (36vw * 0.4)); /* 移动端5:3比例调整 */
    height: calc((36vw - (36vw * 0.4)) * 0.6);
    max-width: 300px;
    max-height: 180px;
  }

  .product-flow-slide.active {
    transform: scale(1.1);
  }
}