*{
    margin:0;
    padding:0;
}

body{
    overflow: hidden;
    background-color: rgb(244,244,240);
    font-family: 'mukta',sans-serif;
}

canvas{
    width:100%;
    height:100%;
    overflow: scroll;
}




@media (min-width:1280px){
    .mousecursor{
        width:200px;
        height:200px;
        position:absolute;
        border-radius: 50%;
        background-color:rgb(244,244,240);
        transform: translate(-50%,-50%) scale(0);
        pointer-events: none;
        mix-blend-mode:difference;
        transition:transform 0.4s ease-in-out;
    }
h1{
    font-size:5rem;
    font-weight: 700;
    color:#161616;
}
h2{
    font-size:2.6rem;
    font-weight: 500;
    display:flex;
    justify-items: center;
    color:#161616;

}
p{
    font-size: 1.6rem;
    font-weight:400;
    line-height: 2.2rem;
    color:#161616;
}


span{
    margin:0;
    padding:0;
    display: inline-block;
}

main{
    width:100%;
    height:100vh;
    overflow:hidden;
}



.head{
    width:100%;
    height:auto;
    display:flex;
    align-items: center;
    position:fixed;
    top:2vh;
    z-index: 1000;
}

.home_button{
    width:3%;
    height:auto;
    padding-left:2%;
}

.home_button img{
    width:100%;
    height:auto;
}

.menu{
    width:100%;
    display:flex;
    justify-content: end;
}

.menu p{
    position:relative;
    margin-right:5%;
    font-size: 1.4rem;
    font-weight: 600;
}

.menu_button{
    display:none;
}
.menu_x{
    display:none;
}






.section01{
    width:100%;
    height:100vh;
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center;
}

.section01 iframe{
    position:absolute;
    top:62vh;
    left:0;
    width:100%;
    height:28vh;
    /* z-index: 9; */
}

.main_text{
    position:absolute;
    width:100%;
    height:25vh;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    top:62vh;
    text-align: center;
}

.main_tit{
    height:auto;
    width:80%;
    position:absolute;
    top:30vh;
}
.main_tit img{
    height:auto;
    width:100%;
}
.main_mo{
    display: none;
}






#about{
    width:100%;
    height:auto;
}

.section02{
    width:80%;
    margin:0 auto;
    height:100vh;
    display:flex;
    justify-content:space-around;
    align-items: center;
    position:relative;
}

.about01_img{
    height:75vh;
    width:40%;
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about01_img img{
    width:100%;
    height:auto;
    position:absolute;
}


.about01_text{
    height:75vh;
    width:55%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:flex-start;
}


.about01_tit{
    display: flex;
    align-items: center;
    height:10vh;
    padding-bottom:6vh;
}
.about01_rect{
    width:10px;
    height:100%;
    background-color: #161616;
    position:relative;
    margin-right: 30px;
}

.about01_tit_text{
    position:relative;
    display: flex;
    justify-content: center;
    color:#161616;
}

.about01_text_text{
    width:80%;
    height:auto;
}





.section03{
    width:80%;
    margin:0 auto;
    height:100vh;
    display:flex;
    justify-content:space-around;
    align-items: center;
    position:relative;
}

.about02_img{
    height:75vh;
    width:40%;
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about02_img img{
    position:absolute;
    width:100%;
    height:auto;
}

.about02_text{
    height:75vh;
    width:55%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:flex-start;
}

.about02_tit{
    display: flex;
    align-items: center;
    height:10vh;
    padding-bottom:6vh;
}
.about02_rect{
    width:10px;
    height:100%;
    background-color: #161616;
    position:relative;
    margin-right: 30px;
}

.about02_tit_text{
    position:relative;
    display: flex;
    justify-content: center;
    color:#161616;
}

.about02_text_text{
    width:80%;
    height:auto;
}






.section04{
    width:80%;
    margin:0 auto;
    height:100vh;
    display:flex;
    justify-content:space-around;
    align-items: center;
    position:relative;
}

.about03_img{
    height:75vh;
    width:40%;
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about03_img img{
    width:100%;
    height:auto;
    position:absolute;
}

.about03_text{
    height:75vh;
    width:55%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:flex-start;
}

.about03_tit{
    display: flex;
    align-items: center;
    height:10vh;
    padding-bottom:6vh;
}
.about03_rect{
    width:10px;
    height:100%;
    background-color: #161616;
    position:relative;
    margin-right: 30px;
}

.about03_tit_text{
    position:relative;
    display: flex;
    justify-content: center;
    color:#161616;
}

.about03_text_text{
    width:80%;
    height:auto;
}











#vision{
    width:100%;
    height:auto;
    position:relative;
    margin: 0 auto;
}

#vision_tit_wrapper{
    width:30%;
    height:230vh;
    display:flex;
    justify-content: center;
    position:absolute;
    top:0;
    left:0;
}
.vision_mo_tit{
    display:none;
}

.vision_tit{
    position:relative;
    padding-top:20vh;
    height:10vh;
    display:flex;
    align-items: center;
    z-index: 500;
}

.vision_rect{
    width:10px;
    height:100%;
    background-color: #161616;
}

.vision_tit_text{
    position:relative;
    padding-left:30px;
    color:#161616;
}




#vision01{
    width:100%;
    height:100vh;
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center;
}

