@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%;}


/************ forgot password ************/
#forgot-password-form { width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); display: none; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 999999;}
#forgot-password-form .input-form { width: 500px; max-width: 94%; padding: 100px 40px; text-align: center; border-radius: 15px; background-color: #fff; box-sizing: border-box; position: relative;}
#forgot-password-form .input-form .close-icon { width: 40px; height: 40px; font-size: 2rem; text-align: center; cursor: pointer; position: absolute; top: 10px; right: 10px; z-index: 9;}
#forgot-password-form .input-form input[type=email], 
#forgot-password-form .input-form input[type=password] { width: 300px; padding: 10px; margin: 0 0 20px 0; color: #333; font-size: 1rem; border: 1px #595757 solid; border-radius: 15px; box-sizing: border-box;}
#forgot-password-form .input-form input[type=submit], 
#forgot-password-form .input-form input[type=reset] { width: 80px; padding: 3px 0; margin: 0 10px; color: #fff; font-size: 1rem; border: 0; border-radius: 15px; background-color: #333; cursor: pointer;}


body#login-style { width: 100%; height: 100%; padding: 40px 0; box-sizing: border-box; background-image: url("../images/login_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top; display: flex; justify-content: center; align-items: center;}


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

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

  header { clear: both; width: 100%; padding: 30px calc(50% - 700px) 20px calc(50% - 700px); box-sizing: border-box;}

  .header-hello { width: 100%; padding: 0 0 35px 0; font-size: 1.1rem; text-align: right;}

  .header-nav-social { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .header-nav-social .site-title { width: 200px;}
  .header-nav-social .site-title a { width: 100%; padding: 3px 10px; color: #fff; font-size: 1.1rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 30px; background-color: #6d6d6d; box-sizing: border-box; display: block;}
  .header-nav-social .site-title a:hover { background-color: #383231;}

  nav#mo { display: none;}
  nav#pc { width: calc(100% - 200px - 150px - 105px);}
  nav#pc ul.nav-menu { width: 100%; padding: 0 20px; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: center; align-items: center;}
  nav#pc ul.nav-menu li { padding: 10px 20px; margin: 0; position: relative; box-sizing: border-box;}
  nav#pc ul.nav-menu li a { padding: 3px 8px; color: #333; font-size: 1.1rem; font-weight: 500; text-decoration: none; display: block; cursor: pointer;}
  nav#pc ul.nav-menu li a:hover { color: #fff; border-radius: 8px; background-color: #6d6d6d;}
  nav#pc ul.nav-menu li a.sel { color: #fff; border-radius: 8px; background-color: #6d6d6d;}
  nav#pc ul.nav-menu li a.action { color: #fff; border-radius: 8px; background-color: #2791ad;}
  nav#pc ul.nav-menu li ul.menu-popup { padding: 10px 0; margin: 0; list-style: none; border-radius: 15px; background-color: rgba(89,87,87,0.8); display: none; position: absolute; top: 45px; z-index: 999;}
  nav#pc ul.nav-menu li ul.menu-popup.w-156 { width: 156px; left: calc(50% - 78px);}
  nav#pc ul.nav-menu li ul.menu-popup.w-180 { width: 180px; left: calc(50% - 90px);}
  nav#pc ul.nav-menu li ul.menu-popup li { width: 100%; padding: 0; margin: 0;}
  nav#pc ul.nav-menu li ul.menu-popup li a { width: 100%; padding: 5px 0; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; border-radius: 0; background-color: transparent; display: block;}
  nav#pc ul.nav-menu li ul.menu-popup li a:hover { width: 100%; background-color: rgba(255,255,255,0.2);}

  .header-search-mo { display: none;}
  .header-search { width: 150px; height: 36px; padding: 0 10px; background-color: #f6f6f6; border-radius: 30px; border: 1px #c4c6c8 solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .header-search img.search-icon { width: 20px; height: auto;}
  .header-search input[type=search] { width: calc(100% - 20px); height: 100%; padding: 0 0 0 5px; color: #333; font-size: 1.1rem; border: 0; outline: none; background-color: transparent; box-sizing: border-box;}

  .header-social-icons-mo { display: none;} 
  .header-social-icons { width: 120px; display: flex; justify-content: flex-end; align-items: center; position: relative;}
  .header-social-icons a.icon { width: 25px; margin: 0 0 0 15px; display: block;}
  .header-social-icons a.icon img { width: 100%; height: auto; cursor: pointer;}

  .header-mem-nav { width: 120px; position: absolute; top: 30px; right: 0; z-index: 999; display: none;}
  .header-mem-nav .triangle { border-right: 12px solid transparent; border-left: 12px solid transparent; border-bottom: 15px solid rgba(89,87,87,0.8); display: inline-block; float: right;}
  .header-mem-nav ul { clear: both; width: 100%; padding: 40px 0; margin: 0; list-style: none; border-radius: 15px 0 15px 15px; background-color: rgba(89,87,87,0.8); display: block;}
  .header-mem-nav ul li { width: 100%; padding: 0; margin: 0;}
  .header-mem-nav ul li a { width: 100%; padding: 5px 0; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; display: block; cursor: pointer;}
  .header-mem-nav ul li a:hover { width: 100%; background-color: rgba(255,255,255,0.2);}


  /************ section #log-in ************/

  section#log-in { clear: both; width: 100%; padding: 100px 4vw; box-sizing: border-box;}

  .logo-title { width: 100%; margin: 0 0 30px 0;}
  .logo-title img.login-logo { width: 300px; height: auto; margin: 0 auto 10px auto;}
  .logo-title img.login-title { width: 400px; height: auto; margin: 0 auto;}

  .page-sub-title { clear: both; width: 100%; padding: 0 0 20px 0; color: #1867a0; font-size: 2.4rem; font-weight: 600; text-align: center;}

  .log-in-box { width: 500px; padding: 40px; margin: 0 auto; color: #000; font-size: 1.2rem; border-radius: 20px; background-color: #a4d4f7; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .log-in-box .caption { width: 70px; margin: 0 0 20px 0;}
  .log-in-box .column { width: calc(100% - 70px); margin: 0 0 20px 0;}
  .log-in-box .column input[type=text], 
  .log-in-box .column input[type=password] { width: 100%; padding: 10px; color: #000; font-size: 1.2rem; border: 0; background-color: #fff; box-sizing: border-box;}
  .log-in-box .column a.forget-text { color: #000; font-size: 1rem; text-decoration: none; border-bottom: 1px #000 solid;}
  .log-in-box .column a.forget-text:hover { color: #555; border-bottom: 1px #555 dashed;}
  .log-in-box .column-full { width: 100%; margin: 20px 0 0 0; text-align: center;}
  .log-in-box .column-full input[type=submit], 
  .log-in-box .column-full input[type=button] { width: 100px; padding: 10px 0; color: #1867a0; font-size: 1.2rem; border: 0; border-radius: 10px; background-color: #fff; cursor: pointer;}
  .log-in-box .column-full input[type=submit]:hover, 
  .log-in-box .column-full input[type=button]:hover { background-color: #eee;}


  /************ section #forget ************/

  section#forget { clear: both; width: 100%; padding: 0 calc(50% - 700px) 40px calc(50% - 700px); box-sizing: border-box;}

  .page-forget-contain { width: 100%; padding: 40px 20px; border-radius: 15px; background-color: #fff; box-sizing: border-box;}

  .forget-box { width: 600px; padding: 40px; margin: 0 auto; color: #000; font-size: 1.2rem; border-radius: 20px; background-color: #a4d4f7; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .forget-box .caption { width: 120px; padding: 6px 0 0 0; margin: 0 0 20px 0; text-align: right;}
  .forget-box .column { width: calc(100% - 120px); margin: 0 0 20px 0;}
  .forget-box .column span.notice { color: #666; font-size: 1rem;}
  .forget-box .column input[type=password] { width: 100%; padding: 10px; color: #000; font-size: 1.2rem; border: 0; background-color: #fff; box-sizing: border-box;}
  .forget-box .column-full { width: 100%; margin: 20px 0 0 0; text-align: center;}
  .forget-box .column-full input[type=submit], 
  .forget-box .column-full input[type=reset], 
  .forget-box .column-full input[type=button] { width: 100px; padding: 10px 0; color: #1867a0; font-size: 1.2rem; border: 0; border-radius: 10px; background-color: #fff; cursor: pointer;}
  .forget-box .column-full input[type=submit]:hover, 
  .forget-box .column-full input[type=reset]:hover, 
  .forget-box .column-full input[type=button]:hover { background-color: #eee;}


  /************ section #index-content ************/

 /* section#index-content { clear: both; width: 100%; padding: 0 calc(50% - 700px) 40px calc(50% - 700px); box-sizing: border-box;}

  .page-sec-full-box { width: 100%; padding: 20px; border-radius: 15px; background-color: #ebebee; box-sizing: border-box;}

  .page-index-con { width: 100%; padding: 40px; box-sizing: border-box; border-radius: 15px; background-color: #fff; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}*/
 /* 建議直接替換掉原本的這幾段 */

section#index-content { clear: both; width: 100%; /* 移除左右 padding 的 calc，改用 margin auto */  padding: 0 0 40px 0;   display: flex;         /* 增加 flex 確保內層置中 */  justify-content: center;}
.page-sec-full-box { /* 與 Header 容器寬度保持一致 */ width: 100%;  max-width: 1400px;  margin: 0 auto;   padding: 20px; border-radius: 15px; background-color: #ebebee;  box-sizing: border-box;}
/* 確保內部白框也能正確延展 */
.page-index-con { width: 100%; padding: 40px; box-sizing: border-box; border-radius: 15px; background-color: #fff; display: flex; flex-wrap: wrap;} 
 
.view-num-bar { width: 100%; padding: 0 0 40px 0; color: #333; font-size: 1.1rem;}

  .page-index-con .column-box-2x { width: 50%; padding: 20px; box-sizing: border-box;}
  .page-index-con .column-box-2x .table-box-1 { width: 100%;}
  .page-index-con .column-box-2x .table-box-1 .caption-full { width: 100%; color: #fff; font-size: 1.1rem; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-index-con .column-box-2x .table-box-1 .caption-full .caption-1 { width: 65%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-index-con .column-box-2x .table-box-1 .caption-full .caption-2 { width: 35%; padding: 10px; text-align: center; box-sizing: border-box;}
  .page-index-con .column-box-2x .table-box-1 .column-full { width: 100%; color: #000; font-size: 1.1rem; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-index-con .column-box-2x .table-box-1 .column-full:nth-child(even) { background-color: #eee;}
  .page-index-con .column-box-2x .table-box-1 .column-full .column-1 { width: 65%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-index-con .column-box-2x .table-box-1 .column-full .column-2 { width: 35%; padding: 10px; text-align: center; box-sizing: border-box;}
  
  .page-index-con .column-box-2x .sub-title { width: 100%; padding: 0 0 30px 0; color: #000; font-size: 1.1rem; text-align: center;}
  

  /************ .breadcrumbs-bar ************/

  .breadcrumbs-bar { clear: both; width: 100%; padding: 20px 0; box-sizing: border-box; color: #000; font-size: 1rem; font-weight: 300; line-height: 1.4em;}
  .breadcrumbs-bar a { color: #000; border-bottom: 1px #000 solid; text-decoration: none;}


  /************ section #page-setting ************/

  section#page-setting { clear: both; width: 100%; padding: 0 calc(50% - 700px) 40px calc(50% - 700px); box-sizing: border-box;}

  .page-title { width: 100%; padding: 0 0 20px 0; color: #1867a0; font-size: 1.8rem; font-weight: 600; text-align: center;}

  .page-setting-con { width: 100%; padding: 40px 0; box-sizing: border-box; border-radius: 15px; background-color: #fff; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-setting-con .title-bar { width: 100%; padding: 10px 40px; color: #fff; font-size: 1.4rem; background-color: #1867a0; box-sizing: border-box;}
  .page-setting-con .content-box { width: 100%; padding: 40px; font-size: 1.1rem; line-height: 2em; box-sizing: border-box;}
  .page-setting-con .content-box .setting-form-box { width: 100%; max-height: 400px; overflow-y: scroll;}
  .page-setting-con .content-box input[type=checkbox] { width: 20px; height: 20px;}
  .page-setting-con .content-box input[type=radio] { width: 20px; height: 20px;}
  .page-setting-con .save-bt { width: 100%; padding: 40px 40px 0 40px; text-align: right; box-sizing: border-box;}
  .page-setting-con .save-bt input[type=submit], 
  .page-setting-con .save-bt input[type=button] { padding: 10px 20px; color: #fff; font-size: 1.1rem; border: 0; border-radius: 8px; background-color: #1867a0; cursor: pointer;}



  .page-setting-con .add-user-bt { width: 100%; padding: 0 40px 40px 40px; text-align: right; box-sizing: border-box;}
  .page-setting-con .add-user-bt input[type=submit], 
  .page-setting-con .add-user-bt input[type=button] { padding: 10px 20px; color: #fff; font-size: 1.1rem; border: 0; border-radius: 8px; background-color: #1867a0; cursor: pointer;}
  .page-setting-con .manager-list-table { width: 80%; padding: 0 40px; margin: 0 auto; box-sizing: border-box;}
  .page-setting-con .manager-list-table .caption-full { width: 100%; color: #fff; font-size: 1.1rem; text-align: center; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .manager-list-table .caption-full .caption-1 { width: 50%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .manager-list-table .caption-full .caption-2 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .manager-list-table .caption-full .caption-3 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .manager-list-table .column-full { width: 100%; color: #000; font-size: 1.2rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .manager-list-table .column-full .column-1 { width: 50%; padding: 10px; text-align: left; border-right: 1px #ccc solid; box-sizing: border-box; word-break: break-all;}
  .page-setting-con .manager-list-table .column-full .column-2 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .manager-list-table .column-full .column-3 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .manager-list-table .column-full .column-2 a, 
  .page-setting-con .manager-list-table .column-full .column-3 a { color: #1867a0; text-decoration: none;}
  .page-setting-con .manager-list-table .column-full .column-2 a:hover, 
  .page-setting-con .manager-list-table .column-full .column-3 a:hover { color: #2191e1;}



  .page-setting-con .manager-edit-table { width: 80%; padding: 0 40px; margin: 0 auto; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-setting-con .manager-edit-table .caption-full { width: 100%; padding: 10px; color: #fff; font-size: 1.2rem; background-color: #1867a0; box-sizing: border-box;}
  .page-setting-con .manager-edit-table .column-full { width: 50%; padding: 10px; border-bottom: 1px #1867a0 solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .manager-edit-table .column-full:nth-child(4n+1) { background-color: #f1f1f1;}
  .page-setting-con .manager-edit-table .column-full:nth-child(4n) { background-color: #f1f1f1;}
  .page-setting-con .manager-edit-table .caption { width: 100px; padding: 10px; font-size: 1.2rem; font-weight: 500; box-sizing: border-box; border-right: 1px #1867a0 solid;}
  .page-setting-con .manager-edit-table .column { width: calc(100% - 100px); padding: 10px; font-size: 1.2rem; box-sizing: border-box;}
  .page-setting-con .manager-edit-table .column input[type=radio] { width: 20px; height: 20px;}
  .page-setting-con .manager-edit-table .submit-bt { width: 100%; padding: 20px 10px 0 10px; margin: 20px 0 0 0; text-align: center; box-sizing: border-box;}
  .page-setting-con .manager-edit-table .submit-bt input[type=submit], 
  .page-setting-con .manager-edit-table .submit-bt input[type=button] { padding: 10px 20px; color: #fff; font-size: 1.2rem; border: 0; border-radius: 10px; background-color: #1867a0; cursor: pointer;}
  .page-setting-con .manager-edit-table .submit-bt input[type=submit]:hover, 
  .page-setting-con .manager-edit-table .submit-bt input[type=button]:hover { background-color: #2191e1;}



  .page-setting-con .mem-total-search-mo { display: none;}
  .page-setting-con .mem-total-search { width: 100%; margin: 0 0 40px 0; text-align: center;}
  .page-setting-con .mem-total-search input[type=date] { width: 180px; padding: 10px; margin: 0 10px; color: #1867a0; font-size: 1.1rem; border: 1px #1867a0 solid; box-sizing: border-box;}
  .page-setting-con .mem-total-search input[type=button] { width: 100px; padding: 10px; margin: 0 10px; color: #fff; font-size: 1.1rem; border: 1px #1867a0 solid; border-radius: 10px; background-color: #1867a0; box-sizing: border-box; cursor: pointer;}
  .page-setting-con .mem-total-search input[type=button]:hover { background-color: #2191e1;}
  .page-setting-con .mem-total-table { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box;}
  .page-setting-con .mem-total-table .caption-full { width: 100%; color: #fff; font-size: 1.1rem; text-align: center; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .mem-total-table .caption-full .caption-1 { width: 40%; padding: 10px; border-right: 1px #eee solid; box-sizing: border-box;}
  .page-setting-con .mem-total-table .caption-full .caption-2 { width: 30%; padding: 10px; border-right: 1px #eee solid; box-sizing: border-box;}
  .page-setting-con .mem-total-table .caption-full .caption-3 { width: 30%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .mem-total-table .column-full { width: 100%; color: #000; font-size: 1.1rem; text-align: center; border-bottom: 1px #333 solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .mem-total-table .column-full .column-1 { width: 40%; padding: 10px; border-right: 1px #333 solid; background-color: #e8f3fd; box-sizing: border-box; word-break: break-all;}
  .page-setting-con .mem-total-table .column-full .column-2 { width: 30%; padding: 10px; border-right: 1px #333 solid; box-sizing: border-box;}
  .page-setting-con .mem-total-table .column-full .column-3 { width: 30%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .mem-total-table .column-full .column-3 a { color: #1867a0; text-decoration: none; border-bottom: 1px #1867a0 dashed;}
  .page-setting-con .mem-total-table .column-full .column-3 a:hover { font-weight: 500;}

  .page-setting-con .UploadData-list-table { width: 80%; padding: 0 40px; margin: 0 auto; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .caption-full { width: 100%; color: #fff; font-size: 1.1rem; text-align: center; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .UploadData-list-table .caption-full .caption-1 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .caption-full .caption-2 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .caption-full .caption-3 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .caption-full .caption-4 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .column-full { width: 100%; color: #000; font-size: 1.2rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .UploadData-list-table .column-full .column-1 { width: 25%; padding: 10px; text-align: left; border-right: 1px #ccc solid; box-sizing: border-box; word-break: break-all;}
  .page-setting-con .UploadData-list-table .column-full .column-2 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .column-full .column-3 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .column-full .column-4 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .column-full .column-2 a, 
  .page-setting-con .UploadData-list-table .column-full .column-3 a { color: #1867a0; text-decoration: none;}
  .page-setting-con .UploadData-list-table .column-full .column-2 a:hover, 
  .page-setting-con .UploadData-list-table .column-full .column-3 a:hover { color: #2191e1;}
  /* 特定條件下的樣式：紅字與淡紅底色 */
  .page-setting-con .UploadData-list-table .column-full.is-invalid { background-color: #fff0f0; /* 淡紅色底色 */ color: #d93025;            /* 深紅色文字，確保閱讀清晰 */ border-bottom: 1px #f5c2c7 solid; /* 調整邊框顏色以符合色系 */}
  /* 讓該行內的文字也繼承紅色，並覆蓋原本的文字顏色 */
  .page-setting-con .UploadData-list-table .column-full.is-invalid .column-1,
  .page-setting-con .UploadData-list-table .column-full.is-invalid .column-2,
  .page-setting-con .UploadData-list-table .column-full.is-invalid .column-3,
  .page-setting-con .UploadData-list-table .column-full.is-invalid .column-4 { color: #d93025; }
  /* 若該行內有超連結，也一併調整顏色以免突兀 */
  .page-setting-con .UploadData-list-table .column-full.is-invalid a {color: #b02a37; text-decoration: underline; /* 增加底線區分 */}
  .page-setting-con .UploadData-list-table .column-full.is-invalid a:hover { color: #dc3545;}

  .page-setting-con .peopledownloads-table { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box;}
  .page-setting-con .peopledownloads-table .caption-full { width: 100%; color: #fff; font-size: 1.1rem; text-align: center; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .peopledownloads-table .caption-full .caption-1 { width: 50%; padding: 10px; border-right: 1px #eee solid; box-sizing: border-box;}
  .page-setting-con .peopledownloads-table .caption-full .caption-2 { width: 50%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .peopledownloads-table .column-full { width: 100%; color: #000; font-size: 1.1rem; text-align: center; border-bottom: 1px #333 solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .peopledownloads-table .column-full .column-1 { width: 50%; padding: 10px; border-right: 1px #333 solid; background-color: #e8f3fd; box-sizing: border-box; word-break: break-all;}
  .page-setting-con .peopledownloads-table .column-full .column-2 { width: 50%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .peopledownloads-table .column-full .column-2 a { color: #1867a0; text-decoration: none; border-bottom: 1px #1867a0 dashed;}
  .page-setting-con .peopledownloads-table .column-full .column-2 a:hover { font-weight: 500;}

  /*.page-setting-con .rsmfiles-search-mo { display: none;}
  .page-setting-con .rsmfiles-search { width: 100%; margin: 0 0 40px 0; text-align: center;}
  .page-setting-con .rsmfiles-search input[type=date] { width: 180px; padding: 10px; margin: 0 10px; color: #1867a0; font-size: 1.1rem; border: 1px #1867a0 solid; box-sizing: border-box;}
  .page-setting-con .rsmfiles-search input[type=button] { width: 100px; padding: 10px; margin: 0 10px; color: #fff; font-size: 1.1rem; border: 1px #1867a0 solid; border-radius: 10px; background-color: #1867a0; box-sizing: border-box; cursor: pointer;}
  .page-setting-con .rsmfiles-search input[type=button]:hover { background-color: #2191e1;}
  .page-setting-con .rsmfiles-search select,.rsmfiles-search-select { width: 180px; padding: 10px; margin: 0 10px; color: #1867a0; font-size: 1.1rem; border: 1px #1867a0 solid; background-color: #fff; box-sizing: border-box; vertical-align: middle;*/ /* 確保跟按鈕對齊 */
  /* 加入自定義箭頭圖示 */
  /*appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231867a0'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 20px;}*/
  /* 父容器設定 */
  .page-setting-con .rsmfiles-search {  width: 100%;  margin: 0 0 40px 0;  display: flex;          /* 使用 Flexbox */ flex-wrap: nowrap;      /* 強制不換行 */ justify-content: center; /* 居中對齊 (若要靠左改 flex-start) */ align-items: center;    /* 垂直置中 */ gap: 8px;               /* 元件之間的間距 */}
  /* 下拉選單與日期選擇器 */
  .page-setting-con .rsmfiles-search select,
  .page-setting-con .rsmfiles-search input[type=date],
  .rsmfiles-search-select {  flex: 1;                /* 讓選單自動分配剩餘空間 */ min-width: 120px;       /* 設定最小寬度防止擠壓變形 */  max-width: 180px;       /* 設定最大寬度防止太寬 */ padding: 8px 5px; color: #1867a0; font-size: 1rem; border: 1px #1867a0 solid; background-color: #fff; box-sizing: border-box;}
  /* 搜尋按鈕 */
  .page-setting-con .rsmfiles-search input[type=button] { flex-shrink: 0;         /* 防止按鈕被擠壓變小 */  width: 90px;  padding: 8px; color: #fff; font-size: 1rem; border: 1px #1867a0 solid; border-radius: 8px;  background-color: #1867a0; cursor: pointer; transition: 0.3s;}
  .page-setting-con .rsmfiles-search input[type=button]:hover {  background-color: #2191e1;}

  .page-setting-con .rsmfiles-table { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box;}
  .page-setting-con .rsmfiles-table .caption-full { width: 100%; color: #fff; font-size: 1.1rem; text-align: center; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .rsmfiles-table .caption-full .caption-1 { width: 40%; padding: 10px; border-right: 1px #eee solid; box-sizing: border-box;}
  .page-setting-con .rsmfiles-table .caption-full .caption-2 { width: 30%; padding: 10px; border-right: 1px #eee solid; box-sizing: border-box;}
  .page-setting-con .rsmfiles-table .caption-full .caption-3 { width: 30%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .rsmfiles-table .column-full { width: 100%; color: #000; font-size: 1.1rem; text-align: center; border-bottom: 1px #333 solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .rsmfiles-table .column-full .column-1 { width: 40%; padding: 10px; border-right: 1px #333 solid; background-color: #e8f3fd; box-sizing: border-box; word-break: break-all;}
  .page-setting-con .rsmfiles-table .column-full .column-2 { width: 30%; padding: 10px; border-right: 1px #333 solid; box-sizing: border-box;}
  .page-setting-con .rsmfiles-table .column-full .column-3 { width: 30%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .rsmfiles-table .column-full .column-3 a { color: #1867a0; text-decoration: none; border-bottom: 1px #1867a0 dashed;}
  .page-setting-con .rsmfiles-table .column-full .column-3 a:hover { font-weight: 500;}

/*  ul#pages-num { clear: both; width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul#pages-num li { padding: 0; margin: 3px; font-size: 1rem;}
  ul#pages-num li a { padding: 10px 8px; color: #1867a0; text-decoration: none; border: 1px #1867a0 solid; border-radius: 6px; display: block;}
  ul#pages-num li a:hover { background-color: #eee;}
  ul#pages-num li a.sel { background-color: #a4d4f7;}
  ul#pages-num li:first-child a, 
  ul#pages-num li:last-child a { border: 0;}
  ul#pages-num li:first-child a:hover, 
  ul#pages-num li:last-child a:hover { color: #a4d4f7; background-color: transparent;}
*/
.pagination-container {  width: 100%; display: flex; justify-content: center; margin-top: 20px;}
/* 1. 分頁容器：水平居中並設定間距 */
/* 確保分頁元件強制換行並置中 */
ul.pages-num {clear: both; /* 關鍵：強制換行，不跟在浮動元素後面 */ display: flex !important; /* 強制使用 flex 佈局 */ justify-content: center; /* 水平置中 */ list-style: none; padding: 0; margin: 30px 0; /* 與上方表格保持距離 */  width: 100%;/* 確保佔滿整行 */}
/* 讓列表項目水平排列 */
ul.pages-num li { display: inline-block; margin: 0 4px;}
/* 3. 通用按鈕樣式 (數字與文字) */
ul.pages-num li a, 
ul.pages-num li span { display: block; padding: 8px 16px; color: #1867a0; text-decoration: none; border: 1px solid #1867a0; border-radius: 12px; /* 膠囊型圓角 */ transition: all 0.2s ease; line-height: 1.4; font-weight: 500;}
/* 4. 滑鼠移過效果 */
ul.pages-num li a:hover { background-color: #f5f5f5;}
/* 5. 當前頁碼樣式 (Active) 
   PagedListPager 通常會將當前頁放在 li.active span 內 */
ul.pages-num li.active span { background-color: #aed9f8; /* 圖片中的淺藍色 */ color: #1867a0;  border: 1px solid #1867a0;}
/* 6. 特殊處理：上一頁與下一頁 */
/* 去除邊框，並在兩側增加間距 */
ul.pages-num li.PagedList-skipToPrevious,
ul.pages-num li.PagedList-skipToNext { margin: 0 15px; }

ul.pages-num li.PagedList-skipToPrevious a,
ul.pages-num li.PagedList-skipToNext a { border: none; /* 隱藏邊框 */ font-size: 1.1rem;}
/* 加上箭頭符號 (如果程式碼沒給，可以用 CSS 補上) */
ul.pages-num li.PagedList-skipToPrevious a::before {  content: "← "; font-weight: bold;}

ul.pages-num li.PagedList-skipToNext a::after { content: " →"; font-weight: bold;}
/* 7. 停用狀態處理 (例如在第一頁時的「上一頁」) */
ul.pages-num li.disabled span { color: #ccc;  border: none; cursor: not-allowed;}

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

  footer { clear: both; width: 100%; padding: 40px calc(50% - 650px); background-color: #a4d4f7; box-sizing: border-box; display: flex; justify-content: space-between; align-items: flex-start;}

  .footer-moenv-logo { width: 220px;}
  .footer-moenv-logo img { width: 100%; height: auto;}

  .footer-info { color: #000; font-size: 1.1rem; line-height: 1.8em;}


}

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

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

  header { clear: both; width: 100%; padding: 30px calc(50% - 620px) 20px calc(50% - 620px); box-sizing: border-box;}

  .header-hello { width: 100%; padding: 0 0 35px 0; font-size: 1.1rem; text-align: right;}

  .header-nav-social { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .header-nav-social .site-title { width: 200px;}
  .header-nav-social .site-title a { width: 100%; padding: 3px 10px; color: #fff; font-size: 1.1rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 30px; background-color: #6d6d6d; box-sizing: border-box; display: block;}
  .header-nav-social .site-title a:hover { background-color: #383231;}

  nav#mo { display: none;}
  nav#pc { width: calc(100% - 200px - 150px - 105px);}
  nav#pc ul.nav-menu { width: 100%; padding: 0 20px; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: center; align-items: center;}
  nav#pc ul.nav-menu li { padding: 10px 10px; margin: 0; position: relative; box-sizing: border-box;}
  nav#pc ul.nav-menu li a { padding: 3px 8px; color: #333; font-size: 1.1rem; font-weight: 500; text-decoration: none; display: block; cursor: pointer;}
  nav#pc ul.nav-menu li a:hover { color: #fff; border-radius: 8px; background-color: #6d6d6d;}
  nav#pc ul.nav-menu li a.sel { color: #fff; border-radius: 8px; background-color: #6d6d6d;}
  nav#pc ul.nav-menu li a.action { color: #fff; border-radius: 8px; background-color: #2791ad;}
  nav#pc ul.nav-menu li ul.menu-popup { padding: 10px 0; margin: 0; list-style: none; border-radius: 15px; background-color: rgba(89,87,87,0.8); display: none; position: absolute; top: 45px; z-index: 999;}
  nav#pc ul.nav-menu li ul.menu-popup.w-156 { width: 156px; left: calc(50% - 78px);}
  nav#pc ul.nav-menu li ul.menu-popup.w-180 { width: 180px; left: calc(50% - 90px);}
  nav#pc ul.nav-menu li ul.menu-popup li { width: 100%; padding: 0; margin: 0;}
  nav#pc ul.nav-menu li ul.menu-popup li a { width: 100%; padding: 5px 0; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; border-radius: 0; background-color: transparent; display: block;}
  nav#pc ul.nav-menu li ul.menu-popup li a:hover { width: 100%; background-color: rgba(255,255,255,0.2);}

  .header-search-mo { display: none;}
  .header-search { width: 150px; height: 36px; padding: 0 10px; background-color: #f6f6f6; border-radius: 30px; border: 1px #c4c6c8 solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .header-search img.search-icon { width: 20px; height: auto;}
  .header-search input[type=search] { width: calc(100% - 20px); height: 100%; padding: 0 0 0 5px; color: #333; font-size: 1.1rem; border: 0; outline: none; background-color: transparent; box-sizing: border-box;}

  .header-social-icons-mo { display: none;}
  .header-social-icons { width: 120px; display: flex; justify-content: flex-end; align-items: center; position: relative;}
  .header-social-icons a.icon { width: 25px; margin: 0 0 0 15px; display: block;}
  .header-social-icons a.icon img { width: 100%; height: auto; cursor: pointer;}

  .header-mem-nav { width: 120px; position: absolute; top: 30px; right: 0; z-index: 999; display: none;}
  .header-mem-nav .triangle { border-right: 12px solid transparent; border-left: 12px solid transparent; border-bottom: 15px solid rgba(89,87,87,0.8); display: inline-block; float: right;}
  .header-mem-nav ul { clear: both; width: 100%; padding: 40px 0; margin: 0; list-style: none; border-radius: 15px 0 15px 15px; background-color: rgba(89,87,87,0.8); display: block;}
  .header-mem-nav ul li { width: 100%; padding: 0; margin: 0;}
  .header-mem-nav ul li a { width: 100%; padding: 5px 0; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; display: block; cursor: pointer;}
  .header-mem-nav ul li a:hover { width: 100%; background-color: rgba(255,255,255,0.2);}


  /************ section #log-in ************/

  section#log-in { clear: both; width: 100%; padding: 100px 4vw; box-sizing: border-box;}

  .logo-title { width: 100%; margin: 0 0 30px 0;}
  .logo-title img.login-logo { width: 300px; height: auto; margin: 0 auto 10px auto;}
  .logo-title img.login-title { width: 400px; height: auto; margin: 0 auto;}

  .page-sub-title { clear: both; width: 100%; padding: 0 0 20px 0; color: #1867a0; font-size: 2.4rem; font-weight: 600; text-align: center;}

  .log-in-box { width: 500px; padding: 40px; margin: 0 auto; color: #000; font-size: 1.2rem; border-radius: 20px; border: 0; background-color: #a4d4f7; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .log-in-box .caption { width: 70px; margin: 0 0 20px 0;}
  .log-in-box .column { width: calc(100% - 70px); margin: 0 0 20px 0;}
  .log-in-box .column input[type=text], 
  .log-in-box .column input[type=password] { width: 100%; padding: 10px; color: #000; font-size: 1.2rem; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .log-in-box .column a.forget-text { color: #333; font-size: 1rem; text-decoration: none; border-bottom: 1px #333 solid;}
  .log-in-box .column a.forget-text:hover { color: #555; border-bottom: 1px #555 dashed;}
  .log-in-box .column-full { width: 100%; margin: 20px 0 0 0; text-align: center;}
  .log-in-box .column-full input[type=submit], 
  .log-in-box .column-full input[type=button] { width: 100px; padding: 10px 0; color: #1867a0; font-size: 1.2rem; border: 0; border-radius: 10px; background-color: #fff; cursor: pointer;}
  .log-in-box .column-full input[type=submit]:hover, 
  .log-in-box .column-full input[type=button]:hover { background-color: #eee;}


  /************ section #forget ************/

  section#forget { clear: both; width: 100%; padding: 0 calc(50% - 620px) 40px calc(50% - 620px); box-sizing: border-box;}

  .page-forget-contain { width: 100%; padding: 40px 20px; border-radius: 15px; background-color: #fff; box-sizing: border-box;}

  .forget-box { width: 600px; padding: 40px; margin: 0 auto; color: #000; font-size: 1.2rem; border-radius: 20px; background-color: #a4d4f7; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .forget-box .caption { width: 120px; margin: 0 0 20px 0; text-align: right;}
  .forget-box .column { width: calc(100% - 120px); margin: 0 0 20px 0;}
  .forget-box .column span.notice { color: #666; font-size: 1rem;}
  .forget-box .column input[type=password] { width: 100%; padding: 10px; color: #000; font-size: 1.2rem; border: 0; background-color: #fff; box-sizing: border-box;}
  .forget-box .column-full { width: 100%; margin: 20px 0 0 0; text-align: center;}
  .forget-box .column-full input[type=submit], 
  .forget-box .column-full input[type=reset], 
  .forget-box .column-full input[type=button] { width: 100px; padding: 10px 0; color: #1867a0; font-size: 1.2rem; border: 0; border-radius: 10px; background-color: #fff; cursor: pointer;}
  .forget-box .column-full input[type=submit]:hover, 
  .forget-box .column-full input[type=reset]:hover, 
  .forget-box .column-full input[type=button]:hover { background-color: #eee;}


  /************ section #index-content ************/

 /* section#index-content { clear: both; width: 100%; padding: 0 calc(50% - 620px) 40px calc(50% - 620px); box-sizing: border-box;}

  .page-sec-full-box { width: 100%; padding: 20px; border-radius: 15px; background-color: #ebebee; box-sizing: border-box;}

  .page-index-con { width: 100%; padding: 40px; box-sizing: border-box; border-radius: 15px; background-color: #fff; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
*/
 section#index-content { clear: both; width: 100%; /* 移除左右 padding 的 calc，改用 margin auto */  padding: 0 0 40px 0;   display: flex;         /* 增加 flex 確保內層置中 */  justify-content: center;}
.page-sec-full-box { /* 與 Header 容器寬度保持一致 */ width: 100%;  max-width: 1400px;  margin: 0 auto;   padding: 20px; border-radius: 15px; background-color: #ebebee;  box-sizing: border-box;}
/* 確保內部白框也能正確延展 */
.page-index-con { width: 100%; padding: 40px; box-sizing: border-box; border-radius: 15px; background-color: #fff; display: flex; flex-wrap: wrap;} 
 
  .view-num-bar { width: 100%; padding: 0 0 40px 0; color: #333; font-size: 1.1rem;}

  .page-index-con .column-box-2x { width: 50%; padding: 20px; box-sizing: border-box;}
  .page-index-con .column-box-2x .table-box-1 { width: 100%;}
  .page-index-con .column-box-2x .table-box-1 .caption-full { width: 100%; color: #fff; font-size: 1.1rem; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-index-con .column-box-2x .table-box-1 .caption-full .caption-1 { width: 65%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-index-con .column-box-2x .table-box-1 .caption-full .caption-2 { width: 35%; padding: 10px; text-align: center; box-sizing: border-box;}
  .page-index-con .column-box-2x .table-box-1 .column-full { width: 100%; color: #000; font-size: 1.1rem; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-index-con .column-box-2x .table-box-1 .column-full:nth-child(even) { background-color: #eee;}
  .page-index-con .column-box-2x .table-box-1 .column-full .column-1 { width: 65%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-index-con .column-box-2x .table-box-1 .column-full .column-2 { width: 35%; padding: 10px; text-align: center; box-sizing: border-box;}
  
  .page-index-con .column-box-2x .sub-title { width: 100%; padding: 0 0 30px 0; color: #000; font-size: 1.1rem; text-align: center;}  


  /************ .breadcrumbs-bar ************/

  .breadcrumbs-bar { clear: both; width: 100%; padding: 20px 0; box-sizing: border-box; color: #000; font-size: 1rem; font-weight: 300; line-height: 1.4em;}
  .breadcrumbs-bar a { color: #000; border-bottom: 1px #000 solid; text-decoration: none;}


  /************ section #page-setting ************/

  section#page-setting { clear: both; width: 100%; padding: 0 calc(50% - 620px) 40px calc(50% - 620px); box-sizing: border-box;}

  .page-title { width: 100%; padding: 0 0 20px 0; color: #1867a0; font-size: 1.8rem; font-weight: 600; text-align: center;}

  .page-setting-con { width: 100%; padding: 40px 0; box-sizing: border-box; border-radius: 15px; background-color: #fff; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-setting-con .title-bar { width: 100%; padding: 10px 40px; color: #fff; font-size: 1.4rem; background-color: #1867a0; box-sizing: border-box;}
  .page-setting-con .content-box { width: 100%; padding: 40px; font-size: 1.1rem; line-height: 2em; box-sizing: border-box;}
  .page-setting-con .content-box .setting-form-box { width: 100%; max-height: 400px; overflow-y: scroll;}
  .page-setting-con .content-box input[type=checkbox] { width: 20px; height: 20px;}
  .page-setting-con .content-box input[type=radio] { width: 20px; height: 20px;}
  .page-setting-con .save-bt { width: 100%; padding: 40px 40px 0 40px; text-align: right; box-sizing: border-box;}
  .page-setting-con .save-bt input[type=submit], 
  .page-setting-con .save-bt input[type=button] { padding: 10px 20px; color: #fff; font-size: 1.1rem; border: 0; background-color: #1867a0; cursor: pointer;}



  .page-setting-con .add-user-bt { width: 100%; padding: 0 40px 40px 40px; text-align: right; box-sizing: border-box;}
  .page-setting-con .add-user-bt input[type=submit], 
  .page-setting-con .add-user-bt input[type=button] { padding: 10px 20px; color: #fff; font-size: 1.1rem; border: 0; border-radius: 8px; background-color: #1867a0; cursor: pointer;}
  .page-setting-con .manager-list-table { width: 90%; padding: 0 40px; margin: 0 auto; box-sizing: border-box;}
  .page-setting-con .manager-list-table .caption-full { width: 100%; color: #fff; font-size: 1.1rem; text-align: center; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .manager-list-table .caption-full .caption-1 { width: 50%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .manager-list-table .caption-full .caption-2 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .manager-list-table .caption-full .caption-3 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .manager-list-table .column-full { width: 100%; color: #000; font-size: 1.2rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .manager-list-table .column-full .column-1 { width: 50%; padding: 10px; text-align: left; border-right: 1px #ccc solid; box-sizing: border-box; word-break: break-all;}
  .page-setting-con .manager-list-table .column-full .column-2 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .manager-list-table .column-full .column-3 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .manager-list-table .column-full .column-2 a, 
  .page-setting-con .manager-list-table .column-full .column-3 a { color: #1867a0; text-decoration: none;}
  .page-setting-con .manager-list-table .column-full .column-2 a:hover, 
  .page-setting-con .manager-list-table .column-full .column-3 a:hover { color: #2191e1;}



  .page-setting-con .manager-edit-table { width: 100%; padding: 0 40px; margin: 0 auto; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-setting-con .manager-edit-table .caption-full { width: 100%; padding: 10px; color: #fff; font-size: 1.2rem; background-color: #1867a0; box-sizing: border-box;}
  .page-setting-con .manager-edit-table .column-full { width: 50%; padding: 10px; border-bottom: 1px #1867a0 solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .manager-edit-table .column-full:nth-child(4n+1) { background-color: #f1f1f1;}
  .page-setting-con .manager-edit-table .column-full:nth-child(4n) { background-color: #f1f1f1;}
  .page-setting-con .manager-edit-table .caption { width: 100px; padding: 10px; font-size: 1.2rem; font-weight: 500; box-sizing: border-box; border-right: 1px #1867a0 solid;}
  .page-setting-con .manager-edit-table .column { width: calc(100% - 100px); padding: 10px; font-size: 1.2rem; box-sizing: border-box;}
  .page-setting-con .manager-edit-table .column input[type=radio] { width: 20px; height: 20px;}
  .page-setting-con .manager-edit-table .submit-bt { width: 100%; padding: 20px 10px 0 10px; margin: 20px 0 0 0; text-align: center; box-sizing: border-box;}
  .page-setting-con .manager-edit-table .submit-bt input[type=submit], 
  .page-setting-con .manager-edit-table .submit-bt input[type=button] { padding: 10px 20px; color: #fff; font-size: 1.2rem; border: 0; border-radius: 10px; background-color: #1867a0; cursor: pointer;}
  .page-setting-con .manager-edit-table .submit-bt input[type=submit]:hover, 
  .page-setting-con .manager-edit-table .submit-bt input[type=button]:hover { background-color: #2191e1;}



  .page-setting-con .mem-total-search-mo { display: none;}
  .page-setting-con .mem-total-search { width: 100%; margin: 0 0 40px 0; text-align: center;}
  .page-setting-con .mem-total-search input[type=date] { width: 180px; padding: 10px; margin: 0 10px; color: #1867a0; font-size: 1.1rem; border: 1px #1867a0 solid; box-sizing: border-box;}
  .page-setting-con .mem-total-search input[type=button] { width: 100px; padding: 10px; margin: 0 10px; color: #fff; font-size: 1.1rem; border: 1px #1867a0 solid; border-radius: 10px; background-color: #1867a0; box-sizing: border-box; cursor: pointer;}
  .page-setting-con .mem-total-search input[type=button]:hover { background-color: #2191e1;}
  .page-setting-con .mem-total-table { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box;}
  .page-setting-con .mem-total-table .caption-full { width: 100%; color: #fff; font-size: 1.1rem; text-align: center; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .mem-total-table .caption-full .caption-1 { width: 40%; padding: 10px; border-right: 1px #eee solid; box-sizing: border-box;}
  .page-setting-con .mem-total-table .caption-full .caption-2 { width: 30%; padding: 10px; border-right: 1px #eee solid; box-sizing: border-box;}
  .page-setting-con .mem-total-table .caption-full .caption-3 { width: 30%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .mem-total-table .column-full { width: 100%; color: #000; font-size: 1.1rem; text-align: center; border-bottom: 1px #333 solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .mem-total-table .column-full .column-1 { width: 40%; padding: 10px; border-right: 1px #333 solid; box-sizing: border-box; background-color: #e8f3fd; word-break: break-all;}
  .page-setting-con .mem-total-table .column-full .column-2 { width: 30%; padding: 10px; border-right: 1px #333 solid; box-sizing: border-box;}
  .page-setting-con .mem-total-table .column-full .column-3 { width: 30%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .mem-total-table .column-full .column-3 a { color: #1867a0; text-decoration: none; border-bottom: 1px #1867a0 dashed;}
  .page-setting-con .mem-total-table .column-full .column-3 a:hover { font-weight: 500;}

  .page-setting-con .UploadData-list-table { width: 80%; padding: 0 40px; margin: 0 auto; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .caption-full { width: 100%; color: #fff; font-size: 1.1rem; text-align: center; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .UploadData-list-table .caption-full .caption-1 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .caption-full .caption-2 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .caption-full .caption-3 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .caption-full .caption-4 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .column-full { width: 100%; color: #000; font-size: 1.2rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .UploadData-list-table .column-full .column-1 { width: 25%; padding: 10px; text-align: left; border-right: 1px #ccc solid; box-sizing: border-box; word-break: break-all;}
  .page-setting-con .UploadData-list-table .column-full .column-2 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .column-full .column-3 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .column-full .column-4 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .column-full .column-2 a, 
  .page-setting-con .UploadData-list-table .column-full .column-3 a { color: #1867a0; text-decoration: none;}
  .page-setting-con .UploadData-list-table .column-full .column-2 a:hover, 
  .page-setting-con .UploadData-list-table .column-full .column-3 a:hover { color: #2191e1;}
  /* 特定條件下的樣式：紅字與淡紅底色 */
  .page-setting-con .UploadData-list-table .column-full.is-invalid { background-color: #fff0f0; /* 淡紅色底色 */ color: #d93025;            /* 深紅色文字，確保閱讀清晰 */ border-bottom: 1px #f5c2c7 solid; /* 調整邊框顏色以符合色系 */}
  /* 讓該行內的文字也繼承紅色，並覆蓋原本的文字顏色 */
  .page-setting-con .UploadData-list-table .column-full.is-invalid .column-1,
  .page-setting-con .UploadData-list-table .column-full.is-invalid .column-2,
  .page-setting-con .UploadData-list-table .column-full.is-invalid .column-3,
  .page-setting-con .UploadData-list-table .column-full.is-invalid .column-4 { color: #d93025; }
  /* 若該行內有超連結，也一併調整顏色以免突兀 */
  .page-setting-con .UploadData-list-table .column-full.is-invalid a {color: #b02a37; text-decoration: underline; /* 增加底線區分 */}
  .page-setting-con .UploadData-list-table .column-full.is-invalid a:hover { color: #dc3545;}

    .page-setting-con .peopledownloads-table { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box;}
  .page-setting-con .peopledownloads-table .caption-full { width: 100%; color: #fff; font-size: 1.1rem; text-align: center; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .peopledownloads-table .caption-full .caption-1 { width: 50%; padding: 10px; border-right: 1px #eee solid; box-sizing: border-box;}
  .page-setting-con .peopledownloads-table .caption-full .caption-2 { width: 50%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .peopledownloads-table .column-full { width: 100%; color: #000; font-size: 1.1rem; text-align: center; border-bottom: 1px #333 solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .peopledownloads-table .column-full .column-1 { width: 50%; padding: 10px; border-right: 1px #333 solid; background-color: #e8f3fd; box-sizing: border-box; word-break: break-all;}
  .page-setting-con .peopledownloads-table .column-full .column-2 { width: 50%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .peopledownloads-table .column-full .column-2 a { color: #1867a0; text-decoration: none; border-bottom: 1px #1867a0 dashed;}
  .page-setting-con .peopledownloads-table .column-full .column-2 a:hover { font-weight: 500;}

  /*.page-setting-con .rsmfiles-search-mo { display: none;}
  .page-setting-con .rsmfiles-search { width: 100%; margin: 0 0 40px 0; text-align: center;}
  .page-setting-con .rsmfiles-search input[type=date] { width: 180px; padding: 10px; margin: 0 10px; color: #1867a0; font-size: 1.1rem; border: 1px #1867a0 solid; box-sizing: border-box;}
  .page-setting-con .rsmfiles-search input[type=button] { width: 100px; padding: 10px; margin: 0 10px; color: #fff; font-size: 1.1rem; border: 1px #1867a0 solid; border-radius: 10px; background-color: #1867a0; box-sizing: border-box; cursor: pointer;}
  .page-setting-con .rsmfiles-search input[type=button]:hover { background-color: #2191e1;}
  .page-setting-con .rsmfiles-search select,.rsmfiles-search-select { width: 180px; padding: 10px; margin: 0 10px; color: #1867a0; font-size: 1.1rem; border: 1px #1867a0 solid; background-color: #fff; box-sizing: border-box; vertical-align: middle;*/ /* 確保跟按鈕對齊 */
  /* 加入自定義箭頭圖示 */
  /*appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231867a0'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 20px;}*/
  /* 父容器設定 */
  .page-setting-con .rsmfiles-search {  width: 100%;  margin: 0 0 40px 0;  display: flex;          /* 使用 Flexbox */ flex-wrap: nowrap;      /* 強制不換行 */ justify-content: center; /* 居中對齊 (若要靠左改 flex-start) */ align-items: center;    /* 垂直置中 */ gap: 8px;               /* 元件之間的間距 */}
  /* 下拉選單與日期選擇器 */
  .page-setting-con .rsmfiles-search select,
  .page-setting-con .rsmfiles-search input[type=date],
  .rsmfiles-search-select {  flex: 1;                /* 讓選單自動分配剩餘空間 */ min-width: 120px;       /* 設定最小寬度防止擠壓變形 */  max-width: 180px;       /* 設定最大寬度防止太寬 */ padding: 8px 5px; color: #1867a0; font-size: 1rem; border: 1px #1867a0 solid; background-color: #fff; box-sizing: border-box;}
  /* 搜尋按鈕 */
  .page-setting-con .rsmfiles-search input[type=button] { flex-shrink: 0;         /* 防止按鈕被擠壓變小 */  width: 90px;  padding: 8px; color: #fff; font-size: 1rem; border: 1px #1867a0 solid; border-radius: 8px;  background-color: #1867a0; cursor: pointer; transition: 0.3s;}
  .page-setting-con .rsmfiles-search input[type=button]:hover {  background-color: #2191e1;}

  .page-setting-con .rsmfiles-table { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box;}
  .page-setting-con .rsmfiles-table .caption-full { width: 100%; color: #fff; font-size: 1.1rem; text-align: center; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .rsmfiles-table .caption-full .caption-1 { width: 40%; padding: 10px; border-right: 1px #eee solid; box-sizing: border-box;}
  .page-setting-con .rsmfiles-table .caption-full .caption-2 { width: 30%; padding: 10px; border-right: 1px #eee solid; box-sizing: border-box;}
  .page-setting-con .rsmfiles-table .caption-full .caption-3 { width: 30%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .rsmfiles-table .column-full { width: 100%; color: #000; font-size: 1.1rem; text-align: center; border-bottom: 1px #333 solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .rsmfiles-table .column-full .column-1 { width: 40%; padding: 10px; border-right: 1px #333 solid; background-color: #e8f3fd; box-sizing: border-box; word-break: break-all;}
  .page-setting-con .rsmfiles-table .column-full .column-2 { width: 30%; padding: 10px; border-right: 1px #333 solid; box-sizing: border-box;}
  .page-setting-con .rsmfiles-table .column-full .column-3 { width: 30%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .rsmfiles-table .column-full .column-3 a { color: #1867a0; text-decoration: none; border-bottom: 1px #1867a0 dashed;}
  .page-setting-con .rsmfiles-table .column-full .column-3 a:hover { font-weight: 500;}

/*  ul#pages-num { clear: both; width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul#pages-num li { padding: 0; margin: 3px; font-size: 1rem;}
  ul#pages-num li a { padding: 10px 8px; color: #1867a0; text-decoration: none; border: 1px #1867a0 solid; border-radius: 6px; display: block;}
  ul#pages-num li a:hover { background-color: #eee;}
  ul#pages-num li a.sel { background-color: #a4d4f7;}
  ul#pages-num li:first-child a, 
  ul#pages-num li:last-child a { border: 0;}
  ul#pages-num li:first-child a:hover, 
  ul#pages-num li:last-child a:hover { color: #a4d4f7; background-color: transparent;}*/
  .pagination-container {  width: 100%; display: flex; justify-content: center; margin-top: 20px;}
/* 1. 分頁容器：水平居中並設定間距 */
/* 確保分頁元件強制換行並置中 */
ul.pages-num {clear: both; /* 關鍵：強制換行，不跟在浮動元素後面 */ display: flex !important; /* 強制使用 flex 佈局 */ justify-content: center; /* 水平置中 */ list-style: none; padding: 0; margin: 30px 0; /* 與上方表格保持距離 */  width: 100%;/* 確保佔滿整行 */}
/* 讓列表項目水平排列 */
ul.pages-num li { display: inline-block; margin: 0 4px;}
/* 3. 通用按鈕樣式 (數字與文字) */
ul.pages-num li a, 
ul.pages-num li span { display: block; padding: 8px 16px; color: #1867a0; text-decoration: none; border: 1px solid #1867a0; border-radius: 12px; /* 膠囊型圓角 */ transition: all 0.2s ease; line-height: 1.4; font-weight: 500;}
/* 4. 滑鼠移過效果 */
ul.pages-num li a:hover { background-color: #f5f5f5;}
/* 5. 當前頁碼樣式 (Active) 
   PagedListPager 通常會將當前頁放在 li.active span 內 */
ul.pages-num li.active span { background-color: #aed9f8; /* 圖片中的淺藍色 */ color: #1867a0;  border: 1px solid #1867a0;}
/* 6. 特殊處理：上一頁與下一頁 */
/* 去除邊框，並在兩側增加間距 */
ul.pages-num li.PagedList-skipToPrevious,
ul.pages-num li.PagedList-skipToNext { margin: 0 15px; }

ul.pages-num li.PagedList-skipToPrevious a,
ul.pages-num li.PagedList-skipToNext a { border: none; /* 隱藏邊框 */ font-size: 1.1rem;}
/* 加上箭頭符號 (如果程式碼沒給，可以用 CSS 補上) */
ul.pages-num li.PagedList-skipToPrevious a::before {  content: "← "; font-weight: bold;}

ul.pages-num li.PagedList-skipToNext a::after { content: " →"; font-weight: bold;}
/* 7. 停用狀態處理 (例如在第一頁時的「上一頁」) */
ul.pages-num li.disabled span { color: #ccc;  border: none; cursor: not-allowed;}

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

  footer { clear: both; width: 100%; padding: 40px calc(50% - 480px); background-color: #a4d4f7; box-sizing: border-box; display: flex; justify-content: space-between; align-items: flex-start;}

  .footer-moenv-logo { width: 220px;}
  .footer-moenv-logo img { width: 100%; height: auto;}

  .footer-info { color: #000; font-size: 1.1rem; line-height: 1.8em;}


}

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

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

  header { clear: both; width: 100%; padding: 30px 20px 20px 20px; box-sizing: border-box; position: relative;}

  .header-hello { width: 100%; padding: 0 0 35px 0; font-size: 1.1rem; text-align: right;}

  .header-nav-social { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .header-nav-social .site-title { width: 200px;}
  .header-nav-social .site-title a { width: 100%; padding: 3px 10px; color: #fff; font-size: 1.1rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 30px; background-color: #6d6d6d; box-sizing: border-box; display: block;}
  .header-nav-social .site-title a:hover { background-color: #383231;}

  nav#pc { display: none;}
  nav#mo { width: calc(100% - 200px);}
  nav#mo .nav-icon { width: 50px; font-size: 2.4rem; text-align: center; cursor: pointer; float: right;}
  nav#mo .nav-menu-search-social { width: calc(100% - 40px); padding: 40px; box-sizing: border-box; border-radius: 15px; background-color: #ccc; display: none; position: absolute; top: 150px; left: 20px; z-index: 999;}  
  nav#mo .nav-menu-search-social ul.nav-menu { width: 100%; padding: 0; margin: 0 0 40px 0; list-style: none; display: block;}
  nav#mo .nav-menu-search-social ul.nav-menu li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #fff solid;}
  nav#mo .nav-menu-search-social ul.nav-menu li:first-child { border-top: 1px #fff solid;}
  nav#mo .nav-menu-search-social ul.nav-menu li a { width: 100%; padding: 15px 10px; color: #333; font-size: 1.1rem; font-weight: 500; text-align: center; text-decoration: none; display: block; box-sizing: border-box; cursor: pointer;}
  nav#mo .nav-menu-search-social ul.nav-menu li a:active { color: #fff; border-radius: 8px; background-color: #6d6d6d;}
  nav#mo .nav-menu-search-social ul.nav-menu li a.sel { color: #fff; border-radius: 8px; background-color: #6d6d6d;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup { width: 100%; padding: 0; margin: 0 0 10px 0; list-style: none; border-radius: 15px; background-color: rgba(89,87,87,0.6); display: none;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup.w-156 { width: 100%;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup.w-180 { width: 100%;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup li { width: 100%; padding: 0; margin: 0; border: 0;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup li a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; border-radius: 0; background-color: transparent; display: block; box-sizing: border-box;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup li a:active { width: 100%; background-color: rgba(255,255,255,0.2);}

  .search-social-bar { width: 100%; display: flex; justify-content: center; align-items: center;}

  .header-search { display: none;}
  .header-search-mo { width: 150px; height: 36px; padding: 0 10px; background-color: #f6f6f6; border-radius: 30px; border: 1px #c4c6c8 solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .header-search-mo img.search-icon { width: 20px; height: auto;}
  .header-search-mo input[type=search] { width: calc(100% - 20px); height: 100%; padding: 0 0 0 5px; color: #333; font-size: 1.1rem; border: 0; outline: none; background-color: transparent; box-sizing: border-box;}

  .header-social-icons { display: none;}
  .header-social-icons-mo { width: 120px; display: flex; justify-content: flex-end; align-items: center;}
  .header-social-icons-mo a.icon { width: 25px; margin: 0 0 0 15px; display: block;}
  .header-social-icons-mo a.icon img { width: 100%; height: auto;}

  .header-mem-nav { width: 100%; display: none;}
  .header-mem-nav .triangle { display: none;}
  .header-mem-nav ul { clear: both; width: 100%; padding: 0; margin: 20px 0 0 0; list-style: none; border-radius: 15px; background-color: rgba(89,87,87,0.8); display: block;}
  .header-mem-nav ul li { width: 100%; padding: 0; margin: 0;}
  .header-mem-nav ul li a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; display: block;}
  .header-mem-nav ul li a:hover { width: 100%; background-color: rgba(255,255,255,0.2);}


  /************ section #log-in ************/

  section#log-in { clear: both; width: 100%; padding: 100px 40px; box-sizing: border-box;}

  .logo-title { width: 100%; margin: 0 0 30px 0;}
  .logo-title img.login-logo { width: 300px; height: auto; margin: 0 auto 10px auto;}
  .logo-title img.login-title { width: 400px; height: auto; margin: 0 auto;}

  .page-sub-title { clear: both; width: 100%; padding: 0 0 20px 0; color: #1867a0; font-size: 2.4rem; font-weight: 600; text-align: center;}

  .log-in-box { width: 500px; padding: 40px; margin: 0 auto; color: #000; font-size: 1.2rem; border: 0; border-radius: 20px; background-color: #a4d4f7; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .log-in-box .caption { width: 70px; margin: 0 0 20px 0;}
  .log-in-box .column { width: calc(100% - 70px); margin: 0 0 20px 0;}
  .log-in-box .column input[type=text], 
  .log-in-box .column input[type=password] { width: 100%; padding: 10px; color: #000; font-size: 1.2rem; border: 0; background-color: #fff; box-sizing: border-box;}
  .log-in-box .column a.forget-text { color: #333; font-size: 1rem; text-decoration: none; border-bottom: 1px #333 solid;}
  .log-in-box .column a.forget-text:hover { color: #555; border-bottom: 1px #555 dashed;}
  .log-in-box .column-full { width: 100%; margin: 20px 0 0 0; text-align: center;}
  .log-in-box .column-full input[type=submit], 
  .log-in-box .column-full input[type=button] { width: 100px; padding: 10px 0; color: #1867a0; font-size: 1.2rem; border: 0; border-radius: 10px; background-color: #fff; cursor: pointer;}
  .log-in-box .column-full input[type=submit]:hover, 
  .log-in-box .column-full input[type=button]:hover { background-color: #eee;}


  /************ section #forget ************/

  section#forget { clear: both; width: 100%; padding: 0 20px 40px 20px; box-sizing: border-box;}

  .page-forget-contain { width: 100%; padding: 40px 20px; border-radius: 15px; background-color: #fff; box-sizing: border-box;}

  .forget-box { width: 600px; padding: 40px; margin: 0 auto; color: #000; font-size: 1.2rem; border: 0; border-radius: 20px; background-color: #a4d4f7; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .forget-box .caption { width: 120px; margin: 0 0 20px 0; text-align: right;}
  .forget-box .column { width: calc(100% - 120px); margin: 0 0 20px 0;}
  .forget-box .column span.notice { color: #666; font-size: 1rem;}
  .forget-box .column input[type=password] { width: 100%; padding: 10px; color: #000; font-size: 1.2rem; border: 0; background-color: #fff; box-sizing: border-box;}
  .forget-box .column-full { width: 100%; margin: 20px 0 0 0; text-align: center;}
  .forget-box .column-full input[type=submit], 
  .forget-box .column-full input[type=reset], 
  .forget-box .column-full input[type=button] { width: 100px; padding: 10px 0; color: #1867a0; font-size: 1.2rem; border: 0; border-radius: 10px; background-color: #fff; cursor: pointer;}
  .forget-box .column-full input[type=submit]:hover, 
  .forget-box .column-full input[type=reset]:hover, 
  .forget-box .column-full input[type=button]:hover { background-color: #eee;}


  /************ section #index-content ************/

/*  section#index-content { clear: both; width: 100%; padding: 0 20px 40px 20px; box-sizing: border-box;}

  .page-sec-full-box { width: 100%; padding: 20px; border-radius: 15px; background-color: #ebebee; box-sizing: border-box;}

  .page-index-con { width: 100%; padding: 40px; border-radius: 15px; background-color: #fff; box-sizing: border-box;}
*/
section#index-content { clear: both; width: 100%; /* 移除左右 padding 的 calc，改用 margin auto */  padding: 0 0 40px 0;   display: flex;         /* 增加 flex 確保內層置中 */  justify-content: center;}
.page-sec-full-box { /* 與 Header 容器寬度保持一致 */ width: 100%;  max-width: 1400px;  margin: 0 auto;   padding: 20px; border-radius: 15px; background-color: #ebebee;  box-sizing: border-box;}
/* 確保內部白框也能正確延展 */
.page-index-con { width: 100%; padding: 40px; box-sizing: border-box; border-radius: 15px; background-color: #fff; display: flex; flex-wrap: wrap;} 
 
  .view-num-bar { width: 100%; padding: 0 0 40px 0; color: #333; font-size: 1.1rem;}

  .page-index-con .column-box-2x { width: 100%; padding: 0 0 30px 0; box-sizing: border-box;}
  .page-index-con .column-box-2x .table-box-1 { width: 100%;}
  .page-index-con .column-box-2x .table-box-1 .caption-full { width: 100%; color: #fff; font-size: 1.1rem; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-index-con .column-box-2x .table-box-1 .caption-full .caption-1 { width: 65%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-index-con .column-box-2x .table-box-1 .caption-full .caption-2 { width: 35%; padding: 10px; text-align: center; box-sizing: border-box;}
  .page-index-con .column-box-2x .table-box-1 .column-full { width: 100%; color: #000; font-size: 1.1rem; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-index-con .column-box-2x .table-box-1 .column-full:nth-child(even) { background-color: #eee;}
  .page-index-con .column-box-2x .table-box-1 .column-full .column-1 { width: 65%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-index-con .column-box-2x .table-box-1 .column-full .column-2 { width: 35%; padding: 10px; text-align: center; box-sizing: border-box;}
  
  .page-index-con .column-box-2x .sub-title { width: 100%; padding: 0 0 20px 0; color: #000; font-size: 1.1rem; text-align: center;}  


  /************ .breadcrumbs-bar ************/

  .breadcrumbs-bar { clear: both; width: 100%; padding: 20px 0; box-sizing: border-box; color: #000; font-size: 1rem; font-weight: 300; line-height: 1.4em;}
  .breadcrumbs-bar a { color: #000; border-bottom: 1px #000 solid; text-decoration: none;}


  /************ section #page-setting ************/

  section#page-setting { clear: both; width: 100%; padding: 0 20px 40px 20px; box-sizing: border-box;}

  .page-title { width: 100%; padding: 0 0 20px 0; color: #1867a0; font-size: 1.8rem; font-weight: 600; text-align: center;}

  .page-setting-con { width: 100%; padding: 40px 0; box-sizing: border-box; border-radius: 15px; background-color: #fff; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-setting-con .title-bar { width: 100%; padding: 10px 40px; color: #fff; font-size: 1.4rem; background-color: #1867a0; box-sizing: border-box;}
  .page-setting-con .content-box { width: 100%; padding: 40px; font-size: 1.1rem; line-height: 2em; box-sizing: border-box;}
  .page-setting-con .content-box .setting-form-box { width: 100%; max-height: 400px; overflow-y: scroll;}
  .page-setting-con .content-box input[type=checkbox] { width: 20px; height: 20px;}
  .page-setting-con .content-box input[type=radio] { width: 20px; height: 20px;}
  .page-setting-con .save-bt { width: 100%; padding: 40px 40px 0 40px; text-align: right; box-sizing: border-box;}
  .page-setting-con .save-bt input[type=submit], 
  .page-setting-con .save-bt input[type=button] { padding: 10px 20px; color: #fff; font-size: 1.1rem; border: 0; background-color: #1867a0; cursor: pointer;}



  .page-setting-con .add-user-bt { width: 100%; padding: 0 40px 40px 40px; text-align: right; box-sizing: border-box;}
  .page-setting-con .add-user-bt input[type=submit], 
  .page-setting-con .add-user-bt input[type=button] { padding: 10px 20px; color: #fff; font-size: 1.1rem; border: 0; border-radius: 8px; background-color: #1867a0; cursor: pointer;}
  .page-setting-con .manager-list-table { width: 100%; padding: 0 40px; margin: 0 auto; box-sizing: border-box;}
  .page-setting-con .manager-list-table .caption-full { width: 100%; color: #fff; font-size: 1.1rem; text-align: center; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .manager-list-table .caption-full .caption-1 { width: 50%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .manager-list-table .caption-full .caption-2 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .manager-list-table .caption-full .caption-3 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .manager-list-table .column-full { width: 100%; color: #000; font-size: 1.2rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .manager-list-table .column-full .column-1 { width: 50%; padding: 10px; text-align: left; border-right: 1px #ccc solid; box-sizing: border-box; word-break: break-all;}
  .page-setting-con .manager-list-table .column-full .column-2 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .manager-list-table .column-full .column-3 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .manager-list-table .column-full .column-2 a, 
  .page-setting-con .manager-list-table .column-full .column-3 a { color: #1867a0; text-decoration: none;}
  .page-setting-con .manager-list-table .column-full .column-2 a:hover, 
  .page-setting-con .manager-list-table .column-full .column-3 a:hover { color: #2191e1;}



  .page-setting-con .manager-edit-table { width: 100%; padding: 0 40px; margin: 0 auto; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-setting-con .manager-edit-table .caption-full { width: 100%; padding: 10px; color: #fff; font-size: 1.2rem; background-color: #1867a0; box-sizing: border-box;}
  .page-setting-con .manager-edit-table .column-full { width: 100%; padding: 10px; border-bottom: 1px #1867a0 solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-setting-con .manager-edit-table .column-full:nth-child(odd) { background-color: #f1f1f1;}
  .page-setting-con .manager-edit-table .caption { width: 100px; padding: 10px; font-size: 1.2rem; font-weight: 500; box-sizing: border-box; border-right: 1px #1867a0 solid;}
  .page-setting-con .manager-edit-table .column { width: calc(100% - 100px); padding: 10px; font-size: 1.2rem; box-sizing: border-box;}
  .page-setting-con .manager-edit-table .column input[type=radio] { width: 20px; height: 20px;}
  .page-setting-con .manager-edit-table .submit-bt { width: 100%; padding: 20px 10px 0 10px; margin: 20px 0 0 0; text-align: center; box-sizing: border-box;}
  .page-setting-con .manager-edit-table .submit-bt input[type=submit], 
  .page-setting-con .manager-edit-table .submit-bt input[type=button] { padding: 10px 20px; color: #fff; font-size: 1.2rem; border: 0; border-radius: 10px; background-color: #1867a0; cursor: pointer;}
  .page-setting-con .manager-edit-table .submit-bt input[type=submit]:hover, 
  .page-setting-con .manager-edit-table .submit-bt input[type=button]:hover { background-color: #2191e1;}



  .page-setting-con .mem-total-search-mo { display: none;}
  .page-setting-con .mem-total-search { width: 100%; margin: 0 0 40px 0; text-align: center;}
  .page-setting-con .mem-total-search input[type=date] { width: 180px; padding: 10px; margin: 0 10px; color: #1867a0; font-size: 1.1rem; border: 1px #1867a0 solid; box-sizing: border-box;}
  .page-setting-con .mem-total-search input[type=button] { width: 100px; padding: 10px; margin: 0 10px; color: #fff; font-size: 1.1rem; border: 1px #1867a0 solid; border-radius: 10px; background-color: #1867a0; box-sizing: border-box; cursor: pointer;}
  .page-setting-con .mem-total-search input[type=button]:hover { background-color: #2191e1;}
  .page-setting-con .mem-total-table { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box;}
  .page-setting-con .mem-total-table .caption-full { width: 100%; color: #fff; font-size: 1.1rem; text-align: center; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .mem-total-table .caption-full .caption-1 { width: 40%; padding: 10px; border-right: 1px #eee solid; box-sizing: border-box;}
  .page-setting-con .mem-total-table .caption-full .caption-2 { width: 30%; padding: 10px; border-right: 1px #eee solid; box-sizing: border-box;}
  .page-setting-con .mem-total-table .caption-full .caption-3 { width: 30%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .mem-total-table .column-full { width: 100%; color: #000; font-size: 1.1rem; text-align: center; border-bottom: 1px #333 solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .mem-total-table .column-full .column-1 { width: 40%; padding: 10px; border-right: 1px #333 solid; box-sizing: border-box; background-color: #e8f3fd; word-break: break-all;}
  .page-setting-con .mem-total-table .column-full .column-2 { width: 30%; padding: 10px; border-right: 1px #333 solid; box-sizing: border-box;}
  .page-setting-con .mem-total-table .column-full .column-3 { width: 30%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .mem-total-table .column-full .column-3 a { color: #1867a0; text-decoration: none; border-bottom: 1px #1867a0 dashed;}
  .page-setting-con .mem-total-table .column-full .column-3 a:hover { font-weight: 500;}

  .page-setting-con .UploadData-list-table { width: 80%; padding: 0 40px; margin: 0 auto; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .caption-full { width: 100%; color: #fff; font-size: 1.1rem; text-align: center; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .UploadData-list-table .caption-full .caption-1 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .caption-full .caption-2 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .caption-full .caption-3 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .caption-full .caption-4 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .column-full { width: 100%; color: #000; font-size: 1.2rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .UploadData-list-table .column-full .column-1 { width: 25%; padding: 10px; text-align: left; border-right: 1px #ccc solid; box-sizing: border-box; word-break: break-all;}
  .page-setting-con .UploadData-list-table .column-full .column-2 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .column-full .column-3 { width: 25%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .column-full .column-4 { width: 25%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .UploadData-list-table .column-full .column-2 a, 
  .page-setting-con .UploadData-list-table .column-full .column-3 a { color: #1867a0; text-decoration: none;}
  .page-setting-con .UploadData-list-table .column-full .column-2 a:hover, 
  .page-setting-con .UploadData-list-table .column-full .column-3 a:hover { color: #2191e1;}
  /* 特定條件下的樣式：紅字與淡紅底色 */
  .page-setting-con .UploadData-list-table .column-full.is-invalid { background-color: #fff0f0; /* 淡紅色底色 */ color: #d93025;            /* 深紅色文字，確保閱讀清晰 */ border-bottom: 1px #f5c2c7 solid; /* 調整邊框顏色以符合色系 */}
  /* 讓該行內的文字也繼承紅色，並覆蓋原本的文字顏色 */
  .page-setting-con .UploadData-list-table .column-full.is-invalid .column-1,
  .page-setting-con .UploadData-list-table .column-full.is-invalid .column-2,
  .page-setting-con .UploadData-list-table .column-full.is-invalid .column-3,
  .page-setting-con .UploadData-list-table .column-full.is-invalid .column-4 { color: #d93025; }
  /* 若該行內有超連結，也一併調整顏色以免突兀 */
  .page-setting-con .UploadData-list-table .column-full.is-invalid a {color: #b02a37; text-decoration: underline; /* 增加底線區分 */}
  .page-setting-con .UploadData-list-table .column-full.is-invalid a:hover { color: #dc3545;}

    .page-setting-con .peopledownloads-table { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box;}
  .page-setting-con .peopledownloads-table .caption-full { width: 100%; color: #fff; font-size: 1.1rem; text-align: center; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .peopledownloads-table .caption-full .caption-1 { width: 50%; padding: 10px; border-right: 1px #eee solid; box-sizing: border-box;}
  .page-setting-con .peopledownloads-table .caption-full .caption-2 { width: 50%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .peopledownloads-table .column-full { width: 100%; color: #000; font-size: 1.1rem; text-align: center; border-bottom: 1px #333 solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .peopledownloads-table .column-full .column-1 { width: 50%; padding: 10px; border-right: 1px #333 solid; background-color: #e8f3fd; box-sizing: border-box; word-break: break-all;}
  .page-setting-con .peopledownloads-table .column-full .column-2 { width: 50%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .peopledownloads-table .column-full .column-2 a { color: #1867a0; text-decoration: none; border-bottom: 1px #1867a0 dashed;}
  .page-setting-con .peopledownloads-table .column-full .column-2 a:hover { font-weight: 500;}

  /*.page-setting-con .rsmfiles-search-mo { display: none;}
  .page-setting-con .rsmfiles-search { width: 100%; margin: 0 0 40px 0; text-align: center;}
  .page-setting-con .rsmfiles-search input[type=date] { width: 180px; padding: 10px; margin: 0 10px; color: #1867a0; font-size: 1.1rem; border: 1px #1867a0 solid; box-sizing: border-box;}
  .page-setting-con .rsmfiles-search input[type=button] { width: 100px; padding: 10px; margin: 0 10px; color: #fff; font-size: 1.1rem; border: 1px #1867a0 solid; border-radius: 10px; background-color: #1867a0; box-sizing: border-box; cursor: pointer;}
  .page-setting-con .rsmfiles-search input[type=button]:hover { background-color: #2191e1;}
  .page-setting-con .rsmfiles-search select,.rsmfiles-search-select { width: 180px; padding: 10px; margin: 0 10px; color: #1867a0; font-size: 1.1rem; border: 1px #1867a0 solid; background-color: #fff; box-sizing: border-box; vertical-align: middle;*/ /* 確保跟按鈕對齊 */
  /* 加入自定義箭頭圖示 */
  /*appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231867a0'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 20px;}
  .page-setting-con .rsmfiles-table { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box;}*/
  /* 父容器設定 */
  .page-setting-con .rsmfiles-search {  width: 100%;  margin: 0 0 40px 0;  display: flex;          /* 使用 Flexbox */ flex-wrap: nowrap;      /* 強制不換行 */ justify-content: center; /* 居中對齊 (若要靠左改 flex-start) */ align-items: center;    /* 垂直置中 */ gap: 8px;               /* 元件之間的間距 */}
  /* 下拉選單與日期選擇器 */
  .page-setting-con .rsmfiles-search select,
  .page-setting-con .rsmfiles-search input[type=date],
  .rsmfiles-search-select {  flex: 1;                /* 讓選單自動分配剩餘空間 */ min-width: 120px;       /* 設定最小寬度防止擠壓變形 */  max-width: 180px;       /* 設定最大寬度防止太寬 */ padding: 8px 5px; color: #1867a0; font-size: 1rem; border: 1px #1867a0 solid; background-color: #fff; box-sizing: border-box;}
  /* 搜尋按鈕 */
  .page-setting-con .rsmfiles-search input[type=button] { flex-shrink: 0;         /* 防止按鈕被擠壓變小 */  width: 90px;  padding: 8px; color: #fff; font-size: 1rem; border: 1px #1867a0 solid; border-radius: 8px;  background-color: #1867a0; cursor: pointer; transition: 0.3s;}
  .page-setting-con .rsmfiles-search input[type=button]:hover {  background-color: #2191e1;}

  .page-setting-con .rsmfiles-table .caption-full { width: 100%; color: #fff; font-size: 1.1rem; text-align: center; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .rsmfiles-table .caption-full .caption-1 { width: 40%; padding: 10px; border-right: 1px #eee solid; box-sizing: border-box;}
  .page-setting-con .rsmfiles-table .caption-full .caption-2 { width: 30%; padding: 10px; border-right: 1px #eee solid; box-sizing: border-box;}
  .page-setting-con .rsmfiles-table .caption-full .caption-3 { width: 30%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .rsmfiles-table .column-full { width: 100%; color: #000; font-size: 1.1rem; text-align: center; border-bottom: 1px #333 solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .rsmfiles-table .column-full .column-1 { width: 40%; padding: 10px; border-right: 1px #333 solid; background-color: #e8f3fd; box-sizing: border-box; word-break: break-all;}
  .page-setting-con .rsmfiles-table .column-full .column-2 { width: 30%; padding: 10px; border-right: 1px #333 solid; box-sizing: border-box;}
  .page-setting-con .rsmfiles-table .column-full .column-3 { width: 30%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .rsmfiles-table .column-full .column-3 a { color: #1867a0; text-decoration: none; border-bottom: 1px #1867a0 dashed;}
  .page-setting-con .rsmfiles-table .column-full .column-3 a:hover { font-weight: 500;}

/*  ul#pages-num { clear: both; width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul#pages-num li { padding: 0; margin: 3px; font-size: 1rem;}
  ul#pages-num li a { padding: 10px 8px; color: #1867a0; text-decoration: none; border: 1px #1867a0 solid; border-radius: 6px; display: block;}
  ul#pages-num li a:hover { background-color: #eee;}
  ul#pages-num li a.sel { background-color: #a4d4f7;}
  ul#pages-num li:first-child a, 
  ul#pages-num li:last-child a { border: 0;}
  ul#pages-num li:first-child a:hover, 
  ul#pages-num li:last-child a:hover { color: #a4d4f7; background-color: transparent;}*/
.pagination-container {  width: 100%; display: flex; justify-content: center; margin-top: 20px;}
/* 1. 分頁容器：水平居中並設定間距 */
/* 確保分頁元件強制換行並置中 */
ul.pages-num {clear: both; /* 關鍵：強制換行，不跟在浮動元素後面 */ display: flex !important; /* 強制使用 flex 佈局 */ justify-content: center; /* 水平置中 */ list-style: none; padding: 0; margin: 30px 0; /* 與上方表格保持距離 */  width: 100%;/* 確保佔滿整行 */}
/* 讓列表項目水平排列 */
ul.pages-num li { display: inline-block; margin: 0 4px;}
/* 3. 通用按鈕樣式 (數字與文字) */
ul.pages-num li a, 
ul.pages-num li span { display: block; padding: 8px 16px; color: #1867a0; text-decoration: none; border: 1px solid #1867a0; border-radius: 12px; /* 膠囊型圓角 */ transition: all 0.2s ease; line-height: 1.4; font-weight: 500;}
/* 4. 滑鼠移過效果 */
ul.pages-num li a:hover { background-color: #f5f5f5;}
/* 5. 當前頁碼樣式 (Active) 
   PagedListPager 通常會將當前頁放在 li.active span 內 */
ul.pages-num li.active span { background-color: #aed9f8; /* 圖片中的淺藍色 */ color: #1867a0;  border: 1px solid #1867a0;}
/* 6. 特殊處理：上一頁與下一頁 */
/* 去除邊框，並在兩側增加間距 */
ul.pages-num li.PagedList-skipToPrevious,
ul.pages-num li.PagedList-skipToNext { margin: 0 15px; }

ul.pages-num li.PagedList-skipToPrevious a,
ul.pages-num li.PagedList-skipToNext a { border: none; /* 隱藏邊框 */ font-size: 1.1rem;}
/* 加上箭頭符號 (如果程式碼沒給，可以用 CSS 補上) */
ul.pages-num li.PagedList-skipToPrevious a::before {  content: "← "; font-weight: bold;}

ul.pages-num li.PagedList-skipToNext a::after { content: " →"; font-weight: bold;}
/* 7. 停用狀態處理 (例如在第一頁時的「上一頁」) */
ul.pages-num li.disabled span { color: #ccc;  border: none; cursor: not-allowed;}

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

  footer { clear: both; width: 100%; padding: 40px 40px; background-color: #a4d4f7; box-sizing: border-box; display: flex; justify-content: space-between; align-items: flex-start;}

  .footer-moenv-logo { width: 200px;}
  .footer-moenv-logo img { width: 100%; height: auto;}

  .footer-info { color: #000; font-size: 1.1rem; line-height: 1.8em;}


}

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

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

  header { clear: both; width: 100%; padding: 30px 10px 20px 10px; box-sizing: border-box;}

  .header-hello { width: 100%; padding: 0 0 35px 0; font-size: 1.1rem; text-align: right;}

  .header-nav-social { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .header-nav-social .site-title { width: 200px;}
  .header-nav-social .site-title a { width: 100%; padding: 3px 10px; color: #fff; font-size: 1.1rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 30px; background-color: #6d6d6d; box-sizing: border-box; display: block;}
  .header-nav-social .site-title a:hover { background-color: #383231;}

  nav#pc { display: none;}
  nav#mo { width: calc(100% - 200px);}
  nav#mo .nav-icon { width: 50px; font-size: 2.4rem; text-align: center; cursor: pointer; float: right;}
  nav#mo .nav-menu-search-social { width: calc(100% - 20px); padding: 40px 10px; box-sizing: border-box; border-radius: 15px; background-color: #ccc; display: none; position: absolute; top: 150px; left: 10px; z-index: 999;}  
  nav#mo .nav-menu-search-social ul.nav-menu { width: 100%; padding: 0; margin: 0 0 40px 0; list-style: none; display: block;}
  nav#mo .nav-menu-search-social ul.nav-menu li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #fff solid;}
  nav#mo .nav-menu-search-social ul.nav-menu li:first-child { border-top: 1px #fff solid;}
  nav#mo .nav-menu-search-social ul.nav-menu li a { width: 100%; padding: 15px 10px; color: #333; font-size: 1.1rem; font-weight: 500; text-align: center; text-decoration: none; display: block; box-sizing: border-box; cursor: pointer;}
  nav#mo .nav-menu-search-social ul.nav-menu li a:active { color: #fff; border-radius: 8px; background-color: #6d6d6d;}
  nav#mo .nav-menu-search-social ul.nav-menu li a.sel { color: #fff; border-radius: 8px; background-color: #6d6d6d;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup { width: 100%; padding: 0; margin: 0 0 10px 0; list-style: none; border-radius: 15px; background-color: rgba(89,87,87,0.6); display: none;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup.w-156 { width: 100%;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup.w-180 { width: 100%;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup li { width: 100%; padding: 0; margin: 0; border: 0;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup li a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; border-radius: 0; background-color: transparent; display: block; box-sizing: border-box;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup li a:active { width: 100%; background-color: rgba(255,255,255,0.2);}

  .search-social-bar { width: 100%; display: flex; justify-content: center; align-items: center;}

  .header-search { display: none;}
  .header-search-mo { width: 150px; height: 36px; padding: 0 10px; background-color: #f6f6f6; border-radius: 30px; border: 1px #c4c6c8 solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .header-search-mo img.search-icon { width: 20px; height: auto;}
  .header-search-mo input[type=search] { width: calc(100% - 20px); height: 100%; padding: 0 0 0 5px; color: #333; font-size: 1.1rem; border: 0; outline: none; background-color: transparent; box-sizing: border-box;}

  .header-social-icons { display: none;}
  .header-social-icons-mo { width: 120px; display: flex; justify-content: flex-end; align-items: center;}
  .header-social-icons-mo a.icon { width: 25px; margin: 0 0 0 15px; display: block;}
  .header-social-icons-mo a.icon img { width: 100%; height: auto;}

  .header-mem-nav { width: 100%; display: none;}
  .header-mem-nav .triangle { display: none;}
  .header-mem-nav ul { clear: both; width: 100%; padding: 0; margin: 20px 0 0 0; list-style: none; border-radius: 15px; background-color: rgba(89,87,87,0.8); display: block;}
  .header-mem-nav ul li { width: 100%; padding: 0; margin: 0;}
  .header-mem-nav ul li a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; display: block;}
  .header-mem-nav ul li a:hover { width: 100%; background-color: rgba(255,255,255,0.2);}


  /************ section #log-in ************/

  section#log-in { clear: both; width: 100%; padding: 100px 20px; box-sizing: border-box;}

  .logo-title { width: 100%; margin: 0 0 30px 0;}
  .logo-title img.login-logo { width: 300px; height: auto; margin: 0 auto 10px auto;}
  .logo-title img.login-title { max-width: 100%; width: 400px; height: auto; margin: 0 auto;}

  .page-sub-title { clear: both; width: 100%; padding: 0 0 20px 0; color: #1867a0; font-size: 2.4rem; font-weight: 600; text-align: center;}

  .log-in-box { width: 100%; padding: 40px; margin: 0 auto; color: #000; font-size: 1.2rem; border: 0; border-radius: 20px; background-color: #a4d4f7; box-sizing: border-box;}
  .log-in-box .caption { width: 100%; margin: 0 0 10px 0;}
  .log-in-box .column { width: 100%; margin: 0 0 20px 0; text-align: center;}
  .log-in-box .column input[type=text], 
  .log-in-box .column input[type=password] { width: 100%; padding: 10px; color: #000; font-size: 1.2rem; border: 0; background-color: #fff; box-sizing: border-box;}
  .log-in-box .column a.forget-text { color: #333; font-size: 1rem; text-decoration: none; border-bottom: 1px #333 solid;}
  .log-in-box .column a.forget-text:active { color: #555; border-bottom: 1px #555 dashed;}
  .log-in-box .column-full { width: 100%; margin: 40px 0 0 0; text-align: center;}
  .log-in-box .column-full input[type=submit], 
  .log-in-box .column-full input[type=button] { width: 100px; padding: 10px 0; color: #1867a0; font-size: 1.2rem; border: 0; border-radius: 10px; background-color: #fff; cursor: pointer;}
  .log-in-box .column-full input[type=submit]:active, 
  .log-in-box .column-full input[type=button]:active { background-color: #eee;}


  /************ section #forget ************/

  section#forget { clear: both; width: 100%; padding: 0 10px 40px 10px; box-sizing: border-box;}

  .page-forget-contain { width: 100%; padding: 40px 10px; border-radius: 15px; background-color: #fff; box-sizing: border-box;}

  .forget-box { width: 100%; padding: 40px; margin: 0 auto; color: #000; font-size: 1.2rem; border: 0; border-radius: 20px; background-color: #a4d4f7; box-sizing: border-box;}
  .forget-box .caption { width: 100%; margin: 0 0 10px 0;}
  .forget-box .column { width: 100%; margin: 0 0 20px 0;}
  .forget-box .column span.notice { color: #666; font-size: 1rem;}
  .forget-box .column input[type=password] { width: 100%; padding: 10px; color: #000; font-size: 1.2rem; border: 0; background-color: #fff; box-sizing: border-box;}
  .forget-box .column-full { width: 100%; margin: 40px 0 0 0; text-align: center;}
  .forget-box .column-full input[type=submit], 
  .forget-box .column-full input[type=reset], 
  .forget-box .column-full input[type=button] { width: 100px; padding: 10px 0; color: #1867a0; font-size: 1.2rem; border: 0; border-radius: 10px; background-color: #fff; cursor: pointer;}
  .forget-box .column-full input[type=submit]:active, 
  .forget-box .column-full input[type=reset]:active, 
  .forget-box .column-full input[type=button]:active { background-color: #eee;}


  /************ section #index-content ************/

/*  section#index-content { clear: both; width: 100%; padding: 0 10px 40px 10px; box-sizing: border-box;}

  .page-sec-full-box { width: 100%; padding: 20px 10px; border-radius: 15px; background-color: #ebebee; box-sizing: border-box;}

  .page-index-con { width: 100%; padding: 40px 10px; border-radius: 15px; background-color: #fff; box-sizing: border-box;}
*/
section#index-content { clear: both; width: 100%; /* 移除左右 padding 的 calc，改用 margin auto */  padding: 0 0 40px 0;   display: flex;         /* 增加 flex 確保內層置中 */  justify-content: center;}
.page-sec-full-box { /* 與 Header 容器寬度保持一致 */ width: 100%;  max-width: 1400px;  margin: 0 auto;   padding: 20px; border-radius: 15px; background-color: #ebebee;  box-sizing: border-box;}
/* 確保內部白框也能正確延展 */
.page-index-con { width: 100%; padding: 40px; box-sizing: border-box; border-radius: 15px; background-color: #fff; display: flex; flex-wrap: wrap;} 
 
  .view-num-bar { width: 100%; padding: 0 0 40px 0; color: #333; font-size: 1.1rem;}

  .page-index-con .column-box-2x { width: 100%; padding: 0 0 30px 0; box-sizing: border-box;}
  .page-index-con .column-box-2x .table-box-1 { width: 100%;}
  .page-index-con .column-box-2x .table-box-1 .caption-full { width: 100%; color: #fff; font-size: 1rem; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-index-con .column-box-2x .table-box-1 .caption-full .caption-1 { width: 70%; padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-index-con .column-box-2x .table-box-1 .caption-full .caption-2 { width: 30%; padding: 10px 5px; text-align: center; box-sizing: border-box;}
  .page-index-con .column-box-2x .table-box-1 .column-full { width: 100%; color: #000; font-size: 1rem; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-index-con .column-box-2x .table-box-1 .column-full:nth-child(even) { background-color: #eee;}
  .page-index-con .column-box-2x .table-box-1 .column-full .column-1 { width: 70%; padding: 10px 5px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-index-con .column-box-2x .table-box-1 .column-full .column-2 { width: 30%; padding: 10px 5px; text-align: center; box-sizing: border-box;}
  
  .page-index-con .column-box-2x .sub-title { width: 100%; padding: 0 0 20px 0; color: #000; font-size: 1.1rem; text-align: center;} 


  /************ .breadcrumbs-bar ************/

  .breadcrumbs-bar { clear: both; width: 100%; padding: 20px 0; box-sizing: border-box; color: #000; font-size: 1rem; font-weight: 300; line-height: 1.4em;}
  .breadcrumbs-bar a { color: #000; border-bottom: 1px #000 solid; text-decoration: none;}


  /************ section #page-setting ************/

  section#page-setting { clear: both; width: 100%; padding: 0 10px 40px 10px; box-sizing: border-box;}

  .page-title { width: 100%; padding: 0 0 20px 0; color: #1867a0; font-size: 1.8rem; font-weight: 600; text-align: center;}

  .page-setting-con { width: 100%; padding: 40px 0; box-sizing: border-box; border-radius: 15px; background-color: #fff; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-setting-con .title-bar { width: 100%; padding: 10px 20px; color: #fff; font-size: 1.4rem; background-color: #1867a0; box-sizing: border-box;}
  .page-setting-con .content-box { width: 100%; padding: 40px 20px; font-size: 1.1rem; line-height: 2em; box-sizing: border-box;}
  .page-setting-con .content-box .setting-form-box { width: 100%; max-height: 400px; overflow-y: scroll;}
  .page-setting-con .content-box input[type=checkbox] { width: 20px; height: 20px;}
  .page-setting-con .content-box input[type=radio] { width: 20px; height: 20px;}
  .page-setting-con .save-bt { width: 100%; padding: 40px 20px 0 20px; text-align: right; box-sizing: border-box;}
  .page-setting-con .save-bt input[type=submit], 
  .page-setting-con .save-bt input[type=button] { padding: 10px 20px; color: #fff; font-size: 1.1rem; border: 0; background-color: #1867a0; cursor: pointer;}



  .page-setting-con .add-user-bt { width: 100%; padding: 0 20px 40px 20px; text-align: right; box-sizing: border-box;}
  .page-setting-con .add-user-bt input[type=submit], 
  .page-setting-con .add-user-bt input[type=button] { padding: 10px 20px; color: #fff; font-size: 1.1rem; border: 0; border-radius: 8px; background-color: #1867a0; cursor: pointer;}
  .page-setting-con .manager-list-table { width: 100%; padding: 0 20px; margin: 0 auto; box-sizing: border-box;}
  .page-setting-con .manager-list-table .caption-full { width: 100%; color: #fff; font-size: 1rem; text-align: center; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .manager-list-table .caption-full .caption-1 { width: 44%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .manager-list-table .caption-full .caption-2 { width: 26%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .manager-list-table .caption-full .caption-3 { width: 30%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .manager-list-table .column-full { width: 100%; color: #000; font-size: 1rem; text-align: center; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .manager-list-table .column-full .column-1 { width: 44%; padding: 10px; text-align: left; border-right: 1px #ccc solid; box-sizing: border-box; word-break: break-all;}
  .page-setting-con .manager-list-table .column-full .column-2 { width: 26%; padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-setting-con .manager-list-table .column-full .column-3 { width: 30%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .manager-list-table .column-full .column-2 a, 
  .page-setting-con .manager-list-table .column-full .column-3 a { color: #1867a0; text-decoration: none;}
  .page-setting-con .manager-list-table .column-full .column-2 a:hover, 
  .page-setting-con .manager-list-table .column-full .column-3 a:hover { color: #2191e1;}



  .page-setting-con .manager-edit-table { width: 100%; padding: 0 20px; margin: 0 auto; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-setting-con .manager-edit-table .caption-full { width: 100%; padding: 10px; color: #fff; font-size: 1.2rem; background-color: #1867a0; box-sizing: border-box;}
  .page-setting-con .manager-edit-table .column-full { width: 100%; padding: 10px; border-bottom: 1px #1867a0 solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-setting-con .manager-edit-table .column-full:nth-child(odd) { background-color: #f1f1f1;}
  .page-setting-con .manager-edit-table .caption { width: 80px; padding: 10px; font-size: 0.9rem; font-weight: 500; box-sizing: border-box; border-right: 1px #1867a0 solid;}
  .page-setting-con .manager-edit-table .column { width: calc(100% - 80px); padding: 10px; font-size: 0.9rem; box-sizing: border-box;}
  .page-setting-con .manager-edit-table .column input[type=radio] { width: 20px; height: 20px;}
  .page-setting-con .manager-edit-table .submit-bt { width: 100%; padding: 20px 10px 0 10px; margin: 20px 0 0 0; text-align: center; box-sizing: border-box;}
  .page-setting-con .manager-edit-table .submit-bt input[type=submit], 
  .page-setting-con .manager-edit-table .submit-bt input[type=button] { padding: 10px 20px; color: #fff; font-size: 1.2rem; border: 0; border-radius: 10px; background-color: #1867a0; cursor: pointer;}
  .page-setting-con .manager-edit-table .submit-bt input[type=submit]:hover, 
  .page-setting-con .manager-edit-table .submit-bt input[type=button]:hover { background-color: #2191e1;}



  .page-setting-con .mem-total-search { display: none;}
  .page-setting-con .mem-total-search-mo { width: 100%; margin: 0 0 40px 0; text-align: center;}
  .page-setting-con .mem-total-search-mo input[type=date] { width: 180px; padding: 10px; margin: 0 10px; color: #1867a0; font-size: 1rem; border: 1px #1867a0 solid; box-sizing: border-box;}
  .page-setting-con .mem-total-search-mo input[type=button] { width: 100px; padding: 10px; margin: 20px 10px 0 10px; color: #fff; font-size: 1rem; border: 1px #1867a0 solid; border-radius: 10px; background-color: #1867a0; box-sizing: border-box; cursor: pointer;}
  .page-setting-con .mem-total-search-mo input[type=button]:hover { background-color: #2191e1;}
  .page-setting-con .mem-total-table { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box;}
  .page-setting-con .mem-total-table .caption-full { width: 100%; color: #fff; font-size: 1rem; text-align: center; background-color: #1867a0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .mem-total-table .caption-full .caption-1 { width: 40%; padding: 10px; border-right: 1px #eee solid; box-sizing: border-box;}
  .page-setting-con .mem-total-table .caption-full .caption-2 { width: 30%; padding: 10px; border-right: 1px #eee solid; box-sizing: border-box;}
  .page-setting-con .mem-total-table .caption-full .caption-3 { width: 30%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .mem-total-table .column-full { width: 100%; color: #000; font-size: 1rem; text-align: center; border-bottom: 1px #333 solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-setting-con .mem-total-table .column-full .column-1 { width: 40%; padding: 10px; border-right: 1px #333 solid; box-sizing: border-box; background-color: #e8f3fd; word-break: break-all;}
  .page-setting-con .mem-total-table .column-full .column-2 { width: 30%; padding: 10px; border-right: 1px #333 solid; box-sizing: border-box;}
  .page-setting-con .mem-total-table .column-full .column-3 { width: 30%; padding: 10px; box-sizing: border-box;}
  .page-setting-con .mem-total-table .column-full .column-3 a { color: #1867a0; text-decoration: none; border-bottom: 1px #1867a0 dashed;}
  .page-setting-con .mem-total-table .column-full .column-3 a:active { font-weight: 500;}



/*  ul#pages-num { clear: both; width: 100%; padding: 0 20px; margin: 60px 0 0 0; box-sizing: border-box; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul#pages-num li { padding: 0; margin: 3px; font-size: 1rem;}
  ul#pages-num li a { padding: 10px 8px; color: #1867a0; text-decoration: none; border: 1px #1867a0 solid; border-radius: 6px; display: block;}
  ul#pages-num li a:hover { background-color: #eee;}
  ul#pages-num li a.sel { background-color: #a4d4f7;}
  ul#pages-num li:first-child a, 
  ul#pages-num li:last-child a { border: 0;}
  ul#pages-num li:first-child a:hover, 
  ul#pages-num li:last-child a:hover { color: #a4d4f7; background-color: transparent;}*/
.pagination-container {  width: 100%; display: flex; justify-content: center; margin-top: 20px;}
/* 1. 分頁容器：水平居中並設定間距 */
/* 確保分頁元件強制換行並置中 */
ul.pages-num {clear: both; /* 關鍵：強制換行，不跟在浮動元素後面 */ display: flex !important; /* 強制使用 flex 佈局 */ justify-content: center; /* 水平置中 */ list-style: none; padding: 0; margin: 30px 0; /* 與上方表格保持距離 */  width: 100%;/* 確保佔滿整行 */}
/* 讓列表項目水平排列 */
ul.pages-num li { display: inline-block; margin: 0 4px;}
/* 3. 通用按鈕樣式 (數字與文字) */
ul.pages-num li a, 
ul.pages-num li span { display: block; padding: 8px 16px; color: #1867a0; text-decoration: none; border: 1px solid #1867a0; border-radius: 12px; /* 膠囊型圓角 */ transition: all 0.2s ease; line-height: 1.4; font-weight: 500;}
/* 4. 滑鼠移過效果 */
ul.pages-num li a:hover { background-color: #f5f5f5;}
/* 5. 當前頁碼樣式 (Active) 
   PagedListPager 通常會將當前頁放在 li.active span 內 */
ul.pages-num li.active span { background-color: #aed9f8; /* 圖片中的淺藍色 */ color: #1867a0;  border: 1px solid #1867a0;}
/* 6. 特殊處理：上一頁與下一頁 */
/* 去除邊框，並在兩側增加間距 */
ul.pages-num li.PagedList-skipToPrevious,
ul.pages-num li.PagedList-skipToNext { margin: 0 15px; }

ul.pages-num li.PagedList-skipToPrevious a,
ul.pages-num li.PagedList-skipToNext a { border: none; /* 隱藏邊框 */ font-size: 1.1rem;}
/* 加上箭頭符號 (如果程式碼沒給，可以用 CSS 補上) */
ul.pages-num li.PagedList-skipToPrevious a::before {  content: "← "; font-weight: bold;}

ul.pages-num li.PagedList-skipToNext a::after { content: " →"; font-weight: bold;}
/* 7. 停用狀態處理 (例如在第一頁時的「上一頁」) */
ul.pages-num li.disabled span { color: #ccc;  border: none; cursor: not-allowed;}

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

  footer { clear: both; width: 100%; padding: 40px 20px; background-color: #a4d4f7; box-sizing: border-box; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}

  .footer-moenv-logo { width: 100%; margin: 0 0 30px 0;}
  .footer-moenv-logo img { width: 200px; height: auto; margin: 0 auto;}

  .footer-info { color: #000; font-size: 1rem; line-height: 1.8em;}
  

}