@charset "utf-8";
/* CSS Document */

.pro_list{
    overflow: hidden;
    width: 100%;
    padding: 0 5px;
    box-sizing: border-box;
}
    .pro_list li{ 
     
       width: calc(16% - 12px); /* 保持一行5个项目 */
    margin: 0 6px 30px;
    display: inline-block; /* 替代 float: left */
    vertical-align: top; /* 关键：顶部对齐 */
    box-sizing: border-box;
    transition: all linear 0.25s;
    }
    .pro_list li .picture{ 
        width: 70%; /* 图片容器宽度 */
        overflow: hidden;
    }
    .pro_list li .picture img{ 
        
        height: auto; /* 自动适应高度 */
        object-fit: cover;
        transition: all linear 0.25s;
		 width: 70%; /* 保持图片宽度为图片容器的70%，确保图片尺寸合适 */
    }
    .pro_list li .content{ 
        width: 70%; /* 文字容器与图片容器宽度一致 */
        padding: 12px 0;
        box-sizing: border-box;
        overflow: hidden;
        transition: all linear 0.25s;
    }
    .pro_list li .content .title{ 
        font-size: 15px; 
        font-weight: bold; 
        line-height: 20px; 
        /*white-space: nowrap;*/ 
        text-overflow: ellipsis; 
        overflow: hidden; 
        width: 100%; 
        text-align: left; 
        transition: all linear 0.25s;
		
    }
    .pro_list li .content .text{ 
        width: 100%; 
        overflow: hidden; 
        font-size: 15px; 
        color: #333;
        padding-left: 15px; 
        box-sizing: border-box; 
        position: relative; 
        line-height: 24px; 
        margin-top: 15px; 
        transition: all linear 0.25s; 
        height: 48px; 
        max-height: 48px; 
        overflow: hidden;
    }
    .pro_list li .content .text::before{ 
        content: "·"; 
        max-width: 14px; 
        width: 100%; 
        font-size: 18px; 
        font-weight: bold; 
        color: #333; 
        position: absolute; 
        left: 0px; 
        top: -2px;
    }
    .pro_list li .content .more{ 
        margin-top: 1px; 
        overflow: hidden; 
        width: 100%; 
        min-height: 48px; 
        display: flex; 
        align-items: center; 
        justify-content: center;
    }
    .pro_list li .content .more a{ 
        max-width: 100%; 
        width: 100%; 
        text-align: left; 
        font-size: 12px; 
        line-height: 22px; 
        color: #333; 
        transition: all linear 0.25s; 
        white-space: normal;
    }
    .pro_list li .content .more .contact{ 
        float: right;
    }
	
	/* 响应式调整 */
    @media (max-width: 1200px){
        .pro_list li{ 
            width: calc(25% - 12px); /* 一行4个项目 */
        }
    }

    @media (max-width: 768px){
        .pro_list li{ 
            width: calc(50% - 12px); /* 一行2个项目 */
        }
        /* 手机端适当加宽图片和文字区域 */
        .pro_list li .picture,
        .pro_list li .content {
            width: 90%;
        }
    }
		
    @media (max-width: 425px){
        .pro_list li{ 
            width: 40%; /* 一行1个项目 */
            margin: 0 10px 20px;
        }
        /* 小屏手机全屏显示 */
        .pro_list li .picture,
        .pro_list li .content {
            width: 100%;
        }
        .pro_list li .content {
            padding: 20px 4%;
        }
    }

    @media (max-width: 375px){
        .pro_list{ 
            margin-top: 0px;
        }
    }