@charset "UTF-8";

:root {
  --star: #de2f2f;
  --color-note: #de2f2f;
  /* Color styles */
  --primary-color1: #73c12d;
  --primary-color2: #ff6f02;
  --primary-color2-1: #fff1e5;
  --primary-color2-2: #ffe2cc;
  --primary-color2-3: #cf5a00;
  --primary-color3: #00b7ff;
  --primary-color4: #ff5c95;
  --primary-color5: #805fdb;
  --primary-color6: #40A734;
  --primary-color7: #0077E5;
  --primary-color8: #ffcc00;
  --second-color1: #0077e5;
  --second-color2: #254bd3;
  --second-color3: #208900;

  --theme1: #73c12d;
  --theme2: #ff6f02;
  --theme3: #00b7ff;
  --theme4: #ff5c95;
  --theme5: #805fdb;
  --theme6: #40A734;
  --theme7: #0077E5;
  --theme8: #ffcc00;

  --tab-color1: rgba(246, 0, 41, 1);
  --tab-color2: rgba(5, 170, 5, 1);
  --tab-color3: rgba(0, 79, 169, 1);
  --tab-color4: rgba(187, 34, 154, 1);
  --tab-color5: rgba(255, 97, 12, 1);
  --tab-color6: rgba(96, 89, 201, 1);
  /* shadow styles */
  --box-shadow: 0px 1.2px 4.5px rgba(0, 0, 0, 0.3);
  --arr-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);
  --book-shadow: 3px -2px 8px rgba(0, 0, 0, 0.12);
  --subnav-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
  --color-000000: #000000;
  --color-222222: #222222;
  --color-242424: #242424;
  --color-333333: #333333;
  --color-484848: #484848;
  --color-555555: #555555;
  --color-666666: #666666;
  --color-888888: #888888;
  --color-999999: #999999;
  --color-aaaaaa: #aaaaaa;
  --color-bbbbbb: #bbbbbb;
  --color-cccccc: #cccccc;
  --color-d4d4d4: #d4d4d4;
  --color-dddddd: #dddddd;
  --color-e4e4e4: #e4e4e4;
  --color-eeeeee: #eeeeee;
  --color-f2f2f2: #f2f2f2;
  --color-f4f4f4: #f4f4f4;
  --color-f6f6f6: #f6f6f6;
  --color-ffffff: #ffffff;
  --fontsize-48: 3rem;
  --fontsize-36: 2.25rem;
  --fontsize-32: 2rem;
  --fontsize-30: 1.875rem;
  --fontsize-28: 1.75rem;
  --fontsize-26: 1.6rem;
  --fontsize-24: 1.5rem;
  --fontsize-22: 1.4rem;
  --fontsize-21: 1.3rem;
  --fontsize-20: 1.25rem;
  --fontsize-19: 1.2rem;
  --fontsize-18: 1.125rem;
  --fontsize-17: 1.05rem;
  --fontsize-16: 1rem;
  --fontsize-15: 0.95rem;
  --fontsize-14: 0.875rem;
  --fontsize-13: 0.8rem;
  --fontsize-12: 0.75rem;
  --rounded-rectangle: 150px;
  --border-radius-full: 9999px;
  --border-radius-lg: 20px;
  --border-radius-md: 16px;
  --border-radius-sm: 9px;
  --border-radius-xs: 5px;
  --border-radius-xxs: 3px;
  --border-radius-tab: 10px 10px 0 0;
  --border-color: #c7d3d2;
  --tableColor01-1: #d8f3ff;
  --tableColor01-2: #b9e7fd;
}





.header {
  box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.25);
  background: #fff;
  width: 100%;
  position: fixed;
  align-items: center;
  z-index: 10;
  height: 88px;
  display: flex;
}

.header .inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 30px;
}

.header .logo-box {
  font-size: 0;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 15px;
}

.header .logo-box .logo {
  display: block;
  width: 130px;
  height: 58px;
  background: url(../images/logo.svg) 0 0 no-repeat;
  background-size: contain;
}

.header .logo-box h1 {
  padding: 0;
  margin: 0;
}

.header .logo-box .beehive-img {
  width: fit-content;
}

.header .logo-box .beehive-img img {
  display: block;
  width: 64px;
}

.header .main-nav {
  display: flex;
  align-items: center;
  line-height: 1.25;
}

.header .main-nav .box {
  position: relative;
  padding: 0 6px 0 7px;
  /*font-size: clamp(0.95rem, -0.9263rem + 2.5641vw, 1.125rem);*/
  font-size: clamp(0.8rem, -0.75rem + 2.5vw, 1.25rem);
  /* font-size: clamp(0.5rem, -0.9263rem + 2.5641vw, 1.125rem); */
}

.header .main-nav .box>a {
  display: block;
  text-align: center;
  font-weight: 500;
  font-family: "Noto Sans TC";
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--neutral-text-1);
}

