/* file: _variable */
/* btn */
/* border */
/* txt */
/* bg */
/* file: _mymain.sass */
/* ============================================================ */
/*                      general                                 */
/* ============================================================ */
body,
html {
  font-family: "PingFangTC-Regular", "Microsoft JhengHei", "STHeitiSC-Light", "Helvetica-Light", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Droid Sans Fallback";
  font-variant-numeric: normal;
  line-height: 1.5;
  letter-spacing: 0px;
  font-size: 1rem;
  position: relative;
  width: 100%;
  height: 100vh;
}

input,
textarea,
select {
  font-family: "PingFangTC-Regular", "Microsoft JhengHei", "STHeitiSC-Light", "Helvetica-Light", arial, sans-serif;
}

p {
  font-size: 1rem;
  color: #000;
  margin: 0.5rem 0;
  line-height: 1.5;
  font-size: 1rem;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: #007cc5;
  -webkit-backface-visibility: hidden;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}

*:focus {
  outline: 0;
}

* {
  box-sizing: border-box;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}

input[type="submit"] {
  padding: 0;
  border: none;
}

input[type="text"], input[type="search"], input[type="password"], input[type="number"], input[type="tel"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="search"], input[type="password"], input[type="number"], input[type="tel"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 5px;
  background: #fff;
  height: 40px;
  padding: 0.375rem 0.75rem;
  border: 1px solid #fff;
}

input:focus {
  border: 1px solid #007cc5;
}

::placeholder {
  color: #919191;
}

a.show-link {
  color: #007cc5;
}
a.show-link:hover {
  /* font-weight: bold; */
}

/* ============================================================ */
/*                      elements                                */
/* ============================================================ */
.row {
  width: 100%;
  padding: 0 1rem;
}

