.system-wrap {
	margin-top: 30px
}

.system-wrap .list {
	width: 20%;
	line-height: 60px
}

.system-wrap .list li {
	background: #ccc;
	padding: 0 10px;
	cursor: pointer;
	font-size: 17px;
}

.system-wrap .list li.active {
	background: #4ca664;
	color: white
}

.system-wrap .content {
	width: 74%;
	height: 100%;
	padding: 30px;
	box-sizing: border-box
}

@media (max-width: 996px) {
	.system-wrap {
		position: relative
	}

	.system-wrap .list {
		position: absolute;
		left: 0;
		width: 100%;
		max-width: 370px;
		transform: translateX(-99%);
		transition: transform .4s;
		z-index: 1
	}

	.system-wrap .content {
		width: 100%;
		padding: 8px
	}

	.system-wrap .show-list {
		position: fixed;
		left: 0;
		width: 30px;
		height: 30px;
		border: 1px solid #ccc;
		border-radius: 0 5px 5px 0;
		background: #ccc;
		transition: transform .4s;
		cursor: pointer;
		z-index: 2
	}

	.system-wrap .show-list::before,
	.system-wrap .show-list::after {
		content: '';
		position: absolute;
		top: 14px;
		left: 10px;
		width: 12px;
		height: 2px;
		background: white;
		transform-origin: 100% 50%
	}

	.system-wrap .show-list::before {
		transform: rotate(45deg)
	}

	.system-wrap .show-list::after {
		transform: rotate(-45deg)
	}
}