#act { position: relative; background: url("../images/bg.png")no-repeat; width: 100%; height: 100%; background-size: cover;}
#act .title { position: absolute; top: 59px; left: 77px; font-size: 40px; color: #222; font-family: "NPSfontB"; line-height: 50px; letter-spacing: -2px; }
#act .title:before { content: ''; position: absolute; top: 15px; left: -28px; width: 16px; height: 16px; border-radius: 50%; background: #862eb9; }

#act .pg2 {display: none;}
#act .pg1 .mainObj {position: absolute; left: 503px; top: 44px;}
#act .pg1 .char {position: absolute; right: 183px; bottom: 61px; opacity: 0; transition: opacity 1s; z-index: 0;}
#act .pg .char.on {opacity: 1;}

#act .pg1 .magnifier {display: none;}
#act .pg1 .magnifier .line{position: absolute; left: 364px; top: 133px;}
#act .pg1 .magnifier .btn{position: absolute; width: 70px; height: 70px; cursor: pointer; background: url("../images/btn1.png") no-repeat; z-index: 1; -webkit-tap-highlight-color: transparent;}
#act .pg1 .magnifier .btn:active{background: url("../images/btn1_p.png") no-repeat;}
#act .pg1 .magnifier .btn.on{background: url("../images/btn1_c.png") no-repeat;}
#act .pg1 .magnifier .btn1 {left: 429px; top: 194px;}
#act .pg1 .magnifier .btn2 {left: 369px; top: 292px;}
#act .pg1 .magnifier .btn3 {left: 429px; top: 389px;}
#act .pg1 .magnifier .btn4 {left: 779px; top: 138px;}
#act .pg1 .magnifier .btn5 {left: 859px; top: 190px;}
#act .pg1 .magnifier .btn6 {left: 769px; top: 289px;}
#act .pg1 .nextBtn {display: none; position: absolute; right: 43px; bottom: 55px;}

#act .popWrap {position: absolute; left: 0; top: 0; display: none; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(0,0,0,.7); z-index: 99;}
#act .popWrap .compZoomImg {position: relative; width: 545px; height: 626px;}
#act .popWrap .compZoomImg.on1 {background: url("../images/popImg1.png") no-repeat;}
#act .popWrap .compZoomImg.on2 {background: url("../images/popImg2.png") no-repeat;}
#act .popWrap .compZoomImg.on3 {background: url("../images/popImg3.png") no-repeat;}
#act .popWrap .compZoomImg.on4 {background: url("../images/popImg4.png") no-repeat;}
#act .popWrap .compZoomImg.on5 {background: url("../images/popImg5.png") no-repeat;}
#act .popWrap .compZoomImg.on6 {background: url("../images/popImg6.png") no-repeat;}
#act .popWrap .closeBtn {position: absolute; right: -40px; top: 6px; cursor: pointer; user-select: none;-webkit-tap-highlight-color: transparent;}

#act .pg2 .char {position: absolute; left: 113px; bottom: 61px; opacity: 0; transition: opacity 1s;}
#act .pg2 .slider {display: flex; align-items: center; justify-content: center; position: absolute; left: 500px; top: 40px;opacity: 0; transition: opacity 1s; pointer-events: none;}
#act .pg2 .slider.on {opacity: 1; pointer-events: auto;}
#act .pg2 .slider .objImg {display: none;}
#act .pg2 .slider .objImg:nth-of-type(1) {margin-top:0; margin-left:1px;}
#act .pg2 .slider .objImg:nth-of-type(2) {margin-top:9px; margin-left:16px;}
#act .pg2 .slider .objImg:nth-of-type(3) {margin-top:4px; margin-left:15px;}
#act .pg2 .slider .arrowWrap .arrow {position: absolute; top: 317px; cursor: pointer;}
#act .pg2 .slider .arrowWrap .arrowL {display: none; left: -52px; -webkit-tap-highlight-color: transparent;}
#act .pg2 .slider .arrowWrap .arrowR {right: -55px; -webkit-tap-highlight-color: transparent;}
#act .pg2 .zoomBtn{position: absolute; right: -13px; bottom: 99px; width: 70px; height: 70px; cursor: pointer; background: url("../images/btn1.png") no-repeat; -webkit-tap-highlight-color: transparent;}
#act .pg2 .zoomBtn:active{background: url("../images/btn1_p.png") no-repeat;}
#act .pg2 .reBtn {display: none; position: absolute; right: 43px; bottom: 55px;}

#zoom {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
#zoom.on {display: flex;}
#zoom .zoomImg {display: none;}

/* 감싸는 div */
#zoom .zoomImg {position: relative;width: 1280px;height: 720px;margin: 0 auto;overflow: hidden;}
#zoom .zoomImg .target {position:absolute; top:0; left:0;}
/* 돋보기 */
#zoom .magnifierIcon {
    width: 380px;
    height: 380px;
    position: absolute;
    top: 120px;
    left:440px;
    border-radius: 100%;
    border: 10px solid #fff;
    box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.25);
}
#zoom .magnifierIcon .zoomImg {width: 100%; height:100%; border-radius: 100%; overflow: hidden; }
#zoom .magnifierIcon .zoomImg img {}