body {
  width: 100%;
  height: 100%;
  background: url("../img/bg-blue.png") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  text-align: center;
}

.tit-img {
  margin: 0.8rem 0 0.2667rem;
  width: 5.2533rem;
}

.container {
  position: relative;
  margin: 0 auto;
  width: 9.6rem;
  height: 68%;
  background: url("../img/road-bg.png") no-repeat;
  background-size: 100% 100%;
}
.top-sec {
  position: relative;
  margin: 0 auto;
  padding-top: 0.4rem;
  width: 4.2933rem;
}
.top-sec .points {
  width: 100%;
  height: 0.6667rem;
  line-height: 0.6667rem;
  background: rgba(255, 255, 255, 0.69);
  border-radius: 0.3467rem;
  font-size: 0.3733rem;
  color: #333333;
}
.top-sec .trophy {
  position: absolute;
  top: 20%;
  right: -22%;
  width: 1.0133rem;
}

.square {
  position: absolute;
  padding-top: 0.1333rem;
  width: 3.0933rem;
  height: 2.1067rem;
  background: #34a7ff;
  border-radius: 0.4rem;
}
.square img {
  margin: 0 auto;
  display: block;
  width: 86%;
}
.square .done {
  display: none;
  z-index: 9;
  position: absolute;
  top: -18%;
  right: -10%;
  width: 1.1467rem;
}
.square .unopened {
  display: none;
  position: absolute;
  top: 0.1333rem;
  left: 7%;
  width: 86%;
  height: 1.52rem;
  line-height: 1.52rem;
  text-align: center;
  background: rgba(102, 102, 102, 0.8);
  border-radius: 0.2667rem;
  font-size: 0.4267rem;
  color: #ffffff;
}
.square .tit {
  font-size: 0.3467rem;
  line-height: 0.4267rem;
  color: #ffffff;
}
.square0 {
  background: none;
  top: 15%;
  left: 6%;
}
.square0 .pointer {
  width: 65%;
}
.container .person {
  width: 0.8rem;
  z-index: 99;
  position: absolute;
  top: 17%;
  left: 30%;

  /* animation-name: moveAnimation; 
    animation-duration: 2s; 
    animation-fill-mode: forwards;  */
}
/* @keyframes moveAnimation { 
    from { left: 0; top: 0; } 
    to { left: 100px; top: 500px; } 
} */
.square1 {
  top: 34%;
  left: 6%;
}
.square2 {
  top: 55%;
  left: 6%;
}
.square3 {
  top: 75%;
  left: 6%;
}
.square4 {
  top: 75%;
  right: 6%;
}
.square5 {
  top: 55%;
  right: 6%;
}
.square6 {
  top: 34%;
  right: 6%;
}
.square7 {
  top: 15%;
  right: 6%;
}
.square7 .flag {
  width: 1.52rem;
  position: absolute;
  top: -55%;
  right: -15%;
}

/*  */
.popup-rank {
  width: 7.3867rem;
  /* height: 11.1467rem; */
  border-radius: 0.2133rem;
  background: rgba(182, 233, 255, 0.89);
}
.rank-bg {
  position: relative;
  display: inline-block;
  border-radius: 0.2133rem 0.2133rem 0 0;
  height: 2.24rem;
  background: linear-gradient(178deg, #63d0ff 0%, rgba(182, 233, 255, 0.89) 100%);
}
.rank-bg .medalimg {
  position: absolute;
  width: 0.8rem;
  top: -7%;
  right: 4%;
}
.rank-tit {
  margin: 0 auto;
  margin-top: -0.5333rem;
  width: 7.0133rem;
  height: 0.9867rem;
  background: linear-gradient(269deg, #5dbdff 0%, #22a6ff 71%, #0098ff 100%);
  border-radius: 0.16rem;
  font-weight: bold;
  font-size: 0.64rem;
  letter-spacing: 4px;
  color: #ffffff;
}
.rank-tag {
  transform: rotate(-6deg);
  margin-top: 0.1867rem;
  margin-left: 0.2267rem;
  width: 2.6933rem;
  height: 0.7467rem;
  line-height: 0.7467rem;
  background: #ffa32a;
  border-radius: 0.1333rem;
  font-weight: bold;
  font-size: 0.32rem;
  letter-spacing: 1px;
  color: #ffffff;
}
.ranktop {
  margin-top: 0.1467rem;
  width: 7.3867rem;
  height: 0.72rem;
  background: #4fc3ff;
  border-radius: 0.2133rem;
  border: 0.0267rem solid #ffffff;
}
.ranktop span {
  width: 33.33%;
  font-weight: bold;
  font-size: 0.3733rem;
  color: #ffffff;
}
.ranklist {
  padding: 0.4rem 0;
  background: #fff;
  border-radius: 0.2133rem;
  min-height: 5.33rem;
}
.ranklist .item span {
  width: 33.33%;
  font-weight: 500;
  font-size: 0.32rem;
  color: #333333;
  line-height: 0.7867rem;
}
.ranklist .item .medal {
  width: 0.5867rem;
}

.school-logo {
  display: block;
  width: 3.2rem;
  height: 0.7467rem;
  margin: 0.2667rem auto;
  display: none;
}

.popup-tips .rules-txt {
  text-align: left;
  font-size: 0.3733rem;
  line-height: 0.64rem;
}