.banner{
    width: 100%;
    height: 500px;
    margin-top: 135px;
}
.banner img{
    width: 100%;
    height: 500px;
}
.banner span{
    position: relative;
    bottom: 267px;
    left: 210px;
    width: 196px;
    height: 32px;
    font-family: 'Poppins-Black';
    font-weight: 900;
    font-size: 42px;
    color: #FFFFFF;
    line-height: 57px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
/* ------------------------------------------------------------------------------------------------------- */

/* 面包屑 */
.breadcrumb{
    width: 100%;
    height: 45px;
    background-color: #e5e5e5;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.breadcrumb-container{
    width: 78%;
    height: 45px;
    line-height: 45px;
}
.breadcrumb-container a{
    text-decoration: none;
}
.breadcrumb .span1{
    width: 37px;
    height: 11px;
    font-family: ArialMT;
    font-size: 14px;
    color: #626263;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.breadcrumb .span2{
    width: 59px;
    height: 12px;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: 400;
    font-size: 14px;
    color: #E60012;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
/* ------------------------------------------------------------------------------------------------------- */

/* 产品目录 */
.product-catalog{
    width: 100%;
    height: 1611px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.product-catalog h2{
    font-family: 'Poppins-Black';
    font-weight: 900;
    font-size: 48px;
    color: #222254;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.search-container {
      display: flex; /* 让输入框和按钮横向排列 */
      align-items: center;
    }

.search-container input {
    width: 549px;
    height: 65px;
  padding: 8px 12px;
  border: 1px dashed #ccc; /* 虚线边框 */
  border-right: none; /* 去掉与按钮相邻的右边框，视觉更连贯 */
  outline: none; /* 移除输入框聚焦时的默认外轮廓 */
  font-size: 14px;
}
.search-container button {
  width: 99px;
  height: 65px;
  padding: 8px 16px;
  background-color: #E60012; /* 按钮红色背景 */
  color: white; /* 按钮文字白色 */
  border: none; /* 移除按钮默认边框 */
  cursor: pointer; /*  hover 时显示手型指针 */
  font-size: 16px;
}

.product-catalog-content{
  margin-top: 30px;
    width: 78%;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}
.product-item{
    width: 23.1%;
    height: 180px;
    border: 1px solid #DCDDDD;
    margin: 0.80%;
    position: relative;
}
.product-item img{
    margin: 25px 0 0 24px;
}
.product-item span{
    font-family: 'Poppins-Black';
    font-weight: 900;
    font-size: 24px;
    color: #222254;
    text-align: left;
    font-style: normal;
    text-transform: none;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 37px 10px;
}
.product-item div{
    font-size: 14px;
    color: #222254;
    text-align: center;
    position: absolute;
    top: 35%;
    right: 5%;
}
.product-item div:hover{
  color: #E60012;
}
.product-item button{
    width: 78%;
    height: 39px;
    color: #a3a3a3;
    border: 1px solid #E60012;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    margin: 0px 0 0 24px;
    background-color: #ffffff;
}
.product-item button:hover{
    background-color: #E60012;
    color: #ffffff;
}

/* 分页控件 */
.pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 30px;
      gap: 10px;
    }

    .page-numbers {
      display: flex;
      gap: 5px;
    }

    .pagination button,
    .page-numbers button {
      color: #e60012;
      padding: 8px 12px;
      border: 1px solid #ccc;
      background: #ffffff;
      cursor: pointer;
      border-radius: 4px;
      min-width: 40px;
    }

    .pagination button:disabled,
    .page-numbers button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .page-numbers button.active {
      background: #e60012;
      color: white;
      border-color: #e60012;
    }


    /* 手机端响应式样式 */
@media (max-width: 768px) {
  .banner {
    height: 300px;
    margin-top: 80px;
  }

  .banner img {
    height: 300px;
  }

  .banner span {
    bottom: 160px;
    left: 20px;
    font-size: 28px;
    line-height: 36px;
  }

  .breadcrumb-container {
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
  }

  .product-catalog {
    height: auto;
    padding: 20px 0;
  }

  .product-catalog h2 {
    font-size: 32px;
    text-align: center;
  }

  .search-container {
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
  }

  .search-container input {
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
    border-right: 1px dashed #ccc !important;
  }

  .search-container button {
    width: 100%;
    height: 50px;
  }

  .product-catalog-content {
    width: 100%;
    height: auto;
    justify-content: center;
    box-sizing: border-box;
    margin-top: 50px;
  }

  .product-item {
    width: 90%;
    height: auto;
    margin-bottom: 20px;
    padding: 15px;
    box-sizing: border-box;
  }

  .product-item img {
    margin: 0 auto 15px;
    display: block;
  }

  .product-item span {
    font-size: 20px;
    text-align: center;
    display: block;
    margin-bottom: 15px;
  }
  .product-item div{
    /*margin-bottom: 17px;*/
    /*margin-top: -18px;*/
    /*margin-left: 118px;*/
    /*font-size: 23px;*/
      position: absolute;
      top: 20%;
      right: 6%;
  }
  .product-item button {
    width: 100%;
    margin: 0;
  }

  .pagination {
    flex-wrap: wrap;
    padding: 0 15px;
  }

  .page-numbers {
    flex-wrap: wrap;
    justify-content: center;
  }

  .pagination button,
  .page-numbers button {
    min-width: 35px;
    padding: 6px 8px;
    font-size: 14px;
  }
}

/* 超小屏幕手机样式 */
@media (max-width: 480px) {
  .banner {
    height: 140px;
    margin-top: 60px;
  }

  .banner img {
    height: 140px;
  }

  .banner span {
    bottom: 100px;
    left: 15px;
    font-size: 24px;
    line-height: 30px;
  }

  .product-catalog h2 {
    font-size: 28px;
  }

  .product-item {
    width: 95%;
  }

  .product-item span {
    font-size: 18px;
  }
}