#index .index a, #audio .audio a, #bgsound .audio_list a, #content .content a,
.header .head-nav .nav-box li a:hover {
    color: #34ad2a;
}



.b-box .audio-box {
    position: relative;
    float: left;
  /*  overflow: hidden;*/
    margin-top: 3px;
    margin-right: 16px;
    margin-bottom: 16px;
    width: 288px;
    height: 138px;
    background: #fff;
    box-shadow: 0 0 9px rgba(0,0,0,.1)
}

    .b-box .audio-box .audios {
        display: inline-block;
        width: 288px;
        height: 96px;
        background: #fffff
    }

    .b-box .audio-box .icon-bofang {
        float: left;
        display: block;
        margin-top: 20px;
        margin-left: 27px;
        width: 51px;
        height: 51px;
        background: url(../images/audio.png) -14px -16px no-repeat;
        cursor: pointer
    }

        .b-box .audio-box .icon-bofang.on {
            background-position: -85px -16px
        }

    .b-box .audio-box .title {
        float: left;
        display: block;
       /* overflow: hidden;*/
        margin-top: 20px;
        margin-left: 22px;
        width: 165px;
        height: 50px;
        text-align: left;
        text-overflow: ellipsis;
       /* white-space: nowrap;*/
        font-size: 14px;
      /*  line-height: 50px*/
    }

    .b-box .audio-box:hover .title {
        height: 31px;
        line-height: 19px
    }

    .b-box .audio-box .collect {
        float: left;
        display: none;
        margin-left: 10px;
        width: 29px;
        height: 29px;
        border: 1px solid #e5e5e5;
        border-radius: 2px;
        background: url(../images/video.png) -12px 5px no-repeat #fff;
        cursor: pointer
    }

    .b-box .audio-box:hover .collect {
        display: block
    }

    .b-box .audio-box .c-chose {
        background: url(../images/video.png) -13px -37px no-repeat #fff
    }

    .b-box .audio-box .down {
        float: left;
        display: none;
        margin-left: 50%;
        width: 76px;
        height: 31px;
        border-radius: 2px;
        background: #007aff;
        color: #fff;
        font-size: 14px;
        line-height: 31px;
        cursor: pointer
    }

    .b-box .audio-box:hover .down {
        display: block
    }

    .b-box .audio-box .down:hover {
        background: #1b87fd
    }

    .b-box .audio-box .down i {
        display: inline-block;
        margin-right: 3px;
        width: 20px;
        height: 30px;
        background: url(../images/video.png) -17px -77px no-repeat;
        vertical-align: -9px
    }

    .b-box .audio-box .times {
        display: inline-block;
        width: 288px;
        height: 30px
    }

    .b-box .audio-box .info {
        float: left;
        display: block;
        width: 207px;
        height: 100px 
        
       
    }


        .b-box .audio-box .info .category {
            position:absolute;
            font-size: 12px;
            top:60%;
            
        }

        .b-box .audio-box  .category {
            position: absolute;
            font-size: 12px;
            top: 55%;
            margin-left:10%;
        }



    .b-box .audio-box .star-time {
        float: left;
        display: block;
        width: 64px;
        height: 23px;
        color: #696969;
        text-align: right;
        font-size: 14px;
        line-height: 13px
    }

    .b-box .audio-box .time-bar {
        position: relative;
        z-index: 1;
        float: left;
        display: block;
        overflow: hidden;
        width: 164px;
        height: 24px;
        margin-top: -5px;
        background: #bfbfbf;
        cursor: pointer
    }

        .b-box .audio-box .time-bar .progressBar {
            position: absolute;
            left: 0;
            z-index: 3;
            width: 100%;
            height: 100%;
            background: url(../images/audio.png) no-repeat -180px -30px
        }

        .b-box .audio-box .time-bar .move-color {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            display: block;
            width: 0;
            height: 24px;
            height: 100%;
            background-color: #658ae4
        }

        .b-box .audio-box .time-bar .timeTip {
            position: absolute;
            top: 5px;
            left: 0;
            z-index: 3;
            width: 40px;
            color: #0099e5;
            text-align: center;
            font-size: 12px
        }

    .b-box .audio-box .end-time {
        float: left;
        display: block;
        width: 40px;
        color: #696969;
        font-size: 14px;
        line-height: 13px
    }

