.main.news {
margin: clamp(2.5rem, 0.309rem + 8.99vw, 7.5rem) auto 120px;
}
.news article .date {
    display: flex;
    align-items: center;
    gap: 20px;
padding:clamp(2.5rem, 1.952rem + 2.25vw, 3.75rem) 16px 12px;
}
.news article .date span {
background: var(--sub-color);
width: 100px;
text-align: center;
font-size: 14px;
padding: 4px 0;
border-radius: 10px;
}
.news article .date span.important {
background: var(--accent-color);
}
.news article h1 {
padding-bottom: 12px;
max-width: 1312px;
margin: 0 auto;
padding: 0 16px clamp(1.25rem, 0.702rem + 2.25vw, 2.5rem);
}
.news article h2 {
padding-bottom: 12px;
margin: 60px 0 24px;
position: relative;
}
.news article h2::before {
content: "";
position: absolute;
bottom: 0;
width: 160px;
height: 4px;
background: var(--sub-color);
}
.news article h3 {
color: var(--sub-color);
margin: 40px 0 16px;
font-size: 24px;
}
.news article h4 {
margin: 32px 0 16px;
font-size: 20px;
}
h1 {
color: var(--white-color);
font-size: 32px;
font-weight: 600;
line-height: 1.2;
position: relative;
}
.h1-border {
position: relative;
display: inline-block;
margin-bottom: 12px;
}
.h1-border.left::before {
content: "";
position: absolute;
right: -18px;
bottom: -12px;
width: 100vw;
height: 4px;
}
.h1-border.right::before {
content: "";
position: absolute;
left: -200px;
bottom: -12px;
width: 100vw;
height: 4px;
}
.h1-border.white::before {
background: var(--white-color);
}
.news-list {
margin-bottom: 120px;
}
.news-list ul {
display: grid;
grid-template-columns: 1fr;
}
.news-list li {
border-bottom: 1px solid var(--sub-color);
}
.news-list li a {
display: flex;
padding: 16px 24px;
color: var(--white-color);
text-decoration: none;
align-items: center;
font-weight: 600;
gap: 20px;
}
.news-list li a span:first-child {
display: flex;
align-items: center;
gap: 20px;
white-space: nowrap;
}
.news-list li a span:first-child span {
background: var(--sub-color);
width: 100px;
text-align: center;
font-size: 14px;
padding: 4px 0;
border-radius: 10px;
}
.news-list li a span:first-child span.important {
background: var(--accent-color);
}
.article-wrap ul,.article-wrap ol:not(.toc) {
border-radius: 10px;
background: var(--white-color);
padding: 8px 16px;
margin: 20px 0;
color: var(--main-color);
}
.article-wrap ol:not(.toc) {
list-style-type: decimal;
}
.article-wrap ul {
list-style-type: disc;
}
.article-wrap ul li::marker,.article-wrap ol:not(.toc) li::marker {
color: var(--sub-color);
}
.article-wrap ul li,.article-wrap ol:not(.toc) li {
font-weight: 500;
padding: 8px 0;
margin-left: 20px;
}
.article-wrap ul > li > ul {
margin-top: 0;
padding: 8px 0;
}
.table-wrap {
margin: 20px 0;
}
.article-wrap table {
border-collapse: collapse;
}
.article-wrap table tr > * {
padding: 6px 16px;
border: 2px solid var(--main-color);
background: var(--white-color);
text-align: center;
vertical-align: middle;
}
.article-wrap table tr > th {
background: var(--sub-color);
color: var(--white-color);
text-align: center;
font-weight: 600;
}
.article-wrap table tr > td {
color: var(--main-color);
text-align: center;
}
.article-wrap .content dl {
margin-bottom: 20px;
}
.article-wrap .content dl dt {
    color: var(--sub-color);
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 4px;
}
.article-wrap .content .recommend {
background: #ffffff38;
color: var(--white-color);
padding: 8px;
border-radius: 10px;
margin-bottom: 20px
}
@media (max-width: 768px) {
h1 {
font-size: clamp(1.5rem, 0.984rem + 2.12vw, 2rem);
}
h2 {
font-size: clamp(1.5rem, 0.984rem + 2.12vw, 2rem);
}
h3 {
font-size: clamp(1.375rem, 1.246rem + 0.53vw, 1.5rem);
}
.two-container {
flex-wrap: wrap;
}
.article-wrap {
width: 100%;
}
.news-list li a {
align-items: flex-start;
flex-direction: column;
gap: 8px;
padding: 16px 0;
}
.table-wrap {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.article-wrap table {
white-space: nowrap;
}
.article-wrap table tr > *:first-child {
position: sticky;
top: 0;
left: 0;
background: none;
border-left: none;
border-right: none;
}
.article-wrap table tr > *:first-child::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: calc(100% + 2px);
height: 100%;
border-left: 2px solid var(--main-color);
border-right: 2px solid var(--main-color);
z-index: -1;
background: var(--white-color);
}
.article-wrap table tr > th:first-child::before {
background: var(--sub-color);
}
}