.header .main-nav .box>a::after {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 20px;
  background-color: var(--neutral-text-1);
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/*無障礙*/
.header .main-nav .box>a:hover,
.header .main-nav .box>a.active {
  background-color: var(--theme-background-4, #73C12D);
  color: black;
}

.header .main-nav .box:first-child a::after {
  display: none;
}

.header .main-nav .sub-nav {
  position: absolute;
  z-index: 10;
  color: #fff;
  border-radius: 0 6px 6px 6px;
  margin-top: -4px;
  font-size: 88%;
  overflow: hidden;
  line-height: 1.5;
  display: none;
  padding: 10px 0;
  background-color: var(--theme-background-4, #73C12D);
  box-shadow: var(--subnav-shadow);
}

.header .main-nav .sub-nav li {
  min-width: 220px;
  padding: 0 8px;
}

.header .main-nav .sub-nav li a {
  display: block;
  padding: 5px 8px;
  color: black;
  font-weight: 500;
  background-color: var(--theme-background-4);
  border-radius: 4px;
}

.header .main-nav .sub-nav li a:hover {
  background-color: var(--theme-background-2);
  filter: brightness(110%);
}

@media (max-width: 1024px) {
  .header .main-nav .box {
    position: relative;
    padding: 0;
  }

  .header .main-nav .box>a {
    display: block;
    text-align: center;
    color: #333;
    font-weight: 500;
    font-family: "Noto Sans TC";
    padding: 8px 10px;
    border-radius: 6px;
  }

  .header .main-nav .box>a::after {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 20px;
    background-color: #333;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

.header .misc-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  flex: 1;
  max-width: 252px;
  min-width: 180px;
}

.header .misc-box-m {
  display: none;
}

@media (max-width: 1024px) {
  .header .misc-box {
    width: 200px;
  }
}

.header .misc-box .logged-in,
.header .misc-box .not-logged-in {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}


.header .misc-box .logged-in .btn {
    top: 0;
    color: black;
    font-size: 13px;
    line-height: 20px;
    border-radius: 6px 6px 6px 6px;
}

.header .misc-box .btn {
    font-size: clamp(0.8rem, -0.75rem + 2.5vw, 1.125rem);
    background-color: var(--theme-background-4, #73C12D);
    border: 1px solid var(--theme-background-2);
    color: var(--neutral-text-1);
}

.header .misc-box .search {
  position: relative;
  flex: 1;
}

.header .misc-box .search label {
  font-size: 0;
  opacity: 0;
  position: absolute;
}

/* .header .misc-box .search input[type=text] {
  border-radius: 150px;
  border: 1px solid var(--neutral-border-3);
  padding: 7px 42px 7px 10px;
  width: 100%;
} */

/* .header .misc-box .search a {
  position: absolute;
  display: block;
  font-size: 0;
  background: url(../images/icon/search.svg) 0 0 no-repeat;
  filter: var(--theme-sourse-filter);
  background-size: 100%;
  width: 20px;
  height: 20px;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
} */

@media (max-width: 1240px) {
  .header .misc-box .not-logged-in {
    display: flex;
    flex-wrap: wrap;
    width: 180px;
    align-items: flex-end;
    flex-direction: column-reverse;
  }

  .header .misc-box .search {
    min-width: 100%;
  }

  .header .misc-box .btn {
    font-size: 1rem;
  }

  [data-theme="1"] .header .misc-box .not-logged-in,
  [data-theme="2"] .header .misc-box .not-logged-in,
  [data-theme="3"] .header .misc-box .not-logged-in,
  [data-theme="4"] .header .misc-box .not-logged-in,
  [data-theme="5"] .header .misc-box .not-logged-in,
  [data-theme="6"] .header .misc-box .not-logged-in,
  [data-theme="7"] .header .misc-box .not-logged-in,
  [data-theme="8"] .header .misc-box .not-logged-in {
    flex-wrap: nowrap;
    width: 180px;
    align-items: center;
    flex-direction: row;
  }

}

@media (max-width: 992px) {
  .header .inner {
    padding: 15px 10px;
  }

  .header .main-nav,
  .header .misc-box {
    display: none;
  }

  .header .misc-box-m {
    position: relative;
    display: flex;
  }

  .header .misc-box-m .misc-m {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: var(--neutral-text-1);
    margin-top: -16px;
  }

  .header .misc-box-m .misc-m li:first-child {
    border-right: 1px solid #666;
  }

  .header .misc-box-m .misc-m a {
    color: #333;
    display: block;
    line-height: 1;
    font-size: 1rem;
    padding: 0 5px;
  }

  .header .hamburger {
    display: block;
    margin-top: -20px;
    margin-left: 7px;
  }
}

.footer {
  width: 100%;
  background-color: var(--neutral-fill-0);
  border-top: 1px solid var(--neutral-border-3);
  font-size: 0.8rem;
  color: var(--neutral-text-1);
  word-break: break-word !important;
}

.footer .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
  gap: 10px;
}

.footer .footer-logo {
  display: block;
  width: 60px;
  height: 60px;
}

.footer .footer-logo img {
  width: 100%;
  display: block;
}

.footer .info {
  line-height: 1.5;
}

.footer .info p {
  text-wrap: pretty;
  display: flex;
  margin: 0;
  gap: 10px;
}

@media (max-width: 992px) {
  .footer .inner {
    display: block;
    overflow: hidden;
  }

  .footer .footer-logo {
    width: 40px;
    height: 40px;
    float: left;
    margin-right: 10px;
  }

  .footer .info {
    width: calc(100% - 56px);
    float: left;
  }

  .footer .info p {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0px 4px;
  }
}

@media (max-width: 820px) {
  .footer .info p {
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 640px) {
  .footer .inner {
    width: 95%;
  }
}

.login-popup {
  padding: 30px 0;
}

.login-popup .login-wrap {
  display: flex;
  justify-content: center;
  min-height: 822px;
  overflow-y: auto;
}

.login-popup .login-wrap .login {
  margin: 0;
  align-self: center;
  width: 90%;
  max-width: 680px;
  border-radius: 12px;
  background-color: #fff;
  padding: 50px 30px 30px 30px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: 1px solid #73c12d;
  /* box-shadow: 1px 4px 20px 0 rgba(0, 0, 0, 0.2); */
}

.login-popup .login-wrap .login .title {
  padding: 3px 55px 8px 55px;
  color: #fff;
  font-size: 1.8rem;
  border-radius: 150px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  max-width: 320px;
  position: absolute;
  left: 50%;
  top: -27px;
  transform: translateX(-50%);
}

.login-popup .login-wrap .login-select {
  display: flex;
  justify-content: center;
}

.login-popup .login-wrap.login-form  {
  width: 100%;
  display: none;
}


 

 .login-form2 {
  width: 100%;

}

.login-popup .login-wrap .login-form  .text-box {
  margin-bottom: 15px;
  line-height: 1.5;
}

.login-popup .login-wrap .login-form  .box {
  width: 100%;
  padding: 10px 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid #ddd;
}

.login-popup .login-wrap .login-form  .box strong {
  font-weight: 400;
  display: block;
  width: 100px;
}

.login-popup .login-wrap .login-form  .box input[type=password],
.login-popup .login-wrap .login-form  .box input[type=text] {
  width: 100%;
}

.login-popup .login-wrap .login-form  .box:nth-child(2) {
  border-top: 1px solid #ddd;
}

.login-popup .login-wrap .login-form  .box .ct {
  width: calc(100% - 100px);
  display: flex;
  position: relative;
  gap: 8px;
}

.refresh-btn {
  align-self: center;
  color: var(--second-color2);
}

.login-popup .login-wrap .login-form  .box .ct .CImage {
  height: 40px;
  align-self: center;
}

.password-container {
  position: relative;
  display: block;
}

.password-container #mem_pd {
  padding-right: 40px;
}

.toggle-eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.login-popup .login-wrap .login-form  .btn-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 0 0;
}

.login-popup .login-wrap .login-form  .btn-wrap .btn {
  margin: 0;
  padding: 7px 10px;
  color: black;
  background-color: var(--theme-background-4, #73C12D);
  border: 1px solid var(--theme-background-2);
}

.login-popup .login-wrap .login-form  .btn-wrap .btn_warning {
  background-color: #FFCC66;
  color: #333;
}

.login-popup .login-wrap .login-form  .btn-wrap .back {
  background-color: #fff;
  color: #333;
  border: 1px solid #999;
}

.login-popup .login-wrap .login-form  .btn-wrap .btn_primary {
  background-color: var(--primary-color3);
}

/* .login-popup .login-wrap .login-form .btn-wrap input[type=submit],
.login-popup .login-wrap .login-form .btn-wrap .back {
  display: flex;
  padding: 7px 10px;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.2;
  font-family: "Noto Sans TC";
  border: 0;
  color: #fff;
  background-color: var(--theme-background-2, #73C12D);
} */

.login-popup .login-wrap .login-form  .error-msg {
  color: #f20;
  margin-bottom: 10px;
}

.verify-box {
  display: flex;
  flex-wrap: wrap;
}

.verify-box input[type=text] {
  width: 100px !important;
}


.main {
  padding-top: 88px;
}

/* 文字
------------------------------------------------------ */
.text-content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /*default lines*/
  line-clamp: 2;
  /*default lines*/
  overflow: hidden;
  position: relative;
}

.txt-line-1 {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.txt-line-2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.txt-line-3 {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.txt-line-4 {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.text-content.truncated::after {
  content: '... more';
  position: absolute;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, transparent, white 20%);
  padding-left: 20px;
  color: var(--neutral-text-2);
  line-height: 150%;
}

/* 相關檔案&連結
--------------------------------------------------------*/

.main .related {
  width: 100%;
  color: #333;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.main .related .box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.main .related .box .title {
  position: static;
  display: flex;
  gap: 6px;
  width: 100%;
  padding: 12px 16px;
  justify-content: flex-start;
  max-width: none;
  font-weight: 500;
  font-size: 1.125rem;
  border-radius: 6px;
  margin: 0;
  background-color: var(--theme-background-4);
  color: var(--theme-foreground-onColor-1);
}

.main .related .box .list {
  width: 100%;
}

.main .related .box .list li {
  width: 100%;
  padding: 10px 14px;
  display: flex;
  gap: 20px;
  border-bottom: 1px dashed var(--neutral-border-3);
  justify-content: space-between;
  color: var(--neutral-text-1);
}

.main .related .box .list li a {
  display: flex;
  -moz-column-gap: 8px;
  column-gap: 8px;
  color: var(--neutral-text-1);
  font-size: var(--fontsize-xs);
}

.main .related .box .list li a .icon {
  width: 22px;
  align-self: center;
  margin-top: 1px;
}

.main .related .box .list li .filename-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 90%;
}

.main .related .box .list li .filename {
  display: block;
  width: 100%;
  font-size: 1.125rem;
}

.main .related .box .list li .file-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.main .related .box .list li .file-list>a>span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 95%;
  /* 不確定width設定 20250324 */
  /* width: 100%; */
  width: max-content;
  line-height: 1.25;
}

.main .related .box .list li .file-list>a>span>span {
  display: block;
  width: 100%;
}

.main .related .box.link .list li a {
  display: flex;
  align-items: flex-start;
  -moz-column-gap: 6px;
  column-gap: 6px;
  padding: 5px 0px;
  position: relative;
  font-size: 1.125rem;
}

.main .related .box .list li a.linkname {
  padding: 4px 0px 4px 24px;
  position: relative;
}

.main .related .box .list li .linkname::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 25px;
  aspect-ratio: 1 / 1;
  /* height: 265px; */
  background: url(../images/file-link.svg) 0 0 no-repeat;
  background-size: 100%;
}

.main .related .box .list li .linkname:hover {
  filter: brightness(130%);
  color: #666;
}

@media (max-width: 576px) {
  .main .related .box .list li {
    flex-wrap: wrap;
    gap: 10px;
  }

  .main .related .box .list li .filename-box {
    width: 100%;
  }
}

/* 相關檔案&連結 end
--------------------------------------------------------*/


.accessibility {
  width: 100%;
  margin: 40px 0 0 0;
  border: 1px solid var(--neutral-border-2);
  padding: 40px;
  line-height: 2;
  font-size: 1.125rem;
  border-radius: 12px;
  color: var(--neutral-text-1);
}

.sitemap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 50px;
}

.sitemap .box {
  width: calc(33.3333333333% - 16px);
}

.sitemap .box a {
  display: block;
  overflow: hidden;
  color: var(--link-foreground, #254BD3);
  line-height: 1.4;
}

.sitemap .box a:hover {
  color: var(--link-foreground, #254BD3);
  filter: brightness(150%);
}

.sitemap .box .num {
  align-self: flex-start;
  line-height: 1.4;
  float: left;
  display: block;
  margin-right: 3px;
}

.sitemap .box .external-links {
  color: var(--note-forground, #F85390);
}

.sitemap .box .unit {
  width: 100%;
  border-radius: 6px;
  padding: 6px 22px 3px 22px;
  color: #fff;
  display: flex;
  align-items: center;
  height: 100px;
  gap: 5px;
  line-height: 1.25;
  font-weight: 500;
  font-size: 1.4rem;
  position: relative;
}

.box .primary-bgcolor1::before {
  content: "";
  left: 0;
  position: absolute;
  width: 1.5%;
  height: 77.5%;
  background-color: var(--lime-sourse);
  border-radius: 0 2px 2px 0;
}

.box .primary-bgcolor2::before {
  content: "";
  left: 0;
  position: absolute;
  width: 1.5%;
  height: 77.5%;
  background-color: var(--orange-sourse);
  border-radius: 0 2px 2px 0;
}

.box .primary-bgcolor3::before {
  content: "";
  left: 0;
  position: absolute;
  width: 1.5%;
  height: 77.5%;
  background-color: var(--sky-sourse);
  border-radius: 0 2px 2px 0;
}

.box .primary-bgcolor4::before {
  content: "";
  left: 0;
  position: absolute;
  width: 1.5%;
  height: 77.5%;
  background-color: var(--magenta-sourse);
  border-radius: 0 2px 2px 0;
}

.box .primary-bgcolor5::before {
  content: "";
  left: 0;
  position: absolute;
  width: 1.5%;
  height: 77.5%;
  background-color: var(--violet-sourse);
  border-radius: 0 2px 2px 0;
}
.box .primary-bgcolor8::before {
  content: "";
  left: 0;
  position: absolute;
  width: 1.5%;
  height: 77.5%;
  background-color: var(--yellow-sourse);
  border-radius: 0 2px 2px 0;
}

.sitemap .box .unit a {
  color: var(--neutral-10);
}

/* .sitemap .box .unit.primary-bgcolor8 a {
  color: #000;
} */

.sitemap .box .unit .num {
  align-self: flex-start;
  line-height: 2;
  margin-right: 2px;
}

.sitemap .box .main {
  margin: 0;
  padding: 0 10px;
}

.sitemap .box .main li {
  padding: 5px 0;
  margin-top: 0;
}

.sitemap .box .sub {
  margin: 0;
  padding: 0 0 0 10px;
}

.sitemap .box .sub li {
  padding: 5px 0;
}

.news {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 60px 24px;
  font-size: 1.125rem;
  font-weight: 500;
  padding-bottom: 0 !important;
}

.news .title {
  top: 10px !important;
  background-color: var(--theme-background-2);
  color: #1D2129 !important;
}

.news .inner {
  margin-top: 2rem !important;
  gap: 0 !important;
}

.news .search-form {
  margin-top: 1rem;
  display: flex;
}

.news .news-tab {
  width: 100%;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 20px 0px 40px 0px;
  justify-content: center;
}

.news .news-tab .btn {
  width: 130px;
  color: var(--neutral-10);
  border: 0;
}

.news .news-tab .btn {
  background-color: var(--theme-foreground-1);
}


.news .news-list {
  width: 100%;
}

.news .news-list .list-wrap {
  padding: 0;
  color: var(--neutral-text-1);
}

.news .news-list .list-wrap .list-box {
  display: flex;
  gap: 0px 8px;
  align-items: center;
  line-height: 1.4;
  border-top: 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--neutral-border-3);
}

.news .news-list .list-wrap .list-box li {
  justify-content: center;
  flex-grow: 1;
  min-width: 104px;
  padding: 12px 8px;
  position: relative;
}

.news .news-list .list-wrap .list-box li:first-child {
  flex-grow: 1;
  flex-basis: 296px;
  max-width: 296px;
  min-width: 0px;
}

.news .news-list .list-wrap .list-box li:first-child .box {
  justify-content: flex-start;
}

.news .news-list .list-wrap .list-box li:last-child {
  flex-grow: 1;
  flex-basis: 552px;
  max-width: 552px;
  min-width: 0px;
}

.news .news-list .list-wrap .list-box li:last-child.new::before {
  content: "NEW";
  color: #FF5E80;
  position: absolute;
  left: -18px;
  top: -6px;
  text-align: center;
  font-family: "Noto Sans TC";
  font-style: italic !important;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5rem;
  /* 200% */
}

.news .news-list .list-wrap .list-box li:last-child .txt {
  width: 100%;
}

.news .news-list .list-wrap .list-box li:last-child a {
  color: var(--neutral-text-1);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  position: relative;
  width: 100%;
}

.news .news-list .list-wrap .list-box li:last-child a span {
  transform: translateY(-2px);
}

.news .news-list .list-wrap .list-box li.date,
.news .news-list .list-wrap .list-box li.category {
  max-width: 120px;
}

.news .news-list .list-wrap .list-box li .tag-box .tag {
  border-radius: 6px;
  color: #333;
  font-weight: 500;
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  padding: 4px 12px 2px 12px;
}

.news .news-list .list-wrap .list-box li .box {
  flex-grow: 1;
  justify-content: center;
}

.news .news-list .list-wrap .list-box.head li {
  justify-content: center;
  color: var(--theme-foreground-1);
}

.news .show-paging {
  width: 100%;
}

.news .show-paging .current {
  color: var(--neutral-text-5);
  background: var(--theme-background-2);
}

.page .show-paging {
  width: 100%;
}

.page .show-paging .current {
  color: var(--neutral-text-5);
  background: var(--theme-background-2);
}

/* .news .show-paging a {
  background: #eee !important;
} */

.site {
  width: 100%;
  padding: 0 0 96px 0;
  overflow: hidden;
}

.site .site-banner {
  background: var(--theme-background-2);
}

.site .site-banner .inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.site .site-banner .inner img {
  display: block;
  width: 100%;
}

.site .site-content {
  width: 92%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 0 30px;
}

.site .site-content .content-box {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  max-width: 1280px;
  align-items: flex-start;
  width: 100%;
}

.site .site-content .content-box .breadcrumb {
  padding: 30px 0 0 0;
}

.site .site-content.site-side-content .content-box {
  width: calc(100% - 300px - 30px);
}

.site .site-header {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-direction: column-reverse;
  gap: 5px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--theme-stroke);
  line-height: 1.5;
}

.site .site-header .site-title {
  position: relative;
  font-size: 1.85rem;
  font-weight: 500;
  display: flex;
  gap: 8px;
  color: var(--neutral-text-1);
  padding-left: 25px;
  min-height: 44px;
}

.site .site-header .site-title::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  border-width: 4px;
  border-style: solid;
  border-color: var(--theme-stroke);
  margin-top: 12px;
}

.site .site-header .plus-sub_text {
	display: block;
}

.site .site-header .plus-sub_text .sub-text {
  font-size: 18px;
  font-weight: 700;
}

.site .site-header .plus-sub_text::before {
  top: 0;
  left: 0;
  border-radius: 6px;
  width: 6px;
  height: 100%;
  border: 0;
  background-color: var(--theme-background-2);
  margin-top: 0;
	
}

.site .site-tabs-list .site-header,
.site .site-news-list .site-header {
  flex-direction: row;
  justify-content: space-between;
}

.site .site-tabs-list .site-header .site-title,
.site .site-news-list .site-header .site-title {
  width: calc(100% - 100px);
}

.site .site-subtitle {
  display: block;
  position: relative;
  font-size: 1.5rem;
  margin: 10px 0 20px 0;
  padding-left: 14px;
}

.site .site-subtitle::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 6px;
  width: 5px;
  height: 26px;
  border-radius: 15px;
  background-color: var(--theme-stroke);
}

