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

#download{ position:relative; width:100%; margin:0 auto; padding:120px 0 60px 0;}
#download>.title{ position:relative; width:86%; max-width:1300px; margin:0 auto; font-size: 30px;color: #333; text-align:center;font-weight: 600;}
#download>.title:after{position:absolute;z-index:3;left:50%;bottom:-10px; margin-left:-25px; width:50px;height:2px; background:#026ab5;content:'';}
#download>.container{width:86%; max-width:1300px;margin:0 auto; padding:40px 0;}
#download .list, #download .list>ul{margin:0 auto;padding:0;}
#download .list>ul>li{position:relative; display:block; float:left; width:48%; margin-bottom:2%; box-sizing:border-box;background:#fff;box-shadow: 0 3px 5px rgba(0,0,0,.1); transition:all .35s;}
#download .list>ul>li:after{ position:absolute;z-index:5; right:10px; bottom:10px; width:45px; height:45px; background: url("../img/icon_download_grey.png") no-repeat; background-position:50% 50%; background-size:100% auto; content:''; transition:all .35s;}
#download .list>ul>li:before{position:absolute;z-index:8;left:0;top:0;width:6px;height:0;background:#022347;content:''; transition:all .35s;}
#download .list>ul>li:nth-child(even){ float:right;}
#download .list>ul>li>a{ position:relative; display:block; text-align:left; box-sizing:border-box;padding:50px;}
#download .list>ul>li>a>.tit{font-size:18px; color:#333; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
#download .list>ul>li>a>.code{padding:8px 0 0 0; font-size:14px; color:#026ab5; transition:all .35s; font-style: italic;}
#download .list>ul>li>a>.time{padding:12px 0; font-size:14px; color:#ccc; transition:all .35s;}
#download .list>ul>li:hover{background:#026ab5;transform:translateY(-3px);box-shadow:0 2px 10px rgba(0,0,0,.1);}
#download .list>ul>li:hover:after{ background:url("../img/icon_download_white.png") no-repeat; background-position:50% 50%; background-size:100% auto;}
#download .list>ul>li:hover:before{ height:100%;}
#download .list>ul>li:hover .tit{color:#fff;padding-left:10px;}
#download .list>ul>li:hover .code{color:rgba(255,255,255,.5); padding-left:10px;}
#download .list>ul>li:hover .time{color:rgba(255,255,255,.5); padding-left:10px;}
#download .list>ul>li:hover{box-shadow:0 2px 10px rgba(0,0,0,.1);}
#download .loadmore{ width:85%;max-width:1480px; padding:50px 0;margin:0 auto;text-align:center;}
#download .loadmore>a{display:inline-block; padding:12px 90px; font-size:18px; color:#1c73c5; border:1px solid #1c73c5; border-radius:50px; transition:all .35s;}
#download .loadmore>a:hover{ background:#1c73c5; border:1px solid #1c73c5; color:#fff;}


@media only screen and (max-width: 1280px){
  #download .list>ul>li>a>.tit{font-size:17px;}
  #download .list>ul>li:after{ width:40px; height:40px;}
}
@media only screen and (max-width: 1080px){
  #download .list>ul>li{width:100%; float:none; margin-bottom:5%;}
  #download .list>ul>li:nth-child(even){ float:none;}
}
@media only screen and (max-width: 640px){
  #download{ padding:60px 0;}
  #download>.title{padding:10px 0; font-size:20px;}

}