.Lopwon_Json *,
.Lopwon_Json *::before,
.Lopwon_Json *::after {
	box-sizing: inherit;
}

.Lopwon_Json {
	margin: 0 auto;
	padding: 2em 0;
	width: 100%;
	max-width: 640px;
	font-size: 100%;
	font-weight: normal;
	line-height: 1.2;
	text-align: justify;
	word-wrap: break-word;
	box-sizing: border-box;
}

.Lopwon_Json h3 {
	font-size: 1.4em;
	color: #323232;
	line-height: 1.4;
	font-weight: normal;
}

.Lopwon_Json-powered {
	padding-left: 15px;
	border-left: 3px solid #ff8800;
}

.Lopwon_Json-wrap a {
	display: block;
	margin: 0.5em auto;
	padding: 1em;
	width: 100%;
	height: 150px;
	color: #323232;
	text-decoration: none;
	border-bottom: none;
	border-radius: 0.5em;
	border: 1px solid #f2f2f2;
	background-color: #f8f8f8;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-ms-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
}

.Lopwon_Json-wrap a:hover {
	color: #53b8bb;
	outline-width: 0;
	background-color: #f6f6f6;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	-webkit-transform: translate(0, -3px);
	-moz-transform: translate(0, -3px);
	-ms-transform: translate(0, -3px);
	-o-transform: translate(0, -3px);
	transform: translate(0, -3px);
	box-shadow: 0px 10px 15px -10px rgba(0 0 0 / 25%);
}

.Lopwon_Json-item {
	display: flex;
	width: 100%;
	height: 100%;
	font-size: 62.5%;
}

.Lopwon_Json-img {
	margin: -1em;
	width: 100%;
	height: auto;
	max-width: calc(150px - 1em);
	flex-shrink: 0;
	border-radius: 0.5em;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.Lopwon_Json-info {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	margin-left: 2em;
	width: 100%;
}

.Lopwon_Json-title {
	font-size: 2.2em;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

.Lopwon_Json-desc {
	font-size: 1.4em;
	color: #969696;
	line-height: 1.4;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.Lopwon_Json-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 1.2em;
	color: #acacac;
}

.Lopwon_Json-meta-left {
	display: flex;
	justify-content: flex-start;
	flex-shrink: 0;
	width: calc(100% - 120px);
}

.Lopwon_Json-blog,
.Lopwon_Json-author {
	margin-right: 1em;
	width: auto;
	min-width: 25%;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
}

.Lopwon_Json-meta-right {
	display: flex;
	justify-content: flex-end;
	flex-shrink: 0;
	width: 100%;
	max-width: 120px;
}

.Lopwon_Json-comment {
	margin-left: 1em;
}

@media screen and (max-width: 600px) {

	.Lopwon_Json-wrap a {
		height: 120px;
	}

	.Lopwon_Json-img {
		max-width: calc(120px - 1em);
	}

	.Lopwon_Json-desc {
		-webkit-line-clamp: 2;
		line-clamp: 2;

	}

}

@media screen and (max-width: 480px) {

	.Lopwon_Json-wrap a {
		padding: 0.5em;
		height: 80px;
	}

	.Lopwon_Json-img {
		margin: -0.5em;
		max-width: calc(80px - 1em);
	}

	.Lopwon_Json-info {
		justify-content: space-between;
	}
	
	.Lopwon_Json-desc {
		display: none;
	}

	.Lopwon_Json-meta {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: -0.5em;
	}

	.Lopwon_Json-meta-left {
		width: 100%;
	}

	.Lopwon_Json-meta-right {
		justify-content: flex-start;
		margin-top: 0.25em;
		max-width: 100%;
	}

	.Lopwon_Json-time,
	.Lopwon_Json-comment {
		min-width: 25%;
	}

}