/*
=================================================================================
* License: GPL-2.0 license
* Author: 众产®  https://ciy.cn/code
* Version: 0.1.0
=================================================================================
--txt[1-9]	文字色系
--bg[1-9]	背景边框色系
--man/imp/warn/dag		强调色系

.ciy*		常用专属样式
.btn		定制button样式
.md*		简约MarkDown样式

*/
page,
body {
	/* 1 淡   5    9浓 */

	/* 
zIndex  z-index 规划:
1-9		页内rel
10-30	页内fix   btnadd 10；
31-39	组件fix
40-49	header/tabbar fix
50-60	auth登录？
99		captcha
100-120	tip/冒泡提示
50000	header/tabbar
50005	camera
50010	组件全屏mask
50020	alert
50030	toast


title			bg2
card			bg2   title   bg4
grid			bg3
pagebg			bg4
tabbar			bg3   bg6
card			bg3
*/

	/* 文字色 */
	--txt1: #8c9ba4;
	--txt2: #818e97;
	--txt3: #738088;
	--txt4: #646e76;
	--txt5: #576067;
	--txt6: #454d52;
	--txt7: #2c3236;
	--txt8: #060708;
	--txt9: #000000;

	/* 背景边框色 */
	--bg1: #ffffff;
	--bg2: #fbfbfc;
	--bg3: #f7f8f8;
	--bg4: #f0f2f2;
	--bg5: #e3e6e7;
	--bg6: #cdd2d4;
	--bg7: #afb6b9;
	--bg8: #939da1;
	--bg9: #7e8a8e;


	/* 主色 */
	--man2: #e1f6ff;
	--man3: #a6d2fa;
	--man4: #80c1f3;
	--man5: #1E9FFF;
	--man6: #1989d8;
	--man7: #8568f7;
	--mant: #ffffff;

	/* 成功色 */
	--succ4: #02dd40;
	--succ5: #03a547;
	--succ6: #036d2d;
	--succt: #ffffff;
	/* 警示色 */
	--warn4: #fcfbc7;
	--warn5: #f5d417;
	--warn6: #e39725;
	--warnt: #ffffff;
	/* 失败色 */
	--dag4: #ffac37;
	--dag5: #e34242;
	--dag6: #a91313;
	--dagt: #ffffff;

	--e-switch-bg: #ffffff;
	--e-switch-br: #dcdcdc;
	--e-switch-txt: #2c3236;
	--e-switch-chkbgdis: #1b709e;
	--e-switch-chkbg: #19a2fc;
	--e-switch-chktxt: #ffffff;
	--e-switch-shadow: 0 2px 5px 1px #00000042;

	--e-userbg1: #aedc05;
	--e-userbg2: #16ea2e;
	--e-headerbg1: #dff7ff;
	--e-headerbg2: #eaffe6;
}

.dark {
	/* 文字色 */
	--txt1: #8d9ca6;
	--txt2: #98a5ae;
	--txt3: #a5b1b9;
	--txt4: #b1bbc2;
	--txt5: #c2cad0;
	--txt6: #d3d9dd;
	--txt7: #e7eaec;
	--txt8: #f5f6f7;
	--txt9: #ffffff;

	/* 背景边框色 */
	--bg1: #000000;
	--bg2: #0d1112;
	--bg3: #151a1b;
	--bg4: #1f2526;
	--bg5: #272e2f;
	--bg6: #32393b;
	--bg7: #485155;
	--bg8: #5d686d;
	--bg9: #6f7c82;


	--man3: #032c44;
	--man4: #175787;
	--man5: #1E9FFF;
	--man6: #83c1f1;
	--man7: #8568f7;
	--mant: #ffffff;

	/* 成功色 */
	--succ4: #036d2d;
	--succ5: #03a547;
	--succ6: #02dd40;
	--succt: #ffffff;
	/* 警示色 */
	--warn4: #e39725;
	--warn5: #f5d417;
	--warn6: #fcfbc7;
	--warnt: #ffffff;
	/* 失败色 */
	--dag4: #a91313;
	--dag5: #e34242;
	--dag6: #f9ddc0;
	--dagt: #ffffff;

	--e-userbg1: #b9b527;
	--e-userbg2: #00770e;

	--e-headerbg1: #07bff1;
	--e-headerbg2: #2c700c;
}

