.tetris_rt_active{
    animation:rt_ani 1s cubic-bezier(.18,1.4,.9,.99) both;
    animation-delay: 0.1s;
}
.tetris_rt_reverse{
    animation:rt_ani_reverse 1s cubic-bezier(.18,1.4,.9,.99) both;
    animation-delay: 0.1s;
}
.tetris_lt_active{
    animation:lt_ani 0.8s cubic-bezier(.18,1.4,.9,.99) both;
}
.tetris_lt_reverse{
    animation:lt_ani_reverse 0.8s cubic-bezier(.18,1.4,.9,.99) both;
}
.tetris_center_active{
    animation:center_ani 1.1s cubic-bezier(.18,1.4,.9,.99) both;
    animation-delay: 0.15s;
}
.tetris_center_reverse{
    animation:center_ani_reverse 1.1s cubic-bezier(.18,1.4,.9,.99) both;
    animation-delay: 0.15s;
}
.tetris_lb_active{
    animation:lb_ani 0.9s cubic-bezier(.18,1.4,.9,.99) both;
    animation-delay: 0.2s;
}
.tetris_lb_reverse{
    animation:lb_ani_reverse 0.9s cubic-bezier(.18,1.4,.9,.99) both;
    animation-delay: 0.2s;
   
}
.tetris_rb_active{
    animation:rb_ani 0.8s cubic-bezier(.18,1.4,.9,.99) both;
    animation-delay: 0.25s;
}
.tetris_rb_reverse{
    animation:rb_ani_reverse 0.8s cubic-bezier(.18,1.4,.9,.99) both;
    animation-delay: 0.25s;

}

@keyframes rt_ani{
    from{
        transform:translate(0,0) rotate(0) scale(1);
        opacity:1;
    }
    to{
        transform:translate(70%,-80%) rotate(15deg) scale(0.85);
        opacity:0.2;
    }
}
@keyframes rt_ani_reverse{
    from{
        transform:translate(70%,-80%) rotate(15deg) scale(0.85);
        opacity:0.2;
    }
    to{
        transform:translate(0,0) rotate(0) scale(1);
        opacity:1;
    }
}
@keyframes lt_ani{
    from{
        transform:translate(0,0) rotate(0) scale(1); 
        opacity:1;
    }
    to{
        transform:translate(-90%,-70%) rotate(-20deg) scale(0.85);
        opacity:0.2;
    }
}
@keyframes lt_ani_reverse{
    from{
        transform:translate(-90%,-70%) rotate(-20deg) scale(0.85); 
        opacity:0.2;
    }
    to{
        transform:translate(0,0) rotate(0) scale(1);
        opacity:1;
    }
}
@keyframes center_ani{
    from{
        transform:translate(-50%,-50%) rotate(0) scale(1);
        opacity:1;
    }
    to{
        transform:translate(-210%,-50%) rotate(-10deg) scale(0.85);
        opacity:0.2;
    }
}
@keyframes center_ani_reverse{
    from{
        transform:translate(-210%,-50%) rotate(-10deg) scale(0.85);
        opacity:0.2;
    }
    to{
        transform: scale(0.63) translate(-50%,-50%) rotate(1);
        opacity:1;
    }
}
@keyframes lb_ani{
    from{
        transform:translate(0,0) rotate(0) scale(1);
        opacity:1;
    }
    to{
        transform:translate(-60%,60%) rotate(15deg) scale(0.85);
        opacity:0.2;
    }
}
@keyframes lb_ani_reverse{
    from{
        transform:translate(-60%,60%) rotate(15deg) scale(0.85);
        opacity:0.2;
    }
    to{
        transform:translate(0,0) rotate(0) scale(1);
        opacity:1;
    }
}
@keyframes rb_ani{
    from{
        transform:translate(0,0) rotate(0) scale(1);
        opacity:1;
    }
    to{
        transform:translate(100%,40%) rotate(-5deg) scale(0.85);
        opacity:0.2;
    }
}
@keyframes rb_ani_reverse{
    from{
        transform:translate(100%,40%) rotate(-5deg) scale(0.85);
        opacity:0.2;
    }
    to{
        transform:translate(0,0) rotate(0) scale(1);
        opacity:1;
    }
}

@keyframes tetris_bg_ani{
    from{
        opacity:1;
    }
    to{
        opacity:0.3;
    }
}

@keyframes tetris_bg_ani_reverse{
    from{
        opacity:0.3;
    }
    to{
        opacity:1;
    }
}







