.announcement-page {
    max-width: 1000px;
    min-height: calc(100vh - 120px);
    padding-top: 72px;
    font-family: 'Noto Sans TC', Arial, sans-serif;
}

.announcement-heading { margin-bottom: 30px;margin-top:30px; }
.announcement-heading h1, .announcement-detail h1 { color: #262626; font-size: 32px; font-weight: 700; margin: 0 0 12px; }
.announcement-heading > p:last-child { color: #707070; margin: 0; }
.announcement-list { border-top: 2px solid #222; }
.announcement-list__item { align-items: center; border-bottom: 1px solid #dedede; color: #262626; display: flex; gap: 28px; padding: 26px 20px; text-decoration: none; transition: background-color .2s ease, padding-left .2s ease; }
.announcement-list__item:hover { background: #f3faf4; color: #262626; padding-left: 28px; }
.announcement-list__date { flex: 0 0 120px; }
.announcement-list__date span { display: block; font-weight: 700; }
.announcement-list__date small { color: #14ae3e; }
.announcement-list__content { flex: 1; }
.announcement-list__content h2 { font-size: 20px; line-height: 1.55; margin: 0 0 5px; }
.announcement-list__content p { color: #717171; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announcement-list__arrow { color: #14ae3e; font-size: 28px; }
.announcement-back { color: #278a42; display: inline-block; margin-bottom: 24px; text-decoration: none; }
.announcement-back:hover { color: #146f2d; text-decoration: underline; }
.announcement-detail { background: #fff; border: 1px solid #e3e3e3; box-shadow: 0 5px 20px rgba(0,0,0,.06); }
.announcement-detail__header { border-bottom: 1px solid #e3e3e3; padding: 38px 44px 26px; }
.announcement-badge { background: #e8f7ec; border-radius: 99px; color: #168239; display: inline-block; font-size: 14px; font-weight: 700; margin-bottom: 15px; padding: 4px 12px; }
.announcement-detail time { color: #747474; }
.announcement-detail__body { color: #383838; font-size: 16px; line-height: 1.9; padding: 38px 44px 46px; }
.announcement-detail__body p { margin: 0 0 20px; }
.announcement-detail__body h2 { border-left: 4px solid #14ae3e; color: #222; font-size: 21px; font-weight: 700; margin: 35px 0 15px; padding-left: 12px; }
.announcement-detail__body ol { margin: 0 0 22px; padding-left: 26px; }
.announcement-detail__body li { margin-bottom: 16px; padding-left: 4px; }
.announcement-contact { background: #f5faf6; border-radius: 4px; margin-top: 28px; padding: 20px 24px; }
.announcement-contact p:last-child { margin-bottom: 0; }
.announcement-contact a { color: #168239; }

@media (max-width: 767px) {
    .announcement-page {
        padding: 70px 0px 0 0;
    }
    .announcement-heading {
        margin: 30px 15px;
    }
    .announcement-heading h1, .announcement-detail h1 {
        font-size: 26px;
    }
    .announcement-back{
        margin-left:15px;
    }
    .announcement-list {
        margin: 30px 15px;
    }
    .announcement-list__item {
        align-items: flex-start;
        gap: 10px;
        padding: 20px 4px;
    }
    .announcement-list__date { flex: 0 0 auto; order: 2; text-align: right; }
    .announcement-list__date small { display: none; }
    .announcement-list__content h2 { font-size: 17px; }
    .announcement-list__content p { display: none; }
    .announcement-list__arrow { display: none; }
    .announcement-detail__header, .announcement-detail__body { padding-left: 24px; padding-right: 24px; }
    .announcement-detail__body { font-size: 15px; }
}