.win-controls {
    display: flex;
    align-items: center
}

.win-controls.video {
    float: right;
    margin-top: 2px;
    margin-right: 10px
}

.win-controls .win-control {
    display: flex;
    margin-left: 20px;
    cursor: pointer
}

.win-controls .win-control svg {
    width: 16px;
    height: 16px
}

.win-controls .win-control svg path {
    fill: #000
}

.userDetail__layout .win-controls .win-control svg path {
    fill: #000
}

.userDetail__layout .transitionTheme .win-controls .win-control svg path {
    fill: #fff
}

.win-controls .win-control svg:hover path {
    fill: #ff142b !important
}

.win-split-main {
    display: inline-block;
    width: 1px;
    height: 24px;
    background-color: rgba(0, 0, 0, .15);
    margin-left: 20px;
    margin-top: 1px
}

.win-split-video {
    display: inline-block;
    width: 1px;
    height: 24px;
    background-color: rgba(0, 0, 0, .15);
    margin-left: 14px;
    vertical-align: 11px
}

.electron-player-header {
    position: fixed;
    top: 0;
    left: 0;
    height: auto;
    width: 100%;
    z-index: 12;
    padding: 16px 24px;
    text-align: center;
    font-weight: 500;
    background: #fff;
    -webkit-app-region: drag;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.electron-player-header.overlay {
    background: transparent
}

.electron-player-header-left,
.electron-player-header-right {
    -webkit-app-region: no-drag
}

.electron-player-header-left {
    cursor: pointer;
    display: flex;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, .12);
    box-sizing: border-box;
    border-radius: 2px;
    padding: 7px 12px
}

.electron-player-header-left:hover {
    color: var(--brand)
}

.electron-player-header-left:hover svg path {
    fill: var(--brand)
}

.electron-player-header-left .icon-home {
    width: 16px;
    height: 16px;
    margin-right: 6px
}

.electron-player-header-left span {
    font-size: 12px;
    line-height: 16px
}

.electron-player-header-right {
    display: flex;
    align-items: center;
    justify-content: center
}

.electron-player-header-right .pin-icon {
    width: 24px;
    height: 24px
}

.electron-player-header-right svg {
    margin-top: -3px;
    margin-right: 8px;
    cursor: pointer
}

.electron-player-header-right svg path {
    fill: #000
}

.electron-player-header-right svg:hover path {
    fill: var(--brand)
}

.electron-player-header-right .highlight svg path {
    fill: var(--brand)
}

.electron-player-header-right span {
    display: flex
}

.NoResultComp {
    margin-top: 160px;
    text-align: center
}

.NoResultComp svg path {
    fill: rgba(var(--accent-black), var(--opacity-8));
    fill-opacity: 1
}

.NoResultComp__tips {
    margin-top: 24px;
    margin-bottom: 8px;
    font-size: 21px;
    color: var(--content-primary);
    line-height: 1.4;
    font-weight: 500
}

.not-found-old {
    position: relative;
    height: calc(100vh - 72px)
}

.not-found-old .not-found__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.not-found-old .not-found__content__img {
    width: 248px;
    height: 188px;
    display: block;
    margin: 0 auto 30px auto
}

.not-found-old .not-found__content__txt {
    font-size: 16;
    text-align: center;
    color: var(--content-primary)
}

.not-found-old .not-found__content__txt-link {
    color: #fa1f41;
    cursor: pointer
}

.not-found.NoResultComp {
    height: 320px;
    margin: 0 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--content-line)
}

.not-found.NoResultComp .NoResultComp__tips {
    font-size: 14px;
    color: var(--content-tertiary);
    font-weight: normal;
    margin-bottom: 0
}

.not-found-recommend-title {
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: var(--content-primary);
    margin: 23px 0 8px 32px
}

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

.not-found-2.NoResultComp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 196px
}

.not-found-2.NoResultComp .NoResultComp__tips {
    font-size: 14px;
    color: var(--content-tertiary);
    font-weight: normal;
    margin-bottom: 32px
}

@font-face {
    font-family: "xgpc_icon";
    src: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/xgpc_icon.c67c7751.eot);
    src: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/xgpc_icon.c67c7751.eot#iefix) format('eot'),
        url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/xgpc_icon.2e4bb546.woff2) format('woff2'),
        url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/xgpc_icon.6983400a.woff) format('woff'),
        url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/xgpc_icon.def00202.ttf) format('truetype'),
        url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/xgpc_icon.961515c1.svg#xgpc_icon) format('svg');
}

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

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


.icon-add:before {
    content: "\EA01";
    color: #fff;

}

.icon-add_slim:before {
    content: "\EA02";
    color: white;

}

.icon-aite:before {
    content: "\EA03";
}

.icon-android:before {
    content: "\EA04";
    color: #A3A7AD;

}

.icon-arrow-lighter:before {
    content: "\EA05";
}

.icon-author:before {
    content: "\EA06";
}

.icon-back_to_top:before {
    content: "\EA07";
}

.icon-broadcast:before {
    content: "\EA08";
}

.icon-clock:before {
    content: "\EA09";
}

.icon-close:before {
    content: "\EA0A";
    color: #D8D8D8;

}

.icon-collect:before {
    content: "\EA0B";
}

.icon-collect1:before {
    content: "\EA0C";
}

.icon-collection2:before {
    content: "\EA0D";
}

.icon-comment:before {
    content: "\EA0E";
}

.icon-comments:before {
    content: "\EA0F";
}

.icon-content:before {
    content: "\EA10";
}

.icon-copyright:before {
    content: "\EA11";
}

.icon-danmaku_emoji_entry:before {
    content: "\EA12";
}

.icon-delete:before {
    content: "\EA13";
}

.icon-dl_android:before {
    content: "\EA14";
    color: #fff;

}

.icon-dl_flower:before {
    content: "\EA15";
    color: #fa1f41;

}

.icon-dl_heart:before {
    content: "\EA16";
    color: #fa1f41;

}

.icon-dl_hot:before {
    content: "\EA17";
    color: #fa1f41;

}

.icon-dl_ios:before {
    content: "\EA18";
    color: #fff;

}

.icon-done:before {
    content: "\EA19";
}

.icon-download:before {
    content: "\EA1A";
    color: #666;

}

.icon-download2:before {
    content: "\EA1B";
}

.icon-emoji:before {
    content: "\EA1C";
}

.icon-enter:before {
    content: "\EA1D";
}

.icon-fellow:before {
    content: "\EA1E";
}

.icon-fellow1:before {
    content: "\EA1F";
}

.icon-globalview:before {
    content: "\EA20";
}

.icon-globalview_cancle:before {
    content: "\EA21";
}

.icon-hot:before {
    content: "\EA22";
}

.icon-icon_playing:before {
    content: "\EA23";
    color: #999;

}

.icon-live:before {
    content: "\EA24";
    color: #666;

}

.icon-live2:before {
    content: "\EA25";
}

.icon-message:before {
    content: "\EA26";
}

.icon-more:before {
    content: "\EA27";
}

.icon-more_big:before {
    content: "\EA28";
}

.icon-mute:before {
    content: "\EA29";
}

.icon-new:before {
    content: "\EA2A";
}

.icon-next:before {
    content: "\EA2B";
}

.icon-person:before {
    content: "\EA2C";
}

.icon-pic:before {
    content: "\EA2D";
}

.icon-play:before {
    content: "\EA2E";
}

.icon-qq:before {
    content: "\EA2F";
    color: #5cb2ff;

}

.icon-qqzone:before {
    content: "\EA30";
    color: #ffa838;

}

.icon-refresh:before {
    content: "\EA31";
}

.icon-replay:before {
    content: "\EA32";
}

.icon-report:before {
    content: "\EA33";
}

.icon-rmb:before {
    content: "\EA34";
    color: #E09865;

}

.icon-search:before {
    content: "\EA35";
}

.icon-service:before {
    content: "\EA36";
}

.icon-setting-small:before {
    content: "\EA37";
}

.icon-setting:before {
    content: "\EA38";
}

.icon-share:before {
    content: "\EA39";
}

.icon-share1:before {
    content: "\EA3A";
}

.icon-share2:before {
    content: "\EA3B";
}

.icon-shisiwu:before {
    content: "\EA3C";
}

.icon-sound:before {
    content: "\EA3D";
}

.icon-stop:before {
    content: "\EA3E";
}

.icon-thumbsdown:before {
    content: "\EA3F";
}

.icon-thumbsup:before {
    content: "\EA40";
}

.icon-thumbup:before {
    content: "\EA41";
}

.icon-thumbup2:before {
    content: "\EA42";
}

.icon-tieba:before {
    content: "\EA43";
    color: #557bff;

}

.icon-trash:before {
    content: "\EA44";
}

.icon-upload:before {
    content: "\EA45";
    color: #666;

}

.icon-upload2:before {
    content: "\EA46";
}

.icon-v3_create_center:before {
    content: "\EA47";
    color: #666;

}

.icon-v3_live_backend:before {
    content: "\EA48";
}

.icon-v3_logout:before {
    content: "\EA49";
    color: #666;

}

.icon-v3_user_center:before {
    content: "\EA4A";
}

.icon-v3_user_settings:before {
    content: "\EA4B";
}

.icon-v3_vip_center:before {
    content: "\EA4C";
}

.icon-vip:before {
    content: "\EA4D";
}

.icon-warning:before {
    content: "\EA4E";
    color: white;

}

.icon-webview:before {
    content: "\EA4F";
}

.icon-webview_cancle:before {
    content: "\EA50";
}

.icon-weibo:before {
    content: "\EA51";
    color: #fd4c15;

}

.icon-windows:before {
    content: "\EA52";
    color: #0C0D0F;

}

.icon-anime:before {
    content: "\EA53";
}

.icon-arrow:before {
    content: "\EA54";
}

.icon-back-up:before {
    content: "\EA55";
}

.icon-back-up2:before {
    content: "\EA56";
}

.icon-barrier_free:before {
    content: "\EA57";
}

.icon-bell:before {
    content: "\EA58";
}

.icon-bell2:before {
    content: "\EA59";
}

.icon-bubble:before {
    content: "\EA5A";
}

.icon-child:before {
    content: "\EA5B";
}

.icon-chongwu:before {
    content: "\EA5C";
}

.icon-cinema:before {
    content: "\EA5D";
}

.icon-close2:before {
    content: "\EA5E";
}

.icon-dianshijju:before {
    content: "\EA5F";
}

.icon-documentary:before {
    content: "\EA60";
}

.icon-dongchedi:before {
    content: "\EA61";
}

.icon-entertainment:before {
    content: "\EA62";
}

.icon-farmer:before {
    content: "\EA63";
}

.icon-feedback:before {
    content: "\EA64";
}

.icon-feedback2:before {
    content: "\EA65";
}

.icon-food:before {
    content: "\EA66";
}

.icon-funny:before {
    content: "\EA67";
}

.icon-game-hover:before {
    content: "\EA68";
}

.icon-game:before {
    content: "\EA69";
}

.icon-gaoxiao:before {
    content: "\EA6A";
}

.icon-garbage:before {
    content: "\EA6B";
}

.icon-hexinchun:before {
    content: "\EA6C";
}

.icon-history:before {
    content: "\EA6D";
}

.icon-home:before {
    content: "\EA6E";
}

.icon-horn:before {
    content: "\EA6F";
}

.icon-jdbn:before {
    content: "\EA70";
}

.icon-junshi:before {
    content: "\EA71";
}

.icon-keji:before {
    content: "\EA72";
}

.icon-living:before {
    content: "\EA73";
}

.icon-lvyou:before {
    content: "\EA74";
}

.icon-menu:before {
    content: "\EA75";
}

.icon-movie:before {
    content: "\EA76";
}

.icon-music:before {
    content: "\EA77";
}

.icon-nba:before {
    content: "\EA78";
}

.icon-pc-add:before {
    content: "\EA79";
}

.icon-pc-add2:before {
    content: "\EA7A";
}

.icon-person2:before {
    content: "\EA7B";
}

.icon-production-center:before {
    content: "\EA7C";
}

.icon-pseries:before {
    content: "\EA7D";
}

.icon-publish-video:before {
    content: "\EA7E";
}

.icon-qinggan:before {
    content: "\EA7F";
}

.icon-sf:before {
    content: "\EA80";
}

.icon-shougong:before {
    content: "\EA81";
}

.icon-side_collect:before {
    content: "\EA82";
}

.icon-side_content:before {
    content: "\EA83";
}

.icon-side_follow:before {
    content: "\EA84";
}

.icon-side_more:before {
    content: "\EA85";
}

.icon-tiyu:before {
    content: "\EA86";
}

.icon-tv:before {
    content: "\EA87";
}

.icon-vlog:before {
    content: "\EA88";
}

.icon-wenhua:before {
    content: "\EA89";
}

.icon-xiaokang:before {
    content: "\EA8A";
}

.icon-xzsj:before {
    content: "\EA8B";
}

.icon-yingshi:before {
    content: "\EA8C";
}

.icon-youxi:before {
    content: "\EA8D";
}

.icon-yule:before {
    content: "\EA8E";
}

.icon-zgm:before {
    content: "\EA8F";
}

.icon-zhibo:before {
    content: "\EA90";
}

.icon-zongyi:before {
    content: "\EA91";
}

@font-face {
    font-family: "Roboto-BoldItalic";
    src: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/Roboto-BoldItalic.d81da300.eot);
    /* IE9 */
    src: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/Roboto-BoldItalic.d81da300.eot?#iefix) format("embedded-opentype"),

        url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/Roboto-BoldItalic.18050aab.woff) format("woff"),
        url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/Roboto-BoldItalic.6c1ec8e1.ttf) format("truetype"),

        url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/Roboto-BoldItalic.d553697e.svg#Roboto-BoldItalic) format("svg");
    /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}



@font-face {
    font-family: "Roboto-Regular";
    src: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/Roboto-Regular.0f3bc6c2.eot);
    /* IE9 */
    src: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/Roboto-Regular.0f3bc6c2.eot?#iefix) format("embedded-opentype"),

        url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/Roboto-Regular.d164947f.woff) format("woff"),
        url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/Roboto-Regular.636084dc.ttf) format("truetype"),

        url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/Roboto-Regular.36b62286.svg#Roboto-Regular) format("svg");
    /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}



@font-face {
    font-family: "ByteNumber-Medium";
    src: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/ByteNumber-Medium.47b9dea4.ttf) format("truetype");
    font-style: normal;
    font-weight: normal;
}



@font-face {
    font-family: "ByteNumber-Bold";
    src: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/ByteNumber-Bold.64af42fb.ttf) format("truetype");
    font-style: normal;
    font-weight: normal;
}



