@charset "utf-8";
/* CSS Document */

#download{ position: relative;z-index: 5; background: #fff; margin: 0 auto;}

#download .list{margin: 0 auto;}
#download .list>ul{margin: 0 auto;}
#download .list>ul>li{ position: relative; display: block; float: left;width: 48.5%; margin-bottom: 3%;background: #f5f5f5; padding: 20px; box-sizing: border-box; transition: all .35s; }
#download .list>ul>li{display: block;zoom: 1; }
#download .list>ul>li:before, #download .list>ul>li:after { content: ""; display: table; }
#download .list>ul>li:after { clear: both; }
#download .list>ul>li:nth-child(even){float: right;}
#download .list>ul>li>.img{ width: 20%; text-align: left;overflow: hidden;}
#download .list>ul>li>.img>img{width: 100%;height: auto;}
#download .list>ul>li>.con{ width: 60%; padding: 20px 30px; box-sizing: border-box;}
#download .list>ul>li>.con>.tit{font-size: 1.8rem; font-weight: 700; color: #333; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition: all .035s;}
#download .list>ul>li>.con>.size{ padding: 5px 0; font-size: 1.2rem;color: #999;}
#download .list>ul>li>.url{text-align: right;padding-top: 25px;}
#download .list>ul>li>.url>a{display: inline-block; border: 1px solid #ddd; background: #fff; border-radius: 3px;padding: 5px 10px; font-size: 1.4rem; color: #444;transition: all .35s; }
#download .list>ul>li>.url>a:hover{ border: 1px solid rgba(1,64,153,1); background: rgba(1,64,153,1); color: #fff;}
#download .list>ul>li:hover{ background: #eff8ff; transform: translateY(-8px); }


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

    #download .list>ul>li>.con{ padding: 12px 30px;}
    #download .list>ul>li>.url{padding-top: 20px;}

}

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

    #download .list>ul>li>.con{ padding: 10px 30px;}
    #download .list>ul>li>.con>.tit{font-size: 1.6rem;}
    #download .list>ul>li>.url{padding-top: 16px;}

}

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

    #download .list>ul>li>.con{ padding: 5px 30px;}
    #download .list>ul>li>.url{padding-top: 10px;}

}

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

    #download .list>ul>li>.img{width: 24%;}
    #download .list>ul>li>.con{ padding: 5px 25px;}
    #download .list>ul>li>.con>.tit{font-size: 1.4rem;}

}

@media only screen and (max-width: 860px){
    #download .list>ul>li{ float: none;width: 100%; }
    #download .list>ul>li:nth-child(even){float: none;}
    #download .list>ul>li>.con{ padding: 20px 30px;}
    #download .list>ul>li>.url{padding-top: 25px;}

}

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

    #download .list>ul>li>.con{ padding: 10px 30px;}
    #download .list>ul>li>.url{padding-top: 15px;}

}


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

    #download .list>ul>li>.img{ width: 20%;}
    #download .list>ul>li>.con{ padding: 0 10px;}
    #download .list>ul>li>.con>.size{ padding: 2px 0; font-size: 1.1rem;}
    #download .list>ul>li>.url{padding-top: 3px;}
    #download .list>ul>li>.url>a{padding: 3px 8px; font-size: 1.2rem;}


}