/*! 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 */
    -webkit-text-decoration: underline;
    text-decoration: underline; /* 2 */
    text-decoration: underline;
    -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: 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;
}

/**
 * A thin layer on top of normalize.css that provides a starting point more
 * suitable for web applications.
 */

:root {
    --mantine-color-black: #000 !important;
    --mantine-color-dark-0: #aaa !important;
    --mantine-color-dark-1: #999 !important;
    --mantine-color-dark-2: #888 !important;
    --mantine-color-dark-3: #666 !important;
    --mantine-color-dark-4: #444 !important;
    --mantine-color-dark-5: #333 !important;
    --mantine-color-dark-6: #2f2f2f !important;
    --mantine-color-dark-7: #222 !important;
    --mantine-color-dark-8: #121212 !important;
    --mantine-color-dark-9: var(--mantine-color-black) !important;
    --mantine-color-gray-0: #fff !important;
    --mantine-color-gray-1: #fbfbfb !important;
    --mantine-color-gray-2: #f5f5f5 !important;
    --mantine-color-gray-3: #ddd !important;
    --mantine-color-gray-4: #d1d1d1 !important;
    --mantine-color-gray-5: #bbb !important;
    --mantine-color-gray-6: #aeaeae !important;
    --mantine-color-gray-7: #9f9f9f !important;
    --mantine-color-gray-8: #8f8f8f !important;
    --mantine-color-gray-9: #6f6f6f !important;
    --mantine-color-dark-blue-0: #f5f6fa !important;
    --mantine-color-dark-blue-1: #ebecf0 !important;
    --mantine-color-dark-blue-2: #dcdde5 !important;
    --mantine-color-dark-blue-3: #848699 !important;
    --mantine-color-dark-blue-4: #5a5c6b !important;
    --mantine-color-dark-blue-5: #3d3f4d !important;
    --mantine-color-dark-blue-6: #323340 !important;
    --mantine-color-dark-blue-7: #2b2c38 !important;
    --mantine-color-dark-blue-8: #272833 !important;
    --mantine-color-dark-blue-9: #1d1e23 !important;
    --mantine-color-orange-0: #ff7d23 !important;
    --mantine-color-orange-1: #ff7d23 !important;
    --mantine-color-orange-2: #ff5d23 !important;
    --mantine-color-orange-3: #ff4823 !important;
    --mantine-color-orange-4: #df3b00 !important;
    --mantine-color-orange-5: #bb3000 !important;
    --mantine-color-orange-6: #992800 !important;
    --mantine-color-orange-7: #802200 !important;
    --mantine-color-orange-8: #661b00 !important;
    --mantine-color-orange-9: #350e00 !important;
    --mantine-color-red: #ff2f00 !important;

    --mantine-color-orange-filled: var(--mantine-color-orange-2) !important;
}

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

    --fontColor: var(--text-color);
}

/* Progressive enhancement for browsers that support rgb(from ...) syntax */

@supports (color: rgb(from white r g b / 50%)) {
}

:root {
    --mantine-font-family: -apple-system, 'Segoe UI Emoji', 'Microsoft Yahei',
        sans-serif;
    --color-main: #ff5d23;
    --color-text-gray: #666;
    --header-height: 60px;
    --header-z-index: 100;
    --aside-width: 240px;
    --aside-width-shrink: 48px;
    --aside-z-index: 3000;
    --transition-duration: 0.2s;
    --mantine-line-height: 1.5;
    /* offset for common header height*/
    --modal-y-offset: var(--header-height);
    --animate-duration: 0.3s;
    --box-shadow-default: 0 0 5px rgba(128, 136, 147, 0.3);
    --min-layout-width: 996px;
    --max-layout-width: 2560px;
    --page-border-radius: 8px;
    /* theme default*/
    --page-background-color: var(--mantine-color-dark-blue-0);
    --page-box-shadow: 0 0 16px rgba(0, 0, 0, 0.05);
    --popover-box-shadow: 0 0 16px rgba(0, 0, 0, 0.12);
    --text-color: var(--mantine-color-dark-5);
    --text-light-color: var(--mantine-color-dark-3);
    --sub-text-color: var(--mantine-color-dark-1);
    /* 前景背景色主色 */
    --front-background-color: var(--mantine-color-gray-0);
    /* 前景背景色辅色 */
    --front-sub-background-color: var(--mantine-color-gray-2);
    /* Fallback for browsers that don't support rgb(from ...) syntax */
    --front-third-background-color: var(--mantine-color-gray-4);
    --front-border-color: var(--mantine-color-gray-3);
    --front-tag-background-color: var(--mantine-color-dark-blue-1);
    --header-background: var(--page-background-color);
    /* Fallback using opacity for browsers that don't support rgb(from ...) syntax */
    --transformed-front-background-color: var(--front-background-color);
    --extreamly-color: var(
        --mantine-color-gray-0
    );
    /* 用于极端场景的颜色，日间白色 */
}

