/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/*
 * Colors
 * ========================================================================== */

/* #222 */

/* #404040 */

/* #555 */

/* #777 */

/* #eee */

/*
 * Typography
 * ========================================================================== */

/*
 * Layout
 * ========================================================================== */

/*
 * Media queries breakpoints
 * ========================================================================== */

/* Extra small screen / phone */

/* Small screen / tablet */

/* Medium screen / desktop */

/* Large screen / wide desktop */

/* color profolio */

@font-face {
  font-family: 'icomoon';
  src: url('/fonts/icomoon.eot?yvgh2w');
  src: url('/fonts/icomoon.eot?yvgh2w#iefix') format('embedded-opentype'),
    url('/fonts/icomoon.svg?yvgh2w#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^='icon-'],
[class*=' icon-'] {
  /* use !important to prevent issues with browser extensions that change fonts */
  /* font-family: 'icomoon' !important; */
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-account_circle:before {
  content: '\e853';
}

.icon-arrow_back:before {
  content: '\e5c4';
}

.icon-arrow_downward:before {
  content: '\e5db';
}

.icon-arrow_drop_down:before {
  content: '\e5c5';
}

.icon-arrow_drop_up:before {
  content: '\e5c7';
}

.icon-arrow_forward:before {
  content: '\e5c8';
}

.icon-arrow_upward:before {
  content: '\e5d8';
}

.icon-block:before {
  content: '\e14b';
}

.icon-turned_in:before {
  content: '\e8e6';
}

.icon-turned_in_not:before {
  content: '\e8e7';
}

.icon-brightness_high:before {
  content: '\e1ac';
}

.icon-build:before {
  content: '\e869';
}

.icon-check_box:before {
  content: '\e834';
}

.icon-check_box_outline_blank:before {
  content: '\e835';
}

.icon-navigate_before:before {
  content: '\e408';
}

.icon-navigate_next:before {
  content: '\e409';
}

.icon-close:before {
  content: '\e5cd';
}

.icon-content_copy:before {
  content: '\e14d';
}

.icon-mode_edit:before {
  content: '\e254';
}

.icon-dehaze:before {
  content: '\e3c7';
}

.icon-delete:before {
  content: '\e872';
}

.icon-done:before {
  content: '\e876';
}

.icon-drafts:before {
  content: '\e151';
}

.icon-event_seat:before {
  content: '\e903';
}

.icon-expand_less:before {
  content: '\e5ce';
}

.icon-expand_more:before {
  content: '\e5cf';
}

.icon-favorite:before {
  content: '\e87d';
}

.icon-favorite_border:before {
  content: '\e87e';
}

.icon-get_app:before {
  content: '\e884';
}

.icon-find_in_page:before {
  content: '\e880';
}

.icon-label:before {
  content: '\e892';
}

.icon-label_outline:before {
  content: '\e893';
}

.icon-local_offer:before {
  content: '\e54e';
}

.icon-mail_outline:before {
  content: '\e0e1';
}

.icon-reply:before {
  content: '\e15e';
}

.icon-search:before {
  content: '\e8b6';
}

.icon-select_all:before {
  content: '\e162';
}

.icon-send:before {
  content: '\e163';
}

.icon-share:before {
  content: '\e80d';
}

.icon-short_text:before {
  content: '\e261';
}

.icon-tune:before {
  content: '\e429';
}

.icon-weekend:before {
  content: '\e16b';
}

.icon-zoom_in:before {
  content: '\e8ff';
}

.line-clamp {
  padding-bottom: 0 !important;
  overflow: hidden;
  display: -webkit-box;
  /* autoprefixer: off */
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}

.player-controller {
  position: fixed;
  width: 2.666667rem;
  height: 2.666667rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: black;
  right: 15px;
  bottom: 15px;
}

.player-controller .img-backgroud {
  }

.player-controller .progress_1 {
  }

.player-controller .progress_2 {
  }

body.no-scroll {
  overflow: hidden;
  height: 100%;
}

.single-line {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

button {
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
  padding: 0;
  margin: 0;
}

html {
  color: #3d3d3d;
  font-size: 15px;
  font-family: 'Helvetica Neue', 'Nimbus Sans L', 'Liberation Sans', 'PingFang SC',
  'Hiragino Sans GB', 'Source Han Sans CN', 'Source Han Sans SC', 'Microsoft YaHei',
  'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti', SimHei, 'WenQuanYi Zen Hei Sharp',
  sans-serif;
  font-weight: 500;
  line-height: 1.375; /* ~22px */
  overflow-x: hidden;
  height: 100%;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-overflow-scrolling: touch;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: 'liga' on;
  -webkit-overflow-scrolling: touch;
  color: #606060;
  height: 100%;
}

div {
  box-sizing: content-box;
}

a {
  color: #676b7b;
  text-decoration: none;
}

.app-wrapper {
  outline: none;
}

ol {
  list-style: none;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.text-big {
  font-size: 18px;
}

.text-small {
  font-size: 13px;
}

dl,
dt,
dd {
  margin: 0;
}

dd,
dt {
  display: inline-block;
  vertical-align: middle;
}

@media only screen and (max-width: 320px) {
  html {
    font-size: 13px;
  }
  .text-big {
    font-size: 15px;
  }
  .text-small {
    font-size: 11px;
  }
}

.home-root {
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  background: #f5f5f8;
}
  /*margin-top: 50px;*/
  .home-root .tab-wrapper-1 {
    position: fixed;
    height: 48px;
    width: 48px;
    right: 16px;
    bottom: 184px;
  }
  .home-root .tab-wrapper-1 .tab-icon {
      width: 100%;
      height: 100%;
      border-radius: 5px;
      box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
        0px 1px 18px 0px rgba(0, 0, 0, 0.12);
    }
  .home-root .tab-wrapper-2 {
    position: fixed;
    height: 48px;
    width: 48px;
    right: 16px;
    bottom: 120px;
  }
  .home-root .tab-wrapper-2 .tab-icon {
      width: 100%;
      height: 100%;
      border-radius: 5px;
      box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
        0px 1px 18px 0px rgba(0, 0, 0, 0.12);
    }

.no-topbar {
  margin-top: 0;
}

.topbar-national {
  position: relative !important;
}

.national-img {
  width: 100%;
  vertical-align: bottom;
  /* height: 100%; */
}

.home-national {
  margin-top: 0;
}

.search-layer {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 1);
  overflow-y: scroll;
  z-index: 999999
}
.search-layer > .dbtn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 20px 0 30px 0
}
.search-layer > .dbtn > .text {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(253, 83, 83, 1);
}
.search-layer > .dbtn > .icon {
  width: 14px;
  height: 14px;
  margin-left: 4px;
}

.search-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 50px;
  margin-bottom: -8px;
  padding: 0 16px;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
}

  .search-bar .search {
    flex-grow: 1;
    width: 0;
    height: auto;
    margin-right: 16px;
    padding: 8px 16px;
    background: rgba(247, 247, 247, 1);
    border-radius: 15px;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(34, 34, 34, 1);
    box-sizing: border-box;
  }

  .search-bar .btn-cancle {
    flex-shrink: 0;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
  }

.search-history {
  width: 100%;
  margin: 20px 0;
  padding: 0 16px;
  box-sizing: border-box;
}

  .search-history .title-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .search-history .title-bar .title {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }

  .search-history .title-bar .btn-delete {
      width: 16px;
      height: 16px;
    }

  .search-history .content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 6px -5px -6px -5px;
  }

  .search-history .content .item {
      flex-shrink: 0;
      max-width: calc(100% - 10px);
      height: 28px;
      line-height: 28px;
      padding: 0 12px;
      margin: 6px 5px;
      background: rgba(245, 245, 245, 1);
      border-radius: 14px;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow-x: hidden;
      box-sizing: border-box;
    }

.hot-keywords {
  width: 100%;
  margin: 20px 0;
  box-sizing: border-box;
}

  .hot-keywords .title {
    margin: 0 16px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
  }

  .hot-keywords .content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 6px 0 -6px 0;
  }

  .hot-keywords .content .item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      flex-shrink: 0;
      width: 50%;
      padding: 0 16px;
      margin: 6px 0;
      box-sizing: border-box;
    }

  .hot-keywords .content .item .num {
        width: 16px;
        height: 16px;
        line-height: 16px;
        margin-right: 8px;
        text-align: center;
        font-size: 14px;
        font-family: HelveticaNeue;
        color: rgba(102, 102, 102, 1);
      }

  .hot-keywords .content .item .text {
        flex-grow: 1;
        width: 0;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow-x: hidden;
        box-sizing: border-box;
      }

  .hot-keywords .content .item:nth-of-type(1) > .num {
  color: rgba(225, 52, 48, 1);
}

  .hot-keywords .content .item:nth-of-type(2) > .num {
  color: rgba(255, 102, 65, 1);
}

  .hot-keywords .content .item:nth-of-type(3) > .num {
  color: rgba(255, 161, 57, 1);
}

.copyright {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 21px 0 26px 0;
  background: rgba(245, 245, 248, 1);
}

  .copyright .cp-logo {
    width: 120px;
    height: 30px;
    margin-bottom: 21px;
  }

  .copyright .cp-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 217px;
    height: 45px;
    margin-bottom: 22px;
    background: rgba(253, 83, 83, 1);
    border-radius: 23px;
    color: rgba(255, 255, 255, 1);
  }

  .copyright .cp-btn .cp-text {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }

  .copyright .cp-btn .cp-icon {
      width: 8px;
      height: 8px;
      margin-left: 5px;
    }

  .copyright .cp-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
  }

  .copyright .cp-link .cp-text {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
    }

  .copyright .cp-link .cp-gap {
      width: 1px;
      height: 13px;
      background: rgba(216, 216, 216, 1);
      margin: 00 16px;
    }

  .copyright .cp-info {
    font-size: 10px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    text-align: center;
  }

.topb {
  position: fixed;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  top: 0;
  left: 0;
  padding: 0 16px;
  z-index: 9999;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.05);
}

  .topb .logo {
    width: 88px;
    height: 22px;
  }

  .topb .sourcelogo {
    height: 22px;
    margin-right: 5px;
  }

  .topb .no-searchbar-logo-wrapper {
    display: flex;
    align-items: center;
  }

  .topb .no-searchbar-logo-wrapper > img {
      width: 36px;
      height: 36px;
      margin-right: 12px;
    }

  .topb .no-searchbar-logo-wrapper .no-searchbar-logo-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 12px;
      color: #d8d8d8;
    }

  .topb .no-searchbar-logo-wrapper .no-searchbar-logo-right > img {
        width: 56px;
        height: 16px;
      }

  .topb .no-searchbar-logo-wrapper .no-searchbar-logo-right .no-searchbar-word span:nth-of-type(2) {
        color: #c1884b;
        margin-left: 6px;
      }

  .topb .searchbar-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 140px;
    height: 30px;
    border-radius: 15px;
  }

  .topb .searchbar-wrapper .searchbar {
      width: 100%;
      height: 100%;
      line-height: 18px;
      background: rgba(243, 243, 243, 1);
      border-radius: 15px;
      border: none;
      padding: 6px 8px 6px 34px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(34, 34, 34, 1);
      box-sizing: border-box;
    }

  .topb .searchbar-wrapper .searchbar:disabled {
      color: rgba(153, 153, 153, 1);
    }

  .topb .searchbar-wrapper .icon {
      position: absolute;
      width: 20px;
      height: 20px;
      left: 8px;
    }

  .topb .btn {
    width: 78px;
    height: 30px;
    line-height: 30px;
    background: linear-gradient(180deg, rgba(255, 139, 139, 1) 0%, rgba(253, 83, 83, 1) 100%);
    box-shadow: 0px 4px 20px -6px rgba(253, 83, 83, 1);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    text-align: center;
  }

.category {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /**
    grid-row-gap: 16px;
    display: grid;
    grid-template-columns: repeat(5, 48px);
  **/
  width: 100%;
  padding: 16px;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
}

  .category .catitem {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .category .catitem .icon {
      width: 36px;
      height: 36px;
      margin-bottom: 4px;
    }

  .category .catitem .name {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      white-space: nowrap;
    }

  .category .switch-btn {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    margin: 16px 0 -16px;
  }

  .category .switch-btn .icon {
      width: 28px;
      height: 18px;
      margin-right: 6px;
      margin-bottom: 0;
    }

.personal-radio-bar {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 12px 16px;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
}

  .personal-radio-bar .poster {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }

.app-ad-bar {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 16px;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
}

  .app-ad-bar .poster {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }

.rank-panel {
  width: 100%;
  margin: 0;
  padding: 16px;
  background: rgba(255, 255, 255, 1);
  box-sizing: border-box;
}

  .rank-panel .title-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 11px;
  }

  .rank-panel .title-bar .title {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }

  .rank-panel .title-bar .btn {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 57px;
      height: 25px;
      background: rgba(245, 245, 245, 1);
      border-radius: 13px;
    }

  .rank-panel .title-bar .btn .text {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }

  .rank-panel .title-bar .btn .icon {
        width: 4px;
        height: 7px;
        margin-left: 6px;
      }

  .rank-panel .rank-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .rank-panel .rank-grid .rank-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: start;
      width: 30%;
    }

  .rank-panel .rank-grid .rank-item .cover-wrapper {
        position: relative;
        width: 108px;
        height: 108px;
        margin-bottom: 6px;
      }

  .rank-panel .rank-grid .rank-item .cover-wrapper .cover {
          width: 100%;
          height: 100%;
          border-radius: 5px;
          border: 1px solid rgba(0, 0, 0, 0.05);
          box-sizing: border-box;
        }

  .rank-panel .rank-grid .rank-item .cover-wrapper .badge {
          position: absolute;
          width: 20px;
          height: 22px;
          line-height: 22px;
          left: 1px;
          top: 1px;
          background-image: url('https://pic.qtfm.cn/qt-msite/icon-badge@2x.svg');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          border-radius: 5px 0px 0px 0px;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          text-align: center;
        }

  .rank-panel .rank-grid .rank-item .cover-wrapper .info {
          position: absolute;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: start;
          width: calc(100% - 2px);
          height: 20px;
          left: 1px;
          bottom: 1px;
          padding: 0 7px;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
          border-radius: 0px 0px 5px 5px;
          box-sizing: border-box;
        }

  .rank-panel .rank-grid .rank-item .cover-wrapper .info .bkColor{
            color: white;
            display: inline;
          }

  .rank-panel .rank-grid .rank-item .cover-wrapper .info .icon {
            width: 12px;
            height: 12px;
            margin-right: 2px;
          }

  .rank-panel .rank-grid .rank-item .cover-wrapper .info .text {
            font-size: 10px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
          }

  .rank-panel .rank-grid .rank-item .desc {
        overflow: hidden;
        height: 36px;
        line-height: 18px;
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }

  .rank-panel .rank-grid .rank-item:nth-of-type(1) > .cover-wrapper > .badge {
  background-image: url('https://pic.qtfm.cn/qt-msite/icon-badge-1@2x.svg');
}

  .rank-panel .rank-grid .rank-item:nth-of-type(2) > .cover-wrapper > .badge {
  background-image: url('https://pic.qtfm.cn/qt-msite/icon-badge-2@2x.svg');
}

  .rank-panel .rank-grid .rank-item:nth-of-type(3) > .cover-wrapper > .badge {
  background-image: url('https://pic.qtfm.cn/qt-msite/icon-badge-3@2x.svg');
}

.rec-panel {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: rgba(255, 255, 255, 1);
}

  .rec-panel .sec-panel {
    width: 100%;
    margin: 0;
    padding: 16px;
    box-sizing: border-box;
  }

  .rec-panel .sec-panel .title-bar {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 11px;
    }

  .rec-panel .sec-panel .title-bar .title {
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }

  .rec-panel .sec-panel .title-bar .btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 57px;
        height: 25px;
        background: rgba(245, 245, 245, 1);
        border-radius: 13px;
      }

  .rec-panel .sec-panel .title-bar .btn .text {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }

  .rec-panel .sec-panel .title-bar .btn .icon {
          width: 4px;
          height: 7px;
          margin-left: 6px;
        }

  .rec-panel .sec-panel .list-panel .list-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 12px 0;
        padding: 0;
      }

  .rec-panel .sec-panel .list-panel .list-item > div.cover-wrapper {
          position: relative;
        }

  .rec-panel .sec-panel .list-panel .list-item > div.cover-wrapper > .cover {
            flex-shrink: 0;
            width: 80px;
            height: 80px;
            border-radius: 5px;
            border: 1px solid rgba(0, 0, 0, 0.05);
          }

  .rec-panel .sec-panel .list-panel .list-item .content {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          margin-left: 12px;
          width: 0;
          flex-grow: 1;
        }

  .rec-panel .sec-panel .list-panel .list-item .content .title {
            width: 100%;
            margin-bottom: 6px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow-x: hidden;
          }

  .rec-panel .sec-panel .list-panel .list-item .content .desc {
            width: 100%;
            margin-bottom: 6px;
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

  .rec-panel .sec-panel .list-panel .list-item .content .info {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start
          }

  .rec-panel .sec-panel .list-panel .list-item .content .info > .info-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  margin-right: 12px;
}

  .rec-panel .sec-panel .list-panel .list-item .content .info > .info-item > .icon {
  width: 12px;
  height: 12px;
  margin-right: 4px;
}

  .rec-panel .sec-panel .list-panel .list-item .content .info > .info-item .bkColor {
                color: rgba(153, 153, 153, 1);
                display: inline-block;
                margin-right: 4px;
}

  .rec-panel .sec-panel .list-panel .list-item .content .info > .info-item .text {
                font-size: 11px;
                font-family: PingFangSC-Light, PingFang SC;
                font-weight: 300;
                color: rgba(153, 153, 153, 1);
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow-x: hidden;
}

  .rec-panel .sec-panel .list-panel .list-item .content .info > .info-item:last-of-type {
  width: 0;
  flex-grow: 1;
  margin-right: 0;
}

