/*===========================================================================================================*/
/* reset
/*===========================================================================================================*/
body,h1,h2,h3,h4,h5,p,dl,dt,dd,ul,ol,li,form,input,textarea,button,th,td,
select,article,section,fieldset,div {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);/*用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色，此处设置为透明*/
	margin:0;
	padding:0;
	box-sizing: border-box;
}
body,h1,h2,h3,h4,h5,p,dl,dt,dd,ul,ol,li,form,button,th,td,
select,article,section,fieldset,div {
   /* -webkit-touch-callout: none;禁止复制*/
   /*-webkit-user-select: none;禁止长按弹出苹果浏览器默认菜单*/
}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary {
    display: block;
}
html {
	-webkit-text-size-adjust: 100%;/*防止用户屏幕翻转时字体自动缩放*/
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
html {
  font-size: 20px;
}
@media only screen and (min-width: 400px) {
  html {
    font-size: 21.33333333px !important;
  }
}
@media only screen and (min-width: 414px) {
  html {
    font-size: 22.08px !important;
  }
}
@media only screen and (min-width: 480px) {
  html {
    font-size: 25.6px !important;
  }
}
html {
  	-webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}
body{
  font-size: .85rem;
  line-height: 1.5;
}
input,select,textarea,button {
	-webkit-appearance:none;/*去除系统默认样式*/
	-moz-appearance:none;
	appearance: none;
}
input{
	border-radius:0;
}
a {
	background-color: transparent;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
a:active,a:hover,button,input,select,textarea {
	outline: 0;
}
a,a:hover,a:visited,a:active,a:focus{text-decoration: none;}
h1,h2,h3,h4,h5,b,strong {
	font-weight:normal;
}
em,i{
	font-style:normal;
}
img {
	border: 0;
	vertical-align: top;/*防止图片底部出现白边*/
}
ol,ul,li{
    list-style-type: none;
}
input,select,button{
	border:0;
}
/*===========================================================================================================*/
/* 弹性盒子模型
/*===========================================================================================================*/
/* 09版
 * display: box;
 * 11版
 * display: -ms-flexbox;
 * 12版
 * 任何一个容器都可以指定为Flex布局:display: flex;
 * 行内元素也可以使用Flex布局:display: inline-flex;
 * 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。*/
.box{
	display: -webkit-box;/*2009年老版本语法*/
	display: -moz-box;
	display: -ms-box;
	display: -o-box;
	display: box;
	display: -ms-flexbox;/*2011年混合版本语法*/ /*2012年新版本语法*/
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
/* 09版
 * box-flex: 1;
 * 12版
 * flex:1;*/
.flex1{
	display: block;
	width:0;/*解决旧版可能会出现不均分bug*/
	max-width: 100%;
	-webkit-box-flex: 1;
	-ms-box-flex:1;
	-o-box-flex:1;
	box-flex:1;
	-moz-flex:1;
	-ms-flex:1;
	-o-flex:1;
	flex: 1;
}
.flex2{
	display: block;
	width:0;
	max-width: 100%;
	-webkit-box-flex: 2;
	-ms-box-flex:2;
	-o-box-flex:2;
	box-flex:2;
	-moz-flex:2;
	-ms-flex:2;
	-o-flex:2;
	flex: 2;
}
/* 09版
 * box-orient用来确定子元素的方向。
 * box-orient:horizontal(水平) | vertical(垂直) | inline-axis(水平) | block-axis(垂直) | inherit(水平)
 * 09版
 * box-direction是用来确定子元素的排列顺序
 * box-direction:normal(正常排序) | reverse(反转排序) | inherit(正常排序)
 * 12版
 * flex-direction属性决定主轴的方向（即项目的排列方向）。
   flex-direction: row (主轴为水平方向，起点在左端)| row-reverse (主轴为水平方向，起点在右端)| column(主轴为垂直方向，起点在上沿) | column-reverse(主轴为垂直方向，起点在下沿);
 * */
.arho{
	-webkit-box-orient:horizontal;/*子元素水平排列(用在父元素身上)  2009年老版本版语法*/
	-ms-box-orient:horizontal;
	-o-box-orient:horizontal;
	box-orient:horizontal;/*12版 */
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	-o-flex-direction: row;
	flex-direction: row;
}
.arve{
	-webkit-box-orient:vertical;/*子元素垂直排列(用在父元素身上) 2009年	老版本版语法*/
	-ms-box-orient:vertical;
	-o-box-orient:vertical;
	box-orient:vertical; /* 12版 */
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
}
/* 09版
 * box-lines是用来决定子元素是可以换行显示？还是只能单行显示
 * box-lines:single(默认值，表示打死不换行) | multiple(可以多行显示，不过支持性不好，基本这个用不到)
 * 12版
 * 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
 * flex-wrap: nowrap(不换行) | wrap(换行，第一行在上方) | wrap-reverse(换行，第一行在下方);
 * */
.subnow{
	-ms-flex-wrap:nowrap;
	-o-flex-wrap:nowrap;
	flex-wrap:nowrap;
}
.subw{
	-ms-flex-wrap:wrap;
	-o-flex-wrap:wrap;
	flex-wrap:wrap;
}

/* 12版
 * flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。*/

/* 09版
 * box-align决定了垂直方向上的空间利用，也就是垂直方向上的对齐表现。
 * box-align:start(上对齐) | end(下对齐) | center(居中) | baseline(表示基线（英文字母o,m,n等的底边位置线）对齐) | stretch(将占满整个容器的高度)
 * 12版
 * align-items属性定义项目在交叉轴上如何对齐。
 * align-items: flex-start(交叉轴的起点对齐) | flex-end(交叉轴的终点对齐) | center(交叉轴的中点对齐) | baseline(项目的第一行文字的基线对齐) | stretch(如果项目未设置高度或设为auto，将占满整个容器的高度);
 * */
.subvc{
	-webkit-box-align:center;/*子元素垂直方向上居中(用在父元素身上) 2009年老版本语法*/
	-ms-box-align:center;
	-o-box-align:center;
	box-align:center;
	-ms-flex-align: center;/*混合版本语法*/ /* 12版 */
	-moz-align-items: center;
	-ms-align-items: center;
	-o-align-items: center;
 	align-items: center;
}
.subvs{
	-webkit-box-align:stretch;/*子元素垂直方向上拉伸(用在父元素身上) 老版本语法*/
	-ms-box-align:stretch;
	-o-box-align:stretch;
	box-align:stretch;
	-ms-flex-align: stretch;/*混合版本语法*//*新版本语法*/
  	-moz-align-items: stretch;
  	-ms-align-items: stretch;
  	-o-align-items: stretch;
  	align-items: stretch; 
}
/* 09版
 * box-pack决定了父标签水平遗留空间的使用。
 * box-pack:start(左对齐) | end(右对齐) | center(居中) | justify(两端对齐，项目之间的间隔都相等)
 * 12版
 * justify-content属性定义了项目在主轴上的对齐方式。
 * justify-content: flex-start(左对齐) | flex-end(右对齐) | center(居中) | space-between(两端对齐，项目之间的间隔都相等) | space-around(每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍);
 * */
.subhc{
	-webkit-box-pack:center;/*子元素水平方向上居中(用在父元素身上)*/
	-ms-box-pack:center;
	-o-box-pack:center;
	box-pack:center;
	-ms-flex-pack: center;/*混合版本语法*//*新版本语法*/
	-moz-justify-content: center;
	-ms-justify-content: center;
	-o-justify-content: center;
  	justify-content: center;
}
.subhj{
	-webkit-box-pack:justify;/*子元素水平方向上俩端对齐(用在父元素身上) 老版本语法*/
	-moz-box-pack:justify;
	-ms-box-pack:justify;
	-o-box-pack:justify;
	box-pack:justify;
	-ms-flex-line-pack:justify;/*混合版本语法*//*12版本语法*/
	-moz-justify-content:space-between;
	-ms-justify-content:space-between;
	-o-justify-content:space-between;
	-webkit-box-pack:justify;
	    -ms-flex-pack:justify;
	        justify-content:space-between;
}
/*清除浮动*/
.clearfix:before,.clearfix:after {
	display: table;
	content: " ";
}
.clearfix:after {clear: both;}
/*===========================================================================================================*/
/*定位
/*===========================================================================================================*/
.pr{position:relative;}
.pa{position:absolute;}
.pf{position:fixed;}
/*===========================================================================================================*/
/*浮动与块
/*===========================================================================================================*/
.fl{float: left;}
.fr{float: right;}
.db{display: block;}
.dn{display: none;}
.dib{display:inline-block;}
.oh{overflow:hidden;}
/*===========================================================================================================*/
/*
/*===========================================================================================================*/
.fwb{font-weight:bold;}
.fwn{font-weight:normal;}
.tc{text-align:center;}
.tl{text-align:left;}
.tr{text-align:right;}
.tdl{text-decoration: line-through;}
.tdu{text-decoration: underline;}
.tdn{text-decoration: none;}
.mc{margin:0 auto;}
/*ellipsis(默认俩行)*/
.ellipsis{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-box;
	display: -o-box;
	display: box;
	-webkit-line-clamp: 2;
	-moz-line-clamp: 2;
	-ms-line-clamp: 2;
	-o-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-ms-box-orient: vertical;
	-o-box-orient: vertical;
	box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}