.main-top-box {

  padding: 120px 0 120px 0;

  background-image: url("../images/products-top-background-img.png");

  background-repeat: no-repeat;

  background-size: cover;

  position: relative;

  z-index: 1;

}

.main-top-box::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: rgba(0, 0, 0, 0.8);

  z-index: -1;

}

.main-top-text-box > h2 {

  color: white;

  text-align: center;

  font-size: 50px;

  font-weight: 600;

  margin-bottom: 0;

}

.main-crumbs-box {

  margin-top: 40px !important;

  margin-bottom: 120px;

  display: flex;

  align-items: center;

}

.main-crumbs-box > img {

  width: 20px;

  margin-right: 10px;

}

.main-crumbs-box p {

  margin-bottom: 0 !important;

}

.main-box{

    padding-bottom: 60px;

}

.blog-box > p {

  color: #ff4d47;

  font-size: 22px;

  text-align: center;

}

.blog-box > h2 {

  font-weight: 600;

  font-size: 50px;

  margin: 10px 0 50px 0;

  text-align: center;

}

.blog-list{

    position: relative;

    /* 新增：确保内容不被蒙层覆盖 */

    overflow: hidden;

    margin-bottom: 40px;

}



/* 新增：图片容器样式 */

.blog-img-wrapper {

    position: relative;

    width: 100%;

    /* 确保图片容器与图片同尺寸 */

}



/* 调整原有图片样式 */

.blog-list > .blog-img-wrapper > img{

    width: 100%;

    display: block; /* 去除图片底部间隙 */

    transition: transform 0.5s ease; /* 新增：图片缩放过渡 */

}



/* 新增：蒙层样式 */

.blog-img-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明（透明度50%） */

    opacity: 0; /* 默认隐藏 */

    transition: opacity 0.3s ease; /* 蒙层显示过渡动画 */

    z-index: 1; /* 确保蒙层在图片上方、日期下方 */

    border-radius: 10px;

}



/* 新增：鼠标移入时显示蒙层 */

.blog-list:hover .blog-img-overlay {

    opacity: 1;

}



/* 原有样式保持不变 */

.blog-list:hover .bolg-date{

    background-color: #ff4d47;

}

.blog-list:hover .bolg-date > p{

    color: white;

}

.blog-list > h5{

    font-weight: 600;

    font-size: 30px;

    margin: 20px 0 15px 0;

    line-height: 40px;

}

.blog-list > p{

    line-height: 30px;

}

.bolg-date{

    position: absolute;

    left: 22px;

    top: 10px;

    background-color: white;

    border-radius: 10px;

    padding: 10px 25px;

    text-align: center;

    z-index: 2; /* 确保日期在蒙层上方 */

    transition: background-color 0.3s ease; /* 日期背景过渡 */

}

.bolg-date > p{

    font-weight: 600;

    margin-bottom: 0;

    font-size: 22px;

    transition: color 0.3s ease; /* 日期文字颜色过渡 */

}



.page-turning-box {

  margin-top: 40px !important;

  list-style: none;

  display: flex;

  justify-content: center;

  align-items: center;

  padding-left: 0;

}

.page-turning-box li {

  /*border: 1px solid #ddd;*/

  padding: 2px 10px;

  margin: 0 4px;

}

.page-turning-active {

  background-color: #ff4d47;

}

.page-turning-active > a {

  color: white !important;

}



@media (min-width: 768px) and (max-width: 1023px) {

  .main-crumbs-box {

    margin-bottom: 80px;

  }

}



@media (max-width: 580px) {

  .main-top-box {

    padding: 50px 0 50px 0;

  }

  .main-crumbs-box {

    flex-wrap: wrap;

    margin-bottom: 40px;

  }

  .main-crumbs-box p,

  .main-crumbs-box a {

    line-height: 40px;

  }

  .main-top-text-box > h2,.blog-box > h2{
    font-size: 30px;
  }

  .blog-list > h5{
    font-size: 25px;
  }

}