@charset "utf-8";

html, body {

    background: #fff;

    color: #505050;

    font-size: 10px;

    -moz-user-select: none; /*火狐*/

    -webkit-user-select: none;  /*webkit浏览器*/

    -ms-user-select: none;   /*IE10*/

    -khtml-user-select: none; /*早期浏览器*/

    user-select: none;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    -webkit-tap-highlight-color: transparent;/*这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮，设置颜色的alpha值为0即可*/

    -webkit-touch-callout: none;/*系统默认菜单被禁用*/

    font-family:Tahoma,Arial,Roboto,'Droid Sans','Helvetica Neue','Droid Sans Fallback','Heiti SC',sans-self;

}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

    margin: 0;

    padding: 0;

}

body, button, input, select, textarea {

    line-height: 1;

}

h1, h2, h3, h4, h5, h6 {

    font-weight: normal;

}

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {

    -webkit-text-size-adjust: none;

}

body {

    max-width: 750px;

    margin: 0 auto;

}

img {

    width: 100%;

    vertical-align: middle;

}

/*阻止旋转屏幕时自动调整字体大小*/

textarea {

    resize: none;

}

/*取消按钮在inphone上的默认样式*/

input[type=button] {

    -webkit-appearance: none;

    outline: none

}

input::-webkit-input-placeholder {

    color: #F0F0F0;

}

textarea::-webkit-input-placeholder {

    color: #F0F0F0;

}

input::-webkit-input-speech-button {

    display: none

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

th {

    text-align: inherit;

}

fieldset, img {

    border: none;

}

abbr, acronym {

    border: none;

    font-variant: normal;

}

del {

    text-decoration: line-through;

}

ol, ul {

    list-style: none;

}

caption, th {

    text-align: left;

}

sub, sup {

    font-size: 75%;

    line-height: 0;

    position: relative;

    vertical-align: baseline;

}

sup {

    top: -0.5em;

}

sub {

    bottom: -0.25em;

}

ins, a, a:hover {

    text-decoration: none;

}

a:focus, *:focus {

    outline: none;

}

small{ font-size: 90%;}

/*清除浮动*/

.clearfix:before, .clearfix:after, header:before, header:after, footer:before, footer:after,

.col-1:before, .col-1:after, .col-2:before, .col-2:after, .col-3:before, .col-3:after,

.col-4:before, .col-4:after, .col-5:before, .col-5:after, .col-6:before, .col-6:after,

.col-7:before, .col-7:after, .col-8:before, .col-8:after, .col-9:before, .col-9:after,

.col-10:before, .col-10:after, .col-11:before, .col-11:after, .col-12:before, .col-12:after,

.row:before, .row:after {

    content: "";

    display: table;

}

.clearfix:after, footer:after, header:after, .col-1:after, .col-2:after, .col-3:after,

.col-4:after, .col-5:after, .col-6:after, .col-7:after, .col-8:after, .col-9:after,

.col-10:after, .col-11:after, .col-12:after {

    clear: both;

}

.clearfix {

    zoom: 1;

}

.clear {

    clear: both;

    display: block;

    font-size: 0;

    height: 0;

    line-height: 0;

    overflow: hidden;

}

.hide {

    display: none;

}

.block {

    display: block;

}

.outL {

    white-space: normal;

    word-break: break-all;

    width: 100px;

}

.outH {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    width: 100px;

}

/*布局*/

.fl {

    float: left;

    display: inline;

}

.fr {

    float: right;

    display: inline;

}

.cb {

    clear: both;

}

.cl {

    clear: left;

}

.cr {

    clear: right;

}

.rel {

    position: relative;

}

.abs {

    position: absolute;

}

.tac {

    text-align: center;

}

.tal {

    text-align: left;

}

.tar {

    text-align: right;

}

.dib {

    display: inline-block;

}

.vab {

    vertical-align: bottom;

}

.vam {

    vertical-align: middle;

}

.vat {

    vertical-align: top;

}

/*元素垂直 水平居中*/

.box {

    display: -webkit-box;

    -webkit-box-orient: horizontal;

    -webkit-box-pack: center;

    -webkit-box-align: center;

    display: -moz-box;

    -moz-box-orient: horizontal;

    -moz-box-pack: center;

    -moz-box-align: center;

    display: -o-box;

    -o-box-orient: horizontal;

    -o-box-pack: center;

    -o-box-align: center;

    display: -ms-box;

    -ms-box-orient: horizontal;

    -ms-box-pack: center;

    -ms-box-align: center;

    display: box;

    box-orient: horizontal;

    box-pack: center;

    box-align: center;

}

/*flex*/

.row {

    display: -webkit-flex;

    display: flex;

    -webkit-flex-wrap: wrap;

    flex-wrap: wrap;

    flex-direction: wrap;

    display: -webkit-box;

    -webkit-box-orient: horizontal;

    -webkit-box-lines: multiple;

    width: 100%;

    height: auto;

    margin: auto;

}

.flex1 {

    -webkit-box-flex: 1;

    -webkit-flex: 1;

    flex: 1;

}

.flex2 {

    -webkit-box-flex: 2;

    -webkit-flex: 2;

    flex: 2;

}

.flex3 {

    -webkit-box-flex: 3;

    -webkit-flex: 3;

    flex: 3;

}

/*flex*/

/*宽度*/

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,

.col-7,.col-8,.col-9,.col-10 .col-11,.col-12{

   float: left;

}

.col-1 {

    width: 8.33333333%;

}

.col-2 {

    width: 16.66666667%;

}

.col-3 {

    width: 25%;

}

.col-4 {

    width: 33.33333333%;

}

.col-5 {

    width: 41.66666667%;

}

.col-6 {

    width: 50%;

}

.col-7 {

    width: 58.33333333%;

}

.col-8 {

    width: 66.66666667%;

}

.col-9 {

    width: 75%;

}

.col-10 {

    width: 83.33333333%;

}

.col-11 {

    width: 91.66666667%;

}

.col-12 {

    width: 100%;

}