#noticeList .container{
    border-top: 0.2rem solid var(--clr-dark);
}
#noticeList .container ul {
    display: flex;
    flex-direction: column;
}
#noticeList .container ul li a {
    min-height: max(48px,8rem);
    display: grid;
    grid-template-columns: minmax(0,15rem) minmax(0,1fr) max-content;
    align-items: center;
    border-bottom: 0.1rem solid var(--clr-border);
}
#noticeList .container ul li a .number {
    font-size: max(14px,2.2rem);
    font-weight: 300;
    color: var(--clr-light);
    text-align: center;
    margin-right: 5rem;
}
#noticeList .container ul li a .title {
    font-size: max(14px,2.2rem);
    color: var(--clr-gray);
    word-break: break-all;
    padding-right: 2rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
}
#noticeList .container ul li a div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#noticeList .container ul li a > div > span::before {
    content: '';
    width: 2rem;
    aspect-ratio: 1/1;
    margin-right: 0.8rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
#noticeList .container ul li a > div > span {
    font-size: max(12px,1.6rem);
    color: var(--clr-gray);
    display: flex;
    align-items: center;
}
#noticeList .container ul li a .time::before {
    background-image: url('../images/literature/icon-time.svg');
}
#noticeList .container ul li.pinned a::before {
    content: '';
    width: 10rem;
    height: 100%;
    margin-right: 5rem;
    background-image: url('../images/common/icon-pin.svg');
    background-size: max(24px,4.5rem);
    background-position: center;
    background-repeat: no-repeat;
}
#noticeList .container ul li.pinned a .number {
    display: none;
}
#noticeList .container ul li.pinned a .title {
    font-weight: 500;
    color: var(--clr-black);
}