@charset "UTF-8";
/** 螢幕尺寸 **/
/** 標題字大小 **/
/** 字型粗細 **/
/* 標準 */
/* 細 */
/* 極細 */
/* 粗 */
/* 極粗 */
/** 字型高度 **/
/* 標準行高 */
/** 外邊界距離 **/
/** 內邊界距離 **/
/** common.scss/定義覆蓋vars.scss變數 **/
/********************************      helper.scss:START      ********************************/
/********************************      helper.scss:END      ********************************/
/********************************      index.scss:START      ********************************/
/********************************      index.scss:END      ********************************/
/********************************      login.scss:START      ********************************/
/********************************      login.scss:END      ********************************/
/********************************      style.scss:START      ********************************/
/********************************      style.scss:END      ********************************/
/********************************      webpos.scss:START      ********************************/
/********************************      webpos.scss:END      ********************************/
/********************************      header.scss:START      ********************************/
/********************************      header.scss:END      ********************************/
/********************************      vars.less/基本變數設定      ********************************/
/********************************      vars.less/共用元件樣式定義      ********************************/
/********************************      Shop      ********************************/
/********************************      vars.less:START      ********************************/
/********************************      vars.less:END      ********************************/
/********************************      共用元件樣式定義      ********************************/
/** 元件圖示大小 **/
/** 元件容器標題 **/
/** 元件容器標題底線 **/
/** 元件容器內容 **/
/********************************     一般效果設定      ********************************/
/********************************     邊框效果設定      ********************************/
/********************************     字型圖示設定      ********************************/
/********************************     圖片效果設定      ********************************/
/********************************     轉場效果設定      ********************************/
/********************************     底圖固定位置捲動效果      ********************************/
/********************************      排版定義: START      ********************************/
/* .grid-7(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 {
    display: none;
  }
}

/* .grid-7: END */
/********************************      排版定義: END      ********************************/
/********************************      WebKit/app:UIApp      ********************************/
/********************************      WebKit/app:UIAlert      ********************************/
/********************************      WebKit/widget:UIButton      ********************************/
/* 按鈕文字顏色 */
/********************************      WebKit/widget:UILink      ********************************/
/********************************      WebKit/widget:UILink      ********************************/
/********************************      WebKit/widget:UILinkButton      ********************************/
/********************************      WebKit/widget:UIMenu      ********************************/
/********************************      WebKit/widget:UIImageUpload:START    ********************************/
/********************************      WebKit/widget:UIRadio      ********************************/
/********************************      WebKit/widget:UISwitch      ********************************/
/********************************      WebKit/layout:UIDropdown      ********************************/
/********************************      WebKit/layout:UIDataTable, UIPaginatedDataTable, UIPaginatedRepeater, UISQLResult      ********************************/
/********************************      WebKit/widget:UIDate      ********************************/
/********************************      WebKit/net:Box      ********************************/
/********************************      WebKit/layout::UIForm      ********************************/
/********************************      WebKit/layout:UIGroup    ********************************/
/********************************      WebKit/layout:UIGroupList    ********************************/
/********************************      WebKit/layout:UIPanel    ********************************/
/********************************      WebKit/layout:UIPanel    ********************************/
/********************************      WebKit/layout:UITabHost      ********************************/
/********************************      WebKit/tooltip    ********************************/
/********************************      WebKit/navigation:UIVerticalNavigation  ********************************/
/********************************      WebKit/navigation:UIHorizontalNavigation    ********************************/
/********************************      WebKit/layout:UISlider   ********************************/
/********************************      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 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;
}
:-ms-input-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      ********************************/
/********************************      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      ********************************/
/* HD/Retina */
.UIApp, html {
  color: #2b2b2b;
  font-family: "HanHei TC", "PingFang TC", "Helvetica Neue", "Helvetica", "STHeitiTC-Light", "Arial", "sans-serif", "微軟正黑體", "微软雅黑", "FontAwesome";
  font-size: 14px;
  font-weight: 500;
  line-height: 1.48;
  /** 字型大小定義 **/
  /** RWD Support **/
}
.UIApp a, html a {
  color: #2b2b2b;
  text-decoration: none;
}
.UIApp a:hover, html a:hover {
  color: #337ab7;
  text-decoration: none;
}
.UIApp .fs4, html .fs4 {
  font-size: 12px;
}
.UIApp .fs6, html .fs6 {
  font-size: 16px;
}
.UIApp .fs7, html .fs7 {
  font-size: 18px;
}
.UIApp .fs8, html .fs8 {
  font-size: 20px;
}
@media (max-width: 767px) {
  .UIApp, html {
    font-size: 14px;
  }
  .UIApp .hiddenXs, html .hiddenXs {
    display: none !important;
  }
  .UIApp .hidden:not(.showXs), html .hidden:not(.showXs) {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .UIApp .hiddenSm, html .hiddenSm {
    display: none !important;
  }
  .UIApp .hidden:not(.showSm), html .hidden:not(.showSm) {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .UIApp .hiddenMd, html .hiddenMd {
    display: none !important;
  }
  .UIApp .hidden:not(.showMd), html .hidden:not(.showMd) {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .UIApp .hiddenLg, html .hiddenLg {
    display: none !important;
  }
  .UIApp .hidden:not(.showLg), html .hidden:not(.showLg) {
    display: none !important;
  }
}

/* mac系統 */
.UIApp.mac.retina,
.UIApp.mac.retina input,
.UIApp.mac.retina select {
  font-weight: 400;
}

/* windows系統 */
.UIApp.windows.retina,
.UIApp.windows.retina input,
.UIApp.windows.retina select {
  font-weight: 600;
}

/********************************      WebKit/app:UIApp:END      ********************************/
/********************************      WebKit/app:UIPage:START      ********************************/
.UIPage.print {
  background-color: #cdcdcd;
  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: #fff;
  border: 1px #D3D3D3 solid;
  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: 14px;
  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: 3px 4px;
}

/* 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: 6px 4px;
}

/* UIDataTable:END */
@media print {
  body, input, textarea, button, legend, select {
    font-family: "HanHei TC", "PingFang TC", "Helvetica Neue", "Helvetica", "STHeitiTC-Light", "Arial", "sans-serif", "微軟正黑體", "微软雅黑", "FontAwesome";
    font-weight: 500 !important;
    /* font-size: 12px !important; */
  }

  * {
    color: #000 !important;
  }

  /* 設定列印不會出現網址 */
  a[href]:after {
    content: none !important;
  }

  .UIPage.print .document {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }

  .UIPage .preview {
    display: none;
  }

  /* 修正列印時, 採用電腦版方式 */
  body {
    background-color: #fafafa;
    /* font-size: 11px; */
    margin: 0;
    padding: 0;
  }

  .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%;
  }
}
@page {
  size: A4;
  margin: 0;
}
/********************************      WebKit/app:UIPage:END      ********************************/
/********************************      WebKit/app:UIPwa:START      ********************************/
.UIPwa > .btnAddToHome {
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  font-size: 1.2rem;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 65px;
}

/********************************      WebKit/app:UIPwa:END      ********************************/
/********************************      WebKit/widget:UIBirthday:START     ********************************/
.UIBirthdayWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 36px;
}

.UIBirthdayWrapper > select {
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  background-color: transparent;
  border: 0;
  color: #2b2b2b;
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
  height: 100%;
  padding: 0 24px 0 12px;
}
@media (max-width: 768px) {
  .UIBirthdayWrapper > select {
    padding: 0 12px 0;
  }
}

.UIBirthdayWrapper > select:disabled {
  color: #898989;
}

.UIBirthdayWrapper > select:disabled,
.UIBirthdayWrapper > select[readonly] {
  background-color: #ececec;
  opacity: 0.8;
}

/********************************      WebKit/widget:UIBirthday:START     ********************************/
/********************************      WebKit/widget:UIButton:START      ********************************/
.UIButton {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #08b;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  padding: 0px 12px;
  white-space: nowrap;
  height: 36px;
  margin-right: 2px;
}

.UIButton:hover,
.UIButton:focus {
  background-color: #006677;
  color: #fff;
  outline-width: 0;
}

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

.UIButton.btnBorder {
  background-color: transparent;
  border: 1px solid #08b;
  color: #2b2b2b;
}

/** 指定樣式按鈕 **/
button.btnInfo {
  background-color: #45bfec;
}

button.btnInfo:hover {
  background-color: #5bccf6;
}

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

button.btnWarn {
  background-color: #ff6359;
}

button.btnWarn:hover {
  background-color: #ce5048;
}

button.btnConfirm {
  background-color: #18a689;
}

button.btnConfirm:hover {
  background-color: #159077;
}

button.btnCancel {
  background-color: #eee;
  color: #2b2b2b;
}

button.btnCancel:hover {
  background-color: #f6f6f6;
  color: #2b2b2b;
}

button.btnCancel:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 500;
  font-style: normal;
  padding-right: 6px;
  content: "\f057";
}

button.btnBack {
  background-color: #eee;
  color: #2b2b2b;
}

button.btnBack:hover {
  background-color: #f6f6f6;
  color: #2b2b2b;
}

button.btnBack:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 500;
  font-style: normal;
  padding-right: 6px;
  content: "\f100";
}

button.btnClear {
  background-color: #eee;
  color: #2b2b2b;
}

button.btnClear:hover {
  background-color: #f6f6f6;
  color: #2b2b2b;
}

button.btnExport {
  background-color: #feae20;
}

button.btnExport:hover {
  background-color: #fec04e;
}

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

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

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

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

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

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

button.btnDelete {
  background-color: #e32b70;
  color: #fff;
  padding: 0px 6px;
}

button.btnDelete:hover {
  background-color: #e32b70;
}

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

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

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

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

button.btnApprove {
  background-color: #08b;
  padding-left: 24px;
  padding-right: 24px;
}

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

button.btnReject {
  background-color: #ff6359;
  padding-left: 24px;
  padding-right: 24px;
}

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

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

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

.btnFacebook:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f082";
  font-size: 16px;
}

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

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

.btnLine:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f3c0";
  font-size: 16px;
}

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

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

.btnWeixin:before {
  font-family: "Font Awesome 5 Brands";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f1d7";
  font-size: 16px;
}

/** btnWeixin:END **/
/********************************      WebKit/widget:UIButton:END      ********************************/
/********************************      WebKit/widget:UIBarcode:START      ********************************/
.UIScanner {
  border: 1px solid #eee;
  overflow: hidden;
  position: relative;
  /* width: 200px; */
}

.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: 18px;
  position: absolute;
  left: 6px;
  bottom: 6px;
}

.UIScanner > #start,
.UIScanner > #stop {
  display: none;
  font-size: 18px;
  position: absolute;
  right: 6px;
  bottom: 6px;
}

/********************************      WebKit/widget:UIBarcode:END      ********************************/
/********************************      WebKit/widget:UIShare:START      ********************************/
.UIShareButton {
  background-color: transparent;
  color: #08b;
  padding: 3px 6px;
}

.UIShareButton:hover, .UIShareButton:focus {
  background-color: transparent;
  color: #08b;
}

.UIShareButton:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-style: normal;
  content: "\e4b4";
}

.shareIcon {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: none;
  padding: 0 12px;
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 9999;
}

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

/********************************      WebKit/widget:UIShare:END      ********************************/
/********************************      WebKit/widget:UICheckbox:START      ********************************/
table.UICheckboxGroup {
  border-collapse: separate;
  border-spacing: 0 6px;
}

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

.UICheckboxWrapper > span {
  margin-left: 6px;
}

.UICheckboxWrapper input[type=checkbox] {
  cursor: pointer;
  position: absolute;
  left: 2px;
  top: 2px;
}

.UICheckboxWrapper input[type=checkbox]:before {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  content: "";
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: white;
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  left: -2px;
  top: -2px;
}

.UICheckboxWrapper input[type=checkbox]:checked:after {
  content: "";
  display: block;
  width: 8px;
  height: 16px;
  border: solid #121212;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  position: absolute;
  /*top: -2px;*/
  left: 6px;
}

/********************************      WebKit/widget:UICheckbox:END      ********************************/
/********************************      WebKit/widget:UIDate:START     ********************************/
.UIDateWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 36px;
}

.UIDateWrapper > .UIDate {
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  background-color: transparent;
  border: 0;
  color: #2b2b2b;
  font-size: 14px;
  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: #ececec;
  opacity: 0.8;
  background-color: transparent;
  opacity: 1;
}

.UIDateWrapper.input-group .input-group-text {
  background-color: transparent;
  border: 0;
}

.UIDateWrapper i {
  font-size: 16px;
}

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

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

/*
.UIDateRangeWrapper > .UIDate:disabled
    , .UIDateRangeWrapper > .UIDate[readonly] {

    @include widget-input_disabled;

    background-color: transparent;
    opacity: 1;
}*/
/********************************      WebKit/widget:UIDate:END     ********************************/
/********************************      WebKit/widget:UILink:START      ********************************/
a.UILink {
  color: #2b2b2b;
}

a.UILink:hover {
  color: #337ab7;
}

/*
.UILink[disabled]
    , .UILink[disabled]:hover {
    color: $font-color-link_disabled;
}*/
/** facebook:START **/
.UILink.facebook, .UILink.facebook:hover,
.UITag.facebook {
  color: #305891;
}

