@charset 'utf-8';
/*! normalize.css v7.0.0 | 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
 *    IE on Windows Phone and in iOS.
 */
html {
    line-height: 1.15; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
    margin: 0;
}
/**
 * Add the correct display in IE 9-.
 */
article, aside, footer, header, nav, section {
    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
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption, figure, main {
    /* 1 */
    display: block;
}
/**
 * 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;
       -moz-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; /* 1 */
    font-size: 1em; /* 2 */
}
/* Text-level semantics
   ========================================================================== */
/**
 * 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 */
}
/**
 * 1. Remove the bottom border in Chrome 57- and 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;
       -moz-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: 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; /* 1 */
    font-size: 1em; /* 2 */
}
/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
    font-style: italic;
}
/**
 * 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
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio, video {
    display: inline-block;
}
/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
    display: none;
    height: 0;
}
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
    border-style: none;
}
/**
 * Hide the overflow in IE.
 */
/* stylelint-disable */
svg:not(:root) {
    overflow: hidden;
}
/* stylelint-enable */
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button, input, optgroup, select, textarea {
    font-family: sans-serif; /* 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;
}
/**
 * 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"], [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;
}
/**
 * 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;
       -moz-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 */
}
/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    display: inline-block; /* 1 */
    vertical-align: baseline; /* 2 */
}
/**
 * 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;
       -moz-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 macOS.
 */
[type='search']::-webkit-search-cancel-button, [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 IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details, menu {
    display: block;
}
/*
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}
/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
    display: inline-block;
}
/**
 * Add the correct display in IE.
 */
template {
    display: none;
}
/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
    display: none;
}
/* FullScreen
   ========================================================================== */
/**
 * reset the background for element when it is in fullscreen status
 */
:-webkit-full-screen {
    background: transparent;
}
@charset 'utf-8';
@charset 'utf-8';
/**
 * A thin layer on top of normalize.css that provides a starting point more
 * suitable for web applications.
 */
@charset 'utf-8';
/**
 * Theme definition
 *
 * This defines the theme in fundamental terms, but not how it is applied to
 * the components. That is done in `theme-map.css`.
 */
/**
 * Fonts
 */
:root {
    /* xy-ui主题色 */
    --themeColor: #ff5d23;

    --fontSize: 12px;
    --fontFamily: -apple-system, 'Microsoft Yahei', sans-serif;
    --lineHeight: 1.5;
    --HeaderHeight: 62px;
    --WindowMinWidth: 1360px;

    /* Standard color */
    --colorA0: #ff5d23;
    --colorA1: #ff5d23;
    --colorA2: #f00;
    --colorA3: #2b94ff;
    --colorA4: #245bb6;
    --colorA5: #80b750;

    /* Standard dark color (light color background) */
    --colorB0: #000;
    --colorB1: #333;
    --colorB2: #666;
    --colorB3: #999;
    --colorB4: #1e1e1e;

    /* Standard light color (dark color background) */
    --colorC0: #fff;
    --colorC1: #f4f5f9;
    --colorC2: #d3ded3;
    --colorC3: #ccc;
    --colorC4: #aaa;

    /* Other colors (dark color background) */
    --colorD0: #8d93a1;
    --colorD1: #828992;
    --colorD2: #6d757a;
    --colorD3: #5d6b7a;
    --colorD4: #2c3e50;

    /* Theme color */
    --colorMain: var(--colorA0);
    --colorText: var(--colorB1);
    --colorBlockBackground: #ddd;
    --colorBackground: #fff;
    --gap: 5px;
    --gapMid: 10px;
    --gapBig: -webkit-calc(var(--gap) + var(--gapMid));
    --gapBig: -moz-calc(var(--gap) + var(--gapMid));
    --gapBig: calc(var(--gap) + var(--gapMid));
    --gapLarge: -webkit-calc(2 * var(--gapMid));
    --gapLarge: -moz-calc(2 * var(--gapMid));
    --gapLarge: calc(2 * var(--gapMid));
}
html, body {
    min-height: 100%;
}
/**
 * 1. Prevent padding and border from affecting element width
 * https://goo.gl/pYtbK7
 * 2. Change the default font family and font size in all browsers (opinionated)
 * 3. Correct the line height in all browsers.
 */
html {
    height: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box; /* 1 */
    font-family: -apple-system, 'Microsoft Yahei', sans-serif;
    font-family: var(--fontFamily); /* 2 */
    font-size: 12px;
    font-size: var(--fontSize); /* 2 */
    line-height: 1.5;
    line-height: var(--lineHeight); /* 3 */
}
/**
 * As a best practice, apply a default `color & background-color`.
 */
body {
    color: #333;
    color: var(--colorText);
    background-color: #fff;
    background-color: var(--colorBackground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
}
/**
 * Removes the default spacing and border for appropriate elements.
 */
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, figure, p, pre {
    margin: 0;
}
/*
* reset all <h> tag font size
*/
h1, h2, h3, h4, h5, h6 {
    font-size: 12px;
    font-size: var(--fontSize);
    font-weight: 400;
}
button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button {
    background: transparent;
    border: 0;
    padding: 0;
}
/**
 * Work around a Firefox/IE bug where the transparent `button` background
 * results in a loss of the default `button` focus styles.
 */
button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color;
}
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
iframe {
    border: 0;
}
ol, ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
/**
 * Suppress the focus outline on elements that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */
[tabindex='-1']:focus {
    outline: none !important;
}
a {
    color: #333;
    color: var(--colorText);
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: color 0.3s;
    -o-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}
