a,aside,body,div,footer,html,i,img,li,nav,p,section,ul{
  padding:0;
  margin:0
}
li{
  list-style:none
}
a{
  text-decoration:none
}
body{
  font-size:12px;
  color:#4d4d4d;
  font-family:Helvetica Neue,Microsoft Yahei
}
.container,.main,body{
  background:#f3f6f8
}
.iconfont{
  color:#6b7386;
  padding-right:4px
}
.container .left-bar{
  position:fixed;
  padding:0 20px;
  background:#30333c;
  color:#6b7386;
  box-sizing:border-box;
  flex-direction:column;
  height:100vh;
  display:flex;
  width:248px;
  transition:all .5s
}
.container .main{
  position:relative;
  display:flex;
  flex-direction:column;
  -webkit-box-orient:vertical;
  margin-left:248px
}
.container .main .iconfont{
  font-size:18px;
  color:#000
}
.set-scroll{
  background-color:#494f5e;
  border-radius:0;
  width:4px}
.left-bar .title{
  color:#fff;
  font-size:18px;
  height:50px;
  line-height:50px
}
.left-bar .title p{
  text-align:center
}
.left-bar .nav{
  flex:1;
  -webkit-box-flex:1;
  flex-grow:1
}
.left-bar .nav .item{
  height:48px;
  line-height:46px;
  border-top:2px solid rgba(255,255,255,.04);
  border-bottom:2px solid rgba(255,255,255,.04)
}
.left-bar .nav>.active{
  position:relative
}
.left-bar .nav>.active .line{
  position:absolute;
  right:0;
  height:30px;
  width:3px;
  background:#3a85ff;
  z-index:100000;
  margin-top:10px
}
.left-bar .nav-item{
  min-height:100vh;
  overflow-y:scroll
}
.left-bar .nav-item::-webkit-scrollbar-track{
  background-color:#494f5e;
  border-radius:0;
  width:4px
}
.left-bar .nav-item::-webkit-scrollbar-thumb{
  background-color:#494f5e;
  border-radius:0;
  width:4px
}
.left-bar .nav-item::-webkit-scrollbar{
  background-color:#494f5e;
  border-radius:0;
  width:4px
}
.left-bar .nav-item li{
  padding-left:20px;
  height:32px;
  line-height:32px
}
.left-bar .nav-item li:hover a,
.left-bar .nav-item li:hover i,
.left-bar .nav-item li>.active,
.left-bar .nav-item li>.active i{
  color:#fff
}
.left-bar .nav-item li a{
  text-decoration:none;
  font-size:12px;
  display:inline-block;
  width:100%;
  color:#6b7386
}
.nav .item a{
  color:#fff
}
.nav .comment{
  position:fixed;
  z-index:100;
  bottom:1px;
  width:200px;
  background:#30333c
}
.main #mainContent{
  max-width:2400px
}
.main .box{
  overflow:hidden;
  margin:20px 30px;
  background:#fff;
  padding-bottom:20px
}
.main .box .sub-category>div{
  padding:12px 0 0 2.1%;
  font-size:18px
}
.main .box .item{
  width:250px;
  border:1px solid #e4ecf3;
  box-shadow:1px 2px 3px #f2f6f8;
  border-radius:6px;
  background:#fff;
  padding:10px;
  min-width:200px;
  margin:22px 0 0 2.1%;
  float:left;
  overflow:hidden;
  transition:all .3s
}
.main .box .item:hover{
  transform:translateY(-5px)
}
.main .box .item .no-logo{
  color:#3273dc;
  font-weight:700;
  font-size:14px
}
.main .box .item .logo{
  height:40px;
  position:relative;
  font-size:14px;
  font-weight:700;
  color:#3273dc;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:0 .1rem
}
.main .box .item .logo img{
  width:40px;
  height:40px;
  border-radius:50%;
  vertical-align:middle
}
.main .box .item .desc{
  color:gray;
  font-size:12px;
  padding-top:10px;
  height:35px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical
}
.footer{
  width:100%;
  bottom:0;
  line-height:45px;
  background:#fff;
  box-shadow:0 0 1rem rgba(0,0,0,.2)
}
.footer .copyright{
  margin-left:30px;
  color:#949494;
  font-size:12px
}
.footer .copyright a{
  text-decoration:none;
  color:#3a85ff
}
#menu-box{
  display:none;width:100%;
  background:#fff;
  text-align:right;
  position:sticky;
  top:0;
  z-index:2;
  box-shadow:1px 1px 8px #e0ddf;
  height:50px
}
#menu-box #menu{
  height:50px;
  width:40px;
  position:absolute;
  right:10px
}
#menu-box #menu *{
  transition:all .3s;
  -webkit-transition:all .3s;
  box-sizing:border-box
}
#menu-box #menu input[type=checkbox]{
  display:none
}
#menu-box #menu input[type=checkbox]:checked~.menu-spin>.horizontal{
  opacity:0
}
#menu-box #menu input[type=checkbox]:checked~.menu-spin>.line-1{
  transform:rotate(405deg);
  -webkit-transform:rotate(405deg);
  margin-top:10px
}
#menu-box #menu input[type=checkbox]:checked~.menu-spin>.line-2{
  transform:rotate(-405deg);
  -webkit-transform:rotate(-405deg);
  margin-top:-10px
}
#menu-box #menu label{
  cursor:pointer;
  position:absolute;
  z-index:99;height:100%;
  width:100%;top:10px;
  left:0
}
#menu-box #menu label .line{
  position:absolute;
  height:4px;
  width:100%;
  background-color:#a2a2a2}#menu-box #menu label .horizontal{
    top:10px
}
#menu-box #menu label .line-2{
  top:20px
}
.download a,
.download i{
 color:#3668bd!important
}
#fixedBar{
  padding:10px;
  background:#fff;
  width:25px;
  height:25px;
  position:fixed;
  right:10px;
  bottom:30px;
  z-index:9999;
  box-shadow:0 0 20 #eee;
  box-shadow:0 0 20px #ccc;
  cursor:pointer;
  display:none
}
#fixedBar svg{
  color:#9e9e9e
}
@media screen and (max-width:481px){
  .container .box .item{
    width:39%;
    min-width:100px
  }
  .container .main{
    margin-left:0
  }
  .container .left-bar{
    z-index:999;
    left:-249px
  }
  #menu-box{
    display:block
  }
}
@media screen and (min-width:481px){
  .container .left-bar{
    left:0
  }
}
@media screen and (min-width:482px) and (max-width:789px){
  .container .box .item{
    width:90%
  }
  .container .left-bar{
    left:0
  }
}
@media screen and (min-width:790px) and (max-width:1039px){
  .container .box .item{
    width:43%
  }
}
@media screen and (min-width:1040px) and (max-width:1920px){
  .container .box .item{
    width:16.3%
  }
}
#supersearch{
  position:inherit;
  top:25px;
  left:10%;
  float:left;
  margin: 0 auto;
  width:60%;
  /*height:35px;*/
  font-size:15px;
  padding: 10px 5px;
}
#search-btn{
  background-color: #2c2e2f;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  height:100%;
  border-radius: 15px;
}
#search-wd {
  background: rgba(255,255,255,0);
  border-style: solid;
  border-color: rgba(0,0,0,.3);
  border-radius: 15px;
  width: 30%;
}
#search-box{
	overflow: hidden;
    margin: 20px 30px;
    background: #fff;
}
.weather { 
  background: url(../images/weather_bg2.jpg) no-repeat;width:230px; 
  height: 230px; 
  color:gray;
}