/* 음악 맵 축소 확대*/
#wrap.music .mapZoom {
    /* display: none; */
}

/* map 구성요소들의 좌표 */
/* (1920 - 1788) / 2 */
/* 그냥 수치값 */
#wrap.music .mapWrap {
    /*
    left: 40px;
    top: 110px;
    position: absolute;
    width: 1860px !important;
    height: 876px !important;
    border-radius: 16px;
    overflow: hidden;
    */
    /* 세로 10px 가로 20px씩 줄임 */
    /* left: 70px;
    top: 124px;
    position: absolute;
    width: 1760px !important;
    height: 916px !important; */

    /* 2024-03-18 10:00:40 위치기준이 확대 버전 */
    left: 83px;
    top: 146px;
    position: absolute;
    width: 1760px !important;
    height: 890px !important;
}


/* = .mapWrap */
#wrap.music .notesWrap.zoom {
    overflow: visible;
}

#wrap.music .notesWrap.zoom.map_draggable {
    overflow: hidden;
}


/* = .map */
#wrap.music .notesWrap .notesPosition {}


/* 맵 조절 버튼 */
#wrap.music .mapZoom .mapbtn {
    left: -10px;
    top: 10px;
    position: absolute;
    display: none;
    /* width: 267px; */
    /* height: 68px; */
    /* background: url('../../images/music/zoom/mapcontrol.png') center center no-repeat; */
    /* z-index: 2; */
}

#wrap.music .mapZoom .mapbtn div {
    left: 0px;
    top: 0px;
    position: absolute;
    line-height: 84px;
    text-align: center;
    font-family: 'goyang';
    font-weight: 700;
    font-size: 20px;
    color: #000;
    user-select: none;
}

#wrap.music .mapZoom .mapbtn .text {
    left: 82px;
    top: 100px;
    display: none;
}

.test2 .mapZoom .mapbtn .text {
    display: block !important;
}

#wrap.music .mapZoom .mapbtn .btn {
    background: url('../../images/music/zoom/mapcontrol_plus.png') 0 0 no-repeat;
    left: 10px;
    width: 37px;
    height: 37px;
    cursor: pointer;
}

#wrap.music .mapZoom .mapbtn .btn.plus {
    top: 42px;
}

#wrap.music .mapZoom .mapbtn .btn.minus {
    background: url(../../images/music/zoom/mapcontrol_minus.png) 0 0 no-repeat;
    top: 318px;
}


#wrap.music .mapWrap .mapbox {
    background: #fff;
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0px;
    left: 0px;
    top: 0px;
    border: none;
}

.test2 .mapWrap .mapbox {
    outline: 1px solid black !important;
}

#wrap.music .mapWrap .mapbox .map {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: top center;
    transform: scale(1.0) translate(0px, 0px);
    transition: transform 0.2s ease-in-out;
}

/* 2024-03-18 10:00:40 위치기준이 확대 버전 */
/* #wrap.music .mapZoom:not(.noScroll) .mapWrap .mapbox .map {
    background-position: center 0 !important;
} */

.test2 .mapWrap .mapbox .map {
    background-color: rgba(255, 0, 255, 0.3) !important;
}

/* 터치를 사용한 스크롤, 핀치 줌만 허용하고 그 외 비표준 동작 (더블 탭으로 확대 등) 불허용 */
/* .ios #wrap.music .mapWrap .mapbox .map,
.android #wrap.music .mapWrap .mapbox .map {
    touch-action: manipulation;
} */

#wrap.music .mapWrap .mapbox .map.draggable {
    cursor: pointer;
}




/* 실제 확대/축소 대상 */
#wrap.music .map1 .map {
    /* background: url('../../images/music/zoom/fullimg.png') center center no-repeat; */
    /* background-size: 100%; */
}

#wrap.music .map2 .map.svg img {
    pointer-events: none;

    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;

    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

/* 내부 페이징 */
#wrap.music .map1 .map .mapPageWrap {}

