@charset "utf-8";

#download{margin: 0 auto;}
#download .wrap{margin: 0 auto; padding: 100px 0;}

#download .theme{ margin: 0 auto;}
#download .theme>.title{display: block; text-align: left; margin: 0 auto;}
#download .theme>.title>h3{ position: relative; padding-bottom: 20px; display: block; font-size: 3.2rem; color: #333;}
#download .theme>.intro{ width: 70%; margin: 0 auto; padding: 30px 0; text-align: center;font-size: 1.6rem; color: rgba(255,255,255,.5); line-height: 2.4rem;}

#download .container{margin: 0 auto; padding: 50px 0;}
#download .container>.lists{ margin: 0 auto;}
#download .container>.lists>ul{margin: 0 auto;}
#download .container>.lists>ul>li{ position: relative; display: flex; align-items: center;align-content: center;justify-content: flex-start; margin-bottom: 3%; background: #fff;  border: 1px solid #eee; box-sizing: border-box;padding: 20px; transition: all .35s; }
#download .container>.lists>ul>li>.info{width: 90%;display: inline-flex; align-items: center;align-content: center; justify-content: space-between; }
#download .container>.lists>ul>li>.info>.title{display: inline-flex; align-content: center;align-items: center;justify-content: flex-start; width:70%; padding-right: 10%; box-sizing: border-box; text-align: left; }
#download .container>.lists>ul>li>.info>.title>a{display: inline-flex;align-content: center;align-items: center;justify-content: flex-start; }
#download .container>.lists>ul>li>.info>.title>a>i{ display: inline-block; margin-right: 10px; font-size: 3.6rem; color: #cc151e;}
#download .container>.lists>ul>li>.info>.title>a>span{display: inline-block; font-size: 2rem; font-weight: bold; color: #333; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;transition: all .35s;}
#download .container>.lists>ul>li>.info>.intro{display: inline-flex; width: 30%;align-items: center;align-content: center; justify-content: flex-start;text-align: left; color: #999; font-size: 1.4rem;  }
#download .container>.lists>ul>li>.info>.intro .size{ display: inline-block; width: 50%; }
#download .container>.lists>ul>li>.info>.intro .time{ display: inline-block; width: 50%;}
#download .container>.lists>ul>li>.down{ width: 10%; display:inline-flex; align-content: center; align-items: center;justify-content: flex-end;}
#download .container>.lists>ul>li>.down>a{display: inline-flex; align-items: center;align-content: center;justify-content: center; color: #fff; width: 36px; height:36px; background: #281b6e; border-radius: 100%;overflow: hidden; transition: all .35s; }
#download .container>.lists>ul>li>.down>a>i{display: inline-block; font-size: 2rem;}
#download .container>.lists>ul>li:hover{box-shadow: 0 2px 16px rgba(40,27,110,.3);}
#download .container>.lists>ul>li>.down>a:hover{ background: #cc151e; }



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

    #download .container>.lists>ul>li>.info>.title>a>span{font-size: 1.8rem;}

}


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

    #download .theme>.title>h3 { font-size: 2.4rem;}

    #download .container>.lists>ul>li>.info>.title>a>span{font-size: 1.6rem;}


    #download .container>.lists>ul>li>.info>.intro{  font-size: 1.2rem; }


}

@media only screen and (max-width: 720px){
    #download .container>.lists>ul>li>.info{display: inline-block;}
    #download .container>.lists>ul>li>.info>.title{display: block; width: 95%;}
    #download .container>.lists>ul>li>.info>.title>a>i{ float: left; font-size: 4rem;}
    #download .container>.lists>ul>li>.info>.title>a>span{ float: left; width: 86%; line-height: 3rem;}
    #download .container>.lists>ul>li>.info>.intro{ display: block; width: 100%; box-sizing: border-box;padding-left: 50px; }
    #download .container>.lists>ul>li>.info>.intro .size{float: left; width: auto; padding-right: 20px;}
    #download .container>.lists>ul>li>.info>.intro .time{float: left; width: auto;}
}

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

    #download .wrap{padding: 50px 0;}

    #download .theme>.title>h3 { font-size: 2rem;}

    #download .container>.lists>ul>li>.info{width: 80%;}
    #download .container>.lists>ul>li>.info>.title>a>i{ font-size: 3rem;}
    #download .container>.lists>ul>li>.info>.intro{ padding-left: 40px; }
    #download .container>.lists>ul>li>.down{ width: 20%;}

}

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

    #download .container>.lists>ul>li>.info>.title{padding-right: 0;}
    #download .container>.lists>ul>li>.info>.title>a>span{ width: 76%;}

}