/* CSS Document */
.wrap .contentBox .topBox {
  padding: 40px 0 60px;
}
@media (max-width: 1180px) {
  .wrap .contentBox .topBox {
    padding: 20px 0 40px;
  }
}
@media (max-width: 480px) {
  .wrap .contentBox .topBox {
    padding: 0 0 30px;
  }
}

.articleTitle {
  text-align: center;
}

.newsBox {
  padding: 0 3.7vw 0;
}

.newsList {
  display: flex;
  flex-wrap: wrap;
  padding-top: 65px;
  --gap: 2.865vw;
  gap: var(--gap);
}
@media (max-width: 1180px) {
  .newsList {
    padding-top: 20px;
    --gap: 30px;
  }
}
@media (max-width: 640px) {
  .newsList {
    padding-top: 40px;
  }
}
@media (max-width: 480px) {
  .newsList {
    padding-top: 0;
  }
}
.newsList .newsItem {
  width: calc((100% - var(--gap) * 2) / 3);
}
@media (max-width: 1280px) {
  .newsList .newsItem {
    width: calc((100% - var(--gap) * 2) / 3);
  }
}
@media (max-width: 1024px) {
  .newsList .newsItem {
    width: calc((100% - var(--gap)) / 2);
  }
}
@media (max-width: 640px) {
  .newsList .newsItem {
    width: 100%;
  }
}
.newsList .Img {
  width: 100%;
  position: relative;
  overflow: hidden;
  position: relative;
}
.newsList .Img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(185, 193, 211, 0.64) 14%, rgba(118, 135, 169, 0.77) 30%, rgba(66, 89, 137, 0.87) 46%, rgba(29, 56, 114, 0.94) 63%, rgba(7, 37, 100, 0.99) 81%, rgb(0, 31, 96) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.4s ease-in-out;
}
.newsList .Img {
  border-radius: 16px;
}
.newsList .Img img {
  width: 100%;
  height: auto;
  display: block;
  transition: all 0.4s ease-in-out;
  filter: grayscale(100%);
}
@media (min-width: 1181px) {
  .newsList .Img:hover::after {
    opacity: 0;
  }
  .newsList .Img:hover img {
    transform: scale(1.02);
    filter: grayscale(0%);
  }
}
.newsList .Txt {
  padding: clamp(35px, 2.8vw, 50px) 0 30px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .newsList .Txt {
    padding: 25px 0;
  }
}
.newsList .Txt .title a {
  color: #474747;
  font-size: clamp(22px, 1.6vw, 26.5px);
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 1.325px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 768px) {
  .newsList .Txt .title a {
    font-size: 20px;
    line-height: 30px;
  }
}
@media (min-width: 1181px) {
  .newsList .Txt .title a:hover {
    color: #001f60;
  }
}
.newsList .Txt .text {
  padding-top: 15px;
  color: #474747;
  font-size: clamp(18px, 1.4vw, 21.5px);
  line-height: 37px;
  letter-spacing: 1.075px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 1280px) {
  .newsList .Txt .text {
    line-height: 30px;
  }
}
@media (max-width: 768px) {
  .newsList .Txt .text {
    padding-top: 10px;
  }
}