@charset "utf-8";

.mainscene{
    width: 450px; height: 380px;
    top: 10px;
}

.canWrap {
    position: absolute;
    left: 71px;
    width: 300px; height: 300px;
}

.canWrap > canvas{
    position: absolute;
    top: 0px; left: 10px;
    width: 100%; height: 100%;
    z-index: 0;
}

.smallCan{
    height: 290px; width: 230px;
    left: 25px; top: 0px;
}

#waveCan{
    left: 49px; top: 10px;
    width: 215px;
}

#ionCan{
    left: 45px; width: 184px;
}

#h2oCan{
    left: 45px; width: 184px; 
}

.labelText {
    width: 100%;
    position: absolute;
    left: 61px; top: 0px;
    font-size: 14px;
}

#inWat{
    position: absolute;
    left: 45px; top: 18px;
}

#resBead{
    position: absolute;
    left: 150px; top: 4px;
}

#outWat{
    position: absolute;
    left: 220px; top: 18px;
}

#catBead{
    position: absolute;
    left: 250px; top: 172px;
}

#anion{
    position: absolute;
    left: -45px; top: 272px;
}

#tubeImg {
    position: absolute;
    left: 40px; top: 10px;
    width: 227px; height: 287px;
}

#noBeadBg {
    position: absolute;
    left: 40px; top: 10px;
    width: 227px; height: 287px;
    visibility: hidden;
}

#baseCan {
    left: 5px;
}

#btnPanel {
    position: absolute;
    left: 68px; top: 315px;
}

#btn {
    left: 2px;
    display: inline-block;
    position: relative;
    width: 66px; height: 40px;
    font-size: 14px;
}

#segPanel {
    position: absolute;
    left: 185px; top: 315px;
}

#resinSeg {
    width: 195px;
}

#resinSeg > div { 
    padding: 0 10px;
    width: 75px; height: 36px;
}