.vip-listen-tag {
  position: absolute;
  top: 0;
  left: 1px;
  width: 56px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
  .vip-listen-tag > img {
    width: 100%;
  }

.float-bot-btn {
  position: fixed;
  width: 110px;
  height: 36px;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 139, 139, 1) 0%, rgba(253, 83, 83, 1) 100%);
  box-shadow: 0px 4px 20px -6px rgba(253, 83, 83, 1);
  border-radius: 20px;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 36px;
  z-index: 9000;
}

.home-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 19999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

  .home-modal .modal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 305px;
    background-image: url('https://pic.qtfm.cn/qt-msite/background-modal@2x.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 16px;
    padding: 35px 0 19px 0;
  }

  .home-modal .modal .logo {
      width: 168px;
      height: 160px;
      margin-bottom: 30px;
    }

  .home-modal .modal .menu {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 224px;
      margin-bottom: 26px;
    }

  .home-modal .modal .menu .item {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

  .home-modal .modal .menu .item .icon {
          width: 29px;
          height: 29px;
          margin-bottom: 3px;
        }

  .home-modal .modal .menu .item .text {
          font-size: 11px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
        }

  .home-modal .modal .btn {
      width: 238px;
      height: 50px;
      line-height: 50px;
      margin-bottom: 17px;
      background: rgba(253, 83, 83, 1);
      border-radius: 25px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      text-align: center;
    }

  .home-modal .modal .footnote {
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
    }

  .home-modal .modal .icon-close {
      position: absolute;
      width: 30px;
      height: 30px;
      top: 12px;
      right: 12px;
    }

.bcc-bar {
  padding: 1.066667rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}
  .bcc-bar .history {
    width: 11rem;
    height: 4.533333rem;
    background-image: url(/images/08499824c64a6973d23f4add8255e23d.png);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .bcc-bar .orders {
    width: 11rem;
    height: 4.533333rem;
    background-image: url(/images/ad4ae34fab3bcb3492411a02bdbf87ea.png);
    background-repeat: no-repeat;
    background-size: cover;
  }

.bottom-bar {
  position: fixed;
  bottom: 0;
  z-index: 9999;
  width: 100%;
  height: 60px;
  background-color: #fff;
  box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.05);
  display: flex;
}
  .bottom-bar .button {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .bottom-bar .button .button-icon {
      width: 29px;
      height: 29px;
      background-repeat: no-repeat;
      background-size: contain;
    }
  .bottom-bar .button .home {
      background-image: url('https://pic.qtfm.cn/mqt/home.png');
    }
  .bottom-bar .button .home-clicked {
      background-image: url('https://pic.qtfm.cn/mqt/homeclicked.png');
    }
  .bottom-bar .button .my {
      background-image: url('https://pic.qtfm.cn/mqt/my.png');
    }
  .bottom-bar .button .my-clicked {
      background-image: url('https://pic.qtfm.cn/mqt/myclicked.png');
    }
  .bottom-bar .button .button-text {
      font-size: 12px;
      color: #999999;
    }
  .bottom-bar .button .clicked {
      color: #333333;
    }

.tool-bar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 1);
  font-size: 17px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(34, 34, 34, 1);
  box-sizing: border-box
}
.tool-bar > .icon-wrapper {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 16px
}
.tool-bar > .icon-wrapper > .icon {
  width: 100%;
  height: 100%;
}

.rank-list {
  width: 100%;
  margin: 0;
  padding: 4px 16px;
  box-sizing: border-box;
}

  .rank-list .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 12px 0;
  }

  .rank-list .item .badge {
      flex-shrink: 0;
      width: 20px;
      height: 22px;
      line-height: 22px;
      margin-right: 16px;
      border-radius: 2px;
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(102, 102, 102, 1);
    }

  .rank-list .item .cover {
      flex-shrink: 0;
      width: 80px;
      height: 80px;
      border-radius: 5px;
      border: 1px solid rgba(0, 0, 0, 0.05);
    }

  .rank-list .item .content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-left: 12px;
      width: 0;
      flex-grow: 1;
    }

  .rank-list .item .content .title {
        width: 100%;
        margin-bottom: 6px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow-x: hidden;
      }

  .rank-list .item .content .desc {
        width: 100%;
        margin-bottom: 6px;
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

  .rank-list .item .content .info {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start
      }

  .rank-list .item .content .info > .info-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  margin-right: 12px;
}

  .rank-list .item .content .info > .info-item > .icon {
  width: 12px;
  height: 12px;
  margin-right: 4px;
}

  .rank-list .item .content .info > .info-item > .bkColor {
  display: inline-block;
  margin-right: 4px;
}

  .rank-list .item .content .info > .info-item > .text {
  font-size: 11px;
  font-family: PingFangSC-Light, PingFang SC;
  font-weight: 300;
  color: rgba(153, 153, 153, 1);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}

  .rank-list .item .content .info > .info-item:last-of-type {
  width: 0;
  flex-grow: 1;
  margin-right: 0;
}

  .rank-list .item:nth-of-type(1) > .badge {
  color: rgba(255, 255, 255, 1);
  background-image: url('https://pic.qtfm.cn/qt-msite/icon-badge-1@2x.svg');
}

  .rank-list .item:nth-of-type(2) > .badge {
  color: rgba(255, 255, 255, 1);
  background-image: url('https://pic.qtfm.cn/qt-msite/icon-badge-2@2x.svg');
}

  .rank-list .item:nth-of-type(3) > .badge {
  color: rgba(255, 255, 255, 1);
  background-image: url('https://pic.qtfm.cn/qt-msite/icon-badge-3@2x.svg');
}

.rank-root {
  width: 100%;
  margin: 50px 0 0 0;
  padding: 0;
}

.search-search-bar {
  width: 100%;
  height: 50px;
  padding: 10px 16px;
  box-sizing: border-box
}
.search-search-bar > .search-bar-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 15px
}
.search-search-bar > .search-bar-wrapper > .search-bar {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 8px 8px 8px 34px;
  border: none;
  outline: none;
  background: rgba(247, 247, 247, 1);
  border-radius: 15px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(34, 34, 34, 1);
}
.search-search-bar > .search-bar-wrapper > .icon {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 8px;
}

/**
 * Swiper 5.4.5
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * http://swiperjs.com
 *
 * Copyright 2014-2020 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: June 16, 2020
 */

@font-face{font-family:swiper-icons;src:url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");font-weight:400;font-style:normal}

:root{--swiper-theme-color:#007aff}

.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}

.swiper-container-vertical>.swiper-wrapper{flex-direction:column}

.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}

.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}

.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}

.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}

.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}

.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}

.swiper-slide-invisible-blank{visibility:hidden}

.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}

.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}

.swiper-container-3d{perspective:1200px}

.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}

.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}

.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}

.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}

.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}

.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}

.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}

.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}

.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}

.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}

.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}

:root{--swiper-navigation-size:44px}

.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(-1 * var(--swiper-navigation-size)/ 2);z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}

.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}

.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;-moz-font-feature-settings:;font-feature-settings:;font-variant:initial;line-height:1}

.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}

.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:'prev'}

.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}

.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:'next'}

.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ffffff}

.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000000}

.swiper-button-lock{display:none}

.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}

.swiper-pagination.swiper-pagination-hidden{opacity:0}

.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}

.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}

.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}

button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}

.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}

.swiper-pagination-bullet-active{opacity:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}

.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}

.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}

.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}

.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}

.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}

.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}

.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}

.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}

.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}

.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}

.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}

.swiper-pagination-white{--swiper-pagination-color:#ffffff}

.swiper-pagination-black{--swiper-pagination-color:#000000}

.swiper-pagination-lock{display:none}

.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}

.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}

.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}

.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}

.swiper-scrollbar-cursor-drag{cursor:move}

.swiper-scrollbar-lock{display:none}

.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}

.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}

.swiper-slide-zoomed{cursor:move}

.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}

.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}

.swiper-lazy-preloader-black{--swiper-preloader-color:#000}

@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}

.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}

.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}

.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}

.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}

.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}

.swiper-container-cube{overflow:visible}

.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}

.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}

.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}

.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}

.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}

.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}

.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}

.swiper-container-flip{overflow:visible}

.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}

.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}

.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}

.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.result {
  width: 100%;
  box-sizing: border-box
}

.result > .tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  padding: 6px 36px 16px 36px;
  box-shadow: 0px 1px 0px 0px rgba(239, 239, 239, 1);
  box-sizing: border-box
}

.result > .tab > .item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 18px;
  line-height: 18px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
}

.result > .tab > .active {
  font-size: 17px;
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
}

