main { display:flex; justify-content:center; padding:100px 0; }
main > .container { width:100%; max-width:1280px; }

main h1 { margin-top:60px; display:flex; justify-content:center; align-items:center; }
main h1 span { position:relative; font-size:40px; font-weight:500; }
main h1 span::after { content:""; position:absolute; right:10px; top:0; transform:translateX(100%) rotate( 20deg ); width:25px; height:25px; border:2px solid #FE8130; border-radius:5px; z-index:-1; }


#sub0203 { position:relative; width:100%; height:700px; display:flex; flex-direction:column; margin-bottom:50px; }
#sub0203 > .menuBtnWrap { position:relative; display:flex; margin-bottom:10px; gap:20px;  }
#sub0203 .group { position:relative; height:35px; display:flex; align-items:center; gap:10px; }
#sub0203 .group:not(:last-child):after { content:""; position:absolute; width:1px; height:20px; background:#ccc; right:-10px; top:50%; transform:translateY(-50%); }
#sub0203 .jw-range-type-A { width:100px; }
#sub0203 .jw-range-type-A progress { height:2px; }
#sub0203 .jw-range-type-A .thumb { width: 8px; height: 8px; background-color: #4caf50; border-radius: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 3; }
#sub0203 .jw_xr > i { width:20px; height:20px; }
#sub0203 .jw_xr > i:after { width:1px; }
#sub0203 .jw_xr > i:before { width:1px; }
#sub0203 .color-label { position:relative; width:35px; height:35px; display:flex; justify-content:center; align-items:center; }
#sub0203 .color-label > span { font-size:16px; }
#sub0203 .color-label > input[type="color"] { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; opacity:0; cursor:pointer; }

#sub0203 .canvas { flex:1; position:relative; border: 1px solid #ccc; }
#sub0203 .canvas canvas { position:absolute; top:0; left:0; cursor: none; }
#sub0203 .brushswitch { fill:#000; }
#sub0203 .brushswitch.on { fill:#ff6600; }