@charset "utf-8";
/*-----------------------------------------------------------*/

#nav_toggle_btn{position:fixed;top:10px;right:10px;width:60px;height:60px;background:var(--app-main-color);z-index:99999;cursor:pointer;}
#nav_toggle_btn .inner{display:flex;flex-direction: column; align-items:center;justify-content:center; width: 100%;height: 100%;}
#nav_toggle_btn .mark{display: flex;align-items: center;justify-content: center;position:relative;width:100%;padding-top:10%; height: 55%;}
#nav_toggle_btn .label{color: #fff;height: 45%;}
#nav_toggle_btn .label_menu{display: inline;}
#nav_toggle_btn.active .label_menu{display: none;}
#nav_toggle_btn .label_close{display: none;}
#nav_toggle_btn.active .label_close{display: inline;}

.lines_wrap,
.lines_wrap span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.lines_wrap {
	position: relative;
	width: 70%;
	height: 70%;
}
.lines_wrap span {
	position: absolute;
	left: 10%;
	width: 80%;
	height: 2px;
	background-color: #fff;
}
.lines_wrap span:nth-of-type(1) {
	top: 0;
}
.lines_wrap span:nth-of-type(2) {
	top: 44%;
}
.lines_wrap span:nth-of-type(3) {
	bottom: 0;
}

.active .lines_wrap {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}
.active .lines_wrap span:nth-of-type(1) {
	-webkit-transform: translateY(440%) rotate(-45deg);
	transform: translateY(440%) rotate(-45deg);
}
.active .lines_wrap span:nth-of-type(2) {
	-webkit-transform: translateY(0) rotate(45deg);
	transform: translateY(0) rotate(45deg);
}
.active .lines_wrap span:nth-of-type(3) {
	opacity: 0;
}


/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/
/*---------- < tab:896 px ----------*/
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/

@media screen and (max-width: 896px) {

#nav_toggle_btn{top:5px;right:5px;width:50px;height:50px;}
.active .lines_wrap span:nth-of-type(1) {
	-webkit-transform: translateY(380%) rotate(-45deg);
	transform: translateY(380%) rotate(-45deg);
}
.active .lines_wrap span:nth-of-type(2) {
	-webkit-transform: translateY(0) rotate(45deg);
	transform: translateY(0) rotate(45deg);
}

}

/*-----------------------------------------------------------*/