#hotspotEffect {
  position: relative;
}
#hotspotEffect .hotspot {
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 50%;
  /* background-color: initial;  */
  background: rgba(255, 255, 255, 0.8);
  opacity: 0.8;
}
#hotspotEffect .hotspot .out {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px; /* 初始宽度与内环相同 */
  height: 30px; /* 初始高度与内环相同 */
  border-radius: 50%;
  border: 2px solid rgba(0, 238, 230, 0.8);
  transform: translate(-50%, -50%);
  animation: expandFromEdge 1.5s ease-out infinite;
}

#hotspotEffect .hotspot .out1 {
  animation-delay: 0s;
}
#hotspotEffect .hotspot .out2 {
  animation-delay: 0.5s; /* 第二个光环延迟一半时间 */
}

#hotspotEffect .hotspot .in {
  width: 20px; /* 固定内环宽度 */
  height: 20px; /* 固定内环高度 */
  background: #00eee6;
  box-shadow: inset 0px 0px 4px 0px rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#hotspotEffect .tooltip {
  position: absolute;
  margin-left: 3px;
  left: 100%;
  top: 4px; /* ( 60 - (16 + 2*8) ) / 2    */
  /* transform: translateX(-50%) scale(0.8);  */
  transition: transform 0.3s ease, opacity 0.3s ease;

  margin-left: 3px;

  font-size: 16px;

  max-width: 300px;

  padding: 8px 10px;

  border-radius: 5px;

  background-color: rgb(58, 68, 84);
  background-color: rgba(58, 68, 84, 0.8);

  color: #fff;

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  cursor: pointer;

  opacity: 0;
  -ms-transform: translateX(-8px);
  -webkit-transform: translateX(-8px);
  transform: translateX(-8px);

  -webkit-transition: -ms-transform 0.3s, -webkit-transform 0.3s, transform 0.3s,
    opacity 0.3s;
  transition: -ms-transform 0.3s, -webkit-transform 0.3s, transform 0.3s,
    opacity 0.3s;
}
/* 悬停时显示 Tooltip，并且让它缩放 */
#hotspotEffect:hover .tooltip {
  opacity: 1;
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
/* 光环从内环边缘开始扩展 */
@keyframes expandFromEdge {
  0% {
    width: 20px;
    height: 20px;
    opacity: 0.8;
  }

  100% {
    width: 40px;
    height: 40px;
    opacity: 0;
  }
}