@charset "UTF-8";
/* CSS Document */

section, article, aside, footer, header, nav, h2 { display:block;}

body { padding:0; margin:0 auto; color: #414141; font-size:1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #000; position: relative;}
img { border:0; display: block;}

html, body { height: 100%;}

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

div.brk { clear: both;}


/************ video box ************/
.video-container { position:relative; padding-bottom:56.25%; padding-top:30px; width:100%; height: 0px; overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%;}


@media screen and (min-width: 1440px) {

  /************ header + nav ************/

  header { width: 100%; padding: 0 40px; border-bottom: 1px #ccc solid; box-sizing: border-box;}

  nav#pc-hp { width: 100%;}
  nav#pc-hp .home-icon { width: 100%; padding: 20px 0;}
  nav#pc-hp .home-icon a { color: #308bb8; font-size: 1rem; line-height: 1em; text-decoration: none;}

  nav#mo { display: none;}

  nav#pc { width: 100%; display: flex; justify-content: space-between; align-items: center;}
  nav#pc .home-icon-nav { padding: 20px 0;}
  nav#pc .home-icon-nav a { color: #308bb8; font-size: 1rem; line-height: 1em; text-decoration: none;}
  nav#pc ul.nav-list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center;}
  nav#pc ul.nav-list li { padding: 0; margin: 0; position: relative;}
  nav#pc ul.nav-list li a { padding: 20px 40px; color: #308bb8; font-size: 1rem; line-height: 1em; text-decoration: none; display: block; cursor: pointer;}
  nav#pc ul.nav-list li a:hover { color: #0d4c6b;}
  nav#pc ul.nav-list li a.sel { color: #0d4c6b;}
  nav#pc ul.nav-list li .nav-list-popup { width: 160px; text-align: center; background-color: #000; position: absolute; top: 36px; left: calc(50% - 80px); z-index: 9999; display: none;}
  nav#pc ul.nav-list li .nav-list-popup .icon { width: 100%; color: #0d4c6b; font-size: 1.4rem; line-height: 1em;}
  nav#pc ul.nav-list li .nav-list-popup ul.nav-popup { width: 100%; padding: 20px 0; margin: 0; border: 1px #308bb8 solid; border-radius: 6px; background-color: #fff; list-style: none; display: block;}
  nav#pc ul.nav-list li .nav-list-popup ul.nav-popup li { width: 100%; padding: 0; margin: 0; box-sizing: border-box;}
  nav#pc ul.nav-list li .nav-list-popup ul.nav-popup li:last-child { border-bottom: 0;}
  nav#pc ul.nav-list li .nav-list-popup ul.nav-popup li a { width: 100%; padding: 10px 20px; color: #308bb8; text-decoration: none; background-color: transparent; box-sizing: border-box; display: block;}
  nav#pc ul.nav-list li .nav-list-popup ul.nav-popup li a:hover { color: #fff; background-color: #bbb;}


  /************ section #page-login ************/

  section#page-login { clear: both; width: 100%; padding: 80px; box-sizing: border-box;}

  .login-box { width: 800px; padding: 100px 0; margin: 0 auto; border-radius: 20px; background-color: #eee; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .login-box .caption { width: 42%; padding: 10px; font-size: 1.1rem; text-align: right; box-sizing: border-box;}
  .login-box .column { width: 58%; padding: 10px; text-align: left; box-sizing: border-box;}
  .login-box .column input[type=text], .login-box .column input[type=password] { width: 200px; padding: 8px 10px; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .login-box .column-full { clear: both; width: 100%; margin: 40px 0 0 0; text-align: center;}
  .login-box .column-full input[type=submit], 
  .login-box .column-full input[type=reset] { padding: 10px 40px; margin: 0 5px; color: #fff; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #308bb8; box-sizing: border-box; cursor: pointer;}


  /************ header marquee ************/

  #marquee-bar { clear: both; width: 1200px; padding: 10px 0; margin: 20px auto; font-size: 1.1rem; border-radius: 6px; background-color: #308bb8; overflow: hidden;}
  
  .news_marquee {
    width: 100%;
    min-width: max-content;
    animation : slide 20s linear infinite;
    color: #fff;
  }

  @keyframes slide {
      0% {
      transform: translatex(100%)
      }

      100% {
      transform: translatex(-100%)
      }
  }


  /************ section #page-main ************/

  section#page-main { clear: both; width: 100%; padding: 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .main-nav-bt { width: calc(100% / 5 - 30px); padding: 40px 20px; margin: 0 15px 30px 15px; text-align: center; box-sizing: border-box; border-radius: 20px; background-color: #eee;}
  .main-nav-bt span.stitle { color: #308bb8; font-size: 1.8rem;}
  .main-nav-bt ul.list { clear: both; width: 100%; padding: 0; margin: 20px 0 0 0; box-sizing: border-box; list-style: none; display: block;}
  .main-nav-bt ul.list li { width: 100%; padding: 0; margin: 10px 0;}
  .main-nav-bt ul.list li a { width: 100%; padding: 14px 0; color: #414141; font-size: 1.1rem; line-height: 1.6em; text-align: center; border-radius: 20px; background-color: #fff; text-decoration: none; display: block;}
  .main-nav-bt ul.list li a:hover { color: #fff; background-color: #308bb8;}


  /************ section #page-edit ************/

  section#page-edit { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-breadcrumbs { clear: both; width: 100%; margin: 0 0 40px 0; color: #888; font-size: 0.8rem; line-height: 1.2em;}
  .page-breadcrumbs a { color: #888; text-decoration: none;}
  .page-breadcrumbs a:hover { border-bottom: 1px #888 dashed;}

  .page-title { width: 100%; padding: 10px 0; margin: 0 0 40px 0; color: #308bb8; font-size: 2em; line-height: 1.2em; text-align: center; border-radius: 16px; background-color: #eee;}
  .page-image { display: block; width: 40%; margin-left: auto; margin-right: auto; justify-content: center;}
  .page-content { width: 100%; padding: 1em; margin: 40px 0 0 0; color: #308bb8; font-size: large; line-height: 1.2em; text-align: center; border-radius: 16px; background-color: #eee;}
  
  .page-edit-con { clear: both; width: 100%; margin: 40px 0;}
  .page-edit-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-edit-con .edit-table { width: 540px; padding: 40px; margin: 0 20px; box-sizing: border-box; border-radius: 20px; background-color: #eee;}
  .page-edit-con .edit-table .caption { width: 100%; margin: 0 0 5px 0; font-size: 1.1rem; font-weight: 500; line-height: 1.2em}
  .page-edit-con .edit-table .column { width: 100%; margin: 0 0 20px 0; color: #999; font-size: 0.9rem; line-height: 1.4em; margin: 0 0 15px 0;}
  .page-edit-con .edit-table .column input[type=text] { width: 100%; padding: 8px 10px; margin: 0 0 5px 0; color: #414141; font-size: 1.1rem; box-sizing: border-box; border: 0; background-color: #fff;}   
  .page-edit-con .edit-table .column input[type=email],   
  .page-edit-con .edit-table .column input[type=password] { width: 100%; padding: 8px 10px; margin: 0 0 5px 0; color: #414141; font-size: 1.1rem; box-sizing: border-box; border: 0; background-color: #fff;}
  .page-edit-con .edit-table .column span.old-email { font-size: 1.1rem;}
  .page-edit-con .edit-send-bt { clear: both; width: 100%; margin: 40px 0 0 0; text-align: center;}
  .page-edit-con .edit-send-bt input[type=submit], 
  .page-edit-con .edit-send-bt input[type=reset] { padding: 10px 40px; margin: 0 5px; color: #fff; font-size: 1.1rem; border: 0; border-radius: 10px; background-color: #308bb8; cursor: pointer;}


  /************ section#project-add-edit ************/

  section#project-add-edit { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-content-w700 { clear: both; width: 700px; padding: 40px; margin: 10px auto; border-radius: 10px; background-color: #fff; box-sizing: border-box;}

  .add-edit-table { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .add-edit-table .caption { width: 150px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column { width: calc(100% - 150px); margin: 0 0 10px 0; font-size: 1.2rem; font-weight: 300;}
  .add-edit-table .column input[type=text], 
  .add-edit-table .column input[type=password], 
  .add-edit-table .column select, 
  .add-edit-table .column input[type=date] { width: 100%; padding: 5px 10px; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
     
  .add-edit-table .column-0 { width: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column-1 { width: 130px; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; }
  .add-edit-table .column-2 { width: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column-3 { width: 130px; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; }
  .add-edit-table .column-4 { width: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column-5 { width: 100px; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; }
  .add-edit-table .column-6 { width: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column-7 { width: 130px; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; } 
  
  .add-edit-table .caption-full { width: 100%; margin: 0 0 5px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .caption-full span.color-red { color: #ff0000; font-weight: 300;}
  .add-edit-table .column-full { width: 100%; margin: 0 0 10px 0; font-size: 1.2rem; font-weight: 300;}
  .add-edit-table .column-full input[type=checkbox] { width: 20px; height: 20px;}

  .add-edit-submit { clear: both; width: 100%; margin: 40px auto 0 auto; display: flex; justify-content: flex-end;}
  .add-edit-submit input[type=submit], 
  .add-edit-submit input[type=button] { padding: 8px 40px; margin: 0 0 0 10px; color: #fff; font-size: 1.2rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 14px; background-color: #3465a4; cursor: pointer;}


  /************ section #page-1-1 ************/

  section#page-1-1 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-1-1-con { clear: both; width: 100%; margin: 10px 0;}
  .page-1-1-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-1-1-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-1-1-con .page-button button:hover { background-color: #729fcf;}
  
  .page-1-1-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-1-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .record-table .caption-full .caption-0 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-1 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-2 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-3 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-4 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-5 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-1-1-con .record-table .column-full .column-0 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-1 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-2 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-3 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-4 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-5 { width: 20%; padding: 10px; box-sizing: border-box;}

  /************ section #page-1-2 ************/

  section#page-1-2 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-1-2-con { clear: both; width: 100%; margin: 10px 0;}
  .page-1-2-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-1-2-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-1-2-con .page-button button:hover { background-color: #729fcf;}
  
  .page-1-2-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-2-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-2-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-2 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-3 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-4 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-5 { width: 40%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-6 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-1-2-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-2 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-3 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-4 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-5 { width: 40%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-6 { width: 10%; padding: 10px; box-sizing: border-box;}

  /************ section #page-1-3 ************/

  section#page-1-3 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-1-3-con { clear: both; width: 100%; margin: 10px 0;}
  .page-1-3-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-1-3-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-1-3-con .page-button button:hover { background-color: #729fcf;}
  
  .page-1-3-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-3-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-3-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-2 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-3 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-4 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-5 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-6 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-7 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-1-3-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-2 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-3 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-4 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-5 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-6 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-7 { width: 15%; padding: 10px; box-sizing: border-box;}

  /************ section #page-1-4 ************/

  section#page-1-4 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-1-4-con { clear: both; width: 100%; margin: 10px 0;}
  .page-1-4-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-1-4-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-1-4-con .page-button button:hover { background-color: #729fcf;}
  
  .page-1-4-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-4-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-4-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .caption-full .caption-1 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .caption-full .caption-2 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .caption-full .caption-3 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .caption-full .caption-4 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-1-4-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full .column-1 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full .column-2 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full .column-3 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full .column-4 { width: 25%; padding: 10px; box-sizing: border-box;}

  /************ section #page-2-1 ************/

  section#page-2-1 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-2-1-con { clear: both; width: 100%; margin: 10px 0;}
  .page-2-1-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-2-1-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-2-1-con .page-button button:hover { background-color: #729fcf;}
  
  .page-2-1-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-2-1-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-2-1-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-2 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-3 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-4 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-5 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-6 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-7 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-8 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-2-1-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-2 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-3 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-4 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-5 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-6 { width: 15%; padding: 10px; box-sizing: border-box; text-align: left;}
  .page-2-1-con .record-table .column-full .column-7 { width: 15%; padding: 10px; box-sizing: border-box; text-align: left;}
  .page-2-1-con .record-table .column-full .column-8 { width: 10%; padding: 10px; box-sizing: border-box; text-align: left;}

  /************ section #page-2-2 ************/

  section#page-2-2 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-2-2-con { clear: both; width: 100%; margin: 10px 0;}
  .page-2-2-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-2-2-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-2-2-con .page-button button:hover { background-color: #729fcf;}
  
  .page-2-2-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-2-2-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-2-2-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-2 { width: 12%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-3 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-4 { width: 9%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-5 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-6 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-7 { width: 6%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-8 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-9 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-10 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-11 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-12 { width: 8%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-13 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-2-2-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-2 { width: 12%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-3 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-4 { width: 9%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-5 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-6 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-7 { width: 6%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-8 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-9 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-10 { width: 10%; padding: 10px; box-sizing: border-box; text-align: left;}
  .page-2-2-con .record-table .column-full .column-11 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-12 { width: 8%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-13 { width: 10%; padding: 10px; box-sizing: border-box;}

  /************ section #page-2-3 ************/

  section#page-2-3 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-2-3-con { clear: both; width: 100%; margin: 10px 0;}
  .page-2-3-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-2-3-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-2-3-con .page-button button:hover { background-color: #729fcf;}
  
  .page-2-3-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-2-3-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-2-3-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-2 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;} 
  .page-2-3-con .record-table .caption-full .caption-3 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-4 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-5 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-6 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-7 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-8 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-2-3-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-2 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-3 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-4 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-5 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-6 { width: 10%; padding: 10px; box-sizing: border-box; text-align: left;}
  .page-2-3-con .record-table .column-full .column-7 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-8 { width: 10%; padding: 10px; box-sizing: border-box;}
  
  /************ section #page-2-4 ************/

  section#page-2-4 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-2-4-con { clear: both; width: 100%; margin: 10px 0;}
  .page-2-4-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-2-4-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-2-4-con .page-button button:hover { background-color: #729fcf;}
  
  .page-2-4-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-2-4-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-2-4-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-1 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-2 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-3 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-4 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-5 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-6 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-2-4-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-1 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-2 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-3 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-4 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-5 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-6 { width: 15%; padding: 10px; box-sizing: border-box;}
  
  /************ section #page-3-1 ************/

  section#page-3-1 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-3-1-con { clear: both; width: 100%; margin: 10px 0;}
  .page-3-1-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-3-1-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-3-1-con .page-button button:hover { background-color: #729fcf;}
  
  .page-3-1-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-3-1-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-1-con .record-table .caption-full .caption-0 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-2 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-3 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-4 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-5 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-6 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-3-1-con .record-table .column-full .column-0 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-2 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-3 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-4 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-5 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-6 { width: 20%; padding: 10px; box-sizing: border-box;}
  
    
  /************ section #page-4-1 ************/

  section#page-4-1 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-4-1-con { clear: both; width: 100%; margin: 10px 0;}
  .page-4-1-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-4-1-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-4-1-con .page-button button:hover { background-color: #729fcf;}
  
  .page-4-1-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-4-1-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-1-con .record-table .caption-full .caption-0 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-1 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-2 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-3 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-4 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-5 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-6 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-7 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-4-1-con .record-table .column-full .column-0 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-1 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-2 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-3 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-4 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-5 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-6 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-7 { width: 25%; padding: 10px; box-sizing: border-box;}
  
  
  /************ section#config-add-edit ************/

  section#config-add-edit { clear: both; width: 100%; padding: 0 0 40px 0;}
  .conf-sub-title { width: 100%; padding: 10px 0; color: #3465a4; font-size: 1.8rem; font-weight: 300; text-align: center;}
  .conf-content-w700 { clear: both; width: 700px; padding: 40px; margin: 10px auto; border-radius: 10px; background-color: #fff; box-sizing: border-box;}

  .conf-add-edit-table { clear: both; width: 100%; color: #3465a4; font-size: 1.2rem; line-height: 2em;}
  .conf-add-edit-table input[type=text], 
  .conf-add-edit-table input[type=date], 
  .conf-add-edit-table select { width: 100%; padding: 10px; margin: 0 0 15px 0; color: #333; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .conf-add-edit-table input[type=submit], 
  .conf-add-edit-table input[type=button] { padding: 8px 40px; color: #fff; font-size: 1.2rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 14px; background-color: #3465a4; cursor: pointer; float: right;}

  
  /************ footer ************/

  footer { clear: both; width: 100%; padding: 40px; color: #308bb8; font-size: 0.8rem; line-height: 1em; text-align: center; border-top: 1px #ccc solid; box-sizing: border-box;}
  

}

@media screen and (min-width: 1024px) and (max-width: 1439px) {

  /************ header + nav ************/

  header { width: 100%; padding: 0 40px; border-bottom: 1px #ccc solid; box-sizing: border-box;}

  nav#pc-hp { width: 100%;}
  nav#pc-hp .home-icon { width: 100%; padding: 20px 0;}
  nav#pc-hp .home-icon a { color: #308bb8; font-size: 1rem; line-height: 1em; text-decoration: none;}

  nav#mo { display: none;}

  nav#pc { width: 100%;}
  nav#pc { width: 100%; display: flex; justify-content: space-between; align-items: center;}
  nav#pc .home-icon-nav { padding: 20px 0;}
  nav#pc .home-icon-nav a { color: #308bb8; font-size: 1rem; line-height: 1em; text-decoration: none;}
  nav#pc ul.nav-list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center;}
  nav#pc ul.nav-list li { padding: 0; margin: 0; position: relative;}
  nav#pc ul.nav-list li a { padding: 20px 40px; color: #308bb8; font-size: 1rem; line-height: 1em; text-decoration: none; display: block; cursor: pointer;}
  nav#pc ul.nav-list li a:hover { color: #0d4c6b;}
  nav#pc ul.nav-list li a.sel { color: #0d4c6b;}
  nav#pc ul.nav-list li .nav-list-popup { width: 160px; text-align: center; background-color: #000; position: absolute; top: 36px; left: calc(50% - 80px); z-index: 9999; display: none;}
  nav#pc ul.nav-list li .nav-list-popup .icon { width: 100%; color: #0d4c6b; font-size: 1.4rem; line-height: 1em;}
  nav#pc ul.nav-list li .nav-list-popup ul.nav-popup { width: 100%; padding: 20px 0; margin: 0; border: 1px #308bb8 solid; border-radius: 6px; background-color: #fff; list-style: none; display: block;}
  nav#pc ul.nav-list li .nav-list-popup ul.nav-popup li { width: 100%; padding: 0; margin: 0; box-sizing: border-box;}
  nav#pc ul.nav-list li .nav-list-popup ul.nav-popup li:last-child { border-bottom: 0;}
  nav#pc ul.nav-list li .nav-list-popup ul.nav-popup li a { width: 100%; padding: 10px 20px; color: #308bb8; text-decoration: none; background-color: transparent; box-sizing: border-box; display: block;}
  nav#pc ul.nav-list li .nav-list-popup ul.nav-popup li a:hover { color: #fff; background-color: #bbb;}


  /************ section #page-login ************/

  section#page-login { clear: both; width: 100%; padding: 80px; box-sizing: border-box;}

  .login-box { width: 700px; padding: 100px 0; margin: 0 auto; border-radius: 20px; background-color: #eee; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .login-box .caption { width: 40%; padding: 10px; font-size: 1.1rem; text-align: right; box-sizing: border-box;}
  .login-box .column { width: 60%; padding: 10px; text-align: left; box-sizing: border-box;}
  .login-box .column input[type=text], .login-box .column input[type=password] { width: 200px; padding: 8px 10px; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .login-box .column-full { clear: both; width: 100%; margin: 40px 0 0 0; text-align: center;}
  .login-box .column-full input[type=submit], 
  .login-box .column-full input[type=reset] { padding: 10px 40px; margin: 0 5px; color: #fff; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #308bb8; box-sizing: border-box; cursor: pointer;}


  /************ header marquee ************/

  #marquee-bar { clear: both; width: 900px; padding: 10px 0; margin: 20px auto; font-size: 1.1rem; border-radius: 6px; background-color: #308bb8; overflow: hidden;}
  
  .news_marquee {
    width: 100%;
    min-width: max-content;
    animation : slide 20s linear infinite;
    color: #fff;
  }

  @keyframes slide {
      0% {
      transform: translatex(100%)
      }

      100% {
      transform: translatex(-100%)
      }
  }


  /************ section #page-main ************/

  section#page-main { clear: both; width: 100%; padding: 80px 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .main-nav-bt { width: calc(100% / 3 - 30px); padding: 40px 20px; margin: 0 15px 30px 15px; text-align: center; box-sizing: border-box; border-radius: 20px; background-color: #eee;}
  .main-nav-bt span.stitle { color: #308bb8; font-size: 1.8rem;}
  .main-nav-bt ul.list { clear: both; width: 100%; padding: 0; margin: 20px 0 0 0; box-sizing: border-box; list-style: none; display: block;}
  .main-nav-bt ul.list li { width: 100%; padding: 0; margin: 10px 0;}
  .main-nav-bt ul.list li a { width: 100%; padding: 14px 0; color: #414141; font-size: 1.1rem; line-height: 1.6em; text-align: center; border-radius: 20px; background-color: #fff; text-decoration: none; display: block;}
  .main-nav-bt ul.list li a:hover { color: #fff; background-color: #308bb8;}


  /************ section #page-edit ************/

  section#page-edit { clear: both; width: 100%; padding: 40px 40px 80px 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-breadcrumbs { clear: both; width: 100%; margin: 0 0 40px 0; color: #888; font-size: 0.8rem; line-height: 1.2em;}
  .page-breadcrumbs a { color: #888; text-decoration: none;}
  .page-breadcrumbs a:hover { border-bottom: 1px #888 dashed;}

  .page-title { width: 100%; padding: 10px 0; margin: 0 0 40px 0; color: #308bb8; font-size: 2em; line-height: 1.2em; text-align: center; border-radius: 16px; background-color: #eee;}
  .page-image { display: block; width: 40%; margin-left: auto; margin-right: auto; justify-content: center;}
  .page-content { width: 100%; padding: 1em; margin: 40px 0 0 0; color: #308bb8; font-size: large; line-height: 1.2em; text-align: center; border-radius: 16px; background-color: #eee;}
  
  .page-edit-con { clear: both; width: 100%; margin: 40px 0;}
  .page-edit-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-edit-con .edit-table { width: 400px; padding: 40px; margin: 0 20px; box-sizing: border-box; border-radius: 20px; background-color: #eee;}
  .page-edit-con .edit-table .caption { width: 100%; margin: 0 0 5px 0; font-size: 1.1rem; font-weight: 500; line-height: 1.2em}
  .page-edit-con .edit-table .column { width: 100%; margin: 0 0 20px 0; color: #999; font-size: 0.9rem; line-height: 1.4em; margin: 0 0 15px 0;}
  .page-edit-con .edit-table .column input[type=text] { width: 100%; padding: 8px 10px; margin: 0 0 5px 0; color: #414141; font-size: 1.1rem; box-sizing: border-box; border: 0; background-color: #fff;}  
  .page-edit-con .edit-table .column input[type=email],  
  .page-edit-con .edit-table .column input[type=password] { width: 100%; padding: 8px 10px; margin: 0 0 5px 0; color: #414141; font-size: 1.1rem; box-sizing: border-box; border: 0; background-color: #fff;}
  .page-edit-con .edit-table .column span.old-email { font-size: 1.1rem;}
  .page-edit-con .edit-send-bt { clear: both; width: 100%; margin: 40px 0 0 0; text-align: center;}
  .page-edit-con .edit-send-bt input[type=submit], 
  .page-edit-con .edit-send-bt input[type=reset] { padding: 10px 40px; margin: 0 5px; color: #fff; font-size: 1.1rem; border: 0; border-radius: 10px; background-color: #308bb8; cursor: pointer;}


  /************ section#project-add-edit ************/

  section#project-add-edit { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-content-w700 { clear: both; width: 700px; padding: 40px; margin: 10px auto; border-radius: 10px; background-color: #fff; box-sizing: border-box;}

  .add-edit-table { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .add-edit-table .caption { width: 150px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column { width: calc(100% - 150px); margin: 0 0 10px 0; font-size: 1.2rem; font-weight: 300;}
  .add-edit-table .column input[type=text], 
  .add-edit-table .column input[type=password], 
  .add-edit-table .column select, 
  .add-edit-table .column input[type=date] { width: 100%; padding: 5px 10px; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
     
  .add-edit-table .column-0 { width: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column-1 { width: 130px; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; }
  .add-edit-table .column-2 { width: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column-3 { width: 130px; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; }
  .add-edit-table .column-4 { width: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column-5 { width: 100px; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; }
  .add-edit-table .column-6 { width: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column-7 { width: 130px; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; } 
  
  .add-edit-table .caption-full { width: 100%; margin: 0 0 5px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .caption-full span.color-red { color: #ff0000; font-weight: 300;}
  .add-edit-table .column-full { width: 100%; margin: 0 0 10px 0; font-size: 1.2rem; font-weight: 300;}
  .add-edit-table .column-full input[type=checkbox] { width: 20px; height: 20px;}

  .add-edit-submit { clear: both; width: 100%; margin: 40px auto 0 auto; display: flex; justify-content: flex-end;}
  .add-edit-submit input[type=submit], 
  .add-edit-submit input[type=button] { padding: 8px 40px; margin: 0 0 0 10px; color: #fff; font-size: 1.2rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 14px; background-color: #3465a4; cursor: pointer;}

  /************ section #page-1-1 ************/

  section#page-1-1 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-1-1-con { clear: both; width: 100%; margin: 10px 0;}
  .page-1-1-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-1-1-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-1-1-con .page-button button:hover { background-color: #729fcf;}
  
  .page-1-1-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-1-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .record-table .caption-full .caption-0 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-1 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-2 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-3 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-4 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-5 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-1-1-con .record-table .column-full .column-0 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-1 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-2 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-3 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-4 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-5 { width: 20%; padding: 10px; box-sizing: border-box;}

  /************ section #page-1-2 ************/

  section#page-1-2 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-1-2-con { clear: both; width: 100%; margin: 10px 0;}
  .page-1-2-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-1-2-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-1-2-con .page-button button:hover { background-color: #729fcf;}
  
  .page-1-2-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-2-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-2-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-2 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-3 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-4 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-5 { width: 40%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-6 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-1-2-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-2 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-3 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-4 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-5 { width: 40%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-6 { width: 10%; padding: 10px; box-sizing: border-box;}

  /************ section #page-1-3 ************/

  section#page-1-3 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-1-3-con { clear: both; width: 100%; margin: 10px 0;}
  .page-1-3-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-1-3-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-1-3-con .page-button button:hover { background-color: #729fcf;}
  
  .page-1-3-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-3-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-3-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-2 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-3 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-4 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-5 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-6 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-7 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-1-3-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-2 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-3 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-4 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-5 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-6 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-7 { width: 15%; padding: 10px; box-sizing: border-box;}

  /************ section #page-1-4 ************/

  section#page-1-4 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-1-4-con { clear: both; width: 100%; margin: 10px 0;}
  .page-1-4-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-1-4-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-1-4-con .page-button button:hover { background-color: #729fcf;}
  
  .page-1-4-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-4-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-4-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .caption-full .caption-1 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .caption-full .caption-2 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .caption-full .caption-3 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .caption-full .caption-4 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-1-4-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full .column-1 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full .column-2 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full .column-3 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full .column-4 { width: 25%; padding: 10px; box-sizing: border-box;}
  
  /************ section #page-2-1 ************/

  section#page-2-1 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-2-1-con { clear: both; width: 100%; margin: 10px 0;}
  .page-2-1-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-2-1-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-2-1-con .page-button button:hover { background-color: #729fcf;}
  
  .page-2-1-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-2-1-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-2-1-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-2 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-3 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-4 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-5 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-6 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-7 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-8 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-2-1-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-2 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-3 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-4 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-5 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-6 { width: 15%; padding: 10px; box-sizing: border-box; text-align: left;}
  .page-2-1-con .record-table .column-full .column-7 { width: 15%; padding: 10px; box-sizing: border-box; text-align: left;}
  .page-2-1-con .record-table .column-full .column-8 { width: 10%; padding: 10px; box-sizing: border-box; text-align: left;}

  /************ section #page-2-2 ************/

  section#page-2-2 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-2-2-con { clear: both; width: 100%; margin: 10px 0;}
  .page-2-2-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-2-2-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-2-2-con .page-button button:hover { background-color: #729fcf;}
  
  .page-2-2-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-2-2-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-2-2-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-2 { width: 12%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-3 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-4 { width: 9%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-5 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-6 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-7 { width: 6%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-8 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-9 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-10 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-11 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-12 { width: 8%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-13 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-2-2-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-2 { width: 12%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-3 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-4 { width: 9%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-5 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-6 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-7 { width: 6%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-8 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-9 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-10 { width: 10%; padding: 10px; box-sizing: border-box; text-align: left;}
  .page-2-2-con .record-table .column-full .column-11 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-12 { width: 8%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-13 { width: 10%; padding: 10px; box-sizing: border-box;}

  /************ section #page-2-3 ************/

  section#page-2-3 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-2-3-con { clear: both; width: 100%; margin: 10px 0;}
  .page-2-3-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-2-3-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-2-3-con .page-button button:hover { background-color: #729fcf;}
  
  .page-2-3-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-2-3-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-2-3-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-2 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-3 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-4 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-5 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-6 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-7 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-8 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-2-3-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-2 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-3 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-4 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-5 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-6 { width: 10%; padding: 10px; box-sizing: border-box; text-align: left;}
  .page-2-3-con .record-table .column-full .column-7 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-8 { width: 10%; padding: 10px; box-sizing: border-box;}
  
  /************ section #page-2-4 ************/

  section#page-2-4 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-2-4-con { clear: both; width: 100%; margin: 10px 0;}
  .page-2-4-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-2-4-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-2-4-con .page-button button:hover { background-color: #729fcf;}
  
  .page-2-4-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-2-4-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-2-4-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-1 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-2 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-3 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-4 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-5 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-6 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-2-4-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-1 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-2 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-3 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-4 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-5 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-6 { width: 15%; padding: 10px; box-sizing: border-box;}
  
  /************ section #page-3-1 ************/

  section#page-3-1 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-3-1-con { clear: both; width: 100%; margin: 10px 0;}
  .page-3-1-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-3-1-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-3-1-con .page-button button:hover { background-color: #729fcf;}
  
  .page-3-1-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-3-1-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-1-con .record-table .caption-full .caption-0 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-2 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-3 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-4 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-5 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-6 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-3-1-con .record-table .column-full .column-0 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-2 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-3 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-4 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-5 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-6 { width: 20%; padding: 10px; box-sizing: border-box;}
  
    
  /************ section #page-4-1 ************/

  section#page-4-1 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-4-1-con { clear: both; width: 100%; margin: 10px 0;}
  .page-4-1-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-4-1-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-4-1-con .page-button button:hover { background-color: #729fcf;}
  
  .page-4-1-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-4-1-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-1-con .record-table .caption-full .caption-0 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-1 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-2 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-3 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-4 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-5 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-6 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-7 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-4-1-con .record-table .column-full .column-0 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-1 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-2 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-3 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-4 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-5 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-6 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-7 { width: 25%; padding: 10px; box-sizing: border-box;}
  
  /************ section#config-add-edit ************/

  section#config-add-edit { clear: both; width: 100%; padding: 0 0 40px 0;}
  .conf-sub-title { width: 100%; padding: 10px 0; color: #3465a4; font-size: 1.8rem; font-weight: 300; text-align: center;}
  .conf-content-w700 { clear: both; width: 700px; padding: 40px; margin: 10px auto; border-radius: 10px; background-color: #fff; box-sizing: border-box;}

  .conf-add-edit-table { clear: both; width: 100%; color: #3465a4; font-size: 1.2rem; line-height: 2em;}
  .conf-add-edit-table input[type=text], 
  .conf-add-edit-table input[type=date], 
  .conf-add-edit-table select { width: 100%; padding: 10px; margin: 0 0 15px 0; color: #333; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .conf-add-edit-table input[type=submit], 
  .conf-add-edit-table input[type=button] { padding: 8px 40px; color: #fff; font-size: 1.2rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 14px; background-color: #3465a4; cursor: pointer; float: right;}


  /************ footer ************/

  footer { clear: both; width: 100%; padding: 40px; color: #308bb8; font-size: 0.8rem; line-height: 1em; text-align: center; border-top: 1px #ccc solid; box-sizing: border-box;}


}

@media screen and (min-width: 768px) and (max-width: 1023px) {

  /************ header + nav ************/

  header { width: 100%; padding: 0 40px; border-bottom: 1px #ccc solid; box-sizing: border-box;}

  nav#pc-hp { display: none;}

  nav#pc { display: none;}

  nav#mo { width: 100%; padding: 20px 0; display: flex; justify-content: flex-start; align-items: center;}
  nav#mo .home-icon { width: calc(100% - 40px);}
  nav#mo .home-icon a { color: #308bb8; font-size: 1rem; line-height: 1em; text-decoration: none;}
  nav#mo .nav-icon { width: 40px; color: #308bb8; font-size: 1.4rem; line-height: 1em; text-align: right;}
  nav#mo ul.nav-list { width: 100%; padding: 40px 60px; margin: 0; box-sizing: border-box; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; background-color: #fff; list-style: none; display: none; position: absolute; top: 63px; left: 0;}
  nav#mo ul.nav-list li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul.nav-list li a { width: 100%; padding: 20px; color: #308bb8; font-size: 1rem; line-height: 1em; text-align: center; text-decoration: none; box-sizing: border-box; display: block;}
  nav#mo ul.nav-list li ul.nav-popup { width: 100%; padding: 20px 0; margin: 0; border-radius: 8px; background-color: #eee; list-style: none; display: none;}
  nav#mo ul.nav-list li ul.nav-popup li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #ccc solid; box-sizing: border-box;}
  nav#mo ul.nav-list li ul.nav-popup li:last-child { border-bottom: 0;}
  nav#mo ul.nav-list li ul.nav-popup li a { width: 100%; padding: 15px 20px; color: #444; text-align: center; text-decoration: none; background-color: transparent; box-sizing: border-box; display: block;}
  nav#mo ul.nav-list li ul.nav-popup li a:active { color: #308bb8; background-color: #eee;}


  /************ section #page-login ************/

  section#page-login { clear: both; width: 100%; padding: 80px 40px; box-sizing: border-box;}

  .login-box { width: 90%; padding: 100px 0; margin: 0 auto; border-radius: 20px; background-color: #eee; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .login-box .caption { width: 40%; padding: 10px; font-size: 1.1rem; text-align: right; box-sizing: border-box;}
  .login-box .column { width: 60%; padding: 10px; text-align: left; box-sizing: border-box;}
  .login-box .column input[type=text], .login-box .column input[type=password] { width: 200px; padding: 8px 10px; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .login-box .column-full { clear: both; width: 100%; margin: 40px 0 0 0; text-align: center;}
  .login-box .column-full input[type=submit], 
  .login-box .column-full input[type=reset] { padding: 10px 40px; margin: 0 5px; color: #fff; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #308bb8; box-sizing: border-box; cursor: pointer;}


  /************ header marquee ************/

  #marquee-bar { clear: both; width: 660px; padding: 10px 0; margin: 20px auto; font-size: 1.1rem; border-radius: 6px; background-color: #308bb8; overflow: hidden;}
  
  .news_marquee {
    width: 100%;
    min-width: max-content;
    animation : slide 20s linear infinite;
    color: #fff;
  }

  @keyframes slide {
      0% {
      transform: translatex(100%)
      }

      100% {
      transform: translatex(-100%)
      }
  }


  /************ section #page-main ************/

  section#page-main { clear: both; width: 100%; padding: 80px 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .main-nav-bt { width: calc(100% / 2 - 30px); padding: 40px 20px; margin: 0 15px 30px 15px; text-align: center; box-sizing: border-box; border-radius: 20px; background-color: #eee;}
  .main-nav-bt span.stitle { color: #308bb8; font-size: 1.8rem;}
  .main-nav-bt ul.list { clear: both; width: 100%; padding: 0; margin: 20px 0 0 0; box-sizing: border-box; list-style: none; display: block;}
  .main-nav-bt ul.list li { width: 100%; padding: 0; margin: 10px 0;}
  .main-nav-bt ul.list li a { width: 100%; padding: 14px 0; color: #414141; font-size: 1.1rem; line-height: 1.6em; text-align: center; border-radius: 20px; background-color: #fff; text-decoration: none; display: block;}
  .main-nav-bt ul.list li a:hover { color: #fff; background-color: #308bb8;}


  /************ section #page-edit ************/

  section#page-edit { clear: both; width: 100%; padding: 40px 40px 80px 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-breadcrumbs { clear: both; width: 100%; margin: 0 0 40px 0; color: #888; font-size: 0.8rem; line-height: 1.2em;}
  .page-breadcrumbs a { color: #888; text-decoration: none;}
  .page-breadcrumbs a:hover { border-bottom: 1px #888 dashed;}

  .page-title { width: 100%; padding: 10px 0; margin: 0 0 40px 0; color: #308bb8; font-size: 2em; line-height: 1.2em; text-align: center; border-radius: 16px; background-color: #eee;}
  .page-image { display: block; width: 40%; margin-left: auto; margin-right: auto; justify-content: center;}
  .page-content { width: 100%; padding: 1em; margin: 40px 0 0 0; color: #308bb8; font-size: large; line-height: 1.2em; text-align: center; border-radius: 16px; background-color: #eee;}
  
  .page-edit-con { clear: both; width: 100%; margin: 40px 0;}
  .page-edit-con form { clear: both; width: 100%;}
  .page-edit-con .edit-table { clear: both; width: 500px; padding: 40px; margin: 0 auto 20px auto; box-sizing: border-box; border-radius: 20px; background-color: #eee;}
  .page-edit-con .edit-table .caption { width: 100%; margin: 0 0 5px 0; font-size: 1.1rem; font-weight: 500; line-height: 1.2em}
  .page-edit-con .edit-table .column { width: 100%; margin: 0 0 20px 0; color: #999; font-size: 0.9rem; line-height: 1.4em; margin: 0 0 15px 0;}
  .page-edit-con .edit-table .column input[type=text] { width: 100%; padding: 8px 10px; margin: 0 0 5px 0; color: #414141; font-size: 1.1rem; box-sizing: border-box; border: 0; background-color: #fff;} 
  .page-edit-con .edit-table .column input[type=email],   
  .page-edit-con .edit-table .column input[type=password] { width: 100%; padding: 8px 10px; margin: 0 0 5px 0; color: #414141; font-size: 1.1rem; box-sizing: border-box; border: 0; background-color: #fff;}
  .page-edit-con .edit-table .column span.old-email { font-size: 1.1rem;}
  .page-edit-con .edit-send-bt { clear: both; width: 100%; margin: 40px 0 0 0; text-align: center;}
  .page-edit-con .edit-send-bt input[type=submit], 
  .page-edit-con .edit-send-bt input[type=reset] { padding: 10px 40px; margin: 0 5px; color: #fff; font-size: 1.1rem; border: 0; border-radius: 10px; background-color: #308bb8; cursor: pointer;}

  /************ section#project-add-edit ************/

  section#project-add-edit { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-content-w700 { clear: both; width: 700px; padding: 40px; margin: 10px auto; border-radius: 10px; background-color: #fff; box-sizing: border-box;}

  .add-edit-table { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .add-edit-table .caption { width: 150px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column { width: calc(100% - 150px); margin: 0 0 10px 0; font-size: 1.2rem; font-weight: 300;}
  .add-edit-table .column input[type=text], 
  .add-edit-table .column input[type=password], 
  .add-edit-table .column select, 
  .add-edit-table .column input[type=date] { width: 100%; padding: 5px 10px; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
     
  .add-edit-table .column-0 { width: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column-1 { width: 130px; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; }
  .add-edit-table .column-2 { width: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column-3 { width: 130px; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; }
  .add-edit-table .column-4 { width: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column-5 { width: 100px; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; }
  .add-edit-table .column-6 { width: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column-7 { width: 130px; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; } 
  
  .add-edit-table .caption-full { width: 100%; margin: 0 0 5px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .caption-full span.color-red { color: #ff0000; font-weight: 300;}
  .add-edit-table .column-full { width: 100%; margin: 0 0 10px 0; font-size: 1.2rem; font-weight: 300;}
  .add-edit-table .column-full input[type=checkbox] { width: 20px; height: 20px;}

  .add-edit-submit { clear: both; width: 100%; margin: 40px auto 0 auto; display: flex; justify-content: flex-end;}
  .add-edit-submit input[type=submit], 
  .add-edit-submit input[type=button] { padding: 8px 40px; margin: 0 0 0 10px; color: #fff; font-size: 1.2rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 14px; background-color: #3465a4; cursor: pointer;}

  /************ section #page-1-1 ************/

  section#page-1-1 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-1-1-con { clear: both; width: 100%; margin: 10px 0;}
  .page-1-1-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-1-1-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-1-1-con .page-button button:hover { background-color: #729fcf;}
  
  .page-1-1-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-1-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .record-table .caption-full .caption-0 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-1 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-2 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-3 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-4 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-5 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-1-1-con .record-table .column-full .column-0 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-1 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-2 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-3 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-4 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-5 { width: 20%; padding: 10px; box-sizing: border-box;}

  /************ section #page-1-2 ************/

  section#page-1-2 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-1-2-con { clear: both; width: 100%; margin: 10px 0;}
  .page-1-2-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-1-2-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-1-2-con .page-button button:hover { background-color: #729fcf;}
  
  .page-1-2-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-2-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-2-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-2 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-3 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-4 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-5 { width: 40%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-6 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-1-2-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-2 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-3 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-4 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-5 { width: 40%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-6 { width: 10%; padding: 10px; box-sizing: border-box;}

  /************ section #page-1-3 ************/

  section#page-1-3 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-1-3-con { clear: both; width: 100%; margin: 10px 0;}
  .page-1-3-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-1-3-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-1-3-con .page-button button:hover { background-color: #729fcf;}
  
  .page-1-3-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-3-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-3-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-2 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-3 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-4 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-5 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-6 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-7 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-1-3-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-2 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-3 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-4 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-5 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-6 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-7 { width: 15%; padding: 10px; box-sizing: border-box;}

  /************ section #page-1-4 ************/

  section#page-1-4 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-1-4-con { clear: both; width: 100%; margin: 10px 0;}
  .page-1-4-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-1-4-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-1-4-con .page-button button:hover { background-color: #729fcf;}
  
  .page-1-4-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-4-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-4-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .caption-full .caption-1 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .caption-full .caption-2 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .caption-full .caption-3 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .caption-full .caption-4 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-1-4-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full .column-1 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full .column-2 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full .column-3 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full .column-4 { width: 25%; padding: 10px; box-sizing: border-box;}
  
  /************ section #page-2-1 ************/

  section#page-2-1 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-2-1-con { clear: both; width: 100%; margin: 10px 0;}
  .page-2-1-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-2-1-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-2-1-con .page-button button:hover { background-color: #729fcf;}
  
  .page-2-1-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-2-1-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-2-1-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-2 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-3 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-4 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-5 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-6 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-7 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-8 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-2-1-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-2 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-3 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-4 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-5 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-6 { width: 15%; padding: 10px; box-sizing: border-box; text-align: left;}
  .page-2-1-con .record-table .column-full .column-7 { width: 15%; padding: 10px; box-sizing: border-box; text-align: left;}
  .page-2-1-con .record-table .column-full .column-8 { width: 10%; padding: 10px; box-sizing: border-box; text-align: left;}

  /************ section #page-2-2 ************/

  section#page-2-2 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-2-2-con { clear: both; width: 100%; margin: 10px 0;}
  .page-2-2-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-2-2-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-2-2-con .page-button button:hover { background-color: #729fcf;}
  
  .page-2-2-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-2-2-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-2-2-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-2 { width: 12%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-3 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-4 { width: 9%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-5 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-6 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-7 { width: 6%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-8 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-9 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-10 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-11 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-12 { width: 8%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-13 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-2-2-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-2 { width: 12%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-3 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-4 { width: 9%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-5 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-6 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-7 { width: 6%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-8 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-9 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-10 { width: 10%; padding: 10px; box-sizing: border-box; text-align: left;}
  .page-2-2-con .record-table .column-full .column-11 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-12 { width: 8%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-13 { width: 10%; padding: 10px; box-sizing: border-box;}
  /************ section #page-2-3 ************/

  section#page-2-3 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-2-3-con { clear: both; width: 100%; margin: 10px 0;}
  .page-2-3-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-2-3-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-2-3-con .page-button button:hover { background-color: #729fcf;}
  
  .page-2-3-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-2-3-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-2-3-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-2 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-3 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-4 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-5 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-6 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-7 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-8 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-2-3-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-2 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-3 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-4 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-5 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-6 { width: 10%; padding: 10px; box-sizing: border-box; text-align: left;}
  .page-2-3-con .record-table .column-full .column-7 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-8 { width: 10%; padding: 10px; box-sizing: border-box;}
  
   /************ section #page-2-4 ************/

  section#page-2-4 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-2-4-con { clear: both; width: 100%; margin: 10px 0;}
  .page-2-4-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-2-4-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-2-4-con .page-button button:hover { background-color: #729fcf;}
  
  .page-2-4-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-2-4-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-2-4-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-1 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-2 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-3 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-4 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-5 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-6 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-2-4-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-1 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-2 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-3 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-4 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-5 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-6 { width: 15%; padding: 10px; box-sizing: border-box;}
  
  /************ section #page-3-1 ************/

  section#page-3-1 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-3-1-con { clear: both; width: 100%; margin: 10px 0;}
  .page-3-1-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-3-1-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-3-1-con .page-button button:hover { background-color: #729fcf;}
  
  .page-3-1-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-3-1-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-1-con .record-table .caption-full .caption-0 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-2 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-3 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-4 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-5 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-6 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-3-1-con .record-table .column-full .column-0 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-2 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-3 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-4 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-5 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-6 { width: 20%; padding: 10px; box-sizing: border-box;}
  
   
  /************ section #page-4-1 ************/

  section#page-4-1 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-4-1-con { clear: both; width: 100%; margin: 10px 0;}
  .page-4-1-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-4-1-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-4-1-con .page-button button:hover { background-color: #729fcf;}
  
  .page-4-1-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-4-1-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-1-con .record-table .caption-full .caption-0 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-1 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-2 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-3 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-4 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-5 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-6 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-7 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-4-1-con .record-table .column-full .column-0 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-1 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-2 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-3 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-4 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-5 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-6 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-7 { width: 25%; padding: 10px; box-sizing: border-box;}
 
 
  /************ section#config-add-edit ************/

  section#config-add-edit { clear: both; width: 100%; padding: 0 0 40px 0;}
  .conf-sub-title { width: 100%; padding: 10px 0; color: #3465a4; font-size: 1.8rem; font-weight: 300; text-align: center;}
  .conf-content-w700 { clear: both; width: 700px; padding: 40px; margin: 10px auto; border-radius: 10px; background-color: #fff; box-sizing: border-box;}

  .conf-add-edit-table { clear: both; width: 100%; color: #3465a4; font-size: 1.2rem; line-height: 2em;}
  .conf-add-edit-table input[type=text], 
  .conf-add-edit-table input[type=date], 
  .conf-add-edit-table select { width: 100%; padding: 10px; margin: 0 0 15px 0; color: #333; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .conf-add-edit-table input[type=submit], 
  .conf-add-edit-table input[type=button] { padding: 8px 40px; color: #fff; font-size: 1.2rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 14px; background-color: #3465a4; cursor: pointer; float: right;}



  /************ footer ************/

  footer { clear: both; width: 100%; padding: 40px; color: #308bb8; font-size: 0.8rem; line-height: 1em; text-align: center; border-top: 1px #ccc solid; box-sizing: border-box;}


}

@media screen and (max-width: 767px) {

  /************ header + nav ************/

  header { width: 100%; padding: 0 20px; border-bottom: 1px #ccc solid; box-sizing: border-box;}

  nav#pc-hp { display: none;}

  nav#pc { display: none;}

  nav#mo { width: 100%; padding: 20px 0; display: flex; justify-content: flex-start; align-items: center;}
  nav#mo .home-icon { width: calc(100% - 40px);}
  nav#mo .home-icon a { color: #308bb8; font-size: 1rem; line-height: 1em; text-decoration: none;}
  nav#mo .nav-icon { width: 40px; color: #308bb8; font-size: 1.4rem; line-height: 1em; text-align: right;}
  nav#mo ul.nav-list { width: 100%; padding: 40px; margin: 0; box-sizing: border-box; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; background-color: #fff; list-style: none; display: none; position: absolute; top: 63px; left: 0;}
  nav#mo ul.nav-list li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul.nav-list li a { width: 100%; padding: 20px; color: #308bb8; font-size: 1.2rem; line-height: 1em; text-align: center; text-decoration: none; box-sizing: border-box; display: block;}
  nav#mo ul.nav-list li ul.nav-popup { width: 100%; padding: 20px 0; margin: 0; border-radius: 8px; background-color: #eee; list-style: none; display: none;}
  nav#mo ul.nav-list li ul.nav-popup li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #ccc solid; box-sizing: border-box;}
  nav#mo ul.nav-list li ul.nav-popup li:last-child { border-bottom: 0;}
  nav#mo ul.nav-list li ul.nav-popup li a { width: 100%; padding: 15px 20px; color: #444; text-align: center; text-decoration: none; background-color: transparent; box-sizing: border-box; display: block;}
  nav#mo ul.nav-list li ul.nav-popup li a:active { color: #308bb8; background-color: #eee;}


  /************ section #page-login ************/

  section#page-login { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box;}

  .login-box { width: 100%; padding: 100px 0; margin: 0 auto; border-radius: 20px; background-color: #eee; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .login-box .caption { width: 30%; padding: 10px; font-size: 1.1rem; text-align: right; box-sizing: border-box;}
  .login-box .column { width: 70%; padding: 10px; text-align: left; box-sizing: border-box;}
  .login-box .column input[type=text], .login-box .column input[type=password] { width: 200px; padding: 8px 10px; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .login-box .column-full { clear: both; width: 100%; margin: 40px 0 0 0; text-align: center;}
  .login-box .column-full input[type=submit], 
  .login-box .column-full input[type=reset] { padding: 10px 40px; margin: 0 5px; color: #fff; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #308bb8; box-sizing: border-box; cursor: pointer;}


  /************ header marquee ************/

  #marquee-bar { clear: both; width: 90%; padding: 10px 0; margin: 20px auto; font-size: 1.1rem; border-radius: 6px; background-color: #308bb8; overflow: hidden;}
  
  .news_marquee {
    width: 100%;
    min-width: max-content;
    animation : slide 20s linear infinite;
    color: #fff;
  }

  @keyframes slide {
      0% {
      transform: translatex(100%)
      }

      100% {
      transform: translatex(-100%)
      }
  }


  /************ section #page-main ************/

  section#page-main { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .main-nav-bt { width: 100%; padding: 40px 20px; margin: 0 0 30px 0; text-align: center; box-sizing: border-box; border-radius: 20px; background-color: #eee;}
  .main-nav-bt span.stitle { color: #308bb8; font-size: 1.8rem;}
  .main-nav-bt ul.list { clear: both; width: 100%; padding: 0; margin: 20px 0 0 0; box-sizing: border-box; list-style: none; display: block;}
  .main-nav-bt ul.list li { width: 100%; padding: 0; margin: 10px 0;}
  .main-nav-bt ul.list li a { width: 100%; padding: 14px 0; color: #414141; font-size: 1.1rem; line-height: 1.6em; text-align: center; border-radius: 20px; background-color: #fff; text-decoration: none; display: block;}
  .main-nav-bt ul.list li a:active { color: #fff; background-color: #308bb8;}


  /************ section #page-edit ************/

  section#page-edit { clear: both; width: 100%; padding: 40px 20px 80px 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-breadcrumbs { clear: both; width: 100%; margin: 0 0 40px 0; color: #888; font-size: 0.8rem; line-height: 1.2em;}
  .page-breadcrumbs a { color: #888; text-decoration: none;}
  .page-breadcrumbs a:hover { border-bottom: 1px #888 dashed;}

  .page-title { width: 100%; padding: 10px 0; margin: 0 0 40px 0; color: #308bb8; font-size: 2em; line-height: 1.2em; text-align: center; border-radius: 16px; background-color: #eee;}
  .page-image { display: block; width: 40%; margin-left: auto; margin-right: auto; justify-content: center;}
  .page-content { width: 100%; padding: 1em; margin: 40px 0 0 0; color: #308bb8; font-size: large; line-height: 1.2em; text-align: center; border-radius: 16px; background-color: #eee;}
  
  .page-edit-con { clear: both; width: 100%; margin: 40px 0;}
  .page-edit-con form { clear: both; width: 100%;}
  .page-edit-con .edit-table { clear: both; width: 100%; padding: 40px 20px; margin: 0 auto 20px auto; box-sizing: border-box; border-radius: 20px; background-color: #eee;}
  .page-edit-con .edit-table .caption { width: 100%; margin: 0 0 5px 0; font-size: 1.1rem; font-weight: 500; line-height: 1.2em}
  .page-edit-con .edit-table .column { width: 100%; margin: 0 0 20px 0; color: #999; font-size: 0.9rem; line-height: 1.4em; margin: 0 0 15px 0;}
  .page-edit-con .edit-table .column input[type=text] { width: 100%; padding: 8px 10px; margin: 0 0 5px 0; color: #414141; font-size: 1.1rem; box-sizing: border-box; border: 0; background-color: #fff;}
  .page-edit-con .edit-table .column input[type=email],  
  .page-edit-con .edit-table .column input[type=password] { width: 100%; padding: 8px 10px; margin: 0 0 5px 0; color: #414141; font-size: 1.1rem; box-sizing: border-box; border: 0; background-color: #fff;}
  .page-edit-con .edit-table .column span.old-email { font-size: 1.1rem;}
  .page-edit-con .edit-send-bt { clear: both; width: 100%; margin: 40px 0 0 0; text-align: center;}
  .page-edit-con .edit-send-bt input[type=submit], 
  .page-edit-con .edit-send-bt input[type=reset] { padding: 10px 40px; margin: 0 5px; color: #fff; font-size: 1.1rem; border: 0; border-radius: 10px; background-color: #308bb8; cursor: pointer;}

  /************ section#project-add-edit ************/

  section#project-add-edit { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-content-w700 { clear: both; width: 700px; padding: 40px; margin: 10px auto; border-radius: 10px; background-color: #fff; box-sizing: border-box;}

  .add-edit-table { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .add-edit-table .caption { width: 150px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column { width: calc(100% - 150px); margin: 0 0 10px 0; font-size: 1.2rem; font-weight: 300;}
  .add-edit-table .column input[type=text], 
  .add-edit-table .column input[type=password], 
  .add-edit-table .column select, 
  .add-edit-table .column input[type=date] { width: 100%; padding: 5px 10px; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
     
  .add-edit-table .column-0 { width: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column-1 { width: 130px; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; }
  .add-edit-table .column-2 { width: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column-3 { width: 130px; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; }
  .add-edit-table .column-4 { width: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column-5 { width: 100px; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; }
  .add-edit-table .column-6 { width: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column-7 { width: 130px; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; } 
  
  .add-edit-table .caption-full { width: 100%; margin: 0 0 5px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .caption-full span.color-red { color: #ff0000; font-weight: 300;}
  .add-edit-table .column-full { width: 100%; margin: 0 0 10px 0; font-size: 1.2rem; font-weight: 300;}
  .add-edit-table .column-full input[type=checkbox] { width: 20px; height: 20px;}

  .add-edit-submit { clear: both; width: 100%; margin: 40px auto 0 auto; display: flex; justify-content: flex-end;}
  .add-edit-submit input[type=submit], 
  .add-edit-submit input[type=button] { padding: 8px 40px; margin: 0 0 0 10px; color: #fff; font-size: 1.2rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 14px; background-color: #3465a4; cursor: pointer;}

  /************ section #page-1-1 ************/

  section#page-1-1 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-1-1-con { clear: both; width: 100%; margin: 10px 0;}
  .page-1-1-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-1-1-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-1-1-con .page-button button:hover { background-color: #729fcf;}
  
  .page-1-1-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-1-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .record-table .caption-full .caption-0 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-1 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-2 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-3 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-4 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-5 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-1-1-con .record-table .column-full .column-0 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-1 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-2 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-3 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-4 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-5 { width: 20%; padding: 10px; box-sizing: border-box;}

  /************ section #page-1-2 ************/

  section#page-1-2 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-1-2-con { clear: both; width: 100%; margin: 10px 0;}
  .page-1-2-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-1-2-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-1-2-con .page-button button:hover { background-color: #729fcf;}
  
  .page-1-2-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-2-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-2-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-2 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-3 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-4 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-5 { width: 40%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-6 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-1-2-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-2 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-3 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-4 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-5 { width: 40%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-6 { width: 10%; padding: 10px; box-sizing: border-box;}

  /************ section #page-1-3 ************/

  section#page-1-3 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-1-3-con { clear: both; width: 100%; margin: 10px 0;}
  .page-1-3-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-1-3-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-1-3-con .page-button button:hover { background-color: #729fcf;}
  
  .page-1-3-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-3-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-3-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-2 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-3 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-4 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-5 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-6 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-7 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-1-3-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-2 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-3 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-4 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-5 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-6 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-7 { width: 15%; padding: 10px; box-sizing: border-box;}

  /************ section #page-1-4 ************/

  section#page-1-4 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-1-4-con { clear: both; width: 100%; margin: 10px 0;}
  .page-1-4-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-1-4-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-1-4-con .page-button button:hover { background-color: #729fcf;}
  
  .page-1-4-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-4-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-4-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .caption-full .caption-1 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .caption-full .caption-2 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .caption-full .caption-3 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .caption-full .caption-4 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-1-4-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full .column-1 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full .column-2 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full .column-3 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full .column-4 { width: 25%; padding: 10px; box-sizing: border-box;}
  
  /************ section #page-2-1 ************/

  section#page-2-1 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-2-1-con { clear: both; width: 100%; margin: 10px 0;}
  .page-2-1-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-2-1-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-2-1-con .page-button button:hover { background-color: #729fcf;}
  
  .page-2-1-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-2-1-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-2-1-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-2 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-3 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-4 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-5 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-6 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-7 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-8 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-2-1-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-2 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-3 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-4 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-5 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-6 { width: 15%; padding: 10px; box-sizing: border-box; text-align: left;}
  .page-2-1-con .record-table .column-full .column-7 { width: 15%; padding: 10px; box-sizing: border-box; text-align: left;}
  .page-2-1-con .record-table .column-full .column-8 { width: 10%; padding: 10px; box-sizing: border-box; text-align: left;}

  /************ section #page-2-2 ************/

  section#page-2-2 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-2-2-con { clear: both; width: 100%; margin: 10px 0;}
  .page-2-2-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-2-2-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-2-2-con .page-button button:hover { background-color: #729fcf;}
  
  .page-2-2-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-2-2-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-2-2-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-2 { width: 12%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-3 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-4 { width: 9%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-5 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-6 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-7 { width: 6%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-8 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-9 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-10 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-11 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-12 { width: 8%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-13 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-2-2-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-2 { width: 12%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-3 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-4 { width: 9%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-5 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-6 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-7 { width: 6%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-8 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-9 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-10 { width: 10%; padding: 10px; box-sizing: border-box; text-align: left;}
  .page-2-2-con .record-table .column-full .column-11 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-12 { width: 8%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-13 { width: 10%; padding: 10px; box-sizing: border-box;}

  /************ section #page-2-3 ************/

  section#page-2-3 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-2-3-con { clear: both; width: 100%; margin: 10px 0;}
  .page-2-3-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-2-3-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-2-3-con .page-button button:hover { background-color: #729fcf;}
  
  .page-2-3-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-2-3-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-2-3-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-2 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-3 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-4 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-5 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-6 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-7 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-8 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-2-3-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-2 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-3 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-4 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-5 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-6 { width: 10%; padding: 10px; box-sizing: border-box; text-align: left;}
  .page-2-3-con .record-table .column-full .column-7 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-8 { width: 10%; padding: 10px; box-sizing: border-box;}
  
  /************ section #page-2-4 ************/

  section#page-2-4 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-2-4-con { clear: both; width: 100%; margin: 10px 0;}
  .page-2-4-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-2-4-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-2-4-con .page-button button:hover { background-color: #729fcf;}
  
  .page-2-4-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-2-4-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-2-4-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-1 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-2 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-3 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-4 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-5 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-6 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-2-4-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-1 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-2 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-3 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-4 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-5 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-6 { width: 15%; padding: 10px; box-sizing: border-box;}
  
  /************ section #page-3-1 ************/

  section#page-3-1 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-3-1-con { clear: both; width: 100%; margin: 10px 0;}
  .page-3-1-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-3-1-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-3-1-con .page-button button:hover { background-color: #729fcf;}
  
  .page-3-1-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-3-1-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-1-con .record-table .caption-full .caption-0 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-2 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-3 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-4 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-5 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-6 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-3-1-con .record-table .column-full .column-0 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-2 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-3 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-4 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-5 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-6 { width: 20%; padding: 10px; box-sizing: border-box;}
  
    
  /************ section #page-4-1 ************/

  section#page-4-1 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-4-1-con { clear: both; width: 100%; margin: 10px 0;}
  .page-4-1-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-4-1-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-4-1-con .page-button button:hover { background-color: #729fcf;}
  
  .page-4-1-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-4-1-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-1-con .record-table .caption-full .caption-0 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-1 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-2 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-3 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-4 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-5 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-6 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-7 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-4-1-con .record-table .column-full .column-0 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-1 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-2 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-3 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-4 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-5 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-6 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-7 { width: 25%; padding: 10px; box-sizing: border-box;}
  
  
  /************ section#config-add-edit ************/

  section#config-add-edit { clear: both; width: 100%; padding: 0 0 40px 0;}
  .conf-sub-title { width: 100%; padding: 10px 0; color: #3465a4; font-size: 1.8rem; font-weight: 300; text-align: center;}
  .conf-content-w700 { clear: both; width: calc(100% - 20px); padding: 40px 20px; margin: 10px; border-radius: 10px; background-color: #fff; box-sizing: border-box;}

  .conf-add-edit-table { clear: both; width: 100%; color: #3465a4; font-size: 1.2rem; line-height: 2em;}
  .conf-add-edit-table input[type=text], 
  .conf-add-edit-table input[type=date], 
  .conf-add-edit-table select { width: 100%; padding: 10px; margin: 0 0 15px 0; color: #333; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .conf-add-edit-table input[type=submit], 
  .conf-add-edit-table input[type=button] { padding: 8px 40px; color: #fff; font-size: 1.2rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 14px; background-color: #3465a4; cursor: pointer; float: right;}



  /************ footer ************/

  footer { clear: both; width: 100%; padding: 40px; color: #308bb8; font-size: 0.8rem; line-height: 1em; text-align: center; border-top: 1px #ccc solid; box-sizing: border-box;}
  

}


@media print {

  body { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;}


  /************ header marquee ************/

  #marquee-bar { display: none;}

  /************ header + nav ************/

  header { display: none;}


  /************ section #page-login ************/

  section#page-login { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box;}

  .login-box { width: 100%; padding: 100px 0; margin: 0 auto; border-radius: 20px; background-color: #eee; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .login-box .caption { width: 30%; padding: 10px; text-align: right; box-sizing: border-box;}
  .login-box .column { width: 70%; padding: 10px; text-align: left; box-sizing: border-box;}
  .login-box .column input[type=text], .login-box .column input[type=password] { width: 200px; padding: 5px 10px; font-size: 0.9rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .login-box .column input[type=submit] { padding: 5px 10px; color: #fff; font-size: 0.9rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #308bb8; box-sizing: border-box; cursor: pointer;}


  /************ section #page-main ************/

  section#page-main { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .main-nav-bt { width: 100%; padding: 40px 20px; margin: 0 0 30px 0; text-align: center; box-sizing: border-box; border-radius: 20px; background-color: #eee;}
  .main-nav-bt span.stitle { color: #308bb8; font-size: 1.8rem;}
  .main-nav-bt ul.list { clear: both; width: 100%; padding: 0; margin: 20px 0 0 0; box-sizing: border-box; list-style: none; display: block;}
  .main-nav-bt ul.list li { width: 100%; padding: 0; margin: 10px 0;}
  .main-nav-bt ul.list li a { width: 100%; padding: 8px 0; color: #414141; font-size: 1.1rem; line-height: 1.6em; text-align: center; border-radius: 20px; background-color: #fff; text-decoration: none; display: block;}
  .main-nav-bt ul.list li a:active { color: #fff; background-color: #308bb8;}


  /************ section #page-edit ************/

  section#page-edit { clear: both; width: 100%; padding: 40px 20px 80px 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-breadcrumbs { display: none;}

  .page-title { width: 100%; padding: 10px 0; margin: 0 0 40px 0; color: #308bb8; font-size: 2em; line-height: 1.2em; text-align: center; border-radius: 16px; background-color: #eee;}
  .page-image { display: block; width: 40%; margin-left: auto; margin-right: auto; justify-content: center;}
  .page-content { width: 100%; padding: 1em; margin: 40px 0 0 0; color: #308bb8; font-size: large; line-height: 1.2em; text-align: center; border-radius: 16px; background-color: #eee;}
  
  .page-edit-con { clear: both; width: 100%;}

  /************ section#project-add-edit ************/

  section#project-add-edit { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-content-w700 { clear: both; width: 700px; padding: 40px; margin: 10px auto; border-radius: 10px; background-color: #fff; box-sizing: border-box;}

  .add-edit-table { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .add-edit-table .caption { width: 150px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column { width: calc(100% - 150px); margin: 0 0 10px 0; font-size: 1.2rem; font-weight: 300;}
  .add-edit-table .column input[type=text], 
  .add-edit-table .column input[type=password], 
  .add-edit-table .column select, 
  .add-edit-table .column input[type=date] { width: 100%; padding: 5px 10px; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
     
  .add-edit-table .column-0 { width: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column-1 { width: 130px; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; }
  .add-edit-table .column-2 { width: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column-3 { width: 130px; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; }
  .add-edit-table .column-4 { width: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column-5 { width: 100px; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; }
  .add-edit-table .column-6 { width: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column-7 { width: 130px; margin: 0 0 10px 0; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; } 
  
  .add-edit-table .caption-full { width: 100%; margin: 0 0 5px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .caption-full span.color-red { color: #ff0000; font-weight: 300;}
  .add-edit-table .column-full { width: 100%; margin: 0 0 10px 0; font-size: 1.2rem; font-weight: 300;}
  .add-edit-table .column-full input[type=checkbox] { width: 20px; height: 20px;}

  .add-edit-submit { clear: both; width: 100%; margin: 40px auto 0 auto; display: flex; justify-content: flex-end;}
  .add-edit-submit input[type=submit], 
  .add-edit-submit input[type=button] { padding: 8px 40px; margin: 0 0 0 10px; color: #fff; font-size: 1.2rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 14px; background-color: #3465a4; cursor: pointer;}

  /************ section #page-1-1 ************/

  section#page-1-1 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-1-1-con { clear: both; width: 100%; margin: 10px 0;}
  .page-1-1-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-1-1-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-1-1-con .page-button button:hover { background-color: #729fcf;}
  
  .page-1-1-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-1-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .record-table .caption-full .caption-0 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-1 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-2 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-3 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-4 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .caption-full .caption-5 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-1-1-con .record-table .column-full .column-0 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-1 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-2 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-3 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-4 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-1-con .record-table .column-full .column-5 { width: 20%; padding: 10px; box-sizing: border-box;}

  /************ section #page-1-2 ************/

  section#page-1-2 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-1-2-con { clear: both; width: 100%; margin: 10px 0;}
  .page-1-2-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-1-2-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-1-2-con .page-button button:hover { background-color: #729fcf;}
  
  .page-1-2-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-2-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-2-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-2 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-3 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-4 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-5 { width: 40%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .caption-full .caption-6 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-1-2-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-2 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-3 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-4 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-5 { width: 40%; padding: 10px; box-sizing: border-box;}
  .page-1-2-con .record-table .column-full .column-6 { width: 10%; padding: 10px; box-sizing: border-box;}

  /************ section #page-1-3 ************/

  section#page-1-3 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-1-3-con { clear: both; width: 100%; margin: 10px 0;}
  .page-1-3-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-1-3-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-1-3-con .page-button button:hover { background-color: #729fcf;}
  
  .page-1-3-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-3-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-3-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-2 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-3 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-4 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-5 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-6 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .caption-full .caption-7 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-1-3-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-2 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-3 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-4 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-5 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-6 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-1-3-con .record-table .column-full .column-7 { width: 15%; padding: 10px; box-sizing: border-box;}

  /************ section #page-1-4 ************/

  section#page-1-4 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-1-4-con { clear: both; width: 100%; margin: 10px 0;}
  .page-1-4-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-1-4-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-1-4-con .page-button button:hover { background-color: #729fcf;}
  
  .page-1-4-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-4-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-4-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .caption-full .caption-1 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .caption-full .caption-2 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .caption-full .caption-3 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .caption-full .caption-4 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-1-4-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full .column-1 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full .column-2 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full .column-3 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-1-4-con .record-table .column-full .column-4 { width: 25%; padding: 10px; box-sizing: border-box;}
  
  /************ section #page-2-1 ************/

  section#page-2-1 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-2-1-con { clear: both; width: 100%; margin: 10px 0;}
  .page-2-1-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-2-1-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-2-1-con .page-button button:hover { background-color: #729fcf;}
  
  .page-2-1-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-2-1-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-2-1-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-2 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-3 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-4 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-5 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-6 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-7 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .caption-full .caption-8 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-2-1-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-2 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-3 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-4 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-5 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-1-con .record-table .column-full .column-6 { width: 15%; padding: 10px; box-sizing: border-box; text-align: left;}
  .page-2-1-con .record-table .column-full .column-7 { width: 15%; padding: 10px; box-sizing: border-box; text-align: left;}
  .page-2-1-con .record-table .column-full .column-8 { width: 10%; padding: 10px; box-sizing: border-box; text-align: left;}

  /************ section #page-2-2 ************/

  section#page-2-2 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-2-2-con { clear: both; width: 100%; margin: 10px 0;}
  .page-2-2-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-2-2-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-2-2-con .page-button button:hover { background-color: #729fcf;}
  
  .page-2-2-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-2-2-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-2-2-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-2 { width: 12%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-3 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-4 { width: 9%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-5 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-6 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-7 { width: 6%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-8 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-9 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-10 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-11 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-12 { width: 8%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .caption-full .caption-13 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-2-2-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-2 { width: 12%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-3 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-4 { width: 9%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-5 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-6 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-7 { width: 6%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-8 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-9 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-10 { width: 10%; padding: 10px; box-sizing: border-box; text-align: left;}
  .page-2-2-con .record-table .column-full .column-11 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-12 { width: 8%; padding: 10px; box-sizing: border-box;}
  .page-2-2-con .record-table .column-full .column-13 { width: 10%; padding: 10px; box-sizing: border-box;}

  /************ section #page-2-3 ************/

  section#page-2-3 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-2-3-con { clear: both; width: 100%; margin: 10px 0;}
  .page-2-3-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-2-3-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-2-3-con .page-button button:hover { background-color: #729fcf;}
  
  .page-2-3-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-2-3-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-2-3-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-2 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-3 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-4 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-5 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-6 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-7 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .caption-full .caption-8 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-2-3-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-2 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-3 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-4 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-5 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-6 { width: 10%; padding: 10px; box-sizing: border-box; text-align: left;}
  .page-2-3-con .record-table .column-full .column-7 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-3-con .record-table .column-full .column-8 { width: 10%; padding: 10px; box-sizing: border-box;}

  /************ section #page-2-4 ************/

  section#page-2-4 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-2-4-con { clear: both; width: 100%; margin: 10px 0;}
  .page-2-4-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-2-4-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-2-4-con .page-button button:hover { background-color: #729fcf;}
  
  .page-2-4-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-2-4-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-2-4-con .record-table .caption-full .caption-0 { width: 0%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-1 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-2 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-3 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-4 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-5 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .caption-full .caption-6 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-2-4-con .record-table .column-full .column-0 { width: 0%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-1 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-2 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-3 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-4 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-5 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-2-4-con .record-table .column-full .column-6 { width: 15%; padding: 10px; box-sizing: border-box;}
  
  /************ section #page-3-1 ************/

  section#page-3-1 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-3-1-con { clear: both; width: 100%; margin: 10px 0;}
  .page-3-1-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-3-1-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-3-1-con .page-button button:hover { background-color: #729fcf;}
  
  .page-3-1-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-3-1-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-1-con .record-table .caption-full .caption-0 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-2 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-3 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-4 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-5 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .caption-full .caption-6 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-3-1-con .record-table .column-full .column-0 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-2 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-3 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-4 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-5 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .record-table .column-full .column-6 { width: 20%; padding: 10px; box-sizing: border-box;}
  
    
  /************ section #page-4-1 ************/

  section#page-4-1 { clear: both; width: 100%; padding: 40px 80px 80px 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .page-4-1-con { clear: both; width: 100%; margin: 10px 0;}
  .page-4-1-con form { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-4-1-con .page-button button { width: 100px; padding: 5px 0; margin: 5px; color: #fff; font-size: 1.1rem; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 10px; background-color: #3465a4; cursor: pointer;}
  .page-4-1-con .page-button button:hover { background-color: #729fcf;}
  
  .page-4-1-con .record-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-4-1-con .record-table .caption-full { width: 100%; font-size: 0.9rem; font-weight: 600; text-align: center; border-bottom: 1px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-1-con .record-table .caption-full .caption-0 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-1 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-2 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-3 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-4 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-5 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-6 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .caption-full .caption-7 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full { width: 100%; font-size: 0.9rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; word-break: break-all;}
  .page-4-1-con .record-table .column-full .column-0 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-1 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-2 { width: 15%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-3 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-4 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-5 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-6 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-4-1-con .record-table .column-full .column-7 { width: 25%; padding: 10px; box-sizing: border-box;}
  
  
  /************ section#config-add-edit ************/

  section#config-add-edit { clear: both; width: 100%; padding: 0 0 40px 0;}
  .conf-sub-title { width: 100%; padding: 10px 0; color: #3465a4; font-size: 1.8rem; font-weight: 300; text-align: center;}
  .conf-content-w700 { clear: both; width: calc(100% - 20px); padding: 40px 20px; margin: 10px; border-radius: 10px; background-color: #fff; box-sizing: border-box;}

  .conf-add-edit-table { clear: both; width: 100%; color: #3465a4; font-size: 1.2rem; line-height: 2em;}
  .conf-add-edit-table input[type=text], 
  .conf-add-edit-table input[type=date], 
  .conf-add-edit-table select { width: 100%; padding: 10px; margin: 0 0 15px 0; color: #333; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .conf-add-edit-table input[type=submit], 
  .conf-add-edit-table input[type=button] { padding: 8px 40px; color: #fff; font-size: 1.2rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 14px; background-color: #3465a4; cursor: pointer; float: right;}



  /************ footer ************/

  footer { display: none;}


}