:root {
  --main-color: #d5440b;
  --sub-color: #0c718f;
  --white: #fff;
  --gray-color: #ebebeb;
  --gray2-color: #eee;
  --gray3-color: #f4f4f4;
  --blue-color: #2858aa;
  --border-color: #989898;
  --orange-color: #f69a30;
  --black-color: #494949;
}
body,
html {
  min-height: 100%;
  line-height: 1.7;
  color: #494949;
  background: #f7f7f7;
  font-weight: 400;
  text-rendering: geometricPrecision;
  font-family: "Helvetica Neue", Helvetica, "Noto Sans TC", "Microsoft JhengHei",
    sans-serif;
  margin: 0;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
}
body.act,
html.act {
  overflow-y: hidden;
}
body.cn,
html.cn {
  font-family: "Microsoft YaHei", "Helvetica Neue", sans-serif;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
::after,
::before {
  box-sizing: inherit;
}
select::-ms-expand {
  display: none;
}
input::-ms-clear {
  display: none;
}
input:-webkit-autofill {
  background-color: #fff;
}
::-moz-selection {
  color: #fff;
  background: #d5440b;
  text-shadow: none;
}
::selection {
  color: #fff;
  background: #d5440b;
  text-shadow: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 400;
  line-height: 1.4;
}
h1:not(.card-title),
h2:not(.card-title),
h3:not(.card-title),
h4:not(.card-title),
h5:not(.card-title),
h6:not(.card-title) {
  margin: 2rem 0 1rem;
}
p,
span {
  margin: 0;
}
.h1,
h1 {
  font-size: min(max(3vw, 24px), 30px);
}
.h2,
h2 {
  font-size: min(max(3vw, 22px), 28px);
}
.h3,
h3 {
  font-size: min(max(3vw, 20px), 1.5rem);
}
.h4,
h4 {
  font-size: min(max(3vw, 18px), 1.25rem);
}
em,
.h5,
p,
pre {
  font-size: 1rem;
}
.h6,
small,
sup {
  font-size: 0.875rem;
}
hr,
.hr::after {
  content: "";
  display: block;
  width: 12rem;
  height: 0.1875rem;
  border: 0;
  margin: auto;
  margin-top: 1rem;
  margin-bottom: 3rem;
  background-color: #d5440b;
}
table {
  display: table;
  border: 1px;
  border-collapse: collapse;
  border-spacing: 0;
  border-color: #989898;
}
section {
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}
section p {
  margin-bottom: 1.5rem;
}
figure {
  margin-bottom: 0;
}
main:not(#home) section:nth-of-type(even) {
  background-color: #ebebeb;
}
.fz-0,
ol,
ul {
  font-size: 0;
}
li {
  font-size: 1rem;
}
.all {
  margin: 0 auto;
  background-color: #fff;
}
.all a:not(.btn):not([class*="-color"]) {
  color: inherit;
}
.all a:not(.btn):not([class*="-color"]):active,
.all a:not(.btn):not([class*="-color"]):hover {
  color: #d5440b;
  text-decoration: none;
  outline: 0;
}
.decimal:not(.inside),
.disc:not(.inside) {
  padding-left: 1.5rem;
}
.disc > li {
  list-style-type: disc;
}
.decimal > li {
  list-style-type: decimal;
}
.check > li {
  display: flex;
  margin: 0.25rem 0;
}
.inside > li {
  list-style-position: inside;
}
#header .menu-top {
  font-size: 0.875rem;
}
#header .menu-top a:active,
#header .menu-top a:focus,
#header .menu-top a:hover {
  color: #f69a30;
}
#menu {
  height: auto;
  line-height: 4rem;
  position: relative;
}
#sort {
  z-index: 1030;
  position: absolute;
  background-color: #fff;
  top: 100%;
  right: 0;
  width: 100%;
  max-width: 90rem;
  display: none;
  line-height: 3;
  box-shadow: 0 4px 6px #989898;
}
#sort .arrow-down {
  display: none;
}
#menu li {
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
  position: relative;
}
#menu ul > li > a {
  display: block;
  position: relative;
  box-sizing: border-box;
}
.under-menu {
  position: absolute;
  right: 0;
  top: 100%;
  width: 23.75rem;
  z-index: 1030;
  box-shadow: 0 0 1rem #666;
  border-radius: 5px;
  display: none;
  line-height: 1.5;
}

