* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: none;
}
 /* 隐藏垂直滚动条 */
 *::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }

#app {
    font-size: .24rem;
    background: #242529;
    position: relative;
    height: 100%;
}
.my-top {
    position: fixed;
    top: 0;
    padding: 0 .16rem;
    background-color: #242529;
    z-index: 10;
    width: 100vw;
    max-width: 500px;
}
.hidden {
    display: none !important;
}
.relative {
    position: relative;
}
.px8{
    padding-left: .16rem;
    padding-right: .16rem;
}
ul {
    list-style: none
}

a:hover,
a:focus,
a:active {
    text-decoration: none
}

a {
    text-decoration: none;
    color: #a8a9ad;
}

.grid-2 {
    display: grid;
    grid-gap: .2rem;
    grid-template-columns: repeat(2, 1fr);
}

.cover {
    overflow: hidden
}

.flex-1 {
    flex: 1;
}

.px-20 {
    padding: 0 .2rem;
}

.pt-20 {
    padding-top: .2rem;
}

.ml-20 {
    margin-left: .2rem;
}

.mb-20 {
    margin-bottom: .2rem;
}

.mr-10 {
    margin-right: .1rem
}

.mt-5 {
    margin-top: 5px;
}

.my4 {
    margin-top: .08rem;
    margin-bottom: .08rem;
}

.mb-4 {
    margin-bottom: .08rem;
}

.pb-60 {
    padding-bottom: 1.2rem;
}

.flex {
    display: flex;
}

.flex-middle {
    align-items: center
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

img {
    object-fit: cover;
}

html {
    width: 100%;
}

body {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    background: #000;
    color: #edecff;
    overflow-y: auto;
    font-family: -apple-system, BlinkMacSystemFont, Microsoft YaHei, Arial, sans-serif;
}
.swiper-c{
    overflow: hidden;
    padding-top: 2.1rem;
    
}

/*.swiper-c.mt70{*/
/*    padding-top: 1.74rem;*/
/*} */
.marquee-wrap {
    padding: .08rem 0;
}

.marquee-box {
    display: flex;
    align-items: center;
    height: .72rem;
    padding: .1rem;
    background: #27372A;
    border-radius: .35rem
}



.marquee-box .container-main {
    flex: 1;
    margin: 0 .15rem;
    font-size: .2rem;
    overflow: hidden
}

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

.marquee-box .btn-more {
    width: 1.42rem;
    height: .5rem;
    line-height: .5rem;
    border-radius: .25rem;
    text-align: center;
    font-size: .22rem;
    background: linear-gradient(90deg, #F1FF2F 0%, #24DD6E 100%);
}

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

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

.notif {
    margin-left: .28rem;
}

/*.nav-c {*/
/*    display: flex;*/
/*    padding: 0 ;*/
/*    flex-flow: wrap;*/
/*}*/
/*.nav-c .item {*/
    
/*}*/
/*.item-home{*/
/*    width: 1.2rem !important;*/
/*}*/
/*.nav-c img {*/
/*    width: 3.53rem;*/
/*    height: auto;*/
/*    margin-right: .06rem;*/
/*}*/
.nav-c .nav-item-1 {
    width: 1.72rem;
    margin-right: .01rem;
}
.nav-c {
    display: flex;
    justify-content: space-between;
    padding: 0 ;
}

.nav-c img {
    width: 2.38rem;
    height: auto;
}
/*.nav-c .nav-item-1 {*/
/*    width: 2.3rem;*/
/*}*/
.title-item {
    display: flex;
    align-items: center;
    margin-top: .26rem;
    margin-bottom: .18rem;
    font-size: .28rem;
    font-weight: 600;
    color: #FC42D5;
    justify-content: space-between;
}
.title-item.live {
    color: #FF523F;
}
.title-item .f-title {
    color: #a8a9ad;
    font-weight: 400;
    padding-left: 0.1rem;
}


.title-item img {
    width: .36rem;
    height: auto;
    margin-right: .08rem;
}

.title-item div {
    display: flex;
    align-items: center;
}

.title-item-btn {
    background: linear-gradient(270deg, #106AFB 0%, #2DB9FF 100%);
    border-radius: .34rem;
    color: #fff;
    font-size: .24rem;
    text-align: center;
    padding: .08rem .24rem;
    font-weight: 400;
}

.grid-cols-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: 0.24rem;
    column-gap: 0.1rem;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.grid-item img {
    width: 1.28rem;
    min-height: 1.28rem;
    max-height: 1.28rem;
    border-radius: .2rem;
}

.grid-item .text {
    text-align: center;
    font-size: .24rem;
}

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

.jgg-load {
    width: 1.08rem;
    height: .48rem;
    line-height: .48rem;
    background-color: #3C2E3B;
    text-align: center;
    font-size: .28rem;
    border-radius: .24rem;
    color: #F847CF;
}


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

.textad a {
    text-align: center;
    background-color: #2E313C;
    padding: .1rem;
    height: .64rem;
    line-height: .4rem;
    border-radius: .08rem;
    color: #fff;
    font-size: .24rem;
    overflow: hidden;
    white-space: nowrap;
}

.textad a.h {
    color: #FF4366;
    font-weight: 600;
}

.textad a.n {
    color: #0679E3;
    font-weight: 600;
}

.live-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: .21333rem;
    -moz-column-gap: .1rem;
    column-gap: .16rem;
  }
  .live-item {
    width: 3.5rem;
}
.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%, -60%);
  background: linear-gradient(270deg, rgba(238,61,61,.7) 0%, rgba(255,78,61,.8) 100%);
  border-radius: .62rem;
  height: .72rem;
  line-height: .72rem;
  color: #fff;
  padding: 0 .24rem;
}
.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;
}
.bt-info-left .dian {
   width: .08rem;
   height: .08rem;
   border-radius: 50%;
   background-color: #48FF54;
   margin-right: .04rem;
}
.bt-info-left .online-num {
    color: #48FF54;
}
.bt-t {
  display: flex;
  align-items: center;
}

