@charset 'utf-8';

.home .Logo,
.home .Menu,
.home .Scroller {
	animation: fede 6s;
	mix-blend-mode: initial
}
.home main {
	background: transparent
}
.home .Panel {
	min-height: 300px
}

/* Cover
------------------------------ */
.Cover {
	background: #000;
	display: grid;
	height: 100dvh;
	overflow: hidden;
	position: relative;
	width: 100%
}
.Cover::before,
.Cover::after {
	content: "";
	height: 100dvh;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%
}
.Cover::before {
	background-image: url(../image/entrance.jpg);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover
}
.Cover::after {
	animation: coverAfter 5s;
	background: rgba(0,0,0,.4);
    box-shadow: inset 50px 50px 50px rgba(0,0,0,.4), inset -50px -50px 50px rgba(0,0,0,.4)
}
@keyframes coverAfter {
	  0% { background: rgba(0,0,0, 1) }
	 40% { background: rgba(0,0,0, 1) }
	 60% { background: rgba(0,0,0, 1) }
	 65% { background: rgba(0,0,0,.9) }
	 70% { background: rgba(0,0,0,.9) }
	 90% { background: rgba(0,0,0,.8) }
	100% { background: rgba(0,0,0,.8) }
}

.Billboard {
	animation: lit 5s;
	position: relative;
	text-align: center;
	top: 40%;
	z-index: 1
}
@keyframes lit {
	0% { opacity: 1 }
   90% { opacity: 1 }
   95% { opacity: .5 }
   97% { opacity: .5 }
   98% { opacity: 1 }
   99% { opacity: .5 }
  100% { opacity: 1 }
}
.Billboard::before,
.Billboard::after {
	background: rgba(31,71,153,1);
	content: "";
	height: 200dvh;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	transition: .5s;
	width: 250%;
	z-index: -1;
}
.Billboard::before {
	animation: billboardBefore 4s;
	background: rgba(0,0,0,1);
	opacity: .5;
	transform: translateX(-20%) translateY(-120%) rotate(19deg);
}
@keyframes billboardBefore {
	  0% { opacity: 1 ; top: 230% }
	 50% { opacity: 1 ; top: 230% }
	100% { opacity: .5; top: 0 }
}
.Billboard::after {
	animation: billboardAfter 4s;
	opacity: .8;
	transform: translateX(-30%) translateY(25%) rotate(19deg);
}
@keyframes billboardAfter {
	  0% { opacity: 1 ; top: -160% }
	 50% { opacity: 1 ; top: -160% }
	100% { opacity: .8; top: 0 }
}
body.Active .Billboard::before,
body.Active .Billboard::after {
	opacity: 1
}

