@charset "UTF-8";
/***
	create 2025/05/01
	edit   2025/07/15
***/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&display=swap");
:root {
  --base-font-size: 1rem;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans TC", "Noto Sans", sans-serif;
  font-size: var(--base-font-size);
  line-height: 1.6;
  color: #073036;
  width: 100%;
  min-height: 100%;
}

* {
  box-sizing: border-box;
}

a, button {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
  display: inline-block;
}
a .img-hover, button .img-hover {
  transform: scale(1, 1);
  transition: all 0.3s;
}
a:focus, button:focus {
  outline: 2px dashed #CC3333;
}
a:hover .img-hover, a:focus .img-hover, button:hover .img-hover, button:focus .img-hover {
  transform: scale(1.05, 1.05);
}

input, select, textarea {
  border-radius: 100px;
  font-family: "Noto Sans TC", "Noto Sans", sans-serif;
  padding: 0.7em 20px;
  width: 100%;
  border: 1px solid #AACF52;
  font-size: 1em;
}
input:focus, select:focus, textarea:focus {
  outline: 2px dashed #CC3333;
  background-color: #F5F5F5;
}

textarea {
  resize: none;
}

button {
  cursor: pointer;
  font-family: "Noto Sans TC", "Noto Sans", sans-serif;
  font-size: 1em;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: inherit;
  display: flex;
  align-items: center;
}
button:focus {
  outline: 2px dashed #CC3333;
}

img {
  max-width: 100%;
}

input::-webkit-input-placeholder {
  color: #A2A2A2;
}
input:-moz-placeholder {
  color: #A2A2A2;
}
input::-moz-placeholder {
  color: #A2A2A2;
}
input:-ms-input-placeholder {
  color: #A2A2A2;
}
input::placeholder {
  color: #A2A2A2;
}

select {
  padding-right: 42px !important;
  appearance: none;
  background: #fff url(../images/template/icon_arrow.svg) no-repeat calc(100% - 20px) center;
  background-size: 12px auto;
}

.color-g {
  color: #63801E;
}

.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.align-center {
  align-items: center;
}

.align-top {
  align-items: flex-start;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-bold {
  font-weight: bold !important;
}

.sr-only-focusable {
  padding: 10px;
  display: inline-block;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -999;
  background-color: #fff;
}
.sr-only-focusable:focus {
  z-index: 999;
  opacity: 1;
}

#app {
  font-size: 1rem;
}

.wrap {
  width: 84%;
  margin: 0 auto;
}

.web-hide {
  display: none !important;
}

.hide {
  display: none !important;
}

.t-show {
  display: none !important;
}
.m-show {
    display: none !important;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.dropdown {
  position: relative;
}
.dropdown .sub {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 100%;
  z-index: 5;
}
.dropdown [aria-hidden='true'] {
  display: none !important;
}
.dropdown [aria-hidden='false'] {
  display: block !important;
}

.carousel, .filter-carousel {
  width: 100%;
  position: relative;
}
.carousel .carousel-outwrap, .filter-carousel .carousel-outwrap {
  overflow: hidden;
}
.carousel .carousel-wrap, .filter-carousel .carousel-wrap {
  height: 100%;
  display: flex;
  transition: transform 0.5s ease;
}
.carousel .carousel-item, .filter-carousel .carousel-item {
  height: 100%;
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  padding: 0 1px;
}
.carousel .carousel-arrow[disabled], .filter-carousel .carousel-arrow[disabled] {
  opacity: 0.5;
  filter: grayscale(100%);
  pointer-events: none;
}
.carousel .carousel-bottom, .filter-carousel .carousel-bottom {
  display: flex;
  justify-content: center;
  padding: 4px 0;
  margin-top: 20px;
}
.carousel .carousel-bottom button, .filter-carousel .carousel-bottom button {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #AACF52;
  border: none;
  margin: 0 4px;
  cursor: pointer;
  font-size: 0;
}
.carousel .carousel-bottom button.active, .filter-carousel .carousel-bottom button.active {
  background-color: #63801E;
}

.btn {
  background-color: #63801E;
  color: #fff;
  border: 1px solid #B0DA87;
  border-radius: 100px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.btn:hover, .btn:focus {
  background-color: #073036;
}
.btn.btn-w {
  background-color: transparent;
  color: #63801E;
  border-color: #63801E;
}
.btn.btn-w:hover, .btn.btn-w:focus {
  background-color: #F0F5E3;
}

#mask {
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
}

#header {
  background-color: #fff;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 99;
  padding: 20px 0;
}
#header .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#header .logo {
  width: 404px;
  height: 57px;
  transition: all 0.3s;
  margin: 0;
}
#header .logo a {
  display: block;
  width: 404px;
  height: 57px;
}
#header .logo a img {
  vertical-align: top;
}
#header .header-right {
  display: flex;
  flex-direction: column;
}
#header .header-right ul {
  list-style: none;
  display: inline-flex;
  margin: 0 0 12px;
  padding: 0;
  align-items: center;
}
#header .header-right ul li {
  display: inline-flex;
  align-items: center;
}
#header .header-right ul li:first-child a::before {
  display: none;
}
#header .header-right ul li a {
  display: inline-flex;
  align-items: center;
  padding: 0.05em 12px;
  position: relative;
}
#header .header-right ul li a::before {
  width: 1px;
  height: 1em;
  background-color: #63801E;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  content: "";
}

#header .header-right ul li .faq_btn {
    position: relative;
    padding: 0.05em 12px;
}
#header .header-right ul li .faq_btn::before {
    width: 1px;
    height: 1em;
    background-color: #63801E;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content: "";
}
#header .header-right ul li .faq_btn:hover, #header .header-right ul li .faq_btn:focus {
    background-color: #F0F5E3;
}

#header .header-right ul li a:hover, #header .header-right ul li a:focus {
  background-color: #F0F5E3;
}
#header .header-right ul li i {
  width: 18px;
  height: 18px;
  margin-right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#header .header-right #header-search {
  display: flex;
  align-items: center;
}
#header .header-right #header-search .search-box {
  flex: 1 0;
  position: relative;
  margin-right: 8px;
}
#header .header-right #header-search .search-box input {
  padding-right: 55px;
}
#header .header-right #header-search .search-box .btn-search {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 9px;
  right: 20px;
  font-size: 0;
}
#header .header-right #header-search .search-box .btn-search svg {
  fill: #63801E;
}
#header .header-right #header-search .search-box .btn-search:hover svg, #header .header-right #header-search .search-box .btn-search:focus svg {
  fill: #073036;
}
#header .header-right #header-search a {
  color: #63801E;
  text-decoration: underline;
}
#header .header-right #header-search a:hover, #header .header-right #header-search a:focus {
  text-decoration: none;
  color: #073036;
}
#header.scroll {
  padding: 11px 0;
}
#header.scroll .logo {
  width: 311px;
  height: 45px;
}
#header.scroll .logo a {
  width: 311px;
  height: 45px;
}
#header.scroll .header-right {
  flex-direction: row;
}
#header.scroll .header-right ul {
  margin: 0;
}
#header.scroll .header-right #header-search {
  display: inline-flex;
  margin-left: 18px;
}
#header.scroll .header-right #header-search .search-box {
  flex: auto;
  /*width: 186px;*/
  width: 195px;
}
#header.scroll .header-right #header-search .search-box input {
  padding: 0.3em 40px 0.3em 13px;
  font-size: 0.875em;
}
#header.scroll .header-right #header-search .search-box .btn-search {
  width: 18px;
  height: 18px;
  top: 6px;
  right: 13px;
}

#container {
  padding-top: 129px;
  position: relative;
  overflow: hidden;
}
#container::before {
  position: absolute;
  width: 848px;
  height: 999px;
  right: 0;
  top: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background: url(../images/template/bg1.png) no-repeat right top;
  background-size: contain;
}
#container::after {
  position: absolute;
  width: 319px;
  height: 436px;
  left: 0;
  top: 1060px;
  z-index: -1;
  pointer-events: none;
  content: "";
  background: url(../images/template/bg2.png) no-repeat right top;
  background-size: contain;
}

#footer {
  padding: 30px 0;
  background: linear-gradient(180deg, #F4F4F4 0%, #CFCFCF 100%);
  position: relative;
}
#footer::before {
  width: 305px;
  height: 370px;
  position: absolute;
  content: "";
  background: url(../images/template/bg_bottom.png) no-repeat right bottom;
  top: -524px;
  right: 0;
  z-index: -1;
  pointer-events: none;
}
#footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
#footer .footer-left {
  width: 365px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
#footer .footer-left .logo {
  width: 328px;
  height: 50px;
  margin-left: 12px;
  margin-bottom: 12px;
}
#footer .footer-left ul {
  list-style: none;
  display: inline-flex;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}
#footer .footer-left ul li {
  display: inline-flex;
  align-items: center;
  font-size: 0.75em;
  position: relative;
  padding: 0 10px;
}
#footer .footer-left ul li:first-child {
  padding-left: 0;
}
#footer .footer-left ul li:first-child::before {
  display: none;
}
#footer .footer-left ul li::before {
  width: 1px;
  height: 1em;
  background-color: #63801E;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  content: "";
}
#footer .footer-left ul li i {
  width: 14px;
  height: 17px;
  margin-right: 3px;
}
#footer .footer-left .logo-group {
  /*margin-top: 18px;*/
  text-align: right;
  width: 100%;
  padding-right: 10px;
}
#footer .footer-left .logo-group a {
  margin-left: 12px;
}
#footer .footer-left .logo-group a img {
  height: 50px;
  width: auto;
  vertical-align: bottom;
}
#footer .footer-right {
  flex: 1 0;
}
#footer .footer-right p {
  margin: 0;
}
#footer .footer-right p.copyright {
  margin-top: 20px;
  font-size: 1em;
}

.btn-top {
  position: fixed;
  right: 0;
  /*bottom: calc(10% - 70px);*/
  bottom: 30px;
  z-index: 99;
  padding: 7px 11px;
  background-color: #63801E;
  width: 60px;
  border-radius: 15px 0 0 15px;
  display: none;
}
.btn-top:hover, .btn-top:focus {
  background-color: #073036;
}

#qk-menu {
  position: fixed;
  right: -257px;
  bottom: 20%;
  z-index: 99;
  height: 257px;
  display: flex;
  align-items: flex-start;
  transition: right 0.3s;
}
#qk-menu.active {
  right: 0;
}
#qk-menu .qk-collapse {
  position: absolute;
  left: -60px;
  top: 0;
  width: 60px;
  border-radius: 20px 0 0 20px;
  background-color: #B0DA87;
  writing-mode: vertical-lr;
  padding: 20px;
  font-size: 1.25em;
  letter-spacing: 0.725em;
  text-align: center;
}
#qk-menu .qk-collapse:hover, #qk-menu .qk-collapse:focus {
  background-color: #AACF52;
}
#qk-menu .qk-collapse i {
  width: 18px;
  height: 18px;
  margin-top: 0.25em;
}
#qk-menu .qk-collapse i img {
  vertical-align: bottom;
  width: 18px;
  height: 18px
}
#qk-menu .qk-menu {
  width: 257px;
  padding: 12px;
  border-radius: 0 0 0 20px;
  background-color: #B0DA87;
}
#qk-menu .qk-menu a {
  border-radius: 100px;
  background-color: #fff;
  padding: 10px 48px 10px 24px;
  position: relative;
  margin: 8px 0;
  display: block;
}
#qk-menu .qk-menu a:hover, #qk-menu .qk-menu a:focus {
  background-color: #F0F5E3;
}
#qk-menu .qk-menu a::after {
  position: absolute;
  width: 16px;
  height: 16px;
  content: "";
  background: url(../images/template/fixed_more.svg) no-repeat center center;
  background-size: contain;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.menu-box {
  margin-top: 12px;
  transition: all 0.3s;
}
.menu-box.scroll {
  margin-top: 0;
  position: fixed;
  left: 0;
  top: 66px;
  width: 100%;
  z-index: 99;
  border-top: 1px solid #63801E;
  background-color: #fff;
}
.menu-box.scroll #menu {
  border: none;
}
.menu-box.scroll #menu > ul > li > button .icon, .menu-box.scroll #menu > ul > li > a .icon {
  display: none;
}
.menu-box.scroll #menu > ul > li > button p, .menu-box.scroll #menu > ul > li > a p {
  padding: 15px;
}

