@charset "UTF-8";
.footer{
  display: none;
}
#app {
  width: 100%;
  min-width: 320px;
  max-width: 750px;
  margin: 0 auto;
}
.section1 {
  height: 10.8rem;
  background: url(/m/images/v4/bg1.jpg) no-repeat center;
  background-size: 100% 10.8rem;
  position: relative;
}
.section1 .menu {
  position: absolute;
  width: 1.81rem;
  height: 0.6rem;
  right: 0;
  top: 0.2rem;
  background: url(/m/images/v4/menu.png);
  background-size: cover;

  -webkit-transform: translateX(120%);
  transform: translateX(120%);

  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;

  -webkit-transition-duration: 0.6s;
  transition-duration: 0.6s;
}
.section1 .menu a {
  display: block;
  height: 50%;
}
.section1 .video-btn {
  position: absolute;
  left: 50%;
  top: 4.55rem;
  transform: translateX(-50%);
  width: 1.34rem;
  height: 1.36rem;
  background: url(/m/images/v4/video-btn.png);
  background-size: cover;
  -webkit-animation: fadeIn 2s infinite linear;
  animation: fadeIn 2s infinite linear;
}
.section1 .img819 {
  position: absolute;
  left: 50%;
  top: 5.8rem;
  width: 6.77rem;
  margin-left: -3.39rem;

  opacity: 0;

  -webkit-transform: scale(5);
  transform: scale(5);

  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;

  -webkit-transition-duration: 1s;
  transition-duration: 1s;
}
.section1 .dd {
  position: absolute;
  left: 50%;
  top: 8.8rem;
  margin-left: -1.84rem;

  -webkit-transform: translateY(2rem);
  transform: translateY(2rem);

  opacity: 0;

  -webkit-transition-delay: 0.45s;
  transition-delay: 0.45s;

  -webkit-transition-duration: 0.6s;
  transition-duration: 0.6s;
}
.section1 .dd a {
  display: block;
  width: 3.67rem;
  height: 1.14rem;
  background: url(/m/images/v4/buttonjl.png);
  background-size: cover;
}

.section1 .gw-btn {
  position: absolute;
  top: 0.3rem;
  right: 0;
  width: 1.45rem;
  height: 0.48rem;
  background: url(/m/images/v3/gw-btn.png) no-repeat;
  background-size: cover;
}
.logo {
  position: absolute;
  top: 0.2rem;
  left: 50%;
  width: 3.12rem;
  height: 1.68rem;
  margin-left: -1.56rem;
  background: url(/m/images/v4/logo.png) no-repeat;
  background-size: cover;

  -webkit-transform: translateY(-220%);
  transform: translateY(-220%);

  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;

  -webkit-transition-duration: 0.6s;
  transition-duration: 0.6s;
}

.on .dd,.on .img819,.on .menu,.on .logo{
  -webkit-transform: translate(0,0) scale(1);
  transform: translate(0,0) scale(1);
  opacity: 1;
}

.section3 {
  height: 9.91rem; position: relative;
  background: url(/m/images/v4/bg3.jpg) no-repeat no-repeat center;
  background-size: cover;
  overflow: hidden;
}
.section3 .tt {
  display: block;
  width: 100%;
  padding-top: 0.5rem;
}
.clr{
  display: block; clear: both; height: 0.2rem; overflow: hidden;
}

.baoxiang{
  position: absolute; width: 5.04rem; height: 5.11rem; top: 2.95rem; left: 50%; margin-left: -2.52rem; padding:2.2rem 0 0 0.44rem; font-size: 0.26rem;
  background: url(/m/images/v4/baox.png) no-repeat;
  background-size: cover;

  -webkit-transform: translateY(120%);
  transform: translateY(120%);

  opacity: 0;

  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;

  -webkit-transition-duration: 0.6s;
  transition-duration: 0.6s;
}

