/* CSS Document */
html, body {
    position: relative;
    height: 100%;
}
body{-webkit-text-size-adjust:none; background:#fff; width: 100%; height: 100%;}
*{-webkit-text-size-adjust:none; -webkit-tap-highlight-color: rgba(0,0,0,0);font-size:12px; font-family:"微软雅黑"; margin:0; padding:0; outline:none;-webkit-overflow-scrolling: touch;}
*, *::before, *::after { box-sizing: border-box;}
input,textarea,select{ font-size:100%;}ul{ list-style:none;}
a{ display:inline-block; border: medium none;display: inline-block;outline: medium none;text-decoration: none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
img{ vertical-align:top; border:none;pointer-events: none; width:100%;}
.box{width:100%; height:100%; overflow: hidden;/* max-width:750px; */margin:0 auto; position:relative;}
.rel{ position:relative;}
.abs{position:absolute; }
.clear{ clear: both;}
.main{ position:absolute; width:100%; height:100%;top: 0; left: 0;}
.load_box{ position: relative;}
.loadhint{ position: absolute; width: 100%; top: 53%; left: 0; text-align: center; font-size: 30px; color: #48076c; }
.swiper-container {
    width: 100%;
    height: 100%;
    display: none;
}
.swiper-slide {     
		overflow: hidden;
}
.arrow{  position:absolute; bottom:30px; left:50%; width:90px; margin-left:-40px; z-index:99;animation:1.5s ease 0s normal none infinite fadeInDown; -webkit-animation:1.5s ease 0s normal none infinite fadeInDown;}
.btn_pause{position:fixed; width:10%; top:20px; right:20px; z-index:99;}
.btn_play{ -webkit-transform-origin:center center;transform-origin:center center;animation:2s linear 0s normal none infinite runAround; -webkit-animation:2s linear 0s normal none infinite runAround;}

/*page1*/
.page1_item1{ width: 100%; top:3%; left: 0;}
.page1_item2{ width: 100%; top: 0; left: 0;}
.swiper-slide-active .page1_item1{animation: bounceInUp 1.5s 0.2s ease both; -webkit-animation: bounceInUp 1.5s 0.2s ease both;}
.swiper-slide-active .page1_item2{animation: bounceIn1 1s 1.3s ease both; -webkit-animation: bounceIn1 1s 1.3s ease both;}

/*page2*/
.page2_item1{ width: 100%; top:0; left: 0;}
.page2_item2{ width: 100%; top: 0; left: 0;}
.page2_item3{ width: 29.5%; top: 53.5%; left: 54%;}
.swiper-slide-active .page2_item1{animation: bounceInLeft 1s 0.2s ease both; -webkit-animation: bounceInLeft 1s 0.2s ease both;}
.swiper-slide-active .page2_item2{animation: bounceInRight 1s 1s ease both; -webkit-animation: bounceInRight 1s 1s ease both;}
.swiper-slide-active .page2_item3{animation: showInLight 0.6s 2s ease both; -webkit-animation: showInLight 0.6s 2s ease both;}
.swiper-slide-active .page2_item3.upToDown{animation:1.5s ease 0.3s normal none infinite upDown; -webkit-animation:1.5s ease 0.3s normal none infinite upDown;}
.swiper-slide-active .btn_weChat{animation: showInLight 0.2s 2s ease both; -webkit-animation: showInLight 0.2s 2s ease both;}
.btn_weChat{ position: absolute; width: 49.2%; height: 32.8%; top: 29.6%; left: 28.8%;}
.weChat_list{ display: none; position: absolute; width: 100%; top: 0; left: 0;}
.btn_showDialogue{ width: 100%; height: 10.5%; left: 0; top: 7.1%;}
.list_hover{ width: 100%; top: 0; left: 0; display: none; opacity: 0;}


.weChat_box{background: #f1f1f1; height: 100%; width: 100%; position: absolute; top: 0; left:50%; display:none; opacity: 0;}
.weChat_bottom{ position: absolute; bottom: 0; left: 0; width: 100%;}
.weChat_con{ width: 94.5%; margin: 0 auto; overflow-y: auto; position: relative;}
.weChat_time{ text-align: center; line-height: 80px; font-size: 28px; color: #ababab;}
/*.weChat_inner{ position: absolute; bottom: 0; left: 0; height: 100%; overflow-y: auto;}*/
.weChat_inner span{ display: none; width: 100%; margin: 0 0 40px 0; position: relative;}
.weChat_top{ position: relative;}
.weChat_inner .emjio i{ position: absolute; top: 40px; width: 31.5%;}
.weChat_inner .e1 i{ right: 13.9%;}
.weChat_inner .e2 i{ width: 34.1%; left: 13.9%;}
.weChat_inner .e3 i{ width: 30.4%; left: 13.9%;}
.weChat_inner .e4 i{ width: 25.7%; left: 13.9%;}
.weChat_inner .e5 i{ width: 34.7%; right: 13.9%;}
.weChat_inner .e6 i{ width: 38.3%; left: 13.9%;}
.weChat_inner .e7 i{ width: 26.4%; left: 13.9%;}
.weChat_inner .e8 i{ width: 30.2%; left: 13.9%;}
.weChat_inner .e9 i{ width: 37.8%; right: 13.9%;}
.weChat_inner span.active{ display: block;}
.weChat_name{ font-size: 30px; top: 21%; left: 10%;}
.weChat_name1{ font-size: 30px; top: 21px; left: 30px;}

/*page3*/
.page3_item1{ width: 100%; left: 0; top: 27.3%;}
.page3_item2{ width: 100%; left: 0; top: 42%;}
.page3_item3{ width: 100%; left: 0; top: 56.9%;}
.swiper-slide-active .page1_item1{animation: bounceInUp 1.5s 0.2s ease both; -webkit-animation: bounceInUp 1.5s 0.2s ease both;}
.swiper-slide-active .page3_item1{animation: fadeInDown2 0.8s 1.3s ease both; -webkit-animation: fadeInDown2 0.8s 1.3s ease both;}
.swiper-slide-active .page3_item2{animation: fadeInDown2 0.8s 1.5s ease both; -webkit-animation: fadeInDown2 0.8s 1.8s ease both;}
.swiper-slide-active .page3_item3{animation: fadeInDown2 0.8s 2.3s ease both; -webkit-animation: fadeInDown2 0.8s 2.3s ease both;}

/*page4*/
.page4_item1{ width: 100%; left: 0; top: 29.1%;}
.page4_item2{ width: 100%; left: 0; top: 51.9%;}
.swiper-slide-active .page1_item1{animation: bounceInUp 1.5s 0.2s ease both; -webkit-animation: bounceInUp 1.5s 0.2s ease both;}
.swiper-slide-active .page4_item1{animation: showInTurn 0.6s 1.3s ease-out both; -webkit-animation: showInTurn 0.6s 1.3s ease-out both;}
.swiper-slide-active .page4_item2{animation: showInTurn 0.6s 1.9s ease-out both; -webkit-animation: showInTurn 0.6s 1.9s ease-out both;}

/*page5*/
.page5_item1{ width: 77%; left:11.3%; top: 28.5%;}
.page5_item2{ width: 77%; left:11.3%; top: 37.7%;}
.page5_item3{ width: 77%; left:11.3%; top: 47%;}
.page5_item4{ width: 59.6%; left: 20.9%; top: 63.2%;}
.swiper-slide-active .page1_item1{animation: bounceInUp 1.5s 0.2s ease both; -webkit-animation: bounceInUp 1.5s 0.2s ease both;}
.swiper-slide-active .page5_item1{animation: lightSpeedIn 1s 1.3s ease-out both; -webkit-animation: lightSpeedIn 1s 1.3s ease-out both;}
.swiper-slide-active .page5_item2{animation: lightSpeedIn 1s 1.8s ease-out both; -webkit-animation: lightSpeedIn 1s 1.8s ease-out both;}
.swiper-slide-active .page5_item3{animation: lightSpeedIn 1s 2.3s ease-out both; -webkit-animation: lightSpeedIn 1s 2.3s ease-out both;}
.swiper-slide-active .page5_item4{animation: wobble 1s 3s ease both; -webkit-animation: wobble 1s 3s ease both;}
.page5_input{ position: absolute; width: 62.4%; min-height: 40px; height: 58.2%; left: 33.4%; top: 23%; font-size: 28px; color: #fff; font-weight: bold; background: none; border: none;}


/*page6*/
.page5_success{ display: none;}
.page5_success{ width: 100%; left:0%; top: 0%;}
.swiper-slide-active .page1_item1{animation: bounceInUp 1.5s 0.2s ease both; -webkit-animation: bounceInUp 1.5s 0.2s ease both;}
.active.page5_success{animation: lightSpeedIn 1s 0.1s ease-out both; -webkit-animation: lightSpeedIn 1s 0.1s ease-out both;}

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}


@-webkit-keyframes showInTurn {
  0%{opacity: 1;-webkit-transform:scale(0,1);}
  60% {opacity: 1;-webkit-transform:scale(1);}
  80% {opacity: 1;-webkit-transform:scale(0.9,1);}
  100% {opacity: 1;-webkit-transform:scale(1);}
}

@keyframes showInTurn {
  0%{opacity: 1;transform:scale(0,1);}
  60% {opacity: 1;transform: scale(1);}
  80% {opacity: 1;transform: scale(0.9,1);}
  100% {opacity: 1;transform: scale(1);}
}

@-webkit-keyframes runAround {
	from{-webkit-transform:rotate(0deg)}
	to{-webkit-transform:rotate(360deg)}
}

@keyframes runAround { 
    from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}
}
@-webkit-keyframes fadeInDown {
	0%,30% { opacity: 0; -webkit-transform: translate3d(0,10px,0);}
    60% { opacity: 1; -webkit-transform: translate3d(0,0,0); }
    100% { opacity: 0; -webkit-transform: translate3d(0,-10px,0);}
}


@keyframes fadeInDown { 
    0%,30% { opacity: 0; transform: translate3d(0,10px,0);}
    60% { opacity: 1; transform: translate3d(0,0,0); }
    100% { opacity: 0; transform: translate3d(0,-10px,0);}
}

@-webkit-keyframes fadeInDown2 {
	0% { opacity: 0; -webkit-transform: translate3d(0,30px,0);}
    100% { opacity: 1; -webkit-transform: translate3d(0,0,0); }
}


@keyframes fadeInDown2 { 
    0% { opacity: 0; transform: translate3d(0,30px,0);}
    100% { opacity: 1; transform: translate3d(0,0,0); }
}


@-webkit-keyframes bounceIn1 {
  0% {opacity: 0;-webkit-transform: scale3d(.3, .3, .3);transform: scale3d(.3, .3, .3); }
  25% {-webkit-transform: scale3d(1.1, 1.1, 1.1);transform: scale3d(1.1, 1.1, 1.1);}
  50% {-webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9);  }
  75% {opacity: 1;-webkit-transform: scale3d(1.03, 1.03, 1.03);transform: scale3d(1.03, 1.03, 1.03);}
  /*80% {-webkit-transform: scale3d(.97, .97, .97);transform: scale3d(.97, .97, .97);}*/
  100% { opacity: 1;-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1); }
}

@keyframes bounceIn1 {
  0% { opacity: 0;-webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3);}
  25% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1);}
  50% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); }
  75% {opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03);}
