@charset "utf-8";

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

#download .display{margin: 0 auto;position: relative;}
#download .display .layout{margin: 0 auto;}
#download .display .layout>.layout-box-left{ position: relative; z-index: 90; width: 20%; max-width: 240px; box-sizing: border-box; text-align: left;}
#download .display .layout>.layout-box-left>.theme{ font-size: 3rem; font-weight: bold; color: #333;}
#download .display .layout>.layout-box-left>.search{ position: relative;z-index: 80; display: inline-flex; align-content: center;align-items: center; width: 100%; border-bottom: 1px solid #ddd;padding: 30px 0;}
#download .display .layout>.layout-box-left>.search .form{ display: inline-flex; justify-content: space-between; align-items: center;align-content: center; width: 100%; height: 40px;margin: 0 auto; border: 1px solid #ddd; border-radius: 10px;}
#download .display .layout>.layout-box-left>.search .form>input{ display: inline-block; width:80%; height:40px; background:none; padding:0 16px; color: #333; box-sizing:border-box; font-size:1.6rem; flex: 1; border: 0;}
#download .display .layout>.layout-box-left>.search .form>input::placeholder{color:#aaa; font-size: 1.4rem; font-weight:200;}
#download .display .layout>.layout-box-left>.search .form>a{ display: inline-block; width:20%; text-align:center; transition:all .2s;}
#download .display .layout>.layout-box-left>.search .form>a.go>i{ display: inline-block;vertical-align: middle; font-size:2.4rem; color: #0758ab; margin-right: 6px;}
#download .display .layout>.layout-box-left>.search .form>a.go>i:hover{ color: #0758ab;}
#download .display .layout>.layout-box-left>.types{position: relative; margin: 0 auto; padding: 30px 0;}
#download .display .layout>.layout-box-left>.types>.title{ font-size: 2rem; font-weight: bold; color: #333;}
#download .display .layout>.layout-box-left>.types>.box{padding: 20px 0;text-align: left;}
#download .display .layout>.layout-box-left>.types>.box>a{ position: relative; display: block; font-size: 1.5rem; color: #666; margin: 14px auto; box-sizing: border-box;padding-left: 25px; transition: all .35s;}
#download .display .layout>.layout-box-left>.types>.box>a:after{position: absolute;z-index: 12; left: 0; top:1px; width: 16px;height: 16px; border-radius: 100%; border: 1px solid #ccc; display: flex; align-items: center; align-content: center; justify-content: center; font-family: iconfont; font-size: 1.2rem; font-weight: bold; color: #fff; content: '\e632'; transition: all .35s;}
#download .display .layout>.layout-box-left>.types>.box>a:hover{color: #0758ab;}
#download .display .layout>.layout-box-left>.types>.box>a:hover:after{ color: rgba(7,88,171,.8); border-color: rgba(7, 88, 171, .5);}
#download .display .layout>.layout-box-left>.types>.box>a.active{color: #0758ab;}
#download .display .layout>.layout-box-left>.types>.box>a.active:after{background: #0758ab; color: #fff; border-color: #0758ab;}
#download .display .layout>.layout-box-left>.close{display: none;}
#download .display .layout>.layout-box-left.on{position: fixed; top: 16%; left: 8%;}