#menu {
  border: 1px solid #63801E;
  border-radius: 30px;
  background-color: #fff;
}
#menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#menu > ul {
  display: flex;
}
#menu > ul > li {
  position: relative;
  flex: 1;
}
#menu > ul > li > button, #menu > ul > li > a {
  display: block;
  width: 100%;
  border-radius: 30px;
}
#menu > ul > li > button p, #menu > ul > li > a p {
  margin: 0;
  font-size: 1.25em;
  text-align: center;
  padding: 20px;
  line-height: 1;
  position: relative;
}
#menu > ul > li > button p i, #menu > ul > li > a p i {
  width: 10px;
  height: 6px;
  margin-left: 10px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -5px;
}
#menu > ul > li > button p i img, #menu > ul > li > a p i img {
  vertical-align: top;
}
#menu > ul > li > button:hover, #menu > ul > li > button:focus, #menu > ul > li > a:hover, #menu > ul > li > a:focus {
  background-color: #F0F5E3;
}
#menu > ul > li .sub {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 120%;
  background-color: #fff;
  border-width: 12px;
  border-style: solid;
  border-color: rgba(170, 207, 82, 0.6);
  border-radius: 10px;
  padding: 13px;
  display: block;
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
}
#menu > ul > li .sub a, #menu > ul > li .sub button {
  padding: 10px 12px;
  border-bottom: 1px solid #AACF52;
  width: 100%;
  position: relative;
  text-align: left;
}
#menu > ul > li .sub a:hover, #menu > ul > li .sub a:focus, #menu > ul > li .sub button:hover, #menu > ul > li .sub button:focus {
  background-color: #B0DA87;
}
#menu > ul > li .sub a i, #menu > ul > li .sub button i {
  width: 10px;
  height: 6px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
#menu > ul > li .sub a i img, #menu > ul > li .sub button i img {
  vertical-align: top;
}
#menu > ul > li .sub .sub {
  position: static;
  width: 100% !important;
  background-color: #F0F5E3;
  border: none;
  transform: translateX(0);
  padding: 0;
}
#menu > ul > li .sub .sub a {
  border-bottom-style: dashed;
  border-bottom-color: #63801E;
  padding-left: 30px;
}
#menu > ul > li .sub .sub a::before {
  width: 6px;
  height: 6px;
  position: absolute;
  left: 16px;
  top: 20px;
  content: "";
  background-color: #B0DA87;
  border-radius: 100%;
}

#breadcrumbs {
  padding: 20px 40px 12px;
  font-size: 0.875em;
  margin: 0 0 30px;
  list-style: none;
  scroll-margin-top: 120px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
}
#breadcrumbs li {
  display: inline-flex;
  align-items: center;
}
#breadcrumbs li::after {
  width: 12px;
  height: 12px;
  content: "";
  background: url(../images/template/icon_breadcrumbs_arrow.svg) no-repeat center center;
  background-size: contain;
  display: inline-block;
  margin-right: 5px;
}
#breadcrumbs li:first-child::after {
  display: none;
}
#breadcrumbs li:nth-child(2) a::before {
  width: 16px;
  height: 14px;
  margin-right: 5px;
  content: "";
  background: url(../images/template/icon_home.svg) no-repeat center center;
  background-size: contain;
  display: inline-block;
}
#breadcrumbs li:last-child {
  flex: 1 1 auto;
  min-width: 0;
}
#breadcrumbs li:last-child::after {
  display: none;
}
#breadcrumbs li:last-child a {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: #63801E;
  display: inline-block;
  color: #fff;
}
#breadcrumbs li:last-child a:hover, #breadcrumbs li:last-child a:focus {
  background-color: #63801E;
}
#breadcrumbs li a {
  color: #63801E;
  padding: 0 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
#breadcrumbs li a:hover, #breadcrumbs li a:focus {
  background-color: #F0F5E3;
}

.section {
  padding: 30px 0;
}
.section.section-box {
  border: 1px solid #63801E;
  border-radius: 30px;
  padding: 30px;
  box-shadow: -25px 25px 0px 0px #F0F5E3;
  background-color: #fff;
}
.section + .section {
  margin-top: 30px;
}
.section.section-bg {
  padding: 20px 40px;
  background-color: rgba(255, 255, 255, 0.7);
}
.section.section-bg * + .h4 {
  margin-top: 20px;
}
.section.section-bg .h4 {
  font-size: 1.125em;
  font-weight: 500;
  margin-bottom: 8px;
}
.section.section-bg ol {
  margin: 8px 0;
  padding-left: 1.2em;
}
.section.section-bg ol li::marker {
  color: #63801E;
}
.section.section-bg ol.list-inline {
  list-style: none;
  counter-reset: item;
  padding: 0;
}
.section.section-bg ol.list-inline li {
  display: inline-block;
  vertical-align: top;
  counter-increment: item;
}
.section.section-bg ol.list-inline li::before {
  content: "（" counter(item) "）";
}
.section.section-bg ul {
  margin: 8px 0;
  padding-left: 1.2em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.section.section-bg ul li {
  position: relative;
  padding-left: 1.4em;
}
.section.section-bg ul li::before {
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #63801E;
  position: absolute;
  content: "";
  left: 0.5em;
  top: 0.7em;
}
.section.section-bg ul.list-none {
  padding-left: 0;
}
.section.section-bg ul.list-none li {
  display: flex;
  padding-left: 0;
}
.section.section-bg ul.list-none li::before {
  display: none;
}
.section.section-bg ul.list-none li .name {
  color: #63801E;
  margin-right: 10px;
}
.section.section-bg .h3 {
  font-size: 1.875em;
  font-family: "Noto Serif TC", "Noto Sans", sans-serif;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 8px;
}
.section.section-bg .btn-block {
  text-align: center;
  margin-top: 30px;
  width: 100%;
}
.section.section-bg .btn-block .btn {
  width: 180px;
  margin: 0 10px;
  padding: 12px;
  font-size: 1.125em;
}

.table {
  margin-top: 30px;
}
.table table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #B0DA87;
}
.table table thead {
  background-color: #63801E;
  color: #fff;
  border-top: 1px solid #B0DA87;
  border-bottom: 1px solid #B0DA87;
}
.table table thead th {
  white-space: nowrap;
  font-weight: normal;
  text-align: left;
}
.table table th, .table table td {
  padding: 10px 12px;
  vertical-align: top;
}
.table table tbody tr {
  border-bottom: 1px dashed #63801E;
}
.table table .tag {
  display: inline-flex;
  border-radius: 20px;
  padding: 5px 12px;
  justify-content: center;
  align-items: center;
  background-color: #F0F5E3;
  width: 90px;
}
.table table .tag[class*='tag-']::before {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  margin-right: 10px;
  content: '';
}
.table table .tag.tag-zip {
  background-color: #0A72B3;
  color: #fff;
}
.table table .tag.tag-zip::before {
  background-image: url(../images/page/icon_zip.svg);
}
.table table .tag.tag-pdf {
  background-color: #CC3333;
  color: #fff;
}
.table table .tag.tag-pdf::before {
  background-image: url(../images/page/icon_pdf.svg);
}
.table table .tag.tag-img {
  background-color: #137C73;
  color: #fff;
}
.table table .tag.tag-img::before {
  background-image: url(../images/page/icon_pic.svg);
}
.table table .tag.tag-odf {
  background-color: #0074E0;
  color: #fff;
}
.table table .tag.tag-odf::before {
  background-image: url(../images/page/icon_odf.svg);
}
.table table a.tag:hover, .table table a.tag:focus {
  background-color: #073036;
  color: #fff;
}
.table .flex-table {
  width: 100%;
  border-top: 1px solid #B0DA87;
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.6);
}
.table .flex-table .flex-head {
  background-color: #63801E;
  color: #fff;
  border-top: 1px solid #B0DA87;
  border-bottom: 1px solid #B0DA87;
}
.table .flex-table .flex-head .flex-td {
  white-space: nowrap;
}
.table .flex-table .flex-row {
  display: flex;
}
.table .flex-table .flex-td {
  padding: 10px 12px;
  flex: 1;
}
.table .flex-table .flex-td.flex-col1 {
  width: 80px;
  flex: none;
}
.table .flex-table .flex-td.flex-col2 {
  flex: 2;
}
.table .flex-table .flex-td.flex-col4 {
  flex: 4;
}
.table .flex-table .flex-td.flex-col10 {
  flex: 10;
}
.table .flex-table .flex-body {
  display: flex;
  flex-direction: column;
}
.table .flex-table .flex-body .flex-row {
  border-bottom: 1px dashed #63801E;
}
.table .flex-table .flex-body .flex-row:hover, .table .flex-table .flex-body .flex-row:focus {
  background-color: #F0F5E3;
}
.table .limit {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.6em;
  max-height: 3.2em;
}

.section-title {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 20px;
}
.section-title a + .h2 {
  margin-left: 41px;
}
.section-title .h2 {
  font-size: 2.5em;
  display: flex;
  align-items: center;
  margin: 0;
  font-family: "Noto Serif TC", "Noto Sans", sans-serif;
}
.section-title .h2 i {
  width: 50px;
  height: 50px;
  margin-right: 11px;
}
.section-title .h3 {
  font-size: 2em;
  display: flex;
  align-items: center;
  margin: 0;
  font-family: "Noto Serif TC", "Noto Sans", sans-serif;
}
.section-title .tools {
  margin-left: 12px;
  display: flex;
  gap: 12px;
}
.section-title .tools .carousel-arrow {
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  border: 1px solid #63801E;
  position: static;
}
.section-title .tools .carousel-arrow img {
  width: 8px;
  height: 13px;
}
.section-title .tools .carousel-arrow-next img {
  transform: rotate(180deg);
}
.section-title .tools .carousel-arrow:hover, .section-title .tools .carousel-arrow:focus {
  background-color: #F0F5E3;
}
.section-title .btn-more {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}
.section-title.page-title {
  padding-left: 20px;
  padding-bottom: 0 !important;
}
.section-title.line {
  border-bottom: 1px solid #D2B58D;
  position: relative;
}
.section-title.line::before, .section-title.line::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 100%;
  position: absolute;
  bottom: -3px;
  background-color: #D2B58D;
}
.section-title.line::before {
  left: -3px;
}
.section-title.line::after {
  right: -3px;
}
.section-title .filter {
  display: flex;
  gap: 8px;
  align-items: center;
}
.section-title .filter select {
  width: 262px;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #073036;
  color: #fff;
  padding: 5px 20px;
  border-radius: 50px;
  box-shadow: 0px 0px 8px 0px rgba(50, 123, 62, 0.6);
  line-height: 1;
}
.btn-more i {
  width: 16px;
  height: 20px;
  margin-left: 7px;
  display: flex;
  align-items: center;
}
.btn-more:hover, .btn-more:focus {
  background-color: #63801E;
}

