@charset "utf-8";
/*base:介绍
.l:左浮动 .r 右浮动
.clearfix 清除浮动父级  .clear 子元素属性.
.f-allmid 水平垂直居中
.f-allmid-cf 都居中垂直摆放
.f-smid-cspa 水平居中 垂直自适应
.f-cmid-sspa 垂直居中 水平自适应
.f-cmid-sbet 垂直居中 水平两端对齐
*/
/*水平垂直居中*/
.f-allmid{
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*水平垂直居中 垂直摆放*/
.f-allmid-cf{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/*水平居中 垂直自适应摆放*/
.f-smid-cspa{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
/*垂直居中 水平自适应*/
.f-cmid-sspa{
    display: -webkit-flex;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /*flex-wrap: wrap;*/
}
/*垂直居中 水平两端对齐*/
.f-cmid-sbet{
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*flex-wrap: wrap;*/
}
/*子元素属性    margin: auto;给单个子元素设置 完美居中,多个元素会把剩余的空间放在它后面
order: 子元素的排序顺序 小在前,可为负
flex :子元素按比例分配
align-self:
 flex-start:子元素靠最上面
 flex-end:子元素在最下面
 stretch:子元素拉伸占满正行
*/
/*
父元素设置 justify-content
	flex-start：弹性项目向行头紧挨着填充。
	flex-end：弹性项目向行尾紧挨着填充。

align-items:都是水平的,column垂
	flex-start:放在盒子顶部位置
	flex-end :放到盒子底部
flex-wrap: wrap 自动换行,不会溢出
 	wrap-reverse:优先把下面放满,在往上放.
*/
.clearfix:after { clear:both;content:".";display:block;font-size:0;height:0;visibility:hidden; }
.clearfix:after { _zoom:1; }
.overflow { overflow:hidden; _zoom:1; }
.clear { clear:both; height:0;font-size:0; overflow:hidden; }
html {
    color: #000;
    background: #fff;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}
input,button,select,textarea { font-family:inherit;font-size:100%;outline:none; }
textarea { resize:none }
.l { float:left; }
.r { float:right; }
input { vertical-align:middle; }
img { border:0; }/*重置图片元素*/
table { border-collapse:collapse;border-spacing: 0; }/*重置表格*/
html * {
    outline: 0;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

html, body {
    font-family: sans-serif
}

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
}

input, select, textarea {
    font-size: 100%
}

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

fieldset, img {
    border: 0
}

abbr, acronym {
    border: 0;
    font-variant: normal
}

del {
    text-decoration: line-through
}

address, caption, cite, code, dfn, em, th, var {
    font-style: normal;
    font-weight: 500
}

ol, ul ,ul li,ol,li{
    list-style: none
}

caption, th {
    text-align: left
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: 500
}

q:before, q:after {
    content: ''
}

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

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

a:hover {
    text-decoration: none;
    color: #ffffff !important;
}
a:active{
    color: #ffffff !important;
}
a:visited{
    color: #ffffff !important;
}
a:link{
    color: #ffffff;
}
ins, a {
    text-decoration: none
}

* {
    box-sizing: border-box;
}
html,body,div,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,object,code,em,span,var,legend,button,input,textarea,th,td,a,img,header,footer,nav,aside,audio,datalist,section { margin:0;padding:0;border:0;outline:0; }/*清除内外边距*/
body { background:#fff;font:12px "Microsoft Yahei",Arial,Tahoma, Helvetica,\5b8b\4f53, sans-serif; }