/* 现有的banner样式保持不变 */
.banner {
    width: 100%;
    height: 100vh;
    background-image: url('/images/product/300000580.png');
    background-size: cover;
    background-position: center;
}

/* 添加产品内容区域样式 */
.product-content {
    padding: 100px 0;
    background: #fff;
}

.section-title {
    margin-bottom: 24px;
    font-size: var(--font-size-30);
    color: var(--text-color);
}

.section-subtitle {
    font-size: var(--font-size-20);
}


/* 产品线 */
  .timeline-nav {
    width: 100%;
    position: relative;
    margin-top: 80px;
  }
  
  .timeline-nav::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    width: 100%;
    height: 1px;
    border-top: 1px dashed #7a7a7a;
  }
  
  .timeline-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
  }
  
  .timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 1;
    cursor: pointer;
  }
  
  .timeline-item .icon {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    margin-bottom: 30px;
  }
  
  .timeline-item .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .timeline-item .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4c4c4c;
    box-shadow: 0 0 0 10px rgba(223, 223, 223, .8);
  }
  
  .timeline-item.active .dot {
    background: var(--primary-color);
    box-shadow: 0 0 0 10px rgba(226, 236, 253, .8);
  }

  /* 东风S50EV换电站 */
  .s50-header {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 100px;
    margin: 80px 0;
  }
  .swiper-container {
      width: 690px;
      height: 288px;
      min-width: 200px;
      overflow: hidden;
      display: inline-block;
  }
  .swiper-slide {
      width: 100%;
      height: 100%;
  }
  
  .swiper-slide-1 {
      background: url('/images/product/100000423.png') no-repeat center;
      background-size: contain;
  }
  .swiper-slide-2 {
      background: url('/images/product/100000421.png') no-repeat center;
      background-size: contain;
  }
  .swiper-slide-3 {
      background: url('/images/product/100000422.png') no-repeat center;
      background-size: contain;
  }
  .pagination-ul {
        list-style: none;
        display: flex;
        justify-content: center;
        margin-top: 20px;
  }
    .pagination-ul>li {
        width: 33px;
        height: 2px;
        background: #999999;
        margin-right: 10px;
        cursor: pointer;
    }
    .pagination-ul>li.active {
        background: var(--primary-color);
    }
    .s50 {
        display: block;
        height: 66px;
        border-bottom: 3px solid var(--primary-color);
        padding-bottom: 20px;
    }
    .s50-title {
        font-size: var(--font-size-36);
        font-weight: 500;
        color: var(--text-color);
    }
    .s50-subtitle {
        margin-left: 10px;
        font-size: var(--font-size-24);
        color: var(--text-color);
    }

    /* 产品介绍 */
    .product-intro{
        padding: 100px 0;
    }
    .title {
        color: var(--text-color);
        border-bottom: 3px solid var(--primary-color);
        padding-bottom: 20px;
        font-size: var(--font-size-28); 
        display: inline-block;
    }
    
    .description {
        font-size: var(--font-size-20); 
        color: var(--text-color);
        font-weight: 300;
        margin: 60px 0;
    }
    .product-img {
        width: 70%;
    }
    /* 产品参数 */
    .specs-table {
        display: flex;
        flex-direction: column;
        margin-top: 40px;
    }
   /*  .specs-row:nth-child(1) {
        border-top: 1px solid var(--light-gray-color);
    } */
    .specs-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        border-bottom: 1px solid var(--light-gray-color);
    }
    .specs-row-1 {
        display: grid;
        grid-template-columns: 1fr 3fr;
        border-bottom: 1px solid var(--light-gray-color);
    }
    .specs-item {
        padding: 20px 0;
    }
    .specs-item h3 {
        color: var(--text-color);
        font-size: var(--font-size-20);
        margin-bottom: 20px;
    }
    .specs-item p {
        color: var(--text-color);
        font-size: var(--font-size-16);
        margin: 0;    
        font-weight: 400;
    }

    .weight {
        font-weight: bold;
        display: flex;
        align-items: center;
    }
    .primary {
        color: var(--primary-color);
        font-size: var(--font-size-20);
        font-weight: 500;
    }

  /* 大屏幕 (1440px 及以上) */
@media screen and (min-width: 1440px) and (max-width: 1919px)  {
  .section-title {
    font-size: var(--font-size-24);
  }
  .section-subtitle {
    font-size: var(--font-size-20);
  }
  .swiper-container {
    width: 660px;
    height: 258px;
  }
  .s50-title {
      font-size: var(--font-size-30);
  }
  .s50-subtitle {
      font-size: var(--font-size-22);
  }
}