.filter-box {
  display: flex;
  padding: 19px 60px;
  align-items: center;
  flex-wrap: wrap;
  background-color: #F0F5E3;
  border: 1px solid #B0DA87;
  border-radius: 100px;
  margin: 30px 0;
}
.filter-box .col {
  display: flex;
  align-items: center;
  width: 50%;
  gap: 8px;
}
#searchList .filter-box .col {
    width: 30%;
}
#searchList .filter-box .last-col {
    width: 40%;
}
.n-filter-box .col {
    width: 30%;
}
.n-filter-box .last-col {
    width: 40%;
}
.filter-box .col label, .filter-box .col .label-name {
  display: flex;
  align-items: center;
}
.filter-box .col label i, .filter-box .col .label-name i {
  width: 19px;
  height: 14px;
  margin-right: 6px;
}
.filter-box .col label i img, .filter-box .col .label-name i img {
  vertical-align: top;
}
.filter-box .col select {
  width: 65%;
  padding-top: 0.55em;
  padding-bottom: 0.55em;
}
.filter-box .col input {
  width: 60%;
  padding-top: 0.55em;
  padding-bottom: 0.55em;
}
#searchList .filter-box .col input {
  width: 65%;
}
#searchList .filter-box .last-col input {
    width: 50%;
}
.n-filter-box .col input {
    width: 65%;
}
.n-filter-box .last-col input {
    width: 50%;
}
.filter-box .col button {
  width: 100px;
  padding: 0.55em;
}
.filter-box .col .select-group {
  width: 60%;
  position: relative;
}
#searchList .filter-box .col .select-group {
  width: 65%;
}
.n-filter-box .col .select-group {
    width: 65%;
}
.filter-box .col .select-group.active .select-wrap {
  display: block;
}
.filter-box .col .select-group .select-wrap {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  border-radius: 30px;
  background-color: #fff;
  border: 8px solid #00819E;
  min-width: 100%;
  width: max-content;
  max-width: none;
  z-index: 10;
}
.filter-box .col .select-group .select-wrap .select-box {
  padding: 25px 30px;
  border-radius: 30px;
  mask-image: radial-gradient(ellipse at top left, #000000 98%, rgba(0, 0, 0, 0) 100%), radial-gradient(ellipse at top right, #000000 98%, rgba(0, 0, 0, 0) 100%), radial-gradient(ellipse at bottom left, #000000 98%, rgba(0, 0, 0, 0) 100%), radial-gradient(ellipse at bottom right, #000000 98%, rgba(0, 0, 0, 0) 100%);
  mask-composite: intersect;
  -webkit-mask-composite: destination-in;
}
.filter-box .col .select-group .select-wrap .select-box .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px dashed #A2A2A2;
  margin-bottom: 25px;
}
.filter-box .col .select-group .select-wrap .select-box .top .btn-cancel {
  padding: 0;
  color: #63801E;
  width: auto !important;
}
.filter-box .col .select-group .select-wrap .select-box .top .btn-cancel::before {
  width: 18px;
  height: 18px;
  content: "";
  mask: url(../images/template/icon_reset.svg) no-repeat center center;
  mask-size: contain;
  background-color: #63801E;
  margin-right: 6px;
}
.filter-box .col .select-group .select-wrap .select-box .checkbox-group {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 12px 30px;
  height: 275px;
}
.filter-box .col .select-group .select-wrap .select-box .checkbox-item label {
  width: auto !important;
  white-space: nowrap;
}

#ss_box.active .select-wrap {
    display: block;
}
#ss_box .select-wrap {
    display: none;
    position: fixed;
    border-radius: 30px;
    background-color: #fff;
    border: 8px solid #00819E;
    min-width: 300px;
    width: max-content;
    max-width: none;
    z-index: 999;
}
#ss_box .select-wrap .select-box {
    padding: 25px 30px;
    border-radius: 30px;
    mask-image: radial-gradient(ellipse at top left, #000000 98%, rgba(0, 0, 0, 0) 100%), radial-gradient(ellipse at top right, #000000 98%, rgba(0, 0, 0, 0) 100%), radial-gradient(ellipse at bottom left, #000000 98%, rgba(0, 0, 0, 0) 100%), radial-gradient(ellipse at bottom right, #000000 98%, rgba(0, 0, 0, 0) 100%);
    mask-composite: intersect;
    -webkit-mask-composite: destination-in;
}
#ss_box .select-wrap .select-box .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px dashed #A2A2A2;
    margin-bottom: 25px;
}
#ss_box .select-wrap .select-box .top .btn-cancel {
    padding: 0;
    color: #63801E;
    width: auto !important;
}
#ss_box .select-wrap .select-box .top .btn-cancel::before {
    width: 18px;
    height: 18px;
    content: "";
    mask: url(../images/template/icon_reset.svg) no-repeat center center;
    mask-size: contain;
    background-color: #63801E;
    margin-right: 6px;
}
#ss_box .select-wrap .select-box .checkbox-group {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 12px 30px;
    height: 275px;
}
#ss_box .select-wrap .select-box .checkbox-item label {
    width: auto !important;
    white-space: nowrap;
}

.filter-box .col .btn-select-group {
  width: 100%;
  padding: 0.55em 20px;
  padding-right: 42px !important;
  background: #fff url(../images/template/icon_arrow.svg) no-repeat calc(100% - 20px) center;
  background-size: 12px auto;
  border-radius: 100px;
  border: 1px solid #AACF52;
  font-size: 1em;
}
.filter-box .col .btn-select-group:focus {
  outline: 2px dashed #CC3333;
  background-color: #F5F5F5;
}
.filter-box .row {
  width: 100%;
  padding: 20px 0 0;
  margin: 10px 0 0;
}
.filter-box .row + .row {
  padding-top: 10px;
}
.filter-box .row.line {
  border-top: 1px solid #AACF52;
}
.filter-box .row .name {
  display: flex;
  align-items: center;
}
.filter-box .row .name i {
  width: 19px;
  height: 19px;
  margin-right: 6px;
  display: flex;
  align-items: center;
}
.filter-box .row .name i img {
  vertical-align: top;
}
.filter-box .row .radio-group {
  display: flex;
}
.filter-box .row .link-group a {
  text-decoration: underline;
}
.filter-box .row .link-group a:hover {
  text-decoration: none;
}

.radio-item input {
  display: none;
}
.radio-item input:checked + label::after {
  width: 14px;
  height: 14px;
  border-radius: 100%;
  border: 5px solid #63801E;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background-color: #fff;
}
.radio-item label {
  padding-left: 30px;
  position: relative;
}
.radio-item label::before {
  width: 22px;
  height: 22px;
  border-radius: 100%;
  border: 1px solid #63801E;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background-color: #fff;
}

.checkbox-item {
  position: relative;
}
.checkbox-item input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  z-index: -10;
}
.checkbox-item input:checked + label::before {
  background-image: url(../images/template/checkbox_selected.svg);
}
.checkbox-item input:focus + label {
  outline: 2px dashed #CC3333;
}
.checkbox-item label {
  padding-left: 36px;
  position: relative;
  font-size: 1.125rem;
  color: #073036;
}
.checkbox-item label::before {
  width: 28px;
  height: 28px;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/template/checkbox.svg) no-repeat center center;
  background-size: contain;
}

