.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"; letter-spacing: -2px;}
.pageOutWrap .contentsOutWrap #act .title:before { content: ''; position: absolute; top: 10px; left: -30px; width: 16px; height: 16px; border-radius: 50%; background: #8532b8; }
#act .guide {position: absolute; left: 0; top: 0; z-index: 99;}
#act .guide .close {position: absolute; right: 110px; top: 80px; cursor: pointer;}


.pageOutWrap .contentsOutWrap #act .cameraArea {position: relative; background: url("../images/bg1.png")no-repeat; width: 100%; height: 100%; background-size: cover;  }
.pageOutWrap .contentsOutWrap #act .pad {position: absolute; right: 120px; top: 116px;}
.pageOutWrap .contentsOutWrap #act .pad .touch {
    display: none;
    position: absolute;
    left: 81%;
    top: 84%;
    width: 80px;
    height: 80px;
    transform: translate(-76%, -80%);
    z-index: 99;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.pageOutWrap .contentsOutWrap #act .pad .touch img {width: 100%; height: 100%;}
.pageOutWrap .contentsOutWrap #act .nextBtn {display: none; position: absolute; right: 44px; bottom: 55px; z-index: 99;}

.pageOutWrap .contentsOutWrap #act .cameraArea .camera {position: absolute; cursor: pointer; user-select: none;-webkit-tap-highlight-color: transparent;}
.pageOutWrap .contentsOutWrap #act .cameraArea .camera1 {left: 224px; top: 104px; width: 200px; height: 175px; background: url("../images/camera1.png") no-repeat;background-position: center;}
.pageOutWrap .contentsOutWrap #act .cameraArea .camera1.on {background: url("../images/camera1_on.png") no-repeat;background-position: center;}
.pageOutWrap .contentsOutWrap #act .cameraArea .camera2 {left: 220px; top: 328px; width: 192px; height: 175px; background: url("../images/camera2.png") no-repeat;background-position: center;}
.pageOutWrap .contentsOutWrap #act .cameraArea .camera2.on {background: url("../images/camera2_on.png") no-repeat;background-position: center;}
.pageOutWrap .contentsOutWrap #act .cameraArea .camera3 {left: 260px; top: 488px; width: 193px; height: 209px; background: url("../images/camera3.png") no-repeat;background-position: center;}
.pageOutWrap .contentsOutWrap #act .cameraArea .camera3.on {background: url("../images/camera3_on.png") no-repeat;background-position: center;}

.pageOutWrap .contentsOutWrap #act .cameraArea .picture {
    position: absolute;
    left: 19px;
    top: 19px;
    z-index: 99;
    width: 346px;
    height: 495px;
    transition: background 0.5s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.pageOutWrap .contentsOutWrap #act .cameraArea .picture.on1 {background: url("../images/photo1.png") no-repeat; cursor: pointer;}
.pageOutWrap .contentsOutWrap #act .cameraArea .picture.on2 {background: url("../images/photo2.png") no-repeat; cursor: pointer;}
.pageOutWrap .contentsOutWrap #act .cameraArea .picture.on3 {background: url("../images/photo3.png") no-repeat; cursor: pointer;}

.pageOutWrap .contentsOutWrap #act .zoomIn {position: relative; display: none; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(0,0,0,.75); z-index: 999;}
.pageOutWrap .contentsOutWrap #act .zoomIn .zoomImg {position: relative; width: 496px; height: 616px;}
.pageOutWrap .contentsOutWrap #act .zoomIn .zoomImg.on1 {background: url("../images/zoomImg1.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .zoomIn .zoomImg.on2 {background: url("../images/zoomImg2.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .zoomIn .zoomImg.on3 {background: url("../images/zoomImg3.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .zoomIn .closeBtn {position: absolute; right: -40px; top: 6px; cursor: pointer;user-select: none;-webkit-tap-highlight-color: transparent;}

