@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;

  /* font-family: "DFKai-sb", "標楷體", "BiauKai", "Microsoft JhengHei"; */
  /* font-family:  "arial", "Microsoft JhengHei", "微軟正黑體", "sans-serif"; */
  font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;

  user-select: none;
}



#wholeMask{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100vw;
  height: 100vh;  
  
  background-color: rgba(0, 0, 0, 0);
  z-index: 2;

  display: none;
}

#wholeMask.active {
  display: block;
}


#deviceWarningDiv , #aspectRatioWarningDiv {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;

  background-color: rgba(0,0,0, 0.8 );
  color: white;

  opacity: 1.0;
  z-index: 3;
}

#deviceWarningDiv.active , #aspectRatioWarningDiv.active {
  display: block;
}


#css3D{
  position: absolute;
  top:0;
  background-color: rgba(50,155,100,0.00);
  display: block;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  /* z-index: 1; */
}

/* A-Frame「感測器同意」等 .a-modal 顯示時，勿讓 #css3D 攔截觸控（VRFunc 會轉發給 canvas 導致按鈕點不到） */
@supports selector(:has(*)) {
  body:has(.a-modal) #css3D {
    pointer-events: none !important;
  }
}

/* A-Frame 注入之權限對話框：確保可接收指標事件 */
a-scene .a-modal {
  z-index: 100;
  pointer-events: auto;
}

/* 手機直版導覽：對話／自動導覽／輸入列（由 agentModel 掛載，不經 #css3D） */
#wizardNavPortraitHost {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-sizing: border-box;
}

#wizardNavPortraitHost > * {
  pointer-events: auto;
  box-sizing: border-box;
}

/* 直版（非對話串模式）舊版單則氣泡；對話串見 .main_DiaLogDiv--chat */
#wizardNavPortraitHost #main_DiaLogDiv:not(.main_DiaLogDiv--chat) {
  --md-bubble-bg: #ffffff;
  --md-bubble-edge: #bfe9cc;
  --md-bubble-depth: #0f766e;
  --md-dialog-pad-y: clamp(10px, 2.6vh, 22px);
  --md-dialog-pad-x: clamp(12px, 3.5vw, 20px);
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 100%;
  height: auto;
  margin: 0;
  background-color: var(--md-bubble-bg);
  background-image: none;
  border-radius: clamp(14px, 3.6vw, 22px);
  border: 2px solid var(--md-bubble-edge);
  box-shadow:
    4px 5px 0 0 var(--md-bubble-depth),
    0 10px 28px rgba(15, 118, 110, 0.12);
  /* 兩行字高 (line-height 1.35) + 上下 padding；border-box 下 min-height 含 padding */
  min-height: calc(2 * 1.35 * 1em + 2 * var(--md-dialog-pad-y));
  --md-dialog-max-h: min(52vh, 72dvh);
  max-height: var(--md-dialog-max-h);
  padding: var(--md-dialog-pad-y) var(--md-dialog-pad-x);
  font-size: 16px;
  line-height: 1.35;
  overflow-x: visible;
  overflow-y: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  word-break: break-word;
  white-space: pre-wrap;
  box-sizing: border-box;
  color: #111827;
  user-select: text;
  -webkit-user-select: text;
}

/* 支援 lh 時用較精準的兩行最小高度 */
@supports (height: 1lh) {
  #wizardNavPortraitHost #main_DiaLogDiv:not(.main_DiaLogDiv--chat) {
    min-height: calc(2lh + 2 * var(--md-dialog-pad-y));
  }
}

#wizardNavPortraitHost #main_DiaLogDiv:not(.main_DiaLogDiv--chat).oneLine,
#wizardNavPortraitHost #main_DiaLogDiv:not(.main_DiaLogDiv--chat).twoLine,
#wizardNavPortraitHost #main_DiaLogDiv:not(.main_DiaLogDiv--chat).threeLine {
  padding-top: var(--md-dialog-pad-y);
  padding-bottom: var(--md-dialog-pad-y);
  padding-left: var(--md-dialog-pad-x);
  padding-right: var(--md-dialog-pad-x);
  white-space: pre-wrap;
}

