@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
#mainimage, #mainkeybox{
    height: 80vh;
    width: 100%;
}
#mainimage{
    position: fixed;
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
}
#mainkeybox{
    position: relative;
}
#mainkeybox .txtbox{
    position: absolute;
    bottom: 6em;
    left: 10%;
    text-align: left;
    color: #000;
}

#mainkeybox .txtbox .fw_jost{
    font-size: 11.5rem;
    line-height: 0.8;
    font-weight: 600;
    letter-spacing: -0.03em;
}
#mainkeybox .txtbox .txt{
    font-size: 1.8rem;
    font-weight: 500;
    padding: 2em 0 0 0.8em;
}

.title_h2{
    padding-bottom: 0.3em;
    margin-bottom: 3.1em;
    line-height: 1;
    font-size: 2rem;
    font-weight: 400;
}
.title_h2 p.fw_roboto{
    color: #222;
    font-size: 3rem;
    font-weight: 400;
}
.title_h2 span{
    display: inline-block;
}
.title_h2 span.fw_roboto{
    color: #222;
    font-size: 10rem;
    font-weight: 500;
    margin: 0 0.2em 0 -0.05em;
}
.title_h3{
    padding-bottom: 1.3em;
    line-height: 1.5;
    font-size: 2.6rem;
    font-weight: 500;
}
.white{
    background-color: #fff;
}
#expression,#design ,#code{
    filter: grayscale(100%);
    opacity: 0;
}

#design{
    background-color: #fff;
    padding: 12em 0 7em 0;
    opacity: 0.5;
}
#design .container{
    display: flex;
    justify-content: space-between;
}
#design .txtbox,#expression .txtbox{
    width: 50%;
    text-align: justify;
}
#design .txtbox .txt,#expression .txtbox .txt{
    padding-bottom: 4em;
}
#design .images{
    width: 43%;
}

a.button-wrap{
    color: #fff;
    display: inline-block;
    text-align: center;
    position: relative;
}
a.button-wrap:before{
    content: "";
    display: block;
    width: 8em;
  aspect-ratio: 1 / 1;
    border-radius: 1em;
    background-color: #222;
		transform:rotate(0deg);
	-webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    transition: all  0.7s ease-out;
}
a.button-wrap:hover:before{
    border-radius: 50%;
		transform:rotate(180deg);
}
a.button-wrap .button{
    position: absolute;
    top: 41%;
    left: 0;
    right: 0;
    font-size: 1.2rem;
    font-weight: 600;
    font-family: 'Jost', sans-serif;
}
a.button-wrap .button img{
    width: 1.5em;
    vertical-align: text-bottom;
}

#code{
    background-color: #28292b;
    color: #9c9c9c;
    padding-top: 38%;
    overflow: hidden;
    position: relative;
}
/*#code #Ttext{
    text-align: left;
    white-space: pre-wrap;
      height: 22em;
}
#code pre{
    display: inline;
    font-family: "VT323", monospace;
}*/
#code video {
  position: absolute;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
    max-width: 100%;
  left: 50%;
  top: 0;
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: -1;
}


#expression{
    padding: 12em 0 0 0;
    margin-top: -3.5em;
    background-color: #e3e6e9;
    position: relative;
    overflow-y: hidden;
}
#expression .container{  z-index: 3;}
#expression .back{
    position: absolute;
    width: 100%;
  padding-top: 100em;
  top: -56em;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 2;
    transform: skewY(-28deg);
}
#expression h4{
    text-align: left;
    color: #222;
    font-size: 4.5rem;
    font-weight: 500;
    padding-bottom: 0.3em;
}
#expression .flexbox{
    margin-bottom: 4em;
}
#expression .images{
    width: 24%;
    margin-left: 10%;
}
#expression ul{
    display: flex;
    justify-content: space-between;
}
#expression ul{
    flex-wrap: wrap;
}
#expression li{
    width: 30%;
    color: #222;
    margin-bottom: 4em;
}
#expression li .icon{
    background-color: #73948e;
    border-radius: 50%;
    width: 100%;
  aspect-ratio: 1 / 1;
    padding-top: 5%;
    position: relative;
	overflow:hidden;
}
#expression li .icon::before,
#expression li .icon::after {
		position:absolute;
    z-index: 2;
		left:-50%;
		width:200%;
		height:200%;
		content:"";
		background-color:#b2c9c5;
		animation:wave linear 6s infinite;
	-webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    transition: all  0.7s ease-out;
	}