.btn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.btn {
  display: inline-block;
  border-radius: 5px;
  height: 46px;
  font-size: 1.0625rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn:hover {
  background: #007cc5;
  color: #fff;
}

.btn-full {
  width: 100%;
}

.btn-confirm {
  background: #007cc5;
  color: #fff;
}

.btn-normal {
  background: #fff;
  color: #414141;
  font-weight: bold;
}

.btn-one-icon {
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 5px;
  background-color: #007cc5;
  background-position: center center;
  background-image: url("../img/menu-toggle@2x.png");
  background-repeat: no-repeat;
  background-size: auto 20px;
}

/* ============================================================ */
/*                         layout                               */
/* ============================================================ */
.mask {
  width: 100%;
  height: 100vh;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}

.mask.mode-popup {
  z-index: 998;
  display: block;
}

header {
  width: 100%;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
}

header.mode-popup {
  z-index: 999;
}

.main-wrapper {
  overflow-y: auto;
  width: 100%;
  height: calc(100vh - 150px);
  position: absolute;
  z-index: 1;
  top: 85px;
  left: 0;
  display: flex;
  flex-direction: column;
}

footer {
  width: 100%;
  position: fixed;
  z-index: 0;
  top: auto;
  left: 0;
  bottom: 0;
}

footer.mode-popup {
  z-index: 999;
}

.input-bar {
  position: fixed;
  z-index: 2;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
}

.lock-scroll {
  position: fixed;
  overflow-y: hidden;
}

/* ============================================================ */
/*                      top menu                                 */
/* ============================================================ */
.top-bar-outer {
  width: 100%;
  background: #fff;
}

.top-bar {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 0.5rem;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-bar > * {
  background-position: center center;
  background-repeat: no-repeat;
}
.top-bar .title{
  font-size: 1.15rem;
  font-weight: bold;
}
.top-bar .logo {
  height: 50px;
  width: 240px;
}
.top-bar .logo.styleSKL {
  background-image: url("../img/logo-skl@2x.png");
  background-size: 220px auto;
  background-position: center center;
}
.top-bar .top-toggle {
  height: 40px;
  width: 40px;
  cursor: pointer;
  background-image: url("../img/topmenu-open@2x.png");
  background-size: auto 24px;
}
.top-bar .top-toggle.mode-popup {
  background-image: url("../img/topmenu-close@2x.png");
  background-size: auto 24px;
}

.top-menu {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: #EAE9E9;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
}

.top-menu-wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 768px;
}

.tmenu-list {
  display: flex;
  flex-direction: column;
}
.tmenu-list li {
  width: 100%;
  padding: 10px 20px;
}
.tmenu-list li a.tmenu-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 5px;
  height: 50px;
  width: 100%;
  background: #fff;
  font-size: 1rem;
  color: #000;
  font-weight: normal;
}
.tmenu-list li a.tmenu-item span.tmenu-item-in {
  width: 90%;
  max-width: 220px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.tmenu-list li a.tmenu-item span.tmenu-item-in span.tmenu-icon {
  margin-right: 5px;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: center center;
}
.tmenu-list li a.tmenu-item span.tmenu-item-in span:nth-child(2) {
  text-align: left;
}

.top-privacy {
  background: #fff;
}

/* 悠遊卡配色條 */
.top-bar-outer [data-v-a44fcc9c] {
  background: #fff;
}

.top-bar-outer  .divider[data-v-a44fcc9c] {
  position: absolute;
  top: 46px;
  left: 0;
  right: 0;
  height: 4px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  z-index: 2
}

.top-bar-outer  .divider .divider-item.blue[data-v-a44fcc9c] {
  -webkit-box-flex: 11;
  -ms-flex: 11;
  flex: 11;
  background: #007cc5
}

.top-bar-outer  .divider .divider-item.green[data-v-a44fcc9c] {
  -webkit-box-flex: 7;
  -ms-flex: 7;
  flex: 7;
  background: #00a12d
}

.top-bar-outer  .divider .divider-item.orange[data-v-a44fcc9c] {
  -webkit-box-flex: 5;
  -ms-flex: 5;
  flex: 5;
  background: #F9B238
}

.top-bar-outer  .divider .divider-item.red[data-v-a44fcc9c] {
  -webkit-box-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background: #e7007f
}

@media (min-width: 768px) {
  .top-bar-outer [data-v-a44fcc9c] {
    padding: 0;
  }
}

@media (max-width: 768px) {
  .top-bar-outer [data-v-a44fcc9c] {
    padding: 0;
  }
}

@media (max-width: 414px) {
  .top-bar-outer [data-v-a44fcc9c] {
    padding: 0;
  }
}

/* ============================================================ */
/*                      msg input                                   */
/* ============================================================ */
body, html {
  background: -webkit-linear-gradient(to bottom, #fff 0%, #fff 30%, #EAE9E9 100%);
  background: -moz-linear-gradient(to bottom, #fff 0%, #fff 30%, #EAE9E9 100%);
  background: -o-linear-gradient(to bottom, #fff 0%, #fff 30%, #EAE9E9 100%);
  background: #fff;
}

.msg-sec {
  padding-top: 0.5rem;
  max-width: 920px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 20px;
}

.msg-sec .msg-box:last-child {
  margin-bottom: 20px;
}

.main-wrapper {
  background-color: #f9f9f9;
  /* background-image: url("../img/main-bg.jpg"); */
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: right bottom;
}

.input-bar-outer {
  width: 100%;
  background: #fff;
  border-top: 1px solid #dbdbdb;
  position: fixed;
  z-index: 2;
  top: auto;
  bottom: 60px;
  left: 0;
  height: 1px;
}
.input-bar {
  width: 100%;
  max-width: 928px;
  margin: 0 auto;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
}
.input-bar .inputfield {
	height: 40px;
	flex-grow: 1;
	position: relative;
	display: flex; 
	align-items: center;
	gap: 8px;
}

.input-bar .inputfield .user-input {
  height: 100%;
  flex: 1;
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  border: none;
  background-color: transparent;
  padding: 0 18px 0 65px;
  border: 1px solid rgba(64,64,64,.1);
  border-radius: 19px;
  background: rgba(64,64,64,.05);
  min-width: 50px;
}
.input-bar .inputfield .user-input + .btn-input-send {
  /* display: none; */
}
.input-bar .inputfield .user-input:focus {
  /* border: 1px solid #007cc5; */
}

.input-bar .inputfield .btn-input-send {
  cursor: pointer;
  width: 38px;
  height: 38px;
  position: relative;
  z-index: 2;
  top: 0;
  right: 0;
  background: #007cc5 url("../img/send.svg") no-repeat center;
  background-size: 28px;
  border-radius: 100%;
  box-shadow: 0 4px 10px 0 rgba(64, 64, 64, .1);
  flex-shrink: 0;
}
.input-bar .bottom-toggle {
  display: none;
  flex-shrink: 0;
  margin-right: 10px;
  background-position: 10px center;
  background-image: url("../img/menu-toggle@2x.png");
}

/* ============================================================ */
/*                     bottom page                              */
/* ============================================================ */
.bottom-page {
  width: 100%;
  height: auto;
  max-height: 80vh;
  position: relative;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: #EAE9E9;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
  padding-top: 50px;
  padding-bottom: 20px;
  padding-left: 0px;
  padding-right: 0px;
}
.bottom-page .bottom-close {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  background: url("../img/menu-close-red@2x.png") no-repeat center center;
  background-size: auto 20px;
}
.bottom-page .bottom-page-wrapper {
  width: 100%;
  margin: 0 auto;
}



/* ============================================================ */
/*                     main menu                              */
/* ============================================================ */
.login-wrapper {
  padding-left: 10px;
  padding-right: 10px;
  max-width: 768px;
}
.login-wrapper .row {
  padding: 10px 5px;
}

.login-title {
  text-align: center;
  font-size: 1.5rem;
  margin-top: -5px;
  margin-bottom: 10px;
}

.login-input[type="search"], .login-input[type="password"], .login-input[type="number"], .login-input[type="tel"] {
  width: 100%;
  height: 46px;
  padding-left: 48px;
  background-position: 5px center;
  background-repeat: no-repeat;
  background-size: 36px 36px;
}

.login-input[type="search"].login-icon-id {
  background-image: url(../img/login-icon-id@2x.png);
}

.login-input[type="password"].login-icon-pass {
  background-image: url(../img/login-icon-pass@2x.png);
}

.login-input[type="tel"].login-icon-auth {
  background-image: url(../img/login-icon-auth@2x.png);
}

.login-auth-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.login-auth-wrapper .login-input {
  flex-grow: 1;
}
.login-auth-wrapper .btn-one-icon {
  flex-shrink: 0;
  background-image: url(../img/login-icon-renew@2x.png);
}
.login-auth-wrapper .login-auth-img {
  flex-shrink: 0;
  width: 96px;
  height: 40px;
  margin-right: 5px;
  margin-left: 5px;
}
.login-auth-wrapper .login-auth-img img {
  width: 100%;
  height: 100%;
}

/* ============================================================ */
/*                     main menu                              */
/* ============================================================ */
.mainmenu-wrapper {
  max-width: 600px;
}

/* main menu kv banner */
.mainmenu-kv {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  text-align: center;
}
.mainmenu-kv img {
  width: 100%;
  height: auto;
}

/* main menu tabs */
.mmenu-nav-tabs, .mmenu-tab-contents {
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

.mmenu-nav-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
}
.mmenu-nav-tabs li {
  width: 33%;
  max-width: 100px;
}
.mmenu-nav-tabs .tab {
  text-align: center;
  font-size: 0.9375rem;
  color: #919191;
  font-weight: bold;
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 3px solid #EAE9E9;
}
.mmenu-nav-tabs .tab.active {
  color: #000;
  border-bottom: 3px solid #007cc5;
}

.mmenu-tab-contents {
  padding-top: 10px;
}

.mmenu-tab-panel {
  display: none;
}

.mmenu-tab-panel.active {
  display: block;
  height: calc(80vh - 280px);
  overflow-y: auto;
  max-height: 250px;
}

.mmenu-list {
  display: block;
  height: auto;
}
.mmenu-list li {
  display: inline-block;
  width: 49%;
  padding: 5px;
  height: 60px;
}
.mmenu-list li a.mmenu-item.invisible {
  visibility: hidden;
}
.mmenu-list li a.mmenu-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 5px;
  height: 50px;
  width: 100%;
  max-width: 160px;
  margin: 0 auto 0 auto;
  background-color: #fff;
  font-size: 1rem;
  color: #000;
}
.mmenu-list li a.mmenu-item span.mmenu-icon {
  margin-right: 10px;
  margin-left: 5px;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 42px 42px;
  background-position: center center;
}
.mmenu-list li a.mmenu-item span:nth-child(2) {
  width: 70px;
}

/* ============================================================ */
/*                      msg box                                */
/* ============================================================ */
.msg-box {
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 0 0.5rem;
}

/* A1 */
.msg-box-robot {
  justify-content: flex-start;
}
.msg-box-robot .avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: #fff url("../img/avatar.svg") no-repeat center center;
  background-size: 30px;
  border-radius: 100%;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
}
.msg-box-robot .msg-bubble {
  margin-left: 12px;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 0 20px 20px 20px;
  color: #404040;
  margin-top: 5px;
  display: inline-block;
}
.msg-box-robot .msg-bubble:before {
  left: -12px;
  top: 0 !important;
  border-color: #fff transparent transparent transparent;
}
.msg-box-robot .msg-bubble:after {
  position: absolute;
  content: "";
  top: -0.5px;
  left: -14px;
  border: 12px solid transparent;
  border-top-color: #dbdbdb;
  z-index: -1;
}

/* A2 */
.msg-box-user {
  justify-content: flex-end;
}
.msg-box-user .msg-bubble {
  margin-right: 12px;
  background: #007cc5;
  border: 1px solid #007cc5;
  border-radius: 20px 0 20px 20px;
  color: #fff;
}
.msg-box-user .msg-bubble:after {
  left: auto;
  right: -12px;
  border-color: #007cc5 transparent transparent transparent;
}

/* ============================================================ */
/*              Message Send Failed / Retry Styles              */
/* ============================================================ */

/* 訊息狀態指示器容器 (只在 UserToHd 顯示) */
.msg-box-user .msg-status-indicator {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  margin-right: 8px;
  min-width: 80px;
  max-width: 120px;
  order: -1;
}

.msg-box-robot .msg-status-indicator {
  display: none;
}

/* 狀態文字 */
.msg-status-text {
  font-size: 11px;
  color: #888;
  text-align: right;
  line-height: 1.3;
}

/* 重新傳送按鈕 */
.msg-resend-btn {
  display: inline-block;
  font-size: 11px;
  color: #007cc5;
  cursor: pointer;
  text-decoration: underline;
  margin-top: 2px;
}

.msg-resend-btn:hover {
  color: #005a99;
}

/* 傳送失敗狀態 - 紅色邊框和警告圖示 */
.msg-box-user .msg-send-failed .msg-bubble {
  border: 2px solid #dc3545 !important;
  background: #fff5f5;
  color: #333;
  position: relative;
}

.msg-box-user .msg-send-failed .msg-bubble::before {
  content: "⚠";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: #dc3545;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  z-index: 10;
}

/* 傳送失敗時的箭頭顏色 */
.msg-box-user .msg-send-failed .msg-bubble:after {
  border-color: #dc3545 transparent transparent transparent;
}

/* 失敗狀態的狀態文字 */
.msg-box-user .msg-send-failed + .msg-status-indicator .msg-status-text,
.msg-send-failed ~ .msg-status-indicator .msg-status-text {
  color: #dc3545;
  font-weight: 500;
}

/* 重試中狀態 - 淡藍色脈動效果 */
.msg-box-user .msg-retrying .msg-bubble {
  border: 2px solid #ffc107 !important;
  animation: retrying-pulse 1.5s ease-in-out infinite;
}

@keyframes retrying-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 4px rgba(255, 193, 7, 0.3);
  }
  50% {
    opacity: 0.85;
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.6);
  }
}