/*  80% {-webkit-transform: scale3d(.97, .97, .97);transform: scale3d(.97, .97, .97);}*/
  100% { opacity: 1;-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}
}

@keyframes wobble {
0%{
	opacity: 0;
    transform: none;
}
15% {
    transform: translate3d(-25%, 0px, 0px) rotate3d(0, 0, 1, -4deg);
}
30% {
    transform: translate3d(20%, 0px, 0px) rotate3d(0, 0, 1, 2deg);
}
45% {
    transform: translate3d(-15%, 0px, 0px) rotate3d(0, 0, 1, -3deg);
}
60% {
    transform: translate3d(10%, 0px, 0px) rotate3d(0, 0, 1, 2deg);
}
75% {
    transform: translate3d(-5%, 0px, 0px) rotate3d(0, 0, 1, -1deg);
}
100% {
	opacity: 1;
    transform: none;
}
}
@-webkit-keyframes wobble {
0%{
	opacity: 0;
    -webkit-transform: none;
}
15% {
    -webkit-transform: translate3d(-25%, 0px, 0px) rotate3d(0, 0, 1, -4deg);
}
30% {
    -webkit-transform: translate3d(20%, 0px, 0px) rotate3d(0, 0, 1, 2deg);
}
45% {
    -webkit-transform: translate3d(-15%, 0px, 0px) rotate3d(0, 0, 1, -3deg);
}
60% {
    -webkit-transform: translate3d(10%, 0px, 0px) rotate3d(0, 0, 1, 2deg);
}
75% {
    -webkit-transform: translate3d(-5%, 0px, 0px) rotate3d(0, 0, 1, -1deg);
}
100% {
	opacity: 1;
    -webkit-transform: none;
}
}