/*
Icon classes can be used entirely standalone. They are named after their original file names.

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/
.sprite-acfun {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -106px -18px;
    width: 18px;
    height: 18px;
}

.sprite-bilibili {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -78px 0px;
    width: 46px;
    height: 18px;
}

.sprite-cainizaizhui {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -78px -18px;
    width: 28px;
    height: 28px;
}

.sprite-cctv {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: 0px -52px;
    width: 49px;
    height: 18px;
}

.sprite-chongwu {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: 0px -70px;
    width: 28px;
    height: 28px;
}

.sprite-cvip {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -208px -54px;
    width: 16px;
    height: 16px;
}

.sprite-dianshiju-small {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -84px -154px;
    width: 20px;
    height: 20px;
}

.sprite-dianshiju {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -28px -70px;
    width: 28px;
    height: 28px;
}

.sprite-dianying-small {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -104px -154px;
    width: 20px;
    height: 20px;
}

.sprite-dianying {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -56px -70px;
    width: 28px;
    height: 28px;
}

.sprite-dongchedi {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -84px -70px;
    width: 28px;
    height: 28px;
}

.sprite-dongman-small {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -124px -154px;
    width: 20px;
    height: 20px;
}

.sprite-dongman {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -124px 0px;
    width: 28px;
    height: 28px;
}

.sprite-ertong {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -124px -28px;
    width: 28px;
    height: 28px;
}

.sprite-fangyingting {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -124px -56px;
    width: 28px;
    height: 28px;
}

.sprite-fengxing {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -49px -52px;
    width: 18px;
    height: 18px;
}

.sprite-gaoxiao {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: 0px -98px;
    width: 28px;
    height: 28px;
}

.sprite-gengduojingxuan {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -28px -98px;
    width: 28px;
    height: 28px;
}

.sprite-guangchangwu {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -56px -98px;
    width: 28px;
    height: 28px;
}

.sprite-guanzhu {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -84px -98px;
    width: 28px;
    height: 28px;
}

.sprite-huanxi {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -208px -70px;
    width: 16px;
    height: 16px;
}

.sprite-iqiyi {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -60px -182px;
    width: 18px;
    height: 18px;
}

.sprite-jilupian-small {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -144px -154px;
    width: 20px;
    height: 20px;
}

.sprite-jilupian {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -112px -98px;
    width: 28px;
    height: 28px;
}

.sprite-keji {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -152px 0px;
    width: 28px;
    height: 28px;
}

.sprite-leshi {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -78px -182px;
    width: 18px;
    height: 18px;
}

.sprite-meishi {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -152px -28px;
    width: 28px;
    height: 28px;
}

.sprite-mgtv {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -96px -182px;
    width: 18px;
    height: 18px;
}

.sprite-miguvideo {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -114px -182px;
    width: 18px;
    height: 18px;
}

.sprite-movie_1905 {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -78px -46px;
    width: 37px;
    height: 18px;
}

.sprite-nba {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -152px -56px;
    width: 28px;
    height: 28px;
}

.sprite-next {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: 0px 0px;
    width: 39px;
    height: 52px;
}

.sprite-nongren {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -152px -84px;
    width: 28px;
    height: 28px;
}

.sprite-pianku {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -164px -154px;
    width: 20px;
    height: 20px;
}

.sprite-pptv {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -132px -182px;
    width: 18px;
    height: 18px;
}

.sprite-prev {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -39px 0px;
    width: 39px;
    height: 52px;
}

.sprite-qinzi {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: 0px -126px;
    width: 28px;
    height: 28px;
}

.sprite-rebo-small {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -208px -118px;
    width: 14px;
    height: 14px;
}

.sprite-shaoer-small {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -184px -154px;
    width: 20px;
    height: 20px;
}

.sprite-shaoer {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -28px -126px;
    width: 28px;
    height: 28px;
}

.sprite-shehui {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -56px -126px;
    width: 28px;
    height: 28px;
}

.sprite-shishang {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -84px -126px;
    width: 28px;
    height: 28px;
}

.sprite-shougong {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -112px -126px;
    width: 28px;
    height: 28px;
}

.sprite-sohu {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -150px -182px;
    width: 18px;
    height: 18px;
}

.sprite-svip {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -208px -86px;
    width: 16px;
    height: 16px;
}

.sprite-tencent_video {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -168px -182px;
    width: 18px;
    height: 18px;
}

.sprite-tiyu {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -140px -126px;
    width: 28px;
    height: 28px;
}

.sprite-tudou {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -208px -36px;
    width: 17px;
    height: 18px;
}

.sprite-vip {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -208px -102px;
    width: 16px;
    height: 16px;
}

.sprite-vlog {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -180px 0px;
    width: 28px;
    height: 28px;
}

.sprite-wasu {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -186px -182px;
    width: 18px;
    height: 18px;
}

.sprite-wenhua {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -180px -28px;
    width: 28px;
    height: 28px;
}

.sprite-xiazai {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: 0px -182px;
    width: 20px;
    height: 20px;
}

.sprite-xigua {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -208px 0px;
    width: 18px;
    height: 18px;
}

.sprite-yingshi-small {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -20px -182px;
    width: 20px;
    height: 20px;
}

.sprite-yingshi {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -180px -56px;
    width: 28px;
    height: 28px;
}

.sprite-yinyue {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -180px -84px;
    width: 28px;
    height: 28px;
}

.sprite-youku {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -208px -18px;
    width: 18px;
    height: 18px;
}

.sprite-youxi {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -180px -112px;
    width: 28px;
    height: 28px;
}

.sprite-yule {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: 0px -154px;
    width: 28px;
    height: 28px;
}

.sprite-zhibo {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -28px -154px;
    width: 28px;
    height: 28px;
}

.sprite-zongyi-small {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -40px -182px;
    width: 20px;
    height: 20px;
}

.sprite-zongyi {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite.2a57bb46.png);
    background-position: -56px -154px;
    width: 28px;
    height: 28px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .sprite-acfun {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-bilibili {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-cainizaizhui {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-cctv {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-chongwu {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-cvip {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-dianshiju-small {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-dianshiju {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-dianying-small {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-dianying {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-dongchedi {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-dongman-small {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-dongman {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-ertong {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-fangyingting {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-fengxing {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-gaoxiao {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-gengduojingxuan {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-guangchangwu {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-guanzhu {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-huanxi {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-iqiyi {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-jilupian-small {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-jilupian {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-keji {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-leshi {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-meishi {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-mgtv {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-miguvideo {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-movie_1905 {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-nba {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-next {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-nongren {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-pianku {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-pptv {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-prev {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-qinzi {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-rebo-small {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-shaoer-small {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-shaoer {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-shehui {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-shishang {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-shougong {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-sohu {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-svip {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-tencent_video {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-tiyu {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-tudou {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-vip {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-vlog {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-wasu {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-wenhua {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-xiazai {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-xigua {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-yingshi-small {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-yingshi {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-yinyue {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-youku {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-youxi {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-yule {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-zhibo {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-zongyi-small {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }

    .sprite-zongyi {
        background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/sprite@2x.739d2a86.png);
        background-size: 226px 202px;
    }
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
legend,
input,
button,
textarea,
p,
th,
td,
header,
section,
aside,
nav,
menu,
audio,
video,
figure,
figcaption,
footer,
article {
    margin: 0;
    padding: 0
}

*,
*:before,
*:after {
    box-sizing: border-box
}

*:focus {
    outline: none
}

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

table {
    border-collapse: collapse;
    border-spacing: 0
}

em {
    font-style: normal
}

img {
    border: 0;
    vertical-align: middle
}

img::selection {
    background: transparent
}

img::-moz-selection {
    background: transparent
}

address,
caption,
cite,
code,
dfn,
em,
th,
var,
optgroup {
    font-style: inherit;
    font-weight: inherit
}

del,
ins {
    text-decoration: none
}

li {
    list-style: none
}

caption,
th {
    text-align: left
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
    margin-block-start: 0;
    margin-block-end: 0
}

body,
input,
button,
textarea,
select {
    outline: none
}

textarea {
    resize: none;
    outline: none
}

i {
    font-style: normal
}

a {
    text-decoration: none;
    color: inherit
}

a:focus {
    outline: none
}

a:hover {
    color: inherit
}

input {
    -webkit-appearance: none
}

input::-webkit-search-cancel-button {
    display: none
}

html {
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

html,
body {
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    line-height: 1.5
}

input,
button,
select,
textarea {
    margin: 0;
    vertical-align: middle
}

input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
select,
textarea {
    appearance: none
}

input[type=text]::-webkit-search-decoration,
input[type=password]::-webkit-search-decoration,
input[type=email]::-webkit-search-decoration,
input[type=number]::-webkit-search-decoration,
input[type=url]::-webkit-search-decoration,
input[type=search]::-webkit-search-decoration,
select::-webkit-search-decoration,
textarea::-webkit-search-decoration {
    display: none
}

button,
input[type=button],
input[type=reset],
input[type=submit],
select {
    cursor: pointer
}

button,
input {
    line-height: normal
}

input,
textarea,
button {
    outline: none
}

input:focus,
input:active,
textarea:focus,
textarea:active,
button:focus,
button:active {
    outline: none
}

input,
textarea {
    text-align: left
}

textarea {
    resize: none
}

hr {
    height: 0px;
    border: none;
    border-bottom: 1px solid #ddd
}

iframe {
    border: none
}

body,
input,
button,
textarea {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, "Helvetica Neue", "PingFang SC", Helvetica, "Microsoft Yahei", Arial, sans-serif
}

.rc-trigger-popup {
    position: absolute;
    left: -9999px;
    top: -9999px;
    z-index: 1050
}

.rc-trigger-popup-hidden {
    display: none
}

.rc-trigger-popup-zoom-enter,
.rc-trigger-popup-zoom-appear {
    opacity: 0;
    animation-duration: .3s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
    animation-play-state: paused
}

.rc-trigger-popup-zoom-leave {
    animation-duration: .3s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
    animation-play-state: paused
}

.rc-trigger-popup .rc-trigger-popup-zoom-enter.rc-trigger-popup-zoom-enter-active,
.rc-trigger-popup .rc-trigger-popup-zoom-appear.rc-trigger-popup-zoom-appear-active {
    animation-name: rcTriggerZoomIn;
    animation-play-state: running
}

.rc-trigger-popup .rc-trigger-popup-zoom-leave.rc-trigger-popup-zoom-leave-active {
    animation-name: rcTriggerZoomOut;
    animation-play-state: running
}

@keyframes rcTriggerZoomIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(0, 0)
    }

    100% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1, 1)
    }
}

@keyframes rcTriggerZoomOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1, 1)
    }

    100% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(0, 0)
    }
}

.rc-trigger-popup-mask {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #373737;
    background-color: rgba(55, 55, 55, .6);
    height: 100%;
    filter: alpha(opacity=50);
    z-index: 1050
}

.rc-trigger-popup-mask-hidden {
    display: none
}

.rc-trigger-popup-fade-enter,
.rc-trigger-popup-fade-appear {
    opacity: 0;
    animation-duration: .3s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
    animation-play-state: paused
}

.rc-trigger-popup-fade-leave {
    animation-duration: .3s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
    animation-play-state: paused
}

.rc-trigger-popup .rc-trigger-popup-fade-enter.rc-trigger-popup-fade-enter-active,
.rc-trigger-popup .rc-trigger-popup-fade-appear.rc-trigger-popup-fade-appear-active {
    animation-name: rcTriggerMaskFadeIn;
    animation-play-state: running
}

.rc-trigger-popup .rc-trigger-popup-fade-leave.rc-trigger-popup-fade-leave-active {
    animation-name: rcDialogFadeOut;
    animation-play-state: running
}

@keyframes rcTriggerMaskFadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes rcDialogFadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.word {
    width: 1200px;
    margin: 0 auto;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    color: #484d57;
    line-height: 30px;
    min-height: 100vh
}

.word .title {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding: 18px 0
}

.word strong {
    color: #000
}

.word a {
    color: var(--brand)
}

.word p {
    text-indent: 2em;
    margin-bottom: 11px;
    margin-top: 0;
    line-height: 1.6
}

.word p.p2 {
    text-indent: 3em;
    font-size: inherit
}

.word span {
    text-decoration: underline;
    font-weight: bold
}

@media(max-width: 1200px) {
    .word {
        width: 92%
    }

    .word p {
        text-indent: 0;
        word-break: break-all
    }

    .word p.p2 {
        text-indent: 0;
        word-break: break-all
    }

    .word p a {
        color: #034b9f
    }
}

body {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, "Helvetica Neue", "PingFang SC", Helvetica, "Microsoft Yahei", Arial, sans-serif
}

.font-p2-regular {
    font-size: 12px;
    line-height: 18px;
    font-weight: 400
}

.font-p2-bold {
    font-size: 12px;
    line-height: 18px;
    font-weight: 500
}

.font-p1-regular-s {
    font-size: 13px;
    line-height: 20px;
    font-weight: 400
}

.font-p1-bold-s {
    font-size: 13px;
    line-height: 20px;
    font-weight: 500
}

.font-p1-regular {
    font-size: 14px;
    line-height: 22px;
    font-weight: 400
}

.font-p1-bold {
    font-size: 14px;
    line-height: 22px;
    font-weight: 500
}

.font-s2-regular {
    font-size: 11px;
    line-height: 14px;
    font-weight: 400
}

.font-s2-bold {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500
}

.font-s1-regular {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400
}

.font-s1-bold {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500
}

.font-h4-regular-s {
    font-size: 13px;
    line-height: 18px;
    font-weight: 400
}

.font-h4-bold-s {
    font-size: 13px;
    line-height: 18px;
    font-weight: 500
}

.font-h4-regular {
    font-size: 14px;
    line-height: 18px;
    font-weight: 400
}

.font-h4-bold {
    font-size: 14px;
    line-height: 18px;
    font-weight: 500
}

.font-h3-regular-s {
    font-size: 15px;
    line-height: 20px;
    font-weight: 400
}

.font-h3-bold-s {
    font-size: 15px;
    line-height: 20px;
    font-weight: 500
}

.font-h3-regular {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400
}

.font-h3-bold {
    font-size: 16px;
    line-height: 22px;
    font-weight: 500
}

.font-h2-regular {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400
}

.font-h2-bold {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500
}

.font-h1-regular {
    font-size: 20px;
    line-height: 28px;
    font-weight: 400
}

.font-h1-bold {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500
}

:root[dark=true] {
    --brand: #FF3D5E;
    --brand-2: #E1E3E5;
    --black: #fff;
    --white: #000;
    --assist-1: #499DF2;
    --assist-2: #E5398F;
    --assist-3: #E59722;
    --assist-4: #43BF58;
    --content-primary: #E1E3E5;
    --content-secondary: #909399;
    --content-tertiary: #5E6166;
    --content-line: rgba(225, 227, 229, 0.06);
    --content-inverse: #ffffff;
    --background-primary: #1A1C1F;
    --background-secondary: #2B2F33;
    --view-background-primary: #2B2F33;
    --view-background-secondary: #1A1C1F;
    --content-primary-hover: #FF3D5E;
    --content-secondary-hover: #E1E3E5;
    --content-tertiary-hover: #909399;
    --accent-black: 255, 255, 255;
    --accent-white: 0, 0, 0;
    --accent-brand: 255, 61, 94;
    --accent-content-primary: 225, 227, 229;
    --accent-content-inverse: 255, 255, 255
}

:root {
    --brand: #fe3355;
    --brand-2: #0C0D0F;
    --black: #000;
    --white: #fff;
    --assist-1: #236ddb;
    --assist-2: #ff3388;
    --assist-3: #ff9900;
    --assist-4: #29cc54;
    --content-primary: #0c0d0f;
    --content-secondary: #606266;
    --content-tertiary: #A3A7AD;
    --content-line: rgba(12, 13, 15, 0.06);
    --content-inverse: #ffffff;
    --background-primary: #fff;
    --background-secondary: #f6f6f6;
    --view-background-primary: #fff;
    --view-background-secondary: #f6f6f6;
    --content-primary-hover: #fe3355;
    --content-secondary-hover: #0c0d0f;
    --content-tertiary-hover: #606266;
    --accent-black: 0, 0, 0;
    --accent-white: 255, 255, 255;
    --accent-brand: 254, 51, 85;
    --accent-content-primary: 12, 13, 15;
    --accent-content-inverse: 255, 255, 255;
    --brand-dark: #FF3D5E;
    --brand-2-dark: #E1E3E5;
    --black-dark: #fff;
    --white-dark: #000;
    --assist-1-dark: #499DF2;
    --assist-2-dark: #E5398F;
    --assist-3-dark: #E59722;
    --assist-4-dark: #43BF58;
    --content-primary-dark: #E1E3E5;
    --content-secondary-dark: #909399;
    --content-tertiary-dark: #5E6166;
    --content-line-dark: rgba(225, 227, 229, 0.06);
    --content-inverse-dark: #ffffff;
    --background-primary-dark: #1A1C1F;
    --background-secondary-dark: #2B2F33;
    --view-background-primary-dark: #2B2F33;
    --view-background-secondary-dark: #1A1C1F
}

:root[dark=true] {
    --opacity-4: 0.08;
    --opacity-8: 0.16;
    --opacity-12: 0.3;
    --opacity-50: 0.5;
    --opacity-70: 0.7
}

:root {
    --opacity-4: 0.04;
    --opacity-8: 0.08;
    --opacity-12: 0.12;
    --opacity-50: 0.5;
    --opacity-70: 0.7
}

.color-brand,
.hover\:color-brand:hover {
    color: var(--brand)
}

.bg-brand,
.hover\:color-brand:hover {
    background: var(--brand)
}

.color-brand-2,
.hover\:color-brand-2:hover {
    color: var(--brand-2)
}

.bg-brand-2,
.hover\:color-brand-2:hover {
    background: var(--brand-2)
}

.color-black,
.hover\:color-black:hover {
    color: var(--black)
}

.bg-black,
.hover\:color-black:hover {
    background: var(--black)
}

.color-white,
.hover\:color-white:hover {
    color: var(--white)
}

.bg-white,
.hover\:color-white:hover {
    background: var(--white)
}

.color-assist-1,
.hover\:color-assist-1:hover {
    color: var(--assist-1)
}

.bg-assist-1,
.hover\:color-assist-1:hover {
    background: var(--assist-1)
}

.color-assist-2,
.hover\:color-assist-2:hover {
    color: var(--assist-2)
}

.bg-assist-2,
.hover\:color-assist-2:hover {
    background: var(--assist-2)
}

.color-assist-3,
.hover\:color-assist-3:hover {
    color: var(--assist-3)
}

.bg-assist-3,
.hover\:color-assist-3:hover {
    background: var(--assist-3)
}

.color-assist-4,
.hover\:color-assist-4:hover {
    color: var(--assist-4)
}

.bg-assist-4,
.hover\:color-assist-4:hover {
    background: var(--assist-4)
}

.color-content-primary,
.hover\:color-content-primary:hover {
    color: var(--content-primary)
}

.bg-content-primary,
.hover\:color-content-primary:hover {
    background: var(--content-primary)
}

.color-content-secondary,
.hover\:color-content-secondary:hover {
    color: var(--content-secondary)
}

.bg-content-secondary,
.hover\:color-content-secondary:hover {
    background: var(--content-secondary)
}

.color-content-tertiary,
.hover\:color-content-tertiary:hover {
    color: var(--content-tertiary)
}

.bg-content-tertiary,
.hover\:color-content-tertiary:hover {
    background: var(--content-tertiary)
}

.color-content-line,
.hover\:color-content-line:hover {
    color: var(--content-line)
}

.bg-content-line,
.hover\:color-content-line:hover {
    background: var(--content-line)
}

.color-content-inverse,
.hover\:color-content-inverse:hover {
    color: var(--content-inverse)
}

.bg-content-inverse,
.hover\:color-content-inverse:hover {
    background: var(--content-inverse)
}

.color-background-primary,
.hover\:color-background-primary:hover {
    color: var(--background-primary)
}

.bg-background-primary,
.hover\:color-background-primary:hover {
    background: var(--background-primary)
}

.color-background-secondary,
.hover\:color-background-secondary:hover {
    color: var(--background-secondary)
}

.bg-background-secondary,
.hover\:color-background-secondary:hover {
    background: var(--background-secondary)
}

.color-view-background-primary,
.hover\:color-view-background-primary:hover {
    color: var(--view-background-primary)
}

.bg-view-background-primary,
.hover\:color-view-background-primary:hover {
    background: var(--view-background-primary)
}

.color-view-background-secondary,
.hover\:color-view-background-secondary:hover {
    color: var(--view-background-secondary)
}

.bg-view-background-secondary,
.hover\:color-view-background-secondary:hover {
    background: var(--view-background-secondary)
}

.color-content-primary-hover,
.hover\:color-content-primary-hover:hover {
    color: var(--content-primary-hover)
}

.bg-content-primary-hover,
.hover\:color-content-primary-hover:hover {
    background: var(--content-primary-hover)
}

.color-content-secondary-hover,
.hover\:color-content-secondary-hover:hover {
    color: var(--content-secondary-hover)
}

.bg-content-secondary-hover,
.hover\:color-content-secondary-hover:hover {
    background: var(--content-secondary-hover)
}

.color-content-tertiary-hover,
.hover\:color-content-tertiary-hover:hover {
    color: var(--content-tertiary-hover)
}

.bg-content-tertiary-hover,
.hover\:color-content-tertiary-hover:hover {
    background: var(--content-tertiary-hover)
}

.color-link-content-primary {
    color: var(--content-primary);
    cursor: pointer
}

.color-link-content-primary:hover {
    color: var(--content-primary-hover)
}

.color-link-content-secondary {
    color: var(--content-secondary);
    cursor: pointer
}

.color-link-content-secondary:hover {
    color: var(--content-secondary-hover)
}

.color-link-content-tertiary {
    color: var(--content-tertiary);
    cursor: pointer
}

.color-link-content-tertiary:hover {
    color: var(--content-tertiary-hover)
}

.opacity-4,
.hover\:opacity-4:hover {
    opacity: var(--opacity-4)
}

.opacity-8,
.hover\:opacity-8:hover {
    opacity: var(--opacity-8)
}

.opacity-12,
.hover\:opacity-12:hover {
    opacity: var(--opacity-12)
}

.opacity-50,
.hover\:opacity-50:hover {
    opacity: var(--opacity-50)
}

.opacity-70,
.hover\:opacity-70:hover {
    opacity: var(--opacity-70)
}

.bg-opacity-4 {
    background-color: rgba(0, 0, 0, var(--opacity-4))
}

.bg-opacity-8 {
    background-color: rgba(0, 0, 0, var(--opacity-8))
}

.bg-opacity-12 {
    background-color: rgba(0, 0, 0, var(--opacity-12))
}

.bg-opacity-50 {
    background-color: rgba(0, 0, 0, var(--opacity-50))
}

.bg-opacity-70 {
    background-color: rgba(0, 0, 0, var(--opacity-70))
}

:root {
    --video-opacity-100: #fff;
    --video-opacity-90: rgba(255, 255, 255, 0.9);
    --video-opacity-75: rgba(255, 255, 255, 0.75);
    --video-opacity-50: rgba(255, 255, 255, 0.5);
    --video-opacity-25: rgba(255, 255, 255, 0.25);
    --video-opacity-16: rgba(255, 255, 255, 0.16);
    --video-opacity-8: rgba(255, 255, 255, 0.08);
    --mask-80: rgba(0, 0, 0, 0.8);
    --mask-70: rgba(0, 0, 0, 0.7);
    --mask-50: rgba(0, 0, 0, 0.5);
    --mask-54: rgba(0, 0, 0, 0.54)
}

.xg-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    font-weight: 500;
    border-radius: 2px;
    box-sizing: border-box;
    cursor: pointer;
    outline: none;
    border: none;
    --radius: 2px
}

.xg-button:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius)
}

.xg-button>svg {
    margin-right: 4px
}

.xg-button-primary {
    color: #fff;
    background-color: var(--brand)
}

.xg-button-primary path {
    fill: #fff
}

.xg-button-primary:hover::after {
    background-color: rgba(var(--accent-black), var(--opacity-8))
}

.xg-button-primary .xg-button-loading-icon {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAArlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8tivQqAAAAOnRSTlMABSQTCoAPa7OEXFczq3tlUk1HQi8qDKWfF8w/PDceB+3k2NLFv5qQim8uGv7zvLd3YBn56eDclHQ5HySEsAAAAd1JREFUSMfdlMeSqzAQRYVEzjnYJtomOIKz///HHm8xJRgQ2s9doVv3VEvdXYC/qYPJBeJ+fw1rQ6WnWSUQr9fLZb/f7Xarlcgdl+OdpoliT/wAq+1WWkDsUOuBwLAhC4AP15zYA9uLScrLQaBpnDe0nHBbFIU+f502CIL3Txwjl6J4ifwMwIVhKLNTn9dfr6c29ZUyDAmXbZ7PnPttfsuytABBTZ7nxthCUlkqgCgufxTjZ8jvt8SSAX71eEijAlX1PoAFbR5ZNiyhVJUAFiVmWTs46lUFl4FNdn7iE6xrHVCUn88bPM26VmhAfT4LuEeS5NEA+X7H4xYk6UYD3Pv9hd8sSSkN4E+nDA+S4wBVp9OJBND10fWUGmIY/C3oekQHBoTZth41n6YYUNuPQwVYFgPJ5yPQANb3h49omiOlAM/7g2PcNOYy4COeHRxTQRAWSzAIofG6C4K8NAoUIX9kpJ1hxAuLdIsQM7YOhmG4xHxyvE1+EbHRdQQCJUnCT227k2WVmctDmERzjbBkWbEmvWJhL8KmqYqimJvbqP3Q8zyIAEHQUkzTctzIZ/4vD0pc9zCbx/VV07Is27ad9XrzjVW1J3BFAuJgIFYPEQOoQtCN1876q8LIB39S/wBrBSdbHzTxEAAAAABJRU5ErkJggg==")
}

.xg-button-dark {
    color: #fff;
    background-color: var(--brand-2)
}

.xg-button-dark path {
    fill: #fff
}

.xg-button-dark:hover::after {
    background-color: rgba(var(--accent-black), var(--opacity-8))
}

.xg-button-dark .xg-button-loading-icon {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAArlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8tivQqAAAAOnRSTlMABSQTCoAPa7OEXFczq3tlUk1HQi8qDKWfF8w/PDceB+3k2NLFv5qQim8uGv7zvLd3YBn56eDclHQ5HySEsAAAAd1JREFUSMfdlMeSqzAQRYVEzjnYJtomOIKz///HHm8xJRgQ2s9doVv3VEvdXYC/qYPJBeJ+fw1rQ6WnWSUQr9fLZb/f7Xarlcgdl+OdpoliT/wAq+1WWkDsUOuBwLAhC4AP15zYA9uLScrLQaBpnDe0nHBbFIU+f502CIL3Txwjl6J4ifwMwIVhKLNTn9dfr6c29ZUyDAmXbZ7PnPttfsuytABBTZ7nxthCUlkqgCgufxTjZ8jvt8SSAX71eEijAlX1PoAFbR5ZNiyhVJUAFiVmWTs46lUFl4FNdn7iE6xrHVCUn88bPM26VmhAfT4LuEeS5NEA+X7H4xYk6UYD3Pv9hd8sSSkN4E+nDA+S4wBVp9OJBND10fWUGmIY/C3oekQHBoTZth41n6YYUNuPQwVYFgPJ5yPQANb3h49omiOlAM/7g2PcNOYy4COeHRxTQRAWSzAIofG6C4K8NAoUIX9kpJ1hxAuLdIsQM7YOhmG4xHxyvE1+EbHRdQQCJUnCT227k2WVmctDmERzjbBkWbEmvWJhL8KmqYqimJvbqP3Q8zyIAEHQUkzTctzIZ/4vD0pc9zCbx/VV07Is27ad9XrzjVW1J3BFAuJgIFYPEQOoQtCN1876q8LIB39S/wBrBSdbHzTxEAAAAABJRU5ErkJggg==")
}

.xg-button-ghost {
    color: var(--brand);
    background-color: transparent;
    border: 1px solid var(--brand)
}

.xg-button-ghost path {
    fill: var(--brand)
}

.xg-button-ghost:hover::after {
    background-color: var(--brand);
    opacity: var(--opacity-4)
}

.xg-button-ghost .xg-button-loading-icon {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAApVBMVEUAAAD/MFP/R1f9M1H/MlT7KEr/MlX+MlT+M1T+MlT+MlX/M1T/M1X+MlX/MlX9MlT+M1X+MlT9MlT/MVX/MFX/M1X+M1T+M1X+M1X/M1T+MlX/MVP+M1X+MlP/MlL+M1X/M1X+MlX+M1X+M1X/M1X/MlX/M1T/MlX+MlX/M1X/MlT9MVX+M1X/MlX+MlX+MlT/M1T+M1T/MlT+M1X/MlX/L1P/M1RDcufKAAAAN3RSTlMACgIOLwaAPnpDOLNqXDMrm1hSIhnkqKGEb2QlHRcR7Nq9k/32yresiHVIE9/PxI1gT0zx1BXBjUnMGQAAAeZJREFUSMfdktdyszAQhRGi99472AYDBlzy/o/2O/9MIghFk9vsFTpzPrSrs8TfLHViXDH/OLt1oODdQHfE8/mc5x+32+10Ehnr2D5eLqIo/gc+/ae+770D5Ko5b8AJeBMQBAxZRuz75zM39vyy4zgXRp1LvPZ8Zhm33Q7nuk7xZUdInmWdCDcAxnVdGax1yGVd56x1XdPcnWb9rrOZn6Kgadq0N5xv23awlBJP03RitxjbzpZjyEXhgX0AntLUmwttURTUUaJCmqZwPvFQ+MRhieljngY3DOExwD4eNjqZw8ARmLIfFYvSrGsdB9RVJaE3qmsVB8hVdfk+SJ5n4QCqKjM0s+cBHJCUZYqCZBgCW2VZ/g4gSfL7u+E4+leAxHEx1k/TCDC4RsUCgEZdKE3D4wAaAARETSPhAAABiU6S70eYCxII5+vu+8YxAJMEzHlfkqzDC15tQi7WXZLkoyhe8Qsu/zBKgXDQkBW35FKigiCgdv1RZK22UwjGcYdIoiiCa/k6yrJCb0Tcmqa5tTn0XZb1u7UKzAxDMyY3r1Z0XTfYBQJNVVXDdm84824YxsRTMSQ/t+0VURT19icHC6MY03S/XnmeZVlBUJQ3YaF2thEeAYJCvbvHVhtSAsuzghLGkPiT9Q/nHyXIwvV33QAAAABJRU5ErkJggg==")
}

.xg-button-ghost-weak {
    color: var(--content-primary);
    background-color: transparent;
    border: 1px solid rgba(var(--accent-black), var(--opacity-12))
}

.xg-button-ghost-weak path {
    fill: var(--content-primary)
}

.xg-button-ghost-weak:hover::after {
    background: rgba(var(--accent-black), var(--opacity-4))
}

.xg-button-ghost-weak .xg-button-loading-icon {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAqFBMVEUAAAAKCgwHCQkNDxALDA4MDQ4PDxELDA4KDA0LCwwMDA4KDA4JCw0MDQ4LDQ4LDA4LCw8LDA8LCwsMDQ8LDA4NDg4MDQ8LDA4KCw0JDA4LDA8LDA8LDA4MDQ4MDQ4MDA8LDA4LDA8LDQ4MDA8LDA4LDQ0LCw4LDg8MDQ8MDQ8LDA4MDQ4MDA4NDQ8LDA4LDQ4LDA8LDA4MDQ8LDA8MDQ8LDA4MDA8MDA8PJ5kPAAAAOHRSTlMAGgUJL4AMUT0VazglhVxXMyERpZ4OtXtEK+S76t7ZxL+qlIpvTEhB/u7TyrF4dGRg+PTPmY9mrri5BMYAAAHZSURBVEjH3ZXXlqswDEWv6dWmd0hoCSSUJJPy/392eZkxhGCveR29WZy9jowk+Pc3gxN5u9vvPaccDbpaQLbnxXG83+92u/PZ4wFRzl5er87zvB/g6+ukE5CDk+evzh4DTZi8NInvJuAUi1t6aNt5zofz1NE5nbLM/1xOb9t28S3HSJxlqed+AHjHsSG7zrt+mqb5Oo8cx9kotkrTiH9Pqvc71q+IKIqey5Sl3+9o+/XxUZItrwGLQme3AfecJPrCoCgKjtRRKUnauQV6PBTyyHRt28+O/uOhkQGpbSN8MsvSp01ldLtJP4egLBENKG83XDXU9ZAGwOsVt1vRdUBdq+s1w3fWdZYGWE2T4EbyPH0Xm6YhAJQYfJ+hiuYKpfdlOsBgROz7kKpnWQwYw3D8FQCGQaEBgiAws0tUFaAYWK4wX9CqEikGljXvLasoCiAayLK1HHdFgaTpkGVZePuoPp8qYacBkN9ayz3HkSPowcpfHS+XDcIyTeCu04cLhAbzqX5zAj69iBpCVK+eCJqmYf0yDISQKIGF3AxDTducTLNGoigGnCwwkyMrmxzHTYBF+GUZoljXh0MQHCVJVQ1jIrDjBhJgQDU4wND3z9I4VTpKqqFN3f2T8R/2GSSCVwOn3QAAAABJRU5ErkJggg==")
}

.xg-button-text {
    min-width: auto;
    font-weight: 400;
    color: var(--content-primary);
    background-color: var(--background-primary)
}

.xg-button-text path {
    fill: var(--content-primary)
}

.xg-button-text:hover::after {
    background: rgba(0, 0, 0, var(--opacity-4))
}

.xg-button-text .xg-button-loading-icon {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAqFBMVEUAAAAKCgwHCQkNDxALDA4MDQ4PDxELDA4KDA0LCwwMDA4KDA4JCw0MDQ4LDQ4LDA4LCw8LDA8LCwsMDQ8LDA4NDg4MDQ8LDA4KCw0JDA4LDA8LDA8LDA4MDQ4MDQ4MDA8LDA4LDA8LDQ4MDA8LDA4LDQ0LCw4LDg8MDQ8MDQ8LDA4MDQ4MDA4NDQ8LDA4LDQ4LDA8LDA4MDQ8LDA8MDQ8LDA4MDA8MDA8PJ5kPAAAAOHRSTlMAGgUJL4AMUT0VazglhVxXMyERpZ4OtXtEK+S76t7ZxL+qlIpvTEhB/u7TyrF4dGRg+PTPmY9mrri5BMYAAAHZSURBVEjH3ZXXlqswDEWv6dWmd0hoCSSUJJPy/392eZkxhGCveR29WZy9jowk+Pc3gxN5u9vvPaccDbpaQLbnxXG83+92u/PZ4wFRzl5er87zvB/g6+ukE5CDk+evzh4DTZi8NInvJuAUi1t6aNt5zofz1NE5nbLM/1xOb9t28S3HSJxlqed+AHjHsSG7zrt+mqb5Oo8cx9kotkrTiH9Pqvc71q+IKIqey5Sl3+9o+/XxUZItrwGLQme3AfecJPrCoCgKjtRRKUnauQV6PBTyyHRt28+O/uOhkQGpbSN8MsvSp01ldLtJP4egLBENKG83XDXU9ZAGwOsVt1vRdUBdq+s1w3fWdZYGWE2T4EbyPH0Xm6YhAJQYfJ+hiuYKpfdlOsBgROz7kKpnWQwYw3D8FQCGQaEBgiAws0tUFaAYWK4wX9CqEikGljXvLasoCiAayLK1HHdFgaTpkGVZePuoPp8qYacBkN9ayz3HkSPowcpfHS+XDcIyTeCu04cLhAbzqX5zAj69iBpCVK+eCJqmYf0yDISQKIGF3AxDTducTLNGoigGnCwwkyMrmxzHTYBF+GUZoljXh0MQHCVJVQ1jIrDjBhJgQDU4wND3z9I4VTpKqqFN3f2T8R/2GSSCVwOn3QAAAABJRU5ErkJggg==")
}

.xg-button-large {
    padding: 0 16px;
    height: 44px;
    font-size: 16px
}

.xg-button-large.xg-button-text {
    padding: 0 8px !important;
    height: 34px
}

.xg-button-large.xg-button-loading.xg-button-icon {
    padding: 0 16px
}

.xg-button-large .xg-button-loading-icon {
    width: 18px;
    height: 18px
}

.xg-button-middle {
    padding: 0 16px;
    height: 36px;
    font-size: 14px
}

.xg-button-middle.xg-button-text {
    padding: 0 8px !important;
    height: 30px
}

.xg-button-middle.xg-button-loading.xg-button-icon {
    padding: 0 16px
}

.xg-button-middle .xg-button-loading-icon {
    width: 18px;
    height: 18px
}

.xg-button-small {
    padding: 0 12px;
    height: 28px;
    font-size: 12px;
    min-width: 48px;
    white-space: nowrap
}

.xg-button-small.xg-button-text {
    padding: 0 6px !important;
    height: 28px
}

.xg-button-small.xg-button-loading.xg-button-icon {
    padding: 0 12px
}

.xg-button-small .xg-button-loading-icon {
    width: 16px;
    height: 16px
}

.xg-button-disabled {
    cursor: default;
    opacity: .3
}

.xg-button-disabled:hover::after {
    display: none
}

.xg-button-loading {
    cursor: default
}

.xg-button-loading:hover::after {
    display: none
}

.xg-button-icon .xg-button-loading-icon {
    margin-right: 4px
}

.xg-button-loading-icon {
    transform-origin: center center;
    background-size: cover;
    transform: translateZ(10px);
    animation: rotate360 1s linear infinite
}

@keyframes rotate360 {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

:root[dark=true] .xg-button-small .xg-button-loading-icon {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAArlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8tivQqAAAAOnRSTlMABSQTCoAPa7OEXFczq3tlUk1HQi8qDKWfF8w/PDceB+3k2NLFv5qQim8uGv7zvLd3YBn56eDclHQ5HySEsAAAAd1JREFUSMfdlMeSqzAQRYVEzjnYJtomOIKz///HHm8xJRgQ2s9doVv3VEvdXYC/qYPJBeJ+fw1rQ6WnWSUQr9fLZb/f7Xarlcgdl+OdpoliT/wAq+1WWkDsUOuBwLAhC4AP15zYA9uLScrLQaBpnDe0nHBbFIU+f502CIL3Txwjl6J4ifwMwIVhKLNTn9dfr6c29ZUyDAmXbZ7PnPttfsuytABBTZ7nxthCUlkqgCgufxTjZ8jvt8SSAX71eEijAlX1PoAFbR5ZNiyhVJUAFiVmWTs46lUFl4FNdn7iE6xrHVCUn88bPM26VmhAfT4LuEeS5NEA+X7H4xYk6UYD3Pv9hd8sSSkN4E+nDA+S4wBVp9OJBND10fWUGmIY/C3oekQHBoTZth41n6YYUNuPQwVYFgPJ5yPQANb3h49omiOlAM/7g2PcNOYy4COeHRxTQRAWSzAIofG6C4K8NAoUIX9kpJ1hxAuLdIsQM7YOhmG4xHxyvE1+EbHRdQQCJUnCT227k2WVmctDmERzjbBkWbEmvWJhL8KmqYqimJvbqP3Q8zyIAEHQUkzTctzIZ/4vD0pc9zCbx/VV07Is27ad9XrzjVW1J3BFAuJgIFYPEQOoQtCN1876q8LIB39S/wBrBSdbHzTxEAAAAABJRU5ErkJggg==")
}

.xg-modal-large {
    width: 640px
}

.xg-modal-middle {
    width: 480px
}

.xg-modal-small {
    width: 360px
}

.xg-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 48px;
    border-bottom: 1px solid var(--content-line)
}

.xg-modal-close {
    cursor: pointer
}

.xg-modal-close path {
    fill: var(--content-primary)
}

.xg-dialog {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 100000;
    background-color: rgba(0, 0, 0, .7);
    user-select: none
}

.xg-dialog-mask {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    overflow: auto
}

.xg-dialog-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--view-background-primary);
    border-radius: 4px;
    overflow: hidden;
    transform-origin: top top
}

.xg-dialog-default {
    padding: 28px;
    width: 320px;
    box-sizing: border-box
}

.xg-dialog-title {
    font-style: normal;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    text-align: center;
    color: var(--content-primary)
}

.xg-dialog-nc>.xg-dialog-title {
    text-align: left
}

.xg-dialog-desc {
    margin-top: 8px;
    font-size: 14px;
    line-height: 22px;
    text-align: justify;
    color: var(--content-secondary)
}

.xg-dialog-button {
    margin-top: 20px;
    width: 100%
}

.xg-dialog-button+.xg-dialog-button {
    margin-top: 12px
}

.xg-dialog-enter {
    animation: opa-fade-in .25s cubic-bezier(0.4, 0, 0.2, 1)
}

.xg-dialog-enter .xg-dialog-content {
    animation: sca-fade-in .25s cubic-bezier(0.4, 0, 0.2, 1)
}

.xg-dialog-leave {
    animation: fade-out .1s cubic-bezier(0.4, 0, 1, 1)
}

.xg-dialog-leave .xg-dialog-content {
    animation: sca-fade-out 1s cubic-bezier(0.4, 0, 1, 1)
}

@keyframes opa-fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes opa-fade-out {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes sca-fade-in {
    0% {
        transform: translate(-50%, -50%) scale(0.9, 0.9)
    }

    100% {
        transform: translate(-50%, -50%) scale(1, 1)
    }
}

@keyframes sca-fade-out {
    0% {
        transform: translate(-50%, -50%) scale(1, 1)
    }

    100% {
        transform: translate(-50%, -50%) scale(0.1, 0.1)
    }
}

.xg-notification {
    position: fixed;
    top: 88px;
    right: 24px;
    padding: 16px 20px 20px;
    background-color: var(--view-background-primary);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .05), 0px 4px 16px rgba(0, 0, 0, .1), inset 0px 0px 0px 1px rgba(0, 0, 0, .08);
    border-radius: 4px
}

.xg-notification-content {
    position: relative
}

.xg-notification-close {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer
}

.xg-notification-close path {
    fill: var(--content-tertiary)
}

.xg-notification-body {
    display: flex;
    padding-right: 40px
}

.xg-notification-noicon {
    padding-right: 0
}

.xg-notification-noicon .xg-notification-info {
    width: 280px
}

.xg-notification-noicon .xg-notification-info .xg-notification-title {
    font-size: 16px;
    line-height: 22px;
    font-weight: 500
}

.xg-notification-noicon .xg-notification-info .xg-notification-desc {
    margin-top: 24px
}

.xg-notification-icon {
    margin-right: 12px;
    width: 48px;
    height: 48px
}

.xg-notification-info {
    flex: 1
}

.xg-notification-title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: var(--content-primary)
}

.xg-notification-desc {
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    margin-top: 2px;
    color: var(--content-secondary)
}

.xg-notification-footer {
    margin-top: 24px
}

.xg-notification-button {
    float: right
}

.xg-notification-anmi-enter,
.xg-notification-anmi-appear {
    opacity: 0;
    transform: scale(0.9)
}

.xg-notification-anmi-enter-active,
.xg-notification-anmi-appear-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity .2s, transform .2s
}

.xg-notification-anmi-exit {
    opacity: 1;
    transform: scale(1)
}

.xg-notification-anmi-exit-active {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity .2s, transform .2s
}

:root[dark=true] {
    background: var(--background-primary)
}

:root[dark=true] ::selection {
    background: #1889FB4D
}

:root[dark=true] .App {
    background-color: #000
}

:root[dark=true] .Dialog-container.login-dialog-container .LoginDialog__header {
    box-shadow: none;
    border-bottom: 1px solid var(--content-line)
}

:root[dark=true] .web-login .web-login-area-code__input-wrapper__input {
    color: var(--content-primary)
}

:root[dark=true] .web-login-button-input,
:root[dark=true] .web-login-normal-input {
    background-color: var(--view-background-secondary) !important
}

:root[dark=true] .web-login .web-login-normal-input__input {
    color: var(--content-primary);
    caret-color: var(--content-primary)
}

:root[dark=true] .web-login .web-login-normal-input__input::-webkit-input-placeholder {
    color: var(--content-secondary) !important
}

:root[dark=true] .web-login .web-login-normal-input__input:-internal-autofill-selected {
    -webkit-text-fill-color: var(--content-primary);
    box-shadow: 0 0 0 1000px var(--view-background-secondary) inset
}

:root[dark=true] .web-login .web-login-button-input__input {
    color: var(--content-primary);
    caret-color: var(--content-primary)
}

:root[dark=true] .web-login .web-login-button-input__input::-webkit-input-placeholder {
    color: var(--content-secondary) !important
}

:root[dark=true] .web-login .web-login-button-input__input:-internal-autofill-selected {
    -webkit-text-fill-color: var(--content-primary);
    box-shadow: 0 0 0 1000px var(--view-background-secondary) inset
}

:root[dark=true] .web-login .web-login-union__login__scan-code__title {
    color: var(--content-primary)
}

:root[dark=true] .UserBanner__footer__shadow {
    background: none !important
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__wrapper {
    background-color: var(--view-background-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__sideBar {
    background-color: var(--view-background-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__sideBar_header-title {
    color: var(--content-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__sideBar_header path {
    fill: var(--content-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__sideBar_item span {
    color: var(--content-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__sideBar_item:hover {
    background-color: rgba(var(--accent-black), 0.08)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__sideBar_item.active span {
    color: var(--brand)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content {
    background-color: var(--view-background-secondary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content_header_item {
    color: var(--content-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content_header_item.active {
    color: var(--content-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .OfficialHelperHeader {
    color: var(--content-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .OfficialHelperHeader path {
    fill: var(--content-secondary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__baseContentDetail_wrapper {
    background-color: var(--view-background-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__msgEmpty {
    background-color: var(--view-background-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__msgEmpty path {
    fill: rgba(var(--accent-black), var(--opacity-8));
    fill-opacity: 1
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__msgEmpty_txt {
    color: var(--content-secondary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__baseContentDetail_readHeader {
    color: var(--content-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__systemMsg {
    border-bottom-color: var(--content-line)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__systemMsg_header-title {
    color: var(--content-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__systemMsg_header-subtitle {
    color: var(--content-secondary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__systemMsg_content-detail {
    color: var(--content-secondary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__systemMsg_content-toDetail {
    color: var(--assist-1)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__systemMsg_content-toDetail path {
    fill: var(--assist-1)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__baseMsg {
    border-bottom-color: var(--content-line)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__baseMsg_name {
    color: var(--content-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__baseMsg_subtitle {
    color: var(--content-secondary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__baseMsg_time {
    color: var(--content-tertiary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__danmakuMsg {
    border-bottom-color: var(--content-line)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__danmakuMsg_title {
    color: var(--assist-1)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__danmakuMsg_time {
    color: var(--content-tertiary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__danmakuMsg_content {
    color: var(--content-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__superDiggBanner {
    background: var(--view-background-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__superDiggBanner_content {
    color: var(--content-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__content .xgpc-msg-center__superDiggBanner_content a {
    color: var(--assist-1)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__footer_txt {
    color: var(--content-tertiary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__fansMsg {
    border-color: var(--content-line)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__fansMsg_name span {
    color: var(--content-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__fansMsg_time {
    color: var(--content-secondary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__commentMsg {
    border-bottom-color: var(--content-line)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__commentMsg_name {
    color: var(--content-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__commentMsg_subtitle {
    color: var(--content-secondary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__commentMsg_time {
    color: var(--content-tertiary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__commentMsg_txt {
    color: var(--content-secondary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__msgDetail {
    background-color: var(--view-background-secondary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__msgDetail_title,
:root[dark=true] .xgpc-msg-center .xgpc-msg-center__msgDetail_txt {
    color: var(--content-secondary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__msgAction_item span {
    color: var(--content-secondary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__msgAction_item:hover {
    background-color: rgba(var(--accent-black), 0.08)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__msgAction_more:hover i {
    background-color: rgba(var(--accent-black), 0.08)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__msgAction_more-popup {
    border-color: var(--content-line);
    background-color: var(--view-background-primary);
    box-shadow: none
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__msgAction_more-popup-item {
    color: var(--content-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__msgAction_more-popup-item:hover {
    background-color: rgba(var(--accent-black), 0.08)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__comment {
    border-color: var(--content-line)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__comment_actions path {
    fill: var(--content-secondary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__comment .xgpc-msg-center__imageUploader {
    border-top-color: var(--content-line)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__comment .xgpc-msg-center__imageUploader .xgpc-msg-center__imageUploader_dropzone {
    color: var(--content-secondary);
    border-color: var(--content-line);
    background: var(--view-background-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__comment .xgpc-msg-center__imageUploader .xgpc-msg-center__imageUploader_more {
    border-color: var(--content-line)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__textarea {
    color: var(--content-primary);
    caret-color: var(--content-primary);
    background-color: var(--view-background-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__numCount {
    color: var(--content-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__confirmPopup {
    background-color: var(--view-background-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__confirmPopup_title {
    color: var(--content-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__officialHelperMsg {
    border-bottom-color: var(--content-line)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__officialHelperMsg_header-title {
    color: var(--content-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__officialHelperMsg_header-tag,
:root[dark=true] .xgpc-msg-center .xgpc-msg-center__officialHelperMsg_header-subtitle {
    color: var(--content-tertiary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__officialHelperMsg_content-detail {
    color: var(--content-secondary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__follow.followed {
    color: var(--content-primary);
    background-color: var(--background-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__clearAllUnreadCount_broom:not(.disabled) path {
    stroke: none
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__clearAllUnreadCount_broom:not(.disabled):hover {
    background-color: rgba(var(--accent-black), var(--opacity-4))
}

:root[dark=true] .xgpc-msg-center .xgmsg-compatibleLink-QRContent__dialog {
    background: var(--view-background-primary)
}

:root[dark=true] .xgpc-msg-center .xgpc-msg-center__emojiPanel {
    background-color: var(--view-background-secondary);
    border-color: var(--content-line)
}

:root[dark=true] .OfficialHelperHeader_seetingsBox_wrapper {
    background: var(--view-background-primary)
}

:root[dark=true] .OfficialHelperHeader_seetingsBox_wrapper .OfficialHelperHeader_seetingsBox_tips {
    color: var(--content-secondary)
}

:root[dark=true] .OfficialHelperHeader_seetingsBox_wrapper .OfficialHelperHeader_seetingsBox_item {
    color: var(--content-primary)
}

:root[dark=true] .xgmsg-compatibleLink-QRContent {
    background: var(--view-background-primary);
    border: none
}

:root[dark=true] .xgmsg-compatibleLink-QRContent__img {
    border-color: var(--content-line)
}

:root[dark=true] .xgmsg-compatibleLink-QRContent__text {
    color: var(--content-secondary)
}

:root[dark=true] .xgmsg-compatibleLink-QRContent__text span {
    color: var(--content-primary)
}

:root[dark=true] .ant-message-notice-content {
    border-color: var(--content-line) !important
}

:root[dark=true] .Page_Projection {
    background-color: var(--background-primary)
}

:root[dark=true] .teleplayPage__wrapper {
    background-color: var(--background-primary)
}

:root[dark=true] .userDetailV3__header__bg img {
    filter: brightness(0.6)
}

:root[dark=true] .UserCenter__profile-edit-banner__img img {
    filter: brightness(0.6)
}

:root[dark=true] .teleplayPage__interactionZone {
    background-color: var(--background-secondary)
}

:root[dark=true] .Page_Projection .playerBlock .player__ExtraInfo {
    background-color: var(--background-secondary)
}

:root[dark=true] .userDetailV3__header__bg-setting.dark,
:root[dark=true] .UserCenter__profile-edit-banner__btn.dark {
    border: 1px solid rgba(255, 255, 255, .3);
    color: rgba(255, 255, 255, .9)
}

:root[dark=true] .userDetailV3__header__bg-setting.dark:hover,
:root[dark=true] .UserCenter__profile-edit-banner__btn.dark:hover {
    background-color: rgba(255, 255, 255, .05)
}

:root[dark=true] .xgSkeleton {
    background-color: var(--background-secondary)
}

.xg-electron .v3-app-layout__header {
    -webkit-app-region: drag
}

.xg-electron .v3-app-layout__header .search-wrap,
.xg-electron .v3-app-layout__header .nav-list,
.xg-electron .v3-app-layout__header .win-controls,
.xg-electron .v3-app-layout__header .logo,
.xg-electron .v3-app-layout__header .electron__link,
.xg-electron .v3-app-layout__header .win-nav-list,
.xg-electron .v3-app-layout__header .BU-Component-Header-Avatar {
    -webkit-app-region: no-drag
}

.xg-electron .v3-app-layout__side {
    -webkit-app-region: drag
}

.xg-electron .v3-app-layout__side .v3-app-layout__side__Normal,
.xg-electron .v3-app-layout__side .v3-app-layout__side__logo {
    -webkit-app-region: no-drag
}

.xg-electron .v3-app-layout__side {
    padding-top: 64px
}

.xg-electron .v3-app-layout__side__block-title {
    padding-left: 22px
}

.xg-electron .v3-app-layout__side__logo {
    display: none
}

.xg-electron .v3-app-layout__side__block-nav {
    padding: 0
}

.xg-electron .siteHeader__inner .left-wrap {
    width: 0
}

.xg-electron .v3-app-layout__side,
.xg-electron .v3-app-layout__side__Normal__contentWrapper {
    width: 150px !important
}

.xg-electron .v3-app-layout__content,
.xg-electron .layoutstatus-side--Short .v3-app-layout__content {
    margin-left: 150px
}

.xg-electron .v3-app-layout__side__Normal__contentWrapper {
    padding-bottom: 0
}

.xg-electron .v3-app-layout__side__block-agreement {
    display: none
}

.xg-electron .icon-menu {
    display: none
}

.xg-electron .v3-app-layout__header {
    left: 150px !important;
    width: calc(100% - 150px) !important
}

.xg-electron .v3-app-layout__side,
.xg-electron .v3-app-layout__side__Normal {
    background-color: #fff
}

.xg-electron .v3-app-layout__side__footer {
    display: none
}

.xg-electron .v3-app-layout__side__item {
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 0
}

.xg-electron .not-found {
    margin-top: -50px;
    height: calc(100vh + 50px);
    overflow: hidden
}

.xg-electron .not-found .not-found__content {
    top: calc(50% - 25px)
}

.xg-electron .UserCenter,
.xg-electron .vipCenter,
.xg-electron .MessageCenterV3 {
    width: 1050px;
    margin: 0 auto
}

.xg-electron .projection__layout .v3-app-layout__header,
.xg-electron .teleplay__layout .v3-app-layout__header {
    display: none
}

.xg-electron .projection__layout .v3-app-layout__content,
.xg-electron .teleplay__layout .v3-app-layout__content {
    margin-top: 0;
    margin-left: 0 !important;
    padding-top: 0
}

.xg-electron .projection__layout .teleplayPage__main,
.xg-electron .teleplay__layout .teleplayPage__main {
    margin-top: 48px
}

.xg-electron .projection__layout .teleplayPage--theater .teleplayPage__main,
.xg-electron .teleplay__layout .teleplayPage--theater .teleplayPage__main {
    margin-top: 64px
}

.xg-electron .projection__layout .projection_recomment__list,
.xg-electron .teleplay__layout .projection_recomment__list {
    padding-right: 0
}

.xg-electron .projection__layout .projection-series-header,
.xg-electron .projection__layout .ProgramGuide__fixHeader,
.xg-electron .teleplay__layout .projection-series-header,
.xg-electron .teleplay__layout .ProgramGuide__fixHeader {
    padding-top: 0
}

.xg-electron .projection__layout .Page_Projection,
.xg-electron .teleplay__layout .Page_Projection {
    padding-top: 64px
}

.xg-electron .projection__layout .projection-allvideo-header,
.xg-electron .teleplay__layout .projection-allvideo-header {
    padding-top: 0
}

.xg-electron .projection__layout .projection-series-list,
.xg-electron .teleplay__layout .projection-series-list {
    height: calc(100% - 48px)
}

.xg-electron .lvideo-filter,
.xg-electron .Cluster {
    margin: 0 32px
}

.xg-electron .lvideo-category__first-ele {
    height: 26px;
    line-height: 26px
}

.xg-electron .lvideo-category__sub__item {
    line-height: 26px
}

.xg-electron .Cluster {
    padding-top: 24px
}

.xg-electron .Cluster__category {
    padding: 30px 28px 20px
}

.xg-electron .anyVideo-layout .not-found__content__txt {
    color: #eee
}

.xg-electron .anyVideo-layout .not-found__content__txt ul {
    display: none
}

.xg-electron.offline .electron-net-error {
    display: block
}

.xg-electron.offline .v3-app-layout__side,
.xg-electron.offline .v3-app-layout__content,
.xg-electron.offline .BU-FixedGroup,
.xg-electron.offline .rc-trigger-popup {
    display: none
}

.xg-electron.offline .v3-app-layout__header {
    left: 0;
    width: 100%
}

.xg-electron.offline .v3-app-layout__header .v3-app-layout__logo-wrap {
    margin-left: 140px;
    pointer-events: none
}

body.offline .rc-trigger-popup {
    display: none
}

.xg-electron .v3-app-layout__header .siteHeader__inner {
    height: 64px
}

.xg-electron .v3-app-layout__header .siteHeader__inner .v3-app-layout__logo-wrap {
    width: 220px
}

.xg-electron .v3-app-layout__header .siteHeader__inner .v3-app-layout__logo-wrap .logo {
    width: 100px;
    height: 25.6px
}

.xg-electron .v3-app-layout__header .search-wrap {
    width: 420px
}

.xg-electron .v3-app-layout__header .nav-list .siteHeader__textBtn {
    margin-left: 4px
}

.xg-electron .v3-app-layout__header .nav-list .siteHeader__textBtn svg {
    margin: 0 0 0 1px;
    width: 22px;
    height: 22px
}

.xg-electron .v3-app-layout__header .nav-list .siteHeader__textBtn svg path {
    fill: #666
}

.xg-electron .v3-app-layout__header .loginButton {
    margin-left: 16px;
    width: 32px;
    height: 32px;
    background-color: transparent
}

.xg-electron .v3-app-layout__header .loginButton .avatar-logo {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/unlogin.sprite.87323498.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%
}

.xg-electron .v3-app-layout__header .loginButton span {
    display: none
}

.xg-electron .v3-app-layout__header .loginButton:hover {
    background-color: transparent
}

.xg-electron .v3-app-layout__header .right-content {
    align-items: center
}

@media screen and (max-width: 1200px) {
    .xg-electron .v3-app-layout__header .right-content {
        margin: 0
    }
}

.xg-electron-win .v3-app-layout__header .loginButton {
    width: 36px !important;
    width: 36px !important;
    min-width: 36px;
    border: none;
    border-radius: 0;
    margin-left: 20px !important;
    margin-right: 20px !important;
    padding: 0
}

.xg-electron-win .v3-app-layout__header .loginButton .avatar-logo {
    margin-right: 0;
    width: 36px;
    height: 36px
}

.xg-electron-win .v3-app-layout__header .loginButton span {
    display: none
}

.xg-electron-win .v3-app-layout__header .loginButton:hover::after {
    display: none
}

.xg-electron-win .v3-app-layout__header .BU-Component-Header-Avatar {
    display: flex;
    align-items: center;
    height: 64px
}

.xg-electron-win .v3-app-layout__header .BU-Component-Header-Avatar .avatar-overlay.unlogin {
    top: 30px !important
}

.xg-electron-win .v3-app-layout__header .BU-Component-Header-Avatar .avatar-overlay {
    right: 20px
}

.xg-electron-win .v3-app-layout__header .BU-Component-Header-Avatar .BU-Component-Header-Avatar__image {
    margin-right: 20px
}

.xg-electron.xg-electron-win .v3-app-layout__header .nav-list {
    display: none
}

.xg-electron.xg-electron-win .v3-app-layout__side__logo {
    display: block
}

.xg-electron.xg-electron-win .v3-app-layout__side__logo img {
    height: 40px
}

.xg-electron.xg-electron-win .v3-app-layout__side {
    padding-top: 0
}

.xg-electron.xg-electron-win .v3-app-layout__side,
.xg-electron.xg-electron-win .v3-app-layout__side__Normal__contentWrapper {
    width: 150px
}

.xg-electron.xg-electron-win .v3-app-layout__content {
    margin-left: 150px
}

.xg-electron.xg-electron-win .anyVideo-layout .v3-app-layout__content {
    margin-top: 40px
}

.xg-electron.xg-electron-win .MessageCenterV3,
.xg-electron.xg-electron-win .UserCenter,
.xg-electron.xg-electron-win .vipCenter {
    width: 1000px;
    margin: 0 auto
}

.v3-app-layout.teleplay__layout .siteHeader,
.v3-app-layout.projection__layout .siteHeader {
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .08)
}

html.fix-scroll {
    overflow-y: scroll
}

html.fix-scroll .dark {
    color: #fff
}

html,
body {
    background-color: #eaeaea;
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2240px auto;
    overscroll-behavior-y: none
}

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

.hr {
    height: .5px;
    background-color: var(--content-line)
}

.cl-warp__for_abcdefg {
    display: none;
    position: absolute;
    left: 3000px;
    top: 3000px;
    opacity: 0
}

[class^=sprite-],
[class*=" sprite-"] {
    display: inline-block;
    vertical-align: middle
}

[data-focus-visible-added].focus-visible:focus {
    box-shadow: 0 0 0 2px var(--brand) inset
}

.common-box-shadow {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .05), 0px 4px 16px rgba(0, 0, 0, .1), inset 0px 0px 0px 1px rgba(0, 0, 0, .08)
}

.v3-app-layout__side {
    background: var(--background-primary);
    box-sizing: content-box;
    border-right: .5px solid var(--content-line)
}

.v3-app-layout__side__logo {
    display: block;
    padding: 12px 16px;
    height: 72px;
    background-position-x: 16px
}

.v3-app-layout__side__Normal {
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat
}

.v3-app-layout__side__block-nav {
    padding: 0 12px 8px
}

.v3-app-layout__side__block-nav+.v3-app-layout__side__block-nav::before {
    content: "";
    display: block;
    height: .5px;
    background-color: var(--content-line);
    margin: 0px 12px 8px
}

.v3-app-layout__side__footer {
    margin-bottom: 18px;
    margin-top: 8px;
    bottom: 0px;
    padding-top: 18px;
    border-top: 1px solid var(--content-line)
}

.v3-app-layout__side__block-agreement {
    padding-left: 24px
}

.v3-app-layout__side__block-agreement a {
    margin-right: 12px;
    font-size: 12px;
    color: var(--content-secondary);
    line-height: 30px
}

.v3-app-layout__side__block-agreement a:hover {
    color: var(--content-secondary-hover)
}

.v3-app-layout__side__block-agreement span {
    font-size: 12px;
    color: #666;
    line-height: 30px
}

.v3-app-layout__side__block-public-info {
    margin-top: 20px;
    padding-left: 24px
}

.v3-app-layout__side__block-public-info>div,
.v3-app-layout__side__block-public-info>a {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 12px;
    color: var(--content-tertiary);
    display: block
}

.v3-app-layout__side__block-public-info a:hover {
    color: var(--content-secondary)
}

.v3-app-layout__side__block-public-info .police {
    display: flex;
    align-items: center
}

.v3-app-layout__side__block-public-info .police-icon {
    margin-right: 2px;
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/police_icon.a96098a1.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block;
    height: 16px;
    width: 16px
}

.v3-app-layout__side__block-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    height: 20px;
    margin-top: 15.5px;
    margin-bottom: 12px;
    padding-left: 16px;
    color: var(--content-secondary)
}

.v3-app-layout__side__item {
    height: 40px;
    padding: 10px 16px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center
}

.v3-app-layout__side__item.withImage {
    padding: 0;
    margin-bottom: 6px
}

.v3-app-layout__side__item.withImage:hover {
    background-color: transparent
}

.v3-app-layout__side__item.huiyuanzhuanxiang {
    color: #af6a38
}

.v3-app-layout__side__item.huiyuanzhuanxiang:hover {
    background: rgba(175, 106, 56, .08);
    border-radius: 4px;
    color: #af6a38
}

.v3-app-layout__side__item.huiyuanzhuanxiang .side-icon path {
    fill: #af6a38
}

.v3-app-layout__side__item.huiyuanzhuanxiang.active {
    color: #af6a38
}

.v3-app-layout__side__item.huiyuanzhuanxiang.active:hover {
    color: #af6a38
}

.v3-app-layout__side__item.huiyuanzhuanxiang.active .side-icon path {
    fill: #af6a38
}

.v3-app-layout__side__item .openIcon {
    height: 12px;
    width: 12px;
    margin-left: auto;
    display: none
}

.v3-app-layout__side__item .openIcon path {
    fill: var(--content-primary)
}

.v3-app-layout__side__item .side-icon path {
    fill: var(--content-primary)
}

.v3-app-layout__side__item.active {
    color: var(--brand);
    font-weight: 700
}

.v3-app-layout__side__item.active .side-icon path {
    fill: var(--brand)
}

.v3-app-layout__side__item.active:hover {
    color: var(--brand)
}

.v3-app-layout__side__item:hover {
    background-color: rgba(var(--accent-black), var(--opacity-4));
    color: var(--content-primary)
}

.v3-app-layout__side__item:hover .openIcon {
    display: initial
}

.v3-app-layout__side__item .side-icon {
    margin-right: 12px
}

.v3-app-layout__side__wza {
    width: 100px;
    height: 44px;
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/wza_light.53c0e863.png);
    background-size: 100% 100%;
    margin: 24px 24px 10px
}

:root[dark=true] .v3-app-layout__side__wza {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/wza_dark.4d6ea2e5.png)
}

.Components-UI__Button {
    text-align: center;
    color: #fff;
    cursor: pointer;
    outline: none;
    border: none
}

.Components-UI__Button:hover {
    opacity: .8
}

.Components-UI__Button.disabled {
    cursor: not-allowed;
    color: #fff !important;
    background: #cdcdcd !important
}

.Components-UI__Button.disabled:hover {
    opacity: 1
}

.Components-UI__Button {
    border-radius: 4px
}

.Components-UI__Button.round {
    border-radius: 19.2px
}

.Components-UI__Button {
    font-size: 16px;
    height: 40px;
    padding: 9px 37px
}

.Components-UI__Button.small {
    font-size: 13px;
    height: 32px;
    padding: 7px 30px
}

.Components-UI__Button.dangerous {
    background-color: var(--brand)
}

.Components-UI__Button.default {
    color: var(--content-primary);
    border: 1px solid #cdcdcd
}

.debugInfo__Container {
    width: 400px;
    background: var(--view-background-primary);
    padding: 20px;
    border-radius: 5px;
    z-index: 1400;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .08);
    overflow-wrap: break-word;
    word-break: break-all;
    position: relative
}

.debugInfo__Container ul {
    margin-bottom: 10px
}

.debugInfo__Container li {
    color: var(--content-primary)
}

.debugInfo__Container li span:first-of-type {
    color: #888;
    margin-right: 6px
}

.debugInfo__Container i::before {
    font-size: 20px;
    cursor: pointer;
    color: #ddd;
    position: absolute;
    top: 12px;
    right: 12px
}

.debugInfo__Container i:hover::before {
    color: var(--brand)
}

.siteHeader__logo {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/logo.6aae7c46.svg);
    background-position-y: center;
    background-size: 142px 48px;
    background-repeat: no-repeat
}

.xg-electron .siteHeader__logo {
    background-size: auto
}

.siteHeader__logo.siteHeader__logo-dark {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/logo_dark.b44a75f6.svg)
}

:root[dark=true] .siteHeader__logo {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/logo_dark.b44a75f6.svg)
}

.showGray {
    filter: gray !important;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%)
}

.showGray.isIE img {
    display: none
}

.SearchPreset {
    position: absolute;
    left: 0;
    top: 0;
    width: 320px;
    overflow: hidden;
    display: none;
    pointer-events: none
}

.SearchPreset.show {
    display: block
}

.SearchPreset ul.anima {
    transition: transform .5s
}

.SearchPreset li {
    height: 40px;
    padding-left: 17px;
    font-size: 14px;
    color: var(--content-secondary);
    display: flex;
    align-items: center
}

.Search-Association {
    margin: 8px
}

.Search-Association-loading {
    padding: 15px 0;
    text-align: center;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--content-tertiary)
}

.Search-Association-loading svg {
    stroke: var(--content-tertiary);
    margin-right: 6px
}

.Search-Association li {
    cursor: pointer;
    color: var(--content-primary);
    font-size: 14px;
    border-radius: 4px;
    padding: 0 8px;
    height: 32px;
    line-height: 32px
}

.Search-Association li i {
    color: var(--brand);
    font-weight: normal
}

.Search-Association li.active {
    background-color: rgba(var(--accent-black), var(--opacity-4))
}

.Search-Association li+li {
    margin-top: 4px
}

.Loading-1 {
    box-sizing: border-box;
    color: var(--brand);
    font-size: 10px;
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transform: translateZ(0);
    margin: 40px auto
}

.Loading-1__circular {
    animation: loading-1-rotate 2s linear infinite;
    height: 100%;
    width: 100%;
    transform-origin: center center;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}

.Loading-1__path {
    stroke-dasharray: 14px 200px;
    stroke-dashoffset: 0;
    animation: loading-1-dash 2s linear infinite;
    stroke-linecap: round;
    stroke: var(--brand)
}

@keyframes loading-1-rotate {
    100% {
        transform: rotate(396deg)
    }
}

@keyframes loading-1-dash {
    0% {
        stroke-dasharray: 13px 200px;
        stroke-dashoffset: 0px
    }

    60% {
        stroke-dasharray: 91px 200px;
        stroke-dashoffset: -50px
    }

    100% {
        stroke-dasharray: 91px 200px;
        stroke-dashoffset: -109px
    }
}

.Loading-1.middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0
}

@keyframes loading-1 {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.Loading-2 {
    display: inline-block
}

.Loading-2 i {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    animation-duration: .8s;
    animation-iteration-count: infinite;
    background-color: rgba(254, 16, 76, .2);
    animation-name: LoadingPoint;
    transform: translateY(-1px)
}

.Loading-2 i:last-child {
    margin-right: 8px
}

.Loading-2 i:nth-child(2) {
    animation-delay: .2666666667s
}

.Loading-2 i:nth-child(3) {
    animation-delay: .5333333333s
}

@keyframes LoadingPoint {

    0%,
    66%,
    100% {
        background-color: rgba(254, 16, 76, .2)
    }

    33% {
        background-color: #fe104c
    }
}

.Loading-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 14px;
    height: 14px
}

.Loading-3 .line {
    flex: 1;
    margin-left: 18%;
    height: 80%;
    border-radius: 2px;
    background-color: #fff
}

.Loading-3 .line_1 {
    animation: live-line-ani .75s ease-in-out .25s infinite
}

.Loading-3 .line_2 {
    animation: live-line-ani .75s ease-in-out .5s infinite
}

.Loading-3 .line_3 {
    animation: live-line-ani .75s ease-in-out infinite
}

@keyframes live-line-ani {
    0% {
        transform: scaleY(0.33)
    }

    50% {
        transform: scaleY(1)
    }

    100% {
        transform: scaleY(0.33)
    }
}

.Loading-4 {
    width: 44px;
    height: 44px;
    position: relative;
    background: #fff;
    border-radius: 50%
}

.Loading-4 .circle_left,
.Loading-4 .circle_right {
    width: 44px;
    height: 44px;
    position: absolute;
    top: 0;
    left: 0
}

.Loading-4 .circle_left div,
.Loading-4 .circle_right div {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    background: #cdcdcd;
    width: 44px;
    height: 44px;
    transform: rotate(-180deg)
}

.Loading-4 .circle_left div {
    clip: rect(auto, 25px, auto, auto)
}

.Loading-4 .circle_right div {
    clip: rect(0, auto, auto, 25px)
}

.Loading-4 .mask {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 12px;
    border-radius: 50%;
    color: #ccc;
    background: #fff;
    text-align: center
}

.Loading-4 .mask span {
    font-family: ByteNumber-Bold;
    font-size: 16px;
    color: var(--content-secondary)
}

.Loading-4 .mask span:after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 9px;
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/percent.ee49a4b5.svg)
}

.circleLoadingV2 {
    stroke: var(--brand);
    animation: 1.4s linear infinite svg-animation
}

@keyframes svg-animation {
    0% {
        transform: rotateZ(0deg)
    }

    100% {
        transform: rotateZ(360deg)
    }
}

@keyframes circle-animation {
    0% {
        stroke-dashoffset: 113.0973372;
        transform: rotate(0)
    }

    40% {
        stroke-dashoffset: 50.2654832;
        transform: rotate(45deg)
    }

    100% {
        stroke-dashoffset: 113.0973372;
        transform: rotate(360deg)
    }
}

.circleLoadingV2 circle {
    animation: 1.4s ease-in-out infinite both circle-animation;
    display: block;
    fill: transparent;
    stroke-linecap: round;
    stroke-dasharray: 125.663708;
    stroke-dashoffset: 113.0973372;
    stroke-width: 5px;
    transform-origin: 50% 50%
}

.search__history {
    position: relative
}

.search__history__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0
}

.search__history__title {
    line-height: 18px;
    color: var(--content-primary);
    outline: none
}

.search__history__clear {
    display: flex;
    align-items: center;
    line-height: 18px;
    right: 16px;
    top: 20px;
    font-size: 14px;
    color: var(--content-secondary);
    cursor: pointer;
    border: none;
    background: none
}

.search__history__clear svg {
    margin-right: 2px
}

.search__history__clear svg>path {
    fill: var(--content-secondary)
}

.search__history__clear:hover {
    color: var(--content-primary)
}

.search__history__clear:hover svg>path {
    margin-right: 2px;
    fill: var(--content-primary)
}

.search__history__list-container {
    position: relative;
    margin-left: -4px;
    margin-right: -4px;
    padding-top: 4px;
    padding-bottom: 4px
}

.search__history__list.placeholder {
    visibility: hidden;
    position: absolute;
    max-height: none
}

.search__history__item,
.search__history__btn {
    min-width: 32px;
    display: inline-block;
    margin: 4px;
    border-radius: 4px;
    background-color: rgba(var(--accent-black), var(--opacity-4));
    cursor: pointer
}

.search__history__item:hover,
.search__history__btn:hover {
    background-color: rgba(var(--accent-black), var(--opacity-8))
}

.search__history__item {
    position: relative;
    padding: 7px 12px;
    color: var(--content-primary);
    word-break: keep-all
}

.search__history__item__delete {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    width: 16px;
    height: 16px;
    margin-right: -5px;
    margin-top: -5px;
    border-radius: 50%;
    background-color: #ebebeb
}

:root[dark=true] .search__history__item__delete {
    background-color: #4d5054
}

:root[dark=true] .search__history__item__delete svg path {
    fill: #909399
}

.search__history__item__delete svg {
    width: 12px;
    height: 12px
}

.search__history__item__delete svg path {
    fill: #a3a7ad
}

.search__history__item:hover .search__history__item__delete {
    display: flex
}

.search__history__btn {
    width: 32px;
    height: 32px;
    margin-right: 0;
    padding: 7px;
    vertical-align: top
}

.search__history__btn svg path {
    fill: var(--content-primary)
}

.placeholder .search__history__btn {
    display: none
}

.SearchList__history {
    position: relative
}

.SearchList__history__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 16px 10px
}

.SearchList__history__title {
    line-height: 18px;
    color: var(--content-tertiary);
    outline: none
}

.SearchList__history__clear {
    display: flex;
    align-items: center;
    line-height: 18px;
    right: 16px;
    top: 20px;
    font-size: 14px;
    color: var(--content-tertiary);
    cursor: pointer;
    border: none;
    background: none
}

.SearchList__history__clear svg {
    margin-right: 2px
}

.SearchList__history__clear svg>path {
    fill: var(--content-tertiary)
}

.SearchList__history__clear:hover {
    color: var(--content-secondary)
}

.SearchList__history__clear:hover svg>path {
    margin-right: 2px;
    fill: var(--content-secondary)
}

.SearchList__history__list {
    font-size: 0;
    margin: 0 8px 8px
}

.SearchList__history__list li {
    border-radius: 4px;
    display: flex;
    padding: 0 8px;
    align-items: center;
    justify-content: flex-start;
    height: 32px;
    color: var(--content-primary);
    cursor: pointer;
    outline: none
}

.SearchList__history__list li+li {
    margin-top: 4px
}

.SearchList__history__list li>div {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: initial;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-word;
    line-height: 32px;
    font-size: 14px;
    margin-left: 12px;
    margin-right: auto
}

.SearchList__history__list li .clock {
    height: 18px;
    width: 18px
}

.SearchList__history__list li .delete {
    opacity: 0;
    padding: 2px
}

.SearchList__history__list li .delete:hover,
.SearchList__history__list li .delete:focus {
    opacity: 1;
    background-color: rgba(var(--accent-black), var(--opacity-4));
    border-radius: 4px
}

.SearchList__history__list li .delete:hover path,
.SearchList__history__list li .delete:focus path {
    fill: var(--content-secondary)
}

.SearchList__history__list li:nth-child(3n) {
    margin-right: 0
}

.SearchList__history__list li:hover,
.SearchList__history__list li:focus {
    background-color: rgba(var(--accent-black), var(--opacity-4))
}

.SearchList__history__list li:hover .delete,
.SearchList__history__list li:focus .delete {
    opacity: 1
}

.SearchList__history__list li path {
    fill: var(--content-secondary)
}

.SearchList {
    outline: none
}

.search__guess:not(:first-child) {
    margin-top: 12px
}

.search__guess-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--content-primary);
    padding: 8px 0
}

.search__guess-header__btn {
    color: var(--content-secondary);
    cursor: pointer
}

.search__guess-header__btn svg {
    margin-right: 2px;
    vertical-align: top
}

.search__guess-header__btn svg>path {
    fill: var(--content-secondary)
}

.search__guess-header__btn:hover {
    color: var(--content-primary)
}

.search__guess-header__btn:hover svg>path {
    fill: var(--content-primary)
}

.search__guess-list {
    width: calc(100% + 16px);
    display: flex;
    flex-wrap: wrap;
    margin-left: -8px
}

.search__guess-item {
    position: relative;
    display: flex;
    align-items: center;
    width: calc(50% - 6px);
    padding: 8px;
    padding-right: 20px;
    word-break: keep-all;
    color: var(--content-primary);
    cursor: pointer
}

.search__guess-item:nth-child(2n) {
    margin-left: 12px
}

.search__guess-item:hover::after {
    content: "";
    position: absolute;
    width: calc(100%);
    height: calc(18px + 16px);
    margin-left: -8px;
    border-radius: 4px;
    background-color: rgba(var(--accent-black), var(--opacity-4))
}

.search__guess-item__title {
    display: inline-block;
    height: 18px;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: initial;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-word
}

.search__guess-item__tag {
    display: inline-block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-left: 4px
}

.search__hotspot:not(:first-child) {
    margin-top: 12px
}

.search__hotspot-header {
    padding: 8px 0
}

.search__hotspot-header__title {
    width: 64px;
    height: 16px
}

.search__hotspot-list {
    margin-left: -4px
}

.search__hotspot-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 0;
    word-break: keep-all;
    color: var(--content-primary);
    cursor: pointer
}

.search__hotspot-item:hover::after {
    content: "";
    position: absolute;
    width: calc(100% + 8px + 4px);
    height: calc(18px + 20px);
    margin-left: -4px;
    border-radius: 4px;
    background-color: rgba(var(--accent-black), var(--opacity-4))
}

.search__hotspot-item:first-child .search__hotspot-item__info .search__hotspot-item__rank {
    color: var(--brand)
}

.search__hotspot-item:nth-child(2) .search__hotspot-item__info .search__hotspot-item__rank {
    color: #fe6433
}

.search__hotspot-item:nth-child(3) .search__hotspot-item__info .search__hotspot-item__rank {
    color: #ffa800
}

.search__hotspot-item__info {
    display: flex;
    flex-shrink: 1;
    flex-grow: 1;
    align-items: center
}

.search__hotspot-item__rank {
    display: inline-block;
    width: 20px;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    font-family: "SF Pro";
    font-weight: 590;
    color: var(--content-tertiary)
}

.search__hotspot-item__title {
    margin-left: 8px;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: initial;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-word
}

.search__hotspot-item__tag {
    width: 16px;
    height: 16px;
    margin-left: 4px
}

.search__hotspot-item__hot {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 27px;
    margin-right: 2px;
    font-size: 12px;
    line-height: 16px;
    color: var(--content-tertiary)
}

.search__hotspot-item__hot svg {
    margin-right: 2px
}

.search__hotspot-item__hot svg path {
    fill: var(--content-tertiary)
}

.searchPageV2 {
    min-width: 952px
}

.searchPageV2__container {
    width: 888px
}

@media screen and (min-width: 1152px) {
    .searchPageV2__container {
        width: 888px
    }
}

@media screen and (min-width: 1376px) {
    .searchPageV2__container {
        width: 1112px
    }
}

@media screen and (min-width: 1600px) {
    .searchPageV2__container {
        width: 1336px
    }
}

.search-wrap {
    position: relative;
    flex: 1;
    display: inline-block;
    height: 40px;
    max-width: 560px;
    z-index: 100
}

.search-wrap>.input-container .input:hover {
    background-color: rgba(var(--accent-black), var(--opacity-8))
}

.search-wrap.focus .input-container .input:hover {
    background-color: var(--background-primary)
}

.search-wrap.focus .input {
    background-color: var(--background-primary);
    border-color: rgba(var(--accent-black), 0.12)
}

.search-wrap.focus .input::placeholder {
    color: var(--content-secondary)
}

.search-wrap.focus .search-btn {
    --btn-color: var(--content-primary)
}

.search-wrap.focus .search-btn::after {
    background-color: var(--content-line)
}

.search-wrap.focus .search-btn:hover {
    background-color: rgba(var(--accent-black), var(--opacity-4))
}

.search-wrap .input-container {
    position: relative;
    height: 40px
}

.search-wrap .input-container .search-btn svg {
    height: 18px;
    width: 18px
}

.search-wrap .input {
    transition: background-color 200ms ease, outline 200ms ease, box-shadow 200ms ease;
    color: var(--content-primary);
    background-color: rgba(var(--accent-black), var(--opacity-4));
    padding: 0 100px 0px 16px;
    line-height: 20px;
    width: 100%;
    caret-color: var(--content-primary);
    box-sizing: border-box;
    height: 100%;
    font-size: 14px;
    border: 1px solid transparent;
    border-radius: 4px
}

.search-wrap .input::placeholder {
    color: transparent
}

.search-wrap .search-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 4px 4px 0px;
    border-radius: 4px;
    height: 32px;
    width: 72px;
    display: flex;
    cursor: pointer;
    font-size: 14px;
    line-height: 18px;
    align-items: center;
    right: 0px;
    top: 0px;
    --btn-color: var(--content-primary);
    color: var(--btn-color)
}

.search-wrap .search-btn svg {
    margin-right: 4px
}

.search-wrap .search-btn svg path {
    fill: var(--btn-color)
}

.search-wrap .search-btn:hover {
    background-color: rgba(var(--accent-black), var(--opacity-4))
}

.search-wrap .search-btn::after {
    content: "";
    position: absolute;
    left: -4px;
    display: block;
    width: 1px;
    pointer-events: none;
    height: 16px;
    background-color: var(--content-line)
}

.search-wrap .search-panel {
    background-color: var(--view-background-primary);
    margin: -1px;
    margin-top: 8px;
    box-sizing: border-box;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .05), 0px 4px 16px rgba(0, 0, 0, .1), inset 0px 0px 0px 1px rgba(0, 0, 0, .08);
    border-radius: 4px
}

.search-wrap .search-panel .search-panel__content-container {
    animation: searchPanelShow .1s ease-in forwards;
    overflow-y: scroll
}

.search-wrap .search-panel .input-container .search-btn svg {
    border-radius: 8px
}

@keyframes searchPanelShow {
    0% {
        max-height: 0px;
        opacity: .2
    }

    100% {
        max-height: 600px;
        opacity: 1
    }
}

.search-wrap.dark>.input-container .input {
    background-color: rgba(255, 255, 255, .12)
}

.search-with-detail {
    margin: 0 16px;
    padding-top: 8px;
    padding-bottom: 12px
}

.BU-Component-Header-Avatar {
    -webkit-user-select: none
}

.BU-Component-Header-Avatar__container {
    position: relative
}

.BU-Component-Header-Avatar__container a {
    display: inline-block
}

.BU-Component-Header-Avatar__container .BU-Component-Header-Avatar__image {
    position: relative;
    vertical-align: middle
}

.BU-Component-Header-Avatar__container .BU-Component-Header-Avatar__image__shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 50%
}

.BU-Component-Header-Avatar .avatar-overlay {
    pointer-events: none;
    opacity: 0;
    position: absolute;
    top: 36px;
    right: 0;
    padding-top: 8px
}

@keyframes loginPanelFadeIn {
    0% {
        top: 24px;
        opacity: 0
    }

    100% {
        top: 36px;
        opacity: 1
    }
}

@keyframes loginPanelFadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.BU-Component-Header-Avatar .avatar-overlay.fadeIn {
    pointer-events: auto;
    animation: loginPanelFadeIn .3s cubic-bezier(0.1, 0.8, 0.4, 1) forwards
}

.BU-Component-Header-Avatar .avatar-overlay.fadeOut {
    animation: loginPanelFadeOut .5s cubic-bezier(0.1, 0.8, 0.4, 1) forwards
}

.BU-Component-Header-Avatar .avatar-overlay.unlogin {
    left: initial;
    right: -17px
}

.BU-Component-Header-Avatar .avatar-overlay__container {
    width: 132px;
    padding: 8px;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .05), 0px 4px 16px rgba(0, 0, 0, .1);
    background-color: var(--view-background-primary)
}

.BU-Component-Header-Avatar .BU-Component-Header-Avatar__AvatarUnloginOverlay {
    width: 324px
}

.BU-Component-Header-Avatar__AvatarUnloginOverlay__bg {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/login_tip_bg.3aa48b1b.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 146px;
    position: relative;
    left: -1px;
    width: 101%
}

.BU-Component-Header-Avatar__AvatarUnloginOverlay__line {
    border-top: 1px solid var(--content-secondary);
    opacity: .2;
    width: 54px
}

.BU-Component-Header-Avatar__AvatarUnloginOverlay__title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: var(--content-primary);
    padding-top: 15px
}

.BU-Component-Header-Avatar__AvatarUnloginOverlay__title>p {
    padding: 0;
    margin: 0 14px
}

.BU-Component-Header-Avatar__AvatarUnloginOverlay__topics {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 18px;
    height: 110px
}

.BU-Component-Header-Avatar__AvatarUnloginOverlay__topics__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #666;
    font-size: 12px
}

.BU-Component-Header-Avatar__AvatarUnloginOverlay__topics__item>img {
    margin-bottom: 6px;
    width: 48px;
    height: 48px
}

.BU-Component-Header-Avatar__AvatarUnloginOverlay__login-area {
    background-color: #fff;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center
}

.BU-Component-Header-Avatar__AvatarUnloginOverlay__login-btn {
    width: 160px;
    height: 32px;
    line-height: 32px;
    color: #fff;
    font-weight: 500;
    border-radius: 2px;
    background-color: var(--brand);
    text-align: center;
    cursor: pointer
}

.BU-Component-Header-Avatar__AvatarUnloginOverlay__login-btn:hover {
    background-image: none;
    background-color: var(--brand)
}

.BU-Component-Header-Avatar__AvatarLoginedOverlay {
    border: 1px solid rgba(0, 0, 0, .08);
    box-sizing: border-box;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, .05), 0px 4px 16px rgba(0, 0, 0, .1);
    font-size: 14px
}

.BU-Component-Header-Avatar__AvatarLoginedOverlay__detail {
    border-bottom: 1px solid var(--content-line)
}

.BU-Component-Header-Avatar__AvatarLoginedOverlay__detail>a {
    display: flex;
    padding: 24px 24px 22px
}

.BU-Component-Header-Avatar__AvatarLoginedOverlay__avatar {
    max-width: 100%;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden
}

.BU-Component-Header-Avatar__AvatarLoginedOverlay__avatar>span {
    vertical-align: middle;
    margin-left: 8px;
    color: var(--content-primary)
}

.BU-Component-Header-Avatar__AvatarLoginedOverlay__links {
    display: flex;
    padding-bottom: 8px;
    flex-direction: column
}

.BU-Component-Header-Avatar__AvatarLoginedOverlay__links a {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    padding-left: 12px;
    color: var(--content-primary)
}

.BU-Component-Header-Avatar__AvatarLoginedOverlay__links a svg {
    margin-right: 12px;
    width: 18px;
    height: 18px
}

.BU-Component-Header-Avatar__AvatarLoginedOverlay__links a:hover {
    background-color: rgba(var(--accent-black), var(--opacity-4))
}

.BU-Component-Header-Avatar__AvatarLoginedOverlay__links path {
    fill: var(--content-primary)
}

.BU-Component-Header-Avatar__AvatarLoginedOverlay__logout-area {
    padding-top: 8px
}

.BU-Component-Header-Avatar__AvatarLoginedOverlay__logout-area path {
    fill: var(--content-primary)
}

.BU-Component-Header-Avatar__AvatarLoginedOverlay__logout-btn {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    padding-left: 12px;
    color: var(--content-primary);
    background: none;
    border: none;
    width: 100%
}

.BU-Component-Header-Avatar__AvatarLoginedOverlay__logout-btn svg {
    margin-right: 12px;
    width: 18px;
    height: 18px
}

.BU-Component-Header-Avatar__AvatarLoginedOverlay__logout-btn:hover {
    background-color: rgba(var(--accent-black), var(--opacity-4))
}

.BU-Component-Header-Avatar__AvatarLoginedOverlay .icon-v3_logout {
    font-size: 20px;
    margin-right: 16px
}

.BU-Component-Header-Avatar .loginedAvatar {
    margin-left: 16px
}

.BU-Component-Header-Avatar .icon-v3_user_settings,
.BU-Component-Header-Avatar .icon-v3_user_center,
.BU-Component-Header-Avatar .icon-v3_vip_center {
    color: #666
}

.searchPageV2 {
    min-width: 952px
}

.searchPageV2__container {
    width: 888px
}

@media screen and (min-width: 1152px) {
    .searchPageV2__container {
        width: 888px
    }
}

@media screen and (min-width: 1376px) {
    .searchPageV2__container {
        width: 1112px
    }
}

@media screen and (min-width: 1600px) {
    .searchPageV2__container {
        width: 1336px
    }
}

.siteHeader {
    background: var(--background-primary);
    z-index: 1300;
    position: relative;
    min-width: 980px
}

.siteHeader__inner {
    margin: 0 auto;
    height: 64px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1
}

.siteHeader__inner .v3-app-layout__logo-wrap {
    flex-shrink: 0
}

.siteHeader__inner .left-wrap {
    flex-shrink: 0;
    width: 200px
}

.siteHeader__inner .electron__link {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 190px;
    width: 30px;
    height: 32px;
    font-size: 24px;
    color: #666;
    transform: rotate(180deg);
    cursor: pointer;
    -webkit-app-region: no-drag
}

.siteHeader__inner .electron__link:hover {
    color: #ff142b
}

.siteHeader__inner .right-wrap {
    padding: 0 32px;
    min-width: 952px;
    width: 100%;
    min-width: auto
}

.siteHeader__inner .right-content {
    margin: 0 auto;
    display: flex
}

@media(max-width: 1280px) {
    .siteHeader__inner .right-content {
        margin: 0
    }
}

.siteHeader__inner .btn-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto
}

.siteHeader__inner .nav-list {
    font-size: 14px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    color: var(--content-primary);
    margin-left: 24px
}

.siteHeader__inner .nav-list .siteHeader__textBtn {
    user-select: none;
    border-radius: 4px
}

.siteHeader__inner .nav-list .siteHeader__textBtn div {
    display: flex;
    align-items: center;
    line-height: 18px;
    padding: 6px 8px
}

.siteHeader__inner .nav-list .siteHeader__textBtn.withIcon div {
    padding: 6px 8px 6px 6px
}

.siteHeader__inner .nav-list .siteHeader__textBtn svg {
    margin-right: 4px;
    width: 18px;
    height: 18px
}

.siteHeader__inner .nav-list .siteHeader__textBtn svg path {
    fill: var(--content-primary)
}

.siteHeader__inner .nav-list .siteHeader__textBtn:hover {
    background-color: rgba(var(--accent-black), var(--opacity-4))
}

.siteHeader__inner .nav-list li {
    cursor: pointer;
    margin-left: 12px
}

.siteHeader__inner .nav-list li:last-of-type {
    margin-left: 8px
}

.siteHeader__inner .nav-list .red-dot {
    position: relative
}

.siteHeader__inner .nav-list .red-dot.dot::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 100%;
    width: 6px;
    height: 6px;
    border-radius: 6px;
    background-color: var(--brand)
}

.siteHeader__shadow {
    position: absolute;
    top: 0;
    width: 100%;
    height: 88px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.197188) 11.64%, rgba(0, 0, 0, 0.189867) 22.02%, rgba(0, 0, 0, 0.17873) 31.27%, rgba(0, 0, 0, 0.164472) 39.52%, rgba(0, 0, 0, 0.147786) 46.89%, rgba(0, 0, 0, 0.129365) 53.5%, rgba(0, 0, 0, 0.109904) 59.5%, rgba(0, 0, 0, 0.090096) 64.99%, rgba(0, 0, 0, 0.070635) 70.1%, rgba(0, 0, 0, 0.0522145) 74.97%, rgba(0, 0, 0, 0.0355283) 79.72%, rgba(0, 0, 0, 0.02127) 84.47%, rgba(0, 0, 0, 0.0101334) 89.35%, rgba(0, 0, 0, 0.00281215) 94.48%, rgba(0, 0, 0, 0) 100%)
}

.siteHeader__divider {
    width: 1px;
    height: 16px;
    background-color: rgba(var(--accent-black), var(--opacity-8))
}

.siteHeader.withShadow {
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .08)
}

.siteHeader.withSearchPageV2 {
    box-shadow: 0px 1px 0 0 rgba(12, 13, 15, .06)
}

.siteHeader__message {
    position: relative
}

.siteHeader__message .message-icon-wrapper {
    display: inline-flex;
    position: relative
}

.siteHeader__message__num {
    position: absolute;
    padding: 0 3px;
    min-width: 14px;
    height: 16px;
    line-height: 16px;
    min-width: 16px;
    font-size: 12px;
    text-align: center;
    border-radius: 16px;
    background-color: var(--brand);
    color: #fff;
    left: 6px;
    box-shadow: 0 0 0 1px var(--background-primary);
    top: -9px
}

.siteHeader__message__num.length-2 {
    top: -10px
}

.siteHeader__message__num.length-3 {
    top: -11px
}

.siteHeader.dark {
    background-color: rgba(0, 0, 0, .96)
}

.siteHeader.dark .search-wrap.focus .input-container .input:hover {
    background-color: var(--background-primary)
}

.siteHeader.dark .search-wrap.focus .input {
    background-color: var(--background-primary);
    border-color: rgba(var(--accent-black), 0.12)
}

.siteHeader.dark .search-wrap.focus .input::placeholder {
    color: var(--content-secondary)
}

.siteHeader.dark .search-wrap.focus .search-btn {
    --btn-color: var(--content-primary)
}

.siteHeader.dark .search-wrap.focus .search-btn::after {
    background-color: var(--content-line)
}

.siteHeader.dark .search-wrap.focus .search-btn:hover {
    background-color: rgba(var(--accent-black), var(--opacity-4))
}

.siteHeader.dark .search-wrap .search-btn {
    --btn-color: var(--content-secondary-dark)
}

.siteHeader.dark .search-wrap .search-btn:hover {
    background-color: rgba(255, 255, 255, .08)
}

.siteHeader.dark .search-wrap .search-btn::after {
    background-color: rgba(225, 227, 229, .12)
}

.siteHeader.dark .search-btn svg:hover {
    background-color: rgba(255, 255, 255, .08)
}

.siteHeader.dark .nav-list li {
    color: var(--content-primary-dark)
}

.siteHeader.dark .nav-list .siteHeader__divider {
    background-color: rgba(255, 255, 255, .16)
}

.siteHeader.dark .siteHeader__textBtn .siteHeader__message__num {
    box-shadow: none
}

.siteHeader.dark .siteHeader__textBtn svg>path {
    fill: var(--content-primary-dark)
}

.siteHeader.dark .siteHeader__textBtn:hover {
    background-color: rgba(255, 255, 255, .08);
    border-color: #232324
}

.siteHeader.dark .BU-Component-Header-Avatar__image {
    box-shadow: inset 0px 0px 0px 1px #232324;
    border: none
}

.header-theme--Transparent .siteHeader {
    background: transparent
}

.header-theme--Transparent .siteHeader .search-wrap.focus .input-container .input:hover {
    background-color: var(--background-primary)
}

.header-theme--Transparent .siteHeader .search-wrap.focus .input {
    background-color: var(--background-primary);
    border-color: rgba(var(--accent-black), 0.12)
}

.header-theme--Transparent .siteHeader .search-wrap.focus .input::placeholder {
    color: var(--content-secondary)
}

.header-theme--Transparent .siteHeader .search-wrap.focus .search-btn {
    --btn-color: var(--content-primary)
}

.header-theme--Transparent .siteHeader .search-wrap.focus .search-btn::after {
    background-color: var(--content-line)
}

.header-theme--Transparent .siteHeader .search-wrap.focus .search-btn:hover {
    background-color: rgba(var(--accent-black), var(--opacity-4))
}

.header-theme--Transparent .siteHeader .search-wrap:not(.focus) .input {
    background-color: rgba(255, 255, 255, .16);
    color: rgba(var(--accent-content-inverse), 0.9);
    caret-color: var(--content-inverse)
}

.header-theme--Transparent .siteHeader .search-wrap:not(.focus) .input-container {
    border-color: transparent
}

.header-theme--Transparent .siteHeader .search-wrap:not(.focus) .input-container input:hover {
    box-shadow: inherit;
    border-color: transparent
}

.header-theme--Transparent .siteHeader .search-wrap:not(.focus) .search-btn::after {
    background: rgba(255, 255, 255, .3)
}

.header-theme--Transparent .siteHeader .search-wrap:not(.focus) .search-btn:hover {
    background-color: rgba(255, 255, 255, .12)
}

.header-theme--Transparent .siteHeader .search-wrap:not(.focus) .search-btn {
    --btn-color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.15))
}

.header-theme--Transparent .siteHeader .search-wrap:not(.focus) .SearchPreset li {
    color: rgba(var(--accent-content-inverse), 0.9);
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.15))
}

.header-theme--Transparent .siteHeader .siteHeader__inner .nav-list {
    color: var(--content-inverse)
}

.header-theme--Transparent .siteHeader .siteHeader__inner .nav-list>li {
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.15))
}

.header-theme--Transparent .siteHeader .siteHeader__inner .nav-list .siteHeader__divider {
    background-color: rgba(255, 255, 255, .16)
}

.header-theme--Transparent .siteHeader .siteHeader__inner .nav-list .siteHeader__textBtn {
    color: var(--content-inverse)
}

.header-theme--Transparent .siteHeader .siteHeader__inner .nav-list .siteHeader__textBtn svg>path {
    fill: var(--content-inverse)
}

.header-theme--Transparent .siteHeader .siteHeader__inner .nav-list .siteHeader__textBtn:hover {
    background-color: rgba(255, 255, 255, .08)
}

.header-theme--Transparent .siteHeader .BU-Component-Header-Avatar .loginButton {
    background-color: #fff;
    font-weight: normal;
    color: var(--content-primary)
}

.header-theme--Transparent .siteHeader .BU-Component-Header-Avatar .BU-Component-Header-Avatar__image {
    box-shadow: none
}

.header-theme--Transparent .siteHeader .siteHeader__message__num {
    box-shadow: none
}

.transitionTheme {
    background: transparent;
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionBg
}

.transitionTheme .search-wrap.focus .input-container .input:hover {
    background-color: var(--background-primary)
}

.transitionTheme .search-wrap.focus .input {
    background-color: var(--background-primary);
    border-color: rgba(var(--accent-black), 0.12)
}

.transitionTheme .search-wrap.focus .input::placeholder {
    color: var(--content-secondary)
}

.transitionTheme .search-wrap.focus .search-btn {
    --btn-color: var(--content-primary)
}

.transitionTheme .search-wrap.focus .search-btn::after {
    background-color: var(--content-line)
}

.transitionTheme .search-wrap.focus .search-btn:hover {
    background-color: rgba(var(--accent-black), var(--opacity-4))
}

.transitionTheme .search-wrap:not(.focus) .input {
    background-color: rgba(255, 255, 255, .16);
    color: rgba(var(--accent-content-inverse), 0.9);
    caret-color: var(--content-inverse)
}

.transitionTheme .search-wrap:not(.focus) .input-container {
    border-color: transparent
}

.transitionTheme .search-wrap:not(.focus) .input-container input:hover {
    box-shadow: inherit;
    border-color: transparent
}

.transitionTheme .search-wrap:not(.focus) .search-btn::after {
    background: rgba(255, 255, 255, .3)
}

.transitionTheme .search-wrap:not(.focus) .search-btn:hover {
    background-color: rgba(255, 255, 255, .12)
}

.transitionTheme .search-wrap:not(.focus) .search-btn {
    --btn-color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.15))
}

.transitionTheme .search-wrap:not(.focus) .SearchPreset li {
    color: rgba(var(--accent-content-inverse), 0.9);
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.15))
}

.transitionTheme .siteHeader__inner .nav-list {
    color: var(--content-inverse)
}

.transitionTheme .siteHeader__inner .nav-list>li {
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.15))
}

.transitionTheme .siteHeader__inner .nav-list .siteHeader__divider {
    background-color: rgba(255, 255, 255, .16)
}

.transitionTheme .siteHeader__inner .nav-list .siteHeader__textBtn {
    color: var(--content-inverse)
}

.transitionTheme .siteHeader__inner .nav-list .siteHeader__textBtn svg>path {
    fill: var(--content-inverse)
}

.transitionTheme .siteHeader__inner .nav-list .siteHeader__textBtn:hover {
    background-color: rgba(255, 255, 255, .08)
}

.transitionTheme .BU-Component-Header-Avatar .loginButton {
    background-color: #fff;
    font-weight: normal;
    color: var(--content-primary)
}

.transitionTheme .BU-Component-Header-Avatar .BU-Component-Header-Avatar__image {
    box-shadow: none
}

.transitionTheme .siteHeader__message__num {
    box-shadow: none
}

@keyframes transitionBg {
    from {
        background-color: rgba(var(--accent-white), 0)
    }

    to {
        background-color: rgba(var(--accent-white), 1)
    }
}

.transitionTheme .loginButton {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionLoginBtn
}

@keyframes transitionLoginBtn {
    to {
        background-color: var(--brand);
        color: var(--content-inverse)
    }
}

@keyframes transitionBtnSvg {
    to {
        fill: var(--content-primary)
    }
}

.transitionTheme .siteHeader__textBtn {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionBtnText
}

@keyframes transitionBtnText {
    to {
        color: var(--content-primary)
    }
}

.transitionTheme .siteHeader__textBtn svg>path {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionBtnSvg
}

.transitionTheme .siteHeader__upload {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionUpload
}

.transitionTheme .siteHeader__upload path {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionBtnSvg
}

.transitionTheme .search-wrap .input {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionInput
}

@keyframes transitionInput {
    to {
        filter: none;
        background-color: rgba(var(--accent-black), var(--opacity-4));
        color: var(--content-primary)
    }
}

.transitionTheme .search-wrap .input::placeholder {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionInputPlaceholder
}

@keyframes transitionInputPlaceholder {
    to {
        color: var(--content-primary)
    }
}

.transitionTheme .search-wrap .search-btn {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionSearchIcon
}

@keyframes transitionSearchIcon {
    to {
        filter: none;
        color: var(--content-secondary);
        --btn-color: var(--content-secondary)
    }
}

.transitionTheme .search-wrap .search-btn::after {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionSearchBtnAfter
}

@keyframes transitionSearchBtnAfter {
    to {
        background-color: var(--content-line)
    }
}

.transitionTheme .search-wrap .search-btn svg>path {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionSearchBtnSvg
}

@keyframes transitionSearchBtnSvg {
    to {
        fill: var(--content-secondary);
        --btn-color: var(--content-secondary)
    }
}

.transitionTheme .SearchPreset li {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionPreset
}

@keyframes transitionPreset {
    to {
        filter: none;
        color: var(--content-secondary)
    }
}

.layoutstatus-side--Hidden .siteHeader__inner .left-wrap {
    padding-left: 16px;
    width: auto
}

.layoutstatus-side--Hidden .siteHeader__inner .left-wrap .siteHeader__logo {
    display: block;
    width: 129.8px;
    height: 44px;
    background-size: 129.8px 44px
}

.layoutstatus-side--Hidden .siteHeader__inner .search-wrap {
    margin-left: 24px
}

.siteHeader.immersiveTheme .siteHeader__inner .right-wrap .right-content {
    height: 64px;
    align-items: center
}

.siteHeader.immersiveTheme .siteHeader__inner .right-wrap .right-content.showAnimation {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionImmersive
}

@keyframes transitionImmersive {
    from {
        padding-left: 24px;
        padding-right: 24px;
        background-color: var(--transitionBackgroundFrom--)
    }

    to {
        padding-left: 0;
        padding-right: 0;
        background-color: var(--transitionBackgroundTo--)
    }
}

.siteHeader.immersiveTheme .siteHeader__inner .right-wrap .right-content.noAnimation {
    background-color: var(--transitionBackgroundFrom--)
}

.siteHeader.immersiveTheme .left-wrap {
    height: 64px;
    display: flex;
    align-items: center;
    background-color: var(--transitionBackgroundFrom--)
}

.siteHeader.immersiveTheme .search-wrap.focus .input-container .input:hover {
    background-color: var(--background-primary)
}

.siteHeader.immersiveTheme .search-wrap.focus .input {
    background-color: var(--background-primary);
    border-color: rgba(var(--accent-black), 0.12)
}

.siteHeader.immersiveTheme .search-wrap.focus .input::placeholder {
    color: var(--content-secondary)
}

.siteHeader.immersiveTheme .search-wrap.focus .search-btn {
    --btn-color: var(--content-primary)
}

.siteHeader.immersiveTheme .search-wrap.focus .search-btn::after {
    background-color: var(--content-line)
}

.siteHeader.immersiveTheme .search-wrap.focus .search-btn:hover {
    background-color: rgba(var(--accent-black), var(--opacity-4))
}

.siteHeader.immersiveTheme .search-wrap:not(.focus) .input {
    background-color: var(--transitionSearchInputBg--);
    color: var(--transitionSearchWord--);
    caret-color: var(--content-inverse)
}

.siteHeader.immersiveTheme .search-wrap:not(.focus) .input::placeholder {
    color: var(--transitionSearchWord--)
}

.siteHeader.immersiveTheme .search-wrap:not(.focus) .input-container {
    border-color: transparent
}

.siteHeader.immersiveTheme .search-wrap:not(.focus) .input-container input:hover {
    box-shadow: inherit;
    border-color: transparent
}

.siteHeader.immersiveTheme .search-wrap:not(.focus) .search-btn::after {
    background: var(--transitionSearchDivider--)
}

.siteHeader.immersiveTheme .search-wrap:not(.focus) .search-btn:hover {
    background-color: var(--transitionLinkHover--)
}

.siteHeader.immersiveTheme .search-wrap:not(.focus) .search-btn {
    --btn-color: var(--transitionSearchBtn--);
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.15))
}

.siteHeader.immersiveTheme .search-wrap:not(.focus) .SearchPreset li {
    color: rgba(var(--accent-content-inverse), 0.9);
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.15))
}

.siteHeader.immersiveTheme .siteHeader__inner .nav-list {
    color: var(--transitionRightText--)
}

.siteHeader.immersiveTheme .siteHeader__inner .nav-list>li {
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.15))
}

.siteHeader.immersiveTheme .siteHeader__inner .nav-list .siteHeader__textBtn {
    color: var(--transitionRightText--)
}

.siteHeader.immersiveTheme .siteHeader__inner .nav-list .siteHeader__textBtn svg>path {
    fill: var(--transitionRightText--)
}

.siteHeader.immersiveTheme .siteHeader__inner .nav-list .siteHeader__textBtn:hover {
    background-color: var(--transitionLinkHover--)
}

.siteHeader.immersiveTheme .BU-Component-Header-Avatar .loginButton {
    background-color: var(--transitionLoginBtnBg--);
    font-weight: normal;
    color: var(--transitionLoginBtnText--)
}

.siteHeader.immersiveTheme .BU-Component-Header-Avatar .BU-Component-Header-Avatar__image {
    box-shadow: none
}

.siteHeader.immersiveTheme .siteHeader__message__num {
    box-shadow: none
}

.siteHeader.immersiveTheme .loginButton {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionLoginBtn
}

@keyframes transitionLoginBtn {
    to {
        background-color: var(--brand);
        color: var(--content-inverse)
    }
}

@keyframes transitionBtnSvg {
    to {
        fill: var(--content-primary)
    }
}

.siteHeader.immersiveTheme .siteHeader__textBtn {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionBtnText
}

@keyframes transitionBtnText {
    to {
        color: var(--content-primary)
    }
}

.siteHeader.immersiveTheme .siteHeader__textBtn svg>path {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionBtnSvg
}

.siteHeader.immersiveTheme .siteHeader__upload {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionUpload
}

.siteHeader.immersiveTheme .siteHeader__upload path {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionBtnSvg
}

.siteHeader.immersiveTheme .search-wrap .input {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionInput
}

@keyframes transitionInput {
    to {
        filter: none;
        background-color: rgba(var(--accent-black), var(--opacity-4));
        color: var(--content-primary)
    }
}

.siteHeader.immersiveTheme .search-wrap .input::placeholder {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionInputPlaceholder
}

@keyframes transitionInputPlaceholder {
    to {
        color: var(--content-primary)
    }
}

.siteHeader.immersiveTheme .search-wrap .search-btn {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionSearchIcon
}

@keyframes transitionSearchIcon {
    to {
        filter: none;
        color: var(--content-secondary);
        --btn-color: var(--content-secondary)
    }
}

.siteHeader.immersiveTheme .search-wrap .search-btn::after {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionSearchBtnAfter
}

@keyframes transitionSearchBtnAfter {
    to {
        background-color: var(--content-line)
    }
}

.siteHeader.immersiveTheme .search-wrap .search-btn svg>path {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionSearchBtnSvg
}

@keyframes transitionSearchBtnSvg {
    to {
        fill: var(--content-secondary);
        --btn-color: var(--content-secondary)
    }
}

.siteHeader.immersiveTheme .SearchPreset li {
    animation-duration: 100s;
    animation-play-state: paused;
    animation-delay: var(--transitionDelayTime--);
    animation-name: transitionPreset
}

@keyframes transitionPreset {
    to {
        filter: none;
        color: var(--content-secondary)
    }
}

.ReportDialog {
    background-color: var(--view-background-primary);
    width: 380px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.ReportDialog__head {
    display: flex;
    font-size: 16px;
    color: var(--content-primary);
    padding: 24px;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    line-height: 22px;
    position: relative
}

.ReportDialog__head.line:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background-color: var(--content-line)
}

.ReportDialog__head>i {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 100% 100%;
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/close_v1.38f0bed7.png);
    cursor: pointer
}

.ReportDialog__content {
    flex: 1;
    position: relative;
    overflow-y: auto;
    padding-left: 24px;
    margin-right: 4px;
    margin-bottom: -12px
}

.ReportDialog__content::-webkit-scrollbar {
    width: 6px
}

.ReportDialog__content::-webkit-scrollbar-track {
    background: transparent
}

.ReportDialog__content::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: rgba(var(--accent-black), 0.08)
}

.ReportDialog__content::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-black), 0.08)
}

.ReportDialog__content_wrap {
    width: 332px
}

.ReportDialog__loading {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.ReportDialog__loading .Loading-1 {
    margin: 0
}

.ReportDialog__bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    padding: 24px;
    background-color: var(--view-background-primary)
}

.ReportDialog__bottom.line:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background-color: var(--content-line)
}

.ReportDialog__bottom_tip {
    position: absolute;
    right: 64px;
    bottom: 64px;
    transform: translateX(50%);
    padding: 0 12px;
    border-radius: 4px;
    text-align: center;
    line-height: 33px;
    color: #fff;
    background-color: rgba(0, 0, 0, .8);
    white-space: nowrap;
    font-size: 14px;
    font-weight: normal
}

@media(max-width: 1024px) {
    .ReportDialog__bottom_tip {
        font-size: 12px;
        line-height: 30px
    }
}

.ReportDialog__btn {
    min-width: 80px;
    padding: 0 16px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid #cdcdcd;
    color: var(--content-primary);
    font-size: 14px;
    background: none;
    margin-left: 12px;
    font-weight: 500
}

.ReportDialog__btn:hover {
    border-color: var(--brand);
    color: var(--brand)
}

.ReportDialog__btn.report_btn {
    border: none;
    color: #fff;
    background: linear-gradient(243.18deg, #ff358d -0.83%, #ff0000 99.8%)
}

.ReportDialog__btn.report_btn:hover:not(.disabled) {
    background: red
}

.ReportDialog__btn.report_btn.disabled {
    background: linear-gradient(243.18deg, #ff358d -0.83%, #ff0000 99.8%);
    opacity: .4;
    cursor: no-drop
}

.ReportDialogItem__level1 {
    cursor: pointer;
    margin-bottom: 12px
}

.ReportDialogItem__level1_title {
    vertical-align: middle;
    display: inline-block;
    line-height: 20px;
    color: var(--content-primary);
    margin-left: 8px
}

.ReportDialogItem__radio {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    vertical-align: middle;
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/checked.fd0674d0.svg)
}

.ReportDialogItem__radio:hover {
    background-position-x: 42px
}

.ReportDialogItem__radio.checked {
    background-position-x: 28px
}

.ReportDialogItem__radio.checked:hover {
    background-position-x: 14px
}

.ReportDialogItem .ant-radio-wrapper {
    line-height: 0
}

.ReportDialogItem .ant-radio-wrapper .ant-radio .ant-radio-inner {
    width: 14px;
    height: 14px;
    border-radius: 1px solid var(--content-secondary)
}

.ReportDialogItem .ant-radio-wrapper .ant-radio .ant-radio-inner:hover {
    border-color: red
}

.ReportDialogItem .ant-radio-wrapper .ant-radio .ant-radio-inner:after {
    background: none
}

.ReportDialogItem .ant-radio-wrapper .ant-radio.ant-radio-checked .ant-radio-inner {
    border: none;
    background: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/checked.fd0674d0.svg)
}

.ReportDialogItem .ant-radio-wrapper .ant-radio.ant-radio-checked::after {
    border: 1px solid red
}

.ReportDialogItem .ant-radio-wrapper>span {
    vertical-align: middle;
    line-height: 20px;
    color: var(--content-primary)
}

.ReportDialogItem__level1 {
    line-height: 0
}

.ReportDialogItem__link {
    margin-bottom: 12px;
    color: #034b9f;
    font-size: 0;
    display: inline-block;
    vertical-align: top
}

.ReportDialogItem__link:hover {
    color: #034b9f
}

.ReportDialogItem__link span,
.ReportDialogItem__link i {
    vertical-align: middle;
    font-size: 12px;
    line-height: 17px;
    display: inline-block
}

.ReportDialogItem__link i {
    transform: scale(0.7)
}

.ReportSelect {
    margin-bottom: 12px
}

@keyframes antSlideUpOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.ReportSelect .ant-select {
    width: 100%;
    height: 48px
}

.ReportSelect .ant-select.ant-select-focused .ant-select-selection {
    box-shadow: none
}

.ReportSelect .ant-select.ant-select-open .ant-select-selection .ant-select-arrow {
    transform: rotate(180deg)
}

.ReportSelect .ant-select .ant-select-selection {
    width: 100%;
    height: 100%;
    background-color: rgba(var(--accent-content-primary), 0.08);
    border: none;
    transition: none
}

.ReportSelect .ant-select .ant-select-selection__rendered {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
    margin: 0
}

.ReportSelect .ant-select .ant-select-selection__placeholder {
    padding: 0 12px;
    font-size: 14px;
    color: var(--content-secondary)
}

.ReportSelect .ant-select .ant-select-selection-selected-value {
    color: var(--content-primary);
    font-size: 14px
}

.ReportSelect .ant-select .ant-select-selection .ant-select-arrow {
    transition: all .2s
}

.ReportSelect .ant-select .ant-select-selection .ant-select-arrow i {
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/arrow.be2f76ae.svg);
    width: 8px;
    height: 6px;
    display: inline-block
}

.ReportSelect .ant-select .ant-select-selection:hover {
    background-color: rgba(var(--accent-content-primary), 0.08)
}

.ReportSelect__dropdown.ant-select-dropdown {
    z-index: 100009;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, .2);
    padding: 12px 0;
    background-color: var(--view-background-secondary)
}

.ReportSelect__dropdown.ant-select-dropdown .ant-select-dropdown-menu-item {
    height: 40px;
    padding: 0 12px;
    line-height: 40px;
    font-size: 14px;
    color: var(--content-primary)
}

.ReportSelect__dropdown.ant-select-dropdown .ant-select-dropdown-menu-item.ant-select-dropdown-menu-item-selected {
    font-weight: normal;
    background-color: rgba(var(--accent-black), var(--opacity-4))
}

.ReportSelect__dropdown.ant-select-dropdown .ant-select-dropdown-menu-item-active {
    background: none
}

.ReportSelect__dropdown.ant-select-dropdown .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
    background-color: rgba(var(--accent-black), var(--opacity-4))
}

.ReportInput {
    margin-bottom: 12px
}

.ReportInput__area {
    background-color: var(--view-background-secondary);
    height: 96px;
    padding: 12px 0 12px 12px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    position: relative
}

.ReportInput__area textarea {
    background: none;
    border: none;
    font-size: 14px;
    color: var(--content-primary);
    line-height: 20px;
    flex: 1;
    margin-right: 4px;
    padding-right: 8px
}

.ReportInput__area textarea::-webkit-input-placeholder {
    color: var(--content-secondary)
}

.ReportInput__input {
    position: relative
}

.ReportInput__input .ant-input {
    width: 100%;
    height: 48px;
    border: none;
    background-color: var(--view-background-secondary);
    border-radius: 4px;
    padding: 12px;
    color: var(--content-primary)
}

.ReportInput__input .ant-input::-webkit-input-placeholder {
    color: var(--content-secondary)
}

.ReportInput__outrange_tip {
    color: red;
    font-size: 12px;
    line-height: 17px;
    margin-top: 8px;
    display: none
}

.ReportInput__count {
    line-height: 20px;
    text-align: right;
    font-size: 14px;
    color: var(--content-secondary);
    padding-right: 12px
}

.ReportInput.outrange .ReportInput__area::after,
.ReportInput.outrange .ReportInput__input::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid red;
    top: 0;
    left: 0;
    border-radius: 4px;
    pointer-events: none
}

.ReportInput.outrange .ReportInput__count span {
    color: red
}

.ReportInput.outrange .ReportInput__outrange_tip {
    display: block
}

.ReportUploadImg {
    margin-bottom: 12px
}

.ReportUploadImg .img-zone .dropzone-container {
    outline: none
}

.ReportUploadImg .img-zone .dropzone-container .upload-container .img-wrapper,
.ReportUploadImg .img-zone .dropzone-container .upload-container .dropzone-button,
.ReportUploadImg .img-zone .dropzone-container .upload-container .uploading {
    width: 105px;
    height: 105px;
    margin-right: 8px;
    margin-top: 8px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden
}

.ReportUploadImg .img-zone .dropzone-container .upload-container .img-wrapper:nth-child(3n),
.ReportUploadImg .img-zone .dropzone-container .upload-container .dropzone-button:nth-child(3n),
.ReportUploadImg .img-zone .dropzone-container .upload-container .uploading:nth-child(3n) {
    margin-right: 0
}

.ReportUploadImg .img-zone .dropzone-container .upload-container .img-wrapper:nth-child(1),
.ReportUploadImg .img-zone .dropzone-container .upload-container .img-wrapper:nth-child(2),
.ReportUploadImg .img-zone .dropzone-container .upload-container .img-wrapper:nth-child(3),
.ReportUploadImg .img-zone .dropzone-container .upload-container .dropzone-button:nth-child(1),
.ReportUploadImg .img-zone .dropzone-container .upload-container .dropzone-button:nth-child(2),
.ReportUploadImg .img-zone .dropzone-container .upload-container .dropzone-button:nth-child(3),
.ReportUploadImg .img-zone .dropzone-container .upload-container .uploading:nth-child(1),
.ReportUploadImg .img-zone .dropzone-container .upload-container .uploading:nth-child(2),
.ReportUploadImg .img-zone .dropzone-container .upload-container .uploading:nth-child(3) {
    margin-top: 0
}

.ReportUploadImg .img-zone .dropzone-container .upload-container .img-wrapper {
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #f7f7f7
}

.ReportUploadImg .img-zone .dropzone-container .upload-container .img-wrapper .delete {
    position: absolute;
    width: 18px;
    height: 18px;
    top: 8px;
    right: 8px;
    background-color: rgba(var(--accent-content-primary), 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: 12px
}

.ReportUploadImg .img-zone .dropzone-container .upload-container .img-wrapper .delete>.icon-close:before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/close.9eb5628b.svg)
}

.ReportUploadImg .img-zone .dropzone-container .upload-container .img-wrapper .delete:hover {
    background-color: rgba(var(--accent-content-primary), 0.4)
}

.ReportUploadImg .img-zone .dropzone-container .upload-container .dropzone-button {
    background-color: #f7f7f7
}

.ReportUploadImg .img-zone .dropzone-container .upload-container .dropzone-button:hover {
    background-color: rgba(var(--accent-content-primary), 0.08)
}

.ReportUploadImg .img-zone .dropzone-container .upload-container .uploading {
    background-color: #f7f7f7;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.ReportUploadImg .img-zone .dropzone-container .upload-container .uploading .Loading-4 {
    width: 50px;
    height: 50px
}

.ReportUploadImg .img-zone .dropzone-container .upload-container .uploading .Loading-4 .circle_left,
.ReportUploadImg .img-zone .dropzone-container .upload-container .uploading .Loading-4 .circle_right {
    width: 50px;
    height: 50px
}

.ReportUploadImg .img-zone .dropzone-container .upload-container .uploading .Loading-4 .circle_left div,
.ReportUploadImg .img-zone .dropzone-container .upload-container .uploading .Loading-4 .circle_right div {
    width: 50px;
    height: 50px
}

.ReportUploadImg .img-zone .dropzone-container .upload-container .uploading .Loading-4 .mask {
    top: 4px;
    left: 4px;
    width: 42px;
    height: 42px;
    background: #f7f7f7;
    line-height: 42px
}

.ReportUploadImg .img-zone .dropzone-container .upload-container .uploading .Loading-4 .mask span {
    display: inline-block;
    transform: translateY(2px)
}

.ReportUploadImg .img-zone .dropzone-container .note {
    display: none
}

.ReportUploadImg__button {
    text-align: center
}

.ReportUploadImg__button i {
    display: block;
    width: 28px;
    height: 28px;
    margin: 26px auto 6px;
    background-image: url(https://lf3-cdn-tos.bdxiguastatic.com/obj/ixigua-static/xigua_fe/xigua_video_web_pc/static/media/button.939e63e7.svg)
}

.ReportUploadImg__button span {
    font-size: 14px;
    color: var(--content-secondary);
    line-height: 20px
}

.ReportDialog.fill_dialog {
    width: 420px
}

.ReportDialog.fill_dialog .ReportDialog__head {
    padding-bottom: 12px
}

.ReportDialog.fill_dialog .ReportDialog__content {
    line-height: 24px;
    color: var(--content-primary);
    word-break: break-all;
    padding-bottom: 0;
    margin-bottom: 0
}

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

.win-nav-list a {
    font-size: 20px;
    display: inline-block;
    line-height: 1;
    color: #2c2c2c;
    cursor: pointer
}

.win-nav-list a:hover {
    color: #ff142b
}

.win-nav-list .icon-bell-svg path {
    fill: #000
}

.win-nav-list .icon-bell-svg:hover path {
    fill: #ff142b !important
}

.userDetail__layout .win-nav-list .icon-bell-svg path {
    fill: #000
}

.userDetail__layout .transitionTheme .win-nav-list .icon-bell-svg path {
    fill: #fff
}

.loginBenefitNotification {
    z-index: 1301;
    top: 60px !important
}

.loginBenefitNotification .arrow {
    position: absolute;
    height: 13px;
    width: 13px;
    transform: rotate(45deg);
    background-color: var(--view-background-primary);
    transform-origin: center;
    top: -6px;
    right: 39px;
    border-top-left-radius: 2px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-right: none;
    border-bottom: none
}

.loginBenefitNotification__login_content::before {
    content: " ";
    width: 180px;
    height: 1px;
    background: var(--content-line);
    display: inline-block;
    margin-bottom: 8px
}

.loginBenefitNotification__login_content_item {
    color: var(--content-primary);
    line-height: 24px;
    font-size: 15px;
    height: 24px;
    margin-top: 16px;
    display: flex;
    align-items: center
}

.loginBenefitNotification__login_content_item span {
    padding-left: 12px
}

.loginBenefitNotification__login_button {
    margin-top: 23px;
    margin-right: 4px;
    width: 180px;
    height: 36px;
    border-radius: 2px;
    background: var(--brand);
    color: #fff;
    font-size: 14px;
    line-height: 36px;
    text-align: center;
    cursor: pointer
}

.loginBenefitNotification.xg-notification {
    padding: 12px 12px 16px 16px !important
}

.loginBenefitNotification .xg-notification-noicon,
.loginBenefitNotification .xg-notification-info {
    width: 180px
}

.loginBenefitNotification .xg-notification-noicon .xg-notification-desc,
.loginBenefitNotification .xg-notification-info .xg-notification-desc {
    margin-top: 12px
}

.loginBenefitNotification .xg-notification-noicon .xg-notification-title,
.loginBenefitNotification .xg-notification-info .xg-notification-title {
    font-size: 15px;
    line-height: 20px
}

.v3-app-layout__loading {
    top: 0;
    height: 2px;
    position: fixed;
    z-index: 1303;
    width: 0px;
    background-color: var(--brand);
    animation: grow 2.5s ease-out forwards
}

@keyframes grow {
    0% {
        width: 0px
    }

    100% {
        width: 95vw
    }
}

.v3-app-layout {
    position: relative;
    min-height: calc(100vh);
    background-color: var(--background-primary)
}

.v3-app-layout__header {
    min-width: 1024px;
    width: 100%;
    height: 64px;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 1300
}

.v3-app-layout__header.dark {
    background-color: #18171a
}

.layoutstatus-header--Normal .v3-app-layout__content {
    /* padding-top: 64px */
}

