header { --bg:rgba(0, 0, 0, 0.3); --color:#fff; }

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

.loading3d { position:absolute; left:0; top:0; width:100%; height:100%; background:#f1f1f1; display:flex; justify-content:center; align-items:center; }
.loading3d > .w { width:300px; display:flex; justify-content:center; align-items:center; flex-direction:column; }
.loading3d > .w > #progress_text { height:35px; color:#ff0000; }
.loading3d .progress_wrap { position:relative;  width:100%; height:3px; background:#ccc; color:#fff; font-size:20px; overflow:hidden; }
.loading3d .progress_wrap > progress { width:100%; height:100%; -webkit-appearance: none; }
.loading3d .progress_wrap > i { position:absolute; left:0; bottom:0; background:#ff0000; height:100%; }
.loading3d.off { display:none; }

#joystickBox1 { right:20px; bottom:20px; } 
#joystickBox1 .w > .bg { border:2px solid #000000; } 
#joystickBox1 .w > .bg > p { background:rgba(0, 0, 0, 0.5); } 
#joystickBox1 .jw_joystick > div > i { background:rgba(0, 0, 0, 0); border:3px solid #000000; color:#fff; } 

#joystickBox2 { left:20px; bottom:20px; } 
#joystickBox2 .w > .bg { border:2px solid #000000; } 
#joystickBox2 .w > .bg > p { background:rgba(0, 0, 0, 0.5); } 
#joystickBox2 .jw_joystick > div > i { background:rgba(0, 0, 0, 0); border:3px solid #000000; color:#fff; } 

#joystickBox3 { left:190px; bottom:20px; }
#joystickBox3 .w::after { background:rgba(0, 0, 0, 0); } 
#joystickBox3 .jw_joystick > div > i { background:rgba(0, 0, 0, 0.1); width:50%; height:50%; } 
#joystickBox3 .jw_joystick > div > i.off { background:rgba(0, 0, 0, 0);  } 



.joystickBox { position:absolute; width:150px; height:150px; cursor:pointer; z-index:1; opacity:0; pointer-events: none; } 
.joystickBox.show { opacity:1; } 
.joystickBox > .w { position:relative; width:100%; height:100%; }
.joystickBox > .w > .bg { position:absolute; left:0; top:0; width:100%; height:100%; border-radius:50%; overflow:hidden; pointer-events: none; background:rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.1); }
.joystickBox > .w > .bg > p { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); text-transform: uppercase; font-size:11px; width:50%; height:50%; border-radius:50%; background:#d9bc9e; color:#fff; -webkit-user-select: none; user-select: none; }
.joystickBox > .w > .bg > i { position:absolute; top:50%; left:0; transform:translateX(-50%); width:100%; height:100%; transform-origin:50% 0%; transform:rotate(var(--deg)); clip-path: polygon(50% 0px, 100% 50%, 0% 50%); }
.joystickBox > .w > .bg > i.on { background:#ff9900; }
.joystickBox > .w > .bg > i > i { width:100%; height:100%; background:#fff; }
.joystickBox > .w > .jw_joystick { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events: none; }
.joystickBox > .w > .jw_joystick > div { position:relative; width:100%; height:100%; border-radius:50%; }
.joystickBox > .w > .jw_joystick > div > i { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:40%; height:40%; border-radius:50%; }
.joystickBox > .w > .jw_joystick > div > i.off { transition: all 0.2s ease; }

#joystickBox1 { right:20px; bottom:20px; } 
#joystickBox2 { left:20px; bottom:20px; } 

#joystickBox1 .w > .bg { border:2px solid #000000; } 
#joystickBox1 .w > .bg > p { background:rgba(0, 0, 0, 0.5); } 
#joystickBox1 .jw_joystick > div > i { background:rgba(0, 0, 0, 0.2); border:3px solid #000000; color:#fff; } 

#joystickBox2 .w > .bg { border:2px solid #000000; } 
#joystickBox2 .w > .bg > p { background:rgba(0, 0, 0, 0.5); } 
#joystickBox2 .jw_joystick > div > i { background:rgba(0, 0, 0, 0.2); border:3px solid #000000; color:#fff; } 

.guid { position:absolute; left:50px; bottom:50px; }