.bt-tag {
  flex: 0 0 auto;
  background-color: #FF35B5;
  font-size: .22rem;
  padding: 0 .08rem;
  color: white;
  border-radius: .04rem;
  margin-right: .08rem;
}

.live-more {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .4rem 0 .52rem 0;
}
.more-btn{
    display: block;
    width: 3.68rem;
    height: .8rem;
    line-height: .8rem;
    text-align: center;
    background-color: #323642;
    border-radius: .42rem;
    color: #fff;
}


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

.video-wrap>.video-item:first-child {
    grid-column: span 2 / span 2;
}

.video-wrap>.video-item:first-child .video-cover {
    height: 4.08rem;
    max-height: 4.08rem;
}

.video-cover-wrap {
    position: relative;
    overflow: hidden;
    border-radius: .16rem;
}

.video-wrap .video-cover {
    width: 100%;
    height: 1.96rem;
    max-height: 1.96rem;
}

.video-cover-wrap span {
    color: #fff;
}

.video-title {
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: .1rem;
    font-size: .2rem;
    width: 100%;
}

.video-info {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(27, 28, 32, .4);
    display: flex;
    justify-content: space-between;
    height: .52rem;
    font-size: .24rem;
    align-items: center;
    overflow: hidden;
    padding-left: .24rem;
    padding-right: .24rem;
    padding-bottom: .1rem;
}

.video-info img {
    width: .36rem;
    height: .36rem;
    margin-right: .03rem;
}



.grid-2 {
    display: grid;
    grid-gap: .2rem;
    grid-template-columns: repeat(2, 1fr);
}