.on .baoxiang{
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.t{
  float: left; display: inline; width: 1.12rem; height: 0.3rem; text-align: center; line-height: 0.32rem; background: url(/m/images/v4/t.png) no-repeat;  background-size: cover; color: #fff; font-size: 0.2rem;
}
.p{
  float: left; display: inline; width: 2.9rem; margin-left: 0.1rem;
}
.lookxq{
  display: block; width: 2.41rem; height: 0.61rem; background: url(/m/images/v4/lookxq.png) no-repeat;  background-size: cover; margin: 0 0 0 0.9rem;
}


.section4 {
  margin-top: 1.8rem;
  height: 11.12rem;
  background: url(/m/images/v4/bg4.jpg) no-repeat center;
  background-size: cover;
  position: relative;
}
.section4 .tt {
  position: absolute;
  top: -1.4rem;
  width: 100%;
}
.asbtn{
  width: 6.8rem; padding:0.8rem 0 0; margin: 0 auto;
}
.asbtn a{
  float: left; display: inline; position: relative; width: 3.5rem; height: 2.18rem; margin-bottom: 0.2rem;

  -webkit-transform: translateY(120%);
  transform: translateY(120%);

  -webkit-transition-duration: 0.6s;
  transition-duration: 0.6s;

  opacity: 0;
}
.asbtn a.a2,.asbtn a.a4,.asbtn a.a6,.asbtn a.a8{
  width: 3.3rem;
}
.asbtn a::after{
  content: '';
  position: absolute; width: 3.5rem; height: 2.18rem; background: url(/m/images/v4/08.png) no-repeat;  background-size: 7.04rem 9.27rem;
}

.asbtn a.a1{
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
.asbtn a.a2{
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}
.asbtn a.a3{
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}
.asbtn a.a4{
  -webkit-transition-delay: 0.45s;
  transition-delay: 0.45s;
}
.asbtn a.a5{
  -webkit-transition-delay: 0.55s;
  transition-delay: 0.55s;
}
.asbtn a.a6{
  -webkit-transition-delay: 0.65s;
  transition-delay: 0.65s;
}
.asbtn a.a7{
  -webkit-transition-delay: 0.75s;
  transition-delay: 0.75s;
}
.asbtn a.a8{
  -webkit-transition-delay: 0.75s;
  transition-delay: 0.75s;
}


.asbtn a.a1::after{
  background-position: 0 0;
}
.asbtn a.a2::after{
  background-position: right 0; left: -0.2rem;
}
.asbtn a.a3::after{
  background-position: 0 -2.36rem;
}
.asbtn a.a4::after{
  background-position: right -2.36rem; left: -0.2rem;
}
.asbtn a.a5::after{
  background-position: 0 -4.73rem;
}
.asbtn a.a6::after{
  background-position: right -4.73rem; left: -0.2rem;
}
.asbtn a.a7::after{
  background-position: 0 bottom;
}
.asbtn a.a8::after{
  background-position: right bottom; left: -0.2rem;
}

.on .asbtn a{
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}




.section6 {
  height: 11.3rem;
  background: url(/m/images/v3/bg6.jpg) no-repeat center;
  background-size: 100% 11.32rem;
  overflow: hidden;
  position: relative;
}
.section6 .tt {
  display: block;
  width: 100%;
  padding-top: 1.2rem;
}
.section6 .swiper-container {
  width: 5.94rem;
  margin-top: 0.6rem;
}
.section6 .swiper-container .swiper-slide {
  width: 3.74rem;
}
.section6 .swiper-container .swiper-slide img {
  display: block;
  width: 3.74rem;
  border: 0.02rem solid #fff;
}
.section6 .swiper-pagination {
  width: 100%;
  text-align: center;
  margin-top: 0.5rem;
}
.section6 .swiper-pagination-bullet {
  width: 0.14rem;
  height: 0.1rem;
  border: 0.01rem solid #007aff;
  border-radius: 0;
  background-color: transparent;
  opacity: 1;
  margin: 0 0.05rem;
  vertical-align: middle;
}
.section6 .swiper-pagination-bullet-active {
  width: 0.24rem;
  height: 0.14rem;
  background: #007aff;
  vertical-align: middle;
}
.section6 .swiper-button-prev {
  width: 0.4rem;
  height: 0.77rem;
  left: 0.2rem;
  background: url(/images/v3/left-btn.png);
  background-size: cover;
}
.section6 .swiper-button-next {
  width: 0.4rem;
  height: 0.77rem;
  right: 0.2rem;
  background: url(/images/v3/right-btn.png);
  background-size: cover;
}
.section7 {
  background: #201c28;
  padding: 0.3rem;
  font-size: 0;
  display: flex;
  justify-content: space-around;
}
.section7 .wx,
.section7 .wb,
.section7 .qq {
  width: 1.72rem;
}
.section7 .wx .wx-txt,
.section7 .wb .wx-txt,
.section7 .qq .wx-txt,
.section7 .wx .wb-txt,
.section7 .wb .wb-txt,
.section7 .qq .wb-txt {
  display: block;
  width: 1.26rem;
  margin: 0 auto 0.24rem;
}
.section7 .wx .wx-img,
.section7 .wb .wx-img,
.section7 .qq .wx-img,
.section7 .wx .wb-img,
.section7 .wb .wb-img,
.section7 .qq .wb-img {
  display: block;
  width: 1.72rem;
  border: 1px solid #328cf5;
}
.section7 .qq img {
  display: block;
  width: 1.25rem;
  margin: 0 auto 0.24rem;
}
.section7 .qq p {
  color: #3392ff;
  font-size: 0.24rem;
  line-height: 0.4rem;
  text-align: center;
}
.section7 .qq .jiaqun {
  display: block;
  width: 1.82rem;
  height: 0.43rem;
  margin-top: 0.1rem;
  background: url('/m/images/v3/15711943451872.png');
  background-size: cover;
}
.cover,
.share-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999;
  display: none;
}
.cover .share-img,
.share-popup .share-img {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 5.94rem;
}
.tk {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6.28rem;
  height: 5.96rem;
  background: url(/images/v3/popup-bg.png);
  background-size: cover;
  z-index: 1000;
  display: none;
}

.xq-tk{
  width: 7.17rem; height: 5.44rem; background-image: url(/m/images/v4/tcc1.png);
}

.fuli-tk{
  width: 6.77rem; height: 5.45rem; background-image: url(/m/images/v4/tcc2.png); color:#fff;
}
.fuli-tk .close-btn{
  position: absolute; width: 0.96rem; height: 0.96rem; left: 50%; bottom: -1.38rem; margin-left: -0.48rem; background: url(/m/images/v4/close.png) no-repeat;  background-size: cover;
}
.title{
  display: block; height: 0.44rem; line-height: 0.44rem; text-align: center; font-size: 0.28rem;
}
.title2{
  display: block; height: 1.14rem; line-height: 1.14rem; text-align: center; font-size: 0.32rem; color:#ffcc00; margin-bottom: 0.4rem; font-weight: bold;
}
.t2{
  float: left; display: inline; width: 1.41rem; height: 0.34rem; margin-left: 0.9rem; text-align: center; line-height: 0.34rem; background: url(/m/images/v4/t2.png) no-repeat;  background-size: cover; color: #fff; font-size: 0.22rem;
}
.p2{
  float: left; display: inline; width: 3.6rem; margin-left: 0.1rem; line-height: 0.38rem; font-size: 0.28rem;
}
.fuli-tk .clr{ height: 0.4rem;}
@keyframes fadeIn {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.1);
  }
}