.Symbol {
	animation: billboardSymbol 6.5s;
	display: block;
	filter: drop-shadow(0 0 6px #ffdd33) drop-shadow(0 0 2px #ffdd33);
	margin: auto;
	position: initial
}
@keyframes billboardSymbol {
	  0% { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff)}
	 69% { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff)}
	 70% { filter: drop-shadow(0 0 6px #ffdd33) drop-shadow(0 0 2px #ffdd33) }
	100% { filter: drop-shadow(0 0 6px #ffdd33) drop-shadow(0 0 2px #ffdd33) }
}
.Symbol path {
    animation: billboardStroke 1.5s ease-in both;
	fill: transparent;
	stroke: #fff;
    stroke-width: 10;
    stroke-dasharray: 800px
}
@keyframes billboardStroke {
    0% {
        fill: transparent;
        stroke-dashoffset: 800px
    }
    80% {
        fill: transparent
    }
    100%{
        stroke-dashoffset: 0
    }
}

.LogoType {
	display: inline-block;
	text-align: center;
	margin: auto;
}
.LogoType h2 {
	animation: LogoType 6.5s;
	color: #fff;
	font-size: 3rem;
	font-family: 'Lexend', sans-serif;
	font-weight: 500;
	letter-spacing: -.02em;
	margin: auto;
    text-shadow: 0 0 10px rgba(255,221,51,1), 0 0 20px rgba(255,221,51,1);
	text-transform: uppercase;
	z-index: 1
}
@keyframes LogoType {
	  0% { text-shadow: none }
	 69% { text-shadow: none }
	 70% { text-shadow: 0 0 10px rgba(255,221,51,1), 0 0 20px rgba(255,221,51,1) }
	100% { text-shadow: 0 0 10px rgba(255,221,51,1), 0 0 20px rgba(255,221,51,1) }
}
.LogoType h2 span {
	animation: LogoTypeSpan .6s backwards;
	display: inline-block
}
.LogoType h2 span:nth-child(6) {
	margin: 0 .12em
}
.LogoType h2 span:nth-child(12) {
	margin-right: -.04em
}
.LogoType h2 span:nth-child(4),
.LogoType h2 span:nth-child(13) {
	margin-right: -.1em
}
@keyframes LogoTypeSpan {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.LogoType h3 {
	animation: logoTypeH3 6.5s;
	color: #fff;
	font-size: 1.2rem;
	letter-spacing: normal;
	text-shadow: 0 0 10px rgba(255,221,51,1), 0 0 20px rgba(255,221,51,1);
	margin: -.5rem -2%;
	text-align: right
}
@keyframes logoTypeH3 {
	0% { opacity: 0; text-shadow: none }
   50% { opacity: 0; text-shadow: none }
   60% { opacity: 1; text-shadow: none }
   74% { opacity: 1; text-shadow: none }
   75% { opacity: 1; text-shadow: 0 0 10px rgba(255,221,51,1), 0 0 20px rgba(255,221,51,1) }
  100% { opacity: 1; text-shadow: 0 0 10px rgba(255,221,51,1), 0 0 20px rgba(255,221,51,1) }
}

.Copy {
	bottom: 4%;
	left: 0;
	margin-left: 11%;
	position: absolute;
	transition: .1s;
	width: 80%;
	z-index: 1
}
.Copy path {
    animation: pathStroke 7s ease-in both;
	fill: #fff;
	opacity: .6;
    stroke: #fff;
    stroke-dasharray: 400px;
    stroke-width: 0.5px
}
@keyframes pathStroke {
    0% {
        fill: transparent;
		stroke-dashoffset: 400px;
    }
    80% {
        fill: transparent;
		stroke-dashoffset: 400px;
	}
    100%{
        stroke-dashoffset: 0;
    }
}

/* Main
------------------------------ */
#Hello {
	padding-bottom: 10%;
	padding-top: 10%;
	text-align: center
}
#Hello::after {
	background-color: #1f4799;
	background-image: url(../image/typography.png);
	background-repeat: no-repeat;
	background-size: 175%
}

#News {
	background-image: url(../image/tv.png);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 110%
}
#News::before,
#News::after {
	background-color: #121415
}
#News .Grid {
	margin-top: 80%
}
#News ul {
	margin: 0;
	overflow: hidden;
	padding: 0
}
#News li {
	list-style-type: square;
	margin: 0 0 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
#News li a {
	background: url(../image/arrow.png) no-repeat 0 50%;
	background-size: 16px 16px;
	display: block;
	line-height: 2.4rem;
	padding-left: 30px
}
#News li a:hover {
	background-image: url(../image/arrow-hover.png);
}
#News time {
	float: left;
	margin-right: 1rem;
    vertical-align: middle;
	width: 80px
}
#News .Visual .DiagonalTop svg {
	transform: scale(-1, 1)
}
#News .Visual .DiagonalTop svg path:nth-child(2) {
	fill: #1f4799
}
#News .Visual .Star {
	background: url(../image/neon-star.png) no-repeat 50%;
	background-size: cover;
	height: 25%;
    max-height: 470px;
    max-width: 360px;
	padding: 0;
	position: absolute;
	right: -34%;
	top: -7%;
	transition: 2s;
	width: 40%
}
#News .Visual .Star.Active {
	right: -10%;
	top: 3%
}
#News .Visual .Arrow {
	background: url(../image/neon-arrow.png) no-repeat 50%;
	background-size: cover;
	bottom: -15%;
	height: 20%;
	left: -30%;
    max-height: 430px;
    max-width: 540px;
	padding: 0;
	position: absolute;
	transition: 2s;
	width: 50%
}
#News .Visual .Arrow.Active {
	bottom: -5%;
	left: -10%
}

