/*左侧最外层*/
.article-left-list{
    /*左侧撑开，100% */
    position:relative;
    width:100%;
    min-height:1px;
    margin-left: 0.5rem;
    border-radius: 5px;
    /*边框颜色*/
    border: 0.05rem solid var(--main-two);
    /*边框阴影*/
    box-shadow:  0 0 1px var(--the-main);
    /*padding: 0 1rem;*/
}
.friend-all{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:1.5rem 1rem 0.5rem 1.5rem;
    border-bottom: 0.05rem dashed var(--main-two);
    padding-bottom: 0.8rem;
}
.friend-all .friend-all-left{
    /*margin-left: 25px;*/
    /*align-items: center;*/
    line-height: 1.5;
}
.friend-all .friend-all-left a{
    /*font-style: normal;*/
    margin-right: 1.5rem;
    margin-bottom: 5px;
    padding: 5px 12px;
    border-radius: 5px;
}
/*右侧 经典，流行*/
.display-right{
    /*line-height: 2.5;*/
}
.display-right a{
    /*font-style: normal;*/
    margin-left: 1rem;
    padding: 5px 12px;
    border-radius: 5px;

}
/* 全部，帅哥，美女 ，经典，流行 */
.friend-all .friend-all-left a:nth-child(3n+2),.display-right a:nth-child(2n){
    color: var(--dark-primary);
    border: 1px solid var(--dark-primary);
    /*渐变动画*/
transition: 0.3s;
}
.friend-all .friend-all-left a:nth-child(3n),.display-right a:nth-child(2n+1){
    color: var(--the-main);
    border: 1px solid var(--the-main);
    /*渐变动画*/
    transition: 0.3s;
}
.friend-all .friend-all-left a:nth-child(3n+1){
    color: var(--dark-success);
    border: 1px solid var(--success-two);
    /*渐变动画*/
    transition: 0.3s;
}
/*.friend-all .friend-all-left a:nth-child(4n+3){*/
    /*color: var(--dark-waring);*/
    /*border: 1px solid var(--drak-ylight);*/
    /*!*渐变动画*!*/
    /*transition: 0.3s;*/
/*}*/
.friend-all .friend-all-left a:nth-child(3n):hover,.friend-all-left .all-curent:nth-child(3n),.display-right a:nth-child(2n+1):hover,.display-right .all-curent:nth-child(2n+1){
     background: var(--the-main);
     padding: 5px 12px;
     border-radius: 5px;
     color: var(--light-best)!important;
     cursor: pointer;
    /*渐变动画*/
    transition: 0.3s;
 }

.friend-all .friend-all-left a:nth-child(3n+2):hover,.friend-all-left .all-curent:nth-child(3n+2),.display-right a:nth-child(2n):hover,.display-right .all-curent:nth-child(2n){
    background: var(--dark-primary);
    padding: 5px 12px;
    border-radius: 5px;
    color: var(--light-best)!important;
    cursor: pointer;
    /*渐变动画*/
    transition: 0.3s;
}
.friend-all .friend-all-left a:nth-child(3n+1):hover,.friend-all-left .all-curent:nth-child(3n+1){
    background: var(--dark-success);
    padding: 5px 12px;
    border-radius: 5px;
    color: var(--light-best)!important;
    cursor: pointer;
    /*渐变动画*/
    transition: 0.3s;
}
/*.friend-all .friend-all-left a:nth-child(3n+3):hover{*/
    /*background: var(--dark-waring);*/
    /*padding: 5px 12px;*/
    /*border-radius: 5px;*/
    /*color: var(--light-best)!important;*/
    /*cursor: pointer;*/
    /*!*渐变动画*!*/
    /*transition: 0.3s;*/
/*}*/

/*用户列表 带图片 开始*/
.city-friend-list{
    /*一行显示*/
    /*display: flex;*/
    /*居左显示*/
    /*justify-content: start;*/
    /*距离左侧距离*/
    margin:1rem 1.5rem ;
    /*边框颜色*/
    /*width: 97%;*/
    position: relative;
    border-bottom: 0.05rem solid var(--main-two);
    /*border-radius: 5px;*/
    /*边框阴影*/
    /*box-shadow:  0 0 1px var(--the-main);*/
    /*padding: 0.5rem;*/
}

