﻿* {
    box-sizing: border-box
}

html {
    font-size: 100px
}

.header {
    -webkit-box-shadow: 0 .01rem .04rem 0 rgba(0, 0, 0, .1);
    box-shadow: 0 .01rem .04rem 0 rgba(0, 0, 0, .1)
}

.header .header-container {
    width: 16rem
}

.header .header-container .search-container .search-content {
    max-width: 4.2rem;
    margin: 0 auto
}

#header_nav {
    width: 16rem;
    height: .9rem;
    padding: .29rem 0;
    background-color: #fff;
    margin: .86rem auto 0
}

#header_nav .nav-container {
    width: 100%;
    height: .32rem;
    display: flex;
    justify-content: space-between;
    position: relative
}

#header_nav .nav-container span {
    height: .32rem;
    line-height: .32rem;
    font-size: .2rem;
    margin-right: .2rem;
    position: relative
}

#header_nav .nav-container span.new::after {
    content: 'new';
    font-size: 12px;
    font-weight: 700;
    color: #e80000;
    position: absolute;
    right: -20px;
    top: -9px
}

#header_nav .nav-container span:last-child {
    margin-right: 0
}

#header_nav .nav-container span a {
    color: #2b2929
}

#header_nav .nav-container span a:hover {
    color: #e80000;
    border-bottom: .03rem solid #e80000
}

.root-container {
    width: 100%;
    height: auto;
    margin-top: 86px
}

.main-container {
    width: 16rem;
    height: auto;
    margin: 0 auto
}

.homepage-header {
    width: 100%;
    height: auto;
    margin-bottom: .3rem;
    display: flex
}

.homepage-header .banner-container {
    width: calc(42% - .15rem);
    height: auto;
    margin-right: .15rem
}

.swiper {
    z-index: 0
}

.swiper-wrapper {
    z-index: 0
}

.homepage-header .banner-container .swiper-slide {
    width: 100%;
    height: auto;
    background-color: #f7f8fa;
    border-radius: 10px;
    overflow: hidden;
    display: block;
    padding-top: 56.25%;
    aspect-ratio: 16/9
}

.homepage-header .banner-container .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0
}

.homepage-header .banner-container .swiper-slide .replace-img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 56.25%;
    aspect-ratio: 16/9
}

.homepage-header .banner-container .swiper-slide .replace-img img {
    width: 40% !important;
    height: auto !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.homepage-header .banner-container .swiper-next,
.homepage-header .banner-container .swiper-prev {
    width: .5rem;
    height: .5rem;
    background-color: rgba(0, 0, 0, .46);
    border-radius: .25rem;
    overflow: hidden;
    padding: .13rem;
    cursor: pointer;
    position: absolute;
    top: 50%;
    margin-top: -.25rem;
    outline: 0;
    z-index: 99
}

.homepage-header .banner-container .swiper-prev {
    left: .2rem
}

.homepage-header .banner-container .swiper-next {
    right: .2rem
}

.homepage-header .banner-container .swiper-next i,
.homepage-header .banner-container .swiper-prev i {
    font-size: .24rem;
    color: #fff;
    display: block
}

.swiper-pagination-bullet,
.swiper-pagination-bullet-active {
    background-color: #999;
    opacity: 1;
    border-radius: .04rem
}

.swiper-pagination-bullet-active {
    width: .16rem
}

.homepage-header .banner-right-container {
    width: 58%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow: hidden
}

.homepage-header .banner-right-container .br-item {
    width: calc((100% - .3rem)/ 3);
    height: calc((100% - .15rem)/ 2);
    background-color: #f7f8fa;
    border-radius: 10px;
    position: relative;
    margin-bottom: .15rem;
    margin-right: .15rem;
    overflow: hidden
}

.homepage-header .banner-right-container .br-item:nth-child(3),
.homepage-header .banner-right-container .br-item:nth-child(6) {
    margin-right: 0
}

.homepage-header .banner-right-container .br-item:nth-child(4),
.homepage-header .banner-right-container .br-item:nth-child(5),
.homepage-header .banner-right-container .br-item:nth-child(6) {
    margin-bottom: 0
}

.homepage-header .banner-right-container .br-item a {
    font-size: 0
}

.homepage-header .banner-right-container .br-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .6s;
    position: absolute;
    left: 0;
    top: 0
}

.homepage-header .banner-right-container .br-item img:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05)
}

.homepage-header .banner-right-container .br-item .replace-img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 56.25%;
    aspect-ratio: 16/9
}

.homepage-header .banner-right-container .br-item .replace-img img {
    width: 40% !important;
    height: auto !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.homepage-header .banner-right-container .br-item .replace-img img:hover {
    transform: translate(-50%, -50%)
}

.homepage-header .banner-right-container .br-item .title {
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding: 0 .1rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    font-size: .16rem
}

.homepage-header .banner-right-container .br-item:hover .title {
    display: block
}

.homepage-header .banner-right-container .br-item .title a {
    color: #fff;
    font-size: .16rem;
    font-family: PingFangSC-Regular;
    font-weight: 400
}

.ad-container {
    width: 100%;
    height: auto;
    position: relative
}

.ad-container.full-width {
    background-color: #f7f8fa;
    padding-top: 5.625%;
    aspect-ratio: 160/12
}

.ad-container.full-width img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    left: 0;
    top: 0
}

.ad-container.split-width {
    width: 100%;
    height: auto;
    background-color: #f7f8fa
}

.ad-container.split-width .left {
    width: calc(42% - .15rem);
    margin-right: .15rem;
    background-color: #f7f8fa
}

.ad-container.split-width .left .ad-img {
    width: 100%;
    height: auto;
    position: relative;
    padding-top: 18.265%;
    aspect-ratio: 657/120
}

.ad-container.split-width .right {
    display: flex;
    width: 58%;
    background-color: #f7f8fa
}

.ad-container.split-width .right .ad-img {
    height: auto;
    position: relative
}

.ad-container.split-width .left img,
.ad-container.split-width .right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0
}

.movable-container {
    width: 100%;
    height: auto;
    margin-bottom: .15rem;
    display: flex;
    position: relative
}

#anchor_10,
#anchor_11,
#anchor_3,
#anchor_5,
#anchor_7 {
    margin-bottom: .35rem
}

.movable-container .section-header {
    width: 100%;
    height: .56rem;
    padding: .1rem 0;
    margin-top: .1rem;
    display: flex;
    border-bottom: 1px dashed #afafaf;
    margin-bottom: 16px;
}

.movable-container .section-header .title {
    height: .36rem;
    padding: .03rem 0;
    line-height: .3rem;
    font-size: .18rem;
    text-align: left;
    margin-right: .2rem
}

.movable-container .section-header .title a {
    color: #2b2929
}

.movable-container .section-header .title a:hover {
    color: #e80000
}

.movable-container .section-header .sort-tab {
    height: .36rem;
    padding: .06rem 0 .05rem;
    display: flex;
    justify-content: flex-start
}

.movable-container .section-header .sort-tab span {
    display: inline-block;
    height: .25rem;
    line-height: .25rem;
    font-size: .16rem;
    color: #2b2929;
    cursor: pointer;
    margin-right: .2rem
}

