@charset "utf-8";


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

#download .title{ display: none; position: relative; text-align: center; margin: 0 auto;}
#download .title>h3{ position: relative;z-index: 20; font-size: 3.6rem; padding:30px 0 20px 0; font-weight: bold;}
#download .layout{margin: 0 auto; padding: 50px 0; }
#download .layout>.lists{margin: 0 auto; }
#download .layout>.lists>ul{margin: 0 auto;}
#download .layout>.lists>ul>li{ position: relative; z-index: 10; display: block; float: left; width: 22.75%; margin-right: 3%; margin-bottom: 3%; border: 1px solid #eee; box-sizing: border-box;padding: 25px; overflow: hidden; box-sizing: border-box; transition: all .35s;}
#download .layout>.lists>ul>li:nth-child(4n){ margin-right: 0;}
#download .layout>.lists>ul>li a{display: block; position: relative; text-align: left;}
#download .layout>.lists>ul>li a>.img{overflow: hidden;}
#download .layout>.lists>ul>li a>.img>img{transition: all 1s;}
#download .layout>.lists>ul>li a>.tit{ position: absolute;z-index: 12; top: -30%; left: 50%; width: 90%; transform: translateX(-50%); padding: 8px 0; text-align: center;font-size: 1.6rem;font-weight: bold;color: #fff; line-height:2rem; transition: all .5s; }
#download .layout>.lists>ul>li a>.tit>span{position: relative;z-index: 30;opacity: 0;  top: -30px; transition: all .5s;}
#download .layout>.lists>ul>li a>.tit:after{position: absolute;z-index: 1;left: 0;top: 0; opacity: 0; width: 100%;height: 100%; background: rgba(0,162,245,1); content: ''; transition: all .6s;}
#download .layout>.lists>ul>li a>.down{opacity: 0; position: absolute;z-index: 30; right: 10px; bottom: 10px; color: #00a2f5;}
#download .layout>.lists>ul>li a>.down>i{font-size: 3rem;font-weight: bold;}
#download .layout>.lists>ul>li:hover{ box-shadow: 8px 8px 20px rgba(0,0,0,.1);}
#download .layout>.lists>ul>li:hover a>.tit{top:3px;}
#download .layout>.lists>ul>li:hover a>.tit>span{opacity: 1;top: 0;}
#download .layout>.lists>ul>li:hover a>.tit:after{opacity: 1;}
#download .layout>.lists>ul>li:hover a>.down{ opacity: 1;}


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


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


}

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

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


}

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

    #download .layout>.lists>ul>li a>.tit{font-size: 1.4rem;}

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

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

    #download .layout>.lists>ul>li{ width: 100%;  float: none; margin-bottom: 30px;}
    #download .layout>.lists>ul>li:nth-child(even){float: none;}


}


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


    #download{padding: 60px 0;}

}