@charset "UTF-8";
/********************************      SCSS變數:START      ********************************/
/********************************      SCSS變數:END      ********************************/
/********************************     SCSS/Font Awesome:START     ********************************/
/********************************     SCSS/Font Awesome:END     ********************************/
/********************************     SCSS排版樣式:START     ********************************/
/********************************     SCSS排版樣式:END     ********************************/
/********************************     SCSS邊框樣式:START     ********************************/
/********************************     SCSS邊框樣式:END     ********************************/
/********************************     SCSS圖片樣式:START     ********************************/
/********************************     SCSS圖片樣式:END     ********************************/
/********************************     SCSS轉場效果:START     ********************************/
/********************************     SCSS轉場效果:END     ********************************/
/********************************      SCSS特效: START      ********************************/
@keyframes flicker {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}
/********************************      SCSS特效: END      ********************************/
/********************************      Reset default setting:START      ********************************/
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: top;
}

div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, session,
blockquote, ol, ul, li, fieldset, form, input, textarea {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

img {
  display: inline-block;
  line-height: 0;
  vertical-align: bottom;
}

ol, ul {
  list-style: none;
}

i {
  font-style: normal;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
}

blockquote, q {
  quotes: "" "";
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

input, button {
  margin: 0;
}

a {
  text-decoration: none;
}

html, body {
  height: 100%;
  min-height: 100%;
}

/* 清除浮動層, 方式1: 設定class="clearfix" */
.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
  overflow: visible;
}

/* 清除浮動層, 方式2: 加<div class="clearfix" /> */
.clear {
  border: none;
  clear: both;
  height: 0px;
  margin: 0;
  padding: 0;
  width: 0;
}

/********************************      Reset default setting:END      ********************************/
/********************************      Bootstrap:START      ********************************/
.table {
  margin-bottom: initial;
}

.table th, .table td {
  padding: initial;
  vertical-align: top;
  border-top: none;
}

.row {
  margin-right: -8px;
  margin-left: -8px;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto,
.col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto,
.col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto,
.col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
  padding-right: 8px;
  padding-left: 8px;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

@media only screen and (max-width: 768px) {
  .row {
    margin-right: -6px;
    margin-left: -6px;
  }
  .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto,
  .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto,
  .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto,
  .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-right: 6px;
    padding-left: 6px;
  }
}
.form-control:focus {
  border-color: transparent;
  box-shadow: none;
}

/********************************      Bootstrap:END      ********************************/
/********************************      Placeholder:START      ********************************/
::-moz-placeholder { /* Most modern browsers support this now. */
  font-weight: 200;
}
::placeholder { /* Most modern browsers support this now. */
  font-weight: 200;
}

::-webkit-input-placeholder { /* WebKit/Safari/Chrome/Opera */
  font-weight: 200;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  font-weight: 200;
  opacity: 1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  font-weight: 200;
  opacity: 1;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  font-weight: 200;
}

::-ms-input-placeholder { /* Microsoft Edge */
  font-weight: 200;
}

/********************************      Placeholder:END      ********************************/
/********************************      共用變數:START      ********************************/
:root {
  --color-main: #08b;
  --color-secondary: #006677;
  --background-color_disabled: #ececec;
  --background-color_readonly: #f8f8f8;
  --color-green: #27c24c;
  --color-red: #ee3939;
  --color-blue: #0088cc;
  --color-yellow: #ddb411;
  --color-orange: #d66600;
  --color-black: #000;
  --color-gray: #adadad;
  --color-white: #fff;
  --transparent: transparent;
  --color-facebook: #305891;
  --color-twitter: #2ca8d2;
  --color-weibo: #f5ca59;
  --color-line: #1dbf21;
  --color-weixin: #82d44a;
  --color-linkedin: #0077b5;
  --color-youtube: #ff0000;
  --color-instagram: #3897f0;
  --color-phone: #989898;
  --color-comment: #adadad;
  --font-family: "HanHei TC", "PingFang TC", "Noto Sans TC", "Helvetica Neue", "Helvetica", "STHeitiTC-Light", "Arial", "sans-serif", "微軟正黑體", "微软雅黑", "FontAwesome";
  --font-color: #2b2b2b;
  --font-color-black: #000;
  --font-color-white: #fff;
  --font-color-title: #3b3b3b;
  --font-color-subtitle: #4b4b4b;
  --font-color_disabled: #898989;
  --font-color-link: #14202b;
  --font-color-link_hover: #337ab7;
  --font-color-link_disabled: #337ab7;
  --font-color-hint: #78909c;
  --font-size-base: 14px;
  --font-size-small: 0.9rem;
  --font-size-smaller: 0.8rem;
  --font-size-least: 0.7rem;
  --font-size-large: 1.2rem;
  --font-size-larger: 1.4rem;
  --font-size-largest: 1.6rem;
  --font-size-title: 1.1rem;
  --font-size-h1: 2.4rem;
  --font-size-h2: 2.2rem;
  --font-size-h3: 1.8rem;
  --font-size-h4: 1.6rem;
  --font-size-h5: 1.5rem;
  --font-size-h6: 1.3rem;
  --font-weight-base: 500;
  --font-weight-light: 400;
  --font-weight-thin: 300;
  --font-weight-bold: 600;
  --font-weight-heavy: 800;
  --line-height-base: 1.48;
  --line-height-large: 2.4rem;
  --line-height-larger: 3rem;
  /** 圖示大小 **/
  --icon-size-base: 14px;
  --icon-size-small: 12px;
  --icon-size-smaller: 8px;
  --icon-size-large: 24px;
  --icon-size-largest: 36px;
  --icon-size-input: 16px;
  --icon-size-tip: 16px;
  --border-color-dark: 1px solid rgba(0,0,0,0.2);
  --border-color-light: 1px solid rgba(0,0,0,0.1);
  --border-color-translucent: 1px solid rgba(255, 255,255, 0.1);
  --margin-page: 48px;
  --margin-layout: 24px;
  --margin-webkit: 12px;
  --padding-page: 48px;
  --padding-layout: 24px;
  --padding-webkit: 12px;
  --padding-gutter: 3px;
  --padding-widget: 6px;
  --padding-list-head: 3px;
  --padding-list-head_tb: 3px;
  --padding-list-head_lr: 6px;
  --padding-list-item: 6px;
  --padding-list-item_tb: 6px;
  --padding-list-item_lr: 6px;
  --padding-list-foot_tb: 8px;
  --padding-list-foot_lr: 4px;
  --height-layout-title: 42px;
  --height-layout-bottom: 48px;
  --height-widget: 36px;
  --border-color-widget: var(--border-color-dark);
  --border-color-widget_focus: 0;
  --border-radius-widget: 2px;
}

/* 手機版:START */
@media only screen and (max-width: 768px) {
  :root {
    --font-size-base: 14px;
    --line-height-base: 1.48;
    /** 圖示大小 **/
    --icon-size-base: 14px;
    --icon-size-small: 12px;
    --icon-size-smaller: 8px;
    --icon-size-large: 24px;
    --icon-size-largest: 36px;
    --icon-size-input: 16px;
    --icon-size-tip: 16px;
    --margin-page: 32px;
    --margin-layout: 18px;
    --margin-webkit: 8px;
    --padding-page: 32px;
    --padding-layout: 18px;
    --padding-webkit: 8px;
    --padding-gutter: 3px;
    --padding-widget: 6px;
    --padding-list-head: 3px;
    --padding-list-head_tb: 3px;
    --padding-list-head_lr: 6px;
    --padding-list-item: 6px;
    --padding-list-item_tb: 6px;
    --padding-list-item_lr: 6px;
    --padding-list-foot_tb: 8px;
    --padding-list-foot_lr: 4px;
  }
}
/* 手機版:END */
/* 平版:START */
/* 平版:END */
/* 電腦版:START */
/* 電腦版:END */
/* 高解析電腦版:START */
/* 高解析電腦版:END */
/********************************      共用變數:END      ********************************/
/********************************      自定義樣式: START      ********************************/
/** slash:START (加斜線"/") **/
.slash:before {
  content: "/";
  padding: 0 var(--padding-gutter);
}

/** slash:END **/
/** dash:START (破折號"-") **/
.dash:before {
  content: "-";
  padding: 0 var(--padding-gutter);
}

/** hyphen:END **/
/** bracket(括號, 手機版顯示):START **/
.bracket {
  font-size: 0.8em;
}

.bracket:before {
  content: "(";
}

.bracket:after {
  content: ")";
}

.green {
  color: var(--color-green);
}

.red {
  color: var(--color-red);
}

.blue {
  color: var(--color-blue);
}

.yellow {
  color: var(--color-yellow);
}

.orange {
  color: var(--color-orange);
}

.black {
  color: var(--color-black);
}

.gray {
  color: var(--color-gray);
}

.white {
  color: var(--color-white);
}

@media (max-width: 768px) {
  .UIDataColumn .bracket {
    display: block;
    white-space: nowrap;
  }
}
/** bracket:END **/
/** 數量符號:START **/
.symbolQty:before {
  content: " x";
}

/** 數量符號:END **/
/** 頓號:START **/
.comma:before {
  content: "、";
}

/** 頓號:END **/
/** block:START(區塊換行) **/
.block {
  display: block;
  width: 100%;
}

/** block:END **/
/********************************      自定義樣式: END      ********************************/
/********************************     常用樣式定義(7個顯示一組, 第一個為大圖):START     ********************************/
.grid-7 > .UIGroup {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  float: left;
  width: 19%;
  padding: 0 10px;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .grid-7 > .UIGroup {
    width: 50%;
  }
}

.grid-7 > .UIGroup:first-child {
  width: 43%;
}
@media (max-width: 1200px) {
  .grid-7 > .UIGroup:first-child {
    width: 100%;
  }
}

/********************************     常用樣式定義(7個顯示一組, 第一個為大圖):START     ********************************/
/********************************     messageCenter: START     ********************************/
.messageCenter {
  --background-color-message-center: #fff;
  --background-color-message-center_dark: #000;
  --padding-message-center: var(--padding-layout);
}

.messageCenter {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  background-color: var(--background-color-message-center);
  padding: var(--padding-message-center);
}

/** Dark mode:START **/
.messageCenter.dark {
  background-color: var(--background-color-message-center_dark);
}

.messageCenter.dark .messageBox {
  background-color: #fff;
}

/** Dark mode:END **/
/** messageCenter/messageBox: START **/
.messageCenter .messageBox {
  --border-message-center-box: var(--border-color-dark);
  --background-color-message-center-box-icon: #f00032;
  --color-message-center-box-icon: #fff;
  --font-color--message-center-box-tip: #a4a4a7;
  --font-size--message-center-box-caption: var(--font-size-larger);
  --font-size--message-center-box-tip: var(--font-size-smaller);
  --padding-message-center-box-icon: var(--padding-page) auto;
  --padding--message-center-box-caption: 0 0 var(--padding-layout) 0;
  --padding--message-center-box-content: 0 0 var(--padding-layout) 0;
  --padding--message-center-box-tip: 0 0 var(--padding-layout) 0;
  --width-message-center-box: 320px;
  --height-message-center-box: 420px;
}

.messageCenter .messageBox {
  border: var(--border-message-center-box);
  width: var(--width-message-center-box);
  min-height: var(--height-message-center-box);
  position: relative;
}

.messageCenter .messageBox > .icon {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background-color: var(--background-color-message-center-box-icon);
  width: 56px;
  height: 56px;
  margin: var(--padding-message-center-box-icon);
}

.messageCenter .messageBox > .icon i {
  color: var(--color-message-center-box-icon);
  font-size: 32px;
}

.messageCenter .messageBox > .UIGroup.message > .caption {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  font-size: var(--font-size--message-center-box-caption);
  padding: var(--padding--message-center-box-caption);
}

.messageCenter .messageBox > .UIGroup.message > .content {
  text-align: center;
  padding: var(--padding--message-center-box-content);
}

.messageCenter .messageBox > .tip {
  color: var(--font-color--message-center-box-tip);
  font-size: var(--font-size--message-center-box-tip);
  text-align: center;
  width: 100%;
  padding: var(--padding--message-center-box-tip);
  position: absolute;
  bottom: 0;
}

/** messageCenter/messageBox: END **/
/** messageCenter/addToHomeBox: START **/
.messageCenter .addToHomeBox {
  --background-color-message-center-box-bottom: #eee;
  --font-size--message-center-box-message: var(--font-size-large);
  --padding-message-center-box-icon: var(--padding-page) auto;
  --padding-message-center-box-label: var(--padding-layout) 0;
  --padding-message-center-box-message: var(--padding-layout) 0;
  --padding-message-center-box-bottom: 24px;
  --padding-message-center-box-bottom-image: 0 6px;
  --width-message-center-box-bottom: 320px;
}

.messageCenter .addToHomeBox {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  /* 內容元素排列方式 [row: 左到右, row-reverse: row相反, column: 上到下, column-reverse: column相反]*/
  flex-direction: column;
}

.messageCenter .addToHomeBox .logo {
  text-align: center;
  margin: var(--padding-message-center-box-icon);
}

.messageCenter .addToHomeBox .logo > .UIImage {
  height: 64px;
}

.messageCenter .addToHomeBox .logo > .UILabel {
  display: block;
  text-align: center;
  padding: var(--padding-message-center-box-label);
}

.messageCenter .addToHomeBox .message {
  display: block;
  font-size: var(--font-size--message-center-box-message);
  padding-bottom: var(--padding-message-center-box-message);
}

.messageCenter .addToHomeBox .bottom {
  border-radius: 12px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  background-color: var(--background-color-message-center-box-bottom);
  width: var(--width-message-center-box-bottom);
  padding: var(--padding-message-center-box-bottom);
  position: fixed;
  bottom: 24px;
  left: 50%;
  margin-left: -160px;
}

.messageCenter .addToHomeBox .bottom:before {
  content: "";
  position: absolute;
  bottom: -12px;
  margin: -10px 0 0 -10px;
  display: block;
  left: 50%;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  z-index: 997;
  border-top: 12px solid #eee;
}

.messageCenter .addToHomeBox .bottom .UIImage {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  width: 24px;
  margin: var(--padding-message-center-box-bottom-image);
}

/** messageCenter/addToHomeBox: END **/
/********************************     messageCenter: END     ********************************/
/********************************      元件組合樣式定義:START(之後不要用)      ********************************/
/** 元件容器標題 **/
/** 元件容器標題底線 **/
/** 元件容器內容 **/
/********************************      元件組合樣式定義:END      ********************************/
/********************************      WebKit/common:tooltip:START      ********************************/
/* tooltip:START */
.tip {
  position: relative;
}

.tip:hover {
  cursor: pointer;
}

.tip:hover:before,
.tip:hover:after {
  display: initial;
}

.tip:before {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background: #000;
  color: #fff;
  padding: 0.2em 0.5em;
  white-space: pre;
  margin-left: 14px;
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 0px;
  z-index: 9999;
}

.tip:after {
  border-width: 8px;
  border-style: solid;
  border-color: transparent #000 transparent transparent;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  z-index: 9999;
}

.tip:before,
.tip:after {
  opacity: 0.8;
  display: none;
  transition: opacity 0.3s ease-out;
}

/* tooltip:END */
.UIFormItem > th.tip:after,
.UILabel.tip:after,
.UILinkButton.tip:after,
.UILink.tip:after,
.UIButton.tip:after {
  top: 5px;
  right: -14px;
}

.UILabel.tip,
.UILink.tip {
  display: inline-block;
}

.UIPanel > .top > .caption > .tip > i {
  padding-left: 6px;
}

/********************************      WebKit/common:tooltip:END      ********************************/
/********************************      WebKit/app:UIApp:START      ********************************/
.UIApp, .UIPage {
  --font-size-app_fs4: 12px;
  --font-size-app_fs6: 16px;
  --font-size-app_fs7: 18px;
  --font-size-app_fs8: 20px;
}

.UIApp, .UIPage {
  color: var(--font-color);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
  /** 字型大小定義 **/
  /** RWD Support **/
}
.UIApp a, .UIPage a {
  color: var(--font-color-link);
  text-decoration: none;
}
.UIApp a:hover, .UIPage a:hover {
  color: var(--font-color-link_hover);
  text-decoration: none;
}
.UIApp a:disabled, .UIPage a:disabled {
  cursor: default;
}
.UIApp .fs4, .UIPage .fs4 {
  font-size: var(--font-size-app_fs4);
}
.UIApp .fs6, .UIPage .fs6 {
  font-size: var(--font-size-app_fs6);
}
.UIApp .fs7, .UIPage .fs7 {
  font-size: var(--font-size-app_fs7);
}
.UIApp .fs8, .UIPage .fs8 {
  font-size: var(--font-size-app_fs8);
}
@media (max-width: 768px) {
  .UIApp .hiddenXs, .UIPage .hiddenXs {
    display: none !important;
  }
  .UIApp .hidden:not(.showXs), .UIPage .hidden:not(.showXs) {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .UIApp .hiddenSm, .UIPage .hiddenSm {
    display: none !important;
  }
  .UIApp .hidden:not(.showSm), .UIPage .hidden:not(.showSm) {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .UIApp .hiddenMd, .UIPage .hiddenMd {
    display: none !important;
  }
  .UIApp .hidden:not(.showMd), .UIPage .hidden:not(.showMd) {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .UIApp .hiddenLg, .UIPage .hiddenLg {
    display: none !important;
  }
  .UIApp .hidden:not(.showLg), .UIPage .hidden:not(.showLg) {
    display: none !important;
  }
}

/* mac系統 */
.UIApp.mac.retina,
.UIApp.mac.retina input,
.UIApp.mac.retina select {
  font-weight: var(--font-weight-light);
}

/* windows系統 */
.UIApp.windows,
.UIApp.windows input,
.UIApp.windows select {
  font-weight: var(--font-weight-bold);
}

/* HD/Retina */
/********************************      WebKit/app:UIApp:END      ********************************/
/********************************      WebKit/app:UIAlert:START      ********************************/
.UIAlert {
  --background-color-alert-header: rgba(0, 0, 0, 0.2);
  --background-color-alert-info: #b8c9d1;
  --background-color-alert-error: #c84346;
  --background-color-alert-confirm: #fff;
  --background-color-alert-confirm-header: #67a4c0;
  --border-radius-alert: 0px;
  --border-radius-alert-button: 3px;
  --font-color-alert-light: #fff;
  --font-color-alert-dark: #000;
  --width-min-alert-button: 80px;
  --height-min-alert-body: 80px;
  --padding-alert-body: 1.2rem;
}

.UIAlert {
  z-index: 99999 !important;
}

.UIAlert .toast {
  border-radius: var(--border-radius-alert);
  -moz-border-radius: var(--border-radius-alert);
  -webkit-border-radius: var(--border-radius-alert);
  font-size: 1rem;
}

.UIAlert .toast .toast-header {
  border-top-left-radius: var(--border-radius-alert);
  -webkit-border-top-left-radius: var(--border-radius-alert);
  -moz-border-top-left-radius: var(--border-radius-alert);
  border-top-right-radius: var(--border-radius-alert);
  -webkit-border-top-right-radius: var(--border-radius-alert);
  -moz-border-top-right-radius: var(--border-radius-alert);
  font-size: 1rem;
}

.UIAlert .toast .toast-footer {
  text-align: center;
}

.UIAlert .toast .toast-body {
  padding: var(--padding-alert-body);
  min-height: var(--height-min-alert-body);
}

.UIAlert .toast .toast-footer .UIButton {
  border-radius: var(--border-radius-alert-button);
  -moz-border-radius: var(--border-radius-alert-button);
  -webkit-border-radius: var(--border-radius-alert-button);
  min-width: var(--width-min-alert-button);
}

.UIAlert.Info .toast,
.UIAlert.Error .toast {
  color: var(--font-color-alert-light);
}

.UIAlert.Info .toast .toast-header,
.UIAlert.Error .toast .toast-header {
  background-color: var(--background-color-alert-header);
  color: var(--font-color-alert-light);
}

.UIAlert.Info .toast {
  background-color: var(--background-color-alert-info);
}

.UIAlert.Error .toast {
  background-color: var(--background-color-alert-error);
}

.UIAlert.Confirm .toast {
  background-color: var(--background-color-alert-confirm);
  color: var(--font-color-alert-dark);
}

.UIAlert.Confirm .toast .toast-header {
  background-color: var(--background-color-alert-confirm-header);
  color: var(--font-color-alert-light);
}

#UIAlertMask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9;
}

/********************************      WebKit/app:UIAlert:END      ********************************/
/********************************      WebKit/app:UIPage:START      ********************************/
.UIPage.print {
  --background-color-page: #cdcdcd;
  --background-color-page-document: #fff;
  --border-page-document: 1px #D3D3D3 solid;
}

.UIPage.print {
  background-color: var(--background-color-page);
  margin: 0;
  padding: 0;
}

.UIPage.print .document {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: var(--background-color-page-document);
  border: var(--border-page-document);
  position: relative;
  width: 21cm;
  min-height: 29.7cm;
  padding: 1.2cm 2cm;
  margin: 1cm auto;
}

/* Preview:START */
.UIPage.print .document .preview {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #cdcdcd;
  font-size: var(--font-size-base);
  width: 100%;
  height: 32px;
  text-align: center;
  position: absolute;
  top: -36px;
  left: 0;
}

.UIPage.print .document .preview .UILabel {
  line-height: 32px;
}

.UIPage.print .document .preview .UIButton {
  height: 32px;
  padding: 0 38px;
  position: absolute;
  right: 0;
}

/* Preview:END */
/* UIForm:START */
.UIPage.print .UIForm > table > tbody > tr > th {
  padding: initial;
}

.UIPage.print .UIForm > table > tbody > tr > td {
  padding: calc(var(--padding-webkit) / 4) calc(var(--padding-webkit) / 3);
}

/* UIForm:END */
/* UIDataTable:START */
.UIPage.print .UIDataTable > table > thead > tr > th,
.UIPage.print .UIPaginatedDataTable > table > thead > tr > th {
  border-bottom: 1px solid #000;
}

.UIPage.print .UIDataTable > table > tbody > tr.contrast:nth-child(odd),
.UIPage.print .UIPaginatedDataTable > table > tbody > tr.contrast:nth-child(odd) {
  background-color: #fff;
}

.UIPage.print .UIDataTable > table > tbody > tr > td,
.UIPage.print .UIPaginatedDataTable > table > tbody > tr > td {
  padding: calc(var(--padding-webkit) / 2) calc(var(--padding-webkit) / 3);
}

/* UIDataTable:END */
/********************************      WebKit/app:UIPage:END      ********************************/
/********************************      WebKit/app:UIPrint:START      ********************************/
/** SIZE:STANDARD(A4):START **/
.UIPrint {
  font-size: 12px;
  padding: 38px 32px;
  height: initial;
}

.UIPrint .UIForm > table > tbody > tr > th > span {
  line-height: initial;
}

.UIPrint .UIForm > table > tbody > tr > th {
  padding: 2px 4px;
}

.UIPrint .UIForm > table > tbody > tr > td {
  padding: 2px 4px;
}

.UIPrint .UIDataTable table > tbody > tr > td, .UIPrint .UIPaginatedDataTable > table > tbody > tr > td {
  padding: 2px 4px;
}

.UIPrint .UIDataTable table > tbody > tr > td > .UIImage, .UIPrint .UIPaginatedDataTable > table > tbody > tr > td > .UIImage {
  margin-top: -2px;
  margin-bottom: -2px;
}

.UIPrint #header .companyName {
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
}

.UIPrint #header .name {
  font-size: 1.3rem;
  text-align: center;
  border-bottom: 1px solid #000;
}

.UIPrint #header #print_header {
  position: relative;
  min-height: 52px;
}

.UIPrint #header #print_header .qrcode {
  position: absolute;
  top: 12px;
  left: 0px;
}

.UIPrint #header #print_header .barcode {
  position: absolute;
  top: 24px;
  right: 12px;
}

.UIPrint #body .dataHeader {
  border-bottom: 1px solid #000;
  margin-bottom: 12px;
}

.UIPrint #body .dataBody {
  border-bottom: 1px solid #000;
  margin-bottom: 12px;
}

.UIPrint #body .dataFooter {
  display: flex;
  justify-content: flex-end;
}

/** SIZE:STANDARD:END **/
/** SIZE:HALF:START **/
.UIPrint {
  padding: 22px 26px 12px 26px;
}

.UIPrint.HALF #header .companyName {
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
}

.UIPrint.HALF #header .name {
  font-size: 1.2rem;
  text-align: center;
  border-bottom: 1px solid #000;
}

.UIPrint.HALF #header #print_header .qrcode {
  position: absolute;
  top: 12px;
  left: 0px;
}

.UIPrint.HALF #header #print_header .barcode {
  display: none;
}

/** SIZE:HALF:END **/
/** PAGE:START **/
.UIPrint .page {
  -moz-column-break-after: page;
       break-after: page;
}

/** PAGE:END **/
/** NOTICE:START **/
.UIPrint .notice {
  padding-top: 12px;
}

.UIPrint .notice .qrcode {
  padding-top: 12px;
}

/** NOTICE:END **/
/** SIZE:CUSTOM:START **/
/** SIZE:CUSTOM:END **/
@media print {
  body, input, textarea, button, legend, select {
    font-family: var(--font-family);
    font-weight: 500 !important;
  }
  body {
    background-color: #fafafa;
    margin: 0;
    padding: 0;
  }
  * {
    color: #000 !important;
  }
  /* 設定列印不會出現網址 */
  a[href]:after {
    content: none !important;
  }
  .page {
    page-break-inside: avoid; /* 使元素不會於換頁時中斷*/
    page-break-after: always; /* 碰到該元素時換頁 */
    /* min-height: 100vh;*/
  }
  .page::after {
    content: counter(page-number);
    counter-increment: page-number 1;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    font-size: 8px;
    text-align: center;
  }
  /* 修正列印時, 採用電腦版方式 */
  .container {
    width: 1170px;
  }
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-1 {
    width: 8.33333333%;
  }
  .UIHorizontalLayout tr td {
    vertical-align: top;
  }
}
/********************************      WebKit/app:UIPrint:END      ********************************/
/********************************      WebKit/app:UIPwa:START      ********************************/
.UIPwa > .btnAddToHome {
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  font-size: var(--font-size-large);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 65px;
}

/********************************      WebKit/app:UIPwa:END      ********************************/
/*******************************      WebKit/layout:UIActionForm:START   ********************************/
.UIActionForm {
  display: none;
}

/*******************************      WebKit/layout:UIActionForm:END   ********************************/
/********************************      WebKit/layout:UIDataTable/UIPaginatedDataTable:START      ********************************/
.UIDataTable, .UIPaginatedDataTable {
  --background-color-datatable-group-head: #eee;
  --background-color-datatable-item_odd: #fafbfc;
  --background-color-datatable-item_hover: #ceecf5;
  --border-datatable-head-group: 1px solid #fff;
  --border-datatable-head: var(--border-color-light);
  --border-datatable-item: var(--border-color-light);
  --border-radius-datatable-item: var(--border-radius-widget);
  --color-datatable-button-group: var(--color-main);
  --font-color-datatable-head: var(--font-color-subtitle);
  --font-size-datatable-head: var(--font-size-small);
  --font-size-datatable-footer: var(--font-size-small);
  --font-weight-datatable-footer: var(--font-weight-heavy);
  --padding-datatable-head_tb: var(--padding-list-head_tb);
  --padding-datatable-head_lr: var(--padding-list-head_lr);
  --padding-datatable-item_tb: var(--padding-list-item_tb);
  --padding-datatable-item_lr: var(--padding-list-item_lr);
  --padding-datatable-foot_first: var(--padding-webkit);
  --size-datatable-image: 46px;
}

.UIDataTable #message,
.UIPaginatedDataTable #message,
.UIPaginatedRepeater #message,
.UIPaginatedGridLayout #message {
  --font-color-datatable-message: var(--font-color-hint);
  --padding-datatable-message_tb: var(--padding-list-foot_tb);
  --padding-datatable-message_lr: var(--padding-list-foot_lr);
}

.UIDataTable,
.UIPaginatedDataTable {
  overflow-x: auto;
  border-collapse: collapse;
}

.UIDataTable table,
.UIPaginatedDataTable > table {
  table-layout: auto;
}

.UIDataTable table > tbody > tr > td.left,
.UIDataTable table > thead > tr > th.left,
.UIDataTable table > tfoot > tr > td.left,
.UIPaginatedDataTable > table > tbody > tr > td.left,
.UIPaginatedDataTable table > thead > tr > th.left,
.UIPaginatedDataTable > table > tfoot > tr > td.left {
  text-align: left;
}

.UIDataTable table > tbody > tr > td.center,
.UIDataTable table > thead > tr > th.center,
.UIDataTable table > tfoot > tr > td.center,
.UIPaginatedDataTable > table > tbody > tr > td.center,
.UIPaginatedDataTable table > thead > tr > th.center,
.UIPaginatedDataTable > table > tfoot > tr > td.centercenter {
  text-align: center;
}

.UIDataTable table > tbody > tr > td.right,
.UIDataTable table > thead > tr > th.right,
.UIDataTable table > tfoot > tr > td.right,
.UIPaginatedDataTable > table > tbody > tr > td.right,
.UIPaginatedDataTable table > thead > tr > th.right,
.UIPaginatedDataTable > table > tfoot > tr > td.right {
  text-align: right;
}

/* tbody:START */
.UIDataTable table > tbody > tr > td,
.UIPaginatedDataTable > table > tbody > tr > td {
  border-bottom: var(--border-datatable-item);
  vertical-align: middle;
  padding: var(--padding-datatable-item_tb) var(--padding-datatable-item_tb);
}
@media only screen and (min-width: 992px) {
  .UIDataTable table > tbody > tr > td,
  .UIPaginatedDataTable > table > tbody > tr > td {
    white-space: nowrap;
  }
}

.UIDataTable table > tbody > tr > td.nowrap,
.UIPaginatedDataTable > table > tbody > tr > td.nowrap {
  white-space: nowrap;
}

.UIDataTable table > tbody > tr > td.normal,
.UIPaginatedDataTable > table > tbody > tr > td.normal {
  white-space: normal;
}

.UIDataTable table > tbody > tr.contrast:nth-child(odd),
.UIPaginatedDataTable > table > tbody > tr.contrast:nth-child(odd) {
  background-color: var(--background-color-datatable-item_odd);
}

.UIDataTable table > tbody > tr.contrast:hover,
.UIPaginatedDataTable > table > tbody > tr.contrast:hover {
  background-color: var(--background-color-datatable-item_hover);
}

.UIDataTable table > tbody > tr > td > .UIImage,
.UIPaginatedDataTable > table > tbody > tr > td > .UIImage {
  border-radius: var(--border-radius-datatable-item);
  -moz-border-radius: var(--border-radius-datatable-item);
  -webkit-border-radius: var(--border-radius-datatable-item);
  min-width: var(--size-datatable-image);
  min-height: var(--size-datatable-image);
  margin-top: calc(0px - var(--padding-datatable-item_tb));
  margin-bottom: calc(0px - var(--padding-datatable-item_tb));
}
@media only screen and (max-width: 768px) {
  .UIDataTable table > tbody > tr > td > .UIImage,
  .UIPaginatedDataTable > table > tbody > tr > td > .UIImage {
    margin-top: calc(0px - var(--padding-datatable-item_tb_xs));
    margin-bottom: calc(0px - var(--padding-datatable-item_tb_xs));
  }
}