.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: 14px;
}

/** facebook:END **/
/** line:START **/
.UILink.line, .UILink.line:hover,
.UITag.line {
  color: #1dbf21;
}

.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: 14px;
}

/** line:END **/
/** weixin:START **/
.UILink.weixin, .UILink.weixin:hover,
.UITag.weixin {
  color: #82d44a;
}

.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: 14px;
}

/** weixin:END **/
/** linkedin:START **/
.UILink.linkedin, .UILink.linkedin:hover,
.UITag.linkedin {
  color: #0077b5;
}

.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: 14px;
}

/** linkedin:END **/
/** youtube:START **/
.UILink.youtube, .UILink.youtube:hover,
.UITag.youtube {
  color: #ff0000;
}

.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: 14px;
}

/** youtube:END **/
/** instagram:START **/
.UILink.instagram, .UILink.instagram:hover,
.UITag.instagram {
  color: #3897f0;
}

.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: 14px;
}

/** instagram:END **/
/** twitter:START **/
.UILink.twitter, .UILink.twitter:hover,
.UITag.twitter {
  color: #2ca8d2;
}

.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: 14px;
}

/** twitter:END **/
/** weibo:START **/
.UILink.weibo, .UILink.weibo:hover,
.UITag.weibo {
  color: #f5ca59;
}

.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: 14px;
}

/** weibo:END **/
/** phone:START **/
.UILink.phone, .UILink.weibo:phone,
.UITag.phone {
  color: #2b2b2b;
}

.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: 14px;
}

/** phone:END **/
/********************************      WebKit/widget:UILink:END      ********************************/
/********************************      WebKit/layout:UIPanel:START    ********************************/
.UIPanel {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
  position: relative;
  margin-bottom: 24px;
}

.UIPanel > .top > .caption {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  color: #3b3b3b;
  font-size: 15px;
  height: 42px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-left: 24px;
}
@media (max-width: 768px) {
  .UIPanel > .top > .caption {
    font-size: 14px;
    padding-left: 18px;
  }
}

.UIPanel > .top .UIPanelBar {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  position: absolute;
  top: 3px;
  right: 0px;
}

.UIPanel > .top .UIPanelBack {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  color: #3b3b3b;
  font-size: 15px;
  height: 42px;
  padding: 0 18px;
  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 > .top .UIPanelBack + .caption {
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
}

.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: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 18px 0;
  width: 100%;
}

.UIPanel > .content {
  height: 100%;
  padding: 24px;
}
@media (max-width: 768px) {
  .UIPanel > .content {
    padding: 18px;
  }
}

/* screen 樣式:START */
@media (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 > .caption {
  font-size: 0.9rem;
  height: 26px;
  padding-left: 12px;
}

.UIPanel.minor > .content {
  padding: 12px;
}

/* minor 樣式:END */
/* group 樣式:START */
.UIPanel.group {
  border: none;
  margin-bottom: 12px;
}

.UIPanel.group > .top > .caption {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
  background-color: #eee;
  border-bottom: none;
  font-size: 0.8rem;
  height: 26px;
  padding: 3px 6px;
}

.UIPanel.group > .content {
  padding: 12px;
}

/* group 樣式:END */
/* noBorder 樣式:START */
.UIPanel.noBorder {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  background-color: transparent;
  border: 0;
  margin-bottom: 0;
}

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

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

/* noBorder 樣式:END */
/* PanelBox 樣式定義Box彈出時撐滿整個畫面:START */
.UIPanel.PanelBox {
  height: 100%;
  margin-bottom: 0;
}

.UIPanel.PanelBox > .top {
  height: 42px;
}

.UIPanel.PanelBox > .UIPanelBottom {
  width: 100%;
  height: 62px;
}

.UIPanel.PanelBox.caption > .content {
  height: calc(100% - 42px);
  overflow-y: auto;
}

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

.UIPanel.PanelBox.caption.bottom > .content {
  height: calc(100% - 42px - 62px);
  overflow-y: auto;
}

/* PanelBox 樣式定義Box彈出時撐滿整個畫面:END */
/********************************      WebKit/layout:UIPanel:END    ********************************/
/********************************      WebKit/layout:UIPortlet:START    ********************************/
.UIPortlet.normal {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
  position: relative;
  margin-bottom: 18px;
}

.UIPortlet.normal > .top > .caption {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  color: #3b3b3b;
  font-size: 15px;
  height: 42px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  font-size: 0.8rem;
  height: 24px;
  padding-left: 12px;
}
@media (max-width: 768px) {
  .UIPortlet.normal > .top > .caption {
    font-size: 14px;
    padding-left: 18px;
  }
}

.UIPortlet.normal > .content {
  padding: 12px;
}

/********************************      WebKit/layout:UIPortlet:END    ********************************/
/********************************      WebKit/layout:UITabHost:START      ********************************/
.UITabHost {
  /* margin-bottom: $margin-webkit; */
}

.UITabHost > ul.tabs > li > a {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  color: #3b3b3b;
  font-size: 15px;
  height: 42px;
  height: initial;
  background-color: #fff;
  color: #898989;
  font-size: 14px;
}

.UITabHost > .tabs > li.active > a {
  color: #3b3b3b;
}

.UITabHost > ul.tabs > li > a > i {
  font-size: 14px;
  padding-right: 3px;
  text-align: center;
  /* width: 1.25em; */
}

/* mode=default */
.UITabHost.default > ul.tabs {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  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: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 0;
  display: inline-block;
  margin-bottom: -1px;
}

.UITabHost.default > ul.tabs > li.active {
  border-top: 3px solid #08b;
}

.UITabHost.default > ul.tabs > li > a {
  padding: 6px 24px 3px 24px;
}

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

.UITabHost.default > .tabContent > .UITab {
  padding-top: 24px;
}

.UITabHost.default > .tabContent.noTabs > .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: 1px solid rgba(0, 0, 0, 0.1);
  float: left;
}

.UITabHost.tabLeft > ul.tabs > li.active {
  border-right: 3px solid #08b;
}

.UITabHost.tabLeft > ul.tabs > li > a {
  padding: 6px 8px;
}

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

.UITabHost.tabLeft > .tabContent > .UITab {
  padding: 6px 18px;
}

@media (max-width: 768px) {
  .UITabHost > ul.tabs > li > a {
    font-size: 14px;
  }

  .UITabHost.default > ul.tabs > li > a {
    padding: 6px 9px 2px 9px;
  }

  .UITabHost.tabLeft > ul.tabs > li > a {
    padding: 6px 4px 6px 0;
  }
}
/********************************      WebKit/layout:UITabHost:END      ********************************/
/********************************      WebKit/widget:UIText:START      ********************************/
.UITextWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 36px;
}

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

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

.UITextWrapper > .UIText:disabled {
  background-color: #ececec;
  opacity: 0.8;
}

.UITextWrapper > .UIText[readonly] {
  background-color: #f8f8f8;
  opacity: 0.9;
}

.UITextWrapper i {
  font-size: 16px;
}

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

.UITextWrapper.input-group .input-group-text {
  background-color: transparent;
  border: 0;
}

/* 數字輸入盒 */
.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;
  display: inline-block;
  height: 24px;
}

.UITextWrapper.label .UIText {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  background-color: transparent;
  padding-left: 2px;
  padding-right: 2px;
}

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

/* Floating labels */
.UITextWrapper.form-floating > label {
  color: #4b4b4b;
  padding: 0.75rem 0.75rem;
}

.UITextWrapper.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
  color: #3b3b3b;
  opacity: 0.8;
}

.UITextWrapper.form-floating > .form-control:not(:-ms-input-placeholder) ~ label {
  color: #3b3b3b;
  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: #3b3b3b;
  opacity: 0.8;
}

/* 單位輸入盒 */
.UITextWrapper.unit > .UIText {
  padding: 0;
  padding-left: 6px;
}

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

/********************************      WebKit/widget:UIText:END      ********************************/
/********************************      WebKit/widget:UIMenu:START      ********************************/
.UIMenuWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 36px;
  overflow: hidden;
}

.UIMenuWrapper:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-style: normal;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  line-height: 36px;
  padding: 0 6px;
  content: "\f0dc";
  position: absolute;
  top: 0;
  right: 0;
}

.UIMenuWrapper .UIMenu {
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  background-color: transparent;
  border: 0;
  color: #2b2b2b;
  font-size: 14px;
  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 36px 0 12px;
}

.UIMenuWrapper .UIMenu:disabled {
  color: #898989;
}

.UIMenuWrapper > i {
  color: #909090;
  position: absolute;
  top: 8px;
  right: 6px;
  z-index: 99;
}

.UIMenuGroup a {
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: inline-block;
  padding: 6px 12px;
  margin: 0 6px 6px 0;
}

.UIMenuGroup a.active {
  color: #fff;
  background-color: #08b;
}

.UIMenuGroup a[disabled] {
  background-color: #f2f5f8;
  color: #898989;
  cursor: default;
}

/********************************      WebKit/widget:UIMenu:END      ********************************/
/********************************      WebKit/app:UIAlert:START      ********************************/
.UIAlert {
  z-index: 99999 !important;
}

.UIAlert .toast {
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  font-size: 1rem;
}

.UIAlert .toast .toast-header {
  border-top-left-radius: 0px;
  -webkit-border-top-left-radius: 0px;
  -moz-border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-top-right-radius: 0px;
  font-size: 1rem;
}

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

.UIAlert .toast .toast-footer .UIButton {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  min-width: 80px;
}

.UIAlert.Info .toast,
.UIAlert.Error .toast {
  color: #fff;
}

.UIAlert.Info .toast .toast-header,
.UIAlert.Error .toast .toast-header {
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
}

.UIAlert.Info .toast {
  background-color: #b8c9d1;
}

.UIAlert.Error .toast {
  background-color: #c84346;
}

.UIAlert.Confirm .toast {
  background-color: #fff;
  color: #000;
}

.UIAlert.Confirm .toast .toast-header {
  background-color: #67a4c0;
  color: #fff;
}

#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/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: 600;
}

.UIContent em {
  font-style: Italic;
}

.UIContent h1 {
  font-size: 2.4rem;
  font-weight: 600;
}

.UIContent h2 {
  font-size: 2.2rem;
  font-weight: 600;
}

.UIContent h3 {
  font-size: 1.8rem;
  font-weight: 500;
}

.UIContent h4 {
  font-size: 1.6rem;
  font-weight: 500;
}

.UIContent h5 {
  font-size: 1.5rem;
  font-weight: 500;
}

.UIContent h6 {
  font-size: 1.3rem;
  font-weight: 400;
}

.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:UIFileUpload:START    ********************************/
.UIFileUpload {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  color: #fff;
  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: 500;
  font-style: normal;
  padding-right: 6px;
  content: "\f0ee";
}

.UIFileUpload .btnUploadView #btnUpload {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  line-height: 36px;
  padding-left: 6px;
  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: 900;
  font-style: normal;
  padding-right: 6px;
  content: "\f019";
}

.UIFileUpload .btnDownloadView #btnDownload {
  color: #fff;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  display: inline-block;
  line-height: 36px;
  padding-left: 6px;
  cursor: pointer;
  z-index: 999;
}

.UIFileUpload .btnDownloadView #btnFilename {
  color: #fff;
  padding-left: 3px;
}

/** btnDownloadView:END **/
.UIFileUpload .btnDeleteView {
  background-color: #08b;
  position: absolute;
  top: 0;
  right: 0;
}

.UIFileUpload .btnDeleteView:before {
  padding-left: 6px;
  content: " | ";
}

.UIFileUpload .btnDeleteView #btnDelete {
  line-height: 36px;
  cursor: pointer;
  z-index: 999;
}

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

/********************************      WebKit/widget:UIFileUpload:END    ********************************/
/********************************      WebKit/widget:UIHelper:START    ********************************/
i.UIHelper {
  color: #a63614;
  font-size: 16px;
  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 {
  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: 2px solid #fff;
  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: 1px solid rgba(0, 0, 0, 0.1);
  /*
  position: absolute;
  top: 0px;
  left: 0px;*/
}

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

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

.UIImageUpload .btnUploadView #btnUpload {
  /* background: url("../images/UIImageUpload/ic_camera.png");
  background-repeat: no-repeat; */
  cursor: pointer;
  overflow: hidden;
  display: block;
  z-index: 9999;
}

.UIImageUpload .btnUploadView #btnUpload:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 500;
  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: 500;
  font-style: normal;
  content: "\f2ed";
  font-size: 24px;
}

/********************************      WebKit/widget:UIImageUpload:END    ********************************/
/********************************      WebKit/widget:UILabel or UITag:START      ********************************/
.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;
}

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

.UILabel.h1 {
  font-size: 2.4rem;
  font-weight: 600;
}

.UILabel.h2 {
  font-size: 2.2rem;
  font-weight: 600;
}

.UILabel.h3 {
  font-size: 1.8rem;
  font-weight: 500;
}

.UILabel.h4 {
  font-size: 1.6rem;
  font-weight: 500;
}

.UILabel.h5 {
  font-size: 1.5rem;
  font-weight: 500;
}

