@charset "utf-8";

#audio{ margin: 0 auto;}

#audio>.display{margin: 100px auto;}
#audio>.display .lists{ margin: 0 auto;}
#audio>.display .lists>ul{margin: 0 auto;}
#audio>.display .lists>ul>li{display: block;margin-bottom: 3%; background: #fff; position: relative; box-sizing: border-box;padding: 30px; transition: all .35s; }
#audio>.display .lists>ul>li>.title{display: block; padding: 10px 15px; border-bottom: 1px solid #eee; font-size: 1.8rem;font-weight: bold; color: #333;position: relative;}
#audio>.display .lists>ul>li>.title:after{position: absolute;z-index: 1; left: 0; top: 50%; width: 4px;height: 20px; background: #d70d19; content: '';transform: translateY(-50%);}
#audio>.display .lists>ul>li>.box{text-align: left; padding-top: 30px;}
#audio>.display .lists>ul>li>.box>.row{display: block;float: left; width: 19.2%; margin-right: 1%; margin-bottom:1%;cursor: pointer; box-sizing: border-box; padding: 10px 20px; border-radius: 30px; border: 1px solid #eee; transition: all .35s;}
#audio>.display .lists>ul>li>.box>.row:nth-child(5n){margin-right: 0;}
#audio>.display .lists>ul>li>.box>.row .tit{display: block;float:left;width: 70%; font-size: 1.4rem;overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
#audio>.display .lists>ul>li>.box>.row .play{display: block;float: right; text-align: right;}
#audio>.display .lists>ul>li>.box>.row .play>audio{display: none;}
#audio>.display .lists>ul>li>.box>.row .play>a{display: block;}
#audio>.display .lists>ul>li>.box>.row .play>a i{font-size: 2rem;}
#audio>.display .lists>ul>li>.box>.row:hover{border-color: #ccc;}
#audio>.display .lists>ul>li:hover{box-shadow: 4px 3px 20px rgba(0,0,0,.1);}
#audio>.display .lists>ul>li>.box>.row.active{border-color: #d70d19;}
#audio>.display .lists>ul>li>.box>.row.active .tit{color: #d70d19;}
#audio>.display .lists>ul>li>.box>.row.active .play>a{color: #d70d19;}

@media only screen and (max-width: 1280px){

    #audio>.display .lists>ul>li>.box>.row{width: 24.25%;}
    #audio>.display .lists>ul>li>.box>.row:nth-child(5n){margin-right: 1%;}
    #audio>.display .lists>ul>li>.box>.row:nth-child(4n){margin-right: 0;}



}


@media only screen and (max-width: 1080px){

    #audio>.display .lists>ul>li>.box>.row{width: 32.66%;}
    #audio>.display .lists>ul>li>.box>.row:nth-child(4n){margin-right: 1%;}
    #audio>.display .lists>ul>li>.box>.row:nth-child(3n){margin-right: 0;}

}


@media only screen and (max-width: 860px){

    #audio>.display .lists>ul>li>.box>.row{width: 48.5%; margin-right: 0!important;}
    #audio>.display .lists>ul>li>.box>.row:nth-child(even){float: right;}


}


@media only screen and (max-width: 640px){

    #audio>.display{margin: 0 auto;padding: 30px 0;}
    #audio>.display .lists>ul>li>.title{font-size: 1.6rem;}



}


@media only screen and (max-width: 520px){

    #audio>.display .lists>ul>li>.box>.row{width: 100%; float: none; margin-bottom: 10px;}
    #audio>.display .lists>ul>li>.box>.row:nth-child(even){float: none;}



}