/*4K 3840*2160*/
@media screen and (max-width:3840px) and (max-height:2160px) {
	html {
		font-size: 36px;
	}
}

/*2K 1920*1080*/
@media screen and (max-width:1920px) and (max-height:1080px) {
	html {
		font-size: 18px;
	}
}

/*1280*1024*/
@media screen and (max-width:1280px) and (max-height:1024px) {
	html {
		font-size: 14px;
	}
}

@media screen and (max-width:1024px) and (max-height:768px) {
	html {
		font-size: 12px;
	}
}

@media screen and (max-width:800px) and (max-height:600px) {
	html {
		font-size: 12px;
	}
}

html,
body {}

/*文档标签*/

header {}

footer {}

article {
	padding: 2rem;
	width: 62em;
}

section {}

aside {}

details {}

dialog {}

summary {}

div {}

p {
	font-size: 1rem;
	line-height: 2rem;
	text-indent: 2em;
}

span {}

/*格式标签*/

h1 {
	font-size: 2.5rem;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.75rem;
}

h4 {
	font-size: 1.5rem;
}

h5 {
	font-size: 1.25rem;
}

h6 {
	font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 2rem;
	margin-bottom: 2rem;
	font-weight: 900;
}

.t8 {
	font-size: 6rem;
}

.t7 {
	font-size: 4rem;
}

.t6 {
	font-size: 3.5rem;
}

.t5 {
	font-size: 3rem;
}

.t4 {
	font-size: 2.5rem;
}

.t3 {
	font-size: 2rem;
}

.t2 {
	font-size: 1.5rem;
}

.t1 {
	font-size: 1rem;
}

.t1,
.t2,
.t3,
.t4,
.t5,
.t6 {
	font-weight: 200;
}

mark {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	padding-left: 0.4rem;
	padding-right: 0.4rem;
	border-radius: 0.3rem;
	text-wrap: nowrap;
}

abbr {
	text-decoration-thickness: 1px;
}

/*键入文本*/
kbd {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	padding-left: 0.4rem;
	padding-right: 0.4rem;
	border-radius: 0.3rem;

	background-color: black;
	color: white;

	font-family: sans-serif, monospace;
}

/*计算机样本*/
samp {
	font-family: sans-serif, monospace;
}

/*小文本*/
small {
	font-size: 0.85rem;
}

/*时间文本*/
time {
	font-family: sans-serif, monospace;
}

/*代码文本*/
code {
	font-family: sans-serif, monospace;
}

/*预制格式文本*/
pre {
	padding: 0.5rem;
	color: white;
	background-color: black;
	border-radius: 0.3rem;
	border-style: solid;
	border-width: 1px;
	border-color: #3F4143;

	max-height: 20em;
	overflow: auto;
}

blockquote {
	/*引用块*/
	margin-left: 3rem;
	margin-right: 3rem;
	margin-top: 1rem;
	margin-bottom: 1rem;

	padding: 1rem;
	background-color: beige;
	border-radius: 0.3rem;
}

blockquote p {
	text-indent: 0;
	padding: 0;
	margin: 0;
}

blockquote footer {
	text-align: right;
}

address {
	font-size: 0.9rem;
	font-style: normal;
	line-height: 1.5rem;

	padding: 1rem;
	background-color: lightgray;
	border-radius: 0.3rem;
}

/*功能标签*/

a {
	/*链接默认手指*/
	cursor: pointer;
	text-decoration: none;
}

hr {
	/*默认横线*/
	border: none;
	padding: 0;
	margin: 0;
	height: 1px;
	background-color: black;
}

