/* 头部样式 */
.header{
    z-index: 9999;
    position: sticky;
    top: 0;
    width: 100%;
    height: 70px;
    background-color: #222225;
    padding-top: 12px;
    box-sizing: border-box;
}

.header-left{
    width: 20%;
}

.header-center{
    width: 90%;
}

.header-center .active{
    color: #F48D37;
}

.header-center .active img{
    display: inline-block;
    vertical-align: middle;
}

.header-center .active p{
    margin-top: -5px!important;
}

.header-right{
    width: 20%;
    height: 46px;
    justify-content: flex-end;
}

.header-right-list{
    z-index: 99;
    position: absolute;
    top: 49px;
    left: -36px;
    width: 128px;
    text-align: center;
    background-color: #222225;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    display: none;
}

.header-right-list::after{
    position: absolute;
    top: 0;
    content: '';
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 13px solid #222225;
    right: 16px;
}

.header-right-list-wrap{
    position: relative;
}

.header-right-list-wrap:hover .header-right-list{
    display: block;
}

.header-right-list>li{
    margin: 18px 0;
}

.header-right .avatar{
    width: 49px;
    height: 49px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-sizing: border-box;
}

.header-right a{
    color: #D2D2D2;
}

.header-center a{
    margin-right: 8%;
    font-size: 15px;
    color: #fbf6f6;
    font-weight: 600;
}

.header-center form{
    position: relative;
    width: 30%;
    margin-right: -5px;
}

.header-center input{
    border-radius: 30px;
    height: 42px;
    background: #2f2e2e;
    border: none;
    width: 100%;
    padding: 0 80px 0 20px;
    box-sizing: border-box;
    color: #A09F9F;
}