/* tbody:END */
/* thead:START */
.UIDataTable table > thead > tr > th,
.UIPaginatedDataTable > table > thead > tr > th {
  border-bottom: var(--border-color-light);
  color: var(--font-color-datatable-head);
  font-size: var(--font-size-datatable-head);
  white-space: nowrap;
  padding: var(--padding-datatable-head_tb) var(--padding-datatable-head_lr);
}

.UIDataTable .bootstrap-table table > thead > tr > th {
  border-bottom: var(--border-datatable-head) !important;
}

.UIDataTable .bootstrap-table table > thead > tr > th > .th-inner {
  padding: var(--padding-datatable-head_tb) var(--padding-datatable-head_lr) !important;
}

.UIDataTable table > thead > tr > th[data-sortable=true] {
  cursor: pointer;
}

.UIDataTable table > thead > tr > th[data-sortable=true]:after {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-left: var(--padding-gutter);
  content: "\f0dc";
}

.UIDataTable table > thead > tr > th[data-sort=asc]:after {
  content: "\f0de";
}

.UIDataTable table > thead > tr > th[data-sort=desc]:after {
  content: "\f0dd";
}

/* 群組 */
.UIDataTable table > thead > tr.group > th,
.UIPaginatedDataTable > table > thead > tr.group > th {
  background-color: var(--background-color-datatable-group-head);
  border: var(--border-datatable-head-group);
}

/* thead:END */
/* tfoot:START */
.UIDataTable table > tfoot > tr > td,
.UIPaginatedDataTable > table > tfoot > tr > td {
  font-size: var(--font-size-datatable-footer);
  font-weight: var(--font-weight-datatable-footer);
  padding: var(--padding-datatable-head_tb) var(--padding-datatable-head_lr);
}

.UIDataTable table > tfoot > tr > td:first-child,
.UIPaginatedDataTable > table > tfoot > tr > td:first-child {
  padding-left: var(--padding-datatable-foot_first);
}

/* tfoot:END */
@media only screen and (max-width: 768px) {
  .UIDataTable table > tbody .UIDataColumn.action.btnGroup:before,
  .UIPaginatedDataTable > table tbody .UIDataColumn.action.btnGroup:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-style: normal;
    padding-right: 6px;
    content: "\f138";
    color: var(--color-datatable-button-group);
    font-size: var(--font-size-datatable-control);
  }
  .UIDataTable table > tbody .UIDataColumn.action.btnGroup > *,
  .UIPaginatedDataTable > table tbody .UIDataColumn.action.btnGroup > * {
    display: none;
  }
}
/********************************      WebKit/layout:UIDataTable/UIPaginatedDataTable:END      ********************************/
/********************************      WebKit/layout:pageControl)UIDataTable/UIPaginatedDataTable/UIPaginatedRepeater/UIPaginatedGridLayout:START      ********************************/
.UIDataTable #pageControl,
.UIPaginatedDataTable #pageControl,
.UIPaginatedRepeater #pageControl,
.UIPaginatedGridLayout #pageControl {
  --background-color-datatable-control_active: var(--color-main);
  --border-datatable-control: var(--border-color-light);
  --font-color-datatable-control: var(--font-color);
  --font-color-datatable-control_active: #fff;
  --font-color-datatable-control_disabled: #777;
  --font-size-datatable-control: 24px;
  --padding-datatable-control_tb: var(--padding-list-foot_tb);
  --padding-datatable-control_lr: var(--padding-list-foot_lr);
  --padding-datatable-control-item: 0 6px;
  --size-datatable-control-item: 32px;
}

.UIDataTable #pageControl,
.UIPaginatedDataTable #pageControl,
.UIPaginatedRepeater #pageControl,
.UIPaginatedGridLayout #pageControl {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  margin: var(--padding-datatable-control_tb) var(--padding-datatable-control_lr);
}

.UIDataTable #pageControl > li > a,
.UIPaginatedDataTable #pageControl > li > a,
.UIPaginatedRepeater #pageControl > li > a,
.UIPaginatedGridLayout #pageControl > li > a {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  border: var(--border-datatable-control);
  color: var(--font-color-datatable-control);
  width: var(--size-datatable-control-item);
  height: var(--size-datatable-control-item);
  margin-left: -1px;
}

.UIDataTable #pageControl > li > a:hover, .UIDataTable #pageControl > li > a.active,
.UIPaginatedDataTable #pageControl > li > a:hover, .UIPaginatedDataTable #pageControl > li > a.active,
.UIPaginatedRepeater #pageControl > li > a:hover, .UIPaginatedRepeater #pageControl > li > a.active,
.UIPaginatedGridLayout #pageControl > li > a:hover, .UIPaginatedGridLayout #pageControl > li > a.active {
  background-color: var(--background-color-datatable-control_active);
  color: var(--font-color-datatable-control_active);
  cursor: default;
  z-index: 2;
}

.UIDataTable #pageControl > li:first-child > a,
.UIPaginatedDataTable #pageControl > li:first-child > a,
.UIPaginatedRepeater #pageControl > li:first-child > a,
.UIPaginatedGridLayout #pageControl > li:first-child > a {
  border-top-left-radius: 3px;
  -webkit-border-top-left-radius: 3px;
  -moz-border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-bottom-left-radius: 3px;
}

.UIDataTable #pageControl > li:last-child > a,
.UIPaginatedDataTable #pageControl > li:last-child > a,
.UIPaginatedRepeater #pageControl > li:last-child > a,
.UIPaginatedGridLayout #pageControl > li:last-child > a {
  border-top-right-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  -moz-border-bottom-right-radius: 3px;
}

.UIDataTable #pageControl > li > a[disabled],
.UIPaginatedDataTable #pageControl > li > a[disabled],
.UIPaginatedRepeater #pageControl > li > a[disabled],
.UIPaginatedGridLayout #pageControl > li > a[disabled] {
  color: var(--font-color-datatable-control_disabled);
  cursor: not-allowed;
}

.UIDataTable #pageControl #prev > i:before,
.UIPaginatedDataTable #pageControl #prev > i:before,
.UIPaginatedRepeater #pageControl #prev > i:before,
.UIPaginatedGridLayout #pageControl #prev > i:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f32a";
  font-size: var(--font-size-datatable-control);
  padding: var(--padding-datatable-control-item);
}

.UIDataTable #pageControl #next > i:before,
.UIPaginatedDataTable #pageControl #next > i:before,
.UIPaginatedRepeater #pageControl #next > i:before,
.UIPaginatedGridLayout #pageControl #next > i:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f32b";
  font-size: var(--font-size-datatable-control);
  padding: var(--padding-datatable-control-item);
}

.UIDataTable #pageControl .UIMenuWrapper,
.UIPaginatedDataTable #pageControl .UIMenuWrapper,
.UIPaginatedRepeater #pageControl .UIMenuWrapper,
.UIPaginatedGridLayout #pageControl .UIMenuWrapper {
  height: var(--font-size-datatable-control);
}

.UIDataTable #pageControl .UIMenuWrapper::before,
.UIPaginatedDataTable #pageControl .UIMenuWrapper::before,
.UIPaginatedRepeater #pageControl .UIMenuWrapper::before,
.UIPaginatedGridLayout #pageControl .UIMenuWrapper::before {
  line-height: var(--font-size-datatable-control);
}

.UIDataTable #pageControl .UIMenuWrapper > select,
.UIPaginatedDataTable #pageControl .UIMenuWrapper > select,
.UIPaginatedRepeater #pageControl .UIMenuWrapper > select,
.UIPaginatedGridLayout #pageControl .UIMenuWrapper > select {
  -moz-text-align-last: center;
       text-align-last: center;
  text-align: center;
}

.UIDataTable #message,
.UIPaginatedDataTable #message {
  color: var(--font-color-datatable-message);
  display: block;
  padding: var(--padding-datatable-message_tb) var(--padding-datatable-message_lr);
}

/********************************      WebKit/layout:pageControl)UIDataTable/UIPaginatedDataTable/UIPaginatedRepeater/UIPaginatedGridLayout:START      ********************************/
/********************************      WebKit/layout:UIPaginatedRepeater:START      ********************************/
.UIPaginatedRepeater {
  overflow-x: auto;
  border-collapse: collapse;
}

.UIPaginatedRepeater > table {
  table-layout: auto;
}

/********************************      WebKit/layout:UIPaginatedRepeater:END      ********************************/
/********************************      WebKit/layout:UIDropdown:START      ********************************/
.UIDropdown {
  --background-color-dropdown-item: #eee;
  --padding-dropdown: var(var(--padding-webkit));
  --padding-dropdown-item: var(var(--padding-webkit));
}

.UIDropdown .dropdown-menu {
  box-shadow: 0 5px 10px 0 rgba(183, 192, 206, 0.2);
  -webkit-box-shadow: 0 5px 10px 0 rgba(183, 192, 206, 0.2);
  -moz-box-shadow: 0 5px 10px 0 rgba(183, 192, 206, 0.2);
  border: 0;
  padding: var(--padding-dropdown) !important;
}

.UIDropdown .dropdown-menu .dropdown-item {
  font-size: var(--font-size-base);
  padding: var(--padding-list-item);
}

.UIDropdown .dropdown-menu .dropdown-item:hover,
.UIDropdown .dropdown-menu .dropdown-item:active {
  background-color: var(--background-color-dropdown-item);
}

.UIDropdown .dropdown-toggle::after {
  display: none;
}

/********************************      WebKit/layout:UIDropdown:END      ********************************/
/********************************      WebKit/layout:UIEffect:START      ********************************/
.UIEffect.flip {
  cursor: pointer;
}

.UIEffect.flip .inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.9s;
}

.UIEffect.flip .inner.open {
  transform: rotateY(180deg);
}

.UIEffect.flip .inner .face.front,
.UIEffect.flip .inner .face.back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.UIEffect.flip .inner .face.back {
  position: absolute;
  top: 0;
  left: 0;
}

.UIEffect.flip .inner .face.back {
  transform: rotateY(180deg);
}

/********************************      WebKit/layout:UIEffect:END      ********************************/
/********************************      WebKit/layout:UIFixedLayout:START      ********************************/
.UIFixedLayout {
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  position: relative;
}

.UIFixedLayout > div {
  float: left;
}

/** 設定滿版:START **/
.UIFixedLayout.fill, .UIFixedLayout.fill > div {
  height: 100%;
}

/** 設定滿版:END **/
@media only screen and (max-width: 768px) {
  .UIFixedLayout.responsive > div {
    width: 100% !important;
    margin: 0 !important;
  }
}
/********************************      WebKit/layout:UIFixedLayout:END      ********************************/
/********************************      WebKit/layout:UIForm:START      ********************************/
.UIForm {
  --font-color-form-head: var(--font-color-subtitle);
  --font-color-form-item-prefix: #db5031;
  --font-size-form-head_vertical: var(--font-size-smaller);
  --line-height-form-item-label: 24px;
  --padding-form-head: var(--padding-list-head);
  --padding-form-item_tb: var(--padding-list-item_tb);
  --padding-form-item_lr: var(--padding-list-item_lr);
  --margin-form-caption: var(--margin-webkit) / 2;
  --width-form-item: 62px;
}

@media only screen and (max-width: 768px) {
  .UIForm {
    --width-form-item: 68px;
  }
}
.UIForm > .caption {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  color: var(--font-color-title);
  font-size: var(--font-size-title);
  height: var(--height-layout-title);
  border-bottom: var(--border-color-light);
}

/* 水平排列樣式(horizontal):START */
.UIForm > table {
  border-collapse: collapse; /* 設定讓tr可以畫底線 */
}

/* 有設定標題的table需有邊界 */
.UIForm > .caption + table {
  margin-top: var(--margin-form-caption);
}

.UIForm > table > tbody > tr > th {
  color: var(--font-color-form-head);
  min-width: var(--width-form-item);
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  padding-right: var(--padding-form-head);
}

/* 設定欄位最小高度 */
.UIForm > table > tbody > tr > th > span {
  line-height: var(--line-height-form-item-label);
}

.UIForm > table > tbody > tr > th > .prefix {
  color: var(--font-color-form-item-prefix);
  margin-right: 1px;
}

.UIForm > table > tbody > tr > td {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: flex-start;
  -webkit-align-items: flex-start;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  /* 內容上下對齊  */
  align-items: stretch;
  /* 超出範圍時是否換行 [nowrap | wrap | wrap-reverse] */
  flex-wrap: wrap;
  padding: var(--padding-form-item_tb) var(--padding-form-item_lr);
}

.UIForm > table > tbody > tr > td.nowrap {
  /* 超出範圍時是否換行 [nowrap | wrap | wrap-reverse] */
  flex-wrap: nowrap;
}

/* 水平排列樣式:END */
/* 垂直排列樣式(vertical):START */
/* 有設定標題的table需有邊界 */
.UIForm > .caption + .UIFormItem {
  margin-top: var(--margin-form-caption);
}

.UIForm > .UIFormItem {
  margin-top: var(--margin-form-caption);
}

.UIForm > .UIFormItem:first-child {
  margin-top: 0;
}

.UIForm > .UIFormItem:last-child {
  margin-bottom: 0;
}

.UIForm > .UIFormItem > div.title {
  color: var(--font-color-form-head);
  font-size: var(--font-size-form-head_vertical);
  margin-bottom: var(--padding-form-head);
}

.UIForm > .UIFormItem > div.data {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: flex-start;
  -webkit-align-items: flex-start;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  margin-bottom: var(--padding-form-item_tb);
}

/* 垂直排列樣式:END */
/********************************      WebKit/layout:UIForm:END      ********************************/
/*******************************      WebKit/layout:UIGridLayout:START  ********************************/
.UIGridLayout {
  --padding-grid-layout-item: var(var(--padding-webkit));
}

.UIGridLayout {
  margin: 0;
  overflow: hidden;
  position: relative;
}

.UIGridLayout .item {
  display: inline-block;
  overflow: hidden;
  padding: var(--padding-grid-layout-item);
}

.UIGridLayout .item > .UIImage {
  width: 100%;
}

/*******************************      WebKit/layout:UIGridLayout:END  ********************************/
/********************************      WebKit/layout:UIGroup:START  ********************************/
.UIGroup {
  --background-color-group-mask: #160f0f;
  --background-color-group-head: #eee;
  --background-color-group-head-link-button: var(--color-main);
  --font-size-group-head: 1rem;
  --font-size-group-head_minor: 0.7rem;
  --font-color-group-head-link-button: var(--font-color-white);
  --padding-group-session: var(--padding-layout);
  --padding-group-caption: var(--padding-layout);
  --padding-group-head: var(--padding-gutter);
  --padding-group-head-link-button: var(--padding-webkit);
  --padding-group-body: var(--padding-gutter);
  --margin-group-head_top: 12px;
}

.UIGroup > .caption:first-child {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  color: var(--font-color-title);
  font-size: var(--font-size-title);
  height: var(--height-layout-title);
}

/** 對齊方式:START **/
.UIGroup.center {
  text-align: center;
  margin: 0 auto;
}

.UIGroup.left {
  float: left;
}

.UIGroup.right {
  float: right;
}

/** 對齊方式:END **/
/* .session(設定群組下面有間距):START */
.UIGroup.session {
  margin-bottom: var(--padding-group-session);
}

/* .session:END */
/** underline:START **/
.UIGroup.underline > .caption {
  border-bottom: var(--border-color-light);
  margin-bottom: var(--padding-group-caption);
}

/** underline:END **/
/** divider:START(畫分割線) **/
.UIGroup.divider {
  border-top: var(--border-color-light);
  margin-top: var(--padding-gutter);
  padding-top: var(--padding-gutter);
}

/** divider:END **/
/** mask(遮罩):START **/
.UIGroup.mask {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  /* 內容元素排列方式 [row: 左到右, row-reverse: row相反, column: 上到下, column-reverse: column相反]*/
  flex-direction: column;
  background-color: var(--background-color-group-mask);
  width: 100%;
  height: 100%;
  opacity: 80%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999;
}

.UIGroup.mask > .caption {
  color: #fff;
}

.UIGroup.mask > .content .UIButton {
  width: 200px;
  margin-top: 12px;
}

/** mask:END **/
/** 超過一行顯示...:START **/
.UIGroup.ellipsis {
  /* 設定內容超過幾行就會產生 ... */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  flex-grow: 1;
}

/** 對齊方式:END **/
/** 填滿高度:START **/
.UIGroup.fill {
  height: 100%;
  overflow-y: auto;
}

/** 填滿高度:END **/
/** youtube:START **/
.UIGroup.youtubeContainer {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.UIGroup.youtubeContainer iframe,
.UIGroup.youtubeContainer object,
.UIGroup.youtubeContainer embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/** youtube:START **/
/** toggle: START **/
.UIGroup.toggle > .control {
  cursor: pointer; /* 添加手型鼠標指針 */
}

.UIGroup.toggle > .content {
  display: none; /* 預設隱藏 */
  animation: fadeIn 0.5s; /* 添加下拉動畫 */
}

/** toggle: START **/
/** 設定標題樣式: START **/
.UIGroup > .header {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
  font-size: var(--font-size-group-head);
  background-color: var(--background-color-group-head);
  padding: var(--padding-group-head);
}

.UIGroup > .header.minor {
  font-size: var(--font-size-group-head_minor);
}

.UIGroup > .header.marginTop {
  margin-top: var(--margin-group-head_top);
}

.UIGroup > .header .UILinkButton {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: var(--background-color-group-head-link-button);
  border: 0;
  color: var(--font-color-group-head-link-button);
  cursor: pointer;
  display: inline-block;
  padding: 0px var(--padding-group-head-link-button);
  white-space: nowrap;
}

.UIGroup > .body {
  padding: var(--padding-group-body);
}

/** 設定小標題樣式: END **/
/** 背景圖: START **/
.UIGroup.bgImage {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/** 背景圖: END **/
/********************************      WebKit/layout:UIGroup:START  ********************************/
/********************************      WebKit/layout:UIGroupList:START     ********************************/
.UIGroupList {
  --background-color-group-list: #fff;
  --background-color-group-list-caption: transparent;
  --background-color-group-list-item_hover: rgba(0, 0, 0, 0.05);
  --border-radius-group-list: 8px;
  --border-group-list: 1px solid #ddd;
  --border-group-list-caption: 1px solid var(--color-main);
  --border-group-list-item: 1px solid #ddd;
  --font-color-group-list_hover: var(--font-color);
  --padding-group-list: var(--padding-webkit);
  --padding-group-list-caption: var(--padding-webkit);
  --padding-group-list-item_tb: calc(var(--padding-list-item_tb) * 2);
  --padding-group-list-item_lr: calc(var(--padding-list-item_lr) * 2);
}

.UIGroupList {
  border-radius: var(--border-radius-group-list);
  -moz-border-radius: var(--border-radius-group-list);
  -webkit-border-radius: var(--border-radius-group-list);
  background-color: var(--background-color-group-list);
  border: var(--border-group-list);
  position: relative;
  margin-bottom: var(--padding-group-list);
}

.UIGroupList > .top {
  border-top-left-radius: var(--border-radius-group-list);
  -webkit-border-top-left-radius: var(--border-radius-group-list);
  -moz-border-top-left-radius: var(--border-radius-group-list);
  border-top-right-radius: var(--border-radius-group-list);
  -webkit-border-top-right-radius: var(--border-radius-group-list);
  -moz-border-top-right-radius: var(--border-radius-group-list);
  background-color: var(--background-color-group-list-caption);
  border-bottom: var(--border-group-list-caption);
  overflow: hidden;
}

.UIGroupList > .top > .caption {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  color: var(--font-color-title);
  font-size: var(--font-size-title);
  height: var(--height-layout-title);
  padding: 0 var(--padding-group-list-caption);
}

.UIGroupList > .top .UIGroupListBar {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  color: var(--font-color-title);
  font-size: var(--font-size-title);
  height: var(--height-layout-title);
  position: absolute;
  top: 0px;
  right: 2px;
  padding: 2px 0;
}

.UIGroupList > .content {
  border-bottom-left-radius: var(--border-radius-group-list);
  -webkit-border-bottom-left-radius: var(--border-radius-group-list);
  -moz-border-bottom-left-radius: var(--border-radius-group-list);
}

.UIGroupList > .item,
.UIGroupList > .content > .item {
  border-bottom: var(--border-group-list-item);
  padding: var(--padding-group-list-item_tb) var(--padding-group-list-item_lr);
}

.UIGroupList > .item:first-child {
  border-top-left-radius: var(--border-radius-group-list);
  -webkit-border-top-left-radius: var(--border-radius-group-list);
  -moz-border-top-left-radius: var(--border-radius-group-list);
  border-top-right-radius: var(--border-radius-group-list);
  -webkit-border-top-right-radius: var(--border-radius-group-list);
  -moz-border-top-right-radius: var(--border-radius-group-list);
}

.UIGroupList > .item:last-child,
.UIGroupList > .content > .item:last-child {
  border-bottom-left-radius: var(--border-radius-group-list);
  -webkit-border-bottom-left-radius: var(--border-radius-group-list);
  -moz-border-bottom-left-radius: var(--border-radius-group-list);
  border-bottom-right-radius: var(--border-radius-group-list);
  -webkit-border-bottom-right-radius: var(--border-radius-group-list);
  -moz-border-bottom-right-radius: var(--border-radius-group-list);
}

.UIGroupList > .item:hover,
.UIGroupList > .content > .item:hover {
  background-color: var(--background-color-group-list-item_hover);
}

.UIGroupList > .item.selected,
.UIGroupList > .content > .item.selected {
  background-color: var(--background-color-group-list-item_hover);
  color: var(--font-color-group-list_hover);
  z-index: 2;
}

.UIGroupList > .item.selected .UILink,
.UIGroupList > .item.selected .UILinkButton,
.UIGroupList > .content > .item.selected .UILink,
.UIGroupList > .content > .item.selected .UILinkButton {
  color: var(--font-color-group-list_hover);
}

/********************************      WebKit/layout:UIGroupList:END     ********************************/
/********************************      WebKit/layout:UIHorizontalLayout:START      ********************************/
.UIHorizontalLayout {
  --border-horizontal-layout: 1px solid #eee;
}

.UIHorizontalLayout,
.UIHorizontalLayout tr {
  width: 100%;
}

.UIHorizontalLayout tr td {
  vertical-align: top;
}

.UIHorizontalLayout.divider > .row > div {
  border-right: var(--border-horizontal-layout);
}

.UIHorizontalLayout.divider > .row > div:last-child {
  border-right: none;
}

/* fill:START */
.UIHorizontalLayout.fill, .UIHorizontalLayout.fill .row, .UIHorizontalLayout.fill .row > div {
  height: 100%;
}

.UIHorizontalLayout.fill .row > div {
  overflow-y: auto;
}

/* fill:END */
/********************************      WebKit/layout:UIHorizontalLayout:START      ********************************/
/********************************      WebKit/layout:UIHorizontalList:START     ********************************/
.UIHorizontalList > .table {
  display: table;
}

.UIHorizontalList > .table > .tr {
  display: table-row;
  width: 100%;
}

.UIHorizontalList > .table > .tr > .td {
  display: table-cell;
  vertical-align: top;
}

/********************************      WebKit/layout:UIHorizontalList:END      ********************************/
/********************************      WebKit/layout:UIHorizontalWizard:START    ********************************/
.UIHorizontalWizard {
  --background-color-horizontal-wizard: #fff;
  --background-color-horizontal-wizard-items: #f2f2f2;
  --font-color-horizontal-wizard-item: var(var(--font-color));
  --border-horizontal-wizard: 1px solid #e3e8ed;
  --border-horizontal-wizard-items: 1px solid #e0e4e8;
  --padding-horizontal-wizard: var(--padding-webkit);
  --padding-horizontal-wizard-item: var(--padding-webkit) calc(var(--padding-webkit)/2) var(--padding-webkit) calc(var(--padding-webkit) * 1.5);
}

.UIHorizontalWizard {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: var(--background-color-horizontal-wizard);
  border: var(--border-horizontal-wizard);
  margin-bottom: var(--padding-horizontal-wizard);
}

.UIHorizontalWizard .items {
  background-color: var(--background-color-horizontal-wizard-items);
  border-bottom: var(--border-horizontal-wizard-items);
  padding: 0;
}

.UIHorizontalWizard .items ul {
  padding: 0;
  margin: 0;
}

.UIHorizontalWizard .items ul li {
  color: var(--font-color-horizontal-wizard-item);
  position: relative;
  float: left;
  padding: var(--padding-horizontal-wizard-item);
  margin: 0;
}

.UIHorizontalWizard .items ul li:first-child {
  padding-left: 15px;
  border-radius: 4px 0 0 0;
  -webkit-border-radius: 4px 0 0 0;
  -moz-border-radius: 4px 0 0 0;
}

.UIHorizontalWizard .items ul li:before,
.UIHorizontalWizard .items li:after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: -10px;
  border: 20px solid transparent;
  border-right: 0;
  border-left: 10px solid #e5e5e5;
  z-index: 1;
}

.UIHorizontalWizard .items ul li:after {
  border-left-color: #f2f2f2;
  right: -9px;
  z-index: 2;
}

.UIHorizontalWizard .items ul li.complete,
.UIHorizontalWizard .wizard ul li.complete:hover {
  background: #f2f2f2;
}

.UIHorizontalWizard .items ul li.complete:after {
  border-left-color: #f2f2f2;
}

.UIHorizontalWizard .items ul li.active {
  background: #fff;
  color: #0088cc;
  font-size: 1.1em;
}

.UIHorizontalWizard .items ul li.active:after {
  border-left-color: #fff;
}

.UIHorizontalWizard .items .badge {
  background: #b1b5b9;
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 0.9em;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  margin-right: 4px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

.UIHorizontalWizard .items .badgeInfo {
  background-color: #5191d1;
}

.UIHorizontalWizard .items .badgeSuccess {
  background-color: #3fcf7f;
}

.UIHorizontalWizard .content {
  padding: 12px 24px;
}

.UIHorizontalWizard .actions {
  float: right;
  margin: 2px 10px;
}

.UIHorizontalWizard .actions .UIWizardAction .UIButton {
  margin-top: 2px;
}

.UIHorizontalWizard .actions .UIWizardAction button.btnBack {
  border: 1px solid #c6c6c6;
}

/*@media only screen and (max-width: 768px) {
    .UIHorizontalWizard .items {
        font-size: 0.7em;
    }

    .UIHorizontalWizard .items ul li {
        padding-right: 6px;
    }
}*/
/********************************      WebKit/layout:UIHorizontalWizard:END    ********************************/
/*******************************      WebKit/layout:UIPaginatedGridLayout/UIPaginatedGridLayout2:START  ********************************/
/*******************************      WebKit/layout:UIPaginatedGridLayout/UIPaginatedGridLayout2:END  ********************************/
/********************************      WebKit/layout:UIPanel:START    ********************************/
.UIPanel {
  --background-color-panel: #fff;
  --border-radius-panel: 0px;
  --border-panel: 1px solid rgba(0,0,0,.125);
  --border-panel-bottom: var(--border-color-light);
  --box-shadow-panel: none;
  --font-size-panel-top-minor: var(--font-size-small);
  --font-size-panel-top-group: var(--font-size-small);
  --padding-panel: var(--padding-layout);
  --padding-panel-top: var(--padding-webkit);
  --padding-panel-bottom: var(--padding-webkit);
  --padding-panel-content: var(--padding-layout);
  --padding-panel-content-minor: var(--padding-webkit);
  --padding-panel-content-group: var(--padding-webkit);
  --height-panel-top: 38px;
  --height-panel-top-minor: 26px;
  --height-panel-top-group: 28px;
  --top-panel-bar: calc((var(--height-layout-title) - var(--height-widget)) /2);
  --right-panel-bar: 3px;
  --height-panel-bottom_box: 62px;
}

.UIPanel {
  border-radius: var(--border-radius-panel);
  -moz-border-radius: var(--border-radius-panel);
  -webkit-border-radius: var(--border-radius-panel);
  box-shadow: var(--box-shadow-panel);
  -webkit-box-shadow: var(--box-shadow-panel);
  -moz-box-shadow: var(--box-shadow-panel);
  background-color: var(--background-color-panel);
  border: var(--border-panel);
  position: relative;
  margin-bottom: var(--padding-panel);
}

.UIPanel > .top {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
  border-bottom: var(--border-panel);
  padding-left: var(--padding-panel-top);
  padding-right: var(--padding-panel-top);
  height: var(--height-panel-top);
}

.UIPanel > .top .UXXXIPanelBack {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  color: var(--font-color-title);
  font-size: var(--font-size-title);
  height: var(--height-layout-title);
  padding: 0 var(--padding-panel-back);
  position: absolute;
  left: 0px;
}

.UIPanel > .top .UIPanelBack:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f053";
}

.UIPanel > .UIPanelBottom {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  border-top: var(--border-panel-bottom);
  padding: var(--padding-panel-bottom) 0;
  overflow: hidden;
}

.UIPanel > .content {
  height: 100%;
  padding: var(--padding-panel-content);
}

/* screen 樣式:START */
.UIPanel.screen {
  /* 手機版:START */
  /* 手機版:START */
}
@media only screen and (max-width: 768px) {
  .UIPanel.screen {
    border: none;
  }
}

/* screen 樣式:END */
/* float 樣式:START */
.UIPanel.float {
  position: fixed;
  z-index: 999;
}

/* float 樣式:END */
/* minor 樣式:START */
.UIPanel.minor > .top {
  font-size: var(--font-size-top-caption-minor);
  height: var(--height-panel-top-minor);
}

.UIPanel.minor > .content {
  padding: var(--padding-panel-content-minor);
}

/* minor 樣式:END */
/* group 樣式:START */
.UIPanel.group {
  border: none;
}

.UIPanel.group > .top {
  border-bottom: none;
  font-size: var(--font-size-top-caption-group);
  height: var(--height-panel-top-group);
}

.UIPanel.group > .content {
  padding: var(--padding-panel-content-group);
}

/* group 樣式:END */
/* noBorder 樣式(之後取消用group取代):START */
.UIPanel.noBorder {
  background-color: var(--transparent);
  border: 0;
  margin-bottom: 0;
}

.UIPanel.noBorder > .top > .caption {
  border-bottom: 0;
  padding-left: 0;
}

.UIPanel.noBorder > .content {
  padding: 0px;
}

/* noBorder 樣式:END */
/* dialog 樣式:START */
.UIPanel.dialog > .content {
  overflow-y: hidden !important;
}

/* dialog 樣式:START */
/** 填滿高度:START **/
.UIPanel.fill {
  height: 100%;
}

/** 填滿高度:END **/
/* PanelBox 樣式定義Box彈出時撐滿整個畫面:START */
.UIPanel.PanelBox {
  min-height: 100%;
}

.UIPanel.PanelBox.bottom {
  height: 100%;
  margin-bottom: 0;
}

.UIPanel.PanelBox.bottom > .UIPanelBottom {
  height: var(--height-panel-bottom_box);
}

.UIPanel.PanelBox.caption > .content {
  height: calc(100% - var(--height-panel-top));
  overflow-x: hidden;
  overflow-y: auto;
}

.UIPanel.PanelBox.bottom > .content {
  height: calc(100% - var(--height-panel-bottom_box));
  overflow-y: auto;
}

.UIPanel.PanelBox.caption.bottom > .content {
  height: calc(100% - var(--height-panel-top) - var(--height-panel-bottom_box));
  overflow-y: auto;
}

/* PanelBox 樣式定義Box彈出時撐滿整個畫面:END */
/********************************      WebKit/layout:UIPanel:END    ********************************/
/********************************      WebKit/layout:UIPortlet:START    ********************************/
.UIPortlet {
  --background-color-portlet: #fff;
  --border-radius-portlet: 3px;
  --box-shadow-portlet: none;
  --border-color-portlet: 1px solid rgba(0,0,0,.125);
  --font-size-portlet-caption: var(--font-size-smaller);
  --padding-portlet: var(--padding-webkit);
  --padding-portlet-content: var(--padding-webkit);
  --height-portlet-top: 32px;
}

.UIPortlet.normal {
  border-radius: var(--border-radius-portlet);
  -moz-border-radius: var(--border-radius-portlet);
  -webkit-border-radius: var(--border-radius-portlet);
  box-shadow: var(--box-shadow-portlet);
  -webkit-box-shadow: var(--box-shadow-portlet);
  -moz-box-shadow: var(--box-shadow-portlet);
  background-color: var(--background-color-portlet);
  border: var(--border-color-portlet);
  position: relative;
  margin-bottom: var(--padding-portlet);
}

.UIPortlet.normal > .top {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  border-bottom: var(--border-color-portlet);
  height: var(--height-portlet-top);
}

.UIPortlet.normal > .top > .caption {
  font-size: var(--font-size-portlet-caption);
}

.UIPortlet.normal > .content {
  padding: var(--padding-portlet-content);
}

/********************************      WebKit/layout:UIPortlet:END    ********************************/
/********************************      WebKit/layout:UIRibbon:START (未整理)     ********************************/
.UIRibbon {
  --background-color-ribbon-wrapper: var(--color-main);
  --color-ribbon: #fff;
  --text-align-ribbon-wrapper: center;
}

.UIRibbon {
  color: var(--color-ribbon);
  position: absolute;
  z-index: 99;
}

.UIRibbon > .wrapper {
  background-color: var(--background-color-ribbon-wrapper);
  position: relative;
  text-align: var(--text-align-ribbon-wrapper);
}

/* top */
.UIRibbon.ribbon-top {
  position: absolute;
  top: 0;
  left: 0;
  text-align: var(--text-align-ribbon-wrapper);
  width: 100%;
}

.UIRibbon.ribbon-top > .wrapper {
  border-radius: 0 0 5px 5px;
  border-width: 0 1px 1px 1px;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  display: inline-block;
  margin: -1px auto 0;
  padding: 6px 24px;
}

/* bottom */
.UIRibbon.ribbon-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 100%;
}