#wizardNavPortraitHost #main_DiaLogDiv:not(.main_DiaLogDiv--chat).oneLine {
  line-height: 1.4;
}

#wizardNavPortraitHost #main_DiaLogDiv:not(.main_DiaLogDiv--chat).twoLine {
  line-height: 1.45;
}

#wizardNavPortraitHost #main_DiaLogDiv:not(.main_DiaLogDiv--chat).threeLine {
  line-height: 1.4;
}

#wizardNavPortraitHost #main_DiaLogDiv:not(.main_DiaLogDiv--chat) .main-dialog-body {
  align-self: stretch;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: visible;
  overflow-y: visible;
  text-align: inherit;
}

/* 直版：內層捲動區上限為視窗高度 40%（橫版見下方 #main_DiaLogDivBody.main-dialog-scroll） */
#wizardNavPortraitHost #main_DiaLogDivBody.main-dialog-scroll {
  max-height: 40vh;
  max-height: 40dvh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 電腦橫版／桌機：主對話框固定層（僅 #main_DiaLogDiv，不經 css3D） */
#wizardNavLandscapeHost {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-sizing: border-box;
}

#wizardNavLandscapeHost > * {
  pointer-events: auto;
  box-sizing: border-box;
}

/* 橫版 flat：上 10px、寬 60% max 700px、高 40% max 400px */
#wizardNavLandscapeHost #main_DiaLogDiv {
  --md-bubble-bg: #ffffff;
  --md-bubble-edge: #bfe9cc;
  --md-bubble-depth: #0f766e;
  --md-dialog-pad-y: clamp(12px, 1.8vh, 22px);
  --md-dialog-pad-x: clamp(16px, 2vw, 28px);
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  max-width: 700px;
  height: 40vh;
  height: 40dvh;
  max-height: 400px;
  margin: 0;
  background-color: var(--md-bubble-bg);
  background-image: none;
  border-radius: clamp(14px, 1.2vw, 22px);
  border: 2px solid var(--md-bubble-edge);
  box-shadow:
    5px 6px 0 0 var(--md-bubble-depth),
    0 12px 32px rgba(15, 118, 110, 0.12);
  padding: var(--md-dialog-pad-y) var(--md-dialog-pad-x);
  font-size: clamp(16px, 1.35vw, 22px);
  line-height: 1.35;
  overflow-x: visible;
  overflow-y: visible;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: center;
  word-break: break-word;
  white-space: pre-wrap;
  box-sizing: border-box;
  color: #111827;
  user-select: text;
  -webkit-user-select: text;
}

#wizardNavLandscapeHost #main_DiaLogDiv.oneLine,
#wizardNavLandscapeHost #main_DiaLogDiv.twoLine,
#wizardNavLandscapeHost #main_DiaLogDiv.threeLine {
  padding-top: var(--md-dialog-pad-y);
  padding-bottom: var(--md-dialog-pad-y);
  padding-left: var(--md-dialog-pad-x);
  padding-right: var(--md-dialog-pad-x);
  white-space: pre-wrap;
}

#wizardNavLandscapeHost #main_DiaLogDiv .main-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: visible;
  overflow-y: visible;
  text-align: inherit;
}

#wizardNavLandscapeHost #main_DiaLogDiv.main_DiaLogDiv--chat .main-dialog-body,
#wizardNavLandscapeHost #main_DiaLogDiv.main_DiaLogDiv--chat .main-dialog-body--chat {
  overflow: hidden;
}

#wizardNavLandscapeHost #main_DiaLogDivBody.main-dialog-scroll {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 100%;
}

/* 輸入列：距底 10px、寬 90%、水平置中（直版已隱藏 autoGuide，可獨佔底欄） */
#wizardNavPortraitHost #inputSendDiv {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 100%;
  height: clamp(38px, 10.5vw, 52px);
  margin: 0;
  padding-top: 0;
  background-size: 100% 100%;
  font-size: 16px;
}