a:hover {
    color: #ff5d23;
    color: var(--colorMain);
}
/**
 * 1. The value of display in Firefox 3.6 is inline.
 * 2. Fix for Firefox bug: an image styled `max-width:100%` within an
 * inline-block will display at its default size, and not limit its width to
 * 100% of an ancestral container.
 * !important removed by yangkun for video boradcast image
 */
img {
    display: inline-block; /* 1 */
    -webkit-user-drag: none;
    border: 0;
    vertical-align: middle;
}
table {
    border-collapse: collapse;
}
i, em {
    font-style: normal;
}
@charset 'utf-8';
@-webkit-keyframes slideDown {
    from {
        -webkit-transform: translateY(-5%);
                transform: translateY(-5%);
    }

    to {
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
    }
}
@-moz-keyframes slideDown {
    from {
        -moz-transform: translateY(-5%);
             transform: translateY(-5%);
    }

    to {
        -moz-transform: translateY(0%);
             transform: translateY(0%);
    }
}
@-o-keyframes slideDown {
    from {
        -o-transform: translateY(-5%);
           transform: translateY(-5%);
    }

    to {
        -o-transform: translateY(0%);
           transform: translateY(0%);
    }
}
@keyframes slideDown {
    from {
        -webkit-transform: translateY(-5%);
           -moz-transform: translateY(-5%);
             -o-transform: translateY(-5%);
                transform: translateY(-5%);
    }

    to {
        -webkit-transform: translateY(0%);
           -moz-transform: translateY(0%);
             -o-transform: translateY(0%);
                transform: translateY(0%);
    }
}
@-webkit-keyframes slideDownMid {
    from {
        -webkit-transform: translateY(-30%);
                transform: translateY(-30%);
    }

    to {
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
    }
}
@-moz-keyframes slideDownMid {
    from {
        -moz-transform: translateY(-30%);
             transform: translateY(-30%);
    }

    to {
        -moz-transform: translateY(0%);
             transform: translateY(0%);
    }
}
@-o-keyframes slideDownMid {
    from {
        -o-transform: translateY(-30%);
           transform: translateY(-30%);
    }

    to {
        -o-transform: translateY(0%);
           transform: translateY(0%);
    }
}
@keyframes slideDownMid {
    from {
        -webkit-transform: translateY(-30%);
           -moz-transform: translateY(-30%);
             -o-transform: translateY(-30%);
                transform: translateY(-30%);
    }

    to {
        -webkit-transform: translateY(0%);
           -moz-transform: translateY(0%);
             -o-transform: translateY(0%);
                transform: translateY(0%);
    }
}
@-webkit-keyframes slideDownFadeMid {
    from {
        -webkit-transform: translateY(-30%);
                transform: translateY(-30%);
        opacity: 0;
    }

    to {
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
        opacity: 1;
    }
}
@-moz-keyframes slideDownFadeMid {
    from {
        -moz-transform: translateY(-30%);
             transform: translateY(-30%);
        opacity: 0;
    }

    to {
        -moz-transform: translateY(0%);
             transform: translateY(0%);
        opacity: 1;
    }
}
@-o-keyframes slideDownFadeMid {
    from {
        -o-transform: translateY(-30%);
           transform: translateY(-30%);
        opacity: 0;
    }

    to {
        -o-transform: translateY(0%);
           transform: translateY(0%);
        opacity: 1;
    }
}
@keyframes slideDownFadeMid {
    from {
        -webkit-transform: translateY(-30%);
           -moz-transform: translateY(-30%);
             -o-transform: translateY(-30%);
                transform: translateY(-30%);
        opacity: 0;
    }

    to {
        -webkit-transform: translateY(0%);
           -moz-transform: translateY(0%);
             -o-transform: translateY(0%);
                transform: translateY(0%);
        opacity: 1;
    }
}
@-webkit-keyframes slideUp {
    from {
        -webkit-transform: translate(0, 5%);
                transform: translate(0, 5%);
    }

    to {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}
@-moz-keyframes slideUp {
    from {
        -moz-transform: translate(0, 5%);
             transform: translate(0, 5%);
    }

    to {
        -moz-transform: translate(0, 0);
             transform: translate(0, 0);
    }
}
@-o-keyframes slideUp {
    from {
        -o-transform: translate(0, 5%);
           transform: translate(0, 5%);
    }

    to {
        -o-transform: translate(0, 0);
           transform: translate(0, 0);
    }
}
@keyframes slideUp {
    from {
        -webkit-transform: translate(0, 5%);
           -moz-transform: translate(0, 5%);
             -o-transform: translate(0, 5%);
                transform: translate(0, 5%);
    }

    to {
        -webkit-transform: translate(0, 0);
           -moz-transform: translate(0, 0);
             -o-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}
@-webkit-keyframes slideUpMid {
    from {
        -webkit-transform: translateY(30%);
                transform: translateY(30%);
    }

    to {
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
    }
}
@-moz-keyframes slideUpMid {
    from {
        -moz-transform: translateY(30%);
             transform: translateY(30%);
    }

    to {
        -moz-transform: translateY(0%);
             transform: translateY(0%);
    }
}
@-o-keyframes slideUpMid {
    from {
        -o-transform: translateY(30%);
           transform: translateY(30%);
    }

    to {
        -o-transform: translateY(0%);
           transform: translateY(0%);
    }
}
@keyframes slideUpMid {
    from {
        -webkit-transform: translateY(30%);
           -moz-transform: translateY(30%);
             -o-transform: translateY(30%);
                transform: translateY(30%);
    }

    to {
        -webkit-transform: translateY(0%);
           -moz-transform: translateY(0%);
             -o-transform: translateY(0%);
                transform: translateY(0%);
    }
}
@-webkit-keyframes slideUpBig {
    from {
        -webkit-transform: translateY(70%);
                transform: translateY(70%);
    }

    to {
        -webkit-transform: translateY(0%);
                transform: translateY(0%);
    }
}
@-moz-keyframes slideUpBig {
    from {
        -moz-transform: translateY(70%);
             transform: translateY(70%);
    }

    to {
        -moz-transform: translateY(0%);
             transform: translateY(0%);
    }
}
@-o-keyframes slideUpBig {
    from {
        -o-transform: translateY(70%);
           transform: translateY(70%);
    }

    to {
        -o-transform: translateY(0%);
           transform: translateY(0%);
    }
}
@keyframes slideUpBig {
    from {
        -webkit-transform: translateY(70%);
           -moz-transform: translateY(70%);
             -o-transform: translateY(70%);
                transform: translateY(70%);
    }

    to {
        -webkit-transform: translateY(0%);
           -moz-transform: translateY(0%);
             -o-transform: translateY(0%);
                transform: translateY(0%);
    }
}
@-webkit-keyframes slideRight {
    from {
        -webkit-transform: translateX(-5%);
                transform: translateX(-5%);
    }

    to {
        -webkit-transform: translateX(0%);
                transform: translateX(0%);
    }
}
@-moz-keyframes slideRight {
    from {
        -moz-transform: translateX(-5%);
             transform: translateX(-5%);
    }

    to {
        -moz-transform: translateX(0%);
             transform: translateX(0%);
    }
}
@-o-keyframes slideRight {
    from {
        -o-transform: translateX(-5%);
           transform: translateX(-5%);
    }

    to {
        -o-transform: translateX(0%);
           transform: translateX(0%);
    }
}
@keyframes slideRight {
    from {
        -webkit-transform: translateX(-5%);
           -moz-transform: translateX(-5%);
             -o-transform: translateX(-5%);
                transform: translateX(-5%);
    }

    to {
        -webkit-transform: translateX(0%);
           -moz-transform: translateX(0%);
             -o-transform: translateX(0%);
                transform: translateX(0%);
    }
}
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@-o-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
@-moz-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
@-o-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
@charset 'utf-8';
.Icon-Change {
    width: 13px;
    height: 11px;
    vertical-align: -1px;
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    -o-transition: -o-transform 0.2s;
    -moz-transition: transform 0.2s, -moz-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s, -moz-transform 0.2s, -o-transform 0.2s;
}
.Icon-More {
    width: 7px;
    height: 11px;
    vertical-align: -1px;
}
.Icon-Live {
    width: 18px;
    height: 13px;
    vertical-align: -2px;
}
.Icon-UpIcon {
    width: 14px;
    height: 10px;
    vertical-align: -1px;
}
.Icon-Video {
    width: 13px;
    height: 11px;
    vertical-align: -1px;
}
.Icon-Zan {
    width: 13px;
    height: 12px;
    vertical-align: -1px;
}
.Icon-Time {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/b678e6da9f0162aa98a7e67db4848299.png) no-repeat 0 0;
    vertical-align: -1px;
}
.icon-author-type-1, .icon-author-type-2, .icon-author-type-3 {
    width: 100%;
    height: 100%;
    display: inline-block;
    background-repeat: no-repeat;
    -moz-background-size: 100% 100%;
      -o-background-size: 100% 100%;
         background-size: 100% 100%;
    vertical-align: middle;
}
.icon-author-type-1 {
    background-image: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/ba43aed5110d9a9f57d0b7bb2478c5ff.svg);
}
.icon-author-type-2 {
    background-image: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/508600e68f75a8282bac734e708f8454.svg);
}
.icon-author-type-3 {
    background-image: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/ee53def2fc79824429506ab54ae84b8a.svg);
}
.Icon-Time {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/b678e6da9f0162aa98a7e67db4848299.png) no-repeat 0 0;
    vertical-align: -1px;
}
.icon-author-type-1, .icon-author-type-2, .icon-author-type-3 {
    width: 100%;
    height: 100%;
    display: inline-block;
    background-repeat: no-repeat;
    -moz-background-size: 100% 100%;
      -o-background-size: 100% 100%;
         background-size: 100% 100%;
    vertical-align: middle;
}
.icon-author-type-1 {
    background-image: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/ba43aed5110d9a9f57d0b7bb2478c5ff.svg);
}
.icon-author-type-2 {
    background-image: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/508600e68f75a8282bac734e708f8454.svg);
}
.icon-author-type-3 {
    background-image: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/ee53def2fc79824429506ab54ae84b8a.svg);
}
body {
    min-height: 100%;
}
body.is-Fullscreen {
    overflow: hidden;
}
a, button, input, textarea, select {
    font-family: inherit;
    outline: 0;
}
a:focus, button:focus, input:focus, textarea:focus, select:focus {
        outline: 0;
    }
