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: #8773EC;
  --light-color: #E6D8F4;
  --tips-color: #6D75BE;
  --left-color: #ED99FE;
  --right-color: #AD98FF;
}

.skin-purple .head-act {
  background: url(../images/purple/act-bg.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .act-news .new-box {
  background: url("../images/purple/news-bg.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .act-news .new-box::after {
  background: url("../images/icon-new.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .act-news .new-box .scrollList li {
  color: #ffffff;
}

.skin-purple .act-news .new-box .scrollList li span {
  color: #f9ff91;
}

.skin-purple .act-news a {
  background: url("../images/purple/p-btn.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .act-num i {
  background: url("../images/purple/icon-qu.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .act-btn {
  background: url("../images/purple/act-btn.gif") no-repeat 0 0;
  background-size: 100% auto;
}

.skin-purple .act-btn.abtn1 {
  background: url("../images/purple/act-btn1.png") no-repeat 0 0;
  background-size: 100% auto;
}

.skin-purple .act-btn.abtn2 {
  background: url("../images/purple/act-btn2.png") no-repeat 0 0;
  background-size: 100% auto;
}

.skin-purple .act-par .par-text span {
  color: #fff;
}

.skin-purple .act-par .par-text p {
  color: #fff;
}

.skin-purple .act-par .par-text i {
  background-color: #8b60f0;
  box-shadow: inset 0 0 0.1rem rgba(125, 90, 236, 0.4);
}

.skin-purple .par-list ul li p {
  color: #fff;
}

.skin-purple .par-list ul li p em {
  color: #fe7add;
}

.skin-purple .par-list ul li a {
  color: #ffffff;
  background: url(../images/purple/btn.png) no-repeat 0 0;
  background-size: 100% 100%;
}

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

.skin-purple .par-list ul .un a {
  color: #e6ceff;
  background: url(../images/purple/btn-n.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .par-list .par-line {
  background-color: #7a4bff;
  border: 0.04rem solid #d28cff;
}

.skin-purple .par-list .par-line p {
  border: 1px solid #9a61ff;
  background: linear-gradient(to right, #f4b7ff, #f4b7ff 95%, #fff);
}

.skin-purple .con-box::after {
  background: url(../images/purple/con-top.png) no-repeat 0 0;
  background-size: 100% 100%;
}

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

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

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

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

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

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

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

.skin-purple .gift-box .gift-new div {
  background: url(../images/purple/g-new.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .make-box::after {
  background: url(../images/purple/con-top2.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .make-con::after {
  background: url(../images/purple/card-top.png) no-repeat 0 0;
  background-size: 100% auto;
}

.skin-purple .make-con::before {
  background: url(../images/purple/card-bom.png) no-repeat 0 0;
  background-size: 100% auto;
}

.skin-purple .make-gift {
  background: url(../images/purple/mg-bg.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .make-gift p::after {
  background: url(../images/purple/tips1.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .make-gift2 {
  background: url(../images/purple/mg-bg2.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .card-sw .swiper-slide::after {
  background: url(../images/purple/card-top.png) no-repeat 0 0;
  background-size: 100% auto;
}

.skin-purple .card-sw .swiper-slide::before {
  background: url(../images/purple/card-bom.png) no-repeat 0 0;
  background-size: 100% auto;
}

.skin-purple .make-b ul li {
  background: url(../images/purple/b-item.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .make-b ul li span::after {
  background: url(../images/purple/tips1.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .rule-tips {
  background: url("../images/purple/r-bom.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .pop-bom::after {
  background: url(../images/purple/pb-top.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .pop-bom .pb-list ul li .pb-icon {
  background: url(../images/purple/icon-bg.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .pop-bom .pb-tips {
  background: url(../images/purple/g-new.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .pop-bom .pb-card {
  background: url(../images/purple/card-bg.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .side .icon-s1 {
  background: url(../images/purple/side1.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .side .icon-s2 {
  background: url(../images/purple/side2.png) no-repeat 0 0;
  background-size: 100% 100%;
}

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

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

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

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

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

.skin-purple .wy .head-act {
  background: url(../images/purple/wy-act-bg.png) no-repeat 0 0;
  background-size: 100% 100%;
}

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

.skin-purple .wy .act-news a {
  background: url(../images/purple/wy-p-btn.png) no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .wy .act-num p {
  color: #fff;
}

.skin-purple .wy .act-num p em {
  color: #ffe5a7;
}

.skin-purple .wy .act-num span {
  background: url("../images/purple/wy-icon-img.png") no-repeat 0 0;
  background-size: 100% 100%;
}

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

.skin-purple .wy .act-btn {
  background: url("../images/purple/wy-act-btn.gif") no-repeat 0 0;
  background-size: 100% 100%;
}

.skin-purple .wy .act-btn.abtn1 {
  background: url("../images/purple/wy-act-btn1.png") no-repeat 0 0;
  background-size: 100% auto;
}

.skin-purple .wy .act-btn.abtn2 {
  background: url("../images/purple/wy-act-btn2.png") no-repeat 0 0;
  background-size: 100% auto;
}

.skin-purple .wy .act-par .par-text p i {
  background: none;
  box-shadow: none;
  color: #fe7add;
}

.skin-purple .wy .act-par .par-list ul li p {
  color: #fff;
}

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

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

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

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

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