#wizardNavPortraitHost #inputSendInput {
  font-size: 16px;
}

#wizardNavPortraitHost #inputSendText {
  font-size: 16px;
  line-height: clamp(38px, 10.5vw, 52px);
}

#wizardNavPortraitHost #inputSendBn {
  font-size: 16px;
  line-height: clamp(38px, 10.5vw, 52px);
}

/* ── 主對話框：對話串模式（直版／橫版共用；白底黑框氣泡、建議跳轉） ── */
#wizardNavPortraitHost #main_DiaLogDiv.main_DiaLogDiv--chat,
#wizardNavLandscapeHost #main_DiaLogDiv.main_DiaLogDiv--chat {
  background-color: rgba(255, 255, 255, 0.94);
  background-image: none;
  border: 1px solid #111827;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
  text-align: unset;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
  overflow: hidden;
}

/* 直版：版面與橫版相同（上 10px、高 40% max 400px；寬 90% max 700px） */
#wizardNavPortraitHost #main_DiaLogDiv.main_DiaLogDiv--chat {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 700px;
  padding: 8px 10px;
  height: 40vh;
  height: 40dvh;
  max-height: 400px;
  min-height: 0;
  margin: 0;
  font-size: 16px;
}

/* 直版對話串：氣泡與建議跳轉字級約 16px */
#wizardNavPortraitHost .main-dialog-msg,
#wizardNavPortraitHost .main-dialog-jump-suggest__text {
  font-size: 16px;
  line-height: 1.45;
}

#wizardNavPortraitHost .main-dialog-jump-suggest__btn {
  font-size: 16px;
}

#wizardNavLandscapeHost #main_DiaLogDiv.main_DiaLogDiv--chat {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  max-width: 700px;
  padding: 8px 10px;
  height: 40vh;
  height: 40dvh;
  max-height: 400px;
  min-height: 0;
  margin: 0;
}

/* 對話模式：覆蓋 host 上 overflow:visible，避免內容畫在框外 */
#wizardNavPortraitHost #main_DiaLogDiv.main_DiaLogDiv--chat,
#wizardNavLandscapeHost #main_DiaLogDiv.main_DiaLogDiv--chat {
  overflow: hidden;
}

#wizardNavPortraitHost #main_DiaLogDiv.main_DiaLogDiv--chat .main-dialog-body,
#wizardNavPortraitHost #main_DiaLogDiv.main_DiaLogDiv--chat .main-dialog-body--chat,
#wizardNavLandscapeHost #main_DiaLogDiv.main_DiaLogDiv--chat .main-dialog-body,
#wizardNavLandscapeHost #main_DiaLogDiv.main_DiaLogDiv--chat .main-dialog-body--chat {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: unset;
  align-self: stretch;
}

/* 訊息列表：block 由上而下堆疊 */
#wizardNavPortraitHost #main_DiaLogDiv.main_DiaLogDiv--chat .main-dialog-messages,
#wizardNavLandscapeHost #main_DiaLogDiv.main_DiaLogDiv--chat .main-dialog-messages,
.main-dialog-messages {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  display: block;
  padding: 4px 2px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.main-dialog-messages.main-dialog-scroll {
  overflow-y: auto;
}

.main-dialog-msg {
  display: block;
  width: fit-content;
  max-width: 60%;
  background: #ffffff;
  border: 1px solid #000000;
  border-radius: 6px;
  padding: clamp(6px, 1vh, 10px) clamp(10px, 1.5vw, 14px);
  margin: 0 0 clamp(6px, 1.2vh, 10px);
  margin-right: auto;
  margin-left: 0;
  word-break: break-word;
  white-space: pre-wrap;
  direction: ltr;
  text-align: left;
  line-height: 1.45;
  color: #111827;
  box-sizing: border-box;
  user-select: text;
  -webkit-user-select: text;
}

.main-dialog-msg:last-child {
  margin-bottom: 0;
}

.main-dialog-msg--ai {
  margin-left: 0;
  margin-right: auto;
}

/* 使用者氣泡靠右；框內文字仍靠左（繼承 .main-dialog-msg text-align: left） */
.main-dialog-msg--user {
  margin-left: auto;
  margin-right: 0;
}

/* 建議跳轉（僅在 #main_DiaLogDiv 對話串內） */
#wizardNavPortraitHost .main-dialog-jump-suggest,
#wizardNavLandscapeHost .main-dialog-jump-suggest {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 clamp(8px, 1.2vh, 12px);
  margin-left: 0;
  margin-right: auto;
  padding: clamp(10px, 1.4vh, 14px) clamp(12px, 1.8vw, 16px);
  background: #ffffff;
  border: 2px solid #0f766e;
  border-radius: 8px;
  box-sizing: border-box;
}