@keyframes bounceInUp {
0%, 100%, 60%, 75%, 90% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
    opacity: 0;
    transform: translate3d(0px, -800px, 0px);
}
40% {
    opacity: 1;
    transform: translate3d(0px, 25px, 0px);
}
55% {
    transform: translate3d(0px, -10px, 0px);
}
70% {
    transform: translate3d(0px, 5px, 0px);
}
100% {
    transform: none;
}
}
@-webkit-keyframes  bounceInUp {
0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
    opacity: 0;
    -webkit-transform: translate3d(0px, -800px, 0px);
}
40% {
    opacity: 1;
    -webkit-transform: translate3d(0px, 25px, 0px);
}
55% {
    -webkit-transform: translate3d(0px, -10px, 0px);
}
70% {
    -webkit-transform: translate3d(0px, 5px, 0px);
}
100% {
    -webkit-transform: none;
}
}

@keyframes bounceInDown {
0%, 100%, 60%, 75%, 90% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
    opacity: 0;
    transform: translate3d(0px, 300px, 0px);
}
40% {
    opacity: 1;
    transform: translate3d(0px, 25px, 0px);
}
55% {
    transform: translate3d(0px, -10px, 0px);
}
70% {
    transform: translate3d(0px, 5px, 0px);
}
100% {
    transform: none;
}
}
@-webkit-keyframes  bounceInDown {
0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
    opacity: 0;
    -webkit-transform: translate3d(0px, 300px, 0px);
}
40% {
    opacity: 1;
    -webkit-transform: translate3d(0px, 25px, 0px);
}
55% {
    -webkit-transform: translate3d(0px, -10px, 0px);
}
70% {
    -webkit-transform: translate3d(0px, 5px, 0px);
}
100% {
    -webkit-transform: none;
}
}

