/* 产品卡片样式 */
        .product-card {

        }



.boxshouye {
    margin-top: 500px; /* 用于测试滚动加载 */
            max-width: 1200px;
            margin: 0 auto;
            padding: 5px;
            display: flex;
            flex-wrap: wrap; /* 自动换行 */
            justify-content: space-between;
        }
.red-text01 {
    color: red;
}
        .boxzhang {
            width: calc(25% - 8px); /* 每个项目的宽度为25%减去间隔10px */
            margin-bottom: 8px; /* 添加底部间隔 */
            border: 0.5px solid rgba(204, 204, 204, 0.9); /* 设置边框颜色为90%透明灰色 */
            transition: transform 0.1s; /* 添加 hover 效果 */
            height: auto; /* 高度自适应 */
            overflow: hidden; /* 隐藏溢出部分 */
            font-size: 0.8vw; /* 默认字体大小，根据大屏幕调整 */ 
            padding-bottom: 10px; /* 在底部添加10px内边距 */
            background: rgba(255, 255, 255, 0.5); /* 透明白色背景，0.5表示50%不透明度 */
            border-radius: 4px;
        }

        .boxzhang:hover {
            transform: translateY(-6px);
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
    -webkit-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
    -moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    filter: brightness(0.9); /* 鼠标经过时使图像变暗 */

        }
        

        
/* 图片容器样式 */
.boxzhang-toubu1 {
    display: grid;
    place-items: center; /* 居中显示 */
    height: auto; /* 高度自适应 */
}

/* 图片样式 */
.boxzhang-toubu1 img {
    max-width: 100%; /* 图片宽度最大为容器宽度 */
    height: auto; /* 高度自适应 */
    display: block; /* 让图片居中显示 */
    margin: 0 auto; /* 水平居中 */
}

/* 文本容器样式 */
.boxzhang-biaoti2 {
    max-height: 15em; /* 限制文本高度为3行 */
    overflow: hidden; /* 隐藏溢出文本 */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 限制最大行数为3行 */
    -webkit-box-orient: vertical;
    white-space: normal; /* 允许文本换行 */
    line-height: 1.3; /* 控制文本的行高，根据需要调整 */
     margin: 10px; /* 添加10px外边距 */
    text-overflow: ellipsis; /* 显示省略号 */
    text-align: justify; /* 设置文本两侧对齐 */
}

/* 文本容器样式 */
.boxzhang-shuxing3,
.boxzhang-shuxing4 {
    text-align: center; /* 文本居中对齐 */
    display: flex; /* 使用 Flex 布局 */
    justify-content: space-around; /* 元素平均分布，居中对齐 */
    align-items: center; /* 垂直居中 */
    white-space: nowrap; /* 不允许文本和 div 换行 */
}

/* 单个元素样式 */
.boxzhang-shuxing3 div {
    flex: 1; /* 让元素平均占据可用空间 */
    text-align: center; /* 元素内文本居中对齐 */
    margin: 2px 0; /* 添加上下外边距，左右外边距为0 */
}



.boxzhang-dibu5 {
            display: flex; /* 使用弹性盒子布局 */
            align-items: center; /* 垂直居中 */
            margin: 0px 5px; /* 添加上下外边距，左右外边距为0 */

        }

        .boxzhang-dibu5 a,
        .boxzhang-dibu5 button {
            flex: 1; /* 均分可用空间 */
            margin: 5px; /* 调整按钮之间的间距 */
            background-color: #007bff; /* 背景颜色 */
            color: #fff; /* 文本颜色 */
            border: none; /* 去除边框 */
            cursor: pointer;
            text-decoration: none;
            border-radius: 8px; /* 圆角 */
            text-align: center; /* 文本居中 */
            
             
        }

        .boxzhang-dibu5 a:hover,
        .boxzhang-dibu5 button:hover {
            background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
            box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.2);
        }




        /* 响应式布局 */
        @media screen and (max-width: 1024px) {
            .boxzhang {
                width: calc(33.33% - 8px); /* 每个项目的宽度为33.33%减去间隔10px */
            }

        }

        @media screen and (max-width: 768px) {
            .boxzhang {
                width: calc(50% - 8px); /* 每个项目的宽度为50%减去间隔10px */
            }
    .boxzhang-biaoti2,
    .boxzhang-shuxing3,
    .boxzhang-shuxing4 {
        font-size: 2vw; /* 使用vw单位自适应字体大小，根据需要调整大小 */
    }
    .boxzhang-dibu5 a,
        .boxzhang-dibu5 button {
        font-size: 2vw; /* 使用vw单位自适应字体大小，根据需要调整大小 */
    }
        }

        @media screen and (max-width: 480px) {
            .boxzhang {
                width: 100%; /* 每个项目的宽度为100% */
            }
    .boxzhang-biaoti2,
    .boxzhang-shuxing3,
    .boxzhang-shuxing4 {
        font-size: 4vw; /* 使用vw单位自适应字体大小，根据需要调整大小 */
    }
    .boxzhang-dibu5 a,
    .boxzhang-dibu5 button {
        font-size: 4vw; /* 使用vw单位自适应字体大小，根据需要调整大小 */
    }
        }
        
        
        
        
        
        
        
        
        
        /* 你的样式 */
.boxshouyeb {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px;
    column-count: 4; /* 列数为4 */
    column-gap: 8px; /* 列之间的间隔为10px */
    align-items: flex-start; /* 顶端对齐 */
}

.boxzhangb {
    width: 100%; /* 每个项目的宽度为100% */
    margin-bottom: 8px; /* 底部间隔 */
    border: 0.5px solid rgba(204, 204, 204, 0.9); /* 设置边框颜色为90%透明灰色 */
    transition: transform 0.1s; /* 添加 hover 效果 */
    height: auto; /* 高度自适应 */
    overflow: hidden; /* 隐藏溢出部分 */
    font-size: 0.8vw; /* 默认字体大小，根据大屏幕调整 */ 
    padding-bottom: 10px; /* 在底部添加10px内边距 */
    background: rgba(255, 255, 255, 0.5); /* 透明白色背景，0.5表示50%不透明度 */
    border-radius: 4px;
}
        
        
        .boxzhangb:hover {
            transform: translateY(-6px);
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
    -webkit-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
    -moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    filter: brightness(0.9); /* 鼠标经过时使图像变暗 */

        }        
         
                /* 响应式布局 */
        @media screen and (max-width: 1024px) {
            .boxshouyeb {
                column-count: 3; /* 列数为3 */
            }

        }
        
        @media screen and (max-width: 768px) {
            .boxshouyeb {
                column-count: 2; /* 列数为1 */
            }
        }
        
        
        @media screen and (max-width: 480px) {
        
        .boxshouyeb {
                column-count: 1; /* 列数为1 */
            }
        }