/* article.php */
main .title_container {height: 320px;}
main .title_container .inner {padding-bottom: 50px;}
main .title_container h2 {font-size: 32px; font-weight: 600; letter-spacing: -1px; line-height: 1.3; color: #fff; margin-bottom: 15px; word-break: keep-all;}
main .title_container .author_wrap {display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff;}
main .title_container .author_wrap b {font-weight: 600;}

main .list_container .main_wrap .inner {width: 750px;}
main .list_container .main_wrap h3 {background: #1375bd; padding: 20px; text-align: center; font-size: 22px; font-weight: 600; letter-spacing: -1px; border-radius: 5px; color: #fff;}
main .list_container .main_wrap .thumb {display: block; width: 100%; margin: 15px 0;}
main .list_container .main_wrap p {font-size: 19px; letter-spacing: -1px; line-height: 1.6; color: #333; margin: 15px 0;}
main .list_container .main_wrap p b {font-weight: 600;}
main .list_container .main_wrap h4 {font-size: 24px; font-weight: 600; letter-spacing: -1px; line-height: 1.5; margin: 20px 0;}
main .list_container .main_wrap .article {margin-top: 80px;}
main .list_container .main_wrap .sub_text {font-size: 15px; text-align: center; margin-bottom: 15px;}
main .list_container .main_wrap .link {background: #13bd7e; font-size: 22px; color: #fff; font-weight: 600; letter-spacing: -1px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px 0; border-radius: 10px; margin: 20px 0;}
main .list_container .main_wrap .link img {width: 28px; margin: 0;}
main .list_container .main_wrap .banner_wrap {display: flex; flex-direction: column; gap: 8px; margin-bottom: 30px;}
main .list_container .main_wrap .banner_wrap .banner {display: block; font-size: 0;}
main .list_container .main_wrap .banner_wrap .banner img {width: 100%;}
main .list_container .main_wrap .contents {background: #efefef; padding: 20px; border-radius: 10px;}
main .list_container .main_wrap .contents h5 {font-size: 22px; font-weight: 600; letter-spacing: -1px; display: flex; align-items: center; gap: 10px;}
main .list_container .main_wrap .contents .contents_list {margin-top: 12px;}
main .list_container .main_wrap .contents button {font-size: 16px; font-weight: 400; letter-spacing: -1px; border-bottom: 1px solid #333;}
main .list_container .main_wrap .contents a {display: block; font-size: 18px; letter-spacing: -1px; line-height: 1.7; width: fit-content; color: #333;}
main .list_container .main_wrap .contents a:hover {text-decoration: underline;}
main .list_container .main_wrap .summary {margin: 20px 0;}
main .list_container .main_wrap .summary:last-of-type {margin-bottom: 0;}
main .list_container .main_wrap .summary h5 {font-size: 20px; font-weight: 600; letter-spacing: -1px; background: #13bd7e; width: fit-content; padding: 12px 20px; color: #fff; border-radius: 10px 10px 0 0;}
main .list_container .main_wrap .summary .content_box {border: 1px solid #ddd; padding: 20px;}
main .list_container .main_wrap .summary .content_box .box {margin: 30px 0;}
main .list_container .main_wrap .summary .content_box .box:first-of-type {margin-top: 0;}
main .list_container .main_wrap .summary .content_box .box:last-of-type {margin-bottom: 0;}
main .list_container .main_wrap .summary .content_box p {margin-top: 0;}
main .list_container .main_wrap .summary .content_box ul li {margin-left: 20px;}
main .list_container .main_wrap .summary .content_box ul li p {margin-bottom: 0;}
main .list_container .main_wrap .summary .content_box ul li b {font-weight: 600;}
main .list_container .main_wrap .summary .content_box .box > ul {display: flex; flex-direction: column; gap: 15px;}
main .list_container .main_wrap .summary .content_box .box > ul > li {list-style: square;}
main .list_container .main_wrap .summary .content_box .box > ul > li > ul > li {list-style: circle; line-height: 1.6; letter-spacing: -1px; font-size: 19px; color: #333; word-break: keep-all;}
main .list_container .main_wrap .summary .content_box table {border: 1px solid #bbb; width: 100%; margin-bottom: 20px;}
main .list_container .main_wrap .summary .content_box table th,
main .list_container .main_wrap .summary .content_box table td {border: 1px solid #bbb; padding: 15px; text-align: center; letter-spacing: -1px; font-size: 18px; word-break: keep-all; line-height: 1.2; vertical-align: middle;}
main .list_container .main_wrap .summary .content_box table th {font-weight: 600;}
main .list_container .main_wrap .summary .content_box table b {font-weight: 600;}

main .list_container .side_wrap {padding: 40px 0 100px;}
main .list_container .side_wrap .inner {width: 1200px;}
main .list_container .side_wrap h3 {font-size: 40px; font-weight: 600; letter-spacing: -1px; color: #222; text-align: center; margin-bottom: 30px;}
main .list_container .side_wrap ul {display: flex; gap: 30px;}
main .list_container .side_wrap ul li {width: 33.3%; background: #fff; padding: 20px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; box-sizing: border-box;}
main .list_container .side_wrap ul li a {display: block;}
main .list_container .side_wrap ul li .img_wrap {box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px; overflow: hidden; border-radius: 10px; font-size: 0;}
main .list_container .side_wrap ul li img {width: 100%; height: 180px; object-fit: cover; border-radius: 10px;}
main .list_container .side_wrap ul li h4 {font-size: 20px; font-weight: 600; letter-spacing: -1px; line-height: 1.4; margin: 15px 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
main .list_container .side_wrap ul li p {font-size: 16px; letter-spacing: -1px; line-height: 1.5; color: #333; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
main .list_container .side_wrap ul li span {display: inline-block; font-size: 18px; font-weight: 600; letter-spacing: -1px; margin-top: 15px; color: #1074bd; border-bottom: 1px solid #1074bd;}

main .share_wrap {margin-top: 35px;}
main .share_wrap ul {display: flex; align-items: center; justify-content: flex-end; gap: 10px;}
main .share_wrap ul li img {width: 42px;}

.adsense {margin: 30px 0;}

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

  main .inner {width: 800px;}
  main .list_container .side_wrap .inner {width: 95%;}
  main .list_container .side_wrap ul {gap: 15px;}
  main .list_container .side_wrap ul li h4 {font-size: 18px; margin: 15px 0 10px;}
  main .list_container .side_wrap ul li p {font-size: 15px; -webkit-line-clamp: 4;}
  main .list_container .side_wrap ul li span {font-size: 16px;}
}

@media screen and (max-width: 940px) {
  main .title_container {height: 300px;}
  main .title_container h2 {font-size: 30px;}
  main .title_container .author_wrap {font-size: 15px;}

  main .list_container .main_wrap .inner {width: 600px;}
  main .list_container .main_wrap .article {margin-top: 60px;}
  main .list_container .main_wrap h3 {font-size: 20px; padding: 15px;}
  main .list_container .main_wrap p {font-size: 18px;}
  main .list_container .main_wrap .sub_text {margin-bottom: 5px;}
  main .list_container .main_wrap .link {font-size: 20px; padding: 15px 0; margin: 15px 0;}
  main .list_container .main_wrap .link img {width: 24px;}
  main .list_container .main_wrap .contents h5 {font-size: 21px;}
  main .list_container .main_wrap .contents a {font-size: 17px;}
  main .list_container .main_wrap .summary h5 {font-size: 19px;}
  main .list_container .main_wrap .summary .content_box .box > ul > li > ul > li {font-size: 18px;}
  main .list_container .main_wrap .summary .content_box table th, 
  main .list_container .main_wrap .summary .content_box table td {font-size: 16px; padding: 10px;}
  
  main .list_container .side_wrap h3 {font-size: 36px;}
  main .list_container .side_wrap ul {flex-direction: column;}
  main .list_container .side_wrap ul li {width: 100%;}
  main .list_container .side_wrap ul li a {display: flex; gap: 20px;}
  main .list_container .side_wrap ul li h4 {margin-top: 0;}
  main .list_container .side_wrap ul li img {width: 100%;}

  main .list_container .side_wrap ul li .img_wrap {width: 30%;}
  main .list_container .side_wrap ul li .text_wrap {width: 70%;}
  
}

@media screen and (max-width: 720px) { 
  main .title_container {height: 280px;}
  main .title_container h2 {font-size: 28px;}
  main .title_container .author_wrap {font-size: 14px;}
  main .list_container .main_wrap .inner {width: 90%;}
  main .list_container .side_wrap {padding: 10px 0 30px;}
  main .list_container .side_wrap ul li p {-webkit-line-clamp: 3;}
  main .list_container .side_wrap ul li h4 {margin-bottom: 10px;}
  main .list_container .side_wrap ul li span {margin-top: 10px;}
}

@media screen and (max-width: 580px) {
  main .title_container {height: 250px;}
  main .title_container .inner {width: 90%;}
  main .title_container h2 {font-size: 23px;}
  main .title_container .author_wrap {font-size: 13px;}
  main .list_container .main_wrap h3 {font-size: 18px; padding: 12px;}
  main .list_container .main_wrap p {font-size: 16px; margin-bottom: 10px;}
  main .list_container .main_wrap .banner_wrap {margin-bottom: 15px;}
  main .list_container .main_wrap .sub_text {margin-top: 15px;}
  main .list_container .main_wrap .link {font-size: 19px; margin-top: 0;}
  main .list_container .main_wrap .link img {width: 20px;}
  main .list_container .main_wrap .article {margin-top: 40px;}
  main .list_container .main_wrap .contents h5 {font-size: 20px;}
  main .list_container .main_wrap .contents button {font-size: 15px;}
  main .list_container .main_wrap .contents a {font-size: 16px;}
  main .list_container .main_wrap h4 {font-size: 20px; margin: 15px 0; line-height: 1.4;}
  main .list_container .main_wrap .summary h5 {font-size: 18px; padding: 10px 18px;}
  main .list_container .main_wrap .summary .content_box {padding: 15px;}
  main .list_container .main_wrap .summary .content_box .box {margin: 15px 0;}
  main .list_container .main_wrap .summary .content_box .box > ul > li > ul > li {font-size: 16px;}
  main .list_container .main_wrap .summary .content_box table th, 
  main .list_container .main_wrap .summary .content_box table td {font-size: 14px; padding: 8px; word-break: keep-all;}
  main .list_container .side_wrap h3 {font-size: 30px; margin-bottom: 20px;}
  main .list_container .side_wrap ul li a {flex-direction: column;}
  main .list_container .side_wrap ul li img {height: 200px;}

  main .list_container .side_wrap ul li .img_wrap {width: 100%;}
  main .list_container .side_wrap ul li .text_wrap {width: 100%;}

  main .share_wrap {margin-top: 20px;}
  main .share_wrap ul {display: flex; align-items: center; justify-content: flex-end; gap: 8px;}
  main .share_wrap ul li img {width: 30px;}

  .adsense {margin: 15px 0;}
}