.mo_tetris_rt_active{
    animation:mo_rt_ani 1s cubic-bezier(.18,1.4,.9,.99) both;
    animation-delay: 0.1s;
}
.mo_tetris_rt_reverse{
    animation:mo_rt_ani_reverse 1s cubic-bezier(.18,1.4,.9,.99) both;
    animation-delay: 0.1s;
}
.mo_tetris_lt_active{
    animation:mo_lt_ani 0.8s cubic-bezier(.18,1.4,.9,.99) both;
}
.mo_tetris_lt_reverse{
    animation:mo_lt_ani_reverse 0.8s cubic-bezier(.18,1.4,.9,.99) both;
}
.mo_tetris_center_active{
    animation:mo_center_ani 1.1s cubic-bezier(.18,1.4,.9,.99) both;
    animation-delay: 0.15s;
}
.mo_tetris_center_reverse{
    animation:mo_center_ani_reverse 1.1s cubic-bezier(.18,1.4,.9,.99) both;
    animation-delay: 0.15s;
}
.mo_tetris_lb_active{
    animation:mo_lb_ani 0.9s cubic-bezier(.18,1.4,.9,.99) both;
    animation-delay: 0.2s;
}
.mo_tetris_lb_reverse{
    animation:mo_lb_ani_reverse 0.9s cubic-bezier(.18,1.4,.9,.99) both;
    animation-delay: 0.2s;
   
}
.mo_tetris_rb_active{
    animation:mo_rb_ani 0.8s cubic-bezier(.18,1.4,.9,.99) both;
    animation-delay: 0.25s;
}
.mo_tetris_rb_reverse{
    animation:mo_rb_ani_reverse 0.8s cubic-bezier(.18,1.4,.9,.99) both;
    animation-delay: 0.25s;

}

@keyframes mo_rt_ani{
    from{
        transform:translate(0,0) rotate(0) scale(1);
        opacity:1;
    }
    to{
        transform:translate(50%,-70%) rotate(15deg) scale(0.85);
        opacity:0.2;
    }
}
@keyframes mo_rt_ani_reverse{
    from{
        transform:translate(50%,-70%) rotate(15deg) scale(0.85);
        opacity:0.2;
    }
    to{
        transform:translate(0,0) rotate(0) scale(1);
        opacity:1;
    }
}
@keyframes mo_lt_ani{
    from{
        transform:translate(0,0) rotate(0) scale(1);
        opacity:1; 
    }
    to{
        transform:translate(-70%,-70%) rotate(-20deg) scale(0.85);
        opacity:0.2;
    }
}
@keyframes mo_lt_ani_reverse{
    from{
        transform:translate(-70%,-70%) rotate(-20deg) scale(0.85); 
        opacity:0.2;
    }
    to{
        transform:translate(0,0) rotate(0) scale(1);
        opacity:1;
    }
}
@keyframes mo_center_ani{
    from{
        transform:translate(-50%,-50%) rotate(0) scale(1);
        opacity:1;
    }
    to{
        transform:translate(-200%,-50%) rotate(-10deg) scale(0.85);
        opacity:0.2;
    }
}
@keyframes mo_center_ani_reverse{
    from{
        transform:translate(-200%,-50%) rotate(-10deg) scale(0.85);
        opacity:0.2;
    }
    to{
        transform: scale(1) translate(-50%,-50%) rotate(0);
        opacity:1;
    }
}
@keyframes mo_lb_ani{
    from{
        transform:translate(0,0) rotate(0) scale(1);
        opacity:1;
    }
    to{
        transform:translate(-70%,60%) rotate(15deg) scale(0.85);
        opacity:0.2;
    }
}
@keyframes mo_lb_ani_reverse{
    from{
        transform:translate(-70%,60%) rotate(15deg) scale(0.85);
        opacity:0.2;
    }
    to{
        transform:translate(0,0) rotate(0) scale(1);
        opacity:1;
    }
}
@keyframes mo_rb_ani{
    from{
        transform:translate(0,0) rotate(0) scale(1);
        opacity:1;
    }
    to{
        transform:translate(100%,40%) rotate(-5deg) scale(0.85);
        opacity:0.2;
    }
}
@keyframes mo_rb_ani_reverse{
    from{
        transform:translate(100%,40%) rotate(-5deg) scale(0.85);
        opacity:0.2;
    }
    to{
        transform:translate(0,0) rotate(0) scale(1);
        opacity:1;
    }
}
















.small_ani{
    animation:small 2s cubic-bezier(0.83, 0, 0.17, 1) both;
}

@keyframes small{
    from{
        transform:translateY(-50%) scale(1);
        top:145dvh;
    }
    to{
        transform:translateY(0%) scale(0);
        top:165dvh;
    }
}

