@font-face {
  font-family: 'genki-l'; /* 自訂字型名稱 */
  src: url('../fonts/GenSekiGothic2TW-L.otf') format('opentype'); /* OTF 檔案路徑 */
    font-family: 'genki-b'; /* 自訂字型名稱 */
  src: url('../fonts/GenSekiGothic2TW-B.otf') format('opentype'); /* OTF 檔案路徑 */
      font-family: 'genki-h'; /* 自訂字型名稱 */
  src: url('../fonts/GenSekiGothic2TW-H.otf') format('opentype'); /* OTF 檔案路徑 */
        font-family: 'genki-m'; /* 自訂字型名稱 */
  src: url('../fonts/GenSekiGothic2TW-M.otf') format('opentype'); /* OTF 檔案路徑 */
          font-family: 'genki-r'; /* 自訂字型名稱 */
  src: url('../fonts/GenSekiGothic2TW-R.otf') format('opentype'); /* OTF 檔案路徑 */
}

.container {
  margin-left: 30px;
  margin-right: 30px;
  background-color: #fdf7f2;
  color:#4a403a;
}
body {
  font-family: 'genki-l',sans-serif;
  background-color: #fdf7f2;
}
#link{
  font-size: small;
  color: #4a403a;
}
#link a{
  font-size: small;
  color: #4a403a;
}
#link a:hover{
  font-size: medium;
}
#dropdownMenuButton1{
  padding: 8px;
  margin: 10px;
}
.text-center{
  color: #4A403A;
}
.collapsible-farm {
  background-color: #DBE4AB;
  color: #4A403A;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.5em;
}

.collapsible-farm:hover {
  background-color: #a9d06b;
}
.collapsible-map {
  background-color: #d7a74caa;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.5em;
}

.collapsible-map:hover {
  background-color: #d7a74c;
}
.collapsible-dep {
  background-color: #3e3a3983;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border-radius:10px;
  text-align: left;
  outline: none;
  font-size: 1.5em;
}

.collapsible-dep:hover {
  background-color: #3e3a39;
}

.collapsible-faq {
  background-color: #cbcbc403;
  color: #0d0d0dca;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border-radius:10px;
  text-align: left;
  outline: none;
  font-size: 1.2em;
}

.collapsible-faq:hover {
  background-color: #e0e2ba;
}
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  /* background-color: #f1f1f1;  */
  font-family: 'genki-b', sans-serif;
  font-weight: 500;
  font-size: larger;
  /* color: #1a3d61;
  background-image: linear-gradient(45deg, #a9d06baa, #d7a74caa); */
}
.content-map {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  /* background-color: #f1f1f1;  */
  font-family: 'genki-b', sans-serif;
  font-weight: 500;
  font-size: larger;
  color: #1a3d61;
  background-image: linear-gradient(to right, rgba(200, 255, 0, 0.587), rgb(184, 227, 114));
}


