@charset "UTF-8";
:root {
  --star: #e60213;
  --color-note: #e60213;
  --color-01-1: #e3f0f0;
  --color-01-2: #cde8e8;
  --color-01-3: #9fc9c9;
  --color-01-4: #75c9c9;
  --color-01-5: #47a8a8;
  --color-01-6: #1f8d8d;
  --color-02-1: #e2eeff;
  --color-02-2: #c5d9f5;
  --color-02-3: #9bb6db;
  --color-02-4: #6587b4;
  --color-02-5: #34527a;
  --color-02-6: #1c385c;
  --color-03-1: #ddf5e5;
  --color-03-2: #b6dfc3;
  --color-03-3: #6bca8b;
  --color-03-4: #279b4e;
  --color-03-5: #1b7238;
  --color-03-6: #0d421f;
  --color-04-1: #ffeee7;
  --color-04-2: #ffdbcb;
  --color-04-3: #fcbda0;
  --color-04-4: #f39265;
  --color-04-5: #ee7036;
  --color-04-6: #da4b08;
  --color-05-1: #cff0ff;
  --color-05-2: #94ddff;
  --color-05-3: #3cb9f3;
  --color-05-4: #008ccf;
  --color-05-5: #016da0;
  --color-05-6: #004a6d;
  --color-06-1: #faedeb;
  --color-06-2: #f3cbc5;
  --color-06-3: #dd9b91;
  --color-06-4: #a55b50;
  --color-06-5: #92382A;
  --color-06-6: #52221a;
  --color-07-1: #e1ddfa;
  --color-07-2: #cbc5f0;
  --color-07-3: #9188ca;
  --color-07-4: #5c5491;
  --color-07-5: #342c64;
  --color-07-6: #2d2369;
  --color-08-1: #ffd1d4;
  --color-08-2: #ff9ea5;
  --color-08-3: #ff6c76;
  --color-08-4: #ff4955;
  --color-08-5: #e60213;
  --color-08-6: #9c000a;
  --color-000000: #000000;
  --color-222222: #222222;
  --color-242424: #242424;
  --color-333333: #333333;
  --color-484848: #484848;
  --color-555555: #555555;
  --color-666666: #666666;
  --color-777777: #777777;
  --color-888888: #888888;
  --color-999999: #999999;
  --color-aaaaaa: #aaaaaa;
  --color-bbbbbb: #bbbbbb;
  --color-cccccc: #cccccc;
  --color-d4d4d4: #d4d4d4;
  --color-dddddd: #dddddd;
  --color-e4e4e4: #e4e4e4;
  --color-eeeeee: #eeeeee;
  --color-f2f2f2: #f2f2f2;
  --color-f4f4f4: #f4f4f4;
  --color-f6f6f6: #f6f6f6;
  --color-ffffff: #ffffff;
  --fontsize-48: 3rem;
  --fontsize-36: 2.25rem;
  --fontsize-32: 2rem;
  --fontsize-30: 1.875rem;
  --fontsize-28: 1.75rem;
  --fontsize-26: 1.6rem;
  --fontsize-24: 1.5rem;
  --fontsize-22: 1.4rem;
  --fontsize-21: 1.3rem;
  --fontsize-20: 1.25rem;
  --fontsize-19: 1.2rem;
  --fontsize-18: 1.125rem;
  --fontsize-17: 1.05rem;
  --fontsize-16: 1rem;
  --fontsize-15: 0.95rem;
  --fontsize-14: 0.875rem;
  --fontsize-13: 0.8rem;
  --fontsize-12: 0.75rem;
  --rounded-rectangle: 150px;
  --border-radius-full: 9999px;
  --border-radius-lg: 20px;
  --border-radius-md: 16px;
  --border-radius-sm: 9px;
  --border-radius-xs: 6px;
  --border-radius-xxs: 3px;
  --border-radius-tab: 10px 10px 0 0;
  --border-color: #ccc;
  --tableColor01-1: #d8f3ff;
  --tableColor01-2: #b9e7fd;
}