#download .display .layout>.layout-box-right{position: relative;z-index: 0; width: 78%; padding-left: 6%; box-sizing: border-box; border-left: 1px solid #e6e6e6;}
#download .display .layout>.layout-box-right>.recordcount{ display: flex; align-items: center; align-content: center; padding-bottom: 20px; font-size: 1.6rem; color: #333; margin: 0 auto;}
#download .display .layout>.layout-box-right>.recordcount>.text{display: inline-block; margin-right: 10px;}
#download .display .layout>.layout-box-right>.recordcount>.text>b{color: #0758ab;display: inline-block; text-decoration: underline;}
#download .display .layout>.layout-box-right>.recordcount>.text>span{display: inline-block; padding: 0 5px; color: #e63668;}
#download .display .layout>.layout-box-right>.recordcount>a{display: inline-flex; align-content: center; align-items: center;color: #fff; background: #0758ab; padding: 5px 10px; border-radius: 3px; transition: all .35s;}
#download .display .layout>.layout-box-right>.recordcount>a>i{ display: inline-block; font-size: 1.7rem; margin-right: 5px;}
#download .display .layout>.layout-box-right>.recordcount>a>span{display: inline-block;font-size: 1.4rem; }
#download .display .layout>.layout-box-right>.recordcount>a:hover{background: #333;}
#download .display .layout>.layout-box-right>.lists{margin: 0 auto;}
#download .display .layout>.layout-box-right>.lists>ul{margin: 0 auto;}
#download .display .layout>.layout-box-right>.lists>ul>li{ position: relative; display: block; border-radius: 10px; box-sizing: border-box; margin-bottom: 30px; text-align: left; background: #fff; transition: all .35s;}
#download .display .layout>.layout-box-right>.lists>ul>li>a{display: block; position: relative; padding: 40px 85px;}
#download .display .layout>.layout-box-right>.lists>ul>li>a:after{position: absolute;z-index: 12; right: 40px;top:50px; font-family: iconfont; font-size: 1.8rem; color: #999; content: '\e683'; transition: all .35s; }
#download .display .layout>.layout-box-right>.lists>ul>li>a .title{ position: relative; display: block; padding-right: 20px; font-size: 2.4rem; line-height: 2.6rem; color: #333; transition: all .35s;}
#download .display .layout>.layout-box-right>.lists>ul>li>a .title:after{position: absolute;z-index: 12; left: -45px;top: 0; font-family: iconfont; font-size: 2.6rem; content: '\e601'; color: #f23f68;}
#download .display .layout>.layout-box-right>.lists>ul>li>a .info{display: flex; align-content: center; align-items: center; padding-top: 20px; }
#download .display .layout>.layout-box-right>.lists>ul>li>a .info>div{display: inline-block; font-size: 1.5rem; color: #999; margin-right: 15px;}
#download .display .layout>.layout-box-right>.lists>ul>li:hover{box-shadow: 0 6px 16px rgba(0,0,0,.062);}
#download .display .layout>.layout-box-right>.lists>ul>li:hover a:after{color: #0758ab;}
#download .display .layout>.layout-box-right>.lists>ul>li:hover a>.title{color: #0758ab;}
#download .display .layout>.layout-box-right>.lists>ul>li .searHeight{display: inline-block;font-style: normal; color: #0758ab; text-decoration: underline;}

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

    #download .display .layout>.layout-box-right{ width: 74%;}



}


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

    #download .display .layout>.layout-box-right{ width: 72%;}



}

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

    #download .display .layout>.layout-box-left>.theme{ font-size: 2.8rem; }

}


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

    #download .display .layout>.layout-box-left{ max-width: none; }
    #download .display .layout>.layout-box-left>.theme{ font-size: 2.6rem; }

    #download .display .layout>.layout-box-right>.lists>ul>li>a .title{ font-size: 2rem; line-height: 2.4rem;}


}

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

    #download .display .layout>.layout-box-left>.theme{ font-size: 2.4rem; }

}

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

    #download .display .layout>.layout-box-left{ width: 100%; float: none; margin-bottom: 30px; }
    #download .display .layout>.layout-box-left>.types>.title{ font-size: 1.8rem; }
    #download .display .layout>.layout-box-left.on{ background: #f2f8ff; top: 100px; left: 0; box-shadow: 0 2px 16px rgba(0,0,0,.1); box-sizing: border-box;padding: 30px 4% 0 4%;}
    #download .display .layout>.layout-box-left.on .search .form{background: #fff;}
    #download .display .layout>.layout-box-left>.search .form>a{  width: 60px;}
    #download .display .layout>.layout-box-left>.close{ display: none; position: absolute;z-index: 12; right: 4%; bottom: 20px;cursor: pointer;}
    #download .display .layout>.layout-box-left>.close>i{color: #0758ab;font-size: 2.4rem;}
    #download .display .layout>.layout-box-right{ width: 100%; border: 0; padding: 0; float: none;}
    #download .display .layout>.layout-box-left.on>.close{display: block;}



}

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

    #download .display .layout>.layout-box-left>.theme{ font-size: 2.4rem;}
    #download .display .layout>.layout-box-left>.types>.title { font-size: 1.6rem;}
    #download .display .layout>.layout-box-left>.types>.box>a { font-size: 1.4rem; }
    #download .display .layout>.layout-box-left>.types>.box>a:after { top: 0; }


    #download .display .layout>.layout-box-right>.lists>ul>li>a .title {  font-size: 1.8rem;line-height: 2rem; }
    #download .display .layout>.layout-box-right>.lists>ul>li>a .info>div {  font-size: 1.4rem; }

}

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

    #download .display .layout>.layout-box-left>.theme{ font-size: 2rem;}
    #download .display .layout>.layout-box-right>.lists>ul>li>a .title {  font-size: 1.6rem; }

}

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

    #download{padding: 50px 0; }

    #download .display .layout>.layout-box-left>.search { padding: 15px 0;}
    #download .display .layout>.layout-box-left>.types { padding: 15px 0;}
    #download .display .layout>.layout-box-left>.types>.box { padding: 10px 0; }
    #download .display .layout>.layout-box-left>.types>.box>a:after {  width: 14px; height: 14px; }


    #download .display .layout>.layout-box-right>.lists>ul>li>a{padding: 40px 60px;}
    #download .display .layout>.layout-box-right>.lists>ul>li>a:after{top:auto; right: 20px; bottom: 20px; }
    #download .display .layout>.layout-box-right>.lists>ul>li>a .title{padding-right: 0;}
    #download .display .layout>.layout-box-right>.lists>ul>li>a .info>div{font-size: 1.2rem; margin-right: 10px;}











}