.small_reverse{
    animation:small_reverse 1.4s cubic-bezier(0.64, 0, 0.78, 0) both 0.4s;
}
@keyframes small_reverse{
    from{
        transform:translateY(-50%)  scale(0) ;
    }
    to{
        transform:translateY(-50%)  scale(1) ;
    }
}



.izumi_ani{
    animation:izumi 1.4s cubic-bezier(0.5, 1, 0.89, 1) both;
}
@keyframes izumi {
    from{
        transform:translateY(0) scale(1);
        top:70dvh;
    }
    to{
        transform:translateY(-50%) scale(0);
        top:127.2dvh;
    }
}

.izumi_reverse{
    animation:izumi_reverse 1.4s cubic-bezier(0.5, 1, 0.89, 1) both;
}

@keyframes izumi_reverse{
    from{
        transform:translateY(0) scale(1) ;
        top:70dvh;
    }
    to{
        transform:translateY(-40%) scale(0) ;
        top:-50dvh;
    }
}



.circle_updown{
    animation:circle_updown 1s ease-in-out 2s alternate infinite;
}

@keyframes circle_updown{
    from{
        transform:translateY(-50%);
    }
    to{
        transform:translateY(-37%);
    }
}

.izumi_updown{
    animation:izumi_updown 1s ease-in-out 2.2s alternate infinite;
}

@keyframes izumi_updown{
    from{
        transform:scale(1);
    }
    to{
        transform:scale(1.05) ;  
    }
}

.drop_updown{
    animation:drop_updown 1s ease-in-out 1.6s alternate infinite; 
}
@keyframes drop_updown {
    form{
        transform:scaleY(1) translateY(0);
    }
    to{
        transform:scaleY(1.04) translateY(3%);
    }
}








.opacity_ani{
    animation:opacity_ani 1.6s cubic-bezier(.27,0,.68,.13) both;
}

@keyframes opacity_ani {
    from{
        opacity:1;
    }
    80%{
        opacity:1;
    }
    100%{
        opacity:0;
    }
}