/* fontsize
--------------------------------------------------------*/
/* fontsize end
--------------------------------------------------------*/
.inner-table, input[type=radio],
input[type=checkbox],
input[type=text],
input[type=file],
input[type=password],
input[type=date],
select,
textarea, .content-box {
  border-radius: var(--border-radius-xs);
}

/* border
--------------------------------------------------------*/
/* border end
--------------------------------------------------------*/
/* breakpoints
--------------------------------------------------------*/
/* breakpoints end
--------------------------------------------------------*/
/* content-box
-----------------------------------------------------*/
.content-group {
  display: flex;
  width: 100%;
  vertical-align: top;
  margin: 0%;
}

.content-box {
  border: 1px solid var(--border-color);
  margin-bottom: 15px;
  overflow: hidden;
}

.content-box-header {
  padding: 12px 12px;
  font-size: 1.125rem;
  font-weight: bold;
  position: relative;
  color: var(--color-ffffff);
  background: var(--color-06-4);
  border-bottom: 1px solid #c7d3d2;
}

.content-box-content {
  background: #fff;
}

.content-sw {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--color-ffffff);
}

.content-sw-wrap .content-box {
  margin-bottom: 10px;
}
.content-sw-wrap .del-field {
  float: right;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  width: 39px;
  height: 39px;
  color: #fff;
  background-color: var(--color-01-5);
  border-radius: 5px;
}
.content-sw-wrap .del-field img {
  width: 70%;
}
.content-sw-wrap .add-field {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  text-decoration: none;
  padding: 15px;
  color: #333;
}
.content-sw-wrap .add-field i {
  color: var(--color-01-5);
  margin-right: 3px;
}

