.component-switch.ant-switch {
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
    font-variant: tabular-nums;
    list-style: none;
    font-feature-settings: "tnum";
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 32px;
    height: 18px;
    line-height: 16px;
    vertical-align: middle;
    background-color: #666;
    border: 1px solid transparent;
    border-radius: 50px;
    cursor: pointer;
    transition: all .2s;
    user-select: none
}

.component-switch.ant-switch .ant-switch-inner {
    display: block;
    margin-right: 6px;
    margin-left: 24px;
    color: #fff;
    font-size: 12px
}

.component-switch.ant-switch .ant-switch-loading-icon,
.component-switch.ant-switch::after {
    box-sizing: border-box;
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50px;
    background-color: #fff;
    cursor: pointer;
    transition: all .2s cubic-bezier(0.78, 0.14, 0.15, 0.86);
    content: " "
}

.component-switch.ant-switch.ant-switch-checked::after {
    left: 100%;
    margin-left: -1px;
    transform: translateX(-100%)
}

.component-switch.ant-switch::after {
    box-shadow: 0 2px 4px 0 rgba(0, 35, 11, .2)
}

.component-switch.ant-switch.ant-switch-checked {
    background-color: var(--brand);
    background-color: none
}

.component-switch.ant-switch.ant-switch-checked .ant-switch-inner {
    margin-right: 24px;
    margin-left: 6px
}

.xgplayer-is-enter:not(.seeking) .xgplayer-loadingMask {
    display: block
}

.xgplayer-loadingMask {
    background: #000;
    position: absolute;
    display: none;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99
}

.xgplayer-loadingMask .xgplayer-loadingMask-logo {
    background: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/logo_dark.b44a75f6.svg);
    background-size: cover;
    height: 100px;
    width: 295px;
    transform: translate(-50%, -50%);
    margin-top: -40px;
    position: absolute;
    left: 50%;
    top: 50%
}

.xgplayer-loadingMask .xgplayer-loadingMask-tips {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 210px;
    transform: translate(-50%, -50%);
    margin-left: 20px;
    margin-top: 10px;
    height: 1px;
    background: linear-gradient(90deg, #000, red, red, red, #000)
}

.xgplayer-loadingMask .xgplayer-loadingMask-tips:before {
    content: " ";
    display: block;
    width: 5px;
    height: 1px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    animation: enterTipsLoading 1s linear infinite
}

.xgplayer-loadingMask .xgplayer-loadingMask-speedTip {
    font-size: 14px;
    position: absolute;
    color: rgba(255, 255, 255, .6);
    line-height: 20px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin-top: 41px;
    margin-left: 22px
}

.xgplayer-loadingMask .loadingWrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.xgplayer-loadingMask .loadingWrapper .circleLoadingV2 {
    height: 40px;
    width: 40px;
    stroke: #eeee
}

@keyframes enterTipsLoading {
    0% {
        opacity: 0;
        left: 0;
        width: 3px
    }

    50% {
        opacity: 1;
        left: 50%;
        width: 5px
    }

    100% {
        opacity: 0;
        left: 100%;
        width: 3px
    }
}

.playerControlsItemContainer {
    display: flex
}

.xgplayer .xgplayer-control-item {
    position: relative;
    display: flex;
    height: 100%
}

.xgplayer .xgplayer-control-item__entry {
    color: #fff;
    fill: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    align-self: center;
    outline: none
}

.xgplayer .xgplayer-control-item__entry:hover {
    color: var(--video-opacity-100);
    fill: var(--video-opacity-100)
}

.xgplayer .xgplayer-control-item__entry:hover .xgpcPlayer_textEntry {
    opacity: 1
}

.xgplayer .xgplayer-control-item__entry .xgpcPlayer_iconEntry>svg {
    width: 100%;
    height: 100%
}

.xgplayer .xgplayer-control-item__entry .xgpcPlayer_iconEntry:hover>svg {
    opacity: 1
}

.xgplayer .xgplayer-control-item__entry .xgpcPlayer_LottieEntry,
.xgplayer .xgplayer-control-item__entry .xgpcPlayer_iconEntry {
    width: var(--player-icon-size);
    height: var(--player-icon-size)
}

.xgplayer .xgplayer-control-item__entry .xgpcPlayer_svgEntry {
    height: 100%;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .85;
    padding: 0px 3px
}

.xgplayer .xgplayer-control-item__entry .xgpcPlayer_svgEntry svg {
    height: 100%;
    width: 100%
}

.xgplayer .xgplayer-control-item__entry .xgpcPlayer_textEntry {
    display: flex;
    align-items: center;
    padding: 4px;
    height: 100%;
    opacity: .8
}

.full-screen .xgplayer .xgplayer-control-item__entry .xgpcPlayer_textEntry {
    padding: 4px 8px
}

.full-screen .xgplayer .xgplayer-control-item__entry {
    text-shadow: 0px 0px 2px var(--mask-50)
}

.xgplayer .xgplayer-control-item__popover {
    display: none;
    background-color: rgba(0, 0, 0, .8);
    position: absolute;
    bottom: var(--player-controls-height);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;
    font-size: 14px;
    color: #fff
}

.xgplayer .xgplayer-control-item__popover.isActive {
    display: block
}

.xgplayer .xgplayer-control-item.common-control-item .xgplayer-control-item__popover {
    min-width: 140px
}

.xgplayer .xgplayer-control-item.common-control-item .xgplayer-control-item__popover ul li {
    padding: 10px 36px;
    opacity: .85;
    color: #fff;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center
}

.xgplayer .xgplayer-control-item.common-control-item .xgplayer-control-item__popover ul li:hover,
.xgplayer .xgplayer-control-item.common-control-item .xgplayer-control-item__popover ul li.isActive {
    opacity: .9;
    color: var(--brand);
    cursor: pointer
}

.xgplayer .xgplayer-control-item.common-control-item .xgplayer-control-item__popover ul li:hover {
    transform-origin: center;
    transform: scale(1.14286)
}

.xgplayer .xgplayer-control-item.common-control-item .xgplayer-control-item__popover ul li:focus-visible {
    outline: none
}

.xgplayer .xgplayer-control-item.common-control-item .xgplayer-control-item__popover ul li:first-child {
    padding-top: 20px
}

.xgplayer .xgplayer-control-item.common-control-item .xgplayer-control-item__popover ul li:last-child {
    padding-bottom: 20px
}

.xgplayer .xgplayer-control-item.tip-control-item .xgplayer-control-item__popover {
    padding: 6px 12px;
    opacity: .8;
    font-size: 14px;
    color: #fff
}

.xgplayer-control-item.control_definition .fps {
    display: inline-block;
    font-size: 12px;
    border-radius: 4px;
    height: 18px;
    line-height: 16px;
    padding: 0 4px;
    opacity: .7;
    border: 1px solid rgba(255, 255, 255, .3);
    margin-left: 4px
}

.xgplayer-control-item.control_definition .xgplayer-control-item__entry:hover .fps {
    border: solid 1px rgba(249, 82, 98, .5)
}

.xgplayer-control-item.control_definition .xgplayer-control-item__popover ul li {
    line-height: 20px
}

.xgplayer-control-item.control_definition .xgplayer-control-item__popover ul li:hover .fps,
.xgplayer-control-item.control_definition .xgplayer-control-item__popover ul li.isActive .fps {
    border: solid 1px rgba(249, 82, 98, .5)
}

.xgplayer-control-item.control_definition .xgplayer-control-item__popover .autoDetails {
    margin-left: 4px;
    display: flex;
    align-items: center
}

.control_definition .specialDefinition_2k {
    display: inline-block;
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/2k-normal.4f25aa8e.svg);
    background-repeat: no-repeat;
    background-size: contain;
    height: 20px;
    width: 50px
}

.control_definition .specialDefinition_2k.short {
    height: 20px;
    width: 22px;
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/2k-short-normal.9c1a0374.svg)
}

.control_definition li.isActive .specialDefinition_2k,
.control_definition li:hover .specialDefinition_2k {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/2k-focus.4aca6dc9.svg)
}

.control_definition li.isActive .specialDefinition_2k.short,
.control_definition li:hover .specialDefinition_2k.short {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/2k-short-focus.d011c3ff.svg)
}

.control_definition .xgplayer-control-item__entry:hover .specialDefinition_2k.short {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/2k-short-focus.d011c3ff.svg)
}

.control_definition .specialDefinition_4k {
    display: inline-block;
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/4k-normal.be6ecfba.svg);
    background-repeat: no-repeat;
    background-size: contain;
    height: 20px;
    width: 50px
}

.control_definition .specialDefinition_4k.short {
    height: 20px;
    width: 22px;
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/4k-short-normal.90085514.svg)
}

