.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:"\f110"; 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:"\f1d6";}
.onlinefixed .tel.item:before{content:"\f095";}
.onlinefixed .mail.item:before{content:"\f0e0";}
.onlinefixed .outurl.item:before{content:"\f0c1";}
.onlinefixed .qrcode.item:before{content:"\f029";}
.onlinefixed .qrcode.item{ text-indent: 0; text-align: center;}
.onlinefixed .qrcode.item .qr_img{width:0; height: 0;  transition: 500ms;}
.onlinefixed .qrcode.item span{ position: absolute; top:0; left:0;text-indent: 60px; }
.onlinefixed .top.item:before{ content:"\f048"; transform:rotate(90deg) }
.onlinefixed:hover{ transform:translateX(0); }
.onlinefixed:hover:hover .qrcode.item  .qr_img{ padding-top: 60px; padding-bottom: 10px;  width:120px; height: auto;  margin: 0 auto;}