@charset "utf-8";

@import url("main.css");
@import url("piano.css");
@import url("kalimba.css");
@import url("xylophone.css");
@import url("recorder.css");
@import url("ocarina.css");
@import url("drum.css");
@import url("cajon.css");
@import url("jang_gu.css");
@import url("danso.css");
@import url("sogeum.css");
@import url("rhythm.css");
@import url("kor_music.css");
@import url("metronome.css");

/* 가상악기앱 메인 화면 */
html {
   background-image: url(../images/common/bg.jpg);
}
body * {
    -webkit-user-select: none;  /* Chrome, Safari, Opera */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Standard syntax */
   /* overflow: hidden; */
}
body,html{
   height:100%; min-height:100%; overflow:hidden !important; touch-action:none;
   position: fixed;
}
input,
textarea {
  -moz-user-select: auto;
  -webkit-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

/* 가상악기앱 메인 화면 */
#container {
   /* height: 89%; */
   height: 1080px;
   width: 1920px;
   background: transparent;
   /* position: absolute; */
   /* left: 0px; */
   top: 0;
   right: 0px;
   /* margin: 0 auto; */
   /* box-sizing: border-box; */
   /* padding: 0; */
}


#content {
   position: absolute;
   top: 0px;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   /* padding: 20px 110px; */
   box-sizing: border-box;
   padding: 0;
}

#section {
   flex: 1 1 auto;
   position: relative;
   /* overflow-y: unset; */
   /* overflow-x: unset; */
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   left: 0px;
   background: transparent;
   /* padding: 20px; */
   /* border: 2px solid red; */
   /* transform: scale(0.85); */
   position: absolute;
   transform-origin: center top;
}
#section.main {
   background: transparent;
}

.close {
   background: url(../images/common/btn_close.png);
   background-size: 100% 100%;
   position: absolute;
   width: 78px;
   height: 72px;
   right: 42px;
   top: 42px;
   cursor: pointer;
   z-index: 50;
}

.titleArea h1 {
   color: #222222;
   font-size: 50px;
   font-family: 'NanumSquareRoundEB';
   background: linear-gradient(to right, #d4ddff, #dbe6ef);
   width: fit-content;
   border-radius: 25px;
   padding: 20px 50px;
   /* position: absolute; */
   top: 40px;
   left: 80px;
   /* margin: 0; */
   line-height: 50px;
   display: inline-block;
   vertical-align: middle;
   margin: 10px 24px 10px 40px;
}


@media (hover: hover) {


   .btn_metro_play:hover {
      background-image: url(../images/common/btn_play_on.png);
   }

   .btn_metro_play.on:hover {
      background-image: url(../images/common/btn_stop_on.png);
   }
   .metronome.on .plus:hover {
      background-image: url(../images/common/btn_zoomIn_on.png);
   }
   .metronome.on .minus:hover {
      background-image: url(../images/common/btn_zoomOut_on.png);
   }
   /* .metronome:not(.mini) .btnPlay:hover {
      background-image: url(../images/common/btn_play_on.png);
   }
   .metronome:not(.mini) .btnPlay.on:hover {
      background-image: url(../images/common/btn_stop_on.png);
   } */

   .metronome.mini .btnPlay:hover {
      background-color: #6390b7;
      box-shadow: inset 0px 2px 6px -2px #c3ddff;
   }

   .btnNote:hover,
   .btnKb:hover,
   .btnNum:hover,
   .btnSurface:hover,
   .btnKorNote:hover {
      -webkit-transform: scale(1.01);
      -moz-transform: scale(1.01);
      transform: scale(1.01);
   }
}



/* 볼륨바 */
.volumeWrap {
   position: absolute;
   top: 42px;
   right: 141px;
   width: 315px;
   background: #e0e0e0;
   border-radius: 25px;
   border: 2px solid #d8d8d8;
   box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.15), inset 0px 3px 2px -1px #ebebeb;
   padding: 6px 30px;
   height: 50px;
}

.volumeBar {
   width: 265px;
   height: 8px;
   /* background: rgba(255, 255, 255, 0.5); */
   background-color: #ffffff;
   border-radius: 15px;
   -webkit-transition: width 0.1s;
   -moz-transition: width 0.1s;
   transition: width 0.1s;
   margin-left: 10px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   right: 15px;
}
.volumeWrap > p {
   font-size: 24px;
   font-family: 'NanumSquareRoundEB';
   line-height: 51px;
   color: #4a5056;
}

