.ph-audio-block {
  position: relative;
  width: 100%;
  height: 1.12rem;
  padding-left: 0.8rem;
  margin-left: 0.21333rem;
  color: #fff;
  background-color: #ffc21e;
  border-radius: 0.16rem;
}
.ph-audio-block.is-pad {
  height: 0.50781rem;
  padding-left: 0.29297rem;
  margin-left: 0.11719rem;
  border-radius: 0.05859rem;
}
.ph-audio-block.is-pad::before {
  width: 0.14648rem;
  height: 0.14648rem;
  border-radius: 0.0293rem;
  -webkit-transform: translate(-40%, -50%) rotate(45deg);
          transform: translate(-40%, -50%) rotate(45deg);
}
.ph-audio-block.is-pad .duration-text {
  height: 0.50781rem;
  margin-left: 0.07813rem;
  font-size: 0.19531rem;
  line-height: 0.50781rem;
}
.ph-audio-block.is-pad .animation-container {
  width: 0.19531rem;
  height: 0.21484rem;
  margin-left: 0.11719rem;
}
.ph-audio-block.is-pad .animation-container .animation-item {
  width: 0.01953rem;
  height: 0.13672rem;
  margin-top: 0.01953rem;
  margin-left: 0.01953rem;
  border-radius: 0.01953rem;
}
.ph-audio-block.on-play .animation-item {
  -webkit-animation: 0.5s audio-item-animation infinite;
          animation: 0.5s audio-item-animation infinite;
}
.ph-audio-block.on-play .animation-item:nth-child(1) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.ph-audio-block.on-play .animation-item:nth-child(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.ph-audio-block.on-play .animation-item:nth-child(3) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.ph-audio-block.on-play .animation-item:nth-child(4) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.ph-audio-block::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: 0.26667rem;
  height: 0.26667rem;
  background-color: #ffc21e;
  border-radius: 0.08rem;
  -webkit-transform: translate(-40%, -50%) rotate(45deg);
          transform: translate(-40%, -50%) rotate(45deg);
}
.ph-audio-block .animation-container {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  display: inline-block;
  width: 0.48rem;
  height: 0.48rem;
  margin-left: 0.32rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.ph-audio-block .animation-container .animation-item {
  display: inline-block;
  width: 0.05333rem;
  height: 0.37333rem;
  margin-top: 0.05333rem;
  margin-left: 0.05333rem;
  vertical-align: top;
  background-color: #fff;
  border-radius: 0.05333rem;
}
.ph-audio-block .animation-container .animation-item:nth-child(1) {
  -webkit-transform: scale(1, 0.4);
          transform: scale(1, 0.4);
}
.ph-audio-block .animation-container .animation-item:nth-child(2) {
  -webkit-transform: scale(1, 0.8);
          transform: scale(1, 0.8);
}
.ph-audio-block .animation-container .animation-item:nth-child(3) {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
.ph-audio-block .animation-container .animation-item:nth-child(4) {
  -webkit-transform: scale(1, 0.6);
          transform: scale(1, 0.6);
}
.ph-audio-block .duration-text {
  display: inline-block;
  height: 1.12rem;
  margin-left: 0.21333rem;
  font-size: 0.53333rem;
  line-height: 1.12rem;
  vertical-align: top;
}
@-webkit-keyframes audio-item-animation {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(1, 0.75);
            transform: scale(1, 0.75);
  }
  50% {
    -webkit-transform: scale(1, 0.5);
            transform: scale(1, 0.5);
  }
  75% {
    -webkit-transform: scale(1, 0.25);
            transform: scale(1, 0.25);
  }
}
@keyframes audio-item-animation {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(1, 0.75);
            transform: scale(1, 0.75);
  }
  50% {
    -webkit-transform: scale(1, 0.5);
            transform: scale(1, 0.5);
  }
  75% {
    -webkit-transform: scale(1, 0.25);
            transform: scale(1, 0.25);
  }
}