* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #app {
      font-size: .24rem;
      background: #1c2134;
    }

    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: .3rem;
         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 {
      height: 100%;
      width: 100%;
    }

    body {
      max-width: 500px;
      width: 100%;
      height: 100%;
      margin: 0 auto;
      background: #000;
      color: #edecff;
      font-family: -apple-system,BlinkMacSystemFont,Microsoft YaHei,Arial,sans-serif;
    }
    .jgg-load{
        width: 1.08rem;
        height: .48rem;
        line-height:.48rem;
        background-color: #2B2F46;
        text-align: center;
        font-size: .24rem;
        border-radius: .24rem;
        color: #FF35B5;
    }
    .marquee-wrap {
      padding: .28rem;
    }

    .marquee-box {
      display: flex;
      align-items: center;
      height: .72rem;
      padding: .1rem;
      background: rgba(70, 74, 103, .5);
      border-radius: .35rem
    }

    .marquee-box .icon-speaker {
      width: .54rem;
      height: .4rem;
      margin-left: .1rem;
      background: url("../../img/abcd/speaker.png") center/100% 100% no-repeat
    }

    .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: #ff35b5 linear-gradient(90deg, #df31c1, #ff60b6)
    }

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

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

    #swiper-banner {
      height: 3.45rem;
      padding-top: .1rem;
      padding-bottom: .6rem;
      box-sizing: content-box;
    }

    #swiper-banner a {
      display: block;
      height: 3.45rem;
      width: 100%;
      border-radius: .17rem;
      overflow: hidden;
      transition: height .3s
    }

    #swiper-banner a img {
      width: 100%;
      height: 3.45rem;
    }

    #swiper-banner .swiper-slide {
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translateX(0)
    }

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

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

    #swiper-banner .swiper-slide-prev a {
      height: 2.28rem
    }

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

    #swiper-banner .swiper-slide-next a {
      height: 2.28rem
    }

    #swiper-banner .swiper-pagination-bullet {
      width: .24rem;
      height: .07rem;
      border-radius: .03rem;
      background: #404456
    }

    #swiper-banner .swiper-pagination-bullet-active {
      background: #ff35b5
    }

    .swiper-c {
      overflow: hidden;
    }

    .nav-c {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: .84rem;
      margin-bottom: .2rem;
      margin-left: .2rem;
      margin-right: .2rem;
      background: #282F4A;
      font-size: .3rem;
      border-radius: .12rem;
    }

    em {
      font-style: normal;
    }

    .nav-c .item {
      text-align: center;
      cursor: pointer;
    }

    .nav-c .item.active {
      color: #E41C7A;
    }

    .nav-c em {
      display: inline-block;
      height: 100%;
      position: relative;
    }
    .nav-c-img {
        width: auto;
        height: .36rem;
        -webkit-transform: translateY(.06rem);
        -moz-transform:translateY(.06rem);
        transform: translateY(.06rem);
    }
    .nav-c .item.active {
      color: #E41C7A;
    }
    .nav-c .active em::after {
      opacity: 1;
    }
    .nav-c em::after {
        content: "";
        width: 0.38rem;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: .54rem;
        height: .06rem;
        background: linear-gradient(69.79deg, #DE43D2 22.69%, #E41B79 81.62%);
        border-radius: 8px;
        opacity: 0;
        transition: opacity .3s;
    }


    .title-item {
      display: flex;
      align-items: center;
      margin-top: .1rem;
      margin-bottom: .2rem;
      font-size: .34rem;
      font-weight: bold;
      color: #ff35b5;
      justify-content: space-between;
      padding-right: .2rem;
    }

    .title-item .f-title {
      font-size: .24rem;
      color: #a8a9ad;
      font-weight: normal;
      padding-left: 0.1rem;
    }


    .title-item img {
      width: .36rem;
      height: auto;
      margin-left: 0.2rem;
    }
    
    .title-item div {
      display: flex;
      align-items: center;
      margin-left: .1rem;
    }
    .title-item-btn{
         background: linear-gradient(270deg, #FF2DC0 0%, #FF6BBC 100%);
        border-radius: .2rem;
        color: #fff;
        font-size: .24rem;
        text-align: center;
        padding: .08rem .1rem;
        font-weight: 400;
    }
    


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

    .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;
    }

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

    .s-wrap {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: .2rem;
     padding-left: .2rem;
     padding-right: .2rem;
     padding-top: .24rem;
     padding-bottom: .2rem;
    }
    .s-wrap  .lf-g {
        border-radius: .2rem;
        background-color: #29304a;
        display: flex;
        align-items: center;
        position: relative;
    }
  
    .lf-g .lf-g-img {
      width: 1.2rem;
      height: 1.2rem;
      border-radius: .2rem;
      margin-right: 0.16rem;
    }
     .lf-text {
      margin-right: 0.4rem;
      flex-grow: 1;
    }

    .lf-text .text {
      font-size: .28rem;
      font-weight: 600;
    }

    .lf-g-info {
      font-size: 0.24rem;
      color: #7f8392;
    }
    .go-icon {
        position: absolute;
        top: .24rem;
        right: 0;
    }
    .hot-icon{
        position: absolute;
        left: 0;
        top: 0;
    }
    .live-item {
        width: 3.5rem;
    }
    .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%);
    }
    .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;
    }
    .icon-like {
      width: .24rem;
      height: .21rem;
      background: url("../../img/abcd/icon-like.png") center/cover no-repeat
    }

    .icon-address {
      width: .19rem;
      height: .23rem;
      background: url("../../img/abcd/icon-add2.svg") center/cover no-repeat
    }


    .item-s3 {
      position: relative;
      display: flex;
      align-items: center;
      padding: .16rem;
      margin-bottom: .4rem;
      background: #2b2f46;
      border-radius: .13rem;
      font-size: .24rem;
      font-weight: normal;
      color: #a8a9ad
    }

    .item-s3 .cover {
      width: 2.2rem;
      height: 2.2rem;
      border-radius: .13rem;
      overflow: hidden;
      margin-right: .15rem
    }

    .item-s3 img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .item-s3 .info {
      position: absolute;
      top: -0.1rem;
      right: .1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: .05rem;
      background: linear-gradient(180deg, #dcbb8c, #f2dab8);
      color: #804800;
      font-size: .2rem;
      border-radius: .1rem .1rem .1rem 0
    }

    .item-s3 p {
      line-height: .38rem
    }

    .item-s3 .more {
      height: .44rem;
      line-height: .44rem;
      margin-top: .2rem;
      text-align: center;
      color: #fff;
      background: #ff35b5;
      font-size: .24rem;
      border-radius: .04rem
    }

    .item-s3 .flex-1 {
      padding-top: .1rem;
      flex: 1;
    }

    .relative {
      position: relative;
    }

    .absolute {
      position: absolute;
    }

    .text-center {
      text-align: center;
    }

    .girl-top {
      width: 100%;
      top: 0.2rem;
      display: flex;
      justify-content: center;
      font-size: 0.36rem;
    }

    .girl-top div {
      background: linear-gradient(270deg, #FF1A44 6.85%, #FF914D 100%);
      height: .64rem;
      line-height: .64rem;
      padding: 0 .1rem;
      border-radius: 0.74rem;
    }

    .girl-bot {
      width: 100%;
      bottom: 0;
      height: 0.72rem;
      line-height: 0.72rem;
      text-align: center;
      background: rgba(0, 0, 0, .5);
      border-bottom-left-radius: .2rem;
      border-bottom-right-radius: .2rem;
      font-size: 0.28rem;
    }

  

  

    .qq-wrap,
    .live-wrap {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: .21333rem;
      -moz-column-gap: .1rem;
      column-gap: .16rem;
      padding: 0.08rem 0.20rem;
      padding-top: 0;
    }
    .qq-item {
      width: 3.48rem;
      height: 5.12rem;
      border-radius: 0.2rem;
      padding: .12rem;
      background-color: #2b2f46;
    }

   

    .qq-img {
      margin: auto;
      width: 3.24rem;
      height: 3.24rem;
      border-radius: 0.2rem;
    }

    .qq-title {
      font-size: 0.28rem;
      color: #fff;
      margin-bottom: 0.16rem;
      margin-top: 0.16rem;
      font-weight: 600;
    }

    .qq-info {
      display: flex;
      justify-content: space-between;
      font-size: 0.26rem;
    }

    .qq-pic {
      color: #FF3F7E;
      margin-bottom: 0.2rem;
    }

    .qq-mount {
      font-size: 0.28rem;
    }

    .qq-pj {
      display: flex;
      justify-content: flex-start;
      height: .38rem;
    }
    .qq-pj img {
        width: .22rem;
        height: .22rem;
    }
    .qq-pl {
      font-weight: 600;
      text-align: right;
    }

    .qq-ys {
      margin-bottom: 0.16rem;
    }

    

    .live-name {
      font-size: 0.26rem;
    }

    .inner {
      font-size: 0.22rem;
      color: #fff;
    }

    .download {
      display: block;
      width: 1.2rem;
      height: .46rem;
      margin: 0 auto;
      background: url("../../img/abcd/download.png") center/100% 100% no-repeat
    }

    .tab-sub {
      display: flex;
      justify-content: flex-end
    }


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

    .tab-sub .tab-sub-box .menu-item {
      display: flex;
      align-items: center;
      justify-content: center
    }

    .tab-sub .menu-item {
      display: block;
      width: 1.34rem;
      height: .4rem;
      margin: 0 .1rem;
      line-height: .4rem;
      text-align: center;
      border-radius: .2rem;
      background: #1c1e2b;
      font-size: .2rem;
      color: #464a67
    }

    .tab-sub .menu-item.active {
      background: #2b2f46;
      color: #ff35b5;
      font-size: .2rem;
      font-weight: bold
    }

    .hidden {
      display: none !important;
    }

    .item-s4 {
      padding: .22rem;
      margin-bottom: .2rem;
      background: #222941;
      border-radius: .2rem
    }

    .item-s4 .header {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #dddee3
    }

    .item-s4 .header .cover {
      width: 1.34rem;
      height: 1.34rem;
      border-radius: 50%
    }

    .cover img {
      width: 100%;
      height: 100%;
    }

    .item-s4 .header .name {
      font-size: .33rem
    }
     .item-s4 .header .flex-middle{
         color: #9A97DB;
     }
    .item-s4 .header .btn-detail {
      width: 2rem;
      height: .68rem;
      line-height: .68rem;
      text-align: center;
      font-size: .28rem;
      color: #fff;
      border-radius: .33rem;
     background: linear-gradient(90deg, #FF512F 0%, #F09819 100%);
    }
    .item-s4 .fc-gray {
        margin-top: .24rem;
    }
    .item-s4 .text {
      margin-top: .35rem;
      align-items: flex-start
    }

    .item-s4 .more-preview {
      display: grid;
      gap: .2rem;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: .28rem
    }

    .item-s4 .more-preview img {
      width: 2rem;
      height: 2.68rem;
      border-radius: .13rem
    }

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

    .item-s5 {
      position: relative;
      width: 3.44rem;
      border-radius: .17rem;
      overflow: hidden;
      background: #2b2f46
    }

    .item-s5 .cover {
      width: 100%;
      height: 4.76rem
    }

    .item-s5 .info {
      padding: .15rem .15rem .25rem;
      font-size: .22rem
    }

    .item-s5 .name {
      margin-top: .1rem;
      font-size: .24rem
    }

    .item-s5 .more {
      flex-shrink: 0;
      width: .9rem;
      height: .9rem;
      padding: 0 .2rem;
      word-break: break-all;
      box-sizing: border-box;
      background: linear-gradient(0, #df31c1, #ff60b6);
      border-radius: .13rem 0 .13rem .13rem;
      color: #fff;
    }

    .item-s5 .icon-vip {
      position: absolute;
      left: .15rem;
      top: .15rem;
      width: .88rem;
      height: .35rem;
      background: url("../../img/abcd/vip.png") center/100% 100% no-repeat
    }

    .item-s5 .flex-1 {
      width: 2.22rem;
      word-break: break-all
    }
    
    .b-line-h {
        line-height: .4rem;
        color: #d3d4d9;
    }
    .page-wrap {
      margin: 0.5rem auto;
      display: flex;
    }

    .pagination {
      margin: auto;
      padding-left: 0;
    }

    .pagination>li {
      display: inline;
    }

    .pagination>.disabled>a,
    .pagination>.disabled>a:hover,
    .pagination>.disabled>a:focus {
      color: #fff;
      background-color: #1c1e2b;
      border-color: #a8a9ad;
      cursor: not-allowed;
    }

    .pagination>li>a {
      position: relative;
      float: left;
      padding: 6px 12px;
      line-height: 1.42857143;
      text-decoration: none;
      color: #fff;
      background-color: #1c1e2b;
      border: 1px solid #a8a9ad;
      border-radius: 2px;
      margin-left: -1px;
    }

    .pagination>li:first-child>a {
      margin-left: 0;
      border-bottom-left-radius: .08rem;
      border-top-left-radius: .08rem;
    }

    .pagination>.active>a,
    .pagination>.active>a:hover,
    .pagination>.active>a:focus {
      z-index: 2;
      color: #fff;
      background-color: #ff35b5;
      border-color: #ff35b5;
      cursor: default;
    }
    .last-icon::before,
    .last-icon::after,
    .first-icon::before,
    .first-icon::after {
      content: "";
      width: 6px;
      height: 6px;
      border-top: 0.5px solid #5D5F66;
      border-left: 0.5px solid #5D5F66;
      display: inline-flex ;
      transform: rotate(-45deg) translateY(-3px);
    }

    .last-icon::before,
    .last-icon::after {
      transform: rotate(135deg) translateY(2px);
    }

    .tab-links {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: .65rem;
      margin-bottom: .2rem;
      margin-left: .2rem;
      margin-right: .2rem;
      background: #1c1e2b;
      font-size: .27rem;
      border-radius: .17rem
    }

    .tab-links .active {
      font-size: .32rem;
      color: #ff35b5
    }
    
       .header-wrap {
        width: 100%;
        height: 0.66rem;
        color: #fff;
        font-size: .32rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 .2rem;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .icon-back {
        width: .3rem;
        height: .29rem;
        background: url("../../img/abcd/back.png") center / 0.16rem .29rem no-repeat;
    }

    .header-wrap::after {
        content: "";
        width: .3rem;
        height: .29rem;
        display: block;
    }

    .detail-wrap {
        padding: .38rem .2rem;
    }

    #swiper-detail img {
        width: 100%;
        min-height: 8rem;
        border-radius: 0.3rem;
    }

    #swiper-detail  .swiper-pagination .swiper-pagination-bullet {
        background-color: rgba(255, 255, 255, 0.5);
    }

    #swiper-detail .swiper-pagination .swiper-pagination-bullet-active {
        background-color: #FF35B5;
    }

    .detail-item {
        background-color: #2a2f45;
        border-radius: .2rem;
        padding: .32rem;
        margin-top: .18rem;
        color: #fff;
        font-size: .24rem;
    }

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

    .detail-btn {
        background: linear-gradient(90deg, #E032C1 9.15%, #FD5EB6 94.37%);
        padding: .16rem .32rem;
        border-radius: .36rem;
        line-height: 1.1;
        color: #fff;
    }

    .detail-info {
        display: flex;
    }

    .detail-info-title {
        width: 1.8rem;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .flex-grow {
        flex-grow: 1;
        font-size: .24rem;
    }

    .top-dialog {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2147483647 !important
    }

    .top-dialog .d-mask {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .2)
    }

    .top-dialog .d-main {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
        width: 80%;
        max-width: 400px;
        max-height: 80%;
        background: none;
        text-align: center
    }

    .top-dialog .d-close {
        position: absolute;
        right: 5px;
        top: 5px;
        z-index: 99;
        width: 24px;
        height: 24px;
        background-color: rgba(0, 0, 0, .9);
        color: #fff;
        border-radius: 50%;
        font-size: 16px;
        cursor: pointer
    }

    .top-dialog .d-close::before,
    .top-dialog .d-close::after {
        content: "";
        position: absolute;
        left: 2px;
        top: 11px;
        width: 20px;
        height: 1px;
        background-color: #fff;
        transform: rotate(45deg)
    }

    .top-dialog .d-close::after {
        transform: rotate(-45deg)
    }

    .s-concat-bg {
        width: 5.5rem;
        height: 8rem;
        background-size: 100% 100%
    }
    .zone-item{
        border-radius: .16rem; 
        color: #fff;
        position: relative;
        background-color: #29304a;
    }
    .zone-item .zone-item-img{
         width: 100%;
         height: 3.48rem;
         max-height: 3.48rem;
    }
   .zone-item-img{
       width: 100%;
       height: auto;
       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 {
        margin: .12rem 0;
    }
    .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, #FF2D54 0%, #FF2DA1 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;
    }
    .zone1-item-left {
         flex-grow:1;
         height: 100%;
    }
    
    .zone-item-btn{
        margin-top: .12rem;
    }
    .zone1-text-wrap{
         font-size: .24rem;
        text-align: left;
        margin-left: .16rem;
    }
    .zone1-text-wrap p{
        margin-bottom: .12rem;
    }
   .zone1-item p.zone1-item-name-wrap {
        font-size: .32rem;
        margin-bottom: 0;
    }
     .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: #8996C7;
    }
    .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;
    }
     .like-wrap img,.add-wrap img {
         width: .2rem;
     }
    .like-wrap{
     background: url("../../img/abcd/g-left.png") center/100% 100% no-repeat;
    }
    .add-wrap{
     background: url("../../img/abcd/g-right.png") center/100% 100% no-repeat;
    }
   
    .zone1-item-d{
        font-size: .2rem;
        padding-top: .24rem;
        padding-bottom: .24rem;
        display: flex;
        align-items: center;
       
    }
    .zone1-item-a {
        font-size: .2rem;
        display: flex;
        align-items: center;
        top: 3.3rem;
        left: 0;
        position: absolute;
        width: 100%;
        justify-content: center;
        overflow: hidden;
    }
    .zone1-item-a  .like-wrap, .zone1-item-a .add-wrap {
        width: 1.6rem;
        font-size: .2rem;
        padding: 0 .1rem;
    }
    .zone-item .zone1-item-name-wrap {
         font-size: .28rem;
    }
    .zone-item .zone-text-wrap p {
        font-size: .2rem;
    }
    .zone-btn-wrap {
        padding: 0.04rem .16rem .16rem .16rem;
    }
    
    .video-wrap {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .2rem;
        padding: .2rem .2rem;
    }
    .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;
    }