@charset "UTF-8";
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  text-align: left;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font: 14px/24px 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;
  -webkit-font-smoothing: antialiased; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, p, th, td {
  margin: 0;
  padding: 0;
  outline: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal; }

table, fieldset, img, a img {
  border: 0; }

ul, ol, li, dl, dd, dt {
  list-style: none outside none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

em, strong, th {
  font-style: normal;
  font-weight: normal; }

b, strong {
  font-weight: 600; }

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline; }

img {
  width: auto\9;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic; }

a, a:link, a:visited {
  text-decoration: none;
  display: inline-block; }

a:hover {
  text-decoration: none; }

a, a:focus {
  outline: 0; }

input, select, form img, button {
  vertical-align: middle; }

iframe {
  overflow: hidden; }

small {
  font-size: 80%; }

svg:not(:root) {
  overflow: hidden; }

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0; }

mark {
  color: #000;
  background: #ff0; }

small {
  font-size: 80%; }

sub, sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline; }

sup {
  top: -.5em; }

sub {
  bottom: -.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 1em 40px; }

img {
  vertical-align: middle; }

.fl {
  float: left;
  display: inline; }

.fr {
  float: right;
  display: inline; }

.LRwarpFl {
  float: left;
  display: inline; }

.LRwarpFr {
  float: right;
  display: inline; }

.pcfl, .ModuleFl {
  float: left;
  display: inline; }

.pcfr, .ModuleFr {
  float: right;
  display: inline; }

.mobfl {
  float: left;
  display: inline; }

.mobfr {
  float: right;
  display: inline; }

.tc {
  text-align: center; }

.tl {
  text-align: left; }

.tr {
  text-align: right; }

.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden; }

* html .clearfix {
  zoom: 1; }

.blank, .blank5, .blank1, .blank10, .blank20, .blank30 {
  clear: both;
  display: block;
  font-size: 1px;
  visibility: hidden;
  height: -1px;
  line-height: 0; }

.blank5 {
  height: 5px; }

.blank10 {
  height: 10px; }

.blank20 {
  height: 20px; }

.blank30 {
  height: 30px; }

.blank1 {
  height: 1px; }

.disno {
  display: none; }

.pcdisno {
  display: none; }

.mbdisno {
  display: none; }

.show {
  display: block; }

/*grid grid 12fen栏*/
body, .page, .pageItem, .pageWarp, .pageconitem, .pageend, .pageinfo {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #f05f5c;
  overflow: hidden; }

.pageItem, .pageconitem, .pageend, .pageinfo {
  display: none; }

.pageItem .pageWarp, .pageconitem .pageWarp, .pageend .pageWarp, .pageinfo .pageWarp {
  position: absolute;
  top: 0rem;
  left: 0rem; }

.page1 .pageWarp {
  background: url("../images/coverbg.png") center top no-repeat #f05f5c;
  background-size: 100% auto; }

.page1 .covertit1 {
  position: absolute;
  top: 0.43317rem;
  left: 0rem;
  width: 3.89851rem;
  z-index: 5;
  opacity: 0;
  -webkit-transform: translateX(-200%);
      -ms-transform: translateX(-200%);
          transform: translateX(-200%); }

.page1 .covertit2 {
  position: absolute;
  top: 1.80693rem;
  left: 0.33416rem;
  width: 1.22525rem;
  z-index: 4;
  opacity: 0;
  -webkit-transform: translateY(-200%);
      -ms-transform: translateY(-200%);
          transform: translateY(-200%); }

.page1 .covertit3 {
  position: absolute;
  top: 45%;
  left: 65%;
  z-index: 1;
  width: 2.95792rem;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-filter: blur(90px);
          filter: blur(90px); }

.page1 .covertit4 {
  position: absolute;
  bottom: 0rem;
  right: 0rem;
  z-index: 2;
  width: 3.62624rem;
  opacity: 0;
  -webkit-transform: translateX(1200%);
      -ms-transform: translateX(1200%);
          transform: translateX(1200%); }

.page1 .coverbtn {
  position: absolute;
  bottom: 0rem;
  left: 50%;
  z-index: 3;
  width: 2.04208rem;
  margin-left: -1.01485rem;
  opacity: 0;
  -webkit-transform: translateY(200%);
      -ms-transform: translateY(200%);
          transform: translateY(200%); }

.page2 .tit {
  width: 3.94802rem;
  margin-top: 0.37129rem; }

.page2 .con {
  width: 4.39356rem;
  margin: 0.37129rem auto; }

