给博客添加个充电按钮(仿B站)
阅读原文时间:2023年07月10日阅读:2

今天我准备吧B站的充电按钮移植到本博客,开始~

上代码:

HTML

<html>
    <head>
        <link href="./space.8.f69f7d6f8fbedc95d9c6de110515943ee7b4dd33.css"
            rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="./space.11.f69f7d6f8fbedc95d9c6de110515943ee7b4dd33.css">
    </head>
    <body>
        <div id="app" class="owner">
            <div class="s-space">
                <div>
                    <div id="page-index" class="wrapper clearfix">
                        <div class="col-2">
                            <div class="section elec" style="">
                                <div class="elec-action">
                                    <div class="elec-trigger"><span class="elec-trigger-icon icon"></span>为TA充电</div>
                                    <div class="elec-map">
                                        <div class="elec-status">共
                                            <span class="elec-count">0</span>人
                                        </div>
                                        <div class="elec-status-bg"></div>
                                        <div class="elec-status-bg-grey"></div>
                                    </div>
                                    <div id="elec-hover-bg-preloader"></div>
                                </div>
                                <!---->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!---->
        </div>
    </body>
</html>

CSS(两个)

.live {
    display: block;
    width: 220px;
}

.live:hover .live-on-hover {
    opacity: 1;
}

.live-col {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

.live-col .live-text {
    font-size: 14px;
    margin-left: 20px;
}

.live-col .live-text-view {
    margin-top: 12px;
}

.live-on {
    position: relative;
    width: 220px;
    height: 138px;
}

.live-on-img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    display: block;
}

.live-on-flag {
    transition: opacity .2s ease;
    position: absolute;
    top: 6px;
    right: 6px;
    width: 64px;
    height: 20px;
    line-height: 20px;
    background-color: #f69;
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
}

.live-on-flag .living-icon {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin: 0 4px 0 8px;
}

.live-on-flag .living-icon-col {
    width: 2px;
    margin: 0 1px;
    display: inline-block;
    background-color: #fff;
    height: 100%;
    border-radius: 2px;
    animation: living-icon-ani .6s linear infinite;
    transform-origin: bottom;
}

.live-on-flag .living-icon-col:last-child {
    animation-delay: .2s;
    margin-right: 0;
}

.live-on-flag .living-icon-col:first-child {
    animation-delay: -.2s;
    margin-left: 0;
}

.live-on-hover {
    background: rgba(0,0,0,.4);
    border-radius: 4px;
    transition: opacity .2s ease;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.live-on-hover-icon {
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icons.png);
    background-position: -1096px -1094px;
    width: 48px;
    height: 48px;
    margin: 45px auto;
}

.live-text {
    color: #222;
    margin-top: 6px;
}

.live-text-view {
    text-indent: 21px;
}

.live-text-view,.live-text-watched_show {
    color: #99a2aa;
    float: left;
    line-height: 14px;
    margin-top: 5px;
}

.live-text-title {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-text-title:hover {
    color: #00a1d6;
}

@keyframes living-icon-ani {
    0% {
        transform: scaleY(.5);
    }

    50% {
        transform: scaleY(1);
    }

    to {
        transform: scaleY(.5);
    }
}

@media (min-width:1420px) {
    .live {
        width: 280px;
    }

    .live-col {
        width: 100%;
    }

    .live-on {
        width: 280px;
        height: 175px;
    }

    .live-on-hover-icon {
        margin: 72px auto;
    }
}

.i-pin-v {
    padding-bottom: 20px;
}

.i-pin-v.empty .section-title,.i-pin-v.loading .section-title {
    display: block;
}

.i-pin-v .section-title {
    padding-bottom: 10px;
}

.i-pin-v .section-title[role="3"] .pin-v-icon {
    background-position: -1298px -530px;
}

.i-pin-v .be-tab {
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
    height: 25px;
}

.i-pin-v .be-tab-item {
    padding-bottom: 5px;
    margin-right: 30px;
    font-size: 12px;
}

.i-pin-c {
    box-shadow: 0 0 0 1px #e5e9ef;
    border-radius: 4px;
    float: left;
    overflow: hidden;
    position: relative;
}

.i-pin-c,.i-pin-c:hover .i-watchlater {
    display: block;
}

.i-pin-c:hover .length {
    display: none;
}

.i-pin-part.loading {
    background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loadTV.gif) 50% no-repeat;
    height: 200px;
}

.i-pin-img,.i-pin-part:hover .i-pin-info .btn-container {
    display: block;
}

.i-pin-img {
    background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/video-placeholder.png);
    background-size: img;
    border-radius: 4px;
    width: 280px;
    height: 175px;
}

.i-pin-duration {
    background: #111;
    background: rgba(0,0,0,.5);
    border-radius: 5px 0 0 0;
    color: #fff;
    line-height: 20px;
    transition: top .2s ease;
    padding: 0 6px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.i-pin-info {
    position: relative;
    height: 175px;
    margin-left: 300px;
}

.i-pin-info .btn-container {
    position: absolute;
    display: none;
    bottom: 0;
}

.i-pin-title {
    display: block;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 15px;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.i-pin-meta {
    color: #6d757a;
    margin-bottom: 10px;
}

.i-pin-meta .icon {
    width: 12px;
    height: 12px;
    vertical-align: middle;
    margin-right: 3px;
    position: relative;
    top: -2px;
}

.i-pin-data {
    display: inline-block;
    margin-right: 20px;
}

.i-pin-play-icon {
    background-position: -1306px -346px;
}

.i-pin-danmu-icon {
    background-position: -1306px -410px;
}

.i-pin-time-icon {
    background-position: -280px -474px;
}

.i-pin-desc {
    color: #99a2aa;
    margin-bottom: 10px;
    max-height: 40px;
}

.i-pin-desc,.i-pin-reason {
    line-height: 20px;
    overflow: hidden;
}

.i-pin-reason {
    color: #f25d8e;
    height: 20px;
    margin-bottom: 14px;
    max-width: 400px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.i-pin-reason.hidden {
    visibility: hidden;
}

.i-pin-action {
    display: none;
}

#i-pin.empty .i-pin-empty,#i-pin.has-content .i-pin-has-content {
    display: block;
}

.i-pin-has-content.disabled .disabled-img {
    display: block;
    line-height: 175px;
}

.i-pin-has-content.disabled:hover .i-watchlater {
    display: none;
}

.i-pin-has-content:hover .i-pin-action {
    display: block;
}

.i-pin-empty {
    background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/dbz-hint-33.png) 250px bottom no-repeat;
}

.i-pin-empty-set {
    text-align: center;
    width: 215px;
    height: 138px;
}

.i-pin-empty-set:hover .i-pin-empty-set-icon {
    background-position: -1288px -72px;
}

.i-pin-empty-set:hover .i-mp-count {
    color: #00a1d6;
}

.i-mp-empty {
    background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/dbz-hint-22.png) 260px bottom no-repeat;
}

#i-masterpiece {
    margin-left: -9px;
}

#i-masterpiece[type=empty] .i-mp-empty,#i-masterpiece[type=multi] .i-mp-multi,#i-masterpiece[type=single] .i-mp-single {
    display: block;
}

#i-masterpiece .content {
    width: 900px;
}

#i-masterpiece .small-item {
    width: 220px;
    height: 172px;
    overflow: hidden;
    padding-top: 0;
}

#i-masterpiece .small-item:hover .title {
    height: 38px;
}

#i-masterpiece .small-item:hover .length {
    bottom: -20px;
}

#i-masterpiece .small-item:hover .reason {
    bottom: 0;
}

#i-masterpiece .small-item .img,#i-masterpiece .small-item .img img {
    width: 220px;
    height: 138px;
}

#i-masterpiece .small-item .disabled-img {
    line-height: 135px;
}

#i-masterpiece .small-item .title {
    transition: height .2s ease;
    height: 19px;
    white-space: normal;
}

#i-masterpiece .small-item .length {
    transition: bottom .2s ease;
}

#i-masterpiece .small-item .reason {
    background: rgba(0,0,0,.4);
    color: #fff;
    transition: bottom .2s ease;
    position: absolute;
    left: 0;
    bottom: -80px;
    z-index: 2;
}

#i-masterpiece .small-item .reason-inner {
    line-height: 28px;
    padding: 0 10px;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#i-masterpiece .i-pin-empty-set {
    float: left;
    margin-left: 9px;
}

.i-mp-single {
    margin-left: 9px;
}

.i-mp-multi {
    width: 720px;
    height: 182px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.i-mp-action {
    position: absolute;
    display: none;
    top: 8px;
    right: 18px;
    z-index: 2;
}

.i-mp-action:hover .i-mp-action-icon {
    border-radius: 4px 4px 0 0;
    border-bottom: none;
}

.i-mp-action:hover .i-mp-action-menu {
    display: block;
}

.i-mp-action-icon {
    background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icons.png) #fff -1110px -279px no-repeat;
    border: 1px solid #99a2aa;
    border-radius: 4px;
    cursor: pointer;
    width: 20px;
    height: 20px;
    margin: 0 0 0 auto;
    position: relative;
}

.i-mp-action-menu {
    display: none;
    background: #fff;
    border: 1px solid #99a2aa;
    border-radius: 4px 0 4px 4px;
    overflow: hidden;
    margin-top: -1px;
}

.i-mp-action-item {
    cursor: pointer;
    line-height: 30px;
    padding: 0 10px;
}

.i-mp-action-item:hover {
    background: #e5e9ef;
}

.i-mp-count {
    color: #99a2aa;
    position: absolute;
    bottom: 8px;
    right: 10px;
}

.small-item:hover .i-mp-action {
    display: block;
}

.img .isPay {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #ffa726;
    border-radius: 2px;
    font-size: 6px;
    color: #fff;
}

@media (min-width:1420px) {
    .i-pin-empty {
        background-position: 310px bottom;
    }

    .i-mp-empty {
        background-position: 320px bottom;
    }

    .i-pin-empty-set {
        width: 280px;
        height: 175px;
    }

    .i-pin-empty-set-icon {
        margin: 48px auto 22px;
    }

    .i-mp-multi {
        height: 220px;
    }

    #i-masterpiece .small-item {
        width: 280px;
        height: 210px;
    }

    #i-masterpiece .small-item .img,#i-masterpiece .small-item .img img {
        width: 280px;
        height: 175px;
    }

    #i-masterpiece .small-item .disabled-img {
        line-height: 175px;
    }

    #i-masterpiece .small-item .reason-inner {
        width: 260px;
    }
}

.tabs {
    position: relative;
}

.tabs-info {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #99a2aa;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: baseline;
    align-items: baseline;
}

.tabs-info .icon-info_help_circle_line_24 {
    font-size: 12px;
    margin-right: 3px;
}

#page-index .video.empty .be-tab {
    display: none;
}

#page-index .video.full-rows .content {
    max-height: 935px;
}

#page-index .video .content {
    max-height: 380px;
    overflow: hidden;
}

#page-index .video .content .small-item:nth-child(4n+1) {
    padding-left: 0;
}

#page-index .video .content .small-item:nth-child(4n+4) {
    padding-right: 0;
}

#page-index .video .be-tab {
    display: inline-block;
    line-height: 18px;
    vertical-align: middle;
    margin-left: 10px;
}

#page-index .video .be-tab-item {
    padding: 0 0 3px;
    margin-right: 15px;
    font-size: 12px;
}

@media (min-width:1420px) {
    #page-index .video .content .small-item:nth-child(4n+1) {
        padding-left: 10px;
    }

    #page-index .video .content .small-item:nth-child(4n+4) {
        padding-right: 10px;
    }

    #page-index .video .content .small-item:nth-child(5n+5) {
        padding-right: 0;
    }

    #page-index .video .content .small-item:nth-child(5n+1) {
        padding-left: 0;
    }

    #page-index .video .content .small-item:nth-child(13),#page-index .video .content .small-item:nth-child(14),#page-index .video .content .small-item:nth-child(15) {
        display: block;
    }
}

.isPay {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 0 4px;
    background: #ffa726;
    border-radius: 2px;
    font-size: 10px;
    color: #fff;
}

.section-title .play-all-channel {
    position: absolute;
    right: 63px;
    top: 6px;
    width: 78px;
    height: 22px;
    line-height: 22px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    display: inline-block;
    border: 1px solid #b8c0cc;
    border-radius: 4px;
    color: #6d757a;
    font-size: 12px;
    transition: .3s ease;
}

.section-title .play-all-channel .video-commonplayer_play {
    transition: .3s ease;
    margin: 0 4px;
    color: #99a2aa;
}

.section-title .play-all-channel>span {
    vertical-align: top;
}

.section-title .play-all-channel:hover {
    color: #00a1d6;
    border-color: #00a1d6;
}

.section-title .play-all-channel:hover .video-commonplayer_play {
    color: #00a1d6;
}

#page-index .channel.guest .section-title {
    display: none;
}

#page-index .channel.guest .channel-item .channel-title .channel-name {
    font-size: 20px;
    color: #000;
}

#page-index .channel .empty-state {
    padding-bottom: 30px;
    margin-top: 7px;
    text-align: center;
}

#page-index .channel .empty-state p {
    line-height: 14px;
    font-size: 12px;
    color: #6d757a;
}

#page-index .channel .empty-state .btn-container {
    margin-top: 12px;
}

#page-index .channel .section-title .t {
    vertical-align: middle;
}

#page-index .channel .section-title .create {
    width: 64px;
    padding: 0 7px 0 28px;
    margin-left: 10px;
    box-sizing: border-box;
    background-position: -1296px -917px;
    vertical-align: middle;
    cursor: pointer;
}

#page-index .channel .section-title .create:hover {
    background-position: -1360px -917px;
}

#page-index .channel .content {
    width: 700px;
    max-height: none;
    overflow: hidden;
}

#page-index .channel .channel-item {
    margin-bottom: 20px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e9ef;
}

#page-index .channel .channel-item:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

#page-index .channel .channel-item:hover .edit {
    display: inline-block;
}

#page-index .channel .channel-item.empty-channel {
    margin-top: 25px;
    padding-bottom: 25px;
}

#page-index .channel .channel-item.vertical .small-item {
    width: 100%;
    box-sizing: border-box;
}

#page-index .channel .channel-item.vertical .small-item .img {
    float: left;
}

#page-index .channel .channel-item.vertical .small-item .title {
    height: 20px;
    margin: 0 0 0 170px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#page-index .channel .channel-item.vertical .small-item .meta {
    margin: 8px 0 0 170px;
}

#page-index .channel .channel-item.vertical .small-item .meta span {
    width: auto;
    margin-right: 30px;
}

#page-index .channel .channel-item.vertical .small-item .meta span:last-child {
    margin-right: 0;
}

#page-index .channel .channel-item.vertical .small-item .video-desc {
    display: block;
    margin: 6px 0 0 170px;
    white-space: normal;
}

#page-index .channel .channel-item .small-item {
    float: none;
    display: inline-block;
    font-size: 12px;
}

#page-index .channel .channel-item .small-item:first-child {
    padding-left: 0;
}

#page-index .channel .channel-item .small-item:last-child {
    padding-right: 0;
}

#page-index .channel .channel-item .small-item .title {
    white-space: normal;
}

#page-index .channel .channel-item .small-item .video-desc {
    display: none;
    height: 36px;
    line-height: 18px;
    color: #99a2aa;
    overflow: hidden;
}

#page-index .channel .channel-item .channel-title {
    position: relative;
    height: 24px;
    line-height: 24px;
    font-size: 0;
}

#page-index .channel .channel-item .c-empty-hint-host {
    position: absolute;
    top: 0;
    left: 300px;
    font-size: 12px;
    color: #99a2aa;
    text-align: center;
}

#page-index .channel .channel-item .c-empty-hint-host a {
    margin-left: 10px;
    color: #00a1d6;
}

#page-index .channel .channel-item .c-empty-hint-host a:hover {
    color: #00b5e5;
}

#page-index .channel .channel-item .channel-name {
    display: inline-block;
    font-size: 16px;
    color: #6d757a;
    vertical-align: middle;
}

#page-index .channel .channel-item .channel-name:hover {
    color: #00a1d6;
}

#page-index .channel .channel-item .channel-video {
    white-space: nowrap;
    overflow: hidden;
    font-size: 0;
}

#page-index .channel .channel-item .count {
    top: 0;
    vertical-align: middle;
}

#page-index .channel .channel-item .edit {
    display: none;
    width: 56px;
    padding: 0 7px 0 23px;
    background-position: -1299px -852px;
    box-sizing: border-box;
}

#page-index .channel .channel-item .edit:hover {
    background-position: -1363px -852px;
}

#page-index .channel .section-right-options {
    float: right;
    height: 24px;
    display: -ms-flexbox;
    display: flex;
}

#page-index .channel .section-right-options .play-all-channel {
    width: 78px;
    height: 22px;
    line-height: 22px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    margin-right: 10px;
    display: inline-block;
    border: 1px solid #b8c0cc;
    border-radius: 4px;
    color: #6d757a;
    font-size: 12px;
    transition: .3s ease;
}

#page-index .channel .section-right-options .play-all-channel .video-commonplayer_play {
    transition: .3s ease;
    margin: 0 4px;
    color: #99a2aa;
}

#page-index .channel .section-right-options .play-all-channel>span {
    vertical-align: top;
}

#page-index .channel .section-right-options .play-all-channel:hover {
    color: #00a1d6;
    border-color: #00a1d6;
}

#page-index .channel .section-right-options .play-all-channel:hover .video-commonplayer_play {
    color: #00a1d6;
}

#page-index .channel .section-right-options .more {
    position: static;
    top: auto;
    right: auto;
}

@media (min-width:1420px) {
    #page-index .channel .channel-item .c-empty-hint-host {
        left: 400px;
    }
}

#page-index .channel.guest .section-title {
    display: none;
}

#page-index .channel.guest .channel-item .channel-title .channel-name {
    font-size: 20px;
    color: #000;
    max-width: 500px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

#page-index .channel .empty-state {
    padding-bottom: 30px;
    margin-top: 7px;
    text-align: center;
}

#page-index .channel .empty-state p {
    line-height: 14px;
    font-size: 12px;
    color: #6d757a;
}

#page-index .channel .empty-state .btn-container {
    margin-top: 12px;
}

#page-index .channel .section-title .t {
    vertical-align: middle;
}

#page-index .channel .section-title .create {
    width: 64px;
    padding: 0 7px 0 28px;
    margin-left: 10px;
    box-sizing: border-box;
    background-position: -1296px -917px;
    vertical-align: middle;
    cursor: pointer;
}

#page-index .channel .section-title .create:hover {
    background-position: -1360px -917px;
}

#page-index .channel .content {
    width: 700px;
    max-height: none;
    overflow: hidden;
}

#page-index .channel .channel-item {
    margin-bottom: 20px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e9ef;
}

#page-index .channel .channel-item:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

#page-index .channel .channel-item:hover .edit {
    display: inline-block;
}

#page-index .channel .channel-item.empty-channel {
    margin-top: 25px;
    padding-bottom: 25px;
}

#page-index .channel .channel-item.vertical .small-item {
    width: 100%;
    box-sizing: border-box;
}

#page-index .channel .channel-item.vertical .small-item .img {
    float: left;
}

#page-index .channel .channel-item.vertical .small-item .title {
    height: 20px;
    margin: 0 0 0 170px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#page-index .channel .channel-item.vertical .small-item .meta {
    margin: 8px 0 0 170px;
}

#page-index .channel .channel-item.vertical .small-item .meta span {
    width: auto;
    margin-right: 30px;
}

#page-index .channel .channel-item.vertical .small-item .meta span:last-child {
    margin-right: 0;
}

#page-index .channel .channel-item.vertical .small-item .video-desc {
    display: block;
    margin: 6px 0 0 170px;
    white-space: normal;
}

#page-index .channel .channel-item .small-item {
    float: none;
    display: inline-block;
    font-size: 12px;
}

#page-index .channel .channel-item .small-item:first-child {
    padding-left: 0;
}

#page-index .channel .channel-item .small-item:last-child {
    padding-right: 0;
}

#page-index .channel .channel-item .small-item .title {
    white-space: normal;
}

#page-index .channel .channel-item .small-item .video-desc {
    display: none;
    height: 36px;
    line-height: 18px;
    color: #99a2aa;
    overflow: hidden;
}

#page-index .channel .channel-item .channel-title {
    position: relative;
    height: 24px;
    line-height: 24px;
    font-size: 0;
}

#page-index .channel .channel-item .c-empty-hint-host {
    position: absolute;
    top: 0;
    left: 300px;
    font-size: 12px;
    color: #99a2aa;
    text-align: center;
}

#page-index .channel .channel-item .c-empty-hint-host a {
    margin-left: 10px;
    color: #00a1d6;
}

#page-index .channel .channel-item .c-empty-hint-host a:hover {
    color: #00b5e5;
}

#page-index .channel .channel-item .channel-name {
    display: inline-block;
    font-size: 16px;
    color: #6d757a;
    vertical-align: middle;
    cursor: pointer;
}

#page-index .channel .channel-item .channel-name:hover {
    color: #00a1d6;
}

#page-index .channel .channel-item .channel-video {
    white-space: nowrap;
    overflow: hidden;
    font-size: 0;
}

#page-index .channel .channel-item .count {
    top: 0;
    vertical-align: middle;
}

#page-index .channel .channel-item .edit {
    display: none;
    width: 56px;
    padding: 0 7px 0 23px;
    background-position: -1299px -852px;
    box-sizing: border-box;
}