#expression li .icon::before {
		bottom:-210%;
		border-radius:50% 50% / 50% 70%;
	}

#expression li .icon::after {
		bottom:-215%;
		border-radius:30% 70% / 30% 50%;
		opacity:0.2;
		animation-delay:0.4s;
	}

#expression li:hover .icon::before{
		bottom:-150%;
}
#expression li:hover .icon::after{
		bottom:-146%;
}

#expression li .title{
    position: absolute;
    color: #fff;
    font-size: 2.1rem;
    font-weight: 600;
    left: 0;
    right: 0;
    bottom: 2.6em;
    z-index: 3;
    text-align: center;
}
#expression li .txt{
 text-align: justify;
    padding: 1.6em 2em 0 2em;
}
#expression li .icon1 img,#expression li .icon1 svg{
    height: 60%;
  margin: 10% 0 0 5%;
    position: relative;
    z-index: 3;
}
#expression li .icon1 svg{
    position: absolute;
    z-index: 4;
}
#expression li .icon1 svg g{
animation:role linear 2s infinite;
transform-origin: 10% 50%;
}
#expression li .icon6 svg{
    height: 66%;
  margin-top: 10%;
    position: relative;
    z-index: 3;
}
/*icon2*/
#expression li .icon2{
    padding-top: 33%;
}
#expression li .icon2 img{
    width: 55%;
    position: relative;
    z-index: 3;
animation:icon2 linear 1.5s infinite;
}
@keyframes icon2 {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  40%  { transform: scale(0.95, 1.2) translate(0%, -30%); }
  50%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  60%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
  70%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  80%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
/*#root{
    height: 100%;
    width: 100%;
  margin: auto;
    position: relative;
    z-index: 3;
      transform-origin:left top;
}
#root canvas{
    width: 100%;
    height: 100%;
      display: block;
}*/

#expression li .icon3{
    text-align: left;
}
#expression li .icon3 .moniter{
  width: 36%;
  margin: 15% auto 0 25%;
    position: relative;
    z-index: 3;
}
#expression li .icon3 svg{ 
  position: absolute;
left: 21%;
  top: 23%;
  width: 29%;
    z-index: 3;
}
#expression li .icon3 .zonb{
  height: 50%;
  top: 27%;
  right: 22%;
    position: absolute;
    z-index: 4;
  animation: zonb 1.8s linear 0s infinite;
}
#expression li .icon4 .manage{
  height: 63%;
  margin: 11% auto 0 auto;
    position: relative;
    z-index: 3;}
#expression li .icon4 svg{
  height: 63%;
    position: absolute;
    top: 15%;
    left: 0;  right: 0;
  margin: 0 auto;
    z-index: 4;
}
#expression li .icon4 svg g{
animation:role2 linear 2s infinite;
transform-origin: 10% 15%;
}
#expression li .icon5 .dron{
height: 50%;
  margin: 23% auto 0 6%;
    position: relative;
    z-index: 3;
}
#expression li .icon5 .drone{
    position: absolute;
    width: 22%;
  top: 24%;
  left: 26%;
    z-index: 3;
animation:fly linear 1.6s infinite;
}

svg#book1 g{
animation:role linear 2s infinite;
transform-origin: 70% 20%;
}

/*
@media screen and (min-width: 769px) and (max-width: 1500px) {
    
.title_h2 span.fw_roboto {
  font-size: 9rem;
}
    #mainkeybox .txtbox .txt {
  font-size: 2rem;
}
    #design .txtbox, #expression .txtbox {
  width: 53%;
}
    
}*/


@media only screen and (max-width: 768px) {
#mainimage, #mainkeybox {
  height: 100vh;
}
#mainkeybox .txtbox{
    bottom: 11vh;
    left: 2em;
    right: 1.5em;
}

