@baseVW: 19.2vw;

:root {
	--box: ((1200 / @baseVW));
	--margin: 0 auto;
	--font-size-12: ((12 / @baseVW));
	--font-size-13: ((13 / @baseVW));
	--font-size-14: ((14 / @baseVW));
	--font-size-16: ((16 / @baseVW));
	--font-size-18: ((18 / @baseVW));
	--font-size-20: ((20 / @baseVW));
	--font-size-22: ((22 / @baseVW));
	--font-size-24: ((24 / @baseVW));
	--font-size-28: ((28 / @baseVW));
	--font-size-36: ((36 / @baseVW));
	--margin-1: ((1 / @baseVW));
	--margin-2: ((2.5 / @baseVW));
	--margin-3: ((3 / @baseVW));
	--margin-5: ((5 / @baseVW));
	--margin-8: ((8 / @baseVW));
	--margin-20: ((20 / @baseVW));
	--margin-10: ((10 / @baseVW));
	--margin-15: ((15 / @baseVW));
	--margin-20: ((20 / @baseVW));
	--margin-25: ((25 / @baseVW));
	--margin-30: ((30 / @baseVW));
	--margin-35: ((35 / @baseVW));
	--margin-40: ((40 / @baseVW));
	--margin-43: ((43 / @baseVW));
	--margin-45: ((45 / @baseVW));
	--margin-50: ((50 / @baseVW));
	--margin-55: ((55 / @baseVW));
	--margin-60: ((60 / @baseVW));
	--margin-62: ((62 / @baseVW));
	--margin-65: ((65 / @baseVW));
	--margin-70: ((70 / @baseVW));
	--margin-75: ((75 / @baseVW));
	--margin-80: ((80 / @baseVW));
	--margin-85: ((85 / @baseVW));
	--margin-90: ((90 / @baseVW));
	--margin-95: ((95 / @baseVW));
	--margin-100: ((100 / @baseVW));
	--width-120: ((120 / @baseVW));
	--width-130: ((130 / @baseVW));
	--width-145: ((145 / @baseVW));
	--width-160: ((160 / @baseVW));
	--width-200: ((200 / @baseVW));
	--width-220: ((220 / @baseVW));
	--width-250: ((250 / @baseVW));
	--width-260: ((260 / @baseVW));
	--width-275: ((275 / @baseVW));
	--width-315: ((315 / @baseVW));
	--width-330: ((330 / @baseVW));
	--width-355: ((355 / @baseVW));
	--width-388: ((388 / @baseVW));
	--width-430: ((430 / @baseVW));
	--width-450: ((450 / @baseVW));
	--width-470: ((470 / @baseVW));
	--width-500: ((500 / @baseVW));
	--width-520: ((520 / @baseVW));
	--width-600: ((600 / @baseVW));
	--width-670: ((670 / @baseVW));
	--width-920: ((920 / @baseVW));
	--height-110: ((110 / @baseVW));
	--height-180: ((180 / @baseVW));
	--height-195: ((195 / @baseVW));
	--height-250: ((250 / @baseVW));
	--height-253: ((253 / @baseVW));
	--height-280: ((280 / @baseVW));
	--height-350: ((350 / @baseVW));
	--height-450: ((450 / @baseVW));
	--height-640: ((640 / @baseVW));
}

.cursor {
	cursor: pointer;
}

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

.postions {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	width: 100%;
}

