@charset "utf-8";
.banner{
    width: 100%;
    /*height:390px;*/
    background: url("") no-repeat center;
    background-size: cover;
    box-sizing: border-box;
}
.info{
    max-width:1122px;
    width: 100%;
    margin:0 auto;
    overflow: hidden;
}
.banner-img{
    float: left;
    margin:40px 30px 40px 0;
}
.banner-img img{
    width: 225px;
    height:300px;
    border:5px solid #fff;
    border-radius: 10px;
}
.banner-info{
    color:#fff;
    margin:40px 0 0 0;
    overflow: hidden;
}
.banner-info h2{
    margin:10px 0;
}
.banner-info h2 em{
    font-size: 18px;
    font-weight: bold;
}
.banner-info h2 span{
    display: inline-block;
    border:1px solid #fff;
    padding:2px 5px;
    font-size: 12px;
    margin:0 10px;
}

.banner-num p{
    display: inline-block;

    text-align: center;
    line-height: 20px;
    font-size: 14px;
    margin:10px 0;
}
.banner-num p:not(:first-child){
    border-left:1px solid #fff;
    padding:0 10px;
}
.banner-num p em{
    display: block;
}
.banner-info > p{
    line-height: 22px;
    font-size: 12px;
    margin:10px 0;
}
.concern{
    display: inline-block;
    width: 130px;
    line-height: 48px;
    text-align: center;
    background-color: #f25d8e;
    border-radius: 10px;
    font-size: 18px;
    margin-right:20px;
    margin-bottom:20px;
}
.concern i{
    display: inline-block;
    width: 30px;
    height:24px;
    background: url("../images/guanzhu.png") no-repeat center;
    background-size: 100%;
    vertical-align: middle;
    margin-right: 5px;
}
.share{
    display: inline-block;
    height:45px;
    line-height: 45px;
    border-radius: 20px;
    background-color: #fff;
    padding:0 10px;
    margin-bottom:20px;
}
.share a{
    display: inline-block;
    width: 32px;
    height:32px;
    vertical-align: middle;
    background: url("../images/share.png") no-repeat 0 0;
}
.share a.qq{
    background-position: -44px 0;
}
.share a.tieba{
    background-position: -85px 0;
}
.share a.weixin{
    background-position: -127px 0;
}


