@charset "UTF-8";
/*----------------------------------------------------*/
/*----------------------------------------------------*/
/* 定義 */
/*----------------------------------------------------*/
/*----------------------------------------------------*/
/*----------------------------------------------------*/
/*----------------------------------------------------*/
/* font */
/* Noto Sans TC - 47 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap");
/* --------------------------------------------------------------- */
/*reset*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, iframe, button, a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  letter-spacing: 0.7px;
  vertical-align: baseline;
  font: normal 16px/100% "Noto Sans TC", sans-serif;
  color: #434343;
  text-decoration: none;
  box-sizing: border-box;
}

body {
  line-height: 1;
  background: #fdffff;
}

html, body {
  height: 100%;
}

a {
  color: #434343;
  text-decoration: none;
  transition: 0.2s;
}

button {
  background: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 1rem;
}

ol, ul {
  list-style: none;
}

table {
  width: auto;
  border-collapse: collapse;
  border-spacing: 0;
}

input, button, textarea, select, optgroup, option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  outline: none;
}

/*reset end*/
/*----------------------------------------------------*/
/*----------------------------------------------------*/
/*----------------------------------------------------*/
/*----------------------------------------------------*/
/*Input*/
input[type=text],
input[type=password] {
  width: 100%;
  min-width: 20px;
  height: 40px;
  line-height: 32px;
  border: 1px solid #ddd;
  padding: 0 10px;
}

input[type=text]:disabled {
  background: #fff;
}

/*select*/
select {
  width: 100%;
  min-width: 60px;
  height: 40px;
  line-height: 32px;
  padding: 0 35px 0 10px;
  vertical-align: middle;
  color: #434343;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: #fff url(../images/icon_select.png);
  background-repeat: no-repeat;
  background-size: auto 12px;
  background-position: calc(100% - 10px) center;
  border: solid 1px #ddd;
}

select::-ms-expand {
  display: none;
}

/*checkbox*/
input[type=checkbox] {
  display: none;
  appearance: none;
  outline: none;
  opacity: 0;
  line-height: 22px;
}

input[type=checkbox] + label {
  line-height: 32px;
  cursor: pointer;
}

input[type=checkbox] + label span {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 0 10px 0 0;
  padding: 0;
  vertical-align: middle;
  cursor: pointer;
  background: #fff url(../images/icon_check.png) left top no-repeat;
  background-size: 22px auto;
}

input[type=checkbox]:checked + label span {
  background: #fff url(../images/icon_check.png) left bottom no-repeat;
  background-size: 22px auto;
}

input[type=checkbox] + label span.reverse {
  margin: 0 0 0 10px;
}

/*radio*/
input[type=radio] {
  display: none;
}

input[type=radio] + label {
  display: inline-block;
  position: relative;
  line-height: 20px;
  box-sizing: border-box;
  cursor: pointer;
}

input[type=radio] + label span {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  vertical-align: middle;
  background: #fff url(../images/icon_radio.png) left top no-repeat;
  background-size: 100% auto;
  border-radius: 100%;
  overflow: hidden;
}

input[type=radio]:checked + label span {
  background: #fff url(../images/icon_radio.png) left bottom no-repeat;
  background-size: 100% auto;
}

input[type=radio] ~ input[type=text] {
  width: calc(100% - 30px);
  margin: 15px 0 0 30px;
}

input[type=radio]:disabled + label span,
input[type=checkbox]:disabled + label span {
  background-color: #f5f5f5;
}

/*file*/
.inputFileBtn {
  position: relative;
  min-width: 4em;
  margin: 0;
  padding: 0 10px;
  cursor: pointer;
}

.inputFileBtn input[type=file] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  width: 100%;
  height: 100%;
}

.inputFlex .btn .inputFileBtn {
  flex: 1 0 auto;
  margin: 0;
}

/*----------------------------------------------------*/
/*----------------------------------------------------*/
.smallT {
  font-size: 14px;
}

.bigT {
  font-size: 18px;
}

.biggerT {
  font-size: 21px;
}

.tL {
  text-align: left;
}

.tR {
  text-align: right;
}

.tC {
  text-align: center;
}

.tB {
  font-weight: bold;
}

.fL {
  float: left;
}

.fR {
  float: right;
}

.clr {
  clear: both;
}

.web {
  display: block;
}

.mobile {
  display: none;
}

.tBig {
  font-size: 18px;
}

.tBigger {
  font-size: 21px;
}

.botM0 {
  margin-bottom: 0 !important;
}

.botM10 {
  margin-bottom: 10px !important;
}

.botM20 {
  margin-bottom: 20px !important;
}

.botM30 {
  margin-bottom: 30px;
}

.botT10 {
  margin-top: 10px !important;
}

.leftM10 {
  margin-left: 10px;
}

.rightM10 {
  margin-right: 10px;
}

.space {
  display: block;
  height: 20px;
}

.d-line {
  border-bottom: 1px solid #ccc;
  height: 10px;
  margin-bottom: 10px;
}

.text-wrap {
  white-space: normal;
  word-break: break-all;
}

/*ul ol*/
ol.note {
  list-style-type: decimal;
  margin-left: 20px;
} /*備註*/
ol.lower-alpha {
  list-style-type: lower-alpha;
  margin-left: 20px;
}

ol.lower-roman {
  list-style-type: lower-roman;
  margin-left: 20px;
}

ol.note > li, ol.lower-alpha > li, ol.lower-roman > li {
  margin-bottom: 5px;
  font-size: 14px;
  color: #666;
  line-height: 1.4em;
}

ol ol {
  margin-top: 5px;
}

/*----------------------------------------------------*/
/*----------------------------------------------------*/
.pagesize { /*max-width: 1300px;*/
  margin: 0 auto;
  padding: 0 20px;
}

/*-----------------footer-----------------*/
.footer {
  height: 60px;
  padding: 15px 0 0 220px;
  background: #eeeeee;
  transition: 0.3s;
}

.wrapper__minify ~ .footer {
  padding-left: 50px;
}

.footer .logoCT {
  display: block;
  float: left;
  width: 122px;
  height: 28px;
  background: url(../images/logo_ct.png) center no-repeat;
  background-size: 100% auto;
}

.footer .copyright {
  padding: 7px 0;
  text-align: center;
  font-size: 14px;
}

/*--------------------Main-----------------------*/
/*-------popup-------*/
.popup_bg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1001;
}

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 720px;
  border-radius: 20px;
  background-color: #fff;
  z-index: 1002;
}

.popup.wide {
  width: 80%;
}

.popup .popup_close {
  position: absolute;
  top: 8px;
  right: 10px;
  display: block;
  width: 50px;
  height: 50px;
  background: url(../images/btn_popup_close.svg) center no-repeat;
  background-size: 34px;
}

.popup h2 {
  padding: 20px 40px;
  line-height: 25px;
  font-size: 21px;
  font-weight: bold;
  color: #00726A;
  border-bottom: solid 1px #ddd;
}

.popup h3 {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}

.popup p {
  line-height: 1.5em;
}

/*.popup .tableframe table td { padding:5px; }*/
.popup_box {
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 20px 40px;
}

.popup_box .tableframe { /*border-left: 1px solid #ddd; overflow: auto; max-height: 60vh;*/
  overflow-x: auto;
}

.popup_box h2 {
  padding-left: 0;
}

.popup_box p {
  margin-bottom: 10px;
}

.popup_box .btnMain {
  margin-bottom: 20px;
}

.framestyle1 div {
  line-height: 1.5em;
}

.framestyle1 table {
  width: 100%;
  margin: 10px 0;
}

.framestyle1 table th {
  padding: 10px 5px;
}

.framestyle1 table td {
  padding: 10px 5px;
}

.content-box {
  max-height: 500px;
  overflow-y: auto;
}
.content-box p, .content-box li {
  margin-bottom: 8px;
  line-height: 1.5;
}
.content-box > ol {
  list-style: decimal;
  padding-left: 24px;
}
.content-box > ol ol {
  counter-reset: list-count;
  list-style: none; /* 移除預設樣式 */
  font-size: 1rem;
  margin-top: 8px;
}
.content-box > ol ol li {
  padding-left: 24px;
  position: relative;
}
.content-box > ol ol > li::before {
  position: absolute;
  top: 0;
  left: 0;
  counter-increment: list-count;
  content: "(" counter(list-count) ") "; /* 自定義格式 */
}
.content-box a {
  color: #0084FF;
}
@media screen and (max-width: 1000px) {
  .content-box {
    max-height: 350px;
  }
}

/*----------------------------------------------------*/
/*popup_loading*/
.popup_loading {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1002;
  padding: 0;
  background: none;
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*----------------------------------------------------*/
/*----------------------------------------------------*/
/*header*/
.index_header {
  height: 80px;
  padding: 20px 0;
  background: #00726A;
}

.index_header .pagesize {
  max-width: 1200px;
}

.index_header .logo {
  display: block;
  background: url(../images/logo_w.svg) 0 center no-repeat;
  background-size: 120px auto;
  height: 40px;
  color: #fff;
  padding-left: 140px;
  padding-top: 15px;
}

.input-txt {
  font-size: 14px;
}

/*------------index main------------*/
.indexArea {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0 60px;
}

.indexArea .pagesize {
  position: relative;
  z-index: 4;
}

/*-----------------footer-----------------*/
/*背景banner*/
.indexBanner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/img_login_banner.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: cover;
}