div.vseeker {
   position: absolute;
   display: block;
   background-color: #f87a27;
   height: 8px;
   /* width: 0%; */
   width: 50%;
   top: 0;
   left: 0px;
   border-radius: 15px 0 0 15px;
}

.volumeSeekBtn {
   position: absolute;
   /* left: 0px; */
   left: 50%;
   width: 22px;
   height: 22px;
   margin-left: 0;
   z-index: 1;
   cursor: pointer;
   background-color: #ff6a07;
   border: 2px solid #f36100;
   box-shadow: inset 0px 3px 2px -1px #fe8e0a;
   border-radius: 50%;
   top: 50% !important;
   transform: translateY(-50%) translateX(-50%);
   -webkit-transform: translateY(-50%) translateX(-50%);
}

/* 볼륨바 */



/* 미니 메트로놈 */
.titleArea .metronome.mini {
   position: absolute;
   background: #e0e0e0;
   border-radius: 25px;
   border: 2px solid #d8d8d8;
   box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.15), inset 0px 3px 2px -1px #ebebeb;
   padding: 6px 30px;
   height: 50px;
   top: 42px;
   right: 536px;
   /* width: 130px; */
   padding: 6px 15px 6px 18px;
   /* width: 384px; */
   z-index: 100;
}
.titleArea .metronome.mini > div {
   display: inline-block;
   vertical-align: middle;
}
.metro_txt {
   font-size: 23px;
   font-family: 'NanumSquareRoundEB';
   line-height: 53px;
   vertical-align: middle;
   display: inline-block;
   margin-right: 5px;
   color: #4a5056;
}
.metroToggle {
   border-radius: 100px;
   width: 74px;
   height: 35px;
   position: relative;
   margin-right: 10px;
   background: #fff;
   border: 2px solid #eaeaea;
   cursor: pointer;
}

.metroToggle > p {
   display: inline-block;
   font-family: 'NanumSquareRoundEB';
   color: #858585;
   font-size: 20px;
   line-height: 34px;
}

.ToggleBtn {
   border-radius: 50%;
   width: 26px;
   height: 26px;
   display: inline-block;
   vertical-align: middle;
   position: absolute;
   /* left: 0px; */
   top: 0;
   cursor: pointer;
   /* display: none; */
   z-index: 5;
   position: absolute;
   top: 2px;
   left: 10px;
   border: 2px solid #000000;
   background-color: #000;
   box-shadow: inset 0px 4px 3px -1px #6a6a6a;
}
.ToggleBtn.left {
   background: #ff6a07;
   border: 2px solid #f36100;
   box-shadow: inset 0px 4px 3px -1px #ff971d;
   animation: toggleLeft linear both 0.1s;
}
.ToggleBtn.right {
   background-color: #000000;
   border-color: #000;
   box-shadow: inset 0px 4px 3px -1px #6a6a6a;
	animation: toggleRight linear both 0.1s;
}

@keyframes toggleLeft {

   0% {transform: translateX( 0);}
   50% { transform:translateX( 20px); }
   100% {transform: translateX( 27px);}
}

@keyframes toggleRight {
   0% { transform:translateX( 34px); }
   50% { transform:translateX( 20px); }
   100% { transform:translateX( 0px); }

}