#wizardNavPortraitHost .main-dialog-jump-suggest__text,
#wizardNavLandscapeHost .main-dialog-jump-suggest__text {
  text-align: left;
  direction: ltr;
  line-height: 1.45;
  color: #111827;
  word-break: break-word;
  white-space: pre-wrap;
  margin-bottom: clamp(10px, 1.4vh, 14px);
}

#wizardNavPortraitHost .main-dialog-jump-suggest__actions,
#wizardNavLandscapeHost .main-dialog-jump-suggest__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 1.2vw, 14px);
}

#wizardNavPortraitHost .main-dialog-jump-suggest__btn,
#wizardNavLandscapeHost .main-dialog-jump-suggest__btn {
  border: none;
  border-radius: 30px;
  padding: clamp(8px, 1.2vh, 12px) clamp(18px, 2.5vw, 28px);
  line-height: 1.25;
  cursor: pointer;
  min-width: clamp(96px, 22vw, 120px);
  box-sizing: border-box;
}

#wizardNavLandscapeHost .main-dialog-jump-suggest__btn {
  font-size: clamp(14px, 1.2vw, 18px);
}

#wizardNavPortraitHost .main-dialog-jump-suggest__btn--go,
#wizardNavLandscapeHost .main-dialog-jump-suggest__btn--go {
  background: #0f766e;
  color: #ffffff;
}

#wizardNavPortraitHost .main-dialog-jump-suggest__btn--cancel,
#wizardNavLandscapeHost .main-dialog-jump-suggest__btn--cancel {
  background: #f3f4f6;
  color: #111827;
  border: 1px solid #6b7280;
}

#wizardNavPortraitHost .main-dialog-jump-suggest__btn.is-disabled,
#wizardNavPortraitHost .main-dialog-jump-suggest__btn:disabled,
#wizardNavLandscapeHost .main-dialog-jump-suggest__btn.is-disabled,
#wizardNavLandscapeHost .main-dialog-jump-suggest__btn:disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}


/*  放在「導覽模型」頭上的文字框  start — 橫版：純 CSS 氣泡（淺綠邊＋青綠「厚度」陰影，無背景圖） */
#main_DiaLogDiv{
  --md-bubble-bg: #ffffff;
  --md-bubble-edge: #bfe9cc;
  --md-bubble-depth: #0f766e;

  width: 1145px;
  min-height: 300px;
  height: auto;

  background-color: var(--md-bubble-bg);
  background-image: none;
  border-radius: 22px;
  border: 2px solid var(--md-bubble-edge);
  box-shadow:
    6px 8px 0 0 var(--md-bubble-depth),
    0 14px 40px rgba(15, 118, 110, 0.14);

  box-sizing: border-box;
  color: #111827;
  font-size: 40px;
  line-height: 1.35;
  padding: 28px 36px 32px;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-x: visible;
  overflow-y: visible;

  user-select: text;
  -webkit-user-select: text;
}

#main_DiaLogDiv .main-dialog-body {
  flex: 0 1 auto;
  min-width: 0;
  width: 100%;
  overflow-x: visible;
  overflow-y: visible;
}