.site .site-header .btn-box {
  display: flex;
  justify-content: flex-end;
  align-self: flex-end;
}

.site .site-header .btn-box .more {
  font-size: 0.98rem;
  position: relative;
  display: block;
  padding-right: 24px;
  line-height: 150%;
  color: var(--theme-foreground-1);
}

.site .site-header .btn-box .more:after {
  content: "";
  position: absolute;
  height: 100%;
  aspect-ratio: 1/1;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);

  mask-repeat: no-repeat;
  mask-position: center center;
  /* 確保遮罩大小正確 */
  -webkit-mask-image: url(../images/arr-right.svg);
  mask-image: url(../images/arr-right.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  /* 設定實際要顯示的顏色 */
  background-color: var(--theme-foreground-1);
}

/* 主選單(上) 
--------------------------------------------------------------*/
.site-main-nav {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 6;
  max-width: 1280px;
  width: calc(100% - 40px * 2);
  margin: 0 auto;
  /*overflow: hidden;*/
}

.site-main-nav:before {
	content: "";
	position: absolute;
	top: 0;
	right: 100%;
	background-color: #fff;
	width: 100vw;
	height: 100%;
	z-index: 2;
}

.site-main-nav:after {
	content: "";
	position: absolute;
	top: 0;
	left: 100%;
	background-color: #fff;
	width: 100vw;
	height: 100%;
	z-index: 2;
}

.site-main-nav .splide__arrow--prev {
    left: -40px;
	z-index: 10;
}

.site-main-nav .splide__arrow--next {
    right: -40px;
	z-index: 10;
}

.site-main-nav .splide {
  width: 100%;
}

.site-main-nav .sub-nav {
  display: none;
}

.site-main-nav .splide__slide {
	max-width: 168px;
}

.site-main-nav .sub-nav .txt,
.site-main-nav .sub-nav .en {
  display: block;
  width: 100%;
  line-height: 1.25;
}

.site-main-nav .sub-nav .en {
  width: 100%;
  display: block;
  font-size: 90%;
}

.site-main-nav .lev1-nav {
  margin: 0 auto;
  overflow: visible;
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.site-main-nav .lev1-nav a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px 20px 15px 20px;
  color: #333;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
}

.site-main-nav .lev1-nav .icon,
.site-main-nav .lev1-nav .txt,
.site-main-nav .lev1-nav .en {
  display: block;
  text-align: center;
  line-height: 1.25;
}

.site-main-nav .lev1-nav .icon {
  display: block;
  width: 100%;
  margin-bottom: 4px;
}

.site-main-nav .lev1-nav .icon img {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto;
}

.site-main-nav .lev1-nav .en {
  width: 100%;
  display: block;
  font-size: 85%;
}

.site-main-nav .lev1-nav .main-slide>a>.txt {
  position: relative;
  display: block;
  width: fit-content;
}

.site-main-nav .lev1-nav .arrow .txt::after {
  content: "";
  position: absolute;
  top: 1px;
  right: -20px;
  width: 18px;
  height: 18px;
  background: url(../images/arr-down.svg) center center no-repeat;
  background-size: 100%;
  z-index: 1;
}

.site-main-nav .lev1-nav>.main-slide>.open {
  background: var(--theme-background-2);
}

.site-main-nav .lev1-nav>.main-slide>.open .txt {
  color: #fff;
}

.site-main-nav .lev1-nav>.main-slide>.open .txt::after {
  background: url(../images/arr-down-white.svg) center center no-repeat;
  rotate: -180deg;
}

.site-main-nav .lev1-nav>.main-slide>.open .en {
  color: #fff;
}

.site-main-nav .lev2-nav {
  position: fixed;
  z-index: 10;
  width: 100%;
  padding: 24px 30px;
  flex-wrap: wrap;
  background: #fff;
  border-top: 1px solid #ddd;
  left: 0;
  gap: 20px 30px;
  font-weight: 500;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
}

.site-main-nav .lev2-nav>li {
  width: calc(20% - 24px);
  margin: 0;
  padding: 0;
  font-size: 1rem;
}

.site-main-nav .lev2-nav>li>a {
  display: block;
  width: 100%;
  color: #333;
  padding: 5px 5px;
  margin: 0;
  border-bottom: 1px solid #bbb;
  position: relative;
  text-align: left;
}

.site-main-nav .lev2-nav>li>a {
  display: block;
  width: 100%;
  color: #333;
  padding: 5px 5px;
  margin: 0;
  border-bottom: 1px solid #bbb;
  position: relative;
  text-align: left;
}

/*.site-main-nav .lev2-nav .arrow {
	pointer-events: none;
}*/

.site-main-nav .lev2-nav .arrow .txt::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 0;
  width: 18px;
  height: 18px;
  background: url(../images/arr-down.svg) center center no-repeat;
  background-size: 100%;
  z-index: 1;
  display: none;
}

.site-main-nav .lev2-nav li .arrow.open .txt::after {
  background: url(../images/arr-down.svg) center center no-repeat;
  background-size: 100%;
  rotate: -180deg;
}

.site-main-nav .lev2-nav li a .txt,
.site-main-nav .lev2-nav li a .en {
  text-align: left;
}

.site-main-nav .lev3-nav {
  width: 100%;
  /*display: none;*/
  display: block !important;
  flex-wrap: wrap;
  padding: 8px 0;
  list-style: none;
  margin: 0;
}

.site-main-nav .lev3-nav>li {
  width: 100%;
  font-size: 1rem;
  position: relative;
  border-top: 1px solid #ccc;
}

.site-main-nav .lev3-nav>li:first-child {
  border-top: 0;
}

.site-main-nav .lev3-nav>li::before {
  content: "";
  display: block;
  position: absolute;
  left: 5px;
  top: 15px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4.5px 0 4.5px 5px;
  border-color: transparent transparent transparent #73C12D;
}

.site-main-nav .lev3-nav>li>a {
  display: block;
  padding: 9px 5px 5px 18px;
  border-bottom: 0;
  color: #333;
  position: relative;
  text-align: left;
}

.site-main-nav .lev3-nav>li>a.arrow .txt {
  position: relative;
}

.site-main-nav .lev3-nav>li>a.arrow .txt::after {
  content: "";
  position: absolute;
  top: 6px;
  right: -5px;
  width: 18px;
  height: 18px;
  background: url(../images/arr-down.svg) center center no-repeat;
  background-size: 100%;
  z-index: 1;
}

.site-main-nav .lev3-nav li .arrow.open .txt::after {
  background: url(../images/arr-down.svg) center center no-repeat;
  background-size: 100%;
  rotate: -180deg;
}

.site-main-nav .lev4-nav {
  width: 100%;
  display: none;
}

.site-main-nav .lev4-nav>li {
  width: 100%;
  position: relative;
}

.site-main-nav .lev4-nav>li>a {
  color: #333;
  display: block;
  padding: 5px 24px 5px 30px;
  border-bottom: 0;
  text-align: left;
}

.site-main-nav .lev4-nav>li::before {
  content: "";
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: #73C12D;
  left: 17px;
  top: 13px;
}

/* 主選單(上) end
--------------------------------------------------------------*/

.site-side-nav {
  width: 100%;
  max-width: 300px;
  border-radius: 8px;
  padding: 12px 20px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--theme-stroke);
  align-self: flex-start;
  margin: 30px 0;
}

.site-side-nav .lev1-nav li {
  position: relative;
}

.site-side-nav .lev1-nav li::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--theme-stroke);
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0.4;
}

.site-side-nav .lev1-nav li a {
  position: relative;
  display: block;
  padding: 8px 24px 8px 0;
  color: var(--neutral-text-1);
  font-size: 1.125rem;
  font-weight: 500;
}

.site-side-nav .lev1-nav li a .en {
  display: block;
  font-size: 1rem;
}

.site-side-nav .lev1-nav li a.arrow::after {
  content: "";
  display: block;
  position: absolute;
  top: 14px;
  right: 0px;
  width: 18px;
  height: 18px;
  background: url(../images/arr-down.svg) 0 0 no-repeat;
  background-size: 100%;
}

.site-side-nav .lev1-nav li a.arrow.open::after {
  background: url(../images/arr-down.svg) center center no-repeat;
  background-size: 100%;
  rotate: -180deg;
}

.site-side-nav .lev1-nav>li:first-child::after {
  display: none;
}

.site-side-nav .lev2-nav {
  display: none;
}

.site-side-nav .lev2-nav>li a {
  display: block;
  padding: 8px 24px 8px 17px;
}

.site-side-nav .lev2-nav>li::before {
  content: "";
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
  left: 5px;
  top: 19px;
  background-color: var(--theme-foreground-1);
}

.site-side-nav .lev2-nav>li::after {
  opacity: 0.25;
}

.site-side-nav .lev3-nav {
  display: none;
}

.site-side-nav .lev3-nav>li a {
  display: block;
  padding: 8px 24px 8px 22px;
}

.site-side-nav .lev3-nav>li::before {
  content: "▶︎";
  font-size: 0.5rem;
  color: var(--theme-foreground-1);
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  top: 16px;
  left: 10px;
}

.site-side-nav .lev4-nav {
  padding-bottom: 6px;
  display: none;
}

.site-side-nav .lev4-nav>li>a {
  display: block;
  color: #333;
  padding: 2px 24px 2px 34px;
}

.site-article {
  width: 100%;
}

.site-article .page-content {
  padding: 10px;
  border-radius: 5px;
}

/* .site-article .pic-center {
  width: fit-content;
  max-width: none;
  margin: 0 auto 30px auto;
} */

.site-article .pic-center a {
  text-align: center;
}

.site-article .pic-center a img {
  display: block;
  /* max-width: 50vh; */
  /* max-height: 600px; */
}

.site-gallery {
  width: 100%;
}

.site-news-list {
  width: 100%;
}

.site-news-list .list-wrap {
  padding: 0;
}

.site-news-list .list-wrap .list-box {
  line-height: 1.4;
  border-top: 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--neutral-border-3);
}

.site-news-list .list-wrap .list-box li:nth-child(1) {
  width: 120px;
  justify-content: center;
}

.site-news-list .list-wrap .list-box li:nth-child(1) .txt {
  padding-top: 3px;
}

.site-news-list .list-wrap .list-box li:nth-child(2) {
  width: 180px;
  justify-content: flex-start;
}

.site-news-list .list-wrap .list-box li:nth-child(3) {
  width: calc(100% - 240px);
  position: relative;
}

.site-news-list .list-wrap .list-box li.new::before {
  content: "NEW";
  color: #FF5E80;
  position: absolute;
  left: -18px;
  top: -6px;
  text-align: center;
  font-family: "Noto Sans TC";
  font-style: italic !important;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5rem;
}

.site-news-list .list-wrap .list-box li:nth-child(3) .txt {
  display: flex;
  -webkit-line-clamp: none;
  line-clamp: none;
}

.site-news-list .list-wrap .list-box li:nth-child(3) a {
  color: #333;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  word-break: break-all;
}

.site-news-list .list-wrap .list-box li .tag-box .tag,
.list-card .card-box .tag-box .tag {
  border-radius: 6px;
  color: #333;
  font-weight: 500;
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  padding: 6px 8px 5px 8px;
  line-height: 1.2;
}

.site-news-list .list-wrap .list-box.head li {
  justify-content: center;
}

.site-news-list .search-form {
  margin-bottom: 30px;
}

.site-download-top {
  border: 1px solid var(--theme-foreground-1);
  padding: 2px;
  border-radius: 5px;
}

.site-download-top__header {
  padding: 5px;
  background-color: var(--theme-foreground-1);
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
}

.site-download-top__content {
  padding: 5px 10px;
}

.site-download-list {
  width: 100%;
}

.site-download-list .list-wrap {
  padding: 0;
}

.site-download-list .list-wrap .list-box {
  line-height: 1.4;
  border-top: 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--neutral-border-3);
}

.site-download-list .list-wrap .list-box li:nth-child(1) {
  /* width: 180px; */
  justify-content: center;
  flex: 0 1 180px;
}

.site-download-list .list-wrap .list-box li:nth-child(1) .txt {
  padding-top: 3px;
}

.site-download-list .list-wrap .list-box li:nth-child(2) {
  width: 50%;
  justify-content: center;
  flex: 0 0 50%;
}

.site-download-list .list-wrap .list-box li:nth-child(2) .box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.site-download-list .list-wrap .list-box li:nth-child(3) {
  /* width: 180px; */
  justify-content: center;
  flex: 0 1 180px;
}