#page-index .channel .channel-item .edit:hover {
    background-position: -1363px -852px;
}

#page-index .channel .section-right-options {
    float: right;
    height: 24px;
    display: -ms-flexbox;
    display: flex;
}

#page-index .channel .section-right-options .play-all-channel {
    width: 78px;
    height: 22px;
    line-height: 22px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    margin-right: 10px;
    display: inline-block;
    border: 1px solid #b8c0cc;
    border-radius: 4px;
    color: #6d757a;
    font-size: 12px;
    transition: .3s ease;
}

#page-index .channel .section-right-options .play-all-channel .video-commonplayer_play {
    transition: .3s ease;
    margin: 0 4px;
    color: #99a2aa;
}

#page-index .channel .section-right-options .play-all-channel>span {
    vertical-align: top;
}

#page-index .channel .section-right-options .play-all-channel:hover {
    color: #00a1d6;
    border-color: #00a1d6;
}

#page-index .channel .section-right-options .play-all-channel:hover .video-commonplayer_play {
    color: #00a1d6;
}

#page-index .channel .section-right-options .more {
    position: static;
    top: auto;
    right: auto;
    cursor: pointer;
}

@media (min-width:1420px) {
    #page-index .channel .channel-item .c-empty-hint-host {
        left: 400px;
    }
}

#page-index .bangumi .content .large-item:nth-child(2n) {
    margin-right: 0;
}

#page-index .bangumi .content .title {
    font-family: Microsoft Yahei UI Light,Microsoft Yahei Light;
}

@media (min-width:1420px) {
    #page-index .bangumi .large-item {
        width: 430px;
    }
}

@media (min-width:1420px) {
    #page-index .article-content {
        width: 743px;
    }

    #page-index .article-noimg {
        width: 100%;
    }
}

#page-index .coin .small-item:nth-child(9),#page-index .coin .small-item:nth-child(10) {
    display: none;
}

#page-index .coin .small-item .title {
    margin-top: 4px;
    height: 40px;
}

#page-index .coin.loading .content {
    margin-left: 0;
}

#page-index .coin .content {
    width: 760px;
    max-height: 380px;
    margin: -10px 0 0 -10px;
    overflow: hidden;
}

#page-index .coin .isPay {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 1px 4px;
    background: #ffa726;
    border-radius: 2px;
    font-size: 10px;
    color: #fff;
}

#page-index .coin .ogv {
    margin-top: 4px;
    height: 40px;
}

#page-index .coin .ogv-title {
    overflow: hidden;
    font-size: 12px;
    line-height: 20px;
    height: 20px;
    word-break: break-all;
}

#page-index .coin .ogv-title-sub {
    color: #9499a0;
    line-height: 17px;
    height: 17px;
}

#page-index .tags.empty,#page-index .tags.loading {
    display: none;
}

#page-index .subs .detail {
    float: left;
    max-width: 120px;
    line-height: 40px;
    margin-left: 15px;
}

#page-index .subs .img img {
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/tag-default-img.png);
}

#page-index .fav-item {
    position: relative;
    float: left;
    margin: 0 20px 28px 0;
}

#page-index .fav-item:nth-child(9),#page-index .fav-item:nth-child(10) {
    display: none;
}

#page-index .fav-item:nth-child(4),#page-index .fav-item:nth-child(8) {
    margin-right: 0;
}

#page-index .fav-item[data-count="0"] .fav-img-placeholder {
    border-radius: 2px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAACYCAYAAAAYwiAhAAADpUlEQVR4Ae3dNXRkZRjH4RtrcHd37XB3d3d3p6Xbigp3p94KlwqXDqcLTQxZ3waL/O/iDskMM9+d5z3naSLv2C+efKnGvlh8dIzHdAvBeBxdiYs2Gq/aeQEgMASGwEBgCAyBgcAQGAIDgSEwBAYCQ2AgMASGwEBgCAyBgcAQGAIDgSEwEBgCQ2AgMASGwEBgCAyBgcAQGAIDgSEwEBgCQ2DQusBYErfH7rHKj3aPO2LJXHYLjOdjw+ovpn5ePD+b3QLjoRio/mHql4mH/stugXF/9R+nfp1/s1tgvBwDswhsIF7+u90CYzTWrGY59evG6J/tFhhTcVg1x6l3xNTv9wuMB6oWTb3r17sFxoJYu4WBrR0LQmArcE3V4snO60JgYwzHYBsCG4xhgXFB1aapdwust30cg20MbDA+EVjzfR/vx/1xVRwQG1T/09SXFQfEVXF/vB/fC6xsY3FvHBGrVl029XWKI+LeGBNYGabi2Tgw+qtCpr6ucVA8G1MC605vx65V4VPfhnhHYN1jKubFYNWQqW9LzIspgXXeLVVDp75tAuust6KvwYH1xbsC65zTq4ZPbuMZAuucDXsgsA0F1jkr90Bgqwisc7bugcC2EVjnXNADgV0osM55ugcCe1pgnTMZ2zT8w+OkwDprfoMDm+8brd3h8AbGdbifRXaP8VinQXGtHeMC6y7Px0AD4hqI5/02RXe6tQGB3e73wbrb1QXHdbXfaO1+k3FBgXFdEN8LrAzfx/kFxXV+WXEJrDYZVxYQ15Ux6Y8+yrSggMAW+LO1cr1aQGCvCqxc9xUQ2H0CK9fNBQR2s8DKdWIBgZ0osHLtXkBguwusXFsWENhWAivXGgUEtqbAyrV6AYGtLrByrV1AYGsJrFybFxDY5gIr1x4FBLaHwMp1QQGBnS+wcj1WQGCPCaxcC2OohcdcnhlnRX+Ldg7FQoGV7ZoWhHVKfPCrnR/EKXMNrb5uTpku34LYZhYP/mpxVXz6N7s/jatitVn+1fZCgTXDcOz0L08U3CcejeX/Yf/yeDT2jr5/cTk7xWfOyW+Wb+LJOC52iLVj49gzLo0nYqxF5/M/EZfFXrFprB07xnHxZHzTW//pAwSGwEBgCAyBgcAQGAIDgSEwBAYCQ2AgMASGwEBgCAyBgcAQGAIDgSEwBAYCQ2AgMASGwEBgCAyBgcAQGAIDgSEwEBgCQ2AgMASGwEBgCAyBgcAQGAIbb9NymKgDOyYmWrwYRuOYGRQSx031+RTwAAAAAElFTkSuQmCC);
    width: 152px;
    height: 152px;
}

#page-index .fav-item[data-count="1"] .fav-img-0 {
    border-radius: 2px;
    height: 152px;
}

#page-index .fav-item[data-count="2"] .fav-img-1 {
    border-radius: 0 0 2px 2px;
    width: 152px;
}

#page-index .fav-item[data-public="1"],#page-index .fav-item[data-public="3"] {
    display: none;
}

#page-index .fav-item .state {
    color: #99a2aa;
    float: right;
    line-height: 24px;
}

#page-index .fav-item .name {
    display: block;
    font-size: 18px;
    font-family: Microsoft Yahei UI Light,Microsoft Yahei Light;
    line-height: 24px;
    width: 7em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#page-index .fav-item .delete,#page-index .fav-item .edit {
    color: #00a1d6;
    cursor: pointer;
    display: inline-block;
    transition: none;
    text-indent: 1.2em;
}

#page-index .fav-item .edit {
    background-position: -540px -465px;
}

#page-index .fav-item .delete {
    background-position: -540px -404px;
    float: right;
}

#page-index .fav-imgs {
    border: 1px solid #ccd0d7;
    border-radius: 4px;
    display: block;
    width: 152px;
    height: 152px;
    margin-bottom: 11px;
    overflow: hidden;
    position: relative;
}

#page-index .fav-imgs.empty {
    background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/playlistbg.png) no-repeat;
    background-size: img;
    background-position: 50%;
}

#page-index .fav-imgs img {
    width: 100%;
    height: 152px;
    object-fit: img;
    object-position: 50%;
}

#page-index .fav-img {
    width: 100%;
    height: 100%;
    background-size: img;
    background-position: 50%;
    display: block;
    float: left;
}

#page-index .fav-img-0 {
    border-radius: 2px 2px 0 0;
    width: 152px;
    height: 74px;
    margin-bottom: 4px;
}

#page-index .fav-img-1 {
    border-radius: 0 0 0 2px;
    width: 74px;
    height: 74px;
    margin-right: 4px;
}

#page-index .fav-img-2 {
    border-radius: 0 0 2px 0;
    width: 74px;
    height: 74px;
}

#page-index .fav-count {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 12px;
    padding: 0 9px;
    line-height: 18px;
    text-align: center;
    font-family: Arial;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(0,0,0,.5);
    border-radius: 9px;
}

#page-index .fav-action {
    visibility: hidden;
    margin-top: 7px;
}

@media (min-width:1420px) {
    #page-index .fav .fav-item:nth-child(4),#page-index .fav .fav-item:nth-child(8) {
        margin-right: 20px;
    }

    #page-index .fav .fav-item:nth-child(5),#page-index .fav .fav-item:nth-child(10) {
        margin-right: 0;
    }

    #page-index .fav .fav-item:nth-child(9),#page-index .fav .fav-item:nth-child(10) {
        display: block;
    }
}

#page-index .album .content {
    max-height: 400px;
    overflow: hidden;
}

#page-index .album .content .album-wrapper {
    margin-left: -20px;
}

#page-index .album .content .album-wrapper .album-item {
    width: 160px;
    height: auto;
    display: inline-block;
    margin-bottom: 20px;
    margin-left: 20px;
}

#page-index .album .content .album-wrapper .album-item .album-top {
    display: block;
    width: 100%;
    height: 120px;
    position: relative;
    background: #d8d8d8;
    cursor: pointer;
}

#page-index .album .content .album-wrapper .album-item .album-top .album-img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-size: img;
    background-repeat: no-repeat;
}

#page-index .album .content .album-wrapper .album-item .album-top .album-count {
    width: 40px;
    height: 20px;
    background: rgba(36,33,46,.3);
    border-radius: 4px;
    position: absolute;
    bottom: 8px;
    right: 8px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
}

#page-index .album .content .album-wrapper .album-item .album-title {
    display: block;
    width: 160px;
    height: 40px;
    font-size: 12px;
    color: #222;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    top: 5px;
}

#page-index .album .content .album-wrapper .album-item .album-title:hover {
    color: #00a1d6;
}

#page-index .album .content .album-wrapper .meta-col {
    margin-top: 10px;
}

#page-index .album .content .album-wrapper .meta-col span {
    margin-right: 45px;
}

.i-m-r1 {
    text-align: center;
    padding: 0 10px 13px;
}

.i-m-icon {
    background-position: -1104px -333px;
    width: 33px;
    height: 40px;
    margin-right: 10px;
    vertical-align: middle;
}

.i-m-title {
    display: inline-block;
}

.i-m-title .icon-i-title {
    display: block;
    width: 120px;
    height: 34px;
    background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icon_createCenters.png) no-repeat;
    background-size: 100% 100%;
    float: left;
}

.icon-m-ra {
    display: block;
    width: 28px;
    height: 28px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAAAY5JREFUaAXtmb9KA0EQh2eSWGjjE1gbQYgS7UVbn8UXCFoo+gK+im1EaxM0xCIBK4sUthYi5lh3SXGkCCwyszPgb4v7wy1z8327x83tEaHBAAzAAAzAAAzAAAzAAAzAgAsDIYTGePy25SKZmERDMpHBbLYxHE3739XP++Blci4Z+6+xRAHp4/OMKBwtkgmXHiBFAZst6hPxV23bHlIUcH93+4mZTj1Bcm1b7mg4mhyHQHdxuq7XUfniYK99VZ+XOVIBTKl7gVQD9AKpCugBUh3QGrIIoCVkMUAryKKAFpDFAVdBxgKh1+3s3KTrkk20kslNrNtp3xPz0ks/Fga9+CXSzI2R288EMBUBFMLS10YcwWtmrnITz+3Xyu0o1W9VhRNHVXx6ppyLPoOr4DRr1GKAFnDFRtAKrgigJZw6oDWcKqAHODVAL3AqgJ7gxAGfX6eH1Tw8eliLSXCpiZZq1ZxOPMGJA67x5m0sjh5S4Lg3WUVb3Ftx6+3fhCIqQsMADMAADMAADMAADMDA/zbwC+qC2/i4tVKPAAAAAElFTkSuQmCC) no-repeat;
    background-size: 100% 100%;
    float: right;
    position: relative;
    top: 6px;
}

.i-m-r2 {
    border: 1px solid #e5e9ef;
    border-radius: 4px;
    padding: 7px 0;
}

.i-m-btn {
    color: #6d757a;
    float: left;
    text-align: center;
    width: 152px;
    line-height: 20px;
}

.i-m-text,.i-m-u-icon {
    vertical-align: middle;
}

.i-m-u-icon {
    background-position: -1111px -151px;
    width: 18px;
    height: 18px;
    margin-right: 6px;
}

.i-m-upload {
    border-right: 1px solid #e5e9ef;
}

.i-m-upload:hover .i-m-u-icon {
    background-position: -1175px -151px;
}

.i-m-v-icon {
    background-position: -1111px -215px;
    width: 18px;
    height: 19px;
    margin-right: 6px;
    vertical-align: middle;
}

.i-m-v:hover .i-m-v-icon {
    background-position: -1175px -215px;
}

.elec.loading {
    display: none;
}

.elec:hover .elec-status {
    background-image: url(./charging_focus.gif);
}

.elec .elec-trigger {
    background: #f25d8e;
    border-radius: 4px;
    box-shadow: 0 4px 4px rgba(255,112,159,.3);
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    line-height: 50px;
    padding: 0 24px;
}

.elec .elec-trigger:hover {
    background: #ff709f;
}

.elec .elec-trigger:hover+.elec-map .elec-status {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAABKCAMAAAB5Ac1NAAAAPFBMVEX///////////////////////9HcEz////////////////////////////////////////////////////BTIGUAAAAFHRSTlP/skEMs3sAqQNI5g3nqErjsAuxpwJoLsAAAAD9SURBVHgB7doFjoVQFIPhgxX3/a91lNjYkyJNpv8KvghyKeH+VS5JsyzNQ7ICHxUhWI6tJNjKCvtXN00NpJI2NBEN0OrZNlwHZEHVVzikoRsHIOVtVR/7ltAXBG8jbiW8jWhK5zldBGw34m1lhTNTtkHZhgdsfQUp3Ga77LrAjXgbkbItlG0hYCOyzbadw81YG5GyLZRtoWxzTvCCMM4458TjH/ylAE5QB2UdpHW3WivrrNu1W1fCpTocp+PHYByn4xccXKTjx+C1OlKXEmPwd53AGEzo6DGY0PWV2Bh8W8eXBK+THIM3neQY7Cc/qbsgaR3x24sQjtdROOfcK6H+QuyA+YQEAAAAAElFTkSuQmCC);
}

.elec .elec-trigger:hover+.elec-map .elec-status-bg {
    width: 156px;
}

.elec .elec-trigger-icon {
    background-position: -278px -918px;
    width: 20px;
    height: 24px;
    vertical-align: middle;
    margin-right: 12px;
}

.elec #elec-hover-bg-preloader {
    background-image: url(./charging_focus.gif);
    display: none;
}

.elec .elec-status {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAABKCAMAAAB5Ac1NAAAAPFBMVEX///////////////////////9HcEz////////////////////////////////////////////////////BTIGUAAAAFHRSTlP/skEMs3sAqQNI5g3nqErjsAuxpwJoLsAAAAD9SURBVHgB7doFjoVQFIPhgxX3/a91lNjYkyJNpv8KvghyKeH+VS5JsyzNQ7ICHxUhWI6tJNjKCvtXN00NpJI2NBEN0OrZNlwHZEHVVzikoRsHIOVtVR/7ltAXBG8jbiW8jWhK5zldBGw34m1lhTNTtkHZhgdsfQUp3Ga77LrAjXgbkbItlG0hYCOyzbadw81YG5GyLZRtoWxzTvCCMM4458TjH/ylAE5QB2UdpHW3WivrrNu1W1fCpTocp+PHYByn4xccXKTjx+C1OlKXEmPwd53AGEzo6DGY0PWV2Bh8W8eXBK+THIM3neQY7Cc/qbsgaR3x24sQjtdROOfcK6H+QuyA+YQEAAAAAElFTkSuQmCC);
    color: #99a2aa;
    font-weight: 700;
    margin-left: 172px;
    width: 96px;
    padding: 0 30px;
    height: 74px;
    line-height: 74px;
    text-align: right;
    position: absolute;
    top: 8px;
    right: 0;
    z-index: 2;
}

.elec .elec-status-bg {
    background-image: url(./charging_hover.gif);
    width: 0;
    height: 74px;
    position: absolute;
    top: 8px;
    left: 192px;
    transition: width .4s ease;
    z-index: 1;
}

.elec .elec-status-bg-grey {
    background: #e5e9ef;
    width: 156px;
    height: 74px;
    position: absolute;
    top: 8px;
    right: 0;
    z-index: 0;
}

.elec .elec-count {
    color: #6d757a;
    font-weight: 700;
}

.elec .elec-list {
    height: 47px;
    margin: 20px 0 6px;
    overflow: hidden;
}

.elec .elec-hito {
    cursor: pointer;
    display: block;
    float: left;
    margin-left: -20px;
    position: relative;
}

.elec .elec-hito:first-child,.elec .elec-hito:nth-child(2),.elec .elec-hito:nth-child(3) {
    margin: 0 8px 0 0;
}

.elec .elec-hito:nth-child(4) {
    z-index: 7;
    margin-left: 0;
}

.elec .elec-hito:nth-child(5) {
    z-index: 6;
}

.elec .elec-hito:nth-child(6) {
    z-index: 5;
}

.elec .elec-hito:nth-child(7) {
    z-index: 4;
}

.elec .elec-hito:nth-child(8) {
    z-index: 3;
}

.elec .elec-hito:nth-child(9) {
    z-index: 2;
}

.elec .elec-avatar {
    border: 2px solid #fff;
    border-radius: 38px;
    width: 38px;
    height: 38px;
}

.elec .elec-monthly-count {
    color: #99a2aa;
    line-height: 1;
}

.elec .elec-monthly-c {
    color: #6d757a;
}

.elec .elec-setting {
    color: #6d757a;
    float: right;
}

#page-index .i-ann.empty {
    display: none;
}

#page-index .i-ann-content {
    position: relative;
    max-height: 184px;
    overflow: auto;
    white-space: pre-line;
    word-break: break-all;
}

#page-index #i-ann-content {
    color: #6d757a;
    line-height: 20px;
}

#page-index #i-ann-content textarea {
    width: 306px;
    height: 172px;
    color: #6d757a;
    font-size: 12px;
    font-family: Microsoft Yahei;
    line-height: 20px;
    padding: 10px;
    margin: -10px 0 0 -11px;
    border: 1px solid transparent;
    border-radius: 4px;
    box-sizing: content-box;
}

#page-index #i-ann-content textarea:focus,#page-index #i-ann-content textarea:hover {
    border-color: #00a1d6;
}

.game {
    padding-bottom: 0;
}

.game.empty,.game.loading {
    display: none;
}

.game .content {
    overflow: hidden;
}

.i-live {
    padding: 15px 19px;
}

.i-live.hidden {
    display: none;
}

.i-live.online .section-title {
    border-bottom: none;
}

.i-live:hover .i-live-flag {
    opacity: 0;
}

.i-live:hover .i-live-hover {
    opacity: 1;
}

.i-live:hover .i-live-title {
    color: #00a1d6;
}

.i-live.carousel-on .i-live-flag {
    background-position: -1183px -470px;
}

.i-live .section-title {
    margin-bottom: 30px;
}

.i-live .i-live-fo {
    position: absolute;
    top: 9px;
    right: 20px;
}

.i-live .i-live-fo-btn,.i-live .i-live-unfo-btn {
    border: 1px solid;
    border-radius: 4px 0 0 4px;
    color: #fff;
    cursor: pointer;
    float: left;
    line-height: 24px;
    text-align: center;
    width: 80px;
}

.i-live .i-live-fo-btn {
    color: #f25d8e;
}

.i-live .i-live-fo-btn:hover {
    color: #ff85ad;
}

.i-live .i-live-unfo-btn {
    border-color: #dae0e9;
    color: #6d757a;
}

.i-live .i-live-fo-count {
    border: 1px solid #dae0e9;
    border-left-width: 0;
    border-radius: 0 4px 4px 0;
    color: #99a2aa;
    float: left;
    line-height: 24px;
    text-align: center;
    min-width: 50px;
}

.i-live .i-live-on {
    margin-top: -10px;
    position: relative;
}

.i-live .i-live-link {
    display: block;
}

.i-live .i-live-flag {
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icons.png);
    background-position: -1090px -470px;
    transition: opacity .2s ease;
    position: absolute;
    top: 6px;
    right: 6px;
    width: 61px;
    height: 20px;
}

.i-live .i-live-img {
    border-radius: 4px;
    display: block;
    width: 100%;
    height: 173px;
}

.i-live .i-live-title {
    width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.i-live .i-live-hover {
    background: rgba(0,0,0,.4);
    border-radius: 4px;
    transition: opacity .2s ease;
    width: 100%;
    height: 173px;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.i-live .i-live-hover-icon {
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icons.png);
    background-position: -1096px -1094px;
    width: 48px;
    height: 48px;
    margin: 72px auto;
}

.i-live .i-live-text {
    color: #222;
    margin-top: 10px;
}

.i-live .i-live-m {
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icons.png);
    background-position: -1112px -855px;
    color: #99a2aa;
    float: right;
    text-indent: 21px;
}

