/* #main
--------------------------------------------------------------- */
.landing{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    overflow: hidden;
}
/* .landing:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transform-origin: 0 0;
    transform: scaleY(1);
    transition: .1s;
    background: linear-gradient(-45deg, #0050B4, #00B4E6, #0077FF, #00B4E6);
	background-size: 400% 400%;
	animation: gradientBG 10s ease infinite;
} */
/* .landing.out:after{
    transform: scaleY(0);
} */
.landing:before{
    content: '';
    position: absolute;
    z-index: 10;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translate3d(0,100%,0);
    background: #0050B4;
}
.landing.ready:before{
    animation: landingAni 1s cubic-bezier(0.87, 0, 0.13, 1);
    animation-fill-mode: both;
}
@keyframes landingAni{
    0%{
        transform: translate3d(0,100%,0);
    }50%{
        transform: translate3d(0,0,0);
    }100%{
        transform: translate3d(0,-100%,0);
    }
}
.land_logo,
.land_logotext{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 5;
}
.land_logotext > div{
    opacity: 0;
    text-align: center;
}
.landing.ready .land_logotext > div{
    animation: logoText 2s cubic-bezier(0.87, 0, 0.13, 1);
    animation-fill-mode: both;
}
.land_logotext svg{
    width: 20vw;
    min-width: 300px;
    max-width: 80%;
    margin: 0 auto;
    fill: #fff;
}
.land_logo svg{
    width: 6vw;
    max-width: 15%;
    min-width: 100px;
    display: inline-block;
    fill: #fff;
    transform-origin: 50% 50%;
    animation: landLogo 1s infinite;
}
.land_logo svg:nth-child(2){
    animation: landLogo 1s infinite;
    animation-delay: .5s;
}
.land_logo > div{
    transform-origin: 50% 50%;
    transition: all .5s cubic-bezier(0.87, 0, 0.13, 1);
}
.landing.ready .land_logo > div{
    transform: scale(10);
    opacity: 0;
}