.ele {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

.line-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 20;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.transition {
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
}

.radius {
	-webkit-border-radius: 500px;
	border-radius: 500px;
	-moz-border-radius: 500px;
}

.radiused {
	-moz-border-radius: var(--margin-5);
	-webkit-border-radius: var(--margin-5);
	border-radius: var(--margin-5);
}

.radiuseds {
	-moz-border-radius: var(--margin-10);
	-webkit-border-radius: var(--margin-10);
	border-radius: var(--margin-10);
}


.radiuseds20 {
	-moz-border-radius: var(--margin-15);
	-webkit-border-radius: var(--margin-15);
	border-radius: var(--margin-15);
}

.transform {
	transform: scale(1.08, 1.08);
	-webkit-transform: scale(1.08, 1.08);
	-o-transform: scale(1.08, 1.08);
}

.column {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.self {
	align-self: center;
}

.pub_img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wap_nav_sw,
.wap_nav_sw_nav {
	display: none;
}

.box {
	width: var(--box);
	margin: 0 auto;
}

.Mr20 {
	margin-right: var(--margin-20);
}

body,
a {
	font-size: var(--font-size-18);
	color: #000;
}

body {
	font-size: var(--font-size-18);
	background: #f7f7f7;
}

.BgWhite {
	background: #fff;
}

header {
	position: sticky;
	width: 100%;
	top: 0;
	padding: var(--margin-15) 0;
	z-index: 99;
	box-shadow: 0 5px 5px -2px #f5f5f5;

	.Logo {
		img {
			width: var(--margin-45);
		}
	}

	nav {
		margin-left: var(--margin-85);

		a {
			&:last-child {
				margin-left: var(--margin-45);
			}

			&.Active,
			&:hover {
				color: #ff2442;
			}
		}
	}

	.IndexLogin {
		background: #FF2442;
		color: #fff;
		font-size: var(--font-size-16);
		padding: var(--font-size-12) var(--margin-15);
		margin-left: var(--margin-25);
	}

	.Search {
		background: #f7f7f7;
		width: var(--width-450);

		.text {
			padding: var(--font-size-12) var(--margin-15);
			flex: 1;
			border: none;
			.radius();
			background: #f7f7f7;
			font-size: var(--font-size-16);
			color: #a8abb2;
		}

		.submit {
			background: url(../images/sou.png) no-repeat;
			background-size: var(--margin-20) var(--margin-20);
			width: var(--margin-20);
			height: var(--margin-20);
			align-self: center;
			border: none;
			font-size: 0;
			margin-right: var(--margin-15);
		}
	}
}

.SearchPop {
	position: absolute;
	top: var(--margin-62);
	background: #fff;
	.radiuseds();
	padding: var(--margin-25);
	width: var(--width-450);
	box-shadow: 0 5px 5px -2px #f5f5f5;
	display: none;

	&.active {
		display: block;
	}

	.Tags {
		a {
			background: #F7F7F7;
			padding: var(--margin-5) var(--margin-10);
			.radiused();
			margin-top: var(--margin-10);
			display: flex;
			justify-content: space-between;
			font-size: var(--font-size-13);
			margin-right: var(--margin-10);
			color: #888;
		}
	}

	.PopPub {
		em {
			font-size: var(--font-size-13);
		}

		&.History {
			p {
				background: #F7F7F7;
				width: 48%;
				padding: var(--margin-5) var(--margin-10);
				.radiused();
				margin-top: var(--margin-10);
				display: flex;
				justify-content: space-between;

				img {
					align-self: center;
					width: var(--margin-10);
					cursor: pointer;
				}

				a {
					align-self: center;
					.ellipsis();
					width: 85%;
					opacity: .65;
					font-size: var(--font-size-13);
				}

				&:nth-child(-n+2) {
					margin-top: 0;
				}
			}
		}
	}

	.Name {
		margin-bottom: var(--margin-20);

		img {
			width: var(--margin-20);
			cursor: pointer;
		}

		&.Mt {
			margin-top: var(--margin-20);
		}

		h2 {
			font-size: var(--font-size-16);
			font-weight: bold;
		}
	}
}

.W250 {
	width: var(--width-250);
}

.Mt25 {
	margin: var(--margin-25) 0;
}

.Pt20 {
	padding: var(--margin-20);
}

.IndexCenter {
	width: var(--width-670);
	background: #ff0;
	margin: 0 var(--margin-15);

	.swiper-pagination-bullet-active {
		opacity: var(--swiper-pagination-bullet-opacity, 1);
		background: #fff;
	}
}

.BgOne {
	background: #fff url(../images/bg_4.png) no-repeat;
}

.IndexMain {
	.IndexTop {
		.IndexLeft {
			.Name {
				img {
					align-self: center;
					width: var(--margin-25);
				}

				h2 {
					align-self: center;
					margin-left: var(--margin-8);
				}
			}

			.List {
				overflow-y: auto;
				height: var(--height-280);
				scrollbar-width: none;
				margin-top: var(--margin-15);

				dl {
					margin-top: var(--margin-20);

					&:nth-child(1) {
						margin-top: 0;
					}

					a {
						display: flex;
						justify-content: space-between;
					}

					dt {
						width: var(--margin-40);
						height: var(--margin-40);
						overflow: hidden;
						.radiuseds();

						img {
							.pub_img();
						}
					}

					dd {
						width: 75%;
						margin-left: var(--margin-10);

						h2 {
							font-size: var(--font-size-14);
							.ellipsis();
							margin-bottom: var(--margin-5);
						}

						em {
							font-size: var(--font-size-12);
							color: rgba(102, 102, 102, .6);
						}

						span {
							color: #FF2442;
							font-size: var(--margin-15);

							i {
								font-size: var(--font-size-12);
							}
						}
					}
				}
			}
		}

		.IndexRight {
			.User {
				margin-bottom: var(--margin-15);

				dl {
					display: flex;

					dt {
						width: var(--margin-50);
						height: var(--margin-50);
						overflow: hidden;
						.radius();
						margin-right: var(--margin-15);

						img {
							.pub_img();
						}
					}

					dd {
						h2 {
							font-size: var(--font-size-16);
							.ellipsis();
						}

						p {
							font-size: var(--font-size-13);
							color: #666666;
							margin-top: var(--margin-10);
						}
					}
				}
			}

			.BtnUrl {
				dl {
					margin-top: var(--margin-15);
					background: #fff;
					.radiused();
					padding: var(--margin-8) var(--margin-20);

					a {
						display: flex;
						justify-content: space-between;
					}

					dt {
						display: flex;

						img {
							width: var(--margin-45);
							align-self: center;
						}

						h2 {
							align-self: center;
							font-size: var(--font-size-18);
							margin-left: var(--margin-10);
						}
					}

					dd {
						align-self: center;

						img {
							width: var(--margin-20);
						}
					}
				}
			}

			.Url {
				dl {
					background: #f7f7f7;
					width: 48%;
					padding: var(--font-size-12) 0;
					.radiused();

					&:nth-child(-n+2) {
						margin-bottom: var(--margin-10);
					}

					a {
						display: flex;
						justify-content: center;
					}

					img {
						width: var(--margin-20);
					}

					dd {
						font-size: var(--font-size-13);
						align-self: center;
						margin-left: var(--margin-5);
					}
				}
			}
		}
	}

	.Zone {
		dl {
			.column();
			position: relative;
			overflow: hidden;

			dt {
				position: absolute;
				left: -0.15vw;
				bottom: -1vw;

				img {
					width: var(--width-145);
				}
			}

			dd {
				padding-left: 45%;

				h2 {
					font-size: var(--font-size-24);
					font-weight: bold;
					margin: 0 auto var(--margin-10) auto;
				}

				a {
					display: flex;
					justify-content: center;
					padding: var(--margin-10) 0;
					.radius();
					color: #fff;
					width: var(--width-120);
					font-size: var(--font-size-16);
					margin: 0;

					em {
						align-self: center;
					}

					img {
						width: var(--margin-20);
						align-self: center;
						margin-left: var(--margin-8);
					}
				}
			}

			&:nth-child(1) {
				background: url(../images/bg_1.png) no-repeat;
				background-size: var(--width-388) var(--height-110);
				width: var(--width-388);
				height: var(--height-110);

				dd {
					h2 {
						color: #308AFF;
					}

					a {
						background: #308AFF;
					}
				}
			}

			&:nth-child(2) {
				background: url(../images/bg_2.png) no-repeat;
				background-size: var(--width-388) var(--height-110);
				width: var(--width-388);
				height: var(--height-110);

				dd {
					h2 {
						color: #FF463E;
					}

					a {
						background: #FF463E;
					}
				}
			}

			&:nth-child(3) {
				background: url(../images/bg_3.png) no-repeat;
				background-size: var(--width-388) var(--height-110);
				width: var(--width-388);
				height: var(--height-110);

				dd {

					h2 {
						color: #C045FF;
					}

					a {
						background: #C045FF;
					}
				}
			}
		}
	}

	.ClickChose {
		.List {
			margin-top: var(--margin-10);
			font-size: var(--margin-15);

			&:nth-child(1) {
				margin-top: 0;
			}

			h2 {
				width: var(--margin-85);
				position: relative;
				top: var(--margin-10);
			}

			.flex {
				width: 93%;

				span {
					cursor: pointer;
					background: #f7f7f7;
					color: #333;
					border-radius: 8px;
					display: inline-block;
					padding: var(--margin-8) var(--margin-20);
					margin-right: var(--margin-10);
					margin-bottom: var(--margin-10);
					.transition();

					&.Active,
					&:hover {
						background: #ffeeee;
						color: #FF2442;
					}
				}
			}
		}
	}
}

.InputChose {
	.Btn {
		margin-top: var(--margin-30);

		p {
			font-size: var(--margin-15);
			color: #FF2442;
			padding: var(--margin-10) var(--margin-35);
			border: var(--margin-1) #FF2442 solid;
			margin-right: var(--margin-15);
			cursor: pointer;
			.radiused();
		}
	}

	.List {
		margin-top: var(--margin-25);
		font-size: var(--margin-15);
		width: 31.33%;

		&:nth-child(-n+3) {
			margin-top: 0;
		}

		h2 {
			align-self: center;
		}

		.text {
			width: var(--width-120);
			color: #A8ABB2;
			padding: var(--margin-8) var(--margin-10);
			.radiused();
			background: #f7f7f7;
			border: none;
			font-size: var(--margin-15);
		}

		i {
			margin: 0 var(--margin-5);
			align-self: center;
			color: #A8ABB2;
			font-size: var(--font-size-16);
		}
	}
}

.Favorit {
	display: flex;
	justify-content: center;
	border: var(--margin-1) #FF2442 solid;
	.radiused();
	padding: var(--margin-10) var(--margin-15);
	cursor: pointer;

	&.favorited {
		border: var(--margin-1) #666 solid;

		p {
			color: #666;
		}
	}

	&.MaskCk2 {
		border: var(--margin-1) #666 solid;
		margin-left: var(--margin-15);

		p {
			color: #666;
		}

		img {
			top: 0;
		}
	}

	img {
		width: var(--margin-20);
		align-self: center;
		position: relative;
		top: var(--margin-2);
	}

	p {
		color: #FF2442;
		font-size: var(--font-size-16);
		align-self: center;
		margin-left: var(--margin-8);
	}
}

.MtPT25 {
	border-top: var(--margin-1) #f5f5f5 solid;
	padding: var(--margin-20);

	.Last {
		color: #333333;

		span {
			align-self: center;
			background: #F7F7F7;
			.radiused();
			padding: var(--margin-3) var(--margin-10);
			font-size: var(--margin-15);
			margin-left: var(--margin-8);
		}

		h2 {
			font-size: var(--font-size-28);
			font-weight: bold;
			color: #E6432D;
			margin-right: var(--margin-15);

			i {
				font-size: var(--font-size-14);
			}
		}
	}
}

.AllCheck {
	margin-top: var(--margin-25);
	cursor: pointer;
	display: flex;

	&.active {
		color: #ff2442;

		i {
			background: url(../images/on.png) no-repeat;
			background-size: var(--font-size-18) var(--font-size-18);
			width: var(--font-size-18);
			height: var(--font-size-18);
		}
	}

	i {
		cursor: pointer;
		background: url(../images/no.png) no-repeat;
		background-size: var(--font-size-18) var(--font-size-18);
		width: var(--font-size-18);
		height: var(--font-size-18);
		display: block;
		align-self: center;
		margin-right: var(--margin-10);

	}

}

.TestMain {
	padding: var(--margin-20);
	padding-top: 0;
	color: #797979;

	&.Line {
		p {
			line-height: 1.75;
		}
	}

	p {
		line-height: 2.5;
		display: flex;

		span {
			width: var(--width-120);
		}
	}

	em {
		color: #333;

		&.Red {
			color: #FF2442;
		}

		i {
			font-size: var(--font-size-12);
		}
	}
}

.AddNum {
	margin-top: var(--margin-10);
	font-size: var(--font-size-16);
}

.IndexList {
	margin-bottom: var(--margin-80);

	&#Rcont {
		.Word {
			.Name {
				p {
					.line-clamp();
					white-space: initial;
				}
			}
		}
	}

	&#IndexList {

		.Check {
			cursor: pointer;
			background: url(../images/no.png) no-repeat;
			background-size: var(--font-size-18) var(--font-size-18);
			width: var(--font-size-18);
			height: var(--font-size-18);
			display: block;
			align-self: center;
			margin: 0 var(--margin-20);
			position: relative;
			top: -2vw;

			&.active {
				background: url(../images/on.png) no-repeat;
				background-size: var(--font-size-18) var(--font-size-18);
				width: var(--font-size-18);
				height: var(--font-size-18);
			}
		}

		.MtPT25 {
			padding: var(--margin-20) 0;
		}

		.Word {
			.Name {
				p {
					width: 85%;
				}
			}
		}

		.other {
			width: 90%;
			margin-right: var(--margin-20);

			.List {
				padding: var(--margin-20) 0;
			}
		}
	}

	.List {
		padding: var(--margin-20);
		border-bottom: var(--margin-1) #f1f1f1 solid;

		a {
			display: flex;
		}
	}

	.Img {
		width: var(--width-315);
		height: var(--width-200);
		.radiuseds();
		overflow: hidden;

		span {
			position: absolute;
			top: 0;
			left: 0;
			background: #ff2442;
			border-radius: var(--margin-8) 0px var(--margin-8) 0px;
			padding: var(--margin-8) var(--font-size-12);
			color: #fff;
			font-size: var(--font-size-14);
		}

		img {
			.pub_img();
		}
	}

	.Word {
		width: 70%;
		margin-left: var(--margin-15);

		.Last {

			h2 {
				font-size: var(--font-size-28);
				font-weight: bold;
				color: #E6432D;
				margin-right: var(--margin-20);
				align-self: center;

				i {
					font-size: var(--font-size-14);
				}
			}

			span {
				align-self: center;
				background: #f7f7f7;
				border-radius: 8px;
				.radiused();
				padding: var(--margin-3) var(--margin-10);
				font-size: var(--margin-15);
				margin-left: var(--margin-8);
			}
		}

		.Tags {
			margin-bottom: var(--margin-15);

			&.NoTags {
				margin-bottom: 0;
			}

			span {
				font-size: var(--font-size-13);
				border: var(--margin-1) #FF2442 solid;
				color: #FF2442;
				.radiused();
				padding: var(--margin-3) var(--margin-10);
				display: inline-block;
				margin-bottom: var(--margin-8);

			}
		}

		.User {
			margin: var(--margin-15) 0;
			display: flex;

			dl {
				display: flex;

				dt {
					width: var(--margin-35);
					height: var(--margin-35);
					.radius();
					overflow: hidden;

					img {
						.pub_img();
					}
				}

				dd {
					align-self: center;
					margin: 0 var(--margin-15);
					font-size: var(--font-size-16);
				}
			}
		}

		.Name {
			display: flex;

			em {
				.radiused();
				font-size: var(--margin-15);
				padding: var(--margin-5) var(--margin-15);
				margin-right: var(--margin-10);
				align-self: center;

				&.ing1 {
					background: #ffeeee;
					color: #FF2442;
				}

				&.ing2 {
					background: #F6EBFB;
					color: #C454FF;
				}

				&.ing3 {
					background: #EEF3F8;
					color: #308AFF;
				}
			}

			p {
				font-weight: bold;
				align-self: center;
				.ellipsis();
				width: 90%;
			}
		}
	}
}


