html {
    height: 100%;
    width: 100%;
}
body{
    min-height: 100%;
    width: 100%;
    margin: 0 auto;
    background: #F5F5F5;
    overflow: hidden;
}

.top-info {
    position: relative;
    z-index: 1;
    width: 9.466666666666667rem;
    /* max-height: 5.333333rem; */
    margin: 4.133333rem auto .266667rem;
    background: #fff;
    overflow: hidden;
    border-radius: 0.21333333333333335rem;
}
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 2223;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.loading-hide {
    -webkit-animation-name: loadinghide;
    animation-name: loadinghide;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

#loadingContainer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 4rem;
    height: 4rem;
    margin: auto;
    background-image: url(/assets/images/wap/template/onebutton/newloading.png);
    background-size: 56rem 4rem;
    background-position: 0 0;
    -webkit-animation: loading 1.17s steps(1, start) infinite;
    animation: loading 1.17s steps(1, start) infinite;
}

@keyframes loading {
    0%{
        background-position: 0 0;
    }
    7.1428571%{
        background-position: -4rem 0;
    }
    14.28571429%{
        background-position: -8rem 0 ;
    }
    21.42857143%{
        background-position: -12rem 0 ;
    }
    28.571428571%{
        background-position: -16rem 0 ;
    }
    35.71428571%{
        background-position: -20rem 0 ;
    }
    42.85714286%{
        background-position: -24rem 0 ;
    }
    50%{
        background-position: -28rem 0 ;
    }
    57.14285714%{
        background-position: -32rem 0 ;
    }
    64.28571429%{
        background-position: -36rem 0 ;
    }
    71.42857143%{
        background-position: -40rem 0 ;
    }
    78.57142857%{
        background-position: -44rem 0 ;
    }
    85.71428571%{
        background-position: -48rem 0 ;
    }
    92.85714286%{
        background-position: -52rem 0 ;
    }
    100%{
        background-position: 0 0 ;
    }
}

@-webkit-keyframes loading {
    0%{
        background-position: 0 0;
    }
    7.1428571%{
        background-position: -4rem 0;
    }
    14.28571429%{
        background-position: -8rem 0 ;
    }
    21.42857143%{
        background-position: -12rem 0 ;
    }
    28.571428571%{
        background-position: -16rem 0 ;
    }
    35.71428571%{
        background-position: -20rem 0 ;
    }
    42.85714286%{
        background-position: -24rem 0 ;
    }
    50%{
        background-position: -28rem 0 ;
    }
    57.14285714%{
        background-position: -32rem 0 ;
    }
    64.28571429%{
        background-position: -36rem 0 ;
    }
    71.42857143%{
        background-position: -40rem 0 ;
    }
    78.57142857%{
        background-position: -44rem 0 ;
    }
    85.71428571%{
        background-position: -48rem 0 ;
    }
    92.85714286%{
        background-position: -52rem 0 ;
    }
    100%{
        background-position: 0 0 ;
    }
}
@keyframes loadinghide {
    0% {
        opacity: 1;
    }
    99%{
        opacity: 0;
    }
    100%{
        display: none;
        opacity: 0;
    }
}
@-webkit-keyframes loadinghide {
    0% {
        opacity: 1;
    }
    99%{
        opacity: 0;
    }
    100%{
        display: none;
        opacity: 0;
    }
}