.zone-item{
    border-radius: .16rem; 
    color: #fff;
    position: relative;
}
.zone-item-img{
   width: 100%;
   height: auto;
   min-height: 3.99rem;
   max-height: 3.99rem;
   border-radius: .16rem;
}
.zone-item-ar{
   position: absolute;
   right: .24rem;
   top: .18rem;
   background-color: #FF35B5;
   color: #fff;
   font-size: .2rem;
   border-radius: .16rem;
   padding: .04rem .08rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.zone-text-wrap{
    padding: .06rem   .22rem .14rem .22rem;
}
.zone-text-wrap .zone1-item-name-wrap span {
    font-size: .28rem;
    text-align: left;
}
.zone-item-btn{
    width: 100%;
    border-radius: .06rem;
    height: .64rem;
    line-height: .64rem;
    text-align: center;
    background: linear-gradient(270deg, #FF3DC5 0%, #F34FFF 100%);
    font-size: .26rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zone1-wrap{
    /*padding: .44rem .16rem;*/
    padding-top: 0;
}
.zone1-item {
    display: flex;
    padding: .16rem 0;
    position: relative;
    border-bottom:  1px solid #282c3e;
}
.like-wrap img,.add-wrap img {
    width: .2rem;
}
.like-wrap{
background: url("../../img/abcd/g-left.svg") center/100% 100% no-repeat;
}
.add-wrap{
background: url("../../img/abcd/g-right.svg") center/100% 100% no-repeat;
}
.zone1-item-left {
     flex-grow:1;
     height: 100%;
     margin-top: .38rem;
}
.zone1-item-left .zone-item-btn{
    margin-top: .14rem;
}
.zone1-text-wrap{
     font-size: .24rem;
    text-align: left;
}
.zone1-item-name-wrap {
    font-size: .32rem;
}
 .zone1-item-name {
     color: #d2d3d6;
 }
.zone1-item-img{
    width: 2.8rem;
    height:2.8rem;
    border-radius: .16rem;
    margin-right: .24rem;
    flex: 0 0 auto;
}
.zone1-item-color1 {
    color: #C789B2;
}
.zone1-item-color2 {
    color: #d2d3d6;
}
 .like-wrap,.add-wrap {
    height: .36rem;
    padding: 0 .2rem;
    display: flex;
    align-items: center;
    color: #fff;
    white-space:nowrap;
    text-overflow: ellipsis;
}
.zone1-item-a {
    font-size: .2rem;
    display: flex;
    align-items: center;
    top: 3.78rem;
    left: 0;
    position: absolute;
    width: 100%;
    justify-content: center;
    overflow: hidden;
}
.zone1-item-a  .like-wrap, .zone1-item-a .add-wrap {
    max-width: 50%;
    font-size: .2rem;
    padding: 0 .1rem;
}
.zone-item .zone-text-wrap .zone1-item-name-wrap {
    padding-top: .12rem;
}
.zone-item .zone-text-wrap p {
    font-size: .2rem;
    padding-bottom: .04rem;
}



.cz-wrap{
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 7.18rem;
    height: 4.86rem;
    padding: 1.5rem .16rem .16rem .16rem;
}
.swiper-qq {
  
    overflow: hidden;
}
.cz-item {
    display: flex;
    justify-content: flex-start;
}
.cz-y-item{
    width: 2.18rem;
    height: 3.2rem;
    background-color: #7b4644;
    display: block;
    border-radius: .2rem;
    overflow: hidden;
    margin-right: .16rem;
}
.cz-item .cz-y-item:last-child{
    margin-right: 0;
}
.cz-y-item-img {
    width: 2.18rem;
    height: 2.18rem;
    border-radius: .2rem;
}
.cz-y-item .y-name{
     font-size: .24rem;
     font-weight: 600;
     color: #e5dada;
}
.cz-y-item .y-pic{
    font-size: .28rem;
    font-weight: 600;
    color: #FF9E3D;
}

.cz-y-item-info{
    padding: .16rem .12rem .12rem;
}

.y-menu{
    display: flex;
    padding: .24rem 0;
    overflow-y: auto;
    background-color: #242529;
   
}
.y-menu .y-menu-item {
    flex: 0 0 auto;
}
.y-menu-btn{
    padding: .12rem .18rem;
    background-color: #2E313C;
    border-radius: .1rem;
    display: flex;
    justify-content: center;
    margin-right: .12rem;
    font-size: .26rem;
}
.y-menu .active .y-menu-btn{
    background: linear-gradient(90deg, #42275A 0%, #734B6D 100%);
    color: #fff;
 }
#y1,#y2,#y3,#y4 {
    margin-top: .16rem;
}
#y1 .y1-wrap {
    display: grid;
    grid-gap: .22rem;
    grid-template-columns: repeat(2, 1fr);
}
.y1-item {
    width: 100%;
    border-radius: .2rem;
    background-color: #2e313c;
    padding-bottom: .16rem;
    position: relative;
}
.y1-item-img {
    width: 3.48rem;
    height: 3.48rem;
    border-radius: .2rem;
}
.tips-img {
    position: absolute;
    left: 0;
    top: 0;
}
.y1-info-wrap {
    padding: .12rem .16rem .16rem;
}
.y1-item-info {
    padding-top: .12rem .16rem;
}
.y1-tips{
    background: linear-gradient(90deg, #FF512F 0%, #DD2476 100%);
    color: #fff;
    border-radius: .06rem;
    display: inline-block;
    width: .94rem;
    height: .32rem;
    line-height: .32rem;
    margin-right: .04rem;
    font-size: .2rem;
    text-align: center;
}
.y1-tips.y1-tips-bg1 {
    background: linear-gradient(90deg, #00C6FF 0%, #0072FF 100%);
}
.y1-text {
    font-size: .24rem;
    color: #abadb1;
}
.y1-item-info1 {
    display: flex;
    justify-content: space-between;
    padding: .16rem;
} 
.y1-name {
    color: #fff;
    font-size: .28rem;
    font-weight: 600;
}
.y1-pic {
    color: #FF2F00;
    font-size: .28rem;
    font-weight: 600;
}
.y1-btn {
    color: #fff;
    background-color: #D31535;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: .6rem;
    border-radius: .12rem;
}
.y1-btn img {
    margin-right: .06rem;
}
.y-title{
    width: 100%;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: .68rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: .2rem;
}
.y2-item{
    display: flex;
    width: 100%;
    margin-top: .16rem;
    background-color: #2e313c;
    position: relative;
    border-radius: .2rem;
}
.y2-item-img{
    width: 3.12rem;
    min-width: 3.12rem;
    height: 3.12rem;
    border-radius: .2rem;
    flex: 0 0 auto;
}
.y2-info-wrap{
    padding: .24rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.y2-item-info1{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .1rem;
}