@charset "utf-8";
/***************************************
    copyright by MakeWeb.com.tw 
***************************************/

.list_gray_light {
	overflow: hidden;
	margin: 0px auto;
	padding: 0px 0px;
}
.list_gray_light ul {
	/*display: table;*/
	/*float: right;*/
	/*width: 1100px;*/
	margin: 0;
	padding: 0;
	list-style: none;
}
.list_gray_light li {
	float: left;
	width: 47%;
	margin: 1.5%;
	box-shadow: 0px 0px 5px 2px #DDD;
}
.list_gray_light li .post_image{
	overflow: hidden;
	float: left;
	width: 50%;
}
.list_gray_light li .post_image:hover {
	/*-webkit-filter: brightness(90%);*/
	/*filter: brightness(90%);*/
	/*filter: hue-rotate(330deg);*/
}
.list_gray_light li .post_image img{
	width: 100%;
}
.list_gray_light li .post_text{
	float: left;
	width: 50%;
	padding: 10px;
}
.list_gray_light li .post_text .post_title{
	font-size: 1.8rem;
	font-weight: 400;
	margin: 0 0 6px 0;
	padding: 0 0 6px 0;
	border-bottom: 2px solid #F00;
}
.list_gray_light li .post_text .post_intro{
	overflow:hidden;
	display: -webkit-box;
	white-space: nowrap;
	text-overflow: ellipsis;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	white-space: normal;
	font-size: 1.6rem;
}


/*.mask {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
     background-color: rgba(221, 96, 93, 0.7); 
    transition: all 0.4s ease-in-out;
    opacity: 0;
}

.list_gray_light li .mask {
	width: 100%;
	height: 100%;
}
.list_gray_light li .mask h4{
	margin: 28% 0 0 0;
}
.list_gray_light li .mask a.info{
	margin: 28% 0 0 0;
}
.list_gray_light li.current .mask{ 
	opacity: 1;
}
.list_gray_light li.current .mask h4,
.list_gray_light li.current .mask p,
.list_gray_light li.current .mask a.info {
	opacity: 1;
	transform: translateY(0px);
}
.list_gray_light li.current .mask p {
	transition-delay: 0.1s;
}
.list_gray_light li.current .mask a.info {
	transition-delay: 0.2s;
}*/