.indexBanner.supp {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url(../images/img_login_banner_2.jpg) center no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

/*主要內容*/
.indexMain {
  display: flex;
  width: 100%;
}

.indexMain .indexMain_wrapper {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.indexMain .part1 {
  padding: 60px 20px 0;
}

.loginTitle {
  margin-bottom: 30px;
  text-align: center;
  font-weight: 700;
  color: #00726A;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.loginTitle span {
  font-size: 1.4em;
  line-height: 1.4em;
}

.loginTitle img {
  display: block;
  width: 180px;
}

@media screen and (max-width: 800px) {
  .indexArea {
    padding: 0 0 20px;
  }
  .indexBanner.supp + .indexMain .loginArea {
    padding-bottom: 100px;
    margin-bottom: 50px;
  }
  .mascot {
    width: 140px;
    height: 140px;
    bottom: -50px;
    right: 50%;
    margin-right: -70px;
  }
  /*輪播點*/
  .indexBanner_dot {
    margin: 0 0 10px;
  }
}
/*登入*/
.loginArea {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 40px 60px;
  font-size: 14px;
  background-color: rgba(70, 85, 93, 0.9);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #ffffff;
}
.loginArea h2 {
  margin-bottom: 20px;
  font-size: 24px;
  text-align: center;
  color: #fff;
}
.loginArea p {
  font-size: 14px;
  line-height: 24px;
  color: #fff;
}
.loginArea .input-txt {
  color: #fff;
}
.loginArea a {
  color: #aaa;
}
.loginArea a.Blue {
  color: #A7D5FF;
}
.loginArea input {
  height: 42px;
  line-height: 42px;
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff; /*字體顏色*/
}
.loginArea ol.note > li {
  color: #fff;
}
.loginArea .input_inline {
  color: #fff;
  padding: 0;
}
.loginArea .color-main {
  color: #A3F8F2;
}

.loginArea input[type=text], .loginArea input[type=password] {
  border: none;
}

.loginArea input::placeholder {
  color: #fff;
}

.loginArea select {
  color: #fff;
  background-color: transparent;
}

.loginArea select option {
  background-color: #222;
}

.loginArea .inputbox {
  border: solid 1px #fff;
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

.loginArea .inputbox input {
  width: 100%;
  flex: 1 1 100%;
}

.loginArea .inputbox.input_btn input {
  float: left;
  width: calc(100% - 36px);
}

.loginArea .btnbox a {
  display: block;
  line-height: 48px;
  text-align: center;
  color: #fff;
  border-radius: 6px;
  background-color: #008680;
}
.loginArea .btnbox a.cxl {
  background: #bbb;
}

.loginArea .btnbox a:hover {
  background: rgb(0, 108.5, 103.6417910448);
}

.loginArea input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s;
}

.captcha img {
  height: 30px;
  margin-right: 3px;
}

a.eye {
  width: 40px;
  height: 40px;
  background: url(../images/icon_eye.svg) center no-repeat;
  background-size: 24px;
  display: inline-block;
  vertical-align: middle;
}

a.eye.open {
  width: 40px;
  height: 40px;
  background: url(../images/icon_eye_open.svg) center no-repeat;
  background-size: 24px;
}

a.refresh {
  width: 40px;
  height: 40px;
  background: url(../images/icon_refresh.svg) center no-repeat;
  background-size: 24px;
}

.loginArea a.eye {
  background: url(../images/icon_eye_w.svg) center no-repeat;
  background-size: 24px;
  display: block;
}

.loginArea a.eye.open {
  background: url(../images/icon_eye_w_open.svg) center no-repeat;
  background-size: 24px;
}

.loginArea a.refresh {
  background: url(../images/icon_refresh_w.svg) center no-repeat;
  background-size: 24px;
}

.loginArea .color-error {
  color: #ff9393;
  font-size: 14px;
}

.mascot {
  width: 140px;
  height: 140px;
  background: url(../images/mascot.png) center no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -20px;
  right: -70px;
}

/*popup*/
.popup_box h3 {
  margin-bottom: 20px;
  font-size: 18px;
}

.btnMain a {
  display: inline-block;
  width: 240px;
  padding: 10px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  background: #008680;
  border-radius: 8px;
  transition: 0.2s;
  cursor: pointer;
}

.btnMain a:hover {
  background: rgb(0, 108.5, 103.6417910448);
}

@media screen and (max-width: 1000px) {
  .pagesize {
    padding: 0 10px;
  }
}
@media screen and (max-width: 767px) {
  .m-botM10 {
    margin-bottom: 10px;
  }
  .m-leftM0 {
    margin-left: 0px;
  }
}
/*----------------------------------------------------*/
/*----------------------------------------------------*/
/*-----------------頁面-----------------*/
.wrapper {
  padding-left: 220px;
  transition: 0.3s;
}

.wrapper__minify {
  position: relative;
  z-index: 1;
  padding-left: 50px;
}

.content {
  min-height: calc(100vh - 181px);
}

.content.noBreadcrumb {
  min-height: calc(100vh - 145px);
}

/*-----------------header-----------------*/
.header {
  height: 85px;
  background: #fff;
  border-bottom: solid 1px #ddd;
}

.header .pagesize {
  position: relative;
}

.header .logo {
  display: block;
  width: 255px;
  height: 85px;
  margin: 0 auto;
  background: url(../images/logo_w.svg) center no-repeat;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
}

/*user*/
.header_user { /*flex: 0 0 auto;*/
  position: absolute;
  top: 15px;
  left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 50px;
  padding: 0 0 0 32px;
  background: url(../images/icon_user_01.png) center left no-repeat;
  background-size: 25px;
}

.header_user p {
  line-height: 30px;
}

.header_user .user_spot {
  font-size: 14px;
  color: #008680;
}

/*切換場域*/
.user_spotSelect {
  display: none;
  width: 300px;
  position: absolute;
  top: 85px;
  left: 20px;
  padding: 20px;
  background-color: #fff;
  z-index: 11;
  border: solid 1px #ddd;
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
}

.user_spotSelect::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 32px;
  display: block;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-top: solid 1px #ddd;
  border-left: solid 1px #ddd;
  transform: rotate(45deg);
}

.user_spot_input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.user_spot_input span {
  flex: 0 0 auto;
}

.user_spot_inputbox {
  flex: 1;
}

.user_spot_switch {
  height: 32px;
  padding: 0 5px;
  background-color: #eee;
  cursor: pointer;
  transition: 0.2s;
}

.user_spot_switch:hover {
  background-color: #e0e0e0;
}

.user_spotSelect .btn a {
  line-height: 30px;
  margin: 0;
}

/*通知區塊*/
.header .msgBox {
  display: none;
  width: 450px;
  position: absolute;
  top: 80px;
  right: 20px;
  padding: 20px;
  background-color: #fff;
  z-index: 11;
  border: solid 1px #ddd;
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
}

.header .msgBox.type_msg::before,
.header .msgBox.type_notice::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 125px;
  display: block;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-top: solid 1px #ddd;
  border-left: solid 1px #ddd;
  transform: rotate(45deg);
}

.header .msgBox.type_notice::before {
  right: 60px;
}

.header .msgBox h4 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
  color: #00726A;
}

.header .msglist li {
  position: relative;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: solid 1px #eee;
}

.header .msglist li:nth-last-child(1) {
  margin: 0;
  padding: 0;
  border: none;
}

.header .msglist a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.header .msglist p {
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*nav*/
.header_nav {
  position: absolute;
  top: 30px;
  right: 20px;
}

.header_nav a {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin: 0 30px 0 0;
  vertical-align: middle;
}

.header_nav a:nth-last-child(1) {
  margin: 0;
}

.header_msg {
  position: relative;
  background: url(../images/icon_msg.png) center no-repeat;
  background-size: 100%;
}

.header_notice {
  position: relative;
  background: url(../images/icon_notice.png) center no-repeat;
  background-size: 100%;
}

.header_msg .num,
.header_notice .num {
  display: block;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 13px;
  color: #fff;
  background: #F2324C;
  border-radius: 20px;
}

.header_logout {
  background: url(../images/icon_logout.png) center no-repeat;
  background-size: 100%;
}

/*--------------------NAV-----------------------*/
.vertical_nav {
  position: fixed;
  width: 220px;
  top: 0;
  bottom: 0;
  left: 0;
  color: #fff;
  background: #333844;
}

.vertical_nav.vertical_nav__minify {
  z-index: 2;
  width: 50px;
}

/*標題*/
.nav_title {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 85px;
  text-align: left;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 1.8px;
  color: #fff;
  background-color: #00726A;
  padding: 15px 20px 0;
}

.nav_title .logo {
  width: 100%;
  height: 30px;
  background-image: url(../images/logo_w.svg);
  background-size: 90px auto;
  background-position: 0 center;
  background-repeat: no-repeat;
  margin-bottom: 5px;
}

.nav_title::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgb(0, 165, 153.4210526316);
  opacity: 0;
  transition: 0.2s;
}

.vertical_nav__minify .nav_title::after {
  opacity: 1;
}

/*收合*/
.collapse_menu {
  height: 35px;
  font-size: 1rem;
}

.collapse_menu,
.collapse_menu:hover {
  top: 85px;
  color: #fff;
  background: none;
  border: none;
  border-bottom: solid 1px rgba(255, 255, 255, 0.2);
}

.collapse_menu .collapse_menu--label {
  width: 220px;
  height: 36px;
  line-height: 36px;
}

.vertical_nav__minify .collapse_menu--label {
  display: none;
}

.collapse_menu .collapse_menu--icon {
  height: 35px;
  line-height: 35px;
  font-size: 16px;
  background: url(../images/icon_menu_open_03.png) 20px center no-repeat;
  background-size: auto 13px;
}

.collapse_menu .collapse_menu--icon::before {
  content: none;
}

/*選單列*/
.menu {
  top: 120px;
  bottom: 0;
  overflow-y: auto;
  padding-bottom: 30px;
}

.menu--label {
  font-size: 18px;
  line-height: 24px;
  padding: 8px 0;
  color: #d9f2f0;
  height: auto;
  display: block;
}

.vertical_nav__minify .menu--label {
  z-index: 11;
}

.menu--link {
  padding: 0 20px;
  white-space: wrap;
}

.menu--link:hover,
.menu--link:hover .menu--label {
  color: #fff;
  background-color: #434851;
}

.menu--subitens__opened {
  background-color: #333844;
}

.menu--subitens__opened .menu--label {
  color: #fff;
}

/*選單列_開啟收合icon*/
.menu--item__has_sub_menu .menu--link::after {
  content: "";
  top: 12px;
  right: 12px;
  display: block;
  width: 14px;
  height: 13px;
  background: url(../images/icon_menu_open_01.png) center no-repeat;
  background-size: 100%;
}

.vertical_nav__minify .menu--item__has_sub_menu .menu--link::after {
  background: none;
}

.menu--subitens__opened .menu--link::after {
  background: url(../images/icon_menu_open_02.png) center no-repeat;
  background-size: 100%;
}

/*選單列_第二層*/
.menu--subitens__opened .sub_menu {
  padding: 10px 0;
  background-color: #46555d;
  z-index: 11;
}

.sub_menu--link {
  position: relative;
  padding: 0 28px 0 32px;
  font-size: 14px;
  line-height: 36px;
  color: #fff;
  transition: color 0.2s;
}

.sub_menu--link:hover,
.sub_menu--link__active {
  color: #d9f2f0;
  background: none;
}

.menu--link.notice::before {
  content: "";
  display: block;
  position: absolute;
  top: 19px;
  left: 6px;
  width: 6px;
  height: 6px;
  background: #F2324C;
  border-radius: 3px;
}

.sub_menu--link .noticeNum {
  position: absolute;
  left: 6px;
  top: 8px;
  min-width: 20px;
  line-height: 16px;
  min-height: 20px;
  font-size: 12px;
  text-align: center;
  color: #fff;
  background: #F2324C;
  border-radius: 12px;
}

