.complex {
	position: relative;
	width: 100%;
	a {
		.complex-menu {
			color: #fff;
		}
	}
	.complex-menu {
		position: relative;
		width: calc(100% - 20px);
		height: 45px;
		padding: 0 10px;
		@include grid_3x(30px, 1fr, 30px);
		// @media (max-width: $max-width) {
		// 	@include grid_none();
		// }
		&:hover {
			cursor: pointer;
			background-color: rgba($color: #000, $alpha: 0.1);
		}
		&.active {
			background-color: rgba($color: #000, $alpha: 0.1);
		}
		.complex-icon {
			@include column_n(1);
			text-align: left;
			font-size: 8pt;
			line-height: 45px;
		}
		.complex-title {
			@include column_n(2);
			line-height: 45px;
			font-size: 13px;
			// @media (max-width: $max-width) {
			// 	display: none;
			// }
		}
		.complex-sign {
			@include column_n(3);
			text-align: right;
			// @media (max-width: $max-width) {
			// 	display: none;
			// }
		}
	}
	.complex-list {
		position: fixed;
		top: 0;
		left: 220px;
		width: 350px;
		height: 100vh;
		background-color: #fff;
		z-index: 100;
		box-shadow: $shadow;
		overflow-y: auto;
		@include transparantScrollBar();
	}
	.complex-content {
		position: relative;
		width: 100%;
		background-color: rgba($color: #000, $alpha: 0);
		border-top: 0.5px rgba($color: #fff, $alpha: 0.84) solid;
		border-bottom: 0.5px rgba($color: #fff, $alpha: 0.84) solid;
	}
}