.common-width{
    width: 93%;
    margin: 0 auto;
}
.common-color{ background-color: #f8f8f8}
.display-block{ display: block;}
.top-banner-img{
    position: absolute;
    top: 0;
    width: 100%;
}
.top-details{
    font-size: .373333rem;
    color: #AAAAAA;
    width: 8.4rem;
    margin: 0 auto;
    text-align: justify;
    line-height: .613333rem;
    letter-spacing: .026667rem;
}

.top-details img, .top-details video {
    border-radius: .16rem;
}
.top-details img {
    margin: .533333rem auto;
}

.common-title{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 0.48rem;
    font-size: 0.42666666rem;
    margin-top: 0.3rem;
    margin-bottom:  0.2rem;
    text-align: center;
}
.title-width {
    max-width: 8.0333333rem;
    /* height: .48rem; */
    color: #333333;
    font-weight: 600;
    margin: .533333rem auto .533333rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 0.48rem;
    font-size: 0.42666666rem;
    text-align: center;
    padding-left: .233333rem;
    padding-right: .7333333rem;
}
.title-width>span {
    padding-left: 0.6266666666666667rem;
    display: inline-block;
}

    .title-width:before {
        position: absolute;
        top: .55rem;
        /* left: 2rem; */
        content: ' ';
        box-sizing: border-box;
        width: 0.4266666666666667rem;
        height: 0.4533333333333333rem;
        margin-right: .133333rem;
        background: url('//cbshowhot.cdn.changbaimg.com/-/fad222e90f93f769/tit-left.png')   no-repeat;
        background-size: 100% 100%;
    }
.title-width:after {
    position: absolute;
     top: .55rem;
    /* right: 2rem; */
    content: ' ';
   box-sizing: border-box;
    width: .453333rem;
    height: .453333rem;
    margin-left: .28rem;
    background: url('//cbshowhot.cdn.changbaimg.com/-/61d632c7fdfd5aa9/tit-right.png')  no-repeat;
    background-size: 100% 100%;
}
.new-rule {
    position: absolute;
    top: 3.013333rem;
    left: 8.08rem;
    width: 1.92rem;
    letter-spacing: 2px;
    font-size: .32rem;
    color: #FFFFFF;
    text-align: center;
    line-height: 0.8rem;
    height: .8rem;
    background: linear-gradient(45deg, #EA7BFF, #956EFF);
    box-shadow: 0 1px .053333rem rgba(0, 0, 0, 0.2);
    border-top-left-radius: .493333rem;
    border-bottom-left-radius: .493333rem;
}
.new-rule::after {
        position: absolute;
        content: '';
        top: 36%;
        right: 0;
        width: 0;
        height: 0;
        border: .106667rem solid transparent;
        border-left-color: #fff;
}
.prop-price-container{
    margin:  .533333rem .56rem;
    display: -webkit-box;
}
    .prop-wrapper{
        width: 3.92rem;
        height: 2.053333rem;
       padding-left: .373333rem;
       box-sizing: border-box;
        position: relative;
        display: -webkit-box;
        /* background: linear-gradient(-45deg,#FF6D76,#FF49B1);
        border-radius: .16rem; */
    }
    .prop-prize {
        background: url('//cbshowhot.cdn.changbaimg.com/-/3bcb3b7a3d544405/prize-bg.png') no-repeat;
        background-size: 100% 100%;
        /* background: linear-gradient(-45deg,#974DFF,#F468FF); */
    }

    /* .prop-wrapper:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        border-style: solid;
        border-width: 1px;
        border-color: #ddd;
    } */
    .prop-wrapper:first-child{
        width: 3.92rem;
        height: 2.053333rem;
        background: url('//cbshowhot.cdn.changbaimg.com/-/e15227e7a484cac5/gift-bg.png') no-repeat;
        background-size: 100% 100%;
        margin-right:.533333rem;
    }
    .prop-wrapper >div:first-child{
            /* width: 57.95%; */
             font-size: .426667rem;
        color: #fff;
            display: -webkit-box;
            -webkit-box-pack: center;
            -webkit-box-align: center;
        }
        .prop-wrapper >div:last-child{
            display: -webkit-box;
            -webkit-box-flex: 1;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            /* background: url('//cbshowhot.cdn.changbaimg.com/-/4630bb4cc537979b/flowerbg.png') no-repeat;
            background-size: 1.386667rem 1.52rem; */
        }
        .prop-prize >div:last-child{
            /* background: url('//cbshowhot.cdn.changbaimg.com/-/654037ea82d97b46/prizebg.png') no-repeat;
            background-size: 1.386667rem 1.52rem; */
        }
        .prop-wrapper >div:last-child img{
            max-width: 60%;
            display: block;
            margin: 0 auto;
            max-height: 1.33333333rem;
        }
	.rules-div{ padding-bottom: 0.4rem; margin-top: 0rem;}
    .rules{
        /* font-size: 0.373333rem; */
        /* color: #666; */
        /* text-decoration: underline; */
    	/* display: inline-block; */
    }
    .mass{
		display: none;
	    width: 100%;
    	height: 1.066666666rem;
    	line-height: 1.066666666rem;
	    border-radius: 0.533333333rem;
	    font-size: 0.45333333333rem;
    	text-align: center;
    	color: #ff6633;
    	background-color: #fff;
    	position: relative;
    	margin-top: 0.352rem;
    }
    .mass:after{
		content: ' ';
	    position: absolute;
	    top: 0;
	    left: 0;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	    width: 100%;
	    height: 100%;
	    border: 1px solid #ccc;
	    border-radius: 1.066666666rem;
	    -webkit-transform-origin: 0 0;
	    transform-origin: 0 0;
    }
.rec-wrapper{ padding-bottom: 0.48rem; display:none}
.rec-work-ul{
    font-size: 0;
    overflow: scroll;
    padding: 0;
    margin: 0;
    white-space: nowrap;
}
.rec-work-list{
    display: inline-block;
    width: 2.5066666666rem;
    height: 2.5066666666rem;
    position: relative;
    margin-right: 0.05333333rem;
}
    .rec-work-list:last-child{ margin-right: 0;}
    .rec-work-list img{
        width: 100%;
        height: 100%;
    }
    .rec-work-list div{
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        background-image: linear-gradient(rgba(255,255,255,0) 60%, rgba(0,0,0,.55));
    }
    .rec-work-list .work-name, .rec-work-list .user-name{
        position: absolute;
        display: block;
        left: 4.9%;
        z-index: 999;
        max-width: 90.217%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .work-name{
        bottom: 0.53333333rem;
        color: #fff;
        font-size: 0.4rem;
    }
    .user-name {
        bottom: 0.106666666rem;
        color: rgba(255, 255, 255, .9);
        font-size: 0.27rem;
    }
.rank-container{
    position: relative;
    /* border-bottom: 1px solid #ddd; */
}
.rank-title{
    color: #666;
    display: flex;
    width: 9.466667rem;
	background-color: #fff;
	height: 1.173333rem;
    overflow: hidden;
    margin: 0 auto;
    border-bottom: 1px solid #EEEEEE;
    border-top-left-radius: 0.21333333333333335rem;
    border-top-right-radius: 0.21333333333333335rem;
}
    .rank-title-wrapper{
        display: -webkit-box;
	    font-size: 0.4266666rem;
    	height: 1.173333rem;
    	line-height: 1.173333rem;
    	justify-content: center;
    	float: left;
    	width: 50%;
        border-bottom: 1px solid #ddd;
    }
    .rank-title-wrapper >div{
        width: 100%;
        color: #121212;
    	text-align: center;
    }
    .title-active{
        position: relative;
        color: #FF5046;

    }
    .title-active>div {
        color: #FF5046;
    }
    .com-processing {
        width: 2.16rem;
        color: #fff;
        font-size: .32rem;
        height: .64rem;
        padding-left: .346667rem;
        padding-top: .053333rem;
        box-sizing: border-box;
        margin-left: .533333rem;
        margin-bottom: .266667rem;
        background: url('//cbshowhot.cdn.changbaimg.com/-/d12dc9f8b8188b07/ing.png') no-repeat;;
        background-size: 100% 100%;
    }
    .com-ending {
        padding-left: .213333rem;
        background: url('//cbshowhot.cdn.changbaimg.com/-/30880e83162e4849/end.png') no-repeat;;
        background-size: 100% 100%;
    }
    .title-active::after {
        position: absolute;
        content: '';
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: 0;
        width: .64rem;
        height: .08rem;
        border-radius: .04rem;
        background: #FF5046;
        /* border-bottom: 0.066666666rem solid #ff5046; */

    }


#ranklist-wrapper{
    width: 9.466667rem;
    height: 100%;
}


#ranklist-wrapper > ul {
    /* position: absolute;  */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 9.466667rem;
    margin: 0 .266667rem;
    margin-bottom: .213333rem;
    /* height: 100%; */
    border-bottom-left-radius: 0.21333333333333335rem;
    border-bottom-right-radius: 0.21333333333333335rem;
    padding-bottom: 1.2rem;
    /* padding-bottom: calc(0.2rem + constant(safe-area-inset-bottom)*3); */
    /* padding-bottom: calc(0.2rem + env(safe-area-inset-bottom)*3); */
    background-color: #fff;
}
#ulTopWrapper{ display: none;}
    .list-block{
        height: 2.16rem;
        /* padding: 0 0 0 0.1rem; */
        -webkit-box-sizing: border-box;
    	box-sizing: border-box;
        overflow: hidden;

    }
    .list-block >*{ display: inline-block; vertical-align: top; }

.list-block:after {
    content: ' ';
    width: 6.6rem;
    height: .026667rem;
    background: #EEEEEE;
    transform: scaleY(0.5);
    float: right;
    margin-top: 0.39rem;
    box-sizing: border-box;
    /* border-bottom: 1px solid #ddd; */
}
.list-block:last-child::after {
    width: 0;
    height: 0;
}
    .self-block{ background-color: #f8f8f8}

.self-block:after {
    display: none;
}
    .item-place{
        display: inline-block;
        /* font-style: italic; */
        font-size: .32rem;
        line-height: .426667rem;
        color: #AAAAAA;
        margin-left: .533333rem;
        width: .426667rem;
        height: .426667rem;
        border-radius: .053333rem;
        background: #F5F5F5;
        text-align: center;
        /* padding: 0 .073333rem; */
        /* padding: 0 0.146666666rem 0 0; */
        margin-top: .906667rem;
        /* -webkit-transform: scaleX(0.8); */
        /* transform: scaleX(0.8); */

    }
    .first-item {

        color: #fff;
        background: url('//cbshowhot.cdn.changbaimg.com/-/5cb1c18bb25acfae/first.png') no-repeat;
        background-size: 100% 100%;
    }
    .second-item {

        color: #fff;
        background: url('//cbshowhot.cdn.changbaimg.com/-/e726ae657c467e15/second.png') no-repeat;
        background-size: 100% 100%;
    }
    .third-item {
        color: #fff;
        background: url('//cbshowhot.cdn.changbaimg.com/-/163f7a12574433a5/third.png') no-repeat;
        background-size: 100% 100%;
    }
    .item-photo{
        width: 1.333333rem;
        height: 1.333333rem;
        -webkit-border-radius: 0.7rem;
        border-radius: 0.7rem;
        margin-left: .32rem;
        margin-right: .266667rem;
        margin-top: .426667rem;
    }
    .place-overflow{
        background: url("//comp.cdn.changbaimg.com/images/competition/add_icon.png") right top no-repeat;
        background-size: 0.2rem;
    }
    .item-work-info{
        display: inline-block;
        vertical-align: top;
    }
    .item-work-info span{
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    /*黄氏响声丸*/
    .huang-work-info{
        display: inline-block;
        vertical-align: top;
    }
    .huang-work-info span{
        display: block;
        text-overflow: ellipsis;
        overflow: hidden;
        /*white-space: nowrap;*/
    }
/*    .huang_wrapper{
        width:6.5rem;
    }*/
    .huang_type{
        position: absolute;
        left:6rem;
        width:2.1rem;
        float:left;
        color:#ff5046;
        font-size:0.38rem;
        line-height: 0.54rem;
        margin-top: 0.36rem;
        margin-left:0.1rem;
        white-space: pre-wrap;
    }
    .huang_name{
        float:left;
        width:3.4rem;
        line-height: 0.54rem;
        font-size: 0.42666rem;
        color: #333;
        margin-bottom: 0.07rem;
        margin-top: 0.36rem;
        white-space: nowrap;
    }
    .Hsong{
        width:3.4rem;
        white-space: nowrap;
    }
    .username {
        line-height: 0.54rem;
        font-size: .426667rem;
        color: #121212;
        margin-bottom: .133333rem;
        margin-top: .533333rem;
    }
    .songname {
        line-height: 0.42rem;
        font-size: .32rem;
        color: #AAAAAA;
    }

.username-withcustomfield {
    margin-bottom: 0.029333333rem;
    margin-top: 0.23466666rem;
}
    .custom-field {
        font-size: 0.32rem;
        color: #ff5046;
    }
    .item-place-change{
        margin-top: .853333rem;
        margin-right: .506667rem;
        text-align: center;
        max-width: 1.3rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
	    font-size: .373333rem;
	    color: #AAAAAA;
	    float: right;
    }
    .up-arrow{
        background: url("//comp.cdn.changbaimg.com/images/competition/up_arrow.png") no-repeat left center;
        background-size: 0.4rem;
    }
    .down-arrow{
        color: #62c47a;
        background: url("//comp.cdn.changbaimg.com/images/competition/down_arrow.png") no-repeat left center;
        background-size: 0.4rem;
    }
    .empty-div{
		margin: 0.88rem auto;
    	text-align: center;
    }
    .empty-div img{ width: 4.4rem;}
	.empty-block{
	    width: 100%;
	    height: 5.866666rem;
	    padding-top: 2.346666666rem;
	    text-align: center;
	    font-size: 0.352rem;
	    color: #666;
	}


/* ----------------------fix----------------------------- */


.more-btn,.footer-wrapper {
    position: fixed;
    z-index: 2222;
    bottom: .333333rem;
    /*--------------------------------- */
    left: 50%;
    transform: translateX(-50%);
    /*--------------------------------- */


    /* width: 100%; */
    height: 1.173333rem;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    padding-left: .533333rem;
    padding-right: .533333rem;
    line-height: 1.173333rem;
    text-align: center;
    background: linear-gradient(45deg, #FF4460, #FF5046);
    /* border-top: 1px solid #ff5046; */
    box-shadow: 0 .106667rem .213333rem rgba(255, 0, 0, 0.3);
    color: #fff;
    border-radius: .666667rem;
    font-size: .426667rem;
}

.more-btn {
    background: #fff!important;
    left: 1.066667rem!important;
    border: 1px solid #FF3A66;
    color: #FF3A66;
}

.add-class {
    width: 3.733333rem!important;
    height: 1.173333rem!important;
    line-height: 1.173333rem!important;
    font-size: .426667rem!important;
    border-radius: 1.04rem!important;
    padding-left: 0!important;
    padding-right: 0!important;
    -webkit-transform: translateX(0)!important;
    -ms-transform: translateX(0)!important;
    transform: translateX(0)!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}


.btn-class {
    left: 5.066667rem!important;
    background-image: linear-gradient(-45deg,#FF3A66 0,#FF5046 100%);
}

.btn-show {
    display: block !important;
}

.center-btn {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

#public {
    display: none;
}

/* ----------------------fix----------------------------- */




#js_notifyApp{
     position: fixed;
    z-index: 2222;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.17333333rem;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    padding: 0;
    padding-bottom: calc(constant(safe-area-inset-bottom)*3);
    padding-bottom: calc(env(safe-area-inset-bottom)*3);
    line-height: 1.17333333rem;
    text-align: center;
    background: #ff5046;
    border-top: 1px solid #ff5046;
    color: #fff;
    font-size: 0.48rem;
}
#js_notifyApp.disabled{
    display: none;
    background: #ccc;
    border-top: 1px solid #ccc;
}

    #footer.disabled {
        display: none;
        background: #ccc;
        border-top: 1px solid #ccc;
    }

.rule-wrapper{
    width: 100%;
    overflow: auto;
    font-size: 0.366666666rem;
    color: #666;
    padding: 0.26666666rem;
    box-sizing: border-box;
}
.rule-wrapper h3{
	line-height: 0.733333333rem;
    margin-top: 0.29333333rem;
}
.rule-wrapper p{
	line-height: 0.586666666rem;
}
.item-work-info{max-width: 4.7rem}

.confirm-wrapper{
	display:none;
	position: fixed;
    top: 30%;
    left: 50%;
    width: 7.4666666rem;
    border-radius: 0.26666666rem;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-size: 0.34666666rem;
    background-color: #fff;
    z-index: 10000;
}
.confirm-title{
	padding: 0.5333333333rem;
    line-height: 0.426666666rem;
    color: #000;
	font-weight: bolder;
    text-align: center;
    margin: 0;
    font-size: 0.4rem;
}
.line-hirizon{
	height: 1px;
    background-color: #dfdfe3;
}
.confirm-op{
	display: -webkit-box;
}
#got-it{
	-webkit-box-flex: 1;
    display: block;
    line-height: 0.986666666rem;
    border: none;
    font-size: 0.34666666rem;
    background-color: transparent;
    color: #DC4D3E;
    text-align: center;
}
.line-vertical{
	width: 1px;
    height: 0.986666666rem;
    background-color: #dfdfe3;
}
.go-record{
	-webkit-box-flex: 1;
    display: block;
    line-height: 0.986666666rem;
    border: none;
    font-size: 0.3466666666rem;
    background-color: transparent;
    color: #DC4D3E;
    text-align: center;
	text-decoration: none;
}
.confirm-mask{
	display:none;
	width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background: rgba(0,0,0,0.5);
	z-index: 9999;
}

#mask {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2147483647;
}

