/* common_music */

/* https://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome */
/*
* {
	color: #000;
	image-rendering: -webkit-optimize-contrast;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0) scale(1, 1) translate3d(0, 0, 0);
	transform: translateZ(0) scale(1, 1) translate3d(0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}
*/


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

html {
    overflow: auto;
}

body {
    background: #000;
    /* overflow: auto !important; */

    /* ios에서 확대|축소 막기 */
    /* https://kang-ji.tistory.com/entry/IOS-safari에서-확대-축소-막기 */
    touch-action: pan-x pan-y;
}

button {
    outline: 0;
    background: 0 0;
    border: none;
}

i {
    font-style: normal;
    text-align: center;
    font-size: 40px;
}

i.off {
    display: none;
}

.ios .musicPage .mapWrap .mapbox .map,
.android .musicPage .mapWrap .mapbox .map {
    touch-action: manipulation;
}

/* ---------------------------------------
 * Custom
 * --------------------------------------- */
.posa {
    position: absolute;
}

.tir {}

.tir.off {
    text-indent: -9999px;
    position: absolute;
    top: -999px;
}

.posa {
    position: absolute;
}

.dis,
.evtN,
.aEvtN,
.aEvtN * {
    pointer-events: none !important;
}

/* clear */
.clear:after {
    content: '';
    clear: both;
    display: block;
}

.blind {
    position: absolute !important;
    overflow: hidden;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    line-height: 0 !important;
    border: 0;
}

.blind,
#match-media:before {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}


.blk {
    display: block !important;
}

.none {
    display: none !important;
}

.dis {
    pointer-events: none !important;
}

.center {
    text-align: center;
}

.mc {
    left: 0px;
    top: 0px;
    display: block;
    position: absolute;
    opacity: 1.0;
    transform-origin: 0 0;
    background-repeat: no-repeat;
    background-position: 0 0;
}

.box {
    width: 100px;
    height: 100px;
    position: absolute;
    background-color: rgba(255, 0, 255, 0.5);
    user-select: none;
    z-index: 999;
    line-height: 100px;
    font-size: 20px;
    text-align: center;
}

.box.resetAll {
    top: auto;
    bottom: 0px;
    cursor: pointer;
    pointer-events: all;
}

.box.cursor {
    cursor: pointer;
}

.circle {
    border-radius: 50px;
}

h1.guide {
    line-height: 1080px;
    text-align: center;
    font-size: 100px;
}

.imgCenter {
    display: flex;
}

.imgCenter img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

/* ---------------------------------------
 * Contents
 * --------------------------------------- */
#container {}

#wrap {
    height: 1080px;
    background-color: rgba(0, 0, 0, 1) !important;
    overflow: visible;
}

#wrap [overflow-type="visible"] {
    overflow: visible !important;
}

/* .contents -------------------------------------------------------------*/
.contentsWrap {
    position: relative;
    width: 100%;
    height: 100%;
}



/* 상단 contents 전환 버튼 -------------------------------------------------------------*/

.setContent {
    position: absolute;
    top: 27px;
    right: 350px;
}

.setContent li {
    float: left;
    position: relative;
    width: 150px;
    height: 80px;
    cursor: pointer;
}

.setContent li {
    margin-left: 10px;
}

.setContent li.on {
    pointer-events: none;
}

.setContent li:first-child {
    margin-left: 0;
}

.setContent::after {
    content: '';
    display: block;
    clear: both;
}


/* ---------------------------------------
 * 일반 페이지
 * --------------------------------------- */


#container {
    background: none;
}

.contents {
    display: none;
    overflow: visible;
}


/* 클릭 페이지 */
.contents.clickPage {
    width: 100%;
    height: 100%;
}

/* 음악 페이지 */
.musicPage {
    left: 0px;
    top: 0px;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* background: url('../../common/images/bg_temp.png') center bottom no-repeat;*/
    /* background: url(../../images/04/music_bg1.png) center bottom no-repeat; */
}

/* 로딩중 */
.loading_qr,
.musicPage.music_loading {
    opacity: 0.01 !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    z-index: -999 !important;
    transform: scale(0.01) !important;
}

/* 스크롤페이지 */
.scrollbox {
    width: 100%;
    height: 835px;
    position: absolute;
    left: 0px;
    top: 150px;
    overflow-y: auto;
}

.scrollbox.noScroll {}

.scrollbox .scrollpage {
    width: 100%;
    position: relative;
    left: 0px;
    top: 0px;
}


/* ---------------------------------------
 * CSS Motion
 * --------------------------------------- */

