.article-card-3 {
display: flex;
padding: 4.8rem 0;
border-bottom: 1px solid #e7e7e7;
}
@media only screen and (max-width: 48em) {
.article-card-3 {
  display: block;
  padding: 3rem 0;
}
}
.article-card-3 .date {
width: 8rem;
height: 6rem;
flex: none;
position: relative;
margin-right: 2.7rem;
border: 1px solid #D69A41;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@media only screen and (max-width: 48em) {
.article-card-3 .date {
  position: absolute;
  left: 0;
  top: 3;
  background-color: #D69A41;
}
}
.article-card-3 .date .day {
font-size: 3rem;
font-weight: 600;
color: #D69A41;
line-height: 1;
margin-bottom: 0.6rem;
font-family: "syst";
}
@media only screen and (max-width: 48em) {
.article-card-3 .date .day {
  font-size: 2rem;
  margin-bottom: 4px;
  font-weight: 400;
  color: #fff;
}
}
.article-card-3 .date .year {
font-size: 1.4rem;
color: #D69A41;
line-height: 1;
}
@media only screen and (max-width: 48em) {
.article-card-3 .date .year {
  font-size: 1.2rem;
  color: #fff;
}
}
.article-card-3 .info {
flex: 1;
position: relative;
}
@media only screen and (max-width: 48em) {
.article-card-3 .info {
  order: 2;
  width: 100%;
  padding-top: 2rem;
  height: auto;
}
}
.article-card-3 .info .title {
font-size: 1.8rem;
color: #111;
line-height: 1;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
margin-bottom: 1.5rem;
}
@media only screen and (max-width: 48em) {
.article-card-3 .info .title {
  margin-bottom: 1rem;
}
}
.article-card-3 .info .desc {
font-size: 1.6rem;
color: #888888;
line-height: 2.6rem;
height: 5.2rem;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.article-card-3 .info .more {
position: absolute;
left: 0;
bottom: 0;
color: #D69A41;
}
.article-card-3 .info .more::before {
content: "";
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: currentColor;
opacity: 0.5;
position: absolute;
left: 0;
bottom: 0;
}
.article-card-3 .info .more::after {
content: "";
font-family: "iconfont";
content: "";
font-size: 3rem;
color: currentColor;
line-height: 1;
position: absolute;
left: 5px;
bottom: -8px;
}
@media only screen and (max-width: 48em) {
.article-card-3 .info .more {
  display: none;
}
}
.article-card-3 .cover {
flex: none;
width: 20.5rem;
height: 11.6rem;
margin-right: 2.9rem;
}
@media only screen and (max-width: 48em) {
.article-card-3 .cover {
  width: 100%;
  height: auto;
  aspect-ratio: 1.8;
}
}
.article-card-3 .cover img {
display: block;
width: 100%;
height: 100%;
}
.article-card-3:hover {
background-color: #fff;
}
.article-card-3:hover .date {
border: 1px solid #1166BA;
}
.article-card-3:hover .date .day {
color: #1166BA;
}
.article-card-3:hover .date .year {
color: #1166BA;
}
.article-card-3:hover .info .title {
color: #1166BA;
}
.article-card-3:hover .info .desc {
color: #1166BA;
}
.article-card-3:hover .info .more {
color: #1166BA;
}
.article-card-3 .info .desc {
  display: flex;
  flex-wrap: wrap;
}
.article-card-3 .info .desc li {
  width: 50%;
  font-size: 1.6rem;
  color: #888;
  line-height: 2.6rem;
}