#pages {
	display: flex;
	justify-content: center;
	padding: var(--margin-40) 0;
}


.page ul li{
	background: #f4f4f4;
	border: 1px #f4f4f4 solid;
	color: #333;
	text-align: center;
	padding: var(--margin-8) var(--font-size-13);
	margin-right: var(--margin-10);
	cursor: pointer;
	font-size: var(--font-size-16);
	.radiused();
}

.page ul li:hover,
.page ul li.ivu-page-item-active{
	background: #ff2442;
	color: #fff;
	border: 1px #ff2442 solid;
}
.page ul li.xl-disabled{
	cursor: not-allowed;
	background: #f4f4f4;
	border: 1px #f4f4f4 solid;
	color: #333;
	text-align: center;
	padding: var(--margin-8) var(--font-size-13);
	margin-right: var(--margin-10);
	font-size: var(--font-size-16);
	.radiused();
}

footer {
	background: #19181b;
	padding: var(--margin-30) 0;
	text-align: center;

	p,
	a {
		color: #fff;
		font-size: var(--font-size-13);
		line-height: 2;
	}

	a {
		margin: var(--margin-15);
		display: inline-block;
	}

	img {
		display: block;
		height: var(--margin-50);
		margin: 0 auto;
	}
}


.FixedRt {
	position: fixed;
	right: var(--margin-35);
	top: 50%;
	transform: translate(0%, -50%);
	-webkit-transform: translate(0%, -50%);
	background: #fff;
	.radiuseds20();
	border: var(--margin-1) #f3f3f3 solid;
	text-align: center;

	.ToTop {
		padding: var(--margin-15) 0;
		cursor: pointer;

		img {
			width: var(--margin-30);
		}
	}

	.one {
		&.Active {
			dl {
				&:nth-child(2) {
					display: block;
				}
			}
		}

		dl {
			&:nth-child(2) {
				text-align: center;
				border: var(--margin-1) #f3f3f3 solid;
				background: #fff;
				.radiuseds20();
				padding: var(--margin-15);
				position: absolute;
				right: var(--margin-90);
				width: var(--width-160);
				top: 0;
				display: none;

				dd {
					color: #666666;
					font-size: var(--font-size-13);

					p {
						line-height: 2;
					}
				}
			}

			&:nth-child(1) {
				cursor: pointer;
				padding: var(--margin-15);
				border-bottom: var(--margin-1) #f3f3f3 solid;

				img {
					width: var(--margin-25);
				}

				dd {
					margin-top: var(--font-size-13);
					font-size: var(--font-size-13);
					color: #666;
				}
			}
		}
	}
}

.Ck {
	font-size: var(--font-size-16);
	color: #797979;

	em {
		color: #FF2442;
		cursor: pointer;
	}

	&.Active {
		i {
			background: url(../images/on.png) no-repeat;
			background-size: var(--font-size-18) var(--font-size-18);
			width: var(--font-size-18);
			height: var(--font-size-18);
		}
	}

	i {
		cursor: pointer;
		background: url(../images/no.png) no-repeat;
		background-size: var(--font-size-18) var(--font-size-18);
		width: var(--font-size-18);
		height: var(--font-size-18);
		display: block;
		align-self: center;
		margin-right: var(--margin-10);
	}
}

.Login {
	.column();
	min-height: 75vh;
	background: url(../images/LoginBg.png) repeat-x;

	.LoginLogo {
		width: 41%;
		background: #FF2442;
		.column();
		text-align: center;
		color: #fff;

		img {
			width: var(--width-160);
		}

		dd {
			font-size: var(--font-size-28);
			margin-top: var(--margin-25);
		}
	}

	.Form {
		width: var(--width-450);
		margin: 0 auto;
		.CkShow{
			min-height: 43vh;
			.One{
				display: none;
				&.Cur{
					display: block;
				}
			}
		}
		.wrp_code{
			margin: 0 auto;
			text-align: center;
			position: relative;
			p{
				position: absolute;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, .5);
				top: 0;
				left: 0;
				backdrop-filter: blur(5px);
			}
		}
		.OneCk{
			margin-bottom: var(--margin-25);
			display: flex;
			cursor: pointer;
			&.Cur{
				i{
					background: url(../images/on.png) no-repeat;
					background-size: var(--font-size-18) var(--font-size-18);
					width: var(--font-size-18);
					height: var(--font-size-18);
				}
			}
			i{
				cursor: pointer;
				background: url(../images/no.png) no-repeat;
				background-size: var(--font-size-18) var(--font-size-18);
				width: var(--font-size-18);
				height: var(--font-size-18);
				display: block;
				align-self: center;
				margin-right: var(--margin-10);
			}
		}
		h2 {
			text-align: center;
			font-size: var(--font-size-20);
			margin-bottom: var(--margin-45);
			width:48.5%;
			text-align: center;
			cursor: pointer;
			padding-top: var(--margin-25);
			&.Cur{
				color: #FF2442;
			}
		}

		.Button {
			background: #FF2442;
			.radiuseds();
			color: #fff;
			padding: var(--margin-15) 0;
			cursor: pointer;
		}

		.Chart {
			text-align: center;

			img {
				cursor: pointer;
				width: var(--margin-50);
				margin: var(--margin-30) auto;
			}
		}

		p {
			background: #f7f7f7;
			.radiuseds();
			margin-bottom: var(--margin-15);
			position: relative;
			overflow: hidden;

			button {
				position: absolute;
				top: 0;
				right: 0;
				.radiuseds();
				cursor: pointer;
				color: #fff;
				font-size: var(--font-size-16);
				border: none;
				background: #FF2442;
				padding: var(--font-size-12) var(--margin-20);
			}

			.text {
				color: #A8ABB2;
				font-size: var(--font-size-16);
				border: none;
				background: none;
				padding: var(--margin-15) var(--margin-20);
			}
		}
	}

	.LoginMain {
		height: 70vh;
		background: #fff;
	}
}

.ChartMain {
	height: 100vh;
	.column();
	background: #fff;

	dl {
		dt {
			display: flex;
			justify-content: center;

			img {
				width: var(--margin-40);
			}

			p {
				align-self: center;
				margin-left: var(--margin-15);
			}
		}

		dd {
			h2 {
				font-weight: bold;
				margin: var(--margin-20) auto var(--margin-40) auto;
			}

			img {
				width: var(--width-145);
			}
		}
	}
}

.Mtop10 {
	margin-top: var(--margin-20);
}

.Mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .5);
	z-index: 999;
	display: none;

	.MaskForm {
		width: 80%;
		margin: 0 auto;

		&.MaskForms {
			h6 {
				margin-top: 0;
				margin-bottom: var(--margin-15);

				em {
					font-size: var(--font-size-22);
				}

				&:nth-child(1) {
					width: 100%;

					em {
						position: relative;
						top: var(--margin-2);
						margin-left: var(--margin-3);
					}
				}
			}
		}

		h6 {
			margin-top: var(--margin-15);

			span {
				font-size: var(--font-size-28);
				margin-left: var(--margin-8);
				color: #f21111;

				i {
					font-size: var(--font-size-16);
				}
			}
		}

		.text {
			background: #fff;
			.radiuseds();
			padding: var(--margin-15) var(--margin-20);
			border: none;
			width: 100%;
			color: #797979;
		}
	}

	&.MaskImg {
		dl {
			width: var(--width-500);
			.ele();

			dt {
				overflow: hidden;
				.radiuseds20();
			}

			dd {
				img {
					width: var(--margin-40);
					display: block;
					margin: var(--margin-30) auto 0 auto;
					cursor: pointer;
				}
			}
		}
	}

	.SendPop {
		h2 {
			text-align: center;
			font-size: var(--font-size-28);
			padding-bottom: var(--margin-50);
		}

		dl {
			width: var(--width-430);
			margin: 0 auto;
			.radiuseds20();
			.BgWhite();
			margin-bottom: var(--margin-25);
			padding: var(--margin-25) var(--margin-30);

			a {
				display: flex;
				justify-content: space-between;
			}

			dt {
				display: flex;

				img {
					width: var(--margin-50);
					align-self: center;
				}

				em {
					font-size: var(--font-size-24);
					align-self: center;
					margin-left: var(--margin-20);
				}
			}

			dd {
				align-self: center;

				img {
					width: var(--margin-20);
				}
			}
		}
	}

	.MainBg {
		background: url(../images/MaskBg.png) no-repeat;
		background-size: var(--width-500) var(--height-450);
		width: var(--width-500);
		height: var(--height-450);
		.column();
		.ele();

		.Url {
			display: block;
			background: #f21111;
			text-align: center;
			.radius();
			margin: var(--margin-25) auto;
			color: #fff;
			padding: var(--margin-15) 0;

			&.w220 {
				width: var(--width-220);
			}

			&:nth-child(1) {
				background: none;
				border: var(--margin-1) #f21111 solid;
				color: #f21111;
			}
		}

		.Tip {
			p {
				line-height: 2;
				font-size: var(--font-size-20);
				color: #797979;
			}
		}

		.Title {
			img {
				width: var(--margin-90);
			}

			h2 {
				font-weight: bold;
				font-size: var(--font-size-28);
				padding: var(--margin-25) 0;
			}
		}

		.Name {
			img {
				width: var(--margin-20);
				cursor: pointer;
				margin-right: var(--margin-15);
			}
		}
	}

	&.Active {
		display: block;
	}

	.Main {
		background: #fff;
		.ele();
		width: 30%;

		.Word {
			height: 60vh;
			overflow-y: auto;
			padding-right: var(--margin-25);
			scrollbar-color: #ff2442 #e5e5e5;
			scrollbar-width: thin;

			p {
				font-size: var(--font-size-16);
				line-height: 1.75;
				margin-top: var(--margin-10);

				&:nth-child(1) {
					margin-top: 0;
				}
			}
		}

		.Name {
			padding: 0 0 var(--margin-25) 0;

			h2 {
				font-weight: bold;

			}

			img {
				width: var(--margin-15);
				align-self: center;
				cursor: pointer;
			}
		}
	}
}

