.section-title {
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}
.news-container {
  display: flex;
  justify-content: space-between;
}

.news-card {
  width: 32%;
  /* Your styles for each card */
}

.research_container {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-around; */
  width: 85%;
  margin: 0 auto;
}

/*.research_card {
  flex: 0 0 calc(33.333% - 30px);
  margin: 15px;
  padding: 20px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  height: 400px;
  position: relative;
  overflow: hidden;
} */

.research_card {
  flex: 0 0 calc(33.333% - 30px);
  margin: 15px;
  text-align: center;
  padding: 20px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  height: 250px auto; /* 높이를 auto로 변경 */
  position: relative;
  display: flex; /* flexbox 사용 */
  flex-direction: column; /* 세로 방향으로 배열 */
  justify-content: center; /* 센터링 */

  background-color: #f9f9f9; /* 부드러운 배경색 */
  color: #333; /* 명확한 전경색 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 그림자 효과 */
  border-radius: 8px; /* 둥근 모서리 */
  overflow: hidden; /* 내용이 넘치면 잘라내기 */
  transition: all 0.3s ease; /* 부드러운 전환 효과 */
}

.card_title {
  z-index: 2;
  font-size: 1.2em;
  font-weight:bold;
  text-align: center;
  position: relative;
}

.card_description {
  text-align: justify;
}

@media (max-width: 1200px) {
  .research_card {
    flex: 0 0 calc(50% - 30px); /* 화면 크기가 1200px 이하일 때 2개의 카드 */
  }
}

@media (max-width: 768px) {
  .research_card {
    flex: 0 0 100%;
  }
}

.content_container {
  position: relative;
  z-index: 0;
  height: 100%;
}

.card_image,
.card_description {
  align-self: center;
  opacity: 1;
  transition: opacity 0.3s ease;
  line-height: 1.5;
}

.research_card img {
  max-width: 90%;
  margin-top:25px;
  margin-bottom: 25px;
}

.research_sub_areas {
  display: none;
  position: absolute;
  top: calc(1.2em + 50px);
  left: 0;
  right: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f9f9f9;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: brown;
  z-index: 1;  /* .card_title보다 낮게 설정 */
}

.research_sub_areas a {
  color:brown;
  font-weight: 500;
  font-size: 1em;
  margin: 5px;
  display: block;
  text-align: center;
}

.research_card:hover .card_image,
.research_card:hover .card_description {
  opacity: 0;
}

.research_card:hover .research_sub_areas {
  display: flex;
  opacity: 1;
}