@charset "utf-8";
/* 새글 스킨 (latest) */

.content04 .lat {position:relative;}
.content04 .lat .lat_title {display:none;padding:0 20px;line-height:45px;font-size:1.083em;border-bottom:1px solid #e2e2e2;color:#333; }
.content04 .lat .lat_title a{color:#333;display:inline-block;position:relative; font-size:1.313em; height:auto}
.content04 .lat .lat_title a:after{position:absolute;bottom:-3px;left:0;width:100%;height:2px;background:#333;content:''}

.content04 .lat ul{padding:0;}
.content04 .lat ul li {}
.content04 .lat ul li:first-child a {padding-top: 0;}
.content04 .lat ul li a {display: block; padding: 23px 0; border-bottom: 1px solid rgba(0,0,0,0.3); transition: .4s;}
.content04 .lat ul li a .flex_box {display: flex; align-items: center; justify-content: space-between; gap: 0;}
.content04 .lat ul li a .flex_box .text_box {color: #121212; opacity: .5; font-weight: 600; font-size: 22px; transition: .4s;}
.content04 .lat ul li a .flex_box .text_box p {color: inherit; font-weight: inherit; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.content04 .lat ul li a .flex_box .text_box strong {color: inherit; font-weight: inherit;}
.content04 .lat ul li a .flex_box .text_box .lt_date {margin-top: 15px; font-size: 14px; font-weight: 400; color: inherit; transition: .4s;}
.content04 .lat ul li a .flex_box .btn_box {width: 50px; aspect-ratio: 1 / 1; border-radius: 50%; cursor: pointer; display: grid; place-content: center; background-color: rgba(0,0,0,0.1); transition: .4s;}
.content04 .lat ul li a .flex_box .btn_box img {}

.content04 .lat ul li a:hover {border-bottom-color: #121212;}
.content04 .lat ul li a:hover .flex_box .text_box {opacity: 1;}
.content04 .lat ul li a:hover .flex_box .text_box strong {}
.content04 .lat ul li a:hover .flex_box .text_box .lt_date {}
.content04 .lat ul li a:hover .flex_box .btn_box {background-color: #1E3A8A;}
.content04 .lat ul li a:hover .flex_box .btn_box img {}


@media screen and (max-width: 1200px) {
  .content04 .lat ul li a .flex_box .text_box {font-size: 20px; width: calc(100% - 50px);}
  .content04 .lat ul li a .flex_box .btn_box {width: 40px;}
  .content04 .lat ul li a .flex_box .btn_box img {width: 8px;}
}
@media screen and (max-width: 960px) {

}
@media screen and (max-width: 640px) {
  .content04 .lat ul li a .flex_box .text_box {font-size: 18px;}
}
@media screen and (max-width: 450px) {
  .content04 .lat ul li a .flex_box .text_box {font-size: 17px;}
}