.stagger_ani{
    animation:stagger_ani 0.4s ease-in-out both;
}
@keyframes stagger_ani {
    from{
        transform:translateY(50px);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
} 

.icon_ani03{
    animation:icon_ani03 0.6s ease-in-out both;
}
@keyframes icon_ani03{
    from{
        transform:translate(5px, 45px);
        opacity:0;
    }
    to{
        transform:translate(5px,-5px);
        opacity:1;
    }
}

.icon_ani04{
    animation:icon_ani04 0.6s ease-in-out both;
}
@keyframes icon_ani04 {
    from{
        transform:translate(10px,43px);
        opacity:0;
    }
    to{
        transform:translate(10px,-7px);
        opacity:1;
    }
}

.icon_ani05{
    animation:icon_ani05 0.6s ease-in-out both;
}
@keyframes icon_ani05{
    from{
        transform:translate(5px, 45px);
        opacity:0;
    }
    to{
        transform:translate(5px,-5px);
        opacity:1;
    }
}

.icon_ani06{
    animation:icon_ani06 0.6s ease-in-out both;
}
@keyframes icon_ani06{
    from{
        transform:translate(7px, 55px);
        opacity:0;
    }
    to{
        transform:translate(7px, 5px);
        opacity:1;
    }
}

.home_ani{
    animation:home_ani 1s ease-in-out both;
}
@keyframes home_ani{
    from{
        transform:translateY(100px);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}

.solution_img{
    width:50%;
    height:100vh;
    height:100dvh;
    position:absolute;
    right:0;
    display:none;
}


.white_bg{
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    border:solid 2px white;
    border-radius: 10px;
}

.white_bg::before{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    border:solid 5px rgba(22,22,22,0.3);
    border-radius: 10px;
    transform:translate(20px,20px);
    filter:blur(5px);
    -webkit-filter: blur(5px);
}

.peridot{
    display:none;
}

.p2p{
    display:none;
}

.contract{
    display:none;
}
.wallet{
    display:none;
}
.global_funding{
    display:none;
}

.peridot_bg{
    width:64.36%;
    height:37.9vh;
    height:37.9dvh;
    position:absolute;
    left:15%;
    top:30%;
}

.peridot_img{
    width:50.8%;
    height:auto;
    position:absolute;
    left: 22%;
    top:23%;
    filter:drop-shadow(20px 20px 6px  rgba(22,22,22,0.2));
    -webkit-filter: drop-shadow(20px 20px 6px  rgba(22,22,22,0.2));
}

.wallet_bg{
    width:37%;
    height:57vh;
    height:57dvh;
    position:absolute;
    left:27.5%;
    top:28vh;
    top:28dvh;
}

.wallet_bg_img{
    width:35%;
    height:auto;
    position:absolute;
    left:28.95%;
    top:20vh;
    top:20dvh;
}
.wallet_withdraw{
    width:18.2%;
    height:auto;
    position:absolute;
    left:24.27%;
    top:37vh;
    top:37dvh;
}
.wallet_deposit{
    width:18.2%;
    height:auto;
    position:absolute;
    left:40.79%;
    top:37vh;
    top:37dvh;
}
.wallet_dot{
    width:30%;
    height:auto;
    position:absolute;
    left:24.16%;
    top:52vh;
    top:52dvh;
}

.wallet_peri{
    width:30%;
    height:auto;
    position:absolute;
    left:26.87%;
    top:59vh;
    top:59dvh;
}
.wallet_savebox{
    width:29%;
    height:auto;
    position:absolute;
    left:29.68%;
    top:66vh;
    top:66dvh;
}
@media(max-width:1560px){
    .wallet_bg_img{
        width:40%;
    }
}
@media(max-height:800px){
    .wallet_bg_img{
        top:17%;
    }
}

.p2p_bg{
    width:41.66%;
    height:60vh;
    height:60dvh;
    position:absolute;
    left:21%;
    top:22%;
}
.p2p_bg01{
    width:34%;
    height:auto;
    position:absolute;
    left:12%;
    top:15%;
}
.p2p_bg02{
    width:34%;
    height:auto;
    position:absolute;
    left:43%;
    top:29%;
}
.p2p_main{
    width:32%;
    height:auto;
    position:absolute;
    left:7%;
    top:35%;
}
.find_offer{
    width:20%;
    height:auto;
    position:absolute;
    left:13%;
    top:65%;
}
.application{
    width:28.54%;
    height:auto;
    position:absolute;
    left:39.16%;
    top:52%;
}
.buy{
    width:28.54%;
    height:auto;
    position:absolute;
    left:39.16%;
    top:74%;
}

@media(max-width:1530px){
    .p2p_bg01{
        width:38%;
    }
    .p2p_bg02{
        width:38%;
    }
}
@media(max-width:1440px){
    .p2p_bg01{
        width:40%;
    }
    .p2p_bg02{
        width:40%;
    }
}



.contract_frame{
    width:41%;
    height:auto;
    position:absolute;
    left:27%;
    top:23vh;
    top:23dvh;
}
.contract_bg{
    width:39%;
    height:54.5%;
    position:absolute;
    left:23.33%;
    top:28vh;
    top:28dvh;
    background-color: rgba(255,255,255,0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
.contract_green{
    width:36%;
    height:auto;
    position:absolute;
    left:24.89%;
    top:30vh;
    top:30dvh;
    filter: contrast(40%);
}
.contract_safety01{
    width:22.5%;
    height:auto;
    position:absolute;
    left:33%;
    top:33vh;
    top:33dvh;
}
.contract_safety02{
    width:17%;
    height:auto;
    position:absolute;
    left:35.5%;
    top:35.5vh;
    top:35.5dvh;
}
.contract_text_container{
    width:32%;
    height:auto;
    position:absolute;
    left:26.87%;
    top:60vh;
    top:60dvh;
}
.contract_text{
    width:100%;
    position:relative;
    height:5px;
    background-color: #62BECC;
    box-shadow: 4px 4px 2px rgba(22,22,22,0.4);
    margin-bottom: 20px;
}

@media(max-width:1560px){
    .contract_frame{
        width:50%;
    }
    .contract_bg{
        width:48%;
        height:60%;
    }
    .contract_green{
        width:46%;
    }
    .contract_safety01{
        left:36%;
    }
    .contract_safety02{
        left:39%;
    }
    .contract_text_container{
        width:40%;
    }
}


.global_funding_bg{
    width:68%;
    height:40vh;
    height:40dvh;
    position:absolute;
    left:11.56%;
    top:30vh;
    top:30dvh;
}
.global_funding_content{
    width:90%;
    height:auto;
    position:absolute;
    right:12%;
    top:20vh;
    top:20dvh;
}
.planet01{
    width:42%;
    height:auto;
    position:absolute;
    left:24%;
    top:29vh;
    top:29dvh;
}
.planet02{
    width:42%;
    height:auto;
    position:absolute;
    left:22%;
    top:28vh;
    top:28dvh;
}
.global_funding_content_mo{
    width:58%;
    height:auto;
    position:absolute;
    left:16%;
    top:6%;
 }


 @keyframes img_open{
    from{
        transform:translate(50px,50px) scale(0.7);
        opacity:0;
    }
    to{
        transform:translate(0,0) scale(1);
        opacity:1;
    }
 }

 @keyframes img_open02{
    from{
        transform:scale(0.5);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
 }