@charset "utf-8";
#wrap {float:left; width:100%; position:relative; overflow:hidden; background:url(../images/bg.jpg) center top no-repeat; background-size:cover;}

/*-------------------------------------------------------------------------------------*
 *  landing                                                                             *
 *-------------------------------------------------------------------------------------*/
.landing_box{float:left; width:100%; min-height:100vh; padding:30px 20px 200px; position:relative; z-index:1000; transition:all 0.5s;}

.landing_logo{float:left; width:100%; text-align:center;}
.landing_logo img{display:inline-block; width:56.82vw; max-width:1091px; min-width:320px;}


.landing_text1{float:left; width:100%; text-align:center; margin:10px 0 0 0; font-family:'EsaManru'; font-weight:700; font-size:4rem; color:#ffffff; text-shadow:2px 2px 3px rgba(0,0,0,0.8); word-break: keep-all; transition:all 0.2s;}
.landing_text1 span{letter-spacing:-5px;}
.landing_text1 span.fff{color:#fff000;}
.landing_text2{float:left; width:100%; text-align:center; margin:50px 0 0 0; font-family:'EsaManru'; font-weight:700; font-size:4rem; color:#ffffff; text-shadow:2px 2px 3px rgba(0,0,0,0.8); word-break: keep-all; transition:all 0.2s;}
.landing_text2 span{font-weight:700; color:#26ffff;}
.landing_text3{float:left; width:100%; text-align:center; margin:20px 0 0 0; font-family:'EsaManru'; font-weight:700; font-size:4rem; color:#ffffff; text-shadow:2px 2px 3px rgba(0,0,0,0.8); word-break: keep-all; transition:all 0.2s;}
.landing_text3 span{color:#fff000;}

.landing_browser{float:left; width:100%; margin:50px 0 0 0;}
.landing_browser ul{float:left; width:100%; display:flex; justify-content:center; align-items:center;}
.landing_browser ul li{float:left; margin:0 10px;}
.landing_browser ul li a{display:block;}
.landing_browser ul li a img{display:inline-block; width:17.34vw; max-width:333px; min-width:145px;}
.landing_browser ul li a img{filter: drop-shadow(0px 0px 30px rgba(0,0,0,0.95));}

.landing_item1{position:absolute; left:50%; top:160px; margin:0 0 0 20vw; transition:all 0.2s;}
.landing_item2{position:absolute; left:0%; bottom:0px; animation-delay:0.5s; transition:all 0.2s;}
.landing_item3{position:absolute; right:0%; bottom:0px; animation-delay:0.5s; transition:all 0.2s;}
.landing_item4{position:absolute; left:0%; top:88px; margin:0 0 0 0; animation-delay:0.5s; transition:all 0.2s;}

.landing_item1 img{display:inline-block; width:16.3vw; max-width:313px; min-width:120px;}
.landing_item2 img{display:inline-block; width:30.21vw; max-width:580px; min-width:200px;}
.landing_item3 img{display:inline-block; width:30.05vw; max-width:577px; min-width:120px;}
.landing_item4 img{display:inline-block; width:32.81vw; max-width:630px; min-width:200px;}

@media screen and (min-width:1930px) {
	.landing_box{padding:80px 20px 200px;}
	/* .landing_item1{margin:0 0 0 -770px;} */
	/* .landing_item2{margin:0 0 0 290px;} */
}

@media screen and (max-width:1580px) {
html {font-size: 52.5%}    
}


@media screen and (max-width:1280px) {
html {font-size: 42.5%}    
}

@media screen and (max-width:768px) {
 .landing_text2{font-size:3rem;}   
 .landing_text3{font-size:3rem;}   
 .br{display:none;}
 .landing_browser{margin:20px 0 0 0;}
 .landing_text2{margin:20px 0 0 0;}
 .landing_browser ul li{margin:0 5px;}
 .landing_browser ul li a img{width:35vw; min-width:125px;}
}

@media screen and (max-width:424px) {
 .landing_item1{top:30px;}
 .landing_item4{top:160px;}
 .landing_browser ul{flex-wrap:wrap;}
    
}

.landing_text1{
  position: relative;
}
.landing_text1 span,{
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  animation: waviy 1s infinite;
  animation-delay: calc(.1s * var(--i));  
}