p{margin: 0;padding: 0}
.genre-top{width: 100%;background-color: #fafafa;overflow: hidden}
.genres{width: 1120px;margin: 32px auto;display: flex;flex-direction: row;align-items: center}
.genre-name{font-size: 22px;line-height: 22px;font-weight: 700;color: #ccc}
.genre-name-activity{color: #319FFF;}
.line{width: 1px;height: 14px;background-color: #eee;margin: 0 24px;}
.channels{width: 1100px;margin: 20px auto;}
.channel-title{width: 140px;font-size: 14px;font-weight: 500;line-height: 24px;color: #999;float: left}
.channel{height: 24px;font-size: 14px;font-weight: 400;line-height: 24px;color: #666;margin-right: 44px;margin-bottom: 16px;float: left}
.channel-activity{padding: 0 13px;background-color: #319FFF;border-radius: 18px;color: #fff;}
.channel-list{overflow: hidden}
.genre-content{width: 1120px;margin: 40px auto 0 auto;overflow: hidden}
.genre-item-box{width: 346px;height: 160px;float: left;margin-bottom: 32px;margin-right: 41px}
.genre-item-box:nth-child(3n){margin-right: 0}
.genre-content-item{width: 100%;height: 100%;}
.genre-item-image{float: left;position: relative;}
.genre-item-img{width: 120px;height: 160px;border-radius: 4px;}
.genre-item-info{position: relative;width: 206px;height: 100%;float: right;}
.genre-item-title{font-size: 16px;line-height: 19px;font-weight: 700;color: #333;}
.genre-item-label{font-size: 12px;line-height: 12px;font-weight: 400;color: #999;margin: 14px 0;}
.genre-item-desc{font-size: 12px;line-height: 18px;font-weight: 400;color: #999;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;}
.genre-item-num{position: absolute;bottom: 0;left: 0;font-size: 13px;line-height: 13px;color: #319FFF;}
.bottom-line{width: 1120px;height: 1px;background-color: #eee;margin: 0 auto 40px auto;}
.page{padding:25px 0;width:1200px;margin:0 auto;overflow:hidden;}
.previous{border:1px solid #666666;border-radius:25px;width:180px;height:50px;line-height:50px;color:#666666;
  font-size:14px;text-align:center;float:left;margin-left:410px;}
.next{border:1px solid #666666;border-radius:25px;width:180px;height:50px;line-height:50px;color:#666666;
  font-size:14px;text-align:center;float:left;margin-left:20px;}
.previous-icon{color:#666666;font-size:14px;margin-right:5px;}
.next-icon{color:#666666;font-size:14px;margin-left:5px;}
.un-click{border:1px solid #ccc;color:#ccc;}
.un-click-icon{color:#ccc;}
.earphone{position: absolute; left: 10px; bottom: 10px;}
/* 手机端CSS适配 */
@media only screen and (max-width:800px){
  #page-content{margin: 0;}
  .channels{width: 100%;margin-top:0;}
  .channel-title{display: none;}
  .channel-list{width: 100%;height: 52px;white-space: nowrap;display: flex;align-items: center;overflow-x: scroll;padding-left: 16px;border-bottom: 1px solid #eee;}
  .channel-list::-webkit-scrollbar {display:none}
  .genre-top{background-color: #fff;margin-top: 5px;}
  .genres{width: 100%;height: 48px;margin: 0;border-top: 1px solid #eee;border-bottom: 1px solid #eee;box-sizing: border-box;align-items: flex-end;}
  .genres{display: none}
  .genre-name{text-align: center;}
  .genre-name span{display: inline-block;height: 30px;font-size: 14px;}
  .genre-name-activity span{border-bottom: 4px solid #319FFF;}
  .channel-a{width: 50%;}
  .line{display: none;}
  .channel{margin-bottom: 0;margin-right: 28px;}
  .genre-content{width: 100%;margin: 0;}
  .genre-item-box{width: 100%;height: 117px;margin: 0;float: none;border-bottom: 1px solid #eee;display: block;display: flex;}
  .genre-content-item{display: flex;align-items: center;padding: 0 16px;box-sizing: border-box;}
  .genre-item-image{float: none;position: relative;}
  .genre-item-img{width: 64px;height: 85px;}
  .genre-item-info{width: auto;flex: 1;height: 85px;margin-left: 13px;}
  .genre-item-label{margin-top: 8px;}
  .page{width: 100%;display: flex;justify-content: center;align-items: center;padding-left: 20px;box-sizing: border-box;margin: 20px 0;}
  .previous{width: 100%;margin: 0 20px 0 0;float: none;flex: 1;}
  .next{width: 100%;float: none;margin: 0;}
  .page-btn-a{width: 45%;margin-right: 20px;}
  .bottom-line{display: none;}
  .earphone{position: absolute; left: 4px; bottom: 4px;width: 20px;}
  .genre-item-title{font-size: 16px;line-height: 120%;font-weight: 500;color: #333;}
  .genre-item-desc{-webkit-line-clamp:1;}
}