.content-sw-close,
.content-sw-open {
  font-size: 0.825rem;
  margin-right: 10px;
  color: #000;
  background-color: rgba(255, 255, 255, 0.78);
  border-radius: 2px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-sw-close .fa-minus,
.content-sw-close .fa-plus,
.content-sw-open .fa-minus,
.content-sw-open .fa-plus {
  margin-top: 2px;
}

.content-sw-close .fa-minus {
  display: block;
  margin-top: 2px;
}
.content-sw-close .fa-plus {
  display: none;
}

.content-sw-open .fa-minus {
  display: none;
}
.content-sw-open .fa-plus {
  display: block;
}

/* content-box end
-----------------------------------------------------*/
/* form style
-----------------------------------------------------*/
input[type=radio],
input[type=checkbox],
input[type=text],
input[type=file],
input[type=password],
input[type=date],
select,
textarea {
  padding: 8px;
  border: 1px solid #ccc;
  background-color: #fff;
}

input[type=file] {
  padding: 4.5px 8px;
}

select {
  padding: 7px 8px;
}

.date-wrap {
  display: flex;
}

.date-wrap span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.datepicker {
  padding-right: 35px !important;
  background-image: url(../images/icon/calendar.svg);
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 20px !important;
}

.info-wrap {
  display: block;
  width: 100%;
  margin: 20px 0 5px 0;
  overflow: hidden;
}
.info-wrap .btn-box {
  display: flex;
  float: right;
  gap: 5px;
}
.info-wrap .btn-box .btn {
  font-size: 96%;
  line-height: 1;
  min-width: auto;
  font-weight: bold;
  padding: 10px 15px 10px 33px;
  border-radius: 150px;
  margin: 0;
  color: var(--color-ffffff);
  display: block;
  background: var(--color-04-5);
  text-align: center;
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: 10px center;
}
.info-wrap .btn-box .btn:hover {
  filter: brightness(120%);
}
.info-wrap .btn-box .btn.add {
  background-color: var(--color-04-5);
  background-image: url(../images/icon/add-w.svg);
}
.info-wrap .btn-box .btn.export {
  background-color: var(--color-04-5);
  background-image: url(../images/icon/export-w.svg);
  background-size: 16px;
  background-position: 14px 10px;
}
.info-wrap .search-total {
  float: left;
  margin: 14px 0 0 0;
  padding: 0;
}
.info-wrap .search-total strong {
  color: #ff6056;
  margin: 0 2px;
}

.form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.form-inline > div {
  display: flex;
  align-items: flex-start;
  gap: 5px 3px;
}
.form-inline > div input[type=checkbox],
.form-inline > div input[type=radio] {
  margin-top: 4px;
}

/* form style end
-----------------------------------------------------*/
/* table
-----------------------------------------------------*/
table {
  width: 100%;
}
table tr {
  border-top: 1px solid var(--border-color);
}
table tr:first-child {
  border-top: 0;
}
table tr th,
table tr td {
  padding: 12px 12px;
  word-break: break-all;
}
table tr th a,
table tr td a {
  color: var(--color-01-5);
  text-decoration: underline;
}
table tr th {
  background: var(--color-f4f4f4);
  text-align: left;
  font-weight: normal;
}

table tr th,
table tr td {
  border-right: 1px solid var(--border-color);
}

table tr td:last-child {
  border-right: 0;
}

table.top-th tr th,
table.top-th tr td {
  text-align: center;
}

table.top-th tr th:last-child,
table.top-th tr td:last-child {
  border-right: 0;
}

table.top-th .num {
  width: 80px !important;
}

/* table end
-----------------------------------------------------*/
/* inner table
-----------------------------------------------------*/
.inner-table table {
  border-right: 1px solid var(--border-color);
}
.inner-table table .thead {
  background-color: #eaeaea;
}
.inner-table table .subthead {
  background-color: #eaeaea;
}
.inner-table table th,
.inner-table table td {
  border: 1px solid var(--border-color);
}
.inner-table table th a,
.inner-table table td a {
  color: var(--color-01-5);
  text-decoration: underline;
}

/* inner table end
-----------------------------------------------------*/
/* 按鈕
-----------------------------------------------------*/
.btn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 0 25px 0;
}
.btn-wrap .btn {
  background: #2d3772;
  color: #fff;
  border-radius: 150px;
  min-width: 100px;
  display: block;
  padding: 10px 20px;
  margin: 0 5px;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  border: 0;
}
.btn-wrap .btn:hover {
  filter: brightness(120%);
}
.btn-wrap .btn.add {
  background-color: var(--color-04-5);
  background-image: url(../images/icon/add-w.svg);
  background-size: 20px;
  padding: 10px 15px 10px 33px;
  background-repeat: no-repeat;
  background-position: 10px center;
}
.btn-wrap .close,
.btn-wrap .confirm,
.btn-wrap .certain,
.btn-wrap .search {
  background: #084e6f;
}
.btn-wrap .preview {
  background: #1eb6c4;
}
.btn-wrap .save {
  background: #25ad92;
}
.btn-wrap .cancel {
  background: #1696ff;
}
.btn-wrap .back {
  background: #2d3772;
}
.btn-wrap .export {
  background: #e13c53;
}
.btn-wrap .template {
  background: #634b8f;
}
.btn-wrap.inline {
  width: auto;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  align-items: center;
  justify-content: flex-start;
}
.btn-wrap.inline .btn {
  padding: 8px 15px;
  margin: 0 !important;
  background-color: var(--color-02-5);
}
.btn-wrap.inline .btn.add {
  padding: 8px 15px 8px 33px;
  background-position: 12px center;
  background-size: 19px;
  background-color: var(--color-04-5);
}

.btn-wrap.bottom {
  margin: 35px 0 65px 0;
}
.btn-wrap.bottom .btn {
  font-size: 1.15rem;
  min-width: 120px;
}
.btn-wrap.bottom .btn:hover {
  filter: brightness(120%);
}

