﻿/*@site-font: "TaipeiSans";*/
/*@site-font: "cwTeXYen";*/
/*@site-font: "Noto Sans TC";*/
/************************Fotter setting************************/
footer {
  overflow: hidden;
  border-top: 1px solid #e3e3e3;
  background-image: url('../Images/temp/background/top_message_pattern.png');
}
footer .info {
  background: rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.65);
  padding: 60px 0px;
  font-size: 1.05rem;
  position: relative;
}
@media (min-width: 1200px) {
  footer .info .container {
    max-width: 1240px;
  }
}
footer .info .container {
  margin: auto;
}
footer .info .part1,
footer .info .part2,
footer .info .part3 {
  padding-left: 25px;
  padding-right: 25px;
}
footer .info .part1 h2,
footer .info .part2 h2,
footer .info .part3 h2 {
  text-align: center;
  line-height: 2;
  letter-spacing: 5px;
  font-weight: 700;
  color: #1abbac;
}
footer .info .part1 h2:before,
footer .info .part2 h2:before,
footer .info .part3 h2:before,
footer .info .part1 h2::after,
footer .info .part2 h2::after,
footer .info .part3 h2::after {
  content: "-";
}
footer .info .part1 a:hover,
footer .info .part2 a:hover,
footer .info .part3 a:hover {
  text-decoration: none;
}
footer .info .part1 a:hover p,
footer .info .part2 a:hover p,
footer .info .part3 a:hover p {
  color: #FF9800;
}
footer .info .part1 p,
footer .info .part2 p,
footer .info .part3 p {
  letter-spacing: 1px;
  line-height: 2;
  color: #e7e7e7;
  font-size: 1.03rem;
}
footer .info .part1 {
  /*border-right: 1px solid #e3e3e3;*/
}
footer .info .part2 p {
  margin-bottom: 0px;
}
footer .info .part2 a {
  display: flex;
  justify-content: center;
}
footer .info .part3 .content {
  display: flex;
  min-height: 300px;
  flex-wrap: wrap;
}
footer .info .part3 .content .text {
  align-self: center;
}
footer .info .part3 .content .map > iframe {
  height: 100%;
  /*margin-left: 20px;*/
}
footer .info .part3 p:first-of-type {
  color: #1abbac;
  font-size: 1.1rem;
  font-weight: 500;
}
footer .info .part3 p:first-of-type:after {
  content: "】";
}
footer .info .part3 p:first-of-type:before {
  content: "【";
}
footer .info .part3 p {
  margin-bottom: 0px;
}
footer .copyright {
  text-align: center;
  background-color: #1abbac;
}
footer .copyright h6 {
  color: white;
  margin-bottom: 0px;
  padding: 10px 0px;
}
/************************Navbar logo-part************************/
.subnav-m,
.subnav-l {
  align-self: center;
  padding: 0px 60px 0px 0px;
}
.subnav-m [class$="-share"],
.subnav-l [class$="-share"] {
  width: 36px;
  height: 36px;
  background-size: contain;
  border-radius: inherit;
  display: inline-flex;
  background-color: transparent;
}
.subnav-m .fb-share,
.subnav-l .fb-share {
  background-image: url('../Images/Icon/facebook-icon.png');
}
.subnav-m .line-share,
.subnav-l .line-share {
  background-image: url('../Images/Icon/Line-Icon.png');
}
.subnav-m .twitter-share,
.subnav-l .twitter-share {
  background-image: url('../Images/Icon/twitter-icon.png');
}

    .subnav-m .link-share,
    .subnav-l .link-share {
        background-image: url('../Images/Icon/link-icon.png');
    }