.site-download-list .list-wrap .list-box li:nth-child(4) {
  /* width: 180px; */
  justify-content: center;
  flex: 0 1 180px;
}

.site-download-list .list-wrap .list-box li .tag-box {
  width: 100%;
}

.site-download-list .list-wrap .list-box.head li .txt {
  padding-top: 0;
}

.site-download-list .list-wrap .list-box.head .item {
  display: flex;
  gap: 5px;
  align-items: center;
}

.site-download-list .list-wrap .list-box.head .item .sort-box {
  width: 12px;
  margin-top: 1px;
}

.site-download-list .list-wrap .list-box.head .item .sort-box a {
  display: block;
  border-radius: 3px;
  font-size: 0;
  margin: 3px 0;
}

.site-download-list .list-wrap .list-box.head .item .sort-box .up {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6.5px 6px;
  border-color: transparent transparent #333;
}

.site-download-list .list-wrap .list-box.head .item .sort-box .down {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 6.5px 0;
  border-color: #333 transparent transparent;
}

.site-tabs-list {
  width: 100%;
}

.page-box {
  width: 100%;
  color: var(--neutral-text-1);
}

.page-content {
  font-size: 1.125rem;
  line-height: 2;
  width: 100%;
  color: var(--neutral-text-1);
}

.page-content p {
  margin-top: 0;
}

.search-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.search-form .form-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.5rem;
  flex: 1 1 0;
  height: -moz-fit-content;
  height: fit-content;
  min-width: 200px;
}

.search-form .form-wrap.date-range {
  min-width: 200px;
}

.search-form .form-wrap>div {
  display: flex;
  gap: 0.5rem;
  flex: 1 1 0;
}

.search-form .form-wrap label {
  display: flex;
  align-items: center;
}

.search-form .form-wrap input {
  flex: 1 1 0;
  border: var(--neutral-border-3) 1px solid;
  width: 100%;
  color: var(--neutral-text-1);
}

.search-form .form-wrap.action {
  justify-content: center;
  flex: 0.2 0 0;
  min-width: -moz-fit-content;
  min-width: fit-content;
}

.search-form .form-wrap.action .btn-lg {
  padding: 10px 10px;
  background-color: var(--theme-background-4, #73C12D);
  border: 1px solid var(--theme-background-2);
  color: #080808;
}

.search-form .label {
  display: flex;
  align-items: center;
  color: var(--neutral-text-1);
}

.search-form .btn.btn_primary {
  border: #fff 0px solid;
  background-color: var(--theme-background-2);
  color: var(--neutral-text-5);
}

.collect-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #ddd;
}

.collect-box>.box {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding: 12px 8px;
}

.collect-box>.box .item {
  display: block;
  width: 80px;
}

.collect-box>.box .cont {
  width: calc(100% - 80px);
}

.current-url {
  padding: 0;
}

.current-url label {
  font-size: 0;
}

.current-url #currentUrl {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
}

/* 1226 影片 簡介
-------------------------------------------------------------- */
.video-info-list {
  list-style: none;
  padding: 0px;
  display: flex;
  flex-direction: column;
  margin: 0px;
}

.video-info-list li {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  padding: 0px;
}

.video-info-list li p {
  margin: 0;
}

.video-info-list li>p:first-child {
  flex-basis: 6rem;
  flex-shrink: 0;
  color: var(--neutral-text-2);
}

.video-info-list li span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: var(--neutral-text-1);
  gap: 0.5rem;
}

.video-info-list li span .tag {
  font-size: 0.875rem;
  margin: 0.125rem 0px;
}

/* 1226 影片 
-------------------------------------------------------------- */

.video-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.video-list li {
  border-bottom: solid 1px var(--neutral-border-2);
}

.video-list li:last-of-type {
  border-bottom: none;
}

.video-list li a {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.5rem 0.5rem 0.75rem 0.5rem;
}

.video-list li a div:first-child {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  flex-basis: 200px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  border: var(--neutral-border-2) 1px solid;
}

.video-list li a div img {
  width: 100%;
  height: 95%;
  object-fit: contain;
  transition: ease-in-out 0.2s;
}

.video-list li a:hover div img {
  transform: scale(1.1);
}

.video-list li a div:nth-child(2) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.video-list li a span.date {
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  /* 1.225rem */
  letter-spacing: 0.031rem;
  /*0.5px*/
  color: var(--theme-foreground-2);
  margin-bottom: -0.375rem;
}

.video-list li a p {
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75rem;
  /* 140% */
  color: var(--neutral-text-1);
  flex: 100% 1 0;
  margin: 0;
}

.video-list li a .info .info-box {
  flex: 100% 1 0;
  display: grid;
  grid-template-columns: 80px 1fr;
  color: var(--neutral-text-2);
  align-items: center;
}

.video-list li a .tag {
  width: fit-content;
  height: fit-content;
  font-size: 1rem;
  font-weight: 500;
  background-color: rgba(0, 0, 0, 0);
  color: var(--neutral-text-1);
  border: 1px solid var(--theme-stroke);
  border-radius: 0.25rem;
}

/* video-list-grid */
.video-list[data-layout="grid"] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.video-list[data-layout="grid"] li {
  border-bottom: none;
}

.video-list[data-layout="grid"] li a {
  flex-direction: column;
    transition: ease-in-out 0.3s;
  border-radius: 12px;
}

.video-list[data-layout="grid"] li a:hover {
  background-color: var(--neutral-fill-1);
}
  


.video-list[data-layout="grid"] li a div:first-child {
  flex-basis: 100%;
  width: 100%;
  color: var(--neutral-text-1);
}

.video-list[data-layout="grid"] li a div:nth-child(2) span:first-child {
  color: var(--neutral-text-2);
}

.book-list-txt .list-wrap,
.video-list-txt .list-wrap {
  padding: 0;
}

.book-list-txt .list-wrap .txt,
.video-list-txt .list-wrap .txt {
  color: var(--neutral-text-1);
}

.book-list-txt .list-wrap a.txt:hover,
.video-list-txt .list-wrap a.txt:hover {
  color: var(--theme-foreground-1);
}

.book-list-txt .list-wrap .list-box,
.video-list-txt .list-wrap .list-box {
  display: flex;
  gap: 0px 8px;
  align-items: center;
  line-height: 1.4;
  border-top: 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--neutral-border-3);
}

.video-list-txt .list-wrap .list-box li {
  justify-content: center;
  flex-grow: 1;
  min-width: 104px;
  height: 100%;
  padding: 12px 8px;
  position: relative;
}

.book-list-txt .list-wrap .list-box li .txt,
.video-list-txt .list-wrap .list-box li .txt {
  display: flex;
  align-items: flex-start;
}

.book-list-txt .list-wrap .list-box li .txt,
.video-list-txt .list-wrap .list-box li .txt {
  display: flex;
  align-items: flex-start;
}

.book-list-txt .list-wrap .list-box li.name,
.video-list-txt .list-wrap .list-box li.name {
  width: 50%;
}

.book-list-txt .list-wrap .list-box li.source,
.video-list-txt .list-wrap .list-box li.source {
  width: 40%;
}

.book-list-txt .list-wrap .list-box li.name .box,
.video-list-txt .list-wrap .list-box li.name .box {
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
}

.book-list-txt .list-wrap .list-box li.year,
.book-list-txt .list-wrap .list-box li.ctr,
.video-list-txt .list-wrap .list-box li.year,
.video-list-txt .list-wrap .list-box li.ctr {
  width: 120px;
}

.book-list-txt .list-wrap .list-box li .box,
.video-list-txt .list-wrap .list-box li .box {
  justify-content: center;
}

.book-list-txt .list-wrap .list-box.head li,
.video-list-txt .list-wrap .list-box.head li {
  justify-content: center;
  color: var(--theme-foreground-1);
}

.download-list {
  width: 100%;
}

.download-list .list-wrap {
  padding: 0;
}

.download-list .list-wrap .list-box {
  line-height: 1.4;
  border-top: 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--neutral-border-3);
}

.download-list .list-wrap .list-box li {
  height: 100%;
}

.download-list .list-wrap .list-box.head li {
  align-items: center;
  text-wrap: balance;
  text-align: center;
}

.download-list .list-wrap .list-box li .box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.download-list .list-wrap .list-box li:nth-child(1) {
  width: 72%;
  justify-content: center;
  order: 1;
}

.download-list .list-wrap .list-box li:nth-child(2) {
  width: 150px;
  justify-content: center;
  order: 2;
}

.download-list .list-wrap .list-box li:nth-child(2) .box {
  align-self: center;
}

.download-list .list-wrap .list-box li:nth-child(2) .box p {
  text-align: center;
  width: 100%;
}

.download-list .list-wrap .list-box li:nth-child(3) {
  width: 120px;
  justify-content: center;
  order: 3;
}

.download-list .list-wrap .list-box li:nth-child(3) .box {
  justify-content: center;
  align-items: center;
  align-self: center;
}

.download-list .list-wrap .list-box li:nth-child(3) .box p {
    text-align: center;
    width: 100%;
}

.download-list .list-wrap .list-box li:nth-child(4) {
  width: 120px;
  justify-content: center;
  order: 4;
}

.download-list .list-wrap .list-box li:nth-child(4) {
  width: 120px;
  justify-content: center;
  align-items: center;
}

.download-list .list-wrap .list-box li .tag-box {
  width: 100%;
}

.download-list .list-wrap .list-box.head li .txt {
  padding-top: 0;
}

.download-list .list-wrap .list-box.head .item {
  display: flex;
  gap: 5px;
}

.download-list .list-wrap .list-box.head .item .sort-box {
  width: 12px;
  margin-top: 1px;
}

.download-list .list-wrap .list-box.head .item .sort-box a {
  display: block;
  border-radius: 3px;
  font-size: 0;
  margin: 3px 0;
}

.download-list .list-wrap .list-box.head .item .sort-box .up {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 6.5px 6px;
  border-color: transparent transparent #333;
}

.download-list .list-wrap .list-box.head .item .sort-box .down {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 6.5px 0;
  border-color: #333 transparent transparent;
}

.download-list .list-wrap .list-box .file-box {
  display: none;
}

@media (max-width: 640px) {
  .download-list .list-wrap .list-box .file-box {
    display: block;
  }

  .download-list .list-wrap .list-box li:nth-child(4) {
    display: none;
  }

  .download-list .list-wrap .list-box li:nth-child(4) {
    width: 120px;
    justify-content: center;
    display: none;
  }

  .download-list .list-wrap .list-box li:nth-child(1) {
    order:4;
    width: 60%;
  }
  

  .download-list .list-wrap .list-box li:nth-child(2) {
    order:1;
    width: 20%;
  }

  .download-list .list-wrap .list-box li:nth-child(3) {
    order:2;
    width: 20%;
  }
}




/*1231 最新消息 comp
-------------------------------------------------------------- */
.news-list-2 {
  list-style: none;
  padding: 0px;
  display: flex;
  flex-direction: column;
}

.news-list-2 li a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding: 8px;
  border-radius: 8px;
  transition: ease-in-out 0.2s;
}

.news-list-2 li a:hover {
  background-color: var(--theme-background-4);
}

.news-list-2 li a .date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  border-radius: 0.25rem;
  background-color: var(--theme-background-4);
  color: var(--theme-foreground-onColor-2);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75rem;
  /* 140% */
}

.news-list-2 li a .date span:first-child {
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5rem;
  /* 171.429% */
  margin-bottom: -0.375rem;
}

.news-list-2 li a .thumbnail {
  aspect-ratio: 3 / 2;
  flex-basis: 120px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}

.news-list-2 li a .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: ease-in-out 0.4s;
}

.news-list-2 li a:hover .thumbnail img {
  transform: scale(1.1);
}

.news-list-2 li a .headline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1 1 0;
}

.news-list-2 li a .headline p {
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75rem;
  color: var(--neutral-text-1);
  flex: 100% 1 0;
  margin: 0;
}

.news-list-2 li a .headline .tag {
  width: fit-content;
  height: fit-content;
  font-size: 1rem;
  font-weight: 500;
  background-color: rgba(0, 0, 0, 0);
  color: var(--neutral-text-1);
  border: 1px solid var(--theme-stroke);
  border-radius: 0.25rem;
}

/* 1231 最新消息 end */


/* 1231圖書 list 
----------------------------------------------*/
.tabs.type-md {
  background: rgba(0, 0, 0, 0);
  padding: 0px;
  border-radius: 0;
  display: flex;
  justify-content: center;
}

