@charset "UTF-8";
#menu {
	position: fixed; top: 0;
	width: 720px; height: var(--menuHeight);
	background-color: #fff;
	display: flex;
	justify-content: space-between; align-items: center;
	z-index: 99999;
	transition: all .3s;
}
#menu.on {background-color: var(--menuBackground);}
/* 로고, 햄버거 */
#menu .menu_logo,
#menu .menu_toggle {
	width: 100px; height: var(--menuHeight);
	display: flex; justify-content: center; align-items: center;
	cursor: pointer;
}
#menu .menu_logo {width: 378px;}
.menu_logo.blind {width: 1px !important; height: 1px !important; margin: -1px; overflow: hidden;}
/* 로고이미지 크기조정 */
#menu .menu_logo>img {width: 318px;}

/* 햄버거 */
.menu_toggle .toggle_wrap {
	width: 50px; height: 40px;
	position: relative;
	transition: all .2s;
}
/* 햄버거 바 */
.toggle_wrap .toggle_bar {
	position: absolute;
	width: 100%; height: 6px;
	background-color: var(--menuColor);
	border-radius: 6px;
}
.toggle_bar:nth-child(1) {top:0;}
.toggle_bar:nth-child(2) {top:calc(20px - 3px); right: 0; width: 70%;}
.toggle_bar:nth-child(3) {top:calc(40px - 6px);}

/* 햄버거 클릭 */
.menu_toggle .toggle_wrap.on {transform: rotate(45deg);}
.toggle_wrap.on .toggle_bar:nth-child(1) {top:calc(20px - 3px); transform: rotate(90deg);}
.toggle_wrap.on .toggle_bar:nth-child(2) {display: none;}
.toggle_wrap.on .toggle_bar:nth-child(3) {top:calc(20px - 3px);}


/* 탭메뉴 */
.tab {position: absolute; top: var(--menuHeight); right: 20px; display: none;}
/* 햄버거 클릭하면 보임 */
.tab.now {display: block;}
.tab .tab_item {margin: 30px 0; text-align: right; opacity: 0; filter: brightness(200%); transition:all .2s;}
.tab .tab_item>a {
	display: inline-block;
	font-size: 38px; font-weight: 900; color: var(--menuBorder);
	padding: 15px 20px; background-color: var(--menuBackground);
	border-radius: 40px; border: 4px solid var(--menuColor);
}
/* 해당 페이지에 들어갈 시 효과 */
.tab .tab_item.on>a {
	color: #fff; background-color: var(--menuColor);
}
/* 딜레이를 줘서 순서대로 나오는듯한 효과 */
.tab.on .tab_item {opacity: 1; filter: brightness(100%);}
.tab .tab_item:nth-child(2) {transition-delay: .04s;}
.tab .tab_item:nth-child(3) {transition-delay: .08s;}
.tab .tab_item:nth-child(4) {transition-delay: .12s;}
.tab .tab_item:nth-child(5) {transition-delay: .16s;}
.tab .tab_item:nth-child(6) {transition-delay: .2s;}