.pageOutWrap .contentsOutWrap #act { position: relative; background: url("../images/bg.png")no-repeat; width: 100%; height: 100%; background-size: cover; }
.pageOutWrap .contentsOutWrap #act .title { position: absolute; top: 65px; left: 80px; font-size: 40px; color: #fff; font-family: "NPSfontB"; }
.pageOutWrap .contentsOutWrap #act .title:before { content: ''; position: absolute; top: 10px; left: -30px; width: 16px; height: 16px; border-radius: 50%; background: #f3d020; }

#act .guide {position: absolute; left: 0; top: 0; z-index: 99;}
#act .guide .close {position: absolute; right: 60px; top: 80px; cursor: pointer;}


/*드래그드롭*/
.pageOutWrap .contentsOutWrap #act .dropArea { position: absolute; left: 0px; top: 120px; width: 100%; height: 360px; z-index: 3; }

/*line { fill: none; stroke: rgb(246,221,99); stroke-width: 7px; }*/

.pageOutWrap .contentsOutWrap #act .dragItem { display: flex; align-items: center; justify-content: center; position: absolute; cursor: pointer; z-index: 4; }
.pageOutWrap .contentsOutWrap #act .dragItem1 { left: 290px; top: 623px; }
.pageOutWrap .contentsOutWrap #act .dragItem2 { left: 338px; top: 531px; }
.pageOutWrap .contentsOutWrap #act .dragItem3 { left: 401px; top: 588px; }
.pageOutWrap .contentsOutWrap #act .dragItem4 { left: 457px; top: 507px; }
.pageOutWrap .contentsOutWrap #act .dragItem5 { left: 551px; top: 520px; }
.pageOutWrap .contentsOutWrap #act .dragItem6 { left: 591px; top: 618px; }
.pageOutWrap .contentsOutWrap #act .dragItem7 { left: 694px; top: 627px; }
.pageOutWrap .contentsOutWrap #act .dragItem8 { left: 789px; top: 563px; }
.pageOutWrap .contentsOutWrap #act .dragItem9 { left: 867px; top: 626px; }
.pageOutWrap .contentsOutWrap #act .dragItem10 { left: 943px; top: 576px; }

.pageOutWrap .contentsOutWrap #act .dragItem.on:before { content: ''; position: absolute;  width: 10px; height: 10px; border-radius: 50%; background: #f7dd5f; box-shadow: 0px 0px 20px 15px #f7dd5f ; object-fit: contain; z-index: -1; }
.pageOutWrap .contentsOutWrap #act .dragItem.starMoveR:before { animation: starScale 0.8s infinite; }
.pageOutWrap .contentsOutWrap #act .dragItem.starMoveL:before { animation: starScale 0.8s infinite; }
.pageOutWrap .contentsOutWrap #act .dragItem.starMoveR { animation: starMoveRight 0.8s infinite; }
.pageOutWrap .contentsOutWrap #act .dragItem.starMoveL { animation: starMoveLeft 0.8s infinite; }

.pageOutWrap .contentsOutWrap #act .dragItem span{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 10px; height: 10px; background-color: red; display: flex; align-items: center; justify-content: center; }

.nextBtn { position: absolute; bottom: 80px; right: 49px; z-index: 3; }

/*라인그리기*/
.pageOutWrap .contentsOutWrap #act .lineDrawArea { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 2; }


/*이름입력*/
.inputArea { width: 100%; display: flex; justify-content: center; position: absolute; bottom: 82px; z-index: 2; gap: 11px; margin: 0 auto; }
.inputArea input { width: 480px; height: 70px; border: 2px solid #b9b9b9; background-color: #fff; border-radius: 30px; display: flex; align-items: center; justify-content: center;
    font-size: 40px; font-family: "NPSfontB"; text-align: center; padding: 0 20px; box-sizing: border-box;  }
.inputArea input::placeholder { color: #cccbcb; font-size: 40px; font-family: "NPSfontB";  }

.inputArea input.on { background-color: #f5c94f; border: solid 2px rgba(0, 0, 0, 0.35); }

.reBtn { position: absolute; bottom: 80px; right: 49px; z-index: 2; }



/*애니메이션*/

@keyframes starMoveRight {
    0% {
        transform: rotate(20deg);
    }
    50%{
        transform: rotate(-20deg);
    }
    100%{
        transform: rotate(20deg);
    }
}

@keyframes starMoveLeft {
    0% {
        transform: rotate(-20deg);
    }
    50%{
        transform: rotate(20deg);
    }
    100%{
        transform: rotate(-20deg);
    }
}

@keyframes starScale {
    0% {
        transform: scale(1);
    }
    50%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}


body.keyboard-open {
    min-height: 100vh;
    overflow: hidden;
    scale: 1;
}