.result > .tab > .active::after {
  content: '';
  position: absolute;
  display: block;
  width: 16px;
  height: 3px;
  top: 26px;
  left: calc((100% - 16px) / 2);
  background: rgba(253, 83, 83, 1);
  border-radius: 2px;
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 16px;
  box-sizing: border-box
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .cover-wrapper {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .cover-wrapper > .cover {
  width: 100%;
  height: 100%;
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .cover-wrapper > .rounded-corner {
  border-radius: 5px;
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .cover-wrapper > .circle {
  border-radius: 50%;
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .cover-wrapper > .outline {
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .cover-wrapper > .mask {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4)
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .cover-wrapper > .mask > .icon {
  width: 18px;
  height: 18px;
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 12px;
  padding: 12px 0;
  width: 0;
  flex-grow: 1;
  box-shadow: 0px 1px 0px 0px rgba(239, 239, 239, 1)
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .content > .title {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin-bottom: 6px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .content > .title > .badge {
  display: inline-block;
  width: 24px;
  height: 12px;
  line-height: 12px;
  margin-right: 4px;
  background: rgba(97, 170, 255, 1);
  border-radius: 1px 2px 2px 1px;
  border: 1px solid rgba(97, 170, 255, 1);
  text-align: center;
  font-size: 8px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .content > .desc {
  width: 100%;
  margin-bottom: 6px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .content > .desc > .desc-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  margin-right: 12px
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .content > .desc > .desc-item > .icon {
  width: 12px;
  height: 12px;
  margin-right: 4px;
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .content > .desc > .desc-item .bkColor {
              color: rgba(153, 153, 153, 1);
              display: inline-block;
              margin-right: 4px;
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .content > .desc > .desc-item .text {
              font-size: 13px;
              font-family: PingFangSC-Light, PingFang SC;
              font-weight: 300;
              color: rgba(153, 153, 153, 1);
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .content > .desc > .desc-item:last-of-type {
  width: 0;
  flex-grow: 1;
  margin-right: 0;
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .content > .info {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .content > .info > .info-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  margin-right: 12px
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .content > .info > .info-item > .icon {
  width: 12px;
  height: 12px;
  margin-right: 4px;
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .content > .info > .info-item > .text {
  font-size: 11px;
  font-family: PingFangSC-Light, PingFang SC;
  font-weight: 300;
  color: rgba(153, 153, 153, 1);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .list-item > .content > .info > .info-item:last-of-type {
  width: 0;
  flex-grow: 1;
  margin-right: 0;
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 64px
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .load-more > .wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .load-more > .wrapper > .icon {
  width: 13px;
  height: 13px;
  margin-right: 5px;
  animation: spin 1s linear infinite;
}

.result > .swiper-container > .swiper-wrapper > .swiper-slide > .load-more > .wrapper > .text {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(253, 83, 83, 1);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

.search-root {
  width: 100%;
  margin: 50px 0 0 0;
  padding: 0;
}

.m-page-cat-banner-wrap {
  padding: 0 16px 16px 16px;
  background: #fff;
}

.blank-content .cry-text {
    display: block;
    padding: 200px 15px 20px 15px;
    text-align: center;
    background: url(//sss.qtfm.cn/v2/images/cry.png) no-repeat center 100px;
    background-size: 73px;
  }

.loading {
  width: 100%;
  height: 1000px;
  color: #666;
  line-height: 30px;
  text-align: center;
  padding-top: 30%;
}

.m-filter-title-show {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: #fff;
}
  .m-filter-title-show .m-m-filter-title-show-left img {
      width: 30px;
      height: 30px;
    }
  .m-filter-title-show .m-m-filter-title-show-right {
    display: flex;
    align-items: center
  }
  .m-filter-title-show .m-m-filter-title-show-right.is-filter-wrap {
  padding: 4px 10px;
  background: rgba(245, 245, 245, 1);
  border-radius: 13px;
  color: #999;
  font-size: 12px;
  margin-right: 2px;
}
  .m-filter-title-show .m-m-filter-title-show-right.is-filter-wrap span {
        padding-left: 3px;
}
  .m-filter-title-show .m-m-filter-title-show-right img {
      width: 30px;
      height: 30px;
}
  .m-filter-title-show .m-m-filter-title-show-right img.is-filter {
  transform: translateY(1px);
  width: 12px;
  height: 12px;
}
  .m-filter-title-show .m-m-filter-title-show-middle {
    font-size: 17px;
    font-weight: 500;
    color: rgba(34, 34, 34, 1);
  }

.m-qt-mobile-tag {
  padding: 5px 0;
  border-radius: 16px;
  border: 1px solid rgba(239, 239, 239, 1);
  font-size: 14px;
  color: rgba(34, 34, 34, 1);
  font-weight: 400;
  width: 100%;
  box-sizing: border-box
}
.m-qt-mobile-tag.active-tag {
  border: 1px solid rgba(255, 49, 58, 0.2);
  color: rgba(255, 49, 58, 1);
}

.m-radio-filter {
  width: 100%;
  background: #fff;
  //padding: 0 15px;
  margin: 0 auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, 80px);
  justify-content: space-between;
  padding: 0 16px 0 16px;
}
  .m-radio-filter .m-tag-wrapper {
    display: inline-block;
    box-sizing: border-box;
    margin-top: 15px;
    text-align: center
  }
  .m-radio-filter .m-tag-wrapper:first-child,
    .m-radio-filter .m-tag-wrapper:nth-child(2),
    .m-radio-filter .m-tag-wrapper:nth-child(3),
    .m-radio-filter .m-tag-wrapper:nth-child(4) {
  margin-top: 0;
}

.m-open-button {
  padding: 2px 18px;
  border-radius: 16px;
  border: 1px solid rgba(239, 239, 239, 1);
  font-size: 14px;
  color: rgba(34, 34, 34, 1);
  font-weight: normal;
  font-weight: initial;
  display: inline-block;
  width: 42px;
  text-align: center;
}
  .m-open-button img {
    transform: translateY(1px);
    width: 20px;
  }

.m-all-radio-filter {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 1);
  z-index: -10;
  overflow: hidden;
  flex-direction: column;
  opacity: 0
}
.m-all-radio-filter.is-show {
  z-index: 9999;
  opacity: 1;
}
.m-all-radio-filter .m-filter-group {
    font-size: 14px;
    padding-left: 20px;
    color: rgba(102, 102, 102, 1);
    padding-top: 14px;
    font-weight: 400
}
.m-all-radio-filter .m-filter-group.first {
  padding-top: 0;
}
.m-all-radio-filter .m-all {
    padding: 0 0 28px 15px;
    width: 116px;
    text-align: center;
}
.m-all-radio-filter .m-filter-title {
    margin-top: 50px;
}
.m-all-radio-filter .m-all-radio-filter-inner {
    height: 100vh;
    overflow-y: auto;
    padding-bottom: 30px;
    box-sizing: border-box;
}
.m-all-radio-filter .m-all-radio-filter-inner .m-tag-wrapper {
      box-sizing: border-box;
      margin-top: 15px;
      text-align: center
    }
.m-all-radio-filter .m-all-radio-filter-inner .m-tag-wrapper:first-child,
      .m-all-radio-filter .m-all-radio-filter-inner .m-tag-wrapper:nth-child(2),
      .m-all-radio-filter .m-all-radio-filter-inner .m-tag-wrapper:nth-child(3),
      .m-all-radio-filter .m-all-radio-filter-inner .m-tag-wrapper:nth-child(4) {
  margin-top: 0;
}
.m-all-radio-filter .m-page-cat-filter-tag-wrap {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(4, 80px);
    justify-content: space-between;
    padding: 14px 16px;
}

.m-cat-rank-list {
  background: #fff;
}

  .m-cat-rank-list .list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 12px 0;
    padding-left: 15px;
  }

  .m-cat-rank-list .list-item .cover {
      flex-shrink: 0;
      width: 64px;
      height: 64px;
      border-radius: 5px;
      border: 1px solid rgba(0, 0, 0, 0.05);
    }

  .m-cat-rank-list .list-item .content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-left: 12px;
      width: 0;
      flex-grow: 1;
      padding-right: 15px;
      position: relative;
    }

  .m-cat-rank-list .list-item .content .m-line {
        position: absolute;
        height: 1px;
        width: 100%;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        bottom: -13px;
        right: 0;
      }

  .m-cat-rank-list .list-item .content .title {
        width: 100%;
        margin-bottom: 6px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow-x: hidden;
      }

  .m-cat-rank-list .list-item .content .desc {
        width: 100%;
        margin-bottom: 6px;
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

  .m-cat-rank-list .list-item .content .m-now-play {
        width: 80%;
        font-size: 11px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

  .m-cat-rank-list .list-item .content .m-cat {
        font-size: 11px;
        font-weight: 400;
        color: rgba(155, 155, 155, 1);
      }

  .m-cat-rank-list .list-item .content .info {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start
      }

  .m-cat-rank-list .list-item .content .info > .info-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin-right: 12px;
}

  .m-cat-rank-list .list-item .content .info > .info-item > .icon {
  width: 12px;
  height: 12px;
  margin-right: 4px;
}

  .m-cat-rank-list .list-item .content .info > .info-item > .text {
  font-size: 11px;
  font-family: PingFangSC-Light, PingFang SC;
  font-weight: 300;
  color: rgba(153, 153, 153, 1);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}

  .m-cat-rank-list .list-item .content .info > .info-item:last-of-type {
  width: 0;
  flex-grow: 1;
  margin-right: 0;
}

.rec-panel {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: rgba(255, 255, 255, 1);
}

  .rec-panel .sec-panel {
    width: 100%;
    margin: 0;
    padding: 16px;
    box-sizing: border-box;
  }

  .rec-panel .sec-panel .title-bar {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 11px;
    }

  .rec-panel .sec-panel .title-bar .title {
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }

  .rec-panel .sec-panel .title-bar .btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 57px;
        height: 25px;
        background: rgba(245, 245, 245, 1);
        border-radius: 13px;
      }

  .rec-panel .sec-panel .title-bar .btn .text {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
        }

  .rec-panel .sec-panel .title-bar .btn .icon {
          width: 4px;
          height: 7px;
          margin-left: 6px;
        }

  .rec-panel .sec-panel .list-panel .list-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 12px 0;
        padding: 0;
      }

  .rec-panel .sec-panel .list-panel .list-item > div.cover-wrapper {
          position: relative;
        }

  .rec-panel .sec-panel .list-panel .list-item > div.cover-wrapper .cover {
            flex-shrink: 0;
            width: 80px;
            height: 80px;
            border-radius: 5px;
            border: 1px solid rgba(0, 0, 0, 0.05);
          }

  .rec-panel .sec-panel .list-panel .list-item .content {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          margin-left: 12px;
          width: 0;
          flex-grow: 1;
        }

  .rec-panel .sec-panel .list-panel .list-item .content .title {
            width: 100%;
            margin-bottom: 6px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow-x: hidden;
          }

  .rec-panel .sec-panel .list-panel .list-item .content .desc {
            width: 100%;
            margin-bottom: 6px;
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

  .rec-panel .sec-panel .list-panel .list-item .content .info {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start
          }

  .rec-panel .sec-panel .list-panel .list-item .content .info > .info-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  margin-right: 12px;
}

  .rec-panel .sec-panel .list-panel .list-item .content .info > .info-item > .icon {
  width: 12px;
  height: 12px;
  margin-right: 4px;
}

  .rec-panel .sec-panel .list-panel .list-item .content .info > .info-item .bkColor {
                color: rgba(153, 153, 153, 1);
                display: inline-block;
                margin-right: 4px;
}

  .rec-panel .sec-panel .list-panel .list-item .content .info > .info-item .text {
                font-size: 11px;
                font-family: PingFangSC-Light, PingFang SC;
                font-weight: 300;
                color: rgba(153, 153, 153, 1);
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow-x: hidden;
}

  .rec-panel .sec-panel .list-panel .list-item .content .info > .info-item:last-of-type {
  width: 0;
  flex-grow: 1;
  margin-right: 0;
}

.m-page-cat-banner-wrap .banner-wrap .swiper-pagination-bullet {
      width: 5px;
      height: 5px;
      display: inline-block;
      border-radius: 2px;
      background: #000;
      opacity: 0.3;
      margin-right: 5px
    }
    .m-page-cat-banner-wrap .banner-wrap .swiper-pagination-bullet:active {
      box-shadow: none;
      outline: none;
}
    .m-page-cat-banner-wrap .banner-wrap .swiper-pagination-bullet:focus {
      box-shadow: none;
      outline: none;
}
    .m-page-cat-banner-wrap .banner-wrap .swiper-pagination {
      position: absolute;
      bottom: 0.5rem;
      text-align: center;
      transition: 0.3s opacity;
      transform: translate3d(0, 0, 0);
      z-index: 10;
      width: 100%;
    }
    .m-page-cat-banner-wrap .banner-wrap .swiper-pagination-bullet.swiper-pagination-bullet-active {
      background: #fff;
      width: 20px;
      opacity: 0.8;
      box-shadow: none
    }
    .m-page-cat-banner-wrap .banner-wrap .swiper-pagination-bullet.swiper-pagination-bullet-active:active {
      box-shadow: none;
      outline: none;
}
    .m-page-cat-banner-wrap .banner-wrap .swiper-pagination-bullet.swiper-pagination-bullet-active:focus {
      box-shadow: none;
      outline: none;
}
    .m-page-cat-banner-wrap .banner-wrap .union-slide-item {
      width: 343px;
      height: 133px;
      overflow: hidden;
      background: rgba(216, 216, 216, 1);
      border-radius: 5px;
    }
    .m-page-cat-banner-wrap .banner-wrap .union-slide-item img {
        width: 100%;
        border-radius: 5px;
      }

.m-page-cat-novel-tab-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  background: #fff;
}
.m-page-cat-novel {
  font-size: 16px;
  font-weight: 500;
  width: 190px;
  color: rgba(153, 153, 153, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 18px 0;
}
.m-page-cat-novel .tab-item .inner-item {
      width: 88px;
      text-align: center;
      position: absolute;
      bottom: -4px;
    }
.m-page-cat-novel .tab-item.is-active {
  font-size: 20px;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  transform: translateY(2px);
}
.m-page-cat-novel .tab-item.is-active .item.male {
  width: 88px;
  height: 10px;
  background: linear-gradient(
              270deg,
              rgba(255, 255, 255, 1) 0%,
              rgba(144, 215, 255, 1) 100%
            )
            bottom;
  border-radius: 5px;
}
.m-page-cat-novel .tab-item.is-active .item.female {
  width: 88px;
  height: 10px;
  background: linear-gradient(
              270deg,
              rgba(255, 255, 255, 1) 0%,
              rgba(255, 144, 144, 1) 100%
            )
            bottom;
  border-radius: 5px;
}
.m-page-cat-novel .tab-item .item {
      width: 88px;
      height: 10px;
      position: relative;
      text-align: center;
}


/*
.topbar {
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;
  opacity: 0.98;
  background-image: linear-gradient(-127deg, #FD5353 0%, #FF8A8A 100%);
  border-bottom: 1px solid #eaecef;
  .homepage {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    width: 100%;
    background-size: 223px 30px;
    background-position: left;
    display: inline-flex;
    align-items: center;
    .logo {
      width: 96px;
      height: 24px;
    }
    .slogan {
      width: 125px;
      height: 14px;
      margin-left: 10px;
    }
  }
  */
.topbar {
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;
  background-color: #fff;
  box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.05);
}
.topbar .incb-back-icon {
    width: 9px;
    height: 18px;
    opacity: 1;
    color: #666666;
  }
.topbar .homepage {
    position: absolute;
    top: 0;
    bottom: 0;
    padding-left: 12px;
    width: 100%;
    background-size: 223px 30px;
    background-position: left;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
  }
.topbar .homepage .sourcelogo {
      height: 35px;
      margin-right: 5px;
    }
.topbar .homepage .logo {
      height: 30px;
    }
.topbar .homepage .slogan-wrapper {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      height: 36px;
      margin-left: 12px;
      padding: 2px 0 1px 0;
      box-sizing: border-box;
    }
.topbar .homepage .slogan-wrapper .slogan {
        width: 56px;
        height: 16px;
      }
.topbar .homepage .slogan-wrapper .slogan-text {
        font-size: 12px;
        font-weight: 400;
        color: #999;
      }
.topbar .homepage .slogan-wrapper .slogan-text .left-span {
          color: #999;
          margin-right: 6px;
        }
.topbar .homepage .slogan-wrapper .slogan-text > span {
          color: #c1884b;
        }
/*
  .open-btn {
    position: absolute;
    top: 11px;
    bottom: 11px;
    text-align: center;
    line-height: 28px;
    font-size: 13px;
    color: #FD5353;
    width: 75px;
    right: 15px;
    background: #ffffff;
    box-shadow: 0 1px 6px 0 rgba(194,34,34,0.48);
    border-radius: 100px;
  }  
  */
.topbar .open-btn {
    position: absolute;
    top: 9px;
    bottom: 9px;
    text-align: center;
    line-height: 32px;
    font-size: 12px;
    color: #fff;
    width: 78px;
    height: 32px;
    right: 12px;
    background: linear-gradient(180deg, rgba(255, 139, 139, 1) 0%, rgba(253, 83, 83, 1) 100%);
    box-shadow: 0px 4px 20px -6px rgba(253, 83, 83, 1);
    border-radius: 16px;
    animation: breath 1s ease-in-out infinite;
  }
.topbar .open-btn-no-animation {
    position: absolute;
    top: 9px;
    bottom: 9px;
    text-align: center;
    line-height: 32px;
    font-size: 12px;
    color: #fff;
    width: 78px;
    height: 32px;
    right: 12px;
    background: linear-gradient(180deg, rgba(255, 139, 139, 1) 0%, rgba(253, 83, 83, 1) 100%);
    box-shadow: 0px 4px 20px -6px rgba(253, 83, 83, 1);
    border-radius: 16px;
  }
.incb-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
}
.incb-topbar .indb-back-icon {
    height: 18px;
  }
.incb-topbar .incb-home {
    height: 30px;
  }
.incb-topbar .incb-right {
    width: 5px;
    height: 30px;
  }
@media only screen and (max-width: 353px) {
  .topbar > .homepage > .slogan-wrapper {
    display: none;
  }
}
.topbar.topbar91 {
  background-image: url('https://sss.qtfm.cn/v3/QTbg91.png');
  background-size: 100% 100%;
}
.topbar.topbar91 .logo91 {
    height: 70%;
  }

.ad-poster-default {
  position: relative;
  width: 100%;
  margin-top: 8px;
  padding: 0;
  box-sizing: border-box;
  background-color: #fff;
}

  .ad-poster-default .ad-img {
    width: 100%;
  }

  .ad-poster-default .download-btn {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

.tabs {
  padding: 0 15px;
  position: relative;
}
  .tabs .grid-item {
    box-sizing: border-box;
    float: left;
    text-align: center;
    line-height: 30px;
    padding: 5px 0;
    position: relative;
  }
.tabs::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: #dcdee3;
}
.tabs .active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background-color: #d14946;
}

.recommend-list {
  padding: 0 16px;
  background-color: #fff;
}

  .recommend-list > div {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
  }

  .recommend-list .pic-list-item {
    position: relative;
    display: block;
    padding: 8px 0 8px 76px;
    box-shadow: 0px 1px 0px 0px rgba(234, 234, 234, 1);
  }

  .recommend-list .pic-list-item .cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 64px;
      height: 64px;
      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.05);
    }

  .recommend-list .pic-list-item .title {
      margin-bottom: 12px;
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }

  .recommend-list .pic-list-item .bottom-intro {
      font-size: 12px;
      font-weight: 400;
      color: #999999;
    }

  .recommend-list .pic-list-item .bottom-intro .bkColor {
        display: inline-block;
        top: 2px;
        margin-right: 2px;
        position: relative;
        display: inline-block;
      }

  .recommend-list .pic-list-item .bottom-intro .iconBook {
        display: inline-block;
        width: 5.33rem;
      }

  .recommend-list .pic-list-item .bottom-intro .icon-listnum {
        height: 12px;
        width: 12px;
        top: 2px;
        margin-right: 2px;
        position: relative;
        display: inline-block
      }

  .recommend-list .pic-list-item .bottom-intro .icon-listnum::before {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50%;
}

  .recommend-list .pic-list-item .bottom-intro .icon-open::before {
        background-image: url('https://sss.qtfm.cn/v3/play-fa.png');
      }

  .recommend-list .pic-list-item .bottom-intro .icon-listnum::before {
        background-image: url('https://sss.qtfm.cn/v3/count-fa.png');
      }

  .recommend-list .short-item {
    width: 65%
  }

  .recommend-list .short-item.desc {
  -webkit-line-clamp: 1;
}

  .recommend-list .open-app {
    width: 64px;
    float: left;
    height: 28px;
    line-height: 28px;
    text-align: center;
    color: #fd5353;
    border: 1px solid #fd5353;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 400;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }

.channel-basic {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 28px 0 0 0;
  background-color: #fff;
  font-size: 15px;
}

  .channel-basic .cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
  }

  .channel-basic .cover .img {
      width: 100%;
      height: 100%;
      background-color: #fff;
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
    }

  .channel-basic .cover .btn {
      position: absolute;
      width: 54px;
      height: 54px;
    }

  .channel-basic .cover .info {
      position: absolute;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      height: 20px;
      padding: 0 6px;
      left: 0;
      bottom: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
      border-radius: 0px 0px 5px 5px;
    }

  .channel-basic .cover .info .icon {
        width: 8px;
        height: 8px;
        margin-right: 2px;
      }

  .channel-basic .cover .info .bkColor{
        color: white;
        display: inline;
      }

  .channel-basic .cover .info .audc {
        font-size: 10px;
        font-weight: 500;
        color: #fff;
      }

  .channel-basic .title {
    font-size: 20px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
  }

  .channel-basic .desc {
    display: flex;
    align-items: center;
    margin: 0 16px 24px 16px;
    width: calc(100% - 32px);
    font-size: 13px;
    font-weight: 400;
    color: #333;
  }

  .channel-basic .desc .btn {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-shrink: 0;
    }

  .channel-basic .desc .btn .text {
        color: #fd5353;
      }

  .channel-basic .desc .btn .arrow {
        width: 16px;
        height: 16px;
      }

  .channel-basic .folded {
    flex-direction: row;
  }

  .channel-basic .folded .content {
      flex-grow: 1;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

  .channel-basic .unfolded {
    flex-direction: column;
  }

  .channel-basic .full-btn {
    width: 226px;
    height: 44px;
    margin: 0 0 20px 0;
    background: linear-gradient(180deg, rgba(255, 139, 139, 1) 0%, rgba(253, 83, 83, 1) 100%);
    box-shadow: 0px 4px 20px -6px rgba(253, 83, 83, 1);
    border-radius: 22px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    line-height: 44px;
    text-align: center;
    animation: breath 1s ease-in-out infinite;
  }

  .channel-basic .full-btn-no-animation {
    width: 226px;
    height: 44px;
    margin: 0 0 20px 0;
    background: linear-gradient(180deg, rgba(255, 139, 139, 1) 0%, rgba(253, 83, 83, 1) 100%);
    box-shadow: 0px 4px 20px -6px rgba(253, 83, 83, 1);
    border-radius: 22px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    line-height: 44px;
    text-align: center;
  }

.modal-wrapper {
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 19999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

  .modal-wrapper .modal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 280px;
    border-radius: 8px;
    background-color: #fff;
    animation: fade-in 0.5s ease forwards;
  }

  .modal-wrapper .modal .top-panel {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      box-sizing: border-box;
      border-radius: 8px 8px 0 0;
    }

  .modal-wrapper .modal .default {
      margin: 0;
      padding: 44px 80px 0 80px;
    }

  .modal-wrapper .modal .default .container {
        position: relative;
        width: 120px;
        height: 120px;
      }

  .modal-wrapper .modal .default .cover {
        position: relative;
        width: 100%;
        height: 100%;
        background: rgba(216, 216, 216, 1);
        border-radius: 5px;
        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
      }

  .modal-wrapper .modal .default .info {
        position: absolute;
        width: 100%;
        height: 20px;
        left: 0;
        bottom: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
        border-radius: 0px 0px 5px 5px;
        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
        font-size: 12px;
        color: #fff;
        text-align: center;
      }

  .modal-wrapper .modal .download {
      margin: 0;
      padding: 44px 20px 32px 20px;
      background: linear-gradient(180deg, rgba(255, 198, 198, 1) 0%, rgba(255, 240, 240, 1) 100%);
    }

  .modal-wrapper .modal .download .img {
        width: 64px;
        height: 64px;
      }

  .modal-wrapper .modal .speed {
      margin: 0;
      padding: 44px 50px 32px 50px;
      background: linear-gradient(180deg, rgba(255, 198, 198, 1) 0%, rgba(255, 240, 240, 1) 100%);
    }

  .modal-wrapper .modal .speed .text-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

  .modal-wrapper .modal .speed .text-btn .btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          border-radius: 18px;
          background: linear-gradient(180deg, rgba(255, 139, 139, 1) 0%, rgba(253, 83, 83, 1) 100%);
          box-shadow: 0px 4px 20px -6px rgba(253, 83, 83, 1);
        }

  .modal-wrapper .modal .speed .text-btn .btn img {
            width: 20px;
            height: 20px;
          }

  .modal-wrapper .modal .speed .text-btn .btn div {
            font-size: 12px;
            font-weight: 600;
            color: #fff;
          }

  .modal-wrapper .modal .speed .text-btn .text {
          font-size: 10px;
          font-weight: 400;
          color: #fd5353;
          margin-top: 8px;
        }

  .modal-wrapper .modal .bottom-panel {
      width: 100%;
      margin: 0;
      padding: 26px 0 30px 0;
      text-align: center;
    }

  .modal-wrapper .modal .bottom-panel .text {
        font-size: 15px;
        font-weight: 400;
        color: #333;
        margin-bottom: 18px;
        white-space: pre-line;
      }

  .modal-wrapper .modal .bottom-panel .download-btn {
        display: inline-block;
        width: 226px;
        height: 44px;
        background: linear-gradient(180deg, rgba(255, 139, 139, 1) 0%, rgba(253, 83, 83, 1) 100%);
        box-shadow: 0px 4px 20px -6px rgba(253, 83, 83, 1);
        border-radius: 22px;
        text-align: center;
        font-size: 18px;
        font-weight: 500;
        color: #fff;
        line-height: 44px;
        animation: breath 1s ease-in-out infinite;
      }

  .modal-wrapper .modal .bottom-panel .download-btn-no-animation {
        display: inline-block;
        width: 226px;
        height: 44px;
        background: linear-gradient(180deg, rgba(255, 139, 139, 1) 0%, rgba(253, 83, 83, 1) 100%);
        box-shadow: 0px 4px 20px -6px rgba(253, 83, 83, 1);
        border-radius: 22px;
        text-align: center;
        font-size: 18px;
        font-weight: 500;
        color: #fff;
        line-height: 44px;
      }

  .modal-wrapper .modal .close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 16px;
      height: 16px;
    }

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.radio-list {
  //margin: 8px 0 0 0;
  padding: 16px 0 0 0 !important;
  background-color: #fff;
}

  .radio-list .title-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 12px;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .radio-list .title-wrapper .title {
      font-size: 18px;
      font-weight: 500;
      color: #333;
    }

  .radio-list .title-wrapper .batch-download {
      color: #fd5353;
      font-size: 14px;
    }

  .radio-list .list {
    width: 100%;
  }

  .radio-list .list .item {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 12px 16px;
      box-shadow: 0px 1px 0px 0px rgba(234, 234, 234, 1);
    }

  .radio-list .list .item .link-area {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-grow: 1;
      }

  .radio-list .list .item .link-area .icon {
          flex-shrink: 0;
          width: 24px;
          height: 24px;
        }

  .radio-list .list .item .link-area .content {
          text-align: left;
          flex-grow: 1;
          margin: 0 10px;
        }

  .radio-list .list .item .link-area .content .title {
            font-size: 16px;
            font-weight: 400;
            margin: 0;
          }

  .radio-list .list .item .link-area .content .title .badge {
              color: #999;
              margin-right: 8px;
            }

  .radio-list .list .item .link-area .content .title .active {
              color: #fd5353;
            }

  .radio-list .list .item .link-area .content .title .text {
              color: #333;
              font-size: 16px;
              font-weight: 400;
              margin: 0;
              display: inline-block;
            }

  .radio-list .list .item .link-area .content .info {
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: 12px;
            font-weight: 400;
            color: #999;
            margin-top: 10px;
          }

  .radio-list .list .item .link-area .content .info .time {
              flex-shrink: 0;
            }

  .radio-list .list .item .link-area .content .info .sep {
              display: inline-block;
              width: 1px;
              height: 12px;
              margin: 0 4px;
              background-color: #d8d8d8;
              flex-shrink: 0;
            }

  .radio-list .list .item .link-area .content .info .broadcasters {
              width: 0;
              flex-grow: 1;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }

  .radio-list .list .item .btn {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
      }

  .radio-list .more-btn {
    display: block;
    font-size: 13px;
    font-weight: 400;
    padding: 16px 0 20px 0;
    text-align: center;
    color: #fd5353;
  }

.channel-list {
  //margin: 8px 0 0 0;
  padding: 16px 0 0 0 !important;
  background-color: #fff;
}

  .channel-list .title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin: 0 16px 12px 16px;
  }

  .channel-list .list {
    width: 100%;
  }

  .channel-list .list .item-line {
      background: #ebebeb;
      height: 1px;
      width: calc(100% - 64px);
      transform: translateX(80px);
    }

  .channel-list .list .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      //box-shadow: 0px 1px 0px 0px rgba(234, 234, 234, 1);
    }

  .channel-list .list .item .m-radio-list-wrap-item {
        display: inline-block;
        flex: 1 0;
      }

  .channel-list .list .item .m-page-channel-list-like {
        border-radius: 14px;
        border: 1px solid rgba(253, 83, 83, 1);
        height: 17px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(253, 83, 83, 1);
        padding: 5px 20px;
      }

  .channel-list .list .item .channel-list-info-wrap {
        display: flex;
        flex: 1 0;
      }

  .channel-list .list .item .channel-list-img {
        padding-right: 12px;
      }

  .channel-list .list .item .content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        text-align: left;
        flex-grow: 1;
        margin: 0 10px 0 0;
        height: 48px;
      }

  .channel-list .list .item .content .title {
          font-size: 16px;
          font-weight: 400;
          margin: 0;
          color: #333;
          overflow: hidden;
          -webkit-line-clamp: 1;
          /* 以下注释误删, 否则-webkit-box-orient属性不生效 */
          /*! autoprefixer: off */
          -webkit-box-orient: vertical;
          /* autoprefixer: on */
        }

  .channel-list .list .item .content .info {
          display: -webkit-box;
          font-size: 12px;
          font-weight: 400;
          color: #999;
          overflow: hidden;
          -webkit-line-clamp: 1;
          /* 以下注释误删, 否则-webkit-box-orient属性不生效 */
          /*! autoprefixer: off */
          -webkit-box-orient: vertical;
          /* autoprefixer: on */
        }

  .channel-list .list .item .cover {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.05);
      }

  .channel-list .more-btn {
    display: block;
    font-size: 13px;
    font-weight: 400;
    padding: 16px 0 20px 0;
    text-align: center;
    color: #fd5353;
  }

.live-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 100px 15px 0 15px;
  z-index: 10001;
  background-color: rgba(0, 0, 0, 0.8);
}
  .live-dialog .popup-fg {
    max-width: 480px;
    height: 480px;
    margin-left: auto;
    margin-right: auto;
    background: url(//sss.qtfm.cn/v2/images/popup.png) no-repeat center top;
    background-size: contain;
  }
  .live-dialog .popup-fg .popup-info {
      padding-top: 55%;
      text-align: center;
    }
  .live-dialog .popup-fg .popup-info .btn {
        display: inline-block;
        line-height: 30px;
        cursor: pointer;
        margin: 20px 10px;
        width: 40%;
        background-color: transparent;
        border: 1px solid red;
        color: red;
        border-radius: 30px;
      }
  .live-dialog .popup-fg .popup-info .cancel {
        background-color: #dcdee3;
      }
  .live-dialog .popup-fg .popup-info .download {
        color: #fff;
        background-color: #feaa26;
      }

.m-page-attr-toast {
  position: fixed;
  top: 100px;
  width: 60%;
  left: 20%;
  border-radius: 20px;
  padding: 10px 0;
  background: #eee;
  text-align: center;
  color: #333;
  box-shadow: 0px 4px 20px -6px #eee;
}
.m-page-attr-empty-list {
  height: 100px;
  width: 100%;
  line-height: 100px;
  text-align: center;
}

.m-page-attr-detail-list-wrap .load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 64px;
    border-top: 1px solid #eee
  }
  .m-page-attr-detail-list-wrap .load-more > .wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
}
  .m-page-attr-detail-list-wrap .load-more > .wrapper > .icon {
    width: 13px;
    height: 13px;
    margin-right: 5px;
    animation: spin 1s linear infinite;
}
  .m-page-attr-detail-list-wrap .load-more > .wrapper > .text {
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(253, 83, 83, 1);
}

.m-page-attr-detail-list-wrap {
  padding: 0 16px;
  background: #fff;
}
  .m-page-attr-detail-list-wrap .m-page-attr-detail-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 12px 0;
    padding: 0;
  }
  .m-page-attr-detail-list-wrap .m-page-attr-detail-list-item > div.cover-wrapper {
      position: relative;
    }
  .m-page-attr-detail-list-wrap .m-page-attr-detail-list-item > div.cover-wrapper .cover {
        flex-shrink: 0;
        width: 80px;
        height: 80px;
        border-radius: 5px;
        border: 1px solid rgba(0, 0, 0, 0.05);
      }
  .m-page-attr-detail-list-wrap .m-page-attr-detail-list-item .content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-left: 12px;
      width: 0;
      flex-grow: 1;
    }
  .m-page-attr-detail-list-wrap .m-page-attr-detail-list-item .content .title {
        width: 100%;
        margin-bottom: 6px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow-x: hidden;
      }
  .m-page-attr-detail-list-wrap .m-page-attr-detail-list-item .content .desc {
        width: 100%;
        margin-bottom: 6px;
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
  .m-page-attr-detail-list-wrap .m-page-attr-detail-list-item .content .info {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start
      }
  .m-page-attr-detail-list-wrap .m-page-attr-detail-list-item .content .info > .info-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  margin-right: 12px;
}
  .m-page-attr-detail-list-wrap .m-page-attr-detail-list-item .content .info > .info-item > .icon {
  width: 12px;
  height: 12px;
  margin-right: 4px;
}
  .m-page-attr-detail-list-wrap .m-page-attr-detail-list-item .content .info > .info-item .bkColor {
            color: rgba(153, 153, 153, 1);
            display: inline-block;
            margin-right: 4px;
}
  .m-page-attr-detail-list-wrap .m-page-attr-detail-list-item .content .info > .info-item .text {
            font-size: 11px;
            font-family: PingFangSC-Light, PingFang SC;
            font-weight: 300;
            color: rgba(153, 153, 153, 1);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow-x: hidden;
}
  .m-page-attr-detail-list-wrap .m-page-attr-detail-list-item .content .info > .info-item:last-of-type {
  width: 0;
  flex-grow: 1;
  margin-right: 0;
}

.m-page-cat-detail-filter {
  background: #fff;
  padding: 0 16px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
  .m-page-cat-detail-filter .m-page-cat-detail-filter-list {
    //display: flex;
    width: 100%;
    overflow: scroll;
    white-space: nowrap;
    margin-top: 13px
  }
  .m-page-cat-detail-filter .m-page-cat-detail-filter-list:first-child {
  margin-top: 0;
}
  .m-page-cat-detail-filter .m-page-cat-detail-filter-list .each-filter-list {
      display: inline-block;
      padding: 3px 10px;
      background: #fff;
      font-size: 13px;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
}
  .m-page-cat-detail-filter .m-page-cat-detail-filter-list .each-filter-list.is-active {
  background: rgba(247, 247, 247, 1);
  font-weight: 500;
  color: rgba(255, 49, 58, 1);
  border-radius: 13px;
}

::-webkit-scrollbar {
  display: none;
  width: 0;
  background: transparent;
}

.white-tab {
  background: #ffffff;
}

.no-fix {
  position: relative;
}

.no-fix-nav {
  margin-top: 0;
  overflow-x: hidden;
}

.btn-pannel {
  width: 100%;
  background-color: #fff;
  text-align: center;
  padding: 24px 0 20px 0;
}

.btn-pannel .channel-btn {
    display: inline-block;
    width: 226px;
    height: 44px;
    background: linear-gradient(180deg, rgba(255, 139, 139, 1) 0%, rgba(253, 83, 83, 1) 100%);
    box-shadow: 0px 4px 20px -6px rgba(253, 83, 83, 1);
    border-radius: 22px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    line-height: 44px;
    text-align: center;
    animation: breath 1s ease-in-out infinite;
  }

.btn-pannel .channel-btn-no-animation {
    display: inline-block;
    width: 226px;
    height: 44px;
    background: linear-gradient(180deg, rgba(255, 139, 139, 1) 0%, rgba(253, 83, 83, 1) 100%);
    box-shadow: 0px 4px 20px -6px rgba(253, 83, 83, 1);
    border-radius: 22px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    line-height: 44px;
    text-align: center;
  }

.program-list-btn {
  width: 100%;
  padding: 16px 0 20px 0;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  color: #fd5353;
  background-color: #fff;
}

.float-btn {
  position: fixed;
  color: white;
  text-align: center;
  line-height: 36px;
  width: 110px;
  height: 36px;
  bottom: 46px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 139, 139, 1) 0%, rgba(253, 83, 83, 1) 100%);
  box-shadow: 0px 4px 20px -6px rgba(253, 83, 83, 1);
  border-radius: 20px;
}