.toggleOn{
   position: absolute;
   top: 0;
   right: 11px;
}
.toggleOff {
   position: absolute;
   top: 0;
   left: 12px;
}
.plus {
   background: url(../images/common/btn_zoomIn_off.png) no-repeat;
   width: 30px;
   height: 30px;
   cursor: pointer;
   background-size: 100%;
   pointer-events: none;
}
.minus {
   background: url(../images/common/btn_zoomOut_off.png) no-repeat;
   width: 30px;
   height: 30px;
   cursor: pointer;
   background-size: 100%;
   pointer-events: none;
}
.metronome.on .plus {
   background-image: url(../images/common/btn_zoomIn.png);
   pointer-events: all;
}
.metronome.on .minus {
   background-image: url(../images/common/btn_zoomOut.png);
   pointer-events: all;
}
.metro_num {
   background-color: #fff;
   width: 70px;
   border-radius: 16px;
   bottom: 10px;
   left: 50%;
   text-align: center;
   height: 36px;
   position: static;
   z-index: 100;
   border: 3px solid #bea586;
   /* border-color: #f36100; */
   margin: 0 2px;
}
.metronome.mini .metro_num #bpm {
   font-size: 28px;
   width: 100%;
   text-align: center;
   color: #757575;
   line-height: 39px;
   font-family: 'nanumsquareRB';
   letter-spacing: -1px;
   pointer-events: none;
}
.metronome.on .metro_num #bpm
.titleArea .metronome.mini .metro_btn .onBtn {
   font-family: 'NanumSquareRoundR';
   font-size: 27px;
   background: #b7b7b7;
   border-radius: 15px;
   border: 2px solid #d8d8d8;
   text-align: center;
   padding: 9px 17px;
   position: absolute;
   top: 5px;
   left: 414px;
   color: #fff;
   font-weight: 600;
   cursor: pointer;
   width: 75px;
}
.titleArea {
   border-bottom: 2px solid #c1c1c1;
   background: #fff;
   height: 120px;
   padding: 20px;
   /* box-shadow: 0px 23px 18px -35px #000; */
   border: 3px solid #d9d9d9;
   border-radius: 0 0 40px 40px;
   border-top: none;
   position: relative;
}

.metronome.on .metro_num {
   background-color: #fff;
   border-color: #f36100;
}

.metronome.on .metro_num #bpm {
   color: #222222;
   pointer-events: all;
}

.titleArea .metronome.mini .metro_btn .onBtn.startBtn {
   background-color: #ff983b;

}
.stopBtn {
   display: none;
}
.metronome:not(.mini) .btnPlay {
   /* filter: grayscale(); */
   pointer-events: none;
}
.metronome.mini.on .btnPlay {
   filter: none;
   pointer-events: all;
}
.metronome.mini .btnPlay {
   width: 79px;
   height: 39px;
   /* background-size: 100%; */
   /* margin-left: 10px; */
   display: inline-block;
   vertical-align: middle;
   background-color: #86b3d9;
   text-align: center;
   border-radius: 15px;
   position: relative;
   margin: 0 10px 0 5px;
   cursor: pointer;
   box-shadow: inset 0px 2px 6px -2px #e7f5ff;
   border: 1px solid #86b3d9;
}



.metronome.mini .btnPlay.on .btn_start {
   display: none;
}

.metronome.mini .btnPlay.on .btn_stop {
   display: block;
}

.metronome.mini .btn_stop {
   display: none;
}
.metronome.mini .btnPlay > p{
   font-size: 23px;
   font-family: 'NanumSquareRoundEB';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   width: 79px;
   color: #fff;
}

/* 
.titleArea .metronome.mini {
   position: absolute;
   top: 30px;
   right: 150px;
   width: 130px;
}

.metronome.mini .metroBody {
   background-color: #976e30;
   width: 100%;
   height: 190px;
   border-radius: 50px 50px 20px 20px;
}

.metronome.mini .metro_chu {
   background: #d1b8a6;
   border: 2px solid #e6e2dd;
   width: 10px;
   height: 100px;
   position: absolute;
   bottom: 70px;
   left: 44%;
   border-radius: 10px;
   transform-origin: bottom center;
}

.metro_chu {
    animation: swing infinite;
}

@keyframes swing {
    0% { transform: rotate(-20deg); }
    50% { transform: rotate(20deg); }
    100% { transform: rotate(-20deg); }
}

.metro_num {
   position: absolute;
   background-color: #fff;
   width: 60%;
   border-radius: 10px;
   border: 2px solid #000;
   bottom: 10px;
   left: 50%;
   transform: translateX(-50%);
   text-align: center;
}

.metro_input {
   font-size: 25px;
   width: 100%;
   text-align: center;
}

.metro_num #bpm {
   font-size: 33px;
   width: 100%;
   text-align: center;
}

.btn_metro_play {
   background: url(../images/common/btn_play.png) no-repeat;
   position: absolute;
   width: 44px;
   height: 44px;
   background-size: 100%;
   bottom: -48px;
   left: 50%;
   transform: translateX(-50%);
}
.btn_metro_play.on {
   background-image: url(../images/common/btn_stop.png);
} */
/* 버튼 스타일 */