.movable-container .section-header .sort-tab span.act {
    position: relative
}

.movable-container .section-header .sort-tab span.act::after {
    content: '';
    width: 100%;
    height: 2px;
    background-color: #e80000;
    border-radius: 1px;
    overflow: hidden;
    position: absolute;
    bottom: -2px;
    left: 0
}

.movable-container .section-header .right-module {
    height: .36rem;
    padding: .08rem 0;
    display: flex;
    line-height: .2rem;
    font-size: .14rem;
    color: #999;
    margin-left: auto
}

.movable-container .section-header .right-module .edit-btn {
    height: .2rem;
    line-height: .2rem;
    font-size: .14rem;
    color: #999;
    cursor: pointer;
    display: none
}

.movable-container .section-header .right-module .edit-btn i {
    font-size: .12rem;
    color: #999;
    margin-right: .04rem
}

.movable-container .section-header .right-module .edit-btn:hover,
.movable-container .section-header .right-module .edit-btn:hover i {
    color: #e80000
}

.movable-container .section-header .right-module .refresh-btn {
    height: .2rem;
    line-height: .2rem;
    font-size: .14rem;
    color: #999;
    cursor: pointer;
    margin-left: .2rem
}

.movable-container .section-header .right-module .refresh-btn i {
    font-size: .12rem;
    color: #999;
    margin-right: .04rem
}

.movable-container .section-header .right-module .refresh-btn:hover,
.movable-container .section-header .right-module .refresh-btn:hover i {
    color: #e80000
}

.movable-container .section-header .right-module .load-more-btn {
    height: .2rem;
    line-height: .2rem;
    margin-left: .4rem
}

.movable-container .section-header .right-module .load-more-btn a {
    font-size: .14rem;
    color: #999
}

.movable-container .section-header .right-module .load-more-btn i {
    margin-left: .03rem;
    font-size: .12rem;
    color: #999
}

.movable-container .section-header .right-module .load-more-btn:hover a,
.movable-container .section-header .right-module .load-more-btn:hover i {
    color: #e80000
}

.movable-container .full-container {
    width: 100%
}

.movable-container .full-container .section-body {
    width: 100%;
    height: auto
}

.movable-container .left-container {
    width: 12.8rem;
    margin-right: .2rem
}

.movable-container .right-container {
    width: 3rem;
    position: relative;
    right: 0;
    top: 0
}

.movable-container .right-container .section-body {
    height: calc(100% - .76rem)
}

.movable-container .right-container .section-body .section-list {
    height: 100%
}

#recommendGlobal {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start
}

#recommendGlobal .list-item {
    width: calc((100% - .8rem)/ 5);
    height: auto;
    margin-right: .2rem
}

#recommendGlobal .list-item:last-child {
    margin-right: 0
}

#recommendGlobal .list-item .cover {
    width: 100%;
    height: auto;
    background: #f7f8fa;
    border-radius: 10px;
    margin-bottom: .15rem;
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
    aspect-ratio: 16/9;
    z-index: 0
}

#recommendGlobal .list-item .cover:hover+.title a {
    color: #e80000
}

#recommendGlobal .list-item .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .6s;
    position: absolute;
    left: 0;
    top: 0
}

#recommendGlobal .list-item .cover img:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05)
}

#recommendGlobal .list-item .cover .replace-img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 75%;
    aspect-ratio: 4/3
}

#recommendGlobal .list-item .cover span.original {
    display: block;
    width: .5rem;
    height: .26rem;
    line-height: .26rem;
    background: #e80000;
    border-radius: .02rem;
    text-align: center;
    color: #fff;
    font-size: .14rem;
    position: absolute;
    left: .04rem;
    top: .05rem;
    z-index: 99
}

#recommendGlobal .list-item .cover .data-info {
    width: 100%;
    height: 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 5px
}

#recommendGlobal .list-item .cover .data-info span {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    color: #fff;
    font-size: 12px
}

#recommendGlobal .list-item .cover .data-info span.static-page-duration {
    display: block;
    margin-left: auto;
    height: 20px;
    padding: 0 5px;
    background-color: rgba(0, 0, 0, .6);
    border-radius: 3px;
    overflow: hidden
}

#recommendGlobal .list-item .cover .data-info span i {
    margin-right: .05rem;
    font-size: .14rem
}

#recommendGlobal .list-item .title {
    width: 100%;
    height: 44px;
    line-height: 22px;
    margin-bottom: .1rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-all
}

#recommendGlobal .list-item .title a {
    color: #2b2929;
    font-size: 15px;
    display: block
}

#recommendGlobal .list-item .title a:hover {
    color: #e80000
}

#recommendGlobal .list-item .works-info {
    width: 100%;
    height: 20px;
    display: flex
}

#recommendGlobal .list-item .works-info .author-info {
    height: 20px;
    display: flex
}

#recommendGlobal .list-item .works-info .author-info .avatar {
    width: .4rem;
    height: .4rem;
    margin-right: .1rem;
    border-radius: .2rem;
    overflow: hidden;
    display: none
}

#recommendGlobal .list-item .works-info .author-info .avatar img {
    width: .4rem;
    height: .4rem;
    object-fit: cover;
    display: block
}

#recommendGlobal .list-item .works-info .author-info .nickname {
    height: 20px;
    line-height: 20px
}

#recommendGlobal .list-item .works-info .author-info .nickname a {
    color: #999;
    font-size: 14px;
    display: block
}

#recommendGlobal .list-item .works-info .publish-time {
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #999;
    margin-left: auto
}

.recommend-author .section-body .section-list {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start
}

.recommend-author .section-body .section-list .list-item {
    width: calc((100% - 1.05rem)/ 8);
    height: 2.55rem;
    background: #fff;
    box-shadow: 0 .01rem .1rem 0 #efefef;
    padding: .15rem;
    margin-right: .15rem
}

.recommend-author .section-body .section-list .list-item:last-child {
    margin-right: 0
}

.recommend-author .section-body .section-list .list-item .avatar {
    width: .7rem;
    height: .75rem;
    position: relative;
    padding-bottom: .05rem;
    margin: 0 auto .1rem
}

.recommend-author .section-body .section-list .list-item .avatar .isVip-icon {
    width: .16rem;
    height: .16rem;
    line-height: .16rem;
    background-color: #e80000;
    border-radius: .08rem;
    text-align: center;
    position: absolute;
    right: .14rem;
    bottom: 0
}

.recommend-author .section-body .section-list .list-item .avatar .isVip-icon i {
    font-size: .12rem;
    color: #fff;
    display: block
}

.recommend-author .section-body .section-list .list-item .avatar .avatar-container {
    width: .7rem;
    height: .7rem;
    border-radius: .35rem;
    overflow: hidden;
    background-color: #f7f8fa;
    box-shadow: 0 .01rem .04rem 0 rgb(0 0 0 / 10%)
}

.recommend-author .section-body .section-list .list-item .avatar .avatar-container img {
    width: .7rem;
    height: .7rem;
    object-fit: cover;
    display: block
}

