html,
body {
  position: relative;
  height: 100%;
}

:root {
  --blur: 2;
}

body {
  background: #eee;
  font-family: Source Han Serif Medium, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
  min-width: 1330px;
  min-height: 700px;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
  min-width: 1330px;
  min-height: 700px;
  overflow: hidden;
}

/* Swiper 容器建立隔离层叠上下文，避免内部 z-index 溢出 */
.swiper.container {
  position: relative;
  isolation: isolate;
  z-index: 0;
}

/* 避免 slide 内部的绝对定位内容超出自身 slide 区域 */
.slide1-wrapper,
.slide2-wrapper,
.slide3-wrapper,
.slide4-wrapper .swiper-container,
.slide5-wrapper {
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.container .swiper-slide {
  text-align: center;
  font-size: 18px;
}

.nav-wrapper {
  height: 73px;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.nav-wrapper .logo {
  position: absolute;
  top: 0;
  left: 116px;
}

.nav-wrapper ul {
  width: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-wrapper ul li a {
  width: 203px;
  height: 73px;
  display: block;
  font-family: "Source Han Serif Medium";
  color: #fff;
  font-size: 24px;
  text-align: center;
  line-height: 73px;
}

.nav-wrapper ul li.active a {
  color: #6cfdf4;
  background: url("../images/nav_active.png") no-repeat center;
  background-size: 100%;
}

.nav-wrapper .play-wrapper {
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
}

.nav-wrapper .play-wrapper a {
  display: block;
  margin: 0 17px;
}

/* 1 */
#section1 {
  height: 100%;
  overflow: hidden;
  position: relative;
  background: url("../images/bg1.jpg") no-repeat top;
  background-size: cover;
  min-width: 1330px;
  min-height: 600px;
  z-index: 1;
}

.slide1-wrapper {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 3;
}

.slide1_content {
  width: 1200px;
  height: 400px;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  margin-left: -600px;
  bottom: 0px;
}

.slide1_content a.play {
  display: block;
  width: 112px;
  height: 115px;
  /* background: url('../images/play_btn_03.png') no-repeat center;
    background-size: 100%; */
  position: absolute;
  left: 50%;
  margin-left: -56px;
  top: -70px;
  transition: all 0.2s;
}

.slide1_content a.play .roll_wrapper {
  width: 112px;
  height: 115px;
  background: url("../images/roll_03.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: spin 28s linear infinite;
}

.slide1_content a.play .roll_btn {
  width: 112px;
  height: 115px;
  background: url("../images/roll_btn_03.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.slide1_content a.play:hover .roll_wrapper {
  width: 112px;
  height: 115px;
  background: url("../images/roll_active_03.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: spin 28s linear infinite;
}

.slide1_content a.play:hover .roll_btn {
  width: 112px;
  height: 115px;
  background: url("../images/roll_btn_active_03.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.slide1_content a.order {
  display: block;
  width: 379px;
  height: 123px;
  background: url("../images/order_btn_07.png") no-repeat center;
  background-size: 100%;
  margin: -30px auto 0;
  transition: all 0.2s;
}

.slide1_content a.order:hover {
  background: url("../images/order_btn_active_07.png") no-repeat center;
  background-size: 100%;
}

/* 2 */
#section2 {
  height: 100%;
  overflow: hidden;
  position: relative;
  background: url("../images/bg2.jpg") no-repeat top;
  background-color: #ffd16d;
  background-size: cover;
  min-width: 1330px;
  min-height: 600px;
  z-index: 1;
}

.slide2-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.slide2-wrapper .slide2-content-left,
.slide2-wrapper .slide2-content-right {
  flex: 1;
  height: 100%;

  position: relative;
}

.slide2-wrapper .slide2-left .video {
  display: block;
  width: 205px;
  height: 102px;
  position: absolute;
  top: 115px;
  right: 0;
  background: url("../images/diao_video_03.png") no-repeat center;
  background-size: 100%;
}

.slide2-wrapper .slide2-right .video {
  display: block;
  width: 205px;
  height: 102px;
  position: absolute;
  top: 199px;
  right: 17px;
  background: url("../images/qiao_video_03.png") no-repeat center;
  background-size: 100%;
}

.slide2-wrapper .slide2-right .video video,
.slide2-wrapper .slide2-left .video video {
  width: 166px;
  height: 88px;
  margin: 0 auto;
  position: absolute;
  left: 36.5px;
  top: 7px;
  border-radius: 11px;
}

.slide2-wrapper .slide2-content-left .slide2-left-disabled {
  width: 559px;
  height: 869px;
  background: url("../images/diaoWrapper.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -408px;
  right: 0;
}

.slide2-wrapper .slide2-left {
  width: 559px;
  height: 869px;
  background: url("../images/diaoWrapper_active.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -408px;
  right: 0;
}

.slide2-wrapper .slide2-content-right .slide2-right-disabled {
  width: 559px;
  height: 869px;
  background: url("../images/qiaoWrapper.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -408px;
  left: 50px;
}

.slide2-wrapper .slide2-left,
.slide2-wrapper .slide2-left-disabled,
.slide2-wrapper .slide2-right,
.slide2-wrapper .slide2-right-disabled {
  opacity: 0;
  visibility: hidden;
  /* transform: scale(0.77); */
  transition: opacity 3.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 默认显示灰态版本 */
.slide2-wrapper .slide2-content-left .slide2-left-disabled,
.slide2-wrapper .slide2-content-right .slide2-right-disabled {
  opacity: 1;
  visibility: visible;
  /* transform: scale(1); */
}

/* hover 激活时淡入彩色，淡出灰态 */
.slide2-wrapper .slide2-content-left.active .slide2-left {
  opacity: 1;
  visibility: visible;
  /* transform: scale(1); */
}

.slide2-wrapper .slide2-content-left.active .slide2-left-disabled {
  /* opacity: 0;
    visibility: hidden; */
  /* transform: scale(0.85); */
}

.slide2-wrapper .slide2-content-right.active .slide2-right {
  opacity: 1;
  visibility: visible;
  /* transform: scale(1); */
}

.slide2-wrapper .slide2-content-right.active .slide2-right-disabled {
  /* opacity: 0;
    visibility: hidden; */
  /* transform: scale(0.85); */
}

.hidet {
  filter: brightness(50%);
}

.slide2-wrapper .slide2-right {
  width: 559px;
  height: 869px;
  background: url("../images/qiaoWrapper_active.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -408px;
  left: 50px;
}

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

.mask.qiaom {
  background: url("../images/modal.png") no-repeat center;
  background-size: 100%;
}

.mask.diaom {
  background: url("../images/diaom.png") no-repeat center;
  background-size: 100%;
}

.slide2-wrapper .slide2-content-left .slide2Content,
.slide2-wrapper .slide2-content-right .slide2Content {
  width: 374px;
  position: absolute;
  bottom: 0;
  left: 40px;
  transform: translateY(380px);
  transition: transform 0.5s ease;
  opacity: 0;
}

.slide2-wrapper .slide2-content-left.active .slide2Content,
.slide2-wrapper .slide2-content-right.active .slide2Content {
  transform: translateY(0);
  opacity: 1;
}

.slide2-wrapper .slide2Content .check-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.slide2-wrapper .slide2Content .check-wrapper a {
  margin-bottom: 8px;
  display: block;
  width: 162px;
  height: 57px;
}

.slide2-wrapper .slide2Content .check-wrapper .appstore_check {
  margin-right: 18px;
  background: url("../images/appstore_03.png") no-repeat center;
  background-size: 100%;
}

.slide2-wrapper .slide2Content .check-wrapper .appstore_check.active {
  background: url("../images/appstore_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide2-wrapper .slide2Content .check-wrapper .google_check {
  background: url("../images/google_03.png") no-repeat center;
  background-size: 100%;
}

.slide2-wrapper .slide2Content .check-wrapper .google_check.active {
  background: url("../images/google_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide2-wrapper .slide2Content .input-wrapper {
  position: relative;
  width: 340px;
  display: flex;
  margin: 0 auto;
}

.slide2-wrapper .slide2Content .input-wrapper input {
  width: 235px;
  height: 39px;
  line-height: 38px;
  background: url("../images/input_wrapper2_07.png") no-repeat center;
  background-size: 100%;
  color: #868585;
  font-size: 14px;
  margin-left: 17px;
  padding-left: 10px;
}

.slide2-wrapper .slide2Content .service-wrapper {
  text-align: center;
  color: #fff;
  font-size: 14px;
  margin-top: 8px;
}

.slide2-wrapper .slide2Content .service-wrapper a {
  text-decoration: underline;
  color: #fff;
  font-size: 14px;
  vertical-align: middle;
}

.slide2-wrapper .slide2Content .service-wrapper a.check {
  display: inline-block;
  width: 28px;
  height: 23px;
  background: url("../images/check2_13.png") no-repeat center;
  background-size: 100%;
}

.slide2-wrapper .slide2Content .service-wrapper a.check.active {
  background: url("../images/check2_active_13.png") no-repeat center;
  background-size: 100%;
}

.slide2-wrapper .slide2Content .submit {
  display: block;
  width: 289px;
  height: 67px;
  background: url("../images/order_btn1_03.png") no-repeat center;
  background-size: 100%;
  margin: 16px auto 0;
}

.slide2-wrapper .slide2Content .dropdown {
  background: none;
  border: none;
  width: 90px;
  height: 39px;
  text-align: center;
  outline: none;
  color: #7f7f7f;
  font-size: 12px;
  background: url("../images/select_wrapper2_07.png") no-repeat center;
  background-size: 100%;
}

.slide2-wrapper .slide2-right .slide2Content {
  left: 111px;
}

/* 3 */
#section3 {
  height: 100%;
  overflow: hidden;
  position: relative;
  background: url("../images/bg3.jpg") no-repeat top;
  background-size: cover;
  min-width: 1530px;
  min-height: 700px;
  z-index: 1;
}

.slide3-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.slide3-content {
  width: 1500px;
  height: 780px;
  position: absolute;
  left: 50%;
  margin-left: -750px;
  bottom: 50%;
  margin-bottom: -450px;
  /* border: 1px solid; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide3-content .slide3-left {
  width: 657px;
  height: 100%;
  position: relative;
  z-index: 2;
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.45s ease, opacity 0.45s ease;
}

.slide3-content .slide3-left .swiper-container {
  width: 800px;
  padding: 200px 0;
  position: absolute;
  top: 6px;
  left: -93px;
}

.slide3-content .slide3-left .kuang {
  width: 608px;
  height: 305px;
  background: url(../images/kuang_03.png) no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 183px;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

.slide3-content .slide3-left .swiper-container .swiper-wrapper {
  /* overflow: hidden; */
  /* width: 608px;
    height: 305px;
    background: url('../images/kuang_03.png') no-repeat center;
    background-size: 100%; */
}

.slide3-content .slide3-left .swiper-container .swiper-wrapper .swiper-slide {
  width: 468px;
  height: 267px;
  color: #fff;
  /* opacity: 0; */
  text-align: center;
  transition: transform 1s ease, filter 0.6s ease;
  position: relative;
}

.slide3-content .slide3-left .swiper-container .swiper-wrapper .swiper-slide a {
  display: block;
  width: 70px;
  height: 70px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -35px;
  margin-top: -35px;
}

.slide3-content .slide3-left .card {
  width: 200px;
  height: 99px;
  position: absolute;
  bottom: 140px;
  right: 94px;
}

.slide3-content .slide3-left .card1 {
  background: url("../images/1_light_10.png") no-repeat center;
  background-size: 100%;
}

.slide3-content .slide3-left .card2 {
  background: url("../images/2_disabled_10.png") no-repeat center;
  background-size: 100%;
}

.slide3-content .slide3-left .card3 {
  background: url("../images/3_disabled_10.png") no-repeat center;
  background-size: 100%;
}

.slide3-content .slide3-left .swiper-container .swiper-wrapper .swiper-slide.img1 {
  background: url("../images/1d.jpg") no-repeat center;
  background-size: 100%;
}

.slide3-content .slide3-left .swiper-container .swiper-wrapper .swiper-slide.img2 {
  background: url("../images/15d.jpg") no-repeat center;
  background-size: 100%;
}

.slide3-content .slide3-left .swiper-container .swiper-wrapper .swiper-slide.img3 {
  background: url("../images/30d.jpg") no-repeat center;
  background-size: 100%;
}

.slide3-content .slide3-left.qiao3 .swiper-container .swiper-wrapper .swiper-slide.img1 {
  background: url("../images/1q.jpg") no-repeat center;
  background-size: 100%;
}

.slide3-content .slide3-left.qiao3 .swiper-container .swiper-wrapper .swiper-slide.img2 {
  background: url("../images/15q.jpg") no-repeat center;
  background-size: 100%;
}

.slide3-content .slide3-left.qiao3 .swiper-container .swiper-wrapper .swiper-slide.img3 {
  background: url("../images/30q.jpg") no-repeat center;
  background-size: 100%;
}

.slide3-content .slide3-left .swiper-container .swiper-slide-prev {
  transform: translate(321px, 169px) scale(0.6) !important;
  opacity: 1;
  filter: brightness(0.4);
  pointer-events: auto !important;
}

.slide3-content .slide3-left .swiper-container .swiper-slide-next {
  transform: translate(-332px, -151px) scale(0.6) !important;
  opacity: 1;
  filter: brightness(0.4);
  pointer-events: auto !important;
}

.slide3-content .slide3-left .swiper-container .swiper-slide-active {
  transform: translate(0, 0) scale(1) !important;
  opacity: 1;
  z-index: 2;
  pointer-events: auto !important;
}

.slide3-content .slide3-left .swiper-container .swiper-pagination {
  width: 689px;
  height: 129px;
  bottom: -112px;
  left: 107px;
  background: url("../images/line.png") no-repeat center;
  background-size: 100%;
}

.slide3-content .slide3-left .swiper-container .swiper-pagination .swiper-pagination-bullet {
  width: 171px;
  height: 129px;
  opacity: 1;
  border-radius: 0;
  /* position: absolute; */
}

.slide3-content .slide3-left .swiper-container .swiper-pagination .swiper-pagination-bullet {
  background: transparent;
}

.slide3-content
  .slide3-left
  .swiper-container
  .swiper-pagination.theme-0
  .swiper-pagination-bullet:nth-child(1) {
  top: 126px;
  right: 56px;
  background: url("../images/15_disabled.png") no-repeat center;
  background-size: 100% 100%;
}

.slide3-content
  .slide3-left
  .swiper-container
  .swiper-pagination.theme-0
  .swiper-pagination-bullet:nth-child(2) {
  top: 44%;
  right: 116px;
  background: url("../images/0.png") no-repeat center;
  background-size: 100% 100%;
}

.slide3-content
  .slide3-left
  .swiper-container
  .swiper-pagination.theme-0
  .swiper-pagination-bullet:nth-child(3) {
  bottom: 39px;
  right: 79px;
  background: url("../images/30_disabled_07.png") no-repeat center;
  background-size: 100% 100%;
}

.slide3-content
  .slide3-left
  .swiper-container
  .swiper-pagination.theme-1
  .swiper-pagination-bullet:nth-child(1) {
  top: 126px;
  right: 56px;
  background: url("../images/0_active.png") no-repeat center;
  background-size: 100% 100%;
}

.slide3-content
  .slide3-left
  .swiper-container
  .swiper-pagination.theme-1
  .swiper-pagination-bullet:nth-child(2) {
  top: 44%;
  right: 116px;
  background: url("../images/20_07.png") no-repeat center;
  background-size: 100% 100%;
}

.slide3-content
  .slide3-left
  .swiper-container
  .swiper-pagination.theme-1
  .swiper-pagination-bullet:nth-child(3) {
  bottom: 39px;
  right: 79px;
  background: url("../images/30_disabled_07.png") no-repeat center;
  background-size: 100% 100%;
}

.slide3-content
  .slide3-left
  .swiper-container
  .swiper-pagination
  .swiper-pagination-bullet:nth-child(1) {
  background: url("../images/1_03.png") no-repeat center;
  background-size: 100% 100%;
}

.slide3-content
  .slide3-left
  .swiper-container
  .swiper-pagination
  .swiper-pagination-bullet:nth-child(2) {
  background: url("../images/15_d.png") no-repeat center;
  background-size: 100% 100%;
}

.slide3-content
  .slide3-left
  .swiper-container
  .swiper-pagination
  .swiper-pagination-bullet:nth-child(3) {
  background: url("../images/30_d.png") no-repeat center;
  background-size: 100% 100%;
}

.slide3-content
  .slide3-left
  .swiper-container
  .swiper-pagination
  .swiper-pagination-bullet.swiper-pagination-bullet-active:nth-child(1) {
  background: url("../images/1_active_03.png") no-repeat center;
  background-size: 100% 100%;
}

.slide3-content
  .slide3-left
  .swiper-container
  .swiper-pagination
  .swiper-pagination-bullet.swiper-pagination-bullet-active:nth-child(2) {
  background: url("../images/15_d_active_03.png") no-repeat center;
  background-size: 100% 100%;
}

.slide3-content
  .slide3-left
  .swiper-container
  .swiper-pagination
  .swiper-pagination-bullet.swiper-pagination-bullet-active:nth-child(3) {
  background: url("../images/30_d_active_03.png") no-repeat center;
  background-size: 100% 100%;
}

.slide3-content
  .slide3-left
  .swiper-container
  .swiper-pagination
  .swiper-pagination-bullet-active::after {
  /* content: '';
    width: 111px;
    height: 104px;
    background: url('../images/15_active_07.png') no-repeat center;
    background-size: 100% 100%; */
  /* position: absolute;
    bottom: 0;
    left: 0; */
}

.slide3-content .slide3-right.diao3 {
  /* background: url('../images/diao3.png') no-repeat center;
    background-size: 100%;
    width: 771px;
    height: 949px;
    position: relative; */
}

.slide3-content .slide3-right {
  background: url("../images/lineBg.png") no-repeat center;
  background-size: 100%;
  width: 771px;
  height: 949px;
  position: relative;
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.45s ease, opacity 0.45s ease;
}

.slide3-content .slide3-right .pan {
  width: 100%;
  height: 100%;
  background: url("../images/pan.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: spin 28s linear infinite;
  z-index: 1;
}

.slide3-content .slide3-right.diao3 .slide3-people {
  width: 100%;
  height: 100%;
  background: url("../images/diaoP.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.slide3-content .slide3-right .slide3-people {
  width: 100%;
  height: 100%;
  background: url("../images/qiaoP.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.slide3-content.diao3 .changeBtnWrapper {
  width: 131px;
  height: 248px;
  background: url("../images/qiao_check_btn_03.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 0px;
  right: 85px;
  z-index: 2;
}

.slide3-content.diao3 .changeBtnWrapper a {
  display: block;
  width: 112px;
  height: 116px;
  position: absolute;
  bottom: 0;
  top: auto;
  left: 9px;
}

.slide3-content .changeBtnWrapper {
  width: 131px;
  height: 248px;
  background: url("../images/diao_check_btn_03.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 0px;
  right: 85px;
  z-index: 2;
}

.slide3-content .changeBtnWrapper a {
  display: block;
  width: 112px;
  height: 116px;
  position: absolute;
  top: 0;
  left: 9px;
  bottom: auto;
}

/* 角色切换动效：双方向中间靠拢淡出，再淡入归位 */
.slide3-content.swap-out .slide3-left {
  transform: translateX(120px);
  opacity: 0;
}

.slide3-content.swap-out .slide3-right {
  transform: translateX(-120px);
  opacity: 0;
}

.slide3-content.swap-in .slide3-left,
.slide3-content.swap-in .slide3-right {
  transform: translateX(0);
  opacity: 1;
}

/* 4 */
#section4 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: url("../images/bg4.jpg") no-repeat top;
  background-size: cover;
  min-width: 1330px;
  min-height: 600px;
  z-index: 1;
}

.slide4-wrapper {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 3;
}

.slide4-wrapper .swiper-container {
  width: 100%;
  height: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide {
  width: 100%;
  height: 100%;
  position: relative;
  /* pointer-events: auto !important; */
}

.slide4-wrapper .swiper-container .swiper-slide a.audio {
  display: block;
  width: 62px;
  height: 62px;
  position: absolute;
  top: 18%;
  right: 35%;
}

.slide4-wrapper .swiper-container .swiper-slide div.people {
  transform: translateX(-5%);
  opacity: 0;
  transition: all 0.5s;
  width: 1200px;
  height: 800px;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -600px;
  margin-top: -350px;
  /* 背景角色图只做展示，不拦截鼠标事件，避免遮挡右侧/上层可点区域 */
  pointer-events: none;
}

.slide4-wrapper .swiper-container .swiper-slide div.jnKuang .text_wrapper {
  width: 260px;
  height: 341px;
  margin: 55px 0 0 73px;
  text-align: left;
}

.slide4-wrapper .swiper-container .swiper-slide div.jnKuang .titleText {
  font-family: Source Han Serif Bold;
  color: #baa058;
  font-size: 29px;
}

.slide4-wrapper .swiper-container .swiper-slide div.jnKuang .text1 {
  margin-top: 55px;
  line-height: 25px;
}

.slide4-wrapper .swiper-container .swiper-slide div.jnKuang {
  width: 350px;
  height: 508px;
  background: url("../images/jnk_03.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 50%;
  left: 15%;
  margin-top: -224px;
  opacity: 0;
  transition: all 0.5s 0.1s ease;
  z-index: 3;
  font-family: Source Han Serif Regular;
  color: #baa058;
  font-size: 14px;
}

.slide4-wrapper .swiper-container .ani-slide div.people {
  transform: translateX(0);
  opacity: 1;
}

.slide4-wrapper .swiper-container .ani-slide div.jnKuang {
  opacity: 1;
}

.slide4-wrapper .swiper-container .swiper-slide div.jnKuang .jn_icon_wrapper {
  width: 260px;
  height: 106px;
  margin: 17px auto 6px;
  text-align: left;
  font-family: Source Han Serif Regular;
}

.slide4-wrapper .swiper-container .swiper-slide div.jnKuang .jn_icon_wrapper ul {
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide4-wrapper .swiper-container .swiper-slide div.jnKuang .jn_icon_wrapper ul li {
  position: relative;
  text-align: center;
  margin: 0 3px;
}

.slide4-wrapper .swiper-container .swiper-slide div.jnKuang .jn_icon_wrapper ul li p {
  text-align: center;
}

.slide4-wrapper .swiper-container .swiper-slide div.jnKuang .jn_icon_wrapper ul li a {
  display: block;
  width: 58px;
  height: 59px;
  cursor: pointer;
}

.slide4-wrapper .swiper-container .swiper-slide.cwj div.jnKuang .jn_icon_wrapper ul li a.jn1 {
  background: url("../images/cj1_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.cwj div.jnKuang .jn_icon_wrapper ul li a.jn2 {
  background: url("../images/cj2_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.cwj div.jnKuang .jn_icon_wrapper ul li a.jn3 {
  background: url("../images/cj3_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.cwj div.jnKuang .jn_icon_wrapper ul li a.jn4 {
  background: url("../images/cj4_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zch div.jnKuang .jn_icon_wrapper ul li a.jn1 {
  background: url("../images/zchj1_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zch div.jnKuang .jn_icon_wrapper ul li a.jn2 {
  background: url("../images/zchj2_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zch div.jnKuang .jn_icon_wrapper ul li a.jn3 {
  background: url("../images/zchj3_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zch div.jnKuang .jn_icon_wrapper ul li a.jn4 {
  background: url("../images/zchj4_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.dq div.jnKuang .jn_icon_wrapper ul li a.jn1 {
  background: url("../images/dqj1_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.dq div.jnKuang .jn_icon_wrapper ul li a.jn2 {
  background: url("../images/dqj2_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.dq div.jnKuang .jn_icon_wrapper ul li a.jn3 {
  background: url("../images/dqj3_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.dq div.jnKuang .jn_icon_wrapper ul li a.jn4 {
  background: url("../images/dqj4_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.gy div.jnKuang .jn_icon_wrapper ul li a.jn1 {
  background: url("../images/gyj1_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.gy div.jnKuang .jn_icon_wrapper ul li a.jn2 {
  background: url("../images/gyj2_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.gy div.jnKuang .jn_icon_wrapper ul li a.jn3 {
  background: url("../images/gyj3_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.gy div.jnKuang .jn_icon_wrapper ul li a.jn4 {
  background: url("../images/gyj4_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.dc div.jnKuang .jn_icon_wrapper ul li a.jn1 {
  background: url("../images/dj1_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.dc div.jnKuang .jn_icon_wrapper ul li a.jn2 {
  background: url("../images/dj2_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.dc div.jnKuang .jn_icon_wrapper ul li a.jn3 {
  background: url("../images/dj3_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.dc div.jnKuang .jn_icon_wrapper ul li a.jn4 {
  background: url("../images/dj4_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zy div.jnKuang .jn_icon_wrapper ul li a.jn1 {
  background: url("../images/zj1_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zy div.jnKuang .jn_icon_wrapper ul li a.jn2 {
  background: url("../images/zj2_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zy div.jnKuang .jn_icon_wrapper ul li a.jn3 {
  background: url("../images/zj3_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zy div.jnKuang .jn_icon_wrapper ul li a.jn4 {
  background: url("../images/zj4_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.xq div.jnKuang .jn_icon_wrapper ul li a.jn1 {
  background: url("../images/qj1_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.xq div.jnKuang .jn_icon_wrapper ul li a.jn2 {
  background: url("../images/qj2_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.xq div.jnKuang .jn_icon_wrapper ul li a.jn3 {
  background: url("../images/qj3_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.xq div.jnKuang .jn_icon_wrapper ul li a.jn4 {
  background: url("../images/qj4_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zr div.jnKuang .jn_icon_wrapper ul li a.jn1 {
  background: url("../images/rj1_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zr div.jnKuang .jn_icon_wrapper ul li a.jn2 {
  background: url("../images/rj2_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zr div.jnKuang .jn_icon_wrapper ul li a.jn3 {
  background: url("../images/rj3_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zr div.jnKuang .jn_icon_wrapper ul li a.jn4 {
  background: url("../images/rj4_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.cwj div.jnKuang .jn_icon_wrapper ul li a.jn1:hover {
  transition: all 0.3s;
  background: url("../images/cj1_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.cwj div.jnKuang .jn_icon_wrapper ul li a.jn2:hover {
  transition: all 0.3s;
  background: url("../images/cj2_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.cwj div.jnKuang .jn_icon_wrapper ul li a.jn3:hover {
  transition: all 0.3s;
  background: url("../images/cj3_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.cwj div.jnKuang .jn_icon_wrapper ul li a.jn4:hover {
  transition: all 0.3s;
  background: url("../images/cj4_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zch div.jnKuang .jn_icon_wrapper ul li a.jn1:hover {
  transition: all 0.3s;
  background: url("../images/zchj1_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zch div.jnKuang .jn_icon_wrapper ul li a.jn2:hover {
  transition: all 0.3s;
  background: url("../images/zchj2_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zch div.jnKuang .jn_icon_wrapper ul li a.jn3:hover {
  transition: all 0.3s;
  background: url("../images/zchj3_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zch div.jnKuang .jn_icon_wrapper ul li a.jn4:hover {
  transition: all 0.3s;
  background: url("../images/zchj4_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.dq div.jnKuang .jn_icon_wrapper ul li a.jn1:hover {
  transition: all 0.3s;
  background: url("../images/dqj1_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.dq div.jnKuang .jn_icon_wrapper ul li a.jn2:hover {
  transition: all 0.3s;
  background: url("../images/dqj2_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.dq div.jnKuang .jn_icon_wrapper ul li a.jn3:hover {
  transition: all 0.3s;
  background: url("../images/dqj3_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.dq div.jnKuang .jn_icon_wrapper ul li a.jn4:hover {
  transition: all 0.3s;
  background: url("../images/dqj4_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.gy div.jnKuang .jn_icon_wrapper ul li a.jn1:hover {
  transition: all 0.3s;
  background: url("../images/gyj1_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.gy div.jnKuang .jn_icon_wrapper ul li a.jn2:hover {
  transition: all 0.3s;
  background: url("../images/gyj2_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.gy div.jnKuang .jn_icon_wrapper ul li a.jn3:hover {
  transition: all 0.3s;
  background: url("../images/gyj3_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.gy div.jnKuang .jn_icon_wrapper ul li a.jn4:hover {
  transition: all 0.3s;
  background: url("../images/gyj4_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.dc div.jnKuang .jn_icon_wrapper ul li a.jn1:hover {
  transition: all 0.3s;
  background: url("../images/dj1_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.dc div.jnKuang .jn_icon_wrapper ul li a.jn2:hover {
  transition: all 0.3s;
  background: url("../images/dj2_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.dc div.jnKuang .jn_icon_wrapper ul li a.jn3:hover {
  transition: all 0.3s;
  background: url("../images/dj3_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.dc div.jnKuang .jn_icon_wrapper ul li a.jn4:hover {
  transition: all 0.3s;
  background: url("../images/dj4_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zy div.jnKuang .jn_icon_wrapper ul li a.jn1:hover {
  transition: all 0.3s;
  background: url("../images/zj1_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zy div.jnKuang .jn_icon_wrapper ul li a.jn2:hover {
  transition: all 0.3s;
  background: url("../images/zj2_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zy div.jnKuang .jn_icon_wrapper ul li a.jn3:hover {
  transition: all 0.3s;
  background: url("../images/zj3_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zy div.jnKuang .jn_icon_wrapper ul li a.jn4:hover {
  transition: all 0.3s;
  background: url("../images/zj4_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.xq div.jnKuang .jn_icon_wrapper ul li a.jn1:hover {
  transition: all 0.3s;
  background: url("../images/qj1_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.xq div.jnKuang .jn_icon_wrapper ul li a.jn2:hover {
  transition: all 0.3s;
  background: url("../images/qj2_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.xq div.jnKuang .jn_icon_wrapper ul li a.jn3:hover {
  transition: all 0.3s;
  background: url("../images/qj3_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.xq div.jnKuang .jn_icon_wrapper ul li a.jn4:hover {
  transition: all 0.3s;
  background: url("../images/qj4_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zr div.jnKuang .jn_icon_wrapper ul li a.jn1:hover {
  transition: all 0.3s;
  background: url("../images/rj1_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zr div.jnKuang .jn_icon_wrapper ul li a.jn2:hover {
  transition: all 0.3s;
  background: url("../images/rj2_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zr div.jnKuang .jn_icon_wrapper ul li a.jn3:hover {
  transition: all 0.3s;
  background: url("../images/rj3_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide.zr div.jnKuang .jn_icon_wrapper ul li a.jn4:hover {
  transition: all 0.3s;
  background: url("../images/rj4_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-slide div.jnKuang .jn_icon_wrapper .jn_text {
  display: none;
  font-family: Source Han Serif Medium;
  color: #d0c6aa;
  font-size: 12px;
  line-height: 20px;
  padding: 22px 10px;
  text-align: left;
  width: 254px;
  height: auto;
  background: #160e06;
  border: 1px solid #ab9382;
  position: absolute;
  top: 80px;
  left: -79px;
}

.slide4-wrapper .swiper-container .swiper-slide div.jnKuang .jn_icon_wrapper .jn_text::before {
  content: "";
  background-image: url("../images/arrow_03.png");
  background-size: 100%;
  width: 19px;
  height: 15px;
  position: absolute;
  top: -14px;
  left: 37%;
}

.slide4-wrapper .swiper-container .swiper-slide div.jnKuang .jn_icon_wrapper .jn_text.active {
  display: block;
}

.slide4-wrapper .swiper-container .swiper-pagination {
  width: 240px;
  height: 480px;
  top: 50%;
  margin-top: -240px;
  left: 70%;
  background: url("../images/line_05.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-container-vertical > .swiper-pagination-bullets {
  left: 0;
}

.slide4-wrapper .swiper-container .swiper-pagination-bullet {
  width: 127px;
  height: 125px;
  opacity: 1;
  border-radius: 0;
  position: absolute;
}

.slide4-wrapper .swiper-container .swiper-pagination span:nth-child(1) {
  top: -2px;
  right: 66px;
  background: url("../images/dc_06.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper
  .swiper-container
  .swiper-pagination
  span:nth-child(1).swiper-pagination-bullet-active {
  background: url("../images/dc_active_06.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-pagination span:nth-child(2) {
  top: 113px;
  right: -2px;
  background: url("../images/zy_06.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper
  .swiper-container
  .swiper-pagination
  span:nth-child(2).swiper-pagination-bullet-active {
  background: url("../images/zy_active_06.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-pagination span:nth-child(3) {
  bottom: 119px;
  right: 4px;
  background: url("../images/xq_06.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper
  .swiper-container
  .swiper-pagination
  span:nth-child(3).swiper-pagination-bullet-active {
  background: url("../images/xq_active_06.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .swiper-container .swiper-pagination span:nth-child(4) {
  bottom: -3px;
  right: 76px;
  background: url("../images/zr_06.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper
  .swiper-container
  .swiper-pagination
  span:nth-child(4).swiper-pagination-bullet-active {
  background: url("../images/zr_active_06.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .mySwiper {
  width: 233px;
  height: 522px;
  top: 50%;
  margin-top: -240px;
  left: 70%;
  background: url("../images/lineBg_03.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  z-index: 2;
}

.slide4-wrapper .mySwiper .swiper-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.slide4-wrapper .mySwiper .swiper-slide {
  width: 105px;
  height: 121px;
  text-align: center;
  display: block;
  cursor: pointer;
  pointer-events: auto;
}

.slide4-wrapper .mySwiper .swiper-button-next,
.slide4-wrapper .mySwiper .swiper-button-prev {
  width: 61px;
  height: 60px;
  font-size: 0;
  color: transparent;
}

.slide4-wrapper .mySwiper .swiper-slide {
  /* opacity: 0.4; */
  transition: all 0.3s;
  cursor: pointer;
}

.slide4-wrapper .mySwiper .ani-thumb-slide {
  transform: translate(-38px, 33px);
}

/* .slide4-wrapper .mySwiper .ani-thumb-slide1 {
    transform: translate(78px, -30px);
} */

.slide4-wrapper .mySwiper .swiper-slide-active {
  /* opacity: 1; */
  transform: translate(63px, 26px) !important;
}

.slide4-wrapper .mySwiper .swiper-slide-prev {
  transform: translate(-91px, 32px) !important;
}

.slide4-wrapper .mySwiper .swiper-slide-next {
  transform: translate(127px, 5px) !important;
}

.slide4-wrapper .mySwiper .ani-thumb-slide1 {
  transform: translate(114px, 8px) !important;
}

.slide4-wrapper .mySwiper .ani-thumb-slide2 {
  transform: translate(44px, -15px) !important;
}

.slide4-wrapper .mySwiper .ani-thumb-slide3 {
  transform: translate(-108px, -51px) !important;
}

.slide4-wrapper .mySwiper .swiper-button-next {
  right: 176px;
  background: url("../images/bottom_03.png") no-repeat center;
  background-size: 100%;
  bottom: 0;
  top: auto;
}

.slide4-wrapper .mySwiper .swiper-button-prev {
  left: 11px;
  background: url("../images/top_03.png") no-repeat center;
  background-size: 100%;
  top: 25px;
}

.slide4-wrapper .mySwiper .swiper-slide.cwj {
  background: url("../images/cwjs.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .mySwiper .swiper-slide.swiper-slide-thumb-active.cwj {
  background: url("../images/cwjs_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .mySwiper .swiper-slide.zch {
  background: url("../images/zchs_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .mySwiper .swiper-slide.swiper-slide-thumb-active.zch {
  background: url("../images/zchs_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .mySwiper .swiper-slide.dq {
  background: url("../images/dqs_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .mySwiper .swiper-slide.swiper-slide-thumb-active.dq {
  background: url("../images/dqs_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .mySwiper .swiper-slide.gy {
  background: url("../images/gys_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .mySwiper .swiper-slide.swiper-slide-thumb-active.gy {
  background: url("../images/gys_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .mySwiper .swiper-slide.dc {
  background: url("../images/dcs_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .mySwiper .swiper-slide.swiper-slide-thumb-active.dc {
  background: url("../images/dcs_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .mySwiper .swiper-slide.zy {
  background: url("../images/zys.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .mySwiper .swiper-slide.swiper-slide-thumb-active.zy {
  background: url("../images/zys_active.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .mySwiper .swiper-slide.xq {
  transform: translate(114px, 8px);
  background: url("../images/xs_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .mySwiper .swiper-slide.swiper-slide-thumb-active.xq {
  background: url("../images/xs_active_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .mySwiper .swiper-slide.zr {
  transform: translate(44px, -15px);
  background: url("../images/zrs_03.png") no-repeat center;
  background-size: 100%;
}

.slide4-wrapper .mySwiper .swiper-slide.swiper-slide-thumb-active.zr {
  background: url("../images/zrs_active_03.png") no-repeat center;
  background-size: 100%;
}

/* 5 */
#section5 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: url("../images/bg5.jpg") no-repeat top;
  background-size: cover;
  min-width: 1330px;
  min-height: 600px;
  z-index: 1;
}

.slide5-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.slide5-wrapper .title,
.slide3-wrapper .title {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 73px;
  left: 0;
}

.slide4-wrapper .title {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 73px;
  left: 0;
  z-index: 2;
}

.carousel,
.carsoule-warpper {
  width: 808px;
  height: 463px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -404px;
  margin-top: -231.5px;
}

.carousel .swiper-slide {
  width: 100%;
  height: 100%;
  background: url("../images/carsouleBg_03.png") no-repeat center;
  background-position: center;
  background-size: cover;
  opacity: 1 !important;
}

.carousel .swiper-slide img {
  width: 787px;
  height: 444px;
  margin: 9.5px auto;
  border: 2px solid #7c5f4f;
}

.slide5-wrapper .swiper-button-next1,
.slide5-wrapper .swiper-button-prev1 {
  width: 114px;
  height: 114px;
  font-size: 0;
  color: transparent;
  position: absolute;
  top: 37%;
  cursor: pointer;
}

.slide5-wrapper .swiper-button-next1 {
  background: url("../images/right_03.png") no-repeat center;
  background-size: 100% 100%;
  right: -166px;
  transition: all 0.2s;
}

.slide5-wrapper .swiper-button-next1:hover {
  background: url("../images/right_active_03.png") no-repeat center;
  background-size: 100% 100%;
}

.slide5-wrapper .swiper-button-prev1 {
  background: url("../images/left_03.png") no-repeat center;
  background-size: 100% 100%;
  left: -166px;
  transition: all 0.2s;
}

.slide5-wrapper .swiper-button-prev1:hover {
  background: url("../images/left_active_03.png") no-repeat center;
  background-size: 100% 100%;
}

.slide5-wrapper .swiper-pagination-bullet {
  width: 17px;
  height: 17px;
  background: url("../images/dot_03.png") no-repeat center;
  background-size: 100%;
  margin: 0 14px !important;
  opacity: 1;
}

.slide5-wrapper .swiper-pagination-bullet-active {
  width: 17px;
  height: 17px;
  background: url("../images/dot_active_03.png") no-repeat center;
  background-size: 100%;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: -38px;
}

.footer {
  width: 100%;
  height: 107px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #000;
  text-align: left;
}

.footer-wrapper {
  position: relative;
  width: 912px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.footer-wrapper .left-wrapper {
  width: 320px;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  color: #e3e3e3;
  position: relative;
}

.footer_text {
  font-size: 10px;
  color: #e3e3e3;
  margin-left: 14px;
}

.footer-wrapper .right-wrapper {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.footer-wrapper .left-wrapper .img-wrapper {
  width: 160px;
  height: 75px;
}

.footer-wrapper .left-wrapper .img-wrapper .img1 {
  width: 160px;
  height: 75px;
  margin-right: 10px;
}

.footer-wrapper .left-wrapper .copy-wrapper {
  margin-left: 10px;
}

.footer-wrapper .left-wrapper .copy-wrapper p {
  font-size: 10px;
  color: #e3e3e3;
  margin-bottom: 8px;
}

.footer-wrapper .left-wrapper .copy-wrapper a {
  text-decoration: underline;
  font-size: 12px;
  color: #e3e3e3;
  margin: 0 6px;
}

.footer-wrapper .right-wrapper .img-wrapper,
.footer-wrapper .right-wrapper .img-wrapper img {
  width: 49px;
  height: 50px;
}

.footer-wrapper .right-wrapper .img-wrapper {
  margin-bottom: 10px;
}

.footer-wrapper .right-wrapper .right_text {
  margin-left: 22px;
}

.footer-wrapper .right-wrapper p {
  color: #e3e3e3;
  font-size: 10px;
  margin: 5px 0;
}

.footer-wrapper .right-wrapper p i {
  display: inline-block;
  background: url("../images/i_07.png") no-repeat center;
  background-size: 100%;
  width: 7px;
  height: 6px;
  margin-right: 7px;
}

/* fixed */
.fix_open {
  display: block;
  width: 38px;
  height: 80px;
  background: url("../images/open_03.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -80.5px;
  z-index: 3;
  display: none;
}

.fixed-wrapper {
  width: 240px;
  height: 510px;
  background: url("../images/fixed_wrapper_03.png") no-repeat center;
  background-size: 100% 100%;
  position: fixed;
  top: 50%;
  margin-top: -255px;
  right: 0;
  z-index: 3;
  /* opacity: 0;
    transition: all 0.6s ease; */
}

.fixed-wrapper .fix_close {
  display: block;
  position: absolute;
  top: 177px;
  left: 19px;
  width: 38px;
  height: 80px;
  background: url("../images/closef_03.png") no-repeat center;
  background-size: 100%;
}

.fixed-wrapper.active {
  opacity: 1;
}

.fixed-wrapper ul {
  width: 180px;
  height: 261px;
  position: absolute;
  bottom: 68px;
  right: 0;
}

.fixed-wrapper ul li a {
  display: block;
  margin: 10px auto;
  text-align: center;
}

.top {
  position: absolute;
  width: 174px;
  height: 60px;
  bottom: 0px;
  right: 0;
  z-index: 3;
}

/* modal */
.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  left: 0;
  z-index: 99;
  display: none;
  overflow: auto;
}

.video_wrapper {
  width: 1200px;
  height: 600px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -600px;
  margin-top: -300px;
  z-index: 2;
}

.modal .close {
  display: block;
  width: 49px;
  height: 47px;
  background: url("../images/close_v_03.png") no-repeat center;
  background-size: 100% 100%;
  position: absolute;
  right: -23px;
  top: -34px;
}

.video_wrapper .close {
  display: block;
  width: 49px;
  height: 47px;
  background: url("../images/close_v_03.png") no-repeat center;
  background-size: 100% 100%;
  position: absolute;
  right: -53px;
  top: 3px;
}

.video_modal .video_content {
  width: 1200px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -600px;
  margin-top: -300px;
  z-index: 3;
}

.video_modal .video_content iframe,
.video_modal .video_content video {
  width: 100%;
  height: 100%;
  display: none;
}

.tips {
  color: #a78746;
  font-size: 16px;
  text-align: center;
  margin: 10px auto;
  position: absolute;
  top: 33%;
  left: 0;
  width: 100%;
}

/* one */
.qiao .close {
  display: block;
  width: 99px;
  height: 150px;
  background: url("../images/qiaoClose.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 286px;
  right: 59px;
}

.diao .close {
  display: block;
  width: 99px;
  height: 150px;
  background: url("../images/diaoClose.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 286px;
  right: 59px;
}

.qiao .choice {
  display: block;
  width: 114px;
  height: 127px;
  position: absolute;
  top: 220px;
  left: 38px;
}

.diao .choice {
  display: block;
  width: 114px;
  height: 127px;
  position: absolute;
  top: 133px;
  left: 47px;
}

.qiao {
  width: 1287px;
  height: 923px;
  background: url("../images/qiaoM.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -643.5px;
  margin-top: -461.5px;
  position: relative;
}

.diao {
  width: 1287px;
  height: 923px;
  background: url("../images/diaoM_03.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -643.5px;
  margin-top: -461.5px;
  position: relative;
}

.oneWrapper .oneContent {
  width: 330px;
  height: 153px;
  left: 602px;
  position: absolute;
  bottom: 146px;
}

.oneWrapper .oneContent .check-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.oneWrapper .oneContent .check-wrapper a {
  margin-bottom: 13px;
  display: block;
  width: 148px;
  height: 51px;
}

.oneWrapper .oneContent .check-wrapper .appstore_check {
  margin-right: 7px;
  background: url("../images/appstore_m_03.png") no-repeat center;
  background-size: 100%;
  transition: all 0.2s;
}

.oneWrapper .oneContent .check-wrapper .appstore_check.active {
  background: url("../images/appstore_m_active_03.png") no-repeat center;
  background-size: 100%;
}

.oneWrapper .oneContent .check-wrapper .google_check {
  background: url("../images/google_m_03.png") no-repeat center;
  background-size: 100%;
  transition: all 0.2s;
}

.oneWrapper .oneContent .check-wrapper .google_check.active {
  background: url("../images/google_m_active_03.png") no-repeat center;
  background-size: 100%;
}

.oneWrapper .oneContent .input-wrapper {
  position: relative;
  width: 330px;
  display: flex;
  margin: 0 auto;
}

.oneWrapper .oneContent .input-wrapper input {
  width: 225px;
  height: 38px;
  line-height: 38px;
  background: url("../images/input_wrapper_m_11.png") no-repeat center;
  background-size: 100%;
  color: #868585;
  font-size: 14px;
  margin-left: 17px;
  padding-left: 10px;
}

.oneWrapper .oneContent .service-wrapper {
  text-align: center;
  color: #b9e3dc;
  font-size: 16px;
  margin-top: 8px;
}

.oneWrapper .oneContent .service-wrapper a.check {
  display: inline-block;
  width: 29px;
  height: 24px;
  background: url("../images/check_m_19.png") no-repeat center;
  background-size: 100%;
}

.oneWrapper .oneContent .service-wrapper a.check.active {
  background: url("../images/check_active_m_19.png") no-repeat center;
  background-size: 100%;
}

.qiao .oneContent #submitq {
  display: block;
  width: 260px;
  height: 263px;
  background: url("../images/order_m_03.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  right: -283px;
  top: -48px;
  transition: all 0.2s;
}

.qiao .oneContent #submitq:hover {
  background: url("../images/order_m_active_03.png") no-repeat center;
  background-size: 100%;
}

.diao .oneContent #submitd {
  display: block;
  width: 260px;
  height: 263px;
  background: url("../images/order1.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  right: -283px;
  top: -50px;
  transition: all 0.2s;
}

.diao .oneContent #submitd:hover {
  background: url("../images/order1_active.png") no-repeat center;
  background-size: 100%;
}

.service-wrapper span {
  vertical-align: top;
}

.oneModal .dropdown {
  background: none;
  border: none;
  /* padding-left: 10px; */
  width: 87px;
  height: 39px;
  text-align: center;
  outline: none;
  color: #7f7f7f;
  font-size: 12px;
  background: url("../images/select_wrapper_15.png") no-repeat center;
  background-size: 100%;
}

/* reward */
.reward-wrapper {
  width: 715px;
  height: 621px;
  background: url("../images/reward_wrapper_03.png") no-repeat center;
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -357.5px;
  margin-top: -310.5px;
}

.reward-wrapper .close {
  display: block;
  width: 67px;
  height: 58px;
  background: url("../images/reward_close_03.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  right: 0;
  top: -38px;
}

.reward-wrapper .code-wrappers {
  width: 590px;
  height: auto;
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}

.reward-wrapper .code-title {
  width: 200px;
  color: #062236;
  font-size: 20px;
  margin: 149px 156px 9px;
}

.codetitle {
  width: 200px;
  color: #062236;
  font-size: 20px;
  margin: 20px 156px 9px;
}

.reward-wrapper #reward-code {
  width: 287px;
  height: 51px;
  background: url("../images/code_input_03.png") no-repeat center;
  background-size: 100%;
  color: #fff;
  font-size: 18px;
  margin-right: 10px;
  text-align: center;
  line-height: 51px;
}

.codeText {
  color: #fff;
  font-size: 18px;
}

.reward-wrapper .copy {
  display: block;
  width: 104px;
  height: 54px;
  background: url("../images/copy_btn_07.png") no-repeat center;
  background-size: 100%;
}

/* code */
.code-wrapper.dcCode {
  width: 1248px;
  height: 648px;
  background: url("../images/diaoModal_03.png") no-repeat center;
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -624px;
  margin-top: -324px;
}

.code-wrapper.qiaoCode {
  width: 1248px;
  height: 648px;
  background: url("../images/qiaoModal_03.png") no-repeat center;
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -624px;
  margin-top: -324px;
}

.code-wrapper .code_content {
  width: 320px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 92px;
  bottom: 50px;
}

.code-wrapper #code {
  width: 218px;
  height: 54px;
  background: url("../images/code_input_06.png") no-repeat center;
  background-size: 100%;
  margin-right: 5px;
  line-height: 51px;
  text-align: center;
  font-size: 14px;
  color: #fff;
}

.code-wrapper .code_content .code-text-wrapper a.copy {
  display: block;
  width: 91px;
  height: 51px;
}

.code-wrapper .jump_chat {
  display: block;
  width: 103px;
  height: 42px;
  position: absolute;
  bottom: 54px;
  right: 97px;
}

.code-wrapper .video_img {
  width: 259px;
  position: absolute;
  top: 185px;
  right: 113px;
}

.code-wrapper .video_img .video_imgt {
  width: 259px;
  height: 135px;
  /* background: url('../images/video_img_03.png') no-repeat center;
    background-size: 100%; */
  position: relative;
}

.code-wrapper .video_img .video_imgt video {
  width: 250px;
  height: 130px;
  margin: 0 auto;
}

.code-wrapper .video_img .video_imgt .swiper-container {
  width: 259px;
  height: 135px;
  margin: 0 auto;
  overflow: hidden;
}

.code-wrapper .video_img .video_imgt .swiper-container .swiper-wrapper .swiper-slide {
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 40px;
  /* opacity: 0; */
  text-align: center;
  position: relative;
}

.code-wrapper.dcCode .video_img .video_imgt .swiper-container .swiper-wrapper .swiper-slide.img1 {
  background: url("../images/1d.jpg") no-repeat center;
  background-size: 100%;
}

.code-wrapper.dcCode .video_img .video_imgt .swiper-container .swiper-wrapper .swiper-slide.img2 {
  background: url("../images/15d.jpg") no-repeat center;
  background-size: 100%;
}

.code-wrapper.dcCode .video_img .video_imgt .swiper-container .swiper-wrapper .swiper-slide.img3 {
  background: url("../images/30d.jpg") no-repeat center;
  background-size: 100%;
}

.code-wrapper.qiaoCode .video_img .video_imgt .swiper-container .swiper-wrapper .swiper-slide.img1 {
  background: url("../images/1q.jpg") no-repeat center;
  background-size: 100%;
}

.code-wrapper.qiaoCode .video_img .video_imgt .swiper-container .swiper-wrapper .swiper-slide.img2 {
  background: url("../images/15q.jpg") no-repeat center;
  background-size: 100%;
}

.code-wrapper.qiaoCode .video_img .video_imgt .swiper-container .swiper-wrapper .swiper-slide.img3 {
  background: url("../images/30q.jpg") no-repeat center;
  background-size: 100%;
}

.code-wrapper .video_img .video_imgt .swiper-button-next,
.code-wrapper .video_img .video_imgt .swiper-button-prev {
  width: 36px;
  height: 68px;
  font-size: 0;
  top: 40%;
  color: transparent;
}

.code-wrapper .video_img .video_imgt .swiper-button-next {
  background: url("../images/right_c_03.png") no-repeat center;
  background-size: 100% 100%;
  right: -53px;
}

.code-wrapper .video_img .video_imgt .swiper-button-prev {
  background: url("../images/left_c_03.png") no-repeat center;
  background-size: 100% 100%;
  left: -53px;
}

.code-wrapper .video_img .btns_video {
  width: 167px;
  height: 23px;

  margin: 3px auto;
}

.code-wrapper .video_img .btns_video.video0 {
  background: url("../images/1_text_07.png") no-repeat center;
  background-size: 100%;
}

.code-wrapper .video_img .btns_video.video1 {
  background: url("../images/15_text_06.png") no-repeat center;
  background-size: 100%;
}

.code-wrapper .video_img .btns_video.video2 {
  background: url("../images/30_text_03.png") no-repeat center;
  background-size: 100%;
}

.code-wrapper .video_img div a {
  display: block;
  width: 70px;
  height: 70px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -35px;
  margin-top: -35px;
}

/* tip */
.tipWrapper {
  width: 906px;
  height: 415px;
  background: url("../images/tip_modal_03.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -453px;
  margin-top: -207.5px;
}

/* err */
.errWrapper {
  width: 906px;
  height: 415px;
  background: url("../images/phone_tip_modal_03.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -453px;
  margin-top: -207.5px;
}

/* 当前页可见 + 可交互 */
.swiper.container #section2.swiper-slide-active,
.swiper.container #section1.swiper-slide-active,
.swiper.container #section3.swiper-slide-active,
.swiper.container #section4.swiper-slide-active,
.swiper.container #section5.swiper-slide-active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
}

@keyframes moveArrow {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(20px);
  }
}

@keyframes myBreath {
  to {
    transform: scale(0.88);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes opacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes shake {
  0%,
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

/* 旋转关键帧 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1919px) and (min-width: 768px) {
  html {
    zoom: 80%;
  }

  @-ms-viewport {
    width: 1920px;
  }
}