/*简单框架基本结构-来源拼图框架*/

html {
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #535353;
}

input::-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #535353;
}

input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #535353;
}

input::-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #535353;
}

body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
code,
del,
dfn,
em,
q,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
legend,
caption,
tbody,
tfoot,
thead,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16px;
    font: inherit;
    vertical-align: baseline
}

article,
aside,
details,
figcaption,
figure,
dialog,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

body {
    font-size: 16px;
    color: #333;
    background: #fff;
    font-family: Helvetica, Arial, sans-serif;
}

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

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

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

textarea {
    overflow: auto
}

input:focus,
textarea:focus,
button:focus,
select:focus {
    outline: 0
}

a:active,
a:hover {
    outline: 0
}

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

.layout {
    width: 100%
}

.container,
.container-layout {
    margin: 0 auto;
    padding: 0 15px
}

@media(min-width:760px) {
    .container {
        width: 750px
    }
}

@media(min-width:1000px) {
    .container {
        width: 1000px
    }
}

@media(min-width:1200px) {
    .container {
        width: 1200px
    }
}

.line {
    margin: 0;
    padding: 0
}

.x1,
.x2,
.x3,
.x4,
.x5,
.x6,
.x7,
.x8,
.x9,
.x10,
.x11,
.x12,
.xl1,
.xl2,
.xl3,
.xl4,
.xl5,
.xl6,
.xl7,
.xl8,
.xl9,
.xl10,
.xl11,
.xl12,
.xs1,
.xs2,
.xs3,
.xs4,
.xs5,
.xs6,
.xs7,
.xs8,
.xs9,
.xs10,
.xs11,
.xs12,
.xm1,
.xm2,
.xm3,
.xm4,
.xm5,
.xm6,
.xm7,
.xm8,
.xm9,
.xm10,
.xm11,
.xm12,
.xb1,
.xb2,
.xb3,
.xb4,
.xb5,
.xb6,
.xb7,
.xb8,
.xb9,
.xb10,
.xb11,
.xb12 {
    position: relative;
    min-height: 1px
}

.line-big {
    margin-left: -15px;
    margin-right: -15px
}

.line-big .x1,
.line-big .x2,
.line-big .x3,
.line-big .x4,
.line-big .x5,
.line-big .x6,
.line-big .x7,
.line-big .x8,
.line-big .x9,
.line-big .x10,
.line-big .x11,
.line-big .x12,
.line-big .xl1,
.line-big .xl2,
.line-big .xl3,
.line-big .xl4,
.line-big .xl5,
.line-big .xl6,
.line-big .xl7,
.line-big .xl8,
.line-big .xl9,
.line-big .xl10,
.line-big .xl11,
.line-big .xl12,
.line-big .xs1,
.line-big .xs2,
.line-big .xs3,
.line-big .xs4,
.line-big .xs5,
.line-big .xs6,
.line-big .xs7,
.line-big .xs8,
.line-big .xs9,
.line-big .xs10,
.line-big .xs11,
.line-big .xs12,
.line-big .xm1,
.line-big .xm2,
.line-big .xm3,
.line-big .xm4,
.line-big .xm5,
.line-big .xm6,
.line-big .xm7,
.line-big .xm8,
.line-big .xm9,
.line-big .xm10,
.line-big .xm11,
.line-big .xm12,
.line-big .xb1,
.line-big .xb2,
.line-big .xb3,
.line-big .xb4,
.line-big .xb5,
.line-big .xb6,
.line-big .xb7,
.line-big .xb8,
.line-big .xb9,
.line-big .xb10,
.line-big .xb11,
.line-big .xb12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px
}

