body * {
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-image: url("//a.zccdn.cn/j/616e44c3c03cf61bb0b2dd14.jpg");
}

.back {
  position: absolute;
  top: 5px;
  left: 6px;
  width: 110px;
  cursor: pointer;
}

.music {
  position: absolute;
  top: 0;
  right: 0;
  margin: 11px;
  width: 22px;
  cursor: pointer;
}

.adm_top {
  position: absolute;
  right: 40px;
  top: 9px;
}

.slogan {
  width: calc(100% - 80px);
  margin: 9px 40px 0px;
}


.zzhome .go_btn {
  width: 30vw;
  position: fixed;
  top: 140vw;
  left: 35vw;
}

.zzhome .main {
  padding: 5vw;
  width: 100vw;
}

.zzmap .map {
  position: relative;
  padding: 0px 10px;
  width: 100vw;
}

.zzmap .map a {
  position: absolute;
  width: 18vw;
  height: 11vw;
  text-align: center;
  white-space: nowrap;
  font-size: 14px;
  color: rgb(185, 87, 29);
}

.zzmap .map a img {
  width: 15px;
  margin-left: 8vw;
  display: block;
}

.zzmap .topright {
  position: absolute;
  top: 90px;
  right: 10px;
  width: 90px;
}

.zzmap .topright img {
  cursor: pointer;
  margin-bottom: 15px;
}

.zzmap .user img {
  border-radius: 50%;
  width: 40%;
}

.zzmap .user span {
  position: absolute;
  bottom: 28px;
  right: 0px;
  font-size: 12px;
  color: rgb(185, 87, 29);
}

.zzmap .score {
  position: relative;
  display: inline-block;
}

.zzmap .score span {
  position: absolute;
  top: 1px;
  right: 9px;
  color: white;
}

.zzmap .pop {
  display: none;
}

.zzmap .pop section {
  color: rgb(45, 45, 45);
  z-index: 99;
  border-radius: 9px;
  position: fixed;
  top: 15vw;
  left: 5vw;
  background: white;
  padding: 20px;
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
}

.zzmap .pop h2 {
  color: rgb(81, 81, 81);
  margin-top: 0px;
}

.zzmap .pop strong {
  margin: 0px 6px 0px 2px;
}

.zzmap .pop p {
  line-height: 1.5;
  padding: 5px 0px;
}

.zzmap .pop .close {
  cursor: pointer;
  background: white;
  border-radius: 50%;
  padding: 9px;
  width: 40px;
  height: 40px;
  position: absolute;
  top: calc(14vw - 13px);
  right: calc(5vw - 14px);
  z-index: 100;
  border: 1px solid rgb(217, 217, 217);
}

.zzlibrary section {
  margin: 0px 5vw;
}

.zzlibrary section div {
  padding: 8px 0px;
  border-bottom: 1px dashed rgb(142, 142, 142);
}

.zzlibrary section p {
  overflow: visible;
  white-space: nowrap;
}

.zzlibrary h2 {
  margin: 9px 0px;
}

.zzlibrary h4 {
  margin: 0px 0px 5px;
}

.zzlibrary .btn {
  position: absolute;
  left: calc(50vw - 60px);
  bottom: 20px;
  width: 120px;
}

.zzquiz .question {
  margin: 25vw 8vw;
}

.zzquiz .zp126item {
  padding: 5px;
}

.zzranking {
  color: rgb(76, 76, 76);
}

.zzranking h2 {
  text-align: center;
  color: rgb(243, 99, 30);
}

.zzranking h2 span {
  padding: 0px 20px;
}

.zzranking header {
  font-size: 18px;
  border-bottom: 1px solid rgb(149, 149, 149);
}

.zzranking .rank {
  position: relative;
  margin: 0px 9vw;
  height: 50px;
}

.zzranking .medal {
  position: absolute;
  left: -2px;
  top: 13px;
  width: 20px;
}

.zzranking .rank span {
  position: absolute;
  top: 15px;
}

.zzranking div.rank {
  padding: 4px;
  border-bottom: 1px solid rgb(239, 239, 239);
}

.zzranking .rank .avatar {
  position: absolute;
  top: 9px;
  left: 20vw;
  width: 30px;
  border-radius: 50%;
}

.zzranking .rank .name {
  left: calc(20vw + 40px);
  max-width: 30vw;
  overflow: hidden;
  white-space: nowrap;
}

.zzranking .rank span:last-child {
  position: absolute;
  right: 9px;
}