.recommend{
    margin: 0 auto;
}
.title{
    font-size: 22px;
    color: #000;
    height: 40px;
    font-weight: 500;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 50px;
    padding-bottom: 24px;
}



.menu{
    text-align: center;
    background-color: #f8f8f8;
    height: 50px;
}
.menu li{
    font-size: 12px;
    color: #333;
    font-weight: 400;
    display: inline-block;
    margin: 0 24px;
}
.menu .active{
    color: #31c27c;
}
.menu li:hover{
    color: #31c27c;
}




.icon ul{
    overflow: hidden;
    width: 898px;
    margin: 0 auto;
    background-color: #fdfdfd;
}
.icon li{
    width: 170px;
    float: left;
    margin-right: 12px;
}
.icon li:last-child{
    margin-right: 0;
}
.icon img{
width: 100%;
height: 170px;
margin-bottom: 10px;
}
.icon p{
font-size: 10px;
}
.icon p:nth-child(3){
color: #999;
font-size: 10px;
}
.icon p:nth-child(2){
    width: 100%;
    overflow: hidden;
    /* //单行文本溢出显示省略号 */
    text-overflow: ellipsis; 
    /* //单行文本不会换行 */
    white-space: nowrap; 
}





.more ul{
    text-align: center;
    margin-top: 40px;
}
.more li{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.1);
    display: inline-block;
    margin-left: 17px;
}
.more .active{
    background-color: rgba(0,0,0,.3);
}
.more li:hover{
    background-color: rgba(0,0,0,.3);
}


/* .icon .imgs{
    width: 100%;
    height: 170px;
    background-image: url('https://qpic.y.qq.com/music_cover/cpM9UGMv7jGHdOR7vCoMEc6Nib1d7UhUZVSfCFyJdZR7W0UYDh6P7sA/300?n=1');
    background-size: 100%;
    padding: calc((100% - 50px)/2);
    box-sizing: border-box;
    transition: all ease 1s;
}
.icon .imgs .play_btn{
    background: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    opacity: 0;
    transition: all ease 0.5s;
}
.icon .imgs:hover{
    background-size: 110%;
}
.icon .imgs:hover .play_btn{
    opacity: 1;
}
.icon .imgs .play_btn i{
    font-size: 20px;
    line-height: 50px;
} */