@media (min-width: 768px) {
	.imgdiv{
		display: flex; // 这里用到flex布局
	  	flex-wrap: wrap; // flex中换行的属性
	  	padding: 15px 5px;
	  	-webkit-flex-wrap:wrap;
	  	justify-content: center;
	  	align-items: center;
	}

	.imgdiv .img-wrapper {
		position: relative;
		overflow: hidden;
		height: 200px;
		margin: 2px;
	}

	.imgdiv .img-wrapper .img{
		height: 200px;
	}
}

@media (max-width: 767px) {
	.imgdiv{
		-moz-column-count:2; /* Firefox */
        -webkit-column-count:2; /* Safari 和 Chrome */
        column-count:2;
        -moz-column-gap: 1em;
      	-webkit-column-gap: 1em;
      	column-gap: 1em;
      	margin:none;
	}

	.imgdiv .img-wrapper {
		padding: 10px 5px;
      	-moz-page-break-inside: avoid;
      	-webkit-column-break-inside: avoid;
      	break-inside: avoid;
      	position: relative;
	}

	.imgdiv .img-wrapper .img{
		width: 100%;
	}
}

.imgdiv .img-wrapper .img-title{
	position: absolute;
	bottom:0;
	left:0;
	padding:5px;
	background-color: rgba(0, 0, 0, 0.6);
	color:#fff;
	width:100%;
}

.imgdiv .img-wrapper .img-icon{
	position: absolute;
	top:0;
	right:0;
	border-top:50px solid #002052;
	border-left:50px solid transparent;
}

.imgdiv .img-wrapper i{
	position: absolute;
	top:6px;
	right:8px;
	font-size: 16px;
}