.side-bar {
  width: 60px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 16px;
  top: 33%;
  background: #fff;
  box-shadow: 0 28px 81px rgba(0, 0, 0, 0.12), 0 8.44118px 24.4191px rgba(0, 0, 0, 0.0781907), 0 3.50603px 10.1425px rgba(0, 0, 0, 0.06), 0 1.26806px 3.66833px rgba(0, 0, 0, 0.0418093);
  border-radius: 44px;
}

.bar {
  display: flex;
  height: 74px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-size: 100% 1px;
  color: #1f292e;
  position: relative;
}

.bar > .box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bar .tab {
  margin-top: 6px;
  font-size: 12px;
  line-height: 17px;
}

.bar svg {
  width: 22px;
  height: 22px;
}

.bar > .stroke-bar {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, rgba(231, 231, 231, 0) 0%, #E7E7E7 51.29%, rgba(231, 231, 231, 0) 100%);
  position: absolute;
  top: 0;
}

.bar > .stroke-bar.bottom {
  top: auto;
  bottom: 0;
}

.bar:first-child {
  border-top-left-radius: 44px;
  border-top-right-radius: 44px;
}

.bar:last-child {
  border-bottom-right-radius: 44px;
  border-bottom-left-radius: 44px;
}

.bar.active,
.bar:hover {
  background: rgba(22, 132, 252, 1);
  color: #fff;
}

.bar.active,
.bar:hover svg {
  color: #fff;
}

.wei_xin_box.active,
.wei_xin_box:hover svg path:nth-child(1),
.wei_xin_box.active,
.wei_xin_box:hover svg path:nth-child(3) {
  stroke: #fff;
}

.wei_xin_box.active,
.wei_xin_box:hover svg path:nth-child(2),
.wei_xin_box.active,
.wei_xin_box:hover svg path:nth-child(4) {
  fill: #fff;
}

.wei_xin_box > .box {
  margin-top: 5px;
}

.read > .box {
  margin-bottom: 5px;
}

.phone .gzh-icon {
  width: 22px;
  height: 22px;
  display: block;
}

.phone.active .gzh-icon,
.phone:hover .gzh-icon {
  filter: brightness(0) invert(1);
}

.read.active,
.read:hover svg path {
  stroke: #fff;
}

.wei_xin_box_child {
  position: absolute;
  right: 70px;
  background-color: #fff;
  width: 200px;
  height: 200px;
  border-radius: 6px;
  display: none;
  align-items: center;
  flex-direction: column;
  box-shadow: 0px 28px 81px 0px rgba(0, 0, 0, 0.12);
}

.wei_xin_box_child > img {
  width: 130px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.wei_xin_box_child > span {
  font-family: PingFang SC, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  color: rgba(107, 112, 123, 1);
}

.phone_box_child {
  position: absolute;
  right: 70px;
  background-color: #fff;
  width: 200px;
  height: 200px;
  border-radius: 6px;
  display: none;
  align-items: center;
  flex-direction: column;
  box-shadow: 0px 28px 81px 0px rgba(0, 0, 0, 0.12);
}

.phone_box_child > img {
  width: 130px;
  height: 130px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.phone_box_child > span {
  font-family: PingFang SC, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  color: rgba(107, 112, 123, 1);
}

@media (max-width: 767px) {
  .side-bar {
    display: none;
  }
}

@media (max-width: 640px) {
  .side-bar {
    display: none;
  }
}