@charset "utf-8";
/** common-frame.css : 바깥 프레임. menu와 resize 기능 
 ** 노래 부르기 : 상단 메뉴 포함
 ** 박자 치기 : 상단 제목 포함
 **/


/*** #scale-layer ***/
#scale-layer {
  visibility: hidden;
  width: 100%;
  height: 100%;
  background-color: #393939;
}
#scale-layer.show {
  visibility: visible;
}
#scale-layer > #base-bg {
  position: absolute;
  width: 100%;
  height: 120px;
  left: 0;
  top: 0;
  background: #ffd332;
}
#scale-layer > #base-bg.singWrap {
  height: 160px;
  background: url(../libs/musicNote/images/base_bg.png) repeat-x 0 0/contain;
}

/*** #wrap ***/
#wrap {
  --color-header: #ffd332;
}
#wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  padding: 0;
  margin: 0;
  font-family: 'ns-eb';
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transform-origin: top left;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
}

/*** header ***/
#wrap header {
  position: relative;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}

/*** 노래 부르기 상단 ***/
#wrap.singWrap header {
  height: 90px;
  background: #4c96e2;
  z-index: 1;
}
#wrap.singWrap header > ul {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  height: 84px;
  padding: 0;
  margin: 0;
  background: var(--color-header);
  cursor: default;
}
#wrap.singWrap header > ul > li {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 300px;
  height: 70px;
  padding: 10px 0 0;
  margin: 0 10px;
  color: #b95639;
  font-family: 'jalnan';
  font-size: 35px;
  box-sizing: border-box;
  cursor: pointer;
  background: url(../libs/musicNote/images/menu.png) no-repeat bottom;
}
#wrap.singWrap header > ul > li.hover,
#wrap.singWrap header > ul > li.active,
#wrap.singWrap header > ul > li.on {
  margin-bottom: -1px;
  color: #fff66f;
  background: url(../libs/musicNote/images/menu_on.png) no-repeat bottom;
}

/*** 박자 치기 상단 ***/
#wrap.beatWrap header {
  padding: 0;
  height: 120px;
  background: var(--color-header);
}
#wrap.beatWrap header h1.title {
  position: relative;
  display: inline-block;
  margin: 16px 0 0 92px;
  padding: 0;
  color: #fff;
  font-family: 'jalnan';
  font-size: 60px;
  line-height: 1.2;
  vertical-align: bottom;
}
#wrap.beatWrap header h1.title::before {
  content: '';
  position: relative;
  display: inline-block;
  width: 52px;
  height: 80px;
  left: -20px;
  line-height: 1.2;
  vertical-align: bottom;
  background: url(../libs/musicNote/images/icon_story.png) no-repeat center;
}

/*** main ***/
#wrap main {
  position: relative;
  flex-grow: 1;
  height: 100%;
  padding: 0;
  margin: 0;
  box-shadow: none;
  font-size: 35px;
  font-family: 'ns-eb';
  line-height: 1.2;
}
/* #wrap main.full { margin-top: 90px; } */
#wrap main.sing > section > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}