.recommend-author .section-body .section-list .list-item .nickname {
    width: 100%;
    height: .25rem;
    line-height: .25rem;
    text-align: center;
    margin-bottom: .1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.recommend-author .section-body .section-list .list-item .nickname a {
    color: #2b2929;
    font-size: .18rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.recommend-author .section-body .section-list .list-item .data-info {
    width: 100%;
    height: .2rem;
    line-height: .2rem;
    margin-bottom: .1rem;
    display: flex
}

.recommend-author .section-body .section-list .list-item .data-info span {
    width: 50%;
    height: .2rem;
    line-height: .2rem;
    text-align: center;
    font-size: .12rem;
    color: #2b2929
}

.recommend-author .section-body .section-list .list-item .data-info span i {
    color: #e80000;
    font-size: .14rem;
    font-weight: 700;
    margin-right: .03rem
}

.recommend-author .section-body .section-list .list-item .author-desc {
    width: 100%;
    height: .2rem;
    line-height: .2rem;
    color: #999;
    font-size: .14rem;
    margin-bottom: .2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.recommend-author .section-body .section-list .list-item .follow-btn {
    width: 100%;
    height: .24rem
}

.recommend-author .section-body .section-list .list-item .follow-btn span {
    display: block;
    width: .58rem;
    height: .24rem;
    line-height: .24rem;
    border-radius: .02rem;
    text-align: center;
    font-size: .16rem;
    color: #fff;
    background-color: #e80000;
    cursor: pointer;
    margin: 0 auto
}

.recommend-author .section-body .section-list .list-item .follow-btn span:hover {
    background-color: rgba(232, 0, 0, .76)
}

.recommend-author .section-body .section-list .list-item .follow-btn span.act {
    width: .64rem;
    background-color: #f7f8fa;
    color: #999
}

.recommend-video .section-body .section-list {
    width: 100%;
    height: auto
}

.recommend-video .section-body .section-list .static-list {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap
}

.recommend-video .section-body .section-list .reload-list {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap
}

.recommend-video .section-body .section-list .list-item {
    width: calc((100% - .8rem)/ 5);
    height: auto;
    background: #fff;
    margin-bottom: .35rem;
    margin-right: .2rem
}

.recommend-video .section-body .section-list .list-item:nth-child(5n) {
    margin-right: 0
}

.recommend-video .section-body .section-list .list-item .cover {
    width: 100%;
    height: auto;
    background: #f7f8fa;
    border-radius: 8px;
    margin-bottom: .15rem;
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
    aspect-ratio: 16/9;
    z-index: 0
}

.recommend-video .section-body .section-list .list-item .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .6s;
    position: absolute;
    left: 0;
    top: 0
}

#recommendShortVideo {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start
}

#recommendShortVideo .list-item {
    width: calc((100% - .75rem)/ 6);
    height: auto;
    margin-right: .15rem
}

#recommendShortVideo .list-item:nth-child(6) {
    margin-right: 0
}

#recommendShortVideo .list-item .cover {
    width: 100%;
    height: auto;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    padding-top: 177.78%;
    aspect-ratio: 9/16;
    z-index: 0
}

#recommendShortVideo .list-item .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0
}

#recommendShortVideo .list-item .cover .cover-bottom {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000);
    padding: .1rem
}

#recommendShortVideo .list-item .cover .cover-bottom .data-info {
    width: 100%;
    height: .15rem;
    line-height: .15rem;
    margin-bottom: .1rem;
    display: flex
}

#recommendShortVideo .list-item .cover .cover-bottom .data-info span {
    height: .15rem;
    line-height: .15rem;
    text-align: center;
    font-size: .12rem;
    color: #fff
}

#recommendShortVideo .list-item .cover .cover-bottom .data-info span i {
    color: #fff;
    font-size: .14rem;
    margin-right: .03rem
}

#recommendShortVideo .list-item .cover .cover-bottom .data-info span:last-child {
    margin-left: auto
}

#recommendShortVideo .list-item .cover .cover-bottom .title {
    width: 100%;
    height: auto;
    line-height: 22px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-all;
    text-align: justify;
    color: #efefef;
    font-size: 15px
}

#recommendShortVideo .list-item .works-info {
    width: 100%;
    height: .4rem;
    display: none
}

#recommendShortVideo .list-item .works-info .author-info {
    width: calc(100% - .6rem);
    height: .4rem;
    display: flex
}

#recommendShortVideo .list-item .works-info .author-info .avatar {
    width: .4rem;
    height: .4rem;
    margin-right: .1rem;
    border-radius: .2rem;
    overflow: hidden
}

#recommendShortVideo .list-item .works-info .author-info .avatar img {
    width: .4rem;
    height: .4rem;
    object-fit: cover;
    display: block
}

#recommendShortVideo .list-item .works-info .author-info .nickname {
    flex: 1;
    height: 44px;
    padding: .09rem 0;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#recommendShortVideo .list-item .works-info .author-info .nickname a {
    color: #2b2929;
    font-size: .16rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#recommendShortVideo .list-item .works-info .publish-time {
    width: .6rem;
    height: .4rem;
    padding: .1rem 0;
    line-height: .2rem;
    font-size: .14rem;
    color: #999;
    margin-left: auto;
    text-align: right
}

#recommendChequan {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start
}

#recommendChequan .list-item {
    width: calc((100% - 1rem)/ 6);
    height: auto;
    background: #fff;
    box-shadow: 0 .01rem .1rem 0 #efefef;
    padding: .2rem;
    margin-right: .2rem
}

#recommendChequan .list-item:nth-child(6) {
    margin-right: 0
}

#recommendChequan .list-item .cq-header {
    width: 100%;
    height: auto;
    position: relative;
    padding-bottom: .25rem;
    z-index: 0
}

#recommendChequan .list-item .cq-header .cq-cover {
    width: 100%;
    height: auto;
    border-radius: .05rem;
    overflow: hidden;
    position: relative;
    background-color: #f7f8fa;
    padding-top: 40%;
    aspect-ratio: 35/14
}

#recommendChequan .list-item .cq-header .cq-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    filter: blur(.05rem);
    transform: scale(1.5)
}

@keyframes fadestyle {
    from {
        filter: blur(.05rem);
        transform: scale(1.5)
    }

    to {
        filter: blur(0);
        transform: scale(1)
    }
}

#recommendChequan .list-item:hover .cq-header .cq-cover img {
    animation-name: fadestyle;
    animation-duration: 1s;
    animation-fill-mode: forwards
}

#recommendChequan .list-item .cq-header .cq-avatar {
    width: .5rem;
    height: .5rem;
    border-radius: .25rem;
    overflow: hidden;
    border: .01rem solid #fff;
    position: absolute;
    left: .15rem;
    bottom: 0;
    z-index: 20;
    background-color: #f7f8fa;
    box-shadow: 0 .01rem .04rem 0 rgba(0, 0, 0, .1)
}

#recommendChequan .list-item .cq-header .cq-avatar img {
    width: .5rem;
    height: .5rem;
    object-fit: cover;
    display: block
}

#recommendChequan .list-item .cq-info {
    width: 100%;
    height: .97rem;
    padding-bottom: .2rem;
    margin-bottom: .2rem;
    position: relative
}