.Where {
	img {
		width: var(--margin-10);
		margin: 0 var(--margin-10);
	}

	a {
		font-size: var(--margin-15);

		&:hover {
			color: #ff2442;
		}
	}
}

.Pt30 {
	padding-bottom: var(--margin-20);
}

.ContMain {
	&#ContMain {

		.Test {

			background: #f7f7f7;
			.radiuseds20();
			margin-top: var(--margin-25);
			padding: var(--margin-20);
			font-size: var(--font-size-14);

			dl {
				display: flex;

				dt {
					color: #999;
				}

				dd {
					color: #333;
					align-self: center;
				}
			}
		}

		.Img {
			width: var(--width-330);
			height: var(--height-195);
		}
	}

	.ContTow {
		.Pic {
			padding: 0 var(--margin-25);

			img {
				width: 100%;
			}
		}

		.Tags {
			padding: 0 var(--margin-25);

			span {
				background: #fff7f2;
				.radiused();
				padding: var(--margin-8) var(--font-size-12);
				font-size: var(--margin-15);
				margin-right: var(--margin-8);
				display: inline-block;
				margin-bottom: var(--margin-8);
			}
		}

		table {
			margin: 0 var(--margin-25);
			width: 96%;
			font-size: var(--margin-15);
			border-collapse: collapse;
			border: var(--margin-1) solid #e8e8e8;

			th {
				background: #f1f1f1;
				padding: var(--margin-15) 0;
				color: #8d8d8d;
				width: 16.67%;
				border-left: var(--margin-1) solid #e8e8e8;
			}

			td {
				padding: var(--margin-15) 0;
				color: #222222;
				text-align: center;
				border-left: var(--margin-1) solid #e8e8e8;
			}
		}
	}

	.Tion {
		padding-top: var(--margin-25);

		h2 {
			color: #010101;
			font-style: italic;
			font-weight: bold;
			align-self: center;
			margin-right: var(--margin-20);
		}

		.flex {
			flex: 1;
			background: #fff7f2;
			.radiuseds();
			padding: var(--margin-10);

			img {
				width: var(--margin-15);
				align-self: baseline;
				margin-right: var(--margin-10);
			}

			p {
				font-size: var(--font-size-13);
				color: #222;
			}
		}
	}

	.ContOne {
		.Img {
			width: var(--width-600);
			height: var(--height-350);

			img {
				.pub_img();
			}
		}

		.Word {
			// width: var(--width-520);
			flex: 1;
			margin-left: var(--margin-20);

			.User {
				a {
					color: #8D8D8D;
					font-size: var(--margin-15);
					align-self: center;

					img {
						width: var(--margin-10);
						margin-left: var(--margin-5);
						opacity: .5;
					}
				}

				dl {
					display: flex;

					dd {

						p {
							font-size: var(--font-size-14);
							color: #999;

							em {
								color: #333;
							}

							span {
								margin-right: var(--margin-20);
							}
						}

						h2 {
							font-size: var(--font-size-16);
							margin-bottom: var(--margin-5);

							em {
								.radiused();
								font-size: var(--font-size-14);
								padding: var(--margin-3) var(--margin-10);
								margin-right: var(--margin-10);
								align-self: center;
								display: inline-block;

								&.ing1 {
									background: #ffeeee;
									color: #FF2442;
								}

								&.ing2 {
									background: #F6EBFB;
									color: #C454FF;
								}

								&.ing3 {
									background: #EEF3F8;
									color: #308AFF;
								}
							}
						}
					}

					dt {
						width: var(--margin-45);
						height: var(--margin-45);
						overflow: hidden;
						.radius();
						margin-right: var(--margin-15);

						img {
							.pub_img();
						}
					}
				}
			}

			.Test {
				margin: var(--margin-10) 0 var(--margin-15) 0;
				background: #f7f7f7;
				.radiuseds();
				padding: var(--margin-15);

				dl {
					font-size: var(--font-size-14);
					width: 48%;
					display: flex;

					&:nth-child(-n+2) {
						margin-bottom: var(--margin-10);
					}

					dt {
						color: #999;
					}

					dd {
						color: #333;
					}
				}
			}

			.Tags {
				span {
					font-size: var(--font-size-13);
					border: var(--margin-1) #ff2442 solid;
					color: #FF2442;
					.radiused();
					padding: var(--margin-3) var(--margin-10);
					display: inline-block;
					margin-bottom: var(--margin-10);
				}
			}

			.Name {
				margin: var(--margin-15) 0;
				line-height: 1.7;
				font-weight: bold;
			}

			.Last {
				color: #FF2442;

				span {
					align-self: center;
					background: #FFEEEE;
					.radiused();
					padding: var(--margin-3) var(--margin-10);
					font-size: var(--margin-15);
					margin-left: var(--margin-8);
				}

				h2 {
					font-size: var(--font-size-28);
					font-weight: bold;
					color: #E6432D;
					margin-right: var(--margin-15);

					i {
						font-size: var(--font-size-14);
					}
				}
			}
		}
	}
}

.FixedFoot {
	position: fixed;
	width: 100%;
	bottom: 0;
	z-index: 999;
	background: #fff;
	left: 0;
	padding: var(--margin-15) 0;
	box-shadow: -5px 5px 5px 0 #eee;

	p {
		border: var(--margin-1) #cccccc solid;
		.radiuseds();
		margin-right: var(--margin-10);
		padding: var(--margin-10) var(--margin-20);
		display: flex;
		justify-content: center;
		width: var(--width-130);

		&.Active {
			border: var(--margin-1) #ff2442 solid;
			color: #ff2442;

			i {
				background: url(../images/heart1.png) no-repeat;
				background-size: var(--font-size-22) var(--margin-20);
				width: var(--font-size-22);
				height: var(--margin-20);
			}
		}

		i {
			display: block;
			background: url(../images/heart2.png) no-repeat;
			background-size: var(--font-size-22) var(--margin-20);
			width: var(--font-size-22);
			height: var(--margin-20);
			align-self: center;
			margin-right: var(--margin-8);
		}

		a {
			display: flex;
			justify-content: center;
		}
	}

	img {
		width: var(--margin-25);
		margin-right: var(--margin-8);
	}

	.self {
		background: #ff2442;
		padding: var(--margin-10) var(--margin-20);
		color: #fff;
		border: var(--margin-1) #ff2442 solid;
	}

	.Monery {
		span {
			align-self: center;
			cursor: pointer;
			font-size: var(--font-size-16);
		}

		h2 {
			font-size: var(--font-size-28);
			font-weight: bold;
			color: #E6432D;
			margin-right: var(--margin-20);
			align-self: center;

			i {
				font-size: var(--font-size-14);
			}
		}
	}
}

.Tit {
	display: flex;
	color: #010101;
	font-weight: bold;
	padding: var(--margin-20) 0;

	.Span {
		position: absolute;
		right: var(--margin-20);
		color: #FF2442;
		font-weight: normal;
	}

	&::before {
		content: '';
		display: block;
		width: var(--margin-5);
		height: var(--margin-25);
		background: #ff2442;
		margin-right: var(--margin-15);
		border-radius: 0px var(--margin-5) var(--margin-5) 0px;
	}
}

.AccLeft {
	width: var(--width-260);
	position: sticky;
	align-self: flex-start;
	top: var(--margin-100);
}

.Number {
	margin-top: var(--margin-10);
	font-size: var(--font-size-16);
}

.MonNews {
	font-size: var(--font-size-12);
	color: #333;

	p {
		margin-left: var(--margin-25);

		&:nth-child(1) {
			margin-left: 0;
		}
	}

	span {
		color: #e6432d;
		font-size: var(--font-size-28);
		font-weight: bold;
		margin-left: var(--margin-8);

		i {
			font-size: var(--font-size-14);
			font-weight: normal;
		}
	}
}

#UrlPub {
	display: -webkit-box;
	overflow-x: auto;
	scrollbar-color: rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0);
	padding-right: var(--margin-30);
	scrollbar-width: thin;

	a {
		margin: 0 var(--margin-25);

		&::after {
			bottom: 0;
			top: var(--margin-35);
		}

		&:nth-child(1) {
			margin-left: 0;
		}
	}
}

.UrlPub {
	a {
		display: block;
		margin: 0 var(--margin-40);
		position: relative;

		&:nth-child(1) {
			margin-left: 0;
		}

		&.Active,
		&:hover {
			color: #FF2442;

			&::after {
				width: var(--margin-25);
			}
		}

		&::after {
			content: '';
			display: block;
			.transition();
			width: 0;
			height: var(--margin-5);
			background: #FF2442;
			border-radius: var(--margin-20) var(--margin-20) 0 0;
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0%);
			-webkit-transform: translate(-50%, 0%);
			bottom: -1.1vw;
		}
	}
}

