main {
    width: 100%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
.container {
    width: 100%;
    padding: 20px;
}
.news-body {
    margin-top: 20px;
    * {
        margin: 0;
        padding: 0;
        margin-top: 10px;
        margin-bottom: 7px;
    }
    h2 {
        padding: 20px;
        background: #e3e3e3;
        font-size: 24px;
        margin-top: 35px;
        margin-bottom: 15px;
    }
    h3 {
        padding-left: 25px;
        display: flex;
        align-items: center;
        position: relative;
        margin-top: 25px;
        &::before {
            content: '';
            width: 20px;
            height: 20px;
            background-image: url(/img/icon2/info.svg);
            position: absolute;
            left: 0;
            background-size: cover;
            background-position: center;
            filter: invert(45%) sepia(88%) saturate(445%) hue-rotate(179deg) brightness(93%) contrast(105%);
        }
        span {
            margin: 0;
        }
    }
    h3:has(span.mch3-attention)::before {
        background-image: url(/img/icon2/attention.svg);
        filter: invert(55%) sepia(49%) saturate(4718%) hue-rotate(-743deg) brightness(101%) contrast(103%);
    }
    h3:has(span.mch3-global)::before {
        background-image: url(/img/icon2/global.svg);
        filter: invert(27%) sepia(0%) saturate(12626%) hue-rotate(467deg) brightness(94%) contrast(74%);
    }
    h3:has(span.mch3-bell)::before {
        background-image: url(/img/icon2/news.svg);
        filter: invert(219%) sepia(109%) saturate(1677%) hue-rotate(-1120deg) brightness(96%) contrast(101%);
    }
    h3:has(span.mch3-plus)::before {
        background-image: url(/img/icon2/plus.svg);
        filter: invert(45%) sepia(88%) saturate(445%) hue-rotate(179deg) brightness(93%) contrast(105%);
    }
    h3:has(span.mch3-delete)::before {
        background-image: url(/img/icon2/delete.svg);
        filter: invert(77%) sepia(48%) saturate(11610%) hue-rotate(-1102deg) brightness(99%) contrast(94%);
    }
    h3:has(span.mch3-bug)::before {
        background-image: url(/img/icon2/bug.svg);
        filter: invert(0%) sepia(0%) saturate(109030%) hue-rotate(-627deg) brightness(90%) contrast(60%);
    }
    h3:has(span.mch3-update)::before {
        background-image: url(/img/icon2/update.svg);
        filter: invert(68%) sepia(128%) saturate(5247%) hue-rotate(-49deg) brightness(124%) contrast(101%);
    }
    h3:has(span.mch3-survey)::before {
        background-image: url(/img/icon2/survey.svg);
        filter: invert(157%) sepia(229%) saturate(31038%) hue-rotate(-626deg) brightness(80%) contrast(88%);
    }
    h3:has(span.mch3-mail)::before {
        background-image: url(/img/icon2/mail.svg);
        filter: invert(11%) sepia(540%) saturate(23419%) hue-rotate(515deg) brightness(137%) contrast(106%);
    }
    h3:has(span.mch3-beta)::before {
        background-image: url(/img/icon2/science.svg);
        filter: invert(33%) sepia(296%) saturate(17747%) hue-rotate(-469deg) brightness(73%) contrast(112%);
    }
    h3:has(span.mch3-build)::before {
        background-image: url(/img/icon2/build.svg);
        filter: invert(17%) sepia(167%) saturate(32589%) hue-rotate(-444deg) brightness(95%) contrast(75%);
    }
    h3:has(span.mch3-check)::before {
        background-image: url(/img/icon2/check.svg);
        filter: invert(74%) sepia(10%) saturate(6451%) hue-rotate(-1001deg) brightness(96%) contrast(88%);
    }
    h3:has(span.mch3-time)::before {
        background-image: url(/img/icon2/time.svg);
        filter: invert(59%) sepia(34%) saturate(5045%) hue-rotate(8deg) brightness(100%) contrast(101%);
    }
    h3:has(span.mch3-calendar)::before {
        background-image: url(/img/icon2/calendar.svg);
        filter: invert(77%) sepia(21%) saturate(8983%) hue-rotate(500deg) brightness(97%) contrast(101%);
    }
    h3:has(span.mch3-help)::before {
        background-image: url(/img/icon2/help.svg);
        filter: invert(23%) sepia(410%) saturate(67149%) hue-rotate(572deg) brightness(98%) contrast(102%);
    }

    ul {
        padding-left: 30px;
        li {
            margin: 0;
            margin-top: 3px;
            margin-bottom: 3px;
            p {
                margin: 0;
                margin-top: 3px;
                margin-bottom: 3px;
            }
        }
    }
    img {
        width: 100%;
        height: auto;
        max-width: 500px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    hr {
        margin: 0;
        margin-top: 20px;
        margin-bottom: 20px;
        border: none;
        border-top: 1px solid #000;
    }
    a {
        color: #4285f4;
        font-weight: 700;
    }
    .mc-url {
        background: #4285f4;
        color: #fff;
        padding: 20px 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%;
        font-weight: 900;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        text-decoration: none;
        position: relative;

        &::after {
            content: '';
            width: 25px;
            height: 25px;
            filter: invert(1);
            background-image: url(/img/icon/link.svg);
            background-position: center;
            background-size: cover;
        }
    }
}
.news-img img {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.title2 {
    background: #000;
    color: #fff;
    width: 100%;
    font-size: 24px;
    margin: 0;
    margin-bottom: 10px;
    padding: 10px;
    font-weight: 900;
}
.imode {
    display: flex;
    gap: 10px;
    margin-bottom: 13px;
    align-items: center;
}
.meta {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    gap: 10px;
}
.back-link {
    display: flex;
    gap: 10px;
    border: 1px solid #000;
    padding: 10px;
    text-decoration: none;
    width: 300px;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    color: #000;
    margin-top: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease-in-out;
    img {
        width: 20px;
        height: auto;
    }
    &:hover {
        gap: 25px;
    }
    &:active {
        opacity: 0.5;
    }
}

.tags span {
    border: 1px solid #000;
    padding: 2px 10px;
    font-size: 14px;
    display: inline-block;
}

/**/
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}