body {
    background: #161616;
    color: #d5d5d5;
    max-width: 500px;
    margin: 0 auto;
    overflow-x: hidden;
    padding-bottom: 1rem;
}

#app {
    font-size: .24rem;
    font-family: PingFang SC;
    
}

.py11 {
    padding-top: .22rem;
    padding-bottom: .22rem;
}

.py5 {
    padding-top: .1rem;
    padding-bottom: .1rem;
}

.p12 {
    padding: .24rem;
}

.mx7 {
    margin-left: .14rem;
    margin-right: .14rem;
}

.my12 {
    margin-bottom: .24rem;
}

.pt0 {
    padding-top: 0 !important;
}
.px0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.pb10 {
    padding-bottom: .2rem !important;
}
.hidden {
    display: none !important;
}

.is-load .d-load-btn {
    display: block;
}
img {
    object-fit: cover;
}
.v-s-nav-box-h {
    width: 100%;
    /* background-image: url('/static/images/hader-bg1.svg'); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: #1f1f1f;
    margin-bottom: .1rem;
    padding-bottom: 5px;
}

.logo-box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
    padding-bottom: 0;
}


.v-s-nav-search-box {
    display: flex;
    justify-content: space-between;
}
.v-s-logo {
    margin-right: 5px;
}
.v-s-logo img {
    max-width: 2.44rem;
    height: .6rem;
}

.left-img {
    width: 1.08rem;
    height: .6rem;
}

.search-person {
    margin-right: .12rem;
    width: 1.4rem;
    height: .6rem;
    border-radius: .3rem;
    color: #ababaa;
    background: linear-gradient(90deg, #443C35 0%, #2E2E2C 51.64%, #2E2E2C 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: .2rem;
    padding-right: .2rem;
    font-weight: 600;
    white-space: nowrap;
}
.load-img{
    height: .6rem;
    width: 1.8rem;
    border-radius: .16rem;
    margin: 0 .08rem;
}
.s-text {
    margin: 0 .16rem;
}

.bi {
    color: #ababaa;
}

.h-textad {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: .1rem;
    column-gap: 0;
    padding: 0 .24rem;
    font-size: .26rem;
    text-align: center;
    
}

.h-textad .text-c-1 {
    color: #F52E70;
}

.h-textad .text-c-2 {
    color: #FBB369;
}
.jbColor {
    /*animation: flashColor 1.2s infinite;*/
}
.text-c-3 {
  /*font-size: 24px;*/
  animation: flashColor 1.2s infinite;
}
.text-c-2 {
  /*font-size: 24px;*/
  animation: flashColor 1.2s infinite;
}
.text-c-1{
  /*font-size: 24px;*/
  animation: flashColor 1.2s infinite;
}
.text-c-4{
  /*font-size: 24px;*/
  animation: flashColor 1.2s infinite;
}

@keyframes flashColor {
  0%   { color: #FFF93F; }
  25%  { color: #FF67E8; }
  50%  { color: #FF67E8; }
  75%  { color: #DCDCDC; }
  100% { color: #FFF93F; }
}

.top-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 0 .24rem;
}

.top-nav a {
    flex: 0 0 auto;
}

.nav-item {
    padding: 0 .1rem;
    height: .64rem;
    line-height: .64rem;
    text-align: center;
    color: #d5d5d5;
    background-color: #2d2d2d;
    font-weight: 600;
    font-size: .24rem;
    border-radius: .1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.nav-menu-selected {
    /* background: linear-gradient(269.73deg, #2D70DD -60.33%, #C95DBC 99.76%);
    border-radius: .08rem; */
}

.hf-ad {
    display: block;
    padding: .2rem .24rem .24rem .24rem;
    padding-top: 0;
}

.hf-ad .hf-ad-img {
    width: 100%;
    height: auto;
    aspect-ratio:32/5;
    border-radius: 5px;
}


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

a:hover {
    text-decoration: none;
    cursor: pointer
}


/*图标css*/
.xxlink {
    width: 100%;
    background: #FFFFFF;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    border: .0.4rem solid #FFFFFF;
}

.xxlink h3 {
    width: 95%;
    padding: 0 2.5%;
    font-size: .38rem;
    line-height: .52rem;
    background: #fff;
    margin-bottom: .24rem;
    color: #000000;
}

.navi {
    font-size: 0;
    text-align: center
}

.appico {
    width: 16%;
    margin: .1rem 0px;
    height: auto;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
}

.appico p {
    width: 100%;
    height: .38rem;
    line-height: .44rem;
    text-align: center;
    font-size: .22rem;
    margin: 0;
    color: #000000;
    overflow: hidden;
}

.naicon {
    border-radius: .1rem;
    overflow: hidden;
    font-size: 0;
    margin: .01rem
}

.appico img {
    border-radius: .02rem;
    width: 100%
}

.appico:hover .btn-raised {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, .24), 0 0 0 0 rgba(0, 0, 0, .4), 0 0 0 0 rgba(0, 0, 0, .22);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .24), 0 0 0 0 rgba(0, 0, 0, .4), 0 0 0 0 rgba(0, 0, 0, .22)
}

.btnx {
    padding: .16rem .04rem !important;
}

#swiper-banner {
    box-sizing: content-box;
    position: relative;
    padding-bottom: .1rem;
}



#swiper-banner a img {
    width: 6.44rem;
    height: 2.3rem;
    border-radius: .24rem;
}

#swiper-banner .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

#swiper-banner .swiper-slide-active a {
    width: 6.34rem
}