@keyframes bounceInLeft {
0%, 100%, 60%, 75%, 90% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
    opacity: 0;
    transform: translate3d(-3000px, 0px, 0px);
}
60% {
    opacity: 1;
    transform: translate3d(25px, 0px, 0px);
}
75% {
    transform: translate3d(-10px, 0px, 0px);
}
90% {
    transform: translate3d(5px, 0px, 0px);
}
100% {
    transform: none;
}
}
@-webkit-keyframes  bounceInLeft {
0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0px, 0px);
}
60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0px, 0px);
}
75% {
    -webkit-transform: translate3d(-10px, 0px, 0px);
}
90% {
    -webkit-transform: translate3d(5px, 0px, 0px);
}
100% {
    -webkit-transform: none;
}
}

@keyframes bounceInRight {
0%, 100%, 60%, 75%, 90% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
    opacity: 0;
    transform: translate3d(3000px, 0px, 0px);
}
60% {
    opacity: 1;
    transform: translate3d(-25px, 0px, 0px);
}
75% {
    transform: translate3d(10px, 0px, 0px);
}
90% {
    transform: translate3d(-5px, 0px, 0px);
}
100% {
    transform: none;
}
}
@-webkit-keyframes bounceInRight {
0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0px, 0px);
}
60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0px, 0px);
}
75% {
    -webkit-transform: translate3d(10px, 0px, 0px);
}
90% {
    -webkit-transform: translate3d(-5px, 0px, 0px);
}
100% {
    -webkit-transform: none;
}
}

@-webkit-keyframes showInLight {
  0%{opacity: 0;-webkit-transform: translate3d(50px,0,0);}
  100% {opacity: 1;-webkit-transform: translate3d(0,0,0);}
  
}

@keyframes showInLight {
  0%{opacity: 0;transform: translate3d(50px,0,0);}
  100% {opacity: 1;transform: translate3d(0,0,0);}
}

@-webkit-keyframes upDown{
0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
40%{-webkit-transform:translateY(-20px)}
60%{-webkit-transform:translateY(-13px)}
}
@keyframes upDown{
0%,20%,50%,80%,100%{transform:translateY(0)}
40%{transform:translateY(-20px)}
60%{transform:translateY(-13px)}
}


@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}