@charset "UTF-8";
@import "easy_animation";
@import "compass";

$my-browser-default-font-size: 20px !default;
//变量的值可以根据自己需求定义
$max-width: 640px !default;
$body-width: 640px !default;
$body-height: 1008px !default;
$container-body-width: 640px !default;
$container-body-height: 1008px !default;
$use-rem: false !default;

@function torem($px) {
  //$px为需要转换的字号
  //@return $px / $my-browser-default-font-size * 1rem;
  //@return $px / 20px * 1rem;
  @return $px;
}

@function tounit($px) {
  @if $px == 0px {
    @return 0rem;
  }
  @if $px == 0 {
    @return 0;
  }
  @if $use-rem {
    @return torem($px);
  } @else {
    @return $px;
  }
}

@function borderPX($center,$width) {
  @return $center - $width / 2;
}
@mixin size($w, $h) {
  width: tounit($w);
  height: tounit($h);
}
@mixin point($x, $y) {
  left: tounit($x);
  top: tounit($y);
}

@mixin rect($x, $y, $w, $h) {
  left: tounit($x);
  top: tounit($y);
  width: tounit($w);
  height: tounit($h);
}

@mixin character($fontSize, $lineHeight,$textAli, $color) {
  font-size: $fontSize;
  line-height: $lineHeight;
  color: $color;
  text-align: $textAli;
}

@mixin bounds_by_abs($x, $y, $w, $h) {
  position: absolute;
  display: inline-block;
  left: tounit($x);
  top: tounit($y);
  width: tounit($w);
  height: tounit($h);
}

@mixin image_left_top_abs($img, $x, $y) {
  position: absolute;
  display: inline-block;
  left: tounit($x);
  top: tounit($y);
  background: url(unquote($img)) left top no-repeat;
  background-size: 100% 100%;
  width: tounit(image_width($img));
  height: tounit(image_height($img));
}
@mixin image_right_top_abs($img, $x, $y) {
  position: absolute;
  display: inline-block;
  right: tounit($x);
  top: tounit($y);
  background: url(unquote($img)) left top no-repeat;
  background-size: 100% 100%;
  width: tounit(image_width($img));
  height: tounit(image_height($img));
}

@mixin image_left_mtop_abs($img, $x, $centerY) {
  position: absolute;
  display: inline-block;
  left: tounit($x);
  top: borderPX($centerY, image_height($img));
  background: url(unquote($img)) left top no-repeat;
  background-size: 100% 100%;
  width: tounit(image_width($img));
  height: tounit(image_height($img));
}

@mixin image_cx_top_abs($img, $centerX, $y) {
  position: absolute;
  display: inline-block;
  left: borderPX($centerX, image_width($img));
  top: tounit($y);
  background: url(unquote($img)) left top no-repeat;
  background-size: 100% 100%;
  width: tounit(image_width($img));
  height: tounit(image_height($img));
}

@mixin image_left_bottom_abs($img, $x, $bottomY) {
  position: absolute;
  display: inline-block;
  left: tounit($x);
  bottom: tounit($bottomY);
  background: url($img) left top no-repeat;
  background-size: 100% 100%;
  width: tounit(image_width($img));
  height: tounit(image_height($img));
}

@mixin image_cy_bottom_abs($img, $centerX, $bottomY) {
  position: absolute;
  display: inline-block;
  left: borderPX($centerX, image_width($img));
  bottom: tounit($bottomY);
  background: url($img) left top no-repeat;
  background-size: 100% 100%;
  width: tounit(image_width($img));
  height: tounit(image_height($img));
}

@mixin image_left_mtop_abs($img, $x, $centerY) {
  position: absolute;
  display: inline-block;
  left: tounit($x);
  top: borderPX($centerY, image_height($img));
  background: url($img) left top no-repeat;
  background-size: 100% 100%;
  width: tounit(image_width($img));
  height: tounit(image_height($img));
}



@mixin image_c_m_abs($img, $centerX, $centerY) {
  position: absolute;
  display: inline-block;
  left: borderPX($centerX, image_width($img));
  top: borderPX($centerY, image_height($img));
  background: url($img) left top no-repeat;
  background-size: 100% 100%;
  width: tounit(image_width($img));
  height: tounit(image_height($img));
}
@mixin full_page {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

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

html {
  font-family: 'MicrosoftYaHei', '微软雅黑', 'STHeitiSC';
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
}

div {
  background-size: 100% 100%;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
// 其他div元素默认不让选择,但是会影响流式滑动效果.故单独把page拿出来能能移动
.page {
  -webkit-user-select: element;
  user-select: element;
}

@import "compass/reset";

html, body {
  width: 100%;
  overflow-x: hidden;
  user-select: none;
  padding: 0;
  margin: 0;
  background-color: #ffffff;
  font-family: 'MicrosoftYaHei', '微软雅黑', 'STHeitiSC';
}


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

#container {
  width: tounit($container-body-width);
  max-width: tounit(640px);
  position: relative;
  margin: 0 auto;
}

.inner_relative {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.page {
  @include full_page;
  display: none;
  overflow: hidden;
}

.page .inner {
  position: relative;
  width: 100%;
}

.page .layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.dialog {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.dialog .inner {
  position: relative;
  width: 100%;
}
//清除浮动
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}


input {
  outline: none;
  border: none;
  background: none;
}

select {
  outline: none;
  border: none;
  background: none;
  -webkit-appearance: none;
}