svg {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 0;
    pointer-events: visibleStroke;
}
/* stylelint-disable */
* {
    outline: 0;
}
*:focus {
        outline: 0;
    }
/* stylelint-enable */
input::-ms-clear {
    display: none;
}
.clearFix::before, .clearFix::after {
        content: ' '; /* 1 */
        display: table; /* 2 */
    }
.clearFix::after {
        clear: both;
    }
/* hack for safari rendering bug*/
.passport-iframe-shadow, .passport-iframe-con {
    -webkit-transform: translate(0, 0);
       -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
         -o-transform: translate(0, 0);
            transform: translate(0, 0);
}
.passport-iframe-con {
    -webkit-animation: slideDownMid 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
       -moz-animation: slideDownMid 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
         -o-animation: slideDownMid 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
            animation: slideDownMid 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}
.（⊙\.⊙） {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3500;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: #fff center/cover no-repeat;
    text-align: center;
    white-space: nowrap;
}
.（⊙\.⊙） .\:-O {
        width: 30px;
        height: 30px;
        position: absolute;
        right: 7px;
        top: 5px;
    }
.（⊙\.⊙） .（\/\/▽\/\/） {
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }
.（⊙\.⊙） .o_O {
        display: inline-block;
        vertical-align: middle;
    }
.（⊙\.⊙） .o_O .๑乛◡乛๑ {
            margin-top: 22px;
            height: 20px;
            font-size: 24px;
            font-weight: 700;
            line-height: 20px;
            text-align: center;
            color: #414141;
        }
