.inner {width: 1000px; margin: 0 auto;}
.mb-0 {margin-bottom: 0 !important;}

/* HEADER */
header {padding: 22px 0; border-bottom: 1px solid #ddd;}
header .inner {display: flex; align-items: center; justify-content: space-between;}
header .logo {font-size: 22px; font-weight: 600;}
header ul {display: flex; align-items: center; gap: 30px;}
header ul li a {color: #555; letter-spacing: -.5px;}

/* MAIN */
main .inner {width: 1000px;}
main .title_container {background: linear-gradient(to right, #6800bf, #140079); height: 250px; display: flex; align-items: center; justify-content: center; text-align: center;}
main .list_container {background: #d3d3d3;}
main .list_container .main_wrap {background: #fff; width: 95%; border-radius: 10px; padding: 75px 0; margin: 0 auto; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; position: relative; top: -60px;}
main .list_container .main_wrap .list {display: flex; flex-direction: column; gap: 80px;}
main .list_container .main_wrap .list li > a {display: flex; gap: 30px;}
main .list_container .main_wrap .img_wrap {display: block; width: 360px; min-width: 360px; height: 240px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; overflow: hidden;}
main .list_container .main_wrap .img_wrap img {width: 100%; height: 100%; object-fit: cover; transition: all .3s;}
main .list_container .main_wrap .img_wrap img:hover {transform: scale(1.1);}
main .list_container .main_wrap .content_wrap {margin-bottom: 15px;}
main .list_container .main_wrap .content_wrap h3 {font-size: 28px; font-weight: 600; letter-spacing: -1px; line-height: 1.3; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 600px;}
main .list_container .main_wrap .content_wrap p {font-size: 16px; letter-spacing: -.5px; line-height: 1.6; color: #666; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
main .list_container .main_wrap .content_wrap span {display: inline-block; font-weight: 600; color: #1074bd; margin-top: 8px; font-size: 18px; border-bottom: 1px solid #1074bd;}
main .list_container .main_wrap .author_wrap {display: flex; align-items: center; letter-spacing: -1px; gap: 10px;}
main .list_container .main_wrap .author_wrap b {font-weight: 500;}
main .list_container .main_wrap .author_wrap span {display: block; color: #555;}

main .list_container .main_wrap .pagination {text-align: center; margin-top: 70px; display: flex; align-items: center; justify-content: center; gap: 15px; color: #555;}
main .list_container .main_wrap .pagination .prev,
main .list_container .main_wrap .pagination .next {font-size: 14px; color: #888;}
main .list_container .main_wrap .pagination .current {color: #1074bd; font-weight: 700;}
main .list_container .main_wrap .pagination .ellipsis {color: #aaa;}

@media screen and (max-width: 1200px) {
  body {min-width: 100%;}
  .inner {width: 90%;}

  main .inner {width: 800px;}
  main .list_container .main_wrap {padding: 60px 0;}
  main .list_container .main_wrap .list {gap: 70px;}
  main .list_container .main_wrap .img_wrap {width: 280px; height: 200px; min-width: 280px;}
  main .list_container .main_wrap .content_wrap h3 {font-size: 23px; width: 490px;}
  main .list_container .main_wrap .content_wrap p {font-size: 15px; -webkit-line-clamp: 4;}
  main .list_container .main_wrap .content_wrap span {font-size: 16px;}
  main .list_container .main_wrap .author_wrap p {font-size: 14px;}
  main .list_container .main_wrap .author_wrap span {font-size: 14px;}
}

@media screen and (max-width: 940px) {
  main .inner {width: 600px;}
  main .title_container {height: 200px;}
  main .list_container .main_wrap {padding: 45px 0;}
  main .list_container .main_wrap .list {gap: 55px;}
  main .list_container .main_wrap .img_wrap {width: 200px; height: 140px; min-width: 200px;}
  main .list_container .main_wrap .content_wrap {margin-bottom: 10px;}
  main .list_container .main_wrap .content_wrap h3 {font-size: 19px; width: 370px; margin-bottom: 5px;}
  main .list_container .main_wrap .content_wrap p {font-size: 15px; -webkit-line-clamp: 3;}
  main .list_container .main_wrap .content_wrap span {font-size: 14px;}
  main .list_container .main_wrap .author_wrap p {font-size: 12px;}
  main .list_container .main_wrap .author_wrap span {font-size: 12px;}
  main .list_container .main_wrap .pagination {margin-top: 60px;}
  main .list_container .main_wrap .pagination a {font-size: 15px;}
}

@media screen and (max-width: 720px) {
  header {padding: 20px 0;}

  main .inner {width: 90%;}
  main .title_container {height: 150px;}
  main .list_container .main_wrap {padding: 30px 0;}
  main .list_container .main_wrap .list {gap: 40px;}
  main .list_container .main_wrap .content_wrap h3 {width: 100%;}
}

@media screen and (max-width: 580px) {
  header {padding: 15px 0;}
  header .logo {font-size: 18px;}
  header ul {gap: 15px;}
  header ul li a {font-size: 15px;}

  main .list_container .main_wrap {padding: 25px 0;}
  main .list_container .main_wrap .list li a {flex-direction: column; gap: 20px;}
  main .list_container .main_wrap .img_wrap {width: 100%; height: 200px; min-width: unset;}
  main .list_container .main_wrap .content_wrap h3 {font-size: 22px;}
  main .list_container .main_wrap .content_wrap p {font-size: 15px;}
  main .list_container .main_wrap .content_wrap span {font-size: 15px;}
  main .list_container .main_wrap .author_wrap p {font-size: 14px;}
  main .list_container .main_wrap .author_wrap span {font-size: 14px;}
  main .list_container .main_wrap .pagination a {font-size: 16px;}
}