@charset "UTF-8";
.header .logo {
		flex: 0 0 auto;
		position: relative;
		white-space: nowrap;
		text-decoration: none;
		transition: color 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
		color: var(--black);
		text-align: left;
		font-weight: 300;
		font-size: 20.53px;
		line-height: 30px;
		min-height: 30px;
		display: block;
		padding: 0 0 0 39px;
}
.header .logo:before, .header .logo:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 30px;
		height: 30px;
		background-repeat: no-repeat;
		background-position: 0 50%;
		background-size: contain;
		transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.header .logo:before {
		background-image: url("../img/logo-color.svg");
}
.header .logo:after {
		background-image: url("../img/logo-white.svg");
		opacity: 0;
}
html:not(.open-menu) .header.dark .logo {
		color: var(--white);
}
html:not(.open-menu) .header.dark .logo:after {
		opacity: 1;
}
.header .logo strong {
		font-weight: 600;
}
.header .menu .link {
		display: inline-block;
		vertical-align: top;
		padding: 5px 0 3px 0;
		border-style: solid;
		border-width: 0 0 2px 0;
		margin: -5px 0;
		color: var(--black);
		border-color: transparent;
		transition-property: color, opacity;
		transition-duration: 0.5s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.header .menu > ul > li > .link.active {
		opacity: 1;
		border-color: currentColor;
}
.header .menu ul ul .link {
		margin: -1px 0;
		padding: 1px 0 0 0;
		border-width: 0 0 1px 0;
}
.header-btns {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-wrap: wrap;
}
.header-btns > * {
		flex: 1 1 auto;
}
.header-btns .btn {
		height: 44px;
}
html.open-menu {
		overflow: hidden;
}
.menu-fader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 98;
		background: rgba(0, 0, 0, 0.7);
		transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
		backface-visibility: hidden;
}
html:not(.open-menu) .menu-fader {
		opacity: 0;
		pointer-events: none;
}
@media only screen and (max-width: 1099px) {
		.header .top {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				z-index: 100;
				height: var(--header-height);
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 var(--side-padding);
				border-bottom: 1px solid var(--border);
				background: var(--body);
				transition-property: transform, background, opacity;
				transition-duration: 0.5s;
				transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
				transform: translate3d(0, 0, 0);
		}
		html:not(.open-menu) .header:not(.clone) .top {
				background: none !important;
		}
		.header.clone .top {
				position: fixed;
				z-index: 101;
		}
		html.scrolled .header:not(.clone) {
				display: none;
				visibility: hidden;
		}
		html.scrolled:not(.scroll-up) .header.clone .top {
				transform: translate3d(0, -100%, 0);
				opacity: 0;
				pointer-events: none;
		}
		html:not(.scrolled) .header.clone .top {
				opacity: 0;
				pointer-events: none;
		}
		html:not(.open-menu) .header.dark .top {
				background-color: var(--black);
		}
		html.open-menu .header .top {
				background-color: var(--white);
		}
		.header .toggle-menu {
				flex: 0 0 auto;
				-webkit-appearance: none;
				cursor: pointer;
				user-select: none;
				border: 0;
				width: 40px;
				height: 40px;
				border-radius: 8px;
				background: var(--white);
				transition-property: transform, background;
				transition-duration: 0.5s;
				transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
				outline: none;
				box-shadow: none;
				margin: 0;
				padding: 0;
				overflow: hidden;
				text-align: left;
				text-indent: -100vw;
				position: relative;
				transform: translate3d(0, 0, 0);
				backface-visibility: hidden;
		}
		@media (pointer:fine) {
				.header .toggle-menu:hover {
						transform: translate3d(0, -1px, 0);
				}
		}
		.header .toggle-menu:active {
				transition-duration: 0s, 0.5s;
				transform: translate3d(0, 0, 0);
		}
		.header .toggle-menu > * {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate3d(-50%, -50%, 0) rotate(0deg);
				transition-property: transform, background;
				transition-duration: 0.5s, 0.5s;
				transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
				backface-visibility: hidden;
				width: 20px;
				height: 2px;
				background: var(--black);
		}
		.header .toggle-menu > *:before, .header .toggle-menu > *:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: var(--black);
				transition-property: transform, background;
				transition-duration: 0.5s;
				transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
				backface-visibility: hidden;
				transition-delay: 0.25s, 0s;
		}
		.header .toggle-menu > *:before {
				transform: translate3d(0, -6px, 0) rotate(0deg);
		}
		.header .toggle-menu > *:after {
				transform: translate3d(0, 6px, 0) rotate(0deg);
		}
		html.open-menu .header .toggle-menu {
				background-color: var(--black);
		}
		html.open-menu .header .toggle-menu > * {
				background-color: transparent;
				transform: translate3d(-50%, -50%, 0) rotate(270deg);
		}
		html.open-menu .header .toggle-menu > *:before {
				transform: translate3d(0, 0, 0) rotate(45deg);
				transition-delay: 0s;
				background-color: var(--white);
		}
		html.open-menu .header .toggle-menu > *:after {
				transform: translate3d(0, 0, 0) rotate(-45deg);
				transition-delay: 0s;
				background-color: var(--white);
		}
		.header .menu {
				position: fixed;
				top: 0;
				left: 100%;
				width: 100%;
				max-width: 480px;
				height: 100vh;
				border-bottom: 1px solid var(--border);
				background: var(--white);
				z-index: 99;
				transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
				transform: translate3d(0, 0, 0);
				padding: 110px var(--side-padding) 40px var(--side-padding);
				overflow: hidden;
				overflow-y: auto;
				font-weight: normal;
				font-size: 24px;
				line-height: 1.2;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				gap: 30px;
		}
		html:not(.scrolled) .header.clone .menu, html.scrolled .header:not(.clone) .menu {
				display: none;
		}
		html.open-menu .header .menu {
				transform: translate3d(-100%, 0, 0);
		}
		.header .menu .link {
				color: var(--black);
		}
		.header .menu ul, .header .menu li {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				flex: 0 0 auto;
				max-width: 100%;
		}
		.header .menu > ul {
				gap: 30px;
		}
		.header .menu > ul > li {
				gap: 10px;
		}
		.header .menu .sub ul {
				gap: 10px;
				font-weight: 300;
				font-size: 18px;
		}
		.header .menu .bg {
				display: none;
		}
		html:not(.scrolled).open-menu .mainwrap {
				transition: none !important;
				transform: translate3d(0, 0, 0);
		}
}
@media only screen and (min-width: 1100px) {
		:root {
				--header-height: 84px;
		}
		.header {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				z-index: 100;
				height: var(--header-height);
				background: var(--body);
				border-bottom: 1px solid var(--border);
				transition-property: transform, background, opacity;
				transition-duration: 0.5s;
				transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
		}
		html:not(.open-menu) .header:not(.clone):not(.dark) {
				background: var(--body) !important;
		}
		html:not(.open-menu) .header.dark:not(.clone) {
				background: none !important;
		}
		html.scrolled .header:not(.clone) {
				display: none;
				visibility: hidden;
		}
		.header.clone {
				position: fixed;
				z-index: 101;
				transform: translate3d(0, 0, 0);
		}
		html.scrolled:not(.scroll-up) .header.clone {
				transform: translate3d(0, -100%, 0);
		}
		html:not(.scrolled) .header.clone {
				opacity: 0;
				pointer-events: none;
		}
		html:not(.open-menu) .header.dark {
				background-color: var(--black);
		}
		.header .container {
				display: flex;
				align-items: center;
				position: static;
				gap: 30px;
				height: 84px;
		}
		.header .logo {
				z-index: 3;
		}
		.header .toggle-menu {
				display: none;
				visibility: hidden;
		}
		.header-btns > * {
				flex: 0 0 auto;
				min-width: 120px;
		}
		.header .menu {
				flex: 1 0 auto;
				display: flex;
				align-self: stretch;
				font-weight: 500;
				font-size: 16px;
				line-height: 1.2;
				--height: 250px;
		}
		.header .menu > ul {
				display: flex;
				margin: 0 auto;
				padding: 0 15px;
		}
		.header .menu > ul > li {
				flex: 0 0 auto;
				display: flex;
				align-items: center;
				padding: 0 15px;
		}
		.header .menu > ul > li > .link {
				color: var(--black);
				opacity: 0.7;
		}
		@media (pointer:fine) {
				.header .menu > ul > li > a.link:hover {
						opacity: 1;
				}
		}
		html:not(.open-menu) .header.dark .menu > ul > li > .link {
				color: var(--white);
		}
		.header .menu .sub ul {
				display: flex;
				flex-direction: column;
				gap: 6px;
		}
		.header .menu .sub, .header .menu .bg {
				position: absolute;
				left: 0;
				width: 100%;
				top: 84px;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				height: 0;
				backface-visibility: hidden;
				overflow: hidden;
				transition-property: height, background;
				transition-duration: 0.5s;
				transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
		}
		.header .menu .bg {
				--top-bg-position: 64px;
				background-color: var(--body);
				background-image: url("../img/menu/1.png"), url("../img/menu/2.png"), url("../img/menu/3.png");
				background-repeat: no-repeat;
				background-size: auto 120px;
				background-position: calc(var(--left2) + (100vw - var(--left2) - 120px) / 2) var(--top-bg-position), -100vw 0, -100vw 0;
		}
		/*
	html:not(.open-menu) .header.dark .menu .bg {
				background-color: var(--black);
		}
	*/
		.header .menu .sub {
				padding-left: calc(var(--left) + 15px);
		}
		.header .menu li.hover .sub, html.open-menu:not(.scrolled) .header:not(.clone) .menu .bg, html.open-menu.scrolled .header.clone .menu .bg {
				height: var(--height);
		}
		@media only screen and (min-width: 1280px) {
				.header .menu .bg {
						background-position: calc(var(--left2) + (100vw - var(--left2) - 297px) / 2) var(--top-bg-position), calc(var(--left2) + (100vw - var(--left2) + 57px) / 2) var(--top-bg-position), -100vw 0;
				}
		}
		@media only screen and (min-width: 1440px) {
				.header .menu .bg {
						background-position: calc(var(--left2) + (100vw - var(--left2) - 474px) / 2) var(--top-bg-position), calc(var(--left2) + (100vw - var(--left2) - 120px) / 2) var(--top-bg-position), calc(var(--left2) + (100vw - var(--left2) + 234px) / 2) var(--top-bg-position);
				}
		}
		.header .menu .sub:before, .header .menu .sub:after {
				content: '';
				position: absolute;
				top: 0;
				bottom: 0;
				width: 1px;
				background: var(--border);
		}
		.header .menu .sub:before {
				left: var(--left1);
		}
		.header .menu .sub:after {
				left: var(--left2);
		}
		.header .menu .sub ul {
				padding-top: 20px;
				padding-bottom: 20px;
		}
		.header .menu .sub .link {
				color: var(--black);
		}
}
@media only screen and (min-width: 1024px) {
		.header {
				--side-padding: 40px;
		}
}