/*=========================布局================================*/

.mb-left-start,
.mb-left-between,
.mb-left-around,
.mb-left-end,
.mb-md-start,
.mb-md-between,
.mb-md-around,
.mb-md-end {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	box-sizing: border-box;
	min-height: 50px;
	height: auto;
	max-width: 1200px;
}

.mb-md-start,
.mb-md-between,
.mb-md-around,
.mb-md-end {
	margin: 0 auto;
}

.mb-left-around,
.mb-md-around {
	justify-content: space-around;
}

.mb-left-between,
.mb-md-between {
	justify-content: space-between;
}

.mb-left-end,
.mb-md-end {
	justify-content: flex-end;
}



[class*="mb-sm-"],
[class*="mb-md-"],
[class*="mb-lg-"] {

	padding: 8px;
	box-sizing: border-box;
	min-height: 50px;
	height: auto;
	margin: 20px auto;
}



@media only screen {
	.mb-sm-1 {
		width: 8.33333333%;
	}

	.mb-sm-2 {
		width: 16.66666667%;
	}

	.mb-sm-3 {
		width: 25%;
	}

	.mb-sm-4 {
		width: 33.33333333%;
	}

	.mb-sm-5 {
		width: 41.66666667%;
	}

	.mb-sm-6 {
		width: 50%;
	}

	.mb-sm-7 {
		width: 58.33333333%;
	}

	.mb-sm-8 {
		width: 66.66666667%;
	}

	.mb-sm-9 {
		width: 75%;
	}

	.mb-sm-10 {
		width: 83.33333333%;
	}

	.mb-sm-11 {
		width: 91.66666667%;
	}

	.mb-sm-12 {
		width: 100%;
	}
}

@media only screen and (min-width:641px) {
	.mb-md-1 {
		width: 8.33333333%;
	}

	.mb-md-2 {
		width: 16.66666667%;
	}

	.mb-md-3 {
		width: 25%;
	}

	.mb-md-4 {
		width: 33.33333333%;
	}

	.mb-md-5 {
		width: 41.66666667%;
	}

	.mb-md-6 {
		width: 50%;
	}

	.mb-md-7 {
		width: 58.33333333%;
	}

	.mb-md-8 {
		width: 66.66666667%;
	}

	.mb-md-9 {
		width: 75%;
	}

	.mb-md-10 {
		width: 83.33333333%;
	}

	.mb-md-11 {
		width: 91.66666667%;
	}

	.mb-md-12 {
		width: 100%;
	}
}

@media only screen and (min-width:1025px) {
	.mb-lg-1 {
		width: 8.33333333%;
	}

	.mb-lg-2 {
		width: 16.66666667%;
	}

	.mb-lg-3 {
		width: 25%;
	}

	.mb-lg-4 {
		width: 33.33333333%;
	}

	.mb-lg-5 {
		width: 41.66666667%;
	}

	.mb-lg-6 {
		width: 50%;
	}

	.mb-lg-7 {
		width: 58.33333333%;
	}

	.mb-lg-8 {
		width: 66.66666667%;
	}

	.mb-lg-9 {
		width: 75%;
	}

	.mb-lg-10 {
		width: 83.33333333%;
	}

	.mb-lg-11 {
		width: 91.66666667%;
	}

	.mb-lg-12 {
		width: 100%;
	}
}


/*===================二级标题左侧===================*/

.mb-L-title {
	margin: 20px;
	display: inline-block;
	min-width: 80px;
	max-width: 60%;
	width: auto;
	height: 22px;
	position: relative;
	line-height: 22px;
	letter-spacing: 1px;

}

/*.mb-L-title表示位置在左侧*/


.mb-L-title1,
.mb-L-title4,
.mb-L-title17 {
	padding-left: 15px;

	&:before {
		content: " ";
		width: 4px;
		height: 22px;
		background: #12a3f5;
		position: absolute;
		left: 0;
		top: 2px;
		border-radius: 2px;
	}
}

.mb-L-title2 {
	padding-left: 15px;

	&:after {
		content: " ";
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #12a3f5;
		position: absolute;
		left: 0;
		top: 8px;
	}
}