#main_DiaLogDiv.oneLine{
  padding: 26px 36px 28px;
  line-height: 1.25;
  white-space: nowrap;
}

#main_DiaLogDiv.twoLine{
  padding: 24px 36px 32px;
  line-height: 1.4;
  white-space: pre-wrap;
}

#main_DiaLogDiv.threeLine{
  padding: 24px 36px 30px;
  line-height: 1.35;
  white-space: nowrap;
}

/* 未掛載於 portrait／landscape host 時的捲動上限（現行主對話框皆在 host 內） */
#main_DiaLogDivBody.main-dialog-scroll {
  max-height: min(40vh, 400px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/*  放在「導覽模型」頭上的文字框  end */


/* 「導覽模型」在還未走進時候的 自我介紹對話框 start  */
#md_far_DiaLogDiv{

  width: 945px;
  height: 300px;
  
  /* background-color: white; */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  color: black;
  
  font-size: 70px;
  padding-top: 40px;
  line-height: 60px;
  /* white-space: nowrap; */
 
  padding-top: 15px;
  line-height: 100px;
  white-space: pre-wrap;


  user-select: none;
}

#md_far_DiaLogDiv.large {

  width: 900px;
  height: 530px;
  background-size: 100% 100%;
  padding: 20px;
  text-align: left;

}

#md_far_DiaLogText{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  /* height: 80%; */
  transform: translate(-50%, -67%);
  white-space:pre-line;

  overflow: auto;
  word-break: break-all;
  text-align: center;
}

#md_far_DiaLogText.large{
  transform: translate(-50%, -62%);
  text-align: start;
}




/* 「導覽模型」在還未走進時候的 自我介紹對話框 end  */



/*  「自動導覽按鈕」 start  */
#autoGuideDiv{
  width: 400px;
  height: 100px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  color: white;
  font-size: 40px;
  line-height: 80px;

  user-select: none;

}

#autoGuideDiv.disable{
  background-image: url('https://mifly-web-custom.s3.ap-northeast-1.amazonaws.com/vr_webChat/images/0818/button/btn_guide_disabled.png');

  pointer-events: none;
}

/* 直版：隱藏自動導覽按鈕（含 #wizardNavPortraitHost 內） */
@media (orientation: portrait) {
  #autoGuideDiv {
    display: none !important;
    pointer-events: none !important;
  }
}

/*  「自動導覽按鈕」 end */




/*  使用者輸入框 start  */

#inputSendDiv{
  width: 1000px;
  height: 75px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  
  color: white;
  
  font-size: 40px;
  padding-top: 0px;

  /* user-select: none; */

}

#inputSendDiv.disable{
  background-image: url('https://mifly-web-custom.s3.ap-northeast-1.amazonaws.com/vr_webChat/images/0818/inputbox/inputbox_disabled.png');
}

#inputSendForm{
  position: absolute;
  top: 0%;
  left: 0%;
  width:87%;
  height:100%;
}

#inputSendInput{
  position: absolute;
  top: 0%;
  left: 4%;
  width: 96%;
  height: 100%;

  outline:0;
  background-color: rgba(0,0,0,0);
  border: 0;

  color: black;
  font-size: 40px;
}

#inputSendText{
  position: absolute;
  top: 0%;
  left: 4%;
  width: 96%;
  height: 100%;
  color: gray;
  font-size: 40px;
  line-height: 70px;

  text-align: left;
  pointer-events: none;

}

#inputSendInput:focus { 
  outline: none;
  border: 0;
  background-color: rgba(0,0,0,0);

  box-shadow: 0;

}

#inputSendBn{
  position: absolute;
  top: 0%;
  left: 88%;
  width: 12%;
  height: 100%;

  cursor: pointer;

  user-select: none;

  font-size: 40px;
  line-height: 70px;

}

/*  使用者輸入框 end  */



