@charset "utf-8";
/**
 * title: w_html-css v1.0.0
 * author: Mr.W 
 * time: 2018.12.10
 * describe: css基础样式集，
 */
/* -webkit-，-moz-，-ms-，-o-，'',注意代码顺序 */
/* 基本初始化 */
*{outline: none;word-break:break-all;}
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;outline:none;}
input,textarea,select{appearance: none;outline: none;box-shadow: none;}
h1,h2,h3,h4,h5,h6{font-size: 14px;font-weight: normal;}
input::-webkit-input-placeholder{ /* WebKit browsers */ color: #aaa;font-size: 14px;}
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */  color: #aaa;font-size: 14px;}
input::-moz-placeholder{ /* Mozilla Firefox 19+ */  color: #aaa;font-size: 14px;}
input:-ms-input-placeholder{ /* Internet Explorer 10+ */  color: #aaa;font-size: 14px;}
body{font:14px 'Microsoft Yahei,Helvetica Neue,Helvetica,Arial,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif';background:#fff;-webkit-text-size-adjust:100%;position: relative;}
html{position: relative;min-height: 100%;}
a,a:active,a:hover,a:focus{text-decoration:none}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle;max-width: 100%;}
table{border-collapse:collapse;border-spacing:0;}
/* 语义标签初始化 */
header,nav,aside,section,article,footer{display: block;}
/**
 * 快捷样式-按照字母排序排列
 **/
/*媒体查询*/
@media only screen and (max-width:1200px){}
@media only screen and (max-width:992px){}
@media only screen and (max-width:768px){}
@media only screen and (max-width:576px){}
@media only screen and (max-width:320px){}
/*清除浮动*/
.zClearLeft{clear: left;}
.zClearRight{clear: right;}
.zClearBoth{clear: both;}
.zClearNone{clear: none;}
.zClearInherit{clear: inherit;}
/*超出隐藏显示省略号*/
.zEllipsis{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.zEllipsis_1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}/*因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端;*/
.zEllipsis_2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}/*因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端;*/
.zEllipsis_3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}/*因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端;*/
.zEllipsis_4{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;}/*因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端;*/
.zEllipsis_5{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;overflow: hidden;}/*因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端;*/
.zEllipsis_6{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;overflow: hidden;}/*因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端;*/
.zEllipsis_7{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 7;overflow: hidden;}/*因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端;*/
/*Flex 布局（Flexible Box 意为"弹性布局"）*/
/*以下6个属性设置在容器上flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content*/
/*采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。*/
.zFlexContainer{display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}
/*flex-direction属性决定主轴的方向（即项目的排列方向）。*/
.zFlexDirection_row{-webkit-flex-direction: row;-moz-flex-direction: row;-ms-flex-direction: row;-o-flex-direction: row;flex-direction: row;}/*（默认值）：主轴为水平方向，起点在左端。*/
.zFlexDirection_rowReverse{-webkit-flex-direction: row-reverse;-moz-flex-direction: row-reverse;-ms-flex-direction: row-reverse;-o-flex-direction: row-reverse;flex-direction: row-reverse;}/*主轴为水平方向，起点在右端。*/
.zFlexDirection_column {-webkit-flex-direction: column ;-moz-flex-direction: column ;-ms-flex-direction: column ;-o-flex-direction: column ;flex-direction: column ;}/*主轴为垂直方向，起点在上沿。*/
.zFlexDirection_columnReverse{-webkit-flex-direction: column-reverse;-moz-flex-direction: column-reverse;-ms-flex-direction: column-reverse;-o-flex-direction: column-reverse;flex-direction: column-reverse;}/*主轴为垂直方向，起点在下沿。*/
/*默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。*/
.zFlexWrap_nowrap{-webkit-flex-wrap: nowrap;-moz-flex-wrap: nowrap;-ms-flex-wrap: nowrap;-o-flex-wrap: nowrap;flex-wrap: nowrap;}/*（默认）：不换行。*/
.zFlexWrap_wrap{-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap;-o-flex-wrap: wrap;flex-wrap: wrap;}/*换行，第一行在上方。*/
.zFlexWrap_wrapReverse{-webkit-flex-wrap: wrap-reverse;-moz-flex-wrap: wrap-reverse;-ms-flex-wrap: wrap-reverse;-o-flex-wrap: wrap-reverse;flex-wrap: wrap-reverse;}/*换行，第一行在下方。*/
/*flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。*/
/*justify-content属性定义了项目在主轴上的对齐方式。*/
.zFlexJustifyContent_flexStart{justify-content: flex-start;}/*（默认值）：左对齐*/
.zFlexJustifyContent_flexEnd{justify-content: flex-end;}/*右对齐*/
.zFlexJustifyContent_center{justify-content: center;}/*居中*/
.zFlexJustifyContent_spaceBetween{justify-content: space-between;}/*两端对齐，项目之间的间隔都相等。*/
.zFlexJustifyContent_spaceAround{justify-content: space-around;}/*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/
/*align-items属性定义项目在交叉轴上如何对齐。*/
.zFlexAlignItems_flexStart{align-items: flex-start;}/*交叉轴的起点对齐。*/
.zFlexAlignItems_flexEnd{align-items: flex-end;}/*交叉轴的终点对齐。*/
.zFlexAlignItems_center{align-items: center;}/*交叉轴的中点对齐。*/
.zFlexAlignItems_baseline{align-items: baseline;}/*项目的第一行文字的基线对齐。*/
.zFlexAlignItems_stretch{align-items: stretch;}/*（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。*/
/*align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。*/
.zFlexAlignContent_flexStart{align-content: flex-start;}/*与交叉轴的起点对齐。*/
.zFlexAlignContent_flexStart{align-content: flex-end;}/*与交叉轴的终点对齐。*/
.zFlexAlignContent_flexStart{align-content: center;}/*与交叉轴的中点对齐。*/
.zFlexAlignContent_flexStart{align-content: space-between;}/*与交叉轴两端对齐，轴线之间的间隔平均分布。*/
.zFlexAlignContent_flexStart{align-content: space-around;}/*每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。*/
.zFlexAlignContent_flexStart{align-content: stretch;}/*（默认值）：轴线占满整个交叉轴。*/
/*以下6个属性设置在项目上。order、flex-grow、flex-shrink、flex-basis、flex、align-self*/
/*order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。*/
.zFlexOrder_f7{order: -7;}
.zFlexOrder_f6{order: -6;}
.zFlexOrder_f5{order: -5;}
.zFlexOrder_f4{order: -4;}
.zFlexOrder_f3{order: -3;}
.zFlexOrder_f2{order: -2;}
.zFlexOrder_f1{order: -1;}
.zFlexOrder,
.zFlexOrder_0{order: 0;}
.zFlexOrder_1{order: 1;}
.zFlexOrder_2{order: 2;}
.zFlexOrder_3{order: 3;}
.zFlexOrder_4{order: 4;}
.zFlexOrder_5{order: 5;}
.zFlexOrder_6{order: 6;}
.zFlexOrder_7{order: 7;}
/*flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。*/
.zFlexFlexGrow,
.zFlexFlexGrow_0{flex-grow:0}
.zFlexFlexGrow_1{flex-grow:1}
.zFlexFlexGrow_2{flex-grow:2}
.zFlexFlexGrow_3{flex-grow:3}
/*flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。*/
.zFlexFlexShrink,
.zFlexFlexShrink_0{flex-shrink:0}
.zFlexFlexShrink_1{flex-shrink:1}
.zFlexFlexShrink_2{flex-shrink:2}
.zFlexFlexShrink_3{flex-shrink:3}
/*flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小*/
.zFlexFlexBasis,
.zFlexFlexBasis_atuo{-webkit-flex-basis: auto;-moz-flex-basis: auto;-ms-flex-basis: auto;-o-flex-basis: auto;flex-basis: auto;}
.zFlexFlexBasis_100px{-webkit-flex-basis: 100px;-moz-flex-basis: 100px;-ms-flex-basis: 100px;-o-flex-basis: 100px;flex-basis: 100px;}
/*flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。*/
.zFlexFlex{-webkit-flex: 0 1 auto;-moz-flex: 0 1 auto;-ms-flex: 0 1 auto;-o-flex: 0 1 auto;flex: 0 1 auto;}
.zFlexFlex_auto{-webkit-flex: auto;-moz-flex: auto;-ms-flex: auto;-o-flex: auto;flex: auto;}
.zFlexFlex_none{-webkit-flex: none;-moz-flex: none;-ms-flex: none;-o-flex: none;flex: none;}
/*align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。*/
.zFlexAlignSelf_auto{align-self: auto;}/*继承父元素的align-items属性，如果没有父元素，则等同于stretch。*/
.zFlexAlignSelf_flexStart{align-self: flex-start;}/*交叉轴的起点对齐。*/
.zFlexAlignSelf_flexEnd{align-self: flex-end;}/*交叉轴的终点对齐。*/
.zFlexAlignSelf_center{align-self: center;}/*交叉轴的中点对齐。*/
.zFlexAlignSelf_baseline{align-self: baseline;}/*项目的第一行文字的基线对齐。*/
.zFlexAlignSelf_stretch{align-self: stretch;}/*（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。*/
/*文本选中操作*/
.zSelectNone{-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;-o-user-select: none;user-select: none;}
.zSelectText{-webkit-user-select: text;-moz-user-select: text;-ms-user-select: text;-o-user-select: text;user-select: text;}
.zSelectElement{-webkit-user-select: element;-moz-user-select: element;-ms-user-select: element;-o-user-select: element;user-select: element;}
.zSelectAll{-webkit-user-select: all;-moz-user-select: all;-ms-user-select: all;-o-user-select: all;user-select: all;}
/*transition动画过度*/
.zTransitionAll_300{-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.zTransitionAll_500{-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;}
.zTransitionAll_1000{-webkit-transition: all 1s;-moz-transition: all 1s;-ms-transition: all 1s;-o-transition: all 1s;transition: all 1s;}
.zTransitionAll_1500{-webkit-transition: all 1.5s;-moz-transition: all 1.5s;-ms-transition: all 1.5s;-o-transition: all 1.5s;transition: all 1.5s;}