.btn {
   position: relative;
   font-family:'nanumsquareRB';
   background: #262626;
   border: 1px solid #696969;
   border-radius: 40px;
   text-align: center;
   width: 196px;
   height: 50px;
   z-index: 50;
   color: #fff;
   font-size: 27px;
   padding: 6px 0px;
   cursor: pointer;
   box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.15), inset 0px 3px 2px -1px #878787;
   display: inline-block;
   vertical-align: middle;
   margin: 3px;
}

.btn p {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   width: 100%;
   text-shadow: 1px 1px 13px #a700bb;
}
.btn p.off {
   display: none;
}
.btn.on p.off {
   display: block;
}
.btn.on p.on {
   display: none;
}

.btnNote .off {
   color: #ff76b4;
}
.btnSurface .off {
   color: #ff8214;
}
.btnKb .off {
   color: #1f9ed9;
}
.btnNum .off {
   color: #0df102;
}

.note {
   color: #ff76b4;
}
.kb {
   color: #1f9ed9;
}


.footer {
   position: absolute;
   bottom: 30px;
   right: 40px;
}


.flat {
   margin: 0 -5px;
   display: inline-block !important;
}

.sharp {
   margin: 0 2px;
   display: inline-block !important;
}

.recorder_wrap input {
    position: absolute;
    top: -40px;
    left: 10px;
    width: 200px;
    height: 100px;
    z-index: 10000000;
    background: white;
}

/* qr 페이지 */
#section.qr .close {
   display: none;
}

.testtest {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 60px;
    
}

/*  */
.bg_txt {
   font-family: 'NanumSquareNeo-cBd';
   position: absolute;
   transform: rotate(-90deg);
   text-align: center;
   color: #939393;
   font-size: 35px;
}


/*  */
.bg_txt {
   font-family: 'NanumSquareNeo-cBd';
   position: absolute;
   transform: rotate(-90deg);
   text-align: center;
   color: #939393;
   font-size: 35px;
}

.modal {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.qr_window {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 470px;
    height: 490px;
    background-color: #fff;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    border: 5px solid #adadad;
}

.btn_qr {
    position: absolute;
    background: url(../images/common/btn_share.png) no-repeat;
    width: 60px;
    height: 60px;
    background-size: 54%;
    right: 126px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background-position: 45% center;
    border: 2px solid #737373;
    box-shadow: 0px 0px 4px 1px #dbdbdb;
    filter: contrast(0.5);
}

.qr .btn_qr {
       right: 46px;
}

.qr_window .qr_img {
    position: absolute;
    top: 52%;
    left: 50%;
    width: 65%;
    /* height: 70%; */
    transform: translate(-50%, -50%);
}

.qr_window .qr_link {
    position: absolute;
    bottom: 25px;
    width: 100%;
    text-align: center;
    font-size: 30px;
}


.btn_qr:hover {
    box-shadow: 0px 0px 8px 1px #bbbbbb;
}

.qr_window .qr_tit {
   color: #fff;
   background-color: #838383;
   padding: 7px 0;
   font-size: 28px;
   border-radius: 15px 15px 0 0;
   text-align: center;
}

.btn_space {
   background: url(../images/common/btn_space1.png) no-repeat;
   width: 70px;
   height: 70px;
   background-size: 16px;
   background-color: #d5d5d5;
   border-radius: 50%;
   background-position: center;
   box-shadow: 0px 0px 10px -3px #8f8f8f, inset 0px 5px  3px -1px #ffffff;
   position: absolute;
   top: 179px;
   right: -90px;
   border: 3px solid #e5e5e5;
   cursor: pointer;
}

.btn_space.active {
      background-color: #fddcfd;
      border-color: #ffcbff;
      box-shadow: 0px 0px 10px -3px #8f8f8f, inset 0px 5px  3px -1px  #ffffff;
}
.btn2 .btn_txt1 {
   display: none;
}
.btn2 .btn_txt2 {
   display: block;
}
.btn2.on p.btn_txt2 {
    display: none;
}
.btn2.on p.btn_txt1 {
    display: block;
}

.btn_space .kb {
   font-size: 37px;
   width: max-content;
   text-align: center;
   bottom: -100px;
}