img {
	/*修正img底部空白*/
	vertical-align: middle;
}
:root {
	--body-fore: #212529;
	--body-back: #fff;
	--border: #dee2e6;

	/*主要 Primary*/
	--primary: #0d6efd;
	--primary-rgba: rgba(13, 110, 253, 0.62);
	--primary-text: #0a58ca;
	--primary-pale: #cfe2ff;
	--primary-mild: #9ec5fe;
	/*次要 Secondary*/
	--secondary: #6c757d;
	--secondary-rgba: rgba(108, 117, 125, 0.62);
	--secondary-text: #6c757d;
	--secondary-pale: #f8f9fa;
	--secondary-mild: #e9ecef;
	/*成功 Success*/
	--success: #198754;
	--success-rgba: rgba(25, 135, 84, 0.62);
	--success-text: #146c43;
	--success-pale: #d1e7dd;
	--success-mild: #a3cfbb;
	/*危险 Danger*/
	--danger: #dc3545;
	--danger-rgba: rgba(220, 53, 69, 0.62);
	--danger-text: #b02a37;
	--danger-pale: #f8d7da;
	--danger-mild: #f1aeb5;
	/*警告 Warning*/
	--warning: #ffc107;
	--warning-rgba: rgba(255, 193, 7, 0.62);
	--warning-text: #997404;
	--warning-pale: #fff3cd;
	--warning-mild: #ffe69c;
	/*信息 information*/
	--information: #0dcaf0;
	--information-rgba: rgba(13, 202, 240, 0.62);
	--information-text: #087990;
	--information-pale: #cff4fc;
	--information-mild: #9eeaf9;
	/*亮 Light*/
	--light: #f8f9fa;
	--light-text: #6c757d;
	--light-rgba: rgba(248, 249, 250, 0.62);
	--light-pale: #fcfcfd;
	--light-mild: #e9ecef;
	/*暗 Dark*/
	--dark: #212529;
	--dark-rgba: rgba(33, 37, 41, 0.62);
	--dark-text: #495057;
	--dark-pale: #ced4da;
	--dark-mild: #adb5bd;
}

/*常规状态*/

.primary {
	color: var(--light);
	background-color: var(--primary);
}

.secondary {
	color: var(--light);
	background-color: var(--secondary);
}

.success {
	color: var(--light);
	background-color: var(--success);
}

.danger {
	color: var(--light);
	background-color: var(--danger);
}

.warning {
	color: var(--dark);
	background-color: var(--warning);
}

.information {
	color: var(--dark);
	background-color: var(--information);
}

.light {
	color: var(--dark);
	background-color: var(--light);
}

.dark {
	color: var(--light);
	background-color: var(--dark);
}

.none {
	color: transparent;
	background-color: transparent;
}

mark.primary,
mark.secondary,
mark.success,
mark.danger,
mark.warning,
mark.information,
mark.light,
mark.dark {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	padding-left: 0.4rem;
	padding-right: 0.4rem;
	border-radius: var(--radius);
}

/*浅色状态*/

.pale.primary,
.pale-primary {
	color: var(--primary-text);
	background-color: var(--primary-pale);
	border-color: var(--primary-mild);
	border-style: solid;
	border-width: 1px;
}

.pale.secondary,
.pale-secondary {
	color: var(--light-text);
	background-color: var(--secondary-pale);
	border-color: var(--secondary-mild);
	border-style: solid;
	border-width: 1px;
}

.pale.success,
.pale-success {
	color: var(--success-text);
	background-color: var(--success-pale);
	border-color: var(--success-mild);
	border-style: solid;
	border-width: 1px;
}

.pale.danger,
.pale-danger {
	color: var(--danger-text);
	background-color: var(--danger-pale);
	border-color: var(--danger-mild);
	border-style: solid;
	border-width: 1px;
}

.pale.warning,
.pale-warning {
	color: var(--warning-text);
	background-color: var(--warning-pale);
	border-color: var(--warning-mild);
	border-style: solid;
	border-width: 1px;
}

.pale.information,
.pale-information {
	color: var(--information-text);
	background-color: var(--information-pale);
	border-color: var(--information-mild);
	border-style: solid;
	border-width: 1px;
}

.pale.light,
.pale-light {
	color: var(--light-text);
	background-color: var(--light-pale);
	border-color: var(--light-mild);
	border-style: solid;
	border-width: 1px;
}

.pale.dark,
.pale-dark {
	color: var(--dark-text);
	background-color: var(--dark-pale);
	border-color: var(--dark-mild);
	border-style: solid;
	border-width: 1px;
}