.SaleMain {
	.Order {
		border-bottom: var(--margin-1) #f1f1f1 solid;
		padding-bottom: var(--margin-20);
		font-size: var(--font-size-16);
		margin-bottom: var(--margin-20);
		color: #666;

		span {
			margin-right: var(--margin-30);
		}

		i {
			color: #000;
		}
	}

	#MinsenMain {
		.OtherBtn {
			.One {
				p {
					font-size: var(--font-size-16);
					display: flex;
					cursor: auto;

					&:nth-child(1) {
						margin-right: var(--margin-30);

						i {

							position: relative;
							top: var(--margin-1);
						}
					}

					i {
						align-self: center;
					}
				}
			}

			.Btn {
				a {
					color: #ff2442;
					background: none;
					border: var(--margin-1) #ff2442 solid;
					margin-left: var(--margin-10);
					.transition();

					&:hover {
						background: #ff2442;
						color: #fff;
					}
				}
			}

			a {
				.radiuseds();
				color: #fff;
				background: #ff2442;
				padding: var(--margin-10) var(--margin-25);
				font-size: var(--font-size-16);
			}

			p {
				align-self: center;
				display: flex;
				cursor: pointer;
			}

			img {
				width: var(--margin-20);
				margin-left: var(--margin-8);
				align-self: center;

			}

			border-top: var(--margin-1) #f1f1f1 solid;
			padding: var(--margin-20);
		}

		.IndexList {
			display: none;

			.Word {
				width: 62%;
			}

			&.Active {
				display: block;
			}
		}

		.Monery {
			color: #333333;
			font-size: var(--font-size-12);

			i {
				font-size: var(--font-size-14);
			}

			p {
				span {
					margin-left: var(--margin-8);
					font-size: var(--font-size-28);
					color: #f21111;
					font-weight: bold;
				}
			}
		}

		.TowWrap {
			width: var(--width-355);

			p {
				width: 48.5%;
				font-size: var(--font-size-16);

				&:nth-child(-n+2) {
					margin-bottom: var(--margin-8);
				}
			}
		}
	}

	.Height {
		min-height: 65vh;
	}

	.SaleUser {
		width: var(--width-260);
		position: sticky;
		align-self: flex-start;
		top: var(--margin-100);

		.Three {
			margin: 0 var(--margin-20);

			a {
				display: flex;
				justify-content: center;
				padding: var(--margin-10) 0;
				color: #fff;
				.radiuseds();
				background-color: #ff2442;
				font-size: var(--font-size-16);

				&:nth-child(2) {
					margin-top: var(--margin-8);
				}

				img {
					width: var(--margin-25);
					margin-right: var(--margin-8);
				}
			}
		}

		.Tow {
			margin-top: var(--margin-30);

			&.TowOther {
				margin-top: 0;
				padding: 0 var(--margin-20);
				padding-bottom: var(--margin-10);
			}

			dl {
				display: flex;
				justify-content: space-between;
				font-size: var(--font-size-16);
				line-height: 2.5;
				&.Hide{
					display:none;
				}

				dt {
					color: #8D8D8D;
				}

				dd {
					color: #FF2442;
					font-weight: bold;

					i {
						font-size: var(--font-size-14);
					}
				}
			}
		}

		.One {
			dl {
				dt {
					width: var(--margin-70);
					height: var(--margin-70);
					overflow: hidden;
					.radius();
					margin: 0 auto var(--margin-20) auto;

					img {
						.pub_img();
					}
				}

				dd {
					padding: 0 var(--margin-25);
				}
			}
		}
	}

	.SaleWord {
		width: var(--width-920);
		margin-left: var(--margin-25);

		.IndexList {
			.List {
				border: none;
			}

			.Tags {
				margin-top: var(--margin-8);

				span {
					margin-top: var(--margin-8);
				}
			}

			.Word {
				align-self: center;
				width: 60%;

				.Name {
					p {

						flex: 1;
					}
				}
			}
		}

	}
}

.Star {
	align-self: center;

	&.Star1 {
		background: url(../images/star_1.png) no-repeat;
		background-size: var(--margin-100) var(--font-size-16);
		width: var(--margin-100);
		height: var(--font-size-16);
	}

	&.Star1_5 {
		background: url(../images/star_1.5.png) no-repeat;
		background-size: var(--margin-100) var(--font-size-16);
		width: var(--margin-100);
		height: var(--font-size-16);
	}

	&.Star2 {
		background: url(../images/star_2.png) no-repeat;
		background-size: var(--margin-100) var(--font-size-16);
		width: var(--margin-100);
		height: var(--font-size-16);
	}

	&.Star2_5 {
		background: url(../images/star_2.5.png) no-repeat;
		background-size: var(--margin-100) var(--font-size-16);
		width: var(--margin-100);
		height: var(--font-size-16);
	}

	&.Star3 {
		background: url(../images/star_3.png) no-repeat;
		background-size: var(--margin-100) var(--font-size-16);
		width: var(--margin-100);
		height: var(--font-size-16);
	}

	&.Star3_5 {
		background: url(../images/star_3.5.png) no-repeat;
		background-size: var(--margin-100) var(--font-size-16);
		width: var(--margin-100);
		height: var(--font-size-16);
	}

	&.Star4 {
		background: url(../images/star_4.png) no-repeat;
		background-size: var(--margin-100) var(--font-size-16);
		width: var(--margin-100);
		height: var(--font-size-16);
	}

	&.Star4_5 {
		background: url(../images/star_4.5.png) no-repeat;
		background-size: var(--margin-100) var(--font-size-16);
		width: var(--margin-100);
		height: var(--font-size-16);
	}

	&.Star5 {
		background: url(../images/star_5.png) no-repeat;
		background-size: var(--margin-100) var(--font-size-16);
		width: var(--margin-100);
		height: var(--font-size-16);
	}
}

.EvaList {
	.List {
		.Word {
			padding-top: var(--margin-15);

			p {
				color: #696969;
				font-size: var(--font-size-16);
				line-height: 1.75;
			}
		}

		dl {
			display: flex;
			border-bottom: var(--margin-1) #f7f7f7 solid;
			padding-bottom: var(--margin-15);

			dt {
				width: var(--margin-50);
				height: var(--margin-50);
				overflow: hidden;
				.radius();
			}

			dd {
				align-self: center;
				margin-left: var(--margin-15);

				h2 {
					margin-bottom: var(--margin-5);
				}

				p {
					margin-left: var(--margin-8);
					font-size: var(--font-size-22);
					color: #E6432D;

					i {
						font-size: var(--font-size-13);

					}
				}
			}
		}
	}
}

.CartWord {
	width: var(--width-920);
	margin-right: var(--margin-25);

	.Four {
		.Ck {
			padding: 0 var(--margin-25);
			color: #797979;

			em {
				color: #FF2442;
				cursor: pointer;
			}
		}
	}

	.Three {
		.flex {
			padding: 0 var(--margin-25);
		}

		dl {
			display: flex;
			cursor: pointer;
			overflow: hidden;
			justify-content: center;
			border: var(--margin-1) #f5f5f5 solid;
			.radiuseds();
			padding: var(--margin-15) var(--margin-35);
			margin-left: var(--margin-15);
			position: relative;

			&.Active {
				border: var(--margin-1) #f21111 solid;

				&::after {
					content: '';
					display: block;
					background: url(../images/Chosee.png) no-repeat;
					background-size: var(--margin-25) var(--margin-25);
					width: var(--margin-25);
					height: var(--margin-25);
					position: absolute;
					bottom: 0;
					right: 0;
				}
			}

			&:nth-child(1) {
				margin-left: 0;
			}

			dt {
				img {
					width: var(--margin-30);
				}
			}

			dd {
				align-self: center;
				margin-left: var(--font-size-13);
			}
		}
	}

	.Tow {
		.flex {
			padding: 0 var(--margin-25);

			dl {
				display: flex;
				margin-left: var(--margin-100);

				&:nth-child(1) {
					margin-left: 0;
				}

				dt {
					color: #797979;
				}

				dd {
					align-self: center;
				}
			}
		}
	}

	.One {
		.Img {
			width: var(--width-450);
			height: var(--height-250);
			overflow: hidden;
			margin-left: var(--margin-20);
			.radiuseds();

			img {
				.pub_img();
			}
		}

		.Word {
			width: var(--width-388);
			margin-right: var(--margin-35);

			h2 {
				line-height: 1.75;
				font-weight: 600;
			}

			.Tags {
				span {
					font-size: var(--font-size-13);
					border: var(--margin-1) #ff2442 solid;
					color: #FF2442;
					.radiused();
					padding: var(--margin-3) var(--margin-10);
					display: inline-block;
					margin-bottom: var(--margin-10);
				}
			}

			h5 {
				font-size: var(--font-size-18);
				color: #ff2442;
				margin: var(--margin-5) 0 var(--margin-15) 0;
			}
		}
	}
}

.NoList {
	height: 45vh;
	.column();
	text-align: center;

	dl {
		img {
			width: var(--width-160);
		}

		dd {
			color: #797979;
		}
	}
}

.MaskPay {
	.Chart {
		width: var(--width-200);
		border: var(--margin-5) #fff7f2 solid;
		.radiuseds();
	}

	.Test {
		justify-content: center;
		margin-top: var(--margin-25);
		padding-bottom: var(--margin-15);

		img {
			width: var(--margin-25);
			align-self: center;
			margin-right: var(--margin-8);
		}
	}

	em {
		color: #848484;
		align-self: center;
	}

	.PayWord {
		p {
			color: #848484;
			padding: var(--margin-15) 0;
		}

		h3 {
			color: #2177e0;
			font-size: var(--font-size-22);

			i {
				font-size: var(--font-size-18);
			}

			span {
				color: #e6432d;
				font-size: var(--margin-45);
			}
		}
	}

}

