* {
    margin: 0;
    padding: 0
}

ul {
    list-style: none
}

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

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

html {
    background: #f6f6f6
}

body {
    max-width: 500px;
    margin: 0 auto;
    background: #fff;
    font-size: 0
}

.img-wrap {
    overflow: hidden
}

.img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
    border-radius: .2rem
}

.split-box {
    font-size: 0
}

.split-box img {
    width: 7.5rem;
    height: 1rem
}

.f0 {
    font-size: 0
}

.panel {
    padding: .2rem .2rem
}

.download {
    display: block;
    width: 1.2rem;
    height: .46rem;
    margin: 0 auto;
}

#swiper-banner {
    display: block;
    width: 100%;
    height: 3.6rem
}

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

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

marquee {
    height: .9rem;
    line-height: .9rem;
    padding: 0 .2rem;
    font-size: .28rem;
    color: #eb2c3e;
    background: #fde9eb
}

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

.nav-list dt {
    height: 1.2rem
}

.nav-list dl {
    font-size: .26rem;
    text-align: center
}

.nav-list dl img {
    width: 1.2rem;
    border-radius: .2rem
}

.nav-list .name {
    margin-top: .1rem;
    margin-bottom: .1rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 1.3rem
}

.swiper-c {
    width: 100%;
    overflow: hidden
}

#dating,#dating1,#dating2,#dating3,#dating4 {
    display: grid;
    grid-gap: .2rem;
    grid-template-columns: repeat(2,1fr)
}

#dating .item,#dating1 .item,#dating2 .item,#dating3 .item,#dating4 .item {
    position: relative
}

#dating .bg,#dating1 .bg,#dating2 .bg,#dating3 .bg,#dating4 .bg {
    width: 100%;
    height: 4rem
}

#dating .img-wrap,#dating1 .img-wrap,#dating2 .img-wrap,#dating3 .img-wrap,#dating4 .img-wrap {
    position: relative
}

#dating .img-wrap:after,#dating1 .img-wrap:after,#dating2 .img-wrap:after,#dating3 .img-wrap:after,#dating4 .img-wrap:after {
    content: "点击查看更多";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.6rem;
    line-height: .6rem;
    text-align: center;
    cursor: pointer;
    background: rgba(0,0,0,.4);
    color: #fff;
    font-size: .26rem;
    border-radius: 0 0 0.2rem 0.2rem;
}

#dating .tag,#dating1 .tag,#dating2 .tag,#dating3 .tag,#dating4 .tag {
    position: absolute;
    left: .1rem;
    top: .2rem;
    height: .34rem;
    padding: 0 .2rem;
    line-height: .34rem;
    border-radius: .34rem;
    font-size: .26rem;
    color: #fff;
    background: linear-gradient(to right,#ffaa6b,#ff6076)
}

#dating .tag1,#dating1 .tag1,#dating2 .tag1,#dating3 .tag1,#dating4 .tag1 {
    position: absolute;
    left: .1rem;
    top: 2.85rem;
    height: .35rem;
    padding: .01rem .2rem;
    line-height: .34rem;
    border-radius: .34rem;
    font-size: .26rem;
    color: #fff;
    background: linear-gradient(to right,#ffaa6b,#ff6076)
}

#dating .name,#dating1 .name,#dating2 .name,#dating3 .name,#dating4 .name {
    margin-top: .15rem;
    padding-left: .1rem;
    font-size: 10px
}

#live,#live1,#live2,#live3,#live4 {
    display: grid;
    grid-gap: .2rem;
    grid-template-columns: repeat(2,1fr)
}

#live .item,#live1 .item,#live2 .item,#live3 .item,#live4 .item {
    position: relative
}

#live .item::after,#live1 .item::after,#live2 .item::after,#live3 .item::after,#live4 .item::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 9;
    width: .64rem;
    height: .64rem;
    transform: translate(-50%,-50%);
    background: url("../../img/abcd/play.png") center/cover no-repeat
}

#live .bg,#live1 .bg,#live2 .bg,#live3 .bg,#live4 .bg {
    width: 100%;
    height: 5rem
}