/* 重試中的箭頭顏色 */
.msg-box-user .msg-retrying .msg-bubble:after {
  border-color: #ffc107 transparent transparent transparent;
}

/* 重試中狀態文字 */
.msg-retrying ~ .msg-status-indicator .msg-status-text {
  color: #856404;
}

/* A1 A2 common style */

/*
.msg-box-robot:after {
  content: attr(data-time);
  flex-shrink: 0;
  align-self: flex-end;
  width: 50px;
  font-size: 12px;
  color: #414141;
  text-align: center;
  position: relative;
  left: 15px;
}
*/

/* A1 A2 common style */

/*
.msg-box-user:before {
  content: attr(data-time);
  flex-shrink: 0;
  align-self: flex-end;
  width: 50px;
  font-size: 12px;
  color: #414141;
  text-align: center;
  position: relative;
  right: 20px;
}
*/

.msg-carousel-time:after {
	position: relative;
	left: 40px;
}

.msg-box-robot .msg-bubble, .msg-box-user .msg-bubble {
  max-width: 500px;
  /* border-radius: 10px; */
  padding: 0.5rem 1rem;
  position: relative;
  box-shadow: 0 0 8px white;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
}

.msg-box-robot .msg-carousel {
  max-width: 750px;
  padding: 10px 0 0 0;
  position: relative;
}

.msg-box-robot .msg-bubble:before, .msg-box-user .msg-bubble:after {
  content: "";
  position: absolute;
  top: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 12px 0 12px;
}

/* A1 A2 msg continuous */
.msg-box-robot.msg-cont {
  margin-top: -1rem;
}

.avatar.hidden {
  height: 1px;
  visibility: hidden;
}

.msg-box-robot.msg-cont .msg-bubble:before, .msg-box-robot.msg-cont .msg-bubble:after, .msg-box-user.msg-cont .msg-bubble:before, .msg-box-user.msg-cont .msg-bubble:after {
  visibility: hidden;
}

/* ============================================================ */
/*                     loaing dots                              */
/* ============================================================ */
.msg-box-robot.msg-loading {
  line-height: 1;
}

.msg-loading-anim #dot1 {
  animation: load 0.8s infinite;
}
.msg-loading-anim #dot2 {
  animation: load 0.8s infinite;
  animation-delay: 0.2s;
}
.msg-loading-anim #dot3 {
  animation: load 0.8s infinite;
  animation-delay: 0.4s;
}

@keyframes load {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
    r: 4;
  }
  100% {
    opacity: 0.5;
  }
}
/* ============================================================ */
/*                    swiper style                    					 */
/* ============================================================ */
/* global style */
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {
  opacity: 0 !important;
}

.swiper-button-prev, .swiper-button-next {
  width: 60px;
  height: 100%;
  top: 20px;
}

.swiper-button-prev {
  justify-content: flex-start;
}

.swiper-button-next {
  justify-content: flex-end;
}

.swiper-button-prev:after, .swiper-button-next:after {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  background: #fff;
  color: #919191;
  font-size: 1rem;
  line-height: 40px;
  text-align: center;
}

.swiper-button-prev.small, .swiper-button-next.small {
  width: 60px;
}

.swiper-button-prev.small:after, .swiper-button-next.small:after {
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 0.875rem;
}

.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 5px;
}