.（⊙\.⊙） .o_O .\(\*\^__\^\*\) {
            overflow: hidden;
            text-align: justify;
            display: inline-block;
            text-justify: distribute-all-lines;
            font-size: 0;
        }
.（⊙\.⊙） .o_O .\(\*\^__\^\*\):after {
                display: inline-block;
                width: 100%;
                content: ' ';
            }
.（⊙\.⊙） .o_O .\(\*\^__\^\*\) .\^O\^ {
                position: relative;
                display: inline-block;
                vertical-align: middle;
                margin: 80px 0 0;
                padding: 0 100px;
                font-size: 20px;
                color: #ff5a12;
                text-align: center;
            }
.（⊙\.⊙） .o_O .\(\*\^__\^\*\) .\^O\^::before {
                    position: absolute;
                    content: '';
                    top: 40px;
                    bottom: 40px;
                    width: 1px;
                    left: -1px;
                    background: #ddd;
                }
.（⊙\.⊙） .o_O .\(\*\^__\^\*\) .\^O\^[data-rel='chrome'] i {
                    display: block;
                    width: 102px;
                    height: 102px;
                    margin: 15px auto;
                    background: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/fb0ae395dd53d19e9621be509bfefe0b.png) no-repeat;
                }
.（⊙\.⊙） .o_O .\(\*\^__\^\*\) .\^O\^[data-rel='firefox'] i {
                    display: block;
                    width: 102px;
                    height: 102px;
                    margin: 15px auto;
                    background: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/1627a56bd2ad1611cd85661fa6015ced.png) no-repeat;
                }
.（⊙\.⊙） .o_O .\(\*\^__\^\*\) .\^O\^[data-rel='edge'] i {
                    display: block;
                    width: 102px;
                    height: 102px;
                    margin: 15px auto;
                    background: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/0121b4eda25cdf6246c2eabccba5f339.png) no-repeat;
                }
.（⊙\.⊙） .o_O .\(¬､¬\) {
            margin: 48px 48px 0 73px;
        }
.（⊙\.⊙） .o_O .\(¬､¬\) .\(｡ớ₃ờ\)ھ {
                float: left;
                width: 139px;
                height: 139px;
            }
.（⊙\.⊙） .o_O .\(¬､¬\) .\(๑ŐдŐ\)b {
                overflow: hidden;
                text-align: center;
            }
.（⊙\.⊙） .o_O .\(¬､¬\) .✿◡‿◡ {
                margin: 37px 0 0;
                font-size: 18px;
                line-height: 1;
                color: #666;
            }
.（⊙\.⊙） .o_O .\(¬､¬\) .︶ε╰✿ {
                display: block;
                margin: 20px auto 0;
                width: 182px;
                height: 33px;
            }
.（⊙\.⊙）[active] {
    display: block !important;
    background-image: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/9f07779cbcdb62ecfa9c59fa54ec92d5.png);
}
[active] .ฅ’ω’ฅ {
    width: 263px;
    height: 227px;
    margin: 0 auto 45px;
    background: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/1e2cfb24e0acf0851dab386dc8165737.png) center no-repeat;
}
douyu-message-manager {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 3500;
}
demand-cover {
    overflow: hidden;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    position: relative;
    display: block;
    height: 0;
    padding-bottom: 56.25%;
    background: #ddd;
    background: var(--colorBlockBackground);
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
    /* hack for safari border-radius bug */
    -webkit-filter: contrast(0.99);
            filter: contrast(0.99);
}
demand-cover:not(.not-video)::before {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    z-index: 1;
    background-image: -webkit-gradient(
        linear,
        left top, left bottom,
        from(rgba(0, 0, 0, 0)),
        to(rgba(0, 0, 0, 0.6))
    );
    background-image: -webkit-linear-gradient(
        top,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.6) 100%
    );
    background-image: -moz-linear-gradient(
        top,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.6) 100%
    );
    background-image: -o-linear-gradient(
        top,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.6) 100%
    );
    background-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.6) 100%
    );
}
demand-cover:not(.not-video)::after {
    visibility: hidden;
    position: absolute;
    content: '';
    width: 40px;
    height: 40px;
    left: 50%;
    top: 50%;
    zoom: 0.9;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(2);
       -moz-transform: translate(-50%, -50%) scale(2);
        -ms-transform: translate(-50%, -50%) scale(2);
         -o-transform: translate(-50%, -50%) scale(2);
            transform: translate(-50%, -50%) scale(2);
    background: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/37fa086920bfbdb7663e3ff7c10cc1bf.svg) no-repeat;
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
demand-cover:hover:not(.not-video)::after {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
       -moz-transform: translate(-50%, -50%) scale(1);
        -ms-transform: translate(-50%, -50%) scale(1);
         -o-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
}
demand-card {
    overflow: hidden;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    display: block;
    /* hack for safari border-radius bug */
    -webkit-filter: contrast(0.99);
            filter: contrast(0.99);
}
demand-card:hover demand-cover:not(.not-video)::after, demand-cover:hover:not(.not-video)::after {
    visibility: visible;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
demand-cover douyu-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: -webkit-transform 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out, -moz-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, -moz-transform 0.3s ease-in-out, -o-transform 0.3s ease-in-out;
}
.Header[active='search'] demand-search-icon {
    display: none !important;
}
/* Generated By cn-font-split@4.11.2 https://www.npmjs.com/package/@konghayao/cn-font-split
CreateTime: Thu, 06 Feb 2025 08:52:51 GMT;
Origin File Name Table:
copyright: 2005 Albert-Jan Pool published by FSI Fonts und Software GmbH
fontFamily: DINPro-Medium
fontSubfamily: Regular
uniqueID: 7.460;FSI;DINPro-Medium
fullName: DINPro-Medium
version: Version 7.460;PS 7.046;hotconv 1.0.38
postScriptName: DINPro-Medium
trademark: DIN is a trademark of FSI Fonts und Software GmbH
manufacturer: FSI Fonts und Software GmbH
designer: Albert-Jan Pool
manufacturerURL: http://www.fontfont.com
designerURL: http://www.fontfont.com
licenseURL: http://www.fontfont.com/eula/license.html
preferredFamily: DINPro
preferredSubfamily: Medium
compatibleFullName: DINPro-Medium
 */