mark.pale-primary,
mark.pale-secondary,
mark.pale-success,
mark.pale-danger,
mark.pale-warning,
mark.pale-information,
mark.pale-light,
mark.pale-dark {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	padding-left: 0.4rem;
	padding-right: 0.4rem;
	border-radius: var(--radius);
}

/*半透明状态*/

.alpha.primary,
.alpha-primary {
	color: var(--light);
	background-color: var(--primary-rgba);
}

.alpha.secondary,
.alpha-secondary {
	color: var(--light);
	background-color: var(--secondary-rgba);
}

.alpha.success,
.alpha-success {
	color: var(--light);
	background-color: var(--success-rgba);
}

.alpha.danger,
.alpha-danger {
	color: var(--light);
	background-color: var(--danger-rgba);
}

.alpha.warning,
.alpha-warning {
	color: var(--dark);
	background-color: var(--warning-rgba);
}

.alpha.information,
.alpha-information {
	color: var(--dark);
	background-color: var(--information-rgba);
}

.alpha.light,
.alpha-light {
	color: var(--dark);
	background-color: var(--light-rgba);
}

.alpha.dark,
.alpha-dark {
	color: var(--light);
	background-color: var(--dark-rgba);
}

.blur {
	/*模糊背景*/
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	-moz-backdrop-filter: blur(16px);
	-ms-backdrop-filter: blur(16px);
}

/*文本状态*/

.text.primary,
.text-primary {
	color: var(--primary-text);
}

.text.secondary,
.text-secondary {
	color: var(--secondary-text);
}

.text.success,
.text-success {
	color: var(--success-text);
}

.text.danger,
.text-danger {
	color: var(--danger-text);
}

.text.warning,
.text-warning {
	color: var(--warning-text);
}

.text.information,
.text-information {
	color: var(--information-text);
}

.text.light,
.text-light {
	color: var(--light-text);
}

.text.dark,
.text-dark {
	color: var(--dark-text);
}

.text.none,
.text-none {
	color: transparent;
}

/*闪烁状态*/

@keyframes warning {

	0%,
	from {
		color: var(--warning);
		background-color: transparent;
	}

	100%,
	to {
		color: var(--dark);
		background-color: var(--warning);
	}
}

.flash.warning,
.flash-warning {
	animation: warning alternate 0.6s infinite;
}

@keyframes danger {

	0%,
	from {
		color: var(--danger);
		background-color: transparent;
	}

	100%,
	to {
		color: var(--light);
		background-color: var(--danger);
	}
}

.flash.danger,
.flash-danger {
	animation: danger alternate 0.6s infinite;
}
/*
<form>
	<fieldset>
		<legend></legend>
		<label></label>
		<input type="button" />
		<input type="checkbox" />
		<input type="color" />
		<input type="date" />
		<input type="datetime" />
		<input type="datetime-local" />
		<input type="email" />
		<input type="file" />
		<input type="hidden" />
		<input type="image" />
		<input type="month" />
		<input type="number" />
		<input type="password" />
		<input type="radio" />
		<input type="range" />
		<input type="reset" />
		<input type="search" />
		<input type="submit" />
		<input type="tel" />
		<input type="text" />
		<input type="time" />
		<input type="url" />
		<input type="week" />
		<textarea></textarea>
		<select>
			<optgroup label="Swedish Cars">
				<option value="volvo">Volvo</option>
				<option value="saab">Saab</option>
			</optgroup>
		</select>
		<button></button>
	</fieldset>
	<input list="browsers">
	<datalist id="browsers">
		<option value="Internet Explorer">
		<option value="Firefox">
		<option value="Chrome">
		<option value="Opera">
		<option value="Safari">
	</datalist>
</form>
*/
:root {
	/*圆角*/
	--radius: 3px;
	/*边框*/
	--border: #e0e0e0;
}

form {}

legend {
	border-radius: var(--radius);
	padding: 0.5rem;
}

