::after,
::before,
* {
	word-wrap: break-word;
	box-sizing: border-box;
}

a {
	text-decoration: none;
	color: #000;
}

.mx-auto {
	margin: 0 auto !important;
}

.bs {
	color: #fff;
}

.f(@e, @u) {
	font-size: unit(@e, @u);
}

.r(@e, @u) {
	border-radius: unit(@e, @u);
}

.mt(@e, @u) {
	margin-top: unit(@e, @u);
}

.mb(@e, @u) {
	margin-bottom: unit(@e, @u);
}

.b_k {
	background: #fff;
}

.b {
	font-weight: bold;
}

.y50 {
	border-radius: 50%;
	object-fit: cover !important;
}

.w(@e, @u) {
	width: unit(@e, @u);
}

.w {
	width: 100%;
}

.h {
	height: 100%;
}

.w100 {
	width: 100% !important;

	img {
		width: 100% !important;
	}
}

.p-r {
	position: relative;
}

.p-a {
	position: absolute;
}

.p-f {
	position: fixed;
}

.div_chao {
	white-space: nowrap;
	overflow-x: auto;

	.inline {
		display: inline-block !important;
	}
}

.dis {
	display: none;
}

.dis-l {
	display: block;
}

.songti {
	font-family: 宋体;
}

.b_l {
	float: left;
}

.b_r {
	float: right;
}

.r {
	margin-left: auto;
}

.b_l_w {
	width: 100%;
	float: left;
}

.w1 {
	width: 100%;
	float: left;
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.text-hide(@line) {
	overflow: hidden !important;
	text-overflow: ellipsis;
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: @line;
}

.text-hide-1 {
	overflow: hidden !important;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gray(@a, @b) {
	filter: grayscale(@a) invert(@b);
}

.brightness(@a, @b) {
	filter: brightness(@a) invert(@b);
}

/*伸缩盒子模型*/
.box {
	display: flex;
	flex-wrap: nowrap;
}

/*从左至右*/

.box-lr {
	flex-direction: row;
}


/*从右至左*/

.box-rl {
	flex-direction: row-reverse;
}


/*从上至下*/

.box-tb {
	flex-direction: column;
}


/*从下至上*/

.box-bt {
	flex-direction: column-reverse;
}


/*主轴居中*/

.box-pack-center {
	justify-content: center;
}

.middle {
	display: flex;
	justify-content: space-between;
	/*justify-content: space-evenly;*/
}

.middle::before,
.middle::after {
	content: '';
	display: block;
}

/*主轴居左*/

.box-pack-start {
	justify-content: flex-start;
}


/*主轴居右*/

.box-pack-end {
	justify-content: flex-end;
}


/*主轴左右不留白*/

.box-pack-between {
	justify-content: space-between;
}


/*主轴左右留白*/

.box-pack-around {
	justify-content: space-around;
}

/*自动间隔，每个元素的间隔相等*/

.box-middle {
	justify-content: space-evenly;
}

/*交叉轴居中对齐*/

.box-align-center {
	align-items: center;
}


/*交叉轴居左对齐*/

.box-align-start {
	align-items: flex-start;
}


/*交叉轴居右对齐*/

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


/**单个指定的子元素自定义对齐方式，可以不同于其他子元素对齐方式**/


/**指定子元素居中对齐**/

.self-align-center {
	align-self: center;
	margin: 0 auto;
}


/**指定子元素顶部对齐**/

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


/**指定子元素底部对齐**/

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


/**指定子元素拉伸**/

.self-align-stretch {
	align-self: stretch;
}


/**子元素换行**/

.box-wrap {
	flex-wrap: wrap;
}


/**子元素不换行**/

.box-nowrap {
	flex-wrap: nowrap;
}


/*允许子元素伸展（1倍）*/

.flex {
	flex-grow: 1;
	/*如果值是2 那么当前元素就是其他元素宽的2倍了*/
}

/* flex:1 是 flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况：
        flex-grow:0表示不会拉伸 flex-shrink:1表示 可以缩小
        flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto*/

/*允许子元素收缩(1倍)*/

.shrink {
	flex-shrink: 1;
}

/**水平居中*/

.box-center-center {
	justify-content: center;
	align-items: center;
	text-align: center;
}