body, html, p {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: 'iconfont';
  src: url('https://jowei.oss-us-west-1.aliyuncs.com/style/iconfont/iconfont.eot');
  src: url('https://jowei.oss-us-west-1.aliyuncs.com/style/iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
  url('https://jowei.oss-us-west-1.aliyuncs.com/style/iconfont/iconfont.woff') format('woff'),
  url('https://jowei.oss-us-west-1.aliyuncs.com/style/iconfont/iconfont.ttf') format('truetype'),
  url('https://jowei.oss-us-west-1.aliyuncs.com/style/iconfont/iconfont.svg#iconfont') format('svg');
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}


@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}


.m-box {
  position: absolute;
  max-width: 480px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
}

.m-cover {
  position: relative;
  padding-top: 5%;
  padding-bottom: 6%;
}

.m-cover img {
  width: 68%;
  margin: 0 auto;
  display: block;
  box-shadow: 0 5px 15px 1px rgba(15, 13, 29, 0.28);
}

.m-lrc-box {
  position: relative;
  height: 72px;
  width: 100%;
  overflow: hidden;
  background: #fff;
  margin-bottom: 6%;
}
.m-lrc-scroll-box {
  color: #9B9C9F;
  font-size: 11px;
  text-align: center;
  line-height: 24px;
}

.m-lrc-scroll-box p.act {
  color: #000;
}

.m-op-box {
  position: relative;
  z-index: 3;
  color: #8f9092;
  padding: 0 15%;
  text-align: center;
}
a.m-op-pre, a.m-op-next { padding: 6% 2%; }
a.m-op-pre .iconfont, a.m-op-next .iconfont { font-size: 16px; }
a.m-op-pre { float: left; }
a.m-op-next { float: right; }
.m-op-play {
  position: relative;
  display: inline-block;
  padding: 9%;
  border: 1px solid #b3b6bd;
  border-radius: 100%;
  color: #F41323;
}
.op-btn-i {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.op-btn-i .iconfont { font-size: 18px; }
.op-btn-i.miss { display: none; }
.op-btn-i#play_btn .iconfont {
  padding-left: 6px;
  margin-top: -3px;
}
.op-btn-i.loading {
  animation: loading 1s linear infinite;
  -webkit-animation: loading 1s linear infinite;
}


.m-time-box {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  padding-top: 15px;
  width: 70%;
  margin: 0 auto;
  background: #ffffff;
  z-index: 2;
  color: #969696;
  font-size: 11px;
}
.m-time-cur {
  float: left;
  color: #F41323;
}
.m-time-duration {
  float: right;
  color: #CCD4DA;
}
.m-time-line, .m-time-line em {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #CCD4DA;
}
.m-time-line em {
  width: 1px;
  background: #F41323;
  z-index: 1;
}
.m-time-line em:before {
  content: '';
  position: absolute;
  top: 4px;
  right: -4px;
  padding: 4px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 1px 8px 1px rgba(0,0,0,.3);
}


.m-frequency-box {
  position: absolute;
  bottom: 39px;
}
.m-frequency-box canvas {
  width: 100%;
  box-sizing: border-box;
  padding: 1% 15%;
  height: 50px;
}