/* 前端样式 */
body {
    background: #f8f8f9;
}
.hero-section {
    background: var(--banner-blue-4);

}
.hero-section::before {

background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,20 L90,20' stroke='%23ffffff' stroke-width='0.8' stroke-opacity='0.06'/%3E%3Cpath d='M10,40 L90,40' stroke='%23ffffff' stroke-width='0.8' stroke-opacity='0.06'/%3E%3Cpath d='M10,60 L90,60' stroke='%23ffffff' stroke-width='0.8' stroke-opacity='0.06'/%3E%3Cpath d='M10,80 L90,80' stroke='%23ffffff' stroke-width='0.8' stroke-opacity='0.06'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='20' cy='40' r='3' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='20' cy='60' r='3' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='20' cy='80' r='3' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='80' cy='20' r='3' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='80' cy='40' r='3' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='80' cy='60' r='3' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='80' cy='80' r='3' fill='%23ffffff' fill-opacity='0.08'/%3E%3C/svg%3E");
}

.newsList-box{
height: 350px;
position: relative;
      overflow: hidden;
      transition: box-shadow 0.2s;
}
.newsList-box::before{
     content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 3px;
    background-color: #c7000b;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

 
    .newsList-box:hover::before {
      width: 100%;
    }
    .newsList-box:hover {
      box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
    }

.newsList-img{max-width: 100%; height: 295px; overflow: hidden;;}
.newsList-img img{width: 100%;
  height: 100%;
  object-fit: cover;    /* 覆盖填充，可能裁剪 */}
.no-img .newsList-cont {
    margin-left: 0;
}
.newsList-page .pagination{justify-content: center;}
.newsList-page .pagination li{width:30px;height:30px; line-height: 30px; border: 1px solid #DDD; margin-right: 5px; background-color: #FFF;}
 



/* 手机设备 (576px - 768px) */
@media (max-width: 768px) {
.hero-section{display: none;}
.newsList-box {
height: auto;
}
.newsList-img {
height: 200px; /* 或者您想要的任何高度 */
}
.newsList-img img {
height: 100%; /* 让图片填充容器 */
}
.newsList-post{text-align: center;}
.newsList-tit{font-size: 16px;}
 
 
    

}
/*新闻详情页样式表*/
.newsdetail-decription{font-size:14px;
    border-radius: 8px;
    background-color: var(--color-gray-100);
    color: #666;    

}
.product-image-container {
    height: 220px;
    overflow: hidden;
    position: relative;
    background-color: #f8f9fa;
}
.product-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.product-image-container:hover img {
    transform: scale(1.05);
}

/*产品部分*/
.product-card{
  position: relative; z-index: 5; margin-bottom: 25px; height: 400px;
 
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.03);
            background: white;
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.08);
        }
        .product-card .tag-red{display: inline-block; margin:0.16rem; }
.product-card .product-image{
  display: flex;
            align-items: center;
            justify-content: center;
            position:absolute;
            right: 0;
            top:0;
   width: 40%;
  height: 100%; }
.product-card img{ max-height:70%;}
.product-info{
            display: flex;
            width: 60%;
            flex-direction: column;
           }
.product-info h3{height: 40px; margin-top: 40px;}
.product-info  .product-features{height:150px;}
 
 
.img-hover-card {
            background-color: #fff;
            transition: box-shadow 0.25s ease, transform 0.2s ease;
        }  
        
        .zoom-on-hover {
            transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1);
            will-change: transform;     
            transform: scale(1);
        }

     
        .img-hover-card:hover .zoom-on-hover {
            transform: scale(1.08);     /* 放大比例 1.08 倍，视觉舒适且不突兀 */
        }
 
        .img-hover-card img {
    
            vertical-align: middle;
        }
        .gotoproduct{
            position: absolute;width: 100%;height: 40px; line-height: 40px; left: 0; bottom: 0; text-align: center;background: var(--blue);color: #fff;
        }
        .gotoproduct:hover{color: #eef2ff;}