.middle .m-l .guangp {
    position: relative;
    display: inline-block;
    padding-top: 80px;
    padding-bottom: 70px;
    width: 355px;
    height: 321px;
    text-align: center
}

    .middle .m-l .guangp .guxz {
        display: inline-block;
        width: 359px;
        height: 359px;
        background: url(../images/2.png)
    }

    .middle .m-l .guangp .dy {
        position: absolute;
        top: 71px;
        right: -109px;
        width: 85px;
        height: 82px;
        background: url(../images/1.png) no-repeat -356px -18px
    }

    .middle .m-l .guangp .xy {
        position: absolute;
        top: 71px;
        right: -108px;
        z-index: 3;
        width: 85px;
        height: 85px;
        background: url(../images/1.png) no-repeat -450px -18px
    }

    .middle .m-l .guangp .gp {
        position: absolute;
        top: 115px;
        right: -70px;
        width: 173px;
        height: 272px;
        background: url(../images/1.png) no-repeat -350px -138px;
        transition: all .6s ease-in-out;
        transform: rotate(-32deg);
        transform-origin: right top
    }

    .middle .m-l .guangp .imgs {
        transition: all .6s ease-in-out;
        transform: rotate(-32deg);
        transform-origin: right top
    }

    .middle .m-l .guangp .gp.skewing {
        transform: rotate(0)
    }

    .middle .m-l .guangp .xuanz {
        animation: circleRoate 200s;
        animation-timing-function: linear
    }

.middle .m-l .audio-box {
    margin-bottom: 35px;
    width: 780px;
    height: 100px;
    border-bottom: 1px solid #c9c9c9;
    background: #fff
}

    .middle .m-l .audio-box .icon-bofang {
        float: left;
        display: block;
        margin-left: 40px;
        width: 51px;
        height: 51px;
        background: url(../images/audio.png) -14px -16px no-repeat;
        cursor: pointer
    }

        .middle .m-l .audio-box .icon-bofang.on {
            background-position: -85px -16px
        }

    .middle .m-l .audio-box .times {
        display: inline-block;
        width: 288px;
        height: 30px
    }

    .middle .m-l .audio-box .info {
        float: left;
        display: block;
        width: 207px;
        height: 100px
    }

    .middle .m-l .audio-box .star-time {
        float: left;
        display: block;
        margin-left: 17px;
        width: 59px;
        height: 51px;
        color: #696969;
        text-align: center;
        font-size: 20px;
        line-height: 51px
    }

    .middle .m-l .audio-box .time-bar {
        position: relative;
        z-index: 1;
        float: left;
        display: block;
        overflow: hidden;
        margin-top: 5px;
        width: 527px;
        height: 41px;
        background: #bfbfbf;
        cursor: pointer
    }

        .middle .m-l .audio-box .time-bar .progressBar {
            position: absolute;
            left: 0;
            z-index: 3;
            width: 100%;
            height: 100%;
            background: url(../images/audio.png) no-repeat -16px -83px
        }

        .middle .m-l .audio-box .time-bar .move-color {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            display: block;
            width: 0;
            height: 24px;
            height: 100%;
            background-color: #658ae4
        }

        .middle .m-l .audio-box .time-bar .timeTip {
            position: absolute;
            top: 5px;
            left: 0;
            z-index: 3;
            width: 40px;
            color: #0099e5;
            text-align: center;
            font-size: 12px
        }

    .middle .m-l .audio-box .end-time {
        float: left;
        display: block;
        width: 52px;
        height: 51px;
        color: #696969;
        font-size: 20px;
        line-height: 51px
    }

@keyframes circleRoate {
    from {
        transform: rotate(0) infinite
    }

    to {
        transform: rotate(7600deg)
    }
}

.audio-width {
    height: 166px !important
}

.audio-box .explain {
    display: block;
    padding: 0 30px;
    background: #fff
}

.audio-box .p-title {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 44px;
    border-bottom: 1px solid #eceff1;
    color: #252525;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    line-height: 44px
}

.audio-box .coll {
    display: block;
    width: 100%;
    height: 44px;
    color: #838383;
    font-size: 14px;
    font-family: Arial;
    line-height: 44px
}

.audio-box .down-num {
    float: left;
    width: 45%;
    text-align: left
}

@media screen and (max-width:1300px) {
    .b-box .audio-box {
        margin-right: 13px;
        width: 240px
    }

        .b-box .audio-box .title {
            width: 115px;
            font-size: 13px
        }

        .b-box .audio-box .info {
            width: 150px
        }

        .b-box .audio-box .time-bar {
            width: 118px
        }

    .middle .m-l .audio-box {
        width: 650px
    }

        .middle .m-l .audio-box .time-bar {
            width: 448px
        }

        .middle .m-l .audio-box .icon-bofang {
            margin-left: 3px
        }

        .middle .m-l .audio-box .end-time {
            margin-left: 11px;
            font-size: 17px
        }

        .middle .m-l .audio-box .star-time {
            margin-left: 10px;
            font-size: 17px
        }
}