fieldset {
	border-radius: var(--radius);
	border-color: var(--border);
	border-style: solid;
	border-width: 1px;
}

label {
	font-size: 1rem;
	line-height: 1.5rem;
	padding: 0.25rem;
}

input,
textarea,
select,
button {
	font-size: 1rem;
	line-height: 1.5rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	margin: 0.25rem;

	background-color: white;
	background-clip: padding-box;
	border-color: var(--border);
	border-style: solid;
	border-width: 1px;
	border-radius: var(--radius);

	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

input:focus,
textarea:focus,
select:focus {
	outline: 0;
	border-color: #86b7fe;
	box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25)
}
:root {
	/*默认线条*/
	--line: 1px;
	/*盒子布局主间隔*/
	--space: 1rem;
}

/*
布局
横向：h(horizontal)
纵向：v(vertical)
层叠：s(stack)
分栏：c(column)
*/

.h,
.horizontal {
	/*横向布局，内容满铺*/
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: stretch;
}

.ht,
.horizontal-top {
	/*横向布局，内容靠上*/
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: flex-start;
}

.hc,
.horizontal-center {
	/*横向布局，内容居中*/
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
}

.hb,
.horizontal-bottom {
	/*横向布局，内容靠下*/
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: flex-end;
}

.w,
.wrap {
	flex-wrap: wrap;
}

.h>.g,
.h>.grow,
.horizontal>.g,
.horizontal>.grow,
.ht>.g,
.ht>.grow,
.horizontal-top>.g,
.horizontal-top>.grow,
.hc>.g,
.hc>.grow,
.horizontal-center>.g,
.horizontal-center>.grow,
.hb>.g,
.hb>.grow,
.horizontal-bottom>.g,
.horizontal-bottom>.grow {
	/*横向布局，横向增长*/
	flex-grow: 100;
	overflow: hidden;
	/*width: auto;*/
}

.h>hr,
.horizontal>hr,
.ht>hr,
.horizontal-top>hr,
.hc>hr,
.horizontal-center>hr,
.hb>hr,
.horizontal-bottom>hr {
	/*横向布局，分隔线*/
	width: var(--line);
	height: 100%;
	border: none;
	padding: 0;
	margin: 0;
}

.v,
.vertical {
	/*纵向布局，内容满铺*/
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: stretch;
}

.vl,
.vertical-left {
	/*纵向布局，内容靠左*/
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: flex-start;
}

.vc,
.vertical-center {
	/*纵向布局，内容居中*/
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: center;
}

.vr,
.vertical-right {
	/*纵向布局，内容靠右*/
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: flex-end;
}

.v>.g,
.v>.grow,
.vertical>.g,
.vertical>.grow,
.vl>.g,
.vl>.grow,
.vertical-left>.g,
.vertical-left>.grow,
.vc>.g,
.vc>.grow,
.vertical-center>.g,
.vertical-center>.grow,
.vr>.g,
.vr>.grow,
.vertical-right>.g,
.vertical-right>.grow {
	/*纵向布局，纵向增长*/
	flex-grow: 100;
	overflow: hidden;
	/*height: auto;*/
}

.v>hr,
.vertical>hr,
.vl>hr,
.vertical-left>hr,
.vc>hr,
.vertical-center>hr,
.vr>hr,
.vertical-right>hr {
	/*纵向布局，分隔线*/
	width: 100%;
	height: var(--line);
	border: none;
	padding: 0;
	margin: 0;
}

.s,
.stack {
	/*层叠布局*/
	position: relative;
}

.s>*,
.stack>* {
	position: absolute;
}