.keyword-hots {
  background: #ffffff;
}

.keyword-hots .title {
    padding: 0 16px;
    color: #333;
  }

.keyword-hots .keyword-hot {
    padding: 0px 21px;
    padding-top: 20px;
  }

.keyword-hots .keyword-hot .hotWord {
      margin: 15px auto;
      text-align: center;
      min-width: 57px;
      line-height: 1em;
      display: inline-block;
      border: 1px solid #dcdee3;
      border-radius: 15px;
      padding: 6px 15px;
      margin: 5px 10px 10px 0;
      cursor: pointer;
      font-weight: 400;
      color: #b6b3b3;
      font-size: 12px;
      line-height: 17px
    }

.keyword-hots .keyword-hot .hotWord:hover {
  border: 1px solid #fd5353;
  transition: border 0.3s linear;
}

.keyword-hots .keyword-hot .hotWord:hover a {
          transition: color 0.3s linear;
          color: #fd5353;
}

.keyword-hots .more {
    cursor: pointer;
    position: relative;
    margin: 10px auto;
    text-align: center;
  }

.keyword-hots .more a {
      font-size: 13px;
      line-height: 18px;
      color: #fd5353;
    }

.m-com-pod-info {
  background: #fff;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}
  .m-com-pod-info .m-com-open-app {
    width: 100%;
    font-size: 13px;
    font-weight: 400;
    color: rgba(253, 83, 83, 1);
    display: inline-block;
    text-align: center;
    padding-top: 16px;
  }
  .m-com-pod-info .m-com-open-app .m-com-open-app-arrow {
      transform: rotate(-90deg) translateX(-2px);
      width: 14px;
    }

.m-com-pod-info-title {
  font-size: 18px;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}

.m-com-pod-info-basic {
  display: flex;
  align-items: center;
  padding-top: 16px;
}
  .m-com-pod-info-basic .pod-nick-name {
    font-size: 16px;
    font-weight: 400;
    color: rgba(34, 34, 34, 1);
    margin-top: 0;
    margin-bottom: 0;
  }
  .m-com-pod-info-basic .m-com-pod-info-basic-img {
    width: 42px;
    height: 42px;
    border-radius: 21px;
    background: rgba(216, 216, 216, 1);
    overflow: hidden;
  }
  .m-com-pod-info-basic .m-com-pod-info-basic-img img {
      width: 42px;
      height: 42px;
      border-radius: 21px;
    }
  .m-com-pod-info-basic .m-com-pod-info-basic-info {
    padding-left: 12px;
    flex: 1 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .m-com-pod-info-basic .m-com-pod-info-basic-info .m-com-pod-info-basic-info-left {
      flex: 1 0;
      font-size: 13px;
      font-weight: 300;
    }
  .m-com-pod-info-basic .m-com-pod-info-basic-info .m-com-pod-info-basic-info-left .single-line {
        max-width: 208px;
      }
  .m-com-pod-info-basic .m-com-pod-info-basic-info .m-com-pod-info-basic-info-right {
      border-radius: 14px;
      border: 1px solid rgba(253, 83, 83, 1);
      height: 17px;
      font-size: 12px;
      font-weight: 400;
      color: rgba(253, 83, 83, 1);
      padding: 5px 20px;
      margin-left: 14px;
    }

.m-com-pod-info-list {
  display: grid;
  grid-template-columns: repeat(3, 108px);
  grid-row-gap: 20px;
  justify-content: space-between;
  padding-top: 16px;
}
  .m-com-pod-info-list .m-com-pod-info-list-item-img {
    position: relative;
    width: 108px;
    height: 108px;
    margin-bottom: 6px;
  }
  .m-com-pod-info-list .m-com-pod-info-list-item-img img {
      width: 100%;
      height: 100%;
      border-radius: 5px;
      border: 1px solid rgba(0, 0, 0, 0.05);
      box-sizing: border-box;
    }
  .m-com-pod-info-list .m-com-pod-info-list-item {
    position: relative;
    width: 108px;
    font-size: 13px;
    font-weight: 400;
  }
  .m-com-pod-info-list .m-com-pod-info-list-item .m-com-pod-info-list-item-play-count {
      position: absolute;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: start;
      width: calc(100% - 2px);
      height: 20px;
      left: 1px;
      top: 87px;
      padding: 0 7px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
      border-radius: 0px 0px 5px 5px;
      box-sizing: border-box;
    }
  .m-com-pod-info-list .m-com-pod-info-list-item .m-com-pod-info-list-item-play-count .bkcolor{
        color: white;
        display: inline;
      }
  .m-com-pod-info-list .m-com-pod-info-list-item .m-com-pod-info-list-item-play-count img {
        width: 8px;
        height: 8px;
        margin-right: 2px;
      }
  .m-com-pod-info-list .m-com-pod-info-list-item .m-com-pod-info-list-item-play-count span {
        font-size: 10px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }

.openmore {
  text-align: center;
  color: #fd5353;
  font-size: 13px;
  background: #fff;
  padding-top: 16px;
  padding-bottom: 24px;
}

.list-title-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  padding: 16px 16px 12px 16px;
  background: #fff;
}

  .list-title-wrapper .list-title {
    color: #333;
    font-size: 18px;
  }

  .list-title-wrapper .download-all {
    color: #fd5353;
    font-size: 14px;
  }

.relevant-panel {
  background-color: #fff;
  //margin-top: 8px;
  padding-top: 16px;
}

  .relevant-panel .title {
    margin: 0 16px 16px 16px;
    font-size: 18px;
    font-weight: 500;
    color: #333;
  }

  .relevant-panel .btn-container {
    text-align: center;
  }

  .relevant-panel .btn-container .find-more {
      font-size: 13px;
      font-weight: 400;
      color: #fd5353;
      text-align: center;
      margin-top: 16px;
      margin-bottom: 24px;
      display: inline-block;
    }

.m-tag-show-attr {
  padding: 0 16px;
  width: 100%;
  font-size: 13px;
  font-weight: 400;
  box-sizing: border-box;
  overflow-y: hidden;
}

  .m-tag-show-attr .badge {
    display: inline-block;
    text-align: center;
    padding: 6px 15px;
    color: rgba(102, 102, 102, 1);
    background: rgba(239, 239, 239, 1);
    border-radius: 15px;
    margin-right: 10px;
    margin-bottom: 12px;
  }

.relevant-list {
  margin: 0 16px;
}
  .relevant-list .item-line {
    background: #ebebeb;
    height: 1px;
    width: calc(100% - 64px);
    transform: translateX(80px);
  }
  .relevant-list .item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: #ebebeb;
  }
  .relevant-list .item .m-pod-link {
      flex: 1 0;
    }
  .relevant-list .item .m-channel-like {
      border-radius: 14px;
      border: 1px solid rgba(253, 83, 83, 1);
      height: 17px;
      font-size: 12px;
      font-weight: 400;
      color: rgba(253, 83, 83, 1);
      padding: 5px 20px;
      //width: 64px;
      display: inline-block;
    }
  .relevant-list .item .content {
      //display: flex;
      //align-items: center;
      //justify-content: space-between;
      padding: 14px 0;
    }
  .relevant-list .item .content .m-channel-info {
        display: flex;
        flex: 1 0;
        align-items: center;
      }
  .relevant-list .item .content .info {
        flex: 1 0;
        padding-left: 12px;
        padding-right: 12px;
        color: rgba(153, 153, 153, 1);
        font-size: 12px;
        font-weight: 400;
      }
  .relevant-list .item .content .info .m-channel-info-title {
          font-size: 16px;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          padding-bottom: 5px;
        }
  .relevant-list .item .content .info .info-bottom {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          margin-top: 4px;
          font-size: 12px;
          font-weight: 400;
          color: #999;
        }
  .relevant-list .item .content .info .info-bottom .app-tag {
            color: #fd5353;
          }
  .relevant-list .item .content .info .info-bottom .bkColor {
            display: inline;
          }
  .relevant-list .item .content .info .info-bottom span {
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            width: 80px;
          }
  .relevant-list .item .content .info .info-bottom span .icon {
              display: inline-block;
              width: 12px;
              height: 12px;
              margin-right: 2px;
            }
  .relevant-list .item .content .cover {
        flex-shrink: 0;
        width: 64px;
        height: 64px;
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.05);
      }
  .relevant-list .item .list-btn {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

.vchannel-basic-pannel {
  padding: 0 16px;
  background-color: #fff;
}

  .vchannel-basic-pannel .channel-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 0 8px 0;
  }

  .vchannel-basic-pannel .channel-intro div.cover-wrapper {
      position: relative;
    }

  .vchannel-basic-pannel .channel-intro .cover {
      position: relative;
      width: 120px;
      height: 120px;
      margin-bottom: 12px;
    }

  .vchannel-basic-pannel .channel-intro .cover .cover-img {
        width: 100%;
        height: 100%;
        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
      }

  .vchannel-basic-pannel .channel-intro .cover .info-bar {
        position: absolute;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 20px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
        border-radius: 0px 0px 5px 5px;
        padding: 0 6px;
        box-sizing: border-box;
      }

  .vchannel-basic-pannel .channel-intro .cover .info-bar .bkColor{
          color: white;
          display: inline;
        }

  .vchannel-basic-pannel .channel-intro .cover .info-bar .fa {
          width: 8px;
          height: 8px;
          margin-right: 2px;
        }

  .vchannel-basic-pannel .channel-intro .cover .info-bar .play-count {
          font-size: 10px;
          font-weight: 500;
          color: #fff;
        }

  .vchannel-basic-pannel .channel-intro .title {
      font-size: 20px;
      font-weight: 500;
      color: #333;
      margin-bottom: 6px;
    }

  .vchannel-basic-pannel .channel-intro .pods {
      font-size: 12px;
      font-weight: 400;
      color: #666;
    }

  .vchannel-basic-pannel .channel-intro .pods a {
        margin-left: 4px;
      }

  .vchannel-basic-pannel .app-btn {
    display: block;
    padding: 0.5rem 0;
    line-height: 1.3rem;
    text-align: center;
    position: relative;
    color: #e6534f
  }

  .vchannel-basic-pannel .app-btn::after {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #e6534f;
  border-radius: 6.67rem;
  transform: scale(0.5);
  transform-origin: 0 0;
}

  .vchannel-basic-pannel .cps-btn {
    padding: 0.5rem 0;
    line-height: 1.3rem;
    text-align: center;
    background: linear-gradient(-127deg, #fd5353 0%, #ff8a8a 100%);
    color: white;
    border-radius: 6.67rem;
    margin-top: 1rem;
  }

.qt-weibo-share-modal {
  width: 100%;
  transform: translateY(4.8rem);
}
  .qt-weibo-share-modal img {
    width: 100%;
  }
.m-modal-inner {
  transform: translateY(-100vh);
}

.c-mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.c-popup {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 800;
}

.qt-modal-red-inner {
  transform: translateY(-100vh);
}
  .qt-modal-red-inner .qt-red-envelop-share-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }
  .qt-modal-red-inner .qt-red-envelop-share-modal .qt-modal-red-inner-min-content {
      width: 20rem;
      position: relative;
      transform: translateY(4rem);
    }
  .qt-modal-red-inner .qt-red-envelop-share-modal .qt-modal-red-inner-min-content .open-red-envelop {
        position: absolute;
        width: 7rem;
        height: 7rem;
        top: 15rem;
        left: 6.5rem;
      }
  .qt-modal-red-inner .qt-red-envelop-share-modal .close {
      position: absolute;
      top: -3.5rem;
      right: 0;
    }
  .qt-modal-red-inner .qt-red-envelop-share-modal .close img {
        width: 2rem;
        height: 2rem;
      }
  .qt-modal-red-inner .qt-red-envelop-share-modal img.red-envelop {
      width: 20rem;
    }