.GoodMain {
	dl {
		height: 60vh;
		.column();
		margin-bottom: var(--margin-40);
		text-align: center;

		p {
			color: #A1A1A1;
			font-size: var(--font-size-22);
			margin-bottom: var(--margin-40);
		}

		a {
			display: block;
			width: var(--width-315);
			.radius();
			background: #f21111;
			margin: 0 auto;
			font-size: var(--font-size-20);
			padding: var(--margin-20) 0;
			color: #fff;

			&:nth-child(4) {
				margin-top: var(--margin-20);
				color: #f21111;
				background: #fff;
				border: var(--margin-1) #f21111 solid;
			}
		}

		img {
			width: var(--margin-100);
		}

		h1 {
			font-size: var(--margin-30);
			font-weight: bold;
			padding: var(--margin-25) 0;
		}
	}
}

.AddShop {
	margin-right: var(--margin-20);
}

.AccLeft {
	.AccUrl {
		li {
			&.CkNav {
				dl {
					display: none;
				}

				&.Active {
					dl {
						display: block;

						a {
							color: #797979;

							&:hover,
							&.Active {
								color: #f21111;
							}
						}
					}
				}
			}

			dl {
				padding-left: var(--margin-40);

				a {
					color: #797979;

					&::after {
						display: none;
					}
				}
			}

			&.Active {
				a {
					color: #f21111;

					&::after {
						background: url(../images/icon_p.png) no-repeat;
						background-size: var(--margin-10) var(--margin-10);
					}
				}
			}

			a {
				display: flex;
				justify-content: space-between;
				padding: var(--margin-15) 0;


				&:hover {
					color: #f21111;

					&::after {
						background: url(../images/icon_p.png) no-repeat;
						background-size: var(--margin-10) var(--margin-10);
					}
				}

				&::after {
					content: '';
					display: block;
					width: var(--margin-10);
					height: var(--margin-10);
					background: url(../images/icon_t.png) no-repeat;
					background-size: var(--margin-10) var(--margin-10);
					align-self: center;
				}
			}

			&:nth-child(1) {
				padding-top: 0;
			}

			&:last-child {
				padding-bottom: 0;
			}
		}
	}

	.Url {
		margin-top: var(--margin-20);

		a {
			font-size: var(--font-size-16);
			position: relative;
			text-align: center;

			&:nth-child(1) {
				&::after {
					left: 160%;
				}
			}

			&:nth-child(2) {
				&::after {
					left: 135%;
				}
			}

			&:last-child {
				&::after {
					opacity: 0;
				}
			}

			&::after {
				content: '';
				display: block;
				width: var(--margin-1);
				height: var(--margin-15);
				position: absolute;
				top: var(--margin-5);
				background: #dfdfdf;
			}

			&:hover {
				color: #f21111;
			}
		}
	}

	.AccUser {
		dl {
			display: flex;

			dt {
				width: var(--margin-50);
				height: var(--margin-50);
				overflow: hidden;
				.radius();

				img {
					.pub_img();
				}
			}

			dd {
				align-self: center;
				margin-left: var(--margin-10);

				p {
					color: #797979;
					font-size: var(--font-size-16);
					margin-top: var(--margin-5);
				}

				em {
					border-radius: 0 var(--margin-5) 0 var(--margin-5);
					background: #f21111;
					font-size: var(--font-size-14);
					padding: var(--margin-3) var(--margin-5);
					align-self: center;
					color: #fff;
					margin-right: var(--margin-5);
				}

				h2 {
					color: #010101;
					.ellipsis();
					width: var(--width-120);
				}
			}
		}
	}
}

.Mt250 {
	margin: var(--margin-30) 0 0 0;
}

.AddImg {
	img {
		cursor: pointer;
		width: var(--margin-20);
		align-self: center;
		margin-left: var(--margin-10);
	}
}

.MaskBtnUrl {
	width: 80%;
	margin: 0 auto;

	a {
		width: 45.5%;

	}
}

.AccRight {
	width: var(--width-920);
	margin-left: var(--margin-25);

	.MyIng {
		p {
			align-self: center;

			span {
				color: #FF2442;
				font-size: var(--font-size-24);

				i {
					font-size: var(--font-size-14);
				}
			}
		}
	}

	.Checkbox {
		p {
			display: flex;
			cursor: pointer;

			&.Active {
				color: #f21111;

				&::before {
					background: url(../images/on.png) no-repeat;
					background-size: var(--font-size-18) var(--font-size-18);
					width: var(--font-size-18);
					height: var(--font-size-18);
				}
			}

			&::before {
				content: '';
				display: block;
				background: url(../images/no.png) no-repeat;
				background-size: var(--font-size-18) var(--font-size-18);
				width: var(--font-size-18);
				height: var(--font-size-18);
				align-self: center;
				margin-right: var(--margin-5);
			}
		}
	}

	.Radio {
		p {
			display: flex;
			cursor: pointer;

			&.Active {
				color: #f21111;

				&::before {
					background: url(../images/onon.png) no-repeat;
					background-size: var(--font-size-18) var(--font-size-18);
					width: var(--font-size-18);
					height: var(--font-size-18);
				}
			}

			&::before {
				content: '';
				display: block;
				background: url(../images/nono.png) no-repeat;
				background-size: var(--font-size-18) var(--font-size-18);
				width: var(--font-size-18);
				height: var(--font-size-18);
				align-self: center;
				margin-right: var(--margin-5);
			}
		}
	}

	.Checkbox,
	.Radio {
		dl {
			dt {
				margin-bottom: var(--margin-25);
			}

			dd {
				display: flex;
				color: rgba(122, 122, 139, .8);
				font-size: var(--font-size-16);

				p {
					margin-left: var(--margin-35);

					&:nth-child(1) {
						margin-left: 0;
					}
				}
			}
		}
	}

	.TipH2 {
		color: #ff2442;
	}

	.ShopList {
		dl {
			dd {
				display: flex;
				justify-content: space-between;
				padding-top: var(--margin-15);

				a {
					color: #FF2442;
					font-size: var(--font-size-16);
					border: var(--margin-1) #FF2442 solid;
					.radiuseds();
					display: flex;
					justify-content: center;
					padding: var(--margin-10) var(--margin-20);

					&:nth-child(2) {
						margin-left: var(--margin-10);
					}

					img {
						width: var(--margin-20);
						align-self: center;
						margin-right: var(--margin-8);
					}
				}

				p {
					font-size: var(--margin-15);
					color: #333;
					align-self: center;

					em {
						margin: 0 var(--margin-15);
					}
				}
			}

			dt {
				h2 {
					font-weight: bold;
				}

				p {
					color: #797979;
					line-height: 2;
					padding: var(--margin-10) 0;
					font-size: var(--font-size-16);

					em {
						margin: 0 var(--margin-15);
					}
				}

				border-bottom: var(--margin-1) #f5f5f5 solid;
			}
		}
	}

	.AddShop {
		a {
			display: inline-block;
			background: #ff2442;
			.radiuseds();
			color: #fff;
			text-align: center;
			padding: var(--margin-10) var(--margin-20);
			margin: 0;
			font-size: var(--font-size-16);

			&:hover {
				&::after {
					display: none;
				}
			}
		}
	}

	.AccIng {
		.NoWord {
			margin-top: var(--margin-25);

			h2 {
				font-weight: bold;
				margin-bottom: var(--margin-20);
			}

			p {
				line-height: 1.75;
			}
		}

		dl {
			text-align: center;

			img {
				width: var(--margin-100);
				display: block;
				margin: var(--margin-25) auto;
			}

			dd {
				font-size: var(--margin-20);
			}
		}
	}

	.NoticeCont {
		.NotWord {
			p {
				line-height: 1.75;
				margin: var(--margin-10) 0;
				color: #666;
				font-size: var(--font-size-16);
			}
		}

		.Title {
			border-bottom: var(--margin-1) #f5f5f5 solid;

			p {
				padding: var(--margin-20) 0;
				font-size: var(--margin-15);
				color: rgba(51, 51, 51, .6);

				em {
					color: rgba(255, 36, 66, 1);
					margin-left: var(--margin-10);
				}
			}
		}
	}

	.AccNotice {
		.Hot {
			img {
				position: absolute;
				right: -1vw;
				width: var(--margin-25);
				top: -1vw;
			}
		}

		dl {
			position: relative;

			a {
				display: flex;
			}

			dt {
				img {
					width: var(--margin-50);
				}
			}

			dd {
				margin-left: var(--margin-15);

				h2 {
					.ellipsis();
				}

				p {
					font-size: var(--margin-15);
					margin-top: var(--margin-10);
					color: rgba(51, 51, 51, .6);
				}
			}
		}
	}

	.AccXie {
		li {
			display: flex;
			justify-content: space-between;
			color: #797979;
			cursor: pointer;
			font-size: var(--font-size-16);
			padding: var(--margin-25) 0;
			border-bottom: var(--margin-1) #F5F5F5 solid;
			opacity: .75;

			&:nth-child(1) {
				padding-top: 0;
			}

			&:last-child {
				border-bottom: none;
				padding-bottom: 0;
			}

			&::after {
				content: '';
				display: block;
				background: url(../images/gotoB.png) no-repeat;
				background-size: var(--margin-15) var(--margin-15);
				width: var(--margin-15);
				height: var(--margin-15);

			}
		}
	}

	.AccBtn {
		a {
			background: #ff2442;
			display: inline-block;
			padding: var(--margin-15) var(--margin-45);
			color: #fff;
			.radiuseds();
			margin-right: var(--margin-10);

			&.NoBtn {
				background: #d5d5d5;
			}
		}
	}

	.AccForm {

		.text,
		.textarea {
			border: var(--margin-1) #dcdcdc solid;
			font-family: Arial, Helvetica, sans-serif;
			padding: var(--font-size-12);
			.radiuseds();
			color: #7a7a8b;
			font-size: var(--margin-15);
			width: var(--width-315);

		}

		.button {
			cursor: pointer;
			border: none;
			.radiuseds();
			background: #ff2442;
			position: absolute;
			top: 0;
			right: 0;
			padding: var(--font-size-12);
			color: #fff;
			font-size: var(--margin-15);
		}

		dl {
			display: flex;
			margin-top: var(--margin-25);

			&:nth-child(1) {
				margin-top: 0;
			}

			&.NoFlexs {
				display: block;

				dd {
					margin-top: var(--margin-25);
				}
			}

			&.NoFlex {
				dt {
					width: auto;

					em {
						color: #7a7a8b;
						font-size: var(--margin-15);
					}
				}

				dd {
					display: flex;
					align-self: center;
					cursor: pointer;

					em {
						align-self: center;
						color: #7a7a8b;
						font-size: var(--margin-15);
					}

					img {
						cursor: pointer;
						width: var(--margin-20);
						margin: 0 var(--margin-10);
						align-self: center;
					}

					p {
						display: flex;
						color: #7a7a8b;
						font-size: var(--margin-15);
						align-self: center;
					}
				}
			}

			dd {
				i {
					color: #7A7A8B;
					margin: 0 var(--margin-15);
				}
			}

			dt {
				width: var(--width-145);
				font-size: var(--font-size-16);
				align-self: center;
				color: rgba(0, 0, 0, .8);

				&.NoSelf {
					align-self: baseline;
				}

				i {
					color: rgba(255, 36, 66, 1);
				}
			}
		}
	}
}

