@charset "utf-8";
body{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	background-color: #f1f1f1;
	font-size:14px;
	margin:0px;
	padding:30px 30px 0px 30px;
	height:100%;	
}
a {
	text-decoration: none;
	color:#333;
}

#app{
	height:100%;
}
.Menu{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:20px 0px;
}
.layoutpid{
	float:left;		
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding-right:30px;
}
.layoutimg{
	float:left;		
	background-color:#fff;
	border-radius: 10px;
	
}
/*瀑布流布局*/
.my-card-wrapper{
	margin:10px;
}


.imglist{
	border-radius: 10px; 
	width:100%;
	background-color:#fff; 
	height:200px; 
	padding:20px;	
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.imglist img{
	max-height:160px; max-width:300px;border-radius: 10px; float:left
}
.imglist .d1{
	float:right; padding:70px 10px; font-size:16px;
}
.imglist .d2{
	float:right; padding-top:30px; font-size:16px; 
}
.imglist .d2 div{
	padding:8px 2px;
}

/* 针对屏幕宽度小于600px的设备 */
@media (max-width: 800px) {
	body{
		background-color: #f1f1f1;
		font-size:14px;
		margin:0px;
		padding:20px 10px 0px 10px;
	}
	.Menu{
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
		padding:10px;
	}
    .layoutpid{
		width:100%;
		padding:0px 10px;
	}
	.layoutimg{		
		width:100%;
	}
	
	/*瀑布流布局*/
	.my-card-wrapper{
		-moz-column-count:2;
		-webkit-column-count:2;
		column-count:2;
		-moz-column-gap:0;
		-webkit-column-gap:0;
		padding-top: 0.5em;	
	}
	.imglist{
		height:300px; 		
	}
	.imglist img{
		max-height:110px; max-width:110px;border-radius: 8px; float:left
	}
	.imglist .d1{
		padding:2px 10px;float:left;
	}
	.imglist .d2{
		padding-top:5px;
	}
}
/* 针对屏幕宽度在600px到900px之间的设备 */
@media (min-width: 800px) and (max-width: 1024px) {
  .layoutpid{
		width:50%;
	}
	.layoutimg{
		width:50%;
	}
	/*瀑布流布局*/
	.my-card-wrapper{
		-moz-column-count:1;
		-webkit-column-count:1;
		column-count:1;
		-moz-column-gap:0;
		-webkit-column-gap:0;
		padding-top: 0.5em;	
	}
}
/* 针对屏幕宽度在600px到900px之间的设备 */
@media (min-width: 1024px) and (max-width: 1600px) {
  .layoutpid{
		width:40%;
	}
	.layoutimg{
		width:60%;
	}
	/*瀑布流布局*/
	.my-card-wrapper{
		-moz-column-count:2;
		-webkit-column-count:2;
		column-count:2;
		-moz-column-gap:0;
		-webkit-column-gap:0;
		padding-top: 0.5em;	
	}
}
/* 针对屏幕宽度在600px到900px之间的设备 */
@media (min-width: 1600px) and (max-width: 1920px) {
  .layoutpid{
		width:30%;
	}
	.layoutimg{
		width:70%;
	}
	/*瀑布流布局*/
	.my-card-wrapper{
		-moz-column-count:4;
		-webkit-column-count:4;
		column-count:4;
		-moz-column-gap:0;
		-webkit-column-gap:0;
		padding-top: 0.5em;	
	}
}
 
/* 针对屏幕宽度大于900px的设备 */
@media (min-width: 1921px) {
  .layoutpid{
		width:25%;
	}
	.layoutimg{
		width:70%;
	}
	/*瀑布流布局*/
	.my-card-wrapper{
		-moz-column-count:5;
		-webkit-column-count:5;
		column-count:5;
		-moz-column-gap:0;
		-webkit-column-gap:0;
		padding-top: 0.5em;
		margin:10px;
	}
}



.img-card{
	background-color:#f1f1f1;
    border: 0px solid #cccccc;
    border-radius: 10px;
    -moz-page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    margin: 0 0.5em 0.5em;
  }
.img-card img{
	width:100%;
	border-radius: 10px;
	  
}

.pid-card{
	background-color:#FFF;
	border-radius: 10px;
	height:100px;
	margin-bottom:30px;
}
.pid-card .dleft{
	float:left;
	background-color:#366a2c;
	width:45%;
	height:100%;
	border-radius: 10px;
	
}
.pid-card .dleft .d1{
	padding-top:20px;
	width:100%;
	border-radius: 10px;
	color:#FFF;
	text-align:center;
	line-height:20px;
}
.pid-card .dright{
	float:left;
	width:55%;
	height:100%;
	border-radius: 10px;
}
.pid-card .dright .d1{
	width:100%;
	height:50%;
	color:#000;
	text-align:center;
	line-height:50px;
}
.textred{
	color:#F00;	
}
.textblue{
	color:#00f;	
}
.round{	
	border-radius: 50%;
	background-color:#FeFeFe;
	box-shadow: 0px 0px 12px 0px rgba(91, 91, 91, 0.25);	
	text-align:center;
	width:20px; 
	height:20px;
	padding-top:3px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}