.Cube {
	display: none
}

#About {
	background-image: url(../image/about.png);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 95%
}
#About::before,
#About::after {
	background-color: #121415
}
#About ul {
	padding: 0 0 0 2.4rem
}
#About li {
	line-height: 2.8rem;
	list-style-type: alias
}
#About .Grid {
	margin-top: 60%
}
#About .Grid > img {
	display: block;
	filter: drop-shadow(0 0 6px #0af) drop-shadow(0 0 2px #0af);
	margin: 10% auto;
	width: 80%
}
#About .Grid > img.Active {
	animation: aboutSymbol 2s
}
@keyframes aboutSymbol {
	  0% { filter: none }
	 65% { filter: none }
	 70% { filter: drop-shadow(0 0 6px #0af) drop-shadow(0 0 2px #0af) }
	 75% { filter: none }
	100% { filter: drop-shadow(0 0 6px #0af) drop-shadow(0 0 2px #0af) }
}
#About .Visual .DiagonalTop svg path:nth-child(2) {
	fill: #121415
}
#About .Visual .Signal {
	background: url(../image/neon-signal.png) no-repeat 50%;
	background-size: cover;
	bottom: -15%;
	height: 17%;
    max-height: 340px;
    max-width: 270px;
	padding: 0;
	position: absolute;
	right: -15%;
	top: 5%;
	transition: 2s;
	width: 25%
}
#About .Visual .Signal.Active {
	right: -5%;
	top: 15%
}
#About .Visual .Line {
	background: url(../image/neon-line.png) no-repeat 50%;
	background-size: cover;
	bottom: 15%;
	height: 20%;
    max-height: 400px;
    max-width: 360px;
	padding: 0;
	position: absolute;
	right: -45%;
	transition: 2s;
	width: 35%;
	z-index: 9
}
#About .Visual .Line.Active {
	bottom: 0;
	right: -5%
}

#Details {
	background-color: #994d59;
	padding-top: 0;
	text-align: center
}
#Details ul {
	margin: 0 -1%;
	overflow: hidden;
	padding: 0
}
#Details li {
	animation: none;
	float: left;
	transition: 1s;
	list-style-type: none;
    opacity: 1 !important;
	padding: 0;
	width: 50%
}
#Details li h3 {
	font-size: 1.4rem;
	margin: -.5rem 0 0;
	position: relative;
	z-index: 1
}
#Details li:nth-child(2n+1) {
	clear: left;
	margin-top: 7.05%
}
#Details li figure {
	overflow: hidden
}
#Details .Mask::before,
#Details .Mask::after {
	background: #994d59
}
#Details .Visual .Panel {
	background-image: url(../image/examples.jpg)
}
#Details .Visual .Panel::before {
	background: rgba(26,13,15,.6)
}
#Details .Visual .DiagonalTop svg {
	transform: scale(-1, 1)
}
#Details .Visual .DiagonalTop svg path:nth-child(2) {
	fill: #121415
}
#Details .Visual .DiagonalBottom svg path:nth-child(2) {
	fill: #994d59
}