#recommendChequan .list-item .cq-info::after {
    content: '';
    width: 100%;
    height: .01rem;
    background-image: linear-gradient(to right, #efefef 0, #efefef 50%, transparent 50%);
    background-size: .1rem .1rem;
    background-repeat: repeat-x;
    position: absolute;
    bottom: 0;
    left: 0
}

#recommendChequan .list-item .cq-info .cq-name {
    width: 100%;
    height: .55rem;
    padding: .15rem 0;
    line-height: .25rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#recommendChequan .list-item .cq-info .cq-name a {
    color: #2b2929;
    font-size: .18rem;
    font-weight: 700;
    display: block
}

#recommendChequan .list-item .cq-info .cq-info-bottom {
    width: 100%;
    height: .22rem;
    display: flex
}

#recommendChequan .list-item .cq-info .cq-info-bottom .cq-member {
    flex: 1;
    height: .22rem;
    line-height: .2rem;
    padding: .01rem 0;
    display: flex;
    color: #2b2929;
    font-size: .12rem
}

#recommendChequan .list-item .cq-info .cq-info-bottom .cq-member .avatars {
    margin-right: .05rem;
    display: flex;
    position: relative
}

#recommendChequan .list-item .cq-info .cq-info-bottom .cq-member .avatars span {
    display: block;
    width: .2rem;
    height: .2rem;
    background-color: #f7f8fa;
    border-radius: .1rem;
    overflow: hidden
}

#recommendChequan .list-item .cq-info .cq-info-bottom .cq-member .avatars span img {
    width: .2rem;
    height: .2rem;
    object-fit: cover
}

#recommendChequan .list-item .cq-info .cq-info-bottom .cq-member .avatars span:nth-child(2) {
    margin-left: -.08rem
}

#recommendChequan .list-item .cq-info .cq-info-bottom .cq-member .avatars span:nth-child(3) {
    margin-left: -.08rem
}

#recommendChequan .list-item .cq-info .cq-info-bottom .cq-member i {
    color: #e80000;
    font-size: .12rem;
    line-height: .2rem
}

#recommendChequan .list-item .cq-info .cq-info-bottom .apply-btn {
    width: .5rem;
    height: 22px;
    line-height: 22px;
    background: #e80000;
    border-radius: .02rem;
    text-align: center;
    color: #fff;
    font-size: .14rem;
    cursor: pointer;
    margin-left: auto
}

#recommendChequan .list-item .cq-info .cq-info-bottom .apply-btn:hover {
    background: rgba(232, 0, 0, .76)
}

#recommendChequan .list-item .cq-info .cq-info-bottom .apply-btn.act {
    background: #f7f8fa;
    color: #999;
    width: .56rem
}

#recommendChequan .list-item .cq-newslist {
    width: 100%;
    height: 1.5rem
}

#recommendChequan .list-item .cq-newslist .cq-list-item {
    width: 100%;
    height: .4rem;
    display: flex;
    margin-bottom: .15rem
}

#recommendChequan .list-item .cq-newslist .cq-list-item:last-child {
    margin-bottom: 0
}

#recommendChequan .list-item .cq-newslist .cq-list-item .member-avatar {
    width: .3rem;
    height: .3rem;
    border-radius: .15rem;
    overflow: hidden;
    margin-right: .1rem;
    background-color: #f7f8fa;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1)
}

#recommendChequan .list-item .cq-newslist .cq-list-item .member-avatar img {
    width: .3rem;
    height: .3rem;
    object-fit: cover;
    display: block
}

#recommendChequan .list-item .cq-newslist .cq-list-item .cq-title {
    flex: 1;
    height: .4rem;
    line-height: .2rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-all;
    color: #999
}

#recommendChequan .list-item .cq-newslist .cq-list-item .cq-title a {
    color: #999;
    font-size: .14rem;
    display: block
}

.new-energy .section-body .section-list {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap
}

.new-energy .section-body .section-list .list-item {
    width: calc((100% - .6rem)/ 4);
    height: auto;
    margin-bottom: .35rem;
    margin-right: .2rem
}

.new-energy .section-body .section-list .list-item:nth-child(4n) {
    margin-right: 0
}

.new-energy .section-body .section-list .list-item .cover {
    width: 100%;
    height: auto;
    background: #f7f8fa;
    margin-bottom: .15rem;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
    aspect-ratio: 16/9;
    z-index: 0
}

.new-energy .section-body .section-list .list-item .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .6s;
    position: absolute;
    left: 0;
    top: 0
}

.new-energy .section-body .section-list .list-item .cover .replace-img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 56.25%;
    aspect-ratio: 16/9
}

.guess-you-like .section-body .section-list {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap
}

.guess-you-like .section-body .section-list .list-item {
    width: calc((100% - .8rem)/ 5);
    height: auto;
    margin-bottom: .35rem;
    margin-right: .2rem
}

.guess-you-like .section-body .section-list .list-item:nth-child(5n) {
    margin-right: 0
}

.guess-you-like .section-body .section-list .list-item .cover {
    width: 100%;
    height: auto;
    background: #f7f8fa;
    border-radius: 8px;
    margin-bottom: .1rem;
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
    aspect-ratio: 16/9;
    z-index: 0
}

.guess-you-like .section-body .section-list .list-item .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .6s;
    position: absolute;
    left: 0;
    top: 0
}

.brand-channel .section-body .section-list {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap
}

.brand-channel .section-body .section-list .list-item {
    width: calc((100% - .8rem)/ 5);
    height: auto;
    margin-bottom: .35rem;
    margin-right: .2rem
}

.brand-channel .section-body .section-list .list-item:nth-child(5n) {
    margin-right: 0
}

.brand-channel .section-body .section-list .list-item .cover {
    width: 100%;
    height: auto;
    background: #f7f8fa;
    margin-bottom: .1rem;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
    aspect-ratio: 16/9;
    z-index: 0
}

.brand-channel .section-body .section-list .list-item .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .6s;
    position: absolute;
    left: 0;
    top: 0
}

#brandRank {
    width: 100%;
    height: 100%
}

#brandRank .list-item {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: flex-start;
    padding: 5px 0
}

#brandRank .list-item .rankNo {
    width: .3rem;
    height: auto;
    align-self: center;
    text-align: center;
    color: #999;
    font-size: .16rem
}

#brandRank .list-item:nth-child(1) .rankNo {
    color: #e80000;
    font-size: .18rem;
    font-weight: 700
}

#brandRank .list-item:nth-child(2) .rankNo {
    color: #e97e1d;
    font-size: .18rem;
    font-weight: 700
}

#brandRank .list-item:nth-child(3) .rankNo {
    color: #e9ad1d;
    font-size: .18rem;
    font-weight: 700
}

#brandRank .list-item .brand-logo {
    width: calc(10% - .1rem);
    height: 100%;
    padding: 0;
    text-align: center;
    margin-left: .1rem;
    margin-right: .1rem;
    position: relative
}

#brandRank .list-item .brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block
}

#brandRank .list-item .brand-name {
    align-self: center;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#brandRank .list-item .brand-name a {
    font-size: 15px;
    color: #2b2929;
    display: block
}

