#banner>.video, #banner>video, header:before {
	position: absolute;
	z-index: 1;
	display: block
}
.st1, .st3, .stack, .stack .str_move, .stack .str_wrap {
	display: flex
}
.st1 .desc, .st2>div+div .desc, .st3 .desc, .st3 .desc2 {
	color: rgba(255, 255, 255, .5)
}
#banner h1, .markets .title {
	text-transform: uppercase;
	font-weight: 600
}
#web .info>div, .c2 .front a, .c3 .front a, .card .front, .card .front a, .maint .m2, .maint>div, .st3 .desc, .st3 .title, .stack .info>div, .types .sub, .types .tag {
	text-align: center
}
.c3 .content1 .block2, .c3 .content2 .block1 {
	border-bottom: 1px solid rgba(255, 255, 255, .5)
}
#banner .desc textarea, .union, .union2 {
	font-family: IBM Plex Sans
}
.card .number, .union, .union2 {
	font-style: normal
}
#banner .desc, .union, .union2 {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4
}
.c2 .content3 .block1, .c2 .content3 .block2 {
	border-left: 1px solid #0e0f12;
	border-right: 1px solid #0e0f12
}
#dv .dots p, .card, .faq .head {
	cursor: pointer
}
#coop, #other, #types {
	padding: 150px 0
}
#banner>.video, #banner>video, #coop>video {
	object-position: left center;
	object-fit: cover
}
#banner .desc, #coop, #dv, #dv .bottom>div, #dv .bottom>div>div, #dv .top .section-title.active2, #faq, #progress .an, .card .back, .card .front, .play-video, .progress .number, .stack, .stack .str_wrap {
	overflow: hidden
}
#banner.cooperation>div:not(#v3d-container) {
	display: block;
	height: auto;
	padding: 0
}
#banner>video {
	top: 130px;
	left: calc(50% - 30px);
	height: 800px
}
#banner>.video {
	top: 0;
	left: 25%;
	height: 800px;
	width: auto
}
@media screen and (max-height:900px) {
	#banner>.video, #banner>video {
		height: calc(100vh - 100px)
	}
}
#banner h1 {
	color: #fff;
	font-size: 124px;
	line-height: 1;
	margin: 0 0 40px
}
#banner h1 span, .card .content:first-child, .progress .image img {
	display: block
}
#banner .btn {
	margin: -40px auto 0;
	transform: translateX(-110px)
}
#banner .desc {
	color: #fff;
	max-width: 465px;
	width: 100%
}
#banner .desc textarea {
	font-size: 17px
}
#banner .desc1, #dv .right p+p {
	margin-left: 120px
}
#banner .desc1 textarea {
	min-height: 120px
}
#banner .btn-inline {
	margin-top: 40px
}
header:before {
	content: url(../images/svg2.svg);
	right: 0;
	top: 0;
	pointer-events: none
}
#card, #web .info>div p, .dvs .bg>*, .play-video .video~div, .play-video video+div, .play-video video~div, .rotate>div p, .skew>div p, .types>div>*, header .container {
	position: relative;
	z-index: 2
}
@media screen and (max-width:1440px) {
	#banner h1 {
		font-size: 8vw
	}
}
@media screen and (min-width:1250px) and (max-height:900px) {
	#banner>div {
		padding: 120px 0 50px
	}
	#banner h1 {
		font-size: 100px
	}
}
@media screen and (min-width:1250px) and (max-height:800px) {
	#banner h1 {
		font-size: 12vh
	}
}
#stack {
	padding: 75px 0 115px
}
.stack:before {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, #160c2a 0, rgba(21, 11, 41, 0) 12.51%, rgba(21, 11, 41, 0) 87.5%, #150b28 100%)
}
.st, .stack, .stack .str_wrap {
	position: relative
}
.stack .str_wrap {
	width: 100%;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none
}
.stack .str_move {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0!important
}
.other .title, .st1 .desc, .st1 .title, .st2 .title {
	margin: 0 0 20px
}
.stack {
	justify-content: flex-start
}
.st {
	padding: 45px 60px 60px;
	width: 710px;
	min-width: 710px;
	margin-right: 24px;
	background: #110922
}
.st1 {
	background: url(../images/st1.png) center center/cover no-repeat;
	flex-direction: column;
	justify-content: space-between
}
.st2 img, .stack .st1 img {
	position: absolute;
	top: 30px;
	right: 30px
}
#dv .top, #maint, #web .info>div, .card, .markets>div, .niches>div, .st2>div, .types {
	position: relative
}
.stack .info {
	margin: 0 -10px
}
.stack .info>div {
	max-width: calc(33.33% - 20px);
	margin: 0 10px;
	padding: 15px;
	background: url(../images/st12.png) center center/cover no-repeat
}
.stack .info>div .desc2 {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 75px
}
.st3, .st5, .st8 {
	flex-direction: column
}
.stack .info>div:first-child {
	background: url(../images/st11.png) center center/cover no-repeat
}
.maint .title, .progress .text ul li, .stack .title2 {
	margin: 0 0 10px
}
.st2 {
	width: 340px;
	min-width: 340px;
	padding: 0;
	background: 0 0
}
.st2>div {
	height: calc(50% - 12px);
	background: url(../images/st21.png) center/cover no-repeat;
	padding: 30px
}
.st2>div+div {
	margin-top: 24px;
	background: url(../images/vv2.jpg) center/cover no-repeat
}
.st3 {
	width: 465px;
	min-width: 465px;
	padding: 30px;
	justify-content: space-between;
	background: url(../images/vv4.jpg) center/cover no-repeat
}
.c1 .list-n>div, .st3>div {
	width: 100%
}
.st3 img {
	display: block;
	margin: 0 auto 20px
}
.st3 .title {
	margin: 0 0 20px
}
.st3 .desc {
	margin: 0 0 40px
}
.st3 .info2>div, .st3.st7 .info2>div {
	text-align: center;
	max-width: calc(50% - 10px)
}
.st3 .title2 {
	font-size: 28px;
	margin: 0
}
.st3.st4 {
	background: url(../images/st41.png) center center/cover no-repeat;
	color: #fff;
	padding: 30px 30px 60px
}
.st3.st4 .desc {
	color: #fff;
	margin: 0 0 30px
}
.st3.st4 .info2>div {
	max-width: 100%
}
.st5>div {
	height: auto
}
.st5, .st8 {
	display: flex;
	justify-content: space-between
}
.st3.st6 {
	background: url(../images/vv3.jpg) center/cover no-repeat
}
.st3.st7 {
	background: url(../images/st7.png) center center/cover no-repeat
}
.st8>div {
	background: url(../images/vv.jpg) center/cover no-repeat
}
.st8>div+div {
	background: url(../images/st21.png) center/cover no-repeat
}
.st3.st7 .info2>div:first-child:last-child {
	max-width: 100%;
	width: 100%
}
.st3.st9 {
	padding: 30px;
	background: url(../images/vv2.jpg) center/cover no-repeat
}
#markets {
	padding: 70px 0 50px
}
#markets .section-title {
	margin: 0 0 44px
}
.markets {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px
}
.markets>div {
	grid-column: 2/3;
	padding: 60px;
	display: flex;
	flex-direction: column;
	justify-content: space-between
}
.markets>div:first-child {
	grid-column: 1/2;
	grid-row: 1/3;
	background: url(../images/market1.jpg) center center/cover no-repeat
}
.markets>div:nth-child(2) {
	background: url(../images/market2.jpg) center center/cover no-repeat
}
.markets>div:nth-child(3) {
	background: url(../images/market3.jpg) center center/cover no-repeat
}
.markets .number {
	position: absolute;
	top: 40px;
	right: 40px
}
.markets .title {
	margin: 0 0 20px;
	font-size: 58px;
	line-height: 1.25
}
.markets .desc {
	max-width: 470px;
	margin: 0 0 20px
}
.markets .sl-m {
	width: 100%;
	max-width: 530px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0, rgba(255, 255, 255, 0) 100%)
}
.markets .sl-m .slick-slide {
	padding: 30px;
	color: rgba(255, 255, 255, .5);
	height: 108px
}
.markets .sl-m .slick-slide b {
	font-weight: 400;
	color: #fff
}
.markets .slick-dots {
	display: flex;
	margin: 10px 30px 30px
}
.c2 .rotate>div:nth-child(2), .maint .title:last-child, .markets .slick-dots li, .progress .text ul li:last-child {
	margin: 0
}
.markets .slick-dots button {
	margin: 0 20px 0 0;
	border: 0;
	box-shadow: none;
	padding: 0;
	text-indent: -9999px;
	border-radius: 30px;
	background: rgba(255, 255, 255, .3);
	width: 6px;
	height: 6px;
	transition: .25s;
	cursor: pointer;
	display: block
}
.card.c3 .number:after, .markets .slick-dots button:hover, .rotate>div:nth-child(3):before, .skew>div:first-child:before, .skew>div:nth-child(3):before {
	background: #fff
}
.markets .slick-dots .slick-active button {
	width: 40px;
	background: #fff
}
#niches {
	padding: 50px 0 75px
}
#niches .section-title {
	margin: 0 0 35px;
	font-size: 58px
}
.niches {
	margin: 0 -12px
}
.niches>div {
	margin: 0 12px;
	padding: 30px;
	max-width: calc(25% - 24px);
	color: var(--Grey-Text, #7f7893);
	position: relative;
	transition:all linear .25s;
}
.niches>div a {
	position: absolute;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
}
@media screen and (min-width:1250px) {
	.niches>div.a:hover {
		background: #fff;
	}
}
@media screen and (max-width:1250px) {
	.niches .title svg {
		width: 20px;
		height: 19px;
		position: absolute;
		right: 0;
		top:5px;
	}
	.niches .title {
		position: relative;
		padding-right: 30px;
	}
}
.niches>div.a:hover .title {
	color:#3667FF;
}
.niches>div.a:hover svg {
	transform:rotate(45deg);
}
.niches .title {
	color: #fff;
	transition:all linear .25s;
}
.niches .title svg {
	margin-left: 10px;
}
.niches>div:after, .niches>div:before {
	content: ' ';
	display: block;
	width: 100%;
	left: 0;
	height: 1px;
	background: rgba(255, 255, 255, .1);
	bottom: 0;
	position: absolute
}
.niches>div:after, .part3 .slide31 .bg {
	top: 0
}
.card .content, .easy_mode .progress>div:first-child .number:before, .easy_mode .progress>div:last-child .number:after, .niches>div:last-child:after, .niches>div:nth-last-child(2):after, .niches>div:nth-last-child(3):after, .niches>div:nth-last-child(4):after, .progress .image {
	display: none
}
#web {
	padding: 250px 0 65px
}
#web .section-title {
	margin: 0 0 25px
}
#web .desc {
	max-width: 465px;
	margin: 0 0 20px
}
#web .info {
	max-width: 790px;
	margin: 55px 125px 0 auto
}
#web .info>div {
	width: 100%;
	height: 295px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 15px 25px
}
#web .info>div:before {
	content: ' ';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 20px;
	border: 1px solid #8e7d91;
	background: rgba(251, 249, 245, .05);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	display: block;
	transform: rotate(45deg)
}
#web .info>div:first-child {
	margin-top: 30px
}
#web .info>div:nth-child(2) {
	margin-top: -162px;
	margin-left: -30px;
	margin-right: -30px
}
#web .info>div:nth-child(3) {
	margin-top: 65px;
	margin-left: -35px
}
#coop .section-title, #coop .sub, #types .section-title {
	margin: 0 0 50px
}
.types {
	height: 520px
}
.position4, .types .t4 {
	height: 394px!important
}
.types>div {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 30px;
	height: 248px;
	background-size: cover!important;
	position: absolute;
	transition: 1s
}
.union p, main .d4 p {
	padding: 19px 30px 21px
}
.types>div video {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1
}
.types .h2 {
	font-size: 28px
}
.types .sub {
	color: rgba(255, 255, 255, .9);
	font-size: 14px;
	margin: 0 0 10px
}
.types .tag {
	padding: 11px 0 9px;
	width: 100%;
	border-radius: 50px;
	background: rgba(255, 255, 255, .1);
	backdrop-filter: blur(37px);
	-webkit-backdrop-filter: blur(37px)
}
.types .t1 {
	background: url(../images/type1.jpg) center center no-repeat;
	width: 23.7%
}
.types .t2 {
	background: url(../images/type2.jpg) center center no-repeat;
	width: 15.2%
}
.types .t3 {
	background: url(../images/type3.jpg) center center no-repeat;
	width: 23.7%
}
.types .t4 {
	background: url(../images/type4.jpg) center center no-repeat;
	width: 32.4%
}
.types .t5 {
	background: url(../images/type5.jpg) center center no-repeat;
	width: 40.6%
}
.types .t6 {
	background: url(../images/type6.jpg) center center no-repeat;
	width: 23.7%
}
.position1 {
	top: 0;
	left: 0
}
.position2 {
	top: 0;
	left: calc(23.7% + 1.66%)
}
.position3 {
	top: 0;
	left: calc(23.7% + 15.2% + 2 * 1.66%)
}
.position4 {
	top: -144px;
	left: calc(2 * 23.7% + 15.2% + 3 * 1.66%)
}
.position5, .position6, .position7, .position8, .position9 {
	top: calc(248px + 24px)
}
.position5 {
	left: 0
}
.position6 {
	left: calc(23.7% + 15.2% + 2 * 1.66%)
}
.position7 {
	left: calc(23.7% + 1.66%)
}
.position8 {
	left: calc(100% - 23.7%)
}
.t4.position8 {
	left: auto;
	top: calc(100% - 394px);
	right: 0
}
.position9 {
	left: calc(100% - 40.6% - 1.66% - 23.7%)
}
#maint {
	padding: 170px 0;
	background: url(../images/maint.png) center top no-repeat
}
#maint .container {
	margin-top: 150px
}
.maint {
	margin: 0 -10px;
	align-items: flex-start;
	padding-left: 40px
}
.maint>div {
	margin: 0 10px
}
.maint .m1, .maint .m3 {
	width: 100%;
	max-width: 465px;
	margin-top: 300px
}
.maint .m2 {
	padding: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
	background: rgba(255, 255, 255, .05);
	backdrop-filter: blur(75px);
	-webkit-backdrop-filter: blur(75px);
	height: 400px;
	width: 405px
}
.maint span {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 40px;
	border-radius: 64px;
	background: rgba(54, 134, 255, .45);
	box-shadow: 0 3.72406px 5.32008px 0 rgba(54, 134, 255, .15), 0 12.50833px 17.86905px 0 rgba(54, 134, 255, .21), 0 56px 80px 0 rgba(54, 134, 255, .36);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px)
}
.maint .m1 span {
	background: rgba(255, 54, 54, .35);
	box-shadow: 0 3.72406px 5.32008px 0 rgba(255, 54, 54, .15), 0 12.50833px 17.86905px 0 rgba(255, 54, 54, .21), 0 56px 80px 0 rgba(255, 54, 54, .36)
}
.maint span:before {
	content: ' ';
	display: block;
	background: #fff;
	border-radius: 100%;
	width: 10px;
	height: 10px
}
.list-n p span, .rotate>div:before, .skew>div:before {
	background: var(--Primary, #3667ff)
}
.card {
	width: 100%;
	height: 100vh;
	min-height: 700px
}
.card.active .front {
	transform: perspective(50vw) rotateY(-180deg)
}
.card .front, .card.active .back {
	transform: perspective(50vw) rotateY(0)
}
.card .back, .card .front {
	width: 100%;
	height: 100%;
	position: absolute;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: transform .5s
}
.card .front {
	display: flex;
	flex-wrap: wrap;
	padding: 150px 30px 250px;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start
}
.card .content1, .card .content2, .card .content3 {
	background: #69a7f5;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap
}
.c2 .front a, .c3 .front a, .card .front a, .card .number {
	display: inline-block
}
.card .content2 {
	background: #140b27
}
.card .content3, .card .front a:hover .number:after, .card:hover .front a .number:after {
	background: #deeeb5
}
.card .front a {
	max-width: 240px
}
.c2 .front a {
	max-width: 265px
}
.c3 .front a {
	max-width: 195px
}
.card .number {
	font-size: 127px;
	font-weight: 600;
	line-height: 1;
	padding-left: 15px;
	margin: 0 0 50px
}
.card .number:after {
	content: ' ';
	display: block;
	width: calc(100% + 15px);
	margin-left: -15px;
	margin-top: -75px;
	height: 95px;
	background: #3667ff;
	transition: .25s linear
}
.card.c3 .front a:hover .number:after, .card.c3:hover .front a .number:after {
	background: #3667ff
}
.card .front .h2 {
	font-size: 58px;
	display: inline-block
}
.card .back {
	transform: perspective(50vw) rotateY(180deg)
}
.card.c1 .front {
	background: url(../images/card1.jpg) center center/cover no-repeat #69a7f5
}
.card.c2 .front {
	align-items: flex-end;
	align-content: flex-end;
	background: url(../images/card2.jpg) center center/cover no-repeat
}
.c2 .content1 .block1, .c2 .content1 .block2 {
	align-items: center;
	padding: 40px;
	display: flex
}
.card.c3 .front {
	color: #0e0f12;
	background: url(../images/card3.jpg) center center/cover no-repeat #deeeb5
}
.card.c3 .content1 {
	background: url(../images/cont1.png) right bottom no-repeat #69a7f5
}
.c2 .content1 .block2, .c3 .content1 .block1 {
	background: rgba(255, 255, 255, .2)
}
.c2 .content1 .block1 {
	height: 60%;
	justify-content: center;
	color: #fff
}
.c2 .content1 .block2 {
	height: 40%
}
.c3 .content1>div {
	height: 33.33%;
	display: flex;
	align-items: center;
	padding: 40px
}
.c3 .content1>div.block3 {
	padding-bottom: 140px
}
.c1 .content3 .d4 p, .c3 .content1 .d4 p {
	backdrop-filter: unset;
	-webkit-backdrop-filter: unset
}
.card.c1 .content2 {
	padding: 40px 40px 140px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	flex-direction: row;
	background: url(../images/cont2.png) left bottom no-repeat #140b27
}
.c1 .content2 .h2 {
	margin-bottom: 30px;
	font-size: 20px
}
@media screen and (max-height:850px) {
	.c1 .content2 .h2 {
		margin-bottom: 15px
	}
	.card.c1 .content2 {
		padding-bottom: 40px
	}
}
.c1 .list-n {
	justify-content: flex-start;
	max-width: 430px
}
.c2 .content3 .h2, .card .h2 {
	font-size: 24px
}
.c3 .content2 {
	background: url(../images/cont3.png) 390px 40% no-repeat #140b27
}
.c3 .content2>div {
	height: 50%;
	padding: 40px
}
.c3 .content2 .block1 {
	display: flex;
	align-items: center;
	padding-bottom: 140px
}
.union {
	max-width: 450px
}
.union p {
	color: #fff;
	border-radius: 50px;
	display: inline-block;
	background: linear-gradient(180deg, rgba(54, 103, 255, .26) 0, rgba(255, 255, 255, .22) 100.83%)
}
.union p:nth-child(2) {
	margin: 10px 0 10px 90px
}
.union2 {
	background: url(../images/union2.png) left top no-repeat;
	padding: 16px;
	max-width: 375px;
	margin: 0 auto
}
.union2 p {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 148px;
	height: 148px;
	border-radius: 100%;
	background: #fff;
	color: var(--Black, #0e0f12);
	margin-right: 16px
}
.union2 p:nth-child(3) {
	margin-left: 124px;
	margin-top: -39px
}
.c1 .content3 .block1 {
	height: 45%;
	display: flex;
	align-items: center;
	padding: 40px;
	color: #fff
}
.c1 .content3 .block2 {
	height: 55%;
	border-top: 1px solid #0e0f12;
	padding: 40px;
	color: var(--Black, #0e0f12)
}
.c1 .content3 {
	background: url(../images/cont4.png) left top no-repeat #deeeb5
}
.c1 .content3 .d4 p:before {
	content: ' ';
	width: 64px;
	height: 64px;
	background: url(../images/check3.svg) center center no-repeat;
	position: absolute;
	left: -74px;
	top: 0;
	z-index: 1
}
.c2 .content3 .block1 {
	height: 45%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	color: #fff
}
.c2 .content3 .block2, .list-n p, .part3 .i1, .rotate>div:nth-child(3) p {
	color: var(--Black, #0e0f12)
}
.c2 .content3 .block2 {
	height: 55%;
	border-top: 1px solid #0e0f12;
	padding: 40px
}
.c2 .rotate>div:before {
	background: #0e0f12
}
.c2 .rotate {
	padding: 25px;
	display: flex;
	flex-wrap: wrap;
	max-width: 570px;
	justify-content: space-between
}
.c2 .rotate>div:nth-child(3) {
	margin-left: auto;
	margin-right: auto;
	margin-top: -30px
}
#dv .top {
	height: 490px
}
#dv .top .section-title {
	transition: 1.2s;
	display: flex
}
#dv .top .section-title span {
	transition: 1.2s;
	text-indent: 0
}
#dv .top .section-title.active1 {
	overflow: hidden;
	width: 142px;
	text-indent: 0
}
#dv .top .section-title.active2 {
	width: 583px
}
#dv .top .section-title.active2 span:first-child {
	text-indent: -142px
}
#dv .top .slide {
	padding: 150px 0 100px;
	height: 760px;
	margin-bottom: -200px;
	position: absolute;
	left: 100%;
	top: 0;
	width: 100%;
	transition: left 1.2s
}
#dv .top .slide.active1 {
	left: 0;
	z-index: 2
}
#dv .top .slide.active2 {
	left: -30%;
	z-index: 1
}
#dv .top .slide.active3 {
	transition: none;
	left: 100%
}
#dv .top .slide1 {
	background: url(../images/slide1.jpg) center -100px no-repeat #140b27
}
#dv .top .slide2 {
	padding-top: 190px;
	background: url(../images/slide2.jpg) center top/cover no-repeat #140b27
}
#dv .top .slide2 .right {
	margin-left: 305px
}
#dv .top .fix {
	position: absolute;
	top: 100px;
	z-index: 3
}
#dv .section-title {
	font-size: 88px;
	line-height: 1.1;
	margin: 0 0 20px
}
#dv .arrows {
	position: absolute;
	top: 50px;
	right: 20px;
	z-index: 4
}
#dv .bottom>div, #dv .container, #dv .right p, .rotate>div, .skew>div {
	position: relative
}
#dv .dots {
	margin-top: 100px
}
#dv .dots p {
	border: 2px solid rgba(255, 255, 255, .1);
	width: 12px;
	height: 12px;
	margin-right: 10px;
	border-radius: 100%;
	transition: .25s;
	background: 0 0
}
#dv .dots p:hover {
	border-color: #fff
}
#dv .dots p.active {
	border-color: #fff;
	background: #fff
}
#dv .right {
	padding-top: 20px;
	opacity: 0;
	transition: opacity 1.2s
}
#dv .active1 .right {
	opacity: 1
}
#dv .active2 .right {
	opacity: 0
}
#dv .slide>div {
	transform: translateX(-500px);
	transition: 1.2s
}
#dv .slide.active1>div, #dv .slide.active2>div {
	transform: translateX(0)
}
#dv .right p {
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, .1);
	background: rgba(255, 255, 255, .05);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	padding: 20px 25px;
	margin: 0 0 20px;
	max-width: 515px
}
#dv .right p:before {
	content: url(../images/check.svg);
	position: absolute;
	left: -74px;
	top: 0;
	z-index: 1
}
#dv .bottom>div {
	height: 540px
}
#coop>div, #dv .bottom {
	position: relative;
	z-index: 3
}
#dv .bottom>div>div {
	position: absolute
}
#dv .bottom .part1, #dv .bottom .part3 {
	width: calc((100% - 500px)/ 2)
}
#dv .bottom .part2 {
	width: 500px;
	margin: 0 -1px
}
.dvs .bg {
	width: 100%;
	height: 100%
}
.part1 .bg {
	width: 488px;
	height: 100%;
	position: absolute;
	right: -1px;
	padding-right: 25px
}
.part1 .slide11 .bg {
	left: calc((100vw - 1480px)/ 2 + 15px);
	right: auto
}
.part1 .dvs .bg:before {
	content: ' ';
	width: calc((100vw - 465px)/ 2 + 5px);
	height: calc(100% + 10px);
	position: absolute;
	top: -5px;
	right: -5px;
	border: 1px solid rgba(255, 255, 255, .1);
	background: rgba(255, 255, 255, .1);
	backdrop-filter: blur(75px);
	-webkit-backdrop-filter: blur(75px)
}
#progress .an:before, .part3 .dvs .bg:before, .rotate>div:before, .skew>div:before, main .d4 p:before {
	top: 0;
	content: ' ';
	position: absolute
}
.part1 .slide12 .bg:before {
	background: url(../images/slide11.png) right top/cover no-repeat
}
.part1 .slide12 {
	right: 0
}
.part1 .slide12 p+p {
	margin-top: 20px
}
.part1 .dvs {
	width: 0;
	height: 100%;
	transition: 1.2s
}
.part1 .dvs.active {
	width: 100%;
	z-index: 2
}
.part2 .bg {
	width: 100%;
	height: 540px;
	position: absolute;
	padding-top: 0
}
.part2 .slide22 .bg {
	display: flex;
	align-items: center;
	padding: 30px 15px
}
.part3 .i1, .rotate>div {
	align-items: center;
	display: flex;
	text-align: center
}
.part2 .slide21 .bg {
	bottom: 0;
	background: url(../images/slide22.png) right top/cover no-repeat;
	padding: 75px 35px 30px
}
.part2 .slide21, .part3 .slide32 {
	bottom: 0
}
.part2 .slide22 {
	background: var(--Hover, #dff0ac)
}
.part2 .dvs, .part3 .dvs {
	width: 100%;
	height: 0;
	transition: 1.2s
}
.part2 .dvs.active, .part3 .dvs.active {
	height: 100%;
	z-index: 2
}
.slide22 .skew>div {
	width: 100%;
	margin: 10px 30px!important
}
.slide22 .skew>div:nth-child(2n):before {
	background: var(--Primary, #3667ff)!important
}
.slide22 .skew>div:nth-child(odd):before {
	background: var(--Primary, #fff)!important
}
.slide22 .skew>div:nth-child(2n) {
	color: #fff!important
}
.slide22 .skew>div:nth-child(odd) {
	color: var(--Black, #0e0f12)!important
}
.slide22 .bg>div.i1 {
	padding: 20px 40px
}
.easy_mode .progress .content>div, .part3 .i1 {
	padding: 60px
}
.slide22 .i2 {
	background: url(../images/slide21.jpg) right top/cover no-repeat
}
.part2 .slide21 .bg p {
	text-align: center;
	margin: 0 0 30px
}
.part3 .bg {
	width: 488px;
	height: 540px;
	position: absolute;
	bottom: 0
}
.part3 .dvs .bg:before {
	width: calc((100vw - 465px)/ 2);
	height: 100%;
	left: 0;
	border: 1px solid rgba(255, 255, 255, .1);
	background: rgba(255, 255, 255, .1);
	backdrop-filter: blur(75px);
	-webkit-backdrop-filter: blur(75px)
}
.part3 .i1 {
	height: 50%;
	background: var(--Hover, #dff0ac);
	justify-content: center
}
.part3 .slide31 .bg {
	right: calc((100vw - 1480px)/ 2 + 15px);
	left: 0;
	display: flex;
	align-items: flex-end
}
@media screen and (max-width:1480px) {
	.part1 .slide11 .bg {
		left: 20px!important
	}
	.part1 .bg, .part3 .bg {
		width: calc((100vw - 465px)/ 2 - 22px)
	}
}
.slide12 .bg {
	padding-top: 50px
}
.rotate>div {
	justify-content: center;
	padding: 15px;
	width: 150px;
	height: 150px
}
.card .rotate>div {
	width: 180px;
	height: 180px
}
@media screen and (max-width:1850px) {
	.card .rotate>div {
		width: 150px;
		height: 150px
	}
	.c2 .rotate {
		max-width: 480px
	}
}
.rotate>div:before {
	display: block;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	transform: rotate(-45deg)
}
.rotate>div:nth-child(2) {
	margin: -40px 0 -40px 150px
}
.dvs .bg>.aligncenter {
	height: 100%;
	align-items: center
}
.list-n {
	display: flex;
	flex-wrap: wrap;
	justify-content: center
}
.list-n p, .skew>div {
	display: inline-flex;
	align-items: center
}
.list-n p {
	margin: 0 10px 20px!important;
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, .4);
	background: rgba(255, 255, 255, .9);
	padding: 1px 20px 3px 2px
}
.card .list-n p {
	margin: 0 0 20px!important
}
.list-n p span {
	width: 40px;
	min-width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	border-radius: 100%;
	color: #fff;
	margin-right: 10px;
	margin-top: 1px
}
.skew {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: -10px
}
#dv .skew {
	justify-content: center
}
.skew>div {
	text-align: center;
	justify-content: center;
	padding: 19px 40px 21px;
	margin: 0 5px 10px
}
.slide32 .bg, main .d4 p {
	display: flex;
	align-items: center
}
.faq .head:hover, .skew>div:first-child, .skew>div:nth-child(3) {
	color: #0e0f12
}
.other>a:hover, main .d4 p {
	color: var(--Black, #0e0f12)
}
.skew>div:nth-child(odd) {
	margin-left: 0;
	margin-right: 0
}
.skew>div:nth-child(2n) {
	margin-right: 0;
	margin-left: auto
}
.easy_mode .progress .number, .ondv main {
	overflow: visible
}
#dv .skew>div:nth-child(3) {
	margin-left: 65px
}
#dv .skew>div:nth-child(2) {
	margin-right: 65px
}
.skew>div:before {
	display: block;
	left: 0;
	width: 100%;
	height: 100%;
	transform: skewX(30deg);
	border-radius: 10px
}
#coop, .play-video, .progress .content, .progress .number, .progress .number p, main .d4 p {
	position: relative
}
.slide32 .bg {
	justify-content: center
}
main .d4 p {
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, .4);
	background: rgba(255, 255, 255, .9);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	margin: 15px 0 15px 74px;
	min-height: 64px
}
main .d4 p:before {
	width: 64px;
	height: 64px;
	background: url(../images/check2.svg) center center no-repeat;
	left: -74px;
	z-index: 1
}
.other>a {
	display: block;
	max-width: calc(50% - 12px);
	color: #fff;
	padding: 60px 0;
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, .1);
	border-bottom: 1px solid rgba(255, 255, 255, .1)
}
.other>a:hover {
	padding-left: 30px
}
.other .tag {
	border-radius: 50px;
	background: #180d35;
	padding: 10px 20px;
	display: inline-block;
	color: #fff
}
#progress {
	padding: 150px 0 50px
}
.progress .number {
	width: 100%;
	max-width: 106px;
	margin-right: 138px;
	align-items: center;
	display: none
}
.progress .number p {
	display: block;
	width: 100%;
	border-radius: 100%;
	line-height: 106px;
	text-align: center;
	background: url(../images/number.png) center center/cover no-repeat;
	z-index: 2
}
#progress .col-left {
	width: 100%;
	max-width: 980px;
	padding-right: 30px
}
#progress .col-left:last-child {
	padding: 0;
	max-width: 100%
}
#progress .col-left:last-child .number {
	display: flex
}
#progress .col-right {
	width: 100%;
	max-width: 435px;
	margin-bottom: -50px
}
#progress .col-right canvas {
	margin-left: auto
}
#progress .an {
	position: sticky;
	top: calc(50vh - 182px);
	margin-right: -20px;
	padding-right: 20px;
	margin-top: -50px
}
#progress .an:before {
	display: block;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, #140b27 0, rgba(20, 11, 39, .6) 8.35%, rgba(20, 11, 39, 0) 16.84%, rgba(20, 11, 39, 0) 50.05%, rgba(20, 11, 39, 0) 82.5%, rgba(20, 11, 39, .6) 90.5%, #140b27 100%)
}
.easy_mode .progress .number:after, .easy_mode .progress .number:before {
	content: ' ';
	display: block;
	width: 2px;
	height: 50%;
	position: absolute;
	z-index: 1;
	background: #fff;
	left: calc(50% - 1px);
	top: auto;
	bottom: calc(50% + 53px + 20px)
}
.easy_mode .progress .number:after {
	top: calc(50% + 53px + 20px)
}
.progress>div {
	min-height: 330px
}
.progress .content {
	width: 100%;
	margin: 0
}
.easy_mode .progress>div {
	margin-bottom: 20px;
	min-height: unset
}
.easy_mode .progress .content {
	background: url(../images/bg7.jpg) left top/100% 100% no-repeat
}
.progress .content:before, .progress>div:last-child .content:after {
	content: ' ';
	height: 1px;
	width: 0;
	background: rgba(255, 255, 255, .1);
	transition: 1.2s cubic-bezier(.63, .02, .67, .47);
	left: 0;
	position: absolute
}
.progress .content>div {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 60px 0;
	position: relative;
	z-index: 2
}
.progress .content:before {
	top: 0
}
.progress>div:last-child .content:after {
	bottom: 0
}
.easy_mode .progress .content:before {
	content: '';
	background: url(../images/bg6.svg) center/cover no-repeat;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%
}
.progress .text {
	color: var(--Grey-Text, #7f7893);
	max-width: 465px;
	width: 100%
}
.progress .text ul {
	list-style: none
}
.progress .title {
	width: 100%;
	max-width: 345px
}
#faq {
	padding: 0 0 150px
}
.faq>div>div {
	border-top: 1px solid #2b233d
}
.faq>div:last-child>div {
	border-bottom: 1px solid #2b233d
}
.faq .head {
	align-items: center;
	padding: 50px 40px;
	margin: 0 -40px;
	color: #fff;
	transition: .6s
}
.faq .head svg {
	fill: #fff;
	display: block;
	margin-left: 20px;
	min-width: 24px;
	transition: .5s
}
.faq .head:hover svg {
	fill: #0E0F12
}
.faq .body {
	display: none;
	max-width: 1075px;
	padding: 30px 0
}
.faq .body p+p {
	margin-top: 38px
}
.faq .layout:before {
	top: 100%;
	left: -200px;
	transition: .5s;
	transform-origin: left center
}
.faq .layout:hover:before {
	transform: scale(30)
}
.faq .head.active svg {
	transform: rotate(180deg)
}
#coop {
	min-height: 900px
}
.easy_mode #coop {
	padding-bottom: 130px;
	min-height: unset
}
#coop>.video {
	position: absolute;
	top: -35px;
	left: 350px;
	max-width: calc(100% - 350px);
	width: auto;
	max-height: calc(100% + 4vw);
	height: auto;
	object-fit: unset;
	z-index: 1;
	display: block
}
@media screen and (min-width:1600px) {
	#coop>.video {
		left: auto;
		right: 0
	}
}
#coop>video {
	position: absolute;
	top: 0;
	left: 200px;
	width: calc(100% - 200px);
	z-index: 1;
	height: 900px;
	display: block
}
#coop>.video+img, #coop>video+img {
	position: absolute;
	width: 1920px;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 2;
	min-width: 100%
}
#coop .d-flex .col-left {
	width: 100%;
	max-width: 750px;
	padding-right: 40px
}
#coop .d-flex .col-right {
	width: 100%;
	max-width: calc(100% - 750px)
}
.play-video .video, .play-video video {
	width: 100%;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	z-index: 1;
	object-fit: cover;
	object-position: right center
}
#web.play-video video {
	object-position: right center
}
#web.play-video .video {
	height: auto;
	width: 800px
}
#maint.play-video video {
	object-position: center center;
	height: 85%
}
@media (max-width:1520px) {
	.part1 .bg {
		padding-left: 20px
	}
	.part1 .rotate {
		margin-left: 30px
	}
}
@media (max-width:1480px) or (max-height:900px) {
	.list {
		transform: scale(.9);
		transform-origin: 35% center
	}
	.union2 {
		transform: scale(.9);
		width: 110%;
		transform-origin: left top
	}
	.c2 .rotate>div:nth-child(3) {
		margin-top: -30px
	}
	.dvs .rotate {
		margin-left: 30px
	}
	.card.c1 .front, .card.c3 .front {
		padding-top: 40px
	}
	.card.c2 .front {
		padding-bottom: 140px
	}
	.c2 .content1 .h2, .c2 .content2 .h2 {
		font-size: 20px
	}
	.card .number {
		margin: 0 0 25px
	}
	main .d4 p {
		padding: 10.5px 20px 9.5px;
		min-height: 44px;
		margin-left: 54px
	}
	.c1 .content3 .d4 p:before, main .d4 p:before {
		width: 44px;
		height: 44px;
		left: -54px;
		background-size: cover
	}
	.skew>div {
		padding: 13px 20px 14px
	}
	.c1 .content2 .h2, .c2 .content3 .h2, .card .h2 {
		font-size: 18px
	}
	.c2 .rotate p {
		line-height: 1.3;
		font-size: 15px
	}
	.card .rotate>div, .rotate>div {
		width: 130px;
		height: 130px
	}
	.c2 .rotate {
		max-width: 390px
	}
	.rotate>div:nth-child(2) {
		margin: -30px 0 -30px 110px
	}
	#dv .bottom>div, .part1 .bg, .part2 .bg, .part3 .bg {
		height: 400px
	}
	.top .slide {
		padding: 200px 0 50px;
		height: 710px
	}
	.part3 .i1 {
		height: 100%
	}
}
@media (max-width:1580px) {
	#web.play-video video {
		object-position: center center
	}
}
@media (max-width:1380px) {
	.rotate>div {
		width: 110px;
		height: 110px
	}
}