.table-btn-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 5px;
}
.table-btn-wrap .table-btn {
  font-size: 90%;
  font-weight: bold;
  background: #ccc;
  padding: 8px 13px;
  border-radius: 150px;
  color: #333;
  min-width: 80px;
  border: 0;
  display: block;
  text-decoration: none;
  text-align: center;
}
.table-btn-wrap .table-btn:hover {
  filter: brightness(120%);
}
.table-btn-wrap .icon-btn {
  font-size: 90%;
  font-weight: bold;
  display: block;
  background-position: 13px center;
  background-repeat: no-repeat;
  text-decoration: none;
  background-size: 15px;
  background-color: var(--color-02-5);
  color: #fff;
  min-width: 75px;
  padding: 8px 12px 8px 30px;
  border-radius: var(--rounded-rectangle);
}
.table-btn-wrap .icon-btn:hover {
  filter: brightness(120%);
}
.table-btn-wrap .icon-btn-edit {
  background-image: url(../images/icon/edit-w.svg);
}
.table-btn-wrap .icon-btn-add {
  background-image: url(../images/icon/add-w.svg);
  background-color: var(--color-04-5);
}
.table-btn-wrap .icon-btn-del {
  background-image: url(../images/icon/del-w.svg);
}
.table-btn-wrap .icon-btn-up {
  background-image: url(../images/icon/up-w.svg);
}
.table-btn-wrap .icon-btn-down {
  background-image: url(../images/icon/down-w.svg);
}
.table-btn-wrap .icon-btn-view {
  background-image: url(../images/icon/view-w.svg);
}
.table-btn-wrap .icon-btn-upload {
  background-image: url(../images/icon/upload.svg);
}
.table-btn-wrap .icon-btn-download {
  background-image: url(../images/icon/down.svg);
}
.table-btn-wrap .icon-btn-stop {
  background-image: url(../images/icon/stop-w.svg);
}
.table-btn-wrap .icon-btn-active {
  background-image: url(../images/icon/active-w.svg);
}
.table-btn-wrap .icon-btn-function {
  background-image: url(../images/icon/function-w.svg);
}
.table-btn-wrap .icon-btn-user {
  background-image: url(../images/icon/user-w.svg);
}
.table-btn-wrap .icon-btn-modify {
  background-image: url(../images/icon/modify-w.svg);
}
.table-btn-wrap .icon-btn-view {
  background-image: url(../images/icon/view-w.svg);
}
.table-btn-wrap .icon-btn-export {
  background-image: url(../images/icon/export-w.svg);
}

.btn {
  background: #1093af;
  color: #fff;
  border-radius: 150px;
  min-width: 80px;
  display: inline-block;
  padding: 8px 15px;
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  border: 0;
  text-decoration: none !important;
}
.btn:hover {
  filter: brightness(120%);
}
.btn.del {
  background-color: var(--color-05-4);
  background-image: url(../images/icon/del-w.svg);
  background-size: 16px;
  padding: 10px 15px 10px 33px;
  background-repeat: no-repeat;
  background-position: 14px center;
  color: #fff !important;
}
.btn.upload {
  background-color: var(--color-05-4);
  background-image: url(../images/icon/upload-w.svg);
  background-size: 16px;
  padding: 10px 15px 10px 33px;
  background-repeat: no-repeat;
  background-position: 14px center;
  min-width: -moz-fit-content;
  min-width: fit-content;
  color: #fff !important;
}
.btn.download {
  background-color: var(--color-05-4);
  background-image: url(../images/icon/download-w.svg);
  background-size: 16px;
  padding: 10px 15px 10px 33px;
  background-repeat: no-repeat;
  background-position: 14px center;
  min-width: -moz-fit-content;
  min-width: fit-content;
  color: #fff !important;
}
.btn.edit {
    background-color: var(--color-05-4);
    background-image: url(../images/icon/edit-w.svg);
    background-size: 16px;
    padding: 10px 15px 10px 33px;
    background-repeat: no-repeat;
    background-position: 14px center;
    min-width: -moz-fit-content;
    min-width: fit-content;
    color: #fff !important;
}
.btn.up {
  background-color: var(--color-05-4);
  background-image: url(../images/icon/up-w.svg);
  background-size: 16px;
  padding: 10px 15px 10px 33px;
  background-repeat: no-repeat;
  background-position: 14px center;
  min-width: -moz-fit-content;
  min-width: fit-content;
  color: #fff !important;
}
.btn.down {
  background-color: var(--color-05-4);
  background-image: url(../images/icon/down-w.svg);
  background-size: 16px;
  padding: 10px 15px 10px 33px;
  background-repeat: no-repeat;
  background-position: 14px center;
  min-width: -moz-fit-content;
  min-width: fit-content;
  color: #fff !important;
}
.btn.add {
  background-color: var(--color-05-4);
  background-image: url(../images/icon/add-w.svg);
  background-size: 16px;
  padding: 10px 15px 10px 33px;
  background-repeat: no-repeat;
  background-position: 14px center;
  min-width: -moz-fit-content;
  min-width: fit-content;
  color: #fff !important;
}
.btn.small {
  background-size: 14px;
  padding: 8px 15px 8px 33px;
  font-size: 92%;
}