.tcFont{
  font-family: 'genki-b', sans-serif;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.top-fix {
  height: 80px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}
.top-hide {
  display: none;
}
.main-container {

  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.inside-container {

  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
}
@media (width: 1000px){
  .inside-container {

    margin: 0 auto;
    padding: 0 15px;
    width: 1000px;
  }
}
/* .iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
} */
.row-spc{
  margin: 0 auto!important;
  font-family: 'genki-b', serif;
  font-size: 18px;
 
}
i:hover{
  color: #a9d06b;
  cursor: pointer;
}
.icon-footer{
  font-size: 22px;
  color: #5a5a5a;
  margin: 5px 15px;
}
.icon-footer a{
  margin-left: 5pt;
  margin-right: 5pt;
}
.icon-footer i{
  color:  #5a5a5a;
}
.icon-footer i:hover{
  color: #7a882e96;
}
.icon-scp{
  font-size: 12px;
  color: white;
  margin: 2px 2px;
}
.icon-scp a{
  margin-left: 5px;
  margin-right: 5px;
}
.icon-scp .left-side {
  display: flex;
}
.icon-scp .left-side .link-head {
  margin: 0 5px;
}
.icon-scp .left-side .link-head i {
  margin: 0 5px 0 0;
}


.col-disp{
  margin: 10px;
  display: flex; 
}

.link-head{
  color: white;
}
.link-head:hover{
  text-decoration: none;
  color: #a9d06b;
  cursor: pointer;
}
/* 
.nav-bg-color{

background-color: white;

}
.nav-contain{

  background-color: #ececec;
  background-size: 100% ;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 20px;
  max-width: 1920px;
  margin-top: 5px;
  margin-bottom: 5px;

}
.navbar {
  background-color: #dfd5bf33;
  border-radius: 15px;
}

.navbar img{
  width: 300px;
}

.nav-list .menu {
  color: #333333;
  font-family: 'Roboto Slab', serif;
  font-size: 16px;
  line-height: 26px;
  padding: 0 20px;
  text-decoration: none;        
}
.nav-list .menu:hover {
  color: #227bae;
  font-size: 20px;

} */
.color-line{
  color: #999999!important;
}
.last-spc{
  padding: 0 10px;
}
.carousel-height img{
  margin-top: 30px;
  max-height: 900px;
}
.icon-color {
  color: #d7a74e!important;
  margin: 1px auto
}
.text-color {
  color: #5a67f6!important;
  margin: 1px auto
}
.select-color {
  color: #ba5af6!important;
  margin: 3px auto
}
@media (max-width: 1200px){
  .nav-list .menu, .menu-last{
      text-align: center;
      padding: 0px 16px;
  }
  .last-spc{
      padding: 0 10px!important;
  }
  .tiny-last-spc{
    padding: 0 5px!important;
}
}
@media (max-width: 992px){
  .nav-list .menu, .menu-last{
      text-align: center;
      padding: 10px 10px!important;
  }
  .navbar-nav .color-line {
      display: none;
  }
   
  
}
@media (max-width: 575.98px) { 
  .icon-scp .left-side  {
      display: grid;
  }
  .icon-scp .left-side .link-head {
      margin: 3px 0; 
  }
  .icon-scp .left-side  span {
      display: none;
   }
    .col-disp{
      margin: 5px;
      display: unset;
      text-align: center;
  }
}

.text-carousel{
  color: rgb(58, 168, 140);
}

@media (max-width: 991.98px) {
  .benner-height{
    min-height: 600px;
  }
}

@media (max-width: 576px) {
  .benner-height{
    min-height: 100px;
  }
}

.benner-height{
  min-height: 855px;
}

@media only screen and (max-width: 889px) {

} 

@media only screen and (max-width: 960px) {

}
@media only screen and (max-width: 1440px) {

}

@media only screen and (min-width: 1440px){

}
@media only screen and (max-width: 768px) {

}

@media only screen and (max-width: 480px) {

}



.first-slider {
  /* background-image: url('../max-image/index_benner2.jpg'); */
  background-image: url('../image/department/dp1-2.jpg');
  width: 100%;
  height: auto;
  padding-top: 44.53%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.first-slider-1 {
  /* background-image: url('../max-image/index_benner1.jpg'); */
  background-image: url('../image/benner/menubackground.png');
  width: 100%;
  height: auto;
  padding-top: 44.63%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.first-slider-2 {
  /* background-image: url('../max-image/index_benner1.jpg'); */
  background-image: url('../image/department/dp9-4.jpg');
  width: 100%;
  height: auto;
  padding-top: 44.63%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.first-slider-3 {
  /* background-image: url('../max-image/index_benner1.jpg'); */
  background-image: url('../image/department/dp15-3.jpg');
  width: 100%;
  height: auto;
  padding-top: 44.63%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}



.about-slider{
  background-image: url('../max-image/about_benner.png');
  width: 100%;
  height: 0;
  padding-top: 44.53%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.contact-slider{

  max-width: auto;
  max-height: auto;
  background-image: url('../max-image/contact_benner.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.news-slider{

  max-width: auto;
  max-height: auto;
  background-image: url('../max-image/news_benner.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.service-slider{
  background-image: url('../max-image/service_benner.png');
  width: 100%;
  height: 0;
  padding-top: 44.53%;
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}
.product-slider{
  background-image: url('../max-image/product_benner.png');
  width: 100%;
  height: 0;
  padding-top: 44.53%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.about-image{

  min-height: 500px;
  min-width: 500px;
  max-width: 85%;
  max-height: 85%;

  margin-left: 0;
  margin-right: auto;
}
.faq-imagex{
  min-height: 500px;
  min-width: 500px;
  max-width: 85%;
  max-height: 85%;
  background-size: cover;
  margin-left: auto;
  margin-right: auto;
}
.faq-image{

  background-image: url("../image/service_benner-s2.jpg");
  width: 100%;
  height: 0;
  padding-top: 93.75%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.best-ico {
  max-width: 80%;
  max-height: 80%;
  background-size: cover;
  margin-bottom: 15px;
  margin-left: auto;
  margin-right: auto;
}

.second{
  color: #9fd7ef!important;
}
.bs-card{
  color: #d7a74e!important;
}
.carousel-control button:hover{
  background-color: #f8f8f85c;
}
@media (max-width: 991.98px) { 
  .carousel-control-prev {
    z-index: 0;
  }
  .carousel-control-next {
      display: none;
  }

}
@media (max-width: 576px ) {
  .carousel-inner {
      max-height: 900px;
  }
  .carousel-text {
      padding-top: 100px!important;
  }
  .carousel-text span{
      font-size: 20px!important;

  }
  .carousel-text h1 {
      font-size: 50px!important;
  }
}
.carousel-text h1 {
  font-family: sans-serif;
  font-size: 80px;
  font-weight: 500;
}

.carousel-text span {
  font-family: 'genki-b', serif;
  font-size: 42px;
  text-transform: uppercase;
  text-align: center;
  color: #ffffff;
  font-weight: normal;
  text-shadow: 3px 3px 5px #000;
}
.carousel-text{
  padding-top:180px;
  text-align: center;
}
.carousel-text p {
  font-family: 'genki-b', sans-serif;
  padding-top:40px;
  font-size: 14px;
  color: #ffffff;
  text-shadow: 3px 3px 5px #000;

}
.carousel-text-color1 {
  color: #025d9e;
  text-align: right;
}
.carousel-text-color2 {
  color: #ffffff;
  text-align: right;
}
.carousel-text-color3 {
  color: yellow;
}
.butns{
  margin-top: 45px;
}
.btn-more{  
  color: #FDF7F2;
  background-color: #7B882E;
  font-family: 'genki-b', sans-serif;
  font-weight: normal;
  border-radius: 50%;
  width: 136px;
}
.btn-more:hover{  
  color: #FDF7F2;
  background-color:#E47157; 
}
.btn-news{  
  color: #FDF7F2;
  background-color: #7B882E;
  font-family: 'genki-b', sans-serif;
  font-weight: normal;
  border: none;
  width: 136px;
}
.btn-news:hover{
  color: #FDF7F2;
  background-color:#E47157; 
}
.about-btn{  
  color: #333333;
  border-radius: 8px;
   margin: 20px;
   padding: 15px 40px;
  background-color: #9fd7ef;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 12px;
  font-family: 'genki-b', sans-serif;
  font-weight: normal;
  border: none;

}
.about-btn:hover{
  background-color:#d7a74e; 
  color: #ffffff;
  text-decoration: none;
}
.work-btn:hover{
  background-color:#d7a74e; 
  color: #ffffff;
  text-decoration: none;
}
.work-btn{
  border-radius: 8px;
  padding: 15px 40px;
  background-color: #9fd7ef;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 12px;
  font-family: 'genki-b', sans-serif;
  font-weight: normal;
  color: #333333;
  border: none;
}
.arrow{
  font-size: 32px;
  border: 1px solid white;
  padding: 12px 18px;
  font-weight: 600;
}
.arrow:hover{
  color: #777777;
  background-color: white;
}
.our-header h4{
  text-transform: uppercase;
  text-decoration: none;
  font-weight: normal;
  text-align: left;
  font-family: 'genki-b', serif;
  text-decoration: none;
  color: #7b882e;
  font-size: 26px;
    display: inline-block;
}
.our-header h2{
  text-transform: uppercase;
  text-decoration: none;
  font-size: 32px;
  font-weight: bold;
  text-align: left;
  font-family: 'genki-b', serif;
  text-decoration: none;
  padding: 10px;
  border-radius: 10px;
  background-color: #7b882e;
  color: #FDF7F2;
    display: inline-block;
}
.our-header h1{
  text-transform: uppercase;
  text-decoration: none;
  font-size: 32px;
  font-weight: normal;
  text-align: center;
  font-family: 'genki-b', serif;
  text-decoration: none;
  padding: 10px;
  border-radius: 10px;
  background-color: #7b882e;
  color: #FDF7F2;
  display: inline-block;
}
.our-header a{
  text-transform: uppercase;
  text-decoration: none;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  font-family: 'genki-b', serif;
  text-decoration: none;
  margin-top: 60px;
  padding: 20px;
  border-radius: 10px;
  color: #7b882e;
}
.our-header a:hover{
  text-transform: uppercase;
  text-decoration: none;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  font-family: 'genki-b', serif;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 60px;
  padding: 20px;
  color: #7b882e;
  background-color: #FDF7F2;
}
.our-header hr{
 height: 5px;
  border-color:#DBE4AB;
  margin-left: 15px;
  display: inline-flex;
  margin-right: 15px;
  width: 65px;
}
.row-pad{
  padding: 35px;
}
.card-pad{
  padding: 35px;
  border: 3px dashed #DBE4AB;
  border-radius: 8px;
}
.rotate-45{
  transform: rotate(45deg);
  margin-right: -5px;
  margin-left: -5px;
  margin-top: 10px;
}
.our-header i{
  color: #c0bfbf;
}
.our-header i:hover{
  color: #c0bfbf;
}
.index-header h2 {
  text-transform: uppercase;
  text-decoration: none;
  font-size: 36px;
  font-weight: normal;
  text-align: center;
  font-family: 'genki-b', serif;
  text-decoration: none;
  margin-top: 60px;
  padding: 20px;
  border-radius: 10px;
  color: #7b882e;
}
.index-header h1:hover {
  cursor: pointer;
  font-weight: bold;
}
.index-header h1 {
  text-transform: uppercase;
  text-decoration: none;
  font-size: 36px;
  font-weight: normal;
  text-align: center;
  font-family: 'genki-b', serif;
  text-decoration: none;
  margin-top: 60px;
  padding: 20px;
  border-radius: 10px;
  color: #7b882e;
}
.index-header h2:hover {
  cursor: pointer;
  font-weight: bold;
}
.index-header a {
  cursor: pointer;
  text-decoration: none;
}

a:focus-visible,button:focus-visible,.navbar-toggler:focus-visible{
  border: 5px solid red; /* 使用 border 屬性設定紅色邊框 */
  outline: none; /* 再次確保沒有預設外框 */
  font-size: medium;
}
.quickkey{
  font-size: 0%;
}
.our-spec a:hover{
  background-color: #7f86d24b;
}

.our-spec h2 {
  font-size: 20px;
  text-align: center;
  font-family: 'genki-b', serif;
  font-weight: normal;
  margin-bottom: 25px;
  max-height:29px;
}
.our-spec h2:hover {
  cursor: pointer;
  font-size: 22px;
  text-align: center;
  font-family: 'genki-b', serif;
  font-weight: normal;
  margin-bottom: 25px;
  max-height:39px;
}
.our-spec h3 {
  font-size: 16px;
  text-align: center;
  font-family: 'genki-b', serif;
  font-weight: normal;
  margin-bottom: 25px;
  max-height:39px;
}
.our-spec p {
  color: #777777;
  font-size: 18px;
  text-align: center;
  font-family: 'genki-b';  
  text-decoration: none;
}
.our-spec p:hover {
  /* font-size: 22px; */
  text-align: let;
  text-decoration: underline;
}
.our-spec img{
  object-fit: cover;
  height: 200px;
}

.our-spec iframe{
  width: 100%;
  height: 160pt;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.our-service h2 {
  font-size: 24px;
  text-align: center;
  font-family: 'Roboto Slab', serif;
  font-weight: lighter;
  margin-bottom: 25px;
  max-height:39px;
}
.our-service h2:hover {
  cursor: pointer;
  font-size: 24px;
  text-align: center;
  font-family: 'Roboto Slab', serif;
  font-weight: normal;
  margin-bottom: 25px;
  max-height:39px;
}
.our-service h3 {
  font-size: 22px;
  text-align: center;
  font-family: 'Roboto Slab', serif;
  font-weight: normal;
  margin-bottom: 25px;
  max-height:39px;
}
.our-service h4 {
  font-size: 14px;
  text-align: center;
  font-family: 'Roboto Slab', serif;
  font-weight: lighter;
  max-height:19px;
}

.our-service p {
  color: #000000;
  font-size: 20px;
  text-align: left;
  font-family: 'Open Sans';  
  min-height: 24px;
}
.our-service img{
  width: 80%;
  height: 270px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.our-service img:hover{
  width: 100%;
  height: 270px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.our-service iframe{
  width: 100%;
  height: 160pt;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.rounded-circle{
  border: 1px dashed #f65aa7;
  margin-bottom: 25px;
  color: #f65aa7;
  padding: 35px 0;
  font-size: 45px;
}
.rounded-circle:hover{
  background-color: #f65aa7;
  color: #ffffff;
}
.money-back i {
  padding: 35px 29px;
}
.read-more{
  background-color: #9fd7ef;
  text-transform: uppercase;
  padding: 10px 25px;
  text-decoration: none;
  color: white;
  text-align: center;
  font-size: 13px;
  font-family: 'Open Sans', sans-serif;  
  border-radius: 6px;
  border: none;
}
.rd-btn{
  margin: 38px auto;
  text-align: center;
} 
.read-more:hover{
  text-decoration: none;
  color: white;
  background-color: #0698d7;
  cursor: pointer;
}
.promotion-bg{
  background-color: white;
  padding-bottom: 45px;
}
.overlay{
  size: 100% 100%;
  text-align: center;
  display: block;
 
  padding: 40% 0;
  opacity: 0;
}
.overlay span{
  text-align: center;
  font-size: 14px;
  font-family: 'Ogenki-b';  
  color: white;
  padding-top: 10px;
  padding-bottom: 20px;
}
.overlay button{
  position: absolute;
  bottom: 3%;
  left: 5%;
  text-transform: uppercase;
  font-weight: normal;
  color: #f9f9f9;
  background-color:#418f45;
  font-size: 13px;
  font-family: 'genki-b', sans-serif;  
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  margin-bottom: 20%;
}
.overlay button:hover {
  cursor: pointer;
  background-color:#595656;
}
.stars{
  color:#fbc725;
  font-size: 13px;
}
.stars:hover{
  color: #77ff07;

}
.prom-padd{
  padding-bottom: 10px;
}
.product-top:hover .overlay{
  opacity: 1;
  transition: 0.5s;
  cursor: pointer;
}

.product-top:hover {
  background-color: #f65aa7;
  z-index: 999;
}
.product-top {
  min-width: 100%;
  min-height: 300px;  
  
}
.product-top-1{
    background-image: url('../image/prod-1.png');
    background-size: 100% 100%;
    margin-bottom: 20px;
}
.product-top-2{
  background-image: url('../image/prod-2.png');
  background-size: 100% 100%;
  margin-bottom: 20px;
}
.product-top-3{
  background-image: url('../image/prod-3.png');
  background-size: 100% 100%;
  margin-bottom: 20px;
}
.product-top-4{
  background-image: url('../image/prod-4.png');
  background-size:  100% 100%;
  margin-bottom: 20px;
}
.mall-top:hover {
  background-color: #51df7b;
  opacity: 0.5;
  transition: 0.2s;
  cursor: pointer;
}

.mall-top {
  max-width: 100%;
  min-height: auto;  
  margin-left: auto;
  margin-right: auto; 
  margin-bottom: 20px;
}

.product-top button{
  margin: 15px;
}

.heart{
  font-size:14px;
}
.heart:hover{
color: #333333;
   }
.product-text{
  margin: 20px auto;
}
.product-text span{
   text-align: center;
   font-size: 16px;
   font-family: 'genki-b', serif;
}
.product-text p{
  text-align: center;
  font-size: 16px;
  font-family: 'genki-b', sans-serif;  
  color: #f65aa7;
  font-weight: normal;
}
.capa-bg{
  padding-bottom: 100px;
  background-color: #111111;
}
.capa-head {
  color: white;
  padding-top: 130px; 
}
.capa-head .vr-line h2{
  text-transform: uppercase;
  font-size: 32px;  

}
@media (max-width: 991.98px) { 
  .capa-head {
      text-align: center;
  }
  .vr-line {
      display: block!important;
  }
}
.capa{
   font-size: 32px;
   font-weight: normal;
   font-family: 'genki-b', serif;
   color: #9fd7ef;

}
.kat-icon{
margin: 10px;
margin-top: -10px;
}
.print-shop{

  font-size: 32px;
  font-weight: normal;
  font-family: 'genki-b', serif;
  color: #f65aa7;
}
.vr-line{
display: flex;
}
.vr-line1{
   margin-top: 10px;
   border-right: 1px solid white;
  height: 55px;
}
.linker-work{
  padding-top:60px;
  text-align: center;
}
.linker-work button{
  padding-left:45px;
    text-align: center;
    text-decoration: none;
    color: #777777;
    font-size: 15px;
    font-family: 'genki-b', serif;
    background-color: #ffffff;
    border: none;
}
.linker-work button:hover{
  color: #f65aa7;
      text-decoration: none;
}
@media (max-width: 576px ) {
  .linker-work button {
      padding: 10px 22px;
      text-align: left;
      width: 160px;
  }
}
.gallery-height{
  min-height: 600px;

}
.col1-height{
  min-height: 600px;
  background-image: url('../max-image/brochures.jpg');
  background-size: cover;
  z-index: 2;
}
.col1-2-height{
  min-height: 600px;
  background-image: url('../max-image/brochures-2.jpg');
  background-size: cover;
}
.col2-height{
  min-height: 300px;
  background-image: url('../max-image/bussines-card-5.jpg');
  background-size: cover;
}
.col2-1-height{
  min-height: 300px;
  background-image: url('../max-image/bussines-card-4.jpg');
  background-size: cover;
    }
.col3-height{
  min-height: 300px;
  background-image: url('../max-image/bussines-card-3.jpg');
  background-size: cover;
        }
.r3-height{
   min-height: 300px;
    background-color: #747272;
      }
.r3-col{
  min-height: 300px;
  background-color: #747272;
}
.r3-col-1{
  background-image: url('../max-image/post-card-3.jpg');
background-size: cover;
}
.r3-col-2{
  background-image: url('../max-image/post-card-4.jpg');
background-size: cover;
}
.r3-col-3{
  background-image: url('../max-image/post-card-5.jpg');
background-size: cover;
}
.r3-col-4{
  background-image: url('../max-image/post-card-6.jpg');
background-size: cover;
}
.padd-col{
  margin: auto;
}
.padd1-col{
  margin: auto;
}
.col-over:hover{
  background-color: #f65aa7;
  z-index: 999;
  width: 100%;
  height: 50%;
  padding: 0;

}
.col-overlay{
  padding-top: 50px;
  color: #ffffff;
  text-align: center;
  display: block;
  margin-left: 0;
  opacity: 0;
 
}
.col-overlay p{
  font-size: 14px;
  font-family: 'genki-b', serif;
}

.col-over:hover .col-overlay{
  opacity: 1;
  transition: 0.5s;
  margin:  auto;
  background-color: rgba(246, 90, 167, 0.7);
  width: 100%;
  height: 100%; 
}
.icon-overlay{
  text-align: center;
  margin: 15px auto;
}
.icon-overlay i{
  font-size: 13px;
  color: #f65aa7;
}
.icon-overlay a{
  background-color: #f9f9f9;
  padding: 10px 15px;
  margin-left: 5px;

}
.icon-overlay a:hover{
  background-color: #9fd7ef;
  color: #ffffff;  
  }
.icon-overlay a:hover i{ 
  color: #ffffff;          
}

.owl-carousel .owl-next,
.owl-carousel .owl-prev {
  width: 60px;
  height: 40px;
  line-height: 50px;
  position: absolute;
  top: 40%;
  font-size: 20px;
  color: #fff;
  border: 1px solid #333333!important;
  text-align: center;
}
.owl-carousel .owl-prev {
  left: -90px;
}
@media (max-width: 1400px){ 

    .owl-theme .owl-nav [class*='owl-'] {
      background: rgba(0,0,0,0.1)!important;
    }
  }
.owl-carousel .owl-next {
  right: -90px;
}

.owl-seci {
  margin-top: 80px;
  margin-bottom: 145px;
}
.owl-seci .owl-theme .owl-dots .owl-dot span {
  background: #9fd7ef!important;
  width: 10px!important;
  height: 10px!important;
  border-radius: 0;
}  
.owl-theme .owl-dots .owl-dot.active  {
  background: #ffffff!important;
  border: 2px solid #9fd7ef;
}
.owl-theme .owl-nav [class*='owl-next']:hover{
  background-color: #232323!important;
}
.owl-theme .owl-nav [class*='owl-']{
  border-radius: 0!important;
}
.owl-theme .owl-nav [class*='owl-prev']:hover{
  background-color: #232323!important;
  }
.owl-nav i:hover{
   color: #f9f9f9;
}
.screan-hover {
  width: auto;
  height: auto;     
  padding: 0;
  position: relative;
  overflow: hidden;
  margin:auto;
}
.over-image{
  z-index: 999;
  width: 100%;
  height: 100%;
  position: absolute;
  
  
}
.over-image span{
font-size:16px;
font-family: 'genki-b', serif;
position: absolute;
background-color: #9fd7ef;
left: 0%;
top: 0%;
padding: 15px 35px;
}
.over-image .social-icon{
  font-size: 13px;
  margin-right: 0;
  position: absolute;
  background-color: #9fd7ef;
  bottom: 0;
  right: 0;
  padding: 5px 10px;
  }
.over-image .social-icon i{
    padding: 10px;
}

.item-bg{
    min-height: 350px;
    max-width: 100%;
    max-height: auto;
    background-color: #f9f9f9;
    margin-left: auto;
    margin-right: auto;
    
}
.item-bg-1{
  background-image: url('https://www-ws.gov.taipei/001/Upload/301/relpic/31811/9310222/34e085a8-259b-4e2e-8b51-0532db653385.jpg');
  background-size:  100% 100%;;
  height: 350px;
  max-width: 120%;
  max-height: 120%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}    
.item-bg-2{
  background-image: url('https://recreational-agriculture.gov.taipei/News_Content.aspx?n=9AC99FB717B98772&sms=9D72E82EC16F3E64&s=AB6A98616AB8D99B#lg=1&slide=1');
  background-size:  100% 100%;;
  height: 350px;
  max-width:120%;
  max-height: 120%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}     
.item-bg-3{
  height: 350px;
  max-width: 120%;
  max-height: 120%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  background-image: url('https://www-ws.gov.taipei/001/Upload/301/relpic/31811/9310201/97b6214e-d513-4fc6-97d8-b3d9d932e61c.jpg');
  background-size:  100% 100%;;
}  
.item-bg-4{
  height: 350px;
  max-width: 120%;
  max-height: 120%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  background-image: url('../image/edu/4.jpg');
  background-size:  100% 100%;;
} 
.item-bg-5{
  height: 350px;
  max-width: 120%;
  max-height: 120%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  background-image: url('../image/edu/5.jpg');
  background-size:  100% 100%;;
}  
.item-bg-6{
  height: 350px;
  max-width: 120%;
  max-height: 120%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  background-image: url('../image/edu/6.jpg');
  background-size:  100% 100%;;
}    
.item-bg-7{
  height: 350px;
  max-width: 120%;
  max-height: 120%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  background-image: url('../image/edu/7.jpg');
  background-size:  100% 100%;;
}   
.details-link{
  position: absolute;
  top: 45%;
  left: 35%;
  color: #9fd7ef;
  text-decoration: underline;
  font-size: 15px;
  font-family: "Open Sans";
  font-weight: normal;
  opacity: 0;
  transition-timing-function: ease-in-out;
}
.item-bg:hover .over-image{
  opacity: 1;
  background-color: rgba(51, 51, 51, 0.6);
}
.item-bg:hover .social-icon{
  background-color: #f65aa7;
  color: #ffffff;

}
.item-bg:hover .over-image h3 {
  background-color: #f65aa7;
  color: #ffffff;

}
.item-bg:hover .details-link{
  opacity: 1;
  transition: 1s;
  margin: 5% auto;

}
.contact-bg{
  background-image: url('../image/background.jpg');
  background-repeat: no-repeat;
  background-size:cover;
}
.contact-con {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media (max-width: 991.98px) { 
  .contact-con {
      text-align: center;
  }
  .partner-bg {
      min-height: 0px!important;
  }
  .owl-seci {
      margin-top: 80px;
      margin-bottom: 80px;
   }
}
.contact-con p{
  padding: 25px 0;
  font-size: 14px;
  font-weight: normal;
  font-family: 'genki-b';
  color: #777777;
}
.contact-con h2 {
  font-size: 32px;
  font-weight: normal;
  font-family: 'genki-b', serif;
  text-transform: uppercase;
}
.tel-number{
  color: #f3bed0;
  text-decoration: none;
  font-size: 26px;
  font-weight: normal;
  font-family: 'genki-b', serif;
}
.tel-number:hover{
  color: #f3bed0;
  text-decoration: none;
}
.contact-btn{
  margin: 40px 0;
}
.contact{
  font-size: 14px;
  font-weight: normal;
  font-family: 'genki-b';
  padding: 15px 40px;
  background-color: #f65aa7;
  text-align: center;
  border-radius: 8px;
  color: #f1efe5;
}
.contact:hover{
  text-decoration: none;
 color:#f1efe5; 
}
.img-box{
width: 90px!important;
max-height: 90px;
border-radius: 50%;
margin: auto;
}
.all-testimonial{
padding: 30px 0;
  border: 1px solid #ececec;
}
.testimonial {
text-align: center;
font-family: 'genki-b';
font-size: 14px;
color: #777777;
}
.testimonial p i {
  color: #f65aa7;
  padding-top: 20px;
}
.stars-icon i {
  color: #fbc725;
}
.all-testimonial::after{
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  background: #fff;
  border: 1px solid #ececec;
  border-width: 0 0 1px 1px;
  position: absolute;
  bottom: 113px;
  left: 49%;
  transform: rotateZ(-45deg);
}
.author{
  text-align: center;
  padding: 30px;
}
.author span{
  font-size: 14px;
  font-weight: normal;
  font-family: 'genki-b', serif; 
  color: #9fd7ef;
  text-transform: uppercase;
}
.author p{
  font-size: 14px;
  font-weight: normal;
  font-family: 'genki-b'; 
  color: #747272
}
.partner-logo{
  max-width: 250px;
  max-height: 120px;
  margin-left: auto;
  margin-right: auto;
}
.top-logo{
  max-width: 120px;
  max-height: 120px;
  margin-left: auto;
  margin-right: auto;
}
.partner-bg{
  background-color: #f9f9f9;
  min-height: 300px;
}
@media (max-width: 575.98px) { 
  .partner-bg {
      min-height: 0px;
  }
}
.footer-bg{
  background-color: #ffffff;
  color: #000108;
}
.footer-padd{
  padding: 8px 0;
}
.foot-logo{
  max-width: 120px;
  max-height: 120px;
  margin-bottom: 10px;
}
.foot-col-padd{
  padding: 0 20px;
}
.dream-text p{
  font-size: 14px;
  font-family: 'genki-b'; 
  color: #000108;
  padding-top: 5px;
  padding-right: 80px;
}
.foot-icon{
  margin-top: 25px;
  font-size: 13px;
  color: #5a5a5a;
  margin-right: 18px;
}
.foot-icon:hover{
  color: #9fd7ef;
}
@media (max-width: 768px){
  .pop-col{
      margin: 20px 0;
  
  }
  }
.pop-col span{
  font-size: 16px;
  font-weight: normal;
  font-family: 'genki-b', serif; 
  color: #5a5859;
  text-transform: uppercase;
}
.pop-col hr{
  border: 1px solid #5a5859;
  width: 130px;
  margin-left: 0;
  margin-right: auto;
}
.pop-link a{
  margin-bottom: 20px;
  text-transform: uppercase;
  font-size: 13px;
  font-family: 'genki-b'; 
  color: #5a5a5a;
  display: flex;
}
.ltl-blog{
  display: inline-flex;
}
.blog-img{
  width: 75px;
  max-height: 75px;
}
.max-award {
  padding-left: 30px;
  font-size: 14px;
  font-family: 'genki-b', serif;
}
.blog-vl{
color: #777777;
margin: 0 5px;
}
.blog-icon{
  margin-right:5px;
  font-size: 13px;
  color: #f65aa7;
}
.prodTag-text{
  color: azure;
  background-color: #ff0000;
  font-size: 13px;
  text-align: center;
}
.prodTag{
  margin-top: 20%;
}
.recent-hr{
  border: 0.5px solid  #777777!important;
  width: 95%!important;
}
.contact-hr{
  border: 1px solid  #5a5859!important;
  width: 85%!important;
  margin-right: auto;
  margin-left: auto;
}
.view-blog{
  text-decoration: underline;
  text-transform: uppercase;
  font-size: 13px;
  font-family: 'genki-b', serif; 
  color: #9fd7ef;
  font-weight: normal;
}
.view-blog:hover{
  color: #9fd7ef;
 
}
.contact-icon{
  border: 1px solid #9fd7ef;
  border-radius: 50%;
  padding: 10px;
  width: 38px;
  height: 38px;
  text-align: center;
  margin: 0 20px;
}
.contact-row-margin{
  margin-top: 10px;
}
.contact-row-margin p{
  margin: auto 0;
}
.copyright-text{
  font-family: 'genki-b', serif;
  margin: auto;
  color: #4A403A;
  background-color: #F1B896;
  text-align: center;
}
.fa-2x{
  color: #595656;
}
.copyright-text a  {
  color: #4A403A;
}
.copyright-text a:hover {
  /* color: #d6d6d6; */
  text-decoration:none;
}
/*===== The CSS =====*/
#wrapper svg{
  margin-right: auto;
  margin-left: auto;
}
svg i:hover{ 
  color: #232323;
}
.progres-icon{
  font-size: 35px;
  transform: rotate(180deg);
  background-color: #9fd7ef;
  border-radius: 50%;
  padding: 10px;
}
.progres-div1{
  margin-right: 34.5px;
  background-color: #57727e;
  padding: 10.5px;
  border-radius: 50%;
}
.progres-div1 i{
  font-size: 20px;
  padding: 12.5px;
  width: 45px;
  height: 45px;
  text-align: center;
}
.progres-div2{
  margin-right: 34.5px;
  background-color: #57727e;
  padding: 10.5px;
  border-radius: 50%;
}
.progres-div2 i{
  font-size: 20px;
  padding: 12.5px;
}

.progres-div3{
  margin-right: 34.5px;
  background-color: #57727e;
  padding: 10.5px;
  border-radius: 50%;
}
.progres-div3 i{
  font-size: 20px;
  padding: 12.5px;
}
.progres-div4{
  margin-right: 34.5px;
  background-color: #57727e;
  padding: 11px;
  border-radius: 50%;
}
.progres-icon4{
  text-align: center;
  width: 45px;
  height: 45px;
  font-size: 20px;
  transform: rotate(180deg);
  background-color: #9fd7ef;
  border-radius: 50%;
  padding: 15px;

}
.progress{
width: 245px;
  height: 280px;
  margin-top:50px;
  background-color: transparent;
  transform: rotate(180deg);
}
.progress .track, .progress .fill{
fill: rgba(0, 0, 0, 0);
stroke-width: 4;
transform: rotate(90deg)translate(0px, -80px);
}
.progress .track{
stroke: rgb(56, 71, 83);
}
.fill {
  transform: rotate(90deg)translate(0px, -80px);
}
.progress .fill {
stroke: rgb(255, 255, 255);
stroke-dasharray: 219.99078369140625;
stroke-dashoffset: -219.99078369140625;
transition: stroke-dashoffset 2s;
}
.progress.blue .fill {
stroke: #f65aa7;
}
.progress.green .fill {
stroke: rgb(186, 223, 172);
}
.progress .value, .progress .text {

fill: rgb(255, 255, 255);
text-anchor: middle;
}
.progress .text {
  font-size: 9px;
  font-family: 'genki-b', serif; 
  transform: rotate(180deg)translate(-40px, -10px);
}
.progress .value {
  transform: rotate(180deg)translate(-40px, -10px);
  font-size: 9px;
  font-family: 'genki-b', serif;
  fill: #f65aa7;
}
.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
cursor: default;
}

.footer a{ 
  list-style: none;
  padding: 3px;
  margin: 5px 10px;
  /* background-color: #7b8821aa; */
  border-radius: 3px;
}
.footer .copyright ul {
  list-style: none;
  padding-left: 0
}

.footer .copyright ul li {
  display: inline-block;
  margin-right: 5px
}

.footer .copyright ul li a {
  text-decoration: none
}


.info {
  padding: 5px;
  margin-top: 2px;
  border-radius: 3px;
}

.farm-image {
  max-height:970px;
  max-width:700px;
}

.nav-item a {
  color: #000000;
  font-size: larger;
  margin: 3px 6px 9px 12px;
  font-weight: 400;
}

.nav-item a :hover{
  color: #4e7783;
  font-size: large;
}


.main-container {
  background-color: #FDF7F2;
}
#nav-color {
  background-color: #FDF7F2;
}
.contact-color{
  background-color: #d7a74c;
  min-height: 16px;
}
a:hover {
  text-decoration: underline #E47157;
  font-weight: 800;
} 

.navbar-nav .nav-link.active-bold {
  text-decoration: underline;
}

.navbar-nav .nav-link {
  position: relative; /* 確保偽元素可以相對於它定位 */
  overflow: hidden; /* 隱藏超出偽元素初始寬度的部分 */
  padding-bottom: 5px; /* 為底線留出空間，可以根據你的喜好調整 */
}

.navbar-nav .nav-linkx::after {
  content: '';
  position: absolute;
  left: 50%; /* 從中間開始 */
  bottom: 0;
  background-color: currentColor; /* 使用文字顏色作為底線顏色，方便統一管理 */
  height: 5px; /* 底線的高度，可以根據你的喜好調整 */
  width: 0; /* 初始寬度為 0 */
  transition: width 0.3s ease-in-out, left 0.3s ease-in-out; /* 寬度和左邊距的過渡效果 */
}

.navbar-nav .nav-linkx:hover::after {
  width: 100%; /* 懸停時寬度展開到 100% */
  left: 0; /* 左邊距回到 0，實現從中間向兩側展開 */
}

.dropdown-menu{
  background-color: #FDF7F2;
  border: 1px solid #4A403A;
}
.dropdown-menu a{
  text-decoration:none;
}
.dropdown-menu a:hover{
  text-decoration:underline;
}

.news-li span:hover{
  color:#E47157;
}

.trip-title:hover{
  color: #FDF7F2;
  background-color:#E47157; 
  border-radius: 5px;
}
.trip-title{
  background-color: #FDF7F2;
  color: #5a5859;
  padding: 8px;
  margin: 3px;
  font-family: 'genki-b', sans-serif;
  font-weight: normal;
  font-size: x-large;
}
.trip-title-toggle{
  background-color: #e9e99a;
}
.trip-card{
  background-color: #FDF7F2;
  color: #5a5859;
  font-family: 'genki-b', sans-serif;
  font-weight: normal;
  border: 1px solid  #5a5859!important;
  border-radius:10px;
  padding: 15px;
}