.subnav-m a,
.subnav-l a {
  color: white !important;
  background: #1abbac;
  padding: 10px;
  margin: 0px 2.5px;
  border-radius: 20px;
  transition-duration: 0.5s;
  cursor: pointer;
}
.subnav-m a:hover,
.subnav-l a:hover {
  transform: rotate(360deg);
  text-decoration: none;
}
.logo-part {
  display: flex;
}
.logo-part .logo {
  flex-grow: 1;
}
@media (max-width: 575px) {
  .subnav-m {
    display: none;
  }
  .subnav-l {
    display: none;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .subnav-m {
    display: none;
  }
  .subnav-l {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .subnav-l {
    display: none;
  }
  .subnav-m {
    display: flex;
  }
}
@media (min-width: 992px) {
  .subnav-m {
    display: none;
  }
  .subnav-l {
    display: flex;
  }
  .navbar-expand-md .navbar-collapse {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .navbar-expand-md .navbar-collapse .subnav-l {
    display: flex;
    padding: 10px 20px;
  }
}
@media (min-width: 1200px) {
  .subnav-m {
    display: none;
  }
}
/************************Navbar icon setting************************/
nav {
  background-color: white;
  /*box-shadow: 0px 1px 10px #999;*/
}
nav .age-nav {
  flex-grow: inherit;
}
@media (max-width: 575px) {
  .navbar-brand img {
    /*width: 220px;*/
    padding: 0px 10px;
    max-width: 230px;
  }
  .navbar-toggler {
    width: 72px;
  }
  .navbar-toggler svg {
    width: 100%;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .navbar-brand img {
    /*width: 314px;*/
    max-width: 300px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .navbar-brand {
    padding-left: 30px !important;
  }
  .navbar-brand img {
    /*width: 260px;*/
    max-width: 345px;
  }
}
@media (min-width: 992px) {
  .navbar-brand img {
    /*width: 80%;*/
  }
}
@media (min-width: 1200px) {
  .navbar-brand img {
    /*width: 80%;*/
  }
}
/************************Navbar Dropbar menu style setting************************/
@media (max-width: 575px) {
  .navbar-nav {
    /*.nav-item.dropdown.show {
            border-bottom: 3px solid #009688;
            a[id^="dropdown"] {
                color: #2ea7a7;
                background: white;
            }
        }*/
  }
  .navbar-nav .nav-item.dropdown {
    border-bottom: 3px solid transparent;
  }
  .navbar-nav .nav-item.dropdown a[id^="dropdown"] {
    font-size: 1.4rem;
    padding: 10px 15px;
    padding-left: 15px !important;
    padding-right: 15px !important;
    color: #1abbac;
    font-weight: 700;
    letter-spacing: 1px;
  }
  .navbar-nav .nav-item.dropdown a[id^="dropdown"]:hover {
    color: #000000;
    background: white;
  }
  .navbar-nav .nav-item.dropdown .dropdown-menu {
    padding: 0px;
    font-size: 1.4rem;
    border: 0px solid rgba(0, 0, 0, 0.15);
    border-radius: 0rem;
    margin: 0px;
  }
  .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item {
    padding: 0.5rem 1.5rem;
    color: #212529;
  }
  .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
    background: #1abbac;
    opacity: 0.9;
    color: white;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .navbar-nav {
    /*.nav-item.dropdown.show {
            border-bottom: 3px solid #009688;
            a[id^="dropdown"] {
                color: #2ea7a7;
                background: white;
            }
        }*/
  }
  .navbar-nav .nav-item.dropdown {
    border-bottom: 3px solid transparent;
  }
  .navbar-nav .nav-item.dropdown a[id^="dropdown"] {
    font-size: 1.2rem;
    padding: 10px 15px;
    padding-left: 15px !important;
    padding-right: 15px !important;
    color: #1abbac;
    font-weight: 700;
    letter-spacing: 1px;
  }
  .navbar-nav .nav-item.dropdown a[id^="dropdown"]:hover {
    color: #75bd78;
    background: white;
  }
  .navbar-nav .nav-item.dropdown .dropdown-menu {
    padding: 0px;
    font-size: 1rem;
    border: 0px solid rgba(0, 0, 0, 0.15);
    border-radius: 0rem;
    margin: 0px;
  }
  .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item {
    padding: 0.5rem 1.5rem;
    color: #212529;
  }
  .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
    background: #1abbac;
    opacity: 0.9;
    color: white;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .navbar .container {
    margin: 0;
    max-width: unset;
    padding: 0;
    display: block;
  }
  .navbar .container .navbar-collapse {
    background: #1abbac;
  }
  .navbar .container .navbar-collapse .navbar-nav {
    margin: auto;
    /*.nav-item.dropdown.show {
                        border-bottom: 3px solid #009688;

                        a[id^="dropdown"] {
                            color: #2ea7a7;
                            background: white;
                        }
                    }*/
  }
  .navbar .container .navbar-collapse .navbar-nav .nav-item.dropdown {
    border-top: 3px solid transparent;
  }
  .navbar .container .navbar-collapse .navbar-nav .nav-item.dropdown a[id^="dropdown"] {
    font-size: 1rem;
    padding: 10px 15px;
    padding-left: 15px !important;
    padding-right: 15px !important;
    color: white;
    font-weight: 500;
    letter-spacing: 1px;
  }
  .navbar .container .navbar-collapse .navbar-nav .nav-item.dropdown a[id^="dropdown"]:hover {
    color: #75bd78;
    background: white;
  }
  .navbar .container .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu {
    padding: 0px;
    font-size: 1rem;
    border: 0px solid rgba(0, 0, 0, 0.15);
    border-radius: 0rem;
    margin: 0px;
  }
  .navbar .container .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item {
    padding: 0.5rem 1.5rem;
  }
  .navbar .container .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
    background: #1abbac;
    opacity: 0.9;
    color: white;
  }
}
@media (min-width: 992px) {
  .navbar-nav .nav-item.dropdown {
    border-bottom: 3px solid transparent;
  }
  .navbar-nav .nav-item.dropdown a[id^="dropdown"] {
    /* font-size: 100px; */
    font-size: 1.4rem;
    padding: 0px 5px;
    color: #1abbac;
    font-weight: 700;
    letter-spacing: .5px;
    margin-top:30px
  }
    .navbar-nav .nav-item.dropdown a[id^="dropdown"]:hover {
        /* font-size: 100px; */
        color: #4F2121;
        font-weight: 900;
    }
  .navbar-nav .nav-item.dropdown .dropdown-menu {
    padding: 0px;
    font-size: 1rem;
    border: 0px solid rgba(0, 0, 0, 1);
    border-radius: 0rem;
  }
  .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item {
    padding: 0.5rem 1.5rem;
  }
  .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
    background: #1abbac;
    opacity: 0.9;
    color: white;
  }
  .navbar-nav .nav-item.dropdown:hover {
    //border-bottom: 3px solid #1abbac;
  }
  .navbar-nav .nav-item.dropdown.show {
    border-bottom: 3px solid #1abbac;
  }
}
/************************Navbar resize************************/
@media (min-width: 992px) {
  #navBar .container {
    height: 70px;
    transition-duration: 0.5s;
  }
    #navBar .container img {
        /*height: 100px;*/
        transition-duration: 0.5s;
        height: 24px;
        width: 24px;
        max-width: 570px;
        margin-top: 16px
    }
}
/************************hamburger icon css************************/
.navbar-toggler .ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.navbar-toggler .ham .line {
  fill: none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke: #75bd78;
  stroke-width: 5.5;
  stroke-linecap: round;
}
.navbar-toggler .hamRotate.active {
  transform: rotate(45deg);
}
.navbar-toggler .hamRotate180.active {
  transform: rotate(180deg);
}
.navbar-toggler .ham1 .top {
  stroke-dasharray: 40 139;
}
.navbar-toggler .ham1 .bottom {
  stroke-dasharray: 40 180;
}
.navbar-toggler .ham1.active .top {
  stroke-dashoffset: -98px;
}
.navbar-toggler .ham1.active .bottom {
  stroke-dashoffset: -138px;
}
.navbar-container-reisize {
  height: 50px !important;
  transition-duration: 0.5s;
}
.navbar-icon-reisize {
  height: 50px !important;
  transition-duration: 0.5s;
}
.nav-link-resize {
  padding: 13px 15px !important;
  transition-duration: 0.5s;
}
.ctcid-shodw {
  box-shadow: 0px 1px 10px #999;
}
/************************global setting************************/
* {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "微軟正黑體";
}
p {
  text-align: justify;
}
* button:focus {
  outline: none;
}
main {
  /*box-shadow: 0px 1px 10px #999;*/
  background-image: url(../Images/temp/background/top_message_pattern.png);
  min-height: 840px;
}
.row {
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 0px;
  padding-right: 0px;
}
#banner {
  box-shadow: 0 -7px 3px 0 rgba(0, 0, 0, 0.2), 0 7px 3px 0 rgba(0, 0, 0, 0.2);
}
#banner .owl-nav {
  margin-top: 0px;
}
/*.floatingNav {
    border-radius: 2px;
    box-shadow: 0px 1px 10px #999;
}*/
/************************common class************************/
/*.box-shadow {
    -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.2), 0 6px 20px rgba(0,0,0,.19);
    box-shadow: 0 4px 8px rgba(0,0,0,.2), 0 6px 20px rgba(0,0,0,.19);
}*/
/*.box-shadow-circle {
    -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.2), 0 6px 20px rgba(0,0,0,.19);
    box-shadow: 0 4px 8px rgba(0,0,0,.2), 0 6px 20px rgba(0,0,0,.19);
    border-radius: 100px;
}*/
/*.cover {
    width: 200px;
    height: 200px;
    background-color: rgba(140, 198, 63, 0.7);
    opacity: 1;
    filter: alpha(opacity=0);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    background-image: url(https://www.biogas.com.tw/images/cover-icon.svg);
    background-image: url(../images/cover-icon.png) \9;
    background-image: url(../images/cover-icon.png);
    background-repeat: no-repeat;
    background-position: center bottom;
}*/
/************************search section**********************/
.search-section {
  height: 80px;
  background-color: yellowgreen;
}
/************************body setting************************/
body {
  padding-top: 70px;
  padding-bottom: 20px;
}
@media (max-width: 575px) {
  body {
    padding-top: 63px;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  body {
    padding-top: 90px;
    padding-bottom: 0px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  body {
    padding-top: 97px;
  }
}
@media (min-width: 992px) {
  body {
    padding-top: 30px;
  }
}
/************************owl-carousel banner************************/
/*@media screen and (max-width: 990px) {
    #banner .owl-nav .owl-prev, #banner .owl-nav .owl-next {
        top: 50%;
    }
}*/
#banner .owl-nav .owl-prev {
  left: 0px;
  background: url(../Images/Icon/banner-prev.png) no-repeat 50% 50%;
}
#banner .owl-nav .owl-next {
  right: 0px;
  background: url(../Images/Icon/banner-next.png) no-repeat 50% 50%;
}
#banner .owl-nav .owl-prev,
#banner .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  display: block;
  font-size: 0;
  width: 30px;
  height: 40px;
  margin-top: -20px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
