.article_card_inner {
display: flex; margin: 0 auto; max-width: 800px; width: 100%;
} .article-card {
width: calc(33.3% - 20px); background-color: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; transition: transform 0.3s ease;  margin: 10px;
min-height: 400px;
}
@media screen and (max-width: 768px)  {
.article-card {
width: 80%;
margin: 20px auto;
}
}
.img-card-top {
width: 100%; height: 200px; overflow: hidden; }
.img-card-top-inner {
width: 100%;
height: 100%;
position: relative;
}
.img-card-top img {
object-fit: cover; width: 100%;
height: 100%;
}
.article-card h3 {
font-size: 16px;
font-weight: 700;
color: #333333;
}
.cont-card-top {
padding: 20px;
}
.cont-card-top .article_tag_time span {
font-size: 14px;
color: #9A5F5F;
}
.cont-card-top time {
color: #19292D;
font-size: 12px;
} .articles-container {
display: flex;
flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; width: 100%;
}
.articles-container-top {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
width: 100%;
} .top-card {
width: 100%;
background-color: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; transition: transform 0.3s ease;  margin: 10px;
max-height: 350px !important;
}
.top-card h3 {
font-size: 16px;
font-weight: 700;
color: #333333;
}
@media screen and (min-width: 768px)  {
.top-card h3 {
font-size: 23px;
}
}
@media screen and (max-width: 768px)  {
.top-card {
width: 80%;
margin: 20px auto;
}
.top-card h3 {
font-size: 16px;
font-weight: 700;
color: #000000;
}
.article-card h3 {
font-weight: 500;
}
}
.img-card-top {
width: 100%; height: 200px; overflow: hidden; }
.img-card-top-inner {
width: 100%;
height: 100%;
position: relative;
}
.img-card-top img {
object-fit: cover; width: 100%;
height: 100%;
}
.cont-card-top {
padding: 20px;
}
.cont-card-top .article_tag_time span {
font-size: 14px;
}
.cont-card-top time {
color: #19292D;
font-size: 12px;
}
.tc {
text-align: center;
}
.tl {
text-align: left;
}