/*화살표 영역*/
.pageOutWrap .contentsOutWrap #act .arrowArea {position: relative; display: none; background: url("../images/bg2.png")no-repeat; width: 100%; height: 100%; background-size: cover;}
.pageOutWrap .contentsOutWrap #act .arrow {position: absolute; cursor: pointer; user-select: none;-webkit-tap-highlight-color: transparent;}
.pageOutWrap .contentsOutWrap #act .arrow.off {cursor: auto; pointer-events: none;}
.pageOutWrap .contentsOutWrap #act .arrow1 {width: 85px; height: 49px; left: 200px; top: 375px; background: url("../images/btn-arrow-1-1.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .arrow2 {width: 85px; height: 49px; left: 380px; top: 376px; background: url("../images/btn-arrow-1-2.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .arrow3 {width: 88px; height: 44px; left: 290px; top: 524px; background: url("../images/btn-arrow-2-1.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .arrow4 {width: 88px; height: 44px; left: 440px; top: 473px; background: url("../images/btn-arrow-2-2.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .arrow5 {width: 65px; height: 64px; left: 611px; top: 477px; background: url("../images/btn-arrow-3-1.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .arrow6 {width: 60px; height: 60px; left: 613px; top: 601px; background: url("../images/btn-arrow-3-2.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .arrow7 {width: 87px; height: 43px; left: 766px; top: 473px; background: url("../images/btn-arrow-4-1.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .arrow8 {width: 87px; height: 43px; left: 917px; top: 525px; background: url("../images/btn-arrow-4-2.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .arrow9 {width: 79px; height: 51px; left: 817px; top: 361px; background: url("../images/btn-arrow-5-1.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .arrow10 {width: 79px; height: 51px; left: 991px; top: 351px; background: url("../images/btn-arrow-5-2.png") no-repeat;}

.pageOutWrap .contentsOutWrap #act .arrow1.on {background: url("../images/btn-arrow-1-1-done.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .arrow2.on {background: url("../images/btn-arrow-1-2-done.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .arrow3.on {background: url("../images/btn-arrow-2-1-done.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .arrow4.on {background: url("../images/btn-arrow-2-2-done.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .arrow5.on {background: url("../images/btn-arrow-3-1-done.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .arrow6.on {background: url("../images/btn-arrow-3-2-done.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .arrow7.on {background: url("../images/btn-arrow-4-1-done.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .arrow8.on {background: url("../images/btn-arrow-4-2-done.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .arrow9.on {background: url("../images/btn-arrow-5-1-done.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .arrow10.on {background: url("../images/btn-arrow-5-2-done.png") no-repeat;}

.pageOutWrap #act .arrowMove {
    animation-duration: 0.5s;
    animation-iteration-count: 2;
    animation-timing-function: ease-out;
}
.pageOutWrap #act .move1 {
    animation-name: move1;
}
.pageOutWrap #act .move3 {
    animation-name: move3;
}
.pageOutWrap #act .move4 {
    animation-name: move4;
}
.pageOutWrap #act .move5 {
    animation-name: move5;
}
.pageOutWrap #act .move7 {
    animation-name: move7;
}
.pageOutWrap #act .move8 {
    animation-name: move8;
}
.pageOutWrap #act .move8 {
    animation-name: move8;
}
.pageOutWrap #act .move9 {
    animation-name: move9;
}
@keyframes move1 {
    0% {margin-left: -5px;}
    100% {margin-left: 5px;}
}
@keyframes move3 {
    0% {left: 290px; top: 524px;}
    100% {left: 300px; top: 514px;}
}
@keyframes move4 {
    0% {left: 440px; top: 473px;}
    100% {left: 450px; top: 463px;}
}
@keyframes move5 {
    0% {margin-top: -5px;}
    100% {margin-top: 5px;}
}
@keyframes move7 {
    0% {left: 766px; top: 473px;}
    100% {left: 756px; top: 463px;}
}
@keyframes move8 {
    0% {left: 917px; top: 525px;}
    100% {left: 907px; top: 515px;}
}
@keyframes move9 {
    0% {margin-left: 5px;}
    100% {margin-left: -5px;}
}
.pageOutWrap .contentsOutWrap #act .reBtn {display: none; position: absolute; right: 50px; bottom: 60px;}
.pageOutWrap .contentsOutWrap #act .compZoomIn {position: relative; display: none; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(0,0,0,.75); z-index: 99;}
.pageOutWrap .contentsOutWrap #act .compZoomIn .compZoomImg {position: relative; width: 872px; height: 593px;}
.pageOutWrap .contentsOutWrap #act .compZoomIn .compZoomImg.on1 {background: url("../images/img1_1.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .compZoomIn .compZoomImg.on2 {background: url("../images/img1_2.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .compZoomIn .compZoomImg.on3 {background: url("../images/img2_1.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .compZoomIn .compZoomImg.on4 {background: url("../images/img2_2.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .compZoomIn .compZoomImg.on5 {background: url("../images/img3_2.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .compZoomIn .compZoomImg.on6 {background: url("../images/img3_1.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .compZoomIn .compZoomImg.on7 {background: url("../images/img4_2.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .compZoomIn .compZoomImg.on8 {background: url("../images/img4_1.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .compZoomIn .compZoomImg.on9 {background: url("../images/img5_2.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .compZoomIn .compZoomImg.on10 {background: url("../images/img5_1.png") no-repeat;}
.pageOutWrap .contentsOutWrap #act .compZoomIn .compZoomImg .closeBtn {position: absolute; right: -40px; top: 6px; cursor: pointer;user-select: none;-webkit-tap-highlight-color: transparent;}