.header-theme--Dark .icon-menu {
    color: #666
}

.header-theme--Dark .icon-menu:hover {
    background-color: rgba(255, 255, 255, .1)
}

.v3-app-layout__side {
    width: 200px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1301
}

.v3-app-layout__side__Normal,
.v3-app-layout__side__Short {
    position: relative;
    z-index: 999;
    height: calc(100vh - 72px);
    background-color: var(--background-primary);
    overflow-y: hidden
}

.v3-app-layout__side__Normal::-webkit-scrollbar,
.v3-app-layout__side__Short::-webkit-scrollbar {
    width: 10px
}

.v3-app-layout__side__Normal::-webkit-scrollbar-track,
.v3-app-layout__side__Short::-webkit-scrollbar-track {
    background: transparent
}

.v3-app-layout__side__Normal::-webkit-scrollbar-thumb,
.v3-app-layout__side__Short::-webkit-scrollbar-thumb {
    border-radius: 5px;
    height: 10px;
    background: #ccc
}

.v3-app-layout__side__Normal:hover,
.v3-app-layout__side__Short:hover {
    overflow-y: auto;
    overflow-x: hidden
}

.v3-app-layout__side__Normal:hover::-webkit-scrollbar-thumb,
.v3-app-layout__side__Short:hover::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-black), 0.08);
    border: 2px solid var(--background-primary)
}

