@charset "UTF-8";
/* Create with Compass + SCSS on windows */
/* ... 數位典藏-有聲書 by齊力樂門20241101 ... */
.storyMeFrame .playControlBtns.normal .preOpenNote:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
  /*搭配:before 擬元素的垂直置中效果part1*/ }

.storyMeFrame .playControlBtns.normal .preOpenNote span {
  display: inline-block;
  vertical-align: middle;
  /*搭配:before 擬元素的垂直置中效果part2*/ }

.storyMeFrame span,
.storyMeFrame strong,
.storyMeFrame button,
.storyMeFrame div,
.storyMeFrame p {
  font-size: 1rem; }

body, .storyMeFrame .orientationTip,
.storyMeFrame .hinter .errors,
.storyMeFrame .hinter .errors li,
.storyMeFrame .controlBtn,
.storyMeFrame .playControlBtns .storyBtn,
.storyMeFrame .preOpenNote,
.storyMeFrame .main ol,
.storyMeFrame .main ol li, .storyMeFrame .main .resizer {
  margin: 0;
  padding: 0; }


.storyMeFrame .controlBtn,
.storyMeFrame .storyBtn,
.storyMeFrame .storyBtn:hover,
.storyMeFrame .storyBtn:active,
.storyMeFrame .storyBtn:visited {
  background: none;
  border: none; }

.storyMeFrame .prevBtn img,
.storyMeFrame .nextBtn img, .storyMeFrame .playControlBtns .storyBtn img {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  not supported by any browser */ }

.hiddenItem {
  font-size: 1px;
  line-height: 0;
  text-indent: 0;
  visibility: hidden; }

.hideItem {
  display: none; }

.clearFloat {
  clear: both;
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
  height: 0;
  display: block;
  width: 100%; }

.storyMeFrame .prevBtn:active img,
.storyMeFrame .nextBtn:active img, .storyMeFrame .playControlBtns .storyBtn:active img {
  margin-top: 4px;
  margin-left: 4px;
  margin-right: 2px;
  margin-bottom: 2px; }

