* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

@keyframes playIco {
  0% {
    background: url("../imgs/playIco1.png") center/0.5333333333rem 0.48rem no-repeat; }
  25% {
    background: url("../imgs/playIco2.png") center/0.5333333333rem 0.48rem no-repeat; }
  50% {
    background: url("../imgs/playIco3.png") center/0.5333333333rem 0.48rem no-repeat; }
  75% {
    background: url("../imgs/playIco4.png") center/0.5333333333rem 0.48rem no-repeat; }
  100% {
    background: url("../imgs/playIco5.png") center/0.5333333333rem 0.48rem no-repeat; } }
html, body {
  width: 100%;
  height: 100%;
  background: #fff; }

ul, li, ol {
  list-style: none; }

#container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0.4rem 0 0.8rem; }
#container > .goHome {
  position: absolute;
  left: 0.4rem;
  top: 0.4rem;
  width: 0.64rem;
  height: 0.64rem;
  background: url("../imgs/home.png") center no-repeat/0.64rem; }
#container > .bookCover {
  display: block;
  margin: 0 auto;
  width: 5.8266666667rem;
  height: 5.8266666667rem;
  box-shadow: 5px 5px 5px #666; }
#container > .contral1 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 5.8266666667rem;
  margin: 0 auto; }
#container > .contral1 > img {
  display: block;
  width: 0.5333333333rem;
  height: 0.5466666667rem; }
#container > .contral1 > p {
  font-size: 0.32rem;
  text-align: center;
  line-height: 0.6rem;
  height: 0.64rem;
  border: 0.04rem solid #65ADEF;
  padding: 0 0.1333333333rem;
  border-radius: 0.0533333333rem;
  color: #65ADEF; }
#container > .names {
  margin: 0 auto;
  width: 5.8266666667rem; }
#container > .names > h2 {
  line-height: 0.6rem;
  font-size: 0.4266666667rem;
  color: #333;
  margin-bottom: 0.0666666667rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }
#container > .names p {
  font-size: 0.32rem;
  line-height: 0.4533333333rem;
  color: #999;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }
#container .duration {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.64rem; }
#container .duration > p {
  line-height: 0.4533333333rem;
  color: #858383;
  font-size: 0.32rem; }
#container .duration > .progress {
  width: 6.6666666667rem;
  height: 0.0666666667rem;
  background: #ADD2F9;
  position: relative; }
#container .duration > .progress > div:last-child {
  width: 0.3333333333rem;
  height: 0.3333333333rem;
  position: absolute;
  left: -0.1333333333rem;
  top: -0.1333333333rem;
  border-radius: 0.3333333333rem;
  background: #007AFF;
  overflow: hidden; }
#container .duration > .progress > div:first-child {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: #007AFF;
  width: 0; }
#container .contral2 {
  display: flex;
  padding: 0 0.8266666667rem;
  justify-content: space-between;
  align-items: center; }
#container .contral2 > img:first-of-type {
  display: block;
  width: 0.9066666667rem;
  height: 0.5866666667rem; }
#container .contral2 > img:nth-of-type(2) {
  display: block;
  width: 0.6133333333rem;
  height: 0.6133333333rem; }
#container .contral2 > div {
  width: 1.84rem;
  height: 1.84rem;
  border-radius: 1.84rem;
  background-image: url("../imgs/player.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.84rem;
  overflow: hidden; }
#container .contral2 > img:nth-of-type(3) {
  display: block;
  width: 0.6133333333rem;
  height: 0.6133333333rem; }
#container .contral2 > img:last-of-type {
  display: block;
  width: 0.9066666667rem;
  height: 0.5866666667rem; }
#container .setPlaybackRateMask {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
  background: rgba(51, 51, 51, 0.8);
  display: none; }
#container .setPlaybackRateMask > div {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff; }
#container .setPlaybackRateMask > div > ul > li {
  padding: 0 0.5333333333rem;
  line-height: 1.1866666667rem;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.3733333333rem;
  color: #999;
  position: relative; }
#container .setPlaybackRateMask > div > ul > li.act {
  color: #007AFF; }
#container .setPlaybackRateMask > div > ul > li.act::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -0.3066666667rem;
  display: block;
  right: 0.5333333333rem;
  color: #007AFF;
  width: 0.6133333333rem;
  height: 0.6133333333rem;
  background: url("../imgs/checked.png") center/0.6133333333rem no-repeat; }
#container .setPlaybackRateMask > div > p {
  line-height: 1.6rem;
  font-size: 0.48rem;
  color: #111;
  text-align: center; }
#container .chapterListMask {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
  background: rgba(51, 51, 51, 0.8);
  display: none; }
#container .chapterListMask > div {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  height: 7.7333333333rem; }
#container .chapterListMask > div > div {
  position: absolute;
  left: 0;
  bottom: 1.6rem;
  right: 0;
  top: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; }
#container .chapterListMask > div > div > ul > li {
  padding: 0 0.5333333333rem;
  height: 1.1866666667rem;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.3733333333rem;
  color: #999;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center; }
#container .chapterListMask > div > div > ul > li > div:first-child {
  width: 0.8rem;
  height: 0.48rem; }
#container .chapterListMask > div > div > ul > li > div:first-child > div:first-child {
  animation: playIco 1.5s infinite;
  width: 0.5333333333rem;
  height: 0.48rem; }
#container .chapterListMask > div > div > ul > li > div:nth-child(2) {
  width: 6.9333333333rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left; }
#container .chapterListMask > div > div > ul > li.act {
  color: #007AFF; }
#container .chapterListMask > div > p {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  line-height: 1.6rem;
  font-size: 0.48rem;
  color: #111;
  text-align: center; }
#container .copyright {
  position: fixed;
  left: 0;
  bottom: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.2666666667rem;
  text-align: center;
  width: 100%;
  color: #666; }
#container .summaryMask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.8);
  display: none; }
#container .summaryMask > div {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  transform: translate(-50%, -50%); }
#container .summaryMask > div > h2 {
  font-size: 0.4rem;
  font-weight: normal;
  color: #fff; }
#container .summaryMask > div > p {
  color: #fff;
  line-height: 0.5333333333rem;
  font-size: 0.32rem; }

.mask {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  z-index: 999999; }
.mask > div {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 0.1333333333rem; }
.mask > div > div {
  line-height: 1.0666666667rem;
  padding: 0 0.4rem;
  font-weight: bold;
  font-size: 0.4rem;
  border-bottom: 1px solid #e5e5e5; }
.mask > div > p {
  text-align: center;
  font-size: 0.32rem;
  color: #666;
  padding: 0.5333333333rem; }

/*# sourceMappingURL=index.css.map */