/*! 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 {
  -webkit-box-sizing: content-box;
          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 {
  -webkit-box-sizing: border-box;
          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"] {
  -webkit-box-sizing: border-box;
          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 */

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */

article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

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

progress {
  vertical-align: baseline;
}

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

template, /* 1 */
[hidden] {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

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

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 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 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

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

b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * 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;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * 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;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

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

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

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

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

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

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

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

/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
  font-weight: bold;
}

/**
 * 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;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * 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;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 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 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

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

textarea {
  overflow: auto;
}

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

[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          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 and cancel buttons in Chrome and Safari on OS X.
 */

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

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * 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 */
}

@font-face {
    font-family: 'icomoon';
    src:    url('/fonts/icomoon.eot?yvgh2w');
    src:    url('/fonts/icomoon.eot?yvgh2w#iefix') format('embedded-opentype'),
        url('/fonts/icomoon.ttf?yvgh2w') format('truetype'),
        url('/fonts/icomoon.woff?yvgh2w') format('woff'),
        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;
    -webkit-font-feature-settings: 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
{
  display            : block;
  display            : -webkit-box;
  -webkit-box-orient : vertical;
  position           : relative;

  line-height        : 1.3;
  overflow           : hidden;
  text-overflow      : ellipsis;
  padding            : 0 !important;
}

.line-clamp:after
{
  content    : '...';
  text-align : right;
  bottom     : 0;
  right      : 0;
  width      : 25%;
  display    : block;
  position   : absolute;
  height     : calc(1em * 1.2);
  background : -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(75%, rgba(255, 255, 255, 1)));
  background : linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%);
}

@supports (-webkit-line-clamp: 1)
{
  .line-clamp:after
  {
    display : none !important;
  }
}

.line-clamp-1
{
  -webkit-line-clamp : 1;
  height             : calc(1em * 1.3 * 1);
}

.line-clamp-2
{
  -webkit-line-clamp : 2;
  height             : calc(1em * 1.3 * 2);
}

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

/*
 * Base styles
 * ========================================================================== */

html {
  color: #3D3D3D;
  font-size: 1em; /* ~16px; */
  font-family: "Helvetica Neue", Helvetica, 'PingFang SC', 'Microsoft YaHei', 'HelveticaNeue-Light', sans-serif;
  font-weight: 500;
  line-height: 1.375; /* ~22px */
  overflow-x: hidden;
  height: 100%;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: "liga" on;
  color: rgba(0,0,0,.8);
  height: 100%;
}

a {
  color: #3D3D3D;
  text-decoration: none;
}

div {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
  cursor: text;
}

textarea::-webkit-scrollbar {
    width: 5px;
}

/* Track */

textarea::-webkit-scrollbar-track {
    border-radius: 10px;
}

/* Handle */

textarea::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0,0,0,0.2);
}

textarea::-webkit-scrollbar-thumb:window-inactive {
     background: rgba(0,0,0,0.1);
}

ul {
  padding: 0;
  margin: 0;
}

ul,li {
  list-style: none;
}

input, textarea {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #DCDEE3;
  font-size: 14px;
  line-height: 14px;
  padding: 5px 8px
}

input:focus, textarea:focus {
  outline: 1px solid #4A90E2;
}

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

/*
 * Browser upgrade prompt
 * ========================================================================== */

:global(.browserupgrade) {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/*
 * Print styles
 * Inlined to avoid the additional HTTP request:
 * http://www.phpied.com/delay-loading-your-print-css/
 * ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
  }

  abbr[title]::after {
    content: ' (' attr(title) ')';
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */

  a[href^='#']::after,
  a[href^='javascript:']::after {
    content: '';
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
   * Printing Tables:
   * http://css-discuss.incutio.com/wiki/Printing_Tables
   */

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
      flex-direction: column;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: none;
}

.wrapper .placeholder {
    width: 100%;
    height: 100px;
    background: #F5F5F8;
  }

#app {
  background: #F5F5F8;
}

.mt-2 {
  margin-top: 20px;
}

.mb-2 {
  margin-bottom: 20px;
}

.mr-2 {
  margin-right: 20px;
}

.ml-2 {
  margin-left: 20px;
}

/*
 * 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 */

.qtcode-view {
  min-width: 250px;
  height:350px;
  margin: auto;
  padding: 15px;
  text-align: center;
  background-image:url('//sss.qtfm.cn/www/images/red-qtbg-big.png');
  background-size:120px;
  background-repeat:no-repeat;
  background-position: 100% 100%;  
}

.qtcode-view .qr {
    width: 222px;
    height: 222px;
    margin: auto;
    margin-bottom: 15px;
    background-size: cover;
  }

.qtcode-view .title {
    width:147px;
    height:28px;
    font-size:21px;
    font-family:MicrosoftYaHeiSemibold;
    color:rgba(225,52,48,1);
    line-height:28px;
  }

.qtcode-view .slogin {
    padding-top: 10px;
    letter-spacing: 1px;
    font-size:14px;
    margin: auto;
    font-family:MicrosoftYaHei;
    color:rgba(151,106,106,1);
    line-height:23px;
    font-weight: 400;
  }

.qtcode-view .moresinfo {
    letter-spacing: 1px;
    font-size:14px;
    margin: auto;
    font-family:MicrosoftYaHei;
    color:rgba(151,106,106,1);
    line-height:23px;
    font-weight: 400;
  }

.qtcode-view-foorer {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   min-width: 250px;
   height:88px;
   padding:8px;
   background:rgba(249,241,241,1);
   background-image:url('//sss.qtfm.cn/www/images/red-qtbg-small.png');
   background-size:88px 100px;
   background-repeat:no-repeat;
   background-position: 100% 100%;  
}

.qtcode-view-foorer .text-view {
    padding: 5px 0px;
    margin-left: 10px;
  }

.qtcode-view-foorer .qr {
    width: 72px;
    height: 72px;
    background-size: cover;
  }

.qtcode-view-foorer .title {
    width:118px;
    height:20px;
    font-size:15px;
    font-family:MicrosoftYaHeiSemibold;
    color:rgba(225,52,48,1);
    line-height:20px;
  }

.qtcode-view-foorer .slogin {
    letter-spacing: 1px;
    margin-top: 5px;
    font-size:11px;
    font-family:MicrosoftYaHei;
    color:rgba(151,106,106,1);
    line-height:16px;
    font-weight: 400;
  }

.qtcode-view-foorer .moresinfo {
    letter-spacing: 1px;
    margin-top: 3px;
    font-size:11px;
    font-family:MicrosoftYaHei;
    color:rgba(151,106,106,1);
    line-height:16px;
    font-weight: 400;
  }


.frontrecpage-root {
  position: relative;
  display: inline-block;
  font-size: 14px;
}

  .frontrecpage-root .categoriesList .leftAd {
      padding: 20px 40px 20px 40px;
      width: 713px;
      height: 140px;
      margin-right: 20px;
      margin-bottom: 20px;
      background: #FFFFFF;
      -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
              box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
      overflow: hidden;
    }

  .frontrecpage-root .categoriesList .ad100 {
      height: 140px;
    }

  .frontrecpage-root .categoriesList .ad170 {
      height: 210px;
    }

  .frontrecpage-root .categoriesList .ad270 {
      height: 310px;
    }
.sprite {
  background-image: url('//sss.qtfm.cn/neo/sprite.png');
  display: inline-block;
}

.sprite2 {
  background-image: url('//sss.qtfm.cn/neo/sprite2.png');
  display: inline-block;
}

.sprite4 {
  background-image: url('//sss.qtfm.cn/neo/sprite4.png');
  display: inline-block;
}

.sprite5 {
  background-image: url('//sss.qtfm.cn/neo/Close@2x.png');
  width: 37px;
  height: 37px;
  background-size: contain;
  display: inline-block;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  .sprite {
    background-image: url('//sss.qtfm.cn/neo/sprite@2x.png');
    background-size: 2527px 170px;
  }
  .sprite2 {
    background-image: url('//sss.qtfm.cn/neo/sprite2@2x.png');
    background-size: 656px 42px;
  }
  .sprite4 {
    background-image: url('//sss.qtfm.cn/neo/sprite4@2x.png');
    background-size: 1547px 42px;
  }
  .sprite5 {
    background-image: url('//sss.qtfm.cn/neo/Close@3x.png');
    width: 37px;
    height: 37px;
    background-size: contain;
  }
}

.sprite4-caijing {
  width: 26px;
  height: 26px;
  background-position: -5px -5px;
}

.sprite4-changxiaoxiaoshuo {
  width: 26px;
  height: 26px;
  background-position: -41px -5px;
}

.sprite4-diantai {
  width: 26px;
  height: 26px;
  background-position: -77px -5px;
}

.sprite4-dianying {
  width: 26px;
  height: 26px;
  background-position: -113px -5px;
}

.sprite4-ertong {
  width: 26px;
  height: 26px;
  background-position: -149px -5px;
}

.sprite4-gaoxiao {
  width: 26px;
  height: 26px;
  background-position: -185px -5px;
}

.sprite4-gongkaike {
  width: 26px;
  height: 26px;
  background-position: -221px -5px;
}

.sprite4-guangboju {
  width: 26px;
  height: 26px;
  background-position: -257px -5px;
}

.sprite4-jiankang {
  width: 26px;
  height: 26px;
  background-position: -293px -5px;
}

.sprite4-jiaoyu {
  width: 26px;
  height: 26px;
  background-position: -329px -5px;
}

.sprite4-jingpin {
  width: 26px;
  height: 26px;
  background-position: -365px -5px;
}

.sprite4-jingpinneirong {
  width: 26px;
  height: 26px;
  background-position: -401px -5px;
}

.sprite4-junshi {
  width: 26px;
  height: 26px;
  background-position: -437px -5px;
}

.sprite4-keji {
  width: 26px;
  height: 26px;
  background-position: -473px -5px;
}

.sprite4-lishi {
  width: 26px;
  height: 26px;
  background-position: -509px -5px;
}

.sprite4-lvyou {
  width: 26px;
  height: 26px;
  background-position: -545px -5px;
}

.sprite4-moren {
  width: 30px;
  height: 30px;
  background-position: -581px -5px;
}

.sprite4-nvxing {
  width: 26px;
  height: 26px;
  background-position: -621px -5px;
}

.sprite4-pingshu {
  width: 26px;
  height: 26px;
  background-position: -657px -5px;
}

.sprite4-pinpaidiantai {
  width: 26px;
  height: 26px;
  background-position: -693px -5px;
}

.sprite4-qiche {
  width: 26px;
  height: 26px;
  background-position: -729px -5px;
}

.sprite4-qinggan {
  width: 26px;
  height: 26px;
  background-position: -765px -5px;
}

.sprite4-qr-icon {
  width: 32px;
  height: 32px;
  background-position: -801px -5px;
}

.sprite4-shishang {
  width: 26px;
  height: 26px;
  background-position: -843px -5px;
}

.sprite4-titleaarow {
  width: 9px;
  height: 14px;
  background-position: -879px -5px;
}

.sprite4-tiyu {
  width: 26px;
  height: 26px;
  background-position: -898px -5px;
}

.sprite4-top {
  width: 32px;
  height: 32px;
  background-position: -934px -5px;
}

.sprite4-toutiao {
  width: 26px;
  height: 26px;
  background-position: -976px -5px;
}

.sprite4-tuokouxiu {
  width: 26px;
  height: 26px;
  background-position: -1012px -5px;
}

.sprite4-waiyu {
  width: 26px;
  height: 26px;
  background-position: -1048px -5px;
}

.sprite4-wenhua {
  width: 26px;
  height: 26px;
  background-position: -1084px -5px;
}

.sprite4-xiangsheng {
  width: 26px;
  height: 26px;
  background-position: -1120px -5px;
}

.sprite4-xiaoshuo {
  width: 26px;
  height: 26px;
  background-position: -1156px -5px;
}

.sprite4-xiaoshuohuiyuan {
  width: 26px;
  height: 26px;
  background-position: -1192px -5px;
}

.sprite4-xiaoyuan {
  width: 26px;
  height: 26px;
  background-position: -1228px -5px;
}

.sprite4-xiqu {
  width: 26px;
  height: 26px;
  background-position: -1264px -5px;
}

.sprite4-yingshi {
  width: 26px;
  height: 26px;
  background-position: -1300px -5px;
}

.sprite4-yingwen {
  width: 26px;
  height: 26px;
  background-position: -1336px -5px;
}

.sprite4-yinyue {
  width: 26px;
  height: 26px;
  background-position: -1372px -5px;
}

.sprite4-youxidongman {
  width: 26px;
  height: 26px;
  background-position: -1408px -5px;
}

.sprite4-yule {
  width: 26px;
  height: 26px;
  background-position: -1444px -5px;
}

.sprite4-zhongguozhisheng {
  width: 26px;
  height: 26px;
  background-position: -1480px -5px;
}

.sprite4-zimeiti {
  width: 26px;
  height: 26px;
  background-position: -1516px -5px;
}

.sprite2-QRicon {
  width: 32px;
  height: 32px;
  background-position: 0 0;
}

.sprite2-QRicon-selected {
  width: 32px;
  height: 32px;
  background-position: -32px 0;
}

.sprite2-change {
  width: 18px;
  height: 14px;
  background-position: -64px 0;
}

.sprite2-classify {
  width: 34px;
  height: 34px;
  background-position: -82px 0;
}

.sprite2-classify-selected {
  width: 34px;
  height: 34px;
  background-position: -116px 0;
}

.sprite2-feedback {
  width: 32px;
  height: 32px;
  background-position: -150px 0;
}

.sprite2-flag {
  width: 34px;
  height: 34px;
  background-position: -182px 0;
}

.sprite2-flag-selected {
  width: 34px;
  height: 34px;
  background-position: -216px 0;
}

.sprite2-left {
  width: 11px;
  height: 18px;
  background-position: -250px 0;
}

.sprite2-left-hover {
  width: 11px;
  height: 18px;
  background-position: -261px 0;
}

.sprite2-location {
  width: 34px;
  height: 34px;
  background-position: -272px 0;
}

.sprite2-location-selected {
  width: 34px;
  height: 34px;
  background-position: -306px 0;
}

.sprite2-more {
  width: 14px;
  height: 14px;
  background-position: -340px 0;
}

.sprite2-old {
  width: 32px;
  height: 32px;
  background-position: -354px 0;
}

.sprite2-play {
  width: 42px;
  height: 42px;
  background-position: -386px 0;
}

.sprite2-playcount {
  width: 7px;
  height: 9px;
  background-position: -428px 0;
}

.sprite2-pulldown {
  width: 9px;
  height: 6px;
  background-position: -435px 0;
}

.sprite2-pulldown-selected {
  width: 9px;
  height: 6px;
  background-position: -444px 0;
}

.sprite2-quit {
  width: 37px;
  height: 37px;
  background-position: -453px 0;
}

.sprite2-right {
  width: 11px;
  height: 18px;
  background-position: -490px 0;
}

.sprite2-right-hover {
  width: 11px;
  height: 18px;
  background-position: -501px 0;
}

.sprite2-search {
  width: 25px;
  height: 26px;
  background-position: -512px 0;
}

.sprite2-top {
  width: 32px;
  height: 32px;
  background-position: -537px 0;
}

.sprite2-top-search {
  width: 19px;
  height: 20px;
  background-position: -569px 0;
}

.sprite2-wifi {
  width: 34px;
  height: 34px;
  background-position: -588px 0;
}

.sprite2-wifi-selected {
  width: 34px;
  height: 34px;
  background-position: -622px 0;
}

.sprite-default-albums {
  width: 170px;
  height: 170px;
  background-position: 0 0;
}

.sprite-hot {
  width: 38px;
  height: 38px;
  background-position: -170px 0;
}

.sprite-sina-hover {
  width: 50px;
  height: 50px;
  background-position: -208px 0;
}

.sprite-telephone {
  width: 42px;
  height: 42px;
  background-position: -258px 0;
}

.sprite-wechat-hover {
  width: 50px;
  height: 50px;
  background-position: -300px 0;
}

.sprite-sina {
  width: 50px;
  height: 50px;
  background-position: -350px 0;
}

.sprite-wechat {
  width: 50px;
  height: 50px;
  background-position: -400px 0;
}

.sprite-default-avatar {
  width: 50px;
  height: 50px;
  background-position: -450px 0;
}

.sprite-tencent-hover {
  width: 46px;
  height: 46px;
  background-position: -500px 0;
}

.sprite-tencent {
  width: 46px;
  height: 46px;
  background-position: -546px 0;
}

.sprite-radio-dj {
  width: 42px;
  height: 42px;
  background-position: -592px 0;
}

.sprite-play-hover {
  width: 50px;
  height: 50px;
  background-position: -634px 0;
}

.sprite-qq-hover {
  width: 46px;
  height: 46px;
  background-position: -684px 0;
}

.sprite-player-play {
  width: 50px;
  height: 50px;
  background-position: -730px 0;
}

.sprite-hr {
  width: 42px;
  height: 42px;
  background-position: -780px 0;
}

.sprite-album {
  width: 56px;
  height: 56px;
  background-position: -822px 0;
}

.sprite-pause-hover {
  width: 50px;
  height: 50px;
  background-position: -878px 0;
}

.sprite-player-pause {
  width: 50px;
  height: 50px;
  background-position: -928px 0;
}

.sprite-support {
  width: 42px;
  height: 42px;
  background-position: -978px 0;
}

.sprite-appdownload-hover {
  width: 50px;
  height: 50px;
  background-position: -1020px 0;
}

.sprite-qq  {
  width: 46px;
  height: 46px;
  background-position: -1070px 0;
}

.sprite-business {
  width: 42px;
  height: 42px;
  background-position: -1116px 0;
}

.sprite-live {
  width: 42px;
  height: 36px;
  background-position: -1158px 0;
}

.sprite-appdownload {
  width: 50px;
  height: 50px;
  background-position: -1200px 0;
}

.sprite-radio {
  width: 56px;
  height: 56px;
  background-position: -1250px 0;
}

.sprite-marketing {
  width: 42px;
  height: 42px;
  background-position: -1306px 0;
}

.sprite-history {
  width: 38px;
  height: 38px;
  background-position: -1348px 0;
}

.sprite-buliding {
  width: 84px;
  height: 72px;
  background-position: -1386px 0;
}

.sprite-location {
  width: 16px;
  height: 20px;
  background-position: -1470px 0;
}

.sprite-homepage-search {
  width: 22px;
  height: 24px;
  background-position: -1486px 0;
}

.sprite-volume {
  width: 22px;
  height: 22px;
  background-position: -1508px 0;
}

.sprite-player-history {
  width: 22px;
  height: 22px;
  background-position: -1530px 0;
}

.sprite-program {
  width: 48px;
  height: 26px;
  background-position: -1552px 0;
}

.sprite-list-play-hover {
  width: 20px;
  height: 20px;
  background-position: -1600px 0;
}

.sprite-top {
  width: 30px;
  height: 25px;
  background-position: -1620px 0;
}

.sprite-mute {
  width: 22px;
  height: 22px;
  background-position: -1650px 0;
}

.sprite-list-play {
  width: 20px;
  height: 20px;
  background-position: -1694px 0;
}

.sprite-delete-hover {
  width: 16px;
  height: 16px;
  background-position: -1714px 0;
}

.sprite-list-pause {
  width: 20px;
  height: 20px;
  background-position: -1730px 0;
}

.sprite-volume-hover {
  width: 22px;
  height: 22px;
  background-position: -1750px 0;
}

.sprite-big-halfstar {
  width: 16px;
  height: 16px;
  background-position: -1772px 0;
}

.sprite-history-hover {
  width: 22px;
  height: 22px;
  background-position: -1788px 0;
}

.sprite-empty-hover {
  width: 16px;
  height: 16px;
  background-position: -1810px 0;
}

.sprite-listened {
  width: 12px;
  height: 12px;
  background-position: -1826px 0;
}

.sprite-delete {
  width: 16px;
  height: 16px;
  background-position: -1838px 0;
}

.sprite-list-share {
  width: 16px;
  height: 16px;
  background-position: -1854px 0;
}

.sprite-popup-share {
  width: 16px;
  height: 16px;
  background-position: -1870px 0;
}

.sprite-list-share-hover {
  width: 16px;
  height: 16px;
  background-position: -1886px 0;
}

.sprite-share {
  width: 16px;
  height: 16px;
  background-position: -1902px 0;
}

