/*初始化样式 */
html, body, div, p, ul, li, h1, h2, h3, h4, h5, h6 {
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
}
a,a:hover { text-decoration: none;}
li {list-style: none;}
html, body, .swiper-container, .page, .page-wrap {
  height: 100%;
}
.app-left {
  float: left;
}
.app-right {
  float: right;
}
@media (max-width: 1600px) {
  .page-wrap {
    transform: scale(0.9);
  }
}
@media (max-width: 1400px) {
  .page-wrap {
    transform: scale(0.75);
  }
}
.page {
  position: relative;
  transform: translate3d(0,0,0);
  overflow: hidden;
}
.video-js .vjs-big-play-button {
  display: none;
}
/* nav-menu */
#nav-menu {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 999;
  overflow: hidden;
}
#nav-menu .init-menu {
  float: right;
  width: 64px;
  height: 64px;
  background-image: url(../images/0_1_ring%402x.png);
  background-repeat: no-repeat;
  background-size: cover;
}
#nav-menu .active-menu {
  display: none;
  padding-right: 20px;
  transition: opacity 1s ease;
}
#nav-menu .active-menu li {
  position: relative;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  padding-right: 32px;
  margin-bottom: 8px;
  cursor: pointer;
  color: #BDBDBD;
}
#nav-menu .active-menu li span {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 0;
  right: 0;
}
#nav-menu .icon {
  background-image: url(../images/0_2_ic_arrow_up%402x.png);
  background-repeat: no-repeat;
  background-size: cover;
}
#nav-menu .dot::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: rgba(120, 120, 120, 0.4);
}
#nav-menu:hover .active-menu {
  display: block;
}
/* page1 内容处理 */
.page1 {
  background: #000;
}
.page1 .logo1 {
  opacity: 0;
  position: absolute;
  top: -1200px;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 240px;
  height: 180px;
  background-image: url(../images/vedlogo.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: opacity 0.5s ease;
    transition-delay: 0s;
}
.page1.play-end::after {
  opacity: 1;
}

.page1.play-end .logo1 {
  top: 50%;
  opacity: 1;
  transition-delay: 0.4s;
}
.video1-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 600px;
  width: 1440px;
  transform: translate3d(-50%, -50%, 0);
}
.head-left {
  width: 1200px;
  margin: 0 auto;
  z-index: 9;
  position: relative;
  height: 80px;
}
.part1-item1 {
  position: absolute;
  right: 80px;
  bottom: 0px;
  width: 82px;
  height: 20px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 20px;
  color: #FFFFFF;
  opacity: 1;
  z-index: 9;
}
.part1-item2:hover {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 20px;
  color: #FFFFFF;
  opacity: 1;
}
.part1-item2 {
  display: inline-block;
  width: 42px;
  height: 20px;
  position: absolute;
  right: 20px;
  bottom: 0px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 20px;
  color: #FFFFFF;
  opacity: 0.3;
  z-index: 9;
}