page,
body,
view,
text {
	box-sizing: border-box;
	/* font-size: clamp(14px, 4vw, 40px); */
	font-size-adjust: ex-height 0.53;
}

::-webkit-scrollbar {
	display: none;
}

.def {
	background: var(--bg2) !important;
	color: var(--txt7) !important;
}

.def.b {
	border: 1px solid var(--bg6) !important;
}

.def.liner {
	background: linear-gradient(310deg, var(--bg3), var(--bg6)) !important;
}

.dag {
	background: var(--dag5) !important;
	color: var(--dagt) !important;
	border: 1px solid var(--dag5) !important;
}

.dag.b {
	border: 1px solid var(--dag6) !important;
}

.dag.liner {
	background: linear-gradient(310deg, var(--dag5), var(--dag6)) !important;
}

.succ {
	background: var(--succ5) !important;
	color: var(--succt) !important;
	border: 1px solid var(--succ5) !important;
}

.succ.b {
	border: 1px solid var(--succ6) !important;
}

.succ.liner {
	background: linear-gradient(310deg, var(--succ5), var(--succ6)) !important;
}

.warn {
	background: var(--warn6) !important;
	color: var(--warnt) !important;
	border: 1px solid var(--warn6) !important;
}

.warn.b {
	border: 1px solid var(--warn6) !important;
}

.warn.liner {
	background: linear-gradient(310deg, var(--warn5), var(--warn6)) !important;
}

.man {
	background: var(--man6) !important;
	color: var(--mant) !important;
	border: 1px solid var(--man6) !important;
}

.man.b {
	border: 1px solid var(--man7) !important;
}

.man.liner {
	background: linear-gradient(310deg, var(--man6), var(--man7)) !important;
}

/*列表页*/
.ciy-list {
	position: relative;
	margin: 1rem;
	padding: 0.8rem;
	background: var(--bg1);
	border-radius: 0.5rem;
	overflow: hidden;
	transition: transform ease-in 0.5s;
}

.ciy-list.del {
	transform: translateX(-100vw);
	opacity: 0.5;
}

.ciy-list .l0 {
	font-size: 0.8rem;
	padding-right: 6rem;
	color: var(--txt1);
}

.ciy-list .l1 {
	font-size: 1.2rem;
	padding: 0.3em 1.5em 0.3em 0.5rem;
}

.ciy-list .l2 {
	display: flex;
	align-items: center;
	padding: 0.5em 0;
}

.ciy-list .l2>label {
	color: var(--txt9);
	min-width: 5rem;
	flex-shrink: 0;
	white-space: nowrap;
	padding-right: 1rem;
}

.ciy-list .l2>view {
	flex: 1;
	color: var(--txt6);
	text-align: right;
}

.ciy-list .l3 {
	font-size: 0.9rem;
	padding: 0.3em 1.3rem;
	color: var(--txt3);
}

.ciy-list .rtz {
	position: absolute;
	top: 1rem;
	right: -2.5rem;
	height: 2rem;
	line-height: 2rem;
	width: 9rem;
	text-align: center;
	transform: rotate(45deg);
}

.ciy-list .rt {
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	text-align: right;
	font-size: 0.9rem;
}

.ciy-list .rb {
	text-align: right;
	font-size: 0.9rem;
}

.ciy-list .lb {
	position: absolute;
	bottom: 0.9rem;
	left: 1.2rem;
	font-size: 0.9rem;
}