.pagination {
  display: flex;
  align-items: center;
  margin-top: 60px;
  justify-content: center;
}
.pagination ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pagination ul li a, .pagination ul li span {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  border: 1px solid #63801E;
  color: #63801E;
}
.pagination ul li a.active, .pagination ul li span.active {
  background-color: #F0F5E3;
}
.pagination ul li a.btn-prev, .pagination ul li a.btn-next, .pagination ul li span.btn-prev, .pagination ul li span.btn-next {
  padding: 0.6em 20px;
  background-color: #63801E;
  color: #fff;
  width: auto;
  height: auto;
  border-radius: 30px;
}
.pagination ul li a.btn-prev i, .pagination ul li a.btn-next i, .pagination ul li span.btn-prev i, .pagination ul li span.btn-next i {
  width: 8px;
  height: 9px;
  margin-right: 5px;
}
.pagination ul li a.btn-prev i img, .pagination ul li a.btn-next i img, .pagination ul li span.btn-prev i img, .pagination ul li span.btn-next i img {
  vertical-align: top;
}
.pagination ul li a.btn-next i, .pagination ul li span.btn-next i {
  margin-right: 0;
  margin-left: 5px;
  transform: rotate(180deg);
}
.pagination ul li a:hover, .pagination ul li a:focus {
  background-color: #073036;
  color: #fff;
}
.pagination .page-go {
  margin-left: 66px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.pagination .page-go input {
  width: 100px;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
}
.pagination .page-go .btn {
  padding: 0.6em;
  width: 135px;
}

.page {
  padding-bottom: 40px;
}

.popup {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}
.popup[aria-hidden="true"] {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}
.popup .popup-window {
  border-radius: 30px;
  background-color: #fff;
  border: 8px solid #00819E;
  position: relative;
  width: 65%;
}
.popup .popup-window .btn-close {
  width: 70px;
  height: 70px;
  position: absolute;
  right: -35px;
  top: -35px;
  transition: all 0.3s;
  z-index: 5;
}
.popup .popup-window .btn-close:hover, .popup .popup-window .btn-close:hover {
  transform: rotate(180deg);
}
.popup .popup-window .popup-box {
  max-height: 80vh;
  overflow-y: auto;
  padding: 30px;
  border-radius: 30px;
  mask-image: radial-gradient(ellipse at top left, #000000 98%, rgba(0, 0, 0, 0) 100%), radial-gradient(ellipse at top right, #000000 98%, rgba(0, 0, 0, 0) 100%), radial-gradient(ellipse at bottom left, #000000 98%, rgba(0, 0, 0, 0) 100%), radial-gradient(ellipse at bottom right, #000000 98%, rgba(0, 0, 0, 0) 100%);
  mask-composite: intersect;
  -webkit-mask-composite: destination-in;
}
.popup .popup-window .tag-block {
  margin-bottom: 20px;
}
.popup .popup-window .tag-block .tag {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 50px;
  border: 1px solid #AACF52;
  font-size: 0.625em;
  align-items: center;
  font-weight: 600;
  margin: 0 12px 0 0;
}
.popup .popup-window .tag-block .tag.date {
  background-color: #F0F5E3;
}
.popup .popup-window .tag-block .tag.date::before {
  width: 15px;
  height: 15px;
  margin-right: 6px;
  background: url(../images/photoAlbum/icon_calendar2.svg) no-repeat center center;
  background-size: contain;
  content: "";
}
.popup .popup-window .tag-block .tag.view::before {
  width: 15px;
  height: 15px;
  margin-right: 6px;
  background: url(../images/photoAlbum/icon_eye.svg) no-repeat center center;
  background-size: contain;
  content: "";
}
.popup .popup-window .name {
  font-family: "Noto Serif TC", "Noto Sans", sans-serif;
  font-size: 1.5em;
  margin-bottom: 20px;
  font-weight: 700;
}
.popup .popup-window .video {
  position: relative;
  padding-top: 56%;
}
.popup .popup-window .video iframe, .popup .popup-window .video video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.popup .popup-window .date {
  padding: 10px 16px;
  text-align: right;
  border-top: 1px dashed #A2A2A2;
  margin-top: 20px;
  color: #63801E;
}
.popup .popup-window .btn-block {
  text-align: center;
  margin-top: 30px;
}
.popup .popup-window .btn-block .btn {
  width: 180px;
  margin: 0 10px;
  padding: 12px;
  font-size: 1.125em;
}
.popup .popup-window .carousel {
  position: relative;
}
.popup .popup-window .carousel .carousel-arrow {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(99, 128, 30, 0.7);
  position: absolute;
  top: 50%;
  margin-top: -25px;
  z-index: 5;
}
.popup .popup-window .carousel .carousel-arrow img {
  width: 50px;
  height: 50px;
}
.popup .popup-window .carousel .carousel-arrow.carousel-arrow-prev {
  left: 12px;
}
.popup .popup-window .carousel .carousel-arrow.carousel-arrow-next {
  right: 12px;
  transform: rotate(180deg);
}
.popup .popup-window .carousel .carousel-arrow:hover, .popup .popup-window .carousel .carousel-arrow:focus {
  background-color: #63801E;
}
.popup .popup-window .last-foucs {
  opacity: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -999;
  pointer-events: none;
}
.popup.feedbackPopup {
  align-items: flex-start;
  padding-top: 0;
  opacity: 0;
  transition: all 0.3s;
}
.popup.feedbackPopup .popup-window {
  width: 420px;
}
.popup.feedbackPopup .popup-window p {
  margin: 0;
}
.popup.feedbackPopup.active {
  padding-top: 50px;
  opacity: 1;
}

.card {
  background-color: #fff;
  border-radius: 20px;
  padding: 12px;
  border: 1px solid #B0DA87;
  /*box-shadow: 0px 0px 15px 0px rgba(99, 128, 30, 0.3);*/
  width: 100%;
  display: block;
  text-align: left;
}
.card.popupVideo .img {
  position: relative;
}
.card.popupVideo .img::before {
  width: 80px;
  height: 80px;
  border-radius: 100%;
  border: 2px solid #fff;
  background: linear-gradient(325.86deg, rgba(0, 129, 158, 0.6) 14.33%, rgba(99, 128, 30, 0.6) 78.48%);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: "";
  z-index: 5;
  backdrop-filter: blur(8px);
}
.card.popupVideo .img::after {
  width: 40px;
  height: 40px;
  background: url(../images/video/icon_play.svg) no-repeat center center;
  background-size: contain;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-16px, -18px);
  content: "";
  z-index: 5;
}
.card .img {
  border-radius: 20px;
  overflow: hidden;
}
.card .img .img-hover {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding-top: 58%;
}
.card .text {
  padding: 0 20px;
  margin: 12px 0;
  font-size: 1.125em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6em;
  height: 3.2em;
}
.card .tag {
  border-radius: 30px;
  background-color: #00819E;
  color: #fff;
  font-size: 0.875em;
  display: flex;
  align-items: center;
  padding: 6px 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.card .tag i {
  width: 19px;
  height: 19px;
  margin-right: 8px;
}
.card:hover, .card:focus {
  background-color: #F0F5E3;
}

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card-list .card {
  width: calc((100% - 60px) / 4);
}
.card-list.album-list {
  padding: 0 30px;
}

.index-menu {
  padding: 30px;
  border: 1px solid #63801E;
  border-radius: 30px;
  background-color: #fff;
}
.index-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.index-menu > ul {
  display: flex;
  justify-content: space-between;
}
.index-menu > ul > li {
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  width: 166px;
}
.index-menu > ul > li > button, .index-menu > ul > li > a {
  border-radius: 10px;
  display: block;
  width: 100%;
}
.index-menu > ul > li > button p, .index-menu > ul > li > a p {
  margin: 0;
  font-size: 1.25em;
  text-align: center;
  padding: 20px;
  line-height: 1;
  position: relative;
}
.index-menu > ul > li > button p i, .index-menu > ul > li > a p i {
  width: 10px;
  height: 6px;
  margin-left: 10px;
  display: inline-block;
  vertical-align: middle;
  margin-top: -5px;
}
.index-menu > ul > li > button p i img, .index-menu > ul > li > a p i img {
  vertical-align: top;
}
.index-menu > ul > li > button .icon, .index-menu > ul > li > button .txt, .index-menu > ul > li > a .icon, .index-menu > ul > li > a .txt {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 7px;
  margin: 0 auto;
  width: 146px;
  height: 146px;
  position: relative;
  z-index: 5;
  font-size: 1.25em;
  text-align: center;
  line-height: 1.4;
  font-weight: 500;
}
.index-menu > ul > li > button .icon::before, .index-menu > ul > li > button .txt::before, .index-menu > ul > li > a .icon::before, .index-menu > ul > li > a .txt::before {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../images/index/02_menu_bg.svg) no-repeat center center;
  background-size: contain;
  content: "";
  left: 0;
  top: 0;
  z-index: -1;
  border-radius: 100%;
  box-shadow: 0px 0px 15px 0px rgba(170, 207, 82, 0.3);
}
.index-menu > ul > li > button .icon img, .index-menu > ul > li > button .txt img, .index-menu > ul > li > a .icon img, .index-menu > ul > li > a .txt img {
  width: 68px;
  height: 68px;
  position: relative;
  z-index: 3;
}
.index-menu > ul > li > button:hover .icon::before, .index-menu > ul > li > button:hover .txt::before, .index-menu > ul > li > button:focus .icon::before, .index-menu > ul > li > button:focus .txt::before, .index-menu > ul > li > a:hover .icon::before, .index-menu > ul > li > a:hover .txt::before, .index-menu > ul > li > a:focus .icon::before, .index-menu > ul > li > a:focus .txt::before {
  animation: rotate360 18s linear infinite;
}
.index-menu > ul > li > button:hover .icon img, .index-menu > ul > li > button:hover .txt img, .index-menu > ul > li > button:focus .icon img, .index-menu > ul > li > button:focus .txt img, .index-menu > ul > li > a:hover .icon img, .index-menu > ul > li > a:hover .txt img, .index-menu > ul > li > a:focus .icon img, .index-menu > ul > li > a:focus .txt img {
  animation: breathing 1s ease-in-out infinite;
}
.index-menu .sub {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 120%;
  background-color: #fff;
  border-width: 12px;
  border-style: solid;
  border-color: rgba(170, 207, 82, 0.6);
  border-radius: 10px;
  padding: 13px;
  display: block;
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
}
.index-menu .sub a, .index-menu .sub button {
  padding: 10px 12px;
  border-bottom: 1px solid #AACF52;
  width: 100%;
  position: relative;
  text-align: left;
}
.index-menu .sub a:hover, .index-menu .sub a:focus, .index-menu .sub button:hover, .index-menu .sub button:focus {
  background-color: #B0DA87;
}
.index-menu .sub a i, .index-menu .sub button i {
  width: 10px;
  height: 6px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.index-menu .sub a i img, .index-menu .sub button i img {
  vertical-align: top;
}
.index-menu .sub .sub {
  position: static;
  width: 100% !important;
  background-color: #F0F5E3;
  border: none;
  transform: translateX(0);
  padding: 0;
}
.index-menu .sub .sub a {
  border-bottom-style: dashed;
  border-bottom-color: #63801E;
  padding-left: 30px;
}
.index-menu .sub .sub a::before {
  width: 6px;
  height: 6px;
  position: absolute;
  left: 16px;
  top: 20px;
  content: "";
  background-color: #B0DA87;
  border-radius: 100%;
}

.tabs-nav {
  display: flex;
  border-bottom: 2px solid #63801E;
  padding: 0 40px;
  gap: 4px;
}
.tabs-nav button:not(.carousel-arrow) {
  padding: 9px 25px 12px;
  width: 100%;
  border-radius: 20px 20px 0 0;
  border-top: 6px solid #63801E;
  border-left: 1px solid #63801E;
  border-right: 1px solid #63801E;
  border-bottom: 2px solid #63801E;
  justify-content: center;
  background-color: #fff;
  margin-bottom: -1px;
  font-size: 1.25em;
}
.tabs-nav button:not(.carousel-arrow)[aria-selected="true"] {
  background-color: #63801E !important;
  color: #fff;
}
.tabs-nav button:not(.carousel-arrow):hover, .tabs-nav button:not(.carousel-arrow):focus {
  background-color: #F0F5E3;
}
.tabs-nav .carousel, .tabs-nav .filter-carousel {
  margin-bottom: -1px;
}
.tabs-nav .carousel .carousel-item, .tabs-nav .filter-carousel .carousel-item {
  padding: 0 4px !important;
  height: auto;
}
.tabs-nav .carousel .carousel-arrow, .tabs-nav .filter-carousel .carousel-arrow {
  width: 18px;
  height: 18px;
  border-radius: 0;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  margin-top: -9px;
  z-index: 5;
  font-size: 0;
  padding: 0;
}
.tabs-nav .carousel .carousel-arrow::before, .tabs-nav .filter-carousel .carousel-arrow::before {
  width: 13px;
  height: 18px;
  content: "";
  mask: url(../images/template/icon_arrow_left.svg) no-repeat center center;
  mask-size: 13px auto;
  background-color: #63801E;
}
.tabs-nav .carousel .carousel-arrow.carousel-arrow-prev, .tabs-nav .filter-carousel .carousel-arrow.carousel-arrow-prev {
  left: -30px;
}
.tabs-nav .carousel .carousel-arrow.carousel-arrow-next, .tabs-nav .filter-carousel .carousel-arrow.carousel-arrow-next {
  right: -30px;
  transform: rotate(180deg);
}
.tabs-nav .carousel .carousel-arrow:hover, .tabs-nav .carousel .carousel-arrow:focus, .tabs-nav .filter-carousel .carousel-arrow:hover, .tabs-nav .filter-carousel .carousel-arrow:focus {
  background-color: transparent;
}
.tabs-nav .carousel .carousel-arrow:hover::before, .tabs-nav .carousel .carousel-arrow:focus::before, .tabs-nav .filter-carousel .carousel-arrow:hover::before, .tabs-nav .filter-carousel .carousel-arrow:focus::before {
  background-color: #AACF52;
}
.tabs-nav .carousel .carousel-arrow[disabled], .tabs-nav .filter-carousel .carousel-arrow[disabled] {
  display: none;
}

#s1 .banner {
  min-width: 1320px;
  width: 96%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

/* 20250919*/
.banner-left-group {
  display: flex;
  max-width: 814px;         /* 防止撐出畫面 */
  outline-offset: 2px;
}

.banner-left-group button {
  width: 30%;
  z-index: 2;
}

.banner-static-01, .banner-static-m-01 {
  width: 100%;
  height: auto;
}

.banner-static-02 {
  width: 100%;
  height: auto;
  margin-left: -1%;
  margin-top: -1.5%;
  z-index: 1;
}

.banner-left-group img, .banner-mobile-split img {
  width: 100%;
  height: auto;
  display: block;
}

#s1 .banner button, #s1 .banner .banner-mobile-split button {
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
    }
#s1 .banner img {
      max-width: 100%;
      height: auto;
    }

/* 行動版左右兩圖排列 */
#s1 .banner-mobile-split {
  min-width: 320px;
  width: 100%;
  display: flex;
  margin: 0 auto;
  justify-content: space-evenly;
}

.banner-mobile-split button {
  width: 100%;
}
.banner-static-m-01 {
  width: 30%;
  z-index: 2;
}
.banner-static-m-02 {
  width: 90%;
  height: auto;
  margin-left: -5%;
  z-index: 1;
}
/* 結束*/

#s1 .left {
  width: 814px;
}
#s1 .right {
  width: 528px;
}

