.main.single,.main.archive {
margin: clamp(2.5rem, 0.309rem + 8.99vw, 7.5rem) auto 120px;
}
.single article {
color: var(--white-color);
}
.single article .date {
padding: clamp(2.5rem, 1.952rem + 2.25vw, 3.75rem) 16px 12px;
}
.single article h1 {
padding-bottom: 12px;
max-width: 1312px;
margin: 0 auto;
padding: 0 16px clamp(1.25rem, 0.702rem + 2.25vw, 2.5rem);
}
.single article h2 {
padding-bottom: 12px;
margin: 60px 0 24px;
position: relative;
}
.single article h2::before {
content: "";
position: absolute;
bottom: 0;
width: 160px;
height: 4px;
background: var(--sub-color);
}
.single article h3 {
color: var(--sub-color);
margin: 40px 0 16px;
font-size: 24px;
}
.single article h4 {
margin: 32px 0 16px;
font-size: 20px;
}
.single article figure.thumbnail {
margin-top: 0;
}
.first {
position: relative;
width: 100%;
min-height: 440px;
display: flex;
overflow: hidden;
}
.first-img{
position: absolute;
    padding-left: 16px;
inset: 0 0 0 max(0px, calc((100vw - 1328px) / 2 + 16px));
margin: 0;
z-index: 0;
}
.first-img img{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: left center;
border-radius: 0 0 0 50px;
background: var(--white-color);
}
.first-sec { 
width: 100%;
height: 100%;
display: flex;
padding: 0;
margin-top: auto;
}

.first-head { 
color: var(--main-color);
padding: 20px 80px 20px 32px;
margin-left: auto;
margin-bottom: 60px;
position: relative;
bottom: 0;
font-size: 24px;
font-weight: 600;
z-index: 1;
display: flex;
} 
.first-head::after { 
content: ""; 
position: absolute;
background: var(--white-color);
border-radius: 50px 0 0 50px;
left: 0;
bottom: 0;
width: 100vw;
height: 100%;
z-index: -1;
}
.single ol.bread-crumb {
margin: clamp(0.5rem, -0.003rem + 2.06vw, 1.5rem) auto 0;
}
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);
}
.author {
margin: 24px 0;
}
.author > dl {
padding: 16px 16px 0;
border-radius: 10px 10px 0 0;
border: solid var(--white-color) 2px;
border-bottom: none;
}
.author > dl > dt {
font-size: 18px;
border-left: 4px solid var(--white-color);
padding-left: 8px;
margin-bottom: 12px;
text-box-trim: trim-both;
}
.author-wrap {
display: flex;
gap: 20px;
}
.author-wrap dl {
display: grid;
align-content: flex-start;
gap: 12px;
}
.author-wrap dl dt {
display: flex;
gap: 20px;
font-weight: 600;
line-height: 1.4;
align-items: center;
}
.author-wrap dl dt > figure {
margin: 0;
}
.author-wrap dl dt > figure img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 10px;
margin: 0;
}
.author-wrap dl dt > span {
display: grid;
align-content: flex-start;
gap: 4px;
}
.author-wrap dl dt > span span:first-child {
color: var(--sub-color);
}
.author-wrap dl dt > span span:last-child {
font-size: 24px;
}
.author-wrap dl dd {
font-size: 14px;
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease;
}
.author-wrap dl dd p:not(:last-child) {
margin-bottom: 8px;
}
.author-wrap dl dd p:last-child {
margin-bottom: 20px;
}
.author .accordion{
display: flex;
align-items: center;
cursor: pointer;
padding: 2px 0 2px;
font-size: 14px;
border-radius: 0 0 10px 10px;
background: var(--white-color);
font-weight: 600;
color: var(--main-color);
justify-content: center;
}
.author .accordion span{
position: relative;
}
.author .accordion span::after {
content: "";
position: absolute;
top: calc(50% - 2px);
right: -20px;
width: 8px;
height: 8px;
border-right: 2px solid var(--sub-color);
border-bottom: 2px solid var(--sub-color);
transform: translateY(-50%) rotate(45deg);
}
.author .accordion.is-open span::after {
transform: translateY(-50%) rotate(-135deg);
top: calc(50% + 2px);
}
#toc {
background: #fff;
border-radius: 10px;
padding: 20px 32px;
}
#toc > div {
display: grid;
justify-content: center;
line-height: 1.2;
font-weight: 600;
}
#toc > div > span:first-child {
color: var(--sub-color);
font-size: 14px;
}
#toc > div > span:nth-child(2) {
color: var(--main-color);
font-size: 20px;
}
#toc ol {
font-weight: 600;
margin-top: 20px;
}
#toc ol li:not(:last-child) {
margin-bottom: 12px;
}
#toc ol span.eg {
color: var(--sub-color);
}
#toc ol a {
color: var(--main-color);
}
.article-list,.article-wrap {
width: 80%;
}
.article-list ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.article-list li {
border-radius: 10px;
overflow: hidden;
}
.article-list li a {
display: flex;
flex-direction: column;
height: 100%;
color: var(--main-color);
line-height: 1.2;
background: var(--white-color);
text-decoration: none;
}
.article-list li a figure {
width: 100%;
aspect-ratio: 2.4 / 1.2;
object-fit: cover;
}
.article-list li a time {
display: block;
font-size: clamp(0.75rem, 0.563rem + 0.39vw, 0.875rem);
padding: 12px 8px 8px;
}
.article-list li a span {
display: block;
padding: 0 8px 16px;
font-size: clamp(0.875rem, 0.688rem + 0.39vw, 1rem);
}
.article-wrap figure {
margin: 20px 0;
}
.article-wrap img {
border-radius: 10px;
}
.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: 30px 0 12px;
}
.article-wrap .content .recommend {
background: #ffffff38;
color: var(--white-color);
padding: 8px;
border-radius: 10px;
margin-bottom: 20px
}
@media (max-width: 1000px) {
.article-list ul {
grid-template-columns: repeat(2, 1fr);
}
}
@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);
}
.article-list,.article-wrap {
width: 100%;
}
.article-list li a time {
font-size: 14px;
}
.article-list li a span{
font-size: 16px;
}
.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);
}
}
@media (max-width: 600px) {
.article-list ul {
grid-template-columns: repeat(1, 1fr);
gap:32px;
}
}