/*Add font ================================*/
.full {
  background-color: #fff;
  padding: 30px 0;
}
@media (min-width: 992px) {
  .full {
    padding: 120px 0;
  }
}
.full.detail {
  padding-bottom: 0;
}
.full.detail .group_title {
  margin: 0;
  display: none;
}

.paginate {
  padding-top: 20px;
}

@media (min-width: 992px) {
  .project_content {
    max-width: 981px;
    margin: auto;
  }
}

.box_title {
  padding: 0 0 30px;
}
@media (min-width: 992px) {
  .box_title {
    padding: 0 0 59px;
  }
}
.box_title h3.title {
  font-family: var(--font_box);
  font-size: 30px;
  color: #536536;
  line-height: 90%;
  padding: 0 0 10px;
}
@media (min-width: 768px) {
  .box_title h3.title {
    font-size: 67px;
    padding: 0 0 30px;
  }
}
@media (min-width: 992px) {
  .box_title h3.title {
    font-size: 67px;
    padding: 0 0 60px;
  }
}
.box_title .short {
  max-width: 500px;
  margin: auto;
  text-align: center;
  font: 300 16px/150% "Josefin Sans";
  color: #37231A;
}
.box_title .short p {
  line-height: 35px;
}

.category {
  padding-bottom: 30px;
  width: 100%;
  overflow-x: auto;
}
@media (min-width: 992px) {
  .category {
    padding-bottom: 32px;
  }
}
.category ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: -webkit-max-content;
  width: max-content;
}
@media (min-width: 768px) {
  .category ul {
    width: auto;
  }
}
@media (min-width: 992px) {
  .category ul {
    width: auto;
  }
}
@media (min-width: 992px) {
  .category ul li {
    width: auto;
  }
}
.category ul li a {
  width: 100%;
  padding: 10px 10px;
  font: 400 17px/150% "Josefin Sans";
  color: #37231A;
  position: relative;
  text-align: center;
}
.category ul li a span {
  display: inline-flex;
  min-height: 44px;
  align-items: end;
  justify-content: center;
}
.category ul li a span img {
  width: auto;
}
.category ul li a div.title {
  padding: 18px 0 0;
}
.category ul li a.current, .category ul li a:hover {
  color: #37231A;
}
.category ul li a.current span img, .category ul li a:hover span img {
  filter: invert(3%) sepia(342%) saturate(4575%) hue-rotate(1057deg) brightness(140%) contrast(136%);
}
.category ul li a.current:after, .category ul li a:hover:after {
  content: "";
  width: 60px;
  height: 2px;
  background-color: #A38D7C;
  border-radius: 2px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}