@media screen and (max-width: 1000px) {
  /*header*/
  .header .logo {
    margin-left: 230px;
    background-position: left center;
    background-size: 80% auto;
  }
  .header_user {
    left: 10px;
  }
  .header_nav {
    right: 10px;
  }
  .header_nav a {
    margin: 0 15px 0 0;
  }
  /*切換場域*/
  .user_spotSelect {
    left: 10px;
  }
  /*通知區塊*/
  .header .msgBox {
    right: 10px;
  }
}
/*----------------------------------------------------*/
/*color*/
/*----------------------------------------------------*/
.color-main {
  color: #00726A;
}

.lightGreen {
  color: #a3c93e;
}

.Green {
  color: #56a949;
}

.Blue {
  color: #408ed6;
}

.lightBlue {
  color: #02c4c4;
}

.Red {
  color: #ff6666;
  line-height: 1.5em;
}

.Orange {
  color: #ef6b18;
}

.Gray {
  color: #a9a9a9;
}

.bg_lightBlue {
  background-color: #02c4c4;
}

.bg_lightGreen {
  background-color: #cef06a;
}

.bg_yellow {
  background-color: #fff134;
}

.bg_Orange {
  background-color: #ea9214;
}

.b-line {
  border-bottom: solid 1px #ddd;
}
.b-line h2.title {
  border-bottom: none;
}

.color-error {
  color: #cc0000;
  font-size: 14px;
  line-height: 1.1em;
}

.nowrap {
  white-space: nowrap;
}

/*----------------------------------------------------*/
/*----------------------------------------------------*/
/*Input*/
.inputbox {
  display: flex;
  margin: 0 0 10px;
  align-items: center;
  border: solid 1px #ddd;
}

.inputbox .half {
  width: 50%;
}

.inputbox .short {
  width: 30%;
}

.inputbox .small {
  width: 10%;
}

.inputbox span {
  flex: 0 0 auto;
  margin-right: 10px;
}

.inputdate {
  position: relative;
  cursor: pointer;
}

.inputdate input {
  padding-right: 32px;
}

.inputdate a {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: url(../images/icon_date.png) center no-repeat;
  background-size: 20px;
}

.inputTextarea {
  width: 100%;
}

.inputTextarea textarea {
  background-color: #fff;
  border: 1px solid #ddd;
  width: 100%;
  min-height: 150px;
  padding: 10px;
  line-height: 1.3em;
  resize: none;
}

.inputbox input[type=text],
.inputbox input[type=password] {
  border: none;
}

.d-flex {
  display: flex;
  align-items: center;
}
.d-flex.f-wrap {
  flex-wrap: wrap;
  justify-content: start;
}
.d-flex.j-between {
  justify-content: space-between;
}
.d-flex.f-col {
  flex-direction: column;
}
.d-flex.w-full {
  width: 100%;
}
.d-flex.gap10 {
  gap: 20px;
}
@media screen and (max-width: 800px) {
  .d-flex.f-wrap {
    justify-content: center;
  }
  .d-flex.m-d-wrap {
    flex-wrap: wrap;
  }
  .d-flex.m-d-wrap > div {
    flex: 1 1 auto;
  }
}

.w-100 {
  width: 100px;
}

/*----------------------------------------------------*/
.inputselect {
  display: flex;
  align-items: center;
}

.inputselect.short select {
  width: 180px;
}

.inputselect span {
  margin-right: 10px;
}

.input_inline .inputselect {
  display: inline-flex;
}

.input_inline .inputselect select {
  width: auto;
  min-width: auto;
  flex: 1 1 auto;
}

/*checkbox*/
.chk_inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chk_inline label {
  display: inline-block;
}

/*打勾chk*/
.chk_factor {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chk_factor label {
  display: inline-block;
  padding: 0 10px;
  color: #bbb;
  background-color: #eee;
  border: solid 1px #eee;
  border-radius: 2px;
  transition: 0.2s;
}

.chk_factor input[type=checkbox] + label span {
  display: none;
  margin: 0;
  padding: 0;
  background: none;
  transition: 0.2s;
}

.chk_factor input[type=checkbox]:checked + label {
  color: #434343;
  border: solid 1px #a3c93e;
}

.chk_factor input[type=checkbox]:checked + label span {
  display: inline-block;
  margin: 0 0 0 5px;
  background: url(../images/icon_check_02.png) center 2px no-repeat;
  background-size: 16px;
}

.twoCol {
  display: flex;
}

.twoCol .inputFlex {
  flex: 1;
  border-right: 1px solid #ddd;
}

.twoCol .inputFlex:last-child {
  border-right: none;
}

.twoCol .inBox {
  flex: 1;
  border-right: 1px solid #ddd;
  padding-right: 20px;
  margin-right: 20px;
}

.twoCol .inBox:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

/*----------------------------------------------------*/
.inputFlex {
  display: flex; /* justify-content: space-between; */
  align-items: center; /* margin-bottom: 10px; */
  padding: 10px;
  color: #666;
}

.inputFlex.padd0 {
  padding: 0;
}

.inputFlex.paddT0 {
  padding-top: 0;
}

.inputFlex.bg {
  background: #eef9f6;
}

/*.inputFlex.last { border: none; }*/
.inputFlex span {
  flex: 0 0 auto;
  padding: 0 5px;
  line-height: 24px;
}

.inputFlex span.Red {
  padding: 0;
  display: inline;
  font-size: 14px;
  line-height: 1.1em;
}

.inputFlex p {
  flex: 1 1 auto;
}

.inputFlex input,
.inputFlex select {
  min-width: 0;
  flex: 1 1 auto;
}

.inputFlex input:nth-last-child(1),
.inputFlex select:nth-last-child(1) {
  margin-right: 0;
}

.inputFlex input + div, .inputFlex select + div {
  margin-left: 10px;
}

.inputFlex select + select, .inputFlex select + input {
  margin-left: 10px;
}

.inputFlex .inputFlex-inner {
  flex: 1 1 100%;
}

.inputFlex input[type=radio] + label,
.inputFlex input[type=checkbox] + label {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin-right: 20px;
}

.inputFlex input[type=radio] + label:last-of-type,
.inputFlex input[type=checkbox] + label:last-of-type {
  margin: 0;
}

.inputTitle {
  color: #434343;
}

.inputFlex .inputTitle, .inputFlex span.inputTitle {
  flex: 0 0 160px;
  margin: 0 10px 0 0;
  padding: 0;
  position: relative;
}

.inputFlex .inputarea {
  flex: 1 1 auto; /*margin:0 10px 0 0;*/
}

.inputFlex .inputarea.sty2 {
  flex: none;
  width: 190px;
}

.inputFlex .inputarea + .inputarea {
  margin-left: 10px;
}

.inputFlex .inputarea .input_inline {
  margin-bottom: -10px;
  padding: 0;
  border: none;
}

.inputFlex .inputarea .input_inline label {
  display: inline-block;
}

.inputFlex .inputdate {
  flex: 1 1 auto;
}

.inputFlex .inputdate + .inputarea {
  margin-left: 10px;
}

.inputarea > .inputFlex {
  padding: 0;
}

.inputFlex .inputarea.flexSty {
  display: flex;
  align-items: center;
}

.inputFlex .inputarea.half {
  flex: 1 1 50%;
}

.inputFlex .inputarea + .btn {
  margin-left: 10px;
}

.inputFlex.col2 div {
  flex: 1 1 50%;
}

.inputFlex .long {
  flex: 1 1 75%;
}

.inputFlex .half {
  flex: 1 1 50%;
}

.inputFlex .short {
  flex: 0 0 25%;
}

.inputFlex .long_2 {
  flex: 1 1 66%;
}

.inputFlex .short_2 {
  flex: 1 1 33%;
}

.inputFlex .inputFlex {
  margin: 0 10px 0 0;
}

.inputFlex .inputFlex:last-child {
  margin: 0;
}

.inputFlex a {
  flex: 0 1 auto;
}
.inputFlex a.eye {
  display: inline-block;
}

.inputbox .btn,
.inputFlex .btn {
  flex: 0 0 auto;
  display: flex;
}

.inputFlex .btn.spaceR,
.inputbox .btn.spaceR {
  margin-right: 10px;
}

.inputbox .btn a {
  flex: 1 0 auto;
  display: flex;
}

.inputFlex .btn a {
  min-width: 4em;
  margin: 0 0 0 10px;
  padding: 9px 10px;
}

.inputbox .btn a:nth-child(1),
.inputFlex .btn a:nth-child(1) {
  margin-left: 0;
}

.inputFlex .btn a.gray,
.inputbox .btn a.gray {
  color: #888;
  border-color: #888;
}

.inputFlex .btn a.gray:hover,
.inputbox .btn a.gray:hover {
  color: #fff;
  background-color: #888;
}

.btn-flex {
  display: flex;
}

.tableframe table .btn.btn-flex a {
  margin: 0 10px 0 0;
}

.tableframe {
  overflow-x: auto;
  height: auto;
}

/*----------------------------------------------------*/
.input_inline {
  padding: 10px;
  color: #666; /*border-bottom: solid 1px #cdd3e4;*/
}

.input_inline.last {
  border: none;
}

/* .input_inline:nth-child(even) { padding: 10px; background: #f6f8fc; } */
.input_inline > div {
  display: inline-block;
  margin: 0 10px 10px 0;
  padding: 0 10px 0 0;
  border-right: solid 1px #ddd;
}

.input_inline > div:nth-last-child(1) {
  margin: 0 0 10px;
  padding: 0;
  border: none;
}

.input_inline input[type=radio] + label,
.input_inline input[type=checkbox] + label {
  margin: 0 20px 10px 0;
}

.input_inline input[type=radio] + label:nth-last-child(1),
.input_inline input[type=checkbox] + label:nth-last-child(1) {
  margin: 0 0 10px;
}

.chk_inline .inputTitle,
.input_inline .inputTitle {
  display: inline-block;
  width: 160px;
  margin: 0 10px 0 0;
  line-height: 24px;
}

.input_inline.botM0 input[type=radio] + label,
.input_inline.botM0 input[type=checkbox] + label {
  margin: 0 20px 0px 0;
}

.input_inline.botM0 input[type=radio] + label:nth-last-child(1),
.input_inline.botM0 input[type=checkbox] + label:nth-last-child(1) {
  margin: 0;
}

.input_inline .long {
  width: 75%;
}

.input_inline .half {
  width: 50%;
}

.input_inline .short {
  width: 25%;
}

.input_inline .long_2 {
  width: 66%;
}

.input_inline .short_2 {
  width: 33%;
}

.inputFlex .inputTitle.wideSet {
  flex: 0 0 200px;
  border-right: 1px solid #ddd;
}

span.inline_hr {
  height: 32px;
  border-right: solid 1px #ddd;
  width: 10px;
  margin-right: 10px;
}

/*次方*/
span.textSuper {
  font-size: 12px;
  display: inline-block;
  vertical-align: super;
}

/*-------------頁面內容------------*/
.content {
  overflow: auto;
  padding: 20px;
}

.contentNav {
  float: left;
  width: 240px;
  margin: 0 20px 0 0;
  background: #fff;
  border-radius: 2px;
}

.contentMain {
  float: right;
  width: calc(100% - 260px);
}

.contentMain.noNav {
  float: none;
  width: 100%;
}

/*麵包屑*/
.breadcrumb {
  background: #fff;
}

.breadcrumb ul {
  overflow: auto;
}

.breadcrumb li {
  float: left;
  height: 36px;
  line-height: 36px;
}

.breadcrumb li a {
  color: #aaa;
}

.breadcrumb li a::after {
  content: ">";
  margin: 0 10px;
}

.breadcrumb li span {
  display: inline-block;
  color: #00726A;
}

/*---------------- 篩選 FilterBox ---------------------*/
/*隱藏式篩選下拉*/
/*------------------內容----------------*/
.mainBlock { /*overflow: auto;*/
  position: relative;
  margin-bottom: 10px;
  background: #fff;
  border: solid 1px #ddd;
  border-radius: 2px;
}

.mainBlock.noTitle {
  padding-top: 20px;
}

.mainBlock.botM0 {
  margin-bottom: 0;
}

.mainBlock.botM20 {
  margin-bottom: 20px;
}

.mainBlock.botM30 {
  margin-bottom: 30px;
}

.mainBlock .fullblock {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 294px);
}