.UIRibbon.ribbon-bottom > .wrapper {
  border-radius: 5px 5px 0 0;
  border-width: 0 1px 1px 1px;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  display: inline-block;
  margin: -1px auto 0;
  padding: 6px 24px;
}

/* left */
.UIRibbon.ribbon-left {
  width: 85px;
  height: 88px;
  top: -1px;
  left: -1px;
  overflow: hidden;
}

.UIRibbon.ribbon-left > .wrapper {
  padding: 6px 0;
  right: 30px;
  top: 15px;
  width: 120px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

/* right */
.UIRibbon.ribbon-right {
  width: 85px;
  height: 88px;
  top: -1px;
  right: -1px;
  overflow: hidden;
}

.UIRibbon.ribbon-right > .wrapper {
  padding: 6px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.UIRibbon.bookmark-left,
.UIRibbon.bookmark-right {
  background: #08c;
}

.UIRibbon.bookmark-left {
  top: 2px;
  left: 18px;
  width: 50px;
  height: 75px;
}

.UIRibbon.bookmark-right {
  top: 2px;
  right: 18px;
  width: 50px;
  height: 75px;
}

.UIRibbon.bookmark-left:after, .UIRibbon.bookmark-left:before,
.UIRibbon.bookmark-right:after, .UIRibbon.bookmark-right:before {
  border-top: 15px solid #08c;
  bottom: -15px;
  content: "";
  width: 0;
  height: 0;
  position: absolute;
}

.UIRibbon.bookmark-left:after,
.UIRibbon.bookmark-right:after {
  border-right: 25px solid transparent;
  left: 0;
}

.UIRibbon.bookmark-left:before,
.UIRibbon.bookmark-right:before {
  border-left: 25px solid transparent;
  right: 0;
}

.UIRibbon.bookmark-left .wrapper,
.UIRibbon.bookmark-right .wrapper {
  color: #f6f6f6;
  position: relative;
  padding: 12px 3px;
  text-align: center;
}

.UIRibbon.bookmark-left .wrapper:after,
.UIRibbon.bookmark-right .wrapper:after {
  content: "";
  height: 25px;
  left: -20px;
  position: absolute;
  top: -25px;
  width: 90px;
  box-shadow: 0 10px 10px -10px hsla(0, 0%, 0%, 0.5);
}

/********************************      WebKit/layout:UIRibbon (未整理):END     ********************************/
/********************************      WebKit/layout:UIScrollGroup:START    ********************************/
/** 填滿高度:START **/
.UIScrollGroup.fill {
  height: 100%;
}

/** 填滿高度:END **/
/********************************      WebKit/layout:UIScrollGroup:END    ********************************/
/********************************      WebKit/layout:UIShap:START   ********************************/
.UIShape.breadCrumb {
  --font-color-shape-bread-crumb-item: #666;
  --font-size-shape-bread-crumb: var(--font-size-small);
  --padding-shape-bread-crumb-item: 3px;
  --code-font-awesome-shape-bread-crumb: "";
  --code-font-awesome-shape-bread-crumb-item: "";
}

.UIShape.hint {
  --color-shape-hint: var(--color-red);
}

.UIShape.tag {
  --background-color-shape-tag: var(--color-main);
  --background-color-shape-tag_tag: var(--color-main);
  --background-color-shape-tag_untag: #a5a1a1;
  --color-shape-tag: var(--font-color-white);
  --padding-shape-tag: calc(var(--padding-webkit) / 2) var(--padding-webkit);
  --margin-shape-tag: calc(var(--margin-webkit) / 4);
}

.UIShape.category {
  --background-color-shape-category: var(--color-secondary);
  --color-shape-category: var(--font-color-white);
  --font-size-sharp-category: 0.9rem;
  --padding-shape-category: calc(var(--padding-webkit) / 4) calc(var(--padding-webkit) / 3);
  --margin-shape-category: calc(var(--margin-webkit) / 4);
}

/** default:START **/
.UIShape.default {
  display: inline-block;
}

/** default:END **/
/** calendar:START **/
.UIShape.calendar {
  display: inline-block;
}

.UIShape.calendar:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\e0d5";
}

/** calendar:END **/
/** clock:START **/
.UIShape.clock {
  display: inline-block;
}

.UIShape.clock:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f017";
}

/** clock:END **/
/** breadCrumb:START **/
.UIShape.breadCrumb {
  font-size: var(--font-size-shape-bread-crumb);
}

.UIShape.breadCrumb > .UILink:first-child:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-shape-bread-crumb);
}

.UIShape.breadCrumb > .UILabel,
.UIShape.breadCrumb > .UILink {
  color: var(--font-color-shape-bread-crumb-item);
  display: inline-block;
}

.UIShape.breadCrumb > .UILabel:after,
.UIShape.breadCrumb > .UILink:after {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  padding-left: var(--padding-shape-bread-crumb-item);
  content: var(--code-font-awesome-shape-bread-crumb-item);
}

.UIShape.breadCrumb > .UILabel:last-child:after,
.UIShape.breadCrumb > .UILink:last-child:after {
  content: "";
}

/** breadCrumb:END **/
/** folder:START **/
.UIShape.folder {
  display: inline-block;
}

.UIShape.folder:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f07c";
}

/** folder:END **/
/** delete:START **/
.UIShape.deleted {
  display: inline-block;
}

.UIShape.deleted:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f056";
}

/** delete:END **/
/** enabled:START **/
.UIShape.enabled {
  display: inline-block;
}

.UIShape.enabled:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f058";
}

/** enabled:END **/
/** hint:START **/
.UIShape.hint {
  display: inline-block;
}

.UIShape.hint:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  color: var(--color-shape-hint);
  content: "\e02b";
}

/** hint:END **/
/** lost:START **/
.UIShape.lost:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f057";
}

/** lost:END **/
/** set:START **/
.UIShape.set {
  display: inline-block;
}

.UIShape.set:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f013";
}

/** set:END **/
/** switch:START **/
.UIShape.switch {
  display: inline-block;
}

.UIShape.switch:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\e0a2";
}

/** switch:END **/
/** tag:START **/
.UIShape.tag {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
  border-radius: 24px;
  -moz-border-radius: 24px;
  -webkit-border-radius: 24px;
  background-color: var(--background-color-shape-tag);
  color: var(--color-shape-tag);
  padding: var(--padding-shape-tag);
  margin: var(--margin-shape-tag);
}

.UIShape.tag > *:first-child:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f02b";
}

.UIShape.tag[data-state=untag] {
  background-color: var(--background-color-shape-tag_untag);
}

.UIShape.tag .UILink, .UIShape.tag .UILinkButton {
  color: var(--color-shape-tag);
}

/** tag:END **/
/** win:START **/
.UIShape.win {
  display: inline-block;
}

.UIShape.win:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f058";
}

/** win:END **/
/** category:START **/
.UIShape.category {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: var(--background-color-shape-category);
  color: var(--color-shape-category);
  padding: var(--padding-shape-category);
  margin: var(--margin-shape-category);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.UIShape.category:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\e1d2";
}

.UIShape.category .UILink, .UIShape.category .UILinkButton {
  color: var(--color-shape-category);
  font-size: var(--font-size-sharp-category);
}

/** category:END **/
/** plus:START **/
.UIShape.plus {
  display: inline-block;
}

.UIShape.plus:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f300";
}

/** plus:END **/
/** error:START **/
.UIShape.error {
  display: inline-block;
}

.UIShape.plus:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f071";
}

/** error:END **/
/** arrowTopDown:START **/
.UIShape.arrowTopDown {
  display: inline-block;
}

.UIShape.arrowTopDown:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f07e";
}

/** arrowTopDown:END **/
/** arrowTopDown:START **/
.UIShape.arrowLeftRight {
  display: inline-block;
}

.UIShape.arrowLeftRight:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f07d";
}

/** arrowTopDown:END **/
/** arrowTo:START **/
.UIShape.arrowTo {
  display: inline-block;
}

.UIShape.arrowTo:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f047";
}

/** arrowTo:END **/
/** receipt:START **/
.UIShape.receipt {
  display: inline-block;
}

.UIShape.receipt:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f543";
}

/** receipt:END **/
/** trashCan:START **/
.UIShape.trashCan {
  display: inline-block;
}

.UIShape.trashCan:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f2ed";
}

/** trashCan:END **/
/********************************      WebKit/layout:UIShap:END   ********************************/
/********************************      WebKit/layout:UISlider:START  (未整理)    ********************************/
.UISlider {
  --background-color-slider-nav: #fff;
  --background-color-slider-pager: #d6d6d6;
  --background-color-slider-pager_hover: #869791;
}

/* owl-nav: START */
.UISlider .owl-carousel .owl-nav [class*=owl-prev] {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  opacity: 0.2;
  -moz-opacity: 0.2;
  -khtml-opacity: 0.2;
  filter: alpha(opacity=0.2);
  background-color: var(--background-color-slider-nav);
  font-size: 0;
  padding: 10px;
  position: absolute;
  top: 35%;
  left: 15px;
}

.UISlider .owl-carousel .owl-nav [class*=owl-prev]:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f104";
  color: #bababa;
  font-size: 24px;
  padding: 12px;
}

.UISlider .owl-carousel .owl-nav [class*=owl-next] {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  opacity: 0.2;
  -moz-opacity: 0.2;
  -khtml-opacity: 0.2;
  filter: alpha(opacity=0.2);
  background-color: var(--background-color-slider-nav);
  font-size: 0;
  padding: 10px;
  position: absolute;
  top: 35%;
  right: 15px;
}

.UISlider .owl-carousel .owl-nav [class*=owl-next]:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f105";
  color: #bababa;
  font-size: 24px;
  padding: 12px;
}

.UISlider .owl-carousel .owl-nav [class*=owl-prev]:hover,
.UISlider .owl-carousel .owl-nav [class*=owl-next]:hover {
  opacity: 0.5;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  filter: alpha(opacity=0.5);
  background-color: var(--background-color-slider-nav);
}

/* owl-nav: END */
/* owl-dots: START */
.UISlider .owl-carousel .owl-dots {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 1%;
  right: 1%;
}

.UISlider .owl-carousel .owl-dots .owl-dot {
  display: inline-block;
  zoom: 1;
}

.UISlider .owl-carousel .owl-dots .owl-dot span {
  border-radius: 30px;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  background: var(--background-color-slider-pager);
  display: block;
  width: 10px;
  height: 10px;
  margin: 5px 7px;
  transition: opacity 200ms ease;
  -webkit-backface-visibility: visible;
}

.UISlider .owl-carousel .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: var(--background-color-slider-pager_hover);
}

/* owl-dots: END */
.UISliderThumbnail > .owl-thumb-item {
  display: inline-block;
  cursor: pointer;
}

@media (max-width: 768px) {
  .UISlider .owl-carousel .owl-dots .owl-dot span {
    width: 6px;
    height: 6px;
  }
}
/********************************      WebKit/layout:UISlider:END  (未整理)    ********************************/
/********************************      WebKit/layout:UITabHost:START      ********************************/
.UITabHost {
  --background-color-tab-host-tabs: #fff;
  --border-tab-host-tabs: var(--border-color-light);
  --border-tab-host-tabs_active: 3px solid var(--color-main);
  --font-color-tab-host-tabs: var(--font-color_disabled);
  --font-color-tab-host-tabs_active: var(--font-color-title);
  --font-size-tab-host-tabs-icon: var(--font-size-icon-base);
  --height-tab-host-tabs_full: 32px;
  --padding-tab-host-tabs: 6px 24px 3px 24px;
  --padding-tab-host-tabs_left: 6px 8px;
  --padding-tab-host-tabs_left_gutter: 2px;
  --padding-tab-host-tabs-icon: var(--padding-gutter);
  --padding-tab-host-content: var(--padding-layout);
}
@media only screen and (max-width: 768px) {
  .UITabHost {
    --padding-tab-host-tabs: 6px 9px 2px 9px;
    --padding-tab-host-tabs_left: 6px 4px 6px 0;
  }
}

.UITabHost > ul.tabs > li.hide {
  display: none;
}

.UITabHost > ul.tabs > li > a {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  background-color: var(--background-color-tab-host-tabs);
  color: var(--font-color-tab-host-tabs);
  height: initial;
}

.UITabHost > .tabs > li.active > a {
  color: var(--font-color-tab-host-tabs_active);
}

.UITabHost > ul.tabs > li > a > i {
  font-size: var(--font-size-tab-host-tabs-icon);
  padding-right: var(--padding-tab-host-tabs-icon);
  text-align: center;
}

/* mode=default */
.UITabHost.default > ul.tabs {
  border-bottom: var(--border-tab-host-tabs);
  white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
}

.UITabHost.default > ul.tabs:after {
  clear: both;
  display: table;
  content: "";
}

.UITabHost.default > ul.tabs > li {
  border-top-left-radius: 3px;
  -webkit-border-top-left-radius: 3px;
  -moz-border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-top-right-radius: 3px;
  border: var(--border-tab-host-tabs);
  border-bottom: 0;
  display: inline-block;
  margin-bottom: -1px;
}

.UITabHost.default > ul.tabs > li.active {
  border-top: var(--border-tab-host-tabs_active);
}

.UITabHost.default > ul.tabs > li > a {
  padding: var(--padding-tab-host-tabs);
}

.UITabHost.default > .tabContent {
  min-height: 60px;
}

.UITabHost.default > .tabContent > .UITab {
  padding-top: var(--padding-tab-host-content);
}

.UITabHost.default.noPadding > .tabContent > .UITab {
  padding-top: 0;
}

.UITabHost.default.adaptive > ul.tabs {
  display: table;
  width: 100%;
}

.UITabHost.default.adaptive > ul.tabs > li {
  display: table-cell;
}

.UITabHost.default.adaptive > ul.tabs > li > a {
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
}

/* mode=left */
.UITabHost.tabLeft > ul.tabs {
  border-right: var(--border-tab-host-tabs);
  float: left;
}

.UITabHost.tabLeft > ul.tabs > li {
  margin-bottom: var(--padding-tab-host-tabs_left_gutter);
}

.UITabHost.tabLeft > ul.tabs > li.active {
  border-left: var(--border-tab-host-tabs_active);
}

.UITabHost.tabLeft > ul.tabs > li > a {
  padding: var(--padding-tab-host-tabs_left);
}

.UITabHost.tabLeft > .tabContent {
  overflow: hidden;
}

.UITabHost.tabLeft > .tabContent > .UITab {
  padding: 0 var(--padding-tab-host-content);
}

/* 設定滿版:START */
.UITabHost.default.fill {
  height: 100%;
}

.UITabHost.default.fill > ul.tabs {
  height: var(--height-tab-host-tabs_full);
}

.UITabHost.default.fill > .tabContent {
  height: calc(100% - var(--height-tab-host-tabs_full));
}

.UITabHost.default.fill > .tabContent.noTabs {
  height: 100%;
}

.UITabHost.default.fill > .tabContent > .UITab {
  height: 100%;
}

/* 設定滿版:END */
/********************************      WebKit/layout:UITabHost:END      ********************************/
/********************************      WebKit/layout:UITabBar:START (未整理)   ********************************/
.UITabBar.default {
  --background-color-tab-bar-tabs: #fff;
  --border-tab-bar-tabs: var(--border-color-dark);
  --font-color-tab-bar-tabs: var(--font-color);
  --font-color-tab-bar-tabs_disabled: var(--font-color_disabled);
  --font-size-tab-bar-tabs-icon: 18px;
}

/* default: START */
.UITabBar.default {
  display: none;
}

.UITabBar.default .UITabBarMask {
  height: 56px;
}

.UITabBar.default .tabs {
  background-color: var(--background-color-tab-bar-tabs);
  border-top: var(--border-tab-bar-tabs);
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
}

.UITabBar.default .tabs li {
  display: table;
  float: left;
  width: 100%;
}

.UITabBar.default .tabs li > a {
  color: var(--font-color-tab-bar-tabs_disabled);
}

.UITabBar.default .tabs li.active > a {
  color: var(--font-color-tab-bar-tabs);
}

.UITabBar.default .tabs i {
  display: block;
  font-size: var(--font-size-tab-bar-tabs-icon);
  padding: 6px 0 0 0;
  text-align: center;
}

.UITabBar.default .tabs span {
  display: block;
  font-size: 0.8em;
  text-align: center;
  padding: 3px 0 3px 0;
}

/* default: END */
/* right/left: START */
.UITabBar.right {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
}

.UITabBar.left {
  position: fixed;
  left: 18px;
  bottom: 36px;
  z-index: 9999;
}

.UITabBar.right.circle .tabs a,
.UITabBar.left.circle .tabs a {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  background-color: #fff;
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
}

.UITabBar.right .tabs i,
.UITabBar.left .tabs i {
  display: block;
  font-size: 22px;
}

.UITabBar.right .tabs span,
.UITabBar.left .tabs span {
  display: block;
}

/* right/left: END */
/* none: START */
.UITabBar.none > ul.tabs {
  /*border-bottom: var(--border-tab-host-tabs);*/
  border-bottom: var(--border-color-light);
  white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
}

.UITabBar.none > ul.tabs > li {
  border-top-left-radius: 3px;
  -webkit-border-top-left-radius: 3px;
  -moz-border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-top-right-radius: 3px;
  /* border: var(--border-tab-host-tabs); */
  border: var(--border-color-light);
  border-bottom: 0;
  display: inline-block;
  margin-bottom: -1px;
}

.UITabBar.none > ul.tabs > li > a {
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  /* background-color: var(--background-color-tab-host-tabs); */
  /* color: var(--font-color-tab-host-tabs); */
  height: initial;
  /* padding: var(--padding-tab-host-tabs); */
  padding: 6px 24px 3px 24px;
}

.UITabBar.none > ul.tabs > li.active {
  border-top: 3px solid var(--color-main);
  /* border-top: var(--border-tab-host-tabs_active); */
}

/* none: END */
@media (max-width: 768px) {
  .UITabBar.default {
    display: initial;
  }
}
/********************************      WebKit/layout:UITabBar:END (未整理)   ********************************/
/********************************      WebKit/layout:UIVerticalAccordion:START  (未整理) ********************************/
.UIVerticalAccordion {
  display: block;
  margin-bottom: 12px;
}

.UIVerticalAccordion > .UIAccordionItem {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  overflow: hidden;
}

.UIVerticalAccordion > .UIAccordionItem + .UIAccordionItem {
  margin-top: 3px;
}

.UIVerticalAccordion > .UIAccordionItem > .header {
  background-color: #fefeff;
  padding: 0 6px 0 12px;
  height: 42px;
}

.UIVerticalAccordion > .UIAccordionItem > .header > .UILabel {
  font-size: 1.1em;
  line-height: 42px;
}

.UIVerticalAccordion > .UIAccordionItem > .header > .UIAccordionItemBar {
  float: right;
  padding: 3px 0;
}

.UIVerticalAccordion > .UIAccordionItem > .header > .UIAccordionItemBar .UILabel,
.UIVerticalAccordion > .UIAccordionItem > .header > .UIAccordionItemBar .UILinkButton {
  line-height: 32px;
}

.UIVerticalAccordion > .UIAccordionItem > .content {
  background-color: #fff;
  border-top: 1px solid #e7ecee;
  padding: 12px 24px;
  visibility: visible;
  /* overflow: auto; */
}

/********************************      WebKit/layout:UIVerticalAccordion:END  (未整理) ********************************/
/********************************      WebKit/layout:UIVerticalLayout:START      ********************************/
.UIVerticalLayout {
  display: table;
  width: 100%;
}

.UIVerticalLayout > .tr {
  display: table-row;
}

.UIVerticalLayout > .tr > .td {
  display: table-cell;
}

/********************************      WebKit/layout:UIVerticalLayout:END      ********************************/
/********************************      WebKit/layout:UIVerticalWizard:START   (未整理)   ********************************/
.UIVerticalWizard {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  margin-bottom: 15px;
}

.UIVerticalWizard .items {
  padding: 0;
  float: left;
}

.UIVerticalWizard .items ul {
  padding: 0;
  margin: 0;
  list-style: none outside none;
}

.UIVerticalWizard .items ul li {
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  margin: 0;
  color: #5b5b5b;
  height: 40px;
  line-height: 40px;
  float: none;
  padding: 0 15px 0 15px;
}

.UIVerticalWizard .items ul li:first-child {
  padding-left: 15px;
  border-radius: 4px 0 0 0;
}

.UIVerticalWizard .items ul li:before,
.UIVerticalWizard .items ul li:after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: -10px;
  border: 20px solid transparent;
  border-right: 0;
  border-left: 10px solid #e5e5e5;
  z-index: 1;
}

.UIVerticalWizard .items ul li:after {
  right: -9px;
  border-left-color: #e5e5e5;
  z-index: 2;
}

.UIVerticalWizard .items ul li.complete,
.UIVerticalWizard .items ul li.complete:hover {
  background: #f2f2f2;
}

.UIVerticalWizard .items ul li.complete:after {
  border-left-color: #f2f2f2;
}

.UIVerticalWizard .items ul li.active {
  color: #08c;
  background: #fff;
}

.UIVerticalWizard .items ul li.active:after {
  border-left-color: #fff;
}

.UIVerticalWizard .items .badge {
  background: #f2f2f2;
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 0.9em;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  margin-right: 4px;
  border-radius: 10px;
}

.UIVerticalWizard .items .badgeInfo {
  background-color: #5191d1;
}

.UIVerticalWizard .items .badgeSuccess {
  background-color: #3fcf7f;
}

.UIVerticalWizard .content {
  zoom: 1;
  overflow: hidden;
  padding: 12px 24px;
}

.UIVerticalWizard .actions {
  margin: 6px 3px;
  text-align: right;
}

/********************************      WebKit/layout:UIVerticalWizard:END   (未整理)   ********************************/
/********************************      WebKit/navigation:UIHorizontalNavigation:START   ********************************/
.UIHorizontalNavigation {
  --background-color-horizontal-navigation-menu: #fff;
  --background-color-horizontal-navigation-mobilemenu: #fcfcfc;
  --border-horizontal-navigation-mobilemenu: var(--border-color-light);
  --font-color-navigation-navigation-menu: var(--font-color);
  --font-color-navigation-navigation-menu_hover: var(--font-color-link);
  --font-size-navigation-navigation-menu: 16px;
  --font-size-navigation-navigation-menu-title: var(--font-size-large);
}

.UIHorizontalNavigation {
  position: relative;
}

.UIHorizontalNavigation > .menuControl { /* 圖層遮照 */
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
}

/* 手機版本彈出選單:START */
.UIHorizontalNavigation > .menu > .mobilemenu {
  background: var(--background-color-horizontal-navigation-mobilemenu);
  border-bottom: var(--border-horizontal-navigation-mobilemenu);
  display: none;
  height: 48px;
  position: relative;
  padding: 0 calc(var(--padding-webkit) * 2);
  z-index: 99;
}

.UIHorizontalNavigation > .menu > .mobilemenu .closemenu {
  color: var(--font-color-navigation-navigation-menu);
  font-size: var(--font-size-navigation-navigation-menu);
  line-height: 48px;
}

.UIHorizontalNavigation > .menu > .mobilemenu .title {
  display: inline-block;
  font-size: var(--font-size-navigation-navigation-menu-title);
  line-height: 48px;
  padding: 0 calc(var(--padding-webkit) * 1.5);
}

/* 手機版本彈出選單:END */
.UIHorizontalNavigation > .menu > ul a {
  color: var(--font-color-navigation-navigation-menu);
}

.UIHorizontalNavigation > .menu > ul a:hover {
  color: var(--font-color-navigation-navigation-menu_hover);
}

.UIHorizontalNavigation > .menu > ul > li.caption {
  display: none;
  background-color: #f5f5f5;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: calc(var(--padding-webkit) / 3) calc(var(--padding-webkit) * 2.4);
}

/* 大畫面時套用 */
@media (min-width: 768px) {
  .UIHorizontalNavigation > .menu > ul a {
    display: inline-block;
    padding: calc(var(--padding-webkit) * 1.5) var(--padding-webkit);
  }
  .UIHorizontalNavigation > .menu > ul ul a {
    padding: var(--padding-webkit);
  }
  .UIHorizontalNavigation > .menu > ul li.submenu > .open {
    display: none;
  }
  /* Level 1:START */
  .UIHorizontalNavigation > .menu > ul,
  .UIHorizontalNavigation > .menu > ul > li {
    display: inline-block;
  }
  /* Level 1:END */
  /* Level 2:START */
  .UIHorizontalNavigation > .menu .level1 > ul {
    background-color: var(--background-color-horizontal-navigation-menu);
    border: var(--border-horizontal-navigation-mobilemenu);
    display: none;
    width: intrinsic;
    white-space: nowrap;
    position: absolute;
    top: 100%;
    z-index: 99;
  }
  .UIHorizontalNavigation > .menu li.level2 {
    display: block;
    vertical-align: top;
    min-width: 160px;
  }
  .UIHorizontalNavigation > .menu li.level2.submenu {
    display: inline-block;
  }
  .UIHorizontalNavigation > .menu li.level2 > a {
    display: block;
    border-bottom: var(--border-horizontal-navigation-mobilemenu);
  }
  /* Level 2:END */
  /* Level 3:START */
  .UIHorizontalNavigation > .menu li.level3 {
    display: block;
  }
  /* Level 3:END */
}
/* 手機畫面時套用 */
@media (max-width: 768px) {
  .UIHorizontalNavigation > .menu > .mobilemenu {
    display: block;
  }
  .UIHorizontalNavigation > .menu > ul a {
    display: block;
    padding: var(--padding-webkit);
  }
  .UIHorizontalNavigation > .menu > ul li.submenu {
    position: relative;
  }
  .UIHorizontalNavigation > .menu > ul li.submenu > a:first-child {
    border-bottom: var(--border-horizontal-navigation-mobilemenu);
  }
  .UIHorizontalNavigation > .menu > ul li.submenu > .open {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9999;
    padding: var(--padding-webkit);
    padding-left: calc(var(--padding-webkit) * 1.5);
  }
  .UIHorizontalNavigation > .menu > ul > li.submenu .open:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-style: normal;
    content: "\f105";
  }
  /* Level 1:START */
  .UIHorizontalNavigation > .menu > ul > li.caption {
    display: block;
  }
  /* Level 1:END */
  /* Level 2:START */
  .UIHorizontalNavigation > .menu > ul ul {
    display: none;
  }
  .UIHorizontalNavigation > .menu > ul li.level2 > a {
    padding-left: var(--padding-layout);
  }
  .UIHorizontalNavigation > .menu > ul li.level2:last-child > a {
    border-bottom: none;
  }
  /* Level 2:END */
  /* Level 3:START */
  .UIHorizontalNavigation > .menu > ul li.level3 > a {
    padding-left: calc(var(--padding-layout) * 2);
  }
  /* Level 3:END */
  /* Level 4:START */
  .UIHorizontalNavigation > .menu > ul li.level4 > a {
    padding-left: calc(var(--padding-layout) * 3);
  }
  /* Level 4:END */
}
/********************************      WebKit/navigation:UIHorizontalNavigation:END   ********************************/
/********************************      WebKit/navigation:UINavBar:START      ********************************/
.UINavBar {
  --background-color-nav-bar: transparent;
  --font-color-nav-bar-home: var(--font-color-link);
  --font-size-nav-bar: var(--font-size-small);
  --font-size-nav-bar-home: var(--font-size-base);
  --code-font-awesome-nav-bar-home: "";
  --code-font-awesome-nav-bar-li: "";
}

.UINavBar {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
  background-color: var(--background-color-nav-bar);
  font-size: var(--font-size-nav-bar);
  border-radius: 0;
}

.UINavBar .home {
  display: inline-block;
  padding: 0px 3px;
}

.UINavBar .home:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  font-size: var(---font-size-nav-bar-home);
  content: var(--code-font-awesome-nav-bar-home);
}

.UINavBar .home > a {
  color: var(--font-color-nav-bar-home);
}

.UINavBar ul {
  display: inline-block;
}

.UINavBar ul > li {
  display: inline-block;
  padding: 0px 3px;
}

.UINavBar ul li:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-nav-bar-li);
}

/********************************      WebKit/navigation:UINavBar:END      ********************************/
/********************************      WebKit/navigation:UINavToggle:START    ********************************/
.UINavToggle {
  --font-color-nav-toggle: #000;
  --font-color-nav-toggle_hover: #f2f5f8;
}

.UINavToggle {
  color: var(--font-color-nav-toggle);
  font-size: 24px;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  display: none;
}

.UINavToggle:hover {
  color: var(--font-color-nav-toggle_hover);
}

@media only screen and (max-width: 768px) {
  .UINavToggle {
    display: inline-block;
  }
  .navigation-wrapper {
    background: #fff;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    display: none;
    width: 80%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    overflow-y: auto;
  }
}
/********************************      WebKit/navigation:UINavToggle:END    ********************************/
/********************************      WebKit/navigation:UIVerticalNavigation:START    ********************************/
.UIVerticalNavigation {
  --background-color-vertical-navigation-nav-mobilemenu: #fcfcfc;
  --border-vertical-navigation-nav-mobilemenu: var(--border-color-light);
  --padding-vertical-navigation-nav-mobilemenu: 0 var(--padding-layout);
  --font-color-vertical-navigation-nav-menu: #000;
  --font-color-vertical-navigation-nav-icon: var(--color-secondary);
  --font-size-vertical-navigation-nav-menu: 16px;
  --line-height-size-vertical-navigation-nav-menu: 48px;
}