/*加载*/
#fbs{
  width: 10em;
  height: 10em;
  line-height: 10em;
  position: absolute;
  text-align: center;
  font-size: 20px;
  left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
}

#loading_percent{ display:block; width:100%; height:100px; }
#loadingbg{ position:fixed; width:100%; height:100%; background:#041820; top:0; left:0; color:#fff; font-size:0.24rem; z-index: 1111; }
#loading{ width:100%; height:100%; position:absolute; left:0; top:0; }
  .egg{ position: absolute; width: 200px; height: 200px; left: 50%; top: 50%; transform: translate(-50%,-110%); }

.loader{
    --size: 32px;
    --duration: 800ms;
    width: 96px;
    height: 64px;
    margin: 50px auto;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
    position: relative;
}
.loader .box{
    width:  32px;
    height: 32px;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
}
.loader .box:nth-child(1){
    transform: translate(100%, 0);
    animation: box1 800ms linear infinite;
}
.loader .box:nth-child(2){
    transform: translate(0, 100%);
    animation: box2 800ms linear infinite;
}
.loader .box:nth-child(3){
    transform: translate(100%, 100%);
    animation: box3 800ms linear infinite;
}
.loader .box:nth-child(4){
    transform: translate(200%, 0);
    animation: box4 800ms linear infinite;
}
.loader .box > div{
    --translateZ: calc(var(--size) / 2);
    --rotateY: 0deg;
    --rotateX: 0deg;
    background: #5c8df6;
    width: 100%;
    height: 100%;
    transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
    position: absolute;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
}
.loader .box > div:nth-child(1){
    top: 0;
    left: 0;
}
.loader .box > div:nth-child(2){
    background: #145af2;
    right: 0;
    --rotateY: 90deg;
}
.loader .box > div:nth-child(3){
    background: #447cf5;
    --rotateX: -90deg;
}
.loader .box > div:nth-child(4){
    background: #dbe3f4;
    top: 0;
    left: 0;
    --translateZ: calc(var(--size) * 3 * -1);
}
@keyframes box1{
    0%, 50%{ transform: translate(100%, 0); }
    100%{ transform: translate(200%, 0); }
}
@keyframes box2{
    0%{ transform: translate(0, 100%); }
    50%{ transform: translate(0, 0); }
    100%{ transform: translate(100%, 0); }
}
@keyframes box3{
    0%, 50%{ transform: translate(100%, 100%); }
    100%{ transform: translate(0, 100%); }
}
@keyframes box4{
    0%{ transform: translate(200%, 0); }
    50%{ transform: translate(200%, 100%); }
    100%{ transform: translate(100%, 100%); }