@charset "utf-8";
body {
  background: #9141FD;
}
#wrap {
  margin-top: -0.01333333rem;
  background-image: url("../image/bg.png");
  background-size: 100% 100%;
}
.rule {
  position: absolute;
  right: 0;
  top: 0.16rem;
  width: 1.8666667rem;
  height: 1.0133333rem;
  min-width: 1.6rem;
  line-height: 0.48rem;
  font-size: 0.24rem;
  text-align: center;
  color: #fff;
  border-radius: 3px 0 0 3px;
  background-image: url("../image/rule.png");
}
.my {
  position: absolute;
  left: 0;
  top: 0.16rem;
  width: 1.8666667rem;
  height: 1.0133333rem;
  min-width: 1.6rem;
  line-height: 0.48rem;
  font-size: 0.24rem;
  text-align: center;
  color: #fff;
  border-radius: 3px 0 0 3px;
  background-image: url("../image/my-award.png");
}
/*砸蛋区域*/
.box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10.93333333rem;
}
.tips {
  width: 7.7333333333rem;
  height: 0.96rem;
  margin: -0.3rem auto 0;
  /*background-color: #ff6d69;*/
  text-align: center;
  font-size: 0.373333333rem;
  line-height: 0.96rem;
  color: #fff;
  border-radius: 0.26666667rem;
  background-image: url("../image/prompt.png");
}
#change {
  margin: 0 0.06666667rem;
}
.egg {
  width: 10rem;
}
.title_img {
  margin: 1.46rem 0.3333rem 1.92rem 0.333rem;
  width: 9.3333rem;
  height: 1.97333rem;
  background-image: url("../image/title.png");
}
.egg li {
  position: relative;
  float: left;
  width: 1.68rem;
  height: 2.61333333rem;
  margin: 0.13333333rem 0.22rem 0 1.1rem;
}
.egg li img {
  width: 1.68rem;
  height: 0.54666667rem;
}
.egg li img.goldegg {
  width: 1.46666667rem;
  height: 2.01333333rem;
}
.egg .info {
  display: none;
  position: absolute;
  left: -0.16rem;
  top: 0.33333333rem;
  width: 0.97333333rem;
  height: 0.58666667rem;
  background-image: url("../image/tips.png");
}



.egg li img.goldegg {
  position: relative;
  left: 0.13333333rem;
  top: 0.26666667rem;
  width: 1.46666667rem;
  height: 2.01333333rem;
  -o-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
  object-fit: cover;
}
.egg li img.jump {
  -o-animation: jump .5s infinite alternate;
  -ms-animation: jump .5s infinite alternate;
  -moz-animation: jump .5s infinite alternate;
  -webkit-animation: jump .5s infinite alternate;
  animation: jump .5s infinite alternate;
}
@keyframes jump {
  100% {
    top: 0.13333333rem;
  }
}
#info {
  position: absolute;
  left: 0.53333333rem;
  top: 1.53333333rem;
  width: 1rem;
  height: 0.53333333rem;
}
#hammer {
  position: absolute;
  left: 8.86666667rem;
  top: 0.8rem;
  width: 1.90666667rem;
  height: 2.08rem;
  background-image: url("../image/hammer.png");
  -o-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
  -o-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

#hammer .hidden {
  visibility: hidden;
}
#hammer .show {
  visibility: visible;
}



.shak {
  -o-animation: hammer-move 0.5s linear infinite alternate;
  -ms-animation: hammer-move 0.5s linear infinite alternate;
  -moz-animation: hammer-move 0.5s linear infinite alternate;
  -webkit-animation: hammer-move 0.5s linear infinite alternate;
  animation: hammer-move 0.5s linear infinite alternate;
}
@keyframes hammer-move {
  100% {
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
}
.hit {
  -o-animation: hammer-hit 0.2s 3 alternate;
  -ms-animation: hammer-hit 0.2s 3 alternate;
  -moz-animation: hammer-hit 0.2s 3 alternate;
  -webkit-animation: hammer-hit 0.2s 3 alternate;
  animation: hammer-hit 0.2s 3 alternate;
}

.hidden {
  display: none;
}

.show {
  display: block;
}

@keyframes hammer-hit {
  100% {
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }
}
/*规则背景色*/
#mask-rule .box-rule {
  background-color: #ffffff;
}
#mask-rule .box-rule .star {
  background-image: url("../../common/image/rule/star1.png");
}
.share-button {
  background-image:url("../image/share.png") ;
  position: fixed;
  right: 0;
  bottom: 0.8rem;
  height: 1.6rem;
  width: 3.73333rem;
}

#mask-share {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

#mask-egg {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);

}

.egg-container {
  position: absolute;
  left: 30%;
  top: 50%;
  z-index: 1;
  width: 12rem;
  height: 12rem;
  margin: -8.5rem 0 0 -4rem;
  /*background: url("../index/image/egg_animate.gif") no-repeat 0 0;*/

}

.guid_arrow {
  background-image: url("../image/guide-arrow.png");
  position: absolute;
  top:0.5rem;
  right: 1.4rem;
  width: 1.0666667rem;
  height: 1.866667rem;

}

.dialog_box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.6);
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  /*background: red;*/
}

.dialog_box .active {
  visibility: visible;
  transition: all 0.3s;
}

.share_dialog {
  width: 100%;
  height: 7.33333rem;
  border-radius: 0.53333rem 0.53333rem 0 0;
  position: relative;
  background-color: #FE2D2D;
}
.close-share {
  width: 0.7rem;
  height: 0.7rem;
  padding: 0.13333rem;
  position: absolute;
  right: 0.4rem;
  top: 0.4rem;
  background-image: url("../common/image/close-share.png");
}


.flex_1 {
  flex: 1;
}

.share_title {
  font-size: 0.533333rem;
  font-family: PingFang SC;
  font-weight: bold;
  color: white;
  text-align: center;
  line-height: 1.333333rem;
}

.share_scroll {
  height: 9.33333rem;
  padding:0.266667rem 0.4rem ;
  margin: 0.26667rem auto;
  width: 90vw;
  background-color: #FEE6E6;
  border-radius: 0.533333rem 0.53333rem 0 0;

}

.close-img {
  width: 0.32rem;
  height: 0.32rem;
  padding: 0.13333rem;
  position: absolute;
  right: 0.4rem;
  top: 0.4rem;
}

.share-item {
  background-color: white;
  margin: 0.266667rem 0.266667rem 0 0.266667rem ;
  border-radius: 0.266667rem;
  height: 1.8666667rem;
  display: flex;
  justify-content: space-between;
}

.share-img {
  width: 1.1733333rem;
  height: 1.1733333rem;
  margin: 0.32rem 0.26667rem;
}

.item-left {
  display: flex;
  flex-direction: row;
}

#share-desc {
  font-size: 0.3733333rem;
  margin: 0.3rem;
  color: #FE2D2D;

}

.share-button-item {
  width: 20vw;
  display: flex;
  align-items: center;
  margin-right: 0.3rem;
}

.custom-button {
  background-color: #FE2D2D;
  border-radius: 0.4266667rem;
  border: #FE2D2D 0 solid;
  height: 0.8533333rem;
  width: 2.133333rem;
  color: white;
  font-size: 0.373333rem;

  /*align-items: center;*/
}

.share-info {
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  width: 55%;

}

.share-info-text {
  color: #333;
  font-size: 0.4266667rem;
}

.share-info-desc {
  color: #999;
  font-size: 0.34666667rem;
}