.UILabel.h6 {
  font-size: 1.3rem;
  font-weight: 400;
}

.UILabel.session {
  padding-left: 3px;
  padding-right: 3px;
}

.UILabel.hint {
  color: #ee3939;
  font-size: 0.85rem;
}

.UILabel.delete {
  color: #adadad;
  text-decoration: line-through;
}

.UILabel.green {
  color: #27c24c;
}

.UILabel.red {
  color: #ee3939;
}

.UILabel.blue {
  color: #0088cc;
}

.UILabel.yellow {
  color: #ddb411;
}

.UILabel.orange {
  color: #d66600;
}

.UILabel.black {
  color: #000;
}

.UILabel.gray {
  color: #adadad;
}

.UILabel.white {
  color: #fff;
}

.UILabel.comment {
  color: #adadad;
  font-size: 0.9em;
}

@media (max-width: 768px) {
  .UILabel.h1 {
    font-size: 1.6rem;
  }

  .UILabel.h2 {
    font-size: 1.6rem;
  }

  .UILabel.h3 {
    font-size: 1.5rem;
  }

  .UILabel.h4 {
    font-size: 1.5rem;
  }

  .UILabel.h5 {
    font-size: 1.3rem;
  }

  .UILabel.h6 {
    font-size: 1.3rem;
  }
}
/********************************      WebKit/widget:UILabel or UITag:END      ********************************/
/********************************      WebKit/widget:UILine:START   ********************************/
hr.UILine {
  border: 0;
  border-top: 1px solid #dedede;
  border-bottom: 1px solid white;
  height: 0;
}

hr.UILine.base {
  margin: 12px 0;
}

hr.UILine.small {
  margin: 6px 0;
}

hr.UILine.large {
  margin: 18px 0;
}

/********************************      WebKit/widget:UILine:END   ********************************/
/********************************      WebKit/widget:UILinkButton:START      ********************************/
a.UILinkButton {
  color: #034c70;
  cursor: pointer;
  text-decoration: none;
}

a.UILinkButton:hover {
  color: #337ab7;
}

a.UILinkButton[disabled],
.UILinkButton[disabled]:hover {
  color: #337ab7;
}

/********************************      WebKit/widget:UILinkButton:END      ********************************/
/********************************      WebKit/widget:UIRadio:START      ********************************/
.UIRadioWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  display: inline-block;
  margin-right: 12px;
}

.UIRadioWrapper > .UIRadio {
  margin-right: 12px;
}

.UIRadioWrapper > .UIRadio[disabled] + span {
  /* color: $font-color-radio-disabled; */
}

/********************************      WebKit/widget:UIRadio:END      ********************************/
/********************************      WebKit/widget:UISearch:START    ********************************/
.UISearchWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 36px;
}

.UISearchWrapper > .UISearch {
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  background-color: transparent;
  border: 0;
  color: #2b2b2b;
  font-size: 14px;
  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: #ececec;
  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: 36px;
  height: 36px;
}

.UISearchWrapper > button i:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 500;
  font-style: normal;
  content: "\f002";
  line-height: 36px;
}

/********************************      WebKit/widget:UISearch:END    ********************************/
/********************************      WebKit/widget:UISwitch:START   ********************************/
.UISwitchWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
}

.UISwitchWrapper .switch {
  position: relative;
  display: inline-block;
  vertical-align: top;
  border-radius: 18px;
  cursor: pointer;
  box-sizing: content-box;
}

.UISwitchWrapper .switch-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  box-sizing: content-box;
}

.UISwitchWrapper .switch-label {
  position: relative;
  display: block;
  height: inherit;
  font-size: 10px;
  text-transform: uppercase;
  border-radius: inherit;
  box-sizing: content-box;
}

.UISwitchWrapper .switch-label:before, .switch-label:after {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  line-height: 1;
  transition: inherit;
  box-sizing: content-box;
}

.UISwitchWrapper .switch-label:before {
  content: attr(data-off);
  right: 8px;
}

.UISwitchWrapper .switch-label:after {
  content: attr(data-on);
  left: 11px;
  opacity: 0;
}

.UISwitchWrapper .switch-input:checked ~ .switch-label:before {
  opacity: 0;
}

.UISwitchWrapper .switch-input:checked ~ .switch-label:after {
  opacity: 1;
}

.UISwitchWrapper .switch-handle {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  border-radius: 100%;
}

.UISwitchWrapper .switch-handle:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
}

/* Transition
========================== */
.UISwitchWrapper .switch-label, .switch-handle {
  transition: All 0.3s ease;
  -webkit-transition: All 0.3s ease;
  -moz-transition: All 0.3s ease;
  -o-transition: All 0.3s ease;
}

/* Switch Flat
==========================*/
.UISwitchWrapper .switch-flat {
  width: 60px;
  height: 24px;
  margin: 2px 6px 6px 2px;
}

.UISwitchWrapper .switch-flat .switch-label {
  border: solid 2px #eceeef;
  box-shadow: none;
}

.UISwitchWrapper .switch-flat .switch-handle {
  top: 0px;
  left: 0px;
}

.UISwitchWrapper .switch-flat .switch-handle:before {
  background: #eceeef;
  margin: -12px 0 0 -12px;
  width: 24px;
  height: 24px;
  border-radius: 24px;
}

.UISwitchWrapper .switch-flat .switch-input:checked ~ .switch-label {
  border-color: #08b;
}

.UISwitchWrapper .switch-flat .switch-input:checked ~ .switch-handle {
  left: 34px;
  background: #08b;
  box-shadow: none;
}

.UISwitchWrapper > label {
  line-height: 32px;
}

/** 如果有產生文字標籤, 右邊要有間距 **/
.UISwitchWrapper > label.label {
  margin-right: 8px;
}

/********************************      WebKit/widget:UISwitch:END   ********************************/
/********************************      WebKit/widget:UITextarea:START      ********************************/
.UITextareaWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  width: 100%;
}

.UITextareaWrapper > .UITextarea {
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  background-color: transparent;
  border: 0;
  color: #2b2b2b;
  font-size: 14px;
  resize: both;
}

.UITextareaWrapper > .UITextarea:disabled,
.UITextareaWrapper > .UITextarea[readonly] {
  background-color: #ececec;
  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      ********************************/
.UITimeWrapper {
  border-collapse: separate;
  margin: 0 2px 0 0;
  position: relative;
  vertical-align: top;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 36px;
}

.UITimeWrapper > .UITime {
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  background-color: transparent;
  border: 0;
  color: #2b2b2b;
  font-size: 14px;
  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: #ececec;
  opacity: 0.8;
}

.UITimeWrapper i {
  font-size: 16px;
}

.UITimeWrapper.input-group .input-group-text {
  background-color: transparent;
  border: 0;
}

/********************************      WebKit/widget:UITime      ********************************/
/********************************      WebKit/layout:UIDataTable, UIPaginatedDataTable, UIPaginatedRepeater, UISQLResult:START      ********************************/
.UIDataTable,
.UIPaginatedDataTable,
.UIPaginatedRepeater {
  overflow-x: auto;
  border-collapse: collapse;
}

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

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

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

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

/* tbody:START */
.UIDataTable table > tbody > tr > td,
.UIPaginatedDataTable > table > tbody > tr > td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  vertical-align: middle;
  padding: 8px 6px;
}
@media (max-width: 768px) {
  .UIDataTable table > tbody > tr > td,
.UIPaginatedDataTable > table > tbody > tr > td {
    padding: 8px 3px;
  }
}
@media (min-width: 768px) {
  .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: #fafbfc;
}

.UIDataTable table > tbody > tr.contrast:hover,
.UIPaginatedDataTable > table > tbody > tr.contrast:hover {
  background-color: #ceecf5;
}

.UIDataTable table > tbody > tr > td > .UIImage,
.UIPaginatedDataTable > table > tbody > tr > td > .UIImage {
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  margin-top: -7px;
  margin-bottom: -7px;
}
@media (max-width: 768px) {
  .UIDataTable table > tbody > tr > td > .UIImage,
.UIPaginatedDataTable > table > tbody > tr > td > .UIImage {
    margin-top: -7px;
    margin-bottom: -7px;
  }
}

/* tbody:END */
/* thead:START */
.UIDataTable table > thead > tr > th,
.UIPaginatedDataTable > table > thead > tr > th {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #4b4b4b;
  font-size: 0.9rem;
  white-space: nowrap;
  padding: 3px 6px;
}

.UIDataTable .bootstrap-table table > thead > tr > th {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.UIDataTable .bootstrap-table table > thead > tr > th > .th-inner {
  padding: 3px 6px !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: 800;
  font-style: normal;
  padding-left: 6px;
  content: "\f0dc";
}

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

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

/* thead:END */
/* tfoot:START */
.UIDataTable table > tfoot > tr > td,
.UIPaginatedDataTable > table > tfoot > tr > td {
  font-size: 0.9rem;
  font-weight: 800;
  padding: 3px 6px;
}

.UIDataTable table > tfoot > tr > td:first-child,
.UIPaginatedDataTable > table > tfoot > tr > td:first-child {
  padding-left: 12px;
}

.UIDataTable #message,
.UIPaginatedDataTable #message {
  color: #78909c;
  display: block;
  padding: 6px 12px;
}

/* tfoot:END */
.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: 12px;
}

.UIDataTable #pageControl > li,
.UIPaginatedDataTable #pageControl > li,
.UIPaginatedRepeater #pageControl > li,
.UIPaginatedGridLayout #pageControl > li {
  display: inline-block;
}

.UIDataTable #pageControl > li > a,
.UIPaginatedDataTable #pageControl > li > a,
.UIPaginatedRepeater #pageControl > li > a,
.UIPaginatedGridLayout #pageControl > li > a {
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #2b2b2b;
  float: left;
  position: relative;
  padding: 6px 12px;
  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: #08b;
  color: #fff;
  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: #777;
  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: "\f348";
  font-size: 22px;
  line-height: 32px;
  padding: 0 12px;
}

.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: "\f347";
  font-size: 22px;
  line-height: 32px;
  padding: 0 12px;
}

.UIDataTable #pageControl .pageCount,
.UIPaginatedDataTable #pageControl .pageCount,
.UIPaginatedRepeater #pageControl .pageCount,
.UIPaginatedGridLayout #pageControl .pageCount {
  font-size: 1.2rem;
  line-height: 32px;
}

.UIPaginatedGridLayout > .row > div,
.UIPaginatedGridLayout2 > .row > div {
  padding-bottom: 8px;
}

.UIPaginatedGridLayout2 #pageControl {
  width: 100%;
  text-align: center;
  padding: 12px 0;
}

.UIPaginatedGridLayout2 #pageControl .UIButton {
  padding-left: 36px;
  padding-right: 36px;
}

@media (max-width: 768px) {
  .UIDataTable table > tbody .UIDataColumn.action.btnGroup,
.UIPaginatedDataTable > table tbody .UIDataColumn.action.btnGroup {
    text-align: left;
  }

  .UIDataTable table > tbody .UIDataColumn.action.btnGroup:before,
.UIPaginatedDataTable > table tbody .UIDataColumn.action.btnGroup:before {
    color: #08b;
    font-family: "Font Awesome 5 Pro";
    font-weight: 500;
    font-style: normal;
    font-size: 24px;
    padding-left: 4px;
    content: "\f138";
  }

  .UIDataTable table > tbody .UIDataColumn.action.btnGroup > *,
.UIPaginatedDataTable > table tbody .UIDataColumn.action.btnGroup > * {
    display: none;
  }
}
@media print {
  .UIDataTable > table tbody tr td,
.UIPaginatedDataTable > table tbody tr td {
    white-space: normal;
    /* 設定列印時取消不折行 */
  }
}
/** 匯出 **/
#exportControl {
  padding: 24px;
}

#exportControl .excel, #exportControl .pdf {
  display: block;
  padding-bottom: 6px;
}

#exportControl .excel:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 500;
  font-style: normal;
  padding-right: 6px;
  content: "\f1c3";
  color: #0f642f;
  font-size: 24px;
}

#exportControl .pdf:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 500;
  font-style: normal;
  padding-right: 6px;
  content: "\f1c1";
  color: #b70006;
  font-size: 24px;
}

/********************************      WebKit/layout:UIDataTable, UIPaginatedDataTable, UIPaginatedRepeater, UISQLResult:END      ********************************/
/********************************      WebKit/layout:UIDropdown (未整理)      ********************************/
.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;
  font-size: 14px;
  padding: 12px !important;
}

.UIDropdown .dropdown-menu .dropdown-item {
  padding: 6px;
}

.UIDropdown .dropdown-menu .dropdown-item:hover,
.UIDropdown .dropdown-menu .dropdown-item:active {
  background-color: #eee;
}

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

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

.UIFixedLayout > div {
  float: left;
}