#wrap.music .map1 .map .mapPage {
    /* background: url('../images/01/bg_musicsheet.svg') center center no-repeat; */
    background-position: 0px 0px;
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
    border: none;
    transform-origin: 0px 0px;
    transform: scale(1);
}

#wrap.music .map1 .map .mapPage:not(.mapPage1) {
    display: none;
}

/* 1배 확대 일경우 */
#wrap.music .map1 .map.min_init {
    overflow: visible;
}

#wrap.music .map1 .map.min_init .mapPage {
    transform-origin: center;
    transform: scale(1.0);
}








/* 확대 축소 스크롤바 */
#wrap.music .mapControl {
    position: absolute;
    left: 0px;
    top: 132px;
    z-index: 1;
}

#wrap.music .mapControl .bg {
    background: url('../../images/music/zoom/mapcontrol.png') 0 0 no-repeat;
    width: 57px;
    height: 397px;
    position: absolute;
    left: 0;
    top: 0;
}

#wrap.music .mapControl .c-con,
#wrap.music .mapControl .c-con.ver.tmax {
    left: 0px;
    top: 0px;
}


#wrap.music .mapControl .c-con .progress {
    left: 0;
    top: 100px;
    position: absolute;
    width: 400px;
    height: 10px;
    /* background-color: #4D4D4D; */
    border-radius: 0px;
    cursor: pointer;
}

#wrap.music .mapControl .c-con.ver.tmax .progress {
    left: 26px;
    top: 114px;
    width: 6px;
    height: 170px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 3px;
}

.test2 .mapControl .c-con.ver.tmax .progress {
    /* outline: 1px solid black; */
}

#wrap.music .mapControl .c-con.ver.tmax .progress .bg {
    background: #59419e 0 0 no-repeat;
    width: 12px;
    height: 141px;
    position: absolute;
    display: none;
    left: 0px;
    top: -15px;
    border-radius: 6px;
    pointer-events: none;
}

#wrap.music .mapControl .c-con .wraptxt span {
    position: absolute;
    display: block;
    display: none;
    user-select: none;
    font-size: 20px;
}

#wrap.music .mapControl .c-con .wraptxt span.max {
    right: 0px;
    top: 15px;
}

#wrap.music .mapControl .c-con .wraptxt span.min {
    left: 0px;
    top: 15px;
}

#wrap.music .mapControl .c-con.ver.tmax .wraptxt span.max {
    left: 45px;
    right: auto;
    top: -68px;
    bottom: auto;
}

#wrap.music .mapControl .c-con.ver.tmax .wraptxt span.min {
    left: 45px;
    right: auto;
    top: auto;
    bottom: -160px;
}




#wrap.music .mapControl .c-con .progress span.ctrl {
    left: 0;
    right: auto;
    top: 0;
    bottom: auto;
    display: block;
    position: absolute;
    width: 0%;
    height: 100%;
    background: transparent;
    border-radius: 0px;
    user-select: none;
}

#wrap.music .mapControl .c-con.ver.tmax .progress span.ctrl {
    left: 0;
    right: auto;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 0;
    /* pointer-events: none; */
}



#wrap.music .mapControl .c-con .progress span.ctrl .bar {
    background: url('../../images/music/zoom/mapcontrol_jog.png') 0 0 no-repeat;
    width: 31px;
    height: 57px;
    position: absolute;
    left: auto;
    right: -31px;
    top: -28px;
    bottom: auto;
    display: block;
    /* opacity: 0.5; */
}

#wrap.music .mapControl .c-con.ver.tmax .progress span.ctrl .bar {
    left: auto;
    right: -12px;
    top: -30px;
    bottom: auto;
}

.test2 .mapControl .c-con.ver.tmax .progress span.ctrl .bar::after {
    width: 200px;
    position: absolute;
    top: 50%;
    content: '';
    outline: 1px solid black;
    pointer-events: none;
    transform: translate(-50%, -50%);
}