.s>.f,
.s>.fill,
.s>.full {
	/*层叠布局，内容满铺*/
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.s>.cm,
.s>.center-middle {
	/*层叠布局，内容居中*/
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.s>.t,
.s>.top {
	/*层叠布局，内容顶铺*/
	top: 0;
	left: 0;
	right: 0;
}

.s>.tl,
.s>.top-left,
.s>.lt,
.s>.left-top {
	/*层叠布局，内容顶左*/
	top: 0;
	left: 0;
}

.s>.tc,
.s>.top-center,
.s>.ct,
.s>.center-top {
	/*层叠布局，内容顶中*/
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.s>.tr,
.s>.top-right,
.s>.rt,
.s>.right-top {
	/*层叠布局，内容顶右*/
	top: 0;
	right: 0;
}

.s>.l,
.s>.left {
	/*层叠布局，内容左铺*/
	top: 0;
	left: 0;
	bottom: 0;
}

.s>.lt,
.s>.left-top,
.s>.tl,
.s>.top-left {
	/*层叠布局，内容左上*/
	top: 0;
	left: 0;
}

.s>.lc,
.s>.left-center,
.s>.cl,
.s>.center-left {
	/*层叠布局，内容左中*/
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.s>.lb,
.s>.left-bottom,
.s>.bl,
.s>.bottom-left {
	/*层叠布局，内容左下*/
	left: 0;
	bottom: 0;
}

.s>.r,
.s>.right {
	/*层叠布局，内容右铺*/
	top: 0;
	right: 0;
	bottom: 0;
}

.s>.rt,
.s>.right-top,
.s>.tr,
.s>.top-right {
	/*层叠布局，内容右上*/
	top: 0;
	right: 0;
}

.s>.rc,
.s>.right-center,
.s>.cr,
.s>.center-right {
	/*层叠布局，内容右中*/
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

.s>.rb,
.s>.right-bottom,
.s>.br,
.s>.bottom-right {
	/*层叠布局，内容右下*/
	right: 0;
	bottom: 0;
}

.s>.b,
.s>.bottom {
	/*层叠布局，内容底铺*/
	left: 0;
	right: 0;
	bottom: 0;
}

.s>.bl,
.s>.bottom-left,
.s>.lb,
.s>.left-bottom {
	/*层叠布局，内容底左*/
	left: 0;
	bottom: 0;
}

.s>.bc,
.s>.bottom-center,
.s>.cb,
.s>.center-bottom {
	/*层叠布局，内容底中*/
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
}

.s>.br,
.s>.bottom-right,
.s>.rb,
.s>.right-bottom {
	/*层叠布局，内容底右*/
	right: 0;
	bottom: 0;
}

.c,
.c2,
.c3,
.c4,
.c5,
.c6,
.column,
.column-2,
.column-3,
.column-4,
.column-5,
.column-6 {}

/*分栏布局*/

.c,
.column {
	column-count: 0;
}

.c2,
.column-2 {
	column-count: 2;
	column-gap: 0;
}

.c3,
.column-3 {
	column-count: 3;
	column-gap: 0;
}

.c4,
.column-4 {
	column-count: 4;
	column-gap: 0;
}

.c5,
.column-5 {
	column-count: 5;
	column-gap: 0;
}

.c6,
.column-6 {
	column-count: 6;
	column-gap: 0;
}

/*布局辅助*/

.w0,
.width-0 {
	box-sizing: border-box;
	flex-basis: 0;
	width: 0;
}

.w5,
.width-5 {
	box-sizing: border-box;
	flex-basis: 5%;
	width: 5%;
}

.w10,
.width-10 {
	box-sizing: border-box;
	flex-basis: 10%;
	width: 10%;
}

.w15,
.width-15 {
	box-sizing: border-box;
	flex-basis: 15%;
	width: 15%;
}

.w20,
.width-20 {
	box-sizing: border-box;
	flex-basis: 20%;
	width: 20%;
}

.w25,
.width-25 {
	box-sizing: border-box;
	flex-basis: 25%;
	width: 25%;
}

.w30,
.width-30 {
	box-sizing: border-box;
	flex-basis: 30%;
	width: 30%;
}

.w35,
.width-35 {
	box-sizing: border-box;
	flex-basis: 35%;
	width: 35%;
}

.w40,
.width-40 {
	box-sizing: border-box;
	flex-basis: 40%;
	width: 40%;
}

.w45,
.width-45 {
	box-sizing: border-box;
	flex-basis: 45%;
	width: 45%;
}

.w50,
.width-50 {
	box-sizing: border-box;
	flex-basis: 50%;
	width: 50%;
}

.w55,
.width-55 {
	box-sizing: border-box;
	flex-basis: 55%;
	width: 55%;
}

.w60,
.width-60 {
	box-sizing: border-box;
	flex-basis: 60%;
	width: 60%;
}

.w65,
.width-65 {
	box-sizing: border-box;
	flex-basis: 65%;
	width: 65%;
}

.w70,
.width-70 {
	box-sizing: border-box;
	flex-basis: 70%;
	width: 70%;
}

.w75,
.width-75 {
	box-sizing: border-box;
	flex-basis: 75%;
	width: 75%;
}

.w80,
.width-80 {
	box-sizing: border-box;
	flex-basis: 80%;
	width: 80%;
}

.w85,
.width-85 {
	box-sizing: border-box;
	flex-basis: 85%;
	width: 85%;
}

.w90,
.width-90 {
	box-sizing: border-box;
	flex-basis: 90%;
	width: 90%;
}

.w95,
.width-95 {
	box-sizing: border-box;
	flex-basis: 95%;
	width: 95%;
}

.w100,
.width-100 {
	box-sizing: border-box;
	flex-basis: 100%;
	width: 100%;
}

.w62,
.width-62 {
	box-sizing: border-box;
	flex-basis: 61.8%;
	width: 61.8%;
}

.w38,
.width-38 {
	box-sizing: border-box;
	flex-basis: 38.2%;
	width: 38.2%;
}

.h0,
.height-0 {
	box-sizing: border-box;
	flex-basis: 0;
	height: 0;
}

.h5,
.height-5 {
	box-sizing: border-box;
	flex-basis: 5%;
	height: 5%;
}

.h10,
.height-10 {
	box-sizing: border-box;
	flex-basis: 10%;
	height: 10%;
}

.h15,
.height-15 {
	box-sizing: border-box;
	flex-basis: 15%;
	height: 15%;
}

.h20,
.height-20 {
	box-sizing: border-box;
	flex-basis: 20%;
	height: 20%;
}

.h25,
.height-25 {
	box-sizing: border-box;
	flex-basis: 25%;
	height: 25%;
}

.h30,
.height-30 {
	box-sizing: border-box;
	flex-basis: 30%;
	height: 30%;
}

.h35,
.height-35 {
	box-sizing: border-box;
	flex-basis: 35%;
	height: 35%;
}

.h40,
.height-40 {
	box-sizing: border-box;
	flex-basis: 40%;
	height: 40%;
}

.h45,
.height-45 {
	box-sizing: border-box;
	flex-basis: 45%;
	height: 45%;
}

.h50,
.height-50 {
	box-sizing: border-box;
	flex-basis: 50%;
	height: 50%;
}

.h55,
.height-55 {
	box-sizing: border-box;
	flex-basis: 55%;
	height: 55%;
}

.h60,
.height-60 {
	box-sizing: border-box;
	flex-basis: 60%;
	height: 60%;
}

.h65,
.height-65 {
	box-sizing: border-box;
	flex-basis: 65%;
	height: 65%;
}

.h70,
.height-70 {
	box-sizing: border-box;
	flex-basis: 70%;
	height: 70%;
}

.h75,
.height-75 {
	box-sizing: border-box;
	flex-basis: 75%;
	height: 75%;
}

.h80,
.height-80 {
	box-sizing: border-box;
	flex-basis: 80%;
	height: 80%;
}

.h85,
.height-85 {
	box-sizing: border-box;
	flex-basis: 85%;
	height: 85%;
}

.h90,
.height-90 {
	box-sizing: border-box;
	flex-basis: 90%;
	height: 90%;
}

.h95,
.height-95 {
	box-sizing: border-box;
	flex-basis: 95%;
	height: 95%;
}

.h100,
.height-100 {
	box-sizing: border-box;
	flex-basis: 100%;
	height: 100%;
}

.h62,
.height-62 {
	box-sizing: border-box;
	flex-basis: 61.8%;
	height: 61.8%;
}

.h38,
.height-38 {
	box-sizing: border-box;
	flex-basis: 38.2%;
	height: 38.2%;
}

/*间隔*/

.m0,
.margin-0 {
	margin: 0;
}

.m1,
.margin-1 {
	margin: 1px;
}

.ma,
.margin-auto {
	margin: auto;
}

.ms,
.margin-small {
	margin: calc(var(--space) / 2);
}

.mm,
.margin-medium {
	margin: var(--space);
}

.ml,
.margin-large {
	margin: calc(var(--space) * 2);
}

.mx,
.margin-extra {
	margin: calc(var(--space) * 4);
}

/*横向布局间隔*/

.hm0>*,
.horizontal-margin-0>* {
	margin-left: 0;
	margin-right: 0;
}

.hm1>*,
.horizontal-margin-1>* {
	margin-left: 1px;
	margin-right: 1px;
}

.hma>*,
.horizontal-margin-auto>* {
	margin-left: auto;
	margin-right: auto;
}

.hms>*,
.horizontal-margin-small>* {
	margin-left: calc(var(--space) / 2);
	margin-right: calc(var(--space) / 2);
}

.hmm>*,
.horizontal-margin-medium>* {
	margin-left: var(--space);
	margin-right: var(--space);
}

.hml>*,
.horizontal-margin-large>* {
	margin-left: calc(var(--space) * 2);
	margin-right: calc(var(--space) * 2);
}

.hmx>*,
.horizontal-margin-extra>* {
	margin-left: calc(var(--space) * 4);
	margin-right: calc(var(--space) * 4);
}

.hm0>:first-child,
.horizontal-margin-0>:first-child,
.hm1>:first-child,
.horizontal-margin-1>:first-child,
.hma>:first-child,
.horizontal-margin-auto>:first-child,
.hms>:first-child,
.horizontal-margin-small>:first-child,
.hmm>:first-child,
.horizontal-margin-medium>:first-child,
.hml>:first-child,
.horizontal-margin-large>:first-child,
.hmx>:first-child,
.horizontal-margin-extra>:first-child {
	margin-left: 0;
}

.hm0>:last-child,
.horizontal-margin-0>:last-child,
.hm1>:last-child,
.horizontal-margin-1>:last-child,
.hma>:last-child,
.horizontal-margin-auto>:last-child,
.hms>:last-child,
.horizontal-margin-small>:last-child,
.hmm>:last-child,
.horizontal-margin-medium>:last-child,
.hml>:last-child,
.horizontal-margin-large>:last-child,
.hmx>:last-child,
.horizontal-margin-extra>:last-child {
	margin-right: 0;
}

/*纵向间隔*/

.vm0>*,
.vertical-margin-0>* {
	margin-top: 0;
	margin-bottom: 0;
}

.vm1>*,
.vertical-margin-1>* {
	margin-top: 1px;
	margin-bottom: 1px;
}

.vma>*,
.vertical-margin-auto>* {
	margin-top: auto;
	margin-bottom: auto;
}

.vms>*,
.vertical-margin-small>* {
	margin-top: calc(var(--space) / 2);
	margin-bottom: calc(var(--space) / 2);
}

.vmm>*,
.vertical-margin-medium>* {
	margin-top: var(--space);
	margin-bottom: var(--space);
}

.vml>*,
.vertical-margin-large>* {
	margin-top: calc(var(--space) * 2);
	margin-bottom: calc(var(--space) * 2);
}

.vmx>*,
.vertical-margin-extra>* {
	margin-top: calc(var(--space) * 4);
	margin-bottom: calc(var(--space) * 4);
}

.vm0>:first-child,
.vertical-margin-0>:first-child,
.vm1>:first-child,
.vertical-margin-1>:first-child,
.vma>:first-child,
.vertical-margin-auto>:first-child,
.vms>:first-child,
.vertical-margin-small>:first-child,
.vmm>:first-child,
.vertical-margin-medium>:first-child,
.vml>:first-child,
.vertical-margin-large>:first-child,
.vmx>:first-child,
.vertical-margin-extra>:first-child {
	margin-top: 0;
}

.vm0>:last-child,
.vertical-margin-0>:last-child,
.vm1>:last-child,
.vertical-margin-1>:last-child,
.vma>:last-child,
.vertical-margin-auto>:last-child,
.vms>:last-child,
.vertical-margin-small>:last-child,
.vmm>:last-child,
.vertical-margin-medium>:last-child,
.vml>:last-child,
.vertical-margin-large>:last-child,
.vmx>:last-child,
.vertical-margin-extra>:last-child {
	margin-bottom: 0;
}

/*分栏间隔*/

.cm0,
.column-margin-0 {
	column-gap: 0;
	margin: 0;
}

.cm0>*,
.column-margin-0>* {
	margin: 0;
}

.cm1,
.column-margin-1 {
	column-gap: 1px;
	padding-bottom: -1px;
}

.cm1>*,
.column-margin-1>* {
	margin-bottom: 1px;
}

.cma,
.column-margin-auto {
	column-gap: normal;
}

.cma>*,
.column-margin-auto>* {
	margin: auto;
}

.cms,
.column-margin-small {
	column-gap: calc(var(--space));
}

.cms>*,
.column-margin-small>* {
	margin-bottom: calc(var(--space));
}

.cmm,
.column-margin-medium {
	column-gap: calc(var(--space) * 2);
}

.cmm>*,
.column-margin-medium>* {
	margin-bottom: calc(var(--space) * 2);
}

.cml,
.column-margin-large {
	column-gap: calc(var(--space) * 4);
}

.cml>*,
.column-margin-large>* {
	margin-bottom: calc(var(--space) * 4);
}

.cmx,
.column-margin-extra {
	column-gap: calc(var(--space) * 8);
}

.cmx>*,
.column-margin-extra>* {
	margin-bottom: calc(var(--space) * 8);
}

/*填充空间*/

.p0 {
	padding: 0;
}

.p1 {
	padding: 1px;
}

.pa,
.padding-auto {
	padding: auto;
}

.ps,
.padding-small {
	padding: calc(var(--space) / 2);
}

.pm,
.padding-medium {
	padding: var(--space);
}

.pl,
.padding-large {
	padding: calc(var(--space) * 2);
}

.px,
.padding-extra {
	padding: calc(var(--space) * 4);
}

/*圆角*/

.r0 {
	border-radius: 0;
}

.r1 {
	border-radius: 1px;
}

.rs {
	border-radius: calc(var(--space) / 4);
}

.rm {
	border-radius: calc(var(--space) / 2);
}

.rl {
	border-radius: calc(var(--space) * 1);
}

.rx {
	border-radius: calc(var(--space) * 2);
}

/*滚动条*/

.sa,
.scroll-all {
	overflow: auto !important;
	overflow: overlay !important;
}

.sx,
.scroll-x {
	overflow-x: auto !important;
	overflow-x: overlay !important;
	overflow-y: hidden !important;
}

.sy,
.scroll-y {
	overflow-x: hidden !important;
	overflow-y: auto !important;
	overflow-y: overlay !important;
}

.sa,
.sx,
.sy {
	/* 滚动条样式*/
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/*文本对齐*/

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

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

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

.te,
.text-ellipsis {
	/*文本超出范围显示省略号*/
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	word-break: break-all;
}

/*图像*/

img {
	max-width: 100%;
	/*修正img底部空白*/
	vertical-align: middle;
}

img.q1 {
	/*square 32px*/
	width: 2rem;
	height: 2rem;
}

/*遮罩*/

.mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999999;
	/*半透明*/
	background-color: rgba(00, 00, 0, 0.5);
	/*模糊*/
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	-moz-backdrop-filter: blur(16px);
	-ms-backdrop-filter: blur(16px);
}

.mask>* {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.unselect {
	/*禁止选中文本*/
	user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
}

.hide {
	/*隐藏*/
	display: none;
	visibility: hidden;
}