@charset "utf-8";
.toolbar{position: fixed;top: 50%;right: 1%;margin-top: -163px;z-index: 100;width: 80px;}
.toolbar dd{position: relative;float: left;width: 80px;height: 80px;background: #017045;margin: 2px 0 0 0;border-radius: 5px;color: #fff;font-size: 14px;line-height: 21px;text-align: center;cursor: pointer;transition: all .5s;}
.toolbar dd:first-child{margin-top: 0;}
.toolbar dd i{width: 100%;height: 30px;display: block;margin-top: 13px;background: url(../images/toolbar.png) no-repeat center 0;}
.toolbar dd.qq i{background-position-y: 0;}
.toolbar dd.tel i{background-position-y: -30px;}
.toolbar dd.code i{background-position-y: -60px;}
.toolbar dd.top i{background-position-y: -90px;}
.toolbar dd span{display: block;color: #fff; text-align:center}
.toolbar dd.tel .box{position: absolute;top: 0;width: 190px;right: -200px;height: 100%;margin-right: 10px;border-radius: 5px;background: #017045;opacity: 0;transition: all .5s; text-align:center}
.toolbar dd.tel .box p{font-size: 14px;margin: 15px auto 7px; text-align:center}
.toolbar dd.tel .box h3{font-size: 18px;font-weight: bold;text-align:center}
.toolbar dd.tel .box:after{display: block;content: " ";border-style: solid dashed dashed dashed;border-color: transparent  transparent transparent #017045;border-width: 9px;width: 0;height: 0;position: absolute;top: 50%;margin-top: -9px;right: -18px;margin-left: -12px;}
.toolbar dd.code .box{position: absolute;top: 0;width: 162px;right: -172px;height: 162px;margin-right: 10px;border-radius: 5px;background: #017045;opacity: 0;transition: all .5s;}
.toolbar dd.code .box img{width: 140px;height: 140px;padding: 11px;}
.toolbar dd.code .box:after{display: block;content: " ";border-style: solid dashed dashed dashed;border-color: transparent  transparent transparent #017045;border-width: 9px;width: 0;height: 0;position: absolute;top: 30px;right: -18px;margin-left: -12px;}
.toolbar dd:hover{background: #333;}
.toolbar dd.tel:hover .box{opacity: 1;right: 80px;}
.toolbar dd.code:hover .box{opacity: 1;right: 80px;}

/* =========================
   先做基础重置
========================= */
.toolbar {
  list-style: none;
  padding: 0;
}

.toolbar dd {
  margin-left: 0;
}

/* =========================
   平板端：缩小右侧悬浮栏
========================= */
@media (max-width: 991px) {
  .toolbar {
    right: 12px;
    width: 64px;
    margin-top: -132px;
  }

  .toolbar dd {
    width: 64px;
    height: 64px;
    font-size: 12px;
    line-height: 18px;
  }

  .toolbar dd i {
    margin-top: 8px;
    transform: scale(0.9);
    transform-origin: center top;
  }

  .toolbar dd.tel .box {
    width: 170px;
    right: -180px;
  }

  .toolbar dd.code .box {
    width: 150px;
    height: 150px;
    right: -160px;
  }

  .toolbar dd.code .box img {
    width: 128px;
    height: 128px;
    padding: 11px;
  }

  .toolbar dd.tel:hover .box,
  .toolbar dd.code:hover .box {
    right: 70px;
  }
}

/* =========================
   手机端：底部横排，强制贴底
========================= */
@media (max-width: 767px) {
  .toolbar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 8px 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 6px !important;
    z-index: 99999 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  .toolbar dd {
    float: none !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
    box-sizing: border-box !important;
  }

  .toolbar dd i {
    width: 100% !important;
    height: 20px !important;
    margin: 0 0 4px 0 !important;
    background-size: auto !important;
    transform: scale(0.9) !important;
    transform-origin: center center !important;
  }

  .toolbar dd span {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  /* 手机端 hover 弹层无意义，直接隐藏 */
  .toolbar dd.tel .box,
  .toolbar dd.code .box {
    display: none !important;
  }

  /* 手机端隐藏二维码按钮 */
  .toolbar dd.code {
    display: none !important;
  }

  /* 剩余三个按钮等分 */
  .toolbar dd.qq,
  .toolbar dd.tel,
  .toolbar dd.top {
    flex: 1 1 0 !important;
  }
}

/* =========================
   超小屏手机
========================= */
@media (max-width: 480px) {
  .toolbar {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    padding: 0 6px 0 !important;
    gap: 4px !important;
  }

  .toolbar dd {
    height: 52px !important;
    border-radius: 10px 10px 0 0 !important;
    font-size: 10px !important;
  }

  .toolbar dd i {
    height: 18px !important;
    margin-bottom: 3px !important;
    transform: scale(0.86) !important;
  }

  .toolbar dd span {
    font-size: 10px !important;
  }
}