.download ul{
    margin: 0px; padding: 0px;
}

.download a{
    display: block;
    text-decoration: none;

    color: #000000;
    /*background-color: #4553ff;*/

    transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -webkit-transition: background-color .5s ease-out;
}

.download a:hover{
    background-color: red;
    color: white;

    transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
    -webkit-transition: background-color .5s ease-out;
}

.download ul li{
    display:block; float: left;
    /*border: 1px solid #B9B5B5;*/

    width: 23.8%;

    text-align: center;

    margin: 0.5%;
}

.download ul li img{
    width: 100%;
}

.download ul li span{
    font-family: 'cwTeXHei', serif;
    display: block;

    width: 94%;
    margin: 0 3% 0 3%;

    padding-top: 5px;

    border-top:red 2px solid;
    vertical-align: middle;
    font-size: 12px;
    /*padding: 0px;*/
    height: 24px;
}


@media (max-width: 1024px)
{
    .download ul li{
        display:block; float: left;
        /*border: 1px solid #B9B5B5;*/

        width: 31.8%;

        text-align: center;

        margin: 0.5%;
    }
}

@media (max-width: 620px)
{
    .download ul li{
        display:block; float: left;
        /*border: 1px solid #B9B5B5;*/

        width: 47.5%;

        text-align: center;

        margin: 1%;
    }
}

@media (max-width: 420px)
{
    .download ul li{
        display:block; float: left;
        border: 1px solid #B9B5B5;

        width: 98%;

        text-align: center;

        margin: 1%;
    }
}