/* 以下为测试 */
.showboder {
	border: blue solid 1px;
}

.showboder2 {
	border: #ff55ff solid 5px;
}

.showboder3 {
	border: #EA252C solid 1px;
}

.showboder4 {
	border: #55ffff solid 1px;
}

/* 以上为测试 */

/* 以下为正文 */
.bgclF8 {
	background-color: #F8F8FB;
}

.mybody {
	height: 100vh;
}

view {
	font-family: MicrosoftYaHei;
	color: #161616;
}

.content {
	flex: 1;
}

/* login */
.login-righttitle {
	font-size: 1.145vw;
	font-family: MicrosoftYaHei;
	color: #020202;
	line-height: 1.5vw;
	letter-spacing: 1px;
	display: flex;
	justify-content: center;
}

.btn-hover {
	background: #EA252C;
	color: #FFFFFF;
}

.btn-normal {
	background-color: #F4F4F4;
	color: #626262;
}

a:link {
	color: #FF0000;
	text-decoration: none;
}

a:visited {
	color: #EA252C;
	text-decoration: none;
}

/* ------ */

.df {
	display: flex;
	display: -webkit-flex;
	/* Safari */
}

/* 
nowrap（默认）：不换行 
wrap：换行在第一行的上方
wrap-reverse：换行，第一行在下方
*/
.ffrn {
	flex-flow: row nowrap;
}

.ffrw {
	flex-flow: row wrap;
}

.ffrwr {
	flex-flow: row wrap-reverse;
}

.ffrrn {
	flex-flow: row-reverse nowrap;
}

.ffrrw {
	flex-flow: row-reverse wrap;
}

.ffrrwr {
	flex-flow: row-reverse wrap-reverse;
}

.ffcn {
	flex-flow: column nowrap;
}

.ffcw {
	flex-flow: column wrap;
}

.ffcwr {
	flex-flow: column wrap-reverse;
}

.ffcrn {
	flex-flow: column-reverse nowrap;
}

.ffcrw {
	flex-flow: column-reverse wrap;
}

.ffcrwr {
	flex-flow: column-reverse wrap-reverse;
}


/* flex-direction 属性规定灵活项目的方向。 */
.fdc {
	flex-direction: column;
}

.fdcr {
	flex-direction: column-reverse;
}

.fdinherit {
	flex-direction: inherit;
}

.fdinitial {
	flex-direction: initial;
}

.fdr {
	flex-direction: row;
}

.fdrr {
	flex-direction: row-reverse;
}

.fdu {
	flex-direction: unset;
}



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

.jcfe {
	justify-content: flex-end;
}

.jcc {
	justify-content: center;
}

.jcsb {
	justify-content: space-between;
}

.jcsa {
	justify-content: space-around;
}



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

.aife {
	align-items: flex-end;
}

.aic {
	align-items: center;
}

.aib {
	align-items: baseline;
}

.ais {
	align-items: stretch;
}

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

.acfe {
	align-content: flex-end;
}

.acc {
	align-content: center;
}

.acsb {
	align-content: space-between;
}

.acsa {
	align-content: space-around;
}

.acs {
	align-content: stretch;
}

/*
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
*/
.o0 {
	order: 0;
}

.o1 {
	order: 1;
}

.o2 {
	order: 2;
}

.o3 {
	order: 3;
}

.o4 {
	order: 4;
}

.o5 {
	order: 5;
}

.o6 {
	order: 6;
}

.o7 {
	order: 7;
}

.o8 {
	order: 8;
}

.o9 {
	order: 9;
}

/*
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
注意：该属性是瓜分剩下的空间，而并非父元素的百分比长度
*/
.fg0 {
	flex-grow: 0;
}

.fg1 {
	flex-grow: 1;
}

.fg2 {
	flex-grow: 2;
}

.fg3 {
	flex-grow: 3;
}

.fg4 {
	flex-grow: 4;
}

.fg5 {
	flex-grow: 5;
}

.fg6 {
	flex-grow: 6;
}

.fg7 {
	flex-grow: 7;
}

.fg8 {
	flex-grow: 8;
}

.fg9 {
	flex-grow: 9;
}

/*
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
也就是说当空间不足的时候缩小比例，为0代表不缩小，为2就代表比一般的缩小快一倍
*/
.fs0 {
	flex-shrink: 0;
}

.fs1 {
	flex-shrink: 1;
}

.fs2 {
	flex-shrink: 2;
}

.fs3 {
	flex-shrink: 3;
}

.fs4 {
	flex-shrink: 4;
}

.fs5 {
	flex-shrink: 5;
}

.fs6 {
	flex-shrink: 6;
}

.fs7 {
	flex-shrink: 7;
}

.fs8 {
	flex-shrink: 8;
}

.fs9 {
	flex-shrink: 9;
}

/*
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
*/
.asa {
	align-self: auto;
}

.asfs {
	align-self: flex-start;
}

.asfe {
	align-self: flex-end;
}

.asc {
	align-self: center;
}

.asb {
	align-self: baseline;
}

.asb {
	align-self: stretch;
}


.w01 {
	width: 4.166666667%;
}

.w02 {
	width: 8.333333333%;
}

.w03 {
	width: 12.50000000%;
}

.w04 {
	width: 16.66666667%;
}

.w05 {
	width: 20.83333333%;
}

.w06 {
	width: 25.00000000%;
}

.w07 {
	width: 29.16666667%;
}

.w08 {
	width: 33.33333333%;
}

.w09 {
	width: 37.50000000%;
}

.w10 {
	width: 41.66666667%;
}

.w11 {
	width: 45.83333333%;
}

.w12 {
	width: 50.00000000%;
}

.w13 {
	width: 54.16666667%;
}

.w14 {
	width: 58.33333333%;
}

.w15 {
	width: 62.50000000%;
}

.w16 {
	width: 66.66666667%;
}

.w17 {
	width: 70.83333333%;
}

.w18 {
	width: 75.00000000%;
}

.w19 {
	width: 79.16666667%;
}

.w20 {
	width: 83.33333333%;
}

.w21 {
	width: 87.50000000%;
}

.w22 {
	width: 91.66666667%;
}

.w23 {
	width: 95.83333333%;
}

.w24 {
	width: 100.0000000%;
}

.pr {
	position: relative;
}

.pa {
	position: absolute;
}

.pf {
	position: fixed;
}

.fr {
	float: right;
}

.fl {
	float: left;
}