/* css3 motion sharpen */
.sharpen,
.sharpen>* {
    image-rendering: -webkit-optimize-contrast;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* -webkit-filter: blur(0);
    filter: blur(0); */
    -webkit-transform: translateZ(0) scale(1, 1) translate3d(0, 0, 0);
    transform: translateZ(0) scale(1, 1) translate3d(0, 0, 0);
    /* transform: rotate(0.001deg); */
}

/*
// use
{
    animation-duration: 0.7s;
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
*/

.opacity101 {
    opacity: 1;
    animation: opacity101 1s infinite both;
}

@keyframes opacity101 {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.twinkle_3 {
    animation: twinkle 2s 3;
}

@keyframes twinkle {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.glitch {
    animation: glitch .3s linear infinite;
}

@keyframes glitch {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

.scale_105 {
    transition-property: transform;
    animation-name: scale_change105;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes scale_change105 {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.05);
    }
}

.scale_110 {
    transition-property: transform;
    animation-name: scale_change110;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes scale_change110 {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}


.clockwise {
    transition-property: transform;
    animation-name: clockwise_change;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes clockwise_change {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-10deg);
    }
}

.rotate_-30 {
    transition-property: transform;
    animation-name: rotate_change_-30;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes rotate_change_-30 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-30deg);
    }
}


.rotate_clockwise {
    transition-property: rotate;
    animation-name: rotate_change_clockwise;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes rotate_change_clockwise {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.rotate_anticlockwise {
    transition-property: rotate;
    animation-name: rotate_change_anticlockwise;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes rotate_change_anticlockwise {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(1deg);
    }
}



.cloud_y5 {
    transition-property: transform;
    animation-name: cloud_change_y5;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes cloud_change_y5 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(5px);
    }
}

.move_y10,
.cloud_y10 {
    transition-property: transform;
    animation-name: cloud_change_y10;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes cloud_change_y10 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(10px);
    }
}


.move_y5 {
    transition-property: transform;
    animation-name: move_change_y5;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes move_change_y5 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(5px);
    }
}

.move_y-5 {
    transition-property: transform;
    animation-name: move_change_y-5;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes move_change_y-5 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-5px);
    }
}



