.download-list {
    margin: -30px -10px 0;
}
.download-list .item {
    width: 25%;
    padding: 0 10px;
}
.download-list .box{
    position: relative;
}
.download-list .box .cover{
    font-size: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index:30;
}
.download-list .item .box {
    margin: 30px auto 0;
    max-width: 210px;
}
.download-list .pic {
    margin-bottom: 6px;
    /* border-radius: 50%; */
    overflow: hidden;
    position: relative;
}
.download-list .box:hover .pic:before {
    content: "";
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 7px;
    right: 7px;
    border-radius: 50%;
    border: solid 1px rgba(255, 255, 255, 0.6);
    z-index: 20;
}
.download-list .box .pic:after {
    transition: all .5s ease-out;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 19;
    background: url(../../images/common/download/_hover.svg) 50% 50% no-repeat,  rgb(0 51 153 / 60%);;
    opacity: 0;
}
.download-list .box:hover .pic:after {
    opacity:1;
}
.download-list .name {
    color: #444;
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border-bottom: solid 1px #DFDDD3;
    padding: 10px 5px;
}
.download-list .box:hover .name {
    font-weight: bold;
}
@media screen and (max-width:1000px) {
    .download-list .item {
        width: 25%;
    }
}
@media screen and (max-width:640px) {
    .download-list .item {
        width: 33.33%;
    }
}
@media screen and (max-width:480px) {
    .download-list .item {
        width: 50%;
    }
}