.gcontroler,.gcontroler *{box-sizing:border-box}
.gcontroler{position:absolute;left:0;bottom:120px;width:100%;z-index:50;display:none;}
.ctrl-cmn{position:absolute;}
.ctrl-left{left:0px;padding:30px 15px 50px 50px;}
.ctrl-right{left:105px;padding:30px 50px 50px 15px;}
.ctrl-up{right:0px;padding:30px 50px 50px 15px;}
.ctrl-down{right:105px;padding:30px 15px 50px 50px;}
.ctrl-cmn span{width:40px;height:40px;background:#ffffff44;border:2px solid #fff;position:relative;display:block;}
.ctrl-cmn span:before{content:'';width:16px;height:16px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.ctrl-left span:before{background-image: url("/assets/images/arr3_left.png");}
.ctrl-right span:before{background-image: url("/assets/images/arr3_right.png");}
.ctrl-up span:before{background-image: url("/assets/images/arr3_up.png");}
.ctrl-down span:before{background-image: url("/assets/images/arr3_down.png");}
.ctrl-left.activeBG span{background:rgb(225 116 0 / 90%)}
.ctrl-right.activeBG span{background:rgb(91 193 0 / 90%)}
.ctrl-up.activeBG span{background:rgb(21 108 243 / 90%)}
.ctrl-down.activeBG span{background:rgb(144 56 237 / 90%)}
@media(pointer:coarse){.gcontroler{display:block}}
@media(max-width:425px){
.ctrl-left{padding:30px 15px 50px 30px}
.ctrl-right{left:85px;padding:30px 15px 50px 15px}
.ctrl-up{padding:30px 30px 50px 15px}
.ctrl-down{right:85px;padding:30px 15px 50px 15px}
}