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



#download{margin: 0 auto; padding: 150px 0;}
#download .title{ position: relative; text-align: center; margin: 0 auto;}
#download .title>h3{ position: relative;z-index: 20; font-size: 4rem; padding:30px 0 20px 0; font-weight: bold; color: #333;text-transform: uppercase;}
#download .title>h3:after{position: absolute;z-index: 1; left: 50%; bottom: 0;width:50px;height: 4px; background: #c7000c; transform: translateX(-50%); content: '';}
#download .title>h4{position: absolute;z-index: 1; left: 50%; top: 0; width: 100%; font-size: 6rem; color: #f3f3f3; transform: translateX(-50%); text-transform: uppercase;}
#download .layout{margin: 0 auto; padding: 100px 0; }
#download .layout>.lists{margin: 0 auto; }
#download .layout>.lists>ul{margin: 0 auto;}
#download .layout>.lists>ul>li{display: block;float: left;width:22.75%; margin-right: 3%; margin-bottom: 3%; position: relative; padding: 30px; border: 1px solid #eee; box-sizing: border-box; transition: all .35s; }
#download .layout>.lists>ul>li:nth-child(4n){margin-right: 0;}
#download .layout>.lists>ul>li .box{ margin: 0 auto; text-align: center; border-bottom: 1px solid #eee; padding: 20px 0;}
#download .layout>.lists>ul>li .box>.icon{ text-align: center; padding-bottom: 20px; }
#download .layout>.lists>ul>li .box>.icon img{width: 80px; height: auto;}
#download .layout>.lists>ul>li .box>.tit{font-size:2.2rem; font-weight: bold; color: #333; text-overflow:ellipsis; white-space: nowrap; overflow: hidden; transition: all .35s;}
#download .layout>.lists>ul>li .box>.size{font-size: 1.4rem;color: #999; padding-top: 10px;}
#download .layout>.lists>ul>li .url{text-align: center; padding-top: 20px;}
#download .layout>.lists>ul>li .url>a{display: inline-block; border: 1px solid #c7000c; color: #c7000c; font-size: 1.4rem; border-radius: 30px; padding: 3px 15px; margin: 0 5px; transition: all .35s;}
#download .layout>.lists>ul>li .url>a.preview{background: #c7000c;color: #fff;}
#download .layout>.lists>ul>li .url>a i{display: inline-block;vertical-align: middle; transition: all .35s;}
#download .layout>.lists>ul>li .url>a span{display: inline-block; vertical-align: middle; transition: all .35s;}
#download .layout>.lists>ul>li:hover{box-shadow: 4px 3px 20px rgba(0,0,0,.16);}
#download .layout>.lists>ul>li .url>a:hover{background: #c7000c; color: #fff;}
#download .layout>.lists>ul>li .url>a.preview:hover{background: #666; border-color: #666;}


@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;}
    #download .layout>.lists>ul>li .tit{font-size:1.4rem;}



}


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

    #download .title>h3{ font-size: 3.2rem;}
    #download .title>h4{font-size: 4.5rem;}

    #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(3n){margin-right: 0;}

    #download .layout>.lists>ul>li:nth-child(even){float: right;}


}


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

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

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

}

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

    #download .layout{ padding: 50px 0; }
    #download .layout>.lists>ul>li .box>.size{font-size: 1.2rem;}


}


@media only screen and (max-width:520px) {
    #download{ padding: 60px 0;}
    #download .title>h3{ font-size: 2.4rem; padding: 15px 0;}
    #download .title>h4{font-size: 2.4rem;}

    #download .layout>.lists>ul>li{display: block;float: none!important;width:100%; margin-right: 0;  height: auto; padding-bottom: 30px; }



}