@charset "UTF-8";
html {
  width: 100%;
  height: 100%;
}

body {
  font-family: "SourceHanSerifSC","微软雅黑";
  font-size: 0.32rem;
  color: #fff;
  margin: 0 auto;
  width: 10rem;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 640px;
  box-sizing: border-box;
}

* {
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: inherit;
}

input, button, textarea {
  outline: none;
  border: none;
  background: none;
}

ol, ul {
  list-style-type: none;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.container {
  width: 100%;
  height: 80.14667rem;
  position: relative;
  background: url(../img/bg.jpg) no-repeat;
  background-size: 100%;
}

.item1 {
  width: 100%;
  height: 15.58667rem;
  position: relative;
  background: url(../img/bg1.jpg) no-repeat;
  background-size: 100%;
}

.item2 {
  width: 100%;
  height: 4.25333rem;
  position: relative;
  background: url(../img/bg2.jpg) no-repeat;
  background-size: 100%;
}

.item3 {
  width: 100%;
  height: 6.72rem;
  position: relative;
  background: url(../img/bg3.jpg) no-repeat;
  background-size: 100%;
}

.item4 {
  width: 100%;
  height: 11.93333rem;
  position: relative;
  background: url(../img/bg4.jpg) no-repeat;
  background-size: 100%;
}

.item4 .btn-gift-5 {
  position: absolute;
  right: 1.24rem;
  top: 4.6rem;
  width: 2.98667rem;
  height: 2.21333rem;
}

.item4 .btn-gift-10 {
  position: absolute;
  left: 1.52rem;
  bottom: 2.92rem;
  width: 2.98667rem;
  height: 2.21333rem;
}

.item4 .btn-gift-20 {
  position: absolute;
  right: 1.24rem;
  bottom: 0.62667rem;
  width: 2.98667rem;
  height: 2.21333rem;
}

.item5 {
  width: 100%;
  height: 7.70667rem;
  position: relative;
  background: url(../img/bg5.jpg) no-repeat;
  background-size: 100%;
}

.item5 img {
  width: 1.10667rem;
  height: 1.10667rem;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -0.56rem;
}

.item5 .btn-gift-30 {
  position: absolute;
  left: 1.52rem;
  top: -0.53333rem;
  width: 2.98667rem;
  height: 2.21333rem;
}

.item5 .btn-gift-50 {
  position: absolute;
  right: 1.24rem;
  top: 1.73333rem;
  width: 2.98667rem;
  height: 2.21333rem;
}

.item6 {
  width: 100%;
  height: 10.14667rem;
  position: relative;
  background: url(../img/bg6.jpg) no-repeat;
  background-size: 100%;
}

.item6 img {
  width: 9.05333rem;
  height: 5.2rem;
  display: block;
  margin: 0 auto;
}

.item6 a {
  position: absolute;
}

.item7 {
  width: 100%;
  height: 11.26667rem;
  position: relative;
  background: url(../img/bg7.jpg) no-repeat;
  background-size: 100%;
}

.item7 ul .tab-role1 {
  width: 1.45333rem;
  height: 2.06667rem;
  position: absolute;
  left: 1.01333rem;
  bottom: 0.92rem;
  z-index: 7;
}

.item7 ul .tab-role1.on {
  background: url(../img/role1.png) no-repeat;
  background-size: 100%;
}

.item7 ul .tab-role2 {
  width: 1.45333rem;
  height: 1.98667rem;
  position: absolute;
  left: 3.06667rem;
  bottom: 0.01333rem;
  z-index: 7;
}

.item7 ul .tab-role2.on {
  background: url(../img/role2.png) no-repeat;
  background-size: 100%;
}

.item7 ul .tab-role3 {
  width: 1.45333rem;
  height: 2.06667rem;
  position: absolute;
  right: 3rem;
  bottom: -0.05333rem;
  z-index: 7;
}

.item7 ul .tab-role3.on {
  background: url(../img/role3.png) no-repeat;
  background-size: 100%;
}

.item7 ul .tab-role4 {
  width: 1.45333rem;
  height: 1.94667rem;
  position: absolute;
  right: 0.88rem;
  bottom: 1.08rem;
  z-index: 7;
}

.item7 ul .tab-role4.on {
  background: url(../img/role4.png) no-repeat;
  background-size: 100%;
}

.item7 .swiper-group {
  position: relative;
  width: 100%;
  height: 9.13333rem;
}

.item7 .swiper-group .swiper-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.item7 .swiper-group .swiper-item.on {
  z-index: 3;
}

.item7 .swiper-group .swiper-item-1 .img {
  margin-left: 1.54667rem;
  margin-top: 0.33333rem;
}

.item7 .swiper-group .swiper-item-1 .img img {
  width: 100%;
  height: 100%;
}

.item7 .swiper-group .swiper-item-1 .img1 {
  margin-top: 0.05333rem;
  width: 8.34667rem;
  height: 9.13333rem;
}

.item7 .swiper-group .swiper-item-1 .img2 {
  width: 8.34667rem;
  height: 9.06667rem;
  margin-top: 0.16rem;
}

.item7 .swiper-group .swiper-item-1 .img3 {
  width: 8.34667rem;
  height: 8.89333rem;
  margin-top: 0.33333rem;
}

.item7 .swiper-group .swiper-item-1 .img4 {
  width: 8.34667rem;
  height: 8.93333rem;
  margin-top: 0.29333rem;
}

.item7 .swiper-group .swiper-item-1 .img5 {
  margin-top: 0.33333rem;
  width: 8.34667rem;
  height: 8.86667rem;
}

.item7 .swiper-group .swiper-item-2 .img {
  margin-left: 1.54667rem;
  margin-top: 0.33333rem;
}

.item7 .swiper-group .swiper-item-2 .img img {
  width: 100%;
  height: 100%;
}

.item7 .swiper-group .swiper-item-2 .img1 {
  width: 7.48rem;
  height: 8.89333rem;
}

.item7 .swiper-group .swiper-item-2 .img2 {
  width: 7.42667rem;
  height: 8.89333rem;
}

.item7 .swiper-group .swiper-item-2 .img3 {
  width: 7.58667rem;
  height: 8.82667rem;
  margin-left: 1.4rem;
}

.item7 .swiper-group .swiper-item-2 .img4 {
  width: 7.45333rem;
  height: 8.89333rem;
}

.item7 .swiper-group .swiper-item-2 .img5 {
  width: 7.45333rem;
  height: 8.89333rem;
}

.item7 .swiper-group .swiper-item-3 .img {
  margin-top: 0.33333rem;
}

.item7 .swiper-group .swiper-item-3 .img img {
  width: 100%;
  height: 100%;
}

.item7 .swiper-group .swiper-item-3 .img1 {
  width: 9.10667rem;
  height: 8.50667rem;
}

.item7 .swiper-group .swiper-item-3 .img2 {
  width: 9.10667rem;
  height: 8.64rem;
}

.item7 .swiper-group .swiper-item-3 .img3 {
  width: 9.10667rem;
  height: 8.16rem;
}

.item7 .swiper-group .swiper-item-3 .img4 {
  width: 9.10667rem;
  height: 8.65333rem;
}

.item7 .swiper-group .swiper-item-3 .img5 {
  width: 9.10667rem;
  height: 8.10667rem;
}

.item7 .swiper-group .swiper-item-4 .img {
  margin-left: 1.54667rem;
  margin-top: 1.26667rem;
}

.item7 .swiper-group .swiper-item-4 .img img {
  width: 100%;
  height: 100%;
}

.item7 .swiper-group .swiper-item-4 .img1 {
  margin-left: 1.2rem;
  width: 8.05333rem;
  height: 7.14667rem;
}

.item7 .swiper-group .swiper-item-4 .img2 {
  width: 7.77333rem;
  height: 7.25333rem;
}

.item7 .swiper-group .swiper-item-4 .img3 {
  width: 7.77333rem;
  height: 7.08rem;
}

.item7 .swiper-group .swiper-item-4 .img4 {
  width: 7.77333rem;
  height: 7.26667rem;
}

.item7 .swiper-group .swiper-item-4 .img5 {
  width: 8.50667rem;
  height: 7.08rem;
  margin-left: 0.96rem;
}

.item7 .prev {
  width: 1.33333rem;
  height: 1.33333rem;
  color: transparent;
  top: 5.06667rem;
  left: 0.49333rem;
  outline: none;
}

.item7 .next {
  width: 1.33333rem;
  height: 1.33333rem;
  color: transparent;
  top: 5.06667rem;
  right: 0.49333rem;
  outline: none;
}

.item7 .swiper-button-prev:after,
.item7 .swiper-container-rtl .swiper-button-next:after {
  content: "" !important;
}

.item8 {
  width: 100%;
  height: 12.53333rem;
  position: relative;
  background: url(../img/bg8.jpg) no-repeat;
  background-size: 100%;
}

.item8 .swiper-container {
  position: absolute;
  top: 5.24rem;
  width: 100%;
  left: 0;
}

.item8 .swiper-wrapper {
  width: 7.53333rem;
  height: 4.28rem;
  margin: 0 auto;
}

.item8 .swiper-container div img {
  width: 7.53333rem;
  height: 4.28rem;
  margin: 0 auto;
}

.item8 .swiper-pagination {
  position: absolute;
  left: 50%;
  bottom: 2.4rem;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.item8 .prev {
  width: 1.06667rem;
  height: 0.66667rem;
  color: transparent;
  top: 2.4rem;
  left: 0rem;
  outline: none;
}

.item8 .next {
  width: 1.06667rem;
  height: 0.66667rem;
  color: transparent;
  top: 2.4rem;
  right: 0rem;
  outline: none;
}

.video__outer {
  position: fixed;
  z-index: 9999;
  background: #000;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  max-width: 640px;
  margin: auto;
}

.video__outer .video__close {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.video__outer .video__wrap {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  max-height: 6rem;
}

.video__outer video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

.pop {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9;
  background: rgba(0, 0, 0, 0.5);
}

.pop img {
  width: 5.57333rem;
  height: 8.32rem;
  top: 50%;
  left: 50%;
  margin-left: -2.78667rem;
  margin-top: -4.22667rem;
  position: fixed;
}