.mainBlock .mainBlock_inner {
  padding: 20px;
}

.mainBlock .mainBlock_inner.pad0 {
  padding: 0;
}

.blockPadding {
  padding: 20px;
}

.noTline {
  border-top: none !important;
}

/*----------------------------------*/
h2.pageTitle {
  margin-bottom: 15px;
  font-size: 24px;
  font-weight: 700;
  color: #333844;
}

h2.title {
  padding: 15px 10px 15px 20px;
  line-height: 30px;
  font-size: 21px;
  font-weight: bold;
  color: #00726A;
  border-bottom: solid 1px #ddd;
  /* display: flex; justify-content: space-between; align-items: center;*/
}

.title-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: solid 1px #ddd;
  padding: 15px 10px 15px 20px;
  gap: 10px;
}
.title-flex h2.title {
  border-bottom: none;
  padding: 0 10px 0 0;
}
.title-flex .btn_func {
  float: none;
  position: relative;
}
.title-flex h2.title + .btn_func {
  position: relative;
  top: initial;
  right: initial;
}

.title_note {
  font-size: 18px;
  font-weight: normal;
}

/*h3*/
.subTitle {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}

.subTitle_green {
  color: #56a949;
}

/*----------------------------------*/
/*----------------------------------*/
.mainBlock p {
  margin-bottom: 20px;
  line-height: 1.5em;
}

.mainBlock .inputFlex p {
  margin: 0;
}

.mainBlock .inputFlex p.color-error {
  margin-left: 10px;
}

.mainBlock p.botM10 {
  margin-bottom: 10px;
}

.mainBlock img {
  max-width: 100%;
}

.mainBlock .linkfR {
  position: absolute;
  top: 20px;
  right: 20px;
}

.mainBlock .linkfR .inline_hr {
  margin: 0 10px;
}

.linebox {
  margin-top: -1px;
  padding: 10px 20px;
  border: solid 1px #FFB300;
}

.linebox_title {
  margin-bottom: 10px;
  color: #e67544;
}

.linebox .inputFlex,
.linebox .input_inline {
  border: none;
}

.linebox .input_inline {
  border-bottom: solid 1px #ddd;
}

.linebox .inputFlex .inputTitle,
.linebox .input_inline .inputTitle {
  width: 120px;
}

.hiddenarea {
  display: none;
}

.hiddenarea.open {
  display: block;
}

/*連結*/
.linkCover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/*分隔線*/
hr {
  border: 0;
  height: 1px;
  background-color: #ddd; /* IE6 */
  color: #ddd;
}

/* 標題列右方文字提醒 */
.notice_top {
  position: absolute;
  top: 20px;
  right: 20px;
}

/* --------------------------------------------------------------- */
/*按鈕*/
.btn a,
.btn button,
.btn .inputFileBtn {
  display: block;
  margin-bottom: 10px;
  line-height: 20px;
  padding: 9px 10px;
  text-align: center;
  color: #008680;
  border: solid 1px #008680;
  border-radius: 2px;
  transition: 0.2s;
  cursor: pointer;
}

.btn button {
  width: 100%;
}

.btn a:hover,
.btn button:hover {
  color: #fff;
  background: #008680;
}

.btn button:disabled,
.btn button[disabled] {
  color: #aaa;
  border: 1px solid #aaa;
}

.btn button:disabled:hover,
.btn button[disabled]:hover {
  color: #bbb;
  background: #fff;
  border: 1px solid #bbb;
}

.btn.btn_inline {
  display: inline-block;
  vertical-align: text-bottom;
}

.btn.btn_inline.web {
  display: inline-block;
}

.btn.btn_inline a {
  display: inline-block;
  margin: 0 10px 0 0;
  padding: 6px 10px;
}

.btn.btn_flex {
  display: flex;
  justify-content: space-between;
}

.btn.btn_flex a,
.btn.btn_flex button,
.tableframe table .btn.btn_flex a,
.tableframe table .btn.btn_flex button {
  flex: 1 1 auto;
  margin: 0 10px 0 0;
  white-space: nowrap;
}

.btn.btn_flex a:last-of-type,
.btn.btn_flex button:last-of-type {
  margin: 0;
}

.btn .ty-2 {
  color: #a3c93e;
  border-color: #a3c93e;
}

.btn .ty-2:hover {
  color: #fff;
  background-color: #a3c93e;
}

.btn .ty-3 {
  color: #FFB300;
  border-color: #FFB300;
}

.btn .ty-3:hover {
  color: #fff;
  background-color: #FFB300;
}

.btn .ty-4 {
  color: #1e8ece;
  border-color: #1e8ece;
}

.btn .ty-4:hover {
  color: #fff;
  background-color: #1e8ece;
}

.btn .ty-5 {
  color: #999;
  border-color: #999;
}

.btn .ty-5:hover {
  color: #fff;
  background-color: #999;
}

.btn .ty-6 {
  color: #555;
  border-color: #555;
}

.btn .ty-6:hover {
  color: #fff;
  background-color: #555;
}

.btn a.disable {
  pointer-events: none;
  background-color: #999;
  color: #ccc;
  border-color: transparent;
}

.btnMain a,
.btnMain button {
  display: inline-block;
  width: 240px;
  padding: 10px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  background: #008680;
  border-radius: 8px;
  transition: 0.2s;
  cursor: pointer;
}

.btnMain > a + a {
  margin-left: 10px;
}

.btnMain a:hover,
.btnMain button:hover {
  background: rgb(0, 108.5, 103.6417910448);
}

.btnMain .ty-2 {
  background: #a3c93e;
}

.btnMain .ty-2:hover {
  background: rgb(149.0384615385, 185.5769230769, 51.9230769231);
}

.btnMain .ty-3 {
  background: #FFB300;
}

.btnMain .ty-3:hover {
  background: rgb(229.5, 161.1, 0);
}

.btnMain .cxl {
  background: #bbb;
}

.btnMain .cxl:hover {
  background: rgb(161.5, 161.5, 161.5);
}

.btnMain .short {
  width: 160px;
}

.btn_func {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  float: right;
}

.btn_func.tL {
  float: none;
  text-align: left;
  margin-bottom: 10px;
}

.btn_func.tR {
  float: none;
  text-align: right;
  margin-bottom: 10px;
}

.btn_func a {
  display: inline-block;
  min-width: 65px;
  padding: 4px 10px;
  line-height: 20px;
  text-align: center;
  font-size: 14px;
  color: #008680;
  border: solid 1px #008680;
  border-radius: 2px;
  transition: 0.2s;
}

.btn_func.btn a {
  margin-bottom: 0;
}

.btn_func a:hover {
  color: #fff;
  background-color: #008680;
}

.btn_func a:nth-last-child(1) {
  margin: 0;
}

h2.title + .btn_func {
  position: absolute;
  top: 17px;
  right: 20px;
}

.btn_tag a {
  display: inline-block;
  margin: 0 5px 10px 0;
  padding: 0 20px;
  line-height: 36px;
  color: #888;
  background: #ddd;
  border-radius: 2px;
  transition: 0.2s;
}

.btn_tag a:hover,
.btn_tag a.on {
  color: #fff;
  background: #FFB300;
}

.btn_radius {
  border-radius: 8px;
  display: inline-block;
  min-width: 65px;
  padding: 6px 10px;
  line-height: 20px;
  text-align: center;
  font-size: 14px;
  color: #008680;
  color: #fff;
  background-color: #008680;
  transition: 0.2s;
}
.btn_radius.ty-1 {
  background-color: #008680;
}
.btn_radius.ty-2 {
  background-color: #a3c93e;
}
.btn_radius.ty-3 {
  background-color: #FFB300;
}
.btn_radius.ty-4 {
  background-color: #1e8ece;
}
.btn_radius.ty-5 {
  background-color: #999;
}
.btn_radius.disable {
  pointer-events: none;
  background-color: #999;
  color: #ccc;
}
.btn_radius:hover {
  color: #008680;
  background-color: #fff;
  border: solid 1px #008680;
}

/*----------------------------------*/
/*table*/
/*----------------------------------*/
.tableframe {
  width: 100%;
}

.tableframe table {
  width: 100%;
  border-left: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  background-color: rgba(255, 255, 255, 0.8);
}

.tableframe table th {
  padding: 10px;
  line-height: 1.5em;
  vertical-align: middle;
  font-weight: bold;
  color: #555;
  background: #DBEBE6;
  box-shadow: 0 1px 0 rgba(20, 20, 20, 0.1) inset;
}

.tableframe table tbody > tr:first-child > th {
  box-shadow: none;
}

.tableframe table td {
  min-width: 4em;
  padding: 10px;
  line-height: 1.5em;
  vertical-align: middle; /*border-bottom: solid 1px #ddd;*/
  border-right: solid 1px #ddd;
  box-shadow: 0 1px 0 rgba(20, 20, 20, 0.1) inset;
}

.tableframe table tr.botLine td {
  border-bottom: solid 3px #ddd;
}

.tableframe table td > a {
  color: #008680;
  line-height: 1.5;
  transition: 0.2s;
}