/*  文字白板 1 場景介紹：帶有「標題」「內容」「左上方logo」 start */

#intro1BoardDiv{
  position: absolute;
  width: 1037px;
  height: 605px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

}

#intro1BoardClose{
  position: absolute;
  right: -75px;
  top: -75px;
  width: 70px;
  height: 75px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

}


#intro1Board_logo_div{
  position: absolute;
  top: 7%;
  right: 3%;
  width: 20%;
  height: 25%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

}

#intro1Board_title_div{
  position: absolute;
  top: 7%;
  left: 8%;
  width: 70%;
  height: 25%;

  font-size: 40px;
  font-weight: bolder;
  overflow: hidden;
}

#intro1Board_title_tw_div , #intro1Board_title_en_div{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 99%;
  height: 47%;

  text-align: start;
  white-space: nowrap;
}

#intro1Board_title_en_div{
  top: 50%;
}

#intro1Board_info_div{
  position: absolute;
  top: 35%;
  left: 8%;
  width: 88%;
  height: 55%;

  font-size: 25px;

  overflow: hidden;
}

#intro1Board_info_tw_div , #intro1Board_info_en_div{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 99%;
  height: 40%;

  text-align: start;
}

#intro1Board_info_en_div{
  top: 42%;
  height: 57%;
}


/* 文字白板 1 場景介紹 end */


/* 文字版面 2 start */
#text2_board_div , .text2_board_div
{
  position: absolute;
  width: 1037px;
  height: 625px;

  
}

.text2_board_div.disable {
  opacity: 0.3;
}

.text_ai_suggest_scene_info_div {
  position: absolute;
  top: 1%;
  left: 1%;
  width: 98%;
  height: 75%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  font-size: 30px;
  color: black;
}

.text_go_scene_btn{
  position: absolute;
  top: calc(100% - 90px);
  left: calc( 50% - 100px );
  width: 250px;
  height: 60px;

  background-color: rgb(79, 198, 95);
  border-radius: 50px;

  color: white;
  font-size: 35px;
  line-height: 60px;
  text-align: center;

}


#text2_info_div ,
.text2_info_div 
{
  position: absolute;
  top: 1%;
  left: 1%;
  width: 98%;
  height: 75%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  font-size: 30px;
  color: black;

}

.text2_info_text{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  height: 80%;
  transform: translate(-47%, -50%);
  white-space:pre-line;

  overflow: auto;

  word-break: break-all;

  text-align: start;

  font-size: 32px;
}

#text2_close_div , .text2_close_div{
  position: absolute;
  top: 80%;
  height: 20%;
  /* height: 105px; */

  color: white;
  font-size: 35px;
  line-height: 115px;
  text-align: center;

  left: 1%;
  width: 98%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

}


/* 文字版面 2 end */


/* 圖片版面 1 start */

#image1_board_div , .image1_board_div {
  position: absolute;
  width: 1037px;
  height: 790px;

  background-color: rgba(0,0,0,0.5);
}

#image1_background_div , #image1_close_div ,
.image1_background_div , .image1_close_div
{
  position: absolute;
  top: 1%;
  left: 1%;
  width: 98%;
  height: 75%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#image1_info_div , .image1_info_div {
  position: absolute;
  top: 5%;
  left: 3%;
  width: 94%;
  height: 90%;

  border-radius: 25px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  background-color: rgba(0,0,70,0.5);
}

#image1_close_div , .image1_close_div{
  position: absolute;
  top: 80%;
  height: 14%;
  /* height: 105px; */

  color: white;
  font-size: 35px;
  line-height: 115px;
  text-align: center;
}

/* 圖片版面 1 end */







/* 文字圖片版面 1 start */


#textImage1_board_div , .textImage1_board_div {
  position: absolute;
  width: 1037px;
  height: 1037px;

  /* background-color: rgba(0,0,0,0.5); */
  
}

