* {user-select: none;}


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

.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: #222; font-family: "NPSfontB"; z-index: 1; }
.pageOutWrap .contentsOutWrap #act .title:before { content: ''; position: absolute; top: 10px; left: -30px; width: 16px; height: 16px; border-radius: 50%; background: #f3d020; }

.pageOutWrap .contentsOutWrap #act .door { position: absolute; bottom: 64px; width: 334px; height: 545px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pageOutWrap .contentsOutWrap #act .door1 { left: 292px; background: url("../images/door1.png")no-repeat; }
.pageOutWrap .contentsOutWrap #act .door2 { left: 673px; background: url("../images/door2.png")no-repeat; }
.pageOutWrap .contentsOutWrap #act .door1.open { background: url("../images/door1_open.png")no-repeat; width: 482px; height: 572px; bottom: 37px; z-index: 1; -webkit-tap-highlight-color: transparent; }
.pageOutWrap .contentsOutWrap #act .door2.open { background: url("../images/door2_open.png")no-repeat; width: 482px; height: 572px; bottom: 37px; z-index: 1; -webkit-tap-highlight-color: transparent; }


/******* 다음버튼 *******/
.pageOutWrap #act .nextBtn { position: absolute; bottom: 55px; right: 45px; display: none; z-index: 2; }

/******* 드래그페이지 *******/
.pageOutWrap .contentsOutWrap #act .room .title { color: #000; -webkit-text-stroke: 0.8px #fff; }
.pageOutWrap .contentsOutWrap #act .room { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 1; }

.pageOutWrap .contentsOutWrap #act .room .roomArea { display: flex; align-items: center; justify-content: center; }
.pageOutWrap .contentsOutWrap #act .room1 .roomArea .leftArea { position: absolute; left: 0; top: 0; background: url("../images/room1.png")no-repeat; width: 920px; height: 720px; }
.pageOutWrap .contentsOutWrap #act .room2 .roomArea .leftArea { position: absolute; left: 0; top: 0; background: url("../images/room2.png")no-repeat; width: 920px; height: 720px; }
.pageOutWrap .contentsOutWrap #act .room .roomArea .rightArea { position: absolute; right: 0; top: 0;  background: url("../images/room_area.png")no-repeat;width: 385px; height: 720px; }
.pageOutWrap .contentsOutWrap #act .room .roomArea .rightArea img { position: absolute; top: 80px; right: 38px; }

.pageOutWrap .contentsOutWrap #act .room .dragItem { position: absolute; cursor: pointer;}
.pageOutWrap .contentsOutWrap #act .room .dragItem img { width: 100%; }

/*방1번 draItem*/
.pageOutWrap .contentsOutWrap #act .room1 .dragItem1 { width: 69px; height: 155px; top: 108px; left: 1000px; }
.pageOutWrap .contentsOutWrap #act .room1 .dragItem2 { width: 91px; height: 91px; top: 148px; left: 1110px; }
.pageOutWrap .contentsOutWrap #act .room1 .dragItem3 { width: 100px; height: 44px; top: 345px; left: 989px; }
.pageOutWrap .contentsOutWrap #act .room1 .dragItem4 { width: 77px; height: 102px; top: 320px; left: 1126px; }
.pageOutWrap .contentsOutWrap #act .room1 .dragItem5 { width: 59px; height: 129px; top: 483px; left: 1005px; }
.pageOutWrap .contentsOutWrap #act .room1 .dragItem6 { width: 98px; height: 81px; top: 497px; left: 1098px; }