.UIVerticalNavigation > .menuControl { /* 圖層遮照 */
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -9;
}

/* 手機版本彈出選單:START */
.UIVerticalNavigation > .menu > .mobilemenu {
  background: var(--background-color-vertical-navigation-nav-mobilemenu);
  border-bottom: var(--border-vertical-navigation-nav-mobilemenu);
  display: none;
  height: 48px;
  position: relative;
  padding: var(--padding-vertical-navigation-nav-mobilemenu);
  z-index: 99;
}

.UIVerticalNavigation > .menu > .mobilemenu .closemenu {
  color: var(--font-color-vertical-navigation-nav-menu);
  font-size: var(--font-size-vertical-navigation-nav-menu);
  line-height: var(--line-height-size-vertical-navigation-nav-menu);
}

.UIVerticalNavigation > .menu > .mobilemenu .title {
  color: var(--font-color-vertical-navigation-nav-menu);
  display: inline-block;
  font-size: var(--font-size-vertical-navigation-nav-menu);
  line-height: var(--line-height-size-vertical-navigation-nav-menu);
  padding: var(--padding-vertical-navigation-nav-mobilemenu);
}

/* 手機版本彈出選單:END */
.UIVerticalNavigation > .menu ul li.caption {
  display: none;
  background-color: #f5f5f5;
  border-top: var(--border-vertical-navigation-nav-mobilemenu);
  padding: 4px 24px;
}

.UIVerticalNavigation > .menu ul a {
  display: block;
  padding: 12px 12px;
}

.UIVerticalNavigation > .menu ul a:hover {
  color: initial;
  background: rgba(0, 0, 0, 0.7);
}

.UIVerticalNavigation > .menu ul a > i {
  color: var(--font-color-vertical-navigation-nav-icon);
  margin-right: 6px;
}

.UIVerticalNavigation > .menu ul li {
  position: relative;
}

.UIVerticalNavigation > .menu ul li.active > a {
  font-weight: 800;
}

/* 大畫面時套用 */
@media (min-width: 768px) {
  /* 設定.active樣式*/
  /* Level 1:START */
  /* Level 1:END */
  /* Level 2:START */
  .UIVerticalNavigation > .menu li.level2 > a {
    padding-left: 36px;
  }
  /* Level 2:END */
  /* Level 3:START */
  .UIVerticalNavigation > .menu li.level3 > a {
    padding-left: 48px;
  }
  /* Level 3:START */
}
/* 手機畫面 */
@media (max-width: 768px) {
  .UIVerticalNavigation > .menu > .mobilemenu {
    display: block;
  }
  .UIVerticalNavigation > .menu ul li.caption {
    display: black;
  }
  .UIVerticalNavigation > .menu > ul > li > a:hover,
  .UIVerticalNavigation > .menu > ul li.active > a {
    background: rgba(0, 0, 0, 0.1);
  }
  /* 設定.active樣式*/
  /* Level 1:START */
  /* Level 1:END */
  /* Level 2:START */
  .UIVerticalNavigation > .menu .level2 > a {
    padding-left: 36px;
  }
  /* Level 2:END */
  /* Level 3:START */
  .UIVerticalNavigation > .menu .level3 > a {
    padding-left: 48px;
  }
  /* Level 3:START */
}
/********************************      WebKit/navigation:UIVerticalNavigation:START    ********************************/
/********************************      WebKit/net:Box(GLightbox):START   ********************************/
#glightbox-body {
  --background-box-overlay-opacity: 0.6;
  --padding-box-content_box: 24px;
  --border-radius-box: 6px;
}

#glightbox-body.glightbox-container {
  z-index: 9999 !important; /* 修正z-index過大 */
}

/* 取消彈出視窗文字不能複製問題 */
#glightbox-body.glightbox-container .gslide {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

/** 講relative設定到外層, 避免關閉按鈕跑位置 */
#glightbox-body .gslide-inline {
  position: relative;
}

/* 設定背景透明度 */
#glightbox-body > .goverlay {
  opacity: var(--background-box-overlay-opacity) !important;
}

/* 取消切換按鈕 */
#glightbox-body .glightbox-button-hidden {
  display: none;
}

/* 取消彈出視窗預設padding */
#glightbox-body .ginlined-content {
  padding: 0;
}

#glightbox-body .ginlined-content .BoxContent {
  height: 100%;
  overflow-y: auto;
}

/* 彈出視窗有.box時增加pedding */
#glightbox-body .ginlined-content .BoxContent.box {
  padding: var(--padding-box-content_box);
}

#glightbox-body .gslide-inline, #glightbox-body .ginlined-content, #glightbox-body .BoxContent {
  border-radius: var(--border-radius-box);
  -moz-border-radius: var(--border-radius-box);
  -webkit-border-radius: var(--border-radius-box);
  /*overflow: hidden;*/
}

/* 關閉按鈕樣式 */
#glightbox-body #glightbox-close {
  background: url(https://gdn.beezsys.com/global/support/glightbox/images/glightbox-close.png) no-repeat top center;
  background-size: 35px 33px;
  -moz-background-size: 35px 33px;
  -webkit-background-size: 35px 33px;
  -o-background-size: 35px 33px;
  cursor: pointer;
  display: block;
  width: 36px;
  height: 36px;
  text-indent: -9999px;
  z-index: 9999;
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  position: absolute;
  top: -1px;
  right: -1px;
}

/* 修正彈出時, 原畫面顯示不正常 */
.glightbox-open {
  height: 100% !important;
}

/* 修正手機版畫面:START */
@media only screen and (max-width: 768px) {
  #glightbox-body .gslide-inline {
    width: 90% !important;
    height: 80% !important;
  }
}
/* 修正手機版畫面:END */
/********************************      WebKit/net:Box(GLightbox):END   ********************************/
/********************************      WebKit/net:Box(colorbox):START   ********************************/
.Box {
  --background-color-box: #fff;
  --height-box-caption: 36px;
}

/* 蓋住底的遮罩 */
#cboxOverlay.Box {
  background: #000;
  opacity: 0.9;
}

#colorbox.Box #cboxContent, #colorbox.Box #cboxContent #cboxLoadedContent {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}

#colorbox.Box #cboxContent {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  background: var(--background-color-box);
  margin-top: 20px;
  margin-right: 20px;
}

#colorbox.Box #cboxContent #cboxLoadedContent {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}

/* 關閉按鈕 */
#colorbox.Box #cboxClose {
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  position: absolute;
  top: -16px;
  right: -16px;
  display: block;
  width: 36px;
  height: 36px;
  text-indent: -9999px;
  z-index: 9999;
  background: url(https://gdn.beezsys.com/global/support/colorbox/images/close.png) no-repeat top center;
  background-size: 35px 33px;
  -moz-background-size: 35px 33px;
  -webkit-background-size: 35px 33px;
  -o-background-size: 35px 33px;
}

/* 標題 */
#colorbox.Box .BoxCaption {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #2b2b2b;
  font-size: var(--font-size-large);
  line-height: var(--height-box-caption);
  text-align: center;
  height: var(--height-box-caption);
}

/* 內容 */
#colorbox.Box .BoxContent.simple {
  min-height: 100%;
  height: 100%;
}

#colorbox.Box .BoxContent.complex {
  height: calc(100% - var(--height-box-caption));
}

#colorbox.Box .BoxContent.box {
  padding: 12px;
}

@media (max-width: 768px) {
  #colorbox.Box {
    width: 100% !important;
    left: 3% !important;
  }
  #colorbox.Box #cboxContent {
    width: 94% !important;
  }
  #colorbox.Box #cboxWrapper,
  #colorbox.Box #cboxContent #cboxLoadedContent {
    width: 100% !important;
  }
}
/********************************      WebKit/net:Box:END   ********************************/
/********************************      WebKit/widget:UIBirthday:START     ********************************/
.UIBirthdayWrapper {
  --border-birthday: var(--border-color-widget);
  --border-birthday-age: var(--border-color-light);
  --border-radius-birthday: var(--border-radius-widget);
  --padding-birthday-select: 0 var(--padding-webkit) 0 var(--padding-webkit);
  --padding-birthday-age: 0 var(--padding-webkit) 0 var(--padding-webkit);
  --height-birthday: var(--height-widget);
}

.UIBirthdayWrapper {
  border-radius: var(--border-radius-birthday);
  -moz-border-radius: var(--border-radius-birthday);
  -webkit-border-radius: var(--border-radius-birthday);
  border: var(--border-birthday);
  margin: 0 2px 0 0;
  position: relative;
  width: 100%;
  height: var(--height-birthday);
}

.UIBirthdayWrapper > select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  background-image: none;
  border: 0;
  cursor: pointer;
  height: 100%;
  padding: var(--padding-birthday-select);
}

.UIBirthdayWrapper > select:disabled {
  background-color: var(--background-color_disabled);
  opacity: 0.8;
}

.UIBirthdayWrapper > select[readonly] {
  background-color: var(--background-color_readonly);
  opacity: 0.9;
}

.UIBirthdayWrapper .age {
  border-left: var(--border-birthday-age);
  display: block;
  line-height: var(--height-birthday);
  padding: var(--padding-birthday-age);
  height: var(--height-birthday);
  position: absolute;
  top: -1px;
  right: 0;
}

/********************************      WebKit/widget:UIBirthday:START     ********************************/
/********************************      WebKit/widget:UIButton:START      ********************************/
.UIButton {
  --background-color-button: var(--color-main);
  --background-color-button_hover: var(--color-secondary);
  --background-color-button-info: #45bfec;
  --background-color-button-info_hover: #5bccf6;
  --background-color-button-warn: #ff6359;
  --background-color-button-warn_hover: #ce5048;
  --background-color-button-confirm: #18a689;
  --background-color-button-confirm_hover: #159077;
  --background-color-button-cancel: #eee;
  --background-color-button-cancel_hover: #f6f6f6;
  --background-color-button-back: #eee;
  --background-color-button-back_hover: #f6f6f6;
  --background-color-button-delete: #e32b70;
  --background-color-button-delete_hover: #e32b70;
  --background-color-button-approve: var(--color-main);
  --background-color-button-reject: var(--background-color-button-warn);
  --font-color-button: var(--font-color-white);
  --font-color-button_hover: var(--font-color-white);
  --font-color-button-cancel: var(--font-color);
  --font-color-button-back: var(--font-color);
  --font-color-button-delete: var(--font-color-white);
  --padding-button: var(--padding-webkit);
  --padding-button-approve: var(--padding-layout);
  --padding-button-reject: var(--padding-layout);
  --height-button: var(--height-widget);
  --code-font-awesome-button-info: "";
  --code-font-awesome-button-back: "";
  --code-font-awesome-button-cancel: "";
  --code-font-awesome-button-search: "";
  --code-font-awesome-button-new: "";
  --code-font-awesome-button-save: "";
  --code-font-awesome-button-update: "";
  --code-font-awesome-button-edit: "";
  --code-font-awesome-button-delete: "";
  --code-font-awesome-button-setting: "";
  --code-font-awesome-button-refresh: "";
  --code-font-awesome-button-print: "";
  --code-font-awesome-button-print-label: "";
  --code-font-awesome-button-approve: "";
  --code-font-awesome-button-reject: "";
  --code-font-awesome-button-facebook: "";
  --code-font-awesome-button-line: "";
  --code-font-awesome-button-weixin: "";
}

.UIButton {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: var(--background-color-button);
  border: 0;
  color: var(--font-color-button);
  cursor: pointer;
  display: inline-block;
  padding: 0px var(--padding-button);
  white-space: nowrap;
  height: var(--height-button);
  /* margin-right: 2px; */
}

.UIButton:hover {
  background-color: var(--background-color-button_hover);
  color: var(--font-color-button_hover);
  outline-width: 0;
}

.UIButton[disabled] {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.65;
}

.UIButton.btnInfo {
  background-color: var(--background-color-button-info);
}

.UIButton.btnInfo:hover {
  background-color: var(--background-color-button-info_hover);
}

.UIButton.btnInfo:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-info);
}

.UIButton.btnWarn {
  background-color: var(--background-color-button-warn);
}

.UIButton.btnWarn:hover {
  background-color: var(--background-color-button-warn_hover);
}

.UIButton.btnBack {
  background-color: var(--background-color-button-back);
  color: var(--font-color-button-back);
}

.UIButton.btnBack:hover {
  background-color: var(--background-color-button-back_hover);
  color: var(--font-color-button-back);
}

.UIButton.btnBack:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-back);
}

.UIButton.btnCancel {
  background-color: var(--background-color-button-cancel);
  color: var(--font-color-button-cancel);
}

.UIButton.btnCancel:hover {
  background-color: var(--background-color-button-cancel_hover);
  color: var(--font-color-button-cancel);
}

.UIButton.btnCancel:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-cancel);
}

.UIButton.btnConfirm {
  background-color: var(--background-color-button-confirm);
}

.UIButton.btnConfirm:hover {
  background-color: var(--background-color-button-confirm_hover);
}

.UIButton.btnSearch:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-search);
}

.UIButton.btnNew:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-new);
}

.UIButton.btnSave:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-save);
}

.UIButton.btnUpdate:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-update);
}

.UIButton.btnEdit:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-edit);
}

.UIButton.btnDelete {
  background-color: var(--background-color-button-delete);
  color: var(--font-color-button-delete);
}

.UIButton.btnDelete:hover {
  background-color: var(--background-color-button-delete_hover);
}

.UIButton.btnDelete:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-delete);
}

.UIButton.btnSetting:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-setting);
}

.UIButton.btnRefresh:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-refresh);
}

.UIButton.btnPrint:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-print);
}

.UIButton.btnPrintLabel:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-print-label);
}

.UIButton.btnApprove {
  background-color: var(--background-color-button-approve);
  padding: 0 var(--padding-button-approve);
}

.UIButton.btnApprove:hover {
  background-color: var(--background-color-button-approve);
}

.UIButton.btnApprove:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-approve);
}

.UIButton.btnReject {
  background-color: var(--background-color-button-reject);
  padding: 0 var(--padding-button-reject);
}

.UIButton.btnReject:hover {
  background-color: var(--background-color-button-reject);
}

.UIButton.btnReject:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-reject);
}

/** btnFacebookLogin:START **/
.UIButton.btnFacebook {
  background-color: #305891;
}

.UIButton.btnFacebook:hover {
  background-color: #305891;
}

.UIButton.btnFacebook:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-facebook);
}

/** btnFacebookLogin:END **/
/** btnLine:START **/
.UIButton.btnLine {
  background-color: #1dbf21;
}

.UIButton.btnLine:hover {
  background-color: #1dbf21;
}

.UIButton.btnLine:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-line);
}

/** btnLine:END **/
/** btnWeixin:START **/
.UIButton.btnWeixin {
  background-color: #82d44a;
}

.UIButton.btnWeixin:hover {
  background-color: #82d44a;
}

.UIButton.btnWeixin:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-weixin);
}

/** btnWeixin:END **/
.UIButton + .UIButton {
  margin-left: 2px;
}

/********************************      WebKit/widget:UIButton:END      ********************************/
/********************************      WebKit/widget:UIButtonExport:START      ********************************/
.UIButtonExport {
  --background-color-button-export: #feae20;
  --background-color-button-export_hover: #fec04e;
  --color-button-export-excel: #0f642f;
  --color-button-export-pdf: #b70006;
  --font-size-button-export-icon: 24px;
  --padding-button-export-dropdown-menu: var(--padding-webkit);
  --padding-button-export-dropdown-menu-tem: calc(var(--padding-webkit) / 2);
  --margin-button-export-dropdown-menu-tem: calc(var(--margin-webkit) / 2);
  --border-button-export-dropdown-menu-item: var(--border-color-dark);
  --code-font-awesome-button-export: "";
  --code-font-awesome-button-export-excel: "";
  --code-font-awesome-button-export-pdf: "";
}

#exportControl {
  --padding-export-control: 36px;
  --height-export-control-button: 48px;
  --code-font-awesome-export-control-button: "";
}

.UIButtonExport.dropdown,
.UIButtonExport.dropdown .dropdown-toggle, .UIButtonExport.dropdown button {
  width: 100%;
}

.UIButtonExport.dropdown .dropdown-toggle::after {
  display: none;
}

.UIButtonExport.dropdown button {
  background-color: var(--background-color-button-export);
}

.UIButtonExport.dropdown button:hover {
  background-color: var(--background-color-button-export_hover);
}

.UIButtonExport.dropdown button:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-export);
}

.UIButtonExport.dropdown .dropdown-menu {
  padding: var(--padding-button-export-dropdown-menu);
}

.UIButtonExport.dropdown .dropdown-menu > div {
  border-bottom: var(--border-button-export-dropdown-menu-item);
  padding-bottom: var(--padding-button-export-dropdown-menu-tem);
  margin-bottom: var(--margin-button-export-dropdown-menu-tem);
}

.UIButtonExport.dropdown .dropdown-menu > div:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.UIButtonExport.dropdown .dropdown-menu .UILinkButton.excel:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-export-excel);
  color: var(--color-button-export-excel);
  font-size: --font-size-button-export-icon;
}

.UIButtonExport.dropdown .dropdown-menu .UILinkButton.pdf:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-button-export-pdf);
  color: var(--color-button-export-pdf);
  font-size: --font-size-button-export-icon;
}

.UIButtonGroup > div.UIButtonExport:last-child .dropdown-toggle .UIButton {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/** 匯出 **/
#exportControl {
  padding: var(--padding-export-control);
}

#exportControl .UIButton {
  width: 100%;
  height: var(--height-export-control-button);
}

#exportControl .UIButton:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-export-control-button);
}

/********************************      WebKit/widget:UIButtonExport:END      ********************************/
/********************************      WebKit/widget:UICalendar:START    ********************************/
.UICalendar {
  --background-color-calendar-event: var(--color-main);
  --color-calendar-event: var(--color-white);
}

@media (max-width: 768px) {
  .UICalendar.fc .fc-toolbar-title {
    font-size: 1rem;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .UICalendar.fc .fc-view-harness {
    height: 300px !important;
  }
}

.UICalendar.fc .fc-daygrid-event {
  background-color: var(--background-color-calendar-event);
  color: var(--color-calendar-event);
}

.UICalendar.fc .fc-daygrid-event .fc-daygrid-event-dot {
  border-color: var(--color-calendar-event);
}

.UICalendar.fc .fc-timegrid-event {
  background-color: var(--background-color-calendar-event);
  color: var(--color-calendar-event);
}

/********************************      WebKit/widget:UICalendar:END    ********************************/
/********************************      WebKit/widget:UICheckbox:START      ********************************/
.UICheckboxWrapper {
  --background-color-checkbox: transparent;
  --background-image-data-checkbox: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgUGl4ZWxtYXRvciBQcm8gMi40LjUgLS0+Cjxzdmcgd2lkdGg9IjQ0OCIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA0NDggNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxwYXRoIGlkPSJwYXRoMSIgZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSJub25lIiBkPSJNIDQzOC42MDAwMDYgMTA1LjM5OTk5NCBDIDQ1MS4xMDAwMDYgMTE3Ljg5OTk5NCA0NTEuMTAwMDA2IDEzOC4xMDAwMDYgNDM4LjYwMDAwNiAxNTAuNjAwMDA2IEwgMTgyLjYwMDAwNiA0MDYuNjAwMDA2IEMgMTcwLjEwMDAwNiA0MTkuMTAwMDA2IDE0OS44OTk5OTQgNDE5LjEwMDAwNiAxMzcuMzk5OTk0IDQwNi42MDAwMDYgTCA5LjM3MiAyNzguNjAwMDA2IEMgLTMuMTI0IDI2Ni4xMDAwMDYgLTMuMTI0IDI0NS44OTk5OTQgOS4zNzIgMjMzLjM5OTk5NCBDIDIxLjg3MDAwMSAyMjAuODk5OTk0IDQyLjEzMDAwMSAyMjAuODk5OTk0IDU0LjYzMDAwMSAyMzMuMzk5OTk0IEwgMTU5LjEwMDAwNiAzMzguNzAwMDEyIEwgMzkzLjM5OTk5NCAxMDUuMzk5OTk0IEMgNDA1Ljg5OTk5NCA5Mi44ODAwMDUgNDI2LjEwMDAwNiA5Mi44ODAwMDUgNDM4LjYwMDAwNiAxMDUuMzk5OTk0IEwgNDM4LjYwMDAwNiAxMDUuMzk5OTk0IFoiLz4KPC9zdmc+Cg==");
  --border-color-checkbox: var(--color-main);
  --border-radius-checkbox: var(--border-radius-widget);
  --min-width-checkbox-label: 50px;
  --margin-checkbox-label_left: calc(var(--margin-webkit) / 2);
  --margin-checkbox-label_right: var(--margin-webkit);
}

.UICheckboxWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  display: inline-block;
}

.UICheckboxWrapper input[type=checkbox][disabled] {
  cursor: default;
}

.UICheckboxWrapper input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: var(--border-radius-checkbox);
  -moz-border-radius: var(--border-radius-checkbox);
  -webkit-border-radius: var(--border-radius-checkbox);
  background-color: var(--background-color-checkbox);
  border: 1px solid var(--border-color-checkbox);
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.2em;
  vertical-align: top;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}

.UICheckboxWrapper input[type=checkbox]:checked {
  background-image: var(--background-image-data-checkbox);
}

.UICheckboxWrapper > input + span {
  min-width: var(--min-width-checkbox-label);
  margin-left: var(--margin-checkbox-label_left);
  margin-right: var(--margin-checkbox-label_right);
}

table.UICheckboxGroup {
  border-collapse: separate;
  border-spacing: 0 6px;
}

/********************************      WebKit/widget:UICheckbox:END      ********************************/
/********************************      WebKit/widget:UIColor:START      ********************************/
.UIColor {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
}

/********************************      WebKit/widget:UIColor:END      ********************************/
/********************************      WebKit/widget:UIContent:START      ********************************/
.UIContent {
  display: block;
  line-height: 1.6;
}

/* TYPE=text */
xmp.UIContent {
  margin: 0;
}

/* TYPE=html */
div.UIContent {
  letter-spacing: 1px;
  white-space: normal;
  text-align: justify;
}

.UIContent strong {
  font-weight: var(--font-weight-bold);
}

.UIContent em {
  font-style: Italic;
}

.UIContent h1 {
  font-size: var(font-size-h1);
  font-weight: var(font-weight-bold);
}

.UIContent h2 {
  font-size: var(font-size-h2);
  font-weight: var(font-weight-bold);
}

.UIContent h3 {
  font-size: var(font-size-h3);
  font-weight: var(font-weight-base);
}

.UIContent h4 {
  font-size: var(font-size-h4);
  font-weight: var(font-weight-base);
}

.UIContent h5 {
  font-size: var(font-size-h5);
  font-weight: var(font-weight-base);
}

.UIContent h6 {
  font-size: var(font-size-h6);
  font-weight: var(font-weight-light);
}

.UIContent sup {
  vertical-align: super;
  font-size: smaller;
}

.UIContent sub {
  vertical-align: sub;
  font-size: smaller;
}

.UIContent ol {
  display: block;
  list-style-type: decimal;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 20px;
}

.UIContent ol li {
  display: list-item;
  text-align: -webkit-match-parent;
}

.UIContent ul {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 20px;
}

.UIContent ul li {
  display: list-item;
  text-align: -webkit-match-parent;
}

.UIContent ul ul {
  list-style-type: circle;
}

/* UIContent 裡面放youtube影片, 需在裡面外面加上一個div class="youtube", 才能做RWD */
.UIContent .youtube {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.UIContent .youtube iframe, .youtube object, .youtube embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/********************************      WebKit/widget:UIContent:END      ********************************/
/********************************      WebKit/widget:UIDate/UIDateRange:START     ********************************/
.UIDateRangeWrapper {
  --background-color-date-range: #e1e1e1;
}

.UIDateWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  border: var(--border-color-widget);
  width: 100%;
  height: var(--height-widget);
}

.UIDateWrapper > .UIDate {
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  background-color: transparent;
  border: 0;
  color: #2b2b2b;
  font-size: var(--font-size-base);
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  height: 100%;
  padding: 0.375rem 0.2rem 0.275rem 0;
}

.UIDateWrapper > .UIDate:disabled,
.UIDateWrapper > .UIDate[readonly] {
  background-color: var(--background-color_disabled);
  opacity: 0.8;
  background-color: transparent;
  opacity: 1;
}

.UIDateWrapper.input-group .input-group-text {
  background-color: var(--transparent);
  border: 0;
  height: 100%;
}

.UIDateWrapper i {
  font-size: var(--font-size-icon-input);
}

/* 需修正這行, 不然在pop window 沒辦法顯示出來(z-index需設定最大, 不然pop時無法顯示) */
.datepicker {
  font-size: var(--font-size-base);
  line-height: 30px;
  z-index: 9999 !important;
  opacity: 1;
}

/* 修正日期區間的 ～ 大小*/
.UIDateRangeWrapper.input-daterange .input-group-addon {
  background-color: var(--background-color-date-range);
  font-size: 16px;
  margin: 0;
  text-align: center;
}

/********************************      WebKit/widget:UIDate/UIDateRange:END     ********************************/
/********************************      WebKit/widget:UIDownloadButton:START      ********************************/
.UIDownloadButton {
  --code-font-awesome-link-button-file: "";
  --font-color-link-button: #034c70;
  --font-color-link-button_hover: $font-color-link_hover;
  --padding-link-button-file: 3px 12px;
}

.UIDownloadButton {
  color: var(--font-color-link-button);
  cursor: pointer;
  text-decoration: none;
}

.UIDownloadButton:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-link-button-file);
}

.UIDownloadButton:hover {
  color: var(--font-color-link-button_hover);
}

.UIDownloadButton[disabled],
.UIDownloadButton[disabled]:hover {
  color: var(font-color-link-button_disabled);
  cursor: default;
}

/********************************      WebKit/widget:UIDownloadButton:END      ********************************/
/********************************      WebKit/widget:UIFileUpload:START    ********************************/
.UIFileUpload {
  --font-color-file-upload: var(--font-color-white);
}

.UIFileUpload {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  color: var(--font-color-file-upload);
  display: inline-block;
  width: 100%;
  overflow: hidden;
}

/** btnUploadView:START **/
.UIFileUpload .btnUploadView, .UIFileUpload .btnUploadView > div {
  cursor: pointer;
  /*width: 100%;*/
}

.UIFileUpload .btnUploadView:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f0ee";
}

.UIFileUpload .btnUploadView #btnUpload {
  border-left: var(--border-color-dark);
  line-height: var(--height-widget);
  padding-left: calc(var(--padding-webkit) / 2);
  cursor: pointer;
  z-index: 999;
}

.UIFileUpload .btnUploadView .progressBar {
  background-color: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  filter: alpha(opacity=30);
  opacity: 0.3;
  -moz-opacity: 0.3;
}

/** btnUploadView:END **/
/** btnDownloadView:START **/
.UIFileUpload .btnDownloadView:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f019";
}

.UIFileUpload .btnDownloadView #btnDownload {
  color: var(--font-color-file-upload);
  border-left: var(--border-color-dark);
  display: inline-block;
  line-height: var(--height-widget);
  padding-left: calc(var(--padding-webkit) / 2);
  cursor: pointer;
  z-index: 999;
}

.UIFileUpload .btnDownloadView #btnFilename {
  color: var(--font-color-file-upload);
  padding-left: calc(var(--padding-webkit) / 4);
}

/** btnDownloadView:END **/
.UIFileUpload .btnDeleteView {
  background-color: var(--background-color-button);
  position: absolute;
  top: 0;
  right: 0;
}

.UIFileUpload .btnDeleteView:before {
  padding-left: calc(var(--padding-webkit) / 2);
  content: " | ";
}

.UIFileUpload .btnDeleteView #btnDelete {
  line-height: var(--height-widget);
  cursor: pointer;
  z-index: 999;
}

.UIFileUpload .btnDeleteView #btnDelete:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f2ed";
}

/********************************      WebKit/widget:UIFileUpload:END    ********************************/
/********************************      WebKit/widget:UIHelper:START    ********************************/
i.UIHelper {
  color: #a63614;
  font-size: var(--font-size-icon-tip);
  padding: 6px 12px;
}

/********************************      WebKit/widget:UIHelper:END   ********************************/
/********************************      WebKit/widget:UIImage:START      ********************************/
.UIImage.circle {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.UIImage.responsive {
  max-width: 100%;
  height: auto;
}

/* 修正舊Bootstrap加上的CSS */
img.img-responsive {
  max-width: 100%;
  height: auto;
}

/********************************      WebKit/widget:UIImage:END      ********************************/
/********************************      WebKit/widget:UIImageButton:START      ********************************/
.UIImageButton {
  cursor: pointer;
  cursor: hand;
}

/********************************      WebKit/widget:UIImageButton:END      ********************************/
/********************************      WebKit/widget:UIImageUpload:START    ********************************/
.UIImageUpload {
  ---border-color-image-upload: 2px solid #fff;
}

.UIImageUpload {
  box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.06);
  -webkit-box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border: var(--border-color-image-upload);
  position: relative;
  min-width: 36px;
  min-height: 36px;
  overflow: hidden;
}

.UIImageUpload .progressBar {
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 32px;
  z-index: 9999;
  filter: alpha(opacity=30);
  opacity: 0.3;
  -moz-opacity: 0.3;
}

.UIImageUpload #imgPreview {
  border: var(--border-color-light);
  /*
  position: absolute;
  top: 0px;
  left: 0px;*/
}

.UIImageUpload .btnUploadView,
.UIImageUpload .btnDeleteView {
  position: absolute;
  left: 6px;
  bottom: 0px;
}

.UIImageUpload .btnUploadView #uploadFile {
  display: none;
}

.UIImageUpload .btnUploadView #btnUpload {
  cursor: pointer;
  overflow: hidden;
  display: block;
  z-index: 9999;
}

.UIImageUpload .btnUploadView #btnUpload:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f332";
  font-size: 24px;
}

.UIImageUpload .btnDeleteView #btnDelete {
  cursor: pointer;
  overflow: hidden;
  display: block;
  z-index: 9999;
}

.UIImageUpload .btnDeleteView #btnDelete:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f2ed";
  font-size: 24px;
}

/********************************      WebKit/widget:UIImageUpload:END    ********************************/
/********************************      WebKit/widget:UILabel:START      ********************************/
.UILabel {
  --color-label-hint: #ee3939;
  --color-label-comment: var(--color-comment);
  --font-size-label-hint: 0.85rem;
  --font-size-label-comment: 0.9em;
  --font-size-label-check: 1.1em;
  --padding-label-session: 3px;
  --code-font-awesome-label-check: "";
  --font-size-label-footnote: var(--font-size-smaller);
  --font-weight-label-footnote: 600;
}

.UILabel.h1, .UILabel.h2, .UILabel.h3, .UILabel.h4, .UILabel.h5, .UILabel.h6 {
  margin-bottom: 2px;
}

.UILabel.h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
}

.UILabel.h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
}

.UILabel.h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-base);
}

.UILabel.h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-base);
}

.UILabel.h5 {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-base);
}

.UILabel.h6 {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-light);
}

.UILabel.session {
  padding-left: var(--padding-label-session);
  padding-right: var(--padding-label-session);
}

.UILabel.hint {
  color: var(--color-label-hint);
  font-size: var(--font-size-label-hint);
}

.UILabel.comment {
  color: var(--color-label-comment);
  font-size: var(--font-size-label-comment);
}

.UILabel.deleted {
  text-decoration: line-through;
}

.UILabel.check:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-label-check);
  font-size: var(--font-size-label-check);
}

.UILabel.footnote {
  font-size: var(--font-size-label-footnote);
  font-weight: var(--font-weight-label-footnote);
}

