@charset "UTF-8";
/* Create with Compass + SCSS on windows */
/* ... 數位典藏-有聲書 by齊力樂門20241101 ... */
.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%; }

/* device orientation utility begin */
@media (device-width: 1024px) and (device-height: 1366px) and (orientation: portrait) {
  /* css rules for ipad pro portrait */
  .storyMeFrame .-Ping {
    font-family: "device-portrait"; }
  .storyMeFrame .verInfo .css {
    color: #B4DC0B; }
    .storyMeFrame .verInfo .css:before {
      content: "502:16:56"; } }

@media (device-width: 1366px) and (device-height: 1024px) and (orientation: landscape) {
  /* css rules for ipad pro landscape */
  .storyMeFrame .-Ping {
    font-family: "device-landscape"; }
  .storyMeFrame .verInfo .css {
    color: #B4DC0B; }
    .storyMeFrame .verInfo .css:before {
      content: "502:16:56"; } }

@media (device-width: 1620px) and (device-height: 2160px) and (orientation: portrait) {
  /* css rules for ipad 8th generation portrait */
  .storyMeFrame .-Ping {
    font-family: "device-portrait"; }
  .storyMeFrame .verInfo .css {
    color: #B4DC0B; }
    .storyMeFrame .verInfo .css:before {
      content: "502:16:56"; } }

@media (device-width: 2160px) and (device-height: 1620px) and (orientation: landscape) {
  /* css rules for ipad 8th generation landscape */
  .storyMeFrame .-Ping {
    font-family: "device-landscape"; }
  .storyMeFrame .verInfo .css {
    color: #B4DC0B; }
    .storyMeFrame .verInfo .css:before {
      content: "502:16:56"; } }

@media (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
  /* css rules for ipad portrait */
  .storyMeFrame .-Ping {
    font-family: "device-portrait"; }
  .storyMeFrame .verInfo .css {
    color: #B4DC0B; }
    .storyMeFrame .verInfo .css:before {
      content: "502:16:56"; } }

@media (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) {
  /* css rules for ipad landscape */
  .storyMeFrame .-Ping {
    font-family: "device-landscape"; }
  .storyMeFrame .verInfo .css {
    color: #B4DC0B; }
    .storyMeFrame .verInfo .css:before {
      content: "502:16:56"; } }

@media only screen and (min-width: 790px) and (max-width: 810px) and (min-height: 1060px) and (max-height: 1080px) and (orientation: portrait) {
  /* css rules for ipad viewport[810x1080] portrait */
  .storyMeFrame .-Ping {
    font-family: "device-portrait"; }
  .storyMeFrame .verInfo .css {
    color: #D944A9; }
    .storyMeFrame .verInfo .css:before {
      content: "502:16:56"; } }

@media (min-width: 1060px) and (max-width: 1080px) and (min-height: 707px) and (max-height: 809.98px) and (orientation: landscape) {
  /* css rules for ipad viewport[1080x810] landscape */
  .storyMeFrame .-Ping {
    font-family: "device-landscape"; }
  .storyMeFrame .verInfo .css {
    color: #E7A762; }
    .storyMeFrame .verInfo .css:before {
      content: "502:16:56"; } }

@media (min-width: 568px) and (max-width: 975.98px) and (orientation: landscape) {
  /* css rules for most handheld device landscape */
  .storyMeFrame .-Ping {
    font-family: "device-landscape"; } }

@media (min-width: 320px) and (orientation: portrait) {
  /* css rules for most handheld device portrait */
  .storyMeFrame .-Ping {
    font-family: "device-portrait"; } }

/* device orientation utility end */
/* device orientation landscape into fullscreen fix begin */
@media (device-width: 1366px) and (device-height: 1024px) and (orientation: landscape) {
  /* css rules for ipad pro landscape */
  .storyMeFrame {
    width: inherit;
    padding-inline: 0; }
  .storyMeFrame.fullscreenFix .main {
    width: calc(90vw - 65px - 65px);
    margin: 0 auto; }
    .storyMeFrame.fullscreenFix .main div.turn {
      margin: 0 auto; }
    .storyMeFrame.fullscreenFix .main .resizer,
    .storyMeFrame.fullscreenFix .main .resizer.herFix {
      width: 100%;
      /*height: calc(100vh - 0px - 10px - 50px - 1rem);*/
      max-height: inherit; } }

@media (device-width: 2160px) and (device-height: 1620px) and (orientation: landscape) {
  /* css rules for ipad 8th generation landscape */
  .storyMeFrame {
    width: inherit;
    padding-inline: 0; }
  .storyMeFrame.fullscreenFix .main {
    width: calc(90vw - 65px - 65px);
    margin: 0 auto; }
    .storyMeFrame.fullscreenFix .main div.turn {
      margin: 0 auto; }
    .storyMeFrame.fullscreenFix .main .resizer,
    .storyMeFrame.fullscreenFix .main .resizer.herFix {
      width: 100%;
      /*height: calc(100vh - 0px - 10px - 50px - 1rem);*/
      max-height: inherit; } }

@media (min-width: 1060px) and (max-width: 1080px) and (min-height: 707px) and (max-height: 809.98px) and (orientation: landscape) {
  /* css rules for ipad viewport[1080x810] landscape */
  .storyMeFrame {
    width: inherit;
    padding-inline: 0; }
  .storyMeFrame.fullscreenFix .main {
    width: calc(90vw - 65px - 65px);
    margin: 0 auto; }
    .storyMeFrame.fullscreenFix .main div.turn {
      margin: 0 auto; }
    .storyMeFrame.fullscreenFix .main .resizer,
    .storyMeFrame.fullscreenFix .main .resizer.herFix {
      width: 100%;
      /*height: calc(100vh - 0px - 10px - 50px - 1rem);*/
      max-height: inherit; } }

@media (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) {
  /* css rules for ipad landscape */
  .storyMeFrame {
    width: inherit;
    padding-inline: 0; }
  .storyMeFrame.fullscreenFix .main {
    width: calc(90vw - 65px - 65px);
    margin: 0 auto; }
    .storyMeFrame.fullscreenFix .main div.turn {
      margin: 0 auto; }
    .storyMeFrame.fullscreenFix .main .resizer,
    .storyMeFrame.fullscreenFix .main .resizer.herFix {
      width: 100%;
      /*height: calc(100vh - 0px - 10px - 50px - 1rem);*/
      max-height: inherit; } }

@media (min-width: 568px) and (max-width: 975.98px) and (orientation: landscape) {
  /* css rules for most handheld device landscape */
  .storyMeFrame.fullscreenFix .main div.turn {
    margin: 0 auto; }
  .storyMeFrame.fullscreenFix .main .resizer,
  .storyMeFrame.fullscreenFix .main .resizer.herFix {
    width: auto;
    /*height: calc(100vh - 0px - 10px - 50px - 1rem);*/
    max-height: calc(100vh - 60px - 10px - 50px - 1rem); } }

/* device orientation landscape into fullscreen fix end */
@media (min-width: 568px) and (max-width: 975.98px) and (orientation: landscape) {
  .storyMeFrame {
    padding: 0;
    /*width: 100%;*/ }
    .storyMeFrame .controlBtn {
      /* background-color: rgba(255 , 255 , 255 , 0.5); */
      width: 5vw; }
      .storyMeFrame .controlBtn.prevBtn {
        left: -5vw; }
      .storyMeFrame .controlBtn.nextBtn {
        right: -5vw; }
    .storyMeFrame .hinter {
      top: 45px;
      left: 0;
      right: 0;
      width: 100%;
      bottom: -0.25rem; }
      .storyMeFrame .hinter .playControlBtns .playBtn img {
        width: 68px; }
    .storyMeFrame .issued,
    .storyMeFrame .playProgress {
      line-height: 45px;
      font-size: 0.85rem; }
    .storyMeFrame .preOpenNote {
      font-size: 0.85rem; }
    .storyMeFrame .playControlBtns.normal + .preOpenNote {
      margin-top: 0.35rem;
      display: block;
      text-align: right; }
    .storyMeFrame .playControlBtns {
      margin-top: 0; }
    .storyMeFrame .playControlBtns.normal {
      margin-top: 10px !important;
      /*position: absolute;
            left: 5vw;
            bottom: calc(1rem + 0.35rem);
            z-index: 9;*/
      justify-content: space-between; }
      .storyMeFrame .playControlBtns.normal .wrapper {
        margin-inline-end: 10px; }
      .storyMeFrame .playControlBtns.normal .wrapper.fixRight {
        /*margin-left: auto;*/ }
      .storyMeFrame .playControlBtns.normal .preOpenNote {
        display: none; }
  .storyMeFrame.fullscreenFix {
    padding-top: 0.25rem;
    /*.playControlBtns.normal{
            margin-top:0;
            position: absolute;
            bottom: 15px;
        }*/ }
    .storyMeFrame.fullscreenFix .playProgress {
      color: #fff;
      line-height: 0.75rem;
      font-size: 0.75rem;
      padding-inline-end: 1rem; }
    .storyMeFrame.fullscreenFix .controlBtn {
      height: 50%; }
      .storyMeFrame.fullscreenFix .controlBtn.prevBtn {
        left: 1.25vw; }
      .storyMeFrame.fullscreenFix .controlBtn.nextBtn {
        right: 1.25vw; }
    .storyMeFrame.fullscreenFix .hinter {
      top: 0;
      bottom: 0; } }

@media (min-width: 320px) and (orientation: portrait) {
  .storyMeFrame {
    padding: 0 8vw;
    /*width: 100%;*/
    /* background-color: rgb(23, 126, 243); */ }
    .storyMeFrame .issued,
    .storyMeFrame .playProgress {
      font-size: 1.05rem;
      line-height: 2.25rem; }
    .storyMeFrame .controlBtn {
      /* background-color: rgba(255 , 255 , 255 , 0.5); */
      width: 8vw; }
    .storyMeFrame .hinter {
      top: 2.25rem;
      left: 0;
      right: 0;
      width: 100%; }
      .storyMeFrame .hinter .playControlBtns {
        margin-top: -3.5rem; }
        .storyMeFrame .hinter .playControlBtns .playBtn {
          padding: 5vw; }
    .storyMeFrame .playControlBtns.doSelectedPlay {
      margin-top: -3.5rem; }
    .storyMeFrame .playControlBtns.normal {
      margin-top: 10px;
      justify-content: space-between; }
      .storyMeFrame .playControlBtns.normal .wrapper {
        margin-inline-end: 6px; }
      .storyMeFrame .playControlBtns.normal .wrapper.fixRight {
        /*margin-left: auto;*/ }
      .storyMeFrame .playControlBtns.normal .storyBtn img {
        width: 30px; } }

@media (orientation: portrait) {
  .storyMeFrame {
    margin-inline: 0;
    width: 100%; }
    .storyMeFrame.handSpecial * {
      display: none !important; }
    .storyMeFrame.handSpecial .orientationTip {
      display: block !important; }
    .storyMeFrame .playControlBtns.normal + .preOpenNote {
      display: block; }
    .storyMeFrame .preOpenNote {
      font-size: 0.85rem; }
    .storyMeFrame .playControlBtns.normal .preOpenNote {
      display: none; }
    .storyMeFrame .playControlBtns.normal .wrapper.fixRight {
      /*margin-left: auto;*/ }
    .storyMeFrame .playControlBtns.normal .wrapper.widthFix .storyBtn img {
      width: auto;
      height: 30px; }
    .storyMeFrame .playControlBtns.doSelectedPlay {
      width: calc(100vw - 8vw - 8vw);
      text-align: center; }
      .storyMeFrame .playControlBtns.doSelectedPlay .headPlayBtn,
      .storyMeFrame .playControlBtns.doSelectedPlay .resumePlayBtn {
        height: 3rem;
        width: auto; }
        .storyMeFrame .playControlBtns.doSelectedPlay .headPlayBtn img,
        .storyMeFrame .playControlBtns.doSelectedPlay .resumePlayBtn img {
          width: auto;
          height: 100%; } }

@media (min-width: 320px) and (orientation: portrait) {
  .eventDebugger dt,
  .eventDebugger dd {
    padding: 0;
    text-align: start;
    width: 100%;
    float: none; }
  .eventDebugger dd {
    margin-block-end: 0.55rem; }
    .eventDebugger dd textarea {
      height: 6rem; } }