.footer {
  background: #000414;
  display: flex;
  flex-direction: column;
  align-items: center;

  .wrap-top {
    height: 255px;
    width: 1440px;
    display: flex;
    position: relative;

    .block {
      margin-left: 110px;
      padding-top: 32px;

      .title {
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
      }

      .wrap-u {
        display: flex;
      }

      ul {
        margin-top: 22px;

        li {
          font-weight: 500;
          font-size: 14px;
          color: #919BA0;
          margin-bottom: 17px;
          line-height: 17px;
        }

        li:hover {
          color: #ffffff;
        }
      }

      .qrcode {
        width: 100px;
        height: 100px;
        margin-top: 7px;
      }
    }

    .wrap-opt {
      position: fixed;
      z-index: 999;
      //top: 22px;
      height: 158px;
      bottom: 150px;
      right: 30px;

      .box {
        width: 50px;
        background: #04AB81;
        border-radius: 4px;

        .item {
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          img {
            width: 22px;
            height: 22px;
          }
        }

        .divider {
          height: 1px;
          margin: 0 7px;
          background: rgba(255, 255, 255, 0.1);;
        }
      }

      .top {
        width: 50px;
        height: 50px;
        background: #FFFFFF;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin-top: 6px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      }

      .bubble {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed; /* 设置相对定位 */
        z-index: 999;
        bottom: 170px;
        right: 100px;
        background: #ffffff;
        border-radius: 6px;
        width: 120px;
        height: 140px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

        .title {
          font-weight: 400;
          font-size: 14px;
          color: #333333;
        }

        .qrcode {
          width: 100px;
          height: 100px;
        }
      }

      /* 添加右边的小三角形 */

      .bubble::after {
        content: ""; /* 必须有content属性才能显示伪元素 */
        position: absolute; /* 设置绝对定位 */
        top: 20px; /* 将伪元素放在父元素的上部居中位置 */
        right: -12px; /* 调整到合适的位置 */
        border-width: 6px; /* 控制三角形大小 */
        border-style: solid;
        border-color: transparent transparent transparent #fff; /* 根据需要修改颜色 */
      }

      .box-tel {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed; /* 设置相对定位 */
        z-index: 999;
        bottom: 213px;
        right: 100px;
        background: #ffffff;
        border-radius: 6px;
        width: 140px;
        height: 40px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        font-size: 16px;
        color: #333333;
        font-weight: 500;
      }

      /* 添加右边的小三角形 */

      .box-tel::after {
        content: ""; /* 必须有content属性才能显示伪元素 */
        position: absolute; /* 设置绝对定位 */
        top: 14px; /* 将伪元素放在父元素的上部居中位置 */
        right: -12px; /* 调整到合适的位置 */
        border-width: 6px; /* 控制三角形大小 */
        border-style: solid;
        border-color: transparent transparent transparent #fff; /* 根据需要修改颜色 */
      }


    }
  }

  .wrap-bot {
    width: 100%;
    height: 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);;

    span {
      font-weight: 400;
      font-size: 12px;
      color: #848996;
    }
    a{
      font-weight: 400;
      font-size: 12px;
      color: #848996;
    }
  }

}