.control_definition li.isActive .specialDefinition_4k,
.control_definition li:hover .specialDefinition_4k {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/4k-focus.5400ddb5.svg)
}

.control_definition li.isActive .specialDefinition_4k.short,
.control_definition li:hover .specialDefinition_4k.short {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/4k-short-focus.2352e693.svg)
}

.control_definition .xgplayer-control-item__entry:hover .specialDefinition_4k.short {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/4k-short-focus.2352e693.svg)
}

.xgplayer-control-item.control_playbackrate .xgplayer-control-item__entry:hover .fps {
    border: solid 1px rgba(249, 82, 98, .5)
}

.xgplayer-control-item.control_playbackrate .xgplayer-control-item__popover ul li:hover .fps,
.xgplayer-control-item.control_playbackrate .xgplayer-control-item__popover ul li.isActive .fps {
    border: solid 1px rgba(249, 82, 98, .5)
}

.control_volume .xgpcPlayer-slider {
    width: 50px;
    height: 158px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    outline: none
}

.control_volume .xgpcPlayer-volume-val {
    color: #fff;
    margin-bottom: 10px
}

.control_volume .xgpcPlayer-bar {
    position: relative
}

.control_volume .xgpcPlayer-bar,
.control_volume .xgpcPlayer-drag {
    display: block;
    background: #eee;
    width: 4px;
    border-radius: 2px;
    height: 100px;
    outline: none;
    cursor: pointer
}

.control_volume .xgpcPlayer-drag {
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom, #ff2583, #fe104c)
}

.control_volume .xgpcPlayer-drag:after {
    content: " ";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #fff;
    position: absolute;
    border-radius: 50%;
    left: -2px;
    top: -4px
}

.xgplayer-playing.xgplayer-inactive xg-text-track.isMoveWithCtrls {
    margin-bottom: 2%
}

.xgplayer:not(.xgplayer-pip-active) xg-text-track.isMoveWithCtrls {
    transition: margin-bottom .2s;
    margin-bottom: 68px
}

.xgplayer .xgpc-theater-control-item .xgplayer-theaterMode-directTips-wrapper {
    position: absolute;
    pointer-events: none;
    top: -34px;
    right: -50px;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .8);
    opacity: .85;
    font-size: 14px;
    color: #fff;
    font-size: 14px;
    line-height: normal
}

.xgplayer .xgpc-theater-control-item .triangle {
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top: 7px solid rgba(0, 0, 0, .8);
    opacity: .85;
    bottom: -15px;
    left: 232px;
    position: absolute
}

.xgplayer .xgpc-theater-control-item b {
    color: var(--brand)
}

#iframe-player .xgpc-theater-control-item {
    display: none
}

.xgplayer-time {
    font-size: 16px;
    line-height: var(--player-controls-height);
    color: #fff
}

.full-screen .xgplayer-time {
    margin-left: 20px
}

.xgplayer-time .time-separator {
    margin: 0 6px;
    opacity: .75
}

.xgplayer-time .time-current {
    opacity: .9
}

.xgplayer-time .time-duration {
    opacity: .75
}

.xgplayer .xgplayer-progress {
    height: initial;
    display: flex;
    align-items: center;
    position: relative;
    min-width: 100px;
    left: 0;
    right: 0;
    top: 0;
    outline: none;
    flex: 1;
    cursor: pointer;
    transform: translateY(6px)
}

.xgplayer .xgplayer-progress-outer {
    height: 3px;
    width: 100%;
    position: relative;
    background-color: rgba(255, 255, 255, .25);
    border-radius: 0;
    margin: 8.5px 0;
    border-radius: 0px;
    cursor: pointer;
    transition: height .15s
}

.xgplayer .xgplayer-progress-btn {
    display: block;
    background: #fff;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, .5);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    left: 0;
    top: 50%;
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    pointer-events: none;
    transition: transform .15s;
    transform: translate(-50%, -50%) scale(0)
}

.xgplayer .xgplayer-progress-cache,
.xgplayer .xgplayer-progress-played {
    width: 0;
    background: rgba(255, 255, 255, .5);
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit
}

.xgplayer .xgplayer-progress-point {
    position: absolute;
    top: 0;
    background-color: #fff;
    width: 2px;
    height: 100%;
    border-radius: none;
    padding: 0
}

.xgplayer .xgplayer-progress.xgplayer-progress-mouseEnter .xgplayer-progress-outer {
    height: 5px
}

.xgplayer .xgplayer-progress.xgplayer-progress-mouseEnter .xgplayer-progress-btn {
    transform: translate(-50%, -50%) scale(1)
}

.xgplayer-thumbnail {
    position: absolute;
    pointer-events: none;
    left: 0;
    top: -100px;
    background-color: rgba(0, 0, 0, .54);
    display: flex;
    align-items: center;
    justify-content: center
}

.xgplayer-thumbnail-content {
    position: relative
}

.xgplayer-thumbnail-time {
    position: absolute;
    bottom: 4px;
    right: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1
}

.xgpc_pip_setting {
    position: relative
}

.xgpc_pip_setting .xgpcPlayer_LottieEntry svg {
    opacity: .8
}

.xgpc_pip_setting .xgpcPlayer_LottieEntry svg:hover {
    opacity: 1
}

.xgpc_pip_setting .pip-tips {
    position: absolute;
    background: #fff;
    bottom: 66px;
    padding: 10px 12px;
    right: calc(50% - 75px - 6px);
    border: 1px solid rgba(12, 13, 15, .06);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .05), 0px 12px 28px rgba(0, 0, 0, .1), inset 0px 0px 0px rgba(255, 255, 255, .12);
    border-radius: 4px;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    white-space: nowrap
}

.xgpc_pip_setting .pip-tips__triangle {
    position: absolute;
    width: 16px;
    height: 16px;
    bottom: -6px;
    left: calc(50% - 8px);
    transform: rotate(45deg);
    border-radius: 2px;
    background: #fff
}

.xgpc-player-time {
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
    z-index: 11;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px
}

.xgpc-player-time .time-current {
    color: rgba(255, 255, 255, .9)
}

.xgpc-player-time .time-separator,
.xgpc-player-time .time-duration {
    color: rgba(255, 255, 255, .7)
}

.xgplayer .ToPlayPlayerAction {
    display: flex;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(0, 0, 0, .5);
    transition: opacity .3s;
    visibility: hidden;
    opacity: 0
}

.xgplayer .ToPlayPlayerAction__top {
    display: flex;
    justify-content: space-between;
    padding: 12px 12px 0px
}

.xgplayer .ToPlayPlayerAction__top .goToDetails {
    position: relative
}

.xgplayer .ToPlayPlayerAction__top .goToDetails:hover .tips {
    display: block
}

.xgplayer .ToPlayPlayerAction__top .goToDetails .tips {
    display: none;
    text-align: center;
    padding: 6px 8px;
    white-space: nowrap;
    color: rgba(255, 255, 255, .9);
    font-size: 14px;
    line-height: 18px;
    background: rgba(0, 0, 0, .7);
    border-radius: 2px;
    position: absolute
}

.xgplayer .ToPlayPlayerAction__top svg {
    cursor: pointer;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3))
}

.xgplayer .ToPlayPlayerAction__top svg path {
    fill: #fff
}

.xgplayer .ToPlayPlayerAction__middle {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center
}

.xgplayer .ToPlayPlayerAction__middle>svg {
    height: 44px;
    width: 44px;
    cursor: pointer;
    margin: 0 20px;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    opacity: .9
}

.xgplayer .ToPlayPlayerAction__middle>svg.hide {
    visibility: hidden
}

.xgplayer .ToPlayPlayerAction__middle>svg:hover {
    opacity: 1
}

.xgplayer .ToPlayPlayerAction .xgpc-player-time {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 0
}

.xgplayer .ToPlayPlayerAction .xgplayer-progress {
    transform: translateY(8.5px)
}

.xgplayer:hover .ToPlayPlayerAction,
.xgplayer:not(.xgplayer-playing) .ToPlayPlayerAction {
    display: flex;
    visibility: visible;
    opacity: 1
}

.xgplayerContainer .xgplayer {
    font-family: inherit;
    cursor: unset
}

.new-style .xgplayerContainer .xgplayer {
    min-width: 640px;
    max-width: 1280px
}

.new-style .xgplayerContainer .xgplayer.xgpc-mini,
.new-style .xgplayerContainer .xgplayer.xgplayer-is-fullscreen {
    min-width: inherit;
    max-width: inherit
}

.xgplayerContainer .xgplayer .common-xgplayer__goHome {
    align-self: center;
    order: 20;
    margin-right: 8px;
    margin-left: 4px;
    height: 24px
}

.xgplayerContainer .xgplayer .common-xgplayer__goHome img {
    height: 24px
}