#brandRank .list-item .brand-data {
    flex: 1;
    text-align: right;
    align-self: center;
    font-size: .12rem;
    color: #999
}

#brandRank .list-item .brand-data i {
    color: #ff9717;
    font-size: .18rem;
    margin-left: .05rem
}

#brandRank .list-item .brand-yq {
    width: .4rem;
    height: .7rem;
    line-height: .7rem;
    text-align: right;
    text-align: right;
    font-size: .16rem;
    margin-left: auto;
    display: none
}

#brandRank .list-item .brand-yq.positive {
    color: #e80000
}

#brandRank .list-item .brand-yq.neutral {
    color: #4376fd
}

#brandRank .list-item .brand-yq.negative {
    color: #2b2929
}

#allRank {
    width: 100%;
    height: 5.15rem;
    display: flex;
    justify-content: space-between
}

#allRank .rank-list-container {
    width: calc((100% - .6rem)/ 4);
    height: auto;
    box-shadow: 0 .01rem .1rem 0 #efefef
}

#allRank .rank-list-container .rank-list-header {
    width: 100%;
    height: .55rem;
    padding: .15rem .2rem;
    display: flex
}

#allRank .rank-list-container .rank-list-header.jiangjia-rank-header {
    background: url(../image/homepage_rank_car_bg.png) no-repeat;
    background-size: cover
}

#allRank .rank-list-container .rank-list-header.baozhi-rank-header {
    background: url(../image/homepage_rank_suv_bg.png) no-repeat;
    background-size: cover
}

#allRank .rank-list-container .rank-list-header.xuhang-rank-header {
    background: url(../image/homepage_rank_mpv_bg.png) no-repeat;
    background-size: cover
}

#allRank .rank-list-container .rank-list-header.redu-rank-header {
    background: url(../image/homepage_rank_new_energy_bg.png) no-repeat;
    background-size: cover
}

#allRank .rank-list-container .rank-list-header .title {
    height: .25rem;
    line-height: .25rem;
    text-align: left;
    font-size: .18rem;
    color: #fff
}

#allRank .rank-list-container .rank-list-header .load-more-btn {
    height: .25rem;
    line-height: .25rem;
    text-align: left;
    font-size: .12rem;
    color: #fff;
    margin-left: auto
}

#allRank .rank-list-container .rank-list-header .load-more-btn a {
    font-size: .12rem;
    color: #fff
}

#allRank .rank-list-container .rank-list-header .load-more-btn i {
    font-size: .12rem;
    color: #fff
}

#allRank .rank-list-container .rank-list {
    width: 100%;
    height: auto;
    padding: .05rem .2rem
}

#allRank .rank-list-container .rank-list .rank-list-item {
    width: 100%;
    height: .9rem;
    padding: .15rem 0;
    display: flex;
    justify-content: flex-start
}

#allRank .rank-list-container .rank-list .rank-list-item .all-rank-num {
    width: .24rem;
    height: .6rem;
    padding: .11rem 0;
    text-align: center
}

#allRank .rank-list-container .rank-list .rank-list-item .all-rank-num .num {
    width: 100%;
    height: .38rem;
    line-height: .38rem;
    text-align: center;
    font-size: .16rem;
    color: #999
}

#allRank .rank-list-container .rank-list .rank-list-item:nth-child(1) .all-rank-num .num {
    font-size: .24rem;
    color: #e80000;
    font-weight: 700
}

#allRank .rank-list-container .rank-list .rank-list-item:nth-child(2) .all-rank-num .num {
    font-size: .24rem;
    color: #e97e1d;
    font-weight: 700
}

#allRank .rank-list-container .rank-list .rank-list-item:nth-child(3) .all-rank-num .num {
    font-size: .24rem;
    color: #e9ad1d;
    font-weight: 700
}

#allRank .rank-list-container .rank-list .rank-list-item .all-rank-num .status {
    width: 100%;
    height: .14rem;
    line-height: .14rem;
    text-align: center;
    font-size: .12rem
}

#allRank .rank-list-container .rank-list .rank-list-item .all-rank-num .status i {
    font-size: .12rem
}

#allRank .rank-list-container .rank-list .rank-list-item .all-rank-num .status.up {
    color: #ff3535
}

#allRank .rank-list-container .rank-list .rank-list-item .all-rank-num .status.down {
    color: #26ae00
}

#allRank .rank-list-container .rank-list .rank-list-item .all-rank-num .status.steady {
    color: #999
}

#allRank .rank-list-container .rank-list .rank-list-item .series-img {
    width: 36%;
    height: .6rem;
    overflow: hidden;
    margin-right: .15rem
}

#allRank .rank-list-container .rank-list .rank-list-item .series-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

#allRank .rank-list-container .rank-list .rank-list-item .series-info {
    width: calc(64% - .39rem);
    height: .6rem;
    padding: .09rem 0
}

#allRank .rank-list-container .rank-list .rank-list-item .series-info .series-name {
    width: 100%;
    height: 22px;
    line-height: 22px;
    margin-bottom: .05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#allRank .rank-list-container .rank-list .rank-list-item .series-info .series-name a {
    color: #333;
    font-size: .16rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#allRank .rank-list-container .rank-list .rank-list-item .series-info .sale-num {
    width: 100%;
    height: .2rem;
    line-height: .2rem;
    font-size: .12rem;
    color: #999
}

#allRank .rank-list-container .rank-list .rank-list-item .series-info .sale-num i {
    font-size: .14rem;
    color: #e80000
}

#allRank .rank-list-container .rank-list#redu_rank_list .rank-list-item .series-img {
    width: 30%;
    height: .6rem;
    overflow: hidden;
    margin-right: .15rem
}

#allRank .rank-list-container .rank-list#redu_rank_list .rank-list-item .series-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1)
}

#allRank .rank-list-container .rank-list#redu_rank_list .rank-list-item .series-info {
    width: calc(70% - .44rem);
    height: .6rem;
    padding: .05rem 0
}

#allRank .rank-list-container .rank-list#redu_rank_list .rank-list-item .all-rank-num {
    width: .24rem;
    height: .6rem;
    margin-right: .05rem
}

#saleRank {
    width: 100%;
    height: 5.15rem;
    display: flex;
    justify-content: space-between
}

#saleRank .rank-list-container {
    width: calc((100% - .6rem)/ 4);
    height: auto;
    box-shadow: 0 .01rem .1rem 0 #efefef
}

#saleRank .rank-list-container .rank-list-header {
    width: 100%;
    height: .55rem;
    padding: .15rem .2rem;
    display: flex
}

#saleRank .rank-list-container .rank-list-header.car-rank-header {
    background: url(../image/homepage_rank_car_bg.png) no-repeat;
    background-size: cover
}

#saleRank .rank-list-container .rank-list-header.suv-rank-header {
    background: url(../image/homepage_rank_suv_bg.png) no-repeat;
    background-size: cover
}

#saleRank .rank-list-container .rank-list-header.mpv-rank-header {
    background: url(../image/homepage_rank_mpv_bg.png) no-repeat;
    background-size: cover
}