.move_x-10 {
    transition-property: transform;
    animation-name: move_change_x-10;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes move_change_x-10 {
    from {
        transform: translateX(0px);
    }

    to {
        transform: translateX(-10px);
    }
}

@keyframes spinner {
    0% {
        transform: rotate(-9deg) rotateY(0);
    }

    100% {
        transform: rotate(-9deg) rotateY(360deg);
    }
}

@keyframes op {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes hand {
    0% {
        opacity: 1;
        top: -126.42px;
        margin-left: 69.265px;
    }

    50% {
        opacity: 1;
        top: -94.92px;
        margin-left: 37.765px;
    }

    100% {
        opacity: 1;
        top: -126.42px;
        margin-left: 69.265px;
    }
}

@keyframes check {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* https://codepen.io/oaviv/pen/EydZOq/ */
.metronome-2 {
    /* animation: metronome 0.5s ease-in-out infinite; */
    transform-origin: center bottom;
    transition-property: transform;
    animation-name: move_metronome-2;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    /* animation-play-state: paused; */
}

@keyframes move_metronome-2 {

    0%,
    100% {
        transform: rotate(2deg);
    }

    50% {
        transform: rotate(-2deg);
    }
}


/* ---------------------------------------
 * Tester
 * --------------------------------------- */

.tt {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    /* display: none; */
    opacity: 0.5;
    pointer-events: none;
    background-position-x: 0px !important;
    background-position-y: 0px !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    z-index: 9999;
}

/* #wrap.tt::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    opacity: 0;
    pointer-events: none;
    background-position-x: 0px !important;
    background-position-y: 0px !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    z-index: 9999;
} */

.version {
    position: absolute;
    left: 100px;
    top: 300px;
    font-size: 30px;
    font-weight: bolder;
    color: #F00;
    z-index: 9999;
}


/* 테스터 */
.tt.blk~.musicPage,
.tt.blk~.gamePage,
.tt.blk~.contents {
    opacity: 0.7;
}

.test,
.test1 {
    background-color: rgba(0, 0, 0, 0.5);
}

.test2 {
    background-color: rgba(255, 0, 255, 0.3);
}


/* hit영역 확인용 배경 */
#wrap.test2 .setContent li,
#wrap.test2 .setContent.music li .innerCtrl>div,
.test2 .contents.writePage textarea#Textbox,
.test2 .contents.writePage .tobtn,
.test2 .contents.toPage .tobtn,
.test2 .contents .btnWrap .btnSound,
.test2 .contents .btnWrap .btnPop,
.test2 .contents.clickPage .objWrap .obj,
.test2 .contents.clickPage .textWrap .textarea,
.test2 .contents .clickContent .clickItem,
.test2 .contents .connect_btn,
.test2 .contents .cardGame .front,
.test2 .contents .cardGame .back,
.test2 .contents .objWrap .front,
.test2 .contents .objWrap .back,
#wrap.test2 .btnPop,
#wrap.test2 .btnPopup,
#wrap.test2 .solpop .btnClose,
.test2 .notesWrap.zoom,
.test2 .mapZoom .btn,
.test2 .colorPicker ul>li,
.test2 .gamePage .finger .btnClick,
.test2 .pageWrap .prev,
.test2 .pageWrap .next,
.test2 .pageWrap .pageing,
.test2 .pageWrap .pageing .dot,
.test2 .pageWrap .closeBtn,
.test2 .btn[move-num],
.test2 .pop .clickItem,
.test2 .btnToRead,
.test2 .placeholder,
.test2 .exWrap,
.test2 .exWrap .closeBtn,
.test2 .comboContent .combo,
.test2 button,
.test2 input,
.test2 textarea,
.test2 .sliding,
.test2 .sliding .btn,
.test2 .sliding2,
.test2 .sliding2 .openCon .closeBtn,
.test2 .test,
.test2 .btn,
.test2 .contents .btn[data-num],
.test2 .clickContent .clickItem,
.test2 .clickContent.checkbox .clickItem,
.test2 .clickContent.checkbox .clickItem:before,
.test2 .clickContent.checkbox .clickItem:after,
.test2 .aboutContent .aboutItem,
.test2 .aboutContent .aboutItem:before,
.test2 .linkContent .linkItem .linkArea,
.test2 .linkContent .linkItem .linkBtn,
.test2 .tabWrap .tab_btn,
.test2 .dragScroll .jog,
.test2 .quizCon .answer-wrap,
.test2 .quizCon .btn-ox,
.test2 .scrollbox,
.test2 .scrollbox .scrollpage,
.test2 .dropArea .dropCode,
.test2 .dragArea .dragItem,
.test2 .popupBtn,
.test2 .popBtn,
.test2 .pop .clickItem,
.test2 .popup .clickItem,
.test2 .pop .closeBtn,
.test2 .popup .closeBtn,
.test2 .pop .close {
    /* background-color: rgba(0, 0, 0, 0.5) !important; */
    /* background-color: rgba(255, 0, 255, 0.5) !important; */
    /* background-color: rgba(255, 237, 96, 0.5) !important; */
    /* background-color: rgba(129, 193, 71, 0.5) !important; */
    /* background-color: rgba(10, 55, 17, 0.5) !important; */
    /* outline: 1px solid green !important; */
    outline: 1px solid red !important;
}

.test2 [data-quiz="ansSeqChoice"] .choice,
.test2 [data-quiz="ansSeqChoice"] .resultWrap .result,
.test2 [data-quiz="ansSeqChoiceTp2"] .choice,
.test2 [data-quiz="ansSeqChoiceTp2"] .resultWrap .result,
.test2 [data-quiz] svg,
.test2 [data-quiz] .leftLine .clickArea .dot,
.test2 [data-quiz] .rightLine .r_item .dot {
    /* outline: 1px solid green !important; */
    outline: 1px solid red !important;
}

#wrap.test2 .setContent li.act,
#wrap.test2 .setContent li.on,
.test2 .tabWrap .tab_btn.active {
    outline: 3px solid green !important;
}


#wrap.test2 [data-quiz] svg,
#wrap.test2 [data-quiz] .leftLine .clickArea .dot,
#wrap.test2 [data-quiz] .rightLine .r_item .dot {
    /* outline: 1px solid green !important; */
    outline: 1px solid red;
}


#wrap.test2 {
    background-color: rgba(255, 255, 255, 1) !important;
}

.test2 .mapbox .map::after {
    background: rgba(255, 0, 0, 0.5);
    width: 100px;
    height: 100px;
    position: absolute;
    box-sizing: content-box;
    left: 600px;
    top: 100px;
    display: block;
    content: '';
    /*  outline: 50px solid black; */
    border-bottom: 50px solid black;
    border-top: 50px solid blue;
}

.test2 .musicPage,
.test2 .musicPage .mapWrap .mapbox {
    /* overflow: visible; */
}

/* [data-chg-ado="sing_html_follow"],
[data-chg-ado="syllable_html"],
[data-chg-ado="syllable_html_follow"],
[data-chg-ado="sing_html_mr2"],
[data-chg-ado="vocal_updown1"] {
    pointer-events: none !important;
} */

/* ---------------------------------------
 * Tester - Music
 * --------------------------------------- */

.testWrap {
    left: 0px;
    top: 0px;
    position: absolute;
    pointer-events: none;
    z-index: 999;
}

.testWrap ul {
    left: 0px;
    top: 0px;
    position: absolute;
    width: 230px;
    background-color: rgba(153, 154, 156, 0.7);
}

.testWrap li {
    position: relative;
    margin: 0px 0px 5px 0px;
    width: 100%;
    height: 20px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 0, 0, 1);
    color: rgba(255, 255, 0, 1.0);
    font-size: 16px;
    font-weight: 900;
    text-align: left;
    line-height: 20px;
    font-family: 'goyang' !important;
    letter-spacing: 0.02em;
}