.UILabel-block {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  line-height: 1.6;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
}

.UILabel-block .UILabel {
  white-space: nowrap !important;
}

/********************************      WebKit/widget:UILabel:END      ********************************/
/********************************      WebKit/widget:UILine:START   ********************************/
.UILine {
  --border-top-line: 1px solid #dedede;
  --border-bottom-line: 1px solid white;
  --padding-line: 8px 0;
  --padding-line_small: 4px 0;
  --padding-line-large: 14px 0;
}

hr.UILine {
  border: 0;
  border-top: var(--border-top-line);
  border-bottom: var(--border-bottom-line);
  height: 0;
}

hr.UILine.base {
  margin: var(--padding-line);
}

hr.UILine.small {
  margin: var(--padding-line_small);
}

hr.UILine.large {
  margin: var(--padding-line-large);
}

/********************************      WebKit/widget:UILine:END   ********************************/
/********************************      WebKit/widget:UILink:START      ********************************/
a.UILink {
  color: var(--font-color);
  cursor: pointer;
}

a.UILink:hover {
  color: var(font-color-link_hover);
}

a.UILink[disabled],
a.UILink[disabled]:hover {
  cursor: default;
}

/** btnDelete:START (刪除圖示) **/
.UILink.btnDelete:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f2ed";
  padding-left: calc(var(--padding-webkit) / 2);
  padding-right: calc(var(--padding-webkit) / 2);
}

/** btnDelete:END **/
/** facebook:START **/
.UILink.facebook, .UILink.facebook:hover,
.UITag.facebook {
  color: var(--color-facebook);
}

.UILink.facebook:before,
.UITag.facebook:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f39e";
  font-size: var(--font-size-icon-base);
}

/** facebook:END **/
/** line:START **/
.UILink.line, .UILink.line:hover,
.UITag.line {
  color: var(--color-line);
}

.UILink.line:before,
.UITag.line:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f3c0";
  font-size: var(--font-size-icon-base);
}

/** line:END **/
/** weixin:START **/
.UILink.weixin, .UILink.weixin:hover,
.UITag.weixin {
  color: var(--color-weixin);
}

.UILink.weixin:before,
.UITag.weixin:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f1d7";
  font-size: var(--font-size-icon-base);
}

/** weixin:END **/
/** linkedin:START **/
.UILink.linkedin, .UILink.linkedin:hover,
.UITag.linkedin {
  color: var(--color-linkedin);
}

.UILink.linkedin:before,
.UITag.linkedin:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f0e1";
  font-size: var(--font-size-icon-base);
}

/** linkedin:END **/
/** youtube:START **/
.UILink.youtube, .UILink.youtube:hover,
.UITag.youtube {
  color: var(--color-youtube);
}

.UILink.youtube:before,
.UITag.youtube:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f167";
  font-size: var(--font-size-icon-base);
}

/** youtube:END **/
/** instagram:START **/
.UILink.instagram, .UILink.instagram:hover,
.UITag.instagram {
  color: var(--color-instagram);
}

.UILink.instagram:before,
.UITag.instagram:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f16d";
  font-size: var(--font-size-icon-base);
}

/** instagram:END **/
/** twitter:START **/
.UILink.twitter, .UILink.twitter:hover,
.UITag.twitter {
  color: var(--color-twitter);
}

.UILink.twitter:before,
.UITag.twitter:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f099";
  font-size: var(--font-size-icon-base);
}

/** twitter:END **/
/** weibo:START **/
.UILink.weibo, .UILink.weibo:hover,
.UITag.weibo {
  color: var(--color-weibo);
}

.UILink.weibo:before,
.UITag.weibo:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f18a";
  font-size: var(--font-size-icon-base);
}

/** weibo:END **/
/** phone:START **/
.UILink.phone, .UILink.weibo:phone,
.UITag.phone {
  color: var(--font-color);
}

.UILink.phone:before,
.UITag.phone:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f2a0";
  font-size: var(--font-size-icon-base);
}

/** phone:END **/
/********************************      WebKit/widget:UILink:END      ********************************/
/********************************      WebKit/widget:UILinkButton:START      ********************************/
.UILinkButton {
  --background-color-link-button-file: rgba(46, 149, 128, 0.1);
  --background-color-link-button-file_untag: rgba(00, 00, 00, 0.1);
  --border-radius-link-button-file: 6px;
  --color-link-button-file: var(--color-secondary);
  --color-link-button-file_tag: var(--color-main);
  --color-link-button-file_untag: var(--color-gray);
  --font-color-link-button: #034c70;
  --font-color-link-button_hover: $font-color-link_hover;
  --font-color-link-button_disabled: $font-color-link_disabled;
  --padding-link-button-file: 3px 12px;
  --margin-link-button-file: 6px;
  --code-font-awesome-link-button-file: "";
}

.UILinkButton {
  color: var(--font-color-link-button);
  cursor: pointer;
  text-decoration: none;
}

.UILinkButton:hover {
  color: var(--font-color-link-button_hover);
}

.UILinkButton[disabled],
.UILinkButton[disabled]:hover {
  color: var(font-color-link-button_disabled);
  cursor: default;
}

/** file:START (連結路徑前面有檔案圖示) **/
.UILinkButton.file:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: var(--code-font-awesome-link-button-file);
}

/** file:END **/
/** tag:START **/
.UILinkButton.tag {
  border-radius: var(--border-radius-link-button-file);
  -moz-border-radius: var(--border-radius-link-button-file);
  -webkit-border-radius: var(--border-radius-link-button-file);
  background-color: var(--background-color-link-button-file);
  color: var(--color-link-button-file);
  padding: var(--padding-link-button-file);
  margin-right: var(--margin-link-button-file);
}

.UILinkButton.tag:before {
  content: "#";
  padding-right: 3px;
}

.UILinkButton.tag[data-state=tag] {
  color: var(--color-link-button-file_tag);
}

.UILinkButton.tag[data-state=untag] {
  background-color: --background-color-link-button-file_untag;
  color: var(--color-link-button-file_untag);
}

/** tag:END **/
/********************************      WebKit/widget:UILinkButton:END      ********************************/
/********************************      WebKit/widget:UILoader:START      ********************************/
.UILoader.fill {
  height: 100%;
}

/********************************      WebKit/widget:UILoader:START      ********************************/
/********************************      WebKit/widget:UIMenu:START      ********************************/
.UIMenuWrapper {
  --color-menu-addon: #909090;
}

.UIMenuWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  border: var(--border-color-widget);
  width: 100%;
  height: var(--height-widget);
  overflow: hidden;
}

.UIMenuWrapper:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  border-left: var(--border-color-light);
  line-height: var(--height-widget);
  padding: 0 calc(var(--padding-webkit) / 2);
  content: "\f0dc";
  position: absolute;
  top: 0;
  right: 0;
}

.UIMenuWrapper .UIMenu {
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  background-color: transparent;
  border: 0;
  color: #2b2b2b;
  font-size: var(--font-size-base);
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  height: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background: none;
  background-image: none;
  border: none;
  cursor: pointer;
  padding: 0 calc(var(--padding-webkit) * 3) 0 var(--padding-webkit);
}

.UIMenuWrapper .UIMenu:disabled {
  color: var(--font-color_disabled);
}

.UIMenuWrapper > i {
  color: var(--color-menu-addon);
  position: absolute;
  top: 8px;
  right: 6px;
  z-index: 99;
}

/********************************      WebKit/widget:UIMenu:END      ********************************/
/********************************      WebKit/widget:UIMenuGroupWrapper:START      ********************************/
.UIMenuGroupWrapper {
  --background-color-menu_active: var(--color-main);
  --background-color-menu_disabled: #f2f5f8;
  --font-color-menu_active: #fff;
}

.UIMenuGroupWrapper .UIMenuGroup a {
  border: var(--border-color-light);
  display: inline-block;
  padding: 6px 12px;
  margin: 0 6px 6px 0;
}

.UIMenuGroupWrapper .UIMenuGroup a.active {
  color: var(--font-color-menu_active);
  background-color: var(--background-color-menu_active);
}

.UIMenuGroupWrapper .UIMenuGroup a[disabled] {
  background-color: var(--background-color-menu_disabled);
  color: var(--font-color_disabled);
  cursor: default;
}

/********************************      WebKit/widget:UIMenuGroupWrapper:END      ********************************/
/********************************      WebKit/widget:UIRadio:START      ********************************/
.UIRadioWrapper {
  --background-color-radio: transparent;
  --background-color-radio_check: transparent;
  --background-image-data-radio: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48cGF0aCBkPSJNMzIwIDI1NmMwIDg4LjQtNzEuNiAxNjAtMTYwIDE2MFMwIDM0NC40IDAgMjU2UzcxLjYgOTYgMTYwIDk2czE2MCA3MS42IDE2MCAxNjB6Ii8+PC9zdmc+");
  --border-color-radio: var(--color-main);
  --border-color-radio_check: var(--color-main);
  --border-radius-radio: 50%;
  --margin-radio: var(--margin-webkit);
  --margin-radio-label: var(--margin-webkit);
}

.UIRadioWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  display: inline-block;
  margin-right: var(--margin-radio);
}

.UIRadioWrapper input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: var(--border-radius-radio);
  -moz-border-radius: var(--border-radius-radio);
  -webkit-border-radius: var(--border-radius-radio);
  background-color: var(--background-color-radio);
  border: 1px solid var(--border-color-radio);
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.2em;
  vertical-align: top;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}

.UIRadioWrapper input[type=radio]:checked {
  background-color: var(--background-color-radio_check);
  background-image: var(--background-image-data-radio);
  border: 1px solid var(--border-color-radio_check);
}

.UIRadioWrapper > span {
  margin-left: var(--margin-radio-label);
}

/********************************      WebKit/widget:UIRadio:END      ********************************/
/********************************      WebKit/widget:UIScanner:START      ********************************/
.UIScanner {
  --border-color-scanner: var(--border-color-light);
  --font-size-scanner-switch: 18px;
  --font-size-scanner-control-button: 18px;
}

.UIScanner {
  border: var(--border-color-scanner);
  position: relative;
  overflow: hidden;
}

.UIScanner > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.UIScanner > #video {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.UIScanner > #switch {
  display: none;
  font-size: var(--font-size-scanner-switch);
  position: absolute;
  left: 6px;
  bottom: 6px;
}

.UIScanner > #start,
.UIScanner > #stop {
  display: none;
  font-size: var(--font-size-scanner-control-button);
  position: absolute;
  right: 6px;
  bottom: 6px;
}

/********************************      WebKit/widget:UIScanner:END      ********************************/
/********************************      WebKit/widget:UISearch:START    ********************************/
.UISearchWrapper {
  --size-search: 36px;
  --code-font-awesome-search: "";
}

.UISearchWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  border: var(--border-color-widget);
  width: 100%;
  height: var(--height-widget);
}

.UISearchWrapper > .UISearch {
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  background-color: transparent;
  border: 0;
  color: #2b2b2b;
  font-size: var(--font-size-base);
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  height: 100%;
}

.UISearchWrapper .UISearch[readonly] {
  background-color: transparent;
  opacity: 1;
}

.UISearchWrapper .UISearch:disabled {
  background-color: var(--background-color_disabled);
  opacity: 0.8;
  opacity: 1;
}

.UISearchWrapper > button {
  background-color: transparent;
  border: none;
  color: #bababa;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.UISearchWrapper > button i {
  cursor: pointer;
  display: block;
  width: var(--size-search);
  height: var(--size-search);
}

.UISearchWrapper > button i:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: var(--code-font-awesome-search);
  line-height: var(--size-search);
}

/********************************      WebKit/widget:UISearch:END    ********************************/
/********************************      WebKit/widget:UIShareButton:START      ********************************/
.UIShareButton {
  --background-color-share-button: transparent;
  --background-color-share-icon: #fff;
  --border-color-share-icon: var(--border-color-light);
  --color-share-button: var(--color-main);
  --padding-share-button: 3px 6px;
  --padding-share-icon: 0px 12px;
  --code-font-awesome-share-button: "";
}

.UIShareButton {
  background-color: var(--background-color-share-button);
  color: var(--color-share-button);
  padding: var(--padding-share-button);
  height: auto;
}

.UIShareButton:hover, .UIShareButton:focus {
  background-color: var(--background-color-share-button);
  color: var(--color-share-button);
}

.UIShareButton:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: var(--code-font-awesome-share-button);
}

.shareIcon {
  background-color: var(--background-color-share-icon);
  border: var(--border-color-share-icon);
  display: none;
  padding: var(--padding-share-icon);
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 9999;
}

.shareIcon .UILink:before {
  font-size: 24px !important;
  margin-right: 6px;
}

/********************************      WebKit/widget:UIShareButton:END      ********************************/
/********************************      WebKit/widget:UISignature:START   ********************************/
.UISignatureWrapper {
  --border-signature: var(--border-color-light);
  --font-size-signature-button: 24px;
  --padding-signature-button: var(--padding-webkit) var(--padding-layout);
}

.UISignatureWrapper {
  border: var(--border-signature);
  display: inline-block;
  position: relative;
}

.UISignatureWrapper .UIButtonGroup {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
  position: absolute;
  right: 3px;
  bottom: 3px;
}

.UISignatureWrapper .UIButtonGroup .UILink {
  display: inline-block;
  padding: var(--padding-signature-button);
}

.UISignatureWrapper .UIButtonGroup .btnClear:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  font-size: var(--font-size-signature-button);
  content: "\f057";
}

.UISignatureWrapper .UIButtonGroup .btnOk:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  font-size: var(--font-size-signature-button);
  content: "\f058";
}

/********************************      WebKit/widget:UISignature:END   ********************************/
/********************************      WebKit/widget:UISwitch:START   ********************************/
.UISwitchWrapper {
  --background-color-switch: transparent;
  --background-color-switch_check: transparent;
  --background-image-data-switch: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgUGl4ZWxtYXRvciBQcm8gMi40LjUgLS0+Cjxzdmcgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxwYXRoIGlkPSJwYXRoMSIgZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSJub25lIiBvcGFjaXR5PSIwLjUwMTU0NCIgZD0iTSAyNTYgNDg4IEMgMzg0LjE0MzczOCA0ODggNDg4IDM4NC4xNDM3MzggNDg4IDI1NiBDIDQ4OCAxMjcuODU2MjYyIDM4NC4xNDM3MzggMjQgMjU2IDI0IEMgMTI3Ljg1NjI0NyAyNCAyNCAxMjcuODU2MjYyIDI0IDI1NiBDIDI0IDM4NC4xNDM3MzggMTI3Ljg1NjI0NyA0ODggMjU2IDQ4OCBaIi8+CiAgICA8dGV4dCBpZD0idGV4dDEiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjYzNCIgeT0iODAzIiBmb250LWZhbWlseT0iS2FpdGkgVEMiIGZvbnQtc2l6ZT0iMTIwIiBmaWxsPSIjMDAwMDAwIj7mloflrZc8L3RleHQ+Cjwvc3ZnPgo=");
  --background-image-data-switch_check: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgUGl4ZWxtYXRvciBQcm8gMi40LjUgLS0+Cjxzdmcgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxwYXRoIGlkPSJwYXRoMSIgZmlsbD0iIzAwMDAwMCIgc3Ryb2tlPSJub25lIiBkPSJNIDI1NiA0ODggQyAzODQuMTQzNzM4IDQ4OCA0ODggMzg0LjE0MzczOCA0ODggMjU2IEMgNDg4IDEyNy44NTYyNjIgMzg0LjE0MzczOCAyNCAyNTYgMjQgQyAxMjcuODU2MjQ3IDI0IDI0IDEyNy44NTYyNjIgMjQgMjU2IEMgMjQgMzg0LjE0MzczOCAxMjcuODU2MjQ3IDQ4OCAyNTYgNDg4IFoiLz4KICAgIDx0ZXh0IGlkPSJ0ZXh0MSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeD0iNjM0IiB5PSI4MDMiIGZvbnQtZmFtaWx5PSJLYWl0aSBUQyIgZm9udC1zaXplPSIxMjAiIGZpbGw9IiMwMDAwMDAiPuaWh+WtlzwvdGV4dD4KPC9zdmc+Cg==");
  --border-color-switch: var(--color-gray);
  --border-color-switch_check: var(--color-main);
  --border-radius-switch: 2em;
  --opacity-switch: 0.7;
  --margin-switch: var(--margin-webkit);
  --margin-switch-label: calc(var(--margin-webkit) / 2);
}

.UISwitchWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  display: inline-block;
  margin-right: var(--margin-switch);
}

.UISwitchWrapper input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: var(--border-radius-switch);
  -moz-border-radius: var(--border-radius-switch);
  -webkit-border-radius: var(--border-radius-switch);
  /* 設定所有樣式變更都有轉場效果 */
  transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  background-color: var(--background-color-switch);
  background-image: var(--background-image-data-switch);
  border: 1px solid var(--border-color-switch);
  opacity: var(--opacity-switch);
  width: 2em;
  height: 1.1em;
  margin-top: 0.2em;
  vertical-align: top;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  cursor: pointer;
}

.UISwitchWrapper input[type=checkbox]:checked {
  background-color: var(--background-color-switch_check);
  background-image: var(--background-image-data-switch_check);
  border: 1px solid var(--border-color-switch_check);
  opacity: 1;
  background-position: right center;
}

.UISwitchWrapper > span {
  margin-left: var(--margin-switch-label);
}

/********************************      WebKit/widget:UISwitch:END   ********************************/
/********************************      WebKit/widget:UIText:START      ********************************/
.UITextWrapper {
  --height-text_in_table: 26px;
  --border-text-webhint: 1px solid var(--color-secondary);
  --min-width-text: 52px;
}

.UITextWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  border: var(--border-color-widget);
  width: 100%;
  height: var(--height-widget);
  min-width: var(--min-width-text);
}

.UITextWrapper > .UIText {
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  background-color: transparent;
  border: 0;
  color: #2b2b2b;
  font-size: var(--font-size-base);
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  height: 100%;
  padding: 0.375rem 0.475rem;
}

.UITextWrapper > .UIText:focus {
  border: 0;
}

.UITextWrapper > .UIText:disabled {
  background-color: var(--background-color_disabled);
  opacity: 0.8;
}

.UITextWrapper > .UIText[readonly] {
  background-color: var(--background-color_readonly);
  opacity: 0.9;
}

.UITextWrapper i {
  font-size: var(--font-size-icon-input);
}

.UITextWrapper.input-group { /* 設定最小寬度，避免內容掉下來 */
  min-width: 68px;
}

.UITextWrapper.input-group .input-group-text {
  background-color: var(--transparent);
  border: 0;
  height: 100%;
}

/* 數字輸入盒 */
.UITextWrapper.input-group .UIText.number {
  text-align: center;
}

.UITextWrapper.input-group .input-group-text.minus,
.UITextWrapper.input-group .input-group-text.plus {
  cursor: pointer;
}

/* 標籤樣式輸入盒 */
.UITextWrapper.label {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  background-color: transparent;
  border: 0;
  border-bottom: var(--border-color-light);
  display: inline-block;
  height: 24px;
}

.UITextWrapper.label .UIText {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  background-color: transparent;
  min-width: initial;
  padding-left: calc(var(--padding-webkit) / 6);
  padding-right: calc(var(--padding-webkit) / 6);
}

.UITextWrapper.label .UIText:disabled {
  background-color: var(--background-color_disabled);
  opacity: 0.8;
}

.UITextWrapper.label + .UILabel {
  line-height: 24px;
}

/* Floating labels */
.UITextWrapper.form-floating > label {
  color: var(--font-color-subtitle);
  padding: 0.75rem 0.75rem;
}

.UITextWrapper.form-floating > .form-control {
  min-height: initial; /* 修正bootstrap 樣式問題*/
}

.UITextWrapper.form-floating > .form-control:not(:-moz-placeholder) ~ label {
  color: var(--font-color-title);
  opacity: 0.8;
}

.UITextWrapper.form-floating > .form-control:focus ~ label,
.UITextWrapper.form-floating > .form-control:not(:placeholder-shown) ~ label,
.UITextWrapper.form-floating > .form-select ~ label {
  color: var(--font-color-title);
  opacity: 0.8;
}

.UITextWrapper.form-floating > .form-control:not(:-moz-placeholder) ~ label::after {
  background-color: transparent;
}

.UITextWrapper.form-floating > .form-control-plaintext ~ label::after,
.UITextWrapper.form-floating > .form-control:focus ~ label::after,
.UITextWrapper.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.UITextWrapper.form-floating > .form-select ~ label::after {
  background-color: transparent;
}

/* 單位輸入盒 */
.UITextWrapper.unit > .UIText {
  padding: 0;
  padding-left: calc(var(--padding-webkit) / 2);
}

.UITextWrapper.unit > .UIText[readonly] {
  background-color: transparent;
}

/* DataBinder.markById標記 */
.UITextWrapper > .UIText.webhint {
  border: var(--border-text-webhint);
}

.UIDataTable tbody .UIDataColumn .UITextWrapper,
.UIPaginatedDataTable tbody .UIDataColumn .UITextWrappert {
  height: var(--height-text_in_table);
}

/* UIDataTable -> UITextWrapper */
.UIDataTable tbody .UIDataColumn .UITextWrapper.input-group .input-group-text,
.UIPaginatedDataTable tbody .UIDataColumn .UITextWrapper.input-group .input-group-text {
  padding: 0.375rem 0.375rem;
}

/********************************      WebKit/widget:UIText:END      ********************************/
/********************************      WebKit/widget:UITextarea:START      ********************************/
.UITextareaWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  border: var(--border-color-widget);
  width: 100%;
}

.UITextareaWrapper > .UITextarea {
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  background-color: transparent;
  border: 0;
  color: #2b2b2b;
  font-size: var(--font-size-base);
  resize: both;
}

.UITextareaWrapper > .UITextarea:disabled,
.UITextareaWrapper > .UITextarea[readonly] {
  background-color: var(--background-color_disabled);
  opacity: 0.8;
}

/********************************      WebKit/widget:UITextarea:END      ********************************/
/********************************      WebKit/widget:UITexMenu:START      ********************************/
.UITextMenuWrapper > .UIMenu {
  border: 0;
  width: calc(100% - 32px) !important;
  height: 100%;
  padding: 0 8px;
  position: absolute;
  left: 0px;
}

/********************************      WebKit/widget:UITexMenu:END      ********************************/
/********************************      WebKit/widget:UITime:START      ********************************/
.UITimeWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  border: var(--border-color-widget);
  width: 100%;
  height: var(--height-widget);
}

.UITimeWrapper > .UITime {
  border-radius: var(--border-radius-widget);
  -moz-border-radius: var(--border-radius-widget);
  -webkit-border-radius: var(--border-radius-widget);
  background-color: transparent;
  border: 0;
  color: #2b2b2b;
  font-size: var(--font-size-base);
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  height: 100%;
}

.UITimeWrapper > .UITime:disabled,
.UITimeWrapper > .UITime[readonly] {
  background-color: var(--background-color_disabled);
  opacity: 0.8;
}

.UITimeWrapper i {
  font-size: var(--font-size-icon-input);
}

.UITimeWrapper.input-group .input-group-text {
  background-color: var(--transparent);
  border: 0;
  height: 100%;
}

/********************************      WebKit/widget:UITime:END      ********************************/
/********************************      WebKit/widget:UITree:START  (未整理)     ********************************/
.UITree .UITreeNode[disabled=true],
.UITree .UITreeNode[disabled=disabled] {
  color: #eee;
}

/********************************      WebKit/widget:UITree:END  (未整理)     ********************************/
/********************************      WebKit/chart:UIBarChart  (未整理)     ********************************/
.UIBarChart {
  --border-bar-char: var(--border-color-dark);
  --padding-bar-char: 3px;
}

.UIBarChart .legend > div {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border: var(border-bar-char);
  padding: var(--padding-bar-char);
}

.UIBarChart .legend > table td {
  padding: 2px 3px;
}

.UIBarChart #flotTip {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border: var(--border-color-dark);
  padding: 12px;
  opacity: 0.95;
}

/********************************      WebKit/chart:UILineChart  (未整理)     ********************************/
.UILineChart .legend > div {
  padding: 3px;
  border-radius: 5px;
  border: 2px solid #f0f0f0;
}

.UILineChart .legend > table {
  padding: 6px;
}

.UILineChart .legend > table td {
  padding: 2px 3px;
}

.UILineChart .valueLabels {
  font-size: 70%;
  color: black;
}

.UILineChart div.valueLabelLight {
  opacity: 0.5;
  background-color: white;
  border: none;
  position: absolute;
}

.UILineChart div.valueLabel {
  position: absolute;
  border: none;
}

.UILineChart #flotTip {
  border: 2px solid #eee;
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  opacity: 0.95;
}

/********************************      WebKit/chart:UIOrganizationChar:START     ********************************/
.UIOrganizationChart {
  overflow: auto;
}

.UIOrganizationChart .orgchart {
  background-image: none;
  position: relative;
}

.UIOrganizationChart .orgchart .node .title {
  background-color: rgba(45, 120, 223, 0.8);
}

.UIOrganizationChart .orgchart .node .title .symbol {
  margin-top: 14px;
  margin-left: 6px;
}

.UIOrganizationChart .orgchart .node .content {
  border: 1px solid rgba(45, 120, 223, 0.8);
}

.UIOrganizationChart .orgchart .lines .topLine {
  border-top: 2px solid rgba(45, 120, 223, 0.8);
}

.UIOrganizationChart .orgchart .lines .rightLine {
  border-right: 1px solid rgba(45, 120, 223, 0.8);
}

.UIOrganizationChart .orgchart .lines .leftLine {
  border-left: 1px solid rgba(45, 120, 223, 0.8);
}

.UIOrganizationChart .orgchart .lines .downLine {
  background-color: rgba(45, 120, 223, 0.8);
}

/********************************      WebKit/chart:UIOrganizationChar:END     ********************************/
/********************************      webkit-tooltip:START    ********************************/
.tooltip-inner {
  --font-size-tooltip: var(--font-size-base);
  --padding-tooltip: 0 4px;
  --padding-tooltip-icon: 0 4px;
}

/* 修正Bootstrap Tooltip文字靠左對齊*/
.tooltip-inner {
  text-align: left;
}

.UIForm .UIFormItem > th > i.tooltip-icon {
  font-size: var(--font-size-tooltip);
  padding: var(--padding-tooltip);
}

.UIDataTable th > i.tooltip-icon {
  font-size: 12px;
  padding: var(--padding-tooltip-icon);
}

.UIPanel .caption > i.tooltip-icon {
  padding: var(--padding-tooltip-icon);
}

/********************************      webkit-tooltip:START    ********************************/
/********************************      Validator:START   (未整理)    ********************************/
.error {
  border-bottom: 1px solid #ff1f1f !important;
}

input[type=checkbox].error:before {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border: 1px solid #ff1f1f;
  content: "";
  display: block;
  position: relative;
  width: 11px;
  height: 11px;
}

input[type=radio].error:before {
  border-radius: 12px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border: 1px solid #ff1f1f;
  content: "";
  display: block;
  position: relative;
  width: 12px;
  height: 12px;
  margin-top: -1px;
  margin-left: -1px;
}

.errorMessage {
  color: #ff1f1f;
  display: block;
  font-size: 0.8em;
  position: absolute;
  right: 2px;
  bottom: 2px;
  z-index: 9999;
}

/********************************      Validator:END   (未整理)    ********************************/
/********************************      組合樣式修正:START      ********************************/
.UIPanel > .content .UIPanel {
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}

.UIPanel > .UIPanelBottom .UIButton {
  padding-left: 48px;
  padding-right: 48px;
}
@media (max-width: 768px) {
  .UIPanel > .UIPanelBottom .UIButton {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.UIPanel > .content + .UITabHost {
  margin-top: -12px;
}

/*
.UIPanel > .content > .UIDataTable
    ,.UIPanel > .content > .UIPaginatedDataTable
    ,.UIPanel > .content > .UIPaginatedRepeater {

    margin-left: (0 - calc($padding-layout - 3px));
    margin-right: (0 - calc($padding-layout - 3px));
}

.UIPanel.minor > .content > .UIDataTable
    ,.UIPanel.minor > .content > .UIPaginatedDataTable
    ,.UIPanel.minor > .content > .UIPaginatedRepeater {

    margin-left: (0 - calc($padding-webkit - 3px));
    margin-right: (0 - calc($padding-webkit - 3px));

    @media (max-width: 768px) {
        margin-left: (0 - calc($padding-webkit - 2px));
        margin-right: (0 - calc($padding-webkit - 2px));
    }
}

.UIPanel.noBorder > .content > .UIDataTable
    ,.UIPanel.noBorder > .content > .UIPaginatedDataTable
    ,.UIPanel.noBorder > .content > .UIPaginatedRepeater {

    margin: 0px 0px;
} */
/* 設定在UIForm裡Icon的大小 */
.UIForm .UIFormItem i {
  font-size: 14px;
  line-height: 20px;
}

/* UIVerticalAccordion .content -> UIPanel */
.UIVerticalAccordion > .UIAccordionItem > .content > .UIPanel {
  margin: -12px -24px;
}

/* UIDataTable -> UIButton */
.UIDataTable tbody .UIDataColumn .UIButton,
.UIPaginatedDataTable tbody .UIDataColumn .UIButton {
  height: 24px;
}

/********************************      組合樣式修正:END      ********************************/
/********************************      Var:START      ********************************/
#cart {
  --background-color-cart-btn-oversea: #ff0d49;
  --background-color-cart-btn-back: #fff;
  --background-color-cart-btn-back_hover: #fff;
  --border-color-cart-btn-back: var(--border-color-light);
  --font-color-btn-cart-btn-oversea: #fff;
  --font-color-cart-btn-back: var(--font-color);
  --font-color-cart-btn-back_hover: var(--font-color);
  --font-size-btn-cart-delete: 22px;
  --font-size-cart-summary-total: 1.1rem;
  --text-align-cart-item-quantity: center;
  --padding-cart-coupon: 24px 0 0 0;
  --padding-cart-freebieGift: 24px 0 0 0;
}

#checkout, #checkout_oversea {
  --border-checkout-summary: var(--border-color-dark);
  --font-color-checkout-delivery-method-fee: var(--color-label-hint);
  --padding-checkout-delivery-method-item: var(--padding-gutter);
  --padding-checkout-payment-item: var(--padding-gutter);
  --margin-checkout-payment-item-discount: 0 0 0 24px;
}

#pay {
  --border-pay-summary-total: var(--border-color-light);
  --font-size-pay-summary-total: 1.1rem;
}

#order {
  --border-order-header: var(--border-color-light);
  --border-order-summary-total: var(--border-color-light);
  --font-size-order-summary-total: 1.1rem;
  --padding-order-header: 0 0 12px 0;
  --margin-order-header: 0 0 12px 0;
}

#cart, #checkout, #checkout_oversea, #pay, #order {
  --font-size-price-symbol: var(--font-size-least);
  --font-size-product-bv: 0.8rem;
  --padding-price-symbol: 0 2px 0 0;
}
@media (max-width: 768px) {
  #cart, #checkout, #checkout_oversea, #pay, #order {
    --background-color-panel-bottom: #fff;
    --padding-panel-bottom: 12px 24px;
  }
}

#cart .symbol, #checkout .symbol, #checkout .symbol, #pay .symbol, #order .symbol {
  font-size: var(--font-size-price-symbol);
  padding: var(--padding-price-symbol);
}

#cart .cartItem .bv, #checkout #orderView .checkoutItem .bv, #checkout_oversea #orderView .checkoutItem .bv,
#pay .payItem .bv, #order .orderItem .bv {
  display: block;
  font-size: var(--font-size-product-bv);
}