#textImage1_text_div, #textImage1_imgBG_div , #textImage1_close_div ,
.textImage1_text_div, .textImage1_imgBG_div , .textImage1_close_div
{
  position: absolute;
  top: 1%;
  left: 5%;
  width: 94%;
  height: 25%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#textImage1_text_div , .textImage1_text_div {
  left: 1%;
  width: 98%;
}

.textImage1_text_info{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  height: 80%;
  transform: translate(-47%, -50%);
  white-space:pre-line;

  overflow: auto;

  word-break: break-all;

  text-align: start;

  font-size: 32px;
}

#textImage1_imgBG_div , .textImage1_imgBG_div {
  top: 29%;
  height: 55%;
}

#textImage1_imgInfo_div , .textImage1_imgInfo_div {
  position: absolute;
  top: 5%;
  left: 3%;
  width: 94%;
  height: 90%;

  border-radius: 0px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  /* background-color: rgba(0,0,70,0.5); */
}

#textImage1_close_div , .textImage1_close_div {
  position: absolute;
  top: 88%;
  height: 11%;
  /* height: 105px; */

  color: white;
  font-size: 35px;
  line-height: 95px;
  text-align: center;
}





/* 文字圖片版面 1 end */





/* 卡片版面 1 start */

#card1_board_div , .card1_board_div {
  position: absolute;
  width: 1037px;
  height: 725px;

}

.card1_board_div.disable{
  opacity: 0.3;
}

#card1_text_div , #card1_button_div , #card1_close_div , 
.card1_text_div , .card1_button_div , .card1_close_div
{
  position: absolute;
  top: 1%;
  left: 1%;
  width: 98%;
  height: 26%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  color: black;
  font-size: 35px;
  text-align: center;
}

#card1_button_div , .card1_button_div{
  top: 32%;
  height: 44%;

  color: white;
}


#card1_close_div , .card1_close_div {
  top: 80%;
  height: 15%;

  color: white;
  font-size: 35px;
  line-height: 95px;
  text-align: center;
}


/* 卡片版面 1 end */

/* 卡片版面 2 start */

#card2_board_div , .card2_board_div{
  position: absolute;
  width: 1037px;
  height: 725px;

  background-color: rgba(0,0,0,0.5);
}

#card2_text_div, #card2_button_1_div , #card2_button_2_div , #card2_close_div ,
.card2_text_div, .card2_button_1_div , .card2_button_2_div , .card2_close_div
{
  position: absolute;
  top: 1%;
  left: 1%;
  width: 98%;
  height: 26%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  color: black;
  font-size: 35px;
  text-align: center;
}

#card2_button_1_div , .card2_button_1_div{
  left: 1%;
  top: 32%;
  width: 45%;
  height: 44%;
}

#card2_button_2_div , .card2_button_2_div{
  left: 54%;
  top: 32%;
  width: 45%;
  height: 44%;
}

#card2_close_div , .card2_close_div{
  top: 80%;
  height: 15%;

  color: white;
  font-size: 35px;
  line-height: 95px;
  text-align: center;
}


/* 卡片版面 2 end */


/* 卡片版面 3 start */

#card3_board_div , .card3_board_div {
  position: absolute;
  width: 1037px;
  height: 725px;

  
}

.card3_board_div.disable{
  opacity: 0.3;
}

._mask{
  display: none;

  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;

  background-color: rgba(5,58,54,0.7);
  border-radius: 30px;
  z-index: 1;
}

._mask.active{
  display: block;
}

.card3_button_container , .card4_button_container{
  
  position: absolute;
  top: 32%;
  left: 1%;
  width: 98%;
  height: 42%;

  /* background-color: rgba(0,150,0,0.3); */

  display: flex;
  flex-direction: row;
  justify-content: space-between;

  overflow: hidden;

  font-size: 32px;
  color: white;

}

.card4_button_container{
  top: 52%;
  height: 30%;
}

.card3_button_div , .card4_button_div {

  position: relative;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;

  width: 28%;
  height: 99%;

  margin-left: 2.6%;
  margin-right: 2.6%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

}

