.supercms-player{width:100%;height:100%;background:#000}.supercms-player video,.supercms-player iframe{display:block;width:100%;height:100%;border:0}[data-supercms-line]{cursor:pointer}[data-supercms-playlist] [hidden]{display:none!important}


#logo img {
  display: block;
  width: 240px;
  height: 75px;
  object-fit: contain;
}

#list-focus {
  margin-right: auto;
  margin-left: auto;
}

.down-title {
  display: flex;
  align-items: center;
  gap: 10px;
  height: auto;
  min-height: 46px;
  padding: 0 18px;
  flex-wrap: wrap;
}

.down-title [data-supercms-line] {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid #ddd;
  border-radius: 3px;
  line-height: 24px;
  cursor: pointer;
}

.down-title [data-supercms-line].selected,
.down-title [data-supercms-line].active {
  color: #fff;
  border-color: #4c8fe8;
  background: #4c8fe8;
}

.video-playlist {
  box-sizing: border-box;
  margin: 20px auto;
  border: 1px solid #ddd;
  background: #fff;
}

.video-playlist .down-title {
  gap: 10px;
  margin: 0;
  padding: 12px 18px;
}

.video-playlist .down-title h2 {
  float: none;
  margin: 0;
  padding: 6px 16px;
  border: 1px solid #4c8fe8;
  border-radius: 3px;
  color: #4c8fe8;
  font-size: 16px;
  line-height: 26px;
}

.video-playlist [data-supercms-segments] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid #eee;
}

.video-playlist [data-supercms-segments] a {
  padding: 3px 12px;
  border: 1px solid #ddd;
  border-radius: 3px;
  line-height: 24px;
}

.video-playlist .video_list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 18px;
}

.video-playlist .video_list a {
  box-sizing: border-box;
  float: none;
  width: auto;
  min-width: 110px;
  max-width: 100%;
  margin: 0;
  padding: 6px 12px;
  border-radius: 3px;
  line-height: 24px;
  overflow-wrap: anywhere;
}

.video-playlist .video_list a.active,
.video-playlist .video_list a.selected,
.video-playlist [data-supercms-segments] a.active {
  color: #fff;
  border-color: #4c8fe8;
  background: #4c8fe8;
}

@media (max-width: 767px) {
  body {
    min-width: 0;
  }

  .header,
  .layout,
  .marg,
  .box,
  .bread-crumb-nav,
  .directory-list,
  #channel-box,
  #channel-box .qire-box,
  #detail-box,
  #list-focus,
  .ui-bar {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #link,
  #link #title,
  #link ul {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .header {
    display: flex;
    align-items: center;
    gap: 8px;
    height: auto;
    padding: 8px;
  }

  #logo {
    width: 36%;
    height: 54px;
    padding: 0;
    flex: 0 0 36%;
  }

  #logo img {
    width: 100%;
    height: 54px;
  }

  #searchbar {
    width: auto;
    min-width: 0;
    margin: 0;
    flex: 1 1 auto;
  }

  .ui-search,
  .hotkeys {
    width: 100%;
  }

  .search-input {
    width: calc(100% - 72px);
  }

  .search-button {
    width: 72px;
  }

  #navbar {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  #nav {
    display: flex;
    width: max-content;
    min-width: 100%;
    flex-wrap: nowrap;
  }

  #nav .nav-item {
    float: none;
    flex: 0 0 auto;
  }

  .bread-crumb-nav {
    height: auto;
    min-height: 40px;
    overflow-x: auto;
    white-space: nowrap;
  }

  .directory-list {
    padding: 0 10px;
  }

  .directory-list li,
  .directory-list dl {
    width: 100%;
    float: none;
  }

  .channel-item .box_con .img-list,
  .ui-box .box_con .img-list,
  .box .box_con .img-list {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
  }

  .channel-item .box_con .img-list li,
  .ui-box .box_con .img-list li,
  .box .box_con .img-list li {
    width: auto;
    padding: 0;
    float: none;
  }

  .channel-item .box_con .img-list li a,
  .ui-box .box_con .img-list li a,
  .box .box_con .img-list li a {
    width: 100%;
    box-sizing: border-box;
  }

  .channel-item .box_con .img-list li a img,
  .ui-box .box_con .img-list li a img,
  .box .box_con .img-list li a img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }

  .detail-cols {
    display: flex;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  .detail-pic {
    width: 34%;
    flex: 0 0 34%;
  }

  .detail-pic img {
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }

  .detail-info {
    width: auto;
    min-width: 0;
    padding-left: 10px;
    flex: 1 1 auto;
  }

  .detail-info .info dl {
    height: auto;
    min-height: 26px;
  }

  #bofang_box {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  #bofang_box > iframe,
  #bofang_box > video,
  #bofang_box > .supercms-player,
  #bofang_box > .video-js,
  #bofang_box > .dplayer {
    display: block;
    width: 100% !important;
    height: 100% !important;
  }

  .show-list li {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  .show-list .play-img {
    width: 34%;
  }

  .show-list .play-img img {
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }

  .show-list .play-txt {
    width: 63%;
  }
}