@charset "utf-8";

/* 새글 스킨 (latest) */
.notice-list {position:relative;}
.notice-list .lat_title {margin-bottom:30px; display: flex; align-items: center; justify-content: space-between; font-size: 36px; font-weight: 700;}
.notice-list .lat_title a {display: flex;}
.notice-list .lat_title a img {width: 40px; height: 40px;}
.notice-list > ul > li {border-radius: 15px; border: 1px solid #E4E4E4; background: #fff; transition: .3s;}
.notice-list > ul > li:hover {border: 1px solid rgba(243, 148, 60, 0.6);}
.notice-list > ul > li a {display: flex; align-items: center; grid-column-gap: 30px; padding: 26px 0;}
.notice-list > ul > li .date {display: flex; flex-direction: column; align-items: center; justify-content: center; width: 120px; flex: none; position: relative;}
.notice-list > ul > li .date::before {content: ''; width: 1px; height: 30px; background: var(--gray); position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.notice-list > ul > li .date .year {font-size: 1.125rem; font-weight: 500; color: #BABABA;}
.notice-list > ul > li .date .day {font-size: 24px; font-weight: 700; color: #424242; margin-top: 5px;}
.notice-list > ul > li .cont {}
.notice-list > ul > li .cont .tit {font-size: 22px; font-weight: 600; display: flex; grid-column-gap: 10px;}
.notice-list > ul > li .cont .tit p {display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; position: relative;}
.notice-list > ul > li .cont .tit p::before {content: ''; position: absolute; bottom: 0; left: 0; width: 0; transition: width .3s; height: 8px; border-radius: 6px; background-color: rgba(243, 148, 60, 1); opacity: .2;}
.notice-list > ul > li:hover .cont .tit p::before {width: 100%;}
.notice-list > ul > li .cont .txt {font-size: 1.125rem; color: #757575; margin-top: 10px; margin-right: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.notice-list > ul > li + li {margin-top: 20px;}

@media screen and (max-width: 1280px) {
    .notice-list .lat_title {font-size: 28px;}
    .notice-list > ul > li a {padding: 24px 0; grid-column-gap: 24px;}
    .notice-list > ul > li .date {width: 106px;}
    .notice-list > ul > li .date::before {height: 26px;}
    .notice-list > ul > li .date .year {font-size: 1rem;}
    .notice-list > ul > li .date .day {font-size: 1.25rem;}
    .notice-list > ul > li .cont .tit p {font-size: 20px;}
    .notice-list > ul > li .cont .txt {font-size: 1rem;}
}

@media screen and (max-width: 768px) {
    .notice-list .lat_title {font-size: 22px; margin-bottom: 22px;}
    .notice-list .lat_title a img {width: 30px; height: 30px;}
    .notice-list > ul > li a {padding: 15px 0; grid-column-gap: 14px;}
    .notice-list > ul > li .date {width: 74px;}
    .notice-list > ul > li .date::before {height: 20px;}
    .notice-list > ul > li .date .year {font-size: 12px;}
    .notice-list > ul > li .date .day {font-size: 1rem;}
    .notice-list > ul > li .cont .tit p {font-size: 1rem; margin-right: 16px;}
    .notice-list > ul > li .cont .tit p::before {height: 6px;}
    .notice-list > ul > li .cont .txt {display: none;}
    .notice-list > ul > li + li {margin-top: 10px;}
}