#saleRank .rank-list-container .rank-list-header.newenergy-rank-header {
    background: url(../image/homepage_rank_new_energy_bg.png) no-repeat;
    background-size: cover
}

#saleRank .rank-list-container .rank-list-header .title {
    height: .25rem;
    line-height: .25rem;
    text-align: left;
    font-size: .18rem;
    color: #fff
}

#saleRank .rank-list-container .rank-list-header .load-more-btn {
    height: .25rem;
    line-height: .25rem;
    text-align: left;
    font-size: .12rem;
    color: #fff;
    margin-left: auto
}

#saleRank .rank-list-container .rank-list-header .load-more-btn a {
    font-size: .12rem;
    color: #fff
}

#saleRank .rank-list-container .rank-list-header .load-more-btn i {
    font-size: .12rem;
    color: #fff
}

#saleRank .rank-list-container .rank-list {
    width: 100%;
    height: auto;
    padding: .05rem .2rem
}

#saleRank .rank-list-container .rank-list .rank-list-item {
    width: 100%;
    height: .9rem;
    padding: .15rem 0;
    display: flex;
    justify-content: flex-start
}

#saleRank .rank-list-container .rank-list .rank-list-item .sale-rank {
    width: .24rem;
    height: .6rem;
    padding: .11rem 0;
    text-align: center
}

#saleRank .rank-list-container .rank-list .rank-list-item .sale-rank .num {
    width: 100%;
    height: .24rem;
    line-height: .24rem;
    text-align: center;
    font-size: .16rem;
    color: #999
}

#saleRank .rank-list-container .rank-list .rank-list-item:nth-child(1) .sale-rank .num {
    font-size: .24rem;
    color: #e80000;
    font-weight: 700
}

#saleRank .rank-list-container .rank-list .rank-list-item:nth-child(2) .sale-rank .num {
    font-size: .24rem;
    color: #e97e1d;
    font-weight: 700
}

#saleRank .rank-list-container .rank-list .rank-list-item:nth-child(3) .sale-rank .num {
    font-size: .24rem;
    color: #e9ad1d;
    font-weight: 700
}

#saleRank .rank-list-container .rank-list .rank-list-item .sale-rank .status {
    width: 100%;
    height: .14rem;
    line-height: .14rem;
    text-align: center;
    font-size: .12rem
}

#saleRank .rank-list-container .rank-list .rank-list-item .sale-rank .status i {
    font-size: .12rem
}

#saleRank .rank-list-container .rank-list .rank-list-item .sale-rank .status.up {
    color: #ff3535
}

#saleRank .rank-list-container .rank-list .rank-list-item .sale-rank .status.down {
    color: #26ae00
}

#saleRank .rank-list-container .rank-list .rank-list-item .sale-rank .status.steady {
    color: #999
}

#saleRank .rank-list-container .rank-list .rank-list-item .sale-rank {
    width: .24rem;
    height: .6rem
}

#saleRank .rank-list-container .rank-list .rank-list-item .series-img {
    width: 60%;
    height: .6rem;
    overflow: hidden;
    margin-right: .15rem
}

#saleRank .rank-list-container .rank-list .rank-list-item .series-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.4);
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4)
}

#saleRank .rank-list-container .rank-list .rank-list-item .series-info {
    width: 100%;
    height: .6rem;
    padding: .09rem 0
}

#saleRank .rank-list-container .rank-list .rank-list-item .series-info .series-name {
    width: 100%;
    height: 22px;
    line-height: 22px;
    margin-bottom: .05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#saleRank .rank-list-container .rank-list .rank-list-item .series-info .series-name a {
    color: #333;
    font-size: .16rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#saleRank .rank-list-container .rank-list .rank-list-item .series-info .sale-num {
    width: 100%;
    height: .2rem;
    line-height: .2rem;
    font-size: .12rem;
    color: #e80000
}

#saleRank .rank-list-container .rank-list .rank-list-item .series-info .sale-num i {
    font-size: .14rem
}

.default-left .section-body {
    width: 100%;
    height: auto
}

.default-left .section-body .section-list .list-item .cover:hover+.title a {
    color: #e80000
}

.default-left .section-body .section-list .list-item .cover img:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05)
}

