.artCates,.cates{
    width: 90%;
    margin: 1rem auto;
}
.cates{
    display: grid;
    grid-gap: 0.5rem 0.5rem;
    grid-template-columns: repeat(12,1fr);
    width: 90%;
    margin: 1rem auto;
}
.cate > img{
    width: 100%;
    height: 100%;
}
.cate_0{
    grid-column: 1/5;
}
.cate_1{
    grid-column: 5/9;
}
.cate_2{
    grid-column: 9/13;
}
.cate_3{
    grid-column: 1/7;
}
.cate_4{
    grid-column: 7/10;
}
.cate_5{
    grid-column: 10/13;
}
.cate_6{
    grid-column: 1/7;
}
.cate_7{
    grid-column: 7/10;
}
.cate_8{
    grid-column: 10/13;
}
.cate_9{
    
grid-column: 1/7;
}
.cate_10{
    grid-column: 7/13;
}

.artCates{

}
.artCate{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
    background-image: linear-gradient(to right, transparent,#F5F8FF);
    border-radius: 0 8px 8px 0;
}
.artCate > img{
    width: 4rem;
}
.artTitle{
    width: calc(100% - 6rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* border-radius: 10px; */
    padding: 0.5rem 0.8rem;
}
.artTitle > div{
    font-size: 0.9rem;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.artTitle > img{
    width: 1.5rem;
}