@charset "UTF-8";
@media only screen and (min-width: 768px) {
	:root {
		font-size: 1.111111vw;
		--side: 20px;
	}
	.container {
		padding-left: var(--side);
		padding-right: var(--side);
		max-width: 1280px;
	}
	.logo {
		position: absolute;
		top: 20px;
		left: var(--side);
	}
	.toggle-menu {
		display: none;
	}
	.menu {
		position: fixed;
		z-index: 100;
		top: 20px;
		right: var(--side);
		width: auto;
	}
	.menu .bg,
	.menu .email,
	.menu .logo {
		display: none;
	}
	.menu .links {
		display: flex;
		gap: 10px;
		align-items: center;
	}

	.menu .link {
		font-weight: 500;
		font-size: 12px;
		text-transform: uppercase;
		color: var(--blue);
		background: var(--white);
		letter-spacing: 0.03em;
		text-align: center;
		text-decoration: none;
		opacity: 0;
		position: relative;
		height: 40px;
		white-space: nowrap;
		flex: 0 0 auto;
		overflow: hidden;
		padding: 0 8px;
	}
	.menu .link:nth-child(1) {
		mask-image: url("../img/menu/1.svg");
		-webkit-mask-image: url("../img/menu/1.svg");
		width: 104px;
	}
	.menu .link:nth-child(2) {
		mask-image: url("../img/menu/2.svg");
		-webkit-mask-image: url("../img/menu/2.svg");
		width: 112px;
	}
	.menu .link:nth-child(3) {
		mask-image: url("../img/menu/3.svg");
		-webkit-mask-image: url("../img/menu/3.svg");
		width: 94px;
	}
	.menu .link:nth-child(4) {
		mask-image: url("../img/menu/4.svg");
		-webkit-mask-image: url("../img/menu/4.svg");
		width: 110px;
	}
	.menu .link:before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 180px;
		height: 130px;
		background: var(--blue);
		border-radius: 50%;
		margin: -65px -90px;
		z-index: 1;
		backface-visibility: hidden;
		will-change: transform;
		transform: scale(0);
		transition: transform 0.6s ease;
	}
	.menu .link > * {
		position: absolute;
		top: 50%;
		margin: -8px 0;
		left: 0;
		right: 0;
		overflow: hidden;
		backface-visibility: hidden;
		line-height: 16px;
		height: 16px;
		z-index: 2;
	}
	.menu .link .cover:before {
		display: block;
		content: attr(data-text);
		color: var(--white);
		transform: translate3d(0, 100%, 0);
	}
	.menu .link .text > *,
	.menu .link .cover:before {
		display: block;
		backface-visibility: hidden;
		transition: transform 0.3s ease;
	}
	.menu .link .text > * {
		transform: translate3d(0, 0, 0);
	}
	@media (pointer: fine) {
		.menu .link:hover:before {
			transform: scale(1);
		}
		.menu .link:hover .text > * {
			transform: translate3d(0, -100%, 0);
		}
		.menu .link:hover .cover:before {
			transform: translate3d(0, 0, 0);
		}
	}
	.top-block {
		font-size: 4rem;
		padding-bottom: 40px;
	}
	.about {
		padding-top: 250px;
		padding-bottom: calc(50vh - 7.75rem);
		padding-bottom: calc(50lvh - 7.75rem);
	}
	.shadow-text {
		font-size: 44px;
	}
	.about .years {
		height: 100%;
		padding-top: 18rem;
		padding-bottom: 18rem;
		font-size: 1.875rem;
	}
	.about .years img {
		transform: translate3d(0, calc(-20% * var(--percent1) + 10% * var(--percent2)), 0)
			scale(calc(1.3 - 0.3 * var(--percent1)));
	}
	.about:after {
		background-image: url("../img/figure-big.svg");
		width: 721px;
		height: 721px;
		margin: -360px;
	}
	.equipment .bg {
		width: 100%;
		height: 100vh;
		position: sticky;
		margin-bottom: -100vh;
		top: 0;
		right: 0;
		background: var(--grey);
	}
	.equipment .bg .wrap {
		position: absolute;
		bottom: 0;
		right: 0;
		height: 100vh;
		width: 100vh;
		height: 100vh;
		width: 100vh;
		max-width: 70vw;
		max-height: 70vw;
		background: url("../video/video-poster-lazer.html") no-repeat 50% 50%;
		background-size: cover;
	}
	.equipment .bg .wrap:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 100px;
		background: linear-gradient(to bottom, var(--grey) 0%, var(--grey0) 100%);
		z-index: 2;
	}
	.equipment .bg .wrap:after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100px;
		background: linear-gradient(to right, var(--grey) 0%, var(--grey0) 100%);
		z-index: 2;
	}
	.equipment .bg video,
	.equipment .bg img {
		width: 100%;
		height: 100%;
	}
	.equipment .container {
		padding-top: 190px;
		padding-bottom: 184px;
		min-height: 100vh;
		min-height: 100lvh;
	}
	.equipment .big {
		font-size: 2.75rem;
		margin-bottom: 6.8125rem;
	}
	.equipment ul {
		gap: 7.5rem;
		font-size: 1.5rem;
	}
	.service {
		padding-top: 140px;
		padding-bottom: 230px;
	}
	.service:before {
		content: "";
		position: absolute;
		animation: slow-rotating 40s linear infinite;
		pointer-events: none;
		background: url("../img/figure-big.svg") no-repeat 50% 50%;
		background-size: contain;
		width: 721px;
		height: 721px;
		top: 0;
		right: -350px;
	}
	.service .big {
		font-size: 2.75rem;
		margin-bottom: 100px;
	}
	.line {
		width: 70%;
		height: 70px;
		position: relative;
		overflow: hidden;
		span {
			position: absolute;
		}
	}
	.service ul {
		flex-direction: row;
		margin-top: 10em;
		align-items: flex-start;
	}
	.service li {
		font-size: 1.25rem;
	}
	.service .dot-title,
	.service .big,
	.service li {
		backface-visibility: hidden;
		will-change: transform;
	}
	.service li {
	}
	.service li:nth-child(1) {
		transform: translate3d(0, calc(6em * var(--percent)), 0);
	}
	.service li:nth-child(2) .image img {
		animation: bouge-3 2.3s ease infinite alternate;
	}
	.service li:nth-child(3) .image img {
		animation: bouge-4 2.6s ease infinite alternate;
	}
	.service li:nth-child(2) {
		transform: translate3d(0, calc(0em * var(--percent)), 0);
		/* margin-bottom: 5em; */
	}
	.service li:nth-child(3) {
		transform: translate3d(0, calc(10em * var(--percent)), 0);
		/* margin-bottom: -5em; */
	}
	.service .dot-title,
	.service .big {
		transform: translate3d(0, calc(100px - 100px * var(--percent)), 0);
	}
	.contacts .container {
		padding-top: 200px;
		padding-bottom: 100px;
	}
	.contacts .bg2 {
		position: sticky;
		top: 100%;
		height: 0;
		pointer-events: none;
	}
	.contacts .bg2 div {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}
	.contacts .bg2 div:before {
		content: "";
		position: absolute;
		animation: slow-rotating 40s linear infinite;
		pointer-events: none;
		background: url("../img/figure-big.svg") no-repeat 50% 50%;
		background-size: contain;
		width: 721px;
		height: 721px;
		top: 200px;
		left: -350px;
	}
	.contacts .big {
		font-size: 2.75rem;
		margin-bottom: 100px;
		position: relative;
		z-index: 10;
	}
	.contacts .text {
		width: 27.25rem;
		float: right;
		font-size: 1.875rem;
		margin-bottom: -200px;
	}
	.contacts .bottom {
		padding-top: 0;
		clear: both;
	}
	.contacts .bottom > *:last-child {
		min-width: 27.25rem;
	}
	.contacts .image {
		position: relative;
		height: 300px;
		margin: 200px 0 100px 0;
		transition: 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}
	.contacts .image img {
		width: 100%;
		height: 730px;
		animation: bouge-2 3.4s ease infinite alternate;
		display: block;
		object-fit: contain;
		object-position: center;
	}
	.contacts .image {
		transform: translate3d(0, calc(-250px * var(--percent2)), 0);
	}
	.contacts .text {
		transform: translate3d(0, calc(-350px * var(--percent2)), 0);
	}
}
@media only screen and (min-width: 1280px) {
	:root {
		--side: 40px;
	}
	.service li {
		font-size: 18px;
	}
}
@media only screen and (min-width: 1440px) {
	:root {
		font-size: 16px;
	}
}

.loader {
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--dark);
}
.loader svg.loader-svg {
	position: absolute;
	bottom: 2rem;
	right: 2rem;
	width: 45px;
	height: 45px;
}
.loader svg.loader-svg {
	animation-duration: 1s;
	border-radius: 50%;
	transition-duration: 0.8s;
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}
@-moz-keyframes spin {
	100% {
		-moz-transform: rotate(360deg);
	}
}
@-webkit-keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@keyframes spin {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.logo-svg {
	top: 20px;
	left: var(--side);
	position: absolute;
}
.loader svg.loader-svg path,
svg.loader-svg rect {
	fill: white;
}

body .is-hidden {
	overflow: hidden;
}