.onlinefixed {
  position: fixed;
  right: 0;
  bottom: 150px;
  transform: translateX(calc(100% - 60px));
  z-index: 99;
  transition: 500ms; }
  .onlinefixed .item {
    margin: 5px 0;
    border-radius: 2px;
    background-color: #1f5eab;
    color: #fff;
    position: relative;
    min-height: 54px;
    line-height: 54px;
    text-indent: 60px;
    padding-right: 10px;
    transition: 500ms;
    cursor: pointer; }
    .onlinefixed .item::before {
      content: "\ef001";
      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;
      font-family: iconfont; }
    .onlinefixed .item a {
      color: #fff;
      width: 100%;
      display: block; }
  .onlinefixed:hover .item {
    width: auto; }

.onlinefixed .qq.item:before {
  content: "\e2100"; }

.onlinefixed .tel.item:before {
  content: "\e2001"; }

.onlinefixed .fixedtel.item:before {
  content: "\e2004"; }

.onlinefixed .facebook.item:before {
  content: "\e2109"; }

.onlinefixed .mail.item:before {
  content: "\e2203"; }

.onlinefixed .outurl.item:before {
  content: "\e1a06"; }

.onlinefixed .weixin.item:before {
  content: "\e2101"; }

.onlinefixed .qrcode.item:before {
  content: "\e1a0c"; }

.onlinefixed .whats.item:before {
  content: "\e2018"; }

.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: "\ef001"; }

.onlinefixed:hover {
  transform: translateX(0); }

.onlinefixed:hover .weixin.item .qr_img, .onlinefixed:hover .qrcode.item .qr_img, .onlinefixed:hover .whats.item .qr_img {
  padding-top: 60px;
  padding-bottom: 10px;
  width: 120px;
  height: auto;
  margin: 0 auto; }