.v3-app-layout__side__Normal__contentWrapper {
    position: relative;
    width: 200px
}

.v3-app-layout__side__ArrowBtn {
    position: absolute;
    top: 50%;
    right: -26px;
    width: 70px;
    height: 70px;
    border-radius: 35px;
    margin-top: -35px;
    background-color: #fff;
    cursor: pointer;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .16);
    z-index: 999
}

.v3-app-layout__side__ArrowBtn i {
    color: #666;
    position: absolute;
    top: 27px;
    right: 10px;
    font-size: 16px;
    transform: rotate(90deg);
    transition: all .5s
}

.v3-app-layout__content {
    margin-left: 200px
}

.layoutstatus-header--Hidden .v3-app-layout__header {
    display: none
}

.layoutstatus-header--Hidden .v3-app-layout__side {
    top: 0
}

.layoutstatus-side--Hidden .v3-app-layout__side {
    display: none
}

.layoutstatus-side--Hidden .v3-app-layout__content {
    margin-left: 0
}

.layoutstatus-side--Short .v3-app-layout__side {
    width: 68px
}

.layoutstatus-side--Short .v3-app-layout__side__ArrowBtn i {
    transform: rotate(-90deg)
}

.layoutstatus-side--Short .v3-app-layout__content {
    margin-left: 68px
}

