/* flex兼容写法：https://blog.csdn.net/qq_22844483/article/details/72773490 */
/* 清除浮动 */
.clearfix:after {
	content: ''; /*设置内容为空*/
	height: 0; /*高度为0*/
	line-height: 0; /*行高为0*/
	display: block; /*将文本转为块级元素*/
	visibility: hidden; /*将元素隐藏*/
	clear: both; /*清除浮动*/
}
.clearfix {
	zoom: 1; /*为了兼容IE*/
}
.clear-both {
	clear: both;
}
/* 盒子模型[挪到了public文件夹，放这里打包的时候会屏蔽掉一些兼容样式] */
.flex {
	display: -moz-box; /* 老版本语法: Firefox (buggy) */
	display: -ms-flexbox; /* 混合版本语法: IE 10 */
	display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
	display: -webkit-flex; /* 新版本语法: Chrome 21+ */
	display: flex;
}

.flex-ac {
	display: -moz-box; /* 老版本语法: Firefox (buggy) */
	display: -ms-flexbox; /* 混合版本语法: IE 10 */
	display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
	display: -webkit-flex; /* 新版本语法: Chrome 21+ */
	display: flex;
	/* // ---------- */
	-moz-align-items: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.flex-bt {
	/* 主轴两端对齐 */
	-webkit-box-pack: justify;
	-moz-justify-content: space-between;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.flex-jc {
	display: -moz-box; /* 老版本语法: Firefox (buggy) */
	display: -ms-flexbox; /* 混合版本语法: IE 10 */
	display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
	display: -webkit-flex; /* 新版本语法: Chrome 21+ */
	display: flex;
	/* // ---------------- */
	-moz-justify-content: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.flex-ajc {
	display: -moz-box; /* 老版本语法: Firefox (buggy) */
	display: -ms-flexbox; /* 混合版本语法: IE 10 */
	display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
	display: -webkit-flex; /* 新版本语法: Chrome 21+ */
	display: flex;
	/* // ----------------- */
	-moz-justify-content: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	/* // ----------------- */
	-moz-align-items: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.flex-col {
	-moz-flex-direction: column;
	-webkit-box-direction: normal;
	-webkit-box-orient: vertical;
	-webkit-flex-direction: column;
	flex-direction: column;
}
.flex-1 {
	-moz-flex-grow: 1;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	flex-grow: 1;
	flex: 1;
}
.flex-2 {
	-moz-flex-grow: 2;
	-webkit-box-flex: 2;
	-webkit-flex: 2;
	flex-grow: 2;
	flex: 2;
}
.flex-3 {
	-moz-flex-grow: 3;
	-webkit-box-flex: 3;
	-webkit-flex: 3;
	flex-grow: 3;
	flex: 3;
}

/* 强制样式 */
.none {
	display: none !important;
}
/* 位置样式 */
.fl {
	float: left;
}
.he {
	height: 100%;
}
.wi {
	width: 100%;
}
.block {
	display: block;
}
.fr {
	float: right;
}
.fl {
	float: left;
}
.tc {
	text-align: center;
}
.tl {
	text-align: left;
}
.tr {
	text-align: right;
}
.curpin {
	cursor: pointer;
}
.h30 {
	height: 30px;
}
.mr10 {
	margin-right: 10px !important;
}
.mr20 {
	margin-right: 20px !important;
}
.mr15 {
	margin-right: 15px !important;
}
.mr30 {
	margin-right: 30px !important;
}
.ml10 {
	margin-left: 10px !important;
}
.mt10 {
	margin-top: 10px !important;
}
.mt20 {
	margin-top: 20px !important;
}
.mt30 {
	margin-top: 30px !important;
}
.mt40 {
	margin-top: 40px !important;
}
.mt50 {
	margin-top: 50px !important;
}
.mb10 {
	margin-bottom: 10px !important;
}
.mb20 {
	margin-bottom: 20px !important;
}
.mb30 {
	margin-bottom: 30px !important;
}
.mb40 {
	margin-bottom: 40px !important;
}
.mb10 {
	margin-bottom: 10px !important;
}
.pr10 {
	padding-right: 10px !important;
}
.pr20 {
	padding-right: 20px !important;
}

/* 一行点点点 */
.line-clamp {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.line-clamp-1 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	/* // word-break: break-all; */
	word-break: normal; /* 英文单词断行，也会导致1111111111111111断行 */
}
.line-clamp-2 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	/* word-break: break-all; */
	word-break: normal; /* 英文单词断行，也会导致1111111111111111断行 */
}
.line-clamp-3 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	/* // word-break: break-all; */
	word-break: normal; /* 英文单词断行，也会导致1111111111111111断行 */
}
.line-clamp-4 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	/* /word-break: break-all; */
	word-break: normal; /* 英文单词断行，也会导致1111111111111111断行 */
}
.line-clamp-5 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	/* // word-break: break-all; */
	word-break: normal; /* 英文单词断行，也会导致1111111111111111断行 */
}
.line-clamp-6 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	/* // word-break: break-all; */
	word-break: normal; /* 英文单词断行，也会导致1111111111111111断行 */
}

/* 图片背景样式 */
.aspect-fill {
	/* 放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来 */
	overflow: hidden;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	-webkit-background-size: cover !important;
	-moz-background-size: cover !important;
	background-size: cover !important;
}
/* //按钮设置居中 */
/* button {
 	.flex-ac;
 	cursor: pointer;
   } */
.border {
	border: 1px solid red;
}
/* //整页fiexd mask */
.page-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	background: rgba(0, 0, 0, 0.5);
}
.div-position {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
/*震动动画*/
.animate-bounce-up {
	animation: bounce-up 0.2s ease-in 1;
}
@keyframes bounce-up {
	10% {
		transform: translateY(5px);
	}
	20% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-5px);
	}
	40% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(5px);
	}
	60% {
		transform: translateY(0);
	}
	70% {
		transform: translateY(-5px);
	}
	80% {
		transform: translateY(0);
	}
	90% {
		transform: translateY(5px);
	}
	100% {
		transform: translateY(0);
	}
}

/* 方法二 */
.mirrorRotateLevel {
	/* 水平镜像翻转 */
	-moz-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	transform: scaleX(-1);
	/*兼容IE*/
	filter: FlipH;
}
.mirrorRotateVertical {
	/* 垂直镜像翻转 */
	-moz-transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
	-o-transform: scaleY(-1);
	transform: scaleY(-1);
	/*兼容IE*/
	filter: FlipV;
}