.header-center form button{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 38px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.side-left{
    width: 16.5%;
}

.side-left a{
    margin-top: 20px;
    color: #D2D2D2;
    font-size: 15px;
}


.side-left .active{
    color: #F48D37;
}

.side-right{
    width: 23.5%;
}

.side-tag-list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.side-tag-list a{
    color: #D2D2D2;
    font-size: 14px;
    margin-right: 15px;
}

.main-content{
    width: 57.5%;
}

.side-right-jxVideo{
    width: 100%;
    background-color: #222225;
}

.side-right-jxVideo p{
    color: #D2D2D2;
}

.side-right-jxVideo span{
    color: #737373;
    display: block;
}

.side-right-jxVideo a{
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
}

.side-right-jxVideo .fengmian{
    width: 100%;
    height: 100px;
    object-fit: cover;
    transition: all 250ms;
}

.side-right-jxVideo a:hover .fengmian{
    transform: scale(1.05);
    transition: all 250ms;
}

.side-right-jxVideo .icon-tag{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 34px;
}
.side-right-hyMusier{
    background-color: #222225;
}

.side-right-hyMusier-list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.side-right-hyMusier-list a{
    display: inline-block;
    width: 49%;
    margin-right: 2%;
    margin-bottom: 15px;
}

.side-right-hyMusier-list a:nth-child(2n){
    margin-right: 0%;
}

.side-right-hyMusier-list a img{
    border-radius: 50%;
    object-fit: cover;
    width: 78px;
    height: 78px;
    margin: 0 auto;
    transition: all 250;
}

.side-right-hyMusier-list-wrap{
    overflow: hidden;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    margin: 0 auto;
}

.side-right-hyMusier-list a:hover .side-right-hyMusier-list-wrap{
    box-shadow: 1px 13px 9px -5px rgba(77, 77, 77, 0.59);
}

.side-right-hyMusier-list a:hover img{
    transform: scale(1.05);
    transition: all 250;
}

.side-right-hyMusier-list a span{
    display: inline-block;
    color: #737373;
}

.side-right-hyMusier-list a p{
    color: #D2D2D2;
}

.side-right-zixun{
    background-color: #222225;
}

.side-right-zixunContent{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.side-right-zixunContent a{
    color: #D2D2D2;
    margin-top: 15px;
}

.index-side-usb-item .c-fengmian{
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
}

.index-side-usb-item .c-fengmian img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.index-side-usb-item  .c-right{
    width: calc(100% - 70px);
    margin-left: 10px;
}







.index-jxgd{
    background-color: #222225;
}

.index-swiper-pagination{
    position: absolute;
    left: 600px!important;
    bottom: 4px!important;
    width: auto!important;
}

.index-swiper-button-prev {
    left: 580px!important;
    right: auto;
}

.index-swiper-button-prev:after{
    content: 'prev';
    color: #fff!important;
    font-size: 14px!important;
    right: -33px!important;
}


.index-swiper-button-next {
    left: 629px!important;
    right: auto;
}

.index-swiper-button-next:after{
    content: 'next';
    color: #fff!important;
    font-size: 14px!important;
    right: -33px!important;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
}

.index-swiper-item{
    position: relative;
    display: block;
    width: 23%;
    margin-right: 3%;
}

.index-swiper-item:last-child{
    margin-right: 0%;
}

.index-swiper-item:hover .fengmian{
    transform: scale(1.05);
    transition: all 250ms;
}

.index-swiper-item .fengmian{
    width: 100%;
    height: 145px;
    border-radius: 10px;
    object-fit: cover;
    transition: all 250ms;
}

.index-swiper-item p{
    color: #D2D2D2;
}

.index-swiper-item .icon-bf{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 55px;
}

.index-music-item{
    position: relative;
    background-color: #262729;
    margin-bottom: 15px;
}

.index-music-item .avatar{
    display: inline-block;
    width: 35px;
    height: 35px;
}

.index-music-item .avatar img{
    width: 100%;
    height: 100%!important;
    border-radius: 50%;
    object-fit: cover;
}

.index-music-info{
    width: 100%;
}

.index-music-info .uptag{
    position: absolute;
    right: 2px;
    top: 5px;
    padding: 5px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .5);
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 16px;
}

.index-music-info-right{
    width: 80%;
}

.index-music-info-right a{
    display: block;
}

.index-music-info .fengmian{
    width: 58px;
    height: 58px;
    border-radius: 10px;
    object-fit: cover;
    transition: all 250ms;
}

.index-music-info .fengmian:hover{
    transform: scale(1.05);
    transition: all 250ms;
}

.index-music-info .icon-bf{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 30%;
}

.index-music-handle{
    position: absolute;
    right: 20px;
    top: 20px;
}
.index-music-handle a{
    margin: 0 7px;
}

.dynamic-content-video{
    position: relative;
    width: 100%;
    text-align: center;
    background-color: #101010;
}

.dynamic-content-video a {
    display: block;
    width: 100%;
}

.dynamic-content-video .fengmian {
    max-height: 292px;
}

.dynamic-content-video .dynamic-ibf {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}


/* 榜单页面 */
.main-content2{
    width: 82%;
}

.bangdan-top{
    background-color: #262729;
}

.bangdan-top a{
    color: #ffffff;
    margin-right: 10%;
}

.bangdan-top .active{
    color: #F48D37;
}

.bangdan-top .bfqb-btn{
    background-color: #F48D37;
    width: 122px;
    height: 39px;
    text-align: center;
    line-height: 39px;
    border-radius: 30px;
    border: none;
    color: #ffffff;
    cursor: pointer;
}

.bangdan-list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.bangdan-list-item{
    background-color: #262729;
    width: 49%;
    margin-right: 2%;
    margin-bottom: 2%;
}

.bangdan-list-item:nth-child(2n){
    margin-right: 0;
}

.bangdan-bot a{
    color: #ffffff;
}

/* 底部样式 */
.footer-right img{
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.footer-center{
    width: 55%;
}

.footer-center p{
    color: #838383;
    font-size: 16px;
}

.footer-center a{
    display: block;
    margin-top: 5px;
    color: #D2D2D2;
}

/* 歌单 */
.gedan-filter{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.gedan-filter span{
    margin-right: 5px;
}

.gedan-filter ul>li:not(:last-child){
    margin-right: 15px;
}

.gedan-filter-item{
    width: 49%;
    margin-right: 2%;
    margin-bottom: 2%;
}

.gedan-filter-item a{
    color: #D2D2D2;
}

.gedan-filter-item .more{
    color: #676767;
}

.gedan-filter-item:nth-child(2n){
    margin-right: 0;
}

.gedan-filter-item .active{
    padding: 3px 16px;
    border-radius: 30px;
    box-sizing: border-box;
    background-color: #3e3f40;
    color: #ffffff;
}

.gedan-item{
    position: relative;
    display: block;
    width: 18.4%;
    margin-right: 2%;
    margin-bottom: 3%;
}

.gedan-item .gedan-status-tag{
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 5px 15px;
    border-radius: 30px;
    background-color: rgba(0, 0, 0, .5);
    color: #ffffff;
}

.gedan-item:nth-child(5n){
    margin-right: 0%;
}

.gedan-item:hover .fengmian{
    transform: scale(1.05);
    transition: all 250ms;
}

.gedan-item .fengmian{
    width: 100%;
    height: 145px;
    border-radius: 10px;
    object-fit: cover;
    transition: all 250ms;
}

.gedan-item p{
    color: #D2D2D2;
}

.gedan-item .icon-bf{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 55px;
    opacity: 0;
    transition: all 250ms;
}

.gedan-item:hover .icon-bf{
    opacity: 1;
    transition: all 250ms;
}

.gedan-list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* 歌单详情 */
.gedan-detail-info{
    width: 100%;
}

.gedan-detail-left{
    width: 188px;
    height: 220px;
}

.gedan-detail-left img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.gedan-detail-right{
    width: calc(100% - 208px);
    margin-left: 20px;
}

.gedan-detail-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 122px;
    height: 39px;
    background: #313131;
    border: none;
    border-radius: 17px;
    color: #ffffff;
    margin-right: 20px;
    cursor: pointer;
}


.gedan-detail-btn img{
    margin-right: 10px;
}

.gedan-detail-right .gedan-detail-tag a{
    color: #F48D37;
}

.gedan-detail-right .gedan-detail-tag span{
    margin: 0 5px;
}

/* 音乐类型 */

.leixing-list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.leixing-list-item{
    position: relative;
    width: 23.5%;
    height: 200px;
    margin-right: 2%;
    margin-bottom: 2%;
}

.leixing-list-item:nth-child(4n){
    margin-right: 0;
}

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

.leixing-list-item::after{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background-color: rgba(0, 0, 0, .5);
}

.leixing-list-item span{
    z-index: 10;
    position: absolute;
    right: 0;
    top: 0;
    margin: auto;
    bottom: 0;
    left: 0;
    color: #ffffff;
    font-size: 25px;
    width: 100%;
    height: 30px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 1px;
}

/* 我关注的音乐人 */
.side-right-musicer{
    background-color: #222225;
}

.side-right-musicer h2{
    color: #EAEAEA;
}

.side-right-musicer-item img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.side-right-musicer-item  a span{
    color: #ffffff;
}

.side-right-musicer-item .btn{
    width: 64px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    border: 1px solid #9D9D9D;
    color: #9D9D9D;
    border-radius: 30px;
    cursor: pointer;
}

.side-right-musicer-item .focus{
    width: 64px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    border: 1px solid #F98F1D;
    color: #F98F1D;
    border-radius: 30px;
    cursor: pointer;
}

.side-right-musicer-item .focus:hover{
    color: #ffffff;
    background-color: #F98F1D;
}

/* 播放列表 */
.qklb-btn{
    border:1px solid #9D9D9D;
    background-color: transparent;
    width: 122px;
    height: 39px;
    text-align: center;
    line-height: 39px;
    border-radius: 30px;
    color: #9D9D9D;
    cursor: pointer;
}


.paly-list-item .avatar{
    width: 50px;
    height: 50px;
    border-radius: 5px;
    margin-right: 10px;
    overflow: hidden;
}



.paly-list-item:hover .paly-tag{
    transition: all 250ms;
    transform: scale(1.2);
}

.paly-list-item:hover{
    background-color: #2c2d2f!important;
}

.paly-list-item:hover td{
    background-color: #2c2d2f!important;
}

.paly-list-item{
    color: #ffffff;
}

.paly-list-item a{
    position: relative;
    color: #d2d2d2;
}

.play-list-nav a{
    color: #d2d2d2;
}

.play-list-nav .active{
    color: #fe7526;
}


.play-list th,td,table{
    border: none!important;
}
.play-list tr{
    background-color: #262729!important;
}

.play-list thead tr{
    border-bottom: 1px solid #171719!important;
}

.play-list tbody tr{
    border-bottom: 1px solid #171719!important;
    border-color: #171719!important;
}

.paly-list-name{
    position: relative;
}

.paly-list-name .paly-tag{
    position: absolute;
    left: 13px;
    top: 12px;
    cursor: pointer;
}

.bfqb-btn{
    background-color: #F48D37;
    width: 122px;
    height: 39px;
    text-align: center;
    line-height: 39px;
    border-radius: 30px;
    border: none;
    color: #ffffff;
    cursor: pointer;
}

.cjgd-btn{
    background-color: #F48D37;
    width: 122px;
    height: 39px;
    text-align: center;
    line-height: 39px;
    border-radius: 5px;
    border: none;
    color: #ffffff;
    cursor: pointer;
}

.cjgd-btn:hover{
    color: #ffffff;
}

/* 我喜欢的 */

.my-fav-list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.my-fav-item .avatar{
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 50%;
    overflow: hidden;
}

.video-tag a:hover{
    text-decoration: underline;
}

.my-fav-item {
    background-color: #202021;
    width: 23.5%;
    margin-right: 2%;
    border-radius: 5px;
    margin-bottom: 2%;
}

.my-fav-item:hover{
    background-color: #2e2e2f;
}

.my-fav-item:nth-child(4n){
    margin-right: 0;
}

.my-fav-item .fengmian-wap{
    position: relative;
    display: block;
    width: 100%;
    height: 200px;
    overflow: hidden;
}


.my-fav-item .fengmian-wap:hover .fengmian{
    transform: scale(1.2);
    transition: all 250ms;
}

.my-fav-item .fengmian{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 250ms;
}

.my-fav-item .bf-tag{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

/* 音乐人 dj  */
.dj-left{
    width: 71.5%;
    background-color: #262729;
}

.dj-right{
    width: 27%;
}

.dj-tab a{
    color: #D2D2D2;
    margin-right: 40px;
}

.dj-tab a:nth-child(:last-child){
    margin-right: 0;
}

.dj-tab .active{
    color: #F48D37;
}

.dj-item{
    width: 100%;
    border-bottom: 1px solid #2d2e30;
}

.dj-item .avatar{
    display: inline-block;
    width: 139px;
    height: 139px;
    margin-right: 15px;
}

.dj-item .avatar img{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid #373937;
    box-sizing: border-box;
}

.dj-item-right{
    position: relative;
    width: calc(100% - 150px);
}

.dj-item-right ul>li{
    margin-top: 15px;
}

.dj-item-right ul>li span{
    display: inline-block;
    max-width: 96%;
}

.dj-item-right .focus-btn{
    position: absolute;
    right: 0;
    top: 0;
    width: 90px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    border: 1px solid #F98F1D;
    color: #F98F1D;
    border-radius: 30px;
    cursor: pointer;
}

.dj-item-right .focus-btn:hover{
    background-color: #F98F1D;
    color: #ffffff;
}

.dj-item-right .focus-btn-ed{
    position: absolute;
    right: 0;
    top: 0;
    width: 90px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    border: 1px solid #9d9d9d;
    color: #9d9d9d;
    border-radius: 30px;
    cursor: pointer;
}

.dj-right .renzheng-btn{
    display: block;
    width: 207px;
    height: 43px;
    border: 1px solid #9d9d9d;
    border-radius: 17px;
    cursor: pointer;
    line-height: 43px;
    color: #9d9d9d;
    text-align: center;
    margin: 20px auto auto auto;
}

.c-makeMoney-status{
	width: 100%;
}

.c-makeMoney-status ul>li{
	position: relative;
	margin-bottom: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	box-sizing: border-box;
}
.c-makeMoney-status ul>li::before{
	position: absolute;
    width: 5px;
    height: 5px;
    content: '';
    background-color: #ff0000;
    border-radius: 50%;
    left: 0;
    top: 8px;
}

.c-makeMoney-status ul>li:last-child{
	border-bottom: none;
}

.new-join{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.new-join a{
    width: 23.5%;
    margin-right: 2%;
    margin-bottom: 6%;
    text-align: center;
}

.new-join a:nth-child(4n){
    margin-right: 0;
}

.new-join a img{
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 50%;
}

/* dj 详情 */
.djDetail-left{
    position: sticky;
    width: 28%;
    top: 0px;
}

.djDetail-right{
    width: 70.5%;
    min-height: 78vh;
}

.djDetail-right form{
    position: relative;
}

.djDetail-right input {
    border-radius: 30px;
    height: 42px;
    background: #3d3d3d;
    border: none;
    width: 100%;
    padding: 0 80px 0 20px;
    box-sizing: border-box;
    color: #A09F9F;
}

.djDetail-right form button {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 38px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.djDetail-right-tabLeft{
    width: 60%;
}

.djDetail-right-tabLeft a{
    margin-right: 5%;
    font-size: 18px;
    color: #FFFFFF;
}

.djDetail-right-tabLeft a:last-child{
    margin-right: 0;
}

.djDetail-right-tabLeft .active{
    color: #F48D37;
}

.djDetail-list .bangdan-list-item {
    background-color: #262729;
    width: 48%;
    margin-right: 4%;
    margin-bottom: 2%;
}

.djDetail-list .bangdan-list-item:nth-child(2n){
    margin-right: 0;
}

.djDetail-info img{
    width: 128px;
    height: 128px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    object-fit: cover;
    margin-right:0 auto ;

}

.djDetail-info-right h2{
    font-size: 28px;
    color: #ffffff;
    font-weight: 600;
    width: 100%;
}


.djDetail-left .focus-btn{
    width: 103px;
    height: 39px;
    background: linear-gradient(0deg,#f48d37 0%, #d76e17 100%);
    border-radius: 17px;
    text-align: center;
    line-height: 39px;
    color: #FFFFFF;
    cursor: pointer;
}

.djDetail-left .share-btn{
    width: 122px;
    height: 39px;
    border: 1px solid #ffffff;
    border-radius: 17px;
    text-align: center;
    line-height: 39px;
    box-sizing: border-box;
    cursor: pointer;
}


/* 视频 */
.video-filter{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.video-filter span{
    margin-right: 5px;
}

.video-filter-item ul>li:not(:last-child){
    margin-right: 15px;
}

.video-filter-item{
    width: 100%;
    margin-bottom: 30px;
}

.video-filter-item:last-child{
    margin-bottom: 0;
}

.video-filter-item a{
    color: #D2D2D2;
}

.video-filter-item a:hover{
    color: #555;
}

.video-filter-item .more{
    color: #676767;
}

.video-filter-item:nth-child(2n){
    margin-right: 0;
}

.video-filter-item .active{
    padding: 3px 16px;
    border-radius: 30px;
    box-sizing: border-box;
    background-color: #f48d37;
    color: #ffffff!important;
}

/* 搜索页 */
.search-tab a{
    position: relative;
    margin-right: 60px;
    color: #D2D2D2;
    padding-bottom: 20px;
    box-sizing: border-box;
    display: block;
    width: 47px;
    text-align: center;
}

.search-tab .active{
    color: #F48D37;
}

.search-tab .active::after{
    position: absolute;
    content: '';
    width: 45px;
    height: 2px;
    bottom: 9px;
    background-color: #F48D37;
    left: 0px;
}

.search-left{
    width: 80%;
}

.search-right{
    width: 18.5%;
}

.search-music-ul{
    width: 100%;
}

.search-music-ul>li{
    width: 100%;
    margin-bottom: 15px;
}

.search-music-ul a{
    display: inline-block;
    max-width: 90%;
    color: #D2D2D2;
}

.search-right-download-left{
    position: relative;
    width: 42px;
    height: 42px;
}

.search-right-download-left .fengmian{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.search-right-download-left .bf-tag{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    margin: auto;
}

.search-right-download span{
    display: inline-block;
    width: calc(100% - 52px);
    color: #ffffff;
    height: 42px;
}

.search-right-download{
    margin-top: 15px;
}

/* 修改资料 */

.user-side{
    width: 17.5%;
    background-color: #262729;
}

.user-right{
    width: 81%;
    min-height: 821px;
    background-color: #262729;
}

.user-side .avatar-wrap{
    position: relative;
}

.user-side .avatar{
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    object-fit: cover;
    margin: 0 auto;
}

.avatar-wrap .avatar-tag{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

.user-side-title{
    width: 140px;
    height: 33px;
    background: #313131;
    border-radius: 17px;
    text-align: center;
    line-height: 33px;
    margin: 20px auto auto auto;
}

.user-side a{
    color: #D2D2D2;
}

.user-side .active{
    color: #f48d37;
}

.user-side-nav a{
    width: 70%;
    display: flex;
    align-items: center;
    margin: 0 auto;
}

.c_fonts_total {
    position: absolute;
    top: 11px;
    left: 57%;
}

.c_fonts_num{
    padding-right: 30px;
    box-sizing: border-box;
}

.pore {
    position: relative;
}

.user-input-style input,.user-input-style textarea{
    background-color: #3D3D3D;
    color: #cfcaca;
    border-color: #3D3D3D;
}

.layui-form-onswitch {
    border-color: #3D3D3D;
    background-color: #3D3D3D;
}

.user-input-style  .layui-btn{
    background-color: #F98F1D;
}



.layui-form-select dl dd.layui-this {
    background-color: #F98F1D!important;
    color: #d2d2d2;
}

.layui-form-radio>i:hover, .layui-form-radioed>i {
    color: #F98F1D;
}

/* 认证 */
.renzheng-process .process-tag{
    width: 49px;
    height: 49px;
    background: #f48d37;
    border-radius: 50%;
    text-align: center;
    line-height: 49px;
    margin: 0 auto;
}

.renzheng-process .limit{
    display: inline-block;
    width: 108px;
    height: 1px;
    background: #626971;
    margin: 0 10px;
}

/* 歌曲上传 */

.releaseMusic{
    position: relative;
}
.releaseMusic input {
    border-radius: 30px;
    height: 42px;
    background: #3d3d3d;
    border: none;
    width: 100%;
    padding: 0 80px 0 20px;
    box-sizing: border-box;
    color: #A09F9F;
}

.releaseMusic form button {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 38px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.releaseMusic a{
    width: 109px;
    height: 35px;
    background: #e6851e;
    border: 1px solid #f98f1d;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
    line-height: 33px;
    color: #ffffff;
}

.layui-layer-dialog .layui-layer-content {
    position: relative;
    padding: 20px;
    line-height: 24px;
    word-break: break-all;
    overflow: hidden;
    font-size: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    color: #202021;
}

.layui-layer-btn .layui-layer-btn0 {
    border-color: #e6851e!important;
    background-color: #e6851e!important;
    color: #fff;
}

.window-close-btn{
    width: 109px;
    height: 35px;
    background: #e6851e;
    border: 1px solid #f98f1d;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
    line-height: 33px;
    color: #ffffff;
}

.wu-example{
    width: 500px;
    height: 400px;
    background-color: #222225;
    margin: 10% auto auto auto;
}

.wu-example .picker{
    background-color: transparent;
}

.wu-example .webuploader-pick{
    background-color: transparent;
    margin: 20% auto auto auto;
}

/* 充值 */
.recharge-item{
    position: relative;
    width: 22.5%;
    height: 122px;
    background: #2e2f30;
    border: 2px solid #2E2F30;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    margin-right: 2%;
    margin-bottom: 2%;
    
}

.recharge-item:nth-child(4n){
    margin-right: 0;
}

.recharge-item p{
    height: 61px;
    line-height: 61px;
    color: #D2D2D2;
}

.recharge-item p:first-child{
    border-bottom: 1px solid #3D3D3D;
    font-size: 30px;
}

.recharge-item-wrap .active{
    border: 2px solid #fe7526;

}

.recharge-item-wrap .active p{
    color: #fe7526;
}

.recharge-item-wrap .active-tag{
    position: absolute;
    right: -1px;
    bottom: -1px;
    display: none;
}

.recharge-item-wrap .active .active-tag{
    display: block;
}

.recharge-item-wrap{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.z-recharge-type ul {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}



.z-recharge-type ul li {
    width: 130px;
    height: 46px;
    background: #2e2f30;
    border: 2px solid #2e2f30;
    border-radius: 5px;
    margin-right: 30px;
    cursor: pointer;
}

.z-recharge-type ul .active{
    width: 130px;
    height: 46px;
    background: #2e2f30;
    border: 2px solid #fe7526;
    border-radius: 5px;
}

.z-recharge-price ul li .z-top {
    height: 78px;
    border-bottom: 1px solid rgba(230, 230, 230, 1);
}


.z-recharge-price ul li .z-top span {
    margin-left: 8px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: rgba(41, 41, 41, 1);
    line-height: 24px;
}

.z-recharge-price ul li .z-bottom {
    line-height: 30px;
}

/* 提现 */
.enable-coin {
    display: flex;
    align-items: center;
    padding: 0px 20px;
    width: 100%;
    height: 50px;
    background: #3D3D3D;
    color: #D2D2D2;
    box-sizing: border-box;
}

.enable-coin p:nth-child(1) {
    margin-right: 40px;
}

.z-modify-psw-tips {
    text-align: left;
    width: 100%;
    margin-top: 30px !important;
    padding: 15px 16px;
    line-height: 25px;
    background: #3D3D3D;
    border: 1px solid #3D3D3D;
    box-sizing: border-box;
    color: #D2D2D2;
}


/* 资金明细 */
.money-bg1{
    width: 331px;
    height: 115px;
    background: #262729;
    background-image: url(../images/user/bg1.png);
    background-repeat: no-repeat;
    margin-right: 60px;
    color: #ffffff;
}

.money-bg2{ 
    width: 331px;
    height: 115px;
    color: #ffffff;
    background: #262729;
    background-image: url(../images/user/bg2.png);
    background-repeat: no-repeat;
}

.money-bg1 a,
.money-bg2 a{
    display: inline-block;
    width: 91px;
    height: 31px;
    border: 1px solid #ffffff;
    border-radius: 17px;
    text-align: center;
    line-height: 31px;
    color: #ffffff;
    margin-right: 20px;
}

.money-filter{
  color: #D2D2D2;  
}

.money-filter  a{
    color: #D2D2D2;  
    margin-right: 30px;
}

.money-filter .active{
    color: #F98F1D;
}

.z-comein-detail {
    width: 100%;
    height: 45px;
    border-bottom: 1px solid #DDD;
    margin-bottom: 10px;
}

.z-comein-detail ul {
    display: flex;
    justify-content: flex-start;
}

.z-comein-detail ul li {
    position: relative;
    width: 70px;
    height: 45px;
    line-height: 40px;
    text-align: center;
    margin-right: 15px;
    font-size: 15px;
    font-weight: bold;
}

.z-comein-detail ul .active::after {
    content: "";
    width: 100%;
    height: 3px;
    position: absolute;
    bottom: 0px;
    left: 0px;
}
.z-comein-detail-item-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.z-comein-detail-item .left{
    width: 54px;
    height: 54px;
}

.z-comein-detail-item .c-cicle{
    border-radius: 50%;
    border: 1px solid #363636;
    text-align: center;
    line-height: 52px;
    background-color: #363636;
    color: #898989;
}

.z-comein-detail-item-content:not(:last-child){
    margin-bottom: 20px;
}

.z-comein-detail-item:not(:last-child){
    margin-bottom: 20px;
}


.z-comein-detail-item .right{
    width: 93%;
   
}

.z-comein-detail-item .right .colorA2{
    color: #a2a2a2;
}


/* 注册登陆 */
.login-left{
    position: relative;
    width: 302px;
    box-sizing: border-box;
}

.login-left::after{
    position: absolute;
    width: 1px;
    height: 375px;
    background-color: #f2f2f2;
    content: '';
    display: block;
    right: 4px;
    top: 18px;
}

.login-right{
    width: calc(100% - 302px);
}

.login-right h2{
    color: #141414;
}

.c-login-item {
	width: 100%;
}

.login-right-tab a{
    padding-bottom: 10px;
    box-sizing: border-box;
}

.login-right-tab .active{
    /* border-bottom: 2px solid #FF712C; */
    color: #FF712C;
    
}

.c-phone-in {
	position: relative;
	display: block;
	width: 100%;
	height: 42px;

}

.c-login-switch {
	margin-bottom: 20px;
}

.c-phone-in input {
	width: 100%;
	height: 100%;
	padding: 0 15px;
	box-sizing: border-box;
	transition: 300ms all;
	border: 1px solid #e6e6e6;
	color:#2d2d2d;
}

.c-phone-in input:focus {
	border: 1px solid #D9383E;
	transition: 300ms all;
}

.c-phone-in-checkbox {
	position: relative;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.c-phone-in-checkbox input {
	z-index: 100;
	margin-right: 5px;
	opacity: 0;
}


.c-phone-in-checkbox i {
	position: absolute;
	left: 0;
	z-index: 10;
	font-size: 16px;
	cursor: pointer;
	transition: all 250ms;
}

.c-check {
	opacity: 0;
}

.c-noCheck {
	opacity: 1;
	font-size: 17px;
}

.c-phone-in-checkbox input:checked+.c-check {
	opacity: 1;
	transition: all 250ms;
}

.c-phone-in-checkbox input:checked+.c-noCheck {
	opacity: 0;
	transition: all 250ms;
}

.c-forget-in {
	text-decoration: underline !important;
}

.c-phone-in-sub {
	width: 100%;
}

.c-phone-in-sub input {
	width: 100%;
	height: 45px;
	color: #fff;
	border-radius: 8px;
	cursor: pointer;
}

.c-phone-in-sub button{
    width: 100%;
    height: 36px;
    background: #f48d37;
    border-radius: 18px;
    margin: 0 auto;
}

.c-phone-in-other {
	width: 100%;
	color: #4d4d4d;
}

.c-phone-in-other p:first-child {
	border-bottom: 1px solid #e6e6e6;
	padding-bottom: 10px;
}

.c-phone-in-other p:nth-child(2) a {
	margin-right: 15px;
}

.c-phone-in-other .color {
	text-decoration: underline;
}

.c-phone-check {
	width: 100%;
	height: 42px;
}

.c-phone-check input {
	width: 100%;
	height: 100%;
	padding: 0 10px;
	box-sizing: border-box;
}

.c-get-check {
    position: absolute;
	width: 30%;
	height: 42px;
    top: 0;
    right: -10px;
}

.c-get-check input {
	width: 100%;
	height: 100%;
	padding: 0 10px;
	box-sizing: border-box;
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
}

.login-form input::-webkit-input-placeholder{
    color:#D1D1D1;
}

.login-form input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:#D1D1D1;
}

.z-get-code{
    position: absolute;
    right: -8px;
    top: 0px;
    width: 98px;
}

.login-form .layui-form-checkbox[lay-skin=primary] span{
    color: #A5A3A3;
}

.login-form a{
    color: #A5A3A3;
}

.login-form input{
    padding: 0px 30px;
    box-sizing: border-box;
    border-radius: 30px;
    display: block;
}

.login-form .lr-tag{
    position: absolute;
    left: 10px;
    top: 15px;
}


.z-phone-code-btn{
    background-color: #FFFFFF;
    color: #F48D37;
    padding: 0;
    text-align: center;
    width: 89%;
}

.z-phone-code-btn:hover{
    color: #F48D37;
}

.c-phone-in i {
    position: absolute;
    top: 24%;
    right: 4px;
    font-size: 20px;
    color: #999;
    cursor: pointer;
}

/* 粉丝关注页面 */
.fans-list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.fans-item{
    width: 49%;
    margin-right: 2%;
    margin-bottom: 50px;
}

.fans-item:nth-child(2n){
    margin-right: 0;
}

.fans-item-left{
    width: 93px;
    height: 93px;
}

.fans-item-left img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid #373a38;
}

.fans-item-right .focus-btn{
    width: 90px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: 1px solid #F98F1D;
    color: #F98F1D;
    border-radius: 30px;
    cursor: pointer;
    margin-top: 15px;
}

.fans-item-right .focus-btn-ed{
    width: 90px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: 1px solid #9d9d9d;
    color: #9d9d9d;
    border-radius: 30px;
    cursor: pointer;
    margin-top: 15px;
}

/* 电台 */
.diantai-nav{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.diantai-nav>li{
    margin-right: 30px;
}

.diantai-nav>li a{
    color: #D2D2D2;
}

.diantai-nav a:last-child{
    margin-right: 0;
}

.diantai-nav .active{
    color: #F48D37;
}


.diantai-list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.diantai-item{
    position: relative;
    width: 18.4%;
    margin-right: 2%;
    margin-bottom: 30px;
}

.diantai-item:nth-child(5n){
    margin-right: 0;
}

.diantai-item:hover .avatar{
    transform: rotate(360deg);
    transition: all 5000ms linear;
}



.diantai-item .avatar{
    position: absolute;
    top: -67px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    transition: all 5000ms linear;
}

.diantai-item a{
    display: block;
}

.diantai-item a span{
    color: #9B9898;
    margin-top: 10px;
}

.diantai-item a span i{
    font-size: 16px;
}

/* 电台详情 */
.diantai-show-left{
    margin: auto;
    width: 28%;
    text-align: center;
}

.diantai-show-right{
    width: 67%;
}

.diantai-show-dt{
    position: relative;
}

.diantai-show-dt .avatar{
    position: absolute;
    top: 5px;
    right: 0px;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 123px;
    height: 123px;
    border-radius: 50%;
    object-fit: cover;
}

.diantai-show-handle{
    z-index: 99;
    position: absolute;
    top: -257px;
    right: 241px;
    bottom: 0;
    left: 0;
    margin: auto;
    cursor: pointer;
}


.diantai-show{
    margin: 2% auto auto auto;
    width: 1380px;
}


.ani_rate{
    -webkit-animation: play 10s linear infinite;
    -moz-animation: play 10s linear infinite;
     animation: play 10s linear infinite;
}
@-webkit-keyframes play{
    0%{-webkit-transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
@-moz-keyframes play {
    0%{-moz-transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
@keyframes play{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

.diantai-show-title{
    width: 90%;
    margin: 0 auto;
    line-height: 40px;
}

/* 音乐详情 */
.music-detail-btn-play:hover{
    color: #ffffff;
}

.music-detail-left{
    width: 76%;
}

.music-detail-right{
    width: 22.5%;
}

.music-detail-right-userInfo .avatar{
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.music-detail-right-userInfo .fouces-btn{
    display: block;
    width: 175px;
    height: 34px;
    border: 1px solid #f98f1d;
    border-radius: 18px;
    text-align: center;
    line-height: 34px;
    margin: 20px auto auto auto;
    color: #f98f1d;
}

.music-detail-right-tuijian span{
    display: inline-block;
    width: 86%;
    margin-left: 2px;
    color: #D2D2D2;
}

.music-detail-right-tuijian .c-tuijian-item{
    width: 100%;
    margin-bottom: 20px;
}

.music-detail-right-tuijian .c-tuijian-item:last-child{
    margin-bottom: 0;
}

.c-tuijian-item-left{
    position: relative;
    width:50px;
    height: 50px;
    border-radius: 6px;
    overflow: hidden;
    display: inline-block;
}

.c-tuijian-item-left .fengmian{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-tuijian-item-left .c-bf{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 25px;
    height: 25px;
}

.c-tuijian-item-right{
    width: 70%;
    margin-left: 10px;
}

.c-tuijian-item-right .c-tag-wrap a{
    margin-right: 5px;
}

.c-tuijian-item-right .c-tag-wrap a:last-child{
    margin-right: 0;
}

.music_ani_rate{
    -webkit-animation: play 10s linear infinite;
    -moz-animation: play 10s linear infinite;
     animation: play 10s linear infinite;
}
@-webkit-keyframes play{
    0%{-webkit-transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
@-moz-keyframes play {
    0%{-moz-transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
@keyframes play{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}


.music-show-user{
    width: 80%;
    margin: 0 auto;
}

.music-show-user .touxiang{
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.music-show-zhuye img{
    margin-right: 10px;
}

.music-show-zhuye a{
    color: #DDDDDD;
}

.music-show-dt{
    position: relative;
}

.music-show-dt .avatar{
    position: absolute;
    top: 5px;
    right: 0px;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 123px;
    height: 123px;
    border-radius: 50%;
    object-fit: cover;
}

.music-show-handle{
    z-index: 99;
    position: absolute;
    top: -257px;
    right: 241px;
    bottom: 0;
    left: 0;
    margin: auto;
    cursor: pointer;
}

.music-show .download-btn{
    display: block;
    width: 228px;
    height: 52px;
    border: 1px solid #b5b0b0;
    border-radius: 27px;
    text-align: center;
    line-height: 52px;
    margin: 0 auto;
    color: #B5B1B1;
}

.music-detail-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 122px;
    height: 39px;
    background:transparent;
    color: #ffffff;
    margin-right: 20px;
    cursor: pointer;
    border: 1px solid #ffffff;
    border-radius: none;
}

.music-show-right .active{
    border: 1px solid #E6851E;
    color: #E6851E;
}

.music-detail-btn .isClick{
    display: none;
}

.music-detail-btn:hover{
    color: #ffffff;
}

.music-detail-btn  .notClick{
    display: block;
}

.music-show-right .active .isClick{
    display: block;
}

.music-show-right .active .notClick{
    display: none;
}

.music-detail-btn img{
    margin-right: 10px;
}

.music-show-right .active:hover{
    color: #E6851E;
}

.music-show-left{
    width: 28%;
}
.music-show-right{
    width: 66%;
}

.music-show-right .paly-list-item{
    border-width: 1px!important;
}

.music-middle{
    width: 1678px;
    margin: 0 auto;
}


@media screen and (max-width: 2400px) {
    .music-middle{
        width: 1578px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 2280px) {
    .music-middle{
        width: 1578px;
        margin: 0 auto;
    }
}


@media screen and (max-width: 1980px) {
    .music-middle{
        width: 1600px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 1680px) {
    .music-middle{
        width: 1400px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 1280px) {
    .music-middle{
        width: 1200px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 1200px) {
    .music-middle{
        width: 1000px;
        margin: 0 auto;
    }
}




/* 视频详情页 */
.video-show-left{
    width:calc(100% - 400px);
}

.video-show-item-right{
    width: calc(100% - 127px)
}

.video-show-left a{
    color: #BDBCBC;
}

.video-show-right{
    width: 380px;
    background-color: #202021;
}

.video-show-user img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #373937;
}

.video-show-user p{
    color: #E1E1E1;
}

.video-show-user button{
    width: 80px;
    height: 30px;
    background: #f48d37;
    border: 1px solid #f98f1d;
    border-radius: 3px;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
}


.video-show-item{
    position: relative;
    justify-content: space-between;
    margin-bottom: 3.5%;
}

.video-show-item .fengmian-wrap{
    position: relative;
    width: 112px;
    height: 62px;
    overflow: hidden;
    border-radius: 6px;
}

.video-show-item .fengmian-wrap span{
    position: absolute;
    right: 5px;
    bottom: 5px;
    background-color: rgba(0, 0, 0, .5);
    color: #ffffff;
    border-radius: 3px;
    white-space: nowrap;
    padding: 2px 8px;
    font-size: 12px;
    box-sizing: border-box;
}

.video-show-item:hover .fengmian{
    transform: scale(1.05);
    transition: all 250;
    object-fit: cover;
}

.video-show-item .fengmian{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 250;
}

.video-show-item .bf-tag{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.video-middle{
    width: 1480px;
    margin: 0 auto;
}

.last-video{
    display: none;
    z-index: 1000;
    position: absolute;
    left: 20px;
    top: 45%;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .2);
}

.last-video i,.next-video i{
    font-size: 40px;
    color: #ffffff;
    margin-top: 5px;
}

.next-video{
    display: none;
    z-index: 1000;
    position: absolute;
    right: 20px;
    top: 45%;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .2);
}

#videoBox:hover .next-video,
#videoBox:hover .last-video{
    display: block;
}


/* 视频详情页win 下载弹窗 */
.video-win-cover{
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
}

.video-win-download{
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 400px;
    height: 450px;
    border-radius: 30px;
    background: linear-gradient(133.7deg, rgba(255,216,159,1) 1.47%,rgba(252,155,158,1) 95.02%);
}

.video-win-download .video-win-img1{
    position: absolute;
    right: -42px;
    top: -44px;
    width: 188px;
}

.video-win-download .ljty-btn{
    display: block;
    width: 230px;
    height: 39px;
    line-height: 39px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(254,220,101,1) 0%,rgba(254,182,64,1) 100%);
    color: rgba(133, 63, 20, 1);
    font-size: 16px;
    text-align: center;
    margin: 10px auto;
    cursor: pointer;
}

/* @media screen and (max-width: 2400px) {
    .video-middle{
        width: 2100px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 2280px) {
    .video-middle{
        width: 2000px;
        margin: 0 auto;
    }
}


@media screen and (max-width: 1980px) {
    .video-middle{
        width: 1600px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 1680px) {
    .video-middle{
        width: 1400px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 1280px) {
    .video-middle{
        width: 1200px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 1200px) {
    .video-middle{
        width: 1000px;
        margin: 0 auto;
    }
} */

/* 上传进度条 */
.process-class{
    width: 80%;
    margin: 40px auto auto auto;
    height: 10px;
    background-color: #171719;
    border-radius: 30px;
    overflow: hidden;
}

.progress-bar{
    background-color: #F98F1D;
    width: 0%;
    height: 10px;
}

.user-topic-buzhou{
    width: 22px;
    height:22px;
    border-radius: 50%;
    border: 1px dashed #fff;
    display: inline-block;
    text-align: center;
    line-height: 22px;
    margin-right: 10px;
}

.gedanfengmian{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background-color: #202023;
}

.gedanfengmian img{
    object-fit: cover;
}

/* 下载弹窗 */
.xiazai-windown-name{
    width: 80%;
    margin: 0 auto;
    color:#FE9844;
    font-size: 18px;
}

.xiazai-windown-money{
    color: #3A3A3A;
    font-size: 16px;
}

.xiazai-windown .xiazai-windown-btn{
    position: relative;
    width: 168px;
    height: 40px;
    border-radius: 30px;
}


.c-download-hot::before{
    position: absolute;
    right: -10px;
    top: -10px;
    content: '';
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url('../images/download/hot.png');
    background-size: cover;
    animation: hotImg 2s ease infinite;;
}

@keyframes hotImg {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
      transform: translateX(0);
    }
}



/* .xiazai-windown .xiazai-windown-btn:nth-child(2n){
    background-color: #ffffff;
    color: #E6851E;
    border: 1px solid #E6851E;
} */

.xiazai-windown .layui-btn{
    margin-left: 0;
}

.xiazai_windown_cover{
    z-index: 100;
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
}

.xiazai-windown{
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 430px;
    height: 425px;
    display: none;
    transform: scale(0);
    border-radius: 10px;
    transition: all 250;
    background: linear-gradient(179.54deg, #ffe2c2,rgba(255,255,255,1));
}


.xiazai-windown-active{

    transform: scale(1);
    transition: all 250;
}

.xiazai-windown-close{
    position: absolute;
    top: -30px;
    right: -30px;
    cursor: pointer;
}

/* 专题 */
.zhuanti-bg{
    background-color: #262729;
}

.zhuanti-filter{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.zhuanti-filter a{
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    margin-right: 30px;
    margin-bottom: 20px;
}

.zhuanti-filter .active-a{
    color: #F48D37;
}

.zhuanti-filter a:last-child{
    margin-right: 0;
}

.zhuanti-wrap{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.zhuanti-wrap a{
    padding: 5px 10px;
    border-radius: 30px;
    background-color: #3D3D3D;
    color: #A09F9F;
    margin: 0 20px 20px 0;
}

.zhuanti-detail-left{
    width: 77%;
}

.zhuanti-detail-right{
    width: 21.5%;
}

.zhuanti-detail-top{
    background-color: #262729;
}

.zhuanti-detail-top img{
    width: 155px;
    height: 146px;
    border-radius: 10px;
    object-fit: cover;
}

.zhuanti-detail-bot{
    background-color: #262729;
}

.zhuanti-detail-tab a{
    display: inline-block;
    width: 82px;
    height: 36px;
    background: #f48d37;
    border-radius: 18px;
    text-align: center;
    color: #FFFFFF;
    line-height: 36px;
    margin-right: 30px;
}

.zhuanti-detail-left table th{
    color: #CDCDCD;
}

.zhuanti-detail-bot .my-fav-item{
    width: 32%;
}

.zhuanti-detail-bot .my-fav-item:nth-child(4n){
    margin-right: 2%;
}

.zhuanti-detail-bot .my-fav-item:nth-child(3n){
    margin-right: 0%;
}

.zhuanti-detail-right-video{
    width: 100%;
}

.zhuanti-detail-right-video a{
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.zhuanti-detail-right-video .fengmian{
    width: 80px;
    height: 59px;
    margin-right: 10px;
}

.zhuanti-detail-right-video-info{
    width: 80%;
}

.zhuanti-detail-right-video-info p{
    height: 28px;
    color: #D2D2D2;
    font-size: 14px;
    line-height: 1;
}

.zhuanti-detail-right-video .tag-img{
    position: absolute;
    left: 30px;
    top: 25px;
}

.zhuanti-detail-right-music a{
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
}

.zhuanti-detail-right-music .fengmian{
    position: relative;
    width: 45px;
    height: 45px;
    border-radius: 10px;
    overflow: hidden;
}

.zhuanti-detail-right-music .fengmian .avatar{
    width: 100%;
    height: 100%;
}

.zhuanti-detail-right-music .fengmian .tag-img{
    position: absolute;
    width: 20px;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

.zhuanti-detail-right-music p{
    width: 74%;
    margin-left: 10px;
    color: #ffffff;
}

.zhuanti-detail-right-gedan{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.zhuanti-detail-right-gedan a{
    display: inline-block;
    width: 46%;
    margin-right: 8%;
    margin-bottom: 15px;
}

.zhuanti-detail-right-gedan a:nth-child(2n){
    margin-right: 0;
}


.zhuanti-detail-right-gedan p{
    color: #D2D2D2;
}

.zhuanti-detail-right-gedan img{
    width: 100%;
    height: 89px;
    border-radius: 10px;
    object-fit: cover;
}

/* 类型页面的歌曲排行 */

.leixing-music-item{
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 20px;
    box-sizing: border-box;
}

.leixing-music-item .avatar{
    width: 50px;
    height: 50px;
    border-radius: 5px;
    margin-right: 10px;
    overflow: hidden;
}

.leixing-music-item .paly-tag{
    transition: all 250ms;
}

.leixing-music-item:hover .paly-tag{
    transition: all 250ms;
    transform: scale(1.2);
}


.leixing-music-item{
    color: #ffffff;
}

.leixing-music-item a{
    color: #ffffff;
}

.leixing-music-item:last-child{
    border: none;
}

.leixing-music-item-more a {
    display: inline-block;
    color: #f98f1d;
    min-width: 160px;
    background: #2c2c2f;
    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
    height: 34px;
    line-height: 34px;
    font-size: 15px;
    border-radius: 2em;
    padding: 0 25px;
    text-align: center;
    margin: 0 auto;
}

.topic-type{
    position: relative;
    margin-left: 25px;
}

.topic-type-btn{
    width: 118px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    border-radius: 30px;
    border: 1px solid #F98F1D;
    color: #F98F1D;
    justify-content: center;
    cursor: pointer;
}

.topic-reload-btn{
    display: block;
    width: 82px;
    height: 29px;
    text-align: center;
    line-height: 29px;
    color: #ffffff;
    background: #e6851e;
    border: 1px solid #f98f1d;
}

.topic-reload-btn:hover{
    color: #ffffff;
}

.topic-list{
    z-index: 10;
    position: absolute;
    display: none;
    top: 50px;
    left: 0px;
    border: 1px solid #E6851E;
    background-color: #262729;
    border-radius: 6px;
    width: 782px;
}

.topic-list-left{
    position: relative;
    width: 75px;
    color: #ffffff;
    margin-right: 8px;
    display: flex;
    align-items: center;
}

.topic-list-left span{
    margin-left: 10px;
}

.topic-list-left::after{
    position: absolute;
    content: '';
    width: 2px;
    height: 17px;
    background-color: #FFFFFF;
    right: 6px;
    top: 2px;
}

.topic-list-right a{
    display: inline-block;
    margin-right: 10px;
    color: #d2d2d2;
    word-break: keep-all;
}

.topic-list-right .active{
    color: #F98F1D;

}

.topic-list-right a:hover{
    color: #F98F1D;
}

.topic-list-right{
    width: 87%;
}

.topic-list-item{
    margin-bottom: 20px;
}

.topic-list-item:last-child{
    margin-bottom: 0;
}

.fbStyle {
    display: inline-block;
}

.txtblack {
    line-height: 30px;
}

.video-right-listHeight{
    max-height: 44vh;
    overflow-y: auto;
}

.video-right-listHeight::-webkit-scrollbar{
    width: 7px;
}

.video-right-listHeight::-webkit-scrollbar-track{
    background-color: #101010;
    border-radius:5px;
}


.video-right-listHeight::-webkit-scrollbar-thumb{
    background-color: #ffffff;
    border-radius: 5px;
}


.bfqb-btn-index{
    background-color: #F98F1D;
    border: none;
    color: #FFFFFF;
    width: 122px;
    height: 39px;
    border-radius: 30px;
}

.bfqb-btn-hover:hover{
    background-color: #d9760c;
}

.layui-table th,
.layui-table tr,
.layui-table td{
    color: #d2d2d2;
}

.layui-table{
    background-color: #262729!important;
}

.music-tag:hover{
    text-decoration: underline;
}

.djDetail-right .my-fav-item:nth-child(4n){
    margin-right: 2%;
}

.djDetail-right .my-fav-item{
    margin-right: 2%;
}

.djDetail-right .my-fav-item:nth-child(3n){
    margin-right: 0%;
}

.djDetail-right .my-fav-item{
   width: 32%;
}

/* 音乐标签s */
.types-list{
    column-count:5;
    column-gap:20px; 
}

.types-list-item{
    display: inline-block;
    padding: 10px;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 5px;
    margin-bottom: 20px;
    break-inside: avoid;  
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.types-list-item h3{
    margin-top: 8px;
    font-size: 16px;
    color: #101010;
    font-weight: 600;
    border-bottom: 1px solid #cecfd1;
    padding-bottom: 10px;
    box-sizing: border-box;
}

.types-list-item p{
    height: 38px;
}

.types-list-item img{
    width: 100%;
    object-fit: cover;
}

.types-source1{
    position: relative;
}


.types-source1::after{
    position: absolute;
    display: flex;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    content: '音乐舞曲';
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    line-height: 100%;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 250ms;
}

.types-list-item:hover .types-source1::after{
    opacity: 1;
    transition: all 250ms;
}

.types-source2{
    position: relative;
}


.types-source2::after{
    position: absolute;
    display: flex;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    content: 'DJ视频';
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    line-height: 100%;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 250ms;
}

.types-list-item:hover .types-source2::after{
    opacity: 1;
    transition: all 250ms;
}

/* 用户面板 */
.normal-user{
    display: inline-block;
    width: 62px;
    height: 22px;
    background: #b28850;
    border-radius: 11px;
    font-size: 12px;
    text-align: center;
    line-height: 22px;
    color: #FFFFFF;
}

.musicer-user{
    display: inline-block;
    width: 49px;
    height: 22px;
    background: #df5766;
    border-radius: 11px;
    font-size: 12px;
    text-align: center;
    line-height: 22px;
    color: #FFFFFF;
}

.bind-info-item{
    position: relative;
}

.bind-info-item a{
    color: #ffad14;
    position: absolute;
    bottom: -4px;
    left: 20px;
}

.torecharge-btn{
    display: inline-block;
    width: 92px;
    height: 31px;
    background: #ba3838;
    border-radius: 3px;
    text-align: center;
    line-height: 31px;
    font-size: 12px;
    color: #ffffff;
}

.totixian-btn{
    display: inline-block;
    width: 92px;
    height: 31px;
    background: #dbb13f;
    border-radius: 3px;
    text-align: center;
    line-height: 31px;
    font-size: 12px;
    color: #ffffff;
}

.musicer-tongji-item{
    width: 23.5%;
    margin-right: 2%;
    padding: 15px;
    box-sizing: border-box;
    color: #ECECEC;
    margin-bottom: 20px;
}

.musicer-tongji-item:nth-child(4n){
    margin-right: 0;
}

.jianbian-1{
    background: linear-gradient(#4261db 0%, #30aafc 100%);
}

.jianbian-2{
    background: linear-gradient(83deg,#fc7583 6%, #fb354a 100%);
}

.jianbian-3{
    background: linear-gradient(83deg,#fa92ed 6%, #f93cdf 100%);
}

.jianbian-4{
    background: linear-gradient(83deg,#e1c383 6%, #f9bd3c 100%);
}

.jianbian-5{
    background: linear-gradient(#8e42db 0%, #3048fc 100%);
}

.jianbian-6{
    background: linear-gradient(83deg,#eddb3f 6%, #2f7d22 100%);
}

.jianbian-7{
    background: linear-gradient(83deg,#92bcfa 6%, #23bfcd 100%);
}

.jianbian-8{
    background: linear-gradient(83deg,#924df1 6%, #f9713c 100%);
}

.musicer-tongji-item font{
    position: absolute;
    right: -11px;
    top: -7px;
    color: #FEA73D;
    font-size: 12px;
}

/* 个人中心数据统计 */
.tongji-1-wrap{
    display: flex;
    align-items: center;
}

.tongji-1-item{
    width: 33%;
    margin-right: 2%;
    color: #ffffff;
    border-radius: 6px;
}

.tongji-1-item:nth-child(3n){
    margin-right: 0;
}

.jianbian1{
    background: linear-gradient(83deg,#8e45d7 6%, #bb84f2 100%);
}

.jianbian2{
    background: linear-gradient(83deg,#444ed0 6%, #6493df 100%);
}

.jianbian3{
    background: linear-gradient(83deg,#fe8b7b 6%, #fdae83 100%);
}

.jianbian4{
    background: linear-gradient(83deg,#5fb54e 6%, #80c04b 100%);
}

.jianbian5{
    background: linear-gradient(83deg,#eb3673 6%, #ef588c 100%);
}

.jianbian6{
    background: linear-gradient(83deg,#0b93e4 6%, #05a4f0 100%);
}

.tongji-bf-wrap{
    width: 100%;
    margin-top: 20px;
}

.tongji-bf-item{
    width: 49%;
    margin-right: 2%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #222225;
}

.tongji-bf-wrap:nth-child(2n){
    margin-right: 0;
}

.tongji-bf-item p{
    font-size: 15px;
    font-weight: 600;
}

.tongji-bf-item ul{
    margin-top: 20px;
}

.tongji-bf-item ul>li{
    margin-bottom: 20px;
}

/* 加入歌单 */
.c-addGedan-wrap{
    position: relative;
}

.c-addGedan{
    display: none;
    z-index: 99;
    position: absolute;
    width: 249px;
    min-height: 155px;
    border-radius: 5px;
    background-color: #ffffff;
    top: 28px;
    right: 0;
}

.c-addGedan ul{
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
}

.c-addGedan ul>li{
    width: 100%;
    padding:0 10px;
    box-sizing: border-box;
}

.c-addGedan ul>li{
    display: flex;
    align-items: center;
    color: #101010;
    margin-bottom: 10px;
    cursor: pointer;
}

.c-addGedan .addGedan-num{
    display: inline-block;
    width: 35px;
    height: 22px;
    font-size: 12px;
    text-align: center;
    line-height: 22px;
    border-radius: 10px;
    background-color: #f3f3f3;
    margin-right: 10px;
}

.c-addGedan ul>li:first-child{
    color: #ff0000;
}

.c-addGedan ul>li:nth-child(2){
    color: #101010;
}

.c-addGedan ul>li:nth-child(3){
    color: #1ac380;
}

.c-addGedan ul>li:nth-child(4){
    color: #007acc;
}

.c-addGedan ul>li:nth-child(5){
    color: #ff00fe;
}

.c-addGedan ul>li:nth-child(6){
    color: #ffff00;
}

.c-addGedan ul>li:nth-child(7){
    color: #99fe00;
}

.c-addGedan ul>li:nth-child(8){
    color: #9966ff;
}

.c-addGedan ul>li:nth-child(9){
    color: #ff0066;
}

.c-addGedan ul>li:nth-child(10){
    color: #6734ff;
}

.c-addGedan ul>li:last-child{
    margin-bottom: 0;
}

.c-addGedan ul>li i{
    font-size: 18px;
    margin-right: 5px;
}

.c-addGedan ul>li:hover{
    color: #F48D37;
    background-color: #f3f3f3;
}

.c-addGedan ul>li:hover .c-addGedan .addGedan-num{
    background-color: #ffffff;
}

.c-addGedan::after{
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    border-bottom: 10px solid #ffffff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    top: -9px;
    right: 4px;
}

/* 添加到usb音乐包 */

.c-addPack-wrap{
    position: relative;
}

.c-addPack{
    display: none;
    z-index: 99;
    position: absolute;
    width: 249px;
    min-height: 155px;
    border-radius: 5px;
    background-color: #ffffff;
    top: 28px;
    right: 0;
}

.c-addPack ul{
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
}

.c-addPack ul>li{
    width: 100%;
    padding:0 10px;
    box-sizing: border-box;
}

.c-addPack ul>li{
    display: flex;
    align-items: center;
    color: #101010;
    margin-bottom: 10px;
    cursor: pointer;
}

.c-addPack .addPack-num{
    display: inline-block;
    width: 35px;
    height: 22px;
    font-size: 12px;
    text-align: center;
    line-height: 22px;
    border-radius: 10px;
    background-color: #f3f3f3;
    margin-right: 10px;
}

.c-addPack ul>li:first-child{
    color: #ff0000;
}

.c-addPack ul>li:nth-child(2){
    color: #101010;
}

.c-addPack ul>li:nth-child(3){
    color: #1ac380;
}

.c-addPack ul>li:nth-child(4){
    color: #007acc;
}

.c-addPack ul>li:nth-child(5){
    color: #ff00fe;
}

.c-addPack ul>li:nth-child(6){
    color: #ffff00;
}

.c-addPack ul>li:nth-child(7){
    color: #99fe00;
}

.c-addPack ul>li:nth-child(8){
    color: #9966ff;
}

.c-addPack ul>li:nth-child(9){
    color: #ff0066;
}

.c-addPack ul>li:nth-child(10){
    color: #6734ff;
}

.c-addPack ul>li:last-child{
    margin-bottom: 0;
}

.c-addPack ul>li i{
    font-size: 18px;
    margin-right: 5px;
}

.c-addPack ul>li:hover{
    color: #F48D37;
    background-color: #f3f3f3;
}

.c-addPack ul>li:hover .c-addPack .addPack-num{
    background-color: #ffffff;
}

.c-addPack::after{
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    border-bottom: 10px solid #ffffff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    top: -9px;
    right: 4px;
}


.c-addPack ul>li span{
    display: inline-block;
    max-width: 155px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.index-about-tab a{
    margin: 0;
}

.index-about-tab span{
    display: inline-block;
    width: 3px;
    height: 3px;
    background-color: #D2D2D2;
    border-radius: 50%;
    margin: 0 10px;
}

.about-tab a{
    font-size: 16px;
    margin-right: 30px;
    color: #D2D2D2;
}

.about-tab  .active{
    color: #F48D37;
}


.share-option {
    margin: 0 20px;
    cursor: pointer;
}

.header-download-list{
    display: none;
    z-index: 99;
    position: absolute;
    top: 18;
    left: 0;
    background-color: #222225;
}

.header-download:hover .header-download-list{
    display: block;
}

.header-download-list-item{
    width: 132px;
    height: 45px;
    padding: 0 10px;
    line-height: 45px;
    box-sizing: border-box;
}

.header-download-list-hover{
    position: absolute;
    display: none;
    padding: 0 20px;
    box-sizing: border-box;
    height: 180px;
    width: 157px;
    top: 0;
    right: -155px;
    background-color: #222225;
}

.header-download-list-item:hover .header-download-list-hover{
    display: block;
}

.header-download-list-item:hover{
    background-color: #2c2b2c;
}

.header-download-list-hover img{
    width: 120px;
}

/* 网址导航 */
.wzdh-left{
    position: sticky;
    top: 70px;
    width: 198px;
    background-color: #262729;
    padding: 20px;
    box-sizing: border-box;
}

.wzdh-left a{
    font-size: 14px;
    margin-top: 20px;
    color: #D2D2D2;
}

.wzdh-right{
    width: 982px;
    background-color: #262729;
    padding: 20px;
    box-sizing: border-box;
}

.wzdh-right h2{
    font-size: 16px;
    font-weight: 600;
}

.wzdh-item-content{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.wzdh-item-content a{
	display: flex;
	width: 32%;
	margin-bottom: 2%;
	margin-right: 2%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #202021;
    color: #9D9D9D;
    height: 90px;
}

.wzdh-item-content a:nth-child(3n){
	margin-right: 0;
}

.wzdh-item-content a img{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 10px;
	border: 3px solid #f5f5f5;
	box-sizing: border-box;
}

.wzdh-item-content a p:nth-child(2){
	line-height: 20px;
}

.wzdh-left img{
    width: 20px;
    margin-right: 10px;
}


.wzdh-left .active{
    color: #F48D37;
}

/* 歌词列表 */
.geci-left{
    width: 858px;
    background-color: #262729;
}

.geci-left a{
    color: #D2D2D2;
}

.geci-right{
    width: 322px;
}

.geci-hot{
    width: 100%;
    background-color: #262729;
}

.geci-hot-list{
    width: 100%;
    padding: 0 20px 20px 20px;
    box-sizing: border-box;
}

.geci-hot-item {
    margin-bottom: 20px;
}

.geci-hot-item:last-child{
    margin-bottom: 0;
}

.geci-hot-item .c-num{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    color: #D2D2D2;
    background-color: #565656;
    margin-right: 10px;
    font-size: 12px;
}

.geci-hot-item:first-child .c-num{
    color: #ffffff;
    background-color: #F48D37;
}

.geci-hot-item:nth-child(2) .c-num{
    color: #ffffff;
    background-color: #F48D37;
}

.geci-hot-item:nth-child(3) .c-num{
    color: #ffffff;
    background-color: #F48D37;
}

.geci-title{
    display: inline-block;
    width: 67%;
    color: #D2D2D2;
}

.geci-zuozhe{
    display: inline-block;
    width: 23%;
    text-align: right;
    color: #D2D2D2;
}

.geci-geshou{
    background-color: #262729;
}

.geci-geshou-list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 20px;
    box-sizing: border-box;
}

.geci-geshou-item{
    display: block;
    width: 30%;
    margin-right: 4%;
    margin-bottom: 20px;
}

.geci-geshou-item:nth-child(3n){
    margin-right: 0;
}


.geci-geshou-item img{
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto;
}

.geci-geshou-item p{
    text-align: center;
    color: #D2D2D2;
    margin-top: 10px;
    text-align: center;
}

.geci-geshou-item:hover img{
    box-shadow: 1px 13px 9px -5px rgba(77, 77, 77, 0.59);
}

.geci-geshou-item:hover img{
    transform: scale(1.05);
    transition: all 250;
}

.geci-lrc-download{
    padding: 10px 15px;
    border-radius: 30px;
    background-color: #313131;
    color: #fff;
}

.geci-detail-left{
    width: 390px;
    background-color: #202021;
}


.geci-detail-right{
    width: 390px;
    background-color: #202021;
}

.geci-detail-left h2{
    font-size: 16px;
    color: #fe7526;
    text-align: center;
}

.geci-detail-right h2{
    font-size: 16px;
    color: #fe7526;
    text-align: center;
}

/* 歌手 */

.singer-filter{
    background-color: #262729;
}

.singer-filter-item {
    margin-top: 15px;
}

.singer-filter-item:first-child{
    margin-top: 0;
}

.singer-filter-item a{
    margin-left: 10px;
    display: inline-block;
    padding: 2px 10px;
    color: #d2d2d2;
}

.singer-filter-item .active{
    background-color: #F48D37;
    color: #ffffff;
    border-radius: 30px;
}

.geshou-list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.geshou-list a{
    display: inline-block;
    width: 16.8%;
    margin-right: 4%;
    text-align: center;
    margin-bottom: 4%;
}

.geshou-list a:nth-child(5n){
    margin-right: 0;
}

.geshou-list a img{
    width: 108px;
    height: 108px;
    border-radius: 50%;
    object-fit: cover;
}

.geshou-list a p{
    text-align: center;
    margin-top: 10px;
    color: #D2D2D2;
    font-weight: 600;
}

.zuixin-zixun{
    background-color: #262729;
}

.zuixin-zixin-list{
    padding: 0 20px 20px 20px;
    box-sizing: border-box;
}

.zuixin-zixin-item{
    margin-bottom: 20px;
}

.zuixin-zixin-item:last-child{
    margin-bottom: 0;
}

.zuixin-zixin-item img{
    width: 100px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
}

.zuixin-zixin-item-right{
    width: calc(100% - 115px);
}

.zuixin-zixin-item-right p{
    color: #d2d2d2;
    height: 38px;
}

.zuixin-zixin-item-right span{
    color: #9D9D9D;
    font-size: 13px;
}

.singerDetail-top{
    background-color: #262729;
}

.singerDetail-top img{
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
}

.singerDetail-top-right{
    width: calc(100% - 145px);
}

.singerDetail-item{
    background-color: #262729;
}

.singerDetail-item h3{
    border-left: 6px solid #F48D37;
    padding-left: 10px;
}

/* 星闻 */
.yirenxingwen-item-left{
    display: inline-block;
    width: 170px;
    height: 116px;
    margin-right: 15px;
}

.yirenxingwen-item-left img{
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
}

.yirenxingwen-item-right{
    width: 78%;
}

.yirenxingwen-item-right a{
    color: #d2d2d2;
}

/* 微信分享 */
#share-qrcode{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 280px;
    background-color: rgba(0, 0, 0, .5);
}

#share-qrcode canvas{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border: 2px solid #ffffff;
}

.share-qrcode-close{
    z-index: 99;
    position: absolute;
    right: 128px;
    top: 16px;
    color: #FFFFFF;
}

.news-list-tab{
    display: flex;
    align-items: center;
}

.news-list-tab a{
    color: #d2d2d2;
    margin-right: 30px;
}

.news-list-tab .active{
    color: #F48D37;
}

.news-list-tab a:hover{
    color: #F48D37;
}



/* 用户中心签到样式 */

.user-qd-content{
    margin-left: 30px;
    width: calc(100% - 199px);
}

.user-qd-content ul{
    width: 100%;
}

.user-qd-content ul>li{
    width: 80px;
    height: 100px;
    border-radius: 6px;
    background-color: #383838;
    padding: 10px;
    box-sizing: border-box;
    margin-right: 30px;
    cursor: pointer;
}

.user-qd-content ul>li:last-child{
    margin-right: 0;
}

.user-qd-content ul>li .end_qd{
    display: none;
}

.user-qd-content ul .active .end_qd{
    display: inline-block;
}

.user-qd-content ul .active .no_qd{
    display: none;
}

.user-qd-content ul .active {
    background-color: #F8AF00;
    color: #FFDC8F;
}

.qdgz-content{
    width: 385px;
    height: 420px;
    background-image: url('../images/userIndex/bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px;
    box-sizing: border-box;
}

/* dj 排行 */
.paihang-month a{
    display: inline-block;
    width: 65px;
    height: 34px;
    border-radius: 20px;
    text-align: center;
    line-height: 34px;
    color: #ffffff;
}

.paihang-month a:last-child{
    margin-right: 0;
}

.paihang-month .active{
    background-color: #F48D37;
}

.paihang-list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.paihang-item{
    width: 48.5%;
    margin-right: 2.5%;
    margin-bottom: 30px;
}

.paihang-item:nth-child(2n){
    margin-right: 0;
}

.paihang-avatar{
    position: relative;
    width: 210px;
    height: 210px;
}

.paihang-avatar .c-avatar{
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #3d3d3d;
    box-sizing: border-box;
}

.paihang-avatar .c-tag{
    position: absolute;
    right: 0px;
    top: -18px;
}

.paihang_img{
    -webkit-animation: bounce-down 1.6s linear infinite;
    animation: bounce-down 1.6s linear infinite;
}

@-webkit-keyframes bounce-down {
   25% {
        -webkit-transform: translateY(-4px);
   }
   50%, 100% {
        -webkit-transform: translateY(0);
   }
   75% {
        -webkit-transform: translateY(4px);
   }
}

@keyframes bounce-down {
    25% {
         transform: translateY(-4px);
    }
    50%, 100% {
         transform: translateY(0);
    }
    75% {
         transform: translateY(4px);
    }
}

.paihang-item-right{
    width: calc(100% - 180px);
}


.paihang-item-right a{
    display: inline-block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    border-radius: 30px;
    text-align: center;
    color: #F48D37;
    border: 1px solid #F48D37;
}

.zhdf-length{
    position: relative;
    display: inline-block;
    width: 186px;
    height: 12px;
    margin: 0 10px;
    background-color: #ffffff;
}

.zhdf-length::after{
    position: absolute;
    left:0;
    top: 0;
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    border: 5px solid #262729;
    border-bottom-color: transparent;
    border-right-color: transparent;
}

.zhdf-length .zhdf-cover{
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    height: 12px;
    background-color:#F48D37;
    border-top-left-radius: 10px;
}

.zhdf-length .zhdf-cover::after{
    position: absolute;
    left:0;
    top: 0;
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    border: 5px solid #ffffff;
    border-bottom-color: transparent;
    border-right-color: transparent;
}

/* USB U盘 */
.usb-list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.usb-list .usb-item{
    width: 18.4%;
    margin-right: 2%;
    margin-bottom: 2%;
}

.usb-list .usb-item:nth-child(5n){
    margin-right: 0;
}

.usb-list .usb-item .c-fengmian-wrap{
    position: relative;
    width: 100%;
    height: 220px;
    border-radius: 6px;
    overflow: hidden;
}

.usb-list .usb-item .c-fengmian-wrap .c-fengmian{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.usb-item-num{
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: #ffffff;
    padding: 5px 15px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 30px;
    font-size: 12px;
}

.usb-item-num img{
    margin-right: 2px;
    width: 15px;
}

.c-hover-cover{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .1);
    transition: all 250ms;
}

.c-hover-cover span{
    position: absolute;
    right: 10px;
    top: 10px;
    color: #ffffff;
    box-sizing: border-box;
    font-size: 12px;
}


.c-hover-cover .c-hover-cover-play{
    position: absolute;
    display: inline-block;
    width: 40px;
    height: 40px;
    top: 0;
    left: 0px;
    right: 0;
    bottom: 0;
    margin: auto;
}

.c-hover-cover .c-hover-cover-download{
    position: absolute;
    display: inline-block;
    width: 61px;
    height: 61px;
    top: 0;
    left: 77px;
    right: 0;
    bottom: 0;
    margin: auto;
}

.usb-list .usb-item:hover .c-hover-cover{
    opacity: 1;
    transition: all 250ms;
}

.usb-list .usb-item:hover .usb-item-num{
    opacity: 0;
    transition: all 250ms;
}

.usb-list .usb-item .usb-item-title{
    color: #ffffff;
}

.usb-btn{
    display: inline-block;
    width: 143px;
    height: 43px;
    line-height: 43px;
    border-radius: 30px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}

.plxz-btn{
    background-color: #F98F1D;
    color: #ffffff;
}

.plxz-btn:hover{
    color: #ffffff;
}

.usb-collect-btn{
    background-color: #313131;
}

.usb-share-btn{
    background-color: #313131;
}

.usb-left-tab a{
    color: #ffffff;
}

.usb-left-tab .c-active{
    color: #F48D37;
}

.usb-left{
    width: 72%;
}

.usb-right{
    width: 26.5%;
}

.usb-right-user .c-avatar{
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}

.usb-focus-btn{
    width: 160px;
    height: 30px;
    line-height: 30px;
    border-radius: 20px;
    border: 1px solid rgba(244, 141, 55, 1);
    color: rgba(244, 141, 55, 1);
    font-size: 14px;
    text-align: center;
    margin: 15px auto auto auto;
    cursor: pointer;
}

.usb-other-gd .c-fengmian{
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
}

.usb-other-gd-right{
    width: calc(100% - 70px);
}

.usb-other-gd .c-fengmian img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.usb-download-list{
    width: 100%;
}

.usb-download-list ul{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.usb-download-list ul>li{
    width: 32%;
    margin-top: 15px;
    margin-right: 1.5%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.usb-download-list ul>li:nth-child(3n){
    margin-right: 0;
}

.usb-download-list ul>li a{
    display: inline-block;
    width: 100%;
    color: #D2D2D2;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* U盘管理 */
.usb-manage-list-item{
    display: flex;
}

.usb-manage-list-item img{
    width: 50px;
    height: 50px;
    border-radius: 6px;
    object-fit: cover;
}

.usb-manage-list-item .c-fengmian{
    width: 50px;
    height: 50px;
    border-radius: 6px;
    margin-right: 10px;
}

.usb-manage-list-item-right{
    width: calc(100% - 70px);
}


.list-search-style{
    position: relative;
}

.list-search-style input{
    background-color: #3d3d3d;
    border: none;
    border-radius: 30px;
    padding-right: 40px;
    color: #888888;
}

.list-search-style button{
    position: absolute;
    right: 0;
    top:0;
    background-color: transparent;
    color: #757474;
    font-size: 20px;
}


/* 音乐详情U音乐 */
.c-music-show-usbList{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 80%;
}

.c-music-show-usbItem{
    position: relative;
    display: inline-block;
    width: 30%;
    margin-right: 3%;
    margin-bottom: 20px;
}

.c-music-show-usbItem:nth-child(3n){
    margin-right: 0%;
}

.c-music-show-usbItem .c-fengmian{
    position: relative;
    width: 100%;
    height: 220px;
    border-radius: 6px;
    overflow: hidden;
}

.c-music-show-usbItem .c-fengmian img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-music-show-usbItem .c-fengmian span{
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 15px;
    padding: 5px 15px;
    color: #ffffff;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 30px;
    font-size: 12px;
}


/* 建议反馈 */
.su-item{
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid #101010;
}

.su-item-left{
    width: 80%;
}

.su-item-btn{
    position: absolute;
    right: 0;
    top: 20px;
    width: 88px;
    height: 34px;
    border-radius: 20px;
    background-color: rgba(244, 141, 55, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
    line-height: 34px;
    cursor: pointer;
}

/* 歌手最新舞曲列表 */

.artcle-zxwq-item{
    margin-bottom: 15px;
}

.artcle-zxwq-item:last-child{
    margin-bottom: 0;
}

.artcle-zxwq-item-left{
    position: relative;
    width: 56px;
    height: 56px;
    margin-right: 10px;
}

.artcle-zxwq-item .fengmian{
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
}

.artcle-zxwq-item .bf-icon{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
}

.artcle-zxwq-item-right{
    width: calc(100% - 66px);
}

.side-float-img{
    position: absolute;
    animation: floatAnimation 2s infinite ease-in-out; /* 调整动画时间和效果 */
}

@keyframes floatAnimation {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px); /* 调整图片向上浮动的距离 */
    }
    100% {
        transform: translateY(0);
    }
}

/* 音乐榜单 */
.download-ranking-item{
    display: block;
    width: 100%;
    margin: 0 auto;
    background-image: url('../images/common/bg2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    text-align: center;
    height: 38px;
    line-height: 38px;
    color: #ffffff;
    font-size: 15px;
    margin-bottom: 15px;
}

.download-ranking-left .active{
    background-image: url('../images/common/bg1.png');
}

.download-ranking-item:hover{
    color: #ffffff;
}


/* 发现音乐 */
.discover-type{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.discover-type-item{
    position: relative;
    display: inline-block;
    width: 172px;
    height: 145px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.discover-type-item:nth-child(5n){
    margin-right: 0;
}

.discover-type-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.discover-type-item-cover{
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    background-color: rgba(0, 0, 0, .25);
    text-align: center;
    line-height: 145px;
    font-size: 20px;
    color: #ffffff;
}

.discover-item-content{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.discover-item-content a{
    display: inline-block;
    padding: 6px 20px;
    border-radius: 30px;
    background-color: #2e2f31;
    margin-bottom: 20px;
    margin-right: 20px;
    color: #9C9D9F;
}

.discover-item-content a:hover{
    background-color: #fe7526;
    color: #ffffff;
}


/* 分割线 */
.other-share-bounce-up{
    position: relative;
}

.other-share-bounce-up span{
    cursor: pointer;
    display: inline-block;
    position: absolute;
    right: -83px;
    top: 0px;
    font-size: 12px;
    background-image: linear-gradient(to right, #d93680 , #9575f3);
    white-space: nowrap;
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 5px;
    opacity: 1;
    transition: all 100ms;
}


.other-share-bounce-up span::before{
    position: absolute;
    content: '';
    display: block;
    left: -7px;
    top: 0px;
    width: 0;
    height: 0;
    border-top: 11px solid transparent;
    border-right: 15px solid #d93680;
    border-bottom: 4px solid transparent;
}

.other-share-bounce-up span {
    -webkit-animation: bounce-down 1.5s linear infinite;
    animation: bounce-up 1.5s linear infinite;
}

.qipao-setting {
    -webkit-animation: bounce-down 1.5s linear infinite;
    animation: bounce-up 1.5s linear infinite;
}

@-webkit-keyframes bounce-up {
    25% {
        -webkit-transform: translateY(2px);
    }

    50%,
    100% {
        -webkit-transform: translateY(0);
    }

    75% {
        -webkit-transform: translateY(-2px);
    }
}

@keyframes bounce-up {
    25% {
        transform: translateY(2px);
    }

    50%,
    100% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(-2px);
    }
}


/* 任务中心 */
.task-data{
    position: relative;
    width: 100%;
    height: 200px;
    background-image: url('../images/task/bg.png');
    background-repeat: no-repeat;
    z-index: 11;
}

.task-data-item{
    position: relative;
}

.task-data-item span{
    position: absolute;
    top: -20px;
    right: -30px;
    width: 57px;
    height: 25px;
    line-height: 25px;
    border-radius: 20px 20px 20px 4px;
    background-color: rgba(251, 64, 84, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 12px;
    text-align: center;
}

.user-qd-item{
    position: relative;
}

.user-qd-item .mtkl{
    position: absolute;
    top:-30px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 66px;
    height: 21px;
    line-height: 21px;
    border-radius: 20px;
    background-color: rgba(251, 64, 84, 1);
    font-size: 12px;
}

.user-qd-item .mtkl::after{
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    bottom: -8px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(251, 64, 84, 1);
    left: 0;
    right: 0;
    margin: auto;
}

.task-coin{
    z-index: -2;
    position: absolute;
    right: 60px;
    top: -27px;

}

.task-coin img{
    width: 150px;
}



.task-coin::after{
    z-index: 12;
    position: absolute;
    display: block;
    content: '';
    width: 138px;
    height: 53px;
    bottom: -1px;
    left: 0;
    background-color: #383838;
    border-bottom-left-radius: 81px;
    border-bottom-right-radius: 74px;
}

.a-jfmx{
    position: absolute;
    display: block;
    line-height: 35px;
    right: 137px;
    bottom: 50px;
    width: 90px;
    height: 35px;
    border-radius: 20px;
    background-color: rgba(249, 143, 29, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
}

.a-jfmx:hover{
    color: #ffffff!important;
}

.a-qtx{
    position: absolute;
    display: block;
    line-height: 35px;
    right: 27px;
    bottom: 50px;
    width: 90px;
    height: 35px;
    border-radius: 20px;
    background-color: rgba(249, 143, 29, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
}

.a-qtx:hover{
    color: #ffffff!important;
}

.task-zq-item{
    width: 100%;
    height: 93px;
    background-color: #383838;
    border-radius: 15px;
    overflow: hidden;
}

.task-zq-item-left{
    position: relative;
    width: 120px;
    height: 100%;
    text-align: center;
    line-height: 93px;
    font-size: 18px;
    font-weight: bold;
    background-image: linear-gradient(to right, #FFDA80 ,#FEE7AF);
    color: #FF991B ;
    border-radius: 15px;
}

.task-zq-item-left img{
    position: absolute;
    right: -23px;
    top: 22px;
    width: 45px;
}

.task-zq-item-right{
    position: relative;
    width: calc(100% - 140px);
    margin-left: 30px;
}

.task-zq-item-right .a-wyfx{
    position: absolute;
    right: 130px;
    top: 20px;
    width: 90px;
    height: 35px;
    border-radius: 20px;
    background-color: rgba(249, 143, 29, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
    line-height: 35px;
    display: block;
}

.task-zq-item-right .a-tgmx{
    position: absolute;
    right: 20px;
    top: 20px;
    width: 90px;
    height: 35px;
    border-radius: 20px;
    background-color: rgba(249, 143, 29, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
    line-height: 35px;
    display: block;
}

.task-rcfl-item .a-qgz{
    position: absolute;
    right: 0;
    display: block;
    width: 90px;
    height: 35px;
    line-height: 35px;
    border-radius: 20px;
    background-color: rgba(249, 143, 29, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
}

.task-rcfl-item{
    padding-bottom: 15px;
    margin-top: 15px;
    box-sizing: border-box;
    border-bottom: 1px solid #343c3f;
}

.fxtgjq-content{
    width: 788px;
    height: 358px;
    background-color: #202122;
    overflow: hidden;
}

.fxtgjq-title{
    border-bottom: 1px solid #303132;
}

/* win推广页面 */
.win-tg-item{
    width: 70%;
    padding: 5% 0;
    box-sizing: border-box;
    justify-content: center;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: contain;
}

.win-tg-wrap .bg1{
    background-image: url('../images/tuiguang/bg1.png');

}

.win-tg-wrap .bg2{
    background-image: url('../images/tuiguang/bg2.png');
}

.win-tg-wrap .bg3{
    background-image: url('../images/tuiguang/bg3.png');
}

.win-tg-item-right{
    width: 50%;
    text-align: left;
}

.win-tg-item-left{
    width: 50%;
    text-align: left;
}

.win-tg-item-right img{
    width: 100%;
}

.win-tg-item-left .c-title{
    font-size: 60px;
    color: #101010;
    font-weight: 600;
}

.win-tg-item-left .c-donwload-btn{
    display: block;
    width: 385px;
    height: 82px;
    border-radius: 60px;
    background-color: rgba(249, 143, 29, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 36px;
    text-align: center;
    line-height: 82px;
}


/* 邀请DJ入驻 */
.invite-wrap{
    z-index:998;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-image: url('../images/invite/bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    overflow-y: auto;
}

.invite-content{
    display: flex;
    justify-content: space-between;
    width: 900px;
    margin: 30px auto;
    background-color: rgba(0, 0, 0, .8);
    height: 600px;
}

.invite-content-left{
    width: 50%;
    height: 100%;
    background-color: #ffffff;
    padding: 15px;
    box-sizing: border-box;
}

.layui-form-checked[lay-skin=primary] i{
    border-color: #f98f1d !important;
    background-color: #f98f1d;
    color: #fff;
}

.layui-form-checkbox[lay-skin=primary]:hover i {
    border-color: #f98f1d;
    color: #fff
}

.invite-content-right{
    width: 50%;
}

.jftgfx-item{
    position: relative;
    width: 30%;
    background-image: linear-gradient(to right, #ECCC35 ,#EED97B);
    border-radius: 5px;
    padding: 15px;
    box-sizing: border-box;
}

.jftgfx-item:nth-child(2){
    background-image: linear-gradient(to right, #444ED0 ,#6390DE);
}

.jftgfx-item:nth-child(3){
    background-image: linear-gradient(to right, #FE8B7B ,#FEAC83);
}

.jftgye-span{
    position: absolute;
    display: block;
    top: 30px;
    left: 87px;
    height: 25px;
    line-height: 25px;
    line-height: 25px;
    border-radius: 20px 20px 20px 4px;
    background-color: rgba(251, 64, 84, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
    font-weight: 400;
    padding: 0 5px;
    box-sizing: border-box;
}

.byjfhz-wrap{
    padding: 15px;
    box-sizing: border-box;
    background-color: #3d3d3d;
    border-radius: 5px;
    margin-top: 15px;
}

.byjfhz-wrap div{
    width: 20%;
    margin-top: 20px;
    font-weight: 600;
    text-align: center;
}

.byjfhz-wrap div p:first-child{
    font-size: 16px;
}

.byjfhz-wrap div p:last-child{
    font-size: 20px;
}

.tuiguang-ph-item{
    margin-top: 15px;
}

.tuiguang-ph-item .tuiguang-ph-left{
    position: relative;
    width: 55px;
}

.tuiguang-ph-item .tuiguang-ph-left .c-fengmian{
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
}

.tuiguang-ph-left .c-lever{
    position: absolute;
    right: -10px;
    top: -15px;
}

.txje-item{
    width: 160px;
    height: 100px;
    line-height: 23px;
    border-radius: 10px;
    color: #d2d2d2;
    background-color: #3d3d3d;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
}

.txje-item-wrap .active{
    background-color: #F98F1D;
    color: #ffffff;
}

/* 商城 */
.shop-swiper{
    width: 100%;
    height: 355px;
}

.shop-nav{
    background-color: #262729 ;
}

.shop-nav-item{
    margin-bottom: 15px;
    color: #d2d2d2;
}

.shop-nav-item:last-child{
    margin-bottom: 0;
}

.shop-nav-item li{
    padding: 2px 10px;
    box-sizing: border-box;
}

.shop-nav-item li a{
    color: #d2d2d2;
}

.shop-nav-item .active{
    border-radius: 20px;
    background-color: rgba(249, 143, 29, 1);
    padding:2px 10px;
    box-sizing: border-box;
}
.shop-nav-item .active a{
    color: #ffffff;
}

.shop-nav-item .filter-active{
    color: #F98F1D;
}

.shop-nav-item .filter-active .mgr5{
    color: #F98F1D;
}

.shop-list{
    min-height: 688px;
}

.shop-list-item{
    display: inline-block;
    width:23.75%;
    margin-right: 16px;
    margin-top: 20px;
    background-color: #262729;
}

.shop-list-item:nth-child(4n){
    margin-right: 0;
}

.shop-list-item a{
    color: #d2d2d2;
}

.duihuan-btn{
    display: inline-block;
    padding: 5px 20px;
    box-sizing: border-box;
    background-color: #FF5555;
    border-radius: 30px;
    color: #ffffff;
    cursor: pointer;
}

.shop-list-item .c-fengmian-wrap{
    display: block;
    width: 100%;
    height:240px;
    overflow: hidden;
}

.shop-list-item .c-fengmian-wrap img{
    width: 100%;
    object-fit: cover;
}

/* 积分商城详情 */
.shop-detail-top{
    display: flex;
    background-color: #262729;
    border-radius: 2px;
}

.shop-detail-top-left{
    width: 340px;
    border-radius: 8px;
}

.shop-detail-top-right{
    width: calc(100% - 355px);
    margin-left: 15px;
}

.shop-detail-top-info-item li{
    padding: 10px 15px;
    color: #D2D2D2;
    background-color: #3d3d3d;
    margin-right: 15px;
    cursor: pointer;
    border-radius: 2px;
}

.shop-detail-top-info-item .active{
    background-color: #FF991B;
    color: #ffffff;
}

.shop-detail-top-left-img img{
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
}

.exzoom_img_box{
    border-radius: 8px;
}

.shop-detail-content-left{
    width: 858px;
}

.shop-detail-content-right{
    width: 322px;
}

.shop-detail-content-left-tab a{
    color: #d2d2d2;
    font-size: 18px;
    margin-right: 50px;
}

.shop-detail-content-left-tab .active{
    color: #F98F1D;
}

.wxtx-title{
    position: relative;
    padding-left: 10px;
    box-sizing: border-box;
}

.wxtx-title::after{
    position: absolute;
    content: '';
    display: block;
    top: 1px;
    left: 0;
    width: 4px;
    height: 20px;
    background-color: #F98F1D;
}

.stdh-item{
    padding: 10px 20px;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: rgba(255, 237, 217, 1);
    color: rgba(249, 143, 29, 1);
}
.stdh-item+img{
    margin: 0 10px;
}

.hot-goods-side-item{
    display: flex;
    align-items: center;
}

.hot-goods-side-item .hot-goods-side-item-left{
    width: 70px;
    height: 70px;
    border-radius: 5px;
    margin-right: 10px;
    overflow: hidden;
}

.hot-goods-side-item-left img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.hot-goods-side-item-right{
    width: calc(100% - 80px);
}

.shdz-item{
    position: relative;
    display: inline-block;
    width: 329px;
    height: 150px;
    border: 2px dashed #717171;
    border-radius: 5px;
    margin-right: 20px;
    overflow: hidden;
    cursor: pointer;
}

.shdz-list{
    white-space: nowrap;
    overflow: auto;
    padding-bottom: 10px;
}

.shdz-list::-webkit-scrollbar-track{
    background-color: #171719!important;
}

.shdz-item img{
    display: none;
}

.shdz-list .active{
    border-color: #F98F1D;
}

.shdz-list .active img{
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
}

.shdz-list .defaultAddress::after{
    position: absolute;
    right: 0;
    top: 0;
    content: '默认地址';
    color: #d2d2d2;
    padding: 5px 15px;
    box-sizing: border-box;
    background-color: #3d3d3d;
}

.order-goods-item{
    width: 100%;
}

.order-goods-img{
    width: 154px;
    height: 154px;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 15px;
}

.order-goods-img img{
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
}

.order-goods-info {
    width: calc(100% - 169px);
}

.layui-form-checkbox[lay-skin=primary]:hover i {
    border-color: #F98F1D!important;
    color: #fff
}

.layui-form-item .layui-form-checked[lay-skin=primary] i {
    border-color: #F98F1D !important;
    background-color: #F98F1D;
    color: #fff
}


/* 订单详情 */
.goods-detail-item{
    width: 100%;
}

.goods-detail-item .goods-detail-title{
    position: relative;
    padding-left: 10px;
    box-sizing: border-box;
    color: #f98f1d;
}

.goods-detail-item .goods-detail-title::after{
    display: block;
    position: absolute;
    content: '';
    width: 4px;
    height: 20px;
    background-color: #f98f1d;
    top: 1px;
    left: 0;
}

.jfbz-wrap .cancle-btn{
    width: 77px;
    height: 28px;
    line-height: 28px;
    border-radius: 100px 100px 100px 100px;
    background-color: rgba(61, 61, 61, 1);
    text-align: center;
}

.jfbz-wrap .layui-btn{
    width: 77px;
    height: 28px;
    line-height: 28px;
}


/* 右侧工具栏 */
.tool-side-wrap{
    z-index: 9;
    position: fixed;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    background-color: rgba(34, 34, 37, 1);
    box-shadow: -10px 0px 15px -10px rgba(9, 9, 10, 0.9);
}

.tool-side-content{
    position: absolute;
    top: 158px;
    width: 100%;
}

.tool-side-vip{
    background: linear-gradient(180deg, rgba(253,237,199,1) 0%,rgba(235,208,141,1) 100%);
    color: #101010;

}

.tool-side-item{
    display: block;
    position: relative;
    padding: 10px 0;
    box-sizing: border-box;
    color: #D2D2D2;
}


.tool-side-item .img2{
    display: none;
}


.tool-side-item-list-1{
    display: none;
    position: absolute;
    right: 60px;
    top: 0;
    width: 274px;
    height: 117px;
    border-radius: 4px;
}

.tool-side-item:hover .tool-hover-show{
    display: block;
    z-index: 99999;
}

.tool-side-item:hover .img1{
    display: none;
}

.tool-side-item:hover .img2{
    display: inline-block;
    
}

.tool-side-item:hover{
    background-color: #F98F1D;
}

.tool-side-item:hover p{
    color: #ffffff!important;
}

.tool-side-item-list-kf{
    display: none;
    position: absolute;
    right: 60px;
    top: 0;
    width: 220px;
    height: 243px;
    background-color: rgba(34, 34, 37, 1);
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
}

.tool-side-item-list-win{
    display: none;
    position: absolute;
    right: 60px;
    top: 0;
    width: 420px;
    height: 198px;
    background-color: rgba(34, 34, 37, 1);
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
}

.tool-side-item-list-share{
    display: none;
    position: absolute;
    right: 60px;
    top: 0;
    width: 400px;
    height: 128px;
    background-color: rgba(34, 34, 37, 1);
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
}


.tool-side-jflp{
    padding: 10px 0;
    box-sizing: border-box;
    color: #ff5d78;
    font-weight: 600;
}

.tool-side-jflp:hover{
    color: #ff5d78;
    font-weight: 600;
}

.tool-side-jflp img {
    animation: moveScale 1.5s infinite alternate;
}

@keyframes moveScale {
    0% {
        transform: scale(1);
      }
      25% {
        transform: scale(1.2);
      }
      50% {
        transform: scale(1.2) rotateZ(5deg);
      }
      75% {
        transform: scale(1.2) rotateZ(-5deg);
      }
      100% {
        transform: scale(1);
      }
  }

/* 更新动态 */
.dynamic-banner{
    width: 100%;
    height: 200px;
    background-image: url('../images/dynamic/1.png');
    background-size: cover;
}

.dynamic-left{
    width: 198px;
    background-color: #222225;
}

.dynamic-left ul>li{
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
}

.dynamic-left ul>li a{
    color: #D2D2D2;
    display: block;
    width: 100%;
    height: 45px;
}

.dynamic-left ul .active{
    color: #ffffff;
    background-color: #F98F1D;
}

.dynamic-left ul .active a{
    color: #ffffff;
}

.dynamic-left ul>li:hover{
    background-color: #F98F1D;
}

.dynamic-left ul>li:hover a{
    color: #ffffff;
}

.dynamic-right{
    width: calc(100% - 208px);
    background-color: #222225;
}

/* 积分活动介绍页 */
.intergral-activity-intro-1{
    width: 100%;
    background-color: #FFE7C6;
    padding: 30px;
    box-sizing: border-box;
}

.intergral-activity-task-item{
    position: relative;
    width: 193px;
    height: 274px;
    border-radius:20px 20px 10px 10px;

}

.intergral-activity-task-item-bot{
    z-index: 99;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 177px;
    background-image: url('../images/jifen/bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    border-radius: 0 0 10px 10px;
}

.intergral-activity-task-item img{
    z-index: 10;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 56px;
    width: 86px;
}

.intergral-activity-task-item-top{
    width: 100%;
    height: 128px;
    border-radius:20px 20px 0 0;
}

.intergral-activity-task-item-top p{
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    color: #ffffff;
    padding-top: 15px;
}

.intergral-activity-task-item-top .c-dec{
    position: absolute;
    display: inline-block;
    border-radius: 5px;
    background: linear-gradient(83.5deg, rgba(255,149,31,1) 5.39%,rgba(254,77,56,1) 96.32%);
    color: #ffffff;
    left: 0;
    right: 0;
    width: 158px;
    height: 35px;
    line-height: 35px;
    margin: auto;
    top: -30px;
    text-align: center;
}

.intergral-activity-task-item-top .c-dec::after{
    position: absolute;
    bottom: -8px;
    left: 42%;
    content: '';
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 10px solid #FF712C;
}


.intergral-activity-task-item-top .c-dec {
    -webkit-animation: bounce-down 1.5s linear infinite;
    animation: bounce-up 1.5s linear infinite;
}

.intergral-activity-intro-2{
    width: 100%;
    background-color: #FFE7C6;
    padding: 30px;
    box-sizing: border-box;
    background-image: url('../images/jifen/bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.xinfeng-wrap{
    position: absolute;
    width: 100%;
    height: 300px;
    bottom: 20px;
    left: 0;
    padding: 40px;
    box-sizing: border-box;
}

.xinfeng-item{
    width: 50%;
}

.xinfeng-item-box{
    border-radius: 10px;
    padding: 15px;
    background-color: #FFF6E7;
    border: 2px solid #412F01;
    width: 80%;
    margin: 0 auto;
}

.intergral-activity-intro-3{
    width: 100%;
    background-color: #FFE7C6;
    padding: 30px;
    box-sizing: border-box;
}

.intergral-activity-intro-user-wrap::-webkit-scrollbar {
    display: none;
}

.intergral-activity-intro-user{
    display: inline-block;
    width: 20%;
    text-align: center;
}


.intergral-activity-intro-user-scorll{
    -webkit-animation: artisterScroll 10s linear infinite forwards;
    animation: artisterScroll 10s linear infinite forwards
}

@-webkit-keyframes artisterScroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(-1200px);
        transform: translateX(-1200px)
    }
}

@keyframes artisterScroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    to {
        -webkit-transform: translateX(-1200px);
        transform: translateX(-1200px)
    }
}



.intergral-activity-intro-user img{
    width: 169px;
    height: 169px;
    border-radius: 50%;
    border: 4px solid #EEB118;
    object-fit: cover;
}

.intergral-activity-intro-user .user-name{
   font-size: 36px;
   color: #101010; 
   margin-top: 10px;
}

.intergral-activity-intro-user p:last-child{
    color: #777777;
    font-size: 20px;
    margin-top: 10px;
}


/* 课程列表 */
.train-item .train-left{
    width: 138px;
}

.train-left .train-left-avatar{
    width: 138px;
    height: 138px;
    border-radius: 50%;
    border: 5px solid #373937;
    box-sizing: border-box;
}

.train-left .train-left-avatar img{
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.train-item .train-right{
    position: relative;
    width: calc(100% - 150px);
    margin-left: 20px;
}

.train-item .train-right .dykc-btn{
    position: absolute;
    right: 0px;
    top: 0px;
    width: 90px;
    height: 36px;
    line-height: 36px;
    border-radius: 20px;
    color: rgba(249, 143, 29, 1);
    font-size: 14px;
    text-align: center;
    border: 1px solid rgba(249, 143, 29, 1);
    cursor: pointer;
}

.train-item .train-right .fold-open{
    position: absolute;
    right: 0;
    bottom: -10px;
}

/* 订阅弹窗 */
/* 下载弹窗 */
.sub-windown-name{
    width: 80%;
    margin: 0 auto;
    color: #ffffff;
    font-size: 18px;
}

.sub-windown-money{
    color: #3A3A3A;
    font-size: 16px;
}

.sub-windown .sub-windown-btn{
    width: 122px;
    height: 40px;
    border-radius: 30px;
}

.sub-windown .sub-windown-btn:nth-child(2n){
    background-color: #ffffff;
    color: #E6851E;
    border: 1px solid #E6851E;
}

.sub_windown_cover{
    z-index: 100;
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
}

.sub-windown{
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 430px;
    height: 402px;
    display: none;
    transform: scale(0);
    background-image: url('../images/common/r.png');
    background-repeat: no-repeat;
    border-radius: 10px;
    background-size: contain;
    transition: all 250;
}


.sub-windown-active{

    transform: scale(1);
    transition: all 250;
}

@keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
   
  .rotating-element {
    animation: rotate 5s linear infinite;
  }

  @keyframes updown {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-18px);
      }
      100% {
        transform: translateY(0);
      }
  }

  @keyframes leftright {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-18px);
    }
    100% {
      transform: translateX(0);
    }
}

@keyframes scaleA {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
      transform: translateX(0);
    }
}

@keyframes lightA {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

  /* 首页动画 */
  .index-star{
    position: fixed;
    top: 138px;
    animation: rotate 5s linear infinite;
    display: none;
  }

  .index-coin{
    position: fixed;
    top: 400px;
    animation: updown 4s linear infinite;
    display: none;
  }

  .index-coin2{
    position: fixed;
    top: 303px;
    animation: rotate 5s linear infinite;
    display: none;
  }

  .index-item5{
    position: fixed;
    top: 303px;
    animation: scaleA 5s linear infinite;
    display: none;
  }

  .index-item6{
    position: fixed;
    top: 200px;
    animation: scaleA 5s linear infinite;
    display: none;
  }

  .index-item7{
    position: fixed;
    top: 400px;
    animation: lightA 5s linear infinite;
    display: none;
  }

  .index-item8{
    position: fixed;
    top: 400px;
    animation: lightA 5s linear infinite;
    display: none;
  }

  .index-star2{
    position: fixed;
    top: 350px;
    animation: rotate 5s linear infinite;
    display: none;
  }



  .index-music-img{
    position: fixed;
    top: 560px;
    animation: leftright 5s linear infinite;
    display: none;
  }

/* 动态网格 */
.grid-background{
    position: fixed;
    width: 100%;
    height: 300px;
    top: 0;
    left: 0;
    z-index: -1;
    perspective:450px;
}
.bg-line{
    width: 100%;
    height: 200%;
    transform: rotateX(82deg);
    overflow: hidden;
}

.bg-line::before{
    z-index: -1;
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 300px;
    background-image: linear-gradient(to right, #fff 1px, transparent 0), linear-gradient(to bottom, #fff 1px, transparent 0);
    left: 0;
    background-size: 88.9px 85px;
    background-repeat: repeat;
    animation: playline1 15s linear infinite;
    opacity: 0.07;
}


@keyframes playline1 {
    0% {
        transform: translateY(0,0,0) 
    }

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

/* 首页流星 */
.index-space {
    width: 100%;
    height: 100%;
    margin: 0;
    /* background: #121212; */
    /* float: left; */
    overflow: hidden;
    position: fixed;
    left: 0;
    z-index: -1;
    right: 0;
}

.index-space .star {
    display: block;
    width: 0px;
    height: 0px;
    border-radius: 50%;
    background: #fff;
    top: -50px;
    left: 200px;
    position: relative;
    transform-origin: 100% 0;
    animation: star-ani 6s infinite ease-out;
    box-shadow: 0 0 0px 0px rgba(255, 255, 255, .3);
    opacity: 0;
    z-index: 2;
}

.index-space .star:after {
    content: '';
    display: block;
    top: -10px;
    left: 200px;
    border: 0px solid #fff;
    border-width: 0px 90px 3px 90px;
    border-color: transparent transparent transparent #fff;
    transform: rotate(-45deg) translate3d(1px, 3px, 0);
    box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
    transform-origin: 0% 100%;
    animation: shooting-ani 1s infinite ease-out;
}




.index-space .star1 {
    top: -10px;
    left: 300px;
    background: #fff;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
}

.index-space .star1:after {
    border-color: transparent transparent transparent #fff;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
}

.index-space .star2 {
    top: 100px;
    left: 200px;
    background: #fff;
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
}

.index-space .star2:after {
    border-color: transparent transparent transparent #fff;
    animation-delay: 0;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
}

.index-space .star3 {
    top: -10px;
    left: 100px;
    background: #fff;
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}

.index-space .star3:after {
    border-color: transparent transparent transparent #fff;
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}

.index-space .star4 {
    top: 100px;
    left: 250px;
    background: #fff;
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}

.index-space .star4:after {
    border-color: transparent transparent transparent #fff;
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}

.index-space .star5 {
    top: 200px;
    left: 250px;
    background: #fff;
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}

.index-space .star5:after {
    border-color: transparent transparent transparent #fff;
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}

.index-space .star6 {
    top: -10px;
    left: 100px;
    background: #D9D919;
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}

.index-space .star6:after {
    border-color: transparent transparent transparent #D9D919;
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
}


.index-space .star7 {
    top: 100px;
    left: 200px;
    background: #D9D919;
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
}

.index-space .star7:after {
    border-color: transparent transparent transparent #D9D919;
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
}

.index-space .star13 {
    top: -10px;
    left: 210px;
    background: #D9D919;
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
}

.index-space .star13:after {
    border-color: transparent transparent transparent #D9D919;
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
}

.index-space .star14 {
    top: -100px;
    left: 150px;
    background: #D9D919;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
}

.index-space .star14:after {
    border-color: transparent transparent transparent #D9D919;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
}


.index-space .star15 {
    top: 200px;
    left: 250px;
    background: #D9D919;
    animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
    -moz-animation-delay: 2.5s;
}

.index-space .star15:after {
    border-color: transparent transparent transparent #D9D919;
    animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
    -moz-animation-delay: 2.5s;
}

.index-space .star8 {
    top: -10px;
    left: 100px;
    background: #D9D919;
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
}

.index-space .star8:after {
    border-color: transparent transparent transparent #D9D919;
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
}

.index-space .star9 {
    top: 100px;
    left: 250px;
    background: #D9D919;
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
}

.index-space .star9:after {
    border-color: transparent transparent transparent #D9D919;
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
}

.index-space .star10 {
    top: 200px;
    left: 250px;
    background: #D9D919;
    animation-delay: 5s;
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
}

.index-space .star10:after {
    border-color: transparent transparent transparent #D9D919;
    animation-delay: 5s;
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
}

.index-space .star11 {
    top: -10px;
    left: 100px;
    background: #D9D919;
    animation-delay: 5s;
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
}

.index-space .star11:after {
    border-color: transparent transparent transparent #D9D919;
    animation-delay: 5s;
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
}

.index-space .star12 {
    top: -10px;
    left: 100px;
    background: #D9D919;
    animation-delay: 6s;
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
}

.index-space .star12:after {
    border-color: transparent transparent transparent #D9D919;
    animation-delay: 6s;
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
}

@keyframes star-ani {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0) translate3d(0, 0, 0);
        -webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
        -moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
    }

    50% {
        opacity: 1;
        transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
        -webkit-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
        -moz-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
    }

    100% {
        opacity: 0;
        transform: scale(1) rotate(0) translate3d(-400px, 300px, 0);
        -webkit-transform: scale(1) rotate(0) translate3d(-400px, 400px, 0);
        -moz-transform: scale(1) rotate(0) translate3d(-400px, 400px, 0);
    }
}


/* 收益排行 */
.rangking-r-tab{
    display: flex;
    align-items: center;
    justify-content: center;
}

.rangking-r-tab a{
    line-height: 63px;
    width: 165px;
    height: 63px;
    font-size: 20px;
    color: #ffffff;
}

.rangking-r-tab a:hover{
    color: #ffffff;
}

.rangking-r-tab .active{
    border-radius: 30px;
    background-color: #FF712C;
}

.rangking-r-wfb{
    width: 1160px;
    height: 86px;
    border-radius: 6px;
    background-color: rgba(46, 47, 48, 1);
}

.rangking-r-wfb-img{
    width: 55px;
    height: 55px;
}

.rangking-r-wfb-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.rangking-r-item{
    position: relative;
    width: 240px;
    height: 180px;
    margin: 0 30px;
}

.rangking-r-item:nth-child(2){
    margin-top: -88px;
}

.rangking-r-item .fm{
    z-index: 9;
    position: absolute;
    top:-30px;
    left: 0;
    right: 0;
    margin: auto;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

.rangking-r-item-content{
    position: relative;
    border-radius:6px;
    color: #ffffff;
}

.rangking-r-item-content a{
    color: #ffffff;
}

.rangking-r-item-content a:hover{
    color: #ffffff;
}

.rangking-r-item-content span{
    position: absolute;
    right: 10px;
    top: 10px;
    color: #7a6ffc;
    font-size: 30px;
}

.rangking-r-item .ranking-num{
    z-index: 9;
    position: absolute;
    top: -49px;
    right: 67px;
}

.rangking-r-item:nth-child(2) span{
    color: #f9949e;
}

.rangking-r-item:nth-child(3) span{
    color: #d39efd;
}

.rangking-r-item:nth-child(1) .rangking-r-item-content{
    background: linear-gradient(180deg, rgba(78,24,253,1) 0%,rgba(41,177,249,1) 100%);
}

.rangking-r-item:nth-child(2) .rangking-r-item-content{
    background: linear-gradient(180deg, rgba(248,100,143,1) 0%,rgba(246,129,79,1) 100%);
}

.rangking-r-item:nth-child(3) .rangking-r-item-content{
    background: linear-gradient(180deg, rgba(187,95,252,1) 0%,rgba(226,128,254,1) 100%);
}

.rangking-r-ul-thead{
    padding: 10px 10px;
    box-sizing: border-box;
}

.rangking-r-ul-thead li{
    flex: 1;
    text-align: center;
}

.rangking-r-ul-thead li:first-child{
    text-align: left;
}

.rangking-r-ul-thead li:last-child{
    text-align: right;
}

.rangking-r-ul{
    margin-bottom: 20px;
    padding: 10px 10px;
    box-sizing: border-box;
    border-radius: 30px;
    background-color: #2e2f30;
}

.rangking-r-ul li{
    text-align: center;
    flex: 1;
}

.rangking-r-ul li:first-child{
    text-align: left;
}

.rangking-r-ul li:last-child{
    text-align: right;
}
.rangking-r-ul li .c-num{
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #ffffff;
    background-color: #b8b8b8;
    border-radius: 50%;
}

.rangking-r-ul li .c-user img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.rangking-r-ul li .c-user {
    color: #ffffff;
}

.rangking-r-ul li .c-user:hover {
    color: #ffffff;
}

/* 分隔符 */
.user-jfdt-wrap img{
    width: 35px;
    height:35px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.user-jfdt-wrap{
    color: #ffffff;
}

.user-jfdt-wrap a:hover{
    color: #FF991B;
}

.user-jfdt-wrap{
    height: 40px;
    overflow-y: auto;
}

.user-jfdt-wrap ul li{
    margin-bottom: 10px;
}

.user-jfdt-wrap::-webkit-scrollbar {
    display: none;
}


.scroll_box{
    animation:  scrollUl 20s linear infinite;
}

.scroll_box:hover{
    animation-play-state:paused;
}

@keyframes scrollUl {
    0% {
        transform: translateY(0px);
      }
      100% {
        transform: translateY(-100%);
      }
}


/* 充值套餐 */
.recharge-package-banner{
    width: 100%;
    height:200px;
    background-image: url('../images/recharge/bg.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.recharge-package-tab{
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 555px;
    height: 83px;
    line-height: 20px;
    border-radius: 100px;
    background-color: rgba(38, 39, 41, 1);
    margin: 0 auto;
}

.recharge-package-tab .active{
    display: inline-block;
    width: 50%;
    height: 63px;
    border-radius: 60px;
    background: linear-gradient(90.23deg, rgba(248,136,63,1) -0.11%,rgba(252,104,111,1) 100.49%);
    color: rgba(255, 255, 255, 1);
    font-size: 28px;
    text-align: center;
    line-height: 63px;
}

.recharge-package-tab a{
    width: 50%;
    height: 63px;
    line-height: 63px;
    font-size: 28px;
    text-align: center;
    color: rgba(255, 255, 255, 1);
}

.recharge-package-tab a:hover{
    color: #ffffff;
}

.recharge-package-list{
    white-space: nowrap;
    overflow-x: auto;
}

.recharge-package-list::-webkit-scrollbar-thumb{
    background-color:#999999;
}

.recharge-package-list .recharge-package-list-item{
    width: 332px;
    height: 491px;
    line-height: 20px;
    border-radius: 6px;
    background-color: rgba(38, 39, 41, 1);
    margin-right: 15px;
    padding-top: 35px;
    transition: all 250ms;
    border: 1px solid transparent;
    display: inline-block;
}

.recharge-package-list .recharge-package-list-item:hover{
    transform: translateY(-10px);
    transition: all 250ms;
    border: 1px solid rgba(254, 152, 68, 1);
}


.recharge-package-list .recharge-package-list-item .mssy{
    display: inline-block;
    width: 139px;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    color: rgba(254, 152, 68, 1);
    text-align: center;
    border: 1px solid rgba(254, 152, 68, 1);
    margin: 20px auto;
}

.recharge-package-list .recharge-package-list-item:hover .mssy{
    color: #ffffff;
    background: linear-gradient(89.3deg, rgba(254,152,68,1) 2.55%,rgba(252,104,111,1) 99.28%,rgba(252,104,111,1) 99.28%);
}

.recharge-package-shiting-item:not(:last-child){
    margin-bottom: 20px;
}

.recharge-package-shiting-item-yz{
    display: flex;
    align-items: center;
}

.recharge-package-shiting-item-yz .cursor{
    position: relative;
    margin-left: 15px;
    width: 120px;
    height: 80px;
    line-height: 26px;
    border-radius: 6px;
    background-color: rgba(46, 47, 48, 1);
    color: rgba(143, 140, 140, 1);
    font-size: 18px;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
}

.recharge-package-shiting-item-yz .show_tip::before {
    display: block;
    white-space: nowrap;
    content: "选择音质对比进行播放"; /* 提示框内容 */
    position: absolute; /* 绝对定位使提示框脱离文档流 */
    top: -50px; /* 调整以适应您的布局，让提示框出现在元素上方 */
    left: 50%; /* 使其水平居中 */
    transform: translateX(-50%); /* 水平居中调整 */
    padding: 5px 10px; /* 内边距，根据需要调整 */
    background-color: #333; /* 背景色 */
    color: white; /* 文字颜色 */
    border-radius: 5px; /* 可选，圆角效果 */
    transition: all 0.3s ease; /* 动画效果，包括透明度和大小 */
    z-index: 1; /* 确保提示框在上方 */
    font-size: 14px;
    animation: scaleUpDown 2s infinite; /* 应用动画 */
  }

 
  /* 动画定义：先放大后缩小 */
@keyframes scaleUpDown {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.1); }
  }
  
  /* 创建三角形连接效果 */
  .recharge-package-shiting-item-yz .show_tip::after {
    content: ""; /* 空内容，用于创建形状 */
    position: absolute;
    top: -15px; /* 三角形位置调整，5px为三角形的高度一半 */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0px 10px;
    border-color: #333333 transparent  transparent  transparent; /* 三角形颜色 */
    z-index: 2; /* 确保三角形在提示框内容之上 */
  }
  

.recharge-package-shiting-item-yz .active{
    border: 1px solid rgba(254, 152, 68, 1);
    color: rgba(254, 152, 68, 1);
}

.recharge-package-shiting-item-btn{
    width: 386px;
    height: 60px;
    border-radius: 60px;
    background: linear-gradient(89.3deg, rgba(254,152,68,1) 2.55%,rgba(252,104,111,1) 99.28%,rgba(252,104,111,1) 99.28%);
    color: rgba(255, 255, 255, 1);
    font-size: 20px;
    text-align: center;
    line-height: 60px;
    margin: 0 auto;
    animation: scalebtn 3s ease  infinite;
}

@keyframes scalebtn {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
      transform: translateX(0);
    }
}

.recharge-package-quanyi2{
    background-color: #262729;
    box-sizing: border-box;
    border-radius: 6px;
}

.recharge-window-title{
    width: 100%;

}

.recharge-window-title .fm{
    width: 49px;
    height: 49px;
    border-radius: 50%;
    object-fit: cover;
}

.recharge-window-wrap{
    background: linear-gradient(180deg, rgba(255,208,126,1) 0%,rgba(255,255,255,1) 20%);
}

.recharge-window-wrap .vip-status{
    display: inline-block;
    padding: 5px 15px;
    border-radius: 30px;
    color: #fff;
    background-color: #E1BE8A;
    margin-left: 20px;
}

.reacharge-window-tab{
    display: flex;
    align-items: center;
    width: 370px;
    height: 51px;
    background-color: #FFE8C3;
    border-radius: 30px;
    margin: 20px auto;
}

.reacharge-window-tab a{
    flex: 1;
    text-align: center;
    line-height: 51px;
    color: #101010;
    font-size: 28px;
}


.reacharge-window-tab .active{
    width: 235px;
    height: 51px;
    line-height: 51px;
    border-radius: 60px;
    background: linear-gradient(88.23deg, rgba(245,208,146,1) 1.81%,rgba(243,192,120,1) 99.39%);
    color: rgba(160, 103, 43, 1);
    font-size: 28px;
    text-align: center;
}

.recharge-window-list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.recharge-window-list .recharge-window-list-item{
    padding: 20px;
    box-sizing: border-box;
    width: 32%;
    margin-right: 2%;
    margin-bottom: 20px;
    height: 182px;
    background-color: #ffffff;
    border:1px solid rgba(210, 210, 210, 1);
    text-align: center;
    border-radius: 10px;
}

.recharge-window-list .active{
    border: 1px solid rgba(231, 178, 103, 1);
    background-color: #fff9f0;
}

.recharge-window-list .recharge-window-list-item:nth-child(3n){
    margin-right: 0;
}

.paytype-style{
    width: 126px;
    height: 45px;
    line-height: 45px;
    border-radius: 6px;
    color: rgba(100, 100, 100, 1);
    font-size: 14px;
    text-align: center;
    border: 2px solid rgba(210, 210, 210, 1);

}

.paytype-style-wrap .active{
    border: 2px solid rgba(231, 178, 103, 1);
}

.pay-btn button{
    margin: 0 auto;
    border: none;
    width: 294px;
    height: 49px;
    border-radius: 60px;
    background: linear-gradient(88.82deg, rgba(248,233,199,1) -0.4%,rgba(242,214,155,1) 99.89%);
    color: rgba(51, 51, 51, 1);
    font-size: 20px;
    text-align: center;
}

/* 非VIP音乐播放权限 */
.vipMusicPower-windown-name{
    width: 80%;
    margin: 0 auto;
    color:#FE9844;
    font-size: 18px;
}


.vipMusicPower-windown .vipMusicPower-windown-btn{
    position: relative;
    height: 40px;
    border-radius: 30px;
}

.vipMusicPower_windown_cover{
    z-index: 100;
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
}

.vipMusicPower-windown{
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 430px;
    height: 402px;
    display: none;
    border-radius: 10px;
    transition: all 250;
    background: linear-gradient(179.54deg, #ffe2c2,rgba(255,255,255,1));
}


.vipMusicPower-windown-active{
    transform: scale(1);
    transition: all 250;
}

.vipMusicPower-windown-close{
    position: absolute;
    top: -30px;
    right: -30px;
    cursor: pointer;
}

/* 瀑布流视频列表 */

.video-flow-item{
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background-color: #2E2F30;
    margin-bottom: 15px;
}

.video-flow-item .video-flow-item-img{
    display: block;
    width: 100%;
    object-fit: contain;
    overflow: hidden;
    max-height: 400px;
    border-radius: 10px;
    min-height: 150px;
}

.video-flow-item .video-flow-item-img .c-fm{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    opacity: 1;
}

.video-flow-item .video-flow-item-img .c-fm-gif{
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.video-flow-item:hover .video-flow-item-img .c-fm{
    display: none;
}

.video-flow-item:hover .video-flow-item-img .c-fm-gif{
    display: block;
}

.video-flow-item .video-flow-item-img span{
    position: absolute;
    right: 20px;
    top: 20px;
    width: 44px;
    height: 21px;
    line-height: 20px;
    border-radius: 4px;
    background-color: rgba(249, 143, 29, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
}

.video-flow-cover{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height:calc(100% - 106px);
    background-color: rgba(0, 0, 0, .2);
    opacity: 1;
    transition: all 150ms;
}

.video-flow-item:hover .video-flow-cover{
    opacity: 0;
    transition: all 150ms;
}

.video-flow-cover .bg-img{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 40px;
    margin: auto;
    
}

.video-flow-item h2{
    width: 100%;
    height: 40px;
}

.video-flow-item h2 a{
    display: block;
    width: 100%;
    height: 100%;
    color: #D2D2D2;
}

.video-flow-left{
    position: sticky;
    left: 0;
    top: 70px;
    width: 200px;
    margin-top: -20px;
    height: calc(100vh - 70px);
    padding:0 20px 20px 20px;
    box-sizing: border-box;
    background-color: #222225;
}

.video-flow-right {
    width: calc(100% - 240px);
    margin-right: 20px;
}

.video-flow-side-nav a{
    display: flex;
    align-items: center;
    color: #D2D2D2;
    height: 40px;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 5px;
}

.video-flow-side-nav a i{
    font-size: 18px;
    margin-right: 8px;
}

.video-flow-side-nav a.active{
    color: #f48d37;
    font-weight: 600;
}

.video-flow-side-nav a:hover{
    background-color: #383838;
}

.video-flow-side-nav a img{
    width: 24px;
    margin-right: 5px;
}

.video-flow-side-nav{
    box-sizing: border-box;
    padding-bottom: 10px;
    border-bottom: 1px solid #171719;
}

.video-flow-side-nav:last-child{
    border-bottom: 0;
}

.video-flow-info{
    padding: 10px 20px;
    box-sizing: border-box;
}

.hot-music-item{
    width: 100%;
    margin-bottom: 15px;
}

.hot-music-item .num{
    width: 26px;
    height: 24px;
    line-height: 24px;
    color: #ffffff;
    text-align: center;
    background-color: #252525;
    border-radius: 50%;
    display: block;
}

.hot-music-item:nth-child(1) .num{
    width: 24px;
    height: 24px;
    line-height: 30px;
    color: #ffffff;
    text-align: center;
    background-image: url('../images/videoflow/a.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
}


.hot-music-item:nth-child(2) .num{
    width: 24px;
    height: 24px;
    line-height: 30px;
    color: #ffffff;
    text-align: center;
    background-image: url('../images/videoflow/b.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
}

.hot-music-item:nth-child(3) .num{
    width: 24px;
    height: 24px;
    line-height: 30px;
    color: #ffffff;
    text-align: center;
    background-image: url('../images/videoflow/b.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
}

.hot-music-item  .c-fm-wrap{
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 6px;
    margin: 0 10px;
    overflow: hidden;
}

.hot-music-item  .c-fm{
    width: 100%;
    height: 100%;
    object-fit: cover;
 
}

.hot-music-item  .bf-img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin:  auto;
    width: 20px;
    height: 20px;
}

.hot-music-item .c-title{
    height: 40px;
    color: #E0E0E0;
    font-size: 14px;
    width: calc(100% - 70px);
}

/* 视频猜你喜欢 */
.video-like-list{
    display: flex;
    flex-wrap: wrap;
}

.video-like-item{
    width: 18.5%;
    margin-right: 1.5%;
    margin-bottom: 15px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background-color: #2E2F30;
    margin-top: 15px;
}

.video-like-item:nth-child(5n){
    margin-right: 0;
}

.video-like-item .video-like-item-img{
    position: relative;
    display: block;
    width: 100%;
    height: 168px;
    object-fit: contain;
    overflow: hidden;
    border-radius: 10px;
}

.video-like-item .video-like-item-img .c-fm{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    opacity: 1;
}


.video-like-item .video-like-item-img span{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 44px;
    height: 21px;
    line-height: 20px;
    border-radius: 4px;
    background-color: rgba(249, 143, 29, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    text-align: center;
}

.video-like-item .video-like-item-img .video-time{
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 2px 8px;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, .5);
    color: #ffffff;
}

.video-like-cover{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height:100%;
    background-color: rgba(0, 0, 0, .2);
    transform: translateY(-100%);
    transition: all 150ms;
}

.video-like-item:hover .video-like-cover{
    transform: translateY(0);
    transition: all 150ms;
}

.video-like-cover .bg-img{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 40px;
    margin: auto;
    
}

.video-like-item h2{
    width: 100%;
    height: 20px;
}

.video-like-item h2 a{
    display: block;
    width: 100%;
    height: 100%;
    color: #D2D2D2;
}

.video-like-info {
    height: 80px;
    padding: 10px 10px;
    box-sizing: border-box;
}

.video-like-list:not(:first-child){
    display: none;
}