.test2 .mapControl .c-con.ver.tmax .progress span.ctrl .bar {
    opacity: 0.5 !important;
}





#wrap.music .mapControl .c-con .time {
    left: 600px;
    top: 90px;
    position: absolute;
    display: none;
    width: 120px;
    pointer-events: none;
}

#wrap.music .mapControl .c-con .time .currentTime {
    width: 500px;
    user-select: none;
    font-size: 36px;
    font-weight: bold;
    color: #cc0000;
}

#wrap.music .mapControl .c-con.ver .time {
    left: 100px;
}



.test2 .mapControl .c-con .time {
    display: block !important;
}

.test2 .mapControl .c-con .wraptxt span {
    display: block !important;
    line-height: 20px !important;
    pointer-events: none !important;
}





/* y축 스크롤바 */
.yControl {
    position: absolute;
    left: 1865px;
    top: 130px;
    top: 220px;
    z-index: 1;
}

.yControl.dis {
    display: none;
    pointer-events: none;
}

.test2 .yControl.dis {
    /* display: block !important; */
    /* opacity: 0.5 !important; */
    /* pointer-events: auto !important; */
}


.yControl>.bg {
    /* background: url('../../images/music/zoom/ycontrol.png') 0 0 no-repeat; */
    background-color: #d3d3d7;
    width: 10px;
    height: 704px;
    position: absolute;
    display: none;
    left: -10px;
    top: 10px;
    border-radius: 5px;
}

.yControl .c-con,
.yControl .c-con.ver.bmax {
    left: 0px;
    top: 0px;
}


.yControl .c-con .progress {
    left: 0;
    top: 100px;
    position: absolute;
    width: 400px;
    height: 10px;
    /* background-color: #4D4D4D; */
    border-radius: 0px;
    cursor: pointer;
}

.yControl .c-con.ver.bmax .progress {
    left: 0px;
    top: 0px;
    width: 10px;
    height: 705px;
    background-color: #d3d3d7;
    /* background: transparent; */
    border-radius: 5px;
}

.yControl .c-con.ver.bmax .text {
    top: 300px !important;
    left: -60px !important;
}

.yControl .c-con .wraptxt span {
    position: absolute;
    display: block;
    display: none;
    user-select: none;
    font-size: 20px;
}

.yControl .c-con .wraptxt span.max {
    right: 0px;
    top: 15px;
}

.yControl .c-con .wraptxt span.min {
    left: 0px;
    top: 15px;
}

.yControl .c-con.ver.bmax .wraptxt span.max {
    left: -55px;
    right: auto;
    top: auto;
    bottom: -690px;
}

.yControl .c-con.ver.bmax .wraptxt span.min {
    left: -55px;
    right: auto;
    top: 0px;
    bottom: auto;
}




.yControl .c-con .progress span.ctrl {
    left: 0;
    right: auto;
    top: 0;
    bottom: auto;
    display: block;
    position: absolute;
    width: 0%;
    height: 100%;
    background: transparent;
    border-radius: 0px;
    user-select: none;
}

.yControl .c-con.ver.bmax .progress span.ctrl {
    left: 0;
    right: auto;
    top: 0;
    bottom: auto;
    width: 100%;
    height: 0;
    /* pointer-events: none; */
}


.yControl .c-con .progress span.ctrl .bar {
    background: url('../../images/music/zoom/ycontrol_jog.png') 0 0 no-repeat;
    height: 180px;
    width: 26px;
    position: absolute;
    left: auto;
    right: -31px;
    top: -28px;
    bottom: auto;
    display: block;
}

.yControl .c-con.ver.bmax .progress span.ctrl .bar {
    left: auto;
    right: -8px;
    top: auto;
    bottom: -90px;
}


.yControl.dis>.bg {
    background: #dddddd;
}

.yControl.dis .c-con .progress span.ctrl .bar {
    background: url('../../images/music/zoom/ycontrol_jog_dis.png') 0 0 no-repeat;
}

.test2 .yControl .c-con.ver.bmax .progress span.ctrl .bar {
    opacity: 0.5;
}

