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-con {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 3;
	left: 0;
	top: 0;
}

.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-flie {
	background-size: 1650px 1650px;
	color: var(--white);

	* {
		color: var(--white);
	}

	.button,
	button {
		color: var(--an) !important;
		background: var(--btnbg);
	}

	.button.active,
	button.active {
		background: var(--red);
		color: var(--white) !important;
	}

	.index-top,
	.spui-top-nav,
	.left-nav {
		background: none !important;
	}

	.index-top,
	.left-nav {
		/* background: var(--blackShadow) !important; */
	}

	.index-top,
	.left-nav,
	.index-left-menu-li .text,
	.index-left-menu-li .img,
	.left-nav a {
		color: var(--white) !important;
	}

	.index-left-menu-li .img {
		box-shadow: var(--color-wai);
	}

	.index-left-menu-li .img:hover,
	.index-left-menu-li .img.active,
	.left-nav a:hover,
	.left-nav a.active {
		box-shadow: var(--color-nei);
		transition: box-shadow .2s ease-out;
	}
}

.theme-color {
	background-size: 1650px 1650px;
	color: var(--white);

	* {
		color: var(--white);
	}


	.index-top,
	.spui-top-nav,
	.left-nav {
		background: none !important;
	}

	.index-top,
	.left-nav {
		/* background: var(--blackShadow) !important; */
	}

	.index-top,
	.left-nav,
	.index-left-menu-li .text,
	.index-left-menu-li .img,
	.left-nav a {
		color: var(--white) !important;
	}

	.index-left-menu-li .img {
		/* box-shadow: var(--color-wai); */
	}

	.index-left-menu-li .img:hover,
	.index-left-menu-li .img.active,
	.left-nav a:hover,
	.left-nav a.active {
		/* box-shadow: var(--color-nei);
		transition: box-shadow .2s ease-out; */
	}
}

.theme-an {
	background-size: 1650px 1650px;
	color: var(--ghostWhite);

	* {
		color: var(--white);
	}

	.button,
	button {
		color: var(--an) !important;
		background: var(--btnbg);
	}

	.button.active,
	button.active {
		background: var(--red);
		color: var(--white) !important;
	}

	.index-top,
	.spui-top-nav,
	.left-nav {
		background: none !important;
	}

	.index-top,
	.left-nav {
		/* background: var(--blackShadow) !important; */
	}

	.index-top,
	.left-nav,
	.index-left-menu-li .text,
	.index-left-menu-li .img,
	.left-nav a {
		color: var(--ghostWhite) !important;
	}
}

.theme-white {
	background-size: 1650px 1650px;
	color: var(--an);

	* {
		color: var(--an);
	}

	.index-top,
	.spui-top-nav,
	.left-nav {
		background: none !important;
	}

	.index-left-menu {
		background: var(--hei);
	}

	.index-top,
	.left-nav,
	.index-left-menu-li .text,
	.index-left-menu-li .img,
	.left-nav a {
		color: var(--an) !important;
	}

	.page-content-con {
		/* background: var(--ya);
		box-shadow: var(--raise-shadow); */
	}

	.index-top i {
		color: var(--an) !important;
	}

	.index-left-menu-li .text,
	.index-left-menu-li .img {
		color: var(--white) !important;
	}
}

.theme-run {
	animation: bgmove 2s linear infinite;
}

.theme-yabai {
	background: var(--ya);

	.index-left-menu-li .img {
		background: var(--ya) !important;
		box-shadow: var(--ya-wai);
	}

	.index-left-menu-li .img:hover,
	.index-left-menu-li .img.active,
	.left-nav a:hover,
	.left-nav a.active {
		background: var(--ya) !important;
		box-shadow: var(--ya-nei);
		transition: box-shadow .2s ease-out;
	}
}

.theme-hei {
	background: #000000;

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

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

.theme-anhei {
	background-image: linear-gradient(45deg, var(--an), var(--hei), var(--an), var(--hei), var(--an));

	.index-left-menu-li .img {
		background: var(--hei) !important;
		box-shadow: var(--an-wai);
	}

	.index-left-menu-li .img:hover,
	.index-left-menu-li .img.active,
	.left-nav a:hover,
	.left-nav a.active {
		background: var(--hei) !important;
		box-shadow: var(--an-nei);
		transition: box-shadow .2s ease-out;
	}
}

.theme-dianqing {
	background-image: linear-gradient(45deg, var(--dian), var(--qing), var(--dian), var(--qing), var(--dian));

	.index-left-menu-li .img,
	.left-nav a {
		background: var(--qing) !important;
	}

	.index-left-menu-li .img:hover,
	.index-left-menu-li .img.active,
	.left-nav a:hover,
	.left-nav a.active {
		background: var(--qing) !important;
	}
}

.theme-meihong {
	background-image: linear-gradient(45deg, var(--mei), var(--hong), var(--mei), var(--hong), var(--mei));

	.index-left-menu-li .img,
	.left-nav a {
		background: var(--hong) !important;
	}

	.index-left-menu-li .img:hover,
	.index-left-menu-li .img.active,
	.left-nav a:hover,
	.left-nav a.active {
		background: var(--hong) !important;
	}
}

.theme-liujin {
	background-image: linear-gradient(45deg, var(--liu), var(--jin), var(--liu), var(--jin), var(--liu));

	.index-left-menu-li .img,
	.left-nav a {
		background: var(--jin) !important;
	}

	.index-left-menu-li .img:hover,
	.index-left-menu-li .img.active,
	.left-nav a:hover,
	.left-nav a.active {
		background: var(--jin) !important;
	}
}

.theme-cuiliu {
	background-image: linear-gradient(45deg, var(--cui), var(--liu), var(--cui), var(--liu), var(--cui));

	.index-left-menu-li .img,
	.left-nav a {
		background: var(--liu) !important;
	}

	.index-left-menu-li .img:hover,
	.index-left-menu-li .img.active,
	.left-nav a:hover,
	.left-nav a.active {
		background: var(--liu) !important;
	}
}

.theme-huozi {
	background-image: linear-gradient(45deg, var(--huo), var(--zi), var(--huo), var(--zi), var(--huo));

	.index-left-menu-li .img,
	.left-nav a {
		background: var(--zi) !important;
	}

	.index-left-menu-li .img:hover,
	.index-left-menu-li .img.active,
	.left-nav a:hover,
	.left-nav a.active {
		background: var(--zi) !important;
	}
}

.theme-xiacai {
	background-image: linear-gradient(45deg, var(--xia), var(--cai), var(--xia), var(--cai), var(--xia));

	.index-left-menu-li .img,
	.left-nav a {
		background: var(--cai) !important;
	}

	.index-left-menu-li .img:hover,
	.index-left-menu-li .img.active,
	.left-nav a:hover,
	.left-nav a.active {
		background: var(--cai) !important;
	}
}

@keyframes bgmove {
	0% {
		background-position: 1440px 0;
	}

	100% {}
}

.set-theme {
	background-size: 200px 200px;
}

.set-theme.run {
	animation: setbgmove 2s linear infinite;
}

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

	100% {}
}


* {
	box-sizing: border-box;
}