.articles{
float:right;
width:1298px;
margin:10px 74px 0 0;
text-align:right
}
.articles .row {
display:flex;
justify-content:space-between;
margin:20px 0
}
.articles .article{
display:inline-block;
width:342px;
padding:0 10px 0
}
.articles .article .img{
float:right;
width:100%
}
.articles .article .img img{
float:right;
width:100%
}
.articles .article .title{
float:right;
color:#000;
font-size:22px;
margin:20px 5% 25px 20px;
font-weight:normal;
text-align:right;
padding:0 0 5px 0
}
.articles .article:hover .title{
border-bottom:3px solid #00aeef
}
.articles .article .subtitle{
float:right;
width:95%;
margin:0 5% 0 0;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical
}
.articles .article .article_link{
float:right;
color:#662d91;
margin:20px 5% 0 0;
text-decoration:none
}
.numbers{
float:right;
margin:20px 0 0 0;
width:100%;
text-align:center
}
.numbers a{
display:inline-block;
width:30px;
height:30px;
margin:0 6px 27px 0;
background:#fff;
text-align:center;
color:#9e9e9e;
border-radius:3px;
line-height:30px;
box-shadow:1px 1px 3px gray;
text-decoration:none
}
.numbers a.active{
background:#00aeef;
color:white
}
@media (max-width:1440px){
.articles{
width:980px;
margin:10px 0 0 0
}
.articles .article{
width:312px
}
.articles .article .img img{
max-width:100%
}
}
@media all and (max-width:640px),(max-device-width:640px){
.articles .article{
width:90%;
margin:0 5% 0 5%
}
}