.floatBox {
    position: fixed;
    right: 0;
    bottom: 15%;
    z-index: 1;
    /* overflow: hidden; */
  }
  
  /* onBox */
  
  .total {
    width: 280px;
    height: 280px;
    /* float: left; */
    position: relative;
  }
  .onBox {
      transform: translateX(100%);
      opacity: 0;
      visibility: hidden;
      transition: all .3s;
      cursor: pointer;
    }
  .total .sphere {
    width: 20rem;
    height: 20rem;
    position: relative;
    margin: 0 10px 0 0;
  }
  .total .sphere .sphere-bg {
    position: absolute;
    /* z-index: 100; */
    left: -20px;
    top: -30px;
    width: 100%;
    height: 100%;
    background: url(../resources/images/stars-images/earth.png) no-repeat center;
    background-size: contain;
  }
  .total .sphere .onNum {
    position: absolute;
    z-index: 100;
    left: 55px;
    top: 60px;
    width: 100%;
    height: 100%;
    color: #FFFFFF;
    background-size: 55%;
  }
  /* onNum */
  .onNum {
    list-style: none;
    line-height: 34px;
    font-size: 16px;
  }
  .onNum .onTit {
    text-align: left;
  }
  .onLabel {
    font-size: 14px;
  }
  .onStars {
    font-size: 18px;
    margin: 0 4px;
  }
  
  .onNum p { 
    display: inline;
    padding:0 4px; 
    font-size: 14px;
  }
  .onNum p i { 
    font-size: 16px; 
    font-style: normal; 
    text-align: center;
    background: #2a3cad; 
    border-radius: 2px; 
    display: inline-block; 
    vertical-align: middle; 
    width: 20px; 
    line-height: 20px; 
    margin:0 4px;
  }
  /* onNum---end */
  .total .cicle4 {
    width: 25rem;
    height: 20rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    background: url(../resources/images/stars-images/topright.png) no-repeat center;
    background-size: 100%;
    transform: translateX(-50%) rotateX(75deg);
    animation: rotate3 2s linear infinite;
  }
  .total .cicle5 {
    width: 25rem;
    height: 20rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    background: url(../resources/images/stars-images/topleft.png) no-repeat center;
    background-size: 100%;
    transform: translateX(-50%) rotateX(75deg);
    animation: rotate4 2s linear infinite;
  }
  .total .cicle6 {
    width: 20rem;
    height: 12rem;
    position: absolute;
    top: 65%;
    left: 50%;
    transform-style: preserve-3d;
    background: url(../resources/images/stars-images/bottomright.png) no-repeat center;
    background-size: 100%;
    transform: translateX(-50%) rotateX(75deg);
    animation: rotate3 2s linear infinite;
  }
  .total .cicle7 {
    width: 20rem;
    height: 12rem;
    position: absolute;
    top: 65%;
    left: 50%;
    transform-style: preserve-3d;
    background: url(../resources/images/stars-images/bottomleft.png) no-repeat center;
    background-size: 100%;
    transform: translateX(-50%) rotateX(75deg);
    animation: rotate4 2s linear infinite;
  }
  
  @keyframes rotate3 {
    0% {
      transform: translateX(-50%) rotateX(75deg) rotateZ(0);
    }
    100% {
      transform: translateX(-50%) rotateX(75deg) rotateZ(360deg);
    }
  }
  @keyframes rotate4 {
    0% {
      transform: translateX(-50%) rotateX(75deg) rotateZ(0);
    }
    100% {
      transform: translateX(-50%) rotateX(75deg) rotateZ(-360deg);
    }
  }
  
  /* onBox */
  
  /* offBox */
  .offBox {
    position: absolute;
    transition: all .3s;
    cursor: pointer;
  }
  .offBox .offTit {
    display: block;
    font-size: 18px;
    color: #FFF;
    position: absolute;
    right: 0;
    top: -68px;
    width: 25px;
    padding: 0;
    line-height: 28px;
  }
  .icon {
    position: absolute;
    width: 180px;
    height: 180px;
    font-size: 24px;
    color: #FFF;
    background: url(../resources/images/stars-images/earth.png) no-repeat center;
    background-size: contain;
    border-radius: 50%;
    border: 2px solid rgba(80, 223, 219, 0.81);
  }
  
  #icon1 {
    animation: rotate-icon1 8s infinite linear;
  }
  #icon2 {
    animation: rotate-icon2 8s infinite linear;
  }
  #icon3 {
    animation: rotate-icon3 8s infinite linear;
  }
  #icon4 {
    animation: rotate-icon4 8s infinite linear;
  }
  #icon5 {
    animation: rotate-icon5 8s infinite linear;
  }
  #icon6 {
    animation: rotate-icon6 8s infinite linear;
  }
  #icon7 {
    animation: rotate-icon7 8s infinite linear;
  }
  #icon8 {
    animation: rotate-icon8 8s infinite linear;
  }
  
  
  @keyframes rotate-icon1 {
    0% {
      transform: translateX(-50%) translateY(-100px) rotate(-135deg);
    }
    100% {
      transform: translateX(-50%) translateY(-100px) rotate(225deg);
    }
  }
  @keyframes rotate-icon2 {
    0% {
      transform: translateX(-50%) translateY(-100px) rotate(-90deg);
    }
    100% {
      transform: translateX(-50%) translateY(-100px) rotate(270deg);
    }
  }
  @keyframes rotate-icon3 {
    0% {
      transform: translateX(-50%) translateY(-100px) rotate(-45deg);
    }
    100% {
      transform: translateX(-50%) translateY(-100px) rotate(315deg);
    }
  }
  @keyframes rotate-icon4 {
    0% {
      transform: translateX(-50%) translateY(-100px) rotate(0deg);
    }
    100% {
      transform: translateX(-50%) translateY(-100px) rotate(360deg);
    }
  }
  @keyframes rotate-icon5 {
    0% {
      transform: translateX(-50%) translateY(-100px) rotate(45deg);
    }
    100% {
      transform: translateX(-50%) translateY(-100px) rotate(405deg);
    }
  }
  @keyframes rotate-icon6 {
    0% {
      transform: translateX(-50%) translateY(-100px) rotate(90deg);
    }
    100% {
      transform: translateX(-50%) translateY(-100px) rotate(450deg);
    }
  }
  @keyframes rotate-icon7 {
    0% {
      transform: translateX(-50%) translateY(-100px) rotate(135deg);
    }
    100% {
      transform: translateX(-50%) translateY(-100px) rotate(495deg);
    }
  }
  @keyframes rotate-icon8 {
    0% {
      transform: translateX(-50%) translateY(-100px) rotate(180deg);
    }
    100% {
      transform: translateX(-50%) translateY(-100px) rotate(540deg);
    }
  }
  /* offBox */
  
  .onBox.active{ 
      transform:translateX(0); 
      opacity:1; 
      visibility:visible; 
      transform-origin:right center;
    }
    .offBox.active{ 
      opacity:0; 
      visibility:hidden; 
      transform:translate(-100%,-50%);
    }