.storyMeFrame {
  box-sizing: border-box;
  position: relative;
  margin: 0 1rem;
  padding: 0 65px;
  width: calc(100% - 1rem - 1rem);
  /*min-width: 960px;*/
  height: auto;
  /* 歸零margin 與padding begin */
  /* 歸零margin 與padding end */
  /* .audioEffect{}
    .audioMe{} */ }
  .storyMeFrame .verInfo {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    pointer-events: none;
    border-radius: 0.35rem;
    background-color: rgba(0, 0, 0, 0.45);
    color: #fff; }
    .storyMeFrame .verInfo .js,
    .storyMeFrame .verInfo .css {
      padding-inline: 0.5rem;
      font-weight: bold;
      /*display:inline-block;*/ }
    .storyMeFrame .verInfo .js {
      color: #F726CD; }
    .storyMeFrame .verInfo .css {
      color: #B4DC0B; }
      .storyMeFrame .verInfo .css:before {
        display: inline;
        content: "502:16:56"; }
  .storyMeFrame .-Ping {
    position: absolute;
    width: 10px;
    height: 10px;
    top: -100px;
    left: -100px;
    font-family: 'init-any'; }
  .storyMeFrame .audioEffect,
  .storyMeFrame .audioMe,
  .storyMeFrame .isFirstPlay,
  .storyMeFrame .playList {
    position: absolute;
    top: -60px;
    left: -10000px !important; }
  .storyMeFrame .playList {
    width: 9rem;
    padding: 1rem;
    /* right: 0; */ }
  .storyMeFrame .issued,
  .storyMeFrame .playProgress {
    color: #666;
    margin: 0;
    line-height: 55px; }
  .storyMeFrame .issued {
    float: left;
    display: none; }
  .storyMeFrame .playProgress {
    float: right; }
    .storyMeFrame .playProgress span {
      font-size: inherit; }
  .storyMeFrame .orientationTip,
  .storyMeFrame .hinter,
  .storyMeFrame .controlBtn {
    position: absolute; }
  .storyMeFrame .controlBtn,
  .storyMeFrame .storyBtn {
    cursor: pointer; }
  .storyMeFrame .controlBtn:disabled,
  .storyMeFrame .storyBtn:disabled {
    cursor: default; }
  .storyMeFrame .controlBtn {
    /* background-color: rgba(255 , 255 , 255 , 0.5); */
    top: 0;
    width: 65px;
    height: 100%; }
  .storyMeFrame .prevBtn img,
  .storyMeFrame .nextBtn img {
    margin: 3px;
    width: calc(100% - 6px);
    height: auto; }
  .storyMeFrame .prevBtn:disabled img,
  .storyMeFrame .nextBtn:disabled img {
    opacity: 0.33; }
  .storyMeFrame .prevBtn {
    left: 0; }
  .storyMeFrame .nextBtn {
    right: 0; }
  .storyMeFrame .preOpenNote {
    color: #FF0000; }
  .storyMeFrame .playControlBtns.normal + .preOpenNote {
    display: none; }
  .storyMeFrame .playControlBtns.normal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; }
    .storyMeFrame .playControlBtns.normal .wrapper {
      position: relative; }
      .storyMeFrame .playControlBtns.normal .wrapper button {
        display: block; }
    .storyMeFrame .playControlBtns.normal .wrapper.fixRight {
      /*margin-left: auto;*/ }
    .storyMeFrame .playControlBtns.normal .preOpenNote {
      display: none;
      margin-left: auto; }
    .storyMeFrame .playControlBtns.normal .vecVolumeRangeCtrl {
      display: none; }
    .storyMeFrame .playControlBtns.normal .vecVolumeRangeCtrl:checked + .vecVolumeRangeWrapper {
      display: block; }
    .storyMeFrame .playControlBtns.normal .vecVolumeRangeWrapper {
      display: none;
      position: absolute;
      padding-block: 15px;
      z-index: 100;
      top: -165px;
      left: 50%;
      width: 100%;
      transform: translateX(-50%);
      height: 165px;
      border-radius: 0.15rem;
      border: rgba(0, 0, 0, 0.35) solid 1px;
      background-color: rgba(0, 0, 0, 0.45); }
      .storyMeFrame .playControlBtns.normal .vecVolumeRangeWrapper .vecVolumeRange {
        margin-inline: auto;
        height: 135px; }
      .storyMeFrame .playControlBtns.normal .vecVolumeRangeWrapper .vecVolumeRange.ui-slider .ui-slider-handle {
        background-color: #fec87e; }
  .storyMeFrame .playControlBtns {
    margin-top: 35px; }
    .storyMeFrame .playControlBtns .storyBtn img {
      display: block;
      margin: 3px;
      width: auto;
      height: auto; }
    .storyMeFrame .playControlBtns .playBtn,
    .storyMeFrame .playControlBtns .headPlayBtn,
    .storyMeFrame .playControlBtns .resumePlayBtn {
      display: none; }
  .storyMeFrame .playControlBtns.doPlay .playBtn {
    display: inline-block !important; }
  .storyMeFrame .playControlBtns.doSelectedPlay .resumePlayBtn {
    display: inline-block !important; }
  .storyMeFrame .orientationTip {
    display: none;
    position: absolute;
    z-index: 11;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    min-width: 10rem;
    border-radius: 0.55rem;
    padding: 0.55rem;
    background-color: rgba(255, 255, 255, 0.75); }
  .storyMeFrame .hinter {
    z-index: 100;
    top: 1rem;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.35); }
    .storyMeFrame .hinter .wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%); }
    .storyMeFrame .hinter .playControlBtns,
    .storyMeFrame .hinter .loading,
    .storyMeFrame .hinter .errors {
      display: none; }
    .storyMeFrame .hinter .playControlBtns .playBtn {
      padding: 10vw; }
    .storyMeFrame .hinter .errors {
      min-width: 10rem;
      border-radius: 0.55rem;
      padding: 0.55rem;
      background-color: rgba(255, 255, 255, 0.75); }
      .storyMeFrame .hinter .errors li {
        list-style: none;
        display: none; }
    .storyMeFrame .hinter img {
      display: block;
      pointer-events: none;
      width: 2.55rem;
      height: auto; }
  .storyMeFrame .main {
    /* 原始尺寸1770 * 890 */
    clear: both;
    width: 100%;
    margin: 0 auto;
    /* aspect-ratio: 2000 / 956;
        overflow: hidden; */
    position: relative; }
    .storyMeFrame .main.soundOnly {
      visibility: hidden; }
    .storyMeFrame .main .resizer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      opacity: 0;
      pointer-events: none; }
    .storyMeFrame .main div.turn {
      /*width: 1170px;
            height: 658px;*/
      list-style: none; }
      .storyMeFrame .main div.turn .turn-page {
        /* 注意!turn.js 的翻頁背景色設定必須維持為.turn .turn-page{...} 這個CSS 階層路徑 */
        background-color: #ccc;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        border: #999999 solid 1px; }
      .storyMeFrame .main div.turn div {
        position: relative; }
        .storyMeFrame .main div.turn div span {
          display: none;
          position: absolute;
          bottom: 0;
          left: 0;
          padding-inline: 1.5rem;
          min-width: 3rem;
          height: 3rem;
          border-radius: 0.55rem;
          background-color: rgba(222, 16, 16, 0.5);
          line-height: 3rem;
          font-size: 1.55rem;
          text-align: center; }
        .storyMeFrame .main div.turn div img {
          display: block;
          width: 100%;
          height: auto; }

.storyMeFrame.fullscreenFix {
  padding-top: 1rem; }
  .storyMeFrame.fullscreenFix .playProgress {
    color: #fff;
    line-height: 1rem;
    font-size: 1rem; }
  .storyMeFrame.fullscreenFix .main div.turn {
    margin: 0 auto; }
  .storyMeFrame.fullscreenFix .main .resizerX {
    width: auto;
    height: calc(100vh - 35px/* margin-top:35px */ - 50px/* playControlBtns.normal height */ - 1rem - 1rem); }
  .storyMeFrame.fullscreenFix .main .resizer {
    width: auto;
    max-height: calc(100vh - 25px - 35px - 50px - 1rem - 1rem); }
  .storyMeFrame.fullscreenFix .main .resizer.herFix {
    /* 寬除以高 >= 2 時使用 */
    max-height: calc(50.5vw - 25px - 35px - 50px - 1rem - 1rem); }
  .storyMeFrame.fullscreenFix .playControlBtns.normal {
    margin-top: 15px; }

div.debuggerWrapper {
  position: absolute;
  top: -10000px;
  left: -10000px;
  width: 1024px; }

.debuggerBtn {
  color: #4699EE;
  transition-property: color;
  transition-duration: 0.3s;
  padding: 0.75rem 0.55rem;
  cursor: pointer; }
  .debuggerBtn .a {
    display: inline; }
  .debuggerBtn .b {
    display: none; }

input.debuggerIO {
  display: none; }

input.debuggerIO:checked + .debuggerBtn {
  color: #ac0a5c; }
  input.debuggerIO:checked + .debuggerBtn .a {
    display: none; }
  input.debuggerIO:checked + .debuggerBtn .b {
    display: inline; }

input.debuggerIO:checked + .debuggerBtn + div.debuggerWrapper {
  position: static;
  width: 100%; }

.eventDebugger:after {
  content: ' ';
  display: block;
  clear: left; }

.eventDebugger {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  margin-top: 0.5rem; }
  .eventDebugger dt,
  .eventDebugger dd {
    margin: 0;
    float: left; }
  .eventDebugger dt {
    color: #4699EE;
    text-align: end;
    width: 7rem;
    font-weight: bold;
    padding-inline-end: 0.55rem; }
  .eventDebugger dd {
    padding-inline-start: 0.55rem;
    width: calc(33% - 7rem - 0.55rem - 0.55rem); }
    .eventDebugger dd textarea {
      display: block;
      width: calc(100% - 2px);
      height: 10rem; }