@charset "UTF-8";
/*載入檔案區*/ /*斷點設置*/
/*列印用*/
/*列印用裡面生效的css*/
/*列印時設定邊界用*/
@font-face {
  font-family: "Montserrat-Regular";
  src: local("Montserrat");
  src: url("../fonts/Montserrat/Montserrat-Regular.ttf") format("opentype");
  src: url("../fonts/Montserrat/Montserrat-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat-Medium";
  src: local("Montserrat");
  src: url("../fonts/Montserrat/Montserrat-Medium.ttf") format("opentype");
  src: url("../fonts/Montserrat/Montserrat-Medium.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat-Bold";
  src: local("Montserrat");
  src: url("../fonts/Montserrat/Montserrat-Bold.ttf") format("opentype");
  src: url("../fonts/Montserrat/Montserrat-Bold.woff") format("woff");
  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.otf") format("opentype");
  src: url("../fonts/Noto_Sans_TC/NotoSansTC-Regular.woff") format("woff");
  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.otf") format("opentype");
  src: url("../fonts/Noto_Sans_TC/NotoSansTC-Medium.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "NotoSansTC-bold";
  src: local("Noto Sans CJK TC");
  /* src: url("../fonts/Noto_Sans_TC/NotoSansTC-Medium.woff") format("woff"); */
  src: url("../fonts/Noto_Sans_TC/NotoSansTC-Bold.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
/*文字相關設定*/
/*文字單行+nowrap*/
/*文字基本設定*/
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0 0 0 0;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Regular", sans-serif,
    "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 400;
  color: #131621;
  line-height: 1.8;
  letter-spacing: 0.5px;
}

h6,
p {
  font-weight: 400;
  letter-spacing: 0.5px;
  font-size: 1.0625rem;
}
@media all and (min-width: 78em) {
  h6,
  p {
    font-size: 1.125rem;
  }
}
h6 .icon,
p .icon {
  vertical-align: -2px;
}

.typoMainColor.typoMainColor {
  color: #3b6bba;
}

.typoSecondColor {
  color: #5dd0fc;
}

.typoWarningColor.typoWarningColor {
  color: #eeac25;
}

.typoDangerColor.typoDangerColor {
  color: #ff4238;
}

.typoSuccessColor.typoSuccessColor {
  color: #2fd600;
}

.typoGrayColor-400.typoGrayColor-400 {
  color: #788ba3;
}

.typoWhiteColor {
  color: #fff;
}

.typoDisableColor.typoDisableColor {
  color: #131621;
  opacity: 0.5;
}

.typoText-20 {
  font-size: 1.25rem;
}

.typoText-22 {
  font-size: 1.38rem;
}

.typoText-34 {
  font-size: 2.13rem;
}
.typoWeight-bold {
  font-weight: 700 !important;
}

.typoNowrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.typoRegular--en {
  font-family: "Montserrat-Regular";
}

.typoDecUnderLine {
  text-decoration: underline;
}

.typoWeight-medium {
  font-family: "NotoSansTC-Medium";
}

/*基底通用設定*/
/*zdialog*/
.buttonStyle {
  width: 64px;
  height: 22px;
  line-height: 22px;
  color: #ad6c39;
  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: #c8d3e3;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Regular", sans-serif,
    "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 400;
  color: #131621;
  line-height: 1.8;
  letter-spacing: 0.5px;
}

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

/*反白字體*/
::-moz-selection {
  background: #3b6bba;
  color: #fff;
}
::selection {
  background: #3b6bba;
  color: #fff;
}

/*按下無藍色框*/
/*無障礙focus用*/
/*scrollbar*/
::-webkit-scrollbar {
  width: 10px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #ebfaff;
}

::-webkit-scrollbar-thumb {
  background: #5dd0fc;
}

::-webkit-scrollbar-thumb:hover {
  background: #6482c6;
}

progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
}

progress[value]::-webkit-progress-bar {
  background-color: #b6c5da;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 10px rgba(34, 34, 34, 0.08);
  box-shadow: 0 0 10px rgba(34, 34, 34, 0.08);
}

progress[value]::-webkit-progress-value {
  background: rgb(0, 102, 255);
  border-radius: 4px;
  -webkit-box-shadow: 0 0 10px rgba(34, 34, 34, 0.12);
  box-shadow: 0 0 10px rgba(34, 34, 34, 0.12);
}

/*頁面框架及常用設定*/
.max_width {
  width: 100%;
  margin: 0 auto;
}
@media all and (min-width: 78em) {
  .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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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-12 {
  margin-left: 12px;
}

.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-5 {
  margin-top: 5px;
  margin-bottom: 5px;
}

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

/*內容區域底色*/
.sectionAreaBg {
  background: #fff;
  -webkit-box-shadow: 0px 5px 60px 0px inset rgba(29, 38, 60, 0.08);
  box-shadow: 0px 5px 60px 0px inset rgba(29, 38, 60, 0.08);
}

/*編輯頁區域設定*/
/*gutter*/
.gutter {
  padding-left: 0px;
  padding-right: 0px;
}
@media all and (min-width: 64em) {
  .gutter {
    padding-left: 15px;
    padding-right: 15px;
  }
}

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

.fieldEditBk-area {
  padding-top: 40px;
  padding-bottom: 30px;
}
@media all and (min-width: 78em) {
  .fieldEditBk-area {
    padding-left: 20px;
    padding-right: 20px;
  }
}

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

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

.grid--33 {
  width: 100%;
  float: left;
}
@media all and (min-width: 48em) {
  .grid--33 {
    width: 33%;
  }
}
@media all and (min-width: 78em) {
  .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: 78em) {
  .grid--66 {
    width: 66%;
  }
}

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

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

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

.dib {
  display: inline-block;
}

/*按鈕部件*/
/*按鈕設置*/
/*第一款 基本大按鈕*/
/*強調按鈕陰影設定*/
/*頁面基本按鈕*/
/*編輯藍色按鈕*/
.btnBlue {
  display: inline-block;
  width: auto;
  height: 44px;
  padding: 0 15px;
  line-height: 45px;
  border-radius: 6px;
  background: rgb(0, 102, 255);
  color: #fff;
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-Medium, sans-serif;
  font-size: 1.0625rem;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.btnBlue:hover {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.btnBlue:active {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.btnBlue:focus {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  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: 45px;
  border-radius: 6px;
  background: #2fd600;
  color: #fff;
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-Medium, sans-serif;
  font-size: 1.0625rem;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.btnGreen:hover {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.btnGreen:active {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.btnGreen:focus {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  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: 45px;
  border-radius: 6px;
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(rgb(100, 130, 198)),
    to(rgb(59, 107, 186))
  );
  background: linear-gradient(0deg, rgb(100, 130, 198), rgb(59, 107, 186));
  color: #fff;
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-Medium, sans-serif;
  font-size: 1.0625rem;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  border: none;
}
.btnMainColor:hover {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.btnMainColor:active {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.btnMainColor:focus {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.btnMainColor .btn-base--icon {
  margin-left: 10px;
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}
.btnMainColor:hover {
  color: #fff;
}

.btnSecondColor {
  display: inline-block;
  width: auto;
  height: 44px;
  padding: 0 15px;
  line-height: 45px;
  border-radius: 6px;
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(rgb(93, 208, 252)),
    to(rgb(93, 181, 254))
  );
  background: linear-gradient(0deg, rgb(93, 208, 252), rgb(93, 181, 254));
  color: #fff;
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-Medium, sans-serif;
  font-size: 1.0625rem;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  border: none;
}
.btnSecondColor:hover {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.btnSecondColor:active {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.btnSecondColor:focus {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.btnSecondColor .btn-base--icon {
  margin-left: 10px;
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}
.btnSecondColor:hover {
  color: #fff;
}

/*淺主色按鈕*/
/*主色新增按鈕*/
.btnAdd {
  display: inline-block;
  width: auto;
  height: 44px;
  padding: 0 15px;
  line-height: 45px;
  border-radius: 6px;
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(rgb(100, 130, 198)),
    to(rgb(59, 107, 186))
  );
  background: linear-gradient(0deg, rgb(100, 130, 198), rgb(59, 107, 186));
  color: #fff;
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-Medium, sans-serif;
  font-size: 1.0625rem;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.btnAdd:hover {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.btnAdd:active {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.btnAdd:focus {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.btnAdd .btn-base--icon {
  margin-left: 10px;
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}
.btnAdd:hover {
  color: #fff;
}

/*編輯按鈕*/
.btnEdit {
  display: inline-block;
  width: auto;
  height: 44px;
  padding: 0 15px;
  line-height: 45px;
  border-radius: 6px;
  background: #fff;
  color: #131621;
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-Medium, sans-serif;
  font-size: 1.0625rem;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  border: 1px solid #a4b7d1;
}
.btnEdit:hover {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.btnEdit:active {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.btnEdit:focus {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.btnEdit .btn-base--icon {
  margin-left: 10px;
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}
.btnEdit:hover {
  color: #131621;
}

/*刪除按鈕*/
.btnDelete {
  display: inline-block;
  width: auto;
  height: 44px;
  padding: 0 15px;
  line-height: 45px;
  border-radius: 6px;
  background: #fff;
  color: #a4b7d1;
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-Medium, sans-serif;
  font-size: 1.0625rem;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  border: 1px solid #a4b7d1;
}
.btnDelete:hover {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.btnDelete:active {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.btnDelete:focus {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.btnDelete .btn-base--icon {
  margin-left: 10px;
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}
.btnDelete:hover {
  color: #a4b7d1;
}
.btnDelete .icon {
  vertical-align: -2px;
}

/*頁面強調按鈕*/
.btnEm-bt {
  display: block;
  width: 210px;
  height: 50px;
  line-height: 50px;
  background: #345998;
  border-radius: 25px;
  -webkit-box-shadow: 0px 0px 30px rgba(29, 38, 60, 0.08);
  box-shadow: 0px 0px 30px rgba(29, 38, 60, 0.08);
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Regular", sans-serif,
    "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 400;
  color: #131621;
  line-height: 1.8;
  letter-spacing: 0.5px;
  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-Regular", sans-serif,
    "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 400;
  color: #131621;
  line-height: 1.8;
  letter-spacing: 0.5px;
  font-weight: 700;
  color: #b6c5da;
  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 #a4b7d1;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.btnField:hover {
  background: #a4b7d1;
  color: #131621;
}

.btnField--submit {
  color: #ffffff;
  background: #345998;
}
.btnField--submit:hover {
  color: #ffffff;
  background: #6482c6;
}

.btnField--active {
  background: #a4b7d1;
  color: #131621;
}
.btnField--active:hover {
  background: #f5f6fc;
}

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

.btnField--select {
  background: #a4b7d1;
  color: #131621;
}

.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-Regular", sans-serif,
    "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 400;
  color: #131621;
  line-height: 1.8;
  letter-spacing: 0.5px;
  font-weight: 700;
  color: #131621;
  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: #3b6bba;
  float: right;
  border-radius: 7px;
  -webkit-box-shadow: 0px 0px 30px rgba(29, 38, 60, 0.08);
  box-shadow: 0px 0px 30px rgba(29, 38, 60, 0.08);
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Regular", sans-serif,
    "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 400;
  color: #131621;
  line-height: 1.8;
  letter-spacing: 0.5px;
  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 #a4b7d1;
  background: #fff;
  padding: 5px 0 0 0;
  float: right;
}
.btnFieldIcon:hover {
  background: #a4b7d1;
}

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

.fieTit {
  width: 100%;
  background: #f5f5fa;
  padding: 20px 20px;
  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: #3b6bba;
  -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: #f5f5fa;
  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-Regular", sans-serif,
    "Microsoft JhengHei" !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  color: #788ba3;
  margin: 0 0 10px 0 !important;
  letter-spacing: 0.5px;
}

.ui.form .field > label {
  color: #788ba3;
}

.ui.checkbox label {
  color: #131621;
}

.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--75 {
  width: 100%;
}
@media all and (min-width: 48em) {
  .fidArea--75 {
    width: 100%;
    float: left;
    clear: none !important;
  }
}
@media all and (min-width: 64em) {
  .fidArea--75 {
    width: 50%;
  }
}
@media all and (min-width: 78em) {
  .fidArea--75 {
    width: 75%;
  }
}

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

.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: 78em) {
  .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 #a4b7d1;
}

.ui.form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

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

.fieverti {
  padding: 0 0 0 15px !important;
  color: #ff4238 !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-Regular", sans-serif,
    "Microsoft JhengHei" !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  color: #131621 !important;
  margin: 30px 0 10px 0 !important;
  padding-left: 30px;
  padding-right: 30px;
}

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

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

.ui.selection.active.dropdown .menu {
  border: 1px solid #5dd0fc !important;
}

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

.ui.dropdown:not(.button) > .default.text,
.ui.default.dropdown:not(.button) > .text {
  color: #131621 !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 #a4b7d1 !important;
  line-height: 44px !important;
  padding: 0 20px !important;
  background: #fff !important;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Regular", sans-serif,
    "Microsoft JhengHei" !important;
  font-size: 1.0625rem !important;
  color: #131621 !important;
  -webkit-transition: all 0.3s linear !important;
  transition: all 0.3s linear !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: #f5f5fa;
}
.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: #f5f5fa;
}
.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 #5dd0fc !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 #5dd0fc !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: #131621 !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: #131621 !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: #131621 !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: #131621 !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 #a4b7d1 !important;
  line-height: 1.5 !important;
  padding: 0 20px !important;
  background: #fff !important;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Regular", sans-serif,
    "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 400;
  color: #131621;
  line-height: 1.8;
  letter-spacing: 0.5px;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Regular", sans-serif,
    "Microsoft JhengHei" !important;
  font-size: 1.0625rem !important;
  font-weight: 500 !important;
  color: #131621 !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 #5dd0fc !important;
}
.ui.form textarea:focus {
  border: 1px solid #5dd0fc !important;
}
.ui.form textarea::-webkit-input-placeholder {
  color: #131621 !important;
}
.ui.form textarea::-moz-placeholder {
  color: #131621 !important;
}
.ui.form textarea:-ms-input-placeholder {
  color: #131621 !important;
}
.ui.form textarea:-moz-placeholder {
  color: #131621 !important;
}
.ui.form input[type="checkbox"],
.ui.form input[type="radio"] {
  padding-left: 20px !important;
  border: 1px solid #a4b7d1 !important;
}
.ui.form input[type="checkbox"]:hover,
.ui.form input[type="radio"]:hover {
  border: 1px solid #5dd0fc !important;
}
.ui.form input[type="checkbox"]:focus,
.ui.form input[type="radio"]:focus {
  border: 1px solid #5dd0fc !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: #5dd0fc !important;
}
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box:before label,
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:before label,
.ui.checkbox input:checked:focus ~ .box:before label,
.ui.checkbox input:checked:focus ~ label:before label {
  color: #131621 !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 樣式*/
.eleSectionTit--mainColor {
  font-size: 1.25rem;
  font-family: "NotoSansTC-Medium";
  color: #3b6bba;
}
.eleSectionTit--disableColor {
  font-size: 1.25rem;
  font-family: "NotoSansTC-Medium";
  color: #98b3dc;
}

.eleSectionTit--black {
  font-size: 1.25rem;
  font-family: "NotoSansTC-Medium";
  color: black;
}

.eleSectionTit--primaryColor800 {
  font-size: 1.1875rem;
  font-family: "NotoSansTC-Medium";
  color: #2d4778;
}

/*分隔線*/
.eleGrayLine {
  width: 100%;
  height: 1px;
  border-top: 1px solid #a4b7d1;
}

/*通知圖示按鈕*/
.elenote {
  width: 24px;
  height: 24px;
}
.elenote .elenote-count {
  width: 28px;
  height: 28px;
  position: absolute;
  right: -18px;
  top: -10px;
  background: rgb(0, 102, 255);
  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: #2d4778;
  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: #6482c6 !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: rgb(204, 232, 255);
  color: rgb(0, 78, 219);
}

.eleTit-label--suit {
  background: #fff3de;
  color: #3b6bba;
}

.eleTit-label--civil {
  background: #b6c5da;
  color: #131621;
}

.eleTit-label--criminal {
  background: #ffede3;
  color: #ff4238;
}

.eleTit-label--debt {
  background: #e1e5f4;
  color: #6482c6;
}

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

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

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

.eleAct-label--auto {
  background: #f0f2f9;
  color: #6482c6;
}

.eleAct-label--manual {
  background: #6482c6;
  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: #b6c5da;
  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: 56px;
  }
}
.eleTab--ori a,
.eleTab--ori--newsTab a,
.eleTab--in a,
.eleTab--in--newsTab a {
  color: #788ba3;
  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.1875rem;
    font-family: "NotoSansTC-Medium";
    letter-spacing: 1.2px;
    padding: 0 10px;
  }
}
.eleTab--ori:hover a,
.eleTab--ori--newsTab:hover a,
.eleTab--in:hover a,
.eleTab--in--newsTab:hover a {
  color: #131621;
  text-decoration: none;
}
.eleTab--ori:hover::after,
.eleTab--ori--newsTab:hover::after,
.eleTab--in:hover::after,
.eleTab--in--newsTab:hover::after {
  background: linear-gradient(135deg, rgb(93, 208, 252), rgb(93, 181, 254));
  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: 7px;
  margin: 0 0 0 10px;
  border-radius: 7px 7px 0 0;
  -webkit-transition: all 0 0.5s ease-in-out;
  transition: all 0 0.5s ease-in-out;
}

.eleTab--in a {
  color: #131621;
}
.eleTab--in::after {
  width: 100%;
  background: linear-gradient(135deg, rgb(93, 208, 252), rgb(93, 181, 254));
}

.eleTab--ori--newsTab a {
  color: #788ba3;
}
.eleTab--ori--newsTab:hover a {
  color: #131621;
}

.eleTab--in--newsTab a {
  color: #131621;
}
.eleTab--in--newsTab::after {
  width: 100%;
  background: #3b6bba;
}

.eleInfoList--phoneTit {
  display: block;
  color: #788ba3;
  font-size: 0.9375rem;
}
@media all and (min-width: 78em) {
  .eleInfoList--phoneTit {
    display: none;
  }
}

.eleInfoList--context {
  font-size: 1.0625rem;
}
@media all and (min-width: 78em) {
  .eleInfoList--context {
    font-size: 1.125rem;
  }
}

.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 12px 0;
  float: left;
  letter-spacing: 0px;
}
@media all and (min-width: 78em) {
  .eleInfoList--50,
  .eleInfoList--100,
  .eleInfoList--50--phone {
    margin: 0px 0 0px 0;
    word-wrap: break-word;
  }
}

.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: 78em) {
  .elesmlSerAdd .elesmlSerAdd-Bt--search {
    display: none;
  }
}
.elesmlSerAdd .elesmlSerAdd-Bt--add {
  background: #3b6bba;
}
@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: 78em) {
  .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 #a4b7d1 !important;
  line-height: 56px !important;
  padding: 0 20px !important;
  background: #fff !important;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Regular", sans-serif,
    "Microsoft JhengHei" !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #131621 !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: #131621 !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: #f5f5fa;
  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-Regular", sans-serif,
    "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 400;
  color: #131621;
  line-height: 1.8;
  letter-spacing: 0.5px;
  font-weight: 700;
  color: #131621;
  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: #131621;
}
.eleSortUi .eleSortUi-serach::-moz-placeholder {
  color: #131621;
}
.eleSortUi .eleSortUi-serach:-ms-input-placeholder {
  color: #131621;
}
.eleSortUi .eleSortUi-serach::-ms-input-placeholder {
  color: #131621;
}
.eleSortUi .eleSortUi-serach::placeholder {
  color: #131621;
}
.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: #131621;
}
.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: #e1e5f4;
}

.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: 78em) {
  .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: 78em) {
  .elePlantFunAdd-bt {
    margin-bottom: 35px;
  }
}
.elePlantFunAdd-bt:hover {
  -webkit-transform: translateX(12px);
  transform: translateX(12px);
  color: #131621;
}
.elePlantFunAdd-bt .eleExpo-bt--icon {
  float: right;
  margin-top: 17px;
}

.elePage {
  width: auto;
  float: right;
}
.elePage .elePage-arrowBt {
  width: 41px;
  height: 41px;
  display: inline-block;
  background: #3b6bba;
  border-radius: 6px;
  float: left;
  margin-top: 1px;
}
.elePage .elePage-arrowBt:hover {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.elePage .elePage-arrowBt:active {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.elePage .elePage-arrowBt:focus {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.elePage .elePage-arrowBt--back img {
  margin: 13px 0 0 13px;
}
.elePage .elePage-arrowBt--next img {
  margin: 13px 0 0 13px;
}
.elePage .elePage-conut {
  width: 140px;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #131621;
  margin: 0 15px;
  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: #2fd600;
}
.eleAlarm .eleAlarm-grandTit .eleAlarm-grandTit--Icon--grand02 {
  background: rgb(255, 51, 0);
}
.eleAlarm .eleAlarm-grandTit .eleAlarm-grandTit--Icon--grand03 {
  background: rgb(36, 53, 66);
}
.eleAlarm .eleAlarm-grandTit .eleAlarm-grandTit--Icon--grand04 {
  background: #eeac25;
}
.eleAlarm .eleAlarm-grandTit .eleAlarm-grandTit--Icon--grand05 {
  background: #ff4238;
}
.eleAlarm .eleAlarm-content {
  height: 80px;
  padding: 10px 25px 0 35px;
  overflow-y: auto;
  color: #b6c5da;
  line-height: 1.6;
  background: #f5f6fc;
  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: 220px !important;
}

.eleGrayColorBg {
  background: #f5f5fa;
}

.eleSecondColorBg {
  background: #ebfaff;
}

.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: #345998;
}

.eleColorLabel--lightMain {
  color: #3b6bba;
  background: #e1e5f4;
}

.eleColorLabel--lightinfo {
  color: #3b6bba;
  background: rgb(204, 232, 255);
}

.eleColorLabel--info {
  color: #fff;
  background: rgb(0, 102, 255);
}

.eleColorLabel--lightgray {
  color: #3b6bba;
  background: #b6c5da;
}

.eleColorLabel--waring {
  color: #3b6bba;
  background: #eeac25;
}

.elestatusLabel {
  border-radius: 36px;
  padding: 3px 20px 3px 4px;
  line-height: 1;
  display: inline-block;
  font-family: "NotoSansTC-Medium";
  letter-spacing: 1px;
  border: 1px solid #fff;
}
.elestatusLabel::before {
  padding: 0 7px 0 0;
  vertical-align: -9px;
}

/*卡片區*/
/*無分欄*/
/*卡片*/
.card {
  width: 100%;
}
@media all and (min-width: 48em) {
  .card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
/*卡片列表樣式*/
.cardliList-content,
.cardliList--titArea--tit {
  font-weight: normal;
}

.cardliList {
  width: 100%;
  padding-top: 30px;
  padding-bottom: 20px;
}
@media all and (min-width: 48em) {
  .cardliList {
    width: 50%;
    -webkit-box-shadow: 0px 5px 30px 0px rgba(29, 38, 60, 0.08);
    box-shadow: 0px 5px 30px 0px rgba(29, 38, 60, 0.08);
    float: left;
  }
}
@media all and (min-width: 78em) {
  .cardliList {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 6px;
    padding-bottom: 10px;
    padding-top: 10px;
    min-height: 90px;
  }
}

.cardliList:nth-of-type(2n) {
  background: #f5f6fc;
}

.cardliList-titArea {
  display: none;
  border-bottom: 1px solid #e1e5f4;
}
@media all and (min-width: 78em) {
  .cardliList-titArea {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: left;
    padding-top: 20px;
    padding-bottom: 10px;
  }
}

.cardliList-titArea--tit {
  line-height: 40px;
  color: #788ba3;
  font-weight: normal;
}

@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%;
  padding: 0 15px 10px 15px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
}
@media all and (min-width: 78em) {
  .patSmlHeader {
    display: none;
  }
}

.patSmlHeader-navbt {
  width: 30px;
  height: 30px;
  margin: 15px 20px 0 0;
}

.patSmlHeader-webName {
  margin: 15px 0 0 0;
  font-size: 0.88em;
}

.patSmlNav {
  width: 320px;
  height: 100%;
  position: fixed;
  top: 0;
  left: -320px;
  z-index: 4;
  overflow-y: auto;
  background: linear-gradient(135deg, rgb(100, 130, 198), rgb(59, 107, 186));
}
.patSmlNav .patSmlNav-closeBt {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 20px;
  top: 20px;
  cursor: pointer;
}

.patSmlNavopen_bg {
  width: 100%;
  height: 100%;
  background: rgba(19, 22, 33, 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: rgb(204, 232, 255);
  border-bottom: 1px solid #fff;
}
.patSmlNavNote .patSmlNavNote-note .patSmlNavNote-note--list--link {
  color: rgb(0, 102, 255);
  text-decoration: underline;
}
.patSmlNavNote .patSmlNavNote-note .patSmlNavNote-note--list--link:hover {
  color: #3b6bba;
}
.patSmlNavNote
  .patSmlNavNote-note
  .patSmlNavNote-note--time
  .patSmlNavNote-note--time--icon {
  margin-right: 10px;
  vertical-align: -2px;
}

.patNavMenu {
  width: 100%;
}

.patNavMenu-list,
.patNavMenu-lan {
  padding: 12px 20px 10px 20px;
  margin: 0 0 6px 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Regular", sans-serif,
    "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 400;
  color: #131621;
  line-height: 1.8;
  letter-spacing: 0.5px;
  color: #fff;
  line-height: 30px;
  letter-spacing: 1.5px;
}
.patNavMenu-list:hover,
.patNavMenu-list:active,
.patNavMenu-lan:hover,
.patNavMenu-lan:active {
  opacity: 1;
  color: #fff;
}

.patNavMenu-list--active {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(rgb(93, 208, 252)),
    to(rgb(93, 181, 254))
  );
  background: linear-gradient(0deg, rgb(93, 208, 252), rgb(93, 181, 254));
  border-radius: 6px;
}
.patNavMenu-list--active .patNavMenu-icon {
  mix-blend-mode: color-dodge;
}

.patNavMenu-icon {
  vertical-align: -7px;
  width: 24px;
  height: 24px;
  margin: 0 10px 0 0;
}

.patNavMenu-lan {
  opacity: 1;
  margin: 0 0 15px 30px;
}

.patNavMenu-secondList {
  width: 100%;
  padding: 0 30px 10px 96px;
  margin: 0;
}
.patNavMenu-secondList:last-of-type {
  padding: 0 30px 20px 96px;
}

.patBigNav {
  display: none;
  width: 100px;
  height: 100%;
  background: #3b6bba;
}
@media all and (min-width: 78em) {
  .patBigNav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    /* -ms-flex-line-pack: center;
        align-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; */
    position: fixed;
    z-index: 3;
    overflow-y: scroll;
    overflow-x: hidden;
  }
}

.patBigNav-note {
  width: 30px;
  height: 30px;
  position: relative;
  top: 35px;
  margin: 0 0 0 35px;
}
.patBigNav-note .patBigNav-note--count {
  right: -16px;
  top: -9px;
}

.patBigNav-link {
  height: auto;
  margin: auto 0;
}

.patBigNav-bt,
.patBigNav-bt.patNavMenu-list--active {
  display: block;
  width: 100px;
  height: 74px;
  margin: 0 0 5px 10px;
  padding: 0 20px 0 0;
  line-height: 95px;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  text-align: center;
  border-radius: 6px;
}
.patBigNav-bt:hover,
.patBigNav-bt.patNavMenu-list--active:hover {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgb(93, 208, 252)),
    to(rgb(93, 181, 254))
  );
  background: linear-gradient(180deg, rgb(93, 208, 252), rgb(93, 181, 254));
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.patBigNav-bt:hover .patBigNav-bt--icon,
.patBigNav-bt.patNavMenu-list--active:hover .patBigNav-bt--icon {
  mix-blend-mode: color-dodge;
}
.patBigNav-bt .patBigNav-bt--icon,
.patBigNav-bt.patNavMenu-list--active .patBigNav-bt--icon {
  width: 30px;
  height: 30px;
}

.patBigNav-bt.patNavMenu-list--active {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgb(93, 208, 252)),
    to(rgb(93, 181, 254))
  );
  background: linear-gradient(180deg, rgb(93, 208, 252), rgb(93, 181, 254));
}
.patBigNav-bt.patNavMenu-list--active .patBigNav-bt--icon {
  mix-blend-mode: color-dodge;
}

.patBigNav-logout {
  width: 70px;
  height: 70px;
  padding: 20px;
  display: block;
  margin: 0 0 10px 15px;
}
.patBigNav-logout:hover {
  mix-blend-mode: exclusion;
}
.patBigNav-logout .patBigNav-logout--icon {
  width: 30px;
  height: 30px;
}

.patBig-webName {
  display: none;
}
@media all and (min-width: 78em) {
  .patBig-webName {
    width: 510px;
    display: block;
    position: absolute;
    background: #fff;
    left: 100px;
    top: 0;
    height: 80px;
    line-height: 82px;
    color: #131621;
    letter-spacing: 1px;
    padding: 0 50px;
    font-family: "NotoSansTC-Medium";
    font-size: 1.125rem;
  }
}

.patLogoutCountArea {
  width: 100%;
  height: 70px;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 3;
}
@media all and (min-width: 78em) {
  .patLogoutCountArea {
    position: absolute;
    top: 0;
    right: 0;
    left: 610px;
    width: calc(100% - 610px);
    height: 80px;
  }
}

.patLogoutCountArea-logoutBt {
  width: 60px;
  height: 70px;
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(rgb(93, 208, 252)),
    to(rgb(93, 181, 254))
  );
  background: linear-gradient(0deg, rgb(93, 208, 252), rgb(93, 181, 254));
  text-align: center;
  cursor: pointer;
  display: block;
  float: left;
  padding: 20px 0 0 0;
}
@media all and (min-width: 78em) {
  .patLogoutCountArea-logoutBt {
    width: 86px;
    height: 80px;
    padding: 24px 0 0 0;
  }
}
.patLogoutCountArea-logoutBt .icon {
  width: 30px;
  height: 30px;
}
.patLogoutCountArea-logoutBt:hover {
  opacity: 0.6;
}

.patLogoutCountArea-countArea {
  float: left;
  width: calc(100% - 60px);
  background: linear-gradient(135deg, rgb(100, 130, 198), rgb(59, 107, 186));
  height: 70px;
  padding: 15px 20px 0px 20px;
  line-height: 1;
}
@media all and (min-width: 78em) {
  .patLogoutCountArea-countArea {
    width: calc(100% - 86px);
    height: 80px;
    padding: 0 40px;
  }
}

.patLogoutCountArea-countArea--last,
.patLogoutCountArea-countArea--count {
  font-size: 0.88em;
  color: #fff;
  line-height: 1.8;
  letter-spacing: 0.5px;
}
.patLogoutCountArea-countArea--last .icon,
.patLogoutCountArea-countArea--count .icon {
  padding: 0 10px 0 0;
  vertical-align: -4px;
}
@media all and (min-width: 78em) {
  .patLogoutCountArea-countArea--last,
  .patLogoutCountArea-countArea--count {
    font-size: 1rem;
    display: inline-block;
    padding: 0 20px 0 0;
    line-height: 80px;
    letter-spacing: 1px;
  }
  .patLogoutCountArea-countArea--last .icon,
  .patLogoutCountArea-countArea--count .icon {
    padding: 0 15px 0 0;
    vertical-align: -3px;
  }
}

.patLogoutCountArea-countArea--last {
  color: #b6c5da;
}

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

.patWrapper {
  padding: 62px 0 0 0;
}
@media all and (min-width: 78em) {
  .patWrapper {
    padding: 80px 0 0 100px;
  }
}

.patMainbody {
  width: 100%;
}
@media all and (min-width: 64em) {
  .patMainbody {
    width: auto;
    margin-left: 320px !important;
  }
}
@media all and (min-width: 78em) {
  .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;
  }
}

.patPageOperationArea {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
}
@media all and (min-width: 78em) {
  .patPageOperationArea {
    padding-top: 40px;
    padding-bottom: 40px;
    padding-right: 40px;
  }
}

.patHeader {
  background: #fff;
  padding: 0 30px;
  position: relative;
  overflow: hidden;
}
@media all and (min-width: 64em) {
  .patHeader {
    padding: 0 50px;
  }
}

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

.patHeader-backBt {
  display: block;
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
  color: #a4b7d1;
  display: inline-block;
}
.patHeader-backBt .patHeader-backBt--icon {
  vertical-align: -3px;
}
.patHeader-backBt:hover {
  color: #788ba3;
}

.patHeaderInfoBk {
  width: 100%;
  padding: 10px 0 10px 0;
  overflow: hidden;
}
@media all and (min-width: 48em) {
  .patHeaderInfoBk {
    padding: 20px 0 20px 0;
  }
}
@media all and (min-width: 78em) {
  .patHeaderInfoBk {
    padding: 50px 0 30px 0;
  }
}

.patHeaderMain {
  width: 100%;
  overflow: hidden;
}
@media all and (min-width: 118em) {
  .patHeaderMain {
    width: auto;
    float: left;
  }
}

.patHeaderMain-sectionArea {
  float: left;
  width: auto;
  margin-bottom: 10px;
  margin-right: 30px;
}
@media all and (min-width: 78em) {
  .patHeaderMain-sectionArea {
    margin-right: 60px;
    margin-top: 10px;
  }
}

.patHeaderMain--pageTit {
  font-size: 1.38rem;
  font-family: "NotoSansTC-Medium";
}

.patHeaderMain-sectionArea--tit {
  color: #131621;
  font-size: 0.75rem;
}
@media all and (min-width: 78em) {
  .patHeaderMain-sectionArea--tit {
    font-size: 1rem;
  }
}

.patHeaderMain-sectionArea--number {
  color: #5dd0fc;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 1.5rem;
  font-family: "Montserrat-Medium", "NotoSansTC-Medium";
}
@media all and (min-width: 78em) {
  .patHeaderMain-sectionArea--number {
    font-size: 2.13rem;
  }
}
.patHeaderMain-sectionArea-danger--number {
  color: #ff4238;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 1.5rem;
  font-family: "Montserrat-Medium", "NotoSansTC-Medium";
}
@media all and (min-width: 78em) {
  .patHeaderMain-sectionArea-danger--number {
    font-size: 2.13rem;
  }
}

.patHeaderBtArea {
  width: 100%;
}
@media all and (min-width: 118em) {
  .patHeaderBtArea {
    width: auto;
    float: left;
    margin-top: 15px;
  }
}

.patHeaderBtArea-Section {
  width: auto;
  float: left;
  padding-top: 10px;
}

@media all and (min-width: 48em) {
  .patHeaderBtArea-Section:first-of-type {
    border-right: 2px solid #e4e6f5;
    padding-right: 30px;
    padding-left: 0px;
  }
}

@media all and (min-width: 48em) {
  .patHeaderBtArea-Section:last-of-type {
    padding-left: 40px;
    padding-right: 0px;
    border-right: none;
  }
}

@media all and (min-width: 48em) {
  .patHeaderBtArea-Section:only-of-type {
    padding-left: 0px;
    padding-right: 0px;
    border-right: none;
  }
}

.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: #3b6bba;
  color: #fff;
  height: 44px;
  border-radius: 6px;
  line-height: 44px;
  padding: 0 20px;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Regular", 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: #3b6bba;
}
.patHeader-search--bt:hover {
  -webkit-transform: translateX(8px);
  transform: translateX(8px);
}

.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: 78em) {
  .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: #3b6bba;
  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: #e1e5f4;
  padding: 12px 0px 0px 0px;
  border-top: #e4e6f5;
  border-bottom: #a4b7d1;
}
@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: #131621;
  line-height: 1.2;
  font-size: 0.75rem;
  height: 30px;
  text-align: center;
}
@media all and (min-width: 78em) {
  .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: #3b6bba;
  text-align: center;
}
@media all and (min-width: 78em) {
  .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 {
    overflow: visible;
    overflow-x: visible;
  }
}

.patTabArea--fixed {
  position: fixed;
  top: 0;
  background: #fff;
  -webkit-box-shadow: 0px 5px 30px 0px rgba(29, 38, 60, 0.08);
  box-shadow: 0px 5px 30px 0px rgba(29, 38, 60, 0.08);
  padding-top: 10px;
  padding-left: 40px;
  z-index: 4;
  margin-left: -50px;
}

/*內頁資料板型*/
.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: 78em) {
  .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: 78em) {
  .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%;
  }
}

/*首頁行事曆區*/
.indexCal {
  width: 100%;
  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);
}
@media all and (min-width: 48em) {
  .indexCal {
    width: 360px;
    -webkit-box-shadow: 10px 0px 10px rgba(34, 34, 34, 0.08);
    box-shadow: 10px 0px 10px rgba(34, 34, 34, 0.08);
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
}
.indexCal .indexCal-day {
  margin-left: 20px;
  font-family: "Montserrat-Medium", sans-serif, "NotoSansTC-Regular", sans-serif,
    "Microsoft JhengHei";
  font-size: 1rem;
  font-weight: 400;
  color: #131621;
  line-height: 1.8;
  letter-spacing: 0.5px;
  color: #3b6bba;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.indexCal .indexCal-listBk {
  height: 200px;
  overflow: auto;
}
@media all and (min-width: 48em) {
  .indexCal .indexCal-listBk {
    height: 600px;
  }
}

/*首頁banner*/
.indexBanner {
  width: 100%;
}
.indexBanner .owl-carousel {
  z-index: 2;
}
.indexBanner .owl-carousel .owl-nav {
  display: block;
  position: absolute;
  right: 0px;
  top: -55px;
}
@media all and (min-width: 64em) {
  .indexBanner .owl-carousel .owl-nav {
    right: 15px;
  }
}
.indexBanner .owl-carousel .owl-nav .owl-prev {
  width: 30px;
  height: 30px;
  background: #3b6bba;
  border-radius: 4px;
  margin-right: 10px;
}
.indexBanner .owl-carousel .owl-nav .owl-next {
  width: 30px;
  height: 30px;
  background: #3b6bba;
  border-radius: 4px;
}
.indexBanner .owl-carousel .owl-nav span {
  color: #fff;
}

/*首頁進行中案件卡片*/
.indexAct {
  display: block;
}
.indexAct:hover {
  text-decoration: none;
}
@media all and (min-width: 64em) {
  .indexAct {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.indexAct-dateTime {
  float: right;
}

/*首頁新聞區*/
.indexNews {
  width: 100%;
  overflow: hidden;
  margin-bottom: 60px;
}

/*首頁more按鈕*/
.indexMoreBt {
  float: right;
  display: inline-block;
  color: #3b6bba;
  text-decoration: underline;
}
.indexMoreBt:hover {
  color: rgb(0, 102, 255);
  text-decoration: underline;
}

/*行事曆樣式*/
.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: #3b6bba;
  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 #a4b7d1;
  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: rgb(0, 102, 255);
  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: rgb(204, 232, 255);
}
.calEventList--project .calEventList-infoBk--startTime {
  color: rgb(0, 102, 255);
}
.calEventList--project .calEventList-infoBk--listContent {
  color: #788ba3;
}

.calEventList--meeting .calEventList-infoBk {
  background: #3b6bba;
}
.calEventList--meeting .calEventList-infoBk--startTime {
  color: rgb(255, 158, 129) !important;
}
.calEventList--meeting .calEventList-infoBk--endTime {
  color: rgb(255, 158, 129) !important;
  opacity: 0.6;
}
.calEventList--meeting .calEventList-infoBk--listTit {
  color: #fff;
}
.calEventList--meeting .calEventList-infoBk--listContent {
  color: #fff;
  opacity: 0.6;
}

/*模組區*/
.modNews,
.modNews--court {
  border-bottom: 1px solid #a4b7d1;
  overflow: hidden;
}
@media all and (min-width: 78em) {
  .modNews,
  .modNews--court {
    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;
  }
}
.modNews:last-of-type,
.modNews--court:last-of-type {
  border-bottom: none;
}

@media all and (min-width: 78em) {
  .modNews-date {
    width: 15%;
    float: left;
  }
}
@media all and (min-width: 118em) {
  .modNews-date {
    width: 10%;
  }
}

.modList-tit {
  width: 100%;
  float: left;
  display: block;
  font-size: 1.0625rem;
  font-weight: 400;
  color: #3b6bba;
}
@media all and (min-width: 78em) {
  .modList-tit {
    width: 85%;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: -7px;
  }
}
@media all and (min-width: 118em) {
  .modList-tit {
    width: 90%;
  }
}
.modList-tit:hover {
  text-decoration: underline;
}

.modNews--court .modNews-date {
  width: auto;
  float: left;
}
@media all and (min-width: 78em) {
  .modNews--court .modNews-date {
    width: 15%;
  }
}
@media all and (min-width: 118em) {
  .modNews--court .modNews-date {
    width: 10%;
  }
}
.modNews--court .modNews-classify {
  width: auto;
  float: left;
  margin-left: 20px;
  background: #e1e5f4;
  border-radius: 4px;
  padding: 3px 15px;
  text-align: center;
  color: #3b6bba;
}
@media all and (min-width: 78em) {
  .modNews--court .modNews-classify {
    width: 15%;
    margin-right: 20px;
  }
}
@media all and (min-width: 118em) {
  .modNews--court .modNews-classify {
    width: 10%;
    margin-right: 40px;
  }
}

/*檔案按鈕連結*/
.modelLinkBt {
  width: 100%;
  padding: 20px;
  -webkit-box-shadow: 0px 0px 30px rgba(29, 38, 60, 0.08);
  box-shadow: 0px 0px 30px rgba(29, 38, 60, 0.08);
  border-radius: 6px;
  background: #fff;
  display: block;
  cursor: pointer;
}
.modelLinkBt:hover {
  text-decoration: none;
}
@media all and (min-width: 78em) {
  .modelLinkBt {
    padding: 25px;
  }
}
.modelLinkBt:hover {
  -webkit-box-shadow: 0px 10px 10px rgba(34, 34, 34, 0.12);
  box-shadow: 0px 10px 10px rgba(34, 34, 34, 0.12);
}
.modelLinkBt .modelLinkBt-fileImg {
  border-radius: 4px;
  width: 56px;
  height: 56px;
  background: rgb(204, 232, 255);
  line-height: 56px;
  padding: 12px 0 0 12px;
  float: left;
}
.modelLinkBt .modelLinkBt-tit {
  margin-left: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modelLinkBt .modelLinkBt-checkbox {
  border-radius: 4px;
  width: 30px;
  height: 30px;
  float: left;
  margin: 8px 0 0 15px;
}

/*搜尋模組區*/
.modSearchArea {
  padding-top: 22px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
}
@media all and (min-width: 78em) {
  .modSearchArea {
    padding-left: 50px;
    padding-right: 50px;
  }
}

.modSearchArea-fieldBk {
  width: 100%;
  margin-bottom: 10px;
}
@media all and (min-width: 48em) {
  .modSearchArea-fieldBk {
    width: 45%;
    margin-right: 12px;
    float: left;
  }
}
@media all and (min-width: 78em) {
  .modSearchArea-fieldBk {
    width: 240px;
  }
}

.modSearchArea-bt {
  width: 100%;
  padding: 0 20px;
  margin-bottom: 10px;
}
@media all and (min-width: 48em) {
  .modSearchArea-bt {
    width: 45%;
    margin-right: 12px;
    float: left;
  }
}
@media all and (min-width: 78em) {
  .modSearchArea-bt {
    width: 165px;
  }
}
.modSearchArea-bt .btn-base--icon {
  margin-top: 15px;
  float: right;
}

@media all and (min-width: 64em) {
  .modSearchArea-operationBk {
    margin-top: 0px;
  }
}
@media all and (min-width: 78em) {
  .modSearchArea-operationBk {
    float: left;
  }
}

.modSearchArea-operationBt--import {
  width: 130px;
  float: left;
  position: relative;
  margin-bottom: 10px;
}
.modSearchArea-operationBt--import .icon {
  position: absolute;
  top: 15px;
  right: 20px;
}

.modSearchArea-operationBt--export {
  min-width: 130px;
  margin-right: 12px;
  margin-bottom: 10px;
  position: relative;
  float: left;
  margin-bottom: 10px;
}
.modSearchArea-operationBt--export .icon {
  cursor: pointer;
  width: 15px;
  height: 15px;
  line-height: 1.21428571em;
  position: absolute;
  top: 15px;
  right: 20px;
}
.modSearchArea-operationBt--export .ui.selection.dropdown {
  padding-left: 15px !important;
  padding-right: 15px !important;
}
.modSearchArea-operationBt--export .ui.dropdown > .dropdown.icon:before {
  content: " ";
}
.modSearchArea-operationBt--export .ui.dropdown:not(.button) > .default.text,
.modSearchArea-operationBt--export .ui.default.dropdown:not(.button) > .text {
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-Medium, sans-serif;
  font-size: 1.0625rem;
}

.modSearchArea-operationBt--export--carOilCost {
  width: 200px;
}

.modInfoBk {
  padding-top: 40px;
  padding-bottom: 30px;
}
@media all and (min-width: 78em) {
  .modInfoBk {
    padding-left: 20px;
    padding-right: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
}

.modInfoBk--gutter {
  padding-left: 30px;
  padding-right: 30px;
}

.modInfoBk--flexEnd {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.modInfoBk--line {
  width: 100%;
  border-radius: 6px;
  background: #f5f5fa;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.modInfoBk--line:nth-of-type(2n) {
  background: none;
}
@media all and (min-width: 78em) {
  .modInfoBk--line {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}

.modInfoBk--line--gutter {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 8px;
  padding-bottom: 7px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.modInfoBk-EminfoBk {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: stretch;
  -ms-flex-pack: stretch;
  justify-content: stretch;
}

.modInfoBk-EminfoBk--info {
  border-left: 2px solid #f5f5fa;
  border-right: 2px solid #f5f5fa;
  padding-right: 40px;
  padding-left: 40px;
  margin-bottom: 12px;
}
@media all and (min-width: 78em) {
  .modInfoBk-EminfoBk--info {
    border-left: none;
  }
}

.modInfoBk-EminfoBk--info:last-of-type {
  border-right: none;
}

.modInfoBk--grid100 {
  width: 100%;
}
@media all and (min-width: 78em) {
  .modInfoBk--grid100 {
    width: 100%;
  }
}

.modInfoBk--grid20 {
  width: 100%;
}
@media all and (min-width: 78em) {
  .modInfoBk--grid20 {
    width: 20%;
  }
}

.modInfoBk--grid25 {
  width: 100%;
}
@media all and (min-width: 78em) {
  .modInfoBk--grid25 {
    width: 25%;
  }
}

.modInfoBk--grid33 {
  width: 100%;
}
@media all and (min-width: 78em) {
  .modInfoBk--grid33 {
    width: 33%;
  }
}

.modInfoBk--grid50 {
  width: 100%;
}
@media all and (min-width: 78em) {
  .modInfoBk--grid50 {
    width: 50%;
  }
}

.modInfoBk--grid66 {
  width: 100%;
}
@media all and (min-width: 78em) {
  .modInfoBk--grid66 {
    width: 66%;
  }
}

.modInfoBk--grid75 {
  width: 100%;
}
@media all and (min-width: 78em) {
  .modInfoBk--grid75 {
    width: 75%;
  }
}

.modInfoBk--grid80 {
  width: 100%;
}
@media all and (min-width: 78em) {
  .modInfoBk--grid80 {
    width: 80%;
  }
}

.modInfoBk-infoList--tit {
  min-width: 85px;
}

/*各頁面*/
/*login&forget.html*/
.paloginPosition {
  background: #f5f5fa;
}
@media all and (min-width: 64em) {
  .paloginPosition {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media all and (min-width: 64em) {
  .paLoginArea {
    width: 30%;
    height: 100vh;
    overflow-y: scroll;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media all and (min-width: 78em) {
  .paLoginArea {
    width: 35%;
  }
}

.paLogin {
  width: 100%;
  margin: 0 auto;
}
@media all and (min-width: 48em) {
  .paLogin {
    margin: 0 auto;
  }
}
@media all and (min-width: 78em) {
  .paLogin {
    padding: 0 40px;
  }
}
@media all and (min-width: 118em) {
  .paLogin {
    padding: 0 60px;
  }
}

.paLogin-fillArea {
  padding: 20px;
}
@media all and (min-width: 64em) {
  .paLogin-fillArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-items: center;
  }
}

.paLogin-logo {
  width: 100%;
  z-index: 5;
  display: block;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgb(100, 130, 198)),
    to(rgb(59, 107, 186))
  );
  background: linear-gradient(180deg, rgb(100, 130, 198), rgb(59, 107, 186));
  color: #fff;
  padding: 20px 30px;
  line-height: 1.5;
  letter-spacing: 0.5px;
}
.paLogin-logo:hover {
  opacity: 0.8;
  color: #fff;
}
@media all and (min-width: 48em) {
  .paLogin-logo {
    width: 480px;
    padding: 25px 40px;
    position: absolute;
    left: 0;
    font-size: 1.125rem;
  }
}

.paLogin-pagetit {
  color: #3b6bba;
  font-size: 1.5rem;
  margin: 40px 0 40px 0 !important;
}
@media all and (min-width: 48em) {
  .paLogin-pagetit {
    margin: 40px 0 20px 0 !important;
  }
}
@media all and (min-width: 64em) {
  .paLogin-pagetit {
    margin: 90px 0 20px 0 !important;
  }
}

.paLogin-labeltit {
  color: #fff;
}

.paLogin-reCAPTCHA {
  width: 100%;
  margin: 0px auto 15px auto;
  overflow: hidden;
}
.paLogin-reCAPTCHA img {
  width: 180px;
  height: auto;
}

.paLogin-submitBt {
  text-align: center;
  letter-spacing: 1px;
  padding: 0 20px;
  line-height: 44px;
  border-radius: 6px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgb(100, 130, 198)),
    to(rgb(59, 107, 186))
  );
  background: linear-gradient(180deg, rgb(100, 130, 198), rgb(59, 107, 186));
  display: block;
  color: #fff;
}
.paLogin-submitBt:hover {
  opacity: 0.8;
  color: #fff;
}

.paLogin-forgetBt {
  font-weight: 500;
  text-align: center;
  display: block;
  color: #788ba3;
  margin-top: 30px;
  text-decoration: underline;
}
.paLogin-forgetBt:hover {
  color: #a4b7d1;
  text-decoration: underline;
}

.paLogin-downloadBt {
  font-weight: 500;
  text-align: center;
  display: block;
  color: #3b6bba;
  margin-top: 15px;
  border: 1px solid #a4b7d1;
  line-height: 44px;
  border-radius: 6px;
}

.paLogin-downloadBt:hover {
  background: #fff;
  text-decoration: none;
}

.paLogin-backArrowBt {
  width: 30px;
  height: 30px;
  margin: 0 20px 0 0;
  vertical-align: -5px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.paLogin-backArrowBt:hover {
  -webkit-transform: translateX(-10px);
  transform: translateX(-10px);
}

@media all and (min-width: 64em) {
  .paBannerArea {
    display: block;
    width: 70%;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-size: cover;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    overflow: hidden;
  }
}
@media all and (min-width: 78em) {
  .paBannerArea {
    width: 65%;
  }
}
.paBannerArea-copyright {
  width: 100%;
  text-align: center;
  color: #fff;
  padding: 0 0 100px 0;
}

/*actli.html*/
@media all and (min-width: 64em) {
  .pageActli-tit:nth-child(1),
  .pageActli-list:nth-child(1) {
    width: 22%;
  }
  .pageActli-tit:nth-child(2),
  .pageActli-list:nth-child(2) {
    width: 20%;
  }
  .pageActli-tit:nth-child(3),
  .pageActli-list:nth-child(3) {
    width: 12%;
  }
  .pageActli-tit:nth-child(4),
  .pageActli-list:nth-child(4) {
    width: 18%;
  }
  .pageActli-tit:nth-child(5),
  .pageActli-list:nth-child(5) {
    width: 12%;
  }
  .pageActli-tit:nth-child(6),
  .pageActli-list:nth-child(6) {
    width: 16%;
  }
}

/*usersli.html*/
@media all and (min-width: 78em) {
  .pageUsersliBk {
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 40px;
  }
}

.pageUsersliList {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #a4b7d1;
}
@media all and (min-width: 78em) {
  .pageUsersliList {
    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;
  }
}
.pageUsersliList:last-of-type {
  border-bottom: none;
}

.pageUsersliList-content,
.pageUsersliList-titArea--tit {
  font-weight: 500;
}
@media all and (min-width: 78em) {
  .pageUsersliList-content:nth-child(1),
  .pageUsersliList-titArea--tit:nth-child(1) {
    width: 12%;
  }
  .pageUsersliList-content:nth-child(2),
  .pageUsersliList-titArea--tit:nth-child(2) {
    width: 15%;
  }
  .pageUsersliList-content:nth-child(3),
  .pageUsersliList-titArea--tit:nth-child(3) {
    width: 15%;
  }
  .pageUsersliList-content:nth-child(4),
  .pageUsersliList-titArea--tit:nth-child(4) {
    width: 13%;
  }
  .pageUsersliList-content:nth-child(5),
  .pageUsersliList-titArea--tit:nth-child(5) {
    width: 13%;
  }
  .pageUsersliList-content:nth-child(6),
  .pageUsersliList-titArea--tit:nth-child(6) {
    width: 12%;
  }
  .pageUsersliList-content:nth-child(7),
  .pageUsersliList-titArea--tit:nth-child(7) {
    width: 20%;
  }
}

/*案件列表*/
/*projectli.html*/
@media all and (min-width: 64em) {
  .pageproliList-content:nth-child(1),
  .pageproliList--titArea--tit:nth-child(1) {
    width: 15%;
  }
  .pageproliList-content:nth-child(2),
  .pageproliList--titArea--tit:nth-child(2) {
    width: 20%;
  }
  .pageproliList-content:nth-child(3),
  .pageproliList--titArea--tit:nth-child(3) {
    width: 15%;
  }
  .pageproliList-content:nth-child(4),
  .pageproliList--titArea--tit:nth-child(4) {
    width: 15%;
  }
  .pageproliList-content:nth-child(5),
  .pageproliList--titArea--tit:nth-child(5) {
    width: 10%;
  }
  .pageproliList-content:nth-child(6),
  .pageproliList--titArea--tit:nth-child(6) {
    width: 15%;
  }
  .pageproliList-content:nth-child(7),
  .pageproliList--titArea--tit:nth-child(7) {
    width: 10%;
  }
}
@media all and (min-width: 118em) {
  .pageproliList-content:nth-child(1),
  .pageproliList--titArea--tit:nth-child(1) {
    width: 10%;
  }
  .pageproliList-content:nth-child(2),
  .pageproliList--titArea--tit:nth-child(2) {
    width: 15%;
  }
  .pageproliList-content:nth-child(3),
  .pageproliList--titArea--tit:nth-child(3) {
    width: 20%;
  }
  .pageproliList-content:nth-child(4),
  .pageproliList--titArea--tit:nth-child(4) {
    width: 15%;
  }
  .pageproliList-content:nth-child(5),
  .pageproliList--titArea--tit:nth-child(5) {
    width: 10%;
  }
  .pageproliList-content:nth-child(6),
  .pageproliList--titArea--tit:nth-child(6) {
    width: 15%;
  }
  .pageproliList-content:nth-child(7),
  .pageproliList--titArea--tit:nth-child(7) {
    width: 15%;
  }
}

/*案件內頁*/
/*projectin.html*/
@media all and (min-width: 64em) {
  .pageproin-headerInfoBk {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
  }
}

@media all and (min-width: 64em) {
  .pageproin-headerInfoBk--mainArea {
    width: 40%;
    padding-left: 20px;
  }
}
@media all and (min-width: 78em) {
  .pageproin-headerInfoBk--mainArea {
    width: 33%;
  }
}
@media all and (min-width: 118em) {
  .pageproin-headerInfoBk--mainArea {
    width: 25%;
  }
}

.pageproin-headerLabel {
  margin-bottom: 20px;
}
@media all and (min-width: 48em) {
  .pageproin-headerLabel {
    margin-bottom: 0px;
    float: left;
  }
}

@media all and (min-width: 48em) {
  .pageproin-headerInfoTit {
    margin-left: 100px;
  }
}

.pageproin-moreBt {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgb(255, 123, 90);
  display: inline-block;
  position: relative;
  top: -25px;
  text-align: center;
}
.pageproin-moreBt:hover {
  background: #fff;
  border: #3b6bba;
}
.pageproin-moreBt:hover .pageproin-moreBt--dot {
  background: #3b6bba;
}
.pageproin-moreBt .pageproin-moreBt--dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(255, 123, 90);
  text-align: center;
  display: inline-block;
  vertical-align: -8px;
  margin: 0 2px;
}

.pageproin-headerBtArea {
  margin-top: 20px;
}
@media all and (min-width: 64em) {
  .pageproin-headerBtArea {
    margin-top: 30px;
  }
}

.pageproin-projectInfoGrid {
  width: 100%;
}

.pageproin-projectInfoGrid--section25 {
  width: 100%;
}
@media all and (min-width: 48em) {
  .pageproin-projectInfoGrid--section25 {
    width: 50%;
    float: left;
  }
}
@media all and (min-width: 78em) {
  .pageproin-projectInfoGrid--section25 {
    width: 33%;
  }
}
@media all and (min-width: 118em) {
  .pageproin-projectInfoGrid--section25 {
    width: 25%;
  }
}

.pageproin-closeInfoBT {
  display: inline-block;
  width: auto;
  height: 44px;
  padding: 0 15px;
  line-height: 45px;
  border-radius: 6px;
  background: #3b6bba;
  color: rgb(255, 123, 90);
  font-family: "Montserrat-Medium", sans-serif, NotoSansTC-Medium, sans-serif;
  font-size: 1.0625rem;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  width: 100%;
  display: block;
  text-align: center;
  color: rgb(255, 123, 90);
  overflow: hidden;
  border: 1px solid rgb(255, 123, 90);
}
.pageproin-closeInfoBT:hover {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.pageproin-closeInfoBT:active {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.pageproin-closeInfoBT:focus {
  -webkit-box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  box-shadow: 0px 0px 0px 4px rgba(93, 208, 252, 0.4);
  text-decoration: none;
}
.pageproin-closeInfoBT .btn-base--icon {
  margin-left: 10px;
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}
.pageproin-closeInfoBT:hover {
  -webkit-transform: none;
  transform: none;
}
@media all and (min-width: 64em) {
  .pageproin-closeInfoBT {
    display: none;
  }
}

.pageproin-headerInfoBk--basicInfoArea {
  margin-top: 40px;
  overflow: hidden;
}
@media all and (min-width: 64em) {
  .pageproin-headerInfoBk--basicInfoArea {
    display: block !important;
    width: 60%;
    margin-top: 0px;
    padding-left: 70px;
  }
}
@media all and (min-width: 78em) {
  .pageproin-headerInfoBk--basicInfoArea {
    width: 66%;
  }
}
@media all and (min-width: 118em) {
  .pageproin-headerInfoBk--basicInfoArea {
    width: 75%;
    padding-left: 160px;
    padding-right: 100px;
  }
}

.pageproin-member {
  width: 100%;
}
@media all and (min-width: 48em) {
  .pageproin-member {
    width: 60%;
  }
}

.pageproin-memberMission {
  width: 100%;
  text-align: right;
}
@media all and (min-width: 48em) {
  .pageproin-memberMission {
    width: 40%;
  }
}

.pageproin-note {
  color: #788ba3;
  border-bottom: 1px solid #a4b7d1;
  margin: 0;
}

/*當事人一覽列表*/
@media all and (min-width: 64em) {
  .pageproinliList-content:nth-child(1),
  .pageproinliList--titArea--tit:nth-child(1) {
    width: 70%;
  }
  .pageproinliList-content:nth-child(2),
  .pageproinliList--titArea--tit:nth-child(2) {
    width: 30%;
  }
}

/*事件列表*/
.pageProinEventList {
  padding-right: 30px;
  margin-left: 30px;
  padding-bottom: 30px;
  border-left: 2px solid #a4b7d1;
  position: relative;
  display: block;
}
@media all and (min-width: 118em) {
  .pageProinEventList {
    padding-right: 40px;
    margin-left: 40px;
  }
}
.pageProinEventList:last-of-type {
  padding-bottom: 0px;
}
.pageProinEventList:hover .pageProinEventList-tit {
  color: rgb(0, 102, 255);
}
.pageProinEventList .pageProinEventList-clock {
  position: absolute;
  left: -8px;
  top: 2px;
}
.pageProinEventList .pageProinEventList-date {
  padding-left: 20px;
}
@media all and (min-width: 64em) {
  .pageProinEventList .pageProinEventList-date {
    padding-left: 30px;
  }
}
@media all and (min-width: 118em) {
  .pageProinEventList .pageProinEventList-date {
    width: 20%;
    float: left;
  }
}
.pageProinEventList .pageProinEventList-tit {
  padding-left: 20px;
}
@media all and (min-width: 64em) {
  .pageProinEventList .pageProinEventList-tit {
    padding-left: 30px;
  }
}
@media all and (min-width: 118em) {
  .pageProinEventList .pageProinEventList-tit {
    width: 80%;
    float: left;
    padding-left: 30px;
    margin-top: -6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.pageProinEventList .pageProinEventList-content {
  padding-left: 20px;
  color: #788ba3;
}
@media all and (min-width: 64em) {
  .pageProinEventList .pageProinEventList-content {
    padding-left: 30px;
  }
}
@media all and (min-width: 118em) {
  .pageProinEventList .pageProinEventList-content {
    width: 80%;
    float: right;
  }
}

.projectCover-patWrapper {
  margin: 0 0 0 0;
}
@media all and (min-width: 78em) {
  .projectCover-patWrapper {
    margin: 0 0 0 0;
  }
}

/*顧問案件列表*/
/*consultantli.html*/
@media all and (min-width: 64em) {
  .pageconliList-content:nth-child(1),
  .pageconliList--titArea--tit:nth-child(1) {
    width: 15%;
  }
  .pageconliList-content:nth-child(2),
  .pageconliList--titArea--tit:nth-child(2) {
    width: 20%;
  }
  .pageconliList-content:nth-child(3),
  .pageconliList--titArea--tit:nth-child(3) {
    width: 25%;
  }
  .pageconliList-content:nth-child(4),
  .pageconliList--titArea--tit:nth-child(4) {
    width: 10%;
  }
  .pageconliList-content:nth-child(5),
  .pageconliList--titArea--tit:nth-child(5) {
    width: 10%;
  }
  .pageconliList-content:nth-child(6),
  .pageconliList--titArea--tit:nth-child(6) {
    width: 10%;
  }
  .pageconliList-content:nth-child(7),
  .pageconliList--titArea--tit:nth-child(7) {
    width: 10%;
  }
}
@media all and (min-width: 118em) {
  .pageconliList-content:nth-child(1),
  .pageconliList--titArea--tit:nth-child(1) {
    width: 15%;
  }
  .pageconliList-content:nth-child(2),
  .pageconliList--titArea--tit:nth-child(2) {
    width: 20%;
  }
  .pageconliList-content:nth-child(3),
  .pageconliList--titArea--tit:nth-child(3) {
    width: 20%;
  }
  .pageconliList-content:nth-child(4),
  .pageconliList--titArea--tit:nth-child(4) {
    width: 10%;
  }
  .pageconliList-content:nth-child(5),
  .pageconliList--titArea--tit:nth-child(5) {
    width: 10%;
  }
  .pageconliList-content:nth-child(6),
  .pageconliList--titArea--tit:nth-child(6) {
    width: 10%;
  }
  .pageconliList-content:nth-child(7),
  .pageconliList--titArea--tit:nth-child(7) {
    width: 15%;
  }
}

/*顧問案件內頁*/
/*consultantin.html*/
@media all and (min-width: 48em) {
  .pageconin-headerInfoTit {
    margin-left: 130px;
  }
}

.pageconin-headerBtArea {
  margin-top: 30px;
}

/*公告列表*/
/*newsli.html*/
@media all and (min-width: 64em) {
  .pagenewsliList-content:nth-child(1),
  .pagenewsliList--titArea--tit:nth-child(1) {
    width: 46%;
  }
  .pagenewsliList-content:nth-child(2),
  .pagenewsliList--titArea--tit:nth-child(2) {
    width: 15%;
  }
  .pagenewsliList-content:nth-child(3),
  .pagenewsliList--titArea--tit:nth-child(3) {
    width: 12%;
  }
  .pagenewsliList-content:nth-child(4),
  .pagenewsliList--titArea--tit:nth-child(4) {
    width: 12%;
  }
  .pagenewsliList-content:nth-child(5),
  .pagenewsliList--titArea--tit:nth-child(5) {
    width: 15%;
  }
}

/*醫療資源列表*/
/*stationsli.html*/
@media all and (min-width: 64em) {
  .pagestationsList-content:nth-child(1),
  .pagestationsList--tit:nth-child(1) {
    width: 22%;
  }
  .pagestationsList-content:nth-child(2),
  .pagestationsList--tit:nth-child(2) {
    width: 20%;
  }
  .pagestationsList-content:nth-child(3),
  .pagestationsList--tit:nth-child(3) {
    width: 22%;
  }
  .pagestationsList-content:nth-child(4),
  .pagestationsList--tit:nth-child(4) {
    width: 12%;
  }
  .pagestationsList-content:nth-child(5),
  .pagestationsList--tit:nth-child(5) {
    width: 10%;
  }
  .pagestationsList-content:nth-child(6),
  .pagestationsList--tit:nth-child(6) {
    width: 14%;
  }
}

/*表單下載列表*/
/*downloadsli.html*/
@media all and (min-width: 64em) {
  .pagedownloadsList-content:nth-child(1),
  .pagedownloadsList--tit:nth-child(1) {
    width: 35%;
  }
  .pagedownloadsList-content:nth-child(2),
  .pagedownloadsList--tit:nth-child(2) {
    width: 15%;
  }
  .pagedownloadsList-content:nth-child(3),
  .pagedownloadsList--tit:nth-child(3) {
    width: 15%;
  }
  .pagedownloadsList-content:nth-child(4),
  .pagedownloadsList--tit:nth-child(4) {
    width: 10%;
  }
  .pagedownloadsList-content:nth-child(5),
  .pagedownloadsList--tit:nth-child(5) {
    width: 12%;
  }
  .pagedownloadsList-content:nth-child(6),
  .pagedownloadsList--tit:nth-child(6) {
    width: 14%;
  }
}

/*相關連結列表*/
/*links.html*/
@media all and (min-width: 64em) {
  .pagelinksList-content:nth-child(1),
  .pagelinksList--tit:nth-child(1) {
    width: 45%;
  }
  .pagelinksList-content:nth-child(2),
  .pagelinksList--tit:nth-child(2) {
    width: 15%;
  }
  .pagelinksList-content:nth-child(3),
  .pagelinksList--tit:nth-child(3) {
    width: 12%;
  }
  .pagelinksList-content:nth-child(4),
  .pagelinksList--tit:nth-child(4) {
    width: 13%;
  }
  .pagelinksList-content:nth-child(5),
  .pagelinksList--tit:nth-child(5) {
    width: 15%;
  }
}

/*救護紀錄列表*/
/*recordsli.html*/
@media all and (min-width: 64em) {
  .pagerecordsList-content:nth-child(1),
  .pagerecordsList--tit:nth-child(1) {
    width: 10%;
  }
  .pagerecordsList-content:nth-child(2),
  .pagerecordsList--tit:nth-child(2) {
    width: 15%;
  }
  .pagerecordsList-content:nth-child(3),
  .pagerecordsList--tit:nth-child(3) {
    width: 13%;
  }
  .pagerecordsList-content:nth-child(4),
  .pagerecordsList--tit:nth-child(4) {
    width: 15%;
  }
  .pagerecordsList-content:nth-child(5),
  .pagerecordsList--tit:nth-child(5) {
    width: 14%;
  }
  .pagerecordsList-content:nth-child(6),
  .pagerecordsList--tit:nth-child(6) {
    width: 10%;
  }
  .pagerecordsList-content:nth-child(7),
  .pagerecordsList--tit:nth-child(7) {
    width: 10%;
  }
  .pagerecordsList-content:nth-child(8),
  .pagerecordsList--tit:nth-child(8) {
    width: 13%;
  }
}

/*救護紀錄內頁*/
/*recordsin.html*/
.pagerecords-titArea {
  width: auto;
  padding: 40px 0 30px 0;
  overflow: hidden;
}
@media all and (min-width: 48em) {
  .pagerecords-titArea {
    padding: 40px 0 40px 0;
  }
}

/*活動列表*/
/*actsli.html*/
@media all and (min-width: 64em) {
  .pageactsliList-content:nth-child(1),
  .pageactsliList--tit:nth-child(1) {
    width: 35%;
  }
  .pageactsliList-content:nth-child(2),
  .pageactsliList--tit:nth-child(2) {
    width: 13%;
  }
  .pageactsliList-content:nth-child(3),
  .pageactsliList--tit:nth-child(3) {
    width: 13%;
  }
  .pageactsliList-content:nth-child(4),
  .pageactsliList--tit:nth-child(4) {
    width: 13%;
  }
  .pageactsliList-content:nth-child(5),
  .pageactsliList--tit:nth-child(5) {
    width: 12%;
  }
  .pageactsliList-content:nth-child(6),
  .pageactsliList--tit:nth-child(6) {
    width: 15%;
  }
}

/*活動內頁*/
/*actsin.html*/
.pageactins-titArea {
  width: auto;
  padding: 40px 0 30px 0;
  overflow: hidden;
}
@media all and (min-width: 48em) {
  .pageactins-titArea {
    padding: 40px 0 40px 0;
  }
}

/*帳號列表*/
/*usersli.html*/
@media all and (min-width: 64em) {
  .pageusersliList-content:nth-child(1),
  .pageusersliList--tit:nth-child(1) {
    width: 25%;
  }
  .pageusersliList-content:nth-child(2),
  .pageusersliList--tit:nth-child(2) {
    width: 12%;
  }
  .pageusersliList-content:nth-child(3),
  .pageusersliList--tit:nth-child(3) {
    width: 20%;
  }
  .pageusersliList-content:nth-child(4),
  .pageusersliList--tit:nth-child(4) {
    width: 16%;
  }
  .pageusersliList-content:nth-child(5),
  .pageusersliList--tit:nth-child(5) {
    width: 12%;
  }
  .pageusersliList-content:nth-child(6),
  .pageusersliList--tit:nth-child(6) {
    width: 15%;
  }
}

/*帳號編輯自己*/
/*users-edit-self.html*/
.pageuserseditself-titArea {
  width: auto;
  padding: 40px 0 30px 0;
  overflow: hidden;
}
@media all and (min-width: 48em) {
  .pageuserseditself-titArea {
    padding: 40px 0 40px 0;
  }
}

/*帳號內頁*/
/*usersin.html*/
.pageusersin-titArea {
  width: auto;
  padding: 40px 0 30px 0;
  overflow: hidden;
}
@media all and (min-width: 48em) {
  .pageusersin-titArea {
    padding: 40px 0 40px 0;
  }
}

/*操作紀錄列表*/
/*logs.html*/
@media all and (min-width: 78em) {
  .pageLogsBk {
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 40px;
  }
}

@media all and (min-width: 78em) {
  .pageLogsList-content:nth-child(1),
  .pageLogsList--tit:nth-child(1) {
    width: 10%;
  }
  .pageLogsList-content:nth-child(2),
  .pageLogsList--tit:nth-child(2) {
    width: 16%;
  }
  .pageLogsList-content:nth-child(3),
  .pageLogsList--tit:nth-child(3) {
    width: 13%;
  }
  .pageLogsList-content:nth-child(4),
  .pageLogsList--tit:nth-child(4) {
    width: 15%;
  }
  .pageLogsList-content:nth-child(5),
  .pageLogsList--tit:nth-child(5) {
    width: 10%;
  }
  .pageLogsList-content:nth-child(6),
  .pageLogsList--tit:nth-child(6) {
    width: 13%;
  }
  .pageLogsList-content:nth-child(7),
  .pageLogsList--tit:nth-child(7) {
    width: 22%;
  }
}

.pageLogs--logtext {
  overflow: visible;
  text-overflow: initial;
  white-space: normal;
  padding-bottom: 5px;
}

/*設定列表*/
/*setting.html*/
@media all and (min-width: 78em) {
  .pageSettingBk {
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 40px;
  }
}

@media all and (min-width: 78em) {
  .pageSettingliList-content:nth-child(1),
  .pageSettingliList--titArea--tit:nth-child(1) {
    width: 25%;
  }
  .pageSettingliList-content:nth-child(2),
  .pageSettingliList--titArea--tit:nth-child(2) {
    width: 30%;
  }
  .pageSettingliList-content:nth-child(3),
  .pageSettingliList--titArea--tit:nth-child(3) {
    width: 30%;
  }
  .pageSettingliList-content:nth-child(4),
  .pageSettingliList--titArea--tit:nth-child(4) {
    width: 15%;
  }
}

/*repairli.html*/
@media all and (min-width: 78em) {
  .pageRepairliBk {
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 40px;
  }
}

@media all and (min-width: 78em) {
  .pageRepairliList-content:nth-child(1),
  .pageRepairliList--titArea--tit:nth-child(1) {
    width: 11%;
  }
  .pageRepairliList-content:nth-child(2),
  .pageRepairliList--titArea--tit:nth-child(2) {
    width: 10%;
  }
  .pageRepairliList-content:nth-child(3),
  .pageRepairliList--titArea--tit:nth-child(3) {
    width: 19%;
    padding-right: 40px;
  }
  .pageRepairliList-content:nth-child(4),
  .pageRepairliList--titArea--tit:nth-child(4) {
    width: 15%;
    padding-right: 40px;
  }
  .pageRepairliList-content:nth-child(5),
  .pageRepairliList--titArea--tit:nth-child(5) {
    width: 15%;
    padding-right: 40px;
  }
  .pageRepairliList-content:nth-child(6),
  .pageRepairliList--titArea--tit:nth-child(6) {
    width: 10%;
  }
  .pageRepairliList-content:nth-child(7),
  .pageRepairliList--titArea--tit:nth-child(7) {
    width: 20%;
  }
}

/*carbookli.html*/
@media all and (min-width: 78em) {
  .pageCarliBk {
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 40px;
  }
}

@media all and (min-width: 78em) {
  .pageCarliList-content:nth-child(1),
  .pageCarliList--titArea--tit:nth-child(1) {
    width: 12%;
  }
  .pageCarliList-content:nth-child(2),
  .pageCarliList--titArea--tit:nth-child(2) {
    width: 11%;
  }
  .pageCarliList-content:nth-child(3),
  .pageCarliList--titArea--tit:nth-child(3) {
    width: 9%;
  }
  .pageCarliList-content:nth-child(4),
  .pageCarliList--titArea--tit:nth-child(4) {
    width: 10%;
  }
  .pageCarliList-content:nth-child(5),
  .pageCarliList--titArea--tit:nth-child(5) {
    width: 8%;
  }
  .pageCarliList-content:nth-child(6),
  .pageCarliList--titArea--tit:nth-child(6) {
    width: 10%;
  }
  .pageCarliList-content:nth-child(7),
  .pageCarliList--titArea--tit:nth-child(7) {
    width: 10%;
  }
  .pageCarliList-content:nth-child(8),
  .pageCarliList--titArea--tit:nth-child(8) {
    width: 30%;
  }
}

.pageCarliList--statusCancel--label {
  background: #fff3de;
  color: #eeac25;
}
.pageCarliList--statusCancel--label::before {
  content: url(../images/status-sendback--warning.svg);
}

.pageCarliList--statusProgress--label {
  background: #e5f7ff;
  color: #00c0f2;
}
.pageCarliList--statusProgress--label::before {
  content: url(../images/status-progress--secondColor.svg);
}

.pageCarliList--statusSuccess--label {
  background: #e7fcdd;
  color: #2fd600;
}
.pageCarliList--statusSuccess--label::before {
  content: url(../images/status-success--green.svg);
}

.pageCarliList--statusClose--label {
  color: #2fd600;
}
.pageCarliList--statusClose--label::before {
  content: url(../images/status-success--green.svg);
  padding: 0 5px 0 0;
  vertical-align: -8px;
}

.pagCarbookList {
  width: 100%;
  position: relative;
}
@media all and (min-width: 78em) {
  .pagCarbookList {
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    float: left;
  }
}
.pagCarbookList-NumberArea {
  padding: 0 30px;
}
@media all and (min-width: 78em) {
  .pagCarbookList-NumberArea {
    width: 33%;
    padding: 0 0px 0 30px;
  }
}
@media all and (min-width: 118em) {
  .pagCarbookList-NumberArea {
    width: 30%;
  }
}

.pagCarbookList-NumberArea--tit {
  color: #131621;
  font-size: 1rem;
}

.pagCarbookList-NumberArea--number {
  color: #3b6bba;
  font-size: 2.13rem;
  font-family: "Montserrat-regular";
}

.pagCarbookList-InfoArea {
  margin-bottom: 40px;
}
@media all and (min-width: 78em) {
  .pagCarbookList-InfoArea {
    width: 50%;
    margin-bottom: 0px;
  }
}
@media all and (min-width: 118em) {
  .pagCarbookList-InfoArea {
    width: 52%;
  }
}

.pagCarbookList-bookBt {
  width: 100%;
  display: block;
  background: linear-gradient(135deg, rgb(93, 208, 252), rgb(93, 181, 254));
  color: #fff;
  text-align: center;
  font-size: 1.1875rem;
  font-family: "NotoSansTC-Medium";
  position: absolute;
  bottom: 0px;
  height: 56px;
  line-height: 56px;
  letter-spacing: 1.5px;
}
@media all and (min-width: 78em) {
  .pagCarbookList-bookBt {
    width: 135px;
    right: 0;
    height: 74px;
    line-height: 73px;
  }
}
.pagCarbookList-bookBt:hover {
  color: #fff;
  background: linear-gradient(135deg, rgb(100, 130, 198), rgb(59, 107, 186));
  text-decoration: none;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

/*carbook-calendar.html*/
.pageCarbookCalBk {
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 30px;
  padding-right: 30px;
}
@media all and (min-width: 78em) {
  .pageCarbookCalBk {
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;
  }
}

.pagCarbookinList {
  width: 100%;
}
@media all and (min-width: 78em) {
  .pagCarbookinList {
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    float: left;
  }
}
@media all and (min-width: 78em) {
  .pagCarliBk {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}

.pagCarliList {
  width: 100%;
  position: relative;
}
@media all and (min-width: 78em) {
  .pagCarliList {
    width: 50%;
    float: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}
.pagCarliList-NumOprArea {
  padding: 0 30px;
}
@media all and (min-width: 78em) {
  .pagCarliList-NumOprArea {
    width: 40%;
    padding: 0 0px 0 30px;
  }
}
@media all and (min-width: 118em) {
  .pagCarliList-NumOprArea {
    width: 50%;
  }
}

.pagCarliList-InfoArea {
  margin-bottom: 40px;
}
@media all and (min-width: 78em) {
  .pagCarliList-InfoArea {
    width: 60%;
    margin-bottom: 10px;
  }
}
@media all and (min-width: 118em) {
  .pagCarliList-InfoArea {
    width: 50%;
  }
}

.pageCarinMainList {
  width: 100%;
}

.pageCarinMainList-DataOprArea {
  padding: 0 30px;
}
@media all and (min-width: 78em) {
  .pageCarinMainList-DataOprArea {
    padding: 0 0px 0 30px;
    width: 30%;
  }
}
@media all and (min-width: 118em) {
  .pageCarinMainList-DataOprArea {
    width: 20%;
  }
}

@media all and (min-width: 78em) {
  .pageCarinMainList-InfoArea01 {
    width: 40%;
    margin-bottom: 0px;
  }
}
@media all and (min-width: 118em) {
  .pageCarinMainList-InfoArea01 {
    width: 30%;
  }
}

@media all and (min-width: 78em) {
  .pageCarinMainList-InfoArea02 {
    width: 30%;
    margin-bottom: 0px;
  }
}
@media all and (min-width: 118em) {
  .pageCarinMainList-InfoArea02 {
    width: 20%;
  }
}

@media all and (min-width: 78em) {
  .pageCarinMainList-InfoArea03 {
    width: 100%;
    margin-bottom: 0px;
  }
}
@media all and (min-width: 118em) {
  .pageCarinMainList-InfoArea03 {
    width: 30%;
  }
}

.pageCarinMainList-InfoArea03--listheight {
  min-height: 160px;
}

/*projectli.html*/
@media all and (min-width: 78em) {
  .pageProjectliBk {
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 40px;
  }
}

@media all and (min-width: 78em) {
  .pageProjectliList-content:nth-child(1),
  .pageProjectliList--titArea--tit:nth-child(1) {
    width: 7%;
  }
  .pageProjectliList-content:nth-child(2),
  .pageProjectliList--titArea--tit:nth-child(2) {
    width: 8%;
  }
  .pageProjectliList-content:nth-child(3),
  .pageProjectliList--titArea--tit:nth-child(3) {
    width: 7%;
  }
  .pageProjectliList-content:nth-child(4),
  .pageProjectliList--titArea--tit:nth-child(4) {
    width: 8%;
  }
  .pageProjectliList-content:nth-child(5),
  .pageProjectliList--titArea--tit:nth-child(5) {
    width: 15%;
  }
  .pageProjectliList-content:nth-child(6),
  .pageProjectliList--titArea--tit:nth-child(6) {
    width: 14%;
  }
  .pageProjectliList-content:nth-child(7),
  .pageProjectliList--titArea--tit:nth-child(7) {
    width: 8%;
  }
  .pageProjectliList-content:nth-child(8),
  .pageProjectliList--titArea--tit:nth-child(8) {
    width: 9%;
  }
  .pageProjectliList-content:nth-child(9),
  .pageProjectliList--titArea--tit:nth-child(9) {
    width: 9%;
  }
  .pageProjectliList-content:nth-child(10),
  .pageProjectliList--titArea--tit:nth-child(10) {
    width: 13%;
  }
}

.pageProjectliList--statusCancel--label {
  background: #fff3de;
  color: #eeac25;
}
.pageProjectliList--statusCancel--label::before {
  content: url(../images/status-sendback--warning.svg);
}

.pageProjectliList--statusUnstaged--label {
  background: #eef0f9;
  color: #92a9c8;
}
.pageProjectliList--statusUnstaged--label::before {
  content: url(../images/status-unstaged--gray.svg);
}

.pageProjectliList--statusExecute--label {
  background: #f0f2f9;
  color: #3b6bba;
}
.pageProjectliList--statusExecute--label::before {
  content: url(../images/status-execute--maunColor.svg);
}

.pageProjectliList--statusProgress--label {
  background: #e5f7ff;
  color: #00c0f2;
}
.pageProjectliList--statusProgress--label::before {
  content: url(../images/status-progress--secondColor.svg);
}

.pageProjectliList--statusSuccess--label {
  background: #e7fcdd;
  color: #2fd600;
}
.pageProjectliList--statusSuccess--label::before {
  content: url(../images/status-success--green.svg);
}

.pageProjectliList--statusOverdue.pageProjectliList--statusOverdue {
  background: #ffede3;
  position: relative;
}
.pageProjectliList--statusOverdue.pageProjectliList--statusOverdue::before {
  display: block;
  position: absolute;
  content: "";
  top: 40px;
  left: -30px;
  width: 10px;
  height: 10px;
  background: #ff4238;
  border-radius: 5px;
}

.pagProjectin-statusIcon {
  vertical-align: -8px;
  padding: 0 5px 0 0;
}

.pagProjectReportListBk {
  width: auto;
  overflow-x: auto;
}
@media all and (min-width: 78em) {
  .pagProjectReportListBk {
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 40px;
  }
}

@media all and (min-width: 78em) {
  .pagProjectReportList--caseList.pagProjectReportList--caseDueList:nth-child(
      1
    ),
  .pagProjectReportList-content:nth-child(1),
  .pagProjectReportList--titArea--tit:nth-child(1) {
    width: 80px;
  }
  .pagProjectReportList--caseList.pagProjectReportList--caseDueList:nth-child(
      2
    ),
  .pagProjectReportList-content:nth-child(2),
  .pagProjectReportList--titArea--tit:nth-child(2) {
    width: 180px;
  }
  .pagProjectReportList--caseList.pagProjectReportList--caseDueList:nth-child(
      3
    ),
  .pagProjectReportList-content:nth-child(3),
  .pagProjectReportList--titArea--tit:nth-child(3) {
    width: 180px;
  }
  .pagProjectReportList--caseList.pagProjectReportList--caseDueList:nth-child(
      4
    ),
  .pagProjectReportList-content:nth-child(4),
  .pagProjectReportList--titArea--tit:nth-child(4) {
    width: 230px;
  }
  .pagProjectReportList--caseList.pagProjectReportList--caseDueList:nth-child(
      5
    ),
  .pagProjectReportList-content:nth-child(5),
  .pagProjectReportList--titArea--tit:nth-child(5) {
    width: 350px;
    margin-right: 50px;
  }
  .pagProjectReportList--caseList.pagProjectReportList--caseDueList:nth-child(
      6
    ),
  .pagProjectReportList-content:nth-child(6),
  .pagProjectReportList--titArea--tit:nth-child(6) {
    width: 180px;
  }
  .pagProjectReportList--caseList.pagProjectReportList--caseDueList:nth-child(
      7
    ),
  .pagProjectReportList-content:nth-child(7),
  .pagProjectReportList--titArea--tit:nth-child(7) {
    width: 140px;
  }
  .pagProjectReportList--caseList.pagProjectReportList--caseDueList:nth-child(
      8
    ),
  .pagProjectReportList-content:nth-child(8),
  .pagProjectReportList--titArea--tit:nth-child(8) {
    width: 200px;
  }
  .pagProjectReportList--caseList.pagProjectReportList--caseDueList:nth-child(
      9
    ),
  .pagProjectReportList-content:nth-child(9),
  .pagProjectReportList--titArea--tit:nth-child(9) {
    width: 160px;
  }
  .pagProjectReportList--caseList.pagProjectReportList--caseDueList:nth-child(
      10
    ),
  .pagProjectReportList-content:nth-child(10),
  .pagProjectReportList--titArea--tit:nth-child(10) {
    width: 300px;
    margin-right: 50px;
  }
  .pagProjectReportList--caseList.pagProjectReportList--caseDueList:nth-child(
      11
    ),
  .pagProjectReportList-content:nth-child(11),
  .pagProjectReportList--titArea--tit:nth-child(11) {
    width: 140px;
  }
  .pagProjectReportList--caseList.pagProjectReportList--caseDueList:nth-child(
      12
    ),
  .pagProjectReportList-content:nth-child(12),
  .pagProjectReportList--titArea--tit:nth-child(12) {
    width: 170px;
  }
  .pagProjectReportList--caseList.pagProjectReportList--caseDueList:nth-child(
      13
    ),
  .pagProjectReportList-content:nth-child(13),
  .pagProjectReportList--titArea--tit:nth-child(13) {
    width: 180px;
  }
  .pagProjectReportList--caseList.pagProjectReportList--caseDueList:nth-child(
      14
    ),
  .pagProjectReportList-content:nth-child(14),
  .pagProjectReportList--titArea--tit:nth-child(14) {
    width: 180px;
  }
}

@media all and (min-width: 78em) {
  .pagProjectReportList--timelinessList
    .pagProjectReportList-content:nth-child(1),
  .pagProjectReportList--timelinessList
    .pagProjectReportList--titArea--tit:nth-child(1) {
    width: 160px;
  }
  .pagProjectReportList--timelinessList
    .pagProjectReportList-content:nth-child(2),
  .pagProjectReportList--timelinessList
    .pagProjectReportList--titArea--tit:nth-child(2) {
    width: 220px;
  }
  .pagProjectReportList--timelinessList
    .pagProjectReportList-content:nth-child(3),
  .pagProjectReportList--timelinessList
    .pagProjectReportList--titArea--tit:nth-child(3) {
    width: 180px;
  }
  .pagProjectReportList--timelinessList
    .pagProjectReportList-content:nth-child(4),
  .pagProjectReportList--timelinessList
    .pagProjectReportList--titArea--tit:nth-child(4) {
    width: 150px;
  }
  .pagProjectReportList--timelinessList
    .pagProjectReportList-content:nth-child(5),
  .pagProjectReportList--timelinessList
    .pagProjectReportList--titArea--tit:nth-child(5) {
    width: 220px;
    margin-right: 0px;
  }
  .pagProjectReportList--timelinessList
    .pagProjectReportList-content:nth-child(6),
  .pagProjectReportList--timelinessList
    .pagProjectReportList--titArea--tit:nth-child(6) {
    width: 200px;
  }
  .pagProjectReportList--timelinessList
    .pagProjectReportList-content:nth-child(7),
  .pagProjectReportList--timelinessList
    .pagProjectReportList--titArea--tit:nth-child(7) {
    width: 200px;
  }
  .pagProjectReportList--timelinessList
    .pagProjectReportList-content:nth-child(8),
  .pagProjectReportList--timelinessList
    .pagProjectReportList--titArea--tit:nth-child(8) {
    width: 220px;
  }
  .pagProjectReportList--timelinessList
    .pagProjectReportList-content:nth-child(9),
  .pagProjectReportList--timelinessList
    .pagProjectReportList--titArea--tit:nth-child(9) {
    width: 210px;
  }
  .pagProjectReportList--timelinessList
    .pagProjectReportList-content:nth-child(10),
  .pagProjectReportList--timelinessList
    .pagProjectReportList--titArea--tit:nth-child(10) {
    width: 300px;
  }
}

.pagProjectReportList--timelinessListTimeTit {
  width: 100%;
}

.pagProjectReportList--timelinessListTitArea {
  width: 2150px !important;
  overflow-x: auto;
  display: none;
}
@media all and (min-width: 78em) {
  .pagProjectReportList--timelinessListTitArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .pagProjectReportList--timelinessListTitArea h2:nth-of-type(1) {
    width: auto;
    padding-left: 30px;
  }
  .pagProjectReportList--timelinessListTitArea h2:nth-of-type(2) {
    width: auto;
    padding-left: 450px;
  }
}

/*peopleli.html*/
@media all and (min-width: 78em) {
  .pagePeopleliBk {
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 40px;
  }
}

.pagePeopleliList {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #a4b7d1;
}
@media all and (min-width: 78em) {
  .pagePeopleliList {
    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;
  }
}
.pagePeopleliList:last-of-type {
  border-bottom: none;
}

.pagePeopleliList-content,
.pagePeopleliList-titArea--tit {
  font-weight: 500;
}
@media all and (min-width: 78em) {
  .pagePeopleliList-content:nth-child(1),
  .pagePeopleliList-titArea--tit:nth-child(1) {
    width: 7%;
  }
  .pagePeopleliList-content:nth-child(2),
  .pagePeopleliList-titArea--tit:nth-child(2) {
    width: 8%;
  }
  .pagePeopleliList-content:nth-child(3),
  .pagePeopleliList-titArea--tit:nth-child(3) {
    width: 10%;
  }
  .pagePeopleliList-content:nth-child(4),
  .pagePeopleliList-titArea--tit:nth-child(4) {
    width: 12%;
  }
  .pagePeopleliList-content:nth-child(5),
  .pagePeopleliList-titArea--tit:nth-child(5) {
    width: 10%;
  }
  .pagePeopleliList-content:nth-child(6),
  .pagePeopleliList-titArea--tit:nth-child(6) {
    width: 24%;
  }
  .pagePeopleliList-content:nth-child(7),
  .pagePeopleliList-titArea--tit:nth-child(7) {
    width: 9%;
  }
  .pagePeopleliList-content:nth-child(8),
  .pagePeopleliList-titArea--tit:nth-child(8) {
    width: 17%;
  }
}

/*hospital.html*/
@media all and (min-width: 78em) {
  .pageHospitalliBk {
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 40px;
  }
}

.pageHospitalliList {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #a4b7d1;
}
@media all and (min-width: 78em) {
  .pageHospitalliList {
    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;
  }
}
.pageHospitalliList:last-of-type {
  border-bottom: none;
}

.pageHospitalliList-content,
.pageHospitalliList-titArea--tit {
  font-weight: 500;
}
@media all and (min-width: 78em) {
  .pageHospitalliList-content:nth-child(1),
  .pageHospitalliList-titArea--tit:nth-child(1) {
    width: 17%;
  }
  .pageHospitalliList-content:nth-child(2),
  .pageHospitalliList-titArea--tit:nth-child(2) {
    width: 8%;
  }
  .pageHospitalliList-content:nth-child(3),
  .pageHospitalliList-titArea--tit:nth-child(3) {
    width: 14%;
  }
  .pageHospitalliList-content:nth-child(4),
  .pageHospitalliList-titArea--tit:nth-child(4) {
    width: 20%;
  }
  .pageHospitalliList-content:nth-child(5),
  .pageHospitalliList-titArea--tit:nth-child(5) {
    width: 11%;
  }
  .pageHospitalliList-content:nth-child(6),
  .pageHospitalliList-titArea--tit:nth-child(6) {
    width: 10%;
  }
  .pageHospitalliList-content:nth-child(7),
  .pageHospitalliList-titArea--tit:nth-child(7) {
    width: 15%;
  }
}

/*newsli.html*/
@media all and (min-width: 78em) {
  .pageNewsliBk {
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 40px;
  }
}

.pageNewsliiList {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #a4b7d1;
}
@media all and (min-width: 78em) {
  .pageNewsliiList {
    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;
  }
}
.pageNewsliiList:last-of-type {
  border-bottom: none;
}

.pageNewsliList-content,
.pageNewsliList-titArea--tit {
  font-weight: 500;
}
@media all and (min-width: 78em) {
  .pageNewsliList-content:nth-child(1),
  .pageNewsliList-titArea--tit:nth-child(1) {
    width: 53%;
  }
  .pageNewsliList-content:nth-child(2),
  .pageNewsliList-titArea--tit:nth-child(2) {
    width: 10%;
  }
  .pageNewsliList-content:nth-child(3),
  .pageNewsliList-titArea--tit:nth-child(3) {
    width: 12%;
  }
  .pageNewsliList-content:nth-child(4),
  .pageNewsliList-titArea--tit:nth-child(4) {
    width: 10%;
  }
  .pageNewsliList-content:nth-child(5),
  .pageNewsliList-titArea--tit:nth-child(5) {
    width: 15%;
  }
}

/*bannerli.html*/
@media all and (min-width: 78em) {
  .pageBannerliBk {
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 40px;
  }
}

.pageBannerliList {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #a4b7d1;
}
@media all and (min-width: 78em) {
  .pageBannerliList {
    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;
  }
}
.pageBannerliList:last-of-type {
  border-bottom: none;
}

.pageBannerliList-content,
.pageBannerliList-titArea--tit {
  font-weight: 500;
}
@media all and (min-width: 78em) {
  .pageBannerliList-content:nth-child(1),
  .pageBannerliList-titArea--tit:nth-child(1) {
    width: 16%;
  }
  .pageBannerliList-content:nth-child(2),
  .pageBannerliList-titArea--tit:nth-child(2) {
    width: 18%;
  }
  .pageBannerliList-content:nth-child(3),
  .pageBannerliList-titArea--tit:nth-child(3) {
    width: 35%;
  }
  .pageBannerliList-content:nth-child(4),
  .pageBannerliList-titArea--tit:nth-child(4) {
    width: 12%;
  }
  .pageBannerliList-content:nth-child(5),
  .pageBannerliList-titArea--tit:nth-child(5) {
    width: 15%;
  }
}

.pageBannerliImg {
  width: 100%;
  border-radius: 6px;
  border: 6px solid #fff;
}
@media all and (min-width: 48em) {
  .pageBannerliImg {
    width: 180px;
  }
}

/*project-batch.html*/
@media all and (min-width: 78em) {
  .pageProjectBatchBk {
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 40px;
  }
}

@media all and (min-width: 78em) {
  .pageProjectBatchList-content:nth-child(1),
  .pageProjectBatchList--titArea--tit:nth-child(1) {
    width: 7%;
  }
  .pageProjectBatchList-content:nth-child(2),
  .pageProjectBatchList--titArea--tit:nth-child(2) {
    width: 9%;
  }
  .pageProjectBatchList-content:nth-child(3),
  .pageProjectBatchList--titArea--tit:nth-child(3) {
    width: 8%;
  }
  .pageProjectBatchList-content:nth-child(4),
  .pageProjectBatchList--titArea--tit:nth-child(4) {
    width: 10%;
  }
  .pageProjectBatchList-content:nth-child(5),
  .pageProjectBatchList--titArea--tit:nth-child(5) {
    width: 10%;
  }
  .pageProjectBatchList-content:nth-child(6),
  .pageProjectBatchList--titArea--tit:nth-child(6) {
    width: 17%;
  }
  .pageProjectBatchList-content:nth-child(7),
  .pageProjectBatchList--titArea--tit:nth-child(7) {
    width: 15%;
  }
  .pageProjectBatchList-content:nth-child(8),
  .pageProjectBatchList--titArea--tit:nth-child(8) {
    width: 8%;
  }
  .pageProjectBatchList-content:nth-child(9),
  .pageProjectBatchList--titArea--tit:nth-child(9) {
    width: 6%;
  }
  .pageProjectBatchList-content:nth-child(10),
  .pageProjectBatchList--titArea--tit:nth-child(10) {
    width: 10%;
  }
}

.formBg {
  background: #fff;
}

.fromA4 {
  width: 21cm;
  height: 29.7cm;
  padding: 1cm;
  margin: 0 auto;
}

.fromA4--landscape {
  width: 29.7cm;
  padding: 0 1cm;
}
@page {
  .fromA4--landscape {
    size: A4 landscape;
  }
}

/*repair-printForm.html*/
.form-repair-printForm h1,
.form-repair-printForm h2,
.form-repair-printForm h3,
.form-repair-printForm h4,
.form-repair-printForm h5,
.form-repair-printForm h6,
.form-repair-printForm p,
.form-repair-printForm div,
.form-repair-printForm section {
  font-family: "標楷體";
  font-size: 14.5pt;
  color: #000;
  line-height: 1.4em;
}
.form-repair-printForm h1 {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.3em;
  text-align: center;
  margin: 0 auto 0.3cm auto;
}
.form-repair-printForm h2 {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.3em;
  text-align: center;
  margin: 0 auto 0.5cm auto;
}
.form-repair-printForm .formTitArea-info {
  width: 50%;
  float: left;
}
.form-repair-printForm .formArea {
  width: 100%;
  margin-top: 0.3cm;
  border-bottom: 1px solid black;
}
.form-repair-printForm .formArea .formArea--border {
  padding: 0.1cm;
}
.form-repair-printForm .formArea .formArea-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: stretch;
  -ms-flex-pack: stretch;
  justify-content: stretch;
  border: 1px solid black;
  border-bottom: none;
}
.form-repair-printForm .formArea .formArea-Left {
  width: 55%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.form-repair-printForm .formArea .formArea-right {
  width: 45%;
  border-left: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  border-left: 1px solid black;
}
.form-repair-printForm .formArea .formArea-right--list {
  width: 50%;
}
.form-repair-printForm .formArea .formArea-right--list--100 {
  width: 100%;
}
.form-repair-printForm .formArea .formArea-right--list--33 {
  width: 33%;
}
.form-repair-printForm .formArea .formArea-right--list--33.sign {
  height: 2cm;
}

/*carbook-printForm.html*/
.form-carbook-printForm h1,
.form-carbook-printForm h2,
.form-carbook-printForm h3,
.form-carbook-printForm h4,
.form-carbook-printForm h5,
.form-carbook-printForm h6,
.form-carbook-printForm p,
.form-carbook-printForm div,
.form-carbook-printForm section {
  font-family: "標楷體";
  font-size: 14.5pt;
  color: #000;
  line-height: 1.4em;
}
.form-carbook-printForm h1 {
  font-size: 24pt;
  font-weight: bold;
  line-height: 1.3em;
  text-align: center;
  margin: 0 auto 0.3cm auto;
}
.form-carbook-printForm h2 {
  font-size: 20pt;
  font-weight: bold;
  line-height: 1.3em;
  text-align: center;
  margin: 0 auto 0.5cm auto;
}
.form-carbook-printForm table {
  border: 2px solid #131621;
  width: 100%;
  font-family: "標楷體";
  font-size: 14.5pt;
  color: #000;
  line-height: 1.4em;
}
.form-carbook-printForm table tr,
.form-carbook-printForm table td {
  border: 1px solid #131621;
  padding: 5px;
  text-align: center;
  vertical-align: middle;
  min-width: 25%;
}

/*carin-printForm.html*/
.form-carin-printForm h1,
.form-carin-printForm h2,
.form-carin-printForm h3,
.form-carin-printForm h4,
.form-carin-printForm h5,
.form-carin-printForm h6,
.form-carin-printForm p,
.form-carin-printForm div,
.form-carin-printForm section {
  font-family: "標楷體";
  font-size: 13pt;
  color: #000;
  line-height: 1.5;
}
.form-carin-printForm h1 {
  font-size: 22pt;
  font-weight: bold;
  text-align: center;
}
.form-carin-printForm h2 {
  font-size: 18pt;
  font-weight: bold;
  text-align: center;
}
.form-carin-printForm table {
  border: 1px solid #131621;
  width: 100%;
  font-family: "標楷體";
  font-size: 13pt;
  color: #000;
  line-height: 1.5;
}
.form-carin-printForm table tr,
.form-carin-printForm table td {
  border: 1px solid #131621;
  padding: 5px;
  text-align: left;
  vertical-align: middle;
}

.jsRotate {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

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

/* surveylist.html */

@media all and (min-width: 78em) {
  .pagePeopleliBk {
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 40px;
  }
}

.pageSurveylist {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #a4b7d1;
}
@media all and (min-width: 78em) {
  .pageSurveylist {
    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;
  }
}
.pageSurveylist:last-of-type {
  border-bottom: none;
}

.pageSurveylist-content,
.pageSurveylist-titArea--tit {
  font-weight: 500;
}
@media all and (min-width: 78em) {
  .pageSurveylist-content:nth-child(1),
  .pageSurveylist-titArea--tit:nth-child(1) {
    width: 15%;
  }
  .pageSurveylist-content:nth-child(2),
  .pageSurveylist-titArea--tit:nth-child(2) {
    width: 15%;
  }
  .pageSurveylist-content:nth-child(3),
  .pageSurveylist-titArea--tit:nth-child(3) {
    width: 15%;
  }
  .pageSurveylist-content:nth-child(4),
  .pageSurveylist-titArea--tit:nth-child(4) {
    width: 15%;
  }
  .pageSurveylist-content:nth-child(5),
  .pageSurveylist-titArea--tit:nth-child(5) {
    width: 15%;
  }
  .pageSurveylist-content:nth-child(6),
  .pageSurveylist-titArea--tit:nth-child(6) {
    width: 14%;
  }
  .pageSurveylist-content:nth-child(7),
  .pageSurveylist-titArea--tit:nth-child(7) {
    width: 10%;
  }
}

.surHeaderMain-sectionArea {
  width: auto;
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 30px;
}
@media all and (min-width: 78em) {
  .surHeaderMain-sectionArea {
    margin-right: 60px;
    margin-top: 10px;
  }
}

.sur-pageTitle {
  margin-left: 0;
}
@media all and (min-width: 78em) {
  .sur-pageTitle {
    margin-left: 20px;
  }
}