.i-live .i-live-off {
    margin: 30px 0 15px;
    text-align: center;
}

.i-live .i-live-off-guest {
    color: #99a2aa;
}

.i-live .i-live-off-guest p {
    line-height: 16px;
}

.i-live .i-live-off-guest a {
    display: block;
    line-height: 16px;
    margin-top: 6px;
    color: #00a1d6;
}

.i-live .i-live-off-guest a .i-live-arrow {
    background-position: -477px -410px;
}

.i-live .i-live-off-host:hover .i-live-icon {
    background-position: -536px -601px;
}

.i-live .i-live-off-host:hover .r-arrow {
    background-position: -477px -410px;
}

.i-live .i-live-icon {
    background-position: -600px -533px;
    width: 16px;
    height: 16px;
    margin-right: 3px;
}

.i-live .i-live-host-text,.i-live .i-live-icon {
    vertical-align: middle;
}

.i-live .i-live-arrow {
    margin-left: 8px;
}

.section.shop .shop-link {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 46px;
    padding: 0 20px;
    color: #99a2aa;
    font-size: 12px;
    font-weight: 400;
}

.section.shop .shop-link:hover {
    color: #00a1d6;
}

.section.shop .detail .item {
    float: left;
    width: 50%;
}

.section.shop .detail .item span {
    display: block;
    margin: 0 auto;
    text-align: center;
}

.section.shop .detail .item .title {
    color: #6d757a;
    font-size: 12px;
}

.section.shop .detail .item .number {
    color: #222;
    font-size: 14px;
}

#page-index .col-1 {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    float: left;
    padding: 15px 20px;
    width: 700px;
}

#page-index .col-1.shielding:after {
    content: "\65E0\6CD5\67E5\770B\7A7A\95F4\5185\5BB9\FF0C\8BF7\5C06\8BE5\7528\6237\79FB\9664\9ED1\540D\5355";
    background-color: #fff;
}

#page-index .col-1.be-shielding:after,#page-index .col-1.shielding:after {
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/nodata02.png);
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 4px;
    color: #6d757a;
    display: block;
    font-size: 14px;
    height: 450px;
    overflow: hidden;
    line-height: 640px;
    text-align: center;
}

#page-index .col-1.be-shielding:after {
    content: "\7531\4E8E\5BF9\65B9\9690\79C1\8BBE\7F6E\FF0C\65E0\6CD5\67E5\770B\7A7A\95F4\5185\5BB9";
}

#page-index .col-1.absEmpty:after {
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/nodata02.png);
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 4px;
    color: #6d757a;
    content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\5C55\793A\7684\5185\5BB9\54E6~";
    display: block;
    font-size: 14px;
    height: 450px;
    overflow: hidden;
    line-height: 640px;
    text-align: center;
}

#page-index .col-1 .section.empty:after {
    position: absolute;
    left: 300px;
    top: 9px;
    color: #999;
}

#page-index .col-1 .section.empty:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

#page-index .col-1 .section.private {
    display: none;
}

#page-index .col-1 .section .more {
    background-position: -310px -405px;
}

#page-index .col-1 .section .more:hover {
    background-position: -438px -405px;
}

#page-index .col-2 {
    float: right;
    width: 350px;
}

#page-index .col-2 .section {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 15px 20px 18px;
    margin-bottom: 10px;
}

#page-index .col-2 .section .user-auth .auth-icon {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/user-auth.png);
    background-repeat: no-repeat;
    margin-right: 6px;
}

#page-index .col-2 .section .user-auth .auth-icon.personal-auth {
    background-position: -39px -54px;
}

#page-index .col-2 .section .user-auth .auth-icon.organization-auth {
    background-position: -5px -54px;
}

#page-index .col-2 .section .user-auth .auth-description {
    line-height: 18px;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
    color: #222;
}

#page-index .col-2 .section .user-auth .profession-description {
    display: inline-block;
    margin-top: 12px;
    line-height: 20px;
    font-size: 14px;
    color: #222;
}

#page-index .col-2 .section .user-auth .profession-description__icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: sub;
    margin-left: 3px;
}

#page-index .col-2 .section .user-auth.no-auth {
    margin: -15px -20px -18px;
}

#page-index .col-2 .section .user-auth.no-auth .no-auth-title {
    display: inline-block;
    position: relative;
    top: 16px;
    left: 20px;
}

#page-index .col-2 .section .user-auth.no-auth .no-auth-title .goto-auth {
    cursor: pointer;
    font-size: 18px;
    color: #222;
    display: block;
    margin-bottom: 4px;
}

#page-index .col-2 .section .user-auth.no-auth .no-auth-title span {
    font-size: 12px;
    color: #99a2aa;
}

#page-index .col-2 .section .user-auth.no-auth .icon-auth {
    width: 99px;
    height: 70px;
    display: inline-block;
    vertical-align: middle;
}

#page-index .col-2 .section .auth-detail {
    font-size: 12px;
    color: #6d757a;
    margin-top: 12px;
    padding-left: 6px;
}

#page-index .col-2 .section .blueV-brand {
    border-top: 1px solid #eee;
    margin-top: 16px;
    padding-top: 14px;
}

#page-index .col-2 .section .blueV-brand .blueV-link {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
}

#page-index .col-2 .section .blueV-brand .blueV-link .left-txt {
    color: #18191c;
    font-weight: 700;
}

#page-index .col-2 .section .blueV-brand .blueV-link .right-txt {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    color: #9499a0;
}

#page-index .col-2 .section .blueV-brand .blueV-link .right-txt>svg {
    margin-left: 6px;
    width: 7px;
    height: 12px;
}

#page-index .col-2 .section .private-hint .icon {
    width: 21px;
    margin: 0;
    background-position: -214px -724px;
}

#page-index .col-2 .section.empty:after {
    color: #aaa;
    display: block;
    line-height: 80px;
    text-align: center;
}

#page-index .col-2 .section:last-child {
    border-bottom: 1px solid #eee;
}

#page-index .col-2 .section.user.private .content {
    display: block;
}

#page-index .col-2 .section.user.private .friend-data {
    padding: 14px 0;
}

#page-index .col-2 .section.user.private .section-title {
    display: block;
    margin-bottom: 0;
}

#page-index .col-2 .section.user.private .section-title .private-hint {
    display: block;
    line-height: 46px;
}

#page-index .col-2 .section.elec,#page-index .col-2 .section.i-m {
    padding-top: 15px;
}

#page-index .col-2 .section-title {
    border-bottom: 1px solid #e5e9ef;
    font-size: 14px;
    font-weight: 700;
    padding: 0;
    margin: -15px 0 10px;
    height: 45px;
    line-height: 45px;
}

#page-index .col-2 .section-title a {
    font-weight: 700;
    margin-right: 5px;
}

#page-index .col-2 .section-title .quantity {
    font-weight: 700;
}

#page-index .col-2 .section-title .more {
    background-position: -310px -407px;
    font-weight: 400;
    border: none;
    top: 0;
    line-height: 16px;
    padding-right: 12px;
    margin-right: 0;
}

#page-index .col-2 .section-title .more:hover {
    background-position: -438px -407px;
}

#page-index .col-2 .mini-item {
    width: 100%;
}

#page-index .col-2 .mini-item .detail a {
    display: block;
    line-height: 40px;
}

@media (min-width:1420px) {
    #page-index .col-1 {
        width: 880px;
    }

    #page-index .col-1 .section.empty:after,#page-index .col-1 .section .sec-empty-hint {
        left: 400px;
    }

    #page-index .col-1 .channel .content {
        width: 880px;
    }

    #page-index .col-1 .coin .content {
        width: 900px;
    }

    #page-index .col-1 .coin .small-item:nth-child(8),#page-index .col-1 .coin .small-item:nth-child(9),#page-index .col-1 .coin .small-item:nth-child(10) {
        display: block;
    }
}

/*# sourceMappingURL=space.11.f69f7d6f8fbedc95d9c6de110515943ee7b4dd33.css.map*/


#space-theme {
    transition: bottom .4s ease;
    position: fixed;
    left: 0;
    bottom: -600px;
    width: 100%;
    z-index: 1000;
    background: rgba(0,0,0,.8);
    color: #fff;
}

#space-theme.theme-show {
    bottom: 0;
}

#space-theme .theme-buy-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    background-color: rgba(0,0,0,.7);
}

#space-theme .theme-buy-layer #theme-buy-layer-wrapper {
    background: #fff;
    border-radius: 4px;
    position: fixed;
    left: 50%;
    transition: opaicty .2s ease;
    top: 50%;
    width: 370px;
    margin: -200px 0 0 -185px;
    z-index: 1011;
}

#space-theme .theme-tab {
    cursor: pointer;
    display: block;
    float: left;
    font-size: 18px;
    margin-right: 10px;
    line-height: 52px;
    width: 130px;
    text-align: center;
}

#space-theme .theme-tab.active {
    background-color: #111;
}

#space-theme .theme-ann {
    color: #ff98ba;
    float: left;
    line-height: 32px;
    margin-right: 33px;
}

#space-theme .theme-ann-icon {
    background-position: -1307px -154px;
    width: 10px;
    height: 12px;
    margin-right: 10px;
    position: relative;
    top: 1px;
}

#space-theme .theme-close {
    background-position: -527px -271px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    margin-right: -10px;
}

#space-theme .theme-close:hover {
    background-position: -591px -271px;
}

#space-theme .theme-topright {
    float: right;
    margin-top: 10px;
}

#space-theme .theme-topright .theme-buy-vip {
    line-height: 30px;
    width: 90px;
    margin-left: 15px;
}

#space-theme .theme-btn {
    line-height: 30px;
    width: 88px;
}

#space-theme .theme-btn.primary {
    background: #f25d8e;
    border: 1px solid #f25d8e;
}

#space-theme .theme-btn.primary:hover {
    background-color: #ff85ad;
    border-color: #ff85ad;
}

#space-theme .theme-btn.primary.disabled {
    border-color: #aaa;
}

#space-theme .theme-panel {
    background: #111;
    padding: 25px 0 15px;
    position: relative;
}

#space-theme .theme-panel[tab-id="1"] .theme-list {
    padding-left: 45px;
}

#space-theme .theme-list {
    position: relative;
    height: 280px;
    overflow: hidden;
}

#space-theme .theme-list[name=toutu] {
    padding-left: 45px;
}

#space-theme .theme-list-inner {
    padding-bottom: 40px;
}

#space-theme .theme-item-outer {
    float: left;
    width: 220px;
    height: 240px;
    position: relative;
}

#space-theme .theme-item-outer:hover {
    z-index: 1;
}

#space-theme .theme-item {
    background-position: center 15px;
    background-repeat: no-repeat;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    width: 180px;
    padding: 182px 20px 10px;
    position: absolute;
    top: 0;
    left: 0;
}

#space-theme .theme-item:hover {
    background-color: #4c4c4c;
}

#space-theme .theme-item:hover .theme-action,#space-theme .theme-item:hover .theme-price {
    display: block;
}

#space-theme .theme-item.active {
    background-color: #4c4c4c;
    box-shadow: inset 0 0 0 3px hsla(0,0%,100%,.4);
}

#space-theme .theme-item.active .theme-item-active-icon {
    display: block;
}

#space-theme .theme-item-active-icon {
    background-position: -650px -653px;
    display: none;
    width: 37px;
    height: 37px;
    position: absolute;
    top: 0;
    right: 0;
}

#space-theme .theme-name {
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    max-width: 10em;
    margin: 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#space-theme .theme-price {
    color: #ccd0d7;
    display: none;
    margin: 5px 0 -1px;
}

#space-theme .theme-action {
    display: none;
    padding: 10px 0 5px;
}

#space-theme .theme-btn {
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    width: 60px;
    line-height: 24px;
    margin: 0 3px;
}

#space-theme .theme-btn.use {
    background: #00a1d6;
}

#space-theme .theme-btn.use:hover {
    background: #00b5e5;
}

#space-theme .theme-btn.buy {
    background: #f25d8e;
    width: 72px;
}

#space-theme .theme-btn.buy:hover {
    background: #ff85ad;
}

#space-theme .theme-btn.renew {
    border: 1px solid;
    line-height: 22px;
    width: 58px;
}

#space-theme .theme-btn.renew:hover {
    background: #ff85ad;
    border-color: #ff85ad;
}

#space-theme .toutu-item {
    border: 3px solid #555;
    border-radius: 12px;
    cursor: pointer;
    float: left;
    width: 310px;
    height: 96px;
    position: relative;
    margin: 0 25px 20px 0;
    background-size: img;
    background-position: 50%;
}

#space-theme .toutu-item.active,#space-theme .toutu-item.for-sale.active {
    border-color: #fff;
    z-index: 2;
}

#space-theme .toutu-item.active .selected-icon,#space-theme .toutu-item.for-sale.active .selected-icon {
    display: block;
}

#space-theme .toutu-item.active .toutu-detail,#space-theme .toutu-item.for-sale.active .toutu-detail {
    border-color: #fff;
}

#space-theme .toutu-item:hover {
    z-index: 3;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#space-theme .toutu-item:hover .toutu-detail {
    left: -3px;
    opacity: 1;
}

#space-theme .toutu-item.upload-toutu {
    position: relative;
    width: 316px;
    height: 102px;
    color: #99a2aa;
    border: none;
    background-image: url(s1.hdslb.com/bfs/static/jinkela/space/assets/396脳102-normal.png);
    background-repeat: no-repeat;
    transition: background-image .2s ease,color .2s ease;
}

#space-theme .toutu-item.upload-toutu:hover {
    color: #fff;
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/396脳102-hover.png);
}

#space-theme .toutu-item.upload-toutu:hover .upload-icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAaCAYAAADIUm6MAAABoklEQVR42mNgAIL///+rAvFaIP74f+DBR6hbVBnwAaACdSB+/3/wAZCb1PE5fC1U4TYglmQYYAByA9QtILAWn0JY8hhwR6M5HgQ+41MEBgyDDBB014hyOFB5GRA/h+IyIvW0AvEXIL4KxMF0dzhQqQeWEsCDgJ4sNPX/gDiU3g4vxOLwAjzqJXDUD+/xFQi0cLgGEH9DcsB3kBge9XPwlNXz6J3GLYF4IRDPBbEJVG6/8Tj8LxDr0Cb3opatiiSavYKIGnItTRwOlGID4unQ0AGBJUDMTIS5xtBMSAiA1Bhg0X8EiA+T5XCoo3dgsaycCIfvJ6FdsomqaRwoPAmHRT+AWBePmYkkNqhAoW5CFYcDhdwJRPV1IObHok8FiD+Q0RrcQrHDgVwOIL5HhGXngFgOSR+oXX+HSIduo3o5DuTWkBBSoDJ9NRCvgyYhYoEkVWtOIFOEHj0hJPsOk6H9MDaHt9Gje0Ohw49gc/iH//QBVE8qJ+jk8K2gBhglDh90XTdiHb6WmBAYjA7XGEzDEyQ1/qDNT1DIfxpEDj8CLj1wAAAxW+fPWMftvgAAAABJRU5ErkJggg==);
}

#space-theme .toutu-item.upload-toutu:hover .upload-tips.u-tips2 {
    display: block;
}

#space-theme .toutu-item.upload-toutu:hover .upload-tips.u-tips1 {
    display: none;
}

#space-theme .toutu-item.upload-toutu .upload-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#space-theme .toutu-item.upload-toutu .upload-icon {
    width: 46px;
    height: 26px;
    margin: 0 auto;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAaCAYAAADIUm6MAAABqUlEQVR42mNgAIKZi1apAvFaIP4IxP8HGH+EukWVAR8AKlAH4veDwMHoGOQmdXwOXwtVuA2IJRkGGIDcAHULyE1r8SmEJY8BdzSa40Fu+oxPEThqGAYZIOiuEeVwoPoyIH4OxWVE6mkF4i9AfBWIg+nucKBaDywlgAcBPVlo6v8BcSi9HV6IxeEFeNRL4Kgf3uMrEGjhcA0g/obkgO8gMTzq5+Apq+fRO41bAvFCIJ4LYhOo3H7jcfhfINahTe5FLVsVSTR7BRE15FqaOBwoxwbE06GhA1K7BIiZiTDXGJoJCTkcpMYAi/4jQHyYLIdDHb0Di2XlRDh8Pwntkk1UTeNA8Uk4LPoBxLp4zEwksUEFCnUTqjgcKOZOIKqvAzE/Fn0qQPyBjNbgFoodDuRzAPE9Iiw7B8RySPpA7fo7RDp0G9XLcSC/hoSQApXpq4F4HTQJEatPkqo1J5AtQo+eEJJ9h8nQfxibw9vo0cOh0OFHsDn8A526ZlRPKifo5PCtoAYYJQ4fdF03Yh2+lpgQGIwO1xhMwxMkNf6gzU9QyH8aRA4/Ai49cAAAVzZmwRFfokoAAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    transition: background-image .2s ease;
}

#space-theme .toutu-item.upload-toutu .upload-tips {
    line-height: 20px;
    margin-top: 5px;
    text-align: center;
    font-size: 12px;
    white-space: nowrap;
}

#space-theme .toutu-item.upload-toutu .upload-tips.u-tips2 {
    display: none;
}

#space-theme .toutu-item.upload-toutu .upload-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

#space-theme .toutu-item .vip-icon {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 57px;
    height: 57px;
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/vip-tag.png);
    background-repeat: no-repeat;
}

#space-theme .toutu-item .selected-icon {
    display: none;
    background-image: url(./icons.png);
    background-position: -642px -650px;
    content: "";
    position: absolute;
    width: 45px;
    height: 45px;
    top: -3px;
    right: 0;
}

#space-theme .theme-list-inner .noviptag:after {
    display: none;
}

#space-theme .edit-container {
    width: 1100px;
    height: 280px;
    margin: 0 auto;
    overflow: hidden;
}

#space-theme .edit-container .crop-container .preview-container {
    position: relative;
    height: 172px;
    background-color: #222;
    border-radius: 10px;
    overflow: hidden;
}

#space-theme .edit-container .crop-container .preview-container.selecting {
    background-color: #111;
}

#space-theme .edit-container .crop-container .preview-container .jcrop-holder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 1100px;
    max-height: 172px;
}

#space-theme .edit-container .crop-container .crop-target {
    max-width: 1100px;
    max-height: 172px;
}

#space-theme .edit-container .crop-container .option-pane {
    margin-top: 10px;
    height: 16px;
}

#space-theme .edit-container .crop-container .option-pane .rechoose {
    display: inline-block;
    height: 16px;
    line-height: 16px;
    padding-left: 20px;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAxklEQVR42o3RzQoBURTA8SsZxBuMZ/GxsLCyV16AsJOF4oWshi02mgVFZOcRJMVK6vqfOrekzMypX82ce87M6R5jNKy1WXSwwQ0PhOjDM99BooQjFqgjjyJqCLCH74oz2GJk/gRnYxxkCnlJo2UigvOJjtozcaHFVscKJdGOaahirU0vSbzRSPAnaZzJw1m7V6gkmVHu+apN04i6JlJuYRcsI4qHOMmNuoSvtxDosgrIoYw5drLc3694GOgSn7jr3Xdlua7uAzN0CaobG2d1AAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-position: 2px 2px;
    transition: background-image .2s ease,color .2s ease;
}

#space-theme .edit-container .crop-container .option-pane .rechoose:hover {
    color: #00a1d6;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAyUlEQVR42o3RzwoBcRDA8Z9kEW+wnsWfg4OTu/IChJscFK+yD+C0XHHRHigie/IIkuIkxff3M3ug7O7UZ9ummd1pRqkgHD+NFla44AYPXVjqKxy/gD1mqCKLPCpwsYUdFKewxkD9C8cfYmem4JFEQ4WF449k1I6KjE/xS8bydKIZ0VDGUpoeOvFELcafdONEvxyle4FSnBn1ns/SNA6pqyMRHOyEeUhxHwezUUnYsgVXjpVDBkVMsTHH/fmKhZ4c8Y6r7L5tjivxBoCZldPnr4+cAAAAAElFTkSuQmCC);
}

#space-theme .edit-container .crop-container .option-pane .upload-size {
    margin-left: 10px;
    color: #99a2aa;
    font-size: 12px;
}

#space-theme .edit-container .uploading-container {
    margin-bottom: 30px;
}

#space-theme .edit-container .uploading-container .uploading {
    position: relative;
    height: 170px;
    margin: 15px auto 0;
    background-color: #1f1f1f;
    border-radius: 10px;
}

#space-theme .edit-container .uploading-container .upload-content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 60px;
    margin: -30px 0 0 -23px;
}

#space-theme .edit-container .uploading-container .loading-icon {
    text-align: center;
}

#space-theme .edit-container .uploading-container .loading-icon.loading img {
    animation: loadingRotate 1s linear infinite;
}

#space-theme .edit-container .uploading-container .loading-text {
    margin-top: 10px;
    font-size: 12px;
    color: #6d757a;
    text-align: center;
}

#space-theme .edit-container .upload-action {
    margin-top: 5px;
    text-align: center;
}

#space-theme .edit-container .upload-action .btn {
    width: 90px;
    height: 30px;
    line-height: 30px;
    margin-right: 20px;
    color: #fff;
    border-radius: 4px;
}