.tableframe table td > a + a {
  margin-top: 10px;
}

.tableframe table td > a:hover {
  color: rgb(0, 108.5, 103.6417910448);
}

.tableframe table .btn a,
.tableframe table .btn button {
  margin: 0 0 10px;
  min-width: 5em;
}

.tableframe table .btn a:nth-last-child(1),
.tableframe table .btn button:nth-last-child(1) {
  margin: 0;
}

.tableframe table.align_top td {
  vertical-align: top;
}

.tableframe table.thType02 {
  width: 100%;
}

.tableframe table.thType02 th {
  padding: 10px 5px;
  min-width: 6em;
  border: solid 1px #ddd;
}

.mainBlock .tableframe table {
  border-left: none;
}

.mainBlock .tableframe table tr td:last-child {
  border-right: none;
}

.mainBlock > .tableframe:last-child table {
  border-bottom: none;
}

.tableframe.overflow-auto {
  overflow: auto;
}

.tableframe table.topLine {
  border-top: solid 1px #DBEBE6;
}

.tableframe.noLine {
  border-top: none;
}

/*.tableframe td 內的 table*/
.tableframe table td.padd0 {
  padding: 0;
}

/*條列樣式*/
.tableframe table.table_line td {
  border-right: none;
}

.table_midW {
  min-width: 500px;
}

.btnSort {
  display: inline-block;
  margin-left: 3px;
  width: 13px;
  height: 13px;
  background: url(../images/btn_sort00.png) center no-repeat;
  background-size: 100%;
}

.btnSort.sortUp {
  background: url(../images/btn_sort01.png) center no-repeat;
  background-size: 100%;
}

.btnSort.sortDown {
  background: url(../images/btn_sort02.png) center no-repeat;
  background-size: 100%;
}

/* 表格-連結有置頂 */
.linkThumb {
  display: block;
  position: relative;
  padding-left: 15px;
}

.linkThumb--top::after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: -5px;
  width: 20px;
  height: 20px;
  background: url(../images/table-thumbtop.png) top left no-repeat;
  background-size: 20px;
}

/*------------------- 登入後首頁 -------------------*/
h1 {
  font-size: 1.6rem;
}

.notice_time {
  margin: -20px 0 20px;
  text-align: right;
}

.mainBlock_index {
  overflow: visible;
  margin-bottom: 20px;
  padding: 15px 20px;
  border: none;
  border-radius: 4px;
}

.sideNav {
  display: flex;
  align-items: center;
  padding-right: 10px;
}
.sideNav a + a {
  margin-left: 10px;
}

.colorBlock {
  background-color: #fff;
  border: solid 1px #ddd;
  border-radius: 2px;
}

.colorBlock p {
  padding: 15px;
}

.colorArea {
  display: flex;
}

.colorArea .box {
  flex: 1;
  box-shadow: 0px 0px 0px rgba(139, 139, 139, 0.4);
  text-align: center;
  padding: 25px 0px;
  font-size: 1.75rem;
  color: #fff;
  font-weight: bold;
}

.colorArea .box:nth-child(1n) {
  background-color: #57abd7;
}

.colorArea .box:nth-child(2n) {
  background-color: #66c5a3;
}

.colorArea .box:nth-child(3n) {
  background-color: #f59e0b;
}

.colorArea .box:nth-child(4n) {
  background-color: #d95b80;
}

.colorArea .box:nth-child(5n) {
  background-color: #8b5cf6;
}

.colorArea .box span {
  display: block;
  font-size: 1rem;
  font-weight: 400;
}

.bt_info {
  display: inline-block;
  background: url("../images/ico_info.svg") center center no-repeat;
  background-size: 90% auto;
  width: 30px;
  height: 30px;
  vertical-align: top;
  cursor: pointer;
}

.visitorBlock {
  background-color: #fff;
  border: solid 1px #ddd;
  border-radius: 2px;
}

.visitorBlock p {
  padding: 15px;
}

.visitorArea {
  display: flex;
  color: #fff;
  background-color: #d95b80;
}

.visitorArea > div {
  flex: 1;
  margin: 0;
  padding: 0 20px;
  box-sizing: border-box;
}

.visitorArea .box:nth-of-type(1) {
  background-color: #66c5a3;
}

.visitorArea .box:nth-of-type(1) li {
  border-top: 1px solid #85d1b5;
}

.visitorArea .box:nth-of-type(2) {
  background-color: #57abd7;
}

.visitorArea .box:nth-of-type(2) li {
  border-top: 1px solid #79bcdf;
}

.visitorArea .box:nth-of-type(3) {
  background-color: #d95b80;
}

.visitorArea .box:nth-of-type(3) li {
  border-top: 1px solid #e17c99;
}

.visitorArea h3 {
  font-weight: normal;
  color: #fff;
  font-size: 1.25rem;
  line-height: 2em;
}

.visitorArea .now {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 16px;
}

.visitorArea li {
  padding: 10px 0 10px 80px;
  position: relative;
}

.visitorArea .tit {
  position: absolute;
  top: 10px;
  left: 0;
  font-size: 1rem;
  color: #fff;
  line-height: 40px;
}

.visitorArea .num {
  text-align: right;
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  line-height: 40px;
}

.visitorArea .num span {
  display: inline-block;
  vertical-align: middle;
}

.visitorArea .num .up {
  background: url(../images/arrow_w_up.png) center center no-repeat;
  width: 30px;
  height: 30px;
}

.visitorArea .num .down {
  background: url(../images/arrow_w_down.png) center center no-repeat;
  width: 30px;
  height: 30px;
}

/*條件列表*/
.factorList {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.factorList a {
  display: inline-block;
  padding: 5px 30px 5px 10px;
  line-height: 1.5em;
  background-color: #eee;
  position: relative;
}
.factorList a::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../images/btn_del.png) center no-repeat;
  background-size: 16px;
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}
.factorList a:hover {
  background-color: #008680;
  color: #fff;
}
.factorList a:hover::before {
  filter: grayscale(100%) brightness(1000%);
}

/* 檔案清單 */
.img_chkList {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-right: -20px;
}

.img_chkList > div {
  flex: 0 0 calc(25% - 20px);
  margin: 0 20px 0 0;
  display: flex;
  flex-direction: column;
}

.img_chk_box {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0 0 10px;
  padding: 10px;
  border: solid 1px #ddd;
}

.img_chk_box + p {
  flex: 0 0 3em;
  margin: 0;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-all;
  color: #888;
}

.img_chk_box.selected {
  border: solid 1px #a3c93e;
}

.img_chk_box .img_preview {
  width: 100%;
  margin-bottom: 10px;
}

.img_chk_box .img_preview label {
  display: block;
  cursor: pointer;
}

.img_chk_box .img_preview img {
  display: block;
  width: 100%;
}

.img_preview_doc {
  display: block;
  position: relative;
  height: 100%;
  min-height: 60px;
}