#live .tag,#live1 .tag,#live2 .tag,#live3 .tag,#live4 .tag {
    position: absolute;
    right: .05rem;
    top: .2rem;
    width: 1rem;
    height: .3rem;
    background: url("../../img/abcd/zb.png") center/100% 100% no-repeat
}

#live .bottom,#live1 .bottom,#live2 .bottom,#live3 .bottom,#live4 .bottom {
    position: absolute;
    left: .2rem;
    bottom: .25rem;
    color: #fff
}

#live .hot-wrap,#live1 .hot-wrap,#live2 .hot-wrap,#live3 .hot-wrap,#live4 .hot-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .15rem;
    font-size: .28rem
}

#live .hot,#live1 .hot,#live2 .hot,#live3 .hot,#live4 .hot {
    height: .32rem;
    padding: 0 .1rem;
    margin-right: .15rem;
    line-height: .32rem;
    border-radius: .1rem;
    font-size: .24rem;
    background: linear-gradient(to right,#ee227c,#a117dd)
}

#live .online-num,#live1 .online-num,#live2 .online-num,#live3 .online-num,#live4 .online-num {
    font-size: .22rem
}

em {
    font-style: normal
}

.nav-c {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 1rem;
    line-height: 1rem;
    border-bottom: .04rem solid #e5e5e5
}

.nav-c .item {
    flex: 1;
    text-align: center;
    cursor: pointer;
    color: #5c5c5c;
    font-size: .34rem
}

.nav-c .active {
    color: #fd4c5d
}

.nav-c em {
    display: inline-block;
    height: 100%;
    position: relative;
    font-weight: 700;
    white-space: nowrap;
}

.nav-c em::after {
    content: "";
    width: 100%;
    position: absolute;
    left: 0;
    top: 75%;
    height: .1rem;
    background-image: -webkit-gradient(linear,0 0,100% 0,from(#b64cbb),to(#35dcc5));
    background-image: -webkit-linear-gradient(left,#35dcc5,#b64cbb);
    background-image: -moz-linear-gradient(left,#fe67b0,#a982f5);
    background-image: -o-linear-gradient(left,#fe67b0,#a982f5);
    background-image: linear-gradient(left,#fe67b0,#a982f5);
    border-radius: 8px;
    opacity: 0;
    transition: opacity .3s
}

.nav-c .active em::after {
    opacity: 1
}

.marquee-b {
    display: flex;
    align-items: center;
    padding: .1rem;
    background: #fef0f0;
    color: #fd4c5d;
    box-sizing: content-box
}

.marquee-b .marquee-svg {
    width: .5rem;
    fill: #fd4c5d
}

.marquee-b .marquee-box {
    flex: 1;
    overflow: hidden
}

.marquee-b .marquee-box p {
    display: inline-block;
    font-size: .24rem;
    line-height: .4rem
}

.marquee-b .btn-cc {
    line-height: .3rem;
    padding: .1rem .15rem;
    white-space: nowrap;
    letter-spacing: .02rem;
    margin-left: .1rem;
    font-size: .2rem;
    text-align: center;
    border: 1px solid #fd4c5d;
    color: #fd4c5d;
    border-radius: .1rem
}

.rows-d .item {
    display: flex;
    justify-content: space-between;
    border-bottom: .02rem solid #e5e5e5;
    padding: .28rem
}

.rows-d .img-wrap {
    flex-shrink: 0;
    width: 1.2rem;
    height: 1.2rem
}

.img-wrap img,.img-wrap .img {
    width: 100%;
    height: 100%;
    border-radius: .2rem
}

.img-wrap .img {
    background-size: cover
}

.rows-d .info {
    padding-left: .2rem;
    width: calc(100vw - 3.16rem)
}

.down {
    background: url('https://imgsrc.baidu.com/forum/pic/item/dbb44aed2e738bd416dba10de78b87d6277ff910.png') no-repeat;
    width: 1.4rem;
    background-size: contain;
    height: .52rem;
    display: block;
    text-indent: -99.99rem
}

.rows-d .down {
    flex-shrink: 0;
    margin-left: auto
}

.rows-d .t1 {
    font-size: .34rem;
    font-weight: 700
}

.rows-d .t2,.rows-d .t1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: .6rem
}

.rows-d .t2 {
    font-size: .2rem;
    color: #454545
}