@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: #fff; 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: #fff; 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: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column { width: calc(100% - 130px); 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 ************/

  .page-update-time { clear: both; width: 100%; margin: 0 0 40px 0; color: #666; font-size: 0.8rem; line-height: 1.2em;}

  .page-1-1-con { clear: both; width: 100%;}

  .page-1-1-con .shift-table { width: 50%; margin: 0 0 40px 0;}
  .page-1-1-con .shift-table .caption-full { width: 100%; font-size: 0.8rem; font-weight: 600; line-height: 1.1em; border-bottom: 2px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .shift-table .caption-full .caption { width: calc(100% / 6); padding: 10px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .shift-table .caption-full .caption:last-child { border-right: 0;}
  .page-1-1-con .shift-table .column-full { width: 100%; font-size: 0.8rem; line-height: 1.1em; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .shift-table .column-full .header { width: calc(100% / 6); padding: 10px; text-align: right; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-1-1-con .shift-table .column-full .column { width: calc(100% / 6); padding: 10px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .shift-table .column-full .column:nth-child(1) { text-align: center;}
  .page-1-1-con .shift-table .column-full-total { width: 100%; font-size: 0.8rem; line-height: 1.1em; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .shift-table .column-full-total .column { width: calc(100% / 6); padding: 10px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .shift-table .column-full-total .column:nth-child(1) { text-align: center;}

  .page-1-1-con .oil-table { width: calc(100% / 3 - 10px); margin: 0 5px 40px 5px; float: left;}
  .page-1-1-con .oil-table:first-child { clear: both;}
  .page-1-1-con .oil-table .caption-full { width: 100%; font-size: 0.8rem; font-weight: 600; line-height: 1.1em; border-bottom: 2px #ccc solid; box-sizing: border-box; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .oil-table .caption-full .caption { width: calc(100% / 6); padding: 10px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .oil-table .caption-full .caption:last-child { border-right: 0;}
  .page-1-1-con .oil-table .column-full { width: 100%; font-size: 0.8rem; line-height: 1.1em; border-bottom: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .oil-table .column-full .header { width: calc(100% / 6); padding: 10px; text-align: right; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-1-1-con .oil-table .column-full .column { width: calc(100% / 6); padding: 10px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .oil-table .column-full .column:nth-child(1) { text-align: center;}
  .page-1-1-con .oil-table .column-full-total { width: 100%; font-size: 0.8rem; line-height: 1.1em; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .oil-table .column-full-total .column { width: calc(100% / 6); padding: 10px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .oil-table .column-full-total .column:nth-child(1) { text-align: center;}

  .page-1-1-con .addi-table { width: 50%; margin: 0 0 40px 0;}
  .page-1-1-con .addi-table .caption-full { width: 100%; font-size: 0.8rem; font-weight: 600; line-height: 1.1em; border-bottom: 2px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .addi-table .caption-full .header { width: 20%; padding: 10px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .addi-table .caption-full .caption { width: calc(80% / 9); padding: 10px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .addi-table .caption-full .caption:last-child { border-right: 0;}
  .page-1-1-con .addi-table .column-full { width: 100%; font-size: 0.8rem; line-height: 1.1em; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .addi-table .column-full .header { width: 20%; padding: 10px; text-align: right; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-1-1-con .addi-table .column-full .column { width: calc(80% / 9); padding: 10px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .addi-table .column-full .column:nth-child(1) { text-align: center;}
  .page-1-1-con .addi-table .column-full-total { width: 100%; font-size: 0.8rem; line-height: 1.1em; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .addi-table .column-full-total .header { width: 20%; padding: 10px; text-align: center; box-sizing: border-box;}
  .page-1-1-con .addi-table .column-full-total .column { width: calc(80% / 9); padding: 10px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .addi-table .column-full-total .column:nth-child(1) { text-align: center;}

  .page-1-1-con .grade-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-1-con .grade-table .caption-full { width: 100%; font-size: 0.8rem; font-weight: 600; line-height: 1.1em; border-bottom: 2px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .grade-table .caption-full .caption-1 { width: 6%; padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .grade-table .caption-full .caption-2 { width: calc(94% / 25); padding: 10px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .grade-table .caption-full .caption-2:last-child { border-right: 0;}
  .page-1-1-con .grade-table .column-full { width: 100%; font-size: 0.8rem; line-height: 1.1em; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .grade-table .column-full .column-1 { width: 6%; padding: 10px 5px; text-align: left; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-1-1-con .grade-table .column-full .column-2 { width: calc(94% / 25); padding: 10px 5px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .grade-table .column-full-total { width: 100%; font-size: 0.8rem; line-height: 1.1em; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .grade-table .column-full-total .column-1 { width: 6%; padding: 10px 5px; text-align: center; box-sizing: border-box;}
  .page-1-1-con .grade-table .column-full-total .column-2 { width: calc(94% / 25); padding: 10px 5px; text-align: right; box-sizing: border-box;}

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

  .page-2-1-con { clear: both; width: 100%;}

  .page-2-1-con .price-table { clear: both; width: 400px; margin: 0 auto 40px auto; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-2-1-con .price-table .caption { width: 60%; padding: 10px; font-size: 1.1rem; font-weight: 500; line-height: 1.2em; border-right: 1px #ccc solid; border-bottom: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .price-table .caption:nth-child(1) { border-top: 1px #ccc solid;}
  .page-2-1-con .price-table .column { width: 40%; padding: 10px; font-size: 1.1rem; text-align: right; line-height: 1.2em; border-bottom: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .price-table .column:nth-child(2) { border-top: 1px #ccc solid;}

  .page-2-1-con .text-link { width: 400px; margin: 0 auto; font-size: 1rem; line-height: 1.2em; text-align: center;}
  .page-2-1-con .text-link a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}


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

  .page-3-1-con { clear: both; width: 100%;}

  .page-3-1-con .oil-stock-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-3-1-con .oil-stock-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 .oil-stock-table .caption-full .caption-1 { width: 5%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .caption-full .caption-2 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .caption-full .caption-3 { width: 15%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .caption-full .caption-4 { width: 40%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .oil-stock-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;}
  .page-3-1-con .oil-stock-table .column-full .column-1 { width: 5%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .column-full .column-2 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .column-full .column-3 { width: 15%; padding: 10px; text-align: right; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .column-full .column-4 { width: 40%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .column-full .column-4 .chart { padding: 0 5px 0 0; color: #fff; text-align: right; box-sizing: border-box;}

  .page-3-1-con .oil-purchase-table { clear: both; width: 40%; margin: 0 0 40px 0;}
  .page-3-1-con .oil-purchase-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 .oil-purchase-table .caption-full .caption-1 { width: 30%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-purchase-table .caption-full .caption-2 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-purchase-table .caption-full .caption-1:last-child { border-right: 0;}
  .page-3-1-con .oil-purchase-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;}
  .page-3-1-con .oil-purchase-table .column-full .column-1 { width: 30%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .oil-purchase-table .column-full .column-2 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .oil-purchase-table .column-full .column-1:last-child { text-align: right;}


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

  .page-3-2-con { clear: both; width: 100%;}

  .page-3-2-con .oil-statistics-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-3-2-con .oil-statistics-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-2-con .oil-statistics-table .caption-full .caption { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-2-con .oil-statistics-table .caption-full .caption:last-child { border-right: 0;}
  .page-3-2-con .oil-statistics-table .column-full { width: 100%; font-size: 0.9rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-2-con .oil-statistics-table .column-full .column { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-3-2-con .oil-statistics-table .column-full .column:nth-child(1) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-full .column:nth-child(2) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-full .column:nth-child(3) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-total-full { width: 100%; font-size: 0.9rem; text-align: right; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-2-con .oil-statistics-table .column-total-full .column { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-3-2-con .oil-statistics-table .column-total-full .column:nth-child(1) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-total-full .column:nth-child(2) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-total-full .column:nth-child(3) { text-align: center;}

  .page-3-2-con .oil-sail-table { clear: both; width: 40%; margin: 0 0 40px 0;}
  .page-3-2-con .oil-sail-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-2-con .oil-sail-table .caption-full .caption { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-2-con .oil-sail-table .caption-full .caption:last-child { border-right: 0;}
  .page-3-2-con .oil-sail-table .column-full { width: 100%; font-size: 0.9rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-2-con .oil-sail-table .column-full .column { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-3-2-con .oil-sail-table .column-full .column:nth-child(1) { text-align: center;}
  .page-3-2-con .oil-sail-table .column-total-full { width: 100%; font-size: 0.9rem; text-align: right; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-2-con .oil-sail-table .column-total-full .column { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-3-2-con .oil-sail-table .column-total-full .column:nth-child(1) { text-align: center;}
  

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

  .page-4-1-con { clear: both; width: 100%;}

  .page-4-1-con .report-date-list { clear: both; width: 400px; margin: 0 auto 40px auto;}
  .page-4-1-con .report-date-list button.goback { clear: both; width: 100%; padding: 10px 0; margin: 0 0 20px 0; color: #fff; font-size: 1.1rem; line-height: 1.2em; text-align: center; border: 0; border-radius: 12px; background-color: #308bb8; cursor: pointer;}
  .page-4-1-con .report-date-list button.date { clear: both; width: 100%; padding: 10px 0; margin: 0 auto 20px auto; color: #308bb8; font-size: 1.1rem; line-height: 1.2em; text-align: center; border: 1px #308bb8 solid; border-radius: 12px; background-color: #eee; box-sizing: border-box; cursor: pointer;}
  .page-4-1-con .report-date-list button:hover { -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}


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

  .page-4-2-stitle { clear: both; width: 100%; padding: 0 0 20px 0; font-size: 1rem; font-weight: 500; line-height: 1.2em;}


  /************ section #page-4-5 ************/

  .page-4-5-con { clear: both; width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap;}

  .page-4-5-con .billing-capacity-table { width: calc(40% - 20px); margin: 0 10px 40px 10px;}
  .page-4-5-con .billing-capacity-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-5-con .billing-capacity-table .caption-full .caption { width: calc(100% / 6); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-5-con .billing-capacity-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-5-con .billing-capacity-table .column-full { width: 100%; font-size: 0.9rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-5-con .billing-capacity-table .column-full .header { width: calc(100% / 6); padding: 10px; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-4-5-con .billing-capacity-table .column-full .column { width: calc(100% / 6); padding: 10px; box-sizing: border-box;}
  .page-4-5-con .billing-capacity-table .column-full .column:nth-child(1) { text-align: center;}
  .page-4-5-con .billing-capacity-table .column-total-full { width: 100%; font-size: 0.9rem; text-align: right; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-5-con .billing-capacity-table .column-total-full .column { width: calc(100% / 6); padding: 10px; box-sizing: border-box;}
  .page-4-5-con .billing-capacity-table .column-total-full .column:nth-child(1) { text-align: center;}

  .page-4-5-con .billing-price-table { width: calc(60% - 20px); margin: 0 10px 40px 10px;}
  .page-4-5-con .billing-price-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-5-con .billing-price-table .caption-full .caption { width: calc(100% / 9); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-5-con .billing-price-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-5-con .billing-price-table .column-full { width: 100%; font-size: 0.9rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-5-con .billing-price-table .column-full .header { width: calc(100% / 9); padding: 10px; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-4-5-con .billing-price-table .column-full .column { width: calc(100% / 9); padding: 10px; box-sizing: border-box;}
  .page-4-5-con .billing-price-table .column-full .column:nth-child(1) { text-align: center;}
  .page-4-5-con .billing-price-table .column-total-full { width: 100%; font-size: 0.9rem; text-align: right; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-5-con .billing-price-table .column-total-full .column { width: calc(100% / 9); padding: 10px; box-sizing: border-box;}
  .page-4-5-con .billing-price-table .column-total-full .column:nth-child(1) { text-align: center;}

  /************ section #page-4-6 ************/

  .page-4-6-con { clear: both; width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap;}

  .page-4-6-con .billing-capacity-table { width: calc(40% - 20px); margin: 0 10px 40px 10px;}
  .page-4-6-con .billing-capacity-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-6-con .billing-capacity-table .caption-full .caption { width: calc(100% / 3); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-6-con .billing-capacity-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-6-con .billing-capacity-table .column-full { width: 100%; font-size: 0.9rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-6-con .billing-capacity-table .column-full .header { width: calc(100% / 3); padding: 10px; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-4-6-con .billing-capacity-table .column-full .column { width: calc(100% / 3); padding: 10px; box-sizing: border-box;}
  .page-4-6-con .billing-capacity-table .column-full .column:nth-child(1) { text-align: center;}
  .page-4-6-con .billing-capacity-table .column-total-full { width: 100%; font-size: 0.9rem; text-align: right; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-6-con .billing-capacity-table .column-total-full .column { width: calc(100% / 3); padding: 10px; box-sizing: border-box;}
  .page-4-6-con .billing-capacity-table .column-total-full .column:nth-child(1) { text-align: center;}

  .page-4-6-con .billing-price-table { width: calc(60% - 20px); margin: 0 10px 40px 10px;}
  .page-4-6-con .billing-price-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-6-con .billing-price-table .caption-full .caption { width: calc(100% / 9); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-6-con .billing-price-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-6-con .billing-price-table .column-full { width: 100%; font-size: 0.9rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-6-con .billing-price-table .column-full .header { width: calc(100% / 9); padding: 10px; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-4-6-con .billing-price-table .column-full .column { width: calc(100% / 9); padding: 10px; box-sizing: border-box;}
  .page-4-6-con .billing-price-table .column-full .column:nth-child(1) { text-align: center;}
  .page-4-6-con .billing-price-table .column-total-full { width: 100%; font-size: 0.9rem; text-align: right; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-6-con .billing-price-table .column-total-full .column { width: calc(100% / 9); padding: 10px; box-sizing: border-box;}
  .page-4-6-con .billing-price-table .column-total-full .column:nth-child(1) { text-align: center;}


  /************ section #page-4-7 ************/

  .page-4-7-con { clear: both; width: 100%;}

  .page-4-7-con .purchase-sales-table { width: 100%; margin: 0 10px 40px 10px;}
  .page-4-7-con .purchase-sales-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-7-con .purchase-sales-table .caption-full .caption-0 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-7-con .purchase-sales-table .caption-full .caption { width: calc(80% / 9); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-7-con .purchase-sales-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-7-con .purchase-sales-table .column-full { width: 100%; font-size: 0.9rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-7-con .purchase-sales-table .column-full .column-0 { width: 20%; padding: 10px; box-sizing: border-box; text-align: center; background-color: #eee;}
  .page-4-7-con .purchase-sales-table .column-full .column { width: calc(80% / 9); padding: 10px; box-sizing: border-box;}
  .page-4-7-con .purchase-sales-table .column-total-full { width: 100%; font-size: 0.9rem; text-align: right; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-7-con .purchase-sales-table .column-total-full .column-0 { width: 20%; padding: 10px; box-sizing: border-box; text-align: center;}
  .page-4-7-con .purchase-sales-table .column-total-full .column { width: calc(80% / 9); padding: 10px; box-sizing: border-box;}

  
  /************ 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: #fff; 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: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column { width: calc(100% - 130px); 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 ************/

  .page-update-time { clear: both; width: 100%; margin: 0 0 40px 0; color: #666; font-size: 0.8rem; line-height: 1.2em;}

  .page-1-1-con { clear: both; width: 100%;}

  .page-1-1-con .shift-table { width: 70%; margin: 0 0 40px 0;}
  .page-1-1-con .shift-table .caption-full { width: 100%; font-size: 0.8rem; font-weight: 600; line-height: 1.1em; border-bottom: 2px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .shift-table .caption-full .caption { width: calc(100% / 6); padding: 10px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .shift-table .caption-full .caption:last-child { border-right: 0;}
  .page-1-1-con .shift-table .column-full { width: 100%; font-size: 0.8rem; line-height: 1.1em; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .shift-table .column-full .header { width: calc(100% / 6); padding: 10px; text-align: right; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-1-1-con .shift-table .column-full .column { width: calc(100% / 6); padding: 10px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .shift-table .column-full .column:nth-child(1) { text-align: center;}
  .page-1-1-con .shift-table .column-full-total { width: 100%; font-size: 0.8rem; line-height: 1.1em; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .shift-table .column-full-total .column { width: calc(100% / 6); padding: 10px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .shift-table .column-full-total .column:nth-child(1) { text-align: center;}

  .page-1-1-con .oil-table { width: calc(100% / 2 - 10px); margin: 0 5px 40px 5px; float: left;}
  .page-1-1-con .oil-table:first-child { clear: both;}
  .page-1-1-con .oil-table .caption-full { width: 100%; font-size: 0.8rem; font-weight: 600; line-height: 1.1em; border-bottom: 2px #ccc solid; box-sizing: border-box; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .oil-table .caption-full .caption { width: calc(100% / 6); padding: 10px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .oil-table .caption-full .caption:last-child { border-right: 0;}
  .page-1-1-con .oil-table .column-full { width: 100%; font-size: 0.8rem; line-height: 1.1em; border-bottom: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .oil-table .column-full .header { width: calc(100% / 6); padding: 10px; text-align: right; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-1-1-con .oil-table .column-full .column { width: calc(100% / 6); padding: 10px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .oil-table .column-full .column:nth-child(1) { text-align: center;}
  .page-1-1-con .oil-table .column-full-total { width: 100%; font-size: 0.8rem; line-height: 1.1em; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .oil-table .column-full-total .column { width: calc(100% / 6); padding: 10px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .oil-table .column-full-total .column:nth-child(1) { text-align: center;}

  .page-1-1-con .addi-table { width: 70%; margin: 0 0 40px 0;}
  .page-1-1-con .addi-table .caption-full { width: 100%; font-size: 0.8rem; font-weight: 600; line-height: 1.1em; border-bottom: 2px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .addi-table .caption-full .header { width: 20%; padding: 10px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .addi-table .caption-full .caption { width: calc(80% / 9); padding: 10px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .addi-table .caption-full .caption:last-child { border-right: 0;}
  .page-1-1-con .addi-table .column-full { width: 100%; font-size: 0.8rem; line-height: 1.1em; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .addi-table .column-full .header { width: 20%; padding: 10px; text-align: right; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-1-1-con .addi-table .column-full .column { width: calc(80% / 9); padding: 10px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .addi-table .column-full .column:nth-child(1) { text-align: center;}
  .page-1-1-con .addi-table .column-full-total { width: 100%; font-size: 0.8rem; line-height: 1.1em; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .addi-table .column-full-total .header { width: 20%; padding: 10px; text-align: center; box-sizing: border-box;}
  .page-1-1-con .addi-table .column-full-total .column { width: calc(80% / 9); padding: 10px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .addi-table .column-full-total .column:nth-child(1) { text-align: center;}
  
  .page-1-1-con .grade-table { clear: both; width: 100%; margin: 0 0 40px 0; overflow-x: scroll;}
  .page-1-1-con .grade-table .caption-full { width: 160%; font-size: 0.8rem; font-weight: 600; line-height: 1.1em; border-bottom: 2px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .grade-table .caption-full .caption-1 { width: 6%; padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .grade-table .caption-full .caption-2 { width: calc(94% / 25); padding: 10px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .grade-table .caption-full .caption-2:last-child { border-right: 0;}
  .page-1-1-con .grade-table .column-full { width: 160%; font-size: 0.8rem; line-height: 1.1em; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .grade-table .column-full .column-1 { width: 6%; padding: 10px 5px; text-align: left; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-1-1-con .grade-table .column-full .column-2 { width: calc(94% / 25); padding: 10px 5px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .grade-table .column-full-total { width: 160%; font-size: 0.8rem; line-height: 1.1em; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .grade-table .column-full-total .column-1 { width: 6%; padding: 10px 5px; text-align: center; box-sizing: border-box;}
  .page-1-1-con .grade-table .column-full-total .column-2 { width: calc(94% / 25); padding: 10px 5px; text-align: right; box-sizing: border-box;}


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

  .page-2-1-con { clear: both; width: 100%;}

  .page-2-1-con .price-table { clear: both; width: 400px; margin: 0 auto 40px auto; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-2-1-con .price-table .caption { width: 60%; padding: 10px; font-size: 1.1rem; font-weight: 500; line-height: 1.2em; border-right: 1px #ccc solid; border-bottom: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .price-table .caption:nth-child(1) { border-top: 1px #ccc solid;}
  .page-2-1-con .price-table .column { width: 40%; padding: 10px; font-size: 1.1rem; text-align: right; line-height: 1.2em; border-bottom: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .price-table .column:nth-child(2) { border-top: 1px #ccc solid;}

  .page-2-1-con .text-link { width: 400px; margin: 0 auto; font-size: 1rem; line-height: 1.2em; text-align: center;}
  .page-2-1-con .text-link a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}


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

  .page-3-1-con { clear: both; width: 100%;}

  .page-3-1-con .oil-stock-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-3-1-con .oil-stock-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 .oil-stock-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .caption-full .caption-2 { width: 12%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .caption-full .caption-3 { width: 12%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .caption-full .caption-4 { width: 42%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .oil-stock-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;}
  .page-3-1-con .oil-stock-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .column-full .column-2 { width: 12%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .column-full .column-3 { width: 12%; padding: 10px; text-align: right; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .column-full .column-4 { width: 42%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .column-full .column-4 .chart { padding: 0 5px 0 0; color: #fff; text-align: right; box-sizing: border-box;}

  .page-3-1-con .oil-purchase-table { clear: both; width: 50%; margin: 0 0 40px 0;}
  .page-3-1-con .oil-purchase-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 .oil-purchase-table .caption-full .caption-1 { width: 30%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-purchase-table .caption-full .caption-2 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-purchase-table .caption-full .caption-1:last-child { border-right: 0;}
  .page-3-1-con .oil-purchase-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;}
  .page-3-1-con .oil-purchase-table .column-full .column-1 { width: 30%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .oil-purchase-table .column-full .column-2 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .oil-purchase-table .column-full .column-1:last-child { text-align: right;}


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

  .page-3-2-con { clear: both; width: 100%;}

  .page-3-2-con .oil-statistics-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-3-2-con .oil-statistics-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-2-con .oil-statistics-table .caption-full .caption { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-2-con .oil-statistics-table .caption-full .caption:last-child { border-right: 0;}
  .page-3-2-con .oil-statistics-table .column-full { width: 100%; font-size: 0.9rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-2-con .oil-statistics-table .column-full .column { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-3-2-con .oil-statistics-table .column-full .column:nth-child(1) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-full .column:nth-child(2) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-full .column:nth-child(3) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-total-full { width: 100%; font-size: 0.9rem; text-align: right; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-2-con .oil-statistics-table .column-total-full .column { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-3-2-con .oil-statistics-table .column-total-full .column:nth-child(1) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-total-full .column:nth-child(2) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-total-full .column:nth-child(3) { text-align: center;}

  .page-3-2-con .oil-sail-table { clear: both; width: 40%; margin: 0 0 40px 0;}
  .page-3-2-con .oil-sail-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-2-con .oil-sail-table .caption-full .caption { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-2-con .oil-sail-table .caption-full .caption:last-child { border-right: 0;}
  .page-3-2-con .oil-sail-table .column-full { width: 100%; font-size: 0.9rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-2-con .oil-sail-table .column-full .column { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-3-2-con .oil-sail-table .column-full .column:nth-child(1) { text-align: center;}
  .page-3-2-con .oil-sail-table .column-total-full { width: 100%; font-size: 0.9rem; text-align: right; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-2-con .oil-sail-table .column-total-full .column { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-3-2-con .oil-sail-table .column-total-full .column:nth-child(1) { text-align: center;}


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

  .page-4-1-con { clear: both; width: 100%;}

  .page-4-1-con .report-date-list { clear: both; width: 400px; margin: 0 auto 40px auto;}
  .page-4-1-con .report-date-list button.goback { clear: both; width: 100%; padding: 10px 0; margin: 0 0 20px 0; color: #fff; font-size: 1.1rem; line-height: 1.2em; text-align: center; border: 0; border-radius: 12px; background-color: #308bb8; cursor: pointer;}
  .page-4-1-con .report-date-list button.date { clear: both; width: 100%; padding: 10px 0; margin: 0 auto 20px auto; color: #308bb8; font-size: 1.1rem; line-height: 1.2em; text-align: center; border: 1px #308bb8 solid; border-radius: 12px; background-color: #eee; box-sizing: border-box; cursor: pointer;}
  .page-4-1-con .report-date-list button:hover { -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}


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

  .page-4-2-stitle { clear: both; width: 100%; padding: 0 0 20px 0; font-size: 1rem; font-weight: 500; line-height: 1.2em;}


  /************ section #page-4-5 ************/

  .page-4-5-con { clear: both; width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap;}

  .page-4-5-con .billing-capacity-table { width: calc(40% - 20px); margin: 0 10px 40px 10px;}
  .page-4-5-con .billing-capacity-table .caption-full { width: 100%; font-size: 0.8rem; 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-5-con .billing-capacity-table .caption-full .caption { width: calc(100% / 6); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-5-con .billing-capacity-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-5-con .billing-capacity-table .column-full { width: 100%; font-size: 0.8rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-5-con .billing-capacity-table .column-full .header { width: calc(100% / 6); padding: 10px; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-4-5-con .billing-capacity-table .column-full .column { width: calc(100% / 6); padding: 10px; box-sizing: border-box;}
  .page-4-5-con .billing-capacity-table .column-full .column:nth-child(1) { text-align: center;}
  .page-4-5-con .billing-capacity-table .column-total-full { width: 100%; font-size: 0.8rem; text-align: right; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-5-con .billing-capacity-table .column-total-full .column { width: calc(100% / 6); padding: 10px; box-sizing: border-box;}
  .page-4-5-con .billing-capacity-table .column-total-full .column:nth-child(1) { text-align: center;}

  .page-4-5-con .billing-price-table { width: calc(60% - 20px); margin: 0 10px 40px 10px;}
  .page-4-5-con .billing-price-table .caption-full { width: 100%; font-size: 0.8rem; 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-5-con .billing-price-table .caption-full .caption { width: calc(100% / 9); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-5-con .billing-price-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-5-con .billing-price-table .column-full { width: 100%; font-size: 0.8rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-5-con .billing-price-table .column-full .header { width: calc(100% / 9); padding: 10px; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-4-5-con .billing-price-table .column-full .column { width: calc(100% / 9); padding: 10px; box-sizing: border-box;}
  .page-4-5-con .billing-price-table .column-full .column:nth-child(1) { text-align: center;}
  .page-4-5-con .billing-price-table .column-total-full { width: 100%; font-size: 0.8rem; text-align: right; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-5-con .billing-price-table .column-total-full .column { width: calc(100% / 9); padding: 10px; box-sizing: border-box;}
  .page-4-5-con .billing-price-table .column-total-full .column:nth-child(1) { text-align: center;}

  /************ section #page-4-6 ************/

  .page-4-6-con { clear: both; width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap;}

  .page-4-6-con .billing-capacity-table { width: calc(40% - 20px); margin: 0 10px 40px 10px;}
  .page-4-6-con .billing-capacity-table .caption-full { width: 100%; font-size: 0.8rem; 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-6-con .billing-capacity-table .caption-full .caption { width: calc(100% / 3); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-6-con .billing-capacity-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-6-con .billing-capacity-table .column-full { width: 100%; font-size: 0.8rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-6-con .billing-capacity-table .column-full .header { width: calc(100% / 3); padding: 10px; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-4-6-con .billing-capacity-table .column-full .column { width: calc(100% / 3); padding: 10px; box-sizing: border-box;}
  .page-4-6-con .billing-capacity-table .column-full .column:nth-child(1) { text-align: center;}
  .page-4-6-con .billing-capacity-table .column-total-full { width: 100%; font-size: 0.8rem; text-align: right; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-6-con .billing-capacity-table .column-total-full .column { width: calc(100% / 3); padding: 10px; box-sizing: border-box;}
  .page-4-6-con .billing-capacity-table .column-total-full .column:nth-child(1) { text-align: center;}

  .page-4-6-con .billing-price-table { width: calc(60% - 20px); margin: 0 10px 40px 10px;}
  .page-4-6-con .billing-price-table .caption-full { width: 100%; font-size: 0.8rem; 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-6-con .billing-price-table .caption-full .caption { width: calc(100% / 9); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-6-con .billing-price-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-6-con .billing-price-table .column-full { width: 100%; font-size: 0.8rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-6-con .billing-price-table .column-full .header { width: calc(100% / 9); padding: 10px; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-4-6-con .billing-price-table .column-full .column { width: calc(100% / 9); padding: 10px; box-sizing: border-box;}
  .page-4-6-con .billing-price-table .column-full .column:nth-child(1) { text-align: center;}
  .page-4-6-con .billing-price-table .column-total-full { width: 100%; font-size: 0.8rem; text-align: right; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-6-con .billing-price-table .column-total-full .column { width: calc(100% / 9); padding: 10px; box-sizing: border-box;}
  .page-4-6-con .billing-price-table .column-total-full .column:nth-child(1) { text-align: center;}


  /************ section #page-4-7 ************/

  .page-4-7-con { clear: both; width: 100%;}

  .page-4-7-con .purchase-sales-table { width: 100%; margin: 0 10px 40px 10px;}
  .page-4-7-con .purchase-sales-table .caption-full { width: 100%; font-size: 0.8rem; 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-7-con .purchase-sales-table .caption-full .caption-0 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-7-con .purchase-sales-table .caption-full .caption { width: calc(80% / 9); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-7-con .purchase-sales-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-7-con .purchase-sales-table .column-full { width: 100%; font-size: 0.8rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-7-con .purchase-sales-table .column-full .column-0 { width: 20%; padding: 10px; box-sizing: border-box; text-align: center; background-color: #eee;}
  .page-4-7-con .purchase-sales-table .column-full .column { width: calc(80% / 9); padding: 10px; box-sizing: border-box;}
  .page-4-7-con .purchase-sales-table .column-total-full { width: 100%; font-size: 0.8rem; text-align: right; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-7-con .purchase-sales-table .column-total-full .column-0 { width: 20%; padding: 10px; box-sizing: border-box; text-align: center;}
  .page-4-7-con .purchase-sales-table .column-total-full .column { width: calc(80% / 9); padding: 10px; box-sizing: border-box;}


  /************ 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: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column { width: calc(100% - 130px); 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 ************/

  .page-update-time { clear: both; width: 100%; margin: 0 0 40px 0; color: #666; font-size: 0.8rem; line-height: 1.2em;}

  .page-1-1-con { clear: both; width: 100%;}

  .page-1-1-con .shift-table { width: 90%; margin: 0 0 40px 0;}
  .page-1-1-con .shift-table .caption-full { width: 100%; font-size: 0.8rem; font-weight: 600; line-height: 1.1em; border-bottom: 2px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .shift-table .caption-full .caption { width: calc(100% / 6); padding: 10px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .shift-table .caption-full .caption:last-child { border-right: 0;}
  .page-1-1-con .shift-table .column-full { width: 100%; font-size: 0.8rem; line-height: 1.1em; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .shift-table .column-full .header { width: calc(100% / 6); padding: 10px; text-align: right; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-1-1-con .shift-table .column-full .column { width: calc(100% / 6); padding: 10px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .shift-table .column-full .column:nth-child(1) { text-align: center;}
  .page-1-1-con .shift-table .column-full-total { width: 100%; font-size: 0.8rem; line-height: 1.1em; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .shift-table .column-full-total .column { width: calc(100% / 6); padding: 10px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .shift-table .column-full-total .column:nth-child(1) { text-align: center;}

  .page-1-1-con .oil-table { width: 80%; margin: 0 0 40px 0;}
  .page-1-1-con .oil-table:first-child { clear: both;}
  .page-1-1-con .oil-table .caption-full { width: 100%; font-size: 0.8rem; font-weight: 600; line-height: 1.1em; border-bottom: 2px #ccc solid; box-sizing: border-box; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .oil-table .caption-full .caption { width: calc(100% / 6); padding: 10px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .oil-table .caption-full .caption:last-child { border-right: 0;}
  .page-1-1-con .oil-table .column-full { width: 100%; font-size: 0.8rem; line-height: 1.1em; border-bottom: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .oil-table .column-full .header { width: calc(100% / 6); padding: 10px; text-align: right; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-1-1-con .oil-table .column-full .column { width: calc(100% / 6); padding: 10px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .oil-table .column-full .column:nth-child(1) { text-align: center;}
  .page-1-1-con .oil-table .column-full-total { width: 100%; font-size: 0.8rem; line-height: 1.1em; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .oil-table .column-full-total .column { width: calc(100% / 6); padding: 10px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .oil-table .column-full-total .column:nth-child(1) { text-align: center;}

  .page-1-1-con .addi-table { width: 90%; margin: 0 0 40px 0;}
  .page-1-1-con .addi-table .caption-full { width: 100%; font-size: 0.8rem; font-weight: 600; line-height: 1.1em; border-bottom: 2px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .addi-table .caption-full .header { width: 20%; padding: 10px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .addi-table .caption-full .caption { width: calc(80% / 9); padding: 10px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .addi-table .caption-full .caption:last-child { border-right: 0;}
  .page-1-1-con .addi-table .column-full { width: 100%; font-size: 0.8rem; line-height: 1.1em; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .addi-table .column-full .header { width: 20%; padding: 10px; text-align: right; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-1-1-con .addi-table .column-full .column { width: calc(80% / 9); padding: 10px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .addi-table .column-full .column:nth-child(1) { text-align: center;}
  .page-1-1-con .addi-table .column-full-total { width: 100%; font-size: 0.8rem; line-height: 1.1em; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .addi-table .column-full-total .header { width: 20%; padding: 10px; text-align: center; box-sizing: border-box;}
  .page-1-1-con .addi-table .column-full-total .column { width: calc(80% / 9); padding: 10px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .addi-table .column-full-total .column:nth-child(1) { text-align: center;}
   
  .page-1-1-con .grade-table { clear: both; width: 100%; margin: 0 0 40px 0; overflow-x: scroll;}
  .page-1-1-con .grade-table .caption-full { width: 200%; font-size: 0.8rem; font-weight: 600; line-height: 1.1em; border-bottom: 2px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .grade-table .caption-full .caption-1 { width: 6%; padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .grade-table .caption-full .caption-2 { width: calc(94% / 25); padding: 10px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .grade-table .caption-full .caption-2:last-child { border-right: 0;}
  .page-1-1-con .grade-table .column-full { width: 200%; font-size: 0.8rem; line-height: 1.1em; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .grade-table .column-full .column-1 { width: 6%; padding: 10px 5px; text-align: left; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-1-1-con .grade-table .column-full .column-2 { width: calc(94% / 25); padding: 10px 5px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .grade-table .column-full-total { width: 200%; font-size: 0.8rem; line-height: 1.1em; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .grade-table .column-full-total .column-1 { width: 6%; padding: 10px 5px; text-align: center; box-sizing: border-box;}
  .page-1-1-con .grade-table .column-full-total .column-2 { width: calc(94% / 25); padding: 10px 5px; text-align: right; box-sizing: border-box;}


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

  .page-2-1-con { clear: both; width: 100%;}

  .page-2-1-con .price-table { clear: both; width: 400px; margin: 0 auto 40px auto; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-2-1-con .price-table .caption { width: 60%; padding: 10px; font-size: 1.1rem; font-weight: 500; line-height: 1.2em; border-right: 1px #ccc solid; border-bottom: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .price-table .caption:nth-child(1) { border-top: 1px #ccc solid;}
  .page-2-1-con .price-table .column { width: 40%; padding: 10px; font-size: 1.1rem; text-align: right; line-height: 1.2em; border-bottom: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .price-table .column:nth-child(2) { border-top: 1px #ccc solid;}

  .page-2-1-con .text-link { width: 400px; margin: 0 auto; font-size: 1rem; line-height: 1.2em; text-align: center;}
  .page-2-1-con .text-link a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}


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

  .page-3-1-con { clear: both; width: 100%;}

  .page-3-1-con .oil-stock-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-3-1-con .oil-stock-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 .oil-stock-table .caption-full .caption-1 { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .caption-full .caption-2 { width: 12%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .caption-full .caption-3 { width: 12%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .caption-full .caption-4 { width: 42%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .oil-stock-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;}
  .page-3-1-con .oil-stock-table .column-full .column-1 { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .column-full .column-2 { width: 12%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .column-full .column-3 { width: 12%; padding: 10px; text-align: right; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .column-full .column-4 { width: 42%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .column-full .column-4 .chart { padding: 0 5px 0 0; color: #fff; text-align: right; box-sizing: border-box;}

  .page-3-1-con .oil-purchase-table { clear: both; width: 60%; margin: 0 0 40px 0;}
  .page-3-1-con .oil-purchase-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 .oil-purchase-table .caption-full .caption-1 { width: 30%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-purchase-table .caption-full .caption-2 { width: 20%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-purchase-table .caption-full .caption-1:last-child { border-right: 0;}
  .page-3-1-con .oil-purchase-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;}
  .page-3-1-con .oil-purchase-table .column-full .column-1 { width: 30%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .oil-purchase-table .column-full .column-2 { width: 20%; padding: 10px; box-sizing: border-box;}
  .page-3-1-con .oil-purchase-table .column-full .column-1:last-child { text-align: right;}


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

  .page-3-2-con { clear: both; width: 100%;}

  .page-3-2-con .oil-statistics-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-3-2-con .oil-statistics-table .caption-full { width: 100%; font-size: 0.8rem; 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-2-con .oil-statistics-table .caption-full .caption { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-2-con .oil-statistics-table .caption-full .caption:last-child { border-right: 0;}
  .page-3-2-con .oil-statistics-table .column-full { width: 100%; font-size: 0.8rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-2-con .oil-statistics-table .column-full .column { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-3-2-con .oil-statistics-table .column-full .column:nth-child(1) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-full .column:nth-child(2) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-full .column:nth-child(3) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-total-full { width: 100%; font-size: 0.8rem; text-align: right; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-2-con .oil-statistics-table .column-total-full .column { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-3-2-con .oil-statistics-table .column-total-full .column:nth-child(1) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-total-full .column:nth-child(2) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-total-full .column:nth-child(3) { text-align: center;}

  .page-3-2-con .oil-sail-table { clear: both; width: 50%; margin: 0 0 40px 0;}
  .page-3-2-con .oil-sail-table .caption-full { width: 100%; font-size: 0.8rem; 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-2-con .oil-sail-table .caption-full .caption { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-2-con .oil-sail-table .caption-full .caption:last-child { border-right: 0;}
  .page-3-2-con .oil-sail-table .column-full { width: 100%; font-size: 0.8rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-2-con .oil-sail-table .column-full .column { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-3-2-con .oil-sail-table .column-full .column:nth-child(1) { text-align: center;}
  .page-3-2-con .oil-sail-table .column-total-full { width: 100%; font-size: 0.8rem; text-align: right; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-2-con .oil-sail-table .column-total-full .column { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-3-2-con .oil-sail-table .column-total-full .column:nth-child(1) { text-align: center;}


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

  .page-4-1-con { clear: both; width: 100%;}

  .page-4-1-con .report-date-list { clear: both; width: 400px; margin: 0 auto 40px auto;}
  .page-4-1-con .report-date-list button.goback { clear: both; width: 100%; padding: 10px 0; margin: 0 0 20px 0; color: #fff; font-size: 1.1rem; line-height: 1.2em; text-align: center; border: 0; border-radius: 12px; background-color: #308bb8; cursor: pointer;}
  .page-4-1-con .report-date-list button.date { clear: both; width: 100%; padding: 10px 0; margin: 0 auto 20px auto; color: #308bb8; font-size: 1.1rem; line-height: 1.2em; text-align: center; border: 1px #308bb8 solid; border-radius: 12px; background-color: #eee; box-sizing: border-box; cursor: pointer;}
  .page-4-1-con .report-date-list button:hover { -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}


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

  .page-4-2-stitle { clear: both; width: 100%; padding: 0 0 20px 0; font-size: 1rem; font-weight: 500; line-height: 1.2em;}


  /************ section #page-4-5 ************/

  .page-4-5-con { clear: both; width: 100%;}

  .page-4-5-con .billing-capacity-table { clear: both; width: 70%; margin: 0 0 40px 0;}
  .page-4-5-con .billing-capacity-table .caption-full { width: 100%; font-size: 0.8rem; 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-5-con .billing-capacity-table .caption-full .caption { width: calc(100% / 6); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-5-con .billing-capacity-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-5-con .billing-capacity-table .column-full { width: 100%; font-size: 0.8rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-5-con .billing-capacity-table .column-full .header { width: calc(100% / 6); padding: 10px; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-4-5-con .billing-capacity-table .column-full .column { width: calc(100% / 6); padding: 10px; box-sizing: border-box;}
  .page-4-5-con .billing-capacity-table .column-full .column:nth-child(1) { text-align: center;}
  .page-4-5-con .billing-capacity-table .column-total-full { width: 100%; font-size: 0.8rem; text-align: right; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-5-con .billing-capacity-table .column-total-full .column { width: calc(100% / 6); padding: 10px; box-sizing: border-box;}
  .page-4-5-con .billing-capacity-table .column-total-full .column:nth-child(1) { text-align: center;}

  .page-4-5-con .billing-price-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-4-5-con .billing-price-table .caption-full { width: 100%; font-size: 0.8rem; 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-5-con .billing-price-table .caption-full .caption { width: calc(100% / 9); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-5-con .billing-price-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-5-con .billing-price-table .column-full { width: 100%; font-size: 0.8rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-5-con .billing-price-table .column-full .header { width: calc(100% / 9); padding: 10px; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-4-5-con .billing-price-table .column-full .column { width: calc(100% / 9); padding: 10px; box-sizing: border-box;}
  .page-4-5-con .billing-price-table .column-full .column:nth-child(1) { text-align: center;}
  .page-4-5-con .billing-price-table .column-total-full { width: 100%; font-size: 0.8rem; text-align: right; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-5-con .billing-price-table .column-total-full .column { width: calc(100% / 9); padding: 10px; box-sizing: border-box;}
  .page-4-5-con .billing-price-table .column-total-full .column:nth-child(1) { text-align: center;}

  /************ section #page-4-6 ************/

  .page-4-6-con { clear: both; width: 100%;}

  .page-4-6-con .billing-capacity-table { clear: both; width: 70%; margin: 0 0 40px 0;}
  .page-4-6-con .billing-capacity-table .caption-full { width: 100%; font-size: 0.8rem; 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-6-con .billing-capacity-table .caption-full .caption { width: calc(100% / 3); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-6-con .billing-capacity-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-6-con .billing-capacity-table .column-full { width: 100%; font-size: 0.8rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-6-con .billing-capacity-table .column-full .header { width: calc(100% / 3); padding: 10px; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-4-6-con .billing-capacity-table .column-full .column { width: calc(100% / 3); padding: 10px; box-sizing: border-box;}
  .page-4-6-con .billing-capacity-table .column-full .column:nth-child(1) { text-align: center;}
  .page-4-6-con .billing-capacity-table .column-total-full { width: 100%; font-size: 0.8rem; text-align: right; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-6-con .billing-capacity-table .column-total-full .column { width: calc(100% / 3); padding: 10px; box-sizing: border-box;}
  .page-4-6-con .billing-capacity-table .column-total-full .column:nth-child(1) { text-align: center;}

  .page-4-6-con .billing-price-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-4-6-con .billing-price-table .caption-full { width: 100%; font-size: 0.8rem; 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-6-con .billing-price-table .caption-full .caption { width: calc(100% / 9); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-6-con .billing-price-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-6-con .billing-price-table .column-full { width: 100%; font-size: 0.8rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-6-con .billing-price-table .column-full .header { width: calc(100% / 9); padding: 10px; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-4-6-con .billing-price-table .column-full .column { width: calc(100% / 9); padding: 10px; box-sizing: border-box;}
  .page-4-6-con .billing-price-table .column-full .column:nth-child(1) { text-align: center;}
  .page-4-6-con .billing-price-table .column-total-full { width: 100%; font-size: 0.8rem; text-align: right; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-6-con .billing-price-table .column-total-full .column { width: calc(100% / 9); padding: 10px; box-sizing: border-box;}
  .page-4-6-con .billing-price-table .column-total-full .column:nth-child(1) { text-align: center;}


  /************ section #page-4-7 ************/

  .page-4-7-con { clear: both; width: 100%;}

  .page-4-7-con .purchase-sales-table { width: 100%; margin: 0 10px 40px 10px;}
  .page-4-7-con .purchase-sales-table .caption-full { width: 100%; font-size: 0.8rem; 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-7-con .purchase-sales-table .caption-full .caption-0 { width: 20%; padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-7-con .purchase-sales-table .caption-full .caption { width: calc(80% / 9); padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-7-con .purchase-sales-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-7-con .purchase-sales-table .column-full { width: 100%; font-size: 0.8rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-7-con .purchase-sales-table .column-full .column-0 { width: 20%; padding: 10px 5px; box-sizing: border-box; text-align: center; background-color: #eee;}
  .page-4-7-con .purchase-sales-table .column-full .column { width: calc(80% / 9); padding: 10px 5px; box-sizing: border-box;}
  .page-4-7-con .purchase-sales-table .column-total-full { width: 100%; font-size: 0.8rem; text-align: right; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-7-con .purchase-sales-table .column-total-full .column-0 { width: 20%; padding: 10px 5px; box-sizing: border-box; text-align: center;}
  .page-4-7-con .purchase-sales-table .column-total-full .column { width: calc(80% / 9); padding: 10px 5px; box-sizing: border-box;}


  /************ 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: 20px 20px 20px 20px; 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: 80px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.1rem;}
  .add-edit-table .column { width: calc(100% - 80px); margin: 0 0 10px 0; font-size: 1.1rem; 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 ************/

  .page-update-time { clear: both; width: 100%; margin: 0 0 40px 0; color: #666; font-size: 0.8rem; line-height: 1.2em;}

  .page-1-1-con { clear: both; width: 100%;}

  .page-1-1-con .shift-table { width: 100%; margin: 0 0 40px 0;}
  .page-1-1-con .shift-table .caption-full { width: 100%; font-size: 0.7rem; font-weight: 600; line-height: 1.1em; border-bottom: 2px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .shift-table .caption-full .caption { width: calc(100% / 6); padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .shift-table .caption-full .caption:last-child { border-right: 0;}
  .page-1-1-con .shift-table .column-full { width: 100%; font-size: 0.7rem; line-height: 1.1em; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .shift-table .column-full .header { width: calc(100% / 6); padding: 10px 5px; text-align: right; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-1-1-con .shift-table .column-full .column { width: calc(100% / 6); padding: 10px 5px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .shift-table .column-full .column:nth-child(1) { text-align: center;}
  .page-1-1-con .shift-table .column-full-total { width: 100%; font-size: 0.7rem; line-height: 1.1em; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .shift-table .column-full-total .column { width: calc(100% / 6); padding: 10px 5px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .shift-table .column-full-total .column:nth-child(1) { text-align: center;}

  .page-1-1-con .oil-table { width: 100%; margin: 0 0 40px 0;}
  .page-1-1-con .oil-table:first-child { clear: both;}
  .page-1-1-con .oil-table .caption-full { width: 100%; font-size: 0.7rem; font-weight: 600; line-height: 1.1em; border-bottom: 2px #ccc solid; box-sizing: border-box; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .oil-table .caption-full .caption { width: calc(100% / 6); padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .oil-table .caption-full .caption:last-child { border-right: 0;}
  .page-1-1-con .oil-table .column-full { width: 100%; font-size: 0.7rem; line-height: 1.1em; border-bottom: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .oil-table .column-full .header { width: calc(100% / 6); padding: 10px 5px; text-align: right; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-1-1-con .oil-table .column-full .column { width: calc(100% / 6); padding: 10px 5px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .oil-table .column-full .column:nth-child(1) { text-align: center;}
  .page-1-1-con .oil-table .column-full-total { width: 100%; font-size: 0.7rem; line-height: 1.1em; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .oil-table .column-full-total .column { width: calc(100% / 6); padding: 10px 5px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .oil-table .column-full-total .column:nth-child(1) { text-align: center;}

  .page-1-1-con .addi-table { width: 100%; margin: 0 0 40px 0;}
  .page-1-1-con .addi-table .caption-full { width: 100%; font-size: 0.7rem; font-weight: 600; line-height: 1.1em; border-bottom: 2px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .addi-table .caption-full .header { width: 20%; padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .addi-table .caption-full .caption { width: calc(80% / 9); padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .addi-table .caption-full .caption:last-child { border-right: 0;}
  .page-1-1-con .addi-table .column-full { width: 100%; font-size: 0.7rem; line-height: 1.1em; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .addi-table .column-full .header { width: 20%; padding: 10px 5px; text-align: right; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-1-1-con .addi-table .column-full .column { width: calc(80% / 9); padding: 10px 5px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .addi-table .column-full .column:nth-child(1) { text-align: center;}
  .page-1-1-con .addi-table .column-full-total { width: 100%; font-size: 0.7rem; line-height: 1.1em; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .addi-table .column-full-total .header { width: 20%; padding: 10px 5px; text-align: center; box-sizing: border-box;}
  .page-1-1-con .addi-table .column-full-total .column { width: calc(80% / 9); padding: 10px 5px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .addi-table .column-full-total .column:nth-child(1) { text-align: center;}

  .page-1-1-con .grade-table { clear: both; width: 100%; margin: 0 0 40px 0; overflow-x: scroll;}
  .page-1-1-con .grade-table .caption-full { width: 340%; font-size: 0.7rem; font-weight: 600; line-height: 1.1em; border-bottom: 2px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .grade-table .caption-full .caption-1 { width: 6%; padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .grade-table .caption-full .caption-2 { width: calc(94% / 25); padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .grade-table .caption-full .caption-2:last-child { border-right: 0;}
  .page-1-1-con .grade-table .column-full { width: 340%; font-size: 0.7rem; line-height: 1.1em; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .grade-table .column-full .column-1 { width: 6%; padding: 10px 5px; text-align: left; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-1-1-con .grade-table .column-full .column-2 { width: calc(94% / 25); padding: 10px 5px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .grade-table .column-full-total { width: 340%; font-size: 0.7rem; line-height: 1.1em; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .grade-table .column-full-total .column-1 { width: 6%; padding: 10px 5px; text-align: center; box-sizing: border-box;}
  .page-1-1-con .grade-table .column-full-total .column-2 { width: calc(94% / 25); padding: 10px 5px; text-align: right; box-sizing: border-box;}


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

  .page-2-1-con { clear: both; width: 100%;}

  .page-2-1-con .price-table { clear: both; width: 100%; margin: 0 auto 40px auto; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-2-1-con .price-table .caption { width: 60%; padding: 10px; font-size: 1rem; font-weight: 500; line-height: 1.2em; border-right: 1px #ccc solid; border-bottom: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .price-table .caption:nth-child(1) { border-top: 1px #ccc solid;}
  .page-2-1-con .price-table .column { width: 40%; padding: 10px; font-size: 1rem; text-align: right; line-height: 1.2em; border-bottom: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .price-table .column:nth-child(2) { border-top: 1px #ccc solid;}

  .page-2-1-con .text-link { width: 100%; margin: 0 auto; font-size: 0.9rem; line-height: 1.2em; text-align: center;}
  .page-2-1-con .text-link a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}


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

  .page-3-1-con { clear: both; width: 100%;}

  .page-3-1-con .oil-stock-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-3-1-con .oil-stock-table .caption-full { width: 100%; font-size: 0.7rem; 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 .oil-stock-table .caption-full .caption-1 { width: 18%; padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .caption-full .caption-2 { width: 18%; padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .caption-full .caption-3 { width: calc(64% / 3); padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .caption-full .caption-3:nth-child(5) { border-right: 0;}
  .page-3-1-con .oil-stock-table .caption-full .caption-4 { display: none;}
  .page-3-1-con .oil-stock-table .column-full { width: 100%; font-size: 0.7rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-3-1-con .oil-stock-table .column-full .column-1 { width: 18%; padding: 10px 5px; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .column-full .column-2 { width: 18%; padding: 10px 5px; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .column-full .column-3 { width: calc(64% / 3); padding: 10px 5px; text-align: right; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .column-full .column-4 { width: 100%; padding: 10px 5px; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .column-full .column-4 .chart { padding: 0 5px 0 0; color: #fff; text-align: right; box-sizing: border-box;}

  .page-3-1-con .oil-purchase-table { clear: both; width: 80%; margin: 0 0 40px 0;}
  .page-3-1-con .oil-purchase-table .caption-full { width: 100%; font-size: 0.7rem; 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 .oil-purchase-table .caption-full .caption-1 { width: 30%; padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-purchase-table .caption-full .caption-2 { width: 20%; padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-purchase-table .caption-full .caption-1:last-child { border-right: 0;}
  .page-3-1-con .oil-purchase-table .column-full { width: 100%; font-size: 0.7rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-1-con .oil-purchase-table .column-full .column-1 { width: 30%; padding: 10px 5px; box-sizing: border-box;}
  .page-3-1-con .oil-purchase-table .column-full .column-2 { width: 20%; padding: 10px 5px; box-sizing: border-box;}
  .page-3-1-con .oil-purchase-table .column-full .column-1:last-child { text-align: right;}


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

  .page-3-2-con { clear: both; width: 100%;}

  .page-3-2-con .oil-statistics-table { clear: both; width: 100%; margin: 0 0 40px 0; overflow-x: scroll;}
  .page-3-2-con .oil-statistics-table .caption-full { width: 200%; font-size: 0.7rem; 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-2-con .oil-statistics-table .caption-full .caption { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-2-con .oil-statistics-table .caption-full .caption:last-child { border-right: 0;}
  .page-3-2-con .oil-statistics-table .column-full { width: 200%; font-size: 0.7rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-2-con .oil-statistics-table .column-full .column { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-3-2-con .oil-statistics-table .column-full .column:nth-child(1) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-full .column:nth-child(2) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-full .column:nth-child(3) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-total-full { width: 200%; font-size: 0.7rem; text-align: right; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-2-con .oil-statistics-table .column-total-full .column { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-3-2-con .oil-statistics-table .column-total-full .column:nth-child(1) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-total-full .column:nth-child(2) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-total-full .column:nth-child(3) { text-align: center;}

  .page-3-2-con .oil-sail-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-3-2-con .oil-sail-table .caption-full { width: 100%; font-size: 0.7rem; 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-2-con .oil-sail-table .caption-full .caption { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-2-con .oil-sail-table .caption-full .caption:last-child { border-right: 0;}
  .page-3-2-con .oil-sail-table .column-full { width: 100%; font-size: 0.7rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-2-con .oil-sail-table .column-full .column { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-3-2-con .oil-sail-table .column-full .column:nth-child(1) { text-align: center;}
  .page-3-2-con .oil-sail-table .column-total-full { width: 100%; font-size: 0.7rem; text-align: right; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-2-con .oil-sail-table .column-total-full .column { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-3-2-con .oil-sail-table .column-total-full .column:nth-child(1) { text-align: center;}


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

  .page-4-1-con { clear: both; width: 100%;}

  .page-4-1-con .report-date-list { clear: both; max-width: 100%; width: 400px; margin: 0 auto 40px auto;}
  .page-4-1-con .report-date-list button.goback { clear: both; width: 100%; padding: 10px 0; margin: 0 0 20px 0; color: #fff; font-size: 1.1rem; line-height: 1.2em; text-align: center; border: 0; border-radius: 12px; background-color: #308bb8; cursor: pointer;}
  .page-4-1-con .report-date-list button.date { clear: both; width: 100%; padding: 10px 0; margin: 0 auto 20px auto; color: #308bb8; font-size: 1.1rem; line-height: 1.2em; text-align: center; border: 1px #308bb8 solid; border-radius: 12px; background-color: #eee; box-sizing: border-box; cursor: pointer;}
  .page-4-1-con .report-date-list button:active { -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}


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

  .page-4-2-stitle { clear: both; width: 100%; padding: 0 0 20px 0; font-size: 0.8rem; font-weight: 500; line-height: 1.2em;}


  /************ section #page-4-5 ************/

  .page-4-5-con { clear: both; width: 100%;}

  .page-4-5-con .billing-capacity-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-4-5-con .billing-capacity-table .caption-full { width: 100%; font-size: 0.7rem; 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-5-con .billing-capacity-table .caption-full .caption { width: calc(100% / 6); padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-5-con .billing-capacity-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-5-con .billing-capacity-table .column-full { width: 100%; font-size: 0.7rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-5-con .billing-capacity-table .column-full .header { width: calc(100% / 6); padding: 10px 5x; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-4-5-con .billing-capacity-table .column-full .column { width: calc(100% / 6); padding: 10px 5px; box-sizing: border-box;}
  .page-4-5-con .billing-capacity-table .column-full .column:nth-child(1) { text-align: center;}
  .page-4-5-con .billing-capacity-table .column-total-full { width: 100%; font-size: 0.7rem; text-align: right; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-5-con .billing-capacity-table .column-total-full .column { width: calc(100% / 6); padding: 10px 5px; box-sizing: border-box;}
  .page-4-5-con .billing-capacity-table .column-total-full .column:nth-child(1) { text-align: center;}

  .page-4-5-con .billing-price-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-4-5-con .billing-price-table .caption-full { width: 100%; font-size: 0.7rem; 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-5-con .billing-price-table .caption-full .caption { width: calc(100% / 9); padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-5-con .billing-price-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-5-con .billing-price-table .column-full { width: 100%; font-size: 0.7rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-5-con .billing-price-table .column-full .header { width: calc(100% / 9); padding: 10px 5px; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-4-5-con .billing-price-table .column-full .column { width: calc(100% / 9); padding: 10px 5px; box-sizing: border-box;}
  .page-4-5-con .billing-price-table .column-full .column:nth-child(1) { text-align: center;}
  .page-4-5-con .billing-price-table .column-total-full { width: 100%; font-size: 0.7rem; text-align: right; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-5-con .billing-price-table .column-total-full .column { width: calc(100% / 9); padding: 10px 5px; box-sizing: border-box;}
  .page-4-5-con .billing-price-table .column-total-full .column:nth-child(1) { text-align: center;}


  /************ section #page-4-6 ************/

  .page-4-6-con { clear: both; width: 100%;}

  .page-4-6-con .billing-capacity-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-4-6-con .billing-capacity-table .caption-full { width: 100%; font-size: 0.7rem; 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-6-con .billing-capacity-table .caption-full .caption { width: calc(100% / 3); padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-6-con .billing-capacity-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-6-con .billing-capacity-table .column-full { width: 100%; font-size: 0.7rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-6-con .billing-capacity-table .column-full .header { width: calc(100% / 3); padding: 10px 5x; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-4-6-con .billing-capacity-table .column-full .column { width: calc(100% / 3); padding: 10px 5px; box-sizing: border-box;}
  .page-4-6-con .billing-capacity-table .column-full .column:nth-child(1) { text-align: center;}
  .page-4-6-con .billing-capacity-table .column-total-full { width: 100%; font-size: 0.7rem; text-align: right; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-6-con .billing-capacity-table .column-total-full .column { width: calc(100% / 3); padding: 10px 5px; box-sizing: border-box;}
  .page-4-6-con .billing-capacity-table .column-total-full .column:nth-child(1) { text-align: center;}

  .page-4-6-con .billing-price-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-4-6-con .billing-price-table .caption-full { width: 100%; font-size: 0.7rem; 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-6-con .billing-price-table .caption-full .caption { width: calc(100% / 9); padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-6-con .billing-price-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-6-con .billing-price-table .column-full { width: 100%; font-size: 0.7rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-6-con .billing-price-table .column-full .header { width: calc(100% / 9); padding: 10px 5px; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-4-6-con .billing-price-table .column-full .column { width: calc(100% / 9); padding: 10px 5px; box-sizing: border-box;}
  .page-4-6-con .billing-price-table .column-full .column:nth-child(1) { text-align: center;}
  .page-4-6-con .billing-price-table .column-total-full { width: 100%; font-size: 0.7rem; text-align: right; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-6-con .billing-price-table .column-total-full .column { width: calc(100% / 9); padding: 10px 5px; box-sizing: border-box;}
  .page-4-6-con .billing-price-table .column-total-full .column:nth-child(1) { text-align: center;}


  /************ section #page-4-7 ************/

  .page-4-7-con { clear: both; width: 100%; overflow-x: scroll;}

  .page-4-7-con .purchase-sales-table { width: 200%; margin: 0 10px 40px 10px;}
  .page-4-7-con .purchase-sales-table .caption-full { width: 100%; font-size: 0.7rem; 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-7-con .purchase-sales-table .caption-full .caption-0 { width: 20%; padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-7-con .purchase-sales-table .caption-full .caption { width: calc(80% / 9); padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-7-con .purchase-sales-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-7-con .purchase-sales-table .column-full { width: 100%; font-size: 0.7rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-7-con .purchase-sales-table .column-full .column-0 { width: 20%; padding: 10px 5px; box-sizing: border-box; text-align: center; background-color: #eee;}
  .page-4-7-con .purchase-sales-table .column-full .column { width: calc(80% / 9); padding: 10px 5px; box-sizing: border-box;}
  .page-4-7-con .purchase-sales-table .column-total-full { width: 100%; font-size: 0.7rem; text-align: right; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-7-con .purchase-sales-table .column-total-full .column-0 { width: 20%; padding: 10px 5px; box-sizing: border-box; text-align: center;}
  .page-4-7-con .purchase-sales-table .column-total-full .column { width: calc(80% / 9); padding: 10px 5px; box-sizing: border-box;}


  /************ 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: 130px; margin: 0 0 10px 0; color: #3465a4; font-size: 1.2rem;}
  .add-edit-table .column { width: calc(100% - 130px); 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 ************/

  .page-update-time { clear: both; width: 100%; margin: 0 0 40px 0; color: #666; font-size: 0.8rem; line-height: 1.2em;}

  .page-1-1-con { clear: both; width: 100%;}

  .page-1-1-con .shift-table { width: 100%; margin: 0 0 40px 0;}
  .page-1-1-con .shift-table .caption-full { width: 100%; font-size: 0.7rem; font-weight: 600; line-height: 1.1em; border-bottom: 2px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .shift-table .caption-full .caption { width: calc(100% / 6); padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .shift-table .caption-full .caption:last-child { border-right: 0;}
  .page-1-1-con .shift-table .column-full { width: 100%; font-size: 0.7rem; line-height: 1.1em; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .shift-table .column-full .header { width: calc(100% / 6); padding: 10px 5px; text-align: right; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-1-1-con .shift-table .column-full .column { width: calc(100% / 6); padding: 10px 5px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .shift-table .column-full .column:nth-child(1) { text-align: center;}
  .page-1-1-con .shift-table .column-full-total { width: 100%; font-size: 0.7rem; line-height: 1.1em; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .shift-table .column-full-total .column { width: calc(100% / 6); padding: 10px 5px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .shift-table .column-full-total .column:nth-child(1) { text-align: center;}

  .page-1-1-con .oil-table { width: 100%; margin: 0 0 40px 0;}
  .page-1-1-con .oil-table:first-child { clear: both;}
  .page-1-1-con .oil-table .caption-full { width: 100%; font-size: 0.7rem; font-weight: 600; line-height: 1.1em; border-bottom: 2px #ccc solid; box-sizing: border-box; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .oil-table .caption-full .caption { width: calc(100% / 6); padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .oil-table .caption-full .caption:last-child { border-right: 0;}
  .page-1-1-con .oil-table .column-full { width: 100%; font-size: 0.7rem; line-height: 1.1em; border-bottom: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .oil-table .column-full .header { width: calc(100% / 6); padding: 10px 5px; text-align: right; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-1-1-con .oil-table .column-full .column { width: calc(100% / 6); padding: 10px 5px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .oil-table .column-full .column:nth-child(1) { text-align: center;}
  .page-1-1-con .oil-table .column-full-total { width: 100%; font-size: 0.7rem; line-height: 1.1em; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .oil-table .column-full-total .column { width: calc(100% / 6); padding: 10px 5px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .oil-table .column-full-total .column:nth-child(1) { text-align: center;}

  .page-1-1-con .addi-table { width: 100%; margin: 0 0 40px 0;}
  .page-1-1-con .addi-table .caption-full { width: 100%; font-size: 0.7rem; font-weight: 600; line-height: 1.1em; border-bottom: 2px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .addi-table .caption-full .header { width: 20%; padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .addi-table .caption-full .caption { width: calc(80% / 9); padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .addi-table .caption-full .caption:last-child { border-right: 0;}
  .page-1-1-con .addi-table .column-full { width: 100%; font-size: 0.7rem; line-height: 1.1em; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .addi-table .column-full .header { width: 20%; padding: 10px 5px; text-align: right; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-1-1-con .addi-table .column-full .column { width: calc(80% / 9); padding: 10px 5px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .addi-table .column-full .column:nth-child(1) { text-align: center;}
  .page-1-1-con .addi-table .column-full-total { width: 100%; font-size: 0.7rem; line-height: 1.1em; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .addi-table .column-full-total .header { width: 20%; padding: 10px 5px; text-align: center; box-sizing: border-box;}
  .page-1-1-con .addi-table .column-full-total .column { width: calc(80% / 9); padding: 10px 5px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .addi-table .column-full-total .column:nth-child(1) { text-align: center;}

  .page-1-1-con .grade-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-1-1-con .grade-table .caption-full { width: 100%; font-size: 0.7rem; font-weight: 600; line-height: 1.1em; border-bottom: 2px #ccc solid; background-color: #eee; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .grade-table .caption-full .caption-1 { width: 6%; padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .grade-table .caption-full .caption-2 { width: calc(94% / 25); padding: 10px 5px; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-1-1-con .grade-table .caption-full .caption-2:last-child { border-right: 0;}
  .page-1-1-con .grade-table .column-full { width: 100%; font-size: 0.7rem; line-height: 1.1em; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .grade-table .column-full .column-1 { width: 6%; padding: 10px 5px; text-align: left; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-1-1-con .grade-table .column-full .column-2 { width: calc(94% / 25); padding: 10px 5px; text-align: right; box-sizing: border-box;}
  .page-1-1-con .grade-table .column-full-total { width: 340%; font-size: 0.7rem; line-height: 1.1em; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-1-1-con .grade-table .column-full-total .column-1 { width: 6%; padding: 10px 5px; text-align: center; box-sizing: border-box;}
  .page-1-1-con .grade-table .column-full-total .column-2 { width: calc(94% / 25); padding: 10px 5px; text-align: right; box-sizing: border-box;}


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

  .page-2-1-con { clear: both; width: 100%;}

  .page-2-1-con .price-table { clear: both; width: 100%; margin: 0 auto 40px auto; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-2-1-con .price-table .caption { width: 60%; padding: 10px; font-size: 1rem; font-weight: 500; line-height: 1.2em; border-right: 1px #ccc solid; border-bottom: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .price-table .caption:nth-child(1) { border-top: 1px #ccc solid;}
  .page-2-1-con .price-table .column { width: 40%; padding: 10px; font-size: 1rem; text-align: right; line-height: 1.2em; border-bottom: 1px #ccc solid; box-sizing: border-box;}
  .page-2-1-con .price-table .column:nth-child(2) { border-top: 1px #ccc solid;}

  .page-2-1-con .text-link { width: 100%; margin: 0 auto; font-size: 0.9rem; line-height: 1.2em; text-align: center;}
  .page-2-1-con .text-link a { color: #414141; text-decoration: none; border-bottom: 1px #414141 dashed;}


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

  .page-3-1-con { clear: both; width: 100%;}

  .page-3-1-con .oil-stock-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-3-1-con .oil-stock-table .caption-full { width: 100%; font-size: 0.7rem; 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 .oil-stock-table .caption-full .caption-1 { width: 18%; padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .caption-full .caption-2 { width: 18%; padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .caption-full .caption-3 { width: calc(64% / 3); padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .caption-full .caption-3:nth-child(5) { border-right: 0;}
  .page-3-1-con .oil-stock-table .caption-full .caption-4 { display: none;}
  .page-3-1-con .oil-stock-table .column-full { width: 100%; font-size: 0.7rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-3-1-con .oil-stock-table .column-full .column-1 { width: 18%; padding: 10px 5px; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .column-full .column-2 { width: 18%; padding: 10px 5px; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .column-full .column-3 { width: calc(64% / 3); padding: 10px 5px; text-align: right; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .column-full .column-4 { width: 100%; padding: 10px 5px; box-sizing: border-box;}
  .page-3-1-con .oil-stock-table .column-full .column-4 .chart { padding: 0 5px 0 0; color: #fff; text-align: right; box-sizing: border-box;}

  .page-3-1-con .oil-purchase-table { clear: both; width: 80%; margin: 0 0 40px 0;}
  .page-3-1-con .oil-purchase-table .caption-full { width: 100%; font-size: 0.7rem; 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 .oil-purchase-table .caption-full .caption-1 { width: 30%; padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-purchase-table .caption-full .caption-2 { width: 20%; padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-1-con .oil-purchase-table .caption-full .caption-1:last-child { border-right: 0;}
  .page-3-1-con .oil-purchase-table .column-full { width: 100%; font-size: 0.7rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-1-con .oil-purchase-table .column-full .column-1 { width: 30%; padding: 10px 5px; box-sizing: border-box;}
  .page-3-1-con .oil-purchase-table .column-full .column-2 { width: 20%; padding: 10px 5px; box-sizing: border-box;}
  .page-3-1-con .oil-purchase-table .column-full .column-1:last-child { text-align: right;}


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

  .page-3-2-con { clear: both; width: 100%;}

  .page-3-2-con .oil-statistics-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-3-2-con .oil-statistics-table .caption-full { width: 100%; font-size: 0.7rem; 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-2-con .oil-statistics-table .caption-full .caption { width: 10%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-2-con .oil-statistics-table .caption-full .caption:last-child { border-right: 0;}
  .page-3-2-con .oil-statistics-table .column-full { width: 100%; font-size: 0.7rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-2-con .oil-statistics-table .column-full .column { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-3-2-con .oil-statistics-table .column-full .column:nth-child(1) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-full .column:nth-child(2) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-full .column:nth-child(3) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-total-full { width: 100%; font-size: 0.7rem; text-align: right; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-2-con .oil-statistics-table .column-total-full .column { width: 10%; padding: 10px; box-sizing: border-box;}
  .page-3-2-con .oil-statistics-table .column-total-full .column:nth-child(1) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-total-full .column:nth-child(2) { text-align: center;}
  .page-3-2-con .oil-statistics-table .column-total-full .column:nth-child(3) { text-align: center;}

  .page-3-2-con .oil-sail-table { clear: both; width: 60%; margin: 0 0 40px 0;}
  .page-3-2-con .oil-sail-table .caption-full { width: 100%; font-size: 0.7rem; 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-2-con .oil-sail-table .caption-full .caption { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-3-2-con .oil-sail-table .caption-full .caption:last-child { border-right: 0;}
  .page-3-2-con .oil-sail-table .column-full { width: 100%; font-size: 0.7rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-2-con .oil-sail-table .column-full .column { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-3-2-con .oil-sail-table .column-full .column:nth-child(1) { text-align: center;}
  .page-3-2-con .oil-sail-table .column-total-full { width: 100%; font-size: 0.7rem; text-align: right; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-3-2-con .oil-sail-table .column-total-full .column { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-3-2-con .oil-sail-table .column-total-full .column:nth-child(1) { text-align: center;}


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

  .page-4-1-con { clear: both; width: 100%;}

  .page-4-1-con .report-date-list { clear: both; max-width: 100%; width: 400px; margin: 0 auto 40px auto;}
  .page-4-1-con .report-date-list button.goback { clear: both; width: 100%; padding: 10px 0; margin: 0 0 20px 0; color: #fff; font-size: 1.1rem; line-height: 1.2em; text-align: center; border: 0; border-radius: 12px; background-color: #308bb8; cursor: pointer;}
  .page-4-1-con .report-date-list button.date { clear: both; width: 100%; padding: 10px 0; margin: 0 auto 20px auto; color: #308bb8; font-size: 1.1rem; line-height: 1.2em; text-align: center; border: 1px #308bb8 solid; border-radius: 12px; background-color: #eee; box-sizing: border-box; cursor: pointer;}
  .page-4-1-con .report-date-list button:active { -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}


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

  .page-4-2-stitle { clear: both; width: 100%; padding: 0 0 20px 0; font-size: 0.8rem; font-weight: 500; line-height: 1.2em;}


  /************ section #page-4-5 ************/

  .page-4-5-con { clear: both; width: 100%;}

  .page-4-5-con .billing-capacity-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-4-5-con .billing-capacity-table .caption-full { width: 100%; font-size: 0.7rem; 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-5-con .billing-capacity-table .caption-full .caption { width: calc(100% / 6); padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-5-con .billing-capacity-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-5-con .billing-capacity-table .column-full { width: 100%; font-size: 0.7rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-5-con .billing-capacity-table .column-full .header { width: calc(100% / 6); padding: 10px 5px; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-4-5-con .billing-capacity-table .column-full .column { width: calc(100% / 6); padding: 10px 5px; box-sizing: border-box;}
  .page-4-5-con .billing-capacity-table .column-full .column:nth-child(1) { text-align: center;}
  .page-4-5-con .billing-capacity-table .column-total-full { width: 100%; font-size: 0.7rem; text-align: right; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-5-con .billing-capacity-table .column-total-full .column { width: calc(100% / 6); padding: 10px 5px; box-sizing: border-box;}
  .page-4-5-con .billing-capacity-table .column-total-full .column:nth-child(1) { text-align: center;}

  .page-4-5-con .billing-price-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-4-5-con .billing-price-table .caption-full { width: 100%; font-size: 0.7rem; 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-5-con .billing-price-table .caption-full .caption { width: calc(100% / 9); padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-5-con .billing-price-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-5-con .billing-price-table .column-full { width: 100%; font-size: 0.7rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-5-con .billing-price-table .column-full .header { width: calc(100% / 9); padding: 10px 5px; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-4-5-con .billing-price-table .column-full .column { width: calc(100% / 9); padding: 10px 5px; box-sizing: border-box;}
  .page-4-5-con .billing-price-table .column-full .column:nth-child(1) { text-align: center;}
  .page-4-5-con .billing-price-table .column-total-full { width: 100%; font-size: 0.7rem; text-align: right; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-5-con .billing-price-table .column-total-full .column { width: calc(100% / 9); padding: 10px 5px; box-sizing: border-box;}
  .page-4-5-con .billing-price-table .column-total-full .column:nth-child(1) { text-align: center;}


  /************ section #page-4-6 ************/

  .page-4-6-con { clear: both; width: 100%;}

  .page-4-6-con .billing-capacity-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-4-6-con .billing-capacity-table .caption-full { width: 100%; font-size: 0.7rem; 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-6-con .billing-capacity-table .caption-full .caption { width: calc(100% / 3); padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-6-con .billing-capacity-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-6-con .billing-capacity-table .column-full { width: 100%; font-size: 0.7rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-6-con .billing-capacity-table .column-full .header { width: calc(100% / 3); padding: 10px 5px; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-4-6-con .billing-capacity-table .column-full .column { width: calc(100% / 3); padding: 10px 5px; box-sizing: border-box;}
  .page-4-6-con .billing-capacity-table .column-full .column:nth-child(1) { text-align: center;}
  .page-4-6-con .billing-capacity-table .column-total-full { width: 100%; font-size: 0.7rem; text-align: right; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-6-con .billing-capacity-table .column-total-full .column { width: calc(100% / 3); padding: 10px 5px; box-sizing: border-box;}
  .page-4-6-con .billing-capacity-table .column-total-full .column:nth-child(1) { text-align: center;}

  .page-4-6-con .billing-price-table { clear: both; width: 100%; margin: 0 0 40px 0;}
  .page-4-6-con .billing-price-table .caption-full { width: 100%; font-size: 0.7rem; 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-6-con .billing-price-table .caption-full .caption { width: calc(100% / 9); padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-6-con .billing-price-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-6-con .billing-price-table .column-full { width: 100%; font-size: 0.7rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-6-con .billing-price-table .column-full .header { width: calc(100% / 9); padding: 10px 5px; box-sizing: border-box; background-color: #eee; text-align: center;}
  .page-4-6-con .billing-price-table .column-full .column { width: calc(100% / 9); padding: 10px 5px; box-sizing: border-box;}
  .page-4-6-con .billing-price-table .column-full .column:nth-child(1) { text-align: center;}
  .page-4-6-con .billing-price-table .column-total-full { width: 100%; font-size: 0.7rem; text-align: right; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-6-con .billing-price-table .column-total-full .column { width: calc(100% / 9); padding: 10px 5px; box-sizing: border-box;}
  .page-4-6-con .billing-price-table .column-total-full .column:nth-child(1) { text-align: center;}



  /************ section #page-4-7 ************/

  .page-4-7-con { clear: both; width: 100%;}

  .page-4-7-con .purchase-sales-table { width: 100%; margin: 0 10px 40px 10px;}
  .page-4-7-con .purchase-sales-table .caption-full { width: 100%; font-size: 0.7rem; 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-7-con .purchase-sales-table .caption-full .caption-0 { width: 20%; padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-7-con .purchase-sales-table .caption-full .caption { width: calc(80% / 9); padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-4-7-con .purchase-sales-table .caption-full .caption:last-child { border-right: 0;}
  .page-4-7-con .purchase-sales-table .column-full { width: 100%; font-size: 0.7rem; text-align: right; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-7-con .purchase-sales-table .column-full .column-0 { width: 20%; padding: 10px 5px; box-sizing: border-box; text-align: center; background-color: #eee;}
  .page-4-7-con .purchase-sales-table .column-full .column { width: calc(80% / 9); padding: 10px 5px; box-sizing: border-box;}
  .page-4-7-con .purchase-sales-table .column-total-full { width: 100%; font-size: 0.7rem; text-align: right; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-4-7-con .purchase-sales-table .column-total-full .column-0 { width: 20%; padding: 10px 5px; box-sizing: border-box; text-align: center;}
  .page-4-7-con .purchase-sales-table .column-total-full .column { width: calc(80% / 9); padding: 10px 5px; box-sizing: border-box;}


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

  footer { display: none;}


}