.right_tools ul,
.right_tools li {

  margin: 0;

  padding: 0;

  list-style: none;

}

.right_tools {

  position: fixed;

  bottom: 80px;

  z-index: 99;

}

.right_tools.left {

  left: 10px;

}

.right_tools.right {

  right: 10px;

}

.right_tools>ul {

  width: 50px;

  display: inline-block;

  box-shadow: 0 0 2px #e0e0e0;

  background-color: #fff;

}

.right_tools>ul>li {

  width: 100%;

  height: 49px;

  border-bottom: 1px solid #e0e0e0;

  position: relative;

  z-index: 150;

}

.right_tools>ul>.TOP {

  border-bottom: none;

}

.right_tools>ul>li>div {

  width: 100%;

  transition: all 0.5s;

  overflow: hidden;

  height: 100%;

  position: relative;

}

.right_tools>ul>li>div>div {

  width: 100%;

  height: 49px;

  position: absolute;

  top: 0px;

  left: 0px;

  text-align: center;

  background-color: #fff;

  font-size: 20px;

}

.right_tools>ul>li>div>div:nth-of-type(1) {

  transition: all 0.5s;

}

.right_tools>ul>li>div>div:nth-of-type(2) {

  background-color: var(--tool-color);

  top: 50px;

  transition: all 0.5s;

}

.right_tools>ul>li>div>div:nth-of-type(2)>span {

  color: #fff;

}

.right_tools .right_erweima {

  padding-top: 0px !important;

}

.right_tools>ul>li>div>div>img {

  margin-top: 10px;

  width: 20px;

  margin-bottom: 5px;

}

.right_tools>ul>li>div>div>span {

  display: block;

  font-size: 14px;

  color: #363636;

  display: none;

}

.right_tools>ul>li>ul {

  width: 0px;

  position: absolute;

  left: -150px;

  top: 0px;

  overflow: hidden;

  display: none;

  width: 150px;

  transition: all 0.5s;

}

.right_tools.left>ul>li>ul {

  right: -150px;

  left: auto;

}

.right_tools.right>ul>li>ul {

  left: -150px;

  right: auto;

}

.right_tools>ul>li>ul.show {

  width: 150px;

  display: block;

}

.right_tools>ul>li>ul.show>li {

  display: block;

  animation: message 0.5s;

  animation-fill-mode: forwards;

}



.right_tools .wx-img-box img {

  width: 25px;

  margin-top: 15px;

}

@keyframes message {

  0% {

    margin-left: 100%;

  }

  100% {

    margin-left: 0%;

  }

}

@keyframes fmessage {

  0% {

    margin-left: 0%;

  }

  100% {

    margin-left: 100%;

  }

}

.right_tools>ul>li>ul>li {

  width: 150px;

  height: 73px;

  background-color: var(--tool-color);

  color: #fff;

  text-align: center;

  margin-left: 100%;

  transition: all 0.5s;

  transition-delay: 0.1s;

}

.right_tools>ul>li>div>div .vx {

  width: 25px;

}

.right_tools>ul>li>ul .imgbox {

  height: 100%;

  font-size: 16px;

  line-height: 30px;

}

.right_tools>ul>li .vximg {

  margin-top: 0px;

}

.right_tools>ul>li>ul .imgbox>img {

  width: 100%;

  border: 1px solid var(--tool-color);

}

.right_tools>ul>li .dh_box {

  /*margin-top: -(@message-1px);*/

}

.right_tools>ul>li>ul .dh {

  text-align: left;

}

.right_tools>ul>li>ul>.dh:nth-of-type(even) {

  background-color: var(--tool-color);

}

.right_tools>ul>li>ul .dh>img {

  float: left;

}

.right_tools>ul>li .dh_box>li>img {
  width: auto;
}

.right_tools>ul>li .dh_box>li:nth-of-type(1)>img {

  margin: 23px 11px;

}

.right_tools>ul>li .dh_box>li:nth-of-type(2)>img {

  margin: 23px 14px;

}

.right_tools>ul>li .dh_box>li:nth-of-type(3)>img {

  margin: 22px 12px;

}

.right_tools>ul>li>ul .dh>div.fl {

  margin: 11px 0px;

  font-size: 14px;

}

.right_tools>ul>li>div>div .yuy {

  width: 30px;

}

.right_tools>ul .yuyue {

  cursor: pointer;

}

.right_tools>ul>li>ul>li>div>p {

  margin-bottom: 5px;

}

.TOP .iconfont {

  position: absolute;

  top: 0;

  left: 22%;

  border: 0;

  color: #fff;

  font-size: 30px;

  cursor: pointer;

}

.right_tools>ul>.TOP>div>div {

  background-color: var(--tool-color);

  position: relative;

}

.right_tools>ul>li>ul.qqul {

  height: 50px;

  overflow: hidden;

}

.right_tools>ul>li>ul .qq {

  line-height: 49px;

  font-size: 16px;

  height: 50px;

  overflow: hidden;

}

.right_tools>ul>li>ul .qq img {

  float: left;

  display: block;

  width: 18px;

  margin-top: 15px;

  margin-left: 10px;

}

.right_tools>ul>li>ul .qq .fl {

  height: 100%;

  display: block;

  width: 100%;

  margin-top: -11px;

}

.right_tools>ul>li>ul .qq .fl p {

  height: 0;

  text-align: left;

  margin-left: 42px;

  margin-top: 2px;

}

.right_tools>ul>li>ul .qq .fl span {

  text-align: left;

  display: block;

  margin-left: 43px;

  margin-top: 20px;

  font-size: 16px;

}



.right_tools .toTop {

  width: 30px;

}

@media (min-width: 992px) {

  .right_tools.middle-show {

    display: block !important;

  }

}



.right_tools.hidden {

  display: none;

}