@CHARSET "UTF-8";

.wrapper {
	max-width: 1170px;
}

.thumb-list {
	padding-top: 120px;
}

.thumb-list li {
	float: left;
	width: calc(33.333333333% - 20px);
	border-bottom: 1px solid #C8C8C8;
	margin-left: 30px;
	margin-bottom: 30px;
	object-fit: fill;
	text-align: left;
}

.thumb-list li:hover {
	cursor: pointer;
}

.thumb-list li:nth-child(3n + 4),
.thumb-list li:first-child {
	margin-left: 0;
}

.thumb-list li img {
	width: 100%;
	height: 300px;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray;
}

.thumb-list li:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
	filter: none;
}

.thumb-list li div {
	padding: 20px;
}

.thumb-list li div h3 {
	font-size: 16px;
	white-space: nowrap;
}

.thumb-list li div p {
	margin-top: 25px;
	font-size: 13px;
	color: #666;
}

.thumb-list li div a {
	text-decoration: underline !important;
	margin-left: 10px;
}

.thumb-list li div p a:first-child {
	margin-left: 0;
}

.thumb-list li:hover div {
	background: #7040C8;
}

.thumb-list li:hover div h3,
.thumb-list li:hover div p {
	color: #FFF;
}

.thumb-list li:hover img,
.thumb-list li:hover div {
	transition: all ease-out 0.5s;
}

@media screen and (max-width: 1070px) { 
	.thumb-list ul {
		display: inline-block;
		max-width: 640px;
		margin-bottom: 30px;
	}
	
	.thumb-list li {
		width: calc(50% - 15px);
		max-width: 305px;
		transition: all ease-out 0.5s;	
	}
	
	.thumb-list li:nth-child(even) {
		margin-left: 30px;
	}
	
	.thumb-list li:nth-child(odd) {
		margin-left: 0;
	}
	
}

@media screen and (max-width: 850px) {
	.content .wrapper {
		width: 100%;
		padding: 0 !important;
	}
	
	.thumb-list li,
	.thumb-list ul,
	.thumb-list {
		width: 100%;
		max-width: 100%;
	}
	
	.thumb-list li {
		margin-bottom: 0;
	}
	
	.thumb-list li:nth-child(even),
	.thumb-list li:nth-child(odd) {
		margin-left: 0;
	}
}