.ciy-list .dot {
	position: absolute;
	bottom: 0.5rem;
	right: 1rem;
	padding: 1rem;
	width: 1.3rem;
	height: 1.3rem;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUwOS4xMDAyMzQyNiA1MTJtLTE1My4yNzMzMzEzNCAwYTE1My4yNzMzMzEzNiAxNTMuMjczMzMxMzYgMCAxIDAgMzA2LjU0NjY2MjcgMCAxNTMuMjczMzMxMzYgMTUzLjI3MzMzMTM2IDAgMSAwLTMwNi41NDY2NjI3IDBaIiBmaWxsPSIjNzA3MDcwIj48L3BhdGg+PHBhdGggZD0iTTc4OS43NjE4NDA4MiA1MTJtLTkxLjQ2MTE4MTY0IDBhOTEuNDYxMTgxNjQgOTEuNDYxMTgxNjQgMCAxIDAgMTgyLjkyMjM2MzI5IDAgOTEuNDYxMTgxNjQgOTEuNDYxMTgxNjQgMCAxIDAtMTgyLjkyMjM2MzI5IDBaIiBmaWxsPSIjNzA3MDcwIj48L3BhdGg+PHBhdGggZD0iTTIzNC4yMzgxNTkxOCA1MTJtLTkxLjQ2MTE4MTY0IDBhOTEuNDYxMTgxNjQgOTEuNDYxMTgxNjQgMCAxIDAgMTgyLjkyMjM2MzI4IDAgOTEuNDYxMTgxNjQgOTEuNDYxMTgxNjQgMCAxIDAtMTgyLjkyMjM2MzI4IDBaIiBmaWxsPSIjNzA3MDcwIj48L3BhdGg+PC9zdmc+");
}


