@charset "UTF-8";
/**
 * 样式主文件
 */
/**
 * 常用的 mixins
 */
/**
 * Mixins
 */
/**
 * 引用图片，自动获取图片的宽高
 * @param  {string} $name [图片相对于img目录的位置]
 */
/**
 * 引用图片，自动获取图片的宽高
 * @param  {string} $url [图片的路径]
 */
/**
 * 引用图片，自动获取图片的宽高
 * 但不设置背景
 * @param  {string} $url [图片的路径]
 */
/**
 * 引用图片，自动获取图片的宽高
 * absolute, 修改margin-left使图片水平居中
 * @param  {string} $url [图片的路径]
 */
/**
 * 引用图片，自动获取图片的宽高
 * absolute, 修改margin-left使图片水平居中
 * 不设置背景
 * @param  {string} $url [图片的路径]
 */
/**
 * 引用图片，自动获取图片的宽高
 * absolute, 修改margin-top使图片垂直居中
 * @param  {string} $url [图片的路径]
 */
/**
 * 引用图片，自动获取图片的宽高
 * absolute, 修改margin-top使图片垂直居中
 * 不设置背景
 * @param  {string} $url [图片的路径]
 */
/**
 * 引用图片，自动获取图片的宽高
 * absolute, 修改margin-top margin-left使图片水平垂直居中
 * @param  {string} $url [图片的路径]
 */
/**
 * 引用图片，自动获取图片的宽高
 * absolute, 修改margin-top margin-left使图片水平垂直居中
 * 不设置背景
 * @param  {string} $url [图片的路径]
 */
/**
 * 引用图片，自动获取图片的 background-size
 * @param  {string} $url [图片的路径]
 */
/**
 * 文本截断 - text ellipsis
 * @param  {integer} $num [文本截断的行数]
 */
/**
 * 清除浮动
 */
/**
 * 隐藏滚动条
 */
/**
 * 1像素边框
 * @param  {string} $position [边框位置，取值：top, bottom, left, right, full]
 * @param  {string} $borderColor [边框颜色]
 * @param  {number} $raidus [圆角]
 *
 * 例子：
 *   @include border(top, #ddd);
 *   @include border(full, #ddd, 2px);
 */
/**
  * 页面的基础样式，包括样式重置
  */
/**
 * 样式重置
 */
* {
  -webkit-tap-highlight-color: transparent;
  outline: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

img {
  border: 0 none;
  vertical-align: top;
}

i,
em {
  font-style: normal;
}

ol,
ul {
  list-style: none;
}

input,
select,
button,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-family: inherit;
}

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

a {
  text-decoration: none;
  color: #666;
}

body {
  position: relative;
  margin: 0 auto;
  width: 750px;
  height: 100%;
  font-size: 14px;
  font-family: -apple-system, Helvetica, "Microsoft YaHei", Arial, sans-serif;
  line-height: 1.5;
  color: #fff;
  -webkit-text-size-adjust: 100% !important;
     -moz-text-size-adjust: 100% !important;
      -ms-text-size-adjust: 100% !important;
          text-size-adjust: 100% !important;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

input[type="text"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

html {
  width: 100%;
  height: 100%;
}

/**
 * 状态类
 */
.hide {
  display: none !important;
}

body {
  background-color: #FFF;
  overflow: hidden;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1500px;
  overflow: hidden;
}

.hcenter {
  position: absolute;
  left: 50%;
  -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
}

.vcenter {
  position: absolute;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
          transform: translate3d(0, -50%, 0);
}

.scrolly {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ab-element {
  position: absolute;
}

.trans-bg {
  background: rgba(0, 0, 0, 0.85);
}

.overlayer {
  z-index: 99;
}

.invisible {
  visibility: hidden;
}

.hvcenter {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}

.wrapper-x {
  position: absolute;
  width: 750px;
  height: 1454px;
}

.wrapper-1096 {
  position: absolute;
  width: 750px;
  height: 1096px;
  background: rgba(255, 0, 0, 0.25);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.wrapper-contents {
  position: absolute;
  top: 50%;
  width: 750px;
  height: 1096px;
  margin-top: -548px;
  background: rgba(255, 0, 0, 0.25);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.loading .loader {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  -webkit-flex-basis: 25%;
      -ms-flex-preferred-size: 25%;
          flex-basis: 25%;
  max-width: 25%;
  height: 200px;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@-webkit-keyframes square-spin {
  25% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
            transform: perspective(100px) rotateX(180deg) rotateY(0);
  }
  50% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
            transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }
  75% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
            transform: perspective(100px) rotateX(0) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
    transform: perspective(100px) rotateX(0) rotateY(0);
  }
}

@keyframes square-spin {
  25% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
            transform: perspective(100px) rotateX(180deg) rotateY(0);
  }
  50% {
    -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
            transform: perspective(100px) rotateX(180deg) rotateY(180deg);
  }
  75% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
            transform: perspective(100px) rotateX(0) rotateY(180deg);
  }
  100% {
    -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
    transform: perspective(100px) rotateX(0) rotateY(0);
  }
}

.square-spin > div {
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  width: 50px;
  height: 50px;
  background: #ffffff;
  -webkit-animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
          animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}

#load-content {
  font-size: 36px;
}

#music-control {
  position: absolute;
  bottom: 0px;
  left: 0px;
  margin: 25px 21px;
  width: 52px;
  height: 52px;
  background-size: 52px 52px;
  background-image: url("../images/music-icon.png?1");
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  z-index: 10;
}

#music-control.on {
  -webkit-animation: rotateCW 3s linear infinite;
          animation: rotateCW 3s linear infinite;
}

@-webkit-keyframes rotateCW {
  0% {
    -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
            transform: rotate(0deg) translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: rotate(360deg) translate3d(0, 0, 0);
            transform: rotate(360deg) translate3d(0, 0, 0);
  }
}

@keyframes rotateCW {
  0% {
    -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
            transform: rotate(0deg) translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: rotate(360deg) translate3d(0, 0, 0);
            transform: rotate(360deg) translate3d(0, 0, 0);
  }
}

 

#page1 {
  background: #f20456;
}

#page1-el {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  background: #fff;
}

#page2 {
  background: #00a1f0;
}

#page2-el {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  background: #fff;
  border-radius: 50%;
}

/* 部分全面屏手机 */
/* iPhone X */

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