.inline-flex {display: inline-flex;display: -webkit-inline-flex;}

/*
 *flex-direction
 *属性决定主轴的方向（即项目的排列方向）
 *row（默认值）：主轴为水平方向，起点在左端
 *row-reverse：主轴为水平方向，起点在右端
 *column：主轴为垂直方向，起点在上沿
 *column-reverse：主轴为垂直方向，起点在下沿
 */
.flex-row{flex-direction: row;}
.flex-row-r{flex-direction:row-reverse;}
.flex-column {flex-direction: column;}
.flex-column-r{flex-direction: column-reverse;}

/*
 *flex-wrap
 *属性决定主轴的方向（即项目的排列方向）
 *nowrap（默认）：不换行
 *wrap：换行，第一行在上方
 *wrap-reverse：换行，第一行在下方。
 */
.flex-nowrap{flex-wrap: nowrap;}
.flex-wrap{flex-wrap: wrap;}
.flex-wrap-r{flex-wrap: wrap-reverse;}

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

/*
 *align-items
 *属性定义项目在交叉轴上如何对齐
 *flex-start：交叉轴的起点对齐
 *flex-end：交叉轴的终点对齐
 *center：交叉轴的中点对齐
 *baseline: 项目的第一行文字的基线对齐
 *stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
 */
.align-items-start{align-items: flex-start;}
.align-items-end{align-items: flex-end;}
.align-items-center{align-items: center;}
.align-items-baseline{align-items: baseline;}
.align-items-stretch{align-items:stretch;}

/*
 * align-content
 *属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
 *flex-start：与交叉轴的起点对齐
 *flex-end：与交叉轴的终点对齐
 *center：与交叉轴的中点对齐
 *space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
 *space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
 *stretch（默认值）：轴线占满整个交叉轴
 */
.align-content-start{align-content: flex-start;}
.align-content-end{align-content:flex-end;}
.align-content-center{align-content: center;}
.align-content-between{align-content: space-between;}
.align-content-around{align-content: space-around;}
.align-content-stretch{align-content:stretch;}
.align-content-baseline{align-content: baseline;}


/* order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0 */
.order-0{order: 0;}
.order-1{order: 1;}
.order-2{order: 2;}
.order-3{order: 3;}
.order-4{order: 4;}
.order-5{order: 5;}
.order-6{order: 6;}
.order-7{order: 7;}
.order-8{order: 8;}
.order-9{order: 9;}
.order-10{order: 10;}
.order-11{order: 11;}
.order-12{order: 12;}

/* align-self
 *属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
 */
.align-self-auto{align-self: auto;}
.align-self-start{align-self: flex-start;}
.align-self-end{align-self: flex-end;}
.align-self-center{align-self: center;}
.align-self-baseline{align-self: baseline;}
.align-self-stretch{align-self: stretch;

}

/*
 * jQuery.Running.js - jQuery plugin for Running
 *
 * Copyright (c) 2007-2015 Qietu inc
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.qietu.com/p/jQuery.Running.js
 *
 * Version:  1.0.0
 *
 */
 
 /*pie*/
.pie{ width: 120px; height: 120px;  border-radius: 50%; background: #e95549; position:relative; margin-top:20px; }
.pieLeftInner,
.pieRightInner { width:120px; height:120px; background-color:#e5e5e5; border-radius:100px; position:absolute; }
.pieLeftInner { clip:rect(0px,120px,120px,60px); -o-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg);  }
.pieRightInner { clip:rect(0px,60px,120px,0px); -o-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg);  }
.pieLeft,
.pieRight { width:120px; height:120px; position:absolute; z-index:1; }
.pieLeft { clip:rect(0px,120px,120px,60px); }
.pieRight { clip:rect(0px,60px,120px,0px); }
.pieInner { width:80px; height:80px; margin:20px 0 0 20px; background-color:#fff; border-radius:100px; position:absolute; z-index:1; text-align:center; line-height:80px; font-size:24px; font-weight:bold; color:#e25a4a; font-family:"寰蒋闆呴粦", "榛戜綋";}

/*prograss*/
.prograss{
	background:#eee; height:15px; width:80%; position:relative; border-radius:2px; margin-top:10px;
}
.prograss .bar{
	background:#e95549; height:100%; width:10%; border-radius:2px 0 0 2px;
}
.prograss_bar_yellow{
	background:#f8b757 !important;
}

/*flex-direction: column;*/
.flex-direction-column{flex-direction: column;}