.my-video1 {
  height: 100%;
  width: auto;
  opacity: 1;
  margin: 0 auto;
  transition: opacity 0.5s ease;
}
.page1.play-end .my-video1 {
  opacity: 0;
  top: -1200px;
}
.my-video1 .vjs-control-bar {
  display: none;
}
/* page2 */
.page2 {
  background-image: url(../images/2_1_bg_mooon%402x.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.page2 .content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1200px;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
}
.page2 .content span {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(315deg, #019ebe 0%, #00faef 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page2 .content h3 {
  line-height: 68px;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
}
.page2 .content p {
  line-height: 26px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
}
/*  page3 */
.page3 {
  background-image: url(../images/zmjjbj.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.page3 .content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1200px;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
  opacity: 1;
  transition: opacity 1s;
  z-index: 1;
}
.page3 .content .logo {
  width: 40vw;
  margin-bottom: 48px;
}
.page3 .content h3 {
  position: relative;
  top: 200px;
  line-height: 90px;
  font-size: 64px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  opacity: 0;
  transition: all 1s;
    transition-delay: 0s;
}
.page3.swiper-slide-active .content h3 {
  opacity: 1;
  top: 0;
  transition-delay: 0.5s;
}
.page3 .content p {
  width: 1200px;
  line-height: 26px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);opacity: 0;position: relative;
  top: 200px;
  transition: all 1s;margin-top: 30px;
}
.page3.swiper-slide-active .content p{ opacity: 1;top: 0;
  transition-delay: 0.6s;}



/* page4 */
.page4 {
  position: relative;
  background-image: url(../images/page3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.page4::after {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.page4 .content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1200px;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
  opacity: 1;
  transition: opacity 1s;
  z-index: 1;
}
.page4 .content h3 {
  position: relative;
  top: 200px;
  line-height: 90px;
  font-size: 64px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  opacity: 0;
  transition: all 1s;
}
.page4 .content > p {
  position: relative;
  top: 200px;
  line-height: 26px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  opacity: 0;
  transition: all 1s;
}
.play-icon {
  position: relative;
  width: 128px;
  height: 48px;
  padding: 12px 16px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  margin: 40px auto 0;
  cursor: pointer;
  top: 200px;
  opacity: 0;
  transition: all 1s;
}
.play-icon p {
  position: relative;
  line-height: 24px;
  padding-left: 24px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}
.play-icon .icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background-image: url(../images/3_1_ic_play%402x.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.page4.swiper-slide-active .content h3 {
  opacity: 1;
  top: 0;
  transition-delay: 0.5s;
}
.page4.swiper-slide-active .content > p {
  opacity: 1;
  top: 0;
  transition-delay: 0.6s;
}
.page4.swiper-slide-active .play-icon {
  opacity: 1;
  top: 0;
  transition-delay: 0.5s;
}
.page4 .content.play-active {
  /* display: none; */
  top: -1000px;
  transition: opacity 1.5s;
  transition-delay: 0.5s;
}
.my-video-wrap-model {
  position: absolute;
  left: -100vw;
  top: 100vh;
  opacity: 0;
  z-index: 99;
  width: 100vw;
  height: 100vh;
  background: #000;
  transition: top .3s ease-in-out;
}
.my-video-wrap-model.play-active {
  left: 0;
  top: 0;
  opacity: 1;
}
.my-video-wrap-content {
  position: relative;
  top: 10%;
  width: 80%;
  height: 80%;
  margin: auto;
}
.my-video-wrap-content .my-video-icon-close {
  position: absolute;
  top: -40px;
  right: 0;
  font-size: 24px;
  position: absolute;
  margin-left: auto;
  cursor: pointer;
  z-index: 2;
}
.my-video-wrap-content .my-video-icon-close img {
  width: 21px;
  height: 21px;
}
.my-video-box,
.my-video-box .my-video2 {
  width: auto;
  height: 100%;
  margin: 0 auto;
}
/* .video-js {
  display: none;
}
.video-js.active {
  display: block;
} */
/* .my-video2 {
  height: 100%;
  width: auto;
  margin: 0 auto;
  position: relative;
  top: -1200px;
  opacity: 0;
  transition: opacity 1.5s;
}
.my-video2.play-active {
  top: 0;
  opacity: 1;
  transition-delay: 0.5s;
} */

/* page5 */
.page5 {
  background: #000;
}
.page5 .content {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
}
.page5 img.bg {
  width: 880px;
  object-fit: contain;
}
.page5 .clond-bg {
  position: absolute;
  left: 50%;
  top: 352px;
  transform: translate3d(-50%, 0, 0);
  width: 1036px;
  object-fit: contain;
}
.page5 .text-wrap {
  margin-top: 110px;
}
.page5 .text-wrap span {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(315deg, #ffe70c 0%, #cb4a73 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page5 .text-wrap h3 {
  line-height: 68px;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
}
.page5 .text-wrap p {
  line-height: 26px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
}
/* page6 */
.page6 {
  background-color: #000;
}
.page6 .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
}
.page6 img.bg {
  width: 1440px;
  object-fit: contain;
}
.page6 .text-wrap {
  position: absolute;
  left: 230px;
  top: 396px;
  text-align-last: left;
}
.page6 .text-wrap h3 {
  font-size: 64px;
  line-height: 90px;
  font-weight: 600;
  color: #fff;
}
.page6 .text-wrap p {
  line-height: 26px;
  font-size: 14px;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.8);
}
/* page7 */
.page7 {
  background-image: url(../images/5_display%402x.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.page7 .content {
  width: 768px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
}
.page7 .swiper-content-wrap,
.page7 .page7-gallery-top,
.page7-gallery-top .swiper-slide {
  width: 100%;
}
.page7-gallery-top .swiper-slide {
  height: 432px;
}
.page7-gallery-top .swiper-slide img {
  width: 100%;
  opacity: 0;
}
.page7-gallery-top .swiper-slide.ani-leave img{
  opacity: 0;
  transition: opacity 0.1s ease;
}
.page7-gallery-top .swiper-slide.swiper-slide-active img{
  opacity: 1;
  transition: opacity 0.1s ease;
  transition-delay: 0.3s;
}
.page7 .page7-gallery-thumbs {
  width: 580px;
  height: 62px;
  margin: 0 auto;
  overflow: visible;
}
.page7-gallery-thumbs .swiper-slide div {
  width: 80px;
  height: 48px;
  margin: 7px;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  background-color: #EFEFEF;
  border-radius: 12px;
}
.swiper-slide-thumb-active div {
  box-shadow: 0px 0px 16px 0px rgba(255,255,255,1), 0px 0px 4px 0px rgba(255,255,255,1), 0px 0px 2px 0px rgba(255,255,255,1);
}
.page7 .text-wrap {
  text-align: center;
}
.page7 .text-wrap span {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(315deg, #4BE38C 0%, #04CFC7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page7 .text-wrap h3 {
  line-height: 68px;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
}
.page7 .text-wrap p {
  line-height: 26px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
}

/* pae8 */
.page8 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(to bottom, #03050e 0%, #e1eeff 90%);
}
.page8 .machine {
  position: absolute;
  background-image: url(../images/6_4_machine%402x.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 320px;
  height: 120px;
  left: 50%;
  margin-left: 230px;
  transform: translate3d(-50%, 0, 0);
  top: 76%;
}
.page8-swiper-container {
  width: 100%;
  height: 100%;
}
.page8 .swiper-slide {
  position: relative;
}
.page8 .swiper-slide img {
  position: absolute;
  width: 980px;
  top: 50%;
  left: 50%;
  margin-left: 230px;
  transform: translate3d(-50%, -50%, 0);
}
/* 1440 = left(460) + right (980) */
.page8 .text-wrap {
  position: absolute;
  width: 460px;
  top: 50%;
  left: 50%;
  margin-left: -490px;
  padding-left: 100px;
  box-sizing: border-box;
  transform: translate3d(-50%, -50%, 0);
}
.page8 .text-wrap span {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(315deg, #0D81F3 0%, #FF6D1D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page8 .text-wrap h3 {
  line-height: 60px;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
}
.page8 .text-wrap p {
  line-height: 26px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
}
/* @media (max-width: 1600px) {
  .page8 .swiper-slide img {
    margin-left: 330px;
  }
  .page8 .text-wrap {
    margin-left: -390px;
  }
} */
/* page9 */
.page9 {
  background-color: #000;
}
.page9-swiper-container {
  width: 100%;
  height: 100%;
}
.page9 .swiper-slide {
  position: relative;
}
.page9 .swiper-slide img {
  position: absolute;
  width: 980px;
  top: 50%;
  left: 50%;
  margin-left: 230px;
  transform: translate3d(-50%, -50%, 0);
}
.page9 .bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 320px;
  height: 120px;
  margin-left: 230px;
  margin-top: 336px;
  background-image: url(https://img0.jmgo.com/luna_os_pc/7_img_machine%402x.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.page9 .text-wrap {
  position: absolute;
  width: 460px;
  top: 50%;
  left: 50%;
  margin-left: -490px;
  padding-left: 100px;
  box-sizing: border-box;
  transform: translate3d(-50%, -50%, 0);
}
.page9 .text-wrap span {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(315deg, #A135D4 0%, #FF3349 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page9 .text-wrap h3 {
  line-height: 60px;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
}
.page9 .text-wrap p {
  line-height: 26px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
}
.page9 .text-wrap .logo {
  width: 248px;
  height: 20px;
  margin-top: 132px;
  background-image: url(https://img0.jmgo.com/luna_os_pc/7_img_logox2%402x.png);
  background-repeat: no-repeat;
  background-size: cover;
}
/* @media (max-width: 1600px) {
  .page9 .swiper-slide img,
  .page9 .bg {
    margin-left: 330px;
  }
  .page9 .text-wrap {
    margin-left: -390px;
  }
} */
/* page10 */
.page10 {
  background-color: #000;
}
.page10-swiper-container {
  width: 100%;
  height: 100%;
}
.page10 .swiper-slide {
  position: relative;
  overflow: hidden;
}
.page10 .swiper-slide img {
  position: absolute;
  width: 980px;
  top: 50%;
  left: 50%;
  margin-left: -330px;
  transform: translate3d(-50%, -50%, 0);
}
.page10 .bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 320px;
  height: 120px;
  margin-left: -330px;
  margin-top: 336px;
  background-image: url(https://img0.jmgo.com/luna_os_pc/7_img_machine%402x.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.page10 .text-wrap {
  position: absolute;
  width: 460px;
  top: 50%;
  left: 50%;
  margin-left: 390px;
  padding-left: 100px;
  box-sizing: border-box;
  transform: translate3d(-50%, -50%, 0);
}
.page10 .text-wrap span {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.6);
  background: linear-gradient(315deg, #FFAD12 0%, #FF6D1D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page10 .text-wrap h3 {
  line-height: 60px;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
}
.page10 .text-wrap p {
  line-height: 26px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
}
.page10 .theme {
  position: absolute;
  width: 460px;
  top: 50%;
  left: 50%;
  margin-left: 390px;
  padding-left: 100px;
  box-sizing: border-box;
  transform: translate3d(-50%, -50%, 0);
  margin-top: 160px;
  font-size: 18px;
}
.page10 .theme span:first-child {
  font-weight: 600;
  color: #fff;
}
.page10 .theme span:last-child {
  font-weight: 400;
  margin-left: 8px;
  color: #6f7072;
}
/* @media (max-width: 1600px) {
  .page10 .swiper-slide img,
  .page10 .bg {
    margin-left: -430px;
  }
  .page10 .text-wrap,
  .page10 .theme {
    margin-left: 290px;
  }
} */
/* page11 */
.page11 {
  background-image: url(../images/page4.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position-y: top;
}
.page11 .content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
}
.page11 .content span {
  font-size: 64px;
  font-weight: 600;
  color: #019abc;
  line-height: 90px;
  background: linear-gradient(146deg, #00fdf1 0%, #019abc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page11 .content h3 {
  line-height: 26px;
  font-size: 14px;
  font-weight: 400;
  margin-top: 8px;
  color: rgba(0, 0, 0, 0.8);
}
.page11 .content .bg {
  height: 26px;
  margin-top: 20px;
  background-image: url(../images/page4yy.png);
  background-repeat: no-repeat;
  background-size: cover;
}
/* page12 */
.page12 .content {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
  z-index: 1;
}
.page12 .content span {
  font-size: 18px;
  font-weight: 600;
  color: #FA3351;
  line-height: 24px
}
.page12 .content h3 {
  font-size: 48px;
  line-height: 60px;
  margin: 8px 0;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
}
.page12 .content p {
  line-height: 26px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
}
.page12 .content img {
  width: 100%;
  margin-top: 46px;
}
/* page13 */
.page13 .content {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
  z-index: 1;
}
.page13 .content span {
  font-size: 18px;
  font-weight: 600;
  color: #FFA27E;
  line-height: 24px;
  margin-bottom: 8px;
}
.page13 .content h3 {
  font-size: 48px;
  line-height: 60px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
}
.page13 .content p {
  margin-top: 8px;
  line-height: 26px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
}
.page13 .content img {
  width: 980px;
  margin-top: 2px;
}

/* page14 */
.page14 img {
  position: absolute;
  width: 980px;
  top: 50%;
  left: 50%;
  margin-left: -330px;
  transform: translate3d(-50%, -50%, 0);
  z-index: 1;
}
.page14 .text-wrap {
  position: absolute;
  width: 460px;
  top: 50%;
  left: 50%;
  margin-left: 390px;
  padding-left: 100px;
  box-sizing: border-box;
  transform: translate3d(-50%, -50%, 0);
  z-index: 1;
}
.page14 .text-wrap span {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: #0DDBF3;
  margin-bottom: 8px;
}
.page14 .text-wrap h3 {
  font-size: 48px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
  line-height: 60px;
}
.page14 .text-wrap p {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 26px;
}
/* page15 */
.page15 img {
  position: absolute;
  width: 980px;
  top: 50%;
  left: 50%;
  margin-left: 330px;
  transform: translate3d(-50%, -50%, 0);
  z-index: 1;
}
.page15 .text-wrap {
  position: absolute;
  width: 460px;
  top: 50%;
  left: 50%;
  margin-left: -390px;
  padding-left: 100px;
  box-sizing: border-box;
  transform: translate3d(-50%, -50%, 0);
  z-index: 1;
}
.page15 .text-wrap span {
  font-size: 18px;
  font-weight: 600;
  color: #FEAB12;
  line-height: 24px;
  margin-bottom: 8px;
}
.page15 .text-wrap h3 {
  font-size: 48px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
  line-height: 60px;
}
.page15 .text-wrap p {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 26px;
}
.page15 .text-wrap p.first {
  margin-top: 8px;
}
/* page16 */
.page16 .page-wrap {
  position: relative;
  z-index: 1;
}
.page16 .content {
  width: 500px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
}
.page16 .content span {
  font-size: 18px;
  font-weight: 600;
  color: #A72DD6;
  line-height: 24px;
  margin-bottom: 8px;
}
.page16 .content h3 {
  font-size: 48px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
  line-height: 60px;
}
.page16 .content p {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 26px;
}
.page16 .content p.first {
  margin-top: 8px;
}
.page16 .content .bg {
  width: 440px;
  margin-top: 76px;
  transform: scale(0.2);
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
.page16 .bubs img {
  position: absolute;
  transform: scale(0.2);
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
.page16.my-active .bubs img {
  transform: scale(1);
  opacity: 1;
}
.page16.my-active .content .bg { transition-delay: 0.5s; opacity: 1; transform: scale(1);}
.page16.my-active .bubs img { object-fit: contain; }
.page16.my-active .bubs .img-item1 { transition-delay: 0.5s; width: 229px; }
.page16.my-active .bubs .img-item2 { transition-delay: 0.6s; width: 183px; }
.page16.my-active .bubs .img-item3 { transition-delay: 0.7s; width: 334px; }
.page16.my-active .bubs .img-item4 { transition-delay: 0.8s; width: 229px; }
.page16.my-active .bubs .img-item5 { transition-delay: 0.9s; width: 275px; }
.page16.my-active .bubs .img-item6 { transition-delay: 1s; width: 366px; }

.page16 .img-item1 { left: 390px; top: 338px; }
.page16 .img-item2 { left: 600px; top: 146px; }
.page16 .img-item3 { left: 585px; top: 418px; }
.page16 .img-item4 { left: -430px; top: 53px; }
.page16 .img-item5 { left: -214px; top: 223px; }
.page16 .img-item6 { left: -445px; top: 654px; }

@media (max-width: 1600px) {
  .page16 .content .bg {
    margin-top: 36px;
  }
  .page16 .img-item1 { top: 298px;}
  .page16 .img-item2 { top: 106px;}
  .page16 .img-item3 { top: 378px;}
  .page16 .img-item6 { top: 564px;}
}

/* page17 */
.page17 .swiper-slide {
  position: relative;
  overflow: hidden;
}
.page17 .content {
	 width:100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
}
.page17 .content img{
  width: 100%;
  object-fit: contain;
}
.page17 .text-wrap span {
  font-size: 18px;
  font-weight: 600;
  color: #2A91F4;
  line-height: 24px;
}
.page17 .text-wrap h3 {
  margin: 8px 0;
  font-size: 48px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
  line-height: 60px;
}
.page17 .text-wrap p {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  height: 26px;
  line-height: 26px;
}
/* page18 */
.page18{
  height: 596px;
}
.page18 .content {
  width: 980px;
  margin: 100px auto 0;
}
.page18 .content h3 {
  line-height: 68px;
  margin-bottom: 24px;
  font-size: 48px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
  text-align: center;
}
.page18 .content .img-box {
  position: relative;
  float: left;
}
.page18 .img-box .opt-box {
  position: absolute;
  right: 24px;
  bottom: 16px;
  width: 92px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  font-size: 14px;
  text-align: center;
  color: #2A91F4;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.page18 .img-box .opt-box img {
  margin-left: 4px;
  position: relative;
  top: 2px;
  width: 7px;
  height: 14px;
}
.page18 .content .img-box img {
  cursor: pointer;
}
.page18 .content .img-box:first-child {
  margin-right: 24px;
}
.page18 .content .page18-img1 {
  width: 632px;
  height: 300px;
  object-fit: cover;
}
.page18 .content .page18-img2 {
  width: 324px;
  height: 300px;
  object-fit: cover;
}
/* 头部公共样式 */
/* 公共头部导航 */
.page19 {
  height: 520px;
}


/* app-footer-right右侧联系人信息 */
.app-footer-right .info-item {
  position: relative;
  padding-left: 32px;
  margin-bottom: 26px;
  box-sizing: border-box;
  font-weight: bold;
  vertical-align: middle;
}
.app-footer-right .info-item,
.app-footer-right .info-item a {
  color: #A4A8B2;
}
.app-footer-right .info-item .title {
  height: 24px;
  line-height: 24px;
}
.app-footer-right .info-item .icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
}
.app-service-online {
  cursor: pointer;
}


/* 关于淡出动画的处理 */
.page8-swiper-container .swiper-slide img,
.page9-swiper-container .swiper-slide img,
.page10-swiper-container .swiper-slide img,
.page10-swiper-container .swiper-slide .theme
 {
  opacity: 0;
}
.page8-swiper-container .swiper-slide.ani-leave img,
.page9-swiper-container .swiper-slide.ani-leave img,
.page10-swiper-container .swiper-slide.ani-leave img,
.page10-swiper-container .swiper-slide.ani-leave .theme
{
  opacity: 0;
  transition: opacity 0.15s ease;
}
.page8-swiper-container .swiper-slide.swiper-slide-active img,
.page9-swiper-container .swiper-slide.swiper-slide-active img,
.page10-swiper-container .swiper-slide.swiper-slide-active img,
.page10-swiper-container .swiper-slide.swiper-slide-active .theme{
  opacity: 1;
  transition: opacity 0.15s ease;
  transition-delay: 0.65s;
}


/* 关于渐变背景色的处理 */
.page12,
.page13,
.page14,
.page15,
.page16 {
  background-color: #fff;
}
.page12::after,
.page13::after,
.page14::after,
.page15::after,
.page16::after {
  content: '';
  position: absolute;
  height: 50%;
  left: 0;
  right: 0;
  bottom: 0;
}
.page12::after { background: linear-gradient(180deg, #FFFFFF 0%, #c6f1fa 100%);}
.page13::after { background: linear-gradient(180deg, #FFFFFF 0%, #FFE4D4 100%);}
.page14::after { background: linear-gradient(180deg, #FFFFFF 0%, #F0F0F0 100%);}
.page15::after { background: linear-gradient(180deg, #FFFFFF 0%, #FFF8DB 100%);}
.page16::after { background: linear-gradient(180deg, #FFFFFF 0%, #EEE8F0 100%);}

/* app滚动条 */
.swiper-scrollbar-drag {
  background: #a4a8b2;
}

/* 解决闪屏问题 */
.page1 .logo1,
.video1-wrap,
.page2 .content,
.page3 .content,
.page4 .content,
.page5 .content,
.page5 .clond-bg,
.page6 .content,
.page7 .content,
.page8 .machine,
.page8 .swiper-slide img,
.page8 .text-wrap,
.page9 .swiper-slide img,
.page9 .bg,
.page9 .text-wrap,
.page10 .swiper-slide img,
.page10 .bg,
.page10 .text-wrap,
.page10 .theme,
.page11 .content,
.page12 .content,
.page13 .content,
.page14 img,
.page14 .text-wrap,
.page15 img,
.page15 .text-wrap,
.page16 .content,
.page17 .content,
.app-header {
  -webkit-backface-visibility: hidden;  
  -moz-backface-visibility: hidden;  
  -ms-backface-visibility: hidden; 
  backface-visibility: hidden;  
  -webkit-perspective: 1000;  
  -moz-perspective: 1000;  
  -ms-perspective: 1000;  
  perspective: 1000;
}

@media only screen and (max-width:1024px){
	.page11 {
  background-image: url(../images/page4.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: top;
}
	.page12 .content img {
  width: 90%;margin: 46px auto 0;
}
	.page17 .content img {
  width: 100%;
  object-fit: contain;
}
	.page-wrap {
  transform: scale(1);
}
	.page17 .content {
  top: 50%;
  left: 5%;
  transform: translate3d(0%, -50%, 0);width: 90%;
}
	.page6 img.bg {
  width: 90%;margin: 0 auto;
}
	.page6 .content {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate3d(0%, -50%, 0);width: 100%;
}
	.page6 .text-wrap {
  left: 20px;
  top: 50%;transform: translate3d(0%, -50%, 0);
}
	.page6 .text-wrap h3 {
  font-size: 44px;
  line-height: 90px;
}
	.page8 .swiper-slide img {
  width: 100%;
  top: 50%;
  left: 50%;margin-left: 0;
  transform: translate3d(-50%, -50%, 0);
}
	.page8 .machine {
  position: absolute;
  background-image: url(../images/6_4_machine%402x.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 320px;
  height: 120px;
  left: 50%;
  margin-left:0px;
  transform: translate3d(-50%, 0, 0);
  top: 76%;
}
	.page8 .text-wrap {
  position: absolute;
  width: 100%;
  top: 10%;
  left: 50%;
  margin-left: -0;
  padding-left: 0px;
  transform: translate3d(-50%, 0%, 0);text-align: center;
}
	.page8 .text-wrap h3 {
  line-height: 40px;
  font-size: 28px;
}
	.page18 .content {
  width: 90%;
  margin: 50px auto 0;
}
	.page18 .content .img-box:first-child {
  margin-right: 0;
}
	.page18 .content .page18-img1 {
  width: 100%;
  height: auto;
  object-fit: cover;
}
	.page18 .content .page18-img2 {display: none;
}
	
	
	
	
	
	
}

@media only screen and (max-width:600px){
	
	.page18 .content h3 {
  line-height: 40px;
  margin-bottom: 24px;
  font-size: 28px;
}
	.page4 .content {
  width:90%;
}
	.page4 .content h3 {
  top: 200px;
  line-height: 40px;
  font-size:28px;
}
	.page5 img.bg {
  width: 100%;
}
	.page5 .clond-bg {
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, 0, 0);
  width: 836px;
}
	.page5 .text-wrap {position: absolute;bottom:30px;left: 50%;width: 90%;
  transform: translate3d(-50%, 0, 0);margin-top: 0;
}
.page5 .content {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);height: 80%;
}	
	.page5 .text-wrap h3 {
  line-height: 40px;
  font-size:28px;
}
	.page11 .content span {
  font-size: 28px;
}
	.page12 .content h3 {
  font-size: 28px;
  line-height: 40px;
}
	.page17 .text-wrap h3 {
  margin: 8px 0 50px;
  font-size: 28px;
}
	.page6 .text-wrap h3 {
  font-size: 28px;
  line-height: 60px;
}
	.page6 .text-wrap {
  left: 20px;
  top: -30%;
  transform: translate3d(0%, 0%, 0);
}
	.page18 .content .page18-img2 {
  display: block;width: 100%
}
	.page19 {
  height: auto;
}
	
	
	
	
	
	
	
}