@media (max-width: 768px) {
  .UIFixedLayout.responsive > div {
    width: 100% !important;
    margin: 0 !important;
  }
}
/********************************      WebKit/layout::UIForm      ********************************/
.UIForm > .caption {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  color: #3b3b3b;
  font-size: 15px;
  height: 42px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

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

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

.UIForm > table > tbody > tr > th {
  color: #4b4b4b;
  min-width: 62px;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  padding: 4px 0;
}

/* 設定欄位最小高度 */
.UIForm > table > tbody > tr > th > span {
  line-height: 24px;
}

.UIForm > table > tbody > tr > th > .prefix {
  color: #db5031;
  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;
  /* 超出範圍時是否換行 [nowrap | wrap | wrap-reverse] */
  flex-wrap: wrap;
  padding: 6px 6px;
}

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

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

.UIForm > .UIFormItem {
  margin-bottom: 12px;
}

.UIForm > .UIFormItem > div.title {
  color: #4b4b4b;
  font-size: 0.9rem;
  margin-bottom: 3px;
}

.UIForm > .UIFormItem > div:last-child {
  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;
  /* 超出範圍時是否換行 [nowrap | wrap | wrap-reverse] */
  flex-wrap: wrap;
  margin-bottom: 3px;
}

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

/* 垂直排列樣式:END */
@media (max-width: 768px) {
  .UIForm > table > tbody > tr > th {
    min-width: 62px;
  }
}
@media print {
  .UIForm > table > tbody > tr > td {
    white-space: normal;
  }
}
/*******************************      WebKit/layout:UIActionForm (未整理)   ********************************/
.UIActionForm {
  display: none;
}

/*******************************      WebKit/layout:UIGridLayout  ********************************/
.UIGridLayout {
  margin: 0;
  overflow: hidden;
  position: relative;
}

.UIGridLayout .item {
  display: inline-block;
  overflow: hidden;
  padding: 12px;
}

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

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

/* .session(設定群組下面有間距):START */
.UIGroup.session {
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .UIGroup.session {
    margin-bottom: 18px;
  }
}

.UIGroup.session > .caption > span {
  border-left: 3px solid #08b;
  padding-left: 5px;
}

/* .session:END */
/** underline:START **/
.UIGroup.underline > .caption {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

/** underline: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: #fff;
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999;
}

/** mask: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: #fff;
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999;
}

/** mask:END **/
/** mark:START(設定背景顏色及內間隔) **/
.UIGroup.mark {
  background-color: #e1e1e1;
  padding: 12px;
}

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

.UIGroup.left {
  float: left;
}

.UIGroup.right {
  float: right;
}

/** 對齊方式:END **/
/** 設定小標題樣式: 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: 0.8rem;
  background-color: #eee;
  padding: 3px 6px;
}

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

/** 背景圖: END **/
/********************************      WebKit/layout:UIGroupList     ********************************/
.UIGroupList {
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  background-color: #fff;
  border: 1px solid #ddd;
  position: relative;
  margin-bottom: 12px;
}

.UIGroupList > .top {
  border-top-left-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -moz-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -moz-border-top-right-radius: 8px;
  background-color: transparent;
  border-bottom: 1px solid #08b;
  overflow: hidden;
}

.UIGroupList > .top > .caption {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  color: #3b3b3b;
  font-size: 15px;
  height: 42px;
  padding: 0 12px;
}

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

.UIGroupList > .content {
  border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-bottom-left-radius: 8px;
}

.UIGroupList > .item,
.UIGroupList > .content > .item {
  border-bottom: 1px solid #ddd;
  padding: 8px 12px;
}

.UIGroupList > .item:first-child {
  border-top-left-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -moz-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -moz-border-top-right-radius: 8px;
}

.UIGroupList > .item:last-child,
.UIGroupList > .content > .item:last-child {
  border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-bottom-right-radius: 8px;
}

.UIGroupList > .item:hover,
.UIGroupList > .content > .item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.UIGroupList > .item.selected,
.UIGroupList > .content > .item.selected {
  background-color: rgba(0, 0, 0, 0.05);
  z-index: 2;
  color: #2b2b2b;
}

.UIGroupList > .item.selected .UILink,
.UIGroupList > .item.selected .UILinkButton,
.UIGroupList > .content > .item.selected .UILink,
.UIGroupList > .content > .item.selected .UILinkButton {
  color: #2b2b2b;
}

/********************************      WebKit/layout:UIHorizontalLayout      ********************************/
.UIHorizontalLayout {
  width: 100%;
}

.UIHorizontalLayout tr {
  width: 100%;
}

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

.UIHorizontalLayout.divider > .row > div {
  border-right: 1px solid #eee;
}

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

@media print {
  .UIHorizontalLayout tr td {
    vertical-align: top;
  }
}
/********************************      WebKit/layout:UIHorizontalList      ********************************/
.UIHorizontalList > .table {
  display: table;
}

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

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

/********************************      WebKit/layout:UIHorizontalWizard  (未整理)    ********************************/
.UIHorizontalWizard {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #fff;
  border: 1px solid #e3e8ed;
  margin-bottom: 12px;
}

.UIHorizontalWizard .items {
  background-color: #f2f2f2;
  border-bottom: 1px solid #e0e4e8;
  padding: 0;
}

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

.UIHorizontalWizard .items ul li {
  position: relative;
  float: left;
  padding: 12px 15px 12px 25px;
  margin: 0;
  color: #5b5b5b;
}

.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 (max-width: 768px) {
  .UIHorizontalWizard .items {
    font-size: 0.7em;
  }

  .UIHorizontalWizard .items ul li {
    padding-right: 6px;
  }
}
/********************************      WebKit/layout:UIRibbon (未整理)     ********************************/
.UIRibbon {
  color: #fff;
  position: absolute;
  z-index: 99;
}

.UIRibbon > .wrapper {
  background-color: #08c;
  position: relative;
  text-align: center;
}

/* top */
.UIRibbon.ribbon-top {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  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;
  /*text-shadow: 0 -1px 1px hsla(0,0%,0%,.1);*/
}

.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(0deg, 0%, 0%, 0.5);
}

/********************************      WebKit/layout:UIScrollGroup:START    ********************************/
.UIScrollGroup {
  /* padding-right: calc($padding-webkit / 1.5); */
}

/********************************      WebKit/layout:UIScrollGroup:END    ********************************/
/********************************      WebKit/layout:UISlider  (未整理)    ********************************/
/* 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: #fff;
  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: 900;
  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: #fff;
  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: 900;
  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: #fff;
}

/* 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: #d6d6d6;
  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: #869791;
}

/* 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:UITabBar   (未整理)   ********************************/
/* default: START */
.UITabBar.default {
  display: none;
}

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

.UITabBar.default .tabs {
  background-color: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  width: 100%;
  /* height: 50px; */
  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: #898989;
}

.UITabBar.default .tabs li.active > a {
  color: #2b2b2b;
  font-weight: 500;
}

.UITabBar.default .tabs i {
  display: block;
  font-size: 18px;
  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;
  font-size: 0.8rem;
}

/* right/left: END */
@media (max-width: 768px) {
  .UITabBar.default {
    display: initial;
  }
}
/********************************      WebKit/layout:UIVerticalLayout      ********************************/
.UIVerticalLayout {
  display: table;
  width: 100%;
}

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

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

/********************************      WebKit/layout:UIVerticalAccordion  (未整理) ********************************/
.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:UIVerticalWizard   (未整理)   ********************************/
.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/navigation:UINavBar      ********************************/
.UINavBar {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
  background-color: transparent;
  font-size: 0.9rem;
  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;
  font-size: 14px;
  content: "\f015";
  padding-right: 6px;
}

.UINavBar .home > a {
  color: #2b2b2b;
}

.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;
  content: "\f105";
  padding-right: 6px;
}

/********************************      WebKit/navigation:UIHorizontalNavigation   ********************************/
.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: #fcfcfc;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: none;
  height: 48px;
  position: relative;
  padding: 0 24px;
  z-index: 99;
}

.UIHorizontalNavigation > .menu > .mobilemenu .closemenu {
  color: #000;
  font-size: 16px;
  line-height: 48px;
}

.UIHorizontalNavigation > .menu > .mobilemenu .title {
  display: inline-block;
  font-size: 1.2rem;
  line-height: 48px;
  padding: 0 18px;
}

/* 手機版本彈出選單:END */
.UIHorizontalNavigation > .menu > ul a {
  color: #2b2b2b;
}

.UIHorizontalNavigation > .menu > ul a:hover {
  color: #2b2b2b;
}

.UIHorizontalNavigation > .menu > ul > li.caption {
  display: none;
  background-color: #f5f5f5;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 4px 28.8px;
}

/* 大畫面時套用 */
@media (min-width: 768px) {
  .UIHorizontalNavigation > .menu > ul a {
    display: inline-block;
    padding: 18px 12px;
  }

  .UIHorizontalNavigation > .menu > ul ul a {
    padding: 12px;
  }

  .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: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    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: 1px solid rgba(0, 0, 0, 0.1);
  }

  /* 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: 12px;
  }

  .UIHorizontalNavigation > .menu > ul li.submenu {
    position: relative;
  }

  .UIHorizontalNavigation > .menu > ul li.submenu > a:first-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .UIHorizontalNavigation > .menu > ul li.submenu > .open {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9999;
    padding: 12px;
    padding-left: 18px;
  }

  .UIHorizontalNavigation > .menu > ul > li.submenu .open:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 500;
    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: 24px;
  }

  .UIHorizontalNavigation > .menu > ul li.level2:last-child > a {
    border-bottom: none;
  }

  /* Level 2:END */
  /* Level 3 */
  .UIHorizontalNavigation > .menu > ul li.level3 > a {
    padding-left: 48px;
  }
}
/********************************      WebKit/navigation:PushNavigation   (未整理)   ********************************/
.UIPushNavigation nav a {
  color: #f7f7f7;
}

.UIPushNavigation nav a.hover, .UIPushNavigation nav a.focus {
  color: #fff;
}

/********************************      WebKit/navigation:UINavToggle:START    ********************************/
.UINavToggle {
  color: #000;
  font-size: 24px;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  display: none;
}

.UINavToggle:hover {
  color: #f2f5f8;
}

@media (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 > .menuControl {
  /* 圖層遮照 */
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -9;
}

/* 手機版本彈出選單:START */
.UIVerticalNavigation > .menu > .mobilemenu {
  background: #fcfcfc;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: none;
  height: 48px;
  position: relative;
  padding: 0 24px;
  z-index: 99;
}

.UIVerticalNavigation > .menu > .mobilemenu .closemenu {
  color: #000;
  font-size: 16px;
  line-height: 48px;
}

.UIVerticalNavigation > .menu > .mobilemenu .title {
  color: #000;
  display: inline-block;
  font-size: 1.2rem;
  line-height: 48px;
  padding: 0 18px;
}

/* 手機版本彈出選單:END */
.UIVerticalNavigation > .menu ul li.caption {
  display: none;
  background-color: #f5f5f5;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 4px 28.8px;
}

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

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

.UIVerticalNavigation > .menu ul a > i {
  color: #006677;
  margin-right: 6px;
}

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

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

/* 大畫面時套用 */
@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:START   ********************************/
/* 蓋住底的遮罩 */
#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: #fff;
  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(/global/support/colorbox/images/close.png) no-repeat top center; */
  background: url(https://cdn.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: 1.2rem;
  line-height: 36px;
  text-align: center;
  height: 36px;
}

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

#colorbox.Box .BoxContent.complex {
  height: calc(100% - 36px);
}

#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:UICalendar    ********************************/
.UICalendar {
  height: 100%;
}

@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;
  }
}

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

/********************************      WebKit/chart:UIBarChart  (未整理)     ********************************/
.UIBarChart .legend > div {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border: 2px solid 1px solid rgba(0, 0, 0, 0.2);
  padding: 3px;
}

.UIBarChart .legend > table {
  /*padding: 6px;*/
}

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

.UIBarChart #flotTip {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border: 2px solid 1px solid rgba(0, 0, 0, 0.2);
  background: #fff;
  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;
}

.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    ********************************/
/* 修正Bootstrap Tooltip文字靠左對齊*/
.tooltip-inner {
  text-align: left;
}

.UIForm .UIFormItem > th > i.tooltip-icon {
  font-size: 14px;
  padding: 0 4px;
}

.UIDataTable th > i.tooltip-icon {
  font-size: 12px;
  padding: 0 4px;
}

.UIPanel .caption > i.tooltip-icon {
  padding: 0 4px;
}

/********************************      webkit-tooltip:START    ********************************/
/********************************      Validator:   (未整理)    ********************************/
.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;
}

/********************************      組合樣式修正:      ********************************/
.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: -21px;
  margin-right: -21px;
}
@media (max-width: 768px) {
  .UIPanel > .content > .UIDataTable,
.UIPanel > .content > .UIPaginatedDataTable,
.UIPanel > .content > .UIPaginatedRepeater {
    margin-left: -16px;
    margin-right: -16px;
  }
}

.UIPanel.minor > .content > .UIDataTable,
.UIPanel.minor > .content > .UIPaginatedDataTable,
.UIPanel.minor > .content > .UIPaginatedRepeater {
  margin-left: -9px;
  margin-right: -9px;
}
@media (max-width: 768px) {
  .UIPanel.minor > .content > .UIDataTable,
.UIPanel.minor > .content > .UIPaginatedDataTable,
.UIPanel.minor > .content > .UIPaginatedRepeater {
    margin-left: -10px;
    margin-right: -10px;
  }
}