#space-theme .edit-container .upload-action .btn:last-of-type {
    margin-right: 0;
}

#space-theme .edit-container .upload-action .btn.confirm-action.uploading-state {
    color: #666;
    border-color: #1f1f1f;
    background-color: #1f1f1f;
}

#space-theme .edit-container .upload-action .btn.cancel-action {
    color: #fff;
    border-color: #fff;
}

#space-theme .edit-container .upload-action .btn.cancel-action:hover {
    color: #00a1d6;
    background: none;
    border-color: #00a1d6;
}

@keyframes loadingRotate {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(180deg);
    }

    to {
        transform: rotate(1turn);
    }
}

#space-theme .popup-register-vip {
    position: fixed;
    display: none;
    left: 0;
    top: 0;
    z-index: 1987;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba(0,0,0,.7);
}

#space-theme .popup-register-vip .popup-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1988;
    width: 350px;
    height: 310px;
    background-color: #fff;
    box-shadow: 0 3px 26px rgba(0,0,0,.9);
    border-radius: 4px;
}

#space-theme .popup-register-vip .popup-title {
    line-height: 20px;
    margin-top: 40px;
    font-size: 14px;
    color: #666;
    text-align: center;
}

#space-theme .popup-register-vip .popup-title span {
    color: #fd2828;
}

#space-theme .popup-register-vip .popup-content {
    margin-top: 10px;
    text-align: center;
}

#space-theme .popup-register-vip .popup-btn {
    margin-top: 30px;
    text-align: center;
}

#space-theme .popup-register-vip .popup-btn span {
    display: inline-block;
    width: 120px;
    height: 36px;
    line-height: 36px;
    font-size: 12px;
    color: #fff;
    background-color: #ff5b5b;
    border-style: none;
    border-radius: 5px;
    text-align: center;
    transition: all .2s ease;
}

#space-theme .popup-register-vip .popup-btn span:hover {
    background-color: #ff7575;
}

#space-theme .popup-register-vip .popup-close-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-image: url(./icons.png);
    background-repeat: no-repeat;
    background-position: -522px -267px;
}

#space-theme .toutu-detail {
    background-repeat: no-repeat;
    border: 3px solid #555;
    border-radius: 12px;
    opacity: 0;
    transition: opacity .2s ease;
    overflow: hidden;
    position: absolute;
    top: -3px;
    left: -9999px;
    width: 100%;
}

#space-theme .toutu-meta {
    background: #333;
    line-height: 1em;
    margin-top: 93px;
    padding: 10px;
    position: relative;
}

#space-theme .toutu-title {
    color: #fff;
    margin-bottom: 10px;
}

#space-theme .toutu-price {
    color: #ccd0d7;
}

#space-theme .toutu-action {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

#space-theme .toutu-btn {
    border-radius: 4px;
    display: inline-block;
    text-align: center;
    line-height: 24px;
    margin-left: 7px;
    width: 54px;
}

#space-theme .toutu-btn.vip {
    background: #f66;
    width: 90px;
}

#space-theme .toutu-btn.vip:hover {
    background: #f88;
}

#space-theme .toutu-btn.buy {
    border: 1px solid;
    width: 52px;
    line-height: 22px;
}

#space-theme .toutu-btn.buy:hover {
    color: #ff85ad;
}

#space-theme .toutu-btn.use {
    background: #00a1d6;
}

#space-theme .toutu-btn.use:hover {
    background: #00b5e5;
}

#space-theme .theme-buy-layer.active {
    opacity: 1;
    left: 50%;
}

#space-theme .theme-buy-close {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 9;
    width: 30px;
    height: 30px;
    background-image: url(./icons.png);
    cursor: pointer;
    background-position: -336px -593px;
}

#space-theme .theme-buy-close:hover {
    background-position: -400px -593px;
}

#space-theme .theme-buy-header {
    background: #e5e9ef;
    border-radius: 4px 4px 0 0;
    position: relative;
}

#space-theme .theme-buy-preview {
    border-radius: 4px;
    display: block;
    width: 128px;
    height: 128px;
    margin: 0 auto 20px;
    top: -60px;
    position: relative;
}

#space-theme .theme-buy-name {
    color: #111;
    font-size: 24px;
    line-height: 1em;
    margin: -60px auto 0;
    padding-bottom: 20px;
    text-align: center;
    max-width: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#space-theme .theme-buy-current-expire-time {
    color: #6d757a;
    line-height: 1em;
    text-align: center;
    margin-top: -5px;
    padding-bottom: 15px;
}

#space-theme .theme-buy-body {
    padding: 0 36px;
}

#space-theme .theme-buy-a {
    color: #99a2aa;
    font-size: 14px;
    line-height: 1em;
    margin: 25px 0 10px;
}

#space-theme .theme-buy-list {
    margin-bottom: 25px;
    width: 330px;
}

#space-theme .theme-buy-item {
    border: 1px solid #ccd0d7;
    border-radius: 4px;
    color: #222;
    cursor: pointer;
    font-size: 14px;
    float: left;
    width: 65px;
    margin-right: 10px;
    line-height: 38px;
    text-align: center;
}

#space-theme .theme-buy-item:hover {
    border-color: #00a1d6;
    color: #00a1d6;
}

#space-theme .theme-buy-item.active {
    border-color: #00a1d6;
    box-shadow: 0 0 0 1px #00a1d6;
    color: #00a1d6;
}

#space-theme .theme-buy-item.active .theme-buy-custom-length {
    color: #00a1d6;
}

#space-theme .theme-buy-item.custom {
    color: #99a2aa;
}

#space-theme .theme-buy-price {
    border-bottom: 1px solid #e5e9ef;
    color: #6d757a;
    font-size: 14px;
    line-height: 1em;
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 25px;
}

#space-theme .theme-buy-price var {
    color: #00a1d6;
    font-size: 18px;
    font-weight: 700;
}

#space-theme .theme-buy-footer {
    padding: 200px 0 30px;
    text-align: center;
}

#space-theme .theme-buy-layer-btn {
    border: 1px solid #ccd0d7;
    width: 120px;
    line-height: 34px;
    vertical-align: middle;
    margin: 0 5px;
}

#space-theme .theme-buy-vip {
    background: #f66;
    border-color: #f66;
    color: #fff;
}

#space-theme .theme-buy-vip:hover {
    background: #f88;
    border-color: #f88;
    color: #fff;
}

#space-theme .theme-buy-submit-btn {
    display: inline-block;
    border-radius: 3px;
    transition: all .1s ease;
    text-align: center;
    border-color: #00a1d6;
    color: #00a1d6;
}

#space-theme .theme-buy-submit-btn:hover {
    border-color: #00b5e5;
    color: #00b5e5;
}

#space-theme .hideit {
    display: block;
}

#space-theme input.theme-buy-custom-length {
    background: transparent;
    box-shadow: none;
    border: none;
    color: #99a2aa;
    cursor: pointer;
    font-size: 14px;
    line-height: 38px;
    height: 38px;
    transition: none;
    padding: 0 12px;
    width: 40px;
    text-align: center;
}

#space-theme input.theme-buy-custom-length:focus {
    border: none;
}

#space-theme #theme-buy-select-length .theme-buy-footer {
    padding-top: 0;
}

#space-theme #theme-buy-success {
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/theme-buy-success.png);
    background-repeat: no-repeat;
    background-position: center 140px;
}

#space-theme #theme-buy-success .theme-buy-body {
    padding: 40px 55px 0;
}

#space-theme #theme-buy-fail {
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/theme-buy-processing.png);
    background-repeat: no-repeat;
    background-position: center 160px;
}

#space-theme #theme-buy-fail .theme-buy-body {
    padding: 40px 40px 0;
}

#space-theme .theme-buy-success-icon {
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    background-image: url(./icons.png);
    background-position: -646px -1037px;
}

#space-theme #theme-buy-success-g {
    position: absolute;
    left: 105px;
    top: 135px;
    width: 160px;
    height: 180px;
}

#space-theme .theme-buy-fail-icon {
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    margin-left: -10px;
    background-image: url./icons.png);
    background-position: -646px -909px;
}

#space-theme #theme-buy-fail .theme-buy-result-info,#space-theme #theme-buy-fail .theme-buy-result-title {
    margin-left: 60px;
}

#space-theme .theme-buy-result-title {
    color: #222;
    font-size: 22px;
    line-height: 1em;
    margin: 0 0 15px 70px;
}

#space-theme .theme-buy-result-info {
    color: #99a2aa;
    font-size: 14px;
    margin-left: 70px;
    margin-bottom: 10px;
    line-height: 1em;
    white-space: nowrap;
}

#space-theme .theme-buy-g-name {
    color: #00a1d6;
    display: inline-block;
    max-width: 8em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

#space-theme .theme-buy-rmb-hint {
    color: #222;
    font-size: 22px;
    line-height: 24px;
    margin-bottom: 15px;
}

#space-theme .theme-buy-rmb-secondary {
    color: #99a2aa;
    font-size: 14px;
}

@media (min-width:1420px) {
    #space-theme .theme-panel .theme-list[name=toutu] {
        padding-left: 0;
    }

    #space-theme .toutu-item {
        width: 290px;
        height: 90px;
        margin-right: 20px;
    }

    #space-theme .toutu-item.upload-toutu {
        width: 296px;
        height: 96px;
        background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/296x96-normal.png);
    }

    #space-theme .toutu-item.upload-toutu:hover {
        background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/296x96-hover.png);
    }

    #space-theme .theme-ann {
        margin-right: 13px;
    }

    #space-theme .theme-item {
        margin-right: 36px;
    }
}

.h-notice[data-v-12a8e8b3] {
    height: 42px;
    padding: 0 16px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}

.h-notice a[data-v-12a8e8b3] {
    display: inline-block;
    height: 100%;
    max-width: 1226px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 42px;
    cursor: auto;
}

.h-notice a.linkType[data-v-12a8e8b3] {
    cursor: pointer;
}

.h-notice .icon-notice[data-v-12a8e8b3] {
    width: 14px;
    height: 14px;
    margin-right: 8px;
}

.medal-box {
    position: relative;
    vertical-align: middle;
    margin-left: 3px;
    height: 16px;
    line-height: 10px;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: 8px;
    color: #f25d8e;
    border-radius: 1px;
}

.medal-box .medal-flag {
    position: absolute;
    transform: translate(-50%,-1px);
    width: 18px;
    height: 18px;
}

.medal-box .medal-level,.medal-box .medal-true-love {
    border: .5px solid #f25d8e;
    text-align: center;
    box-sizing: content-box;
}

.medal-box .medal-level .tiny,.medal-box .medal-true-love .tiny {
    transform: scale(.5);
    width: 200%;
    height: 200%;
    font-weight: 400;
    transform-origin: left 30%;
    font-size: 20px;
}

.medal-box .medal-true-love {
    border-right-width: 0;
    border-bottom-left-radius: 1px;
    border-top-left-radius: 1px;
    padding-left: 2px;
    padding-right: 2px;
    white-space: nowrap;
}

.medal-box .medal-level {
    border-left: .5px solid #f25d8e;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 1px;
    border-top-right-radius: 1px;
    width: 18px;
    background: #fff;
}

.h {
    position: relative;
    z-index: 10;
}

.h .h-forbid {
    height: 42px;
    margin-bottom: 10px;
    background-color: #e5e9ef;
    border-radius: 4px;
}

.h .h-forbid .f-wrap {
    width: 203px;
    margin: 0 auto;
}

.h .h-forbid .f-wrap .f-icon {
    background-image: url(/./icons.png);
    background-position: -664px -458px;
    display: inline-block;
    width: 80px;
    height: 42px;
    margin-right: 20px;
}

.h .h-forbid .f-wrap .f-txt {
    font-size: 14px;
    color: #222;
    line-height: 42px;
    display: inline-block;
    vertical-align: top;
}

.h .h-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAEElEQVR4AWP48vU7MqKUDwA7qkfh9iF73wAAAABJRU5ErkJggg==);
    background-position: 50%;
    background-size: img;
    transition: background-image .2s ease,background-size 1s ease;
    padding-top: 116px;
    position: relative;
}

.h .avatar-icon {
    display: block;
    position: absolute;
    right: 0;
    top: 44px;
    width: 20px;
    height: 20px;
    z-index: 9;
}

.h .h-user {
    position: relative;
    z-index: 1;
}

.h .gender {
    display: none;
    width: 21px;
    height: 18px;
    margin-right: 5px;
    vertical-align: middle;
    background-position: -212px -922px;
}

.h .gender.male {
    display: inline-block;
    background-position: -212px -472px;
}

.h .gender.female {
    display: inline-block;
    background-position: -211px -404px;
}

.h .m-level {
    display: inline-block;
    width: 25px;
    height: 14px;
    margin-right: 5px;
}

.h .m-level.senior {
    width: 35px;
    height: 14px;
}

.h .m-level svg {
    width: 100%;
    height: 100%;
}

.h .h-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 84px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAABdCAMAAADNEjtLAAABEVBMVEUDAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAAADAACnjvHuAAAAW3RSTlMBAgMEBQYHCAkKCwwNDxAREhQVFhgZGxweHyEiJCUnKSosLS8xMjQ2ODk7PT5AQkNFR0hKTE5PUVNUVldZW1xeX2FiZGVnaGprbG5vcHFzdHV2d3h5ent8fX5/XoZ4lgAAAPVJREFUeAHt1AERADAQAiDdrX/mDyKEIAAAjGkDsOk3AAIEECCAAAEECCBAAAECCBBAgAACBBAggAABBAggQAABAggQQIAAAgQQIIAAAQQIIEAAAQIIEECAAAIEECCAAAEECAgQQIAAAgQQIIAAAQQIIEAAAQIIEECAAAIEECCAAAEECCBAAAECCBBAgAACBBAggAABBAggQAABAggQQIAAAgQQIIAAAQECCBBAgAACBBAggAABBAggQAABAggQQIAAAgQQIIAAAQQIIEAAAQIIEECAAAIEECCAAAEECCBAAAECCBBAgAACBAQIIEAAAQIseAEYdZ9sAcJDX4ICAAAAAElFTkSuQmCC);
    background-repeat: repeat-x;
}

.h .h-fans-icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.h .h-fans-icon:hover .fans-hover-tip {
    display: block;
}

.h .h-fans-icon .fans-hover-tip {
    position: absolute;
    display: none;
    top: -29px;
    left: 5px;
    width: 138px;
    padding: 0 12px;
    font-size: 12px;
    color: #ff85ad;
    background: #fff;
    border: 1px solid #ff85ad;
    border-radius: 4px;
    box-sizing: border-box;
}

.h .h-fans-icon .fans-hover-tip:after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 5px;
    width: 7px;
    height: 7px;
    border: 1px solid #ff85ad;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    background-color: #fff;
}

.h .h-fans-icon .fans-hover-tip .tip-inner {
    font-size: 12px;
    color: #505050;
    line-height: 12px;
}

.h .h-fans-icon .h-fans-text {
    display: block;
    width: 20px;
    height: 16px;
    line-height: 14px;
    font-size: 12px;
    color: #ff85ad;
    background: #fff;
    border: 1px solid #ff85ad;
    border-radius: 4px;
    box-sizing: border-box;
}

.h .avatar-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,.6);
    font-size: 12px;
    color: #fff;
    line-height: 60px;
    text-align: center;
    opacity: 0;
    border-radius: 50%;
    transition: opacity .2s;
}

.h .bili-avatar-icon,.h .bili-avatar-nft-icon {
    z-index: 1;
}

.h .nft-avatar-img {
    width: 68px;
    height: 68px;
    line-height: 68px;
}

.h .bili-avatar-img {
    border: 2px solid hsla(0,0%,100%,.4);
}

.h .avatar-container:hover .avatar-img {
    opacity: 1;
}

.h .avatar-container {
    position: relative;
}

.h .h-info {
    margin-left: 20px;
    padding-bottom: 16px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}

.h .h-basic {
    color: #fff;
    font-size: 0;
    margin-left: 22px;
}

.h .h-basic .h-basic-spacing {
    margin-top: 6px;
}

.h .h-basic .h-basic-spacing.is-honor {
    margin: 3px 0;
}

.h .h-basic .honor {
    overflow: hidden;
    width: 735px;
    height: 16px;
}

.h .h-basic .honor .honor-item {
    float: left;
    font-size: 12px;
    color: #fff;
    line-height: 14px;
    font-weight: 400;
    padding: 1px 5px;
    background: hsla(0,0%,100%,.2);
    box-shadow: inset 0 0 0 0 hsla(0,0%,100%,.5);
    border-radius: 4px;
    margin-right: 10px;
    cursor: default;
}

.h .h-basic .honor .cursor {
    cursor: pointer;
}

.h #h-name {
    display: inline-block;
    margin-right: 5px;
    font-weight: 700;
    line-height: 18px;
    font-size: 18px;
    vertical-align: middle;
}

.h #h-ceritification {
    background-position: -217px -792px;
    display: none;
    width: 11px;
    height: 18px;
    margin: 0 1px 0 6px;
    vertical-align: middle;
}

.h .h-sign {
    background: transparent;
    border-radius: 4px;
    border: none;
    box-shadow: none;
    color: hsla(0,0%,100%,.8);
    font-size: 12px;
    font-family: Microsoft Yahei;
    line-height: 26px;
    height: 26px;
    margin-left: -5px;
    padding: 0 5px;
    position: relative;
    top: -1px;
    width: 730px;
    font-weight: 400;
}

.h .h-f-btn {
    background: rgba(0,0,0,.45);
    box-shadow: 0 0 0 2px hsla(0,0%,100%,.3);
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    float: left;
    text-align: center;
    margin: 0 20px 17px 0;
    width: 76px;
    line-height: 30px;
}

.h .h-f-btn:hover {
    background: rgba(0,0,0,.5);
}

.h .h-f-btn .icon-arrow {
    margin-left: 4px;
    background-position: -1369px -214px;
}

.h .h-f-btn.special {
    width: 100px;
}

.h .h-f-btn .video-commonmenu {
    vertical-align: middle;
    margin-right: 2px;
}

.h .h-follow {
    background: #f25d8e;
    box-shadow: 0 0 0 2px #fff;
    color: #fff;
}

.h .h-follow:hover {
    background: #ff85ad;
}

.h .h-message:hover {
    color: #fff;
}

.h .h-vipType {
    display: inline-block;
    height: 16px;
    line-height: 16px;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    padding: 0 5px;
    background-color: #f45a8d;
    vertical-align: middle;
    margin-right: 5px;
    cursor: pointer;
}

.h .h-vipType.disable {
    background-color: #ccd0d7;
    color: #99a2aa;
}

.h .h-guest-hint {
    background: rgba(0,161,214,.9);
    color: #fff;
    font-size: 12px;
    line-height: 40px;
    text-align: center;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
}

.h .h-version {
    position: absolute;
    top: 15px;
    right: 57px;
}

.h .h-v-btn {
    background: rgba(0,0,0,.45);
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    line-height: 30px;
    transition: all .1s ease;
    padding: 0 10px;
}

.h .h-v-btn:hover {
    background: rgba(0,0,0,.5);
}

.h .h-v-icon {
    background-position: -1111px -407px;
    width: 14px;
    height: 14px;
}

.h .h-role-icon {
    margin-left: 5px;
}

.h .h-action {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.h body[role="2"] .h-follow {
    display: none;
}

.h .h-v-host,.h body[role="2"] .h-unfollow {
    display: inline-block;
}

.h .h-v-host {
    background: #fff;
    border-radius: 4px;
    color: #222;
    cursor: pointer;
    line-height: 20px;
    margin-left: 22px;
    width: 56px;
    transition: background .2s ease;
}

.h .h-v-host:hover {
    color: #00a1d6;
}

.h #h-sign {
    background: transparent;
    border-radius: 4px;
    border: none;
    box-shadow: none;
    color: hsla(0,0%,100%,.8);
    font-size: 12px;
    font-family: Microsoft Yahei;
    line-height: 26px;
    height: 26px;
    margin-left: -5px;
    padding: 0 5px;
    position: relative;
    top: -1px;
    width: 730px;
}

.h #h-sign:hover {
    background: hsla(0,0%,100%,.2);
    box-shadow: 0 0 0 1px hsla(0,0%,100%,.5);
}

.h #h-sign:focus {
    background: #fff;
    box-shadow: inset 0 2px 4px rgba(35,54,86,.3);
    color: #6d757a;
}

.h #h-sign::-webkit-input-placeholder {
    color: #d6dee4;
}

.h #h-sign:-moz-placeholder,.h #h-sign::-moz-placeholder {
    color: #d6dee4;
}

.h #h-sign:-ms-input-placeholder {
    color: #d6dee4;
}

.h .space-theme-trigger {
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/theme-trigger-new.png);
    background-position: 0 0;
    border-radius: 0 4px 0 0;
    cursor: pointer;
    width: 58px;
    height: 49px;
    transition: opacity .2s ease;
    position: absolute;
    top: 0;
    right: 0;
}

.h .space-theme-trigger .btn {
    color: #fff;
}

.h .h:hover .space-theme-trigger {
    opacity: 1;
}

.h .h-add-to-black {
    float: left;
    height: 30px;
}

.h .h-add-to-black .be-dropdown-trigger {
    width: 30px;
    height: 30px;
}

.h .h-add-to-black .icon-ic_more {
    color: #fff;
    font-size: 30px;
    line-height: 30px;
}

.h .modal-wrapper .modal-body {
    padding: 30px 40px!important;
}