@media screen and (min-width: 2240px) {
    .limitWidth.v3-app-layout {
        max-width: 2240px;
        margin: 0 auto
    }

    .limitWidth.v3-app-layout .v3-app-layout__header .siteHeader {
        max-width: 2240px;
        margin: 0 auto
    }

    .limitWidth.v3-app-layout .v3-app-layout__side {
        left: calc(50vw - 2240px / 2)
    }
}

@media screen and (min-width: 2240px) {
    .limitWidth.fixedSideContainer {
        margin: 0 calc(50vw - $maxScreenWidth / 2)
    }
}

.v3-app-layout.gray-page {
    background-color: var(--background-secondary)
}

.offline {
    position: relative;
    height: calc(100vh - 64px);
    background: #fff
}

.offline__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center
}

.offline__content__img {
    margin: 0 auto;
    display: block
}

.offline__content__img path {
    fill: rgba(var(--accent-black), var(--opacity-8))
}

.offline__content__title {
    margin-top: 24px;
    font-size: 21px;
    font-weight: 500;
    line-height: 29px
}

.offline__content__desc {
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px
}

.offline__content__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    width: 88px;
    height: 32px;
    font-size: 14px;
    font-weight: 500;
    background-color: rgba(0, 0, 0, .05);
    border-radius: 2px;
    border: none;
    outline: none
}