.swiper-pagination-bullet {
  margin-top: 5px;
  width: 10px;
  height: 10px;
  border: 1px solid #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

.swiper-pagination-bullet-active {
  background: #007cc5;
}

/* custom style */
.swiper-container.card-B2-swiper {
  width: 100%;
  padding-left: 40px;
  padding-right: 40px;
}
.swiper-container.card-B2-swiper .swiper-slide {
  width: 250px;
  margin-right: 10px !important;
}
.swiper-container.card-B2-swiper .swiper-button-prev {
  left: 5px;
}
.swiper-container.card-B2-swiper .swiper-button-next {
  right: 5px;
}

.swiper-container.mainmenu-swiper {
  width: 100%;
  max-width: 600px;
  height: auto;
}
.swiper-container.mainmenu-swiper .swiper-button-prev:after, .swiper-container.mainmenu-swiper .swiper-button-next:after {
  background: #fff;
  opacity: 0.5;
}
.swiper-container.mainmenu-swiper .swiper-button-prev {
  left: 5px;
}
.swiper-container.mainmenu-swiper .swiper-button-next {
  right: 5px;
}

/* ============================================================ */
/*                      card                                */
/* ============================================================ */
/* card B2 */
.msg-box-robot.msg-B2 {
  flex-direction: column;
  align-items: flex-start;
  /* data-time */
}
.msg-box-robot.msg-B2:after {
  width: 100%;
  text-align: left;
  padding-left: 60px;
  align-self: auto;
  box-sizing: border-box;
  margin-top: 0.5rem;
}

.card {
	border-radius: 15px !important;
}

.card-B2 {
  /* box-sizing: content-box; */
  /* width: 200px; */
  /* border-radius: 5px; */
  /* border: 1px solid #919191; */
  /* background: #fff; */
  -webkit-box-flex: 0;
  -ms-flex: 0 0 250px;
  flex: 0 0 250px;
  overflow: hidden;
  display: inline-block;
  margin: 0 5px;
  padding-bottom: 10px;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  border-radius: 15px;
  background-color: #fff;
}

.B2-kv img {
  /* width: 200px; */
  /* height: 100px; */
  /* border-top-left-radius: 5px; */
  /* border-top-right-radius: 5px; */
  border-radius: 15px 15px 0 0;
  height: 135px;
  width: 250px;
  display: inline-block;
}

.B2-title {
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  line-height: 1.2rem;
  padding: 0 20px;
  margin: 13px 0 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.B2-linklist a {
  display: block;
  color: #007cc5;
  font-size: 1rem;
  line-height: 1.2rem;
  padding: 0 20px;
  margin: 10px 0;
  overflow: hidden;
  white-space: normal;
  cursor: pointer;
}
.B2-linklist a:not(:last-child) {
  /* border-bottom: 1px solid #919191; */
}

/* file: _queries.sass */
@media only screen and (min-width: 600px) {
  .mmenu-nav-tabs, .mmenu-tab-contents {
    padding-left: 0;
    padding-right: 0;
  }

  .mmenu-tab-panel.active {
    height: calc(80vh -340px);
  }

  .mmenu-list li {
    width: 49.5%;
  }
  .mmenu-list li a.mmenu-item {
    max-width: 100%;
  }
  .mmenu-list li a.mmenu-item span:nth-child(2) {
    width: auto;
  }
}
@media only screen and (max-width: 350px) {
  .mmenu-nav-tabs, .mmenu-tab-contents {
    padding-left: 5px;
    padding-right: 5px;
  }

  .mmenu-list li a.mmenu-item span.mmenu-icon {
    margin-left: 2px;
    margin-right: 5px;
  }
}

.swiper-wrapper {
	margin: 0 0 10px 0 !important;
}

.inline-msg img {
	width: 450px;
	height: auto;
}

/* quick replies */
.link-btn-wrapper {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  font-size: 1rem;
  line-height: 1.4rem;
  color: #007cc5;
  overflow: hidden;
  max-width: 100%;
  position: relative;
  padding-left: 44px;
  padding-top: 10px;
}

.link-btn-wrapper .link-btn {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  min-width: 0px;
  max-width: 90%;
  height: auto;
  background: #FFFFFF;
  cursor: pointer;
  padding: 8px 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0px 5px 10px 5px;
  border-radius: 38px;
  border: solid 2px rgba(64, 64, 64, 0.1);
  -webkit-box-shadow: 0 4px 10px 0 rgba(64, 64, 64, 0.1);
  box-shadow: 0 4px 10px 0 rgba(64, 64, 64, 0.1);
}

.link-btn-wrapper .link-btn:hover {
  border: solid 2px #007cc5;
  background: #007cc5;
  color: #FFFFFF;
}

.link-btn-wrapper .link-btn.disabled,
.link-btn-wrapper .link-btn.disabled:hover {
  cursor: not-allowed;
  background: #EFEFEF;
  border: 1px solid #A2A3A5;
  color: #A2A3A5;
}

.line-question-clickable {
  color: #2296F3;
  font-size: inherit;
  cursor: pointer;
  display: inline;
}

.line-question-clickable:hover {
	color: #FFFFFF
}

.link-btn:hover .line-question-clickable.question-clickable {
  color: white !important;
}

/* ============================================================ */
/*                      top menu                                */
/* ============================================================ */
.top-bar-outer {
  width: 100%;
  background: #fff;
}

.top-bar {
  width: 100%;
  max-width: 915px;
  margin: 0 auto;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar > * {
  background-position: center center;
  background-repeat: no-repeat;
}

.top-bar .title{
  font-size: 18px;
  font-weight: bold;
}

.top-bar .action {
  display: flex;
  flex-wrap: nowrap;
}

.top-bar .top-toggle {
  height: 40px;
  width: 40px;
  cursor: pointer;
  background: url("../img/service.svg") center no-repeat;
  background-size: auto 32px;
}

.top-bar .top-toggle.topPrivacy {
  background: url("../img/privacy.svg") center no-repeat;
  background-size: auto 32px;
}
.top-bar .top-toggle.topService {
  background: url("../img/service.svg") center no-repeat;
  background-size: auto 32px;
}
.top-bar .top-toggle.topExit {
  background: url("../img/exit.svg") center no-repeat;
  background-size: auto 32px;
}

.top-bar .top-toggle.customFormExit {
  background: url("../img/exit.svg") center no-repeat;
  background-size: auto 32px;
}

.top-banner-outer {
  width: 100%;
  background: #fff;
  box-shadow: 0 4px 10px 0 rgba(64, 64, 64, .1);
}

.top-banner {
  width: 100%;
  max-width: 915px;
  margin: 0 auto;
  height: 35px;
  font-size: 18px;
  line-height: 35px;
  padding: 0 5px;
  color: #717171;
}

.announcement-icon{
  position: relative;
  display: inline-block;
  top: -5px;
  left: -5px;
  width: 24px;
  height: 24px;
  background: url('../img/announcement.svg') center no-repeat;
  background-size: 24px;
}

.top-menu {
  width: calc(100% - 40px);
  max-width: 400px;
  height: calc(100% - 280px);
  font-size: 16px;
  color: #717171;
  margin: auto;
  margin-top: 140px;
  padding-top: 15px;
  padding-bottom: 15px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
}

.top-menu-wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 915px;
}

.top-menu-wrapper .title{
  font-size: 20px;
  color: #404040;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 30px;
}

.top-menu-wrapper .subtitle{
  color: #404040;
}

.top-menu-wrapper p{
  font-size: 16px;
  color: #949494;
}

.top-menu-wrapper content{
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.tmenu-list {
  display: flex;
  flex-direction: column;
}

.tmenu-list li {
  width: 100%;
  padding: 10px 20px;
}

.tmenu-list li a.tmenu-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 5px;
  height: 50px;
  width: 100%;
  background: #fff;
  font-size: 1rem;
  color: #000;
  font-weight: normal;
}

.tmenu-list li a.tmenu-item span.tmenu-item-in {
  width: 90%;
  max-width: 220px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.tmenu-list li a.tmenu-item span.tmenu-item-in span.tmenu-icon {
  margin-right: 5px;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: center center;
}

.tmenu-list li a.tmenu-item span.tmenu-item-in span:nth-child(2) {
  text-align: left;
}

.confirm-box{
  color: hsla(0, 0%, 44.3%, .75);
  line-height: 30px;
  border-top: 1px solid #dbdbdb;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: url('../img/unchecked.svg') 20px no-repeat;
  background-size: 30px 30px;
  cursor: pointer;
  margin: 20px -18px 0 -18px;
  padding: 15px 40px 15px 60px;
}
.confirm-box.checked{
  background: url('../img/checked.svg') 20px no-repeat;
  background-size: 30px 30px;
}

/* 悠遊卡配色bar */
.top-bar-outer {
  background: #fff;
}

.top-bar-outer .divider {
  position: absolute;
  top: 46px;
  left: 0;
  right: 0;
  height: 4px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  z-index: 1;
}

.top-bar-outer .divider .divider-item.blue {
  -webkit-box-flex: 11;
  -ms-flex: 11;
  flex: 11;
  background: #007cc5
}

.top-bar-outer .divider .divider-item.green {
  -webkit-box-flex: 7;
  -ms-flex: 7;
  flex: 7;
  background: #00a12d
}

.top-bar-outer .divider .divider-item.orange {
  -webkit-box-flex: 5;
  -ms-flex: 5;
  flex: 5;
  background: #F9B238
}

.top-bar-outer .divider .divider-item.red {
  -webkit-box-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background: #e7007f
}

@media (min-width: 768px) {
  .top-bar-outer  {
    padding: 0;
  }
}

@media (max-width: 768px) {
  .top-bar-outer  {
    padding: 0;
  }
}

@media (max-width: 414px) {
  .top-bar-outer  {
    padding: 0;
  }
}

/* 跑馬燈 */
/* 跑馬燈 */
.top-banner i {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 36px;
  vertical-align: top;
  margin-right: 5px;
}

.als-container {
  position: relative;
  display: inline-block;
  width: calc(100% - 30px);
  margin: 0px auto;
  z-index: 2;
}

.als-viewport {
  position: relative;
  overflow: hidden;
  margin: 0px auto;
  width: 100% !important;
  height: 35px !important;
/*   padding: 5px 0; */
}

.als-wrapper {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.als-item {
  position: relative;
  display: block;
  cursor: pointer;
  line-height: 25px;
  height: 35px;
  overflow: hidden; /* 確保超出的文字不影響布局 */
}

.marquee-text {
	position: relative;
	/*   display: inline-block; */
	white-space: nowrap;
	left: 0; /* 初始位置 */
	display: flex;
	align-items: center;
	height: 35px;
	font-size: 1rem;
}

.als-item .rgb-230-0-0 {
  color: #e60000;
}

.als-item .rgb-0-102-204 {
  color: #06c;
}

/* 快速選單 */
.input-bar-outer .quick-menu-mask{
  background: transparent;
  z-index: 3;
}

.quick-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  width: 100%;
  max-width: 915px;
  margin: 0 auto;
  padding-left: 0;
  z-index: 4;
}

.quick-menu .search-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  margin: auto;
  margin-right: 10px;
  width: 24px;
  height: 24px;
  background: url(../img/search.png) center center no-repeat;
  background-size: 24px 24px;
  z-index: 3;
}

.quick-menu-mask {
  width: 100%;
  height: 100vh;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0,.2);
  z-index: 3;
}

.quick-menu-mask.mode-popup {
  display: block;
  z-index: 3;
}

.quick-menu > ul {
  width: 100%;
  text-align: left;
}

.quick-menu .quick-menu-box {
  position: relative;
  display: inline-block;
  font-size: 16px;
  color: #717171;
  padding: 5px 10px;
  margin: 0 10px;
}

.quick-menu .quick-menu-box:not(:last-child)::after {
  content: '';
  width: 0px;
  height: 20px;
  border-left: 1px solid #ccc;
  position: absolute;
  right: -13px;
  top: calc(50% - 10px);
}

.quick-menu .quick-menu-box:hover,
.quick-menu .quick-menu-box.active {
  color: #fff;
  background-color: #007cc5;
  border-radius: 20px;
}

.quick-menu .quick-menu-box .icon{
  width: 20px;
  height: 20px;
  vertical-align: text-bottom;
}

.quick-menu .quick-menu-box:hover .icon,
.quick-menu .quick-menu-box.active .icon{
  filter: brightness(0) invert(1);
}

.quick-menu .quick-menu-btn {
  margin: 0;
}

.quick-menu .quick-menu-btn:hover {
  cursor: pointer;
}

.quick-menu>ul>li .quick-menu-list {
  position: absolute;
  left: -50px;
  bottom: calc(100% + 20px);
  border-radius: 15px;
  background: #fff;
  /* rem: 跟隨 <html> 的 .csp-font-16/18/20/24 字體縮放 */
  font-size: 1rem;
  color: #717171;
  min-width: 200px;
  max-width: 300px;
  max-height: 50vh;
  overflow: visible;
  z-index: 4;
  display: none;
}

.quick-menu>ul>li .quick-menu-list.left{
  left: 0;
}

.quick-menu>ul>li .quick-menu-list.right{
  left: auto;
  right: 0;
}

.quick-menu>ul>li .quick-menu-list:after {
  content: "";
  position: absolute;
  left: 75px;
  bottom: -8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 7px 0 7px;
  border-color: #fff transparent transparent transparent;
}

.quick-menu>ul>li .quick-menu-list.left:after{
  left: 25px;
}

.quick-menu>ul>li .quick-menu-list.right:after{
  left: auto;
  right: 25px;
}

.quick-menu>ul>li.active .quick-menu-list {
  display: block;
}

.quick-menu>ul>li .quick-menu-list>ul {
  list-style: none;
  padding: 20px;
  max-height: calc(50vh - 30px);
  overflow: auto;
}

.quick-menu>ul>li .quick-menu-list>ul li:not(:last-child) {
  border-bottom: 1px solid #dbdbdb;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.quick-menu>ul>li .quick-menu-list>ul li:hover {
  cursor: pointer;
}

.quick-menu>ul>li .quick-menu-list>ul li>a {
  display: block;
  color: #000;
  text-decoration: none;
}

.quick-menu>ul>li .quick-menu-list>ul li:hover>a {
  font-weight: normal;
  color: #007cc5;
}

.shadow {
  box-shadow: 0 3px 2px rgb(0 0 0 / 20%), 0 0 5px rgb(0 0 0 / 20%);
}

.shadow.quick-menu-list:after {
  filter: drop-shadow(0 3px 2px rgb(0 0 0 / 20%));
}

/* ====================================================== */
/* 快速選單橫向捲動增強                                      */
/* iOS 導航按鈕 / PC·Android 拖曳捲動                       */
/* ====================================================== */

/* --- 共用：隱藏捲軸、flex 橫排 --- */
.quick-menu.qm-enhanced {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.quick-menu.qm-enhanced::-webkit-scrollbar {
    display: none !important;
}
.quick-menu.qm-enhanced > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
}
.quick-menu.qm-enhanced .quick-menu-box {
    transition: all 0.1s ease !important;
}
.quick-menu.qm-enhanced .quick-menu-box:hover {
    animation: none !important;
}
/* 捲動期間強制覆蓋 :hover 樣式 + 禁用 transition，防止 Firefox/iOS Safari 誤觸 hover 變色/閃爍 */
.quick-menu.qm-scrolling .quick-menu-box {
    pointer-events: none !important;
    transition: none !important;
}
.quick-menu.qm-scrolling .quick-menu-box:not(.active) {
    color: #717171 !important;
    background-color: transparent !important;
}
.quick-menu.qm-scrolling .quick-menu-box:not(.active):hover {
    color: #717171 !important;
    background-color: transparent !important;
}
.quick-menu.qm-scrolling .quick-menu-box:not(.active) .icon,
.quick-menu.qm-scrolling .quick-menu-box:not(.active):hover .icon {
    filter: none !important;
}
.quick-menu.qm-enhanced .quick-menu-box::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    pointer-events: none !important;
}

