@font-face {
    font-family: "iconfont";
      src: url('../fonts/font3.woff2') format('woff2'),
    }
    .iconfont {
      font-family: iconfont!important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale
    }
    .floating-panel{
        opacity: 0;
        z-index: -1;
        position: fixed;
        transition: opacity 0.5s ease-in-out;
    }

    .floating-panel.show{
        opacity: 1;
        z-index: 999;
    }

    .tool-box-components {
      position: fixed;
      right: 1vw;
      bottom: 10vh;
      transition: all .5s;
      color: #fff;
      cursor: pointer;
  }

  @media screen and (max-width:750px){
    .tool-box-components{
      bottom: 1vh;
    }
  }
  
  .tool-box-components .iconfont {
      font-size: 24px;
      margin-right: 5px;
  }
  
  .tool-box-components .tool-toTop {
      position: relative;
      left: 0;
      top: 0;
      color: #fff;
      width: 72px;
      height: 48px;
      line-height: 48px;
      border-radius: 8px;
      text-align: center;
      margin: -6px 0
  }
  
  .tool-box-components-content-item:hover, .tool-box-components .tool-toTop:hover{
    background: rgb(150, 247, 192)
  }
  
  .tool-box-components .parting-line {
      position: relative;
      width: 48px;
      height: 1px;
      background: #ffffff4d;
      margin: 4px auto
  }
  
  .tool-box-components-content {
      border-radius: 8px;
      /* background: #05f; */
      /* box-shadow: 0 12px 24px -4px #0055ff4d; */
      /* padding: 6px 0; */
      margin-bottom: 8px
  }
  
  .tool-box-components-content a {
      text-decoration: none;
      color: #fff
  }
  
  .tool-box-components-content .buy-title {
      color: #fff9;
      font-size: 12px;
      line-height: 18px;
      text-align: center
  }
  
  .tool-box-components-content-item {
      padding: 1px 0 5px;
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 100px;
      margin: 0 6px;
      cursor: pointer;
      text-align: center;
      min-height: 20px
  }
  
  .tool-box-components-content-item .slide-title {
      font-size: 12px;
      line-height: 18px;
      font-weight: 400;
      color:#000;
  }
  
  /* .tool-box-components-content-item:hover {
      background: #37f;
      border-radius: 4px
  } */
  
  .tool-box-components-content .before-triangle {
      content: "";
      width: 0;
      height: 0;
      border-top: 16px solid transparent;
      border-bottom: 16px solid transparent;
      border-left: 16px solid #fff;
      position: absolute;
      right: -16px;
      top: 0;
      bottom: 0;
      margin: auto
  }
  
  .tool-box-components-content-phoneNode {
      padding: 16px;
      width: 229px;
      color: #05f;
      font-size: 16px;
      line-height: 24px;
      position: relative;
      background: #fff;
      cursor: pointer
  }
  
  .tool-box-components-content-phoneNode:before {
      content: "";
      width: 0;
      height: 0;
      border-top: 16px solid transparent;
      border-bottom: 16px solid transparent;
      border-left: 16px solid #fff;
      position: absolute;
      right: -16px;
      top: 0;
      bottom: 0;
      margin: auto
  }
  
  .tool-box-components-content-buyNode {
      padding: 16px;
      background: #fff;
      position: relative
  }
  
  .tool-box-components-content-buyNode img {
      display: block;
      width: 160px;
      height: 160px;
      margin-bottom: 8px
  }
  
  .tool-box-components-content-buyNode .buy-desc {
      font-size: 16px;
      line-height: 24px;
      text-align: center;
      color: #1a2233
  }
  
  .tool-box-components-content-buyNode:before {
      content: "";
      width: 0;
      height: 0;
      border-top: 16px solid transparent;
      border-bottom: 16px solid transparent;
      border-left: 16px solid #fff;
      position: absolute;
      right: -16px;
      top: 0;
      bottom: 0;
      margin: auto
  }

  .sub-pop-up-container{
    position: absolute;
    right: 55px;
    display: none;
    padding-right: 20px;
  }

  .sub-popup{
    background-color: #ffffff;
    box-shadow: 0 3px 6px -4px #0000001f,0 6px 16px #00000014,0 9px 28px 8px #0000000d;
    border-radius: 6px;
    padding: 10px;
    position: relative;
    height: fit-content;
  }
  .tool-box-components-content-item:hover .sub-pop-up-container{
    display: block;
  }
  .sub-popup::after{
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent #ffffff transparent; 
    right: -10px;
  }
  .sub-popup .qr-code-popup{
    width: 140px;
    height: fit-content;
  }

  #footerOtherList .qr-code{
    width: 115px;
    height: fit-content;
    padding: 0 10px;
  }

  #footerOtherList .qr-code p{
    margin: 10px 0;
    color: #ffffff;
    text-align: center;
  }

 .popup-qr.top-button{
    left: -60px;
 }

 @media (min-width:320px) and (max-width:1279px){
    .popup-qr.top-button{
        left: -240px;
     }
     .popup-qr.top-button::before{
        left: 90%;
     }
 }