.tt-img {
    opacity: 0
}

.tt-img[src] {
    opacity: 1
}

.tt-img-wrapper {
    width: 100%;
    height: auto
}

.browser-upgrade-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 661px;
    height: 458px;
    border-radius: 2px;
    background-color: #fff;
    font-family: "PingFang SC", "SF Pro SC", "SF Pro Text", "Microsoft YaHei", "Arial", sans-serif
}

.browser-upgrade-dialog__header {
    position: relative;
    width: 100%;
    height: 66px;
    padding: 20px 24px 0;
    box-shadow: inset 0px -0.5px 1px #eaeaea
}

.browser-upgrade-dialog__header .icon-close {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 20px;
    cursor: pointer
}

.browser-upgrade-dialog__header .icon-close::before {
    color: var(--content-secondary)
}

.browser-upgrade-dialog__header .icon-close:hover::before {
    color: var(--content-primary)
}

.browser-upgrade-dialog__content {
    padding: 40px 60px 0
}

.browser-upgrade-dialog__content .browser-upgrade-dialog__title {
    margin-bottom: 16px
}

.browser-upgrade-dialog__footer {
    display: flex;
    height: 40px;
    padding: 0 20px;
    margin-top: 36px
}

.browser-upgrade-dialog__title {
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: var(--content-primary)
}