.sprite-mobile {
  width: 16px;
  height: 16px;
  background: url(//sss.qtfm.cn/neo/phone@2x.png);
  background-size: contain;
}

.sprite-big-fillstar {
  width: 16px;
  height: 16px;
  background-position: -1918px 0;
}

.sprite-change {
  width: 14px;
  height: 14px;
  background-position: -1934px 0;
}

.sprite-big-graystar {
  width: 16px;
  height: 16px;
  background-position: -1948px 0;
}

.sprite-share-hover {
  width: 22px;
  height: 22px;
  background-position: -1964px 0;
}

.sprite-empty {
  width: 16px;
  height: 16px;
  background-position: -1986px 0;
}

.sprite-popup-empty {
  width: 16px;
  height: 16px;
  background-position: -2002px 0;
}

.sprite-player-previous-hover {
  width: 15px;
  height: 18px;
  background-position: -2018px 0;
}

.sprite-player-next-hover {
  width: 15px;
  height: 18px;
  background-position: -2033px 0;
}

.sprite-mute-hover {
  width: 22px;
  height: 22px;
  background-position: -2048px 0;
}

.sprite-popup-share-hover {
  width: 16px;
  height: 16px;
  background-position: -2070px 0;
}

.sprite-small-halfstar {
  width: 12px;
  height: 12px;
  background-position: -2086px 0;
}

.sprite-popup-play {
  width: 16px;
  height: 16px;
  background-position: -2098px 0;
}

.sprite-small-fillstar {
  width: 12px;
  height: 12px;
  background-position: -2114px 0;
}

.sprite-small-graystar {
  width: 12px;
  height: 12px;
  background-position: -2126px 0;
}

.sprite-popup-empty-hover {
  width: 16px;
  height: 16px;
  background-position: -2138px 0;
}

.sprite-player-previous {
  width: 15px;
  height: 18px;
  background-position: -2154px 0;
}

.sprite-player-download {
  width: 22px;
  height: 22px;
  background-position: -2169px 0;
}

.sprite-download {
  width: 16px;
  height: 16px;
  background-position: -2191px 0;
}

.sprite-list-download-hover {
  width: 16px;
  height: 16px;
  background-position: -2207px 0;
}

.sprite-player-next {
  width: 15px;
  height: 18px;
  background-position: -2223px 0;
}

.sprite-popup-download {
  width: 16px;
  height: 16px;
  background-position: -2238px 0;
}

.sprite-list-download {
  width: 16px;
  height: 16px;
  background-position: -2254px 0;
}

.sprite-play {
  width: 16px;
  height: 16px;
  background-position: -2270px 0;
}

.sprite-download-hover {
  width: 22px;
  height: 22px;
  background-position: -2286px 0;
}

.sprite-next {
  width: 9px;
  height: 15px;
  background-position: -2308px 0;
}

.sprite-plays {
  width: 12px;
  height: 12px;
  background-position: -2317px 0;
}

.sprite-popup-download-hover {
  width: 16px;
  height: 16px;
  background-position: -2329px 0;
}

.sprite-previous {
  width: 9px;
  height: 15px;
  background-position: -2345px 0;
}

.sprite-comments {
  width: 10px;
  height: 10px;
  background-position: -2354px 0;
}

.sprite-list {
  width: 22px;
  height: 22px;
  background-position: -2364px 0;
}

.sprite-list-hover {
  width: 22px;
  height: 22px;
  background-position: -2386px 0;
}

.sprite-next-hover {
  width: 10px;
  height: 15px;
  background-position: -2408px 0;
}

.sprite-line {
  width: 1px;
  height: 26px;
  background-position: -2418px 0;
}

.sprite-previous-hover {
  width: 10px;
  height: 15px;
  background-position: -2419px 0;
}

.sprite-pause {
  width: 16px;
  height: 16px;
  background-position: -2429px 0;
}

.sprite-microphone {
  width: 44px;
  height: 44px;
  background-position: -2444px 0
}

.bkColor{
  color: white;
  display: inline;
  width: 12px;
  height: 12px;
  margin-top: 5px;
  margin-right: 4px;
}

.frontrecpage-citem-root {
  position: relative;
  font-size: 14px;
  padding: 20px 20px 18px 21px;
  width: 713px;
  height: 278px;
  margin-right: 20px;
  margin-bottom: 20px;
  background: #FFFFFF;
  -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
          box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;

}

.frontrecpage-citem-root .header {
    padding-bottom: 10px;
    border-bottom: 1px solid #EEEEEE;
    margin-bottom: 15px;
    
  }

.frontrecpage-citem-root .header .logo {
      margin-right: 10px;
      vertical-align: bottom;
    }

.frontrecpage-citem-root .header .title {
      display: inline-block;
      font-size: 20px;
      color: #3D3D3D;
      line-height: 20px;
      margin: 0 10px 0 0;
      font-weight: inherit;
    }

.frontrecpage-citem-root .header .channelsContainer {
      display: inline-block;
      color: #666666;
      line-height: 14px;
      margin-top: 6px;
      margin-left: 5px;
    }

.frontrecpage-citem-root .header .channelsContainer .titleArrow {
        display: inline-block;
        height: 14px;
        width: 9px;
        vertical-align: bottom;
        background: url('//sss.qtfm.cn/neo/sprites3/titleaarow@1x.png');
        background-size: contain;
        background-repeat: no-repeat;
      }

@media (-webkit-min-device-pixel-ratio: 1.5),
          (min-resolution: 1.5dppx) {

  .frontrecpage-citem-root .header .channelsContainer .titleArrow {
    background: url('//sss.qtfm.cn/neo/sprites3/titleaarow@2x.png');
    background-size: contain;
    background-repeat: no-repeat;
  }
}

.frontrecpage-citem-root .header .channelsContainer .channel {
        font-weight: inherit;
        font-size: inherit;
        display: inline-block;
        line-height: 14px;
        padding-left: 10px;
        margin: 0;
        color: inherit;
}

.frontrecpage-citem-root .header .channelsContainer .channel .channelA {
          color: inherit;
        }

.frontrecpage-citem-root .header .channelsContainer .channel:hover {
        color: #E13430;
}

.frontrecpage-citem-root .header .channelsContainer .channelMore {
        border-right: 0;
        color: #666666;
}

.frontrecpage-citem-root .header .rotate {
      position: absolute;
      right: 20px;
      top: 27px;
      height: 14px;
      font-size: 14px;
      color: #666666;
      line-height: 14px;
}

.frontrecpage-citem-root .header .rotate .rorateIcon {
        margin-left: 5px;
        vertical-align: middle;
      }

.frontrecpage-citem-root .header .rotate:hover {
  color: #E13430;
}

.frontrecpage-citem-root .body .proot {
      float: left;
      width: 140px;
      margin-right: 37px;
      
    }

.frontrecpage-citem-root .body .proot .thumb {
        position: relative;
        display: block;
        height: 140px;
        width: 140px;
        margin-bottom: 10px;
        overflow: hidden;
        cursor: pointer;
      }

.frontrecpage-citem-root .body .proot .thumb .img {
          height: 140px;
          border: 1px solid rgba(0,0,0,0.1);
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
        }

.frontrecpage-citem-root .body .proot .thumb .imgOverlay {
          position: absolute;
          bottom: 0;
          left: 1px;
          width: 100%;
          padding-left: 10px;
          background-image: -webkit-gradient(linear, right top, left top, from(rgba(0,0,0,0.00)), to(#000000));
          background-image: linear-gradient(-90deg, rgba(0,0,0,0.00) 0%, #000000 100%);
        }

.frontrecpage-citem-root .body .proot .thumb .imgOverlay .playCountIcon {
            display: inline-block;
            margin-right: 8px;
            vertical-align: middle;
          }

.frontrecpage-citem-root .body .proot .thumb .imgOverlay .playCountText {
            display: inline-block;
            line-height: 28px;
            color: white;
            font-size: 12px;
          }

.frontrecpage-citem-root .body .proot .thumb .block {
          width: 140px;
          height: 140px;
          position: absolute;
          background: black;
          opacity: 0.5;
          display: none;
        }

.frontrecpage-citem-root .body .proot .thumb .playIcon {
          display: none;
          position: absolute;
          margin-top: -98px;
          margin-left: 49px;
        }

.frontrecpage-citem-root .body .proot .thumb:hover .playIcon {
          display: block;
        }

.frontrecpage-citem-root .body .proot .thumb:hover .block {
          display: block;
        }

.frontrecpage-citem-root .body .proot .desc {
        font-size: 14px;
        color: #333333;
        line-height: 20px;
        max-height: 40px;
        height: inherit;
      }

.frontrecpage-citem-root .body .proot .desc:hover {
        color: #E13430;
        text-decoration: underline; 
      }

.frontrecpage-citem-root .body .proot:nth-child(4n) {
      margin-right: 0px;
    }

@-webkit-keyframes rotaterKey {
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

@keyframes rotaterKey {
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

.rotater {
  -webkit-animation: rotaterKey 1s linear 1;
          animation: rotaterKey 1s linear 1;
}
.frontrecpage-radio-root {
  position: relative;
  font-size: 14px;
  width: 270px;
  padding: 20px;
  background: #FFFFFF;
  -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
          box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
  .frontrecpage-radio-root .header {
    border-bottom: 1px solid #EEEEEE;
    padding-bottom: 10px;
    position: relative;

    
  }
  .frontrecpage-radio-root .header img {
      width: 26px;
      height: 26px;
      margin-right: 10px;
      vertical-align: bottom;
    }
  .frontrecpage-radio-root .header .title {
      display: inline-block;
      margin: 0;
      font-weight: inherit;
      font-size: 20px;
      color: #333333;
      line-height: 20px;
    }
  .frontrecpage-radio-root .header .moreBtn {
      position: absolute;
      display: inline-block;
      right: 20px;
      margin: 0;
      border: 0;
      background: transparent;
      font-family: inherit;
      font-size: 14px;
      cursor: pointer;
      height: 14px;
      padding-top: 6px;
    }
  .frontrecpage-radio-root .header .moreBtn .text {
        font-size: 14px;
        color: #666666;
        line-height: 14px;
        display: inline-block;
      }
  .frontrecpage-radio-root .header .moreBtn .icon {
        margin-left: 9px;
        vertical-align: middle;
      }
  .frontrecpage-radio-root .header .moreBtn:hover {
  color: #E13430;
}
  .frontrecpage-radio-root .header .moreBtn:hover .text {
          color: #E13430;
}
  .frontrecpage-radio-root .body .radioItem {
      margin: 15px 0 3px 0;
    }
  .frontrecpage-radio-root .body .radioItem .radioItemImg {
        width: 70px;
        height: 70px;
        background: #FFFFFF;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        border: 1px solid rgba(0,0,0,0.1);
      }
  .frontrecpage-radio-root .body .radioItem .radioItemDesc {
        padding-left: 15px;
        display: inline-block;
        vertical-align: top;
      }
  .frontrecpage-radio-root .body .radioItem .radioItemDesc .item {
          width: 145px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
  .frontrecpage-radio-root .body .radioItem .radioItemDesc .item_title {
          font-size: 14px;
          color: #3D3D3D;
          line-height: 14px;
          margin: 5px 0 10px;
          font-weight: inherit
        }
  .frontrecpage-radio-root .body .radioItem .radioItemDesc .item_title:hover {
  color: #E13430;
}
  .frontrecpage-radio-root .body .radioItem .radioItemDesc .item_title > .item_title_a {
  color: inherit;
}
  .frontrecpage-radio-root .body .radioItem .radioItemDesc .item_desc {
          font-size: 13px;
          color: #606060;
          letter-spacing: 0px;
          line-height: 13px;
          margin-bottom: 10px;
        }
  .frontrecpage-radio-root .body .radioItem .radioItemDesc .item_time {
          font-size: 13px;
          color: #606060;
          letter-spacing: 0px;
          line-height: 13px;
        }
  .frontrecpage-radio-root .body .radioItem:last-of-type {
  margin-bottom: 62px;
}
.home-root {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
      flex-grow: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: #F5F5F8;
}
  
  .home-root .recBody {
    margin: 15px auto 0 auto;
    background: #F5F5F8;
    width: 1008px;
  }
  
  .home-root .rightBox {
    display: inline-block;
    vertical-align: top;
  }
  
  .home-root .rightBox .home-card-qtcode {
      width: 270px;
      background: #FFFFFF; 
      margin-bottom: 20px;
      padding: 10px 0px;
    }
  
  .home-root .rightBox .rightQR {
      width: 270px;
      height: 278px;
      margin-bottom: 20px;
      -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
              box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-flow: column;
              flex-flow: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
    }
  
  .home-root .rightBox .rightQR .title {
        color: #4A4A4A;
        font-size: 18px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 0px;
      }
  
  .home-root .rightBox .rightQR .qr {
        background: url('https://pay.qtfm.cn/qr/https%3A%2F%2Fm.qtfm.cn%2Fdownload%2F%3Ffrom%3Dshouye');
        background-size: cover;
        background-repeat: no-repeat;
        width: 80%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 200px;
      }
  
@media (-webkit-min-device-pixel-ratio: 1.5),
        (min-resolution: 1.5dppx) {
  
  .home-root .rightBox .rightQR .qr {
    background: url('https://pay.qtfm.cn/qr/https%3A%2F%2Fm.qtfm.cn%2Fdownload%2F%3Ffrom%3Dshouye');
    background-size: cover;
    background-repeat: no-repeat;
  }
}
  
.home-root .rightBox .rightQR .bottom {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
        overflow-x: hidden;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        height: 50px;
        width: 100%;
        padding-left: 25px;
        padding-right: 25px;
}
  
.home-root .rightBox .rightQR .bottom .btn {
          -webkit-box-flex: 1;
          -ms-flex: 1;
          flex: 1;
          height: 70%;
          background: #FD5353;
          border-radius: 5px;
          font-size: 13px;
          color: #FFFFFF;
          text-align: right;
          padding-right: 20px;
          line-height: 34px;
          position: relative;
          cursor: pointer
        }
  
.home-root .rightBox .rightQR .bottom .btn + .btn {
  margin-left: 15px;
}
  
.home-root .rightBox .rightQR .bottom .btn .iosIcon {
            background: url('//sss.qtfm.cn/neo/iPhone@2x.png');
            background-size: cover;
            background-repeat: no-repeat;
            width: 16px;
            height: 16px;
            position: absolute;
            width: 16px;
            height: 16px;
            left: 8px;
            top: 8px;
}
  
@media (-webkit-min-device-pixel-ratio: 1.5),
            (min-resolution: 1.5dppx) {
  
  .home-root .rightBox .rightQR .bottom .btn .iosIcon {
    background: url('//sss.qtfm.cn/neo/iPhone@3x.png');
    background-size: cover;
    background-repeat: no-repeat;
  }
}
  
.home-root .rightBox .rightQR .bottom .btn .androidIcon {
            background: url('//sss.qtfm.cn/neo/android@2x.png');
            background-size: cover;
            background-repeat: no-repeat;
            width: 16px;
            height: 16px;
            position: absolute;
            width: 16px;
            height: 16px;
            left: 8px;
            top: 8px;
}
  
@media (-webkit-min-device-pixel-ratio: 1.5),
            (min-resolution: 1.5dppx) {
  
  .home-root .rightBox .rightQR .bottom .btn .androidIcon {
    background: url('//sss.qtfm.cn/neo/android@2x.png');
    background-size: cover;
    background-repeat: no-repeat;
  }
}
  
.home-root .rightBox .rightAD {
      width: 270px;
      height: 245px;
      margin-top: 20px;
      padding: 2.5px;
      text-align: center;
      background-color: #F5F5F8;
}
  
.home-root .safe2018 {
    display: inline-block;
    vertical-align: top;
    height: 0;
    width: 0;
}
  
.home-root .safe2018 a {
      display: block;
      margin-left: 15px;
    }
  
.home-root .live_icon {
    width: 80px;
}

/*
 * 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 */

.cat-root {
  background: #F5F5F8
}
/*
 * 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 */

.cat-com-root {
  padding-left: 20px;
  padding-right: 20px;
  background: #F5F5F8;
}

.cat-com-root .container {
    position: relative;
    margin: 15px auto 20px auto;
    width: 1004px;
    background-color: rgba(255,255,255, 1);
    -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
            box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
  }

.cat-com-root .categoryList {
    display: inline-block;
    width: 158px;
    background: rgba(255,255,255, 1);
    text-align: center;
    font-size: 16px;
    color: #606060;
    line-height: 40px;
    margin-top: 20px;
    margin-left: 20px;
    padding-bottom: 20px;
    vertical-align: top;
  }

.cat-com-root .main {
    padding-left: 40px;
    padding-top: 20px;
    display: inline-block;
    left: 179px;
    top: 0px;
  }

.cat-com-root .categoryItem {
    display: inline-block;
    width: 158px;
    height: 40px;
    background: #F5F5F8;
    border-bottom: 1px dashed #DFDFDF;
  }

.cat-com-root .categoryItem:last-child {
    border: 0;
  }

.cat-com-root .categoryItem-selected {
    display: inline-block;
    width: 158px;
    height: 40px;
    background: #FFFFFF;
    font-size: 18px;
    color: #E13430
  }

.cat-com-root .categoryItem-selected:before {
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  height: 40px;
  width: 0px;
  border-left: 6px solid #E13430;
}

.cat-com-root .categoryTitle {
    color: inherit;
  }

.cat-com-root .menuContainer {

  }

.cat-com-root .menuItem {
    position: relative;
    width: 748px;
    font-size: 14px;
    line-height: 14px;
    border-radius: 2px;
    border-bottom: 1px dashed #E9E9E9;
    padding-top: 15px;
  }

.cat-com-root .menuItem .menuItemTitle {
      display: inline-block;
      vertical-align: top;
      width: 80px;
      color: #888888;
      line-height: 26px;
    }

.cat-com-root .menuItem .menuItemSecAll {
      display: inline-block;
      vertical-align: top;
      width: 82px;
    }

.cat-com-root .menuItem .menuItemSecList {
      display: inline-block;
      width: 578px;
      max-height: 74px;
      overflow: hidden;
    }

.cat-com-root .menuItem .menuItemSecListExp {
      display: inline-block;
      width: 578px;
      overflow: hidden;
    }

.cat-com-root .menuItem .menuItemSecMore {
      position: absolute;
      bottom: 13px;
      right: 0px;
      padding-top: 5px;
    }

.cat-com-root .menuItem .menuItemButton {
      color: #333333;
      display: inline-block;
      padding: 6px;
      border-radius: 3px;
    }

.cat-com-root .menuItem .menuItemButton:hover {
      color: rgba(255,255,255, 1);
      background-color: #E13430;
    }

.cat-com-root .menuItem .menuItemButtonSelected {
      color: rgba(255,255,255, 1);
      background-color: #E13430;
    }

.cat-com-root .menuItem .menuItemListBtn {
      display: inline-block;
      width: 82px;
      line-height: 14px;
      margin-left: 4px;
      margin-bottom: 9px;
      overflow: hidden;
      white-space: nowrap;
    }

.cat-com-root .menuItem:first-of-type {
    padding-top: 0px;
  }

.cat-com-root .contentsContainer {
    width: 784px;
    padding-top: 23px;
  }

.cat-com-root .contentsContainer .void {
      text-align: center;
    }

.cat-com-root .contentsContainer .void .voidIcon {
        width: 100px;
        height: 102px;
        background-size: contain;
        margin: 142px auto 0;
      }

.cat-com-root .contentsContainer .voidDesc {
      margin-top: 20px;
      font-size: 14px;
      color: #999;
    }

.cat-com-root .paging {
    overflow: hidden;
    margin-right: 29px;
  }

.cat-com-root .bottomAD {
    width: 100%;
    height: 100px;
    padding: 5px 12px;
    margin: 180px 29px 0 0;
}
/*
 * 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 */

.btm{
  margin-bottom: 4px;
}

.content-item-root {
  width: 160px;
  display: inline-block;  
  overflow: hidden;
  vertical-align: top;
  margin: 0 36px 30px 0;
  position: relative;
}

.content-item-root img {
    margin: 0;
    width: 160px;
    height: 160px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

.content-item-root .imgOverlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 32px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(60,60,60,0.00)), to(#3D3D3D));
    background-image: linear-gradient(-180deg, rgba(60,60,60,0.00) 0%, #3D3D3D 100%);
  }

.content-item-root:hover img {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

.content-item-root .channel-type {
    color: #FF9800;
    border: 1px solid #FF9800;
}

.content-item-root .program-type {
    color: #4A90E2;
    border: 1px solid #4A90E2;
}

.content-item-root .podcaster-type {
    color: #BD10E0;
    border: 1px solid #BD10E0;
}

.content-item-root .radio-type {
    color: #E13430;
    border: 1px solid #E13430;
    font-size: 10px;
    margin-right: 6px;
    padding: 3px;
    border-radius: 4px;
}

.content-item-root .star {
    position: absolute;
    top: 135px;
    left: 7px;
}

.content-item-root .duration {
    position: absolute;
    top: 135px;
    left: 7px;
    font-size: 12px;
    color: rgba(255,255,255, 1);
}

.content-item-root .itemTitle {
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 8px;
}

.content-item-root .itemTitle span {
      display: inline-block;
      vertical-align: middle;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

.content-item-root .itemTitle span:first-of-type {
      font-size: 10px;
      margin-right: 6px;
      padding: 3px;
      border-radius: 4px;
    }

.content-item-root .itemTitle span:last-of-type {
      max-width: 115px;
    }

.content-item-root .itemTitle:hover {
  color: #E13430;
  text-decoration: underline;
}

.content-item-root .itemTitleRadio {
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-item-root .itemTitleRadio span {
      display: inline-block;
      vertical-align: middle;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

.content-item-root .itemTitleRadio span:last-of-type {
      max-width: 115px;
    }

.content-item-root .itemTitleRadio:hover {
  color: #E13430;
  text-decoration: underline;
}

.content-item-root .descRadio {
    font-size: 12px;
    color: #606060;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 12px;
    white-space: nowrap;
    margin-bottom: 8px;
}

.content-item-root .SearchDescRadio {
    display: -webkit-box;
    color: #606060;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 8px;
    font-size: 12px;
}

.content-item-root .desc {
    display: -webkit-box;
    font-size: 12px;
    color: #606060;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}

.content-item-root .info {
    font-size: 12px;
    color: #999999;
}

.content-item-root .info .playCount {
      float: left;
    }

.content-item-root .info .playCount span {
        display: inline-block;
        vertical-align: middle;
      }

.content-item-root .info .broadcaster{
      float:right;
    }

.content-item-root .info .zhubo {
      float: right;
    }

.content-item-root .info .zhubo span:last-of-type {
        display: inline-block;
        white-space: nowrap;
        max-width: 65px;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
      }

.content-item-root .info .search-zhubo {
      float: right;
    }

.content-item-root .info .search-zhubo span:last-of-type {
        display: inline-block;
        white-space: nowrap;
        max-width: 91px;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
      }

.content-item-root .info span:first-of-type {
      display: inline-block;
      vertical-align: middle;
      margin-right: 2px;
      max-width: 60px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

.content-item-root .coverImg {
    display: block;
    position: relative;
    width: 160px;
    height: 160px;
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.1);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.c-itemS {
  width: 140px;
  margin: 0 37px 30px 0;
}

.c-itemS img {
    width: 140px;
    height: 140px;
  }

.c-itemS .coverImg {
    display: block;
    position: relative;
    width: 140px;
    height: 140px;
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.1);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

.c-itemS:nth-child(4n) {
  margin-right: 0;
}

.c-itemR {
  width: 140px;
  margin: 0 37px 30px 0;
}

.c-itemR img {
    width: 140px;
    height: 140px;
  }

.c-itemR .coverImg {
    display: block;
    position: relative;
    width: 140px;
    height: 140px;
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.1);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

.c-itemR:nth-child(4n) {
  margin-right: 0;
}

.searching {
  margin: 0 32px 30px 0;
}

.span-clout{
  display:inline-block;
  margin-top: -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 */

.paging-root {
  text-align: right;
  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 {
  float: right;
  font-size: 16px;
  line-height: 22px;
}

.pagination li {
    display: inline-block;
    margin: 0 6px;
    border-radius: 3px;
    border: 1px solid #CCCCCC;
    min-height: 32px;
    cursor: pointer;
  }

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

.pagination li a:hover {
      color: #3D3D3D;
    }

.pagination li.active {
  background: #E13430;
  border: 1px solid #E13430;

}

.pagination li.active a {
  color: rgba(255,255,255, 1);

}

.pagination .previous.disabled:hover, .pagination .next.disabled:hover {
    background: transparent;
    border: 1px solid rgba(155,154,155,0.50);
  }

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

.pagination .previous, .pagination .next {
    border: 1px solid rgba(155,154,155,0.50);
  }

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

.pagination .previous:hover a, .pagination .next:hover a {
      color: rgba(255,255,255, 1);
    }

.pagination .break-me {
  border: 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 */

.album-root {
  background: #F5F5F8;
}

.album-root .container {
    margin: 0 auto;
    padding: 0 0 40px;
    max-width: 1000px;
  }


/*
 * 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 */

.album-page-root {
  margin: 15px auto 20px;
  width: 1002px;
  background: white;
  padding: 20px;
  -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
          box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
}

.album-page-root .left {
    float: left;
    width: 710px;
    padding-right: 35px;
  }

.album-page-root .right {
    float: left;
    width: 240px;
  }

.album-page-root .right .keyword-hots {
      margin:30px auto;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

.album-page-root .right .keyword-hots .keyword-header {
        width: 100%;
        padding-bottom: 10px;
        border-bottom: 1px solid #DCDEE3;
      }

.album-page-root .right .keyword-hots .keyword-hot {
        padding: 5px;
      }

.album-page-root .right .keyword-hots .keyword-hot .hotWord {
          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
        }

.album-page-root .right .keyword-hots .keyword-hot .hotWord:hover {
  border: 1px solid #E13430;
  -webkit-transition: border .3s linear;
  transition: border .3s linear;
}

.album-page-root .right .keyword-hots .keyword-hot .hotWord:hover a {
              -webkit-transition: color .3s linear;
              transition: color .3s linear;
              color: #E13430;
}

.album-page-root .right .more {
      cursor: pointer;
      position: relative;
    }

.album-page-root .right .more a {
        font-size: 13px;
        line-height: 18px;
        color: #FD5353;
      }

/*
 * 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 */

.headertitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 18px;
  border-left: 3px solid #E13430;
  margin-bottom: 10px;
}

.headertitle >span {
    font-size:18px;
    font-weight:500;
    line-height:18px;
  }

.headertitle .title {
    color: #E13430;
    font-weight:500;
    padding-left: 5px;
    font-size:18px;
    line-height:18px;
    margin: 0;
  }




/*
 * 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 */

.album-info-root .top {
    overflow: hidden;
    position: relative;
  }

.album-info-root .left {
    float: left;
    width: 170px;
  }

.album-info-root .right {
    float: left;
    width: 74%;
  }

.album-info-root .albumImg .bgImg {
      width: 170px;
      height: 170px;
      position: relative;
      cursor: pointer;
      background-size: 100% 100%;
    }

.album-info-root .albumImg .mask {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: -ms-flexbox;
      display: -webkit-box;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      border-radius: 5px;
    }

.album-info-root .albumImg .mask >.icon {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: 42px;
        height: 42px;
      }

.album-info-root .info {
    padding-left: 20px;
  }

.album-info-root .info > div {
      margin-bottom: 10px;
    }

.album-info-root .info span {
      font-size: 14px;
      line-height: 14px;
    }

.album-info-root .info .play {
      margin-bottom: 20px;
    }

.album-info-root .info .titleTag {
      display: inline-block;
      padding: 3px 8px;
      background: #6CC149;
      border-radius: 5px;
      color: white;
    }

.album-info-root .info .title {
      display: inline-block;
      font-size: 22px;
      font-weight: bold;
      max-width: 400px;
    }

.album-info-root .info .album-attrs > .attr {
    font-size:13px;
    font-weight:400;
    color:rgba(136,136,136,1);
    line-height:18px;
    padding: 8px;
    display: inline-block;
    margin-right: 8px;
    background-color: #f5f5f5;
}

.album-info-root .info .podcaster >span {
        display: inline-block;
        vertical-align: middle;
      }

.album-info-root .info .playcount {
      margin-right: 20px;
    }

.album-info-root .propTxt {
    color: #9B9B9B;
    font-size: 14px;
  }

.album-info-root .zhubo_avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
  }

.album-info-root .podcasterName {
    color: #4A90E2;
  }

.album-info-root .desc {
    position: relative;
    display: -webkit-box;
    font-size: 14px;
    color: #606060;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 15px;
    margin-top: 12px;
    cursor: pointer;
    line-height: 1.3;
  }

.album-info-root .tog-btn {
    width:84px;
    height:24px;
    position: relative;
    margin: 0 auto 15px;
    text-align: center;
    background:rgba(255,255,255,1);
    border-radius: 100px;
    border: 1px solid rgba(238,238,238,1);
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color:rgba(96,96,96,1);
    line-height: 24px;
    cursor: pointer
  }

.album-info-root .tog-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -300px;
    width: 293px;
    height: 1px;
    background:rgba(247,247,247,1);
    border: none;
}

.album-info-root .tog-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 90px;
    width: 293px;
    height: 1px;
    background:rgba(247,247,247,1);
    border: none;
}

.album-info-root .audienceCount {
    margin-left: 10px;
  }

.album-info-root .star {
    position: absolute;
    top: 10px;
    right: 15px;
  }

.album-info-root .info .radioPlay {
    margin-top: 20px;
    margin-bottom: 20px;
  }

.album-info-root .radio {
    margin-top: 20px;
  }

.album-info-root .noPodcaster {
    margin-top: 15px;
  }

.album-info-root .noPodcasterAction {
    margin-top: 30px;
  }

/*
 * 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 */

.actionRoot {
  margin: 0 auto;
  font-size: 14px;
}

.actionRoot button {
    padding: 6px 16px 8px 16px;
    border-radius: 6px;
    border: 1px solid #cdcccd;
    margin-right: 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

.actionRoot button span {
    display: inline-block;
    vertical-align: middle;
  }

.actionRoot .sprite {
    margin-right: 5px;
  }

.actionRoot .sprite-list-share-hover,
  .actionRoot .sprite-list-download-hover {
    display: none;
  }

.actionRoot .playBtn {
    background: #e13430;
    border: 1px solid #e13430;
    color: rgba(255, 255, 255, 1);
  }

.actionRoot .playBtn:hover {
    background: #e96764;
    border: 1px solid #e96764;
  }

.actionRoot .shareBtn span, .actionRoot .downloadBtn span, .actionRoot .mobileBtn span, .actionRoot collectBtn span {
      color: #606060;
    }

.actionRoot .shareBtn:hover,
  .actionRoot .downloadBtn:hover,
  .actionRoot .mobileBtn:hover,
  .actionRoot collectBtn:hover {
    background: #f2f2f5;
  }

.actionRoot .mobileBtn {
    color: #fd5353;
  }

.actionRoot .collect-icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url(//sss.qtfm.cn/www/icon/icon-collect-big.png);
    background-size: 100%;
  }

.scrollTopRoot {
  display: none;
  position: fixed;
  bottom: 130px;
  right: 60px;
  font-size: 14px;
  text-align: center;
  z-index: 999;
  background: #ffffff;
  border: 1px solid #eeeeee;
  -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04);
          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04);
  outline: none;
}

.scrollTopRoot .top,
  .scrollTopRoot .dep,
  .scrollTopRoot .qr {
    width: 48px;
    height: 48px;
    overflow: hidden;
    cursor: pointer;
    background: white;
    font-size: 12px;
    outline: none
  }

.scrollTopRoot .top:hover, .scrollTopRoot .dep:hover, .scrollTopRoot .qr:hover {
  background: #e13430;
}

.scrollTopRoot .top .top-pos {
      position: relative;
      top: 7px;
      left: 7px;
      width: 34px;
      height: 34px;
      background: url("//sss.qtfm.cn/neo/sprites3/top@1x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {

  .scrollTopRoot .top .top-pos {
    background: url("//sss.qtfm.cn/neo/sprites3/top@2x.png");
    background-size: contain;
    background-repeat: no-repeat;
  }
}

.scrollTopRoot .top .top-neg {
      display: none;
      font-size: 12px;
      color: #ffffff;
      width: 26px;
      height: 32px;
      margin: 9px 11px;
}

.scrollTopRoot .top:hover .top-pos {
        display: none;
}

.scrollTopRoot .top:hover .top-neg {
        display: block;
}

.scrollTopRoot .qr {
    display: block;
    border-top: 1px solid #eeeeee;
    color: rgba(255, 255, 255, 1);
}

.scrollTopRoot .qr .qr-icon {
      position: relative;
      top: 8px;
      left: 8px;
      width: 32px;
      height: 32px;
      background: url("//sss.qtfm.cn/neo/sprites3/qr-icon@1x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {

  .scrollTopRoot .qr .qr-icon {
    background: url("//sss.qtfm.cn/neo/sprites3/qr-icon@2x.png");
    background-size: contain;
    background-repeat: no-repeat;
  }
}

.scrollTopRoot .qr .show-qr {
      display: none;
      position: absolute;
      left: -220px;
      top: 0px;
      background: #ffffff;
      border: 1px solid #eeeeee;
      -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04);
              box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.04);
      padding: 20px;
}

.scrollTopRoot .qr .show-qr:after {
  content: "";
  position: absolute;
  bottom: 110px;
  right: -10px;
  border-top: 5px solid transparent;
  border-left: 5px solid rgba(255, 255, 255, 1);
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.scrollTopRoot .qr:hover .show-qr {
        display: block;
}

.scrollTopRoot .dep {
    display: block;
    margin-top: 1px;
    color: rgba(255, 255, 255, 1);
}

.scrollTopRoot .dep > div {
      position: relative;
      top: 5px;
    }

.QRCodeRoot {
  display: none;
  position: absolute;
  top: 260px;
  left: 1005px;
  text-align: center;
  z-index: 999;
}

.QRCodeRoot img.bg {
    width: 120px;
  }

.QRCodeRoot img.code {
    position: absolute;
    left: 24px;
    top: 55px;
    width: 73px;
  }

.QRCodeRoot > div {
    font-size: 12px;
    color: #9b9b9b;
  }

.QRCodeRoot .info {
    position: relative;
    top: -55px;
  }

.shareOverlayRoot {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 9999;
  background: rgba(61, 61, 61, 0.3);
}

.shareOverlayRoot .container {
    color: #9b9b9b;
    display: table-cell;
    vertical-align: middle;
  }

.shareOverlayRoot .wrapper {
    position: relative;
    width: 424px;
    margin: auto;
    padding: 40px 0 20px 0;
    border-radius: 7px;
    background: rgba(255, 255, 255, 1);
    background-image: url(//sss.qtfm.cn/www/images/red-averlaybg-small.png);
    background-size: 100% 100%;
    font-size: 14px;
    overflow: visible;
  }

.shareOverlayRoot .wrapper .title {
    text-align: center;
    margin-bottom: 24px;
    letter-spacing: 0;
  }

.shareOverlayRoot .wrapper .title .t1 {
      font-size: 18px;
      color: #333333;
      line-height: 18px;
      margin-bottom: 5px;
    }

.shareOverlayRoot .wrapper .title .t2 {
      font-size: 14px;
      color: #9c9c9c;
      line-height: 18px;
    }

.shareOverlayRoot .wrapper .chargeTitle {
    font-size: 16px;
    color: #333333;
    letter-spacing: 0;
    line-height: 22px;
    width: 360px;
    margin: 0px 32px 32px 33px;
  }

.shareOverlayRoot .wrapper .chargeImg {
    margin: 0 auto 41px;
    height: 200px;
    width: 200px;
  }

.shareOverlayRoot .explorerwrapper {
    width: 600px !important;
    height: 420px;
    padding: 20px 0 20px 0;
  }

.shareOverlayRoot .explorerwrapper .logo {
      position: absolute;
      left: 20px;
      height: 24px;
    }

.shareOverlayRoot .explorerwrapper .infoImg {
      height: 126px;
      width: 150px;
      margin-top: 13px;
    }

.shareOverlayRoot .explorerwrapper .title {
      margin: 15px auto;
      width: 450px;
      font-family: PingFangSC-Regular;
      font-size: 18px;
      color: #333333;
      text-align: center;
      line-height: 30px;
    }

.shareOverlayRoot .explorerwrapper .downBrowserList {
      height: 200px;
      width: 450px;
      margin: 15px auto;
    }

.shareOverlayRoot .explorerwrapper .downBrowserList .downBrowser {
        width: 150px;
        float: left;
      }

.shareOverlayRoot .explorerwrapper .downBrowserList .downBrowser .browserInfo {
          width: 100px;
          margin: auto;
          text-align: center;
        }

.shareOverlayRoot .explorerwrapper .downBrowserList .downBrowser .browserInfo a {
            font-size: 14px;
            color: #3f97fa;
          }

.shareOverlayRoot .shareDownloadWrapper {
    position: relative;
    width: 524px;
    height: 340px;
    margin: auto;
    padding: 40px 0 20px 0;
    border-radius: 17px;
    background: rgba(255, 255, 255, 1);
    background-image: url(//sss.qtfm.cn/www/images/red-averlaybg-small.png);
    background-size: 100% 100%;
    font-size: 14px;
  }

.shareOverlayRoot .shareDownloadWrapper .downloadQrcode {
      width: 150px;
      margin-bottom: 22px;
    }

.shareOverlayRoot .shareDownloadWrapper .downloadMassage {
      margin: auto;
      width: 280px;
      height: 48px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #777777;
      line-height: 24px;
    }

.shareOverlayRoot .shareDownloadWrapper .title {
    text-align: center;
    margin-bottom: 24px;
    letter-spacing: 0;
  }

.shareOverlayRoot .shareDownloadWrapper .title .t1 {
      font-size: 24px;
      color: #000000;
      line-height: 24px;
      margin-bottom: 5px;
    }

.shareOverlayRoot .shareDownloadWrapper .title .t2 {
      font-size: 16px;
      color: #777777;
      text-align: center;
      line-height: 24px;
    }

.shareOverlayRoot .playWrapper {
    position: relative;
    width: 524px;
    height: 340px;
    margin: auto;
    padding: 20px 0 40px 0;
    border-radius: 17px;
    background: rgba(255, 255, 255, 1);
    background-image: url("//sss.qtfm.cn/www/images/red-averlaybg-small.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

.shareOverlayRoot .playWrapper .title {
      background: url("//sss.qtfm.cn/neo/MemberTitle@2x.png");
      background-size: cover;
      background-repeat: no-repeat;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      height: 80px;
      font-size: 24px;
      color: #7e5c32;
      text-align: center;
      line-height: 24px;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {

  .shareOverlayRoot .playWrapper .title {
    background: url("//sss.qtfm.cn/neo/MemberTitle@3x.png");
    background-size: contain;
    background-repeat: no-repeat;
  }
}

.shareOverlayRoot .playWrapper .mobileTitle {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      height: 80px;
      font-weight: 500;
      font-size: 24px;
      color: #000000;
      text-align: center;
      line-height: 24px;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
}

.shareOverlayRoot .playWrapper .playbottomWrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      padding-left: 50px;
      padding-right: 50px;
}

.shareOverlayRoot .playWrapper .playbottomWrapper .playLeftSec {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
      }

.shareOverlayRoot .playWrapper .playbottomWrapper .playLeftSec .playQR {
          background: url("//sss.qtfm.cn/neo/app_QR_img@2x.png");
          background-size: cover;
          background-repeat: no-repeat;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-flex: 1;
              -ms-flex: 1;
                  flex: 1;
          width: 95%;
          height: 200px;
        }

@media (-webkit-min-device-pixel-ratio: 1.5),
            (min-resolution: 1.5dppx) {

  .shareOverlayRoot .playWrapper .playbottomWrapper .playLeftSec .playQR {
    background: url("//sss.qtfm.cn/neo/app_QR_img@3x.png");
    background-size: contain;
    background-repeat: no-repeat;
  }
}

.shareOverlayRoot .playWrapper .playbottomWrapper .playLeftSec .QRimg {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-flex: 1;
              -ms-flex: 1;
                  flex: 1;
          height: 160px;
          width: 160px;
          max-height: 160px;
}

.shareOverlayRoot .playWrapper .playbottomWrapper .playLeftSec .mobileQR {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-flex: 1;
              -ms-flex: 1;
                  flex: 1;
          height: 159px;
          min-width: 143px;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
}

.shareOverlayRoot .playWrapper .playbottomWrapper .playLeftSec .mobileQR .QRimg {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            height: 143px;
            max-width: 143px;
            max-height: 143px;
          }

.shareOverlayRoot .playWrapper .playbottomWrapper .playLeftSec .bottomNotice {
          margin-top: 5px;
          font-size: 16px;
          color: #777777;
          text-align: center;
          line-height: 24px;
          font-weight: 400;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
}

.shareOverlayRoot .playWrapper .playbottomWrapper .playLeftSec + .playRightSec {
  margin-left: 0px;
}

.shareOverlayRoot .playWrapper .playbottomWrapper .playRightSec {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
}

.shareOverlayRoot .playWrapper .playbottomWrapper .playRightSec .firstContent {
          font-size: 15px;
          color: #777777;
        }

.shareOverlayRoot .playWrapper .playbottomWrapper .playRightSec .firstNotice {
          line-height: 23px;
          font-size: 13px;
          color: #999999;
        }

.shareOverlayRoot .playWrapper .playbottomWrapper .playRightSec .rightContent {
          font-size: 15px;
          color: #777777;
          line-height: 28px;
          position: relative;
        }

.shareOverlayRoot .playWrapper .playbottomWrapper .playRightSec .rightContent .scanIcon {
            background: url("//sss.qtfm.cn/neo/scan@2x.png");
            background-size: cover;
            background-repeat: no-repeat;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            position: absolute;
            width: 18px;
            height: 18px;
            right: -24px;
            top: 5px;
          }

@media (-webkit-min-device-pixel-ratio: 1.5),
              (min-resolution: 1.5dppx) {

  .shareOverlayRoot .playWrapper .playbottomWrapper .playRightSec .rightContent .scanIcon {
    background: url("//sss.qtfm.cn/neo/scan@3x.png");
    background-size: contain;
    background-repeat: no-repeat;
  }
}

.shareOverlayRoot .playWrapper .playbottomWrapper .playRightSec .downloadBtn {
          margin-top: 5px;
          margin-bottom: 10px;
          width: 120px;
          height: 36px;
          text-align: right;
          padding-right: 20px;
          position: relative;
          cursor: pointer;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          font-size: 15px;
          color: #fd5353;
          letter-spacing: 0;
          line-height: 14px;
          background: #ffffff;
          border: 1px solid #cdcccd;
          border-radius: 6px;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: end;
              -ms-flex-pack: end;
                  justify-content: flex-end;
}

.shareOverlayRoot .playWrapper .playbottomWrapper .playRightSec .downloadBtn .downloadIcon {
            background: url("//sss.qtfm.cn/neo/Download@2x.png");
            background-size: cover;
            background-repeat: no-repeat;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            position: absolute;
            width: 16px;
            height: 16px;
            left: 13px;
            top: 8px;
          }

@media (-webkit-min-device-pixel-ratio: 1.5),
              (min-resolution: 1.5dppx) {

  .shareOverlayRoot .playWrapper .playbottomWrapper .playRightSec .downloadBtn .downloadIcon {
    background: url("//sss.qtfm.cn/neo/Download@3x.png");
    background-size: contain;
    background-repeat: no-repeat;
  }
}

.shareOverlayRoot .wrapper .vertLine {
    position: absolute;
    width: 3px;
    height: 30px;
    right: 18.5px;
    top: 37px;
    border: none;
    border-right: 1px solid white;
    margin: 0;
    padding: 0;
}

.shareOverlayRoot .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.shareOverlayRoot .shareDownloadClose {
    position: absolute;
    right: -10px;
    top: -15px;
    cursor: pointer;
    outline: none;
}

.shareOverlayRoot .close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 17px;
    height: 17px;
    background-image: url("//sss.qtfm.cn/neo/login/close@2x.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

.shareOverlayRoot .img {
    width: 150px;
    height: 150px;
}

.shareOverlayRoot .bottomWrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    padding-left: 40px;
    padding-right: 40px;
}

.shareOverlayRoot .bottomWrapper .leftSec {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
    }

.shareOverlayRoot .bottomWrapper .leftSec .shareScene {
        height: 200px;
        width: 268px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
      }

.shareOverlayRoot .bottomWrapper .rightSec {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      height: 200px;
    }

.shareOverlayRoot .bottomWrapper .rightSec .QR {
        height: 160px;
        width: 176px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
      }

.shareOverlayRoot.visible {
  display: table;
}

.playButtonRoot .sprite-list-play {
    display: inline-block;
  }

.playButtonRoot .sprite-list-play-hover {
    display: none;
  }

.playButtonRoot.playing .sprite-list-play-hover {
    display: inline-block;
  }

.playButtonRoot.playing .sprite-list-play {
    display: none;
  }

.playButtonRoot:hover .sprite-list-play {
    display: none;
  }

.playButtonRoot:hover .sprite-list-play-hover {
    display: inline-block;
  }

/*
 * 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 */

.album-programs-root {
  display: block;
}

.album-programs-root .header {
    padding-bottom: 10px;
    border-bottom: 1px solid #DCDEE3;
    width: 680px;
  }

.album-programs-root .title {
    border-left: 4px solid #E13430;
    padding-left: 5px;
    margin-right: 6px;
    font-size: 18px;
  }

.album-programs-root .total {
    font-size: 12px;
  }

.album-programs-root .phoneListen {
    padding-top: 3px;
    width:90px;
    height:26px;
    margin-left: 20px;
    border: 1px solid rgba(225,52,48,0.5);
    color:rgba(225,52,48,1);
    border-radius:2px;
    font-size:14px;
    font-family:MicrosoftYaHeiSemilight;
    line-height:14px;
  }

.album-programs-root .phoneListen .phoneListenIcon {
      margin-top: -2px;
      margin-right: 5px;
      display: inline-block;
      vertical-align: middle;
      width: 16px;
      height: 16px;
      background: url(//sss.qtfm.cn/www/icon/icon-phone-listen.png);
      background-size: 100%;
    }

.album-programs-root .order {
    float: right;
    text-align: right;
    margin-right: 5px;
    display: inline-block;
  }

.album-programs-root .order >span {
      margin:2px;
      cursor: pointer;
    }

.album-programs-root .order .selected {
      color: #E13430;
    }

.album-programs-root .programList {
    display: block;
    min-height: 400px;
    width: 680px;
  }

.album-programs-root .programList::-webkit-scrollbar {
    width: 5px;
  }

/* Track */

.album-programs-root .programList::-webkit-scrollbar-track {
    background: #F5F5F8;
    border-radius: 10px;
  }

/* Handle */

.album-programs-root .programList::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0,0,0,0.2);
  }

.album-programs-root .programList::-webkit-scrollbar-thumb:window-inactive {
      background: rgba(0,0,0,0.1);
  }

.album-programs-root .moresView {
    margin-top: 15px;
    width: 100%;
    display: grid;
  }

.album-programs-root .moresView .addMoresButtion {
      margin: 5px auto;
      height:21px;
      font-size:16px;
      font-family:MicrosoftYaHei;
      color:rgba(96,96,96,1);
      line-height:21px;
    }

.album-programs-root .moresView .red {
      color:#E13430
    }

.album-programs-root .tableTitle {
    background: #F2F2F5;
    margin-top: 10px;
    width: 680px;
    padding: 10px 0;
  }

.album-programs-root .tableTitle >span {
      display: inline-block;
      font-size: 16px;
      color: #606060;
    }

.album-programs-root .tableTitle .col1 {
      padding-left: 30px;
      width: 310px;
    }

.album-programs-root .tableTitle .col2 {
      width: 108px;
    }

.album-programs-root .tableTitle .col3 {
      width: 108px;
    }

.album-programs-root .tableTitle .col4 {
      width: 108px;
    }

.album-programs-root .paging {
    margin-top: 20px;
    margin-right: 10px;
  }

/*
 * 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 */

.program-row-root {
  cursor: pointer;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px 0;
  border-bottom: 1px dashed #DCDEE3;
  overflow: hidden;
}

.program-row-root //BFC

  .action {
    display: none;
  }

.program-row-root:hover p {
      color: #E13430;
}

.program-row-root:hover p:hover {
  text-decoration: underline;
}

.program-row-root:hover .action {
      display: block;
}

.program-row-root:hover .action > div {
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-right: 3px;
  color: #9B9B9B;
}

.program-row-root:hover .playCount {
      display: none;
}

.program-row-root .playCount {
    font-size: 12px;
    color: #9B9B9B;
}

.program-row-root p {
    float: left;
    font-size: 14px;
    width: 270px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.program-row-root > span {
  display: inline-block;
  font-size: 14px;
  color: #606060;
  vertical-align: bottom;
}

.program-row-root .tool {
    display: none;
}

.program-row-root .col1 {
    width: 340px;
    height: 20px;
}

.program-row-root .col1 .pTitle {
      width: 270px;
      vertical-align: top;
    }

.program-row-root .col1 .pTitle .chargeP {
        float: left;
        font-size: 14px;
        width: auto;
        width: initial;
        max-width: 228px;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

.program-row-root .col1 .pTitle .chargeFlag {
        display: inline-block;
        margin-left: 5px;
        border-radius: 3px;
        font-size: 11px;
        color: #fd5353;
        border: 1px solid rgba(225, 52, 48, 0.5);
        padding: 1px 2px;
        line-height: 11px;
      }

.program-row-root .col1 .pTitle .paid {
        color: #333;
        border: 1px solid #ccc;
      }

.program-row-root .col1 > div {
      display: inline-block;
    }

.program-row-root .col1 a, .program-row-root .col1 button {
      display: inline-block;
    }

.program-row-root .col1 button {
      width: 20px;
      height: 20px;
      padding: 0;
      margin-right: 10px;
      display: block;
    }

.program-row-root .col1 .sprite-list-play-hover {
      display: none;
    }

.program-row-root .col1 .sprite-list-play {
      display: block;
    }

.program-row-root .col1 .playing .sprite-list-play-hover {
        display: block;
      }

.program-row-root .col1 .playing .sprite-list-play {
        display: none;
      }

.program-row-root .col2, .program-row-root .col3, .program-row-root .col4 {
    width: 108px;
    color: #9B9B9B;
}

.program-row-root:hover .tool.col2 {
      display: inline-block;
}

.program-row-root:hover .col2 {
      display: none;
}

.program-row-root:hover .sprite-list-play {
      display: none;
}

.program-row-root:hover .sprite-list-play-hover {
      display: block;
}

.program-row-root .sprite-list-download-hover {
    display: none;
}

.program-row-root .sprite-list-share-hover {
    display: none;
}

.program-row-root .shareBtn:hover .sprite-list-share-hover {
      display: inline-block;
    }

.program-row-root .shareBtn:hover .sprite-list-share {
      display: none;
    }

.program-row-root .downloadBtn:hover .sprite-list-download-hover {
      display: inline-block;
    }

.program-row-root .downloadBtn:hover .sprite-list-download {
      display: none;
    }

.sprite-list-play-hover, .sprite-list-pause {
  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 */

.radio-programs-root {
  display: block;
}

.radio-programs-root .header {
    padding-bottom: 10px;
    border-bottom: 1px solid #DCDEE3;
    width: 690px;
  }

.radio-programs-root .title {
    border-left: 4px solid #E13430;
    padding-left: 5px;
    margin-right: 6px;
    font-size: 18px;
  }

.radio-programs-root .total {
    font-size: 12px;
  }

.radio-programs-root .programList {
    display: block;
    max-height: 650px;
    width: 690px;
    overflow-x: hidden;
    overflow-y: auto;
  }

.radio-programs-root .programList::-webkit-scrollbar {
      width: 5px;
  }

/* Track */

.radio-programs-root .programList::-webkit-scrollbar-track {
    background: #F5F5F8;
    border-radius: 10px;
  }

/* Handle */

.radio-programs-root .programList::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0,0,0,0.2);
  }

.radio-programs-root .programList::-webkit-scrollbar-thumb:window-inactive {
      background: rgba(0,0,0,0.1);
  }

.radio-programs-root .tableTitle {
    background: #F2F2F5;
    margin-top: 10px;
    width: 690px;
  }

.radio-programs-root .tableTitle >div {
      display: inline-block;
      font-size: 16px;
      color: #606060;
      text-align: center;
      padding: 9px 20px 4px 20px;
      margin: 0 75px;
      cursor: pointer
    }

.radio-programs-root .tableTitle >div:hover {
  color: #E13430;
}

.radio-programs-root .tableTitle .active {
      color: #E13430;
      border-bottom: 5px solid #E13430;
    }

.radio-programs-root .paging {
    margin-top: 20px;
  }

/*
 * 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 */

.radio-program-row-root {
  cursor: pointer;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px 0;    
  border-bottom: 1px dashed #DCDEE3;    
  overflow: hidden;
}

//BFC
  .radio-program-row-root:hover div {
      color: #E13430
    }

//BFC
  .radio-program-row-root:hover div:hover {
  text-decoration: underline;
}

//BFC
  .radio-program-row-root:hover .action {
      display: block;
    }

//BFC
  .radio-program-row-root:hover .playCount {
      display: none;
    }

.radio-program-row-root .action button {
      padding: 3px;
      color: #9B9B9B;
    }

.radio-program-row-root .playCount {
    font-size: 12px;
    color: #9B9B9B;
  }

.radio-program-row-root p {
    float: left;
    font-size: 14px;
    width: 180px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.radio-program-row-root >span {
    display: inline-block;
    font-size: 14px;
    color: #606060;
  }

.radio-program-row-root .sprite-live {
    display: none;
  }

.radio-program-row-root .tool {
    display: none;
  }

.radio-program-row-root button {
    height: 20px;
    padding: 0 10px;
  }

.radio-program-row-root .col1 {
    width: 300px;
  }

.radio-program-row-root .col1 div {
      display: inline-block;
      vertical-align: middle;
      max-width: 250px;
      max-height: 40px;
      overflow: hidden;
    }

.radio-program-row-root .col1 .hide {
      visibility: hidden;
    }

.radio-program-row-root .col1 button {
      width: 20px;
      height: 20px;
      padding: 0;
      margin-right: 10px;
      display: block;
    }

.radio-program-row-root .col1 .playing .sprite-list-play-hover {
        display: block;
      }

.radio-program-row-root .col1 .playing .sprite-list-play {
        display: none;
      }

.radio-program-row-root .col1 .sprite-list-play-hover, .radio-program-row-root .col1 .sprite-list-pause {
      display: none;
    }

.radio-program-row-root .col1 .sprite-list-play-hover, .radio-program-row-root .col1 .sprite-list-pause {
      display: none;
    }

.radio-program-row-root .col2 {
    color: #9B9B9B;
    width: 200px;
  }

.radio-program-row-root .col3 {
    color: #9B9B9B;
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.radio-program-row-root:hover .tool.col2 {
      display: inline-block;
}

.radio-program-row-root:hover .col2 {
      display: none;
}

.radio-program-row-root:hover .sprite-list-play {
      display: none;
}

.radio-program-row-root:hover .sprite-list-play-hover {
      display: block;
}

.radio-program-row-root .shareBtn:hover .sprite-list-share-hover {
      display: inline-block;
    }

.radio-program-row-root .shareBtn:hover .sprite-list-share {
      display: none;
    }

.radio-program-row-root .downloadBtn:hover .sprite-list-download-hover {
      display: inline-block;
    }

.radio-program-row-root .downloadBtn:hover .sprite-list-download {
      display: none;
    }

.sprite-list-download-hover {
  display: none;
}

.sprite-list-share-hover {
  display: none;
}

.radio-program-row-root.now .sprite-live {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }

/*
 * 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 */

.album-recoms-root {
  position: relative;
  margin-top: 10px;
}

.album-recoms-root .header {
    border-bottom: 1px solid #DCDEE3;
    padding-bottom: 20px;
  }

.album-recoms-root .title {
    border-left: 4px solid #E13430;
    padding-left: 5px;
    margin: 0 6px 0 0;
    font-weight: inherit;
    font-size: 18px;
  }

.album-recoms-root .update {
    font-size: 12px;
    position: absolute;
    right: 10px;
    top: 4px;
    color: #686868;
    cursor: pointer;
  }

.album-recoms-root .update span {
      margin-left: 3px;
      vertical-align: middle;
    }

.album-recoms-root .update:hover {
  color: #3D3D3D;
}
/*
 * 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 */

.recom-row-root {
  display: block;
  overflow: hidden;
  margin: 20px 0;
}

.recom-row-root img {
    width: 64px;
    height: 64px;
    border-radius: 1px;
  }

.recom-row-root .left, .recom-row-root .right {
    float: left;
  }

.recom-row-root .left {
    width: 64px;
    height: 64px;
  }

.recom-row-root .right {
    width: 165px;
    margin-left: 10px;
  }

.recom-row-root .title {
    font-size: 14px;
    font-weight: inherit;
    line-height: 14px;
    margin: 5px 0 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
  }

.recom-row-root .title:hover {
  color: #E13430;
  text-decoration: underline;
}

.recom-row-root .title > .title_a {
  color: inherit;
}

.recom-row-root .desc {
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.recom-row-root .info >div {
      display: inline-block;
    }

.recom-row-root .info .audience {
      font-size: 11px;
      line-height: 11px;
      color: #9B9B9B;
    }

.recom-row-root .info .audience span {
        display: inline-block;
        vertical-align: middle;
      }

.recom-row-root .info .audience span:first-of-type {
        margin-right: 5px;
      }

.recom-row-root .info .playcount {
      font-size: 11px;
      line-height: 11px;
      color: #9B9B9B;
      float: right;
      margin-top: 5px;
    }

.recom-row-root .info .playcount span {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
      }

.breadcrumb-root {
  margin: 10px auto;
  height:17px;
  width: 1002px;
  font-size:12px;
  font-weight:400;
  color:rgba(153,153,153,1);
  line-height:17px;
  overflow: hidden
}
.breadcrumb-root a {
  color: inherit
}
.breadcrumb-root a:hover {
  color: #FD5353;
}
/*
 * 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 */

.program-root {
  background: #F5F5F8;
}

.program-root .container {
    margin: 0 auto;
    padding: 0 0 40px;
    max-width: 1000px;
  }

/*
 * 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 */

.c-program-root {
  margin: 15px auto 20px;
  margin-top: 15px;
  width: 1002px;
  background: white;
  padding: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.c-program-root .down {
    overflow: hidden;
    margin-top: 20px;
  }

.c-program-root .left {
    float: left;
    width: 700px;
    padding-right: 35px;
  }

.c-program-root .left .desc {
      display: block;
      padding-right: 20px;
      font-size: 14px
    }

.c-program-root .left .desc > .header {
  padding-bottom: 10px;
  border-bottom: 1px solid #DCDEE3;
}

.c-program-root .left .desc > .header > .title {
  border-left: 4px solid #E13430;
  padding-left: 5px;
  margin-right: 6px;
  font-size: 18px;
}

.c-program-root .left .desc > .contents {
  padding: 10px 0 20px;
  font-size:14px;
  font-weight:400;
  color:rgba(61,61,61,1);
  line-height:22px;
}

.c-program-root .right {
    float: left;
    width: 240px;
  }

.c-program-root .program_topic {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-top: 16px;
  }

.c-program-root .program_topic_item {
    color: #4A90E2;
    margin-right: 16px;
    line-height: 2;
  }

/*
 * 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 */

.c-prgram-info-root {
  overflow: hidden;
}

.c-prgram-info-root .left {
    float: left;
    width: 700px;
  }

.c-prgram-info-root .right {
    float: left;
  }

.c-prgram-info-root .right img {
      width: 240px;
      height: 240px;
    }

.c-prgram-info-root .action {
    margin: 40px auto;
  }

.c-prgram-info-root .info > div {
      margin-bottom: 20px;
      position: relative;
    }

.c-prgram-info-root .info span {
      font-size: 14px;
    }

.c-prgram-info-root .info .program-attrs > .attr {
  font-size:13px;
  font-weight:400;
  color:rgba(136,136,136,1);
  line-height:18px;
  padding: 8px;
  display: inline-block;
  margin-right: 8px;
  background-color: #f5f5f5;
}

.c-prgram-info-root .info .titleTag {
      position: absolute;
      left: 6px;
      top: 2px;
      color: rgba(255,255,255, 1);
    }

.c-prgram-info-root .info .title {
      display: inline-block;
      vertical-align: top;
      width: 600px;
      font-size: 22px;
      font-weight: inherit;
      line-height: 27px;
      font-weight: bold;
      margin: 0 0 0 10px;
    }

.c-prgram-info-root .propTxt {
    color: #9B9B9B;
    font-size: 14px;
  }

.c-prgram-info-root .updatedTime, .c-prgram-info-root .duration {
    margin-left: 35px;
  }

.c-prgram-info-root .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0 5px 0 8px;
  }

.c-prgram-info-root .podcaster > span {
    display: inline-block;
    vertical-align: middle;
  }

.c-prgram-info-root .podcasterName {
    margin-left: 8px;
    color: #4A90E2;
  }

.c-prgram-info-root .album a {
    color: #4A90E2;
  }

.c-prgram-info-root .album:hover {
    text-decoration: underline;
  }

.c-prgram-info-root .album:hover a {
      color: #E13430;
    }

/*
 * 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 */

.c-program-album-root {
  display: block;
}

.c-program-album-root .header {
    padding-bottom: 10px;
    border-bottom: 1px solid #DCDEE3;
  }

.c-program-album-root .title {
    border-left: 4px solid #E13430;
    padding-left: 5px;
    margin: 0 6px 0 0;
    font-size: 16px;
    font-weight: inherit;
  }

/*
 * 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 */

.c-program-row-root {
  cursor: pointer;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px 0;
  border-bottom: 1px dashed #DCDEE3;    
  overflow: hidden;
}

//BFC
  .c-program-row-root:hover p {
      color: #E13430;
    }

//BFC
  .c-program-row-root:hover .action {
      display: block;
    }

//BFC
  .c-program-row-root:hover .playCount {
      display: none;
    }

.c-program-row-root .action button {
      padding: 3px;
      color: #9B9B9B;
    }

.c-program-row-root .tool {
    float: right;
    height: 22px;
  }

.c-program-row-root .playCount {
    font-size: 12px;
    color: #9B9B9B;
  }

.c-program-row-root p {
    float: left;
    font-size: 14px;
    width: 180px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.c-program-row-root >span {
    display: inline-block;
    font-size: 14px;
    color: #606060;
    vertical-align: middle;
  }

.c-program-row-root .tool {
    display: none;
    position: absolute;
    right: 1px;
    top: 10px;
  }

.c-program-row-root .col1 {
    margin-right: 8px;
    width: 20px;
    height: 20px;

  }

.c-program-row-root .col1 a, .c-program-row-root .col1 button {
      display: inline-block;
    }

.c-program-row-root .col2 {
    white-space: nowrap;
    width: 171px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.c-program-row-root .charge {
    display: inline-block;
    border-radius: 3px;
    font-size: 11px;
    color: #fd5353;
    border: 1px solid rgba(225, 52, 48, 0.5);
    padding: 1px 2px;
    line-height: 11px;
  }

.c-program-row-root .paid {
    color: #333;
    border: 1px solid #ccc;
  }

.c-program-row-root:hover .tool {
      display: inline-block;
}

.c-program-row-root:hover .col2 {
      width: 131px;
}

.c-program-row-root:hover .col2 a {
      color: #E13430;
}

.c-program-row-root:hover .col2 a:hover {
  text-decoration: underline;
}

.c-program-row-root :global .sprite-list-download-hover {
    display: none;
}

.c-program-row-root :global .sprite-list-share-hover {
    display: none;
}

.c-program-row-root .shareBtn:hover :global .sprite-list-share-hover {
      display: inline-block;
    }

.c-program-row-root .shareBtn:hover :global .sprite-list-share {
      display: none;
    }

.c-program-row-root .downloadBtn:hover :global .sprite-list-download-hover {
      display: inline-block;
    }

.c-program-row-root .downloadBtn:hover :global .sprite-list-download {
      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 */

.c-comments-root {
  display: block;
  padding-right: 20px;  
  font-size: 14px;
}

.c-comments-root .header {
    padding-bottom: 10px;
    border-bottom: 1px solid #DCDEE3;
  }

.c-comments-root .title {
    border-left: 4px solid #E13430;
    padding-left: 5px;
    margin-right: 6px;
    font-size: 18px;
  }

.c-comments-root .count {
    font-size: 12px;
  }

.c-comments-root .paging {
    margin-top: 20px;
  }

.c-comments-root .fallback {
    text-align: center;
  }

.c-comments-root .fallbackImg {
    width: 146px;
    height: 100px;
    background: url('//sss.qtfm.cn/neo/comment_fallback.png') no-repeat;
    background-size: contain;
    margin: 142px auto 0 auto;
  }

.c-comments-root .fallbackTxt {
    margin-top: 20px;
    font-size: 14px;
    color: #999999;
  }

/*
 * 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 */

.c-comment-root {
  border-bottom: 1px dashed #DCDEE3;
  padding: 15px 0;
  overflow: hidden;
}

.c-comment-root img {
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }

.c-comment-root .wrapper {
    float: left;
    width: 580px;
  }

.c-comment-root .wrapper p {
      margin: 5px 0 10px 0;
    }

.c-comment-root .wrapper .date {
      color: #9B9B9B;
      font-size: 12px;
    }

.c-comment-root .author {
    color: #3353A5;
    margin-right: 8px;
  }

.c-comment-root .tagTop {
    display: inline-block;
    border-radius: 2px;
    border: 1px solid rgb(253 83 83);
    color: rgb(253 83 83);
    font-size: 12px;
    font-weight: normal;
    padding: 1px 2px;
    margin-right: 8px;
    position: relative;
    bottom: 1px;
  }

.c-comment-root .reply {
    position: relative;
    background: #F4F4F4;
    padding: 8px 10px;
    margin: 15px 0 5px 0;
    font-size: 0.7em;
    color: #606060;
    border-radius: 3px;
  }

.c-comment-root .reply .more {
      display: none;
  }

.c-comment-root .reply.clamp {
      padding: 8px 10px 25px 10px;
  }

.c-comment-root .reply.clamp .more {
      display: block;
      position: absolute;
      right: 13px;
      bottom: 5px;
      color: #4A90E2;
      font-size: .7em;
  }

.c-comment-root .reply:before {
    content: "";
    position: absolute;
    top: -10px;
    left: 12px;
    width: 0;
    height: 0;
    z-index: -1;
    border-top: 5px solid transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 5px solid #F4F4F4;
  }

.c-comment-root .replyContent {
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 10;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      font-size: 14px;
      line-height: 20px;
  }

/*
 * 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 */

.search-root {
  background: #F5F5F8;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  background: #f5f5f8;
}

.search-root .container {
    margin: 0 auto;
    padding: 0 0 40px;
    max-width: 1000px;
  }


.search-gallery {
  padding: 30px 35px;
  width: 1002px;
  vertical-align: top;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

  .search-gallery .search-gallery-list {
    padding: 0;
    min-height: 450px;
    min-width: 750px;
  }

  .search-gallery .search-gallery-list div:nth-child(5n) {
  margin-right: 0;
}

.search-search-root {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 260px;
    background: url(//sss.qtfm.cn/neo/background.jpg);
    z-index: 2;
}
    .search-search-root .search-search-container{  
        position: absolute;
        width: 640px;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
    }
  
.input-container >input {
        display: inline-block;
        width: 270px;
        height: 38px;
        border: 1px solid #ccc;
        border-radius: 6px;
        outline: none;
        background: #fff;
        padding: 11px;
        margin: 0;
        font-size: 14px;
        line-height: 14px;
    }
    .input-container .search-input {
        width: 640px;
        height: 50px;
        padding: 16px 10px 15px 20px;
        border:  1px solid #CCCCCC;
        font-size: 16px;
        color: #333;
        line-height: 17px;
    }
    .input-container .CcPE {
        position: absolute;
        right: 13px;
        top: 12px;
    }
    .input-container .sprite {
        background-image: url(//sss.qtfm.cn/neo/sprite@2x.png);
        background-size: 2527px 170px;
        display: inline-block;
    }
    .input-container .sprite-homepage-search {
        width: 22px;
        height: 24px;
        background-position: -1486px 0;
        cursor: pointer;
    }

.navigation {
    width: 270px;
    padding: 11px;
    font-size: 14px;
    position: relative;
}

.navigation .search-input {
        display: inline-block;
        width: 270px;
        height: 38px;
        border: 1px solid #CCCCCC;
        border-radius: 6px;
        outline: none;
        background: rgba(255,255,255, 1);
        padding: 11px;
        margin: 0;
        font-size: 14px;
        line-height: 14px;
    }

.navigation .CcPE {
        right: 10px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
    }
/*
 * 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 */

.omniboxRoot .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

.omniboxRoot .nav-overlay{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

.omniboxRoot .omniboxBody {
        width: 640px;
        margin: auto;
        background: white;
        position: absolute;
        top: 60px;
        padding: 20px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        border-radius: 6px;
        border: 1px solid #CCCCCC;
        z-index: 1;

      }

.omniboxRoot .nav-omniboxBody {
        width: 390px;
        right: -10px;
        top: 53px;
        margin: auto;
        background: white;
        position: absolute;
        padding: 20px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        border-radius: 6px;
        border: 1px solid #CCCCCC;
        z-index: 1;

      }

.historyTitle {
  color: #c3c3c3;
  position: relative;
  text-align: center;
}

.clear {
  float: right;
  font-size: 14px;
  line-height: 1em;
}

.clear span {
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
  }

.clear .sprite-empty-hover {
    display: none;
  }

.clear:hover .sprite-empty {
      display: none;
}

.clear:hover .sprite-empty-hover {
      display: inline-block;
}



/*
 * 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 */

.hotRoot {
  text-align: left;
}

.hotRoot .hotWord {
    line-height: 1em;
    display: inline-block;
    border: 1px solid #DCDEE3;
    border-radius: 6px;
    padding: 9px;
    margin: 10px 20px 10px 0;
    cursor: pointer
  }

.hotRoot .hotWord:hover {
  border: 1px solid #E13430;
  -webkit-transition: border .3s linear;
  transition: border .3s linear;
}

.hotRoot .hotWord:hover a {
        -webkit-transition: color .3s linear;
        transition: color .3s linear;
        color: #E13430;
}
/*
 * 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 */

.historyRoot {
    text-align: left;
  }

.historyRoot .title {
      font-size: 14px;
      line-height: 1em;
      white-space: nowrap;
      max-width: 280px;
      margin-right: 20px;
      overflow: hidden;
      display: block;
      text-overflow: ellipsis;
      cursor: pointer;
    }

.historyRoot .remove {
      position: absolute;
      right: 30px;
      top: 0;
      cursor: pointer;
    }

.historyRoot .sprite-delete-hover {
      display: none;
    }

.historyRow {
    display: block;
    position: relative;
    margin-bottom: 26px
  }

.historyRow:hover .title {
        color: #E13430;
        text-decoration: underline;
}

.historyRow .remove:hover .sprite-delete-hover {
        display: inline-block;
      }

.historyRow .remove:hover .sprite-delete {
        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 */

.search-autocompleted-root {
    width: 640px;
    margin: auto;
    background: white;
    position: absolute;
    top: 60px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid #CCCCCC;
    z-index: 1;
    display: none;
    text-align: left;
    padding: 0;
    overflow: hidden;
}

.search-autocompleted-root .row {
        display: block;
        padding: 10px;
        cursor: pointer
    }

.search-autocompleted-root .row:hover {
    background: #E13430;
    color: white;
}

.search-autocompleted-root .row:hover span {
            color: rgba(255,255,255, 1);
}

.search-autocompleted-root .row span {
          color: #E13430;
}

.search-autocompleted-root .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.search-autocompleted-root .auto-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

.search-autocompleted-root .default {
      width: 640px;
      right: 0;
      z-index: 1;
      position: relative;
    }

.search-autocompleted-root .home {
      left: 50%;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);  
    }

.nav-autocompleted-root {
  width: 390px;
  right: -10px;
  top: 53px;
}

.visible {
  display: block;
}
.link {
    text-decoration: none;
  }
    .link span {
      text-decoration: none;
    }

.row {
  display: block;
  padding: 10px;
  cursor: pointer;
}
/*
 * 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 */

.search-contnet-root {
    position: relative;
    background: #fff;
    -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,.05);
            box-shadow: 0 0 4px 0 rgba(0,0,0,.05);
    border-radius: 1px;
    overflow: hidden;
    margin: 10px auto 20px auto;
    width: 1000px;
}

/*
 * 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 */

.search-contnet-header {
    position: relative;
    padding: 0;
    margin: 20px 35px 0;
    border-bottom: 1px solid #eee;
    font-size: 18px;
}

.search-contnet-header .header-tab {
        width: 60px;
        display: inline-block;
        text-align: center;
        margin-right: 46px;

    }

.search-contnet-header .header-tab .header-tab-link {
            display: block;
            padding-bottom: 13px;
            line-height: 18px
        }

.search-contnet-header .header-tab .header-tab-link:hover {
    cursor: pointer;
    color: #e13430;
}

.search-contnet-header .header-tab .active {
            border-bottom: 5px solid #e13430;
            color: #e13430;
        }

.search-contnet-header .search-info {
        position: absolute;
        right: 0;
        /* top: 0; */
        font-size: 14px;
        color: #606060;
        line-height: 18px;
        width: auto;
        white-space: nowrap;
        margin-right: 0;
        display: inline-block;
        text-align: center;
    }

.search-contnet-header .search-info > span {
            color: #e13430;
            display: inline-block;
            vertical-align: bottom;
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
        }


.search-paging {
    margin-bottom: 40px;
    margin-right: 40px;
    float: right;
    font-size: 16px;
    line-height: 22px;
}
/*
 * 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 */

.p-radio-root {
  background: #F5F5F8;
}

.p-radio-root .container {
    margin: 0 auto;
    padding: 0 0 40px;
    max-width: 1000px;
  }

.community {
  padding: 0 20px;
  background: #F5F5F8;
}

.community-container {
  position: relative;
  margin: 15px auto 20px auto;
  width: 1000px;
  background-color: rgba(255, 255, 255, 1);
  -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.05);
}

.community-menu {
  display: inline-block;
  width: 158px;
  background: rgba(255, 255, 255, 1);
  text-align: center;
  font-size: 16px;
  color: #606060;
  line-height: 40px;
  margin-top: 20px;
  margin-left: 20px;
  padding-bottom: 20px;
  vertical-align: top;
}

.community-category-item {
  display: inline-block;
  width: 158px;
  height: 40px;
  background: #F5F5F8;
  border-bottom: 1px dashed #DFDFDF;
}

.community-category-item-selected {
  display: inline-block;
  width: 158px;
  height: 40px;
  background: #FFFFFF;
  font-size: 18px;
  color: #E13430;
}

.community-category-item-selected::before {
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  height: 40px;
  width: 0px;
  border-left: 6px solid #E13430;
}

.community-category-title {
  color: inherit;
}

.community-main {
  width: 780px;
  padding-left: 40px;
  padding-top: 20px;
  display: inline-block;
}

.community-content-container {
  margin-top: 18px;
}

.community-article-item {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #F7F7F7;
}

.article-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: 18px;
  color: #222222;
  line-height: 25px;
  margin-bottom: 10px;
}

.article-description {
  font-size: 15px;
  color: #222222;
  line-height: 21px;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-title:hover, .article-description:hover {
  color: #E13430;
  cursor: pointer;
}

.article-meta-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 13px;
  color: #999999;
  line-height: 18px;
}

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

.read-btn {
  background: none;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: #0A408E;
  line-height: 21px;
  margin-left: auto;
}

.article {
  padding: 0 20px;
  background: #F5F5F8;
}

.article-container {
  position: relative;
  margin: 15px auto 20px auto;
  width: 1000px;
  background-color: rgba(255, 255, 255, 1);
  -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.05);
          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.05);
}

.article-detail-title {
  margin-bottom: 16px;
  font-weight: 600;
  font-size: 26px;
  color: #222222;
  line-height: 32px;
}

.article-detail-meta-info {
  margin-bottom: 12px;
  font-size: 15px;
  color: #999999;
  line-height: 21px;
}

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

.article-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 20px;
}

.article-area {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.recommend-area {
  margin-left: 16px;
}

.article-program-section-title,
.recommend-section-title {
  border-left: 4px solid #E13430;
  padding-left: 5px;
  margin: 0 6px 0 0;
  font-weight: inherit;
  font-size: 16px;
}

.article-program-section-title {
  margin: 32px 0 16px;
}

.recommend-section-title {
  margin: 16px 0 16px;
}

.article-program-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

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

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

.article-program-title {
  font-size: 14px;
  color: #222222;
  line-height: 17px;
  margin-bottom: 3px;
}

.article-program-title-link {
  color: #222222;
}

.article-program-meta-info {
  font-size: 14px;
  color: #999999;
  line-height: 17px;
}

.article-program-meta-info-item {
  margin-right: 12px;
}

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

.related-article {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.related-article-link {
  font-size: 12px;
  color: #0A408E;
  line-height: 17px;
}

/*
 * 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 */

.radioCarousel {
  width: 672px;
  height: 260px;
}

.radioBannerContainer {
  width: 672px;
  height: 260px;
  position: relative;
}

.radioCarouselCell {
  width: 672px;
  height: 260px;
}

.p-radio-page-root {
  background: #F5F5F8;
}

.p-radio-page-root .mainWrapper {
    width: 1002px;
    margin-left: 50%;
    margin-top: 15px;
    margin-bottom: 20px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    background: #FFFFFF;
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
            box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
  }

.p-radio-page-root .mainWrapper .bodyContainer {
      margin-right: 40px;
    }

.p-radio-page-root .mainWrapper .bodyContainer .bannerContainer {
        width: 672px;
        height: 260px;
        overflow: hidden
      }

.p-radio-page-root .mainWrapper .rightBox {
      width: 30%;
      min-width: 250px;
      padding: 5px;
      padding-top: 0px;
    }

.p-radio-page-root .mainWrapper .rightBox .qrcode {
        margin-bottom: 10px;
      }
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}
.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

.carousel {
  position: relative;
}
  .carousel .slick-slider {
    position: relative;
    width: 100%;
    height: 328px;
    overflow: hidden;
  }
  .carousel .slick-slider :focus {
      outline: none;
    }
  .carousel .slick-slider .cover {
      width: 847px;
      height: 100%;
      outline: none;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
    }
  .carousel .slick-slider .slide-container {
      position: relative;
      height: 328px;
    }
  .carousel .slick-slider .slick-slide {
      position: relative;
      padding: 0 5px;
      height: 328px;
      overflow: hidden;
      cursor: pointer
    }
  .carousel .slick-slider .slick-slide:before {
  position: absolute;
  z-index: 10;
  left: 5px;
  top: 0;
  right: 5px;
  bottom: 0;
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
}
  .carousel .slick-slider .slick-slide.slick-active:before {
  display: none;
}
  .carousel .slick-slider .slick-slide .overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 38px;
        background-image: -webkit-gradient(
          linear,
          left top, left bottom,
          from(transparent),
          to(rgba(0, 0, 0, 0.5))
        );
        background-image: linear-gradient(
          -180deg,
          transparent,
          rgba(0, 0, 0, 0.5)
        );
        cursor: pointer;
}
  .carousel .slick-arrow {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #fff;
    top: 124px;
    opacity: 0.8;
    z-index: 20;
    cursor: pointer
  }
  .carousel .slick-arrow:hover {
  background-color: #e13430;
  fill: #fff;
}
  .carousel .slick-prev {
    left: 0;
  }
  .carousel .slick-next {
    right: 0;
  }
  .carousel .slick-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  .carousel .slick-dots li {
      text-decoration: none;
      display: inline-block;
      width: 20px;
      height: 20px;
      -webkit-box-sizing: content-box;
              box-sizing: content-box
    }
  .carousel .slick-dots li.slick-active button {
          background-color: #e13430;
}
  .carousel .slick-dots li button {
        color: transparent;
        width: 6px;
        height: 6px;
        background-color: hsla(0, 0%, 84%, 0.4);
        border: none;
        border-radius: 100%;
        padding: 4px;
        cursor: pointer;
}

#radio-carousel {
  height: 260px;
}

#radio-carousel .slick-slider {
    height: 100%;
  }

#radio-carousel .slick-list {
    padding: 0 !important;
  }

#radio-carousel .slide-container {
    height: 260px;
  }

#radio-carousel .slick-slide {
    padding: 0;
  }

/*
 * 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 */

.c-radio-page-body-root {
  position: relative;
  font-size: 14px;
}

.c-radio-page-body-root .radioBody {
      position: relative;
      width: 672px;
    }

.c-radio-page-body-root .radioBody .catSec {
        width: 100%;
        height: 50px;
        margin-top: 30px;
      }

.c-radio-page-body-root .radioBody .catSec .channelMenu {
          display: inline-block;
          line-height: 50px;
          width: 25%;
          background: #F5F5F5;
          text-align: center;
        }

.c-radio-page-body-root .radioBody .catSec .channelMenu:hover .menuBtn {
            color: #E13430;
          }

.c-radio-page-body-root .radioBody .catSec .focusMenu {
          background: #E13430;
        }

.c-radio-page-body-root .radioBody .catSec .focusMenu .vLine {
            border-right: 1px solid #E13430;
          }

.c-radio-page-body-root .radioBody .catSec .vLine {
          position: absolute;
          top: 8px;
          width: 0;
          height: 36px;
          border-right: 1px solid #DDDDDD;
          margin-left: 167px;
        }

.c-radio-page-body-root .radioBody .catSec .menuContents {
          position: relative;
          display: block;
          width: 100%;
          height: 100%;
          cursor: pointer;
        }

.c-radio-page-body-root .radioBody .catSec .menuContents .menuIcon {
            position: absolute;
            display: inline-block;
            left: 34px;
            top: 6px;
          }

.c-radio-page-body-root .radioBody .catSec .menuContents .menuMore {
            position: absolute;
            display: inline-block;
            right: 15px;
            top: 22px;
          }

.c-radio-page-body-root .radioBody .catSec .menuContents .sprite2-pulldown {
            width: 9px;
            height: 6px;
            background-position: -435px 0;
          }

.c-radio-page-body-root .radioBody .catSec .menuContents .sprite2-pulldown-selected {
            width: 9px;
            height: 6px;
            background-position: -444px 0;
          }

.c-radio-page-body-root .radioBody .catSec .menuContents .sprite2_wifi {
            width: 34px;
            height: 34px;
            background-position: -588px 0;
          }

.c-radio-page-body-root .radioBody .catSec .menuContents .sprite2_wifi_selected {
            width: 34px;
            height: 34px;
            background-position: -622px 0;
          }

.c-radio-page-body-root .radioBody .catSec .menuContents .sprite2_flag {
            width: 34px;
            height: 34px;
            background-position: -182px 0;
          }

.c-radio-page-body-root .radioBody .catSec .menuContents .sprite2_flag_selected {
            width: 34px;
            height: 34px;
            background-position: -216px 0;
          }

.c-radio-page-body-root .radioBody .catSec .menuContents .sprite2_classify {
            width: 34px;
            height: 34px;
            background-position: -82px 0;
          }

.c-radio-page-body-root .radioBody .catSec .menuContents .sprite2_classify_selected {
            width: 34px;
            height: 34px;
            background-position: -116px 0;
          }

.c-radio-page-body-root .radioBody .catSec .menuContents .sprite2_location {
            width: 34px;
            height: 34px;
            background-position: -272px 0;
          }

.c-radio-page-body-root .radioBody .catSec .menuContents .sprite2_location_selected {
            width: 34px;
            height: 34px;
            background-position: -306px 0;
          }

.c-radio-page-body-root .radioBody .catSec .menuContents .menuBtn {
            height: 100%;
            width: 100%;
            font-size: 16px;
            line-height: 16px;
            color: #666666;
            margin-left: 18px;
          }

.c-radio-page-body-root .radioBody .catSec .menuContents .menuBtnSelected {
            height: 100%;
            width: 100%;
            font-size: 16px;
            line-height: 16px;
            color: rgba(255,255,255, 1);
            margin-left: 18px;
          }

.c-radio-page-body-root .radioBody .catSec .menuContents .paddingLeft {
            padding-left: 25px;
          }

.c-radio-page-body-root .radioBody .catSec .regionChoose .regionsSec {
            width: 100%;
            height: 148px;
            border: 1px solid #E13430;
            position: absolute;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            z-index: 9;
            background: rgba(255,255,255, 1);
          }

.c-radio-page-body-root .radioBody .catSec .regionChoose .regionsSec .regionBtn {
              width: 50px;
              height: 26px;
              font-size: 14px;
              color: #333333;
              line-height: 26px;
              border-radius: 3px;
              background: rgba(255,255,255, 1);
              text-align: center;
            }

.c-radio-page-body-root .radioBody .catSec .regionChoose .regionsSec .regionBtn:hover {
              color: rgba(255,255,255, 1);
              background: #E13430;
            }

.c-radio-page-body-root .radioBody .catSec .regionsSecShow {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
        }

.c-radio-page-body-root .radioBody .catSec .regionsSecHide {
          display: none;
        }

.c-radio-page-body-root .radioBody .catSec .radioClasses .classesSec {
            width: 100%;
            left: 0px;
            border: 1px solid #E13430;
            position: absolute;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            z-index: 9;
            background: rgba(255,255,255, 1);
            padding-top: 20px;
            padding-left: 15px;
            padding-bottom: 11px;
          }

.c-radio-page-body-root .radioBody .catSec .radioClasses .classesSec .classBtn {
              width: 50px;
              height: 26px;
              font-size: 14px;
              color: #333333;
              line-height: 26px;
              border-radius: 3px;
              background: rgba(255,255,255, 1);
              text-align: center;
              padding: 6px 12px;
              margin-right: 6px;
              margin-bottom: 13px;
            }

.c-radio-page-body-root .radioBody .catSec .radioClasses .classesSec .classBtn:hover {
              color: rgba(255,255,255, 1);
              background: #E13430;
            }

.c-radio-page-body-root .radioBody .catSec .classesSecShow {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
        }

.c-radio-page-body-root .radioBody .catSec .classesSecHide {
          display: none;
        }

.c-radio-page-body-root .radioBody .contentSec {
        width: 100%;
        padding-top: 22px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        
      }

.c-radio-page-body-root .radioBody .contentSec .itemS {
          width: 140px;
        }
/*
 * 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 */

.c-hot-radio-box-root {
  position: relative;
  font-size: 14px;
  margin: 0 0 40px 0;
  width: 250px;
}

.c-hot-radio-box-root .header {
    border-bottom: 1px solid #EEEEEE;
    padding-bottom: 10px;
  }

.c-hot-radio-box-root .header .title {
      font-weight: inherit;
      font-size: 16px;
      color: #3D3D3D;
      line-height: 20px;
      padding-left: 5px;
      margin: 0;
      border-left: 4px solid #E13430;
    }

.c-hot-radio-box-root .header .rotate {
      position: absolute;
      right: 0px;
      top: 6px;
      margin: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      font-family: inherit;
      font-size: 12px;
      color: #686868;
      line-height: 14px;
    }

.c-hot-radio-box-root .header .rotate .rotateIcon {
        margin-left: 9px;
        vertical-align: middle;
      }

.c-hot-radio-box-root .header .rotate:hover {
  color: #E13430;
}

.c-hot-radio-box-root .body .radioItem {
      margin: 15px 0 3px 0;
    }

.c-hot-radio-box-root .body .radioItem .radioItemImg {
        width: 70px;
        height: 70px;
        background: #FFFFFF;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        border: 1px solid rgba(0,0,0,0.1);
      }

.c-hot-radio-box-root .body .radioItem .radioItemDesc {
        display: inline-block;
        padding-left: 15px;
        vertical-align: top;
      }

.c-hot-radio-box-root .body .radioItem .radioItemDesc .item_title {
          max-width: 155px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 14px;
          color: #3D3D3D;
          line-height: 14px;
          margin: 5px 0 10px;
          font-weight: inherit
        }

.c-hot-radio-box-root .body .radioItem .radioItemDesc .item_title:hover {
  color: #E13430;
  text-decoration: underline;
}

.c-hot-radio-box-root .body .radioItem .radioItemDesc .item_title > .item_title_a {
  color: inherit;
}

.c-hot-radio-box-root .body .radioItem .radioItemDesc .item_row {
          max-width: 155px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 13px;
          color: #606060;
          letter-spacing: 0px;
          line-height: 13px;
        }

.c-hot-radio-box-root .body .radioItem .radioItemDesc .item_desc {
          margin-bottom: 10px;
        }

.c-hot-radio-box-root .body .radioItem .radioItemDesc .item_desc2 {

        }

/*
 * 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 */

.user-page-root {
    position: relative;
    vertical-align: top;
    background: #fff;
    -webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.06);
            box-shadow: 0 2px 6px 0 rgba(0,0,0,0.06);
    padding: 22px 29px 29px 26px;
    margin: 20px auto;
    width: 1002px;
  }

.user-page-root .tabs {
      display: inline-block;
      width: 159px;
    }

.user-page-root .tabs .tab {
        -webkit-box-shadow: inset 0 0 0 0 #dcdee3;
                box-shadow: inset 0 0 0 0 #dcdee3;
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 16px;
        background: #f5f5f8;
        color: #333;
        cursor: pointer;
        font-weight: normal;
      }

.user-page-root .tabs .selected {
        font-weight: bold;
        font-size: 18px;
        color: #FD5353;
        background: #fff;
        border-left: 4px solid #fd5353;
      }

.user-page-root .user-contents-root{
      display: inline-block;
      margin: 0 0 0 40px;
      padding: 0;
      width: 748px;
      min-height: 800px;
      vertical-align: top;
    }

.user-page-root .user-contents-root .contents-title {
        font-size: 22px;
        color: #333;
        border-bottom: 1px solid #dcdee3;
        padding: 0 0 20px;
        margin-bottom: 20px;
        position: relative;
      }

.user-page-root .user-contents-root .contents-title .favOptions {
          position: absolute;
          right: 0;
          top: 0;
        }

.user-page-root .user-contents-root .contents-title .favOptions .option {
            font-size: 18px;
            color: #666;
            display: inline-block;
            padding: 0 18px;
            margin: 0;
            border-right: 1px solid rgba(102, 102, 102, 0.5);
            cursor: pointer
          }

.user-page-root .user-contents-root .contents-title .favOptions .option:last-of-type {
    padding-right: 0;
    border: none;
}

.user-page-root .user-contents-root .contents-title .favOptions .activeOpt {
            color: #fd5353;
          }

.user-page-root .proot {
      float: left;
      width: 160px;
      margin-right: 36px;
      margin-bottom: 20px;
    }

.user-page-root .proot .thumb {
        position: relative;
        display: block;
        height: 160px;
        margin-bottom: 10px;
        cursor: pointer;
      }

.user-page-root .proot .thumb .img {
          height: 160px;
          border: 1px solid rgba(0, 0, 0, 0.1);
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
        }

.user-page-root .proot .thumb .imgOverlay {
          position: absolute;
          bottom: 0;
          left: 1px;
          width: 100%;
          padding-left: 10px;
          background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0)), to(#000));
          background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, #000 100%);
        }

.user-page-root .proot .thumb .imgOverlay .playCountIcon {
            display: inline-block;
            margin-right: 8px;
            vertical-align: middle;
          }

.user-page-root .proot .thumb .imgOverlay .playCountText {
            display: inline-block;
            line-height: 28px;
            color: white;
            font-size: 12px;
          }

.user-page-root .proot .desc {
        font-size: 14px;
        font-weight: normal;
        color: #333;
        line-height: 20px;
        max-height: 40px;
        height: inherit;
      }

.user-page-root .proot .desc:hover {
        color: #E13430;
        text-decoration: underline;
      }

.user-page-root .proot:nth-child(4n) {
      margin-right: 0;
    }

.user-page-root .proot:nth-child(4n+1) {
      clear: both;
    }

.user-page-root .user-history {
      width: 100%;
      height: 140px;
      position: relative;
      cursor: pointer;
    }

.user-page-root .user-history .cover {
        width: 120px;
        height: 120px;
        position: absolute;
        top: 10px;
        left: 0;
      }

.user-page-root .user-history .meta {
        position: absolute;
        left: 140px;
        top: 0;
        padding: 27px 0;
        width: calc(100% - 130px);
      }

.user-page-root .user-history .meta .cname {
          font-size: 18px;
          color: #333;
          margin-bottom: 10px;
        }

.user-page-root .user-history .meta .pname {
          font-size: 16px;
          font-weight: normal;
          color: #9b9b9b;
          margin-bottom: 10px;
        }

.user-page-root .user-history .meta .playInfo {
          font-size: 14px;
          font-weight: normal;
          color: #9b9b9b;
          position: relative;
        }

.user-page-root .user-history .meta .playInfo .position {
            position: absolute;
            top: 0;
            left: 0;
          }

.user-page-root .user-history .meta .playInfo .percent {
            position: absolute;
            left: 130px;
            top: 0;
          }

.user-page-root .paging {
      clear: both;
      overflow: hidden;
      margin-right: 29px;
    }

.user-page-root .empty {
      width: 100px;
      height: 102px;
      background-size: contain;
      margin: 142px auto 0;
    }

.user-page-root .empty-word {
      margin-top: 20px;
      font-size: 14px;
      color: #999;
      text-align: center;
    }

.loading {
    margin: 140px auto 0;
    color: #999;
    font-size: 14px;
    text-align: center;
  }

.loading-icon {
    width: 80px;
    height: 80px;
    margin: 8px auto;
    -webkit-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite;
    background: url('//sss.qtfm.cn/neo/login/loading@3x.png') no-repeat;
    background-size: contain;
  }

@keyframes spin {
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
  }

@-webkit-keyframes spin {
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
  }
  
  
  


/*
 * 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 */

.user-shop-root {
  width: 100%;
  height: 140px;
  overflow: hidden;
  vertical-align: top;
  margin: 0 32px 30px 0;
  position: relative;
  cursor: pointer;
}

.user-shop-root .cover {
    margin: 0;
    width: 120px;
    height: 120px;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: absolute;
    top: 10px;
    left: 0;
  }

.user-shop-root .meta {
    position: absolute;
    left: 140px;
    top: 0;
    padding: 25px 0;
  }

.user-shop-root .meta .title {
      font-size: 18px;
      color: #333;
    }

.user-shop-root .meta .subTitle {
      font-size: 16px;
      color: #9b9b9b;
      padding: 10px 0;
    }

.user-shop-root .meta .updatedTime {
      font-size: 14px;
      color: #9b9b9b;
    }
/*
 * 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 */

.about-root {
  background: #F5F5F8;
}


/*
 * 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 */

.about-page-root {
  background: #F5F5F8;

}

.about-page-root .container {
  width: 1002px;
  margin: 15px auto 20px;
  padding: 20px;
  max-width: 1000px;
  background: white;
  -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
          box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.about-page-root .title {
  font-size: 22px;
  text-align: center;
}

.about-page-root .title >div {
    display: inline-block;
    padding-bottom: 3px;
    border-bottom: 5px solid #DDDDDD;
  }

.about-page-root .content {
  font-size: 14px;
  line-height: 24px;
  margin-top: 15px;
}

.about-page-root .content .qt {
    font-size: 16px;
    color: #E13430;
  }

.about-page-root .features {
  font-size: 14px;
  margin-top: 28px;
}

.about-page-root .features li {
    margin-bottom: 8px;
  }

.about-page-root .features li >div {
      display: inline-block;
      vertical-align: bottom;
    }

.about-page-root .features .subTitle {
    margin-bottom: 12px;
    font-size: 16px;
  }

.about-page-root .bullet {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #E13430;
  color: rgba(255,255,255, 1);
  border-radius: 10px;
  text-align: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-right: 8px;
}

.about-page-root .contact {
  margin-top: 60px;
}

.about-page-root .founder {
  margin-top: 60px;
}

.about-page-root .contacts {
  margin: 50px 0;
}

.about-page-root .contacts li {
    display: inline-block;
    width: 33%;
    margin-bottom: 50px;
  }

.about-page-root .contacts li >div {
    display: inline-block;
  }

.about-page-root .contacts .kind {
    font-size: 22px;
  }

.about-page-root .contacts .mail {
    color: #666666;
  }

.about-page-root .contacts :global .sprite {
    margin-right: 20px;
  }

.about-page-root .map {

}

.about-page-root .addr {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 10px;
}

.about-page-root .saddr {
  color: #666666;
}

.about-page-root .saddr >div {
    display: inline-block;
    vertical-align: bottom;
    margin-right: 7px;
  }

.about-page-root .corporation{
  width: 44px;
  height: 44px;
  background-image: url(//sss.qtfm.cn/neo/corporation/corporated-icon.png);
  background-repeat: no-repeat;
  margin-right: 20px;
}

.about-page-root .corporationLink{
  cursor: pointer;
}

.about-page-root .corporationStyle {
}

.about-page-root .corporationStyle:hover {
  color: #fd5353;
}
/*
 * 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 */

.corporation-root {
  background: #F5F5F8;
}


/*
 * 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 */

.corporation-page-root {
  background: #F5F5F8;

}

.corporation-page-root .container {
  width: 1002px;
  margin: 15px auto 20px;
  max-width: 1000px;
  background: #F5F5F8;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.corporation-page-root .container .corporation-content .top{
        position: relative;
        background: white;
        width: 100%;
        height: 300px;
        margin-bottom: 10px;
        padding: 20px;
       
    }

.corporation-page-root .container .corporation-content .top .banner {
            position: relative;
            height: 100%;
            width: 672px;
            display: inline-block;
            border: 1px solid #DEDEE4;
            margin-right: 8px;
        }

.corporation-page-root .container .corporation-content .top .agent {  
            position: relative;
            height: 100%;
            width: 279px;
            display: inline-block;
            border: 1px solid #DEDEE4;
        }

.corporation-page-root .container .corporation-content .top .agent .aContainer{
              position: absolute;
              width: 100%;
              height: 100%;
            }

.corporation-page-root .container .corporation-content .top .agent .aContainer .title {
                font-family: PingFangSC-Medium;
                font-size: 18px;
                color: #000000;
                text-align: center;
                margin: 10px;
              }

.corporation-page-root .container .corporation-content .top .agent .aContainer .info{
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #666666;
                line-height: 24px;
                padding: 0px 16px 0 16px;
              }

.corporation-page-root .container .corporation-content .top .agent .aContainer .file {
                position: relative;
                margin-bottom: 0.28rem;
                width: 100%;
                padding: 0 16px 0 16px;
              }

.corporation-page-root .container .corporation-content .top .agent .aContainer .file .text{
                  font-family: PingFangSC-Regular;
                  font-size: 14px;
                  color: #666666;
                  display: inline-block;
                }

.corporation-page-root .container .corporation-content .top .agent .aContainer .file .connectInfo{
                  position: relative;
                  font-family: PingFangSC-Regular;
                  font-size: 14px;
                  color: #FD5353;
                }

.corporation-page-root .container .corporation-content .top .agent .aContainer .file .connectInfo .fileLink{
                    font-family: PingFangSC-Regular;
                    font-size: 14px;
                    color: #FD5353;
                  }

.corporation-page-root .container .corporation-content .top .agent .aContainer .file .connectInfo .splitLine{
                    width: 0.06rem;
                    height: 0.5rem;
                    opacity: 0.6;
                    color: rgba(153,153,153,1);
                    margin: 5px;
                    position: relative;
                    vertical-align: middle;
                  }

.corporation-page-root .container .corporation-content .top .agent .aContainer .file .connectInfo .download{
                    width: 18px;
                    height: 18px;
                    position: relative;
                    vertical-align: middle;
                    margin: 5px;
                  }

.corporation-page-root .container .corporation-content .top .agent .aContainer .dotLineContainer{
                width: 100%;
                padding: 0px 16px 0 16px;
              }

.corporation-page-root .container .corporation-content .top .agent .aContainer .dotLineContainer .splitDotLine{
                  width: 100%;
                  opacity: 0.25;
                  border: 0.5px dotted #000000;
                  position: relative;
                }

.corporation-page-root .container .corporation-content .top .agent .aContainer .qContainer{
                width: 100%;
                height: 88px;
                padding: 0px 16px 0 16px;
                position: relative;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                    -ms-flex-direction: row;
                        flex-direction: row;
              }

.corporation-page-root .container .corporation-content .top .agent .aContainer .qContainer .qr{
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex;
                  -webkit-box-flex: 1;
                      -ms-flex: 1;
                          flex: 1;
                  position: relative;
                }

.corporation-page-root .container .corporation-content .top .agent .aContainer .qContainer .qr .qrImgContainer{
                    width: 60px;
                    height: 60px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%, -50%);
                            transform: translate(-50%, -50%);
                  }

.corporation-page-root .container .corporation-content .top .agent .aContainer .qContainer .qr .qrImg {
                    width: 100%;
                    height: 100%;
                  }

.corporation-page-root .container .corporation-content .top .agent .aContainer .qContainer .qrDesc{
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex;
                  -webkit-box-flex: 2;
                      -ms-flex: 2;
                          flex: 2;
                  position: relative;
                }

.corporation-page-root .container .corporation-content .top .agent .aContainer .qContainer .qrDesc .qDesc{
                    width: 100%;
                    font-family: PingFangSC-Regular;
                    font-size: 14px;
                    color: #666666;
                    line-height: 22px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%, -50%);
                            transform: translate(-50%, -50%);
                  }

.corporation-page-root .container .corporation-content .bottom {
        position: relative;
        background: white;
        height: 476px;
        width: 100%;
    }

.corporation-page-root .container .corporation-content .bottom .content {
          width: 100%;
          height: 100%;
          background: url(//sss.qtfm.cn/neo/corporation/corporated-content.png);
          background-size: contain;
        }
.collection-carousel {
    overflow: hidden;
    position: relative;
    outline: none;
    width: 100%;
    height: 100%;
}
    .collection-carousel .carousel-container{
        left: 0px;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .collection-carousel .carousel-container .cItem{
            position: absolute;
        }
    .collection-carousel .carousel-container .cItem .cover{
                opacity: 1;
                height: 100%;
            }
    .collection-carousel .notice {
        position: absolute;
        width: 100%;
        height: 37px;
        bottom: 0;
        opacity: 0.3;
        background: #000000;
    }
    .collection-carousel .dotContainer {
        position: absolute;
        right: 0;
        top: 88%;
    }
    .collection-carousel .dotContainer .dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 0 8px;
            opacity: 0.4;
            background: #FFFFFF;
            border-radius: 50%;
            cursor: pointer;
        }
    .collection-carousel .dotContainer .selected {
            opacity: 1;
        }
    .collection-carousel .title {
        position: absolute;
        left: 16px;
        top: 89%;
        font-size: 14px;
        color: #FFFFFF;
    }
/*
 * 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 */

.download-root {
  background: #F5F5F8;
  width: 100%;
  min-width: 1080px;
  font-weight: normal;
  line-height: normal;
}

.download-root .container {
    font-size: 0;
    text-align: center;
    width: 100%;
    margin: 0 auto;

  }

.download-root .container img {
      max-width: 100%;
    }

.download-root .container > .sec {
  width: 100%;
  position: relative;
  text-align: center;
  overflow: hidden;
  padding-bottom: 50px;
  padding-top: 35px;
}

.download-root .container > .sec:nth-of-type(2n + 1) {
  background: white;
}

.download-root .container > .sec > .btns {
  position: absolute;
  top: 54%;
  left: 37%;
  width: 11%;
}

.download-root .container > .sec > .btns > .btn {
  cursor: pointer;
  display: block;
  width: 100%;
  margin-bottom: 20px;
  border-radius: 30px;
  font-size: 20px;
  color: #FFFFFF;
  background-size: contain;
  background-repeat: no-repeat;
}

.download-root .container > .sec > .sec-title {
  margin: 0;
  font-size: 50px;
  color: #333333;
  text-align: center;
  font-weight: normal;
}

.download-root .container > .sec > .sec-desc {
  margin-top: 15px;
  font-size: 24px;
  color: #333333;
  text-align: center;
}

.download-root .container #sec-1 {
      padding: 0;
      background: #F5F5F8;
}

.download-root .container #sec-1 > img {
  width: 100%;
}

.download-root .container #sec-2 > img {
  height: 235px;
}

.download-root .container #sec-3 > img {
  height: 235px;
  margin-top: 38px;
}

.download-root .container #sec-4, .download-root .container #sec-5 {
      padding-bottom: 0;
}

.download-root .container #sec-4 > img, .download-root .container #sec-5 > img {
  height: 290px;
  margin-top: 10px;
}

.download-root .container #sec-6 {
      background: #2C2A2A;
      height: 464px;
      text-align: center;
      padding: 65px 0 58px;
}

.download-root .container #sec-6 > #bottom-logo {
  display: block;
  width: 178px;
  height: 45px;
  margin: 0 auto;
  background-image: url(https://sss.qtfm.cn/www/images/logo-white.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.download-root .container #sec-6 > #bottom-btns {
  margin: 60px auto 0;
  height: 60px;
}

.download-root .container #sec-6 > #bottom-btns > .bottom-btn {
  border-radius: 30px;
  width: 240px;
  height: 60px;
  display: inline-block;
  background-size: contain;
  cursor: pointer;
}

.download-root .container #sec-6 > #bottom-btns > .bottom-btn:not(:last-of-type) {
  margin-right: 70px;
}

.download-root .container #sec-6 > .plat-container {
  margin: 55px auto 0;
  text-align: center;
}

.download-root .container #sec-6 > .plat-container > .plat-title {
  font-size: 10px;
  color: #999999;
  text-align: center;
  position: relative;
  display: inline-block;
}

.download-root .container #sec-6 > .plat-container > .plat-title::before, .download-root .container #sec-6 > .plat-container > .plat-title::after {
  content: '';
  width: 80px;
  height: 1px;
  border: none;
  background: #999999;
  position: absolute;
  top: 50%;
}

.download-root .container #sec-6 > .plat-container > .plat-title::before {
  left: -90px;
}

.download-root .container #sec-6 > .plat-container > .plat-title::after {
  right: -90px;
}

.download-root .container #sec-6 > .plat-container > .plat-list {
  margin-top: 30px;
}

.download-root .container #sec-6 > .plat-container > .plat-list > .plat-item {
  display: inline-block;
  margin-right: 16px;
  width: 160px;
  height: 64px;
  border-radius: 4px;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}

.download-root .container #sec-6 > .plat-container > .plat-list > .plat-item:last-of-type {
  margin: 0;
}

