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: #6CB4FF;
  --light-color: #D8EBF4;
  --tips-color: #6DA1BE;
  --left-color: #68CCFE;
  --right-color: #64B1FF;
}

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

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

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

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

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

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

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

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

.skin-blue .act-btn p {
  color: #fff;
}

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

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

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

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

.skin-blue .act-par .par-text i {
  background-color: #6295e2;
  box-shadow: inset 0 0 0.1rem rgba(175, 208, 247, 0.4);
}

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

.skin-blue .par-list ul li p em {
  color: #4aefff;
}

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

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

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

.skin-blue .par-list .par-line {
  background-color: #3388e5;
  border: 0.04rem solid #b8e8ff;
}

.skin-blue .par-list .par-line p {
  border: 1px solid #418cee;
  background: linear-gradient(to right, #6fadff, #6fadff 95%, #fff);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.skin-blue .wy .act-par .par-list ul li p em {
  color: #4aefff;
}

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

.skin-blue .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-blue .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-blue .wy .tab-bom .tb2 {
  width: 0.93rem;
  background: url(../images/blue/wy-icon2.png) no-repeat 0 0;
  background-size: 100% 100%;
}