.browser-upgrade-dialog__desc {
    margin-bottom: 30px;
    font-size: 14px;
    line-height: 20px;
    color: #666
}

.browser-upgrade-dialog__browser-wrapper {
    display: flex
}

.browser-upgrade-dialog__browser {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
    height: 114px;
    padding: 20px 0;
    border: 1px solid var(--content-line);
    border-radius: 2px;
    cursor: pointer;
    color: #666
}

.browser-upgrade-dialog__browser-logo {
    width: 38px;
    height: 38px;
    margin-bottom: 15px
}

.browser-upgrade-dialog__browser-name {
    font-size: 14px;
    line-height: 20px;
    text-align: center
}

.browser-upgrade-dialog__browser:not(:first-child) {
    margin-left: 12px
}

.browser-upgrade-dialog__browser:hover {
    box-shadow: 0px 4px 20px rgba(0, 0, 0, .1);
    border: 1px solid #cdcdcd;
    color: var(--content-primary)
}

.browser-upgrade-dialog__no-notify {
    margin-left: auto;
    font-size: 14px;
    line-height: 20px;
    color: #666;
    cursor: pointer
}

.browser-upgrade-dialog__checkbox {
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border-radius: 2px;
    border: solid 1px #aaa;
    display: inline-block;
    vertical-align: -22%;
    position: relative
}