@font-face {
    font-family: 'DINPro-Medium';
    src: local('DINPro-Medium'), url('https://shark2.douyucdn.cn/front-publish/demand-v3-master/9c86a8036f01751b1d7b1bed6cce5d14.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    unicode-range: U+d, U+20-7e, U+a0-113, U+116-127, U+12a-12b, U+12e-131,
        U+134-137, U+139-13e, U+141-148, U+14c-14d, U+150-165, U+16a-173,
        U+178-17e, U+192, U+218-21b, U+237, U+2c6, U+2da, U+2dc, U+2013-2015,
        U+2018-201a, U+201c-201e, U+2020-2022, U+2026, U+2030, U+2039-203a,
        U+2044, U+20ac, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
    font-family: 'DINPro-Medium';
    src: local('DINPro-Medium'), url('https://shark2.douyucdn.cn/front-publish/demand-v3-master/71955fbf4e9cee3b87b2107edb835776.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    unicode-range: U+2c7, U+2d8-2d9, U+2db, U+2dd, U+384-38a, U+38c, U+38e-3a1,
        U+3a3-3ce, U+3d0, U+401-40c, U+40e-44f, U+451-45c, U+45e-45f, U+490-491,
        U+2116, U+2126, U+2190, U+2192, U+2196-2199, U+2202, U+2206, U+220f,
        U+2211, U+2219-221a, U+221e, U+2224, U+2227, U+222b, U+2248, U+2260,
        U+2264-2265, U+22c5, U+25ca, U+fb01-fb02;
}
@charset 'utf-8';
:host {
    position: relative;
    pointer-events: auto;
}
.LoginInfo, .History, .UserInfo-Link {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
    color: inherit;
    font-size: 15px;
}
:host-context([mode='transparent']) .UserInfo-Link {
    -webkit-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
            filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}
:host-context(.is-Fix) .UserInfo-Link {
    -webkit-filter: none;
            filter: none;
}
.NoLogin {
    display: inline-block;
    vertical-align: middle;
}
:host-context([mode='transparent']) .NoLogin {
    -webkit-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
            filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}
:host-context(.is-Fix) .NoLogin {
    -webkit-filter: none;
            filter: none;
}
.NoLogin-btn {
    cursor: pointer;
    color: inherit;
    margin: 0 10px;
    font-size: 15px;
}
.NoLogin-btn:hover {
    color: #ff5d23;
    color: var(--colorA0);
}
.NoLogin-btnSplit {
    display: inline-block;
    vertical-align: middle;

    vertical-align: -2px;
    width: 1px;
    height: 13px;
    margin: 0 5px;
    background: currentColor;
    opacity: 0.4;
}
.Link-UploadBtn {
    display: inline-block;
    vertical-align: middle;

    width: 106px;
    height: 32px;
    line-height: 30px;
    text-align: center;
    margin: 0 0 0 10px;
    background-color: #ff5d23;
    background-color: var(--colorA0);
    -webkit-border-radius: 40px;
       -moz-border-radius: 40px;
            border-radius: 40px;
    font-size: 14px;
    color: #fff !important;
    color: var(--colorC0) !important;
    cursor: pointer;
}
.Link-UploadBtn:hover {
    background-color: #cc4b1c;
}
.Link-UploadIcon {
    width: 14px;
    height: 13px;
    vertical-align: -2px;
}
.LoginInfo-head, .LoginInfo-nickname {
    display: inline-block;
    vertical-align: middle;
}
.LoginInfo-DropDown {
    margin-right: 10px;
}
.LoginInfo-cont {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
    vertical-align: middle;
    margin-right: 10px;
}
.LoginInfo-avatar {
    display: block;
    overflow: hidden;
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
            border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
}
.LoginInfo-msgNum {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 2px;
    min-width: 25px;
    font-size: 12px;
    font-size: var(--fontSize);
    line-height: 16px;
    -webkit-border-radius: 3em;
       -moz-border-radius: 3em;
            border-radius: 3em;
    -webkit-transform: translate(50%, 0);
       -moz-transform: translate(50%, 0);
        -ms-transform: translate(50%, 0);
         -o-transform: translate(50%, 0);
            transform: translate(50%, 0);
    background: #ff5d23;
    background: var(--colorA0);
    color: #fff;
    color: var(--colorC0);
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
}
.Menu {
    overflow: hidden;
    padding: 0 15px 15px;
    min-width: 100px;
}
.MenuItem {
    display: block;
    margin-top: 15px;
    line-height: 16px;
    cursor: pointer;
    text-align: center;
}
.LoginMenu-text {
    position: relative;
}
.Badge {
    position: absolute;
    bottom: 100%;
    left: 100%;
    -webkit-transform: translate(0, 50%);
       -moz-transform: translate(0, 50%);
        -ms-transform: translate(0, 50%);
         -o-transform: translate(0, 50%);
            transform: translate(0, 50%);
    white-space: nowrap;
    width: 25px;
    background: #ff5d23;
    background: var(--colorA0);
    -webkit-border-radius: 20px;
       -moz-border-radius: 20px;
            border-radius: 20px;
    font-size: 12px;
    color: #fff;
    color: var(--colorC0);
    font-style: normal;
    line-height: 16px;
    text-align: center;
}
.Menu-Additional {
    border-top: 1px solid #ddd;
}
.Logout {
    display: block;
    width: 100%;
    padding: 4px 0;
    border: none;
    background: none;
    cursor: pointer;
    text-align: center;
}
.LoginInfo-panel {
    position: absolute;
    top: 46px;
    left: -102px;
    right: -102px;
    z-index: 1;
    display: none;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1), 0 1px 4px 0 rgba(0, 0, 0, 0.2);
       -moz-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1), 0 1px 4px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1), 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-top: 46px;
}
.LoginInfo-cont:hover .LoginInfo-avatar {
    -webkit-transform: scale(1.8);
       -moz-transform: scale(1.8);
        -ms-transform: scale(1.8);
         -o-transform: scale(1.8);
            transform: scale(1.8);
    top: 24px;
    -webkit-transition: top 0.3s linear;
    -o-transition: top 0.3s linear;
    -moz-transition: top 0.3s linear;
    transition: top 0.3s linear;
    z-index: 2;
}
.LoginInfo-cont:hover .LoginInfo-panel {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}
.LoginInfo-panelAvatar {
    position: absolute;
    width: 70px;
    height: 70px;
    left: 50%;
    margin-left: -35px;
    top: -35px;
}
.LoginInfo-panelAvatar douyu-avatar {
    display: block;
    height: 100%;
    overflow: hidden;
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
            border-radius: 100%;
}
.LoginInfo-panelNick {
    margin-bottom: 15px;
    color: #222;
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}
.LoginInfo-panelInfo {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
    -webkit-justify-content: space-evenly;
       -moz-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    /* pointer-events: none; */
}
.LoginInfo-panelInfo .following, .LoginInfo-panelInfo .follower {
    cursor: pointer;
    text-align: center;
}
.LoginInfo-panelInfo .following:hover .f-title, .LoginInfo-panelInfo .following:hover .f-content, .LoginInfo-panelInfo .follower:hover .f-title, .LoginInfo-panelInfo .follower:hover .f-content {
    color: #ff5d23;
}
.LoginInfo-panelInfo .f-title {
    margin-bottom: 4px;
    font-size: 12px;
    color: #999;
    line-height: 17px;
    height: 17px;
}
.LoginInfo-panelInfo .f-content {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    line-height: 20px;
    height: 20px;
}
.LoginInfo-panelLine {
    border-bottom: 1px solid #e7e7e7;
    width: 100%;
}
.LoginInfo-panelItem {
    color: #333;
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    padding: 0 10%;
    text-align: left;
    cursor: pointer;
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.LoginInfo-panelItem svg {
    color: #999;
    width: 22px;
    height: 22px;
    margin-right: 10px;
}
.LoginInfo-panelItem:hover {
    color: #f70;
}
.LoginInfo-panelItem:hover > svg {
        color: #f70;
    }
:root {
    --nav-font-size: 15px;
}
.Header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    background: var(--colorC0);
    color: #666;
    color: var(--colorB2);
    height: 62px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding: 13px 48px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
       -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    white-space: nowrap;
    z-index: 1500;
    -webkit-transform: translate(0, 0);
       -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
         -o-transform: translate(0, 0);
            transform: translate(0, 0);
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
    pointer-events: none;
}
.Header[mode='transparent'] {
    position: absolute;
    background: transparent;
    -webkit-box-shadow: unset;
       -moz-box-shadow: unset;
            box-shadow: unset;
    color: #fff;
    color: var(--colorC0);
}
.Header[active='author'] {
    position: relative;
}
.Header.is-Fix {
    position: fixed;
    background: #fff;
    background: var(--colorC0);
    color: #666;
    color: var(--colorB2);
    -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1), 0 1px 4px 0 rgba(0, 0, 0, 0.2);
       -moz-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1), 0 1px 4px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1), 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    -webkit-animation: slideDownMid cubic-bezier(0.47, 0, 0.75, 0.72) 0.3s forwards;
       -moz-animation: slideDownMid cubic-bezier(0.47, 0, 0.75, 0.72) 0.3s forwards;
         -o-animation: slideDownMid cubic-bezier(0.47, 0, 0.75, 0.72) 0.3s forwards;
            animation: slideDownMid cubic-bezier(0.47, 0, 0.75, 0.72) 0.3s forwards;
}
.Header-Main {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    pointer-events: auto;
}
.Header.is-Fix .Logo, .Logo {
    display: inline-block;
    vertical-align: middle;
    width: 143px;
    height: 32px;
    margin: 0 14px 0 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    background: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/f29f611d26d0b66e8d36453e89aa3e90.png) center/cover no-repeat;
}
[mode='transparent'] .Logo {
    background: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/c1bf262ae4ad118a06eb6d656da2bef8.png) center/cover no-repeat;
}
.Header.is-Fix .Nav {
    display: inline-block;
    vertical-align: middle;
    -webkit-filter: none;
            filter: none;
}
[mode='transparent'] .Nav {
    -webkit-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
            filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}
