aside {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 22;
  display: flex;
  flex-direction: column;
  align-items: center;
}

aside > .aside-img-btns {
  width: 60px;
  height: 180px;
  background: #ffffff;
  box-shadow: 1px 0px 2px 0px rgba(180, 186, 198, 0.3);
  border-radius: 30px;
  border: 1px solid rgba(230, 233, 243, 0.5);
  box-sizing: border-box;
  padding: 8px;
}
@media (max-width: 768px) {
  aside > .aside-img-btns {
    display: none;
  }
}
aside > .aside-img-btns > .img-btn {
  height: calc(100% / 3);
  box-sizing: border-box;
  border-bottom: 1px solid #e6e9f3;
  cursor: pointer;
  position: relative;
}

aside > .aside-img-btns > .img-btn:last-child {
  border: none;
}

aside > .aside-img-btns > .img-btn > .img-box > img {
  width: 24px;
}

aside > .aside-img-btns > .img-btn > .img-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

aside > .aside-img-btns > .img-btn:hover > .img-box {
  box-shadow: 1px 0px 2px 0px rgba(180, 186, 198, 0.3);
  border: 1px solid rgba(230, 233, 243, 0.5);
}

aside > .go-start {
  margin-top: 100px;
  width: 48px;
  height: 48px;
  cursor: pointer;
  display: none;
}

aside > .go-start > img {
  width: 100%;
}

aside > .show {
  display: block;
}

aside > .aside-img-btns > .img-btn:hover > .mod-container {
  display: block;
}

aside > .aside-img-btns > .img-btn > .mod-container {
  position: absolute;
  left: -170px;
  top: -20px;
  width: 141px;
  height: 141px;
  box-shadow: 1px 0px 2px 0px rgba(180, 186, 198, 0.3);
  border: 1px solid rgba(230, 233, 243, 0.5);
  background: #fff;
  z-index: 22;
  display: none;
  border-radius: 4px;
}

aside > .aside-img-btns > .img-btn > .mod-container > img {
  width: 110px;
  height: 110px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*小三角部分*/
.mod-triangle {
  display: block;
  position: relative;
  right: -20px;
  z-index: 999;
  top: 30%;
  z-index: 20;
  transform: rotate(180deg);
}

.mod-triangle .t-border,
.mod-triangle .t-inset {
  left: 0px;
  top: 0px;
  width: 0;
  height: 0;
  font-size: 0;
  overflow: hidden;
  position: absolute;
  border-width: 10px;
  /*可在此处更改小三角方向：上-右-下-左（solid的位置）*/
  border-style: dashed solid dashed dashed;
}

/*小三角的边框，如果不需要，可将颜色值改变*/
.mod-triangle .t-border {
  border-color: transparent rgba(230, 233, 243, 1) transparent transparent;
  left: -1px;
}

.mod-triangle .t-inset {
  border-color: transparent #fff transparent transparent;
}

/*隐藏滚动条兼容谷歌*/
.scrollbar-overflow::-webkit-scrollbar {
  display: none;
}

/*隐藏滚动条兼容IE10+,兼容火狐*/
.scrollbar-overflow {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

aside > .aside-img-btns > .img-btn > .phone-container {
  width: 268px;
  height: 151px;
  left: -299px;
  box-sizing: border-box;
  padding: 0 0 0 20px;
  background: #ffffff;
  box-shadow: 1px 0px 2px 0px rgba(180, 186, 198, 0.3);
  border: 1px solid rgba(230, 233, 243, 0.5);
  border-radius: 4px;
}

aside > .aside-img-btns > .img-btn > .phone-container > .mod-triangle {
  position: absolute;
  top: 30%;
}

aside
  > .aside-img-btns
  > .img-btn
  > .phone-container
  > .phone-number
  > .number-item {
  display: flex;
  align-items: top;
  margin: 20px 0 10px;
}

aside
  > .aside-img-btns
  > .img-btn
  > .phone-container
  > .phone-number
  > .number-item
  > span {
  font-size: 16px;
  font-weight: 500;
  color: #575a64;
}

aside
  > .aside-img-btns
  > .img-btn
  > .phone-container
  > .phone-number
  > .number-item
  > div
  > p {
  margin: 0;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #1e49d3;
}