.xgplayerContainer .xgplayer.xgplayer-inactive.xgplayer-playing {
    cursor: none
}

.xgplayerContainer .xgplayer.xgplayer-inactive.xgplayer-playing .xgplayer-danmu {
    pointer-events: none
}

.xgplayerContainer .xgplayer .xg-menu {
    z-index: 1101
}

.xgplayerContainer .xgplayer .xg-panel-info {
    z-index: 10;
    padding: 16px 20px
}

.xgplayerContainer .xgplayer .xg-panel-info li {
    line-height: 17px
}

.xgplayerContainer .xgplayer .xg-panel-info li+li {
    margin-bottom: 3px
}

.xgplayerContainer .xgplayer .xgplayer-controls {
    z-index: 23;
    height: var(--player-controls-height);
    background-image: none;
    transform: translateZ(0);
    transition: transform .2s
}

.xgplayerContainer .xgplayer .xgplayer-controls .xg-right-grid {
    flex-direction: row
}

.xgplayerContainer .xgplayer .xg-inner-controls {
    transition: opacity .2s
}

.xgplayerContainer .xgplayer .xg-inner-controls::before {
    content: "";
    position: absolute;
    bottom: 0;
    height: 160px;
    width: 100%;
    display: block;
    background: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/playercontrol-bg.ab03fba5.png) repeat-x;
    background-size: 100% 100%;
    z-index: -1;
    pointer-events: none
}

.full-screen .xgplayerContainer .xgplayer .xg-inner-controls::before {
    background: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/playercontrol-fullscreen-bg.0a007ae4.png) repeat-x;
    height: 320px
}

.xgplayerContainer .xgplayer .xg-inner-controls .xg-left-grid {
    margin-left: 16px
}

.xgplayerContainer .xgplayer .xg-inner-controls .xg-right-grid {
    margin-right: 16px
}

.xgplayerContainer .xgplayer .xg-inner-controls,
.xgplayerContainer .xgplayer xg-icon {
    height: 100%
}

.xgplayerContainer .xgplayer.xgplayer-inactive .controls-autohide,
.xgplayerContainer .xgplayer.not-allow-autoplay .controls-autohide {
    opacity: 1;
    visibility: visible;
    pointer-events: unset
}

.xgplayerContainer .xgplayer.xgplayer-inactive .controls-autohide .xg-inner-controls,
.xgplayerContainer .xgplayer.not-allow-autoplay .controls-autohide .xg-inner-controls {
    opacity: 1
}

.xgplayerContainer .xgplayer.xgplayer-playing.xgplayer-inactive xg-text-track.isMoveWithCtrls {
    margin-bottom: 2%
}

.xgplayerContainer .xgplayer.xgplayer-playing.xgplayer-inactive:not(.xgpc-showControls) .xgplayer-controls:not(:hover) {
    transform: translate3d(0, 120%, 0)
}

.xgplayerContainer .xgplayer.xgplayer-playing.xgplayer-inactive:not(.xgpc-showControls) .xgplayer-controls:not(:hover) .xg-inner-controls {
    opacity: 0
}

.xgplayerContainer .xgplayer .xgplayer-progress-played {
    background-color: #ff3d5e
}

.xgplayerContainer .xgplayer .xg-top-bar,
.xgplayerContainer .xgplayer .xg-left-bar,
.xgplayerContainer .xgplayer .xg-right-bar {
    pointer-events: none
}

.xgplayerContainer .xgplayer .xg-pos {
    left: 0;
    right: 0
}

.xgplayerContainer .xgplayer .xg-center-grid {
    padding: 0;
    top: initial;
    bottom: 100%
}

.xgplayerContainer .xgplayer .xgplayer-start {
    z-index: 11
}

.playerControlsItemContainer+.playerControlsItemContainer>div {
    margin-left: 12px
}

.full-screen .playerControlsItemContainer+.playerControlsItemContainer>div {
    margin-left: 16px
}

.common-xgplayer__LBTips {
    display: flex;
    align-items: center;
    position: absolute;
    height: 32px;
    bottom: 62px;
    left: 8px;
    z-index: 10;
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    background-color: rgba(0, 0, 0, .8);
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 50%, 0);
    transition: all .2s, width 1.2s;
    z-index: -1
}

.xgplayer-fullscreen-active .common-xgplayer__LBTips,
.xgplayer-cssfullscreen-active .common-xgplayer__LBTips {
    z-index: 1303
}

.xgplayer-is-fullscreen .common-xgplayer__LBTips {
    bottom: 80px
}

.xgplayer-pip-active .common-xgplayer__LBTips {
    display: none
}

.common-xgplayer__LBTips.common-xgplayer__slideUp {
    z-index: 1101;
    z-index: 1;
    opacity: 1;
    transform: translateZ(0)
}

.common-xgplayer__LBTips span {
    color: var(--brand);
    font-family: Roboto-Regular;
    margin-left: 5px;
    margin-right: 5px;
    position: relative;
    cursor: pointer
}

.common-xgplayer__LBTips span:hover {
    color: #ff3e54
}

.common-xgplayer__LBTips span.withLeftLine {
    margin-left: 17px
}

.common-xgplayer__LBTips span.withLeftLine::before {
    content: "";
    display: inline-block;
    position: absolute;
    height: 14px;
    width: 1px;
    background-color: rgba(255, 255, 255, .25);
    top: 50%;
    left: -9px;
    transform: translateY(-50%)
}

.common-xgplayer__LBTips a {
    cursor: pointer
}

.common-xgplayer__LBTips .LBTips__gold {
    color: #ffcba6
}

.common-xgplayer__LBTips .LBTips__gold:hover {
    color: #ffbf91
}

.common-xgplayer__LBTips span:last-child {
    margin-right: 0
}

.common-xgplayer__LBTipsWrapper {
    transition: all .5s .4s
}

.common-xgplayer__LBTipsWrapper.showNext {
    transform: translate3d(0, -50%, 0)
}

.common-xgplayer__LBTips p {
    height: 32px;
    line-height: 32px;
    padding: 0 12px
}

.common-xgplayer__LBTips i {
    margin-left: -4px;
    margin-right: 12px;
    vertical-align: middle;
    cursor: pointer
}

.common-xgplayer__LBTips::before {
    color: rgba(255, 255, 255, .3)
}

.common-xgplayer__LBTips:hover::before {
    color: rgba(255, 255, 255, .7)
}

.common-xgplayer__abrCancel {
    display: inline-block;
    background-color: rgba(255, 255, 255, .9);
    color: rgba(var(--accent-content-primary), 0.85);
    padding: 1px 8px;
    border-radius: 10px;
    margin-left: 16px;
    margin-right: 3px;
    cursor: pointer
}

.common-xgplayer__Logo {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center
}

.common-xgplayer__Logo img {
    height: 100%
}

.common-xgplayer__Logo .authorName {
    opacity: .8;
    font-weight: 500;
    color: #fff
}

.xgplayer-mobile.xgplayer .common-xgplayer__LBTips {
    bottom: 54px;
    left: 10px
}

.xgplayer-fullscreen-active .xgplayerPlaceholder,
.xgplayer-fullscreen-active .xgplayerContainer,
.xgplayer-cssfullscreen-active .xgplayerPlaceholder,
.xgplayer-cssfullscreen-active .xgplayerContainer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1302
}

.xgplayer-cssfullscreen-active .xgplayerContainer .xgplayer {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1302 !important;
    padding-top: 0px !important
}

.xgplayer-cssfullscreen-active body,
.xgplayer-fullscreen-active body {
    overflow: hidden
}

.xgplayerContainer .xgplayer.xgplayer-is-fullscreen {
    z-index: 1302
}

.xgplayerContainer .xgplayer {
    position: relative;
    z-index: 1
}

.xgplayer-controls.xgplayer-pip-control-layout .xgplayer-subtitle {
    display: none
}

#xgpc-players {
    display: none
}

#toPlayPlayer {
    overflow: visible
}

#toPlayPlayer .xg-inner-controls {
    visibility: hidden
}

.with-top-bar .xg-top-bar {
    left: 20px;
    right: 20px;
    z-index: 23
}

.with-top-bar .xg-top-bar,
.with-top-bar .top-bar-autohide {
    pointer-events: all !important;
    justify-content: space-between
}

.with-top-bar .xg-top-bar::before,
.with-top-bar .top-bar-autohide::before {
    content: "";
    position: absolute;
    top: 0;
    height: 160px;
    width: 100%;
    display: block;
    z-index: -1;
    pointer-events: none;
    background: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/playercontrol-fullscreen-top-bg.533f1da3.png) repeat-x
}

.xgplayerPlaceholder {
    min-width: 640px
}

.payQRCode {
    display: inline-block;
    position: relative;
    vertical-align: top
}

.payQRCode-image {
    width: 100%
}

