html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  user-select: none;
}
.circleBox {
  position: relative;
  width: 3rem;
  height: 1rem;
  left: 1.44rem;
  top: 0.98rem;
}
/* 扩散动画 */
.circle,
.circle1,
.circle2,
.circle3 {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  position: absolute;
  top: 50px;
  left: 15px;
}
.circle1,
.circle2,
.circle3 {
  /* animation: circleChange 2s 1s ease-out infinite; */
  animation-name: circleChange;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.circle1 {
  animation-delay: 1s;
}
.circle2 {
  animation-delay: 2s;
}
.circle3 {
  animation-delay: 3s;
}
.xxqg {
  position: absolute;
  bottom: 0.5rem;
  right: 0.6rem;
  width: 1.26rem;
  height: 0.3rem;
  background: url('../imgs/学习强国.png');
  background-size: contain;
  transform: scale(1.3);
  /* background-color: #fff; */
}
.hbrb {
  position: absolute;
  bottom: 0.4rem;
  left: 0.85rem;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #000;
  background: url('../imgs/湖北日报.png');
  background-size: contain;
}
@keyframes circleChange {
  0% {
    transform: scale(1);
    opacity: 0.95;
  }
  25% {
    transform: scale(2);
    opacity: 0.75;
  }
  50% {
    transform: scale(3);
    opacity: 0.5;
  }
  75% {
    transform: scale(4);
    opacity: 0.25;
  }
  100% {
    transform: scale(5);
    opacity: 0.05;
  }
}
.music {
  position: absolute;
  top: 0.1rem;
  right: 0.1rem;
  width: 0.3rem;
  height: 0.3rem;
  z-index: 9999;
  background: url('../imgs/no_play.png') no-repeat;
  background-size: contain;
  /* animation: rotate 1.5s infinite linear; */
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
div,
p {
  margin: 0;
  padding: 0;
}
body {
  /* background-color: #fff; */
  position: relative;
  max-width: 4.5rem;
  margin: 0 auto;
  background: linear-gradient(180deg, #d1eefe, #ffccca);
}

.w {
  font-size: 0.14rem;
  /* position: absolute;
  top: 50%;
  transform: translateY(-50%); */
  height: 100vh;
  position: relative;
}
.common {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.6rem;
  height: 6.4rem;
}
.wrapper {
  background: url('../imgs/首页背景.png') no-repeat center;
  background-size: cover;
  display: block;
}

/* .wrapper .point {
  width: 0.45rem;
  height: 0.45rem;
  right: 0.93rem;
  position: absolute;
  bottom: 1.8rem;
  z-index: 15;
} */
.wrapper .text {
  position: absolute;
  top: 0.3rem;
  left: 50%;
  transform: translateX(-50%);
  width: 3rem;
  height: 3rem;
  background: url('../imgs/首页文字.png') no-repeat;
  /* background-color: #000; */
  background-size: contain;
}
.wrapper .btn {
  position: absolute;
  width: 1.5rem;
  height: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1.85rem;
  z-index: 10;
  background: url('../imgs/btn.png') no-repeat center;
  background-size: cover;
}

.btn img {
  width: 100%;
  height: 100%;
}

.second-page {
  position: relative;
  background: url('../imgs/万能地图.png') no-repeat center;
  background-size: cover;
  display: none;
}
.second-page .map {
  width: 3.6rem;
  height: 6.4rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: url('../imgs/map.png') center no-repeat;
  /* background-color: #000; */
  background-size: contain;
}

.second-page .point {
  width: 0.45rem;
  height: 0.45rem;
  left: 0.55rem;
  position: absolute;
  bottom: 0.36rem;
  z-index: 5;
}

.second-page .point2 {
  width: 0.45rem;
  height: 0.45rem;
  right: 1.1rem;
  position: absolute;
  bottom: 0.36rem;
  z-index: 5;
}

.second-page .text {
  position: absolute;
  right: 0.2rem;
  top: 0;
  width: 1.8rem;
  height: 1.2rem;
  background: url('../imgs/首页文字.png') no-repeat;
  background-size: contain;
}
.pos {
  position: absolute;
  /* background-color: #fff;
  opacity: 0.5; */
}
.pos img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 清凉寨 */
.qlz {
  width: 0.5rem;
  height: 0.6rem;
  top: 0.94rem;
  left: 1.34rem;
}

.qingliangzhai {
  display: none;
  position: relative;
  background: url('../imgs/清凉寨.png') yinghuano-repeat center;
  background-size: contain;
}

.qingliangzhai .qlz-btn {
  position: absolute;
  bottom: 0.16rem;
  right: 0.285rem;
  width: 0.8rem;
  height: 0.26rem;
}
/* 武汉东湖樱园 */
.dhyhy {
  width: 0.55rem;
  height: 0.5rem;
  top: 3.17rem;
  left: 1.93rem;
}
.donghuyinghuayuan {
  display: none;
  position: relative;
  background: url('../imgs/东湖樱花园.png') no-repeat center;
  background-size: contain;
}
.donghuyinghuayuan .yinghua-btn {
  position: absolute;
  bottom: 0.18rem;
  right: 0.285rem;
  width: 0.8rem;
  height: 0.26rem;
  background-color: #000;
}

/* 武汉大学 */
.whdx {
  width: 0.47rem;
  height: 0.4rem;
  top: 3.75rem;
  left: 1.38rem;
}
.wuhandaxue {
  display: none;
  position: relative;
  background: url('../imgs/武汉大学.png') no-repeat center;
  background-size: contain;
}
.wuhandaxue .wh-btn {
  position: absolute;
  bottom: 0.15rem;
  right: 0.285rem;
  width: 0.8rem;
  height: 0.3rem;
}

/* 汉口江滩樱花园 */
.hkjtyhy {
  width: 0.4rem;
  height: 0.4rem;
  top: 3rem;
  left: 0.96rem;
}
.hankoujiangtan {
  display: none;
  position: relative;
  background: url('../imgs/汉口江滩.png') no-repeat center;
  background-size: contain;
}
.hankoujiangtan .hkjt-btn {
  position: absolute;
  bottom: 0.12rem;
  right: 0.285rem;
  width: 0.8rem;
  height: 0.3rem;
}

/* 堤角公园 */
.djgy {
  width: 0.45rem;
  height: 0.55rem;
  top: 2.25rem;
  left: 1.41rem;
}

.dijiaogongyuan {
  display: none;
  position: relative;
  background: url('../imgs/堤角公园.png') no-repeat center;
  background-size: contain;
}

.dijiaogongyuan .dj-btn {
  position: absolute;
  bottom: 0.19rem;
  right: 0.285rem;
  width: 0.8rem;
  height: 0.3rem;
}

/* 武汉晴川假日酒店 */
.whqcjr {
  width: 0.6rem;
  height: 0.35rem;
  top: 3.73rem;
  left: 0.44rem;
}
.qingchuanjiari {
  display: none;
  position: relative;
  background: url('../imgs/晴川酒店.png') no-repeat center;
  background-size: contain;
}
.qingchuanjiari .qcjr-btn {
  position: absolute;
  bottom: 0.19rem;
  right: 0.285rem;
  width: 0.8rem;
  height: 0.3rem;
}

/* 青山公园 */
.qsgy {
  width: 0.36rem;
  height: 0.4rem;
  top: 2.9rem;
  left: 1.53rem;
}
.qingshan {
  display: none;
  position: relative;
  background: url('../imgs/青山公园.png') no-repeat center;
  background-size: contain;
}
.qingshan .qs-btn {
  position: absolute;
  bottom: 0.16rem;
  right: 0.285rem;
  width: 0.8rem;
  height: 0.3rem;
}
/* 武汉花博汇 */
.hbh {
  width: 0.35rem;
  height: 0.4rem;
  top: 2.73rem;
  left: 0.55rem;
}
.huabohui {
  display: none;
  position: relative;
  background: url('../imgs/花博会.png') no-repeat center;
  background-size: contain;
}
.huabohui .hbh-btn {
  position: absolute;
  bottom: 0.19rem;
  right: 0.285rem;
  width: 0.8rem;
  height: 0.3rem;
}

/* 西北湖广场 */
.xbhgc {
  width: 0.33rem;
  height: 0.33rem;
  top: 3.26rem;
  left: 0.43rem;
}
.xibeihu {
  display: none;
  position: relative;
  background: url('../imgs/西北湖.png') no-repeat center;
  background-size: contain;
}
.xibeihu .xbh-btn {
  position: absolute;
  bottom: 0.16rem;
  right: 0.285rem;
  width: 0.8rem;
  height: 0.3rem;
}

/* 王家墩公园 */
.wjdgy {
  width: 0.45rem;
  height: 0.55rem;
  top: 2.41rem;
  left: 0.93rem;
}
.wangjiadun {
  display: none;
  position: relative;
  background: url('../imgs/王家墩.png') no-repeat center;
  background-size: contain;
}

.wangjiadun .wjd-btn {
  position: absolute;
  bottom: 0.16rem;
  right: 0.285rem;
  width: 0.8rem;
  height: 0.3rem;
}

.button {
  width: 1.1rem;
  height: 0.3rem;
  position: absolute;
  bottom: 0;
  left: 0;
}

/* 开花时间 */
/*  .button1 {
  bottom: 0.8rem;
  left: 0.3rem;
  background: url('../imgs/开花时间.png') no-repeat center;
  background-size: contain;
} */
/* 湖北赏樱地 */
/*    .button2 {
  left: 1.5rem;
  bottom: 0.8rem;
  background: url('../imgs/湖北赏樱地.png') no-repeat center;
  background-size: contain;
} */
/* 樱花小知识 */
/*   .button3 {
  left: 0.9rem;
  bottom: 0.35rem;
  background: url('../imgs/樱花小知识.png') no-repeat center;
  background-size: contain;
} */
/* 樱花品种 */
/*  .button4 {
  left: 2.1rem;
  bottom: 0.35rem;
  background: url('../imgs/樱花品种.png') no-repeat center;
  background-size: contain;
} */

/* 画花 */
.paint-flower {
  width: 1.5rem;
  height: 0.5rem;
  position: absolute;
  bottom: 0.6rem;
  left: 0.2rem;
  background: url('../imgs/画花记春.png') no-repeat center;
  background-size: contain;
}
/* 拾花 */
.pick-flower {
  width: 1.6rem;
  height: 0.6rem;
  position: absolute;
  bottom: 0.57rem;
  right: 0.2rem;
  background: url('../imgs/拾花酿春.png') no-repeat center;
  background-size: contain;
}

.draw {
  background: url('../imgs/画花1.png') no-repeat center;
  background-size: contain;
  display: none;
}

.draw .tip {
  width: 3.2rem;
  height: 0.35rem;
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  background: url('../imgs/在屏幕上画出你心中的樱花.png') no-repeat;
  background-size: contain;
}

.draw .draw-area {
  transform: translateX(-50%);
  position: absolute;
  width: 3.6rem;
  height: 6.6rem;
  top: 0rem;
  left: 50%;
}

.draw .draw-area img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.draw .btn {
  position: absolute;
  width: 1.2rem;
  height: 0.5rem;
  bottom: 0.7rem;
  left: 50%;
  transform: translateX(-50%);
  background: url('../imgs/画好了.png') no-repeat;
  background-size: cover;
}

.draw2 {
  display: none;
  background: url('../imgs/画花2.png') no-repeat center;
  background-size: contain;
}

.draw2 .btn2 {
  position: absolute;
  bottom: 2.01rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5rem;
  height: 0.4rem;
}

@font-face {
  font-family: FZLTCHJW;
  font-weight: bold;
  src: url('../font/FZLTCHJW.ttf');
}

.draw2 .title {
  position: absolute;
  top: 2.77rem;
  text-align: center;
  width: 2.32rem;
  font-family: FZLTCHJW;
  font-weight: 700;
  color: #ff799e;
  left: 0;
  font-size: 0.3rem;
  -webkit-text-stroke: 1px #fff;
}

/* 游戏区域 */

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: none;
  background: linear-gradient(180deg, #e5ced7, #8fbb66) !important;
  /* z-index: 2; */
}

.game {
  background: url('../imgs/拾花.png') no-repeat center;
  background-size: contain;
}
.game .start {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1.8rem;
  height: 1.8rem;
  top: 1.3rem;
  background-color: #000;
  background: url('../imgs/拾花游戏提示.png') no-repeat;
  background-size: contain;
}

.game .end {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  width: 2.6rem;
  bottom: 3rem;
  height: 1.7rem;
  background-color: #000;
  background: url('../imgs/拾花成功提示.png') no-repeat;
  background-size: contain;
  display: none;
}

.wine {
  background: linear-gradient(180deg, #d3dfcb, #95bca5);
  display: none;
}

.wine p {
  /* font-family: FZLTCHJW;
  text-align: center; */
  width: 1.6rem;
  height: 0.35rem;
  display: none;
  position: absolute;
  color: #fd8ea3;
  font-size: 0.3rem;
  font-weight: bold;
  top: 2.48rem;
  left: 0.22rem;
  -webkit-text-stroke: 1px #fff;
}

.wine img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wine .png-img {
  display: none;
}

.wine .success {
  width: 1.5rem;
  height: 0.5rem;
  position: absolute;
  bottom: 0.55rem;
  right: 0.2rem;
  display: none;
  background: url('../imgs/前往.png') no-repeat;
  background-size: contain;
}

.wine .goto {
  width: 1rem;
  height: 0.4rem;
  position: absolute;
  bottom: 0;
  right: 0;
  display: none;
  background: url('../imgs/前往.png') no-repeat;
  background-size: contain;
}

.flower-basket {
  display: none;
  width: 1.08rem;
  height: 1.7rem;
  position: absolute;
  bottom: 0.5rem;
  background-image: url('../imgs/花童.png');
  background-repeat: no-repeat;
  background-size: contain;
}
.score {
  position: absolute;
  width: 0.65rem;
  height: 0.5rem;
  top: 0.32rem;
  right: 1.32rem;
  text-align: center;
  line-height: 0.5rem;
  font-size: 0.36rem;
  color: #ff7898;
  font-weight: 700;
}
.gem-container {
  position: relative;
  background-color: pink;
}

.gem {
  width: 40px;
  height: 40px;
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  z-index: 10;
}

.gem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.arrow-left {
  display: none;
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  background: url('../imgs/arrow-left.png');
  background-size: contain;
  bottom: 0.2rem;
  left: 0.3rem;
  z-index: 999;
  border-radius: 50%;
}

.arrow-left:active {
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  background: url('../imgs/arrow-left-active.png');
  background-size: contain;
  bottom: 0.2rem;
  left: 0.3rem;
  z-index: 999;
  border-radius: 50%;
}
.arrow-right {
  display: none;
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  background: url('../imgs/arrow-right.png');
  background-size: contain;
  bottom: 0.2rem;
  right: 0.3rem;
  z-index: 999;
  border-radius: 50%;
}
.arrow-right:active {
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  background: url('../imgs/arrow-right-active.png');
  background-size: contain;
  bottom: 0.2rem;
  right: 0.3rem;
  z-index: 999;
  border-radius: 50%;
}
#yinghua {
  display: none;
}
#yinghua .box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.6rem;
  height: 6.4rem;
}
#yinghua .yh-btn {
  position: absolute;
  bottom: 0.11rem;
  right: 0.2rem;
  width: 1rem;
  height: 0.35rem;
  /* background-color: #fff;
  opacity: 0.5; */
}

.scene {
  width: 3.6rem;
  height: 6.4rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  display: none;
}
.scene .btn {
  position: absolute;
  bottom: 0.2rem;
  right: 0.3rem;
  width: 0.9rem;
  height: 0.3rem;
  /* background-color: #000; */
  /* opacity: 0.5; */
}

.scene .btn2 {
  position: absolute;
  bottom: 0.21rem;
  left: 0.3rem;
  width: 1rem;
  height: 0.3rem;
  /* background: url('../imgs/再玩一次.png') no-repeat;
  background-size: contain; */
}
.scene img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}