@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;
  }
}

html {
  position: relative;
}

body {
  position: absolute;
  left: 50%;
  top: 0;
  width: 7.5rem;
  margin-left: -3.75rem !important;
}

.head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.11rem;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
}

.head .head-left {
  width: 3.7rem;
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: 0.25rem;
}

.head .head-left img {
  width: 0.8rem;
  height: 0.8rem;
}

.head .head-left div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 0.2rem;
}

.head .head-left div span:nth-child(1) {
  font-size: 0.3rem;
  color: #c9dfff;
}

.head .head-left div span:nth-child(2) {
  font-size: 0.18rem;
  color: #5284d6;
  margin-top: 0.1rem;
}

.head .head-con {
  width: 2rem;
  height: 0.55rem;
  font-size: 0.28rem;
}

.head .head-con img {
  width: 100%;
  height: 100%;
}

.head .head-right {
  margin-right: 0.38rem;
}

.head .head-right img {
  width: 0.47rem;
  height: 0.37rem;
}

.head-side {
  position: fixed;
  right: 0;
  top: -7rem;
  z-index: 998;
  width: 3.12rem;
  padding: 0.4rem 0.4rem 0.2rem;
  background-color: rgba(0, 0, 0, 0.8);
  transition: all 0.2s;
  box-sizing: border-box;
}

.head-side-content {
  position: relative;
  z-index: 300;
}

.head-side-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background-color: rgba(0, 0, 0, 0.8); */
  z-index: 200;
  display: none;
}

.head-side .side-item {
  display: block;
  width: 100%;
  border-bottom: 0.01rem solid #34496b;
  text-align: center;
  padding-bottom: 0.25rem;
  margin-bottom: 0.25rem;
}

.head-side a.side-item {
  font-size: 0.28rem;
  color: #c9dfff;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.head-side .side-item1 img {
  width: 0.23rem;
  margin-right: 0.16rem;
}

.head-side .side-item2 img {
  width: 0.27rem;
  margin-right: 0.16rem;
}

.head-side .side-item3 img {
  width: 0.27rem;
  margin-right: 0.16rem;
}

.head-side .side-item4 img {
  width: 0.25rem;
  margin-right: 0.16rem;
}

.head-side .side-item5 img {
  width: 2.01rem;
}

.head-side .side-item6 img {
  width: 2.01rem;
}

.head-side .side-item5,
.head-side .side-item6 {
  border-bottom: none;
}

.head-side-top {
  top: 0.98rem;
}

.section {
  position: relative;
  width: 7.5rem;
  overflow: hidden;
  margin: 0 auto;
}

.screen1 {
  background: url("../images/bg1.jpg") no-repeat 0 0;
  background-size: cover;
  background-position: center 0;
  height: 100vh;
}

.screen2 {
  background: url("../images/bg2.jpg") no-repeat 0 0;
  background-size: 7.5rem 14.38rem;
  background-position: center 0;
  min-height: 14.38rem;
}

.screen3 {
  background: url("../images/bg3.jpg") no-repeat 0 0;
  background-size: 7.5rem 12.61rem;
  background-position: center 0;
  min-height: 12.7rem;
  margin-bottom: -0.1rem;
}

.screen4 {
  background: url("../images/bg4.jpg") no-repeat 0 0;
  background-size: cover;
  background-position: center 0;
}

.screen5 {
  background: url("../images/bg4.jpg") no-repeat 0 0;
  background-size: cover;
  background-position: center 0;
}

.screen6 {
  background: url("../images/bg6.jpg") no-repeat 0 0;
  background-size: cover;
  background-position: center 0;
}

.screen7 {
  background: url("../images/bg7.jpg") no-repeat 0 0;
  background-size: 7.5rem 11.28rem;
  background-position: center 0;
  height: 11.27rem;
}

.screen8 {
  background: url("../images/bg8.jpg") no-repeat 0 0;
  background-size: 7.5rem 100%;
  background-position: center 0;
  padding-bottom: 0.28rem;
  min-height: 13.22rem;
}

.screen9 {
  background: url("../images/bg9.jpg") no-repeat 0 0;
  background-size: 7.5rem 100%;
  background-position: center 0;
  min-height: 10.91rem;
}

.screen10 {
  background: url("../images/bg7.jpg") no-repeat 0 0;
  background-size: cover;
  background-position: center 0;
}

.screen1 .screen1-tip {
  position: absolute;
  bottom: 1rem;
  left: 0.18rem;
  width: 0.85rem;
  height: 1.05rem;
  border-radius: 0.05rem;
}

.screen1 .pend {
  position: absolute;
  bottom: 6.4rem;
  right: 0.3rem;
}

.screen1 .pend .pend-img {
  position: relative;
  z-index: 1;
  width: 0.84rem;
  height: 0.84rem;
  background-color: #7b3f4d;
  border-radius: 50%;
  margin: 0 auto;
  transform: translateX(-0.02rem);
  cursor: pointer;
}

.screen1 .pend .pend-img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.02rem solid #dd6f87;
}

.screen1 .pend .pend-tips {
  width: 0.65rem;
  height: 2.45rem;
  margin: -0.22rem auto 0;
  background: url("../images/icon-pend.png") no-repeat 0 0;
  background-size: 100% 100%;
  padding: 0.42rem 0 0 0.04rem;
  box-sizing: border-box;
  cursor: pointer;
}

.screen1 .pend .pend-tips span {
  display: block;
  width: 0.3rem;
  margin: 0 auto;
  font-size: 0.26rem;
  color: #ffffff;
  line-height: 0.33rem;
}

.screen1 .pend .pend-tips-box {
  width: 100%;
  height: 100%;
  z-index: 99;
  backface-visibility: hidden;
  /*背对屏幕时隐藏*/
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  transition: all 1s ease;
  /*为翻牌添加过渡效果*/
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transform-style: preserve-3d;
  animation: fz 5s infinite alternate;
}

.screen1 .pend .pend-tips {
  position: absolute;
  /*让背面和正面重叠*/
  left: 50%;
  margin-left: -0.32rem;
  top: 0;
}

.screen1 .pend .pend-tips img {
  display: flex;
  margin-left: 0.15rem;
  width: 0.25rem;
  height: 1.17rem;
}

.screen1 .pend .back {
  backface-visibility: hidden;
  /*背对屏幕时隐藏*/
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  box-sizing: border-box;
}

.screen1 .screen1-content {
  position: absolute;
  left: 50%;
  bottom: 2.3rem;
  transform: translate(-50%);
  /* width: 5.1rem; */
}

