:root {
	--text-color: #ffffff;
	--border-color: #ffffff;
	--box-border: '1px solid #525252';
	--bg-color: '26, 26, 26';
	--bg-opacity: 0.4;
	--tc-bg-color: '0, 0, 0';
	--tc-bg-opacity: 0.5;
	--bg-blur: blur(20px);
	--btn-bg-color: '#262626';
	--kb-key-bg-color: '#030303';
	--kb-key-bg-color-hover: '#161616';
	--kb-key-bg-color-active: '#3B3B3B';
	--kb-key-border: '1px solid #464646';
	--kb-key-box-shadow-color: 'rgba(0, 0, 0, 0.2)';
}

body {
	width: 100%;
	height: 100%;
	position: relative;
	/* 标准色 */
	--red: #FF0000;
	--orange: #f37b1d;
	--yellow: #fbbd08;
	--olive: #8dc63f;
	--green: #39b54a;
	--cyan: #1cbbb4;
	--blue: #0081ff;
	--purple: #6739b6;
	--mauve: #9c26b0;
	--pink: #e03997;
	--brown: #a5673f;
	--grey: #8799a3;
	--black: #333333;
	--darkGray: #666666;
	--gray: #aaaaaa;
	--ghostWhite: #f1f1f1;
	--white: #ffffff;
	--btnbg: #e0e0e0;
	/* 浅色 */
	--redLight: #fadbd9;
	--orangeLight: #fde6d2;
	--yellowLight: #fef2ce;
	--oliveLight: #e8f4d9;
	--greenLight: #d7f0db;
	--cyanLight: #d2f1f0;
	--blueLight: #cce6ff;
	--purpleLight: #e1d7f0;
	--mauveLight: #ebd4ef;
	--pinkLight: #f9d7ea;
	--brownLight: #ede1d9;
	--greyLight: #e7ebed;
	/* 渐变色 */
	--gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
	--gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
	--gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
	--gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);
	--gradualPink: linear-gradient(45deg, #ec008c, #6739b6);
	--gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4);
	/* 阴影透明色 */
	--ShadowSize: 6upx 6upx 8upx;
	--redShadow: rgba(204, 69, 59, 0.2);
	--orangeShadow: rgba(217, 109, 26, 0.2);
	--yellowShadow: rgba(224, 170, 7, 0.2);
	--oliveShadow: rgba(124, 173, 55, 0.2);
	--greenShadow: rgba(48, 156, 63, 0.2);
	--cyanShadow: rgba(28, 187, 180, 0.2);
	--blueShadow: rgba(0, 102, 204, 0.2);
	--purpleShadow: rgba(88, 48, 156, 0.2);
	--mauveShadow: rgba(133, 33, 150, 0.2);
	--pinkShadow: rgba(199, 50, 134, 0.2);
	--brownShadow: rgba(140, 88, 53, 0.2);
	--greyShadow: rgba(114, 130, 138, 0.2);
	--grayShadow: rgba(114, 130, 138, 0.2);
	--blackShadow: rgba(0, 0, 0, 0.5);
	--whiteShadow: rgba(255, 255, 255, 0.5);
	/* 炫彩 */
	--mei: #f43f3b;
	--hong: #ec008c;
	--liu: #ff9700;
	--jin: #ed1c24;
	--cui: #39b54a;
	--liu: #8dc63f;
	--dian: #0081ff;
	--qing: #1cbbb4;
	--huo: #9000ff;
	--zi: #5e00ff;
	--xia: #ec008c;
	--cai: #6739b6;
	--an: #101010;
	--hei: #000000;
	--active: #000000;
	--active2: #EFEFEF;
	--hui: #BBBBBB;
	--ya: #E6E6E6;
	--bai: #ffffff;
	--raise-shadow: 4px 4px 10px rgb(210, 207, 207), -4px -4px 10px rgba(255, 255, 255, 1), inset 0 0 10px rgb(210, 210, 210), inset 0 0 10px rgba(255, 255, 255, 1);
	--invagination-shadow: inset -2px -2px 6px 0px #FFFFFF, inset 3px 3px 3px 0px #BDC1D1;
	--an-wai: 4px 4px 8px #111111, -4px -4px 8px #272822;
	--an-nei: 0 0 0 #111111, 0 0 0 #272822, inset 4px 4px 8px #111111, inset -4px -4px 8px #272822;
	--ya-wai: 4px 4px 8px #dddddd, -4px -4px 8px #ffffff;
	--ya-nei: 0 0 0 #dddddd, 0 0 0 #ffffff, inset 4px 4px 8px #dddddd, inset -4px -4px 8px #ffffff;
	--color-wai: 4px 4px 8px rgba(0, 0, 0, 0.2), -4px -4px 8px rgba(255, 255, 255, 0.2);
	--color-nei: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.2), inset 4px 4px 8px rgba(0, 0, 0, 0.2), inset -4px -4px 8px rgba(255, 255, 255, 0.2);
	/* 2.0 */
	--btn-bg: #1F1F1F;
	--btn-text: #646464;
	--btn-icon: #646464;
	--btn-active-bg: #3D3D3D;
	--btn-active-text: #FFFFFF;
	--btn-active-icon: #FF5A16;
	--active-color: #FF5A16;
}

.body {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
}

.body-bg {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 2;
	left: 0;
	top: 0;
}

.body-bg-video {
	width: 100%;
	height: 100%;
}

.body-bg-img {
	width: 100%;
	height: 100%;
}

.body-con {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 3;
	left: 0;
	top: 0;
	/* background: url(../images/bg/0.png) no-repeat;
	background-size: cover; */
}

.index {
	background: #ffffff;
}

.con {
	background: none;
}

.page-content {
	padding: 10px;
	padding-top: 0;
	padding-left: 0px;
	overflow: auto;
}

.page-content-con {
	width: 100%;
	min-width: 1190px;
	height: 100%;
	border-radius: 10px;
	margin: 0;
	/* overflow: hidden; */
}

.button,
button {
	border: none;
	/* box-shadow: var(--color-wai); */
}

.button.active,
.button:hover,
button.active,
button:hover {
	/* box-shadow: var(--color-nei);
	transition: box-shadow .2s ease-out, background .2s ease-out; */
	/* transform: scale(1.005);
	transition: transform .2s ease-in-out; */
}

.theme-hei {
	background: #000000;

	.index-top {
		background: rgba(26, 26, 26, 0.45);
		/* background: rgba(255, 255, 255, 0.05); */
		backdrop-filter: blur(20px);
	}

	.index-left {
		background: #1A1A1A !important;
	}
}

* {
	box-sizing: border-box;
}