@charset "UTF-8";
* {
  box-sizing: border-box !important;
}

.noscorll {
  overflow-y: hidden !important;
}

.block-hide {
  display: none !important;
}

.layerfront {
  z-index: 15 !important;
}

.layerlast {
  z-index: -1 !important;
}

.layerback {
  z-index: 0 !important;
}

body {
  min-width: 1020px;
  color: var(--G500);
  background-color: var(--G00);
  font-size: 14px;
}

/*Loading View Set*/
.loading-wrap {
  position: fixed;
  z-index: 15;
  width: 100%;
  height: 100vh;
  display: none;
}
.loading-wrap.active {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-wrap .loading {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(247, 247, 247, 0.5647058824);
}
.loading-wrap .loading .load-text {
  position: absolute;
  width: -moz-max-content;
  width: max-content;
  padding: 2px 4px;
  color: var(--PFC);
  background-color: #f7f7f7;
  border-radius: 50px;
  font-size: 12px;
}
.loading-wrap .loading .load-text::before {
  content: "－ NOW LOADING －";
}
.loading-wrap .loading .sk-chase {
  width: 55px;
  height: 55px;
  position: relative;
  animation: sk-chase 2.5s infinite linear both;
}
.loading-wrap .loading .sk-chase .sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  animation: sk-chase-dot 2s infinite ease-in-out both;
}
.loading-wrap .loading .sk-chase .sk-chase-dot::before {
  content: "";
  display: block;
  width: 25%;
  height: 25%;
  background-color: #3f8fc8;
  border-radius: 100%;
  animation: sk-chase-dot-before 2s infinite ease-in-out both;
}
.loading-wrap .loading .sk-chase .sk-chase-dot:nth-child(1) {
  animation-delay: -1.1s;
}
.loading-wrap .loading .sk-chase .sk-chase-dot:nth-child(2) {
  animation-delay: -1s;
}
.loading-wrap .loading .sk-chase .sk-chase-dot:nth-child(3) {
  animation-delay: -0.9s;
}
.loading-wrap .loading .sk-chase .sk-chase-dot:nth-child(4) {
  animation-delay: -0.8s;
}
.loading-wrap .loading .sk-chase .sk-chase-dot:nth-child(5) {
  animation-delay: -0.7s;
}
.loading-wrap .loading .sk-chase .sk-chase-dot:nth-child(6) {
  animation-delay: -0.6s;
}
.loading-wrap .loading .sk-chase .sk-chase-dot:nth-child(1):before {
  animation-delay: -1.1s;
}
.loading-wrap .loading .sk-chase .sk-chase-dot:nth-child(2):before {
  animation-delay: -1s;
}
.loading-wrap .loading .sk-chase .sk-chase-dot:nth-child(3):before {
  animation-delay: -0.9s;
}
.loading-wrap .loading .sk-chase .sk-chase-dot:nth-child(4):before {
  animation-delay: -0.8s;
}
.loading-wrap .loading .sk-chase .sk-chase-dot:nth-child(5):before {
  animation-delay: -0.7s;
}
.loading-wrap .loading .sk-chase .sk-chase-dot:nth-child(6):before {
  animation-delay: -0.6s;
}

@keyframes sk-chase {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes sk-chase-dot {
  80%, 100% {
    transform: rotate(360deg);
  }
}
@keyframes sk-chase-dot-before {
  50% {
    transform: scale(0.4);
  }
  100%, 0% {
    transform: scale(1);
  }
}
/*Popup View Sets*/
.popup-view-wrap {
  position: fixed;
  width: 100vw;
  height: 100dvh;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  /*for Autoplay Msg Skin*/
}
.popup-view-wrap .msg-skin {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
  min-width: 360px;
  min-height: 96px;
  max-width: 480px;
  padding: 48px 16px 24px;
  border-radius: 6px;
  background-color: var(--G00);
  box-shadow: 1px 0px 2px 0px rgba(80, 80, 80, 0.25);
  transition: ease 0.35s;
}
.popup-view-wrap .msg-skin > span.icon-wrap {
  position: absolute;
  z-index: 5;
  right: 8px;
  top: 8px;
}
.popup-view-wrap .msg-skin .title,
.popup-view-wrap .msg-skin .text {
  margin-bottom: 16px;
  text-align: center;
}
.popup-view-wrap .msg-skin .title span,
.popup-view-wrap .msg-skin .text span {
  display: none;
}
.popup-view-wrap .msg-skin .CH2 {
  max-width: 75%;
  margin: 8px auto 0px;
  line-height: 1.75;
}
.popup-view-wrap .msg-skin textarea {
  display: none;
  padding: 0px 8px;
}
.popup-view-wrap .msg-skin .input-wrap {
  display: none;
}
.popup-view-wrap .msg-skin .fuction-bar {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.popup-view-wrap .bg-mark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.5);
}
.popup-view-wrap.active {
  z-index: 15;
  opacity: 1;
}
.popup-view-wrap.autoplay .msg-skin {
  justify-content: center;
  min-width: 288px;
  padding: 24px 16px;
  background-color: rgba(0, 0, 0, 0.75);
}
.popup-view-wrap.autoplay .msg-skin span.close,
.popup-view-wrap.autoplay .msg-skin .fuction-bar {
  display: none;
}
.popup-view-wrap.autoplay .msg-skin .title,
.popup-view-wrap.autoplay .msg-skin .text {
  height: -moz-max-content;
  height: max-content;
  margin: 0px auto;
  color: var(--G00) !important;
}
.popup-view-wrap.autoplay .msg-skin .text {
  line-height: 1.5;
}
.popup-view-wrap.autoplay .bg-mark {
  display: none;
}

/*----Dynamic Sets for Popup View*/
.popup-view-wrap.search-msg .text::before {
  content: "請輸入 EISBN、ISBN、書名或作者" !important;
}
.popup-view-wrap.page-msg .text::before {
  content: "請輸入頁數";
}
.popup-view-wrap.saved .text::before {
  content: "資料已儲存";
}
.popup-view-wrap.willbe-on .text::before {
  content: "已安排上架";
}
.popup-view-wrap.willbe-off .text::before {
  content: "已安排下架";
}
.popup-view-wrap.print-msg .text::before {
  content: "請輸入提示文字內容";
}
.popup-view-wrap.editor-msg.nocode .text::before {
  content: "無資料可編輯";
}
.popup-view-wrap.editor-msg.sort .text::before {
  content: "排序已變更";
}
.popup-view-wrap.editor-msg.missing-data .text::before {
  content: "兩欄都必填";
}
.popup-view-wrap.editor-msg.editing .text::before {
  content: "編輯中無法使用此功能";
}
.popup-view-wrap.export-ok .title::before {
  content: "匯出成功";
}
.popup-view-wrap.export-ok .text::before {
  content: "產出並匯出兌換序號清單";
}
.popup-view-wrap.download-ok .title::before {
  content: "匯出成功";
}
.popup-view-wrap.download-ok .text::before {
  content: "錯誤資料訊息";
}
.popup-view-wrap.data-deleted .text::before {
  content: "檔案已刪除！";
}
.popup-view-wrap.need-check .text::before {
  content: "至少勾選一項！";
}
.popup-view-wrap.no-info .text::before {
  content: "查無資料！";
}
.popup-view-wrap.acct-format-ng .text::before {
  content: "帳號格式錯誤！";
}
.popup-view-wrap.pw-format-ng .text::before {
  content: "密碼格式錯誤！";
}
.popup-view-wrap.login-data-ng .text::before {
  content: "帳密錯誤！";
}
.popup-view-wrap.canceled-on .text::before {
  content: "已取消上架！";
}
.popup-view-wrap.deleted-url .text::before {
  content: "參考網址已刪除！";
}
.popup-view-wrap.mail-send-ok .msg-skin {
  max-width: 540px;
}
.popup-view-wrap.mail-send-ok .msg-skin .CH2 {
  max-width: 100%;
}
.popup-view-wrap.mail-send-ok .text {
  text-align: left;
}
.popup-view-wrap.mail-send-ok .text::before {
  content: "已發信至您所輸入的Email，請收信並依指示重密碼。";
}
.popup-view-wrap.password-reset-ok .text::before {
  content: "您的密碼已重設";
}

/*Module-B1 upload*/
.popup-view-wrap.upload .msg-skin .title span,
.popup-view-wrap.upload .msg-skin .text span {
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  background-size: 40px;
}
.popup-view-wrap.upload .msg-skin .title::after {
  content: "已上傳成功";
}

