*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.float{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.514);
    position: fixed;
    top: 0;
    z-index:1000;
}

.float-change-tel{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.514);
    position: fixed;
    top: 0;
    z-index:1000;
}

.float-center{
    width: 340px;
    height: 290px;
    border-radius: 8px;
    background-color: #f2f2f2;
    margin: 0 auto;
    margin-top: 60px;
}

.flost{
    width: 340px;
    height: 290px;
    position: absolute;
}

.return {
    width: 24px;
    height: 24px;
    border-radius: 100%;
    border: 1px solid red;
    position: absolute;
    right: 2px;
    font-size: 25px;
    text-align: center;
    line-height: 22px;
    color: red;
    top: 2px;
}

.basic{
    background-image: url(../img/background.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 88%;
    height: 60%;
    border-radius: 0.08rem;
    position: absolute;
    top: 10%;
    left:6%;
}

.float-anniu{
    width: 86%;
    height: 14%;
    position: absolute;
    top: 76%;
    left: 7%;
}  

.float-top{
    width: 100%;
    height:64%;
    position: absolute;
    top: 8px;
}

.float-top-left{
    width: 23%;
    height:100%;
    position: absolute;
    left: 6%;
    text-align: center;
}

.float-head{
    width:60px;
    height: 60px;
    border-radius: 100%;
    overflow: hidden;
    position: absolute;
    top:10%;
}

.float-head>img{
    width: 100%;
}

.float-sex-girl{
    width: 16px;
    height: 16px;
    background-image: url(../img/girl.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top:52px;
    right: 10px;
}

.float-sex-boy{
    width: 16px;
    height:16px;
    background-image: url(../img/boy.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: 1.3rem;
    right: 0.24rem;
}

.float-top-left-p {
    font-size: 11px;
    color: #999999;
    position: absolute;
    top: 86px;
    font-family: 'Helvetica Neue',Helvetica,sans-serif;
}

.float-top-right{
    width: 60%;
    height: 100%;
    position: absolute;
    right: 6%;

}

.float-top-right-name{
    width:100%;
    height: 30px;
    position: absolute;
    top: 7px; 

}

.float-name{
    font-size:20px;
    color: #000;
    position: absolute;
    width: 62%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

.float-beizhu {
    white-space: nowrap;
    font-size: 11px;
    color: #666666;
    position: absolute;
    top:11px;
    right: 20px;
}

.beizhu-img {
    width: 14px;
    height: 14px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url(../img/edit.png);
    top: 10px;
    right: 0;
}

/* 修改备注文本框样式 */

.change-name {
    position: absolute;
    top: 35px;
    width: 52%;
    height: 22px;
    background-color: #ffffff;
    border-radius:4px 0 0 4px;
    text-indent: 4px;
    border: 1px solid #d9d9d9;
    font-size: 12px;
    color: #666666;
}

.perserve {
    border-radius: 0 4px 4px 0;
    position: absolute;
    top: 35px;
    left: 52%;
    height: 22px;
    width: 20%;
    text-align: center;
    background-color: #10a13a;
    font-size: 12px;
    color: #fff;
    line-height: 22px;
}
.perserve-repeat {
    border-radius: 4px;
    position: absolute;
    top: 35px;
    left: 75%;
    width: 20%;
    height: 22px;
    text-align: center;
    background-color: #10a139;
    font-size: 12px;
    color: #fff;
    line-height: 22px;
}

.float-top-right-basic{
    width: 100%;
    height: 40%;
    position: absolute;
    top: 58%;
}

.float-nichen{
    width: 100%;
   font-size:14px;
   color:#888888;
   position: absolute;
   white-space: nowrap;
   overflow: hidden;
   text-overflow:ellipsis;
}

.float-region{
    width: 100%;
    font-size: 14px;
    color:  #888888;
    position: absolute;
    top:20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
 }

.float-bottom{
    width: 100%;
    height: 30%;
    position: absolute;
    bottom: 9px;
}

.float-bottom-left{
    width: 50%;
    height: 100%;
    left: 2%;
    position: absolute;
}

.float-bottom-right{
    width: 50%;
    height: 100%;
    position: absolute;
    left: 52%;
}

.left-img {
    width: 15%;
    height: 56%;;
    background-image: url(../img/TEL.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: 16px;
    left:15px;

}
.right-img {
    width: 15%;
    height: 56%;
    background-image: url(../img/CHAT.png);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    left:8px;
    top: 16px;

}

.left-anniu {
    position: absolute;
    left: 44px;
    top: 18px;
    width: 32%;
    background-image: url(../img/left-anniu\ .png);
    background-size: 100%;
    background-repeat: no-repeat;
    font-size: 12px;
    text-align: center;
    color: #333333;
    font-family: 'Helvetica Neue',Helvetica,sans-serif;
    line-height: 22px;
}

.change-tel {
    position: absolute;
    left: 42px;
    top: 22px;
    text-align: center;
    color: #333333;
    font-family: 'Helvetica Neue',Helvetica,sans-serif;
    font-size:12px;
    text-decoration: none;
}

.change-chat{
    position: absolute;
    left: 42px;
    top: 22px;
    font-size: 12px;
    text-align: center;
    color: #333333;
    font-family: 'Helvetica Neue',Helvetica,sans-serif;
    text-decoration: none;
}

.right-anniu {
    background-image: url(../img/left-anniu\ .png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 40px;
    top:18px;
    width: 32%;
    font-size: 12px;
    text-align: center;
    color: #333333;
    line-height: 22px;

}

/* 有好友状态关注、拉黑、沟通按钮 */

.float-one {

    width: 32%;
    height: 70%;
    border-radius: 4px;
    position: absolute;
    left: 0;
    background-color: #10a13a;
}
.quguan {
    font-size: 14px;
    color: rgb(255, 255, 255);
    line-height:28px;
    position: absolute;
    right:8px;

}

.float-two {
    width: 30%;
    height: 70%;
    border-radius: 4px;
    position: absolute;
    left: 34%;
    background-color: #10a13a;
    color: rgb(255, 255, 255);
    line-height: 60%;

}

.lahei {
    font-size: 14px;
    color: rgb(255, 255, 255);
    line-height: 28px;
    position: absolute;
    right: 8px;
}
    
.float-three {
    width: 33%;
    height: 70%;
    border-radius: 4px;
    position: absolute;
    left: 66%;
    background-color: #10a13a;
    font-size: 0.2rem;
    color: rgb(255, 255, 255);
    line-height: 60%;
    
}

.goutong {
    font-size: 14px;
    color: rgb(255, 255, 255);
    line-height: 28px;
    position: absolute;
    right: 8px;

}

.float-one-img {
    width: 20px;
    height:20px;
    background-size: 104%;
    background-repeat: no-repeat;
    background-image: url(../img/quguan.png);
    display: inline-block;
    position: absolute;
    top: 4px;
    left: 6px;

}

.float-two-img {
    width: 20px;
    height:20px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../img/lahei.png);
    display: inline-block;
    position: absolute;
    top: 4px;
    left: 8px;

}
.float-three-img {
    width: 19px;
    height:19px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../img/goutong.png);
    display: inline-block;
    position: absolute;
    top: 4px;
    left:8px;

}

/* 无好友状态关注、拉黑、沟通按钮 */

.float-tw {

    width: 30%;
    height: 70%;
    border-radius: 4px;
    position: absolute;
    left: 34%;
    background-color: #999999;
    font-size:12px;
    color: rgb(255, 255, 255);
    line-height: 26px;
    opacity: 0.4;

}

.float-thre {
    width: 34%;
    height: 70%;
    border-radius: 4px;
    position: absolute;
    right: 0;
    background-color: #999999;
    font-size: 12px;
    color: rgb(255, 255, 255);
    line-height: 26px;
    opacity: 0.4;

}

.jiaguan {

    font-size: 14px;
    color: rgb(255, 255, 255);
    position: absolute;
    right: 8px;
    line-height:28px;

}
.float-on-img {
    width: 19px;
    height:19px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../img/guanzhu.png);
    display: inline-block;
    position: absolute;
    top: 4px;
    left: 8px;

}

/* 拉黑好友按钮状态 */

.float-t {
    width: 32%;
    height: 70%;
    border-radius: 4px;
    position: absolute;
    left:33%;
    background-color: #10a13a;
    font-size: 14px;
    color: rgb(255, 255, 255);
    line-height: 26px;
}


.float-t-img{
    width: 18px;
    height:18px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../img/lahei.png);
    display: inline-block;
    position: absolute;
    top: 4px;
    left: 8px;
    }


 /* 提示框样式 */

 .float-change-tel {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.514);
    position: fixed;
    top: 0;
    z-index: 10000;
}
.informatiom-top {
    height: 36px;
    border-bottom: 0.01rem solid rgb(180, 180, 180);
    font-size: 14px;
    text-align: center;
    line-height: 32px;
    padding: 2px 20px;
}
.repeat-imformation {
    height: 30px;
    text-align: center;
    line-height: 28px;
}
.float-repeat-m {
    border-radius: 4px;
    background-color: #fff;
    position: absolute;
    top: 40%;
    left: 50%;
    font-size: 14px;
    text-align: center;
    color: #000;
    padding: 0 4px;
    white-space: nowrap;
    transform: translate(-50%, -50%); 
}
.chat-change-float {
    border-radius: 4px;
    background-color: #fff;
    position: absolute;
    top: 40%;
    left: 50%;
    font-size: 14px;
    text-align: center;
    color: #000;
    padding: 12px 20px;
    word-wrap: break-word;
    letter-spacing: 0.02rem;
    transform: translate(-50%, -50%);

}  
.chat-number-float-last {
    height: 30px;
    display: flex;
    justify-content: space-around;
}
.chat-number-float {
    border-radius: 4px;
    background-color: #fff;
    position: absolute;
    top: 40%;
    left: 50%;
    padding: 2px 16px;
    transform: translate(-50%, -50%);

}
.chat-number-float-top {
    height: 30px;
    border-bottom: 0.01rem solid rgb(180, 180, 180);
    font-size: 14px;
    text-align: center;
    line-height: 30px;

}
.chat-number-float-last > a {
    font-size: 14px;
    color: #000;
    text-decoration: none;
    line-height: 30px;
}
.chat-number-float-bottom {
    text-align: center;
    line-height: 30px;
}
.chat-number-float-bottom > a {
    font-size:14px;
    color: #000;
    text-decoration: none;
}