#Works {
	background: #3a5d91;
	padding-bottom: 35%;
	padding-top: 25%
}
#Works figure {
	margin: -5%;
	opacity: 0
}
#Works figure.Active {
	animation: fedeUp 1.4s;
	opacity: 1
}
#Works dl {
	padding: 0
}
#Works dt {
	font-size: 1.6rem;
	font-weight: bold;
	margin: 0 0 1em
}
#Works dd {
    border-bottom: 1px dashed rgba(255,255,255,.5);
    height: 30px;
    line-height: 30px;
    margin: 0 0 1em;
    overflow: hidden;
	text-overflow: ellipsis;
    white-space: normal
}
#Works .Grid {
	margin: 0 auto
}
#Works .Button {
    margin-bottom: 0
}
#Works .Visual .DiagonalTop svg {
	transform: scale(-1, 1)
}
#Works .Visual .DiagonalTop path:nth-child(2) {
	fill: #994d59
}

#Office {
	background: #6153a6;
	padding-bottom: 1%;
	padding-top: 0
}
#Office .Mask::before {
	background: #6153a6;
	transform: scale(-1, 1)
}
#Office .Mask::after {
	background: #6153a6;
	transform: scale(1, -1)
}
#Office .Grid {
	margin-bottom: 8rem;
	margin-top: -2rem
}
#Office .Grid ul {
	margin: 0 -13%;
	overflow: hidden;
	padding: 0
}
#Office .Grid ul li {
	animation: none;
	float: left;
	list-style: none;
	opacity: 1 !important;
	width: 33.33%
}
#Office .Grid ul li:nth-child(2) {
	margin-top: 4.6%
}
#Office .Grid ul li:nth-child(3) {
	margin-top: 9.1%
}
#Office .Visual .Panel {
	background-image: url(../image/elevator.jpg)
}
#Office .Visual .DiagonalBottom svg {
	transform: scale(-1, 1)
}
#Office .Visual .DiagonalTop path:nth-child(2) {
	fill: #3a5d91
}
#Office .Visual .DiagonalBottom path:nth-child(2) {
	fill: #6153a6
}

#Second-Factory {
	background: #008cc8;
	padding-bottom: 1%;
	padding-top: 0
}
#Second-Factory .Grid {
	margin-bottom: 8rem;
	margin-top: -2rem
}
#Second-Factory .Grid ul {
	overflow: hidden;
	margin: 0 -13%;
	padding: 0
}
#Second-Factory .Grid ul li {
	animation: none;
	float: left;
	list-style: none;
	opacity: 1 !important;
	width: 33.33%
}
#Second-Factory .Grid ul li:nth-child(1) {
	margin-top: 9.1%
}
#Second-Factory .Grid ul li:nth-child(2) {
	margin-top: 4.6%
}
#Second-Factory .Mask::before,
#Second-Factory .Mask::after {
	background: #008cc8
}
#Second-Factory .Visual .Panel {
	background-image: url(../image/second-factory.jpg)
}
#Second-Factory .Visual .DiagonalTop svg {
	transform: scale(-1, 1)
}
#Second-Factory .Visual .DiagonalTop path:nth-child(2) {
	fill: #6153a6
}
#Second-Factory .Visual .DiagonalBottom path:nth-child(2) {
	fill: #008cc8
}

#Monoka {
	background: #ccc;
	padding-bottom: 5%;
	padding-top: 30%
}
#Monoka .Grid {
	display: grid;
	gap: 0 6%;
	grid-template-columns: 1fr 2fr
}
#Monoka figure {
	margin: -10%
}
#Monoka figure img {
	aspect-ratio: inherit
}
#Monoka .Visual .DiagonalTop path:nth-child(2) {
	fill: #008cc8
}
#Monoka .Visual .Square {
	display: none
}
#Monoka .Visual .Strap {
	margin: -15% -3% 0;
	padding: 0;
	position: relative;
	transform: rotate(-9deg);
	z-index: 8
}

#Contact {
	background: #999;
	padding-bottom: 20%
}
#Contact .Visual .DiagonalTop svg {
	transform: scale(-1, 1)
}
#Contact .Visual .DiagonalTop path:nth-child(2) {
	fill: #ccc
}

