#body {
  width:100vw;
  height:100vh;
  background-color: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.puzzleContent {
  z-index:100;
  position: absolute;
  left:0;
  top:0;
  width:100vw;
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.bgShow {
  width:100vw;
  position: absolute;
  top:-70px;
  left:0;
  z-index:0;
}
.topIcon {
  width:5.5rem;
  height:1.76rem;
  border-radius: 0.21rem;
  font-size:1rem;
  text-align: center;
  line-height: 1.76rem;
  position: fixed;
  background:#F08A70;
  color:#fff;
  top:0.8rem;
  z-index:11;
}
.LeftIcon {
  left:1.13rem;
}
.rightIcon {
  right:0.67rem;
}
.puzzle {
  width:21.67rem;
  height: 21.67rem;
  position: absolute;
  left:50%;
  top:17rem;
  transform: translateX(-50%);
  border: 2px solid rgba(242, 145, 121, 0.51);
}
.puzzleBox {
  width:19.75rem;
  height:19.75rem;
  margin:0.96rem;
}
.puzzleBlack {
  width:19.75rem;
  height:19.75rem;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-wrap: wrap;
  z-index:100;
}
.puzzleBlack > div {
  width:6.58rem;
  height:6.67rem;
  box-sizing: border-box;
  border: 0.08rem solid rgba(242, 145, 121, 0.51);
  background: rgba(0, 0, 0, 0.6);
}
.puzzleBlack >.showPuzzle {
  background: transparent;
}
.tasktips {
  width: 11.83rem;
  display: block;
  margin:40rem auto 1.2rem;
  position: relative;
  z-index:10;
}
.task {
  display: block;
  margin:0 auto;
  width: 9.42rem;
  position: relative;
  z-index:10;
}
.tipsindex {
  margin:0rem auto;
  width: 12.13rem;
  display: block;
  position: relative;
  z-index:10;
}
.bannerSwiper {
  width:22rem;
  height:11rem;
  margin:0 auto;
}
.bannerSwiperSlide > img {
  width:22rem;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  display: block;
}
.leftSwiperIcon {
  width:1.54rem;
  height:2.74rem;
  position: absolute;
  left:3.25rem;
  top:49rem;
  z-index:100;
}
.rightSwiperIcon {
  width:1.54rem;
  height:2.74rem;
  position: absolute;
  right:3.25rem;
  top:49rem;
  z-index:100;
}
.swiper-slide >div{
  background: #F08A70;
  border-radius: 0.71rem;
  text-align: center;
  padding:0.33rem 0.88rem;
  color:#fff;
  display: inline-block;
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:1.7rem;
}
.ruleShow {
  width:100vw;
  height:100vh;
  position: fixed;
  left:0;
  top:0;
  z-index:102;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ruleShow > img {
  display: block;
  width:100vw;
}
.back {
  font-size: 1rem;
  color:#fff;
  position: fixed;
  left:1.13rem;
  top:1.59rem;
  text-align: center;
  line-height: 1.76rem;
  width: 5.5rem;
  height: 1.76rem;
  border-radius: 0.21rem;
  background: #F08A70;
  z-index:104;
}
.reward {
  width:100vw;
  height:100vh;
  background-image: url('https://oss.eau-thermale-avene.cn/activity/AV/puzzle/rewardbg.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: 0px -70px;
  position: fixed;
  top:0;
  left:0;
  z-index:102;
}
.puzzlecover {
  position: fixed;
  left:0;
  top:-30px;
  width: 100vw;
  z-index:103;
}
.topMember {
  margin-top: 12rem;
  position: relative;
}
.topMember > .three {
  width:7.8rem;
  height:28rem;
  background-position: left bottom;
  background-size: 100% auto;
  background-repeat: no-repeat;
  text-align: center;
  color:#5A3931;
  font-size:1rem;
  line-height: 1.6rem;
}

.topMember > .three  span {
  color:#E57254;
  font-weight: bold;
  margin-right: 2px;
}
.topMember > .three:nth-of-type(1) {
  background-image: url('https://oss.eau-thermale-avene.cn/activity/AV/puzzle/reward1.png');
  position: absolute;
  left:50%;
  transform: translateX(-50%);
}
.topMember > .three:nth-of-type(2) {
  background-image: url('https://oss.eau-thermale-avene.cn/activity/AV/puzzle/reward2.png');
  position: absolute;
  left:2.75rem;
  top:1.4rem;
}
.topMember > .three:nth-of-type(3) {
  background-image: url('https://oss.eau-thermale-avene.cn/activity/AV/puzzle/reward3.png');
  position: absolute;
  right:2.75rem;
  top:2.4rem;
}
.three > img {
  width:5.75rem;
  height:5.75rem;
  border:0.25rem solid #fff;
  border-radius: 50%;
  margin:0 auto;
  display: block;
}
.three > div.nameShow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}
.allMemberBg {
  width:28.33rem;
  height: calc(100vh - 28rem);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 0.42rem;
  position: absolute;
  left:50%;
  bottom:0.75rem;
  transform: translateX(-50%);
  z-index:101;
}
.allMember {
  position: absolute;
  z-index:105;
  width:28.33rem;
  height: calc(100vh - 28rem);
  left:50%;
  bottom:0.75rem;
  transform: translateX(-50%);
}
.memberScroll {
  height: 50%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.memberItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
  color:#5A3931;
  margin-top:1.82rem;
  padding:0px 2rem 0px 1rem;
}
.memberItem > img {
  width:3.63rem;
  height:3.63rem;
  display: block;
  border-radius: 50%;
}
.memberItem > div:first-of-type {
  font-size: 1.95rem;
  color:#F9A48D;
  width:5rem;
  text-align: right;
}
.memberItem > .nameShow {
  width:6rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.memberItem span {
  color:#E57254;
  font-weight: bold;
  margin-right: 2px;
}
.tips img{
  width: 1.42rem;
  display: inline-block;
  vertical-align: middle;
}
.tips {
  color:#F9A48D;
  font-size: 1rem;
  text-align: center;
  line-height: 2rem;
  margin-top: 1rem;
}
.tips span {
  color:#E57254;
  font-weight: bold;
  margin:0px 5px;
}
.rewardBtn {
  width: 14.63rem;
  height: 3.33rem;
  text-align: center;
  line-height: 3.33rem;
  color:#fff;
  font-size:1.25rem;
  margin:0.5rem auto;
  background-color: #F0896F;
  border-radius: 0.42rem;
}
.firstBg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top:0;
  left:0;
  z-index:200;
  display: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.firstBg img {
  display: block;
  width: 100vw;
}
.openBtn {
  width: 14.63rem;
  height: 3.33rem;
  text-align: center;
  line-height: 3.33rem;
  color:#fff;
  font-size:1.25rem;
  background-color: #F0896F;
  border-radius: 0.42rem;
  position: fixed;
  left:50%;
  transform: translateX(-50%);
  bottom:3rem;
  z-index:203;
}
.firstBg > .downIcon {
  width: 1.92rem;
  position: fixed;
  bottom:8rem;
  left:50%;
  transform: translateX(-50%);
  z-index:203;
}
.formSubmit {
  width: 30.17rem;
  height: 42rem;
  background-image: url('https://oss.eau-thermale-avene.cn/activity/AV/puzzle/addressbg.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: hidden;
}
.formInput {
  width:25rem;
  height:23rem;
  margin: 10rem auto;
  overflow: hidden;
  box-sizing: border-box;
}
.formInput > div {
  width: 20.83rem;
  height: 3.46rem;
  margin:0px auto 2rem;
  position: relative;
}
.formInput > div > input{
  width:100%;
  height:100%;
  background:rgba(255, 255, 255, 0.67);
  border:1px solid #E78E75;
  border-radius: 0.5rem;
  padding-left: 4.2rem;
  color:#333;
  font-size: 1rem;
  box-sizing: border-box;
}
.formInput > .textarea textarea{
  border:1px solid #E78E75;
  width:100%;
  padding:1rem 1rem 1rem 4rem;
  line-height: 1.5rem;
  box-sizing: border-box;
  background:rgba(255, 255, 255, 0.67);
  color:#333;
  font-size: 1rem;
  height: 9rem;
  border-radius: 0.5rem;
}
.selectPlaceholder {
  width:100%;
  height:100%;
  background:rgba(255, 255, 255, 0.67);
  border:1px solid #E78E75;
  border-radius: 0.5rem;
  padding-left: 4.2rem;
  color:#333;
  font-size: 1rem;
  box-sizing: border-box;
  line-height: 3.46rem;
  color:rgba(0, 0, 0, 0.57)
}

.formInput > div > select  {
  width:100%;
  height:100%;
  position: absolute;
  left:0;
  top:0;
  background: transparent;
  padding-left: 4.5rem;
  border:none;
}
.formInput > div > img{
  height:2rem;
  position: absolute;
  left:1.71rem;
  top:50%;
  transform: translateY(-50%);
}
.formInput > div:nth-of-type(2){
  margin-bottom: 1rem;
}
.formInput  > div.tips {
  font-size:1rem;
  color:#423939;
  margin-bottom: 1rem;
  height:2rem;
}
.formInput > div > img.pickerIcon {
  width:1.13rem;
  height: 0.75rem;
  position: absolute;
  left:18.4rem;
  top:50%;
  transform: translateY(-50%);
}
.dislogClose {
  width:4rem;
  height:4rem;
  position: absolute;
  top:2rem;
  right:1rem;
}
.complete {
  position: relative;
}
.complete > img {
  width: 33rem;
  position: relative;
  left: 2rem;
}

.complete .dislogClose {
  right:2.4rem;
  top:3rem;
}
.registerAgree input[type="checkbox"]{
  appearance: none;
  position: relative;
  width:0.83rem;
  height:0.83rem;
  box-sizing: border-box;
}
.registerAgree {
  width:18rem;
  margin:0 auto;
  color:#8C8C8C;
  font-size:1rem;
  align-items: center;
  line-height: 1.4rem;
  display: flex;
  justify-content: space-between;
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:5.8rem;
}
.registerAgree > div {
  width:16.5rem;
  
}
.registerAgree > div > span {
  font-weight: bold;
  text-decoration: underline;
}
.registerAgree input[type="checkbox"]::after {
  box-sizing: border-box;
  content: " ";
  width:0.83rem;
  height:0.83rem;
  border:1px solid #F0896F;
  display: inline-block;
  position: absolute;
  left:0;
  top:0;
}
.registerAgree input[type="checkbox"]:checked {
  position: relative;
  height:0.83rem;
  border:1px solid #F0896F;
}
.registerAgree input[type="checkbox"]:checked::after {
  display: block;
  content: "";
  background-image: url("https://oss.eau-thermale-avene.cn/activity/AV/puzzle/icon5.png");
  width:0.92rem;
  height: 0.75rem;
  background-size: 100% 100%;
  border:none;
  position: absolute;
  left:0;
  top:-0.1rem;
}
.dialogFixedContent {
  width: 100vw;
  height:100vh;
  position: fixed;
  top:0;
  left:0;
  z-index:199;
  display: none;
}
.dialogbenefits {
  width:100vw;
  height: 100vh;
  padding-bottom: 3rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.dialogbenefits > img {
  width: 100vw;
  display: block;
}
.dialogFixedBtn {
  width:15rem;
  height:3.33rem;
  line-height: 3.33rem;
  font-size:1.25rem;
  color:#fff;
  text-align: center;
  background: #F0896F;
  border-radius: 0.42rem;
  position: fixed;
  left:50%;
  transform: translateX(-50%);
  bottom:3rem;
  letter-spacing: 10px;
}
.noData {
  font-size:1.4rem;
  text-align: center;
  margin-top:4rem;
  color: #F0896F;
}
 /* 去除点击选项卡时出现的蓝色边框 */
 .swiper-pagination .swiper-pagination-bullet:focus {
  outline: none;
}