#download{ margin: 0 auto;}

#download>.display{margin: 100px auto;}
#download>.display .lists{ margin: 0 auto;}
#download>.display .lists>ul{margin: 0 auto;}
#download>.display .lists>ul>li{display: block;float: left;width:22.75%; margin-right: 3%; margin-bottom: 3%; background: #fff; position: relative; box-sizing: border-box; transition: all .35s; }
#download>.display .lists>ul>li:nth-child(4n){ margin-right: 0}
#download>.display .lists>ul>li .img{text-align: center;}
#download>.display .lists>ul>li .img>img{width: 100%;height: auto;}
#download>.display .lists>ul>li .box{ position: relative; padding: 30px; text-align: left;}
#download>.display .lists>ul>li .box>.title{font-size: 2rem;font-weight: bold;color: #333; padding-bottom: 10px;overflow: hidden; text-overflow:ellipsis; white-space: nowrap; transition: all .35s;}
#download>.display .lists>ul>li .box>.size{font-size: 1.4rem;color: #999;transition: all .35s;}
#download>.display .lists>ul>li .url{ position: absolute;z-index: 10; right: 20px;bottom: 20px;}
#download>.display .lists>ul>li .url>a{display: inline-block; color: #42a73f; width: 50px;height: 50px; line-height: 50px; border-radius: 100%; text-align: center; transition: all .35s;}
#download>.display .lists>ul>li .url>a i{font-size:3rem;}
#download>.display .lists>ul>li:hover{box-shadow: 4px 3px 20px rgba(0,0,0,.1);}
#download>.display .lists>ul>li:hover .box>.title{ color: #42a73f;}
#download>.display .lists>ul>li .url>a:hover{ background: #42a73f; color: #fff;box-shadow: 4px 3px 20px rgba(0,0,0,.1);}



@media only screen and (max-width: 1200px){

    #download>.display .lists>ul>li .box>.title{font-size: 1.8rem;}
    #download>.display .lists>ul>li .box>.size{font-size: 1.3rem;}

}


@media only screen and (max-width: 1080px){

    #download>.display .lists>ul>li{width:31.33%; }
    #download>.display .lists>ul>li:nth-child(4n){ margin-right: 3%;}
    #download>.display .lists>ul>li:nth-child(3n){ margin-right: 0}

}


@media only screen and (max-width: 860px){

    #download>.display .lists>ul>li{ width: 48%; margin-right: 0;}
    #download>.display .lists>ul>li:nth-child(4n){ margin-right: 0;}
    #download>.display .lists>ul>li:nth-child(even){float: right;}



}


@media only screen and (max-width: 640px){

    #download>.display{ margin: 0 auto; padding: 30px 0;}

    #download>.display .lists>ul>li .box{padding: 15px;}
    #download>.display .lists>ul>li .box>.title{font-size: 1.6rem;}
    #download>.display .lists>ul>li .box>.size{font-size: 1.2rem;}

}


@media only screen and (max-width: 420px){

    #download>.display .lists>ul>li .box>.title{font-size: 1.4rem;}

    #download>.display .lists>ul>li .url{  right: 10px;bottom: 10px;}
    #download>.display .lists>ul>li .url>a{width: 36px;height: 36px; line-height: 36px;}
    #download>.display .lists>ul>li .url>a i{font-size:2rem;}

}