@function torem($px) {
  @return $px / 75px * 1rem;
}

@mixin animate_forwards() {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

* {
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  margin: 0;

  font-family: helvetica;
  background: white;
  //overflow: hidden;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

body * {
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: auto
}

button,
input {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  border: none;
  background: none;
  -webkit-appearance: none;
}

input::-webkit-input-placeholder {
  /* placeholder颜色  */
  color: white;
  /* placeholder字体大小  */
  font-size: torem(24px);
  /* placeholder位置  */
  text-align: center;
}

button,
input {
  -webkit-appearance: none;
  border-radius: 0;
}

a {
  text-decoration: none;
}

input {
  outline: none;
  vertical-align: middle;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

img {
  vertical-align: middle;
}

h3,
h4,
p {
  margin: 0;
}

.left {
  float: left;
}

.right {
  float: right;
}

.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

.flex {
  display: box; /* OLD - Android 4.4- */
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex;
}

#page {
  max-width: 750px;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  background-color: #1a1e2a;
  .home {
    background: url("../image/home-bj.jpg") no-repeat center;
    background-size: 100% 100%;
    width: 100%;
    height: torem(1222px);

    position: relative;
    .content {
      width: torem(750px);
      margin: 0 auto;
      //top: torem(30px);
      position: relative;

      .bj{

        background: url("../image/bj.png") no-repeat center;
        background-size: 100% 100%;
        width: torem(750px);
        height: torem(1340px);
      }
    }
    .btn-rule, .btn-home {
      width: torem(750px);
      height: torem(68px);
      margin: 0 auto;
      position: relative;
      top: torem(980px);

    }
    .btn-home {
      height: torem(98px);
      top: torem(882px);
    }
    .city {

      width: torem(193px);
      height: torem(43px);
      position: relative;
      top: torem(940px);

      left: torem(436px);
      .city_text {
        width: torem(150px);
        height: torem(49px);
        color: black;
        text-align: center;

        line-height: torem(49px);
        font-size: torem(24px);

      }
      #area_code {
        width: torem(193px);
        height: torem(43px);
        position: absolute;
        top: 0;
        opacity: 0;
      }
    }
  }
  .page-info {
    max-width: 750px;
    img {
      width: 100%;
      display: block;
    }
  }
}