.screen1 .screen1-content .down-link {
  width: 2.92rem;
  height: 1.02rem;
  background: url("../images/zm-link.png") no-repeat 0 0;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.screen1 .screen1-content .down-link a {
  font-size: 0.26rem;
  color: #854108;
  letter-spacing: 0.05rem;
  text-shadow: 0.03rem 0 0.02rem #ffe692, 0.02rem 0 0.02rem #ffe692, 0.01rem 0 0.02rem #ffe692, 0.03rem 0.01rem 0.02rem #ffe692, 0.02rem 0.02rem 0.02rem #ffe692, 0.01rem 0.03rem 0.02rem #ffe692, 0.03rem -0.01rem 0.02rem #ffe692, 0.02rem -0.02rem 0.02rem #ffe692, 0.01rem -0.03rem 0.02rem #ffe692, -0.03rem 0 0.02rem #ffe692, -0.02rem 0 0.02rem #ffe692, -0.01rem 0 0.02rem #ffe692, -0.03rem 0.01rem 0.02rem #ffe692, -0.02rem 0.02rem 0.02rem #ffe692, -0.01rem 0.03rem 0.02rem #ffe692, -0.03rem -0.01rem 0.02rem #ffe692, -0.02rem -0.02rem 0.02rem #ffe692, -0.01rem -0.03rem 0.02rem #ffe692;
  border-bottom: 1px solid #ffe692;
  padding-bottom: 0.05rem;
  text-decoration: none;
}

.screen1 .screen1-content .screen1-play-active {
  /* position: absolute;

  top: 1.65rem;

  left: 50%;

  transform: translate(-50%); */
  /* width: 1.06rem; */
  height: 1.03rem;
  z-index: 1;
  -webkit-animation: zoomAni 1.2s ease infinite;
  animation: zoomAni 1.2s ease infinite;
}

.screen1 .screen1-content .screen1-play {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  display: block;
  width: 1.12rem;
  height: 1.12rem;
  margin: 0 auto;
}

.screen1 .screen1-content .download {
  width: 100%;
  height: 1.8rem;
  margin-top: 3rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.screen1 .screen1-content .download .download-phone {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-right: 0.1rem;
}

.screen1 .screen1-content .download .download-phone img {
  width: 3.14rem;
  height: 0.71rem;
}

.screen1 .screen1-content .download .download-phone div img {
  margin-left: 0.34rem;
  width: 0.41rem;
  height: 0.48rem;
}

.screen1 .screen1-content .download .download-phone div span {
  margin-left: 0.13rem;
  font-size: 0.25rem;
}

.screen1 .screen1-content .download .download-phone div span p {
  line-height: 0.26rem;
}

.screen1 .screen1-content .download .download-phone div span p:nth-child(1) {
  font-size: 0.24rem;
  color: #ffffff;
}

.screen1 .screen1-content .download .download-phone div span p:nth-child(2) {
  font-size: 0.18rem;
  color: #ffffff;
}

.screen1 .screen1-content .download .download-text img {
  width: 2.73rem;
  height: 1.53rem;
}

.screen1 .screen1-content .download .download-text p {
  line-height: 0.26rem;
  color: #ffffff;
  font-size: 0.24rem;
}

.screen1 .screen1-content .download .download-text .down-mack-text {
  font-size: 0.18rem;
}

.screen1 .screen1-content .download2 {
  width: 2.5rem;
  height: 1.75rem;
  margin: 0 auto;
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
}

.screen1 .screen1-content .download2 .ap1 {
  width: 3.86rem;
  height: 0.91rem;
}

.screen1 .screen1-content .download2 .ap2 {
  margin-top: 0.2rem;
  width: 3.86rem;
  height: 0.91rem;
}

.screen1 .screen1-content .download2 .download2-phone {
  width: 2.3rem;
  height: 1.55rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.screen1 .screen1-content .download2 .download2-phone div {
  width: 2.28rem;
  height: 0.67rem;
  border: 0.01rem solid #9d9c9c;
  border-radius: 0.1rem;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
}

.screen1 .screen1-content .download2 .download2-phone div:nth-child(1) {
  border: 0.01rem solid #4ae767;
  background-color: rgba(30, 161, 109, 0.8);
}

.screen1 .screen1-content .download2 .download2-phone div img {
  margin-left: 0.34rem;
  width: 0.41rem;
  height: 0.48rem;
}

.screen1 .screen1-content .download2 .download2-phone div span {
  margin-left: 0.13rem;
  font-size: 0.25rem;
}

.screen1 .screen1-content .download2 .download2-phone div span p {
  line-height: 0.26rem;
}

.screen1 .screen1-content .download2 .download2-phone div span p:nth-child(1) {
  font-size: 0.24rem;
  color: #ffffff;
}

.screen1 .screen1-content .download2 .download2-phone div span p:nth-child(2) {
  font-size: 0.18rem;
  color: #ffffff;
}

.screen1 .download3 .links {
  display: flex;
  padding-top: .8rem;
  -webkit-animation: zoomAni 1.8s ease infinite;
  animation: zoomAni 1.8s ease infinite;
}

.screen1 .download3 .links .img1 {
  width: 3.09rem;
  height: 1.17rem;
  margin-right: .15rem;
}

.screen1 .download3 .links .img2 {
  width: 3.18rem;
  height: 1.17rem;
}

.screen1 .download3 .links .img3 {
  width: 4.03rem;
  height: .94rem;
}

.screen1 .screen1-content .make-num {
  width: 4.41rem;
  height: 0.39rem;
  margin: 0 auto;
  margin-top: 0.13rem;
  line-height: 0.39rem;
  text-align: center;
  font-size: 0.24rem;
  color: #ffffff;
  background: url("../images/textbg.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.screen1 .screen1-content .make-num .num {
  margin: 0 0.1rem;
  color: #ffb834;
}

.screen1 .screen1-down {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
}

.screen1 .screen1-down span {
  display: block;
  font-size: 0.16rem;
  color: #b1b8af;
  margin-bottom: 0.09rem;
}

.screen1 .screen1-down img {
  width: 1.71rem;
  height: 0.36rem;
}

.screen2 .screen2-content .scr2-rw {
  position: absolute;
  top: 2.1rem;
  left: 0;
  width: 3.34rem;
  height: 6.47rem;
}

.screen2 .screen2-content .gift {
  display: flex;
  justify-content: flex-end;
  position: relative;
  margin: 0 0.8rem 0.7rem 0;
}

.screen2 .screen2-content .gift .g-on {
  position: absolute;
  top: -0.1rem;
  right: -0.2rem;
  width: 0.75rem;
  height: 0.76rem;
  background: url("../images/icon-on.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.screen2 .screen2-content .gift .g-un {
  width: 0.75rem;
  height: 0.76rem;
  position: absolute;
  top: -0.1rem;
  right: -0.2rem;
  background: url("../images/icon-un.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.screen2 .screen2-content .gift li {
  margin-left: 0.2rem;
}

.screen2 .screen2-content .gift li img {
  width: 1.55rem;
  height: 1.76rem;
}

.screen2 .screen2-content .gift .g-text {
  position: absolute;
  bottom: -0.4rem;
  right: 0;
  font-size: 0.24rem;
  color: #c15981;
}

.screen2 .screen2-content .gift .g-text span {
  font-size: 0.32rem;
  color: #842348;
}

.screen2 .screen2-content .gift .g-text .num1 {
  height: 0.34rem;
}

.screen2 .screen2-content .gift .g-text .num2 {
  height: 0.34rem;
}

.screen2 .screen2-content .gift .g-text .num3 {
  height: 0.32rem;
}

.screen2 .screen2-content .gift .g-text .num4 {
  height: 0.32rem;
}

.screen2 .screen2-content .gift-tips {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 0.22rem;
  color: #d1819c;
  margin-top: 0.8rem;
}

.screen2 .screen2-content .gift-tips a {
  display: block;
  width: 0.26rem;
  height: 0.26rem;
  margin-right: 0.1rem;
  background: url("../images/icon-qu.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.screen2 .screen2-content .gift-btn {
  display: flex;
  justify-content: center;
}

.screen2 .screen2-content .gift-btn a {
  width: 4.03rem;
  height: 0.92rem;
  margin-top: 0.35rem;
}

.screen2 .screen2-content .gift-btn a img {
  width: 100%;
  height: 100%;
}

.screen2 .screen2-content .screen2-con-title {
  width: 4.56rem;
  height: 1.39rem;
  margin: 0 auto;
  margin-top: 0.6rem;
  background: url("../images/scr2-title.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.screen2 .screen2-content .swiper-screen2-link {
  width: 6.84rem;
  height: 11rem;
  margin-top: 0.25rem;
}

.screen2 .screen2-content .swiper-screen2-link .swiper-slide {
  width: 6.84rem;
  height: 9.4rem;
}

.screen2 .screen2-content .swiper-screen2-link .slide-box {
  width: 5.74rem;
  height: 8.5rem;
  background: url(../images/tow_box_bg.png) no-repeat;
  background-size: 100% 100%;
  border-radius: 0.2rem;
  padding: 0.75rem 0.6rem 0;
  text-align: justify;
}

.screen2 .screen2-content .swiper-screen2-link .slide-img {
  width: 5.74rem;
  height: 3.22rem;
}

.screen2 .screen2-content .swiper-screen2-link .slide-img img {
  width: 100%;
}

.screen2 .screen2-content .swiper-screen2-link .slide-title {
  position: relative;
  margin-bottom: 0.6rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.screen2 .screen2-content .swiper-screen2-link .slide-title span {
  font-size: 0.28rem;
  font-weight: bold;
  color: #333333;
  margin: 0.3rem 0;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: .36rem;
}

/* .screen2 .screen2-content .swiper-screen2-link .slide-title::after {

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 5.69rem;

  height: 0.08rem;

  background: url("../images/sc2-bom.png") no-repeat 0 0;

  background-size: 100% 100%;

} */
.screen2 .screen2-content .swiper-screen2-link .slide-text {
  line-height: 0.42rem;
  margin: 0 auto;
  font-size: 0.26rem;
  color: #666666;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.screen2 .screen2-content .swiper-screen2-link .check-link {
  color: #f6949f;
  background: url(../images/two-link-bg.png) no-repeat;
  width: 1.43rem;
  height: 0.55rem;
  background-size: 100% 100%;
  display: inline-block;
  line-height: 0.55rem;
  text-decoration: none;
  text-align: center;
  position: absolute;
  right: 0.6rem;
  bottom: 1rem;
}

.screen2 .swiper-pagination-bullet,
.screen7 .swiper-pagination-bullet {
  width: 0.22rem;
  height: 0.29rem;
  background: url(../images/tow-swiper-tag.png) no-repeat;
  background-size: 100% 100%;
  margin-right: 0.2rem;
  vertical-align: middle;
  opacity: .7;
  margin: 0 .2rem !important;
}

.screen2 .swiper-pagination-bullet-active,
.screen7 .swiper-pagination-bullet-active {
  width: 0.46rem;
  height: 0.44rem;
  background: url(../images/tow-swiper-tag-a.png) no-repeat;
  background-size: 100% 100%;
  opacity: 1;
}

.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: .9rem;
}

.screen7 .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 0.2rem;
}

.screen3 .screen3-content .screen3-con-title {
  width: 4.56rem;
  height: 1.39rem;
  margin: 0 auto;
  margin-top: 0.8rem;
  background: url("../images/3-title.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.screen3 .screen3-content .whole-show {
  display: none;
}

.screen3 .screen3-content .sc3-character {
  position: relative;
  height: 7.2rem;
  animation: sc3L .8s forwards;
}

.screen3 .screen3-content .sc3-character .char-rw {
  width: 7.17rem;
  height: 7.2rem;
  margin-left: auto;
  display: block;
  margin-top: 0.7rem;
}

.screen3 .screen3-content .sc3-character .rw-play {
  position: absolute;
  width: 0.65rem;
  height: 0.65rem;
  top: 2rem;
  left: 0.68rem;
}

.screen3 .screen3-content .sc3-character .rw-pause {
  position: absolute;
  width: 0.64rem;
  height: 0.64rem;
  top: 2rem;
  left: 0.68rem;
}

.screen3 .screen3-content .sc3-character .rw-bg {
  position: absolute;
  top: 0.5rem;
  left: 1rem;
  width: 5.58rem;
  height: 2rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.9));
}

.screen3 .screen3-content .sc3-character .char-name {
  position: relative;
  z-index: 9;
  display: flex;
  align-items: center;
  margin-top: 2.8rem;
}

.screen3 .screen3-content .sc3-character .char-name em {
  margin: 0 0.08rem 0 0.67rem;
  display: block;
  width: 0.07rem;
  height: 0.4rem;
  background-color: #ff8004;
}

.screen3 .screen3-content .sc3-character .char-name span {
  font-size: 0.4rem;
  color: #333333;
  font-weight: bold;
}

.screen3 .screen3-content .sc3-character .char-play {
  position: relative;
  z-index: 9;
  display: flex;
  align-items: center;
  margin: 0.25rem 0 0.25rem 0.85rem;
}

.screen3 .screen3-content .sc3-character .char-play span {
  font-size: 0.22rem;
  color: #333333;
  margin-right: 0.1rem;
}

.screen3 .screen3-content .sc3-character .char-play img {
  width: 0.58rem;
  height: 0.58rem;
}

.screen3 .screen3-content .sc3-character .char-text {
  position: relative;
  z-index: 9;
  width: 5.85rem;
  height: 3.6rem;
  margin: 0 auto;
  border-radius: 0.2rem;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0.35rem;
}

.screen3 .screen3-content .sc3-character .char-text span {
  font-size: 0.26rem;
  line-height: 0.5rem;
  color: #666666;
}

.screen3 .screen3-content .sc3-swiper {
  position: relative;
}

.screen3 .screen3-content .sc3-swiper .swiper-screen3-link {
  width: 100%;
  height: 1.9rem;
  margin-top: 0.5rem;
}

.screen3 .sc3-swiper .swiper-wrapper {
  align-items: center;
}

.screen3 .screen3-content .sc3-swiper .swiper-screen3-link .swiper-slide {
  cursor: pointer;
  width: 1.14rem;
  height: 1.48rem;
  margin: 0 0.05rem;
}

.screen3 .screen3-content .sc3-swiper .swiper-screen3-link .swiper-slide span {
  display: block;
  font-size: 0.16rem;
}

/* .screen3 .screen3-content .sc3-swiper .swiper-screen3-link .swiper-slide-x {

  width: 1.1rem;

  height: 1.1rem;

} */
.screen3 .screen3-content .sc3-swiper .swiper-img {
  width: 1.14rem;
  vertical-align: baseline;
  transform: translate(0, 13%);
}

.screen3 .screen3-content .sc3-swiper .swiper-img-active {
  width: 1.14rem;
  display: none;
}

.screen3 .screen3-content .sc3-swiper .swiper-slide-x .swiper-img {
  display: none;
}

.screen3 .screen3-content .sc3-swiper .swiper-slide-x .swiper-img-active {
  display: initial;
  -webkit-animation: sc3Zoom .8s forwards;
  animation: sc3Zoom .8s forwards;
}

.screen3 .screen3-content .sc3-swiper .swiper-slide-x .rw-active1 {
  margin-top: -0.15rem;
}

.screen3 .screen3-content .sc3-swiper .swiper-screen3-link .swiper-slide-x span {
  color: #ffffff;
}

.screen3 .screen3-content .sc3-swiper .swiper-button-next2 {
  background-image: url("../images/sw-right.png");
  background-size: 100% 100%;
  display: none;
}

.screen3 .screen3-content .sc3-swiper .swiper-button-prev2 {
  background-image: url("../images/sw-left.png");
  background-size: 100% 100%;
  display: none;
}

.screen3 .screen3-content .sc3-swiper .swiper-button-disabled {
  opacity: 0.5;
}

.screen3 .screen3-content .sc3-swiper .swiper-button-next2 {
  position: absolute;
  cursor: pointer;
  width: 0.56rem;
  height: 0.61rem;
  right: 0.2rem;
  top: 0.6rem;
}

.screen3 .screen3-content .sc3-swiper .swiper-button-prev2 {
  cursor: pointer;
  width: 0.56rem;
  height: 0.61rem;
  position: absolute;
  top: 0.65rem;
  left: 0.25rem;
}

.screen4 .screen4-content .screen4-con-title {
  width: 6.9rem;
  height: 1.33rem;
  margin: 0 auto;
  margin-top: 0.8rem;
  background: url("../images/sc4-title.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.screen4 .screen4-content .sc4-content {
  width: 6.48rem;
  height: 9.8rem;
  margin: 0 auto;
  margin-top: 0.6rem;
  border-radius: 0.1rem;
  background-color: rgba(255, 255, 255, 0.7);
}

.screen4 .screen4-content .sc4-content .sc4-con-title {
  width: 100%;
  height: 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.screen4 .screen4-content .sc4-content .sc4-con-title span {
  font-size: 0.28rem;
  font-weight: bold;
  color: #333333;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left {
  display: flex;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress {
  position: relative;
  width: 0.1rem;
  height: 6.5rem;
  margin-left: 0.8rem;
  background-color: #cccccc;
  border-radius: 0.05rem;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0.1rem;
  height: 50%;
  background-color: #fd952e;
  border-radius: 0.05rem;
  z-index: 99;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress span {
  position: absolute;
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.58rem;
  height: 0.58rem;
  font-size: 0.28rem;
  color: #ffffff;
  background-color: #cccccc;
  z-index: 99;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress .progress-num1 {
  top: -0.1rem;
  left: -0.25rem;
  background: url("../images/sc5-numbg.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress .progress-num2 {
  top: 33%;
  left: -0.25rem;
  background: url("../images/sc5-numbg.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress .progress-num3 {
  top: 66%;
  left: -0.25rem;
  background: url("../images/sc5-numbg2.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress .progress-num4 {
  bottom: -0.2rem;
  left: -0.25rem;
  background: url("../images/sc5-numbg2.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress-text {
  width: 2.8rem;
  height: 6.6rem;
  position: relative;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress-text span {
  font-size: 0.28rem;
  color: #333333;
  font-weight: bold;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress-text p {
  font-size: 0.24rem;
  color: #999999;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress-text div {
  position: absolute;
  line-height: 0.4rem;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress-text .progress-text1 {
  top: 0;
  left: 0.4rem;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress-text .progress-text2 {
  top: 34%;
  left: 0.4rem;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress-text .progress-text3 {
  top: 66%;
  left: 0.4rem;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress-text .progress-text4 {
  top: 94%;
  left: 0.4rem;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress-icon {
  width: 2.6rem;
  height: 6.6rem;
  position: relative;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress-icon div {
  position: absolute;
  display: flex;
  justify-content: flex-end;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress-icon img {
  width: 1.03rem;
  height: 1.03rem;
  margin-right: 0.3rem;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress-icon .progress-icon-bg1 {
  top: 0;
  right: 0;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress-icon .progress-icon-bg2 {
  top: 34%;
  right: 0;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress-icon .progress-icon-bg3 {
  top: 66%;
  right: 0;
}

.screen4 .screen4-content .sc4-content .sc4-con .sc4-con-left .progress-icon .progress-icon-bg4 {
  top: 94%;
  right: 0;
}

.screen5 .screen5-content .screen5-con-title {
  width: 6.9rem;
  height: 1.33rem;
  margin: 0 auto;
  margin-top: 1rem;
  background: url("../images/sc4-title.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.screen5 .screen5-content .sc5-content {
  width: 6.48rem;
  margin: 0 auto;
  margin-top: 0.6rem;
  overflow: hidden;
  border-radius: 0.1rem;
  background-color: rgba(255, 255, 255, 0.7);
}

.screen5 .screen5-content .sc5-content .sc5-title {
  width: 100%;
  height: 1.75rem;
  text-align: center;
  line-height: 1.75rem;
  font-size: 0.28rem;
  color: #333333;
  font-weight: bold;
}

.screen5 .screen5-content .sc5-content .sc5-iconbox {
  width: 3.6rem;
  margin: 0 auto;
  margin: 0.5rem auto 0.75rem auto;
  display: flex;
  justify-content: space-between;
}

.screen5 .screen5-content .sc5-content .sc5-iconbox img {
  width: 1.54rem;
  height: 1.54rem;
}

.screen5 .screen5-content .sc5-content .sc5-iconbox span {
  display: block;
  margin-top: 0.25rem;
  text-align: center;
  font-size: 0.24rem;
  color: #999999;
}

.screen5 .screen5-content .sc5-content .sc5-iconbox2 {
  width: 5.8rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.screen5 .screen5-content .sc5-content .sc5-iconbox2 img {
  width: 1.54rem;
  height: 1.54rem;
}

.screen5 .screen5-content .sc5-content .sc5-iconbox2 span {
  display: block;
  margin-top: 0.25rem;
  text-align: center;
  font-size: 0.24rem;
  color: #999999;
}

.screen5 .screen5-content .sc5-btn {
  width: 2.3rem;
  height: 0.62rem;
  margin: 0.5rem auto 0 auto;
  background-color: #db573d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen5 .screen5-content .sc5-btn span {
  font-size: 0.26rem;
  font-weight: bold;
  color: #ffffff;
}

.screen6 .screen6-content .screen6-con-title {
  width: 6.9rem;
  height: 0.72rem;
  margin: 0 auto;
  margin-top: 1rem;
  background: url("../images/sc6-title.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.screen6 .screen6-content .sc6-content {
  width: 6.5rem;
  height: 9rem;
  margin: 0.91rem auto 0 auto;
}

.screen6 .screen6-content .sc6-content .swiper-plot2-link {
  width: 6.5rem;
  height: 9rem;
}

.screen6 .screen6-content .sc6-content .swiper-plot2-img {
  width: 4.9rem;
  height: 8.15rem;
}

.screen6 .screen6-content .sc6-content .swiper-plot2-img img {
  width: 100%;
  height: 100%;
}

.screen6 .screen6-content .sc6-content .swiper-slide {
  width: 4.9rem;
  height: 8.15rem;
}

.screen6 .screen6-content .sc6-content .swiper-slide .swiper-slide-shadow-left {
  height: 7.38rem;
  background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0.7)));
}

.screen6 .screen6-content .sc6-content .swiper-slide .swiper-slide-shadow-right {
  height: 7.38rem;
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0.7)));
}

.screen6 .screen6-content .sc6-content .swiper-button-next {
  background-image: url("../images/six-right.png");
  background-size: 100% 100%;
}

.screen6 .screen6-content .sc6-content .swiper-button-prev {
  background-image: url("../images/six-left.png");
  background-size: 100% 100%;
}

.screen6 .screen6-content .sc6-content .swiper-button-next,
.screen6 .screen6-content .sc6-content .swiper-button-prev {
  width: 0.56rem;
  height: 0.61rem;
  margin-top: -0.3rem;
}

.screen6 .screen6-content .sc6-content .swiper-pagination-bullet {
  width: 0.13rem;
  height: 0.13rem;
  background-color: #ff8004;
  margin-right: 0.2rem;
}

.screen6 .screen6-content .sc6-content .swiper-pagination-bullet-active {
  width: 0.28rem;
  height: 0.13rem;
  border-radius: 0.2rem;
  background-color: #fe9834;
}

.screen7 .screen7-content .screen7-con-title {
  width: 4.56rem;
  height: 1.39rem;
  margin: 0 auto;
  margin-top: 1rem;
  background: url("../images/6-title.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.screen7 .screen7-content .sc7-content {
  position: relative;
  width: 7.5rem;
  height: 7rem;
  margin: 0.91rem auto 0 auto;
}

.screen7 .screen7-content .sc7-content .swiper-plot3-link {
  width: 7.5rem;
  height: 7rem;
}

.screen7 .screen7-content .sc7-content .swiper-plot3-link .swiper-plot3-img {
  margin: 0 auto;
  background: url(../images/sc7-sw-bg.png) no-repeat;
  background-size: 100% 100%;
  width: 6.39rem;
  height: 3.7rem;
  padding: 0.22rem;
  box-sizing: border-box;
}

.screen7 .screen7-content .sc7-content .swiper-plot3-link .swiper-plot3-img img {
  width: 100%;
  height: 100%;
}

.screen7 .screen7-content .sc7-content .swiper-plot3-link .swiper-slide {
  width: 7.2rem;
  height: 3.88rem;
}

.screen7 .screen7-content .sc7-content .swiper-plot3-link .swiper-button-next {
  background-image: url("../images/sw-right.png");
  background-size: 100% 100%;
}

.screen7 .screen7-content .sc7-content .swiper-plot3-link .swiper-button-prev {
  background-image: url("../images/sw-left.png");
  background-size: 100% 100%;
}

.screen7 .screen7-content .sc7-content .swiper-plot3-link .swiper-button-next,
.screen7 .screen7-content .sc7-content .swiper-plot3-link .swiper-button-prev {
  width: 0.44rem;
  height: 0.6rem;
  margin-top: -2rem;
}

/* .screen7 .screen7-content .sc7-content .swiper-plot3-link .swiper-pagination-bullet {

  width: 0.13rem;

  height: 0.13rem;

  background-color: #ff8004;

  margin-right: 0.20rem;

}



.screen7 .screen7-content .sc7-content .swiper-plot3-link .swiper-pagination-bullet-active {

  width: 0.28rem;

  height: 0.13rem;

  border-radius: 0.20rem;

  background-color: #fe9834;

} */
.screen7 .screen7-content .sc7-content .swiper-plot4-link {
  position: absolute;
  top: 4rem;
  left: 0;
  width: 7.5rem;
  height: 1.6rem;
  margin-top: 0.25rem;
}

.screen7 .screen7-content .sc7-content .swiper-plot4-link .swiper-plot4-img {
  width: 2.21rem;
  height: 1.3rem;
  position: relative;
  background: url(../images/sc7-sw-bg.png) no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 0.09rem;
}

.screen7 .screen7-content .sc7-content .swiper-plot4-link .swiper-plot4-img .plot4-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.screen7 .screen7-content .sc7-content .swiper-plot4-link .swiper-plot4-img .plot4-shadow-unshow {
  display: none;
}

.screen7 .screen7-content .sc7-content .swiper-plot4-link .swiper-plot4-img img {
  width: 100%;
  height: 100%;
}

.screen7 .screen7-content .sc7-content .swiper-plot4-link .swiper-slide {
  width: 2.21rem;
  height: 1.3rem;
  margin-left: 0.185rem;
  opacity: 0.6;
}

.screen7 .screen7-content .sc7-content .swiper-plot4-link .bor-active {
  opacity: 1;
}

.screen8 .screen8-content .screen8-con-title {
  width: 4.56rem;
  height: 1.39rem;
  margin: 0 auto;
  margin-top: .65rem;
  background: url("../images/7-title.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.screen8 .screen8-content .sc8-con {
  width: 6.62rem;
  margin: 0 auto;
  margin-top: 0.6rem;
}

.screen8 .screen8-content .sc8-con .topbtn {
  display: block;
  text-align: center;
  margin-top: 0.2rem;
  font-size: 0.26rem;
  color: #c47878;
}

.screen8 .screen8-content .sc8-con .btnmore {
  text-align: end;
  display: block;
  margin-top: 0.05rem;
}

.screen8 .screen8-content .sc8-con .btnmore img {
  width: 1.4rem;
}

.screen8 .screen8-content .sc8-con .btnret {
  display: none;
  position: relative;
}

.screen8 .screen8-content .sc8-con .btnret span {
  position: absolute;
  right: 0.2rem;
  top: 0;
  display: block;
  width: 1.2rem;
  height: 0.38rem;
  line-height: 0.38rem;
  background-color: #f2a59e;
  margin-top: 0.2rem;
  font-size: 0.26rem;
  color: #fff;
  text-align: center;
}

.con8-nav {
  position: relative;
  width: 100%;
  /* border-bottom: 0.02rem solid #eaeced; */
  display: flex;
}

.con8-nav .nav-more {
  cursor: pointer;
  position: absolute;
  top: 0.04rem;
  right: .04rem;
  display: flex;
  align-items: center;
  font-size: 0.24rem;
  color: #999999;
}

.con8-nav .nav-more span {
  margin-right: 0.08rem;
}

.con8-nav .nav-more img {
  width: 1.4rem;
}

.con8-nav .nav {
  position: relative;
  width: 100%;
  display: flex;
}

.con8-nav .nav a {
  display: block;
  font-size: 0.28rem;
  margin-right: 0.2rem;
  color: white;
  text-decoration: none;
  background: url(../images/tab-bg.png) no-repeat;
  background-size: 100% 100%;
  width: 1.55rem;
  height: 0.56rem;
  text-align: center;
  line-height: 0.56rem;
  font-size: 0.28rem;
  font-weight: 500;
  box-sizing: border-box;
}

.con8-nav .nav .con8-nav-active {
  color: white;
  background: url(../images/tab-bg-a.png) no-repeat;
  background-size: 100% 100%;
}

.audio-sub-title {
  line-height: initial;
  font-size: initial;
  color: #ecc3c0;
  margin: .1rem 0;
}

.audio-sub-title a::before {
  content: "";
  display: inline-block;
  background: url(../images/sub-title-d.png) no-repeat;
  width: .16rem;
  height: .16rem;
  background-size: 100% 100%;
}

.audio-sub-title a {
  font-size: .22rem;
  color: #d8ada9;
  display: inline-block;
  border-radius: .11rem;
  height: .25rem;
  text-align: center;
  margin-right: .12rem;
  text-decoration: none;
}

.audio-sub-title a.active::before {
  background: url(../images/sub-title-a.png) no-repeat;
  background-size: 100% 100%;
}

.audio-sub-title a.active {
  color: #a56862;
}

.frame-make2 .con8-nav {
  margin-left: .4rem;
  margin-top: .5rem;
}

.frame-make2 .audio-sub-title {
  margin-left: .4rem;
}

.screen8 .screen8-content .sc8-con .con8-audio {
  position: relative;
  width: 100%;
  max-height: 8rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  overflow: hidden;
}

.screen8 .screen8-content .sc8-con .con8-audio .con8-audio-item {
  position: relative;
  width: 3.22rem;
  height: 2.45rem;
  text-align: center;
  margin-bottom: 0.3rem;
  box-sizing: border-box;
  background: url(../images/list-bg.png) no-repeat;
  padding: 0.18rem;
  background-size: 100% 100%;
  box-sizing: border-box;
  text-decoration: none;
}

.screen8 .screen8-content .sc8-con .con8-audio .con8-audio-item:active::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 3.06rem;
  height: 100%;
  border: 0.02rem solid #fd942e;
}

.screen8 .screen8-content .sc8-con .con8-audio .con8-audio-item img {
  width: 100%;
  height: 1.62rem;
}

.screen8 .screen8-content .sc8-con .con8-audio .con8-audio-item .audio-shadow {
  width: 2.85rem;
  height: 1.62rem;
  position: absolute;
  top: 0.18rem;
  left: 0.18rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
}

.screen8 .screen8-content .sc8-con .con8-audio .con8-audio-item .audio-shadow img {
  width: 0.61rem;
  height: 0.61rem;
}

.screen8 .screen8-content .sc8-con .con8-audio .con8-audio-item span {
  display: block;
  font-size: 0.24rem;
  color: #666666;
  width: 100%;
  height: 0.5rem;
  line-height: 0.5rem;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen8 .screen8-content .sc8-con .con8-audio-unshow {
  display: none;
}

.screen9 .screen9-content .zm-img {
  margin-top: 0.7rem;
}

.screen9 .screen9-content .zm-img img {
  display: block;
  margin: 0 auto;
  width: 7.22rem;
  height: 9.77rem;
}

.screen9 .screen9-content .zm-img .zm-btn {
  position: relative;
  display: block;
  width: 2.61rem;
  height: 0.75rem;
  margin: -1.3rem auto 0;
  background: url("../images/zm-btn.png") no-repeat 0 0;
  background-size: 100% 100%;
}

.screen10 .screen10-content {
  width: 2.25rem;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  bottom: 3.9rem;
  transform: translate(-50%);
}

.screen10 .screen10-content div:nth-child(1) {
  width: 2.25rem;
  height: 0.6rem;
  line-height: 0.6rem;
  font-size: 0.28rem;
  color: #ffffff;
  text-align: center;
  background-color: #db573d;
}

.screen10 .screen10-content div:nth-child(2) {
  margin-top: 0.16rem;
  text-align: center;
  font-size: 0.24rem;
  color: #333333;
}

.swiper-slide-bottom {
  width: 7.5rem;
  height: 7rem;
  margin: 0 auto 0.6rem;
}

.swiper-slide-bottom .section-bottom {
  width: 100%;
  height: 7.5rem;
  background-color: #ffffff;
}

.swiper-slide-bottom .section-bottom .bottom-icon {
  width: 7.5rem;
  height: 2.21rem;
  background: url(../images/share-bg2.jpg) no-repeat;
  background-size: 100% 100%;
}

.swiper-slide-bottom .section-bottom .bottom-icon .bottom-icon-box {
  width: 7.5rem;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.swiper-slide-bottom .section-bottom .bottom-icon .bottom-icon-box div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swiper-slide-bottom .section-bottom .bottom-icon .bottom-icon-box div img {
  width: 1rem;
  height: 1rem;
}

.swiper-slide-bottom .section-bottom .bottom-icon .bottom-icon-box div span {
  margin-top: 0.15rem;
  font-size: 0.26rem;
  color: #333333;
}

.swiper-slide-bottom .section-bottom .bottom-tip {
  text-align: center;
  margin-top: 0.35rem;
}

.swiper-slide-bottom .section-bottom .bottom-tip img {
  height: 0.59rem;
}

.swiper-slide-bottom .section-bottom .bottom-tip p {
  margin: 0.12rem 0;
  font-size: 0.22rem;
  color: #666666;
}

.swiper-slide-bottom .section-bottom .bottom-tip .bottom-tip-p1 {
  margin: 0.2rem 0;
}

.swiper-slide-bottom .section-bottom .bottom-tip {
  text-align: center;
  margin-top: 0.35rem;
}

.swiper-slide-bottom .section-bottom .bottom-tip a {
  text-decoration: none;
  color: #666666;
}

.swiper-slide-bottom .section-bottom .bottom-tip .bom-logo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide-bottom .section-bottom .bottom-tip .bom-logo img {
  margin: 0 0.2rem;
}

.swiper-slide-bottom .section-bottom .bottom-tip .bom-logo img:nth-child(1) {
  width: 1.95rem;
  height: 0.62rem;
}

.swiper-slide-bottom .section-bottom .bottom-tip .bom-logo img:nth-child(2) {
  width: 1.95rem;
  height: 0.62rem;
}

.swiper-slide-bottom .section-bottom .bottom-tip .bom-link {
  display: block;
  width: 5.8rem;
  margin: 0 auto;
  line-height: 0.30rem;
  color: #666666;
  text-align: center;
  margin-top: 0.3rem;
  line-height: 0.38rem;
}

.swiper-slide-bottom .section-bottom .bottom-tip .bom-link a {
  color: #666666;
  font-size: 0.22rem;
}

.swiper-slide-bottom .section-bottom .bottom-tip p {
  margin: 0.12rem 0;
  font-size: 0.22rem;
  color: #666666;
}

.swiper-slide-bottom .section-bottom .bottom-tip .bottom-tip-p1 {
  margin: 0.2rem 0;
}

.swiper-slide-bottom .section-bottom .bottom-tip .bottom-tip-p1 a {
  color: #666666;
  text-decoration: none;
}

.frame-make {
  position: relative;
  width: 6.5rem;
  padding: 0.1rem 0 0.35rem;
  background: url(../images/dia-bg-3.png) repeat-y;
  background-size: 100% 100%;
}

.frame-make::before,
.frame-make2::before,
.frame-make3::before {
  content: "";
  background: url(../images/dia-bg-1.png) no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 0.3rem;
  display: inline-block;
  position: absolute;
  top: -0.28rem;
  left: 0;
}

.frame-make::after,
.frame-make2::after,
.frame-make3::after {
  content: "";
  background: url(../images/dia-bg-2.png) no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 0.3rem;
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: -0.28rem;
}

.frame-make .frame-close {
  width: 0.34rem;
  height: 0.34rem;
  position: absolute;
  top: 0;
  right: 0.25rem;
  cursor: pointer;
}

.frame-make .frame-title {
  font-size: 0.28rem;
  color: #333333;
  justify-content: center;
  align-items: center;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: .3rem .2rem .25rem;
  text-align: center;
}

.frame-make .frame-input {
  position: relative;
  width: 4.7rem;
  height: 0.7rem;
  margin: 0 auto;
  margin-left: 0.5rem;
}

.frame-make .frame-input input {
  width: 4.4rem;
  height: 0.7rem;
  outline: none;
  margin-left: 1rem;
  font-size: 0.14rem;
  color: #333333;
  padding-left: 0.2rem;
  border-radius: 0 0.05rem 0.05rem 0;
  background-color: #fdefeb;
  font-size: 0.26rem;
}

.frame-make .frame-input .input-tips {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.09rem;
  height: 0.7rem;
  color: #666666;
  text-align: center;
  line-height: 0.7rem;
  font-size: 0.26rem;
  background-color: #f9e3dc;
  border-radius: 0.05rem;
}

.frame-make .frame-text {
  margin-top: 0.35rem;
  margin-left: 0.5rem;
  font-size: 0.26rem;
  color: #b14654;
}

.frame-make .frame-btn {
  display: block;
  width: 2.22rem;
  height: 0.62rem;
  margin: 0.6rem auto 0;
  line-height: 0.62rem;
  text-align: center;
  font-size: .28rem;
  color: #b2604a;
  background: url(../images/mk-btn.jpg) no-repeat;
  background-size: 100% 100%;
  text-decoration: none;
}

.frame-make .frame-text1 {
  width: 5.9rem;
  margin: 0 auto;
  line-height: 0.52rem;
  font-size: 0.26rem;
  color: #666666;
}

.frame-make .frame-text1 img {
  width: 100%;
  height: 3.17rem;
  margin: 0.2rem 0;
}

.frame-make2 {
  position: relative;
  width: 7.25rem;
  border-radius: 0.05rem;
  background: url(../images/dia-bg-3.png) repeat-y;
  background-size: 100% 100%;
  padding-bottom: 0.55rem;
}

.frame-make2 .frame-close {
  width: 0.34rem;
  height: 0.34rem;
  position: absolute;
  top: 0;
  right: 0.25rem;
  cursor: pointer;
  z-index: 100;
}

.frame-make2 .frame-title {
  width: 100%;
  height: 1rem;
  font-size: 0.28rem;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame-make2 .list-wrapper {
  height: 7rem;
  overflow-y: scroll;
}

.frame-make2 .frame-video {
  width: 6.62rem;
  margin: 0 auto;
  overflow-y: auto;
  /* background-color: #f2f2f2; */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

.frame-make2 .frame-video .frame-video-item {
  position: relative;
  width: 3.12rem;
  height: 2.38rem;
  margin: 0 0.08rem;
  margin-bottom: 0.25rem;
  text-decoration: none;
}

.frame-make2 .frame-video .frame-video-item:active::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 3.08rem;
  height: 100%;
  border: 0.02rem solid #fd942e;
}

.frame-make2 .frame-video .frame-video-item img {
  width: 100%;
  height: 1.7rem;
}

.frame-make2 .frame-video .frame-video-item p {
  width: 100%;
  height: 0.65rem;
  line-height: 0.65rem;
  text-align: center;
  color: #666666;
  font-size: 0.26rem;
  background-color: #ffffff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.frame-make2 .frame-video .frame-video-item .frame-shadow {
  width: 100%;
  height: 1.7rem;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
}

.frame-make2 .frame-video .frame-video-item .frame-shadow img {
  width: 0.61rem;
  height: 0.61rem;
}

.frame-code {
  width: 3.6rem;
  background: url(../images/dia-bg-3.png) repeat-y;
  background-size: 100% 100%;
  box-sizing: border-box;
  position: relative;
  padding: 0.2rem;
}

.frame-code::before {
  content: "";
  background: url(../images/dia-bg-1.png) no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 0.18rem;
  display: inline-block;
  position: absolute;
  top: -0.1rem;
  left: 0;
}

.frame-code::after {
  content: "";
  background: url(../images/dia-bg-2.png) no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 0.18rem;
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: -0.1rem;
}

.frame-code .code-img img {
  width: 100%;
  height: 100%;
}

.frame-code p {
  display: block;
  font-size: 0.24rem;
  color: #ffffff;
  position: absolute;
  bottom: -0.45rem;
  left: 0;
  width: 3.6rem;
  text-align: center;
}

.frame-make3 {
  position: relative;
  width: 5.72rem;
  padding-bottom: 0.55rem;
  background: url(../images/dia-bg-3.png) repeat-y;
  background-size: 100% 100%;
}

.frame-make3 .frame-title {
  width: 100%;
  height: 1.3rem;
  font-size: 0.28rem;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame-make3 .frame-table {
  width: 5.1rem;
  max-height: 2.7rem;
  margin: 0 auto;
  overflow-y: auto;
}

.frame-make3 .frame-table .frame-table-item {
  width: 100%;
  margin: 0 auto;
  display: flex;
  border-bottom: 0.01rem solid #ebebeb;
  padding-bottom: 0.15rem;
  font-size: 0.24rem;
  color: #333333;
  margin-bottom: 0.33rem;
  justify-content: space-evenly;
}

.frame-make3 .frame-table .frame-table-item .table-link {
  cursor: pointer;
  text-decoration: underline;
  color: #db7784;
}

.frame-make3 .frame-table .frame-table-item:nth-last-child(1) {
  border: none;
}

.frame-make3 .frame-table .frame-table-item p:nth-child(2) {
  /* flex: 1; */
  text-align: center;
}

.full-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  background-color: rgba(0, 0, 0, 0.8);
}

.full-video .video-js {
  margin-top: 50%;
  width: 7.5rem;
  height: 4rem;
}

.full-video .video-close {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 0.6rem;
  height: 0.6rem;
}

.full-video-show {
  display: none;
}

.mask {
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  z-index: 800;
}

.img-mask {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
}

.frame-make3 .frame-close,
.frame-code .frame-close {
  width: 0.36rem;
  height: 0.36rem;
  position: absolute;
  top: 0rem;
  right: 0.3rem;
}

.big-img-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
}

.big-img-wrapper2 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
}

.big-img-wrapper2 .img-box {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
}

.big-img-wrapper2 .img-box img {
  width: 100vw;
  height: auto;
}

.big-clsoe {
  position: absolute;
  top: -0.6rem;
  right: 0.1rem;
  width: 0.5rem;
  height: 0.5rem;
  background: url("../images/close.png") no-repeat 0 0;
  background-size: 100% 100%;
  z-index: 9999;
}

.swiper-big-img .swiper-slide {
  width: 100vw;
  max-height: 80vh;
}

.swiper-big-img .swiper-slide .swiper-zoom-container {
  height: 10rem;
}

.big-img-wrapper img {
  width: auto;
  max-height: 80vh;
}

.slide-time {
  font-size: 0.26rem;
  color: #666666;
  position: absolute;
  bottom: 1.15rem;
  left: .6rem;
}

.frame-time {
  text-align: center;
  font-size: inherit;
  margin-bottom: .25rem;
}

.frame-img {
  width: 6.39rem;
  margin: 0 auto;
}

.frame-img img {
  width: 6.39rem;
}

.popLogin {
  width: 6.5rem;
  border-radius: .1rem;
  position: relative;
  margin: 0 auto;
  background: url(../images/dia-bg-3.png) repeat-y;
  background-size: 100% 100%;
}

.popLogin::before {
  content: "";
  background: url(../images/dia-bg-1.png) no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 0.3rem;
  display: inline-block;
  position: absolute;
  top: -0.28rem;
  left: 0;
}

.popLogin::after {
  content: "";
  background: url(../images/dia-bg-2.png) no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 0.3rem;
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: -0.28rem;
}

.popLogin .inner {
  padding: .3rem;
}

.popLogin .pop-hide {
  height: .6rem;
  width: .6rem;
  overflow: hidden;
  line-height: 99;
  background: url(../images/frame-close.png) no-repeat center;
  background-size: .45rem .45rem;
  position: absolute;
  right: .15rem;
  top: -0.1rem;
}

.popLogin .pop-tit {
  font-size: .34rem;
  font-weight: bold;
  line-height: 1.6;
  color: #333;
  text-align: center;
}

.popLogin .pop-f24 {
  font-size: .24rem;
  line-height: 1.6;
  color: #999;
  margin-top: .15rem;
}

.popLogin .pop-f24 span {
  color: #ff9835;
}

.popLogin .pop-f24 img {
  display: inline-block;
  vertical-align: middle;
  height: .22rem;
  margin: -.04rem .1rem 0;
}

.popLogin .pop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: .3rem;
}

.popLogin .pop-btn a {
  display: block;
  width: 2.22rem;
  height: 0.62rem;
  line-height: 0.62rem;
  text-align: center;
  font-size: .28rem;
  color: #b2604a;
  background: url(../images/mk-btn.jpg) no-repeat;
  background-size: 100% 100%;
  text-decoration: none;
}

.popLogin .fm-field {
  height: .8rem;
  border: 1px solid #eee;
  border-radius: .1rem;
  display: flex;
  align-items: center;
  margin: .25rem 0;
  background-color: #fff;
}

.popLogin .fm-field .input-plain-wrap {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.popLogin .fm-field .input-plain-wrap input {
  background: none;
  border: none;
  outline: none;
  height: 100%;
  width: 100%;
  font-size: .28rem;
  color: #131715;
  padding: .2rem;
  padding-right: .4rem;
  box-sizing: border-box;
}

.popLogin .fm-field .input-plain-wrap input ::placeholder {
  color: #CFD1D0;
}

.popLogin .fm-field .input-plain-wrap .input-cls {
  position: absolute;
  right: 0;
  top: 0;
  width: .5rem;
  height: 100%;
  background: url(../images/ico-cls.png) no-repeat center;
  background-size: 0.32rem auto;
  background-color: transparent;
}

.popLogin .fm-field .input-plain-wrap .mb {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAZCAYAAAAbp/98AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwMUYxMTlBMUIyQjExRUU4RDk0RDVGQ0VBQ0EzQjZFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwMUYxMTlCMUIyQjExRUU4RDk0RDVGQ0VBQ0EzQjZFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTAxRjExOTgxQjJCMTFFRThEOTRENUZDRUFDQTNCNkUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTAxRjExOTkxQjJCMTFFRThEOTRENUZDRUFDQTNCNkUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4SA8jfAAAAI0lEQVR42mJ89+6dFgMDgy8TkDAA4g4QAwyGPOMLEN8DCDAAhmYF/WSjEPcAAAAASUVORK5CYII=) no-repeat left center;
  background-size: 1px .32rem;
}

.popLogin .fm-field .phone-code {
  padding: 0 .2rem 0 .2rem;
  font-size: .28rem;
  line-height: .4rem;
}

.popLogin .fm-field .send-btn {
  flex-shrink: 0;
  font-size: .24rem;
  height: .6rem;
  text-align: center;
  line-height: .6rem;
  border-radius: .1rem;
  color: #ac867b;
  box-sizing: border-box;
  margin: 0 .2rem;
}

.popLogin .fm-field .send-btn.active {
  color: #ac867b;
}

.popLogin .fm-field .send-btn.not {
  color: #CFD1D0;
}

.swiper-button-prev,
.swiper-button-prev2 {
  animation: swiperPrev .8s infinite;
}

.swiper-button-next,
.swiper-button-next2 {
  animation: swiperNext .8s infinite;
}

@keyframes swiperPrev {
  50% {
    transform: translateX(-0.05rem);
  }
}

@keyframes swiperNext {
  50% {
    transform: translateX(0.05rem);
  }
}

@keyframes sc3L {
  0% {
    opacity: 0;
    transform: translateX(-0.6rem);
  }
  100% {
    opacity: 1;
  }
}

@keyframes sc3R {
  0% {
    opacity: 0;
    transform: translateX(1.5rem);
  }
  100% {
    opacity: 1;
  }
}

@keyframes sc3Zoom {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes qrshow {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes fz {
  0% {
    transform: rotateY(0) 0;
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -o-transform: rotateY(0);
  }
  50% {
    transform: rotateY(0) 0;
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -o-transform: rotateY(0);
  }
  70% {
    transform: rotateY(180deg) 180;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(180deg) 180;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
  }
}

@keyframes zoomAni {
  50% {
    transform: scale(1.1);
  }
}

@keyframes moreArrow {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    bottom: 0.65rem;
  }
  60% {
    opacity: 1;
  }
}