@charset "UTF-8";
/* reset
-------------------------------*/
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html,
body {
  -webkit-overflow-scrolling: auto;
  overflow-scrolling: auto; }

html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%; }

body {
  font-family: "PingFang SC", "Apple LiGothic Medium", "Droid Sans", "Microsoft YaHei", "Microsoft JhengHei", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 0;
  color: #666;
  background: #f0f0f0;
  -webkit-tap-highlight-color: transparent; }

img {
  vertical-align: middle; }

a:link,
a:visited {
  color: #fff; }

a:hover,
a:active {
  color: #ff0000; }

ol,
ul,
li,
dl,
dt,
dd,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary,
video,
audio,
pre {
  margin: 0;
  padding: 0; }

ol,
ul,
li {
  list-style: none;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-padding-start: 0; }

p {
  margin: 0;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666; }

a {
  background: transparent;
  text-decoration: none; }

a:focus {
  outline: thin dotted #333;
  outline: 0px auto -webkit-focus-ring-color;
  outline-offset: -2px; }

a:active,
a:hover {
  outline: 0;
  text-decoration: none; }
img {
  border: 0; }

#qrcode{
	width: 290px;
	height: 290px;
	background: url(../img/mobilepage.png) no-repeat;
}

/* 通用框架
--------------*/
html,
body {
  -webkit-overflow-scrolling: auto;
  overflow-scrolling: auto; }

body {
  font-family: "PingFang SC", "Apple LiGothic Medium", "Droid Sans", "Microsoft YaHei", "Microsoft JhengHei", "Helvetica Neue", Helvetica, sans-serif; }

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

.iphone {
  width: 360px;
  height: 727px;
  background: url(../img/bg-phone.png) no-repeat;
  padding-top: 84px; }
  
  .iphone .iphone-container {
    width: 312px;
    height: 560px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background: #fff; }
    .iphone .iphone-container iframe {
      width: 100%;
      height: 100%; }
    .iphone span{
		margin:0 0 0 8px;		
    }
  
.iphone-black {
  background: #f8f8f8;
  margin: 0 auto; }

.iphone-black .iphone-btn {
  width: 50px;
  height: 50px;
  border: 3px solid #aaa;
  border-radius: 50%;
  margin: 15px auto 0 auto;
  cursor: pointer;
  color:#f00;
  }
  .iphone-black .iphone-btn:hover {
    background: #222;
    border: 3px solid #666; }

.iphone {
  border-radius: 50px; }

.iphone-black {
  margin-bottom: 30px; }

.tips {
  width: 400px;
  margin: 0 auto; }
  .tips strong {
    color: #333; }
  .tips a {
    color: #0072c6; }
    .tips a:hover {
      text-decoration: underline; }

body {
  background: #333; }


[class*=oui-fluid] {
  display: block; }
  [class*=oui-fluid]:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden; }
  [class*=oui-fluid] > [class*=span],
  [class*=oui-fluid] > li {
    float: left;
    clear: none;
    word-break: break-all;
    padding: 0;
    margin: 0; }
  [class*=oui-fluid] > li {
    width: 100%; }
  [class*=oui-fluid] > [class*=span1] {
    width: 8.33333%; }
  [class*=oui-fluid] > [class*=span2] {
    width: 16.66667%; }
  [class*=oui-fluid] > [class*=span3] {
    width: 25%; }
  [class*=oui-fluid] > [class*=span4] {
    width: 33.33333%; }
  [class*=oui-fluid] > [class*=span5] {
    width: 41.66667%; }
  [class*=oui-fluid] > [class*=span6] {
    width: 50%; }
  [class*=oui-fluid] > [class*=span7] {
    width: 58.33333%; }
  [class*=oui-fluid] > [class*=span8] {
    width: 66.66667%; }
  [class*=oui-fluid] > [class*=span9] {
    width: 75%; }
  [class*=oui-fluid] > [class*=span10] {
    width: 83.33333%; }
  [class*=oui-fluid] > [class*=span11] {
    width: 91.66667%; }
  [class*=oui-fluid] > [class*=span12] {
    width: 100%; }


.tip {
  padding-bottom: 20px; }
  .tip strong {
    color: red; }
  .tip a {
    color: #0072c6; }
    .tip a:hover {
      color: #0044c6; }


.preview {
  width: 900px;
  margin: 0 auto;
  padding-top: 50px; }
  .preview h2 {
    margin-bottom: 10px;
    color: #fff; }
  .preview #qrcode {
    margin: 20px 0 0 0; }
  .preview p {
    margin-bottom: 20px; 
    color: #fff; }