#Links {
	color: #fff;
	overflow: hidden;
	padding: 30% 5% 70%;
	text-align: center
}
#Links::before,
#Links::after {
	background-color: #121415
}
#Links figure {
	margin: 10% 0 0;
	position: absolute;
	top: 54%
}
#Links figure a {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 12
}
#Links figure img {
	aspect-ratio: inherit;
	position: relative;
	transform: translateX(100%);
	transition-duration: 3s
}
#Links figure::before {
	background: url(../image/interview.png) no-repeat 50%;
	background-size: contain;
	content: "";
	height: 40%;
	left: -4%;
	position: absolute;
	top: -4%;
	width: 30%;
	z-index: 13
}
#Links figure.Active img {
	transform: translateX(0)
}
#Links figure img:nth-child(n+2) {
	left: 0;
	position: absolute;
	top: auto
}
#Links figure.Active img:nth-child(n+2) {
	animation: tv 3s
}
@keyframes tv {
	0% { opacity: 0 }
   95% { opacity: 0 }
   96% { opacity: 1 }
   98% { opacity: .5 }
  100% { opacity: 1 }
}
#Links .Drone {
    position: relative;
	z-index: 15
}
#Links .Drone img {
	margin: 10% 0 2%;
	transform: translateX(200%);
	transition-duration: 4s;
    width: 50%;
}
#Links .Drone.Active img {
	transform: translateX(0)
}
#Links .Drone.Active {
	animation: drone 3s;
	animation-iteration-count: infinite
}
@keyframes drone {
	 0% { transform: rotate(7deg) translateY(-5%) }
	50% { transform: rotate(7deg) translateY( 5%) }
   100% { transform: rotate(7deg) translateY(-5%) }
}
#Links .Grid {
	align-items: normal;
	display: grid;
	gap: 70% 10%;
	grid-template-columns: 1fr 1fr;
	position: relative;
	z-index: 10
}
#Links .Grid h3 {
	font-size: 1.2rem;
	margin-top: 0
}
#Links .Visual .DiagonalTop svg {
	transform: scale(-1, 1)
}
#Links .Visual .DiagonalTop path:nth-child(2) {
	fill: #999
}
#Links .Visual .Roket {
	background: url(../image/neon-roket.png) no-repeat 50%;
	background-size: cover;
	height: 15%;
	left: -16%;
	max-height: 500px; 
	max-width: 410px;
	padding: 0;
	position: absolute;
	top: 25%;
	transition: 2s;
	width: 35%
}
#Links .Visual .Roket.Active {
	left: -6%;
	top: 15%
}
#Links .Visual .Ufo {
	background: url(../image/neon-ufo.png) no-repeat 50%;
	background-size: cover;
	height: 30%;
	left: 50%;
    max-height: 800px; 
	max-width: 660px;
	padding: 0;
	position: absolute;
	top: -7%;
	transition: 2s;
	transform: translateX(-50%) translateY(0%);
	width: 55%
}
#Links .Visual .Ufo.Active {
	top: 3%
}
#Links .Visual .Planet {
	background: url(../image/neon-planet.png) no-repeat 50%;
	background-size: cover;
	height: 10%;
    max-height: 400px; 
	max-width: 410px;
	padding: 0;
	position: absolute;
	right: -3%;
	top: 15%;
	transition: 2s;
	width: 25%
}

/* Footer
------------------------------ */
footer .Visual .DiagonalTop path:nth-child(2) {
	fill: #121415
}

