@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

body {
  margin: 0;
  font-family: 'Noto Sans TC', 'Microsoft JhengHei';
  font-size: 14px;
  line-height: 1.428571429;
  color: #555;
  background: #f4f4f4;
  height: 100%;
}

a {
  text-decoration: none;
  outline: none;
  color: #006896;
}

  a:hover {
    color: #333;
    text-decoration: none;
  }

img {
  border: 0;
}

h1, h2 {
  margin: 20px 0;
  padding: 3px 0 3px 10px;
  font-size: 20px;
  font-family: 'Noto Sans TC', 'Microsoft JhengHei';
  font-weight: 500;
  color: #006896;
  border-left: 8px #006896 solid;
}

h3 {
  margin: 0;
  font-size: 18px;
  font-family: 'Noto Sans TC', 'Microsoft JhengHei';
  color: #006896;
  font-weight: bold;
}

p {
  margin: 0;
  font-size: 13px;
  font-family: 'Noto Sans TC', 'Microsoft JhengHei';
  text-decoration: none;
  line-height: 22px;
}

td, tr, th, div {
  text-decoration: none;
  font-size: 13px;
  color: #333333;
  font-family: 'Noto Sans TC', 'Microsoft JhengHei';
  line-height: 22px;
}

ul, li {
  margin: 0px;
  padding: 0px;
}

.w-10 { width: 10% !important; }
.w-20 { width: 20% !important; }
.w-30 { width: 30% !important; }
.w-40 { width: 40% !important; }
.w-60 { width: 60% !important; }
.w-70 { width: 70% !important; }
.w-80 { width: 80% !important; }
.w-90 { width: 90% !important; }
.w-95 { width: 95% !important; }

/*主要框架--------------------------------------------------*/

#main {
  width: 100%;
  height: 100%;
}

#header {
  float: left;
  width: 100%;
  height: auto;
  background: #FFF;
  box-shadow: 0 3px 5px rgba(0,0,0,0.1);
}

#header_content {
  margin: 15px auto;
  width: 1260px;
  height: 46px;
}

#logo {
  float: left;
  width: 375px;
  height: 47px;
  background: url(../images/logo.png) no-repeat;
  margin: -1px 0 0 15px;
}

#menu {
  float: right;
  margin: 12px 0 0;
  padding: 0;
}

  #menu ul {
    float: left;
    margin: 0;
    padding: 0;
  }

  #menu li {
    float: left;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
  }

  #menu a {
    color: #606060;
    font-size: 1.2em;
    padding: 5px 20px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
  }

  #menu li.active a, #menu li.active:hover a {
    color: #fff;
    background: #006896;
  }

  #menu li:hover a {
    color: #006896;
  }

#wrapper {
  width: 1230px;
  height: auto;
  margin: 0 auto;
  padding: 0;
}

#wrapper_pop {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0 20px;
}

#page_content {
  float: left;
  width: 100%;
  min-height: 545px;
  padding: 10px 0 30px 0;
  margin: 0;
}

#left_side {
  float: left;
  width: 15%;
  height: auto;
  margin: 0;
  padding: 30px 20px 0 0;
}

#right_side {
  float: left;
  width: 85%;
  height: auto;
  margin: 0;
  padding: 0;
}

#footer {
  float: left;
  width: 100%;
  height: auto;
  position: relative;
  color: #303030;
}

.footer_box {
  width: 1260px;
  height: auto;
  margin: 0 auto 30px;
  padding: 0;
  text-align: center;
}

.txt_red {
  color: #bc2e2e;
}

.txt_blue {
  color: #006896;
}

.txt_green {
  color: #3ab55a;
}