/* --- 共用：下拉選單尺寸 --- */
.qm-enhanced .quick-menu-list {
    width: max-content !important;
    min-width: 120px !important;
}
.qm-enhanced .quick-menu-list ul {
    width: max-content !important;
    min-width: 120px !important;
    padding: 4px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.qm-enhanced .quick-menu-list li {
    padding: 8px 12px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: auto !important;
}
.qm-enhanced div.quick-menu-list.shadow {
    width: max-content !important;
    min-width: 120px !important;
}
.qm-enhanced div.quick-menu-list.shadow ul {
    width: max-content !important;
    min-width: 120px !important;
}
.qm-enhanced div.quick-menu-list.shadow li {
    width: auto !important;
    min-width: auto !important;
}

/* --- iOS 模式：隱藏溢出、按鈕導航 --- */
.quick-menu.qm-ios {
    overflow: hidden !important;
}
.quick-menu.qm-ios > ul {
    transition: transform 0.3s ease !important;
}
.quick-menu.qm-ios .nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    background: rgba(0,0,0,0.4) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    cursor: pointer !important;
    z-index: 10 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}
.quick-menu.qm-ios .nav-btn:hover {
    background: rgba(0,0,0,0.6) !important;
}
.quick-menu.qm-ios .nav-btn.left {
    left: 5px !important;
}
.quick-menu.qm-ios .nav-btn.right {
    right: 5px !important;
}
.quick-menu.qm-ios .nav-btn.show {
    display: flex !important;
}
/* iOS Safari: 移除按鈕 tap 高亮，避免觸發鄰近元素 :hover */
.quick-menu.qm-ios .nav-btn {
    -webkit-tap-highlight-color: transparent !important;
}
/* iOS: 完全禁用 :hover 效果 — 觸控設備只用 .active 顯示選中狀態，根治 sticky hover 問題 */
.quick-menu.qm-ios .quick-menu-box:hover:not(.active) {
    color: #717171 !important;
    background-color: transparent !important;
}
.quick-menu.qm-ios .quick-menu-box:hover:not(.active) .icon {
    filter: none !important;
}
/* iOS: 滑動期間禁用互動 + 過渡動畫 */
.quick-menu.qm-ios.qm-scrolling .quick-menu-box {
    pointer-events: none !important;
    transition: none !important;
}