.desc-panel {
  padding: 0 16px;
  background-color: #fff;
  font-size: 13px;
  font-weight: 400;
}

  .desc-panel .btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    outline: 0;
    flex-shrink: 0;
  }

  .desc-panel .btn span {
      color: #fd5353;
    }

  .desc-panel .btn img {
      width: 16px;
      height: 16px;
    }

.folded {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.folded .content {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #666;
    height: 17px;
  }

.unfolded {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.unfolded .content {
    width: 100%;
    color: #666;
    padding-bottom: 16px;
  }

.vchannel-play-list {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  position: relative;
  background-color: #fff;
  box-shadow: 0px 0px 0px 0px rgba(234, 234, 234, 1);
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1px;
}

  .vchannel-play-list .cont {
    display: flex;
    align-items: center;
    flex: 1 0 auto;
    width: 0;
  }

  .vchannel-play-list .cont > div {
      padding-left: 0.8rem;
      width: 100%;
    }

  .vchannel-play-list .cont .title {
      margin: 0px 0px auto;
      line-height: 20px;
      font-size: 14px;
      position: relative;
      top: -5px;
      color: #333;
      width: 90%;
    }

  .vchannel-play-list .cont .items {
      color: #999;
      font-size: 12px;
      font-weight: 300;
      margin-top: 10px;
    }

  .vchannel-play-list .cont .items > div {
        display: inline-block;
        vertical-align: middle;
      }

  .vchannel-play-list .cont .items .time,
      .vchannel-play-list .cont .items .playcount {
        margin-right: 15px;
      }

  .vchannel-play-list .cont .items i {
        height: 12px;
        width: 12px;
        top: 2px;
        margin-right: 4px;
        position: relative;
        display: inline-block
      }

  .vchannel-play-list .cont .items i::before {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50%;
}

  .vchannel-play-list .cont .items .play-count::before {
        background-image: url('https://sss.qtfm.cn/v3/play-fa.png');
      }

  .vchannel-play-list .cont .items .duration::before {
        background-image: url('https://sss.qtfm.cn/v3/time-fa.png');
      }

  .vchannel-play-list .cont .items .date-time::before {
        background-image: url('https://sss.qtfm.cn/v3/update-fa.png');
      }

  .vchannel-play-list .download-icon {
    margin-left: 0.8rem;
  }

  .vchannel-play-list img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .vchannel-play-list .unpaid {
    border-color: rgba(230, 83, 79, 0.5);
    color: #e6534f;
    flex: 0 1 auto;
    display: inline-block;
    padding: 2px 3.6px;
    font-size: 12px;
    line-height: 1.1;
    text-align: center;
    border-radius: 2px;
    border: 1px solid;
    margin-left: 10px;
  }

  .vchannel-play-list .vip-listen {
    border-color: #c1884b;
    color: #c1884b;
    flex: 0 1 auto;
    display: inline-block;
    padding: 2px 3.6px;
    font-size: 12px;
    line-height: 1.1;
    text-align: center;
    border-radius: 2px;
    border: 1px solid;
    margin-left: 10px;
  }

@keyframes breath {
  50% {
    transform: scale(1.05);
  }
}
.download-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10;
}
.download-dialog > .container {
    height: 13.3rem;
    width: 100%;
    background: white;
    position: absolute;
    bottom: 0;
    padding: 1rem;
    box-sizing: border-box;
  }
.download-dialog > .container .title {
      font-size: 1.2rem;
      color: #333333;
    }
.download-dialog > .container .desc {
      margin-top: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.9rem;
      color: #333333;
    }
.download-dialog > .container .progress-bar {
      background: #e9e9e9;
      border-radius: 0.2rem;
      height: 0.4rem;
      margin-top: 0.5rem;
      position: relative;
    }
.download-dialog > .container .progress-bar .progress {
        position: absolute;
        left: 0;
        height: 100%;
        background: #fd5353;
        border-radius: 0.2rem;
      }
.download-dialog > .container .hint {
      margin-top: 1rem;
      text-align: center;
      font-size: 0.8rem;
      color: #666666;
    }
.download-dialog > .container > .btn {
      background: #fd5353;
      border-radius: 1.5rem;
      font-size: 1rem;
      color: #ffffff;
      margin: 1.2rem auto 0;
      display: block;
      text-align: center;
      padding: 0.5rem 0;
      width: 87%;
      animation: breath 1s ease-in-out infinite;
    }

.home-root .download-modal-wrapper {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
  }

    .home-root .download-modal-wrapper .download-modal {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width: 280px;
      height: auto;
      background: #fff;
      border-radius: 8px;
      padding: 24px 0 16px 0;
      box-sizing: border-box;
      text-align: center;
    }

    .home-root .download-modal-wrapper .download-modal .download-modal-img {
        width: 120px;
        height: 120px;
        background: rgba(216, 216, 216, 1);
        border-radius: 5px;
        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
      }

    .home-root .download-modal-wrapper .download-modal .download-modal-desc {
        margin-top: 16px;
        margin-bottom: 12px;
        color: #333333;
        font-size: 15px;
        font-weight: 400;
        color: #333;
        line-height: 24px;
      }

    .home-root .download-modal-wrapper .download-modal .download-modal-btn {
        display: block;
        width: 226px;
        height: 44px;
        background: linear-gradient(180deg, rgba(255, 139, 139, 1) 0%, rgba(253, 83, 83, 1) 100%);
        box-shadow: 0px 4px 20px -6px rgba(253, 83, 83, 1);
        border-radius: 22px;
        font-size: 18px;
        font-weight: 500;
        color: #fff;
        line-height: 44px;
      }

    .home-root .download-modal-wrapper .download-modal .download-modal-x {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: -44px;
        right: 0;
        width: 28px;
        height: 28px;
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid #fff;
        box-sizing: border-box;
        border-radius: 14px;
      }

    .home-root .download-modal-wrapper .download-modal .download-modal-x img {
          width: 12px;
          height: 12px;
        }
  .home-root .float-btn {
    position: fixed;
    color: white;
    text-align: center;
    line-height: 36px;
    width: 110px;
    height: 36px;
    bottom: 46px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(255, 139, 139, 1) 0%, rgba(253, 83, 83, 1) 100%);
    box-shadow: 0px 4px 20px -6px rgba(253, 83, 83, 1);
    border-radius: 20px;
  }

.vchannel-play-list {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  position: relative;
  background-color: #fff;
  box-shadow: 0px 1px 0px 0px rgba(234, 234, 234, 1);
}

  .vchannel-play-list .cont {
    display: flex;
    align-items: center;
    flex: 1 0 auto;
  }

  .vchannel-play-list .cont > div {
      padding-left: 10px;
      width: 100%;
    }

  .vchannel-play-list .cont .title {
      font-size: 16px;
      font-weight: 400;
      position: relative;
      color: #333;
      top: 0;
      width: 90%;
    }

  .vchannel-play-list .cont .items {
      color: #999;
      font-size: 12px;
      font-weight: 300;
      margin-top: 10px;
    }

  .vchannel-play-list .cont .items > div {
        display: inline-block;
        vertical-align: middle;
      }

  .vchannel-play-list .cont .items .time,
      .vchannel-play-list .cont .items .playcount {
        margin-right: 15px;
      }

  .vchannel-play-list .cont .items i {
        height: 12px;
        width: 12px;
        top: 2px;
        margin-right: 4px;
        position: relative;
        display: inline-block
      }

  .vchannel-play-list .cont .items i::before {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50%;
}

  .vchannel-play-list .cont .items .play-count::before {
        background-image: url('https://sss.qtfm.cn/v3/play-fa.png');
      }

  .vchannel-play-list .cont .items .duration::before {
        background-image: url('https://sss.qtfm.cn/v3/time-fa.png');
      }

  .vchannel-play-list .cont .items .date-time::before {
        background-image: url('https://sss.qtfm.cn/v3/update-fa.png');
      }

  .vchannel-play-list .download-icon {
    margin-left: 20px;
  }

  .vchannel-play-list img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .vchannel-play-list .unpaid {
    border-color: rgba(230, 83, 79, 0.5);
    color: #e6534f;
    flex: 0 1 auto;
    display: inline-block;
    padding: 2px 3.6px;
    font-size: 12px;
    line-height: 1.1;
    text-align: center;
    border-radius: 2px;
    border: 1px solid;
  }

  .vchannel-play-list .vip-listen {
    border-color: #c1884b;
    color: #c1884b;
    flex: 0 1 auto;
    display: inline-block;
    padding: 2px 3.6px;
    font-size: 12px;
    line-height: 1.1;
    text-align: center;
    border-radius: 2px;
    border: 1px solid;
  }

.play-board {
  padding: 16px 0 20px;
  background-color: #fff;
}

  .play-board .program-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
  }

  .play-board .program-panel a {
      color: #e6534f;
      flex: 0 0 auto
    }

  .play-board .program-panel a.disable {
  color: #999;
}

  .play-board .program-panel a > div {
        font-size: 0;
        padding: 0.55rem 0.3rem;
        border: 1px solid #dbdbdb;
}

  .play-board .program-panel a > div .vertical {
          font-size: 0.55rem;
          line-height: 1.2;
          width: 0.55rem;
          word-break: break-all;
          display: inline-block;
          vertical-align: middle;
        }

  .play-board .program-panel a > div img {
          display: inline-block;
          vertical-align: middle;
          width: 6px;
        }

  .play-board .program-panel a div.forward {
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        border-left-width: 0;
        padding-right: 10px;
        margin-right: 8px;
}

  .play-board .program-panel a div.forward > img {
          margin-right: 6px;
        }

  .play-board .program-panel a div.backward {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        border-right-width: 0;
        padding-left: 10px;
        margin-left: 8px;
}

  .play-board .program-panel a div.backward > img {
          margin-left: 6px;
        }

  .play-board .program-panel .program {
      cursor: pointer;
      position: relative;
      flex: 0 1 120px;
    }

  .play-board .program-panel .program .cover {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        background-size: cover;
        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
      }

  .play-board .program-panel .program .cover .cover-up {
          background-color: rgba(0, 0, 0, 0.6);
        }

  .play-board .program-panel .program .cover .mask {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          border-radius: 5px;
        }

  .play-board .program-panel .program .cover .mask > .icon {
            flex: 0 0 auto;
            width: 54px;
            height: 54px;
          }

  .play-board .program-panel .program .cover .mask .hint {
            font-size: 12px;
            line-height: 17px;
            color: #fff;
            margin: 25px 7px 11px 7px;
            text-align: center;
          }

  .play-board .program-panel .program .cover .mask .btn {
            color: #fff;
            width: 78px;
            height: 32px;
            margin: 0 0 18px 0;
            background: linear-gradient(
              180deg,
              rgba(255, 139, 139, 1) 0%,
              rgba(253, 83, 83, 1) 100%
            );
            box-shadow: 0px 4px 20px -6px rgba(253, 83, 83, 1);
            border-radius: 16px;
            text-align: center;
            line-height: 32px;
          }

  .play-board .program-panel .program .cover .mask .btn2 {
            color: #764125;
            width: 78px;
            height: 32px;
            margin: 0 0 18px 0;
            background: linear-gradient(
              90deg,
              rgba(254, 231, 204, 1) 0%,
              rgba(247, 203, 152, 1) 100%
            );
            box-shadow: 0px 4px 20px -6px rgba(247, 203, 152, 1);
            border-radius: 16px;
            text-align: center;
            line-height: 32px;
          }

  .play-board .title {
    text-align: center;
    margin: 0 16px 12px 16px;
    color: #333;
    font-weight: 500;
  }

  .play-board .title .audition {
      color: #fff;
      background-color: #8d8;
      font-size: 12px;
      display: inline-block;
      line-height: 20px;
      padding: 0 4px;
      margin-right: 8px;
      vertical-align: text-bottom;
      border-radius: 2px;
    }

  .play-board .btn-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
  }

  .play-board .btn-group .download-btn {
      margin: 0 6px;
      display: block;
      line-height: 28px;
      font-size: 12px;
      text-align: center;
      width: 72px;
      height: 28px;
      color: #fd5353;
      background: #fff;
      border: 1px solid #fd5353;
      border-radius: 14px;
      box-sizing: border-box;
      position: relative;
    }

  .play-board .block {
    margin: 24px auto 0;
    display: block;
    line-height: 44px;
    font-size: 18px;
    text-align: center;
    width: 226px;
    height: 44px;
    max-width: 230px;
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 139, 139, 1) 0%, rgba(253, 83, 83, 1) 100%);
    box-shadow: 0px 4px 20px -6px rgba(253, 83, 83, 1);
    border-radius: 22px;
    animation: breath 1s ease-in-out infinite;
  }

  .play-board .block-no-animation {
    margin: 24px auto 0;
    display: block;
    line-height: 44px;
    font-size: 18px;
    text-align: center;
    width: 226px;
    height: 44px;
    max-width: 230px;
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 139, 139, 1) 0%, rgba(253, 83, 83, 1) 100%);
    box-shadow: 0px 4px 20px -6px rgba(253, 83, 83, 1);
    border-radius: 22px;
  }

  .play-board .richtext {
    padding: 0.8rem 0.8rem 0 0.8rem;
  }

  .play-board .richtext section:not(:last-child) {
      margin-bottom: 0.6rem;
    }

  .play-board .richtext .title {
      margin-bottom: 0.5rem;
      text-align: left;
      font-size: 16px;
      font-weight: 400;
      color: rgba(61, 61, 61, 1);
      line-height: 22px;
    }

  .play-board .richtext .title span {
      display: inline-block;
    }

  .play-board .richtext .content {
      font-size: 14px;
      font-weight: 400;
      color: rgba(61, 61, 61, 1);
    }

  .play-board .linear-gradient {
    height: 169px;
    backface-visibility: hidden;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 49%,
      rgba(255, 255, 255, 1) 100%
    );
  }

  .play-board .linear-gradient .more {
      margin: 130px auto 0px;
      width: 90px;
      font-size: 12px;
      height: 28px;
      cursor: pointer;
      text-align: center;
      background-color: rgba(253, 83, 83, 0.1) !important;
      background-color: rgba(253, 83, 83);
      border-radius: 19px;
    }

  .play-board .linear-gradient .more span {
        display: inline-block;
        vertical-align: middle;
        color: #fd5353;
        line-height: normal;
        margin: 6px 3px;
      }

  .play-board .linear-gradient .more .arr-bottom {
        display: inline-block;
        width: 5px;
        height: 5px;
        border: 1px solid #fd5353;
        border-top: none;
        border-right: none;
        transform: rotate(-45deg);
        margin: 2px 5px;
      }