.Nav-Item {
    position: relative;
    display: inline-block;
    font-size: 15px;
    font-size: var(--nav-font-size);
    padding: 0 10px;
    cursor: pointer;
}
.Nav-Split {
    display: inline-block;
    width: 1px;
    height: 13px;
    margin: 0 6px;
    background: currentColor;
    opacity: 0.4;
    vertical-align: -1px;
}
.Nav-Item:first-child {
    padding-left: 8px;
}
.Nav-Link {
    color: currentColor;
}
.Header .Nav-Link:hover, .is-active .Nav-Link {
    color: #ff5d23;
    color: var(--colorA0);
}
.Nav-Link svg {
    width: 16px;
    height: 16px;
    vertical-align: -2px;
}
.PrivateLetterFrame {
    display: none;
    visibility: hidden;
    width: 750px;
    height: 550px;
    position: fixed;
    left: -750px;
    bottom: -550px;
    pointer-events: none;
}
.PrivateLetterFrame.is-active {
    visibility: show;
    pointer-events: auto;
}
.Header:not([mode='transparent']) demand-search-box::part(search-input), .is-Fix demand-search-box::part(search-input) {
    border: 1px solid #ccc;
    border: 1px solid var(--colorC3);
}
.AnchorInfo {
    width: 100%;
    height: 86px;
    position: relative;
    z-index: 10;
}
.AnchorInfo-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: start;
       -moz-box-align: start;
        -ms-flex-align: start;
            align-items: start;
}
.AnchorInfo .anchor-img {
    margin-right: 14px;
    cursor: pointer;
    display: block;
    position: relative;
}
.AnchorInfo .anchor-img douyu-avatar {
        display: block;
        overflow: hidden;
        width: 56px;
        height: 56px;
        -webkit-border-radius: 50%;
           -moz-border-radius: 50%;
                border-radius: 50%;
    }
