@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import "preloader.css";
/* animation delays timings */
 @keyframes logo {
	 0% {
		 stroke-width: 1pt;
		 stroke-dashoffset: 1200;
		 fill-opacity: 0;
	}
	 50% {
		 fill-opacity: 0;
	}
	 100% {
		 stroke-dashoffset: 0;
		 fill-opacity: 1;
		 stroke-width: 0pt;
	}
}
/* @keyframes intro-logo{
	 0%{
		 transform:scale(1);
		 transform-origin: 50% 50%;
	}
	 95%{
		 transform:scale(100);
		 opacity: 1;
		 visibility: visible;
		 transform-origin: 50% 50%;
	}
	 100%{
		 transform:scale(1);
		 opacity: 0;
		 visibility: hidden;
		 transform-origin: 50% 50%;
	}
}
 */
 @keyframes intro-line {
	 0% {
		 transform: scaleY(0);
	}
	 5% {
		 transform: scaleY(0);
	}
	 49% {
		 transform-origin: top center;
	}
	 50% {
		 transform: scaleY(1);
		 transform-origin: bottom center;
	}
	 95% {
		 transform: scaleY(0);
		 transform-origin: bottom center;
	}
	 100% {
		 transform: scaleY(0);
		 transform-origin: bottom center;
	}
}
 @keyframes intro-logo {
	 0% {
		 transform: scale(1);
	}
	 98% {
		 transform: scale(100);
		 opacity: 1;
		 visibility: visible;
	}
	 99% {
		 transform: scale(100);
		 opacity: 0;
		 visibility: hidden;
	}
	 100% {
		 transform: scale(1);
		 opacity: 0;
		 visibility: hidden;
	}
}
 .intro__video:before {
	 transition-delay: 2.7s;
}
 .intro__title {
	 transition-delay: 3s, 3s;
}
 .intro__scroll {
	 transition-delay: 5.6s, 5.6s;
}
 .intro .fp-scroller {
	 height: 100%;
}
 .intro {
	 position: relative;
	 overflow: hidden;
}
 .intro__video {
	 overflow: hidden;
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
}
 .intro__video video {
	 object-fit: cover;
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	 min-width: 100%;
	 min-height: 100%;
}
 .intro__video:before {
	 will-change: opacity;
	 transition: opacity 0.5s ease-in-out 2s;
	 z-index: 1;
	 content: "";
	 position: absolute;
	 top: 0;
	 left: 0;
	 right: 0;
	 bottom: 0;
	 background-color: #fff;
}
 .intro__video:after {
	 will-change: opacity;
	 opacity: 0;
	 transition-property: opacity;
	 transition-duration: 3s;
	 transition-timing-function: ease-in-out;
	 z-index: 1;
	 content: "";
	 position: absolute;
	 top: 0;
	 left: 0;
	 right: 0;
	 bottom: 0;
	 background-color: rgba(0, 0, 0, .3);
}
 .intro__overlay {
	 position: relative;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: flex-end;
	 height: 100%;
	 width: 100%;
	 z-index: 1;
}
 .intro__overlay svg {
	 width: 547px;
}
 .intro__overlay__side {
	 width: calc((100% - 540px)/2);
	 position: absolute;
	 background-color: black;
	 height: calc(100% + 2px);
	 top: -1px;
}
 .intro__overlay__side:before {
	 content: "";
	 width: 100vw;
	 height: calc((100% - 268px)/2 - 32px);
	 position: absolute;
	 background-color: black;
}
 .intro__overlay__side-left {
	 left: 0;
}
 .intro__overlay__side-left:before {
	 top: 0;
	 left: 0;
}
 .intro__overlay__side-right {
	 width: calc((100% - 540px)/2);
	 right: 0;
}
 .intro__overlay__side-right:before {
	 height: calc((100% - 268px)/2 + 32px);
	 bottom: 0;
	 right: 0;
}
 .intro__info {
	 padding-top: 50px;
	 font-size: 16px;
	 line-height: 32px;
	 text-align: center;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 z-index: 2;
	 bottom: 0;
	 left: 0;
	 width: 100%;
	 color: #fff;
}
 .intro__logo {
	 transform: scale3d(1, 1, 1);
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 margin: auto;
	 top: 0;
	 left: 0;
	 bottom: 0;
	 right: 0;
}
 .intro__logo path {
	 will-change: fill-opacity;
	 transition: fill-opacity 0.5s ease-in-out;
	 fill-opacity: 0;
	 fill: #000;
	 stroke: #000;
	 stroke-width: 0;
	 animation-fill-mode: forwards;
}
 .intro__logo__wrap {
	 min-width: 587px;
	 min-height: 291px;
	 z-index: 1;
	 display: flex;
	 position: relative;
	 margin: auto 0;
	 transform-origin: center center;
}
 .intro__logo__side {
	 width: calc((100% - 540px)/2);
	 position: absolute;
	 background-color: black;
	 height: 400vh;
	 width: 400vw;
}
 .intro__logo__side--top {
	 left: 50%;
	 transform: translateX(-50%);
	 bottom: calc(100% - 3px);
}
 .intro__logo__side--bottom {
	 left: 50%;
	 transform: translateX(-50%);
	 top: calc(100% - 3px);
}
 .intro__logo__side--left {
	 top: 50%;
	 transform: translateY(-50%);
	 right: calc(100% - 4pt);
}
 .intro__logo__side--right {
	 top: 50%;
	 transform: translateY(-50%);
	 left: calc(100% - 4pt);
}
 .intro__menu {
	 margin-bottom: 80px;
	 display: flex;
	 justify-content: center;
	 opacity: 0;
	 visibility: hidden;
}
 .intro__menu__unit {
	 margin-right: 66px;
	 position: relative;
}
 .intro__menu__unit:after {
	 content: "";
	 position: absolute;
	 top: 14px;
	 left: calc(100% + 30px);
	 width: 6px;
	 height: 6px;
	 background-color: #d8d8d8;
}
 .intro__menu__unit:last-child {
	 margin-right: 0;
}
 .intro__menu__unit:last-child:after {
	 display: none;
}
 .intro__title {
	 position: absolute;
	 top: calc(50% + 185px + 20px);
	 left: 0;
	 width: 100%;
	 text-align: center;
	 filter: blur(10px);
	 transform: scale(0.7);
	 opacity: 0;
	 margin-bottom: 36px;
	 font-weight: 300;
	 font-size: 28px;
	 line-height: 34px;
	 text-transform: capitalize;
	 will-change: filter, transform;
}
 .intro__title__second {
	 will-change: width;
	 white-space: nowrap;
	 display: inline-block;
	 width: 0;
	 transition: width 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 3.6s;
	 overflow: hidden;
}
 .intro__scroll {
	 cursor: pointer;
	 opacity: 0;
	 visibility: hidden;
	 padding-bottom: 81px;
	 text-transform: uppercase;
	 position: relative;
}
 .intro__scroll span {
	 display: inline-block;
	 will-change: transform;
	 transition: transform 0.3s ease-in-out;
	 padding: 0 10px;
	 display: inline-block;
	 border: 1px solid #fff;
}
 .intro__scroll--work {
	 will-change: opacity, visibility;
	 transition: opacity 0.4s ease-in-out, visibility 0.3s ease-in-out;
	 font-size: 24px;
	 left: 91px;
	 position: absolute;
	 transition-delay: 0s;
	 display: inline-block;
	 bottom: 0;
}
 .intro__scroll--work:hover span {
	 transform: translateY(10px);
}
 .intro__scroll__line {
	 overflow: hidden;
	 position: absolute;
	 bottom: 0;
	 width: 1px;
	 height: 66px;
	 left: 50%;
	 transform: translateX(-50%);
}
 .intro__scroll__line:before {
	 transform-origin: top center;
	 will-change: transform;
	 animation: intro-line 2s ease-in-out 0s infinite;
	 content: "";
	 width: 100%;
	 height: 100%;
	 transform: scaleY(0);
	 position: absolute;
	 top: 0;
	 left: 0;
	 background-color: #fff;
}
 .intro__scroll--shown {
	 opacity: 1;
	 visibility: visible;
}
 .intro__description {
	 color: #fff;
	 margin-left: auto;
	 will-change: opacity, visibility;
	 transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
	 align-items: flex-start;
	 max-width: 473px;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 height: 100%;
	 opacity: 0;
	 visibility: hidden;
	 padding-bottom: 110px;
}
 .intro__description__text {
	 font-size: 45px;
	 line-height: 65px;
	 margin-bottom: 10px;
}
 .intro__description__button {
	 width: 188px;
}
 .intro__description__arrow {
	 transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	 width: 24px;
	 height: 35px;
	 position: absolute;
	 left: 50%;
	 transform: translateX(-50%) translateY(100px);
	 bottom: 30px;
	 display: flex;
	 align-items: flex-end;
	 justify-content: center;
	 cursor: pointer;
}
 .intro__description__arrow svg {
	 width: 24px;
	 height: 14px;
	 opacity: 0.7;
	 position: absolute;
	 bottom: 0;
	 left: 50%;
	 transform: translateX(-50%);
	 will-change: opacity, transform;
	 transition: transform 0.5s cubic-bezier(0.2, 0.3, 0, 0.85), opacity 0.2s cubic-bezier(0.2, 0.3, 0, 0.85);
}
 .intro__description__arrow:before {
	 opacity: 0;
	 content: "";
	 bottom: 35px;
	 width: 4px;
	 height: 4px;
	 border-radius: 50%;
	 background: #fff;
	 position: absolute;
	 left: 50%;
	 transform: translateX(-50%);
	 will-change: opacity, transform, bottom;
	 transition: bottom 0.5s cubic-bezier(0.2, 0.3, 0, 0.85), transform 0.5s cubic-bezier(0.2, 0.3, 0, 0.85), opacity 0.2s cubic-bezier(0.2, 0.3, 0, 0.85);
}
 .intro__description__arrow--active {
	 transform: translateX(-50%) translateY(0px);
}
 .intro__description__arrow:hover svg {
	 opacity: 1;
	 transform: translateX(-50%) translateY(4px) scale(1.05);
}
 .intro__description__arrow:hover:before {
	 opacity: 1;
	 bottom: 20px;
	 transform: translateX(-50%) scale(1.1);
}
 .intro__wrap {
	 padding-top: 223px;
	 height: 100%;
	 display: flex;
	 flex-direction: column;
	 justify-content: flex-end;
	 align-items: center;
}
 .intro__container {
	 z-index: 1;
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
}
 .intro--loaded .intro__video:before {
	 opacity: 0;
}
 .intro--loaded .intro__logo path {
	 animation: logo 3s linear 1;
	 fill-opacity: 1;
}
 .intro--loaded .intro__scroll {
	 will-change: opacity, visibility, text-shadow;
	 opacity: 1;
	 visibility: visible;
	 transition: opacity 0.4s ease-in-out 2s, visibility 0.4s ease-in-out 2s;
}
 .intro--loaded .intro__scroll:hover span {
	 transform: translateY(10px);
}
 .intro--loaded .intro__title {
	 will-change: opacity, visibility, filter, transform;
	 visibility: visible;
	 transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s;
	 opacity: 1;
	 filter: blur(0px);
	 transform: scale(1);
}
 .intro--animated .intro__logo__wrap {
	 will-change: transform, opacity, visibility;
	 animation: intro-logo 2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0s 1;
	 animation-fill-mode: forwards;
}
 .intro--animated .intro__overlay {
	 will-change: transform;
	 transition: transform 2s cubic-bezier(0.755, 0.05, 0.855, 0.06);
	 transform: translate(-50%, -50%) scale3d(100, 100, 100);
}
 .intro--animated .intro__info {
	 will-change: opacity, visilibity;
	 transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
	 opacity: 0;
	 visibility: hidden;
	 z-index: 1;
}
 .intro--animated .intro__description {
	 transition-delay: 2.2s;
	 opacity: 1;
	 visibility: visible;
}
 .intro--animated .intro__description__arrow {
	 cursor: pointer;
	 transition-delay: 2.5s;
	 transform: translateX(-50%) translateY(0px);
}
 .intro--animated .intro__video:after {
	 opacity: 1;
}
 @media (max-width: 1600px) {
	 .intro__logo__wrap {
		 height: 208px;
		 width: 410px;
	}
	 .intro__wrap {
		 padding-top: 150px;
	}
	 .intro__title {
		 top: calc(50% + 185px + 10px);
		 font-size: 21px;
		 line-height: 26px;
	}
	 .intro__menu {
		 margin-bottom: 61px;
		 font-size: 12px;
		 line-height: 24px;
	}
	 .intro__menu__unit {
		 margin-right: 50px;
	}
	 .intro__menu__unit:after {
		 top: 10px;
		 left: -webkit-calc(100% + 30px);
		 left: calc(100% + 19px);
		 width: 5px;
		 height: 5px;
	}
	 .intro__scroll {
		 padding-bottom: 59px;
		 font-size: 12px;
		 line-height: 24px;
	}
	 .intro__scroll__line {
		 height: 49px;
	}
	 .intro__scroll--work {
		 font-size: 18px;
		 line-height: 29px;
		 left: 69px;
	}
	 .intro__description {
		 max-width: 355px;
	}
	 .intro__description__arrow {
		 width: 18px;
		 height: 26px;
	}
	 .intro__description__arrow svg {
		 width: 18px;
		 height: 11px;
	}
	 .intro__description__arrow:before {
		 bottom: 26px;
		 height: 3px;
		 width: 3px;
	}
	 .intro__description__arrow:hover:before {
		 bottom: 15px;
	}
	 .intro__description__text {
		 font-size: 35px;
		 line-height: 49px;
		 margin-bottom: 5px;
	}
	 .intro--loaded .intro__title__second {
		 width: 255px;
	}
}
 @media (max-width: 1023px) {
	 .intro__logo__wrap {
		 margin-top: auto;
		 margin-bottom: auto;
	}
	 .intro__wrap {
		 padding-top: 160px;
	}
	 .intro__menu {
		 margin-bottom: 108px;
		 font-size: 16px;
		 line-height: 24px;
	}
	 .intro__menu__unit {
		 margin-right: 37px;
	}
	 .intro__menu__unit:after {
		 top: 9px;
		 left: calc(100% + 16px);
		 width: 6px;
		 height: 6px;
	}
	 .intro__title {
		 font-size: 24px;
		 line-height: 26px;
	}
	 .intro__scroll {
		 padding-bottom: 84px;
		 font-size: 16px;
		 line-height: 24px;
	}
	 .intro__scroll:before {
		 height: 66px;
	}
	 .intro__scroll--work {
		 left: 18px;
	}
	 .intro--loaded .intro__title__second {
		 width: 295px;
	}
}
 @media (max-width: 760px) {
	 .intro__title {
		 font-size: 14px;
		 position: absolute;
		 top: calc(50% + 19.8vw + 25px);
		 padding: 0px;
		 margin-bottom: 19px;
		 display: block;
		 line-height: 22px;
	}
	 .intro__wrap {
		 padding-top: 131px;
	}
	 .intro__logo {
		 height: calc(100% - 2px);
	}
	 .intro__logo__wrap {
		 width: 80vw;
		 height: 39.6181384248vw;
		 min-width: 80vw;
		 min-height: 39.6181384248vw;
	}
	 .intro__logo__side--left {
		 right: calc(100% - 4pt);
	}
	 .intro__logo__side--top {
		 bottom: calc(100% - 1pt);
	}
	 .intro__logo__side--bottom {
		 bottom: calc(100% - 1pt);
	}
	 .intro__logo__side--right {
		 left: calc(100% - 4pt);
	}
	 .intro__description__title {
		 letter-spacing: 1px;
	}
	 .intro__description__text {
		 margin-bottom: 0;
		 font-size: 25px;
		 line-height: 2px;
	}
	 .intro__description__arrow {
		 display: none;
	}
	 .intro__scroll {
		 padding-bottom: 49px;
		 font-size: 12px;
		 line-height: 25px;
		 text-transform: none;
	}
	 .intro__scroll:before {
		 height: 35px;
	}
	 .intro__scroll--work {
		 left: calc(100% - 129px);
		 bottom: 30px;
	}
	 .intro__menu {
		 margin-bottom: 23px;
		 font-size: 14px;
		 line-height: 32px;
		 flex-wrap: wrap;
		 justify-content: space-between;
	}
	 .intro__menu__unit {
		 margin-bottom: 6px;
		 width: calc(50% - 18px);
		 margin-right: 0;
	}
	 .intro__menu__unit:nth-child(2n-1) {
		 text-align: right;
	}
	 .intro__menu__unit:nth-child(2n) {
		 text-align: left;
	}
	 .intro__menu__unit:nth-child(2n):after {
		 display: none;
	}
	 .intro__menu__unit:after {
		 top: 14px;
		 left: calc(100% + 14px);
	}
	 .intro--loaded .intro__scroll:hover span {
		 transform: translateY(5px);
	}
}