.test2 .yControl .c-con.ver.bmax .progress span.ctrl .bar::after {
    width: 200px;
    position: absolute;
    top: 50%;
    content: '';
    outline: 1px solid black;
    pointer-events: none;
    transform: translate(-50%, -50%);
}




.yControl .c-con .time {
    left: 600px;
    top: 90px;
    position: absolute;
    display: none;
    width: 120px;
    pointer-events: none;
}

.yControl .c-con .time .currentTime {
    width: 500px;
    user-select: none;
    font-size: 36px;
    font-weight: bold;
    color: #cc0000;
}

.yControl .c-con.ver .time {
    left: 100px;
}



.test2 .yControl .c-con .time {
    display: block;
}

.test2 .yControl .c-con .wraptxt span {
    display: block;
    line-height: 20px;
    pointer-events: none;
}

.test2 .yControl .c-con.ver.bmax .progress {
    outline: 1px solid black;
}




/*
영역안에서 확대만 가능
scrollbar   감춤
swipe       안됨
휠          안됨
*/
#wrap.music .mapZoom.noScroll .mapWrap .mapbox .map {
    cursor: auto;
    pointer-events: none;
    transform-origin: center center;
}

#wrap.music .mapZoom.noScroll .yControl {
    display: none !important;
}



/* .map 네비게이션 */
#wrap.music .mapPageNavi {
    background: url('../../images/music/zoom/page_navi_bg.png') 0 0 no-repeat;
    width: 157px;
    height: 37px;
    position: absolute;
    left: 881px;
    top: 1029px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: left;
    padding: 0 4px 0 4px;
}

/* 1페이지 */
#wrap.music .mapPageNavi.single {
    display: none;
}

#wrap.music .mapPageNavi .prev,
#wrap.music .mapPageNavi .next {
    width: 30px;
    height: 30px;
    margin: 0 0 0 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-indent: -9999px;
    color: transparent;
}

#wrap.music .mapPageNavi .prev {
    background: url('../../images/music/zoom/page_navi_prev.png') 3px 3px no-repeat;
    /* width: 100px; */
    /* height: 30px; */
}

#wrap.music .mapPageNavi .next {
    background: url('../../images/music/zoom/page_navi_next.png') 7px 3px no-repeat;
    /* width: 100px; */
}

#wrap.music .mapPageNavi .prev.dis {
    background: url('../../images/music/zoom/page_navi_prev_dis.png') 5px 5px no-repeat;
    pointer-events: none;
}

#wrap.music .mapPageNavi .next.dis {
    background: url('../../images/music/zoom/page_navi_next_dis.png') 9px 5px no-repeat;
    pointer-events: none;
}

.test2 .mapPageNavi .prev,
.test2 .mapPageNavi .next {
    outline: 1px solid black;
}


#wrap.music .mapPageNavi .paging {
    width: 98px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    margin: 5px 0 0 0;
}

#wrap.music .mapPageNavi .paging>span {
    display: inline-block;
    font-size: 21px;
    line-height: 35px;
    font-family: 'Recipekorea';
}

#wrap.music .mapPageNavi .paging .now {
    width: 28px;
    color: #fff;
    text-align: right;
    /* filter: drop-shadow(1px 1px 1px #828282); */
    filter: drop-shadow(1px 1px 1px #80828282);
    /* text-shadow: 0 0 black; */
}

#wrap.music .mapPageNavi .paging .total {
    width: 30px;
    text-align: left;
    color: #adaaa6;
}

#wrap.music .mapPageNavi .paging .sign {
    width: 13px;
    margin: 0 5px 0 7px;
    color: #adaaa6;
}



#wrap.music .mapPageNavi .bar {
    background: #fff 0 0 no-repeat;
    width: 1px;
    height: 29px;
    opacity: 0.3;
    margin: 0 0px 0 4px;
}

#wrap.music .mapPageNavi .bar2 {
    margin: 0 4px 0px 0;
}