.img_preview_doc label {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.img_preview_doc .icon01 {
  background: url(../images/img_preview_doc_01.png) center no-repeat;
  background-size: auto 60px;
}

.img_preview_doc .icon02 {
  background: url(../images/img_preview_doc_02.png) center no-repeat;
  background-size: auto 60px;
}

.img_chk_btn {
  text-align: right;
}

.img_chk_btn input[type=checkbox] + label {
  float: left;
  height: 22px;
  line-height: 22px;
}

.img_chk_btn .img_chk_download,
.img_chk_btn .img_chk_del,
.img_chk_btn .img_chk_open {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: middle;
}

.img_chk_btn .img_chk_download {
  background: url(../images/icon_download.png) center no-repeat;
  background-size: 100% auto;
}

.img_chk_btn .img_chk_del {
  background: url(../images/icon_del.png) center no-repeat;
  background-size: auto 100%;
}

.img_chk_btn .img_chk_open {
  background: url(../images/icon_open.png) center no-repeat;
  background-size: 100% auto;
}

.img_chk_btn .btn-add, .img_chk_btn .btn-del {
  margin-left: 6px;
}

/*分頁*/
.pages ~ .blockPadding {
  padding-top: 0;
}

.pagesList {
  display: block;
  text-align: center;
  margin: 20px 0;
}

.pagesList li {
  margin: 0 5px;
  display: inline-block;
  vertical-align: middle;
}

.pagesList a {
  transition: 0.2s;
}

.pagesList a, .pagesList span {
  display: block;
  line-height: 20px;
  color: #666;
}

.pagesList li a:hover, .pagesList .on span {
  color: #FFB300;
  border-radius: 1px;
}

.pagesList .pageFirst a,
.pagesList .pagePrev a,
.pagesList .pageNext a,
.pagesList .pageLast a {
  width: 20px;
  height: 20px;
  padding: 0;
}

.pagesList .pageFirst a {
  background: url(../images/icon_page_01.png) center center no-repeat;
  background-size: auto 14px;
}

.pagesList .pageFirst a:hover {
  background: url(../images/icon_page_05.png) center no-repeat;
  background-size: auto 14px;
}

.pagesList .pagePrev a {
  background: url(../images/icon_page_02.png) center center no-repeat;
  background-size: auto 14px;
}

.pagesList .pagePrev a:hover {
  background: url(../images/icon_page_06.png) center no-repeat;
  background-size: auto 14px;
}

.pagesList .pageNext a {
  background: url(../images/icon_page_03.png) center center no-repeat;
  background-size: auto 14px;
}

.pagesList .pageNext a:hover {
  background: url(../images/icon_page_07.png) center no-repeat;
  background-size: auto 14px;
}

.pagesList .pageLast a {
  background: url(../images/icon_page_04.png) center center no-repeat;
  background-size: auto 14px;
}

.pagesList .pageLast a:hover {
  background: url(../images/icon_page_08.png) center no-repeat;
  background-size: auto 14px;
}

.pageFirst, .pagePrev, .pageNext, .pageLast {
  text-indent: -9999px;
}

/*卷軸*/
.scrollInner .mCSB_scrollTools {
  width: 10px;
}

/* -------------------- 行事曆 -------------------- */
.calendar {
  position: relative;
}

.calendar_header {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

/*行事曆_切換顯示類型*/
.calendar .listyle a {
  display: block;
  padding: 0 8px 0 36px;
  height: 32px;
  line-height: 30px;
  color: #CCC;
  border: 1px solid #ccc;
  border-radius: 2px;
}

.calendar .listyle a.list01 {
  margin: 0 0 10px;
  background: url(../images/icon_calendar_type_01.png) no-repeat;
  background-size: 25px auto;
  background-position: 3px 4px;
}

.calendar .listyle a.list02 {
  background: url(../images/icon_calendar_type_02.png) no-repeat;
  background-size: 25px auto;
  background-position: 3px 4px;
}

.calendar .listyle li:hover a,
.calendar .listyle .select a {
  color: #02c4c4;
  background-position: 3px calc(100% - 1px);
  border: 1px solid #02c4c4;
}

/*行事曆_切換月份*/
.calendar_date {
  position: relative;
  text-align: center;
  margin: 0 20px;
  padding: 0 50px;
}

.calendar_date p {
  margin: 0;
}

.calendar_date > div {
  display: inline-block;
}

.calendar_date .time {
  margin: 0 auto;
  font-size: 22px;
  line-height: 32px;
}

.calendar_date .time span {
  font-size: 32px;
}

.calendar_date a {
  display: block;
  position: absolute;
  top: calc(50% - 16px);
  vertical-align: super;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  opacity: 0.5;
  transition: 0.2s;
}

.calendar_date .btn_prev {
  left: 0;
}

.calendar_date .btn_next {
  right: 0;
}

.calendar_date .btn_prev {
  background: #02c4c4 url(../images/icon_arrow_01.png) center no-repeat;
  background-size: auto 14px;
}

.calendar_date .btn_next {
  background: #02c4c4 url(../images/icon_arrow_02.png) center no-repeat;
  background-size: auto 14px;
}

.calendar_date a:hover {
  opacity: 1;
}

/*行事曆_小分類*/
.calendar_filter select {
  display: block;
  width: 7em;
  margin-bottom: 10px;
}

.calendar_filter select:nth-last-child(1) {
  margin: 0;
}

/*行事曆_月曆樣式*/
.calendar_month {
  position: relative;
}

.calendar_month table.thset {
  width: 100%;
}

.calendar_month table.thset th {
  padding: 8px 0;
  font-weight: 400;
  background-color: #dcdcdc;
  border: 0;
}

.calendar_month .thset th.sun {
  background-color: #eb9999;
  color: #fff;
}

.calendar_month .thset th.sat {
  background-color: #eb9999;
  color: #fff;
}

.calendar_month .tdset {
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
}

.calendar_month .tdset li {
  width: calc((100% - 1px) / 7);
  min-height: 160px;
  float: left;
  position: relative;
  padding: 40px 10px 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.calendar_month .tdset li .day {
  position: absolute;
  top: 10px;
  left: 15px;
  font-weight: bold;
}

.calendar_month .tdset li .day.gray {
  color: #aaa;
}

.calendar_month .tdset li .txt {
  position: absolute;
  right: 10px;
  top: 10px;
}

.calendar_month .tdset li .event {
  overflow: hidden;
  margin-bottom: 10px;
  padding: 5px;
  color: #fff;
  border-radius: 5px;
}

.calendar_month .tdset li .event:nth-last-child(1) {
  margin: 0;
}

.calendar_month .tdset li .event a {
  display: block;
  height: 2.5em;
  line-height: 1.3em;
  font-size: 14px;
  color: #fff;
  overflow: hidden;
}

.calendar_month .tdset .event {
  background-color: #02c4c4;
}

/*行事曆_+清單呈現*/
.table_schedule { /*overflow-x: auto; */
  width: 100%;
  margin-bottom: 10px;
}

.table_schedule:nth-last-child(1) {
  margin-bottom: 0;
}

.calendar + .table_schedule {
  margin-top: -10px;
}

.table_schedule th.schedule_date {
  background: #fff;
  color: #1e8ece;
  border: none;
}

.table_schedule p {
  margin: 0;
}

.table_schedule .namelist span {
  display: block;
}

/*改套件樣式*/
.inputFlex .select2-container {
  width: 100% !important;
  height: 40px;
  margin: 0;
}

.inputFlex .select2-container--default .select2-selection--single {
  background: #fff url(../images/icon_select.png);
  background-repeat: no-repeat;
  background-size: auto 12px;
  background-position: calc(100% - 10px) center;
  border: solid 1px #ddd;
  border-radius: 0;
}

.inputFlex .select2-container .select2-selection--single {
  margin: 0;
  height: 40px;
}

.inputFlex .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 40px;
}

.inputFlex .select2-container--default .select2-selection--single .select2-selection__arrow {
  display: none;
}

.inputFlex span.select2, .inputFlex span.select2 > span {
  padding: 0;
  line-height: initial;
}

.inputFlex .selection > span {
  padding: 0;
  line-height: initial;
}

.inputFlex .select2-container--default .select2-selection--single span.select2-selection__placeholder {
  color: #434343;
  padding-left: 2px;
}

.inputFlex .select2-container--default .select2-selection--single .select2-selection__clear {
  height: 40px;
  margin-right: 40px;
} /*下拉按鈕*/
/* hover info資訊 */
.hiddenNotice {
  position: relative;
}

.hiddenNotice_tag {
  display: inline-block;
  cursor: pointer;
  padding-left: 20px;
  min-height: 20px;
  line-height: 1.125em;
  vertical-align: middle;
  background: url(../images/icon_hiddenNotice_02.png) 0 center no-repeat;
  background-size: 18px;
}

span.hiddenNotice_tag {
  padding-left: 20px;
}

.hiddenNotice_box {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: -5px;
  z-index: 2;
  width: 640px;
  padding: 10px;
  text-align: left;
  font-size: 14px;
  line-height: 130%;
  color: #787878;
  background: #fff;
  border: solid 1px #ea9214;
}

.inputFlex span.hiddenNotice {
  padding: 0;
}

.inputFlex span.hiddenNotice_box {
  padding: 10px;
}

.inputFlex span.hiddenNotice_tag {
  padding: 0 0 0 20px;
}

@media screen and (max-width: 768px) {
  .hiddenNotice_box {
    width: 320px;
  }
}
.hiddenNotice_box.bottom {
  bottom: auto;
  top: calc(100% + 10px);
}

.hiddenNotice_box::before {
  content: "";
  position: absolute;
  left: 4px;
  width: 0;
  height: 0;
  border-style: solid;
}

.hiddenNotice_box::after {
  content: "";
  position: absolute;
  left: 6px;
  width: 0;
  height: 0;
  border-style: solid;
}

.hiddenNotice_box::before {
  bottom: -7px;
  border-width: 7px 7px 0 7px;
  border-color: #F6923F transparent transparent transparent;
}

.hiddenNotice_box::after {
  bottom: -5px;
  border-width: 5px 5px 0 5px;
  border-color: #fff transparent transparent transparent;
}

.hiddenNotice_box.bottom::before {
  top: -7px;
  border-width: 0 7px 7px 7px;
  border-color: transparent transparent #F6923F transparent;
}

.hiddenNotice_box.bottom::after {
  top: -5px;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent #fff transparent;
}

.hiddenNotice_tag:hover ~ .hiddenNotice_box {
  display: block;
}

.inputTitle .hiddenNotice_tag {
  background-position: left top 0.3em;
}

.inputFlex .hiddenNotice_tag {
  margin-right: 0;
}

.inputFlex .hiddenNotice_box {
  line-height: 130%;
}

.hiddenNotice_tag.title {
  padding-top: 0;
  padding-bottom: 0;
  background-position: left top 0.3em;
  border: none;
}

.colorBlock .hiddenNotice_tag.title,
.mainBlock .hiddenNotice_tag.title {
  padding: 15px 0 15px 24px;
}

.mainBlock .title-flex .hiddenNotice_tag.title {
  padding: 0 0 0 24px;
}

.colorBlock .hiddenNotice_tag + .hiddenNotice_box.bottom,
.colorBlock .hiddenNotice_tag + .hiddenNotice_box.bottom {
  top: calc(100% - 10px);
  left: 6px;
}

/* 細部條件新增刪除 */
/* 選擇 */
.laborSelect {
  display: flex;
}

.laborSelect-inner {
  flex: 1 1 auto;
  display: flex;
}

.laborSelect-item {
  flex: 1 1 auto;
  margin-right: 10px;
}

.laborSelect .inputTitle {
  flex: 0 0 auto;
}

.laborSelect-btn {
  flex: 0 0 auto;
  padding: 3px 0;
}

.laborSelect .inputFlex {
  margin-bottom: 10px;
  padding: 0;
}

/* 條件 */
.laborArea.pt {
  padding-top: 10px;
}

.laborArea-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.laborArea-text {
  flex: 1 1 auto;
  margin-right: 8px;
}

.laborArea-item .btn {
  flex: 0 0 auto;
}

/*----------------------------------*/
/* JS */
/*----------------------------------*/
.mCSB_container_wrapper {
  margin-right: 15px;
  margin-bottom: 15px;
}

.mCSB_container_wrapper > .mCSB_container {
  padding-right: 15px;
  padding-bottom: 15px;
}

.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #ddd;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #aaa;
}

.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #999;
}

/*控制按鈕*/
.btn-add {
  width: 20px;
  height: 20px;
  background: url(../images/btn_add.png) center no-repeat;
  background-size: contain;
  vertical-align: middle;
  display: inline-block;
}

.btn-del {
  width: 20px;
  height: 20px;
  background: url(../images/btn_del.png) center no-repeat;
  background-size: contain;
  vertical-align: middle;
  display: inline-block;
}

p .btn-del {
  vertical-align: text-bottom;
}

.btn-more {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: #02c4c4 url(../images/icon_hiddenNotice_02.svg) center no-repeat;
  background-size: 24px;
  display: inline-block;
}
.btn-more:hover {
  background-color: #00726A;
}

@media screen and (max-width: 1200px) {
  /* 細部條件新增刪除 */
  .laborSelect {
    align-items: flex-end;
  }
  .laborSelect-inner {
    display: block;
  }
  .laborSelect-item {
    margin-bottom: 10px;
  }
  .laborSelect-item:nth-last-child(1) {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 1000px) {
  .content {
    padding: 20px 10px;
  }
  /*table*/
  .tableframe table td {
    min-width: 6em;
    padding: 10px;
  }
  .tableframe table td:first-of-type {
    min-width: 4em;
  }
  /* 標題列右方文字提醒 */
  .notice_top {
    font-size: 14px;
  }
  /*登入後首頁*/
  .contentIndex .bnBox {
    margin-bottom: 20px;
  }
  /* 檔案清單 */
  .img_chkList > div {
    flex: 0 0 calc(33.3% - 20px);
  }
  .img_preview_doc .icon01 {
    background-size: auto 70%;
  }
  .img_preview_doc .icon02 {
    background-size: auto 70%;
  }
  .twoCol {
    flex-wrap: wrap;
  }
  .inputFlex .inputarea.flexSty {
    flex-wrap: wrap;
  }
  .inputFlex .inputarea.half {
    flex: 1 1 100%;
  }
  .mainBlock .inputFlex p.color-error {
    margin-left: 0;
  }
}
.object-fit img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  object-position: center center;
}
@media screen and (max-width: 1000px) {
  .object-fit img {
    height: 150px;
  }
}

