/** font-family:=================================*/
 .f-400{font-weight: 400!important;}
.vText { -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }
.color-red{color: #9e2b2f;}
.color-white{color: #fff!important; }
.color-gray{color:#597990; }
.txt-stork { -webkit-text-stroke: 1px #333;  -webkit-text-fill-color: transparent;}
.txt-center{ text-align: center;}

.wrapper { position: relative; display: block; margin:0px  auto;  width: 100%; padding:0px 6px;  max-width: calc((100% - 40px)/12*12 + 40px)}
@media (min-width:1025px) {
.wrapper {padding: 0px 40px;  }
}
@media (min-width: 1401px) {
.wrapper { width: 100%;max-width: 90%; padding: 0px;  }
}
@media (min-width: 1920px) {
.wrapper { width: 100%;max-width: 100%;   padding-left: calc(50% - 720px)!important;  padding-right: calc(50% - 720px)!important;}
}
 /* CSS Document */
.top-wrap {padding:0px;margin:0 auto; width: 100%; ;max-width: 100%; }
 @media (min-width:1025px) {
.top-wrap{padding: 0px 30px;  }
}
 @media (min-width: 1361px) {
.top-wrap { width: 100%;max-width: 94%; padding: 0px;  }
}
 @media (min-width: 1601px) {
.top-wrap { width: 100%;max-width: 90%; padding: 0px;  }
}
 
.banner{width: 100%; max-width: 100%;height: auto; margin: 0px auto; padding:0px;  position: relative; }
.banner .slick-dots{ bottom: 20px}
.banner .slide { width: 100%; min-height:60vh;position: relative;}


.banner .slide .slide-img { width: 100%; height: auto;  overflow: hidden;  position:relative;/* transform: translateY(-5%); */}
.banner .slide .slide-img img { width: 100%; height: auto;  opacity: 1 !important;  -webkit-animation-duration: 3s; animation-duration: 3s; transition: all 1s ease;}


@media (min-width: 1600px) {
.banner .slide { width: 100%; min-height: 62vh; display: block; position: relative;}
}

@media (max-width:1180px) {
.banner  {margin-top: 20px; }
.banner .slide {min-height: 52vh; }
.banner .slick-dots{ bottom: 20px}
}
@media (max-width:992px) {
.banner  {margin-top: 0px; }    
.banner .slide {min-height: 46vh; }
 }
@media (max-width:767.98px) {
 
.banner .slide {min-height: 40vh; }
 }

  /* /////////// IMAGE ZOOM /////////// */
@-webkit-keyframes zoomInImage {
from { transform: scale3d(1, 1, 1); }
to { transform: scale3d(1.1, 1.1, 1.1); }
}
@keyframes zoomInImage {
from { transform: scale3d(1, 1, 1); }
to { transform: scale3d(1.1, 1.1, 1.1); }
}
.zoomInImage { -webkit-animation-name: zoomInImage; animation-name: zoomInImage;}
@-webkit-keyframes zoomOutImage {
from { transform: scale3d(1.1, 1.1, 1.1); }
to {transform: scale3d(1, 1, 1); }
}
@keyframes zoomOutImage {
from { transform: scale3d(1.1, 1.1, 1.1); }
to { transform: scale3d(1, 1, 1); }
}
.zoomOutImage { -webkit-animation-name: zoomOutImage; animation-name: zoomOutImage;}

 

.main-wrap{ width: 100%; margin: auto; height: auto;  display: flex; flex-wrap: wrap;  position: relative;  }
 


 /**氣候區塊 =================================*/
.notice{width: 100%; height:90px; padding:20px 20px; display: flex; flex-wrap: nowrap;justify-content:space-between; align-items: center; background:#266433; }
.notice-item{ width:calc(100%/4); padding: 20px 15px; }
.notice-switch{width: 100%;display: flex; flex-wrap: nowrap;justify-content:center; align-items: center;font-weight: 700; color: #fff; letter-spacing: 2px;  }
.notice-icon{width: 80px; height: 80px; padding: 10px 4px;display: flex; flex-wrap:wrap;}
.notice-icon i{width: 60px; height: 60px; padding:0px;display: block;}

.notice-txt{width:calc(100% - 100px);font-size: .875rem; font-weight: 700; color: #fff;}
.notice-txt strong{width: 100%; font-size: 1.15rem; display: block; }
 
@media (max-width: 1201px) {
.notice{ padding: 10px;}
.notice-txt{width:auto; }
 }
@media (max-width:992px) {
.notice{height:auto; flex-wrap:wrap;  padding: 0px; display: none;}    
.notice-item{ width:calc(100%/2); padding:0px 15px; }    
}
 
/*Recommend */
.recommend{width: 100%; padding:0px;  margin:100px 0px 50px 0px; background: url("../images/index/b-end.jpg") no-repeat right top #f7f6f2;  position: relative;}
.recommend:before{  content: "";width: 300px;height: 300px; top: -50px;  left:calc(50% - 150px);   position: absolute;margin: auto;display: block; background: #f7f6f2; border-radius:99rem;  z-index: -1; }
.recommend:after{  content: "";width: 300px;height: 300px; bottom: -50px;  left:calc(50% - 150px);   position: absolute;margin: auto;display: block; background: #f7f6f2; border-radius:99rem;  z-index: -1; }
 @media (max-width: 1199.98px) {
 .recommend{background-size: auto 100% ; }     
}

 @media (max-width:767.98px) {
     
.recommend{width: 100%; padding:0px;  margin:50px 0px 20px 0px; }   
     .recommend .title-2{padding-top: 20px;}
.recommend:before, .recommend:after{display: none;}   
}

.recommend-box{ width: 100%;  max-width: 1160px; height: auto; margin:0 auto; }
.recommend-box .slick-dots{bottom:60px;  }
 


 /*Special 
================================= */
.special {position: relative; margin:0 auto; padding:0px 0px 140px 0px; width: 100%; max-width: 1160px;  display: flex; flex-wrap: wrap;justify-content: center;    }
.special-card {width: 100%; margin:0px auto; padding:0px 0px 0px 10%; position: relative; display: flex; flex-wrap: wrap;justify-content: center; }
.special-item{ width: 30%;height: auto; margin:15px 0px; padding: 0px; left:0;top:25%; position: absolute; background: #fff; border-radius:15px; box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, .1); transition: all 0.3s;   }
.special-item-inner{ width: 100%; height: auto; padding:30px;  }
.special-item-inner p{ font-size: 1.15rem;  font-size: min(max(3.5vw, 1rem), 1.15rem);   line-height: 2rem; text-align: center; }
 
 @media (max-width: 1199.98px) {
.special { padding:0px 30px 140px 30px; }
.special-item{ left:5%;  }
}
 @media (max-width: 992px) {
 .special-item{ top:10%;   }    
}
 @media (max-width: 768px) {
 .special-card {width: 100%; margin:0px auto; padding:0px;   }    
 .special-item{ width: 40%; padding-bottom: 10px}    
}


@media (max-width: 767.98px) {
 .special { padding:0px 20px 30px 20px; }   
.special-item{ width: 100%; position: relative; left: auto; top:auto; margin: 0px;border-radius:0px;  }    
.special-item-inner{ padding:10px;  }
.special-item-inner p{  overflow: hidden; word-break: keep-all; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;  }    
}

.transition-3d-hover { transition: all .2s ease-in-out}
.transition-3d-hover:focus, .transition-3d-hover:hover {-webkit-transform: translateY(-3px);transform: translateY(-3px)}
/*----------------------------------------/
產品清單頁  cms-product-item  
----------------------------------------*/
.main-product { width: 100%; padding:50px 0px 20px 0px;  margin:0px; position: relative;  }
@media (max-width: 1200px) {
.main-product {  padding:20px 0px;  }
}
 @media (max-width: 767.98px) {
.main-product {  padding:0px;  }
}
 
/* */
.product-item { width:100%; margin:0px auto;  padding:20px 0px;  display: flex; flex-wrap: wrap;   }
.product-item li { width: 100%; margin:0px; padding:10px 5px;  position: relative; z-index: 1; list-style: none;transition: all 0.3s linear 0s;}
.product-item li figure{  width: 100%; padding-bottom: 100%; height: 0; overflow: hidden; position: relative;  z-index: 1; transition: all 0.5s ease 0s;  background-color:#fafaf5;}
.product-item li:hover figure img { transform: scale(1.05);  opacity: 0.6; }
.product-item li .item{width: 100%;margin:0px 0px 10px  0px; padding: 0px;display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; border: solid 1px #E2E2E2;transition: all 0.3s linear 0s;   } 
.product-item li .inner{width: 100%; margin:0px; padding: 10px 15px; } 
.product-item li .inner h3 a{  margin:0px auto; padding: 0px; font-size:1.15rem; font-size: min(max(2vw, 1rem), 1.15rem); line-height:1.875rem; font-weight: 400; text-align: left; color:#2c2c2c; overflow: hidden; word-break:keep-all;  word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical; }

 
@media (max-width: 767.98px) {
.product-item li .inner h3 a{ height: 60px;  }
}

.product-item li .inner p{ flex: 0 0 100%; margin: 0px; font-size:1.063rem; line-height:1.5rem; font-weight: 500; color:#2c2c2c;text-align: center; overflow: hidden; word-break: keep-all; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;} 
.product-item li .price{ width: 100%; padding: 5px 0px 2px 0px;font-size:1.15rem; display: flex; flex-wrap: wrap;  justify-content:space-between; font-family: 'Oswald', sans-serif; }
.product-item li .product-price{ margin:0px;  color:#ff3333; font-weight: 700;}
.product-item li .product-price-origin{ margin:0px; color:#c9c9c9;font-weight: 400;  text-decoration: line-through; }
.product-item li .product-store{ margin:10px 0px; color:#668e69; font-size:.875rem; font-weight:400;  }

.note { position: absolute; bottom:0px; right: 0px; padding: 5px; width:auto; height:auto; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center;  font-size:1rem;  font-size: min(max(3.5vw, .9rem), 1rem);text-align: left; line-height: 1.5rem; text-shadow:none; z-index: 11; }
.note.note-sale {  color: #fff; background:#266433; }

.tag-cate-list { position: absolute; top:5px; left: 5px;width: 100%; height:auto; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; align-items: center;  z-index: 11; }
.tag-cate{ width: auto; max-width: 100%; height: auto;  padding:2px 5px; margin: 0px 5px 5px 0px; position: relative;  background-color:transparent;  border: solid 1px transparent;border-radius:10px;-webkit-transition: background-color .2s,color .2s,border-color .2s; transition: background-color .2s,color .2s,border-color .2s;}
a.tag-cate{ color:#fff;  font-size:.9rem;  font-size: min(max(3.5vw, .75rem), .9rem);text-align: left; line-height: 1.35rem; text-shadow:none; }
a:hover.tag-cate{  opacity:.85;  }
 
.tag-red{background:#d65258; }
.tag-green{background:#296745;}
.tag-purple{background:#604f9e}
.tag-brown{background:#b04422;}
 
.product-item .slick-dots {bottom:-30px;  }	
.product-item .slick-prev { left:calc(50% - 60px);  top:100%; }
.product-item .slick-next { right:calc(50% - 60px); top:100%;  }

#featured.product-item li .item,#featured-2.product-item li .item{width: calc(100% - 20px);margin:0px 10px 10px 10px; padding: 0px; background-color:#fff;border: solid 1px #80a083; border-radius:15px; } 
#featured.product-item li  figure,#featured-2.product-item li figure {border-radius:15px 15px 0px 0px;  }
#featured .tag-cate-list,#featured-2 .tag-cate-list { left:5px; top:5px; }
#featured.product-item .slick-prev,#featured-2.product-item .slick-prev { left:-36px;  top:40%; }
#featured.product-item .slick-next,#featured-2.product-item .slick-next { right:-36px; top:40%;  }
 
@media (max-width: 1024px) {
#featured.product-item .slick-prev,#featured-2.product-item .slick-prev { left:-10px;  }
#featured.product-item .slick-next,#featured-2.product-item .slick-next { right:-10px;  }
}
@media (max-width: 768px) {
#hot.product-item li { padding:10px 5px; }
 #featured.product-item li .item,#featured-2.product-item li .item{width: 100%;margin:0px 0px 10px 0px;  } 
 #featured.product-item .slick-prev,#featured-2.product-item .slick-prev { left:0px; top:38%;  }
#featured.product-item .slick-next,#featured-2.product-item .slick-next { right:0px; top:38%; }
   
}

/*news */
.news-wrap{width: 100%; margin: 0px; padding: 0px; }
.news{ width:100%;  margin: auto; }
 
 

.news-list { width: 100%; display: flex; flex-wrap: wrap; margin: auto;padding: 0px 0px 50px 0px; }
.news-list li { width:100%;height: auto;  margin:10px; list-style: none;position: relative;}
.news-list .item {  display: flex; flex-wrap: wrap; padding: 15px; border: 1px solid #eeeeee; border-radius: 20px; position: relative;}
.news-list .news-pic { width: 50%;padding: 0 ; }
.news-list .news-box { width: 50%;padding: 0px 0px 0px 20px;  }
.news-list figure  {width: 100%; padding-bottom: 100%; height: 0; overflow: hidden; position: relative;  z-index: 1;  border-radius: 30px;transition: all 0.5s ease-in-out;}
.news-list figure img { max-width:100%; height: auto; object-fit: cover; margin: auto; display: block; border-radius:0px;   transition: all 0.5s ease-in-out;}
.news-list figure::before { content: ""; position: absolute; z-index: 11;left: 0%; top: 0%; bottom: 0; right: 0; margin: auto; width: 95%; height: 95%; display: block; outline: 20px solid rgba(255, 255, 255, 0.2); 	-webkit-transition: all 0.7s;transition: all 0.7s;border-radius: 50px;pointer-events: none;}
.news-list .news-box .news-date { width: 100%; margin:10px 0px;  display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center;  -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.news-list .news-box .news-date .date {font-family: "Oswald";color: #256533;font-weight: 700;}
.news-list .news-box .news-date .date .top {font-size: 2rem; font-size: min(max(3.5vw, 1.25rem), 2rem); }
.news-list .news-box .news-date .date .bom {font-size: 12px;margin-left: 10px;}
.news-list .news-box .news-date .new-tag  {padding: 2px 8px;border-radius: 25px;color: #256533;display: block;	font-size: 13px;border: 1px solid #256533; }
.news-list .news-box .news-inner {width: 100%;}
.news-list .news-box h3 { padding-bottom: 8px; margin-bottom: 12px; }
.news-list .news-box h3 a { min-height: 70px; font-weight: 500; font-size: 1.5rem; font-size: min(max(3.5vw, 1rem), 1.5rem); color: #191919; white-space: wrap;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break:normal; overflow-wrap: break-word;border-bottom: 1px solid #b2b2b2; }
.news-list .news-box  p {min-height: 86px;font-size: 1rem; color: #333333; line-height: 1.8; letter-spacing: 0.75px;   margin:5px 0px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; word-break:normal;}
.more-btn {  width: 100%; display: flex;  align-items: center;margin:10px 0px;  position: relative;}
.more-btn a{ width: auto; max-width: 200px; font-size: 24px; font-weight: 700;  color:#a1a1a1;  letter-spacing: 0; font-family: 'Oswald', sans-serif; }
.more-btn a::before { content: " + "; position: absolute;  right: 50%; top: 6%;width: 30px; height: 30px;  transition: all 0.3s;  }
.news-list li:hover .item::before {opacity: 1;}
.news-list li:hover .item  h3 a ,.news-list li:hover .item  p ,.news-list li:hover .more-btn a{color: #256533;}

@media (max-width: 640px) {
  .news-wrap{display: none }  
.news-list li { margin:10px auto;  }    
.news-list .news-pic { width: 100%;  }
.news-list .news-box { width: 100%;padding: 0px;  }

    .news-list .slick-dots{ margin: 0;left: 0!important;  }
}

 /*main-about
=================================*/
.main-about{ position: relative; margin:0px; padding:50px 0px; display: flex; flex-wrap: wrap;justify-content: space-between;  background-color: #f8f7f5; }
@media (max-width: 1280px) {
.main-about{  padding:20px 0px; }
}
.main-about .animated {  -webkit-animation-duration: 1.5s; animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;}
.block {width:50%; height: auto;  margin: 0; padding:0px;  display: flex; flex-wrap: wrap;  position: relative;z-index: 1 }
.block figure{ width:100%; margin: 0px; padding: 0px; display: block; }
.block figure img{ width:100%; height: auto; display: block;  }
.block-txt{width:100%; max-width:70%;  margin:60px auto; padding:0px 20px ; position: relative; z-index: 1;}
.block p { width: 100%; font-size:1rem;  line-height:1.875rem; font-weight: 400;  padding:5px; margin-bottom:10px;  color:#666;   }
.block p strong{  display: block;  width: 100%;  letter-spacing: 1.2px; font-weight:700;   margin-bottom: 0px; color: #000; }
.card-1{ width: 100%;  padding:10% 0px 0px 0px;   position: relative;}
.card-1 img{display: block; width: 100%; height: auto;}
.block .btn-01{margin:10px 0px;}
 
@media (max-width: 1280px) {
.block-txt{max-width:100%; padding:20px 40px;  }
.card-1{ padding:35% 0px 0px 0px;  }
 }
@media (max-width: 1024px) {
.block {width:100%;margin: 0px; padding: 0px; }  
.block-box{ width: 100%;}  
.card-1{ padding: 0px;  }
    
}
@media (max-width:767.98px) {
.main-about{ padding:40px 0px;background-size: 100% auto; background-position:0px top;}
.block-txt{ margin:20px 0px; padding: 0px 20px;}   
}

 
 
 /*cms-Title Styles 樣式
=================================*/
.title { width: 100%;  margin: 30px 0px; padding-top: 60px;  display: flex; flex-wrap: wrap; flex-direction: column;  justify-content: center; position: relative;z-index: 1 }
.title:before { content: "";width:120px;height: 60px; margin: auto;display: block;  left:calc(50% - 60px); top:0px; position: absolute; background: url("../images/index/title.svg") no-repeat center top}
.title:after { content: "";width: 100%;height: 2px; margin: auto;display: block; background: #266433; bottom: 27%; right: 0px; position: absolute; z-index: -1; }
.title h2{margin:0px auto; padding: 0px 20px; font-size:2.15rem;  font-weight:500; color: #266433; background: #fff; letter-spacing: 3px; position: relative;}
.title h3{margin:0px auto; font-size:1rem; font-weight:600;color:#999;background: #fff;position: relative; }
.title h3 strong{ color:#2c2c2c;font-weight:700; }
.title p{ margin:0px auto; font-size:1.063rem;font-weight:400;  }
@media (max-width: 991.98px) {
.title h2{  font-size:2rem;  }
.title h3{  font-size: 1.875rem;  }
}
@media (max-width: 767.98px) {
.title h1, .title h2{  font-size:1.75rem;  }
 .title h3{  font-size: 1.25rem;  }
   
} 

 /*cms-Title Styles 樣式
=================================*/
.title-2 { width: 100%;  margin:0px 0px  30px 0px; padding-top: 60px;  display: flex; flex-wrap: wrap; flex-direction: column;  justify-content: center; position: relative;z-index: 1 }
.title-2 h2{margin:0px auto; padding: 0px 20px 40px 20px; font-size:2.15rem;  font-weight:500; color: #266433;  letter-spacing: 3px; position: relative;}
.title-2 h2:before { content: "";width:120px;height: 60px; margin: auto;display: block;  left:calc(50% - 60px); bottom:0px; position: absolute; background: url("../images/index/v-line.png") no-repeat center bottom}

.title-2 h3{margin:10px auto 0px auto; font-size:1rem; font-weight:600;color:#999; position: relative; }
.title-2 h3 strong{ color:#2c2c2c;font-weight:700; }
 
@media (max-width: 991.98px) {
.title-2 h2{  font-size:2rem;  }
.title-2 h3{  font-size: 1.875rem;  }
}
@media (max-width: 767.98px) {
 .title-2 {   padding-top: 30px; }   
.title-2 h2{  font-size:1.75rem;  }
 .title-2 h3{  font-size:1.25rem;  }    
} 

.title-txt{margin: 20px 0px 60px 0px;color:#8f929e; font-weight: 400;  }
.title-3 {margin: 30px 0px; position: relative; font-size: 1.75rem; font-weight: 500; letter-spacing: 3px; }
.title-3 h2{margin:0px auto; padding: 0px 0px 40px 0px; font-size:2rem; font-weight:700; color: #000;  letter-spacing: 3px; position: relative;}
.title-3 h2:after { content: "";width:30%;height:4px; margin: auto; background: #009b70; bottom: 27%; left: 0px; position: absolute;  }  

.title-4 {  margin: 30px 0px;  display: flex; flex-wrap: wrap; flex-direction: column;  position: relative;  letter-spacing: 3px;}
.title-4 h1{margin:0px 0px 10px 0px;padding: 0px;  font-size:2.5rem;  font-size: min(max(3.5vw, 1.875rem), 2.5rem); font-weight:700;color:#000;letter-spacing: 3px; position: relative;   }
.title-4 h2{margin:0px;  font-size:2rem;  font-size: min(max(3.5vw, 1.5rem), 2rem); font-weight:500;color:#266433;letter-spacing: 3px;}

 

 /*----------------------------------------/
產品總覽頁Product
----------------------------------------*/
.product-wrap{ width: 100%; margin: 0px auto; padding:50px 0px; /* background:#f7fbf5; */}
@media (max-width:1200px) {
.product-wrap{padding: 0px;}
}

 
.main-box{ width: 100%; margin: auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
@media (max-width:1200px) {
.main-box{margin:3% auto;}
 }
.grid-row {width:auto; display: flex; flex-wrap: wrap; position: relative;   }
.grid-row:nth-child(1) {width:25%; }
.grid-row:nth-child(2) {width:25%; }
.grid-row:nth-child(3) {width:50%; }

.grid-item { -webkit-box-flex: 0;  -ms-flex-positive: 0; flex-grow: 0; width: 100%; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding:0px 10px 5px 10px;  position: relative;  }
.grid-switch{ width: 200px; height: 200px;left:calc(50% - 100px); top:calc(50% - 100px); display: flex; flex-wrap: wrap; flex-direction: column; justify-content:center; align-items: center; letter-spacing: 2px;border-radius:99rem;  background-color: rgba(255,255,255,.5);   position: absolute; }
.grid-icon{width: 80px; height: 80px; padding: 10px 4px; display: block;  }
.grid-icon i{width: 60px; height: 60px; padding:0px;display: block;}
.grid-icon i img{ -webkit-filter:invert(1);}
.grid-txt{width:100%; display: block;font-size: .875rem; font-weight: 500; color: #266433; text-align: center;  font-family: 'Oswald', sans-serif; }
.grid-txt strong{width: 100%; font-size: 1.375rem; font-weight: 700;display: block;color: #000; font-family: 'Noto Sans TC', sans-serif; }
@media (max-width:992px) {
.grid-row:nth-child(1) {width:50%; }
.grid-row:nth-child(2) {width:50%; }
.grid-row:nth-child(3) {width:100%; }  
}
  
@media (max-width:767.98px) {
.grid-item { padding:3px;}
}

@media (max-width:640px) {
.grid-row:nth-child(1) {width:100%; }
.grid-row:nth-child(2) {width:100%; }
 
} 
 

/*---------------*/
/***** Bubba *****/
/*---------------*/
figure.effect-bubba { width: 100%; height:auto;  }
figure.effect-bubba img {opacity: 1; -webkit-transition: opacity 0.35s; transition: opacity 0.35s;  }
figure.effect-bubba:hover img {opacity: 0.5;}


figure.effect-bubba figcaption{ width: 50%; margin: 10px 0px 0px 25px; top:20%;  left:5%;display: flex; flex-wrap: wrap;  justify-content: flex-start;  letter-spacing: 2px;   position: absolute;        }
figure.effect-bubba figcaption .btn-01{margin: 10px 0px;}
figure.effect-bubba h2 {  margin: 10px 0px;  font-size: 2rem;  font-size: min(max(3.5vw, 1.125rem), 2rem);  font-weight: 700;  letter-spacing:3px; color:#256633;-webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0);}
figure.effect-bubba h3 {  margin: 0px auto 10px 0px;  font-size: 1.5rem; font-size: min(max(3.5vw, 1rem), 1.5rem);  font-weight: 700;    color:#009966;-webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0);}
figure.effect-bubba p { padding: 0px; opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0);}
figure.effect-bubba:hover h2,figure.effect-bubba:hover h3,figure.effect-bubba:hover p{ opacity: .85; -webkit-transform: translate3d(0,-40px,0); transform: translate3d(0,-40px,0);} 

 @media (max-width:767.98px) {
figure.effect-bubba p {  display: none;}

}
/*cms-btn Styles 樣式=================================*/ 
.btn-01 { cursor: pointer; width: 100%;  max-width: 220px; height: 3rem; line-height: 3rem; display: flex;  flex-wrap: wrap;  align-items: center; margin:20px auto; position: relative; box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.34); background:#266433; border-radius:30px; z-index: 1;  }
.btn-01 span { display: flex;padding:0px 10px 0px 30px;text-transform: uppercase;letter-spacing: 3px; transform-origin: center left; transition: color 0.3s ease;position: relative;z-index:1; font-weight: 400;  color: #fff;}
.btn-01 em {position: relative;width: 60px; height: 1px;  margin-right: 10px; transition: all 0.3s ease; background: #fff;  z-index:1;   }
.btn-01 i {  position: relative;  width: 10px!important; height: 10px!important; border-radius:99rem; background: #fff; z-index:1;   }

.btn-01:before,.btn-01:after {content: '';background:#fafaf5;height:100%; width: 0;position: absolute;transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
.btn-01:before { top: 0; left: 0; right: auto; border-radius:30px;  }
.btn-01:after { bottom: 0; right: 0; left: auto; border-radius:30px;}
.btn-01:hover:before { width: 100%; right: 0; left: auto;}
.btn-01:hover:after {  width: 100%; left: 0; right: auto;}
.btn-01:hover span{ color:#266433;}
.btn-01:hover em{background:#266433; transform: scaleX(0.5);}
.btn-01:hover i{background:#266433;  }
 @media (max-width:767.98px) {
  .btn-01 {  width: 100%;  max-width: 180px; height: 2.5rem; line-height: 2.5rem;  }   
 .btn-01 em { width: 20px;   }
   
}
/*cms-btn Styles 4====*/
.btn-btnbox {position: relative;z-index:1; display: flex;  justify-content: center;  width: 100%; height: auto;  margin: 0px;   padding: 30px 0px;transition: all 1s;}
.btnbox {  width: 100%; height: auto; display: flex;   margin: 0px;   padding: 30px 0px;   transition: all 1s;     }