.tst {
    position: fixed;
    margin-top: 0;
    left: 50%;
    top: 50%;
    opacity: 0;
    padding: 15px 30px;
    min-width: 116px;
    box-sizing: border-box;
    border-radius: 60px;
    font-size: 14px;
    color: #fff;
    line-height: 20px;
    text-align: center;
    z-index: 10000;
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all .3s linear
}

.tst--show {
    margin-top: 2%;
    opacity: 1
}

.tst--vanish {
    margin-top: -1%;
    opacity: 0
}

.tst-type--success {
    background: rgba(250, 57, 57, 0.9);
    box-shadow: 0 2px 9px 0 rgba(198, 19, 19, 0.7)
}

.tst-type--error {
    background: rgba(51, 51, 51, 0.9);
    box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.4)
}

@font-face {
    font-family: DINCondBlack;
    src: url(//s5.ssl.res.360kuai.com/static/085df40fa30bcbdc.otf);
}

.level__modal {
    position: fixed;
    top: 25px;
    right: 200px;
    z-index: 1000;
    display: none;
    opacity: 0;
    transform: scale(0);
    transition: all .3 ease-in-out
}

.level__modal__show {
    display: block;
    opacity: 1;
    transform: scale(1)
}

.level__modal__close {
    position: absolute;
    top: 18px;
    right: 13px;
    z-index: 2000;
    display: block;
    width: 20px;
    height: 20px;
    background: #000 url(//p4.ssl.img.360kuai.com/t01b96f100c8367d9a3.png) no-repeat center;
    background-size: 8px 8px;
    opacity: .4;
    border-radius: 50%;
    cursor: pointer
}

.level__modal__close:hover {
    opacity: .6
}

.level__modal__content {
    display: block;
    position: relative
}

.level__modal__img {
    display: block;
    width: 180px;
    height: 180px
}

.level__modal__number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: DINCondBlack;
    font-size: 26px;
    font-weight: 700;
    color: #be4413;
    line-height: 26px
}

.modal {
    position: fixed;
    z-index: 1001;
    background: rgba(0, 0, 0, 0.4);
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%
}

.modal.is-scroll-disabled {
    overscroll-behavior: contain;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.modal.is-scroll-disabled::-webkit-scrollbar,
.modal.is-scroll-disabled::-webkit-scrollbar-thumb {
    display: none
}

.modal.is-scroll-disabled .modal__wrapper {
    height: calc(100% + 1px)
}

.modal__wrapper {
    display: table;
    width: 100%;
    height: 100%
}

.modal__content {
    display: table-cell;
    vertical-align: middle
}

.modal--fullscreen {
    right: 0;
    z-index: 1000
}

.modal--flow {
    background: white;
    z-index: 999
}

.modal--blur {
    backdrop-filter: blur(3px)
}

.safari-modal {
    position: absolute;
    width: 75%;
    top: 50%;
    left: 50%;
    padding: 1.5rem 2rem 2rem;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 4px
}

.safari-modal .head {
    position: relative;
    font-size: 20px;
    color: #999;
    padding-right: 10%;
    line-height: 2.3rem;
    margin-bottom: 10px
}

.safari-modal .head .close-icon {
    position: absolute;
    top: .3rem;
    right: -0.3rem;
    height: 21px;
    width: 21px;
    cursor: pointer
}

.safari-modal .head .close-icon::before,
.safari-modal .head .close-icon::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -1px;
    background: #797979
}

.safari-modal .head .close-icon::before {
    transform: rotate(45deg)
}

.safari-modal .head .close-icon::after {
    transform: rotate(-45deg)
}

.safari-modal .content img {
    display: block;
    width: 100%
}

.safari-modal .footer {
    margin-top: 21px;
    text-align: center
}

.safari-modal .footer button {
    width: 100%;
    height: 67px;
    line-height: 40px;
    color: #fff;
    font-size: 20px;
    border: none;
    border-radius: 4px;
    background-color: #fa3939
}

.skeletonHeader__wrapper,
.skeletonHeader__wrapper * {
    box-sizing: content-box
}

.skeletonHeader__wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 64px;
    background: #fff;
    z-index: 200;
    border-bottom: 1px solid #eee
}

.skeletonHeader__wrapper .skeletonHeader__content {
    width: 1366px;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box
}

.skeletonHeader__wrapper .skeletonHeader__left,
.skeletonHeader__wrapper .skeletonHeader__right,
.skeletonHeader__wrapper .skeletonHeader__search {
    display: flex;
    align-items: center;
    height: 100%
}

.skeletonHeader__wrapper .skeletonHeader__left>.skeletonHeader__module,
.skeletonHeader__wrapper .skeletonHeader__right>.skeletonHeader__module,
.skeletonHeader__wrapper .skeletonHeader__search>.skeletonHeader__module {
    border-radius: 4px;
    padding: 3px 0;
    height: 26px;
    background-color: #f6f6f6
}

.skeletonHeader__wrapper .skeletonHeader__left {
    float: left
}

.skeletonHeader__wrapper .skeletonHeader__right,
.skeletonHeader__wrapper .skeletonHeader__search {
    float: right
}

.chimee-progress,
.chimee-controlbar__progress {
    position: absolute;
    width: 100%;
    bottom: 0
}

.chimee-controlbar__progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    z-index: 1;
    transition: bottom 300ms ease-in-out
}

.chimee-controlbar__progress:hover,
.chimee-controlbar__progress.active {
    height: 8px
}

.chimee-controlbar__progress:hover .chimee-controlbar__progress__point,
.chimee-controlbar__progress.active .chimee-controlbar__progress__point {
    bottom: -3px;
    display: block
}

.chimee-controlbar__progress__buff,
.chimee-controlbar__progress__play {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    transition: all linear .1s
}

.chimee-controlbar__progress__play {
    background: #fff
}

.chimee-controlbar__progress__point {
    position: absolute;
    margin-left: -7px;
    bottom: -5px;
    transition: all linear .1s;
    display: none
}

.chimee-controlbar__progress__point__circle {
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    position: relative
}

.chimee-controlbar__progress__point__circle::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    top: -5px;
    left: -5px
}

.chimee-controlbar__progress__point__text {
    display: none
}

.short-video__container.showControlBar .chimee-controlbar__progress {
    bottom: 36px
}

.short-video__container .mute-tip {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0 6px;
    font-size: 12px;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11;
    width: 80px;
    height: 24px;
    line-height: 24px;
    background: #fff;
    border-radius: 4px;
    opacity: .7;
    cursor: pointer;
    overflow: visible;
    white-space: nowrap;
    user-select: none
}

.short-video__container .mute-tip .icon {
    display: inline-block;
    background-image: url(//p3.ssl.img.360kuai.com/t012ed6440c748fe57a.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 18px;
    height: 15px;
    margin-right: 5px
}

.short-video__container .mute-tip .unMuted {
    background-image: url(//p3.ssl.img.360kuai.com/t019ef2a99497e90588.png)
}

.short-video__container__ad-info {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 14px;
    margin: auto;
    z-index: 1000;
    font-size: 14px;
    color: #fff
}

.short-video__container__ad-info__btn {
    cursor: pointer;
    width: 80px;
    height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: rgba(250, 57, 57, 0.9);
    border-radius: 3px;
    margin-left: 3px;
    margin-bottom: 5px;
    text-align: center;
    line-height: 30px
}

.short-video__container__ad-info__btn:hover {
    background-color: #fa3939
}

.short-video__container__ad-info__title {
    line-height: 22px;
    padding: 0 3px;
    width: 100%;
    z-index: 1000;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

@keyframes loading {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.short-video__fixedIcon {
    position: fixed;
    bottom: 124px;
    right: 30px;
    width: 46px;
    height: 46px;
    background: url("https://p2.ssl.img.360kuai.com/t012f3d9ed61690ba43.png") no-repeat center #fff;
    background-size: cover;
    font-size: 0;
    border: 1px solid #E8E8E8;
    border-radius: 50%;
    text-align: center;
    line-height: 46px
}

.short-video__fixedIcon:hover {
    font-size: 14px;
    color: #333;
    background: #fff
}

.short-video__container {
    display: flex;
    position: fixed;
    justify-content: center;
    align-items: center;
    z-index: 100000;
    cursor: pointer
}

.short-video__container video {
    background-color: #000;
    outline: none;
    object-fit: contain !important
}

.short-video__container.small {
    bottom: 124px;
    right: 30px;
    width: 46px;
    height: 46px;
    transform: none !important
}

.short-video__container__box {
    width: 100%;
    height: 100%
}

.short-video__container__title {
    font-size: 14px;
    color: #fff;
    line-height: 22px;
    padding: 0 3px;
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 14px;
    margin: auto;
    z-index: 1000;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.short-video__container__pause {
    display: none;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1000;
    background-size: cover
}

.short-video__container__pause.paused {
    background-image: url(//p1.ssl.img.360kuai.com/t017275268d729d1ad6.png)
}

.short-video__container__pause.paused:hover {
    background-image: url(//p1.ssl.img.360kuai.com/t01aa41d7a374cf8689.png)
}

.short-video__container__pause.play,
.short-video__container__pause.play:hover {
    background-image: url(//p1.ssl.img.360kuai.com/t01e607ee32a62c8714.png)
}

.short-video__container__prev {
    position: absolute;
    bottom: 112px;
    right: 12px;
    width: 32px;
    height: 32px;
    z-index: 10000;
    cursor: pointer;
    background-image: url(//p2.ssl.img.360kuai.com/t0152b76229624268e4.png), url(//p1.ssl.img.360kuai.com/t018f79c21170e74e10.png), url(//p1.ssl.img.360kuai.com/t01f5e7286f61e1fbf8.png);
    background-size: cover, 0, 0
}

.short-video__container__prev.disabled {
    background-size: 0, 0, cover
}

.short-video__container__prev:hover {
    background-size: 0, cover, 0
}

.short-video__container__next {
    position: absolute;
    bottom: 70px;
    right: 12px;
    width: 32px;
    height: 32px;
    z-index: 10000;
    cursor: pointer;
    background-size: cover, 0, 0;
    background-image: url(//p3.ssl.img.360kuai.com/t011c819d035e0a9962.png), url(//p2.ssl.img.360kuai.com/t01199bf81891494f2d.png), url(//p3.ssl.img.360kuai.com/t0121f21eeecf65f7cc.png)
}

.short-video__container__next.disabled {
    background-size: 0, 0, cover
}

.short-video__container__next:hover {
    background-size: 0, cover, 0
}

.short-video__container__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background-image: url(//p3.ssl.img.360kuai.com/t01f96a0a84ed4580fa.png), url(//p3.ssl.img.360kuai.com/t01ef91ea47d5380226.png);
    background-size: cover, 0;
    cursor: pointer;
    z-index: 1000
}

.short-video__container__close:hover {
    background-size: 0, cover
}

.short-video__container__mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    line-height: 356px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    z-index: 10000
}

.short-video__container__mask__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background-image: url(//p3.ssl.img.360kuai.com/t01f96a0a84ed4580fa.png), url(//p3.ssl.img.360kuai.com/t01ef91ea47d5380226.png);
    background-size: cover, 0;
    cursor: pointer
}

.short-video__container__mask__close:hover {
    background-size: 0, cover
}

.bkg_mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    opacity: .6;
    filter: blur(15px)
}

.player__wrapper {
    width: 100%;
    height: 100%;
    position: relative
}

.player__wrapper:hover .short-video__container__pause {
    display: block
}

.player__wrapper>img {
    position: absolute;
    left: calc(50% - 26px);
    top: calc(50% - 26px);
    z-index: 7;
    width: 52px;
    height: 52px;
    animation: loading 1.2s linear infinite
}

.player__wrapper__btn__container {
    display: flex;
    width: 100%;
    position: absolute;
    justify-content: center;
    bottom: 60px;
    z-index: 10000;
    opacity: 0;
    transition: opacity .5s
}

.player__wrapper__btn__show {
    opacity: 1
}

.player__wrapper__btn {
    flex: 1 1 auto;
    max-width: 200px;
    margin: 0 7px;
    border: none;
    border-radius: 6px;
    outline: none
}

.player__wrapper__btn span {
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 1
}

.player__wrapper__btn:hover {
    opacity: 1;
    cursor: pointer
}

.player__wrapper__btn_s {
    font-size: 16px;
    height: 42px
}

.player__wrapper__btn_l {
    font-size: 18px;
    height: 40px
}

.player__wrapper::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.55) 100%)
}

.player__error {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(-180deg, rgba(11, 10, 10, 0) 0, rgba(0, 0, 0, 0.75) 100%);
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #FFF;
    font-size: 18px
}

.player__error--tip {
    user-select: none
}

.player__error--refresh {
    margin-top: 30px;
    text-align: center;
    padding: 15px;
    width: 100%;
    height: 48px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: .9
}

.player__error--refresh>img {
    margin-right: 16px
}

.img__container {
    overflow: hidden;
    position: relative
}

.img__container:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: red;
    opacity: 0
}

.img__container img {
    border: none
}

.verify-img {
    width: 100%;
    height: 100%;
    position: relative;
    line-height: 100%;
    text-align: center
}

.verify-img__avatar,
.verify-img__poster {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    overflow: hidden
}

.verify-img__avatar {
    border-style: solid;
    border-radius: 50%;
    z-index: 1
}

.verify-img__poster {
    border: 3px solid #fff;
    border-radius: 50%;
    z-index: 2
}

.verify-img__icon {
    position: absolute;
    z-index: 3
}

.verify-img__head {
    border-radius: 50%;
    overflow: hidden;
    display: inline-block
}

.modal {
    right: 0
}

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

.follow-author__modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 680px;
    background: #fff;
    border-radius: 6px
}

.follow-author__modal--jump-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    border: none;
    background: none;
    font-size: 12px;
    color: #bfbfbf;
    line-height: 12px
}

.follow-author__modal__header {
    margin: 24px 0 12px;
    text-align: center;
    font-size: 20px;
    color: #999
}

.follow-author__modal__header span {
    display: inline-block;
    padding: 0 30px;
    position: relative
}

.follow-author__modal__header span::before,
.follow-author__modal__header span::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px
}

.follow-author__modal__header span::before {
    left: 0;
    background: url("https://p2.ssl.img.360kuai.com/t01af30aab900eb53f7.png") no-repeat center center;
    background-size: contain
}

.follow-author__modal__header span::after {
    right: 0;
    background: url("https://p2.ssl.img.360kuai.com/t01af30aab900eb53f7.png") no-repeat center center;
    background-size: contain
}

.follow-author__modal__content {
    overflow: hidden
}

.follow-author__modal__content .field {
    width: 636px;
    margin: 14px auto 0
}

.follow-author__modal__content .field .field-list {
    overflow: hidden
}

.follow-author__modal__content .field .field-list li {
    float: left;
    box-sizing: border-box;
    width: 90px;
    height: 36px;
    margin: 10px 8px;
    line-height: 32px;
    border: 1px solid #e8e8e8;
    border-radius: 21px;
    font-size: 14px;
    color: #333;
    text-align: center;
    cursor: pointer
}

.follow-author__modal__content .field .field-list li.active {
    color: #fff;
    border: 1px solid #fa3939;
    background: #fa3939
}

.follow-author__modal__content .field__btn {
    margin: 24px 0 30px;
    text-align: center
}

.follow-author__modal__content .field__btn__wrap button {
    width: 340px;
    height: 46px;
    background: #fa3939;
    border-radius: 3px;
    font-size: 16px;
    color: #fff;
    border: none;
    appearance: none
}

.follow-author__modal__content .field__btn__tip {
    margin-top: 9px;
    font-size: 12px;
    color: #fa3939
}

.follow-author__modal__content .authors {
    width: 645px;
    margin-left: 30px
}

.follow-author__modal__content .authors__content {
    height: 408px;
    overflow-y: auto;
    overflow-x: hidden
}

.follow-author__modal__content .authors__btn-wrap {
    text-align: center
}

.follow-author__modal__content .authors__btn-wrap button {
    display: inline-block;
    width: 96px;
    height: 36px;
    margin: 16px 30px;
    background: #f4f4f5;
    border-radius: 3px;
    font-size: 14px;
    color: #333;
    border: none
}

.follow-author__modal__content .authors__btn-wrap button.confirm {
    background: #fa3939;
    color: #fff
}

.follow-author__modal__content .authors .authors__field {
    margin-bottom: 7px
}

.follow-author__modal__content .authors .authors__field--title {
    position: relative;
    margin: 8px 0 7px;
    font-size: 18px;
    color: #333;
    line-height: 20px;
    vertical-align: middle;
    text-align: left;
    text-indent: 10px
}

.follow-author__modal__content .authors .authors__field--title::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    width: 3px;
    height: 16px;
    background: #fa3939;
    border-radius: 2px
}

.follow-author__modal__content .authors .authors__field--more {
    position: relative;
    display: inline-block;
    width: 70px;
    border: none;
    background: none;
    appearance: none;
    font-size: 14px;
    line-height: 20px;
    color: #999
}

.follow-author__modal__content .authors .authors__field--more-wrap {
    margin-top: 4px;
    text-align: center;
    width: 616px
}

.follow-author__modal__content .authors .authors__field--more::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url("https://p5.ssl.img.360kuai.com/t01ff7abe7a82781a34.png") no-repeat right center;
    background-size: contain
}

.follow-author__modal__content .authors__list {
    overflow: hidden;
    margin: 0 -8px
}

.follow-author__modal__content .authors__list__item {
    box-sizing: border-box;
    float: left;
    width: 305px;
    height: 84px;
    margin: 5px;
    padding: 12px 12px 0 14px;
    background: #f7f7f7;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.follow-author__modal__content .authors__list__item--img {
    width: 60px;
    height: 60px;
    cursor: pointer
}

.follow-author__modal__content .authors__list__item--detail {
    float: left;
    width: 173px;
    line-height: 12px;
    color: #333
}

.follow-author__modal__content .authors__list__item--name {
    margin-top: 4px;
    font-size: 14px;
    line-height: 14px
}

.follow-author__modal__content .authors__list__item--des {
    margin: 8px 0;
    font-size: 12px
}

.follow-author__modal__content .authors__list__item--fans {
    font-size: 12px;
    color: #a6a6a6
}

.follow-author__modal__content .authors__list__item--select-btn {
    float: right;
    width: 24px;
    height: 24px;
    background: #fff;
    border: 2px solid #e8e8e8;
    border-radius: 50%
}

.follow-author__modal__content .authors__list__item--select-btn.active {
    border: none;
    background: url("https://p1.ssl.img.360kuai.com/t0133a67e760a14b81e.png") no-repeat center center;
    background-size: contain
}