/* --- iOS：移至 body 的下拉選單 --- */
.body-dropdown {
    position: fixed !important;
    z-index: 99999 !important;
    opacity: 0 !important;
    transition: opacity 0.15s ease !important;
    border-radius: 15px !important;
    background: #fff !important;
    /* rem: 跟隨 <html> 的 .csp-font-16/18/20/24 字體縮放 */
    font-size: 1rem !important;
    color: #717171 !important;
    min-width: 200px !important;
    max-width: 300px !important;
    max-height: 50vh !important;
    overflow: visible !important;
}
.body-dropdown.positioned {
    opacity: 1 !important;
}
.body-dropdown.shadow:after {
    filter: drop-shadow(0 3px 2px rgb(0 0 0 / 20%)) !important;
}
.body-dropdown > ul {
    list-style: none !important;
    padding: 20px !important;
    max-height: calc(50vh - 30px) !important;
    overflow: auto !important;
    margin: 0 !important;
}
.body-dropdown > ul li:not(:last-child) {
    border-bottom: 1px solid #dbdbdb !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}
.body-dropdown > ul li:hover {
    cursor: pointer !important;
}
.body-dropdown > ul li > a {
    display: block !important;
    color: #000 !important;
    text-decoration: none !important;
}
.body-dropdown > ul li:hover > a {
    font-weight: bold !important;
    color: #007cc5 !important;
}
.body-dropdown:after {
    content: "" !important;
    position: absolute !important;
    left: var(--triangle-left, 75px) !important;
    bottom: -8px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 8px 7px 0 7px !important;
    border-color: #fff transparent transparent transparent !important;
}

/* --- 桌機/Android 模式：原生捲動、固定定位下拉 --- */
.quick-menu.qm-desktop {
    overflow-x: auto !important;
}
.quick-menu.qm-desktop .quick-menu-box.active .quick-menu-list {
    position: fixed !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 99999 !important;
    opacity: 0 !important;
    transition: opacity 0.15s ease !important;
    width: max-content !important;
    min-width: 120px !important;
}
.quick-menu.qm-desktop .quick-menu-box.active .quick-menu-list.positioned {
    opacity: 1 !important;
}
.quick-menu.qm-desktop .quick-menu-list:after {
    left: var(--triangle-left, 75px) !important;
    right: auto !important;
    z-index: 1 !important;
}

.exit-btn {
  position: absolute;
  bottom: -5px;
  right: 10px;
  width: 90px;
  height: 35px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background: #007cc5;
  border-radius: 50px;
  padding: 5px 10px;
  cursor: pointer;
  z-index: 2;
}

/* ============================================================ */
/*                      msg input                               */
/* ============================================================ */

.footer-wrapper {
  position: fixed;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 115px;
  background: #fff;
  border-top: 1px solid #dbdbdb;
  border-radius: 15px 15px 0 0;
  box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, .1);
  z-index: 50;
}

