@media (max-width: 1200px) {
  footer.footer {
    .footer-wrap {
      .music-info-wrap {
        .button-wrap {
          .music-volume-gauge-wrap {
            width: auto;
            margin-right: 0;
            .music-volume-gauge-wrap-in {
              display: none;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 960px) {
  footer.footer {
    .footer-wrap {
      .music-info-wrap {
        .music-info-wrap-in {
          height: 5rem;
          padding: 1rem;

          .img-wrap {
            display: none;
          }
        }

        .music-controller-wrap {
          button, a {
            width: 2.5rem;
            height: 2.5rem;
            padding: 0.5rem;

            .xi {
              font-size: 1.15rem;
            }
            &#music-controll-play .xi {
              font-size: 1.5rem;
            }
          }
        }

        .button-wrap {
          button, a {
            width: 3rem;
            height: 3rem;
            padding: 0.5rem;

            .xi {
              font-size: 1.15rem;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 760px) {
  footer.footer {
    .footer-wrap {
      .music-info-wrap {
        .music-info-wrap-in {
          height: auto;
          justify-content: center;
          width: 100%;
          padding: 1rem;
          flex: 1;
          overflow: hidden;

          .title-wrap {
            display: block;
            align-items: flex-start;
            overflow: hidden;

            .artist {
              margin-top: 0.25rem;
            }
          }
        }

        .music-controller-wrap {
          width: 12rem;
          padding-right: 1rem;
          justify-content: flex-end;
          flex: none;

          #music-controll-reeat,
          #music-controll-shuffle {
            display: none;
          }

          .only-760 {
            display: flex;
          }
        }

        .button-wrap {
          display: none;
        }
      }
    }
  }
}