.bubble-container {
    position: relative;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    width: 46.5%;
    height: 2.1875rem;
    margin: 1.125rem auto 0 auto;
    border-radius: 50%;
    line-height: 0.625rem;
    font-size: 0.4375rem;
    color: #fff;
    text-align: center;
    background-color: #ff5046;
}

.step {
    position: absolute;
    top: 0.03125rem;
    left: -0.0625rem;
    width: 0.78125rem;
    height: 0.78125rem;
    border-radius: 50%;
    line-height: 0.78125rem;
    text-align: center;
    color: #ff5046;
    font-weight: bold;
    font-family: 'Helvetica Neue' cursive;
    background-color: #fff;
}
.step-img {
    position: absolute;
    width: 2.28125rem;
    right: -0.90625rem;
    top: -0.28125rem;
}
/*蒙牛未来星比赛信息 jiang*/
.futureStarCompetitionStatic{
	color: #000;
	width: 93%;
	margin: 0 auto;
	font-size: 0.373333rem;
	line-height: 0.48rem;
	padding-bottom:0.4rem;
	height: 0.7rem;
	display: none;
}
.peoplenum{
	width: 50%;
	float: left;
}
.worknum{
	width: 50%;
	float: left;
}
.clearBoth{
	clear: both;
}

#audioContainer {
    display: none;
}