@media(min-width:300px) {
    .xl1,
    .xl2,
    .xl3,
    .xl4,
    .xl5,
    .xl6,
    .xl7,
    .xl8,
    .xl9,
    .xl10,
    .xl11,
    .xl12 {
        float: left
    }
    .xl1 {
        width: 8.33333333%
    }
    .xl2 {
        width: 16.66666667%
    }
    .xl3 {
        width: 25%
    }
    .xl4 {
        width: 33.33333333%
    }
    .xl5 {
        width: 41.66666667%
    }
    .xl6 {
        width: 50%
    }
    .xl7 {
        width: 58.33333333%
    }
    .xl8 {
        width: 66.66666667%
    }
    .xl9 {
        width: 75%
    }
    .xl10 {
        width: 83.33333333%
    }
    .xl11 {
        width: 91.66666667%
    }
    .xl12 {
        width: 100%
    }
    .xl0-left {
        left: 0
    }
    .xl1-left {
        left: 8.33333333%
    }
    .xl2-left {
        left: 16.66666667%
    }
    .xl3-left {
        left: 25%
    }
    .xl4-left {
        left: 33.33333333%
    }
    .xl5-left {
        left: 41.66666667%
    }
    .xl6-left {
        left: 50%
    }
    .xl7-left {
        left: 58.33333333%
    }
    .xl8-left {
        left: 66.66666667%
    }
    .xl9-left {
        left: 75%
    }
    .xl10-left {
        left: 83.33333333%
    }
    .xl11-left {
        left: 91.66666667%
    }
    .xl12-left {
        left: 100%
    }
    .xl0-right {
        right: 0
    }
    .xl1-right {
        right: 8.33333333%
    }
    .xl2-right {
        right: 16.66666667%
    }
    .xl3-right {
        right: 25%
    }
    .xl4-right {
        right: 33.33333333%
    }
    .xl5-right {
        right: 41.66666667%
    }
    .xl6-right {
        right: 50%
    }
    .xl7-right {
        right: 58.33333333%
    }
    .xl8-right {
        right: 66.66666667%
    }
    .xl9-right {
        right: 75%
    }
    .xl10-right {
        right: 83.33333333%
    }
    .xl11-right {
        right: 91.66666667%
    }
    .xl12-right {
        right: 100%
    }
    .xl0-move {
        margin-left: 0
    }
    .xl1-move {
        margin-left: 8.33333333%
    }
    .xl2-move {
        margin-left: 16.66666667%
    }
    .xl3-move {
        margin-left: 25%
    }
    .xl4-move {
        margin-left: 33.33333333%
    }
    .xl5-move {
        margin-left: 41.66666667%
    }
    .xl6-move {
        margin-left: 50%
    }
    .xl7-move {
        margin-left: 58.33333333%
    }
    .xl8-move {
        margin-left: 66.66666667%
    }
    .xl9-move {
        margin-left: 75%
    }
    .xl10-move {
        margin-left: 83.33333333%
    }
    .xl11-move {
        margin-left: 91.66666667%
    }
    .xl12-move {
        margin-left: 100%
    }
}

@media(min-width:760px) {
    .xs1,
    .xs2,
    .xs3,
    .xs4,
    .xs5,
    .xs6,
    .xs7,
    .xs8,
    .xs9,
    .xs10,
    .xs11,
    .xs12 {
        float: left
    }
    .xs1 {
        width: 8.33333333%
    }
    .xs2 {
        width: 16.66666667%
    }
    .xs3 {
        width: 25%
    }
    .xs4 {
        width: 33.33333333%
    }
    .xs5 {
        width: 41.66666667%
    }
    .xs6 {
        width: 50%
    }
    .xs7 {
        width: 58.33333333%
    }
    .xs8 {
        width: 66.66666667%
    }
    .xs9 {
        width: 75%
    }
    .xs10 {
        width: 83.33333333%
    }
    .xs11 {
        width: 91.66666667%
    }
    .xs12 {
        width: 100%
    }
    .xs0-left {
        left: 0
    }
    .xs1-left {
        left: 8.33333333%
    }
    .xs2-left {
        left: 16.66666667%
    }
    .xs3-left {
        left: 25%
    }
    .xs4-left {
        left: 33.33333333%
    }
    .xs5-left {
        left: 41.66666667%
    }
    .xs6-left {
        left: 50%
    }
    .xs7-left {
        left: 58.33333333%
    }
    .xs8-left {
        left: 66.66666667%
    }
    .xs9-left {
        left: 75%
    }
    .xs10-left {
        left: 83.33333333%
    }
    .xs11-left {
        left: 91.66666667%
    }
    .xs12-left {
        left: 100%
    }
    .xs0-right {
        right: 0
    }
    .xs1-right {
        right: 8.33333333%
    }
    .xs2-right {
        right: 16.66666667%
    }
    .xs3-right {
        right: 25%
    }
    .xs4-right {
        right: 33.33333333%
    }
    .xs5-right {
        right: 41.66666667%
    }
    .xs6-right {
        right: 50%
    }
    .xs7-right {
        right: 58.33333333%
    }
    .xs8-right {
        right: 66.66666667%
    }
    .xs9-right {
        right: 75%
    }
    .xs10-right {
        right: 83.33333333%
    }
    .xs11-right {
        right: 91.66666667%
    }
    .xs12-right {
        right: 100%
    }
    .xs0-move {
        margin-left: 0
    }
    .xs1-move {
        margin-left: 8.33333333%
    }
    .xs2-move {
        margin-left: 16.66666667%
    }
    .xs3-move {
        margin-left: 25%
    }
    .xs4-move {
        margin-left: 33.33333333%
    }
    .xs5-move {
        margin-left: 41.66666667%
    }
    .xs6-move {
        margin-left: 50%
    }
    .xs7-move {
        margin-left: 58.33333333%
    }
    .xs8-move {
        margin-left: 66.66666667%
    }
    .xs9-move {
        margin-left: 75%
    }
    .xs10-move {
        margin-left: 83.33333333%
    }
    .xs11-move {
        margin-left: 91.66666667%
    }
    .xs12-move {
        margin-left: 100%
    }
}