/*標題*/
.form_title {
  float: left;
  width: 100%;
  margin: 10px 0 0;
}

  .form_title h1, .form_title h2 {
    float: left;
    width: auto;
  }

  .form_title p.statu_list {
    float: right;
    text-align: right;
    width: auto;
    margin: 23px 0;
    font-size: 1.15em;
  }

    .form_title p.statu_list span {
      display: inline-block;
      padding: 0 5px;
      color: #bc2e2e;
    }

    .form_title p.statu_list i {
      padding-left: 10px;
      padding-right: 7px;
    }

    .form_title p.statu_list a {
      color: #666;
      border: 1px transparent solid;
      margin-right: -5px;
      padding: 3px 15px 3px 5px;
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      border-radius: 50px;
    }

      .form_title p.statu_list a.active, .form_title p.statu_list a:hover {
        color: #333;
        border: 1px #333 solid;
      }

  .form_title span.btn_style {
    display: inline-block;
    margin: 12px 0 0 10px;
  }

    .form_title span.btn_style i {
      padding-right: 8px;
    }

.bottom_btnArea {
  float: left;
  width: 100%;
  height: auto;
  padding: 10px 0;
  text-align: center;
}

/*查詢*/
.form_search {
  float: left;
  width: 100%;
  padding: 5px 2% 0;
  background: #e5e5e5;
  margin: 0 0 20px;
}

.table_sytle {
  margin-bottom: 5px;
}

  .table_sytle th {
    padding: 5px;
    font-size: 1.2em;
    font-weight: 500;
    background: #EEE;
  }

  .table_sytle td {
    padding: 5px;
    color: #555;
    font-size: 1.15em;
  }

    .table_sytle td.v-align-top {
      vertical-align: top;
    }

