/* 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;}
.tc {text-align: center;}
.tl {text-align: left;}
.tr {text-align: right;}
.curpin {cursor: pointer}
.h30 {height: 30px;}
.mr10{margin-right: 10px;}
.mr20{margin-right: 20px;}
.mr15{margin-right: 15px;}
.mr30{margin-right: 30px;}
.ml10{margin-left: 10px;}
.mt10{margin-top: 10px;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mb10{margin-bottom: 10px;}


/* 一行点点点 */
.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;
}