@media(min-width:1000px) {
    .xm1,
    .xm2,
    .xm3,
    .xm4,
    .xm5,
    .xm6,
    .xm7,
    .xm8,
    .xm9,
    .xm10,
    .xm11,
    .xm12 {
        float: left
    }
    .xm1 {
        width: 8.33333333%
    }
    .xm2 {
        width: 16.66666667%
    }
    .xm3 {
        width: 25%
    }
    .xm4 {
        width: 33.33333333%
    }
    .xm5 {
        width: 41.66666667%
    }
    .xm6 {
        width: 50%
    }
    .xm7 {
        width: 58.33333333%
    }
    .xm8 {
        width: 66.66666667%
    }
    .xm9 {
        width: 75%
    }
    .xm10 {
        width: 83.33333333%
    }
    .xm11 {
        width: 91.66666667%
    }
    .xm12 {
        width: 100%
    }
    .xm0-left {
        left: 0
    }
    .xm1-left {
        left: 8.33333333%
    }
    .xm2-left {
        left: 16.66666667%
    }
    .xm3-left {
        left: 25%
    }
    .xm4-left {
        left: 33.33333333%
    }
    .xm5-left {
        left: 41.66666667%
    }
    .xm6-left {
        left: 50%
    }
    .xm7-left {
        left: 58.33333333%
    }
    .xm8-left {
        left: 66.66666667%
    }
    .xm9-left {
        left: 75%
    }
    .xm10-left {
        left: 83.33333333%
    }
    .xm11-left {
        left: 91.66666667%
    }
    .xm12-left {
        left: 100%
    }
    .xm0-right {
        right: 0
    }
    .xm1-right {
        right: 8.33333333%
    }
    .xm2-right {
        right: 16.66666667%
    }
    .xm3-right {
        right: 25%
    }
    .xm4-right {
        right: 33.33333333%
    }
    .xm5-right {
        right: 41.66666667%
    }
    .xm6-right {
        right: 50%
    }
    .xm7-right {
        right: 58.33333333%
    }
    .xm8-right {
        right: 66.66666667%
    }
    .xm9-right {
        right: 75%
    }
    .xm10-right {
        right: 83.33333333%
    }
    .xm11-right {
        right: 91.66666667%
    }
    .xm12-right {
        right: 100%
    }
    .xm0-move {
        margin-left: 0
    }
    .xm1-move {
        margin-left: 8.33333333%
    }
    .xm2-move {
        margin-left: 16.66666667%
    }
    .xm3-move {
        margin-left: 25%
    }
    .xm4-move {
        margin-left: 33.33333333%
    }
    .xm5-move {
        margin-left: 41.66666667%
    }
    .xm6-move {
        margin-left: 50%
    }
    .xm7-move {
        margin-left: 58.33333333%
    }
    .xm8-move {
        margin-left: 66.66666667%
    }
    .xm9-move {
        margin-left: 75%
    }
    .xm10-move {
        margin-left: 83.33333333%
    }
    .xm11-move {
        margin-left: 91.66666667%
    }
    .xm12-move {
        margin-left: 100%
    }
}