.payQRCode-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0
}

.payQRCode-error {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(247, 247, 247, .94);
    border-radius: 4px
}

.payQRCode-error>p {
    margin-top: 46px;
    margin-bottom: 10px;
    line-height: 20px;
    color: #666;
    font-size: 14px
}

.payQRCode-error button {
    height: 34px;
    padding: 0 10px;
    border-radius: 4px;
    border: solid .5px rgba(0, 0, 0, .11);
    line-height: 34px;
    color: #ff142b;
    font-size: 14px;
    font-weight: 500
}

.payQRCode-error .refresh-icon {
    width: 16px;
    height: 16px;
    margin-right: 2px;
    vertical-align: sub
}

.episodePay-dialog .Dialog__wrap {
    position: absolute;
    width: 662px;
    right: initial;
    bottom: initial;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, .1);
    border-radius: 4px
}

.episodePay-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 24px;
    border-bottom: 1px solid #eaeaea;
    color: #000;
    font-size: 20px;
    font-weight: 500
}

.episodePay-dialog-close {
    width: 20px;
    height: 20px;
    cursor: pointer;
    background: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/close.9028e84a.svg) 0 0/contain;
    cursor: pointer
}

.episodePay-dialog-content {
    display: flex;
    padding: 40px 58px
}

.episodePay-dialog-left {
    text-align: center
}

.episodePay-dialog-left .payQRCode {
    width: 152px;
    height: 152px;
    border-radius: 4px;
    background-color: #f7f7f7;
    border: 1px solid rgba(151, 151, 151, .1);
    padding: 4px
}

.episodePay-dialog-left .payQRCode-image {
    height: 100%
}

.episodePay-dialog-left .payways {
    margin-top: 14px;
    font-size: 14px;
    color: #666
}

.episodePay-dialog-right {
    position: relative;
    margin-left: 28px;
    padding-left: 28px
}

.episodePay-dialog-right::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 182px;
    border-left: 1px solid #eaeaea
}

.episodePay-dialog-right .reason {
    color: var(--content-primary);
    font-size: 24px;
    font-weight: 500;
    line-height: 34px
}

.episodePay-dialog-right .reason+.reason {
    margin-top: 4px
}

.episodePay-dialog-right .icon-rmb {
    margin-right: 4px;
    font-size: 12px
}

.episodePay-dialog-right .cost {
    position: relative;
    display: inline-block;
    height: 60px;
    line-height: 70px;
    color: #e09865;
    font-weight: 600;
    font-size: 42px;
    font-family: "ByteNumber-Bold"
}

.episodePay-dialog-cost {
    margin-top: 16px
}

.episodePay-dialog-discount {
    margin-left: 4px;
    font-size: 12px;
    color: #e09865
}

.episodePay-dialog-discount del {
    margin-left: 4px;
    text-decoration: line-through #e09865
}

.episodePay-dialog-tips {
    margin-top: 18px;
    font-size: 14px;
    color: #666
}

.vipPayDialog .Dialog__wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    right: initial;
    bottom: initial;
    transform: translate(-50%, -50%);
    width: 662px;
    border-radius: 4px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, .1);
    background-color: #fff
}

.vipPayDialog-close {
    position: absolute;
    right: 24px;
    top: 24px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/close.9028e84a.svg) 0 0/contain;
    outline: none;
    border: none
}

.vipPayDialog-head {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eaeaea
}

.vipPayDialog-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-right: 12px
}

.vipPayDialog-avatar+div {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.vipPayDialog-username {
    line-height: 20px;
    font-size: 14px;
    color: #000;
    font-weight: 500
}

.vipPayDialog-userStatus {
    margin-top: 4px;
    font-size: 12px;
    line-height: 17px
}

.vipPayDialog-content {
    display: flex;
    padding-top: 30px;
    padding-bottom: 60px
}

.vipPayDialog-left {
    flex: 1;
    position: relative;
    padding-left: 42px;
    padding-right: 28px
}

.vipPayDialog-left .agreement {
    margin-top: 12px;
    font-size: 12px;
    color: #666
}

.vipPayDialog-left .agreement a {
    margin-left: 3px;
    color: #e09865;
    font-weight: 500
}

.vipPayDialog-left .agreement a:hover {
    color: #cc9865
}

.vipPayDialog-title {
    color: #000;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    height: 22px;
    outline: none
}

.vipPayDialog-swiper {
    width: 370px;
    height: 168px;
    overflow: hidden
}

.vipPayDialog-swiperWrapper {
    display: flex
}

.vipPayDialog-payItems {
    display: flex;
    padding-top: 16px
}

.vipPayDialog-payItems .icon-rmb {
    margin-right: 3px;
    font-size: 16px
}

.vipPayDialog-payItems .cost {
    position: relative;
    height: 46px;
    margin-top: 15px;
    line-height: 49px;
    overflow-y: hidden;
    color: #e09865;
    font-size: 42px;
    font-family: "ByteNumber-Bold"
}

.vipPayDialog-payItem {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 114px;
    height: 152px;
    padding: 24px 0;
    border-radius: 4px;
    border: 1px solid #eaeaea;
    cursor: pointer;
    outline: none;
    margin-right: 12px
}

.vipPayDialog-payItem:last-child {
    margin-right: 0
}

.vipPayDialog-payItem .vipPayDialog-tip {
    padding-top: 6px;
    font-size: 12px;
    color: var(--content-secondary)
}

.vipPayDialog-payItem delete {
    display: inline;
    text-decoration: line-through var(--content-secondary)
}

.vipPayDialog-payItem.active {
    color: #e09865;
    background: rgba(245, 184, 122, .12);
    border: 1px solid rgba(204, 153, 102, .54)
}

.vipPayDialog-payItem.active delete {
    color: #e09865;
    text-decoration-color: #e09865
}

.vipPayDialog-payItem label {
    position: absolute;
    left: -1px;
    top: -12px;
    padding: 0 6px;
    height: 24px;
    line-height: 24px;
    border-radius: 1px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    color: #ffcba6;
    background: linear-gradient(107.88deg, #686868 8%, #3F3D42 84%);
    overflow: hidden;
    font-size: 12px;
    text-align: center;
    font-weight: 500
}

.vipPayDialog-swiperBtn {
    position: absolute;
    top: 85px;
    padding: 22px 10px;
    cursor: pointer;
    outline: none
}

.vipPayDialog-swiperBtn.swiper-button-disabled {
    cursor: not-allowed
}

.vipPayDialog-swiperBtn.swiper-button-disabled svg path {
    fill: #eaeaea
}

.vipPayDialog-swiperBtnPrev {
    left: 14px;
    transform: rotate(180deg)
}

.vipPayDialog-swiperBtnNext {
    right: 0
}

.vipPayDialog-swiperBtn svg {
    display: block
}

.vipPayDialog-deadline {
    color: #000;
    font-size: 14px;
    font-weight: 600
}

.vipPayDialog-right {
    position: relative;
    box-sizing: content-box;
    width: 152px;
    padding-left: 28px;
    padding-right: 42px;
    text-align: center
}

.vipPayDialog-right::before {
    content: "";
    position: absolute;
    border-left: 1px solid #eaeaea;
    height: 222px;
    left: 0;
    top: 0
}

.vipPayDialog-right .cost {
    margin-left: 4px;
    line-height: 22px;
    color: #e09865;
    font-size: 20px;
    font-family: "ByteNumber-Bold"
}

.vipPayDialog-right .cost .icon-rmb {
    font-size: 12px
}

.vipPayDialog-right .cost>span {
    padding-left: 2px;
    padding-top: 4px
}

.vipPayDialog-right .payQRCode {
    width: 100%;
    height: 100%;
    background: #f7f7f7;
    border: 1px solid rgba(151, 151, 151, .1);
    padding: 4px;
    border-radius: 4px
}

.vipPayDialog-right .payQRCode-blur:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .9);
    background-color: rgba(247, 247, 247, .94)
}

.vipPayDialog-right .payQRCode-image {
    height: 100%
}

.vipPayDialog-right .payways {
    margin-top: 12px;
    font-size: 12px;
    color: #666
}

.vipPayDialog-qrcodeContainer {
    position: relative;
    margin-top: 16px;
    width: 152px;
    height: 152px
}

.vipPayDialog-qrcodeSuccess {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 4px
}