/*
 * Colors
 * ========================================================================== */

/* #222 */

/* #404040 */

/* #555 */

/* #777 */

/* #eee */

/*
 * Typography
 * ========================================================================== */

/*
 * Layout
 * ========================================================================== */

/*
 * Media queries breakpoints
 * ========================================================================== */

/* Extra small screen / phone */

/* Small screen / tablet */

/* Medium screen / desktop */

/* Large screen / wide desktop */

/* color profolio */

.progress-panel {
  margin: auto;
  width: 90%;
  max-width: 360px * 0.9;
  display: flex;
  align-items: center;
}

.progress-panel .current-time,
  .progress-panel .duration {
    flex: 0 0 auto;
    min-width: 35px;
    font-size: 12px;
    color: #666;
    font-weight: 400;
  }

.progress-panel .current-time {
    padding-right: 10px;
  }

.progress-panel .duration {
    padding-left: 10px;
  }

.progress-panel .player-slide {
    flex: 1 1 auto;
    position: relative;
    height: 3px;
    background-color: rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }

.progress-panel .player-slide .buffered-slide {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.15);
    }

.progress-panel .player-slide .current-time-slide {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background-color: #e6534f;
    }

.progress-panel .player-slide .btn {
      cursor: pointer;
      position: absolute;
      width: 60px;
      height: 60px;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
    }

.progress-panel .player-slide .btn i {
        display: block;
        position: absolute;
        background-color: rgba(255, 255, 255, 1);
        border: 2px solid rgba(0, 0, 0, 0.15);
        border-radius: 50%;
        top: 35%;
        left: 35%;
        bottom: 35%;
        right: 35%;
        transition: transform 0.1s
      }

.progress-panel .player-slide .btn i.dragging {
  transform: scale(2);
}

.hot-comments {
  background: #fff;
  padding: 0 15px 20px 15px;
}
  .hot-comments .title {
    color: #333;
  }
  .hot-comments .title span {
      display: inline-block;
      vertical-align: middle;
    }
  .hot-comments .title .total {
      margin-left: 6px;
      color: #e6534f;
    }
  .hot-comments .comment {
    position: relative;
    padding: 15px 0;
    display: flex
  }
  .hot-comments .comment::after {
  content: ' ';
  position: absolute;
  display: block;
  height: 1px;
  background-color: #dbdbdb;
  left: 48px;
  bottom: 0;
  right: -15px;
}
  .hot-comments .comment .avatar {
      flex: 0 0 auto;
      height: 38px;
      width: 38px;
      border-radius: 50%;
      margin-right: 10px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50%;
}
  .hot-comments .comment .cont {
      flex: 1 1 auto;
      min-width: 0;
      word-break: break-all;
}
  .hot-comments .comment .cont .nickname {
        margin-bottom: 8px;
        color: #666;
        font-size: 11px;
      }
  .hot-comments .comment .cont .nickname .tag-top{
          display: inline-block;
          padding: 0 2px;
          border-radius: 2px;
          border: 1px solid #FD5353;
          color: #FD5353;
          font-size: 10px;
          font-weight: 400;
          margin-left: 6px;
          height: 12px;
          line-height: 12px;
          position: relative;
          bottom: 1px;
        }
  .hot-comments .comment .cont .time {
        font-size: 12px;
        margin-bottom: 12px;
        color: #999;
      }
  .hot-comments .comment .cont .content {
        font-size: 14px;
      }
  .hot-comments .default img {
      position: relative;
      left: -7px;
      display: block;
      margin: 50px auto 20px;
      width: 50px;
      height: 34px;
    }
  .hot-comments .default .tips {
      color: #666;
      padding-bottom: 50px;
      text-align: center;
    }
  .hot-comments .block {
    display: block;
    text-align: center;
    height: 18px;
    max-width: 270px;
    margin: auto;
    margin-top: 20px;
    font-size: 13px;
    color: #fd5353;
  }
  .hot-comments .arr-left {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border: 1px solid #fd5353;
    border-top: none;
    border-right: none;
    transform: rotate(225deg);
    margin-left: 0;
    margin-top: -0.1rem;
    vertical-align: middle;
  }

/*
 * Colors
 * ========================================================================== */

/* #222 */

/* #404040 */

/* #555 */

/* #777 */

/* #eee */

/*
 * Typography
 * ========================================================================== */

/*
 * Layout
 * ========================================================================== */

/*
 * Media queries breakpoints
 * ========================================================================== */

/* Extra small screen / phone */

/* Small screen / tablet */

/* Medium screen / desktop */

/* Large screen / wide desktop */

/* color profolio */

.tip {
  z-index: 200;
  position: fixed;
  margin: auto;
  max-width: 95%;
  width: 90%;
  left: 0;
  right: 0;
  bottom: 20px;
  background-color: rgba(0, 0, 0, 0.8);
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
  color: white;
  border-radius: 5px;
}

.tip .cross {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    width: 22px;
    transform: translate3d(50%, -50%, 0);
  }

.tip .cont {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 25px 10px 10px;
  }

.tip .cont .audio {
      flex: 0 0 auto;
      height: 28px;
      width: 28px;
    }

.tip .cont .text {
      display: inline-block;
      flex: 1 1 auto;
      padding: 0 12px;
      font-size: 15px;
      min-width: 0;
      color: #efd08e;
    }

.tip .cont a {
      flex: 0 0 auto;
      display: block;
      background-color: #e6534f;
      padding: 0 16px;
      line-height: 30px;
      font-size: 14px;
      color: white;
      border-radius: 2px;
      cursor: pointer;
    }

.slide-enter-active {
  animation: slideInUp 0.5s;
}

.slide-leave-active {
  animation: slideInUp 0.5s reverse;
}

@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.recommend-panel {
  padding-top: 16px;
  background: #fff;
}
  .recommend-panel > .title {
    padding: 1.3rem 1rem 0;
  }
  .recommend-panel > .btn-container {
    text-align: center;
  }
  .recommend-panel > .btn-container .find-more {
      font-size: 13px;
      font-weight: 400;
      color: #fd5353;
      text-align: center;
      margin-top: 16px;
      margin-bottom: 24px;
      display: inline-block;
    }
  .recommend-panel > .btn-container .arr-left {
      display: inline-block;
      width: 0.45rem;
      height: 0.45rem;
      border: 1px solid #fd5353;
      border-top: none;
      border-right: none;
      transform: rotate(225deg);
      margin-left: 0;
      margin-top: -0.1rem;
      vertical-align: middle;
    }

.m-com-channel-detail {
  background: #fff;
  padding: 16px;
}
  .m-com-channel-detail .m-com-channel-detail-open {
    width: 100%;
    text-align: center;
    color: rgba(253, 83, 83, 1);
    font-size: 13px;
    padding-top: 10px;
  }
  .m-com-channel-detail .m-com-channel-detail-open img {
      width: 13px;
      padding-left: 4px;
      transform: translateY(1px);
    }
  .m-com-channel-detail .program_topic {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .m-com-channel-detail .program_topic_item {
    color: #4A90E2;
    padding-right: 16px;
    margin: 0;
    line-height: 2;
    font-size: 14px;
    font-weight: normal;
  }

.m-channel-detail-inner {
  height: 42px;
  overflow: hidden;
  padding-top: 4px
}
.m-channel-detail-inner.is-show-all {
  height: auto;
  overflow: auto;
}

.vip-dialog {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
  .vip-dialog .dialog {
    width: 280px;
    height: 380px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .vip-dialog .dialog .content-container {
      position: absolute;
      top: 0;
      width: 100%;
      height: 310px;
      background: #fff;
      border-radius: 8px;
    }
  .vip-dialog .dialog .content-container > .header {
        width: 100%;
        height: 110px;
        background: url('https://sss.qtfm.cn/v3/illustration@3x.png') no-repeat center;
        background-size: contain;
      }
  .vip-dialog .dialog .content-container > .icon-group {
        width: 100%;
        height: 82px;
        display: flex;
        align-items: center;
        justify-content: space-around
      }
  .vip-dialog .dialog .content-container > .icon-group:after {
  content: '';
  display: block;
  margin: 0 auto;
  width: 90%;
  padding-top: 82px;
  border-bottom: 1px solid #f5f5f5;
  position: absolute;
}
  .vip-dialog .dialog .content-container > .icon-group > .icon-item > img {
            width: 32px;
            display: block;
            margin: auto;
          }
  .vip-dialog .dialog .content-container > .icon-group > .icon-item > span {
            font-size: 14px;
          }
  .vip-dialog .dialog .content-container > .content-text {
        text-align: center;
        font-size: 14px;
        color: #686868;
        padding: 10px;
      }
  .vip-dialog .dialog .content-container > .content-text > * {
          display: block;
          opacity: 0.7;
        }
  .vip-dialog .dialog .content-container > .content-text > a {
          width: 248px;
          height: 40px;
          margin: 11px auto 0 auto;
          line-height: 40px;
          color: #ffffff;
          background-image: linear-gradient(45deg, #ff8a8a 0%, #fd5353 100%);
          border-radius: 100px;
          opacity: 1;
        }
  .vip-dialog .close-btn {
    background: transparent;
    position: absolute;
    bottom: 0;
    height: 70px;
    width: 100%;
  }
  .vip-dialog .close-btn > img {
      width: 37px;
      display: block;
      margin: 45px auto 0 auto;
    }

.openmore {
  text-align: center;
  color: #fd5353;
  font-size: 13px;
  background: #fff;
  padding-top: 16px;
  padding-bottom: 24px;
}

.radio-intro {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: #fff;
  margin-bottom: -8px;
  padding: 16px 16px 0 16px;
  box-sizing: border-box;
}

  .radio-intro .context {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
  }

  .radio-intro .context .cover {
      flex-shrink: 0;
      width: 64px;
      height: 64px;
      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.05);
    }

  .radio-intro .context .content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      width: 0;
      height: 64px;
      flex-grow: 1;
      padding: 8px 76px 8px 12px;
      box-sizing: border-box;
    }

  .radio-intro .context .content .title {
        font-size: 16px;
        font-weight: 500;
        color: #333;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 100%;
      }

  .radio-intro .context .content .info {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
      }

  .radio-intro .context .content .info .icon {
          width: 12px;
          height: 12px;
          margin-right: 2px;
        }

  .radio-intro .context .content .info .audc {
          font-size: 12px;
          font-weight: 400;
          color: #999;
        }

  .radio-intro .btn {
    position: absolute;
    width: 64px;
    height: 28px;
    right: 16px;
    border-radius: 14px;
    border: 1px solid rgba(253, 83, 83, 1);
    font-size: 12px;
    font-weight: 400;
    line-height: 28px;
    color: #fd5353;
    text-align: center;
  }

.float-btn {
  position: fixed;
  color: white;
  text-align: center;
  line-height: 36px;
  width: 110px;
  height: 36px;
  bottom: 46px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 139, 139, 1) 0%, rgba(253, 83, 83, 1) 100%);
  box-shadow: 0px 4px 20px -6px rgba(253, 83, 83, 1);
  border-radius: 20px;
}

.radio-play-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 28px 0 0 0;
  background-color: #fff;
  font-size: 15px;
}

  .radio-play-board .cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
  }

  .radio-play-board .cover .img {
      width: 100%;
      height: 100%;
      background-color: #fff;
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
    }

  .radio-play-board .cover .btn {
      position: absolute;
      width: 54px;
      height: 54px;
    }

  .radio-play-board .cover .info {
      position: absolute;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      height: 20px;
      padding: 0 6px;
      left: 0;
      bottom: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
      border-radius: 0px 0px 5px 5px;
    }

  .radio-play-board .cover .info .icon {
        width: 8px;
        height: 8px;
        margin-right: 2px;
      }

  .radio-play-board .cover .info .audc {
        font-size: 10px;
        font-weight: 500;
        color: #fff;
      }

  .radio-play-board .title {
    font-size: 20px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
  }

  .radio-play-board .broad-caster {
    font-size: 13px;
    font-weight: 400;
    color: #666;
    margin-bottom: 18px;
  }

  .radio-play-board .btn-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
  }

  .radio-play-board .btn-group .download-btn {
      margin: 0 6px;
      display: block;
      line-height: 28px;
      font-size: 12px;
      text-align: center;
      width: 72px;
      height: 28px;
      color: #fd5353;
      background: #fff;
      border: 1px solid #fd5353;
      border-radius: 14px;
      box-sizing: border-box;
      position: relative;
    }

  .radio-play-board .full-btn {
    width: 226px;
    height: 44px;
    margin: 24px 0 20px 0;
    background: linear-gradient(180deg, rgba(255, 139, 139, 1) 0%, rgba(253, 83, 83, 1) 100%);
    box-shadow: 0px 4px 20px -6px rgba(253, 83, 83, 1);
    border-radius: 22px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    line-height: 44px;
    text-align: center;
    animation: breath 1s ease-in-out infinite;
  }

  .radio-play-board .full-btn-no-animation {
    width: 226px;
    height: 44px;
    margin: 24px 0 20px 0;
    background: linear-gradient(180deg, rgba(255, 139, 139, 1) 0%, rgba(253, 83, 83, 1) 100%);
    box-shadow: 0px 4px 20px -6px rgba(253, 83, 83, 1);
    border-radius: 22px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    line-height: 44px;
    text-align: center;
  }


.community {
  padding-top: 40px;
}

.community-navigator {
  width: 100%;
  background: #fff;
  margin: 0 auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, 80px);
  justify-content: space-between;
  padding: 0 16px;
  grid-row-gap: 16px;
  margin: 16px 0;
}

.community-navigator-item {
  padding: 5px 0;
  border-radius: 16px;
  border: 1px solid rgba(239, 239, 239, 1);
  font-size: 14px;
  color: rgba(34, 34, 34, 1);
  font-weight: 400;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.community-navigator-item-active {
  border: 1px solid #fd5353;
}

.community-navigator-item-active .community-navigator-link {
  color: #fd5353;
}

.community-navigator-link {
  color: rgba(34, 34, 34, 1);
}

.community-article-list {
  padding: 0 16px;
}

.community-article-item {
  box-sizing: border-box;
  padding-bottom: 8px;
  border-bottom: 1px solid #F7F7F7;
}

.community-article-item:not(:last-child) {
  margin-bottom: 16px;
}

.community-article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: 15px;
  line-height: 21px;
  margin-bottom: 6px;
}

.community-article-title a {
  color: #222222;
}

.community-article-description {
  font-size: 13px;
  line-height: 20px;
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.community-article-description a {
  color: #999999;
}

.community-article-meta-info {
  font-size: 11px;
  color: #999999;
  line-height: 16px;
}

.community-article-author {
  margin-right: 16px;
}

.article {
  padding: 40px 16px 16px;
}

.article-title {
  font-weight: 600;
  font-size: 20px;
  color: #222222;
  line-height: 28px;
  margin-bottom: 12px;
}

.article-meta-info {
  font-size: 12px;
  color: #999999;
  line-height: 17px;
  box-sizing: border-box;
  padding-bottom: 12px;
  border-bottom: 1px solid #F7F7F7;
  margin-bottom: 16px;
}

.article-author {
  margin-right: 16px;
}

.article-program-section-title {
  margin-top: 32px;
  font-weight: 500;
  font-size: 18px;
  color: #333333;
  line-height: 25px;
  margin-bottom: 12px;
}

.article-program-item {
  display: flex;
  align-items: center;
}

.article-program-item:not(:last-child) {
  margin-bottom: 12px;
}

.article-program-cover {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 16px;
}

.article-program-title {
  font-weight: 500;
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  margin-bottom: 3px;
}

.article-program-meta-info {
  box-sizing: border-box;
  padding-bottom: 8px;
  border-bottom: 1px solid #F7F7F7;
}

.article-program-meta-info-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 17px;
  color: #999999;
}

.article-program-meta-info-item:not(:last-child) {
  margin-bottom: 3px;
}

.article-program-meta-info-item-link {
  color: #999999;
}

.recommend-section-title {
  margin-top: 32px;
  margin-bottom: 12px;
  font-weight: 500;
  font-size: 18px;
  color: #333333;
  line-height: 25px;
}

.related-article {
  height: 60px;
  display: flex;
  align-items: center;
  background: #F7F7F7;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 8px 12px;
  margin-bottom: 8px;
}

