.onlinefixed{ position: fixed; right:0px; bottom:100px; transform:translateX(calc( 100% - 60px));  z-index: 99999999; transition: 500ms; }
.onlinefixed .item{ margin: 5px 0px;  border-radius: 2px; background-color: #1f5eab; color:#fff; position: relative; min-height: 54px; line-height: 54px; text-indent: 60px; padding-right: 10px; transition: 500ms; }
.onlinefixed .item a{ color:#fff; width:100%; display: block; }
.onlinefixed .item:before{ content:"\e61c"; text-align: center; font-size: 30px; width:60px; height: 54px; line-height: 54px; display: block;  color:#fff; position: absolute; top:0; left:0; text-indent: 0; }
.onlinefixed .qq.item:before{content:"\e61b";}
.onlinefixed .tel.item:before{content:"\e619";}
.onlinefixed .facebook.item:before{content:"\e619";}
.onlinefixed .mail.item:before{content:"\e612";}
.onlinefixed .outurl.item:before{content:"\e61a";}
.onlinefixed .weixin.item:before{content:"\e63f";}
.onlinefixed .qrcode.item:before{content:"\e60f";}
.onlinefixed .whats.item:before{content:"\e679";}
.onlinefixed .weixin.item
,.onlinefixed .qrcode.item
,.onlinefixed .whats.item
{ text-indent: 0; text-align: center;}
.onlinefixed .weixin.item .qr_img
,.onlinefixed .qrcode.item .qr_img
,.onlinefixed .whats.item .qr_img
{width:0; height: 0;  transition: 500ms;}
.onlinefixed .weixin.item span
,.onlinefixed .qrcode.item span
,.onlinefixed .whats.item span
{ position: absolute; top:0; left:0;text-indent: 60px; }
.onlinefixed .top.item:before{ content:"\e618"; }
.onlinefixed:hover{ transform:translateX(0); }
.onlinefixed:hover:hover .weixin.item  .qr_img
,.onlinefixed:hover:hover .qrcode.item  .qr_img
,.onlinefixed:hover:hover .whats.item  .qr_img
{ padding-top: 60px; padding-bottom: 10px;  width:120px; height: auto;  margin: 0 auto;}