/*图片大小控制 宽度 180px*/
.friend-img img{
    /*position: relative;*/
    float: left;
    max-width: 180px;
    max-height: 240px;
    border-radius: 5px;
}
.friend-img img:hover{
    opacity: 0.85;
}
/*图片上显示文字,,本站推荐*/
.friend-img .friend-best{
    background-color:var(--the-main);border-radius:5px;padding: 3px 5px;
    text-align: center;
    /*图片的位置*/
    top:-3px;
    right: 60px;
    /*display: block;*/
    position: relative;
    color:var(--light-best);
    font-size:0.8rem;
}
/*登录可见*/
.friend-look{
    background-color:var(--dark-primary);border-radius:5px;padding: 3px 5px;
    text-align: center;
    /*图片的位置*/
    top:215px;
    right:245px;
    /*display: block;*/
    position: relative;
    color:var(--light-best);
    font-size:0.8rem;
}
/*在线用户*/
.friend-online{
    background-color:var(--drak-red);border-radius:5px;padding: 3px 5px;
    text-align: center;
    /*图片的位置*/
    top:215px;
    right: 190px;
    /*display: block;*/
    position: relative;
    color:var(--light-best);
    font-size:0.8rem;
}
/*右侧用户名部分*/
.friend-img-right{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 1rem;
    /*和图片顶部平行显示*/
    margin-top: -1.4rem;
    /*margin-right: 1rem;*/
}
.friend-text{
    padding-left: 1rem;
    display: flex;
    margin-top: -1.2rem;
    /*margin-right: 1rem;*/
    /*左右字间距*/
    letter-spacing: 1px;
    /*上下间距*/
    line-height: 1.6;
    /*显示几行*/
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    /*(这里是行数 你可以控制你想在第几行末尾多余的显示省略号，之前的文本正常显示)*/
    -webkit-line-clamp:3;
}
.friend-img-right .friend-name{
    color: var(--the-main);
    font-size: 1.2rem;
    /*font-weight: 600;*/
}
/*聊天  撩*/
.chat-friend{
    border: 1px solid var(--dark-success);
    border-radius: 8px;
    padding: 5px 12px;
    color: var(--dark-success);
    /*渐变效果*/
    transition: 0.3s;
    margin-left: 1rem;
}
/*置顶*/
.fiend-top{
    background: var(--the-main);
    border-radius: 8px;
    padding: 5px 12px;
    cursor: pointer;
}
.chat-friend:hover{
    color: var(--light-best);
    background: var(--success-two);
    cursor: pointer;
    /*渐变效果*/
    transition: 0.3s;
}
/*用户的年龄，地区等信息*/
.friend-age-city{
    display: flex;
    padding-left: 1rem;
    margin-top: -0.5rem;
}
.friend-age-city span{
    margin-right: 1rem;
    border-right: 1px solid var(--the-main);
    line-height: 15px;
    padding-right: 1rem;
}
/*最后一个竖线没有*/
.friend-age-city span:last-child{
    border-right: 0 solid var(--the-main);
}
.friend-age-city span i{
    font-style: normal;
    color: var(--the-main);
}
/*积分，爱币*/
.friend-lovebi{
    display: flex;
   padding: 0.5rem 1rem;

}
.friend-lovebi span{
    margin-right: 0.5rem;
}
.friend-lovebi img{
    margin-right: 2rem;
}
/*个性标签*/
.friend-tag-label{
    display: block;
    align-items: center;
    /*距离顶部*/
    margin-top: 0.5rem;
}
.friend-tag-label span{
    padding-left: 1rem;
}
.friend-tag-label a{
    font-size: 0.9rem;
}
/*打赏，加好友*/
.fiend-list-add{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.fiend-list-add span{
    margin:0.5rem 0rem 0.5rem 1rem;
    /*color: var(--the-main);*/
    border-bottom: 1px solid transparent;


}
.fiend-list-add span:hover{
    border-bottom: 1px solid var(--the-main);
    cursor: pointer;
    color: var(--the-main);
}
/*竖线*/
.fiend-list-add i{
    border: 1px solid var(--the-main);
    line-height: 15px;
    height: 15px;
    margin-left: 1rem;
}
/*用户列表 带图 结束*/


/*媒体查询 开始*/
/*0-480手机*/
/*手机 隐藏右侧用户列表信息 */
@media only screen and (max-width:480px) {
    .friend-all .friend-all-left a{
        /*font-style: normal;*/
        display: inline-block;
        margin-bottom: 0.5rem;
        margin-right: 0.1rem;
        padding: 5px 8px;
    }
    .display-right{
        display: none;
    }
}
/*480-960平板，手机横屏*/
/*手机平板 隐藏右侧用户列表信息 */
@media only screen and (min-width: 480px) and (max-width: 960px) {
    .friend-all .friend-all-left a{
        /*font-style: normal;*/
        display: inline-block;
        margin-bottom: 0.5rem;
        margin-right: 0.1rem;
        padding: 5px 8px;
    }
    .display-right{
        display: none;
    }
}
/*960PC屏幕*/
@media only screen and (min-width:960px) {

}
/*媒体查询 结束*/