.card {
	max-height: 430px;
}

.article-box .card{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-content: center;
}

.user-box.second-box.article-box.product-box .article-main .article-other .article-tag-area .article-tag.temper-tag a{
	background-color: cadetblue;
	color: #fff;
}

.user-box.second-box.article-box.product-box .article-main .article-other .article-tag-area .article-tag.temper-tag a:hover{
	background-color: #888;
}

.article-main .article-other .article-tag-area .article-tag.important-tag a{
  background-color: var(--border-dunk);
  color: #fff;
  transition: opacity 200ms ease-in;
}

.article-main .article-other .article-tag-area .article-tag.blue-tag a{
  background-color: var(--border-opa); 
  color: #000;
  text-shadow: 0 0 1px #333;
  font-family: "Roboto Mono", "Courier New", Courier, monospace;
  letter-spacing: -1.25px;
  transition: opacity 200ms ease-in;
}

.article-box .card .article-stat{
	width: 70px;
	min-height: 175px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.article-stat-bar{
	width: 100%;
	height: 20%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	color: #000;
}

.article-stat-icon{
	font-size: 20px;
}

/* thumb up */
.article-stat-bar:nth-child(1):hover{
	color: pink;
	cursor: pointer;
}

/* against */
.article-stat-bar:nth-child(2):hover{
	color: cyan;
	cursor: pointer;
}

/* star */
.article-stat-bar:nth-child(3):hover{
	color: yellow;
	cursor: pointer;
}

.article-box .card .article-main{
	width: calc(100% - 100px);
}

.article-box .card .article-main .article-title{
	position: relative;
	padding: 10px;
	/* width: calc(100% - 20px); */
	width: calc(100% - 120px);
	max-width: calc(100% - 120px);
	font-size: 30px;
	max-height: 140px;
	/* overflow: auto; */
}

.article-box .card .article-main .article-other{
	padding: 10px;
	width: calc(100% - 20px);
}

.long-box .card{
	display: block;
}

.long-box .card .long{
	padding: 10px;
	width: calc(100% - 20px);
}

.user-card-time{
	margin-left: 6px;
	margin-right: 6px;
	white-space: nowrap;
}

.article-tag-area{
	white-space: nowrap;
	margin-right: 6px;
}

@media screen and (max-width: 850px) {
	.article-box .card .article-stat {
		width: 50px;
	}

	.article-box .card .article-main {
		width: calc(100% - 60px);
	}

	.article-box .card .article-main .article-title{
		font-size: 20px;
	}

	.article-box .card .article-main .article-other{
		justify-content: unset !important;
	}
}

.long-card{
	max-height: unset !important;
	height: unset !important;
}