#swiper-banner .swiper-slide-prev img {
    height: 1.98rem;
    margin-top: .16rem;
}

#swiper-banner .swiper-slide-next img {
    height: 1.98rem;
    margin-top: .16rem;
}

#swiper-banner .swiper-slide-prev {
    transform: translateX(.8rem)
}

#swiper-banner .swiper-slide-next {
    transform: translateX(-.8rem)
}




.jx-img {
    width: 100%;
    min-height: 3.92rem;
    max-height: 3.92rem;
}

.marquee-wrap {
    height: .64rem;
    width: 100%;
    background-color: #F8ECFF;
    color: #6A5D72;
    padding-top: .1rem;
    padding-right: .16rem;
}

.marquee-box {
    display: flex;
    align-items: center;
}

.marquee-box .icon-speaker {
    display: flex;
    width: .64rem;
    margin: auto;
    justify-content: center;
}

.icon-speaker .not {
    color: #7567cd;
}

.marquee-box .container-main {
    flex: 1;
    font-size: .24rem;
    overflow: hidden
}

.marquee-box p {
    display: inline-block;
    padding-left: 100%;
    white-space: nowrap;
    font-size: .28rem;
    animation: vMarquee 10s linear infinite;
    margin-bottom: 0;
}



@keyframes vMarquee {
    0% {
        transform: translate3d(0, 0, 0)
    }

    100% {
        transform: translate3d(-100%, 0, 0)
    }
}

.swiper {
    overflow: hidden;
}

.conter-wrap {
    padding: .14rem 0;
    text-align: center;
    padding-top: 0;
}

.ad-menu-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .24rem .3rem .24rem;
}

.ad-menu-item {
    /* background-color: #ffff; */
    text-align: center;
    /* color: #7E8183; */
    font-size: .2rem;
    /* padding: .1rem; */
    width: 100%;
    margin-right: .12rem;
    flex: 0 1 auto;
    border-radius: .08rem;
    white-space: nowrap;
}

.ad-menu-item .menu-img {
    width: 2.26rem;
    height: 1rem;
}

.ad-menu-item:last-child {
    margin-right: 0;
}

.ad-menu-item.active {
    /* background: linear-gradient(269.73deg, #2D70DD -60.33%, #C95DBC 99.76%);
    color: #fff; */
}

.ad-t {
    font-size: .3rem;
}

.ad-conter {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: .1rem;
    column-gap: .36rem;
    padding: 0 .24rem .24rem;
}

.ad-conter img {
    width: 1.04rem;
    height: 1.04rem;
    border-radius: .08rem;
}