.tabs.type-md ul li a {
  background: var(--neutral-fill-2);
  color: var(--neutral-text-1);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.375rem;
  /* 122.222% */
  padding: 10px 10px;
  min-width: 120px;
}

.tabs.type-md ul li a:hover {
  filter: brightness(90%) saturate(120%);
}

.tabs.type-md ul li a:hover {
  filter: brightness(90%) saturate(120%);
}

.tabs.type-md ul li.active a {
  padding: 10px 10px;
  background: var(--theme-background-1);
  color: var(--neutral-text-5);
}

.tabs.type-md ul li.active a:hover {
  filter: brightness(100%) saturate(100%);
}

.tabs.type-md ul li.active::after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-top: 12px solid var(--theme-background-1);
  border-right: 16px solid transparent;
  border-left: 16px solid transparent;
  margin: 0;
  border-radius: 0px;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0);
}

@media(max-width:640px) {
  .tabs.type-md .list {
    width: 100%;
  }

  .tabs.type-md ul li {
    width: 100%;
    margin: 0 1px;
  }

  .tabs.type-md ul li a {
    font-size: 1rem;
    padding: 10px 5px;
    min-width: 0px;
  }

  .tabs.type-md ul li.active a {
    padding: 10px 5px;
  }
}

.book-list.grid {
  list-style: none;
  padding: 0px;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}

.book-list.grid li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: var(--neutral-text-1);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.625rem;
  /* 144.444% */
}

.book-list.grid li a div {
  aspect-ratio: 2 / 3;
  flex-basis: 100%;
  width: 100%;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}

.book-list.grid li a div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: ease-in-out 0.3s;
}

.book-list.grid li a:hover div img {
  transform: scale(1.1);
}

.book-list.grid .tabs-container .btn {
  width: fit-content;
  background-color: var(--theme-background-2);
  color: var(--neutral-text-5);
  margin: 0 auto;
}

.book-list.list {
  list-style: none;
  padding: 0px;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1.25rem;
}

.book-list.list li {
  border-bottom: var(--neutral-border-2) 1px solid;
}

.book-list.list li:last-child {
  border-bottom: none;
}

.book-list.list li a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  padding: 0.75rem 0;
  color: var(--neutral-text-1);
}

.book-list.list li a .cover {
  aspect-ratio: 2 / 3;
  flex-basis: 100%;
  width: 100%;
  max-width: 9rem;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  border: var(--neutral-border-2) 1px solid;
  margin: 8px;
  transition: ease-in-out 0.2s;
}

.book-list.list li a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book-list.list li a:hover .cover {
  transform: scale(1.02);
}

.book-list.list .info-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.book-list.list .info-box h3 {
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75rem;
  /* 155.556% */
  margin: 0;
}

.book-list.list .info-box .info {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0.25rem 0;
  color: var(--neutral-text-2);
}

.book-list.list .tag-container,
.book-list-txt .tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0;
  font-size: 0.875rem;
}

.book-list.list .tag-container .tag,
.book-list-txt .tag-container .tag {
  background: var(--theme-background-3);
  color: var(--theme-foreground-onColor-1);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
}

@media(max-width: 480px) {
  .book-list.list li a {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* 0114 圖書 簡介
-------------------------------------------------------------- */
.book-info {
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
}

.book-info .cover {
  flex: 1 1 0;
  max-width: 284px;
}

.book-info .cover .cover-box {
  width: 100%;

  margin-bottom: 16px;
}

.book-info .cover .cover-box img {
  width: 100%;
  height: auto;
}

.book-info-list {
  list-style: none;
  padding: 0px;
  display: flex;
  flex-direction: column;
  margin: 0px;
  color: var(--neutral-text-1);
  font-size: 1.125rem;
  line-height: 2.25rem;

  flex: 1 1 0;
}

.book-info-list li {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  padding: 0px;
}

.book-info-list li p {
  margin: 0;
}

.book-info-list li>p:first-child {
  flex-basis: 6rem;
  flex-shrink: 0;
  color: var(--neutral-text-2);
}

.book-info-list li span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.book-info-list li span .tag {
  font-size: 0.875rem;
  margin: 0.125rem 0px;
}

.book-info-list .link {
  color: var(--theme-foreground-2);
}

@media(max-width: 640px) {
  .book-info {
    flex-direction: column;
    align-items: center;
  }
}

.title-box {
  position: relative;
  display: flex;
  gap: 6px;
  width: 100%;
  padding: 12px 16px;
  justify-content: flex-start;
  max-width: none;
  font-weight: 500;
  font-size: 1.125rem;
  border-radius: 6px;
  background-color: var(--theme-background-4);
  color: var(--theme-foreground-onColor-1);
}

.detail-section .content {
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.75rem;
  color: var(--neutral-text-1);
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* 相關連結
---------------------------------------------- */
.link-list.list {
  list-style: none;
  padding: 0px;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1.25rem;
}

.link-list.list li {
  border-bottom: var(--neutral-border-2) 1px solid;
}

.link-list.list li:last-child {
  border-bottom: none;
}

.link-list.list li a {
  display: grid;
  grid-template-columns: minmax(0px, 12.5rem) minmax(1rem, auto);
  gap: 1rem 2rem;
  padding: 0.75rem 0;
  color: var(--neutral-text-1);
  align-items: center;
}

.link-list.list li a .cover {
  aspect-ratio: 4 / 3;
  flex-basis: 100%;
  width: 100%;
  max-width: 12.5rem;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  border: var(--neutral-border-2) 1px solid;
  transition: ease-in-out 0.2s;
}

.link-list.list li a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.link-list.list li a:hover .cover {
  transform: scale(1.02);
}

.link-list.list .info-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.link-list.list .info-box h3 {
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75rem;
  /* 155.556% */
  margin: 0;
}

.link-list.list .info-box .info {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: start;
  gap: 0.25rem 0;
  color: var(--neutral-text-2);
}

.link-list.list .tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0;
  font-size: 0.875rem;
}

.link-list.list .tag-container .tag {
  background: var(--theme-background-3);
  color: var(--theme-foreground-onColor-1);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
}

.link-list.list .description {
  grid-column: span 2 / span 2;
}

@media(max-width: 480px) {
  .link-list.list li a {
    gap: 0.5rem 1.25rem;
  }
}

.link-list.grid {
  list-style: none;
  padding: 0px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  gap: 0.5rem 1.25rem;
}

.link-list.grid li a {
  display: flex;
  padding: 0.5rem 0rem;
  color: var(--neutral-text-1);
  align-items: flex-start;
  flex-direction: column;
}

.link-list.grid li a .cover {
  aspect-ratio: 4 / 3;
  flex-basis: 100%;
  width: 100%;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  border: var(--neutral-border-2) 1px solid;
  transition: ease-in-out 0.2s;
  position: relative;
  padding: 20px;
}

.link-list.grid li a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.link-list.grid li a:hover .cover {
  transform: scale(1.02);
}

.link-list.grid .info-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.link-list.grid .info-box h3 {
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75rem;
  /* 155.556% */
  margin: 0;
}

.link-list.grid .info-box .info {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: start;
  gap: 0.25rem 0;
  color: var(--neutral-text-2);
}

.link-list.grid .tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0;
  font-size: 0.875rem;
}

.link-list.grid .tag-container .tag {
  background: var(--theme-background-3);
  color: var(--theme-foreground-onColor-1);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
}

.link-list.grid .description {
  grid-column: span 2 / span 2;
}

@media(max-width: 640px) {
  .link-list.grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 480px) {
  .link-list.grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* 檔案下載 - 純文字
---------------------------------------------- */
.download-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--neutral-text-1);
}

.download-table thead,
.download-table tbody {
  display: grid;
  /* 控制列寬、列數 */
  grid-template-columns: 0.5fr 2fr 0.8fr minmax(140px, 0.8fr);
  gap: 1px;
}

/* .download-table thead {
  grid-template-columns: repeat(12, 1fr);
} */

.download-table thead {
  color: var(--theme-foreground-2);
}

.download-table tr {
  display: contents;
}


.download-table th,
.download-table td {
  padding: 0.75rem 0.5rem;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: var(--neutral-border-2) 1px solid;
}

/* .download-table tr th.cate {
  grid-column: span 2 / span 2;
}

.download-table tr th.name {
  grid-column: span 6 / span 6;
  grid-column-start: 3;
}

.download-table tr th.date {
  grid-column: span 2 / span 2;
  grid-column-start: 9;
}

.download-table tr th.file {
  grid-column: span 2 / span 2;
  grid-column-start: 11;
} */


.download-table tr:last-child td {
  border-bottom: none;
}

.download-table tbody tr td:nth-child(2) {
  text-align: left;
  justify-content: flex-start;
  font-weight: 500;
}

.download-table .tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

.download-table tbody td.action {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(40px, 40px)); */
  grid-template-columns: repeat(1, 1fr);
  gap: 0rem;
  justify-items: center;
}

td.action a {
  /* width: 40px; */
  color: var(--neutral-text-2);
  width: 100%;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: fit-content;
  font-size: 0.875rem;
}

@media(max-width: 640px) {
  .download-table thead {
    display: none;
  }

  .download-table tbody {
    display: grid;
    grid-template-columns: 1fr;
  }

  .download-table tbody tr {
    display: grid;
    /* grid-template-columns: repeat(3, minmax(0, 1fr)); */
    grid-template-columns: 1fr 1fr minmax(5rem, 0.5fr);
    align-items: end;
    padding: 1rem 0;
    border-bottom: var(--neutral-border-2) 1px solid;
  }

  .download-table tbody tr:last-child {
    border-bottom: none;
  }

  .download-table td {
    padding: 0.5rem 0;
    grid-column: span 3;
    display: flex;
    justify-content: flex-start;
    align-items: start;
    border-bottom: none;
  }

  .download-table tbody td.date {
    grid-column: span 1;
    grid-column-start: 3;
    grid-row-start: 3;
    justify-content: flex-end;
    text-align: end;
  }


  .download-table tbody td.action {
    grid-column: span 2 / span 2;
    grid-column-start: 1;
    grid-row-start: 3;
    display: flex;
    /* grid-template-columns: repeat(auto-fit, minmax(40px, 40px)); */
    gap: 0rem;
    justify-items: start;
    flex-wrap: wrap;
  }
}

/* 檔案下載 - 含封面
---------------------------------------------- */
.download-table.with-cover {
  width: 100%;
  border-collapse: collapse;
  color: var(--neutral-text-1);
}

.download-table.with-cover thead,
.download-table.with-cover tbody {
  display: grid;
  /* 控制列寬、列數 */
  grid-template-columns: minmax(120px, 0.6fr) 2fr minmax(140px, 0.8fr);
  gap: 1px;
}

.download-table.with-cover thead {
  color: var(--theme-foreground-2);
}

.download-table.with-cover tr {
  display: contents;
}


.download-table.with-cover th,
.download-table.with-cover td {
  padding: 0.75rem 0.5rem;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: var(--neutral-border-2) 1px solid;
}

.download-table.with-cover tbody tr td.cover .cover-box {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--neutral-border-2);
  aspect-ratio: 1 / 1;
}

.download-table.with-cover tbody tr td .cover-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.download-table.with-cover tr:last-child td {
  border-bottom: none;
}

.download-table.with-cover tbody tr td.name {
  text-align: left;
  justify-content: flex-start;
  font-weight: 500;
}

.download-table.with-cover tbody tr td.name .tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  flex: 100% 1 0;
}

.download-table.with-cover tbody tr td.name .date,
.download-table.with-cover tbody tr td.name .download {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  margin-right: 1rem;
  color: var(--neutral-text-2);
}

.download-table.with-cover tbody tr td.name .download div {
  display: flex;
  align-items: center;
  gap: 2px;
}

.download-table.with-cover tbody tr td.name .download div span:last-child {
  font-size: 80%;
}

.download-table.with-cover .tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

.download-table.with-cover tbody td.action {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(40px, 40px)); */
  grid-template-columns: repeat(1, 1fr);
  gap: 0rem;
  justify-items: center;
}

td.action a {
  /* width: 40px; */
  color: var(--neutral-text-2);
  width: 100%;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: fit-content;
  font-size: 0.875rem;
}

