#act {position: relative; width: 100%; height: 100%; background: url("../images/bg.png?v=1") no-repeat; overflow: hidden;}
#act .actTitle {
    position: absolute;
    left: 49px;
    top: 60px;
    display: flex;
    font-family: "NPSfontB";
    font-size: 40px;
    line-height: 1.25;
    letter-spacing: -2px;
    color: #222;
    transition: opacity 0.5s;
}
#act.on .actTitle {opacity: 0;}
#act .actTitle .cir {margin-right: 13px; margin-top: 14px;}
#act .actTitle span {width: 16px; height: 16px; background: #f3d020; border-radius: 50%;}

#act .choicePage { display: block; ;height: 100%}
#act .choicePage .imgAreaWrap { }
#act .choicePage .imgAreaWrap .imgArea { position: absolute }
#act .choicePage .imgAreaWrap .imgArea1 { top: 132px; left: 255px;}
#act .choicePage .imgAreaWrap .imgArea2 { top: 132px; left: 654px}
#act .choicePage .imgAreaWrap .imgArea3 { top: 406px; left: 255px}
#act .choicePage .imgAreaWrap .imgArea4 { top: 406px; left: 654px}
#act .choicePage .imgAreaWrap .imgArea .select { display: none; position: absolute; top: 0; left: 0;}
#act .choicePage .imgAreaWrap .imgArea.on .select { display: block;}
#act .choicePage .nextBtn { display: none; position: absolute; bottom: 64px; right: 45px;}

#act .drawingPage { display: none;}

#act .drawingPage .drawingBg { position: absolute; top: 136px; left: 130px; background: url("../images/drawingBg.png")no-repeat; width: 730px; height: 520px;}
#act .drawingPage .drawingIconBg { position: absolute; top: 136px; left: 880px; background: url("../images/iconBg.png")no-repeat; width: 280px; height: 520px;}

#act .drawingPage .drawingIconBg .toolArea,
#act .drawingPage .drawingIconBg .colorArea { position: absolute;}

#act .drawingPage .drawingIconBg .toolArea .on { display: none}
#act .drawingPage .drawingIconBg .toolArea.on .on {position: absolute; top: 0; left: 0; display: block;}
#act .drawingPage .drawingIconBg .toolArea.tool1 { top: 20px ;left: 25px;}
#act .drawingPage .drawingIconBg .toolArea.tool2 { top: 20px ;left: 145px;}
#act .drawingPage .drawingIconBg .toolArea.tool3 { top: 135px; left: 25px;}
#act .drawingPage .drawingIconBg .toolArea.tool4 { top: 135px; left: 145px;}
#act .drawingPage .drawingIconBg .toolArea.tool5 { top: 250px; left: 25px;}

#act .drawingPage .drawingIconBg .colorArea.cor1 { top: 381px; left: 35px;}
#act .drawingPage .drawingIconBg .colorArea.cor2 { top: 381px; left: 110px;}
#act .drawingPage .drawingIconBg .colorArea.cor3 { top: 381px; left: 185px;}
#act .drawingPage .drawingIconBg .colorArea.cor4 { top: 441px; left: 35px;}
#act .drawingPage .drawingIconBg .colorArea.cor5 { top: 441px; left: 110px;}
#act .drawingPage .drawingIconBg .colorArea.cor6 { top: 441px; left: 185px;}

#act .drawingPage .drawingIconBg .colorArea.on { outline: 4px solid #000 ; width: 50px; height: 50px; border-radius: 100%}

#act .drawingPage .svgArea { position: absolute; display: none;}
#act .drawingPage .svgArea1{ top: 39px; left: 61px; display: block;}
#act .drawingPage .svgArea2{ top: 74px; left: 46px;}
#act .drawingPage .svgArea3{ top: 41px; left: 59px;}
#act .drawingPage .svgArea4{ top: 32px; left: 109px; }

#act .drawingPage.end .svgArea1{ top: 74px; left: 177px; }
#act .drawingPage.end .svgArea2{ top: 79px; left: 162px; }
#act .drawingPage.end .svgArea3{ top: 60px; left: 177px; }
#act .drawingPage.end .svgArea4{ top: 55px; left: 240px; }

#act .drawingPage .button{ position: absolute; display: none;}
#act .drawingPage .button.compBtn{ top: 559px; left: 695px;}
#act .drawingPage .button.reBtn{ top: 543px; left: 865px;}

#act .drawingPage.end .actTitle { display: none;}
#act .drawingPage.end .drawingBg{ top: 88px; left: 165px; background: url("../images/drawingBgL.png")no-repeat; width: 960px; height: 560px;}
#act .drawingPage.end .drawingIconBg{ display: none }

#act .drawingPage .svgArea .clip { position: absolute;}
#act .drawingPage .svgArea .clip img { pointer-events: none;}
#act .drawingPage .svgArea1 .clip { clip-path: url(#st1); width: 410px; height: 370px; top: 7px; left: 189px;}
#act .drawingPage .svgArea2 .clip { clip-path: url(#st2); width: 640px; height: 385px; top: 1px; left: 4px;}
#act .drawingPage .svgArea3 .clip { clip-path: url(#st3); width: 489px; height: 353px; top: 42px; left: 114px;}
#act .drawingPage .svgArea4 .clip { clip-path: url(#st4); width: 319px; height: 226px; top: 116px; left: 137px;}
#act .drawingPage.end .clip { pointer-events: none;}


#act .drawingPage .svgArea2 .hideBg { position: absolute; top: 9px; left: 272px;}