.testWrap.ready ul {
    position: relative;
    top: auto;
}

.testWrap.ready li {}


.testWrap.ready ul.interlude {
    margin-top: 10px;
}

.testWrap.ready ul.interlude li {}



.testWrap.waypoint {
    left: auto;
    top: 0px;
    right: 420px;
}

.testWrap.waypoint ul {
    width: 310px;
    outline: 5px solid black;
    /* box-shadow: 5px 5px 5px 5px red; */
}

.testWrap.waypoint li.th {
    /*font-size: 14px;*/
    text-align: center;
}

.testWrap li.start {
    color: rgba(252, 83, 18, 1.0);
    margin-bottom: 20px;
}

.testWrap li.title {
    color: rgba(255, 255, 255, 1);
    border: none;
}

.testWrap li.page01 {
    color: rgba(252, 255, 0, 1.0);
}

.testWrap li.page02 {
    color: rgba(186, 252, 18, 1.0);
}

.testWrap li.page03 {
    color: rgba(18, 187, 252, 1.0);
}



.testWrap.waypoint li {
    display: flex;
    justify-content: start;
    align-items: center;
}

.testWrap.waypoint li.title {
    justify-content: center;
}

.testWrap.waypoint li.interlude {
    color: #000 !important;
}

.testWrap.waypoint li span {
    font-size: inherit;
    font-family: inherit;
    color: inherit;
}

.testWrap.waypoint li span:nth-of-type(1) {
    width: 35px;
    text-align: left;
}

.testWrap.waypoint li span:nth-of-type(2) {
    width: 120px;
}

.testWrap.waypoint li span:nth-of-type(3) {
    width: 20px;
    text-align: center;
}

.testWrap.waypoint li span:nth-of-type(4) {
    /* width: 120px; */
    flex: 1;
}





.testWrap.waypoint2 {
    left: 1040px;
}

.testWrap.waypoint2 ul {
    width: 440px;
    outline: 5px solid black;
    /* box-shadow: 5px 5px 5px 5px red; */
}

.testWrap.waypoint2 li {
    display: flex;
    justify-content: start;
    align-items: center;
}

.testWrap.waypoint2 li.th {
    font-size: 14px;
    text-align: center;
}

.testWrap.waypoint2 li.title {
    justify-content: center;
}

.testWrap.waypoint2 li.interlude {
    color: #000 !important;
}

.testWrap.waypoint2 li span {
    font-size: inherit;
    font-family: inherit;
    color: inherit;
}

.testWrap.waypoint2 li span:nth-of-type(1) {
    width: 35px;
    text-align: left;
}

.testWrap.waypoint2 li span:nth-of-type(2) {
    width: 140px;
}

.testWrap.waypoint2 li span:nth-of-type(3) {
    width: 140px;
    /* text-align: center; */
}

.testWrap.waypoint2 li span:nth-of-type(4) {
    /* width: 120px; */
    flex: 1;
}







#wrap .btnTest {
    top: auto;
    bottom: 0px;
    z-index: 999;
    /* display: flex; */
    display: none;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    line-height: 30px;
}

#wrap.test2 .btnTest {
    display: flex;
}

#wrap .btnTest b {
    color: #000;
}

/*
.tit-1{
    color:#ea5442;
    font-size:177.118px;
    font-weight:700;
    font-style:italic;
    font-family:'Noto Sans KR','맑은 고딕','Malgun Gothic',sans-serif;
    -webkit-text-stroke:2.964px #000;
    text-shadow:3.952px 1.976px 3.952px rgba(0,0,0,0.5);
    top:196.688px;
    margin-left:-133.152px;
    animation:spinner 1s linear;
    animation-fill-mode:both;
    transform:rotate(-9deg);
    transform-style:preserve-3d;
    perspective:50px;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective:50px;
}
 */