/* Device
------------------------------ */
@media only screen and (min-width: 568px) {
	#Links figure {
		top: 52%
	}
}
@media only screen and (min-width: 736px) {
	.Copy {
		width: 65%
	}
	#Links .Grid {
		gap: 85% 10%
	}
}
@media only screen and (min-width: 844px) {
	.Billboard .Symbol {
		width: 120px !important;
		height: auto !important
	}
	.Billboard .Symbol path {
		stroke-width: 14
	}
	.LogoType h2 {
		font-size: 4rem
	}
	.LogoType h3 {
		font-size: 1.4rem;
		margin: -1rem -5% !important
	}
	.LogoType h3 {
		animation: logoTypeH3 6.5s;
		color: #fff;
		font-size: 1.2rem;
		letter-spacing: normal;
		margin: -1rem 0;
        text-align: right;
		text-shadow: 0 0 10px rgba(255,221,51,1), 0 0 20px rgba(255,221,51,1)
	}
	#Hello {
		padding: 6% 0
	}
	#Hello::after {
		background-size: 110%
	}
	#News,
	#About {
		background-size: 60%;
		padding-top: 20%
	}
	#News .Grid,
	#About .Grid {
		margin-top: 0
	}
	#News time {
		width: 100px
	}
	#About .Grid > img {
		margin: 25% auto
	}
	#News ul {
		margin: 25% 0;
	}
	.Cube {
		display: block;
		height: 200px;
		margin: 30% auto;
		position: relative;
		transform: rotateX(-25deg) rotateY(-25deg);
		transform-style: preserve-3d;
		width: 200px
	}
	.Cube.Default {
		transition: 1s;
		transform: rotateX(-25deg) rotateY(-25deg) !important
	}
	.Cube div {
		border-radius: 10px;
		height: 100%;
		overflow: hidden;
		position: absolute;
		width: 100%
	}
	.Cube div img {
		aspect-ratio: 1 / 1;
		display: block;
		height: 100%;
		width: auto
	}
	.Cube div:nth-child(1) {
		transform:translateZ(100px)
	}
	.Cube div:nth-child(2) {
		transform: rotateY(180deg)translateZ(100px)
	}
	.Cube div:nth-child(3) {
		transform: rotateY(90deg)translateZ(100px)
	}
	.Cube div:nth-child(4) {
		transform: rotateY(-90deg)translateZ(100px)
	}
	.Cube div:nth-child(5) {
		transform: rotateX(90deg)translateZ(100px)
	}
	.Cube div:nth-child(6) {
		transform: rotateX(-90deg)translateZ(100px)
	}
	#News .Grid {
		grid-template-columns: 1fr 1fr
	}
	#News .Visual .Star {
		height: 35%;
		right: -14%;
		top: 0;
		width: 25%
	}
	#News .Visual .Star.Active {
		right: -4%;
		top: 10%
	}
	#News .Visual .Arrow {
		bottom: -25%;
		height: 35%;
		left: -20%;
		width: 40%
	}
	#News .Visual .Arrow.Active {
		bottom: -15%;
		left: -10%
	}
	#About ul {
		padding-left: 2.8rem
	}
	#About .Visual .Signal {
		height: 25%;
		right: -10%;
		top: 0%;
		width: 15%
	}
	#About .Visual .Signal.Active {
		right: 0%;
		top: 10%
	}
	#About .Visual .Line {
		bottom: 70%;
		height: 35%;
		right: -65%;
		width: 25%
	}
	#About .Visual .Line.Active {
		bottom: -5%
	}
	#Details {
		padding-bottom: 1%
	}
	#Details li {
		width: 33.3%
	}
	#Details li h3 {
		font-size: 1.8rem;
		margin: -1rem 0 0
	}
	#Details li:nth-child(1) {
		margin-top: 9.74%
	}
	#Details li:nth-child(2) {
		margin-top: 4.86%
	}
	#Details li:nth-child(3) {
		clear: none;
		margin-top: 0
	}
	#Details li:nth-child(4) {
		clear: left
	}
	#Details li:nth-child(n+4) .Mask::before {
        transform: scale(-1, 1)
	}
	#Details li:nth-child(n+4) .Mask::after {
		transform: scale(1, -1)
	}
 	#Details li:nth-child(5){
		clear: none;
		margin-top: 4.86%
	}
	#Details li:nth-child(6) {
		margin-top: 9.74%
	}
	#Works {
		padding: 15% 0 0
	}
	#Works .Mask {
		background: #304d78;
        margin: 0 8%;
        padding: 10% 4%;
		position: relative
	}
	#Works .Mask::before,
	#Works .Mask::after {
		background: #3a5d91
	}
	#Works .Mask::before {
		transform: scale(-1, 1)
	}
	#Works .Mask::after {
		transform: scale(-1, -1)
	}
	#Works .Mask.Active::before,
	#Works .Mask.Active::after {
		height: 16%
	}
	#Office {
		padding-bottom: 4%
	}
	#Office h2.Title {
		margin-bottom: -4rem
	}
	#Office .Grid {
		margin-top: 6rem
	}
	#Office .Grid + h2.Title {
		margin-top: 14rem
	}
	#Office .Grid ul {
        margin: 10% -34% -40% 0
    }
	#Office .Visual .Square {
		bottom: -6%
	}
	#Second-Factory {
		padding-bottom: 8%
	}
	#Second-Factory .Grid {
		margin-bottom: -4rem
	}
	#Second-Factory h2.Title {
		margin-bottom: 6rem
	}
	#Second-Factory .Grid ul {
		margin: -7% -34% 30% 0
	}
	#Monoka {
		padding-bottom: 0;
		padding-top: 20%
	}
	#Monoka .Grid {
		margin: -24% auto -10%;
		position: relative;
		z-index: 9
	}
	#Monoka .Visual .Square {
		display: block
	}
	#Monoka .Visual .Strap {
		margin-top: -10%;
		transform: rotate(-7deg)
	}
	#Contact {
		padding-bottom: 10%;
		padding-top: 15%
	}
	#Links {
		padding-bottom: 5%;
		padding-top: 30%
	}
	#Links figure {
		position: relative
	}
	#Links .Drone img {
		margin: -25% -100% 2% 0;
		width: 40%
	}
	#Links .Grid {
		gap: 6% 2%;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		padding: 0 6%
	}
	#Links .Grid h3 {
		font-size: 1.6rem
	}
	#Links .Visual .Roket {
		height: 25%;
		left: -13%;
		top: 15%;
		width: 25%
	}
	#Links .Visual .Roket.Active {
		left: -3%;
		top: 5%;
	}
	#Links .Visual .Ufo {
		height: 40%;
		top: -10%;
		width: 40%
	}
	#Links .Visual .Ufo.Active {
		top: 9%
	}
	#Links .Visual .Planet {
		height: 20%
	}
}
@media only screen and (min-width: 1024px) {
	.LogoType h2 {
		font-size: 5rem
	}
	.LogoType h3 {
		font-size: 1.6rem
	}
}
@media only screen and (min-width: 1240px) {
	.Billboard .Symbol {
		width: 140px !important;
		height: auto !important
	}
	.LogoType h2 {
		font-size: 6rem
	}
	.LogoType h3 {
		font-size: 1.8rem
	}
	.Cube {
		height: 260px;
		width: 260px
	}
	.Cube div:nth-child(1) {
		transform:translateZ(130px)
	}
	.Cube div:nth-child(2) {
		transform: rotateY(180deg)translateZ(130px)
	}
	.Cube div:nth-child(3) {
		transform: rotateY(90deg)translateZ(130px)
	}
	.Cube div:nth-child(4) {
		transform: rotateY(-90deg)translateZ(130px)
	}
	.Cube div:nth-child(5) {
		transform: rotateX(90deg)translateZ(130px)
	}
	.Cube div:nth-child(6) {
		transform: rotateX(-90deg)translateZ(130px)
	}
	#Details li h3 {
		font-size: 2rem;
		margin: -1.5rem 0 0
	}
	#Office .Grid,
	#Second-Factory .Grid {
		margin-top: 0
	}
	#Office .Grid ul {
		margin: 16% -34% -54% 0
	}
	#Second-Factory .Grid ul {
		margin: -6% -34% 10% 0
	}
}
@media only screen and (min-width: 1440px) {
	.LogoType h2 {
		font-size: 7rem
	}
	.LogoType h3 {
		font-size: 2rem
	}
}