.vipPayDialog-qrcodeSuccess img {
    position: absolute;
    width: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.vipPayDialog-vip .vipPayDialog-vip .vipPayDialog-avatar {
    border: 2px solid #c96
}

.vipPayDialog-vip .vipPayDialog-username,
.vipPayDialog-vip .vipPayDialog-userStatus {
    color: #e09865
}

.xgplayer .xgplayer-video-mask {
    display: none
}

.xgplayer.xgpc-mini .playEndingContainer {
    display: none
}

.xgplayer.xgplayer-ended>video {
    filter: blur(10px)
}

.xgplayer.xgplayer-ended .playEndingContainer,
.xgplayer.xgplayer-ended .xgplayer-video-mask {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 22
}

.xgplayer.xgplayer-ended .playEndingContainer {
    height: calc(100% - 62px);
    z-index: 22
}

.xgplayer.xgplayer-ended .xgplayer-video-mask {
    height: 100%;
    display: block;
    background: rgba(0, 0, 0, .8);
    z-index: 9
}

.xgplayer-control-item.control_collection .xgplayer-control-item__entry {
    color: var(--video-opacity-90);
    padding: 4px 8px
}

.xgplayer-control-item.control_collection .xgplayer-control-item__entry:hover {
    color: var(--video-opacity-100)
}

.xgplayer-extraConfig-popover .xgplayer-extraConfig-wrap {
    width: 164px;
    padding: 16px 20px
}

.xgplayer-extraConfig-popover .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 20px
}

.xgplayer-extraConfig-popover .row+.row {
    margin-top: 12px
}

.full-screen-author {
    border: 1px solid var(--video-opacity-25);
    border-radius: 28px;
    display: flex;
    align-items: center;
    height: 36px;
    border-radius: 36px;
    padding: 0 6px;
    transition: all .1s ease-in;
    color: rgba(255, 255, 255, .9);
    font-size: 14px;
    cursor: pointer;
    position: relative
}

.full-screen-author:hover {
    background-color: var(--video-opacity-16)
}

.full-screen-author .followButton {
    margin-left: 8px;
    margin-right: 6px
}

.full-screen-author .followButton.follow {
    color: var(--video-opacity-50)
}

.full-screen-author:hover .full-screen-author__popup {
    display: block
}

.full-screen-author__popup {
    display: none;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -56px;
    text-align: center;
    direction: rtl
}

.full-screen-author__popup>span {
    display: inline-block;
    color: var(--video-opacity-90);
    background: rgba(38, 39, 40, .9);
    border-radius: 2px;
    font-weight: 400;
    font-size: 14px;
    padding: 6px 8px;
    white-space: nowrap
}

.fullscreen-co-create-modal {
    position: absolute;
    z-index: 30;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.fullscreen-co-create-modal__wrapper {
    position: absolute;
    right: 0;
    top: 0;
    width: 320px;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    display: flex;
    flex-direction: column;
    animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) fullscreen-co-create-modal__slide-in
}

.fullscreen-co-create-modal__wrapper.out {
    animation: 200ms cubic-bezier(0.4, 0, 1, 1) fullscreen-co-create-modal__slide-out
}

.fullscreen-co-create-modal__header {
    height: 59px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 5px;
    color: rgba(255, 255, 255, .9);
    font-size: 16px;
    font-weight: 500;
    padding: 0 16px
}

.fullscreen-co-create-modal__header>svg {
    cursor: pointer
}

.fullscreen-co-create-modal__content {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0
}

.fullscreen-co-create-modal__item {
    padding: 0 16px;
    display: flex;
    align-items: center
}

.fullscreen-co-create-modal__item:not(:last-child) {
    margin-bottom: 24px
}

.fullscreen-co-create-modal__item-avatar {
    margin-right: 12px
}

.fullscreen-co-create-modal__item-name {
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #fff
}

.fullscreen-co-create-modal__item-name:hover {
    color: #fff
}

.fullscreen-co-create-modal__item-role {
    color: rgba(255, 255, 255, .5);
    font-size: 13px;
    line-height: 20px
}

.fullscreen-co-create-modal__item-info {
    flex: 1;
    margin-right: 12px;
    min-width: 0
}

.fullscreen-co-create-modal__item-follow.xg-button-ghost-weak .xg-button-loading-icon {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/loading.de0acf6d.png)
}

@keyframes fullscreen-co-create-modal__slide-in {
    0% {
        right: -320px
    }

    100% {
        right: 0
    }
}

@keyframes fullscreen-co-create-modal__slide-out {
    0% {
        right: 0
    }

    100% {
        right: -320px
    }
}

.fullscreen-co-create {
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 36px;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, .9);
    font-size: 14px;
    font-weight: 500;
    padding: 0 15px;
    cursor: pointer;
    transition: background-color 200ms ease, outline 200ms ease, box-shadow 200ms ease;
    position: relative
}

.fullscreen-co-create:hover {
    background-color: var(--video-opacity-16)
}

.fullscreen-co-create__icon {
    margin-right: 4px
}

.fullscreen-co-create__arrow {
    margin-left: 2px
}

.fullscreen-co-create__avatars {
    margin-right: 8px;
    display: flex;
    flex-direction: row-reverse
}

.fullscreen-co-create__avatar {
    width: 24px;
    height: 24px;
    background-size: 100% 100%;
    border-radius: 50%
}

.fullscreen-co-create__avatar:not(:first-child) {
    margin-right: -5px;
    -webkit-mask-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/avatar_mask.1fcac70e.svg);
    mask-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/avatar_mask.1fcac70e.svg)
}

.fullscreen-co-create__follow {
    margin-left: 8px
}

.fullscreen-co-create__follow.follow {
    color: var(--video-opacity-50)
}

.fullscreen-co-create:hover .fullscreen-co-create__popup {
    display: block
}

.fullscreen-co-create__popup {
    display: none;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -56px;
    text-align: center;
    direction: rtl
}

.fullscreen-co-create__popup>span {
    display: inline-block;
    color: var(--video-opacity-90);
    background: rgba(38, 39, 40, .9);
    border-radius: 2px;
    font-weight: 400;
    font-size: 14px;
    padding: 6px 8px;
    white-space: nowrap
}

.full-screen-header-author {
    margin-left: 64px !important;
    display: flex;
    align-items: center
}

.full-screen-header-author>*:not(:last-child) {
    margin-right: 8px
}

.full-screen-header-title .xgplayer-control-item__entry {
    cursor: unset
}

.full-screen-header-title .xgplayer-control-item__entry:hover {
    color: var(--video-opacity-90)
}

.full-screen-header-title .xgpcPlayer_iconEntry {
    font-weight: 500;
    font-size: 18px;
    color: var(--video-opacity-90);
    text-shadow: 0px 0px 2px var(--mask-50)
}

.xgplayer .xgpc-mini-layer {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8)) !important;
    z-index: 11
}

.xgplayer .xgpc-mini-layer .xgpc-player-time {
    position: absolute;
    bottom: 10px;
    left: 10px
}

.xgplayer .xgpc-mini-header {
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 14px;
    padding: 10px 43px 0 8px;
    z-index: 22
}

.xgplayer .xgpc-mini-drag-layer {
    cursor: move;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.xgplayer .xgpc-mini-disable-tips {
    display: none;
    position: absolute;
    padding: 6px 12px;
    white-space: nowrap;
    bottom: -44px;
    right: -30px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .8);
    color: #fff
}

.xgplayer .xgpc-mini-disable-btn {
    position: relative
}

.xgplayer .xgpc-mini-disable-btn input {
    display: none
}

.xgplayer .xgpc-mini-disable-btn input+label {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center
}

.xgplayer .xgpc-mini-disable-btn input+label::before {
    content: "";
    background-color: transparent;
    border-radius: 2px;
    border: solid 1px #cdcdcd;
    width: 12px;
    height: 12px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 12px;
    margin-right: 4px
}

.xgplayer .xgpc-mini-disable-btn input:checked+:after {
    content: "";
    position: absolute;
    width: 4px;
    height: 8px;
    border-color: #f51642;
    border-style: solid;
    border-width: 0px 2px 2px 0px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 4px;
    top: 6px
}

.xgplayer .xgpc-mini-disable-btn:hover {
    color: #f51642
}

.xgplayer .xgpc-mini-disable-btn:hover input+label::before {
    border-color: #f51642
}

.xgplayer .xgpc-mini-disable-btn:hover .xgpc-mini-disable-tips {
    display: block
}

.xgplayer .xgpc-mini-cancel-btn {
    position: absolute;
    cursor: pointer;
    top: 10px;
    right: 10px
}