.mb-L-title3 {

	&:after {
		content: " ";
		position: absolute;
		bottom: -6px;
		left: 0;
		position: absolute;
		height: 2px;
		width: 150%;
		background: linear-gradient(to right, #01DFE3, rgba(255, 255, 255, 0));

	}
}

.mb-L-title4,
.mb-L-title17 {

	&:before {

		background: lime;

	}
}


.mb-L-title5,
.mb-L-title6 {
	color: #10faf8;
	padding-left: 80px;
	line-height: 22px;
	position: relative;
	border-bottom: 2px solid linear-gradient(to right, #01DFE3, rgba(255, 255, 255, 0));

	&:after {
		content: "";
		position: absolute;
		bottom: 0;
		top: 0;
		left: 18px;
		width: 50px;
		height: 22px;
		transform: skewX(35deg);
		background: linear-gradient(to right,
				#2d83fa,
				#10faf8);
	}

	&:before {
		content: "|||";
		display: inline-block;
		font-weight: 600;

		line-height: 22px;
		font-size: 24px;
		position: absolute;

		top: -4px;
		left: -8px;
		color: #2d83fa;
		transform: skewX(35deg);
	}
}

.mb-L-title6 {
	color: #C6D039;

	&:after {
		background: linear-gradient(to right,
				#4BF15A,
				#C6D039);
	}

	&:before {
		color: #4BF15A;
	}
}


.mb-L-title7 {
	font-size: 1.2rem;
	padding: 3px;

	&:after {
		content: "";
		position: absolute;
		bottom: 0;
		top: 0;
		left: 0;
		width: 120%;
		height: 100%;
		opacity: 0.3;

		background: linear-gradient(to right,
				#4BF15A,
				#4bf15900);
	}

	&:before {
		content: " ";
		position: absolute;
		bottom: 0;
		left: 0;
		position: absolute;
		height: 2px;
		width: 150%;
		background: linear-gradient(to right, #4BF15A, rgba(255, 255, 255, 0));
	}
}

.mb-L-title8 {
	border-radius: 16px;
	border: 1px solid #e8e9fb;
	box-shadow: 0 0 10px #e8e9fb;
	text-align: center;
	padding: 6px;
	color: #12a3f5;
	font-size: 1.4rem;

	&:before {
		content: "";
		width: 200%;
		height: 2px;
		background: #e8e9fb;
		position: absolute;
		top: 15px;
		left: 100%;
		background: linear-gradient(to right, #e8e9fb, rgba(255, 255, 255, 0));
	}
}

.mb-L-title9,
.mb-L-title10 {
	background: linear-gradient(to right, #e8e9fb, rgba(255, 255, 255, 0));
	border-top-left-radius: 5px;
	padding: 2px 20px 2px 10px;
	font-size: 1.4rem;

	&:before {
		content: "";
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		width: 4px;
		height: 100%;
		background: #50BFFF;
		position: absolute;
		top: 0;
		left: 0;
	}
}

.mb-L-title10 {
	background: linear-gradient(to right, #e99d3a61, rgba(255, 255, 255, 0));

	&:before {
		background: #FE6C6F;
	}
}


.mb-L-title11 {
	display: inline-block;
	position: relative;
	padding: 5px 6px;
	height: 24px;
	line-height: 24px;
	padding-left: 15px;
	background: #50BFFF;
	left: -8px;
	color: #FFF;

	&:before {
		content: "";
		position: absolute;
		height: 0;
		width: 0;
		border-bottom: 8px solid #4396c5;
		border-left: 8px solid transparent;
		top: -8px;
		left: 0;
	}

	&:after {
		content: "";
		position: absolute;
		height: 0;
		width: 0;
		border-top: 17px solid transparent;
		border-bottom: 17px solid transparent;
		border-left: 12px solid #50BFFF;
		right: -12px;
		top: 0;
	}
}

.mb-L-title12 {
	display: inline-block;
	height: 30px;
	line-height: 30px;
	width: auto;
	background-color: #75c8c0;
	border-radius: 8px 28px 28px 28px;
	padding: 2px 10px;
	color: #fefefe;
	margin: 0 20px;

}

.mb-L-title13,
.mb-L-title14 {
	border-left: 2px solid #FE6C6F;
	padding: 5px;
	letter-spacing: 1px;

	&:after {
		content: " ";
		position: absolute;
		bottom: 0;
		left: 0;
		position: absolute;
		height: 2px;
		width: 60%;
		background: linear-gradient(to right, #FE6C6F, rgba(255, 255, 255, 0));
	}

	&::before {
		content: " ";
		position: absolute;
		top: 0;
		left: 0;
		position: absolute;
		height: 2px;
		width: 30%;
		background: linear-gradient(to right, #FE6C6F, rgba(255, 255, 255, 0));
	}
}

.mb-L-title14 {
	border-left: 2px solid #01DFE3;

	&:after {
		background: linear-gradient(to right, #01DFE3, rgba(255, 255, 255, 0));
	}

	&::before {

		background: linear-gradient(to right, #01DFE3, rgba(255, 255, 255, 0));
	}
}

.mb-L-title15,
.mb-L-title16 {
	color: #FFF;
	padding: 5px;
	letter-spacing: 1px;
	padding-left: 50px;

	background: linear-gradient(-210deg, transparent 1.5em, #01DFE3 0);

	&::before {
		content: '';
		display: block;
		width: 1.73em;
		height: 3em;
		position: absolute;
		background: linear-gradient(-60deg, #577b98 50%, transparent 0);
		left: -3px;
		top: 0;
		border-bottom-left-radius: inherit;
		transform: translateY(-0.5em) rotate(30deg);
		transform-origin: bottom right;
		box-shadow: .2em .2em .3em -.1em rgba(0, 0, 0, .15);
	}
}

.mb-L-title16 {
	background: linear-gradient(-210deg, transparent 1.5em, #FE6C6F 0);

	&::before {

		background: linear-gradient(-60deg, #f18384 50%, transparent 0);
	}
}

.mb-L-title17 {
	width: 100%;

	&:after {

		content: " ";
		width: 100%;
		border-bottom: solid 1px #10faf8;

		position: absolute;
		bottom: -8px;
		left: 0;
		border-radius: 2px;

	}
}




.mb-L-title18 {
	width: 100%;
	max-width: 96%;
	margin-left: 40px;
	
  

	&::before {
		content: attr(data-bh);
		width: 30px;
		height: 30px;
		text-align: center;
		background-color: #41a7e6;
		line-height: 30px;
		position: absolute;
		top: -5px;
		left: -35px;
		color: white;
		border-radius: 3px;

	}

	&:after {

		content: " ";
		width: 100%;
		border-bottom: solid 1px #10faf8;
		position: absolute;
		bottom: 50%;
		left: 0;
		border-radius: 2px;
		z-index: -1;
	}

	& span {
		width: max-content;
		padding-right: 5px;
		display: block;
		background-color: white;
	}
}



/*============中间标题=================*/

.mb-m-bt {
	position: relative;
	letter-spacing: 2px;
	margin: 10px auto;
	padding: 5px;
	min-width: 50px;
	max-width: 80%;
	width: max-content;
}

.mb-m-bt1 {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(116, 102, 14, 0.532);

	&::before {
		content: attr(data-bh);
		width: 50px;
		height: 40px;
		text-align: center;
line-height:40px;
		background-image: url(http://www.100hsl.com/ico/xiaobj/yun.png);
		background-repeat: no-repeat;
		position: absolute;
		top: -60px;
		color: white;
		margin: 30px auto;
	}
}


.mb-m-bt2 {

	padding-bottom: 4px;
	border-bottom: solid 2px rgb(98, 152, 234);

	&::before {
		content: "";
		position: absolute;
		width: 100%;
		left: 10px;
		border-bottom: solid 2px rgb(102, 224, 102);
		bottom: -10px;
	}

	&::after {
		content: "";
		position: absolute;
		width: 100%;
		right: 10px;
		border-bottom: solid 2px rgb(180, 178, 34);
		bottom: -6px;
	}
}

.mb-m-bt3 {

	padding: 4px;
	border: solid 1px rgb(102, 224, 102);
	color: rgb(102, 224, 102);

	&::before {
		content: "";
		position: absolute;
		width: 10px;
		height: 10px;
		left: -3px;
		border-top: solid 5px rgb(102, 224, 102);
		border-left: solid 5px rgb(102, 224, 102);
		top: -3px;
		border-radius: 2px;
	}

	&::after {
		content: "";
		position: absolute;
		width: 10px;
		height: 10px;
		right: -3px;
		border-bottom: solid 5px rgb(102, 224, 102);
		border-right: solid 5px rgb(102, 224, 102);
		bottom: -3px;
		border-radius: 2px;
	}
}


.mb-m-bt4 {

	color: lime;
	background-image: url(http://www.100hsl.com/ico/xiaobj/hua.png),

		linear-gradient(#65f34c 1px, transparent 1px, transparent calc(100% - 1px), #65f34c calc(100% - 1px), #65f34c 100%),
		linear-gradient(90deg, #65f34c 1px, transparent 1px, transparent calc(100% - 1px), #65f34c calc(100% - 2px), #65f34c 100%),
		url(http://www.100hsl.com/ico/xiaobj/erhuan.png);
	background-repeat: no-repeat;

	background-size: 30px 40px, calc(100% - 20px) calc(100% - 20px), calc(100% - 20px) calc(100% - 20px), 22px 40px;
	background-position: top left, 10px 10px, 10px 10px, right;
	padding: 20px 40px 20px 40px;

	&::before {
		content: "";
		position: absolute;
		width: 45%;
		bottom: 0;
		left: 10px;
		border-bottom: solid 1px #65f34c;
	}

	&::after {
		content: "";
		position: absolute;
		width: 45%;
		top: 0;
		right: 10px;
		border-top: solid 1px #65f34c;
	}
}

.mb-m-bt5 {

	padding: 5px 10px;
	background-color: #65f34c;
	color: white;
	border-radius: 3px;

	&::before {
		content: "";
		position: absolute;
		border-top: solid 10px #65f34c;
		border-left: solid 10px transparent;
		border-right: solid 10px transparent;
		bottom: -10px;
		left: calc(50% - 5px);
	}

	&::after {

		position: absolute;
		bottom: -11px;
		left: calc(50% - 1px);
		content: "";
		width: 10px;
		height: 10px;
		border-width: 0 0 1px 1px;
		border-style: solid;
		border-color: #65f34c;

		transform: rotateZ(-45deg);
	}
}

.mb-m-bt6 {
	background-color: rgb(152, 126, 234);
	color: white;

	&::before,
	&::after {
		content: "";
		position: absolute;
		width: 50px;
		height: 3px;
		background-image: linear-gradient(90deg, rgb(152, 126, 234) 20px, transparent 20px, transparent 30px, rgb(152, 126, 234) 30px, rgb(152, 126, 234) 100%);
	}

	&::before {
		left: 0;
		top: -6px;
	}

	&::after {
		right: 0;
		bottom: -6px;
	}

}


.mb-m-bt7 {
	background-color: rgb(236, 26, 240);
	color: white;

	&::before,
	&::after {
		content: "SCHOOL COME ON";
		position: absolute;

	}

	&::before {
		left: calc(50% - 80px);
		top: -20px;
		text-align: justify;
		width: 160px;
		height: 20px;
		line-height: 20px;
		color: #73e583c3;
		font-size: small;

	}

	&::after {

		content: attr(data-bh);
		left: -30px;
		bottom: 0;
		width: calc(100% + 60px);
		height: 50px;
		vertical-align: top;
		background-image: url(http://www.100hsl.com/ico/xiaobj/shuben.png);
		background-position: right bottom;
		background-repeat: no-repeat;
		background-size: 25px 25px;
		color: rgb(70, 122, 211);

	}

}

.mb-m-bt8 {
	text-align: center;
	margin: 0 auto;

	&::before {

		content: "";
		position: absolute;
		left: 20%;
		bottom: -2px;
		width: 60%;
		border: solid 2px #73e583c3;


	}
}

/*=================段落===========*/
.mb-duanluo {
	position: relative;
	min-height: 50px;
	width: 94%;
	margin: 30px auto;
	padding: 10px;

	p {
		padding: 10px;
	}
}

.mb-duanluo1 {

	&:after {
		position: absolute;
		content: "";
		width: 30%;
		height: 2px;
		top: -4px;
		right: 0;
		background-color: aqua;
	}

	&:before {
		position: absolute;
		content: "";
		width: 30%;
		height: 2px;
		bottom: -4px;
		left: 0;
		background-color: aqua;
	}
}

.mb-duanluo2 {

	&:after {
		content: '';
		position: absolute;
		top: -6px;
		right: -6px;
		width: 30%;
		/* 左下边框宽度 */
		height: 30%;
		/* 左下边框高度 */

		border-top: 2px solid aqua;
		/* 左边框 */
		border-right: 2px solid aqua;
		/* 下边框 */
	}

	&:before {
		content: '';
		position: absolute;
		bottom: -6px;
		left: -6px;
		width: 30%;
		/* 左下边框宽度 */
		height: 30%;
		/* 左下边框高度 */

		border-bottom: 2px solid aqua;
		/* 左边框 */
		border-left: 2px solid aqua;
		/* 下边框 */
	}
}


.mb-duanluo3 {

	background: linear-gradient(to left, #2CD5FF, #2CD5FF) left top no-repeat,
		linear-gradient(to bottom, #2CD5FF, #2CD5FF) left top no-repeat,
		linear-gradient(to left, #2CD5FF, #2CD5FF) right top no-repeat,
		linear-gradient(to bottom, #2CD5FF, #2CD5FF) right top no-repeat,
		linear-gradient(to left, #2CD5FF, #2CD5FF) left bottom no-repeat,
		linear-gradient(to bottom, #2CD5FF, #2CD5FF) left bottom no-repeat,
		linear-gradient(to left, #2CD5FF, #2CD5FF) right bottom no-repeat,
		linear-gradient(to left, #2CD5FF, #2CD5FF) right bottom no-repeat;
	background-size: 4px 20px, 20px 4px, 4px 20px, 20px 4px;

	position: relative;
}


.mb-duanluo4 {


	background:
		linear-gradient(to left, #2CD5FF, #2CD5FF) right top no-repeat,
		linear-gradient(to bottom, #2CD5FF, #2CD5FF) right top no-repeat,
		linear-gradient(to left, #2CD5FF, #2CD5FF) left bottom no-repeat,
		linear-gradient(to bottom, #2CD5FF, #2CD5FF) left bottom no-repeat;

	background-size: 40% 1px, 1px 40%;
	position: relative;

	&::before {
		position: absolute;
		content: "";
		width: 20px;
		height: 10px;
		bottom: -10px;
		left: -20px;
		border-top: solid 1px #2CD5FF;
		border-right: solid 1px #2CD5FF;

	}

	&::after {
		position: absolute;
		content: "";
		width: 20px;
		height: 10px;
		top: -10px;
		right: -20px;
		border-bottom: solid 1px #2CD5FF;
		border-left: solid 1px #2CD5FF;

	}
}

.mb-duanluo5 {
	background:
		linear-gradient(to left, #2CD5FF, #2CD5FF) right top no-repeat,
		linear-gradient(to bottom, #2CD5FF, #2CD5FF) right top no-repeat,
		linear-gradient(to left, #2CD5FF, #2CD5FF) left bottom no-repeat,
		linear-gradient(to bottom, #2CD5FF, #2CD5FF) left bottom no-repeat;

	background-size: 20% 1px, 1px 40%;
}

.mb-duanluo6 {
	padding-bottom: 10px;
	margin: 0 auto;
	border-left: dashed 1px #2CD5FF;

	&::before {
		position: absolute;
		content: "";
		width: 10px;
		height: 10px;
		border: solid 1px #2CD5EF;
		padding: 2px;
		background-image: linear-gradient(90deg, white 20%, transparent 20%, transparent 80%, white 80%),
			linear-gradient(transparent 20%, beige 20%, beige 80%, transparent 80%);
		top: 0;
		left: -8px;
		background-color: white;

	}

}

.mb-duanluo7 {
	margin: 20px auto;
	border: solid 1px #2cff99;
	padding: 20px;
	z-index: -2;

	.mb-dl-bt1 {
		position: absolute;
		display: inline-block;
		background-color: rgb(238, 183, 101);
		top: -40px;
		left: 20px;
		padding: 5px;
		width: auto;
		height: 25px;
		line-height: 25px;
		color: #fefefe;
		letter-spacing: 1px;
		box-shadow: 5px 5px 5px #2CD5EF;
		border-radius: 2px;

		&::before {
			position: absolute;
			content: "";
			width: 100%;
			height: 35px;
			border: solid 1px #2CD5EF;
			top: 6px;
			left: 5px;
			z-index: -1;
			background-color: white;
			border-radius: 2px;
		}

	}

}

.mb-duanluo8 {

	margin: 20px auto;
	padding: 20px;
	background-color: #fffff3;
	color: #7f7f7f;
	letter-spacing: 1.5px;
	line-height: 28px;
	text-align: justify;
	background-image: url(http://www.100hsl.com/ico/xiaobj/liangduohua.png);
	background-size: 100px 20px;
	background-position: left top;
	background-repeat: no-repeat;

	&::before {
		content: "";
		position: absolute;
		right: 20px;
		bottom: 18px;
		width: 17px;
		height: 17px;
		background-image: linear-gradient(to right, #ffdcb4, #ffd7a0);
		border-radius: 50%;

	}

	&::after {
		content: "";
		position: absolute;
		right: 40px;
		bottom: 10px;
		width: 11px;
		height: 11px;
		background-image: linear-gradient(to right, #ffdcb4, #ffd7a0);
		border-radius: 50%;

	}

}



/*============================卡片==============================*/
.mb-kapian {
	margin: 20px auto;
	display: inline-block;
	width: 96%;
	min-height: 50px;
	height: auto;
	position: relative;
	border-radius: 5px;
	margin-bottom: 30px;
	border: solid 1px #DCDCDC;
	/* background: url(); */
	/* background-color: antiquewhite; */
	background-size: cover;

}

.mb-kapian1 {

	padding: 5px;
	background-origin: content-box;
	border: solid 1px rgb(104, 240, 125);
	background-image:

		linear-gradient(#65f34c 1px, transparent 1px, transparent calc(100% - 1px), #65f34c calc(100% - 1px), #65f34c 100%),
		linear-gradient(90deg, #65f34c 1px, transparent 1px, transparent calc(100% - 1px), #65f34c calc(100% - 1px), #65f34c 100%);
	background-repeat: no-repeat;


}

.mb-kapian2 {
	border: 5px double rgb(19, 228, 123);
	background-origin: content-box;
	padding: 5px;
}


.mb-kapian3 {
	border: 1px solid #4ab5d2;

	background-color: white;
	padding: 5px;

	&::before {
		position: absolute;
		width: calc(100% + 7px);
		height: calc(100% + 7px);
		top: -4px;
		left: -4px;
		content: "";
		border: solid 1px #4ab5d2;
		background-color: #65f34c;
		z-index: -1;
		border-radius: 3px;
	}


}

.mb-kapian4 {
	border: 1px solid #4ab5d2;
	padding: 5px;
}

.mb-kapian5 {
	border: 1px solid #aee966;
	padding: 5px;
}



.mb-kapian6 {

	&>h2 {
		background-color: #FF8D36;
		width: 100%;
		height: 30px;
		text-align: center;
		line-height: 30px;
		border-radius: 5px 5px 0 0;
		padding: 8px 0;
		color: white;
		letter-spacing: 2em;
		margin-bottom: 0px;
	}

	&>p {
		margin: 0px;
		padding: 8px;
		border-right: solid #FF8D36 10px;
		border-bottom: solid #FF8D36 10px;
		border-left: solid #FF8D36 10px;

	}

}




.mb-kapian7 {
	border: dashed 1px #4cc7f3;

	&::before {
		content: "";
		width: 100px;
		height: 2px;
		position: absolute;
		background-color: white;
		left: 40px;
		top: -2px;

	}

	&::after {
		content: "••";
		width: 100px;
		height: 10px;
		position: absolute;
		background-color: white;
		left: 38px;
		top: -18px;
		text-align: justify;
		letter-spacing: 83px;
		color: #4cc7f3;
		font-size: 1.5rem;
	}

	&>.mb-kapian-bt {
		padding-left: 40px;
	}
}



.mb-kapian8 {
	border: dashed 1px #7ef34c;

	&::before {
		content: "";
		width: 100px;
		height: 2px;
		position: absolute;
		background-color: white;
		left: 40px;
		top: -2px;

	}

	&::after {
		content: "oo";
		width: 120px;
		height: 10px;
		position: absolute;
		background-color: white;
		left: 38px;
		top: -13px;
		text-align: justify;
		letter-spacing: 84px;
		color: #7ef34c;
		font-size: 1rem;
	}

	&>.mb-kapian-bt {
		padding-left: 40px;
		letter-spacing: 2px;
	}
}


.mb-kapian9 {
	border: solid 1px #7ef34c;
	padding: 16px;

	&>.mb-kapian-bt {
		padding: 8px 20px;
		transform: skewX(-30deg);
		background-color: #7ef34c;
		text-align: center;
		margin: 0 auto;
		letter-spacing: 2px;
		min-width: 50px;
		max-width: 80%;
		width: max-content;
	}

	& span {
		transform: skewX(30deg);
		display: inline-block;
		color: white;
	}
}

.mb-kapian10 {
	border-top: solid 40px #7ef34c;
	border-right: solid 1px #7ef34c;
	border-bottom: solid 1px #7ef34c;
	border-left: solid 1px #7ef34c;
	padding: 16px;

	&>.mb-kapian-bt {
		padding: 0px 16px;
		position: absolute;
		margin: 0px;
		left: -1px;
		top: -40px;
		background-color: red;
		box-sizing: border-box;
		line-height: 40px;
		color: white;
		text-align: center;
		letter-spacing: 2px;
		min-width: 50px;
		max-width: 80%;
		width: max-content;
	}

}


.mb-kapian11 {
	border: solid 10px #93f622;

	padding: 16px;

	&>.mb-kapian-bt {
		padding: 0px 16px;
		position: absolute;
		margin: 0px;
		left: -10px;
		top: -40px;
		background-color: #93f622;
		border-radius: 10px 10px 0 0;
		box-sizing: border-box;
		line-height: 40px;
		color: white;
		text-align: center;
		letter-spacing: 2px;
		min-width: 50px;
		max-width: 80%;
		width: max-content;
	}

}

.mb-kapian12 {
	display: inline-block;
	width: calc(100% + 20px);
	height: 25px;
	line-height: 25px;
	text-align: center;
	margin: 0;
	padding: 3px 0;
	letter-spacing: 2px;
	margin-left: -10px;
	margin-right: -10px;
	background: #EDBA19;
	position: relative;
	top: 5px;

	&::before,
	&::after {
		content: "";
		position: absolute;
		height: 0;
		width: 0;
		border-top: 10px solid #cd8d11;
		bottom: -10px;
	}

	&::before {
		border-left: 10px solid transparent;
		left: 0;

	}

	&::after {

		border-right: 10px solid transparent;
		right: 0;
	}

	&+p {

		padding: 5px;
	}
}


.mb-kapian13 {
	position: absolute;
	top: 5px;
	background: #00B3ED;
	box-shadow: -1px 2px 4px rgba(0, 0, 0, 0.5);
	color: wheat;
	margin: 0;
	padding: 0;
	padding: 4px 10px;

	&::before,
	&::after {
		position: absolute;
		content: "";
		display: block;
	}

	&::before {
		width: 7px;
		height: 100%;
		padding: 0 0 7px;
		top: 0;
		left: -7px;
		background: inherit;
		border-radius: 5px 0 0 5px;
	}

	&::after {
		width: 5px;
		height: 5px;
		background: rgba(0, 0, 0, 0.35);
		bottom: -5px;
		left: -5px;
		border-radius: 5px 0 0 5px;
	}

	&+p {
		width: calc(100% - 60px);
		margin: 0 auto;
		margin-top: 60px;
		
	}
}

.mb-kapian14 {
	position: absolute;
	top: -6px;
	right: 10px;
	width: 90px;
	text-align: center;
	background: #F8463F;
	font-size: 14px;
	color: #fff;
	letter-spacing: 5px;
	line-height: 1;
	padding: 12px 8px 10px;
	border-top-right-radius: 8px;

	&::before {
		position: absolute;
		content: "";
		display: block;
		background: #C02031;
		height: 6px;
		width: 8px;
		border-radius: 8px 8px 0 0;
		left: -6px;
		top: 0;
		z-index: -1;
	}

	&::after {
		position: absolute;
		content: '';
		width: 0;
		height: 0;
		border-top: 11px solid #F8463F;
		border-left: 53px solid transparent;
		border-right: 53px solid transparent;
		bottom: -10px;
		left: 0;

	}
}


.mb-kapian15 {
	border: solid 5px #93f622;
	padding: 0;

	&>.mb-kapian-Sbt {
		position: relative;
		margin: 0;
		padding: 0 10px;
		background-color: #57DD43;
		border-radius: 0 0 20px 20px;
		box-sizing: border-box;
		line-height: 40px;
		color: white;

		letter-spacing: 2px;
		min-width: 50px;
		max-width: 80%;
		width: max-content;
		margin: 0px auto;
		margin-top: -12px;

		&::before,
		&::after {
			position: absolute;
			content: "";
			width: 10px;
			height: 12px;
			z-index: -1;
			border-radius: 100%;
			background-color: #5dd64b;
		}

		&::before {
			top: 0px;
			left: -5px;
		}

		&::after {
			top: 0px;
			right: -5px;
		}
	}

	&>div {
		padding: 8px;
	}
}

/*==============文字====================*/



.mb-wenzi {
	letter-spacing: 2px;
	line-height: 23px;
}

.mb-wenzi1 {
	text-align: center;
}

.mb-wenzi2 {
	text-align: left;
}

.mb-wenzi3 {
	line-height: 23px;
}

.mb-wenzi4,
.mb-wenzi5 {
	display: inline-block;
	position: relative;
	background-color: antiquewhite;
	padding: 3px 5px 3px 10px;
	margin-left: 25px;
	width: max-content;

	&::before {
		position: absolute;
		content: attr(data-bh);
		color: white;
		width: 30px;
		height: 30px;
		font-weight: bold;
		font-size: 1.4em;
		top: 0;
		left: -24px;
		text-align: center;
		line-height: 30px;
		background-color: aqua;

	}

}

.mb-wenzi5 {
	background-color: rgb(167, 213, 244);

	&::before {
		position: absolute;
		background-color: rgb(109, 220, 72);

	}

}

.mb-wenzi6,
.mb-wenzi7,
.mb-wenzi8,
.mb-wenzi9,
.mb-wenzi10 {
	display: inline-block;
	position: relative;
	position: relative;
	text-indent: 1em;

	&::before {
		position: absolute;
		content: "";
		width: 20px;
		height: 20px;

		background-image: url(http://www.100hsl.com/ico/xiaobj/duihao2.png);
		background-size: contain;
		background-repeat: no-repeat;
		left: -10px;
		top: 0;

	}

}

.mb-wenzi7,
.mb-wenzi8,
.mb-wenzi9,
.mb-wenzi10 {
	&::before {
		background-image: url(http://www.100hsl.com/ico/xiaobj/duihao4.png);
		left: -10px;
		top: 20%;
	}
}

.mb-wenzi8 {
	&::before {
		background-image: url(http://www.100hsl.com/ico/xiaobj/duihao8.png);
	}
}

.mb-wenzi9 {
	&::before {
		background-image: url(http://www.100hsl.com/ico/xiaobj/duihao7.png);
	}
}

.mb-wenzi10 {
	&::before {
		background-image: url(http://www.100hsl.com/ico/xiaobj/mubiao.png);
	}
}

.mb-wenzi11,
.mb-wenzi12 {
	position: relative;
	width: max-content;
	padding: 3px 5px 3px 10px;
	background-color: rgb(95, 234, 227);
	border-radius: 10px;
	text-indent: 2em;

	&::before {
		content: attr(data-bh);
		width: 25px;
		height: 25px;
		position: absolute;
		border-radius: 50%;
		text-align: center;
		line-height: 25px;
		text-indent: 0%;
		left: 0;
		top: 2px;
		background-color: rgb(219, 153, 106);
		color: white;

	}
}

.mb-wenzi12 {
	background-color: rgb(181, 218, 227);

	&::before {

		background-color: rgb(181, 112, 202);
	}
}

.mb-wz-center {
	width: 96%;
	height: auto;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	padding: 8px;
	box-sizing: border-box;

	&>h1,
	&>h2,
	&>h3,
	&>p,
	&>span,
	&>li,
	&>div {
		width: 100%;
	}
}

/**********************图片**********************/

.mb-img-wrap {
	position: relative;

	&::before {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 60%;
		top: 20%;
		background: rgba(206, 233, 243, 0.5);

	}
}

.mb-tupian-sm {
	position: absolute;

	width: 80%;
	height: calc(60% - 20px);
	left: 10%;
	top: calc(20% + 10px);
}


.mb-img-center {
	display: flex;
	justify-content: center;
	/* 水平居中 */
	align-items: center;

}

.mb-img-center img {

	max-height: 100%;
	/* 确保图像不会超出容器 */
	max-width: 100%;
	width: auto;
	/* 保持图像比例 */
	height: auto;
	/* 保持图像比例 */
}


/* max-width: 435px */

@media screen and (max-width: 435px) {

	.mb-L-title,
	.mb-m-bt {
		font-size: 1.8em;
	}

}