#s2 {
  margin-top: -60px;/*-73px*/
  position: relative;
  z-index: 90;
}
#s2 .index-menu.index-menu {
  margin-top: 20px;
}

#s3 {
  scroll-margin-top: 66px;
}
#s3 .filter-carousel {
  margin-top: 30px;
}
#s3 .filter-carousel .tools {
  display: flex;
  padding-right: 30px;
  align-items: center;
}
#s3 .filter-carousel .filter-nav {
  padding: 0 12px;
  display: flex;
  border-bottom: 1px solid #766D60;
  flex: 1 0;
  margin-right: 10px;
}
#s3 .filter-carousel .filter-nav button {
  font-size: 1.5em;
  color: #63801E;
  border-bottom: 6px solid transparent;
  width: 190px;
  padding: 2px;
  font-weight: 500;
  justify-content: center;
  margin-bottom: -1px;
}
#s3 .filter-carousel .filter-nav button[aria-selected="true"] {
  border-bottom-color: #63801E;
}
#s3 .filter-carousel .filter-outwrap {
  padding: 20px 0;
}
#s3 .filter-carousel .filter-outwrap .carousel-item {
  padding: 10px 5px;
}
#s3 .filter-carousel .filter-outwrap .carousel-arrow {
  display: none;
}
#s3 .filter-carousel .filter-outwrap.has-arrow {
  padding-left: 45px;
  padding-right: 45px;
  position: relative;
}
#s3 .filter-carousel .filter-outwrap.has-arrow .carousel-arrow {
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  border: 1px solid #63801E;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
#s3 .filter-carousel .filter-outwrap.has-arrow .carousel-arrow img {
  width: 8px;
  height: 13px;
}
#s3 .filter-carousel .filter-outwrap.has-arrow .carousel-arrow-prev {
  left: 0;
}
#s3 .filter-carousel .filter-outwrap.has-arrow .carousel-arrow-next {
  right: 0;
}
#s3 .filter-carousel .filter-outwrap.has-arrow .carousel-arrow-next img {
  transform: rotate(180deg);
}
#s3 .card {
  display: block;
  border-radius: 7px;
  background-color: #fff;
  padding: 30px 12px;
}
#s3 .card .top {
  font-size: 0.875em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  gap: 10px;
}
#s3 .card .top .type {
  background-color: #00819E;
  color: #fff;
  padding: 3px 8px;
  display: inline-block;
  align-items: center;
  border-radius: 4px;
  max-width: 120px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#s3 .card .top .tag {
  color: #00819E;
  display: inline-block;
  background-color: transparent;
  font-size: 1em;
  padding: 0;
  max-width: 120px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#s3 .card .top .tag i {
  width: 16px;
  height: 17px;
  margin-right: 4px;
  display: inline-block;
  vertical-align: middle;
}
#s3 .card p {
  padding: 0 20px 0 8px;
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  line-height: 1.6em;
  height: 3.2em;
}
#s3 .card p::after {
  width: 16px;
  height: 16px;
  content: "";
  background: url(../images/index/03_icon_more.svg) no-repeat center center;
  background-size: contain;
  position: absolute;
  right: 0;
  bottom: 0.25em;
}
#s3 .card:hover, #s3 .card:focus {
  background-color: #F0F5E3;
}

#s4 {
  margin-top: 0;
}
#s4 .section-row {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
#s4 .section-row .section {
  width: calc(50% - 20px);
  padding: 20px 30px;
  margin-top: 0;
}
#s4 .section-row .section .section-title {
  padding: 8px;
}
#s4 .section-content .date {
  width: 90px;
  background-color: #073036;
  color: #fff;
  font-size: 1.25em;
  text-align: center;
  border-radius: 23px;
  padding-bottom: 10px;
}
#s4 .section-content .date .year {
  font-size: 1.5em;
}
#s4 .section-content .date .tag {
  font-size: 0.7em;
  background-color: #63801E;
}
#s4 .section-content .date p {
  margin: 0;
}
#s4 .section-content .text .title {
  font-size: 1.875em;
  color: #63801E;
  white-space: nowrap;
  /*overflow: hidden;
  text-overflow: ellipsis;*/
  font-weight: 500;
}
#s4 .section-content .text .title:hover, #s4 .section-content .text .title:focus {
  color: #073036;
}
#s4 .section-content .text .tag {
  font-size: 1.125em;
  color: #63801E;
  font-weight: 500;
  margin-bottom: 9px;
}
#s4 .section-content .text .name {
  font-size: 1.125em;
  font-weight: 500;
  margin-bottom: 4px;
}
#s4 .section-content .text p {
  margin: 0;
  color: #494949;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
#s4 .section-content .img {
    width: 150px;
    padding: 2px 3px 2px 2px;
    /*border-radius: 25px;
    border: 5px solid #F0F5E3;
    overflow: hidden;*/
}
#s4 .section-content .img a {
    width: 100%;
    border-radius: 25px;
    border: 5px solid #F0F5E3;
    overflow: hidden;
}
#s4 .section-content .img img {
  vertical-align: bottom;
}
#s4 .section-content .img a:hover, #s4 .section-content .img a:focus {
  border-color: #AACF52;
}
#s4 #s4-l .carousel-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
#s4 #s4-l .text {
  width: calc(100% - 264px);
}
#s4 #s4-l .img {
  width: 150px;
}
#s4 #s4-r .carousel-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
#s4 #s4-r .text {
  width: calc(100% - 150px);
}
#s4 #s4-r .img {
  width: 150px;
}

#s5 {
  background-color: #F5F5F5;
}
#s5 .section-title {
  justify-content: center;
}
#s5 .section-title .h2 {
  font-size: 1.875em;
}
#s5 .carousel {
  padding: 0 45px;
  position: relative;
}
#s5 .carousel .carousel-arrow {
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  border: 1px solid #63801E;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
#s5 .carousel .carousel-arrow img {
  width: 8px;
  height: 13px;
}
#s5 .carousel .carousel-arrow-prev {
  left: 0;
}
#s5 .carousel .carousel-arrow-next {
  right: 0;
}
#s5 .carousel .carousel-arrow-next img {
  transform: rotate(180deg);
}
#s5 .carousel-item {
  padding: 2px 8px;
}
#s5 .carousel-item a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 11px;
  border: 2px solid #fff;
  background-color: #B0DA87;
  font-size: 1.125em;
  padding: 10px 16px;
  position: relative;
  width: 100%;
  height: 85px;
  font-weight: 500;
}
#s5 .carousel-item a p {
  margin: 0;
}
#s5 .carousel-item a > p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
#s5 .carousel-item a .tip {
  position: absolute;
  left: 50%;
  bottom: 105%;
  transform: translateX(-50%);
  width: 180px;
  background-color: #fff;
  border-width: 3px;
  border-style: solid;
  border-color: rgba(170, 207, 82, 0.6);
  border-radius: 10px;
  padding: 3px;
  display: none;
  color: #073036;
  text-align: left;
}
#s5 .carousel-item a:hover .tip, #s5 .carousel-item a:focus .tip {
  display: block;
}
#s5 .carousel-item:nth-child(2n) a {
  background-color: #00819E;
  color: #fff;
}

#video .section-title {
  padding: 0 20px 12px;
  justify-content: space-between;
}
#video .section-title .h3 {
  border-left: 1px solid #073036;
  border-right: 1px solid #073036;
  padding: 0 24px;
}
#video #recommend {
  padding: 0 70px;
}
#video #recommend .carousel-item {
  padding: 15px 10px;
}
#video #recommend .carousel-arrow {
  position: absolute;
  top: 50%;
  margin-top: -25px;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 1px solid #63801E;
  display: flex;
  align-items: center;
  justify-content: center;
}
#video #recommend .carousel-arrow img {
  width: 16px;
  height: 30px;
}
#video #recommend .carousel-arrow.carousel-arrow-prev {
  left: 0;
}
#video #recommend .carousel-arrow.carousel-arrow-next {
  right: 0;
  transform: rotate(180deg);
}
#video #recommend .carousel-arrow:hover, #video #recommend .carousel-arrow:focus {
  background-color: #F0F5E3;
}

#list .news-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
#list .news-list li button, #list .news-list li a {
  display: flex;
  padding: 16px 30px;
  text-align: left;
  align-items: flex-start;
  background-color: rgba(255, 255, 255, 0.6);
  border-bottom: 1px dashed #63801E;
  width: 100%;
}
#list .news-list li button .date, #list .news-list li a .date {
  font-size: 0.75em;
  border: 1px solid #B0DA87;
  color: #63801E;
  background-color: #F0F5E3;
  padding: 8px 12px;
  font-weight: 500;
  margin-right: 20px;
  border-radius: 50px;
  width: 50px;
  text-align: center;
}
#list .news-list li button .text, #list .news-list li a .text {
  /*width: calc(100% - 120px);*/
  width: calc(100% - 40px);
}
#list .news-list li button .text .name, #list .news-list li a .text .name {
  font-family: "Noto Serif TC", "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 1.25em;
}
#list .news-list li button .text p, #list .news-list li a .text p {
  margin: 5px 0 0;
}
#list .news-list li button:hover, #list .news-list li button:focus, #list .news-list li a:hover, #list .news-list li a:focus {
  background-color: #F5F5F5;
}
#list .news-list a.btn-download {
  align-items: center;
}
#list .news-list a.btn-download .text {
  width: calc(100% - 200px);
}
#list .news-list a.btn-download .icon-download {
  background-color: #63801E;
  color: #fff;
  padding: 2px 12px;
  border-radius: 30px;
  width: 90px;
  text-align: center;
}

#popupInfo .popup-window {
  width: 56%;
  padding: 20px 45px;
}
#popupInfo .popup-window .name {
  font-size: 1.875em;
}

#sitemap {
  font-size: 1.125em;
}
#sitemap .sitemap-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 20px;
}
#sitemap .sitemap-list .sitemap-item {
  width: calc((100% - 40px) / 3);
}
#sitemap .sitemap-list .sitemap-item .name {
  font-family: "Noto Serif TC", "Noto Sans", sans-serif;
  padding: 12px 20px;
  background-color: #63801E;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 25px 0px rgba(99, 128, 30, 0.3);
  margin-bottom: 12px;
  font-weight: 700;
}
#sitemap .sitemap-list .sitemap-item ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#sitemap .sitemap-list .sitemap-item ul li {
  border-bottom: 1px solid #63801E;
}
#sitemap .sitemap-list .sitemap-item ul li a {
  display: block;
  padding: 10px 12px 10px 46px;
  width: 100%;
}
#sitemap .sitemap-list .sitemap-item ul li a:hover, #sitemap .sitemap-list .sitemap-item ul li a:focus {
  background-color: #F0F5E3;
}