@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {
:root {
    --front-third-background-color: rgb(
            from var(--mantine-color-dark-9) r g b / 4%
        );
    --front-border-color: rgb(from var(--mantine-color-dark-9) r g b / 10%);
    --transformed-front-background-color: rgb(
            from var(--front-background-color) r g b / 80%
        );
}
}

/* theme dark*/

:root[data-mantine-color-scheme='dark'] {
        --page-background-color: var(--mantine-color-dark-blue-9);
        --page-box-shadow: 0 0 20px rgba(0, 0, 0, 0.04);
        --popover-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
        --text-color: var(--mantine-color-gray-3);
        --text-light-color: var(--mantine-color-gray-7);
        --sub-text-color: var(--mantine-color-gray-9);
        --front-background-color: var(--mantine-color-dark-blue-8);
        --front-sub-background-color: var(--mantine-color-dark-blue-6);
        /* Fallback for browsers that don't support rgb(from ...) syntax */
        --front-third-background-color: var(--mantine-color-dark-blue-4);
        --front-border-color: var(--mantine-color-dark-blue-6);
        --front-tag-background-color: var(--mantine-color-dark-blue-7);
        /* Fallback using opacity for browsers that don't support rgb(from ...) syntax */
        --transformed-front-background-color: var(--front-background-color);
        --extreamly-color: var(
        --mantine-color-dark-9
    );
        /* 用于极端场景的颜色，夜间黑色 */
}

@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {
:root[data-mantine-color-scheme='dark'] {
        --front-third-background-color: rgb(
            from var(--mantine-color-gray-7) r g b / 10%
        );
        --front-border-color: rgb(from var(--mantine-color-gray-7) r g b / 10%);
        --transformed-front-background-color: rgb(
            from var(--front-background-color) r g b / 80%
        );
    }
}

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: var(--text-color);
    background-color: var(--page-background-color);
    -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;
    color: inherit;
    line-height: inherit;
    background: transparent;
}

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: var(--text-color);
    -webkit-text-decoration: none;
    text-decoration: none;
    cursor: pointer;
    -webkit-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;
}

@-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%);
    }
}

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

    to {
        -webkit-transform: translateY(0%);
           -moz-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%);
    }
}

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

    to {
        -webkit-transform: translateY(0%);
           -moz-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;
    }
}

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

    to {
        -webkit-transform: translateY(0%);
           -moz-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);
    }
}

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

    to {
        -webkit-transform: translate(0, 0);
           -moz-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%);
    }
}

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

    to {
        -webkit-transform: translateY(0%);
           -moz-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%);
    }
}

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

    to {
        -webkit-transform: translateY(0%);
           -moz-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%);
    }
}

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

    to {
        -webkit-transform: translateX(0%);
           -moz-transform: translateX(0%);
                transform: translateX(0%);
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-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;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.Icon-Change {
    width: 13px;
    height: 11px;
    vertical-align: -1px;
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-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;
}

.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;
    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;
    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);
            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;
            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;
    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: 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);
            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;
    -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);
            transform: translate(-50%, -50%) scale(1);
}

demand-card {
    overflow: hidden;
    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%);
            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;
    -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;
}

.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;
}

: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);
    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;
    -webkit-filter: drop-shadow(var(--popover-box-shadow));
            filter: drop-shadow(var(--popover-box-shadow));
}

.LoginInfo-avatar {
    display: block;
    overflow: hidden;
    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;
    border-radius: 3em;
    -webkit-transform: translate(50%, 0);
       -moz-transform: translate(50%, 0);
        -ms-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%);
            transform: translate(0, 50%);
    white-space: nowrap;
    width: 25px;
    background: #ff5d23;
    background: var(--colorA0);
    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 var(--front-border-color);
}

.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;
    border-radius: 4px;
    background-color: var(--front-background-color);
    -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);
            transform: scale(1.8);
    top: 24px;
    -webkit-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;
    border-radius: 100%;
}

.LoginInfo-panelNick {
    margin-bottom: 15px;
    color: var(--text-color);
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    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: var(--text-color);
    line-height: 20px;
    height: 20px;
}

.LoginInfo-panelLine {
    border-bottom: 1px solid var(--front-border-color);
    width: 100%;
}

.LoginInfo-panelItem {
    color: var(--text-color);
    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: var(--sub-text-color);
    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: var(--front-background-color);
    color: var(--text-light-color);
    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);
            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);
            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: none;
            box-shadow: none;
    -webkit-box-shadow: initial;
            box-shadow: initial;
    color: #fff;
    color: var(--colorC0);
}

.Header[active='author'] {
    position: relative;
}

.Header.is-Fix {
    position: fixed;
    background: var(--front-background-color);
    color: var(--text-light-color);
    -webkit-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;
            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/e803f10fc4a96812dd8ea0a76d7b280e.png) center/cover no-repeat;
}

[mode='transparent'] .Logo {
    background: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/c87c6c8958562fe96af98d4309dc4df1.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 var(--front-border-color);
}

.Footer {
    background: #3f3f3f;
    text-align: center;
    padding: 20px 0;
    color: #bbb;
    margin-top: 64px;
    -webkit-align-self: stretch;
        -ms-flex-item-align: stretch;
            align-self: stretch;
}

