/*--------------- float-menu start ---------------*/
.float-nav {
  position: fixed;
  z-index: 999;
  right: 10px;
  bottom: 10px; }
  .float-nav-item {
    position: relative;
    width: 50px;
    height: 50px;
    margin-top: 4px;
    cursor: pointer;
    transition: background-position 1s;
   /*border-radius: .25rem; */
    background: url(../../images/login/float-nav.png) no-repeat;
    background-color: rgba(50, 156, 238, 0.7); }
    .float-nav-item .sub-item {
      position: absolute;
      right: 55px;
      bottom: 0;
      overflow: hidden;
      width: 230px;
      padding: 25px 35px;
      transition: all 1s;
      transform: scale(0);
      transform-origin: 100% 100%;
      color: #8a8a8a;
      /* border-radius: .25rem; */
      background-color: #fff;
      box-shadow: 1px 1px 5px rgba(3, 3, 3, 0.3);
      opacity: 0;
      filter: alpha(opacity=0); }
    .float-nav-item .icon-box {
      font-size: 32px;
      margin-right: 15px; }
    .float-nav-item .a-link {
      display: inline-block;
      width: 110px;
      padding: .375em .75em;
      border: 1px solid currentColor;
      /* border-radius: .25rem; */ }
      .float-nav-item .a-link:hover {
        color: #fff;
        background-color: #329cee; }
    .float-nav-item:hover .sub-item {
      transform: scale(1);
      opacity: 1;
      filter: alpha(opacity=100); }
    .float-nav-item.service {
      background-position: 0 0; }
      .float-nav-item.service:hover {
        background-position: 0 -60px; }
    .float-nav-item.help {
      background-position: 0 -120px; }
      .float-nav-item.help:hover {
        background-position: 0 -180px; }
    .float-nav-item.gotop {
      background-position: 0 -240px; }
      .float-nav-item.gotop:hover {
        background-position: 0 -300px; }
    .float-nav-item.gobottom {
      background-position: 0 -595px; }
      .float-nav-item.gobottom:hover {
        background-position: 0 -645px; }
    .float-nav-item.float-nav-close {
      background-position: 0 -360px; }
      .float-nav-item.float-nav-close:hover {
        background-position: 0 -420px; }
    .float-nav-item.open {
      width: 25px;
      margin-left: 25px;
      background-position: 0 -480px; }
      .float-nav-item.open:hover {
        background-position: 0 -540px; }   

/*--------------- float-menu end ---------------*/
.float-nav .flex-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.float-nav .f14 {
    font-size: 14px;
}

.float-nav .f18 {
    font-size: 18px;
}
.float-nav .mt10 {
    margin-top: 10px;
}
.float-nav .mt20 {
    margin-top: 20px;
}
.float-nav a {
    cursor: pointer;
    text-decoration: none;
    outline: 0;
}
.float-nav .a-link:hover {
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.float-nav .tac {
    text-align: center;
}
.float-nav .color-blue {
    color: #329cee;
}
.float-nav {
    font-family: 'PingFang SC','Helvetica Neue', Helvetica, Arial,'Microsoft YaHei',sans-serif;
}

@font-face {
  font-family: 'icomoon';
  src:  url('./font/icomoon.eot?te9e7');
  src:  url('./font/icomoon.eot?te9e7#iefix') format('embedded-opentype'),
    url('./font/icomoon.ttf?te9e7') format('truetype'),
    url('./font/icomoon.woff?te9e7') format('woff'),
    url('./font/icomoon.svg?te9e7#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="helpNav-"], [class*=" helpNav-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.helpNav-phone:before {
  content: "\e910";
  color: #8a8a8a;
}
.helpNav-help:before {
  content: "\e912";
}

/* nav chat css */
.float-chat {
  position: fixed;
  z-index: 999;
  right: 80px;
  bottom: 20px;
  width: 265px;
  height: 43px;
  line-height: 43px;
  background: url('../../images/float-chat.svg') no-repeat center;
  /* overflow: hidden; */
  cursor: pointer;
}
.img-chat {
  display: inline-block;
  margin-left: 12px;
}
.img-chat img{
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid #FFFFFF;
  box-shadow: 0 2px 4px 0 #3283F3;
}
.text-chat {
  position: absolute;
  color: #FFFFFF;
  width: 180px;
  margin-left: -8px;
  font-size: 12px;
  transform: scale(0.833);
  display: inline-block;
  text-align: center;
  /* text-overflow: ellipsis; */
  overflow: hidden;
  white-space: nowrap;
}
.badge-chat {
  background: #FD9920;
  color: #FFFFFF;
  border-radius: 90px;
  font-size: 12px;
  display: inline-block;
  text-align: center;
  position: absolute;
  width: 16px;
  height: 16px;
  right: 10px;
  line-height: 16px;
}
.badge-chat span {
  transform: scale(0.75);
}