.download-root .container #sec-6 > .plat-container > .plat-list #plat-tengxunsj {
            background-image: url(https://sss.qtfm.cn/images/store1.png);
}

.download-root .container #sec-6 > .plat-container > .plat-list #plat-sanliuling {
            background-image: url(https://sss.qtfm.cn/images/store_2.png);
}

.download-root .container #sec-6 > .plat-container > .plat-list #plat-anzhi {
            background-image: url(https://sss.qtfm.cn/images/store3.png);
}

.download-root .container #sec-6 > .plat-container > .plat-list #plat-sanxing {
            background-image: url(https://sss.qtfm.cn/images/store_4.png);
}

.download-root .container #bot-android-btn {
      background-image: url(https://sss.qtfm.cn/www/images/downloadAndroid.png);
}

.download-root .container #bot-ios-btn {
      background-image: url(https://sss.qtfm.cn/www/images/downloadApple.png);
}

.download-root .container #bot-harmonynext-btn {
      background-image: url("https://sss.qtfm.cn/www/images/harmonynext.png");
}

/*
 * 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 */

.podcaster-root {
  background: #F5F5F8;
}

/*
 * 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 */

.podcaster-page-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

.podcaster-page-wrapper .podcaster-top-info-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    height: 206px;
    background-image: url(//sss.qtfm.cn/pc-podcaster/podcasterBg@3x.png);
    background-color: #ff5757;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
  }