@keyframes logoText{
    0%{
        opacity: 0;
        transform: scale(0);
    }50%{
        opacity: 1;
        transform: scale(1);
    }100%{
        opacity: 0;
        transform: scale(6);
    }
}
@keyframes landLogo{
    0%{
        transform: rotate(90deg);
    }50%{
        transform: rotate(180deg);
    }100%{
        transform: rotate(360deg);
    }
}
@keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
/* #starbg
--------------------------------------------------------------- */
.starbg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
    mix-blend-mode: screen;
    pointer-events: none;
    animation: fadeIn 3s;
    animation-fill-mode: both;
}
.starbg img{
    mix-blend-mode: screen;
    position: absolute;
    top: -70%;
    left: 0;
    width: 120vw;
    height: auto;
    animation: starRotate 250s linear infinite;
}
.starbg img:nth-child(2){
    animation-duration: 100s;
}
.starbgline{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode:inherit;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.starbgline i{
    width: 20vw;
    height: 5px;
    border-radius: 0 10px 10px 0;
    position: absolute;
    overflow: hidden;
    transform: rotate(-30deg);
}
.starbgline i:before{
    content: '';
    width: 100%;
    height: 4px;
    background-image: url('../imgs/deco/starbgline_1.png');
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation: starlineMove 2s;
    animation-fill-mode: both;
}
.starbgline i:last-child:before{
    background-image: url('../imgs/deco/starbgline_2.png');
}

/* #transition
--------------------------------------------------------------- */
.transition{
    position: fixed;
    z-index: 879;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
}
.transition > div{
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 0;
    background: #012758;
    bottom: 0;
    left: 0;
    transform-origin: 0 100%;
    transform: scaleY(0);
    transition: transform 1.3s cubic-bezier(0.87, 0, 0.13, 1);
}
.transition > div:last-child{
    transition-delay: .2s;
    background: #0050B4;
}
.transition.leave > div{
    transform: scaleY(1.2);
}
.transition.getIn > div{
    transform-origin: 0 0;
}
main.getIn{
    animation: transYin 1.5s;
    animation-fill-mode: both;
}
body.leave{
    cursor: wait;
}
/* #common
--------------------------------------------------------------- */
@keyframes subOpen{
    from{
        transform: scaleY(0);
    }to{
        transform: scaleY(1);
    }
}
@keyframes starRotate{
    from{
        transform: rotate(0deg);
    }to{
        transform: rotate(-360deg);
    }
}
@keyframes fadeInUpSkew{
    from{
        opacity: 0;
        transform: translateY(50px) skew(15deg);
    }to{
        opacity: 1;
        transform: translateY(0) skew(0);
    }
}
@keyframes fadeIn{
    from{
        opacity: 0;
    }to{
        opacity: 1;
    }
}
@keyframes fadeInUp{
    from{
        opacity: 0;
        transform: translateY(50px);
    }to{
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInDown{
    from{
        opacity: 0;
        transform: translateY(-50px);
    }to{
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInDownBig{
    from{
        opacity: 0;
        transform: translateY(-10rem);
    }to{
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeInTran{
    from{
        transform: translateY(-100px);
    }to{
        transform: translateY(0);
    }
}
@keyframes updownInfi_S{
    0%{
        transform: translateY(-1rem);
    }50%{
        transform: translateY(1rem);
    }100%{
        transform: translateY(-1rem);
    }
}
@keyframes updownInfi_M{
    0%{
        transform: translateY(-2rem);
    }50%{
        transform: translateY(2rem);
    }100%{
        transform: translateY(-2rem);
    }
}
@keyframes starlineMove{
    0%{
        transform: translateX(-100%);
    }100%{
        transform: translateX(100%);
    }
}
@keyframes lineMoveVer{
    0%{
        transform: translate3d(0,-100%,0);
    }100%{
        transform: translate3d(0,100%,0);
    }
}
@keyframes flashing{
    0%{
        opacity: 0.4;
    }50%{
        opacity: 1;
    }100%{
        opacity: 0.4;
    }
}
@keyframes transYin{
    from{
        transform: translate3d(0,200px,0);
    }to{
        transform: translate3d(0,0,0);
    }
}

@keyframes bounceIn{
    0%{
      opacity: 0;
      transform: scale(0.3) translate3d(0,0,0);
    }
    50%{
      opacity: 0.9;
      transform: scale(1.1);
    }
    80%{
      opacity: 1;
      transform: scale(0.89);
    }
    100%{
      opacity: 1;
      transform: scale(1) translate3d(0,0,0);
    }
  }
.paraani{    
    transform-style: preserve-3d;
    animation-fill-mode: none;
    transition: all 1s cubic-bezier(0, 0, 0.2, 1);
    will-change: transform;
}
.getInAni{
    opacity: 0;
}
.foot_content .act_ani{
    animation: fadeInDown 3s;
    animation-fill-mode: both;
} 

/* #bigu
--------------------------------------------------------------- */

@keyframes rocketCloud{
    0%{
        transform: translateY(0) scale(1);
        opacity: 1;
    }50%{
        transform: translateY(30px) scale(0.5);
        opacity: 1;
    }100%{
        transform: translateY(60px) scale(0);
        opacity: 0;
    }
}
.anistart h1, span.act_ani,
h2.act_ani, h3.act_ani, .ultable > li.act_ani,
p.act_ani, .solution_item_inner_title.act_ani,
.solution_item_inner > h3.act_ani{
    transform-origin: 0 100%;
    animation: fadeInUpSkew 1s;
    animation-fill-mode: both;
}
.phsec3_content > div.act_ani{
    animation: fadeInUpSkew 1s;
    animation-fill-mode: both;
}
.es_btn.act_ani, .abt_highlight h2 div.act_ani,
.abt_sec_2 h3.act_ani, .abt_sec_2 p.act_ani, 
.solutions_tabs.act_ani, .solutions_content.act_ani,
.story_wrap.act_ani{
    animation: fadeInUp 1s;
    animation-fill-mode: both;
}
.anistart p{
    animation: fadeInUpSkew 1s;
    animation-delay: 0.3s;
    animation-fill-mode: both;
}
.anistart .scrolldown{
    animation: fadeInUp 1s;
    animation-delay: 0.6s;
    animation-fill-mode: both;
}
#img_bigu{opacity: 0;}
.anistart #img_bigu,
.anistart .bigu_planet,
.anistart .bigu_rocket{
    animation: fadeInUp 1s;
    animation-delay: 1s;
    animation-fill-mode: both;
}
.anistart .bigu_clouds img,
.okpoint.act_ani{
    animation: fadeInUp 1s;
    animation-fill-mode: both;
}
.anistart .bigu_clouds div:nth-child(1) img{animation-delay: .9s;}
.anistart .bigu_clouds div:nth-child(2) img{animation-delay: 1.2s;}
.anistart .bigu_clouds div:nth-child(3) img{animation-delay: 1.5s;}

/* #pages
--------------------------------------------------------------- */
.solu_sec_1 h1,
.solu_sec_1 p,
.solu_sec_1 .solu_pro,
.abt_sec_1 h1,
.abt_sec_1 h2,
.abt_sec_1 p,
.contact_wrap h1,
.contact_wrap p,
.contact_wrap .contact_info,
.contact_wrap .contact_form{
    opacity: 0;
}
.solu_sec_1.anistart h1,
.solu_sec_1.anistart p,
.abt_sec_1.anistart h1,
.abt_sec_1.anistart h2,
.abt_sec_1.anistart p,
.contact_wrap.anistart h1,
.contact_wrap.anistart p{
    animation: fadeInUpSkew 1s;
    animation-fill-mode: both;
}
.solu_sec_1.anistart .solu_pro,
.contact_wrap.anistart .contact_info,
.contact_wrap.anistart .contact_form{
    animation: fadeInUp 1s;
    animation-fill-mode: both;
}
.solu_sec_1.anistart h1{animation-delay: .6s;}
.solu_sec_1.anistart p{animation-delay: .9s;}
.solu_sec_1.anistart .solu_pro:nth-child(1){animation-delay: .9s;}
.solu_sec_1.anistart .solu_pro:nth-child(2){animation-delay: 1.2s;}
.solu_sec_1.anistart .solu_pro:nth-child(3){animation-delay: 1.5s;}


.abt_sec_1.anistart h1{animation-delay: .6s;}
.abt_sec_1.anistart h2{animation-delay: .9s;}
.abt_sec_1.anistart p{animation-delay: 1.2s;}

.contact_wrap.anistart h1{animation-delay: .6s;}
.contact_wrap.anistart p{animation-delay: .9s;}
.contact_wrap.anistart .contact_info{animation-delay: 1.2s;}
.contact_wrap.anistart .contact_form{animation-delay: 1.4s;}