@charset "UTF-8";
/*載入檔案區*/
/*斷點設置*/
/*列印用*/
@font-face {
  font-family: "Montserrat-regular";
  src: local("Montserrat");
  src: url("../fonts/Montserrat/Montserrat-regular.woff") format("woff");
  src: url("../fonts/Montserrat/Montserrat-regular.ttf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat-Medium";
  src: local("Montserrat");
  src: url("../fonts/Montserrat/Montserrat-Medium.woff") format("woff");
  src: url("../fonts/Montserrat/Montserrat-Medium.ttf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat-Bold";
  src: local("Montserrat");
  src: url("../fonts/Montserrat/Montserrat-Bold.woff") format("woff");
  src: url("../fonts/Montserrat/Montserrat-Bold.ttf") format("opentype");
  font-weight: bold;
  font-style: bold;
}
@font-face {
  font-family: "NotoSansTC-regular";
  src: local("Noto Sans CJK TC");
  src: url("../fonts/Noto_Sans_TC/NotoSansTC-regular.woff") format("woff");
  src: url("../fonts/Noto_Sans_TC/NotoSansTC-regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "NotoSansTC-Medium";
  src: local("Noto Sans CJK TC");
  src: url("../fonts/Noto_Sans_TC/NotoSansTC-Medium.woff") format("woff");
  src: url("../fonts/Noto_Sans_TC/NotoSansTC-Medium.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Roboto-Italic";
  src: local("Roboto");
  src: url("../fonts/Roboto/Roboto-Italic.woff") format("woff");
  src: url("../fonts/Roboto/Roboto-Italic.ttf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
/*文字相關設定*/
/*文字單行+nowrap*/
/*文字基本設定*/
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0 0;
}

h1 {
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 500;
  color: #241430;
  line-height: 1.5;
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-regular, sans-serif;
  font-size: 3.375rem;
  line-height: 1.45;
  letter-spacing: 1px;
}

h2 {
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 500;
  color: #241430;
  line-height: 1.5;
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-Medium, sans-serif;
  font-size: 2.13rem;
  line-height: 1.4;
  letter-spacing: 0.5px;
}

h3 {
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 500;
  color: #241430;
  line-height: 1.5;
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-Medium, sans-serif;
  font-size: 1.625rem;
  line-height: 1.7;
}

h4 {
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 500;
  color: #241430;
  line-height: 1.5;
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-regualr, sans-serif;
  font-size: 1.5rem;
  line-height: 1.4;
}

h5 {
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 500;
  color: #241430;
  line-height: 1.5;
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-regualr, sans-serif;
  font-size: 0.88em;
  line-height: 1.5;
}

h6 {
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 500;
  color: #241430;
  line-height: 1.5;
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-regualr, sans-serif;
  font-size: 1.25rem;
  line-height: 1.4;
}

p {
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 500;
  color: #241430;
  line-height: 1.5;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.8;
  letter-spacing: 0.5s;
}

.lightSectionTit {
  color: #989898;
}

.typoBluetit {
  color: #0066ff;
}

.typoLightBlueTit {
  color: #B190C7;
}

.typoWhiteTit {
  color: #FFF;
}

.typo-danger {
  color: red;
}

.typo-mainColor {
  color: #60268F;
}
.typo-mainColor:hover {
  color: #60268F;
  text-decoration: underline;
}

.typoBigNumber {
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 500;
  color: #241430;
  line-height: 1.5;
  font-family: "Montserrat-bold", sans-serif;
  font-size: 2.13rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1px;
}

.typoReadContext {
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 500;
  color: #241430;
  line-height: 1.5;
  font-size: 1.125rem;
  line-height: 2;
}

/*基底通用設定*/
/*zdialog*/
.buttonStyle {
  width: 64px;
  height: 22px;
  line-height: 22px;
  color: black;
  text-align: center;
  background: url(images/buticon.gif) no-repeat left top;
  border: 0.75em;
}
.buttonStyle:hover {
  background: url(images/buticon.gif) no-repeat left -23px;
}

body {
  font-size: 100%;
  background: #F4F4F4;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 500;
  color: #241430;
  line-height: 1.5;
}

a {
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 500;
  color: #241430;
  line-height: 1.5;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  letter-spacing: 0.5px;
}
a:hover {
  text-decoration: underline;
}

/*反白字體*/
::-moz-selection {
  background: #60268F;
  color: #FFF;
}
::selection {
  background: #60268F;
  color: #FFF;
}

/*按下無藍色框*/
/*無障礙focus用*/
/*scrollbar*/
/*頁面框架及常用設定*/
.max_width {
  width: 100%;
  margin: 0 auto;
}
@media all and (min-width: 83em) {
  .max_width {
    width: 83em;
  }
}

.com_width {
  width: 100%;
  margin: 0 auto;
}
@media all and (min-width: 64em) {
  .com_width {
    width: 58em;
  }
}

.clear {
  clear: both;
}

.overflow-hidden {
  overflow: hidden;
}

.floatRight {
  float: right;
}

.floatLeft {
  float: left;
}

.db {
  display: block;
}

.plr-0 {
  padding-left: 0px;
  padding-right: 0px;
}

.plr-15 {
  padding-left: 15px;
  padding-right: 15px;
}

.plr-20 {
  padding-left: 20px;
  padding-right: 20px;
}

.plr-30 {
  padding-left: 30px;
  padding-right: 30px;
}

.plr-50 {
  padding-left: 50px;
  padding-right: 50px;
}

.plr-60 {
  padding-left: 60px;
  padding-right: 60px;
}

.plr-70 {
  padding-left: 70px;
  padding-right: 70px;
}

.plr-80 {
  padding-left: 80px;
  padding-right: 80px;
}

.plr-90 {
  padding-left: 90px;
  padding-right: 90px;
}

.pl-10 {
  padding-left: 10px;
}

.pl-20 {
  padding-left: 20px;
}

.pl-30 {
  padding-left: 30px;
}

.pl-50 {
  padding-left: 50px;
}

.pl-70 {
  padding-left: 70px;
}

.pl-80 {
  padding-left: 80px;
}

.pr-20 {
  padding-right: 20px;
}

.pr-30 {
  padding-right: 30px;
}

.pr-40 {
  padding-right: 40px;
}

.pr-50 {
  padding-right: 50px;
}

.pr-100 {
  padding-right: 100px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-40 {
  padding-top: 40px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-12 {
  padding-top: 12px;
}

.pt-15 {
  padding-top: 15px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-25 {
  padding-top: 25px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-35 {
  padding-bottom: 35px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pt-40 {
  padding-top: 40px;
}

.pt-45 {
  padding-top: 45px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-55 {
  padding-top: 55px;
}

.pt-60 {
  padding-top: 60px;
}

.pb-5 {
  padding-bottom: 5px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-12 {
  padding-bottom: 12px;
}

.pb-15 {
  padding-bottom: 15px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-25 {
  padding-bottom: 25px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pb-70 {
  padding-bottom: 70px;
}

.ptb-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.ptb-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.ptb-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.ptb-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.ptb-50 {
  padding-top: 50px;
  padding-bottom: 50px;
}

.ptb-80 {
  padding-top: 80px;
  padding-bottom: 80px;
}

.ptb-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-0 {
  margin-top: 0px;
}

.mt-5 {
  margin-top: 5px;
}

.mt-8 {
  margin-top: 8px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-12 {
  margin-top: 12px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-25 {
  margin-top: 25px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-35 {
  margin-top: 35px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-60 {
  margin-top: 60px;
}

.mb-5 {
  margin-bottom: 5px;
}

.mb-8 {
  margin-bottom: 8px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mr-10 {
  margin-right: 10px;
}

.mr-12 {
  margin-right: 12px;
}

.mr-20 {
  margin-right: 20px;
}

.mr-30 {
  margin-right: 30px;
}

.mr-40 {
  margin-right: 40px;
}

.mr-50 {
  margin-right: 50px;
}

.mr-80 {
  margin-right: 80px;
}

.mr-100 {
  margin-right: 100px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-30 {
  margin-left: 30px;
}

.ml-50 {
  margin-left: 50px;
}

.ml-70 {
  margin-left: 70px;
}

.mlr-30 {
  margin-left: 30px;
  margin-right: 30px;
}

.mtb-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}

.mtb-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.mtb-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.mtb-40 {
  margin-top: 40px;
  margin-bottom: 40px;
}

.mtb-50 {
  margin-top: 50px;
  margin-bottom: 50px;
}

.mtb-60 {
  margin-top: 60px;
  margin-bottom: 60px;
}

/*gutter*/
.gutter {
  padding-left: 0px;
  padding-right: 0px;
}
@media all and (min-width: 64em) {
  .gutter {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.gutter--form {
  padding-left: 0px;
  padding-right: 0px;
}
@media all and (min-width: 64em) {
  .gutter--form {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.listArea {
  width: 100%;
}

/*編輯頁區域底色*/
.formBk .formBk-area {
  padding-top: 50px;
  padding-bottom: 20px;
}
.formBk .formBk-area:nth-of-type(2n) {
  background: #FFF;
}

/*分割欄位*/
.grid--33 {
  width: 100%;
  float: left;
}
@media all and (min-width: 48em) {
  .grid--33 {
    width: 33%;
  }
}
@media all and (min-width: 83em) {
  .grid--33 {
    width: 33%;
  }
}

.grid--66 {
  width: 100%;
  float: left;
}
@media all and (min-width: 48em) {
  .grid--66 {
    width: 66%;
  }
}
@media all and (min-width: 83em) {
  .grid--66 {
    width: 66%;
  }
}

.grid--100 {
  width: 100%;
  float: left;
}

.lineAlignItemsEnd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

/*flex 排成一排列表*/
.textalign-center {
  text-align: center;
}

.textalign-right {
  text-align: right;
}

.icon-inLine {
  vertical-align: -2px;
}

.phone-show {
  display: block;
}
@media all and (min-width: 64em) {
  .phone-show {
    display: none;
  }
}

/*列印隱藏區域*/
@media print {
  .print_hidden {
    display: none;
  }
}

/*按鈕部件*/
/*按鈕設置*/
/*第一款 基本大按鈕*/
/*強調按鈕陰影設定*/
/*頁面基本按鈕*/
/*編輯藍色按鈕*/
.btnBlue {
  display: inline-block;
  width: auto;
  height: 44px;
  padding: 0 15px;
  line-height: 42px;
  border-radius: 6px;
  background: #0066ff;
  color: #FFF;
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-Medium, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  float: left;
}
.btnBlue:hover {
  -webkit-transform: translateX(8px);
          transform: translateX(8px);
  color: #FFF;
  text-decoration: none;
}
.btnBlue .btn-base--icon {
  margin-left: 10px;
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}

/*次要綠色按鈕*/
.btnGreen {
  display: inline-block;
  width: auto;
  height: 44px;
  padding: 0 15px;
  line-height: 42px;
  border-radius: 6px;
  background: #00db40;
  color: #FFF;
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-Medium, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  float: left;
}
.btnGreen:hover {
  -webkit-transform: translateX(8px);
          transform: translateX(8px);
  color: #FFF;
  text-decoration: none;
}
.btnGreen .btn-base--icon {
  margin-left: 10px;
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}

/*主色按鈕*/
.btnMainColor {
  display: inline-block;
  width: auto;
  height: 44px;
  padding: 0 15px;
  line-height: 42px;
  border-radius: 6px;
  background: #7C4AA2;
  color: #FFF;
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-Medium, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  float: left;
  border: 1px solid #FFF;
}
.btnMainColor:hover {
  -webkit-transform: translateX(8px);
          transform: translateX(8px);
  color: #FFF;
  text-decoration: none;
}
.btnMainColor .btn-base--icon {
  margin-left: 10px;
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}
.btnMainColor:hover {
  color: #FFF;
}

/*淺主色按鈕*/
.btnMainColor100 {
  display: inline-block;
  width: auto;
  height: 44px;
  padding: 0 15px;
  line-height: 42px;
  border-radius: 6px;
  background: #E5D9EC;
  color: #60268F;
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-Medium, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  float: left;
  width: auto;
}
.btnMainColor100:hover {
  -webkit-transform: translateX(8px);
          transform: translateX(8px);
  color: #FFF;
  text-decoration: none;
}
.btnMainColor100 .btn-base--icon {
  margin-left: 10px;
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}
.btnMainColor100:hover {
  color: #7C4AA2;
}

/*主色外寬框編輯按鈕*/
.btnEdit {
  display: inline-block;
  width: auto;
  height: 44px;
  padding: 0 15px;
  line-height: 42px;
  border-radius: 6px;
  background: #FFF;
  color: #7C4AA2;
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-Medium, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  float: left;
  border: 1px solid #7C4AA2;
}
.btnEdit:hover {
  -webkit-transform: translateX(8px);
          transform: translateX(8px);
  color: #FFF;
  text-decoration: none;
}
.btnEdit .btn-base--icon {
  margin-left: 10px;
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}
.btnEdit:hover {
  color: #7C4AA2;
}
.btnEdit .icon {
  vertical-align: -2px;
}

/*刪除按鈕*/
.btnDelete {
  display: inline-block;
  width: auto;
  height: 44px;
  padding: 0 15px;
  line-height: 42px;
  border-radius: 6px;
  background: #FFF;
  color: #989898;
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-Medium, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  float: left;
  border: 1px solid #989898;
}
.btnDelete:hover {
  -webkit-transform: translateX(8px);
          transform: translateX(8px);
  color: #FFF;
  text-decoration: none;
}
.btnDelete .btn-base--icon {
  margin-left: 10px;
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}
.btnDelete:hover {
  color: #989898;
}
.btnDelete .icon {
  vertical-align: -2px;
}

/*頁面強調按鈕*/
.btnEm-bt {
  display: block;
  width: 210px;
  height: 50px;
  line-height: 50px;
  background: #a51b0b;
  border-radius: 25px;
  -webkit-box-shadow: 0px 0px 10px rgba(34, 34, 34, 0.12);
  box-shadow: 0px 0px 10px rgba(34, 34, 34, 0.12);
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 500;
  color: #241430;
  line-height: 1.5;
  text-transform: capitalize;
  font-weight: 700;
  color: #FFF;
  padding: 0 20px 0 25px;
  float: right;
  margin: 0 0 25px 10px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.btnEm-bt .btnEm-bt--icon {
  padding: 14px 0 0 0;
  float: right;
}
.btnEm-bt:hover {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: #FFF;
}

.btnField {
  height: 42px;
  display: inline-block;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 500;
  color: #241430;
  line-height: 1.5;
  font-weight: 700;
  color: #cbcbcb;
  text-align: center;
  letter-spacing: 0.5px;
  padding: 0 15px;
  line-height: 42px;
  margin: 0 0 0 10px;
  float: right;
  border-radius: 7px;
  -webkit-box-shadow: 0px 2px 4px rgba(10, 31, 143, 0.3);
          box-shadow: 0px 2px 4px rgba(10, 31, 143, 0.3);
  border: 1px solid #e8e8e8;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.btnField:hover {
  background: #e8e8e8;
  color: #241430;
}

.btnField--submit {
  color: #ffffff;
  background: #a51b0b;
}
.btnField--submit:hover {
  color: #ffffff;
  background: #7C4AA2;
}

.btnField--active {
  background: #e8e8e8;
  color: #241430;
}
.btnField--active:hover {
  background: #F4F4F4;
}

.btnField--add {
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding: 0;
  color: #241430;
}
.btnField--add:hover {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
  background: none;
}
.btnField--add img {
  vertical-align: -5px;
  margin-left: 10px;
}

.btnField--select {
  background: #e8e8e8;
  color: #241430;
}

.btnWhite {
  width: auto;
  height: 56px;
  border-radius: 11px;
  background: #FFF;
  -webkit-box-shadow: 0px 3px 6px rgba(10, 31, 143, 0.08);
          box-shadow: 0px 3px 6px rgba(10, 31, 143, 0.08);
  line-height: 56px;
  padding: 0 25px;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 500;
  color: #241430;
  line-height: 1.5;
  font-weight: 700;
  color: #241430;
  display: block;
}

.btnsubmitPhoneArea {
  position: fixed;
  bottom: 15px;
  left: 30%;
  width: 40%;
}
@media all and (min-width: 48em) {
  .btnsubmitPhoneArea {
    left: 40%;
    width: 20%;
  }
}
@media all and (min-width: 64em) {
  .btnsubmitPhoneArea {
    display: none;
  }
}
.btnsubmitPhoneArea .btnsubmitPhoneArea--bt {
  width: 100%;
}

.btnsubmitComputer {
  display: block;
  width: 210px;
  height: 50px;
  line-height: 50px;
  background: #60268F;
  float: right;
  border-radius: 7px;
  -webkit-box-shadow: 0px 0px 10px rgba(34, 34, 34, 0.12);
  box-shadow: 0px 0px 10px rgba(34, 34, 34, 0.12);
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 500;
  color: #241430;
  line-height: 1.5;
  text-transform: capitalize;
  font-weight: 700;
  color: #FFF;
  padding: 0 20px 0 25px;
  float: right;
  margin: 0 0 0 10px;
}
.btnsubmitComputer .btnsubmitComputer--icon {
  float: right;
  margin: 14px 0 0 0;
}
.btnsubmitComputer:hover {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
  color: #FFF;
}

.btnFieldIcon {
  display: block;
  width: 60px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
  background: #FFF;
  padding: 5px 0 0 0;
  float: right;
}
.btnFieldIcon:hover {
  background: #e8e8e8;
}

.fieLine {
  width: 100%;
  height: 1px;
  background: #e8e8e8;
}

.fieTit {
  width: 100%;
  background: #e8e8e8;
  padding: 20px 30px;
  border-radius: 13px 13px 0 0;
  position: relative;
}
.fieTit .fieTit--arrowBt {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  position: absolute;
  right: 20px;
  top: 12px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-animation: circle-ani 4s 1s 10;
          animation: circle-ani 4s 1s 10;
}
.fieTit .fieTit--arrowBt img {
  margin-top: 7px;
  margin-left: 6px;
}
@-webkit-keyframes circle-ani {
  0% {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
            box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  }
  70% {
    -webkit-box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.06);
            box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.06);
  }
  100% {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
            box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  }
}
@keyframes circle-ani {
  0% {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
            box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  }
  70% {
    -webkit-box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.06);
            box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.06);
  }
  100% {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
            box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  }
}
.fieTit .fieTit--arrowBt:click {
  background: #60268F;
  -webkit-box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.06);
          box-shadow: 0px 0px 0px 10px rgba(0, 0, 0, 0.06);
}
.fieTit .fieTit--arrowBt:hover {
  background: #FFF;
}

.fieAddArea {
  width: 100%;
  background: #e8e8e8;
  padding: 12px 30px;
  border-radius: 0 0 13px 13px;
}

.fidArea .fidArea--uploadTit {
  text-align: center;
  margin: 10px 0 0 0;
}

.fidArea, .fidArea--cheRad {
  width: 100%;
  padding: 0 30px 30px 30px;
}

label {
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-Medium, sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  color: #241430;
  margin: 0 0 10px 0 !important;
  letter-spacing: 0.5px;
}

.fidArea--50 {
  width: 100%;
}
@media all and (min-width: 48em) {
  .fidArea--50 {
    width: 100%;
    float: left;
    clear: none !important;
  }
}
@media all and (min-width: 64em) {
  .fidArea--50 {
    width: 50%;
  }
}

.fidArea--100 {
  width: 100%;
}
@media all and (min-width: 48em) {
  .fidArea--100 {
    width: 100%;
    float: left;
    clear: none !important;
  }
}
@media all and (min-width: 64em) {
  .fidArea--100 {
    width: 100%;
  }
}

.fidArea--33 {
  width: 100%;
}
@media all and (min-width: 48em) {
  .fidArea--33 {
    width: 100%;
    float: left;
    clear: none !important;
  }
}
@media all and (min-width: 64em) {
  .fidArea--33 {
    width: 50%;
  }
}
@media all and (min-width: 83em) {
  .fidArea--33 {
    width: 33%;
  }
}

.fidArea--25 {
  width: 100%;
}
@media all and (min-width: 48em) {
  .fidArea--25 {
    width: 100%;
    float: left;
    clear: none !important;
  }
}
@media all and (min-width: 64em) {
  .fidArea--25 {
    width: 50%;
  }
}
@media all and (min-width: 118em) {
  .fidArea--25 {
    width: 25%;
  }
}

.fidArea--20 {
  width: 100%;
}
@media all and (min-width: 48em) {
  .fidArea--20 {
    width: 100%;
    float: left;
    clear: none !important;
  }
}
@media all and (min-width: 64em) {
  .fidArea--20 {
    width: 50%;
  }
}
@media all and (min-width: 118em) {
  .fidArea--20 {
    width: 20%;
  }
}

.fidArea--15 {
  width: 100%;
}
@media all and (min-width: 48em) {
  .fidArea--15 {
    width: 100%;
    float: left;
    clear: none !important;
  }
}
@media all and (min-width: 64em) {
  .fidArea--15 {
    width: 50%;
  }
}
@media all and (min-width: 118em) {
  .fidArea--15 {
    width: 15%;
  }
}

.fidArea--inline {
  width: 100%;
  padding: 0 0px 30px 0px;
}
@media all and (min-width: 48em) {
  .fidArea--inline {
    width: 100%;
    float: left;
    clear: none !important;
  }
}
@media all and (min-width: 64em) {
  .fidArea--inline {
    width: 50%;
    padding: 0 0px 30px 15px;
  }
}
@media all and (min-width: 118em) {
  .fidArea--inline {
    width: 20%;
  }
}

.fidArea .fidArea--img {
  width: 100%;
  height: auto;
  border: 1px solid #e8e8e8;
}

.ui.form .field {
  margin: 0 0 0 0;
}

.fieverti {
  padding: 0 0 0 15px !important;
  color: red !important;
}

@media all and (min-width: 64em) {
  .field--btnPosition {
    padding-top: 32px;
  }
}

/*checkbox radio 使用樣式*/
.fidArea--cheRad {
  width: auto !important;
  float: left !important;
  clear: none !important;
  padding-bottom: 0 !important;
  padding-top: 10px !important;
}

.fidArea-radioCheck--tit {
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei" !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  color: #241430 !important;
  margin: 30px 0 10px 0 !important;
  padding-left: 30px;
  padding-right: 30px;
}

.fidArea--cheRad label {
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei" !important;
  font-size: 1.0625rem !important;
  font-weight: 500 !important;
  color: #241430 !important;
  margin: 0 0 0 0 !important;
}

/*表格區塊*/
.ui.selection.dropdown {
  width: 100% !important;
  height: 44px !important;
  border-radius: 6px !important;
  border: 1px solid #e8e8e8 !important;
  line-height: 44px !important;
  padding: 0 20px !important;
  background: #FFF !important;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei" !important;
  font-size: 1.0625rem !important;
  color: #241430 !important;
  -webkit-transition: all 0.3s linear !important;
  transition: all 0.3s linear !important;
}
.ui.selection.dropdown:-moz-read-only {
  background: #FFF !important;
}
.ui.selection.dropdown:read-only {
  background: #FFF !important;
}
.ui.selection.dropdown:hover {
  border: 1px solid #60268F !important;
}
.ui.selection.dropdown:focus {
  border: 1px solid #60268F !important;
}
.ui.selection.dropdown .menu .item {
  line-height: 1.5 !important;
}

.ui.selection.active.dropdown .menu {
  border: 1px solid #60268F !important;
  border-top: none !important;
}

.ui.dropdown .menu .active.item {
  font-weight: normal !important;
}

.ui.dropdown:not(.button) > .default.text, .ui.default.dropdown:not(.button) > .text {
  color: #707070 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  width: 100% !important;
  font-weight: 500 !important;
}

.ui.selection.dropdown .menu {
  border-radius: 0 0 6px 6px !important;
}

.ui.form input, .ui.form input[type=text], .ui.form input[type=number], .ui.form input[type=email], .ui.form input[type=password], .ui.form select {
  height: 44px;
  border-radius: 6px !important;
  border: 1px solid #e8e8e8 !important;
  line-height: 44px !important;
  padding: 0 20px !important;
  background: #FFF !important;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei" !important;
  font-size: 1.0625rem !important;
  color: #241430 !important;
  -webkit-transition: all 0.3s linear !important;
  transition: all 0.3s linear !important;
  overflow: hidden !important;
}
.ui.form input:-moz-read-only, .ui.form input[type=text]:-moz-read-only, .ui.form input[type=number]:-moz-read-only, .ui.form input[type=email]:-moz-read-only, .ui.form input[type=password]:-moz-read-only, .ui.form select:-moz-read-only {
  background: #e8e8e8;
}
.ui.form input:read-only, .ui.form input[type=text]:read-only, .ui.form input[type=number]:read-only, .ui.form input[type=email]:read-only, .ui.form input[type=password]:read-only, .ui.form select:read-only {
  background: #e8e8e8;
}
.ui.form input:hover, .ui.form input[type=text]:hover, .ui.form input[type=number]:hover, .ui.form input[type=email]:hover, .ui.form input[type=password]:hover, .ui.form select:hover {
  border: 1px solid #60268F !important;
}
.ui.form input:focus, .ui.form input[type=text]:focus, .ui.form input[type=number]:focus, .ui.form input[type=email]:focus, .ui.form input[type=password]:focus, .ui.form select:focus {
  border: 1px solid #60268F !important;
}
.ui.form input::-webkit-input-placeholder, .ui.form input[type=text]::-webkit-input-placeholder, .ui.form input[type=number]::-webkit-input-placeholder, .ui.form input[type=email]::-webkit-input-placeholder, .ui.form input[type=password]::-webkit-input-placeholder, .ui.form select::-webkit-input-placeholder {
  color: #707070 !important;
}
.ui.form input::-moz-placeholder, .ui.form input[type=text]::-moz-placeholder, .ui.form input[type=number]::-moz-placeholder, .ui.form input[type=email]::-moz-placeholder, .ui.form input[type=password]::-moz-placeholder, .ui.form select::-moz-placeholder {
  color: #707070 !important;
}
.ui.form input:-ms-input-placeholder, .ui.form input[type=text]:-ms-input-placeholder, .ui.form input[type=number]:-ms-input-placeholder, .ui.form input[type=email]:-ms-input-placeholder, .ui.form input[type=password]:-ms-input-placeholder, .ui.form select:-ms-input-placeholder {
  color: #707070 !important;
}
.ui.form input:-moz-placeholder, .ui.form input[type=text]:-moz-placeholder, .ui.form input[type=number]:-moz-placeholder, .ui.form input[type=email]:-moz-placeholder, .ui.form input[type=password]:-moz-placeholder, .ui.form select:-moz-placeholder {
  color: #707070 !important;
}
.ui.form input[type=file] {
  line-height: 36px !important;
  padding: 0 20px 0 0 !important;
  border-radius: 4px 6px 6px 4px !important;
}
.ui.form input[type=file]:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.ui.form select {
  background: #FFF !important;
}
.ui.form textarea {
  width: 100% !important;
  height: 150px !important;
  border-radius: 6px !important;
  border: 1px solid #e8e8e8 !important;
  line-height: 1.5 !important;
  padding: 0 20px !important;
  background: #FFF !important;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 500;
  color: #241430;
  line-height: 1.5;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei" !important;
  font-size: 1.0625rem !important;
  font-weight: 500 !important;
  color: #241430 !important;
  -webkit-transition: all 0.3s linear !important;
  transition: all 0.3s linear !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  /*禁用拖動*/
  resize: none !important;
}
.ui.form textarea:hover {
  border: 1px solid #60268F !important;
}
.ui.form textarea:focus {
  border: 1px solid #60268F !important;
}
.ui.form textarea::-webkit-input-placeholder {
  color: #707070 !important;
}
.ui.form textarea::-moz-placeholder {
  color: #707070 !important;
}
.ui.form textarea:-ms-input-placeholder {
  color: #707070 !important;
}
.ui.form textarea:-moz-placeholder {
  color: #707070 !important;
}
.ui.form input[type=checkbox], .ui.form input[type=radio] {
  padding-left: 20px !important;
}
.ui.form input[type=checkbox]:hover, .ui.form input[type=radio]:hover {
  border: 1px solid #60268F !important;
}
.ui.form input[type=checkbox]:focus, .ui.form input[type=radio]:focus {
  border: 1px solid #60268F !important;
}

.ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:before, .ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before, .ui.checkbox input:checked:focus ~ .box:before, .ui.checkbox input:checked:focus ~ label:before {
  border-color: #60268F !important;
}

.ui.dropdown.selection.multiple {
  height: auto !important;
}

.ui.fluid.dropdown {
  height: 44px !important;
  line-height: auto !important;
}

.ui.multiple.dropdown > .label {
  vertical-align: middle;
}

/*自定義checkbox 及 radio 樣式*/
/*分隔線*/
.eleGrayLine {
  width: 100%;
  height: 1px;
  border-top: 1px solid #e8e8e8;
}

/*通知圖示按鈕*/
.elenote {
  width: 24px;
  height: 24px;
}
.elenote .elenote-count {
  width: 28px;
  height: 28px;
  position: absolute;
  right: -18px;
  top: -10px;
  background: #0066ff;
  border: 3px solid #FFF;
  border-radius: 50%;
  color: #FFF;
  line-height: 22px;
  text-align: center;
  font-size: 0.88em;
}

/*強調區塊陰影設定*/
/*圖形按鈕click效果*/
.eleUserPhoto {
  width: 56px;
  height: 56px;
  border-radius: 28px;
  -webkit-box-shadow: 0px 0px 8px rgba(34, 34, 34, 0.08);
  box-shadow: 0px 0px 8px rgba(34, 34, 34, 0.08);
  overflow: hidden;
}

.eleDropdown {
  border-radius: 11px !important;
  overflow: hidden !important;
  border: none !important;
  -webkit-box-shadow: 0px 0px 8px rgba(34, 34, 34, 0.08);
  box-shadow: 0px 0px 8px rgba(34, 34, 34, 0.08);
}
.eleDropdown .eleMenu-list {
  padding: 0 20px !important;
  line-height: 38px !important;
  font-weight: 400 !important;
}
.eleDropdown .eleMenu-list:first-of-type {
  padding-top: 10px !important;
}
.eleDropdown .eleMenu-list:last-of-type {
  padding-bottom: 7px !important;
}
.eleDropdown .eleMenu-list--icon {
  margin: 0 15px 0 0 !important;
}
.eleDropdown .eleMenu-list--logout {
  width: 100%;
  background: #090f31;
  font-weight: 600;
  text-align: center !important;
  color: #FFF !important;
  padding: 10px 30px;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
.eleDropdown .eleMenu-list--logout:hover {
  background: #7C4AA2 !important;
}

.eleTitBk {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.eleTitBk--alignTop {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

.eleTit-label {
  width: 56px;
  height: 56px;
  border-radius: 4px;
  line-height: 58px;
  text-align: center;
}

.eleTit-label--investigation {
  background: #cce8ff;
  color: #004edb;
}

.eleTit-label--suit {
  background: #ffffcc;
  color: #60268F;
}

.eleTit-label--civil {
  background: #cbcbcb;
  color: #222222;
}

.eleTit-label--criminal {
  background: #ffdfd4;
  color: red;
}

.eleTit-label--debt {
  background: #E5D9EC;
  color: #7C4AA2;
}

.eleTit-label--pay {
  width: 85px;
  height: 60px;
  border-radius: 4px;
  line-height: 60px;
  text-align: center;
  background: #E5D9EC;
  color: #7C4AA2;
}

.eleTit-label--nopay {
  width: 85px;
  height: 60px;
  border-radius: 4px;
  line-height: 60px;
  text-align: center;
  background: #ffdfd4;
  color: #7C4AA2;
}

.eleAct-label {
  width: auto;
  display: inline-block;
  height: 30px;
  padding: 0 12px;
  border-radius: 4px;
  line-height: 32px;
}

.eleAct-label--auto {
  background: #ffdfd4;
  color: #7C4AA2;
}

.eleAct-label--manual {
  background: #7C4AA2;
  color: #FFF;
}

.eleTit-img {
  -webkit-box-shadow: 0px 0px 8px rgba(34, 34, 34, 0.08);
  box-shadow: 0px 0px 8px rgba(34, 34, 34, 0.08);
  margin: 0 25px 0 0;
}

.eleTit-img--user {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  overflow: hidden;
}

.eleTit-name {
  width: auto;
}

.eleTit-secondTit {
  color: #cbcbcb;
  margin-top: 3px;
}

.eleTab--ori, .eleTab--ori--newsTab, .eleTab--in, .eleTab--in--newsTab {
  display: inline-block;
  float: left;
  line-height: 44px;
  margin: 0 20px 0 -7px;
  cursor: pointer;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
@media all and (min-width: 64em) {
  .eleTab--ori, .eleTab--ori--newsTab, .eleTab--in, .eleTab--in--newsTab {
    margin: 0 40px 0 -20px;
    line-height: 48px;
  }
}
.eleTab--ori a, .eleTab--ori--newsTab a, .eleTab--in a, .eleTab--in--newsTab a {
  color: #241430;
  font-size: 0.9375rem;
}
@media all and (min-width: 48em) {
  .eleTab--ori a, .eleTab--ori--newsTab a, .eleTab--in a, .eleTab--in--newsTab a {
    font-size: 1.125rem;
    letter-spacing: 1px;
  }
}
.eleTab--ori:hover a, .eleTab--ori--newsTab:hover a, .eleTab--in:hover a, .eleTab--in--newsTab:hover a {
  color: #241430;
  text-decoration: none;
}
.eleTab--ori:hover::after, .eleTab--ori--newsTab:hover::after, .eleTab--in:hover::after, .eleTab--in--newsTab:hover::after {
  background: #60268F;
  width: 100%;
}
.eleTab--ori::before, .eleTab--ori--newsTab::before, .eleTab--in::before, .eleTab--in--newsTab::before {
  content: "　";
}
.eleTab--ori::after, .eleTab--ori--newsTab::after, .eleTab--in::after, .eleTab--in--newsTab::after {
  display: block;
  content: "　";
  width: 0%;
  height: 6px;
  margin: 0 0 0 10px;
  border-radius: 6px 6px 0 0;
  -webkit-transition: all 0 0.5s ease-in-out;
  transition: all 0 0.5s ease-in-out;
}

.eleTab--in a {
  color: #241430;
}
.eleTab--in::after {
  width: 100%;
  background: #60268F;
}

.eleTab--ori--newsTab a {
  color: #707070;
}
.eleTab--ori--newsTab:hover a {
  color: #241430;
}

.eleTab--in--newsTab a {
  color: #241430;
}
.eleTab--in--newsTab::after {
  width: 100%;
  background: #60268F;
}

.eleList--phoneTit {
  display: block;
  color: #989898;
  font-weight: 400;
}
@media all and (min-width: 64em) {
  .eleList--phoneTit {
    display: none;
  }
}

.eleInfoListArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.eleInfoList--50, .eleInfoList--100, .eleInfoList--50--phone {
  width: 100%;
  margin: 0 0 15px 0;
  padding: 0 10px 0 0;
  float: left;
  letter-spacing: 0px;
}
@media all and (min-width: 64em) {
  .eleInfoList--50, .eleInfoList--100, .eleInfoList--50--phone {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.eleInfoList--50 {
  width: 100%;
}
@media all and (min-width: 48em) {
  .eleInfoList--50 {
    width: 50%;
  }
}

.eleInfoList--50--phone {
  width: 50%;
}
@media all and (min-width: 48em) {
  .eleInfoList--50--phone {
    width: 50%;
  }
}

.elesmlSerAdd {
  position: fixed;
  z-index: 2;
  right: 15px;
  bottom: 15px;
  width: 60px;
}
.elesmlSerAdd .elesmlSerAdd-Bt {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  -webkit-box-shadow: 0px 0px 8px rgba(34, 34, 34, 0.08);
  box-shadow: 0px 0px 8px rgba(34, 34, 34, 0.08);
  margin: 0 0 12px 0;
  cursor: pointer;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  text-align: center;
}
.elesmlSerAdd .elesmlSerAdd-Bt:active {
  -webkit-transform: translateY(-12px);
          transform: translateY(-12px);
}
.elesmlSerAdd .elesmlSerAdd-Bt--img {
  vertical-align: -25px;
}
.elesmlSerAdd .elesmlSerAdd-Bt--expo {
  background: #FFF;
}
@media all and (min-width: 118em) {
  .elesmlSerAdd .elesmlSerAdd-Bt--expo {
    display: none;
  }
}
.elesmlSerAdd .elesmlSerAdd-Bt--search {
  background: #FFF;
}
@media all and (min-width: 83em) {
  .elesmlSerAdd .elesmlSerAdd-Bt--search {
    display: none;
  }
}
.elesmlSerAdd .elesmlSerAdd-Bt--add {
  background: #60268F;
}
@media all and (min-width: 64em) {
  .elesmlSerAdd .elesmlSerAdd-Bt--add {
    display: none;
  }
}

.eleSortUiExpo {
  padding-left: 15px;
  padding-right: 15px;
  display: none;
}
@media all and (min-width: 83em) {
  .eleSortUiExpo {
    display: block;
  }
}

.eleSortUi {
  width: 100%;
  border-radius: 11px;
  background: #FFF;
  -webkit-box-shadow: 0px 3px 6px rgba(10, 31, 143, 0.08);
          box-shadow: 0px 3px 6px rgba(10, 31, 143, 0.08);
  float: left;
  margin-bottom: 20px;
}
@media all and (min-width: 64em) {
  .eleSortUi {
    width: auto;
    margin-bottom: 35px;
  }
}
.eleSortUi .eleSortUi-sortIcon {
  margin: 0 0 0 20px;
  line-height: 56px;
  float: left;
  padding-top: 20px;
  display: none;
}
@media all and (min-width: 48em) {
  .eleSortUi .eleSortUi-sortIcon {
    display: block;
  }
}
.eleSortUi .ui.selection.dropdown.eleSortUi-sort {
  width: 100% !important;
  height: 56px !important;
  float: left !important;
  border-radius: 11px !important;
  line-height: 56px !important;
  height: 56px !important;
  border-radius: 11px !important;
  border: 1px solid #e8e8e8 !important;
  line-height: 56px !important;
  padding: 0 20px !important;
  background: #FFF !important;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei" !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #241430 !important;
  -webkit-transition: all 0.5s linear !important;
  transition: all 0.5s linear !important;
  border: none !important;
}
@media all and (min-width: 48em) {
  .eleSortUi .ui.selection.dropdown.eleSortUi-sort {
    width: auto !important;
  }
}
.eleSortUi .ui.selection.dropdown.eleSortUi-sort .dropdown.icon:before {
  content: url(../images/sort-arrow.svg);
}
.eleSortUi .ui.dropdown:not(.button).eleSortUi-sort > .default.text,
.eleSortUi .ui.default.dropdown:not(.button).eleSortUi-sort > .text {
  color: #241430 !important;
  font-weight: 700 !important;
}
.eleSortUi .ui.dropdown.eleSortUi-sort > .text {
  padding-right: 30px !important;
}
.eleSortUi .eleSortUi-line {
  width: 2px;
  height: 20px;
  border-radius: 1px;
  background: #e8e8e8;
  margin: 18px 0;
  float: left;
  display: none;
}
@media all and (min-width: 48em) {
  .eleSortUi .eleSortUi-line {
    display: block;
  }
}
.eleSortUi .eleSortUi-serach {
  width: 80%;
  height: 56px;
  float: left;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 500;
  color: #241430;
  line-height: 1.5;
  font-weight: 700;
  color: #241430;
  cursor: pointer;
  float: left;
  border-radius: 11px;
  padding: 0 0 0 20px;
}
@media all and (min-width: 48em) {
  .eleSortUi .eleSortUi-serach {
    width: 130px;
  }
}
.eleSortUi .eleSortUi-serach::-webkit-input-placeholder {
  color: #241430;
}
.eleSortUi .eleSortUi-serach::-moz-placeholder {
  color: #241430;
}
.eleSortUi .eleSortUi-serach:-ms-input-placeholder {
  color: #241430;
}
.eleSortUi .eleSortUi-serach::-ms-input-placeholder {
  color: #241430;
}
.eleSortUi .eleSortUi-serach::placeholder {
  color: #241430;
}
.eleSortUi .eleSortUi-serachIcon {
  width: 56px;
  height: 56px;
  border-radius: 11px;
  background: #FFF;
  line-height: 64px;
  display: block;
  float: right;
  text-align: center;
}
.eleSortUi .eleSortUi-serachIcon:hover {
  -webkit-transform: translateX(-8px);
          transform: translateX(-8px);
}
.eleSortUi .eleSortUi-serachIcon:hover img {
  mix-blend-mode: difference;
}

.eleSortUiExpo-bt {
  width: 210px;
  padding: 0 25px;
  float: right;
  margin-bottom: 20px;
  display: none;
}
@media all and (min-width: 118em) {
  .eleSortUiExpo-bt {
    display: block;
    margin-bottom: 35px;
  }
}
.eleSortUiExpo-bt:hover {
  -webkit-box-shadow: 0px 10px 16px rgba(10, 31, 143, 0.12);
          box-shadow: 0px 10px 16px rgba(10, 31, 143, 0.12);
  color: #241430;
}
.eleSortUiExpo-bt .eleExpo-bt--icon {
  float: right;
  margin-top: 17px;
}

.eleLayoutChange-bt {
  width: 56px;
  float: right;
  margin-bottom: 20px;
  margin-left: 12px;
  display: none;
  padding-left: 18px;
  padding-right: 0px;
}
@media all and (min-width: 64em) {
  .eleLayoutChange-bt {
    display: block;
  }
}
.eleLayoutChange-bt:hover {
  -webkit-box-shadow: 0px 10px 16px rgba(10, 31, 143, 0.12);
          box-shadow: 0px 10px 16px rgba(10, 31, 143, 0.12);
}
.eleLayoutChange-bt .eleLayoutChange-bt--icon {
  margin-left: auto;
  margin-right: auto;
  margin-top: 17px;
}

.eleLayoutChange-bt--active {
  background: #E5D9EC;
}

.elePlantFunSort-area {
  float: left;
  margin-bottom: 20px;
}
@media all and (min-width: 64em) {
  .elePlantFunSort-area {
    width: auto;
    margin-bottom: 20px;
  }
}
@media all and (min-width: 83em) {
  .elePlantFunSort-area {
    margin-right: 20px;
  }
}

/*案場設定增加按鈕*/
.elePlantFunAdd-bt {
  width: 100%;
  padding: 0 25px;
  float: left;
  margin-bottom: 20px;
}
@media all and (min-width: 64em) {
  .elePlantFunAdd-bt {
    width: 210px;
  }
}
@media all and (min-width: 83em) {
  .elePlantFunAdd-bt {
    margin-bottom: 35px;
  }
}
.elePlantFunAdd-bt:hover {
  -webkit-transform: translateX(12px);
          transform: translateX(12px);
  color: #241430;
}
.elePlantFunAdd-bt .eleExpo-bt--icon {
  float: right;
  margin-top: 17px;
}

.elePage {
  width: auto;
  margin: 0 auto;
  float: right;
}
.elePage .elePage-arrowBt {
  width: 38px;
  height: 38px;
  display: inline-block;
  background: #60268F;
  border-radius: 6px;
  float: left;
  margin-top: 2px;
}
.elePage .elePage-arrowBt--back:hover {
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
}
.elePage .elePage-arrowBt--back img {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
  margin: 11px 0 0 11px;
}
.elePage .elePage-arrowBt--next:hover {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}
.elePage .elePage-arrowBt--next img {
  margin: 11px 0 0 11px;
}
.elePage .elePage-conut {
  width: 140px;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #241430;
  margin: 0 20px;
  float: left;
}

.eleAlarm .eleAlarm-time {
  width: 100%;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 8px;
}
.eleAlarm .eleAlarm-time .eleAlarm-time--Icon {
  vertical-align: -6px;
  width: 20px;
  height: 20px;
  margin-right: 12px;
}
.eleAlarm .eleAlarm-grandTit {
  width: 100%;
  line-height: 1.4;
  margin-bottom: 15px;
}
.eleAlarm .eleAlarm-grandTit .eleAlarm-grandTit--Icon {
  width: 10px;
  height: 10px;
  margin: 6px 20px 0 5px;
  border-radius: 50%;
  float: left;
}
.eleAlarm .eleAlarm-grandTit .eleAlarm-grandTit--Icon--grand01 {
  background: #00ff33;
}
.eleAlarm .eleAlarm-grandTit .eleAlarm-grandTit--Icon--grand02 {
  background: #ff3300;
}
.eleAlarm .eleAlarm-grandTit .eleAlarm-grandTit--Icon--grand03 {
  background: #243542;
}
.eleAlarm .eleAlarm-grandTit .eleAlarm-grandTit--Icon--grand04 {
  background: yellow;
}
.eleAlarm .eleAlarm-grandTit .eleAlarm-grandTit--Icon--grand05 {
  background: red;
}
.eleAlarm .eleAlarm-content {
  height: 80px;
  padding: 10px 25px 0 35px;
  overflow-y: auto;
  color: #cbcbcb;
  line-height: 1.6;
  background: #F4F4F4;
  border-radius: 13px;
  font-weight: 400;
}

.eleTable {
  width: 100%;
  height: auto;
  overflow-x: auto !important;
}

.eleNote {
  width: 100%;
  display: block;
}
.eleNote .ui.message {
  border-radius: 6px7;
}

.eledropify {
  width: 200px !important;
}

.eleMainColorBg {
  background: #7C4AA2 !important;
}
.eleMainColorBg h1, .eleMainColorBg h2, .eleMainColorBg h3, .eleMainColorBg h4, .eleMainColorBg h5, .eleMainColorBg h6, .eleMainColorBg p, .eleMainColorBg label {
  color: #FFF !important;
}
.eleMainColorBg span.fieverti {
  color: #E5D9EC !important;
}

.eleColorLabel, .eleColorLabel--main, .eleColorLabel--lightMain, .eleColorLabel--lightinfo, .eleColorLabel--info, .eleColorLabel--lightgray, .eleColorLabel--waring {
  display: inline-block;
  padding: 0 15px;
  height: 32px;
  line-height: 33px;
  border-radius: 4px;
  margin: 0;
}

.eleColorLabel--main {
  color: #FFF;
  background: #a51b0b;
}

.eleColorLabel--lightMain {
  color: #60268F;
  background: #E5D9EC;
}

.eleColorLabel--lightinfo {
  color: #60268F;
  background: #cce8ff;
}

.eleColorLabel--info {
  color: #FFF;
  background: #0066ff;
}

.eleColorLabel--lightgray {
  color: #60268F;
  background: #cbcbcb;
}

.eleColorLabel--waring {
  color: #60268F;
  background: yellow;
}

/*卡片區*/
/*無分欄*/
/*卡片*/
.card {
  width: 100%;
  border-radius: 6px;
  background: #FFF;
  -webkit-box-shadow: 0px 0px 10px rgba(34, 34, 34, 0.08);
          box-shadow: 0px 0px 10px rgba(34, 34, 34, 0.08);
}

/*卡片列表樣式*/			
.cardliList, .cardliList--titArea, .cardliList--asideInfo {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #e8e8e8;
}
@media all and (min-width: 64em) {
  .cardliList, .cardliList--titArea, .cardliList--asideInfo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.cardliList:last-of-type, .cardliList--titArea:last-of-type, .cardliList--asideInfo:last-of-type {
  border-bottom: none;
}
.cardliList .cardliList-content, .cardliList .cardliList--titArea--tit, .cardliList--titArea .cardliList-content, .cardliList--titArea .cardliList--titArea--tit, .cardliList--asideInfo .cardliList-content, .cardliList--asideInfo .cardliList--titArea--tit {
  font-weight: 500;
}

.cardliList--titArea {
  display: none;
}
@media all and (min-width: 64em) {
  .cardliList--titArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: #E9DEEF;
    border-radius: 6px 6px 0 0;
  }
}
.cardliList--titArea .cardliList--titArea--tit {
  line-height: 50px;
}

@media all and (min-width: 64em) {
  .cardliList--asideInfo {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}

/*列表區*/
/*無分欄*/
/*列表*/
.list {
  width: 100%;
  border-radius: 13px;
  background: #FFF;
  margin: 0 0 15px 0;
  position: relative;
}
@media all and (min-width: 64em) {
  .list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    position: relative;
  }
}
.list .list-btArea {
  position: absolute;
  float: right;
  right: 20px;
  top: 20px;
  cursor: pointer;
  z-index: 1;
  display: block;
}
@media all and (min-width: 64em) {
  .list .list-btArea {
    position: relative;
    top: 0px;
  }
}
.list .list-btArea .list-btArea--bt {
  vertical-align: middle;
}

/*列表資訊寬度*/
.list-eleTit {
  margin-top: 20px;
}
@media all and (min-width: 64em) {
  .list-eleTit {
    width: 35%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-eleTit {
    width: 25%;
  }
}

@media all and (min-width: 64em) {
  .list-eleInfoListArea {
    width: 35%;
    margin-bottom: 0px;
    top: 0px;
    padding-left: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-eleInfoListArea {
    width: 50%;
  }
}

@media all and (min-width: 64em) {
  .list-eleInfoListArea--big {
    width: 50%;
    margin-bottom: 0px;
    top: 0px;
    padding-left: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-eleInfoListArea--big {
    width: 50%;
  }
}

.list-eleLab {
  margin-top: 30px;
}
@media all and (min-width: 64em) {
  .list-eleLab {
    width: 20%;
    overflow: hidden;
    top: 0px;
    margin: 0px;
    padding: 0;
  }
}
@media all and (min-width: 118em) {
  .list-eleLab {
    width: 25%;
    margin-top: 10px;
  }
}

@media all and (min-width: 64em) {
  .list-eleAlarm {
    width: 50%;
    overflow: hidden;
  }
  .list-eleAlarm .eleAlarm-grandTit {
    margin-bottom: 0px;
  }
}

/*user.html*/
.list-eleTit--user {
  margin-top: 20px;
}
@media all and (min-width: 64em) {
  .list-eleTit--user {
    width: 50%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-eleTit--user {
    width: 40%;
  }
}

.list-eleLab--user {
  margin-top: 30px;
}
@media all and (min-width: 64em) {
  .list-eleLab--user {
    width: 40%;
    overflow: hidden;
    top: 0px;
    margin-top: 10px;
    padding: 0;
  }
}
@media all and (min-width: 118em) {
  .list-eleLab--user {
    width: 50%;
  }
}

/*device.html*/
.list-eleTit--device {
  margin-top: 20px;
}
@media all and (min-width: 64em) {
  .list-eleTit--device {
    width: 100%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}

/*configuration.html*/
.list-eleTit--config {
  margin-top: 20px;
}
@media all and (min-width: 64em) {
  .list-eleTit--config {
    width: 40%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}

@media all and (min-width: 64em) {
  .list-eleInfoListArea--config {
    width: 50%;
    margin-bottom: 0px;
    top: 0px;
    padding-left: 0px;
  }
}

/*plants.html*/
.list-eleTit--plants {
  margin-top: 20px;
}
@media all and (min-width: 64em) {
  .list-eleTit--plants {
    width: 50%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-eleTit--plants {
    width: 50%;
  }
}

@media all and (min-width: 64em) {
  .list-info--plants {
    width: 25%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-info--plants {
    width: 25%;
  }
}

/*plants-circuitdiagram.html*/
.list-eleTit--plantsCircuitdiagram {
  margin-top: 20px;
}
@media all and (min-width: 64em) {
  .list-eleTit--plantsCircuitdiagram {
    width: 50%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-eleTit--plantsCircuitdiagram {
    width: 50%;
  }
}

.list-info--plantsCircuitdiagram {
  margin-top: 20px;
}
@media all and (min-width: 64em) {
  .list-info--plantsCircuitdiagram {
    width: 20%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-info--plantsCircuitdiagram {
    width: 20%;
  }
}

.list-bt--plantsCircuitdiagram {
  margin-top: 20px;
}
@media all and (min-width: 64em) {
  .list-bt--plantsCircuitdiagram {
    width: 20%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-bt--plantsCircuitdiagram {
    width: 20%;
  }
}

/*plant-alarm.html*/
.list-eleTit--plantsAlarm {
  margin-top: 20px;
}
@media all and (min-width: 64em) {
  .list-eleTit--plantsAlarm {
    width: 40%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-eleTit--plantsAlarm {
    width: 40%;
  }
}

.list-eleLab--plantsAlarm {
  margin-top: 20px;
}
@media all and (min-width: 64em) {
  .list-eleLab--plantsAlarm {
    width: 20%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-eleLab--plantsAlarm {
    width: 20%;
  }
}

.list-info--plantsAlarm {
  margin-top: 20px;
}
@media all and (min-width: 64em) {
  .list-info--plantsAlarm {
    width: 30%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-info--plantsAlarm {
    width: 30%;
  }
}

/*plant-user.html*/
.list-eleTit--plantsUser {
  margin-top: 20px;
}
@media all and (min-width: 64em) {
  .list-eleTit--plantsUser {
    width: 40%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-eleTit--plantsUser {
    width: 40%;
  }
}

.list-eleLab--plantsUser {
  margin-top: 20px;
}
@media all and (min-width: 64em) {
  .list-eleLab--plantsUser {
    width: 40%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-eleLab--plantsUser {
    width: 40%;
  }
}

.list-bt--plantsUser {
  padding-right: 30px;
}
@media all and (min-width: 64em) {
  .list-bt--plantsUser {
    width: 15%;
    margin-bottom: 0px;
    margin-top: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-bt--plantsUser {
    width: 15%;
  }
}

/*plants-mqttbroker.html*/
.list-eleTit--plantMqtt {
  margin-top: 20px;
}
@media all and (min-width: 64em) {
  .list-eleTit--plantMqtt {
    width: 20%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-eleTit--plantMqtt {
    width: 20%;
  }
}

.list-info--plantMqtt {
  margin-top: 20px;
}
@media all and (min-width: 64em) {
  .list-info--plantMqtt {
    width: 40%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-info--plantMqtt {
    width: 40%;
  }
}

.list-bt--plantMqtt {
  margin-top: 20px;
}
@media all and (min-width: 64em) {
  .list-bt--plantMqtt {
    width: 30%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-bt--plantMqtt {
    width: 30%;
  }
}

/*plants-device.html*/
@media all and (min-width: 64em) {
  .list-eleTit--plantDevice {
    width: 40%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-eleTit--plantDevice {
    width: 40%;
  }
}

@media all and (min-width: 64em) {
  .list-info--plantDevice {
    width: 20%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-info--plantDevice {
    width: 20%;
  }
}

/*plants-maintain.html*/
@media all and (min-width: 64em) {
  .list-eleTit--plantMain {
    width: 30%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-eleTit--plantMain {
    width: 30%;
  }
}

@media all and (min-width: 64em) {
  .list-info--plantMain {
    width: 20%;
    margin-bottom: 0px;
    margin-top: 0px;
    top: 0px;
  }
}
@media all and (min-width: 118em) {
  .list-info--plantMain {
    width: 20%;
  }
}

.patSmlHeader {
  width: 100%;
  height: 54px;
  padding: 0 0 0 15px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  background: #60268F;
}
@media all and (min-width: 64em) {
  .patSmlHeader {
    display: none;
  }
}
.patSmlHeader .patSmlHeader-navbt {
  width: 30px;
  height: 30px;
  margin: 12px 20px 0 0;
  float: left;
  cursor: pointer;
}
.patSmlHeader .patSmlHeader-tit {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 56px;
  float: left;
  color: #FFF;
}
.patSmlHeader .patSmlHeader-note {
  position: relative;
  float: right;
  cursor: pointer;
  margin: 16px 30px 0 0;
}

.patSmlNav {
  width: 320px;
  height: 100%;
  position: fixed;
  top: 0;
  left: -320px;
  z-index: 4;
  overflow-y: auto;
  background: #FFF;
}
.patSmlNav .patSmlNav-closeBt {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}

.patSmlNavopen_bg {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  position: fixed;
  top: 0;
  z-index: 3;
}

.patSmlNavNote {
  width: 320px;
  height: 100%;
  position: fixed;
  top: 0;
  left: -320px;
  z-index: 5;
  overflow-y: auto;
  background: #FFF;
}
.patSmlNavNote .patSmlNavNote-closeBt {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
.patSmlNavNote .patSmlNavNote-note {
  width: 100%;
  background: #cce8ff;
  border-bottom: 1px solid #FFF;
}
.patSmlNavNote .patSmlNavNote-note .patSmlNavNote-note--list--link {
  color: #0066ff;
  text-decoration: underline;
}
.patSmlNavNote .patSmlNavNote-note .patSmlNavNote-note--list--link:hover {
  color: #60268F;
}
.patSmlNavNote .patSmlNavNote-note .patSmlNavNote-note--time .patSmlNavNote-note--time--icon {
  margin-right: 10px;
  vertical-align: -2px;
}

.patNavMenu {
  width: 100%;
}
.patNavMenu .patNavMenu-list, .patNavMenu .patNavMenu-lan {
  margin: 0 0 15px 0;
  display: block;
  border-bottom: 1px solid #e8e8e8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 500;
  color: #241430;
  line-height: 1.5;
  line-height: 30px;
  letter-spacing: 1px;
}
.patNavMenu .patNavMenu-list:hover, .patNavMenu .patNavMenu-lan:hover {
  opacity: 1;
}
.patNavMenu .patNavMenu-list--active {
  opacity: 1;
}
.patNavMenu .patNavMenu-icon {
  vertical-align: -4px;
  width: 20px;
  height: 20px;
  margin: 0 15px 0 0;
}
.patNavMenu .patNavMenu-lan {
  opacity: 1;
  margin: 0 0 15px 30px;
}
.patNavMenu .patNavMenu-secondList {
  width: 100%;
  padding: 0 30px 10px 96px;
  margin: 0;
}
.patNavMenu .patNavMenu-secondList:last-of-type {
  padding: 0 30px 20px 96px;
}

.patBigNav {
  display: none;
  width: 90px;
  height: 100%;
  background: #241430;
}
@media all and (min-width: 64em) {
  .patBigNav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
        align-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    position: fixed;
    z-index: 3;
  }
}
.patBigNav .patBigNav-note {
  width: 30px;
  height: 30px;
  position: relative;
  top: 35px;
  margin: 0 0 0 35px;
}
.patBigNav .patBigNav-note .patBigNav-note--count {
  right: -16px;
  top: -9px;
}
.patBigNav .patBigNav-link {
  height: auto;
}
.patBigNav .patBigNav-bt, .patBigNav .patBigNav-bt--pagein {
  width: 70px;
  height: 70px;
  margin: 0 0 5px 10px;
  background: #241430;
  line-height: 85px;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  text-align: center;
  border-bottom: 5px solid #241430;
  border-radius: 6px;
}
.patBigNav .patBigNav-bt:hover, .patBigNav .patBigNav-bt--pagein:hover {
  border-bottom: 5px solid #a51b0b;
  background: #7C4AA2;
  -webkit-box-shadow: 0px 8px 20px rgba(1, 37, 122, 0.12);
          box-shadow: 0px 8px 20px rgba(1, 37, 122, 0.12);
}
.patBigNav .patBigNav-bt:hover .patBigNav-bt--icon, .patBigNav .patBigNav-bt--pagein:hover .patBigNav-bt--icon {
  mix-blend-mode: luminosity;
  opacity: 1;
}
.patBigNav .patBigNav-bt .patBigNav-bt--icon, .patBigNav .patBigNav-bt--pagein .patBigNav-bt--icon {
  width: 70px;
  height: 70px;
  padding: 18px 20px 22px 20px;
  opacity: 0.5;
}
.patBigNav .patBigNav-bt--pagein {
  width: 70px;
  height: 70px;
  margin: 0 0 5px 10px;
  background: #FFF;
  line-height: 85px;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  text-align: center;
  border-bottom: 5px solid #a51b0b;
  background: #7C4AA2;
  -webkit-box-shadow: 0px 8px 20px rgba(1, 37, 122, 0.12);
          box-shadow: 0px 8px 20px rgba(1, 37, 122, 0.12);
}
.patBigNav .patBigNav-bt--pagein .patBigNav-bt--icon {
  width: 70px;
  height: 70px;
  padding: 18px 20px 22px 20px;
  mix-blend-mode: luminosity;
  opacity: 0.8;
}
.patBigNav .patBigNav-logout {
  width: 70px;
  height: 70px;
  padding: 20px;
  display: block;
  margin: 0 0 10px 15px;
}
.patBigNav .patBigNav-logout:hover {
  mix-blend-mode: exclusion;
}
.patBigNav .patBigNav-logout .patBigNav-logout--icon {
  width: 30px;
  height: 30px;
}

/* 電腦視口header*/
.patBigHeader {
  width: 100%;
  background: #FFF url(../images/header-bg.svg) no-repeat;
  display: none;
}
@media all and (min-width: 64em) {
  .patBigHeader {
    display: block;
    padding: 0 30px;
  }
}
@media all and (min-width: 118em) {
  .patBigHeader {
    padding: 0 50px;
  }
}

/*案場概觀底圖*/
.patBigHeader--plant {
  width: 100%;
  height: 195px;
  background: #FFF;
  position: absolute;
  overflow: hidden;
}
@media all and (min-width: 64em) {
  .patBigHeader--plant {
    margin: 0 -30px;
  }
}
@media all and (min-width: 118em) {
  .patBigHeader--plant {
    margin: 0 -50px;
  }
}
.patBigHeader--plant .patBigHeader--plant--img {
  position: absolute;
  top: -220%;
  opacity: 0.8;
  -webkit-filter: brightness(1.2) blur(5px);
          filter: brightness(1.2) blur(5px);
}

.patTimeUser {
  width: 100%;
  padding: 20px 0 0 0;
}
.patTimeUser .patTimeUser-time {
  width: auto;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 500;
  color: #241430;
  line-height: 1.5;
  font-weight: 600;
  color: #E9DEEF;
  line-height: 26px;
  float: left;
  padding-top: 5px;
  position: relative;
  z-index: 1;
}
.patTimeUser .patTimeUser-time .patTimeUser-time--Icon {
  vertical-align: -8px;
  width: 26px;
  height: 26px;
  margin-right: 15px;
}
.patTimeUser .patTimeUser-note {
  cursor: pointer;
  float: right;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.patTimeUser .patTimeUser-note:hover {
  background: #e8e8e8;
}
.patTimeUser .patTimeUser-note:active {
  background: #e8e8e8;
}
.patTimeUser .patTimeUser-note .patTimeUser-note--none, .patTimeUser .patTimeUser-note .patTimeUser-note--waring {
  margin: 8px 0 0 9px;
}
.patTimeUser .patTimeUser-dropdown {
  width: 220px;
}
.patTimeUser .patTimeUser-dropdown .patTimeUser-dropdown--list {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.patTimeUser .patTimeUser-user {
  width: auto;
  float: right;
  height: 50px;
  cursor: pointer;
  margin: 0 0 0 20px;
}
.patTimeUser .patTimeUser-user .patTimeUser-user--photo {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  margin: 0 15px 0 0;
  float: left;
}
.patTimeUser .patTimeUser-user .patTimeUser-user--name {
  width: auto;
  height: 50px;
  margin: 0 15px 0 0;
  line-height: 50px;
  float: left;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.2px;
}
.patTimeUser .patTimeUser-user .patTimeUser-user--icon {
  margin-top: 12px;
  float: left;
}

.patWrapper {
  margin: 54px 0 0 0;
}
@media all and (min-width: 64em) {
  .patWrapper {
    margin: 0 0 0 90px;
  }
}

.patMainbody {
  width: 100%;
}
@media all and (min-width: 64em) {
  .patMainbody {
    width: auto;
    margin-left: 320px !important;
  }
}
@media all and (min-width: 83em) {
  .patMainbody {
    margin-left: 320px !important;
  }
}

.patPrimary {
  width: 100%;
  padding: 15px 0;
}
@media all and (min-width: 48em) {
  .patPrimary {
    padding: 15px 15px;
  }
}
@media all and (min-width: 64em) {
  .patPrimary {
    padding: 30px 15px;
  }
}
@media all and (min-width: 118em) {
  .patPrimary {
    padding: 30px 35px;
  }
}

.patHeader {
  background: #FFF url(../images/header-bg.svg) no-repeat;
  background-position: right bottom;
  padding: 0 30px;
  overflow: hidden;
  line-height: 0;
  position: relative;
}
@media all and (min-width: 64em) {
  .patHeader {
    min-height: 260px;
    background-position: 95% 102%;
    padding: 0 45px;
  }
}

.patHeader--page {
  margin-top: 110px;
}
@media all and (min-width: 48em) {
  .patHeader--page {
    margin-top: 0px;
  }
}

.patHeader-searchCountBk {
  width: 100%;
  overflow: hidden;
  padding: 30px 0 0 0;
}

.patHeader-searchBk {
  position: relative;
}
@media all and (min-width: 48em) {
  .patHeader-searchBk {
    width: 300px;
    float: left;
  }
}

.patHeader-search {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: #60268F;
  color: #FFF;
  height: 44px;
  border-radius: 6px;
  line-height: 44px;
  padding: 0 20px;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Medium", sans-serif, "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 400;
  color: #FFF;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.patHeader-search::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}
.patHeader-search::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}
.patHeader-search:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}
.patHeader-search:-moz-placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.patHeader-search--bt {
  width: 40px;
  height: 40px;
  display: block;
  position: absolute;
  right: 12px;
  top: 1px;
  background: #60268F;
}
.patHeader-search--bt:hover {
  -webkit-transform: translateX(8px);
          transform: translateX(8px);
}

.patHeader-backBt {
  display: block;
  width: auto;
  font-size: 1rem;
  font-weight: 500;
  color: #989898;
  display: inline-block;
}
.patHeader-backBt .patHeader-backBt--icon {
  vertical-align: -3px;
}
.patHeader-backBt:hover {
  color: #707070;
}

.patHeader-mainArea {
  width: auto;
  margin-left: -45px;
  display: none;
}
@media all and (min-width: 64em) {
  .patHeader-mainArea {
    display: block;
  }
}

.patHeader-mainArea-name {
  height: 72px;
  background: #60268F;
  line-height: 72px;
  color: #FFF;
  display: inline-block;
  letter-spacing: 0.5px;
}

.patHeader-mainArea-logoutBt {
  display: inline-block;
  width: 72px;
  height: 72px;
  background: #60268F;
  line-height: 72px;
  text-align: center;
  margin-left: -4px;
  padding-left: 3px;
}
.patHeader-mainArea-logoutBt .patHeader-mainArea-logoutBt--icon {
  vertical-align: -8px;
}
.patHeader-mainArea-logoutBt:hover {
  background: #a51b0b;
}

.patHeader-count {
  width: 100%;
  margin: 30px 0 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #989898;
}
@media all and (min-width: 48em) {
  .patHeader-count {
    margin: 40px 0 0 0;
  }
}
@media all and (min-width: 64em) {
  .patHeader-count {
    width: auto;
    position: absolute;
    top: 30px;
    right: 45px;
    margin: 0;
  }
}
.patHeader-count .patHeader-count--icon {
  vertical-align: -3px;
}

.patHeader-infoBk {
  width: auto;
  padding: 40px 0 30px 0;
  overflow: hidden;
}
@media all and (min-width: 48em) {
  .patHeader-infoBk {
    padding: 20px 0 30px 0;
  }
}
@media all and (min-width: 64em) {
  .patHeader-infoBk {
    padding: 60px 0 40px 0;
  }
}

.patHeader-infoMain {
  width: 100%;
  float: left;
}
@media all and (min-width: 48em) {
  .patHeader-infoMain {
    width: 60%;
  }
}
@media all and (min-width: 64em) {
  .patHeader-infoMain {
    width: 40%;
  }
}
@media all and (min-width: 118em) {
  .patHeader-infoMain {
    width: 20%;
  }
}

.patHeader-infoMain--userImg {
  width: 75px;
  height: 75px;
  float: left;
}

.patHeader-infoMain--titArea {
  float: left;
}

.patHeader-infoMain--secondTit {
  color: #241430;
}

.patHeader-infoMain--mainTit {
  color: #60268F;
}

.patHeader-btArea {
  width: auto;
  float: left;
}

.patHeader-infoCountBk {
  display: none;
}
@media all and (min-width: 64em) {
  .patHeader-infoCountBk {
    width: 100%;
    margin-top: 20px;
    display: block;
    float: left;
    overflow: hidden;
  }
}
@media all and (min-width: 83em) {
  .patHeader-infoCountBk {
    width: auto;
    margin-top: 0px;
  }
}

.patHeader-infoCountBk--info {
  width: auto;
  margin-right: 60px;
  float: left;
  overflow: hidden;
}
@media all and (min-width: 83em) {
  .patHeader-infoCountBk--info {
    margin-right: 90px;
  }
}
@media all and (min-width: 118em) {
  .patHeader-infoCountBk--info {
    margin-right: 120px;
  }
}
.patHeader-infoCountBk--info--tit {
  color: #241430;
}
.patHeader-infoCountBk--info--number {
  color: #60268F;
}

.patTitEmBt {
  width: 100%;
  padding-top: 40px;
  position: relative;
  z-index: 1;
}

.patTitEmBt-tit {
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 20px 0 0 0;
}

.patTitEmBt-backBt {
  /*mix-blend-mode: difference 要在有底色的狀況之下才有效果*/
  float: left;
  margin: 20px 10px 0 0;
  width: 40px;
  height: 40px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.patTitEmBt-backBt:hover {
  -webkit-transform: translateX(-8px);
          transform: translateX(-8px);
}
.patTitEmBt-backBt:hover img {
  mix-blend-mode: difference;
}

.patTitEmBt-emBt {
  float: right;
  margin: 0 0 25px 0;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.patTitEmBt-total {
  width: auto;
  float: right;
  margin: 0 20px 0 0;
}
@media all and (min-width: 83em) {
  .patTitEmBt-total {
    margin: 0 30px 0 0;
  }
}
.patTitEmBt-total .patTitEmBt-total--tit {
  margin-top: -5px;
}
.patTitEmBt-total .patTitEmBt-total--num {
  font-size: 2.5em;
  font-weight: 800;
  color: #60268F;
  letter-spacing: -0.5px;
  margin-top: -3px;
}
.patTitEmBt-total .patTitEmBt-total--iconSize {
  font-size: 0.75rem;
}

.patFooter {
  width: 100%;
  height: 65px;
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  background: #E5D9EC;
  padding: 12px 0px 0px 0px;
  border-top: #bcbcbc;
  border-bottom: #e8e8e8;
}
@media all and (min-width: 64em) {
  .patFooter {
    height: 70px;
    padding: 18px 0px 0px 0px;
    position: relative;
  }
}
.patFooter .patTitEmBt-total {
  width: 20%;
  float: right;
  margin: 0 0 0 0;
}
.patFooter .patTitEmBt-total .patTitEmBt-total--tit {
  color: #241430;
  line-height: 1.2;
  font-size: 0.75rem;
  height: 30px;
  text-align: center;
}
@media all and (min-width: 83em) {
  .patFooter .patTitEmBt-total .patTitEmBt-total--tit {
    font-size: 0.9375rem;
    height: 20px;
  }
}
.patFooter .patTitEmBt-total .patTitEmBt-total--num {
  font-size: 1.25rem;
  font-weight: 700;
  color: #60268F;
  text-align: center;
}
@media all and (min-width: 83em) {
  .patFooter .patTitEmBt-total .patTitEmBt-total--num {
    font-size: 1.75rem;
    weight: 700;
  }
}
.patFooter .patTitEmBt-total .icon-size {
  font-size: 0.2rem;
  padding: 0 5px 0 0;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
  vertical-align: -1px;
}

/*頁籤切換區*/
.patTabArea {
  height: auto;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media all and (min-width: 64em) {
  .patTabArea {
    padding: 8px 0 0 0;
    overflow: visible;
    overflow-x: visible;
  }
}

/*內頁資料板型*/
.patPageContent-bk {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.patPageContent-33 {
  width: 100%;
}
@media all and (min-width: 48em) {
  .patPageContent-33 {
    width: 50%;
    padding: 0 20px;
  }
}
@media all and (min-width: 83em) {
  .patPageContent-33 {
    width: 33%;
  }
}

.patPageContent-66 {
  width: 100%;
}
@media all and (min-width: 48em) {
  .patPageContent-66 {
    width: 50%;
    padding: 0 20px;
  }
}
@media all and (min-width: 83em) {
  .patPageContent-66 {
    width: 66%;
  }
}

/*框架*/
@media all and (min-width: 48em) {
  .indexPrimary {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-line-pack: stretch;
        align-content: stretch;
  }
}

/*首頁主要內容區*/
@media all and (min-width: 48em) {
  .indexContent {
    width: 100%;
  }
}

.indLink {
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 9999;
  opacity: 0;
  background: #000;
}

.indBk {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
}

.indLeftBk {
  width: 45%;
  position: relative;
}

.indLeftBk-pageTitArea--dec {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100px;
}

.indLeftBk-pageTitArea--decBt {
  width: 65px;
  height: 65px;
  background: #FFD700;
  border-radius: 35px;
  position: absolute;
  left: 15px;
  bottom: 18px;
  display: table;
  text-align: center;
  -webkit-box-shadow: 0 0 0px 0px rgba(255, 215, 0, 0.54);
          box-shadow: 0 0 0px 0px rgba(255, 215, 0, 0.54);
}
.indLeftBk-pageTitArea--decBt img {
  width: 18px;
  vertical-align: -27px;
}

.indLeftBk-pageTitArea {
  width: 100%;
  min-height: calc(100vh - 240px);
  background: #60268F;
  padding: 80px 40px 0 60px;
}

.indLeftBk-pageTitArea--ChangeTit {
  margin-bottom: 40px;
  opacity: 1;
  min-height: 90px;
}
.indLeftBk-pageTitArea--ChangeTit h3 {
  color: #CBB4DA;
}

.indLeftBk-pageTitArea--chTit {
  color: #FFF;
}

.indLeftBk-pageTitArea--secondTit {
  color: #E5D9EC;
  opacity: 0.6;
  margin-bottom: 10px;
}

.indRightBk {
  width: 55%;
  position: relative;
  overflow: hidden;
}
.indRightBk img {
  width: 100%;
  height: 100%;
}

/*行事曆樣式*/
.status {
  width: 21px;
  bottom: 4px;
  position: absolute;
  left: calc(50% - 10px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.calEvent {
  width: 4px;
  height: 4px;
  border-radius: 4px;
  content: " ";
  display: block;
  background: #60268F;
  position: absolute;
  left: calc(50% - 3px);
  bottom: 4px;
}

/*事件列表*/
.calEventList, .calEventList--project, .calEventList--meeting {
  padding-right: 10px;
  margin-left: 10px;
  padding-bottom: 12px;
  border-left: 2px solid #e8e8e8;
  position: relative;
}
.calEventList .calEventList-clock, .calEventList--project .calEventList-clock, .calEventList--meeting .calEventList-clock {
  position: absolute;
  left: -8px;
}
.calEventList .calEventList-infoBk, .calEventList--project .calEventList-infoBk, .calEventList--meeting .calEventList-infoBk {
  margin-left: 20px;
  border-radius: 6px;
  padding: 15px 15px;
  overflow: hidden;
  display: block;
}
.calEventList .calEventList-infoBk:hover, .calEventList--project .calEventList-infoBk:hover, .calEventList--meeting .calEventList-infoBk:hover {
  -webkit-box-shadow: 0px 0px 8px rgba(34, 34, 34, 0.2);
          box-shadow: 0px 0px 8px rgba(34, 34, 34, 0.2);
}
.calEventList .calEventList-infoBk .calEventList-infoBk--startTime, .calEventList--project .calEventList-infoBk .calEventList-infoBk--startTime, .calEventList--meeting .calEventList-infoBk .calEventList-infoBk--startTime {
  width: 25%;
  float: left;
  text-align: right;
}
.calEventList .calEventList-infoBk .calEventList-infoBk--endTime, .calEventList--project .calEventList-infoBk .calEventList-infoBk--endTime, .calEventList--meeting .calEventList-infoBk .calEventList-infoBk--endTime {
  color: #0066ff;
  opacity: 0.6;
  font-weight: 500;
}
.calEventList .calEventList-infoBk .calEventList-infoBk--listTit, .calEventList--project .calEventList-infoBk .calEventList-infoBk--listTit, .calEventList--meeting .calEventList-infoBk .calEventList-infoBk--listTit {
  width: 75%;
  float: right;
  padding-left: 20px;
}
.calEventList .calEventList-infoBk .calEventList-infoBk--listContent, .calEventList--project .calEventList-infoBk .calEventList-infoBk--listContent, .calEventList--meeting .calEventList-infoBk .calEventList-infoBk--listContent {
  width: 75%;
  float: right;
  padding-left: 20px;
}

.calEventList--project .calEventList-infoBk {
  background: #cce8ff;
}
.calEventList--project .calEventList-infoBk--startTime {
  color: #0066ff;
}
.calEventList--project .calEventList-infoBk--listContent {
  color: #707070;
}

.calEventList--meeting .calEventList-infoBk {
  background: #60268F;
}
.calEventList--meeting .calEventList-infoBk--startTime {
  color: #CBB4DA !important;
}
.calEventList--meeting .calEventList-infoBk--endTime {
  color: #CBB4DA !important;
  opacity: 0.6;
}
.calEventList--meeting .calEventList-infoBk--listTit {
  color: #FFF;
}
.calEventList--meeting .calEventList-infoBk--listContent {
  color: #FFF;
  opacity: 0.6;
}

/*模組區*/
.modLogoTitArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: self-start;
      -ms-flex-align: self-start;
          align-items: self-start;
}

.modLogoTitArea-logo {
  width: 165px;
  margin-top: -20px;
  mix-blend-mode: darken;
}

.modLogoTitArea-enTit {
  margin-left: 45px;
  min-width: 260px;
  padding: 35px 40px 0px 40px;
  background: #321946;
  color: #976DB4;
  line-height: 1.7;
  min-height: 140px;
}

.modLogoTitArea-decArea {
  min-width: 700px;
  background: #FCAE29;
  height: 140px;
}

.modLogoTitArea-enTit--long {
  min-width: 280px;
}

.modLogoTitArea-pageTitArea {
  min-width: 690px;
  background: #60268F;
  height: 140px;
}

.modLogoTitArea-pageTitArea--changeTit h5 {
  color: #CBB4DA;
}

.modLogoTitArea-pageTitArea--chTit {
  color: #FFF;
}

/*各頁面*/
.pagMainBk {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
}

.pagMainLeftBk {
  width: 45%;
  position: relative;
}

.pagMainLeftBk-pageTitArea--dec {
  position: absolute;
  bottom: 50px;
  right: 50px;
  width: 100px;
}

.pagMainLeftBk-pageTitArea--decBt {
  width: 65px;
  height: 65px;
  background: #FFD700;
  border-radius: 35px;
  position: absolute;
  right: 60px;
  bottom: 70px;
  display: table;
  text-align: center;
  -webkit-box-shadow: 0 0 0px 0px rgba(255, 215, 0, 0.54);
          box-shadow: 0 0 0px 0px rgba(255, 215, 0, 0.54);
}
.pagMainLeftBk-pageTitArea--decBt img {
  width: 18px;
  vertical-align: -27px;
}

.pagMainLeftBk-pageTitArea {
  width: 100%;
  min-height: calc(100vh - 240px);
  background: #60268F;
  padding: 70px 40px 0 60px;
}

.pagMainLeftBk-pageTitArea--ChangeTit {
  margin-bottom: 50px;
  opacity: 1;
  min-height: 90px;
}
.pagMainLeftBk-pageTitArea--ChangeTit h3 {
  color: #CBB4DA;
}

.pagMainLeftBk-pageTitArea--chTit {
  color: #FFF;
  margin-bottom: 60px;
}

.pagMainLeftBk-pageTitArea--secondTit {
  color: #E5D9EC;
  opacity: 0.6;
  margin-bottom: 10px;
}

.pagMainRightBk {
  width: 55%;
}

.pagMainRightBk-list {
  width: 100%;
  height: 20vh;
  overflow: hidden;
  -webkit-box-shadow: 0px 0px 50px rgba(50, 25, 70, 0.08);
          box-shadow: 0px 0px 50px rgba(50, 25, 70, 0.08);
  padding: 0 50px;
  display: block;
  position: relative;
}
.pagMainRightBk-list:active, .pagMainRightBk-list:focus {
  -webkit-box-shadow: 0 0 50px 20px rgba(255, 215, 0, 0.24);
          box-shadow: 0 0 50px 20px rgba(255, 215, 0, 0.24);
}
.pagMainRightBk-list:nth-of-type(1) {
  border-right: 12px solid #60268F;
}
.pagMainRightBk-list:nth-of-type(2) {
  border-right: 12px solid #7C4AA2;
}
.pagMainRightBk-list:nth-of-type(3) {
  border-right: 12px solid #976DB4;
}
.pagMainRightBk-list:nth-of-type(4) {
  border-right: 12px solid #B190C7;
}
.pagMainRightBk-list:nth-of-type(5) {
  border-right: 12px solid #CBB4DA;
}

.pagMainRightBk-list--chtit {
  width: 40%;
  display: inline-block;
  color: #241430;
  line-height: 20vh;
  float: left;
}

.pagMainRightBk-list--titStarArea {
  width: 60%;
  display: inline-block;
  float: right;
  padding-top: 35px;
}

.pagMainRightBk-list--changeTitArea {
  width: 100%;
  opacity: 1;
  height: 42px;
  overflow: hidden;
}
.pagMainRightBk-list--changeTitArea h4 {
  color: #60268F;
  text-align: right;
}

.pagMainRightBk-list--starArea {
  text-align: right;
}
.pagMainRightBk-list--starArea img {
  width: 23px;
  margin: 0 0 0 3px;
}

.pagResultBk {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
}

.pagResult-topBanner {
  width: 100%;
  height: 140px;
}

.pagResult-mainArea {
  width: 100%;
  height: calc(100vh - 240px);
  background: #60268F;
  position: relative;
}

.pagResult-mainArea--dec {
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 100px;
}

.pagResult-mainArea h3 {
  color: #CBB4DA;
}
.pagResult-mainArea h1 {
  color: #fff;
}
.pagResult-mainArea h4 {
  color: #CBB4DA;
}

.pagReasonBk {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
}

.pagReason-topBanner {
  width: 100%;
  height: 140px;
}

.pagReason-mainArea {
  width: 100%;
  height: calc(100vh - 240px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.pagReason-mainArea--list {
  width: 50%;
  height: calc(100vh / 5 - 100px / 5);
  -webkit-box-shadow: 0px 0px 50px rgba(50, 25, 70, 0.08);
          box-shadow: 0px 0px 50px rgba(50, 25, 70, 0.08);
  padding: 0 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.pagReason-mainArea--list:active, .pagReason-mainArea--list:focus {
  -webkit-box-shadow: 0 0 50px 20px rgba(255, 215, 0, 0.24);
          box-shadow: 0 0 50px 20px rgba(255, 215, 0, 0.24);
}

.pagReason-mainArea--listIcon {
  width: 80px;
  height: auto;
  padding-top: 5px;
}

.pagReason-mainArea--listTextArea {
  padding: 0px 40px 0 40px;
}

.pagReason-mainArea--chTit {
  color: #241430;
  letter-spacing: 1px;
  padding-top: 10px;
}

.pagReason-mainArea--cahngeTit {
  height: 35px;
}
.pagReason-mainArea--cahngeTit h5 {
  color: #60268F;
  letter-spacing: 0px;
  font-size: 1rem;
}

/*狀紙*/
.coverA4 {
  width: 21cm;
  height: 29.7cm;
  background: #FFF;
  padding: 2cm;
  margin: 0 auto;
}

.coverLogo {
  width: 10cm;
  height: auto;
  margin: 0 auto 1cm auto;
  text-align: center;
  display: block;
}

.coverTit {
  font-family: "標楷體";
  line-height: 2;
}

.coverTit--underLine {
  text-align: center;
  text-decoration: underline;
}

.coverqrcodeBk {
  width: 9cm;
  height: 9cm;
  border: 2px solid black;
  margin: 0 auto;
}

.coverqrcode {
  margin: 1.7cm auto;
  display: block;
}

.coverAddTit {
  font-family: "標楷體";
  text-align: right;
  line-height: 1.8;
}

/*列印用*/
.jsRotate {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.jssecond-level-area {
  display: none;
}