/*방2번 draItem*/
.pageOutWrap .contentsOutWrap #act .room2 .dragItem1 { width: 60px; height: 77px; top: 115px; left: 990px; }
.pageOutWrap .contentsOutWrap #act .room2 .dragItem2 { width: 61px; height: 77px; top: 117px; left: 1073px; }
.pageOutWrap .contentsOutWrap #act .room2 .dragItem3 { width: 53px; height: 76px; top: 118px; left: 1156px; }
.pageOutWrap .contentsOutWrap #act .room2 .dragItem4 { width: 53px; height: 83px; top: 247px; left: 997px; }
.pageOutWrap .contentsOutWrap #act .room2 .dragItem5 { width: 51px; height: 83px; top: 247px; left: 1078px; }
.pageOutWrap .contentsOutWrap #act .room2 .dragItem6 { width: 44px; height: 73px; top: 252px; left: 1160px; }
.pageOutWrap .contentsOutWrap #act .room2 .dragItem7 { width: 67px; height: 105px; top: 381px; left: 1011px; }
.pageOutWrap .contentsOutWrap #act .room2 .dragItem8 { width: 61px; height: 72px; top: 394px; left: 1124px; }
.pageOutWrap .contentsOutWrap #act .room2 .dragItem9 { width: 90px; height: 89px; top: 513px; left: 997px; }
.pageOutWrap .contentsOutWrap #act .room2 .dragItem10 { width: 89px; height: 58px; top: 522px; left: 1116px; }

.pageOutWrap .contentsOutWrap #act .dropItem { position: absolute; display: none; transform-origin: center center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pageOutWrap .contentsOutWrap #act .dropItem.on .transformWrap:before {content:""; position:absolute; top:0; left:0; width:100%; height:2px; background-color:#000000; -webkit-tap-highlight-color: transparent;}
.pageOutWrap .contentsOutWrap #act .dropItem.on .transformWrap:after {content:""; position:absolute; top:100%; left:0; width:100%; height:2px; background-color:#000000;}
.pageOutWrap .contentsOutWrap #act .dropItem.on .imgArea { /*border: 2px solid #000; box-sizing: border-box;*/ }
.pageOutWrap .contentsOutWrap #act .dropItem.on .imgArea:before {content:""; position:absolute; top:0; left:0; width:2px; height:100%; background-color:#000000;}
.pageOutWrap .contentsOutWrap #act .dropItem.on .imgArea:after {content:""; position:absolute; top:0; left:100%; width:2px; height:100%; background-color:#000000;}
.pageOutWrap .contentsOutWrap #act .dropItem .imgArea img { display:block; width:100%; }

.pageOutWrap .contentsOutWrap #act .dropItem .deleteBtn { position: absolute; z-index:10; background: url("../images/deleteBtn.png")no-repeat; width: 46px; height: 46px; margin-left:-23px; margin-top:-23px;}
.pageOutWrap .contentsOutWrap #act .dropItem .rotateBtn { position: absolute; z-index:10; background: url("../images/rotateBtn.png")no-repeat; width: 46px; height: 46px; margin-left:-23px; margin-top:-23px;}
.pageOutWrap .contentsOutWrap #act .dropItem .reverseBtn { position: absolute; z-index:10; background: url("../images/reverseBtn.png")no-repeat; width: 46px; height: 46px; margin-left:-23px; margin-top:-23px;}
.pageOutWrap .contentsOutWrap #act .dropItem .resizeBtn { position: absolute; z-index:10; background: url("../images/resizeBtn.png")no-repeat; width: 46px; height: 46px; margin-left:-23px; margin-top:-23px;}

.pageOutWrap .contentsOutWrap #act .dropItem .transBtn {display:none;}
.pageOutWrap .contentsOutWrap #act .dropItem.on .transBtn {display:block;}


.pageOutWrap .contentsOutWrap #act .dropItem .transformWrap { width: 100%; height: 100%; }
.pageOutWrap .contentsOutWrap #act .dropItem .transformWrap .imgArea { width: 100%; height: 100%; }


/*완료버튼*/
.compBtn { position: absolute; bottom: 55px; right: 45px; display: none; }


/******* 완료페이지 *******/
.pageOutWrap #act .completePage {  position: absolute; top: 0; left: 0; display: none; background: url("../images/completeBg.png"); width: 100%; height: 720px; z-index: 2;}
.pageOutWrap #act .completePage .reBtn { position: absolute; bottom: 55px; left: 50%; transform: translateX(-50%); }
.pageOutWrap #act .completePage .captureArea { background: url("../images/captureArea.png")no-repeat; width: 693px; height: 552px;/*display: flex; align-items: center; justify-content: center;*/
    position: absolute; top: 42px; left: 50%; transform: translateX(-50%); padding:20px; padding-right:29px; box-sizing: border-box;}
.pageOutWrap #act .completePage .captureArea img { width: 100%; /*height: 100%; object-fit: contain;*/ }