.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;
}

/** style.scss/全部網站共用樣式定義 **/
/********************************      樣式定義: START      ********************************/
/** slash:START (加斜線"/") **/
.slash:before {
  content: "/";
  padding: 0 3px;
}

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

/** hyphen:END **/
/** 數量符號:START **/
.symbolQty:before {
  content: " x";
}

/** 數量符號:END **/
/** bracket(括號, 手機版顯示):START **/
.bracket:before {
  content: "(";
}

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

/** bracket:END **/
/** block:START(區塊換行) **/
.block {
  display: block;
}

/** block:END **/
/** divider:START(畫分割線) **/
.UIGroup.divider {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 6px;
  padding-top: 6px;
}

/** divider:END **/
/** tagButton:START **/
.tagButton {
  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: #08b;
  color: #fff;
  padding: 6px 12px;
  margin: 3px;
}

.tagButton[name=untag] {
  background-color: #eee;
}

.tagButton[name=tag] .UILink {
  color: #fff;
}

.tagButton .UILink > i {
  font-size: 16px;
  padding: 0 3px;
}

.tagButton .name .UILink:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f02b";
}

.UIGroup.tag {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  color: #08b;
  background-color: rgba(46, 149, 128, 0.1);
  display: inline-block;
  padding: 0 6px;
  margin-right: 6px;
}

.UIGroup.tag.smart {
  color: #006677;
}

.UIGroup.tag:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "#";
  padding-right: 3px;
}

/** tagButton:END **/
/** UILinkButton/attachment:START **/
.UILinkButton.attachment:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-style: normal;
  content: "\f0c6";
  padding-left: 6px;
}

/** UILinkButton/attachmen:END **/
/** deleted:START **/
.deleted:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-style: normal;
  padding-right: 6px;
  content: "\f05e";
  color: #ee3939;
}

/** deleted:END **/
/********************************      樣式定義: END      ********************************/
/********************************      元件樣式調整: START      ********************************/
.UIDataTable tbody .UIDataColumn .UIButton,
.UIPaginatedDataTable tbody .UIDataColumn .UIButton {
  height: 24px;
}

.UIDataTable tbody .UIDataColumn .UITextWrapper,
.UIPaginatedDataTable tbody .UIDataColumn .UITextWrapper {
  height: 26px;
}

/********************************      元件樣式調整: END      ********************************/
/********************************      messageCenter: START      ********************************/
.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: #fff;
}

.messageCenter.dark {
  background-color: #000;
}

/******** messageBox: START ********/
.messageCenter .messageBox {
  border: 1px solid rgba(0, 0, 0, 0.2);
  width: 320px;
  min-height: 420px;
  position: relative;
  padding: 24px 12px;
}

.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: #f00032;
  width: 56px;
  height: 56px;
  margin: 48px auto;
}

.messageCenter .messageBox > .icon i {
  color: #fff;
  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;
  color: #000;
  font-size: 1.4rem;
  margin-bottom: 24px;
}

.messageCenter .messageBox > .UIGroup.message > .content {
  text-align: center;
  padding-bottom: 48px;
}

.messageCenter .messageBox > .tip {
  color: #a4a4a7;
  font-size: 0.8rem;
  text-align: center;
  width: 100%;
  padding-bottom: 12px;
  position: absolute;
  bottom: 0;
}

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

/** dark:EMD **/
/******** messageBox: END ********/
/******** privacyPolicy: END ********/
.privacyPolicy {
  margin: 48px auto 0 auto;
  width: 800px;
}

.privacyPolicy > .caption {
  font-size: 1.6rem;
  padding: 24px 0;
}

.privacyPolicy .session {
  margin-bottom: 24px;
}

.privacyPolicy .session > .caption {
  font-size: 1.4rem;
}

/******** privacyPolicy: END ********/
/******** addToHomeBox: START ********/
.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;
  margin-bottom: 48px;
}

.messageCenter .addToHomeBox .logo {
  text-align: center;
  margin-bottom: 24px;
}

.messageCenter .addToHomeBox .logo > .UIImage {
  /* width: 64px; */
  height: 64px;
  margin: 0 auto;
}

.messageCenter .addToHomeBox .logo > .UILabel {
  display: block;
  text-align: center;
  padding: 12px 0;
}

.messageCenter .addToHomeBox .message {
  color: #000;
  display: block;
  font-size: 1.2rem;
  padding-bottom: 24px;
}

.messageCenter .addToHomeBox .bottom {
  border-radius: 12px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  background-color: #eee;
  width: 320px;
  padding: 24px;
  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: 0 6px;
}

/******** addToHomeBox: END ********/
/********************************      messageCenter: END      ********************************/
/********************************      youtube-container: END      ********************************/
.youtubeContainer {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

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

/********************************      youtube-container: END      ********************************/
/********************************      breadCrumbView (路徑顯示/產品編輯時使用):START      ********************************/
#breadCrumbView {
  background-color: #e4ebec;
  margin-bottom: 12px;
  padding: 4px 12px;
}

#breadCrumbView .breadCrumb {
  font-size: 0.9rem;
}

#breadCrumbView .breadCrumb:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f015";
  padding: 0 12px 0 0;
}

#breadCrumbView .breadCrumb .UILabel,
#breadCrumbView .breadCrumb .UILink {
  color: #666;
  display: inline-block;
  padding: 0 3px;
}

#breadCrumbView .breadCrumb .UILabel:after,
#breadCrumbView .breadCrumb .UILink:after {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f054";
  font-size: 12px;
  padding-left: 3px;
}

#breadCrumbView .breadCrumb .UILabel:last-child:after,
#breadCrumbView .breadCrumb .UILink:last-child:after {
  content: "";
}

/********************************      breadCrumbView:END      ********************************/
/** style.scss/前台網站共用樣式定義 **/
/********************************      style_frontsite.scss:START      ********************************/
/********************************      style_frontsite.scss:START      ********************************/
/********************************      wrapper:START      ********************************/
#wrapper {
  display: flex;
  /* 內容元素排列方式 [row: 左到右, row-reverse: row相反, column: 上到下, column-reverse: column相反]*/
  flex-direction: column;
  height: 100%;
}

#wrapper #centerView {
  flex-grow: 1;
}

/********************************      wrapper:END      ********************************/
/********************************      WebKit/layout:UIPanel:START      ********************************/
.UIPanel.box {
  border-top: 3px solid #08b;
}

.UIPanel.box > .top > .caption {
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  border-bottom: none;
  font-size: 1.4rem;
  height: 72px;
}
@media (max-width: 768px) {
  .UIPanel.box > .top > .caption {
    font-size: 1.2rem;
    height: 56px;
  }
}

.UIPanel.box > .content {
  padding-top: 0;
  padding-left: 24px;
  padding-right: 24px;
}
@media (max-width: 768px) {
  .UIPanel.box > .content {
    padding-left: 18px;
    padding-right: 18px;
  }
}

.UIPanel.box > .UIPanelBottom {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.UIPanel.box > .UIPanelBottom .UIButton {
  padding-left: 64px;
  padding-right: 64px;
}

/********************************      WebKit/layout:UIPanel:END      ********************************/
/********************************      WebKit/layout:UIGroup:START      ********************************/
#pageTitle.UIGroup {
  font-size: 2.8rem;
  text-align: center;
  padding: 24px 0;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  #pageTitle.UIGroup {
    font-size: 1.8rem;
    padding: 18px 0;
    margin-bottom: 18px;
  }
}

#pageTitle.UIGroup.bgImage {
  color: #fff;
  padding: 60px 0;
  margin-bottom: 48px;
}
@media (max-width: 768px) {
  #pageTitle.UIGroup.bgImage {
    padding: 18px 0;
    margin-bottom: 18px;
  }
}

#session.UIGroup {
  margin-bottom: 48px;
}

#session.UIGroup > .caption {
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: center;
  -webkit-justify-content: center;
  color: #000;
  font-size: 2rem;
  font-weight: 500;
  position: relative;
  padding: 36px 0 24px 0;
  margin-bottom: 36px;
}
@media (max-width: 768px) {
  #session.UIGroup > .caption {
    font-size: 1.8rem;
    padding: 18px 0;
  }
}

#session.UIGroup > .caption:before {
  content: "";
  position: absolute;
  height: 2px;
  width: 100px;
  background-color: #2250fc;
  bottom: -6px;
  margin: 0 auto;
  left: 0;
  right: 0;
}

#paragraph.UIGroup {
  margin-bottom: 24px;
}

#paragraph.UIGroup > .caption {
  font-size: 1.3rem;
  font-weight: 500;
  position: relative;
  padding: 24px 0;
}
@media (max-width: 768px) {
  #paragraph.UIGroup > .caption {
    font-size: 1.2rem;
    padding: 18px 0;
  }
}

/********************************      WebKit/layout:UIGroup:END      ********************************/
/********************************      headerView:START      ********************************/
/** topLineView:START **/
#headerView #topLineView {
  background-color: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#headerView #topLineView .container {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

#headerView #topLineView .UILink,
#headerView #topLineView .UILinkButton {
  display: inline-block;
  color: #2b2b2b;
  font-size: 0.9rem;
  padding: 6px;
}

#headerView #topLineView #topLineInfoView,
#headerView #topLineView #topLineMenuView {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
}

#headerView #topLineView #topLineInfoView .phone:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f095";
}

#headerView #topLineView #topLineInfoView .mail:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f0e0";
}

#headerView #topLineView #topLineMenuView > .UILink > i {
  /* color: $font-color-header-top-line; */
  padding-right: 6px;
}

#headerView #topLineView #topLineMenuView .login:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f090";
}

#headerView #topLineView #topLineMenuView .member:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f406";
}

#headerView #topLineView #topLineMenuView .contact:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f075";
}

#headerView #topLineView #topLineMenuView .cart:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f290";
}

#headerView #topLineView #topLineMenuView .cart #cartQty {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background-color: #08b;
  color: #fff;
  font-size: 0.8rem;
  padding: 0px 6px;
  margin-left: 2px;
}

#headerView #topLineView #topLineMenuView .language {
  display: none;
}

/** topLineView:END **/
/** topView:START **/
#headerView #topView {
  padding: 12px 0;
}

#headerView #topView .container {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: flex-end;
  -webkit-align-items: flex-end;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  position: relative;
}

#headerView #topView #logoView {
  margin-right: 18px;
}

#headerView #topView #logoView .UIImage {
  display: inline-block;
  height: 58px;
}

#headerView #topView #logoView .UILabel {
  line-height: 38px;
}

/** topView:END **/
#headerView #searchView {
  margin-bottom: 12px;
}

#headerView #topView #navBack {
  display: none;
  width: 24px;
  height: 48px;
  line-height: 48px;
  z-index: 999;
}

#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) {
  /* 產生每個選單後面一條分格線 */
  /*#headerView #topView #menuView .UIHorizontalNavigation > .menu > ul > li:before {
      content: "|";
      font-size: 12px;
      color: #ccc;
  }

  #headerView #topView #menuView .UIHorizontalNavigation > .menu > ul:first-of-type > li:first-child:before {
      content: "";
  }*/
  #headerView #topView #menuView .UIHorizontalNavigation > .menu > ul > li > a {
    font-size: 15px;
    padding: 24px 12px 12px 12px;
  }

  /* sticky */
  .UIApp.sticky #headerView #topView {
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 6px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 9999;
  }

  .UIApp.sticky #headerView #topView #logoView .UIImage {
    height: 42px;
  }

  .UIApp.sticky #headerView #topView .UIHorizontalNavigation > .menu > ul a {
    padding: 12px;
  }
}
@media (max-width: 768px) {
  #headerView #topView #logoView {
    text-align: center;
    margin: 0 auto;
  }

  #headerView #topView #logoView .UIImage {
    height: 42px;
  }

  #headerView #topView #iconView .icon {
    display: inline-block;
    position: relative;
    font-size: 22px;
    width: 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
  }

  #headerView #topView #iconView .icon > i {
    font-size: 22px;
  }

  #headerView #topView #iconView .icon > #cartQty2 {
    /* 手機版: 顯示購物車數量 */
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    background-color: #08b;
    color: #fff;
    padding: 3px 4px;
    font-size: 0.8rem;
    line-height: 11px;
    position: absolute;
    right: 8px;
    top: 18px;
  }

  #headerView #topView #menuView .UIHorizontalNavigation .navigation-wrapper {
    border-right: 1px solid rgba(0, 0, 0, 0.2);
  }

  #headerView #topView #menuView .UIHorizontalNavigation .navigation-wrapper #tools {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  #headerView #topView #menuView .UIHorizontalNavigation .navigation-wrapper #tools .UILink {
    display: inline-block;
    width: 100%;
  }

  #headerView #topView #menuView .UIHorizontalNavigation .navigation-wrapper #tools i {
    display: block;
    font-size: 18px;
    padding: 6px 0 0 0;
    text-align: center;
  }

  #headerView #topView #menuView .UIHorizontalNavigation .navigation-wrapper #tools span {
    display: block;
    font-size: 0.8em;
    text-align: center;
    padding: 3px 0 3px 0;
  }

  /**
  #headerView #topView #menuView .UIHorizontalNavigation .navigation-wrapper ul#tools > li {
      display: inline-block;
  }

  #headerView #topView #menuView .UIHorizontalNavigation .navigation-wrapper ul#tools > li i {
      display: block;
      font-size: 18px;
      padding: 6px 0 0 0;
      text-align: center;
  }

  #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 #headerView {
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 6px 0;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 99;
  }

  .UIApp.sticky #headerView #topView {
    padding: 0;
  }

  .UIApp.sticky #headerView #topView #navBack {
    display: none !important;
  }

  .UIApp.sticky #headerView #topView #iconView .language {
    display: none;
  }

  .UIApp.sticky #headerView #topView #navToggle,
.UIApp.sticky #headerView #topView #iconView {
    z-index: 999;
  }

  .UIApp.sticky #headerView #searchView {
    background-color: #fff;
    padding-top: 12px;
    padding-bottom: 12px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
  }

  .UIApp.sticky #headerView #searchView .UISearchWrapper {
    width: 70%;
    margin: 0 auto;
  }

  /** 隱藏LOGO: END **/
}
/********************************      headerView:END      ********************************/
/********************************      Var Definition      ********************************/
/********************************      footerView:START      ********************************/
#footerView {
  margin-top: 48px;
}