.h .space-report-popup .modal-wrapper {
    width: 548px;
}

.h .space-report-popup .modal-wrapper .modal-header .icon-ic_close {
    right: 28px;
}

.h .space-report-popup .modal-wrapper .modal-header .modal-title {
    font-weight: 500;
    font-size: 18px;
}

.h .space-report-popup .modal-wrapper .modal-body {
    border-bottom: 1px solid #e3e5e7;
    padding-top: 20px!important;
    padding-bottom: 20px!important;
    padding-left: 24px!important;
}

.h .space-report-popup .modal-wrapper .modal-footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 12px 0;
}

.h .space-report-popup .modal-wrapper .modal-footer .btn {
    margin-right: 8px;
}

.h .space-report-popup .modal-wrapper .modal-footer .btn.primary {
    -ms-flex-order: 1;
    order: 1;
    margin-right: 24px;
}

.h .report-popup-tip {
    line-height: 18px;
    font-size: 16px;
    color: #18191c;
    text-align: left;
}

.h .report-popup-list {
    margin-top: 18px;
    font-size: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

.h .report-popup-item {
    float: left;
    width: 90px;
    line-height: 20px;
    margin-bottom: 15px;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
}

.h .report-popup-item.checked .report-popup-item-checkbox {
    background: #00a1d6;
    border-color: #00a1d6;
}

.h .report-popup-item.checked .report-popup-item-checkbox:before {
    content: "";
    display: block;
    position: absolute;
    top: 6px;
    left: 3px;
    width: 0;
    height: 5px;
    border-left: 2px solid #fff;
    transform: rotate(-45deg);
}

.h .report-popup-item.checked .report-popup-item-checkbox:after {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 9px;
    width: 0;
    height: 11px;
    border-left: 2px solid #fff;
    transform: rotate(45deg);
}

.h .report-popup-item-checkbox {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    border: 1px solid #bec3cc;
    border-radius: 2px;
}

.h .report-popup-item-text {
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
    color: #222;
    vertical-align: middle;
}

.h .space-fans-medal {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

.h .space-fans-medal .normal-medal {
    height: 16px;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
}

.h .space-fans-medal .normal-medal .normal-left {
    width: 16px;
    height: 100%;
    background: #e5e9ef;
    border: 1px dashed #99a2aa;
    box-sizing: border-box;
    border-radius: 1px;
    position: relative;
}

.h .space-fans-medal .normal-medal .normal-left i {
    display: block;
    background: #99a2aa;
    border-radius: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.h .space-fans-medal .normal-medal .normal-left i:first-child {
    width: 8px;
    height: 1px;
}

.h .space-fans-medal .normal-medal .normal-left i:last-child {
    width: 1px;
    height: 8px;
}

.h .space-fans-medal .normal-medal .normal-right {
    width: 48px;
    height: 100%;
    position: relative;
    background: #000;
    opacity: .7;
    border-radius: 1px;
}

.h .space-fans-medal .normal-medal .normal-right p {
    width: 200%;
    height: 200%;
    font-size: 20px;
    transform: scale(.5);
    transform-origin: top left;
    line-height: 32px;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
}

.h .space-fans-medal .fans-medal {
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
}

.van-dialog.fans-medal-dialog {
    border-radius: 10px;
}

.van-dialog.fans-medal-dialog i {
    position: absolute;
    text-decoration: none;
    top: 13px;
    right: 12px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
}

.van-dialog.fans-medal-dialog .van-dialog__header .van-dialog__title {
    color: #00a1d6;
}

.van-dialog.fans-medal-dialog .van-dialog__body {
    padding: 0;
}

.space-user-avatar {
    width: 60px;
    min-width: 60px;
}

.space-user-avatar .avatar-wrap {
    position: relative;
    width: 100%;
    height: 60px;
}

.space-user-avatar .avatar-wrap.live-ani .a-cycle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
    border: 1px solid #f69;
    border-radius: 50%;
    z-index: 1;
    opacity: 0;
    animation: scaleUpCircle 1.5s linear;
    animation-iteration-count: infinite;
}

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

    to {
        transform: translate(-50%,-50%) scale(1.5);
        opacity: 0;
    }
}

.space-user-avatar .avatar-wrap.live-ani .a-cycle-1 {
    animation-delay: 0;
}

.space-user-avatar .avatar-wrap.live-ani .a-cycle-2 {
    animation-delay: .5s;
}

.space-user-avatar .avatar-wrap.live-ani .a-cycle-3 {
    animation-delay: 1s;
}

.space-user-avatar .live-tab {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%,50%);
    height: 15px;
    white-space: nowrap;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #f69;
    color: #fff;
    border-radius: 8px;
    border: 1.5px solid #fff;
    padding: 2px 3px;
    font-size: 12px;
    z-index: 2;
}

.space-user-avatar .live-tab .live-gif {
    width: 15px;
    margin-right: 5px;
}

.n {
    margin-bottom: 10px;
}

.n .n-tab-links .iconfont {
    display: inline-block;
    width: 20px;
    font-size: 20px;
    margin-right: 4px;
    vertical-align: middle;
}

.n .n-tab-links .icon-ic_home {
    color: #00c091;
}

.n .n-tab-links .icon-ic_following {
    color: #fb7299;
}

.n .n-tab-links .icon-ic_video {
    color: #02b5da;
}

.n .n-tab-links .icon-ic_article {
    color: #3bd3d3;
}

.n .n-tab-links .icon-ic_playlist {
    color: #9d8ce5;
}

.n .n-tab-links .icon-ic_channel {
    color: #23c9ed;
}

.n .n-tab-links .icon-ic_collect {
    color: #f3a034;
}

.n .n-tab-links .icon-ic_sub {
    color: #ff5d47;
}

.n .n-tab-links .icon-ic_setting {
    color: #23c9ed;
}

.n .n-tab-links .icon-ic_class1 {
    color: #0ba395;
}

.n .new-channel-tip {
    position: absolute;
    top: -23px;
    left: 180px;
    bottom: 15px;
    height: 32px;
    background: #fb7299;
    border-radius: 4px;
    z-index: 11;
    padding: 0 10px 0 16px;
    box-sizing: border-box;
}

.n .new-channel-tip .little_tv {
    position: absolute;
    top: -9px;
    left: -18px;
    display: inline-block;
    width: 37px;
    height: 43px;
    background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/little_tv_pop.png);
    background-size: img;
}

.n .new-channel-tip .tip-text {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    line-height: 32px;
    text-align: center;
    font-family: PingFang SC;
    font-weight: 400;
}

.n .new-channel-tip .tip_close {
    color: #fff;
    font-size: 10px;
    line-height: 10px;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    vertical-align: baseline;
    width: 10px;
    margin-left: 6px;
}

.n .new-channel-tip:after {
    content: "";
    display: block;
    position: absolute;
    top: 32px;
    left: 75px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #fb7299;
}

.n .n-inner {
    height: 66px;
    background: #fff;
    box-shadow: 0 0 0 1px #eee;
    border-radius: 0 0 4px 4px;
    padding: 0 20px;
    font-size: 0;
}

.n .n-cursor {
    background: #00a1d6;
    width: 0;
    height: 3px;
    transition: all .2s ease;
    position: absolute;
    bottom: -1px;
    left: 0;
}

.n .n-btn {
    display: inline-block;
    font-size: 0;
    line-height: 66px;
    margin-right: 16px;
    position: relative;
}

.n .n-btn.active {
    color: #00a1d6;
}

.n .n-tab-links {
    display: inline-block;
    font-size: 0;
    vertical-align: middle;
}

.n .n-text {
    font-size: 13px;
}

.n .n-num,.n .n-text {
    vertical-align: middle;
}

.n .n-num {
    margin-left: 2px;
    font-size: 12px;
    color: #99a2aa;
    font-family: Arial;
}

.n .n-statistics {
    float: right;
    height: 66px;
}

.n .n-data {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    float: left;
    width: 58px;
    height: 66px;
    padding: 10px 0;
    text-align: center;
    box-sizing: border-box;
}

.n .n-data.router-link-active .n-data-k,.n .n-data.router-link-active .n-data-v {
    color: #00a1d6;
}

.n .n-data .n-data-k {
    line-height: 14px;
    font-size: 12px;
    color: #99a2aa;
}

.n .n-data .n-data-v {
    line-height: 16px;
    margin-top: 5px;
    color: #222;
    font-size: 12px;
}

.n .n-fs:hover p,.n .n-gz:hover p {
    color: #00a1d6!important;
}

@media (min-width:1420px) {
    .n .n-btn {
        margin-right: 31px;
    }

    .n .new-channel-tip {
        left: 230px;
    }
}

.n-fix {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 111;
    transform: translateY(-70px);
    transition: transform .3s ease;
}

.n-fix .n-inner {
    padding-left: 20px;
    border-radius: 0;
}

.n-fix.fixed {
    transform: translateY(0);
}

.n-fix .n-avatar {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 5px;
    vertical-align: middle;
    border-radius: 50%;
    overflow: hidden;
}

.n-fix .n-avatar img {
    display: block;
    width: 24px;
}

.n-fix .n-text {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width:1420px) {
    .n-fix .n-btn {
        margin-right: 31px;
    }
}

.to-top {
    position: fixed;
    display: none;
    bottom: 100px;
    right: 20px;
    transform: translateY(0);
    width: 62px;
    height: 85px;
    margin-left: 602px;
    cursor: pointer;
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/space-to-top.png);
    background-position: -40px -44px;
}

.to-top.transition {
    transition: transform .3s ease-in;
}

.to-top.fly {
    transform: translateY(-1000px);
}

@media (min-width:1420px) {
    .to-top {
        margin-left: 712px;
    }
}

.fav-share {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.65);
    z-index: 2001;
}

.fav-share .share-iframe {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: border-box;
    margin-bottom: 50px;
}

#page-404[data-v-12b2bced] {
    width: 980px;
    min-height: 1200px;
    margin: 30px auto;
    background: #fff;
    border-radius: 10px;
}

#page-404 .p404[data-v-12b2bced] {
    margin: 0 auto;
    width: 200px;
    padding-top: 30px;
    text-align: center;
}

#page-404 .p404 .error[data-v-12b2bced] {
    margin: 0 auto;
    color: #666;
}

#page-404 .p404 .code[data-v-12b2bced] {
    width: 100px;
    margin-top: 30px;
}

#page-404 .p404 .message[data-v-12b2bced] {
    width: 150px;
}

#page-404 .back-btn[data-v-12b2bced] {
    display: block;
    line-height: 40px;
    text-align: center;
    background: #00a1d6;
    color: #fff;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    padding: 0 20px;
    width: 80px;
    margin: 20px auto 0;
}

.fade-enter-active,.fade-leave-active {
    transition: opacity .3s;
}

.fade-enter,.fade-leave-to {
    opacity: 0;
}

.zoom-enter-active,.zoom-leave-active {
    transition: transform .3s,opacity .3s;
}

.zoom-enter,.zoom-leave-to {
    transform: scaleY(0);
    opacity: 0;
}

.flip-list-move {
    transition: transform 1s;
}

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    word-break: break-word;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block;
}

em,i {
    font-style: normal;
}

ol,ul {
    list-style: none;
}

b {
    font-weight: 700;
}

blockquote,q {
    quotes: none;
}

blockquote:after,blockquote:before,q:after,q:before {
    content: "";
    content: none;
}

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

html {
    background: #f4f5f7;
}

body,html {
    height: 100%;
}

body {
    color: #222;
    font-size: 12px;
    line-height: 1.7em;
    margin: 0;
    overflow-y: scroll;
}

body,input,textarea {
    font-family: Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
}

input,textarea {
    outline: none;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease,background-color .2s ease;
}

a[href="javascript: 0"] {
    cursor: default;
}

a:hover {
    color: #00a1d6;
}

.flex-c-s {
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-c-l,.flex-c-s {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}

.flex-c-l {
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.wrapper {
    width: 1101px;
    margin: 0 auto;
    position: relative;
}

#browser-version-tip {
    position: absolute;
    top: 42px;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #e40c0c;
    text-align: center;
    font-size: 14px;
    color: #fff;
}

#browser-version-tip a {
    margin: 0 2px;
    text-decoration: underline;
    color: #07f;
}

#browser-version-tip #close-browser-tip {
    position: absolute;
    right: 0;
    top: 10px;
    margin-left: 15px;
    width: 20px;
    height: 20px;
    background-position: -1368px -278px;
    vertical-align: middle;
}

#browser-version-tip #close-browser-tip,.icon {
    display: inline-block;
    background-image: url(./icons.png);
}

.s-body {
    padding-bottom: 30px;
}

.s-body.loading {
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loadTV.gif);
    background-position: 50%;
    background-repeat: no-repeat;
    height: 200px;
}

.z_top .z_header {
    width: 1100px;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

* html .clearfix {
    height: 1%;
}

.space_input {
    line-height: 28px;
    height: 28px;
    padding: 0 10px;
    transition: all .3s ease;
    vertical-align: top;
    border: 1px solid #ccd0d7;
    border-radius: 0;
}

.space_input:focus {
    border-color: #00a1d6;
}

input[type=number] {
    -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

::-webkit-input-placeholder {
    color: #99a2aa;
}

::-moz-placeholder {
    color: #99a2aa;
}

:-ms-input-placeholder {
    color: #99a2aa;
}

:-moz-placeholder {
    color: #99a2aa;
}

input::-ms-clear {
    display: none;
}

.clearfix {
    display: block;
}

.col-full {
    background: #fff;
    box-shadow: 0 0 0 1px #eee;
    border-radius: 4px;
    padding: 20px;
}

.col-full .section.empty,.col-full .section.private {
    width: 100%!important;
}

.col-full .section.empty:after,.col-full .section.private:after {
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/nodata02.png);
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 4px;
    color: #6d757a;
    content: "\6570\636E\4E3A\7A7A";
    display: block;
    font-size: 14px;
    height: 450px;
    overflow: hidden;
    line-height: 640px;
    text-align: center;
}

.section {
    border-bottom: 1px solid #eee;
    margin-bottom: 17px;
    position: relative;
}

.section.empty .content,.section.empty .count,.section.empty .more,.section.empty .style,.section.loading .quantity,.section.loading .style {
    display: none;
}

.section.loading .content {
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loadTV.gif);
    background-position: 50%;
    background-repeat: no-repeat;
    text-indent: -9999px;
    height: 270px;
}

.section.loading .content * {
    display: none;
}

.section.empty .content,.section.loading .content,.section.private .content {
    width: 100%;
}

.section .count {
    background: #f6fafb;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #777;
    display: inline-block;
    font-size: 12px;
    line-height: 18px;
    height: 18px;
    margin-left: 11px;
    padding: 0 5px;
    position: relative;
    vertical-align: middle;
}

.section .count:before {
    background-position: -215px -340px;
    content: "";
    display: block;
    left: -7px;
    top: -3px;
    height: 22px;
    width: 10px;
}

.section .count:before,.section .more {
    background-image: url(./icons.png);
    position: absolute;
}

.section .more {
    background-position: -310px -405px;
    border: 1px solid #b8c0cc;
    border-radius: 4px;
    color: #6d757a;
    font-size: 12px;
    line-height: 22px;
    transition: border .2s ease;
    padding: 0 19px 0 10px;
    top: 6px;
    right: 0;
}

.section .more:hover {
    background-position: -438px -405px;
    border-color: #00a1d6;
    color: #00a1d6;
}

.section .operation {
    display: inline-block;
    background-image: url(./icons.png);
    border: 1px solid #b8c0cc;
    border-radius: 4px;
    color: #6d757a;
    font-size: 12px;
    line-height: 22px;
    transition: border .2s ease;
    padding: 0 19px 0 10px;
}

.section .operation:hover {
    border-color: #00a1d6;
    color: #00a1d6;
}

.section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.section.empty.video:after {
    content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\6295\8FC7\89C6\9891\54E6~~";
}

.section.empty.video.host:after {
    display: none;
}

.section.empty.audio:after {
    content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\53D1\5E03\8FC7\97F3\9891\54E6~~";
}

.section.empty.bangumi:after {
    content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\8BA2\9605\8FC7\756A\5267~~";
}

.section.empty.subs:after {
    content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\5173\6CE8\8FC7\6807\7B7E~~";
}

.section.empty.article:after {
    content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\6295\8FC7\4E13\680F\54E6~~";
}

.section.empty.coin:after {
    content: "\7A7A\95F4\4E3B\4EBA\6700\8FD1\4E00\4E2A\6708\6CA1\6709\6295\8FC7\786C\5E01~~";
}

.section.empty.follow:after {
    content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\5173\6CE8\4EFB\4F55\4EBA~~";
}

.section.empty.fans:after {
    content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\7C89\4E1D\54E6~~";
}

.section.empty.fans[page=follow]:after {
    content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\5173\6CE8\4EFB\4F55\4EBA~~";
}

.section.empty.fans[page=knight]:after {
    content: "\76EE\524D\4E3A\6B62\8FD8\6CA1\6709\4EFB\547D\4F60\7684\9A91\58EB\54E6~~";
}

.section.empty.qz:after {
    content: "\7A7A\95F4\4E3B\4EBA\6CA1\6709\52A0\5165\4EFB\4F55\5708\5B50~~";
}

.section.empty.fav:after {
    content: "\7A7A\95F4\4E3B\4EBA\8FD8\6CA1\6709\6536\85CF\89C6\9891~~";
}

.section.empty.album:after {
    content: "\8FD8\6CA1\6709\4E0A\4F20\76F8\7C3F\54E6~";
}

.section-title {
    color: #000;
    font-size: 20px;
    font-weight: 400;
    line-height: 33px;
    padding: 0 0 15px;
    position: relative;
}

.section-title .t {
    display: inline-block;
    vertical-align: middle;
}

.section-title .icon {
    width: 33px;
    height: 33px;
    vertical-align: middle;
    margin-right: 10px;
}

.sec-empty-hint {
    color: #99a2aa;
    font-size: 12px;
    position: absolute;
    top: 0;
    left: 300px;
}

.sec-empty-hint a {
    color: #00a1d6;
    margin-left: 10px;
}

.sec-empty-hint a:hover {
    color: #f25d8e;
}

.mini-item {
    display: block;
    float: left;
    margin-bottom: 25px;
    width: 25%;
}

.mini-item .img {
    display: block;
    float: left;
    width: 40px;
    height: 40px;
}

.mini-item .img img {
    border-radius: 4px;
    box-shadow: 0 0 0 1px #e5e9ef;
    display: block;
    width: 40px;
    height: 40px;
}

.mini-item .detail {
    font-size: 14px;
    margin-left: 50px;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.small-item {
    display: block;
    float: left;
    width: 160px;
    position: relative;
    margin: 0 0 3px;
    padding: 10px;
}

.small-item.disabled .title {
    color: #222;
}

.small-item.disabled .img img {
    -webkit-filter: blur(2px);
}

.small-item.disabled .disabled-img {
    display: block;
}

.small-item.disabled .img:hover .i-watchlater {
    display: none;
}

.small-item.new .new-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-block;
    padding: 0 4px;
    font-size: 10px;
    color: #fff;
    text-align: center;
    line-height: 14px;
    border-radius: 2px;
    margin-left: 4px;
    background-color: #42a0c4;
}

.small-item.new .isPay {
    right: 48px;
}

.small-item.watched .title {
    color: #999;
}

.small-item .img {
    background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/video-placeholder.png) 50%;
    background-size: img;
    border-radius: 4px;
    display: block;
    width: 160px;
    height: 100px;
    overflow: hidden;
    position: relative;
}

.small-item .img:hover .i-watchlater {
    display: block;
}

.small-item .img:hover .length {
    display: none;
}

.small-item img {
    border-radius: 4px;
    display: block;
    width: 160px;
    height: 100px;
}

.small-item .title {
    display: block;
    line-height: 20px;
    height: 38px;
    margin-top: 6px;
    overflow: hidden;
}