.btn_style a {
  display: inline-block;
  color: #FFF;
  width: auto;
  padding: 4px 20px;
  margin: 7px 5px;
  text-align: center;
  font-size: 1.15em;
  box-shadow: 0 3px 0 rgba(0,0,0,0.15);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

  .btn_style a:hover, .btn_style a:active {
    background: #111;
  }

table .btn_style a {
  font-size: 1em !important;
}

.btn_blue a {
  background: #006896;
}

.btn_black a {
  background: #414141;
}

.btn_green a {
  background: #3ab55a;
}

.btn_red a {
  background: #bc2e2e;
}

.btn_yellow a {
  background: #dacb1d;
}

.btn_gray a {
  background: #CCC;
}

.form-control {
  height: auto;
  padding: 4px 4px;
  font-size: 1em;
  line-height: 1.42857143;
  border: 0;
  border-bottom: 1px #666 solid;
  background: transparent;
  color: #555;
  box-shadow: none;
  border-radius: 0;
}

  .form-control.disabled {
    color: #555;
  }

/*表格樣式*/
.form_style {
  float: left;
  width: 100%;
  margin: 0 0 10px 0;
}

  .form_style tr:nth-child(odd) {
    background-color: #dbe6ea;
  }

  .form_style tr:nth-child(even) {
    background-color: #f4f4f4;
  }

  .form_style tr:hover {
    background-color: #fffbcf;
  }

  .form_style th.text-left, .form_style td.text-left {
    padding-left: 20px;
    text-align: left !important;
  }

  .form_style th {
    color: #FFF;
    font-size: 1.1em;
    text-align: center;
    font-weight: 400;
    background: #006896;
    padding: 12px 5px;
    vertical-align: middle;
  }

    .form_style th a {
      color: #FFF;
    }

      .form_style th a:hover {
        color: #CCC;
      }

  .form_style td {
    font-size: 1.1em;
    text-align: center;
    padding: 12px 5px;
    vertical-align: middle;
  }

  .form_style p {
    line-height: 25px;
  }

  .form_style span.txt_memo {
    display: block;
    margin: 5px 0 0;
    color: #bc2e2e;
    font-weight: normal;
  }

  .form_style.edit_style th {
    padding: 12px 15px;
    text-align: right;
  }

  .form_style.edit_style .label_left th {
    text-align: left;
  }

  .form_style.edit_style tr:nth-child(even) th {
    background-color: rgba(0, 104, 150, 0.9);
  }

  .form_style.edit_style tr:nth-child(odd):hover {
    background-color: #dbe6ea;
  }

  .form_style.edit_style tr:nth-child(even):hover {
    background-color: #f4f4f4;
  }

  .form_style.edit_style td {
    padding: 12px 15px;
    text-align: left;
  }

input:disabled {
  color: rgba(59, 59, 59, 0.5);
  background-color: -internal-light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
  border-color: rgba(118, 118, 118, 0.3);
}

.form_style .small_table {
}

  .form_style .small_table tr:nth-child(odd) {
    background-color: #f4f4f4;
  }

  .form_style .small_table tr:nth-child(even) {
    background-color: #fff;
  }

  .form_style .small_table tr:nth-child(odd):hover {
    background-color: #f4f4f4;
  }

  .form_style .small_table tr:nth-child(even):hover {
    background-color: #fff;
  }

  .form_style .small_table.table_hover tr:hover {
    background-color: #fffbcf !important;
  }

  .form_style .small_table th {
    color: #FFF;
    font-size: 1.1em;
    text-align: center;
    font-weight: 400;
    background: #414141 !important;
    padding: 12px 5px;
    vertical-align: middle;
  }

  .form_style .small_table td {
    font-size: 1.1em;
    text-align: center;
    padding: 12px 5px;
    vertical-align: middle;
  }


/*頁碼*/
div.page {
  padding: 0;
  margin: 3px;
  text-align: center;
}

  div.page a {
    border: #ccc 1px solid;
    display: inline-block;
    min-width: 25px;
    height: 25px;
    line-height: 25px;
    margin: 2px;
    color: #666;
    text-decoration: none;
    border-radius: 3px;
  }

    div.page a:hover {
      border: #f0f0f0 1px solid;
      color: #FFF;
      background-color: #333;
    }

    div.page a:active {
      border: #f0f0f0 1px solid;
      color: #666;
    }

  div.page span.current {
    border: #006896 1px solid;
    display: inline-block;
    min-width: 25px;
    height: 25px;
    line-height: 25px;
    font-weight: bold;
    margin: 2px;
    color: #fff;
    background-color: #006896;
    border-radius: 3px;
  }

  div.page span.disabled {
    border: #ddd 1px solid;
    display: inline-block;
    min-width: 25px;
    height: 25px;
    line-height: 25px;
    margin: 2px;
    color: #ddd;
  }


input[type=checkbox].css-checkbox {
  position: absolute;
  z-index: -1000;
  left: -1000px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

  input[type=checkbox].css-checkbox + label.css-label {
    padding-left: 25px;
    height: 20px;
    margin-top: 5px;
    display: inline-block;
    line-height: 20px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 1em;
    font-weight: normal;
    vertical-align: middle;
    cursor: pointer;
  }

  input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -20px;
  }

label.css-label {
  background-image: url(../images/csscheckbox.png);
  user-select: none;
}

#userinfo {
  float: right;
  width: auto;
  height: auto;
  margin: 12px 15px 0 0;
  color: #006896;
  font-size: 1.2em;
}

/*login*/
.login_form {
  float: left;
  width: 100%;
  height: auto;
}

  .login_form > div {
    width: 500px;
    height: auto;
    margin: 0 auto;
  }

  .login_form ul {
    float: left;
    width: 100%;
    height: auto;
    background: #e5e5e5;
    padding: 40px 50px;
  }

  .login_form li {
    float: left;
    width: 100%;
    height: auto;
    margin: 5px 0;
    position: relative;
  }

    .login_form li i.input_style {
      position: absolute;
      bottom: 12px;
      left: 15px;
      font-size: 1.1em;
    }

    .login_form li label, .login_form li a {
      font-size: 1.1em;
    }

    .login_form li p {
      font-size: 1.15em;
    }

      .login_form li p i {
        display: inline-block;
        width: 30px;
        text-align: center;
      }

  .login_form input {
    background: transparent;
    border: 0;
    border-bottom: 1px #BBB solid;
    font-size: 1.1em;
    width: 316px;
    height: auto;
    padding: 10px;
  }

    .login_form input.login_style {
      background: transparent;
      border: 0;
      border-bottom: 1px #BBB solid;
      font-size: 1.15em;
      width: 84.5%;
      height: auto;
      padding: 10px 10px 10px 50px;
    }

    .login_form input:hover {
      border-bottom: 1px #333 solid;
      transition: all 0.5s ease 0s;
    }

  .login_form button {
    border: 0;
    width: 100%;
    margin-top: 10px;
    padding: 10px 5%;
    font-size: 1rem;
    color: #FFF;
    border-radius: 4px;
  }