.Footer a {
    color: #bbb;
    vertical-align: middle;
}

.Footer h4 {
    text-align: left;
    font-size: 16px;
    color: #fff;
    margin-bottom: 20px;
}

.Footer-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-content: space-between;
        -ms-flex-line-pack: justify;
            align-content: space-between;
    margin-bottom: 50px;
}

.Footer-links {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.Footer-links ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-content: space-between;
        -ms-flex-line-pack: justify;
            align-content: space-between;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

.Footer-links li {
    height: 40px;
    display: inline-block;
    width: 107px;
    text-align: center;
    background: #464646;
    font-size: 12px;
    line-height: 40px;
    margin: 5px;
}

.Footer-products {
    width: 475px;
    margin-left: 37px;
}

.Footer-product {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.Footer-product .Footer-scan {
    width: 100px;
    font-size: 12px;
    color: #ffffff;
}

.Footer-product .Footer-scan-text {
    display: inline-block;
    margin-top: 15px;
}

.Footer-product .Footer-scan-img {
    height: 100px;
    display: block;
    width: 100%;
}

.Footer-product ul {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

.Footer-product li {
    height: 40px;
    width: -webkit-calc(33.33% - 10px);
    width: -moz-calc(33.33% - 10px);
    width: calc(33.33% - 10px);
    text-align: center;
    background: #464646;
    font-size: 12px;
    line-height: 40px;
    margin: 5px;
}

.Footer-box {
    padding: 4px 0;
}

.Footer-divider {
    vertical-align: middle;
    margin: 0 5px;
}

.Footer-logo {
    width: 20px !important;
    height: 20px !important;
    margin-right: 5px;
    vertical-align: bottom;
}

.Footer-friendLink {
    margin: 0 auto 42px;
    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;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    max-width: 80%;
}

.Footer-friendLink-title {
    -webkit-align-self: flex-start;
        -ms-flex-item-align: start;
            align-self: flex-start;
    color: #fff;
    font-size: 16px;
    padding-top: 8px;
    padding-bottom: 20px;
}

.Footer-friendLink-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

.Footer-friendLink-item {
    margin: 3px;
    display: block;
    width: 132px;
    height: 40px;
    padding: 0 10px;
    line-height: 40px;
    color: hsla(0, 0%, 100%, 0.6);
    text-align: center;
    background: #464646;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body {
    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;
    overflow-y: scroll !important;
}

.Layout-Main {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin-top: 62px;
    padding-bottom: 40px;
}

.layout-Main {
    display: block;
    width: 1286px;
    margin: 0 auto;
}

demand-omnibus-banner {
    display: block;
    height: 240px;
}

.Omnibus-Main {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.Omnibus-Aside {
    width: 246px;
    margin-left: 14px;
}

.Omnibus-Tabs {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.Omnibus-Tabs::part(scrollbar) {
    overflow: hidden;
    background: transparent;
    border-bottom: 1px solid var(--front-border-color);
}

.Omnibus-Tabs.is-empty::part(scrollbar) {
    border-bottom: 0;
}

.Omnibus-TabItem {
    line-height: 63px;
    font-size: 16px;
    font-weight: 700;
    position: relative;
    top: 1px;
    margin-right: 62px;
    color: var(--text-light-color);
}

.Omnibus-TabItem.is-hidden {
    display: none;
}

.Omnibus-TabItem.is-active {
    /* 变量来自js传入 */
    color: var(--color);
    border-bottom: 3px solid currentColor;
}

.Omnibus-TabContentWrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.Omnibus-TabContent {
    width: 0;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.Omnibus-Filters {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin: 20px 0;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: var(--sub-text-color);
}

.Omnibus-Filters button {
    /* 变量来自js传入 */
    color: var(--text-light-color);
    border: 1px solid var(--front-border-color);
    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;
    padding: 6px 16px;
    margin: 0 14px 0 0;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
}

.Omnibus-Filters button.is-active {
    /* 变量来自js传入 */
    color: var(--color);
    border-color: currentColor;
}

.Omnibus-Filters button svg {
    margin-right: 8px;
}

.Omnibus-CoverList {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    margin-top: -9px;
    margin-left: -9px;
}

.Omnibus-TabContent .Omnibus-Cover {
    margin: 9px 0 15px 9px;
    width: -webkit-calc(25% - 9px);
    width: -moz-calc(25% - 9px);
    width: calc(25% - 9px);
}

.Omnibus-TabContent.is-full .Omnibus-Cover {
    width: -webkit-calc(20% - 9px);
    width: -moz-calc(20% - 9px);
    width: calc(20% - 9px);
}

.Omnibus-Error {
    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;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-top: 200px;
}

.Omnibus-ErrorPlaceholder {
    width: 185px;
    height: 109px;
    background: url(https://shark2.douyucdn.cn/front-publish/demand-v3-master/69ae737e22c0b3cbab1fec7be7a02c76.png) center/cover no-repeat;
}

.Omnibus-ErrorMessage {
    margin: 23px 0;
}

@media (min-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (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;
    }
}