/********************************      footerView:END      ********************************/
/********************************      footerView.none:START      ********************************/
/** bottomView:START **/
#footerView > .none > #bottomView .description {
  color: #78909c;
}

#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;
}

#footerView > .none > #bottomView #followUsView ul > li {
  display: inline-block;
  padding: 12px;
}

#footerView > .none > #bottomView #followUsView .UILink:before {
  font-size: 32px;
}

/** bottomView:END **/
/** copyrightView:START **/
#footerView > .none #copyrightView .copyright {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  color: #78909c;
  font-size: 0.7rem;
  text-align: center;
  padding: 12px 0;
}

/** copyrightView:END **/
/********************************      footerView.none:END      ********************************/
/********************************      footerView.lite:START      ********************************/
/** bottomView:START **/
#footerView > .lite #bottomView {
  background-color: #fbfafa;
  padding: 12px 0;
  text-align: center;
  position: relative;
}

#footerView > .lite #bottomView .linkGroup {
  display: inline-block;
  padding: 12px;
}

#footerView > .lite #bottomView .linkGroup i {
  font-size: 24px;
}

#footerView > .lite #bottomView .linkGroup .UILinkButton {
  color: #2b2b2b;
}

#footerView > .lite #bottomView .description {
  color: #78909c;
}

#footerView > .lite #bottomView #followUsView {
  background-color: #fbfafa;
  text-align: center;
  position: relative;
}

#footerView > .lite > #bottomView #followUsView > .caption,
#footerView > .lite > #bottomView #followUsView > .content {
  display: inline-block;
  height: initial;
}

#footerView > .lite > #bottomView #followUsView ul {
  margin: 0 24px;
}

#footerView > .lite > #bottomView #followUsView ul > li {
  display: inline-block;
  padding: 8px;
}

#footerView > .lite > #bottomView #followUsView .UILink:before {
  font-size: 24px;
}

/** bottomView:END **/
/** copyrightView:START **/
#footerView > .lite #copyrightView .copyright {
  background-color: #fbfafa;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  color: #78909c;
  font-size: 0.7rem;
  text-align: center;
  padding: 12px 0;
}

/** copyrightView:END **/
/********************************      footerView.lite:END      ********************************/
/********************************      footerView.full:START      ********************************/
#footerView > .full {
  background-color: #f7f7f7;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
}

/** bottomView:START **/
#footerView > .full #bottomView {
  padding: 24px;
}

#footerView > .full #bottomView .site {
  color: #6a6a6a;
  font-size: 1.4rem;
  margin-bottom: 24px;
}

#footerView > .full #bottomView .linkGroup {
  margin-bottom: 24px;
}

#footerView > .full #bottomView #linkGroupView .linkGroup .title {
  color: #757575;
  display: block;
  font-size: 1.2rem;
  margin-bottom: 12px;
}

#footerView > .full #bottomView #linkGroupView .linkGroup .UILinkButton {
  color: #a1a1a1;
  display: block;
  font-size: 0.9rem;
  font-weight: 300;
  white-space: nowrap;
  padding-bottom: 12px;
}

#footerView > .full #bottomView #followUsView > .caption {
  color: #757575;
  display: block;
  font-size: 1.2rem;
  height: initial;
  margin-bottom: 12px;
}

#footerView > .full > #bottomView #followUsView ul li {
  margin-bottom: 4px;
}

#footerView > .full > #bottomView #followUsView .UILink:before {
  text-align: center;
  width: 1.25em;
  font-size: 20px;
  margin-left: 12px;
  margin-right: 6px;
}

#footerView > .full > #bottomView #followUsView .UILink:after {
  color: #a1a1a1;
  font-size: 1.2rem;
}

#footerView > .full > #bottomView #followUsView .UILink.facebook:after {
  content: "Facebook";
}

#footerView > .full > #bottomView #followUsView .UILink.line:after {
  content: "Line";
}

#footerView > .full > #bottomView #followUsView .UILink.weixin:after {
  content: "WeChat";
}

#footerView > .full > #bottomView #followUsView .UILink.linkedin:after {
  content: "LinkedIn";
}

#footerView > .full > #bottomView #followUsView .UILink.youtube:after {
  content: "Youtube";
}

#footerView > .full > #bottomView #followUsView .UILink.instagram:after {
  content: "Instagram";
}

#footerView > .full > #bottomView #followUsView .UILink.twitter:after {
  content: "Twitter";
}

#footerView > .full > #bottomView #followUsView .UILink.weibo:after {
  content: "Weibo";
}

/** bottomView:END **/
/** copyrightView:START **/
#footerView > .full #copyrightView {
  background-color: #a8a8a8;
}

#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;
}

#footerView > .full #copyrightView .copyright {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 200;
  width: 100%;
  padding: 12px 0;
}

#footerView > .full #copyrightView .copyright .UIImage {
  height: 24px;
  margin-right: 12px;
}

#footerView > .full #copyrightView ul {
  display: inline-block;
  padding-top: 12px;
  float: right;
}

#footerView > .full #copyrightView ul i {
  color: #78909c;
}

#footerView > .full #copyrightView ul li {
  display: inline-block;
  padding-left: 24px;
}

#footerView > .full #copyrightView ul li i {
  display: inline-block;
  font-size: 24px;
}

/** copyrightView:END **/
@media (max-width: 768px) {
  #footerView > .full #bottomView #linkGroupView .linkGroup .title {
    cursor: pointer;
  }

  #footerView > .full #bottomView #linkGroupView .linkGroup .content {
    display: none;
    padding-left: 12px;
  }

  #footerView > .full #bottomView #linkGroupView .linkGroup:hover .content {
    display: block;
  }
}
/********************************      footerView.full:END      ********************************/
/********************************      nav_bar.inc:START      ********************************/
.UIApp #topIcon {
  display: none;
  bottom: 80px;
}

.UIApp.sticky #topIcon {
  display: block;
}

/********************************      nav_bar.inc:END      ********************************/
/********************************      Var Definition      ********************************/
/********************************      loginView:START      ********************************/
#login #loginView {
  max-width: 480px;
  margin: 48px auto;
}
@media (max-width: 768px) {
  #login #loginView {
    max-width: initial;
    margin: 32px 18px;
  }
}

@media (min-width: 768px) {
  #login #loginView.UIPanel > .content {
    max-width: 360px;
    margin: 0 auto;
  }
}

#login #loginView .UITextWrapper {
  height: 48px;
  padding-left: 36px;
}

#login #loginView #loginIdW.UITextWrapper:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f007";
  font-size: 18px;
  padding-left: 12px;
  position: absolute;
  left: 0;
  line-height: 42px;
  z-index: 9;
}

#login #loginView #passwordW.UITextWrapper:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f084";
  font-size: 18px;
  padding-left: 12px;
  position: absolute;
  left: 0;
  line-height: 42px;
  z-index: 9;
}

#login #loginView .btnLogin {
  margin-top: 18px;
}

#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 {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}

#login #loginView .control .UILink:first-child {
  border-left: none;
}

#login #loginView .btnRemindPassword,
#login #loginView .btnAccountRegister {
  display: inline-block;
  padding: 6px 12px;
}

#login #loginView .btnRemindPassword:hover,
#login #loginView .btnAccountRegister:hover {
  background-color: #eee;
}

/********************************      loginView:END      ********************************/
/********************************      registerView:START      ********************************/
#register #registerView {
  max-width: 600px;
  margin: 48px auto;
}
@media (max-width: 768px) {
  #register #registerView {
    max-width: initial;
    margin: 32px 18px;
  }
}

#register #registerView.UIPanel > .content {
  padding-left: 48px;
  padding-right: 48px;
}
@media (max-width: 768px) {
  #register #registerView.UIPanel > .content {
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (max-width: 768px) {
  #register #registerView .UIForm .UIFormItem > th {
    display: none;
  }
}

#register #registerView .btnCertifiedCode {
  background-color: #000;
}

#register #registerView .btnCertifiedCode:after {
  content: attr(data-content);
}

/********************************      registerView:END      ********************************/
/********************************      registerSuccessView:START      ********************************/
#registerSuccessView {
  max-width: 480px;
  margin: 48px auto;
}

#registerSuccessView .UILabel {
  display: block;
  white-space: normal;
  word-break: break-all;
  text-align: center;
  padding: 24px;
}

/********************************      registerSuccessView:END      ********************************/
/********************************      remindPasswordView:START      ********************************/
#remindPasswordView .UIForm .UIFormItem > span {
  white-space: initial;
}

/********************************      remindPasswordView:END      ********************************/
/********************************      account_security_setting.html:END      ********************************/
#account_security_setting .UIForm {
  margin-bottom: 24px;
}

#account_security_setting .accountLink {
  font-size: 1.2rem;
}

#account_security_setting .accountLink .UILink:before {
  font-size: 1.2rem;
}

/********************************      account_security_setting.html:END      ********************************/
/********************************      account_profile.html/accountProfileView:END      ********************************/
#account_security_certified #accountSecurityCertifiedView .btnCertifiedCode:after {
  content: attr(data-content);
}

/********************************      account_profile.html/accountProfileView:END      ********************************/
/********************************      language_selected: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: 6px;
  margin-bottom: 12px;
}

#language_selected .UILinkButton:hover {
  background-color: #08b;
  color: #fff;
}

/********************************      language_selected: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: 500;
  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 {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 24px;
  padding-top: 12px;
}
@media (max-width: 768px) {
  #memberCenterView #memberHomeView .myOrder {
    margin-top: 0;
    padding-top: 0;
  }
}

#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 {
  display: table;
  width: initial !important;
}

#member_order_detail #orderView .summary .UIForm td {
  display: inline-block;
  min-width: 120px;
  text-align: right;
}

#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      ********************************/
/********************************      Var Definition      ********************************/
@media (max-width: 768px) {
  .buttonMask {
    /* 修正控制按鈕固定在底下造成部分畫面顯示不完整的問題 */
    padding-bottom: 42px;
  }
}
/********************************  index:START  ********************************/
#index .UIPanel > .top > .caption {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 12px;
}

/********************************  index:END  ********************************/
/********************************  carouseView:START  ********************************/
#carouseView .carouse {
  position: relative;
}

#carouseView .carouse .UIContent {
  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%;
  padding: 24px;
  position: absolute;
  top: 0;
  left: 0;
  /**
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);**/
}

@media (max-width: 768px) {
  #carouseView .container {
    padding-left: 0;
    padding-right: 0;
  }
}
/********************************  carouseView:END  ********************************/
/********************************  latestAnnouncementView:START  ********************************/
#latestAnnouncementView {
  text-align: center;
}

#latestAnnouncementView .UISlider {
  background-color: #eee;
  padding: 12px 0;
}

/********************************  latestAnnouncementView:END  ********************************/
/********************************  adView:START  ********************************/
#adView .ad {
  text-align: center;
  position: relative;
}

#adView .ad .UIContent {
  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%;
  position: absolute;
  top: 0;
  left: 0;
  /**
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);**/
}

/********************************  adView:END  ********************************/
/********************************      latestProductView:START      ********************************/
/********************************      latestProductView:END      ********************************/
/********************************      categoryProductView:START      ********************************/
#categoryProductView .UIPanel.noBorder > .top > .UIPanelBar {
  top: 12px;
}

#categoryProductView .UIPanel.noBorder > .top > .UIPanelBar .more:after {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-style: normal;
  content: "\f105";
  font-size: 16px;
  padding-left: 12px;
}

#categoryProductView #productListView.grid #productItemView {
  margin-bottom: 0;
}

/********************************      categoryProductView:END      ********************************/
/********************************  featureView:START  ********************************/
#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;
}

#featureView .UIHorizontalList > .row > div .feature {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

#featureView .UIHorizontalList > .row > div:last-child .feature {
  border-right: none;
}

#featureView .feature .icon {
  font-size: 36px;
  padding-right: 12px;
}

#featureView .feature .image {
  padding-right: 12px;
}

#featureView .feature .title {
  display: block;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 800;
  padding-bottom: 4px;
}