.MessList {
	margin-top: var(--margin-25);

	dl {
		display: flex;

		a {
			display: flex;
		}

		dt {
			width: var(--margin-50);
			height: var(--margin-50);
			overflow: hidden;
			.radius();

			img {
				.pub_img();
			}

			margin-right: var(--margin-15);
		}

		dd {
			h2 {
				font-weight: bold;

				em {
					font-weight: normal;
					font-size: var(--margin-15);
					color: rgba(0, 0, 0, .5);
					margin-left: var(--margin-15);
				}

				i {
					font-weight: normal;
					font-size: var(--margin-15);
					background: #ff2442;
					.radius();
					padding: var(--margin-3) var(--margin-8);
					color: #fff;
					margin-left: var(--margin-5);
				}
			}

			p {
				color: #696969;
				font-size: var(--font-size-16);
				margin-top: var(--margin-5);
			}
		}
	}
}

.AccRight {
	.img-section {
		margin: var(--margin-25) 0 0 0;
	}

	.up-section,
	.up-img,
	.add-img {
		object-fit: cover;
		width: var(--margin-95);
		height: var(--margin-95);
		overflow: hidden;
	}

	.up-section {
		position: relative;
		margin-right: var(--margin-15);
		border: var(--margin-1) #f5f5f5 solid;
	}

	.up-img {
		margin-right: var(--margin-15);
	}

	.close-upimg {
		position: absolute;
		top: 0;
		right: 0;
		width: var(--margin-25);
		cursor: pointer;
	}

	.file {
		width: var(--margin-95);
		height: var(--margin-95);
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		cursor: pointer;
	}
}

.demo-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--margin-10);
	align-items: flex-start;
}

.demo-group {
	background: white;
	padding: var(--margin-10);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	border: var(--margin-1) solid #e9eef3;
}

.demo-title {
	color: #64748b;
	margin-bottom: var(--margin-10);
	padding-bottom: var(--margin-10);
	border-bottom: 1px solid #eef2ff;
}

/* 组件样式 - 完全独立 */
.select-box {
	position: relative;
	min-width: var(--width-200);
}

.tion {

	&::after {
		content: '';
		display: block;
		background: url(../images/arrow.png) no-repeat;
		background-size: var(--margin-40) var(--margin-43);
		width: var(--margin-40);
		height: var(--margin-43);
		position: absolute;
		top: 0;
		right: 0;
	}
}

.select-input,
.demo-input {
	cursor: pointer;
	border: var(--margin-1) #dcdcdc solid;
	font-family: Arial, Helvetica, sans-serif;
	padding: 0 var(--margin-10);
	-moz-border-radius: var(--margin-10);
	-webkit-border-radius: var(--margin-10);
	border-radius: var(--margin-10);
	color: #7a7a8b;
	font-size: var(--margin-15);
	width: var(--width-315);
	height: var(--margin-43);
	line-height: var(--margin-43);
	position: relative;

	&::after {
		content: '';
		display: block;
		background: url(../images/arrow.png) no-repeat;
		background-size: var(--margin-40) var(--margin-40);
		width: var(--margin-40);
		height: var(--margin-40);
		position: absolute;
		top: 0;
		right: 0;
	}
}



.select-text {
	color: #7a7a8b;
}

.select-text.placeholder {
	color: #7a7a8b;
}

.select-arrow {
	color: #94a3b8;
}

.select-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: white;
	border: 1px solid #e2e8f0;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	.radiuseds();
	margin-top: var(--margin-5);
	max-height: 240px;
	overflow-y: auto;
	z-index: 100;
}

.select-dropdown.open {
	display: block;
}

/* 选项样式 */
.select-option {
	padding: var(--margin-15);
	display: flex;
	align-items: center;
	gap: var(--margin-15) var(--margin-5);
	cursor: pointer;
	transition: background 0.1s;
	border-bottom: 1px solid #f0f2f5;
}

.select-option:last-child {
	border-bottom: none;
}

.select-option:hover {
	background: #f8fafc;
}

/* 单选圆圈 */
.radio-mark {
	width: var(--font-size-12);
	height: var(--font-size-12);
	border-radius: 50%;
	border: var(--margin-2) solid #cbd5e1;
	background: white;
	flex-shrink: 0;
}

.select-option.selected .radio-mark {
	border-color: #FF2749;
	background: #FF2749;
	box-shadow: inset 0 0 0 2px white;
}

/* 多选图片区分 */
.multi-mark {
	width: var(--margin-20);
	height: var(--margin-20);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon-unchecked {
	width: var(--font-size-16);
	height: var(--font-size-16);
	background: #f1f5f9;
	border: var(--margin-1) solid #b9c3d4;
	border-radius: var(--margin-5);
	display: block;
}

.icon-checked {
	width: var(--font-size-16);
	height: var(--font-size-16);
	background: #ff2442;
	border-radius: var(--margin-5);
	color: white;
	font-size: var(--font-size-12);
	line-height: var(--font-size-16);
	text-align: center;
	font-weight: bold;
	display: block;
}

.option-label {
	flex: 1;
	color: #1f2a44;
	font-size: var(--margin-15);
}

.Mt10 {
	margin-top: var(--margin-20);
}

.MonFrom {
	margin: 0 var(--margin-20);
	margin-top: var(--margin-15);

	.text {
		.radiuseds();
		padding: var(--margin-15);
		border: var(--margin-1) #eee solid;
		width: var(--width-260);
		color: #7a7a8b;
		font-size: var(--font-size-16);
	}
}

.ChooseList {
	dl {
		position: relative;
		display: flex;
		flex: 1;

		dt {
			align-self: center;
			margin-right: var(--margin-20);
		}
	}
}

.ListMent {
	h6 {
		align-self: center;
		font-size: var(--font-size-28);
		font-weight: bold;

		&.Up {
			color: #FF2442;
		}

		&.Down {
			color: #4DE20B;
		}
	}

	.flex {
		border-bottom: var(--margin-1) #e6e6e6 solid;
		padding: var(--margin-25) 0;

		&:nth-child(1) {
			padding-top: 0;
		}

		&:last-child {
			border-bottom: none;
			padding-bottom: 0;
		}
	}

	dl {
		dt {
			margin-bottom: var(--margin-10);

			em {
				color: rgba(105, 105, 105, .8);
				margin-left: var(--margin-15);
				font-size: var(--font-size-16);
			}
		}

		dd {
			color: #696969;
			font-size: var(--font-size-16);

			em {
				margin: 0 var(--margin-20);
			}
		}
	}
}

.CartWord {
	.Tow {
		h5 {
			font-size: var(--font-size-16);
			color: #FF2442;
			margin-top: var(--margin-25);

			img {
				width: var(--font-size-18);
				margin-right: var(--margin-8);
				position: relative;
				top: -.05vw;
			}
		}
	}

	.Three {
		h5 {
			padding: var(--margin-20);
			font-size: var(--font-size-16);
			align-self: center;
			color: rgba(0, 0, 0, 0.8);

			i {
				color: #ff2442;
			}
		}
	}
}

.BgReds {
	background: #fff6f5;

	.Tow {
		padding-top: var(--margin-25);

		dl {
			text-align: center;
			flex: 1;
			position: relative;
            &:nth-child(1){
            	position: relative;
            	img{
            		width:var(--margin-15);
					margin-left: var(--margin-10);
					cursor: pointer;
            	}
            }
			&:last-child {
				&::after {
					display: none;
				}
			}

			&::after {
				content: '';
				display: block;
				background: #f2e9e9;
				width: var(--margin-1);
				height: var(--margin-40);
				position: absolute;
				right: 0;
				top: var(--margin-15);
			}

			dt {
				color: rgba(105, 105, 105, .8);
				font-size: var(--font-size-16);
				margin-bottom: var(--margin-15);
			}

			dd {
				color: #ff2442;
				font-size: var(--margin-30);
			}
		}
	}

	.One {
		border-bottom: var(--margin-1) #f2e9e9 solid;
		padding-bottom: var(--margin-25);

		&#One {
			dl {
				padding: var(--margin-50) 0;

				dt {
					margin-top: var(--margin-15);
					font-size: var(--font-size-22);
				}
			}
		}

		a {
			.radiuseds();
			background: #ff2442;
			color: #fff;
			align-self: center;
			padding: var(--margin-10) var(--margin-20);
		}

		dl {

			dt {
				color: #696969;
				font-size: var(--font-size-16);
				margin-bottom: var(--margin-10);
			}

			dd {
				color: #ff2442;
				font-size: var(--margin-35);
				font-weight: bold;
			}
		}
	}
}