.AnchorInfo .anchor-auth {
    position: absolute;
    width: 16px;
    height: 16px;
    bottom: 1px;
    right: 1px;
}
.AnchorInfo .auth1 {
    background: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/e1eaf71ef66e4618cf400e97905a341e.svg) no-repeat;
    -moz-background-size: 100% 100%;
      -o-background-size: 100% 100%;
         background-size: 100% 100%;
}
.AnchorInfo .auth2 {
    background: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/1498d4e29114e8d27e7687fcfd23afca.svg) no-repeat;
    -moz-background-size: 100% 100%;
      -o-background-size: 100% 100%;
         background-size: 100% 100%;
}
.AnchorInfo .auth3 {
    background: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/f24821a5a700691c3e8bb86d0c7a533e.svg) no-repeat;
    -moz-background-size: 100% 100%;
      -o-background-size: 100% 100%;
         background-size: 100% 100%;
}
.AnchorInfo .anchor-content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    width: 0;
}
.AnchorInfo .anchor-nameInfo {
    height: 20px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    max-width: 100%;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.AnchorInfo .anchor-name {
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}
.AnchorInfo .anchor-name:hover {
    color: #ff5d23;
    color: var(--colorA0);
}
.AnchorInfo .anchor-verify-group {
    color: #999;
    margin-top: 5px;
    font-size: 12px;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    max-width: 100%;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.anchor-verify-group .u-split {
    display: block;
    width: 1px;
    height: 12px;
    margin: 0 8px;
    background: #d8d8d8;
}
.anchor-verify-group .anchor-info, .anchor-verify-group .anchor-verify {
    line-height: 18px;
    height: 18px;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    overflow: hidden;
}
.anchor-verify-group .anchor-info {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}
.anchor-verify-group .anchor-verify {
    max-width: 100px;
}
.AnchorInfo .anchor-focus {
    width: 144px;
    height: 28px;
    background: #ff5d23;
    background: var(--colorA0);
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
    color: #fff;
    margin-top: 8px;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    position: relative;
}
.AnchorInfo .anchor-focus:hover {
        background-color: #ef421a;
    }
.AnchorInfo .anchor-focus.isFocused {
        background: #969696;
    }
.AnchorInfo .anchor-focus.isFocused:hover .subscribe-count {
            display: none;
        }
.AnchorInfo .anchor-focus .focus-tip {
        height: 32px;
        line-height: 32px;
        padding: 0 18px;
        background-color: #ff0000;
        opacity: 0.7;
        font-size: 14px;
        color: #ffffff;
        -webkit-border-radius: 4px;
           -moz-border-radius: 4px;
                border-radius: 4px;
        position: absolute;
        top: -42px;
        white-space: nowrap;
        -webkit-animation: fade-up 0.3s;
           -moz-animation: fade-up 0.3s;
             -o-animation: fade-up 0.3s;
                animation: fade-up 0.3s;
    }
@-webkit-keyframes fade-up {
    from {
        -webkit-transform: translateY(50%);
                transform: translateY(50%);
        opacity: 0;
    }
}
@-moz-keyframes fade-up {
    from {
        -moz-transform: translateY(50%);
             transform: translateY(50%);
        opacity: 0;
    }
}
@-o-keyframes fade-up {
    from {
        -o-transform: translateY(50%);
           transform: translateY(50%);
        opacity: 0;
    }
}
@keyframes fade-up {
    from {
        -webkit-transform: translateY(50%);
           -moz-transform: translateY(50%);
             -o-transform: translateY(50%);
                transform: translateY(50%);
        opacity: 0;
    }
}
.AnchorInfo .anchor-live {
    font-size: 12px;
    color: #ff5d23;
    color: var(--colorA0);
    margin-left: 8px;
    cursor: pointer;
    text-align: center;
    line-height: 18px;
    background: no-repeat left;
    padding-left: 17px;
    white-space: nowrap;
}
.AnchorInfo .anchor-live.is-live {
        background-image: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/a8df6bc1a854c5f6c56f38146063c693.gif);
        -moz-background-size: 12px 12px;
          -o-background-size: 12px 12px;
             background-size: 12px 12px;
    }
.AnchorInfo .anchor-live.is-wheel {
        background-image: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/3d29558be25ad909c3be102d7af13689.gif);
        -moz-background-size: 16px 16px;
          -o-background-size: 16px 16px;
             background-size: 16px 16px;
    }
