/* 爆炸图 */
.rotation-mobile{
  display: none;
}
.explosion-img-2 {
  text-align: center;
  position: relative;
  width: 75%;
  margin: 260px auto;
}

.explosion-img-2 .bg-img {
  width: 100%;
  height: auto;
  z-index: 1;
}

.explosion-img-2 .tag {
  font-size: 32px;
  line-height: 26px;
  text-align: center;
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background-color: #14b5d9;
  position: relative;
  z-index: 1;
  cursor: pointer;
  /* transition: all 0.3s ease; */
}

.explosion-img-2 .tag.collapsed::before {
  content: "+";
}

.explosion-img-2 .tag.expanded::before {
  content: "-";
}

.explosion-img-2 .content {
  transition: all 0.3s ease;
  opacity: 1;
  visibility: visible;
  transform-origin: top center;
}

.explosion-img-2 .content.hidden {
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0);
}

.content.hidden + .tag::before {
  line-height: 1;
}

.explosion-img-2 .tag::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.8);
  /* 添加动画效果 */
  animation: scaleUp 3s cubic-bezier(0.2, 1, 0.2, 1) infinite;
  transform: scale(0.2);
  z-index: 1;
  opacity: 0;
}

@keyframes scaleUp {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(2);
  }
}

.explosion-img-2 .item {
  position: absolute;
}

.explosion-img-2 .item1 {
  left: 25%;
  top: 40%;
}

.explosion-img-2 .item2 {
  left: 42%;
  top: 39%;
}
.explosion-img-2 .item3 {
  left: 56%;
  top: 20%;
}
.explosion-img-2 .item4 {
  left: 70%;
  top: 17%;
}
.explosion-img-2 .item5 {
  left: 82%;
  top: 22%;
}
.explosion-img-2 .item6 {
  left: 78%;
  top: 31%;
}
.explosion-img-2 .item7 {
  left: 78%;
  top: 49%;
}
.explosion-img-2 .item8 {
  left: 69%;
  top: 68%;
}
.explosion-img-2 .item9 {
  left: 62%;
  top: 60%;
}
.explosion-img-2 .item10 {
  left: 47%;
  top: 69%;
}
.explosion-img-2 .item11 {
  left: 31%;
  top: 73%;
}
.explosion-img-2 .item12 {
  left: 22%;
  top: 67%;
}
.explosion-img-2 .item13 {
  left: 18%;
  top: 52%;
}
.explosion-img-2 .item14 {
  left: 16%;
  top: 35%;
}

.explosion-img-2 .item1 .content {
  transform: translate(-335px, -453px);
}
.explosion-img-2 .item2 .content {
  transform: translate(-260px, -545px);
}
.explosion-img-2 .item3 .content {
  transform: translate(-84px, -431px);
}
.explosion-img-2 .item4 .content {
  transform: translate(16px, -372px);
}
.explosion-img-2 .item5 .content {
  transform: translate(116px, -273px);
}
.explosion-img-2 .item6 .content {
  transform: translate(271px, -113px);
}
.explosion-img-2 .item7 .content {
  transform: translate(280px, -4px);
}
.explosion-img-2 .item8 .content {
  transform: translate(260px, 30px);
}
.explosion-img-2 .item9 .content {
  transform: translate(140px, 200px);
}
.explosion-img-2 .item10 .content {
  transform: translate(10px, 200px);
}
.explosion-img-2 .item11 .content {
  transform: translate(-73px, 137px);
}
.explosion-img-2 .item12 .content {
  transform: translate(-309px, 26px);
}
.explosion-img-2 .item13 .content {
  transform: translate(-399px, -109px);
}
.explosion-img-2 .item14 .content {
  transform: translate(-343px, -219px);
} 

.explosion-img-2 .content {
  position: absolute;
  width: 200px;
  text-align: center;
  z-index: 1;
}

.explosion-img-2 .content img {
  width: 120px;
  height: 120px;
  border-radius: 120px;
  background-color: #ffffff;
}

.explosion-img-2 .content p {
  font-size: 17px;
  text-align: center;
  margin: 20px 0;
}

/* 连线样式 */
.explosion-img-2 .connecting-line {
  position: absolute;
  background-color: #14b5d9;
  height: 1px;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
  transform: scaleX(1);
  transform-origin: left center;
}

.explosion-img-2 .connecting-line.hidden {
  opacity: 0;
  transform: scaleX(0);
  pointer-events: none;
  display: none;
}
@media (max-width: 1700px){
  .explosion-img-2 {
    transform: scale(0.8);
  }
}
@media (max-width: 1450px){
  .explosion-img-2 {
    transform: scale(0.6);
  }
}


@media (max-width: 767px) {
  .rotation{
    display: none;
  }
  .rotation-mobile {
    display: block;
    /*transform: translateX(-30px);*/
  }

  .rotation-mobile .explosion-img-2 {
    width: 100%;
    transform: scale(1);
    -webkit-transform: scale(1);
    margin:50px auto;
	margin-top: 115px;
  }

  .explosion-img-2 .tag {
    font-size: 14px;
    height: 20px;
    width: 20px;
    line-height: 18px;

  }

  .explosion-img-2 .connecting-line {
    display: none;
  }

  .tag .mobile-content {
    position: absolute;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    padding: 5px;
    left: -40px;
    bottom: 50px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
  }

  .mobile-content p {
    font-size: 12px;
    text-align: center;
  }

  .mobile-content img {
    width: 60px;
    height: 60px;
  }

  /* .rotation-mobile .tag:hover .mobile-content {
    display: flex;
  } */

  .tag.active .mobile-content {
    display: flex !important;
  }

  .tag.active .tag-icon {
    transform: rotate(45deg);
  }
}