.xf_box{
   width:35px;
    height:127px;
   position: relative;
   z-index:999;
  }
  .xf_box .xf_btn{
  position: absolute;
   right:0px;
  }
  .xf_box .btn_none{
  position: fixed;
   right:-100%;
  }
  .xf_box .xf_btn.mo{
  top:0px
  z-index:99;
  }
  .xf_box .xf_btn.wx{
  top:46px;
    z-index:99;
  }
  .xf_box .xf_btn.dh{
  top:92px;
    z-index:99;
  }
  .xf_box .btn_none.mo_n{
  bottom:109px;
    z-index:80;
  }
  .xf_box .btn_none.wx_n{
  bottom:63px;
    z-index:80;
  }
  .xf_box .btn_none.dh_n{
  bottom:18px;
    z-index:80;
  }

  
      #bottom {
    
    position: fixed;
    width: 100%;
    height: 45px;
    z-index:0;
    left: 0px;
    bottom: 27px;
    animation: start 1.5s infinite ease-in-out;
}
  
  
  
  .container {
  position: relative;
  width: 20px;
  height: 20px;
    margin:0px auto;
}

.chevron {
  position: absolute;
  width: 20px;
  height: 7px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}

.chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #fff;
}

.chevron:before {
  left: 0;
  transform: skew(0deg, 30deg);
}

.chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}

@keyframes move {
  25% {
    opacity: 1;

  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}