.related-article-link {
  font-size: 14px;
  color: #222222;
  line-height: 22px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-root .recommends {
    margin-top: 6px;
    background: #fff
  }
  .home-root .recommends:before {
    content: '你可能还喜欢的主播';
    font-size: 17px;
    color: #333333;
    letter-spacing: 0;
    line-height: 17px;
    font-weight: bold;
    padding: 20px 18px 20px;
    display: block;
}
  .home-root .recommends .more {
      padding: 20px 0 30px 0;
      display: flex;
      align-items: center;
      justify-content: center
}
  .home-root .recommends .more:before {
    content: '查看更多主播';
    font-size: 13px;
    color: #fd5353;
    margin-right: 4px;
}
  .home-root .recommends .more .arrow {
        width: 7px;
        height: 7px;
        border: 1px solid #fd5353;
        border-top: none;
        border-right: none;
        transform: rotate(-135deg);
        transform-origin: center;
}

.podcaster-info {
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 18px;
  padding-bottom: 31px;
  background: #ffffff;
  position: relative;
}

  .podcaster-info .header {
    display: flex;
    align-items: center;
  }

  .podcaster-info .header .avatar-wrapper {
      flex: none;
      width: 60px;
      height: 60px;
      border: 1px solid #979797;
      border-radius: 50%;
    }

  .podcaster-info .header .avatar-wrapper .avatar {
        margin: 3px;
        width: 54px;
        height: 54px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 50%;
      }

  .podcaster-info .header .nickname {
      font-weight: bold;
      font-size: 20px;
      color: #333333;
      margin-left: 10px;
      margin-right: 10px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

  .podcaster-info .header .follow {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: none;
      width: 68px;
      height: 26px;
      border: 1px solid #fd5353;
      border-radius: 13px;
      font-size: 13px;
      color: #fd5353;
      margin-left: auto;
    }

  .podcaster-info .description {
    font-size: 15px;
    color: #666666;
    padding: 0;
    background: none;
    margin-top: 10px;
  }

  .podcaster-info .expand-btn {
    height: 15px;
    background: url(//sss.qtfm.cn/v2/images/menu-down.png) no-repeat center;
    background-size: 13px;
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0
  }

  .podcaster-info .expand-btn.expanded {
  background-image: url(//sss.qtfm.cn/v2/images/menu-up.png);
}

.item-list {
  padding: 0 10px;
  background: #fff;
}

  .item-list .item {
    display: flex;
    align-items: center;
  }

  .item-list .item .info-wrapper {
      flex: 1;
      overflow: hidden;
      margin-left: 15px;
    }

  .item-list .item .info-wrapper .item-title {
        font-size: 15px;
        line-height: 30px;
        color: #3d3d3d;
      }

  .item-list .item .info-wrapper .item-description {
        font-size: 13px;
        color: #676b7b;
      }

  .item-list .item:not(:last-child) {
  border-bottom: 1px solid #dcdee3;
}

  .item-list .item.channel {
  height: 95px;
}

  .item-list .item.channel .cover {
        flex: none;
        width: 70px;
        height: 70px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        box-sizing: border-box;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        margin-left: 5px;
}

  .item-list .item.channel .info-wrapper .item-description {
          -webkit-line-clamp: 2;
        }

  .item-list .item.program {
  height: auto;
  padding: 10px 0;
}

  .item-list .item.program .info-wrapper {
        margin-left: 5px;
}

  .item-list .item.program .info-wrapper .item-title {
          -webkit-line-clamp: 2;
          line-height: 1.42;
        }

  .item-list .item.program .play-btn {
        flex: none;
        width: 34px;
        height: 34px;
        background-image: url(//sss.qtfm.cn/v2/images/list_play.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        margin-left: 5px;
        margin-right: 15px;
}

  .item-list .item.program.vip .info-wrapper .item-title:before {
  background-image: url(//os.fans.qtfm.cn/imgs/patch-vip/vip.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 20px;
  width: 18px;
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

  .item-list .item.recommend {
  border-bottom: none;
  height: 50px;
  padding: 0 16px 0 14px;
  margin: 0 0 20px 0;
}

  .item-list .item.recommend .info-wrapper {
        display: flex;
        flex: 1;
        overflow: hidden;
        align-items: center;
        margin-left: 0;
}

  .item-list .item.recommend .info-wrapper .avatar {
          flex: none;
          width: 50px;
          height: 50px;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          border-radius: 50%;
        }

  .item-list .item.recommend .info-wrapper .nickname {
          flex: 1;
          font-weight: bold;
          font-size: 14px;
          color: #333333;
          margin: 0 10px;
        }

  .item-list .item.recommend .follow {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 68px;
        height: 26px;
        border: 1px solid #fd5353;
        border-radius: 13px;
        font-size: 13px;
        color: #fd5353;
        margin-left: auto;
}

  .item-list .expand-btn {
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center
  }

  .item-list .expand-btn:before {
  content: '查看更多';
  font-size: 13px;
  color: #fd5353;
  margin-right: 4px;
}

  .item-list .expand-btn .arrow {
      width: 7px;
      height: 7px;
      border: 1px solid #fd5353;
      border-top: none;
      border-right: none;
      transform: rotate(-45deg);
      transform-origin: center;
}

  .item-list .expand-btn.expanded .arrow {
  transform: rotate(135deg);
}


.ting-general {
  background: white;
  padding: 20px 16px;
  position: relative;
}
  .ting-general .keywordinfo {
    margin-bottom: 20px;
  }
  .ting-general .header {
    display: flex;
    position: relative;
    margin: 20px 0px;
    margin-top: 30px;
  }
  .ting-general .info {
    display: flex;
    align-items: center;
    margin-top: 20px;
  }
  .ting-general .info .avatar {
      height: 64px;
      width: 64px;
      flex: 0 0 auto;
      border-radius: 50%;
      background-image: url('https://pic.qtfm.cn/2018/1112/2018111217374258868.image');
      background-size: cover;
      position: relative;
    }
  .ting-general .info .name-container {
      margin-left: 12px;
      flex: 1;
    }
  .ting-general .info .name-container .name {
        font-size: 16px;
        color: #333333;
        line-height: 20px;
      }
  .ting-general .info .name-container .intro {
        color: #666666;
        line-height: 25px;
      }
  .ting-general .program {
    position: relative;
    height: 90px;
    margin-top: 0;
  }
  .ting-general .program .avatar {
      background-image: url('https://pic.qtfm.cn/channel/2018/09/20/6bc0d48dc748b3b43746c9f41cf7cece.jpg!400');
    }
  .ting-general .program .avatar img {
        width: 24px;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
  .ting-general .program .name-container .name {
        font-size: 15px;
        font-weight: 500;
      }
  .ting-general .program .name-container .intro {
        font-size: 12px;
        color: #999;
      }
  .ting-general .program .download-little::before {
      content: ' ';
      display: block;
      width: 24px;
      height: 24px;
      background-image: url('https://sss.qtfm.cn/v3/download@3x.png');
      background-size: cover;
      margin-left: 10px;
    }
  .ting-general .program::after {
  bottom: 0;
  content: ' ';
  position: absolute;
  left: 76px;
  right: 0;
  background: #f4f4f4;
  height: 1px;
}
  .ting-general .hot .avatar {
      border-radius: 4px;
    }
  .ting-general .hot .name-container .name {
      font-size: 16px;
    }
  .ting-general .hot .line-clamp {
      -webkit-line-clamp: 1;
    }
  .ting-general .hot .count {
      display: flex;
      font-size: 12px;
      color: #999;
      margin-top: 4px;
    }
  .ting-general .hot .count > div {
        background-size: 9px;
        background-repeat: no-repeat;
        background-position: 0;
        padding-left: 12px;
      }
  .ting-general .hot .count .play-count {
        background-image: url('https://sss.qtfm.cn/v3/play-count-o.png');
      }
  .ting-general .hot .count .program-count {
        background-image: url('https://sss.qtfm.cn/v3/program-count-o.png');
        margin-left: 22px;
      }
  .ting-general .keyword-hots {
    margin: 10px auto;
    flex-direction: column;
    display: flex;
  }
  .ting-general .keyword-hots .keyword-hot {
      padding: 5px;
    }
  .ting-general .keyword-hots .keyword-hot .hotWord {
        margin: 15px auto;
        text-align: center;
        min-width: 57px;
        line-height: 1em;
        display: inline-block;
        border: 1px solid #dcdee3;
        border-radius: 15px;
        padding: 6px 15px;
        margin: 5px 10px 10px 0;
        cursor: pointer;
        font-weight: 400;
        color: #b6b3b3;
        font-size: 12px;
        line-height: 17px
      }
  .ting-general .keyword-hots .keyword-hot .hotWord:hover {
  border: 1px solid #fd5353;
  transition: border 0.3s linear;
}
  .ting-general .keyword-hots .keyword-hot .hotWord:hover a {
            transition: color 0.3s linear;
            color: #fd5353;
}
  .ting-general .keyword-hots .more {
      cursor: pointer;
      position: relative;
      margin: 10px auto;
    }
  .ting-general .keyword-hots .more a {
        font-size: 13px;
        line-height: 18px;
        color: #fd5353;
      }
  .ting-general .download-btn {
    margin: 20px auto;
    width: 250px;
    height: 40px;
    line-height: 40px;
    display: block;
    background: #fd5353;
    border-radius: 20px;
    font-size: 15px;
    color: #ffffff;
    text-align: center;
  }

.more-desc-general {
  background: white;
  position: relative;
  font-family: PingFangSC-Regular;
}
  .more-desc-general .title {
    font-size: 22px;
    color: #333333;
    margin-top: 0;
  }
  .more-desc-general .desc {
    color: #666666;
    letter-spacing: 0;
    text-align: justify;
    line-height: 1.5;
    margin-top: 16px;
  }
  .more-desc-general .show-all {
    color: #fd5353;
    margin-top: 5px;
    opacity: 0.7;
  }
  .more-desc-general .show-more {
    font-size: 13px;
    color: #fd5353;
    opacity: 0.7;
    margin-top: 5px;
  }
  .more-desc-general .show-more > img {
      display: inline-block;
      transform: rotate(90deg);
      width: 4px;
      vertical-align: middle;
      margin-left: 5px;
    }

.ting-podcastersList-root {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
  .ting-podcastersList-root .header {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    height: 33px;
  }
  .ting-podcastersList-root .header > span {
      font-size: 18px;
      font-weight: 500;
      line-height: 25px;
    }
  .ting-podcastersList-root .header .title {
      color: #e13430;
      border-left: 3px solid #e13430;
      padding-left: 5px;
      font-size: 18px;
      line-height: 25px;
      font-weight: 500;
      margin: 0;
    }
  .ting-podcastersList-root .podcasters {
    width: 100%;
  }
  .ting-podcastersList-root .podcasters .program {
      position: relative;
      height: 90px;
      margin-top: 0;
    }
  .ting-podcastersList-root .podcasters .program .avatar {
        background-image: url('https://pic.qtfm.cn/channel/2018/09/20/6bc0d48dc748b3b43746c9f41cf7cece.jpg!400');
      }
  .ting-podcastersList-root .podcasters .program .avatar img {
          width: 24px;
          display: block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
  .ting-podcastersList-root .podcasters .program .name-container .name {
          font-size: 15px;
          font-weight: 500;
        }
  .ting-podcastersList-root .podcasters .program .name-container .intro {
          font-size: 12px;
          color: #999;
        }
  .ting-podcastersList-root .podcasters .program .care-btn {
        margin: 20px auto;
        width: 80px !important;
        height: 30px;
        line-height: 30px;
        display: block;
        background: #ffffff;
        border-radius: 20px;
        font-size: 15px;
        color: #fd5353;
        text-align: center;
        border: 1px solid #fd5353;
      }
  .ting-podcastersList-root .podcasters .program .download-little::before {
        content: ' ';
        display: block;
        width: 24px;
        height: 24px;
        background-image: url('https://sss.qtfm.cn/v3/download@3x.png');
        background-size: cover;
        margin-left: 10px;
      }
  .ting-podcastersList-root .podcasters .program::after {
  bottom: 0;
  content: ' ';
  position: absolute;
  left: 76px;
  right: 0;
  background: #f4f4f4;
  height: 1px;
}
  .ting-podcastersList-root .podcasters .podcaster {
      display: flex;
      align-items: center;
      margin-top: 18px;
    }
  .ting-podcastersList-root .podcasters .podcaster .avatar {
        border-radius: 100%;
        border: 2px solid #ffffff;
        height: 60px;
        width: 60px;
      }
  .ting-podcastersList-root .podcasters .podcaster .content {
        height: 70px;
        margin-left: 10px;
        padding: 10px 0px;
        flex: 1;
        border-bottom: 1px solid #eeeeee;
      }
  .ting-podcastersList-root .podcasters .podcaster .content .name {
          font-weight: 400;
          margin-left: 8px;
          color: #333333;
          font-size: 14px;
          line-height: 20px;
        }
  .ting-podcastersList-root .podcasters .podcaster .content .line-desc {
          font-weight: 400;
          margin-left: 8px;
          color: #b6b3b3;
          font-size: 12px;
          line-height: 17px;
          width: 87px;
        }
  .ting-podcastersList-root .more {
    margin-top: 24px;
    cursor: pointer;
    position: relative;
  }
  .ting-podcastersList-root .more a {
      font-size: 13px;
      line-height: 18px;
      color: #fd5353;
    }
  .ting-podcastersList-root .more:hover .hover {
        display: block;
}

.ting-comments-root {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
  .ting-comments-root .header {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    height: 33px;
  }
  .ting-comments-root .header > span {
      font-size: 18px;
      font-weight: 500;
      line-height: 25px;
    }
  .ting-comments-root .header .title {
      color: #e13430;
      border-left: 3px solid #e13430;
      padding-left: 5px;
      font-size: 18px;
      line-height: 25px;
      font-weight: 500;
      margin: 0;
    }
  .ting-comments-root .comments {
    width: 100%;
  }
  .ting-comments-root .comments .comment {
      position: relative;
      padding: 15px 0;
      display: flex
    }
  .ting-comments-root .comments .comment::after {
  content: ' ';
  position: absolute;
  display: block;
  height: 1px;
  background-color: #dbdbdb;
  left: 48px;
  bottom: 0;
  right: -15px;
}
  .ting-comments-root .comments .comment .avatar {
        flex: 0 0 auto;
        height: 38px;
        width: 38px;
        border-radius: 50%;
        margin-right: 10px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50%;
}
  .ting-comments-root .comments .comment .cont {
        flex: 1 1 auto;
        min-width: 0;
        word-break: break-all;
}
  .ting-comments-root .comments .comment .cont .nickname {
          margin-bottom: 8px;
          color: #666;
        }
  .ting-comments-root .comments .comment .cont .time {
          font-size: 12px;
          margin-bottom: 12px;
          color: #999;
        }
  .ting-comments-root .comments .comment .cont .line-1 {
          margin: 5px 0 0px 0;
        }
  .ting-comments-root .comments .comment .cont .line-2 {
          color: #999;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
  .ting-comments-root .comments .comment .cont .line-2 .like-count {
            display: flex;
            align-items: flex-end;
          }
  .ting-comments-root .comments .comment .cont .line-2 .like-count img {
              width: 1.2rem;
              height: 1.2rem;
              margin-right: 4px;
              position: relative;
            }
  .ting-comments-root .comments .comment .cont .line-2 .like-count > span {
              font-size: 13px;
              color: #666666;
              line-height: 18px;
            }
  .ting-comments-root .comments .comment .cont .content {
          font-size: 14px;
        }
  .ting-comments-root .more {
    margin-top: 24px;
    cursor: pointer;
    position: relative;
  }
  .ting-comments-root .more a {
      font-size: 13px;
      line-height: 18px;
      color: #fd5353;
    }
  .ting-comments-root .more:hover .hover {
        display: block;
}

.headertitle {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  height: 18px;
  padding-left: 10px;
  border-left: 3px solid #fd5353;
}
  .headertitle > span {
    font-size: 18px;
    font-weight: 500;
    line-height: 18px;
  }
  .headertitle .title {
    color: #fd5353;
    font-weight: 500;
    font-size: 18px;
    line-height: 18px;
    margin: 0;
  }

.gxs-general {
  background: white;
  padding: 20px 16px;
  position: relative;
  font-family: PingFangSC-Regular;
}
  .gxs-general .title {
    font-size: 22px;
    color: #333333;
    margin-top: 0;
  }
  .gxs-general .desc {
    color: #666666;
    letter-spacing: 0;
    text-align: justify;
    line-height: 1.5;
    margin-top: 16px;
  }
  .gxs-general .show-all {
    color: #fd5353;
    margin-top: 5px;
    opacity: 0.7;
  }
  .gxs-general .sub-title {
    font-size: 18px;
    color: #333333;
    margin-top: 40px
  }
  .gxs-general .sub-title::before {
  content: ' ';
  background: #fd5353;
  width: 3px;
  height: 18px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 10px;
}
  .gxs-general .info {
    display: flex;
    align-items: center;
    margin-top: 20px;
  }
  .gxs-general .info .avatar {
      height: 64px;
      width: 64px;
      flex: 0 0 auto;
      border-radius: 50%;
      background-image: url('https://pic.qtfm.cn/2018/1112/2018111217374258868.image');
      background-size: cover;
      position: relative;
    }
  .gxs-general .info .name-container {
      margin-left: 12px;
      flex: 1;
    }
  .gxs-general .info .name-container .name {
        font-size: 16px;
        color: #333333;
        line-height: 20px;
      }
  .gxs-general .info .name-container .intro {
        color: #666666;
        line-height: 25px;
      }
  .gxs-general .program {
    position: relative;
    height: 90px;
    margin-top: 0;
  }
  .gxs-general .program .avatar {
      background-image: url('https://pic.qtfm.cn/channel/2018/09/20/6bc0d48dc748b3b43746c9f41cf7cece.jpg!400');
    }
  .gxs-general .program .avatar img {
        width: 24px;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
  .gxs-general .program .name-container .name {
        font-size: 15px;
        font-weight: 500;
      }
  .gxs-general .program .name-container .intro {
        font-size: 12px;
        color: #999;
      }
  .gxs-general .program .download-little::before {
      content: ' ';
      display: block;
      width: 24px;
      height: 24px;
      background-image: url('https://sss.qtfm.cn/v3/download@3x.png');
      background-size: cover;
      margin-left: 10px;
    }
  .gxs-general .program::after {
  bottom: 0;
  content: ' ';
  position: absolute;
  left: 76px;
  right: 0;
  background: #f4f4f4;
  height: 1px;
}
  .gxs-general .hot .avatar {
      border-radius: 4px;
    }
  .gxs-general .hot .name-container .name {
      font-size: 16px;
    }
  .gxs-general .hot .line-clamp {
      -webkit-line-clamp: 1;
    }
  .gxs-general .hot .count {
      display: flex;
      font-size: 12px;
      color: #999;
      margin-top: 4px;
    }
  .gxs-general .hot .count > div {
        background-size: 9px;
        background-repeat: no-repeat;
        background-position: 0;
        padding-left: 12px;
      }
  .gxs-general .hot .count .play-count {
        background-image: url('https://sss.qtfm.cn/v3/play-count-o.png');
      }
  .gxs-general .hot .count .program-count {
        background-image: url('https://sss.qtfm.cn/v3/program-count-o.png');
        margin-left: 22px;
      }
  .gxs-general .more {
    font-size: 13px;
    color: #fd5353;
    text-align: center;
    margin-top: 24px;
    opacity: 0.7;
  }
  .gxs-general .more > img {
      display: inline-block;
      transform: rotate(90deg);
      width: 4px;
      vertical-align: middle;
      margin-left: 5px;
    }
  .gxs-general .download-btn {
    margin: 20px auto;
    width: 300px;
    height: 40px;
    line-height: 40px;
    display: block;
    background: #fd5353;
    border-radius: 20px;
    font-size: 15px;
    color: #ffffff;
    text-align: center;
  }

.tingmap-general {
  background: white;
  padding: 20px 0px;
  position: relative;
}
  .tingmap-general .collectionKeyword-list .collectionKeyword-item {
      font-size: 13px;
      line-height: 13px;
      color: #9b9b9b;
      display: inline-block;
      width: 100%;
      text-align: center;
      margin-top: 20px;
    }
  .tingmap-general .collectionKeyword-list .collectionKeyword-item:hover {
      color: #e13430;
    }
  .tingmap-general .container {
    position: relative;
    margin: 15px auto 20px auto;
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.05);
  }
  .tingmap-general .paging {
    overflow: hidden;
    margin-right: 29px;
  }

.paging-root {
  padding: 10px 0;
  margin-top: 40px;
}
  .paging-root > div {
    display: inline-block;
  }
  .paging-root .prev,
  .paging-root .next {
    width: 32px;
    height: 32px;
    border: 1px solid #cdcccd;
    border-radius: 50%;
    text-align: center;
  }
  .paging-root .prev span, .paging-root .next span {
      line-height: 32px;
    }
  .paging-root .pagei {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    text-align: center;
  }
  .paging-root .pagings {
    margin: 0 10px;
  }
  .paging-root .pagings span {
      line-height: 32px;
      margin: 10px;
    }
  .paging-root .pagings .current {
      background: #e13430;
      color: white;
    }
  .paging-root .goto {
    float: right;
    color: #666666;
    margin-left: 5px;
    margin-bottom: 10px;
    padding-top: 1px;
  }
  .paging-root .goto input {
      border-radius: 3px;
      padding: 7px 3px;
      margin: 0 5px;
      width: 38px;
    }
  .paging-root .paging-item-a {
    outline: none;
  }
  .paging-root .paging-item-btn a {
  outline: none;
}

.pagination {
  width: 100%;
}

.pagination li {
    display: inline-block;
    margin: 0 4px;
    border-radius: 3px;
    min-height: 32px;
    cursor: pointer;
  }

.pagination li a {
      display: inline-block;
      position: relative;
      padding: 0 8px;
      top: 5px;
    }

.pagination li a:hover {
      color: #666666;
    }

.pagination li.active {
  border: 1px solid #e13430;
}

.pagination li.active a {
  color: #666666;
}

.pagination .previous.disabled:hover,
  .pagination .next.disabled:hover {
    background: transparent;
    border: 1px solid #e13430;
  }

.pagination .previous.disabled:hover a, .pagination .next.disabled:hover a {
      color: #666666;
    }

.pagination .previous,
  .pagination .next {
    border: 1px solid #e13430;
  }

.pagination .previous:hover,
  .pagination .next:hover {
    border: 1px solid #e13430;
    background: #e13430;
  }

.pagination .previous:hover a, .pagination .next:hover a {
      color: white;
    }

.pagination .break-me {
  border: none;
}

.history-page {
  width: 100%;
  overflow: hidden;
}
  .history-page div {
    box-sizing: border-box;
  }
  .history-page .record-list {
    width: 25rem;
    position: absolute;
    height: calc(100% - 3.933333rem);
    margin-top: 3.333333rem;
    padding: 0 1.066667rem;
    overflow-y: scroll;
    box-sizing: border-box;
  }
  .history-page .record-list .record {
      padding: 1rem 0;
      display: flex;
      align-items: center;
    }
  .history-page .record-list .record .cover {
        width: 4rem;
        height: 4rem;
        -o-object-fit: contain;
           object-fit: contain;
      }
  .history-page .record-list .record .title {
        width: 14.466667rem;
        font-size: 1rem;
        color: #222222;
        font-weight: 600;
        line-height: 1.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
      white-space: nowrap;
      }
  .history-page .record-list .record .desc {
        width: 14.466667rem;
        font-size: 0.8rem;
        font-weight: 500;
        color: #999999;
        line-height: 1.333333rem;
    overflow: hidden;
    text-overflow: ellipsis;
      white-space: nowrap;
      }
  .history-page .record-list .record .duration {
        position: relative;
        padding-left: 1rem;
        font-size: 0.8rem;
        font-weight: 500;
        color: #999999;
        line-height: 1.133333rem;
        border: 1px solid transparent;
      }
  .history-page .record-list .record .duration::before {
        content: '';
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;
        position: absolute;
        left: 0;
        top: 0.066667rem;
        background: url('https://pic.qtfm.cn/material/hsh/ccb-mqt/time-icon.png') no-repeat;
        background-size: cover;
        border: 1px solid transparent;
      }
  .history-page .record-list > .record:first-child {
      padding-top: 1rem;
    }
  .history-page .record-list .info {
      flex-shrink: 1;
      margin-left: 0.8rem;
    }
  .history-page .record-list .checked {
      width: 1.333333rem;
      height: 1.333333rem;
      margin-right: 1.2rem;
      background: url('https://pic.qtfm.cn/material/hsh/ccb-mqt/checked.png') no-repeat;
      background-size: cover;
    }
  .history-page .record-list .unchecked {
      width: 1.333333rem;
      height: 1.333333rem;
      margin-right: 1.2rem;
      background: url('https://pic.qtfm.cn/material/hsh/ccb-mqt/unchecked.png') no-repeat;
      background-size: cover;
    }
  .history-page .edit-list {
    height: calc(100% - 3.933333rem - 5.333333rem);
  }
  .history-page .bottom-bar {
    width: 25rem;
    height: 5.333333rem;
    padding: 0 0.533333rem;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    background: #ffffff;
  }
  .history-page .bottom-bar .select-all {
      width: 11.333333rem;
      height: 2.4rem;
      margin-top: 0.666667rem;
      text-align: center;
      font-size: 0.8rem;
      line-height: 2.4rem;
      border: 1px solid transparent;
      border-color: #c4c4c4;
      color: #c4c4c4;
    }
  .history-page .bottom-bar .delete {
      width: 11.333333rem;
      height: 2.4rem;
      margin-top: 0.666667rem;
      text-align: center;
      font-size: 0.8rem;
      line-height: 2.4rem;
      border: 1px solid transparent;
      border-color: #ff313a;
      color: #ff313a;
    }
  .history-page .empty-image {
    position: relative;
    width: 13.333333rem;
    height: 13.333333rem;
    margin: 50% auto;
    background: url('https://pic.qtfm.cn/material/hsh/ccb-mqt/empty.png') no-repeat;
    background-size: cover;
  }
  .history-page .empty-image div {
      bottom: -50px;
      position: absolute;
      width: 100%;
      text-align: center;
    }

.orders-page {
  width: 100%;
  overflow: hidden;
}
  .orders-page div {
    box-sizing: border-box;
  }
  .orders-page .record-list {
    width: 25rem;
    position: absolute;
    height: calc(100% - 3.933333rem);
    margin-top: 3.333333rem;
    padding: 0 1.066667rem;
    overflow-y: scroll;
    box-sizing: border-box;
  }
  .orders-page .record-list .record {
      padding: 1rem 0;
      display: flex;
      align-items: center;
    }
  .orders-page .record-list .record .cover {
        width: 4rem;
        height: 4rem;
        -o-object-fit: contain;
           object-fit: contain;
      }
  .orders-page .record-list .record .title {
        width: 14.466667rem;
        font-size: 1rem;
        color: #222222;
        font-weight: 600;
        line-height: 1.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
      white-space: nowrap;
      }
  .orders-page .record-list .record .desc {
        width: 14.466667rem;
        height: 2.666667rem;
        font-size: 0.8rem;
        font-weight: 500;
        color: #999999;
        line-height: 1.333333rem;
    overflow: hidden;
    text-overflow: ellipsis;
      display: -webkit-box;
      word-break: break-all;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      }
  .orders-page .record-list .record .duration {
        position: relative;
        padding-left: 1rem;
        font-size: 0.8rem;
        font-weight: 500;
        color: #999999;
        line-height: 1.133333rem;
        border: 1px solid transparent;
      }
  .orders-page .record-list .record .duration::before {
        content: '';
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;
        position: absolute;
        left: 0;
        top: 0.066667rem;
        background: url('https://pic.qtfm.cn/material/hsh/ccb-mqt/time-icon.png') no-repeat;
        background-size: cover;
        border: 1px solid transparent;
      }
  .orders-page .record-list > .record:first-child {
      padding-top: 1rem;
    }
  .orders-page .record-list .info {
      flex-shrink: 1;
      margin-left: 0.8rem;
    }
  .orders-page .record-list .checked {
      width: 1.333333rem;
      height: 1.333333rem;
      margin-right: 1.2rem;
      background: url('https://pic.qtfm.cn/material/hsh/ccb-mqt/checked.png') no-repeat;
      background-size: cover;
    }
  .orders-page .record-list .unchecked {
      width: 1.333333rem;
      height: 1.333333rem;
      margin-right: 1.2rem;
      background: url('https://pic.qtfm.cn/material/hsh/ccb-mqt/unchecked.png') no-repeat;
      background-size: cover;
    }
  .orders-page .edit-list {
    height: calc(100% - 3.933333rem - 5.333333rem);
  }
  .orders-page .bottom-bar {
    width: 25rem;
    height: 5.333333rem;
    padding: 0 0.533333rem;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    background: #ffffff;
  }
  .orders-page .bottom-bar .select-all {
      width: 11.333333rem;
      height: 2.4rem;
      margin-top: 0.666667rem;
      text-align: center;
      font-size: 0.8rem;
      line-height: 2.4rem;
      border: 1px solid transparent;
      border-color: #c4c4c4;
      color: #c4c4c4;
    }
  .orders-page .bottom-bar .delete {
      width: 11.333333rem;
      height: 2.4rem;
      margin-top: 0.666667rem;
      text-align: center;
      font-size: 0.8rem;
      line-height: 2.4rem;
      border: 1px solid transparent;
      border-color: #ff313a;
      color: #ff313a;
    }
  .orders-page .empty-image {
    position: relative;
    width: 13.333333rem;
    height: 13.333333rem;
    margin: 50% auto;
    background: url('https://pic.qtfm.cn/material/hsh/ccb-mqt/empty.png') no-repeat;
    background-size: cover;
  }
  .orders-page .empty-image div {
      bottom: -50px;
      position: absolute;
      width: 100%;
      text-align: center;
    }

.cbbmy {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: absolute;
  background: #f6f6f6;
}
  .cbbmy div {
    box-sizing: border-box;
  }
  .cbbmy .user-info {
    height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
  }
  .cbbmy .user-info .user-avator {
      width: 50px;
      height: 50px;
      border-radius: 50px;
      -o-object-fit: contain;
         object-fit: contain;
    }
  .cbbmy .user-info .username {
      font-size: 1.066667rem;
      margin-top: 3px;
    }
  .cbbmy .list-top {
    background: #fff;
    margin-top: 1.333333rem;
    border: 1px solid transparent;
    display: flex;
    padding: 0.6rem 1.066667rem;
    justify-content: space-between;
    align-items: center;
  }
  .cbbmy .list-top .list-name {
      font-size: 1.2rem;
      font-weight: 500;
      color: #333333;
    }
  .cbbmy .list-top .more {
      font-size: 0.866667rem;
      display: flex;
      align-items: center;
      color: #999999;
    }
  .cbbmy .list-top .more img {
        width: 0.8rem;
        height: 0.8rem;
        -o-object-fit: contain;
           object-fit: contain;
        margin-left: 3px;
      }
  .cbbmy .record-list {
    position: initial;
    width: 25rem;
    max-height: calc(100vh - 25rem);
    padding: 0 1.066667rem 1.066667rem 1.066667rem;
    background: #fff;
    overflow-y: scroll;
    box-sizing: border-box;
  }
  .cbbmy .record-list .record {
      display: flex;
      align-items: center;
    }
  .cbbmy .record-list .record .cover {
        width: 4rem;
        height: 4rem;
        border-radius: 1rem;
        -o-object-fit: contain;
           object-fit: contain;
      }
  .cbbmy .record-list .record .title {
        width: 14.466667rem;
        font-size: 1rem;
        color: #222222;
        font-weight: 600;
        line-height: 1.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
      white-space: nowrap;
      }
  .cbbmy .record-list .record .desc {
        width: 14.466667rem;
        height: 2.666667rem;
        font-size: 0.8rem;
        font-weight: 500;
        color: #999999;
        line-height: 1.333333rem;
    overflow: hidden;
    text-overflow: ellipsis;
      display: -webkit-box;
      word-break: break-all;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      }
  .cbbmy .record-list .record .duration {
        position: relative;
        padding-left: 1rem;
        font-size: 0.8rem;
        font-weight: 500;
        color: #999999;
        line-height: 1.133333rem;
        border: 1px solid transparent;
      }
  .cbbmy .record-list .record .duration::before {
        content: '';
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;
        position: absolute;
        left: 0;
        top: 0.066667rem;
        background: url('https://pic.qtfm.cn/material/hsh/ccb-mqt/time-icon.png') no-repeat;
        background-size: cover;
        border: 1px solid transparent;
      }
  .cbbmy .record-list > .record:first-child {
      padding-top: 1rem;
    }
  .cbbmy .record-list .info {
      flex-shrink: 1;
      margin-left: 0.8rem;
      padding: 0.333333rem 0;
    }
  .cbbmy .empty-image {
    width: 13.333333rem;
    height: 13.333333rem;
    margin: 10% auto 0 auto;
    background: url('https://pic.qtfm.cn/material/hsh/ccb-mqt/empty.png') no-repeat;
    background-size: cover;
  }
  .cbbmy .empty-text {
    color: #999999;
    font-size: 1rem;
    text-align: center;
    margin-bottom: 10%;
    margin-top: 1rem;
    font-weight: 400;
  }
  .cbbmy .relieve {
    position: absolute;
    bottom: 6.5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.6rem 2.466667rem;
    font-size: 1rem;
    color: #999999;
    border: 1px solid #999999;
    border-radius: 0.266667rem;
  }
  .cbbmy .relieve-confirm {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 18rem;
    height: 9.666667rem;
    padding: 0 1rem;
    opacity: 1;
    background: #ffffff;
    border-radius: 0.4rem;
    z-index: 10000;
  }
  .cbbmy .relieve-confirm .desc {
      height: 6.333333rem;
      line-height: 6.333333rem;
      font-size: 1.133333rem;
      color: #333333;
      text-align: center;
      border-bottom: 1px solid #f5f5f5;
    }
  .cbbmy .relieve-confirm .buttons {
      display: flex;
    }
  .cbbmy .relieve-confirm .buttons div {
        flex: 1;
        text-align: center;
        line-height: calc(3rem - 0.666667rem);
        margin: 5px 0;
      }
  .cbbmy .relieve-confirm .buttons .cancel {
        border-right: 1px solid #f5f5f5;
        color: #999999;
      }
  .cbbmy .mask {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
  }

.player-controller {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  right: 1.133333rem;
  bottom: 4.5rem;
}
  .player-controller .img-backgroud {
    width: 2.666667rem;
    height: 2.666667rem;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
  }
  .player-controller .play-progress {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #999;
    position: absolute;
    z-index: -1;
  }
  .player-controller .play-progress .progress-bg_1 {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
      position: absolute;
      width: 1.5rem;
      height: 3rem;
      border-radius: 3rem 0 0 3rem;
      background: #999;
      z-index: 3;
    }
  .player-controller .play-progress .progress-bg_2 {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
      position: absolute;
      width: 1.5rem;
      height: 3rem;
      left: 1.5rem;
      border-radius: 0px 3rem 3rem 0px;
      background: #999;
      z-index: 1;
    }
  .player-controller .play-progress .progress_1 {
      position: absolute;
      top: 0;
      left: 1.5rem;
      width: 1.5rem;
      height: 3rem;
      border-radius: 0px 3rem 3rem 0px;
      z-index: 2;
      background: #fd4646;
      transform: rotate(-180deg);
      transform-origin: 0px 1.5rem;
      /**animation: pr1A 5s infinite linear forwards;**/
    }
  .player-controller .play-progress .progress_2 {
      position: absolute;
      left: 1.5rem;
      border-radius: 0px 3rem 3rem 0px;
      z-index: 4;
      background: #fd4646;
      transform: rotate(-180deg);
      transform-origin: 0px 1.5rem;
      /**animation: pr2A 5s infinite linear forwards;**/
    }
  .player-controller .living-play {
    width: 1rem;
    height: 1rem;
    margin-left: 0.466667rem;
    background-image: url('https://pic.qtfm.cn/material/hsh/ccb-mqt/play.png');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 999;
  }
@keyframes living-bar-animation {
        0% {
          height: 100%;
        }
        100% {
          height: 70%;
        }
      }
@keyframes living-bar-animation {
        0% {
          height: 100%;
        }
        100% {
          height: 50%;
        }
      }
@keyframes living-bar-animation {
        0% {
          height: 100%;
        }
        100% {
          height: 30%;
        }
      }
.living-animation {
  width: 1.466667rem;
  height: 1.066667rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
}
.living-animation .living-animation-bar {
    position: relative;
    height: 100%;
    width: 0.333333rem;
    border-radius: 0.333333rem;
    background: #fff;
  }
.living-animation > .living-animation-bar:nth-child(1) {
    animation: living-bar-animation 250ms linear 0ms infinite normal running forwards;
  }
.living-animation > .living-animation-bar:nth-child(2) {
    animation: living-bar-animation 250ms linear 125ms infinite alternate running forwards;
  }
.living-animation > .living-animation-bar:nth-child(3) {
    animation: living-bar-animation 250ms linear 0ms infinite alternate running forwards;
  }
@keyframes pr1A {
  0% {
    transform: rotate(-180deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes pr2A {
  0% {
    transform: rotate(-180deg);
  }
  100% {
    width: 1.5rem;
    height: 3rem;
    transform: rotate(180deg);
  }
}