/* 中等屏幕 (1280px - 1439px) */
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .section-title {
    font-size: var(--font-size-20);
  }
  .section-subtitle {
    font-size: var(--font-size-16);
  }
  .swiper-container {
    width: 530px;
    height: 228px;
  }
  .s50-title {
      font-size: var(--font-size-26);
  }
  .s50-subtitle {
      font-size: var(--font-size-20);
  }
  .specs-item h3 {
      font-size: var(--font-size-16);
  }
  .specs-item p {
      font-size: var(--font-size-14);
  }
}

/* 平板及小屏幕 (1024px - 1279px) */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .section-title {
    font-size: var(--font-size-18);
  }
  .section-subtitle {
    font-size: var(--font-size-14);
  }

  /* 产品线 */
  .timeline-item .icon {
    width: 80px;
    height: 80px;
  }
  .timeline-item .dot {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 8px rgba(223, 223, 223, .8);
  }
  .timeline-item.active .dot {
    box-shadow: 0 0 0 8px rgba(226, 236, 253, .8);
  }

  /*  */
  .swiper-container {
    width: 430px;
    height: 208px;
  }
  .s50 {
    height: 56px;
  }
  .s50-title {
      font-size: var(--font-size-22);
  }
  .s50-subtitle {
      font-size: var(--font-size-18);
  }
  .specs-item h3 {
      font-size: var(--font-size-14);
  }
  .specs-item p {
      font-size: var(--font-size-12);
  }
}

/* 平板 (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .section-title {
    font-size: var(--font-size-24);
  }
  .section-subtitle {
    font-size: var(--font-size-18);
  }
  .timeline-item .icon {
    width: 80px;
    height: 80px;
  }
  .timeline-item .dot {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 8px rgba(223, 223, 223, .8);
  }
  
  .timeline-item.active .dot {
    box-shadow: 0 0 0 8px rgba(226, 236, 253, .8);
  }
  .timeline-nav::before {
    bottom: 4px;
  }

  /*  */
  .s50-header{
    flex-direction: column-reverse;
    gap: 80px;
  }
  .swiper-container {
    width: 100%;
  }
  .s50 {
    height: 56px;
  }
  .s50-title {
      font-size: var(--font-size-26);
  }
  .s50-subtitle {
      font-size: var(--font-size-18);
  }
    
  .specs-item h3 {
      font-size: var(--font-size-16);
  }
  .specs-item p {
      font-size: var(--font-size-14);
  }
}

/* 移动端 (480px - 767px) */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .section-title {
    font-size: var(--font-size-24);
  }
  .section-subtitle {
    font-size: var(--font-size-18);
  }
  /* 产品线 */
  .timeline-items {
    /* 横向滚动条 */
    gap: 80px;
    overflow: hidden;
    overflow-x: scroll;
    width: 100%;
    padding-bottom: 20px;
  }
  .timeline-item .dot {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 8px rgba(223, 223, 223, .8);
  }
  
  .timeline-item.active .dot {
    box-shadow: 0 0 0 8px rgba(226, 236, 253, .8);
  }
  .timeline-nav::before {
    bottom: 25px;
  }
  /*  */
  .s50-header{
    flex-direction: column-reverse;
    gap: 80px;
  }
  .swiper-container {
    width: 100%;
  }
  .s50 {
    height: 56px;
  }
  .s50-title {
      font-size: var(--font-size-22);
  }
  .s50-subtitle {
      font-size: var(--font-size-18);
  }
  .specs-item h3 {
      font-size: var(--font-size-16);
  }
  .specs-item p {
      font-size: var(--font-size-14);
  }
}

/* 小屏手机 (375px 及以下) */
@media screen and (max-width: 479px) {
  .section-title {
    font-size: var(--font-size-24);
  }
  .section-subtitle {
    font-size: var(--font-size-18);
  }
  
  /* 产品线 */
  .timeline-nav {
    margin-top: 40px;
  }
  .timeline-items {
    /* 横向滚动条 */
    gap: 80px;
    overflow: hidden;
    overflow-x: scroll;
    width: 100%;
    padding-bottom: 20px;
  }
  .timeline-item .dot {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 8px rgba(223, 223, 223, .8);
  }
  
  .timeline-item.active .dot {
    box-shadow: 0 0 0 8px rgba(226, 236, 253, .8);
  }
  .timeline-nav::before {
    bottom: 25px;
  }
  /*  */
  .s50-header{
    flex-direction: column-reverse;
    gap: 40px;
  }
  .swiper-container {
    width: 340px;
    height: 200px;
    min-width: 200px;
  }
  .s50 {
    height: 56px;
  }
  .s50-title {
      font-size: var(--font-size-22);
  }
  .s50-subtitle {
      font-size: var(--font-size-18);
  }
    
  .specs-item h3 {
      font-size: var(--font-size-16);
  }
  .specs-item p {
      font-size: var(--font-size-14);
  }
}