:root {
  --orange: #c4541b;
}

.submenu a:hover,
.clicked {
  color: var(--orange);
}

.hr::after {
  background-color: var(--orange);
}

.list .container {
  max-width: 1080px;
}

/*  */
.tags {
  line-height: 24px;
}

.tag {
  display: inline-block;
}

.more-btn {
  cursor: pointer;
  color: #2858aa;
 flex-shrink: 0;
}
/*  */

.keyword-list-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.keyword-list {
   flex: 1;
  display: flex;
  max-height: 2rem;
  overflow: hidden;
  padding-right: 3rem;
  transition: max-height .8s ease;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  position: relative;
}
.keyword-list.expanded {
  max-height: auto;
}

.keyword {
  display: inline-block;
  padding: 2px 12px;
  /* margin-right: 16px; */
  margin-bottom: 8px;
  background-color: #eeeeee;
}
.keyword.act {
  background-color: var(--orange);
  color: #fff;
}
.article {
  padding-left: 10px;
  padding-right: 10px;
}
.article-box {
  max-width: 340px;
  box-shadow: 0 0 0 1px #ededed;
  border-radius: 6px;
  overflow: hidden;
}
.article-box:hover {
  box-shadow: 0 0 1px 1px #ddd, 4px 4px 5px #d2d2d2, 5px 5px 5px #e2e2e2,
    6px 6px 5px #e9e9e9, 7px 7px 5px #efefef, 8px 8px 5px #fafafa;
  transition: all 0.4s;
}
.img-box {
  width: 340px;
  height: 200px;
}
.img-box img {
  object-fit: cover;
  object-position: 50% 0;
  width: 100%;
  height: 100%;
}
.article-title {
  line-height: 1.4;
  font-size: 1.25rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.article-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: #686868;
}