@charset "UTF-8";

/* 메뉴 */
#menu {
	width: var(--width); height: var(--height);
	position: fixed; top: 0; left: 50%; transform: translateX(-50%);
	background-color: var(--menuBackground);
	transition: all .5s;
	z-index: 999;
}
/* 스크롤 시 배경색 변경 */
#menu.on {background-color: var(--menuScrollBackground);}
#menu .menu_wrap {
	width: 100%; height: 100%;
	display: flex; justify-content: space-between; align-items: center;
}

/* 로고 */
.menu_wrap .menu_logo {
	width: calc(var(--menulogo_width) + 60px); height: 100%;
	display: flex; justify-content: center; align-items: center;
}
/* .menu_logo img {} */

/* 햄버거바 */
.menu_wrap .menu_btn {
	width: calc(var(--menubtn_width) + 60px); height: 100%;
	display: flex; justify-content: center; align-items: center;
	cursor: pointer;
}
.menu_btn #menutoggle {display: none;}
.menu_btn .btn_wrap {
	width: var(--menubtn_width); height: var(--menubtn_height);
	position: relative;
	cursor: pointer;
	transition: all .2s;
}
.btn_wrap .btn_bar {
	width: 100%; height: var(--btnBar_height);
	background: #000; border-radius: var(--btnBar_height);
	transition: all .2s;
}
.btn_bar {position: absolute;}
.btn_bar:nth-child(1) {top:0;}
.btn_bar:nth-child(2) {top: calc(var(--menubtn_height)/2 - var(--btnBar_height)/2);}
.btn_bar:nth-child(3) {top:calc(var(--menubtn_height) - var(--btnBar_height));}

/* 클릭 시 */
#menutoggle:checked + .btn_wrap {transform: rotate(135deg);}
#menutoggle:checked + .btn_wrap .btn_bar:nth-child(1),
#menutoggle:checked + .btn_wrap .btn_bar:nth-child(3) {
	top: calc(var(--menubtn_height)/2 - var(--btnBar_height)/2);
	transform: rotate(90deg);
}

/* 1tab 메뉴 */
#tab {
	position: fixed; top: 100px; left: 50%; transform: translateX(-50%);
	width: var(--width); padding: 40px 50px;
	box-sizing: border-box; z-index: 999;
	background-color: var(--mainColor);
	border-radius: 25px;
	display: none;
}
#tab .tab_wrap, .tab2_wrap {
	width: 100%;
	position: relative;
	display: flex; flex-direction: column; align-items: center;
	gap: 20px;
}
.tab_wrap .tab_item, .tab2_item {width: 100%;}
.tab_item .tab_link, .tab2_link {
	position: relative; display: block; padding: 10px 0;
	font-size: 36px; font-weight: 600;
}
.tab_link::before {
	content: ""; display: inline-block; clear: both;
	height: 36px; width: var(--btnBar_height); border-radius: var(--btnBar_height);
	background-color: #fff;
	margin-bottom: -5px; margin-right: 10px;
}
.tab_link.on { text-shadow: -2px 0px #fff, 0px 2px #fff, 2px 0px #fff, 0px -2px #fff; color: var(--mainColor);}
.tab_item:first-child>.tab_link.on { text-shadow: none; color: #fff;}
.tab_link.on::before {
	width: calc(var(--btnBar_height)/2);
	border:2px solid #fff;
	background-color: transparent;
	border-radius: 0;
}

/* 2tab 메뉴 */
.tab2_wrap {
	margin-top: 25px;
	box-sizing: border-box; padding: 30px 20px;
	background-color: #fff; border-radius: 25px;
	display: none;
}
.tab2>.tab_link {margin-left: -7px;}
.tab2_link {color: var(--mainColor);}
.tab2 .tab_link::before {
	content: ""; display: inline-block; clear: both;
	width: 10px; height: 10px; border-radius: 10px;
	border: 6px solid #fff;
	background-color: var(--mainColor);
	margin-bottom: 1px; margin-right: 10px;
}
.tab2_link.on { text-shadow: -2px 0px var(--mainColor), 0px 2px var(--mainColor), 2px 0px var(--mainColor), 0px -2px var(--mainColor); color: #fff;}
.tab2 .tab_link.on::before {background-color: #fff;}