.ad-conter a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.ad-conter a div {
    color: #a2a2a2;
    margin-top: 4px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.d-load-btn {
    background: linear-gradient(269.73deg, #2D70DD -60.33%, #C95DBC 99.76%);
    color: #fff;
    border-radius: .46rem;
    padding: .04rem .1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: none;
}

.p9 {
    padding: .18rem;
}

.main-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: auto;
    margin: 0 auto;
    box-sizing: border-box;
    padding-bottom: 0;
}

.content-box {
    float: left;
    width: 100%;
}



.rank-a .motion-preview {
    background: #222;
    display: none;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 2;
    border-radius: .04rem;
    /* 点击穿透 */
    pointer-events: none;
}



.rank-title:hover {
    color: #6b28ef;
}

.v-s-ul-category-tag {
    font-size: .32rem !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.rank-a {
    border-radius: .16rem;
    overflow: hidden;
}

.jg-color {
    color: #de3730;
}

.mask_info {
    width: 100%;
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 0;
    color: #fff;
    font-size: .24rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
    padding: 0 .32rem;
}

.mask_info .time {
    text-align: left;
}

.mask_info .bi {
    color: #fff;
}

.clearfix {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
}

.tj-flex {
    display: flex;
    align-items: center;
}

.p-card-txt {
    padding: .08rem .16rem;
    margin-left: .12rem;
    background-color: #222;
    color: #fff;
    border-radius: .04rem
}

/* .mask_info::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 3.31034rem;
    background-image: url('/static/images/img_black_mask.png');
    background-repeat: repeat-x;
    background-size: contain;
    bottom: 0;
    left: 0;
    z-index: 3;
} */

.pre-eye {
    text-align: left;
    position: relative;
    z-index: 4;
    margin-bottom: .1rem;
}

.pre-eye span {
    margin-left: .04rem;
}

.pre-time {
    margin-bottom: .1rem;
    text-align: right;
}

.pre-time span {
    margin-left: .04rem;
}



.my10 {
    margin-top: .2rem;
    margin-bottom: .2rem;
}

.ran-box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .24rem;
    padding: 0 .24rem;
}

.rank-title {
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
    color: #e7e7e7;
    margin-top: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.vs_8e43cea1a3310b70a00fc627ef21be48-item-vide-n:first-child {
    grid-column: span 2 / span 2;
}

.vs_8e43cea1a3310b70a00fc627ef21be48-item-vide-n:first-child .pre-img,
.first-video .pre-img {
    max-height: 3.92rem;
    height: 3.92rem;
    border-radius: .16rem;
}

.textad {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .1rem;
    padding: 0 .24rem 0 .24rem;

}

.textad a {
    text-align: center;
    background-color: #2d2d2d;
    padding: .1rem .2rem;
    height: .64rem;
    line-height: .4rem;
    border-radius: .08rem;
    color: #FF3396;
    font-size: .24rem;
    /* text-overflow: ellipsis; */
    overflow: hidden;
    white-space: nowrap;
    font-weight: 600;
}

.text-c-3 {
    /*color: #6FE136 !important;*/
}

.text-c-4 {
    /*color: #FFCA94 !important;*/
}
.commercialBox{
     width: 100%;
   
    display: flex;
    background: rgba(0, 0, 0, 0.80);
    padding: 8px;
    align-items: center;
    gap: 4px;
    justify-content: space-around;
}
.text-d-2{
    
    color: #FFFFFFCC;
}
.commercial{
     position: fixed;
    bottom: 1rem;
    z-index: 999999;
   
}
.commercial_logo{
    width: 50px;
    height: 50px;
}
.commercial_text{
    color: #FFF;
font-family: "PingFang SC";
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 153.846% */
}
.commercial_djxm{
    width: 37px;
    height: 44px;
}
.commercial_close{
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 999999999999;
}

.swiper-slide {
    overflow: hidden;
}
.rightBox:visited {
  color: #fff;
}
.rightBox{
        height: 36px;
        display: flex;
    padding: 4px 6px;
    text-align: start;
    gap: 10px;
    color: #FFF;
    font-family: "PingFang SC";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
    border-radius: 4px;
    background: #AE0049;
    align-items: center;
}

.title-wrap {
    height: .72rem;
    display: flex;
    border-top-left-radius: .2rem;
    border-top-right-radius: .2rem;
    background-color: #F8ECFF;
    padding-left: .24rem;
    padding-right: .14rem;
    align-items: center;
    justify-content: space-between;
    font-size: .24rem;
    margin-bottom: .16rem;
    margin-left: .14rem;
    margin-right: .14rem;
}

.loading-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: .3rem
}

.live-bg .loading-bar {
    background: #fff;
    margin: 0 .04rem;
}

.loading-bar {
    width: .06rem;
    height: 0;
    background: linear-gradient(269.73deg, #2D70DD -60.33%, #C95DBC 99.76%);
    margin: 0 .02rem;
    animation: bounce 0.8s infinite;
}

.loading-bar:nth-child(2) {
    animation-delay: 0.1s;
}

.loading-bar:nth-child(3) {
    animation-delay: 0.2s;
}

.loading-bar:nth-child(4) {
    animation-delay: 0.1s;
}


@keyframes bounce {
    0% {
        height: .04rem;
    }

    50% {
        height: .14rem;
    }

    75% {
        height: .28rem;
    }

    100% {
        height: .04rem;
    }
}

.title-l {
    display: flex;
    align-items: center;
    color: #000;
    font-size: .28rem;
}

.title-l .text1 {
    color: #6A5D72;
}

.px7 {
    padding-left: .14rem;
    padding-right: .14rem;
}

.text2 {
    font-size: .28rem;
}

.text1 {
    font-size: .24rem;
}

.more-btn {
    display: block;
    background: linear-gradient(269.98deg, #286AD3 -31.31%, #CF53E8 99.98%);
    color: #fff !important;
    padding: .08rem .26rem;
    border-radius: .24rem;
}

.vidoe-title-1,
.live-title-1,
.friends-title-1 {
    display: flex;
    justify-content: space-between;
    padding: 0.24rem;

}
.fic{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.video-title-wrap {
    flex: 1;
}
.title-ad-wrap{
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    width: 3.8rem;
    gap: 8px;
}
.title-ad-wrap a{
    /*border-radius: .44rem;*/
    /*color:  #F52E70;*/
    /*border: 1px solid #F52E70;*/
    /*padding: 0 4px;*/
    /*height: .44rem;*/
    /*line-height: .36rem;*/
    /*font-size: .24rem;*/
    /*font-weight: 600;*/
    /*max-width: 1.2rem;*/
    /* text-overflow: ellipsis;*/
    /* overflow: hidden;*/
    /* white-space: nowrap;*/
    /* flex: 0 0 auto;*/
    /* margin-right: 0.08rem;*/
}
.title-ad-wrap a:last-child{
    margin-right:0;
}
.video-title-wrap,
.live-title-wrap,
.friends-title-wrap {
    font-size: .26rem;
    color: #FFFFFFCC;
}

.video-title-wrap::before,
.live-title-wrap::before,
.friends-title-wrap::before,
.title-name:before {
    content: '';
    width: .06rem;
    height: .28rem;
    background: linear-gradient(229.21deg, #FF925F 15.85%, #F7CE70 86.08%);
    margin-right: .08rem;
    border-radius: 1.04rem;
    display: inline-block;
}

.video-fun,
.live-fun,
.friends-fun {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.change-video,
.change-live,
.change-friends {
    color: #FBB068;
    margin-right: .24rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.bi-arrow-clockwise {
    color: #FBB068;
    font-size: .28rem;
    margin-right: .04rem;
}

.video-more,
.live-more,
.friends-more {
    color: #FFFFFF99;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.video-more .bi-chevron-right,
.live-more .bi-chevron-right,
.friends-more .bi-chevron-right {
    font-size: .28rem;
}

.pre-img {
    width: 100%;
    height: 1.82rem;
    max-height: 1.82rem;
    border-radius: .1rem;
}

.video-g-wrap {
    padding: 0 .24rem;
}

.first-video {
    display: block;
}

.video-cover-wrap {
    position: relative;
}

.video-g-list,
.video-g-list1,
.ad-g-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .22rem;
}

.ad-g-list {
    padding-bottom: 10px;
}

.video-g-wrap .hf-ad {
    padding-left: 0;
    padding-right: 0;
}
.first-video-wrap {
    padding-bottom: .24rem;
}
.video-g-wrap .textad {
    padding-bottom: .24rem;
    padding-top: 0;
}

.more-video-btn {
    padding: .24rem;
    padding-top: .04rem;
    padding-bottom: 0;
}

.more-video-btn div {
    width: 100%;
    background-color: #242424;
    border-radius: 1.04rem;
    height: .56rem;
    line-height: .56rem;
    text-align: center;
    color: #FFFFFF80;

}

.girl-bg {
    height: .66rem;
    background-color: rgba(20, 20, 20, 0.5);
    font-size: .22rem;
    overflow: hidden;
    white-space: nowrap;
}

.girl-info {
    height: 1.42rem;
    background-color: #F8ECFF;
    color: #564C5A;
}

.girl-info .flex-space-between {
    padding-left: .04rem;
    padding-right: .04rem;
}

.girl-info span {
    color: #A08AAE;
}

.bottom71 {
    bottom: 1.42rem;
}

.text16 {
    font-size: .32rem;
}

.py7 {
    padding-top: .14rem;
    padding-bottom: .14rem;
}

.info-btn {
    height: .54rem;
    width: 100%;
    ;
    line-height: .54rem;
    background: linear-gradient(269.73deg, #2D70DD -60.33%, #C95DBC 99.76%);
    color: #fff;
    border-radius: .08rem;
    margin: 0 auto;
    text-align: center;
}

.pl5 {
    padding-left: .1rem;
    padding-right: .1rem;
}

.more-btn1 {
    background-color: #D4E9FB;
    border-radius: .33rem;
    width: 3.84rem;
    height: .66rem;
    line-height: .66rem;
    color: #074995;
    font-size: .24rem;
    text-align: center;
}

.y-title-i {
    width: 3.94rem;
    height: .78rem;
}

.outside {
    background: linear-gradient(265.72deg, #D5DAFF 2.17%, #FFD8EC 93.54%);
    border-radius: .1rem;
    margin: .3rem 0;
    padding: .16rem;
}

.y-wrap {
    position: absolute;
    top: -.12rem;
    width: 100%;
}

.y-conter {
    /* border: .06rem solid #074995;
    border-radius: .1rem; */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: .32rem;
    column-gap: .08rem;
    padding-top: .56rem;
    padding-bottom: .2rem;
    padding-left: .18rem;
    padding-right: .18rem;
    background-color: #fff;
}

.y-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 .04rem;
}

.y-item-1 {
    width: 100%;
    height: 4.14rem;
    border-radius: .14rem;
    border: 1px solid #FFE7FB;
    padding: .14rem .1rem;
    background-color: #fff;
}

.y-item-1 img {
    width: 100%;
    height: 1.86rem;
}

.y-info-btn {
    display: block;
    height: .56rem;
    line-height: .46rem;
    text-align: center;
    background: linear-gradient(90deg, #ED1B88 0%, #FF70BA 100%);
    margin-top: .08rem;
    border-radius: .28rem;
    padding: .02rem .6rem;
    color: #fff;
}

.y-h-title {
    margin-top: .24rem;
    padding-bottom: .14rem;
    border-bottom: 1px solid #E8E8E8;
}

.y-name {
    font-size: .30rem;
    color: #ED1B88;
}

.y-no {
    font-size: .24rem;
    color: #888;
}

.y-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 12px;
    color: #614E5E;
}


.pagination-box {
    /* float: left; */
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
    margin-top: .2rem;
}

.pagination-box ul {
    margin-bottom: .2rem !important;
}

.pagination-box .pagination .page-item input {
    width: 1rem;
    text-align: center;
}

.page-link {
    user-select: none;
}

.page-link:focus {
    box-shadow: 0 0 0 0 !important;
}

.last_page_p {
    color: #666;
    margin-top: .12rem;
    margin-left: .16rem;
}

.jump-box {
    float: left;
    width: 100%;
    position: relative;
    top: 0;
    box-sizing: border-box;
    text-align: center;
}

.jump-box input {
    float: left;
    width: 45%;
    height: .62rem;
    text-align: center;
    margin-left: calc(25% - .5rem);
    border-radius: .08rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.jump-box input:hover {
    background-color: #fff;
    border: 1px solid #007bff;
}

.jump-box input:focus {
    text-shadow: 0;
}

.jump-box .btn {
    float: left;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.pb23 {
    padding-bottom: .46rem;
}

.grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gap7 {
    gap: .14rem;
}

.live-item,
.girl-item {
    color: #fff;
    border-radius: .2rem;
    overflow: hidden;
}

.live-item:hover,
.girl-item:hover {
    color: #fff;
}

.girl-img,
.live-img {
    width: 100%;
    height: 6.24rem
}

.live-bg {
    width: 2.36rem;
    height: .64rem;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: .32rem;
    border: 1px solid #A1A1A1;
    font-size: .22rem;
}

.live-bg .loading-container {
    height: .2rem;
    margin-right: .08rem;
}

.bottom75 {
    bottom: 1.5rem;
}

.w-full {
    width: 100%;
}

.bottom0 {
    bottom: 0;
}

.avatar {
    width: .52rem;
    height: .52rem;
    border-radius: .26rem;
    border: .02rem solid #D24C1F;
}

.w-full {
    width: 100%;
}


.nav-title {
    height: 1.04rem;
    width: 100%;
    background-image: url('/static/images/hader-bg.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: .32rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.nav-title .bi-chevron-left {
    color: #fff;
    font-size: .48rem;
}

.pb-e-lg-40 {
    display: flex;
    flex-flow: wrap;
    border-top: .08rem solid #f0f2f4;
    border-bottom: .08rem solid #f0f2f4;
    padding: .1rem 0;
}

.item-title-box {
    /* margin-top: .1rem; */
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: .32rem;
    /* padding-top: .2rem; */
}
.title-name{
    flex: 1;
}

.p-screen-dialog {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 201;
    position: fixed;
    top: 0;
}

.dialog-wrap {
    max-width: 80vw;
    position: relative;
}

.dialog-wrap img {
    width: 5.6rem;
    max-width: 80vw;
    height: auto;
    border-radius: .2rem;
}

.s-loading-circular {

    position: absolute;
    top: .1rem;
    right: .2rem;
    width: .6rem;
    height: .6rem;
    border-radius: .4rem;
    font-size: .4rem;
    background-color: rgba(0, 0, 0, .4);
    display: flex;
    justify-content: center;
    align-items: center;
}

.s-loading-circular .bi {
    color: #fff;
    font-size: .4rem;
}

.page-link {
    padding: .1rem .16rem;
    font-size: .22rem;
}

.page-item:first-child .page-link {
    border-top-left-radius: .1rem;
    border-bottom-left-radius: .1rem;
}

.page-item:last-child .page-link {
    border-top-right-radius: .1em;
    border-bottom-right-radius: .1rem;
}


.footer-info {
    padding: .4rem .24rem;
    color: #FFFFFF99;
    text-align: center;
    font-size: .24rem;
}

.footer-connect {
    padding-bottom: .24rem;
}

.footer-info .e-mail {
    color: #FFFFFFE0;
}

.permanent {
    color: #F52E70;
    font-weight: 600;
    font-size: .36rem;
    padding-top: .24rem;
}




.live-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .2rem;
    padding: 0 .24rem .24rem;
}

.live-item {
    width: 3.4rem;
}

.hot-icon {
    position: absolute;
    top: 0;
    left: 0;
}

.live-item-img {
    width: 3.5rem;
    height: 5rem;
    min-height: 5rem;
    border-radius: .2rem;
}

.center-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
}

.bt-info {
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    bottom: 0;
    height: .8rem;
    padding: 0 .2rem;
    overflow: hidden;
    color: #fff;
    font-size: .24rem;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    border-bottom-left-radius: .2rem;
    border-bottom-right-radius: .2rem;
}

.bt-info img {
    width: 0.24rem;
    height: 0.24rem;
    margin-right: 0.08rem;
}

.bt-info-left {
    color: #fff;
    display: flex;
    align-items: center;
}

 .dian {
    width: .08rem;
    height: .08rem;
    border-radius: 50%;
    background-color: #48FF54;
    margin-right: .04rem;
}

.bt-info-left .online-num {
    color: #48FF54;
}

.friends-wrap{
    padding:0 .24rem .24rem;
    
}
.friends-item{
    display: flex;
    padding: .16rem;
    background-color: #292928;
    border-radius: .2rem;
    position: relative;
    text-align: left;
    margin-bottom: .16rem;
}
.friends-item-left{
    position: relative;
    padding-right: .24rem;
}
.friends-item-img{
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .2rem;
}
.friends-item-right{
    color: #FFFFFFCC;
}
.yh-icon {
    right: 0;
    top: .16rem;
    position: absolute;
}
.subtitle{
    margin-right: .08rem;
    color: #917968;
}
.friends-info {
    font-size: .36rem;
    margin-bottom: .08rem;
}
.friends-info .subtitle {
    color: #FBB369;
}
.friends-info .measurements {
    color: #FFFFFFCC;
    font-size: .24rem;
}
.friends-info1{
    display: flex;
    padding: .12rem .2rem .1rem .2rem;
    background: linear-gradient(90deg, rgba(251, 179, 105, 0.2) 0%, rgba(251, 179, 105, 0) 100%);
    border-radius: .16rem;
    align-items: center;
    margin-bottom: .16rem;
}
.adss-wrap{
    margin-left: .34rem;
    color: #00CC29;
}
.like1-wrap{
    color: #F52E70;
}
.friends-status{
    background: rgba(0, 0, 0, .6);
   padding: .04rem .14rem;
   border-radius: .96rem;
   display: flex;
   align-items: center;
   position: absolute;
   top: 1.92rem;
   right: .32rem;
   color: #fff;
}

.pagination-box .page-link {
    background-color: #161616;
    border: 1px solid #FFFFFF1A;
    /* margin-right: .16rem; */
    color: #FFFFFFB2;
}
.pagination-box .page-item.active .page-link {
    background: #2d2d2d;
    border: 1px solid #2d2d2d;
}


.share-box{
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
    margin-top: .24rem;
    margin-bottom: .08rem;
}
.video-type-name{
    color: #FFFFFFE5;
    font-weight: 600;
    padding-left: .04rem;
}
.share-text{
    color: #FBB369;
    font-weight: 600;
}

.mess{
    position: fixed;
    margin: 0 auto;
    z-index: 10001;
    color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: rgba(0, 0, 0, .7);
    border-radius: 1.32rem;
    white-space:nowrap;
    height: .74rem;
    line-height: .74rem;
    padding: 0 .4rem;
    font-size: .24rem;
}
.d-collect-wrap{
    background-color: #392B2B;
    border-radius: 8px;
    padding: 8px;
    line-height: 17px;
    font-weight: 400;
    font-size: .24rem;
    margin-bottom: 8px;
}
.d-url,.d-emall {
    color: #FF3773;
    font-weight: 600;
    padding: 0 4px;
}
.d-btn {
    color: #FFCA94;
    text-decoration: underline;
}
.copy-btn {
    padding-right: 4px;
}
.dialog4-main{
    background-color: #fff;
    width: 5.4rem;
    height: 3.28rem;
    border-radius: .4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-top: .4rem;
    
}
.dialog4-title{
    color: #000;
}
.dialog4-text{
    padding: 0 .5rem;
    font-size: .28rem;
    font-weight: 600;
    color: #333333;
    line-height: .4rem;
    text-align: center;
}
.tips-red{
    color: #FB0000;
}
.dialog4-btns{
    display: flex;
    justify-content: center;
    width: 100%;
}
.dialog4-btns .continue-btn ,.dialog4-btns .load-app-btn {
    flex: 1;
    height: .8rem;
    line-height: .8rem;
    text-align: center;
    border-top: 1px solid #F1F1F1;
}
.dialog4-btns .continue-btn {
    border-right: 1px solid #F1F1F1;
    color: #777777;
}
.ready-all-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
}
.ready-all-img {
    width: 100%;
    height: auto;
}

.hf-swiper {
    margin-bottom: .24rem;
    position: relative;
 }
 .hf-swiper  .hf-ad {
    padding: 0;
 }
 .hf-swiper  .hf-ad  .hf-ad-img {
    width: 100%;
    aspect-ratio:32/5;
 }
 .hf-swiper.swiper-pagination-bullet {
    width: 0.08rem;
    height: 0.08rem;
}
.hf-swiper .swiper-pagination-bullet-active{
    width: .16rem !important;
    border-radius: .16rem;
    background-color: #aba0a6 !important;
}
.hf-swiper.swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: 0;
}
.mx12 {
    margin-left: .24rem;
    margin-right: .24rem;
}


.footer-nav {
    position: fixed;
    bottom: 0;
    max-width: 500px;
    width: 100%;
    left: 50%;
    height: 1rem;
    transform: translateX(-50%);
    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
    bottom: -0.5px !important;
    background-color: #1e1c20;
    z-index: 83647;
    display: flex;
    justify-content: space-around;
    padding-right: .24rem;
    padding-left: .24rem;
    padding-top: .09rem;
    border-top:  1px solid #FFFFFF0D;
}
.footer-nav-item {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 1rem;
    padding-bottom: .09rem;
}

.footer-nav-item  img {
    width: .52rem;
    height: .52rem;
}
.footer-nav-item  img.nav-hot {
    width: .22rem;
    height: .22rem;
    position: absolute;
    right: 0;
    top: 0;
}
.footer-nav-item span {
    color: #646462;
    font-size: .22rem;
    font-weight: 400;
}
.footer-nav-item.active span  {
    color: #F63564;
}

.nav-item.active {
    background-color: #3A306D;
}
.nav-item.active::after {
    content: '';
    display: block;
    width: .42rem;
    height: .06rem;
    position: relative;
    bottom:  .14rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: .06rem;
    background: linear-gradient(90deg, #B8D7FF 0%, #4C70F5 100%);

}