/* 上稿區域 */
.editBox * {
  all: revert;
  line-height: 1.2em;
}

.editBox table {
  width: 100%;
  border-collapse: collapse;
  border-left: solid 1px #ddd;
  border-top: solid 1px #ddd;
}

.editBox table th,
.editBox table td {
  padding: 10px;
  line-height: 1.2em;
  vertical-align: middle;
}

.editBox th,
.table_rwd .editBox th {
  font-weight: bold;
  color: #555;
  background: #e2e3e5;
}

.editBox td,
.table_rwd .editBox td {
  border-bottom: solid 1px #ddd;
  border-right: solid 1px #ddd;
}

@media screen and (max-width: 800px) {
  .table_rwd .editBox table,
  .table_rwd .editBox table * {
    all: revert;
  }
  .table_rwd .editBox table {
    width: 100%;
  }
  .table_rwd .editBox table td::before {
    content: none;
  }
  .table_rwd .editBox table {
    width: 100%;
    border-collapse: collapse;
    border-left: solid 1px #ddd;
    border-top: solid 1px #ddd;
  }
  .table_rwd .editBox table th,
  .table_rwd .editBox table td {
    padding: 8px;
  }
}
/*----------------------------------------------------*/
/*----------------------------------------------------*/
/*----------------------------------------------------*/
/*----------------------------------------------------*/
/*----------------------------------------------------*/
/*改套件樣式_ui-datepicker*/
/*----------------------------------------------------*/
.ui-datepicker .ui-datepicker-header {
  background: #f6f8fc;
  border: none;
}

.ui-datepicker .ui-datepicker-prev .ui-icon {
  background: url(../images/icon_page_02.png) center center no-repeat;
  background-size: auto 100%;
}