.xgplayer .xgpc-mini-play-icon {
    cursor: pointer;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.xgpc-mini:hover .xgpc-mini-layer {
    display: block
}

.xgplayer.xgpc-mini .xgplayer-controls,
.xgplayer.xgpc-mini .xgplayer-start,
.xgplayer.xgpc-mini .xgplayer-start.interact {
    display: none
}

.xgplayer.with-fullscreen-co-create .xgplayer-controls,
.xgplayer.with-fullscreen-co-create .xg-top-bar {
    display: none
}

.xgplayer-control-item.control_play_loop .fps {
    display: inline-block;
    font-size: 12px;
    border-radius: 4px;
    height: 18px;
    line-height: 16px;
    padding: 0 4px;
    opacity: .7;
    border: 1px solid rgba(255, 255, 255, .3);
    margin-left: 4px
}

.xgplayer-control-item.control_play_loop .xgplayer-control-item__entry:hover .fps {
    border: solid 1px rgba(249, 82, 98, .5)
}

.xgplayer-control-item.control_play_loop .xgplayer-control-item__popover ul li {
    line-height: 20px
}

.xgplayer-control-item.control_play_loop .xgplayer-control-item__popover ul li:hover .fps,
.xgplayer-control-item.control_play_loop .xgplayer-control-item__popover ul li.isActive .fps {
    border: solid 1px rgba(249, 82, 98, .5)
}

.xgplayer-control-item.control_play_loop .xgplayer-control-item__popover .autoDetails {
    margin-left: 4px;
    display: flex;
    align-items: center
}

.xgplayer-control-item.control_playnext .xgplayer-next-preview {
    display: flex;
    width: 398px;
    height: 94px;
    border-radius: 4px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .8);
    pointer-events: none;
    position: absolute;
    transform: translate(2px, -100%)
}

.xgplayer-control-item.control_playnext .xgplayer-next-preview.longVideo {
    width: 328px
}

.xgplayer-control-item.control_playnext .xgplayer-next-preview-left {
    position: relative;
    width: 168px;
    height: 100%
}

.xgplayer-control-item.control_playnext .xgplayer-next-preview-cover {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.xgplayer-control-item.control_playnext .xgplayer-next-preview-duration {
    font-size: 12px;
    bottom: 4px;
    right: 4px;
    line-height: 21px;
    height: 21px;
    padding: 0 8px;
    position: absolute;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .6);
    color: #fff
}

.xgplayer-control-item.control_playnext .xgplayer-next-preview-right {
    flex: 1;
    padding: 0 8px;
    display: flex;
    justify-content: center;
    flex-direction: column
}

.xgplayer-control-item.control_playnext .xgplayer-next-preview-tips {
    font-size: 12px;
    color: #fff;
    opacity: .5;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    line-height: 1;
    margin-bottom: 6px
}

.xgplayer-control-item.control_playnext .xgplayer-next-preview-title {
    font-size: 14px;
    line-height: 24px;
    color: #fff;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
    white-space: initial;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word
}

.iframe-player {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center
}

.iframe-player .poster {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center
}

.iframe-player .poster .icon-icon_playing {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .6);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1
}

.iframe-player .poster .icon-icon_playing::before {
    color: #fff;
    font-size: 20px;
    position: relative;
    left: 2px
}

.iframe-player .xgplayerContainer {
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute
}

.iframe-player .xgplayerContainer .xgplayer {
    z-index: auto;
    overflow: hidden
}

.iframe-player .xgplayerContainer .xgplayer .xgplayer-video-mask {
    z-index: 1
}

.iframe-player .xgplayerContainer .xgplayer-theaterMode {
    display: none
}

.iframe-player .xgplayerContainer .common-xgplayer__Logo {
    z-index: 0
}

.iframe-player .xgplayerContainer .xgplayer-poster {
    z-index: 10
}

.iframe-player .xgplayerContainer .xgplayer-nostart .xgplayer-controls {
    display: flex
}

.iframe-player.show-share-cover .xgplayer .xgplayer-controls {
    display: none !important
}

.iframe-player.is-fullscreen .recommend-cover.show-recommend {
    bottom: 80px
}

.iframe-player.play-ended .share-cover {
    background-color: transparent
}

.iframe-player.iframe-in-mobile .xgplayerContainer .xgplayer-poster {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center
}

.iframe-player.iframe-in-mobile .xgplayerContainer .common-xgplayer__LBTips {
    bottom: 36px;
    left: 0
}

@media screen and (min-width: 960px) {

    .iframe-player.iframe .cover-header .info .title,
    .iframe-player.is-fullscreen .cover-header .info .title {
        font-size: 20px
    }

    .iframe-player.iframe .cover-header .info .author .author-avatar,
    .iframe-player.is-fullscreen .cover-header .info .author .author-avatar {
        width: 30px !important;
        height: 30px !important
    }

    .iframe-player.iframe .cover-header .info .author .author-name,
    .iframe-player.is-fullscreen .cover-header .info .author .author-name {
        font-size: 20px
    }

    .iframe-player.iframe .cover-header .share .icon-share2::before,
    .iframe-player.is-fullscreen .cover-header .share .icon-share2::before {
        font-size: 25px
    }

    .iframe-player.iframe .cover-header .share .share-text,
    .iframe-player.is-fullscreen .cover-header .share .share-text {
        font-size: 20px
    }

    .iframe-player.iframe .recommend .header .title,
    .iframe-player.is-fullscreen .recommend .header .title {
        font-size: 20px
    }

    .iframe-player.iframe .recommend .header .icon-close::before,
    .iframe-player.is-fullscreen .recommend .header .icon-close::before {
        font-size: 20px
    }

    .iframe-player.iframe .recommend .HorizontalFeedCard .HorizontalFeedCard__title>span,
    .iframe-player.is-fullscreen .recommend .HorizontalFeedCard .HorizontalFeedCard__title>span {
        font-size: 16px
    }

    .iframe-player.iframe .recommend .prev,
    .iframe-player.iframe .recommend .next,
    .iframe-player.is-fullscreen .recommend .prev,
    .iframe-player.is-fullscreen .recommend .next {
        width: 32px;
        height: 32px;
        font-size: 16px;
        top: 47.5px;
        bottom: 64.8px
    }

    .iframe-player.iframe .recommend-cover.play-ended .prev,
    .iframe-player.iframe .recommend-cover.play-ended .next,
    .iframe-player.is-fullscreen .recommend-cover.play-ended .prev,
    .iframe-player.is-fullscreen .recommend-cover.play-ended .next {
        top: 30px
    }

    .iframe-player.iframe .share-cover .icon-close::before,
    .iframe-player.iframe .share-cover .share-title,
    .iframe-player.is-fullscreen .share-cover .icon-close::before,
    .iframe-player.is-fullscreen .share-cover .share-title {
        font-size: 20px
    }

    .iframe-player.iframe .share-cover .share-content,
    .iframe-player.is-fullscreen .share-cover .share-content {
        font-size: 16px
    }

    .iframe-player.iframe .share-cover .share-content .share-url,
    .iframe-player.is-fullscreen .share-cover .share-content .share-url {
        width: 333.3333333333px
    }
}

@media screen and (min-width: 1280px) {

    .iframe-player.iframe .cover-header .info .title,
    .iframe-player.is-fullscreen .cover-header .info .title {
        font-size: 22px
    }

    .iframe-player.iframe .cover-header .info .author .author-avatar,
    .iframe-player.is-fullscreen .cover-header .info .author .author-avatar {
        width: 33px !important;
        height: 33px !important
    }

    .iframe-player.iframe .cover-header .info .author .author-name,
    .iframe-player.is-fullscreen .cover-header .info .author .author-name {
        font-size: 22px
    }

    .iframe-player.iframe .cover-header .share .icon-share2::before,
    .iframe-player.is-fullscreen .cover-header .share .icon-share2::before {
        font-size: 27.5px
    }

    .iframe-player.iframe .cover-header .share .share-text,
    .iframe-player.is-fullscreen .cover-header .share .share-text {
        font-size: 22px
    }

    .iframe-player.iframe .recommend .header .title,
    .iframe-player.is-fullscreen .recommend .header .title {
        font-size: 22px
    }

    .iframe-player.iframe .recommend .header .icon-close::before,
    .iframe-player.is-fullscreen .recommend .header .icon-close::before {
        font-size: 22px
    }

    .iframe-player.iframe .recommend .HorizontalFeedCard .HorizontalFeedCard__title>span,
    .iframe-player.is-fullscreen .recommend .HorizontalFeedCard .HorizontalFeedCard__title>span {
        font-size: 18px
    }

    .iframe-player.iframe .recommend .prev,
    .iframe-player.iframe .recommend .next,
    .iframe-player.is-fullscreen .recommend .prev,
    .iframe-player.is-fullscreen .recommend .next {
        width: 36px;
        height: 36px;
        font-size: 18px;
        top: 50.25px;
        bottom: 70.4px
    }

    .iframe-player.iframe .recommend-cover.play-ended .prev,
    .iframe-player.iframe .recommend-cover.play-ended .next,
    .iframe-player.is-fullscreen .recommend-cover.play-ended .prev,
    .iframe-player.is-fullscreen .recommend-cover.play-ended .next {
        top: 30px
    }

    .iframe-player.iframe .share-cover .icon-close::before,
    .iframe-player.iframe .share-cover .share-title,
    .iframe-player.is-fullscreen .share-cover .icon-close::before,
    .iframe-player.is-fullscreen .share-cover .share-title {
        font-size: 22px
    }

    .iframe-player.iframe .share-cover .share-content,
    .iframe-player.is-fullscreen .share-cover .share-content {
        font-size: 18px
    }

    .iframe-player.iframe .share-cover .share-content .share-url,
    .iframe-player.is-fullscreen .share-cover .share-content .share-url {
        width: 375px
    }
}

