.mobile.showing .animatedMusic-m.geted .animatedMusic-m-content {
  background-image: url(../assets/images/art/gameMusic/bg@2x.png);
}
.mobile.showing .animatedMusic-m.geted .animatedMusic-m-content .swiper .swiper-slide .disc .pic .relativeBox .musicPic[type="laofei"] {
  background-image: url(../assets/images/art/half/laofei.jpg);
}
.mobile.showing .animatedMusic-m.geted .animatedMusic-m-content .swiper .swiper-slide .disc .pic .relativeBox .musicPic[type="qiangwei"] {
  background-image: url(../assets/images/art/half/qiangwei.jpg);
}
.mobile.showing .animatedMusic-m.geted .animatedMusic-m-content .swiper .swiper-slide .disc .pic .relativeBox .musicPic[type="jiangbei"] {
  background-image: url(../assets/images/art/half/jiangbei.jpg);
}
.mobile.showing .animatedMusic-m.geted .animatedMusic-m-content .swiper .swiper-slide .disc .pic .relativeBox .musicPic[type="StillAlight"] {
  background-image: url(../assets/images/art/half/nande.jpg);
}
.mobile.showing .animatedMusic-m.geted .animatedMusic-m-content .swiper .swiper-slide .disc .pic .relativeBox .bodian {
  background-image: url(../assets/images/art/gameMusic/bodian@2x.png);
}
.mobile.showing .animatedMusic-m.geted .animatedMusic-m-content .swiper .swiper-slide .disc .center .img {
  background-image: url(../assets/images/art/gameMusic/center.png);
}
.mobile.showing .animatedMusic-m {
  width: 100%;
  height: 101vh;
  height: calc(101 * var(--vh));
  background-color: #000;
  position: relative;
  overflow: hidden;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  position: relative;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .title {
  position: absolute;
  top: 3rem;
  left: 0.64rem;
  color: #80a7ff;
  font-family: 'MiSans-Bold';
  font-weight: 800;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .title .top {
  width: 100%;
  font-size: 0.48rem;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .title .bottom {
  font-size: 0.8rem;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .swiper {
  padding-top: 5.72rem;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 1.4rem;
  overflow: hidden;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .swiper .swiper-slide .disc {
  width: 10.72rem;
  height: 10.72rem;
  border-radius: 50%;
  background-color: #b3b7bd;
  position: relative;
  max-height: 34.896vh;
  max-width: 34.896vh;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .swiper .swiper-slide .disc .pic {
  width: 96.25%;
  height: 96.25%;
  border-radius: 50%;
  border: 2px solid #595959;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  z-index: 1;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .swiper .swiper-slide .disc .pic .relativeBox {
  width: 100%;
  height: 100%;
  position: relative;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .swiper .swiper-slide .disc .pic .relativeBox .musicPic {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .swiper .swiper-slide .disc .pic .relativeBox .bodian {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: 100% 100%;
  z-index: 2;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .swiper .swiper-slide .disc .circle {
  width: 91.38%;
  height: 91.38%;
  border: 1px solid rgba(243, 243, 243, 0.8);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0px);
  z-index: 2;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .swiper .swiper-slide .disc .center {
  width: 38.2%;
  height: 38.2%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0px);
  z-index: 3;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .swiper .swiper-slide .disc .center .img {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .swiper .prev {
  position: absolute;
  width: 0.64rem;
  height: 1.24rem;
  top: 50%;
  transform: translateY(-50%);
  left: 0.32rem;
  z-index: 4;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .swiper .prev img {
  width: 100%;
  height: 100%;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .swiper .next {
  position: absolute;
  width: 0.64rem;
  height: 1.24rem;
  right: 0.32rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .swiper .next img {
  width: 100%;
  height: 100%;
  transform: rotate(180deg);
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic {
  width: 100%;
  padding: 0 1rem;
  /* 时间显示 */
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .name {
  font-size: 0.72rem;
  color: #fff;
  margin-bottom: 0.1rem;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .writer {
  font-size: 0.56rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.8rem;
  font-family: 'MiSans-Light';
  width: 100%;
  display: flex;
  justify-content: space-between;
  /* 静态样式 - 中间高两边低 */
  /* 激活状态 - 添加动画 */
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .writer .music-m-visualizer {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0.04rem;
  height: 0.52rem;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .writer .bar {
  width: 0.08rem;
  background-color: #80a7ff;
  transition: all 0.3s ease;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .writer .bar:nth-child(1) {
  height: 100%;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .writer .bar:nth-child(2) {
  height: 40%;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .writer .bar:nth-child(3) {
  height: 70%;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .writer .bar:nth-child(4) {
  height: 50%;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .writer .bar:nth-child(5) {
  height: 30%;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .writer .music-m-visualizer.playing .bar {
  animation: wave-music 1s infinite ease-in-out;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .writer .music-m-visualizer.playing .bar:nth-child(1) {
  animation-delay: -0.8s;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .writer .music-m-visualizer.playing .bar:nth-child(2) {
  animation-delay: -0.6s;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .writer .music-m-visualizer.playing .bar:nth-child(3) {
  animation-delay: -0.4s;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .writer .music-m-visualizer.playing .bar:nth-child(4) {
  animation-delay: -0.2s;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .writer .music-m-visualizer.playing .bar:nth-child(5) {
  animation-delay: 0s;
}
@keyframes wave-music {
  0%,
  100% {
    height: 20%;
  }
  50% {
    height: 100%;
  }
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .progressBox {
  margin-bottom: 0.36rem;
  height: 0.31rem;
  position: relative;
  width: 100%;
  cursor: pointer;
  touch-action: none;
  /* 已播放进度 */
  /* 进度条滑块 */
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .progressBox .progress-bg {
  width: 100%;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .progressBox .progress-bar {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 2px;
  background-color: #fff;
  width: 0%;
  transition: width 0.1s linear;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .progressBox .progress-handle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.32rem;
  height: 0.32rem;
  background-color: #ffffff;
  border-radius: 50%;
  left: 0%;
  transition: opacity 0.2s, left 0.1s linear;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .time-display {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.2rem;
  transform-origin: 0 0;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .time-display span {
  font-size: 0.48rem;
  transform: scale(0.91667);
  color: rgba(255, 255, 255, 0.4);
  font-family: 'MiSans-Light';
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .time-display #m-current-time {
  transform-origin: 0 0;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .time-display #m-total-time {
  transform-origin: 100% 0;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .handel {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 calc(36% - 1.18rem);
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .handel .play,
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .handel .stop {
  width: 1.36rem;
  height: 1.36rem;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .handel .prev,
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .handel .prevOff,
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .handel .next,
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .handel .nextOff {
  width: 1rem;
  height: 0.88rem;
}
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .handel .next,
.mobile.showing .animatedMusic-m .animatedMusic-m-content .handelMusic .handel .nextOff {
  transform: rotate(180deg);
}
.mobile.showing .animatedMusic-m .mobileFooter {
  width: 100%;
  background-color: #000;
  color: #848484;
  font-size: 0.48rem;
  padding: 0 1rem 1.08rem;
  text-align: center;
  position: absolute;
  top: 100%;
  border-top: 1px solid #383739;
  padding-top: 1.52rem;
  font-family: 'MiSans-Regular';
}
.mobile.showing .animatedMusic-m .mobileFooter .m-title,
.mobile.showing .animatedMusic-m .mobileFooter .tips,
.mobile.showing .animatedMusic-m .mobileFooter .com {
  color: #fff;
  transform: scale(0.8333);
  width: 120%;
  transform-origin: 0 0;
  opacity: 0.5;
  line-height: 2.2;
}
.mobile.showing .animatedMusic-m .mobileFooter .m-title {
  margin-bottom: 0.24rem;
}
.mobile.showing .animatedMusic-m .mobileFooter .tips {
  margin-bottom: -2%;
}
.mobile.showing .animatedMusic-m .mobileFooter .footIconBox {
  position: relative;
}
.mobile.showing .animatedMusic-m .mobileFooter .footIconBox .icon {
  width: 31.467vw;
  margin-bottom: 0.4rem;
}
.mobile.showing .animatedMusic-m .mobileFooter .footIconBox .dot {
  width: 16px;
  height: 2px;
  background-color: #ffffff;
  opacity: 0.5;
  position: absolute;
}
.mobile.showing .animatedMusic-m .mobileFooter .footIconBox .dot.dot1 {
  left: -8px;
}
.mobile.showing .animatedMusic-m .mobileFooter .footIconBox .dot.dot2 {
  right: -8px;
}
@keyframes m-rayrotate {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  50% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(720deg);
  }
}