#featureView .feature .UIGroup .content {
  display: block;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  #featureView .feature {
    margin-bottom: 24px;
  }
}
/********************************  featureView:END  ********************************/
/********************************  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      ********************************/
/********************************      quickMenuView:START      ********************************/
#quickMenuView {
  background-color: #f8f8f8;
  margin-bottom: 12px;
}
@media (max-width: 768px) {
  #quickMenuView {
    margin-bottom: 0;
  }
}

#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: 12px;
}

/********************************      quickMenuView:START      ********************************/
/********************************      breadCrumbView:START      ********************************/
#breadCrumbView {
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  #breadCrumbView {
    background-color: transparent;
    margin-top: 0;
    margin-bottom: 18px;
    padding: 0;
  }
}

#breadCrumbView > .container {
  display: flex;
  /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

#breadCrumbView .breadCrumb .UILabel,
#breadCrumbView .breadCrumb .UILink {
  line-height: 36px;
}

/** groupBar:START **/
#breadCrumbView .groupBar > .sort {
  display: inline-block;
  line-height: 36px;
}

#breadCrumbView .groupBar > .sort .UILabel {
  display: inline-block;
}

#breadCrumbView .groupBar > .sort .UILabel:after {
  content: "|";
  margin-left: 6px;
  font-weight: 300;
}

#breadCrumbView .groupBar > .sort .UIMenuWrapper {
  background-color: initial;
  border: 0;
  display: inline-block;
  margin: 0px;
  width: initial;
}

#breadCrumbView .groupBar > .sort .UIMenuWrapper:before {
  content: "";
  border-left: 0;
}

#breadCrumbView .groupBar > .sort .UIMenuWrapper .UIMenu {
  background-color: transparent;
  padding-left: 12px;
}

#breadCrumbView .groupBar > .viewMode {
  display: inline-block;
  line-height: 36px;
}

#breadCrumbView .groupBar > .viewMode > .UILink {
  color: #ccc;
  cursor: pointer;
  display: inline-block;
  line-height: 32px;
  text-align: center;
  margin-left: 10px;
  width: 32px;
  height: 32px;
}

#breadCrumbView .groupBar > .viewMode > .UILink:hover,
#breadCrumbView .groupBar > .viewMode > .UILink:hover > i,
#breadCrumbView .groupBar > .viewMode > .active,
#breadCrumbView .groupBar > .viewMode > .active > i {
  border-color: #2b2b2b;
  color: #2b2b2b;
}

/** groupBar:END **/
/********************************      breadCrumbView:END      ********************************/
/********************************      categoryView:START      ********************************/
#categoryMenuView {
  position: relative;
  padding-right: 24px;
}

#categoryMenuView > ul > li a {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: block;
  padding: 8px 12px;
  white-space: nowrap;
}

#categoryMenuView > ul ul > li a {
  padding-left: 24px;
}

#categoryMenuView > ul ul ul > li a {
  padding-left: alc(36px);
}

#categoryMenuView > ul > li a:hover,
#categoryMenuView > ul > li a.active {
  font-weight: 900;
}

/********************************      categoryView:END      ********************************/
/********************************  productListView:START  ********************************/
/** grid:START **/
#productListView.grid #productItemView {
  background-color: #fff;
  position: relative;
  margin-bottom: 18px;
}

#productListView.grid #productItemView:hover {
  /* 設定所有樣式變更都有轉場效果 */
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -o-transition: all 0.8s;
  transform: scale(1.03);
}

#productListView.grid #productItemView .productImage {
  position: relative;
}

#productListView.grid #productItemView .productImage .share {
  display: none;
  position: absolute;
  right: 0;
  bottom: 14px;
}

#productListView.grid #productItemView .productImage .share > .UIShareButton {
  height: auto;
}

#productListView.grid #productItemView .productImage .favorites {
  display: none;
  position: absolute;
  left: 0;
  bottom: 18px;
}

#productListView.grid #productItemView .productImage .favorites .UILink {
  padding: 3px 6px;
}

#productListView.grid #productItemView .productImage .favorites .UILink.join:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 500;
  font-style: normal;
  color: #d90101;
  content: "\f004";
}

#productListView.grid #productItemView .productImage .favorites .UILink.joined:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-style: normal;
  color: #d90101;
  content: "\f004";
}

#productListView.grid #productItemView .productDetail {
  display: flex;
  /* 內容元素排列方式 [row: 左到右, row-reverse: row相反, column: 上到下, column-reverse: column相反]*/
  flex-direction: column;
  padding: 6px;
  min-height: 60px;
}

#productListView.grid #productItemView .productDetail .productName {
  /* 設定內容超過幾行就會產生 ... */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  flex-grow: 1;
}

#productListView.grid #productItemView .productDetail .productPrice {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  /* flex-basis: 24px; */
  padding-right: 36px;
}

#productListView.grid #productItemView .productDetail .productPrice .price {
  color: #d90101;
  font-size: 1.2rem;
  font-weight: 500;
  margin-right: 8px;
}

#productListView.grid #productItemView .productDetail .productPrice .listPrice {
  color: #8e8e8e;
  font-size: 0.9rem;
  text-decoration: line-through;
}

#productListView.grid #productItemView .productDetail .productPrice .price .symbol,
#productListView.grid #productItemView .productDetail .productPrice .listPrice .symbol {
  font-size: 0.9rem;
  padding-right: 2px;
}

#productListView.grid #productItemView .productDetail .productCart {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
}

#productListView.grid #productItemView .productDetail .productCart .addCart {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  border: none;
  display: inline-block;
  padding: 2px 8px;
}

#productListView.grid #productItemView .productDetail .productCart .addCart:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  content: "\f290";
  font-size: 22px;
}

#productListView.grid #productItemView .productDetail .productNote {
  display: none;
  font-size: 0.9rem;
}

/** grid:END **/
/** 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 .productDetail {
  padding: 8px 8px;
  margin-right: 48px;
}

#productListView.list #productItemView .productDetail .productName {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 12px;
}

#productListView.list #productItemView .productDetail .productName .brand {
  display: block;
  font-size: 14px;
}

#productListView.list #productItemView .productDetail .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 .productDetail .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 .productDetail .productCart i {
  font-size: 22px;
}

#productListView.list #productItemView .productDetail .productCart .addFavorites {
  display: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#productListView.list #productItemView .productDetail .productPrice .price {
  color: #d90101;
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 500;
  padding-right: 24px;
}

#productListView.list #productItemView .productDetail .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  ********************************/
/********************************      productView:START      ********************************/
#productView .productImage {
  margin-bottom: 24px;
}

#productView .productImage .image {
  position: relative;
}

#productView .productImage .image .UILabel {
  background-color: #08b;
  color: #fff;
  display: block;
  padding: 3px 12px;
  position: absolute;
  top: 3px;
  right: 3px;
}

#productView .productImage .image .UIImage {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #fff;
  margin-bottom: 12px;
  padding: 3px;
}

#productView .productImage #thumbnail {
  margin-bottom: 12px;
}

#productView .productImage #thumbnail .UIImage {
  padding: 2px;
}

#productView .productImage .promotionList .discountList > .UIGroup,
#productView .productImage .promotionList .freeGiftList > .UIGroup {
  font-weight: 300;
  margin-bottom: 12px;
}

#productView .productImage .promotionList .UILabel {
  display: inline-block;
  line-height: 22px;
}

#productView .productImage .promotionList .type {
  background-color: #000;
  color: #fff;
  font-size: 0.9rem;
  padding: 0 6px;
  margin-right: 12px;
}

#productView .productInfo {
  margin-left: 48px;
}

#productView .productInfo .productName {
  margin-bottom: 12px;
}

#productView .productInfo .productName .flashSale {
  background-color: #000;
  color: #fff;
  display: inline;
  padding: 0 12px;
  font-size: 14px;
}

#productView .productInfo .productName .flashSale:after {
  content: "\a";
  white-space: pre;
}

#productView .productInfo .productName .preOrder {
  background-color: #000;
  color: #fff;
  display: inline-block;
  padding: 0 12px;
  margin-right: 12px;
  margin-top: 2px;
  font-size: 14px;
}

#productView .productInfo .productName .brand {
  display: inline-block;
  font-size: 0.8rem;
  margin-bottom: 6px;
}

#productView .productInfo .productName .name {
  font-size: 1.6rem;
  display: block;
}

#productView .productInfo .productPrice {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  margin-bottom: 12px;
}

#productView .productInfo .productPrice .price {
  color: #d90101;
  display: inline-block;
  font-size: 1.6rem;
}

#productView .productInfo .productPrice .listPrice {
  color: #78909c;
  display: inline-block;
  font-size: 1.2rem;
  text-decoration: line-through;
  padding-left: 24px;
}

#productView .productInfo .productPrice .price .symbol,
#productView .productInfo .productPrice .listPrice .symbol {
  font-size: 0.9rem;
  padding-right: 2px;
}

#productView .productInfo .productPromotion .UILabel {
  background-color: #666;
  color: #fff;
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 300;
  padding: 2px 12px;
  margin-right: 12px;
  margin-bottom: 12px;
}

#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: transparent;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.9rem;
  padding: 12px;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  #productView .productInfo .productSummary {
    margin-bottom: 18px;
  }
}

#productView .productInfo .productSpec {
  margin-bottom: 12px;
}

#productView .productInfo .productSpec div {
  /* 取消產品規格不折行造成畫面突出 */
  white-space: initial;
}

#productView .productInfo .productSpec .productSku .tag {
  background-color: #eee;
  display: inline-block;
  padding: 3px 6px;
  margin-right: 6px;
  margin-bottom: 6px;
}

#productView .productInfo .productSpec .productSku .tag.active {
  background-color: #b1b0b0;
}

#productView .productInfo .productSpec .productSku #productSkuName01 .UILinkButton.active,
#productView .productInfo .productSpec .productSku #productSkuName02 .UILinkButton.active {
  background-color: #878787;
  color: #fff;
}

/** shoppingCart:START **/
#productView .productInfo .shoppingCart {
  margin-bottom: 12px;
}

#productView .productInfo .shoppingCart .UIButton {
  /* width: 100%; */
  height: 42px;
}

#productView .productInfo .shoppingCart .UIButton.addBuy {
  background-color: #006677;
}

#productView .productInfo .shoppingCart .UIButton.addBuy:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f290";
  font-size: 16px;
}

/** shoppingCart:END **/
/** likes(favorites/share):START **/
#productView .productInfo .likes {
  margin-bottom: 12px;
}

#productView .productInfo .likes .favorites {
  /* text-align: right;
  margin-bottom: $margin-webkit; */
}

#productView .productInfo .likes .favorites .UIButton {
  background-color: #d90101;
  width: 100%;
}

#productView .productInfo .likes .favorites .UIButton:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f004";
}

#productView .productInfo .likes .share .UIShareButton {
  background-color: transparent;
  border: 1px solid #006677;
  color: #08b;
  width: 100%;
}

/** likes(favorites/share):END **/
#productView .productInfo .generalNote {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 12px;
}

/* 固定組合 */
#productView .productInfo #fixedBundleProductView.UIGroup {
  background-color: transparent;
  border: 1px solid #e5e5e5;
  margin-bottom: 24px;
}

#productView .productInfo #fixedBundleProductView.UIGroup .body {
  padding: 12px;
}

#productView .productInfo #fixedBundleProductView.UIGroup .body .UIGroup {
  margin-bottom: 4px;
}

#productView .productInfo .fixedBundleProductView .UIForm {
  margin-bottom: 12px;
}

/* 任選組合 */
#productView .productInfo #optionBundleProductView.UIGroup {
  background-color: transparent;
  border: 1px solid #e5e5e5;
  margin-bottom: 24px;
}

#productView .productInfo #optionBundleProductView.UIGroup .body {
  padding: 12px;
}

#productView .productInfo #optionBundleProductView .UIFixedLayout {
  display: flex;
  /* 垂直對齊 [flex-start: 靠上對齊, flex-end: 靠下對齊, center: 置中, stretch: 內容撐開至高度, baseline: 以中間基準線對齊]*/
  align-items: center;
  -webkit-align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-left: 6px;
  padding-bottom: 3px;
  margin-bottom: 3px;
}

#productView .productInfo #optionBundleProductView .UIFixedLayout:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

#productView .productInfo #optionBundleProductView .UIFixedLayout:disabled {
  background-color: #e9ecef;
}

#productView .productInfo #optionBundleProductView .UIFixedLayout.A .UIGroup.name:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-style: normal;
  color: #45a9f6;
  content: "\f525";
  padding-right: 6px;
}

#productView .productInfo #optionBundleProductView .UIFixedLayout.B .UIGroup.name:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-style: normal;
  color: #0bcf89;
  content: "\f528";
  padding-right: 6px;
}

#productView .productInfo #optionBundleProductView .UIFixedLayout.G .UIGroup.name:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-style: normal;
  color: #fb0104;
  content: "\f06b";
  padding-right: 6px;
}

/* 任選組合 */
#productView #productExtView {
  margin: 24px 0 48px 0;
}

#productView #productExtView .UIContent {
  display: block;
}