@media(min-width:1200px) {
    .xb1,
    .xb2,
    .xb3,
    .xb4,
    .xb5,
    .xb6,
    .xb7,
    .xb8,
    .xb9,
    .xb10,
    .xb11,
    .xb12 {
        float: left
    }
    .xb1 {
        width: 8.33333333%
    }
    .xb2 {
        width: 16.66666667%
    }
    .xb3 {
        width: 25%
    }
    .xb4 {
        width: 33.33333333%
    }
    .xb5 {
        width: 41.66666667%
    }
    .xb6 {
        width: 50%
    }
    .xb7 {
        width: 58.33333333%
    }
    .xb8 {
        width: 66.66666667%
    }
    .xb9 {
        width: 75%
    }
    .xb10 {
        width: 83.33333333%
    }
    .xb11 {
        width: 91.66666667%
    }
    .xb12 {
        width: 100%
    }
    .xb0-left {
        left: 0
    }
    .xb1-left {
        left: 8.33333333%
    }
    .xb2-left {
        left: 16.66666667%
    }
    .xb3-left {
        left: 25%
    }
    .xb4-left {
        left: 33.33333333%
    }
    .xb5-left {
        left: 41.66666667%
    }
    .xb6-left {
        left: 50%
    }
    .xb7-left {
        left: 58.33333333%
    }
    .xb8-left {
        left: 66.66666667%
    }
    .xb9-left {
        left: 75%
    }
    .xb10-left {
        left: 83.33333333%
    }
    .xb11-left {
        left: 91.66666667%
    }
    .xb12-left {
        left: 100%
    }
    .xb0-right {
        right: 0
    }
    .xb1-right {
        right: 8.33333333%
    }
    .xb2-right {
        right: 16.66666667%
    }
    .xb3-right {
        right: 25%
    }
    .xb4-right {
        right: 33.33333333%
    }
    .xb5-right {
        right: 41.66666667%
    }
    .xb6-right {
        right: 50%
    }
    .xb7-right {
        right: 58.33333333%
    }
    .xb8-right {
        right: 66.66666667%
    }
    .xb9-right {
        right: 75%
    }
    .xb10-right {
        right: 83.33333333%
    }
    .xb11-right {
        right: 91.66666667%
    }
    .xb12-right {
        right: 100%
    }
    .xb0-move {
        margin-left: 0
    }
    .xb1-move {
        margin-left: 8.33333333%
    }
    .xb2-move {
        margin-left: 16.66666667%
    }
    .xb3-move {
        margin-left: 25%
    }
    .xb4-move {
        margin-left: 33.33333333%
    }
    .xb5-move {
        margin-left: 41.66666667%
    }
    .xb6-move {
        margin-left: 50%
    }
    .xb7-move {
        margin-left: 58.33333333%
    }
    .xb8-move {
        margin-left: 66.66666667%
    }
    .xb9-move {
        margin-left: 75%
    }
    .xb10-move {
        margin-left: 83.33333333%
    }
    .xb11-move {
        margin-left: 91.66666667%
    }
    .xb12-move {
        margin-left: 100%
    }
}

@media(max-width:760px) {
    .show-l {
        display: block!important
    }
    .hidden-l {
        display: none!important
    }
}

@media(min-width:761px) and (max-width:1000px) {
    .show-s {
        display: block!important
    }
    .hidden-s {
        display: none!important
    }
}

@media(min-width:1001px) and (max-width:1200px) {
    .show-m {
        display: block!important
    }
    .hidden-m {
        display: none!important
    }
}

@media(min-width:1201px) {
    .show-b {
        display: block!important
    }
    .hidden-b {
        display: none!important
    }
}

.float-left {
    float: left!important
}

.float-right {
    float: right!important
}

.clearfix:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    overflow: hidden
}

.clearfix {
    zoom: 1;
}

.clear {
    clear: both
}

.show {
    display: block!important
}

.hidden {
    display: none!important;
    visibility: hidden!important
}