#site-link .owl-nav .owl-prev {
  left: -50px;
  background: url(../../Images/Icon/banner-prev.png) no-repeat 50% 50%;
}
#site-link .owl-nav .owl-next {
  right: -50px;
  background: url(../../Images/Icon/banner-next.png) no-repeat 50% 50%;
}
#site-link .owl-nav .owl-prev,
#site-link .owl-nav .owl-next {
  position: absolute;
  top: 36%;
  display: block;
  font-size: 0;
  width: 30px;
  height: 40px;
  margin-top: -20px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
#banner {
  /*margin-top: -60px;
    padding-top: 60px;
    background: white;*/
}
/************************static banner************************/
#static-banner {
  background-image: url(/Images/commain_event_2.png);
  /*background-image: url(https://www.coa.gov.tw/files/masthead/4/A01_1.jpg);*/
  min-height: 250px;
  background-position: top;
  background-size: cover;
}
/************************breadcrumb banner************************/
#breadcrumb {
  background-color: whitesmoke;
}
#breadcrumb ol {
  list-style: none;
}
#breadcrumb .cd-breadcrumb li,
#breadcrumb .cd-multi-steps li {
  display: inline-block;
  margin: 0.5em 0;
}
#breadcrumb .cd-breadcrumb li > *,
#breadcrumb .cd-multi-steps li > * {
  display: inline-block;
  font-size: 1rem;
  color: #2c3f4c;
}
#breadcrumb .cd-breadcrumb li::after,
#breadcrumb .cd-multi-steps li::after {
  margin: 0 1em;
}
#breadcrumb .cd-breadcrumb .custom-separator li:not(.current)::after,
#breadcrumb .cd-multi-steps .custom-separator li:not(.current)::after {
  content: '';
  height: 12px;
  width: 16px;
  background: url(../Images/Icon/cd-custom-separator.svg) no-repeat center center;
  /*vertical-align: middle;*/
}
#breadcrumb .cd-breadcrumb li:not(.current)::after,
#breadcrumb .cd-multi-steps li:not(.current)::after {
  display: inline-block;
  content: '\00bb';
  margin: 0 0.6em;
  color: #959fa5;
  content: '';
  height: 12px;
  width: 16px;
  background: url(../Images/Icon/cd-custom-separator.svg) no-repeat center center;
  /*vertical-align: middle;*/
}
#breadcrumb .cd-breadcrumb .custom-separator li:not(.current)::after,
#breadcrumb .cd-multi-steps .custom-separator li:not(.current)::after {
  content: '';
  height: 16px;
  width: 16px;
  background: url(../Images/Icon/cd-custom-separator.svg) no-repeat center center;
  vertical-align: middle;
}
#breadcrumb .cd-breadcrumb li.current > *,
#breadcrumb .cd-multi-steps li.current > * {
  color: #639265;
  font-weight: 600;
}
#breadcrumb a {
  color: #96c03d;
  text-decoration: none;
}
.body-resize {
  padding-top: 50px;
  transition-duration: 0.5s;
  padding-bottom: 0px;
}
#twScrollTop {
  color: rgba(150, 150, 150, 0.3);
  font-size: 220%;
  cursor: pointer;
  position: fixed;
  bottom: 10px;
  right: 20px;
  z-index: 99;
  border: none;
  outline: none;
}
.hide {
  display: none !important;
}
/**************google search bar******************/
.search-on {
  height: 80px;
}
.search-off {
  height: 0px;
}
.search-section {
  transition-duration: 0.5s;
  overflow-y: hidden;
}
.search-section .search-container {
  padding: 20px 0px;
}
.search-section .gsc-input-box {
  border-radius: 5px;
}
.ctcid-shadow {
  transition-duration: 0.5s;
}
.ctcid-shadow:hover {
  box-shadow: 0 1px 18px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 18px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 18px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 1px 18px rgba(0, 0, 0, 0.2);
}
.ctcid-img-set {
  justify-content: center;
  width: 80%;
  margin: auto;
}
.ctcid-img-set a {
  transition-duration: 0.3s;
}
.ctcid-img-set a:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
}
.ctcid-img-set .age-img-title {
  text-align: center;
  font-weight: 600;
}
.ctcid-img-set .age-img-border {
  border: 1px solid #e3e3e3;
  padding: 10px;
  margin: 5px 0px;
}