@media screen and (min-width: 1680px) {

    .iframe-player.iframe .cover-header .info .title,
    .iframe-player.is-fullscreen .cover-header .info .title {
        font-size: 24px
    }

    .iframe-player.iframe .cover-header .info .author .author-avatar,
    .iframe-player.is-fullscreen .cover-header .info .author .author-avatar {
        width: 36px !important;
        height: 36px !important
    }

    .iframe-player.iframe .cover-header .info .author .author-name,
    .iframe-player.is-fullscreen .cover-header .info .author .author-name {
        font-size: 24px
    }

    .iframe-player.iframe .cover-header .share .icon-share2::before,
    .iframe-player.is-fullscreen .cover-header .share .icon-share2::before {
        font-size: 30px
    }

    .iframe-player.iframe .cover-header .share .share-text,
    .iframe-player.is-fullscreen .cover-header .share .share-text {
        font-size: 24px
    }

    .iframe-player.iframe .recommend .header .title,
    .iframe-player.is-fullscreen .recommend .header .title {
        font-size: 24px
    }

    .iframe-player.iframe .recommend .header .icon-close::before,
    .iframe-player.is-fullscreen .recommend .header .icon-close::before {
        font-size: 24px
    }

    .iframe-player.iframe .recommend .HorizontalFeedCard .HorizontalFeedCard__title>span,
    .iframe-player.is-fullscreen .recommend .HorizontalFeedCard .HorizontalFeedCard__title>span {
        font-size: 20px
    }

    .iframe-player.iframe .recommend .prev,
    .iframe-player.iframe .recommend .next,
    .iframe-player.is-fullscreen .recommend .prev,
    .iframe-player.is-fullscreen .recommend .next {
        width: 40px;
        height: 40px;
        font-size: 20px;
        top: 53px;
        bottom: 76px
    }

    .iframe-player.iframe .recommend-cover.play-ended .prev,
    .iframe-player.iframe .recommend-cover.play-ended .next,
    .iframe-player.is-fullscreen .recommend-cover.play-ended .prev,
    .iframe-player.is-fullscreen .recommend-cover.play-ended .next {
        top: 30px
    }

    .iframe-player.iframe .share-cover .icon-close::before,
    .iframe-player.iframe .share-cover .share-title,
    .iframe-player.is-fullscreen .share-cover .icon-close::before,
    .iframe-player.is-fullscreen .share-cover .share-title {
        font-size: 24px
    }

    .iframe-player.iframe .share-cover .share-content,
    .iframe-player.is-fullscreen .share-cover .share-content {
        font-size: 20px
    }

    .iframe-player.iframe .share-cover .share-content .share-url,
    .iframe-player.is-fullscreen .share-cover .share-content .share-url {
        width: 416.6666666667px
    }
}

@media screen and (min-width: 2048px) {

    .iframe-player.iframe .cover-header .info .title,
    .iframe-player.is-fullscreen .cover-header .info .title {
        font-size: 28px
    }

    .iframe-player.iframe .cover-header .info .author .author-avatar,
    .iframe-player.is-fullscreen .cover-header .info .author .author-avatar {
        width: 42px !important;
        height: 42px !important
    }

    .iframe-player.iframe .cover-header .info .author .author-name,
    .iframe-player.is-fullscreen .cover-header .info .author .author-name {
        font-size: 28px
    }

    .iframe-player.iframe .cover-header .share .icon-share2::before,
    .iframe-player.is-fullscreen .cover-header .share .icon-share2::before {
        font-size: 35px
    }

    .iframe-player.iframe .cover-header .share .share-text,
    .iframe-player.is-fullscreen .cover-header .share .share-text {
        font-size: 28px
    }

    .iframe-player.iframe .recommend .header .title,
    .iframe-player.is-fullscreen .recommend .header .title {
        font-size: 28px
    }

    .iframe-player.iframe .recommend .header .icon-close::before,
    .iframe-player.is-fullscreen .recommend .header .icon-close::before {
        font-size: 28px
    }

    .iframe-player.iframe .recommend .HorizontalFeedCard .HorizontalFeedCard__title>span,
    .iframe-player.is-fullscreen .recommend .HorizontalFeedCard .HorizontalFeedCard__title>span {
        font-size: 24px
    }

    .iframe-player.iframe .recommend .prev,
    .iframe-player.iframe .recommend .next,
    .iframe-player.is-fullscreen .recommend .prev,
    .iframe-player.is-fullscreen .recommend .next {
        width: 48px;
        height: 48px;
        font-size: 24px;
        top: 58.5px;
        bottom: 87.2px
    }

    .iframe-player.iframe .recommend-cover.play-ended .prev,
    .iframe-player.iframe .recommend-cover.play-ended .next,
    .iframe-player.is-fullscreen .recommend-cover.play-ended .prev,
    .iframe-player.is-fullscreen .recommend-cover.play-ended .next {
        top: 30px
    }

    .iframe-player.iframe .share-cover .icon-close::before,
    .iframe-player.iframe .share-cover .share-title,
    .iframe-player.is-fullscreen .share-cover .icon-close::before,
    .iframe-player.is-fullscreen .share-cover .share-title {
        font-size: 28px
    }

    .iframe-player.iframe .share-cover .share-content,
    .iframe-player.is-fullscreen .share-cover .share-content {
        font-size: 24px
    }

    .iframe-player.iframe .share-cover .share-content .share-url,
    .iframe-player.is-fullscreen .share-cover .share-content .share-url {
        width: 500px
    }
}

@media screen and (min-width: 1920px) {
    .iframe-player.iframe-preview .cover-header .info .title {
        font-size: 20px
    }

    .iframe-player.iframe-preview .cover-header .info .author .author-avatar {
        width: 30px !important;
        height: 30px !important
    }

    .iframe-player.iframe-preview .cover-header .info .author .author-name {
        font-size: 20px
    }

    .iframe-player.iframe-preview .cover-header .share .icon-share2::before {
        font-size: 25px
    }

    .iframe-player.iframe-preview .cover-header .share .share-text {
        font-size: 20px
    }

    .iframe-player.iframe-preview .recommend .header .title {
        font-size: 20px
    }

    .iframe-player.iframe-preview .recommend .header .icon-close::before {
        font-size: 20px
    }

    .iframe-player.iframe-preview .recommend .HorizontalFeedCard .HorizontalFeedCard__title>span {
        font-size: 16px
    }

    .iframe-player.iframe-preview .recommend .prev,
    .iframe-player.iframe-preview .recommend .next {
        width: 32px;
        height: 32px;
        font-size: 16px;
        top: 47.5px;
        bottom: 64.8px
    }

    .iframe-player.iframe-preview .recommend-cover.play-ended .prev,
    .iframe-player.iframe-preview .recommend-cover.play-ended .next {
        top: 30px
    }

    .iframe-player.iframe-preview .share-cover .icon-close::before,
    .iframe-player.iframe-preview .share-cover .share-title {
        font-size: 20px
    }

    .iframe-player.iframe-preview .share-cover .share-content {
        font-size: 16px
    }

    .iframe-player.iframe-preview .share-cover .share-content .share-url {
        width: 333.3333333333px
    }
}

.share-cover {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: 500;
    background-color: rgba(0, 0, 0, .8)
}

.share-cover .icon-close {
    position: absolute;
    top: 26px;
    right: 28px;
    cursor: pointer
}

.share-cover .icon-close:before {
    color: #bdbdbd;
    font-size: 16px;
    font-weight: bold
}

.share-cover .share-title {
    font-size: 16px;
    line-height: 1.375;
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translate(-50%, -100%)
}

.share-cover .share-content {
    display: flex;
    font-size: 12px;
    line-height: 1.42;
    position: relative
}

.share-cover .share-url {
    width: 250px;
    padding: 8px 12px;
    background-color: rgba(102, 102, 102, .7);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    user-select: none;
    border-radius: 2px 0 0 2px
}

.share-cover .share-button {
    background-color: var(--brand);
    outline: none;
    border: 0;
    padding: 0 12px;
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    border-radius: 0 2px 2px 0
}

.recommend-cover {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 9;
    color: #fff;
    padding: 24px 20px 12px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none
}

.recommend-cover.show-recommend {
    bottom: 50px
}