button.btn_first {
  background: #006896;
  border-bottom: 3px #006896 solid;
}

button.btn_second {
  background: #414141;
  border-bottom: 3px #414141 solid;
}

button:hover {
  cursor: pointer;
  background: #006896;
  border-bottom: 3px #006896 solid;
  transition: all 0.5s ease 0s;
}

.form_style span a {
  font-weight: normal;
}

.btn_DEL {
  display: inline-block;
  color: #bc2e2e;
  padding: 4px 10px;
  margin: 7px 5px;
  font-size: 1.1em;
  border-radius: 4px;
}

  .btn_DEL:hover, .btn_DEL:active, .btn_DEL:focus {
    color: #111;
  }

/*側選單*/
.padding_0 {
  padding: 0;
}

.panel-group {
  padding: 0;
  margin-bottom: 20px;
}

.panel {
  background-color: transparent;
}

.panel-default {
  border: 0;
  box-shadow: none !important;
}

  .panel-default > .panel-heading {
    text-align: center;
    padding: 0;
    background-color: transparent;
    border-color: transparent;
  }

    .panel-default > .panel-heading + .panel-collapse > .panel-body {
      border-top: none;
      border-bottom: 2px #006896 solid;
    }

@media (min-width:768px) {
  .panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-bottom: 0;
  }
}

.panel-title {
  padding: 9px 0;
  font-size: 1.2em;
  font-weight: 500;
  border-radius: 4px;
  color: #FFF;
  background: #414141;
}

.panel-body {
  font-size: 1.05em;
  padding: 8px 0;
  background-color: transparent;
}

