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


#download{margin: 0 auto; padding: 30px 0;}
#download>.title{ text-align: center; margin: 0 auto;padding: 50px 0;}
#download>.title>h3{ font-size: 4rem; font-weight: normal; color: #333; margin: 0 auto;}

#download>.display{margin: 0 auto; padding: 50px 10px 0px 10px;}
#download>.display .list>ul>li{ position: relative; display: block;float: left; width: 48.5%; box-sizing: border-box; background: #f2f9fc;text-align: left; margin-bottom: 3%; overflow: hidden; transition: all .35s; }
#download>.display .list>ul>li:nth-child(even){ float: right; }
#download>.display .list>ul>li>.box{ position: relative; text-align: left; padding: 50px;}
#download>.display .list>ul>li>.box>.tit{font-size: 2.4rem; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition: all .35s;}
#download>.display .list>ul>li>.box>.txt{ padding-top: 10px; font-size: 1.4rem; color: #999; transition: all .35s;}
#download>.display .list>ul>li>.box>.txt>i{margin-right: 5px;}
#download>.display .list>ul>li>.url{position: absolute;z-index: 20; right: 50px; bottom: 30px; transition: all .35s;}
#download>.display .list>ul>li>.url>a{ color: rgba(0,64,151,1); transition: all .35s;}
#download>.display .list>ul>li>.url>a>i{font-size: 6rem;}


#download>.display .list>ul>li:hover{ background: #004097;}
#download>.display .list>ul>li:hover .tit{color: rgba(255,255,255,1);}
#download>.display .list>ul>li:hover .txt{color: rgba(255,255,255,.6);}
#download>.display .list>ul>li:hover i{color: rgba(255,255,255,1);}

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

    #download>.display .list>ul>li>.box>.tit{font-size: 2.2rem;}

}




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

    #download>.display .list>ul>li>.box>.tit{font-size: 2rem;}



}

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

    #download>.display .list>ul>li>.box{padding: 30px;}
    #download>.display .list>ul>li>.box>.tit{font-size: 2rem;}

    #download>.display .list>ul>li>.url{right: 30px;}
    #download>.display .list>ul>li>.url>a>i{font-size: 3rem;}



}

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

    #download{padding: 30px 0;}
    #download>.title{padding: 10px 0;}
    #download>.title>h3{ font-size: 3.2rem;}

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

}


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

    #download>.display .list>ul>li{float: none; width:100%; }
    #download>.display .list>ul>li>.box>.tit{font-size: 1.8rem;}

}




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

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

    #download>.display .list>ul>li>.box>.txt{line-height: 2rem; font-size: 1.4rem;}
    #download>.display .list>ul>li>.box>.txt>i{ margin-right: 4px;}


}

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

    #download>.title>h3{ font-size: 2.4rem;}
    #download>.display{padding:30px 0;}


}