.float-left{
    position:fixed;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    z-index:91
}
 .float-left .item{
    width:50px;
    height:50px;
    border-radius:50%;
    position:relative;
    margin-bottom:6px
}
 .float-left .item img{
    display:block;
    position:relative;
    z-index:9;
    cursor:pointer;
    width:100%;
    height:100%;
    object-fit:cover;
    box-shadow:0 0 10px 0 rgba(0,0,0,.12);
    border-radius:50%
}
 .float-left .item .pop{
    display:block;
    width:0;
    height:50px;
    border-radius:25px;
    background-color:#fff;
    position:absolute;
    right:0;
    top:0;
    z-index:8;
    padding-left:14px;
    line-height:50px;
    transition:all .5s;
    overflow:hidden;
    opacity:0;
    border:1px solid #ddd;
    color:#000;
    font-size:18px
}
 @media (min-width:750px){
     .float-left .item:hover .pop{
        width:280px;
        opacity:1
    }
}
 @media (max-width:750px){
     .float-left .item .pop.on{
        width:280px;
        opacity:1
    }
     .float-left{
        position:fixed;
        right:10px;
        top:65%;
        transform:translateY(-50%)
    }
     .float-left .item{
        width:40px;
        height:40px
    }
     .float-left .item .pop{
        height:40px;
        border-radius:20px;
        line-height:40px
    }
}