/* 切換文字大小 */
.input-bar .font-size-btn {
  position: absolute;
  width: 32px;
  height: 32px;
  background: url(../img/font-size-btn.svg) 50% no-repeat;
  background-size: 32px;
  margin: 5px 10px;
  cursor: pointer;
  z-index: 2;
  flex-shrink: 0;
}

.input-bar .font-size-btn::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 42px;
  width: 0.5px;
  height: 22px;
  border-radius: 6px;
  background: #dfdfdf;
  margin: 0;
}

/* top mask */
.top-menu-content .row {
    display: block !important;
    flex-wrap: unset !important;
    -ms-flex-wrap: unset !important;
    margin-right: auto !important;
    margin-left: auto !important;
}


/* 額外自訂跑馬燈格式 */
.als-wrapper {
    position: relative;
    transition: margin-top 0.6s linear;
}

.als-item {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.marquee-text {
    position: absolute;
    white-space: nowrap;
}

/* 展開圖片 */
.image-viewer {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 51;
  overflow: auto;
  padding: 20px;
}

.image-viewer .close {
  position: absolute;
  top: 10px;
  right: 15px;
  height: 32px;
  width: 32px;
  background-image: url(../img/close.svg);
  background-size: cover;
  cursor: pointer;
}

.image-viewer img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* 滿意度調查表的隱藏 */
.survey .hide {
	display: none;
}

/* 對話窗內的檔案下載 */

.media.file {
  background: #FFF;
  font-size: 14px;
  min-width: 250px;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.08);
}

.media.file .file-content {
  display: flex;
  align-items: center;
  padding: 10px;
  color: #404040;
  border-bottom: 1px solid rgba(64, 64, 64, 0.1);
  word-break: break-word;
}

.media.file .file-info {
  display: flex;
  flex-direction: column;
}

.media.file .file-name {
  font-size: 16px;
  font-weight: bold;
}

.media.file .file-size {
  font-size: 12px;
  color: gray;
  margin-top: 2px;
}

.media.file .file-tool {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  color: rgba(113, 113, 113, 0.75);
}

.media.file .file-tool .file-download-btn {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #007bff;
  font-weight: bold;
}

.media.file .icon {
  flex: 0 0 auto;
}

.media.file .icon.file {
  width: 40px;
  height: 40px;
  background-image: url(../img/pdf-icon.svg); /* 修改為PDF圖示 */
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 10px;
}

.media.file .icon.download {
  width: 18px;
  height: 18px;
  background-image: url(../img/download.svg);
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 5px;
}


/* 上傳檔案 */
.input-bar .inputfield .btn-upload{
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  margin-left: 10px;
  background: #fff url("../img/media.svg") no-repeat center;
  border: 1px solid rgba(64, 64, 64, .1);
  background-size: 28px;
  border-radius: 100%;
  box-shadow: 0 4px 10px 0 rgba(64, 64, 64, .1);
  cursor: pointer;
  flex-shrink: 0;
}
.input-bar .inputfield .btn-upload:focus{
  border: 1px solid rgba(64, 64, 64, .1);
}

.btn-upload.disabled, .btn-upload:disabled{
  background: rgba(64, 64, 64, .05) url("../img/media-disable.svg") no-repeat center;
  background-size: 28px;
  cursor: not-allowed;
}

.marquee-text .question-clickable {
  color: #007cc5 /* 跑馬燈知識點淡藍色 */
}

.marquee-text p {
    color: #000;
    margin: 0.5rem 0;
    line-height: 1.5;
    font-size: 1rem;
}

/* 自訂表單 */

.customForm-wrapper {
  position: fixed;
  top: 50px; 
  left: 0;
  width: 100%;
  height: calc(100vh - 50px);
  z-index: 75; 
  background: #fff; 
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto; 
  padding: 20px; 
}

.customForm {
  max-width: 517px;
  min-height: 300px;
  flex: 0 0 auto;
  margin: auto;
  border-radius: 4px;
  background-color: white;
/*   padding: 30px 24px; */
}

.customForm .btn {
	width: 100% ;
	
}

.customForm-header {
  font-size: 0.875rem; /* 跟隨 .font-size-btn 的全域字級 */
  color: #7F7F7F;
  position: relative;
  text-align: center;
}

.custom-form h2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: 1.25rem; /* 跟隨 .font-size-btn */
    color: #404040;
    text-align: center;
    margin: 16px 0px;
}

.custom-form .description {
    margin: 0 auto;
    max-width: 915px;
    color: rgba(113, 113, 113, 0.75);
    font-size: 1rem; /* 跟隨 .font-size-btn */
    margin-bottom: 20px;
}