.star-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	cursor: pointer;
}

/* 关键修复: 每个星星容器作为相对定位 + 内联块，保证图片裁剪时正确显示 */
.star-wrapper {
	display: inline-block;
	position: relative;
	width: var(--font-size-22);
	/* 星星视觉宽度 (包含内边距区域) */
	height: var(--font-size-22);
	cursor: pointer;
	flex-shrink: 0;
}

.star-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 保证图片填满但不变形，但我们控制裁剪通过容器overflow */
	display: block;
	pointer-events: none;
	/* 让点击穿透到父容器 .star-wrapper，从而精准获取点击坐标 */
}

/* 半星专用包裹器: 用于裁剪显示左半部分红色 */
.half-star-mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	/* 关键: 只显示左半边 */
	height: 100%;
	overflow: hidden;
	pointer-events: none;
}

.half-star-mask .star-img {
	width: 200%;
	/* 让内部图片保持原始比例，但显示区域只有一半宽 */
	left: 0;
	object-position: left center;
}

.select-box {
	cursor: pointer;
}

.LuateList {
	padding: 0 var(--margin-20);

	.One {
		padding: var(--margin-15) 0;
		border-bottom: var(--margin-1) #f5f5f5 solid;

		&:last-child {
			border-bottom: none;
		}

		.Star {
			margin-top: var(--margin-8);
		}

		p {
			margin-top: var(--margin-15);
			line-height: 1.75;
			font-size: var(--font-size-16);
			color: #797979;
		}
	}
}

#z_file1,
#z_file2 {

	.add-img,
	.file,
	.up-img,
	.up-section {
		cursor: pointer;
		width: var(--width-470);
		height: var(--height-253);
	}
}

.customer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100vh;
	background: url(../images/CustBg.png) repeat-x;
	background-size: 100% 100vh;
}

.CustMain {
	width: var(--box);
	height: var(--height-640);
	margin: 0 auto;
    .CustLeft{
		width: var(--width-315);
		background: #fff;
		border-radius: 0 0 0 var(--margin-15);
		height: 63vh;
		dl{
			background: #fff6f5;
			display: flex;
			padding: var(--margin-10) var(--margin-20);
			font-size: var(--font-size-14);
			cursor: pointer;
			position: relative;
			margin-bottom: var(--margin-2);
			p{
				color: #797979;
				font-size: var(--font-size-13);
				.ellipsis();
				margin-top: var(--margin-5);
			}
			h2{
				font-weight: bold;
				.ellipsis();
				width: 80%;
			}
			dd{
				width: 78%;
				margin-left: var(--margin-10);
				align-self: center;
				em{
					font-size: var(--font-size-13);
					color: #797979;
					align-self: center;
				}
				i{
					display: block;
					width: var(--margin-8);
					height: var(--margin-8);
					.radius();
					background: #ff2442;
					position: absolute;
                    left: var(--margin-60);
                    bottom:var(--margin-8);
				}
			}
			dt{
				width: var(--margin-50);
				height: var(--margin-50);
				.radius();
				overflow: hidden;
				position: relative;

				img{
					.pub_img();
				}
			}
		}
	}
	.CustCenter{
		flex: 1;
		background: #f4f5f6;
		height: 63vh;
		padding: 0 var(--margin-20);
		.ChatArea{
		   height:48vh;
		   overflow-y: auto;
		   scrollbar-width: none;
		   dl{
			padding: var(--margin-25) 0;
			display: flex;
			width: 100%;
			 h2{
			color: #797979;
			font-size: var(--font-size-13);
		   }
			&.Other{
				dd{
					margin-left: var(--margin-10);
					em{
						margin-left: var(--margin-15);
					}
				}
			}
			&.Me{
				justify-content: flex-end;
				h2{
					text-align: right;
				}
				dt{
					-webkit-box-ordinal-group: 2;
                    -ms-flex-order: 1;
                    order: 1;
				}
				dd{
					margin-right: var(--margin-10);
				}
			}
			dd{
				max-width: 85%;
				p{
					background: #fff;
				   .radiuseds();
				    padding: var(--margin-8) var(--margin-15);
					font-size: var(--font-size-14);
					margin-top: var(--margin-10);
					line-height: 1.85;
				}
			}
			dt{
				width: var(--margin-35);
				height: var(--margin-35);
				overflow: hidden;
				.radius();
				img{
					.pub_img();
				}
			}
		   }
		}
		.SendArea{
		   height:15vh;
		   border-top: var(--margin-1) #e6e7e8 solid;
		   padding-top: var(--margin-15);
		   .button{
			padding: var(--margin-8) var(--margin-25);
			.radiused();
			color: #fff;
			cursor: pointer;
			border: none;
			background: #ff2442;
			font-size: var(--font-size-14);
		   }
		   .postion{
			img{
				cursor: pointer;
				width: var(--margin-20);
			}
		   }
		   .Fileup{
			width: var(--margin-20);
			height: var(--margin-20);
			background: #f00;
			position: absolute;
			top: 0;
			left: 0;
			cursor: pointer;
			opacity: 0;
		   }
		   .textarea{
			width: 100%;
			font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
			color: #232323;
			font-size: var(--font-size-14);
			height: var(--margin-60);
			margin-top: var(--margin-10);
			border: none;
			background: none;
		   }
		}
	}
	.CustRight{
		width: var(--width-275);
		background: #fff;
		border-radius: 0 0 var(--margin-15) 0 ;
		height: 63vh;
		.What{
			height: 57.2vh;
			overflow-y: auto;
			scrollbar-width: none;
			padding: var(--margin-15) var(--margin-20);
			dl{
				.Tags{
					margin: var(--margin-10) 0;
				}
				h1{
					color: #E6432D;
					font-size: var(--font-size-28);
					font-weight: bold;
					i{
						font-size: var(--font-size-14);
					}
				}
				span{
					    align-self: center;
					    background: #f7f7f7;
					    border-radius: 8px;
						.radiused();
					    padding: var(--margin-3) var(--margin-10);
					    font-size: var(--margin-15);
					    margin-right: var(--margin-8);
						margin-bottom: var(--margin-8);
				}
				dt{
					height: var(--width-130);
					overflow: hidden;
					.radiuseds();
					img{
						.pub_img
					}
				}
				dd{
					margin-top: var(--margin-10);
					h2{
						font-size: var(--font-size-16);
						line-height: 1.75;
					}
				}
			}
		}
		.Name{
			color: #FF2442;
			padding: var(--margin-15) var(--margin-20);
			border-bottom: var(--margin-1) #f4f5f6 solid;
			font-size: var(--font-size-16);
		}
		.List{
			height: 57.2vh;
			overflow-y: auto;
			scrollbar-width: none;
			dl{
				padding: var(--margin-15) var(--margin-20);
				border-bottom: var(--margin-1) #f4f5f6 solid;
				cursor: pointer;
				&.Active{
                    dd{
						display: block;
					}
					dt{
						&::after{
							transform: rotate(180deg);
							-moz-transform: rotate(180deg);
							-webkit-transform: rotate(180deg);
							-ms-transform: rotate(180deg);

						}
					}
				}
				dt{
					font-size: var(--font-size-14);
					font-weight: bold;
					display: flex;
					justify-content: space-between;
					&::after{
						content: '';
						display: block;
						background: url(../images/Arrows.png) no-repeat;
						background-size: var(--margin-15) var(--margin-15);
						width: var(--margin-15);
						height: var(--margin-15);
						align-self: center;
						.transition();
					}
				}
				dd{
					display: none;
					margin-top: var(--margin-8);
				}
				p{
					font-size: var(--font-size-13);
					color: #797979;
					line-height: 1.75;
				}
			}
		}
	}
	.CustTop {
		width: 100%;
		background: #000000;
		border-radius: var(--margin-15) var(--margin-15) 0 0;
		padding: var(--margin-15) var(--margin-25);
		dl{
			display: flex;
			dt{
				width: var(--margin-35);
				height: var(--margin-35);
				.radius();
				overflow: hidden;
				img{
					.pub_img();
				}
			}
			dd{
				align-self: center;
				color: #fff;
				margin-left: var(--margin-8);
			}
		}
	}
}

.w100{
	width: 100%;
}

#TestMain{
	p{
		width:32.5%;
	}
}
.AccRight .AccForm dl dd {
	&.No{
		flex: 1; 
		color: #787878;
		p{
			font-size: var(--font-size-14);
		}
	}
.YB{
	color: #7a7a8b;
	font-size: var(--font-size-16);
	p{
		display:flex;
		cursor: pointer;
		margin-right: var(--margin-20);
		&.Active{
			color: #FF2442;
			i{
				background: url(../images/on.png) no-repeat;
				background-size: var(--font-size-18) var(--font-size-18);
				width: var(--font-size-18);
				height: var(--font-size-18);
			}
		}
		i{
			cursor: pointer;
			background: url(../images/no.png) no-repeat;
			background-size: var(--font-size-18) var(--font-size-18);
			width: var(--font-size-18);
			height: var(--font-size-18);
			display: block;
			align-self: center;
			margin:0;
			margin-right: var(--margin-10);
		}
	}
}
}