* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html,
body {
  height: 100%;
  overflow: hidden;
  max-width: 750px;
  margin: 0 auto;
  display: block;
  width: 100%;
  background-color: rgba(249, 236, 220, 0.3);
  color: #fff;
  font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
}
.hide {
  display: none;
}
.loads {
  width: 2.13333333rem;
  height: 2.13333333rem;
  position: absolute;
  left: 50%;
  top: 40%;
  -webkit-transform: translate(-50%, -50%);
}
.loads .loading-circle {
  width: 2.13333333rem;
  height: 2.13333333rem;
  transform-origin: 50% 50%;
  -webkit-animation: rotate 1s linear infinite;
}
#preloader {
  height: 100%;
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  background: #000;
  z-index: 101;
}
/* Music Style */
.btn-music {
  display: none;
  background: url(../images/music.png) no-repeat;
  width: 30px;
  height: 30px;
  position: fixed;
  top: 20px;
  right: 15px;
  z-index: 25;
  background-size: 30px auto;
}
.btn-musiced {
  -webkit-animation: load2 2s infinite linear;
  animation: load2 2s infinite linear;
}
/* Bottom ICon */
.btn-bottom {
  background: url(../images/bottom-icon.png) no-repeat center center;
  width: 41px;
  height: 17px;
  position: fixed;
  bottom: 15px;
  right: 0;
  left: 0;
  margin: auto;
  z-index: 25;
  background-size: 30px auto;
  -webkit-animation: tap .7s infinite linear;
  animation: tap .7s infinite linear;
}
.consume,
.visitor {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.i-page {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  text-align: center;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}
.i-page.show {
  z-index: 10;
  display: block !important;
}
.i-page.hide {
  z-index: 5;
  display: none !important;
}
.i-page.active {
  z-index: 15;
  display: block !important;
}
.i-page.autoNext {
  -webkit-animation: goNext.3s linear ;
}
.i-page.autoPrev {
  -webkit-animation: goPrev.3s linear ;
}
.flex {
  display: -webkit-box;
  /*布局方式 相当于display:flex*/
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}
.align-items-center {
  -webkit-box-align: center;
  /*box的对齐方式 align-items:center;*/
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.align-items-end {
  -webkit-box-align: end;
  /*box的对齐方式 align-items:flex-end;*/
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}
.justify-content-start {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.justify-content-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.justify-content-end {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.flex-direction-column {
  -webkit-box-orient: vertical;
  /*排列方式flex-direction: column*/
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-direction-row {
  -webkit-box-orient: horizontal;
  /*排列方式flex-direction: column*/
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}
.justify-content-between {
  -webkit-box-pack: justify;
  /* justify-content: space-between;*/
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.flex-wrap-wrap {
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}