.pageconitem {
  background: #fff; }

.pageconitem .pageWarp {
  background: url("../images/qabg.png") center bottom no-repeat #fff;
  background-size: 100% auto; }

.pageconitem .tit {
  width: 3.89851rem;
  margin: 0.80446rem auto 0.24752rem; }

.pageconitem ul {
  width: 100%;
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }

.pageconitem ul li {
  width: 50%;
  min-width: 1.79455rem; }

.pageconitem ul li img {
  width: 1.79455rem;
  margin: 10px auto;
  display: block; }

.pageconitem .next {
  width: 1.36139rem;
  position: absolute;
  right: 0;
  bottom: 0; }

.pageconitem .nexttip {
  width: 2.0297rem;
  position: absolute;
  right: 1.85644rem;
  bottom: 0.37129rem; }

.pageend .pageWarp {
  background-color: #ce2d2a; }

.pageend .tit {
  width: 4.25743rem;
  position: absolute;
  top: 0;
  right: 0; }

.pageend .con {
  width: 100%;
  position: absolute;
  bottom: 0;
  right: 0; }

.pageend .info {
  width: 1.07673rem;
  position: absolute;
  bottom: 0.65594rem;
  right: 0; }

.pageend .replay {
  width: 1.41089rem;
  position: absolute;
  bottom: 0.38366rem;
  left: 0.65594rem; }

.pageend .share {
  width: 1.41089rem;
  position: absolute;
  bottom: 0.38366rem;
  left: 2.46287rem; }

.pageend .qr {
  width: 2.73515rem;
  position: absolute;
  bottom: 0.49505rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%); }

.pageend .sharetip {
  width: 2.73515rem;
  position: absolute;
  bottom: 0.12376rem;
  left: 50%;
  z-index: 2;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  text-align: center;
  color: #fff; }

.page16 {
  z-index: 9999;
  position: relative; }

.xhlogo {
  position: absolute;
  width: 0.61881rem;
  height: 0.61881rem;
  position: absolute;
  top: 0.13614rem;
  right: 0.09901rem; }

.nexttip {
  display: none; }

.show {
  display: block; }

.covertit1.anim {
  -webkit-animation: fadeInleft .5s .2s ease-in-out both;
          animation: fadeInleft .5s .2s ease-in-out both; }

.covertit2.anim {
  -webkit-animation: fadeInUp .5s .2s ease-in-out both;
          animation: fadeInUp .5s .2s ease-in-out both; }

.covertit3.anim {
  -webkit-animation: vanishIn .5s .2s ease both;
          animation: vanishIn .5s .2s ease both; }

.covertit4.anim {
  -webkit-animation: fadeInRight .5s .2s ease both;
          animation: fadeInRight .5s .2s ease both; }

.coverbtn.anim {
  -webkit-animation: fadeInDown 1s .2s  ease-in-out both;
          animation: fadeInDown 1s .2s  ease-in-out both; }

.nexttip {
  -webkit-animation: webSwipeTipAfter 1.5s infinite ease-in-out;
          animation: webSwipeTipAfter 1.5s infinite ease-in-out; }

.end {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  background: #fff;
  display: none;
  width: 100%;
  /* overflow: hidden; */ }

.end canvas {
  opacity: 0;
  pointer-events: none;
  display: none; }

.end img {
  position: absolute;
  z-index: 20;
  display: block;
  top: 0;
  width: 100%; }

.end .hint {
  text-align: center;
  font-size: 12px;
  position: absolute;
  z-index: 100;
  width: 100%;
  bottom: 0; }

.music {
  background: url("../images/mon.png") center top no-repeat;
  background-size: contain;
  width: 0.49505rem;
  height: 0.49505rem;
  position: absolute;
  top: 0.22277rem;
  right: 0.16089rem;
  z-index: 999; }

.music.off {
  background-image: url("../images/moff.png"); }

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

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

@-webkit-keyframes webSwipeTipAfter {
  0% {
    opacity: 1;
    filter: alpha(opacity=100); }
  100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translate3d(30%, 0, 0);
            transform: translate3d(30%, 0, 0); } }

@keyframes webSwipeTipAfter {
  0% {
    opacity: 1;
    filter: alpha(opacity=100); }
  100% {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translate3d(30%, 0, 0);
            transform: translate3d(30%, 0, 0); } }

@-webkit-keyframes fadeInleft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

@keyframes fadeInleft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(1200%);
            transform: translateX(1200%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(1200%);
            transform: translateX(1200%); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-200%);
            transform: translateY(-200%); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(200%);
            transform: translateY(200%); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(200%);
            transform: translateY(200%); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

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

@-webkit-keyframes vanishIn {
  0% {
    opacity: 0;
    -webkit-filter: blur(90px);
            filter: blur(90px); }
  100% {
    opacity: 1;
    -webkit-filter: blur(0px);
            filter: blur(0px); } }

@keyframes vanishIn {
  0% {
    opacity: 0;
    -webkit-filter: blur(90px);
            filter: blur(90px); }
  100% {
    opacity: 1;
    -webkit-filter: blur(0px);
            filter: blur(0px); } }

/*# sourceMappingURL=main.css.map */