#playBtn {
    display: block;
    height: 0.9rem;
    line-height: 0.9rem;
    padding: 0 0.5rem;
    font-size: 0.4rem;
    color: #fff;
    background-color: #ff5046;
    border: none;
    border-radius: 0.1rem;
    margin: 0 auto 0.2rem;
}

#playImg {
    width: 0.6rem;
    vertical-align: top;
    margin-left: 0.1rem;
    margin-top: 0.15rem;
}
.xunxin_wrapper{
width:6.5rem;
}
.xunxian_type{
    width:2rem;
    float:left;
    color:#ff5046;
    font-size:0.38rem;
    line-height: 0.54rem;
    margin-top: 0.36rem;
    margin-left:0.1rem;
}
.xunxian_name{
    float:left;
    width:3.4rem;
    line-height: 0.54rem;
        font-size: 0.42666rem;
        color: #333;
        margin-bottom: 0.07rem;
        margin-top: 0.36rem;
}
.newSingerBtn{
    display:inline-block;
    width: 2.7333333rem;
    height: 1rem;
    background: #ff5046;
    color: #fff;
    line-height: 1rem;
    text-align: center;
    font-size: 0.36rem;
    float: left;
    margin-left:1rem;
}
.newSingerWrapper{
    margin-bottom:0.166667rem;
    margin-left:0.6rem;
    display:none;
}
.newSingertxt{
    font-size:0.32rem;
    font-weight:500;
    color:#ff5046;
    width:93%;
    line-height:1.2rem;
    margin: 0 auto;
    display:none;
}