.card3_button_div.disable , .card4_button_div.disable {
  display: none;
}

.card3_left_arrow , .card3_right_arrow,
.card4_left_arrow , .card4_right_arrow
{

  position: absolute;
  top: 45%;
  left: -7%;
  width: 6%;
  height: 14%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.card3_right_arrow , .card4_right_arrow {
  left: 101%;
}



#card3_text_div, #card3_button_1_div , #card3_button_2_div , #card3_button_3_div , #card3_close_div ,
.card3_text_div, .card3_button_1_div , .card3_button_2_div , .card3_button_3_div , .card3_close_div
{
  position: absolute;
  top: 1%;
  left: 1%;
  width: 98%;
  height: 26%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  color: black;
  font-size: 35px;
  text-align: center;

  overflow: hidden;

}

#card3_button_1_div, #card3_button_2_div , #card3_button_3_div ,
.card3_button_1_div, .card3_button_2_div , .card3_button_3_div
{
  left: 1%;
  top: 32%;
  width: 28%;
  height: 44%;
}

#card3_button_2_div , .card3_button_2_div {
  left: 36%;
}

#card3_button_3_div , .card3_button_3_div {
  left: 71%;
}

#card3_close_div , .card3_close_div {
  top: 80%;
  height: 15%;

  color: white;
  font-size: 35px;
  line-height: 95px;
  text-align: center;
}


/* 卡片版面 3 end */





/* 卡片版面 4 start */

#card4_board_div , .card4_board_div {
  position: absolute;
  width: 1037px;
  height: 1037px;

  /* background-color: rgba(0,0,0,0.5); */
}

.card4_board_div.disable {
  opacity: 0.3;
}

#card4_diag_div, #card4_text_div, #card4_button_1_div , #card4_button_2_div , #card4_button_3_div , #card4_close_div ,
.card4_diag_div, .card4_text_div, .card4_button_1_div , .card4_button_2_div , .card4_button_3_div , .card4_close_div
{
  position: absolute;
  top: 1%;
  left: 1%;
  width: 98%;
  height: 25%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  color: black;
  font-size: 35px;
  text-align: center;
}

#card4_diag_div , .card4_diag_div {
  left: 1%;
  width: 98%;  
  overflow: hidden;
}

#card4_text_div , .card4_text_div{
  top: 30%;
  left: 5%;
  width: 94%;
  height: 19%;
}

#card4_button_1_div , #card4_button_2_div , #card4_button_3_div ,
.card4_button_1_div , .card4_button_2_div , .card4_button_3_div
{
  left: 5%;
  top: 53%;
  width: 28%;
  height: 30%;
}

#card4_button_2_div , .card4_button_2_div {
  left: 38%;
}

#card4_button_3_div , .card4_button_3_div {
  left: 71%;
}

#card4_close_div , .card4_close_div {
  top: 83%;
  left: 5%;
  width: 94%;
  height: 15%;

  color: white;
  font-size: 35px;
  line-height: 140px;
  text-align: center;
}


/* 卡片版面 4 end */







/* 各種共用類型 start */

/* 單行完全置中文字 */
.singleLineText{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  white-space:nowrap;

  /* color: white; */

  overflow: hidden;
  text-overflow: ellipsis;
}


/* 多行完全置中文字 */
.multipleLineText{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  /* height: 80%; */
  transform: translate(-50%, -50%);
  white-space:pre-wrap;
  /* color: white; */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 換行置中文字 */
.wrapText{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  white-space:pre-wrap;
  overflow: hidden;
  word-break: break-all;
}


/* 各種共用類型 end */


/* 文字內容中，帶有連結部份 start  */

._text_link{
  text-decoration: underline;
  color: blue;
}

/* 文字內容中，帶有連結部份 end  */

/* 文字內容中，帶有再次詢問部份 start  */

._text_chat{
  text-decoration: underline;
  color: rgb(0, 140, 255);
  cursor: pointer;
}


/* 文字內容中，帶有再次詢問部份 end  */