.ciy-add {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	width: 4rem;
	height: 4rem;
	opacity: 0.95;
	z-index: 10;
	border-radius: 2rem;
	background: linear-gradient(90deg, #8568f7, #4981ff);
}

.ciy-add::after {
	content: ' ';
	position: absolute;
	margin: 1rem;
	width: 2rem;
	height: 2rem;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTkyNS42OTYgMzg0cTE5LjQ1NiAwIDM3LjM3NiA3LjY4dDMwLjcyIDIwLjQ4IDIwLjQ4IDMwLjcyIDcuNjggMzcuMzc2cTAgMjAuNDgtNy42OCAzNy44ODh0LTIwLjQ4IDMwLjIwOC0zMC43MiAyMC40OC0zNy4zNzYgNy42OGwtMjg3Ljc0NCAwIDAgMjg3Ljc0NHEwIDIwLjQ4LTcuNjggMzcuODg4dC0yMC40OCAzMC4yMDgtMzAuNzIgMjAuNDgtMzcuMzc2IDcuNjhxLTIwLjQ4IDAtMzcuODg4LTcuNjh0LTMwLjIwOC0yMC40OC0yMC40OC0zMC4yMDgtNy42OC0zNy44ODhsMC0yODcuNzQ0LTI4Ny43NDQgMHEtMjAuNDggMC0zNy44ODgtNy42OHQtMzAuMjA4LTIwLjQ4LTIwLjQ4LTMwLjIwOC03LjY4LTM3Ljg4OHEwLTE5LjQ1NiA3LjY4LTM3LjM3NnQyMC40OC0zMC43MiAzMC4yMDgtMjAuNDggMzcuODg4LTcuNjhsMjg3Ljc0NCAwIDAtMjg3Ljc0NHEwLTE5LjQ1NiA3LjY4LTM3LjM3NnQyMC40OC0zMC43MiAzMC4yMDgtMjAuNDggMzcuODg4LTcuNjhxMzkuOTM2IDAgNjguMDk2IDI4LjE2dDI4LjE2IDY4LjA5NmwwIDI4Ny43NDQgMjg3Ljc0NCAweiIgZGF0YS1zcG0tYW5jaG9yLWlkPSJhMzEzeC5zZWFyY2hfaW5kZXguMC5pNi41NTEwM2E4MW5Iald1ViIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==");
}

.ciy-close {
	position: absolute;
	font-size: 2rem;
	color: var(--dagt);
	line-height: 0.9rem;
	background: var(--dag5);
	width: 1rem;
	height: 1rem;
	text-align: center;
	border-radius: 50%;
}

.btn {
	background: linear-gradient(347deg, var(--man5), var(--man7));
	color: var(--mant);
	border: 1px solid var(--man6);
	position: relative;
	display: inline-block;
	padding: 0.5em 0.8rem;
	font-size: 1rem;
	line-height: 1rem;
	margin: 2px;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	border-radius: 0.7rem;
}

.btn::after {
	content: "Loading...";
	position: absolute;
	bottom: 0;
	right: 0.3rem;
	width: auto;
	height: auto;
	top: auto;
	left: auto;
	font-size: 1rem;
	transform-origin: right bottom;
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.3s;
}

.btn.button-hover,
.btn:active {
	background: var(--man5);
	color: var(--mant);
	border: 1px solid var(--bg9);
}

.btn.loading::after {
	opacity: 0.5;
	transform: scale(0.4);
}

.btn.lg {
	font-size: 1.3rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.btn.lgg {
	font-size: 1.5rem;
	padding: 0.7em 1.5rem;
}

.btn.sm {
	font-size: 0.8rem;
}

.btn.smm {
	font-size: 0.7rem;
}

.btn.xs {
	font-size: 0.7rem;
	padding: 0.2em 0.8rem;
}

.btn.sq {
	border-radius: 0.3rem;
}

.btn.cc {
	border-radius: 1.5rem;
}

.btn.long {
	width: 80%;
}

.btn[disabled] {
	opacity: 0.5;
}

.btn.def {
	border: 1px solid var(--bg6);
}

.btn.def:active {
	background: var(--bg1) !important;
	color: var(--txt9) !important;
	border: 1px solid var(--bg9);
}

.btn.tran {
	border: none;
	background: transparent;
}


/*页面flex布局模式*/
.ciy-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.ciy-page .main {
	flex: 1;
	overflow: auto;
}

/*说明块*/
.ciy-tip {
	background: var(--warn4);
	margin: 0.5rem;
	padding: 0.5rem;
	border: 1px solid var(--warn5);
	border-radius: 0.3rem;
	color: var(--txt8);
}

/*断行*/
.ciy-height {
	height: 0.3rem;
}


/*分隔线装饰*/
.ciy-hr {
	position: relative;
	z-index: 10;
	height: 1px;
	width: 100%;
	flex: none;
	background: linear-gradient(90deg, transparent, var(--bg7), transparent);
}

/*九宫格*/
.ciy-grid {
	display: flex;
	flex-wrap: wrap;
}

.ciy-grid .grid {
	width: 25%;
	text-align: center;
	padding-top: 0.8rem;
	padding-bottom: 0.2rem;
}

.ciy-grid.grid3 .grid {
	width: 33.3%;
}

.ciy-grid.grid5 .grid {
	width: 20%;
}

.ciy-grid .name {
	padding: 0.5em 0;
	color: var(--txt7);
	font-size: 0.9rem;
}

.ciy-grid .icon {
	width: 2rem;
	height: 2rem;
	display: block;
	position: relative;
	margin: 0 auto;
	background-size: cover;
}

.ciy-grid .br {
	width: 100%;
	height: 0;
}

.ciy-grid .title {
	width: 100%;
	margin: 1em 0 0 0.5rem;
	font-weight: bolder;
	text-shadow: 0 0 2px var(--bg2);
	letter-spacing: 2px;
	color: var(--txt7);
}

/*标题分隔*/
.ciy-title {
	display: flex;
	align-items: center;
	padding: 0.8em 1rem;
	font-size: 1.1rem;
	position: relative;
	font-weight: bolder;
	color: var(--txt9);
}

.ciy-title.mk::before {
	content: "";
	width: 0.4rem;
	height: 1.5rem;
	margin-right: 0.3rem;
	border-radius: 0.3rem;
	vertical-align: middle;
	background: linear-gradient(-60deg, var(--man4), var(--man7));
}


.ciy-title .title {
	flex: 1;
	color: var(--txt9);
}

.ciy-title .right {
	font-size: 0.9rem;
	font-weight: normal;
	color: var(--txt5);
}

.ciy-caption {
	display: flex;
	align-items: center;
	padding: 0.8em 1rem;
	font-size: 1.1rem;
	position: relative;
	font-weight: bolder;
	background: var(--bg2);
	color: var(--txt7);
	border-top: 1px solid var(--bg5);
	border-bottom: 1px solid var(--bg6);
}

.ciy-caption.mk::before {
	content: "";
	width: 0.3rem;
	height: 1.5rem;
	margin-right: 0.3rem;
	border-radius: 0.3rem;
	vertical-align: middle;
	background: var(--man5);
}

.ciy-caption .title {
	flex: 1;
	color: var(--txt9);
}

.ciy-caption .right {
	font-size: 0.9rem;
	font-weight: normal;
	color: var(--txt5);
}

.ciy-caption .sub {
	position: absolute;
	bottom: 0;
	left: 3rem;
	font-size: 0.7rem;
	font-weight: normal;
	color: var(--txt1);
}

/*卡片块*/
.ciy-card {
	margin: 0.5rem;
	border: 1px solid var(--bg6);
	border-radius: 0.3rem;
	box-shadow: 0 0 6px var(--bg6);
	background: var(--bg2);
	position: relative;
}

.ciy-card>.title {
	border-radius: 0.3em 0.3em 0 0;
	padding-left: 1rem;
	height: 2.5rem;
	line-height: 2.5rem;
	background: var(--bg4);
	font-weight: bold;
}

.ciy-card>.title.mk::before {
	content: "";
	width: 0.2rem;
	display: inline-block;
	border-radius: 0.2rem;
	margin-right: 0.4rem;
	vertical-align: middle;
	height: 1.5rem;
	background: var(--man5);
}

.ciy-card .right {
	position: absolute;
	height: 2.5rem;
	line-height: 2.5rem;
	padding-right: 1rem;
	color: var(--txt5);
	top: 0;
	right: 0;
}

.ciy-card>.content {
	padding: 1rem;
}

.ciy-card>.content>view {
	line-height: 1.5rem;
	margin-bottom: 0.5rem;
}

.ciy-load {
	padding: 3em 0 8em 3rem;
	line-height: 2rem;
	background: linear-gradient(180deg, var(--bg5), transparent);
}

.ciy-skeleton {
	background: var(--bg4);
	background: linear-gradient(45deg, var(--bg4) 25%, var(--bg1) 50%, var(--bg4) 75%);
	background-size: 200% 100%;
	animation: skeleton 3s linear infinite;
	border-radius: 0.3rem;
	margin-bottom: 1rem;
}

@keyframes skeleton {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

.code,
.kbd {
	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
	padding: 0.1em 0.4em 0 0.4rem;
	margin: 0 0.2rem;
	font-size: 0.9rem;
	line-height: 1.3rem;
	border-radius: 0.2rem;
	display: inline-block;
	vertical-align: baseline;
}

.code {
	color: #bd210c;
	border: 1px solid #f5dde3;
	background-color: #f9f2f4;
}

.kbd {
	color: #ffffff;
	background: linear-gradient(340deg, var(--man5), var(--man7));
}

.ciy-icon-arrow {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE5MiAzNjBjMC0xMC43NTIgMy45NjgtMjAuMDk2IDExLjkwNC0yOC4wOTZDMjExLjkwNCAzMjMuOTA0IDIyMS4yNDggMzIwIDIzMiAzMjBsNTYwIDBjMTAuODE2IDAgMjAuMTYgMy45MDQgMjguMDk2IDExLjkwNEM4MjguMDk2IDMzOS45MDQgODMyIDM0OS4yNDggODMyIDM2MHMtMy45MDQgMjAuMDk2LTExLjkwNCAyOC4wOTZsLTI4MCAyODBDNTMyLjE2IDY3NS45NjggNTIyLjgxNiA2ODAgNTEyIDY4MGMtMTAuNzUyIDAtMjAuMDk2LTMuOTY4LTI4LjA5Ni0xMS45MDRMMjAzLjkwNCAzODguMDk2QzE5NS45NjggMzgwLjA5NiAxOTIgMzcwLjc1MiAxOTIgMzYweiIgZmlsbD0iIzhhOGE4YSI+PC9wYXRoPjwvc3ZnPg==");
}

.ciy-form-group {
	background: var(--bg2);
	margin: 1rem;
	overflow: hidden;
	border-radius: 0.5rem;
	position: relative;
	border: 1px solid var(--bg4);
	border-bottom: 2px solid var(--bg6);

}

.ciy-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1rem;
	z-index: 40;
	text-align: center;
	background: var(--bg1);
	border-top: 1px solid var(--bg6);
}

.ciy-form-bottom {
	position: relative;
	z-index: 40;
	text-align: center;
	padding: 0.5em 0;
}

.ciy-form {
	width: 100%;
	display: flex;
	position: relative;
	align-items: center;
	border-bottom: 1px solid var(--bg5);
	min-height: 4rem;
}

.ciy-form>view {
	text-align: right;
	flex: 1;
}

.ciy-form>view:last-child {
	margin-right: 1rem;
}

.ciy-form>label {
	margin: 0 1rem;
	flex-shrink: 0;
	white-space: nowrap;
	align-self: flex-start;
	line-height: 4rem;
}

.ciy-form>label.imp {
	font-weight: bold;
}

.ciy-form>label.imp::before {
	content: '';
	position: absolute;
	left: 0.3rem;
	top: 0.8rem;
	width: 0.4rem;
	height: 0.4rem;
	background: var(--dag5);
	border-radius: 50%;
}

.char2 label.imp::before,
.char3 label.imp::before,
.char4 label.imp::before,
.char5 label.imp::before,
.char6 label.imp::before {
	right: -0.5rem;
	left: auto;
}

.char2 label,
.char3 label,
.char4 label,
.char5 label,
.char6 label {
	text-align: right;
	position: relative;
}

.char2 label {
	min-width: 2rem;
}

.char3 label {
	min-width: 3rem;
}

.char4 label {
	min-width: 4rem;
}

.char5 label {
	min-width: 5rem;
}

.char6 label {
	min-width: 6rem;
}

.ciy-form.v {
	flex-direction: column;
	align-items: flex-start;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.ciy-form.v>view {
	text-align: left;
	margin: 0 0.5rem;
	width: calc(100% - 1em);
}

.ciy-form.v>label {
	height: 2rem;
	line-height: 2rem;
}

.ciy-waterfall {
	column-count: 2;
	column-gap: 0.5rem;
}

.ciy-waterfall .itmcont {
	margin-bottom: 0.5rem;
	width: 100%;
	break-inside: avoid;
}

.ciy-edit:focus {
	outline: none;
	box-shadow: 0 0 1em var(--bg1) inset;
}

.md-h1 {
	font-weight: bold;
	font-size: 1.2rem;
	line-height: 1.5rem;
	text-align: left;
	padding: 0.5em 0 0.5em 0.5rem;
}

.md-h2 {
	font-weight: bold;
	font-size: 1.1rem;
	line-height: 1.8rem;
	padding: 0.5em 0 0.5em 0.5rem;
}

.md-h3,
.md-h4,
.md-h5 {
	font-weight: bold;
	font-size: 1rem;
	line-height: 1.5rem;
	padding: 0.5em 0 0.5em 0.5rem;
}

.md-content {
	font-size: 1rem;
	text-indent: 1rem;
	line-height: 2rem;
	white-space: pre-wrap;
}

.md-code {
	text-indent: 0;
	padding: 0.2em 0.4rem;
	font-size: 0.9rem;
	line-height: 1rem;
	margin: 0 0.2rem;
	display: inline-block;
	white-space: nowrap;
	color: #ffffff;
	background: linear-gradient(340deg, var(--man5), var(--man7));
	border-radius: 0.2rem;
}

.txt-smmm.txt-smmm.txt-smmm {
	font-size: 0.7rem;
}

.txt-smm.txt-smm.txt-smm {
	font-size: 0.8rem;
}

.txt-sm.txt-sm.txt-sm {
	font-size: 0.9rem;
}

.txt-lg.txt-lg.txt-lg {
	font-size: 1.2rem;
}

.txt-lgg.txt-lgg.txt-lgg {
	font-size: 1.5rem;
}

.txt-lggg.txt-lggg.txt-lggg {
	font-size: 2rem;
}

.txt-lgggg.txt-lgggg.txt-lgggg {
	font-size: 3rem;
}

.txt-wb.txt-wb.txt-wb {
	font-weight: bold;
}

.txt-wl.txt-wl.txt-wl {
	font-weight: 300;
}

.txt-un.txt-un.txt-un {
	text-decoration: underline;
}

.txt-del.txt-del.txt-del {
	text-decoration: line-through;
}

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

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

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

.txt-just.txt-just {
	text-align: justify;
}

.txt-nowrap.txt-nowrap {
	white-space: nowrap;
}

.txt-over.txt-over {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.txt1.txt1.txt1 {
	color: var(--txt1);
}

.txt2.txt2.txt2 {
	color: var(--txt2);
}

.txt3.txt3.txt3 {
	color: var(--txt3);
}

.txt4.txt4.txt4 {
	color: var(--txt4);
}

.txt5.txt5.txt5 {
	color: var(--txt5);
}

.txt6.txt6.txt6 {
	color: var(--txt6);
}

.txt7.txt7.txt7 {
	color: var(--txt7);
}

.txt8.txt8.txt8 {
	color: var(--txt8);
}

.txt9.txt9.txt9 {
	color: var(--txt9);
}

.bg1.bg1.bg1 {
	background-color: var(--bg1);
}

.bg2.bg2.bg2 {
	background-color: var(--bg2);
}

.bg3.bg3.bg3 {
	background-color: var(--bg3);
}

.bg4.bg4.bg4 {
	background-color: var(--bg4);
}

.bg5.bg5.bg5 {
	background-color: var(--bg5);
}

.bg6.bg6.bg6 {
	background-color: var(--bg6);
}

.bg7.bg7.bg7 {
	background-color: var(--bg7);
}

.bg8.bg8.bg8 {
	background-color: var(--bg8);
}

.bg9.bg9.bg9 {
	background-color: var(--bg9);
}

.px1.px1.px1 {
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

.px2.px2.px2 {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.px3.px3.px3 {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.px4.px4.px4 {
	padding-left: 1rem;
	padding-right: 1rem;
}

.py1.py1.py1 {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.py2.py2.py2 {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.py3.py3.py3 {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.py4.py4.py4 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.mx0.mx0.mx0 {
	margin-left: 0;
	margin-right: 0;
}

.mx1.mx1.mx1 {
	margin-left: 0.25rem;
	margin-right: 0.25rem;
}

.mx2.mx2.mx2 {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

.mx3.mx3.mx3 {
	margin-left: 0.75rem;
	margin-right: 0.75rem;
}

.mx4.mx4.mx4 {
	margin-left: 1rem;
	margin-right: 1rem;
}

.my0.my0.my0 {
	margin-top: 0;
	margin-bottom: 0;
}

.my1.my1.my1 {
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

.my2.my2.my2 {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.my3.my3.my3 {
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
}

.my4.my4.my4 {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.block.block {
	display: block;
}

.flex.flex {
	display: flex;
}

.flexcol.flexcol {
	display: flex;
	flex-direction: column;
}

.flex1.flex1 {
	flex: 1;
	min-width: 0;
}

.flexnone.flexnone {
	flex: none;
}

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

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

.hide.hide.hide {
	display: none;
}

.noselect.noselect.noselect {
	user-select: none;
}

.tran5.tran5.tran5 {
	transition: all .5s;
	-webkit-transition: all .5s;
}

.sta.sta.sta {
	position: static;
}

.abs.abs.abs {
	position: absolute;
}

.fix.fix.fix {
	position: fixed;
}

.rel.rel.rel {
	position: relative;
}

.sti.sti.sti {
	position: sticky;
	z-index: 40;
}

.t0.t0.t0 {
	top: 0;
}

.l0.l0.l0 {
	left: 0;
}

.r0.r0.r0 {
	right: 0;
}

.b0.b0.b0 {
	bottom: 0;
}

.t1.t1.t1 {
	top: 0.5rem;
}

.l1.l1.l1 {
	left: 0.5rem;
}

.r1.r1.r1 {
	right: 0.5rem;
}

.b1.b1.b1 {
	bottom: 0.5rem;
}

.t2.t2.t2 {
	top: 1rem;
}

.l2.l2.l2 {
	left: 1rem;
}

.r2.r2.r2 {
	right: 1rem;
}

.b2.b2.b2 {
	bottom: 1rem;
}

.lh1.lh1.lh1 {
	line-height: 1rem;
}

.lh2.lh2.lh2 {
	line-height: 1.5rem;
}

.lh3.lh3.lh3 {
	line-height: 2rem;
}

.lh4.lh4.lh4 {
	line-height: 2.5rem;
}