.rotate-cd {
    -webkit-animation: musicCd 5s linear infinite;
    animation: musicCd 5s linear infinite;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
}
@-webkit-keyframes musicCd {
    0% {
        -webkit-transform: rotateZ(0);
        transform: rotateZ(0);
    }
    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}
@keyframes musicCd {
    0% {
        -webkit-transform: rotateZ(0);
        transform: rotateZ(0);
    }
    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}


.progress {
  width: 93%;
  min-height: 2.3rem;
  margin: auto;
  margin-bottom: 0.3333333333333333rem;
  background-color: #faeace;
  padding: 0.36rem 0.26666667rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.progress-title {
  margin-bottom: 0.5333rem;
  font-size: 0.37333333rem;
  color: #ff7800;
  text-align: center;
  font-weight: 600;
}
.progress-bar {
  position: relative;
}
.bar-min,
.bar-max {
  position: absolute;
  top: 0.4rem;
  font-size: 0.32rem;
  color: #965822;
}
.bar-min {
  left: 0;
}
.bar-max {
  right: 0;
}
.bar-default {
  position: relative;
  width: 100%;
  height: 0.26666667rem;
  background-color: #e7d0a8;
  border-radius: 0.13333333rem;
}
.bar-default .bar-current {
  width: 0%;
  height: inherit;
  background-color: #ff7800;
  border-radius: inherit;
  -webkit-transition: all 2s;
  transition: all 2s;
  /* // -webkit-animation: progressplay 2s linear both; */
  /* //         animation: progressplay 2s linear both; */
}
.bar-default::before {
  position: absolute;
  right: 0.12rem;
  top: -0.32rem;
  display: block;
  content: '';
  width: 0.06666667rem;
  height: 0.49333333rem;
  background-color: #ff0000;
}
.bar-default::after {
  position: absolute;
  top: -0.28rem;
  right: -0.08rem;
  display: block;
  content: '';
  width: 0.26666667rem;
  height: 0.18666667rem;
  background-color: #ff0000;
}
.flags1-wrap {
  position: absolute;
  top: 0;
  left: 33.3333333%;
}
.flags1 {
  font-size: 0.32rem;
  color: #965822;
}
.flags1::before {
  position: absolute;
  right: 0.12rem;
  top: -0.32rem;
  display: block;
  content: '';
  width: 0.06666667rem;
  height: 0.49333333rem;
  background-color: #ffdb11;
}
.flags1::after {
  position: absolute;
  top: -0.28rem;
  right: -0.08rem;
  display: block;
  content: '';
  width: 0.26666667rem;
  height: 0.18666667rem;
  background-color: #ffdb11;
}
.bar-third {
  position: absolute;
  left: -0.6rem;
  bottom: -0.77333333rem;
  font-size: 0.32rem;
  color: #965822;
}
.flags2-wrap {
  position: absolute;
  top: 0;
  left: 66.6666666%;
}
.flags2 {
  font-size: 0.32rem;
  color: #965822;
}
.flags2::before {
  position: absolute;
  right: 0.12rem;
  top: -0.32rem;
  display: block;
  content: '';
  width: 0.06666667rem;
  height: 0.49333333rem;
  background-color: #ff9c00;
}
.flags2::after {
  position: absolute;
  top: -0.28rem;
  right: -0.08rem;
  display: block;
  content: '';
  width: 0.26666667rem;
  height: 0.18666667rem;
  background-color: #ff9c00;
}
.bar-twoThirds {
  position: absolute;
  bottom: -0.77333333rem;
  left: -0.66666667rem;
  font-size: 0.32rem;
  color: #965822;
}

.play-btn {
    position: relative;
}
.play-btn::after {
    position: absolute;
    content: '';
    top: 50%;
    width: .64rem;
    height: .746667rem;
    background: url(//aliimg.changba.com/cache/photo/875588178_100_100.jpg) no-repeat;
    background-size: 100% 100%;
    z-index: 1;
}