.small-item .length {
    background: #111;
    background: rgba(0,0,0,.5);
    border-radius: 5px 0 0 0;
    color: #fff;
    line-height: 20px;
    transition: top .2s ease;
    padding: 0 6px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.small-item .meta {
    color: #999;
    white-space: nowrap;
    font-size: 0;
    margin-top: 6px;
    height: 14px;
    line-height: 14px;
}

.small-item .meta .iconfont {
    font-size: 14px;
}

.small-item .meta.pubdate {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.small-item .meta>span {
    display: inline-block;
    white-space: nowrap;
    height: 14px;
    line-height: 14px;
    font-size: 12px;
    overflow: hidden;
}

.small-item .meta>span:first-child {
    width: 72px;
}

.small-item .meta>span .icon {
    width: 16px;
    height: 14px;
    vertical-align: sub;
}

.small-item .play .icon {
    background-position: -280px -25px;
}

.small-item .comments .icon {
    background-position: -280px -154px;
}

.small-item .time .icon {
    background-position: -280px -474px;
}

.small-item .view .icon {
    background-position: -1112px -858px;
}

.small-item .comment .icon {
    background-position: -277px -283px;
}

.small-item .pin,.small-item .unpin {
    cursor: pointer;
    float: right;
    display: none;
}

.small-item .pin:hover,.small-item .unpin:hover {
    text-decoration: underline;
}

.small-item .pin {
    color: #00a1d6;
}

.small-item .unpin {
    color: #e40c0c;
}

.small-item:hover .pin {
    display: block;
}

.small-item.pinned:hover .pin {
    display: none;
}

.small-item.pinned:hover .unpin {
    display: block;
}

.large-item {
    display: block;
    float: left;
    width: 340px;
    margin: 0 20px 30px 0;
}

.large-item .img {
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/video-placeholder.png);
    background-position: 50%;
    background-size: img;
    display: block;
    float: left;
    width: 110px;
}

.large-item .img img {
    border-radius: 4px;
    box-shadow: 0 0 0 1px #e5e9ef;
    display: block;
    width: 110px;
    height: 144px;
}

.large-item .detail {
    margin-left: 130px;
    padding-right: 20px;
    max-height: 140px;
    overflow: hidden;
}

.large-item .title {
    display: block;
    font-size: 18px;
    max-height: 48px;
    line-height: 24px;
    margin: -3px 0 10px;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
}

.large-item .title:hover {
    color: #00a1d6;
}

.large-item .end {
    background-position: -212px -22px;
    width: 20px;
    height: 20px;
    vertical-align: top;
    position: relative;
    top: 2px;
}

.large-item .desc {
    max-height: 60px;
    overflow: hidden;
}

.large-item .faved {
    background: #83b7db;
    border-radius: 4px;
    color: #fff;
    line-height: 20px;
    padding: 0 8px;
    margin-top: 4px;
}

.list-item {
    border-bottom: 1px solid #eee;
    display: block;
    padding: 20px 0;
    position: relative;
    line-height: 1;
}

.list-item:last-child {
    border-bottom: none;
}

.list-item.disabled .title {
    color: #ccd0d7;
}

.list-item.disabled .img img {
    -webkit-filter: blur(2px);
}

.list-item.disabled .disabled-img {
    display: block;
}

.list-item.disabled .img:hover .length {
    top: 100px;
}

.list-item.disabled .img:hover .i-watchlater {
    display: none;
}

.list-item.new .new-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-block;
    padding: 0 4px;
    font-size: 10px;
    color: #fff;
    text-align: center;
    line-height: 14px;
    border-radius: 2px;
    margin-left: 4px;
    background-color: #42a0c4;
}

.list-item.new .isPay {
    right: 48px;
}

.list-item.watched .title {
    color: #999;
}

.list-item:hover .title-row .pin {
    display: inline-block;
}

.list-item.pinned:hover .title-row .pin {
    display: none;
}

.list-item.pinned:hover .title-row .unpin {
    display: inline-block;
}

.list-item .img {
    background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/video-placeholder.png) 50%;
    background-size: img;
    border-radius: 4px;
    display: block;
    float: left;
    overflow: hidden;
    position: relative;
}

.list-item .img img {
    box-shadow: 0 0 0 1px #edf2f9;
    border-radius: 4px;
    display: block;
}

.list-item .img:hover .i-watchlater {
    display: block;
}

.list-item .c {
    margin-left: 180px;
}

.list-item .title-row .pin,.list-item .title-row .unpin {
    cursor: pointer;
    display: none;
    margin-left: 15px;
}

.list-item .title-row .pin {
    color: #00a1d6;
}

.list-item .title-row .unpin {
    color: #e40c0c;
}

.list-item .title {
    font-size: 18px;
    height: 20px;
    margin-bottom: 10px;
    display: inline-block;
    max-width: 680px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-item .desc {
    color: #777;
    line-height: 20px;
    overflow: hidden;
}

.list-item .meta {
    color: #aaa;
}

.list-item .meta>span {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-item .meta .icon {
    width: 12px;
    height: 13px;
    margin-right: 5px;
    position: relative;
    top: 2px;
    vertical-align: baseline;
}

.list-item .play .icon {
    background-position: -280px -25px;
}

.list-item .comments .icon {
    background-position: -280px -154px;
}

.list-item .up .icon {
    background-position: -280px -410px;
}

.list-item .time .icon {
    background-position: -280px -474px;
}

.bb-comment .list-item {
    border: 0;
    padding: 0;
    line-height: normal;
}

.img.disabled:hover .meta-mask {
    opacity: 0;
}

.img.disabled:hover .length {
    opacity: 1;
}

.img.disabled .length,.img.disabled .new-icon {
    display: none;
}

.img.disabled .disabled-img p {
    transition: margin .2s linear;
}

.img.disabled .disabled-img.animate p {
    margin-top: 10px;
}

.tabs {
    margin-bottom: 24px;
}

.tabs a {
    font-size: 16px;
    line-height: 24px;
}

.tabs a:after {
    color: #ddd;
    content: "|";
    margin: 0 15px;
}

.tabs a:last-child:after {
    display: none;
}

.tabs a.active {
    color: #00a1d6;
    font-size: 20px;
}

.tabs a.disabled,.tabs a.last-item:after {
    display: none;
}

.sub-tabs {
    margin-bottom: 20px;
    position: relative;
}

.sub-tabs span {
    font-family: MicrosoftYaHei;
    font-size: 20px;
    color: #222;
    line-height: 26px;
    margin-right: 20px;
}

.sub-tabs a {
    display: inline-block;
    font-size: 12px;
    line-height: 20px;
    vertical-align: top;
    margin-right: 24px;
    position: relative;
}

.sub-tabs a.active {
    color: #00a1d6;
    border-bottom: 1px solid #00a1d6;
}

.sub-tabs a.active:before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -3px;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: 3px solid #00a1d6;
    border-top: 0;
    border-left: 3px dashed transparent;
    border-right: 3px dashed transparent;
}

.sub-tabs a.disabled {
    display: none;
}

.sub-tabs .filter-content {
    font-size: 14px;
    color: #212121;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
}

.sub-tabs .filter-content .cur-filter {
    font-size: 14px;
}

.sub-tabs .filter-content .cur-filter:hover {
    color: #00a1d6;
}

.sub-tabs .filter-content .cur-filter i {
    margin-left: 4px;
}

.private-hint {
    display: inline-block;
    color: #6d757a;
    cursor: default;
    font-size: 12px;
    vertical-align: middle;
}

.private-hint .icon {
    background-position: -203px -724px;
    margin: 0 0 0 15px;
}

.tag-list {
    padding: 10px 0;
}

.tag-list a {
    color: #6a7277;
    cursor: default;
    display: inline-block;
    line-height: 20px;
    margin: 0 10px 0 0;
    white-space: nowrap;
    padding: 0 15px 0 0;
}

.tag-list a:hover {
    color: inherit;
}

.tag-list .tag-icon {
    background-position: -280px -537px;
    width: 14px;
    height: 18px;
    vertical-align: middle;
    margin-right: 5px;
}

.not-allow {
    background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/2233.png) 50% no-repeat;
    width: 340px;
    height: 280px;
}

.search-keyword-highlight {
    color: #f25d8e;
}

.r-arrow {
    background-position: -349px -410px;
    width: 6px;
    height: 11px;
}

.d-arrow,.r-arrow {
    background-image: url(./icons.png);
    display: inline-block;
    vertical-align: middle;
}

.d-arrow {
    background-position: -1307px -221px;
    width: 11px;
    height: 8px;
}

.d-arrow-dark {
    background-position: -1371px -221px;
}

#feedback {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10;
}

#feedback:hover #fb-text {
    right: 18px;
    opacity: 1;
}

#feedback #fb-icon {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAADtElEQVR4AeyatZI1RwyF90HM8UJmxsihMTT7Lcycm52ZmdnLzMzMTJeZ5P4MPy+MpudS7ak6F2fUOtUtjRoqNnf9Nnm14WOGbxnWGs4aHhomDJN85jf+4xqu5Z4Km7Ag4hrD5w0ndw6C4g9GJRJLSCKZlnQmK9lsTnI5gXzmN/7jGq4V7uHe/2xcW0hB9xh+g0OhSFzS6Yxowb3YwBY2sZ1PQTcZfrR3GJJYIiW2gU1s0wZteS3oje39gETjSfEatEFbtOmFoCrD93yBiGQJhjyBtkybiHrfsNqWoPu39vwEsRQKtI0P+OJW0KNbewGykhQa+IAv+KQV9DAGkinEFAXw5X9RDzkVVEUX63vG657yCzHlRNB7eY0ZRUyRKE4r6A1fMCLFDl8wKvh6kqDbd/aDllKz9ykdX/H5OEGfx+JJKRXgKz4fJeheSo5SAz7j+5UE/RS3VJsd+IIyMbMsbT1j8mdTn/z8V6f8UtcttS0D0tY7xn9cIzaAz/h+qaBrqXTdYn1rTxraB+XHPztOxYa2Qe4Rl/i/Sr/+QkHPUr7rnw0p6eibwEkVuRcbWhjfEfTKhYKmtPOZuAnMutYBHHNFbGBLAyaNzIT/F3Q1XaadmDFscMgGGa7YdDHsbkDQ40yFNRidWsQRqxwanxcN/KEogp5G0NuaMicUjspPf3XaFmRsdmBbWw69jaBaTRE6PrN8pFNHpWR+P42o8ellTdGKoDoELRBUTtHUOeyVIGxrE8MCgoI5Re32a303jXvCX+u6xSFYIkPQAYJEg59ruzwTRGw6BX3CYqZaUG1Lv5Mh52gIUi5pBamHXPfglFeCsK0dcofapEAN5tmQW9vc0ycFbdqmVxs7hqyLofLAtj5tKx+swBcIm2mBveTwc22nHPpDAtw8WNWlD5hZWLMihjnTxta+ALelj7o4BUur267F/NXcJ/uHARtzohsU0wd7gv5o7JWpuVXRtX1ZQpjTTfBOIai5c0RGJhekpWsEpxlOxAfPF2k2v42ZKn1z58Ck2qOzq2KC9+qFgq6jy9wK+q2hRxZXtxRZyvoUXL9IQlairmMeE08kRQf7iyQlv4xVpguN5b8U/P9ifbRsFuv/5/vFvZ2SRMwHTvaHqktgw6umnLYkHz7bNL58Wz9ZyJjRb+sfwRqCsIAHLz7Ah7OjMafkzYYf5+Hw0se0VZrHyzLeHy/THACcutIBQOKAqIN8PuIA4LT3BwD14h43fMewznDO0GeYgnz+eyAxqNwUqFo5BioCAGO/K8G9s3HMAAAAAElFTkSuQmCC);
    display: block;
    width: 52px;
    height: 52px;
}

#feedback #fb-text {
    background: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/fb-dialog.png) no-repeat;
    width: 230px;
    height: 80px;
    transition: opacity .2s ease;
    opacity: 0;
    padding: 13px 21px 26px 19px;
    position: absolute;
    bottom: 10px;
    right: -9999px;
}

#feedback #fb-text a {
    color: #00a1d6;
    font-weight: 700;
}

#feedback #fb-text a:hover {
    color: #f25d8e;
}

.user-auth-subscript {
    position: absolute;
    display: none;
    z-index: 9;
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/user-auth.png);
    background-repeat: no-repeat;
}

.user-auth-subscript.avatar-s {
    right: -2px;
    top: 23px;
    width: 18px;
    height: 18px;
}

.user-auth-subscript.avatar-m {
    right: 0;
    top: 44px;
    width: 20px;
    height: 20px;
}

.user-auth-subscript.avatar-b {
    right: -2px;
    top: 42px;
    width: 20px;
    height: 20px;
}

.user-auth-subscript.avatar-x {
    right: 1px;
    bottom: 0;
    width: 18px;
    height: 18px;
}

.user-auth-subscript.personal-auth {
    display: block;
}

.user-auth-subscript.personal-auth.avatar-s {
    background-position: -39px -82px;
}

.user-auth-subscript.personal-auth.avatar-b,.user-auth-subscript.personal-auth.avatar-m {
    background-position: -38px -53px;
}

.user-auth-subscript.personal-auth.avatar-x {
    background-position: -73px -82px;
}

.user-auth-subscript.organization-auth {
    display: block;
}

.user-auth-subscript.organization-auth.avatar-s {
    background-position: -5px -82px;
}

.user-auth-subscript.organization-auth.avatar-b,.user-auth-subscript.organization-auth.avatar-m {
    background-position: -4px -53px;
}

.user-auth-subscript.organization-auth.avatar-x {
    background-position: -5px -82px;
}

.checkbox .checkbox-icon {
    border: 1px solid #ccd0d7;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 16px;
    margin-right: 5px;
    position: relative;
    top: -1px;
}

.checkbox:hover {
    cursor: pointer;
}

.checkbox:hover .checkbox-icon {
    border-color: #00a1d6;
}

.checkbox[checked] .checkbox-icon {
    background: url(./icons.png) -1305px -664px #00a1d6;
    border-color: #00a1d6;
}

#pin-wrapper {
    background: rgba(0,0,0,.5);
    position: fixed;
    z-index: 10001;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#pin-wrapper.input #pin-layer {
    height: 576px;
}

#pin-wrapper.input .pin-layer-reason {
    height: 50px;
}

#pin-wrapper .m-loading {
    line-height: 24px;
    text-align: center;
}

#pin-wrapper .m-loading .icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loadingS.gif);
    background-repeat: no-repeat;
}

#pin-wrapper .m-loading .icon,#pin-wrapper .m-loading span {
    display: inline-block;
    vertical-align: middle;
}

#pin-wrapper .m-loading.active {
    display: block;
}

#pin-wrapper .m-loading.disabled .icon {
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loading-fail.png);
    background-position: 6px;
}

#pin-wrapper #pin-layer {
    background: #fff;
    border-radius: 4px;
    width: 570px;
    height: 540px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    transition: all .2s ease;
}

#pin-wrapper .pin-layer-header {
    height: 50px;
    line-height: 50px;
    padding: 0 25px;
    font-size: 0;
    border-bottom: 1px solid #e5e9ef;
    box-sizing: border-box;
}

#pin-wrapper .pin-layer-header .pin-layer-header-text {
    display: inline-block;
    font-size: 16px;
    vertical-align: bottom;
}

#pin-wrapper .pin-layer-header .pin-layer-header-hint {
    display: inline-block;
    font-size: 12px;
    margin-left: 20px;
    color: #6d757a;
    vertical-align: bottom;
}

#pin-wrapper .pin-layer-header .pin-layer-header-hint i {
    margin: 0 2px;
    font-weight: 700;
}

#pin-wrapper .pin-layer-header-counter {
    display: inline-block;
    margin-left: 10px;
    font-size: 12px;
    color: #222;
    vertical-align: middle;
}

#pin-wrapper .pin-layer-header-counter .count {
    font-weight: 700;
    color: #6d757a;
}

#pin-wrapper .pin-layer-close {
    position: absolute;
    top: 20px;
    right: 25px;
    background-position: -533px -279px;
    cursor: pointer;
    width: 20px;
    height: 14px;
}

#pin-wrapper .pin-layer-close:hover {
    background-position: -597px -279px;
}

#pin-wrapper .pin-layer-body {
    margin: 10px 25px 22px;
}

#pin-wrapper .pin-layer-tab {
    font-size: 14px;
}

#pin-wrapper .pin-layer-tab span {
    padding: 4px 0;
    margin-right: 18px;
}

#pin-wrapper .pin-layer-order {
    margin-top: 20px;
}

#pin-wrapper .pin-layer-order-tip {
    float: left;
    line-height: 20px;
    font-size: 12px;
    color: #222;
}

#pin-wrapper .pin-layer-order-dropdown {
    float: right;
    font-size: 14px;
}

#pin-wrapper .pin-layer-search {
    margin-top: 10px;
    position: relative;
}

#pin-wrapper .pin-layer-search-empty {
    position: absolute;
    display: none;
    top: 250px;
    width: 100%;
    padding-right: 22px;
    color: #99a2aa;
    text-align: center;
    box-sizing: border-box;
}

#pin-wrapper .pin-layer-search-result {
    font-size: 12px;
    color: #505050;
    margin-top: 4px;
    line-height: 20px;
}

#pin-wrapper .pin-layer-search-keyword {
    display: inline-block;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f25d8e;
    vertical-align: bottom;
}

#pin-wrapper #pin-layer-search {
    border: 1px solid #d6dce5;
    border-radius: 15px;
    box-shadow: none;
    width: 470px;
    line-height: 32px;
    padding: 0 40px 0 10px;
}

#pin-wrapper #pin-layer-search:focus {
    border-color: #00a1d6;
}

#pin-wrapper #pin-layer-search-btn {
    background-position: -1111px -87px;
    cursor: pointer;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 6px;
    right: 10px;
}

#pin-wrapper #pin-layer-search-btn:hover {
    background-position: -1175px -87px;
}

#pin-wrapper #pin-layer-search-count {
    color: #f25d8e;
    font-weight: 700;
}

#pin-wrapper .pin-layer-video {
    position: relative;
    margin-top: 5px;
    height: 300px;
    width: 544px;
    overflow: hidden;
}

#pin-wrapper .pin-layer-video.empty {
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/nodata02.png);
    background-position: 147px;
    background-repeat: no-repeat;
}

#pin-wrapper .pin-layer-video.loading {
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loadTV.gif);
    background-repeat: no-repeat;
    background-position: 50%;
    text-indent: -9999px;
    height: 370px;
}

#pin-wrapper .pin-layer-video.loading .small-item {
    display: none;
}

#pin-wrapper .pin-layer-video.ready-to-search {
    background-image: none;
}

#pin-wrapper .pin-layer-footer {
    text-align: center;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 30px;
}

#pin-wrapper .pin-layer-footer .btn {
    width: 90px;
    margin: 0 7px;
    line-height: 30px;
}

#pin-wrapper .pin-layer-vlist .small-item {
    float: none;
    width: auto;
    padding: 4px;
    margin-right: 20px;
    box-sizing: border-box;
    border: none;
    border-radius: 4px;
    margin-bottom: 2px;
    overflow: hidden;
    transition: all .2s ease;
}

#pin-wrapper .pin-layer-vlist .small-item:hover {
    cursor: pointer;
    background-color: #e5e9ef;
    box-shadow: none;
}

#pin-wrapper .pin-layer-vlist .small-item.selected {
    box-shadow: none;
    background-color: #00a1d6;
}

#pin-wrapper .pin-layer-vlist .small-item.selected .title {
    color: #fff;
}

#pin-wrapper .pin-layer-vlist .small-item.selected .meta {
    color: #b3e3f3;
}

#pin-wrapper .pin-layer-vlist .small-item.selected .play .icon {
    background-position: -411px -858px;
}

#pin-wrapper .pin-layer-vlist .small-item.selected .time .icon {
    background-position: -347px -858px;
}

#pin-wrapper .pin-layer-vlist .small-item.selected .checkbox {
    display: block;
}

#pin-wrapper .pin-layer-vlist .small-item.selected:hover .checkbox .icon {
    background-position: -1365px -1109px;
}

#pin-wrapper .pin-layer-vlist .small-item.added {
    display: none;
}

#pin-wrapper .pin-layer-vlist .small-item .title {
    height: 16px;
    line-height: 16px;
    margin: 0;
    color: #000;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: height .2s ease,margin .2s ease;
}

#pin-wrapper .pin-layer-vlist .small-item .img {
    position: relative;
    float: left;
    width: 80px;
    height: 50px;
    border-radius: 2px;
    overflow: hidden;
}

#pin-wrapper .pin-layer-vlist .small-item .img img {
    width: 100%;
    height: 100%;
}

#pin-wrapper .pin-layer-vlist .small-item .added-icon {
    position: absolute;
    display: none;
    right: 4px;
    top: 4px;
    line-height: 14px;
    padding: 2px 4px;
    font-size: 12px;
    color: #fff;
    border-radius: 4px;
    background-color: rgba(0,0,0,.8);
}

#pin-wrapper .pin-layer-vlist .small-item .detail {
    margin-left: 94px;
}

#pin-wrapper .pin-layer-vlist .small-item .meta {
    margin-top: 8px;
}

#pin-wrapper .pin-layer-vlist .small-item .meta .play {
    width: 65px;
}

#pin-wrapper .pin-layer-vlist .small-item .meta .time {
    width: 92px;
}

#pin-wrapper .pin-layer-vlist .small-item .checkbox {
    position: absolute;
    display: none;
    top: 18px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 2px;
    background-color: #0087b4;
}

#pin-wrapper .pin-layer-vlist .small-item .checkbox .icon {
    display: block;
    width: 100%;
    height: 100%;
    background-position: -1301px -1109px;
}

#pin-wrapper .pin-layer-video-empty {
    color: #99a2aa;
    margin: 270px 0 0;
    padding-right: 22px;
    text-align: center;
}

#pin-wrapper .pin-layer-video-empty a {
    color: #00a1d6;
}

#pin-wrapper .pin-layer-reason {
    height: 0;
    overflow: hidden;
    transition: height .2s ease;
}

#pin-wrapper .pin-layer-reason #pin-layer-reason-input input {
    background: #edf2f9;
    border: 1px solid #ccd0d7;
    border-radius: 4px;
    box-shadow: inset 0 2px 6px rgba(100,109,85,.22);
    line-height: 34px;
    height: 34px;
    margin: 10px 0;
}

#pin-wrapper .pin-layer-reason #pin-layer-reason-input input:focus {
    border-color: #00a1d6;
}

#pin-wrapper .pin-layer-reason #pin-layer-reason-input .letter-count {
    top: 6px;
}

.breadcrumb {
    line-height: 24px;
    font-size: 0;
    vertical-align: middle;
    position: relative;
}

.breadcrumb .item {
    display: inline-block;
    font-size: 18px;
    color: #6d757a;
    vertical-align: middle;
}

.breadcrumb .item:hover {
    color: #00a1d6;
}

