@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;400;500;700&family=Open+Sans:ital,wght@0,500;1,800&display=swap");
/*-------------------------------------------*\
  iehack.scss

  Use
  @include hack($IE-ver),目前使用IE10以上
\*-------------------------------------------*/
/*-------------------------------------------------------------------------------*/
/*    $Main                                                                                     */
/*-------------------------------------------------------------------------------*/
.contents_wrap::after,
.main_content::after,
.main_body::after {
  content: "";
  display: table;
  clear: both;
}

@media (min-width: 813px) {
  .contents_wrap {
    padding: 4rem 0;
  }
}

.main_top {
  margin-bottom: 1rem;
}
@media (min-width: 813px) {
  .main_top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.main_tit {
  font-family: sans-serif, "Noto Sans TC";
  font-size: 2.125em;
  font-weight: 600;
  line-height: 67px;
  color: #080404;
}
@media (max-width: 991px) {
  .main_tit {
    text-align: center;
  }
}

.main_body, .center_body {
  min-height: 30rem;
}

/*-------------------------------------------*\
	Switcher.scss

	Index
	- 1.breadcrumbs
\*-------------------------------------------*/
.social_skip {
  position: absolute;
  top: -1rem;
  left: calc(50% - 7rem);
  text-align: center;
}
@media (min-width: 813px) {
  .social_skip {
    top: 0.5rem;
    left: -14.5rem;
  }
}
.social_skip a {
  display: block;
  width: 1px;
  height: 1px;
  color: #757575;
  white-space: nowrap;
  opacity: 0;
}
.social_skip a:focus {
  width: auto;
  height: auto;
  padding: 0.25rem;
  opacity: 1;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.contents_function {
  text-align: center;
}
.contents_function_inner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: calc((40px + 1rem) * 3);
  margin: 0 auto;
}
@media (min-width: 576px) {
  .contents_function_inner {
    width: calc((48px + 1rem) * 3);
  }
}
@media (min-width: 813px) {
  .contents_function {
    margin-left: auto;
  }
}

.circle_style, .social_links a, .switcher {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  margin: 0.5rem;
  color: rgba(255, 255, 255, 0);
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
}
.circle_style:focus, .social_links a:focus, .switcher:focus {
  outline: 2px dotted #bfa6ff;
}

.switcher {
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media (min-width: 576px) {
  .switcher {
    width: 48px;
    height: 48px;
    line-height: 48px;
  }
}

.sc_font {
  background-color: rgba(125, 0, 0, 0.85);
  background-image: url(../../images/tc_font_change_btn.svg);
}
.sc_font_change {
  background-image: url(../../images/tc_font_change_btn_.svg);
}
.sc_font_bigger {
  font-size: 120%;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.sc_print {
  background-color: rgba(151, 95, 20, 0.85);
  background-image: url(../../images/tc_print_btn.svg);
}
.sc_social {
  background-color: rgba(151, 95, 20, 0.85);
  background-image: url(../../images/tc_social_btn.svg);
}

.social_links {
  position: absolute;
  z-index: 10;
  top: calc(40px + 1rem);
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  visibility: hidden;
  height: 0;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.social_links::after {
  content: "";
  display: table;
  clear: both;
}
@media (min-width: 576px) {
  .social_links a {
    width: 48px;
    height: 48px;
    line-height: 48px;
  }
}

.sc_social-open + .social_links {
  visibility: visible;
  height: auto;
  opacity: 1;
}

.social_links1 {
  background: url(../../images/social_links1.svg) no-repeat center center #3e65b7;
}

.social_links2 {
  background: url(../../images/social_links2.svg) no-repeat center center #db5635;
}

.social_links3 {
  background: url(../../images/social_links3.svg) no-repeat center center #55acee;
}

.social_links4 {
  background: url(../../images/social_links4.svg) no-repeat center center #db6320;
}

.social_links5 {
  background: url(../../images/social_links5.svg) no-repeat center center #50c900;
}

.no-js .main_top {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.no-js .contents_function noscript {
  display: block;
  width: 70%;
  margin-left: auto;
  line-height: 1.5;
  text-align: left;
  font-size: 0.875em;
}
.no-js .contents_function noscript a {
  display: inline-block;
  padding: 0.125rem 0.75rem;
  color: white;
  background-color: #7d0000;
}
.no-js .contents_function_inner {
  margin: 0;
  margin-left: auto;
}

/*-------------------------------------------*\
	Breadcrumbs.scss

	Index
	- 1.breadcrumbs
\*-------------------------------------------*/
.breadcrumbs {
  position: relative;
}

.breadcrumbs_u {
  padding: 1rem 0;
}
.breadcrumbs_u li {
  display: inline-block;
  margin: 0.5rem 0;
  font-size: 0.875em;
  letter-spacing: 0.15rem;
  color: #757575;
}
.breadcrumbs_u li:not(:last-child):after {
  content: "/";
  margin: 0 0.25rem;
}
.breadcrumbs_u li a {
  display: inline-block;
  color: #757575;
}
.breadcrumbs_u li a:hover {
  text-decoration: underline;
}
.breadcrumbs_u li:last-child a {
  color: #975f14;
}