@charset "utf-8";

html {
	scroll-behavior: smooth;
}
body {
	overflow-x: hidden;
}
.container {
	position: absolute;
	inset: 0;
	overflow: auto;
}
.contents {
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* :::::: toggle button :::::: */
#drawer {
	display: none;
}
label {
	cursor: pointer;
	position: fixed;
}
.open {
	z-index: 9999;
	top: 0;
	right: 0;
	width: 16.6666%;
	height: 60px;
	background: #05c2ca;
}
.open::before,
.open::after {
	content: "";
}
.open span,
.open::before,
.open::after {
	content: "";
	position: absolute;
	top: 34%!important;
	left: 0!important;
	right: 0!important;
	margin: auto!important;
	width: 16px;
	border-bottom: 1.5px solid #fff;
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open::before {
	transform: translateY(-5px);
}
.open::after {
	transform: translateY(5px);
}
span.open_txt{
	width: 100%;
	display: block;
	color: #fff;
	font-size: 8px!important;
	line-height: 8px;
	height: 8px;
	text-align: center;
	position: absolute;
	top: auto!important;
	bottom: 23%!important;
	font-weight: 600;
	border: 0;
}
.close {
	z-index: 9997;
	inset: 0;
	pointer-events: none;
	transition: background .3s;
}
#drawer:checked + .open {
	background: linear-gradient(45deg,#132235,#263346);
}
#drawer + .open span {
	left: 0!important;
	right: 0!important;
}
#drawer:checked + .open span {
	transform: scaleX(0);
}
#drawer:checked + .open span.open_txt {
	transform: none!important;
}
#drawer:checked + .open::before {
	transform: rotate(135deg) scaleX(1.2);
}
#drawer:checked + .open::after {
	transform: rotate(-135deg) scaleX(1.2);
}
#drawer:checked ~ .close {
	pointer-events: auto;
	background: rgba(0,0,0,.3);
}

/* :::::: drawer menu :::::: */
.menu {
	z-index: 9998;
	position: fixed;
	overflow: auto;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	box-sizing: border-box;
	background: linear-gradient(45deg,#132235,#263346);
	transform: translateX(-100%);
	transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu ul {
	margin: 0;
	padding: 0;
}
.menu li {
	line-height: 1.4;
}
.menu li:not(:first-child) {
}
#drawer:checked ~ .menu {
	transform: none;
}
.pointer_none{
	pointer-events: none;
}
@media only screen and (min-width: 769px) {
.open,
.menu,
.close{
	display: none;
	}
}