@media(max-width: 640px) {
  .download-table.with-cover thead {
    display: none;
  }

  .download-table.with-cover tbody {
    display: grid;
    grid-template-columns: 1fr;
  }

  .download-table.with-cover tbody tr {
    display: grid;
    /* grid-template-columns: repeat(3, minmax(0, 1fr)); */
    grid-template-columns: 1fr 1fr minmax(5rem, 0.5fr);
    align-items: end;
    padding: 1rem 0;
    border-bottom: var(--neutral-border-2) 1px solid;
  }

  .download-table.with-cover tbody tr td.cover {
    padding: 0.8rem;
  }

  .download-table.with-cover tbody tr:last-child {
    border-bottom: none;
  }

  .download-table.with-cover td {
    padding: 0.5rem 0;
    grid-column: span 3;
    display: flex;
    justify-content: flex-start;
    align-items: start;
    border-bottom: none;
  }

  .download-table.with-cover tbody td.date {
    grid-column: span 1;
    grid-column-start: 3;
    grid-row-start: 3;
    justify-content: flex-end;
    text-align: end;
  }


  .download-table.with-cover tbody td.action {
    grid-column: span 3 / span 3;
    grid-column-start: 1;
    grid-row-start: 3;
    display: flex;
    /* grid-template-columns: repeat(auto-fit, minmax(40px, 40px)); */
    gap: 0rem;
    justify-items: start;
    flex-wrap: wrap;
  }
}

/* 進階搜尋
---------------------------------------------- */

.condition {
  border-width: 0px;
  width: 100%;
  padding: 0px;
  margin: 0;
}

.condition-list {
  list-style: none;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0px;
}

.condition-list li {
  display: flex;
  gap: 8px;
}

.condition-list li>:nth-child(1) {
  flex: 1 1 0;
  max-width: 96px;
}

.condition-list li>:nth-child(2) {
  flex: 1 1 0;
}

.condition-list li>:last-child {
  flex: 1 1 0;
  max-width: 120px;
}

.section-group .add-type {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.add-type:has(.form-text) .btn {
  margin-bottom: 3px;
}

.section-group .add-type .btn {
  margin-top: 1.75rem;
}

.section-group .added-type .label {
  margin-bottom: 4px;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.section-group .added-type .type-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 8px;
  margin-top: 8px;
}

.section-group .added-type .type {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  border: 1px solid var(--neutral-border-3);
  padding: 4px 4px 4px 12px;
  width: fit-content;
}

.section-group .added-type .type>span {
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.875rem;
}

.section-group .added-type .type a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-text-2);
  background-color: transparent;
  border-radius: 999px;
  transition: all 0.2s;
}

.section-group .added-type .type a:hover {
  color: var(--danger-foreground);
  background-color: var(--danger-background);
}

/* 多型態
---------------------------------------------- */
.multi-section {
  width: 100%;
  margin-bottom: 2.5rem;
  display: flow-root;
}

.multi-header {
  width: 100%;
  display: flow-root;
}

.multi-header .multi-title {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.25rem;
  display: inline-flex;
  gap: 0.75rem;
  position: relative;
}

.multi-header .multi-title::before {
  content: "";
  display: block;
  width: 0.25rem;
  align-self: stretch;
  background-color: var(--theme-background-2);
  border-radius: 999px;
  flex: 0 0 0.25rem;
}

.multi-section .link-list.list {
  gap: 0;
}

.multi-section .page-content {
  padding: 1rem 0 0 0;
}

/* 多型態 end
---------------------------------------------- */


/* 成果繳交
---------------------------------------------- */
.submit-section {
  width: 100%;
  margin-bottom: 2.5rem;
  display: flow-root;
}

.section-title {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.25rem;

  display: inline-flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.section-title span {
  display: inline-block;
  width: 0.25rem;
  align-self: stretch;
  background-color: var(--theme-background-2);
  border-radius: 999px;
  flex: 0 0 0.25rem;
}

.submit-section .section-content p {
  margin: 0px
}

.submit-list {
  padding: 16px 0px;
  margin: 0px;
  list-style: none;
}

.submit-list li {
  padding: 8px 0px;
  min-height: 4.5rem;
  border-bottom: 1px solid var(--neutral-border-2);
  display: flex;
  align-items: center;
}

.submit-list li:first-child {
  border-top: 1px solid var(--neutral-border-2);
}

.submit-list li span {
  flex: 1 1 0;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
}

/* @media(max-width: 540px){ } */

/* 資料繳交說明
---------------------------------------------- */
.submit-note {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 32px;
}

.submit-note figure {
  flex: 1 1 0;
  max-width: 236px;
}

.submit-note figure a {
  display: block;
  width: 100%;
}

.submit-note figure a img {
  display: block;
  width: 100%;
}

.submit-note figure a figcaption {
  display: block;
  background-color: var(--neutral-fill-0);
  padding: 5px 12px;
  color: #333;
  text-align: left;
}

.submit-note .content {
  flex: 1.5 1 0;
}

.submit-note .content p {
  margin-top: 0px;
}

@media (max-width: 640px) {
  .submit-note {
    flex-direction: column;
  }
}

/* 成果繳交
---------------------------------------------- */
/* 版面設定 */
.workspace {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  background-color: var(--neutral-fill-0);
  border-radius: 12px;
  padding: 8px;
  overflow: visible;
}

.tool-panel {
  padding: 12px 8px;
  background: var(--neutral-fill-0);
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12);
  border-radius: 8px;

  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;

  position: sticky;
  /* top: 400px; */
}

.tool-panel .tool-list {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tool-panel .tool-list li a {
  padding: 8px;
  /* border: 1px solid var(--neutral-border-2); */
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 4.5rem;
  background: transparent;

  transition: all 0.2s;
}

.tool-panel .tool-list li a:hover {
  background: var(--theme-background-4);
  color: var(--theme-foreground-onColor-2);
}

.tool-panel .tool-list li a .ms-icon {
  font-size: 2rem;
  color: var(--neutral-text-2);
}

.tool-panel .tool-list li a:hover .ms-icon {
  color: var(--theme-foreground-onColor-2);
}

.tool-panel .tool-list li a p {
  margin: 0px;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  color: var(--neutral-text-1);
}

.tool-panel .tool-list li a:hover p {
  color: var(--theme-foreground-onColor-2);
}

.canvas {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: var(--neutral-border-2) 2px solid;
  border-radius: 8px;
  height: fit-content;
  min-height: 400px;
}

.canvas .canvas-header,
.canvas .canvas-temp {
  width: 100%;
  /* border-bottom: rgba(var(--theme-rgb), 40%) 2px solid; */
  padding: 12px 16px 0px 16px;
  /* background: var(--neutral-fill-0); */
}

.canvas .canvas-temp:last-child {
  border-width: 0px;
}

.canvas .canvas-temp {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  position: relative;
  padding: 24px 16px;
  background: var(--theme-background-4);
  border-radius: 8px;
}

.canvas .canvas-temp .edit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}

.canvas .canvas-temp .edit .btn {
  box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13), 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.11);
}

.drag-target {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  color: var(--neutral-text-2);

  flex: 1 1 0;
}

.drag-target .note {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size: 1rem;
  text-align: center;

  width: 100%;
  flex: 1 1 0;
}

.drag-target .note .ms-icon {
  transform: rotate(90deg);
  color: var(--theme-foreground-1);
}

.canvas .canvas-temp>.ms-icon {
  color: var(--theme-foreground-onColor-2);
  font-size: 4rem;
}

.library-list {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
}

.library-list li {
  width: 100%;
  border-bottom: 1px dashed #bbb;
}

.library-list li a {
  color: #333;
  display: block;
  padding: 15px 5px;
}

/* 成果繳交 2
---------------------------------------------- */
.editor-wrapper {
  position: relative;
  /* min-height: 800px; */
  padding: 30px 0;
}

.main-container {
  display: flex;
}

.editor-layout-right {
  width: 100%;
}

.editor-layout .editor-layout-banner-temp1 img {
  width: 100%;
  aspect-ratio: 2134 / 263;
}

/* 右側預覽 */
.editor-layout {
  width: calc(100% - 280px);
  margin-left: 280px;
}

.editor-layout .editor-layout-content,
.editor-layout .editor-layout-header,
.editor-layout .editor-layout-footer {
  width: 100%;
  text-align: center;
  margin: 0 auto -2px auto;
  border: 2px dashed #ccc;
  font-size: 16px;
  color: #888;
  position: relative;
  background: #f4f4f4;
}

.editor-layout .editor-layout-content-dragenter {
  background: #ff7b5b;
}

.editor-layout .editor-layout-content-dragenter::before {
  color: #ffffff !important;
}

.editor-layout .editor-layout-content {
  height: 180px;
}

.editor-layout .editor-layout-content-drop1,
.editor-layout .editor-layout-content-drop2,
.editor-layout .editor-layout-content-drop3,
.editor-layout .editor-layout-content-drop4 {
  height: 180px;
}

