@charset "utf-8";
@import url(../../../css/common-menu.css);

/** musicNote.css : 노래 부르기, 박자 치기 **/
/** "노랫말 바꾸기" 추가 **/

ol,
ul,
li {
  list-style: none;
}
.singSheetContainer {
  --size-header-height: 80px;
  
  /* ui */
  --color-off: #afbfd4;
  --color-on: #f15555;
  --color-ui-text: #600;
  --color-ui-divide: #fead9a;
  --color-ui-progress: #f44242;
  --color-ui-section-on: #fff66f;
  --color-ui-dropdown: #e2e9f2;

  /* svg */
  --color-svg-off: rgb(0, 0, 0);
  --color-svg-on: rgb(255, 32, 0);
  --color-svg-hide: rgba(0, 0, 0, 0);
  --color-svg-input: #ededed;
  --color-svg-input-on: #ffe443;
}
.singSheetContainer {position: relative; width: 100%; height: calc(100% - var(--size-header-height)); margin-top: var(--size-header-height); background-color: #fff; }
.singSheetContainer.beat h1.title,
.singSheetContainer.input h1.title {
  position: relative;
  display: inline-block;
  margin: 24px 0 0 104px;
  padding: 0;
  color: #3b4547;
  font-family: 'ns-eb';
  font-size: 75px;
  letter-spacing: -0.5px;
  line-height: 1.2;
  vertical-align: 8px;
}
.singSheetContainer.beat h1.title::before,
.singSheetContainer.input h1.title::before {
  content: '';
  position: relative;
  display: inline-block;
  width: 36px;
  height: 36px;
  left: -20px;
  line-height: 1.2;
  vertical-align: 8px;
  background: url(../images/bullet_title.png) no-repeat center;
}

.svgDatLoading {
  position: absolute;
  z-index: -1;
}
object.svgData {
  opacity: 0.01;
  width: 0.1px;
  height: 0.1px;
}
.svgList {
  opacity: 0;
}
.loaded .svgList {
  opacity: 1;
}
.svgContainer:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(../images/loading_bg.svg) center / 104px no-repeat;
}
.svgContainer:after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(../images/loading_circle.svg) center / 104px no-repeat;
  -webkit-animation: rounding 1s infinite linear;
  -moz-animation: rounding 1s infinite linear;
  -ms-animation: rounding 1s infinite linear;
  animation: rounding 1s infinite linear;
}
@keyframes rounding {
  from {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
.svgContainer.loaded:after,
.svgContainer.loaded:before {
  content: none;
}

/*** 노래방 기능 제어: begin ***/
/* 쉼표: 실제로는 보이지 않게 처리 */
.singSheetContainer.lyrics .svgList svg>g:not(#bg) line {
  stroke: var(--color-svg-hide);
  fill: var(--color-svg-hide);
}

/* 박자 */
.singSheetContainer.beat:not(.input) .svgList svg>g:not(#bg) g rect,
.singSheetContainer.beat:not(.input) .svgList svg>g:not(#bg) rect,
.svgList svg>g:not(#bg) g ellipse,
.svgList svg>g:not(#bg) g circle,
.svgList svg>g:not(#bg) ellipse,
.svgList svg>g:not(#bg) circle {
  stroke: var(--color-svg-hide);
  fill: var(--color-svg-hide);
}
.singSheetContainer.beat:not(.input) .svgList svg>g:not(#bg) g.on rect,
.singSheetContainer.beat:not(.input) .svgList svg>g:not(#bg) rect.on,
.svgList svg>g:not(#bg) g.on ellipse,
.svgList svg>g:not(#bg) g.on circle,
.svgList svg>g:not(#bg) ellipse.on,
.svgList svg>g:not(#bg) circle.on {
  stroke: var(--color-svg-on);
  fill: var(--color-svg-hide);
}

/* 노랫말 바꾸기 */
.singSheetContainer.input .svgList svg>g:not(#bg) g rect,
.singSheetContainer.input .svgList svg>g:not(#bg) rect {
  stroke: var(--color-svg-hide);
  fill: var(--color-svg-input);
}
.singSheetContainer.input .svgList svg>g:not(#bg) g.on rect,
.singSheetContainer.input .svgList svg>g:not(#bg) rect.on {
  stroke: var(--color-svg-hide);
  fill: var(--color-svg-input-on);
}

/* 가사, 음표 */
.singSheetContainer:not(.lyrics) .svgList svg>g:not(#bg) line,
.singSheetContainer:not(.lyrics) .svgList svg>g:not(#bg) g line {
  stroke: var(--color-svg-off);
}
.svgList svg>g:not(#bg) rect,
.svgList svg>g:not(#bg) polyline,
.svgList svg>g:not(#bg) polygon,
.svgList svg>g:not(#bg) path,
.svgList svg>g:not(#bg) g,
.svgList svg>g:not(#bg) g rect,
.svgList svg>g:not(#bg) g polyline,
.svgList svg>g:not(#bg) g polygon,
.svgList svg>g:not(#bg) g path {
  fill: var(--color-svg-off);
}
.singSheetContainer:not(.lyrics) .svgList svg>g.inActive:not(#bg) line.on,
.singSheetContainer:not(.lyrics) .svgList svg>g.inActive:not(#bg) g.on line {
  stroke: var(--color-svg-on);
}
.svgList svg>g.inActive:not(#bg) rect.on,
.svgList svg>g.inActive:not(#bg) polyline.on,
.svgList svg>g.inActive:not(#bg) polygon.on,
.svgList svg>g.inActive:not(#bg) path.on,
.svgList svg>g.inActive:not(#bg) g.on,
.svgList svg>g.inActive:not(#bg) g.on rect,
.svgList svg>g.inActive:not(#bg) g.on polyline,
.svgList svg>g.inActive:not(#bg) g.on polygon,
.svgList svg>g.inActive:not(#bg) g.on path {
  fill: var(--color-svg-on);
}

/* 가사 가리기 */
.svgList svg>g.cover { display: none; }
.svgList svg>g.cover rect { fill: #fff !important; }
/*** 노래방 기능 제어: end ***/

.svgList .off {
  display: none;
}
.svgList.active {
  display: block;
}
.singSheetContainer .sheetContainer {
  padding: 0 0 0;
  text-align: center;
  z-index: 0;
}
.sheetContainer.musicNote {
  height: auto; /*630px;*/
  overflow: hidden;
  box-sizing: border-box;
}
.sheetContainer > h1 {
  opacity: 1;
  position: absolute;
  top: 120px;
  left: 50%;
  margin: 0;
  font-size: 72px;
  font-family: 'ns-eb';
  font-weight: normal;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.sheetContainer > h1.off {
  opacity: 0;
}
.svgList {
  display: none;
  position: absolute; /*relative;*/
  left: 0px;
  top: 200px;
  max-width: 1920px;
  min-height: auto;
  margin: 0 auto;
}
.svgList .sectionIcon {
  width: 0;
  height: 0;
  font-size: 0;
}

/*** 기본. 노래방 스타일 ***/
.audioPlayer {
  display: flex;
  position: relative;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 70px;
  font-family: 'ns-eb';
  /* z-index: 1; */
  background: #fff url(../images/player_bg.png) repeat-x;
}
.audioPlayer > .bar {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 5px;
  margin: 0 auto;
  user-select: none;
}
.audioPlayer > .bar > * {
  display: flex;
  align-items: center;
  position: relative;
  height: 62px;
  padding: 0 10px;
  border-right: 1px solid var(--color-ui-divide);
}
.audioPlayer > .bar > *:last-child {
  border-right: none;
}

.audioPlayer > .bar > .allLabel {
  padding: 3px 18px 0;
  color: var(--color-ui-text);
  font-family: 'binggrae-B';
  font-size: 25px;
  line-height: 1.2;
}
.audioPlayer > .bar > .controls .progress.horizon {
  position: relative;
  width: 180px;
  height: 16px;
  margin: 0 16px;
}
.audioPlayer > .bar > .controls .progress.horizon > .progressBar {
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
  cursor: pointer;
}
.audioPlayer > .bar > .controls .progress.horizon > .progressBar > .track {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 8px;
}
.audioPlayer > .bar > .controls .progress.horizon > .progressBar > .track > .filled {
  width: 0;
  height: 100%;
  border-radius: 8px;
  background: var(--color-ui-progress);
}
.audioPlayer > .bar > .controls .progress.horizon > .progressBar > .track > .filled > .handle {
  position: relative;
  top: -9px;
  left: -17px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: var(--color-ui-progress);
}

.audioPlayer > .bar > .controls {
  user-select: none;
  display: flex;
  align-items: center;
}
.audioPlayer > .bar > .controls > * {
  flex-shrink: 0;
}
.audioPlayer > .bar > .controls > .controlsPlayButton,
.audioPlayer > .bar > .controls > .controlsPauseButton,
.audioPlayer > .bar > .controls > .controlsStopButton {
  display: block;
  width: 52px;
  height: 54px;
  margin: 2px 2px 0px;
  cursor: pointer;
}
.audioPlayer > .bar > .controls.isPlaying > .controlsPlayButton {
  display: none;
}
.audioPlayer > .bar > .controls.isPlaying > .controlsPauseButton {
  display: block;
}
.audioPlayer > .bar > .controls > .controlsPlayButton {
  background: url(../images/player_btn_play.png) no-repeat center;
}
.audioPlayer > .bar > .controls > .controlsPlayButton:hover {
  background: url(../images/player_btn_play_over.png) no-repeat center;
}
.audioPlayer > .bar > .controls > .controlsPauseButton {
  display: none;
  background: url(../images/player_btn_pause.png) no-repeat center;
}
.audioPlayer > .bar > .controls > .controlsPauseButton:hover {
  background: url(../images/player_btn_pause_over.png) no-repeat center;
}
.audioPlayer > .bar > .controls > .controlsStopButton {
  order: 1;
  background: url(../images/player_btn_stop.png) no-repeat center;
}
.audioPlayer > .bar > .controls > .controlsStopButton:hover {
  background: url(../images/player_btn_stop_over.png) no-repeat center;
}
.audioPlayer > .bar > .controls .controlsTimer {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666;
  margin-left: 6px;
  font-size: 17px;
  font-family: NotoM;
  letter-spacing: -0.06em;
}
.audioPlayer > .bar > .controls .controlsTimer .current:after {
  content: "/";
  margin: 0 2px;
}
.section {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 구간 듣기 버튼을 마스크 안에 넣음: begin */
.section.iconType.band {
  justify-content: left;
  overflow: hidden;
  width: 790px;
  margin: 0 32px;
  padding: 0;
  border: none;
}
.section.iconType.band + .options {
  border-left: 1px solid #bbb;
}
.audioPlayer .btn-wrap {
  position: absolute;
  width: 790px;
  left: 680px;
  top: 12px;
  /* height: 30px; box-shadow: 0 0 0 1px blue inset; */
  /* pointer-events: none; */
}
.audioPlayer .btn-wrap>div {
  position: absolute;
  display: block;
  width: 32px;
  height: 46px;
  pointer-events: auto;
}
.audioPlayer .btn-wrap .btn-prev {
  right: 100%;
  background: url(../images/player_slide_prev.png) no-repeat center;
}
.audioPlayer .btn-wrap .btn-prev.disabled {
  background: url(../images/player_slide_prev_off.png) no-repeat center;
  pointer-events: none;
}
.audioPlayer .btn-wrap .btn-prev:hover {
  background: url(../images/player_slide_prev_over.png) no-repeat center;
}
.audioPlayer .btn-wrap .btn-next {
  left: 100%;
  background: url(../images/player_slide_next.png) no-repeat center;
}
.audioPlayer .btn-wrap .btn-next.disabled {
  background: url(../images/player_slide_next_off.png) no-repeat center;
  pointer-events: none;
}
.audioPlayer .btn-wrap .btn-next:hover {
  background: url(../images/player_slide_next_over.png) no-repeat center;
}
/* 구간 듣기 버튼을 마스크 안에 넣음: end */

/* 박자치기: begin */
.singSheetContainer.beat .audioPlayer {
  display: none;
  width: 572px;
  left: calc(100% - 72px - 572px);
  margin-top: 36px;
  background: url(../images/player_bg.png) repeat-x center;
  background-position: 35px 0;
}
.singSheetContainer.beat .audioPlayer.active {
  display: flex;
}
.singSheetContainer.beat .audioPlayer.menu0 {
  width: 422px;
  left: calc(100% - 72px - 422px);
}
.singSheetContainer.beat .audioPlayer.menu2 {
  width: 722px;
  left: calc(100% - 72px - 722px);
}
.singSheetContainer.beat .audioPlayer.menu3 {
  width: 872px;
  left: calc(100% - 72px - 872px);
}
.singSheetContainer.beat .audioPlayer .edge-left {
  position: absolute;
  width: 36px;
  height: 72px;
  left: -1px;
  top: -1px;
  background: url(../images/player_bg_left.png) no-repeat center;
}
.singSheetContainer.beat .audioPlayer .edge-right {
  position: absolute;
  width: 36px;
  height: 72px;
  right: -1px;
  top: -1px;
  background: url(../images/player_bg_right.png) no-repeat center;
}

/* .singSheetContainer.beat .audioPlayer .controls .progress, */
.singSheetContainer.beat .audioPlayer .allLabel,
.singSheetContainer.beat .audioPlayer .section .sectionPlayButton,
.singSheetContainer.beat .audioPlayer .section .sectionPauseButton,
.singSheetContainer.beat .audioPlayer .section .sectionStopButton,
.singSheetContainer.beat .audioPlayer .options {
  display: none;
}
.singSheetContainer.beat .audioPlayer .bar > * {
  padding: 0 2px;
  border: none;
}
.singSheetContainer.beat .audioPlayer .controls .progress {
  width: 100px;
}
.singSheetContainer.beat .audioPlayer .section .sectionInfo {
  width: 104px;
  /* margin-left: 10px; */
  color: var(--color-on);
  font-family: 'jalnan';
  font-size: 24px;
  letter-spacing: 1px;
  text-align: center;
  line-height: 1.2;
  cursor: pointer;
}
.singSheetContainer.beat .audioPlayer .section .sectionInfo .current::after {
  color: #e3eaf2;
}
.singSheetContainer.beat .audioPlayer .section .sectionPage .bump {
  width: 30px;
  height: 30px;
  margin-left: -30px;
  cursor: pointer;
  /* background: rgba(256, 0, 0, 0.5); */
}
.singSheetContainer.beat ul.menu-wrap {
  padding: 0 5px;
  margin: 0 0 0 -4px;
}
.singSheetContainer.beat ul.menu-wrap>li {
  width: 141px;
  height: 58px;
  padding: 29px 0 0;
  margin: 0px 4px;
  font-family: 'ns-eb';
  font-size: 24px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  background: url(../images/player_btn_sub.png) no-repeat center;
}
.singSheetContainer.beat ul.menu-wrap>li:hover,
.singSheetContainer.beat ul.menu-wrap>li.on {
  color: #fff;
  background: url(../images/player_btn_sub_on.png) no-repeat center;
}
.singSheetContainer.beat ul.menu-wrap>li.on {
  pointer-events: none;
}

.singSheetContainer.beat .sheetContainer>h1 {
  display: none;
}
/* 박자치기: end */

.section .sectionPage,
.section .sectionIcons {
  display: none;
}
.section.pageType .sectionPage {
  display: flex;
  align-items: center;
  width: 159px;
  height: 58px;
  background: url(../images/player_pagetype_bg.png) no-repeat center;
}
.section.iconType .sectionIcons {
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0px;
}
.section .sectionPage .current:after {
  content: "/";
}
.section.isPlaying .sectionPage .sectionPlayButton {
  display: none;
}
.section.isPlaying .sectionPage .sectionPauseButton {
  display: block;
}
.section .sectionPage .sectionPlayButton,
.section .sectionPage .sectionPauseButton,
.section .sectionPage .sectionStopButton {
  display: block;
  width: 52px;
  height: 54px;
  margin: 2px 0px 0px;
  cursor: pointer;
}
.section .sectionPage .sectionPlayButton {
  background: url(../images/player_btn_play.png) no-repeat center;
}
.section .sectionPage .sectionPauseButton {
  display: none;
  background: url(../images/player_btn_pause.png) no-repeat center;
}
.section .sectionPage .sectionStopButton {
  background: url(../images/player_btn_stop.png) no-repeat center;
}
.section .sectionPage .sectionPrevButton,
.section .sectionPage .sectionNextButton {
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 58px;
  cursor: pointer;
}
.section .sectionPage .sectionPrevButton.off,
.section .sectionPage .sectionNextButton.off {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}
.section .sectionPage .sectionPrevButton {
  order: -1;
  background: url(../images/player_btn_section_page_prev.png) no-repeat center;
}
/*.section .sectionPage .sectionPrevButton:hover {
  background: url(../images/player_btn_section_page_prev_over.png) no-repeat center;
}*/
.section .sectionPage .sectionNextButton {
  background: url(../images/player_btn_section_page_next.png) no-repeat center;
}
/*.section .sectionPage .sectionNextButton:hover {
  background: url(../images/player_btn_section_page_next_over.png) no-repeat center;
}*/


.section .sectionPage .sectionDownMenuContainer {
  position: absolute;
  display: none;
  left: 18px;
  top: 60px;
  width: 122px;
  color: var(--color-off);
  font-family: 'jalnan';
  font-size: 22px;
  padding: 0;
  margin: 0;
  text-align: center;
  background: var(--color-ui-dropdown);
  border: 4px solid var(--color-ui-dropdown);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2);
  z-index: 0;
}
.section .sectionPage .sectionDownMenuContainer.active {
  display: block;
  z-index: 1;
}
.section .sectionPage .sectionDownMenuContainer > li {
  padding: 5px;
  margin: 1px;
  background: #fff;
  cursor: pointer;
}
.section .sectionPage .sectionDownMenuContainer > li:hover {
  color: var(--color-on);
}
.section .sectionPage .sectionDownMenuContainer > li:first-child {
  border-radius: 16px 16px 0 0;
}
.section .sectionPage .sectionDownMenuContainer > li:last-child {
  border-radius: 0 0 16px 16px;
}


.section .sectionIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  color: var(--color-on);
  margin: 0 2px;
  font-family: 'binggrae-B';
  font-size: 25px;
  background: url(../images/player_btn_section.png) no-repeat center;
  cursor: pointer;
}
.section .sectionIcon.on {
  color: var(--color-ui-section-on);
  background: url(../images/player_btn_section_on.png) no-repeat center;
}
.audioPlayer > .bar > .options {
  display: flex;
  position: relative;
}


/* 가사 버튼은 사용하지 않아도 보여야 함 */
.audioPlayer > .bar:not(.lyrics) > .options > .toggleLyricsButton {
  display: block;
  width: 52px;
  height: 54px;
  margin: 2px 5px 0px;
  cursor: auto;
  pointer-events: none;
  background: url(../images/player_btn_lyrics_off.png) no-repeat center;
  opacity: 0.5;
}

.audioPlayer > .bar > .options > .muteButton,
.audioPlayer > .bar > .options > .loopPlayButton,
.audioPlayer > .bar > .options > .toggleNoteButton,
.audioPlayer > .bar.lyrics > .options > .toggleLyricsButton,
.audioPlayer > .bar > .options > .halfDownButton,
.audioPlayer > .bar > .options > .oneDownButton {
  display: block;
  width: 52px;
  height: 54px;
  margin: 2px 5px 0px;
  cursor: pointer;
}
.audioPlayer > .bar > .options > .muteButton.off,
.audioPlayer > .bar > .options > .loopPlayButton.off,
.audioPlayer > .bar > .options > .toggleNoteButton.off,
.audioPlayer > .bar > .options > .toggleLyricsButton.off,
.audioPlayer > .bar > .options > .halfDownButton.off,
.audioPlayer > .bar > .options > .oneDownButton.off {
  pointer-events: none;
}
.audioPlayer > .bar > .options > .loopPlayButton {
  background: url(../images/player_btn_loop.png) no-repeat center;
}
.audioPlayer > .bar > .options > .loopPlayButton:hover {
  background: url(../images/player_btn_loop_over.png) no-repeat center;
}
.audioPlayer > .bar > .options > .loopPlayButton.on {
  background: url(../images/player_btn_loop_on.png) no-repeat center;
}
.audioPlayer > .bar > .options > .loopPlayButton.on:hover {
  background: url(../images/player_btn_loop_on_over.png) no-repeat center;
}
.audioPlayer > .bar > .options > .toggleNoteButton {
  background: url(../images/player_btn_note.png) no-repeat center;
}
.audioPlayer > .bar > .options > .toggleNoteButton:hover {
  background: url(../images/player_btn_note_over.png) no-repeat center;
}
.audioPlayer > .bar > .options > .toggleNoteButton.on {
  background: url(../images/player_btn_note_on.png) no-repeat center;
}
.audioPlayer > .bar > .options > .toggleNoteButton.on:hover {
  background: url(../images/player_btn_note_on_over.png) no-repeat center;
}
.audioPlayer > .bar > .options > .toggleLyricsButton {
  background: url(../images/player_btn_lyrics.png) no-repeat center;
}
.audioPlayer > .bar > .options > .toggleLyricsButton:hover {
  background: url(../images/player_btn_lyrics_over.png) no-repeat center;
}
.audioPlayer > .bar > .options > .toggleLyricsButton.on {
  background: url(../images/player_btn_lyrics_on.png) no-repeat center;
}
.audioPlayer > .bar > .options > .toggleLyricsButton.on:hover {
  background: url(../images/player_btn_lyrics_on_over.png) no-repeat center;
}

.audioPlayer > .bar > .options > .oneDownButton,
.audioPlayer > .bar > .options > .oneDownButton.on {
  display: none;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}
.audioPlayer > .bar > .options > .halfDownButton,
.audioPlayer > .bar > .options > .halfDownButton.on {
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* toneListButton & toneListDownMenuContainer : begin */
.audioPlayer > .bar > .options > .toneListButton,
.audioPlayer > .bar > .options > .playRateButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 111px;
  height: 54px;
  padding: 0;
  margin: 2px 5px 0;
  color: var(--color-on);
  font-family: 'binggrae-B';
  font-size: 22px;
  line-height: 1.2;
  background: url(../images/player_btn_list.png) no-repeat center;
  cursor: pointer;
}

.audioPlayer > .bar > .options > .toneListButton:after,
.audioPlayer > .bar > .options > .playRateButton:after {
  margin-top: -2px;
  margin-left: 20px;
}

.audioPlayer > .bar > .options > [selected="one"].toneListButton:after {
  content: "\C6D0\D0A4"; /*"원키";*/
}
.audioPlayer > .bar > .options > [selected="half"].toneListButton:after {
  content: "\B0AE\C740\0020\D0A4"; /*"낮은 키";*/
}

.audioPlayer > .bar > .options > [selected="fast"].playRateButton:after {
  content: "\BE60\B974\AC8C"; /*"빠르게";*/
}
.audioPlayer > .bar > .options > [selected="normal"].playRateButton:after {
  content: "x1.0";
}
.audioPlayer > .bar > .options > [selected="slow"].playRateButton:after {
  content: "\B290\B9AC\AC8C"; /*"느리게";*/
}

.audioPlayer > .bar > .options > ul.toneListDownMenuContainer,
.audioPlayer > .bar > .options > ul.playRateDownMenuContainer {
  display: none;
  position: absolute;
  
  top: 5px;
  width: 102px;
  color: var(--color-off);
  font-family: 'binggrae-B';
  font-size: 22px;
  padding: 0;
  margin: 0;
  text-align: center;
  background: #fff;
  border: 4px solid var(--color-ui-dropdown);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2);
}
.audioPlayer > .bar > .options > ul.toneListDownMenuContainer.on,
.audioPlayer > .bar > .options > ul.playRateDownMenuContainer.on {
  display: block;
  z-index: 1;
}

.audioPlayer > .bar > .options > ul.toneListDownMenuContainer {
  right: 138px;
}
.audioPlayer > .bar > .options > ul.playRateDownMenuContainer {
  right: 18px;
}


/*** 발성 연습 .tabs ***/
.audioPlayer > .bar > ul.tabs > li {
  position: relative;
  width: auto;
  padding: 3px 18px 0;
  color: #cc6666;
  font-family: 'binggrae-B';
  font-size: 25px;
  line-height: 1.2;
  cursor: pointer;
}
.audioPlayer > .bar > ul.tabs > li:not(:last-child)::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 38px;
  right: -2px;
  top: calc(50% - 18px);
  background-color: var(--color-ui-divide);
}
.audioPlayer > .bar > ul.tabs > li:hover { color: var(--color-ui-text); }
.audioPlayer > .bar > ul.tabs > li.on { color: var(--color-ui-text); cursor: auto; }

/*** .options 중 dropdown 감추기 ***/
.audioPlayer > .bar.nodrop > .options > .toneListButton,
.audioPlayer > .bar.onekey > .options > .toneListButton {
  color: var(--color-off);
  background: url(../images/player_btn_list_dim.png) no-repeat center;
  pointer-events: none;
  opacity: 0.5;
}
.audioPlayer > .bar.nodrop > .options > .playRateButton,
.audioPlayer > .bar.onerate > .options > .playRateButton {
  color: var(--color-off);
  background: url(../images/player_btn_list_dim.png) no-repeat center;
  pointer-events: none;
  opacity: 0.5;
}

/*** 발성 연습 .options 정리 ***/
.audioPlayer.vocal > .bar > .options > .toneListButton,
.audioPlayer.vocal > .bar > .options > .playRateButton { display: none; }
/* .audioPlayer.vocal > .bar > .section { display: none; } */
.audioPlayer.vocal > .bar > .section.iconType { width: 392px; }
.audioPlayer.vocal > .btn-wrap { width: 392px; left: 1182px; }

.toneListDownMenuContainer > li,
.playRateDownMenuContainer > li {
  padding: 4px 0;
  text-align: center;
  cursor: pointer;
  background: url(../images/player_list_bg.png) no-repeat 0 0;
}
.toneListDownMenuContainer > li:first-child,
.playRateDownMenuContainer > li:first-child {
  background: url(../images/player_list_bg_top.png) no-repeat 0 0;
}
.toneListDownMenuContainer > li:after,
.playRateDownMenuContainer > li:after {
  margin-left: 24px;
}
.toneListDownMenuContainer > li:hover,
.playRateDownMenuContainer > li:hover {
  color: var(--color-on);
}
.toneListDownMenuContainer > li.on,
.playRateDownMenuContainer > li.on {
  color: var(--color-on);
}
.toneListDownMenuContainer > li[type="one"]:after {
  content: "\C6D0\D0A4"; /*"원키";*/
}
.toneListDownMenuContainer > li[type="half"]:after {
  content: "\B0AE\C740\0020\D0A4"; /*"낮은 키";*/
}
/* toneListButton & toneListDownMenuContainer : end */

.playRateDownMenuContainer > li[speed="fast"]:after {
  content: "\BE60\B974\AC8C"; /*"빠르게";*/
}
.playRateDownMenuContainer > li[speed="normal"]:after {
  content: "x1.0";
}
.playRateDownMenuContainer > li[speed="slow"]:after {
  content: "\B290\B9AC\AC8C"; /*"느리게";*/
}

.counterLoading > img {
  opacity: 0.01;
  position: absolute;
  top: 0;
  left: 0;
  width: 0.1px;
  height: 0.1px;
}
.countBox {
  position: absolute;
  top: 80px;
  left: 20px;
  width: 160px;
  height: 160px;
  background-image: none;
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
}
.countBox[count="1"] {
  background-image: url("../images/count_0.png");
}
.countBox[count="2"] {
  background-image: url("../images/count_0.png");
}
.countBox[count="3"] {
  background-image: url("../images/count_1.png");
}
.countBox[count="4"] {
  background-image: url("../images/count_2.png");
}
.countBox[count="5"] {
  background-image: url("../images/count_3.png");
}
.countBox[count="6"] {
  background-image: url("../images/count_4.png");
}
.svgList svg {
  width: 100%;
  height: 100%;
}


/***** 노랫말 바꾸기 *****/
.input-wrap {
  --color-text: #333;
  --color-ex: #0066ff;
  --size-text: 64px;
  --size-text-small: 48px;
}
.input-wrap {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1920px;
}
.input-wrap .input-line {
  display: flex;
  align-items: center;
  height: 110px;
}
.input-wrap input {
  position: relative;
  display: inline-block;
  width: 400px;
  height: auto;
  color: var(--color-text);
  font-family: "kopub-batang-B";
  font-size: var(--size-text);
  line-height: 1.2;
  text-align: center;
  border: 0;
  padding: 0;
  margin: 0;
  outline: 0;
  background: none;
}
.input-wrap input.overflow { font-size: var(--size-text-small); }
.input-wrap.ex input { pointer-events: none; }
.input-wrap.ex input::placeholder { color: var(--color-ex); }

.btn-input {
  position: absolute;
  width: 250px;
  height: 72px;
  right: 74px;
  bottom: 32px;
  background: url(../images/button_read.svg) no-repeat center/contain;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  z-index: 1;
}
.btn-input.active { background: url(../images/button_write.svg) no-repeat center/contain; }

.singSheetContainer.input .input-info {
  position: absolute;
  width: auto;
  left: 160px;
  top: 166px;
  padding: 6px 24px;
  border-radius: 18px;
  color: #666;
  font-family: "ns-eb";
  font-size: 22px;
  background: #ededed;
}
.singSheetContainer.input .input-info>em {
  font-style: normal;
  color: var(--color-text);
}


/***** 상단 메뉴 *****/