@charset "utf-8";

/* 새글 스킨 (latest) */
.notice {position:relative;}
.notice ul {display: flex; flex-direction: column;}
.notice ul li {margin-bottom: 20px; background-color: #f5f5f5; width: 100%;}
.notice ul li:last-child {margin-bottom: 0;}
.notice ul li a {display: flex; align-items: center; justify-content: space-between; padding: 40px 50px; transition-duration: 0.3s;}
.notice ul li a .txtwrap {display: flex; align-items: center;}
.notice ul li a .txtwrap h3 {font-size: 18px; font-weight: 500; color: #fb9d00; margin-right: 100px;}
.notice ul li a .txtwrap h2 {font-size: 20px; font-weight: 700;}
.notice ul li a h4 {color: #999; font-size: 16px; font-weight: 400;}

.notice ul li a:hover {background-color: #121212;}
.notice ul li a:hover .txtwrap h3 {color: #fff;}
.notice ul li a:hover .txtwrap h2 {color: #fff;}
.notice ul li a:hover h4 {color: #fff;}


@media screen and (max-width: 960px) {
    .notice ul li a {padding: 40px;}
    .notice ul li a .txtwrap h3 {font-size: 16px; margin-right: 80px;}
    .notice ul li a .txtwrap h2 {font-size: 18px;}
    .notice ul li a h4 {font-size: 14px;}
}

@media screen and (max-width: 800px) {
    .notice ul li a h4 {display: none;}
}

@media screen and (max-width: 640px) {
    .notice ul li a {padding: 30px;}
    .notice ul li a .txtwrap {flex-direction: column; align-items: flex-start;}
    .notice ul li a .txtwrap h3 {margin-right: 50px; font-size: 14px; margin-bottom: 10px;}
    .notice ul li a .txtwrap h2 {font-size: 16px;}
}