#productView #productExtView .productAttribute .inventory {
  /* 暫時不顯示庫存 */
  display: none;
}

#productView #shoppingNoticeView > .UIGroup {
  margin-bottom: 24px;
}

#productView #productReviewView .rating {
  color: #78909c;
  padding: 6px;
}

#productView #productReviewView .rating .timestamp {
  font-size: 0.7rem;
}

#productView #productReviewView #writeReview:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-style: normal;
  padding-right: 6px;
  content: "\f303";
}

#productView #productReviewView #writeReview {
  margin-right: 6px;
}

/** 彈出預覽大圖: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 **/
#product #recentlyViewedProductView.UIPanel > .top > .caption {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  #productView .productInfo {
    margin-left: 0;
  }

  #productView .productInfo .shoppingCart {
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    display: flex;
    /* 水平對齊 [flex-start: 靠左對齊, flex-end: 靠右對齊, center: 置中, space-between:左右對齊, space-around: 平均分配間距]*/
    justify-content: space-between;
    -webkit-justify-content: space-between;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #fff;
    /* width: calc(100% - 12px); */
    margin: 3px;
    padding: 6px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
  }

  #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 .productInfo .shoppingCart .joined i {
    color: #d90101;
  }

  #productView .video iframe {
    width: 100%;
    height: 100%;
  }

  .Box #productView .col-md-5 {
    width: 30%;
    float: left;
  }

  .Box #productView .col-md-7 {
    width: 70%;
    float: left;
  }
}
/********************************      productView: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      ********************************/
/********************************      cart.html/cartView:START      ********************************/
/* 設定產品名稱上顯示可海外購物圖示 */
#cart #cartView .UIDataTable .UIDataColumn {
  margin: 0 12px;
}

#cart #cartView i.overseaShip:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f5b0";
  font-size: 16px;
}

#cart #cartView .quantity {
  text-align: center;
}

#cart #cartView .btnDelete i {
  font-size: 22px;
}

#cart #cartView .amount {
  font-size: 1.2rem;
  font-weight: 500;
}

#cart #cartView .discount .UIDataTable > table > thead > tr > th,
#cartView .UIDataTable > table > tbody > tr > td {
  border-bottom: 0;
}

#cart #cart #cartView .discount .UIDataTable > table > tbody > tr.contrast {
  background-color: transparent;
}

#cart #cart #cartView .freeGift {
  padding-left: 6px;
}

#cart #cartView .freeGift .UIGroup {
  padding: 6px;
}

#cart #cartView .coupon {
  padding: 6px;
}

/* summary:START */
#cart #cartView .summary {
  float: right;
  padding-top: 12px;
}

#cart #cartView .summary .UIForm {
  display: table;
  width: initial !important;
}

#cart #cartView .summary .UIForm td {
  display: inline-block;
  min-width: 120px;
  text-align: right;
}

#cart #cartView .summary .separator {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

#cart #cartView .summary .total {
  font-size: 1.6rem;
  font-weight: 600;
}

/* summary:END */
#cart #cartView .btnCartBack {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #2b2b2b;
}

#cart #cartView .btnCartBack:hover {
  color: #fff;
}

#cart #cartView .btnCartBack:hover {
  background-color: #ce5048;
}

#cart #cartView .btnCartCheckoutOversea {
  background-color: #ff0d49;
  margin: 0 12px;
}

#cart #cartView .btnCartCheckoutOversea:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f5b0";
  font-size: 12px;
}

@media (max-width: 768px) {
  #cart #cartView .btnCartBack {
    border: 0;
  }
}
/********************************      cartView:END      ********************************/
/********************************      checkout.html/checkoutView:START      ********************************/
/* deliveryMethodView/paymentView:START */
#checkout #checkoutView #deliveryMethodView .UIDataTable,
#checkout #checkoutView #paymentView .UIDataTable {
  margin: -24px -24px 0 -24px;
}
@media (max-width: 768px) {
  #checkout #checkoutView #deliveryMethodView .UIDataTable,
#checkout #checkoutView #paymentView .UIDataTable {
    margin: -18px -18px 0 -18px;
  }
}

#checkout #checkoutView #deliveryMethodView .UIDataTable > table > thead > tr > th,
#checkout #checkoutView #paymentView .UIDataTable > table > thead > tr > th {
  border-bottom: none;
}

#checkout #checkoutView #deliveryMethodView .UIDataTable > table > tbody > tr.contrast,
#checkout #checkoutView #paymentView .UIDataTable > table > tbody > tr.contrast {
  background-color: transparent;
}

#checkout #checkoutView #deliveryMethodView .UIDataTable .contrast .UIDataColumn:first-child,
#checkout #checkoutView #paymentView .UIDataTable .contrast .UIDataColumn:first-child {
  padding-left: 24px;
}

#checkout #checkoutView #deliveryMethodView .UILabel,
#checkout #checkoutView #paymentView .UILabel {
  color: #656565;
}

#checkout #checkoutView #paymentView #orderDiscountView .UILabel {
  line-height: 34px;
}

/* deliveryMethodView/paymentView:END */
/* shipToView:START */
#checkout #checkoutView #shipToView #shipToCvStoreView .btnMap {
  margin-left: 12px;
}

#checkout #checkoutView #shipToView #shipToCvStoreView .btnMap:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-style: normal;
  padding-right: 6px;
  content: "\f5a0";
  font-size: 14px;
}

/* shipToView:END */
/* checkoutItem:START */
#checkout #checkoutView .checkoutItem.UIPanel > .content > .UIDataTable {
  margin: -24px -24px 0 -24px;
}
@media (max-width: 768px) {
  #checkout #checkoutView .checkoutItem.UIPanel > .content > .UIDataTable {
    margin: -18px -18px 0 -18px;
  }
}

#checkout #checkoutView .checkoutItem .UIDataTable > table > thead > tr > th {
  border-bottom: none;
}

#checkout #checkoutView .checkoutItem .amount {
  font-size: 1.2rem;
  font-weight: 500;
}

#checkout #checkoutView .checkoutItem .discount .UIDataTable > table > thead > tr > th,
#checkoutView .UIDataTable > table > tbody > tr > td {
  border-bottom: 0;
}

#checkout #checkoutView .checkoutItem .discount .UIDataTable > table > tbody > tr.contrast {
  background-color: transparent;
}

#checkout #checkoutView .checkoutItem .coupon {
  padding: 6px;
}

/* checkoutItem:END */
/* summary:START */
#checkout #checkoutView .summary {
  float: right;
  padding-top: 12px;
}

#checkout #checkoutView .summary .UIForm {
  display: table;
  width: initial !important;
}

#checkout #checkoutView .summary .UIForm td {
  display: inline-block;
  min-width: 120px;
  text-align: right;
}

#checkout #checkoutView .summary .separator {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

#checkout #checkoutView .summary .total {
  font-size: 1.6rem;
  font-weight: 600;
}

/* summary:END */
@media (max-width: 768px) {
  #checkout #checkoutView #shippingInfoView #shipRecipientView {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
  }
}
/********************************      checkoutView:END      ********************************/
/********************************      paymentView:START      ********************************/
/* checkoutItem:START */
#paymentView .checkoutItem .amount {
  font-size: 1.2rem;
  font-weight: 500;
}

#paymentView .checkoutItem .discount .UIDataTable > table > thead > tr > th,
#checkoutView .UIDataTable > table > tbody > tr > td {
  border-bottom: 0;
}

#paymentView .checkoutItem .discount .UIDataTable > table > tbody > tr.contrast {
  background-color: transparent;
}

#paymentView .checkoutItem .coupon {
  padding: 6px;
}

/* checkoutItem:END */
/* summary:START */
#paymentView .summary .UIForm {
  width: auto !important;
  display: table;
}

#paymentView .summary .UIForm td {
  display: inline-block;
  min-width: 120px;
  text-align: right;
}

#paymentView .summary .separator {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

#paymentView .summary .total {
  font-size: 1.2rem;
  font-weight: 600;
}

#paymentView .summary .totalPay {
  color: #d90101;
  font-size: 1.6rem;
  font-weight: 600;
}

#paymentView .summary .UIButton {
  font-size: 1.4rem;
  font-weight: 500;
}

/* summary:END */
/********************************      paymentView:END      ********************************/
/********************************      orderView:START      ********************************/
#order #orderView #orderView.UIPanel > .UIPanelBottom {
  padding-top: 24px;
}

@media (min-width: 1200px) {
  #order #orderView .orderShipTo {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    padding-left: 24px;
  }
}
@media (max-width: 768px) {
  #order #orderView .orderShipTo {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
}

#order #orderView .orderHeader,
#order #orderView .orderItem {
  margin-bottom: 24px;
}

/* summary:START */
#order #orderView .summary .UIForm {
  display: table;
  width: initial !important;
}

#order #orderView .summary .UIForm td {
  display: inline-block;
  min-width: 120px;
  text-align: right;
}

#order #orderView .summary .separator {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

#order #orderView .summary .total {
  color: #2b2b2b;
  font-size: 1.2rem;
  font-weight: 600;
}

#order #orderView .summary .totalPay {
  color: #d90101;
  font-size: 1.6rem;
  font-weight: 600;
}

/* summary:END */
/********************************      orderView:END      ********************************/
@media (max-width: 768px) {
  #cartView .UIPanelBottom,
#checkoutView .UIPanelBottom,
#paymentView .UIPanelBottom {
    background-color: #fff;
    padding: 12px 24px;
    width: 100%;
    height: initial;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
  }

  #cartView .UIPanelBottom .UIButton,
#checkoutView .UIPanelBottom .UIButton,
#paymentView .UIPanelBottom .UIButton {
    border-radius: 24px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
    width: 100%;
  }
}
/********************************      blogView:START      ********************************/
#blogView {
  /* margin: $margin-page 0; */
}

/** list:START **/
#blogView .list #blogItemView {
  padding: 24px 48px 24px 0;
}

#blogView .list #blogItemView .image {
  padding-right: 24px;
}

#blogView .list #blogItemView .title {
  font-size: 1.4rem;
  margin-bottom: 12px;
}

#blogView .list #blogItemView .preface {
  /* 設定內容超過幾行就會產生 ... */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

#blogView .list #blogItemView .more {
  margin-bottom: 12px;
}

#blogView .list #blogItemView .info {
  margin-bottom: 12px;
}

/** list:END **/
/** grid:START **/
#blogView .grid #blogItemView .title {
  padding: 12px;
}

/** grid:END **/
/********************************      blogView:END      ********************************/
/********************************      postView:START      ********************************/
#postView .title {
  display: block;
  font-size: 1.6rem;
  margin-bottom: 12px;
}

#postView .info {
  margin-bottom: 24px;
}

#postView .post {
  margin-bottom: 24px;
}

#postView .socialSharing {
  margin-bottom: 24px;
}

/********************************      postView:END      ********************************/
.recentPost .recentPostItem {
  margin-bottom: 12px;
}

.recentPost .recentPostItem .postDate {
  font-size: 0.9rem;
}

/********************************      contactUsView:START      ********************************/
#contactUsView {
  max-width: 640px;
  margin: 48px auto;
}

#contactUsView .serviceInformation {
  text-align: center;
  margin-bottom: 48px;
}

#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: 24px;
}

#contactUsView #followUsView > ul > li {
  display: inline-block;
}

#contactUsView #followUsView > ul > li:after {
  content: "|";
  padding: 0 24px;
}

#contactUsView #followUsView > ul > li:last-child:after {
  content: "";
  display: none;
}

#contactUsView #followUsView > ul > li a:before {
  font-size: 28px;
}

#contactUsView #contactForm {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

#contactUsView .successMessage {
  text-align: center;
  font-size: 1.2rem;
  padding: 48px;
}

/********************************      contactUsView:END      ********************************/
/********************************      storeView:START      ********************************/
#storeView {
  max-width: 640px;
  margin: 48px auto;
}

#storeView .description {
  margin-bottom: 48px;
}

#storeView .storeList .info .UIGroup {
  margin-bottom: 3px;
}

#storeView .storeList .info .name {
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 12px;
}

#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;
}

#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;
}

#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;
}

#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;
}

#storeView .UILine {
  margin: 24px 0;
}

@media (max-width: 768px) {
  #storeView {
    max-width: initial;
    margin: 32px auto;
  }

  #storeView .storeList .UIFixedLayout.responsive > div:first-child {
    width: 20% !important;
    padding-right: 12px;
  }

  #storeView .storeList .UIFixedLayout.responsive > div:last-child {
    width: 80% !important;
  }

  #storeView .storeList .UIImage {
    width: 80px;
    margin-bottom: 12px;
  }
}
/********************************      storeView:END      ********************************/
/********************************  category.scss/productListView:START  ********************************/
#productListView.grid #productItemView .productImage .share > .UIShareButton,
#productListView.grid #productItemView .productImage .favorites > .UILink {
  border-radius: 24px;
  -moz-border-radius: 24px;
  -webkit-border-radius: 24px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin: 0 6px;
}

/********************************  category.scss/productListView:END  ********************************/
/********************************      customerSiteView:START      ********************************/
#customerSiteView .UIPanel.website .content {
  padding: 0;
}

/********************************      customerSiteView:END      ********************************/