@charset "utf-8";
/* ============= */
.masonry-wrapper {
		margin: 0 auto;
}
@media(min-width: 768px) {
		.masonry {
				margin: 0 auto;
				display: flex;
				flex-wrap: wrap;
		}
}
.masonry-item, figure.masonry-item {
		width: calc(25% - 14px);
		height: calc(calc(100vw - 270px) * 0.17);
		margin: 0 7px 14px;
		position: relative;
		overflow: hidden;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		cursor: pointer;
		/* transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), filer 0.9s;
		filter: grayscale(100%) contrast(1.3); */
		transition: opacity 0.3s;
}
.colorOn {
		animation: colorOn 0.3s linear forwards;
}
@keyframes colorOn {
		0% {
				filter: grayscale(100%) contrast(1.3);
		}
		100% {
				filter: grayscale(0%) contrast(1);
		}
}
@media (hover: hover) {
		.masonry-item:hover, figure.masonry-item:hover {
				/* animation: colorOn 0.4s linear forwards; */
				opacity: 0.7;
		}
}
/*
.masonry-item:active, figure.masonry-item:active {
		filter: grayscale(0%);
}
*/
@media(max-width: 1680px) {
		.masonry-item, figure.masonry-item {
				width: calc(33.3% - 14px);
				height: calc(calc(100vw - 270px) * 0.22);
		}
}
@media(max-width: 1360px) {
		.masonry {
				margin: 0 auto;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
		}
		.masonry-item, figure.masonry-item {
				width: calc(50% - 7px);
				margin: 0 0 14px;
				height: calc(calc(100vw - 270px) * 0.35);
		}
}
@media(max-width: 1024px) {
		.masonry-item, figure.masonry-item {
				height: 30vw;
		}
}
.masonry-item figcaption {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 15px;
		display: flex;
		align-items: flex-end;
		pointer-events: none;
		background: rgba(0, 0, 0, 0.3);
		color: #fff;
		transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
		opacity: 0 !important;
		cursor: pointer;
}
@media(min-width: 768px) {
		/*.masonry-item img {
				opacity: 0;
		} */
}
@media(max-width: 767px) {
		.masonry {
				display: block;
				column-count: 1;
				column-gap: 5px;
		}
		.masonry-item, figure.masonry-item {
				width: auto;
				margin: 0 0 5px;
				display: inline-block;
				vertical-align: top;
				position: relative;
				cursor: pointer;
				background: none !important;
				height: auto !important
		}
		.masonry-item figcaption {
				display: none;
		}
}
@media (hover: hover) {
		.masonry-item:hover figcaption {
				opacity: 1;
		}
}
figcaption p {
		line-height: 1.8;
		margin: 0 !important
}
.masonry-item img {
		width: 100%;
		height: auto;
		box-sizing: border-box;
}
.masonry-content {
		max-width: 100%;
}
/* ==================== */
.tag_title {
		font-size: 18px;
		font-weight: 400;
		margin: 0 0 25px;
}
@media(max-width: 767px) {
		.tag_title {
				text-align: center;
		}
}
.tag_sort_flex {
		display: flex;
		flex-wrap: wrap;
		margin: 0 0 40px;
}
.tag_sort_item {
		margin: 0 10px 5px 0;
}
.tag_sort_item a {
		color: #A8A8A8;
		text-decoration: none;
}