.podcaster-page-wrapper .podcaster-top-info-wrapper .podcaster-top-info {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      width: 1020px;
      padding: 50px 0;
    }

.podcaster-page-wrapper .podcaster-top-info-wrapper .podcaster-top-info .avatar {
        margin-left: 60px;
        height: 102px;
        width: 102px;
        border: 2px solid #fff;
        border-radius: 100%;
      }

.podcaster-page-wrapper .podcaster-top-info-wrapper .podcaster-top-info .info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        margin-left: 16px;
        color: #fff;
      }

.podcaster-page-wrapper .podcaster-top-info-wrapper .podcaster-top-info .info .name {
          max-width: 378px;
          font-weight: bold;
          font-size: 18px;
          line-height: 25px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

.podcaster-page-wrapper .podcaster-top-info-wrapper .podcaster-top-info .info .brief {
          max-width: 347px;
          font-size: 13px;
          line-height: 18px;
          text-align: justify;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

.podcaster-page-wrapper .podcaster-page-root {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 14px auto 20px;
    width: 1002px;
    background: white;
    padding: 24px 20px 126px 20px;
    -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
            box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow: hidden;
  }

.podcaster-page-wrapper .podcaster-page-root .left-body {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      width: 682px;
    }

.podcaster-page-wrapper .podcaster-page-root .right-body {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      width: 240px;
      margin-left: auto;
    }

/*
 * 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 */

.podcaster-programs-root {
  margin-top: 68px;
  display: block;
}

.podcaster-programs-root .header {
    padding-bottom: 10px;
    border-bottom: 1px solid #DCDEE3;
    width: 680px;
  }

.podcaster-programs-root .title {
    border-left: 4px solid #E13430;
    padding-left: 5px;
    margin-right: 10px;
    font-size: 18px;
  }

.podcaster-programs-root .total {
    font-size: 12px;
  }

.podcaster-programs-root .programList {
    display: block;
    min-height: 400px;
    width: 680px;
  }

.podcaster-programs-root .programList::-webkit-scrollbar {
    width: 5px;
  }

/* Track */

.podcaster-programs-root .programList::-webkit-scrollbar-track {
    background: #F5F5F8;
    border-radius: 10px;
  }

/* Handle */

.podcaster-programs-root .programList::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0,0,0,0.2);
  }

