.backColor {
	background: linear-gradient(139deg, #4DA3FF 0%, #006EDC 100%);
	box-shadow: -2px 12px 30px 0px rgba(166, 215, 245, 0.34), -2px 12px 30px 0px rgba(166, 215, 245, 0.34);
	border-radius: 13.125rem;
}

.backColors {
	background: linear-gradient(139deg, #006EDC 0%, #4DA3FF 100%);
	box-shadow: -2px 12px 30px 0px rgba(166, 215, 245, 0.34);
}

.box .box1 .box2 {
	position: relative;
	float: left;
	list-style-type: none;
	width: 142px;
	height: 340px;
	transition: all .5s;
}

.box .box1 .box2 div {
	transition: all .3s;
}

.box .box1 .box2:hover div {
	font-size: 20px;
}

.box .box1 .box21 {
	background-image: url('./assets/img/fabaotong/picture11.jpg');
}

.box .box1 .box22 {
	background-image: url('./assets/img/fabaotong/picture22.jpg');
}

.box .box1 .box23 {
	background-image: url('./assets/img/fabaotong/picture33.jpg');
}

.box .box1 .box24 {
	background-image: url('./assets/img/fabaotong/picture44.jpg');
}

.box .box1 .box25 {
	background-image: url('./assets/img/fabaotong/picture55.jpg');
}

.box .box1 .box21:hover,
.box .box1 .box22:hover,
.box .box1 .box23:hover,
.box .box1 .box24:hover,
.box .box1 .box25:hover {
	width: 540px;
}



.box .box1 .box21:hover .msg {
	display: none;
	transition: all .3s;
}

.box .box1 .box22:hover .msg {
	display: none;
	transition: all .3s;
}

.box .box1 .box23:hover .msg {
	display: none;
	transition: all .3s;
}

.box .box1 .box24:hover .msg {
	display: none;
	transition: all .3s;
}

.box .box1 .box25:hover .msg {
	display: none;
	transition: all .3s;
}

.box .box1 .box21 .boxMain {
	display: none;
	transition: all .3s;
}

.box .box1 .box22 .boxMain {
	display: none;
	transition: all .3s;
}

.box .box1 .box23 .boxMain {
	display: none;
	transition: all .3s;
}

.box .box1 .box24 .boxMain {
	display: none;
	transition: all .3s;
}

.box .box1 .box25 .boxMain {
	display: none;
	transition: all .3s;
}

.box .box1 .box21:hover .boxMain {
	display: block;
	transition: all .3s;
}

.box .box1 .box22:hover .boxMain {
	display: block;
	transition: all .3s;
}

.box .box1 .box23:hover .boxMain {
	display: block;
	transition: all .3s;
}

.box .box1 .box24:hover .boxMain {
	display: block;
	transition: all .3s;
}

.box .box1 .box25:hover .boxMain {
	display: block;
	transition: all .3s;
}

.boxshadow:hover {
	box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 4px 40px -4px rgba(51, 118, 148, 0.16);
}

/* Home Part2 mobile: 粗滚动条（仅 mdCon 容器） */
#mdCon {
	/* 隐藏原生滚动条但保留滚动能力（Firefox/旧 Edge） */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* Chromium / Safari */
#mdCon::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

/* 移动端很多浏览器不支持自定义原生滚动条：提供可见的自绘滚动条指示器 */
@media (max-width: 767px) {
	#mdCon {
		padding-bottom: 14px;
		-webkit-overflow-scrolling: touch;
	}

	#mdCon .mdCon-scrollbar {
		position: sticky;
		left: 0;
		bottom: 0;
		width: calc(100% - 24px);
		height: 12px;
		margin: 10px 12px 0;
		background: rgba(255, 255, 255, 0.18);
		border-radius: 999px;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
		pointer-events: none;
	}

	#mdCon .mdCon-scrollbar-thumb {
		height: 100%;
		width: 40px;
		background: rgba(182, 179, 213, 0.98);
		border-radius: 999px;
		transform: translateX(0);
		will-change: transform, width;
	}
}