@charset "UTF-8";
:root {
  --star: #de2f2f;
  --color-note: #de2f2f;
  --color-01-1: #e3f0f0;
  --color-01-2: #b3dae0;
  --color-01-3: #7abac4;
  --color-01-4: #4194a1;
  --color-01-5: #148191;
  --color-01-6: #0c6055;
  --color-02-1: #d6dded;
  --color-02-2: #9ba6ba;
  --color-02-3: #6F7B91;
  --color-02-4: #4a5770;
  --color-02-5: #34527a;
  --color-02-6: #1e2b42;
  --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-000000: #000000;
  --color-222222: #222222;
  --color-242424: #242424;
  --color-333333: #333333;
  --color-484848: #484848;
  --color-555555: #555555;
  --color-666666: #666666;
  --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: 5px;
  --border-radius-xxs: 3px;
  --border-radius-tab: 10px 10px 0 0;
  --border-color: #c7d3d2;
  --tableColor01-1: #d8f3ff;
  --tableColor01-2: #b9e7fd;
}

/* fontsize
--------------------------------------------------------*/
/* fontsize end
--------------------------------------------------------*/
/* 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);
  border-radius: 3px;
  margin-bottom: 15px;
}

.content-box-header {
  padding: 12px 12px;
  font-size: 1.125rem;
  font-weight: bold;
  position: relative;
  color: #333;
  background: #c5efe9;
  border-bottom: 1px solid #c7d3d2;
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.content-sw {
  color: #fff;
  padding: 4px 12px;
  position: relative;
  background-color: var(--color-01-6);
  display: flex;
  font-size: 80%;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--rounded-rectangle);
}
.content-sw .open {
  display: none;
}

/* 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 {
  border-radius: 3px;
  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: 95% 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 #c7d3d2;
}
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: #e2f3f2;
  text-align: left;
  font-weight: normal;
}

table tr th,
table tr td {
  border-right: 1px solid #c7d3d2;
}

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-box {
  border-radius: 3px;
}
.inner-table-box table th,
.inner-table-box table td {
  border: 1px solid var(--border-color);
}
.inner-table-box table th a,
.inner-table-box table td a {
  color: var(--color-01-5);
  text-decoration: underline;
}

/* inner table end
-----------------------------------------------------*/
/* 按鈕
-----------------------------------------------------*/
.btn-wrap {
  width: 100%;
  display: flex;
  justify-content: 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 10px;
  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: 20px 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-record {
  background-image: url(../images/icon/record-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);
}

.btn {
  background: #1093af;
  color: #fff;
  border-radius: 150px;
  min-width: 90px;
  display: inline-block;
  padding: 8px 15px;
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  border: 0;
  text-decoration: none;
}
.btn:hover {
  filter: brightness(120%);
}

/* 按鈕 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 20px;
  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
-----------------------------------------------------*/
.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%, -70%);
  background-color: #fff;
  width: 80%;
  max-width: 900px;
  max-height: 500px;
  border-radius: 3px;
}
.popup-box .popup-content-box .popup-content {
  max-height: 400px;
  overflow-y: auto;
}
.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%);
}/*# sourceMappingURL=components.css.map */