/* 按鈕 end
-----------------------------------------------------*/
/* paging
-----------------------------------------------------*/
.paging {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
  padding: 40px 0;
}
.paging a {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  color: #333;
  font-weight: 400;
  margin: 0 4px;
  width: 45px;
  height: 45px;
  border-radius: 4px;
  background-color: #fff;
}
.paging a i {
  color: #666;
}
.paging a.current {
  background: #23adc6;
  border: 1px solid #23adc6;
  color: #fff;
}
.paging .paging-box {
  display: flex;
}
.paging .rwd-paging-box {
  display: none;
}

/* paging end
-----------------------------------------------------*/
/* 頁籤
-----------------------------------------------------*/
.tabs {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.tabs a {
  display: block;
  background-color: #e6e6e6;
  margin: 0 3px;
  padding: 10px 10px;
  color: #333;
  border-radius: 3px 3px 0 0;
}
.tabs a.current {
  background-color: var(--color-02-5);
  color: #fff;
}

.sub-tabs {
  display: flex;
  margin-bottom: 20px;
  border-left: 1px solid #ccc;
  border-radius: 3px;
}
.sub-tabs a {
  display: block;
  background-color: #ffffff;
  padding: 10px 20px;
  color: #333;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.sub-tabs a.current {
  background-color: #16aacf;
  color: #fff;
}

/* 頁籤 end
-----------------------------------------------------*/
.funding-table {
  font-size: 92%;
  border-radius: 3px;
  width: -moz-max-content;
  width: max-content;
}
.funding-table tr {
  border: 0 !important;
}
.funding-table th,
.funding-table td {
  border: 1px solid #c7d3d2 !important;
  text-align: center;
  padding: 5px 8px;
}
.funding-table td {
  text-align: right;
}
.funding-table td input[type=text] {
  text-align: right;
}
.funding-table td .txt {
  display: block;
  padding: 0 9px;
}
.funding-table .code {
  display: inline-block;
}
.funding-table .table-btn {
  background-color: var(--color-02-5);
  color: #fff;
  font-size: 96%;
}

.kpi-table {
  font-size: 92%;
  border-radius: 3px;
  width: -moz-max-content;
  width: max-content;
  border: none;
}
.kpi-table thead tr th {
  position: sticky;
  top: -1px;
  border-top: 0 !important;
}
.kpi-table tr {
  border: 0 !important;
}
.kpi-table th,
.kpi-table td {
  border: 1px solid #c7d3d2 !important;
  border-left: 0 !important;
  text-align: center;
  padding: 5px 8px;
}
.kpi-table td .txt {
  display: block;
  padding: 0 9px;
}
.kpi-table .code {
  display: inline-block;
}
.kpi-table .table-btn {
  background-color: var(--color-02-5);
  color: #fff;
  font-size: 96%;
}

.popup-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.popup-box .popup-content-box {
  padding: 18px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 80%;
  max-width: 900px;
  max-height: 90%;
  border-radius: 3px;
}
.popup-box .popup-content-box .popup-content {
/*  max-height: 400px;*/
/*  overflow-y: auto;*/
  max-height: 70vh;
  overflow-y: scroll;
}
.popup-box .popup-content-box .close-popup {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  color: #fff;
  border-radius: 100%;
  z-index: 1;
  width: 32px;
  height: 32px;
  padding: 5px 5px 5px 6px;
  right: -17px;
  top: -17px;
}
.popup-box .btn-wrap {
  margin: 0;
  padding: 20px 0;
}

.popup-lity {
  overflow: auto;
  background: #fff;
  padding: 10px;
  width: 80%;
  height: 50%;
  max-width: 100%;
  max-height: 500px;
  border-radius: 3px;
}

.popup-reason .popup-content {
  width: 80%;
  height: 90%;
  max-width: 700px;
  max-height: 410px;
  min-height: 200px;
}

.popup-filename .popup-content,
.popup-upload .popup-content {
  width: 80%;
  max-width: 800px;
  height: -moz-fit-content;
  height: fit-content;
  min-height: auto;
}

.select-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.select-item .input {
  width: 42%;
}
.select-item .input select {
  height: 232px;
}
.select-item .control {
  width: 10%;
  min-width: 150px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.select-item .control a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 120px;
  border-radius: 150px;
  padding: 8px 0;
  text-align: center;
  margin: 4px 0;
  text-decoration: none;
  font-weight: bolder;
}
.select-item .control .add {
  background-color: #bbecec;
}
.select-item .control .add:hover {
  filter: brightness(90%);
}
.select-item .control .remove {
  background-color: #e0ecec;
}
.select-item .control .remove:hover {
  filter: brightness(90%);
}

/* back to top
-----------------------------------------------------*/
.back-top {
  position: fixed;
  bottom: 65px;
  right: 22px;
  z-index: 10;
  width: 40px;
  height: 40px;
  font-size: 0;
  display: block;
  border-radius: 100%;
  background: url(../images/arr-up-white.svg) center 7px no-repeat var(--color-333333);
  background-size: 25px;
}

.back-top:hover {
  filter: brightness(110%);
}

/* back to top
-----------------------------------------------------*/
/* accordion
-----------------------------------------------------*/
.accordion {
  width: 100%;
  margin: 0 auto;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.accordion:last-child {
  margin-bottom: none;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  text-align: left;
  cursor: pointer;
  border: 0px solid #fff;
  background-color: var(--neutral-fill-0);
  width: 100%;
}

.accordion-header:hover {
  background: var(--theme-background-4);
}

.accordion-header .num {
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  /* 1.575rem */
  color: var(--theme-foreground-onColor-2);
  background-color: var(--color-02-1);
  padding: 0.125rem 0.5rem 0rem 0.5rem;
  /* 2px 8px 0px 8px */
  border-radius: 6px;
  position: relative;
}

.accordion-header .num span {
  position: relative;
  z-index: 2;
}

.accordion-header .num::after {
  content: "";
  position: absolute;
  /* 將原本的 background 改為 mask-image */
  mask-image: url("/assets/images/num.svg");
  mask-repeat: no-repeat;
  mask-size: 14px 14px;
  /* 確保遮罩大小正確 */
  -webkit-mask-image: url("/assets/images/num.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 14px 14px;
  /* 設定實際要顯示的顏色 */
  background-color: var(--theme-background-4);
  width: 14px;
  height: 14px;
  left: 0px;
  bottom: -4px;
  z-index: 1;
}

.accordion-header span:nth-child(3) {
  color: var(--theme-foreground-1);
  transition: transform 0.3s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.accordion-title {
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.8;
  /* 150% */
  margin: 0;
  flex: 1 1 0;
}

.material-symbols-outlined {
  font-size: 1em;
  transition: transform 0.2s ease;
}

.accordion-content {
  visibility: hidden;
  max-height: 0;
  transition: max-height 0.3s ease, padding 0.35s ease, visibility 0s linear 0.3s;
  background: #fff;
  font-size: 1rem;
  color: var(--neutral-text-1);
  padding: 0px 1rem;
  line-height: 1.8;
}

.accordion-content[aria-hidden=false] {
  visibility: visible;
  max-height: 600px;
  /* Set a value large enough for the content */
  padding: 1rem;
  transition: max-height 0.2s ease, padding 0.22s ease, visibility 0s linear 0s;
}

.accordion-content p {
  margin: 0;
}

.icon-rotate {
  transform: rotate(45deg);
}

.role-acess {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.role-acess5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.popup-window {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 2rem;
    height: 90%;
    width: 80%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.popup-window-btn {
    margin: 0 5px;
    padding: 10px 20px;
    min-width: 100px;
    background-color: #2d3772;
    color: #ffffff;
    border-radius: 150px;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    border: 0;
}

/* accordion end
-----------------------------------------------------*//*# sourceMappingURL=components.css.map */