#page .page {
  padding-left: 60px;
  padding-right: 60px;
}
#page .page .section-title {
  align-items: center;
  flex-direction: column;
}
#page .page .section-title .h2 {
  font-size: 2em;
  margin-bottom: 20px;
}
#page .page .section-title .date-box {
  text-align: center;
}
#page .page .section-title .date-box .date-l {
    width: 55%;
    display: flex;
    justify-content: end;
}
#page .page .section-title .date-box .date {
  background-color: #F0F5E3;
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 50px;
  border: 1px solid #AACF52;
  font-size: 0.75em;
  align-items: center;
  font-weight: 600;
  color: #63801E;
}
#page .page .section-title .date-box .date::before {
  width: 15px;
  height: 15px;
  margin-right: 6px;
  background: url(../images/template/icon_calendar.svg) no-repeat center center;
  background-size: contain;
  content: "";
}
#page .page figure {
  margin: 0;
  width: 100%;
}
/*#page .page figure img {
  width: 100%;
  vertical-align: bottom;
}*/
#page .page .page-content {
  padding: 20px 30px;
}
#page .page .page-content .share-box {
  position: sticky;
  width: 76px;
  padding: 20px 18px;
  margin-right: 20px;
  top: 118px;
  float: left;
}
#page .page .page-content .share-box img {
  vertical-align: bottom;
}
#page .page .page-content .share-box a, #page .page .page-content .share-box button {
  margin-bottom: 18px;
}
#page .page .page-content .share-box a:hover, #page .page .page-content .share-box a:focus, #page .page .page-content .share-box button:hover, #page .page .page-content .share-box button:focus {
  opacity: 0.8;
}
#page .page .page-content .text-content {
  overflow: hidden;
  width: calc(100% - 96px);
}
#page .page .page-content .btn-block {
  clear: both;
}

#searchList .pagination {
  margin-top: 30px;
}