#vision02{
    width:100%;
    height:100vh;
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center
}

#vision03{
    width:100%;
    height:100vh;
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center
}



.please_wrapper01{
    position:relative;
    padding-left:50%;
    width:50%;
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.please_bottom01{
    width:300px;
    height:300px;
    position:absolute;
    border-radius: 50%;
    border: none;
    position: absolute;
}

.please_bottom01 img{
    width:100%;
    height:auto;
}


.please01{
    width:350px;
    height:350px;
    border-radius: 50%;
    background-image: url(../image/please_top.png);
    background-size: contain;
    cursor: pointer;
    position: absolute;
    z-index: 800;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vision_logo{
    width:100px;
    height:auto;
    transform:translate(-5px,-5px);
}




.please_wrapper02{
    position:relative;
    padding-left:50%;
    width:50%;
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.please_bottom02{
    width:300px;
    height:300px;
    position:absolute;
    border-radius: 50%;
    border: none;
    position: absolute;
}

.please_bottom02 img{
    width:100%;
    height:auto;
}


.please02{
    width:350px;
    height:350px;
    border-radius: 50%;
    background-image: url(../image/please_top.png);
    background-size: contain;
    cursor: pointer;
    position: absolute;
    z-index: 800;
    display: flex;
    justify-content: center;
    align-items: center;
}


.please_wrapper03{
    position:relative;
    padding-left:50%;
    width:50%;
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.please_bottom03{
    width:300px;
    height:300px;
    position:absolute;
    border-radius: 50%;
    border: none;
    position: absolute;
}

.please_bottom03 img{
    width:100%;
    height:auto;
}


.please03{
    width:350px;
    height:350px;
    border-radius: 50%;
    background-image: url(../image/please_top.png);
    background-size: contain;
    cursor: pointer;
    position: absolute;
    z-index: 800;
    display: flex;
    justify-content: center;
    align-items: center;
}



.vision_text{
    width:50%;
    height:100vh;
    position:absolute;
    left:0;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    transform:translateX(10%);
}


.waveve{
    opacity:0;
    transition:opacity 3s;
}

.wave{
    opacity:1;
} 








.section08{
    width:100%;
    height:120vh;
    position:relative;
}

.product_tit{
    width:100%;
    position:absolute;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top:17vh;
}

.product_tit_wrapper{
    width:100%;
    height:10vh;
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center;
}
.product_rect{
    width:10px;
    height:100%;
    background-color: #161616;
}
.product_tit_tit{
    padding-left:2%;
}
.product_tit_text{
    width:100%;
    display: flex;
    justify-content: center;
    text-align: center;
}




.icon_center{
    display:none;
}
.product_wrapper{
    display:flex;
    align-items: center;
    width:100%;
    height:120vh;
    justify-content: center;
    position:relative;
}

.product_content_wrapper{
    width:520px;
    height:120vh;
    position:relative;
    display: flex;
    align-items: center;
}
.product_circle{
    width:100%;
    height:auto;
    position:absolute;
    transition:all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.product_circle img{
    width:100%;
    height:auto;
}
.circle_ani{
   animation: circle_ani 1s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards;
}


@keyframes circle_ani{
    from{
        transform:rotate(0);
    }
    to{
        transform:rotate(-51deg);
    }
}

.timeset{
    transition:all 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.6s;
}





.product_icon{
    width:100%;
    height:auto;
    position:absolute;
    transform:translate(6%,1.5vh);
}

.product_icon img{
    width:85%;
    height:auto;
}

.product_content_tit{
    position:absolute;
    width:50%;
    height:auto;
    display:flex;
    justify-content:center;
    align-items: center;
    transform:translateX(-50%);
    text-align: center;
}

.product_content_box{
    height:7vh;
    width:100%;
    position:absolute;
    display: flex;
    justify-content:end;
    align-items: center;
    transform:rotate(0) scale(0);
    transform-origin:right center;
    opacity:0;
}

.product_content_box p{
    display: flex;
    align-items: center;
}




.product_ani01{
    animation:product_ani01 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.product_ani02{
    animation:product_ani02 1.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.02s;
}
.product_ani03{
    animation:product_ani03 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.06s;
}
.product_ani04{
    animation:product_ani04 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.14s;
}
.product_ani05{
    animation:product_ani05 1.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.2s;
}

@keyframes product_ani01 {
    from{
        transform:rotate(0) scale(0);
        opacity:0;
    }
    100%{
        transform:rotate(36deg) scale(1);
        opacity:1;
    }
}
@keyframes product_ani02 {
    from{
        transform:rotate(0) scale(0);
        opacity:0;
    }
    100%{
        transform:rotate(18deg) scale(1);
        opacity:1;
    }
}
@keyframes product_ani03 {
    from{
        transform:scale(0);
        opacity:0;
    }
    100%{
        transform:scale(1);
        opacity:1;
    }
}
@keyframes product_ani04 {
    from{
        transform:rotate(0) scale(0);
        opacity:0;
    }
    100%{
        transform:rotate(-18deg) scale(1);
        opacity:1;
    }
}
@keyframes product_ani05 {
    from{
        transform:rotate(0) scale(0);
        opacity:0;
    }
    100%{
        transform:rotate(-36deg) scale(1);
        opacity:1;
    }
}


.product_content_tit p{
    padding-right:280px;
    height:7vh;
    transition:all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.active{
    font-size: 3rem;
    font-weight: 700;
}

.client{
    font-size: 3rem;
    font-weight: 700;
}

.font_back{
    font-size:1.6rem;
    font-weight:400;
}



.product_jack{
    width:21%;
    height:auto;
    position:absolute;
    top:58vh;
    right:26%;
}

.product_jack img{
    width:100%;
    height:auto;
}


.product01_ani{
    animation:product01_ani 0.8s cubic-bezier(0.87, 0, 0.13, 1) 1.1s forwards;
}

@keyframes product01_ani{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

.product01_back{
    animation:product01_back 0.4s cubic-bezier(0.87, 0, 0.13, 1); 
}

@keyframes product01_back{
    from{
        opacity:1;
    }
    to{
        opacity:0;
    }
}

.product01_icon{
    opacity:0;
    transition:all 0.4s cubic-bezier(0.87, 0, 0.13, 1) 0.1s;
}

.product02_icon{
    opacity:0;
    transition:all 0.4s cubic-bezier(0.87, 0, 0.13, 1) 0.1s;
}

.product03_icon{
    opacity:0;
    transition:all 0.4s cubic-bezier(0.87, 0, 0.13, 1) 0.1s;
}
.product04_icon{
    opacity:0;
    transition:all 0.4s cubic-bezier(0.87, 0, 0.13, 1) 0.1s;
}
.product05_icon{
    opacity:0;
    transition:all 0.4s cubic-bezier(0.87, 0, 0.13, 1) 0.1s;
}

.product_mo_wrapper{
    display:none;
}






#partner01{
    width:100%;
    height:110vh;
    position:relative;
}

#partner02{
    width:100%;
    height:110vh;
    position:relative;
}
#partner03{
    width:100%;
    height:110vh;
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center;
}

.partner_tit{
    position:absolute;
    width:100%;
    height:10vh;
    top:68vh;
    justify-content: center;
    display: flex;
    align-items: center;
}

.partner_tit img{
    width:40%;
    height:auto;
}

.hand_top{
    position:absolute;
    width:50%;
    top:30vh;
    left:25%;
    opacity:0;
}

.hand{
    opacity:1;
}

.hand_top img{
    width:100%;
    height:auto;
}

.hand_bottom{
    position:absolute;
    width:50%;
    top:75vh;
    left:25%;
}

.hand_bottom img{
    width:100%;
    height:auto;
}








.greenball_partner{
    width:10%;
    height:auto;
    position:absolute;
    top: 60vh;
    left:80%;
}
.greenball_partner img{
    width:100%;
    height:auto;
}

.greyball{
    width:10%;
    height:auto;
    position:absolute;
    top:60vh;
    left:80%;
}

.greyball img{
    width:100%;
    height:auto;
}

.partner_globe{
    width:20%;
    height:auto;
    position:absolute;
    top:65vh;
    left:25%;
    display:none;
}

.fx_globe{
    display:block;
}

.partner_globe img{
    width:100%;
    height:auto;
}

.partner_f{
    width:17%;
    height:auto;
    position:absolute;
    top:45vh;
    left:15%;
}

.partner_f img{
    width:100%;
    height:auto;
}

.partner_x{
    width:17%;
    height:auto;
    position:absolute;
    top:55vh;
    left:32%;
}

.partner_x img{
    width:100%;
    height:auto;
}

.partner_text01{
    width:40%;
    height:auto;
    position:absolute;
    top:55vh;
    left:50%;
}






.diagram{
    width:40%;
    height:120vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position:relative;
}

.diagram_back{
    width:65%;
    height:auto;
    position:absolute;
}
.diagram_1{
    width:65%;
    height:auto;
    position:absolute;
    
}

.diagram_2{
    width:65%;
    height:auto;
    position:absolute;
    opacity:0;
    
}
.diagram_3{
    width:65%;
    height:auto;
    position:absolute;
    opacity:0;
}

.diagram_4{
    width:65%;
    height:auto;
    position:absolute;
    opacity:0;
}

.diagram_5{
    width:65%;
    height:auto;
    position:absolute;
    opacity:0;
}


.diagram_ani01{
    animation:diagram_ani01 0.2s ease-in-out forwards; 
    animation:diagram_ani03 0.6s ease-in-out 1.2s forwards;
}

@keyframes diagram_ani01{
    from{
        opacity:1;
    }
    to{
        opacity:0;
    }
}

.diagram_ani02{
    animation:diagram_ani02 0.8s ease-in-out 0.4s forwards;
}

.diagram_ani05{
    animation:diagram_ani02 0.8s ease-in-out 1s forwards;
}

@keyframes diagram_ani02{
    from{
        opacity:0;
    }
    50%{
        opacity:1;
    }
    to{
        opacity:0;
    }
}

.diagram_ani03{
    animation:diagram_ani02 1s ease-in-out 0.6s forwards;
}

.diagram_ani04{
    animation:diagram_ani02 1s ease-in-out 0.8s forwards;
}

@keyframes diagram_ani03{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

.partner_text02{
    width:40%;
    height:120vh;
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.partner_text02_text01,.partner_text02_text02{
    padding-bottom:5vh;
}




.section12{
    width:100%;
    height:100vh;
    position:relative;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.contact_tit{
    height:10vh;
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
}


.contact_rect{
    width:10px;
    height:100%;
    background-color: #161616;
}

.contact_tit_tit{
    padding-left:2%;
    position:relative;
    display: flex;
    justify-content: center;
    color:#161616;
}

.contact_tit_text{
    padding-top:3vh;
    color:#161616;
}









.contact_content{
    width:100%;
    display:flex;
    justify-content:center;
    position:relative;
    padding-top: 10vh;
}

.contact01{
    width:20%;
    position:relative;
}

.contact02{
    width:20%;
    position:relative;
    padding-left:5%;
}

.contact03{
    width:20%;
    position:relative;
    padding-left: 5%;
}

.contact_card img{
    width:100%;
    height:auto;
}

.contact_text{
    position:absolute;
    width:65%;
}

.contact_card{
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: url(../image/contact_card_active.png);
    background-size: cover;
}


.contact_text p{
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.7rem;
}



.contact01_text,.contact02_text,.contact03_text{
    color:#161616;
}
.contact_card01,.contact_card02,.contact_card03{
    transition:all 0.4s ease-in-out;
}













.section13{
    width:100%;
    height:100vh;
    position:relative;
    display:flex;
    justify-content:center;
}

.legal_jack{
    width:30%;
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer_text{
    width:50%;
    height:100vh;
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.legal_jack img{
    width:400px;
    height:auto;
}

.footer_logo{
    width:55%;
    height:auto;
    padding-bottom:3vh;

}

.footer_logo img{
    width:100%;
    height:auto;
}

.footer_text p{
    font-size: 1.2rem;
    line-height: 1.6rem;
}

.footer_text01{
    padding-bottom:6vh;
    width:100%;
}

.footer_text02{
    padding-bottom:6vh;
    width:100%;
}
.footer_document{
    width:100%;
    display:flex;
    justify-content: start;
    align-items: flex-start;

}
.footer_text03{
    width:30%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position:relative;
}

.footer_text03 p{
    font-weight:600;
}
.footer_text04{
    width:60%;
    position:relative;
    padding-left:5%;
}

.warning{
    font-size: 1.4rem;
    font-weight: 700;
}

.legal{
    padding-bottom:2vh;
}



.info{
    width:100%;
    height:15vh;
    position:relative;
    display:flex;
    justify-content: space-around;
    border-top: solid 1px rgba(22,22,22, 0.5);
    padding-top:2vh;
}

.info p{
    font-size: 1rem;
    line-height: 1.5rem;
}
.contact_info{
    width:10%;
    display: flex;
    justify-content: center;
}
.contact_info p{
    font-size: 1.4rem;
    font-weight:600;
}
.address{
    display:flex;
    flex-direction: column;
}
.pe{
    display: flex;
    justify-content: space-around;
    width:25%;
}
.phone{
    display:flex;
    flex-direction: column;
}
.email{
    display:flex;
    flex-direction: column;
}

.address_tit{
    font-weight:700;
    font-size: 1.1rem;
}
.phone_tit{
    font-weight:700;
    font-size: 1.1rem;
}
.email_tit{
    font-weight:700;
    font-size: 1.1rem;
}


}