.recommend-cover.play-ended {
    justify-content: center;
    padding: 0 16px
}

.recommend-cover.play-ended .cover-header,
.recommend-cover.play-ended .recommend,
.recommend-cover.play-ended .mask {
    z-index: 1
}

.recommend-cover.play-ended .cover-header {
    padding: 0 16px
}

.recommend-cover.play-ended .recommend {
    padding-top: 30px;
    background-color: rgba(0, 0, 0, 0)
}

.recommend-cover.play-ended .recommend .header {
    display: none
}

.recommend-cover.play-ended .recommend .prev,
.recommend-cover.play-ended .recommend .next {
    top: 30px
}

.recommend-cover.play-ended .recommend::after {
    display: none
}

.recommend-cover.inactive .mask,
.recommend-cover.inactive .cover-header {
    transform: translate3d(0, -150%, 0)
}

.recommend-cover .mask,
.recommend-cover .cover-header {
    transform: translate3d(0, 0, 0);
    transition: transform .2s
}

.recommend-cover.mobile .cover-header .info {
    width: 100%;
    pointer-events: none
}

.recommend-cover.mobile .share {
    display: none
}

.recommend-cover .cover-header,
.recommend-cover .recommend {
    pointer-events: visible
}

.recommend-cover .cover-header {
    z-index: 0;
    display: flex;
    justify-content: space-between
}

.recommend-cover .cover-header .info {
    width: 70%
}

.recommend-cover .cover-header .info .title {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    line-height: 1.375;
    font-weight: 500
}

.recommend-cover .cover-header .info .author {
    margin-top: 8px
}

.recommend-cover .cover-header .info .author .author-avatar,
.recommend-cover .cover-header .info .author .author-name {
    vertical-align: middle
}

.recommend-cover .cover-header .info .author .author-avatar {
    border: 0;
    margin: 0 6px 0 2px
}

.recommend-cover .cover-header .info .author .author-name {
    font-size: 16px;
    line-height: 1.375;
    font-weight: 500
}

.recommend-cover .cover-header .share {
    padding-top: 2px;
    cursor: pointer
}

.recommend-cover .cover-header .share .icon-share2::before {
    font-size: 20px;
    vertical-align: middle
}

.recommend-cover .cover-header .share .share-text {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4
}

.recommend-cover .cover-header .info .title,
.recommend-cover .cover-header .info .author-name,
.recommend-cover .cover-header .share {
    opacity: .8;
    transition: opacity .2s
}

.recommend-cover .cover-header .info .title:hover,
.recommend-cover .cover-header .info .author-name:hover,
.recommend-cover .cover-header .share:hover {
    opacity: 1
}

.recommend-cover .mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 120px;
    pointer-events: none;
    background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.182373) 65.62%, rgba(0, 0, 0, 0.0001) 100%);
    transform: matrix(1, 0, 0, -1, 0, 0)
}

.recommend-cover.isHide {
    display: none
}

.recommend {
    width: 100%;
    padding: 12px 20px;
    padding-bottom: 0;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .8);
    z-index: 0;
    position: relative
}

.recommend .header {
    margin-bottom: 8px;
    z-index: 1;
    position: relative
}

.recommend .header .title {
    color: #fff;
    font-size: 16px;
    line-height: 1.375;
    font-weight: 500
}

.recommend .header .icon-close {
    position: absolute;
    top: 0;
    right: 0
}

.recommend .header .icon-close::before {
    color: #bdbdbd;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: opacity .2s;
    opacity: .8
}

.recommend .header .icon-close:hover::before {
    opacity: 1
}

.recommend .list-container {
    overflow: hidden;
    margin: 0 -4px;
    position: relative;
    z-index: -1
}

.recommend.row-3 .list .HorizontalFeedCard {
    min-width: 33.3333333333%
}

.recommend.row-4 .list .HorizontalFeedCard {
    min-width: 25%
}

.recommend.row-5 .list .HorizontalFeedCard {
    min-width: 20%
}

.recommend .list {
    display: flex;
    overflow: visible;
    padding-bottom: 12px;
    transition: transform .6s
}

.recommend .list .HorizontalFeedCard {
    flex-grow: 1;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 100px;
    min-width: 25%;
    padding: 0 4px
}

.recommend .list .HorizontalFeedCard .HorizontalFeedCard__title {
    color: #fff;
    transition: color .2s
}

.recommend .list .HorizontalFeedCard .HorizontalFeedCard__title:hover {
    color: var(--brand)
}

.recommend .list .HorizontalFeedCard .HorizontalFeedCard__title>span {
    font-size: 12px;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
    white-space: initial;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word
}

.recommend .list .HorizontalFeedCard .HorizontalFeedCard__contentWrapper {
    margin-top: 8px;
    margin-right: 4px
}

.recommend .list .HorizontalFeedCard .HorizontalFeedCard__bottomInfo {
    display: none
}

.recommend::after {
    content: "";
    border-radius: 4px;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0
}

.recommend.show-prev-arrow::after {
    background: linear-gradient(90deg, #222 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%)
}

.recommend.show-next-arrow::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 85%, #222 100%)
}

.recommend.show-prev-arrow.show-next-arrow::after {
    background: linear-gradient(90deg, #222 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 85%, #222 100%)
}

.recommend.show-prev-arrow .prev,
.recommend.show-next-arrow .next {
    pointer-events: auto;
    opacity: 1
}

.recommend .prev,
.recommend .next {
    position: absolute;
    z-index: 9;
    top: 42px;
    bottom: 52px;
    margin: auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .08);
    background-color: rgba(0, 0, 0, .7);
    pointer-events: none;
    transition: opacity .2s;
    opacity: 0;
    font-size: 14px;
    cursor: pointer
}

.recommend .prev i::before,
.recommend .next i::before {
    color: #bdbdbd;
    transition: opacity .2s;
    opacity: .8
}

.recommend .prev:hover i::before,
.recommend .next:hover i::before {
    opacity: 1
}

.recommend .prev {
    left: 4px;
    transform: rotate(180deg)
}

.recommend .next {
    right: 4px
}

.recommend .next .icon-enter {
    position: relative;
    left: 1px
}

.recommend .HorizontalFeedCard:hover .HorizontalFeedCard__coverWrapper {
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .4)
}

.recommend .HorizontalFeedCard:hover .HorizontalFeedCard__coverWrapper img {
    transform: scale3d(1.07, 1.07, 1.07)
}

.recommend .HorizontalFeedCard:hover .HorizontalFeedCard__title {
    color: var(--brand)
}

.DisallowedPlayer_container {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/bg.12561c73.svg) top/contain no-repeat, #000;
    color: #fff
}

.DisallowedPlayer_container .DisallowedPlayer_logo {
    position: absolute;
    top: 3.8541666667vw;
    right: 3.8541666667vw;
    width: 12.1875vw;
    opacity: .3
}

.DisallowedPlayer_container .DisallowedPlayer_button {
    background-color: var(--brand);
    border-radius: 2px;
    font-weight: 500;
    border: none;
    color: #fff;
    font-size: 16px;
    padding: .5729166667vw 1.5625vw
}

.DisallowedPlayer_container .DisallowedPlayer_button:hover {
    background-image: none;
    background-color: red;
    cursor: pointer
}

.DisallowedPlayer_container .DisallowedPlayer_text {
    color: #fff;
    margin-bottom: 3.3333333333vw
}

.DisallowedPlayer_container .DisallowedPlayer_text a {
    color: var(--brand)
}

@media screen and (max-width:480px) {
    .DisallowedPlayer_container {
        font-size: 13px
    }

    .DisallowedPlayer_container .DisallowedPlayer_button {
        font-size: 13px
    }
}

@media screen and (min-width:481px)and (max-width:960px) {
    .DisallowedPlayer_container {
        font-size: 18px
    }

    .DisallowedPlayer_container .DisallowedPlayer_button {
        font-size: 14px
    }
}

@media screen and (min-width:961px)and (max-width:1280px) {
    .DisallowedPlayer_container {
        font-size: 20px
    }

    .DisallowedPlayer_container .DisallowedPlayer_button {
        font-size: 16px
    }
}

@media screen and (min-width:1281px)and (max-width:1680px) {
    .DisallowedPlayer_container {
        font-size: 22px
    }

    .DisallowedPlayer_container .DisallowedPlayer_button {
        font-size: 18px
    }
}

@media screen and (min-width:1681px)and (max-width:2048px) {
    .DisallowedPlayer_container {
        font-size: 24px
    }

    .DisallowedPlayer_container .DisallowedPlayer_button {
        font-size: 20px
    }
}

@media screen and (min-width:2049px) {
    .DisallowedPlayer_container {
        font-size: 28px
    }

    .DisallowedPlayer_container .DisallowedPlayer_button {
        font-size: 24px
    }
}