.breadcrumb .item.cur {
    color: #222;
}

.breadcrumb .batch {
    font-size: 14px;
    color: #222;
    letter-spacing: 0;
    float: right;
    cursor: pointer;
}

.breadcrumb .arrow {
    background-position: -339px -405px;
}

.breadcrumb .arrow,.breadcrumb .l-arrow {
    display: inline-block;
    width: 26px;
    height: 20px;
    background-image: url(./icons.png);
    background-repeat: no-repeat;
    vertical-align: middle;
}

.breadcrumb .l-arrow {
    background-position: -148px -1174px;
}

.page-head {
    position: relative;
}

.page-head .v-filter-line {
    position: absolute;
    top: 0;
    right: 0;
}

.page-head .v-filter-line .item {
    float: left;
    margin-left: 16px;
}

.page-head .v-filter-line .order span {
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    margin-left: 20px;
    line-height: 28px;
    vertical-align: top;
}

.page-head .v-filter-line .order span.active {
    color: #00a1d6;
    cursor: default;
}

.page-head .v-filter-line .order span:hover {
    color: #00a1d6;
}

.page-head .v-filter-line .style .icon {
    cursor: pointer;
    display: block;
    float: left;
    width: 18px;
    height: 18px;
}

.page-head .v-filter-line .style .cube {
    background-position: -342px -151px;
    margin-right: 15px;
}

.page-head .v-filter-line .style .cube.active,.page-head .v-filter-line .style .cube:hover {
    background-position: -469px -151px;
}

.page-head .v-filter-line .style .list {
    background-position: -341px -217px;
}

.page-head .v-filter-line .style .list.active,.page-head .v-filter-line .style .list:hover {
    background-position: -468px -217px;
}

.g-search {
    position: relative;
    display: inline-block;
    width: 134px;
    height: 30px;
    vertical-align: middle;
}

.g-search:focus {
    border-color: #00a1d6;
}

.g-search input {
    position: absolute;
    height: 30px;
    width: 134px;
    padding: 0 29px 0 10px;
    line-height: 30px;
    color: #222;
    font-size: 12px;
    border: 1px solid #ccd0d7;
    border-radius: 15px;
    box-shadow: none;
    box-sizing: border-box;
}

.g-search .search-btn {
    position: absolute;
    right: 8px;
    top: 0;
    width: 18px;
    height: 30px;
    background-position: -1111px -81px;
    cursor: pointer;
}

.g-search .search-btn:hover {
    background-position: -1175px -81px;
}

.list-create {
    cursor: pointer;
    position: relative;
    background: #fff;
    border: 2px dashed #b8c0cc;
    border-radius: 4px;
    transition: border .2s ease;
    box-sizing: border-box;
}

.list-create .create-imgs-meta {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
}

.list-create .icon {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    transition: background .2s ease;
    background-position: -716px -332px;
}

.list-create .text {
    line-height: 16px;
    margin-top: 8px;
    text-align: center;
    color: #666;
}

.list-create:hover {
    border-color: #00a1d6;
}

.list-create:hover .icon {
    background-position: -716px -396px;
}

.list-create:hover .text {
    color: #00a1d6;
}

.s-space .ps-container>.ps-scrollbar-y-rail {
    right: 0!important;
    width: 6px!important;
    background-color: #edf2f9!important;
    border-radius: 3px;
}

.s-space .ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y {
    right: 0!important;
    width: 6px!important;
    background-color: #6d757a!important;
}

.i-watchlater {
    display: none;
    position: absolute;
    right: 6px;
    bottom: 4px;
    width: 22px;
    height: 22px;
    z-index: 5;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABT0lEQVQ4je3VMYrCQBTG8b/DWASLNKJgJ1hY2sloZeF2gkeYW+wZvIVXsLBJY5UdtLJLk17EIghCwChukWRxFzSaaLdfMwm8/EgemTclgOl02gEmwAAoky8RsAA+tdbrUoJ+AVZO8G9CoCeJ39Sq1+sopbBtO5e23+8xxrDdbi1gIog/vxAKYNs2Sqn0diBIenoP9X2fIAgyccv66WZZZBXvdjtc18UYkwlfJxM+n8+/1pfBefMPPw4LEZcEQcBqteJ0Or0GrlartFotLpcLnucxm83YbDbFYSEE/X6f4XBIpVLhcDjgOA6u63I8HvPDaRqNBuPxmHa7DcS7cT6f36yXj8IAUkq63S7NZpPlcomUtx9/Ck5Tq9UYjUZ3a976u0UQz9OiCcMwvYwk8XHyYYxBKXU9+p5Grybg4m1Hk9Bar4Ee4JC0JWeixOhprdffE/1yRW/TLMYAAAAASUVORK5CYII=) no-repeat;
}

.i-watchlater.has-select {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABiklEQVQ4jbXVzyvDcRzH8efns1+JIRtbOSiKrMRBrZZC5IzcHJYTJyc1J464ubuY5MQ/oLSTNSHfIg5KyEmbzY/5sa++c/hOCtv47rvX8f2pR+/3u0+fjwAgfNoFLAH9gA1jUYEIECLoU0QOjQIVBsHveQECEr1Ts1By1pJEH9/s9EuM77RQbLIMKACG4QaHhYNBL7EBj3lwtU2yFXDT6rRil8Ic2C4F634XnbU24m8aY9F46bAUsNJdR1+9g6f3LKPROBfp99LhxY5aRhorULUs43sJlFQmfxO/FWMDHpQhL+3VXzdxps3JVEsVAJOHSSK3rwWbsP5WtAhorrSy09vAxH6CeoeFOV8NALPHKTZvnovMBoLwafZ7sc4uWfe76HE70HKnUsDy+SNzJ/dFUciziruMxvBunNXLNFLo6Mb1M/N/RCHPKgAyWpbpoyQHdxmaKi0snD3wYzQj8GfWrtL/4L5S1rdCLYOrSvTvxOxEJBBC/07MygsQkgR9ChAAtiltLWrOCBD0KR9smmovo1v+1QAAAABJRU5ErkJggg==);
}

.icon {
    vertical-align: middle;
    background-repeat: no-repeat;
}

.icon-add {
    width: 30px;
    height: 30px;
    background-position: -81px -1170px;
}

.icon-cursor {
    width: 10px;
    height: 44px;
    background-position: -219px -1100px;
}

.icon-fav-public {
    width: 20px;
    height: 20px;
    background-position: -86px -1110px;
}

.icon-fav-private {
    width: 20px;
    height: 20px;
    background-position: -150px -1110px;
}

.icon-fav-default {
    width: 20px;
    height: 20px;
    background-position: -22px -1110px;
}

.icon-more {
    width: 30px;
    height: 30px;
    background-position: -209px -1041px;
    cursor: pointer;
}

.icon-arrow {
    width: 16px;
    height: 20px;
    background-position: -1305px -215px;
}

#popup-select-layer {
    position: absolute;
    top: 50px;
    left: 0;
    width: 108px;
    z-index: 899;
    background-color: #fff;
    border: 1px solid #ccd0d7;
    border-radius: 4px;
}

#popup-select-layer:after {
    background-image: url(./icons.png);
    background-position: -1307px -285px;
    content: "";
    display: block;
    width: 11px;
    height: 6px;
    position: absolute;
    top: -6px;
    left: 50%;
    margin-left: -6px;
}

#popup-select-layer .popup-select-choice {
    cursor: pointer;
    line-height: 30px;
    padding: 0 9px;
}

#popup-select-layer .popup-select-choice:hover {
    background-color: #e5e9ef;
}

#popup-select-layer .popup-select-choice:first-child {
    border-radius: 4px 4px 0 0;
}

#popup-select-layer .popup-select-choice:last-child {
    border-radius: 0 0 4px 4px;
}

.article-item {
    margin-bottom: 20px;
}

.article-item:last-child .article-content {
    border-bottom: none;
}

.article-img {
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: img;
}

.s-content {
    width: 923px;
}

.article-content,.s-content {
    float: left;
    border-bottom: 1px solid #f4f5f7;
    padding-bottom: 23px;
}

.article-content {
    width: 563px;
}

.article-noimg {
    width: 100%;
}

.article-title {
    font-weight: 400;
    max-height: 26px;
    font-size: 18px;
    color: #222;
    line-height: 26px;
    overflow: hidden;
    display: block;
}

.article-title a {
    word-break: break-all;
}

.article-con {
    font-size: 12px;
    color: #6d757a;
    line-height: 20px;
    margin-top: 5px;
}

.article-con a {
    height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-con a,.article-img {
    display: block;
    overflow: hidden;
}

.article-img {
    width: 117px;
    height: 88px;
    float: right;
    border-radius: 4px;
    line-height: 54px;
    text-align: center;
}

.article-bgimg,.article-img img {
    width: 100%;
    height: 100%;
}

.article-bgimg {
    background: #f0f2f4 url(//s1.hdslb.com/bfs/static/jinkela/space/assets/video-placeholder.png) 50%;
    background-size: img;
    border-radius: 4px;
    display: block;
    overflow: hidden;
    font-size: 12px;
}

.meta-col {
    margin-top: 15px;
    color: #999;
    font-size: 0;
}

.meta-col,.meta-col span {
    height: 14px;
    line-height: 14px;
    white-space: nowrap;
}

.meta-col span {
    display: inline-block;
    font-size: 12px;
    overflow: hidden;
    margin-right: 20px;
}

.meta-col span .icon {
    width: 16px;
    height: 14px;
    margin-right: 3px;
    vertical-align: sub;
}

.meta-col .play .icon {
    background-position: -280px -25px;
}

.meta-col .time .icon {
    background-position: -280px -474px;
}

.meta-col .view .icon {
    background-position: -345px -282px;
}

.meta-col .comment .icon {
    background-position: -409px -282px;
}

.meta-col .like .icon {
    background-position: -472px -282px;
}

.create-channel-popup .modal-wrapper .modal-body {
    padding: 30px 20px!important;
}

.create-channel-popup .modal-wrapper .modal-body .be-input input {
    height: 30px;
    line-height: 30px;
    box-shadow: none;
}

.create-channel-popup .modal-wrapper .modal-body .be-textarea {
    margin-top: 20px;
}

.create-channel-popup .modal-wrapper .modal-body .be-textarea textarea {
    padding: 5px;
    height: 66px;
}

.follow-dialog-wrap .errmsg {
    display: none;
}

.follow-dialog-wrap .add-group {
    margin-top: 20px;
}

.bili-header-m .bili-wrapper {
    width: 1100px!important;
}

.icon-playlist {
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icon_playlist_line.png);
}

.icon-playlist,.icon-playlist-loc {
    width: 22px;
    height: 22px;
    background-size: 100%;
    margin-right: 8px;
}

.icon-playlist-loc {
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/icon_playlist_loc.png);
}

.icon-favlist-info {
    width: 20px;
    height: 20px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAspJREFUWAntWD2IGlEQds0PSfSwjQSJRKKCNoGA2JhrAilMCiEY0gdiKls7bSy00UasQuQw4KU70OZSiSAikkYRE9SLihoFf+AgGohmJrkDWXaeq5y3G7iB2bdv3sz7vp03zspyin+igeEpqB5UDSqlnAL4Cegx6JSDC5J7C3obVE7yE8jEr8HlOeg9OTE743IDxj0lXPRnBjkOeiQodc2xEqNGgrIW2RO8vm36yuXya4vF8lBMfKVS+Wa1Wj+K8eX7XFYGl3xgsXPsg36xzlL4XVYGt362jWpwk7qjGG1aj1JkcKN6vKpB6qjF2qU4YrHc/vqRPxK73a5JpVIvdTrdLv/pLNvtdtftdn/K5/NTIeZkBsPh8JMdk0M+HGIA1r4QObSRBFUq1S0q6KLtarWaxCIJDgYDwZQLkfP7/YdOpzNWr9e/C62vs/V6vQnlQxKE2iCD+JsFAoFqOp0eGo3GD/F4PPMLhO/Dmnc6HRKLJNhoNMggCmyxWCg8Hk/R4XDEarVag/Lj25vNJolFEqxWq2QQH4A/LxQKU7PZfBCNRo/m8/mMv86fs7BIgqVSaWuC5wS8Xu8Xl8v1frlcLs5tQmOxWCSxSIKtVgsefv3TCwGu2maz2W+O40gcWJ9BDc5XY1bvyUB0Go1G5JOtbkLdRyKRR5lM5g21jvbxeMzEIN8kGDwcDidarfYu3m8iNptNk0gkXphMpgfr4hCD5cPMYL/fZwbzN1YqlYpYLPY4m82+E0MO47vdLhODmUGxvdDn85mgrUxDodAzg8Fwn0+cNWf1QIxjEhTbC4PB4CsWCdYaqwdiHPOI4ah+sDa/iLV1GEyCuVxukkwmP8Obi2wD25LEHoZ7IwZrj6u//KzsiFljHrGYDXbt818QxG/CcpVTzOCJXNkhNySIX9Pxg7XcBDkd40d07HFl0D3QO6A3QaUULLmvoIeg0z8kQfSabrii0gAAAABJRU5ErkJggg==);
    background-size: 100%;
}

.icon-back-follow {
    width: 16px;
    height: 16px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuNCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTYgMTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE2IDE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+Cjx0aXRsZT5nZW5lcmFsX2FkZCB0b19mcmllbmRzPC90aXRsZT4KPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CjxnIGlkPSJnZW5lcmFsX2FkZC10b19mcmllbmRzIj4KCTxnIGlkPSLot6/lvoQtNDkiPgoJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02LjIsMTIuNGMtMC4yLDAtMC40LTAuMS0wLjUtMC4yTDIuMSw4LjRjLTAuMy0wLjMtMC4zLTAuOCwwLTEuMWMwLjMtMC4zLDAuOC0wLjMsMS4xLDBsMy4xLDMuMmw2LjYtNi4zCgkJCUMxMy4yLDQsMTMuNyw0LDE0LDQuM2MwLjMsMC4zLDAuMywwLjgsMCwxLjFsLTcuMiw2LjhDNi42LDEyLjMsNi40LDEyLjQsNi4yLDEyLjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==) no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    margin-right: 4px;
    position: relative;
    top: 3px;
}

.icon-back-follow.grey {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACnSURBVDjLY2CgEujs7GQrKSkxYqAmKCsrky0qKroGxP+Li4vzqW4o1OBwahn6DMlQyl0LCk+ChoJsptBQTO+DBKEKDtfX1/MQaegXgmGKZDBBw4FqXZEM/QLi43UFUEEvIcOhDiDeUCSNM5ENByV4HL76QnJGQDN8LchwUGwjiT0jO3ehGX4N2VBSUw9Gnge5FslAsAUUGYoMkAynnqHIaRY5EgcFAAC8KcMdEfVlQwAAAABJRU5ErkJggg==) no-repeat;
    background-size: contain;
    width: 12px;
    height: 12px;
    top: 8px;
}

.icon-multiple {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKKADAAQAAAABAAAAKAAAAAB65masAAACDklEQVRYCe2Xv0rDUBTGmxCloyA4iCj6AiI+gpOIb+DSQdvioo8iDmlTGnDtJCi46CM4uLm4VXCxewtN+h3bCzf3T7z502a5gfae3NzvnF+/25ymtZo9rAPVOuAsq3wQBKdRFAVxHO+Y1HAcZ+i67hWOF369y5/kjcMwPBgMBuu8Pgsc6eiDkIbPQXEhQCR1O51OOB6Pv0aj0We3211jBUydY+tpVGk8fkGWmOAA9IDxYpF8D/EW4m8xT7vdTv0q+b4fixp2ngtQhKNk+A7dt1otCY4Vyjtm3mIVHIr7zWbzNi9Emi7hYL/f355MJs8k8DzvEsc7L9bBwblrOKjdJj5H1jjhIODOkOCIXtPp9LXX6x2zhFXAUe0EYL1ef8LcL10A0AaDrAqOOBKAjUbjB1t1gvkEJO7WR0D+3a0kwuEvc1vnJebvCUCaQuEPERJw55xoZXBUU9uf0IAPAfaGNZt54NJ6G5dPCsWeKTnIFMxJuEm9LcJ4l2VbsX7IcpmOKo0WkJIuIPcR7iK+QQLjVkI//KqCOlhaSxrddTtvHajKAanNlPUkXFYe6S4u60m4rDwSIJqz0X8IfstVGtUcr1HFKk3icUsUiV1dvG76a1Ekj+SgCFH1uQUsugPWQetgUQeK6lP7oGmf+w+iSB7pJsnykMnAVBrVHFuvG1UaCbCsJ+Gy8ug+jJ23DqzKgRnrdy/UychTEQAAAABJRU5ErkJggg==);
    background-size: img;
}

@media (min-width:1420px) {
    .bili-header-m .bili-wrapper,.wrapper {
        width: 1283px!important;
    }

    .bili-header-m .bili-wrapper .title-row .title,.wrapper .title-row .title {
        max-width: 800px;
    }

    .n-btn {
        margin-right: 43px;
    }
}

.fakeDanmu-item .length {
    z-index: 5;
    transition: background .2s ease;
}

.fakeDanmu-item .new-icon {
    transition: opacity .2s ease;
}

.fakeDanmu-item.preview-danmu .length {
    background: none;
}

.fakeDanmu-item.preview-danmu .new-icon {
    opacity: 0;
}

.fake-danmu-mask {
    z-index: 3;
    background-color: rgba(0,0,0,.2);
}

.fake-danmu,.fake-danmu-mask {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.fake-danmu {
    z-index: 4;
}

.fake-danmu-item {
    position: absolute;
    display: inline;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    font-family: Microsoft Yahei,simhei,榛戜綋;
    white-space: pre;
    pointer-events: none;
    opacity: .95;
    text-shadow: 1px 1px 2px #001;
}

.preview-bg {
    top: 10px;
    z-index: 2;
    height: 100%;
}

.preview-bg,.preview-wrapper {
    position: absolute;
    display: none;
    left: 0;
    width: 100%;
}

.preview-wrapper {
    top: 0;
    z-index: 4;
    padding: 0 5px 5px;
    box-sizing: border-box;
    background-color: #000;
}

.preview-progress {
    width: 100%;
    height: 2px;
    margin-top: 5px;
    background-color: hsla(0,0%,100%,.4);
    border-radius: 1px;
}

.preview-progress-bar {
    width: 0;
    height: 2px;
    border-radius: 1px;
    background-color: #fff;
}

.fade-transition {
    transition: opacity .3s ease;
}

.fade-enter,.fade-leave {
    opacity: 0;
}

.expand-transition {
    transition: height .3s ease;
    height: 30px;
    overflow: hidden;
}

.expand-enter,.expand-leave {
    height: 0;
    opacity: 0;
}

.expand-switch-transition {
    transition: height .3s ease;
    height: 40px;
    overflow: hidden;
}

.expand-switch-enter,.expand-switch-leave {
    height: 0;
}

.bounce-transition {
    display: inline-block;
}

.bounce-enter {
    animation: bounce-in .3s;
}

.bounce-leave {
    animation: bounce-out .3s;
}

.space-loading-tv {
    height: 100px;
    margin-top: 10px;
    background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/assets/loadTV.gif);
    background-repeat: no-repeat;
    background-position: 50%;
}

#space-body {
    min-height: 100%;
    padding-bottom: 30px;
    background-repeat: repeat;
    background-position: top;
}

#space-body .global-modal .modal-wrapper {
    width: 400px;
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

@keyframes bounce-out {
    0% {
        transform: scale(1);
    }

    to {
        transform: scale(0);
    }
}