#mainkeybox .txtbox .fw_jost{
    font-size: 5.5rem;
}
#mainkeybox .txtbox .txt{
    font-size: 1.8rem;
    font-weight: 400;
    padding-top: 1em;
}

.title_h2{
    font-size: 1.8rem;
}
.title_h2 p.fw_roboto{
    font-size: 3rem;
}
.title_h2 span{
}
.title_h2 span.fw_roboto{
    font-size: 8rem;
    padding-bottom: 0.15em;
}
.title_h3{
    padding-bottom: 1.3em;
    line-height: 1.5;
    font-size: 2.6rem;
    font-weight: 500;
}
.white{
    background-color: #dbdbe6;
      background-image: linear-gradient(0deg, #494949, #e3e6e9 65%, #dbdbe6);
}
#expression,#design ,#code, #fpv{
}

#design{
    padding: 11em 0 4em 0;
}
#design .container{
    display: block;
}
#design .txtbox,#expression .txtbox{
    width: 100%;
}
#design .txtbox .txt,#expression .txtbox .txt{
    padding-bottom: 4em;
}
#design .images{
    width: 100%;
}


#code{
    padding-top: 49%;
}
#code #Ttext{
      height: 20em;
}
#code pre{
}

#code video {
  position: absolute;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
    max-width: 100%;
}

#expression{
    padding: 11em 0 3em 0;
}
#expression .back{
    position: absolute;
    width: 100%;
  padding-top: 78em;
  top: -39em;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 2;
    transform: skewY(-28deg);
}
#expression .flexbox{
    display: block;
    margin-bottom: 3em;
}
#expression .images{
    width: 60%;
    margin: -7em 0 0 auto;
}
#expression ul{
}
#expression li{
    width: 48%;
}
#expression li .icon{
}
#expression li .icon::before,
#expression li .icon::after {
    display: none;
	}

#expression li .title{
    font-size: 1.6rem;
    bottom: 1.8em;
}
#expression li .txt{
 text-align: justify;
    padding: 1.6em 0.5em 0 0.5em;
}
#expression li .icon1 img,#expression li .icon1 svg{
}
#expression li .icon1 svg{
}
#expression li .icon1 svg g{
}
#expression li .icon6 svg{
    height: 65%;
  margin-top: 8%;
}
#expression li .icon2 img{
}
#expression li .icon3{
}
#expression li .icon3 .moniter{
  margin: 13% auto 0 25%;
}
#expression li .icon3 svg{ 
  top: 22%;
}
#expression li .icon3 .zonb{
  top: 24%;
}
#expression li .icon4 .manage{
  margin: 9% auto 0 auto;
    }
#expression li .icon4 svg{
    top: 9%;
}
#expression li .icon4 svg g{
}
#expression li .icon5 .dron{
  margin: 21% auto 0 6%;
}
#expression li .icon5 .drone{
  top: 22%;
}
    #expression li:nth-child(5),#expression li:nth-child(6){
        margin-bottom: 0;
    }
svg#book1 g{
}

}


/*---------------------------------------------------------animeframe--*/

@keyframes wave {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
	}
}
@keyframes role {
	0% {
		transform:rotate(0deg);
	}
	50% {
		transform:rotate(-4deg);
	}
	100% {
		transform:rotate(0deg);
	}
}
@keyframes role2 {
	0% {
		transform:rotate(0deg);
	}
	50% {
		transform:rotate(-20deg);
	}
	100% {
		transform:rotate(0deg);
	}
}
@keyframes fly {
	0% {
		transform:translate(0%, 0%);
	}
	50% {
		transform:translate(-2%, -7%);
	}
	100% {
		transform:translate(0%, 0%);
	}
}
@keyframes zonb {
	0%, 100% {
		transform:translate(0%, 0%);
        opacity: 1;
	}
	15% {
		transform:translate(-1%, -1%);
        opacity: 0.4;
	}
	35%,70% {
		transform:translate(0%, 0%);
        opacity: 0.6;
	}
	55% {
		transform:translate(1%, 1%);
        opacity: 1;
	}
	80% {
		transform:translate(-1%, 1%);
        opacity: 1;
	}
}