.podcaster-programs-root .programList::-webkit-scrollbar-thumb:window-inactive {
      background: rgba(0,0,0,0.1);
  }

.podcaster-programs-root .tableTitle {
    background: #F2F2F5;
    margin-top: 10px;
    width: 680px;
    padding: 10px 0;
  }

.podcaster-programs-root .tableTitle >span {
      display: inline-block;
      font-size: 16px;
      color: #606060;
    }

.podcaster-programs-root .tableTitle .col1 {
      padding-left: 30px;
      width: 310px;
    }

.podcaster-programs-root .tableTitle .col2 {
      width: 162px;
    }

.podcaster-programs-root .tableTitle .col4 {
      width: 162px;
    }

/*
 * 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 */

.program-row-root {
  cursor: pointer;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px 0;
  border-bottom: 1px dashed #DCDEE3;
  overflow: hidden;
}

.program-row-root //BFC

  .action {
    display: none;
  }

.program-row-root:hover p {
      color: #E13430;
}

.program-row-root:hover p:hover {
  text-decoration: underline;
}

.program-row-root:hover .action {
      display: block;
}

.program-row-root:hover .action > div {
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-right: 3px;
  color: #9B9B9B;
}

.program-row-root:hover .playCount {
      display: none;
}

.program-row-root .playCount {
    font-size: 12px;
    color: #9B9B9B;
}

.program-row-root p {
    float: left;
    font-size: 14px;
    width: 300px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.program-row-root > span {
  display: inline-block;
  font-size: 14px;
  color: #606060;
  vertical-align: bottom;
}

.program-row-root .tool {
    display: none;
}

.program-row-root .col1 {
    width: 340px;
    height: 20px;
}

.program-row-root .col1 .pTitle {
      width: 270px;
      vertical-align: top;
    }

.program-row-root .col1 > div {
      display: inline-block;
    }

.program-row-root .col1 a, .program-row-root .col1 button {
      display: inline-block;
    }

.program-row-root .col1 button {
      width: 20px;
      height: 20px;
      padding: 0;
      margin-right: 10px;
      display: block;
    }

.program-row-root .col2, .program-row-root .col3, .program-row-root .col4 {
    width: 108px;
    color: #9B9B9B;
}

.program-row-root:hover .tool.col2 {
      display: inline-block;
}

.program-row-root:hover .col2 {
      display: none;
}

.program-row-root:hover .sprite-list-play {
      display: none;
}

.program-row-root:hover .sprite-list-play-hover {
      display: block;
}

.program-row-root .sprite-list-download-hover {
    display: none;
}

.program-row-root .sprite-list-share-hover {
    display: none;
}

.program-row-root .shareBtn:hover .sprite-list-share-hover {
      display: inline-block;
    }

.program-row-root .shareBtn:hover .sprite-list-share {
      display: none;
    }

.program-row-root .downloadBtn:hover .sprite-list-download-hover {
      display: inline-block;
    }

.program-row-root .downloadBtn:hover .sprite-list-download {
      display: none;
    }

.sprite-list-play-hover, .sprite-list-pause {
  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 */

.channels-wrapper .header {
    padding-bottom: 9px;
    border-bottom: 1px solid #DCDEE3;
    width: 100%;
  }

.channels-wrapper .title {
    border-left: 4px solid #E13430;
    padding-left: 5px;
    margin-right: 10px;
    font-size: 18px;
    line-height: 20px;
  }

.channels-wrapper .total {
    font-size: 12px;
  }

.channels-wrapper .channels {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

.channels-wrapper .channels .channel {
      -webkit-box-flex: 0;
          -ms-flex: none;
              flex: none;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      width: 140px;
      height: 202px;
      margin-top: 20px;
      margin-right: 37px
    }

.channels-wrapper .channels .channel:nth-child(4n) {
    margin-right: 0;
}

.channels-wrapper .channels .channel .channel-img-wrapper {
        height: 140px;
        width: 140px;
        overflow: hidden;
}

.channels-wrapper .channels .channel .channel-img-wrapper img {
          height: 140px;
          width: 140px;
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
          margin: 0
        }

.channels-wrapper .channels .channel .channel-img-wrapper img:hover {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

.channels-wrapper .channels .channel .channel-title {
        color: #333333;
        margin-top: 9px;
        font-size: 14px;
        line-height: 16px;
        font-weight: bold;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
}

.channels-wrapper .channels .channel .channel-title:hover {
    color: #E13430;
}

.channels-wrapper .channels .channel .desc {
        color: #666666;
        font-size: 12px;
        line-height: 14px;
        width: 100%;
        margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
}
/*
 * 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 */

.podcaster-recommends-root {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 25px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.podcaster-recommends-root .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    height: 33px;
    border-bottom: 1px solid #DCDEE3;
  }

.podcaster-recommends-root .header .title {
      color: #3D3D3D;
      font-weight: bold;
      border-left: 4px solid #E13430;
      padding-left: 5px;
      font-size: 16px;
      line-height: 18px;
      margin: 0;
    }

.podcaster-recommends-root .header .refresh {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin-left: auto;
      font-size: 12px;
      color: #666;
      cursor: pointer
    }

.podcaster-recommends-root .header .refresh:hover {
  color: #333;
}

.podcaster-recommends-root .header .refresh .refresh-icon {
        background-image: url(//sss.qtfm.cn/neo/sprite2@2x.png);
        background-size: 656px 42px;
        margin-left: 3px;
        width: 14px;
        height: 14px;
        background-position: -64px 0;
}

.podcaster-recommends-root .recommends {
    width: 100%;
  }

.podcaster-recommends-root .recommends .recommend {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin-top: 18px;
    }

.podcaster-recommends-root .recommends .recommend .avatar {
        border-radius: 100%;
        border: 2px solid #FFFFFF;
        height: 50px;
        width: 50px;
      }

.podcaster-recommends-root .recommends .recommend .name {
        font-weight: bold;
        margin-left: 8px;
        color: #333333;
        font-size: 14px;
        line-height: 20px;
      }

.podcaster-recommends-root .more {
    margin-top: 24px;
    cursor: pointer;
    position: relative;
  }

.podcaster-recommends-root .more a {
      font-size: 15px;
      line-height: 21px;
      color: #FD5353;
    }

.podcaster-recommends-root .more .hover {
      display: none;
      position: absolute;
      bottom: 35px;
      left: -36px;
      padding: 14px;
      z-index: 11;
      background: rgba(255,255,255, 1);
      border: 1px solid #E3E3E3
    }

.podcaster-recommends-root .more .hover:before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 60px;
  border-top: 5px solid rgba(255,255,255, 1);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  z-index: 1;
}

.podcaster-recommends-root .more .hover:after {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 60px;
  border-top: 5px solid #E3E3E3;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.podcaster-recommends-root .more .hover img {
        width: 100px;
        height: 100px;
}

.podcaster-recommends-root .more:hover .hover {
        display: block;
}

/*
 * 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 */

.podcaster-info {
  font-size: 14px;
  width: 100%;
}

.podcaster-info .header {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    height: 27px;
    border-bottom: 1px solid #DCDEE3;
  }

.podcaster-info .header .title {
      color: #3D3D3D;
      font-weight: bold;
      border-left: 4px solid #E13430;
      padding-left: 5px;
      font-size: 16px;
      line-height: 18px;
      margin: 0;
    }

.podcaster-info .info {
    color: #333333;
    line-height: 24px;
    padding: 12px 0 0 9px;
  }

.podcaster-info .info .name {
      font-size: 14px;
      margin: 0;
    }

.podcaster-info .info a {
      color: #4A90E2;
      word-wrap: break-word;
    }

.blank-root{
    width: 400px;
    margin: 80px auto;
}
    .blank-root >.title{
        text-align: center;
        font-size:18px;
        font-weight:400;
        color:rgba(150,150,150,1);
        line-height:25px;
        margin-top: 40px;
        margin-bottom: 30px;
    }
    .blank-root >.butBox{
        display: inline-block;
        margin: auto;
        overflow: hidden;
    }
    .blank-root >.butBox >a{
            display: block;
            float: left;
            padding: 0 22px;
            height:40px;
            border-radius:100px;
            line-height: 40px;
            cursor: pointer;
        }
    .blank-root >.butBox >.activeBut{
            background-color: #E13430;
            color: white;
            margin-left: 50px;
            margin-right: 19px;
        }
    .blank-root >.butBox >.defBut{
            border:1px solid #E13430;
            color: #E13430;
        }
/*
 * 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 */

.ting-root {
  background: #F5F5F8;
}

/*
 * 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 */

.podcaster-page-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

.podcaster-page-wrapper .ting-page-root {
    margin: 14px auto 20px;
    width: 1002px;
    background: white;

  }

.podcaster-page-wrapper .ting-page-root .ting-bread-crumb {
      margin: 5px 30px;
      padding: 5px 0px;
      width: 100%;
      border-bottom: 1px solid #EEEEEE;
    }

.podcaster-page-wrapper .ting-page-root .ting-header {
       padding: 10px 30px;
       width: 100%;
    }

.podcaster-page-wrapper .ting-page-root .ting-main {
      padding: 24px 30px 126px 30px;
      overflow: hidden;
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }

.podcaster-page-wrapper .ting-page-root .ting-main .left-body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        width: 682px;
      }

.podcaster-page-wrapper .ting-page-root .ting-main .left-body .header {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          position: relative;
        }

.podcaster-page-wrapper .ting-page-root .ting-main .left-body .header .more {
            position:absolute;
            right: 10px;
            cursor: pointer;
            font-size:15px;
            font-weight:400;
            color:#999999;
            height: 33px;
            line-height: 18px;
          }

.podcaster-page-wrapper .ting-page-root .ting-main .left-body .header .more a {
              color:#999999;
            }

.podcaster-page-wrapper .ting-page-root .ting-main .left-body .contentsContainer {
          width: 784px;
          padding-top: 23px;
          margin-bottom: 20px;
        }

.podcaster-page-wrapper .ting-page-root .ting-main .left-body .contentsContainer .void {
            text-align: center;
          }

.podcaster-page-wrapper .ting-page-root .ting-main .left-body .contentsContainer .void .voidIcon {
              width: 100px;
              height: 102px;
              background-size: contain;
              margin: 142px auto 0;
            }

.podcaster-page-wrapper .ting-page-root .ting-main .left-body .contentsContainer .voidDesc {
            margin-top: 20px;
            font-size: 14px;
            color: #999;
          }

.podcaster-page-wrapper .ting-page-root .ting-main .left-body .contentsContainer .content-item-root {
            width: 160px;
            margin: 0 15px 20px 0 !important;
          }

.podcaster-page-wrapper .ting-page-root .ting-main .left-body .contentsContainer .content-item-root .zhubo >span {
              max-width: 100px;
            }

.podcaster-page-wrapper .ting-page-root .ting-main .right-body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        width: 240px;
        margin-left: auto;
      }

.podcaster-page-wrapper .ting-page-root .ting-main .right-body .ting-podcastersList-root {
          width: 100%;
          margin-bottom: 20px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
        }

.podcaster-page-wrapper .ting-page-root .ting-main .right-body .ting-podcastersList-root .header {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            width: 100%;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            height: 33px;
          }

.podcaster-page-wrapper .ting-page-root .ting-main .right-body .ting-podcastersList-root .header >span {
              font-size:18px;
              font-weight:500;
              line-height:25px;
            }

.podcaster-page-wrapper .ting-page-root .ting-main .right-body .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;
            }

.podcaster-page-wrapper .ting-page-root .ting-main .right-body .keyword-hots {
          margin:20px 0px;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
        }

.podcaster-page-wrapper .ting-page-root .ting-main .right-body .keyword-hots .keyword-hot {
            padding: 5px;
          }

.podcaster-page-wrapper .ting-page-root .ting-main .right-body .keyword-hots .keyword-hot .hotWord {
              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
            }

.podcaster-page-wrapper .ting-page-root .ting-main .right-body .keyword-hots .keyword-hot .hotWord:hover {
  border: 1px solid #E13430;
  -webkit-transition: border .3s linear;
  transition: border .3s linear;
}

.podcaster-page-wrapper .ting-page-root .ting-main .right-body .keyword-hots .keyword-hot .hotWord:hover a {
                  -webkit-transition: color .3s linear;
                  transition: color .3s linear;
                  color: #E13430;
}

.podcaster-page-wrapper .ting-page-root .ting-main .right-body .more {
          margin-top: 0px;
          cursor: pointer;
          position: relative;
        }

.podcaster-page-wrapper .ting-page-root .ting-main .right-body .more a {
            font-size: 13px;
            line-height: 18px;
            color: #FD5353;
          }

/*
 * 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 */

.podcasters {
  width: 100%;
}

.podcasters .podcaster {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 18px;
  }

.podcasters .podcaster .avatar {
      border-radius: 100%;
      border: 2px solid #FFFFFF;
      height: 60px;
      width: 60px;
    }

.podcasters .podcaster .content {
      height: 70px;
      margin-left: 10px;
      padding: 10px 0px;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      border-bottom: 1px solid #EEEEEE;
    }

.podcasters .podcaster .content .name {
        font-weight: 400;
        margin-left: 8px;
        color: #333333;
        font-size: 14px;
        line-height: 20px;
      }

.podcasters .podcaster .content .line-desc {
        font-weight: 400;
        margin-left: 8px;
        color: #b6b3b3;
        font-size: 12px;
        line-height: 17px;
        width:87px;
      }



/*
 * 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 */

.headertitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 18px;
  border-left: 3px solid #E13430;
}

.headertitle >span {
    font-size:18px;
    font-weight:500;
    line-height:18px;
  }

.headertitle .title {
    color: #E13430;
    font-weight:500;
    padding-left: 5px;
    font-size:18px;
    line-height:18px;
    margin: 0;
  }




/*
 * 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 */

.PlayTable {
   margin-bottom: 30px;
}

.PlayTable .tableTitle {
    background: #F2F2F5;
    margin-top: 10px;
    width: 680px;
    padding: 10px 0;
  }

.PlayTable .tableTitle >span {
      display: inline-block;
      font-size: 16px;
      color: #606060;
    }

.PlayTable .tableTitle .col1 {
      padding-left: 30px;
      width: 310px;
    }

.PlayTable .tableTitle .col2 {
      width: 108px;
    }

.PlayTable .tableTitle .col3 {
      width: 108px;
    }

.PlayTable .tableTitle .col4 {
      width: 108px;
    }

.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 {
    font-size: 13px;
    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;
    cursor: pointer;
    color: #FD5353;
    margin-top: 5px;
  }
  .more-desc-general .show-more > img {
      display: inline-block;
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
      width: 4px;
      vertical-align: middle;
      margin-left: 5px;
    }