@font-face {
    font-family:iconfont;src:url(//s1.hdslb.com/bfs/static/jinkela/space/assets/iconfont.woff2) format("woff2"),url(//s1.hdslb.com/bfs/static/jinkela/space/assets/iconfont.woff) format("woff"),url(//s1.hdslb.com/bfs/static/jinkela/space/assets/iconfont.ttf) format("truetype");
}

.iconfont {
    font-family: iconfont!important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-qipao:before {
    content: "\E63E";
}

.icon-tag:before {
    content: "\E6CE";
}

.icon-a-Slice1:before {
    content: "\E63D";
}

.icon-yincang:before {
    content: "\E63C";
}

.icon-a-Slice2:before {
    content: "\E63B";
}

.icon-wenhao:before {
    content: "\E63A";
}

.icon-xinjian:before {
    content: "\E639";
}

.icon-ic_zhiboyuyue:before {
    content: "\E638";
}

.icon-ic_toupiao:before {
    content: "\E637";
}

.icon-ic_choujiang:before {
    content: "\E636";
}

.icon-ic_at:before {
    content: "\E61A";
}

.icon-ic_yuyue:before {
    content: "\E619";
}

.icon-ic_tupian:before {
    content: "\E617";
}

.icon-ic_huati:before {
    content: "\E615";
}

.icon-ic_dingshi:before {
    content: "\E614";
}

.icon-ic_biaoqing:before {
    content: "\E613";
}

.icon-ic_channel1:before {
    content: "\E611";
}

.icon-ic_array_card:before {
    content: "\E60F";
}

.icon-ic_array_list:before {
    content: "\E610";
}

.icon-into:before {
    content: "\E765";
}

.icon-heji:before {
    content: "\E762";
}

.icon-ic_class1:before {
    content: "\E635";
}

.icon-huaban:before {
    content: "\E718";
}

.icon-dianzan:before {
    content: "\E710";
}

.icon-bofang:before {
    content: "\E711";
}

.icon-bodan:before {
    content: "\E712";
}

.icon-pinglun:before {
    content: "\E713";
}

.icon-shixiao:before {
    content: "\E714";
}

.icon-fenxiang:before {
    content: "\E715";
}

.icon-shoucang:before {
    content: "\E716";
}

.icon-tianjia:before {
    content: "\E717";
}

.icon-xiangxia:before {
    content: "\E719";
}

.icon-xiangshang:before {
    content: "\E71A";
}

.icon-shouting:before {
    content: "\E605";
}

.icon-checkbox_selected:before {
    content: "\E631";
}

.icon-checkbox:before {
    content: "\E632";
}

.icon-radio:before {
    content: "\E633";
}

.icon-radio_selected:before {
    content: "\E634";
}

.icon-ic_close:before {
    content: "\E630";
}

.icon-ic_more:before {
    content: "\E62F";
}

.icon-ic_upload:before {
    content: "\E62E";
}

.icon-ic_following:before {
    content: "\E62D";
}

.icon-ic_collect:before {
    content: "\E624";
}

.icon-ic_channel:before {
    content: "\E625";
}

.icon-ic_home:before {
    content: "\E626";
}

.icon-ic_setting:before {
    content: "\E627";
}

.icon-ic_playlist:before {
    content: "\E628";
}

.icon-ic_interest:before {
    content: "\E629";
}

.icon-ic_sub:before {
    content: "\E62A";
}

.icon-ic_article:before {
    content: "\E62B";
}

.icon-ic_video:before {
    content: "\E62C";
}

.icon-ic_time:before {
    content: "\E623";
}

.icon-ic_moveup:before {
    content: "\E620";
}

.icon-ic_movedown:before {
    content: "\E621";
}

.icon-ic_delete:before {
    content: "\E622";
}

.icon-ic_play:before {
    content: "\E61B";
}

.icon-ic_comment:before {
    content: "\E61C";
}

.icon-ic_up:before {
    content: "\E61D";
}

.icon-ic_danmu:before {
    content: "\E61E";
}

.icon-ic_collection:before {
    content: "\E61F";
}

.be-input {
    position: relative;
    color: #222;
    font-size: 14px;
    border-radius: 4px;
}

.be-input--append .be-input_inner {
    padding: 0 60px 0 5px;
}

.be-input_inner {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0 50px 0 5px;
    border-radius: 4px;
    border: 1px solid #ccd0d7;
    outline: none;
    box-sizing: border-box;
    transition: all .3s ease;
}

.be-input_inner:focus {
    border-color: #00a1d6;
}

.be-input.is-diabled .be-input_inner {
    background-color: #e6e6e6;
    border-color: #afb6c1;
    color: #3c3c3c;
    cursor: not-allowed;
}

.be-textarea {
    position: relative;
    color: #222;
    font-size: 14px;
    border-radius: 4px;
}

.be-textarea.is-diabled .be-textarea_inner {
    background-color: #e6e6e6;
    border-color: #afb6c1;
    color: #3c3c3c;
    cursor: not-allowed;
}

.be-textarea--append .be-textarea_inner {
    display: table-cell;
}

.be-textarea_inner {
    display: block;
    width: 100%;
    line-height: 20px;
    height: 118px;
    padding: 0 5px;
    border: 1px solid #ccd0d7;
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
    resize: none;
    transition: all .3s ease;
}

.be-textarea_inner:focus,.be-textarea_inner:hover {
    border-color: #00a1d6;
}

.be-textarea_inner:focus~.be-input-word-counter,.be-textarea_inner:hover~.be-input-word-counter {
    opacity: 1;
}

.be-textarea .be-input-word-counter {
    opacity: 0;
    transition: opacity .2s ease;
}

.be-input-word-counter {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 30px;
    min-width: 40px;
    padding: 0 10px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    color: #99a2aa;
    border-radius: 4px;
}

.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 20000;
}

.modal-wrapper {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    margin: 0 auto;
    word-break: break-all;
    line-height: 22px;
    z-index: 1011;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.16);
    border-radius: 4px;
    transition: box-shadow .2s linear;
}

.modal-wrapper .modal-header {
    position: relative;
    font: 12px/1.11 Microsoft Yahei,Tahoma,Arial,Helvetica,STHeiti;
}

.modal-wrapper .modal-title {
    display: block;
    font-size: 16px;
    line-height: 48px;
    padding: 0 20px;
    border-bottom: 1px solid #ddd;
}

.modal-wrapper .modal-header-close {
    position: absolute;
    text-decoration: none;
    top: 13px;
    right: 12px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
}

.modal-wrapper .modal-header-close:hover {
    color: #00a1d6;
}

.modal-wrapper .modal-body {
    padding: 30px 60px;
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
    min-width: 9em;
}

.modal-wrapper .modal-footer {
    padding: 0 0 30px;
    text-align: center;
}

.modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1010;
    background-color: rgba(0,0,0,.5);
}

.be-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 12000;
    height: 50px;
    line-height: 50px;
    padding: 0 30px;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,.14);
    background-color: rgba(0,0,0,.8);
}

#id-card {
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.3);
    border-radius: 4px;
    position: absolute;
    z-index: 1002;
    width: 375px;
}

#id-card .idc-laoding-text {
    padding: 10px;
    font-size: 12px;
    color: #222;
}

#id-card .idc-theme-img {
    border-radius: 4px 4px 0 0;
    display: block;
    width: 375px;
    height: 120px;
    background-size: img;
    background-position: 50%;
}

#id-card .idc-content .idc-username {
    display: inline-block;
    line-height: 22px;
    vertical-align: middle;
}

#id-card .idc-info {
    padding: 7px 40px 10px 100px;
    position: relative;
}

#id-card .idc-info .idc-avatar-container {
    position: absolute;
    top: -15px;
    left: 20px;
    width: 54px;
    height: 54px;
}

#id-card .idc-avatar {
    border: 2px solid #fff;
    border-radius: 50px;
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
}

#id-card .idc-uname {
    display: inline-block;
    font-size: 14px;
    vertical-align: top;
    max-width: 9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#id-card .idc-uname:hover {
    color: #00a1d6!important;
}

#id-card .idc-gender {
    vertical-align: middle;
}

#id-card .idc-m-level {
    vertical-align: middle;
    margin-top: 1px;
}

#id-card .idc-meta {
    margin-top: 6px;
}

#id-card .idc-meta-item {
    margin-right: 20px;
}

#id-card .idc-tag-list {
    display: none;
    padding-bottom: 0;
}

#id-card .idc-certification {
    color: #ff931e;
    margin: 7px 0 0;
}

#id-card .idc-certification:empty {
    display: none;
}

#id-card .idc-certified-icon {
    background-position: -213px -791px;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

#id-card .idc-auth-description {
    line-height: 20px;
    font-size: 12px;
    margin-top: 6px;
    color: #6d757a;
}

#id-card .idc-auth-description.no-desc {
    color: #99a2aa;
}

#id-card .idc-sign {
    color: #999;
    line-height: 1.7;
    padding: 7px 0 5px;
}

#id-card .idc-sign:empty {
    display: none;
}

#id-card .idc-action {
    text-align: center;
    padding: 0 20px 20px 29px;
}

#id-card .idc-btn {
    display: inline-block;
    cursor: pointer;
    line-height: 24px;
    height: 26px;
    width: 80px;
    margin: 0 10px;
    font-size: 12px;
}

#id-card .idc-btn.blue {
    color: #fff;
    background-color: #00a1d6;
    border: 1px solid #00a1d6;
}

#id-card .idc-btn.blue:hover {
    background-color: #00b5e5;
    border: 1px solid #00b5e5;
    color: #fff;
}

#id-card .idc-btn.unfollow {
    background-color: #edf2f9;
    border-color: #edf2f9;
    color: #999;
}

#id-card .idc-btn .btn-content {
    line-height: 24px;
}

.be-tab,.be-tab-item {
    position: relative;
}

.be-tab-item {
    float: left;
    font-size: 14px;
    margin-right: 20px;
    line-height: 28px;
    vertical-align: top;
    cursor: pointer;
}

.be-tab-item:last-child {
    margin-right: 0;
}

.be-tab-item.is-active {
    color: #00a1d6;
}

.be-tab-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background: #ff3c3c;
    opacity: 0;
    cursor: pointer;
}

.be-tab-cursor {
    left: 0;
    border-bottom: 1px solid #00a1d6;
    transform: translateX(0);
    transition: width .2s ease,transform .2s ease;
}

.be-tab-cursor,.be-tab-cursor:after {
    position: absolute;
    bottom: 0;
    height: 0;
    width: 0;
}

.be-tab-cursor:after {
    content: "";
    left: 50%;
    transform: translateX(-50%);
    margin-left: -3px;
    border-bottom: 3px solid #00a1d6;
    border-top: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
}

.be-tooltip {
    position: fixed;
    z-index: 120;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,.14);
    background-color: rgba(0,0,0,.8);
}

.be-scrollbar-wrapper {
    position: relative;
}

.be-switch-container {
    position: relative;
    display: inline-block;
    height: 20px;
    cursor: pointer;
    white-space: nowrap;
}

.be-switch-container.is-checked .be-switch {
    background-color: #00a1d6;
}

.be-switch-container.is-checked .be-switch-cursor {
    left: 17px;
}

.be-switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
    border-radius: 8px;
    background-color: #ccd0d7;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color .2s ease;
}

.be-switch-cursor {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 12px;
    background: #fff;
    transition: left .2s ease;
}

.be-switch-label {
    display: inline-block;
    line-height: 20px;
    font-size: 14px;
    margin-left: 3px;
    vertical-align: middle;
}

.be-switch-input {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.btn[data-v-53027a10] {
    display: inline-block;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    padding: 0 10px;
    margin-right: 20px;
    line-height: 30px;
    min-width: 70px;
    transition: all .2s ease;
    font-size: 0;
    color: #666;
    text-align: center;
    vertical-align: middle;
    outline: none;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
}

.btn[data-v-53027a10]:last-of-type {
    margin-right: 0;
}

.btn .btn-loading[data-v-53027a10],.btn i[data-v-53027a10] {
    margin-right: 8px;
}

.btn.default[data-v-53027a10] {
    color: #666;
    background-color: #fff;
    border-color: #d9d9d9;
}

.btn.primary[data-v-53027a10] {
    color: #fff;
    background-color: #00a1d6;
    border-color: #00a1d6;
}

.btn.primary[data-v-53027a10]:focus,.btn.primary[data-v-53027a10]:hover {
    background-color: #00b5e5;
    color: #fff;
    border-color: #00b5e5;
}

.btn.ghost[data-v-53027a10],.btn.ghost[data-v-53027a10]:focus,.btn.ghost[data-v-53027a10]:hover {
    color: #666;
    background-color: #f7f7f7;
    border-color: #d9d9d9;
}

.btn.warning[data-v-53027a10] {
    color: #fff;
    background-color: #fa0;
    border-color: #fa0;
}

.btn.warning[data-v-53027a10]:focus,.btn.warning[data-v-53027a10]:hover {
    color: #fff;
    background-color: rgba(255,170,0,.7);
    border-color: #fa0;
}

.btn.danger[data-v-53027a10] {
    color: #fff;
    background-color: #f50;
    border-color: #f50;
}

.btn.danger[data-v-53027a10]:focus,.btn.danger[data-v-53027a10]:hover {
    color: #fff;
    border-color: #f50;
    background-color: rgba(255,85,0,.7);
}

.btn.success[data-v-53027a10] {
    background-color: #87d068;
    border-color: #87d068;
    color: #fff;
}

.btn.success[data-v-53027a10]:focus,.btn.success[data-v-53027a10]:hover {
    color: #fff;
    border-color: #87d068;
    background-color: rgba(135,208,104,.7);
}

.btn.info[data-v-53027a10] {
    color: #fff;
    border-color: #2db7f5;
    background-color: #2db7f5;
}

.btn.info[data-v-53027a10]:focus,.btn.info[data-v-53027a10]:hover {
    color: #fff;
    border-color: #2db7f5;
    background-color: rgba(45,183,245,.7);
}

.btn[data-v-53027a10]:focus,.btn[data-v-53027a10]:hover {
    color: #00a1d6;
    background-color: #fff;
    border-color: #00a1d6;
}

.btn.btn-small[data-v-53027a10] {
    padding: .2rem .3rem;
    line-height: 1rem;
    min-width: 0;
}

.btn.btn-large[data-v-53027a10] {
    width: 140px;
    height: 40px;
    line-height: 40px;
}

.btn.btn-large .btn-content[data-v-53027a10] {
    font-size: 14px;
}

@keyframes loading-53027a10 {
    0% {
        transform-origin: 50% 50%;
        transform: rotate(0deg);
    }

    to {
        transform-origin: 50% 50%;
        transform: rotate(1turn);
    }
}

.btn-loading[data-v-53027a10] {
    display: inline-block;
    animation: loading-53027a10 1s linear infinite;
}

.btn-content[data-v-53027a10] {
    font-size: 12px;
    vertical-align: top;
}

.btn-content[data-v-53027a10]:hover {
    color: inherit;
    background-color: inherit;
}

.btn.btn-disabled[data-v-53027a10] {
    cursor: default;
}

.btn.btn-disabled[data-v-53027a10],.btn.btn-disabled[data-v-53027a10]:hover {
    color: #ccd0d7;
    background: #f4f5f7;
    border-color: #e5e9ef;
}

.btn-icon[data-v-53027a10] {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.btn-container[data-v-1ea3cefa] {
    font-size: 0;
    white-space: nowrap;
}

.btn-container.btn-center[data-v-1ea3cefa] {
    text-align: center;
}

.btn-container.btn-left[data-v-1ea3cefa] {
    text-align: left;
}

.btn-container.btn-right[data-v-1ea3cefa] {
    text-align: right;
}

.btn-container .btn[data-v-1ea3cefa]:last-of-type {
    margin-right: 0;
}

.be-pager {
    margin: 15px 0;
    text-align: center;
}

.be-pager:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}

.be-pager-item {
    display: inline-block;
    line-height: 38px;
    padding: 0 15px;
    margin-right: 4px;
    text-align: center;
    list-style: none;
    background-color: #fff;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    font-family: Arial;
    font-size: 14px;
    border: 1px solid #d7dde4;
    border-radius: 4px;
    transition: all .2s ease-in-out;
}

.be-pager-item a {
    text-decoration: none;
    color: #657180;
}

.be-pager-item:hover {
    border-color: #00a1d6;
}

.be-pager-item:hover a {
    color: #00a1d6;
}

.be-pager-item-active {
    background-color: #00a1d6;
    border-color: #00a1d6;
}

.be-pager-item-active:hover a,.be-pager-item-active a {
    color: #fff;
}

.be-pager-item-jump-next,.be-pager-item-jump-prev {
    padding: 0 5px;
}

.be-pager-item-jump-next:after,.be-pager-item-jump-prev:after {
    content: "\2022\2022\2022";
    display: block;
    letter-spacing: 1px;
    color: #ccc;
    text-align: center;
}

.be-pager-prev {
    margin-right: 8px;
}

.be-pager-item-jump-next,.be-pager-item-jump-prev {
    margin-right: 4px;
}

.be-pager-next {
    margin-left: 4px;
}

.be-pager-item-jump-next,.be-pager-item-jump-prev,.be-pager-next,.be-pager-prev {
    display: inline-block;
    font-size: 14px;
    line-height: 38px;
    list-style: none;
    text-align: center;
    cursor: pointer;
    color: #666;
    font-family: Arial;
    transition: all .2s ease-in-out;
}

.be-pager-next,.be-pager-prev {
    padding: 0 14px;
    border: 1px solid #d7dde4;
    border-radius: 4px;
    background-color: #fff;
}

.be-pager-next a,.be-pager-prev a {
    color: #666;
    font-size: 14px;
}

.be-pager-next:hover,.be-pager-prev:hover {
    border-color: #00a1d6;
}

.be-pager-next:hover a,.be-pager-prev:hover a {
    color: #00a1d6;
}

.be-pager-disabled {
    display: none;
}

.be-pager-options {
    float: left;
    margin-left: 15px;
}

.be-pager-options-elevator {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    color: #99a2aa;
}

.be-pager-options-elevator input {
    border-radius: 4px;
    margin: 0 8px;
    width: 50px;
}

.be-pager-total {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    margin-left: 30px;
    color: #99a2aa;
}

.be-dropdown {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.be-dropdown-trigger {
    width: 24px;
    height: 24px;
    margin: auto;
    text-align: center;
}

.be-dropdown-trigger .icon-ic_more {
    display: block;
    line-height: 24px;
    color: #222;
    font-size: 24px;
    color: #999;
}

.be-dropdown-item {
    height: 40px;
    padding: 0 20px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #222;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color .2s ease;
    cursor: pointer;
}

.be-dropdown-item:hover {
    color: #00a1d6;
    background-color: #e5e9ef;
}

.be-dropdown-item.be-dropdown-item-delimiter {
    border-bottom: 1px solid #e5e9ef;
}

.be-dropdown-menu {
    position: fixed;
    top: 40px;
    z-index: 10;
    padding: 6px 0;
    background-color: #fff;
    border: 1px solid #e5e9ef;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,.14);
}

.be-tags-container {
    position: absolute;
    top: 4px;
    right: 4px;
}

.be-tags-container .tag {
    display: inline-block;
    padding: 0 4px;
    font-size: 10px;
    color: #fff;
    text-align: center;
    line-height: 14px;
    border-radius: 2px;
    margin-left: 4px;
}

.be-tags-container .tag.pay-tag {
    background-color: #faab4b;
}

.be-tags-container .tag.coop-tag,.be-tags-container .tag.inter-tag,.be-tags-container .tag.live-review {
    background-color: #fb7299;
}

.be-tags-container .tag.new-tag {
    background-color: #42a0c4;
}

@font-face {
    font-family:iconfont;src:url(data:font/woff2;base64,d09GMgABAAAAAAO4AAsAAAAACFQAAANsAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDKgqDSIMoATYCJAMUCwwABCAFhG0HYxtjBxEVnI3IfhY4Z3NCT1bKOQcF/6IePckryH0fguczZ74vyVmtXCAGp0R4I5g7w61OmY0Rtx1eEErj+23apUB26KhKoJW100/L/Ac790KuK/D/uFc123MBmc++xWmOTWuCJByggO1p6SZrQSpQQeswduVFPIMAjjJqUQ0atehAqhF9J4wiG4MxKBDnyoihg/tiuRpTkytYhFjbvQb5akAtVleBlf7PyxvKZUHhaYyH2gxqOIArYcpEDR1EgR76KcF4ZXC+AjxAAyVWppVh9eYB6DBcgsaVBQ1VgCdbFISpwlOJGlGECCm5u/oXz+JwgEZhEJAYRnYKAOrAiIEwpY1AQ5gKgYLwFAIDiRrc+3jEA8ABPrAKOI/wBcTq3aSojBnTSgrTkTr39LsG6j6xk39vzYMH5Z2kVG5QCu3zADCzxo7uPvyL3b1bxp9+9t7dKn3OVDp1W3T8TuXTVXv7qZcigUu1RCSuEh8zeP3SzIM3bt1y5MC+DAPWBf2XHEKl8lIuPRo/4lIsOXMMExw/21h5/uSYH3CkAseK1Qk6bMi5Kc+szu3iKVrUTVm/9ciJDRaljBcd0P3EizpYOfuy00CTt1HuPy6YuWnmZgWW/upyYMGOEu+K71xwoAuP9xWkoNWnxJrb7T6U/FC79uZp08ufPrg5WBeVcG0zvsvkOedlel78OSjK+edyTpfz8h+HGV7vZXrHFACiHWgLoPupEJ9UUO23jlEf//HvMCHDjMa9U9f4Zn0DwNOfB39Bd3Toz/5HnNbsPyqhZVejMpHElFXaRgTVQim/y6rg38kjaE/n+TjWjIiNguUcCIokcoLGUgBt8CXAw6cCxLDUBkdxjQ/7pDcOjZhkoJj5AIQ0ToIiFZdBk8Y1tME/A49M3kGMNGlwqF4tz/Rtq72jIFUUlP2oznkwlk69IPeG0nWpJHk++QUZax/tSpXJxq4YIGNsGN/lXtWQEe7pAh5D1zFZ4Qa5BpWqPYSlB5V9UZBzP/EcCUgpKJDMD6nl2MC4w5WX+/4bKDmdlNRUVRhfQIzq8clOIGqBvoqHVlXX8pLRW2lPKYMYgvXIBRihM8OM2PJZDcipQNUjaB2EqJtpKw7ml/bPeAQeY/q02p2ma3PyW+I85b/juHLp8KvdEt926Q8S07RFj8H5bUqUB1ZMJg==) format("woff2"),url(//s1.hdslb.com/bfs/static/jinkela/space/assets/iconfont.woff) format("woff"),url(//s1.hdslb.com/bfs/static/jinkela/space/assets/iconfont.ttf) format("truetype");
}

.iconfont {
    font-family: iconfont!important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.video-commonicon_caozuo_huanyihuan:before {
    content: "\E73C";
}

.video-commonplayer_play:before {
    content: "\E60E";
}

.video-commonmenu:before {
    content: "\E60D";
}

.video-commonicon_tonote:before {
    content: "\E6B6";
}

/*# sourceMappingURL=space.8.f69f7d6f8fbedc95d9c6de110515943ee7b4dd33.css.map*/

然后就是图片素材了(我直接从B站八的)

具体效果过段时间我就会放在文末当打赏用了!