/* txf reset*/
html, button, input, select, textarea {
    /*font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;*/
    font-family: "PingFang SC",Arial,Helvetica,sans-serif
}
body {
    margin: 0 auto;
    line-height: 1;
    height: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

* {
    margin: 0;
    padding: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
}

    audio:not([controls]) {
        display: none;
        height: 0;
    }

[hidden], template {
    display: none;
}

svg:not(:root) {
    overflow: hidden;
}

a {
    background: transparent;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    /*color: #0088cc;*/
}

/*a:active {
    outline: 0;
}

a:active {
    color: #006699;
}*/

abbr[title] {
    border-bottom: 1px dotted;
}

b, strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

mark {
    background: #ff0;
    color: #000;
}

small {
    font-size: 80%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
    vertical-align: middle;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

pre {
    overflow: auto;
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

code, kbd, pre, samp {
/*    font-family: monospace, monospace;
    font-size: .3rem;*/
}
code var {  background-repeat:no-repeat;}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
    none;
}

h1, h2, h3 {

    font-weight: normal;
}


input::-moz-placeholder, textarea::-moz-placeholder {
    color: #ccc;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #ccc;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #ccc;
}

select::-ms-expand {
    display: none;
}

input[type=text]::-ms-clear, input[type=tel]::-ms-clear, input[type=number]::-ms-clear {
    display: none
}

input[type=radio]::-ms-check, input[type=checkbox]::-ms-check {
    display: none;
}

a, button, input {
    -webkit-tap-highlight-color: rgba(255,0,0,0);
}

    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
        background: none;
    }

    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px #d2d2d2 inset;
    }

.popup {
    position: absolute;
    left: 0;
    top: 0px;
    background: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.70;
    opacity: 0.70;
    z-index: 9990;
    width: 100%;
    display: none;
    height: 100%;
}

button {
    overflow: visible;
}

button, select {
    text-transform: none;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

    button[disabled], html input[disabled] {
        cursor: default;
    }

    button::-moz-focus-inner, input::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

input {
    line-height: normal;
    outline: none;
    border:none;
}

    input[type="checkbox"], input[type="radio"] {
        box-sizing: border-box;
        padding: 0;
    }

    input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
        height: auto;
    }

    input[type="search"] {
        -webkit-appearance: textfield;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
            -webkit-appearance: none;
        }

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    resize: none;
    outline: medium none;
}

optgroup {
    font-weight: bold;
}

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

td, th {
    padding: 0;
    font-weight: normal;
}

h1, h2, h3, h4, h5, h6, p, figure, form, blockquote {
    margin: 0;
}

ul, ol, li, dl, dd {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none outside
}
em {
    font-style: normal
}
.clearfix:after {
    display: block;
    height: 0;
    content: "";
    clear: both;
}
.fix{
    overflow:hidden;
}
.fl {
    float: left;
}

.fr {
    float: right;
}
.f34 {
    font-size:0.34rem;
    letter-spacing:0.02rem;
    line-height:0.4rem;
}
.f30 {
    font-size: 0.3rem;
    letter-spacing: 0.02rem;
    line-height: 0.36rem;
}
.f28 {
    font-size: 0.28rem;
    letter-spacing: 0.02rem;
    line-height: 0.34rem;
}
.f26 {
    font-size: 0.26rem;
    letter-spacing: 0.015rem;
    line-height: 0.32rem;
}
.f24 {
    font-size: 0.24rem;
    letter-spacing: 0.01rem;
    line-height: 0.3rem;
}
.f22 {
    font-size: 0.22rem;
    letter-spacing: 0.01rem;
    line-height: 0.28rem;
}
.opacity_30 {
    filter: alpha(opacity=30);
    -moz-opacity: 0.30;
    opacity: 0.30;
}

/* 弹性布局 */
/* flex：定义布局为盒模型 */
/* display为flex的子元素默认占满父元素的高度 */
.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
/* 1方向 */
/* flex-direction： row | row-reverse | column | column-reverse; ===============================*/
/* row（默认值）：主轴为水平方向，起点在左端 */
.flex-row {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}
/* row-reverse：主轴为水平方向，起点在右端。 */
.flex-row-reverse {
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
/* column：主轴为垂直方向，起点在上沿。 */
.flex-column {
    flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-flex-direction: column;
}
/* column-reverse：主轴为垂直方向，起点在下沿。 */
.flex-column-reverse {
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
/* 2换行 */
/*  flex-wrap: nowrap | wrap | wrap-reverse; */
/* flex-wrap 换行*/
.flex-wrap {
    -webkit-flex-wrap: wrap;
    -webkit-box-lines: multiple;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-wrap-reverse {
    -o-flex-wrap: wrap-reverse;
    -webkit-flex-wrap: wrap-reverse;
    -moz-flex-wrap: wrap-reverse;
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
}
/* 1-2换行和方向综合 */
/* flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 */
/* flex-flow: <flex-direction> || <flex-wrap>; */

/* 3对齐方式 */
/* 3.1主轴对齐方式 */
/* justify-content属性定义了项目在主轴上的对齐方式 justify-content: flex-start | flex-end | center | space-between | space-around;*/
/* 
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 */
/* 主轴start对齐 */
.flex-start {
    -webkit-box-pack: start;
    -moz-justify-content: flex-start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
/* 主轴end对齐 */
.flex-end {
    -webkit-box-pack: end;
    -moz-justify-content: flex-end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
/* 主轴居中 */
.flex-center {
    justify-content: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -webkit--moz-box-pack: center;
    box-pack: center;
}
/* 主轴两端对齐 */
.flex-between {
    justify-content: space-between;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    -moz-box-pack: space-between;
    -webkit--moz-box-pack: space-between;
    box-pack: justify;
}

.flex-around {
    -moz-justify-content: space-around;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}
/* 3.2 align-items项目在交叉轴上如何对齐。 */
/* align-items: flex-start | flex-end | center | baseline | stretch; */
/* 
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 */
/* 侧轴start对齐 */
.flex-align-start {
    -webkit-box-align: start;
    -moz-align-items: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
/* 侧轴底部对齐 */
.flex-align-end {
    align-items: flex-end;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    box-align: end;
    -moz-box-align: end;
    -webkit-box-align: end;
}
/* 侧轴居中 */
.flex-align-center {
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    box-align: center;
    -moz-box-align: center;
    -webkit-box-align: center;
}
/* 侧轴文本基线对齐 */
.flex-align-baseline {
    -webkit-box-align: baseline;
    -moz-align-items: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}

/* 侧轴上下对齐并铺满 */
.flex-align-stretch {
    -webkit-box-align: stretch;
    -moz-align-items: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}

/* 项目属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0,兼容写法
box-order:num;
-webkit-box-order:num;
-moz-box-order:num;
order:num;
-webkit-order:num;

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-grow属性都为1，则它们将等分剩余空间（如果有的话）.
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。它可以设为跟width或height属性一样的值（比如350px）
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto
*/

/* 不允许元素缩小 */
.flex-noShrink {
    -webkit-box-flex: 0;
    -moz-flex-shrink: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

/* flex-1：子元素占据剩余的空间 */
.flex-1 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
/* 如果竖直方向占据剩余空间，要设置父级元素flex-direction:column;   */
var {
    font-style:normal;
}