@charset "utf-8";

.main__news__wrap {
  border-top: 2px solid #0f1b3d;
  border-bottom: 2px solid #0f1b3d;
}

.main__news__list li {
  border-bottom: 1px solid #ccc;
  padding: 32px 0;
}

.main__news__list li > a {
  display: block;
}

.main__news__list li .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 70px;
}

.main__news__list li .img {
  width: 350px;
  height: 200px;
  border-radius: 20px;
  overflow: hidden;
}

.main__news__list li .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main__news__list li .info {
  flex: 1;
}

.main__news__list li .info span {
  display: block;
  color: #0f1b3d;
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 10px;
}

.main__news__list li .info h3 {
  font-size: 2rem;
  line-height: 1.3;
  word-break: keep-all;
}

.main__news__list li .info .info_link {
  display: inline-block;
  background-color: #0f1b3d;
  color: #fff;
  margin-top: 20px;
  padding: 10px 20px;
  border-radius: 999px;
}

.main__news__list .arrow {
  flex: 0.4;
  padding-right: 40px;
  text-align: right;
}

.main__news__list .arrow img {
  height: 50px;
}

/* ================================
        MAIN NEWS LIST MEDIA
================================ */

@media (max-width: 1600px) {

  .main__news__list li .flex {
    gap: 50px;
  }

  .main__news__list li .img {
    width: 320px;
    height: 190px;
  }

}

@media (max-width: 1440px) {

  .main__news__list li .flex {
    gap: 40px;
  }

  .main__news__list li .img {
    width: 300px;
    height: 180px;
  }

  .main__news__list li .info h3 {
    font-size: 1.75rem;
  }

}

@media (max-width: 1024px) {

  .main__news__list li {
    padding: 28px 0;
  }

  .main__news__list li .flex {
    gap: 30px;
  }

  .main__news__list li .img {
    width: 260px;
    height: 160px;
  }

  .main__news__list li .info span {
    font-size: 1.125rem;
  }

  .main__news__list li .info h3 {
    font-size: 1.5rem;
  }

  .main__news__list .arrow img {
    height: 40px;
  }

}

@media (max-width: 768px) {

  .main__news__list li {
    padding: 24px 0;
  }

  .main__news__list li .flex {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .main__news__list li .img {
    width: 100%;
    height: 230px;
  }

  .main__news__list li .info {
    width: 100%;
  }

  .main__news__list .arrow {
    display: none;
  }

}

@media (max-width: 480px) {

  .main__news__list li {
    padding: 20px 0;
  }

  .main__news__list li .img {
    height: 180px;
  }

  .main__news__list li .info span {
    font-size: 1rem;
  }

  .main__news__list li .info h3 {
    font-size: 1.25rem;
  }

  .main__news__list li .info .info_link {
    font-size: .875rem;
    padding: 8px 16px;
  }

}