.bh_layer {
	position: fixed;
	background-color: var(--bh_color_white);
    top: 0;
	left: 0;
	width: 70%;
	height: 100vh;
	z-index: 99;
	transition: all 0.5s;
	left: -100%;
	.bh_layer_close {
		span {
			display: block;
			width: fit-content;
			margin-left: auto;
			padding-top: 10px;
			padding-right: 10px;
		}
	}
	.ri-close-line {
		font-size: 2.4rem;
	}
}

.bh_layer.on {
	left: 0;
}

.mobile_main_menu {
	margin-top: 20px;
	.user_menu_area {
		margin-bottom: 20px;
		ul {
			display: flex;
			column-gap: 10px;
			justify-content: center;
			li > a {
				font-size: 16px;
				padding: 10px 20px;
				color: var(--bh_color_gray_900);
				border: 1px solid var(--bh_color_gray_300);
				border-radius: 5px;
			}
		}
	}
	> ul > li {
		position: relative;
		border-bottom: 1px solid var(--bh_color_gray_300);
		> a {
			display: block;
			padding: 13px 30px 13px 20px;
			color: var(--bh_color_gray_900);
			font-size: 16px;
			letter-spacing: -1px;
			border-radius: 0;
		}
		> .bh_toggle {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 50px;
			color: var(--bh_color_gray_700);
			font-size: 18px;
			text-align: right;
			background: none;
			border: 0;
			padding: 0;
			margin: 0;
			cursor: pointer;
			outline: none;
			z-index: 2;
		}
		> .bh_toggle i {
			/* padding: 16px 20px 9px 11px; */
			position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
		}
		> .bh_toggle > .bh_toggle_up {
			display: none;
		}
		&:hover {
			> a {
				font-weight: 700;
			}
		}
		&.active {
			> a {
				color: var(--bh_color_black);
				font-weight: 700;
			}
			> .bh_toggle {
				color: var(--bh_color_gray_900);
			}
			> .bh_toggle > .bh_toggle_down {
				display: none;
			}
			> .bh_toggle > .bh_toggle_up, > a + ul {
				display: block;
			}
		}

		> a + ul {
			display: none;
			background-color: #f4f6f7;
			padding: 10px 0;
			> li {
				> a {
					display: block;
					color: var(--bh_color_gray_700);
					font-size: 15px;
					letter-spacing: -1px;
					padding: 9px 20px;
				}
				&.active > a {
					color: var(--bh_color_main);
					font-weight: 700;
				}
				> ul {
					background-color: #fbfbfb;
					border: 1px solid var(--bh_color_gray_200);
					padding: 10px;
					margin: 0 20px 10px 28px;
					> li > a {
						display: block;
						color: var(--bh_color_gray_700);
						font-size: 15px;
						letter-spacing: -1px;
						padding: 3px 2px;
					}
				}
			}
		}
	}
}