.ting-comments-root {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
  .ting-comments-root .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    -webkit-box-sizing: border-box;
            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: -webkit-box;
      display: -ms-flexbox;
      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 {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                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 {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                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 .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;
}

/*
 * 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 */

.comment-root {
  border-bottom: 1px dashed #DCDEE3;
  padding: 15px 0;
  overflow: hidden;
}

.comment-root img {
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }

.comment-root .wrapper {
    float: left;
    width: 620px;
  }

.comment-root .wrapper .comment-header {
      margin-bottom: 10px;
    }

.comment-root .wrapper p {
      margin: 5px 0 0px 0;
    }

.comment-root .wrapper .line-1 {
      margin: 5px 0 0px 0;
    }

.comment-root .wrapper .line-2 {
      color: #9B9B9B;
      font-size: 12px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

.comment-root .wrapper .line-2 .like-count {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end;
      }

.comment-root .wrapper .line-2 .like-count img {
          width: 1.2rem;
          height: 1.2rem;
          margin-right: 4px;
          position: relative;
        }

.comment-root .wrapper .line-2 .like-count > span {
          font-size: 13px;
          color: #666666;
          line-height: 18px;
        }

.comment-root .wrapper .date {
      color: #9B9B9B;
      font-size: 12px;
    }

.comment-root .author {
    color: #666666;
    margin-right: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

.comment-root .tag-top{
    display: inline-block;
    padding: 3px 4px;
    border-radius: 2px;
    border: 1px solid #FD5353;
    color: #FD5353;
    font-size: 12px;
    font-weight: bold;
  }

.comment-root .reply {
    position: relative;
    background: #F4F4F4;
    padding: 8px 10px;
    margin: 15px 0 5px 0;
    font-size: 0.7em;
    color: #606060;
    border-radius: 3px;
  }

.comment-root .reply .more {
      display: none;
  }

.comment-root .reply.clamp {
      padding: 8px 10px 25px 10px;
  }

.comment-root .reply.clamp .more {
      display: block;
      position: absolute;
      right: 13px;
      bottom: 5px;
      color: #4A90E2;
      font-size: .7em;
  }

.comment-root .reply:before {
    content: "";
    position: absolute;
    top: -10px;
    left: 12px;
    width: 0;
    height: 0;
    z-index: -1;
    border-top: 5px solid transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 5px solid #F4F4F4;
  }

.comment-root .replyContent {
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 10;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      font-size: 14px;
      line-height: 20px;
  }

/*
 * 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 */

.ting-com-root {
  padding-left: 20px;
  padding-right: 20px;
  background: #F5F5F8;

}

.ting-com-root .container {
    position: relative;
    margin: 15px auto 20px auto;
    width: 1004px;
    background-color: rgba(255,255,255, 1);
    -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
            box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
  }

.ting-com-root .container .ting-bread-crumb {
      padding: 5px 0px;
      border-bottom: 1px solid #EEEEEE;
      margin: 0px 40px;
    }

.ting-com-root .main {
    padding-left: 40px;
    padding-top: 20px;
    display: inline-block;
    left: 179px;
    top: 0px;
  }

.ting-com-root .main .collectionKeyword-list .collectionKeyword-item {
        font-size: 13px;
        line-height: 13px;
        color: #9B9B9B;
        display: inline-block;
        width: 225px;
        text-align: center;
        margin-top: 20px;
      }

.ting-com-root .main .collectionKeyword-list .collectionKeyword-item:hover {
        color: #E13430;
      }

.ting-com-root .main .collectionKeyword-paging {
      margin:40px;
    }

.ting-com-root .paging {
    overflow: hidden;
    margin-right: 29px;
  }
/*
 * 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 */

.gaoxiaosong-page-root {
  margin: 30px auto 20px;
  width: 1020px;
  background: white;
  padding: 30px;
  -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
          box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
}

.gaoxiaosong-page-root .download-btn {
    display: block;
    font-size: 12px;
    color: #FD5353;
    text-align: center;
    margin: 0 auto 40px;
    cursor: pointer;
  }

.gaoxiaosong-page-root .left-body {
    float: left;
    width: 700px;
    padding-right: 20px;
  }

.gaoxiaosong-page-root .left-body .g-album-list-root .header {
        padding-bottom: 10px;
        border-bottom: 1px solid #DCDEE3;
        width: 100%;
      }

.gaoxiaosong-page-root .left-body .g-album-list-root .title {
        border-left: 4px solid #E13430;
        padding-left: 5px;
        margin-right: 6px;
        font-size: 18px;
      }

.gaoxiaosong-page-root .left-body .g-album-list-root .g-album-list-ul {
        display: block;
        min-height: 400px;
        width: 680px;
      }

.gaoxiaosong-page-root .right-body {
    width: 260px;
    display: inline-block;
    vertical-align: top;
  }

.gaoxiaosong-page-root .right-body .rightQR {
      width: 270px;
      height: 278px;
      margin-bottom: 20px;
      -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
              box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-flow: column;
              flex-flow: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
    }

.gaoxiaosong-page-root .right-body .rightQR .title {
        color: #4A4A4A;
        font-size: 18px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 0px;
      }

.gaoxiaosong-page-root .right-body .rightQR .qr {
        background: url('https://pay.qtfm.cn/qr/http%3A%2F%2Fsss.qtfm.cn%2F');
        background-size: cover;
        background-repeat: no-repeat;
        width: 80%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 200px;
      }

@media (-webkit-min-device-pixel-ratio: 1.5),
        (min-resolution: 1.5dppx) {

  .gaoxiaosong-page-root .right-body .rightQR .qr {
    background: url('https://pay.qtfm.cn/qr/http%3A%2F%2Fsss.qtfm.cn%2F');
    background-size: cover;
    background-repeat: no-repeat;
  }
}

.gaoxiaosong-page-root .right-body .rightQR .bottom {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
        overflow-x: hidden;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        height: 50px;
        width: 100%;
        padding-left: 25px;
        padding-right: 25px;
}

.gaoxiaosong-page-root .right-body .rightQR .bottom .btn {
          -webkit-box-flex: 1;
          -ms-flex: 1;
          flex: 1;
          height: 70%;
          background: #FD5353;
          border-radius: 5px;
          font-size: 13px;
          color: #FFFFFF;
          text-align: right;
          padding-right: 20px;
          line-height: 34px;
          position: relative;
          cursor: pointer
        }

.gaoxiaosong-page-root .right-body .rightQR .bottom .btn + .btn {
  margin-left: 15px;
}

.gaoxiaosong-page-root .right-body .rightQR .bottom .btn .iosIcon {
            background: url('//sss.qtfm.cn/neo/iPhone@2x.png');
            background-size: cover;
            background-repeat: no-repeat;
            width: 16px;
            height: 16px;
            position: absolute;
            width: 16px;
            height: 16px;
            left: 8px;
            top: 8px;
}

@media (-webkit-min-device-pixel-ratio: 1.5),
            (min-resolution: 1.5dppx) {

  .gaoxiaosong-page-root .right-body .rightQR .bottom .btn .iosIcon {
    background: url('//sss.qtfm.cn/neo/iPhone@3x.png');
    background-size: cover;
    background-repeat: no-repeat;
  }
}

.gaoxiaosong-page-root .right-body .rightQR .bottom .btn .androidIcon {
            background: url('//sss.qtfm.cn/neo/android@2x.png');
            background-size: cover;
            background-repeat: no-repeat;
            width: 16px;
            height: 16px;
            position: absolute;
            width: 16px;
            height: 16px;
            left: 8px;
            top: 8px;
}

@media (-webkit-min-device-pixel-ratio: 1.5),
            (min-resolution: 1.5dppx) {

  .gaoxiaosong-page-root .right-body .rightQR .bottom .btn .androidIcon {
    background: url('//sss.qtfm.cn/neo/android@2x.png');
    background-size: cover;
    background-repeat: no-repeat;
  }
}

.gaoxiaosong-page-root .right-body .rightAD {
      width: 270px;
      height: 245px;
      margin-top: 20px;
      padding: 2.5px;
      text-align: center;
      background-color: #F5F5F8;
}
/*
 * 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 */

.gao-left-info-root {
  margin-bottom: 40px;
}

.gao-left-info-root .top-desc h1 {
      font-size: 22px;
      color: #333333;
      margin: 0;
      padding: 0;
    }

.gao-left-info-root .top-desc span {
      font-size: 13px;
      color: #666666;
      letter-spacing: 0;
      text-align: justify;
      line-height: 24px;
    }

.gao-left-info-root .top {
    overflow: hidden;
    position: relative;
  }

.gao-left-info-root .top .top-brief {
      display: block;
      margin: 40px 0 20px;
      padding-left: 10px;
      font-size: 18px;
      color: #333333;
      border-left: 3px solid #FD5353;
    }

.gao-left-info-root .left {
    float: left;
    width: 92px;
  }

.gao-left-info-root .right {
    float: left;
    width: 74%;
  }

.gao-left-info-root .albumImg {
    margin-right: 12px;
  }

.gao-left-info-root .albumImg img {
      width: 80px;
      height: 80px;
      border-radius: 100%;
    }

.gao-left-info-root .info {
    padding-left: 20px;
  }

.gao-left-info-root .info > div {
      margin-bottom: 10px;
    }

.gao-left-info-root .info span {
      font-size: 14px;
      line-height: 14px;
    }

.gao-left-info-root .info .play {
      margin-bottom: 20px;
    }

.gao-left-info-root .info .titleTag {
      display: inline-block;
      padding: 3px 8px;
      background: #6CC149;
      border-radius: 5px;
      color: white;
    }

.gao-left-info-root .info .title {
      display: inline-block;
      font-weight: bold;
      max-width: 400px;
      font-size: 16px;
      color: #333333;
      letter-spacing: 0;
    }

.gao-left-info-root .info .brief-desc {
      font-size: 13px;
      color: #666666;
      text-align: justify;
    }

.gao-left-info-root .info .podcaster >span {
        display: inline-block;
        vertical-align: middle;
      }

.gao-left-info-root .info .playcount {
      margin-right: 20px;
    }

.gao-left-info-root .propTxt {
    color: #9B9B9B;
    font-size: 14px;
  }

.gao-left-info-root .zhubo_avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
  }

.gao-left-info-root .desc {
    font-size: 13px;
    color: #666666;
    letter-spacing: 0;
    text-align: justify;
    line-height: 24px;
    cursor: pointer;
    margin-top: 12px;
  }

.gao-left-info-root .desc-shrink {
    height: 72px;
    position: relative;
    overflow: hidden;
  }

.gao-left-info-root .desc-shrink::after {
    content: '展开全文';
    position: absolute;
    display: block;
    right: 0px;
    bottom: 0px;
    font-size: 13px;
    color: #FD5353;
    text-align: justify;
    background: white;
    padding-left: 8px;
  }

.gao-left-info-root .audienceCount {
    margin-left: 10px;
  }

.gao-left-info-root .star {
    position: absolute;
    top: 10px;
    right: 15px;
  }

.gao-left-info-root .info .radioPlay {
    margin-top: 20px;
    margin-bottom: 20px;
  }

.gao-left-info-root .radio {
    margin-top: 20px;
  }

.gao-left-info-root .noPodcaster {
    margin-top: 15px;
  }

.gao-left-info-root .noPodcasterAction {
    margin-top: 30px;
  }

/*
 * 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 */

.g-album-programs-root {
  display: block;
  margin-bottom: 20px;
}

.g-album-programs-root .header {
    padding-bottom: 10px;
    border-bottom: 1px solid #DCDEE3;
    width: 100%;
  }

.g-album-programs-root .title {
    border-left: 4px solid #E13430;
    padding-left: 5px;
    margin-right: 6px;
    font-size: 18px;
  }

.g-album-programs-root .total {
    font-size: 12px;
  }

.g-album-programs-root .programList {
    display: block;
    width: 100%;
  }

.g-album-programs-root .programList::-webkit-scrollbar {
    width: 5px;
  }

/* Track */

.g-album-programs-root .programList::-webkit-scrollbar-track {
    background: #F5F5F8;
    border-radius: 10px;
  }

/* Handle */

.g-album-programs-root .programList::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0,0,0,0.2);
  }

.g-album-programs-root .programList::-webkit-scrollbar-thumb:window-inactive {
      background: rgba(0,0,0,0.1);
  }

.g-album-programs-root .tableTitle {
    background: #F2F2F5;
    margin-top: 10px;
    width: 100%;
    padding: 10px 0;
  }

.g-album-programs-root .tableTitle >span {
      display: inline-block;
      font-size: 16px;
      color: #606060;
    }

.g-album-programs-root .tableTitle .col1 {
      padding-left: 30px;
      width: 310px;
    }

.g-album-programs-root .tableTitle .col2 {
      width: 108px;
    }

.g-album-programs-root .tableTitle .col3 {
      width: 108px;
    }

.g-album-programs-root .tableTitle .col4 {
      width: 108px;
    }

.g-album-programs-root .paging {
    margin-top: 20px;
    margin-right: 10px;
  }

/*
 * 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 */

.program-row-root {
  cursor: pointer;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px 0;
  border-bottom: 1px dashed #DCDEE3;
  overflow: hidden;
}

.program-row-root //BFC

  .action {
    display: none;
  }

.program-row-root:hover p {
      color: #E13430;
}

.program-row-root:hover p:hover {
  text-decoration: underline;
}

.program-row-root:hover .action {
      display: block;
}

.program-row-root:hover .action > div {
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-right: 3px;
  color: #9B9B9B;
}

.program-row-root:hover .playCount {
      display: none;
}

.program-row-root .playCount {
    font-size: 12px;
    color: #9B9B9B;
}

.program-row-root p {
    float: left;
    font-size: 14px;
    width: 270px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.program-row-root > span {
  display: inline-block;
  font-size: 14px;
  color: #606060;
  vertical-align: bottom;
}

.program-row-root .tool {
    display: none;
}

.program-row-root .col1 {
    width: 340px;
    height: 20px;
}

.program-row-root .col1 .pTitle {
      width: 270px;
      vertical-align: top;
    }

.program-row-root .col1 .pTitle .chargeP {
        float: left;
        font-size: 14px;
        width: auto;
        width: initial;
        max-width: 228px;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

.program-row-root .col1 .pTitle .chargeFlag {
        display: inline-block;
        margin-left: 5px;
        border-radius: 3px;
        font-size: 11px;
        color: #fd5353;
        border: 1px solid rgba(225, 52, 48, 0.5);
        padding: 1px 2px;
        line-height: 11px;
      }

.program-row-root .col1 .pTitle .paid {
        color: #333;
        border: 1px solid #ccc;
      }

.program-row-root .col1 > div {
      display: inline-block;
    }

.program-row-root .col1 a, .program-row-root .col1 button {
      display: inline-block;
    }

.program-row-root .col1 button {
      width: 20px;
      height: 20px;
      padding: 0;
      margin-right: 10px;
      display: block;
    }

.program-row-root .col1 .sprite-list-play-hover {
      display: none;
    }

.program-row-root .col1 .sprite-list-play {
      display: block;
    }

.program-row-root .col1 .playing .sprite-list-play-hover {
        display: block;
      }

.program-row-root .col1 .playing .sprite-list-play {
        display: none;
      }

.program-row-root .col2, .program-row-root .col3, .program-row-root .col4 {
    width: 108px;
    color: #9B9B9B;
}

.program-row-root:hover .tool.col2 {
      display: inline-block;
}

.program-row-root:hover .col2 {
      display: none;
}

.program-row-root:hover .sprite-list-play {
      display: none;
}

.program-row-root:hover .sprite-list-play-hover {
      display: block;
}

.program-row-root .sprite-list-download-hover {
    display: none;
}

.program-row-root .sprite-list-share-hover {
    display: none;
}

.program-row-root .shareBtn:hover .sprite-list-share-hover {
      display: inline-block;
    }

.program-row-root .shareBtn:hover .sprite-list-share {
      display: none;
    }

.program-row-root .downloadBtn:hover .sprite-list-download-hover {
      display: inline-block;
    }

.program-row-root .downloadBtn:hover .sprite-list-download {
      display: none;
    }

.sprite-list-play-hover, .sprite-list-pause {
  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 */

.g-content-item-root {
  width: 160px;
  display: inline-block;  
  overflow: hidden;
  vertical-align: top;
  margin: 0 10px 30px 0;
  position: relative;
}

.g-content-item-root img {
    margin: 0;
    width: 160px;
    height: 160px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

.g-content-item-root .imgOverlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 32px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(60,60,60,0.00)), to(#3D3D3D));
    background-image: linear-gradient(-180deg, rgba(60,60,60,0.00) 0%, #3D3D3D 100%);
  }

.g-content-item-root:hover img {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}

.g-content-item-root .channel-type {
    color: #FF9800;
    border: 1px solid #FF9800;
}

.g-content-item-root .program-type {
    color: #4A90E2;
    border: 1px solid #4A90E2;
}

.g-content-item-root .radio-type {
    color: #E13430;
    border: 1px solid #E13430;
    font-size: 10px;
    margin-right: 6px;
    padding: 3px;
    border-radius: 4px;
}

.g-content-item-root .star {
    position: absolute;
    top: 135px;
    left: 7px;
}

.g-content-item-root .duration {
    position: absolute;
    top: 135px;
    left: 7px;
    font-size: 12px;
    color: rgba(255,255,255, 1);
}

.g-content-item-root .itemTitle {
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 8px;
}

.g-content-item-root .itemTitle span {
      display: inline-block;
      vertical-align: middle;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

.g-content-item-root .itemTitle span:first-of-type {
      font-size: 10px;
      margin-right: 6px;
      padding: 3px;
      border-radius: 4px;
    }

.g-content-item-root .itemTitle span:last-of-type {
      max-width: 115px;
    }

.g-content-item-root .itemTitle:hover {
  color: #E13430;
  text-decoration: underline;
}

.g-content-item-root .itemTitleRadio {
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.g-content-item-root .itemTitleRadio span {
      display: inline-block;
      vertical-align: middle;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

.g-content-item-root .itemTitleRadio span:last-of-type {
      max-width: 115px;
    }

.g-content-item-root .itemTitleRadio:hover {
  color: #E13430;
  text-decoration: underline;
}

.g-content-item-root .descRadio {
    font-size: 12px;
    color: #606060;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 12px;
    white-space: nowrap;
    margin-bottom: 8px;
}

.g-content-item-root .SearchDescRadio {
    display: -webkit-box;
    color: #606060;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 8px;
    font-size: 12px;
}

.g-content-item-root .desc {
    display: -webkit-box;
    font-size: 12px;
    color: #606060;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}

.g-content-item-root .info {
    font-size: 12px;
    color: #999999;
}

.g-content-item-root .info .playCount {
      float: left;
    }

.g-content-item-root .info .playCount span {
        display: inline-block;
        vertical-align: middle;
      }

.g-content-item-root .info .broadcaster{
      float:right;
    }

.g-content-item-root .info .zhubo {
      float: right;
    }

.g-content-item-root .info .zhubo span:last-of-type {
        display: inline-block;
        white-space: nowrap;
        max-width: 65px;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
      }

.g-content-item-root .info .search-zhubo {
      float: right;
    }

.g-content-item-root .info .search-zhubo span:last-of-type {
        display: inline-block;
        white-space: nowrap;
        max-width: 91px;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
      }

.g-content-item-root .info span:first-of-type {
      display: inline-block;
      vertical-align: middle;
      margin-right: 2px;
      max-width: 60px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

.g-content-item-root .coverImg {
    display: block;
    position: relative;
    width: 160px;
    height: 160px;
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.1);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.c-itemS {
  width: 140px;
  margin: 0 37px 30px 0;
}

.c-itemS img {
    width: 140px;
    height: 140px;
  }

.c-itemS .coverImg {
    display: block;
    position: relative;
    width: 140px;
    height: 140px;
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.1);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

.c-itemS:nth-child(4n) {
  margin-right: 0;
}

.c-itemR {
  width: 140px;
  margin: 0 37px 30px 0;
}

.c-itemR img {
    width: 140px;
    height: 140px;
  }

.c-itemR .coverImg {
    display: block;
    position: relative;
    width: 140px;
    height: 140px;
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.1);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

.c-itemR:nth-child(4n) {
  margin-right: 0;
}

.searching {
  margin: 0 32px 30px 0;
}
/*
 * 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 */

.footer-root {
  outline: none;
  background: rgba(255,255,255, 1);
  color: #606060;
  -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
          box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
}

.footer-root .container {
    margin: 0 auto;
    margin-bottom: 50px;
    padding: 20px 15px;
    max-width: 1000px;
    text-align: center;
  }

.footer-root .spacer {
    color: rgba(255, 255, 255, 0.3);
  }

.footer-root .text,
  .footer-root .link {
    padding: 2px 5px;
    font-size: 1em;
  }

.footer-root .link,
  .footer-root .link:active,
  .footer-root .link:visited {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
  }

.footer-root .link:hover {
    color: rgba(255, 255, 255, 1);
  }

.footer-root .row {
    display: inline-block;
    width: 100%;
  }

.footer-root .seo {
    margin-bottom: 20px;
    padding: 0 0 20px;
    width: 100%;
    min-width: 907px;
    text-align: left;
    overflow: hidden;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border-bottom: 1px solid #EEEEEE
  }

.footer-root .seo > a {
  display: block;
  margin: 20px 0 10px;
}

.footer-root .seo > a:hover {
  color: #E13430;
}

.footer-root .seo .seo-desc {
      padding: 0;
      margin: 0 0 20px 0;
      font-size: 12px;
      line-height: 1.5;
      color: #9B9B9B;
}

.footer-root .seo .seo-desc .seo-p-btn {
        color: #E13430;
      }

.footer-root .seo .seo-desc .seo-p-btn .seo-p-arrow {
          display: inline-block;
          font-size: 12px;
          width: 12px;
          height: 6px;
          overflow: hidden;
        }

.footer-root .seo .entry-list .entry-item {
        margin-right: 5px;
        font-size: 12px;
        line-height: 1.5;
        color: #9B9B9B;
        display: inline-block;

      }

.footer-root .seo .entry-list .entry-item:hover {
        color: #E13430;
      }

.footer-root .seo-close-sec {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    height: 110px;
  }

.footer-root .seo-close-sec .seo-p-btn .seo-p-arrow {
        line-height: 1px;
      }

.footer-root .seo-close-sec .seo-p-btn::before {
      content: '展开'
    }

.footer-root .seo-open-sec {
    height: inherit;
  }

.footer-root .seo-open-sec .seo-p-btn .seo-p-arrow {
        line-height: 11px;
      }

.footer-root .seo-open-sec .seo-p-btn::before {
      content: '收起'
    }

.footer-root .info {
    float: left;
    text-align: left;
  }

.footer-root .infoBottom {
    float: left;
    clear: both;
    text-align: center;
    margin-top: 40px;
    width: 100%;
  }

.footer-root .sites {
    margin-bottom: 20px;
  }

.footer-root .sites span {
      display: inline-block;
      padding: 0 10px;
      margin: 10px 0;
      border-right: 1px solid #DCDEE3
    }

.footer-root .sites span:last-of-type {
  border-right: none;
}

.footer-root .sites span:first-of-type {
  padding-left: 0;
}

.footer-root .sites span:hover a {
          color: #E13430;
}

.footer-root .rights, .footer-root .jubao, .footer-root .infoBottom, .footer-root .chengnuoshu, .footer-root .banfa {
    font-size: 12px;
    color: #9B9B9B;
  }

.footer-root .beian {
    font-size: 12px;
    color: #9B9B9B;
    max-width: 620px;
  }

.footer-root .beian .link {
      color:#9B9B9B
    }

.footer-root .banfa {
    padding-left: 142px;
  }

.footer-root .chengnuoshu:hover, .footer-root .banfa:hover {
    color: #E13430;
  }

.footer-root .jubaoContainer {
    width: 600px;
  }

.footer-root .jubaoContainer .jubao {
      width: 300px;
      display: inline-block;
    }

.footer-root .jubaoContainer .jubao .icon {
        display: inline-block;
        vertical-align: middle;
        width: 40px;
        height: 40px;
      }

.footer-root .jubaoContainer .jubao .icon1 {
        width: 38px;
        background: url('//sss.qtfm.cn/neo/jubao-icon.png') no-repeat;
        background-size: cover;
      }

.footer-root .jubaoContainer .jubao .icon2 {
        background: url('//sss.qtfm.cn/qingting_jubao2.png') no-repeat;
        background-size: cover;
      }

.footer-root .jubaoContainer .jubao .icon3 {
        background: url('//sss.qtfm.cn/www/icon/icon_email_c8834ec.png') no-repeat;
        background-size: cover;
      }

.footer-root .jubaoContainer .jubao-pure-text {
      margin-top: 20px;
      width: 100%;
      display: block;
    }

.footer-root .jubaoContainer .jubao-pure-text a {
        color: #9B9B9B;
      }

.footer-root .clients {
    float: right;
  }

.footer-root .client {
    display: inline-block;
    position: relative;
    text-align: center;
    margin-left: 35px;
    cursor: pointer;
  }

.footer-root .client .desc {
      font-size: 12px;
      margin-top: 10px;
    }

.footer-root .client >div {
      margin: auto;
    }

.footer-root .client .sprite-appdownload-hover, .footer-root .client .sprite-wechat-hover, .footer-root .client .sprite-sina-hover {
      display: none;
    }

.footer-root .client .sprite-appdownload, .footer-root .client .sprite-wechat, .footer-root .client .sprite-sina {
      display: block;
    }

.footer-root .client:hover .sprite-appdownload-hover, .footer-root .client:hover .sprite-wechat-hover, .footer-root .client:hover .sprite-sina-hover {
        display: block;
}

.footer-root .client:hover .sprite-appdownload, .footer-root .client:hover .sprite-wechat, .footer-root .client:hover .sprite-sina {
        display: none;
}

.footer-root .client:hover .hover {
        display: block;
}

.footer-root .hover {
    display: none;
    position: absolute;
    bottom: 90px;
    left: -36px;
    padding: 14px;
    z-index: 11;
    background: rgba(255,255,255, 1);
    border: 1px solid #E3E3E3
  }

.footer-root .hover:before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 60px;
  border-top: 5px solid rgba(255,255,255, 1);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  z-index: 1;
}

.footer-root .hover:after {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 60px;
  border-top: 5px solid #E3E3E3;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.footer-root .hover img {
      width: 100px;
      height: 100px;
}

.footer-root .footer_link {
    color:#9B9B9B
  }


.audio-player {
    position: fixed;
    left: 0;
    bottom: 0;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.84);
    line-height: 0;
    text-align: center;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    scrollbar-base-color: rgba(0, 0, 0, 0.9);
    scrollbar-track-color: rgba(0, 0, 0, 0.9);
    scrollbar-arrow-color: #606060;
    scrollbar-face-color: #606060;
  }
    .audio-player ::-webkit-scrollbar {
      width: 6px;
      background-color: transparent;
    }
    .audio-player ::-webkit-scrollbar-thumb {
      background-color: #606060;
      border-radius: 3px;
    }
    .audio-player ::-webkit-scrollbar-track {
      background-color: transparent;
    }
    .audio-player audio {
      display: none;
    }
    .audio-player video {
      display: none;
    }
.audio-player.hiding {
    -webkit-transition: 1s;
    transition: 1s;
    bottom: -70px;
}
.audio-player .playlist-wrapper, .audio-player .history-wrapper {
      position: fixed;
      display: none;
      bottom: 70px;
      width: 100%;
      left: auto;
      right: auto;
}
.audio-player .locker {
      position: absolute;
      right: 10px;
      top: -15px;
      width: 50px;
      height: 15px;
      background: center no-repeat;
      background-size: cover;
      background-image: url(//sss.qtfm.cn/www/images/locker-bg@2x.png);
      cursor: pointer;
}
.audio-player .locker .locker-btn {
        width: 50px;
        height: 18px;
        background: center no-repeat;
        background-size: 12px 12px;
        background-image: url(//sss.qtfm.cn/www/images/locker-unlocked@2x.png)
      }
.audio-player .locker .locker-btn:hover {
    background-image: url(//sss.qtfm.cn/www/images/locker-unlocked-hover@2x.png);
}
.audio-player .locker .locker-btn.locked {
    background-image: url(//sss.qtfm.cn/www/images/locker-locked@2x.png);
}
.audio-player .locker .locker-btn.locked:hover {
    background-image: url(//sss.qtfm.cn/www/images/locker-locked-hover@2x.png);
}
.audio-player .hand {
      position: absolute;
      width: 100%;
      height: 20px;
      top: -20px;
}
.audio-player .player-wrapper {
      display: inline-block;
      width: 980px;
      height: 70px;
      left: auto;
      right: auto;
}
.audio-player .player-wrapper .icon {
        background: center no-repeat;
        background-size: cover
      }
.audio-player .player-wrapper .icon:hover {
    cursor: pointer;
}
.audio-player .player-wrapper .btns .prev {
          width: 15px;
          height: 18px;
          margin: calc((70px - 18px)/2) 25px calc((70px - 18px)/2) 0;
          background-image: url(//sss.qtfm.cn/www/images/prev@2x.png)
        }
.audio-player .player-wrapper .btns .prev:hover {
    background-image: url(//sss.qtfm.cn/www/images/prev-hover@2x.png);
}
.audio-player .player-wrapper .btns .play-pause {
          width: 50px;
          height: 50px;
          margin: calc((70px - 50px) / 2) 0
        }
.audio-player .player-wrapper .btns .play-pause.playing {
    background-image: url(//sss.qtfm.cn/www/images/pause@2x.png);
}
.audio-player .player-wrapper .btns .play-pause.playing:hover {
    background-image: url(//sss.qtfm.cn/www/images/pause-hover@2x.png);
}
.audio-player .player-wrapper .btns .play-pause.paused {
    background-image: url(//sss.qtfm.cn/www/images/play@2x.png);
}
.audio-player .player-wrapper .btns .play-pause.paused:hover {
    background-image: url(//sss.qtfm.cn/www/images/play-hover@2x.png);
}
.audio-player .player-wrapper .btns .next {
          width: 15px;
          height: 18px;
          margin: calc((70px - 18px) / 2) 0 calc((70px - 18px) / 2) 25px;
          background-image: url(//sss.qtfm.cn/www/images/next@2x.png)
        }
.audio-player .player-wrapper .btns .next:hover {
    background-image: url(//sss.qtfm.cn/www/images/next-hover@2x.png);
}
.audio-player .player-wrapper .cover {
        width: 54px;
        height: 54px;
        padding: calc((70px - 54px) / 2);
        margin-left: 25px;
      }
.audio-player .player-wrapper .detail {
        width: 420px;
        position: relative;
        top: -20px;
        text-align: left;
      }
.audio-player .player-wrapper .detail .program-title,
        .audio-player .player-wrapper .detail .podcaster,
        .audio-player .player-wrapper .detail .channel-title {
          line-height: 1.3;
          display: inline-block;
          color: white;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
.audio-player .player-wrapper .detail .program-meta:hover,
        .audio-player .player-wrapper .detail .channel-meta:hover {
          cursor: pointer;
        }
.audio-player .player-wrapper .detail .program-title {
          font-size: 14px;
          max-width: 300px;
        }
.audio-player .player-wrapper .detail .podcaster {
          margin-left: 10px;
          font-size: 12px;
          max-width: 100px;
        }
.audio-player .player-wrapper .detail .channel-title {
          margin-top: 6px;
          max-width: 300px;
          color: #FF7C36;
          font-size: 12px;
        }
.audio-player .player-wrapper .detail .progress .time {
            font-size: 12px;
            line-height: 1.1;
            color: rgba(255, 255, 255, 0.3);
            text-align: right;
            margin: -6px 0 -4px 0;
          }
.audio-player .player-wrapper .detail .progress .time .time-elapsed {
              color: #E13430;
            }
.audio-player .player-wrapper .detail .progress .progress-bar {
            padding: 7px 0;
            height: 8px
          }
.audio-player .player-wrapper .detail .progress .progress-bar:hover {
    cursor: pointer;
}
.audio-player .player-wrapper .detail .progress .progress-bar .progress-bar-total {
              position: absolute;
              width: 100%;
              height: 4px;
              background-color: rgba(255, 255, 255, 0.3);
              border-radius: 2px;
}
.audio-player .player-wrapper .detail .progress .progress-bar .progress-bar-elapsed {
              position: absolute;
              border-radius: 2px;
              background-color: #E13430;
              height: 4px;
}
.audio-player .player-wrapper .detail .progress .progress-bar .progress-bar-elapsed .progress-bar-handle {
                position: absolute;
                width: 10px;
                height: 10px;
                border-radius: 5px;
                background-color: white;
                top: -3px;
                right: -5px;
              }
.audio-player .player-wrapper .play-rate-view {
        display: inherit;
        height: 70px;
        width: 33px;
        margin: 0px 15px;
        position: relative;
      }
.audio-player .player-wrapper .play-rate-view .rate-select {
          position: absolute;
          bottom: 80px;
          left: -4px;
          text-align: center;
          color: #9B9B9B;
          line-height: 22px;
          padding: 5px 10px;
          background-color: rgba(0, 0, 0, 0.90);
        }
.audio-player .player-wrapper .play-rate-view .rate-option {
          cursor: pointer;
        }
.audio-player .player-wrapper .play-rate-view .rate-option:hover{
          color:#E13430
        }
.audio-player .player-wrapper .play-rate-view .play-rate-title{ 
          cursor: pointer;
          position: absolute;
          left: 0px;
          white-space: nowrap;
          line-height: 20px;
          color: #9B9B9B;
          max-width: 33px;
          font-size: 15px;
          margin: calc((70px - 20px)/2) 0 calc((70px - 20px)/2) 0;
        }
.audio-player .player-wrapper .action-buttons .share-btn,
        .audio-player .player-wrapper .action-buttons .download-btn {
          cursor: pointer;
          width: 22px;
          height: 22px;
          margin: calc((70px - 22px) / 2) 3px;
          background: center no-repeat;
          background-size: cover;
          display: inline-block;
        }
.audio-player .player-wrapper .action-buttons .share-btn {
          background-image: url(//sss.qtfm.cn/www/images/share@2x.png)
        }
.audio-player .player-wrapper .action-buttons .share-btn:hover {
    background-image: url(//sss.qtfm.cn/www/images/share-hover@2x.png);
}
.audio-player .player-wrapper .action-buttons .download-btn {
          background-image: url(//sss.qtfm.cn/www/images/download@2x.png)
        }
.audio-player .player-wrapper .action-buttons .download-btn:hover {
    background-image: url(//sss.qtfm.cn/www/images/download-hover@2x.png);
}
.audio-player .player-wrapper .history-icon,
      .audio-player .player-wrapper .playlist-icon {
        width: 22px;
        height: 22px;
        margin: calc((70px - 22px) / 2) 0;
      }
.audio-player .player-wrapper .volume {
        margin-left: 30px;
      }
.audio-player .player-wrapper .volume .volume-icon {
          display: inherit;
          width: 22px;
          height: 22px;
          margin: calc((70px - 22px) / 2) 0;
          background-image: url(//sss.qtfm.cn/www/images/volume@2x.png)
        }
.audio-player .player-wrapper .volume .volume-icon:hover {
    background-image: url(//sss.qtfm.cn/www/images/volume-hover@2x.png);
}
.audio-player .player-wrapper .volume .volume-icon.muted {
    background-image: url(//sss.qtfm.cn/www/images/volume-mute@2x.png);
}
.audio-player .player-wrapper .volume .volume-bar {
          padding: 6px 0;
          display: inherit;
          margin-bottom: calc(70px / 2 - 6px + 1px);
          position: relative;
          width: 90px
        }
.audio-player .player-wrapper .volume .volume-bar:hover {
    cursor: pointer;
}
.audio-player .player-wrapper .volume .volume-bar .volume-bar-full {
            position: absolute;
            width: 100%;
            height: 3px;
            border-radius: 2px;
            background-color: #9B9B9B;
}
.audio-player .player-wrapper .volume .volume-bar .volume-bar-current {
            position: absolute;
            height: 3px;
            border-radius: 2px;
            background-color: white;
}
.audio-player .player-wrapper .volume .volume-bar .volume-bar-current .volume-bar-handle {
              position: absolute;
              width: 7px;
              height: 7px;
              border-radius: 4px;
              background-color: white;
              bottom: 0px;
              top: -2px;
              right: -3px;
            }
.audio-player .player-wrapper .history-icon {
        margin-left: 12px;
        background-image: url(//sss.qtfm.cn/www/images/history@2x.png)
      }
.audio-player .player-wrapper .history-icon.active, .audio-player .player-wrapper .history-icon:hover {
    background-image: url(//sss.qtfm.cn/www/images/history-hover@2x.png);
}
.audio-player .player-wrapper .playlist-icon {
        margin-left: 12px;
        background-image: url(//sss.qtfm.cn/www/images/playlist@2x.png)
      }
.audio-player .player-wrapper .playlist-icon.active, .audio-player .player-wrapper .playlist-icon:hover {
    background-image: url(//sss.qtfm.cn/www/images/playlist-hover@2x.png);
}
.audio-player .player-wrapper .btns,
      .audio-player .player-wrapper .icon,
      .audio-player .player-wrapper .detail,
      .audio-player .player-wrapper .volume {
        display: inherit;
      }
.audio-player .active {
      display: block;
}
  
.playlist-collection{
    display: inline-block;
    width: 649px;
    margin-left: 261px;
    left: auto;
    right: auto;
    line-height: 1.2;
    position: relative;
  }
    .playlist-collection .header {
      background-color: rgb(0, 0, 0);
      text-align: left;
      font-size: 18px;
      padding: 14px 30px;
      border-bottom: 1px solid #3D3D3D;
    }
    .playlist-collection .header .header-text-wrapper {
        display: inline-block;
        text-align: center
      }
    .playlist-collection .header .header-text-wrapper.header-text-wrapper-channel_ondemand .header-text {
            padding-bottom: 12px;
            color: white;
            border-bottom: 3px solid #E13430;
}
    .playlist-collection .header .header-text-wrapper.header-text-wrapper-channel_live:hover {
    cursor: pointer;
}
    .playlist-collection .header .header-text-wrapper.header-text-wrapper-channel_live {
    width: 190px;
    color: #9B9B9B;
}
    .playlist-collection .header .header-text-wrapper.header-text-wrapper-channel_live:hover {
    color: white;
}
    .playlist-collection .header .header-text-wrapper.header-text-wrapper-channel_live.active {
    color: white;
}
    .playlist-collection .header .header-text-wrapper.header-text-wrapper-channel_live.active .header-text {
              border-bottom: 3px solid #E13430;
}
    .playlist-collection .header .header-text-wrapper.header-text-wrapper-channel_live .header-text {
            padding: 0 17px 12px;
}
    .playlist-collection .content {
      background-color: rgba(0, 0, 0, 0.90);
    }
    .playlist-collection .content .playlist {
        height: 360px;
        overflow-x: hidden;
        overflow-y: scroll;
        margin-right: 5px;
      }
    .playlist-collection .hidden {
      display: none;
    }
    .playlist-collection .shrink-btn {
      width: 12px;
      height: 8px;
      background: center no-repeat;
      background-size: 12px 8px;
      background-image: url(//sss.qtfm.cn/www/images/shrink-down-arrow@2x.png);
      position: absolute;
      top: 3px;
      right: 2px;
      padding: 7px 9px
    }
    .playlist-collection .shrink-btn:hover {
    cursor: pointer;
}
  
.playlist-item {
    color: #9B9B9B;
    font-size: 14px;
    padding: 8px 0;
    text-align: left;
    line-height: 1.3
  }

.playlist-item.future {
    color: #555555;
}

.playlist-item:first-child {
    margin-top: 9px;
}

.playlist-item:last-child {
    margin-bottom: 9px;
}

.playlist-item:hover {
    cursor: pointer;
}

.playlist-item .playing-flag,
    .playlist-item .program-name-wrapper,
    .playlist-item .channel-name-wrapper,
    .playlist-item .duration {
      height: 20px;
      display: inline-block;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      vertical-align: middle;
}

.playlist-item .common-playing-flag {
      width: 16px;
      height: 16px;
      margin-left: 12px;
      margin-right: 3px;
      background: center no-repeat;
      background-image: url(//sss.qtfm.cn/www/images/playing-flag@2x.png);
      background-size: cover;
      visibility: hidden;
}

.playlist-item.active .playing-flag {
    visibility: visible;
}

.playlist-item .program-name-wrapper {
      width: 267px;
      margin-right: 60px;
}

.playlist-item .program-name-wrapper .program-name {
        vertical-align: middle;
      }

.playlist-item .program-name-wrapper .playing-text {
        display: none;
        vertical-align: middle;
        background-color: #6CC149;
        color: white;
        font-size: 12px;
        padding: 1px 3px;
        border-radius: 3px;
      }

.playlist-item.on-air .program-name-wrapper .program-name {
          max-width: 260px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
        }

.playlist-item.on-air .program-name-wrapper .playing-text {
          margin-left: 2px;
          display: inline-block;
        }

.playlist-item .channel-name-wrapper {
      width: 100px;
      margin-right: 72px;
}

.playlist-item:hover {
    background-color: #303030;
    color: white;
}

.playlist-item:hover .channel-name, .playlist-item:hover .program-name {
        text-decoration: underline;
}

.playlist-item:hover .duration {
        display: none;
}

.playlist-item:hover .action-buttons {
        display: inline-block;
}

.playlist-item:hover.future .channel-name, .playlist-item:hover.future .program-name {
          text-decoration: none;
}

.actionButtons {
    display: none;
    line-height: 0;
    padding: 2px 0;
    vertical-align: middle;
  }

.actionButtons .share-btn,
    .actionButtons .download-btn,
    .actionButtons .remove-btn {
      width: 16px;
      height: 16px;
      margin-right: 5px;
      background: center no-repeat;
      background-size: cover;
      display: inline-block;
    }

.actionButtons .share-btn {
      background-image: url(//sss.qtfm.cn/www/images/share@2x.png)
    }

.actionButtons .share-btn:hover {
    background-image: url(//sss.qtfm.cn/www/images/share-hover@2x.png);
}

.actionButtons .download-btn {
      background-image: url(//sss.qtfm.cn/www/images/download@2x.png)
    }

.actionButtons .download-btn:hover {
    background-image: url(//sss.qtfm.cn/www/images/download-hover@2x.png);
}

.actionButtons .remove-btn {
      background-image: url(//sss.qtfm.cn/www/images/remove-btn@2x.png)
    }

.actionButtons .remove-btn:hover {
    background-image: url(//sss.qtfm.cn/www/images/remove-btn-hover@2x.png);
}
  
.history {
    background-color: black;
    display: inline-block;
    width: 752px;
    margin-left: 82px;
    left: auto;
    right: auto;
    line-height: 1.2;
    position: relative;
  }
    .history .header {
      text-align: left;
      font-size: 18px;
      color: white;
      padding: 14px 30px;
      border-bottom: 1px solid #3D3D3D;
      position: inherit;
    }
    .history .header .header-text {
        border-bottom: 3px solid #E13430;
        padding-bottom: 12px;
      }
    .history .header .clear-all {
        display: inline-block;
        position: absolute;
        top: 16px;
        right: 36px
      }
    .history .header .clear-all:hover {
    cursor: pointer;
}
    .history .header .clear-all:hover .clear-all-btn {
            background-image: url(//sss.qtfm.cn/www/images/remove-btn-hover@2x.png);
}
    .history .header .clear-all:hover .clear-all-text {
            color: white;
}
    .history .header .clear-all .clear-all-btn {
          width: 16px;
          height: 16px;
          background: center no-repeat;
          background-size: cover;
          display: inline-block;
          background-image: url(//sss.qtfm.cn/www/images/remove-btn@2x.png);
}
    .history .header .clear-all .clear-all-text {
          color: #9B9B9B;
          font-size: 12px;
          position: relative;
          top: -3px;
}
    .history .content {
      height: 360px;
      overflow-x: hidden;
      overflow-y: scroll;
      margin-right: 5px;
    }
    .history .content .history-item {
        color: #9B9B9B;
        font-size: 14px;
        padding: 8px 0;
        text-align: left
      }
    .history .content .history-item:first-child {
    margin-top: 9px;
}
    .history .content .history-item:last-child {
    margin-bottom: 9px;
}
    .history .content .history-item:hover {
    cursor: pointer;
}
    .history .content .history-item:hover .item-progress {
            display: none;
}
    .history .content .history-item:hover .action-buttons {
            display: inline-block;
}
    .history .content .history-item .playing-flag,
        .history .content .history-item .program-name-wrapper,
        .history .content .history-item .channel-name-wrapper,
        .history .content .history-item .timestr,
        .history .content .history-item .item-progress {
          display: inline-block;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          vertical-align: middle;
          padding: 2px 0;
}
    .history .content .history-item .program-name-wrapper {
          width: 267px;
          margin-right: 60px;
}
    .history .content .history-item .channel-name-wrapper {
          width: 100px;
          margin-right: 72px;
}
    .history .content .history-item .timestr {
          width: 80px;
          margin-right: 25px;
}
    .history .content .history-item:hover {
    background-color: #303030;
    color: white;
}
    .history .content .history-item:hover .program-name, .history .content .history-item:hover .channel-name {
            text-decoration: underline;
}
    .history .content .history-item.active .playing-flag {
    visibility: visible;
}
    .history .shrink-btn {
      width: 12px;
      height: 8px;
      background: center no-repeat;
      background-size: 12px 8px;
      background-image: url(//sss.qtfm.cn/www/images/shrink-down-arrow@2x.png);
      position: absolute;
      top: 3px;
      right: 2px;
      padding: 7px 9px
    }
    .history .shrink-btn:hover {
    cursor: pointer;
}
  
.common-playing-flag {
    width: 16px;
    height: 16px;
    margin-left: 12px;
    margin-right: 3px;
    background: center no-repeat;
    background-image: url(//sss.qtfm.cn/www/images/playing-flag@2x.png);
    background-size: cover;
    visibility: hidden;
}
/*
 * 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 */

.navigator {
  position: relative;
  z-index: 99;
  width: 100%;
  padding: 15px 0 13px;
  background-color: #fff;
  color: #333;
}

.navigator .centered {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 1052px;
    height: 42px;
    max-width: 1050px;
    margin: 0 auto;
  }

.navigator .centered .logo {
      position: relative;
      top: -3px;
      width: 180px;
      height: auto;
    }

.navigator .centered .menu {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      padding-left: 24px;
    }

.navigator .centered .menu .item {
        position: relative;
        font-size: 18px;
        font-weight: 400;
        line-height: 32px;
        margin-right: 20px;
        border-bottom: 4px solid transparent;
        padding-bottom: 6px;
        cursor: pointer
      }

.navigator .centered .menu .item:hover {
  color: #e13430;
}

.navigator .centered .menu .item.active {
  border-bottom: 4px solid #e13430;
}

.navigator .centered .menu .item.active a {
            color: #e13430;
}

.navigator .centered .menu .item.active a:visited {
  color: #e13430;
}

.navigator .centered .menu .item a {
          color: #333;
}

.navigator .centered .menu .item a:visited {
  color: #333;
}

.navigator .centered .menu .item a:hover {
  color: #e13430;
}

.navigator .centered .menu .item .label {
          position: absolute;
          right: -25px;
          top: -8px;
          width: 36px;
          text-align: center;
          background: #fd5353;
          border-radius: 100px;
          line-height: 14px;
          color: #fff;
          font-family: Arial-BoldMT;
          font-size: 9px;
          font-weight: 300;
}

.navigator .centered .search-input {
      width: 180px;
    }

.navigator .centered .search-input .search-input-root {
        border-bottom: 4px solid transparent;
        padding-bottom: 6px;
      }

.navigator .centered .search-input .search-input-root .input-container {
          padding: 0px !important;
          width: 180px;
        }

.navigator .centered .search-input-e {
      position: relative
    }

.navigator .centered .search-input-e:hover .recommendation {
          display: block;
}

.navigator .centered .search-input-e:hover .search-items {
          display: block;
}

.navigator .centered .search-input-e input {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        position: relative;
        top: -3px;
        width: 270px;
        height: 36px;
        font-size: 14px;
        line-height: 14px;
        padding: 0 10px;
        border: 1px solid #ccc;
        border-radius: 6px;
        outline: none;
        background: #fff;
}

.navigator .centered .search-input-e .icon {
        position: absolute;
        display: inline-block;
        -webkit-transform: scale(0.8);
                transform: scale(0.8);
        top: 4px;
        right: 10px;
        cursor: pointer;
        background-image: url(//sss.qtfm.cn/neo/sprite@2x.png);
        background-size: 2527px 170px;
        width: 22px;
        height: 24px;
        background-position: -1486px 0;
}

.navigator .centered .search-input-e .recommendation {
        display: none;
        position: absolute;
        right: 0;
        top: 36px;
        width: 390px;
        padding: 20px;
        background-color: #fff;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        border-radius: 6px;
        border: 1px solid #ccc;
}

.navigator .centered .search-input-e .recommendation .item {
          color: #333;
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
          font-size: 14px;
          display: inline-block;
          border: 1px solid #dcdee3;
          border-radius: 6px;
          padding: 8px;
          margin: 10px 20px 10px 0;
          cursor: pointer;
          -webkit-transition: all 0.2s;
          transition: all 0.2s
        }

.navigator .centered .search-input-e .recommendation .item:hover {
  border-color: #e13430;
}

.navigator .centered .search-input-e .recommendation .item:hover a {
              color: #e13430;
}

.navigator .centered .search-input-e .recommendation .item a {
            color: #333;
            text-decoration: none;
}

.navigator .centered .search-input-e .recommendation .item a:visited {
  color: #333;
}

.navigator .centered .search-input-e .recommendation .search-history {
          padding-top: 5px;
        }

.navigator .centered .search-input-e .recommendation .search-history .title {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            color: #c3c3c3;
            font-size: 14px;
          }

.navigator .centered .search-input-e .recommendation .search-history .title .line {
              width: 120px;
              height: 1px;
              border-top: 1px solid #c3c3c3;
              -webkit-transform: scaleY(0.5);
                      transform: scaleY(0.5);
            }

.navigator .centered .search-input-e .recommendation .search-history .history-item {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            font-size: 14px;
            margin: 25px 0;
          }

.navigator .centered .search-input-e .recommendation .search-history .history-item a {
              color: #333
            }

.navigator .centered .search-input-e .recommendation .search-history .history-item a:hover {
  color: #e13430;
  text-decoration: underline;
}

.navigator .centered .search-input-e .recommendation .search-history .history-item a:visited {
  color: #333;
}

.navigator .centered .search-input-e .recommendation .search-history .history-item .icon-close {
              margin-left: auto;
              background-image: url(//sss.qtfm.cn/neo/sprite@2x.png);
              background-size: 2527px 170px;
              width: 16px;
              height: 16px;
              background-position: -1838px 0;
              cursor: pointer
            }

.navigator .centered .search-input-e .recommendation .search-history .history-item .icon-close:hover {
  background-position: -1714px 0;
}

.navigator .centered .search-input-e .recommendation .search-history .footer {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            font-size: 14px;
          }

.navigator .centered .search-input-e .recommendation .search-history .footer .clickable {
              display: inline-block;
              margin-left: auto;
              cursor: pointer
            }

.navigator .centered .search-input-e .recommendation .search-history .footer .clickable:hover {
  color: #e13430;
}

.navigator .centered .search-input-e .recommendation .search-history .footer .clickable:hover .icon-trash {
                  background-position: -1810px 0;
}

.navigator .centered .search-input-e .recommendation .search-history .footer .clickable .icon-trash {
                display: inline-block;
                vertical-align: middle;
                margin-left: auto;
                background-image: url(//sss.qtfm.cn/neo/sprite@2x.png);
                background-size: 2527px 170px;
                width: 16px;
                height: 16px;
                background-position: -1986px 0;
                cursor: pointer;
}

.navigator .centered .search-input-e .recommendation .search-history .footer .clickable .text {
                display: inline-block;
                vertical-align: middle;
}

.navigator .centered .search-input-e .search-items {
        position: absolute;
        display: none;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        width: 390px;
        right: 0;
        top: 36px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 14px;
        overflow: hidden;
}

.navigator .centered .search-input-e .search-items div {
          padding: 10px;
          cursor: pointer
        }

.navigator .centered .search-input-e .search-items div:hover {
  background-color: #e13430;
}

.navigator .centered .search-input-e .search-items div:hover a {
              color: #fff !important;
}

.navigator .centered .search-input-e .search-items div a {
            display: block;
            color: #3d3d3d;
}

.navigator .centered .search-input-e .search-items div a:visited {
  color: #3d3d3d;
}

.navigator .centered .sign-in {
      position: relative;
      left: 15px;
      font-size: 18px;
      color: #333;
      cursor: pointer;
      border-bottom: 4px solid transparent;
      padding-bottom: 6px;
    }

.navigator .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

.navigator .overlay .mask {
      width: 100%;
      height: 100%;
      background: black;
      opacity: 0.5;
    }

.navigator .prompt {
    display: block;
  }

.navigator .identity {
    top: -3px;
    left: 15px;
    position: relative;
    float: right;
    width: 38px;
    height: 38px;
    border-radius: 100%;
    overflow: hidden;
    display: inline-block;
    font-size: 18px;
    font-weight: normal;
    color: #333;
    line-height: 32px;
    cursor: pointer
  }

.navigator .identity > img {
  width: 100%;
  height: 100%;
}

.navigator .identity:hover {
  color: #E13430;
}

.navigator .userInfo {
    position: absolute;
    right: 100px;
    top: 60px;
    width: 140px;
    height: 79px;
    background: #fff;
    border-radius: 4px;
    text-align: center;
    -webkit-box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.06);
            box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.06);
  }

.navigator .userInfo .user-item {
      font-size: 12px;
      color: #333;
      height: 36px;
      line-height: 36px;
      -webkit-box-shadow: inset 0 0 0 0 #efefef;
              box-shadow: inset 0 0 0 0 #efefef;
      position: relative;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 7px;
    }

.navigator .userInfo .user-item .logout {
        position: absolute;
        left: 35px;
        top: 9px;
        width: 18px;
        height: 18px;
        background-image: url('//sss.qtfm.cn/neo/login/logout@2x.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
      }

.navigator .userInfo .user-item > span {
  position: absolute;
  left: 60px;
  top: 9px;
  font-size: 12px;
  color: #333;
  line-height: 18px;
}

.phone-area-root {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 584px;
  height: 70vh;
  margin: 0;
  text-align: center;
  padding: 43px 125px 30px;
  background: #fff;
  -webkit-box-shadow: 0 2px 25px 0 rgba(207, 207, 207, 0.2);
          box-shadow: 0 2px 25px 0 rgba(207, 207, 207, 0.2);
  border-radius: 23px;
}

.hide {
  display: none;
}
.code-panel {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: auto;
}
.categories {
  font-size: 13px;
  color: #999;
  line-height: 32px;
  text-align: left;
  border-bottom: 1px solid #ECECEC;
  padding-left: 16px;
}
.city {
  color: #333;
  line-height: 62px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-bottom: 1px solid #ECECEC;
  padding: 0 18px
}
.city:last-child {
  border-bottom: 2px solid #ECECEC;
}
.clicked {
  background: #F5F5F5;
}
.letters-panel {
  position: sticky;
  top: 0;
  right: 0;
  height: 100%;
  float: right;
}
.letters {
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.letters .letter {
    display: block;
    color: #FD5353;
    line-height: 1.2;
    font-size: 12px;
    text-decoration: none;
  }
@charset "UTF-8";.disable-user-behavior,a{-webkit-tap-highlight-color:transparent;-webkit-user-drag:none}.disable-user-behavior,a,img{-webkit-user-drag:none}.flex-col,.flex-row{-webkit-box-direction:normal}.block:after,.invisible{visibility:hidden}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;vertical-align:baseline;font:inherit;font-size:100%}dfn,em{font-style:italic}.bold,b,strong{font-weight:700}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}audio:not([controls]){display:none;height:0}[hidden],template{display:none}script{display:none!important}html{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;line-height:1}:focus,a,a:active,a:focus,a:hover,button,button:focus{outline:0}a[href]:hover{cursor:pointer}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0}code,kbd,pre,samp{font-size:1em;font-family:monospace,serif}pre{white-space:pre-wrap}.ellipsis,.nowrap{white-space:nowrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}.va-top,textarea{vertical-align:top}sup{top:-.5em}sub{bottom:-.25em}fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid silver}.p-0,legend{padding:0}.ph-0,.pr-0{padding-right:0}.ph-0,.pl-0{padding-left:0}.pt-0,.pv-0{padding-top:0}.pb-0,.pv-0{padding-bottom:0}legend{border:0}button,input,select,textarea{margin:0;font-size:100%;font-family:inherit;outline-offset:0;outline-style:none;outline-width:0;-webkit-font-smoothing:inherit;background-image:none}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}input[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}.bd,.bd-2,.bd-3{border-style:solid;border-color:transparent}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}.show{display:block}.hide{display:none}.opacity-hide{opacity:0}.opacity-show{opacity:1}.disable-pointer-events{pointer-events:none}.enable-pointer-events{pointer-events:auto}.disable-user-behavior{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-ms-touch-action:none;-ms-content-zooming:none}.no-resize{resize:none}.selectable{-webkit-user-select:auto}.scroll-y{overflow-y:scroll;overflow-x:hidden}.scroll-x{overflow-x:scroll;overflow-y:hidden}.scroll-hidden{overflow-y:hidden;overflow-x:hidden}.scrollbar-hide ::-webkit-scrollbar{display:none}.ellipsis-line2,.ellipsis-line3{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}.yahei{font-family:"微软雅黑",Helvetica,Arial,sans-serif}.songti{font-family:"宋体",Helvetica,Arial,sans-serif}.serif{font-family:serif}.monospace{font-family:monospace}.normal{font-weight:400}.thin{font-weight:200}.underline{text-decoration:underline}.line-through{text-decoration:line-through}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.f12{font-size:12px}.f13{font-size:13px}.f14{font-size:14px}.f15{font-size:15px}.f16{font-size:16px}.f17{font-size:17px}.f18{font-size:18px}.f19{font-size:19px}.f20{font-size:20px}.f21{font-size:21px}.f22{font-size:22px}.f23{font-size:23px}.f24{font-size:24px}.f25{font-size:25px}.f26{font-size:26px}.f27{font-size:27px}.f28{font-size:28px}.f29{font-size:29px}.f30{font-size:30px}.f31{font-size:31px}.f32{font-size:32px}.f33{font-size:33px}.f34{font-size:34px}.f35{font-size:35px}.f36{font-size:36px}.lh-100{line-height:1}.lh-110{line-height:1.1}.lh-120{line-height:1.2}.lh-130{line-height:1.3}.lh-140{line-height:1.4}.lh-150{line-height:1.5}.lh-160{line-height:1.6}.lh-170{line-height:1.7}.lh-180{line-height:1.8}.lh-190{line-height:1.9}.lh-200{line-height:2}.ellipsis{overflow:hidden;text-overflow:ellipsis;-webkit-text-overflow:ellipsis}.ellipsis-line2{-webkit-line-clamp:2}.ellipsis-line3{-webkit-line-clamp:3}.va-baseline,.va-bottom,.va-middle,.va-text-bottom,.va-top{display:inline-block}.va-middle{vertical-align:middle}.va-bottom{vertical-align:bottom}.va-baseline{vertical-align:baseline}.va-text-bottom{vertical-align:text-bottom}.bd{border-width:1px}@media screen and (-webkit-min-device-pixel-ratio:2){.bd{border-width:.5px}}@media screen and (-webkit-min-device-pixel-ratio:3){.bd{border-width:.5px}}.bd-2{border-width:2px}@media screen and (-webkit-min-device-pixel-ratio:2){.bd-2{border-width:1px}}@media screen and (-webkit-min-device-pixel-ratio:3){.bd-2{border-width:1px}}.bd-3{border-width:3px}@media screen and (-webkit-min-device-pixel-ratio:2){.bd-3{border-width:1.5px}}@media screen and (-webkit-min-device-pixel-ratio:3){.bd-3{border-width:1.5px}}.bd-none{border:none}.bg-none{background:0 0}.white,a.white{color:#fff}.bg-white{background-color:#fff}.bd-white{border-color:#fff}.gray-333,a.gray-333{color:#333}.bg-gray-333{background-color:#333}.bd-gray-333{border-color:#333}.gray-666,a.gray-666{color:#666}.bg-gray-666{background-color:#666}.bd-gray-666{border-color:#666}.gray-999,a.gray-999{color:#999}.bg-gray-999{background-color:#999}.bd-gray-999{border-color:#999}.gray-ccc,a.gray-ccc{color:#ccc}.bg-gray-ccc{background-color:#ccc}.bd-gray-ccc{border-color:#ccc}.gray-ddd,a.gray-ddd{color:#ddd}.bg-gray-ddd{background-color:#ddd}.bd-gray-ddd{border-color:#ddd}.gray-eee,a.gray-eee{color:#eee}.bg-gray-eee{background-color:#eee}.bd-gray-eee{border-color:#eee}.radius-0{border-radius:0}.radius-px-3{border-radius:3px}.radius-px-5{border-radius:5px}.radius-50{border-radius:50%}.m-auto{margin:0 auto}.mh-0,.mr-0{margin-right:0}.mh-0,.ml-0{margin-left:0}.mt-0,.mv-0{margin-top:0}.mb-0,.mv-0{margin-bottom:0}.m-0{margin:0}.mh,.mr{margin-right:10px}.mh,.ml{margin-left:10px}.mt,.mv{margin-top:10px}.mb,.mv{margin-bottom:10px}.ph,.pr{padding-right:10px}.ph,.pl{padding-left:10px}.pt,.pv{padding-top:10px}.pb,.pv{padding-bottom:10px}.m{margin:10px}.mh-2,.mr-2{margin-right:20px}.mh-2,.ml-2{margin-left:20px}.mt-2,.mv-2{margin-top:20px}.mb-2,.mv-2{margin-bottom:20px}.p{padding:10px}.ph-2,.pr-2{padding-right:20px}.ph-2,.pl-2{padding-left:20px}.pt-2,.pv-2{padding-top:20px}.pb-2,.pv-2{padding-bottom:20px}.m-2{margin:20px}.mh-3,.mr-3{margin-right:30px}.mh-3,.ml-3{margin-left:30px}.mt-3,.mv-3{margin-top:30px}.mb-3,.mv-3{margin-bottom:30px}.p-2{padding:20px}.ph-3,.pr-3{padding-right:30px}.ph-3,.pl-3{padding-left:30px}.pt-3,.pv-3{padding-top:30px}.pb-3,.pv-3{padding-bottom:30px}.m-3{margin:30px}.mh-4,.mr-4{margin-right:40px}.mh-4,.ml-4{margin-left:40px}.mt-4,.mv-4{margin-top:40px}.mb-4,.mv-4{margin-bottom:40px}.p-3{padding:30px}.ph-4,.pr-4{padding-right:40px}.ph-4,.pl-4{padding-left:40px}.pt-4,.pv-4{padding-top:40px}.pb-4,.pv-4{padding-bottom:40px}.m-4{margin:40px}.mh-5,.mr-5{margin-right:50px}.mh-5,.ml-5{margin-left:50px}.mt-5,.mv-5{margin-top:50px}.mb-5,.mv-5{margin-bottom:50px}.p-4{padding:40px}.ph-5,.pr-5{padding-right:50px}.ph-5,.pl-5{padding-left:50px}.pt-5,.pv-5{padding-top:50px}.pb-5,.pv-5{padding-bottom:50px}.m-5{margin:50px}.mh-6,.mr-6{margin-right:60px}.mh-6,.ml-6{margin-left:60px}.mt-6,.mv-6{margin-top:60px}.mb-6,.mv-6{margin-bottom:60px}.p-5{padding:50px}.ph-6,.pr-6{padding-right:60px}.ph-6,.pl-6{padding-left:60px}.pt-6,.pv-6{padding-top:60px}.pb-6,.pv-6{padding-bottom:60px}.m-6{margin:60px}.p-6{padding:60px}.left-0{left:0}.right-0{right:0}.top-0{top:0}.bottom-0{bottom:0}.left-5{left:5%}.right-5{right:5%}.top-5{top:5%}.bottom-5{bottom:5%}.left-10{left:10%}.right-10{right:10%}.top-10{top:10%}.bottom-10{bottom:10%}.left-15{left:15%}.right-15{right:15%}.top-15{top:15%}.bottom-15{bottom:15%}.left-20{left:20%}.right-20{right:20%}.top-20{top:20%}.bottom-20{bottom:20%}.left-25{left:25%}.right-25{right:25%}.top-25{top:25%}.bottom-25{bottom:25%}.left-30{left:30%}.right-30{right:30%}.top-30{top:30%}.bottom-30{bottom:30%}.left-35{left:35%}.right-35{right:35%}.top-35{top:35%}.bottom-35{bottom:35%}.left-40{left:40%}.right-40{right:40%}.top-40{top:40%}.bottom-40{bottom:40%}.left-45{left:45%}.right-45{right:45%}.top-45{top:45%}.bottom-45{bottom:45%}.left-50{left:50%}.right-50{right:50%}.top-50{top:50%}.bottom-50{bottom:50%}.wd-5{width:5%}.wd-10{width:10%}.wd-15{width:15%}.wd-20{width:20%}.wd-25{width:25%}.wd-30{width:30%}.wd-35{width:35%}.wd-40{width:40%}.wd-45{width:45%}.wd-50{width:50%}.wd-55{width:55%}.wd-60{width:60%}.wd-65{width:65%}.wd-70{width:70%}.wd-75{width:75%}.wd-80{width:80%}.wd-85{width:85%}.wd-90{width:90%}.wd-95{width:95%}.wd-100{width:100%}.z-index--1{z-index:-1}.z-index-0{z-index:0}.z-index-1{z-index:1}.z-index-2{z-index:2}.z-index-3{z-index:3}.z-index-4{z-index:4}.z-index-5{z-index:5}.z-index-6{z-index:6}.z-index-7{z-index:7}.z-index-8{z-index:8}.z-index-9{z-index:9}.z-index-10{z-index:10}.opacity-0{opacity:0}.opacity-1{opacity:.1}.opacity-2{opacity:.2}.opacity-3{opacity:.3}.opacity-4{opacity:.4}.opacity-5{opacity:.5}.opacity-6{opacity:.6}.opacity-7{opacity:.7}.opacity-8{opacity:.8}.opacity-9{opacity:.9}.opacity-10{opacity:1}.flex{display:-webkit-box;display:-moz-flex;display:-ms-flexbox;display:flex}.flex-row{-webkit-box-orient:horizontal;-moz-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.flex-col{-webkit-box-orient:vertical;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-row-reverse{-webkit-box-direction:reverse;-webkit-box-orient:horizontal;-moz-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.flex-col-reverse{-webkit-box-direction:reverse;-webkit-box-orient:vertical;-moz-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.flex-nowrap{-ms-flex-wrap:none;flex-wrap:nowrap}.flex-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-wrap-reverse{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.flex-start{-webkit-box-pack:start;-ms-flex-pack:start;-moz-justify-content:flex-start;justify-content:flex-start}.flex-end{-webkit-box-pack:end;-ms-flex-pack:end;-moz-justify-content:flex-end;justify-content:flex-end}.flex-center{-webkit-box-pack:center;-ms-flex-pack:center;-moz-justify-content:center;justify-content:center}.flex-between{-webkit-box-pack:justify;-ms-flex-pack:justify;-moz-justify-content:space-between;justify-content:space-between}.flex-around{-webkit-box-pack:space-around;-ms-flex-pack:space-around;-moz-justify-content:space-around;justify-content:space-around}.items-start{-webkit-box-align:start;-ms-flex-align:start;-moz-align-items:flex-start;align-items:flex-start}.items-end{-webkit-box-align:end;-ms-flex-align:end;-moz-align-items:flex-end;align-items:flex-end}.items-center{-webkit-box-align:center;-ms-flex-align:center;-moz-align-items:center;align-items:center}.items-baseline{-webkit-box-align:baseline;-ms-flex-align:baseline;-moz-align-items:baseline;align-items:baseline}.items-stretch{-webkit-box-align:stretch;-ms-flex-align:stretch;-moz-align-items:stretch;align-items:stretch}.self-start{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.self-end{-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}.self-center{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.self-baseline{-webkit-align-self:baseline;-ms-flex-item-align:baseline;align-self:baseline}.self-stretch{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch}.self-auto{-webkit-align-self:auto;-ms-flex-item-align:auto;align-self:auto}.content-start{-ms-flex-line-pack:start;align-content:flex-start}.content-end{-ms-flex-line-pack:end;align-content:flex-end}.content-center{-ms-flex-line-pack:center;align-content:center}.content-stretch{-ms-flex-line-pack:stretch;align-content:stretch}.content-between{-ms-flex-line-pack:space-between;align-content:space-between}.content-around{-ms-flex-line-pack:space-around;align-content:space-around}.flex-default{-webkit-box-flex:1;-moz-flex:1 1 0;-ms-flex:1 1 0;flex:1 1 0}.flex-auto{-webkit-box-flex:1;-moz-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.flex-inherit{-webkit-box-flex:0;-moz-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto}.flex-none{-webkit-box-flex:0;-moz-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}.fl{float:left}.fr{float:right}.clearfix:after,.clearfix:before{display:table;content:"";line-height:0}.clearfix:after{clear:both}.absolute{position:absolute}.relative{position:relative}.fixed{position:fixed}.static{position:static}.inline{display:inline}.inblock{display:inline-block}.block,.block:after{display:block;clear:both}.block:after{height:0}
/*
 * 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 */

.bind-root {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 584px;
    margin: 0;
    text-align: center;
    padding: 43px 125px 30px;
    background: #fff;
    -webkit-box-shadow: 0 2px 25px 0 rgba(207, 207, 207, 0.2);
            box-shadow: 0 2px 25px 0 rgba(207, 207, 207, 0.2);
    border-radius: 23px;
  }

.bind-root .close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 17px;
      height: 17px;
      background-image: url('//sss.qtfm.cn/neo/login/close@2x.png');
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      cursor: pointer;
    }

.bind-root .login-logo {
      width: 159px;
      height: 75px;
      margin-bottom: 20px;
      -o-object-fit: contain;
         object-fit: contain;
    }

.bind-root .subTitle {
      font-size: 14px;
      color: #9b9b9b;
      letter-spacing: 0;
      line-height: 14px;
      position: relative;
      margin-bottom: 15px
    }

.bind-root .subTitle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 83px;
    height: 1px;
    border-bottom: 1px solid #eee;
}

.bind-root .subTitle::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 83px;
    height: 1px;
    border-bottom: 1px solid #eee;
}

.bind-root .error {
      height: 17px;
      line-height: 17px;
      font-size: 12px;
      color: #fd5353;
      letter-spacing: 0;
      display: block;
      text-align: left;
    }

.bind-root .input {
      width: 340px;
      height: 40px;
      position: relative;
      background: #fff;
      margin-top: 30px;
      background: transparent;
    }

.bind-root .input .inputIcon {
        width: 20px;
        height: 20px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        position: absolute;
        left: 9px;
        top: 9px;
      }

.bind-root .input .phone {
        background-image: url('//sss.qtfm.cn/neo/login/phone@2x.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
      }

.bind-root .input .areaCode {
        width: 65px;
        position: absolute;
        left: 42px;
        padding: 0 7px;
        line-height: 42px;
        cursor: pointer;
        z-index: 5;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
      }

.bind-root .input .auth {
        background-image: url('//sss.qtfm.cn/neo/login/auth@2x.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
      }

.bind-root .input .spliter {
        position: absolute;
        left: 39px;
        top: 7px;
        height: 25px;
        width: 0;
        border-left: 1px solid #DCDEE3;
      }

.bind-root .input .second {
        left: 109px!important;
      }

.bind-root .input .extra {
        padding-left: 108px!important;
      }

.bind-root .input .centent {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-left: 40px;
        background: transparent
      }

.bind-root .input .centent > input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 15px;
    color: #333;
    padding-left: 10px;
    border-radius: 4px;
    background: transparent;
}

.bind-root .input .centent > input + .border {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #9b9b9b;
    border-radius: 4px;
    z-index: -1;
}

.bind-root .input .centent > input:focus + .border {
    border: 1px solid #fd5353;
    border-radius: 4px;
}

.bind-root .width_200{
      width: 200px !important;
    }

.bind-root .verify_code_btn{
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 130px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      border: 1px solid #9b9b9b;
      border-radius: 4px;
      cursor: pointer;
      color: #FD5353;
      white-space: nowrap;
    }

.bind-root .color-9{
      color: #999;
    }

.bind-root .btn{
      width: 340px;
      height: 39px;
      border-radius: 4px;
      font-size: 15px;
      color: #fff;
      letter-spacing: 0;
      cursor: pointer;
      line-height: 39px;
      text-align: center;
      cursor: pointer;
      margin-top: 35px;
      background-color: #FD5353;
    }

.bind-root .disabled{
      background-color: #aaa;
    }

.bind-root .tip{
      width: 340px;
      font-size: 14px;
      line-height: 20px;
      color: #aaa;
      margin-top: 20px;
      letter-spacing: 0;
      text-align: left;
    }

.hide {
    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 */

.login-root {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 584px;
  margin: 0;
  text-align: center;
  padding: 43px 125px 30px;
  background: #fff;
  -webkit-box-shadow: 0 2px 25px 0 rgba(207, 207, 207, 0.2);
          box-shadow: 0 2px 25px 0 rgba(207, 207, 207, 0.2);
  border-radius: 23px
}

.login-root.qrcode-login {
  background-image: url('https://pic.qtfm.cn/www/qrcode-login-bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom center;
  padding-bottom: 80px;
}

.login-root {

  @-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }

  @keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
}

.login-root .close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 17px;
    height: 17px;
    background-image: url('//sss.qtfm.cn/neo/login/close@2x.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

.login-root .login-logo {
    width: 159px;
    height: 75px;
    margin-bottom: 20px;
    -o-object-fit: contain;
       object-fit: contain;
}

.login-root .login-type {
    color: #ccc;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
}

.login-root .login-type:hover {
    color: #FF313A;
}

.login-root .qrcode-login-container {
    text-align: center;
}

.login-root .qrcode-title {
    font-weight: 600;
    font-size: 28px;
    color: #222222;
    line-height: 40px;
    margin-bottom: 26px;
}

.login-root .qrcode-tip {
    font-size: 20px;
    color: #666666;
    line-height: 28px;
}

.login-root .qrcode-tip span {
    margin: 0 10px;
    color: #FF313A;
}

.login-root .qrcode-wrapper {
    display: inline-block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 200px;
    height: 200px;
    border-radius: 13px;
    border: 1px solid #F7F7F7;
    margin-top: 20px;
    position: relative;
    cursor: pointer;
}

.login-root .qrcode-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease
}

.login-root .qrcode-img:hover {
  opacity: 0.8;
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}

.login-root .qrcode-loading {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: #666;
}

.login-root .qrcode-loading .loading-icon {
      width: 30px;
      height: 30px;
      border: 2px solid #f3f3f3;
      border-top: 2px solid #FF313A;
      border-radius: 50%;
      -webkit-animation: spin 1s linear infinite;
              animation: spin 1s linear infinite;
      margin-bottom: 10px;
    }

.login-root .qrcode-scanning,
  .login-root .qrcode-expired,
  .login-root .qrcode-error {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 13px;
    font-size: 16px;
    color: #666;
}

.login-root .qrcode-expired,
  .login-root .qrcode-error {
    color: #FF313A;
}

.login-root .refresh-btn {
    margin-top: 10px;
    padding: 6px 16px;
    border: none;
    border-radius: 4px;
    background: #FF313A;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease
}

.login-root .refresh-btn:hover {
  background: #e62e36;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 2px 4px rgba(255, 49, 58, 0.2);
          box-shadow: 0 2px 4px rgba(255, 49, 58, 0.2);
}

.login-root .refresh-btn:active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-box-shadow: none;
          box-shadow: none;
}

.login-root .subTitle {
    font-size: 14px;
    color: #9b9b9b;
    letter-spacing: 0;
    line-height: 14px;
    position: relative;
    margin-bottom: 15px
}

.login-root .subTitle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 83px;
  height: 1px;
  border-bottom: 1px solid #eee;
}

.login-root .subTitle::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 83px;
  height: 1px;
  border-bottom: 1px solid #eee;
}

.login-root .thirdParty {
    width: 335px;
    height: 72px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    margin-bottom: 30px;
}

.login-root .thirdParty .thirdLog {
      height: 100%;
      width: 56px;
      position: relative;
      cursor: pointer;
    }

.login-root .thirdParty .thirdLog .logIcon {
        width: 48px;
        height: 48px;
        margin-bottom: 10px;
      }

.login-root .thirdParty .thirdLog .logName {
        height: 14px;
        width: 100%;
        position: absolute;
        top: 58px;
        left: 0;
        line-height: 14px;
        font-size: 14px;
        color: #9B9B9B;
        white-space: nowrap;
      }

.login-root .error {
    height: 17px;
    line-height: 17px;
    font-size: 12px;
    color: #fd5353;
    letter-spacing: 0;
    display: block;
    text-align: left;
}

.login-root .input {
    width: 335px;
    height: 40px;
    position: relative;
    background: #fff;
    margin-bottom: 10px;
    background: transparent;
}

.login-root .input .inputIcon {
      width: 20px;
      height: 20px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      position: absolute;
      left: 9px;
      top: 9px;
    }

.login-root .input .phone {
      background-image: url('//sss.qtfm.cn/neo/login/phone@2x.png');
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }

.login-root .input .areaCode {
      width: 65px;
      position: absolute;
      left: 42px;
      padding: 0 7px;
      line-height: 42px;
      cursor: pointer;
      z-index: 5;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

.login-root .input .lock {
      background-image: url('//sss.qtfm.cn/neo/login/lock@2x.png');
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }

.login-root .input .spliter {
      position: absolute;
      left: 39px;
      top: 7px;
      height: 25px;
      width: 0;
      border-left: 1px solid #DCDEE3;
    }

.login-root .input .second {
      left: 109px !important;
    }

.login-root .input .extra {
      padding-left: 108px !important;
    }

.login-root .input .centent {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding-left: 40px;
      background: transparent
    }

.login-root .input .centent>input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 15px;
  color: #333;
  padding-left: 10px;
  border-radius: 4px;
  background: transparent;
}

.login-root .input .centent>input+.border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #9b9b9b;
  border-radius: 4px;
  z-index: -1;
}

.login-root .input .centent>input:focus+.border {
  border: 1px solid #fd5353;
  border-radius: 4px;
}

.login-root .input .centent .password {
        display: block;
        position: relative;
        text-transform: uppercase;
        font-weight: 700;
        width: 100%;
        height: 100%;
        color: #727272;
}

.login-root .input .centent .password__input {
          display: block;
          text-transform: none;
          width: 100%;
          height: 100%;
          border: none;
          font-size: 15px;
          color: #333
        }

.login-root .input .centent .password__input:focus,
          .login-root .input .centent .password__input:active {
  border-color: #00BCD4;
  outline: 0;
}

.login-root .input .centent .password__show {
          cursor: pointer;
          position: absolute;
          bottom: 10px;
          right: 10px;
          height: 20px;
          width: 20px;
        }

.login-root .input .centent .eye_open {
        background-image: url('//sss.qtfm.cn/neo/login/show@2x.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
}

.login-root .input .centent .eye_close {
        background-image: url('//sss.qtfm.cn/neo/login/hide@2x.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
}

.login-root .options {
    width: 335px;
    height: 20px;
    position: relative;
}

.login-root .options .remember {
      position: absolute;
      left: 0;
      top: 0;
      font-size: 14px;
      color: #666;
      letter-spacing: 0;
    }

.login-root .options .remember input {
        position: absolute;
        top: 3px;
        left: 0;
        width: 18px;
        height: 18px;
        z-index: 5;
        border: none;
        -webkit-appearance: none;
        -moz-appearance: none;
      }

.login-root .options .remember input:focus {
        outline: none;
      }

.login-root .options .remember label {
        cursor: pointer;
        position: absolute;
        width: 18px;
        height: 18px;
        top: 3px;
        left: 0;
        background: #fff;
        border: 1px solid #9B9B9B;
        border-radius: 4px;
        z-index: 3;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
      }

.login-root .options .remember label::after {
        opacity: 0;
        content: '';
        position: absolute;
        width: 10px;
        height: 6px;
        top: 3px;
        left: 3px;
        border: 2px solid #fff;
        border-top: none;
        border-right: none;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
      }

.login-root .options .remember label:hover::after {
        opacity: 0.5;
      }

.login-root .options .remember input[type=checkbox]:checked+label {
        border: none;
        background: #fd5353;
      }

.login-root .options .remember input[type=checkbox]:checked+label::after {
        opacity: 1;
      }

.login-root .options .remember span {
        position: absolute;
        left: 25px;
        top: 2px;
        width: 100px;
        text-align: left;
        color: #666;
      }

.login-root .options .forget {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 14px;
      color: #4A90E2;
      cursor: pointer;
    }

.login-root .btns {
    width: 335px;
    height: 39px;
    position: relative;
    margin-top: 35px;
}

.login-root .btns .btn {
      width: 158px;
      height: 100%;
      background: #FFF;
      border: 1px solid #E6534F;
      border-radius: 4px;
      font-size: 15px;
      color: #FD5353;
      letter-spacing: 0;
      line-height: 39px;
      cursor: pointer;
    }

.login-root .btns .reg {
      position: absolute;
      left: 0;
      top: 0;
    }

.login-root .btns .log {
      position: absolute;
      right: 0;
      top: 0;
    }

.login-root .btns .selected {
      background: #FD5353;
      -webkit-box-shadow: 0 1px 4px 0 rgba(246, 91, 79, 0.29);
              box-shadow: 0 1px 4px 0 rgba(246, 91, 79, 0.29);
      color: #FFF;
    }

.login-root .login,
  .login-root .register {
    display: inline-block;
}

.login-root .register {
    background: white;
    border: 1px solid rgba(98, 87, 114, 0.3);
    border-radius: 3px;
}

.hide {
  display: none;
}

.alert-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 10001;
  -webkit-animation: fadeInOut 2s ease;
          animation: fadeInOut 2s ease;
}

@-webkit-keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
.forgot-root {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 635px;
    margin: 0;
    text-align: center;
    border: 1px solid grey;
    background: #fff;
    -webkit-box-shadow: 0 2px 25px 0 rgba(207, 207, 207, 0.17);
            box-shadow: 0 2px 25px 0 rgba(207, 207, 207, 0.17);
    border-radius: 23px;
    overflow: hidden;
  }
    .forgot-root .header {
      width: 100%;
      height: 70px;
      background: #fd5353;
      font-size: 24px;
      color: #fff;
      line-height: 70px;
    }
    .forgot-root .body {
      width: 100%;
      padding: 42px 120px 40px;
    }
    .forgot-root .body .input {
        width: 100%;
        height: 40px;
        position: relative;
        background: #fff;
        border: 1px solid #9b9b9b;
        border-radius: 4px;
      }
    .forgot-root .body .input .inputIcon {
          width: 25px;
          height: 25px;
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
          position: absolute;
          left: 7px;
          top: 7px;
        }
    .forgot-root .body .input .member {
          background-image: url('//sss.qtfm.cn/neo/login/member@2x.png');
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
        }
    .forgot-root .body .input .phone {
          background-image: url('//sss.qtfm.cn/neo/login/phone@2x.png');
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
        }
    .forgot-root .body .input .areaCode {
          width: 65px;
          position: absolute;
          left: 42px;
          padding: 0 7px;
          line-height: 40px;
          cursor: pointer;
          z-index: 5;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
        }
    .forgot-root .body .input .lock {
          background-image: url('//sss.qtfm.cn/neo/login/lock@2x.png');
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
        }
    .forgot-root .body .input .auth {
          background-image: url('//sss.qtfm.cn/neo/login/auth@2x.png');
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
        }
    .forgot-root .body .input .spliter {
          position: absolute;
          left: 39px;
          top: 7px;
          height: 25px;
          width: 0;
          border-left: 1px solid #dcdee3;
        }
    .forgot-root .body .input .second {
          left: 109px!important;
        }
    .forgot-root .body .input .extra {
          padding-left: 110px!important;
        }
    .forgot-root .body .input .centent {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          padding-left: 40px
        }
    .forgot-root .body .input .centent > input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 15px;
    font-size: 15px;
    border-radius: 4px;
    color: #b5b5b5;
}
    .forgot-root .body .input .centent > input[type=number]::-webkit-inner-spin-button,
            .forgot-root .body .input .centent > input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
    .forgot-root .body .input .centent .password {
            display: block;
            position: relative;
            text-transform: uppercase;
            font-weight: 700;
            width: 100%;
            height: 100%;
            color: #fd5353;
}
    .forgot-root .body .input .centent .password__input {
              display: block;
              text-transform: none;
              width: 100%;
              height: 100%;
              border: none;
              font-size: 15px;
              color: #b5b5b5
            }
    .forgot-root .body .input .centent .password__input:focus,
              .forgot-root .body .input .centent .password__input:active {
    border-color: #00bcd4;
    outline: 0;
}
    .forgot-root .body .input .centent .password__show {
              cursor: pointer;
              position: absolute;
              bottom: 10px;
              right: 10px;
              height: 20px;
              width: 20px;
            }
    .forgot-root .body .input .centent .eye_open {
            background-image: url('//sss.qtfm.cn/neo/login/show@2x.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
}
    .forgot-root .body .input .centent .eye_close {
            background-image: url('//sss.qtfm.cn/neo/login/hide@2x.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
}
    .forgot-root .body .tips{
        color: #9b9b9b;
        font-size: 12px;
        margin-top: 8px;
        text-align: left;
      }
    .forgot-root .body .error {
        margin-top: 5px;
        margin-bottom: 10px;
        height: 17px;
        font-size: 12px;
        color: #fd5353;
        text-align: left;
      }
    .forgot-root .body .auth_field {
        position: relative;
      }
    .forgot-root .body .auth_field .auth_input {
          width: 265px;
        }
    .forgot-root .body .auth_field .auth_btn {
          font-size: 15px;
          color: #b5b5b5;
          border: 1px solid #9b9b9b;
          -webkit-box-shadow: 0 1px 4px 0 rgba(246, 91, 79, 0.29);
                  box-shadow: 0 1px 4px 0 rgba(246, 91, 79, 0.29);
          border-radius: 4px;
          position: absolute;
          top: 0;
          right: 0;
          text-align: center;
          cursor: pointer;
          width: 120px;
          height: 39px;
          line-height: 39px;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
        }
    .forgot-root .body .btn {
        width: 100%;
        height: 39px;
        color: #fff;
        background: #fd5353;
        -webkit-box-shadow: 0 1px 4px 0 rgba(246, 91, 79, 0.29);
                box-shadow: 0 1px 4px 0 rgba(246, 91, 79, 0.29);
        border-radius: 4px;
        margin: 10px 0;
        text-align: center;
        cursor: pointer;
        line-height: 39px;
      }
    .forgot-root .body .backLogin {
        text-align: center;
        font-size: 15px;
        color: #b5b5b5
      }
    .forgot-root .body .backLogin > span {
    color: #fd5353;
    cursor: pointer;
}
  
  .hide {
    display: none;
  }
.account-root {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 635px;
    margin: 0;
    text-align: center;
    border: 1px solid grey;
    background: #fff;
    -webkit-box-shadow: 0 2px 25px 0 rgba(207, 207, 207, 0.17);
            box-shadow: 0 2px 25px 0 rgba(207, 207, 207, 0.17);
    border-radius: 23px;
    overflow: hidden;
  }
    .account-root .header {
      width: 100%;
      height: 70px;
      background: #fd5353;
      font-size: 24px;
      color: #fff;
      line-height: 70px;
    }
    .account-root .body {
      width: 100%;
      padding: 42px 150px 40px;
    }
    .account-root .body .input {
        width: 100%;
        height: 40px;
        position: relative;
        background: #fff;
        border: 1px solid #9b9b9b;
        border-radius: 4px;
        padding: 9px 10px;
        color: #b5b5b5;
      }
    .account-root .body .input .inputIcon {
          width: 20px;
          height: 20px;
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
          position: absolute;
          left: 9px;
          top: 9px;
        }
    .account-root .body .input .member {
          background-image: url('//sss.qtfm.cn/neo/login/member@2x.png');
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
        }
    .account-root .body .input .phone {
          background-image: url('//sss.qtfm.cn/neo/login/phone@2x.png');
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
        }
    .account-root .body .input .areaCode {
          width: 65px;
          position: absolute;
          left: 42px;
          padding: 0 7px;
          line-height: 24px;
          cursor: pointer;
          z-index: 5;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
        }
    .account-root .body .input .lock {
          background-image: url('//sss.qtfm.cn/neo/login/lock@2x.png');
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
        }
    .account-root .body .input .auth {
          background-image: url('//sss.qtfm.cn/neo/login/auth@2x.png');
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
        }
    .account-root .body .input .spliter {
          position: absolute;
          left: 39px;
          top: 7px;
          height: 25px;
          width: 0;
          border-left: 1px solid #dcdee3;
        }
    .account-root .body .input .second {
          left: 109px!important;
        }
    .account-root .body .input .extra {
          padding-left: 110px!important;
        }
    .account-root .body .input .centent {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          padding-left: 40px
        }
    .account-root .body .input .centent > input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 15px;
    font-size: 15px;
    color: #b5b5b5;
    border-radius: 4px;
}
    .account-root .body .input .centent > input[type=number]::-webkit-inner-spin-button,
            .account-root .body .input .centent > input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
    .account-root .body .input .centent .password {
            display: block;
            position: relative;
            text-transform: uppercase;
            font-weight: 700;
            width: 100%;
            height: 100%;
            color: #fd5353;
}
    .account-root .body .input .centent .password__input {
              display: block;
              text-transform: none;
              width: 100%;
              height: 100%;
              border: none;
              font-size: 15px;
              color: #b5b5b5
            }
    .account-root .body .input .centent .password__input:focus,
              .account-root .body .input .centent .password__input:active {
    border-color: #00bcd4;
    outline: 0;
}
    .account-root .body .input .centent .password__show {
              cursor: pointer;
              position: absolute;
              bottom: 10px;
              right: 10px;
              height: 20px;
              width: 20px;
            }
    .account-root .body .input .centent .eye_open {
            background-image: url('//sss.qtfm.cn/neo/login/show@2x.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
}
    .account-root .body .input .centent .eye_close {
            background-image: url('//sss.qtfm.cn/neo/login/hide@2x.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
}
    .account-root .body .error {
        margin-top: 5px;
        margin-bottom: 10px;
        height: 17px;
        font-size: 12px;
        color: #fd5353;
      }
    .account-root .body .auth_field {
        position: relative;
      }
    .account-root .body .auth_field .auth_input {
          width: 205px;
        }
    .account-root .body .auth_field .auth_btn {
          font-size: 15px;
          color: #b5b5b5;
          border: 1px solid #9b9b9b;
          border-radius: 4px;
          position: absolute;
          top: 0;
          right: 0;
          text-align: center;
          cursor: pointer;
          width: 120px;
          height: 39px;
          line-height: 39px;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
        }
    .account-root .body .confirm {
        position: relative;
        text-align: left;
        font-size: 13px;
        color: #B5B5B5;
      }
    .account-root .body .confirm input {
          position: absolute;
          top: 2px;
          left: 0;
          width: 18px;
          height: 18px;
          z-index: 5;
          border: none;
          -webkit-appearance: none;
          -moz-appearance: none;
        }
    .account-root .body .confirm input:focus {
          outline: none;
        }
    .account-root .body .confirm label {
          cursor: pointer;
          position: absolute;
          width: 18px;
          height: 18px;
          top: 0px;
          left: 0;
          background: #fff;
          border: 1px solid #9B9B9B;
          border-radius: 4px;
          z-index: 3;
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
        }
    .account-root .body .confirm label::after {
          opacity: 0;
          content: '';
          position: absolute;
          width: 10px;
          height: 6px;
          top: 3px;
          left: 3px;
          border: 2px solid #fff;
          border-top: none;
          border-right: none;
          -webkit-transform: rotate(-45deg);
                  transform: rotate(-45deg);
        }
    .account-root .body .confirm label:hover::after {
          opacity: 0.5;
        }
    .account-root .body .confirm input[type=checkbox]:checked + label {
          border: none;
          background: #fd5353;
        }
    .account-root .body .confirm input[type=checkbox]:checked + label::after {
          opacity: 1;
        }
    .account-root .body .confirm .inform {
          padding-left: 28px;
          color: #9b9b9b
        }
    .account-root .body .confirm .inform > span {
    cursor: pointer;
    font-size: 13px;
    color: #fd5353;
    line-height: 18px;
}
    .account-root .body .btn {
        width: 100%;
        height: 39px;
        color: #fff;
        background: #fd5353;
        -webkit-box-shadow: 0 1px 4px 0 rgba(246, 91, 79, 0.29);
                box-shadow: 0 1px 4px 0 rgba(246, 91, 79, 0.29);
        border-radius: 4px;
        margin: 10px 0;
        text-align: center;
        cursor: pointer;
        line-height: 39px;
      }
    .account-root .body .backLogin {
        text-align: center;
        font-size: 15px;
        color: #b5b5b5
      }
    .account-root .body .backLogin > span {
    color: #fd5353;
    cursor: pointer;
}
  
  .hide {
    display: none;
  }
.header-banner {
  display: none;
  width: 100%;
  background-color: #9d0707;
}
  .header-banner .logo {
    display: block;
    width: 1280px;
    margin: 0 auto;
  }

.app-modal-container {
  position: relative;
  width: 100vw;
  height: 100vh; 
}

.app-modal-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.5);
}

.app-modal {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 502px;
  height: 450px;
  padding: 20px;
  border-radius: 20px;
  background: #ffffff;
  text-align: center;
  background-image: url('https://pic.qtfm.cn/www/qrcode-login-bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.app-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  cursor: pointer;
}

.app-modal-title {
  font-weight: 600;
  font-size: 28px;
  color: #222222;
  line-height: 40px;
  margin-bottom: 26px;
}

.app-modal-desc {
  font-size: 20px;
  color: #B3494F;
  line-height: 28px;
  margin-bottom: 20px;
}

.app-modal-qrcode-wrapper {
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 228px;
  height: 228px;
  padding: 10px;
  border-radius: 15px;
  border: 2px solid #F7F7F7;
  margin: 20px 0;
}

.app-modal-qrcode {
  width: 100%;
}

.app-modal-login-tip {
  font-size: 16px;
  color: #666666;
  line-height: 28px;
}

.app-modal-login-tip span {
  color: #FF313A;
  cursor: pointer;
  text-decoration: underline;
}


/*# sourceMappingURL=main.40086f6e57e392da060c.css.map*/