.customForm-header .close-btn {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url('../img/close-circle.svg') 0 0 no-repeat;
  background-size: 18px 18px;
  background-position: 50% 50%;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.customForm-header img {
  width: 75px;
  height: 75px;
  margin: 0 auto;
  display: block;
}

.customForm-header p {
  margin-bottom: 30px;
}
.customFormButton {
    display: flex;  
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    margin: 5px 5px 10px 5px;
    border-radius: 38px;
    border: solid 2px rgba(64, 64, 64, 0.1);
    box-shadow: 0 4px 10px 0 rgba(64, 64, 64, 0.1);
    background: #FFFFFF;
    cursor: pointer;
    max-width: 90%; 
    word-break: break-word;
    width: fit-content;
    color: #007aff;
}
.customFormButton:hover {
    border: solid 2px #007cc5;
    background: #007cc5;
    color: #FFFFFF !important;
}
.form-fields .customform-text-area{
    height: 60px;
    padding: 15px 10px;
    background-color: rgba(64, 64, 64, 0.05);
    color: #404040;
    border-radius: 4px;
    border: 2px solid transparent;
    font-size: 1rem; /* 跟隨 .font-size-btn */
}

.custom-upload-box {
    background-color: rgba(64, 64, 64, 0.05);
    border-radius: 4px;
    padding: 30px 20px;
    text-align: center;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.upload-area {
    margin-bottom: 10px;
}

.upload-btn {
    padding: 15px 30px;
    background-color: #007cc5;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 1rem; /* 跟隨 .font-size-btn */
    cursor: pointer;
}

.upload-btn:hover {
    background-color: #005fa3;
}

.upload-description {
    color: #404040;
    font-size: 0.875rem; /* 跟隨 .font-size-btn */
    margin-top: 10px;
}

/* 驗證碼 */
#captcha {
	padding: 15px 10px;
	background-color: rgba(64, 64, 64, 0.05);
	color: #404040;
	border-radius: 4px;
	border: 2px solid transparent;
	font-size: 1rem; /* 跟隨 .font-size-btn */
}

/* 調整歡迎語等訊息的最大寬度避免換行 */
.msg-box-robot .msg {
  max-width: calc(100% - 46px); /* 減去 avatar 寬度與 margin */
  flex: 1 1 auto;
  min-width: 0;
}

.btn-cancel:hover {
	background-color: rgba(0, 0, 0, 0) !important;
	color: #212529 !important;
}

.msg-click-list {
	width: 100% ;
}


/* 修正chrome跑板問題 */
html, body { height: auto; min-height: 100vh; }
@supports (height: 100dvh) {
  html, body { min-height: 100dvh; }
}
.customForm-wrapper {
  height: calc(100vh - 50px);
  overflow-y: auto;
  overscroll-behavior: contain;   
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom);
}
@supports (height: 100dvh) {
  .customForm-wrapper { height: calc(100dvh - 50px); }
}
body.customform-open { overflow: hidden; }

.main-wrapper { height: calc(100vh - 150px); }
@supports (height: 100dvh) {
  .main-wrapper { height: calc(100dvh - 150px); }
}
.mask, .quick-menu-mask { height: 100vh; }
@supports (height: 100dvh) {
  .mask, .quick-menu-mask { height: 100dvh; }
}
.bottom-page { max-height: 80vh; }
@supports (height: 100svh) {
  .bottom-page { max-height: 80svh; }
}
.customForm { padding-bottom: calc(env(safe-area-inset-bottom) + 24px); }
/* 點擊驗證碼圖片可刷新 */
#captcha-group #kaptchaImage { cursor: pointer; }
/* 修正chrome跑板問題  end*/

/* ============================================================ */
/*  自訂表單 customForm —— 手機 RWD                              */
/*  平板 (<=768px) 與手機 (<=480px) 斷點                         */
/*  桌機樣式不受影響                                              */
/*  字級一律使用 rem，跟隨 .font-size-btn 切換的 html 全域字級     */
/*  唯一例外：輸入類元件最低 16px，避免 iOS focus 自動放大         */
/* ============================================================ */
@media (max-width: 768px) {
  .customForm-wrapper {
    padding: 10px;
    align-items: flex-start;
  }

  .customForm {
    max-width: 100%;
    width: 100%;
    min-height: auto;
    margin: 0 auto;
    padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
  }

  .custom-form {
    padding: 0 4px;
  }

  .custom-form h2,
  .custom-form h2.label {
    font-size: 1.125rem;
    margin: 12px 0;
  }

  .custom-form .description {
    font-size: 0.875rem;
    margin-bottom: 14px;
    padding: 0 4px;
  }

  .csp-question-text-left,
  .csp-question-text {
    font-size: 0.9375rem;
  }

  .form-fields .customform-text-area,
  .form-fields select.customform-text-area,
  .form-fields textarea.customform-text-area {
    width: 100%;
    box-sizing: border-box;
    /* 輸入類：同時給 rem（跟隨字級）與 16px 下限（避免 iOS focus 放大） */
    font-size: max(1rem, 16px);
    padding: 12px 10px;
  }

  .form-fields select.customform-text-area {
    height: auto;
    min-height: 48px;
  }

  .custom-upload-box {
    padding: 20px 12px;
  }

  .upload-btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 0.9375rem;
    box-sizing: border-box;
  }

  #captcha-group .captcha-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  #captcha-group #captcha {
    flex: 1 1 140px;
    min-width: 0;
    box-sizing: border-box;
    font-size: max(1rem, 16px);
    padding: 12px 10px;
  }

  #captcha-group #kaptchaImage {
    flex: 0 0 auto;
    max-width: 160px;
    height: auto;
    cursor: pointer;
  }

  .customForm .btn,
  .customForm button[type="submit"].btn-primary {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .customForm-wrapper {
    padding: 6px;
  }

  .custom-form h2,
  .custom-form h2.label {
    font-size: 1.0625rem;
    margin: 10px 0;
  }

  .custom-form .description {
    font-size: 0.8125rem;
    margin-bottom: 12px;
  }

  .csp-question-text-left,
  .csp-question-text {
    font-size: 0.875rem;
  }

  .form-fields .customform-text-area,
  .form-fields select.customform-text-area,
  .form-fields textarea.customform-text-area {
    padding: 10px 8px;
  }

  .custom-upload-box {
    padding: 16px 10px;
  }

  #captcha-group .captcha-container {
    flex-direction: column;
    align-items: stretch;
  }

  #captcha-group #captcha {
    width: 100%;
    flex: 1 1 auto;
  }

  #captcha-group #kaptchaImage {
    align-self: flex-start;
    max-width: 150px;
  }

  .error-message {
    font-size: 0.8125rem;
  }
}