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

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

#download>.display{margin: 0 auto; padding: 50px 0;}
#download>.display .list>ul>li{ position: relative; display: block;float: left; width: 48.5%; box-sizing: border-box; background: #f2fafb;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(4,91,169,1); transition: all .35s;}
#download>.display .list>ul>li>.url>a>i{font-size: 4rem;}

#download>.display .list>ul>li:hover{ background: #6ab9be;}
#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);}

@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; }
}