@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes breathing {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.85;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* 20250916-行動版媒體查詢：取消均分 #s1 .banner*/
@media screen and (max-width: 1023px) {
  #s1 .banner {
    justify-content: normal;
  }
}
/* end */
@media screen and (max-width: 1440px) {
  .wrap {
    width: 100%;
    padding: 0 15px;
    max-width: 1200px;
  }

  .popup .popup-window {
    width: 90%;
    max-width: 950px;
  }

  #s1 .banner {
    min-width: auto;
    width: 100%;
    padding: 0 15px;
  }
  #s1 .left {
    width: 60%;
  }
  #s1 .right {
    width: 40%;
  }

  #popupInfo .popup-window {
    width: 90%;
    max-width: 780px;
  }
}
@media screen and (max-width: 1200px) {
  #header.scroll .logo {
    width: 240px;
    height: 34px;
  }
  #header.scroll .logo a {
    width: 240px;
    height: 34px;
  }
  #header.scroll .header-right #header-search {
    margin-left: 10px;
  }
  #header.scroll .header-right #header-search .search-box {
    width: 150px;
  }

  .menu-box.scroll {
    top: 55px;
  }

  .filter-box {
    padding: 19px 40px;
  }
  .filter-box .col {
    width: 55%;
  }
  .filter-box .col:first-child {
    width: 45%;
  }
  .filter-box .col input {
    width: 56%;
  }
  .filter-box .col .select-group {
    width: 56%;
  }
    #searchList .filter-box .col {
        width: 50%;
    }
    #searchList .filter-box .col .label-name {
        width: 100px;
    }
    #searchList .filter-box .col label {
        width: 100px;
    }
    #searchList .filter-box .last-col {
        width: 65%;
    }
    #searchList .filter-box{
        row-gap: 0.85rem;
    }

    .n-filter-box .col {
        width: 50%;
    }
    .n-filter-box .col .label-name {
        width: 100px;
    }
    .n-filter-box .col label {
        width: 100px;
    }
    .n-filter-box .last-col {
        width: 65%;
    }
    .n-filter-box{
        row-gap: 0.85rem;
    }

  .card.popupVideo .img::before {
    width: 60px;
    height: 60px;
  }
  .card.popupVideo .img::after {
    width: 28px;
    height: 28px;
    transform: translate(-12px, -13px);
  }

  #breadcrumbs {
    scroll-margin-top: 110px;
  }

  .btn-top {
    bottom: calc(8% - 65px);
    width: 44px;
    padding: 7px;
  }

  #qk-menu {
    bottom: 20%;
  }
  #qk-menu .qk-collapse {
    width: 44px;
    padding: 18px 12px;
    left: -44px;
  }

  .index-menu > ul > li {
    padding-left: 5px;
    padding-right: 5px;
    width: 150px;
  }
  .index-menu > ul > li > button .icon, .index-menu > ul > li > button .txt, .index-menu > ul > li > a .icon, .index-menu > ul > li > a .txt {
    width: 140px;
    height: 140px;
  }
  .index-menu > ul > li > button .icon img, .index-menu > ul > li > button .txt img, .index-menu > ul > li > a .icon img, .index-menu > ul > li > a .txt img {
    width: 60px;
    height: 60px;
  }
  .index-menu > ul > li > button p, .index-menu > ul > li > a p {
    padding: 12px;
  }

  #s2 {
    margin-top: calc(-100vw / 1200 * 56);
  }

  #s3 {
    scroll-margin-top: 55px;
  }
}
@media screen and (max-width: 1023px) {
  .wrap {
    padding: 0 25px;
  }

  .t-hide {
    display: none !important;
  }

  .t-show {
    display: block !important;
  }
  .t-show.d-flex {
    display: flex !important;
  }
  .t-show.d-inline {
    display: inline !important;
  }

  #header {
    padding: 16px 20px;
    border-bottom: 2px solid #63801E;
  }
  #header .logo {
    width: 266px;
    height: 40px;
  }
  #header .logo a {
    width: 266px;
    height: 40px;
  }
  #header .btn-ham {
    width: 40px;
    height: 40px;
    background-color: #63801E;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
  }
  #header .btn-ham img {
    width: 20px;
    height: 18px;
  }

  #container {
    padding-top: 81px;
  }

  #footer::before {
    display: none;
  }
  #footer .wrap {
    flex-direction: column;
    gap: 20px;
  }
  #footer .footer-left {
    width: 100%;
    display: block;
    position: relative;
  }
  #footer .footer-left > a {
    vertical-align: top;
  }
  #footer .footer-left .logo {
    margin-left: 8px;
  }
  #footer .footer-left ul {
    justify-content: flex-start;
    padding-left: 22px;
  }
  #footer .footer-left .logo-group {
    margin-top: 0;
    float: right;
    width: auto;
    padding-right: 0;
    position: absolute;
    top: 0;
    right: 0;
  }
  #footer .footer-right {
    width: 100%;
    padding-left: 22px;
  }
  #footer .footer-right p.copyright {
    font-size: 1em;
  }

  .menu-box {
    position: fixed;
    right: 0;
    top: 74px;
    background-color: #fff;
    width: 100%;
    z-index: 990;
    margin: 0;
    display: none;
      height: 100vh;
      height: 100dvh;
  }
  .menu-box[aria-hidden="false"] {
    display: block !important;
  }
  .menu-box .menu-bottom ul {
    list-style: none;
    display: flex;
    margin: 0 -25px;
    padding: 12px;
    align-items: center;
  }
  .menu-box .menu-bottom ul li {
    width: calc(100% / 4);
    display: flex;
    align-items: center;
    border-left: 1px solid #63801E;
  }
  .menu-box .menu-bottom ul li:first-child {
    border-left: none;
  }
  .menu-box .menu-bottom ul li a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
  }
  .menu-box .menu-bottom ul li a:hover, .menu-box .menu-bottom ul li a:focus {
    background-color: #F0F5E3;
  }
    .menu-box .menu-bottom ul li .faq_btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 12px;
    }
    .menu-box .menu-bottom ul li a:hover, .menu-box .menu-bottom ul li .faq_btn:focus {
        background-color: #F0F5E3;
    }
  .menu-box .menu-bottom ul li i {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .menu-box .menu-bottom #menu-search {
    padding: 20px 16px;
    margin: 0 -25px;
    background-color: #63801E;
  }
  .menu-box .menu-bottom #menu-search .search-box {
    position: relative;
    margin-bottom: 0;
  }
  .menu-box .menu-bottom #menu-search .search-box input {
    padding-right: 55px;
  }
  .menu-box .menu-bottom #menu-search .search-box .btn-search {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 9px;
    right: 20px;
    font-size: 0;
  }
  .menu-box .menu-bottom #menu-search .search-box .btn-search svg {
    fill: #63801E;
  }
  .menu-box .menu-bottom #menu-search .search-box .btn-search:hover svg, .menu-box .menu-bottom #menu-search .search-box .btn-search:focus svg {
    fill: #073036;
  }
  .menu-box .menu-bottom #menu-search a {
    color: #fff;
    text-decoration: underline;
    padding: 0 20px;
    display: inline-block;
  }
  .menu-box .menu-bottom #menu-search a:hover, .menu-box .menu-bottom #menu-search a:focus {
    text-decoration: none;
    color: #F0F5E3;
  }

  #menu {
    border-radius: 0;
    border: none;
    padding: 0;
    height: calc(100vh - 179px);
    height: calc(100dvh - 179px);
    overflow-y: auto;
  }
  #menu > ul {
    display: block;
  }
  #menu > ul > li {
    border-bottom: 1px solid #63801E;
  }
  #menu > ul > li > button, #menu > ul > li > a {
    border-radius: 0;
  }
  #menu > ul > li > button p, #menu > ul > li > a p {
    font-size: 1.25em;
    padding: 15px 12px;
    text-align: left;
  }
  #menu > ul > li > button p i, #menu > ul > li > a p i {
    margin-left: 0;
    margin-top: -3px;
    position: absolute;
    right: 10px;
    top: 50%;
  }
  #menu > ul > li .sub {
    width: 100%;
    border: none;
    border-radius: 0;
    padding: 0;
    position: static;
    transform: none;
    max-height: none;
  }
  #menu > ul > li .sub a, #menu > ul > li .sub button {
    font-size: 1.25em;
    padding: 15px 12px;
  }
  #menu > ul > li .sub .sub a {
    font-size: 1.25em;
    padding: 15px 12px 15px 36px;
  }
  #menu > ul > li .sub .sub a::before {
    left: 22px;
    top: 30px;
  }

  #breadcrumbs {
    padding: 15px 20px 10px;
    scroll-margin-top: 75px;
    margin-bottom: 20px;
  }

  .popup .popup-window {
    width: 90% !important;
  }

  .section.section-box {
    border-radius: 40px;
    margin-bottom: 30px;
  }
  .section + .section {
    margin-top: 0;
  }

  .section-title a + .h2 {
    margin-left: 20px;
  }
  .section-title .h2 {
    font-size: 1.875em;
  }
  .section-title .h3 {
    font-size: 1.875em;
  }
  .section-title.page-title .h2 {
    font-size: 2.5em;
  }

  .filter-box {
    padding: 20px 25px;
    flex-direction: column;
    border-radius: 50px;
    gap: 20px;
  }
  .filter-box .col {
    width: 100% !important;
  }
  #searchList .filter-box .col {
     margin-top: 0 !important;
  }
    .n-filter-box .col {
        margin-top: 0 !important;
    }
  .filter-box .col label, .filter-box .col .label-name {
    width: 90px;
  }
  .filter-box .col select {
    width: auto;
    flex: 1 0;
  }
  .filter-box .col input {
    width: auto;
    flex: 1 0;
  }
  .filter-box .col .select-group {
    width: auto;
    flex: 1 0;
  }
  .filter-box .row {
    padding: 20px 0 0;
    margin: 0;
  }
  .filter-box .row + .row {
    padding-top: 0;
  }

  .card-list {
    gap: 16px;
  }
  .card-list .card {
    width: calc((100% - 32px) / 3);
  }
  .card-list.album-list {
    padding: 0;
  }

  .pagination {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  .pagination .page-go {
    margin-left: 0;
  }

  .index-menu {
    padding: 20px 12px;
    border-radius: 50px;
    position: static;
  }
  .index-menu > ul > li {
    width: 115px;
  }
  .index-menu > ul > li > button .icon, .index-menu > ul > li > button .txt, .index-menu > ul > li > a .icon, .index-menu > ul > li > a .txt {
    margin-bottom: 0;
    width: 105px;
    height: 105px;
    font-size: 1rem;
  }
  .index-menu > ul > li > button .icon img, .index-menu > ul > li > button .txt img, .index-menu > ul > li > a .icon img, .index-menu > ul > li > a .txt img {
    width: 45px;
    height: 45px;
  }
  .index-menu > ul > li > button p, .index-menu > ul > li > a p {
    padding: 8px;
  }
  .index-menu > ul .sub {
    width: 180px;
  }

  #s1 .banner {
    padding: 0 45px;
  }

  #s2 {
    margin-top: calc(-100vw / 768 * 25);
  }

  #s3 {
    padding-bottom: 0;
    scroll-margin-top: 75px;
  }
  #s3 .filter-carousel {
    margin-top: 20px;
  }
  #s3 .filter-carousel .tools {
    position: relative;
    padding-right: 0;
  }
  #s3 .filter-carousel .tools .btn-more {
    position: absolute;
    right: 8px;
    top: -50px;
  }
  #s3 .filter-carousel .filter-nav {
    padding: 0;
    margin-right: 0;
  }
  #s3 .filter-carousel .filter-nav button {
    font-size: 1.25em;
    padding: 8px;
  }
  #s3 .filter-carousel .filter-outwrap {
    padding: 10px 0;
  }

  #s4 .section-row {
    flex-direction: column;
  }
  #s4 .section-row .section {
    width: 100%;
  }
  #s4 .section-row .section .section-title {
    padding: 8px;
  }

  #s5 {
    background-color: transparent;
  }
  #s5 .carousel-item {
    padding: 2px 4px;
  }
  #s5 .carousel-item a {
    padding: 10px;
  }

  #popupInfo .popup-window {
    padding: 0;
  }

  #page .page {
    padding-left: 0;
    padding-right: 0;
  }
  #page .page .page-content {
    padding: 16px 30px;
  }
  #page .page .page-content .share-box {
    position: static;
    width: 100%;
    display: flex;
    padding: 0 12px;
    margin-right: 0;
    float: none;
    gap: 12px;
  }
  #page .page .page-content .share-box a, #page .page .page-content .share-box button {
    margin-bottom: 0;
  }
  #page .page .page-content .text-content {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .wrap {
    padding-left: 12px;
    padding-right: 12px;
  }

  .m-hide {
    display: none !important;
  }

  .m-show {
    display: block !important;
  }

  #header {
    padding: 12px 0;
  }
  #header .logo {
    width: 211px;
    height: 30px;
  }
  #header .logo a {
    width: 211px;
    height: 30px;
  }
  #header .btn-ham {
    width: 35px;
    height: 35px;
  }

  #container {
    padding-top: 60px;
  }

  #footer .footer-left .logo {
    width: 264px;
    margin-bottom: 8px;
  }
  #footer .footer-left ul {
    justify-content: center;
    padding-left: 0;
    flex-direction: column;
    margin-bottom: 18px;
  }
  #footer .footer-left ul li {
    margin: 3px 0;
  }
  #footer .footer-left ul li::before {
    display: none;
  }
  #footer .footer-left .logo-group {
    float: none;
    width: 100%;
    position: static;
    text-align: center;
  }
  #footer .footer-left .logo-group img {
    height: 40px;
  }
  #footer .footer-right {
    padding-left: 0;
  }
  #footer .footer-right p {
    font-size: 0.875em;
  }
  #footer .footer-right p.copyright {
    font-size: 1em;
  }

  .menu-box {
    top: 60px;
  }
  .menu-box .menu-bottom ul {
    margin: 0 -12px;
  }
  .menu-box .menu-bottom #menu-search {
    margin: 0 -12px;
  }

  #menu {
      height: calc(100vh - 166px);
      height: calc(100dvh - 166px);
  }

  .section.section-box {
    padding: 20px 15px;
  }
  .section.section-bg {
    padding: 20px;
  }
  .section.section-bg .h3 {
    font-size: 1.5em;
  }
  .section.section-bg .btn-block {
    display: flex;
    gap: 12px;
  }
  .section.section-bg .btn-block .btn {
    flex: 1;
    margin: 0;
    width: 100%;
  }

  .table table thead {
    display: none;
  }
  .table table td {
    display: block;
    padding: 8px 12px 8px 104px;
    position: relative;
    border-bottom: 1px solid #63801E;
  }
  .table table td:first-child {
    text-align: left !important;
  }
  .table table td:last-child::before {
    border-bottom: none;
  }
  .table table td::before {
    content: attr(data-name);
    padding: 8px 12px;
    width: 96px;
    background-color: #63801E;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    box-sizing: border-box;
    text-align: left;
    border-bottom: 1px solid #fff;
  }
  .table table tbody tr {
    display: block;
    margin-bottom: 4px;
    border-bottom: none;
    border-top: 1px solid #63801E;
    border-right: 1px solid #63801E;
  }
  .table table .tag {
    display: flex;
    width: 100%;
  }
  .table table .tag[class*='tag-'] {
    position: relative;
  }
  .table table .tag[class*='tag-']::before {
    position: absolute;
    left: 12px;
    top: 50%;
    margin-top: -10px;
  }
  .table .flex-table {
    border: none;
  }
  .table .flex-table .flex-head {
    display: none;
  }
  .table .flex-table .flex-row {
    flex-direction: column;
  }
  .table .flex-table .flex-td {
    padding: 8px 12px 8px 104px;
    position: relative;
    border-bottom: 1px solid #63801E;
    flex: none !important;
    width: 100% !important;
  }
  .table .flex-table .flex-td:first-child {
    text-align: left !important;
  }
  .table .flex-table .flex-td:last-child::before {
    border-bottom: none;
  }
  .table .flex-table .flex-td::before {
    content: attr(data-name);
    padding: 8px 12px;
    width: 96px;
    background-color: #63801E;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    box-sizing: border-box;
    text-align: left;
    border-bottom: 1px solid #fff;
  }
  .table .flex-table .flex-body {
    gap: 5px;
  }
  .table .flex-table .flex-body .flex-row {
    border-bottom: none;
    border-top: 1px solid #63801E;
    border-right: 1px solid #63801E;
  }

  .section-title a + .h2 {
    margin-left: 12px;
  }
  .section-title .h2 {
    font-size: 1.5em;
  }
  .section-title .h2 i {
    width: 40px;
    height: 40px;
    margin-right: 8px;
  }
  .section-title .h3 {
    font-size: 1.5em;
  }
  .section-title.page-title .h2 {
    font-size: 1.78em;
  }

  .btn-more {
    padding-left: 10px;
    padding-right: 10px;
  }

  .popup .popup-window .btn-close {
    width: 50px;
    height: 50px;
    right: -25px;
    top: -25px;
  }
  .popup .popup-window .popup-box {
    padding: 20px;
  }
  .popup .popup-window .tag-block {
    margin-bottom: 12px;
  }
  .popup .popup-window .name {
    margin-bottom: 10px;
    font-size: 1.25em;
  }
  .popup .popup-window .btn-block {
    display: flex;
    gap: 12px;
  }
  .popup .popup-window .btn-block .btn {
    flex: 1;
    margin: 0;
    width: 100%;
  }
  .popup .popup-window .carousel .carousel-arrow {
    width: 40px;
    height: 40px;
    margin-top: -20px;
  }
  .popup .popup-window .carousel .carousel-arrow img {
    width: 40px;
    height: 40px;
  }
  .popup.feedbackPopup.active {
    padding-top: 20px;
  }

  .filter-box {
    padding: 15px;
    border-radius: 20px;
    margin-bottom: 20px;
    gap: 12px;
  }
  .filter-box .col {
    flex-direction: column;
  }
  .filter-box .col label, .filter-box .col .label-name {
    width: 100% !important;
  }
  .filter-box .col select {
    width: 100%;
  }
  .filter-box .col input {
    width: 100% !important;
  }
  .filter-box .col button {
    width: 100%;
  }
  .filter-box .col .select-group {
    width: 100% !important;
  }
  .filter-box .col .select-group .select-wrap .select-box {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
  }
  .filter-box .col .select-group .select-wrap .select-box .checkbox-group {
    gap: 10px;
    height: auto;
  }
    #ss_box .select-wrap .select-box {
        padding: 20px;
        max-height: 60vh;
        overflow-y: auto;
    }
    #ss_box .select-wrap .select-box .checkbox-group {
        gap: 10px;
        height: auto;
    }
  .filter-box .row .radio-group {
    margin-top: 5px;
    flex-direction: column;
    gap: 5px;
  }

  .radio-item input:checked + label::after {
    width: 10px;
    height: 10px;
    top: 3px;
  }
  .radio-item label {
    padding-left: 25px;
  }
  .radio-item label::before {
    width: 18px;
    height: 18px;
    top: 3px;
  }

  .card {
    border-radius: 12px;
  }
  .card.popupVideo .img::before {
    width: 50px;
    height: 50px;
  }
  .card .img {
    border-radius: 12px;
  }
  .card .text {
    padding: 0;
    font-size: 1em;
  }
  .card .tag {
    display: block;
    border-radius: 8px;
    font-size: 0.75em;
    padding: 6px;
  }
  .card .tag i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
  }

  .card-list {
    gap: 12px;
  }
  .card-list .card {
    width: calc((100% - 12px) / 2);
  }

  .pagination ul {
    width: 100%;
    gap: 12px;
  }
  .pagination ul li {
    display: none;
  }
  .pagination ul li:first-child, .pagination ul li:last-child {
    display: block;
    flex: 1;
  }
  .pagination .page-go {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    gap: 12px 8px;
    justify-content: center;
  }
  .pagination .page-go input {
    width: 140px;
    text-align: center;
  }
  .pagination .page-go .btn {
    width: 100%;
  }

  .btn-top {
    bottom: calc(10% - 60px);
    width: 45px;
  }

  #qk-menu {
    bottom: 20%;
  }
  #qk-menu .qk-collapse {
    width: 45px;
    padding: 12px 10px;
    font-size: 1.125em;
    letter-spacing: 0.5em;
    left: -45px;
    top: 0;
    bottom: unset;
  }
  #qk-menu .qk-collapse i {
    margin-top: 0.15em;
  }
  #qk-menu .qk-menu {
    padding: 10px;
    border-radius: 0 0 0 20px;
  }
  #qk-menu .qk-menu a {
    padding: 8px 38px 8px 14px;
  }

  .index-menu {
    padding: 20px 10px;
    border-radius: 30px;
  }
  .index-menu > ul {
    flex-wrap: wrap;
    gap: 10px 0;
  }
  .index-menu > ul > li {
    width: calc(100% / 3);
  }
  .index-menu > ul > li > button, .index-menu > ul > li > a {
    width: 100px;
    margin: 0 auto;
  }
  .index-menu > ul > li > button .icon, .index-menu > ul > li > button .txt, .index-menu > ul > li > a .icon, .index-menu > ul > li > a .txt {
    width: 98px;
    height: 98px;
  }
  .index-menu > ul > li > button .icon img, .index-menu > ul > li > button .txt img, .index-menu > ul > li > a .icon img, .index-menu > ul > li > a .txt img {
    width: 42px;
    height: 42px;
  }
  .index-menu > ul > li > button p, .index-menu > ul > li > a p {
    padding: 10px 0 0;
    font-size: 1em;
  }
  .index-menu > ul .sub {
    width: 150px;
  }

  .tabs-nav {
    padding: 0 20px;
  }
  .tabs-nav button {
    white-space: nowrap;
  }
  .tabs-nav .carousel .carousel-item, .tabs-nav .filter-carousel .carousel-item {
    padding: 0 2px !important;
  }
  .tabs-nav .carousel .carousel-arrow.carousel-arrow-prev, .tabs-nav .filter-carousel .carousel-arrow.carousel-arrow-prev {
    left: -20px;
  }
  .tabs-nav .carousel .carousel-arrow.carousel-arrow-next, .tabs-nav .filter-carousel .carousel-arrow.carousel-arrow-next {
    right: -20px;
  }

  #breadcrumbs {
    padding-left: 0;
    padding-right: 10px;
  }
  #breadcrumbs li:last-child a {
    padding-left: 8px;
    padding-right: 8px;
  }
  #breadcrumbs li a {
    padding-left: 4px;
    padding-right: 4px;
  }

  #s1 .banner {
    padding: 0 10px;
  }

  #s2 {
    margin-top: 0;
  }

  #s3 {
    scroll-margin-top: 65px;
  }
  #s3 .filter-carousel .filter-nav button {
    width: calc(100% / 3);
    font-size: 1.125em;
    padding: 0 5px 10px;
  }
  #s3 .filter-carousel .filter-outwrap {
    padding: 10px 0;
  }
  #s3 .filter-carousel .filter-outwrap.has-arrow {
    padding-left: 35px;
    padding-right: 35px;
  }
  #s3 .card {
    padding: 20px 12px;
  }
  #s3 .card .top {
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
  }
  #s3 .card .top .type {
    max-width: none;
    width: 100%;
    padding: 3px 10px;
    display: block;
  }
  #s3 .card .top .tag {
    width: 100%;
    max-width: none;
    display: block;
  }

  #s4 .section-row .section {
    padding: 15px;
  }
  #s4 .section-title {
    justify-content: space-between;
    margin-bottom: 15px;
  }
  #s4 .section-title .h2 i {
    width: 30px;
    height: 30px;
  }
  #s4 .section-content .date {
    width: 100%;
    font-size: 1.125em;
    padding-bottom: 5px;
  }
  #s4 .section-content .date .year {
    font-size: 1.33em;
  }
  #s4 .section-content .date .tag {
    font-size: 0.7em;
  }
  #s4 .section-content .text .title {
    font-size: 1.5em;
  }
  #s4 .section-content .text .tag {
    margin-bottom: 4px;
  }
  #s4 .section-content .img {
    width: 100%;
  }
  #s4 .section-content .btn-block {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 5px;
  }
  #s4 #s4-l .carousel-item {
    flex-direction: column;
  }
  #s4 #s4-l .text {
    width: 100%;
  }
  #s4 #s4-l .img {
    display: none;
  }
  #s4 #s4-r .carousel-item {
    flex-direction: column;
  }
  #s4 #s4-r .text {
    width: 100%;
  }
  #s4 #s4-r .img {
    width: 100%;
  }

  #s5 {
    padding-top: 0;
  }
  #s5 .section-title .h2 {
    font-size: 1.5em;
  }
  #s5 .carousel {
    padding: 0 35px;
  }

  #video .section-box .section-title {
    flex-direction: row;
  }
  #video .section-title {
    padding: 0 6px 12px;
    flex-direction: column;
    gap: 20px;
  }
  #video .section-title .h3 {
    padding: 0 12px;
  }
  #video #recommend {
    padding: 0 50px;
  }
  #video #recommend .carousel-arrow {
    margin-top: -20px;
    width: 40px;
    height: 40px;
  }
  #video #recommend .carousel-arrow img {
    width: 8px;
    height: 15px;
  }

  #list .news-list li button, #list .news-list li a {
    padding: 16px 12px;
    flex-direction: column;
  }
  #list .news-list li button .date, #list .news-list li a .date {
    padding: 6px 12px;
    margin-right: 0;
    margin-bottom: 12px;
  }
  /*#list .news-list li button .text, #list .news-list li a .text {
    width: 100% !important;
  }*/
  #list .news-list li button .text .name, #list .news-list li a .text .name {
    font-size: 1.125em;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #list .news-list li button .text p, #list .news-list li a .text p {
    font-size: 0.875em;
  }
  #list .news-list li a.btn-download {
    align-items: flex-start;
    position: relative;
    padding-bottom: 45px;
  }
  #list .news-list li a.btn-download .icon-download {
    position: absolute;
    right: 12px;
    bottom: 16px;
    width: auto;
    font-size: 0.875em;
  }

  #popupInfo .popup-window .name {
    font-size: 1.5em;
  }

  #page .page .section-title .date-box {
    width: 100%;
    text-align: left;
  }
  #page .page .section-title .date-box .date-l {
    justify-content: start;
  }
  #page .page .page-content {
    padding: 15px;
  }
  #page .page .page-content .share-box {
    justify-content: center;
  }
  #page .page .page-content .text-content {
    width: 100%;
  }

  #sitemap {
    font-size: 1em;
  }
  #sitemap .sitemap-list {
    flex-direction: column;
    gap: 20px;
  }
  #sitemap .sitemap-list .sitemap-item {
    width: 100%;
  }
  #sitemap .sitemap-list .sitemap-item .name {
    font-size: 1.125em;
  }
}
@media screen and (max-width: 380px) {
  .index-menu > ul > li > button, .index-menu > ul > li > a {
    width: 80px;
  }
  .index-menu > ul > li > button .icon, .index-menu > ul > li > button .txt, .index-menu > ul > li > a .icon, .index-menu > ul > li > a .txt {
    width: 80px;
    height: 80px;
    font-size: 0.875em;
  }
  .index-menu > ul > li > button .icon img, .index-menu > ul > li > button .txt img, .index-menu > ul > li > a .icon img, .index-menu > ul > li > a .txt img {
    width: 40px;
    height: 40px;
  }
  .index-menu > ul > li > button p, .index-menu > ul > li > a p {
    font-size: 0.875em;
  }
  .index-menu > ul .sub {
    width: 120px;
  }
}
@page {
  size: A4;
  margin: 30px 10px;
}
@media print {
  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    page-break-inside: avoid;
    overflow: visible !important;
    height: auto !important;
  }

  #header {
    position: static !important;
    padding: 0;
  }
  #header .logo {
    width: 311px;
    height: 45px;
  }
  #header .header-right {
    display: none !important;
  }

  .menu-box, #footer, #qk-menu {
    display: none !important;
  }

  #container {
    padding-top: 0;
  }
  #container::before, #container::after {
    display: none !important;
  }

  #breadcrumbs {
    scroll-margin-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .wrap {
    width: 90%;
  }

  #page .page {
    padding: 0;
  }
  #page .page .page-content .share-box {
    display: none !important;
  }
  #page .page .page-content .text-content {
    width: 100%;
  }
  #page .page .page-content .btn-block {
    display: none !important;
  }
}