.header__desktop {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    position: relative;
    font-size: 14px;
    color: #666;
    background: url(https://p5.ssl.img.360kuai.com/t0128c035f4c4ea9bea.png);
    background-size: 100% 40px;
    display: none
}

.header__desktop button {
    border: 0;
    cursor: pointer
}

.header__desktop--add {
    color: #fa3939;
    margin-left: 16px;
    font-weight: 700;
    background: transparent
}

.header__desktop--add:hover {
    color: #e20a0a
}

.header__desktop--close {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    background: transparent url(https://p4.ssl.img.360kuai.com/t0100d760d1c3a56f11.png);
    background-size: 20px 20px
}

.suggest-panel {
    position: absolute;
    z-index: 1000;
    width: 194px;
    font-size: 14px;
    border-radius: 6px;
    box-shadow: 0 0 4px #eee;
    padding-top: 6px;
    background: #fff
}

.suggest-list {
    max-height: 340px;
    overflow: scroll
}

.suggest-item,
.suggest-no-result {
    position: relative;
    height: 34px;
    line-height: 34px;
    color: #222;
    padding: 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.suggest-item.is-active,
.suggest-no-result.is-active,
.suggest-item:hover,
.suggest-no-result:hover {
    background: #F9F9FB;
    color: #FA3939
}

.suggest-item-link {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    left: 0;
    top: 0
}

.suggest-at-tip {
    margin: 6px 0;
    padding: 0 12px;
    color: #999
}

.mention-extra-name {
    display: inline-block;
    font-size: 12px;
    line-height: 18px;
    padding: 0 6px;
    height: 18px;
    border-radius: 8px;
    margin-left: 4px;
    color: #FF900D;
    background-color: #FFF1E0
}

.cmmts__empty__cover {
    width: 240px;
    height: 140px;
    display: block;
    margin: 80px auto 0
}

.cmmts__empty__desc {
    color: #999;
    text-align: center;
    font-size: 14px
}

.cmmts__wrapper .cmmts__wrapper-avatar {
    overflow: visible
}

.cmmts__input__wrap {
    position: relative
}

.cmmts__input__wrap.dark .cmmts__input {
    background: #41424c;
    border: 1px solid #41424c;
    border-radius: 3px
}

.cmmts__input__wrap.dark .cmmts__textarea {
    color: #999;
    background: transparent
}

.cmmts__input__wrap.dark .cmmts__button {
    color: #fff;
    border-radius: 3px
}

.cmmts__input__wrap.dark .cmmts__button.disabled {
    background: #999
}

.cmmts__input__wrap.dark .cmmts__emoji {
    background-image: url(https://p2.ssl.img.360kuai.com/t110b9a9301ee8128701ef2bc4e.png)
}

.cmmts__input__wrap.dark .cmmts__emoji:hover {
    background-image: url(https://p4.ssl.img.360kuai.com/t110b9a9301c9f8c0a75f8d810f.png)
}

.cmmts__emoji {
    width: 20px;
    height: 20px;
    margin-left: 14px;
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    background-image: url('https://p2.ssl.img.360kuai.com/t110b9a93017690b2c8d3aa8efb.png');
    cursor: pointer
}

.cmmts__emoji__wrap {
    position: absolute;
    top: 38px;
    right: -16px;
    z-index: 10;
    padding: 10px 0;
    background: #fff;
    width: 400px;
    height: 280px;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.02);
    border-radius: 3px
}

.cmmts__emoji__wrap::before {
    content: '';
    background: #fff;
    height: 10px;
    width: 10px;
    border-radius: 1px;
    position: absolute;
    transform: rotate(45deg);
    transform-origin: 50%;
    top: -5px;
    right: 128px
}

.cmmts__emoji__wrap::after {
    content: '';
    background: transparent;
    position: absolute;
    width: 400px;
    height: 40px;
    top: -40px;
    left: 0;
    pointer-events: none
}

.cmmts__emoji__wrap *::-webkit-scrollbar,
.cmmts__emoji__wrap::-webkit-scrollbar {
    width: 4px
}

.cmmts__emoji__list {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0 5px 0 11px;
    overflow-y: scroll;
    font-size: 0
}

.cmmts__emoji__list__item {
    width: 38px;
    height: 38px;
    margin: 2px;
    text-align: center;
    vertical-align: middle;
    border-radius: 19px;
    display: inline-block
}

.cmmts__emoji__list__item:hover {
    background: #fff2f2;
    display: inline-block
}

.cmmts__emoji__list__item img {
    width: 24px;
    height: 24px;
    padding: 0;
    display: block;
    margin: 7px
}

.cmmts__emoji:hover {
    background-image: url(//p4.ssl.img.360kuai.com/t013a4626bd5aef9abb.png)
}

.cmmts__footer {
    display: flex;
    align-items: center;
    position: absolute;
    right: 16px;
    bottom: 14px
}

.cmmts__footer>ul {
    display: flex;
    float: right
}

.cmmts__footer>ul img {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    cursor: pointer
}

.cmmts__footer>ul button {
    background: #fa3939;
    border-radius: 3px;
    font-family: PingFang SC;
    font-size: 14px;
    color: #fff;
    padding: 6px 33px
}

.cmmts__input {
    position: relative;
    padding: 14px;
    padding-top: 9px;
    padding-bottom: 53px;
    background: #f8f8f8;
    border-radius: 8px;
    margin-top: 12px;
    border: 1px solid #fff
}

.cmmts__input.focus {
    border-color: #fa3939
}

.cmmts__input--small .cmmts__login-mask {
    min-height: 28px
}

.cmmts__input--default .cmmts__reply__btn {
    text-align: right
}

.cmmts__textarea {
    display: block;
    border: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-height: 67px;
    width: 100%;
    height: 27px;
    font-size: 14px;
    line-height: 24px;
    color: #222;
    outline: none;
    resize: none;
    background: #f8f8f8;
    -webkit-transition: height .3s ease-in-out;
    -moz-transition: height .3s ease-in-out;
    transition: height .3s ease-in-out;
    padding-right: 4px
}

.cmmts__textarea.expand {
    height: 67px
}

.cmmts__button {
    border: none;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #fff;
    background: #fa3939;
    border-radius: 3px;
    cursor: pointer;
    min-width: 94px;
    text-align: center
}

.cmmts__button:hover {
    opacity: .8
}

.cmmts__button.disabled {
    opacity: .3;
    cursor: default
}

.cmmts__login-mask {
    width: 100%;
    height: 68px;
    background: #f8f8f8;
    cursor: pointer
}

.cmmts__login-mask p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-size: 16px;
    line-height: 22px;
    color: #222
}

.cmmts__login-mask button {
    border: none;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    color: #f04142;
    background: transparent
}

.cmmts__reply__btn {
    margin-left: 14px
}

.mention-trigger {
    width: 20px;
    height: 20px;
    position: relative;
    background: url(https://p1.ssl.img.360kuai.com/t110b9a9301dcbc9882639dd40a.png) no-repeat center;
    background-size: contain
}

.mention-trigger:active,
.cmmts__input__wrap.dark .mention-trigger {
    opacity: .5
}

.cmmts__input__wrap.dark .mention-trigger {
    background-image: url(https://p1.ssl.img.360kuai.com/t110b9a930143a09ccba1bbb0a4.png)
}

.cmmts__input__wrap.dark .mention-trigger:hover,
.cmmts__input__wrap.dark .mention-trigger:active {
    opacity: 1
}

.mention-badge {
    display: block;
    width: 8px;
    height: 8px;
    background-color: #fa3939;
    border-radius: 50%;
    position: absolute;
    right: -4px;
    top: 0
}

.cmmts__wrapper-avatar {
    margin-top: 30px
}

.cmmts__avatar {
    float: left
}

.cmmts__content {
    margin-left: 48px
}

.cmmts__content--check .cmmts__input {
    margin-top: 0
}

.cmmts__item .item__body {
    word-wrap: break-word;
    margin: 10px 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #222
}

.cmmts__item--child .cmmts__content {
    margin-left: 32px
}

html body .toast {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    color: #fff;
    font-size: 18px;
    height: 60px;
    line-height: 60px;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    text-align: center;
    top: 50%;
    min-width: 300px;
    width: auto;
    white-space: nowrap;
    overflow: visible;
    padding: 0 10px;
    box-sizing: border-box;
    z-index: 9999999999999
}

html.is--mob .toast {
    font-size: .3rem;
    height: 1rem;
    line-height: 1rem;
    min-width: 3rem;
    transform: translate(-50%, -50%)
}

.report {
    width: 360px;
    height: 358px;
    background: #fff;
    box-shadow: 0 2px 10px 0 #00033;
    border-radius: 8px;
    margin: auto;
    padding: 36px 24px;
    box-sizing: border-box;
    position: relative
}

.report_close {
    width: 12px;
    height: 12px;
    position: absolute;
    right: 14px;
    top: 14px;
    cursor: pointer
}

.report_title {
    font-size: 22px;
    color: #222;
    text-align: center;
    margin-bottom: 19px;
    font-weight: 700
}

.report_li {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.report_li li {
    width: 96px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    background: #f4f4f5;
    border-radius: 3px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #333;
    transition: all .2s;
    cursor: pointer
}

.report_li-active {
    background: #fff2f2 !important;
    color: #fa3939 !important
}

.report_submit {
    width: 312px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #fa3939;
    box-shadow: 0 4px 5px 0 #fa393933;
    border-radius: 3px;
    font-size: 16px;
    color: #fff;
    margin-top: 12px;
    cursor: not-allowed;
    opacity: .2
}

.report_disabled {
    opacity: 1;
    cursor: pointer
}

.comment-mention-item {
    color: #316FFD
}

.list_cmt_big_card_wrapper {
    position: relative;
    margin-top: 24px;
    padding-left: 48px;
    cursor: pointer
}

.list_cmt_big_card_wrapper .img__container:after,
.list_cmt_big_card_wrapper_hide {
    display: none
}

.list_cmt_big_card_wrapper a {
    display: flex
}

.list_cmt_big_card_wrapper.big .img-wrapper {
    position: relative;
    border-radius: 4px;
    height: 128px;
    overflow: hidden
}

.list_cmt_big_card_wrapper.big .img-wrapper::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 14px;
    background-size: contain;
    background-image: url(https://p2.ssl.img.360kuai.com/t01f81f7411a361ef63.png)
}

.list_cmt_big_card_wrapper.big a {
    flex-direction: column
}

.list_cmt_big_card_wrapper.big .bottom {
    width: 100%
}

.list_cmt_big_card_wrapper.big .title {
    margin-bottom: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
}

.list_cmt_big_card_wrapper.big .info {
    margin-top: 9px;
    margin-bottom: 8px
}

.list_cmt_big_card_wrapper.big .close-icon {
    bottom: 8px
}

.list_cmt_big_card_wrapper .close-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-block;
    width: 8px;
    height: 8px;
    cursor: pointer;
    background-size: contain;
    background-image: url("https://s3.ssl.res.360kuai.com/static/2de1668092c572e7.svg")
}

.list_cmt_big_card_wrapper .left {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0
}

.list_cmt_big_card_wrapper .left::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 14px;
    background-size: contain;
    background-image: url(https://p2.ssl.img.360kuai.com/t01f81f7411a361ef63.png)
}

.list_cmt_big_card_wrapper .title {
    font-family: PingFang SC;
    font-size: 16px;
    color: #222;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.list_cmt_big_card_wrapper .title:hover {
    color: #FA3839;
    cursor: pointer
}

.list_cmt_big_card_wrapper .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 16px
}

.list_cmt_big_card_wrapper .info {
    display: block;
    margin-top: auto;
    font-family: PingFang SC;
    font-size: 12px;
    color: #999;
    line-height: 1
}

.cmmt-ad-item__header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.cmmt-ad-item__title {
    font-size: 16px;
    font-weight: 500;
    color: #222;
    cursor: pointer
}

.cmmt-ad-item__tag {
    color: #999;
    font-size: 12px
}

.cmmt-ad-item__tag span {
    font-size: 14px;
    line-height: 20px;
    cursor: pointer
}

.cmmt-ad-item__name {
    font-size: 16px;
    margin: 8px 0;
    line-height: 24px;
    cursor: pointer
}

.cmmt-ad-item__content {
    overflow: hidden;
    cursor: pointer
}

.cmmt-ad-item__content img {
    border-radius: 3px
}

.cmt-bottom-ad {
    position: relative;
    margin-top: 24px;
    padding-left: 48px
}

.cmt-bottom-ad.hide {
    display: none
}

.cmt-bottom-ad a {
    display: flex
}

.cmt-bottom-ad .close-icon {
    position: absolute;
    right: 7px;
    bottom: 6px;
    display: inline-block;
    width: 8px;
    height: 8px;
    cursor: pointer;
    background-size: contain;
    background-image: url("https://s3.ssl.res.360kuai.com/static/2de1668092c572e7.svg")
}

.cmt-bottom-ad .left {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0
}

.cmt-bottom-ad .left::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 14px;
    background-size: contain;
    background-image: url(https://p2.ssl.img.360kuai.com/t01f81f7411a361ef63.png)
}

.cmt-bottom-ad.ad-big .img-wrapper {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0
}

.cmt-bottom-ad.ad-big .img-wrapper::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 14px;
    background-size: contain;
    background-image: url(https://p2.ssl.img.360kuai.com/t01f81f7411a361ef63.png)
}

.cmt-bottom-ad .title {
    font-family: PingFang SC;
    font-size: 16px;
    color: #222;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.cmt-bottom-ad .title:hover {
    color: #FA3839;
    cursor: pointer
}

.cmt-bottom-ad .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 18px
}

.cmt-bottom-ad .right-bottom {
    display: block;
    margin-top: auto;
    font-family: PingFang SC;
    font-size: 12px;
    color: #999;
    line-height: 1
}

.cmmts__wrapper {
    margin-bottom: 10px;
    padding: 0 24px 24px
}

.cmmts__wrapper .comment_bottom_gg {
    margin-top: 30px
}

.cmmts__wrapper.dark .cmmts__title {
    color: #666
}

.cmmts__title {
    position: relative;
    color: #333;
    font-size: 20px;
    line-height: 1em;
    font-weight: 500;
    margin-top: 24px
}

.cmmts__title--count {
    color: #999;
    padding-left: 10px
}

.cmmts__title--close {
    position: absolute;
    top: 0;
    right: 24px;
    border: none;
    width: 20px;
    height: 20px;
    background: url(https://p5.ssl.img.360kuai.com/t01797ec05778578097.png) no-repeat 50%;
    background-size: 10px 10px;
    cursor: pointer
}

.cmmts__item .comment_unapproved {
    margin-top: 10px;
    font-size: 12px;
    color: #bdbdbd
}

.cmmts__item--child {
    margin-left: 48px
}

.cmmts__item.dark .item__header--name {
    color: #666
}

.cmmts__item.dark .item__reply {
    background: url(https://p4.ssl.img.360kuai.com/t110b9a93010601f796a848c010.png) no-repeat left center;
    background-size: 20px 20px;
    color: #999
}

.cmmts__item.dark .item__header--like {
    background: url(https://p0.ssl.img.360kuai.com/t010d914937ab019c3d.png) no-repeat right center;
    background-size: 20px;
    transition: all .3s
}

.cmmts__item.dark .item__header--like span {
    background: transparent !important
}

.cmmts__item.dark .item__header--like:hover {
    background: url(https://p5.ssl.img.360kuai.com/t110b9a9301782d4bfff880eb60.png) no-repeat right center;
    background-size: 20px
}

.cmmts__item.dark .item__header--like.active {
    background: url(https://p3.ssl.img.360kuai.com/t019733635aeb6a2b6a.png) no-repeat right center;
    background-size: 20px
}

.cmmts__item.dark .item__header--like.active span {
    color: #fa3939
}

.cmmts__item.dark .item__body {
    color: #bababa
}

.cmmts__item .item__header {
    line-height: 20px;
    overflow: hidden
}

.cmmts__item .item__header--name {
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #222
}

.cmmts__item .item__header--time {
    font-size: 14px;
    line-height: 20px;
    color: #999;
    margin-left: 8px
}

.cmmts__item .item__header--time:before {
    content: '\B7';
    padding-right: 8px
}

.cmmts__item .item__header--like span {
    padding-right: 22px;
    width: 20px;
    height: 20px;
    background: url(https://p0.ssl.img.360kuai.com/t010d914937ab019c3d.png) no-repeat right center;
    background-size: contain;
    cursor: pointer;
    font-size: 14px;
    color: #999
}

.cmmts__item .item__header--like span:hover {
    background: url(https://p5.ssl.img.360kuai.com/t011a12f8b69b077d3d.png) no-repeat right center;
    background-size: contain
}

.cmmts__item .item__header--like.active span {
    color: #fa3939;
    background: url(https://p3.ssl.img.360kuai.com/t019733635aeb6a2b6a.png) no-repeat right center;
    background-size: contain
}

.cmmts__item .item__info {
    font-size: 14px;
    color: #999;
    line-height: 20px;
    margin-top: 8px
}

.cmmts__item .item__info--city {
    margin-left: 6px
}

.cmmts__item .item__info--city::before {
    content: '\B7';
    padding-right: 8px
}

.cmmts__item .item__ai-tag {
    margin: 8px 0;
    font-size: 12px;
    line-height: 17px;
    color: #999
}

.cmmts__item .item__reply {
    border: none;
    border-radius: 34px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #222;
    background: none;
    cursor: pointer;
    padding-left: 24px;
    background: url(https://p4.ssl.img.360kuai.com/t01afe31246991f4f54.png) no-repeat left center;
    background-size: 20px 20px
}

.cmmts__item .item__report {
    display: none;
    width: 16px;
    height: 16px;
    vertical-align: -4px;
    margin-left: 16px;
    cursor: pointer;
    transition: all .2s
}

.cmmts__item:hover .item__report {
    display: inline-block
}

.cmmts__reply--more {
    display: block;
    position: relative;
    border: none;
    margin-top: 10px;
    padding-right: 16px;
    font-size: 14px;
    line-height: 20px;
    color: #999;
    background: none;
    cursor: pointer;
    margin-left: 48px
}

.cmmts__reply--more:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(90deg);
    width: 16px;
    height: 16px;
    background: url(https://p0.ssl.img.360kuai.com/t016290f8a091060104.png) no-repeat 50%;
    background-size: 6px 10px
}

.cmmts__reply--bottom {
    display: block;
    border: none;
    padding: 11px 0;
    border-radius: 4px;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    text-align: center;
    color: #222;
    background: #f8f8f8;
    cursor: pointer;
    margin: 30px 0 0
}

.cmmts__reply--bottom span {
    display: inline-block;
    position: relative;
    padding-right: 18px
}

.cmmts__reply--bottom span:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: url(https://p5.ssl.img.360kuai.com/t014193b65ba66a43a3.png) no-repeat 50%;
    background-size: 6px 10px
}

.cmmts__reply--bottom:hover span {
    opacity: .8
}

.cmmts__reply-list {
    display: none
}

.cmmts__reply-list.active,
.cmmts__load--more {
    display: block
}

.cmmts__load--more {
    box-sizing: border-box;
    border: none;
    border-radius: 4px;
    margin: 40px auto 16px;
    padding: 11px 0;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    width: 100%;
    color: #222;
    background: #f8f8f8;
    cursor: pointer
}

.cmmts__load--more span {
    display: inline-block;
    position: relative;
    padding-right: 18px
}

.cmmts__load--more span:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(90deg);
    width: 16px;
    height: 16px;
    background: url(https://p5.ssl.img.360kuai.com/t014193b65ba66a43a3.png) no-repeat 50%;
    background-size: 6px 10px
}

.cmmts__load--end {
    margin: 40px 0 16px;
    font-size: 16px;
    line-height: 22px;
    padding: 11px 0;
    color: #222;
    text-align: center
}

.cmmts__drawer {
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    box-sizing: border-box;
    width: 480px;
    height: 100%;
    padding-bottom: 20px;
    transform: translateX(480px);
    transition: transform .3s cubic-bezier(0.34, 0.69, 0.1, 1);
    background: #fff
}

.cmmts__drawer__body {
    overflow: auto;
    padding: 0 20px;
    height: calc(100% - 60px)
}

.cmmts__drawer__body>.cmmts__wrapper-avatar {
    margin-top: 0;
    overflow: initial
}

.cmmts__drawer .cmmts__title {
    margin: 20px 0;
    padding: 0 24px
}

.cmmts__no-data {
    text-align: center
}

.cmmts__no-data img {
    display: inline-block;
    width: 250px;
    height: 140px
}

.modal--cmmts {
    background: rgba(0, 0, 0, 0.05);
    right: 0;
    z-index: 1000
}

.cmmts--show .cmmts__drawer {
    transform: translateX(0)
}

.article-audio {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin-left: 12px
}

.article-audio-tip,
.article-audio-btn {
    box-sizing: border-box;
    font-weight: 400;
    letter-spacing: 0
}

.article-audio-tip {
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(0, -50%);
    background-image: url(//p1.ssl.img.360kuai.com/t01e1190737d0e56c45.png);
    background-size: 100%;
    width: 153px;
    padding-left: 11px;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    position: absolute;
    color: #fa3939;
    white-space: nowrap;
    overflow: hidden;
    animation: article-audio-shake .2s linear 4 alternate;
    z-index: 10000
}

.article-audio-btn {
    background-image: url(https://p2.ssl.img.360kuai.com/t01bcb4dc513ac30cb6.png);
    background-repeat: no-repeat;
    background-position: 8px center;
    background-size: 16px;
    padding-left: 24px;
    padding-right: 6px;
    width: 90px;
    height: 28px;
    line-height: 28px;
    border: 1px solid #e4e4e4;
    border-radius: 14px;
    font-size: 14px;
    color: #666;
    text-align: center
}

.article-audio-btn:hover {
    background-image: url('https://p1.ssl.img.360kuai.com/t0114cc4811bc3a43b0.png');
    border: 1px solid #fa3939;
    color: #fa3939
}

.article-audio .animate {
    position: relative
}

.article-audio .animate::before,
.article-audio .animate::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    animation: scaleX 1.4s linear infinite forwards
}

.article-audio .animate::before {
    width: 28px;
    height: 28px;
    background: #fa3939;
    opacity: .12
}

.article-audio .animate::after {
    width: 14px;
    height: 14px;
    background: #fa3939;
    opacity: .4
}

.article-audio-box {
    width: 248px;
    height: 62px;
    background: #fff;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.02);
    position: fixed;
    z-index: 100000000;
    display: flex;
    left: 20px;
    bottom: 40px;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    cursor: move
}

.article-audio-box-close {
    cursor: pointer;
    width: 24px;
    height: 16px;
    background-image: url(//p4.ssl.img.360kuai.com/t018834a6958238a33f.png);
    background-size: 8px 8px;
    background-position: center bottom;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    top: 0
}

.article-audio-box-close-tip {
    display: none;
    position: absolute;
    top: -40px;
    right: -24px;
    width: 72px;
    height: 36px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.85);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
    font-size: 12px;
    color: #fff;
    line-height: 38px;
    text-align: center
}

.article-audio-box-close-tip:hover {
    display: block
}

.article-audio-box-close-tip::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -3px;
    height: 7px;
    width: 7px;
    background: rgba(0, 0, 0, 0.85);
    transform-origin: 50%;
    transform: rotate(45deg)
}

.article-audio-box-close:hover {
    background-image: url(//p0.ssl.img.360kuai.com/t01895261fd85301696.png)
}

.article-audio-box-close:hover div {
    display: block
}

.article-audio-box-status {
    height: 30px;
    width: 30px;
    background-size: cover;
    cursor: pointer
}

.article-audio-box-status:hover circle {
    fill: #e40e0e
}

.article-audio-box-status.audio-loading {
    cursor: default
}

.article-audio-box-status.audio-loading:hover circle {
    fill: #fa3939
}

.article-audio-box-title {
    font-size: 14px;
    color: #222;
    line-height: 62px;
    overflow: hidden;
    white-space: nowrap;
    width: 210px;
    position: relative;
    margin-left: 8px
}

.article-audio-box-title::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, #fff 100%)
}

.article-audio-box-title-sec {
    display: inline-block
}

.article-audio-box-title.mq>span {
    animation: mq 6s linear infinite;
    animation-play-state: running
}

.article-audio-box-title>.article-audio-box-title-sec:nth-of-type(1) {
    margin-right: 24px
}

.audio-playing .article-audio-btn,
.audio-loading .article-audio-btn {
    background-image: url(//p4.ssl.img.360kuai.com/t019fcf23e63f379ad1.png);
    border: 1px solid #fa3939;
    color: #fa3939
}

.audio-error .article-audio-btn,
.audio-paused .article-audio-btn {
    background-image: url(//p0.ssl.img.360kuai.com/t0172c876d709ff13b5.png);
    border: 1px solid #fa3939;
    color: #fa3939
}

.article__content .red,
#article__content .red {
    background: #fff2f2
}

@keyframes scaleX {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(2);
        opacity: 0
    }
}

@keyframes scaleY {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(2);
        opacity: 0
    }
}

@keyframes shake {
    from {
        transform: translateX(-3px)
    }

    to {
        transform: translateX(3px)
    }
}

@keyframes article-audio-shake {
    from {
        transform: translate(-3px, -50%)
    }

    to {
        transform: translate(3px, -50%)
    }
}

@keyframes mq {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(calc(-100% - 24px))
    }
}

.fake-viewport {
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none;
    left: 0;
    top: 0;
    opacity: 0
}

.article__title {
    font-size: 34px;
    color: #000;
    line-height: 50px;
    word-wrap: break-word;
    font-weight: 700;
    margin-bottom: 16px
}

.article__title.config_title {
    cursor: pointer
}

.article__title__ad {
    display: inline-block;
    vertical-align: text-top;
    margin-left: 8px;
    width: 32px;
    height: 18px;
    text-align: center;
    background: #f6f6f6;
    border-radius: 2px;
    font-family: PingFang SC;
    font-size: 12px;
    color: #999;
    line-height: 18px;
    transform: translateY(50%);
    font-weight: 400
}

.article__title .read_vip_tag {
    display: inline-block;
    margin-left: 15px;
    width: 70px;
    height: 28px;
    line-height: 27px;
    text-align: center;
    border: 1px solid #ce994f;
    border-radius: 3px;
    font-size: 14px;
    color: #ce994f;
    vertical-align: middle
}

.QidRegion {
    display: inline-block;
    font-size: 14px;
    color: #999;
    margin-left: 6px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.QidRegion::before {
    content: '\B7';
    padding-right: 6px
}

.article-info__avatar {
    margin-right: 12px
}

.tasktip {
    position: absolute;
    background-image: url(//p3.ssl.img.360kuai.com/t013d3cc43b1c94c2fc.png);
    width: 125px;
    height: 43px;
    line-height: 48px;
    bottom: -49px;
    left: 50%;
    margin-left: -62.5px;
    background-size: cover;
    font-size: 12px;
    color: #fff;
    text-align: center;
    z-index: 1
}

.tasktip--top {
    background-image: url(//p5.ssl.img.360kuai.com/t01a1d624ed3ab511db.png);
    bottom: 28px;
    line-height: 40px
}

.taskmodal {
    width: 411px;
    height: 53px;
    background: rgba(12, 12, 12, 0.7);
    border-radius: 6px;
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 100000;
    cursor: pointer
}

.taskmodal-content {
    font-size: 14px;
    color: #fff;
    text-align: left;
    line-height: 53px;
    display: inline-block;
    margin-left: 84px
}

.taskmodal-btn {
    position: absolute;
    right: 16px;
    top: 12px;
    width: 65px;
    height: 29px;
    background: #fa3839;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    line-height: 29px
}

.author-info__attention {
    display: block;
    width: 52px;
    height: 22px;
    border-radius: 3px;
    border: 1px solid transparent;
    font-size: 12px;
    color: #fa3939;
    margin-left: 8px;
    text-align: center;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    line-height: 20px;
    background-color: #fff2f2
}

.author-info__attention.has--attention {
    border-color: #f1f1f3;
    background-color: #f1f1f3;
    color: #afafaf;
    padding-left: 0
}

.author-info__attention .tasktip {
    display: none
}

.article__yuanchuang {
    display: inline-block;
    cursor: default;
    position: relative;
    margin-left: 8px
}

.article__yuanchuang--name {
    width: 32px;
    height: 18px;
    text-align: center;
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: #999;
    line-height: 18px;
    background-color: #f6f6f6;
    border-radius: 2px
}

.article__yuanchuang--name:hover {
    background-color: #f6f6f6
}

.article__yuanchuang--popup {
    width: 208px;
    padding: 12px 14px;
    background-color: #000;
    opacity: .85;
    font-size: 12px;
    color: #fff;
    line-height: 18px;
    position: absolute;
    left: -88px;
    top: 27px;
    z-index: 2;
    border-radius: 3px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12)
}

.article__yuanchuang--popup::after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-bottom-color: #000
}

.author-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 50px
}

.author-info--right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    height: 100%
}

.author-info--right--top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 30px
}

.author-info__name {
    line-height: 22px;
    font-size: 16px;
    color: #666
}

.author-info__desc {
    line-height: 20px;
    height: 20px;
    margin-top: 4px;
    font-size: 14px;
    color: #a6a6a6
}

.author-info__follow {
    align-self: flex-start;
    width: 22px;
    height: 22px;
    margin-left: 8px;
    cursor: pointer;
    background: url(//p0.ssl.img.360kuai.com/t01461ba89c121ebed2.png);
    background-size: 22px 22px;
    background-repeat: no-repeat;
    transition: transform .3s ease-in-out
}

.author-info__follow--rotate {
    transform: rotate(180deg)
}

.author-info.is-lite {
    height: auto !important
}

.author-info.is-lite .author-info__name {
    font-size: 14px !important
}

.author-info.is-lite .article-info__avatar,
.author-info.is-lite .author-info__attention {
    display: none !important
}

.author-info.is-lite .author-info--right {
    flex-direction: row !important
}

.author-info.is-lite .author-info__desc {
    margin-left: 10px
}

.author-info-lite {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: -6px
}

.author-info-lite .followBtn {
    cursor: pointer;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    width: 44px;
    margin: 0 auto;
    transform: translateY(-6px);
    background: #FA3939;
    color: #fff;
    border-radius: 20px
}

.author-info-lite .followBtn.isFollowed {
    background-color: #f1f1f3;
    color: #afafaf
}

.author-info-lite .verify-img {
    width: 44px;
    margin: 0 auto
}

.author-info-lite .verify-img__head {
    width: 44px !important;
    height: 44px !important;
    border-radius: 22px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2) inset
}

.author-info-lite .verify-img__avatar {
    display: none !important
}

.author-info-lite .verify-img__icon {
    bottom: auto !important;
    top: 0 !important
}

.author-info-lite .article-info__avatar {
    margin-right: 0 !important
}

.author-info--simple {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px
}

.author-info--simple__name {
    color: #666;
    margin-right: 8px;
    line-height: 20px
}

.author-info--simple__desc {
    color: #a6a6a6;
    line-height: 20px
}

.article__content__img img {
    width: 100%
}

.article__content__textgg {
    display: flex;
    align-items: center;
    cursor: pointer;
    line-height: 22px;
    margin-bottom: 26px;
    margin-top: -3px;
    position: relative;
    padding-right: 13px
}

.article__content__textgg .title {
    margin-bottom: 0
}

.article__content__textgg:hover span {
    color: #fa3939;
    border-color: #fa3939
}

.article__content__textgg i {
    display: inline-block;
    text-align: center;
    font-size: 12px;
    color: #666;
    line-height: 1em;
    border: 1px solid #666;
    border-radius: 2px;
    padding: 2px 3px;
    margin-right: 8px;
    flex-shrink: 0;
    height: 18px;
    box-sizing: border-box
}

.article__content__textgg span {
    font-weight: 600;
    color: #333;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    width: 611px;
    word-break: break-all
}

.article__content__textgg__del {
    color: #ddd;
    cursor: pointer;
    top: 0;
    right: 10px;
    height: 25px;
    line-height: 22px;
    position: absolute
}

.marquee-gg {
    position: relative;
    height: 22px;
    overflow: hidden;
    display: flex
}

.marquee-gg i {
    display: inline-block;
    text-align: center;
    font-size: 12px;
    color: #666;
    line-height: 1em;
    border: 1px solid #666;
    border-radius: 2px;
    padding: 2px 3px;
    margin-right: 8px;
    flex-shrink: 0;
    height: 18px;
    box-sizing: border-box;
    margin-top: 2px
}

.marquee-gg__del {
    color: #ddd;
    cursor: pointer;
    top: 0;
    right: 10px;
    height: 25px;
    line-height: 22px;
    position: absolute
}

.marquee-gg__content {
    display: inline-block;
    width: 611px;
    transition: all .5s ease
}

.marquee-gg__content .article__content__textgg {
    margin: 0
}

.article__content__tuwen-gg {
    display: flex;
    height: 88px;
    padding-bottom: 12px;
    box-sizing: content-box
}

.article__content__tuwen-gg__img {
    height: 88px;
    margin-right: 12px;
    cursor: pointer !important
}

.article__content__tuwen-gg__info {
    position: relative;
    flex: 1;
    height: 100%
}

.article__content__tuwen-gg__info h3 {
    font-size: 18px;
    color: #222;
    line-height: 24px;
    font-weight: 600
}

.article__content__tuwen-gg__info h3:hover {
    color: #FA3839
}

.article__content__tuwen-gg__info--footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    margin: 0 !important
}

.article__content__yyconfig {
    display: flex;
    align-items: center;
    cursor: pointer;
    line-height: 22px;
    margin-bottom: 26px;
    margin-top: -3px;
    position: relative;
    padding-right: 13px
}

.article__content__yyconfig .title {
    margin-bottom: 0
}

.article__content__yyconfig .title:not(.article__content__yyconfig .title.isAd) span {
    width: 655px
}

.article__content__yyconfig.hide {
    display: none
}

.article__content__yyconfig:hover span {
    color: #fa3939;
    border-color: #fa3939
}

.article__content__yyconfig i {
    display: inline-block;
    text-align: center;
    font-size: 12px;
    color: #666;
    line-height: 1em;
    border: 1px solid #666;
    border-radius: 2px;
    padding: 2px 3px;
    margin-right: 8px;
    flex-shrink: 0;
    height: 18px;
    box-sizing: border-box
}

.article__content__yyconfig span {
    font-weight: 600;
    color: #333;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    width: 611px;
    word-break: break-all
}

.article__content__yyconfig__del {
    color: #ddd;
    cursor: pointer;
    top: 0;
    right: 10px;
    height: 25px;
    line-height: 22px;
    position: absolute
}

.normal_article_text_img_ads {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 676px;
    height: 100px;
    position: relative;
    overflow: hidden;
    padding: 0;
    border-radius: 3px;
    background: #f8f8f8;
    margin-bottom: 20px
}

.normal_article_text_img_ads .title {
    margin-bottom: 0
}

.normal_article_text_img_ads:hover span {
    color: #fa3939;
    border-color: #fa3939
}

.normal_article_text_img_ads span {
    font-weight: 600;
    color: #333;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    width: 611px;
    word-break: break-all
}

.normal_article_text_img_ads__del {
    color: #ddd;
    cursor: pointer;
    top: 0;
    right: 16px;
    height: 25px;
    line-height: 22px;
    position: absolute;
    z-index: 20
}

.normal_article_text_img_ads .delete_btn {
    z-index: 2;
    width: 14px;
    height: 14px;
    background-image: url('http://s5.ssl.res.360kuai.com/static/5d71004466d3eebd.svg');
    background-repeat: 14px 14px;
    display: block !important;
    border-radius: 3px;
    top: 6px;
    right: 6px
}

.text_ads_card {
    cursor: pointer;
    margin: 0 !important;
    width: 676px;
    height: 100px;
    position: relative;
    transition: all .2s linear;
    padding: 10px
}

.text_ads_card div {
    margin-bottom: 0 !important
}

.text_ads_card .goods_img {
    width: 144px;
    height: 80px;
    cursor: pointer;
    float: left;
    overflow: hidden;
    border-radius: 3px;
    position: relative
}

.text_ads_card .goods_img i {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-block;
    text-align: center;
    font-size: 12px;
    color: #FFF;
    line-height: 1em;
    box-sizing: border-box;
    padding: 2px 5px;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px
}

.text_ads_card:hover .goods_img {
    overflow: hidden
}

.text_ads_card:hover .goods_img img {
    transform: scale(1.2);
    transition: all .2s ease
}

.text_ads_card__tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff4040;
    font-size: 12px;
    color: #fff;
    border-radius: 2px;
    line-height: 18px;
    height: 18px;
    padding: 0 4px;
    z-index: 1
}

.text_ads_card .right-wrapper {
    position: relative;
    float: right;
    margin: 0;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    width: 504px;
    justify-content: space-between;
    overflow: hidden
}

.text_ads_card .right-wrapper .left_container {
    width: 370px;
    height: 100%
}

.text_ads_card .right-wrapper .left_container .goods_name_con {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    line-height: 25px;
    cursor: pointer;
    width: 100%;
    height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.text_ads_card .right-wrapper .left_container .goods_name_con:hover {
    color: #fa3839
}

.text_ads_card .right-wrapper .left_container .left_box {
    width: 100%;
    height: 20px;
    margin-top: 10px
}

.text_ads_card .right-wrapper .left_container .left_box .ads_source {
    color: #999;
    font-size: 12px;
    font-weight: 400;
    width: 100%;
    text-align: left;
    line-height: 20px;
    height: 20px
}

.text_ads_card .right-wrapper .view_btn {
    width: 108px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 16px;
    color: #fa3839;
    background: inherit;
    border-radius: 18px;
    border: 1px solid #fa3839;
    cursor: pointer;
    margin-right: 6px;
    display: flex;
    align-items: center;
    justify-content: center
}

.text_ads_card .right-wrapper .view_btn img {
    width: 16px;
    height: 16px
}

.text_ads_card .right-wrapper .view_btn .view_btn_icon {
    margin: 0 3px 0 0
}

.text_ads_card .right-wrapper .view_btn:hover {
    opacity: .8
}

.recommend-authlist {
    padding: 14px 0;
    border-bottom: 1px solid #eee
}

.recommend-authlist-title {
    font-size: 18px;
    color: #333;
    line-height: 25px;
    position: relative;
    padding-left: 8px;
    margin-bottom: 8px
}

.recommend-authlist-title::before {
    position: absolute;
    display: block;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    width: 3px;
    height: 16px;
    background-color: #ff3535;
    border-radius: 2px
}

.recommend-authlist .slider {
    width: 100%;
    overflow: hidden;
    position: relative
}

.recommend-authlist .slider .slider-list {
    width: 1000%;
    position: relative;
    transition: left .3s ease-in-out
}

.recommend-authlist .slider-arrow {
    position: absolute;
    z-index: 2;
    cursor: pointer;
    height: 40px;
    width: 22px;
    color: #fff;
    top: 50%
}

.recommend-authlist .slider-arrow.prev {
    left: 0;
    background: url(//p3.ssl.img.360kuai.com/t01b035615516ff4790.png);
    background-size: cover;
    transform: translateY(-50%) rotate(0)
}

.recommend-authlist .slider-arrow.prev:hover {
    background-image: url(//p0.ssl.img.360kuai.com/t012700b49334cc4677.png)
}

.recommend-authlist .slider-arrow.next {
    right: 0;
    background: url(//p3.ssl.img.360kuai.com/t01b035615516ff4790.png);
    background-size: cover;
    transform: translateY(-50%) rotate(180deg)
}

.recommend-authlist .slider-arrow.next:hover {
    background-image: url(//p0.ssl.img.360kuai.com/t012700b49334cc4677.png)
}

.recommend-authlist .slider-arrow.hidden {
    display: none
}

.authlist-item {
    position: relative;
    padding: 15px 8px;
    background: #f7f7f8;
    box-sizing: border-box;
    float: left
}

.authlist-item__close {
    position: absolute;
    top: 3px;
    right: 8px;
    font-size: 17px;
    line-height: 17px;
    color: #d8d8d8;
    cursor: pointer
}

.authlist-item__img {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-radius: 50%;
    border: 1px solid transparent
}

.authlist-item__img__border {
    position: relative
}

.authlist-item__img__border::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 2;
    border: 1px solid rgba(102, 102, 102, 0.1)
}

.authlist-item__img .img__container {
    border-radius: 50%
}

.authlist-item__title,
.authlist-item__desc {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis
}

.authlist-item__title {
    font-size: 15px;
    color: #333;
    line-height: 15px;
    margin-bottom: 6px;
    white-space: nowrap
}

.authlist-item__desc {
    font-size: 12px;
    color: #a6a6a6;
    line-height: 17px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
    height: 34px
}

.authlist-item__follow {
    width: 52px;
    height: 22px;
    background: #fa3939;
    border: 1px solid #fa3939;
    border-radius: 3px;
    margin: 0 auto;
    font-size: 12px;
    color: #fff;
    text-align: center;
    line-height: 22px;
    cursor: pointer;
    box-sizing: border-box
}

.authlist-item__follow.followed {
    background-color: #e8e8e8;
    color: #999;
    border: 1px solid transparent
}

.follow-list__height,
.follow-list__height--hidden {
    max-height: 0
}

.follow-list__height {
    overflow: hidden;
    width: 100%;
    transition: max-height .3s ease-in-out
}

.follow-list__height--show {
    max-height: 240px
}

.read_vip__modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 40px 0;
    width: 364px;
    height: 200px;
    background: #fff;
    border-radius: 5px
}

.read_vip__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 11px;
    height: 11px;
    background: url(//p0.ssl.img.360kuai.com/t0143485b9142155ed8.png) no-repeat center;
    background-size: contain;
    cursor: pointer
}

.read_vip__title {
    padding: 0 2px;
    font-size: 16px;
    color: #222;
    line-height: 30px;
    text-align: center
}

.read_vip__title .text_del {
    text-decoration: line-through
}

.read_vip__title .text_yellow {
    color: #ce994f
}

.read_vip__footer {
    margin-top: 26px;
    text-align: center
}

.read_vip__footer .btn {
    width: 120px;
    height: 34px;
    background: #f4f4f5;
    border-radius: 3px;
    border: none;
    font-size: 14px;
    cursor: pointer
}

.read_vip__footer .btn_cancel {
    color: #333;
    background: #f4f4f5;
    margin-right: 18px
}

.read_vip__footer .btn_confirm {
    color: #6c4612;
    background: linear-gradient(90deg, #f8dfbb 0, #f4bf75 100%);
    background: -webkit-linear-gradient(0deg, #f8dfbb 0, #f4bf75 100%)
}

#article__content,
.detail-content {
    position: relative
}

#article__content .paid__reading,
.detail-content .paid__reading {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 100;
    width: 100%;
    margin-bottom: 0 !important
}

#article__content .paid__reading_hide,
.detail-content .paid__reading_hide {
    position: relative
}

#article__content .paid__reading_hide .jifen__info_tip,
.detail-content .paid__reading_hide .jifen__info_tip {
    display: block;
    margin-bottom: 12px
}

#article__content .paid__reading_unlock,
.detail-content .paid__reading_unlock {
    position: relative
}

#article__content .paid__reading_unlock .mark,
.detail-content .paid__reading_unlock .mark,
#article__content .paid__reading_unlock .paid__reading__btn,
.detail-content .paid__reading_unlock .paid__reading__btn,
#article__content .paid__reading_unlock .paid__reading__tip,
.detail-content .paid__reading_unlock .paid__reading__tip {
    display: none
}

#article__content .paid__reading .mark,
.detail-content .paid__reading .mark {
    width: 100%;
    height: 170px;
    background: linear-gradient(transparent, #fff)
}

#article__content .paid__reading__content,
.detail-content .paid__reading__content {
    background-color: #fff;
    margin-bottom: 0 !important
}

#article__content .paid__reading__content_gg,
.detail-content .paid__reading__content_gg {
    padding-bottom: 10px
}

#article__content .paid__reading__btn,
.detail-content .paid__reading__btn {
    display: block;
    margin: 0 auto 12px;
    width: 140px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: linear-gradient(90deg, #f8dfbb 0, #f4bf75 100%);
    border-radius: 20px;
    font-size: 16px;
    font-weight: 700;
    color: #754e19;
    cursor: pointer
}

#article__content .paid__reading__tip,
.detail-content .paid__reading__tip {
    font-size: 14px;
    line-height: 20px;
    color: #ce994f;
    text-align: center;
    margin-bottom: 0 !important
}

#article__content .paid__reading__detail,
.detail-content .paid__reading__detail {
    padding-top: 14px;
    text-align: center;
    margin-bottom: -14px !important
}

#article__content .paid__reading__item,
.detail-content .paid__reading__item {
    display: inline-block;
    padding: 0 16px;
    margin: 0 7px 14px;
    height: 34px;
    line-height: 34px;
    background: #f5f5f5;
    border-radius: 3px;
    font-size: 16px;
    color: #999;
    text-align: center
}

.read_vip__tip,
.read_vip__tip .read_vip__link {
    color: #fff
}

.read_vip__tip .read_vip__link,
.read_vip__tip .read_vip__link:hover {
    text-decoration: underline
}

.read_vip__tip .read_vip__link:hover {
    color: #fff
}

.jifen__info {
    background-color: #fff;
    text-align: center;
    font-size: 14px;
    color: #999;
    padding-bottom: 12px;
    padding-top: 12px;
    margin-bottom: 0 !important
}

.jifen__info_tip {
    display: block;
    color: #ce994f;
    display: none;
    cursor: pointer
}

.jifen__info_title {
    display: inline-block;
    padding-left: 17px;
    background: url(//p3.ssl.img.360kuai.com/t01cce5f1db10c40c4d.png) no-repeat left center;
    background-size: 11px 15px
}

.jifen__info_item {
    padding: 1px 12px;
    height: 28px;
    line-height: 28px;
    border-radius: 14px;
    background-color: #f5f5f5;
    margin-right: 8px;
    border: 1px solid #f5f5f5;
    cursor: pointer
}

.jifen__info_item_hot {
    padding-left: 27px;
    background: #f5f5f5 url(//p2.ssl.img.360kuai.com/t01d78cfed06c4a9eec.png) no-repeat 8px center;
    background-size: 13px 14px
}

.jifen__info_item:hover {
    color: #754e19;
    background-color: #fff9f1;
    border: 1px solid #f3bb6c
}

.tst {
    margin-top: -2% !important
}

.tst--show {
    margin-top: 0 !important
}

.cpt_gg__wrap {
    display: block;
    width: 190px;
    height: 118px;
    margin: 0 auto 12px;
    position: relative
}

.cpt_gg__wrap_hide .cpt_gg__close,
.cpt_gg__wrap_hide .cpt_gg__img,
.cpt_gg__wrap_hide::after {
    opacity: 0;
    cursor: default
}

.cpt_gg__wrap::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 17px;
    width: 26px;
    height: 14px;
    background: url(//s3.ssl.res.360kuai.com/static/83a904d3bb813d97.svg);
    background-size: cover;
    z-index: 7;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.cpt_gg__btn {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translate(-50%, 0);
    width: 136px;
    height: 34px;
    background: linear-gradient(90deg, #f8dfbb 0, #f4bf75 100%);
    border-radius: 20px;
    border: 0;
    color: #754e19;
    font-weight: 700;
    cursor: pointer
}

.cpt_gg__img {
    transition: all .3s;
    cursor: pointer
}

.cpt_gg__img_wrap {
    position: relative;
    width: 190;
    height: 118px
}

.cpt_gg__img_event {
    width: 100%;
    height: 100%;
    position: absolute
}

.cpt_gg__close {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 14px;
    height: 14px;
    background: url(//s5.ssl.res.360kuai.com/static/5d71004466d3eebd.svg);
    background-size: cover;
    cursor: pointer;
    z-index: 7;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    color: transparent
}

.cpt_gg__tip {
    display: block;
    text-align: center;
    margin-bottom: 30px
}

.cpt_gg__tip_link {
    font-size: 14px;
    color: #ce994f;
    cursor: pointer
}

.read__story_entry {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    margin-bottom: 0 !important
}

.read__story_entry_login_container,
.read__story_entry_hide {
    display: none
}

.read__story_entry_mark {
    margin-bottom: 0 !important;
    display: block !important;
    width: 100%;
    height: 170px;
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0, #fff 100%);
    background: -ms-linear-gradient(rgba(255, 255, 255, 0) 0, #fff 100%);
    background: -o-linear-gradient(rgba(255, 255, 255, 0) 0, #fff 100%);
    background: linear-gradient(rgba(255, 255, 255, 0) 0, #fff 100%)
}

.read__story_entry_body {
    text-align: center;
    padding-bottom: 20px;
    background: #fff;
    margin-bottom: 0 !important
}

.read__story_entry_btn {
    position: relative;
    display: inline-block;
    width: 160px;
    height: 40px;
    background: linear-gradient(90deg, #f8dfbb 0, #f4bf75 100%);
    border-radius: 20px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #754e19;
    margin-bottom: 12px !important;
    cursor: pointer
}

.read__story_entry_btn_discount {
    position: absolute;
    top: 0;
    right: -10px;
    font-weight: 400;
    font-size: 14px;
    transform: translateX(100%);
    color: #999
}

.read__story_entry_desc {
    font-size: 14px;
    color: #999;
    margin-bottom: 0 !important
}

.story__content img,
.read__story_login_container {
    display: none
}

.detail-content__content--normal__content {
    position: relative;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 1px;
    margin: 17px 0 0;
    color: #333
}

.detail-content__content--normal__content h1,
.detail-content__content--normal__content strong {
    font-weight: 700
}

.detail-content__content--normal__content h1 {
    font-size: 18px;
    line-height: 30px;
    color: #000
}

.detail-content__content--normal__content p,
.detail-content__content--normal__content div {
    margin-bottom: 20px
}

.detail-content__content--normal__content p:empty,
.detail-content__content--normal__content div:empty {
    display: none
}

.detail-content__content--normal__content p.editor,
.detail-content__content--normal__content div.editor {
    font-size: 12px;
    color: #a6a6a6;
    text-align: right
}

.detail-content__content--normal__content img {
    max-width: 100%;
    border-radius: 3px
}

.detail-content__content--normal__content .hs_imgdesc {
    display: block;
    font-size: 14px;
    margin: 10px 0 20px;
    text-align: center
}

.detail-content__content--normal__content table {
    width: 100%
}

.detail-content__content--normal__content table th,
.detail-content__content--normal__content table td {
    border: 1px solid #666;
    text-align: center
}

.detail-content__content--normal__content table td p {
    margin-bottom: 0
}

.detail-content__content--normal__content div[id^='video-player-'] div {
    margin-bottom: auto;
    box-sizing: border-box
}

.detail-content__content--normal__content div[id^='video-player-'] div:empty {
    display: block
}

.detail-content__content--normal__content div[id^='video-player-'] div .chimee-controlbar__play--next,
.detail-content__content--normal__content div[id^='video-player-'] div .chimee-controlbar__autonext,
.detail-content__content--normal__content div[id^='video-player-'] div .chimee-controlbar__setting {
    display: none
}

.detail-content__content--normal__content div[id^='video-player-'] div .chimee-controlbar__volume__progress__point {
    margin-bottom: -10px
}

.detail-content__content--normal__content.story__content img,
.detail-content__content--normal__content.story__content p>br {
    display: none
}

.detail-content__content--normal__content .article__content__img {
    margin: 20px auto
}

.kch-tip,
.ai-tips {
    margin-bottom: 20px;
    line-height: 32px;
    font-size: 12px
}

.kch-tip {
    color: #bdbdbd
}

.ai-tips {
    padding-left: 24px;
    color: #4B75E1;
    background: url(//p5.ssl.img.360kuai.com/t110b9a930119ad99e209b4fe22.png) no-repeat left center;
    background-size: 18px 18px
}

.article-share {
    color: #999;
    font-size: 12px;
    line-height: 26px;
    vertical-align: middle
}

.article-share span,
.article-share__item {
    height: 32px;
    vertical-align: middle;
    cursor: pointer
}

.article-share span {
    line-height: 32px;
    margin-top: -2px
}

.article-share__item {
    position: relative;
    display: inline-block;
    padding-top: 4px;
    background-size: 26px 26px
}

.article-share__item .share-icon {
    display: inline-block;
    background-size: contain
}

.article-share__item.wechat {
    position: relative
}

.article-share__item.wechat .share-icon {
    width: 20px;
    height: 17px;
    margin-right: 30px;
    margin-left: 10px;
    background-image: url(//p0.ssl.img.360kuai.com/t01e0b2a71403e3ac07.png)
}

.article-share__item.weibo .share-icon {
    width: 20px;
    height: 17px;
    margin-right: 30px;
    background-image: url(//p2.ssl.img.360kuai.com/t01e1c57241bb3d1e09.png)
}

.article-share__item.qzone .share-icon {
    width: 18px;
    height: 17px;
    background-image: url(//p3.ssl.img.360kuai.com/t01495bd305ad86fc95.png)
}

.article-share__item.qq .share-icon {
    width: 16px;
    height: 18px;
    margin-right: 31px;
    background-image: url(//p5.ssl.img.360kuai.com/t01e52b7268b228b322.png)
}

.article-share__dialog {
    display: none;
    z-index: 9999
}

.article-share__dialog.wechat.show {
    display: block
}

.article-share__dialog.wechat .share-to-wechat__qrcode {
    position: absolute;
    top: 30px;
    left: -30px;
    z-index: 200
}

.article-share__dialog.wechat .share-to-wechat__qrcode:hover {
    display: block
}

.article-share__dialog.wechat .share-to-wechat__qrcode__content {
    width: 108px;
    height: 128px;
    background: #fff;
    padding: 14px 14px 11px;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    box-sizing: border-box;
    text-align: center
}

.article-share__dialog.wechat .share-to-wechat__qrcode svg {
    width: 80px;
    height: 80px
}

.article-share__dialog.wechat .share-to-wechat__qrcode p.desc {
    font-size: 12px;
    color: #555;
    line-height: 16px;
    margin-top: 7px
}

.g4 {
    position: relative
}

.g4__close {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: url(//s5.ssl.res.360kuai.com/static/5d71004466d3eebd.svg);
    background-size: cover;
    cursor: pointer;
    border-radius: 3px;
    z-index: 7
}

.tagGG__container {
    margin-top: 20px;
    padding: 4px 0 0 4px;
    background: #f6f6f6;
    display: flex;
    flex-wrap: wrap;
    max-height: 100px;
    overflow: hidden;
    position: relative
}

.tagGG__item {
    display: inline-block;
    flex: auto;
    height: 46px;
    line-height: 46px;
    min-width: 100px;
    text-align: center;
    padding: 0 14px;
    margin: 0 4px 4px 0;
    color: #333;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    font-size: 18px
}

.tagGG__item:hover {
    color: #FFF
}

.tagGG__item:hover:nth-child(1) {
    background-color: #829EDA !important
}

.tagGG__item:hover:nth-child(2) {
    background-color: #5BCAC1 !important
}

.tagGG__item:hover:nth-child(3) {
    background-color: #7DCC64 !important
}

.tagGG__item:hover:nth-child(4) {
    background-color: #CAC061 !important
}

.tagGG__item:hover:nth-child(5) {
    background-color: #DCB269 !important
}

.tagGG__item:hover:nth-child(6) {
    background-color: #E6A472 !important
}

.tagGG__item:hover:nth-child(7) {
    background-color: #E97B7B !important
}

.tagGG__item:hover:nth-child(8) {
    background-color: #A493E5 !important
}

.tagGG__item:hover:nth-child(9) {
    background-color: #D984D5 !important
}

.tagGG__item:hover:nth-child(10) {
    background-color: #6BACDC !important
}

.tagGG__item--rank {
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: top right
}

.tagGG__item--rank:nth-child(1) {
    background-image: url(//p3.ssl.img.360kuai.com/t01824740001fcbe4e1.png)
}

.tagGG__item--rank:nth-child(2) {
    background-image: url(//p4.ssl.img.360kuai.com/t013a341ebeab80856a.png)
}

.tagGG__item--rank:nth-child(3) {
    background-image: url(//p0.ssl.img.360kuai.com/t0152c164c522a9900e.png)
}

.tagGG__item--fire {
    position: relative
}

.tagGG__item--fire::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 17px;
    top: 4px;
    right: -16px;
    background-size: 12px 17px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(//p0.ssl.img.360kuai.com/t019e8931591e2ebbbf.png)
}

.tagGG__icon,
.tagGG__close {
    position: absolute;
    top: 4px;
    height: 14px
}

.tagGG__icon {
    left: 4px;
    width: 26px;
    background: url(//s3.ssl.res.360kuai.com/static/83a904d3bb813d97.svg);
    border-radius: 2px
}

.tagGG__close {
    right: 4px;
    width: 14px;
    background: url(//s5.ssl.res.360kuai.com/static/5d71004466d3eebd.svg);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    z-index: 7;
    border-radius: 3px
}

.content__bottom__showcase--gg {
    color: red
}

.content__bottom__showcase--gg .kzx__showcase {
    position: relative;
    overflow: hidden
}

.content__bottom__showcase--gg .kzx__showcase--normal ul li {
    margin-top: 20px
}

.content__bottom__showcase--gg .kzx__showcase--normal ul li:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 26px;
    height: 14px;
    background: url(//s3.ssl.res.360kuai.com/static/83a904d3bb813d97.svg) rgba(0, 0, 0, 0.2);
    background-size: cover;
    border-bottom-left-radius: 3px !important;
    border-top-left-radius: 3px !important
}

.content__bottom__showcase--gg .kzx__showcase--normal ul li:last-of-type:after {
    display: none
}

.content__bottom__showcase--gg .kzx__showcase--normal:after {
    width: 26px;
    height: 14px;
    background: url(//s3.ssl.res.360kuai.com/static/83a904d3bb813d97.svg) rgba(0, 0, 0, 0.2);
    background-size: cover;
    border-bottom-left-radius: 3px !important;
    border-top-left-radius: 3px !important;
    right: 13px;
    top: 20px
}

.content__bottom__showcase--gg .content__title__bottom--close {
    position: absolute;
    top: 20px;
    right: 1px;
    width: 12px;
    height: 14px;
    background: url(//s5.ssl.res.360kuai.com/static/5d71004466d3eebd.svg) rgba(0, 0, 0, 0.25);
    border-top-right-radius: 3px;
    background-size: cover;
    cursor: pointer;
    z-index: 1
}

.content__bottom__showcase--gg .kzx__showcase__block {
    border-radius: 3px !important;
    overflow: hidden
}

.detail__top__title__under {
    position: relative;
    width: 100%;
    height: 103px;
    margin-top: 20px;
    font-size: 0;
    overflow: hidden
}

.detail__top__title__under .detail__top__title__under--img {
    width: 100%;
    min-height: 100%
}

.detail__top__title__under .detail__top__title__under--close {
    position: absolute;
    right: 2px;
    top: 2px;
    width: 14px;
    height: 14px;
    background: url(//s2.ssl.res.360kuai.com/static/3be34bd374b81b51.svg) rgba(0, 0, 0, 0.2);
    background-size: cover;
    cursor: pointer;
    z-index: 1
}

.detail__top__title__under .detail__top__title__under--txt {
    line-height: 14px;
    width: 26px;
    position: absolute;
    left: 4px;
    top: 4px;
    background: url(//s3.ssl.res.360kuai.com/static/83a904d3bb813d97.svg) rgba(0, 0, 0, 0.2)
}

.detail_article_title_bottom_config {
    display: flex
}

.detail_article_title_bottom_config:not(:empty) {
    margin-top: 20px;
    margin-bottom: 7px
}

.detail_article_title_bottom_config .left {
    overflow: hidden;
    border-radius: 3px;
    flex-shrink: 0;
    position: relative
}

.detail_article_title_bottom_config_item {
    display: flex;
    background: #f6f6f6;
    border-radius: 3px;
    flex-basis: calc((100% - 12px) / 2);
    cursor: pointer
}

.detail_article_title_bottom_config_item:first-child {
    margin-right: 12px
}

.detail_article_title_bottom_config_item .gg {
    display: inline-block;
    border-radius: 3px;
    overflow: hidden;
    width: 26px;
    height: 14px;
    position: absolute;
    top: 3px;
    right: 3px;
    background-image: url("https://s3.ssl.res.360kuai.com/static/83a904d3bb813d97.svg")
}

.detail_article_title_bottom_config_item .img__container img {
    width: 100%;
    object-fit: cover;
    object-position: left
}

.detail_article_title_bottom_config .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    position: relative;
    font-family: PingFang SC;
    font-size: 16px;
    color: #222;
    line-height: 24px;
    padding: 8px 13px 0 16px
}

.detail_article_title_bottom_config .right .footer {
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px
}

.detail_article_title_bottom_config .right .source {
    text-align: left;
    color: #A6A6A6;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: 12px
}

.detail_article_title_bottom_config .right p {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.detail_article_title_bottom_config .right p:hover {
    color: #fa3939
}

.detail_article_title_bottom_config .close {
    right: 13px;
    bottom: 13px;
    color: #ddd;
    font-size: 17px;
    line-height: 24px
}

.detail_article_title_bottom_config .close:hover {
    color: #999
}

.detail-content__content--normal {
    position: relative
}

.detail-content__content--normal__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.detail-content__content--normal__bottom .empty {
    flex: 1
}

.detail-content__content--normal.has-simple-zmt .g4 {
    margin-top: 10px !important
}

.detail-content__content--normal.has-simple-zmt .article__title {
    margin-bottom: 8px !important
}

.detail-content--error {
    text-align: center;
    color: #666;
    font-size: 14px
}

.detail-content--error img {
    width: 180px;
    padding-bottom: 20px
}

.detail-content--error.network_err img {
    width: 480px
}

.content-inview-top,
.content-inview-bottom {
    height: calc(100vh - 65px);
    max-height: 100%;
    width: 10px;
    pointer-events: none;
    opacity: 0;
    position: absolute;
    z-index: 10
}

.content-inview-top {
    top: 0
}

.content-inview-bottom {
    bottom: 0
}

.detail-content__content--recommend__content {
    position: relative;
    max-height: 166px;
    overflow: hidden;
    font-size: 14px;
    color: #999;
    line-height: 22px
}

.detail-content__content--recommend__content.config__article {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 30px
}

.detail-content__content--recommend__content:hover {
    color: #666;
    cursor: pointer
}

.detail-content__content--recommend__content h1,
.detail-content__content--recommend__content strong {
    font-weight: 700
}

.detail-content__content--recommend__content h1 {
    font-size: 18px;
    line-height: 30px;
    color: #000
}

.detail-content__content--recommend__content p,
.detail-content__content--recommend__content div {
    margin-bottom: 20px
}

.detail-content__content--recommend__content p:empty,
.detail-content__content--recommend__content div:empty {
    display: none
}

.detail-content__content--recommend__content p.editor,
.detail-content__content--recommend__content div.editor {
    font-size: 12px;
    color: #a6a6a6;
    text-align: right
}

.detail-content__content--recommend__content img {
    display: none !important
}

.detail-content__content--recommend__content table {
    width: 100%
}

.detail-content__content--recommend__content table th,
.detail-content__content--recommend__content table td {
    border: 1px solid #666;
    text-align: center
}

.detail-content__content--recommend__content table td p {
    margin-bottom: 0
}

.detail-content__content--recommend {
    padding: 22px 24px;
    background-color: #F8F8F8
}

.detail-content__content--recommend__content--wrapper {
    position: relative;
    margin-top: 17px
}

.detail-content__content--recommend__mask {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(rgba(255, 255, 255, 0.001) 0, #fff);
    user-select: none
}

.detail-content__content--recommend__mask.config__article__mask,
.detail-content__content--recommend__expand {
    cursor: pointer
}

.detail-content__content--recommend__expand {
    width: 140px;
    height: 40px;
    margin: 0 auto;
    font-size: 16px;
    color: #fa3939;
    line-height: 40px;
    text-align: center;
    border-radius: 20px;
    background-color: #fff2f2
}

.recommend-title-lite {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    color: #222;
    cursor: pointer
}

.recommend-title-lite:hover {
    color: #fa3939
}

.recommend-article-tip {
    color: #666;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    margin-bottom: 20px
}

.recommend-article-tip::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 24px;
    margin-right: 6px;
    vertical-align: middle;
    background-image: url(https://p5.ssl.img.360kuai.com/t110b9a93013fd68135f7fa5aae.png);
    background-position: no-repeat;
    background-size: contain
}

.recommend-artical-footer {
    display: flex;
    justify-content: space-between;
    color: #999;
    margin-top: 20px
}

.recommend-artical-btn {
    display: block;
    font-size: 14px;
    font-weight: 600;
    height: 24px;
    line-height: 24px;
    padding: 0 8px;
    border-radius: 2px;
    color: #fff;
    background-color: #3c3c3c
}

.recommend-artical-btn:hover {
    background-color: #fa3939
}

.article-bottom-zan {
    position: relative;
    width: 100%;
    padding: 20px auto 40px
}

.article-bottom-zan.animation .like .icon {
    background-color: #fff2f2
}

.article-bottom-zan.animation .like .icon .hand {
    background: url(//p4.ssl.img.360kuai.com/t011fe4471ac47c249b.png) no-repeat;
    background-size: contain
}

.article-bottom-zan.animation .like .icon .count {
    color: #fb3e3d
}

.article-bottom-zan.animation .effect {
    position: absolute;
    width: 73px;
    height: 48px;
    left: calc(50% - 37px);
    top: -20px;
    transform: translateY(-30px);
    background: url(//p0.ssl.img.360kuai.com/t0108acd298ca99959b.png) no-repeat;
    background-size: contain;
    opacity: 0;
    transition: all 1.5s ease-out
}

.article-bottom-zan .like {
    width: 100%;
    margin: 0 auto;
    text-align: center
}

.article-bottom-zan .like .icon {
    margin: 0 auto;
    width: 68px;
    height: 68px;
    padding-top: 14px;
    border-radius: 50%;
    background-color: #f0f1f4;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer
}

.article-bottom-zan .like .icon .hand {
    position: relative;
    display: block;
    top: 25%;
    margin: 0 auto;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    background: url(//p5.ssl.img.360kuai.com/t01008d3d7a0a1ad146.png) no-repeat;
    background-size: contain
}

.article-bottom-zan .like .icon .hand.empty {
    top: 35%
}

.article-bottom-zan .like .icon .count {
    display: block;
    margin-top: 3px;
    color: #333
}

.article-bottom-zan .like .tips {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: #999
}

.tag__cloud__wrapper {
    border: 1px solid #e6e6e6;
    overflow: hidden;
    margin-top: 40px;
    width: 676px;
    margin-left: auto;
    margin-right: auto
}

.tag__cloud__wrapper.hide {
    opacity: 0;
    border: 0;
    height: 0;
    margin: 0
}

.article--bottom__g4gg {
    text-align: center;
    margin-top: 40px;
    white-space: nowrap
}

.article--bottom__g4gg .shopwindow--square {
    display: inline-block
}

.article--bottom__g4gg .shopwindow--square:nth-child(2) {
    margin: 0 12px
}

.article-bottom-gg-xxl {
    display: flex;
    justify-content: center
}

.article-bottom-gg-xxl__item {
    width: 216px;
    position: relative;
    background-color: #F8F8F8;
    border-radius: 3px;
    overflow: hidden;
    cursor: default
}

.article-bottom-gg-xxl__item:nth-child(2) {
    margin: 0 16px
}

.article-bottom-gg-xxl__item__img,
.article-bottom-gg-xxl__item__title {
    cursor: pointer;
    overflow: hidden
}

.article-bottom-gg-xxl__item__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    height: 48px;
    margin: 12px 16px;
    text-align: left;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal
}

.article-bottom-gg-xxl__item__title:hover {
    color: #FA3839
}

.article-bottom-gg-xxl__item__tag {
    font-size: 12px;
    color: #999;
    text-align: left;
    margin: 12px 16px
}

.article-bottom-gg-xxl__item__close {
    position: absolute;
    top: 2px;
    right: 2px;
    height: 14px;
    border-radius: 4px;
    overflow: hidden
}

.article-bottom-gg-xxl__item__close span {
    float: left;
    width: 27px;
    height: 14px;
    background-color: rgba(0, 0, 0, 0.4);
    line-height: 14px;
    color: #FFF;
    font-size: 10px
}

.article-bottom-gg-xxl__item__close i {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: rgba(0, 0, 0, 0.4) url(//s5.ssl.res.360kuai.com/static/5d71004466d3eebd.svg) no-repeat center center;
    background-size: 14px 14px;
    cursor: pointer
}

.db-recommend {
    width: 100%;
    padding: 20px 24px;
    margin-top: 10px;
    background: #fff;
    border-radius: 3px
}

.db-recommend__title {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    line-height: 20px;
    font-weight: 700;
    margin-bottom: 20px
}

.db-recommend__title--icon {
    color: #999;
    font-size: 12px;
    padding-right: 16px;
    background: url(https://p0.ssl.img.360kuai.com/t0186ce1c9d36b0ca1e.png) no-repeat center right;
    background-size: 16px;
    cursor: pointer
}

.db-recommend__content {
    display: flex;
    justify-content: space-between
}

.db-recommend .live-card {
    width: 160px;
    height: 284px;
    position: relative;
    cursor: pointer;
    border-radius: 4px;
    z-index: 1;
    overflow: hidden
}

.db-recommend .live-card:hover .live-card__play {
    display: block
}

.db-recommend .live-card__play {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4) url(https://p5.ssl.img.360kuai.com/t01d419cdeccd13bc83.png) no-repeat center center;
    background-size: 27px 34px
}

.db-recommend .live-card__icon {
    position: absolute;
    top: 3px;
    right: 3px;
    padding: 3px;
    border-radius: 3px;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.4)
}

.db-recommend .live-card__zmt {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    color: #fff;
    padding: 0 8px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.9) 100%);
    z-index: 1
}

.db-recommend .live-card__zmt .img__container {
    overflow: inherit
}

.db-recommend .live-card__zmt img {
    border-radius: 50%
}

.db-recommend .live-card__zmt__name {
    margin-left: 8px;
    font-size: 14px;
    font-weight: 700
}

.db-recommend .live-card__zmt__name:hover {
    color: #fa3939
}

.db-recommend .novel-card {
    cursor: pointer;
    overflow: hidden;
    flex: 1
}

.db-recommend .novel-card .img__container {
    border-radius: 4px
}

.db-recommend .novel-card__title {
    padding: 8px 0;
    font-size: 16px;
    color: #222;
    font-weight: 700
}

.db-recommend .novel-card__title:hover {
    color: #fa3939
}

.db-recommend .novel-card__hot {
    padding-left: 18px;
    background: url(https://p4.ssl.img.360kuai.com/t01ff99ca4f19887467.png) no-repeat left center;
    background-size: 14px 14px;
    font-size: 14px;
    color: #999
}

.db-recommend .game-card {
    position: relative;
    cursor: pointer
}

.db-recommend .game-card img {
    border-radius: 5px;
    cursor: pointer
}

.db-recommend .game-card__title {
    width: 330px;
    height: 26px;
    line-height: 26px;
    font-size: 18px;
    color: #222;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    font-weight: 400;
    margin-top: 8px;
    transition: all .2s
}

.db-recommend .game-card__title:hover {
    color: #fa3939
}

.db-recommend .game-card__people {
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #999;
    margin-top: 4px
}

.db-recommend .game-card__time {
    padding: 0 4px;
    height: 18px;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 2px;
    position: absolute;
    right: 10px;
    top: 157px;
    font-weight: 700;
    font-size: 12px;
    color: #fff
}

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

.detail-content__content {
    background: #fff;
    border-radius: 3px
}

.detail-content__recommend--wrapper {
    background: #fff;
    border-radius: 3px
}

.detail-content__bottom {
    background: #fff;
    padding-bottom: 50px;
    border-radius: 3px
}

.cmmts__avatar .verify-img {
    height: auto
}

.ui-truncate-text-one-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block
}

.ui-truncate-text-multiple-line {
    --lineclamp: 1;
    display: -webkit-box;
    -webkit-line-clamp: var(--lineClamp);
    line-clamp: var(--lineClamp);
    -webkit-box-orient: vertical;
    overflow: hidden
}

.article-scroll-indicator {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none
}

.article-scroll-indicator__body {
    opacity: 0;
    transform: translateY(100%);
    transition: all 300ms ease-in;
    height: 100%;
    padding-right: 46px;
    padding-left: 40px;
    font-size: 16px;
    display: flex;
    align-items: center
}

.article-scroll-indicator.is-active .article-scroll-indicator__body {
    transform: translateY(0);
    opacity: 1
}

.article-scroll-indicator.is-active {
    pointer-events: initial
}

.article-scroll-indicator .next-article {
    white-space: nowrap
}

.indicator-current-article {
    color: #999;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    margin-right: 40px
}

.next-article-tip {
    display: inline-block;
    color: #FA3939;
    background: #FDF2F2;
    font-size: 14px;
    height: 24px;
    line-height: 24px;
    padding: 0 8px;
    border-radius: 2px;
    margin-right: 10px
}

.head-recommend-title {
    display: inline-block;
    vertical-align: middle;
    border-bottom: 1px solid #333;
    padding-bottom: 2px
}

.next-article-btn {
    position: fixed;
    bottom: 20px;
    left: calc(50vw + 582px + 20px);
    width: 40px;
    border: 1px solid #E8E8E8;
    border-radius: 2px;
    padding: 12px 0;
    background-color: #fff;
    z-index: 10
}

.next-article-btn:active {
    opacity: .5
}

.next-article-btn:hover {
    background-color: #F8F8F8
}

.next-article-btn i {
    display: block;
    text-align: center;
    margin-bottom: 4px
}

.next-article-btn .icon-arrow-right {
    color: #222;
    transform: rotate(90deg);
    margin: 10px auto 0;
    transform-origin: center
}

.bkg-block {
    position: absolute;
    cursor: pointer
}

.bkg-block img {
    width: 100%;
    height: 100%
}

.bkg-close {
    position: absolute;
    right: 8px;
    top: 8px
}

.bkg-close :first-child {
    float: left;
    width: 30px;
    height: 20px;
    background: url(//p3.ssl.img.360kuai.com/t01b9cbfa7a6894d8e6.png);
    background-size: cover
}

.bkg-close :last-child {
    cursor: pointer;
    float: left;
    margin-left: 2px;
    width: 20px;
    height: 20px;
    background: url(//p2.ssl.img.360kuai.com/t01a0d707aac93a0432.png);
    background-size: cover
}

.full-screen__pic__zan {
    position: absolute;
    top: 50%;
    right: 85px;
    cursor: pointer;
    transform: translateY(-50%);
    z-index: 3;
    padding: 12px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.102)
}

.full-screen__pic__zan.isStatic {
    opacity: .7
}

.full-screen__pic__zan--zan {
    display: block;
    width: 40px;
    height: 40px;
    background: url(//p4.ssl.img.360kuai.com/t01d957718050966f83.png) no-repeat center;
    background-size: contain
}

.full-screen__pic__zan.active .full-screen__pic__zan--zan {
    background: url(//p0.ssl.img.360kuai.com/t01f1a6b0bb3715b353.png) no-repeat center;
    background-size: contain
}

.full-screen__pic__zan.animate .full-screen__pic__zan--zan {
    transform-origin: -16% 66%;
    animation: like .7s forwards
}

.full-screen__pic__zan.animate .full-screen__pic__zan--animate {
    position: absolute;
    top: -4px;
    left: 16px
}

.full-screen__pic__zan.animate .full-screen__pic__zan--animate span {
    position: absolute;
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(//p4.ssl.img.360kuai.com/t017c1fcaa737120215.png) no-repeat center;
    background-size: contain;
    transform: translate(0, 0) scale(0) rotate(0);
    animation: heartMove 1.5s ease-in 1 forwards
}

.full-screen__pic__zan.animate .full-screen__pic__zan--animate span.heart1 {
    animation-delay: 0s
}

.full-screen__pic__zan.animate .full-screen__pic__zan--animate span.heart2 {
    animation-delay: .3s
}

.full-screen__pic__zan.animate .full-screen__pic__zan--animate span.heart3 {
    animation-delay: .8s
}

@keyframes heartMove {
    0% {
        transform: translate(0, 0) scale(0.3) rotate(0)
    }

    33% {
        transform: translate(15px, -40px) scale(1) rotate(30deg);
        opacity: .66
    }

    66% {
        transform: translate(15px, -60px) scale(0.7) rotate(-30deg);
        opacity: .33
    }

    100% {
        transform: translate(10px, -90px) scale(0) rotate(-30deg);
        opacity: 0
    }
}

@keyframes like {

    0%,
    to {
        transform: rotate(0deg);
        animation-timing-function: ease
    }

    20% {
        transform: rotate(-20deg);
        animation-timing-function: cubic-bezier(0.66, 0, 0.34, 1)
    }

    48% {
        transform: rotate(8deg);
        animation-timing-function: ease-in-out
    }

    75% {
        transform: rotate(-1deg);
        animation-timing-function: ease
    }
}

.detail-content__content--normal__content img {
    cursor: url('https://s3.ssl.res.360kuai.com/static/ef8b90d3f65bc2be.svg'), auto
}

.full-screen__pic.swiper {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
    z-index: 9999
}

.full-screen__pic.swiper.show,
.full-screen__pic.swiper .swiper-slide img {
    display: block
}

.full-screen__pic.swiper .swiper-slide img {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 85%;
    transform: translate(-50%, -50%)
}

.full-screen__pic.swiper .swiper-pagination {
    color: #999
}

.full-screen__pic.swiper .swiper-pagination .swiper-pagination-current {
    color: #f0ffff;
    font-size: 28px;
    line-height: 24px
}

.full-screen__pic.swiper .swiper-pagination .swiper-pagination-total {
    font-size: 16px;
    margin-right: 14px
}

.full-screen__pic.swiper .close-controller {
    position: absolute;
    top: 30px;
    right: 30px;
    cursor: pointer;
    z-index: 3
}

.full-screen__pic.swiper .swiper-button-next,
.full-screen__pic.swiper .swiper-button-prev {
    color: #fff;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer
}

.full-screen__pic.swiper .swiper-button-next:focus,
.full-screen__pic.swiper .swiper-button-prev:focus {
    outline: none
}

.full-screen__pic.swiper .swiper-button-next::after,
.full-screen__pic.swiper .swiper-button-prev::after {
    font-size: 14px
}

.full-screen__pic.swiper .swiper-button-next::after {
    margin-left: 2px
}

.full-screen__pic.swiper .swiper-button-prev::after {
    margin-left: -2px
}

.article-skeleton {
    display: flex;
    justify-content: center;
    box-sizing: border-box
}

.article-skeleton .left-area {
    width: 340px;
    margin-right: 20px;
    margin-top: -10px
}

.article-skeleton .left-area .card {
    display: flex;
    align-items: center;
    margin-bottom: 20px
}

.article-skeleton .left-area .card .image-skeleton {
    margin-right: 10px
}

.article-skeleton .left-area .card .text-skeleton {
    flex: 1
}

.article-skeleton .left-area .card .text-skeleton .text-skeleton-item {
    margin-bottom: 10px
}

.article-skeleton .left-area .card .text-skeleton>div {
    margin-bottom: 5px
}

.article-skeleton .center-area {
    width: 676px;
    margin-left: 40px;
    margin-right: 20px
}

.article-skeleton .center-area .title-skeleton {
    margin-bottom: 20px
}

.article-skeleton .center-area .title-skeleton .title-skeleton-text {
    margin-bottom: 10px
}

.article-skeleton .center-area .avatar-section {
    display: flex;
    align-items: center;
    margin-bottom: 20px
}

.article-skeleton .center-area .avatar-section .avatar-skeleton {
    margin-right: 15px
}

.article-skeleton .center-area .content-section,
.article-skeleton .center-area .content-section .image-skeleton-container {
    margin-bottom: 20px
}

.article-skeleton .center-area .content-section .image-skeleton-container {
    display: flex;
    align-items: center
}

.article-skeleton .center-area .content-section .image-skeleton-container .image-skeleton {
    margin-right: 20px
}

.article-skeleton .center-area .content-section .text-skeleton {
    margin-bottom: 10px
}

.article-skeleton .center-area .content-section .large-image-skeleton {
    height: 150px
}

.article-skeleton .right-area {
    width: 108px;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: start
}

.article-skeleton .right-area .like-item {
    margin-bottom: 40px
}

.error-component-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%
}

.error-component-wrapper .error-component-control__wrapper {
    position: fixed;
    top: 14px;
    right: 0
}

.error-component-wrapper .error-img {
    width: 240px;
    height: 140px;
    margin-bottom: 15px
}

.error-component-wrapper .error-tip {
    font-size: 12px;
    color: #999;
    margin-bottom: 18px
}

.error-component-wrapper .error-reload {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 142px;
    height: 34px;
    background: #fa3939;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
    line-height: 22px;
    cursor: pointer
}

.centerY {
    top: 50%;
    transform: translateY(-50%)
}

.centerX {
    left: 50%;
    transform: translateX(-50%)
}

.center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%)
}

.dislike-modal {
    display: none;
    width: 202px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0 3px 8px 0, rgba(0, 0, 0, 0.03) 0 0 0 1px;
    position: absolute;
    z-index: 99
}

.dislike-modal-top {
    display: block;
    bottom: calc(100% + 8px)
}

.dislike-modal-bottom {
    display: block;
    bottom: unset;
    top: calc(100% + 8px)
}

.dislike-modal h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding: 12px 14px 8px;
    cursor: default
}

.dislike-modal h3 span:first-child {
    font-size: 12px;
    color: #999;
    line-height: 12px
}

.dislike-modal h3 span:last-child {
    display: inline-block;
    width: 14px;
    height: 14px;
    cursor: pointer;
    background-size: contain;
    background-image: url("https://p0.ssl.img.360kuai.com/t019c66913ecea639c2.png")
}

.dislike-modal ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.dislike-modal ul li {
    padding: 12px 14px;
    width: 100%;
    box-sizing: border-box
}

.dislike-modal ul li:not(:last-child) {
    border-bottom: 1px solid #f4f4f5
}

.dislike-modal ul li>span {
    font-size: 12px;
    color: #999;
    line-height: 12px
}

.dislike-modal ul li:last-child,
.dislike-modal ul li:first-child {
    cursor: pointer
}

.dislike-modal ul li:hover {
    background: #f4f4f5
}

.dislike-modal ul .tags-container {
    margin-top: 8px
}

.dislike-modal ul li p {
    font-size: 14px;
    color: #333;
    line-height: 14px;
    margin-bottom: 8px
}

.dislike-modal ul li div.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row
}

.dislike-modal ul li div.top p {
    margin-bottom: 0
}

.dislike-modal ul li.horizatal,
.dislike-modal ul li.vertical {
    position: relative;
    padding-bottom: 2px
}

.dislike-modal ul li.horizatal:hover,
.dislike-modal ul li.vertical:hover {
    background: #fff
}

.dislike-modal ul li.horizatal .collapse,
.dislike-modal ul li.vertical .collapse {
    top: 16px;
    right: 14px
}

.dislike-modal ul li.horizatal:hover {
    background: #f4f4f5;
    cursor: pointer
}

.dislike-modal ul li.vertical {
    padding-top: 0
}

.dislike-modal ul li.vertical p {
    padding-top: 12px
}

.dislike-modal ul li.vertical p:hover {
    cursor: pointer
}

.dislike-modal .tags-container.list {
    display: flex;
    flex-wrap: wrap
}

.dislike-modal .tags-container span {
    display: block;
    font-size: 12px;
    color: #999;
    line-height: 16px;
    margin-bottom: 10px
}

.dislike-modal .tags-container span.item {
    display: inline-block;
    padding: 5px 8px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #333;
    line-height: 12px;
    background-color: #f4f4f5;
    cursor: pointer;
    border-radius: 2px
}

.dislike-modal .tags-container span.item:hover {
    background: #fff2f2;
    color: #fa3939
}

.dislike-modal .collapse {
    display: inline-block;
    position: absolute;
    width: 9px;
    height: 6px;
    background-image: url("https://p4.ssl.img.360kuai.com/t017c1a47549ad68b79.png");
    cursor: pointer;
    background-size: 100% 100%
}

.dislike-modal .collapse.expand {
    transform: rotate(180deg)
}

.dislike-modal .author {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

.card__meta .dislike-modal-wrapper .dislike-modal {
    right: -5px;
    top: 26px
}

.card__meta .dislike-modal-wrapper .dislike-modal-top {
    top: unset;
    bottom: calc(100% + 8px)
}

.article__lose--interest {
    position: relative
}

.article__lose--interest .dislike-modal,
.content__meta__btns .dislike-modal {
    left: -70px
}

.content__meta__btns .dislike-modal {
    box-shadow: rgba(0, 0, 0, 0.1) 0 3px 8px 0, rgba(0, 0, 0, 0.03) 0 0 0 1px
}

.content__meta__btns ul {
    padding-left: 0
}

.content__meta__btns li {
    list-style: none
}

.content__meta__btns span {
    display: inherit
}

.card a {
    color: #A6A6A6;
    text-decoration: none
}

.card__meta {
    color: #A6A6A6;
    vertical-align: middle;
    margin-right: 0;
    letter-spacing: .5px;
    font-size: 12px
}

.card__info {
    font-size: 12px;
    line-height: 18px
}

.card__info-comment,
.card__info-like,
.card__info-from {
    margin-right: 10px
}

.card__info-from {
    cursor: pointer
}

.card__info-time {
    font-size: 12px;
    color: #a6a6a6;
    margin: 0 10px 0 0
}

.card__info-tag {
    line-height: 1em;
    margin-right: 10px;
    padding: 2px 3px;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    cursor: auto
}

.card__info-tag[data-tag=tg] {
    color: #acacac
}

.card__info-playcnt {
    margin-right: 10px
}

.card__info>*+* {
    margin-left: 0
}

.card__operate {
    overflow: hidden
}

.card__operate__wrapper {
    position: relative
}

.card__operate:hover .card__del {
    display: none;
    cursor: pointer
}

.card__operate:hover .card__del--hover {
    transform: translateX(0);
    opacity: 1;
    cursor: pointer
}

.card__del {
    color: #ddd;
    font-size: 17px;
    line-height: 17px
}

.card__del--hover {
    box-sizing: border-box;
    width: 60px;
    display: inline-block;
    transform: translateX(70px);
    opacity: 0;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #FA3939;
    background-color: #FFE6E6;
    border-radius: 3px;
    transition: transform .5s
}

.card__del--hover.visible {
    transform: translateX(0);
    opacity: 1
}

.dislike-modal-wrapper.is-bottom .dislike-modal-bottom {
    transform: translateY(-100%)
}

.card__title {
    font-weight: 700;
    line-height: 24px
}

.card__title a {
    width: 100%;
    height: 100%;
    color: #222;
    font-size: 16px;
    text-decoration: none;
    letter-spacing: .5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    cursor: pointer
}

.card__title a:hover {
    color: #FA3839
}

.card__title a:visited {
    color: #A6A6A6
}

.card__img {
    display: flex;
    justify-content: space-between;
    margin: 6px 0 8px;
    border-radius: 3px;
    overflow: hidden
}

.card__img>*+* {
    margin-left: 2px
}

.card__img>* {
    overflow: hidden
}

.card .gg-subscript {
    position: relative
}

.card .gg-subscript:before {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 26px;
    height: 14px;
    background: url(//s3.ssl.res.360kuai.com/static/83a904d3bb813d97.svg);
    background-size: cover;
    border-radius: 3px;
    z-index: 7
}

.card {
    box-sizing: border-box;
    padding: 14px 0 !important;
    color: #222;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
    clear: both;
    background: #fff
}

.card .singleSmallCard {
    display: flex;
    margin-bottom: 8px
}

.card .singleSmallCard .card__title a {
    padding-left: 16px !important
}

.card .singleSmallCard .card__img {
    margin: 0 !important;
    overflow: visible
}

.card .singleSmallCard .card__img a {
    overflow: hidden;
    border-radius: 3px
}

.card .singleSmallCard .card__img.video_card_icon {
    position: relative
}

.card .singleSmallCard .card__img.video_card_icon img {
    padding-top: 0 !important
}

.card .singleSmallCard .card__img.video_card_icon a::before {
    display: none;
    position: absolute;
    cursor: pointer;
    width: 40px;
    height: 40px;
    z-index: 1;
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
    content: '';
    background-image: url(//p3.ssl.img.360kuai.com/t0173dcc0abaa4a0f7d.png);
    background-image: url(//p2.ssl.img.360kuai.com/t01706e195861593538.png)\9;
    background-size: cover
}

.card .singleSmallCard .card__img.video_card_icon a:hover::before {
    background-image: url(//p2.ssl.img.360kuai.com/t01ec872e93b96fb275.png);
    background-image: url(//p5.ssl.img.360kuai.com/t01e54e21a4910caf0d.png)\9
}

.card .singleSmallCard .card__img.video_card_icon .video_card_duration {
    position: absolute;
    top: 49px;
    right: 4px;
    height: 18px;
    padding: 0 4px;
    font-size: 12px;
    color: #fff;
    line-height: 18px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 2px
}

.card.img--0 .card__meta {
    padding-top: 11px
}

.guess-search {
    background-color: #fff;
    display: block;
    z-index: 1;
    transition: background-color .3s ease-in;
    position: relative
}

.guess-search-container {
    max-height: 68px;
    overflow: hidden
}

.guess-search_label,
.guess-search_item {
    display: block;
    float: left;
    line-height: 28px;
    margin: 3px 8px 3px 0
}

.guess-search_label {
    font-size: 14px;
    color: #222;
    font-weight: 700
}

.guess-search_item {
    font-size: 12px;
    height: 28px;
    background: #F4F4F4;
    border-radius: 3px;
    padding: 0 8px
}

.guess-search_item:hover {
    background: #fff2f2
}

.guess-search_item:hover .title {
    color: #fa3939
}

.guess-search_item .piece,
.guess-search_item .title {
    display: block
}

.guess-search_item .title {
    float: left;
    color: #222;
    font-weight: 400;
    white-space: nowrap
}

.card.guess-search-show {
    padding-bottom: 4px !important
}

.card-guess-search-wrap {
    padding: 5px 16px;
    animation: card-guess-search-animate .1s linear
}

@keyframes card-guess-search-animate {
    0% {
        opacity: .3;
        transform: translateY(-10px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.card__img--square--gg img {
    width: 142px;
    height: 142px
}

.card__img--square--gg .card__img-wrapper {
    position: relative
}

.card__img--square--gg .card__img__desc {
    width: 142px;
    position: absolute;
    bottom: 0;
    left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 28px;
    color: #FFF;
    background: linear-gradient(to bottom, transparent, rgba(51, 51, 51, 0.6))
}

.card__img--big--gg .card__img-wrapper,
.card__img--big--gg img {
    width: 100%
}

.card__img--big--gg img,
.card__img--video--gg {
    height: 114px
}

.card__img--video--gg {
    position: relative;
    width: 340px;
    background-color: #000
}

.card__img--video--gg video {
    width: 100%;
    height: 100%
}

.card__img--video--gg .video--sound-icon {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer
}

.card__img--video--gg .video--mute {
    background-image: url(//p4.ssl.img.360kuai.com/t012328bbcab846f53b.png);
    background-size: contain
}

.card__img--video--gg .video--mute:hover {
    background-image: url(//p0.ssl.img.360kuai.com/t01e0fc6834983e988d.png)
}

.card__img--video--gg .video--unmute {
    background-image: url(//p3.ssl.img.360kuai.com/t01a7194e7486f51730.png);
    background-size: contain
}

.card__img--video--gg .video--unmute:hover {
    background-image: url(//p3.ssl.img.360kuai.com/t017c0df4b314d46f43.png)
}

.cpn-swiper .swiper-wrapper {
    height: 0;
    overflow: hidden
}

.cpn-swiper.cpn-swiper--focus .swiper-arrow {
    display: block
}

.cpn-swiper .swiper-arrow {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%
}

.cpn-swiper .swiper-arrow-btn {
    cursor: pointer;
    z-index: 1;
    top: 50%;
    position: absolute;
    width: 28px;
    height: 50px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 0 4px 4px 0;
    background-size: contain
}

.cpn-swiper .swiper-arrow-btn--prev {
    left: 0;
    background-image: url(https://p3.ssl.img.360kuai.com/t01b035615516ff4790.png);
    transform: translateY(-50%) rotate(0)
}

.cpn-swiper .swiper-arrow-btn--prev:hover {
    background-image: url(https://p0.ssl.img.360kuai.com/t012700b49334cc4677.png)
}

.cpn-swiper .swiper-arrow-btn--next {
    right: 0;
    background-image: url(https://p3.ssl.img.360kuai.com/t01b035615516ff4790.png);
    transform: translateY(-50%) rotate(180deg)
}

.cpn-swiper .swiper-arrow-btn--next:hover {
    background-image: url(https://p0.ssl.img.360kuai.com/t012700b49334cc4677.png)
}

.card__img--slider--gg {
    overflow: hidden;
    position: relative;
    width: 340px;
    height: 127px
}

.card__img--slider--gg .swiper-slide {
    padding: 0 2px
}

.card__img--rollingOver--gg {
    width: 340px;
    height: 114px;
    margin: 20px auto;
    perspective: 1000px
}

.card__img--rollingOver--gg>* {
    overflow: initial
}

.card__img--rollingOver--gg .card__img-wrapper {
    position: relative;
    transform: translateZ(-57px) rotateX(0deg);
    transform-style: preserve-3d;
    transition: 1s;
    animation: x-anim-flip 4s linear 1s infinite;
    display: block;
    width: 340px;
    height: 114px
}

.card__img--rollingOver--gg .img--rolling-over {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    backface-visibility: hidden
}

.card__img--rollingOver--gg .img--rolling-over:nth-child(1) {
    transform: translateZ(57px)
}

.card__img--rollingOver--gg .img--rolling-over:nth-child(2) {
    transform: translateY(-57px) rotateX(90deg)
}

.card__img--rollingOver--gg .img--rolling-over img {
    width: 100%
}

.card__img--rollingOver--gg.noRolling .card__img-wrapper {
    animation-iteration-count: 0
}

@keyframes x-anim-flip {
    0% {
        transform: translateZ(-110px) rotateX(0deg)
    }

    50% {
        transform: translateZ(-110px) rotateX(-90deg)
    }

    100% {
        transform: translateZ(-110px) rotateX(0deg)
    }
}

.card__img_small--rollingOver--gg {
    width: 117px;
    height: 65px;
    margin-right: 16px !important;
    perspective: 1000px
}

.card__img_small--rollingOver--gg>* {
    overflow: initial
}

.card__img_small--rollingOver--gg .card__img-wrapper {
    position: relative;
    transform: translateZ(-32.5px) rotateX(0deg);
    transform-style: preserve-3d;
    transition: 1s;
    animation: x-anim-flip 4s linear 1s infinite;
    display: block;
    width: 117px;
    height: 65px
}

.card__img_small--rollingOver--gg .img--rolling-over {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    backface-visibility: hidden
}

.card__img_small--rollingOver--gg .img--rolling-over:nth-child(1) {
    transform: translateZ(32.5px)
}

.card__img_small--rollingOver--gg .img--rolling-over:nth-child(2) {
    transform: translateY(-32.5px) rotateX(90deg)
}

.card__img_small--rollingOver--gg .img--rolling-over .img__container,
.card__img_small--rollingOver--gg .img--rolling-over img {
    height: 100%
}

.card__img_small--rollingOver--gg .img--rolling-over img {
    width: 100%
}

.card__img_small--rollingOver--gg.noRolling .card__img-wrapper {
    animation-iteration-count: 0
}

@keyframes x-anim-flip {
    0% {
        transform: translateZ(-110px) rotateX(0deg)
    }

    50% {
        transform: translateZ(-110px) rotateX(-90deg)
    }

    100% {
        transform: translateZ(-110px) rotateX(0deg)
    }
}

.gg-card.gg-card-type--0 .card__meta {
    padding-top: 11px
}

.gg-card.no-gg-subscript .gg-subscript::before {
    display: none
}

.right-flow-configyy-card {
    display: flex;
    padding: 14px 0;
    padding-bottom: 0
}

.right-flow-configyy-card-wrapper {
    display: inline-block;
    width: 100%
}

.right-flow-configyy-card-wrapper .footer {
    display: flex;
    justify-content: space-between;
    text-align: right;
    padding-bottom: 16px
}

.right-flow-configyy-card-wrapper .source-wrapper {
    width: 280px;
    line-height: 20.5px
}

.right-flow-configyy-card-wrapper .source {
    text-align: left;
    color: #A6A6A6;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
}

.right-flow-configyy-card-wrapper .float--right.card__operate {
    float: unset;
    flex-shrink: 0;
    display: inline-block;
    cursor: pointer
}

.right-flow-configyy-card .img__container img {
    width: 100%
}

.right-flow-configyy-card h1 {
    margin-left: 16px;
    flex: 1
}

.right-flow-configyy-card .title {
    transition: color .3s;
    line-height: 24px;
    color: #222;
    font-size: 16px;
    text-decoration: none;
    letter-spacing: .5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 700
}

.right-flow-configyy-card .title:hover {
    color: #FA3839 !important
}

.right-flow-configyy-card.vertical {
    flex-direction: column
}

.right-flow-configyy-card.vertical .img,
.right-flow-configyy-card.horizantal {
    margin-bottom: 8px
}

.right-flow-configyy-card.vertical .img,
.right-flow-configyy-card.horizantal .img {
    overflow: hidden
}

.right-flow-configyy-card.vertical .img {
    margin-top: 8px
}

.right-flow-configyy-card .img {
    position: relative
}

.right-flow-configyy-card .gg {
    display: inline-block;
    width: 26px;
    height: 14px;
    border-radius: 3px;
    overflow: hidden;
    position: absolute;
    top: 3px;
    right: 3px;
    background-image: url("https://s3.ssl.res.360kuai.com/static/83a904d3bb813d97.svg")
}

.rate__container {
    display: flex;
    align-items: center
}

.rate__container .rate__stars {
    display: flex;
    flex: 1;
    margin: 0;
    padding: 0
}

.rate__container .rate__stars li {
    width: 23px;
    height: 22px;
    margin-right: 16px;
    background: url('https://p1.ssl.img.360kuai.com/t01174c6aa80e5d8364.png') no-repeat center center;
    background-size: cover;
    cursor: pointer;
    transition: all .3s ease-in
}

.rate__container .rate__stars li.active {
    background: url('https://p1.ssl.img.360kuai.com/t01f116eff6b4bfb5ce.png') no-repeat center center;
    background-size: cover;
    border-radius: 3px
}

.rate__container .rate__text {
    font-weight: 400;
    font-size: 14px;
    color: #666;
    line-height: 16px
}

.survey {
    padding: 14px 16px;
    transition: all .3s
}

.survey .survey__title {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 16px;
    color: #222;
    line-height: 24px
}

.survey .survey__rate,
.survey .survey__result {
    background: #f7f7f7;
    border-radius: 3px;
    overflow: hidden
}

.survey .survey__rate {
    padding: 16px
}

.survey .survey__rate .survey__rate__submit {
    margin-top: 13px
}

.survey .survey__rate .survey__rate__submit button {
    width: 100%;
    height: 26px;
    line-height: 26px;
    border-radius: 12px;
    border: none;
    font-weight: 400;
    font-size: 14px;
    background: #ffefef;
    color: #fa3939;
    cursor: pointer;
    transition: all .3s
}

.survey .survey__rate .survey__rate__submit button:not(:disabled):hover {
    background: #fee6e6
}

.survey .survey__rate .survey__rate__submit button:disabled {
    background: #eee;
    color: #ccc;
    cursor: not-allowed
}

.survey .survey__result {
    height: 94px;
    line-height: 94px;
    font-size: 14px;
    color: #666;
    text-align: center
}

.survey .survey__footer {
    display: flex;
    align-items: center;
    margin-top: 8px
}

.survey .survey__footer .survey__footer__tip {
    flex: 1;
    font-weight: 400;
    font-size: 12px;
    color: #999;
    line-height: 18px
}

.survey .survey__footer .survey__footer__close {
    color: #ddd;
    font-size: 17px;
    line-height: 17px;
    cursor: pointer
}

.base-slider.unslider,
.base-slider.unslider .slider__wrap {
    height: 100%
}

.base-slider.unslider {
    position: relative
}

.base-slider.unslider .slider__wrap .slider__items,
.base-slider.unslider .slider__wrap .slider__item {
    height: 100%
}

.base-slider.unslider .slider__wrap .slider__item {
    float: left;
    text-decoration: none;
    cursor: pointer;
    position: relative
}

.base-slider.unslider .slider__wrap .slider__item::before {
    content: "";
    cursor: default;
    position: absolute;
    top: 4px;
    right: 18px;
    width: 26px;
    height: 14px;
    background: url(//s3.ssl.res.360kuai.com/static/83a904d3bb813d97.svg) rgba(0, 0, 0, 0.2);
    background-position: 0 -1px;
    background-size: cover;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    z-index: 7
}

.base-slider.unslider .slider__wrap .slider__item__close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    background: url(//s5.ssl.res.360kuai.com/static/5d71004466d3eebd.svg) rgba(0, 0, 0, 0.25);
    background-size: cover;
    cursor: pointer;
    z-index: 7;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px
}

.base-slider.unslider .slider__wrap .slider__item a,
.base-slider.unslider .slider__wrap .slider__item img {
    width: 100%;
    height: 100%
}

.base-slider.unslider .slider__wrap .slider__item a {
    position: relative;
    display: block
}

.base-slider.unslider .unslider-arrow {
    top: 50%;
    width: 28px !important;
    height: 50px !important;
    transform: translateY(-50%)
}

.base-slider.unslider .unslider-arrow.prev {
    background: url(//p3.ssl.img.360kuai.com/t01b035615516ff4790.png);
    background: url(//p5.ssl.img.360kuai.com/t01e489bc31cf51e84b.png)\9;
    background-size: cover;
    transform: translateY(-50%) rotate(0)
}

.base-slider.unslider .unslider-arrow.prev:hover {
    background-image: url(//p0.ssl.img.360kuai.com/t012700b49334cc4677.png);
    background-image: url(//p5.ssl.img.360kuai.com/t01a3485079ced5e670.png)\9
}

.base-slider.unslider .unslider-arrow.next {
    background: url(//p3.ssl.img.360kuai.com/t01b035615516ff4790.png);
    background: url(//p5.ssl.img.360kuai.com/t01e489bc31cf51e84b.png)\9;
    background-size: cover;
    transform: translateY(-50%) rotate(180deg)
}

.base-slider.unslider .unslider-arrow.next:hover {
    background-image: url(//p0.ssl.img.360kuai.com/t012700b49334cc4677.png);
    background-image: url(//p5.ssl.img.360kuai.com/t01a3485079ced5e670.png)\9
}

.base-slider.unslider:hover .unslider-arrow {
    opacity: 1;
    transition: opacity .2s ease-in
}

.base-slider.unslider .unslider-nav {
    display: none;
    position: absolute;
    bottom: 8px;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%)
}

.base-slider.unslider .unslider-nav ol li {
    width: 4px;
    height: 4px;
    float: left;
    margin: 0 2px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid transparent
}

.base-slider.unslider .unslider-nav ol li.unslider-active {
    width: 14px;
    background: #fa3939
}

.top-slider-ad,
.top-slider-ad__item {
    width: 340px;
    height: 202px
}

.top-slider-ad {
    margin: 16px auto;
    position: relative;
    border-radius: 3px;
    overflow: hidden
}

.top-slider-ad__item-img {
    object-fit: cover
}

.top-slider-ad-notification {
    cursor: pointer;
    background: rgba(255, 255, 255, 0.7);
    position: absolute;
    border-radius: 3px;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    z-index: 1
}

.top-slider-ad-notification svg path {
    fill: red
}

.top-slider-ad-title {
    cursor: pointer;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 340px;
    height: 50px;
    font-size: 16px;
    color: #fff;
    padding: 0 10px;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.6) 64%, rgba(0, 0, 0, 0.702) 100%);
    display: flex;
    align-items: flex-end
}

.top-slider-ad-title span {
    margin-bottom: 8px
}

.top-slider-ad-title span:nth-child(1) {
    display: inline-block;
    width: 272px;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 20px
}

.top-slider-ad-title span:nth-child(2) {
    display: inline-block;
    width: 48px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #fa3939;
    border-radius: 3px;
    font-size: 12px;
    color: #fff
}

.list__fail-button {
    cursor: pointer;
    color: #FA3939
}

.list__fail-button:hover {
    text-decoration: underline
}

.list__tips,
.list__status {
    height: 100px;
    line-height: 50px;
    text-align: center
}

.list__tips img,
.list__status img {
    display: initial;
    width: 100%
}

.list__status-cache {
    height: 60px;
    color: #666;
    font-size: 14px
}

.list__tips {
    position: relative
}

.list__tips img {
    position: absolute;
    height: 46px;
    left: -40px
}

.list__tips span {
    position: absolute;
    left: 48%;
    top: -2px;
    color: #a6a6a6;
    font-size: 14px
}

.list__tip {
    background: rgba(255, 240, 240, 0.96);
    color: #FA3939;
    cursor: pointer;
    font-size: 14px;
    line-height: 32px;
    text-align: center;
    border: 1px solid #FEBFBF;
    position: relative;
    margin: 14px 16px;
    overflow: hidden;
    box-sizing: content-box;
    animation: fadeIn 1s ease-in-out 0s 1 forwards
}

.list__tip.fade-out {
    animation: fadeOut 1s ease-in-out 1s 1 forwards
}

@keyframes fadeIn {
    0% {
        height: 0
    }

    100% {
        height: 32px
    }
}

@keyframes fadeOut {
    0% {
        height: 32px
    }

    100% {
        height: 0;
        margin: 0;
        border: 0
    }
}

.windowVideo-adv-box {
    margin: 16px 0 16px 16px
}

.windowVideo-adv .card__title {
    width: 340px;
    font-weight: 700;
    line-height: 24px;
    height: 24px;
    font-size: 16px;
    margin-bottom: 8px
}

.windowVideo-adv .card__title a {
    display: inline-block;
    cursor: pointer;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.windowVideo-adv .card__title a:hover {
    color: #FA3839
}

.windowVideo-adv .card__video,
.windowVideo-adv .card__video .img__container {
    width: 340px;
    height: 192px
}

.windowVideo-adv .card__video {
    position: relative;
    background-color: #000;
    border-radius: 3px;
    overflow: hidden
}

.windowVideo-adv .card__video .img__container img {
    width: 100%;
    height: 100%
}

.windowVideo-adv .card__video:before {
    content: "";
    cursor: default;
    position: absolute;
    top: 4px;
    right: 18px;
    width: 26px;
    height: 14px;
    background: url(//s3.ssl.res.360kuai.com/static/83a904d3bb813d97.svg) rgba(0, 0, 0, 0.2);
    background-position: -2px -1px;
    background-size: cover;
    border-radius: 1px;
    z-index: 7
}

.windowVideo-adv .card__video .card__video__close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    background: url(https://s1.ssl.res.360kuai.com/static/3be34bd374b81b51.svg) rgba(0, 0, 0, 0.2);
    background-size: cover;
    cursor: pointer;
    z-index: 7
}

.flow {
    position: relative;
    z-index: 1
}

.detail-sidebar-cube {
    padding: 0 16px
}

.dataRecommend-popup .dataRecommend-icon {
    margin-right: 12px
}

.dataRecommend {
    width: 340px;
    height: 92px;
    padding: 24px;
    color: #fff;
    opacity: 1;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.851);
    border-radius: 3px;
    position: absolute;
    bottom: 16px;
    right: 24px;
    z-index: 9;
    display: flex;
    justify-content: space-between;
    align-items: end
}

.dataRecommend-close {
    width: 14px;
    height: 14px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer
}

.dataRecommend-icon {
    width: 40px;
    height: 40px
}

.dataRecommend-text {
    width: 180px
}

.dataRecommend-text h2 {
    font-size: 16px
}

.dataRecommend-text p {
    font-size: 12px;
    line-height: 16px;
    margin-top: 6px
}

.dataRecommend-start {
    width: 88px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    border: none;
    background: #08b874;
    box-shadow: 0 0 6px 1px #fff33;
    border-radius: 3px
}

.wechat-code__modal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    height: 430px;
    background: url(//p3.ssl.img.360kuai.com/t01c3d5094fefde28ec.png) no-repeat center center;
    background-size: 100% 100%;
    border-radius: 3px 3px 0 0;
    text-align: center;
    font-size: 14px;
    color: #666
}

.wechat-code__modal__close {
    position: absolute;
    right: 24px;
    top: 24px;
    width: 16px;
    height: 16px;
    border: none;
    outline: none;
    appearance: none;
    background: url(//s2.ssl.res.360kuai.com/static/fe24bf84251fe534.svg) no-repeat center center;
    background-size: contain;
    cursor: pointer
}

.wechat-code__modal__close:hover {
    background: url(//s3.ssl.res.360kuai.com/static/04dd18ed983fef6c.svg) no-repeat center center;
    background-size: contain
}

.wechat-code__modal__title {
    font-size: 22px;
    line-height: 30px;
    color: #222;
    margin: 35px auto 32px
}

.wechat-code__modal__code img {
    width: 216px;
    height: 216px;
    margin: 0 auto
}

.wechat-code__modal__footer {
    margin-top: 28px;
    line-height: 20px
}

.wechat-code__modal__footer__tip {
    color: #fa3939;
    height: 20px;
    line-height: 20px;
    margin-top: 4px
}

.wechat-code__modal__footer__tip>* {
    vertical-align: middle
}

.wechat-code__modal__footer__tip i {
    display: inline-block;
    width: 15px;
    height: 20px;
    margin: 0 4px;
    background: url(//s2.ssl.res.360kuai.com/static/a19687d08443953b.svg) no-repeat center top 1px;
    background-size: contain
}

.k-float-code__qrcode__icon.k-float-code__button::before {
    background-image: url(//p1.img.360kuai.com/t110b9a9301d28fa0af4c54abaa.png);
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px
}

.k-float-code__qrcode__wrapper {
    position: relative;
    margin-top: 12px
}

.k-float-code__qrcode__wrapper.hide {
    display: none
}

.k-float-code__qrcode__wrapper.new .k-float-code__qrcode__body::before {
    position: absolute;
    top: -2px;
    left: -3px;
    display: inline-block;
    content: "";
    width: 8px;
    height: 8px;
    background: #fa3939;
    border: 1px solid #fff;
    border-radius: 6px
}

.k-float-code__qrcode__wrapper.slider_box .k-float-btn__qrcode__body::before {
    display: none
}

.k-float-code__qrcode__wrapper .img__container img {
    border-radius: 0
}

.k-float-code__qrcode__wrapper.gg .k-float-code__qrcode__right__article {
    height: 100px;
    width: 140px
}

.k-float-code__qrcode__wrapper.gg .k-float-code__qrcode__body {
    padding-top: 25px;
    padding-bottom: 25px
}

.k-float-code__qrcode__wrapper.gg .k-float-code__qrcode__right {
    width: 140px;
    margin-left: 16px;
    float: none
}

.k-float-code__qrcode__wrapper.gg .k-float-code__qrcode__right__article a,
.k-float-code__qrcode__wrapper.gg span {
    -webkit-line-clamp: 3;
    line-height: 26px;
    font-size: 16px
}

.k-float-code__qrcode__wrapper.gg .img__container {
    position: relative
}

.k-float-code__qrcode__icon:hover::before,
.k-float-code__qrcode__icon.hover::before {
    background: none;
    content: "\968F\4FBF\770B\770B";
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 15px;
    margin-top: -15px;
    margin-left: -15px;
    color: #FFF;
    font-size: 12px;
    font-weight: 600
}

.k-float-code__qrcode__icon.hover+div img {
    display: block
}

.k-float-code__qrcode__body {
    position: absolute;
    width: 380px;
    box-sizing: border-box;
    transform-origin: 0;
    transition: all .2s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
    bottom: 17px;
    left: 50px;
    background-image: url("https://p5.ssl.img.360kuai.com/t110b9a9301d31ddbc1e3b558a1.png");
    box-shadow: 0 1px 12px 0 rgba(153, 153, 153, 0.301);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 8px;
    padding: 20px 16px;
    display: none;
    justify-content: center
}

.k-float-code__qrcode__body__img {
    position: relative;
    display: inline-block;
    cursor: pointer
}

.k-float-code__qrcode__body__img__gg {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-block;
    width: 26px;
    height: 14px;
    background-image: url("https://s1.ssl.res.360kuai.com/static/d61ba6cfa4993143.svg")
}

.k-float-code__qrcode__body img {
    cursor: pointer;
    width: 110px;
    height: 110px;
    display: none
}

.k-float-code__qrcode__body>div {
    display: inline-block
}

.k-float-code__qrcode__body .k-float-code__qrcode__right {
    width: 220px;
    float: right;
    box-sizing: border-box;
    padding-right: 10px;
    margin-left: 16px
}

.k-float-code__qrcode__body.visible {
    display: flex
}

.k-float-code__qrcode__body.visible img {
    display: block
}

.k-float-code__qrcode__body .swiper__container {
    width: 330px;
    height: 110px;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    padding: 0;
    margin-right: 10px
}

.k-float-code__qrcode__body .swiper__container .unslider {
    overflow: hidden !important
}

.k-float-code__qrcode__body .swiper__container .slider_item_box {
    width: 330px;
    height: 110px;
    border-radius: 3px;
    overflow: hidden
}

.k-float-code__qrcode__body .swiper__container .base-slider>.slider__wrap>.slider__items>.slider__item::before {
    top: 4px;
    right: 4px;
    border-radius: 3px
}

.k-float-code__qrcode__body .swiper__container .swiperScrollDom {
    width: 330px
}

.k-float-code__qrcode__body .swiper__container .swiper-wrapper {
    height: 110px !important
}

.k-float-code__qrcode__body .swiper__container:hover .ads_slider-btn {
    display: flex;
    justify-content: center;
    align-items: center
}

.k-float-code__qrcode__body .swiper__container .swiper-arrow .swiper-arrow-btn {
    z-index: 2
}

.k-float-code__qrcode__body .is360Search>.base-slider>.slider__wrap>.slider__items>.slider__item::before {
    display: none
}

.k-float-code__qrcode__right {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
    word-break: keep-all;
    position: relative
}

.k-float-code__qrcode__right__icon {
    position: absolute;
    z-index: 1;
    display: inline-block;
    top: 14px;
    right: 14px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-image: url("https://s2.ssl.res.360kuai.com/static/024ed7faae3ad777.svg");
    background-size: contain
}

.k-float-code__qrcode__right__icon:hover {
    background-image: url("https://s0.ssl.res.360kuai.com/static/e32840c342468a7d.svg")
}

.k-float-code__qrcode__right__normal h5 {
    margin-top: 26px;
    font-family: PingFang SC;
    font-size: 16px;
    color: #555;
    line-height: 16px
}

.k-float-code__qrcode__right__normal p {
    margin-top: 10px;
    font-family: PingFang SC;
    font-size: 12px;
    color: #999;
    line-height: 16px
}

.k-float-code__qrcode__right__article {
    position: relative;
    height: 110px
}

.k-float-code__qrcode__right__article a,
.k-float-code__qrcode__right__article span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #222;
    line-height: 28px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    white-space: pre-wrap
}

.k-float-code__qrcode__right__article a:hover,
.k-float-code__qrcode__right__article span:hover {
    color: #fa3939
}

.slider_item_ads,
.slider_item_ads .slider_item_box {
    width: 330px;
    height: 110px
}

.slider_item_ads .slider_item_box {
    border-radius: 3px;
    overflow: hidden
}

.slider_item_ads .slider_item_box .swiper_img__title {
    width: 100%;
    height: 46px;
    padding: 8px 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), 60%, rgba(255, 255, 255, 0))
}

.slider_item_ads .slider_item_box .swiper_img__title .swiper_img__title__hot {
    width: 38px;
    height: 20px;
    background: #fa3939;
    font-family: PingFang SC;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    line-height: 20px;
    text-align: center;
    margin: 12px 4px 0 0;
    border-radius: 3px
}

.slider_item_ads .slider_item_box .swiper_img__title .swiper_img__title__text {
    height: 22px;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #fff;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 45px);
    margin: 12px 0 0 0
}

.card__img--video--gg {
    position: relative;
    width: 332px;
    height: 110px
}

.card__img--video--gg video {
    width: 100%;
    height: 100%
}

.card__img--video--gg .video--sound-icon {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer
}

.card__img--video--gg .video--mute {
    background-image: url(//p4.ssl.img.360kuai.com/t012328bbcab846f53b.png);
    background-size: contain
}

.card__img--video--gg .video--mute:hover {
    background-image: url(//p0.ssl.img.360kuai.com/t01e0fc6834983e988d.png)
}

.card__img--video--gg .video--unmute {
    background-image: url(//p3.ssl.img.360kuai.com/t01a7194e7486f51730.png);
    background-size: contain
}

.card__img--video--gg .video--unmute:hover {
    background-image: url(//p3.ssl.img.360kuai.com/t017c0df4b314d46f43.png)
}

#video_ads {
    border-radius: 3px;
    overflow: hidden;
    margin: 0
}

.swiper_img__title {
    width: 100%;
    height: 46px;
    padding: 8px 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), 60%, rgba(255, 255, 255, 0))
}

.swiper_img__title .swiper_img__title__hot {
    width: 38px;
    height: 20px;
    background: #fa3939;
    font-family: PingFang SC;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    line-height: 20px;
    text-align: center;
    margin: 12px 4px 0 0;
    border-radius: 3px
}

.swiper_img__title .swiper_img__title__text {
    height: 22px;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #fff;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 45px);
    margin: 12px 0 0 0
}

.video_item {
    width: 100%;
    overflow: hidden;
    height: 100%;
    border-radius: 3px
}

.video_item * {
    background: none
}

.k-float-code__wrapper {
    position: fixed;
    z-index: 999;
    width: 40px
}

.k-float-code__wrapper.hidden .tasktimer__time__bar.animate {
    animation: none !important
}

.k-float-code__button {
    display: block;
    width: 44px;
    height: 44px;
    margin-top: 10px;
    font-size: 12px;
    cursor: pointer;
    position: relative;
    background-color: #F6F6F6;
    opacity: .85;
    border-radius: 50%
}

.k-float-code__button:hover,
.k-float-code__button.hover {
    background-color: #fa3939;
    color: #333
}

.k-float-code:hover .k-float-code__button {
    background-color: #fff;
    color: #333
}

.k-float-code__button::before,
.k-float-code__button::after {
    position: absolute;
    left: 50%;
    top: 50%
}

.k-float-code__button::before {
    content: '';
    width: 16px;
    height: 9px;
    margin-left: -8px;
    margin-top: -7px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.k-float-code--small .k-float-code__button {
    width: 40px;
    height: 40px;
    font-size: 12px
}

.k-float-code--small .k-float-code__button::before {
    width: 16px;
    height: 9px;
    margin-left: -8px;
    margin-top: -5px
}

.k-float-code--small .k-float-code__qrcode__icon::before {
    width: 18px;
    height: 18px;
    margin-top: -9px;
    margin-left: -9px
}

.sidebar {
    width: 44px;
    height: 44px;
    position: relative;
    margin-top: 12px
}

.sidebar:hover .sidebar-icon {
    background: linear-gradient(to bottom, #ff6262, #fa3939)
}

.sidebar:hover .sidebar-icon:after {
    opacity: 1
}

.sidebar-icon {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
    background-color: #FFF;
    border-radius: 50%
}

.sidebar-icon:after {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    color: #FFF;
    font-size: 12px;
    font-weight: 600;
    transition: opacity .1s ease
}

.sidebar-icon-highlights {
    background-image: url(//p1.img.360kuai.com/t110b9a9301ff2681c347ca1c40.png)
}

.sidebar-icon-highlights:after {
    content: "\4ECA\65E5\770B\70B9"
}

.sidebar-icon-trending {
    background-image: url(//p4.img.360kuai.com/t110b9a9301017a402066d9be2a.png)
}

.sidebar-icon-trending:after {
    content: "\79CD\8349\4E13\533A"
}

.sidebar-icon-hot {
    background-image: url(//p4.img.360kuai.com/t110b9a93013eb727b92e069a3d.png);
    background-size: 18px 18px
}

.sidebar-icon-hot:after {
    content: "\70ED\95E8\63A8\8350"
}

.sidebar-wrapper>div {
    margin-left: 8px;
    border-radius: 8px;
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1), 0px 6px 26px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer
}

.sidebar-highlights-wrapper {
    display: none;
    position: absolute;
    left: 44px;
    top: 0
}

.sidebar-highlights-content {
    height: 44px;
    line-height: 44px;
    width: 384px;
    background: url(//p2.ssl.img.360kuai.com/t110b9a93016b647f40fc1fb6e0.png) no-repeat left center;
    background-size: 60px 44px;
    background-color: #FFF;
    padding: 0 8px 0 68px;
    font-size: 14px;
    color: #222;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.sidebar-highlights:hover .sidebar-highlights-wrapper {
    display: block
}

.sidebar-trending-wrapper {
    display: none;
    position: absolute;
    left: 44px;
    top: -50px
}

.sidebar-trending-content {
    display: flex;
    flex-direction: row;
    height: 144px;
    width: 384px;
    padding: 12px;
    background-color: #FFF;
    font-size: 14px
}

.sidebar-trending-content__img {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px
}

.sidebar-trending-content__text {
    flex: 1;
    padding: 12px;
    background: linear-gradient(90deg, #FFFBEE 0, #FCECF2 100%);
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px
}

.sidebar-trending-content__text span {
    line-height: 24px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis
}

.sidebar-trending:hover .sidebar-trending-wrapper {
    display: block
}

.sidebar-hot-wrapper {
    display: none;
    position: absolute;
    left: 44px;
    top: -91px
}

.sidebar-hot-content {
    height: 226px;
    width: 384px;
    margin-left: 8px;
    padding: 12px;
    background-color: #FFF
}

.sidebar-hot-content__img {
    border-radius: 8px
}

.sidebar-hot:hover .sidebar-hot-wrapper {
    display: block
}

.adclose__options {
    position: absolute;
    z-index: 999
}

.adclose__options--mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3)
}

.adclose__options--btns {
    box-sizing: border-box;
    width: 72px;
    height: 57px;
    padding: 8px 6px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.1), 0px 0 0 1px rgba(0, 0, 0, 0.03);
    border-radius: 3px;
    position: absolute;
    top: 4px;
    right: 4px;
    text-align: center;
    line-height: 12px;
    cursor: pointer
}

.adclose__options--btns div {
    width: 60px;
    font-size: 12px;
    color: #333
}

.adclose__options--btns div:first-child:after {
    display: block;
    content: '';
    width: 60px;
    height: 1px;
    background: #e5e5e5;
    margin: 8px 0
}

.adclose__options--btns div:hover {
    color: #FA3939
}

.img--wrapper {
    overflow: hidden;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px
}

.img--wrapper .img__container::after {
    background: transparent
}

.bottom-gg--item {
    position: relative;
    overflow: hidden;
    width: 572px;
    box-shadow: 0 0 0 1px #f7f7f7
}

.bottom-gg--item.no-gg-mark::before {
    display: none
}

.bottom-gg--item.no-gg-mark .bottom-gg--item--close {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px
}

.bottom-gg--item .sponsor-title {
    z-index: 10;
    position: absolute;
    bottom: 12px;
    width: 100%;
    height: 22px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    pointer-events: none
}

.bottom-gg--item .sponsor-title-bg {
    position: absolute;
    bottom: 0;
    height: 60px;
    width: 100%;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0, rgba(255, 255, 255, 0) 100%)
}

.bottom-gg--item h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #333;
    height: 48px;
    font-size: 16px;
    overflow: hidden;
    line-height: 24px;
    margin-top: 8px;
    font-weight: 400;
    padding-right: 10px;
    box-sizing: border-box
}

.bottom-gg--item a:hover h3 {
    color: #fa3939
}

.bottom-gg--item::before {
    content: '';
    position: absolute;
    top: 3px;
    right: 17px;
    width: 26px;
    height: 14px;
    background: url(//s3.ssl.res.360kuai.com/static/83a904d3bb813d97.svg);
    background-size: cover;
    z-index: 7;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.bottom-gg--item--close {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 14px;
    height: 14px;
    background: url(//s5.ssl.res.360kuai.com/static/5d71004466d3eebd.svg);
    background-size: cover;
    cursor: pointer;
    z-index: 7;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px
}

.bottom-gg--item>a:first-child {
    position: relative;
    display: block;
    line-height: 0;
    font-size: 0
}

.small-mediav-card {
    width: 276px;
    height: 274px;
    border-radius: 3px;
    background-color: #f7f7f7
}

.small-mediav-card .media-cover img {
    height: 156px
}

.small-mediav-card .media-author {
    display: flex;
    justify-items: center
}

.small-mediav-card .media-author-avatar {
    width: 20px;
    height: 20px;
    display: block;
    border-radius: 100px;
    overflow: hidden;
    margin-right: 6px
}

.small-mediav-card .media-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.small-mediav-card .media-info {
    height: 118px;
    background-color: #f7f7f7;
    color: #222;
    display: flex;
    flex-direction: column;
    padding: 14px 16px 16px
}

.small-mediav-card .media-info a:hover,
.small-mediav-card .media-info a:active {
    color: #fa3939
}

.small-mediav-card .media-info-top {
    flex: 1
}

.small-mediav-card .media-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #222;
    height: 48px;
    font-size: 16px;
    overflow: hidden;
    line-height: 24px;
    margin-top: 8px;
    font-weight: 400;
    padding-right: 10px;
    box-sizing: border-box
}

.small-mediav-card .media-from {
    font-size: 12px
}

.small-mediav-card .media-from a:link,
.small-mediav-card .media-from a:visited {
    color: #999
}

.small-mediav-card .media-from a:hover,
.small-mediav-card .media-from a:active {
    color: #fa3939
}

.recommend-news__item {
    overflow: hidden;
    position: relative;
    border-radius: 3px;
    box-shadow: 0 0 0 1px #f7f7f7;
    width: 276px;
    margin-top: 20px
}

.recommend-news__item .recommend-news__item__img {
    height: 156px;
    display: block;
    overflow: hidden
}

.recommend-news__item.is-big {
    width: 572px
}

.recommend-news__item__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #222;
    height: 48px;
    font-size: 16px;
    overflow: hidden;
    line-height: 24px;
    margin-top: 8px;
    font-weight: 400;
    padding-right: 10px;
    box-sizing: border-box
}

.recommend-news__item__title:hover,
.recommend-news__item__title:hover h3 {
    color: #fa3939
}

.recommend-news__item .media-overview {
    height: 118px;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
    padding: 14px 16px 16px
}

.recommend-news__item .media-title {
    flex: 1
}

.recommend-news__item .media-footer {
    height: 20px
}

.recommend-news__item .media-author {
    font-size: 12px;
    display: flex;
    align-items: center;
    color: #999
}

.recommend-news__item .media-author__avatar {
    width: 20px;
    height: 20px;
    display: block;
    border-radius: 100px;
    overflow: hidden;
    margin-right: 6px
}

.recommend-news__item .media-author__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.recommend-news__item .media-author__name {
    color: #999
}

.recommend-news__item .media-author__name:hover {
    color: #fa3939
}

.recommend-news__item .adclose__options {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.recommend-news__item--gg:before {
    content: '';
    position: absolute;
    top: 3px;
    right: 17px;
    width: 26px;
    height: 14px;
    background: url(//s3.ssl.res.360kuai.com/static/83a904d3bb813d97.svg);
    background-size: cover;
    z-index: 7;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.recommend-news__item--gg--close {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 14px;
    height: 14px;
    background: url(//s5.ssl.res.360kuai.com/static/5d71004466d3eebd.svg);
    background-size: cover;
    cursor: pointer;
    z-index: 7;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px
}

.recommend-news__item--gg--video.gg-subscript:before,
.recommend-news__item--gg--video .recommend__item--gg--close {
    top: 9px
}

.recommend-news__item--gg video {
    background-color: #000
}

.recommend-news__item--gg>a:first-child {
    position: relative;
    display: block;
    line-height: 0;
    font-size: 0
}

.recommend-news .card-skeleton,
.sponsor-content .card-skeleton {
    margin-top: 20px
}

.card-skeleton {
    width: 276px;
    height: 274px;
    border-radius: 3px
}

.card-skeleton__header {
    height: 156px
}

.card-skeleton__body {
    height: 118px;
    padding: 14px 16px;
    background-color: #F8F8F8
}

.recommend-news {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between
}

.main-container {
    width: 1164px;
    margin: 0 auto;
    padding-top: 40px;
    background-color: #fff;
    position: relative
}

.short-video__container {
    z-index: 900 !important
}

.sponsor-wall {
    position: fixed;
    top: 65px;
    bottom: 0;
    width: 100%
}

.main-section {
    width: 100%;
    margin-top: 32px;
    position: relative;
    background-color: #fff
}

.main-section:first-child {
    margin-top: 0
}

.article-section,
.sponsor-content {
    display: flex;
    flex-direction: row
}

.sponsor-content .recommend-news__item {
    margin-right: 20px
}

.sponsor-content .recommend-news__item:last-child {
    margin-right: 0
}

.section-title {
    font-size: 20px;
    font-weight: 500;
    padding: 16px 0
}

.section-gap {
    margin-bottom: -20px
}

.sidebar-inner {
    position: sticky;
    top: 65px;
    scrollbar-width: none
}

.sidebar-inner::-webkit-scrollbar-thumb {
    display: none
}

.sidebar-inner:hover::-webkit-scrollbar-thumb {
    display: block
}

.article-block-spliter {
    height: 60px;
    position: relative;
    width: 100%;
    margin-bottom: 50px
}

.article-block-spliter::after {
    content: '';
    display: block;
    height: 1px;
    width: 100vw;
    overflow: hidden;
    background-color: #E8E8E8;
    position: absolute;
    bottom: 0;
    margin-left: calc(50% - 50vw)
}

.is-bkgwall-show .article-block-spliter::after {
    margin-left: 0;
    width: 100%
}

.detail-body {
    width: calc(100% - 6px);
    height: 100%;
    padding-top: 65px;
    background-color: #fff
}

.detail-content {
    position: relative;
    width: 676px;
    margin-left: 50px;
    padding-top: 6px;
    z-index: 1
}

.detail-content .cmmts__wrapper {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important
}

.detail-content .show-time {
    position: fixed
}

.detail-content__container {
    position: relative;
    overflow-y: hidden;
    overflow-x: hidden
}

.detail-content__overflow {
    width: 100%;
    height: 100%;
    overflow-y: auto
}

.detail-content__toolbar {
    width: 98px;
    position: relative
}

.detail-content__toolbar__wrapper {
    position: absolute;
    top: 0;
    right: 0
}

.detail-side {
    position: relative;
    width: 340px;
    z-index: 10
}

.detail-side-empty {
    float: left;
    width: 372px;
    height: 100%;
    background-color: #fff;
    line-height: 100px;
    text-align: center;
    font-size: 14px;
    overflow: hidden
}

.detail-side .flow {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden
}

.detail-side .flow__container {
    border-radius: 3px
}

.detail-side .flow__content {
    min-height: 100%;
    box-sizing: border-box;
    background: #fff;
    border-top: 1px solid transparent
}

.detail-side .detail-rightbar {
    position: absolute;
    top: 0;
    left: 372px;
    height: 100%
}

.detail-side .detail-rightbar__content {
    position: absolute;
    right: 0;
    bottom: 50px;
    width: 40px;
    height: 40px;
    background-color: gray
}

.taskmodal {
    display: none
}

.header__wrapper .base__header__content__search-input__modal__item .ad {
    padding-right: 46px;
    background-position: 94% center
}

.icon-arrow-right {
    width: 10px;
    height: 6px;
    display: inline-block;
    position: relative;
    margin-left: 4px;
    vertical-align: middle;
    color: #FA3939
}

.icon-arrow-right::before,
.icon-arrow-right::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border: 3px solid transparent;
    border-left-color: currentColor;
    position: absolute
}

.icon-arrow-right::before {
    left: 0
}

.icon-arrow-right::after {
    right: 0
}

.qa-sdk-wrapper {
    z-index: 300 !important
}

.article__lose--interest {
    position: relative
}

.article__lose--interest .dislike-modal {
    transform: translateX(-100%);
    left: -20px;
    top: -14px;
    border-radius: 10px
}

.header__wrapper {
    border-bottom: 0 !important
}

body.is-scrolled .header__wrapper {
    box-shadow: 0 2px 16px rgba(54, 56, 79, 0.06)
}

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

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

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

body {
    line-height: 1;
    background: #fff
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

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

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

html,
body,
#app {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    color: #222;
    font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    -webkit-font-smoothing: antialiased
}

* {
    box-sizing: border-box
}

*::-webkit-scrollbar {
    width: 6px;
    height: 9px
}

*::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border: 1px solid #ddd;
    min-height: 4px;
    border-radius: 12px
}

a,
a:hover {
    text-decoration: none
}

a {
    color: #000
}

body .float--left {
    float: left
}

body .float--right {
    float: right
}

body .clearfix:after {
    content: ' ';
    display: block;
    height: 0;
    clear: both
}

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

body .lawnfooter-close__last {
    box-sizing: content-box
}

.hover--scale {
    transition: transform .3s ease-out
}

.hover--scale:hover {
    -webkit-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -moz-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05)
}

@keyframes react-loading-skeleton {
    100% {
        transform: translateX(100%)
    }
}

.react-loading-skeleton {
    --base-color: #ebebeb;
    --highlight-color: #f5f5f5;
    --animation-duration: 1.5s;
    --animation-direction: normal;
    --pseudo-element-display: block;
    background-color: var(--base-color);
    width: 100%;
    border-radius: .25rem;
    display: inline-flex;
    line-height: 1;
    position: relative;
    user-select: none;
    overflow: hidden
}

.react-loading-skeleton::after {
    content: ' ';
    display: var(--pseudo-element-display);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-repeat: no-repeat;
    background-image: var(--custom-highlight-background, linear-gradient(90deg, var(--base-color) 0, var(--highlight-color) 50%, var(--base-color) 100%));
    transform: translateX(-100%);
    animation-name: react-loading-skeleton;
    animation-direction: var(--animation-direction);
    animation-duration: var(--animation-duration);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite
}

@media (prefers-reduced-motion) {
    .react-loading-skeleton {
        --pseudo-element-display: none
    }
}