#cart .cartItem .bv:before, #checkout #orderView .checkoutItem .bv:before, #checkout_oversea #orderView .checkoutItem .bv:before,
#pay .payItem .bv:before, #order .orderItem .bv:before {
  content: "(";
}

#cart .cartItem .bv:after, #checkout #orderView .checkoutItem .bv:after, #checkout_oversea #orderView .checkoutItem .bv:after,
#pay .payItem .bv:after, #order .orderItem .bv:after {
  content: ")";
}

@media (max-width: 768px) {
  #cart #cartView .UIPanelBottom,
  #checkout #checkoutView .UIPanelBottom,
  #checkout_oversea #checkoutView .UIPanelBottom,
  #pay #paymentView .UIPanelBottom {
    background-color: var(--background-color-panel-bottom);
    padding: var(--padding-panel-bottom);
    width: 100%;
    height: initial;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
  }
  #cart #cartView .UIPanelBottom .UIButton,
  #checkout #checkoutView .UIPanelBottom .UIButton,
  #checkout_oversea #checkoutView .UIPanelBottom .UIButton,
  #pay #paymentView .UIPanelBottom .UIButton {
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    width: 100%;
  }
}
/********************************      Var:END      ********************************/
/********************************      cart.html:START      ********************************/
/** 顯示可海外購物圖示:START **/
#cart #cartView .cartItem i.overseaShip:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f5b0";
  font-size: 1rem;
  padding-left: 5px;
}

#cart #cartView .UIPanelBottom .btnCartCheckoutOversea {
  background-color: var(--background-color-cart-btn-oversea);
  color: var(--font-color-btn-cart-btn-oversea);
}

#cart #cartView .UIPanelBottom .btnCartCheckoutOversea:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f5b0";
  font-size: 12px;
}

/** 顯示可海外購物圖示:END **/
#cart #cartView .UIPanelBottom .btnCartBack {
  background-color: var(--background-color-cart-btn-back);
  border: var(--border-color-cart-btn-back);
  color: var(--font-color-cart-btn-back);
}

#cart #cartView .UIPanelBottom .btnCartBack:hover {
  background-color: var(--background-color-cart-btn-back_hover);
  color: var(--font-color-cart-btn-back_hover);
}

/** cart:START **/
#cart #cartView .cartItem .quantity {
  text-align: var(--text-align-cart-item-quantity);
}

#cart #cartView .cartItem .btnDelete:before {
  font-size: var(--font-size-btn-cart-delete);
}

#cart #cartView .cartItem .freebieGift {
  padding: var(--padding-cart-freebieGift);
}

#cart #cartView .cartItem .coupon {
  padding: var(--padding-cart-coupon);
}

/** cart:END **/
/** summary:START **/
#cart #cartView .summary {
  float: right;
}

#cart #cartView .summary .UIForm td {
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  min-width: 120px;
}

#cart #cartView .summary .total {
  font-size: var(--font-size-cart-summary-total);
}

/** summary:END **/
/********************************      cart.html:END      ********************************/
/********************************      checkout.html(checkout_oversea)/checkoutView:START      ********************************/
/** deliveryMethodView:START **/
#checkout #checkoutView #deliveryMethodView .item,
#checkout_oversea #checkoutView #deliveryMethodView .item {
  padding: var(--padding-checkout-delivery-method-item);
}

#checkout #checkoutView #deliveryMethodView .fee,
#checkout_oversea #checkoutView #deliveryMethodView .fee {
  color: var(--font-color-checkout-delivery-method-fee);
}

/** deliveryMethodView:END **/
/** shipToView:START **/
#checkout #checkoutView #shipToView .terms #agree {
  margin-right: 6px;
}

#checkout #checkoutView #shipToView .terms .item:before {
  content: "[";
}

#checkout #checkoutView #shipToView .terms .item:after {
  content: "]";
}

/** shipToView:END **/
/** paymentView:START **/
#checkout #checkoutView #paymentView .item,
#checkout_oversea #checkoutView #paymentView .item {
  padding: var(--padding-checkout-payment-item);
}

#checkout #checkoutView #paymentView .item.discount,
#checkout_oversea #checkoutView #paymentView .item.discount {
  margin: var(--margin-checkout-payment-item-discount);
}

#checkout #checkoutView #paymentView .item.discount .UITextWrapper,
#checkout_oversea #checkoutView #paymentView .item.discount .UITextWrapper {
  width: 100px;
}

#checkout #checkoutView #paymentView .item.discount .UITextWrapper .UIText,
#checkout_oversea #checkoutView #paymentView .item.discount .UITextWrapper .UIText {
  text-align: right;
}

/** paymentView:END **/
/** checkoutItem:START **/
#checkout #checkoutView #orderView .checkoutItem .UIDataTable table > tbody > tr,
#checkout_oversea #checkoutView #orderView .checkoutItem .UIDataTable table > tbody > tr {
  background-color: transparent;
}

#checkout #checkoutView #orderView .checkoutItem .UIDataTable table > thead > tr > th,
#checkout_oversea #checkoutView #orderView .checkoutItem .UIDataTable table > thead > tr > th {
  border-bottom: none;
}

/** checkoutItem:END **/
/** summary:START * */
#checkout #checkoutView #orderView .summary,
#checkout_oversea #checkoutView #orderView .summary {
  border-top: var(--border-checkout-summary);
}

#checkout #checkoutView #orderView .summary .UIForm td,
#checkout_oversea #checkoutView #orderView .summary .UIForm td {
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}

/** summary:END * */
/********************************      checkout.html:END      ********************************/
/********************************      pay:START      ********************************/
/* checkoutItem:START */
/* checkoutItem:END */
/* summary:START */
#pay #paymentView .summary .UIForm td {
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}

#pay #paymentView .summary .total {
  border-top: var(--border-pay-summary-total);
  font-size: var(--font-size-pay-summary-total);
}

/* summary:END */
/********************************      paymentView:END      ********************************/
/********************************      orderView:START      ********************************/
#order #orderView .orderHeader {
  border-bottom: var(--border-order-header);
  padding: var(--padding-order-header);
  margin: var(--margin-order-header);
}

/** summary:START * */
#order #orderView .summary {
  border-top: var(--border-order-summary);
}

#order #orderView .summary .UIForm td {
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}

#order #orderView .summary .total {
  border-top: var(--border-order-summary-total);
  font-size: var(--font-size-order-summary-total);
}

/** summary:END * */
/********************************      orderView:END      ********************************/
/********************************      Var:START      ********************************/
#breadCrumbView {
  --margin-bread-crumb: var(--margin-webkit) 0 var(--margin-layout) 0;
}

#categoryMenuView {
  --border-category-menu-item_bottom: var(--border-color-dark);
  --font-color-category-menu-item_active: var(--font-color);
  --font-weight-category-menu-item_active: 900;
  --padding-category-menu: 0 var(--padding-layout) 0 0;
  --padding-category-menu-item: 6px 8px;
}

#productListView.grid {
  --background-color-product-list-item: #fff;
  --background-color-product-list-item-quick-ship: var(--color-main);
  --font-color-product-list-item-favorites: #d90101;
  --font-color-product-list-item-quick-ship: #fff;
  --font-color-product-list-item-price: #d90101;
  --font-color-product-list-item-list-price: #8e8e8e;
  --font-size-product-list-item-quick-ship: 12px;
  --font-size-product-list-item-favorites: 14px;
  --font-size-product-list-item-share: 14px;
  --font-size-product-list-item-add-cart: 22px;
  --font-size-product-list-item-product-note: var(--font-size-least);
  --height-product-list-item-product-info: 82px;
  --size-product-list-item-color_width: 8px;
  --size-product-list-item-color_height: 8px;
  --font-size-product-list-item-price: var(--font-size-base)
  --font-size-product-list-item-list-price: var(--font-size-small);
  --font-size-product-list-item-symbol: var(--font-size-least);
  --padding-product-list-item: var(--padding-webkit) 0 var(--padding-layout) 0;
  --padding-product-list-item-quick-ship: 3px 6px;
  --padding-product-list-item-product-info: 6px;
  --padding-product-list-item-product-info-colors: 3px;
  --padding-product-list-item-product-info-symbol: 0 2px 0 0;
}

#productView {
  --background-color-product-image: #fff;
  --background-color-product-promotion-item-type: #000;
  --background-color-product-info-preOrder: #000;
  --background-color-product-info-summary: transparent;
  --border-product-info-summary: var(--border-color-light);
  --border-product-info-general-note: var(--border-color-light);
  --font-color-product-promotion-item-type: var(--font-color-white);
  --font-color-product-info-preOrder: var(--font-color-white);
  --font-color-product-info-code: var(--main-color);
  --font-color-product-info-price: #d90101;
  --font-color-product-info-list-price: #8e8e8e;
  --font-color-product-info-likes-item: var(--font-color);
  --font-color-product-info-likes-item_icon: var(--color-main);
  --font-size-product-promotion-item-type: var(--font-size-small);
  --font-size-product-info-preOrder: var(--font-size-small);
  --font-size-product-info-brand: var(--font-size-small);
  --font-size-product-info-name: var(--font-size-large);
  --font-size-product-info-code: var(--font-size-small);
  --font-size-product-info-bv: var(--font-size-small);
  --font-size-product-info-price: var(--font-size-large);
  --font-size-product-info-list-price: var(--font-size-large);
  --font-size-product-info-price-symbol: var(--font-size-small);
  --font-size-product-info-summary: var(--font-size-small);
  --font-size-product-info-likes-item_icon: 18px;
  --padding-product-promotion-item: 0 0 var(--padding-webkit) 0;
  --padding-product-promotion-item-type: 0 8px;
  --padding-product-info-preOrder: 2px var(--padding-webkit);
  --padding-product-info-code: 2px 0 3px 6px;
  --padding-product-info-price-symbol: 0 3px 0 0;
  --padding-product-info-list-price: 0 0 0 22px;
  --padding-product-info-summary: 6px 3px;
  --padding-product-info-likes-item: 3px 18px 3px 0;
  --padding-product-info-general-note: var(--padding-webkit) 3px;
  --margin-product-image: 0 0 var(--margin-layout) 0;
  --margin-product-image-item: 0 0 var(--margin-webkit) 0;
  --margin-product-promotion-item-type: 0 6px 0 0;
  --margin-product-image-thumbnail-item: 2px 3px;
  --margin-product-info: 0 0 0 var(--margin-layout);
  --margin-product-info-preOrder: 0 6px 8px 0;
  --margin-product-info-name: 0 0 var(--margin-layout) 0;
  --margin-product-info-price: 0 0 var(--margin-webkit) 6px;
  --margin-product-info-summary: 0 0 var(--margin-layout) 0;
  --margin-product-info-shopping-cart: 0 0 var(--margin-webkit) 0;
  --margin-product-info-likes: 0 0 var(--margin-layout) 0;
  --margin-product-info-general-note: 0 0 var(--margin-layout) 0;
}
@media (max-width: 768px) {
  #productView {
    --background-color-product-shopping-cart: #fff;
    --border-top-product-info: var(--border-color-light);
    --border-product-shopping-cart: var(--border-color-light);
    --paddng-top-product-info: 12px;
    --margin-top-product-info: 12px;
  }
}

/********************************      Var:END      ********************************/
/********************************      breadCrumbView:START      ********************************/
#breadCrumbView {
  margin: var(--margin-bread-crumb);
}

#breadCrumbView > .container {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

/********************************      breadCrumbView:END      ********************************/
/********************************      leftContentView:START      ********************************/
#categoryMenuView {
  padding: var(--padding-category-menu);
}

#categoryMenuView > ul > li a {
  border-bottom: var(--border-category-menu-item_bottom);
  display: block;
  padding: var(--padding-category-menu-item);
  white-space: nowrap;
}

#categoryMenuView > ul ul > li a {
  padding-left: calc(var(--padding-category-menu-item) * 2);
}

#categoryMenuView > ul ul ul > li a {
  padding-left: calc(var(--padding-category-menu-item) * 3);
}

#categoryMenuView > ul > li a:hover,
#categoryMenuView > ul > li a.active {
  color: var(--font-color-category-menu-item_active);
  font-weight: var(--font-weight-category-menu-item_active);
}

/********************************      leftContentView:END      ********************************/
/********************************  productListView.grid:START  ********************************/
#productListView.grid #productItemView {
  background-color: var(--background-color-product-list-item);
  margin: var(--padding-product-list-item);
  position: relative;
}

#productListView.grid #productItemView .productImage {
  position: relative;
}

#productListView.grid #productItemView .productImage .favorites {
  position: absolute;
  left: 0;
  bottom: 14px;
}

#productListView.grid #productItemView .productImage .favorites .UILink:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  color: var(--font-color-product-list-item-favorites);
  font-size: var(--font-size-product-list-item-favorites);
  content: "\f004";
}

#productListView.grid #productItemView .productImage .favorites .UILink.joined:before {
  font-weight: 900;
}

#productListView.grid #productItemView .productImage .share {
  position: absolute;
  right: 0;
  bottom: 12px;
}

#productListView.grid #productItemView .productImage .share {
  font-size: var(--font-size-product-list-item-share);
}

#productListView.grid #productItemView .productImage .quickShip {
  position: absolute;
  right: 0;
  top: 12px;
}

#productListView.grid #productItemView .productImage .quickShip .UILabel {
  background-color: var(--background-color-product-list-item-quick-ship);
  color: var(--font-color-product-list-item-quick-ship);
  font-size: var(--font-size-product-list-item-quick-ship);
  padding: var(--padding-product-list-item-quick-ship);
}

#productListView.grid #productItemView .productImage .quickShip .UILabel:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f48b";
}

#productListView.grid #productItemView .productInfo {
  display: flex;
  /* 內容元素排列方式 [row: 左到右, row-reverse: row相反, column: 上到下, column-reverse: column相反]*/
  flex-direction: column;
  padding: var(--padding-product-list-item-product-info);
  min-height: var(--height-product-list-item-product-info);
}

#productListView.grid #productItemView .productInfo .productName {
  /* 設定內容超過幾行就會產生 ... */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  flex-grow: 1;
}

#productListView.grid #productItemView .productInfo .productColors {
  line-height: 0;
  padding-bottom: var(--padding-product-list-item-product-info-colors);
}

#productListView.grid #productItemView .productInfo .productColors .UIColor {
  width: var(--size-product-list-item-color_width);
  height: var(--size-product-list-item-color_height);
}

#productListView.grid #productItemView .productInfo .productPrice {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
}

#productListView.grid #productItemView .productInfo .productPrice .price {
  color: var(--font-color-product-list-item-price);
  font-size: var(--font-size-product-list-item-price);
  font-weight: 500;
  margin-right: 8px;
}

#productListView.grid #productItemView .productInfo .productPrice .listPrice {
  color: var(--font-color-product-list-item-list-price);
  font-size: var(--font-size-product-list-item-list-price);
  text-decoration: line-through;
}

#productListView.grid #productItemView .productInfo .productPrice .price .symbol,
#productListView.grid #productItemView .productInfo .productPrice .listPrice .symbol {
  font-size: var(--font-size-product-list-item-symbol);
  padding: var(--padding-product-list-item-product-info-symbol);
}

#productListView.grid #productItemView .productInfo .productCart {
  position: absolute;
  right: 3px;
  bottom: 3px;
}

#productListView.grid #productItemView .productInfo .productCart .addCart:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  font-size: var(--font-size-product-list-item-add-cart);
  content: "\f290";
}

#productListView.grid #productItemView .productInfo .productNote {
  display: none;
  font-size: var(--font-size-product-list-item-product-note);
}

/********************************  productListView.grid:END  ********************************/
/********************************  productView:START  ********************************/
#productView .productImage {
  position: relative;
  margin: var(--margin-product-image);
}

#productView .productImage .image {
  background-color: var(--background-color-product-image);
  position: relative;
  margin: var(--margin-product-image-item);
}

#productView .productImage .image .UIImage {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

#productView .productImage #thumbnail {
  margin: var(--margin-product-image-thumbnail-item);
}

#productView .promotionList > .UIGroup {
  padding: var(--padding-product-promotion-item);
}

#productView .promotionList .type {
  background-color: var(--background-color-product-promotion-item-type);
  color: var(--font-color-product-promotion-item-type);
  font-size: var(--font-size-product-promotion-item-type);
  padding: var(--padding-product-promotion-item-type);
  margin: var(--margin-product-promotion-item-type);
}

#productView .productInfo {
  margin: var(--margin-product-info);
}

#productView .productInfo .productName {
  margin: var(--margin-product-info-name);
}

#productView .productInfo .preOrder {
  background-color: var(--background-color-product-info-preOrder);
  color: var(--font-color-product-info-preOrder);
  display: inline-block;
  padding: var(--padding-product-info-preOrder);
  margin: var(--margin-product-info-preOrder);
  font-size: var(--font-size-product-info-preOrder);
}

#productView .productInfo .productName .brand {
  font-size: var(--font-size-product-info-brand);
}

#productView .productInfo .productName .name {
  display: block;
  font-size: var(--font-size-product-info-name);
}

#productView .productInfo .productName .code {
  display: none;
  color: var(--font-color-product-info-code);
  font-size: var(--font-size-product-info-code);
  padding: var(--padding-product-info-code);
}

#productView .productInfo .productName .bv {
  display: block;
  font-size: var(--font-size-product-info-bv);
}

#productView .productInfo .productName .bv:before {
  content: "(";
}

#productView .productInfo .productName .bv:after {
  content: ")";
}

#productView .productInfo .productPrice {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  margin: var(--margin-product-info-price);
}

#productView .productInfo .productPrice .price {
  color: var(--font-color-product-info-price);
  font-size: var(--font-size-product-info-price);
}

#productView .productInfo .productPrice .listPrice {
  color: var(--font-color-product-info-list-price);
  font-size: var(--font-size-product-info-list-price);
  text-decoration: line-through;
  padding: var(--padding-product-info-list-price);
}

#productView .productInfo .productPrice .symbol {
  font-size: var(--font-size-product-info-price-symbol);
  padding: var(--padding-product-info-price-symbol);
}

#productView .productInfo .shoppingCart {
  margin: var(--margin-product-info-shopping-cart);
}

#productView .productInfo .productSummary {
  text-align: justify;
  text-justify: inter-ideograph;
  -ms-text-justify: inter-ideograph; /*IE9*/
  -moz-text-align-last: justify; /*Firefox*/
  -webkit-text-align-last: justify; /*Chrome*/
  background-color: var(--background-color-product-info-summary);
  border-top: var(--border-product-info-summary);
  border-bottom: var(--border-product-info-summary);
  font-size: var(--font-size-product-info-summary);
  padding: var(--padding-product-info-summary);
  margin: var(--margin-product-info-summary);
}

/** likes(favorites/share):START **/
#productView .productInfo .likes {
  margin: var(--margin-product-info-likes);
}

#productView .productInfo .likes .favorites {
  color: var(--font-color-product-info-likes-item);
  display: inline-block;
  padding: var(--padding-product-info-likes-item);
}

#productView .productInfo .likes .favorites .UILink:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  color: var(--font-color-product-info-likes-item_icon);
  font-size: var(--font-size-product-info-likes-item_icon);
  content: "\f004";
}

#productView .productInfo .likes .favorites .UILink.joined:before {
  font-weight: 900;
}

#productView .productInfo .likes .share {
  display: inline-block;
  padding: var(--padding-product-info-likes-item);
}

#productView .productInfo .likes .share .UIShareButton {
  color: var(--font-color-product-info-likes-item);
}

#productView .productInfo .likes .share .UIShareButton:before {
  padding-right: 6px;
  color: var(--font-color-product-info-likes-item_icon);
  font-size: var(--font-size-product-info-likes-item_icon);
}

/** likes(favorites/share):END **/
#productView .productInfo .generalNote {
  border-top: var(--border-product-info-general-note);
  padding-top: var(--margin-product-info-general-note);
  padding: var(--padding-product-info-general-note);
}

/** 彈出預覽大圖:START **/
#product #imagePreview {
  display: none;
}

#product #imagePreview.pop {
  background-color: #fff;
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

/** 彈出預覽大圖:END **/
@media (max-width: 768px) {
  #productView .productInfo {
    border-top: var(--border-top-product-info);
    padding-top: var(--paddng-top-product-info);
    margin-top: var(--margin-top-product-info);
    margin-left: 0;
  }
  #productView .productInfo .shoppingCart {
    display: flex;
    /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
    justify-content: space-between;
    -webkit-justify-content: space-between;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-color: var(--background-color-product-shopping-cart);
    border: var(--border-product-shopping-cart);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 3px;
    padding: 6px;
    width: calc(100% - 6px);
    z-index: 999;
  }
  #productView .productInfo .shoppingCart > .UIGroup.icon {
    display: flex;
    /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
    align-items: center;
    -webkit-align-items: center;
    width: 100px;
  }
  #productView .productInfo .shoppingCart > .UIGroup.button {
    display: flex;
    /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
    align-items: center;
    -webkit-align-items: center;
    width: calc(100% - 100px);
  }
  #productView .productInfo .shoppingCart .icon .home,
  #productView .productInfo .shoppingCart .icon .cart {
    text-align: center;
    width: 45px;
  }
  #productView .productInfo .shoppingCart .icon i {
    display: block;
    font-size: 24px;
  }
  #productView .productInfo .shoppingCart .icon span {
    font-size: 10px;
    font-weight: 400;
    vertical-align: bottom;
  }
  #productView .productInfo .shoppingCart .button {
    /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
    justify-content: space-between;
    -webkit-justify-content: space-between;
  }
  #productView .productInfo .shoppingCart .button .UIButton {
    height: 38px;
  }
}
/********************************  productView:END  ********************************/
/********************************      Var Definition      ********************************/
/** list:START **/
#productListView.list #productItemView {
  display: flex;
  /* 內容上下對齊  */
  align-items: stretch;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 12px 12px;
  position: relative;
  margin-bottom: 24px;
}

#productListView.list #productItemView:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

#productListView.list #productItemView .productImage {
  padding: 6px;
  overflow: hidden;
}

#productListView.list #productItemView .productInfo {
  padding: 8px 8px;
  margin-right: 48px;
}

#productListView.list #productItemView .productInfo .productName {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 12px;
}

#productListView.list #productItemView .productInfo .productName .brand {
  display: block;
  font-size: 14px;
}

#productListView.list #productItemView .productInfo .productCart {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  /* 內容元素排列方式 [row: 左到右, row-reverse: row相反, column: 上到下, column-reverse: column相反]*/
  flex-direction: column;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  width: 56px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

#productListView.list #productItemView .productInfo .productCart a {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  width: 100%;
  height: 100%;
}

#productListView.list #productItemView .productInfo .productCart i {
  font-size: 22px;
}

#productListView.list #productItemView .productInfo .productCart .addFavorites {
  display: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#productListView.list #productItemView .productInfo .productPrice .price {
  color: #d90101;
  display: inline-block;
  font-size: var(--font-size-h4);
  font-weight: 500;
  padding-right: 24px;
}

#productListView.list #productItemView .productInfo .productPrice .listPrice {
  color: #78909c;
  display: inline-block;
  font-size: 1.2rem;
  text-decoration: line-through;
}

#productListView.list #productItemView .productSummary {
  padding: 12px 56px 8px 12px;
}

/** list:END **/
/********************************  productListView:END  ********************************/
/********************************      rewardCheckoutView:START      ********************************/
#rewardCheckoutView #productView .productInfo .productPrice {
  text-align: left;
}

#rewardCheckoutView #productView .productInfo .productPrice .point {
  display: inline-block;
}

/********************************      rewardCheckoutView:END      ********************************/
/********************************      rewardSuccess:START      ********************************/
.rewardSuccess {
  text-align: center;
}

.rewardSuccess > .UILabel {
  display: block;
  padding: 24px;
}

.rewardSuccess > .UIForm {
  display: table;
  padding: 24px;
  margin: 0 auto;
}

/********************************      rewardSuccess:END      ********************************/
/********************************      Var:START      ********************************/
#header_favorites {
  --size-favorites-close-icon: 24px;
  --size-favorites-icon: 16px;
  --font-color-favorites-product-price: #d90101;
  --font-size-favorites-product-price: 14px;
  --padding-favorites-panel-content: var(--padding-webkit);
  --padding-favorites-icon: 6px;
}

/********************************      Var:END      ********************************/
#header_favorites.UIPanel .content {
  overflow-x: auto;
  padding: var(--padding-favorites-panel-content);
}

#header_favorites .closeFavorites:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  font-size: var(--size-favorites-close-icon);
  content: "\f2d3";
}

#header_favorites .item .info .price {
  position: absolute;
  bottom: 6px;
}

#header_favorites .item .info .price .productPrice {
  color: var(--font-color-favorites-product-price);
  display: inline-block;
  font-size: var(--font-size-favorites-product-price);
}

#header_favorites .item .info .action {
  position: absolute;
  right: 12px;
  bottom: 3px;
}

#header_favorites .item .info .action .addCart:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  font-size: var(--size-favorites-icon);
  padding: var(--padding-favorites-icon);
  content: "\f290";
}

#header_favorites .item .info .action .delete:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  font-size: var(--size-favorites-icon);
  padding: var(--padding-favorites-icon);
  content: "\f1f8";
}

/********************************      Var:START      ********************************/
#header_cart {
  --size-cart-close-icon: 24px;
  --size-cart-icon: 16px;
  --font-color-cart-product-price: #d90101;
  --font-size-cart-product-price: 14px;
  --padding-cart-panel-content: var(--padding-webkit);
  --padding-cart-icon: 6px;
}

/********************************      Var:END      ********************************/
#header_cart {
  z-index: 9999;
}

#header_cart.UIPanel .content {
  padding: var(--padding-cart-panel-content);
}

#header_cart .closeCart:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  font-size: var(--size-cart-close-icon);
  content: "\f2d3";
}

#header_cart .item .info .price {
  position: absolute;
  bottom: 6px;
}

#header_cart .item .info .price .productPrice {
  color: var(--font-color-cart-product-price);
  display: inline-block;
  font-size: var(--font-size-cart-product-price);
}

#header_cart .item .info .action {
  position: absolute;
  right: 12px;
  bottom: 3px;
}

#header_cart .item .info .action .addCart:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  font-size: var(--size-cart-icon);
  padding: var(--padding-cart-icon);
  content: "\f290";
}

#header_cart .item .info .action .delete:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  font-size: var(--size-cart-icon);
  padding: var(--padding-cart-icon);
  content: "\f1f8";
}

/********************************      Var:START      ********************************/
#header {
  --background-color-header-top-line: transparent;
  --background-color-header-top-line-cart-quantity: var(--color-main);
  --border-color-header-top-line: var(--border-color-light);
  --font-color-header-top-line-link-button: var(--font-color);
  --font-size-header-top-line-link-button: var(--font-size-small);
  --font-color-header-top-line-cart-quantity: #fff;
  --font-size-header-top-line-cart-quantity: var(--font-size-smaller);
  --padding-header-top-line-link-button: var(--padding-widget);
  --padding-header-top-line-nickname: 0 var(--padding-widget);
  --padding-header-top-line-cart-quantity: 0 3px;
  --margin-header-top-line-cart-quantity: 0 var(--padding-widget) 0 0;
  --height-header-top-logo: 58px;
  --height-header-top-logo_xs: 42px;
  --padding-header-top: var(--margin-webkit) 0;
  --margin-header-top-logo: 0 18px 0 0;
  --background-color-header-top_sticky: #fff;
  --height-header-top-logo_sticky: 36px;
  --padding-header-top-menu-item: 24px 12px 12px 12px;
  --background-color-header_sticky: #fff;
  --border-header-top-menu-navigation: var(--border-color-dark);
  --border-header-top-menu-navigation-tool: var(--border-color-light);
  --size-header-top-icon: 24px;
  --height-header-top-icon: 48px;
  --height-header-top-icon_sticky: 36px;
  --padding-header-top_sticky: 6px 0;
  --padding-header-top-icon: 0 6px 0 0;
  --background-color-left-menu: #fff;
}

/********************************      Var:END      ********************************/
/********************************      header.html/headerView:START      ********************************/
/** 預設不顯示語言 **/
#header #headerView #topLineView #topLineMenuView .language,
#header #headerView #topView #iconView .icon.language {
  display: none;
}

/********************************      header.html/headerView:END      ********************************/
/********************************      header.html/topLineView:START      ********************************/
#header #headerView #topLineView {
  background-color: var(--background-color-header-top-line);
  border-bottom: var(--border-color-header-top-line);
}

#header #headerView #topLineView .container {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

#header #headerView #topLineView #topLineInfoView,
#header #headerView #topLineView #topLineMenuView {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
}

#header #headerView #topLineView .UILinkButton {
  color: var(--font-color-header-top-line-link-button);
  font-size: var(--font-size-header-top-line-link-button);
  padding: var(--padding-header-top-line-link-button);
}

#header #headerView #topLineView #topLineInfoView .phone:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f095";
}

#header #headerView #topLineView #topLineInfoView .mail:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f0e0";
}

#header #headerView #topLineView #topLineMenuView .login:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f090";
}

#header #headerView #topLineView #topLineMenuView .register:before {
  content: "/ ";
}

#header #headerView #topLineView #topLineMenuView .nickname {
  padding: var(--padding-header-top-line-nickname);
}

#header #headerView #topLineView #topLineMenuView .member:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f2bb";
}

#header #headerView #topLineView #topLineMenuView .reservation:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f133";
}

#header #headerView #topLineView #topLineMenuView .contact:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f075";
}

#header #headerView #topLineView #topLineMenuView .favorites:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f004";
}

#header #headerView #topLineView #topLineMenuView .cart:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f290";
}

#header #headerView #topLineView #topLineMenuView .cart #cartQty {
  border-radius: 12px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  background-color: var(--background-color-header-top-line-cart-quantity);
  color: var(--font-color-header-top-line-cart-quantity);
  font-size: var(--font-size-header-top-line-cart-quantity);
  padding: var(--padding-header-top-line-cart-quantity);
  margin: var(--margin-header-top-line-cart-quantity);
}

#header #headerView #topLineView #topLineMenuView .search:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f002";
}

#header #headerView #topLineView #topLineMenuView .logout:before {
  content: "| ";
}

#header #headerView #topLineView #topLineMenuView .logout:after {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-left: 2px;
  content: "\f011";
}

/********************************      header.html/topLineView:END      ********************************/
/********************************      header.html/topView:START      ********************************/
#header #headerView #topView {
  padding: var(--padding-header-top);
}

#header #headerView #topView .container {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
}

#header #headerView #topView #logoView .UIImage {
  margin: var(--margin-header-top-logo);
  height: var(--height-header-top-logo);
}

#header #headerView #topView #logoView .UILabel {
  line-height: var(--height-header-top-logo);
}

#header #headerView #topView #iconView .UILink:before {
  font-size: var(--size-header-top-icon);
  width: var(--size-header-top-icon);
  height: var(--size-header-top-icon);
  line-height: var(--height-header-top-icon);
  padding: var(--padding-header-top-icon);
}

.UIApp.sticky #header #headerView #topView #iconView .icon:before {
  line-height: var(--height-header-top-icon_sticky);
}

#header #headerView #topView #iconView .language {
  display: none;
}

#header #headerView #topView #iconView .language:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f0ac";
}

#header #headerView #topView #iconView .cart:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f290";
}

#header #headerView #topView #iconView .cart > #cartQty2 { /* 手機版: 顯示購物車數量 */
  border-radius: 12px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  background-color: var(--background-color-header-top-line-cart-quantity);
  color: var(--font-color-header-top-line-cart-quantity);
  font-size: var(--font-size-header-top-line-cart-quantity);
  padding: var(--padding-header-top-line-cart-quantity);
  margin: var(--margin-header-top-line-cart-quantity);
}