.editor-layout .editor-layout-content::before {
  font-family: "Font Awesome 5 Free";
  color: #555;
  font-weight: 400;
  font-size: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.editor-layout .editor-layout-content-drop1::before {
  content: "\f03e";
}

.editor-layout .editor-layout-content-drop2::before {
  content: "\f031";
  font-weight: 900;
}

.editor-layout .editor-layout-content-drop4::before {
  content: "\f5fd";
  font-weight: 900;
}

.editor-layout .editor-layout-content-drop5::before {
  content: "\f031";
  font-weight: 900;
}

.editor-layout .editor-layout-content-drop3::before {
  content: "\f121";
  font-weight: 900;
}

.editor-layout .editor-layout-content-drop6::before {
    content: "\f03a";
  font-weight: 900;
}

.editor-layout .editor-layout-content-drop7::before {
  content: "\f03d";
  font-weight: 900;
}

.editor-bar-wrap {
  position: absolute;
  top: 110px;
}

.editor-bar-item-active {
  width: 100px;
  box-shadow: 4px 4px 6px 0 rgba(22, 45, 61, 0.16);
}

.editor-bar-item-active .editor-bar-hit {
  position: absolute;
  z-index: 8;
  border-radius: 28px 0 0 28px;
  width: 77px;
  background: #75cac0;
}

.editor-bar-item-active .icon {
  color: #fff;
}

.editor-bar-panel {
  box-shadow: 4px 4px 6px 0 rgba(22, 45, 61, 0.16);
  position: absolute;
  top: 0;
  left: 70px;
  max-height: calc(100vh - 112px);
  min-height: 370px;
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
  background-color: #75cac0;
  z-index: 15;
  padding: 10px;
  width: 280px;
  display: none;
}

.editor-bar-panel .panel-header {
  color: #fff;
  font-size: 1.1rem;
  line-height: 1.5rem;
  margin-bottom: 15px;
  overflow: hidden;
}

.editor-bar-panel .panel-header .panel-help,
.editor-bar-panel .panel-header .panel-close {
  float: right;
  font-size: 1.4rem;
  margin-left: 5px;
  display: block;
  cursor: pointer;
}

.panel-item-list {
  width: 100%;
  padding: 0 15px;
  border-radius: 3px;
}

.editor-bar-panel .panel-item {
  margin: 10px 0;
}

.editor-layout .editor-layout-header-temp1 {
  padding-top: 7%;
  position: relative;
}

.editor-layout .editor-layout-header-temp1.theme0 {
  background: url(../images/temp-header/layout-temp-header-example_0.jpg) center center no-repeat;
  background-size: 100%;
}

.editor-layout .editor-layout-header-temp1.theme1 {
  background: url(../images/temp-header/layout-temp-header-example_01.jpg) center center no-repeat;
  background-size: 100%;
}

.editor-layout .editor-layout-header-temp1.theme2 {
  background: url(../images/temp-header/layout-temp-header-example_02.jpg) center center no-repeat;
  background-size: 100%;
}

.editor-layout .editor-layout-header-temp1.theme3 {
  background: url(../images/temp-header/layout-temp-header-example_03.jpg) center center no-repeat;
  background-size: 100%;
}

.editor-layout .editor-layout-header-temp1.theme4 {
  background: url(../images/temp-header/layout-temp-header-example_04.jpg) center center no-repeat;
  background-size: 100%;
}

.editor-layout .editor-layout-header-temp1.theme5 {
  background: url(../images/temp-header/layout-temp-header-example_05.jpg) center center no-repeat;
  background-size: 100%;
}

.editor-layout .editor-layout-header-temp1.theme6 {
  background: url(../images/temp-header/layout-temp-header-example_06.jpg) center center no-repeat;
  background-size: 100%;
}

.editor-layout .editor-layout-header-temp1.theme7 {
  background: url(../images/temp-header/layout-temp-header-example_07.jpg) center center no-repeat;
  background-size: 100%;
}

.editor-layout .editor-layout-header-temp1 .honeycomb0 {
  background: url(../images/honeycomb/honey-comb-0-example.png);
}

.editor-layout .editor-layout-header-temp1 .honeycomb1 {
  background: url(../images/honeycomb/honey-comb-1-guideline.png);
}

.editor-layout .editor-layout-header-temp1 .honeycomb2 {
  background: url(../images/honeycomb/honey-comb-2-subject.png);
}

.editor-layout .editor-layout-header-temp1 .honeycomb3 {
  background: url(../images/honeycomb/honey-comb-3-innovation.png);
}

.editor-layout .editor-layout-header-temp1 .honeycomb4 {
  background: url(../images/honeycomb/honey-comb-4-topic.png);
}

.editor-layout .editor-layout-header-temp1 .honeycomb5 {
  background: url(../images/honeycomb/honey-comb-5-reading.png);
}

.editor-layout .editor-layout-header-temp1 .honeycomb6 {
  background: url(../images/honeycomb/honey-comb-6-resources.png);
}

.editor-layout .editor-layout-header-temp1 .honeycomb7 {
  background: url(../images/honeycomb/honey-comb-7-benchmark.png);
}

.editor-layout .editor-layout-header-temp1 .honeycomb8 {
  background: url(../images/honeycomb/honey-comb-8-assessment.png);
}

.editor-layout .editor-layout-header-temp1 .honeycomb9 {
  background: url(../images/honeycomb/honey-comb-9-student.png);
}

.editor-layout .editor-layout-header-temp1 .honeycomb10 {
  background: url(../images/honeycomb/honey-comb-10-counseling-team.png);
}

.editor-layout .editor-layout-header-temp1 .honeycomb11 {
  background: url(../images/honeycomb/honey-comb-11-administrative.png);
}

.editor-layout .editor-layout-header-temp1 .honeycomb0,
.editor-layout .editor-layout-header-temp1 .honeycomb1,
.editor-layout .editor-layout-header-temp1 .honeycomb2,
.editor-layout .editor-layout-header-temp1 .honeycomb3,
.editor-layout .editor-layout-header-temp1 .honeycomb4,
.editor-layout .editor-layout-header-temp1 .honeycomb5,
.editor-layout .editor-layout-header-temp1 .honeycomb6,
.editor-layout .editor-layout-header-temp1 .honeycomb7,
.editor-layout .editor-layout-header-temp1 .honeycomb8,
.editor-layout .editor-layout-header-temp1 .honeycomb9,
.editor-layout .editor-layout-header-temp1 .honeycomb10,
.editor-layout .editor-layout-header-temp1 .honeycomb11 {
  position: absolute;
  height: 88%;
  aspect-ratio: 1/1;
  background-size: contain;
  background-repeat: no-repeat;
  left: 14%;
  top: 50%;
  transform: translate(0%, -50%);
}

.editor-layout .editor-layout-header-temp1 .honeycomb0 img {
  height: 100%;
  aspect-ratio: 1 / 1;
}

.editor-layout .editor-layout-topNav-temp1 {
  padding-top: 3%;
  background: url(../images/topNav/layout-temp-topNav-example.jpg) center center/100% no-repeat;
  position: relative;
}

.editor-layout .editor-layout-topNav-temp1.theme1 {
  background: url(../images/topNav/layout-temp-topNav-example_1.jpg) center center/100% no-repeat;
}

.editor-layout .editor-layout-topNav-temp1.theme2 {
  background: url(../images/topNav/layout-temp-topNav-example_2.jpg) center center/100% no-repeat;
}

.editor-layout .editor-layout-topNav-temp1.theme3 {
  background: url(../images/topNav/layout-temp-topNav-example_3.jpg) center center/100% no-repeat;
}

.editor-layout .editor-layout-topNav-temp1.theme4 {
  background: url(../images/topNav/layout-temp-topNav-example_4.jpg) center center/100% no-repeat;
}

.editor-layout .editor-layout-topNav-temp1.theme5 {
  background: url(../images/topNav/layout-temp-topNav-example_5.jpg) center center/100% no-repeat;
}

.editor-layout .editor-layout-topNav-temp1.theme6 {
  background: url(../images/topNav/layout-temp-topNav-example_6.jpg) center center/100% no-repeat;
}

.editor-layout .editor-layout-topNav-temp1.theme7 {
  background: url(../images/topNav/layout-temp-topNav-example_7.jpg) center center/100% no-repeat;
}

.editor-layout .editor-layout-midNav-temp1 {
  padding-top: 9%;
  background: url(../images/layout-temp-midNav-example.jpg) center center no-repeat;
  background-size: 100%;
  position: relative;
}

.editor-layout .editor-layout-crumb-temp {
  padding-top: 3%;
  background-size: 100%;
  position: relative;
  background-color: white;
  display: block;
}

.editor-layout .editor-layout-crumb-temp .breadcrumb {
  display: flex;
  gap: 0.4vw;
  position: absolute;
  left: 4%;
  top: 50%;
  transform: translate(0, -50%);
  list-style: none;
  background-color: rgba(0, 0, 0, 0);
  margin: 0;
  padding: 0;
  width: fit-content;
  font-size: 0.7vw;
  padding: 0 !important;
}

.editor-layout .editor-layout-crumb-temp .breadcrumb .breadcrumb-item {
  display: inline-flex;
  gap: 0.4vw;
  color: #4E5969;
}

.editor-layout .editor-layout-crumb-temp .breadcrumb .breadcrumb-item>a {
  color: #4E5969;
}

.editor-layout .editor-layout-crumb-temp .breadcrumb .breadcrumb-item>a i {
  margin-right: 0.4vw;
}

.editor-layout .editor-layout-crumb-temp .breadcrumb .breadcrumb-item:last-child a {
  font-weight: bold;
}

.editor-layout .editor-layout-crumb-temp.theme0 .breadcrumb-item:last-child a {
  color: #1D2129;
}

.editor-layout .editor-layout-crumb-temp.theme0 .breadcrumb-item:last-child a i {
  color: #4E5969;
}

.editor-layout .editor-layout-crumb-temp.theme1 .breadcrumb-item:last-child a {
  color: var(--theme1);
}

.editor-layout .editor-layout-crumb-temp.theme1 .breadcrumb-item:last-child a i {
  color: #4E5969;
}

.editor-layout .editor-layout-crumb-temp.theme2 .breadcrumb-item:last-child a {
  color: var(--theme2);
}

.editor-layout .editor-layout-crumb-temp.theme2 .breadcrumb-item:last-child a i {
  color: #4E5969;
}

.editor-layout .editor-layout-crumb-temp.theme3 .breadcrumb-item:last-child a {
  color: var(--theme3);
}

.editor-layout .editor-layout-crumb-temp.theme3 .breadcrumb-item:last-child a i {
  color: #4E5969;
}

.editor-layout .editor-layout-crumb-temp.theme4 .breadcrumb-item:last-child a {
  color: var(--theme4);
}

.editor-layout .editor-layout-crumb-temp.theme4 .breadcrumb-item:last-child a i {
  color: #4E5969;
}

.editor-layout .editor-layout-crumb-temp.theme5 .breadcrumb-item:last-child a {
  color: var(--theme5);
}

.editor-layout .editor-layout-crumb-temp.theme5 .breadcrumb-item:last-child a i {
  color: #4E5969;
}

.editor-layout .editor-layout-crumb-temp.theme6 .breadcrumb-item:last-child a {
  color: var(--theme6);
}

.editor-layout .editor-layout-crumb-temp.theme6 .breadcrumb-item:last-child a i {
  color: #4E5969;
}

.editor-layout .editor-layout-crumb-temp.theme7 .breadcrumb-item:last-child a {
  color: var(--theme7);
}

.editor-layout .editor-layout-crumb-temp.theme7 .breadcrumb-item:last-child a i {
  color: #4E5969;
}

.editor-bar-panel .panel-item a {
  padding: 6px 8px;
  background-color: #dffffb;
  /* border: 1px solid #b1ddf8; */
  position: relative;
  border-radius: 5px;
  box-sizing: border-box;
  color: #167d71;
  width: 100%;
  font-weight: bold;
  display: block;
}

.editor-bar-panel .panel-item .add {
  color: #ffffff;
  text-align: center;
  background: #05a592;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 5px;
}

.panel-module {
  transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  position: relative;
  float: left;
  margin: 8px 0 8px 16px;
  border: 1px solid #40847c;
  border-radius: 5px;
  width: 41%;
  height: 68px;
  background: #40847c;
  color: #ffffff;
  text-align: center;
  font-size: 0.95rem;
}

.panel-module a {
  color: #fff;
}

.panel-module .icon {
  color: #fff;
  display: block;
  padding: 8px 0 5px 0;
  font-size: 1.65rem;
}

.panel-module-back {
  width: 230px;
  height: 33px;
  padding: 6px 8px;
  margin: 0 0 8px 17px;
  border: 1px solid #05a592;
  background: #05a592;
}

/* 左側選單 */
.panel-func-list {
  position: absolute;
  width: 250px;
  background: #eee;
  border-radius: 5px;
  padding: 10px;
  top: 30px;
}

.panel-func-item {
  transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  position: relative;
  float: left;
  margin: 5px;
  border-radius: 5px;
  width: 105px;
  height: 68px;
  background: #40847c;
  color: #ffffff;
  text-align: center;
  font-size: 0.85rem;
  overflow: hidden;
}

.drag-disable {
  background: #57ada3;
}

.drag-enable {
  background: #40847c;
  cursor: move;
}

.drag-enable-drag {
  opacity: 0.3;
  background: #40847c !important;
}

.drag-enable:hover {
  background: #ff714e;
}

.panel-func-back a,
.panel-func-item a {
  color: #ffffff;
}

.panel-func-item .icon {
  color: #fff;
  display: block;
  padding: 10px 0 5px 0;
  font-size: 1.65rem;
}

.editor-layout-panel {
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
}

.editor-layout-panel a {
  display: inline-block;
  background: #fff;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 120%;
  font-size: 18px;
  color: #222;
  margin-left: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.panel-func-back {
  padding: 8px;
  margin: 5px;
  border: 1px solid #05a592;
  background: #05a592;
  text-align: center;
  border-radius: 5px;
}

.search-school {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.popup-school .content {
  width: 94%;
  margin: auto;
}

.search-school>.box {
  display: flex;
  width: 50%;
  gap: 16px;
  padding: 0 16px;
}

.search-school>.box:first-child {
  border-right: 1px solid #ddd;
}

.search-school select {
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
}

.search-school .input label {
  font-size: 1rem;
  font-style: normal;
}

.search-school .directions {
  padding: 0 16px;
}

.popup-school .action-box {
  display: flex;
  padding: 0 16px;
  justify-content: center;
  gap: 8px;
}

.popup-school .action-box .btn {
  min-width: 110px;
}

.popup-school-list {
  margin-top: 50px;
}

.popup-school-list .list-wrap .list-box.head {
  border-top: 1px solid #ccc;
}

.popup-school-list .list-wrap .list-box.head li {
  color: var(--theme-foreground-1);
  justify-content: center !important;
}

.popup-school-list .list-wrap .list-box li:nth-child(1) {
  width: 20%;
  justify-content: center;
}

.popup-school-list .list-wrap .list-box li {
  align-self: center;
}

.popup-school-list .list-wrap .list-box li:nth-child(2) {
  width: 20%;
  justify-content: center;
}

.popup-school-list .list-wrap .list-box li:nth-child(3) {
  width: 50%;
  justify-content: flex-start;
}

.popup-school-list .list-wrap .list-box li:nth-child(4) {
  width: 150px;
  justify-content: center;
}

.popup-school-list .list-wrap .list-box li {
  padding: 20px 10px;
}

.popup-school .show-paging {
  display: flex;
  justify-content: center;
  padding: 15px 50px;
}

.popup-school .show-paging .paging-box {
  justify-content: center;
}

.popup-term {
  max-width: 1200px;
}

.popup-term .content {
  line-height: 1.5;
}


/* 跳轉頁面
---------------------------------------------- */
.jump {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  padding: 50px;
  /*by david*/
  /*min-height: calc(100vh - 209px);*/
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.jump p {
  background: url(../images/icon/warning2_0.png) center top no-repeat;
  background-size: 100px;
  padding-top: 110px;
  text-align: center;
  font-size: 1.25rem;
  margin-bottom: 30px;
}

.jump .btn-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.jump .btn-wrap .btn {
  color: #fff;
  border-radius: 100px;
  margin: 0;
  font-size: 1.125rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  max-width: 160px;
  height: 50px;
}

.jump .btn-wrap .confirm {
  background: #F05716;
}

.jump .btn-wrap .back {
  background: #00267F;
}

/* 跳轉頁面 end
---------------------------------------------- */

/* rwd
---------------------------------------------- */

@media(max-width:1280px) {
  .site-main-nav .lev2-nav>li {
    width: calc(25% - 24px);
  }

  .site-side-content .book-list.grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media(max-width:992px) {
  .login-popup .login-wrap {
    display: flex;
    justify-content: center;
    min-height: calc(100vh - 322px);
    overflow-y: auto;
    padding: 50px 0;
  }

  .site-main-nav,
  .site-side-nav {
    display: none;
  }

  .site .site-content.site-side-content .content-box {
    width: 100%;
  }

  .sitemap .box .unit {
    min-height: 90px;
  }

  .site .site-header {
    flex-direction: column-reverse;
    gap: 5px;
  }

  .page-tool {
    justify-content: flex-end;
    width: 100%;
  }

  /* .header .misc-box-m .misc-m li {
    align-self: center;
  } */

  .site-side-content .book-list.grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 820px) {
  .login-popup .login-wrap .login-select {
    flex-wrap: wrap;
  }

  .sitemap .box {
    width: 100%;
  }

  .sitemap .box .unit {
    height: auto;
    min-height: auto;
    padding: 10px 13px 7px 13px;
  }
}

@media (max-width: 768px) {

  .mydate .upload .list-wrap .list-box.head,
  .member-upload-more .list-wrap .list-box.head {
    display: none !important;
  }

  .mydate .upload .list-wrap .list-box.list,
  .member-upload-more .list-wrap .list-box.list {
    flex-wrap: wrap;
  }

  .mydate .upload .list-wrap .list-box.list li,
  .member-upload-more .list-wrap .list-box.list li {
    width: 100% !important;
  }

  .mydate .upload .list-wrap .list-box.list li .item,
  .member-upload-more .list-wrap .list-box.list li .item {
    display: flex !important;
    width: 96px;
    align-self: center;
    color: var(--neutral-text-2);
    font-size: 1rem;
  }

  .mydate .upload .list-wrap .list-box.list li .box,
  .member-upload-more .list-wrap .list-box li .box {
    justify-content: flex-start !important;
    width: calc(100% - 96px) !important;
  }

  .book-list.grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .site-side-content .book-list.grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 640px) {
  .sitemap .box {
    width: 100%;
  }

  .sitemap .box .unit {
    height: auto;
    padding: 8px 15px 6px 15px;
    margin-bottom: 10px;
  }

  .accessibility {
    margin: 0;
    padding: 20px;
  }

  .login-popup .login-wrap {
    width: 100%;
    display: flex;
    position: relative;
    flex-wrap: wrap;
    gap: 8px;
    min-height: auto;
    padding: 27px 0;
  }

  .login-popup .login-wrap .login-form  .box .ct {
    width: 100%;
    display: flex;
    position: relative;
    flex-wrap: wrap;
    gap: 8px;
  }

  .login-popup .login-wrap .login-form  .box {
    flex-wrap: wrap;
  }

  .login-popup .login-wrap .login-form  .box strong {
    width: 100%;
    display: block;
  }

  .login-popup .login-wrap .login-form  .btn-wrap .btn {
    width: calc(100% / 2 - 10px);
  }

  .news .news-list .list-wrap .list-box {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 0px;
  }

  .news .news-list .list-wrap .list-box.head {
    display: none;
  }

  .news .news-list .list-wrap .list-box li {
    align-items: center;
  }

  .news .news-list .list-wrap .list-box li:last-child.new::before {
    left: 7px;
    top: -10px;
  }

  .news .news-list .list-wrap .list-box li:last-child {
    flex-basis: auto;
    order: 1;
  }

  .news .news-list .list-wrap .list-box .category {
    order: 2;
  }

  .news .news-list .list-wrap .list-box li:nth-child(2) {
    order: 4;
  }

  .news .news-list .list-wrap .list-box li:nth-child(1) {
    order: 3;
    flex-basis: auto;
  }

  .news .news-list .list-wrap .list-box li.date,
  .news .news-list .list-wrap .list-box li.category {
    max-width: 99999px;
  }

  .video-list[data-layout="grid"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .book-list.grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .site-side-content .book-list.grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 拖拉版面編輯 */
  .editor-wrapper {
    padding: 0px;
  }

  .panel-func-list {
    position: static;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .panel-func-back {
    width: 100%;
  }

  .drag-enable {
    width: calc(50% - 10px);
  }

  .editor-layout {
    width: 100%;
    margin: 24px 0 0 0;
  }

  .editor-layout .editor-layout-content-drop1,
  .editor-layout .editor-layout-content-drop2,
  .editor-layout .editor-layout-content-drop3,
  .editor-layout .editor-layout-content-drop4,
  .editor-layout .editor-layout-content-drop5,
  .editor-layout .editor-layout-content-drop6,
  .editor-layout .editor-layout-content-drop7 {
    height: 180px;
  }
}

@media (max-width: 520px) {
  .cirn-agreement-title {
    width: 346px;
  }
}

@media (max-width: 480px) {
  .login-popup .login-wrap .login-form  .box .ct .CImage {
    height: 30px;
  }

  .video-list[data-layout="grid"] {
    grid-template-columns: repeat(1, 1fr);
  }

  .video-list li {
    border-bottom: none;
    margin-bottom: 0.5rem;
  }

  .video-list li a {
    flex-direction: column;
  }

  .video-list li a div:first-child {
    flex-basis: 100%;
    width: 100%;
  }

  .news-list-2 {
    gap: 0.5rem;
  }

  .news-list-2 li a {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .news-list-2 li a .thumbnail {
    order: 1;
    flex-basis: 100%;
    width: 100%;
  }

  .news-list-2 li a .date {
    order: 2;
    background-color: rgba(0, 0, 0, 0);
    flex-direction: row;
    padding: 0px;
    font-size: 0.875rem;
    line-height: 140%;
    /* 1.225rem */
    margin-bottom: -0.5rem;
  }

  .news-list-2 li a .date span:first-child {
    margin-bottom: 0px;
  }

  .news-list-2 li a .headline {
    order: 3;
  }

  .book-list.grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-side-content .book-list.grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .verify-box input[type=text] {
    width: 100% !important;
  }

  .login-popup .login-wrap .login {
    padding: 40px 15px 30px 15px;
  }

  .agree-box .checkbox {
    align-items: flex-start;
    margin-top: 2px;
  }

  .agree-box .checkbox .checkmark {
    margin-top: 2.5px;
  }

  .agree-ct .consent {
    width: 100%;
    display: block;
    margin-top: 5px;
  }
}

@media (max-width: 375px) {
  .header {
    height: 70px;
  }

  .header .logo-box {
    gap: 8px;
  }

  .header .logo-box .logo {
    width: 95px;
    height: 43px;
    background: url(../images/logo.svg) 0 0 no-repeat;
    background-size: 100%;
  }

  .header .logo-box .beehive-img img {
    width: 42px;
  }

  .main {
    padding-top: 70px;
  }

  .header .misc-box-m .misc-m a {
    font-size: 0.9rem;
  }

  .cirn-agreement-title {
    width: 280px;
    font-size: 1.356rem !important;
  }
}


.mySwiper .swiper-pagination {
	display: inline-flex;
    width: -moz-fit-content;
    width: fit-content;
    padding: 4px 8px;
    margin: 0 auto;
    list-style: none;
    text-align: center;
    z-index: 1;
	background: var(--theme-background-2);
    border-radius: 150px;
	width: auto !important;
}

.mySwiper .swiper-controls {
    background: var(--theme-background-3);
	border-radius: 30px;
}

.mySwiper .swiper-pagination-bullet {
	margin: 0 !important;
    background: #fff;
	opacity: .5;
}

.mySwiper .swiper-pagination-bullet-active {
    background: var(--theme-background-4);
    background: #fff;
	opacity: 1;
}

.mySwiper .swiper-button-prev,
.mySwiper .swiper-button-next {
	width: 25px;
	height: 25px;
	color: var(--theme-background-1);
}


/* 快速連結 */
.side-sticky {
	position: fixed;
	right: 0;
	top: 0;
	z-index: 11;
}

.side-sticky-btn {
	position: fixed;
	right: 0;
	top: calc(50% - 160px / 2);
	width: 56px;
	height: 160px;
	color: #fff;
	background-color: var(--theme-background-2);
	font-size: 18px;
	line-height: 26px;
	font-weight: 700;
	padding: 15px;
	border-radius: 10px 0 0 10px;
	cursor: pointer;
	transition: .5s ease;
	text-align: center;
	box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
}

.side-sticky-btn img {
	width: 20px;
	display: block;
	margin: 0 auto 8px;
}

.side-sticky-content {
	position: fixed;
	right: -160px;
	top: 50%;
	width: 160px;
    transform: translateY(-50%);
    height: auto;
	background: #fff;
	transition: .5s ease;
	padding: 20px;
	display: flex;
	flex-direction: column;
	/*flex-content: center;*/
	border-radius: 10px 0 0 10px;
	min-height: 360px;
	max-height: 80vh;
    overflow: auto;
}

.side-sticky-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.side-sticky-menu li + li {
	margin: 10px 0 0;
}

.side-sticky-menu a {
	color: #fff;
	background-color: var(--theme-background-2);
	display: block;
	text-align: center;
	border-radius: 20px;
	padding: .5em 1em;
}

.side-sticky-menu .home {
	background-color: #fff;
	box-shadow: 0 0 0 1px #eee inset;
}

.side-sticky-menu .home img {
	width: 100%;
	max-width: 100px;
    display: block;
	margin: 0 auto;
}

.side-sticky-menu a:hover {
	filter: brightness(1.1);
}

.side-sticky.active .side-sticky-btn {
	right: 156px;
}

.side-sticky.active .side-sticky-content {
	right: 0;
	box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
}

@media (max-width: 480px) {

	.side-sticky-btn {
		top: calc(50% - 148px / 2);
		width: 40px;
		height: 148px;
		font-size: 16px;
		line-height: 24px;
		padding: 10px;
	}

	.side-sticky.active .side-sticky-content {
		right: 0;
	}

}

/* 最新消息 版型2 */
.site-news-list .list-wrap .list-2 {
	border: 1px solid var(--theme-background-3);
	background-color: var(--theme-background-4);
	border-radius: 10px;
	/*flex-wrap: wrap;*/
}

.site-news-list .list-wrap .list-2 + .list-2 {
	margin-top: 16px;
}

.site-news-list .list-wrap .list-2 li:nth-child(1) {
    width: 90px;
}

.site-news-list .list-wrap .list-2 li:nth-child(1) .txt {
    padding-top: 0;
}

.site-news-list .list-wrap .list-2 li:nth-child(2) {
    width: 160px;
}

.site-news-list .list-wrap .list-2 li:nth-child(3) {
    width: calc(100% - 160px - 90px);
}

.site-news-list .list-wrap .list-2 li {
    display: block;
}


.site-news-list .list-wrap .list-2 .image {
	border-radius: 10px;
	overflow: hidden;
}

.site-news-list .list-wrap .list-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.site-news-list .list-wrap .list-2 .box-date {
	background-color: var(--theme-background-2);
	border-radius: 5px;
	color: #fff;
	text-align: center;
	padding: 8px 0;
}

.site-news-list .list-wrap .list-2 .year {
	display: block;
	font-size: 16px;
}

.site-news-list .list-wrap .list-2 .date {
	display: block;
	font-size: 24px;
}

.site-news-list .list-wrap .list-2 li .tag-box .tag {
    color: #333;
    background-color: var(--theme-background-3);
    border-color: var(--theme-background-2);
}

.site-news-list .list-wrap .list-2 .txt {
	margin-bottom: .5em;
}

@media (max-width: 480px) {
		
	.site-news-list .list-wrap .list-2 {
		flex-wrap: wrap;
	}
	
	.site-news-list .list-wrap .list-2 li:nth-child(1) {
		width: 100%;
	}
	
	.site-news-list .list-wrap .list-2 .box-date {
		padding: 8px;
		display: inline-block;
	}
	
	.site-news-list .list-wrap .list-2 li:nth-child(1) .txt {
		padding: 0;
		display: flex;
	}
	
	.site-news-list .list-wrap .list-2 .year {
		font-size: 14px;
	}
	
	.site-news-list .list-wrap .list-2 .year:after {
		content: "/";
	}

	.site-news-list .list-wrap .list-2 .date {
		font-size: 14px;
	}

	.site-news-list .list-wrap .list-2 li:nth-child(2) {
		width: 100%;
	}

	.site-news-list .list-wrap .list-2 li:nth-child(3) {
		width: 100%;
	}


}