.left{
    float: left;
    width: 70%;
}
.right{
    float: right;
    width: 24%;
}
.left-title{
    width: 100%;
    height:40px;
    background-color: #eceef1;
    margin-top:30px;
}
.left-title h2{
    display: inline-block;
    width: 155px;
    text-align: center;
    line-height: 40px;
    margin-left: 10px;
    background-color: #fff;
    color:#1f1f1f;
    font-size: 16px;
    border-top:3px solid #fc6520;
}
.left-text{
    line-height: 24px;
    color:#1f1f1f;
    font-size: 12px;
    padding:10px;
}
.left-list li{
    line-height: 55px;
    padding:0 10px;
    border-bottom: 1px dashed #ccc;
    font-size: 14px;
    color:#1f1f1f;
}
.left-list li span{
    margin:0 10px;
}
.left-list li .list-time{
    float: right;
}
.left-list li i{
    display: inline-block;
    width: 18px;
    height:18px;
    background: url("../images/play.png") no-repeat 0 0;
    vertical-align: middle;
}
.left-list li i.pause{
    background-position: 0 -20px;
}
/*分页*/
.pagination{
    text-align: center;
    margin:20px 0 10px 0;
}
.add-more{
    display: none;
}
.add-more a{
    display: block;
    width: 100%;
    line-height: 30px;
    border: 1px solid #fc6520;
    background-color: #fc6520;
    text-align: center;
    color: #fff;
    font-size: 12px;
    box-sizing: border-box;
    margin: 20px auto;
}
.pagination span{
    display: inline-block;
    font-size: 14px;
    color:#878787;
    padding:5px 10px;
    border-bottom: 1px solid #ccc;
}
.pagination span.active{
    background-color: #fc6520;
    color:#fff;
    border:none;
}
/*评论*/
.left-comment,.list-comment li{
    position: relative;
    margin:20px 0;
}
.comment-img{
    position:absolute;
    left: 0;top:0;
    width: 50px;
    height:50px;
}
.comment-img img{
    width: 100%;
    height:auto;
    border-radius: 100%;
    vertical-align: text-top;
    margin:0 10px;
}
.comment-edit{
    width: 100%;
    padding-left: 80px;
    height:50px;
    box-sizing: border-box;
}
.comment-edit textarea{
    width: 100%;
    height:100%;
    line-height: 50px;
    border:1px solid #dddddd;
    color:#a9a9a9;
    font-size: 14px;
    padding:0 10px;
    box-sizing: border-box;
}
.list-comment li{
    border-bottom:1px dashed #ccc;
    box-sizing: border-box;
    padding:0 5px;
}
.comment-info{
    width: 100%;
    padding-left: 80px;
    padding-bottom:10px;
    box-sizing: border-box;
}
.comment-info h3{
    color:#5b9cd8;
    font-size: 12px;
}
.comment-info p{
    color:#141414;
    font-size: 14px;
    margin:10px 0;
}
.comment-info div span{
    color:#878787;
    font-size: 12px;
}
.comment-info div a{
    color:#5b9cd8;
    font-size: 12px;
    float: right;
}
.comment-more a{
    display: block;
    width: 100%;
    line-height: 30px;
    border:1px solid #dddddd;
    background-color: #ededed;
    text-align: center;
    color:#141414;
    font-size: 12px;
    box-sizing: border-box;
    margin:20px auto;
}
.comment-more i{
    display: inline-block;
    width: 20px;
    height:16px;
    background: url("../images/sprite_wap.png") no-repeat -90px 2px;
    vertical-align: middle;
}
/*****音频列表右侧******/
.right-user{
    position: relative;
    margin-top:30px;
}
.right-Img{
    position: absolute;
    top:0;left:0;
    width:62px;
}
.right-Img img{
    width: 100%;
    border-radius: 100%;
    vertical-align: text-top;
}
.right-info{
    box-sizing: border-box;
    padding-left: 70px;
    position: relative;
}
.right-info a{
    position: absolute;
    right:0;
    top:0;
    width: 55px;
    text-align: center;
    line-height: 24px;
    color:#fc6520;
    font-size: 12px;
    border: 1px solid #fc6520;
}
.right-info h4{
    font-size: 16px;
    color:#1f1f1f;
}
.right-info div{
    margin:8px 0;
}
.right-info span,.right-info em{
    font-size: 12px;
    color:#1f1f1f;
}
.right-info p{
    font-size: 12px;
    color:#878787;
    line-height: 20px;
}
.right h2{
    font-size: 16px;
    color:#1f1f1f;
    font-weight: bold;
    margin-top:30px;
}
.right h2::before{
    content: "";
    display: inline-block;
    width: 5px;
    height:20px;
    background-color:#fc6520 ;
    vertical-align: middle;
    margin-right:5px;
}
.right-list li{
    margin-top:20px;
    padding:0 5px;
    box-sizing: border-box;
}
.right-logo{
    float:left;
    width: 80px;
    height:80px;
    position: relative;
}
.right-logo img{
    width: 100%;
}
.right-logo::before{
    content: "";
    width:96%;
    height:1px;
    background-color: #ccc;
    position: absolute;
    top:-3px;
    left:50%;
    margin-left: -48%;
}
.right-logo::after{
    content: "";
    width:90%;
    height:1px;
    background-color: #ccc;
    position: absolute;
    top:-6px;
    left:50%;
    margin-left: -45%;
}
.right-main{
    float:left;
    padding-left: 10px;
}
.right-main h4{
    font-size: 14px;
    color:#1f1f1f;
    margin:5px 0;
}
.right-main p{
    font-size: 12px;
    color:#878787;
    line-height: 22px;
}
.list-audio{
    display: none;
}