.text-content a {
    color: #337ab7 !important;
}
.text-content a:hover {
    color: #0056b3;
    text-decoration: underline;
}

@media screen and (min-width: 1023px) {
    .info_page_box {
        min-height:600px;
    }
}

.des_btn{
    border: none !important;
    display: flex !important;
    width: 30px !important;
    height: 30px !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
    padding: 0 !important;
    background: #63801E !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
}
.des_btn:hover{
    background: #63801E !important;
}
.describe_txt{
    display: none;
}

#open_btn_box {
    display: flex;
    padding:0.5rem 1rem;
    justify-content: end;
    align-items: center;
    flex-wrap: wrap;
    background-color: #F0F5E3;
    border: 1px solid #B0DA87;
    border-radius: 100px;
    margin: 30px 0;
}
#close_btn_box {
    position: relative
}
#close_btn_box .radio-group{
    align-items: center;
}
#close_box {
    position: absolute;
    top: 3.5rem;
    right:1rem;
}
#close_qk_collapse{
    display: none;
}
.text_box{
    width:100%;
    display: flex;
    padding-left: 2rem;
}
.pp_box{
    font-size: 0.75em;
    margin-left: 12rem;
    position: relative;
    padding-left: 10px;
    margin-top: 10px;
}
.pp_box::before {
    width: 1px;
    height: 1em;
    background-color: #63801E;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content: "";
}
.popupPP:hover,.popupPP:focus{
    background-color: #F0F5E3;
}

.m-search-box .btn-search svg {
    fill: #63801E;
}
.m-search-box {
    position: relative;
    margin-top: 20px;
    margin-bottom: 0;
    padding: 0 20px;
}
#menuSearch {
    padding-right: 55px;
}
.m-search-box .btn-search {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 9px;
    right: 40px;
    font-size: 0;
}
.header_page{
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 0 10px;
}

.no_data_text_box{
    margin: 20px auto;
    width: 100%;
    text-align: left;
    padding:0 15%;
    line-height: 2;
}
.text_more{
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    font-weight: bold;
    font-size: 1rem;
    padding: 0;
    background: #63801E;
    border-radius: 50%;
    text-align: center;
    line-height: 1.5;
    color: #ffffff !important;
}
.no_data_text_box .text_box{
    display: none;
}
.no_data_text_box a{
    color:#2E74B5;
}

#ss_box{
    width: 100%;
    position: relative;
}
#ss_box .select-wrap .select-box .header_seaarch_btn {
    width: 100px;
    padding: 0.55em;
    margin-top: 10px;
}

.btn-prev.active,.btn-next.active {
    background-color: #9c9d99 !important;
    border: 1px solid #9c9d99 !important;
    color: #dcdcdc !important;
    cursor: default;
}

.qk-collapse[aria-expanded="false"] img{
    transform: rotate(180deg);
}

.footer-right ul{
    list-style: none;
    display: inline-flex;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}
.footer-right ul li{
    display: inline-flex;
    align-items: center;
    font-size: 1em;
    position: relative;
    padding: 0 10px;
}
.footer-right ul li:first-child {
    padding-left: 0;
}
.footer-right ul li i{
    width: 14px;
    margin-right: 3px;
}
.footer-right ul li::before {
    width: 1px;
    height: 1em;
    background-color: #63801E;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content: "";
}
.footer-right ul li:first-child::before {
    display: none;
}

@media screen and (max-width: 767px) {
    .des_box{
        margin-left: 1rem;
    }

    #close_btn_box .radio-group{
        align-items: start;
    }
    #close_box {
        top: 0.7rem;
    }
    .banner-static-m-02{
        display: flex !important;
    }
    #close_qk_collapse{
        position: absolute;
        width: 24px;
        height: 24px;
        background: #d1d3d6;
        border-radius: 50%;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        left: -34px;
        top: -35px;
    }
    .menu-box .menu-bottom ul {
        padding: 12px 0;
    }
    .menu-box .menu-bottom ul li a {
        padding: 8px 0;
    }
    .menu-box .menu-bottom ul li .faq_btn {
        padding: 8px 0;
    }
    .pp_box{
        display: none;
    }
    .pp_box2{
        display: flex;
    }
    .no_data_text_box{
        padding:0;
    }
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
    #list .news-list li button, #list .news-list li a {
        flex-wrap: wrap;
    }
    .des_box{
        margin-left: 1rem;
        margin-top: 0.5rem;
    }
    #close_box {
        top: unset;
        bottom: 1.2rem;
    }
    .pp_box{
        display: none;
    }
    .pp_box2{
        display: flex;
    }
    .no_data_text_box{
        padding:0;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1024px) {
    #close_box {
        top: 5.5rem !important;
    }
}
@media screen and (min-width: 1024px) {
    #close_box {
        top: 3.5rem;
    }
    .pp_box{
        display: flex;
    }
    .pp_box2{
        display: none !important;
    }
}