#menu-product {
  width: 990px;
  right: calc(50% - 360px);
}
.under-menu svg * {
  fill: #d5440b;
}
.under-menu li {
  height: auto;
}

.module:hover {
  color: #fff !important;
}

.under-menu:hover:before {
  display: none;
}
.under-menu-headline .active a {
  display: block;
}
.under-menu-headline .active,
.under-menu-headline .active a:hover {
  color: #fff !important;
  background-color: #d5440b !important;
}
#menu-button {
  position: relative;
  width: 2rem;
  height: 3.75rem;
}
#menu-button:after,
#menu-button:before {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: #bcbcbc;
  left: 0;
  top: 50%;
  transform-origin: 50% 50%;
  transition: all 0.25s;
}
#menu-button span {
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: #bcbcbc;
  left: 0;
  top: 50%;
  transform-origin: 50% 50%;
  transition: opacity 0.25s;
}
#menu-button:before {
  transform: translate3d(0, -10px, 0);
}
#menu-button:after {
  transform: translate3d(0, 10px, 0);
}
#menu-button.act span {
  opacity: 0;
}
#menu-button.act:before {
  transform: rotate3d(0, 0, 1, 45deg);
}
#menu-button.act:after {
  transform: rotate3d(0, 0, 1, -45deg);
}
.slider {
  overflow: hidden;
  position: relative;
  background-color: #d5440b;
  min-height: 6.25rem;
}
.slider[data-image] {
  padding-top: calc(10 / 72 * 100%);
  background-size: cover;
}
.slider > img {
  width: 100%;
  min-width: 45rem;
  height: auto;
}
.slider figcaption {
  line-height: 1;
  position: absolute;
  font-size: 1.5rem;
  top: calc(50% - 1rem);
  left: 4.75vw;
  white-space: nowrap;
}
.slider figcaption * {
  font-size: 1.5rem;
  margin: 0;
}
.slider figcaption img,
.slider figcaption svg {
  margin-right: 1rem;
}
.breadcrumb {
  line-height: 1.5;
  background: #fff;
  background-image: linear-gradient(#d6dbe0, #fff 20%);
  background-repeat: no-repeat;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  margin-bottom: 0;
  overflow-x: auto;
}
.breadcrumb ol,
.breadcrumb ul {
  margin-bottom: 0;
  padding: 0;
  white-space: nowrap;
}
.breadcrumb ol li,
.breadcrumb ul li {
  font-size: 0.875rem;
}
.breadcrumb .breadcrumb-item {
  white-space: nowrap;
  display: inline-block;
}
.supmenu {
  line-height: 1.5;
  padding: 0.75rem 0;
  background-color: #ebebeb;
  border-bottom: 1px solid #bfc7ce;
  overflow-x: auto;
  position: sticky;
  top: 0;
  z-index: 1020;
}
.supmenu ul {
  white-space: nowrap;
}
.supmenu li {
  display: inline-block;
  padding: 0 1rem;
}
.supmenu li ~ li {
  border-left: 1px solid #989898;
}
.accordion {
  border: 1px solid #d6dbe0;
  border-radius: 0.25rem;
  overflow: hidden;
  margin-bottom: 3rem;
}
.accordion.no-border {
  border: 0;
}
.accordion input[type="checkbox"],
.accordion input[type="radio"] {
  display: none;
}
.accordion label {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  position: relative;
  cursor: pointer;
  margin: 0;
}
.accordion label:after,
.accordion label:before {
  content: "";
  display: inline-block;
  position: absolute;
  right: 0.5rem;
  top: 49%;
  width: 1rem;
  height: 3px;
  transform-origin: center center;
  background-color: #fff;
  transition: transform 0.6s ease;
}
.accordion label:before {
  transform: rotate(0);
}
.accordion label:after {
  transform: rotate(90deg);
}
.accordion label.main-cross:after,
.accordion label.main-cross:before {
  background-color: #d5440b;
}
.accordion label.no-cross:after,
.accordion label.no-cross:before {
  display: none;
}
.accordion .accordion-body {
  padding: 1rem;
  max-height: 0;
  will-change: max-height;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0, 0.87, 0, 1);
}
.accordion .accordion-body > * {
  display: none;
}
.accordion .accordion-body.border-bottom {
  border-bottom: 1px solid #989898;
}
.accordion input[type="checkbox"]:checked ~ label:before,
.accordion input[type="radio"]:checked ~ label:before {
  transform: rotate(-495deg);
  transition: transform 0.6s ease;
}
.accordion input[type="checkbox"]:checked ~ label:after,
.accordion input[type="radio"]:checked ~ label:after {
  transform: rotate(-405deg);
  transition: transform 0.6s ease;
}
.accordion input[type="checkbox"]:checked + label ~ .accordion-body,
.accordion input[type="radio"]:checked + label ~ .accordion-body {
  height: auto;
  max-height: 60rem;
  overflow: auto;
  transition: max-height 0.6s cubic-bezier(0.87, 0, 1, 0.13);
}
.accordion input[type="checkbox"]:checked + label ~ .accordion-body > *,
.accordion input[type="radio"]:checked + label ~ .accordion-body > * {
  display: block;
}
#contact-circles {
  padding-top: 3.5rem;
  padding-bottom: 5rem;
}
#contact-circles circle {
  stroke: #d5440b;
}
#contact-circles path {
  fill: #d5440b;
}
#contact-circles a * {
  transition: all 0.25s;
}
#contact-circles a:hover * {
  transition: all 0.25s;
}
#contact-circles a:focus svg circle,
#contact-circles a:hover svg circle {
  fill: #d5440b;
}
#contact-circles a:focus svg path,
#contact-circles a:hover svg path {
  fill: #fff;
  transform: scale(1.1);
  transform-origin: center center;
}
.circle .border {
  opacity: 0;
}
.circle circle {
  stroke-width: 0;
  fill: #ebebeb;
}
.circle * {
  transition: all 0.25s;
}
.circle :hover * {
  transition: all 0.25s;
}
.circle :focus circle,
.circle :hover circle {
  fill: #d5440b;
}
.circle :focus path,
.circle :hover path {
  fill: #fff;
}
.circle :focus .border,
.circle :hover .border {
  opacity: 1;
  fill: #f4f4f4;
}
#footer {
  background-color: #101;
  color: #f4f4f4;
  position: relative;
}
#contact-us-side {
  display: none;
  user-select: none;
}
.footer_title {
  border-bottom: 1px solid #d6dbe0;
  padding: 1rem 0;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  color: #6a60bd;
}
#footer .b-area {
  border-top: 1px solid #989898;
}
#social-btn {
  display: inline-block;
  width: 4rem;
  height: 4rem;
  position: absolute;
  top: -2.125rem;
  right: 3rem;
  text-align: center;
}
.social-wrap {
  height: 100%;
}
.social-wrap svg {
  fill: #d5440b;
}
.social-wrap a {
  display: inline-block;
  overflow: hidden;
  font-size: 1.25rem;
  z-index: 5;
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  background-color: #d6dbe0;
  border-radius: 50%;
  transition: all 0.25s;
  cursor: pointer;
  vertical-align: middle;
  box-shadow: 0 0 1px 1px #ccc;
}
.social-wrap > a {
  width: 100%;
  height: 100%;
  line-height: 4rem;
  border-radius: 50%;
  background-color: #d6dbe0;
  z-index: 10;
  position: relative;
  box-shadow: none;
}
.social-wrap ul {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4rem;
  text-align: center;
  margin: 1rem auto;
  padding-left: 0;
  display: none;
  list-style: none;
}
.social-wrap ul li {
  margin-top: 1rem;
}
#back-to-top {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 10;
  transition: all 0.4s ease;
  opacity: 1;
  text-align: center;
  background-color: #d5440b;
  border-radius: 50%;
  opacity: 0.7;
  z-index: 900;
}
#back-to-top a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
#back-to-top svg {
  display: inline-block;
  width: 100%;
  height: 100%;
  text-align: center;
  fill: #fff;
  transition: all 0.4s ease;
}
#back-to-top:hover,
.social-wrap a:hover {
  opacity: 1;
}
@keyframes hvr-bob {
  0% {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob-float {
  100% {
    transform: translateY(-8px);
  }
}
.ratio-box {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  overflow: hidden;
  margin: 0;
  min-height: 9rem;
  border-radius: 4px;
}
.ratio-box noscript img,
.ratio-box > iframe,
.ratio-box > img,
.ratio-box > object,
.ratio-box > svg {
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
}
.ratio-box > iframe {
  width: 100%;
  height: 100%;
}
.ratio-box > img {
  width: auto;
  transition: all 0.4s ease;
}
.btn {
  color: #fff;
  background-color: #0c718f;
  background-image: radial-gradient(ellipse at center, #1b8da7, #0c718f);
  border: 1px solid transparent;
}
.btn svg * {
  fill: #fff;
}
.btn:focus,
.btn:hover {
  color: #1b8da7;
  background-color: transparent;
  background-image: none;
  border-color: #1b8da7;
  box-shadow: none;
}
.btn:focus svg *,
.btn:hover svg * {
  fill: #1b8da7;
}
.btn.btn-orange {
  color: #323232;
  background-color: #f69a30;
  border: 1px solid #f69a30;
}
.btn.btn-orange:focus,
.btn.btn-orange:hover {
  color: #f69a30;
  background-color: transparent;
}
.btn.btn-orange:focus svg *,
.btn.btn-orange:hover svg * {
  fill: #f69a30;
}
.btn-outlet,
.btn.focus {
  background-color: transparent;
  color: #d5440b;
  border: 2px solid #d5440b;
}

#pages {
  color: #646464;
  min-width: 8rem;
  padding: 0.25rem;
  font-size: 1rem;
  font-family: Verdana, Arial, Helvetica, "Noto Sans TC", "Microsoft JhengHei",
    sans-serif;
  border-color: #989898;
}
#pages:focus {
  border-color: #d5440b;
  box-shadow: none;
  outline: 0;
  background: #fff;
}
.swipter-article-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 1.5;
}
.swipter-article-wrap * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.swipter-article-wrap .swipter-article-title {
  font-size: 4vw;
  mix-blend-mode: difference;
}
.swipter-article-wrap .swipter-article-content {
  font-size: 3vw;
}
blockquote {
  line-height: 1.4;
}
blockquote:after,
blockquote:before {
  content: open-quote;
  font-family: "Lucida Console";
  font-size: 4rem;
}
blockquote:after {
  content: close-quote;
}
.position-static {
  position: static !important;
}
.position-relative {
  position: relative !important;
}
.position-absolute {
  position: absolute !important;
}
.position-fixed {
  position: fixed !important;
}
.position-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
}
.bgs-cover {
  background-size: cover;
}
.bgs-100 {
  background-size: 100% auto;
}
.bgp-l {
  background-position-x: left;
}
.bgp-r {
  background-position-x: right;
}
.bgp-t {
  background-position-y: top;
}
.bgp-b {
  background-position-y: bottom;
}
.bgp-c {
  background-position: center center;
}
.bgp-xc {
  background-position-x: center;
}
.bgp-yc {
  background-position-y: center;
}
.bgr {
  background-repeat: no-repeat;
}
.w-20 {
  width: 20%;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-auto {
  overflow: auto;
}
.main-bg {
  background-color: #d5440b !important;
}
.main-color {
  color: #d5440b !important;
}
.sub-bg {
  background-color: #0c718f !important;
}
.sub-color {
  color: #0c718f !important;
}
.gray-color {
  color: #d6dbe0 !important;
}
.gray-bg {
  background-color: #ebebeb !important;
}
.gray2-color {
  color: #eee !important;
}
.gray2-bg {
  background-color: #eee !important;
}
.gray3-color {
  color: #f4f4f4 !important;
}
.gray3-bg {
  background-color: #f4f4f4 !important;
}
.orange-color {
  color: #f69a30 !important;
}
.orange-bg {
  background-color: #f69a30 !important;
}
.fff-color {
  color: #fff !important;
}
.fff-bg {
  background-color: #fff !important;
}
.blue-color {
  color: #2858aa !important;
}
.blue-bg {
  background-color: #2858aa !important;
}
.dline {
  border-bottom: 3px solid #d5440b !important;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.clear {
  clear: both;
}
.hidden {
  display: none !important;
}
.box-shadow {
  box-shadow: 0 46px 113px -34px rgba(0, 0, 0, 0.5);
}
.noborder {
  border: none;
}
.l-size {
  font-size: 2rem;
}
.m-size {
  font-size: 1.25rem;
}
.s-size {
  font-size: 0.75rem;
}
.check-circle {
  fill: #d5440b;
}
.flex-constant {
  flex-shrink: 0;
}
img.blur {
  filter: blur(4px);
}
.bg-lazyload {
  background-image: none;
}
.article-list h2,
.article-list h3 {
  font-size: 1rem;
}
.article-list p {
  height: 0;
  overflow: hidden;
  position: relative;
}
.article-list .ratio-box {
  min-height: 3rem;
  margin-top: 0.5rem;
}
@media (min-width: 1260px) {
  #sort {
    position: static;
    width: auto;
    display: block !important;
    line-height: 4rem;
    box-shadow: none;
  }
  #sort .arrow-down {
    display: inline;
  }
  #menu li {
    width: auto;
  }
  #menu ul > li > a:hover:before {
    position: absolute;
    bottom: 0;
    content: "";
    left: -1rem;
    display: block;
    width: calc(100% + 1rem * 2);
    height: 3px;
    background-color: #d5440b;
  }
  #menu ul > li > a:hover svg {
    fill: #d5440b;
  }
  #menu li.act > a {
    color: #d5440b;
  }
  #menu li.act > a:before {
    position: absolute;
    bottom: 0;
    content: "";
    left: -1rem;
    display: block;
    width: calc(100% + 1rem * 2);
    height: 3px;
    background-color: #d5440b;
  }
  #menu li.act > a:after {
    position: absolute;
    bottom: 0;
    content: "";
    left: calc(50% - 1rem / 2);
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #d5440b transparent;
    border-width: 0 0.5rem 0.5rem;
  }
  #menu li.act > a svg {
    fill: #d5440b;
  }
  #menu-button {
    display: none;
  }
  #menu a:focus + .under-menu,
  #menu a:hover + .under-menu,
  .under-menu:hover {
    display: block;
  }
}
@media (min-width: 1024px) {
  .swipter-article-wrap .swipter-article-title {
    font-size: 2.25rem;
  }
  .swipter-article-wrap .swipter-article-content {
    font-size: 1.625rem;
  }
  #contact-us-side {
    display: block;
  }
  #contact-us-side-content,
  #contact-us-side-title {
    position: fixed;
    right: 0;
    top: 40%;
    z-index: 1020;
    border-radius: 10% 0 0 10%;
  }
  #contact-us-side-content {
    right: auto;
    left: 100%;
    width: 700px;
    z-index: 1021;
    transition: left 0.3s ease-in-out;
  }
  #contact-us-side.active #contact-us-side-content {
    left: calc(100% - 700px);
  }
}
@media (min-width: 576px) {
  #contact-circles address,
  #contact-circles p {
    font-size: 1.375rem;
  }
  .article-list h2,
  .article-list h3 {
    font-size: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .article-list p {
    height: 5rem;
  }
  .article-list p:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1.5rem;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      to top,
      #fff 0,
      #fff 20%,
      rgba(255, 255, 255, 0) 100%
    );
    box-sizing: border-box;
    pointer-events: none;
  }
}
@media (max-width: 767px) {
  ::-webkit-scrollbar {
    width: 12px;
    height: 6px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #777;
  }
  ::-webkit-scrollbar-track-piece {
    background-color: #acacac;
  }
  main {
    display: flex;
    flex-direction: column;
  }
  section {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
  }
  #footer h4 {
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
  }
}
.if-ie .loading {
  display: none;
}
.if-ie img.blur + .swipter-article-wrap {
  display: none !important;
}
.if-safari #pages {
  -webkit-appearance: none;
}
.article-list article {
  padding: 1rem 0;
  cursor: pointer;
}
.article-list article:hover {
  box-shadow: 1px 1px 8px #d6dbe0;
}
.article-list article + article {
  border-top: 1px solid #d6dbe0;
}
#how #accordion-toggle {
  border-radius: 0.25rem;
  border: 1px dashed #d5440b;
  color: #d5440b;
  padding: 0.25rem;
  background-color: #fff;
  cursor: pointer;
}
#how #accordion-toggle:hover {
  color: #fff;
  background-color: #d5440b;
}
#how .accordion .accordion-body {
  max-height: 8rem;
}
#how .accordion .accordion-body > * {
  display: block;
}
#how .accordion .accordion-body p {
  display: none;
}
#how .accordion input[type="checkbox"] + label,
#how .accordion input[type="radio"] + label {
  background-color: #0c718f;
}
#how .accordion input[type="checkbox"]:checked + label,
#how .accordion input[type="radio"]:checked + label {
  background-color: #d5440b;
}
#how .accordion input[type="checkbox"]:checked + label ~ .accordion-body,
#how .accordion input[type="radio"]:checked + label ~ .accordion-body {
  max-height: 60rem;
}
#how .accordion input[type="checkbox"]:checked + label ~ .accordion-body p,
#how .accordion input[type="radio"]:checked + label ~ .accordion-body p {
  display: block;
}
.card {
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  border: none;
  box-shadow: 0 0 0.5rem #d6dbe0;
}
.card .card-title {
  font-size: 1rem;
  color: #d5440b;
}
#sitemap section .row {
  min-height: 10rem;
}
#sitemap h4 {
  margin-bottom: 0.5rem;
  color: #d5440b;
}
@media print {
  #contact-circles,
  #footer,
  #header {
    display: none;
  }
}
#youtube {
  display: inline-block;
  position: relative;
}
#youtube::before {
  content: "\25B6";
  color: #fff;
  font-size: 2.25rem;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}
#youtube:hover::before {
  background-color: rgba(0, 0, 0, 0.7);
}

/* cimes 首頁*/
.btn-cimes{
width: 300px;
}

  /* 圖片遮罩 */
.mask {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.mask::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #9898983d;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.mask:hover::after {
  opacity: 1;
}

.btn-cimes {
    width: 300px;
}

/* 表格表頭顏色 */
thead {
    --bs-table-bg: #d5440b;
    --bs-table-color: #ffffff;
}

table th, table td {
    padding: 12px !important;
}