.pic_list_box {
	float: left;
	display: block;
	position: relative;
	width: 100%;
}	
#pictiles {
    list-style-type: none;
    position: relative; 
    margin-left:calc(((100% - 1200px) / 2) - 25px);
    margin-top: 40px;
    }
#pictiles li {
	float: left;
    width: 350px;	
	background:#FFFFFF;
	margin-left: 50px;
	margin-bottom: 35px;
	overflow: hidden;
    }       	
#pictiles li div {
    width:100%;	
	height:160px;
	display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow:hidden;
    }	
 #pictiles li img {
    display: block;
    width: auto;
    height: auto;
    max-width:100%;
    max-height:100%;    
    object-fit:contain;
    transition: all 0.6s;
    } 
#pictiles li p {
    color: #000000;
    font-size: 14px;
	text-align:center;
	height:32px;
	line-height:28px;
    margin: 10px 18px 10px 18px;
	overflow:hidden;
   }
@media (any-hover: hover) {
#pictiles li:hover p {
	color: #007563;
    }
#pictiles li:hover img {
	transform:scale(1.1);
    }    
}
#pictiles li span {
    color: #666666;
    font-size: 12px;
	display:block;
	width:calc(100% - 36px);
	margin:0px 18px 10px 18px;
	background:url(/style/images/more.png) no-repeat right;
   }
@media screen and (min-width: 800px) and (max-width: 1260px) {
#pictiles {
    display: flex;
	flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -moz-box-pack:center;
	-moz-box-align:center;
	box-pack:center;
	box-align:center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: end;
    align-items: end;
    width: calc(100% -20px);
    margin-left:0;
    margin-top: 40px;
    }
#pictiles li {	
	margin-left: 20px;
    width:calc((100% - 80px) / 3);
    height: auto;
    }    	
#pictiles li div {
    width:100%;	
	height:auto;
    }	
#pictiles li img {
    max-width:100%;	
	height:auto;
    }
}
@media screen and (min-width: 480px) and (max-width: 800px) {
#pictiles {
    display: flex;
	flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -moz-box-pack:center;
	-moz-box-align:center;
	box-pack:center;
	box-align:center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: end;
    align-items: end;
    width: calc(100% -20px);
    margin-left:0;
    margin-top: 40px;
    }
#pictiles li {	
	margin-left: 20px;
    width:calc((100% - 60px) / 2);
    height: auto;
    box-shadow: 0 0 10px rgb(171 198 235 / 30%);
    }    	
#pictiles li div {
    width:100%;	
	height:auto;
    }	
#pictiles li img {
    max-width:100%;	
	height:auto;
    }
}
@media screen and (max-width: 480px) {
#pictiles {
    display: flex;
	flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -moz-box-pack:center;
	-moz-box-align:center;
	box-pack:center;
	box-align:center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: end;
    align-items: end;
    width: 100%;
    margin-left:0;
    margin-top: 40px;
    }
#pictiles li {	
	margin-left: 20px;
    width:calc(100% - 40px);
    height: auto;
    box-shadow: 0 0 10px rgb(171 198 235 / 30%);
    }    	
#pictiles li div {
    width:100%;
    max-height: 260px;/*修改为height:auto则div等于图片高度*/	
    }	
#pictiles li img {
    max-width:100%;	
	height:100%;/* 修改为height:auto则图片等比例显示 */
    }
}