@charset "UTF-8";
html {
  font-size: 100px;
  font-size: 13.33333vw;
}

@media screen and (max-width: 320px) {
  html {
    font-size: 42.66667px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 321px) and (max-width: 360px) {
  html {
    font-size: 48px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 361px) and (max-width: 375px) {
  html {
    font-size: 50px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 376px) and (max-width: 393px) {
  html {
    font-size: 52.4px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 394px) and (max-width: 412px) {
  html {
    font-size: 54.93333px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 413px) and (max-width: 414px) {
  html {
    font-size: 55.2px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 415px) and (max-width: 480px) {
  html {
    font-size: 64px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 481px) and (max-width: 540px) {
  html {
    font-size: 72px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 541px) and (max-width: 640px) {
  html {
    font-size: 85.33333px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 641px) and (max-width: 720px) {
  html {
    font-size: 96px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 721px) and (max-width: 750px) {
  html {
    font-size: 100px;
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 751px) {
  html {
    font-size: 100px;
  }
}

:root {
  /* 主色 */
  --main-color: #FFA251;
  /* 淡主色 */
  --light-color: #FEE7D6;
  /* tips */
  --tips-color: #E2A454;
  /* 渐变色 */
  --left-color: #FFC290;
  --right-color: #FF9083;
  /* 绿色 */
  /* 主色 */
  /* --main-color: #23C268;
  --light-color: #e5fae8;
  --tips-color: #85BE6D;
  --left-color: #81E783;
  --right-color: #12C3A3; */
}

body {
  background-color: #f3f3f6;
  margin: 0 auto;
}

.box {
  width: 7.5rem;
  margin: 0 auto !important;
  overflow: hidden;
}

.head {
  position: relative;
  width: 7.5rem;
  margin: 0 auto;
}

.rule-btn {
  position: absolute;
  width: 0.48rem;
  height: 1.28rem;
  top: 5rem;
  right: 0;
  text-align: center;
  line-height: 0.28rem;
  font-size: 0.24rem;
  color: rgba(30, 30, 30, 0.6);
  background-color: rgba(255, 255, 255, 0.6);
  border: 0.02rem solid white;
  border-right: 0;
  border-radius: 0.1rem 0 0 0.1rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 0.1rem;
  z-index: 9;
}

.head-num {
  position: absolute;
  top: 5.1rem;
  left: 50%;
  width: auto;
  height: 0.48rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 0.48rem;
  background-color: rgba(142, 142, 142, 0.4);
  border: 1px solid #f3f3f6;
  border-radius: 1rem;
  padding-right: 0.2rem;
  transform: translateX(-50%);
}

.head-num::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -0.12rem;
  left: 0.15rem;
  width: 0.27rem;
  height: 0.23rem;
  background: url("../images/icon-new.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.head-num p {
  color: #fff;
  font-size: 0.24rem;
  white-space: nowrap;
}

.head-num p em {
  color: #FFC851;
}

.head-act {
  width: 7.5rem;
  height: 13.37rem;
  position: absolute;
  top: 5.8rem;
  left: 0;
  background: url("../images/act-bg.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.gift-sw {
  width: 5.33rem;
  height: 1.26rem;
  margin: 1.28rem auto 0;
}

.gift-sw .swiper-slide {
  width: 1.4rem;
}

.gift-sw .swiper-slide p {
  margin: 0 auto;
  width: 0.9rem;
  height: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.2rem;
  background-color: rgba(255, 255, 255, 0.6);
}

.gift-sw .swiper-slide p img {
  width: 0.7rem;
  height: 0.7rem;
  object-fit: contain;
}

.gift-sw .swiper-slide span {
  margin-top: 0.05rem;
  font-size: 0.22rem;
  color: #ffffff;
  display: block;
  text-align: center;
}

.act-news {
  display: flex;
  align-items: center;
  width: 5.5rem;
  position: absolute;
  top: 3.05rem;
  left: 50%;
  margin-left: -2.7rem;
  justify-content: space-between;
  z-index: 1;
}

.act-news a {
  width: 1.47rem;
  height: 0.6rem;
  text-align: center;
  line-height: 0.6rem;
  background: url("../images/p-btn.png") no-repeat 0 0;
  background-size: 100% 100%;
  font-size: 0.26rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.act-news a i {
  width: 0.1rem;
  height: 0.19rem;
  margin-left: 0.05rem;
  background: url("../images/icon-r.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.new-box {
  width: 3.76rem;
  height: 0.55rem;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 0.5rem;
  background: url("../images/news-bg.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.new-box::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -0.12rem;
  left: 0.15rem;
  width: 0.27rem;
  height: 0.23rem;
  background: url("../images/icon-new.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.act-box {
  position: absolute;
  left: 0.8rem;
  top: 4rem;
  width: 5.90rem;
  height: 2.79rem;
  background: url("../images/gi1.png") repeat-x 0 0;
  background-size: auto 2.82rem;
}

.act-box::after {
  content: "";
  width: 5.88rem;
  height: 2.79rem;
  position: absolute;
  top: 0.08rem;
  left: 0;
  background: url("../images/gi-bg.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.act-box.on {
  background: url("../images/gi1.png") no-repeat 0 0;
  background-size: 277.30rem 2.79rem;
  -webkit-animation: em-icon 2.4s steps(46) forwards;
  animation: em-icon 2.4s steps(46) forwards;
  -moz-animation: em-icon 2.4s steps(46) forwards;
  -o-animation: em-icon 2.4s steps(46) forwards;
  -ms-animation: em-icon 2.4s steps(46) forwards;
}

.act-num {
  position: absolute;
  top: 7.12rem;
  left: 50%;
  margin-left: -1.05rem;
  width: 2.09rem;
  height: 0.44rem;
  background: url("../images/act-num-bg.png") no-repeat 0 0;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.act-num img {
  width: 0.32rem;
  height: 0.47rem;
  object-fit: contain;
}

.act-num span {
  width: 0.32rem;
  height: 0.27rem;
  background: url("../images/act-num.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.act-num p {
  font-size: 0.28rem;
  color: #fff;
  line-height: 0.4rem;
  margin: 0 0.06rem 0 0.12rem;
}

.act-num p em {
  font-weight: bold;
  color: #fff17e;
}

.act-num i {
  width: 0.24rem;
  height: 0.25rem;
  background: url("../images/icon-qu.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.act-btn {
  position: absolute;
  top: 7.6rem;
  left: 50%;
  margin-left: -1.66rem;
  width: 3.31rem;
  height: 1.26rem;
  background: url("../images/act-btn.gif") no-repeat 0 0;
  background-size: 100% auto;
  box-sizing: border-box;
  padding-top: 0.5rem;
}

.act-btn p {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.22rem;
  color: #19a2d4;
}

.act-btn p em {
  width: 0.28rem;
  height: 0.27rem;
  margin: 0 0.05rem;
  background: url("../images/icon-img.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.act-btn.abtn1 {
  margin-left: -2.8rem;
  top: 7.7rem;
  width: 2.81rem;
  height: 1.11rem;
  background: url("../images/act-btn1.png") no-repeat 0 0;
  background-size: 100% auto;
}

.act-btn.abtn2 {
  top: 7.7rem;
  margin-left: 0.2rem;
  width: 2.81rem;
  height: 1.11rem;
  background: url("../images/act-btn2.png") no-repeat 0 0;
  background-size: 100% auto;
}

.act-par {
  width: 7.15rem;
  height: 3.78rem;
  position: absolute;
  left: 50%;
  margin-left: -3.48rem;
  top: 9.6rem;
  box-sizing: border-box;
  padding: 0 0.4rem;
}

.act-par .par-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.act-par .par-text span {
  font-size: 0.28rem;
  color: #bc6215;
}

.act-par .par-text p {
  display: flex;
  align-items: center;
  font-size: 0.3rem;
  color: #bc6215;
}

.act-par .par-text p i {
  display: block;
  font-size: 0.3rem;
  color: #fff;
  height: 0.45rem;
  line-height: 0.45rem;
  padding: 0 0.08rem;
  border-radius: 0.1rem;
  margin: 0 0.05rem;
  font-weight: bold;
  background-color: #fea461;
  box-shadow: inset 0 0 0.1rem rgba(188, 98, 21, 0.2);
}

.par-list {
  position: relative;
}

.par-list ul {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.2rem;
}

.par-list ul li {
  width: 1.60rem;
  margin: 0 0.28rem;
}

.par-list ul li div {
  margin: 0 auto;
  width: 1.01rem;
  height: 1.10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../images/par-item.png") no-repeat 0 0;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding-bottom: 0.1rem;
}

.par-list ul li div img {
  width: 0.75rem;
  height: 0.75rem;
  object-fit: contain;
}

.par-list ul li p {
  font-size: 0.24rem;
  color: #e07a2d;
  margin-top: 0.32rem;
  text-align: center;
}

.par-list ul li p em {
  color: #a14f11;
}

.par-list ul li a {
  display: block;
  width: 1.61rem;
  height: 0.74rem;
  margin: 0.2rem auto 0;
  text-align: center;
  line-height: 0.74rem;
  font-size: 0.26rem;
  color: #fff;
  background: url("../images/btn.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.par-list ul .on div {
  opacity: 0.7;
}

.par-list ul .on a {
  color: #ffe3ce;
  background: url("../images/btn-un.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.par-list ul .un div {
  opacity: 0.7;
}

.par-list ul .un a {
  color: rgba(255, 255, 255, 0.5);
  background: url("../images/btn-n.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.par-list .par-line {
  position: absolute;
  left: 50%;
  margin-left: -2.98rem;
  width: 5.8rem;
  top: 1.14rem;
  height: 0.16rem;
  background-color: #f3a852;
  border-radius: 0.4rem;
  border: 0.04rem solid #fae1b7;
}

.par-list .par-line p {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 0.4rem;
  border: 1px solid #f3a852;
  box-sizing: border-box;
  background: linear-gradient(to right, #ffd77c, #ffd77c 95%, #fff);
}

.divScrbox {
  height: 0.55rem;
  overflow: hidden;
  margin: 0 auto;
}

.scrollList li {
  height: 0.55rem;
  line-height: 0.55rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: left;
  align-items: center;
  color: #fff;
  white-space: nowrap;
  font-size: 0.24rem;
  overflow: hidden;
}

.scrollList span,
.scrollList em {
  color: #ffed8e;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.scrollList span {
  max-width: 2rem;
}

.scrollList em {
  max-width: 2rem;
}

.title1 {
  text-align: center;
}

.title1 img {
  height: 1.01rem;
}

.con-text {
  margin-top: 0.2rem;
  text-align: center;
  font-size: 0.24rem;
  color: #3F4140;
}

.content {
  margin-top: 1rem;
}

.con-box {
  width: 6.9rem;
  height: 100%;
  position: relative;
  border-radius: 0.2rem;
  box-sizing: border-box;
  padding-top: 0.4rem;
  padding-bottom: 0.5rem;
  z-index: 0;
  margin: 0.3rem auto 0;
  background-color: #fff;
}

.con-box::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2.19rem;
  left: 0;
  top: 0;
  z-index: -1;
  background: url("../images/con-top.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.c-text {
  width: 6.4rem;
  margin: 0 auto;
  text-align: justify;
  font-size: 0.24rem;
  color: #3F4140;
}

.g-search {
  display: flex;
  align-items: center;
  width: 6.4rem;
  margin: 0.28rem auto 0;
  justify-content: space-between;
  box-sizing: border-box;
}

.g-search p {
  display: flex;
  align-items: center;
  width: 5.42rem;
  height: 0.64rem;
  border-radius: 1rem;
  box-sizing: border-box;
  padding: 0 0.22rem;
  background-color: #F1F1F1;
}

.g-search p i {
  width: 0.25rem;
  height: 0.27rem;
  background: url("../images/icon-search.png") no-repeat 0 0;
  background-size: 100% 100%;
  margin-right: 0.12rem;
}

.g-search p input {
  flex: 1;
  border: 0;
  font-size: 0.26rem;
  background-color: #F1F1F1;
}

.g-search p input::-webkit-input-placeholder {
  color: #D2D3D3;
}

.g-search p em {
  width: 0.24rem;
  height: 0.25rem;
  background: url("../images/icon-close.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.g-search a {
  width: 1.32rem;
  height: 0.64rem;
  font-size: 0.3rem;
  border-radius: 1rem;
  text-align: center;
  line-height: 0.64rem;
  box-sizing: border-box;
  margin-left: 0.18rem;
  flex-shrink: 0;
  color: var(--main-color);
  border: 1px solid var(--main-color);
  background: none;
}

.g-search button {
  width: 1.32rem;
  height: 0.64rem;
  font-size: 0.3rem;
  border-radius: 1rem;
  text-align: center;
  line-height: 0.64rem;
  box-sizing: border-box;
  margin-left: 0.18rem;
  flex-shrink: 0;
  color: var(--main-color);
  border: 1px solid var(--main-color);
  background: none;
}

.g-tips {
  display: flex;
  width: 6.4rem;
  margin: 0.28rem auto 0;
}

.g-tips .g-num {
  display: flex;
  align-items: center;
  flex: 1;
}

.g-tips .g-num i {
  width: 0.23rem;
  height: 0.26rem;
  -webkit-mask-image: url("../images/icon-qq.png");
  -webkit-mask-size: 100% 100%;
  background: linear-gradient(-50deg, var(--right-color), var(--left-color));
}

.g-tips .g-num p {
  font-size: 0.26rem;
  color: #191919;
  margin: 0 0.05rem;
}

.g-tips .g-num em {
  width: 0.24rem;
  height: 0.24rem;
  border-radius: 50%;
  background-color: var(--main-color);
  position: relative;
}

.g-tips .g-num em::after {
  content: "";
  position: absolute;
  width: 0.11rem;
  height: 0.18rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("../images/icon-q.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.g-tips .g-num .g-text {
  font-size: 0.24rem;
  color: #7D7F7C;
  margin-top: 0.1rem;
}

.g-tips a {
  font-size: 0.26rem;
  color: var(--main-color);
}

.g-text {
  font-size: 0.24rem;
  color: #7D7F7C;
  margin-top: 0.1rem;
}

.g-nav {
  width: 100%;
  height: 1.15rem;
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 0.6rem;
  box-sizing: border-box;
  padding-bottom: 0.1rem;
}

.g-nav a {
  flex: 1;
  text-align: center;
  color: #7D7F7C;
  font-size: 0.28rem;
  height: 1rem;
  line-height: 0.92rem;
}

.g-nav a:nth-child(1).on {
  background: url("../images/nav1.png") no-repeat 0 0;
  background-size: 100% 100%;
  align-items: center;
}

.g-nav a:nth-child(2).on {
  background: url("../images/nav2.png") no-repeat 0 0;
  background-size: 100% 100%;
  align-items: center;
}

.g-nav a:nth-child(3).on {
  background: url("../images/nav3.png") no-repeat 0 0;
  background-size: 100% 100%;
  align-items: center;
}

.g-nav a.on {
  width: 2.58rem;
  height: 1.28rem;
  line-height: 1.18rem;
  margin-top: -0.1rem;
  font-size: 0.3rem;
  color: #191919;
  position: relative;
  box-sizing: border-box;
}

.g-nav a.on::after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -0.2rem;
  bottom: 0.35rem;
  width: 0.3rem;
  height: 0.06rem;
  border-radius: 1rem;
  background: linear-gradient(to right, var(--left-color), var(--right-color));
}

.g-nav::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1.15rem;
  z-index: -1;
  border-top: 1px solid var(--main-color);
  background: linear-gradient(to bottom, var(--light-color), #fff);
  opacity: 0.3;
  border-radius: 0.4rem;
}

.g-nav .nav-tips {
  position: absolute;
  right: 0rem;
  top: -0.48rem;
  width: 2.4rem;
  height: 0.4rem;
  box-sizing: border-box;
  z-index: 1;
}

.g-nav .nav-tips p {
  position: absolute;
  left: 50%;
  margin-left: -1.15rem;
  top: 0;
  height: 0.4rem;
  border-radius: 0.2rem;
  width: 2.3rem;
  text-align: center;
  line-height: 0.4rem;
  z-index: 0;
  overflow: hidden;
}

.g-nav .nav-tips p span {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  font-size: 0.23rem;
  color: var(--tips-color);
}

.g-nav .nav-tips::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: 0.2rem;
  background-color: var(--light-color);
}

.g-nav .nav-tips::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.04rem;
  margin-left: -0.05rem;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 0.04rem;
  background-color: var(--light-color);
  transform: rotate(45deg);
  z-index: -1;
}

.g-nav .nav-tips.on {
  top: -0.62rem;
}

.g-nav2 {
  width: 100%;
  height: 1.15rem;
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 0.6rem;
  box-sizing: border-box;
  padding-bottom: 0.1rem;
}

.g-nav2 a {
  text-align: center;
  color: #7D7F7C;
  font-size: 0.28rem;
  height: 1rem;
  line-height: 0.92rem;
  width: 3.4rem;
}

.g-nav2 a:nth-child(1).on {
  background: url("../images/nav1.png") no-repeat 0 0;
  background-size: 100% 100%;
  align-items: center;
}

.g-nav2 a:nth-child(2).on {
  background: url("../images/nav3.png") no-repeat 0 0;
  background-size: 100% 100%;
  align-items: center;
}

.g-nav2 a:nth-child(3).on {
  background: url("../images/nav3.png") no-repeat 0 0;
  background-size: 100% 100%;
  align-items: center;
}

.g-nav2 a.on {
  width: 3.58rem;
  height: 1.28rem;
  line-height: 1.18rem;
  margin-top: -0.1rem;
  font-size: 0.3rem;
  color: #191919;
  position: relative;
  box-sizing: border-box;
}

.g-nav2 a.on::after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -0.2rem;
  bottom: 0.35rem;
  width: 0.3rem;
  height: 0.06rem;
  border-radius: 1rem;
  background: linear-gradient(to right, var(--left-color), var(--right-color));
}

.g-nav2::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1.15rem;
  z-index: -1;
  border-top: 1px solid var(--main-color);
  background: linear-gradient(to bottom, var(--light-color), #fff);
  opacity: 0.3;
  border-radius: 0.4rem;
}

.g-nav2 .nav-tips {
  position: absolute;
  right: 0.58rem;
  top: -0.48rem;
  width: 2.4rem;
  height: 0.4rem;
  box-sizing: border-box;
  z-index: 1;
}

.g-nav2 .nav-tips p {
  position: absolute;
  left: 50%;
  margin-left: -1.15rem;
  top: 0;
  height: 0.4rem;
  border-radius: 0.2rem;
  width: 2.3rem;
  text-align: center;
  line-height: 0.4rem;
  z-index: 0;
  overflow: hidden;
}

.g-nav2 .nav-tips p span {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  font-size: 0.23rem;
  color: var(--tips-color);
}

.g-nav2 .nav-tips::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  border-radius: 0.2rem;
  background-color: var(--light-color);
}

.g-nav2 .nav-tips::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.04rem;
  margin-left: -0.05rem;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 0.04rem;
  background-color: var(--light-color);
  transform: rotate(45deg);
  z-index: -1;
}

.g-nav2 .nav-tips.on {
  top: -0.62rem;
}

.g-list ul {
  display: flex;
  flex-wrap: wrap;
}

.g-list ul li {
  width: 3.1rem;
  height: 3.02rem;
  border-radius: 0.2rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
  margin-left: 0.2rem;
  margin-bottom: 0.27rem;
  box-sizing: border-box;
}

.g-list ul li:nth-last-child(1) {
  margin-bottom: 0;
}

.g-list ul li:nth-last-child(2) {
  margin-bottom: 0;
}

.g-list ul li em {
  position: absolute;
  left: -0.05rem;
  top: -0.05rem;
  height: 0.36rem;
  line-height: 0.36rem;
  width: auto;
  border-radius: 0.2rem 0.06rem 0.2rem 0;
  font-size: 0.2rem;
  color: #fff;
  padding: 0 0.15rem;
  z-index: 1;
  background: linear-gradient(-50deg, var(--right-color), var(--left-color));
}

.g-list ul li .g-img {
  width: 100%;
  height: 1.51rem;
  border-radius: 0.2rem 0.2rem 0 0;
  background: linear-gradient(to bottom, var(--light-color), #fff 50%, #fff);
  position: relative;
}

.g-list ul li .g-img img {
  width: 100%;
  height: 100%;
}

.g-list ul li .g-img span {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0.42rem;
  width: 100%;
  text-align: center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
  font-size: 0.22rem;
}

.g-list ul li .g-img span i {
  width: 0.3rem;
  height: 0.3rem;
  margin-right: 0.05rem;
  background: url("../images/icon-time.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.g-list ul li p {
  width: 2.9rem;
  color: #3F4140;
  margin: 0 auto;
  line-height: 0.32rem;
  margin-top: 0.1rem;
  font-size: 0.26rem;
}

.g-list ul li .g-btn {
  position: absolute;
  left: 50%;
  bottom: 0.15rem;
  display: flex;
  align-items: center;
  width: 2.9rem;
  margin: 0.05rem auto 0;
  margin-left: -1.45rem;
}

.g-list ul li .g-btn i {
  width: 0.23rem;
  height: 0.26rem;
  -webkit-mask-image: url(../images/icon-qq.png);
  -webkit-mask-size: 100% 100%;
  background: linear-gradient(-50deg, var(--right-color), var(--left-color));
}

.g-list ul li .g-btn span {
  flex: 1;
  color: #000000;
  font-size: 0.22rem;
  position: relative;
  z-index: 0;
  margin-left: 0.08rem;
}

.g-list ul li .g-btn span::after {
  content: "";
  position: absolute;
  bottom: 0.03rem;
  left: 0;
  width: 0.56rem;
  height: 0.1rem;
  z-index: -1;
  border-radius: 0.05rem;
  background: linear-gradient(to right, var(--left-color), #fff);
}

.g-list ul li .g-btn a {
  width: 1.32rem;
  height: 0.5rem;
  border-radius: 0.4rem;
  font-size: 0.26rem;
  color: #fff;
  text-align: center;
  line-height: 0.5rem;
  background: linear-gradient(to right, var(--left-color), var(--right-color));
}

.g-list ul li .g-btn a.on {
  background: linear-gradient(to right, #FFC96A, #FAB736);
}

.g-list ul li.un .g-img {
  position: relative;
}

.g-list ul li.un .g-img::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.2rem 0.2rem 0 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.g-list ul li.un .g-img::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.17rem;
  height: 1.18rem;
  margin-left: -0.58rem;
  margin-top: -0.59rem;
  z-index: 1;
  background: url(../images/img-un.png) no-repeat center;
  background-size: 100% 100%;
}

.un-list {
  margin: 1.6rem auto 2.4rem;
}

.un-list img {
  width: 3rem;
  height: 3rem;
  display: block;
  margin: 0 auto;
}

.un-list P {
  text-align: center;
  color: #A7A8A7;
  font-size: 0.28rem;
  margin-top: 0.2rem;
}

.g-more {
  display: flex;
  justify-content: center;
  margin-top: 0.35rem;
  align-items: center;
}

.g-more span {
  font-size: 0.22rem;
  color: var(--main-color);
}

.g-more i {
  width: 0.18rem;
  height: 0.19rem;
  margin-left: 0.08rem;
  -webkit-mask-image: url(../images/icon-down.png);
  -webkit-mask-size: 100% 100%;
  background: var(--main-color);
}

.game-nav {
  display: flex;
  align-items: center;
  width: 6.90rem;
  height: 1.28rem;
  margin: 0.32rem auto 0;
  background: url("../images/nav-left.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.game-nav a {
  flex: 1;
  text-align: center;
  height: 1.28rem;
  line-height: 1.18rem;
}

.game-nav a:nth-child(1) {
  font-size: 0.4rem;
  color: #191919;
  position: relative;
}

.game-nav a:nth-child(1)::after {
  display: block;
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -0.2rem;
  bottom: 0.3rem;
  width: 0.3rem;
  height: 0.06rem;
  border-radius: 1rem;
  background: linear-gradient(to right, var(--left-color), var(--right-color));
}

.game-nav a:nth-child(2) {
  color: #7D7D7D;
  font-size: 0.36rem;
  line-height: 1.4rem;
}

.game-nav a:nth-child(2)::after {
  display: none;
}

.game-nav.on {
  background: url("../images/nav-right.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.game-nav.on a:nth-child(2) {
  font-size: 0.4rem;
  color: #191919;
  position: relative;
  line-height: 1.18rem;
}

.game-nav.on a:nth-child(2)::after {
  display: block;
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -0.2rem;
  bottom: 0.3rem;
  width: 0.3rem;
  height: 0.06rem;
  border-radius: 1rem;
  background: linear-gradient(to right, var(--left-color), var(--right-color));
}

.game-nav.on a:nth-child(1) {
  color: #7D7D7D;
  font-size: 0.36rem;
  line-height: 1.4rem;
}

.game-nav.on a:nth-child(1)::after {
  display: none;
}

.gift-box {
  width: 6.9rem;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 0.2rem;
  margin-top: -0.2rem;
  box-sizing: border-box;
  padding: 0.32rem 0.26rem 0.78rem;
}

.gift-box .gift-new {
  display: flex;
  align-items: center;
}

.gift-box .gift-new a {
  font-size: 0.26rem;
  color: var(--main-color);
  white-space: nowrap;
}

.gift-box .gift-new div {
  display: flex;
  align-items: center;
  width: 4.92rem;
  height: 0.65rem;
  background: url("../images/g-new.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.gift-box .gift-new div i {
  width: 0.31rem;
  height: 0.32rem;
  margin: 0 0.05rem 0 0.14rem;
  -webkit-mask-image: url(../images/g-icon-new.png);
  -webkit-mask-size: 100% 100%;
  background: var(--main-color);
}

.gift-box .gift-new div span {
  font-size: 0.22rem;
  color: #5B5B5B;
}

.gift-box .gift-new div img {
  width: 0.37rem;
  height: 0.34rem;
  object-fit: contain;
}

.game-list {
  margin-top: 0.24rem;
}

.game-list ul li {
  display: flex;
  height: 1.68rem;
  margin-bottom: 0.05rem;
}

.game-list ul li:nth-last-child(1) .li-text {
  border-bottom: 0;
  margin-bottom: 0;
}

.game-list ul li .li-img {
  margin-right: 0.2rem;
  margin-top: 0.26rem;
}

.game-list ul li .li-img img {
  width: 1.09rem;
  height: 1.09rem;
  border-radius: 0.25rem;
}

.game-list ul li .li-text {
  flex: 1;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  padding-bottom: 0.14rem;
  display: flex;
  align-items: center;
}

.game-list ul li .li-text div:nth-child(1) {
  flex: 1;
}

.game-list ul li .li-text div .li-tit {
  font-size: 0.32rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  color: #3F4140;
}

.game-list ul li .li-text div .li-tit i {
  width: 0.17rem;
  height: 0.19rem;
  background: url("../images/icon-hot.png") no-repeat 0 0;
  background-size: 100% 100%;
  margin-left: 0.05rem;
}

.game-list ul li .li-text div p {
  height: 0.38rem;
  margin-top: 0.15rem;
}

.game-list ul li .li-text div p span {
  margin-left: 0.1rem;
  border-radius: 0.1rem;
  padding: 0 0.05rem;
  color: var(--main-color);
  border: 1px solid var(--main-color);
  font-size: 0.24rem;
}

.game-list ul li .li-text div p span:nth-child(1) {
  margin-left: 0;
}

.game-list ul li .li-text div p em {
  color: #A7A8A7;
  font-size: 0.24rem;
  margin-left: 0.1rem;
}

.game-list ul li .li-text div p em:nth-child(1) {
  margin-left: 0;
}

.game-list ul li .li-text div a {
  display: block;
  width: 1.4rem;
  height: 0.58rem;
  border-radius: 0.45rem;
  font-size: 0.26rem;
  text-align: center;
  line-height: 0.58rem;
  color: #fff;
  margin: 0.1rem 0 0 0.2rem;
}

.game-list ul li .li-text div .btn1 {
  background: linear-gradient(to right, var(--left-color), var(--right-color));
}

.game-list ul li .li-text div .btn2 {
  background: linear-gradient(to right, #FFC96A, #FAB736);
}

.game-list .game-ref {
  display: flex;
  justify-content: center;
  font-size: 0.22rem;
  color: var(--main-color);
  align-items: center;
}

.game-list .game-ref i {
  width: 0.18rem;
  height: 0.19rem;
  margin-right: 0.1rem;
  -webkit-mask-image: url(../images/icon-ref.png);
  -webkit-mask-size: 100% 100%;
  background: var(--main-color);
}

.game-list2 ul {
  display: flex;
  flex-wrap: wrap;
}

.game-list2 ul li {
  width: 1.8rem;
  position: relative;
  margin-right: 0.45rem;
  margin-top: 0.58rem;
}

.game-list2 ul li:nth-child(3n) {
  margin-right: 0;
}

.game-list2 ul li .game-tips {
  position: absolute;
  top: -0.06rem;
  right: 0.17rem;
  width: 0.47rem;
  height: 0.45rem;
  background: url("../images/icon-tips.png") no-repeat 0 0;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-left: 0.14rem;
  padding-bottom: 0.04rem;
}

.game-list2 ul li .game-tips img {
  height: 0.28rem;
}

.game-list2 ul li .li-img {
  width: 1.36rem;
  height: 1.36rem;
  margin: 0 auto;
}

.game-list2 ul li .li-img img {
  width: 1.36rem;
  height: 1.36rem;
  border-radius: 0.25rem;
}

.game-list2 ul li .li-text {
  flex: 1;
  box-sizing: border-box;
}

.game-list2 ul li .li-text div .li-tit {
  margin-top: 0.15rem;
  font-size: 0.26rem;
  display: flex;
  align-items: center;
  color: #3F4140;
}

.game-list2 ul li .li-text div .li-tit span {
  width: 1.8rem;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.game-list2 ul li .li-text div a {
  display: block;
  width: 1.5rem;
  height: 0.48rem;
  border-radius: 0.45rem;
  font-size: 0.26rem;
  text-align: center;
  line-height: 0.48rem;
  color: #fff;
  margin: 0.15rem auto 0;
}

.game-list2 ul li .li-text div .btn1 {
  background: linear-gradient(to right, var(--left-color), var(--right-color));
}

.game-list2 ul li .li-text div .btn2 {
  background: linear-gradient(to right, #FFC96A, #FAB736);
}

.game-list2 ul li:nth-last-child(1) .li-text {
  border-bottom: 0;
  margin-bottom: 0;
}

.make-box {
  width: 6.9rem;
  margin: 0.2rem auto 0;
  background-color: #fff;
  border-radius: 0.2rem;
  box-sizing: border-box;
  padding: 0.32rem 0.26rem 0.55rem;
  position: relative;
  z-index: 0;
}

.make-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6.9rem;
  height: 2.19rem;
  z-index: -1;
  border-radius: 0.2rem 0.2rem 0 0;
  background: url("../images/con-top2.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.make-box .make-nav {
  display: flex;
  align-items: center;
}

.make-box .make-nav a {
  flex: 1;
  font-size: 0.36rem;
  color: #7D7D7D;
  text-align: center;
  height: 0.69rem;
  line-height: 0.69rem;
}

.make-box .make-nav a.on {
  font-size: 0.4rem;
  color: #191919;
  position: relative;
}

.make-box .make-nav a.on::after {
  position: absolute;
  content: "";
  left: 50%;
  margin-left: -1.37rem;
  top: 50%;
  margin-top: -0.24rem;
  width: 2.74rem;
  height: 0.49rem;
  background: url("../images/tit-tips.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.make-box .make-nav a.on::before {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -0.3rem;
  bottom: -0.05rem;
  width: 0.6rem;
  height: 0.06rem;
  border-radius: 1rem;
  background: linear-gradient(to right, var(--left-color), var(--right-color));
}

.game-sw {
  margin-top: 0.55rem;
}

.game-sw .swiper-slide {
  width: 1.48rem;
}

.game-sw .swiper-slide p {
  text-align: center;
}

.game-sw .swiper-slide p img {
  width: 1.14rem;
  height: 1.14rem;
}

.game-sw .swiper-slide span {
  margin-top: 0.14rem;
  font-size: 0.24rem;
  display: block;
  text-align: center;
  color: #3F4140;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.make-con {
  width: 6.76rem;
  height: auto;
  margin-top: 0.36rem;
  padding-top: 0.45rem;
  box-sizing: border-box;
  padding-bottom: 3.52rem;
  padding-right: 0.4rem;
  position: relative;
  z-index: 0;
}

.make-con::after {
  content: "";
  width: 6.75rem;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 3.52rem;
  z-index: -1;
  background: url("../images/card-top.png") no-repeat 0 0;
  background-size: 100% auto;
}

.make-con::before {
  content: "";
  width: 6.37rem;
  height: 3.52rem;
  position: absolute;
  left: 0;
  bottom: 0.02rem;
  z-index: -1;
  background: url("../images/card-bom.png") no-repeat 0 0;
  background-size: 100% auto;
}

.make-text {
  width: 5.42rem;
  margin: 0 auto;
  text-align: center;
  font-size: 0.24rem;
  color: #3F4140;
}

.make-b {
  margin-top: 0.3rem;
}

.make-b ul {
  display: flex;
  justify-content: center;
}

.make-b ul li {
  width: 1.56rem;
  height: 2.17rem;
  border-radius: 0.3rem;
  margin: 0 0.26rem;
  background-color: #fff;
  box-sizing: border-box;
  padding-top: 0.11rem;
  position: relative;
  background: url("../images/b-item.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.make-b ul li::after {
  position: absolute;
  content: "";
  top: 50%;
  margin-top: -0.12rem;
  right: -0.36rem;
  width: 0.14rem;
  height: 0.24rem;
  -webkit-mask-image: url(../images/icon-right.png);
  -webkit-mask-size: 100% 100%;
  background: var(--main-color);
  opacity: 0.6;
}

.make-b ul li:nth-last-child(1)::after {
  display: none;
}

.make-b ul li span {
  display: block;
  text-align: center;
  font-size: 0.28rem;
  color: #191919;
  position: relative;
  z-index: 0;
}

.make-b ul li span::after {
  content: "";
  position: absolute;
  width: 0.79rem;
  height: 0.15rem;
  left: 50%;
  margin-left: -0.39rem;
  bottom: 0.05rem;
  z-index: -1;
  background: url("../images/tips1.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.make-b ul li img {
  display: block;
  margin: 0.1rem auto 0;
  width: 0.8rem;
  height: 0.8rem;
  object-fit: contain;
}

.make-b ul li a {
  width: 1.2rem;
  height: 0.46rem;
  border-radius: 1rem;
  font-size: 0.24rem;
  text-align: center;
  line-height: 0.46rem;
  display: block;
  margin: 0.1rem auto;
  color: #fff;
  background: linear-gradient(to right, var(--left-color), var(--right-color));
}

.make-b ul li em {
  margin-top: 0.1rem;
  height: 0.46rem;
  line-height: 0.46rem;
  display: block;
  font-size: 0.24rem;
  color: #000000;
  text-align: center;
}

.make-user {
  width: 5.47rem;
  height: 3.25rem;
  box-sizing: border-box;
  padding-top: 0.4rem;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  margin-left: -2.93rem;
  bottom: 0;
}

.make-user p {
  font-size: 0.24rem;
  color: #3F4140;
  text-align: center;
}

.make-user ul {
  margin-top: 0.3rem;
  display: flex;
  justify-content: space-around;
}

.make-user ul li {
  width: 0.75rem;
  height: 0.75rem;
  background: url("../images/icon-add.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.make-user ul li img {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}

.make-user .u-btn {
  display: block;
  width: 5.34rem;
  height: 0.64rem;
  border-radius: 0.45rem;
  font-size: 0.26rem;
  text-align: center;
  line-height: 0.58rem;
  color: #fff;
  margin: 0.3rem auto 0;
  background: linear-gradient(to right, var(--left-color), var(--right-color));
}

.make-gift {
  width: 3.86rem;
  height: 3.14rem;
  margin: 0 auto;
  background: url("../images/mg-bg.png") no-repeat 0 0;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding-top: 0.28rem;
  position: relative;
}

.make-gift p {
  position: relative;
  text-align: center;
  font-size: 0.28rem;
  color: #191919;
  z-index: 0;
}

.make-gift p::after {
  content: "";
  position: absolute;
  width: 0.99rem;
  height: 0.15rem;
  left: 50%;
  margin-left: -0.39rem;
  bottom: 0.05rem;
  z-index: -1;
  background: url(../images/tips1.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.make-gift img {
  width: 2.16rem;
  height: 2.16rem;
  display: block;
  margin: 0 auto;
}

.make-gift2 {
  width: 5.02rem;
  height: 2.43rem;
  margin: 0 auto;
  background: url("../images/mg-bg2.png") no-repeat 0 0;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.make-gift2 img {
  width: 5.0rem;
  height: 2.4rem;
  border-radius: 0.25rem;
}

.card-sw {
  width: 7.5rem;
  margin-left: -0.6rem;
  height: auto;
  padding-bottom: 0.6rem;
  margin-bottom: -0.24rem;
}

.card-sw .swiper-slide {
  width: 6.76rem;
  margin: 0.36rem 0.1rem 0 0.47rem;
  margin-top: 0.36rem;
  box-sizing: border-box;
  padding-top: 0.45rem;
  padding-bottom: 3.68rem;
  padding-right: 0.4rem;
  position: relative;
  z-index: 0;
}

.card-sw .swiper-slide::after {
  content: "";
  width: 6.75rem;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 3.52rem;
  z-index: -1;
  background: url("../images/card-top.png") no-repeat 0 0;
  background-size: 100% auto;
}

.card-sw .swiper-slide::before {
  content: "";
  width: 6.37rem;
  height: 3.52rem;
  position: absolute;
  left: 0;
  bottom: 0.02rem;
  z-index: -1;
  background: url("../images/card-bom.png") no-repeat 0 0;
  background-size: 100% auto;
}

.card-sw .swiper-pagination-bullet {
  width: 0.12rem;
  height: 0.12rem;
  background: var(--main-color);
}

.card-sw .swiper-pagination-bullet-active {
  width: 0.3rem;
  height: 0.12rem;
  border-radius: 0.2rem;
}

.make-head {
  display: flex;
  margin-bottom: 0.05rem;
  width: 5.63rem;
  margin: 0.1rem auto 0.34rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding-bottom: 0.3rem;
}

.make-head .li-img {
  margin-right: 0.2rem;
}

.make-head .li-img img {
  width: 1.09rem;
  height: 1.09rem;
  border-radius: 0.25rem;
}

.make-head .li-text {
  flex: 1;
  box-sizing: border-box;
  padding-bottom: 0.14rem;
  display: flex;
  align-items: center;
}

.make-head .li-text div:nth-child(1) {
  flex: 1;
}

.make-head .li-text div .li-tit {
  font-size: 0.32rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  color: #3F4140;
}

.make-head .li-text div .li-tit i {
  width: 0.17rem;
  height: 0.19rem;
  background: url("../images/icon-hot.png") no-repeat 0 0;
  background-size: 100% 100%;
  margin-left: 0.05rem;
}

.make-head .li-text div p {
  height: 0.38rem;
  margin-top: 0.15rem;
}

.make-head .li-text div p span {
  margin-left: 0.1rem;
  border-radius: 0.1rem;
  padding: 0 0.05rem;
  color: var(--main-color);
  border: 1px solid var(--main-color);
}

.make-head .li-text div p span:nth-child(1) {
  margin-left: 0;
}

.make-head .li-text div p em {
  color: #A7A8A7;
  font-size: 0.24rem;
  margin-left: 0.1rem;
}

.make-head .li-text div p em:nth-child(1) {
  margin-left: 0;
}

.make-head .li-text div a {
  display: block;
  width: 1.4rem;
  height: 0.58rem;
  border-radius: 0.45rem;
  font-size: 0.26rem;
  text-align: center;
  line-height: 0.58rem;
  color: #fff;
  margin: 0.1rem 0 0 0.2rem;
}

.make-head .li-text div .btn1 {
  background: linear-gradient(to right, var(--left-color), var(--right-color));
}

.make-head .li-text div .btn2 {
  background: linear-gradient(to right, #FFC96A, #FAB736);
}

.make-head:nth-last-child(1) .li-text {
  border-bottom: 0;
  margin-bottom: 0;
}

.make-gf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.16rem;
}

.make-gf p {
  display: flex;
  align-items: center;
}

.make-gf p i {
  width: 0.19rem;
  height: 0.19rem;
  -webkit-mask-image: url(../images/icon-p.png);
  -webkit-mask-size: 100% 100%;
  background: var(--main-color);
}

.make-gf p span {
  color: #3F4140;
  font-size: 0.22rem;
  position: relative;
  margin-left: 0.05rem;
}

.make-gf p span::after {
  content: "";
  position: absolute;
  bottom: 0.03rem;
  left: 0;
  width: 1.46rem;
  height: 0.1rem;
  z-index: -1;
  border-radius: 0.05rem;
  background: linear-gradient(to right, var(--left-color), #fff);
}

.make-gf p span em {
  color: var(--main-color);
}

.make-gf a {
  display: block;
  width: 1.4rem;
  height: 0.58rem;
  border-radius: 0.45rem;
  font-size: 0.26rem;
  text-align: center;
  line-height: 0.58rem;
  color: #fff;
  background: linear-gradient(to right, #FFC96A, #FAB736);
}

.ban-sw {
  width: 7.5rem;
  height: 4.4rem;
  margin-top: 0.3rem;
}

.ban-sw .swiper-slide {
  width: 6.9rem;
  height: 3.88rem;
  margin: 0 0.4rem;
}

.ban-sw .swiper-slide img {
  width: 6.9rem;
  height: 3.88rem;
  border-radius: 0.2rem;
}

.ban-sw .swiper-pagination-bullet {
  opacity: 0.4;
  background-color: var(--main-color);
}

.ban-sw .swiper-pagination-bullet-active {
  opacity: 1;
}

.rule-con p {
  font-size: 0.26rem;
  color: #3F4140;
  position: relative;
  width: 6rem;
  margin-left: 0.55rem;
  line-height: 0.4rem;
  margin-bottom: 0.24rem;
}

.rule-con p:nth-last-child(1) {
  margin-bottom: 0;
}

.rule-con p::after {
  content: "";
  position: absolute;
  width: 0.17rem;
  height: 0.18rem;
  top: 0.1rem;
  left: -0.3rem;
  -webkit-mask-image: url(../images/tit-tips2.png);
  -webkit-mask-size: 100% 100%;
  background: linear-gradient(to bottom, var(--right-color), var(--left-color));
}

.rule-con p em {
  font-size: 0.28rem;
  display: block;
  color: #3F4140;
  font-weight: 500;
}

.rule-con .table {
  width: 6rem;
  margin: 0.2rem auto 0.3rem;
  overflow: hidden;
}

.rule-con .table th {
  background: var(--light-color);
  color: #5B5B5B;
  font-weight: 400;
  font-size: 0.24rem;
  height: 0.4rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.rule-con .table td {
  font-size: 0.24rem;
  color: #5B5B5B;
  line-height: 0.28rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.rule-con .table th,
.rule-con .table td {
  width: 60%;
  line-height: 0.34rem;
  text-align: center;
  padding: 0.12rem 0.2rem;
}

.rule-tips {
  text-align: center;
  margin: 0.3rem auto 0;
  width: 3.36rem;
  height: 0.45rem;
  background: url("../images/r-bom.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.side {
  position: fixed;
  right: 0;
  bottom: 1.4rem;
  z-index: 10;
  transition: all 0.5s;
}

.side a {
  display: block;
  margin: 0.1rem 0;
}

.side .icon-s1 {
  display: block;
  width: 1.02rem;
  height: 1.10rem;
  background: url("../images/side1.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.side .icon-s2 {
  display: block;
  width: 1.02rem;
  height: 1.10rem;
  background: url("../images/side2.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.tab-bom {
  position: fixed;
  left: 50%;
  margin-left: -3.75rem;
  bottom: 0;
  width: 7.5rem;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 0.25rem 0.25rem 0 0;
  height: 1.4rem;
  justify-content: space-around;
  z-index: 9;
}

.tab-bom i {
  display: block;
  width: 0.93rem;
  height: 0.92rem;
  position: relative;
}

.tab-bom a {
  position: relative;
}

.tab-bom a p {
  position: absolute;
  left: 50%;
  transform: translateX(-51%);
  top: -0.50rem;
  height: 0.4rem;
  border-radius: 0.2rem;
  width: 2.6rem;
  line-height: 0.4rem;
  z-index: 0;
  white-space: nowrap;
  background: linear-gradient(to bottom, var(--left-color), var(--right-color));
}

.tab-bom a p span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2.4rem;
  height: 0.4rem;
  margin-left: -1.2rem;
  overflow: hidden;
}

.tab-bom a p span em {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  color: #fff;
  font-size: 0.2rem;
  text-align: center;
}

.tab-bom a p::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.04rem;
  margin-left: -0.05rem;
  width: 0.2rem;
  height: 0.2rem;
  border-radius: 0.04rem;
  background-color: var(--right-color);
  transform: rotate(45deg);
  z-index: -1;
}

.tab-bom .tb1 {
  background: url("../images/icon1.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.tab-bom .tb2 {
  width: 1.14rem;
  background: url("../images/icon2.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.tab-bom .tb3 {
  background: url("../images/icon3.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.tab-bom .tb4 {
  background: url("../images/icon4.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.tab-bom .tb5 {
  background: url("../images/icon5.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.kbFootWrap {
  margin-bottom: 1.2rem;
}

.kbFootWrap .kbFootCopyright {
  padding-bottom: 0.5rem;
}

.pop-bom {
  position: fixed;
  bottom: 0;
  left: 50%;
  margin-left: -3.75rem;
  width: 7.5rem;
  z-index: 90;
  background-color: #fff;
  box-sizing: border-box;
  padding-bottom: 0.4rem;
  animation: movedown 0.4s;
}

.pop-bom::after {
  content: "";
  position: absolute;
  top: -1.4rem;
  left: 0;
  width: 7.5rem;
  height: 6.26rem;
  z-index: -1;
  background: url("../images/pb-top.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.pop-bom .pb-nav {
  width: 4.93rem;
  height: 1rem;
  line-height: 1rem;
  display: flex;
  margin-left: 2.4rem;
  margin-top: -1rem;
}

.pop-bom .pb-nav a {
  flex: 1;
  font-size: 0.32rem;
  color: #7D7D7D;
  text-align: center;
}

.pop-bom .pb-nav a.on {
  position: relative;
  color: #191919;
  font-size: 0.4rem;
  font-weight: bold;
  margin-top: -0.03rem;
}

.pop-bom .pb-nav a.on::after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -0.3rem;
  bottom: 0.12rem;
  width: 0.6rem;
  height: 0.08rem;
  border-radius: 1rem;
  background: linear-gradient(to right, var(--left-color), var(--right-color));
}

.pop-bom .pb-tips {
  width: 7.09rem;
  margin: 0.3rem auto 0;
  height: 0.76rem;
  background: url("../images/g-new.png") no-repeat 0 0;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
}

.pop-bom .pb-tips img {
  width: 0.35rem;
  height: 0.44rem;
  object-fit: contain;
  margin: 0 0.04rem 0 0.08rem;
}

.pop-bom .pb-tips span {
  flex: 1;
  color: #5B5B5B;
  font-size: 0.26rem;
}

.pop-bom .pb-tips span em {
  color: var(--main-color);
}

.pop-bom .pb-tips p {
  display: flex;
  align-items: center;
  margin-right: 0.08rem;
  color: #9E9E9E;
  font-size: 0.22rem;
}

.pop-bom .pb-tips p i {
  width: 0.18rem;
  height: 0.18rem;
  margin-right: 0.04rem;
  background: url("../images/icon-din.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.pop-bom .pb-list {
  margin-top: 0.4rem;
}

.pop-bom .pb-list ul {
  max-height: 6.6rem;
  overflow-y: auto;
}

.pop-bom .pb-list ul li {
  display: flex;
  align-items: center;
  width: 6.8rem;
  margin: 0 auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding-bottom: 0.2rem;
  margin-bottom: 0.3rem;
}

.pop-bom .pb-list ul li:nth-last-child(1) {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.pop-bom .pb-list ul li .pb-icon {
  width: 1.08rem;
  height: 1.08rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 0.2rem;
  background: url("../images/icon-bg.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.pop-bom .pb-list ul li .pb-icon img {
  width: 0.64rem;
  height: 0.64rem;
}

.pop-bom .pb-list ul li .pb-icon i {
  display: block;
  width: 0.64rem;
  height: 0.64rem;
}

.pop-bom .pb-list ul li .pb-text {
  margin-right: 0.2rem;
  flex: 1;
}

.pop-bom .pb-list ul li .pb-text span {
  display: block;
  color: #000000;
  font-size: 0.28rem;
}

.pop-bom .pb-list ul li .pb-text p {
  font-size: 0.22rem;
  color: #939393;
  margin-top: 0.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pop-bom .pb-list ul li .pb-text p em {
  color: var(--main-color);
}

.pop-bom .pb-list ul li .pb-text p a {
  color: var(--main-color);
}

.pop-bom .pb-list ul li .pb-btn a {
  display: block;
  width: 1.4rem;
  height: 0.5rem;
  border-radius: 0.45rem;
  text-align: center;
  line-height: 0.5rem;
  color: #fff;
  font-size: 0.26rem;
  margin: 0.08rem 0;
}

.pop-bom .pb-list ul li .pb-btn .pb-btn1 {
  background: linear-gradient(to right, var(--left-color), var(--right-color));
}

.pop-bom .pb-list ul li .pb-btn .pb-btn2 {
  background: linear-gradient(to right, #FFC96A, #FAB736);
}

.pop-bom .pb-list ul li .pb-btn p {
  font-size: 0.2rem;
  color: #939393;
  text-align: center;
  line-height: 0.28rem;
}

.pop-bom .pb-list ul li .pb-btn p span {
  display: block;
}

.pop-bom .pb-card {
  margin-top: 0.3rem;
  width: 6.93rem;
  height: 2.83rem;
  background: url("../images/card-bg.png") no-repeat 0 0;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding-top: 0.32rem;
  margin-left: 0.35rem;
}

.pop-bom .pb-card ul {
  display: flex;
  justify-content: center;
}

.pop-bom .pb-card ul li {
  position: relative;
}

.pop-bom .pb-card ul li::after {
  position: absolute;
  content: "";
  top: 50%;
  margin-top: -0.42rem;
  right: -0.1rem;
  width: 0.14rem;
  height: 0.24rem;
  -webkit-mask-image: url(../images/icon-right.png);
  -webkit-mask-size: 100% 100%;
  background: var(--main-color);
  opacity: 0.6;
}

.pop-bom .pb-card ul li:nth-last-child(1)::after {
  display: none;
}

.pop-bom .pb-card ul li div {
  width: 1.56rem;
  height: 1.67rem;
  border-radius: 0.3rem;
  margin: 0 0.26rem;
  background-color: #fff;
  border: 1px solid var(--light-color);
  box-sizing: border-box;
  padding-top: 0.11rem;
  position: relative;
}

.pop-bom .pb-card ul li div span {
  display: block;
  text-align: center;
  font-size: 0.28rem;
  color: #191919;
  position: relative;
  z-index: 0;
}

.pop-bom .pb-card ul li div span::after {
  content: "";
  position: absolute;
  width: 0.79rem;
  height: 0.15rem;
  left: 50%;
  margin-left: -0.39rem;
  bottom: 0.05rem;
  z-index: -1;
  background: url("../images/tips1.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.pop-bom .pb-card ul li div img {
  display: block;
  margin: 0.1rem auto 0;
  width: 0.8rem;
  height: 0.8rem;
  object-fit: contain;
}

.pop-bom .pb-card ul li a {
  width: 1.2rem;
  height: 0.46rem;
  border-radius: 1rem;
  font-size: 0.24rem;
  text-align: center;
  line-height: 0.46rem;
  display: block;
  margin: 0.1rem auto;
  color: #fff;
  background: linear-gradient(to right, var(--left-color), var(--right-color));
}

.pop-bom .pb-card ul li em {
  margin-top: 0.1rem;
  height: 0.46rem;
  line-height: 0.46rem;
  display: block;
  font-size: 0.24rem;
  color: #000000;
  text-align: center;
}

.pop-down {
  position: fixed;
  bottom: 0;
  left: 50%;
  margin-left: -3.75rem;
  width: 7.5rem;
  z-index: 90;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0.4rem 0.5rem 0.68rem;
  border-radius: 0.4rem 0.4rem 0 0;
  animation: movedown 0.4s;
}

.de-pop {
  height: 11.06rem;
}

.pb-close {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 0.4rem;
  height: 0.4rem;
  background: url("../images/icon-close2.png") no-repeat center center;
  background-size: 0.2rem 0.2rem;
}

.pb-title {
  text-align: center;
  font-size: 0.4rem;
  color: #080C0A;
  font-weight: bold;
}

.pb-ch {
  display: flex;
  align-items: center;
  margin-top: 0.56rem;
}

.pb-ch i {
  position: relative;
  width: 0.28rem;
  height: 0.28rem;
  background-color: rgba(207, 209, 208, 0.6);
  border-radius: 50%;
}

.pb-ch i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -0.07rem;
  margin-top: -0.08rem;
  width: 0.14rem;
  height: 0.15rem;
  background: url("../images/icon-d.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.pb-ch i.on {
  background-color: var(--main-color);
}

.pb-ch span {
  flex: 1;
  font-size: 0.32rem;
  color: #6E6E6E;
  margin-left: 0.12rem;
}

.pb-ch p {
  display: flex;
  align-items: center;
  color: var(--main-color);
  margin-right: 0.3rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.pb-ch p em {
  margin-right: 0.08rem;
  width: 0.18rem;
  height: 0.18rem;
  -webkit-mask-image: url(../images/icon-ref2.png);
  -webkit-mask-size: 100% 100%;
  background: var(--main-color);
}

.pb-input {
  width: 6.52rem;
  height: 0.96rem;
  border-radius: 0.2rem;
  background-color: #F6F5F5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 0.3rem;
  margin-top: 0.2rem;
}

.pb-input input {
  width: 4rem;
  display: block;
  background: none;
  border: 0;
  font-size: 0.3rem;
}

.pb-input input::-webkit-input-placeholder {
  color: #B2B3B2;
  font-size: 0.3rem;
}

.pb-input a {
  flex-shrink: 0;
  width: 1.36rem;
  height: 0.64rem;
  text-align: center;
  color: #FFFFFF;
  font-size: 0.26rem;
  line-height: 0.64rem;
  border-radius: 0.4rem;
  background: linear-gradient(to right, var(--left-color), var(--right-color));
}

.pb-game {
  width: 100%;
  height: 1.48rem;
  border-radius: 0.2rem;
  background-color: #F6F5F5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 0.3rem;
  margin-top: 0.2rem;
}

.pb-game img {
  width: 1.08rem;
  height: 1.08rem;
  border-radius: 0.25rem;
}

.pb-game p {
  flex: 1;
  margin-left: 0.2rem;
}

.pb-game p span {
  display: flex;
  align-items: center;
}

.pb-game p span:nth-child(2) {
  margin-top: 0.1rem;
  font-size: 0.24rem;
  color: #A7A8A7;
}

.pb-game p span em {
  max-width: 2.6rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 0.32rem;
  color: #3F4140;
}

.pb-game p span i {
  width: 0.16rem;
  height: 0.18rem;
  margin-left: 0.05rem;
  background: url("../images/icon-hot.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.pb-game a {
  width: 1.36rem;
  height: 0.64rem;
  text-align: center;
  color: #FFFFFF;
  font-size: 0.26rem;
  line-height: 0.64rem;
  border-radius: 0.4rem;
  background: linear-gradient(to right, var(--left-color), var(--right-color));
}

.pb-text-con {
  margin-top: 0.5rem;
}

.pb-text-con .pb-tit {
  font-size: 0.24rem;
  color: #737373;
  font-weight: bold;
}

.pb-text-con .pb-con {
  width: 6.4rem;
  height: 1.8rem;
  font-size: 0.24rem;
  color: #939393;
  overflow-y: auto;
  margin-top: 0.12rem;
  line-height: 0.36rem;
  padding-right: 0.1rem;
}

.pb-text-con .pb-con::-webkit-scrollbar {
  width: 0.05rem;
  height: "";
  background: #F0F0F0;
}

.pb-text-con .pb-con::-webkit-scrollbar-track {
  /* box-shadow: inset 0 0 0px rgba(240, 240, 240, .5); */
  border-radius: 0.2rem;
  background: none;
}

.pb-text-con .pb-con::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  /* box-shadow: inset 0 0 0px rgba(237, 44, 37, .5); */
  background: #E0E0E0;
}

.pb-tetx-tips {
  text-align: center;
  color: #6E6E6E;
  font-size: 0.26rem;
  margin-top: 0.3rem;
}

.pb-name {
  text-align: center;
  color: #191919;
  font-size: 0.28rem;
  margin-top: 0.25rem;
}

.pb-bom-btn {
  display: flex;
  justify-content: center;
  margin-top: 0.58rem;
}

.pb-bom-btn a {
  margin: 0 0.3rem;
  width: 2.66rem;
  height: 0.7rem;
  text-align: center;
  line-height: 0.7rem;
  box-sizing: border-box;
  font-size: 0.26rem;
  border-radius: 1rem;
}

.pb-bom-btn .btn1 {
  color: var(--main-color);
  border: 1px solid var(--main-color);
}

.pb-bom-btn .btn2 {
  color: #fff;
  background: linear-gradient(to right, var(--left-color), var(--right-color));
}

.picon1 {
  -webkit-mask-image: url(../images/i1.png);
  -webkit-mask-size: 100% 100%;
  background: linear-gradient(-50deg, var(--right-color), var(--left-color));
}

.picon2 {
  -webkit-mask-image: url(../images/i2.png);
  -webkit-mask-size: 100% 100%;
  background: linear-gradient(-50deg, var(--right-color), var(--left-color));
}

.picon3 {
  -webkit-mask-image: url(../images/i3.png);
  -webkit-mask-size: 100% 100%;
  background: linear-gradient(-50deg, var(--right-color), var(--left-color));
}

.picon4 {
  -webkit-mask-image: url(../images/i4.png);
  -webkit-mask-size: 100% 100%;
  background: linear-gradient(-50deg, var(--right-color), var(--left-color));
}

.picon5 {
  -webkit-mask-image: url(../images/i5.png);
  -webkit-mask-size: 100% 100%;
  background: linear-gradient(-50deg, var(--right-color), var(--left-color));
}

.picon6 {
  -webkit-mask-image: url(../images/i6.png);
  -webkit-mask-size: 100% 100%;
  background: linear-gradient(-50deg, var(--right-color), var(--left-color));
}

.picon7 {
  -webkit-mask-image: url(../images/i7.png);
  -webkit-mask-size: 100% 100%;
  background: linear-gradient(-50deg, var(--right-color), var(--left-color));
}

.picon8 {
  -webkit-mask-image: url(../images/i8.png);
  -webkit-mask-size: 100% 100%;
  background: linear-gradient(-50deg, var(--right-color), var(--left-color));
}

.picon9 {
  -webkit-mask-image: url(../images/i9.png);
  -webkit-mask-size: 100% 100%;
  background: linear-gradient(-50deg, var(--right-color), var(--left-color));
}

.picon10 {
  -webkit-mask-image: url(../images/i10.png);
  -webkit-mask-size: 100% 100%;
  background: linear-gradient(-50deg, var(--right-color), var(--left-color));
}

.picon11 {
  border-radius: 0.1rem;
  background: url("../images/i11.jpg") no-repeat 0 0;
  background-size: 100% 100%;
}

.pop-mask {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
}

.prize-nav {
  display: flex;
  align-items: center;
  margin: 0.45rem auto 0;
}

.prize-nav a {
  height: 0.71rem;
  line-height: 0.71rem;
  flex: 1;
  font-size: 0.3rem;
  color: #5A5F65;
  text-align: center;
}

.prize-nav a.on {
  color: #000000;
  font-weight: bold;
  position: relative;
}

.prize-nav a.on::after {
  content: "";
  position: absolute;
  bottom: 0.04rem;
  left: 50%;
  margin-left: -0.26rem;
  width: 0.52rem;
  height: 0.06rem;
  border-radius: 0.8rem;
  background-color: #23C268;
}

.prize-con {
  margin-top: 0.3rem;
}

.prize-con .prize-tips {
  box-sizing: border-box;
  padding: 0.16rem 0.2rem;
  border-radius: 0.2rem;
  font-size: 0.24rem;
  color: #EE8E1A;
  line-height: 0.36rem;
  background-color: rgba(255, 162, 36, 0.08);
}

.prize-con .prize-list {
  width: 6.5rem;
  margin-top: 0.4rem;
  height: 4.8rem;
  overflow-y: auto;
  padding-right: 0.1rem;
}

.prize-con .prize-list::-webkit-scrollbar {
  width: 0.06rem;
  height: "";
  background: #F1F1F1;
}

.prize-con .prize-list::-webkit-scrollbar-track {
  /* box-shadow: inset 0 0 0px rgba(240, 240, 240, .5); */
  border-radius: 0.2rem;
  background: none;
}

.prize-con .prize-list::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  /* box-shadow: inset 0 0 0px rgba(237, 44, 37, .5); */
  background: #E4E4E4;
}

.prize-con .prize-list ul li {
  display: flex;
  align-items: center;
  margin-bottom: 0.4rem;
}

.prize-con .prize-list ul li .p-img {
  margin-right: 0.32rem;
  width: 1.28rem;
  height: 1.28rem;
  border-radius: 0.2rem;
  background-color: #EFF7F9;
}

.prize-con .prize-list ul li .p-img img {
  width: 1.28rem;
  height: 1.28rem;
  object-fit: contain;
}

.prize-con .prize-list ul li p {
  flex: 1;
}

.prize-con .prize-list ul li p span {
  display: flex;
  align-items: center;
}

.prize-con .prize-list ul li p span:nth-child(1) {
  display: block;
  width: 3.4rem;
  font-size: 0.3rem;
  color: #131715;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.prize-con .prize-list ul li p span:nth-child(2) {
  font-size: 0.24rem;
  color: #A7A8A7;
}

.prize-con .prize-list ul li p span:nth-child(3) {
  font-size: 0.24rem;
  color: #A7A8A7;
}

.prize-con .prize-list ul li p span a {
  margin-left: 0.06rem;
  display: flex;
  align-items: center;
  font-size: 0.24rem;
  color: #0AAC3C;
}

.prize-con .prize-list ul li p span a i {
  width: 0.24rem;
  height: 0.24rem;
  background: url("../images/icon-code.png") no-repeat 0 0;
  background-size: 100% 100%;
  margin-right: 0.04rem;
}

.prize-con .prize-list ul li a {
  width: 1.2rem;
  height: 0.56rem;
  text-align: center;
  line-height: 0.56rem;
  border-radius: 0.4rem;
  color: #fff;
  font-size: 0.26rem;
}

.prize-con .prize-list ul li a.plbtn1 {
  background-color: #23C268;
}

.prize-con .prize-list ul li a.plbtn2 {
  background-color: #FFA224;
}

.prize-con .prize-list ul li a.plbtn3 {
  color: #0AAC3C;
  background-color: rgba(35, 194, 104, 0.08);
}

.prize-con .prize-list .pl-tips {
  text-align: center;
  font-size: 0.24rem;
  color: #A7A8A7;
  margin-top: 0.2rem;
}

.pb-adds {
  position: absolute;
  top: 0.6rem;
  left: 0;
  display: flex;
  align-items: center;
  width: 1.69rem;
  height: 0.56rem;
  justify-content: center;
  background-color: #F2F3F5;
  border-radius: 0 0.4rem 0.4rem  0;
}

.pb-adds i {
  width: 0.28rem;
  height: 0.28rem;
  background: url("../images/icon-adds.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.pb-adds span {
  font-size: 0.22rem;
  color: #3E403F;
  margin-left: 0.1rem;
}

.pl-un {
  margin: 0.6rem auto;
}

.pl-un img {
  display: block;
  width: 3rem;
  height: 3rem;
  margin: 0 auto;
}

.pl-un p {
  text-align: center;
  font-size: 0.28rem;
  color: #b8b9b8;
  margin-top: 0.2rem;
}

.task-tips {
  margin: 0.25rem auto 0;
  box-sizing: border-box;
}

.task-tips .task-tips-con {
  max-height: 1.28rem;
  overflow-y: auto;
  width: 6.5rem;
  overflow-y: auto;
  padding-right: 0.1rem;
}

.task-tips .task-tips-con::-webkit-scrollbar {
  width: 0.06rem;
  height: "";
  background: #F1F1F1;
}

.task-tips .task-tips-con::-webkit-scrollbar-track {
  /* box-shadow: inset 0 0 0px rgba(240, 240, 240, .5); */
  border-radius: 0.2rem;
  background: none;
}

.task-tips .task-tips-con::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  /* box-shadow: inset 0 0 0px rgba(237, 44, 37, .5); */
  background: #E4E4E4;
}

.task-tips em {
  display: inline-flex;
  padding: 0.02rem 0.1rem;
  justify-content: center;
  align-items: center;
  gap: 0.1rem;
  border-radius: 0.9rem;
  background: #F2F3F5;
  color: #3E403F;
  text-align: justify;
  font-family: "Source Han Sans CN";
  font-size: 0.22rem;
  font-style: normal;
  font-weight: 400;
  line-height: 0.28rem;
  /* 127.273% */
  margin-bottom: 0.1rem;
}

.task-tips p {
  margin-bottom: 0.08rem;
  font-size: 0.22rem;
  color: #7A7D7A;
  line-height: 0.30rem;
}

.task-tips p a {
  color: #0AAC3C;
  font-size: 0.22rem;
}

.task-tips p a i {
  width: 0.18rem;
  height: 0.18rem;
  background: url("../images/icon-go.png") no-repeat 0 0;
  background-size: 100% 100%;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.05rem;
  margin-top: -0.04rem;
}

.po-num {
  height: 0.7rem;
  border-radius: 0.15rem;
  background-color: #F3F8FB;
  display: flex;
  box-sizing: border-box;
  padding: 0 0.28rem;
}

.po-num p {
  display: flex;
  align-items: center;
}

.po-num p:nth-child(2) {
  flex: 1;
  margin-left: 0.2rem;
}

.po-num span {
  color: #5A5F65;
  font-size: 0.24rem;
  margin-right: 0.08rem;
}

.po-num em {
  font-weight: bold;
  font-size: 0.28rem;
  color: #000000;
}

.po-num a {
  font-weight: bold;
  font-size: 0.28rem;
  color: #23C268;
}

.po-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.3rem;
}

.po-nav a {
  width: 2.2rem;
  height: 0.56rem;
  text-align: center;
  line-height: 0.56rem;
  border-radius: 0.5rem;
  text-align: center;
  line-height: 0.56rem;
  font-size: 0.26rem;
  color: #23C268;
  border: 1px solid #23C268;
  box-sizing: border-box;
  margin: 0 0.2rem;
}

.po-nav a.on {
  color: #fff;
  background-color: #23C268;
}

.tick-list {
  width: 6.5rem;
  margin-top: 0.4rem;
  height: 6.4rem;
  overflow-y: auto;
  padding-right: 0.1rem;
}

.tick-list::-webkit-scrollbar {
  width: 0.06rem;
  height: "";
  background: #F1F1F1;
}

.tick-list::-webkit-scrollbar-track {
  /* box-shadow: inset 0 0 0px rgba(240, 240, 240, .5); */
  border-radius: 0.2rem;
  background: none;
}

.tick-list::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  /* box-shadow: inset 0 0 0px rgba(237, 44, 37, .5); */
  background: #E4E4E4;
}

.tick-list ul li {
  display: flex;
  align-items: center;
  margin-bottom: 0.24rem;
  box-sizing: border-box;
  padding-bottom: 0.24rem;
  border-bottom: 1px dashed #F5F5F5;
}

.tick-list ul li p {
  flex: 1;
}

.tick-list ul li p span {
  display: block;
}

.tick-list ul li p span:nth-child(1) {
  font-size: 0.28rem;
  color: #5A5F65;
}

.tick-list ul li p span:nth-child(2) {
  color: #8B8B8B;
  font-size: 0.22rem;
}

.tick-list ul li em {
  font-size: 0.32rem;
  color: #505050;
}

.un-btn {
  filter: grayscale(1);
  color: #B7B7B7 !important;
  background: #EDEEED !important;
}

@-webkit-keyframes em-icon {
  100% {
    background-position: 100% 0;
  }
}

@keyframes movedown {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.wy .content {
  margin-top: 2rem;
}

.wy .head-act {
  width: 7.5rem;
  height: 15.42rem;
  top: 5rem;
  background: url(../images/wy-act-bg.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.wy .head-act-wy {
  position: absolute;
  width: 7.5rem;
  height: 0.5rem;
  top: 0.68rem;
}

.wy .gift-sw {
  margin-top: 2.35rem;
  width: 6.1rem;
}

.wy .act-news {
  top: 3.88rem;
}

.wy .act-news .new-box {
  background: none;
}

.wy .act-news a {
  width: 1.43rem;
  height: 0.55rem;
  background: url(../images/wy-p-btn.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.wy .act-num {
  top: 10.88rem;
  margin-left: 0.8rem;
  background: none;
  z-index: 1;
}

.wy .act-num span {
  width: 0.3rem;
  height: 0.31rem;
  background: url("../images/wy-icon-img.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.wy .act-num p {
  color: #fff;
  margin-left: 0.05rem;
}

.wy .act-num p em {
  color: #ffe5a7;
  margin-right: 0.04rem;
}

.wy .act-num i {
  margin-left: 0.05rem;
  background: url("../images/wy-icon-qu.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.wy .act-box {
  top: 4.2rem;
  left: 1.1rem;
  width: 5.3rem;
  height: 5.31rem;
  background: url("../images/wy-gi1.png") no-repeat 0 0;
  background-size: auto 100%;
}

.wy .act-box::after {
  display: none;
}

.wy .act-box.on {
  background: url("../images/wy-gi.png") no-repeat 0 0;
  background-size: 222.60rem 5.31rem;
  -webkit-animation: em-icon 2.4s steps(41) forwards;
  animation: em-icon 2.4s steps(41) forwards;
  -moz-animation: em-icon 2.4s steps(41) forwards;
  -o-animation: em-icon 2.4s steps(41) forwards;
  -ms-animation: em-icon 2.4s steps(41) forwards;
}

.wy .act-btn {
  width: 2.91rem;
  height: 1.17rem;
  top: 9.2rem;
  margin-left: -1.46rem;
  background: url("../images/wy-act-btn.gif") no-repeat 0 0;
  background-size: 100% 100%;
  padding-top: 0.55rem;
  z-index: 9;
}

.wy .act-btn.abtn1 {
  margin-left: -2.9rem;
  width: 2.81rem;
  height: 1.11rem;
  background: url("../images/wy-act-btn1.png") no-repeat 0 0;
  background-size: 100% auto;
}

.wy .act-btn.abtn2 {
  margin-left: 0.2rem;
  width: 2.81rem;
  height: 1.11rem;
  background: url("../images/wy-act-btn2.png") no-repeat 0 0;
  background-size: 100% auto;
}

.wy .act-par {
  top: 10.88rem;
  margin-left: -3.48rem;
}

.wy .act-par .par-text {
  box-sizing: border-box;
  padding-right: 0.28rem;
}

.wy .act-par .par-text span {
  display: none;
}

.wy .act-par .par-list {
  margin-top: 0.6rem;
}

.wy .act-par .par-list ul li p {
  color: #bc6215;
}

.wy .act-par .par-list ul li p em {
  color: #fff68d;
}

.wy .act-par .par-list ul .on a {
  color: #fde9da;
}

.wy .g-tips .g-num i {
  width: 0.31rem;
  height: 0.26rem;
  -webkit-mask-image: url(../images/icon-wy.png);
  -webkit-mask-size: 100% 100%;
  background: linear-gradient(-50deg, var(--right-color), var(--left-color));
}

.wy .g-list ul li .g-btn i {
  width: 0.31rem;
  height: 0.26rem;
  -webkit-mask-image: url(../images/icon-wy.png);
  -webkit-mask-size: 100% 100%;
  background: linear-gradient(-50deg, var(--right-color), var(--left-color));
}

.wy .tab-bom .tb2 {
  width: 0.93rem;
  background: url(../images/wy-icon2.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.d-link {
  color: var(--main-color);
}

.hidden {
  display: none !important;
}