.AnchorInfo .message-box {
    font-size: 0;
    margin-left: 14px;
    color: #999999;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
}
.AnchorInfo .message-box:hover {
        color: #ff5d23;
        color: var(--colorA0);
    }
.AnchorInfo .message-box svg {
        width: 13px;
        height: 10px;
        vertical-align: middle;
        margin-right: 6px;
    }
.AnchorInfo .message-box label {
        line-height: 16px;
        font-size: 12px;
        vertical-align: middle;
        cursor: inherit;
    }
.AnchorInfo .anchor-plus {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: 12px;
    height: 12px;
    margin-right: 10px;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.anchor-plus svg {
    width: 12px;
    height: 12px;
}
.AnchorInfo .button-label {
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
}
.button-label span {
    margin-right: 4px;
}
.AnchorInfo-userPane {
    width: 380px;
    padding-bottom: 16px;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    position: absolute;
    z-index: 999;
    left: -160px;
    margin-top: 9px;
    background: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/d04bd999c8106fdbe1c8cf5e47d48040.png) top / 390px 120px no-repeat #fff;
    border-radius: 4px;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
       -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.AnchorInfo-userPane .anchor-img {
        top: 98px;
        left: 27px;
        position: absolute;
    }
.AnchorInfo-userPane .anchor-img douyu-avatar {
            border: 2px solid #fff;
        }
.AnchorInfo-userPane .userPane-content {
        margin-top: 133px;
        margin-left: 100px;
    }
.AnchorInfo-userPane .userPane-content .userPane-anchor-name {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
               -moz-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }
.AnchorInfo-userPane .userPane-content .userPane-anchor-name .anchor-level {
                width: 40px;
                height: 16px;
                background-image: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/21f279549b3b7e3fb2cfddcbad2c73c4.png);
                margin-left: 8px;
            }
.AnchorInfo-userPane .userPane-content .anchor-info2 {
            width: 250px;
            overflow: hidden;
            color: #999;
            font-size: 12px;
            margin: 8px 0 16px 0;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            word-break: break-all;
        }
.AnchorInfo-userPane .userPane-content .focus-text {
            font-size: 12px;
            color: #333;
            display: inline-block;
            margin-top: 14px;
        }
.AnchorInfo-userPane .userPane-content .anchor-focus {
            width: 90px;
            height: 30px;
        }
/**/
.Layout-Main {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 1128px;
    max-width: -webkit-calc(100vh / 0.5625);
    max-width: -moz-calc(100vh / 0.5625);
    max-width: calc(100vh / 0.5625);
    padding: 74px 70px 15px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.layout-Aside {
    width: 320px;
    margin-left: 30px;
}
.layout-Main {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 0;
       -moz-box-flex: 1;
        -ms-flex: 1 0 0px;
            flex: 1 0 0;
    width: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
demand-video-title {
    display: block;
}
.Video {
    position: relative;
    height: auto;
    padding-bottom: 0;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.Video demand-video {
    position: relative;
    background-color: #000;
}
.mini-player {
    left: 1435px;
    top: 605px;

    width: 400px !important;
    height: 225px !important;
    min-height: auto;
    overflow: visible;
    position: fixed !important;
    top: 426px;
    z-index: 99999;
    margin: 0;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}
.mini-player::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    width: 400px;
    height: 225px;
    -webkit-box-shadow: 0 0 5px #ddd;
       -moz-box-shadow: 0 0 5px #ddd;
            box-shadow: 0 0 5px #ddd;
    z-index: -1;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
.mini-player demand-video-controller-follow, .mini-player demand-video-tip, .mini-player demand-video-controller-bar, .mini-player demand-video-left-bottom-tips, .mini-player demand-video-loading, .mini-player demand-video-center-toast {
    display: none;
}
@media (min-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-resolution: 2dppx) {
    body {
        -webkit-font-smoothing: subpixel-antialiased;
    }
}
@media screen and (max-width: 1150px) {
    .Header demand-search-box {
        display: none;
    }
}
@media screen and (min-width: 1150px) {
    .Header demand-search-icon {
        display: none;
    }
}