.topics-page{
  width:1200px;
  margin:0 auto
}
.topics-page .top{
  height:50px;
  line-height:50px;
}


.topics-page .cont{
  margin:10px 0 0 0;
  background: #fff;
  border-radius: 15px;
  padding:20px;
}
.topics-page .cont .list{
  flex-wrap:wrap;
  justify-content: space-evenly;
  margin:20px 0 0 0;
}

.topics-page .cont .list div{
  margin-bottom: 22px;
  width: 366px;
  box-shadow: 0px 4px 5px #f0f0f1;
  border: 1px solid transparent;
  border-radius: 8px;
  overflow: hidden;
}
.topics-page .cont .list div.hide{visibility: hidden;}

.topics-page .cont .list div img{
  width:366px;
  height:180px;
  margin:-20px 0 0 0;
}

.topics-page .cont .list a{
  border:1px transparent solid;
  flex-direction: column;
  border-radius: 8px;
}

.topics-page .cont .list a b{
  width:146px;
  z-index:9;
  margin:0 0 0 220px;
  height:20px;
  font-size:1px;
  background:#ccc;
  background-color: rgba(204, 204, 204, 0.8);
  text-align: center;
  border-bottom-left-radius: 8px;
  border-top-right-radius: 8px;
}
.topics-page .cont .list a span{
  height:25px;
  line-height:25px;
  font-size: 16px;
  text-align: center;
  margin:5px 0;
}
.topics-page .cont .list a p{
  height:60px;
  line-height:20px;
  padding:0 10px;
  font-size:13px;
  text-indent: 10px;
  color:#666;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 这里是超出几行省略 */
}
.topics-page .cont .list a:hover{
  border: 1px #28c16a solid;
  color:#444;
  background:#eaf8f0;
}
.topics-page .cont .list a:hover span{color:#28c16a}