.channel{
  width: 780px;
  border: 1px solid #000;
  background: #eee;
}
.channels-type { display: block; margin: 0 0 40px 0;}
.channels-type:after { display: block; clear: both; height: 0; content: ''; }
.channels-type li { display: block; float: left; text-align: center; width: 89px; margin:0 0 0 10px; background: #1aa2e3; color: #fff;}
.channels-type li { cursor: pointer;}
.channels-type li:first-child { margin-left:0;}
.channels-type li.current { background: #fbf500; color: #1aa2e3;}
.channels-type li > div { display: table-cell; width: 98px; height: 60px; vertical-align: middle; line-height: 1.4;}

@media screen and (max-width: 768px) {
.channels-type li { display: block; float: left; text-align: center; width: 48%; margin:1%; background: #1aa2e3; color: #fff;}
.channels-type li:first-child { margin:1%;}
.channels-type li > div br {display: none;}
.channels-type li > div { display: block; width: 100%; height: auto; font-size: 1.2rem; padding: 15px 0 15px 0; vertical-align: middle; line-height: 1.4;}
}

.channels-list { margin: 0 0 0 -10px;}
.channels-list > div { width: auto;}

.channels-list > div:after { display: block; clear: both; height: 0; content: ''; }
.channels-list .item { float: left; margin: 0 0 8px 14.5px; height: 150px; display: block; overflow: hidden;}
.channels-list .item-inner { position: relative; width: 98px; height: 98px; padding: 13px 0; border: 1px solid #ddd; margin: 0 auto; text-decoration: none;}

.channels-list .item-inner:hover { border: 1px solid #ccc;}
.channels-list .item { cursor: pointer;}
.channels-list span.item { cursor: default;}
.channels-list .item .img { width: 72px; margin: 0 auto;}
.channels-list .item img { width: 100%;}
.channels-list .item .mark { display: none;position: absolute; top: 0px; left: 0px; font-size: 10px; padding:1px 5px; background: #1aa2e3; color: #fff;}
.channels-list .item .name { display: block; width: 98px; font-size: 10px; color: #888; margin: 5px auto 10px 0;}

@media screen and (max-width: 768px) {
 .channels-list { position: relative; margin: 0; }
 .channels-list .item { width: 32%; margin: 1% 0 1% 1%; height: auto;}
.channels-list .item-inner { width: 100%; height: auto; padding: 5px 0; background: #fff;}
.channels-list .item .img { width: 90%;min-height: 72px;}
.channels-list .item .name { width: auto;}


}