#header #headerView #topView #navBack {
  display: none;
  width: 24px;
  height: 48px;
  line-height: 48px;
  z-index: 999;
}

#header #headerView #topView #navBack:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f053";
  font-size: 18px;
}

@media (min-width: 768px) {
  /* 產生每個選單後面一條分格線 */
  /*#header #headerView #topView #menuView .UIHorizontalNavigation > .menu > ul > li:before {
      content: "|";
      font-size: 12px;
      color: #ccc;
  }

  #header #headerView #topView #menuView .UIHorizontalNavigation > .menu > ul:first-of-type > li:first-child:before {
      content: "";
  }*/
  #header #headerView #topView #menuView .UIHorizontalNavigation > .menu > ul > li > a {
    padding: var(--padding-header-top-menu-item);
  }
  /* sticky */
  .UIApp.sticky #header #headerView #topView {
    background-color: var(--background-color-header-top_sticky);
    border-bottom: var(--border-color-header-top-line);
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 9999;
  }
  .UIApp.sticky #header #headerView #topView #logoView .UIImage {
    height: var(--height-header-top-logo_sticky);
  }
}
@media (max-width: 768px) {
  #header #headerView #topView #logoView {
    text-align: center;
    margin: 0 auto;
  }
  #header #headerView #topView #logoView .UIImage {
    height: var(--height-header-top-logo_xs);
  }
  #header #headerView #topView #menuView .UIHorizontalNavigation .navigation-wrapper {
    border-right: var(--border-header-top-menu-navigation);
  }
  #header #headerView #topView #menuView .UIHorizontalNavigation .navigation-wrapper #tools {
    border-bottom: var(--border-header-top-menu-navigation-tool);
  }
  #header #headerView #topView #menuView .UIHorizontalNavigation .navigation-wrapper #tools .UILink {
    display: inline-block;
    width: 100%;
  }
  #header #headerView #topView #menuView .UIHorizontalNavigation .navigation-wrapper #tools i {
    display: block;
    font-size: 18px;
    padding: 6px 0 0 0;
    text-align: center;
  }
  #header #headerView #topView #menuView .UIHorizontalNavigation .navigation-wrapper #tools span {
    display: block;
    font-size: 0.8em;
    text-align: center;
    padding: 3px 0 3px 0;
  }
  /**
  #header #headerView #topView #menuView .UIHorizontalNavigation .navigation-wrapper ul#tools > li {
      display: inline-block;
  }

  #header #headerView #topView #menuView .UIHorizontalNavigation .navigation-wrapper ul#tools > li i {
      display: block;
      font-size: 18px;
      padding: 6px 0 0 0;
      text-align: center;
  }

  #header #headerView #topView #menuView .UIHorizontalNavigation .navigation-wrapper ul#tools > li span {
      display: block;
      font-size: 0.8em;
      text-align: center;
      padding: 3px 0 3px 0;
  }**/
  /* sticky */
  .UIApp.sticky #header #headerView {
    background-color: var(--background-color-header_sticky);
    border: var(--border-color-header-top-line);
    padding: var(--padding-header-top_sticky);
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 99;
  }
  .UIApp.sticky #header #headerView #topView {
    padding: 0;
  }
  .UIApp.sticky #header #headerView #topView #navBack {
    display: none !important;
  }
  .UIApp.sticky #header #headerView #topView #navToggle,
  .UIApp.sticky #header #headerView #topView #iconView {
    z-index: 999;
  }
  .UIApp.sticky #header #headerView #searchView {
    background-color: #fff;
    padding-top: var(--margin-webkit);
    padding-bottom: var(--margin-webkit);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
  }
  .UIApp.sticky #header #headerView #searchView .UISearchWrapper {
    width: 70%;
    margin: 0 auto;
  }
}
/********************************      header.html/topView:END      ********************************/
/********************************      header.html/searchView:START      ********************************/
/********************************      header.html/searchView:END      ********************************/
/********************************      header.html/leftMenuView:START      ********************************/
#header #leftMenuView {
  background-color: var(--background-color-left-menu);
  width: 0;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
}

#header #leftMenuView {
  /* 設定所有樣式變更都有轉場效果 */
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -o-transition: all 0.8s;
}

/********************************      header.html/leftMenuView:END      ********************************/
/********************************      Var:START      ********************************/
#index {
  --background-color-index-last-announcement: #eee;
  --font-size-index-category-product-more: 16px;
  --font-size-index-feature-title: var(--font-size-large);
  --font-size-index-feature-content: var(--font-size-small);
  --size-index-feature-icon: 36px;
  --text-align-index-last-announcement: center;
  --text-align-index-feature-title: center;
  --text-align-index-feature-content: center;
  --padding-index-last-announcement-slider: var(--padding-webkit) 0;
  --padding-index-category-product-more: 0 0 0 6px;
  --padding-index-feature-icon: var(--padding-webkit);
  --padding-index-feature-title: 3px 0 0 6px;
  --margin-index-block: var(--padding-layout) 0;
  --margin-index-carouse: var(--margin-index-block) 0;
  --margin-index-ad: var(--margin-index-block) 0;
  --margin-index-last-announcement: var(--margin-index-block) 0;
  --margin-index-custom-content: var(--margin-index-block) 0;
  --margin-index-latest-product: var(--margin-index-block) 0;
  --margin-index-product-block: var(--margin-index-block) 0;
  --margin-index-category-product: var(--margin-index-block) 0;
  --margin-index-feature: var(--margin-index-block) 0;
}

#quickMenuView {
  --background-color-quick-menu: #f8f8f8;
  --padding-quick-menu-item: var(--padding-webkit);
  --margin-quick-menu: var(--margin-webkit) 0;
}

/********************************      Var:END      ********************************/
/********************************  index/carouseView:START  ********************************/
#index #carouseView {
  margin: var(--margin-index-carouse);
}

#index #carouseView .carouse {
  position: relative;
}

#index #carouseView .carouse .UIContent {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media (max-width: 768px) {
  #index #carouseView .container {
    padding-left: 0;
    padding-right: 0;
  }
}
/********************************  index/carouseView:END  ********************************/
/********************************  index/adView:START  ********************************/
#index #adView {
  margin: var(--margin-index-ad);
}

#index #adView .ad {
  position: relative;
}

#index #adView .ad .UIContent {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/********************************  index/adView:END  ********************************/
/********************************  index/latestAnnouncementView:START  ********************************/
#index #latestAnnouncementView {
  background-color: var(--background-color-index-last-announcement);
  margin: var(--margin-index-last-announcement);
  text-align: var(--text-align-index-last-announcement);
}

#index #latestAnnouncementView .UISlider {
  padding: var(--padding-index-last-announcement-slider);
}

/********************************  index/latestAnnouncementView:END  ********************************/
/********************************  index/indexContentView:START  ********************************/
#index #indexContentView {
  margin: var(--margin-index-custom-content);
}

/********************************  index/indexContentView:END  ********************************/
/********************************  index/latestProductView:START  ********************************/
#index #latestProductView {
  margin: var(--margin-index-latest-product);
}

/********************************  index/latestProductView:END  ********************************/
/********************************  index/productBlockView:START  ********************************/
#index #productBlockView {
  margin: var(--margin-index-product-block);
}

#index #productBlockView.group {
  display: flex;
}

#index #productBlockView.group .caption {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
}

/********************************  index/productBlockView:END  ********************************/
/********************************  index/categoryProductView:START  ********************************/
#index #categoryProductView {
  margin: var(--margin-index-category-product);
}

#index #categoryProductView .UIPanel.noBorder > .top > .UIPanelBar .more:after {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  font-size: var(--font-size-index-category-product-more);
  padding: var(--padding-index-category-product-more);
  content: "\f105";
}

/********************************  index/categoryProductView:END  ********************************/
/********************************  index/featureView:START  ********************************/
#index #featureView {
  margin: var(--margin-index-feature);
}

#index #featureView .feature {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
}

#index #featureView .feature .icon {
  font-size: var(--size-index-feature-icon);
  padding-right: var(--padding-index-feature-icon);
}

#index #featureView .feature .title {
  display: block;
  font-size: var(--font-size-index-feature-title);
  text-align: var(--text-align-index-feature-title);
  padding: var(--padding-index-feature-title);
}

#index #featureView .feature .UIGroup .content {
  display: block;
  font-size: var(--font-size-index-feature-content);
  text-align: var(--text-align-index-feature-content);
}

/********************************  index/featureView:END  ********************************/
/********************************  index/homePopupView:START  ********************************/
#index #cboxOverlay {
  background-color: #000;
}

/********************************  index/homePopupView:END  ********************************/
/********************************      quickMenuView:START      ********************************/
#quickMenuView {
  background-color: var(--background-color-quick-menu);
  margin: var(--margin-quick-menu);
}

#quickMenuView > ul {
  white-space: nowrap;
  overflow-x: visible;
  overflow-y: hidden;
}

#quickMenuView > ul::-webkit-scrollbar {
  display: none;
}

#quickMenuView > ul > li {
  display: inline-block;
}

#quickMenuView > ul > li a {
  display: inline-block;
  padding: var(--padding-quick-menu-item);
}

/********************************      quickMenuView:START      ********************************/
/********************************      Var Definition      ********************************/
@media (max-width: 768px) {
  .buttonMaskXXX { /* 修正控制按鈕固定在底下造成部分畫面顯示不完整的問題 */
    padding-bottom: 42px;
  }
}
/********************************  recentlyViewedProductView:START  ********************************/
#recentlyViewedProductView #productListView.grid #productItemView .productDetail {
  background-color: rgba(0, 0, 0, 0.3);
  min-height: initial;
  padding: 0 6px;
  position: absolute;
  bottom: 0;
  left: 0;
}

#recentlyViewedProductView #productListView.grid #productItemView .productDetail .UILabel {
  color: #fff;
}

/********************************  recentlyViewedProductView:END  ********************************/
/********************************      Var Definition      ********************************/
/********************************      memberCenterView:START      ********************************/
#memberCenterView {
  margin: 24px auto;
}
@media (max-width: 768px) {
  #memberCenterView {
    margin: 0 auto;
  }
}

#memberCenterView #menu > .top > .UIGroupListBar .menuMemberCenterHome:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f015";
  font-size: 14px;
}

/********************************      memberCenterView:END      ********************************/
/********************************      memberHomeView:START      ********************************/
#memberCenterView #memberHomeView .myProfile.UIPanel .content {
  padding-bottom: 12px;
}

#memberCenterView #memberHomeView .myProfile .photo {
  position: relative;
}

#memberCenterView #memberHomeView .myProfile .photo .myCard:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  content: "\f029";
  background-color: #fff;
  font-size: 20px;
  line-height: 20px;
  padding: 1px;
  position: absolute;
  bottom: -2px;
  right: -3px;
}

#memberCenterView #memberHomeView .myProfile .info .setting:after {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f4fe";
  font-size: 18px;
  padding-left: 12px;
}

#memberCenterView #memberHomeView .myProfile .info .setting {
  color: #08b;
}

/** extraInfo:START **/
#memberCenterView #memberHomeView .myProfile .extraInfo .UIButton {
  margin-top: 12px;
  height: 28px;
  line-height: 28px;
}

/** extraInfo:END **/
/** myPocket:START **/
#memberCenterView #memberHomeView .myProfile .myPocket {
  /*
  margin-top: $margin-webkit;
  margin-bottom: $margin-webkit;*/
}

#memberCenterView #memberHomeView .myProfile .myPocket > .UILink {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #08b;
  color: #fff;
  display: inline-block;
  padding: 0 6px;
  margin-top: 12px;
  margin-right: 12px;
}
@media (max-width: 768px) {
  #memberCenterView #memberHomeView .myProfile .myPocket > .UILink {
    margin-right: 8px;
  }
}

#memberCenterView #memberHomeView .myProfile .myPocket > .UILink .value {
  display: inline-block;
  padding: 0 3px;
}

#memberCenterView #memberHomeView .myProfile .myPocket > .UILink.certified {
  background-color: #1e7994;
}

#memberCenterView #memberHomeView .myProfile .myPocket > .UILink.certified.not {
  background-color: #f32228;
}

/** myPocket:END **/
#memberCenterView #memberHomeView .myProfile .shareURL .UILabel {
  display: block;
  font-size: 0.8rem;
  text-align: center;
}

/** myOrder:START **/
#memberCenterView #memberHomeView .myOrder > .content {
  padding: 12px;
}

#memberCenterView #memberHomeView .myOrder ul {
  display: table;
  width: 100%;
}

#memberCenterView #memberHomeView .myOrder ul li {
  display: table-cell;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

#memberCenterView #memberHomeView .myOrder ul li:last-child {
  border-right: 0;
}

#memberCenterView #memberHomeView .myOrder ul li .UILink {
  display: block;
  text-align: center;
}

@media (max-width: 768px) {
  #memberCenterView #memberHomeView .myOrder ul li .UILink:before {
    display: block;
  }
}

#memberCenterView #memberHomeView .myOrder .unpaid:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f555";
  font-size: 16px;
}

#memberCenterView #memberHomeView .myOrder .notReceived:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f0d1";
  font-size: 16px;
}

#memberCenterView #memberHomeView .myOrder .completed:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f1da";
  font-size: 16px;
}

#memberCenterView #memberHomeView .myOrder .service:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f7d9";
  font-size: 16px;
}

/** myOrder:END **/
/** latestProductView:START **/
#memberCenterView #memberHomeView #latestProductView {
  margin-bottom: 24px;
}

/** latestProductView:END **/
/** recentlyViewedProductView:START **/
#memberCenterView #memberHomeView #recentlyViewedProductView {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 24px;
  margin-bottom: 24px;
}

#memberCenterView #memberHomeView #recentlyViewedProductView.UIPanel > .top > .caption > span:after {
  content: ".....";
}

/** recentlyViewedProductView:END **/
/* 手機版 */
#memberCenterView.mobile #memberHomeView .myProfile {
  background-color: #e7e7e7;
  padding: 24px;
  margin: 0px -15px 24px -15px;
}

/********************************      memberHomeView:END      ********************************/
/********************************      member_qrcode.html:START      ********************************/
#member_qrcode .socialSharing {
  padding-left: 24px;
}

#member_qrcode .socialSharing .UIForm > .caption:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f1e0";
  padding-right: 6px;
}

#member_qrcode .socialSharing .UIForm > .UIFormItem {
  margin-left: 12px;
}

.UILink.copy:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f0c5";
  font-size: 14px;
}

.UILink.downloadQR:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f029";
  font-size: 14px;
}

/********************************      member_qrcode.html:END      ********************************/
/********************************      member_card.html:START      ********************************/
#member_card .myCard {
  width: 100%;
  margin-bottom: 12px;
}

#member_card .barcode {
  padding-left: 12px;
}

#member_card .barcode .UIForm > .caption {
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  height: 26px;
}

#member_card .memberId {
  display: block;
  text-align: center;
  font-size: 0.8rem;
}

#member_card .gradeName {
  display: block;
  text-align: center;
  font-weight: 600;
}

/********************************      member_card.html:END      ********************************/
/********************************      member_order_detail:START      ********************************/
#member_order_detail #orderView .orderHeader {
  background-color: #eee;
  margin-bottom: 24px;
}

#member_order_detail #orderView .orderItem {
  margin-bottom: 24px;
}

/* summary:START */
#member_order_detail #orderView .summary .UIForm td {
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}

#member_order_detail #orderView .summary .separator {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

#member_order_detail #orderView .summary .total {
  color: #2b2b2b;
  font-size: 1.2rem;
  font-weight: 600;
}

#member_order_detail #orderView .summary .totalPay {
  color: #d90101;
  font-size: 1.6rem;
  font-weight: 600;
}

/* summary:END */
@media (min-width: 1200px) {
  #member_order_detail #orderView .orderShipTo {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    padding-left: 24px;
  }
}
@media (max-width: 768px) {
  #member_order_detail #orderView .orderShipTo {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
}

#member_order_detail #orderView .orderShipTo .trackingNumber {
  color: #006677;
  font-size: 1.2rem;
}

/********************************      member_order_detail:END      ********************************/
/********************************      customer_money:START      ********************************/
#customer_money .balance #money:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f2e8";
  font-size: 18px;
}

/********************************      customer_money:END      ********************************/
/********************************      login.html:START      ********************************/
#login {
  --background-color-login-control-link: #eee;
  --width-login-panel: 480px;
  --padding-login-panel: var(--padding-page);
  --padding-login-control-link: calc(var(--padding-webkit) / 2) var(--padding-webkit);
}
@media (max-width: 768px) {
  #login {
    --width-login-panel: initial;
  }
}

#login #loginView.UIPanel {
  max-width: var(--width-login-panel);
  margin: var(--margin-page) auto;
}

#login #loginView.UIPanel > .content {
  padding: var(--padding-login-panel);
}

#login #loginView .control {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
}

#login #loginView .control .UILink {
  padding: var(--padding-login-control-link);
}

#login #loginView .control .UILink:hover {
  background-color: var(--background-color-login-control-link);
}

/********************************      login.html:END      ********************************/
/********************************      register.html/register_success.html:START      ********************************/
#register {
  --width-register-panel: 600px;
  --padding-register-panel: var(--padding-page);
}
@media (max-width: 768px) {
  #register {
    --width-login-panel: initial;
  }
}

#register #registerView.UIPanel {
  max-width: var(--width-register-panel);
  margin: var(--margin-page) auto;
}

#register #registerView.UIPanel > .content {
  padding: var(--padding-register-panel);
}

#register #registerView .btnCertifiedCode:after { /* 顯示計數值 */
  content: attr(data-content);
}

#register #registerSuccessView .UILabel.successMessage {
  display: block;
  font-size: var(--font-size-larger);
  padding: var(--margin-layout);
  text-align: center;
  white-space: normal;
  word-break: break-all;
}

#register #registerSuccessView .UILabel.successMessageHint {
  display: block;
  text-align: center;
  margin-bottom: var(--margin-page);
}

/* 手機版: START */
@media (max-width: 768px) {
  #register #registerView .UIForm .UIFormItem > th {
    display: none;
  }
}
/********************************      register.html/register_success.html:END      ********************************/
/********************************      register.html(lineBot)/register_success.html:START      ********************************/
/********************************      register.html(lineBot)/register_success.html:END      ********************************/
/********************************      language_selected.html:START      ********************************/
#language_selected .UILinkButton {
  border-radius: 12px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: block;
  text-align: center;
  padding: calc(var(--padding-webkit) / 2);
  margin-bottom: var(--margin-webkit);
}

#language_selected .UILinkButton:hover {
  background-color: var(--color-main);
  color: var(--font-color-white);
}

/********************************      language_selected.html:END      ********************************/
/********************************      account_security_setting.html:END      ********************************/
#account_security_setting .btnSecurityCertifiedCode:after {
  content: attr(data-content);
}

/********************************      account_security_setting.html:END      ********************************/
/********************************  announcement_view:START  ********************************/
#announcement_view {
  padding: 24px;
}

#announcement_view .title {
  border-bottom: 1px solid #eee;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

#announcement_view .info .postDate,
#announcement_view .info .organizer {
  display: inline-block;
  padding-right: 24px;
  margin-bottom: 12px;
}

#announcement_view .info .postDate .UILabel:first-child:after,
#announcement_view .info .organizer .UILabel:first-child:after {
  content: " : ";
}

/********************************  announcement_view:END  ********************************/
/********************************      blog.html:START      ********************************/
#blog {
  --font-size-blog-list-item-title: var(--font-size-larger);
  --padding-blog-list-item: var(--padding-layout) var(--padding-page) var(--padding-layout) 0;
  --padding-blog-list-item-image: var(--padding-layout);
  --padding-blog-list-item-title: var(--padding-webkit);
  --padding-blog-list-item-info: var(--padding-webkit);
  --padding-blog-grid-item-title: var(--padding-webkit);
}

/** list:START **/
#blog #blogView .list #blogItemView {
  padding: var(--padding-blog-list-item);
}

#blog #blogView .list #blogItemView .image {
  padding-right: var(--padding-blog-list-item-image);
}

#blog #blogView .list #blogItemView .title {
  font-size: var(--font-size-blog-list-item-title);
  margin-bottom: var(--padding-blog-list-item-title);
}

#blog #blogView .list #blogItemView .preface {
  /* 設定內容超過幾行就會產生 ... */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

#blog #blogView .list #blogItemView .more {
  margin-bottom: var(--padding-blog-list-item-info);
}

#blog #blogView .list #blogItemView .info {
  margin-bottom: var(--padding-blog-list-item-info);
}

/** list:END **/
/** grid:START **/
#blogView .grid #blogItemView .title {
  padding: var(--padding-blog-grid-item-title);
}

/** grid:END **/
/********************************      blog.html:END      ********************************/
/********************************      post.html:START      ********************************/
#post {
  --font-size-post-title: var(--font-size-largest);
  --padding-post-title: var(--padding-webkit);
  --padding-post-info: var(--padding-layout);
  --padding-post-post: var(--padding-layout);
  --padding-post-social-sharing: var(--padding-layout);
}

#post #postView .title {
  display: block;
  font-size: var(--font-size-post-title);
  margin-bottom: var(--padding-post-title);
}

#post #postView .info {
  margin-bottom: var(--padding-post-info);
}

#post #postView .post {
  margin-bottom: var(--padding-post-post);
}

#post #postView .socialSharing {
  margin-bottom: var(--padding-post-social-sharing);
}

/********************************      post.html:END      ********************************/
/********************************      /include/blog_nav.html:START      ********************************/
#blog_nav {
  --font-size-blog-nav-recent-item-date: var(--font-size-small);
  --padding-blog-nav-recent-item: var(--padding-webkit);
}

#blog_nav .recentPost .recentPostItem {
  margin-bottom: var(--padding-blog-nav-recent-item);
}

#blog_nav .recentPost .recentPostItem .postDate {
  font-size: var(--font-size-blog-nav-recent-item-date);
}

/********************************      /include/blog_nav.html:END      ********************************/
/********************************      contact_us.html:START      ********************************/
#contact_us {
  --width-contactus-panel: 640px;
  --padding-contactus-panel: var(--padding-page);
  --font-size-contactus-follow-item: 28px;
}
@media (max-width: 768px) {
  #contact_us {
    --width-login-panel: initial;
  }
}

#contact_us #contactUsView {
  max-width: var(--width-contactus-panel);
  margin: var(--margin-page) auto;
}

#contact_us #contactUsView.UIPanel > .content {
  padding: var(--padding-contactus-panel);
}

#contact_us #contactUsView .serviceInformation {
  text-align: center;
  margin-bottom: var(--margin-page);
}

#contact_us #contactUsView #followUsView {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  margin-bottom: var(margin-layout);
}

#contact_us #contactUsView #followUsView > ul > li {
  display: inline-block;
}

#contact_us #contactUsView #followUsView > ul > li:after {
  content: "|";
  padding: 0 var(--padding-layout);
}

#contact_us #contactUsView #followUsView > ul > li:last-child:after {
  content: "";
  display: none;
}

#contact_us #contactUsView #followUsView > ul > li a:before {
  font-size: --font-size-contactus-follow-item;
}

#contact_us #contactUsView .successMessage {
  text-align: center;
  font-size: var(--font-size-large);
  padding: var(--padding-page);
}

/* 手機版: START */
@media (max-width: 768px) {
  #contact_us #contactUsView #contactForm.UIForm .UIFormItem th {
    display: none;
  }
}
/* 手機版: END */
/********************************      contact_us.html:END      ********************************/
/********************************      store_info.html:START      ********************************/
#store_info {
  --width-store-info-panel: 640px;
  --padding-store-info-panel: var(--padding-page);
}

#store_info #storeView {
  max-width: var(--width-store-info-panel);
  margin: var(--margin-page) auto;
}

#store_info #storeView.UIPanel > .content {
  padding: var(--padding-store-info-panel);
}

#store_info #storeView .description {
  margin-bottom: var(--margin-page);
}

#store_info #storeView .storeList .info .name {
  font-size: 1.2rem;
  margin-bottom: var(--margin-webkit);
}

#store_info #storeView .storeList .info .phone:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f095";
  font-size: 12px;
  padding-right: 12px;
}

#store_info #storeView .storeList .info .mail:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f1fa";
  font-size: 12px;
  padding-right: 12px;
}

#store_info #storeView .storeList .info .address:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f3c5";
  font-size: 12px;
  padding-right: 12px;
}

#store_info #storeView .storeList .info .address .map:before {
  content: " [";
}

#store_info #storeView .storeList .info .address .map:after {
  content: "]";
}

#store_info #storeView .storeList .info .description:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f05a";
  font-size: 12px;
  padding-right: 12px;
}

#store_info #storeView .UILine {
  margin: var(--margin-layout) 0;
}

/* 手機版: START */
@media (max-width: 768px) {
  #store_info #storeView .storeList .UIFixedLayout.responsive > div:first-child {
    width: 20% !important;
    padding-right: var(--padding-webkit);
  }
  #store_info #storeView .storeList .UIFixedLayout.responsive > div:last-child {
    width: 80% !important;
  }
}
/* 手機版: END */
/********************************      store_info.html:END      ********************************/
/********************************      footer.html:START      ********************************/
#footer {
  --border-footer-copyright: var(--border-color-light);
  --background-color-footer-bottom: #fbfafa;
  --background-color-footer-copyright: #a8a8a8;
  --color-footer-bottom-site: #6a6a6a;
  --color-footer-bottom-title: #757575;
  --color-footer-bottom-content: #a1a1a1;
  --color-footer-bottom-description: var(--font-color-hint);
  --color-footer-bottom-link: var(--font-color);
  --color-footer-copyright: var(--font-color-hint);
  --font-size-footer-bottom-site: var(--font-size-larger);
  --font-size-footer-bottom-title: var(--font-size-large);
  --font-size-footer-bottom-content: var(--font-size-small);
  --font-size-footer-bottom-follow: 32px;
  --font-size-footer-copyright: var(--font-size-least);
  --font-size-footer-copyright-icon: 24px;
  --margin-footer: var(--margin-page);
}

#footer #footerView {
  margin-top: var(--margin-footer);
}

/********************************      footer.html:END      ********************************/
/********************************      footer.html/bottomView.none:START      ********************************/
#footer #footerView > .none > #bottomView .description {
  color: --color-footer-bottom-description;
}

#footer #footerView > .none > #bottomView #followUsView {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
}

#footer #footerView > .none > #bottomView #followUsView ul > li {
  display: inline-block;
  padding: var(--padding-webkit);
}

#footer #footerView > .none > #bottomView #followUsView .UILink:before {
  font-size: var(--font-size-footer-bottom-follow);
}

/********************************      footer.html/bottomView.none:END      ********************************/
/********************************      footer.html/copyrightView.none:END      ********************************/
#footerView > .none #copyrightView .copyright {
  border-top: var(--border-footer-copyright);
  color: var(--color-footer-copyright);
  font-size: var(--font-size-footer-copyright);
  text-align: center;
  padding: var(--padding-webkit) 0;
}

/********************************      footer.html/copyrightView.none:END      ********************************/
/********************************      footer.html/bottomView.lite:START      ********************************/
#footer #footerView > .lite #bottomView {
  background-color: var(--background-color-footer-bottom);
  padding: var(--padding-webkit) 0;
  text-align: center;
  position: relative;
}

#footer #footerView > .lite #bottomView .linkGroup {
  display: inline-block;
  padding: var(--padding-webkit);
}

#footer #footerView > .lite #bottomView .linkGroup i {
  font-size: var(--font-size-footer-bottom-follow);
}

#footer #footerView > .lite #bottomView .linkGroup .UILinkButton {
  color: var(--color-footer-bottom-link);
}

#footer #footerView > .lite #bottomView .description {
  color: var(--color-footer-bottom-description);
}

#footer #footerView > .lite #bottomView #followUsView {
  background-color: var(--background-color-footer-bottom);
  text-align: center;
  position: relative;
}

#footer #footerView > .lite > #bottomView #followUsView > .caption,
#footerView > .lite > #bottomView #followUsView > .content {
  display: inline-block;
  height: initial;
}

#footer #footerView > .lite > #bottomView #followUsView ul {
  margin: 0 var(--margin-layout);
}

#footer #footerView > .lite > #bottomView #followUsView ul > li {
  display: inline-block;
  padding: calc(var(--padding-webkit) / 1.5);
}

#footer #footerView > .lite > #bottomView #followUsView .UILink:before {
  font-size: var(--font-size-footer-bottom-follow);
}

/********************************      footer.html/bottomView.lite:END      ********************************/
/********************************      footer.html/copyrightView.lite:START      ********************************/
#footerView > .lite #copyrightView .copyright {
  border-top: var(--border-footer-copyright);
  color: var(--color-footer-copyright);
  font-size: var(--font-size-footer-copyright);
  text-align: center;
  padding: var(--padding-webkit) 0;
}

/** copyrightView:END **/
/********************************      footer.html/copyrightView.lite:END      ********************************/
/********************************      footer.html/bottomView.full:START      ********************************/
#footer #footerView > .full {
  background-color: var(--background-color-footer-bottom);
  position: relative;
}

#footer #footerView > .full #bottomView {
  padding: var(--margin-layout);
}

#footer #footerView > .full #bottomView .site {
  color: var(--color-footer-bottom-site);
  font-size: var(--font-size-footer-bottom-site);
  margin-bottom: var(--margin-layout);
}

#footer #footerView > .full #bottomView .linkGroup {
  margin-bottom: var(--margin-layout);
}

#footer #footerView > .full #bottomView #linkGroupView .linkGroup .title {
  color: var(--color-footer-bottom-title);
  display: block;
  font-size: var(--font-size-footer-bottom-title);
  margin-bottom: var(--margin-webkit);
}

#footer #footerView > .full #bottomView #linkGroupView .linkGroup .UILinkButton {
  color: var(--color-footer-bottom-content);
  display: block;
  font-size: var(--font-size-footer-bottom-content);
  white-space: nowrap;
  padding-bottom: var(--margin-webkit);
}

#footer #footerView > .full #bottomView #followUsView > .caption {
  color: var(--color-footer-bottom-title);
  display: block;
  font-size: var(--font-size-footer-bottom-title);
  height: initial;
  margin-bottom: var(--margin-webkit);
}

#footer #footerView > .full > #bottomView #followUsView ul li {
  margin-bottom: calc(var(--margin-webkit) / 3);
}

#footer #footerView > .full > #bottomView #followUsView .UILink:before {
  text-align: center;
  width: 1.25em;
  font-size: 20px;
  margin-left: var(--margin-webkit);
  margin-right: calc(var(--margin-webkit) / 2);
}

#footer #footerView > .full > #bottomView #followUsView .UILink:after {
  color: var(--color-footer-bottom-content);
  font-size: var(--font-size-footer-bottom-content);
}

#footer #footerView > .full > #bottomView #followUsView .UILink.facebook:after {
  content: "Facebook";
}

#footer #footerView > .full > #bottomView #followUsView .UILink.line:after {
  content: "Line";
}

#footer #footerView > .full > #bottomView #followUsView .UILink.weixin:after {
  content: "WeChat";
}

#footer #footerView > .full > #bottomView #followUsView .UILink.linkedin:after {
  content: "LinkedIn";
}

#footer #footerView > .full > #bottomView #followUsView .UILink.youtube:after {
  content: "Youtube";
}

#footer #footerView > .full > #bottomView #followUsView .UILink.instagram:after {
  content: "Instagram";
}

