@charset "utf-8";
#wrap {
  background-image: url("../image/bg.jpg");
  background-size: cover;
}
.download-bar {
  width: 10rem;
}
.download-bar img {
  width: 100%;
}
.choose-gender {
  margin: .5rem auto 0.3rem;
}
.choose-gender-title {
  font-weight: 900;
  font-size: 22px;
  color: #FFFFFF;
  line-height: 18px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
.choose-gender-main {
  display: flex;
  width: 6.4rem;
  height: 1.17rem;
  margin: 0.5rem auto;
  background-color: rgba(255,255,255,0.1);
  border-radius: 0.64rem;
} 
.choose-gender-male {
 display: none;
}
.choose-gender-main img {
  width: 3.2rem;
  height: 1.17rem;
}
.choose-gender-main img.active {
  width: 4rem;
  height: 2rem;
}
.choose-gender-female img {
  margin-left: -0.4rem;
}
.choose-gender-female img.active  {
  margin-top: -.35rem;
  margin-left: -.37rem;
}
.choose-gender-male img {
}
.choose-gender-male img.active  {
  margin-top: -.35rem;
  margin-left: -0.4rem;
}
.choose-gender-tips {
  font-weight: normal;
  font-size: 14px;
  color: #FFFFFF;
  line-height: 20px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
.main h2 {
  margin: 0.2rem auto 0;
  width: 4rem;
  height: 0.69333333rem;
  background-color: #fee405;
  text-align: center;
  line-height: 0.69333333rem;
  font-size: 0.26666667rem;
  font-weight: normal;
  color: #bc5700;
  border-radius: 0.34666667rem;
}
/*游戏区域*/
.box {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 11rem;
  margin: 0 0.2rem;
}
.box li {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.85rem;
  height: 5.52rem;
  background-image: url("../image/card1.png");
  transition: .3s;
}
.box li.active {
  background-image: url("../image/card1.png");
  animation: shaking 0.5s ease-in-out;
}
@keyframes shaking {
  0%,
  100% {
    transform: rotateY(0deg);
  }
  33% {
    transform: rotateY(-20deg);
  }
  66% {
    transform: rotateY(20deg);
  }
}
/*卡牌翻开动画*/
.box li.open-card {
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  /* transform: scale(1.3) translate(10%, 10%); */
  transform-origin: 0 0;
  z-index: 100;
  /* animation: openCard .7s linear; */
  animation: open .7s  linear forwards;
  
}
@keyframes open {
  0% {
    transform: translateX(-50%) translateY(-50%);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1.3) translateX(-50%) translateY(-50%);
    transform-origin: 0 0;
  }
  100% {
    transform: rotateY(80deg) scale(1.5) translateX(-50%) translateY(-50%);
    transform-origin: 0 0;
  }
}
@keyframes openCard {
  10%,
  30%,
  50% {
    /* transform: scale(1.5) translateX(-10px); */
    transform: scale(1.3) translateX(-60%) translateY(-50%);
    transform-origin: 0 0;
  }
  20%,
  40%,
  60% {
    /* transform: scale(1.3) translateX(10px); */
    transform: scale(1.3) translateX(-40%) translateY(-50%);
    transform-origin: 0 0;
  }
  70% {
    transform: rotateY(0deg) scale(1.3) translateX(-50%) translateY(-50%);
    transform-origin: 0 0;
  }
  100% {
    transform: rotateY(80deg) scale(1.5) translateX(-50%) translateY(-50%);
    transform-origin: 0 0;
  }
}

/*图案*/
.box li img {
  display: block;
  margin: 0.46666667rem auto;
  width: 1.73333333rem;
  height: 2.53333333rem;
}
/*翻牌遮罩*/
#mask {
  /* background: url("../image/result-bg.jpg") no-repeat center; */
  background-size: cover;
}
#mask-card {
  display: none;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
}