.default-left .section-body .section-list .list-item .cover .replace-img img {
    width: 40% !important;
    height: auto !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.default-left .section-body .section-list .list-item .cover .replace-img img:hover {
    transform: translate(-50%, -50%)
}

.default-left .section-body .section-list .list-item .cover span.original {
    display: block;
    width: .5rem;
    height: .26rem;
    line-height: .26rem;
    background: #e80000;
    border-radius: .02rem;
    text-align: center;
    color: #fff;
    font-size: .14rem;
    position: absolute;
    left: .04rem;
    top: .05rem;
    z-index: 99;
    display: none
}

.default-left .section-body .section-list .list-item .cover .data-info {
    width: 100%;
    height: 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    padding: 0 6px;
    align-items: center
}

.default-left .section-body .section-list .list-item .cover:hover .data-info {
    display: none
}

.default-left .section-body .section-list .list-item .cover .data-info span {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    color: #fff;
    font-size: 12px
}

.default-left .section-body .section-list .list-item .cover .data-info span.duration,
.default-left .section-body .section-list .list-item .cover .data-info span.static-page-duration {
    margin-left: auto;
    height: 20px;
    padding: 0 5px;
    background-color: rgba(0, 0, 0, .6);
    border-radius: 3px;
    overflow: hidden
}

.default-left .section-body .section-list .list-item .cover .data-info span i {
    margin-right: 3px;
    font-size: 12px
}

.default-left .section-body .section-list .list-item .title {
    width: 100%;
    height: 44px;
    line-height: 22px;
    margin-bottom: .1rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-all;
    font-size: 15px
}

.default-left .section-body .section-list .list-item .title a {
    color: #2b2929;
    display: block
}

.default-left .section-body .section-list .list-item .title a:hover {
    color: #e80000
}

.default-left .section-body .section-list .list-item .works-info {
    width: 100%;
    height: .2rem;
    display: flex
}

.default-left .section-body .section-list .list-item .works-info .author-info {
    width: calc(100% - .8rem);
    height: .2rem;
    display: flex
}

.default-left .section-body .section-list .list-item .works-info .author-info .avatar {
    width: .36rem;
    height: .36rem;
    margin-right: .1rem;
    border-radius: .18rem;
    overflow: hidden;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
    display: none
}

.default-left .section-body .section-list .list-item .works-info .author-info .avatar img {
    width: .36rem;
    height: .36rem;
    object-fit: cover;
    display: block
}

.default-left .section-body .section-list .list-item .works-info .author-info .nickname {
    flex: 1;
    height: .2rem;
    line-height: .2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.default-left .section-body .section-list .list-item .works-info .author-info .nickname a {
    color: #999;
    font-size: 14px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.default-left .section-body .section-list .list-item .works-info .publish-time {
    width: .8rem;
    height: .2rem;
    text-align: right;
    line-height: .2rem;
    font-size: 14px;
    color: #999;
    margin-left: auto
}

.default-rank-list .rank-item {
    width: 100%;
    height: .69rem;
    margin-bottom: .15rem;
    display: flex
}

.default-rank-list .rank-item .cover {
    width: 1.24rem;
    height: .69rem;
    margin-right: .1rem;
    background-color: #f7f8fa;
    border-radius: 6px;
    overflow: hidden;
    position: relative
}

.default-rank-list .rank-item .cover:hover+.works-info .title a {
    color: #e80000
}

.default-rank-list .rank-item .cover img {
    display: block;
    width: 1.24rem;
    height: .69rem;
    object-fit: cover
}

.default-rank-list .rank-item .cover .replace-img img {
    width: 40% !important;
    height: auto !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.default-rank-list .rank-item .cover .replace-img img:hover {
    transform: translate(-50%, -50%)
}

.default-rank-list .rank-item .cover .data-info {
    width: 100%;
    height: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    padding: 0 5px;
    align-items: center
}

.default-rank-list .rank-item .cover .data-info span {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    color: #fff;
    font-size: 12px;
    margin-right: .2rem;
    display: none
}

.default-rank-list .rank-item .cover .data-info span:last-child {
    margin-left: auto;
    margin-right: 0;
    display: block;
    background-color: rgba(0, 0, 0, .6);
    border-radius: 3px;
    line-height: 20px;
    padding: 0 3px;
    font-size: 12px;
    color: #fff
}

.default-rank-list .rank-item .cover .data-info span i {
    margin-right: 3px;
    font-size: 12px
}

.default-rank-list .rank-item .cover span.rankNo {
    display: block;
    width: .2rem;
    height: .2rem;
    text-align: center;
    line-height: .2rem;
    color: #fff;
    font-size: 16px;
    position: absolute;
    left: 0;
    top: 0
}

.default-rank-list .rank-item:nth-child(1) .cover span.rankNo {
    background-color: rgba(232, 0, 0, .9)
}

.default-rank-list .rank-item:nth-child(2) .cover span.rankNo {
    background-color: rgba(233, 126, 29, .9)
}

.default-rank-list .rank-item:nth-child(3) .cover span.rankNo {
    background-color: rgba(233, 173, 29, .9)
}

.default-rank-list .rank-item .works-info {
    flex: 1;
    height: .69rem
}

.default-rank-list .rank-item .works-info .title {
    width: 100%;
    height: 44px;
    line-height: 22px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-all;
    margin-bottom: .05rem
}

.default-rank-list .rank-item .works-info .title a {
    color: #2b2929;
    font-size: 15px;
    display: block
}

.default-rank-list .rank-item .works-info .title a:hover {
    color: #e80000
}

.default-rank-list .rank-item .works-info .author-info {
    width: 100%;
    height: .2rem;
    display: flex
}

.default-rank-list .rank-item .works-info .author-info span {
    display: inline-block;
    height: .2rem;
    line-height: .2rem
}

.default-rank-list .rank-item .works-info .author-info span a {
    font-size: .13rem;
    color: #999;
    display: block
}

.default-rank-list .rank-item .works-info .author-info span:last-child {
    font-size: .13rem;
    color: #999;
    margin-left: auto
}

.default-rank-list .rank-item.noImg {
    width: 100%;
    height: 22px;
    line-height: 22px;
    margin-bottom: .15rem
}

.default-rank-list .rank-item.noImg span {
    display: inline-block;
    width: .25rem;
    height: 22px;
    line-height: 22px;
    text-align: left;
    color: #999;
    font-size: .16rem
}

.default-rank-list .rank-item.noImg a {
    flex: 1;
    color: #2b2929;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.default-rank-list .rank-item.noImg a:hover {
    color: #e80000
}

.default-rank-list .rank-item:last-child {
    margin-bottom: 0
}

.gallery .section-body .section-list {
    width: 100%;
    height: auto
}

.gallery .section-body .section-list .reload-list {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap
}

.gallery .section-body .section-list .static-list {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap
}

.gallery .section-body .section-list .list-item {
    width: calc((100% - .8rem)/ 5);
    height: auto;
    margin-bottom: .35rem;
    margin-right: .2rem
}

.gallery .section-body .section-list .list-item:nth-child(5n) {
    margin-right: 0
}

.gallery .section-body .section-list .list-item .cover {
    width: 100%;
    height: auto;
    background: #f7f8fa;
    margin-bottom: .15rem;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
    aspect-ratio: 16/9;
    z-index: 0
}

.gallery .section-body .section-list .list-item .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .6s;
    position: absolute;
    left: 0;
    top: 0
}

#galleryList .rank-item .cover .data-info span {
    display: none
}

.right-aside-container {
    width: .89rem;
    min-width: 70px;
    height: auto;
    position: fixed;
    right: 0;
    top: 50%;
    border: .01rem solid #efefef;
    background-color: #fff;
    transform: translateY(-50%);
    z-index: 1001;
    display: none
}

.right-aside-container .anchor-container {
    width: 100%;
    height: auto
}

.right-aside-container .anchor-container span {
    display: block;
    width: 100%;
    height: .4rem;
    padding: .1rem 0;
    line-height: .2rem;
    font-size: .14rem;
    color: #2b2929;
    text-align: center;
    cursor: pointer
}

.right-aside-container .anchor-container span:hover {
    background-color: #f7f8fa
}

.right-aside-container .anchor-container span.act {
    background-color: #e80000;
    color: #fff
}

.right-aside-container .rs-btn {
    width: 100%;
    height: .45rem;
    line-height: .44rem;
    text-align: center;
    border-top: .01rem solid #efefef;
    cursor: pointer
}

.drag-handle {
    background-color: rgba(232, 0, 0, .76)
}

.right-aside-container .rs-btn a {
    display: block;
    width: 100%;
    height: 100%;
    color: #999;
    font-size: .14rem
}

.right-aside-container .rs-btn i {
    font-size: .18rem;
    color: #999;
    display: block
}

.right-aside-container .rs-btn.design i {
    font-size: .2rem
}

.right-aside-container .rs-btn:hover {
    background-color: #f7f8fa
}

.right-aside-container .rs-btn.design {
    display: none
}

.right-aside-container .rs-btn.ai i {
    font-size: .2rem
}

#order_layer {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, .46)
}

.home-mini-nav {
    width: .8rem;
    height: auto;
    position: fixed;
    top: 86px;
    left: 50%;
    margin-left: -9rem;
    background-color: #f7f8fa;
    display: none
}

.home-mini-nav .mini-nav-btn {
    width: .8rem;
    height: .7rem;
    padding: .1rem;
    color: #2b2929
}

.home-mini-nav .mini-nav-btn a {
    color: #2b2929;
    font-family: PingFangSC-Regular;
    font-weight: 400
}

.home-mini-nav .mini-nav-btn i {
    display: block;
    font-size: .23rem;
    text-align: center;
    margin-bottom: .02rem
}

.home-mini-nav .mini-nav-btn span {
    display: block;
    width: 100%;
    height: .25rem;
    line-height: .25rem;
    font-size: .16rem;
    text-align: center;
    font-family: PingFangSC-Regular;
    font-weight: 400
}

.home-mini-nav .mini-nav-btn:hover {
    background-color: rgba(232, 0, 0, .08)
}

.home-mini-nav .mini-nav-btn.act {
    background-color: #e80000;
    color: #fff
}

.home-mini-nav .mini-nav-btn.act a {
    color: #fff
}

.home-mini-nav .mini-nav-btn.phone {
    line-height: .5rem;
    text-align: center;
    position: relative
}

.home-mini-nav .mini-nav-btn.phone i {
    display: inline;
    font-size: .23rem;
    display: block
}

.home-mini-nav .mini-nav-btn.phone .mini-nav-qrcode {
    width: 170px;
    height: auto;
    padding: 15px;
    background-color: #fff;
    position: absolute;
    left: .8rem;
    bottom: 0;
    box-shadow: 0 0 7px -2px #a1a1a1;
    display: none
}

.home-mini-nav .mini-nav-btn.phone .mini-nav-qrcode #mini_nav_qrcode_box {
    width: 140px;
    height: 140px;
    margin-bottom: 10px
}

