peko-h5/view/peko/activity/2024-aprilFoolsDay/css/index.css

html,
body {
  width: 100%;
  background: #63063E;
}

.back {
  position: fixed;
  top: 0.93333rem;
  left: 0.45333rem;
  z-index: 99;
  width: 0.82667rem;
  height: 0.82667rem;
}

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

.back p {
  color: #fff;
  font-size: 0.42667rem;
  position: absolute;
  width: 9rem;
  left: 0;
  top: 0;
  height: 100%;
  text-align: center;
  line-height: 0.82667rem;
}

.header {
  width: 10rem;
  height: 13.2rem;
  position: relative;
  margin: 0 auto 0.30667rem;
  background: url(../images/header.png) no-repeat;
  background-size: 100% 100%;
}

.header .qualifyGift_icon {
  width: 0.66667rem;
  height: 1.68rem;
  position: absolute;
  top: 2.66667rem;
  right: 0;
}

.header .rule_icon {
  width: 0.66667rem;
  height: 1.68rem;
  position: absolute;
  top: 4.58667rem;
  right: 0;
}

.tab {
  width: 9.33333rem;
  height: 1.14667rem;
  margin: 0 auto 0.32rem;
  position: relative;
  display: flex;
  justify-content: space-between;
}

.tab div {
  width: 2.24rem;
  height: 1.14667rem;
}

.tab .tab1 {
  background: url(../images/tab1.png) no-repeat;
  background-size: 100% 100%;
}

.tab .tab2 {
  background: url(../images/tab2.png) no-repeat;
  background-size: 100% 100%;
}

.tab .tab3 {
  background: url(../images/tab3.png) no-repeat;
  background-size: 100% 100%;
}

.tab .tab4 {
  background: url(../images/tab4.png) no-repeat;
  background-size: 100% 100%;
}

.tab .act1 {
  background: url(../images/tabAct1.png) no-repeat;
  background-size: 100% 100%;
}

.tab .act2 {
  background: url(../images/tabAct2.png) no-repeat;
  background-size: 100% 100%;
}

.tab .act3 {
  background: url(../images/tabAct3.png) no-repeat;
  background-size: 100% 100%;
}

.tab .act4 {
  background: url(../images/tabAct4.png) no-repeat;
  background-size: 100% 100%;
}

.page1 .box1 {
  width: 9.2rem;
  height: 11.12rem;
  background: url(../images/pageBox1.png) no-repeat;
  background-size: 100% 100%;
  margin: 0 auto 0.38667rem;
  position: relative;
  overflow: hidden;
}

.page1 .box1 .pageBox1Rule_icon {
  width: 1.78667rem;
  height: 0.56rem;
  position: absolute;
  right: 0;
  top: 1.17333rem;
}

.page1 .box1 .time {
  width: 5.28rem;
  height: 0.77333rem;
  line-height: 0.77333rem;
  text-align: center;
  color: #fff;
  font-size: 0.37333rem;
  font-weight: 400;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 1.49333rem;
  background: url(../images/page1Box1timeBg.png) no-repeat;
  background-size: 100% 100%;
}

.page1 .box1 .time span {
  border-radius: 0.06667rem;
  padding: 0.01333rem 0.02667rem;
  color: #BF294A;
  font-weight: bold;
  background: #fff;
}

.page1 .box1 .text {
  width: 7.92rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 2.78667rem;
  color: #fff;
  font-size: 0.32rem;
  font-weight: 400;
  text-align: center;
  line-height: 0.45rem;
}

.page1 .box1 .text b {
  color: #FBBE47;
}

.page1 .box1 .giftBoxs {
  width: 8.26667rem;
  height: 5.8rem;
  margin: 4.50667rem auto 0;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.page1 .box1 .giftBoxs div {
  width: 2.56rem;
  height: 2.69333rem;
  margin-bottom: 0.4rem;
  background: url(../images/pageBox1qp.png) no-repeat;
  background-size: 100% 100%;
  text-align: center;
  color: #fff;
  font-size: 0.32rem;
  font-weight: 500;
}

.page1 .box1 .giftBoxs div img {
  display: block;
  width: 1.70667rem;
  height: 1.70667rem;
  margin: 0.22667rem auto 0.21333rem;
}

.page1 .box1 .giftBoxs .act {
  background: url(../images/pageBox1qpAct.png) no-repeat;
  background-size: 100% 100%;
}

.page1 .box2 {
  width: 9.2rem;
  height: 13.25333rem;
  background: url(../images/page1Box2.png) no-repeat;
  background-size: 100% 100%;
  margin: 0 auto 1.84rem;
}