#act {position: relative; width: 100%; height: 100%; background: url("../images/bg.png") no-repeat; overflow: hidden;}
#act .guide {display: none; position: absolute; left: 0; top: 0; z-index: 99999;}
#act .guide .close {position: absolute; right: 110px; top: 80px; cursor: pointer;}
#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;
    z-index: 999;
}
#act .actTitle.on {color: #fff;}
#act .actTitle .cir {width: 16px; height: 16px; background: #f3d020; border-radius: 50%;margin-right: 13px; margin-top: 14px;}

#act .pg {width: 100%; height: 100%;}
#act .pg2 {display: none;}
#act .table {position: absolute; left: 595px; bottom: -4px; z-index: 10;}
#act .flashlight {position: absolute; right: -50px; bottom: -30px; z-index: 10;}
#act .flashlight.on {display: none;}
#act .darkMode {position: relative; width: 100%; height: 100%; background: rgba(0,0,0,.9); z-index: 3;}
#act .pg1 .darkMode {z-index: 9;}
#act .pg1 .darkMode .shadow {position: absolute; left: 220px; top: 200px; z-index: 99;}
#act .pg1 .darkMode.on {display: none;}
#act .darkMode .light {position: absolute; left: 30px; top: -30px;}
#act .turnBtn {position: absolute; right: 50px; bottom: 120px; width: 140px; height: 72px; z-index: 99; background: url("../images/turnBtn.png") no-repeat;}
#act .nextBtn {display: none; position: absolute; right: 50px; bottom: 120px; z-index: 99;}
#act .pg1 .turnBtn::after {content: '끄기';}
#act .pg1 .turnBtn.on::after {content: '켜기';}
#act .pg2 .turnBtn::after {content: '켜기';}
#act .pg2 .turnBtn.on::after {content: '끄기';}
#act .pg1 .dropArea {display: none; position: absolute; left: 652px; bottom: 76px; z-index: 2;}
#act .pg1 .dropArea img {transition: opacity 0.5s;}
#act .pg1 .dropArea img.on {opacity: 0;}
#act .pg1 .dropArea.on {display: block;}
#act .pg1 .dropArea .dropObj {display: none; position: absolute;}
#act .pg1 .dropArea .dropObj1 {left: 0; top: 10px; width: 105px; height: 198px;}
#act .pg1 .dropArea .dropObj2 {left: 60px; top: 40px; width: 94px; height: 97px;}
#act .pg1 .dropArea .dropObj3 {left: 47px; top: 120px; width: 175px; height: 90px;}

#act .pg .dragArea {position: absolute; left: 0; top: 0; z-index: 2;}
#act .pg .dragItem {position: absolute; z-index: 2; cursor: pointer;}
#act .pg .dragItem1 {left: 1000px; top: 110px;}
#act .pg .dragItem2 {left: 1136px; top: 142px;}
#act .pg .dragItem3 {left: 1020px; top: 238px;}
#act .pg .dragItem4 {left: 1130px; top: 253px;}
#act .pg .dragItem5 {left: 954px; top: 340px;}
#act .pg .dragItem6 {left: 1144px; top: 368px;}
#act .pg .dragItem7 {left: 989px; top: 428px;}

#act .pg2 .dragArea {width: 100%; height: 100%; z-index: 11;}
#act .pg2 .dragArea .darkMode {display: none; position:absolute; top:0; left: 0; width:100%; height:100%; z-index: 2; background-color: rgba(0,0,0,0.9)}
#act .pg2 .dragArea .darkMode.on{display: block;}
#act .pg2 .darkMode .shadow {position: absolute; left: 220px; top: 470px; z-index: 99;}
#act .pg2 .dragArea .table {display: none; z-index: 101;}
#act .pg2 .dragArea .table.on{display: block;}
#act .pg2 .dragArea .dragItem{z-index: 1;}
#act .pg2 .dragArea .dragItem.off{pointer-events: none;}
#act .pg2 .dropArea {position: relative; left: 0; top: 0; /*z-index: 5;*/ z-index: 11;}
#act .pg2 .dropItem {position: absolute; left: 600px; top: 309px; width: 1330px; height: 1300px;}
#act .pg2 .shadowArea {display: none; position: absolute; left: 0px;top: 0; width: 100%; height: 100%; box-sizing: border-box;z-index: 98;}
#act .pg2 .shadowArea.on {display: block; zoom: 140%;}
#act .pg2 .shadowArea .dragItem img {filter: blur(4px) invert() grayscale(100%) brightness(0); }
#act .pg2 .reBtn {display: none; position: absolute; left: 50px; bottom: 60px; z-index: 999;}
#act .pg2 .reBtn.on {display: block; }