.browser-upgrade-dialog__checkbox.checked {
    border: solid 1px red;
    background-color: red
}

.browser-upgrade-dialog__checkbox .icon-done {
    font-size: 12px;
    line-height: 12px;
    color: #fff
}

.browser-upgrade-dialog__checkbox .icon-done::before {
    vertical-align: top
}

.browser-upgrade-dialog__watermark {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1
}

.browser-upgrade-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    background: #fff3e9
}

.browser-upgrade-banner__notice {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #ff8d15
}

.browser-upgrade-banner__notice span {
    color: #ff8d15;
    margin-left: 4px
}

.browser-upgrade-banner__button {
    display: flex;
    margin-left: 16px;
    font-size: 14px;
    color: var(--brand);
    cursor: pointer
}

.browser-upgrade-banner .icon-warning {
    font-size: 20px
}

.browser-upgrade-banner .icon-warning::before {
    color: #ff8d15
}

.browser-upgrade-banner .icon-side_content {
    margin-left: 4px;
    margin-bottom: 2px;
    transform: rotate(270deg)
}

.header-theme--Dark .browser-upgrade-banner {
    display: none
}

.xgpc-input__wrapper {
    position: relative;
    background-color: var(--view-background-secondary)
}

.xgpc-input input,
.xgpc-input textarea {
    display: block;
    width: 100%;
    font-size: 14px;
    line-height: 1.96;
    border: none;
    border-radius: 4px;
    background-color: var(--view-background-secondary);
    color: var(--content-primary)
}

.xgpc-input input::placeholder,
.xgpc-input textarea::placeholder {
    color: var(--content-secondary)
}

.xgpc-input input {
    height: 48px;
    padding: 14px 12px;
    padding-right: 50px
}

.xgpc-input textarea {
    height: 82px;
    padding: 12px
}

.xgpc-input__count {
    position: absolute;
    right: 12px;
    bottom: 14px;
    height: 20px;
    font-size: 14px;
    color: var(--content-secondary)
}

.xgpc-input__count.outnumber span:first-child {
    color: var(--brand)
}

.xgpc-input__error {
    margin-top: 8px;
    font-size: 12px;
    line-height: 17px;
    color: var(--brand)
}

.xgpc-input__text {
    margin-top: 8px;
    font-size: 12px;
    line-height: 17px;
    color: var(--content-secondary)
}

.xgpc-input.error input {
    border: 1px solid var(--brand)
}

.xgpc-input.textarea .xgpc-input__wrapper {
    padding-bottom: 40px
}

.UserCenter__profile-edit-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 24px;
    border-radius: 2px;
    background-color: var(--view-background-primary)
}

.UserCenter__profile-edit-modal .Components-UI__Button {
    width: 80px;
    height: 36px;
    padding: 9px 0;
    font-size: 14px;
    line-height: 18px
}

.UserCenter__profile-edit-modal .Components-UI__Button:first-child {
    background: var(--background-primary)
}

.UserCenter__profile-edit-modal__title {
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: var(--content-primary);
    margin-bottom: 24px
}

.UserCenter__profile-edit-modal__content {
    width: 372px
}

.UserCenter__profile-edit-modal .icon-close {
    position: absolute;
    top: 26px;
    right: 23px;
    color: #bbb;
    font-size: 18px;
    cursor: pointer
}

.UserCenter__profile-edit-modal__btn-group {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px
}

.UserCenter__profile-edit-modal__btn-group .dangerous {
    margin-left: 12px
}

.UserCenter__profile-edit-modal .icon-close {
    background: none;
    border: none;
    outline: none
}

.ReactCrop {
    position: relative;
    display: inline-block;
    cursor: crosshair;
    width: 100%
}

.ReactCrop>div:first-child {
    overflow: hidden;
    width: 100%
}

.ReactCrop:focus {
    outline: none
}

.ReactCrop--disabled,
.ReactCrop--locked {
    cursor: inherit
}

.ReactCrop__image {
    display: block;
    width: 100%;
    touch-action: manipulation
}

.ReactCrop__crop-selection {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate3d(0, 0, 0);
    box-sizing: border-box;
    cursor: move;
    box-shadow: 0 0 0 500px rgba(255, 255, 255, .9);
    touch-action: manipulation;
    border: 1px solid;
    border-image-source: url("data:image/gif;base64,R0lGODlhCgAKAJECAAAAAP///////wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEI5RDc5MTFDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEI5RDc5MTBDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEBQoAAgAsAAAAAAoACgAAAhWEERkn7W3ei7KlagMWF/dKgYeyGAUAIfkEBQoAAgAsAAAAAAoACgAAAg+UYwLJ7RnQm7QmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYgLJHdiinNSAVfOEKoUCACH5BAUKAAIALAAAAAAKAAoAAAIRVISAdusPo3RAzYtjaMIaUQAAIfkEBQoAAgAsAAAAAAoACgAAAg+MDiem7Q8bSLFaG5il6xQAIfkEBQoAAgAsAAAAAAoACgAAAg+UYRLJ7QnQm7SmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYBLJDdiinNSEVfOEKoECACH5BAUKAAIALAAAAAAKAAoAAAIRFISBdusPo3RBzYsjaMIaUQAAOw==");
    border-image-slice: 1;
    border-image-repeat: repeat;
    border-radius: 50%
}

.ReactCrop--disabled .ReactCrop__crop-selection {
    cursor: inherit
}

.ReactCrop--circular-crop .ReactCrop__crop-selection {
    border-radius: 50%;
    box-shadow: 0px 0px 1px 1px #fff, 0 0 0 500px rgba(255, 255, 255, .9)
}

.ReactCrop--invisible-crop .ReactCrop__crop-selection {
    display: none
}

.ReactCrop__rule-of-thirds-vt::before,
.ReactCrop__rule-of-thirds-vt::after,
.ReactCrop__rule-of-thirds-hz::before,
.ReactCrop__rule-of-thirds-hz::after {
    content: "";
    display: block;
    position: absolute;
    background-color: rgba(255, 255, 255, .4)
}

.ReactCrop__rule-of-thirds-vt::before,
.ReactCrop__rule-of-thirds-vt::after {
    width: 1px;
    height: 100%
}

.ReactCrop__rule-of-thirds-vt::before {
    left: 33.3333%;
    left: calc(100% / 3)
}

.ReactCrop__rule-of-thirds-vt::after {
    left: 66.6666%;
    left: calc(100% / 3 * 2)
}

.ReactCrop__rule-of-thirds-hz::before,
.ReactCrop__rule-of-thirds-hz::after {
    width: 100%;
    height: 1px
}

.ReactCrop__rule-of-thirds-hz::before {
    top: 33.3333%;
    top: calc(100% / 3)
}

.ReactCrop__rule-of-thirds-hz::after {
    top: 66.6666%;
    top: calc(100% / 3 * 2)
}

.ReactCrop__drag-handle {
    position: absolute
}

.ReactCrop__drag-handle::after {
    position: absolute;
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background: #000;
    border: 2px solid #fff;
    border-radius: 50%;
    box-sizing: border-box;
    outline: 1px solid transparent
}

.ReactCrop .ord-nw {
    top: 0;
    left: 0;
    margin-top: -6px;
    margin-left: -6px;
    cursor: nw-resize
}

.ReactCrop .ord-nw::after {
    top: 0;
    left: 0
}

.ReactCrop .ord-n {
    top: 0;
    left: 50%;
    margin-top: -6px;
    margin-left: -6px;
    cursor: n-resize
}

.ReactCrop .ord-n::after {
    top: 0
}

.ReactCrop .ord-ne {
    top: 0;
    right: 0;
    margin-top: -6px;
    margin-right: -6px;
    cursor: ne-resize
}

.ReactCrop .ord-ne::after {
    top: 0;
    right: 0
}

.ReactCrop .ord-e {
    top: 50%;
    right: 0;
    margin-top: -6px;
    margin-right: -6px;
    cursor: e-resize
}

.ReactCrop .ord-e::after {
    right: 0
}

.ReactCrop .ord-se {
    bottom: 0;
    right: 0;
    margin-bottom: -6px;
    margin-right: -6px;
    cursor: se-resize
}

.ReactCrop .ord-se::after {
    bottom: 0;
    right: 0
}

.ReactCrop .ord-s {
    bottom: 0;
    left: 50%;
    margin-bottom: -6px;
    margin-left: -6px;
    cursor: s-resize
}

.ReactCrop .ord-s::after {
    bottom: 0
}

.ReactCrop .ord-sw {
    bottom: 0;
    left: 0;
    margin-bottom: -6px;
    margin-left: -6px;
    cursor: sw-resize
}

.ReactCrop .ord-sw::after {
    bottom: 0;
    left: 0
}

.ReactCrop .ord-w {
    top: 50%;
    left: 0;
    margin-top: -6px;
    margin-left: -6px;
    cursor: w-resize
}

.ReactCrop .ord-w::after {
    left: 0
}

.ReactCrop__disabled .ReactCrop__drag-handle {
    cursor: inherit
}

.ReactCrop__drag-bar {
    position: absolute
}

.ReactCrop__drag-bar.ord-n {
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    margin-top: -3px
}

.ReactCrop__drag-bar.ord-e {
    right: 0;
    top: 0;
    width: 6px;
    height: 100%;
    margin-right: -3px
}

.ReactCrop__drag-bar.ord-s {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    margin-bottom: -3px
}

.ReactCrop__drag-bar.ord-w {
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    margin-left: -3px
}

.ReactCrop--new-crop .ReactCrop__drag-bar,
.ReactCrop--new-crop .ReactCrop__drag-handle,
.ReactCrop--fixed-aspect .ReactCrop__drag-bar {
    display: none
}

.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,
.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,
.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,
.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {
    display: none
}

@media(pointer: coarse) {

    .ReactCrop .ord-n,
    .ReactCrop .ord-e,
    .ReactCrop .ord-s,
    .ReactCrop .ord-w {
        display: none
    }

    .ReactCrop__drag-handle {
        width: 24px;
        height: 24px
    }
}

.UserCenter__profile-edit-avatar__upload {
    position: absolute;
    top: 25px;
    right: 24px;
    text-align: right;
    font-size: 14px;
    line-height: 20px;
    color: #666;
    background: #fff;
    cursor: pointer
}

.UserCenter__profile-edit-avatar__wrapper {
    display: flex;
    justify-content: space-between
}

.UserCenter__profile-edit-avatar__left {
    width: 88px;
    margin-top: 5px
}

.UserCenter__profile-edit-avatar__right {
    width: 270px;
    height: 270px;
    padding: 5px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f7f7f7
}

.UserCenter__profile-edit-avatar__preview {
    font-size: 12px;
    line-height: 17px;
    text-align: center;
    color: #999
}

.UserCenter__profile-edit-avatar .UserCenter__profile-edit-avatar__wrapper {
    margin-right: -5px
}

.UserCenter__profile-edit-avatar .UserCenter__profile-edit-modal__btn-group {
    margin-top: 19px
}

.newuser-profile-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 2px;
    background-color: #fff
}

.newuser-profile-dialog .Components-UI__Button {
    flex: 1;
    height: 48px;
    padding: 13px 0;
    font-size: 16px;
    line-height: 22px
}

.newuser-profile-dialog__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 18px;
    box-shadow: 0px 1px 0px #eaeaea
}

.newuser-profile-dialog__title {
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: #000
}

.newuser-profile-dialog__skip {
    font-size: 14px;
    line-height: 20px;
    color: #666;
    cursor: pointer
}

.newuser-profile-dialog__main {
    width: 380px;
    padding: 0 50px
}

.newuser-profile-dialog__main .xgpc-input {
    margin: 34px auto 0
}

.newuser-profile-dialog__avatar {
    display: block;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    margin: 28px auto 0;
    cursor: pointer
}

.newuser-profile-dialog__avatar-btn {
    display: block;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    color: #666;
    margin: 8px auto 0;
    cursor: pointer
}

.newuser-profile-dialog__avatar-btn img {
    margin-right: 4px
}

.newuser-profile-dialog .icon-close {
    position: absolute;
    top: 26px;
    right: 23px;
    color: #bbb;
    font-size: 18px;
    cursor: pointer
}

.newuser-profile-dialog__btn-group {
    display: flex;
    justify-content: flex-end;
    width: 380px;
    padding: 0 50px;
    margin-top: 30px;
    margin-bottom: 50px
}

.newuser-profile-dialog__btn-group .dangerous {
    margin-left: 12px
}

.UserCenter__profile-edit-avatar.UserCenter__profile-edit-modal.newuser-profile-dialog {
    padding: 0
}

.UserCenter__profile-edit-avatar.UserCenter__profile-edit-modal.newuser-profile-dialog .UserCenter__profile-edit-modal__title {
    padding: 20px 24px 18px;
    box-shadow: 0px 1px 0px #eaeaea;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    color: #000
}

.UserCenter__profile-edit-avatar.UserCenter__profile-edit-modal.newuser-profile-dialog .UserCenter__profile-edit-modal__content {
    padding: 0 24px;
    width: 380px
}

.UserCenter__profile-edit-avatar.UserCenter__profile-edit-modal.newuser-profile-dialog .UserCenter__profile-edit-modal__btn-group {
    padding: 0 50px;
    margin-bottom: 50px
}

.UserCenter__profile-edit-avatar.UserCenter__profile-edit-modal.newuser-profile-dialog .UserCenter__profile-edit-avatar__left {
    width: 80px
}

.UserCenter__profile-edit-avatar.UserCenter__profile-edit-modal.newuser-profile-dialog .UserCenter__profile-edit-avatar__right {
    width: 242px
}

.xguploader-preview {
    display: flex;
    flex-wrap: wrap
}

.xguploader-preview-item {
    position: relative;
    margin-right: 16px
}

.xguploader-preview-img {
    width: 93px;
    height: 93px;
    border-radius: 4px;
    object-fit: cover
}

.xguploader-preview-delete {
    position: absolute;
    width: 18px;
    height: 18px;
    padding: 2px;
    top: 8px;
    right: 8px;
    border-radius: 50%;
    background-color: rgba(19, 22, 26, .2);
    cursor: pointer
}

.xguploader-preview-delete img {
    display: block;
    width: 100%;
    height: 100%
}

.xguploader-pic.xguploader-pic--hidden {
    display: none
}

.xguploader-pic .ant-upload {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 93px;
    height: 93px;
    border-radius: 8px;
    background-color: var(--background-secondary);
    cursor: pointer
}

.xguploader-pic-category {
    margin-top: 6px;
    font-size: 14px;
    line-height: 20px;
    color: var(--content-secondary)
}

.feedback_dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 434px;
    height: 600px;
    padding: 36px;
    border-radius: 2px;
    background-color: var(--view-background-primary);
    color: var(--content-primary)
}

.feedback_dialog__title {
    height: 24px;
    margin-bottom: 24px;
    font-size: 17px;
    font-weight: 500
}

.feedback_dialog__block {
    position: relative;
    margin-bottom: 24px
}

.feedback_dialog__label {
    min-height: 21px;
    margin-bottom: 12px;
    font-size: 15px
}

.feedback_dialog__input {
    display: block;
    width: 100%;
    padding: 12px;
    font-size: 14px;
    line-height: 1.86;
    border: none;
    color: var(--content-primary);
    border-radius: 2px;
    background-color: var(--view-background-secondary)
}

.feedback_dialog__input::placeholder {
    color: var(--content-secondary)
}

.feedback_dialog__wrapper {
    border-radius: 2px;
    background-color: var(--view-background-secondary)
}

.feedback_dialog__wrapper.error {
    border: 1px solid var(--brand)
}

.feedback_dialog textarea {
    height: 140px
}

.feedback_dialog textarea::-webkit-scrollbar {
    width: 6px
}

.feedback_dialog textarea::-webkit-scrollbar-track {
    background: transparent
}

.feedback_dialog textarea::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: rgba(var(--accent-black), 0.08)
}

.feedback_dialog textarea::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-black), 0.08)
}

.feedback_dialog textarea::-webkit-scrollbar-track {
    background-color: var(--view-background-secondary)
}

.feedback_dialog__count {
    position: absolute;
    right: 12px;
    bottom: 12px;
    height: 20px;
    font-size: 14px;
    color: var(--content-secondary)
}

.feedback_dialog__count.outnumber {
    color: var(--brand)
}

.feedback_dialog__footer {
    display: flex;
    justify-content: space-between
}

.feedback_dialog__footer .Components-UI__Button {
    width: 168px;
    height: 46px;
    padding: 0;
    line-height: 46px;
    border-radius: 2px;
    border: solid 1px rgba(0, 0, 0, .08);
    font-size: 15px
}

.feedback_dialog__footer .Components-UI__Button:first-child {
    color: var(--content-primary);
    background: var(--background-primary)
}

.feedback_dialog .icon-close {
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer
}

.feedback_dialog .icon-close::before {
    color: #bdbdbd
}

.feedback_dialog .xguploader-preview .ant-upload,
.feedback_dialog .xguploader-preview .xguploader-preview-img {
    background: initial;
    width: 70px;
    height: 70px;
    border-radius: 2px
}

.feedback_dialog .xguploader-preview .ant-upload-select {
    border: 1px solid rgba(var(--accent-black), var(--opacity-12))
}

.feedback_dialog .xguploader-preview .ant-upload-select svg {
    transform: scale(0.857)
}

.feedback_dialog .xguploader-preview .xguploader-pic-category {
    font-size: 12px
}

.feedback_dialog .xguploader-preview .xguploader-preview-delete {
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px
}

@media screen and (max-height: 600px) {
    .feedback_dialog {
        top: 80px;
        transform: translateX(-50%)
    }
}