#footerView > .full > #bottomView #followUsView .UILink.twitter:after {
  content: "Twitter";
}

#footer #footerView > .full > #bottomView #followUsView .UILink.weibo:after {
  content: "Weibo";
}

@media (max-width: 768px) {
  #footer #footerView > .full #bottomView #linkGroupView .linkGroup .title {
    cursor: pointer;
  }
  #footer #footerView > .full #bottomView #linkGroupView .linkGroup .content {
    display: none;
    padding-left: var(--margin-webkit);
  }
  #footer #footerView > .full #bottomView #linkGroupView .linkGroup:hover .content {
    display: block;
  }
}
/********************************      footer.html/bottomView.full:END      ********************************/
/********************************      footer.html/copyrightView.full:END      ********************************/
#footer #footerView > .full #copyrightView {
  background-color: var(--background-color-footer-copyright);
}

#footer #footerView > .full #copyrightView > .container {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

#footer #footerView > .full #copyrightView .copyright {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  color: var(--color-footer-copyright);
  font-size: var(--font-size-footer-copyright);
  width: 100%;
  padding: var(--margin-webkit) 0;
}

#footer #footerView > .full #copyrightView .copyright .UIImage {
  height: 24px;
  margin-right: var(--margin-webkit);
}

#footer #footerView > .full #copyrightView ul {
  display: inline-block;
  padding-top: var(--margin-webkit);
}

#footer #footerView > .full #copyrightView ul i {
  color: var(--color-footer-copyright);
}

#footer #footerView > .full #copyrightView ul li {
  display: inline-block;
  padding-left: var(--margin-layout);
}

#footer #footerView > .full #copyrightView ul li i {
  display: inline-block;
  font-size: var(--font-size-footer-copyright-icon);
}

/********************************      footer.html/copyrightView.full:END      ********************************/
/********************************      nav_bar.inc:START      ********************************/
.UIApp #topIcon {
  display: none;
  bottom: 80px;
}

.UIApp.sticky #topIcon {
  display: block;
}

/********************************      nav_bar.inc:END      ********************************/
/********************************      reservation_store.html:START      ********************************/
#reservation_store {
  --border-reservation-store: var(--border-color-light);
  --font-size-reservation-store-name: var(--font-size-large);
  --font-weight-reservation-store-name: var(--font-size-large);
  --padding-reservation-store: var(--padding-webkit);
  --padding-reservation-store-bottom: 42px;
  --padding-reservation-store-name: var(--padding-gutter);
  --min-width-reservation-store-button: 200px;
}

#reservation_store .storeListView .store {
  border-bottom: var(--border-reservation-store);
  padding-bottom: var(--padding-reservation-store);
  margin-bottom: var(--padding-reservation-store);
}

#reservation_store .storeListView .store .info {
  margin-bottom: var(--padding-reservation-store-bottom);
}

#reservation_store .storeListView .store .info .name {
  font-size: var(--font-size-reservation-store-name);
  font-weight: var(--font-weight-reservation-store-name);
  margin-bottom: var(--padding-reservation-store-name);
}

#reservation_store .storeListView .store .info .phone:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f8d3";
}

#reservation_store .storeListView .store .info .address:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f3c5";
}

#reservation_store .storeListView .store .info .reservation {
  position: absolute;
  bottom: 0;
}

#reservation_store .storeListView .store .info .reservation .UIButton {
  min-width: var(--min-width-reservation-store-button);
}

/********************************      reservation_store:END      ********************************/
/********************************      reservation:START      ********************************/
#reservation .shoppingCart .button .btnReserve {
  width: 100%;
}

/********************************      reservation:END      ********************************/
/********************************      reservation_success:START      ********************************/
#reservation_success {
  --text-align-reservation-success-message: center;
  --padding-reservation-success: 48px auto;
  --padding-reservation-success-message: var(--padding-page) 0;
}

#reservation_success #reservationSuccessView {
  max-width: 640px;
  margin: var(--padding-reservation-success);
}

#reservation_success #reservationSuccessView .successMessage {
  text-align: var(--text-align-reservation-success-message);
  padding: var(--padding-reservation-success-message);
}

/********************************      reservation_success:END      ********************************/
/*-----------------------------------------------------------------------------------
	Beez
	About: Wonderpace Inc.
	Author: Beez 2024/11/11/10:28
-----------------------------------------------------------------------------------*/
body {
  font-family: "Microsoft JhengHei", PingFang, STHeiti, sans-serif, serif, "Noto Sans CJK TC";
}

/*定義CIS顏色*/
:root {
  --main-color: #f95d00;
  --second-color: black;
  --3nd-color: #a2a2a2;
  --addtoCart-color: #825726;
  /*定義pannel gutter*/
  --pannel-gutter: 36px;
  --pannel-padding: 24px;
}

/*定義UILabel樣式*/
.UILabel, .UILabel.footnote {
  --font-weight-label-footnote: 400;
  font-weight: 400;
}

/*上下頁*/
.UIDataTable #pageControl {
  justify-content: center;
}

/*上下頁*/
.UIDataTable #pageControl > li > a.active,
.UIPaginatedDataTable #pageControl > li > a.active,
.UIPaginatedRepeater #pageControl > li > a.active,
.UIPaginatedGridLayout #pageControl > li > a.active {
  background-color: var(--3nd-color);
}

/*上頁*/
.UIDataTable #pageControl > li > #prev:hover,
.UIPaginatedDataTable #pageControl > li > #prev:hover,
.UIPaginatedRepeater #pageControl > li > #prev:hover,
.UIPaginatedGridLayout #pageControl > li > #prev:hover {
  background-color: #f4f4f4;
}

/*下頁*/
.UIDataTable #pageControl > li > #next:hover,
.UIPaginatedDataTable #pageControl > li > #next:hover,
.UIPaginatedRepeater #pageControl > li > #next:hover,
.UIPaginatedGridLayout #pageControl > li > #next:hover {
  background-color: #f4f4f4;
}

/*定義按鈕顏色*/
.UIButton {
  --background-color-button: black;
}

.UIMenuGroupWrapper .UIMenuGroup a.active {
  border: 1px solid rgba(0, 0, 0, 0.2);
}

/*定義文字間距*/
div.UIContent {
  letter-spacing: 0;
}

#centerView #contentView {
  min-height: 55vh;
}

/*****產品列表樣式：START*****/
/*產品列表金額及價錢最小高度*/
#productListView.grid #productItemView .productDetail {
  min-height: 72px;
}

/*商品列表最加最愛及分享*/
#productListView.grid #productItemView .productImage .share {
  right: 12px;
  bottom: 14px;
}

#productListView.grid #productItemView .productImage .favorites {
  left: initial;
  right: 45px;
}

#productListView.grid #productItemView .productImage .share,
#productListView.grid #productItemView .productImage .favorites {
  background: rgba(255, 255, 255, 0.75);
  width: 25px;
  height: 25px;
  border-radius: 32px;
  border: 1px solid #ececec;
  display: flex;
  justify-content: center;
  align-items: center;
}

#productListView.grid #productItemView .productImage .favorites .UILink:before,
#productListView.grid #productItemView .UIShareButton:before {
  color: #000;
}

/*快速到貨*/
#productListView.grid #productItemView .productImage .quickShip {
  right: 6px;
  top: 6px;
}

/*快速到貨*/
#productListView.grid #productItemView .productImage .quickShip .UILabel {
  border-radius: 20px;
  padding: 4px 10px;
  background-color: rgba(76, 0, 133, 0.73);
}

#productListView.grid #productItemView .productDetail .productColors {
  height: 15px;
}

#productListView.grid #productItemView .productInfo {
  background-color: #fff;
}

#productListView.grid #productItemView .productInfo .productColors .UIColor {
  width: 16px;
  height: 2px;
  border: 0.05px solid rgba(0, 0, 0, 0.15);
  margin-bottom: 3px;
}

#productListView.grid #productItemView .productDetail .productName {
  -webkit-line-clamp: 2;
  flex-grow: 0;
}

#productListView.grid #productItemView .productInfo .productCart {
  right: 6px;
}

/*定義產品列表價格樣式*/
#productListView.grid {
  --font-color-product-list-item-price: #b02222;
}

/*****產品列表樣式：END*****/
/***************header:start****************/
/*****topLineView:start*****/
#header {
  --padding-header-top-line-link-button: 10px;
}

/*調整登入/註冊空間*/
#header #headerView #topLineView .UILinkButton.login {
  padding-right: 3px;
}

#header #headerView #topLineView .UILinkButton.register {
  padding-left: 0;
}

/*會員圖示*/
#header #headerView #topLineView #topLineMenuView .member:before {
  content: "\f007";
}

/*購物車圖示*/
#header #headerView #topLineView #topLineMenuView .cart #cartQty,
#header #headerView #topView #iconView .cart > #cartQty2 {
  background: var(--main-color);
}

#header #headerView #topLineView #topLineMenuView .cart #cartQty {
  border-radius: 3px;
  font-size: 0.86rem;
  margin-left: 2px;
  padding: 1px 6px;
}

/*登出圖示*/
#header #headerView #topLineView #topLineMenuView .logout:after {
  content: "\f2f5";
}

/*****topLineView:END*****/
/*header：電腦版:START*/
/*視覺微調Topview位置*/
@media (min-width: 768px) {
  /**logo位置**/
  #header #headerView #topView #logoView {
    margin-left: calc(var(--margin-webkit) * 1.3);
  }
  /**logo大小**/
  #header #headerView #topView #logoView .UIImage {
    max-height: 68px;
  }
  /*header sticky時樣式*/
  .UIApp.sticky #header #headerView #topView {
    box-shadow: 0 15px 15px -1px rgba(0, 0, 0, 0.1);
    border-top: 3px solid var(--main-color);
  }
  .UIApp.sticky #header #headerView #topView #logoView .UIImage {
    max-height: 36px;
  }
  /*修正sticky時logo偏上*/
  #header #headerView #topView .container {
    align-items: center;
  }
  /*第一層選單樣式*/
  #header #headerView #topView #menuView .UIHorizontalNavigation > .menu > ul > li > a {
    padding: 10px 12px;
    font-size: 1.1em;
    font-weight: 400;
  }
  /*第二層選單樣式*/
  .UIHorizontalNavigation > .menu .level1 > ul {
    border: 0;
    border-top: 2px solid var(--main-color);
    box-shadow: 0 15px 15px -1px rgba(0, 0, 0, 0.1);
    font-weight: 400;
  }
  .UIHorizontalNavigation > .menu .level1 > ul a:hover {
    color: var(--main-color);
  }
  /*第二層選單：取消橫列*/
  .UIHorizontalNavigation > .menu li.level2.submenu {
    display: block !important;
  }
  /*第三層選單：隱藏*/
  .UIHorizontalNavigation > .menu li.level3 {
    display: none;
  }
}
/*header：電腦版:END*/
/*header：手機版:START*/
@media (max-width: 768px) {
  #header #headerView #topView .container {
    align-items: center;
  }
  /*logo置中*/
  #header #headerView #topView #logoView .UIImage {
    margin: auto;
  }
  /*購物車圖示*/
  #header #headerView #topView #iconView .icon > i {
    font-size: 26px;
  }
  /*選單:start*/
  #headerView #menuView .level1 {
    border-bottom: 1px solid #e9e9e9;
  }
  .UIHorizontalNavigation > .menu > ul li.submenu > a:first-child {
    border-bottom: 0;
    width: 94%;
  }
  .UIHorizontalNavigation > .menu .level1 > ul {
    border: 0;
    border-top: 2px solid var(--main-color);
  }
  .UIHorizontalNavigation > .menu > ul a {
    padding: 14px;
    font-weight: 600;
  }
  .UIHorizontalNavigation > .menu > ul li.submenu > .open {
    top: 6px;
    right: 6px;
  }
  .UIHorizontalNavigation > .menu > ul > li.submenu .open:before {
    font-weight: 600;
  }
  /*第二層展開後樣式*/
  #headerView #menuView .level2 {
    background-color: #818181;
  }
  #headerView #menuView .level2 a {
    color: #fff;
  }
}
/*選單:end*/
/*header：手機版:END*/
/**************header:end****************/
/******WIDGET:START******/
/***最愛widget:START***/
#header #leftMenuView {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
  z-index: 99999;
}

#leftMenuView .top {
  margin-bottom: 0 !important;
  font-size: 1.1em;
  background-color: #e7e7e7;
  border-bottom: 0;
  height: 42px;
}

#leftMenuView .UIFixedLayout {
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}

#leftMenuView .UIFixedLayout .image {
  border: 1px solid #e4e4e4;
}

#leftMenuView .item .info .price .productPrice {
  color: #333;
  font-weight: 600;
}

#header_cart .item .info .price,
#header_favorites .item .info .price {
  bottom: 10px;
}

#leftMenuView .item .info .action {
  bottom: 6px;
}

#leftMenuView .item .info .action .addCart:before {
  color: rgb(194, 78, 46);
  font-size: 18px;
}

#header_favorites .item .info .action .delete:before,
#header_cart .item .info .action .delete:before {
  font-size: 18px;
  content: "\f00d";
}

#leftMenuView #pageControl {
  justify-content: center;
  margin-top: 36px;
}

/***最愛widget:END***/
/******WIDGET:START******/
/**************首頁:start****************/
/*首頁：廣告輪播*/
#carouseView {
  margin-bottom: 48px;
}

/*首頁：廣告輪播滿版*/
#carouseView .container {
  max-width: 100%;
  padding: 0;
}

/*首頁：廣告輪播圖片滿版*/
#carouseView .UIImage.responsive {
  width: 100%;
}

/*首頁：廣告輪播箭頭樣式*/
.swiper-button-next, .swiper-rtl .swiper-button-prev,
.swiper-button-prev, .swiper-rtl .swiper-button-next {
  color: rgba(255, 255, 255, 0.7) !important;
}

/*首頁：輪播點點樣式*/
.swiper-pagination-bullet {
  width: 28px;
  height: 2px;
  border-radius: 0;
}

/*首頁：廣告區*/
#index #adView {
  margin: 36px;
}

/*首頁：廣告圖間距*/
#index #adView .ad {
  margin-bottom: 12px;
  text-align: center;
}

/*首頁：廣告區圖片最大高度*/
#index #adView .UIImage.responsive {
  max-height: 420px;
  border-radius: 25px;
}

/*首頁：產品列表標題與產品間距*/
#index .UIPanel > .top {
  margin-bottom: 20px;
}

/*首頁：產品主題區塊間距*/
#productBlockView .UIPanel {
  margin-bottom: var(--pannel-gutter);
}

/*首頁：最新商品與產品主題區塊標題*/
#productBlockView .caption > span,
#latestProductView .caption > span,
#categoryProductView .UIPanel > .top > .caption {
  font-size: var(--font-size-largest);
  font-weight: 400;
}

/***首頁：產品主題群組樣式:START***/
#index #productBlockView.group {
  padding: var(--pannel-padding) 0;
  background-color: #f8f8f8;
}

/**主題群組頁籤樣式**/
#index .UITabHost.default > ul.tabs {
  border: 0;
  padding-bottom: 12px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#index #productBlockView .UITabHost.default > ul.tabs > li {
  border: 1px solid #ddd !important;
  border-radius: 40px !important;
  padding: 2px 8px 4px;
  background: #fff;
  min-width: 120px;
  margin: 0 3px;
}

#index #productBlockView .UITabHost.default > ul.tabs > li > a {
  justify-content: center;
}

#index #productBlockView .UITabHost.default > ul.tabs > li.active,
#index #productBlockView .UITabHost.default > ul.tabs > li.active a {
  background: initial;
}

#index #productBlockView .UITabHost.default > ul.tabs > li.active {
  background-color: rgba(0, 0, 0, 0.5);
}

#index #productBlockView .UITabHost.default > ul.tabs > li.active a {
  color: #fff;
}

#index #productBlockView.group .caption {
  padding-bottom: 30px;
}

#index #productBlockView #productListView.grid #productItemView {
  background-color: rgba(255, 255, 255, 0);
}

/*產品輪播樣式***/
#productListView .swiper-slide {
  margin: 0 8px;
}

/***首頁：產品主題群組樣式:END***/
/*首頁：產品分類更多按鈕*/
#categoryProductView .UIPanel.noBorder > .top > .UIPanelBar {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  padding: 2px 12px;
}

/*首頁：產品分類更多按鈕*/
#categoryProductView .UIPanel.noBorder > .top > .UIPanelBar a {
  color: white;
}

/*首頁：產品分類更多按鈕*/
#index #categoryProductView .UIPanel.noBorder > .top > .UIPanelBar .more:after {
  padding-left: 6px;
}

#productListView.grid #productItemView {
  margin-bottom: 36px;
}

/***iPad直式：START***/
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .container, .container-md, .container-sm {
    max-width: 991px;
  }
  .grid-7 > .UIGroup:first-child {
    width: 43%;
  }
  .col-md-9 {
    width: 100%;
  }
  #productListView.grid #productItemView .productInfo .productCart {
    display: none;
  }
  #productListView.grid #productItemView .productInfo .productCart .addCart {
    color: var(--addtoCart-color);
  }
  #header #headerView #topView #logoView {
    margin-left: 0;
  }
  #header #headerView #topView #logoView .UIImage {
    height: auto;
    max-height: 78px;
  }
}
/***iPad直式：END***/
/*首頁：手機版:START*/
@media (max-width: 768px) {
  #carouseView {
    margin-bottom: 36px;
  }
  .grid-7 > .UIGroup:first-child {
    width: 100%;
  }
  /*產品主題群組頁籤*/
  #index #productBlockView .UITabHost.default > ul.tabs > li {
    min-width: 90px;
    margin: 6px 3px;
  }
}
/*首頁：手機版:end*/
/**************首頁:END****************/
/**************次頁:start*************/
/*次頁:左側選單:start*/
#categoryMenuView > ul > li a {
  border-bottom: 1px solid #f0f0f0;
}

#categoryMenuView > ul ul > li a {
  padding-left: 26px;
}

#categoryMenuView > ul > li a:hover,
#categoryMenuView > ul > li a {
  font-weight: 400;
}

#categoryMenuView > ul > li > a:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f105";
}

#categoryMenuView > ul > li > a.active:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f107";
}

#categoryMenuView > ul > li a:hover,
#categoryMenuView > ul > li a.active {
  color: #a82c4b;
  font-weight: 400;
}

/*左側選單:end*/
#breadCrumbView {
  background: #f5f5f5;
  padding: 12px;
}

/*次頁:end*/
/**********頁尾:start**********/
/*頁尾:標題*/
#footer #footerView > .full #bottomView #linkGroupView .linkGroup .title {
  color: #3e3e3e;
  font-size: 1.2em;
}

/*頁尾:版權*/
#footer #footerView > .full #copyrightView {
  background-color: #f0f0f0;
}

/*頁尾：項目連結色*/
#footer #footerView > .full #bottomView #linkGroupView .linkGroup .UILinkButton {
  color: #222;
  font-weight: 400;
  color: #6b6b6b;
}

/*頁尾：隱藏關注文字*/
#footer #footerView > .full #bottomView #followUsView > .caption {
  display: none;
}

#footerView #bottomView #followUsView .UILink:after {
  visibility: hidden;
}

#followUsView > .content > .UITag {
  display: flex;
  justify-content: center;
}

#followUsView > .content > .UITag > .UITag {
  width: 40px;
}

#footer #footerView > .full #copyrightView .copyright {
  color: #555;
  font-weight: 400;
  justify-content: center;
}

/**********頁尾:END**********/
/**********手機版快速鍵:start***********/
.UITabBar.default .tabs {
  background: black;
}

.UITabBar.default .tabs .active I,
.UITabBar.default .tabs .active span {
  color: white;
}

/**********手機版快速鍵:END***********/
/**********產品明細頁:start***********/
/*促銷活動*/
#productView .promotionList .type {
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 3px;
}

/*預購*/
#productView .productInfo .preOrder {
  border-radius: 3px;
  font-weight: 300;
  font-size: 0.96em;
  padding: 3px 8px;
  letter-spacing: 2px;
  margin-bottom: 8px;
  background-color: rgba(0, 0, 0, 0.45);
}

#productView .productInfo .productPrice .price {
  margin-right: 12px;
}

#productView .productInfo .productPrice .listPrice {
  font-size: var(--font-size-product-info-price-symbol);
  color: var(--font-color-product-info-list-price);
}

.UIMenuGroupWrapper .UIMenuGroup a {
  border-radius: 2px;
}

/*加入購物車*/
#productPopupBox #product_popup .UIButton.addBuy,
#productView .productInfo .shoppingCart .UIButton.addBuy {
  background: #e30000;
}

/*分享及加入最愛-底*/
#productView .productInfo .likes .favorites .UIButton,
#productView .productInfo .likes .share .UIShareButton {
  background: transparent;
  border: 0;
}

/*產品明細頁：分享及加入最愛*/
#productView .productInfo .likes .favorites .UILink:before,
#productView .productInfo .likes .share .UIShareButton:before {
  color: rgb(5, 164, 177);
  font-size: 18px;
  padding-right: 8px;
}

/*產品說明頁籤：START*/
#product #productView .UITabHost.default > ul.tabs {
  text-align: center;
}

.UITabHost.default > ul.tabs > li {
  border: 0;
}

.UITabHost.default > ul.tabs > li.active {
  border-top: 0;
  border-bottom: var(--border-tab-host-tabs_active);
}

/*產品說明頁籤：END*/
/*產品說明邊界*/
#product .UITabHost.default > .tabContent {
  padding-left: 12px;
  padding-right: 12px;
}

/***產品明細頁：手機版START***/
@media (max-width: 768px) {
  #productView .productInfo {
    margin: 6px;
  }
}
/***產品明細頁：手機版END***/
/***********產品明細頁:END***********/
/****彈出視窗：加入購物車*****/
#colorbox #product_popup .UIPanelBottom {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
}

/**********購物車及訂單:start********/
/*結帳步驟指引*/
.UIHorizontalWizard {
  margin-bottom: 24px;
}

.UIHorizontalWizard .items {
  border-bottom: 4px solid #000;
}

/*共用：右方結帳滙總*/
#checkout .checkoutItem.UIPanel > .content,
#pay .summary.UIPanel > .content,
#order .summary.UIPanel > .content {
  padding: 12px;
}

/*共用：右方結帳滙總*/
#pay .summary,
#order .summary {
  border: 2px solid #000;
  border-radius: 3px;
}

#cartView .UIPanelBottom {
  border-top: 2px solid black;
}

/*結帳item 空間調整*/
.UIDataTable .UIDataColumn {
  margin: initial !important;
  padding: 12px 8px !important;
}

#checkout #checkoutView .summary {
  width: 100%;
}

/*送貨方式&付款方式panel邊框*/
#checkoutView #deliveryMethodView,
#checkoutView #shipToView,
#checkoutView #paymentView,
#paymentView .UIPanel,
#orderView .UIPanel,
#checkout #orderView {
  border: 1px solid #a3a3a3;
  border-radius: 3px;
}

/*送貨方式&付款方式標題l樣式*/
#deliveryMethodView .top > .caption,
#paymentView .top > .caption {
  font-size: 1.06rem;
  font-weight: 400;
  color: #404040;
}

#cart #cartView .summary .separator,
#checkout #checkoutView .summary .separator,
#paymentView .summary .separator,
#order #orderView .summary .separator {
  border-top: 1px dashed rgba(0, 0, 0, 0.4);
}

#checkoutView .checkoutItem .top,
#paymentView .summary .top {
  background-color: black;
}

/*運費金額樣式*/
#checkout #checkoutView #deliveryMethodView .fee {
  color: #160f0f;
  font-weight: 600;
}

/*運費金額樣式*/
#checkout #checkoutView #deliveryMethodView .fee.deleted {
  color: #777;
  font-weight: 400;
}

/*結帳滙總*/
#checkout #checkoutView .checkoutItem.UIPanel > .content > .UIDataTable {
  margin: initial;
}

#order #orderView .summary .top, #checkout #orderView > .top {
  background-color: #000;
}

#checkout #checkoutView .summary .total,
#paymentView .summary .total,
#order #orderView .summary .totalPay {
  color: rgb(196, 0, 0);
  font-size: 1rem;
}

#order #orderView .summary .total {
  font-size: 1rem;
}

.fa-trash-alt:before, .fa-trash-can:before {
  content: "\e59b";
  color: #006fad;
  font-size: 18px;
  font-weight: 400;
}

#checkoutView .checkoutItem .top > .caption,
#paymentView .summary .top > .caption,
#orderView .summary .top > .caption,
#checkoutView #orderView > .top > .caption {
  color: #fff;
}

#paymentView .summary .UIButton {
  font-size: initial;
}

#paymentView .summary .UIForm {
  float: right;
}

#orderView > .UIPanelBottom .UIButton {
  background: black;
}

#orderView .summary .right {
  float: right;
}

#pay .summary, #order .summary {
  border: 2px solid #000;
  border-radius: 3px;
}

#order #orderView {
  border-top: 3px solid black;
  padding-top: 24px;
}

/**********購物車及訂單:END********/
/***********會員中心:start**********/
#memberCenterView.mobile #memberHomeView .myProfile {
  background-image: linear-gradient(to right, rgb(255, 195, 160) 0%, rgb(255, 175, 189) 100%);
  box-shadow: inset 0px -1px 10px rgba(0, 0, 0, 0.15);
}

#memberCenterView .info .nickname {
  font-weight: 600;
}

#memberCenterView #memberHomeView .grade {
  margin-right: 6px;
}

#member_center .UIForm > .UIFormItem > div.data {
  align-items: center;
}

#memberCenterView #memberHomeView .myProfile .info .setting {
  margin-left: 6px;
}

#memberCenterView #memberHomeView .myProfile .info .setting:after {
  padding: 0;
  content: "\e212";
}

#memberCenterView #memberHomeView .myProfile .myPocket > .UILink {
  background: black;
}

#memberCenterView #memberHomeView .myProfile .myPocket > .UILink .value {
  padding: 2px 4px;
}

#memberCenterView #menu .top > .caption,
#memberCenterView #menu .top > a {
  background: black;
  color: white;
}

#memberCenterView #menu > .top > .UIGroupListBar .menuMemberCenterHome:before {
  padding-right: 12px;
}

#memberCenterView #menu {
  margin: 12px;
}

#memberCenterView #menu .top {
  border-bottom: initial;
}

#memberCenterView #menu .UIGroupListBar a {
  color: white;
}

#memberCenterView .UIGroupList > .item, .UIGroupList > .content > .item {
  padding: 12px 14px;
}

.UIPanel > .top .UIPanelBack {
  left: 10px;
  background: black;
  border-radius: 30px;
  padding: 3px 14px;
  color: white;
  margin: 6px;
  height: initial;
}

#member_center .UIGroupList > .item:last-child,
.UIGroupList > .content > .item:last-child {
  border: 0;
}

#member_center .summary .top {
  background-color: #000;
}

/*會員中心：電腦版:START*/
@media (min-width: 768px) {
  #member_center #memberHomeView .UIFixedLayout {
    margin-bottom: 24px;
  }
}
/*會員中心：電腦版:END*/
/*會員中心：手機版:START*/
@media (max-width: 768px) {
  #member_center .top {
    justify-content: center;
  }
  #member_center .UIPanel > .top .UIPanelBack {
    position: absolute;
    left: 12px;
  }
  #member_center .caption {
    font-size: 1.2em;
  }
  #memberCenterView #memberHomeView .UIFixedLayout .UIFixedLayout {
    margin-bottom: 12px;
  }
  #memberCenterView #memberHomeView .myProfile .info .setting {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    padding: 2px 5px;
  }
  #memberCenterView #memberHomeView .myOrder {
    border-radius: 8px;
  }
  #memberCenterView #memberHomeView .myProfile .info .setting {
    border-radius: 3px;
    padding: 3px 3px;
  }
  #memberCenterView #memberHomeView .myOrder {
    border-radius: 8px;
  }
  #orderView {
    border-top: 0;
  }
}
/*會員中心：手機版:END*/
/*************會員中心:end*************/
/**********登入&聯絡我們:start*********/
#login #loginView,
#register #registerView,
#contactUsView #contactForm,
#contact_us .UIMenuWrapper:before {
  border: 0;
}

#login #loginView .top,
#register #registerView .top,
#contact_us #contactUsView .top {
  justify-content: center;
  margin-bottom: 12px;
  border-bottom: 0;
}

#login #loginView.UIPanel,
#register #registerView.UIPanel,
#contactUsView .container .full {
  box-shadow: 0 15px 15px -1px rgba(0, 0, 0, 0.1);
  border-radius: 0;
  border: 1px solid #f0efef;
  padding: 30px;
}

#login #loginView.UIPanel > .content,
#register #registerView.UIPanel > .content {
  border: 0;
  box-shadow: initial !important;
  padding: 30px;
}

#login #loginView .top > .caption > span,
#register #registerView .top > .caption > span,
#contact_us #contactUsView .top > .caption > span {
  font-size: 26px;
  font-weight: 300;
  color: #666;
}

#login .UITextWrapper,
#register .UITextWrapper,
#contact_us .UITextWrapper {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #e2e1e1;
  margin-right: 6px;
}

#login #loginView .UITextWrapper:hover,
#register #registerView.UITextWrapper:hover,
#contact_us #contactUsView .UITextWrapper:hover,
#contact_us .UIMenuWrapper:hover {
  border-bottom: 1px solid var(--main-color);
}

#login .UIForm > .UIFormItem {
  padding: 8px 0;
}

/*登入頁:按鈕上方距離*/
#login .btnLogin {
  margin-top: 24px;
}

/*註冊成功頁:start*/
#register_success #registerSuccessView {
  border: 0;
}

#register_success #registerSuccessView .top {
  justify-content: center;
  font-size: 1.5rem;
  color: #474747;
  border: 0;
}

#register_success #registerSuccessView .content {
  text-align: center;
  min-height: 120px;
  color: #6b6b6b;
}

#register_success #registerSuccessView .UIPanelBottom {
  border: 0;
}

/*註冊成功頁:END*/
/*聯絡我們:START*/
#contact_us #contactUsView #followUsView {
  text-align: center;
  margin-bottom: 12px;
  display: none;
}

#contactUsView #followUsView > ul > li a:before {
  font-size: 24px;
}

#contactUsView #followUsView > ul > li:after {
  color: #fff;
  padding: 0 14px;
}

#contact_us #followUsView .phone span {
  display: none;
}

/*聯絡我們:END*/
/**********登入&聯絡我們:END*********/
/******************iPad直式：START********************/
@media screen and (min-width: 768px) and (max-width: 991px) {
  /*產品明細頁container寬度顯示*/
  #product .container,
  #product .container-md,
  #product .container-sm,
  #category .container,
  #category .container-md,
  #category .container-sm {
    max-width: 95%;
  }
  /*logo顯示位置*/
  #header #headerView #topView .container {
    display: flex;
    flex-direction: column;
  }
  /*logo及選單置中*/
  #header #headerView #topView #logoView,
  #header #headerView #menuView {
    text-align: center;
  }
  /*logo下方間距*/
  #header #headerView #topView #logoView {
    margin-bottom: 12px;
  }
  /*第二層選單寬度*/
  .UIHorizontalNavigation > .menu li.level2 {
    min-width: 120px;
  }
  /*產品明細頁左側不顯示*/
  #product .col-md-2,
  #category .col-md-2 {
    display: none;
  }
  /*產品明細頁內容滿版*/
  #product .col-md-10,
  #category .col-md-10 {
    width: 100%;
  }
  /*隱藏首頁及購物車圖示*/
  #product .hiddenLg {
    display: none;
  }
}
/*******************iPad直式：END*******************/