/************详情页*/
.detail{
    float: left;
    width: 74%;
    background: url("../images/detailBanner.png") no-repeat center;
    background-size: cover;
    height:400px;
    box-sizing: border-box;
    padding-left: 30px;
}
.detail-info{
    margin-top:40px;
    overflow: hidden;
}
.detail-info h2{
    font-size: 22px;
    color:#fff;
    font-weight: bold;
    margin:30px 0 20px 0;
}
.detail-info div span{
    display: inline-block;
    border: 1px solid #fff;
    padding: 2px 5px;
    font-size: 12px;
    margin: 0 10px;
    color:#fff;
}
.detail-info p{
    line-height: 20px;
    margin:10px 0;
    font-size: 12px;
    color:#fff;
    padding-left: 10px;
}
.detail-info p span,.episode div span{
    margin-right: 5px;
    line-height: 25px;
}
i.sprite{
    display: inline-block;
    width: 17px;
    height:17px;
    background: url("../images/sprite.png") no-repeat;
    vertical-align: middle;
    margin-right: 5px;
}
.wap-sprite i.sprite{
    background: url("../images/sprite_wap.png") no-repeat;
}
.play i.sprite{
    background-position: 0 0;
}
.favorite i.sprite{
    background-position: -32px 0;
}
.pl i.sprite{
    background-position: -72px 0;
}
.zan i.sprite{
    background-position: -112px 0;
}
.down i.sprite{
    background-position: -144px 0;
}
.fx i.sprite{
    background-position: -168px 0;
}
.kan i.sprite{
    background-position: -200px 0;
}
.wap-sprite .favorite i.sprite{
    background-position: 0 0;
}
.wap-sprite .fx i.sprite{
    background-position: -30px 0;
}
.wap-sprite .down i.sprite{
    background-position: -65px 0;
}
.episode{
    float: left;
    width: 26%;
    height:400px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.5);
    padding:0 20px;
    color:#fff;
    font-size: 12px;
}
.wap-sprite{
    display: none;
}
.episode h3{
    padding:20px 0;
}
.episode h4{
    display: none;
}
.episode-num{
    background-color: rgba(0,0,0,0.5);
    margin:20px 0;
}
.episode-num a{
    float: left;
    width: 25%;
    height:55px;
    text-align: center;
    line-height: 55px;
    background-color: #444444;
    color:#fff;
    font-size: 18px;
    border:1px solid #261a1c;
    box-sizing: border-box;
}
.episode-num a.on{
    background-color:#2878c8;
}
.my-audio{
    position: fixed;
    width: 100%;
    bottom:0;

}

/**********响应式**/
@media screen and (max-width:850px) {
    .banner-img{
        margin:20px 20px 10px 0;
    }
    .banner-img img{
        width: 125px;
        height:auto;
    }
    .banner-info{
        margin:20px 0 10px 0;
    }
    .banner-intro{
        display: none;
    }
    .banner-info h2 strong{
        display: block;
        margin-top:10px;
        overflow: hidden;
        height:22px;
    }
    .banner-info h2 span{
        margin:0 5px;
    }
    .banner-info h2 strong span:first-child{
        margin-left: 0;
    }
    .banner-num p{
        margin:0;
    }
    .left,.right{
        float:none;
        width: 100%;
    }
    .left-list li .list-time{
        display: none;
    }
    .pagination{
        display: none;
    }
    .comment-more{
        display: block;
    }
    .right-user{
        display: none;
    }
    .list-audio{
        position: fixed;
        width: 100%;
        bottom:0;
        display: block;
    }
    /***详情页***/
    .detail{
        height:auto;
        float: none;
        width: 100%;
        padding-left: 0;
    }
    .detail-info h2+div{
        display: none;
    }
    .detail-info{
        margin-top:0;
    }
    .episode{
        float: none;
        width: 100%;
        height:auto;
        background:#fff;
    }
    .wap-sprite{
        display: block;
        color:#444444;
    }
    .episode-num{
        overflow-x: scroll;
        overflow-y: hidden;
        width: 100%;
        height:80px;
        margin:0;
        background: #fff;
    }
    .episode-num a{
        float: none;
        width: 55px;
        border:1px solid #eceef1;
        background-color: #f6f7f9;
        border-radius: 5px;
        color:#444444;
        margin:5px;
        padding:10px;
    }
    .episode-num a.on{
        background-color: #f6f7f9;
        color:#fc6520;
    }
    .episode h3,.episode div:last-child{
        display: none;
    }
    .episode h4{
        display: block;
        margin:10px 0;
    }
    .episode h4 em{
        font-weight: bold;
        color:#444444;
        margin:5px;
    }
    .episode h4 i{
        float: right;
        color:#878787;
    }
}