.ui-datepicker .ui-datepicker-next .ui-icon {
  background: url(../images/icon_page_03.png) center center no-repeat;
  background-size: auto 100%;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight {
  border: 1px solid #008680;
  background: rgb(236, 255, 254.1492537313);
  color: #008680;
}

.ui-state-active, .ui-widget-content .ui-state-active {
  background-color: #00726A;
  border-color: #00726A;
}

/*----------------------------------------------------*/
/*----------------------------------------------------*/
@media screen and (max-width: 800px) {
  .web {
    display: none !important;
  }
  .mobile {
    display: block !important;
  }
  .m-botM10 {
    margin-bottom: 10px;
  }
  .m-botM20 {
    margin-bottom: 20px;
  }
  .m-botM30 {
    margin-bottom: 30px;
  }
  .m-d-flex {
    display: flex;
  }
  /*footer*/
  .footer {
    height: auto;
    padding: 10px 0;
    text-align: center;
  }
  .footer .logoCT {
    float: none;
    margin: 0 auto 10px;
  }
  .footer .copyright {
    padding: 0;
    line-height: 1.2em;
  }
  /*popup*/
  .popup {
    width: calc(100% - 20px);
    border-radius: 10px;
  }
  .popup.wide {
    width: calc(100% - 20px);
  }
  .popup h2 {
    padding: 10px 45px 10px 20px;
    font-size: 18px;
  }
  .popup .popup_close {
    right: 2px;
    top: 2px;
    width: 40px;
    height: 40px;
  }
  .popup_box {
    max-height: calc(100vh - 80px);
    overflow-y: scroll;
    padding: 10px 20px;
  }
  .popup_box h2 {
    padding-left: 0;
  }
  /*登入頁*/
  .indexMain .part1 {
    padding: 20px 0;
  }
  .indexMain h1 {
    float: none;
    margin: 30px 0;
    padding: 0;
    text-align: center;
    font-size: 24px;
    line-height: 1.5em;
  }
  .indexMain .indexMain_wrapper {
    min-height: calc(100vh - 50px);
  }
  .index_header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    padding: 10px 0;
    z-index: 1000;
  }
  .index_header .logo {
    background-size: 100px auto;
    padding-left: 110px;
    padding-top: 9px;
    height: 30px;
  }
  .loginTitle {
    font-size: 1.31em;
    flex-wrap: wrap;
  }
  .loginTitle span {
    font-size: 1em;
  }
  /*Login*/
  .loginArea {
    float: none;
    width: 100%;
    padding: 30px;
    background-color: rgba(70, 85, 93, 0.9);
  }
  .loginArea .inputbox {
    font-size: 1rem;
  }
  .loginArea input {
    height: 38px;
    line-height: 38px;
  }
  .loginArea .inputbox.input_btn input {
    width: calc(100% - 38px);
  }
  .loginArea a {
    font-size: 1rem;
  }
  .loginArea .btnbox a {
    line-height: 40px;
  }
  .loginArea .btn_switch {
    bottom: 30px;
  }
  .indexBanner.supp + .indexMain .loginArea {
    padding-bottom: 100px;
    margin-bottom: 50px;
  }
  .mascot {
    width: 140px;
    height: 140px;
    bottom: -50px;
    right: 50%;
    margin-right: -70px;
  }
  /*輪播點*/
  .indexBanner_dot {
    margin: 0 0 10px;
  }
}
/*----------------------------------------------------*/
/*----------------------------------------------------*/
@media screen and (max-width: 800px) {
  body {
    background-color: #efefef;
  }
  /*-----------------頁面-----------------*/
  .wrapper {
    padding: 50px 0 0 0;
  }
  /*----------------------------------*/
  /*header*/
  .header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    background: #fff;
  }
  .header .toggle_menu {
    width: 40px;
    height: 50px;
    background: url(../images/icon_nav_01.png) center no-repeat;
    background-size: 20px;
    position: absolute;
    top: 0;
    left: 0;
    float: initial;
  }
  .header .logo {
    display: flex;
    align-items: center;
    width: 170px;
    height: 50px;
    margin: 0 auto;
    font-size: 14px;
    text-align: center;
    color: #00726A;
    background: none;
  }
  .header .logo::before {
    content: "";
    display: inline-block;
    width: 80px;
    height: 25px;
    background: url(../images/logo.svg) center no-repeat;
    background-size: auto 20px;
  }
  .header_nav {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
  }
  .header_nav.left {
    right: auto;
    left: 40px;
    width: 40px;
    height: 50px;
  }
  .header_nav.left a {
    width: 40px;
    height: 50px;
    display: block;
    margin: 0;
  }
  .header_nav a {
    width: 20px;
    height: 20px;
    margin: 0 15px 0 0;
  }
  .header_person {
    background: url(../images/icon_user_01.png) center no-repeat;
    background-size: 24px;
  }
  .header_msg .num,
  .header_notice .num {
    width: 20px;
    height: 20px;
    top: -8px;
    right: -8px;
    font-size: 13px;
  }
  /*切換場域*/
  .user_spotSelect {
    width: 100%;
    top: 100%;
    left: 0;
    border-right: none;
    border-left: none;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  }
  .user_spotSelect::before {
    content: none;
  }
  .user_spot_input {
    margin-bottom: 20px;
  }
  .user_spot_switch {
    height: 36px;
  }
  /*通知區塊*/
  .header .msgBox {
    top: 100%;
    right: 0;
    width: 100%;
    border-right: none;
    border-left: none;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  }
  .header .msgBox.type_msg::before,
  .header .msgBox.type_notice::before {
    content: none;
  }
  /*NAV
  .vertical_nav.vertical_nav__minify { width: 220px; }*/
  /*----------------------------------*/
  /*NAV*/
  .vertical_nav {
    position: fixed;
    top: 50px;
    left: -220px;
  }
  .wrapper__minify {
    padding: 0;
  }
  .nav_title {
    display: none;
  }
  .menu {
    top: 0;
    bottom: 0;
  }
  .menu--label {
    font-size: 16px;
  }
  .menu--icon {
    width: 40px;
    height: 32px;
  }
  .menu--link.notice::before {
    top: 14px;
  }
}
@media screen and (max-width: 800px) {
  .inputTextarea {
    max-width: 100%;
  }
  .inputbox {
    margin: 0 0 10px;
  }
  .inputbox.botM20 {
    margin: 0 0 20px;
  }
  .inputbox input,
  .inputbox select {
    margin-right: 10px;
  }
  .inputbox .btn a,
  .inputbox .btn a:nth-child(1),
  .inputFlex .btn a:nth-child(1) {
    margin: 0;
  }
  .inputFlex .btn.w-full {
    display: block;
  }
  .twoCol {
    display: block;
  }
  .twoCol .inputFlex {
    border-right: none;
  }
  .twoCol .inBox {
    border-right: none;
    padding-right: 0px;
    margin-right: 0px;
  }
  .btn .inputFileBtn {
    height: 32px;
    line-height: 32px;
    margin: 0 0 0 10px;
  }
  .btn.btn_inline.web {
    display: none;
  }
  .inputFlex > a {
    line-height: 32px;
  }
  .inputdate a {
    width: 40px;
    height: 36px;
  }
  p ~ .inputarea,
  p ~ .inputbox {
    margin: 0 0 20px;
  }
  .header {
    z-index: 1000;
  }
  .vertical_nav {
    z-index: 999;
  }
  /*-------------content------------*/
  .content {
    padding: 10px;
  }
  .contentNav {
    float: none;
    width: 100%;
    margin-bottom: 20px;
  }
  .contentMain {
    float: none;
    width: 100%;
  }
  .mainBlock.botM20 {
    margin-bottom: 10px;
  }
  .mainBlock .fullblock {
    min-height: calc(100vh - 225px);
  }
  .mainBlock .fullblock.mapblock {
    min-height: 1000px;
  }
  .blockPadding {
    padding: 10px;
  }
  .mainBlock .linkfR {
    top: 12px;
    right: 10px;
  }
  .mainBlock .tableframe table {
    margin-bottom: 0;
  }
  /*按鈕*/
  .btnMain a,
  .btnMain button {
    width: 100%;
    margin: 0 0 10px;
  }
  .btnMain a:last-child,
  .btnMain button:last-child {
    margin: 0;
  }
  .btnMain a.short {
    width: 100%;
  }
  h2.title + .btn_func {
    margin: 10px 10px 0;
    position: static;
    float: none;
    text-align: right;
  }
  h2.title + .btn_func a {
    margin: 0 5px 10px 0;
  }
  h2.pageTitle {
    margin-bottom: 10px;
  }
  .subTitle {
    line-height: 30px;
    margin-bottom: 10px;
  }
  /*table*/
  .tableframe {
    overflow-x: auto;
    height: auto;
  }
  .tableframe table th {
    min-width: 4em;
    padding: 8px 10px;
    vertical-align: middle;
  }
  .tableframe table td {
    padding: 8px 10px;
  }
  .tableframe table .btn a,
  .tableframe table .btn button,
  .tableframe table .btn.btn_flex a,
  .tableframe table .btn.btn_flex button {
    margin: 0 0 10px;
    white-space: nowrap;
  }
  .tableframe table .btn a:nth-last-child(1),
  .tableframe table .btn button:nth-last-child(1) {
    margin: 0;
  }
  .tableframe table .btn.btn_flex {
    display: block;
  }
  .tableframe table.thType02 th {
    min-width: auto;
    padding: 5px;
    font-size: 15px;
    line-height: 1.3em;
  }
  .tableframe table.thType02 td {
    padding: 5px 10px;
  }
  /*table_rwd*/
  .tableframe .table_rwd,
  .table_rwd tbody,
  .table_rwd tr {
    display: block;
    width: 100%;
  }
  .table_rwd th {
    display: none;
  }
  .table_rwd td {
    display: block;
    width: 100%;
    text-align: left !important;
  }
  .table_rwd td p {
    flex: 1 1 auto;
  }
  .table_rwd td::before {
    content: attr(data-th);
    display: block;
    flex: 0 0 auto;
    margin: 0 0 10px;
    text-align: left !important;
    font-weight: 500;
    color: #333844;
    margin: -8px -10px 8px;
    padding: 8px 10px;
    background: #f1f1f1;
    border-bottom: solid 1px #eceff3;
  }
  .th-light.table_rwd > tbody > tr > td::before {
    background: #f2f5f9;
  }
  .table_rwd td.th-red::before {
    color: #dd0000 !important;
  }
  /* table_rwd - flex排列 */
  .table_rwd-flex {
    line-height: 36px;
  }
  .table_rwd-flex td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: right !important;
  }
  .table_rwd-flex td::before {
    margin: 0 10px 0 0;
    padding: 0;
    text-align: left !important;
    background: none;
    border: none;
  }
  .table_rwd-flex tr:nth-child(even) {
    background-color: #f5f5f5;
  }
  .table_rwd-flex td.th-w-m::before {
    max-width: 6em;
  }
  .table_rwd-flex td.th-w-l::before {
    max-width: 9em;
  }
  /*  */
  .table_rwd .inputTextarea {
    width: 100%;
  }
  /* 表格-連結有置頂 */
  .table_rwd .linkThumb {
    padding-left: 0;
  }
  .table_rwd .linkThumb.linkThumb--top {
    padding-left: 15px;
  }
  /*------------------內容----------------*/
  h2.title {
    padding: 5px 10px;
    font-size: 18px;
    line-height: 30px;
  }
  /*.title.title_expendBtn { padding: 5px 50px 5px 10px; }*/
  .title.title_report_switch {
    padding: 5px 100px 5px 10px;
  }
  .title_note {
    display: block;
    font-size: 16px;
    line-height: 24px;
  }
  .title-flex {
    padding: 10px;
  }
  .title-flex h2.title + .btn_func {
    margin: 0;
  }
  .title-flex h2.title + .btn_func a {
    margin: 0;
  }
  .inputFlex {
    display: block;
  }
  .inputFlex.m-d-flex {
    display: flex;
  }
  .inputFlex .dateFlex {
    display: flex;
    align-items: center;
  }
  .inputFlex .dateFlex > div {
    margin: 0;
  }
  .inputFlex .inputarea {
    margin: 0 0 10px;
  }
  .inputFlex span {
    padding: 0 10px;
  }
  .inputFlex span.hiddenNotice {
    padding: 0;
  }
  .inputFlex span.hiddenNotice_tag {
    padding-left: 24px;
  }
  .inputFlex input + div, .inputFlex select + div {
    margin: 10px 0 0;
  }
  .inputarea select + select, .inputFlex select + select, .inputFlex select + input {
    margin: 10px 0 0;
  }
  .inputFlex .inputarea + .inputarea, .inputFlex .inputarea + .btn {
    margin-left: 0;
  }
  .inputFlex .inputTitle.wideSet {
    width: 100%;
    border-right: 0;
  }
  /* add */
  .inputFlex {
    position: relative;
    margin-bottom: 10px;
    padding: 0 0 10px; /*border-bottom: solid 1px #eaeaea;*/
  }
  .inputFlex::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: -10px;
    right: -10px;
    height: 1px;
    background-color: #eaeaea;
  }
  .inputFlex:last-of-type {
    margin-bottom: 0;
  }
  .inputFlex:last-of-type::after {
    content: none;
  }
  .inputFlex.noBline {
    margin-bottom: 0;
  }
  .inputFlex.noBline::after {
    display: none;
  }
  .inputFlex.bg {
    background: none;
  }
  .inputFlex .inputTitle, .inputFlex span.inputTitle {
    /* margin: -10px -10px 10px; */
    margin: 0 0 10px;
    padding: 10px;
    background: #f6f8fc;
  }
  .inputFlex .inputTitle {
    flex: 0 0 100%;
    display: block; /*margin: 0 0 10px;*/
    line-height: 26px;
  }
  .inputFlex .inputdate {
    margin-bottom: 10px;
  }
  .inputFlex .inputdate + .inputarea {
    margin-left: 0;
  }
  .linebox .inputFlex .inputTitle,
  .linebox .input_inline .inputTitle {
    width: 100%;
  }
  .inputarea {
    margin: 0 0 10px;
  }
  .inputselect.short select {
    width: 100%;
  }
  .input_inline .inputselect {
    display: block;
  }
  .input_inline .inputselect span {
    display: block;
    margin-bottom: 10px;
  }
  .input_inline {
    margin: 0 0 10px;
  }
  .input_inline > div {
    display: block;
    margin: 0 0 10px;
    padding: 0;
    border: none;
  }
  .input_inline span {
    line-height: 26px;
  }
  .chk_inline .inputTitle,
  .input_inline .inputTitle {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 0;
  }
  .input_inline .long,
  .input_inline .half,
  .input_inline .short,
  .input_inline .long_2,
  .input_inline .short_2 {
    width: 100%;
  }
  .linebox {
    padding: 10px 10px 0;
  }
  /*.linebox .inputFlex:last-of-type { margin-bottom: 10px; }*/
  .notice_top {
    position: static;
    padding: 10px;
    line-height: 1.3em;
  }
  /*詳細項目多選*/
  .img_chkList {
    margin-right: -10px;
  }
  .img_chkList > div {
    flex: 0 0 calc(33.3% - 10px);
    margin: 0 10px 10px 0;
  }
  /*登入後首頁*/
  .contentIndex .bnBox {
    height: 160px;
    margin: 0 0 15px;
    padding: 0 16px;
  }
  .contentIndex .bnBox p {
    padding: 40px 0 0;
    text-align: center;
    font-size: 18px;
    line-height: 1.3em;
    background-position: top center;
    background-size: auto 30px;
  }
  h1 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }
  .notice_time {
    margin: 0px 0 10px;
    text-align: left;
  }
  .colorBlock p {
    padding: 10px;
  }
  .colorArea .box {
    padding: 15px 0px;
    font-size: 1.5rem;
    line-height: 30px;
  }
  .colorArea .box span {
    font-size: 0.875rem;
  }
  .visitorBlock p {
    padding: 10px;
  }
  .visitorArea {
    display: block;
  }
  .visitorArea > div {
    padding: 0 10px;
  }
  .visitorArea h3 {
    font-size: 1.25rem;
    line-height: 2em;
  }
  .visitorArea li {
    padding: 5px 0 5px 80px;
  }
  .visitorArea .tit {
    top: 5px;
    left: 0;
    line-height: 30px;
  }
  .visitorArea .num {
    font-size: 1.25rem;
    line-height: 30px;
  }
  /*登入後首頁_告警區塊*/
  .alarmArea {
    display: block;
  }
  .alarmBox {
    margin: 0 0 15px;
  }
  .alarmBox:nth-last-child(1) {
    margin: 0;
  }
  /*--------------------------- 專案管理 ---------------------------*/
  /*-------------------------月曆-------------------------*/
  /*日曆選取*/
  .calendar_header {
    display: block;
  }
  .calendar .listyle {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  .calendar .listyle li {
    margin: 0 10px;
  }
  .calendar .listyle a {
    padding: 0 5px 0 32px;
  }
  .calendar_date {
    margin: 0 0 20px;
  }
  .calendar_filter select {
    width: 100%;
  }
  /*日曆表格*/
  .calendar_month .thset th {
    font-size: 15px;
  }
  .calendar_month .tdset li {
    height: 50px;
    min-height: auto;
  }
  .calendar_month .tdset li .day {
    position: absolute;
    top: 10px;
    left: 50%;
    font-weight: bold;
    z-index: 3;
    margin-left: -5px;
  }
  .calendar_month .tdset li .txt {
    display: none;
  }
  .calendar_month .tdset li .event {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    margin: 0;
    border-radius: 0;
    padding: 0;
    color: #fff;
  }
  .calendar_month .tdset li .event:nth-last-child(2) {
    z-index: 2;
  }
  .calendar_month .tdset li .event a {
    height: 50px;
  }
  .calendar_month .tdset li .event span {
    display: none;
  }
  /*行事曆_列表顯示*/
  .table_schedule {
    overflow-x: auto;
    margin: 0;
  }
  .calendar + .table_schedule {
    margin-top: 0;
  }
  .table_schedule th.schedule_date {
    display: block;
    color: #fff;
    background: #1e8ece;
  }
  .table_schedule td,
  .table_schedule p {
    font-size: 15px;
  }
  .table_schedule .namelist span {
    display: inline-block;
    margin-left: 8px;
  }
  /* 細部條件新增刪除 */
  .laborSelect {
    display: block;
  }
  .laborSelect-item {
    margin-right: 0;
  }
  .laborSelect-item:nth-last-child(1) {
    margin-bottom: 10px;
  }
  .laborSelect .inputTitle {
    background: none;
    padding: 0;
    margin-bottom: 5px;
  }
  .laborArea.m-pt0 {
    padding-top: 0;
  }
  /* hover info資訊 */
  .hiddenNotice_tag.title {
    padding: 0 0 0 20px;
    background-position: left top 0.4em;
  }
  .laborArea-item {
    display: block;
  }
}
@media screen and (max-width: 640px) {
  /*詳細項目多選*/
  .img_chkList > div {
    flex: 0 0 calc(50% - 10px);
    margin: 0 10px 10px 0;
  }
  /*------------------- 登入後首頁 -------------------*/
  /*登入後首頁_北區_地點清單*/
  /*登入後首頁_水庫資訊氣象區塊*/
  .damInfo {
    display: block;
  }
  .waterWaveArea {
    margin: 0 0 20px;
  }
}/*# sourceMappingURL=in.css.map */