/*Module-B3 */
.popup-view-wrap.on-shelves-check {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.on-shelves-check .msg-skin > .title::before {
  content: "請確認是否要上架這本書";
}
.popup-view-wrap.on-shelves-check .msg-skin .input-wrap {
  display: flex;
  flex-direction: column;
}
.popup-view-wrap.on-shelves-check .msg-skin .input-wrap strong {
  width: 100%;
  max-width: 288px;
  padding: 0px 8px;
  text-align: left;
}
.popup-view-wrap.on-shelves-check .msg-skin .input-wrap span.icon-wrap {
  display: block;
}
.popup-view-wrap.on-shelves-check .msg-skin .input-wrap.date:has(i.remind) {
  padding-bottom: 24px;
}
.popup-view-wrap.on-shelves-check .msg-skin .input-wrap.date i.remind {
  position: absolute;
  bottom: -34px;
  color: var(--ALC);
  font-size: 12px;
}
.popup-view-wrap.on-shelves-check .msg-skin .fuction-bar .submit p::before {
  content: "安排上架";
}
.popup-view-wrap.on-shelves-check .msg-skin .fuction-bar .cancel p::before {
  content: "暫時不用";
}
.popup-view-wrap.off-shelves-check {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.off-shelves-check .title::before {
  content: "確定將此書下架?";
  content: "請確認是否要下架這本書";
}
.popup-view-wrap.off-shelves-check .text {
  position: relative;
  width: 100%;
  max-width: inherit;
  margin-top: 8px;
  margin-bottom: 48px;
  text-align: center;
}
.popup-view-wrap.off-shelves-check .text::before {
  content: "請填寫下架原因";
  position: absolute;
  left: 0;
  bottom: -48px;
  width: calc(100% - 16px);
  padding-left: 16px;
  text-align: left;
  line-height: 40px;
  background-color: var(--G100);
}
.popup-view-wrap.off-shelves-check .text::after {
  content: "*";
  position: absolute;
  left: 130px;
  bottom: -40px;
  color: var(--ALC);
}
.popup-view-wrap.off-shelves-check textarea {
  display: block;
}
.popup-view-wrap.off-shelves-check textarea ~ small {
  float: right;
  display: block;
  text-align: right;
  line-height: 24px;
  color: var(--ALC);
}
.popup-view-wrap.off-shelves-check textarea ~ small::before {
  content: "請輸入下架原因";
  position: absolute;
  right: 28px;
  transform: translateY(-28px);
}
.popup-view-wrap.off-shelves-check textarea ~ small::after {
  content: " / 20 字";
}
.popup-view-wrap.off-shelves-check textarea.warning-txt ~ small::after {
  content: " / 100 字";
}
.popup-view-wrap.off-shelves-check.keying textarea ~ small::before {
  display: none;
}
.popup-view-wrap.off-shelves-check .fuction-bar .submit .btn p::before {
  content: "確定下架";
}
.popup-view-wrap.off-shelves-check .fuction-bar .cancel .btn p::before {
  content: "暫時不要";
}

/*Module-C3*/
.popup-view-wrap.modify-record {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.modify-record .close {
  display: none;
}
.popup-view-wrap.modify-record .msg-skin {
  min-width: 520px;
  max-width: 576px;
  min-height: 352px;
  max-height: 65dvh;
}
.popup-view-wrap.modify-record .msg-skin > .title::before {
  content: "後台序號狀態修改紀錄";
}
.popup-view-wrap.modify-record .msg-skin > .text {
  width: 100%;
  max-width: 95%;
  max-height: 480px;
  overflow-y: auto;
}
.popup-view-wrap.modify-record .msg-skin > .text strong {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 16px 0 24px;
  box-sizing: border-box;
  text-align: left;
  line-height: 24px;
  font-size: 14px;
  font-weight: 400;
  background-color: var(--G100);
}
.popup-view-wrap.modify-record .msg-skin > .text strong:nth-of-type(1) {
  padding-top: 8px;
  border-top: 1px dashed var(--G300);
}
.popup-view-wrap.modify-record .msg-skin > .text strong:nth-last-of-type(1) {
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--G300);
}
.popup-view-wrap.modify-record .msg-skin > .text strong span {
  position: relative;
  display: inline;
  margin-right: 4px;
  font-style: italic;
  font-weight: 200;
}
.popup-view-wrap.modify-record .msg-skin > .text strong span::after {
  content: " ";
  margin-left: 4px;
}
.popup-view-wrap.modify-record .msg-skin > .text strong span:nth-child(1)::before {
  content: "-";
  position: absolute;
  left: -8px;
}
.popup-view-wrap.modify-record .msg-skin > .text strong span:nth-child(1)::after {
  content: "/";
  margin-left: 4px;
}
.popup-view-wrap.modify-record .msg-skin > .text strong span:nth-last-of-type(1) {
  margin: 0;
  font-style: normal;
  font-weight: 400;
}
.popup-view-wrap.modify-record .msg-skin > .text strong span:nth-last-of-type(1)::after {
  content: "";
  margin: 0;
}
.popup-view-wrap.modify-record .fuction-bar .cancel {
  display: none;
}
.popup-view-wrap.modify-record .fuction-bar .submit p::before {
  content: "關閉";
}
.popup-view-wrap.import-error1-msg {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.import-error1-msg .close {
  display: none;
}
.popup-view-wrap.import-error1-msg .title {
  margin-top: 32px;
}
.popup-view-wrap.import-error1-msg .title::before {
  content: "檔案格式不正確";
}
.popup-view-wrap.import-error1-msg .text {
  position: relative;
}
.popup-view-wrap.import-error1-msg .text::before {
  content: "請匯入EXCEL檔案格式(.xlsx)" !important;
}
.popup-view-wrap.import-error1-msg .text > span {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 64px;
  height: 64px;
}
.popup-view-wrap.import-error1-msg .text > span::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  background: url(../images/icon_warning_n.png) no-repeat;
  background-position: center;
  background-size: contain;
}
.popup-view-wrap.import-error1-msg .cancel {
  display: none;
}
.popup-view-wrap.import-error1-msg .submit p::before {
  content: "重新匯入";
}
.popup-view-wrap.import-error2-msg {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.import-error2-msg .close {
  display: none;
}
.popup-view-wrap.import-error2-msg .title {
  margin-top: 32px;
}
.popup-view-wrap.import-error2-msg .title::before {
  content: "欄位內容有誤";
}
.popup-view-wrap.import-error2-msg .text {
  position: relative;
}
.popup-view-wrap.import-error2-msg .text::before {
  content: "請匯入正確的欄位名稱" !important;
}
.popup-view-wrap.import-error2-msg .text > span {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 64px;
  height: 64px;
}
.popup-view-wrap.import-error2-msg .text > span::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  background: url(../images/icon_warning_n.png) no-repeat;
  background-position: center;
  background-size: contain;
}
.popup-view-wrap.import-error2-msg .cancel {
  display: none;
}
.popup-view-wrap.import-error2-msg .submit p::before {
  content: "重新匯入";
}
.popup-view-wrap.extend-period {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.extend-period .close {
  display: none;
}
.popup-view-wrap.extend-period .msg-skin {
  padding-top: 24px;
}
.popup-view-wrap.extend-period .msg-skin > .title::before {
  content: "延長序號使用期限";
}
.popup-view-wrap.extend-period .msg-skin .extend-period-wrap input[type=radio] {
  position: relative;
  z-index: 5;
  opacity: 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.popup-view-wrap.extend-period .msg-skin .extend-period-wrap > div {
  display: flex;
  align-items: center;
  margin: 8px 0 8px 4px;
  color: var(--G500);
}
.popup-view-wrap.extend-period .msg-skin .extend-period-wrap > div > div {
  display: flex;
  align-items: center;
}
.popup-view-wrap.extend-period .msg-skin .extend-period-wrap > div > div label {
  position: initial;
}
.popup-view-wrap.extend-period .msg-skin .extend-period-wrap > div > div label::before {
  content: "";
  position: absolute;
  left: -20px;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  border-radius: 8px;
  border: 1px solid var(--G300);
  box-sizing: border-box;
}
.popup-view-wrap.extend-period .msg-skin .extend-period-wrap > div > div label input[type=text] {
  margin: 0 8px;
  padding: 0 16px;
  line-height: 40px;
}
.popup-view-wrap.extend-period .msg-skin .extend-period-wrap > div > div span {
  display: inline-block;
  min-width: 32px;
  min-height: 16px;
}
.popup-view-wrap.extend-period .msg-skin .extend-period-wrap > div > div span::after {
  content: " / ";
}
.popup-view-wrap.extend-period .msg-skin .extend-period-wrap > div > div span:nth-last-of-type(1)::after {
  display: none;
}
.popup-view-wrap.extend-period .msg-skin .extend-period-wrap > div > div strong {
  display: inline-block;
  min-width: 80px;
  margin-left: 8px;
}
.popup-view-wrap.extend-period .msg-skin .extend-period-wrap > div:nth-of-type(1) > div span {
  position: relative;
}
.popup-view-wrap.extend-period .msg-skin .extend-period-wrap > div:nth-of-type(1) > div span:nth-of-type(1) {
  margin-left: 8px;
}
.popup-view-wrap.extend-period .msg-skin .extend-period-wrap > div:nth-of-type(1) > div span:nth-of-type(1)::before {
  position: absolute;
  content: "天";
  left: -62px;
  top: 50%;
  transform: translateY(-50%);
}
.popup-view-wrap.extend-period .msg-skin .extend-period-wrap > div:nth-of-type(1) label input {
  width: 96px;
  min-width: inherit;
}
.popup-view-wrap.extend-period .msg-skin .extend-period-wrap > div:nth-of-type(2) label input {
  max-width: 228px;
}
.popup-view-wrap.extend-period .msg-skin .extend-period-wrap .input-wrap.date span.date {
  right: 16px;
  display: inline-block;
}
.popup-view-wrap.extend-period .msg-skin .extend-period-wrap input[type=radio]:checked ~ div label::before {
  border: 2px solid var(--PFC);
}
.popup-view-wrap.extend-period .msg-skin .extend-period-wrap input[type=radio]:checked ~ div label::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -16px;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: var(--PFC);
}
.popup-view-wrap.extend-period .fuction-bar .cancel p::before {
  content: "取消";
}
.popup-view-wrap.extend-period .fuction-bar .submit p::before {
  content: "確定延長";
}
.popup-view-wrap.sn-delete {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.sn-delete .close {
  display: none;
}
.popup-view-wrap.sn-delete .msg-skin {
  padding-top: 24px;
}
.popup-view-wrap.sn-delete .msg-skin > .title::before {
  content: "您是否要註銷此序號？";
}
.popup-view-wrap.sn-delete .msg-skin > .text::before {
  content: "註銷此序號將會無法再兌換該序號";
}
.popup-view-wrap.sn-delete .msg-skin textarea {
  display: block;
}
.popup-view-wrap.sn-delete .msg-skin textarea ~ small {
  float: right;
  display: block;
  text-align: right;
  line-height: 24px;
  color: var(--ALC);
}
.popup-view-wrap.sn-delete .msg-skin textarea ~ small::before {
  content: "請描述註銷原因";
  position: absolute;
  right: 28px;
  transform: translateY(-28px);
}
.popup-view-wrap.sn-delete .msg-skin textarea ~ small::after {
  content: "*必填";
}
.popup-view-wrap.sn-delete .msg-skin.keying textarea ~ small::before {
  display: none;
}
.popup-view-wrap.sn-delete .fuction-bar .cancel p::before {
  content: "暫時不用";
}
.popup-view-wrap.sn-delete .fuction-bar .submit p::before {
  content: "確定註銷";
}
.popup-view-wrap.resource-trial {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.resource-trial .close {
  display: none;
}
.popup-view-wrap.resource-trial .msg-skin {
  padding-top: 24px;
}
.popup-view-wrap.resource-trial .msg-skin > .title::before {
  content: "推廣版教學資源確認要調整為「開啟」？";
}
.popup-view-wrap.resource-trial .msg-skin > .text::before {
  content: "完整版教學資源將會調整為「關閉」";
}
.popup-view-wrap.resource-trial .msg-skin input {
  display: none;
}
.popup-view-wrap.resource-trial .fuction-bar .cancel p::before {
  content: "取消";
}
.popup-view-wrap.resource-trial .fuction-bar .submit p::before {
  content: "確認";
}
.popup-view-wrap.resource-full {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.resource-full .close {
  display: none;
}
.popup-view-wrap.resource-full .msg-skin {
  padding-top: 24px;
}
.popup-view-wrap.resource-full .msg-skin > .title::before {
  content: "開啟完整版教學資源";
}
.popup-view-wrap.resource-full .msg-skin > .text {
  width: 100%;
  max-width: 290px;
  text-align: left;
}
.popup-view-wrap.resource-full .msg-skin > .text::before {
  content: "請輸入銷貨單號";
}
.popup-view-wrap.resource-full .msg-skin input {
  max-width: 290px;
  margin: 0 auto;
  padding-left: 8px;
  line-height: 40px;
}
.popup-view-wrap.resource-full .fuction-bar {
  max-width: 290px;
  margin: 32px auto 0;
}
.popup-view-wrap.resource-full .fuction-bar .cancel p::before {
  content: "取消";
}
.popup-view-wrap.resource-full .fuction-bar .submit p::before {
  content: "確認";
}

/*Module-E*/
.popup-view-wrap.deleted {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.deleted .close {
  display: none;
}
.popup-view-wrap.deleted .title {
  margin-top: 32px;
  display: none;
}
.popup-view-wrap.deleted .title::before {
  content: "";
  display: block;
}
.popup-view-wrap.deleted .text {
  position: relative;
  max-width: 95%;
}
.popup-view-wrap.deleted .text::before {
  content: "資料已刪除" !important;
}
.popup-view-wrap.deleted .cancel {
  display: none;
}
.popup-view-wrap.deleted .submit {
  display: none;
}
.popup-view-wrap.alertE-name {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.alertE-name .close {
  display: none;
}
.popup-view-wrap.alertE-name .title {
  display: none;
}
.popup-view-wrap.alertE-name .title::before {
  content: "";
  display: block;
}
.popup-view-wrap.alertE-name .text {
  position: relative;
}
.popup-view-wrap.alertE-name .text::before {
  content: "此角色名稱已存在，不可重複" !important;
}
.popup-view-wrap.alertE-name .cancel {
  display: none;
}
.popup-view-wrap.alertE-name .submit {
  display: none;
}
.popup-view-wrap.alertE-delete {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.alertE-delete .close {
  display: none;
}
.popup-view-wrap.alertE-delete .title {
  margin-top: 32px;
  display: none;
}
.popup-view-wrap.alertE-delete .title::before {
  content: "";
  display: block;
}
.popup-view-wrap.alertE-delete .text {
  position: relative;
  max-width: 95%;
}
.popup-view-wrap.alertE-delete .text::before {
  content: "此角色尚有關連之使用者帳戶，無法刪除" !important;
}
.popup-view-wrap.alertE-delete .cancel {
  display: none;
}
.popup-view-wrap.alertE-delete .submit p::before {
  content: "關閉";
}
.popup-view-wrap.alertE-account {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.alertE-account .close {
  display: none;
}
.popup-view-wrap.alertE-account .title {
  margin-top: 32px;
  display: none;
}
.popup-view-wrap.alertE-account .title::before {
  content: "";
  display: block;
}
.popup-view-wrap.alertE-account .text {
  position: relative;
  max-width: 95%;
}
.popup-view-wrap.alertE-account .text::before {
  content: "此登入帳號已存在，不可重複" !important;
}
.popup-view-wrap.alertE-account .cancel {
  display: none;
}
.popup-view-wrap.alertE-account .submit {
  display: none;
}
.popup-view-wrap.alertE-publishing {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.alertE-publishing .close {
  display: none;
}
.popup-view-wrap.alertE-publishing .title {
  display: none;
}
.popup-view-wrap.alertE-publishing .title::before {
  content: "";
  display: block;
}
.popup-view-wrap.alertE-publishing .text {
  position: relative;
  max-width: 100%;
}
.popup-view-wrap.alertE-publishing .text::before {
  content: "出版單位名稱已存在，不可重複" !important;
}
.popup-view-wrap.alertE-publishing .cancel {
  display: none;
}
.popup-view-wrap.alertE-publishing .submit {
  display: none;
}
.popup-view-wrap.alertE-mail {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.alertE-mail .close {
  display: none;
}
.popup-view-wrap.alertE-mail .title {
  display: none;
}
.popup-view-wrap.alertE-mail .title::before {
  content: "";
  display: block;
}
.popup-view-wrap.alertE-mail .text {
  position: relative;
  max-width: 100%;
}
.popup-view-wrap.alertE-mail .text::before {
  content: "Email 格式不正確" !important;
}
.popup-view-wrap.alertE-mail .cancel {
  display: none;
}
.popup-view-wrap.alertE-mail .submit {
  display: none;
}
.popup-view-wrap.check-delete {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.check-delete .close {
  display: none;
}
.popup-view-wrap.check-delete .title {
  display: none;
}
.popup-view-wrap.check-delete .title::before {
  content: "";
  display: block;
}
.popup-view-wrap.check-delete .text {
  position: relative;
}
.popup-view-wrap.check-delete .text::before {
  content: "確定要刪除此角色嗎？" !important;
}
.popup-view-wrap.check-delete .cancel p::before {
  content: "取消";
}
.popup-view-wrap.check-delete .submit p::before {
  content: "確定";
}
.popup-view-wrap.log-error-mail {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.log-error-mail .close {
  display: none;
}
.popup-view-wrap.log-error-mail .title {
  display: none;
}
.popup-view-wrap.log-error-mail .title::before {
  content: "";
  display: block;
}
.popup-view-wrap.log-error-mail .text {
  position: relative;
  max-width: 100%;
}
.popup-view-wrap.log-error-mail .text::before {
  content: "登入帳號的 Email 格式不正確" !important;
}
.popup-view-wrap.log-error-mail .cancel {
  display: none;
}
.popup-view-wrap.log-error-mail .submit {
  display: none;
}
.popup-view-wrap.check-cancel {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.check-cancel .close {
  display: none;
}
.popup-view-wrap.check-cancel .title {
  display: none;
}
.popup-view-wrap.check-cancel .title::before {
  content: "";
  display: block;
}
.popup-view-wrap.check-cancel .text {
  position: relative;
  max-width: 100%;
}
.popup-view-wrap.check-cancel .text::before {
  content: "此頁的資料有編輯過，不儲存而直接離開嗎？" !important;
}
.popup-view-wrap.check-cancel .cancel p::before {
  content: "否";
}
.popup-view-wrap.check-cancel .submit p::before {
  content: "是";
}
.popup-view-wrap.check-saved {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.check-saved .close {
  display: none;
}
.popup-view-wrap.check-saved .title {
  display: none;
}
.popup-view-wrap.check-saved .title::before {
  content: "";
  display: block;
}
.popup-view-wrap.check-saved .text {
  position: relative;
  max-width: 100%;
}
.popup-view-wrap.check-saved .text::before {
  content: "尚有欄位未正確填寫" !important;
}
.popup-view-wrap.check-saved .cancel {
  display: none;
}
.popup-view-wrap.check-saved .submit {
  display: none;
}
.popup-view-wrap.user-delete {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.user-delete .close {
  display: none;
}
.popup-view-wrap.user-delete .title {
  display: none;
}
.popup-view-wrap.user-delete .title::before {
  content: "";
  display: block;
}
.popup-view-wrap.user-delete .text {
  position: relative;
  max-width: 100%;
}
.popup-view-wrap.user-delete .text::before {
  content: "此使用者曾有維護資料的紀錄，故不可刪除" !important;
}
.popup-view-wrap.user-delete .cancel {
  display: none;
}
.popup-view-wrap.user-delete .submit p::before {
  content: "知道了";
}
.popup-view-wrap.check-user-delete {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.check-user-delete .close {
  display: none;
}
.popup-view-wrap.check-user-delete .title {
  display: none;
}
.popup-view-wrap.check-user-delete .title::before {
  content: "";
  display: block;
}
.popup-view-wrap.check-user-delete .text {
  position: relative;
  max-width: 100%;
}
.popup-view-wrap.check-user-delete .text::before {
  content: "確定要刪除此使用者帳戶嗎？" !important;
}
.popup-view-wrap.check-user-delete .cancel p::before {
  content: "取消";
}
.popup-view-wrap.check-user-delete .submit p::before {
  content: "確定";
}
.popup-view-wrap.publisher-delete {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.publisher-delete .close {
  display: none;
}
.popup-view-wrap.publisher-delete .title {
  display: none;
}
.popup-view-wrap.publisher-delete .title::before {
  content: "";
  display: block;
}
.popup-view-wrap.publisher-delete .text {
  position: relative;
  max-width: 100%;
}
.popup-view-wrap.publisher-delete .text::before {
  content: "此出版單位有出版品紀錄，不可刪除" !important;
}
.popup-view-wrap.publisher-delete .cancel p::before {
  content: "取消";
}
.popup-view-wrap.publisher-delete .submit p::before {
  content: "確定";
}
.popup-view-wrap.check-publisher-delete {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.check-publisher-delete .close {
  display: none;
}
.popup-view-wrap.check-publisher-delete .title {
  display: none;
}
.popup-view-wrap.check-publisher-delete .title::before {
  content: "";
  display: block;
}
.popup-view-wrap.check-publisher-delete .text {
  position: relative;
  max-width: 100%;
}
.popup-view-wrap.check-publisher-delete .text::before {
  content: "確定要刪除此出版單位嗎？" !important;
}
.popup-view-wrap.check-publisher-delete .cancel p::before {
  content: "取消";
}
.popup-view-wrap.check-publisher-delete .submit p::before {
  content: "確定";
}
.popup-view-wrap.alertE-bookscenter {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.alertE-bookscenter .close {
  display: none;
}
.popup-view-wrap.alertE-bookscenter .title {
  display: none;
}
.popup-view-wrap.alertE-bookscenter .title::before {
  content: "";
  display: block;
}
.popup-view-wrap.alertE-bookscenter .text {
  position: relative;
  max-width: 100%;
}
.popup-view-wrap.alertE-bookscenter .text::before {
  content: "書目中心出版單位編號已存在，不可重複" !important;
}
.popup-view-wrap.alertE-bookscenter .cancel {
  display: none;
}
.popup-view-wrap.alertE-bookscenter .submit {
  display: none;
}
.popup-view-wrap.alertE-controlcenter {
  z-index: 11;
  opacity: 1;
}
.popup-view-wrap.alertE-controlcenter .close {
  display: none;
}
.popup-view-wrap.alertE-controlcenter .title {
  display: none;
}
.popup-view-wrap.alertE-controlcenter .title::before {
  content: "";
  display: block;
}
.popup-view-wrap.alertE-controlcenter .text {
  position: relative;
  max-width: 100%;
}
.popup-view-wrap.alertE-controlcenter .text::before {
  content: "權控中心出版單位編號已存在，不可重複" !important;
}
.popup-view-wrap.alertE-controlcenter .cancel {
  display: none;
}
.popup-view-wrap.alertE-controlcenter .submit {
  display: none;
}

/*Index Page*/
main {
  /* forget password */
  /* set password */
}
main.index-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  overflow: hidden;
}
main.index-page h1 {
  position: relative;
  z-index: 2;
  transform: translateY(-64px);
  mix-blend-mode: multiply;
  font-size: 64px;
}
main.index-page::after {
  content: "";
  position: absolute;
  top: -10%;
  left: -10%;
  z-index: 0;
  width: 120dvw;
  height: 120dvh;
  background-position: center;
  background-size: auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: url(https://picsum.photos/1920/1080);
  filter: blur(8px);
  opacity: 0.5;
}
main.index-page .login_wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 544px;
  height: -moz-max-content;
  height: max-content;
  min-height: 320px;
  margin-top: -32px;
  padding: 16px 64px 32px;
  box-sizing: border-box;
}
main.index-page .login_wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.65);
  box-shadow: 2px 0px 4px 0px rgba(80, 80, 80, 0.25);
  outline-style: solid;
  outline-color: var(--G300);
  outline-width: 6px;
}
main.index-page .login_wrap h2 {
  margin-bottom: 8px;
  text-align: center;
  line-height: 1.5;
}
main.index-page .login_wrap h2::before {
  content: "系統登入";
}
main.index-page .login_wrap small {
  font-size: 12px;
  text-transform: uppercase;
}
main.index-page .login_wrap > div {
  position: relative;
}
main.index-page .login_wrap > div .input-wrap {
  margin-bottom: 16px;
}
main.index-page .login_wrap .btn-wrap {
  float: right;
  justify-content: space-between;
  width: 100%;
  margin-top: -16px;
  padding: 8px 0px 0px;
}
main.index-page .login_wrap .btn-wrap.submit-wrap {
  float: right;
  justify-content: center;
  width: -moz-max-content;
  width: max-content;
  min-width: 128px;
  margin: 32px auto 0px;
  padding: 0px;
  border-radius: 4px;
  background-color: var(--PSC);
}
main.index-page .login_wrap .btn-wrap.submit-wrap:hover {
  background-color: var(--PTC);
}
main.index-page .login_wrap .btn-wrap.submit-wrap p {
  position: relative;
  color: var(--G00);
  line-height: 40px;
}
main.index-page .login_wrap .btn-wrap .rember-info {
  position: relative;
  width: -moz-max-content;
  width: max-content;
  padding: 0px;
}
main.index-page .login_wrap .btn-wrap .rember-info input[type=checkbox] {
  position: absolute;
  z-index: 1;
  width: 24px;
  height: 24px;
  opacity: 0;
  cursor: pointer;
}
main.index-page .login_wrap .btn-wrap .rember-info input[type=checkbox]:checked ~ p::before {
  background-size: 95%;
  background-position: center;
  background-image: url(../images/icon_check_n.png);
  border: 1px solid var(--G500);
}
main.index-page .login_wrap .btn-wrap .rember-info label {
  padding: 0px;
}
main.index-page .login_wrap .btn-wrap .rember-info p {
  width: -moz-max-content;
  width: max-content;
  padding-left: 24px;
}
main.index-page .login_wrap .btn-wrap .rember-info p::before {
  content: "";
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  left: 0px;
  display: block;
  width: 16px;
  height: 16px;
  border: 1px solid var(--G500);
}
main.index-page .login_wrap .btn-wrap a {
  color: var(--PFC);
}
main.index-page .login_wrap .btn-wrap a:hover {
  text-decoration: underline;
}
main.index-page .login_wrap .forget-password-view,
main.index-page .login_wrap .set-password-view {
  display: none;
}
main:is(.forget-pw) .login_wrap {
  max-width: 600px;
  min-height: 300px;
  margin: -16px 0 0 0;
  padding: 16px 64px;
}
main:is(.forget-pw) .login_wrap h2::before {
  content: "忘記密碼";
}
main:is(.forget-pw) .login_wrap .login-view {
  display: none;
}
main:is(.forget-pw) .login_wrap .forget-password-view {
  display: flex;
  flex-direction: column;
}
main:is(.forget-pw) .login_wrap .forget-password-view > p {
  margin-bottom: 1rem;
}
main:is(.forget-pw) .login_wrap .forget-password-view .input-wrap {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  border: 1px solod transparent !important;
}
main:is(.forget-pw) .login_wrap .forget-password-view .input-wrap label {
  max-width: none;
}
main:is(.forget-pw) .login_wrap .forget-password-view .input-wrap label span.hint {
  position: absolute;
  right: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background-color: var(--HLCH);
  border-radius: 50%;
  opacity: 0;
  z-index: -1;
}
main:is(.forget-pw) .login_wrap .forget-password-view .input-wrap label span.hint::before, main:is(.forget-pw) .login_wrap .forget-password-view .input-wrap label span.hint::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 3px;
  border-radius: 4px;
  background-color: var(--G00);
}
main:is(.forget-pw) .login_wrap .forget-password-view .input-wrap label span.hint::before {
  rotate: 48deg;
  translate: -4px 3px;
}
main:is(.forget-pw) .login_wrap .forget-password-view .input-wrap label span.hint::after {
  width: 12px;
  rotate: -52deg;
  translate: 2px 0px;
}
main:is(.forget-pw) .login_wrap .forget-password-view .input-wrap label input[type=email]:invalid {
  border-bottom-color: var(--ALC);
}
main:is(.forget-pw) .login_wrap .forget-password-view .input-wrap label input[type=email]:valid:not(:-moz-placeholder-shown) {
  border-bottom-color: var(--HLCH);
}
main:is(.forget-pw) .login_wrap .forget-password-view .input-wrap label input[type=email]:valid:not(:placeholder-shown) {
  border-bottom-color: var(--HLCH);
}
main:is(.forget-pw) .login_wrap .forget-password-view .input-wrap label input[type=email]:valid:not(:-moz-placeholder-shown) ~ span.hint {
  opacity: 1;
  z-index: 1;
}
main:is(.forget-pw) .login_wrap .forget-password-view .input-wrap label input[type=email]:valid:not(:placeholder-shown) ~ span.hint {
  opacity: 1;
  z-index: 1;
}
main:is(.set-pw) .login_wrap {
  max-width: 600px;
  min-height: 300px;
  margin: -16px 0 0 0;
  padding: 16px 64px 32px;
}
main:is(.set-pw) .login_wrap h2::before {
  content: "重設密碼";
}
main:is(.set-pw) .login_wrap .login-view {
  display: none;
}
main:is(.set-pw) .login_wrap .set-password-view {
  display: flex;
  flex-direction: column;
}
main:is(.set-pw) .login_wrap .set-password-view .input-wrap {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  border: 1px solod transparent !important;
}
main:is(.set-pw) .login_wrap .set-password-view .input-wrap label {
  max-width: none;
}
main:is(.set-pw) .login_wrap .set-password-view .input-wrap label span.hint {
  position: absolute;
  right: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background-color: var(--HLCH);
  border-radius: 50%;
  opacity: 0;
  z-index: -1;
}
main:is(.set-pw) .login_wrap .set-password-view .input-wrap label span.hint::before, main:is(.set-pw) .login_wrap .set-password-view .input-wrap label span.hint::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 3px;
  border-radius: 4px;
  background-color: var(--G00);
}
main:is(.set-pw) .login_wrap .set-password-view .input-wrap label span.hint::before {
  rotate: 48deg;
  translate: -4px 3px;
}
main:is(.set-pw) .login_wrap .set-password-view .input-wrap label span.hint::after {
  width: 12px;
  rotate: -52deg;
  translate: 2px 0px;
}
main:is(.set-pw) .login_wrap .set-password-view .input-wrap label input[type=email]:invalid {
  border-bottom-color: var(--ALC);
}
main:is(.set-pw) .login_wrap .set-password-view .input-wrap label input[type=email]:valid:not(:-moz-placeholder-shown) {
  border-bottom-color: var(--HLCH);
}
main:is(.set-pw) .login_wrap .set-password-view .input-wrap label input[type=email]:valid:not(:placeholder-shown) {
  border-bottom-color: var(--HLCH);
}
main:is(.set-pw) .login_wrap .set-password-view .input-wrap label input[type=email]:valid:not(:-moz-placeholder-shown) ~ span.hint {
  opacity: 1;
  z-index: 1;
}
main:is(.set-pw) .login_wrap .set-password-view .input-wrap label input[type=email]:valid:not(:placeholder-shown) ~ span.hint {
  opacity: 1;
  z-index: 1;
}
main:is(.set-pw) .login_wrap .set-password-view .input-wrap .msg-text {
  position: absolute;
  right: 0;
  bottom: 0;
  translate: 0 24px;
  color: var(--ALC);
  line-height: 24px;
  font-size: 0.875rem;
  opacity: 0;
  z-index: -1;
}
main:is(.set-pw) .login_wrap .set-password-view .input-wrap:first-child .msg-text::before {
  content: "密碼格式不符";
}
main:is(.set-pw) .login_wrap .set-password-view .input-wrap:nth-child(2) .msg-text::before {
  content: "上下兩組新密碼的內容不相同";
}
main:is(.set-pw).error .login_wrap .msg-text {
  opacity: 1 !important;
  z-index: 1 !important;
}
main:is(.forget-pw, .set-pw) .fuction-bar {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 16px;
}
main:is(.forget-pw, .set-pw) .fuction-bar > div {
  float: none;
  transition: ease 0.35s;
}
main:is(.forget-pw, .set-pw) .fuction-bar > div.submit-wrap, main:is(.forget-pw, .set-pw) .fuction-bar > div.cancel-wrap {
  justify-content: center;
  width: -moz-max-content;
  width: max-content;
  min-width: 128px;
  margin: 32px 0 0 !important;
  padding: 0px;
  border-radius: 4px;
}
main:is(.forget-pw, .set-pw) .fuction-bar > div.cancel-wrap {
  background-color: var(--G100);
  border: 1px solid var(--G300);
}
main:is(.forget-pw, .set-pw) .fuction-bar > div.cancel-wrap p {
  color: var(--G700);
  line-height: 40px;
}
main:is(.forget-pw, .set-pw) .fuction-bar > div.cancel-wrap:hover {
  background-color: var(--G00);
  border-color: var(--G500);
}
main > div.service-wrap {
  position: absolute;
  bottom: 0;
  z-index: 5;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
main > div.service-wrap > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.5rem;
}
main > div.service-wrap > div p {
  color: var(--G00);
}
main > div.service-wrap > div p a {
  color: var(--G00);
}

header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;
  padding: 0px 16px;
  background-color: var(--G80);
  border-bottom: 1px solid var(--G100);
}
header .logo-wrap h1 {
  color: var(--G700);
}

.toolbar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: -moz-max-content;
  width: max-content;
}
.toolbar-wrap .member-skin {
  position: relative;
  display: flex;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 32px;
  padding: 0px 48px 0px 40px;
  background-color: var(--G200);
  border-radius: 32px;
  transition: ease 0.35s;
}
.toolbar-wrap .member-skin::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0px;
  border-radius: 16px;
  background-color: var(--G100);
  box-shadow: 1px 0px 2px 0px rgba(80, 80, 80, 0.25);
  opacity: 0;
}
.toolbar-wrap .member-skin .short-name {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  color: var(--G00);
  background-color: var(--PFC);
  border-radius: 14px;
}
.toolbar-wrap .member-skin .short-name strong {
  font-size: 14px;
  font-weight: 700;
}
.toolbar-wrap .member-skin .info-unit {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  overflow: hidden;
}
.toolbar-wrap .member-skin .info-mail {
  position: absolute;
  left: 40px;
  bottom: -8px;
  z-index: -1;
  display: block;
  width: 100%;
  height: 0px;
  color: var(--PFC);
  overflow: hidden;
  opacity: 0;
}
.toolbar-wrap .member-skin .icon-wrap {
  display: block;
  position: absolute;
  right: 4px;
  z-index: 1;
  width: 28px;
  height: 28px;
  background-size: 20px;
}
.toolbar-wrap .member-skin .btn-wrap {
  position: absolute;
  left: calc(50% + 2px);
  transform: translateX(-50%);
  bottom: -48px;
  z-index: -1;
  opacity: 0;
  transition: ease 0.35s;
}
.toolbar-wrap .member-skin.active {
  padding-right: 24px;
  background-color: var(--G100);
}
.toolbar-wrap .member-skin.active .short-name {
  top: calc(50% + 2px);
  left: 4px;
}
.toolbar-wrap .member-skin.active .info-mail {
  z-index: 1;
  height: auto;
  opacity: 1;
}
.toolbar-wrap .member-skin.active .icon-wrap {
  opacity: 0;
}
.toolbar-wrap .member-skin.active .btn-wrap {
  z-index: 1;
  opacity: 1;
}
.toolbar-wrap .member-skin.active::after {
  content: "";
  z-index: 0;
  opacity: 1;
  height: calc(100% + 56px);
}
.toolbar-wrap .service-skin label {
  position: relative;
  font-size: 0.95rem;
  line-height: 32px;
}
.toolbar-wrap .service-skin label input {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.toolbar-wrap .service-skin label::before {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 32px;
  height: 32px;
  -webkit-mask-image: url(../images/icon_service_n.png);
          mask-image: url(../images/icon_service_n.png);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 24px;
          mask-size: 24px;
  background-color: #222;
}
.toolbar-wrap .service-skin .service-wrap {
  position: fixed;
  top: 0;
  right: 0;
  z-index: -1;
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
  padding: 0;
  background-color: var(--PFC);
  border-radius: 8px;
  opacity: 0;
  transition: ease 0.35s;
}
.toolbar-wrap .service-skin .service-wrap > div {
  width: 100%;
  gap: 0;
}
.toolbar-wrap .service-skin .service-wrap > div p {
  width: 100%;
  height: 0;
  color: var(--G00);
  font-size: 0.85rem;
  line-height: 32px;
}
.toolbar-wrap .service-skin .service-wrap > div p a {
  color: var(--G00);
  font-size: 0.85rem;
}
.toolbar-wrap .service-skin .service-wrap > div p a img {
  -o-object-fit: contain;
     object-fit: contain;
  display: inline-block;
  width: 24px;
  height: 24px;
}
.toolbar-wrap .service-skin label:has(input:checked) ~ .service-wrap {
  top: 72px;
  right: 16px;
  z-index: 5;
  padding: 1rem;
  opacity: 1;
}
.toolbar-wrap .service-skin label:has(input:checked) ~ .service-wrap > div {
  width: 100%;
  height: 100%;
  gap: 16px;
}
.toolbar-wrap .service-skin label:has(input:checked) ~ .service-wrap > div p {
  height: 32px;
  line-height: 32px;
}
.toolbar-wrap .readnode-skin .btn-wrap {
  padding: 0;
}

/*HEADER ENDDING*/
/*MAIN BEGIN*/
main {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: calc(100dvh - 60px);
  transition: ease 0.35s;
  /*Navigate Skin(Sidebar Skin)*/
  /*Breadcrumb*/
  /*Stepview*/
  /*Dynamic Sets for Second Page*/
}
main .switch {
  display: none;
}
main .nav-wrap {
  position: fixed;
  z-index: 9;
  width: -moz-max-content;
  width: max-content;
  height: 100%;
  min-height: calc(100dvh - 60px);
  background-color: var(--G80);
  border-right: 1px solid var(--G300);
  /*overflow-y: auto;
  overflow-x: hidden;*/
  /*----Sidebar Skin for Collaps*/
}
main .nav-wrap.collapse {
  top: 0px;
  padding-top: 68px;
  width: 60px;
  min-width: 60px;
}
main .nav-wrap.collapse input[type=checkbox]:checked {
  top: 72px;
  right: 10px;
}
main .nav-wrap input[type=checkbox] {
  position: absolute;
  right: 4px;
  top: 5px;
  z-index: 5;
  width: 40px;
  height: 40px;
  opacity: 0;
  cursor: pointer;
}
main .nav-wrap input[type=checkbox]:checked {
  top: 0px;
  right: 10px;
}
main .nav-wrap .btn-toggle {
  position: absolute;
  right: 8px;
  top: 8px;
}
main .nav-wrap .nav-menu-wrap {
  position: relative;
  width: 250px;
  overflow: hidden;
  transition: ease 0.35s;
}
main .nav-wrap .nav-menu-wrap input[type=checkbox] {
  left: 8px;
  width: calc(100% - 48px);
  height: 48px;
  /*----Sidebar Menu for Expand*/
}
main .nav-wrap .nav-menu-wrap input[type=checkbox]:checked ~ .nav-title-wrap .icon-wrap.toggle-menu {
  transform: rotate(180deg);
}
main .nav-wrap .nav-menu-wrap input[type=checkbox]:checked ~ .nav-submenu-wrap {
  height: 0px;
  overflow-y: hidden;
  z-index: -1;
  padding: 0px;
}
main .nav-wrap .nav-menu-wrap .nav-title-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  padding-left: 8px;
  border-bottom: 1px dashed var(--G300);
}
main .nav-wrap .nav-menu-wrap .nav-title-wrap h2 {
  width: -moz-max-content;
  width: max-content;
  height: 32px;
  line-height: 32px;
  color: var(--G700);
  overflow: hidden;
}
main .nav-wrap .nav-menu-wrap .nav-title-wrap.ebooks h2 ~ .title-icon {
  background-image: url(../images/icon_nav_setbook_n.png);
}
main .nav-wrap .nav-menu-wrap .nav-title-wrap.tickets h2 ~ .title-icon {
  background-image: url(../images/icon_nav_tickets_n.png);
}
main .nav-wrap .nav-menu-wrap .nav-title-wrap.report h2 ~ .title-icon {
  background-image: url(../images/icon_nav_report_n.png);
}
main .nav-wrap .nav-menu-wrap .nav-title-wrap.account h2 ~ .title-icon {
  background-image: url(../images/icon_nav_account_n.png);
}
main .nav-wrap .nav-menu-wrap .nav-submenu-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  overflow-y: hidden;
  padding: 8px 0px 24px 48px;
  background-color: var(--G80);
  transition: ease 0.35s;
}
main .nav-wrap .nav-menu-wrap .nav-submenu-wrap li {
  line-height: 32px;
  cursor: pointer;
}
main .nav-wrap .nav-menu-wrap .nav-submenu-wrap li:hover, main .nav-wrap .nav-menu-wrap .nav-submenu-wrap li.active {
  color: var(--PSC);
}
main .nav-wrap .nav-menu-wrap .nav-submenu-wrap li.active {
  border-right: 4px solid var(--PSC);
}
main .nav-wrap input[type=checkbox]:hover ~ .nav-title-wrap > h2 {
  color: var(--PFC);
}
main .nav-wrap input[type=checkbox]:checked ~ .btn-toggle {
  top: 78px;
  right: inherit;
  left: 50%;
  transform: translateX(-50%);
}
main .nav-wrap input[type=checkbox]:checked ~ .btn-toggle .icon-wrap.toggle-skin {
  background-image: url(../images/icon_nav_toggle_a.png);
}
main .nav-wrap input[type=checkbox]:checked ~ .nav-menu-wrap {
  width: 60px;
  min-width: 60px;
  overflow: hidden;
  /*----Dynamic Sets*/
}
main .nav-wrap input[type=checkbox]:checked ~ .nav-menu-wrap.first {
  padding-top: 48px;
}
main .nav-wrap input[type=checkbox]:checked ~ .nav-menu-wrap input[type=checkbox] {
  display: none;
}
main .nav-wrap input[type=checkbox]:checked ~ .nav-menu-wrap .icon-wrap.toggle-menu {
  display: none;
}
main .nav-wrap input[type=checkbox]:checked ~ .nav-menu-wrap .nav-title-wrap {
  justify-content: center;
  padding: 0px;
}
main .nav-wrap input[type=checkbox]:checked ~ .nav-menu-wrap .nav-title-wrap h2 {
  width: 0px;
}
main .nav-wrap input[type=checkbox]:checked ~ .nav-menu-wrap .nav-submenu-wrap {
  position: fixed;
  left: 64px;
  transform: translateY(-48px);
  z-index: -1;
  width: -moz-max-content;
  width: max-content;
  min-width: 236px;
  height: 0px;
  padding: 0px 24px 0px;
  box-sizing: border-box;
  box-shadow: 2px 2px 3px 0px rgba(186, 186, 186, 0.25);
  opacity: 0;
  transition: ease 0.35s;
}
main .nav-wrap input[type=checkbox]:checked ~ .nav-menu-wrap .nav-submenu-wrap::before {
  content: "";
  position: relative;
  display: block;
  margin: -48px 0px 8px;
  padding: 0px 8px 8px;
  border-bottom: 1px solid var(--G200);
  color: var(--G700);
  font-size: 20px;
  font-weight: 700;
}
main .nav-wrap input[type=checkbox]:checked ~ .nav-menu-wrap .nav-submenu-wrap::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 24px;
  display: block;
  width: 32px;
  height: 32px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
}
main .nav-wrap input[type=checkbox]:checked ~ .nav-menu-wrap .nav-submenu-wrap:hover {
  transform: translateY(-50px);
  opacity: 1;
  z-index: 1;
  height: auto;
  padding: 56px 16px 24px;
}
main .nav-wrap input[type=checkbox]:checked ~ .nav-menu-wrap .nav-submenu-wrap li.active {
  position: relative;
  width: 100%;
  border-right: 1px solid transparent;
}
main .nav-wrap input[type=checkbox]:checked ~ .nav-menu-wrap .nav-title-wrap:hover ~ .nav-submenu-wrap {
  transform: translateY(-50px);
  opacity: 1;
  z-index: 1;
  height: auto;
  padding: 56px 16px 24px;
}
main .nav-wrap input[type=checkbox]:checked ~ .nav-menu-wrap .nav-title-wrap.ebooks ~ .nav-submenu-wrap::before {
  content: "電子書管理";
}
main .nav-wrap input[type=checkbox]:checked ~ .nav-menu-wrap .nav-title-wrap.ebooks ~ .nav-submenu-wrap::after {
  background-image: url(../images/icon_nav_setbook_n.png);
}
main .nav-wrap input[type=checkbox]:checked ~ .nav-menu-wrap .nav-title-wrap.tickets ~ .nav-submenu-wrap::before {
  content: "序號兌換與管理";
}
main .nav-wrap input[type=checkbox]:checked ~ .nav-menu-wrap .nav-title-wrap.tickets ~ .nav-submenu-wrap::after {
  background-image: url(../images/icon_nav_tickets_n.png);
}
main .nav-wrap input[type=checkbox]:checked ~ .nav-menu-wrap .nav-title-wrap.report ~ .nav-submenu-wrap::before {
  content: "報表管理";
}
main .nav-wrap input[type=checkbox]:checked ~ .nav-menu-wrap .nav-title-wrap.report ~ .nav-submenu-wrap::after {
  background-image: url(../images/icon_nav_report_n.png);
}
main .nav-wrap input[type=checkbox]:checked ~ .nav-menu-wrap .nav-title-wrap.account ~ .nav-submenu-wrap::before {
  content: "系統管理";
}
main .nav-wrap input[type=checkbox]:checked ~ .nav-menu-wrap .nav-title-wrap.account ~ .nav-submenu-wrap::after {
  background-image: url(../images/icon_nav_account_n.png);
}
main .content {
  position: relative;
  width: calc(100% - 251px);
  margin-left: 251px;
  padding: 16px 32px;
  background-color: var(--G100);
  transition: ease 0.35s;
  overflow-x: hidden;
  /*主畫面首頁*/
}
main .content.collapse {
  width: calc(100% - 60px);
  min-width: 1280px;
  margin-left: 60px;
}
main .content.index {
  display: flex;
  justify-content: center;
  align-items: center;
}
main .content.index h2 {
  position: relative;
  transform: translateY(-64px);
  color: var(--G700);
  mix-blend-mode: multiply;
  z-index: 1;
}
main .content.index h2::before {
  content: "歡迎使用";
  display: block;
  font-size: 48px;
  font-weight: 700;
  text-align: center;
}
main .content.index h2::after {
  content: "TRMS出版品與教師資源管理系統";
  display: block;
  width: 100%;
  font-size: 72px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
main .content.index::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: auto;
  background-repeat: no-repeat;
  background-image: url(https://picsum.photos/1920/1080);
  opacity: 0.5;
}
main .content .service-wrap {
  display: none;
}
main .content .service-wrap > div {
  display: flex;
  flex-direction: column;
}
main .breadcrumb-wrap {
  position: relative;
  z-index: 9;
  padding: 0px 0px 24px;
}
main .breadcrumb-wrap > div {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: -moz-max-content;
  width: max-content;
  padding-left: 16px;
  /*----Dynamic Sets for Mian Link*/
  /*----Dynamic Sets for Fuction */
}
main .breadcrumb-wrap > div.sublink {
  display: inline-block;
}
main .breadcrumb-wrap > div.sublink > a {
  cursor: auto;
}
main .breadcrumb-wrap > div.fuctionlink {
  display: none;
}
main .breadcrumb-wrap > div > a {
  position: relative;
  line-height: 32px;
  color: var(--G500);
  cursor: pointer;
}
main .breadcrumb-wrap > div > a.active {
  color: var(--PFC);
}
main .breadcrumb-wrap > div > a:hover {
  color: var(--PFC);
}
main .breadcrumb-wrap > div > a::after {
  content: "/";
  position: absolute;
  left: -16px;
  top: -5px;
  display: block;
  color: var(--G500) !important;
  cursor: auto;
}
main .breadcrumb-wrap > div > a .icon-wrap.toggle-menu {
  transform: rotate(180deg);
}
main .breadcrumb-wrap > div > p {
  position: relative;
  line-height: 32px;
  color: var(--G500);
}
main .breadcrumb-wrap > div > p::after {
  content: "/";
  position: absolute;
  left: -16px;
  top: 0px;
  display: block;
  color: var(--G500) !important;
  cursor: auto;
}
main .breadcrumb-wrap > div:nth-child(1) a::after {
  display: none;
}
main .breadcrumb-wrap > div > a.expand .icon-wrap.toggle-menu,
main .breadcrumb-wrap > div > a:active .icon-wrap.toggle-menu {
  transform: rotate(0deg);
}
main .breadcrumb-wrap > div > a.expand ~ .sub-menu,
main .breadcrumb-wrap > div > a:active ~ .sub-menu {
  opacity: 1;
  z-index: 1;
  height: -moz-max-content;
  height: max-content;
  padding: 8px 24px 8px 16px;
}
main .breadcrumb-wrap > div.edit-metadata > a::before {
  content: "編輯資料";
}
main .breadcrumb-wrap > div.upload-metadata > a::before {
  content: "相關附件";
}
main .breadcrumb-wrap > div.creat-link > a::before {
  content: "參考網址";
}
main .breadcrumb-wrap > div.edit-navmenu > a::before {
  content: "編輯管理";
}
main .breadcrumb-wrap.fuction-page .sublink a {
  cursor: pointer;
}
main .breadcrumb-wrap.fuction-page .fuctionlink {
  display: inline-block;
}
main .breadcrumb-wrap.fuction-page .fuctionlink a {
  cursor: auto;
}
main .step-wrap {
  position: absolute;
  top: -2px;
  right: 32px;
  display: flex;
  flex-direction: row;
  width: -moz-max-content;
  width: max-content;
  padding: 16px 0px;
}
main .step-wrap > div {
  width: -moz-max-content;
  width: max-content;
  padding: 4px 16px;
  margin-left: 16px;
  text-align: center;
  background-color: var(--G00);
  border: 1px solid var(--G300);
  border-radius: 4px;
}
main .step-wrap > div.active {
  background-color: var(--PFC);
  border: var(--PFC);
  color: var(--G80);
}
main .step-wrap > div.finish {
  background-color: var(--G80);
  color: var(--G400);
}
main .step-wrap > div p {
  margin-bottom: -8px;
}
main .content.second-page .breadcrumb-wrap div.sublink {
  display: inline-block !important;
}

/*Corresponding - Fuction TITLE*/
.content-module {
  position: relative;
  display: block;
  min-width: 1140px;
  min-height: 70dvh;
  padding: 16px 24px;
  background-color: var(--G00);
  box-shadow: 1px 2px 3px 0px rgba(186, 186, 186, 0.25);
  /*Fuction Title*/
}
.content-module .fuction-title-wrap {
  position: relative;
  width: 100%;
  padding: 0px 24px;
}
.content-module .fuction-title-wrap .title,
.content-module .fuction-title-wrap .annotation {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: -moz-max-content;
  width: max-content;
  margin-left: 16px;
  padding: 2px 16px;
  line-height: 32px;
  background-color: var(--G00);
}
.content-module .fuction-title-wrap .annotation {
  margin-left: -16px;
}
.content-module .fuction-title-wrap .hr {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  width: 100%;
  height: 1px;
  background-color: var(--G500);
}
.content-module .fuction-title-wrap .hr::before, .content-module .fuction-title-wrap .hr::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 7px;
  height: 7px;
  background-color: var(--G500);
  border-radius: 20px;
}
.content-module .fuction-title-wrap .hr::after {
  left: auto;
  right: 0;
}

/*Corresponding - Dynamic TITLE Sets*/
.content-module {
  /*----Dynamic Sets for Module-B Title & Annotation*/
  /*----Dynamic Sets for Module-C Title & Annotation*/
  /*----Dynamic Sets for Module-E Title & Annotation*/
}
.content-module.module-B1 .fuction-title-wrap .title::before {
  content: "上架前置作業";
}
.content-module.module-B1 .fuction-title-wrap .annotation::before {
  content: "更新書籍的待補資料、附件和教學資源";
}
.content-module.module-B1 .from-wrap .publication-date,
.content-module.module-B1 .from-wrap .item-status.from1,
.content-module.module-B1 .from-wrap .release-date,
.content-module.module-B1 .from-wrap .removal-date,
.content-module.module-B1 .from-wrap .item-status-sets {
  display: none !important;
}
.content-module.module-B2 .fuction-title-wrap .title::before {
  content: "已上架資料維護";
}
.content-module.module-B2 .fuction-title-wrap .annotation::before {
  content: "";
}
.content-module.module-B2 .from-wrap .review,
.content-module.module-B2 .from-wrap .publication-date,
.content-module.module-B2 .from-wrap .removal-date,
.content-module.module-B2 .from-wrap .item-status-sets,
.content-module.module-B2 .from-wrap .item-status.from2 {
  display: none !important;
}
.content-module.module-B3 .from-module > ul.title .from-option.booktitle {
  cursor: pointer;
}
.content-module.module-B3 .from-module > ul.title .from-option.booktitle::after {
  opacity: 1;
}
.content-module.module-B3 .fuction-title-wrap .title::before {
  content: "狀態維護";
}
.content-module.module-B3 .fuction-title-wrap .annotation::before {
  content: "";
}
.content-module.module-B3 .from-wrap .publication-date,
.content-module.module-B3 .from-wrap .resource-quantity,
.content-module.module-B3 .from-wrap .review,
.content-module.module-B3 .from-wrap .item-status.from2,
.content-module.module-B3 .from-wrap .fuction {
  display: none !important;
}
.content-module.module-B4 .from-module > ul.title .from-option.booktitle {
  cursor: pointer;
}
.content-module.module-B4 .from-module > ul.title .from-option.booktitle::after {
  opacity: 1;
}
.content-module.module-B4 .fuction-title-wrap .title::before {
  content: "書籍清單查詢";
}
.content-module.module-B4 .fuction-title-wrap .annotation::before {
  content: "";
}
.content-module.module-B4 .from-wrap .export-bar-wrap {
  visibility: hidden;
}
.content-module.module-B4 .from-wrap .item-status.from2,
.content-module.module-B4 .from-wrap .fuction,
.content-module.module-B4 .from-wrap .item-status-sets {
  display: none !important;
}
.content-module.module-C1 .fuction-title-wrap .title::before {
  content: "申請與匯出";
}
.content-module.module-C1 .fuction-title-wrap .annotation::before {
  content: "";
}
.content-module.module-C2 .fuction-title-wrap .title::before {
  content: "使用資料回饋";
}
.content-module.module-C2 .fuction-title-wrap .annotation::before {
  content: "更新兌換序號的贈送或銷貨日期、發送對象姓名、發送 Email";
}
.content-module.module-C3 .fuction-title-wrap .title::before {
  content: "使用狀態查詢";
}
.content-module.module-C3 .fuction-title-wrap .annotation::before {
  content: "";
}
.content-module.module-C4 .fuction-title-wrap .title span::before {
  content: "";
  margin-left: 8px;
}
.content-module.module-C4 .fuction-title-wrap .title strong {
  padding: 0px 16px;
  border-radius: 5px;
  cursor: pointer;
}
.content-module.module-C4 .fuction-title-wrap .title strong:hover {
  color: var(--G00);
  background-color: var(--PTC) !important;
}
.content-module.module-C4 .fuction-title-wrap .title strong.page1::before {
  content: "序號狀態維護";
}
.content-module.module-C4 .fuction-title-wrap .title strong.page2::before {
  content: "批次修改序號使用狀態";
}
.content-module.module-C4 .fuction-title-wrap.page1 .title strong.page1 {
  color: var(--G00);
  background-color: var(--PFC);
}
.content-module.module-C4 .fuction-title-wrap.page1 .annotation::before {
  content: "用於贈送序號的教學資源開啟、延長贈送序號使用期限、所有序號的註銷";
}
.content-module.module-C4 .fuction-title-wrap.page2 .title strong.page2 {
  color: var(--G00);
  background-color: var(--PFC);
}
.content-module.module-C4 .fuction-title-wrap.page2 .annotation::before {
  content: "用於批次修改序號 - 延長使用期限、開啟完整版教學資源、是否註銷、註銷原因";
}
.content-module.module-C5 .fuction-title-wrap .title::before {
  content: "查詢與維護-業務用";
}
.content-module.module-C5 .fuction-title-wrap .annotation::before {
  content: "";
}
.content-module.module-E1 .fuction-title-wrap .title::before {
  content: "功能選單列表";
}
.content-module.module-E1.editing .fuction-title-wrap .title::before {
  content: "選單內容維護";
}
.content-module.module-E2 .fuction-title-wrap .title::before {
  content: "角色與權限維護";
}
.content-module.module-E3 .fuction-title-wrap .title::before {
  content: "使用者帳戶維護";
}
.content-module.module-E4 .fuction-title-wrap .title::before {
  content: "出版單位維護";
}
.content-module.module-E5 .fuction-title-wrap .title::before {
  content: "欄位預設值維護列表";
}

/*Corresponding - Main Fuction*/
.content-module {
  /*Main Fuction Area*/
}
.content-module .main-fuction-wrap {
  position: relative;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 16px 0px;
}
.content-module .main-fuction-wrap .fuction-list {
  display: none;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 16px;
  /*Search Bar*/
  /*Sort Bar*/
  /*Export Bar*/
  /*Page Switching Bar*/
}
.content-module .main-fuction-wrap .fuction-list.advanced {
  display: none;
}
.content-module .main-fuction-wrap .fuction-list .search-bar-wrap,
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap {
  position: relative;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  display: none;
}
.content-module .main-fuction-wrap .fuction-list .search-bar-wrap > label,
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: inherit;
  height: 48px;
  padding: 0px 32px 0px 5px;
  border-radius: 32px;
  background-color: var(--G100);
}
.content-module .main-fuction-wrap .fuction-list .search-bar-wrap > label > .search,
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label > .search,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label > .search {
  background-color: var(--G00);
}
.content-module .main-fuction-wrap .fuction-list .search-bar-wrap > label input[type=search],
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label input[type=search],
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label input[type=search] {
  display: inline-block;
  width: 360px;
  padding-left: 16px;
  line-height: 40px;
  background-color: transparent;
}
.content-module .main-fuction-wrap .fuction-list .search-bar-wrap > label .btn.clear,
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label .btn.clear,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label .btn.clear {
  position: relative;
  opacity: 0;
  z-index: -1;
  transition: ease 0.35s;
}
.content-module .main-fuction-wrap .fuction-list .search-bar-wrap > label .btn.clear.show,
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label .btn.clear.show,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label .btn.clear.show {
  opacity: 1;
  z-index: 2;
}
.content-module .main-fuction-wrap .fuction-list .search-bar-wrap > label .btn-filter,
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label .btn-filter,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label .btn-filter {
  position: relative;
  display: none;
  min-width: 96px;
  margin-left: 0px;
}
.content-module .main-fuction-wrap .fuction-list .search-bar-wrap > label .btn-filter > label,
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label .btn-filter > label,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label .btn-filter > label {
  display: flex;
  align-items: center;
  height: 32px;
}
.content-module .main-fuction-wrap .fuction-list .search-bar-wrap > label .btn-filter > label input,
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label .btn-filter > label input,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label .btn-filter > label input {
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 100%;
  background-color: transparent;
  opacity: 0;
  color: var(--G500);
  cursor: pointer;
}
.content-module .main-fuction-wrap .fuction-list .search-bar-wrap > label .btn-filter > label input:checked ~ span.icon-wrap,
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label .btn-filter > label input:checked ~ span.icon-wrap,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label .btn-filter > label input:checked ~ span.icon-wrap {
  transform: rotate(0deg);
}
.content-module .main-fuction-wrap .fuction-list .search-bar-wrap > label .btn-filter > label input:checked ~ ul,
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label .btn-filter > label input:checked ~ ul,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label .btn-filter > label input:checked ~ ul {
  z-index: 2;
  opacity: 1;
  width: calc(100% + 16px);
  min-width: 192px;
  height: -moz-max-content;
  height: max-content;
  border: 1px solid var(--G400);
}
.content-module .main-fuction-wrap .fuction-list .search-bar-wrap > label .btn-filter > label > p.option-value,
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label .btn-filter > label > p.option-value,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label .btn-filter > label > p.option-value {
  width: -moz-max-content;
  width: max-content;
  padding-left: 16px;
  border-left: 1px solid var(--G500);
}
.content-module .main-fuction-wrap .fuction-list .search-bar-wrap > label .btn-filter > label span.icon-wrap,
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label .btn-filter > label span.icon-wrap,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label .btn-filter > label span.icon-wrap {
  position: absolute;
  top: 0;
  transform: rotate(180deg);
  right: 8px;
  z-index: 3;
  transition: ease 0.35s;
}
.content-module .main-fuction-wrap .fuction-list .search-bar-wrap > label .btn-filter > label > ul,
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label .btn-filter > label > ul,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label .btn-filter > label > ul {
  position: absolute;
  top: 32px;
  right: 0;
  z-index: -1;
  opacity: 0;
  min-width: 100%;
  max-height: 200px;
  height: 0px;
  border: 0 none;
  background-color: var(--G00);
  box-shadow: 2px 2px 3px 0px rgba(186, 186, 186, 0.25);
  overflow-x: hidden;
  overflow-y: hidden;
  transition: all 0.35s;
}
.content-module .main-fuction-wrap .fuction-list .search-bar-wrap > label .btn-filter > label > ul li,
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label .btn-filter > label > ul li,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label .btn-filter > label > ul li {
  font-size: 14px !important;
  padding: 4px 16px;
  border: none;
  background-color: var(--G00);
  cursor: pointer;
}
.content-module .main-fuction-wrap .fuction-list .search-bar-wrap > label .btn-filter > label > ul li:hover, .content-module .main-fuction-wrap .fuction-list .search-bar-wrap > label .btn-filter > label > ul li:active, .content-module .main-fuction-wrap .fuction-list .search-bar-wrap > label .btn-filter > label > ul li:focus,
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label .btn-filter > label > ul li:hover,
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label .btn-filter > label > ul li:active,
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label .btn-filter > label > ul li:focus,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label .btn-filter > label > ul li:hover,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label .btn-filter > label > ul li:active,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label .btn-filter > label > ul li:focus {
  color: var(--PFC);
  background-color: var(--G80);
}
.content-module .main-fuction-wrap .fuction-list .search-bar-wrap {
  display: flex;
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap {
  display: none;
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label {
  max-width: 600px;
  padding-right: 0px;
  background-color: transparent;
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label::before,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label::before {
  content: "";
  position: absolute;
  left: 44px;
  width: 32px;
  height: 32px;
  background-position: center;
  background-size: 24px;
  background-repeat: no-repeat;
  background-image: url(../images/icon_sort_n.png);
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label input[type=checkbox],
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label input[type=checkbox] {
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 100%;
  background-color: transparent;
  opacity: 0;
  color: var(--G500);
  cursor: pointer;
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label input[type=checkbox]:hover ~ .bar-title,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label input[type=checkbox]:hover ~ .bar-title {
  opacity: 1;
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label input[type=checkbox]:checked ~ span.icon-wrap,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label input[type=checkbox]:checked ~ span.icon-wrap {
  transform: rotate(0deg);
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label input[type=checkbox]:checked ~ ul,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label input[type=checkbox]:checked ~ ul {
  z-index: 2;
  opacity: 1;
  width: calc(100% - 85px);
  height: -moz-max-content;
  height: max-content;
  border: 1px solid var(--G400);
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label .bar-title,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label .bar-title {
  opacity: 0;
  margin-right: 48px;
  transition: ease 0.35s;
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label > p.option-value,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label > p.option-value {
  position: relative;
  min-width: 260px;
  height: 40px;
  padding: 0px 40px 0px 16px;
  border: 1px solid var(--G400);
  line-height: 40px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
  text-align: left;
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label span.icon-wrap,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label span.icon-wrap {
  position: absolute;
  right: 8px;
  transform: rotate(180deg);
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label > ul,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label > ul {
  position: absolute;
  top: 43px;
  right: 0;
  z-index: -1;
  opacity: 0;
  min-width: inherit;
  max-height: 200px;
  height: 0px;
  border: 0 none;
  background-color: var(--G00);
  box-shadow: 2px 2px 3px 0px rgba(186, 186, 186, 0.25);
  overflow-x: hidden;
  overflow-y: hidden;
  transition: all 0.35s;
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label > ul li,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label > ul li {
  font-size: 14px !important;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label > ul li:hover, .content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label > ul li:active, .content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label > ul li:focus,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label > ul li:hover,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label > ul li:active,
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label > ul li:focus {
  color: var(--PFC);
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label > ul li:nth-child(odd),
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label > ul li:nth-child(odd) {
  background-color: var(--G00);
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap {
  display: flex;
  visibility: hidden;
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label {
  max-width: 260px;
  padding: 0px;
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label::before {
  content: "";
  display: none;
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label > p.option-value {
  font-size: 14px;
  min-width: 96px;
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap > label > ul {
  width: 100% !important;
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap .btn-wrap {
  position: absolute;
  right: -108px;
  min-width: 96px;
  padding: 4px 16px;
  border-radius: 4px;
  background-color: var(--PFC);
  color: var(--G00);
}
.content-module .main-fuction-wrap .fuction-list .export-bar-wrap .btn-wrap span::after {
  content: "匯出";
  font-size: 14px;
  line-height: 32px;
}
.content-module .main-fuction-wrap .fuction-list .page-module-wrap {
  display: none;
  justify-content: end;
}
.content-module .main-fuction-wrap .fuction-list .page-module-wrap label {
  position: relative;
}
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > p {
  font-size: 14px;
  white-space: nowrap;
  line-height: 32px;
}
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > p strong {
  display: inline-block;
  width: -moz-max-content;
  width: max-content;
  margin: 0px 4px;
  color: var(--ALC);
}
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > p strong.page-active::after {
  content: "/";
  margin-left: 4px;
  margin-right: -4px;
  color: var(--G500);
}
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > p strong.page-total::after {
  content: "｜";
  margin: 0 0 0 8px;
  color: var(--G500);
}
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > p a {
  position: relative;
  display: inline-block;
}
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > p a.btn-prev::after {
  content: "　";
  margin: 0px;
}
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > p a.disabled {
  cursor: auto;
  color: var(--G300) !important;
}
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label {
  max-width: 144px;
  padding: 0 0 0 8px;
}
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label::before {
  content: "";
  display: none;
}
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label::after {
  content: "｜";
  margin: 0 16px 0 8px;
}
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label input {
  width: 86px;
  height: 40px;
  margin-right: 4px;
  padding: 0px 32px 0px 8px;
  border: 1px solid var(--G400);
  line-height: 40px;
  text-align: left;
  overflow-x: hidden;
}
.content-module .main-fuction-wrap .fuction-list .page-module-wrap > label span.icon-wrap {
  right: 48px;
  transform: rotate(90deg);
}
.content-module .main-fuction-wrap .fuction-list .page-module-wrap.onlyone > label {
  max-width: 96px;
}
.content-module .main-fuction-wrap .fuction-list .page-module-wrap.onlyone > label span {
  right: 16px;
}
.content-module .main-fuction-wrap .fuction-list .page-module-wrap.onlyone > label::after {
  display: none;
}
.content-module .main-fuction-wrap .fuction-list .page-module-wrap.onlyone .page-switching {
  display: none;
}

/*Corresponding - Dynamic Main Fuction Sets*/
.content-module {
  /*Public for Search Bar*/
  /*for B Mode*/
  /*for C Mode*/
  /*Airiti Admin*/
}
.content-module .main-fuction-wrap .fuction-list {
  /*Search Bar*/
  /*Advanced Search View*/
}
.content-module .main-fuction-wrap .fuction-list.search {
  display: flex;
}
.content-module .main-fuction-wrap .fuction-list.search .search-bar-wrap > label input[type=search] {
  width: 420px;
}
.content-module .main-fuction-wrap .fuction-list.advanced {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  height: 0px;
  margin-bottom: 0;
  padding: 0px 16px;
}
.content-module .main-fuction-wrap .fuction-list.advanced.active {
  z-index: 1;
  height: auto;
  margin-bottom: 16px;
}
.content-module .main-fuction-wrap .fuction-list.advanced.active > .title p {
  color: var(--PFC);
}
.content-module .main-fuction-wrap .fuction-list.advanced.active > .title span {
  background-image: url(../images/icon_tg_collapse_n.png);
}
.content-module .main-fuction-wrap .fuction-list.advanced > input[type=checkbox] {
  position: absolute;
  top: -64px;
  left: 540px;
  z-index: 5;
  width: 100%;
  max-width: 128px;
  height: 48px;
  opacity: 0;
  cursor: pointer;
}
.content-module .main-fuction-wrap .fuction-list.advanced > input[type=checkbox]:hover ~ .title > p {
  color: var(--PFC);
}
.content-module .main-fuction-wrap .fuction-list.advanced > input[type=checkbox]:hover ~ .title > span {
  background-image: url(../images/icon_tg_collapse_n.png);
}
.content-module .main-fuction-wrap .fuction-list.advanced > input[type=checkbox]:checked ~ .opction-skin {
  display: flex;
}
.content-module .main-fuction-wrap .fuction-list.advanced > input[type=checkbox]:checked ~ .title span {
  transform: rotate(0deg);
}
.content-module .main-fuction-wrap .fuction-list.advanced > .title {
  position: relative;
  transform: translate(540px, 0px);
  display: flex;
  justify-content: start;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 48px;
  margin-top: -64px;
  margin-bottom: 8px;
}
.content-module .main-fuction-wrap .fuction-list.advanced > .title > p {
  padding-right: 0;
}
.content-module .main-fuction-wrap .fuction-list.advanced > .title > span {
  transform: rotate(180deg);
  transition: ease 0.35s;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin {
  position: relative;
  display: none;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  padding: 16px 24px 0;
  background-color: var(--G100);
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin .title {
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: 48px;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin .title p {
  z-index: 1;
  width: -moz-max-content;
  width: max-content;
  padding-right: 16px;
  background-color: var(--G00);
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin .title span::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  z-index: 0;
  display: block;
  width: calc(100% - 40px);
  height: 1px;
  background-color: var(--G700);
  display: none;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 {
  display: none;
  padding: 16px 24px 8px;
  border-bottom: 1px dashed var(--G300);
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap {
  position: relative;
  align-items: center;
  align-items: center;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap .title {
  width: 100%;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap.publisher {
  display: none;
  width: 44%;
  margin-right: 12px;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap.publisher .title {
  max-width: 92px;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap.publisher::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 32px;
  border-right: 1px dashed var(--G300);
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap.publisher label {
  width: 100%;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap.publisher label > p {
  width: 100%;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap.publisher label ul.filter-option {
  width: calc(100% - 0px);
  max-height: 640px;
  overflow-y: auto;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group1:has(label input[type=checkbox]:checked)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  height: calc(100% + 320px);
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group1:has(label input[type=checkbox]:checked) ~ .group2 {
  z-index: -1;
  opacity: 0.5;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 {
  display: none;
  width: 100%;
  margin: 0 0 16px;
  padding-top: 8px;
  padding-bottom: 32px;
  border-radius: 0 0 10px 10px;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap {
  display: flex;
  flex-direction: column;
  min-width: 32%;
  min-height: 100px;
  padding-right: 16px;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap:nth-child(2) {
  width: 65%;
  padding-left: 16px;
  border-right: none;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap .title {
  width: -moz-max-content;
  width: max-content;
  max-width: 64px;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap label {
  margin-right: 0px;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap.period .title {
  min-width: 120px;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap.period .input-wrap label {
  margin-right: 8px;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap.period .input-wrap label:nth-last-of-type(1) {
  margin: 0 0 0 8px;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap.period .input-wrap label input {
  width: 200px;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap.period .input-wrap .date {
  display: block;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap.period .input-wrap:nth-last-of-type(1) .title {
  margin-right: 8px;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap.period .criteria-wrap {
  position: relative;
  flex-direction: row;
  height: 48px;
  min-height: auto !important;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap.period .criteria-wrap > div {
  position: relative;
  display: flex;
  align-items: center;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap.period .criteria-wrap > div:nth-child(2) {
  margin-left: 32px;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap.period .criteria-wrap > div:nth-child(2) .title {
  min-width: inherit;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap.period .criteria-wrap > div.disabled {
  z-index: 0;
  opacity: 0.2;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap.period .criteria-wrap > div.disabled::before {
  content: "";
  position: absolute;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap.period .criteria-wrap > div.disabled input {
  z-index: 0;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap.period .criteria-wrap .title {
  margin-right: 8px;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap.period .criteria-wrap label {
  margin: 0;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap .input-wrap.books-status {
  display: flex;
  align-items: center;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap .input-wrap.books-status label {
  gap: 4px;
  width: -moz-max-content;
  width: max-content;
  margin: 0 24px 0 0 !important;
  cursor: pointer;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap .input-wrap.books-status label input[type=radio] {
  width: 20px;
  height: 20px;
  margin-right: 4px;
  border: none !important;
  outline: none !important;
  cursor: pointer;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin .criteria-wrap {
  display: flex;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin .criteria-wrap label {
  position: relative;
  display: flex;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 40px;
  margin-right: 16px;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin .criteria-wrap label > p {
  width: -moz-max-content;
  width: max-content;
  margin-left: 8px;
  padding: 0px 40px 0px 16px;
  line-height: 40px;
  background-color: var(--G00);
  border: 1px solid var(--G400);
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin .criteria-wrap label .icon-wrap {
  position: absolute;
  right: 4px;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin .criteria-wrap label .icon-wrap.toggle-menu-blk {
  transform: rotate(180deg);
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin .criteria-wrap label ul.filter-option {
  position: absolute;
  top: 40px;
  right: 0;
  z-index: -1;
  width: 202px;
  height: 0;
  transition: ease 0.35s;
  opacity: 0;
  overflow-y: hidden;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin .criteria-wrap label ul.filter-option li {
  width: 100%;
  margin-top: -1px;
  box-sizing: border-box;
  cursor: pointer;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin .criteria-wrap label ul.filter-option p {
  padding: 0 8px;
  line-height: 40px;
  background-color: var(--G80);
  border: 1px solid var(--G400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin .criteria-wrap label input[type=checkbox] {
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin .criteria-wrap label input[type=checkbox]:checked ~ ul.filter-option {
  top: 41px;
  z-index: 1;
  height: 100%;
  overflow-y: visible;
  opacity: 1;
}
.content-module .main-fuction-wrap .fuction-list.advanced .opction-skin .criteria-wrap label input[type=checkbox]:checked ~ span.icon-wrap {
  transform: rotate(0deg);
  transition: ease 0.35s;
}
.content-module .main-fuction-wrap .fuction-list.advanced .fuction-wrap {
  display: flex;
  position: absolute;
  width: -moz-max-content;
  width: max-content;
  right: 40px;
  bottom: 20px;
}
.content-module .main-fuction-wrap .fuction-list.advanced .fuction-wrap .btn-wrap .btn {
  min-width: initial;
}
.content-module .main-fuction-wrap .fuction-list.advanced .fuction-wrap .btn-wrap.cancel .btn {
  color: var(--G500);
  border: 1px solid var(--G500);
  background-color: var(--G00);
}
.content-module.module-B1 .main-fuction-wrap, .content-module.module-B2 .main-fuction-wrap, .content-module.module-B3 .main-fuction-wrap, .content-module.module-B4 .main-fuction-wrap, .content-module.module-B5 .main-fuction-wrap {
  align-items: start;
}
.content-module.module-B1 .main-fuction-wrap .fuction-list.search .search-bar-wrap .btn-filter, .content-module.module-B2 .main-fuction-wrap .fuction-list.search .search-bar-wrap .btn-filter, .content-module.module-B3 .main-fuction-wrap .fuction-list.search .search-bar-wrap .btn-filter, .content-module.module-B4 .main-fuction-wrap .fuction-list.search .search-bar-wrap .btn-filter, .content-module.module-B5 .main-fuction-wrap .fuction-list.search .search-bar-wrap .btn-filter {
  display: none;
}
.content-module.module-B1 .main-fuction-wrap .fuction-list.advanced, .content-module.module-B2 .main-fuction-wrap .fuction-list.advanced, .content-module.module-B3 .main-fuction-wrap .fuction-list.advanced, .content-module.module-B4 .main-fuction-wrap .fuction-list.advanced, .content-module.module-B5 .main-fuction-wrap .fuction-list.advanced {
  max-width: 720px;
}
.content-module.module-B1 .main-fuction-wrap .fuction-list.advanced .opction-skin .criteria-wrap, .content-module.module-B2 .main-fuction-wrap .fuction-list.advanced .opction-skin .criteria-wrap, .content-module.module-B3 .main-fuction-wrap .fuction-list.advanced .opction-skin .criteria-wrap, .content-module.module-B4 .main-fuction-wrap .fuction-list.advanced .opction-skin .criteria-wrap, .content-module.module-B5 .main-fuction-wrap .fuction-list.advanced .opction-skin .criteria-wrap {
  max-width: 560px;
}
.content-module.module-B1 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1, .content-module.module-B2 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1, .content-module.module-B3 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1, .content-module.module-B4 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1, .content-module.module-B5 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 {
  display: none !important;
}
.content-module.module-B1 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2, .content-module.module-B2 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2, .content-module.module-B3 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2, .content-module.module-B4 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2, .content-module.module-B5 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 {
  padding-right: 48px;
  padding-bottom: 96px;
}
.content-module.module-B1 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap, .content-module.module-B2 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap, .content-module.module-B3 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap, .content-module.module-B4 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap, .content-module.module-B5 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap {
  width: 100%;
  padding: 0;
  border: none;
}
.content-module.module-B1 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap.period, .content-module.module-B2 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap.period, .content-module.module-B3 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap.period, .content-module.module-B4 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap.period, .content-module.module-B5 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap.period {
  display: none;
}
.content-module.module-B1 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap label, .content-module.module-B2 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap label, .content-module.module-B3 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap label, .content-module.module-B4 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap label, .content-module.module-B5 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap label {
  width: 100%;
  max-width: inherit;
}
.content-module.module-B1 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap .input-wrap.books-status, .content-module.module-B2 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap .input-wrap.books-status, .content-module.module-B3 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap .input-wrap.books-status, .content-module.module-B4 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap .input-wrap.books-status, .content-module.module-B5 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap .input-wrap.books-status {
  display: none;
}
.content-module.module-B1 .main-fuction-wrap .fuction-list.advanced .fuction-wrap, .content-module.module-B2 .main-fuction-wrap .fuction-list.advanced .fuction-wrap, .content-module.module-B3 .main-fuction-wrap .fuction-list.advanced .fuction-wrap, .content-module.module-B4 .main-fuction-wrap .fuction-list.advanced .fuction-wrap, .content-module.module-B5 .main-fuction-wrap .fuction-list.advanced .fuction-wrap {
  right: 48px;
  bottom: 24px;
}
.content-module.module-B3 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap .input-wrap.books-status, .content-module.module-B4 .main-fuction-wrap .fuction-list.advanced .opction-skin.group2 .criteria-wrap .input-wrap.books-status {
  display: flex;
}
.content-module.module-B3 .main-fuction-wrap .fuction-list.advanced .fuction-wrap, .content-module.module-B4 .main-fuction-wrap .fuction-list.advanced .fuction-wrap {
  bottom: 36px;
}
.content-module.module-B4 .main-fuction-wrap .fuction-list:has(.export-bar-wrap) {
  display: flex;
  margin-bottom: 0;
}
.content-module.module-B4 .main-fuction-wrap .fuction-list:has(.export-bar-wrap) .export-bar-wrap {
  visibility: visible;
}
.content-module.module-B5 {
  /*B5 Batch*/
}
.content-module.module-B5 .main-fuction-wrap {
  display: none;
}
.content-module.module-B5 .batch-example {
  /*已選擇上傳檔案*/
}
.content-module.module-B5 .batch-example .btn-wrap {
  position: relative;
  min-width: 280px;
  padding: 0;
}
.content-module.module-B5 .batch-example .btn-wrap .btn {
  width: 100%;
}
.content-module.module-B5 .batch-example .btn-wrap > p {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 40px;
  color: var(--G00);
  display: none;
}
.content-module.module-B5 .batch-example .btn-wrap input[type=file] {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  cursor: pointer;
}
.content-module.module-B5 .batch-example .btn-wrap span {
  line-height: 24px;
}
.content-module.module-B5 .batch-example .btn-wrap span::before {
  content: "批次匯入檔案上傳";
}
.content-module.module-B5 .batch-example.selected .btn-wrap > p {
  display: block;
}
.content-module.module-B5 .batch-example.selected .btn-wrap > p::before {
  content: "確定上傳：";
}
.content-module.module-B5 .batch-example.selected .btn-wrap input[type=file] {
  z-index: -1;
}
.content-module.module-B5 .batch-example.selected .btn-wrap span::before {
  content: " ";
}
.content-module.module-B5 .batch-example {
  margin-top: 32px;
  padding: 0 24px;
}
.content-module.module-B5 .batch-example .batch {
  position: relative;
  width: -moz-max-content;
  width: max-content;
}
.content-module.module-B5 .batch-example .batch h3 {
  margin-bottom: 32px;
}
.content-module.module-B5 .batch-example .batch .btn-wrap {
  width: 258px;
  padding: 0;
}
.content-module.module-B5 .batch-example .batch .btn-wrap.disabled .btn::before {
  content: "資料檢核中";
}
.content-module.module-B5 .batch-example .batch .btn-download {
  position: relative;
  float: right;
  width: -moz-max-content;
  width: max-content;
  margin: 4px 0 48px;
  cursor: pointer;
}
.content-module.module-B5 .batch-example .batch .btn-download span {
  display: inline-block;
  line-height: 24px;
}
.content-module.module-B5 .batch-example .batch .btn-download span::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 24px;
  background: url(../images/icon_download_n.png) no-repeat center;
  background-size: 18px;
}
.content-module.module-B5 .batch-example .batch .btn-download:hover {
  color: var(--PFC);
}
.content-module.module-B5 .batch-example .batch .btn-download:hover span {
  text-decoration: underline;
}
.content-module.module-B5 .batch-example .batch .btn-download:hover span::before {
  background-image: url(../images/icon_download_h.png);
}
.content-module.module-B5 .batch-example .check-resul-wrap {
  width: 100%;
  max-width: 1480px;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid var(--G300);
  clear: both;
  display: none;
  /*Batch Dynamic Sets*/
}
.content-module.module-B5 .batch-example .check-resul-wrap .check-status {
  display: flex;
  flex-direction: column;
  padding: 12px 16px 24px 16px;
  box-sizing: border-box;
  background-color: var(--G100);
  border: 1px solid var(--G200);
}
.content-module.module-B5 .batch-example .check-resul-wrap .check-status h3 {
  line-height: 2;
}
.content-module.module-B5 .batch-example .check-resul-wrap .check-status span span.total {
  display: none;
}
.content-module.module-B5 .batch-example .check-resul-wrap .from-result {
  display: none;
}
.content-module.module-B5 .batch-example .check-resul-wrap .from-result .from-list {
  width: 100%;
  margin-top: -1px;
  overflow-x: auto;
}
.content-module.module-B5 .batch-example .check-resul-wrap .from-result .from-list table {
  position: relative;
  border-collapse: collapse;
  width: inherit;
}
.content-module.module-B5 .batch-example .check-resul-wrap .from-result .from-list table caption {
  position: absolute;
  top: -40px;
  display: none;
  height: 40px;
  line-height: 40px;
  text-align: left;
}
.content-module.module-B5 .batch-example .check-resul-wrap .from-result .from-list table caption span {
  display: none;
  vertical-align: top;
  margin-left: 16px;
  color: var(--PFC);
  cursor: pointer;
}
.content-module.module-B5 .batch-example .check-resul-wrap .from-result .from-list table caption span.btn-download::before {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 24px;
  height: 40px;
  background: url(../images/icon_download_h.png) no-repeat center;
  background-size: 20px;
}
.content-module.module-B5 .batch-example .check-resul-wrap .from-result .from-list table caption span.btn-download:hover::before {
  background-size: 24px;
}
.content-module.module-B5 .batch-example .check-resul-wrap .from-result .from-list table caption span.total {
  color: var(--HLCH);
}
.content-module.module-B5 .batch-example .check-resul-wrap .from-result .from-list table thead th {
  border-bottom: none !important;
}
.content-module.module-B5 .batch-example .check-resul-wrap .from-result .from-list table th.note,
.content-module.module-B5 .batch-example .check-resul-wrap .from-result .from-list table td.note {
  display: none;
  min-width: 192px;
}
.content-module.module-B5 .batch-example .check-resul-wrap .from-result .from-list table td {
  font-size: 14px;
}
.content-module.module-B5 .batch-example .check-resul-wrap .from-result .from-list table td.error-cell {
  color: var(--ALC);
  background-color: rgba(225, 77, 77, 0.15);
  border: 1px solid rgba(225, 77, 77, 0.6705882353);
  font-weight: bold;
}
.content-module.module-B5 .batch-example .check-resul-wrap .from-result .from-list table td.booktitle p {
  max-width: 230px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.content-module.module-B5 .batch-example .check-resul-wrap .from-result .from-list table td.error-msg {
  text-align: left;
  color: var(--ALC);
}
.content-module.module-B5 .batch-example .check-resul-wrap .from-result .from-list table td.note {
  text-align: left;
}
.content-module.module-B5 .batch-example .check-resul-wrap.checking {
  display: block;
}
.content-module.module-B5 .batch-example .check-resul-wrap.checking .check-status span::before {
  content: "資料檢核中，請稍候";
}
.content-module.module-B5 .batch-example .check-resul-wrap.checking .check-status span::after {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 24px;
  height: 24px;
  background: url(../images/ani_loading.gif) no-repeat center;
  background-size: 24px;
}
.content-module.module-B5 .batch-example .check-resul-wrap.ok {
  display: block;
}
.content-module.module-B5 .batch-example .check-resul-wrap.ok .check-status span {
  color: var(--HLCH);
}
.content-module.module-B5 .batch-example .check-resul-wrap.ok .check-status span::before {
  content: "批次匯入完成";
  background: none;
  width: -moz-max-content;
  width: max-content;
  height: auto;
  font-weight: bold !important;
}
.content-module.module-B5 .batch-example .check-resul-wrap.ok .check-status span::after {
  display: none;
}
.content-module.module-B5 .batch-example .check-resul-wrap.ok .from-result {
  display: block;
}
.content-module.module-B5 .batch-example .check-resul-wrap.ok .from-result .from-list {
  width: 100%;
  margin-top: -1px;
  overflow-x: auto;
}
.content-module.module-B5 .batch-example .check-resul-wrap.ok .from-result .from-list table th,
.content-module.module-B5 .batch-example .check-resul-wrap.ok .from-result .from-list table td {
  display: none;
}
.content-module.module-B5 .batch-example .check-resul-wrap.ok .from-result .from-list table th.list-nb, .content-module.module-B5 .batch-example .check-resul-wrap.ok .from-result .from-list table th.sn, .content-module.module-B5 .batch-example .check-resul-wrap.ok .from-result .from-list table th.note,
.content-module.module-B5 .batch-example .check-resul-wrap.ok .from-result .from-list table td.list-nb,
.content-module.module-B5 .batch-example .check-resul-wrap.ok .from-result .from-list table td.sn,
.content-module.module-B5 .batch-example .check-resul-wrap.ok .from-result .from-list table td.note {
  display: table-cell;
}
.content-module.module-B5 .batch-example .check-resul-wrap.ng {
  display: block;
}
.content-module.module-B5 .batch-example .check-resul-wrap.ng .check-status span::before {
  color: var(--ALC);
  content: "批次匯入失敗";
  background: none;
  width: -moz-max-content;
  width: max-content;
  height: auto;
  font-weight: bold !important;
}
.content-module.module-B5 .batch-example .check-resul-wrap.ng .check-status span::after {
  display: none;
}
.content-module.module-B5 .batch-example .check-resul-wrap.ng .from-result {
  display: block;
}
.content-module.module-B5 .batch-example .check-resul-wrap.ng .from-result .from-list table {
  margin-top: 40px;
  border: transparent;
}
.content-module.module-B5 .batch-example .check-resul-wrap.ng .from-result .from-list table caption {
  display: block;
  color: var(--ALC);
}
.content-module.module-B5 .batch-example .check-resul-wrap.ng .from-result .from-list table caption::before {
  content: "錯誤資料訊息：";
}
.content-module.module-B5 .batch-example .check-resul-wrap.ng .from-result .from-list table caption span.btn-download {
  display: inline-block;
  margin: 0;
}
.content-module.module-B5 .batch-example .check-resul-wrap.ng .from-result .from-list table thead {
  display: none;
  background-color: rgba(225, 77, 77, 0.15);
}
.content-module.module-C3 .main-fuction-wrap .fuction-list:has(.export-bar-wrap), .content-module.module-C4 .main-fuction-wrap .fuction-list:has(.export-bar-wrap), .content-module.module-C5 .main-fuction-wrap .fuction-list:has(.export-bar-wrap) {
  display: flex;
  margin-bottom: 0;
}
.content-module.module-C3 .main-fuction-wrap .fuction-list:has(.export-bar-wrap) .export-bar-wrap, .content-module.module-C4 .main-fuction-wrap .fuction-list:has(.export-bar-wrap) .export-bar-wrap, .content-module.module-C5 .main-fuction-wrap .fuction-list:has(.export-bar-wrap) .export-bar-wrap {
  visibility: visible;
}
.content-module.module-C3 .main-fuction-wrap .fuction-list .opction-skin, .content-module.module-C4 .main-fuction-wrap .fuction-list .opction-skin, .content-module.module-C5 .main-fuction-wrap .fuction-list .opction-skin {
  max-width: inherit;
}
.content-module.module-C3 .main-fuction-wrap .fuction-list .opction-skin.group2, .content-module.module-C4 .main-fuction-wrap .fuction-list .opction-skin.group2, .content-module.module-C5 .main-fuction-wrap .fuction-list .opction-skin.group2 {
  align-items: start;
  justify-content: start;
}
.content-module.module-C3 .main-fuction-wrap .fuction-list .opction-skin.group2 .criteria-wrap, .content-module.module-C4 .main-fuction-wrap .fuction-list .opction-skin.group2 .criteria-wrap, .content-module.module-C5 .main-fuction-wrap .fuction-list .opction-skin.group2 .criteria-wrap {
  width: -moz-fit-content !important;
  width: fit-content !important;
  min-width: inherit;
}
.content-module.module-C3 .main-fuction-wrap .fuction-list .opction-skin.group2 .criteria-wrap:nth-of-type(1) .input-wrap label, .content-module.module-C4 .main-fuction-wrap .fuction-list .opction-skin.group2 .criteria-wrap:nth-of-type(1) .input-wrap label, .content-module.module-C5 .main-fuction-wrap .fuction-list .opction-skin.group2 .criteria-wrap:nth-of-type(1) .input-wrap label {
  min-width: 96px;
  max-width: 144px;
}
.content-module.module-C3 .main-fuction-wrap .fuction-list .opction-skin.group2 .criteria-wrap:nth-of-type(3), .content-module.module-C4 .main-fuction-wrap .fuction-list .opction-skin.group2 .criteria-wrap:nth-of-type(3), .content-module.module-C5 .main-fuction-wrap .fuction-list .opction-skin.group2 .criteria-wrap:nth-of-type(3) {
  padding-left: 16px;
}
.content-module.module-C3 .main-fuction-wrap .fuction-list .opction-skin.group2 .criteria-wrap:nth-of-type(3) .input-wrap .title, .content-module.module-C4 .main-fuction-wrap .fuction-list .opction-skin.group2 .criteria-wrap:nth-of-type(3) .input-wrap .title, .content-module.module-C5 .main-fuction-wrap .fuction-list .opction-skin.group2 .criteria-wrap:nth-of-type(3) .input-wrap .title {
  min-width: 64px !important;
  margin-right: 16px !important;
}
.content-module.module-C3 .main-fuction-wrap .fuction-list .opction-skin.group2 .criteria-wrap .input-wrap.books-status, .content-module.module-C4 .main-fuction-wrap .fuction-list .opction-skin.group2 .criteria-wrap .input-wrap.books-status, .content-module.module-C5 .main-fuction-wrap .fuction-list .opction-skin.group2 .criteria-wrap .input-wrap.books-status {
  display: none;
}
.content-module.manage .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap.publisher {
  display: flex;
}
.content-module.manage.module-B1 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap:not(.publisher), .content-module.manage.module-B2 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap:not(.publisher), .content-module.manage.module-B3 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap:not(.publisher), .content-module.manage.module-B4 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap:not(.publisher) {
  display: none;
}
.content-module.manage.module-B1 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap.publisher, .content-module.manage.module-B2 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap.publisher, .content-module.manage.module-B3 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap.publisher, .content-module.manage.module-B4 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap.publisher {
  width: 100%;
  max-width: inherit;
  margin-right: 0;
}
.content-module.manage.module-B1 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap.publisher label, .content-module.manage.module-B2 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap.publisher label, .content-module.manage.module-B3 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap.publisher label, .content-module.manage.module-B4 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap.publisher label {
  margin-right: 0;
}
.content-module.manage.module-B1 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap.publisher::after, .content-module.manage.module-B2 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap.publisher::after, .content-module.manage.module-B3 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap.publisher::after, .content-module.manage.module-B4 .main-fuction-wrap .fuction-list.advanced .opction-skin.group1 .criteria-wrap.publisher::after {
  display: none;
}
.content-module.manage .fuction-list.advanced input[type=checkbox]:checked ~ .opction-skin {
  display: flex !important;
}

/*Corresponding - Pagemode Dynamic Main Fuction Sets*/
.content-module {
  /*for Page module Badic*/
}
.content-module .main-fuction-wrap.pagemode {
  align-items: start;
}
.content-module .main-fuction-wrap.pagemode div.fuction-list:not(.advanced) {
  display: flex;
}
.content-module .main-fuction-wrap.pagemode div.fuction-list .page-module-wrap {
  display: flex;
}
.content-module:has(.pagemode) .main-fuction-wrap.module-C3 .fuction-list, .content-module:has(.pagemode) .main-fuction-wrap.module-C4 .fuction-list, .content-module:has(.pagemode) .main-fuction-wrap.module-C5 .fuction-list {
  display: flex;
}

main.main-wrap:has(.module-B5) .content .step-wrap {
  display: none;
}

/*Corresponding - From*/
.content-module {
  /*Fron-wrap*/
  /*Dynamic Fron-wrap Sets*/
}
.content-module .from-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: -moz-max-content;
  height: max-content;
  padding: 0px;
  background-color: var(--G80);
  box-sizing: border-box;
  /*Fron-wrap Sets for Module C*/
  /*Fron-wrap Sets for Module E*/
}
.content-module .from-wrap .from-module {
  /*max-width: calc(100vw - 434px);*/
  min-height: calc(100dvh - 376px);
  max-height: 60dvh;
  padding-bottom: 128px;
  overflow-x: auto;
  overflow-y: auto;
}
.content-module .from-wrap .from-module > p {
  display: none;
  justify-content: center;
  align-items: center;
  line-height: 128px;
}
.content-module .from-wrap .from-module > p::before {
  content: "目前找不到相關結果";
}
.content-module .from-wrap .from-module.nocode > p {
  display: flex;
}
.content-module .from-wrap .from-module.nocode > ul.from-content {
  display: none;
}
.content-module .from-wrap .from-module > ul {
  position: relative;
  display: flex;
  width: -moz-max-content;
  width: max-content;
  margin-bottom: 0px;
  box-sizing: border-box;
}
.content-module .from-wrap .from-module > ul li.from-option {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  height: 40px;
  padding: 0px;
  border: 1px solid transparent;
  box-sizing: border-box;
  text-align: center;
  line-height: 40px;
}
.content-module .from-wrap .from-module > ul li.from-option p.txt,
.content-module .from-wrap .from-module > ul li.from-option span.txt {
  line-height: 1.5;
}
.content-module .from-wrap .from-module > ul li.from-option.sn {
  width: 56px;
  padding: 0px;
}
.content-module .from-wrap .from-module > ul li.from-option.EISBN {
  width: 176px;
  padding: 0px 8px;
}
.content-module .from-wrap .from-module > ul li.from-option.ISBN {
  width: 176px;
  padding: 0px 8px;
}
.content-module .from-wrap .from-module > ul li.from-option.bookcover {
  width: 122px;
}
.content-module .from-wrap .from-module > ul li.from-option.booktitle {
  width: 192px;
}
.content-module .from-wrap .from-module > ul li.from-option.athor {
  width: 144px;
}
.content-module .from-wrap .from-module > ul li.from-option.version {
  width: 80px;
  padding: 0px;
}
.content-module .from-wrap .from-module > ul li.from-option.publication-date, .content-module .from-wrap .from-module > ul li.from-option.release-date, .content-module .from-wrap .from-module > ul li.from-option.removal-date, .content-module .from-wrap .from-module > ul li.from-option.application-date, .content-module .from-wrap .from-module > ul li.from-option.redemption-period, .content-module .from-wrap .from-module > ul li.from-option.redemption-date, .content-module .from-wrap .from-module > ul li.from-option.period-use {
  width: 144px;
}
.content-module .from-wrap .from-module > ul li.from-option.publication-date article span::after, .content-module .from-wrap .from-module > ul li.from-option.release-date article span::after, .content-module .from-wrap .from-module > ul li.from-option.removal-date article span::after, .content-module .from-wrap .from-module > ul li.from-option.application-date article span::after, .content-module .from-wrap .from-module > ul li.from-option.redemption-period article span::after, .content-module .from-wrap .from-module > ul li.from-option.redemption-date article span::after, .content-module .from-wrap .from-module > ul li.from-option.period-use article span::after {
  content: "/";
  margin-left: 4px;
}
.content-module .from-wrap .from-module > ul li.from-option.publication-date article span:nth-last-of-type(1)::after, .content-module .from-wrap .from-module > ul li.from-option.release-date article span:nth-last-of-type(1)::after, .content-module .from-wrap .from-module > ul li.from-option.removal-date article span:nth-last-of-type(1)::after, .content-module .from-wrap .from-module > ul li.from-option.application-date article span:nth-last-of-type(1)::after, .content-module .from-wrap .from-module > ul li.from-option.redemption-period article span:nth-last-of-type(1)::after, .content-module .from-wrap .from-module > ul li.from-option.redemption-date article span:nth-last-of-type(1)::after, .content-module .from-wrap .from-module > ul li.from-option.period-use article span:nth-last-of-type(1)::after {
  content: "";
}
.content-module .from-wrap .from-module > ul li.from-option.review {
  width: 120px;
}
.content-module .from-wrap .from-module > ul li.from-option.resource-quantity {
  width: 192px;
}
.content-module .from-wrap .from-module > ul li.from-option.item-status {
  position: relative;
  width: 128px;
}
.content-module .from-wrap .from-module > ul li.from-option.item-status p > span.icon-wrap {
  margin-left: -24px;
}
.content-module .from-wrap .from-module > ul li.from-option.item-status strong.question {
  position: absolute;
  right: 12px;
  transform: translateY(-4px);
  display: none;
}
.content-module .from-wrap .from-module > ul li.from-option.item-status.online p::after {
  content: "已上架";
}
.content-module .from-wrap .from-module > ul li.from-option.item-status.online span.icon-wrap {
  margin-right: -4px;
  background-image: url(../images/icon_itemon_n.png);
}
.content-module .from-wrap .from-module > ul li.from-option.item-status.offline > p:nth-of-type(1)::after {
  content: "已下架";
}
.content-module .from-wrap .from-module > ul li.from-option.item-status.offline span.icon-wrap {
  margin-right: -4px;
  background-image: url(../images/icon_itemoff_n.png);
}
.content-module .from-wrap .from-module > ul li.from-option.item-status.offline strong.question {
  display: inline-block;
}
.content-module .from-wrap .from-module > ul li.from-option.item-status.offline strong.question:hover ~ .msg-view {
  top: 0;
  transform: translateY(24px);
  opacity: 1;
  z-index: 1;
}
.content-module .from-wrap .from-module > ul li.from-option.item-status .msg-view {
  position: absolute;
  top: 0;
  transform: translateY(75%);
  left: 112px;
  width: -moz-max-content;
  width: max-content;
  min-width: 96px;
  max-width: 280px;
  height: -moz-max-content;
  height: max-content;
  min-height: 64px;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 6px;
  box-shadow: 1px 2px 3px 0px rgba(186, 186, 186, 0.25);
  opacity: 0;
  z-index: -1;
  transition: ease 0.35s;
}
.content-module .from-wrap .from-module > ul li.from-option.item-status .msg-view p {
  text-align: left;
}
.content-module .from-wrap .from-module > ul li.from-option.item-status .msg-view p::before {
  content: "備註：";
}
.content-module .from-wrap .from-module > ul li.from-option.item-status .msg-view p::after {
  content: "";
}
.content-module .from-wrap .from-module > ul li.from-option.item-status .msg-view span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: block;
  width: 16px;
  height: 16px;
  overflow: hidden;
}
.content-module .from-wrap .from-module > ul li.from-option.item-status .msg-view span::after {
  content: "";
  position: relative;
  right: -10px;
  bottom: -10px;
  transform: rotate(45deg);
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--PFC);
}
.content-module .from-wrap .from-module > ul li.from-option.edit-recode {
  width: 144px;
}
.content-module .from-wrap .from-module > ul li.from-option.edit-recode article p span::after {
  margin-left: 4px;
}
.content-module .from-wrap .from-module > ul li.from-option.edit-recode article p span:nth-last-of-type(1)::after {
  content: "" !important;
}
.content-module .from-wrap .from-module > ul li.from-option.edit-recode article p.date span::after {
  content: "/";
}
.content-module .from-wrap .from-module > ul li.from-option.edit-recode article p.time span::after {
  content: ":";
}
.content-module .from-wrap .from-module > ul li.from-option.fuction {
  width: 188px;
}
.content-module .from-wrap .from-module > ul li.from-option.fuction > div.btn-wrap {
  margin-top: 8px;
}
.content-module .from-wrap .from-module > ul li.from-option.fuction > div.btn-wrap:nth-child(1) {
  margin-top: 0px;
}
.content-module .from-wrap .from-module > ul li.from-option.fuction > div.btn-wrap:nth-child(1) p::before {
  content: "編輯資料";
}
.content-module .from-wrap .from-module > ul li.from-option.fuction > div.btn-wrap:nth-child(2) p::before {
  content: "相關附件";
}
.content-module .from-wrap .from-module > ul li.from-option.fuction > div.btn-wrap:nth-child(3) p::before {
  content: "參考網址";
}
.content-module .from-wrap .from-module > ul li.from-option.fuction > div.btn-wrap.edited:nth-child(1) p::before {
  content: "編輯資料";
}
.content-module .from-wrap .from-module > ul li.from-option.fuction > div.btn-wrap > div {
  width: 152px;
  padding: 0px 8px;
}
.content-module .from-wrap .from-module > ul li.from-option.item-status.from2 {
  width: 188px;
  /*&.on {
      .btn {
          p {
              &::before {
                  content: "取消上架";
              }
          }
      }
      .btn.on {
          display: none;
      }
  }*/
}
.content-module .from-wrap .from-module > ul li.from-option.item-status.from2 .btn p::before {
  content: "安排上架";
}
.content-module .from-wrap .from-module > ul li.from-option.item-status.from2.off .btn.off {
  display: none;
}
.content-module .from-wrap .from-module > ul li.from-option.item-status.from2 > div.btn-wrap {
  margin-top: 8px;
}
.content-module .from-wrap .from-module > ul li.from-option.item-status.from2 > div.btn-wrap:nth-child(1) {
  margin-top: 0px;
}
.content-module .from-wrap .from-module > ul li.from-option.item-status.from2 > div.btn-wrap > div {
  width: 152px;
  padding: 0px 8px;
}
.content-module .from-wrap .from-module > ul li.from-option.item-status.from2 > div.btn-wrap.on > .btn p::before {
  content: "取消上架" !important;
}
.content-module .from-wrap .from-module > ul li.from-option.item-status-sets {
  width: 188px;
}
.content-module .from-wrap .from-module > ul li.from-option.item-status-sets > div.btn-wrap {
  margin-top: 8px;
}
.content-module .from-wrap .from-module > ul li.from-option.item-status-sets > div.btn-wrap:nth-child(1) {
  margin-top: 0px;
}
.content-module .from-wrap .from-module > ul li.from-option.item-status-sets > div.btn-wrap > div {
  width: 152px;
  padding: 0px 8px;
}
.content-module .from-wrap .from-module > ul li.from-option.item-status-sets.on > div:nth-child(1) {
  display: none;
}
.content-module .from-wrap .from-module > ul li.from-option.item-status-sets.off > div:nth-child(2) {
  display: none;
}
.content-module .from-wrap .from-module > ul.title {
  position: sticky;
  top: 0;
  z-index: 5;
  color: var(--G00);
  background-color: var(--PFC);
}
.content-module .from-wrap .from-module > ul.title .from-option span.icon-wrap {
  height: 40px;
  background-image: url(../images/icon_sort_default.png);
  background-size: 19px;
}
.content-module .from-wrap .from-module > ul.title .from-option.ascend span.icon-wrap {
  background-image: url(../images/icon_sort_ascending.png);
  background-size: 22px;
}
.content-module .from-wrap .from-module > ul.title .from-option.descend span.icon-wrap {
  background-image: url(../images/icon_sort_descending.png);
  background-size: 22px;
}
.content-module .from-wrap .from-module > ul.title .from-option.snp p::before {
  content: "編號";
}
.content-module .from-wrap .from-module > ul.title .from-option.EISBN p::before {
  content: "EISBN";
}
.content-module .from-wrap .from-module > ul.title .from-option.ISBN p::before {
  content: "ISBN";
}
.content-module .from-wrap .from-module > ul.title .from-option.bookcover p::before {
  content: "書封";
}
.content-module .from-wrap .from-module > ul.title .from-option.booktitle.descending ::after {
  background-image: url(../images/icon_sort_za.png);
}
.content-module .from-wrap .from-module > ul.title .from-option.booktitle:hover::after {
  width: 24px;
  height: 24px;
}
.content-module .from-wrap .from-module > ul.title .from-option.booktitle p::before {
  content: "書名";
}
.content-module .from-wrap .from-module > ul.title .from-option.athor p::before {
  content: "主要作者";
}
.content-module .from-wrap .from-module > ul.title .from-option.version p::before {
  content: "版次";
}
.content-module .from-wrap .from-module > ul.title .from-option.publication-date p::before {
  content: "出版日期";
}
.content-module .from-wrap .from-module > ul.title .from-option.review p::before {
  content: "書籍預覽";
}
.content-module .from-wrap .from-module > ul.title .from-option.resource-quantity p::before {
  content: "檔案數量";
}
.content-module .from-wrap .from-module > ul.title .from-option.item-status p span.icon-wrap {
  margin-left: 0;
}
.content-module .from-wrap .from-module > ul.title .from-option.item-status p::before {
  content: "書籍狀態";
}
.content-module .from-wrap .from-module > ul.title .from-option.release-date p::before {
  content: "銷售日(上架日)";
}
.content-module .from-wrap .from-module > ul.title .from-option.removal-date p::before {
  content: "停售日";
}
.content-module .from-wrap .from-module > ul.title .from-option.edit-recode p::before {
  content: "修改紀錄";
}
.content-module .from-wrap .from-module > ul.title .from-option.fuction p::before {
  content: "資料維護";
}
.content-module .from-wrap .from-module > ul.title .from-option.item-status-sets p::before {
  content: "設定書籍狀態";
}
.content-module .from-wrap .from-module > ul.from-content {
  z-index: 1;
  margin-top: -1px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid var(--G300);
  box-sizing: border-box;
  /*&:nth-child(even) {
      background-color: var(--G80);
  }*/
}
.content-module .from-wrap .from-module > ul.from-content li.from-option {
  min-height: 152px;
  box-sizing: border-box;
  border-right: 1px solid var(--G300);
}
.content-module .from-wrap .from-module > ul.from-content li.from-option:nth-child(1) {
  border-left: 1px solid var(--G300);
}
.content-module .from-wrap .from-module > ul.from-content li.from-option.booktitle {
  width: 192px;
}
.content-module .from-wrap .from-module > ul.from-content li.from-option.booktitle > p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
  text-align: left;
  line-height: 1.5;
}
.content-module .from-wrap .from-module > ul.from-content li.from-option.bookcover span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 128px;
  background-color: var(--G200);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  overflow-y: hidden;
}
.content-module .from-wrap .from-module > ul.from-content li.from-option.bookcover span img {
  width: 100%;
  height: auto;
}
.content-module .from-wrap .from-module > ul.from-content li.from-option.review p {
  color: var(--PFC);
  cursor: pointer;
}
.content-module .from-wrap .from-module > ul.from-content li.from-option.review p:hover {
  text-decoration: underline;
}
.content-module .from-wrap .from-module > ul.from-content li.from-option.remark p {
  text-align: left;
}
.content-module .from-wrap .from-module > ul.from-content:hover {
  z-index: 2;
}
.content-module .from-wrap .module-C > ul li.from-option.coupon, .content-module .from-wrap .module-C > ul li.from-option.recipient, .content-module .from-wrap .module-C > ul li.from-option.recipient-mail {
  width: 160px;
}
.content-module .from-wrap .module-C > ul li.from-option.redemption-date, .content-module .from-wrap .module-C > ul li.from-option.application-date, .content-module .from-wrap .module-C > ul li.from-option.redemption-period, .content-module .from-wrap .module-C > ul li.from-option.coupon-status {
  width: 144px;
}
.content-module .from-wrap .module-C > ul li.from-option.period-use {
  width: 128px;
}
.content-module .from-wrap .module-C > ul li.from-option.release-date, .content-module .from-wrap .module-C > ul li.from-option.resouce-sets {
  width: 176px;
}
.content-module .from-wrap .module-C > ul li.from-option.logout-status {
  display: none;
  width: 144px;
}
.content-module .from-wrap .module-C > ul li.from-option.order-number {
  display: none;
  width: 112px;
}
.content-module .from-wrap .module-C > ul li.from-option.remark, .content-module .from-wrap .module-C > ul li.from-option.modify-record {
  width: 192px;
  padding: 0px 8px;
}
.content-module .from-wrap .module-C > ul li.from-option.order-type, .content-module .from-wrap .module-C > ul li.from-option.order-sn {
  width: -moz-fit-content;
  width: fit-content;
  min-width: 128px;
  padding: 0px 8px;
}
.content-module .from-wrap .module-C > ul.title .from-option {
  padding-left: 8px;
}
.content-module .from-wrap .module-C > ul.title .from-option p {
  position: relative;
  width: -moz-max-content;
  width: max-content;
}
.content-module .from-wrap .module-C > ul.title .from-option span.icon-wrap {
  height: 40px;
  background-image: url(../images/icon_sort_default.png);
  background-size: 19px;
}
.content-module .from-wrap .module-C > ul.title .from-option.ascend span.icon-wrap {
  background-image: url(../images/icon_sort_ascending.png);
  background-size: 22px;
}
.content-module .from-wrap .module-C > ul.title .from-option.descend span.icon-wrap {
  background-image: url(../images/icon_sort_descending.png);
  background-size: 22px;
}
.content-module .from-wrap .module-C > ul.title .from-option.sn p::before {
  content: "編號";
}
.content-module .from-wrap .module-C > ul.title .from-option.coupon p::before {
  content: "兌換序號";
}
.content-module .from-wrap .module-C > ul.title .from-option.EISBN p::before {
  content: "EISBN";
}
.content-module .from-wrap .module-C > ul.title .from-option.ISBN p::before {
  content: "ISBN";
}
.content-module .from-wrap .module-C > ul.title .from-option.bookcover p::before {
  content: "書封";
}
.content-module .from-wrap .module-C > ul.title .from-option.booktitle p::before {
  content: "書名";
}
.content-module .from-wrap .module-C > ul.title .from-option.athor p::before {
  content: "主要作者";
}
.content-module .from-wrap .module-C > ul.title .from-option.version p::before {
  content: "版次";
}
.content-module .from-wrap .module-C > ul.title .from-option.release-date p::before {
  content: "贈送或銷貨日期";
}
.content-module .from-wrap .module-C > ul.title .from-option.application-date p::before {
  content: "序號申請日期";
}
.content-module .from-wrap .module-C > ul.title .from-option.redemption-date p::before {
  content: "兌換日期";
}
.content-module .from-wrap .module-C > ul.title .from-option.redemption-period p::before {
  content: "兌換期限";
}
.content-module .from-wrap .module-C > ul.title .from-option.period-use p::before {
  content: "使用期限";
}
.content-module .from-wrap .module-C > ul.title .from-option.recipient p::before {
  content: "發送對象";
}
.content-module .from-wrap .module-C > ul.title .from-option.recipient-mail p::before {
  content: "發送 E-mail";
}
.content-module .from-wrap .module-C > ul.title .from-option.coupon-status p::before {
  content: "序號狀態";
}
.content-module .from-wrap .module-C > ul.title .from-option.resouce-sets p::before {
  content: "教學資源";
}
.content-module .from-wrap .module-C > ul.title .from-option.order-number p::before {
  content: "銷貨單號";
}
.content-module .from-wrap .module-C > ul.title .from-option.logout-status p::before {
  content: "註銷";
}
.content-module .from-wrap .module-C > ul.title .from-option.remark p::before {
  content: "序號狀態修改紀錄";
}
.content-module .from-wrap .module-C > ul.title .from-option.modify-record p::before {
  content: "用戶事件追蹤";
}
.content-module .from-wrap .module-C > ul.title .from-option.order-type p::before {
  content: "進貨單別";
}
.content-module .from-wrap .module-C > ul.title .from-option.order-sn p::before {
  content: "進貨單號";
}
.content-module .from-wrap .module-C > ul.from-content {
  z-index: 1;
  margin-top: -1px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid var(--G300);
  box-sizing: border-box;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option {
  min-height: 72px;
  box-sizing: border-box;
  border-right: 1px solid var(--G300);
  /*
  .msg-view {
      position: absolute;
      transform: translateY(52%);
      left: 88px;
      width: max-content;
      min-width: 96px;
      max-width: 224px;
      height: max-content;
      min-height: 64px;
      padding: 8px 8px 24px;
      background-color: rgba(255, 255, 255, 0.75);
      border-radius: 6px;
      box-shadow: 1px 2px 3px 0px rgba(186, 186, 186, 0.25);
      opacity: 0;
      z-index: -1;
      transition: ease 0.35s;
      p {
          font-size: 12px;
          line-height: 1.5;
      }
      span {
          position: absolute;
          right: 8px;
          bottom: 8px;
          display: block;
          width: 16px;
          height: 16px;
          overflow: hidden;
          &::after {
              content: "";
              position: relative;
              right: -10px;
              bottom: -10px;
              transform: rotate(45deg);
              display: block;
              width: 16px;
              height: 16px;
              background-color: var(--PFC);
          }
      }
  }
  */
}
.content-module .from-wrap .module-C > ul.from-content li.from-option:nth-child(1) {
  border-left: 1px solid var(--G300);
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.coupon p.txt,
.content-module .from-wrap .module-C > ul.from-content li.from-option.coupon span.txt, .content-module .from-wrap .module-C > ul.from-content li.from-option.recipient-mail p.txt,
.content-module .from-wrap .module-C > ul.from-content li.from-option.recipient-mail span.txt {
  display: block;
  width: 100%;
  white-space: normal;
  word-break: break-word;
  line-height: 1.5;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.resouce-sets .radio-wrap {
  display: flex;
  flex-direction: column;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.resouce-sets .radio-wrap > div {
  position: relative;
  display: block;
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.resouce-sets .radio-wrap label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 28px;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.resouce-sets .radio-wrap label::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  border-radius: 8px;
  border: 1px solid var(--G300);
  box-sizing: border-box;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.resouce-sets .radio-wrap input[type=radio] {
  position: absolute;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.resouce-sets .radio-wrap input[type=radio]:checked + label::before {
  border: 2px solid var(--PFC);
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.resouce-sets .radio-wrap input[type=radio]:checked + label::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 4px;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: var(--PFC);
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.resouce-sets p.txt {
  display: none;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.resouce-sets.no-sources .radio-wrap {
  display: none;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.resouce-sets.no-sources p.txt {
  display: block;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.resouce-sets.no-sources p.txt::before {
  content: "無檔案";
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.resouce-sets.not-available .radio-wrap {
  display: none;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.resouce-sets.not-available p.txt {
  display: block;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.resouce-sets.not-available p.txt::before {
  content: "不能使用";
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.coupon-status {
  position: relative;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.coupon-status p.txt {
  position: relative;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.coupon-status.used p.txt::before {
  content: "已兌換";
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.coupon-status.not-used p.txt::before {
  content: "未兌換";
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.coupon-status.logged-out p.txt::before {
  content: "已註銷";
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.coupon-status.logged-out p.txt .question {
  display: inline-block;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.logout-status {
  position: relative;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.logout-status p.txt {
  position: relative;
  width: -moz-max-content;
  width: max-content;
  height: 32px;
  padding: 0px 16px;
  font-size: 16px;
  line-height: 32px;
  border-radius: 4px;
  background-color: var(--PSC);
  cursor: pointer;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.logout-status p.txt:hover {
  background-color: var(--PTC);
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.logout-status p.txt:active {
  background-color: var(--PFC);
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.logout-status p.txt::before {
  content: "註銷";
  color: var(--G00);
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.logout-status p.txt .question {
  display: none;
  position: absolute;
  right: -28px;
  top: -4px;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.logout-status.logged-out p.txt {
  background-color: var(--G300);
  cursor: auto;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.logout-status.logged-out p.txt:hover {
  background-color: var(--G300);
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.logout-status.logged-out p.txt::before {
  content: "已註銷";
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.logout-status.logged-out p.txt .question {
  display: inline-block;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.logout-status.logged-out:hover .msg-view {
  opacity: 1;
  z-index: 1;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.remark p {
  color: var(--PFC);
  cursor: pointer;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.remark p:hover {
  text-decoration: underline;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.modify-record p {
  color: var(--PFC);
  cursor: pointer;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.modify-record p:hover {
  text-decoration: underline;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.order-type p, .content-module .from-wrap .module-C > ul.from-content li.from-option.order-sn p {
  display: inline-block;
  width: 100%;
  max-width: 110px;
  text-align: center;
  white-space: break-spaces;
  word-wrap: anywhere;
}
.content-module .from-wrap .module-C > ul.from-content li.from-option.order-sn p {
  text-align: left;
}
.content-module .from-wrap .module-E {
  margin-top: 16px;
  padding-bottom: 0px;
}
.content-module .from-wrap .module-E > ul {
  display: table;
  width: calc(100% - 32px);
}
.content-module .from-wrap .module-E > ul li.from-option {
  display: table-cell;
  overflow: hidden;
}
.content-module .from-wrap .module-E > ul li.from-option .txt {
  display: inline-block;
  width: 100%;
  text-align: left;
}
.content-module .from-wrap .module-E > ul li.from-option span.icon-wrap {
  display: none;
}
.content-module .from-wrap .module-E > ul li.from-option.list-nb {
  width: 64px;
  max-width: 64px;
  min-width: 64px;
}
.content-module .from-wrap .module-E > ul li.from-option.list-nb .txt {
  text-align: center;
}
.content-module .from-wrap .module-E > ul li.from-option.function-code {
  width: 160px;
  max-width: 160px;
  text-align: left;
}
.content-module .from-wrap .module-E > ul li.from-option.function-code .txt {
  color: var(--PFC);
  cursor: pointer;
}
.content-module .from-wrap .module-E > ul li.from-option.function-title {
  width: 224px;
  max-width: 224px;
  text-align: left;
}
.content-module .from-wrap .module-E > ul li.from-option.user-title-e3 {
  width: 160px;
  max-width: 160px;
}
.content-module .from-wrap .module-E > ul li.from-option.user-title-e3 .txt {
  text-align: center;
}
.content-module .from-wrap .module-E > ul li.from-option.user-unit {
  width: 192px;
  max-width: 192px;
}
.content-module .from-wrap .module-E > ul li.from-option.user-unit .txt {
  text-align: center;
}
.content-module .from-wrap .module-E > ul li.from-option.user-unit-e4 {
  width: 192px;
  max-width: 192px;
  text-align: left;
}
.content-module .from-wrap .module-E > ul li.from-option.user-unit-e4 .txt {
  width: -moz-max-content;
  width: max-content;
  color: var(--PFC);
  cursor: pointer;
}
.content-module .from-wrap .module-E > ul li.from-option.account {
  width: 196px;
  max-width: 196px;
  text-align: center;
}
.content-module .from-wrap .module-E > ul li.from-option.account .txt {
  width: -moz-max-content;
  width: max-content;
  color: var(--PFC);
  cursor: pointer;
}
.content-module .from-wrap .module-E > ul li.from-option.user-name {
  width: 112px;
  max-width: 112px;
}
.content-module .from-wrap .module-E > ul li.from-option.user-name .txt {
  text-align: center;
}
.content-module .from-wrap .module-E > ul li.from-option.user-department {
  width: 196px;
  max-width: 196px;
}
.content-module .from-wrap .module-E > ul li.from-option.user-department .txt {
  text-align: center;
}
.content-module .from-wrap .module-E > ul li.from-option.user-title {
  width: 160px;
  max-width: 160px;
  text-align: center;
}
.content-module .from-wrap .module-E > ul li.from-option.user-title .txt {
  width: -moz-max-content;
  width: max-content;
  color: var(--PFC);
  cursor: pointer;
}
.content-module .from-wrap .module-E > ul li.from-option.contact {
  width: 192px;
  max-width: 192px;
}
.content-module .from-wrap .module-E > ul li.from-option.superior-unit {
  width: 192px;
  max-width: 192px;
  text-align: left;
}
.content-module .from-wrap .module-E > ul li.from-option.superior-unit .txt {
  width: -moz-max-content;
  width: max-content;
  color: var(--PFC);
  cursor: pointer;
}
.content-module .from-wrap .module-E > ul li.from-option.function-status {
  width: 128px;
  max-width: 128px;
}
.content-module .from-wrap .module-E > ul li.from-option.function-status .txt {
  text-align: center;
}
.content-module .from-wrap .module-E > ul.title .from-option {
  padding: 0 8px;
}
.content-module .from-wrap .module-E > ul.title .from-option p {
  position: relative;
  width: -moz-max-content;
  width: max-content;
}
.content-module .from-wrap .module-E > ul.title .from-option span.icon-wrap {
  height: 40px;
  background-image: url(../images/icon_sort_default.png);
  background-size: 19px;
}
.content-module .from-wrap .module-E > ul.title .from-option.list-nb p {
  width: 100%;
}
.content-module .from-wrap .module-E > ul.title .from-option.list-nb p::before {
  content: "編號";
}
.content-module .from-wrap .module-E > ul.title .from-option.function-code p::before {
  content: "功能代碼";
}
.content-module .from-wrap .module-E > ul.title .from-option.function-title p::before {
  content: "功能名稱";
}
.content-module .from-wrap .module-E > ul.title .from-option.function-info p::before {
  content: "功能描述";
}
.content-module .from-wrap .module-E > ul.title .from-option.user-unit p {
  width: 100%;
}
.content-module .from-wrap .module-E > ul.title .from-option.user-unit p::before {
  content: "出版單位";
}
.content-module .from-wrap .module-E > ul.title .from-option.user-unit-e4 p::before {
  content: "出版單位";
}
.content-module .from-wrap .module-E > ul.title .from-option.user-title p {
  width: 100%;
}
.content-module .from-wrap .module-E > ul.title .from-option.user-title p::before {
  content: "角色名稱";
}
.content-module .from-wrap .module-E > ul.title .from-option.user-title-e3 p {
  width: 100%;
}
.content-module .from-wrap .module-E > ul.title .from-option.user-title-e3 p::before {
  content: "角色";
}
.content-module .from-wrap .module-E > ul.title .from-option.user-title-e3 span.icon-wrap {
  display: inline-block;
}
.content-module .from-wrap .module-E > ul.title .from-option.user-info p::before {
  content: "角色描述";
}
.content-module .from-wrap .module-E > ul.title .from-option.account p {
  width: 100%;
}
.content-module .from-wrap .module-E > ul.title .from-option.account p::before {
  content: "登入帳號";
}
.content-module .from-wrap .module-E > ul.title .from-option.user-name p {
  width: 100%;
}
.content-module .from-wrap .module-E > ul.title .from-option.user-name p::before {
  content: "姓名";
}
.content-module .from-wrap .module-E > ul.title .from-option.user-name span.icon-wrap {
  display: inline-block;
}
.content-module .from-wrap .module-E > ul.title .from-option.user-department p {
  width: 100%;
}
.content-module .from-wrap .module-E > ul.title .from-option.user-department p::before {
  content: "部門";
}
.content-module .from-wrap .module-E > ul.title .from-option.contact p::before {
  content: "聯絡窗口";
}
.content-module .from-wrap .module-E > ul.title .from-option.superior-unit p::before {
  content: "上層單位";
}
.content-module .from-wrap .module-E > ul.title .from-option.function-status p {
  width: 100%;
}
.content-module .from-wrap .module-E > ul.title .from-option.function-status p::before {
  content: "狀態";
}
.content-module .from-wrap .module-E > ul.title .from-option.from-title {
  width: 360px;
}
.content-module .from-wrap .module-E > ul.title .from-option.from-title p {
  width: 100%;
  text-align: left;
}
.content-module .from-wrap .module-E > ul.title .from-option.from-title p::before {
  content: "欄位名稱";
}
.content-module .from-wrap .module-E > ul.title .from-option.default-vaule p::before {
  content: "預設值";
}
.content-module .from-wrap .module-E > ul.from-content {
  z-index: 1;
  margin-top: -1px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid var(--G300);
  box-sizing: border-box;
}
.content-module .from-wrap .module-E > ul.from-content li.from-option {
  min-height: 72px;
  padding: 0 8px;
  box-sizing: border-box;
  border-right: 1px solid var(--G300);
}
.content-module .from-wrap .module-E > ul.from-content li.from-option:nth-child(1) {
  border-left: 1px solid var(--G300);
}
.content-module .from-wrap .module-E > ul.from-content li.from-option.from-title {
  width: 360px;
  min-width: 360px;
}
.content-module .from-wrap .module-E > ul.from-content.fuct-sub .function-title {
  padding-left: 24px;
}
.content-module .from-wrap .module-E > ul.from-content.on li.from-option.function-status {
  color: var(--HLCH);
}
.content-module .from-wrap .module-E > ul.from-content.on li.from-option.function-status .txt::before {
  content: "啟用";
}
.content-module .from-wrap .module-E > ul.from-content.off li.from-option {
  background-color: var(--G100);
}
.content-module .from-wrap .module-E > ul.from-content.off li.from-option.function-status .txt::before {
  content: "停用";
}
.content-module.module-C4 .from-wrap .module-C > ul li.from-option.coupon-status {
  display: none;
}
.content-module.module-C4 .from-wrap .module-C > ul li.from-option.logout-status {
  display: flex;
}
.content-module.module-C5 .from-wrap .module-C > ul li.from-option.order-number {
  display: flex;
}
.content-module.module-C5 .from-wrap .module-C > ul li.from-option.logout-status {
  display: none;
}

/*Dark Mode Style*/
body.darkmode {
  background-color: var(--BGCS);
  /*Loading 讀取畫面*/
  /*彈出視窗*/
}
body.darkmode *::-moz-selection {
  color: #aae6f0 !important;
  background-color: rgba(85, 25, 15, 0.8);
}
body.darkmode *::selection {
  color: #aae6f0 !important;
  background-color: rgba(85, 25, 15, 0.8);
}
body.darkmode h1,
body.darkmode h2,
body.darkmode h3,
body.darkmode p,
body.darkmode span,
body.darkmode strong,
body.darkmode li,
body.darkmode a,
body.darkmode b {
  color: var(--DPSC) !important;
}
body.darkmode td,
body.darkmode th {
  color: var(--DPSC) !important;
}
body.darkmode a:hover,
body.darkmode a:active {
  color: var(--DPFC) !important;
}
body.darkmode .input-wrap input {
  background-color: var(--UIBG);
  border: var(--BLC);
  color: var(--DPSC);
}
body.darkmode .input-wrap label:hover input[type=text],
body.darkmode .input-wrap label:hover input[type=email],
body.darkmode .input-wrap label:hover input[type=password],
body.darkmode .input-wrap label:hover input[type=number],
body.darkmode .input-wrap label .hover input[type=text],
body.darkmode .input-wrap label .hover input[type=email],
body.darkmode .input-wrap label .hover input[type=password],
body.darkmode .input-wrap label .hover input[type=number] {
  outline-style: solid;
  outline-color: rgba(234, 211, 176, 0.4745098039) !important;
}
body.darkmode .input-wrap.date label:hover input,
body.darkmode .input-wrap.date label .hover input {
  outline-style: solid;
  outline-color: rgba(234, 211, 176, 0.4745098039) !important;
}
body.darkmode .input-wrap.date label span::before {
  background-color: var(--BLC);
}
body.darkmode .input-wrap.nb-select label .icon-wrap.outer {
  background-image: url(../images/icon_tg_collapse_w_h.png);
}
body.darkmode .input-wrap.nb-select label .icon-wrap.outer:hover {
  background-image: url(../images/icon_tg_collapse_dark_n.png);
}
body.darkmode .input-wrap.nb-select label .icon-wrap.inner {
  background-color: rgba(241, 241, 241, 0.3490196078);
}
body.darkmode .input-wrap.nb-select label .icon-wrap.inner:hover {
  background-image: url(../images/icon_tg_expand_dark_h.png);
}
body.darkmode textarea {
  background-color: var(--UIBG);
  border: var(--BLC) !important;
  color: var(--DPSC);
}
body.darkmode .btn-wrap .btn {
  background-color: var(--BTNC);
}
body.darkmode .btn-wrap .btn P {
  color: var(--G00) !important;
}
body.darkmode .btn-wrap .btn:hover, body.darkmode .btn-wrap .btn.hover, body.darkmode .btn-wrap .btn.active {
  background-color: var(--ALCH);
}
body.darkmode .btn-wrap.disabled .btn {
  color: var(--G200) !important;
  background-color: var(--BTNC) !important;
  border: 1px solid var(--BTNC) !important;
  opacity: 0.5;
}
body.darkmode .btn-wrap.disabled .btn P {
  color: var(--G400) !important;
}
body.darkmode .btn-wrap.typeC .btn {
  color: var(--G100) !important;
  background-color: transparent !important;
  border: 1px solid var(--G100) !important;
}
body.darkmode .btn-wrap.typeC .btn P {
  color: var(--G100) !important;
}
body.darkmode .btn-wrap.typeC .btn:hover, body.darkmode .btn-wrap.typeC .btn.hover, body.darkmode .btn-wrap.typeC .btn.active {
  border: 1px solid var(--BTNC) !important;
}
body.darkmode .btn-wrap.typeC .btn:hover p, body.darkmode .btn-wrap.typeC .btn.hover p, body.darkmode .btn-wrap.typeC .btn.active p {
  color: var(--BTNC) !important;
  transition: ease 0.35s;
}
body.darkmode .loading-wrap .loading {
  background-color: rgba(0, 0, 0, 0.65);
}
body.darkmode .loading-wrap .loading .sk-chase-dot::before {
  background-color: var(--DPFC);
}
body.darkmode .loading-wrap .loading .load-text {
  background-color: #1c1c1c;
  mix-blend-mode: lighten;
}
body.darkmode .popup-view-wrap input {
  background-color: var(--UIBG);
  border: var(--BLC);
  color: var(--DPSC);
}
body.darkmode .popup-view-wrap .msg-skin {
  background-color: var(--BGCF);
  border: 1px solid var(--BLC);
}
body.darkmode .popup-view-wrap.autoplay .msg-skin .title,
body.darkmode .popup-view-wrap.autoplay .msg-skin .text {
  color: var(--DPSC) !important;
}
body.darkmode .popup-view-wrap.off-shelves-check .text::before {
  background-color: var(--BGCF);
  padding-left: 0px;
}
body.darkmode .popup-view-wrap.off-shelves-check .text::after {
  left: 114px;
}
body.darkmode .popup-view-wrap.modify-record .msg-skin > .text strong {
  background-color: var(--UIBG);
  border-color: var(--BLC);
}
body.darkmode .popup-view-wrap.extend-period .msg-skin .extend-period-wrap > div {
  color: var(--DPSC);
}
body.darkmode .popup-view-wrap.extend-period .msg-skin .extend-period-wrap > div label::before {
  border: 1px solid var(--BLC);
}
body.darkmode .popup-view-wrap.extend-period .msg-skin .extend-period-wrap input[type=radio]:checked ~ div label::before {
  border: 2px solid var(--DPFC);
}
body.darkmode .popup-view-wrap.extend-period .msg-skin .extend-period-wrap input[type=radio]:checked ~ div label::after {
  background-color: var(--DPFC);
}
body.darkmode header {
  background-color: var(--BGCF);
  border-bottom: 1px solid var(--G700);
}
body.darkmode header .toolbar-wrap .service-skin label::before {
  background-color: var(--DPSC);
}
body.darkmode header .toolbar-wrap .service-skin .service-wrap {
  background-color: var(--BTNC);
}
body.darkmode header .toolbar-wrap .member-skin {
  background-color: var(--UIBG);
}
body.darkmode header .toolbar-wrap .member-skin .short-name {
  background-color: var(--BTNC);
}
body.darkmode header .toolbar-wrap .member-skin::after {
  background-color: var(--UIBG);
}
body.darkmode header .toolbar-wrap .readnode-skin .btn {
  background-color: transparent !important;
}
body.darkmode header .toolbar-wrap .readnode-skin .btn p {
  background-color: var(--BTNC) !important;
  border: transparent;
  box-shadow: none;
}
body.darkmode header .toolbar-wrap .readnode-skin .btn-wrap.switch.readmode .btn .bg {
  background-color: var(--UIBG) !important;
  border: transparent !important;
  box-shadow: none;
}
body.darkmode .nav-wrap {
  background-color: var(--BGCT);
  border-right: 1px solid var(--BLC);
}
body.darkmode .nav-wrap .nav-menu-wrap .nav-title-wrap {
  border-bottom: 1px dashed var(--BLC);
}
body.darkmode .nav-wrap .nav-menu-wrap .nav-title-wrap:hover, body.darkmode .nav-wrap .nav-menu-wrap .nav-title-wrap.active {
  background-color: var(--BGCF);
}
body.darkmode .nav-wrap .nav-menu-wrap .nav-title-wrap.ebooks h2 ~ .title-icon {
  background-image: url(../images/icon_nav_setbook_dark_n.png);
}
body.darkmode .nav-wrap .nav-menu-wrap .nav-title-wrap.ebooks ~ .nav-submenu-wrap::after {
  background-image: url(../images/icon_nav_setbook_dark_n.png) !important;
}
body.darkmode .nav-wrap .nav-menu-wrap .nav-title-wrap.tickets h2 ~ .title-icon {
  background-image: url(../images/icon_nav_tickets_dark_n.png);
}
body.darkmode .nav-wrap .nav-menu-wrap .nav-title-wrap.tickets ~ .nav-submenu-wrap::after {
  background-image: url(../images/icon_nav_tickets_dark_n.png) !important;
}
body.darkmode .nav-wrap .nav-menu-wrap .nav-title-wrap.report h2 ~ .title-icon {
  background-image: url(../images/icon_nav_report_dark_n.png);
}
body.darkmode .nav-wrap .nav-menu-wrap .nav-title-wrap.report ~ .nav-submenu-wrap::after {
  background-image: url(../images/icon_nav_report_dark_n.png) !important;
}
body.darkmode .nav-wrap .nav-menu-wrap .nav-title-wrap.account h2 ~ .title-icon {
  background-image: url(../images/icon_nav_account_dark_n.png);
}
body.darkmode .nav-wrap .nav-menu-wrap .nav-title-wrap.account ~ .nav-submenu-wrap::after {
  background-image: url(../images/icon_nav_account_dark_n.png) !important;
}
body.darkmode .nav-wrap .nav-menu-wrap .nav-submenu-wrap {
  background-color: var(--BGCF);
}
body.darkmode .nav-wrap .nav-menu-wrap .nav-submenu-wrap::before {
  color: var(--DPFC) !important;
  border-bottom: 1px solid var(--BLC) !important;
}
body.darkmode .nav-wrap .nav-menu-wrap .nav-submenu-wrap li.active {
  border-right: 4px solid var(--DPFC);
}
body.darkmode .nav-wrap > input[type=checkbox]:checked ~ .btn-toggle .icon-wrap.toggle-skin {
  background-image: url(../images/icon_nav_toggle_dark_a.png);
}
body.darkmode main {
  /*Second Page*/
}
body.darkmode main .breadcrumb-wrap > div > a.active {
  color: var(--DPFC) !important;
}
body.darkmode main .content {
  background-color: var(--BGCF);
}
body.darkmode main .content.index > h2 {
  mix-blend-mode: hard-light;
}
body.darkmode main .content .step-wrap > div {
  background-color: transparent !important;
  border: 1px solid var(--DPSC) !important;
}
body.darkmode main .content .step-wrap > div.active {
  background-color: var(--DPFC) !important;
  border: var(--DPFC) !important;
}
body.darkmode main .content .step-wrap > div.active p,
body.darkmode main .content .step-wrap > div.active span {
  color: var(--G900) !important;
}
body.darkmode main .content .step-wrap > div.finish {
  background-color: var(--DPFC) !important;
  border: var(--DPFC) !important;
  opacity: 0.65;
}
body.darkmode main .content .step-wrap > div.finish p,
body.darkmode main .content .step-wrap > div.finish span {
  color: var(--G900) !important;
}
body.darkmode main .content .search-bar-wrap label {
  background-color: var(--UIBG) !important;
}
body.darkmode main .content .search-bar-wrap label > .search {
  background-color: var(--BTNC) !important;
}
body.darkmode main .content .search-bar-wrap label input {
  color: var(--G00);
}
body.darkmode main .content .search-bar-wrap label input::-moz-placeholder {
  color: var(--DPSC);
}
body.darkmode main .content .search-bar-wrap label input::placeholder {
  color: var(--DPSC);
}
body.darkmode main .content .search-bar-wrap label > ul {
  border-color: var(--BLC) !important;
}
body.darkmode main .content .search-bar-wrap label > ul li {
  background-color: var(--UIBG) !important;
}
body.darkmode main .content .search-bar-wrap label > ul li:hover, body.darkmode main .content .search-bar-wrap label > ul li:active, body.darkmode main .content .search-bar-wrap label > ul li:focus {
  filter: brightness(1.25);
}
body.darkmode main .content-module {
  background-color: var(--BGCT);
  box-shadow: none;
}
body.darkmode main .content-module .editpage-title .icon-wrap.backmain {
  background-image: url(../images/icon_backmain_dark_n.png);
}
body.darkmode main .content-module .editpage-title h2::before {
  background-color: var(--BLC);
}
body.darkmode main .content-module .fuction-title-wrap .title,
body.darkmode main .content-module .fuction-title-wrap .annotation {
  background-color: var(--BGCT);
}
body.darkmode main .content-module .fuction-title-wrap .title strong:hover {
  background-color: var(--ALCH) !important;
}
body.darkmode main .content-module .fuction-title-wrap.page1 .page1 {
  background-color: var(--BTNC) !important;
}
body.darkmode main .content-module .fuction-title-wrap.page1 .page1::before {
  color: var(--DPSC) !important;
}
body.darkmode main .content-module .fuction-title-wrap.page2 .page2 {
  background-color: var(--BTNC) !important;
}
body.darkmode main .content-module .fuction-title-wrap.page2 .page2::before {
  color: var(--DPSC) !important;
}
body.darkmode main .content-module .main-fuction-wrap .sort-bar-wrap > label::before {
  background-image: url(../images/icon_sort_dark_n.png);
}
body.darkmode main .content-module .main-fuction-wrap .sort-bar-wrap > label h4 {
  color: var(--DPSC);
}
body.darkmode main .content-module .main-fuction-wrap .advanced > .title p {
  background-color: transparent;
}
body.darkmode main .content-module .main-fuction-wrap .advanced > .title span {
  background-image: url(../images/icon_tg_collapse_dark_n.png) !important;
}
body.darkmode main .content-module .main-fuction-wrap .advanced .opction-skin {
  background-color: var(--BGCF);
}
body.darkmode main .content-module .main-fuction-wrap .advanced .opction-skin .criteria-wrap label p {
  background-color: transparent;
  border: 1px solid var(--BLC);
}
body.darkmode main .content-module .main-fuction-wrap .advanced .opction-skin .criteria-wrap label .filter-option p {
  background-color: var(--FMBGO);
  transition: ease 0.35s;
}
body.darkmode main .content-module .main-fuction-wrap .advanced .opction-skin .criteria-wrap label .filter-option li:hover p {
  filter: brightness(1.5);
}
body.darkmode main .content-module .main-fuction-wrap .advanced .opction-skin.group2 .criteria-wrap:nth-child(2) {
  border-left: 1px dashed var(--BLC);
}
body.darkmode main .content-module .main-fuction-wrap .advanced .fuction-wrap .btn-wrap.cancel .btn {
  background-color: transparent !important;
  border: 1px solid var(--BLC) !important;
}
body.darkmode main .content-module .main-fuction-wrap .advanced .fuction-wrap .btn-wrap.cancel .btn:hover {
  border: 1px solid var(--DPSC) !important;
}
body.darkmode main .content-module .main-fuction-wrap .sort-bar-wrap > label > p.option-value,
body.darkmode main .content-module .main-fuction-wrap .export-bar-wrap > label > p.option-value {
  border: 1px solid var(--BLC);
}
body.darkmode main .content-module .main-fuction-wrap .sort-bar-wrap > label > ul,
body.darkmode main .content-module .main-fuction-wrap .export-bar-wrap > label > ul {
  background-color: var(--FMBGO);
  border: 1px solid var(--BLC) !important;
  box-shadow: none;
}
body.darkmode main .content-module .main-fuction-wrap .sort-bar-wrap > label > ul li,
body.darkmode main .content-module .main-fuction-wrap .export-bar-wrap > label > ul li {
  margin-top: -1px;
  border: 1px solid var(--BLC) !important;
}
body.darkmode main .content-module .main-fuction-wrap .sort-bar-wrap > label > ul li:nth-child(odd),
body.darkmode main .content-module .main-fuction-wrap .export-bar-wrap > label > ul li:nth-child(odd) {
  background-color: var(--FMBGO);
}
body.darkmode main .content-module .main-fuction-wrap .sort-bar-wrap > label > ul li:hover,
body.darkmode main .content-module .main-fuction-wrap .export-bar-wrap > label > ul li:hover {
  filter: brightness(1.5);
}
body.darkmode main .content-module .main-fuction-wrap .sort-bar-wrap .btn-wrap,
body.darkmode main .content-module .main-fuction-wrap .export-bar-wrap .btn-wrap {
  background-color: var(--BTNC);
}
body.darkmode main .content-module .main-fuction-wrap .sort-bar-wrap .btn-wrap:hover, body.darkmode main .content-module .main-fuction-wrap .sort-bar-wrap .btn-wrap.hover,
body.darkmode main .content-module .main-fuction-wrap .export-bar-wrap .btn-wrap:hover,
body.darkmode main .content-module .main-fuction-wrap .export-bar-wrap .btn-wrap.hover {
  background-color: var(--ALCH);
}
body.darkmode main .content-module .main-fuction-wrap .page-module-wrap > p strong {
  color: var(--BTNC) !important;
}
body.darkmode main .content-module .main-fuction-wrap .page-module-wrap p::before,
body.darkmode main .content-module .main-fuction-wrap .page-module-wrap strong::before,
body.darkmode main .content-module .main-fuction-wrap .page-module-wrap a::before,
body.darkmode main .content-module .main-fuction-wrap .page-module-wrap label::before {
  color: var(--DPSC) !important;
}
body.darkmode main .content-module .main-fuction-wrap .page-module-wrap p::after,
body.darkmode main .content-module .main-fuction-wrap .page-module-wrap strong::after,
body.darkmode main .content-module .main-fuction-wrap .page-module-wrap a::after,
body.darkmode main .content-module .main-fuction-wrap .page-module-wrap label::after {
  color: var(--DPSC) !important;
}
body.darkmode main .content-module .main-fuction-wrap .page-module-wrap > label {
  color: var(--DPSC);
}
body.darkmode main .content-module .main-fuction-wrap .page-module-wrap > label input {
  color: var(--G00);
  background-color: var(--UIBG);
  border: 1px solid var(--BLC);
}
body.darkmode main .content-module .from-wrap {
  background-color: var(--BGCT);
}
body.darkmode main .content-module .from-wrap .from-module {
  /*Module C*/
}
body.darkmode main .content-module .from-wrap .from-module > ul.title {
  background-color: var(--BGCF);
  border: 1px solid var(--BLC);
}
body.darkmode main .content-module .from-wrap .from-module > ul.from-content {
  background-color: var(--BGCF);
  border-bottom: 1px solid var(--BLC);
}
body.darkmode main .content-module .from-wrap .from-module > ul.from-content > li.from-option {
  border-right: 1px solid var(--BLC);
}
body.darkmode main .content-module .from-wrap .from-module > ul.from-content > li.from-option:nth-child(1) {
  border-left: 1px solid var(--BLC);
}
body.darkmode main .content-module .from-wrap .from-module > ul.from-content > li.from-option.bookcover span {
  background-color: var(--G900);
}
body.darkmode main .content-module .from-wrap .from-module > ul.from-content > li.from-option.review p:hover {
  color: var(--DPFC) !important;
}
body.darkmode main .content-module .from-wrap .from-module > ul.from-content > li.from-option .msg-view {
  background-color: rgba(0, 0, 0, 0.8);
  box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.25);
}
body.darkmode main .content-module .from-wrap .from-module.module-C ul.from-content li.from-option.logout-status p.txt {
  background-color: var(--BTNC);
}
body.darkmode main .content-module .from-wrap .from-module.module-C ul.from-content li.from-option.logout-status p.txt:hover {
  background-color: var(--ALCH);
}
body.darkmode main .content-module .from-wrap .from-module.module-C ul.from-content li.from-option.logout-status.logged-out p.txt {
  background-color: transparent;
  cursor: auto;
}
body.darkmode main .content-module .from-wrap .from-module.module-C ul.from-content li.from-option.logout-status.logged-out p.txt::before {
  color: var(--DPSC);
}
body.darkmode main .content-module .from-wrap .from-module.module-C ul.from-content li.from-option input[type=radio]:checked ~ label::before {
  border: 2px solid var(--DPFC);
}
body.darkmode main .content-module .from-wrap .from-module.module-C ul.from-content li.from-option input[type=radio]:checked ~ label::after {
  background-color: var(--DPFC);
}
body.darkmode main .editpage-from-wrap .title h3 {
  background-color: var(--BGCT) !important;
}
body.darkmode main .editpage-from-wrap .from-row .subfrom > div.input-wrap.date input {
  mix-blend-mode: exclusion;
}
body.darkmode main .editpage-from-wrap.print .from-row .check-group2 label ~ span {
  color: var(--DPFC) !important;
}
body.darkmode main .editpage-from-wrap.print .from-row .check-group2 .input-wrap:hover label {
  outline: none;
}
body.darkmode main .editpage-from-wrap.print .from-row .check-group2 .input-wrap.percentage:hover label input {
  outline-style: solid !important;
  outline-color: rgba(234, 211, 176, 0.7294117647) !important;
}
body.darkmode main .editpage-from-wrap.print .from-row .review-view {
  background-color: var(--UIBG);
  border: 8px solid var(--UIBG);
}
body.darkmode main .editpage-from-wrap.print .from-row .review-view .review-img {
  border: 5px solid var(--BLC);
}
body.darkmode .module-B5 .batch-example .btn-download::before {
  background: url(../images/icon_download_dark_n.png) no-repeat center;
  background-size: 18px;
}/*# sourceMappingURL=public.css.map */