.home-mini-nav .mini-nav-btn.phone .mini-nav-qrcode .mini-qrcode-title {
    width: 100%;
    height: 17px;
    line-height: 17px;
    text-align: center;
    font-size: 12px;
    color: #2b2929
}

.about-us-container {
    width: 100%;
    height: auto
}

.about-us-container .content {
    width: 16rem;
    height: auto;
    padding: .2rem 0;
    box-sizing: border-box;
    margin: 0 auto;
    border-top: .01rem solid #efefef;
    display: flex
}

.about-us-container .content .title {
    width: 1rem;
    height: auto;
    display: flex
}

.about-us-container .content .title span {
    line-height: .24rem;
    font-size: .14rem;
    font-weight: 600;
    color: #2b2929
}

.about-us-container .content .links {
    width: calc(100% - 1rem);
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start
}

.about-us-container .content .links a {
    line-height: .24rem;
    font-size: .14rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: #2b2929;
    padding: 0 10px;
    margin-bottom: .1rem
}

.about-us-container .content .links a:hover {
    color: #e80000
}

.footer {
    width: 100%;
    height: auto;
    padding-top: .3rem;
    background: #343434;
    box-sizing: border-box
}

.footer .footer-content {
    width: 16rem;
    height: auto;
    margin: 0 auto
}

.footer .footer-content .links {
    height: .2rem;
    line-height: .2rem;
    text-align: center;
    margin-bottom: .1rem;
    display: flex;
    justify-content: center
}

.footer .footer-content .links a {
    color: #fff;
    font-size: .14rem;
    text-decoration: none;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    display: block
}

.footer .footer-content .links span {
    color: #fff;
    font-size: .14rem;
    padding: 0 .1rem;
    font-family: PingFangSC-Regular;
    font-weight: 400
}

@media screen and (max-width:1280px) {
    .header .header-container {
        width: 100%;
        padding: 0 30px
    }

    .main-container {
        width: 100%;
        min-width: 1200px;
        padding: 0 30px
    }

    #header_nav {
        width: 100%
    }

    #header_nav .nav-container span {
        font-size: 15px
    }

    .movable-container {
        margin-bottom: 15px
    }

    #anchor_10,
    #anchor_11,
    #anchor_3,
    #anchor_7 {
        margin-bottom: 35px
    }

    .movable-container .left-container {
        width: 100%;
        margin-right: 0
    }

    .movable-container .section-header .title {
        font-size: 18px
    }

    .movable-container .section-header .sort-tab span {
        font-size: 15px
    }

    .movable-container .section-header .right-module .load-more-btn a,
    .movable-container .section-header .right-module .refresh-btn {
        font-size: 13px
    }

    .movable-container .right-container {
        display: none
    }

    .homepage-header .banner-container .swiper-slide,
    .homepage-header .banner-right-container .br-item {
        border-radius: 8px
    }

    #recommendGlobal .list-item .cover {
        border-radius: 8px
    }

    .recommend-author .section-body .section-list .list-item {
        width: calc((100% - 100px)/ 6);
        margin-right: 20px;
        border-radius: 8px
    }

    .recommend-author .section-body .section-list .list-item:nth-child(6) {
        margin-right: 0
    }

    .recommend-author .section-body .section-list .list-item:nth-child(7),
    .recommend-author .section-body .section-list .list-item:nth-child(8) {
        display: none
    }

    .recommend-author .section-body .section-list .list-item .nickname a {
        font-size: 15px
    }

    .recommend-author .section-body .section-list .list-item .author-desc {
        height: 20px;
        line-height: 20px;
        font-size: 13px;
        text-align: center
    }

    .recommend-author .section-body .section-list .list-item .data-info span {
        height: 20px;
        line-height: 20px;
        font-size: 12px
    }

    .recommend-author .section-body .section-list .list-item .data-info span i {
        font-size: 13px
    }

    .recommend-author .section-body .section-list .list-item .follow-btn {
        height: 24px
    }

    .recommend-author .section-body .section-list .list-item .follow-btn span {
        width: 58px;
        height: 24px;
        line-height: 24px;
        border-radius: 3px;
        font-size: 13px
    }

    #recommendChequan .list-item .cq-info .cq-name a {
        font-size: 15px
    }

    #recommendChequan .list-item .cq-newslist .cq-list-item .cq-title a {
        font-size: 13px
    }

    #allRank .rank-list-container .rank-list .rank-list-item .series-info {
        padding: 0
    }

    #allRank .rank-list-container .rank-list .rank-list-item .series-info .series-name a,
    #allRank .rank-list-container .rank-list-header .title {
        font-size: 15px
    }

    #allRank .rank-list-container .rank-list#redu_rank_list .rank-list-item .series-info .series-name,
    #allRank .rank-list-container .rank-list#redu_rank_list .rank-list-item .series-info .series-name a {
        height: 44px
    }

    #allRank .rank-list-container .rank-list .rank-list-item .series-info .sale-num {
        height: 20px;
        line-height: 20px;
        font-size: 13px
    }

    #allRank .rank-list-container .rank-list .rank-list-item .series-info .sale-num i,
    #allRank .rank-list-container .rank-list-header .load-more-btn a {
        font-size: 13px
    }

    #saleRank .rank-list-container .rank-list .rank-list-item .series-info {
        padding: 0
    }

    #saleRank .rank-list-container .rank-list .rank-list-item .series-info .series-name a,
    #saleRank .rank-list-container .rank-list-header .title {
        font-size: 15px
    }

    #saleRank .rank-list-container .rank-list .rank-list-item .series-info .sale-num,
    #saleRank .rank-list-container .rank-list .rank-list-item .series-info .sale-num i,
    #saleRank .rank-list-container .rank-list-header .load-more-btn a {
        font-size: 13px
    }

    .about-us-container .content {
        width: 100%;
        padding: 20px 30px
    }

    .about-us-container .content .title span {
        font-size: 15px
    }

    .about-us-container .content .links a {
        font-size: 13px;
        line-height: 24px
    }

    .footer .footer-content {
        width: 100%
    }

    .footer .footer-content .links {
        height: 20px;
        line-height: 20px;
        margin-bottom: 10px
    }

    .footer .footer-content .links a {
        font-size: 13px
    }
}