#act {position: relative; width: 100%; height: 100%; background: url("../images/bg.png") no-repeat; overflow: hidden;}
#act .guide {position: absolute; left: 0; top: 0; z-index: 99;}
#act .guide .close {position: absolute; right: 110px; top: 80px; cursor: pointer;}
#act .actArea {position: relative; z-index: 1; height: 100%;}
#act .actTitle {
    display: none;
    position: absolute;
    left: 49px;
    top: 60px;
    font-family: "NPSfontB";
    font-size: 40px;
    line-height: 1.25;
    letter-spacing: -2px;
    color: #222;
}
#act .actTitle.on {display: flex;}
#act .actTitle .cir {margin-right: 13px; margin-top: 14px;}
#act .actTitle span {width: 16px; height: 16px; background: #f3d020; border-radius: 50%;}
#act .actTitle .under1 {color: #ec6a1a; text-shadow: -1px -1px 0 #404040, 1px -1px 0 #404040, -1px 1px 0 #404040, 1px 1px 0 #404040; margin: 0 8px;}
#act .actTitle .under2 {color: #9bc52b; text-shadow: -1px -1px 0 #404040, 1px -1px 0 #404040, -1px 1px 0 #404040, 1px 1px 0 #404040; margin: 0 8px;}
#act .actTitle .under3 {color: #22a839; text-shadow: -1px -1px 0 #404040, 1px -1px 0 #404040, -1px 1px 0 #404040, 1px 1px 0 #404040; margin: 0 8px;}
#act .actTitle .under4 {color: #309d9e; text-shadow: -1px -1px 0 #404040, 1px -1px 0 #404040, -1px 1px 0 #404040, 1px 1px 0 #404040; margin: 0 8px;}
#act .actTitle .under5 {color: #144494; text-shadow: -1px -1px 0 #404040, 1px -1px 0 #404040, -1px 1px 0 #404040, 1px 1px 0 #404040; margin: 0 8px;}
#act .actTitle .under6 {color: #6c3d94; text-shadow: -1px -1px 0 #404040, 1px -1px 0 #404040, -1px 1px 0 #404040, 1px 1px 0 #404040; margin: 0 8px;}
#act .actTitle .under7 {color: #a41072; text-shadow: -1px -1px 0 #404040, 1px -1px 0 #404040, -1px 1px 0 #404040, 1px 1px 0 #404040; margin: 0 8px;} 
#act .palette {position: absolute; left: 91px; top: 128px;}
#act .completeImg {position: relative; top: 5px; display: flex; align-items: center; justify-content: center; height: 100%; z-index: 0; opacity: 0; transition: opacity 0.5s;}
#act .completeImg.on {opacity: 1;}
#act .completeImg img {vertical-align: top;}
#act .reBtn {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

#act .clay {position: absolute; cursor: pointer;}
#act .clay1 {left: 210px; top: 490px;}
#act .clay2 {left: 180px; top: 551px;}
#act .clay3 {left: 250px; top: 545px;}
#act .clay4 {left: 460px; top: 490px;}
#act .clay5 {left: 423px; top: 550px;}
#act .clay6 {left: 496px; top: 547px;}
#act .clay7 {left: 683px; top: 490px;}
#act .clay8 {left: 645px; top: 544px;}
#act .clay9 {left: 720px; top: 546px;}

#act .dog {position: absolute;right: 90px;bottom: 70px;}
#act .balloon {position: absolute;right: 53px;bottom: 330px;}
.dropArea {
    transform-origin: top left; /* 스케일 변화 기준점 설정 */
    transition: transform 0.3s ease; /* 스케일 변화에 대한 애니메이션 설정 */
}

#act .compClay {position: absolute; transform: scale(1.2); transition: 0.8s; transition-delay: 0.5s; opacity: 0; z-index: 0;}
#act .compClay.on {opacity: 1; transform: scale(1);}
#act .compClay1 {right: 288px; top: 163px;}
#act .compClay2 {right: 150px; top: 163px;}
#act .compClay3 {right: 296px; top: 288px;}
#act .compClay4 {right: 147px; top: 293px;}
#act .compClay5 {right: 290px; top: 418px;}
#act .compClay6 {right: 150px; top: 418px;}
#act .compClay7 {right: 291px; top: 544px;}
#act .dropArea {position: absolute; left: 141px;top: 161px;width: 670px;height: 280px;border-radius: 80px;}

#act .sequence {position: relative; z-index: 999; width: 100%; height: 100%; pointer-events: none;}
#act .sequence > div {display: none; background: rgba(0,0,0,.7); width: 100%; height: 100%;}