.nav-pills > li > a {
  font-size: 1.1em;
  color: #333;
  padding: 7px 15px;
  background-color: transparent;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

  .nav-pills > li > a:hover,
  .nav-pills > li.active > a,
  .nav-pills > li.active > a:hover,
  .nav-pills > li.active > a:focus {
    color: #fff !important;
    background-color: #006896;
  }

@media (max-width:991px) {
  .panel-body {
    font-size: 1em;
  }
}

@media (max-width:767px) {
  .panel-default > .panel-heading {
    padding: 0;
  }

    .panel-default > .panel-heading + .panel-collapse > .panel-body {
      border: 0;
      background-color: transparent;
      box-shadow: none;
    }

  .panel-title {
    font-size: 1.2em;
    border: none;
  }

  .panel-body {
    font-size: 1em;
    margin-bottom: 20px;
  }

  .nav-pills > li > a {
    padding: 5px 15px;
  }
}

.dropdown-menu-tree {
  padding: 5px 0 5px 20px;
}

  .dropdown-menu-tree a {
    display: block;
    width: 100%;
    color: #555 !important;
  }

  .dropdown-menu-tree ul {
    list-style-type: none;
  }

  .dropdown-menu-tree li {
    list-style-type: none;
    padding: 5px 10px;
    font-size: 1.05em;
    border-bottom: 1px rgba(74,131,199,0.2) solid;
  }

    .dropdown-menu-tree li.active a, .dropdown-menu-tree li:hover a {
      color: #006896 !important;
      transition: all 0.5s ease 0s;
    }

.form-control:focus {
  box-shadow: none;
}

.pic_list {
  float: left;
  width: 100px;
  height: auto;
  margin: 0 15px 0 0;
  padding: 0;
  text-align: center;
  box-shadow: 0 3px 5px rgba(0,0,0,0.1);
  border: 1px #ddd solid;
}

  .pic_list img {
    width: 100px;
  }

/*select2*/
select.select_multiple {
  width: 100%;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  padding-left: 10px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: none;
  border-bottom: 1px #66afe9 solid;
}

.select2-container--default .select2-selection--multiple {
  background-color: transparent;
  border: none;
  border-bottom: 1px #666 solid;
  border-radius: 0;
}

/*頁籤*/
.info_tag {
  float: left;
  width: 100%;
  height: auto;
  line-height: 180%;
  padding: 0;
  margin: 10px 0 -25px;
  font-size: 1.2em;
  border-bottom: 2px #414141 solid;
  text-align: center;
}

  .info_tag ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .info_tag li {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .info_tag a {
    width: 100%;
    display: inline-block;
    padding: 5px 0;
    color: #414141;
    background: transparent;
  }

  .info_tag .active a {
    color: #FFF;
    background: #414141;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

@media (max-width:767px) {
  .info_tag {
    margin: -5px 0 5px;
    border: none;
  }

    .info_tag a {
      background: #EEE;
    }
}

.info_tag_show {
  float: left;
  width: 100%;
  height: auto;
  line-height: 180%;
  padding-top: 20px;
  margin-bottom: 5px;
  text-shadow: 0 1px 0 rgba(255,255,255,0);
  font-size: 1.15em;
}

.info {
  float: left;
  width: 100%;
  height: auto;
  padding-top: 15px;
}

/*modal*/
.modal_header {
  background: #006896;
  color: #FFF;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.modal_body {
  font-size: 1.05em;
  padding-bottom: 0;
}

  .modal_body img {
    text-align: center;
  }

.modal_body_content {
  padding-bottom: 10px;
}

@media (max-width:767px) {
  .modal_body_content {
    padding: 0 10px 10px;
  }
}

.modal_body_content h3 {
  margin: 0 0 7px;
  padding: 0;
  color: #333;
  line-height: 140%;
  font-weight: 500;
  font-size: 1.3em;
}

.modal_body_content p {
  line-height: 180%;
  color: #555;
}

.modal_body_content table {
  font-size: 0.95em;
}

.modal_tab_area_list {
  float: left;
  list-style-type: none;
  padding: 0;
}

  .modal_tab_area_list li {
    padding-bottom: 5px;
  }

    .modal_tab_area_list li a {
      color: #272b5b;
    }

      .modal_tab_area_list li a:hover {
        color: #CCC;
      }

.text_content {
  padding: 10px 10px 0;
}

.btn-first {
  color: #fff;
  background-color: #006896;
  border-color: #006896;
}

.btn-second {
  color: #fff;
  background-color: #414141;
  border-color: #414141;
}

  .btn-first:hover, .btn-first:active, .btn-first:focus,
  .btn-second:hover, .btn-second:active, .btn-second:focus {
    background-color: #111;
    border-color: #111;
    color: #fff !important;
  }

.modal-footer .btn-first, .modal-footer .btn-second {
  padding: 12px 5px;
  font-size: 1.1em;
}

.btn_left {
  border-radius: 0;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

/*STAR*/
.star-rating {
  direction: rtl;
  font-size: 2rem;
  unicode-bidi: bidi-override;
  display: inline-block;
}

  .star-rating input[type="radio"] {
    display: none;
  }

  .star-rating label {
    color: #ccc;
    cursor: pointer;
  }

  .star-rating input[type="radio"]:checked ~ label {
    color: #006896;
  }

  .star-rating label:hover,
  .star-rating label:hover ~ label {
    color: #006896;
  }

/*Menu*/
.dropdown-tree {
  width: 100%;
  margin: 0 0 0.5rem 0;
}

  .dropdown-tree a {
    display: block;
  }

/*Sweet Alert 2*/
h2.swal2-title {
  border-left: none;
}