/** 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%;max-width: 1200px; padding:0px 20px; }
@media (min-width: 1120px) {
.wrapper {   padding:0px 30px; }   
}
@media (min-width: 1920px) {
.wrapper { width: 100%;  max-width: calc((100% - 40px)/12*12 + 40px); padding-left: calc(50% - 720px)!important;  padding-right: calc(50% - 720px)!important;}
}
 
.banner{width: 100%; max-width: 100%;height: auto; margin: 0px auto; padding:0px;  position: relative; }
.banner .slick-dots{ bottom: 20px}
.banner .slick-prev{ left:24px;  top:40%; }
.banner .slick-next{ right:24px; top:40%;  }



.banner .slide { width: 100%; min-height:460px;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;  -webkit-animation-duration: 3s; animation-duration: 3s; transition: all 1s ease;}
@media (min-width: 1600px) {
.banner .slide { width: 100%; min-height: 460px; display: block; position: relative;}
}
@media (max-width:1180px) {
.banner .slide {min-height:auto; }
.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: auto;height: auto; }
 }

  /* /////////// IMAGE ZOOM /////////// */
@-webkit-keyframes zoomInImage {
from { transform: scale3d(1, 1, 1); }
to { transform: scale3d(1.015, 1.015, 1.015); }
}
@keyframes zoomInImage {
from { transform: scale3d(1, 1, 1); }
to { transform: scale3d(1.015, 1.015, 1.015); }
}
.zoomInImage { -webkit-animation-name: zoomInImage; animation-name: zoomInImage;}
@-webkit-keyframes zoomOutImage {
from { transform:scale3d(1.015, 1.015, 1.015); }
to {transform: scale3d(1, 1, 1); }
}
@keyframes zoomOutImage {
from { transform:scale3d(1.015, 1.015, 1.015); }
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:60px; padding:10px 20px; background-image: linear-gradient(120deg, #f8d056 0%, #fe9e00 100%); }
.notice-list{ width: calc(100% - 40px);  display: block; margin: 0px auto; padding: 0px; list-style: none;   position: relative; }
.notice-list li{ width: 100%; list-style: none;padding:0px;margin: 0px auto; overflow: hidden; }
.notice-list li a{ width: 100%;  color: #585353;}
.notice-list li a p{ text-align: center; margin: 0px auto;word-break: normal; word-break:keep-all;  word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical; color: #fff; }
.notice-list .slick-prev { width: 24px;height: 24px; top:17px; left:calc(100% - 60px);z-index: 1; }
.notice-list .slick-next { width: 24px;height: 24px;  top:17px; right:0;z-index: 1;  }
.notice-list .slick-prev:before, .notice-list .slick-next:before { width: 12px;height: 12px;  color: #fff; }
.notice-list .slick-prev:hover,.notice-list .slick-next:hover{color: transparent;outline: none;background:#d42d24;  }

@media (max-width: 1201px) {
.notice-wrap{  width:100%; }
}

@media (max-width: 440px) {
.notice{ padding:5px 0px; }
.notice-list{ width: 100%; }
.notice-list li a p{  -webkit-line-clamp: 2;line-height: 1.35rem;   }
}
 
/*Recommend */
.recommend{width: 100%; padding:0px;  margin:100px 0px 0px 0px;    position: relative;}
@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-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; 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:70px 0px 20px 0px;  margin:0px; position: relative;  }
 @media (max-width: 767.98px) {
.main-product {  padding:0px;  }
}
 
/* */
.product-item { width:100%; margin:0px auto;  padding:20px;  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:hover .item{box-shadow: 0px 5px 12px #eee; border: solid 1px #f18201;}
.product-item li figure{  width: 100%; padding-bottom: 100%; height: 0; overflow: hidden; position: relative;  z-index: 1; transition: all 0.5s ease 0s;  border-radius:15px 15px 0px 0px; background-color:#fafaf5;}
.product-item li:hover figure img { transform: scale(1.05);  }
.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; border-radius:15px;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, .9rem), 1.15rem); line-height:1.75rem; font-weight: 400; text-align: left; color:#2c2c2c; overflow: hidden; word-break:keep-all; 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{  line-height:1.5rem;  }
}
@media (max-width: 640px) {
.product-item { padding:20px 0px; }
}
.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;  font-size: min(max(2vw, .9rem), 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:#f99a00; }

.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%;  }

 
#hot.product-item li .item,#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; } 
#hot .tag-cate-list,#featured .tag-cate-list,#featured-2 .tag-cate-list { left:5px; top:5px; }
#hot.product-item .slick-prev,#featured.product-item .slick-prev,#featured-2.product-item .slick-prev { left:-36px;  top:40%; }
#hot.product-item .slick-next,#featured.product-item .slick-next,#featured-2.product-item .slick-next { right:-36px; top:40%;  }
 
@media (max-width: 1180px) {
#hot.product-item .slick-prev,#featured.product-item .slick-prev,#featured-2.product-item .slick-prev { left:-10px;  }
#hot.product-item .slick-next,#featured.product-item .slick-next,#featured-2.product-item .slick-next { right:-10px;  }
}
@media (max-width: 768px) {
#hot.product-item li { padding:10px 5px; }
#hot.product-item li .item,#featured.product-item li .item,#featured-2.product-item li .item{width: 100%;margin:0px 0px 10px 0px;  } 
#hot.product-item .slick-prev,#featured.product-item .slick-prev,#featured-2.product-item .slick-prev { left:0px; top:38%;  }
#hot.product-item .slick-next,#featured.product-item .slick-next,#featured-2.product-item .slick-next { right:0px; top:38%; }
}
@media (max-width: 640px) {
#hot.product-item .slick-prev,#featured.product-item .slick-prev,#featured-2.product-item .slick-prev { left:-20px; }
#hot.product-item .slick-next,#featured.product-item .slick-next,#featured-2.product-item .slick-next { right:-20px; }    
}

/*video */


.video { width: 100%;  margin: auto;padding: 0px 0px 50px 0px; }
.video li { width:calc(100% - 20px);height: auto;  margin:10px auto;  padding: 0px 10px; list-style: none;position: relative;}
.video .item {  display: flex; flex-wrap: wrap; padding: 15px; border: 1px solid #eeeeee; border-radius: 20px; position: relative;}

@media (max-width: 1180px) {
.video { width: 100%;  margin: auto;padding: 0px 20px 50px 20px; }   
.video .slick-prev  { left:-10px;  }
.video .slick-next  { right:-10px;  }    
}
@media (max-width: 640px) {
.video li { padding: 0px; }
    
}
 
 /*main-about
=================================*/
.main-about{ position: relative; margin:0px; padding:50px 0px; display: flex; flex-wrap: wrap;justify-content: space-between;  background-color:#fffbf2; }
@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{ max-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:#333e48; }
.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:150px;height: 150px; margin: auto;display: block;  left:calc(50% - 60px); top:-50px; position: absolute; background: url("../images/index/title.png") no-repeat center top; background-size:100% auto;}
.title:after { content: "";width: 100%;height: 2px; margin: auto;display: block; background:#f99a00; bottom: 20%; right: 0px; position: absolute; z-index: -1; }
.title h2{margin:0px auto; padding: 0px 20px; font-size:2.15rem;  font-weight:500; color:#f99a00; 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:1024px) {
.title:before { top:-20px;  width:100px;height: 100px; }   
.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:30px 0px;  display: flex; flex-wrap: wrap; flex-direction: column;  justify-content: center; position: relative;z-index: 1 }
.title-2:after { content: "";width: 100%;height: 2px; margin: auto;display: block; background:#f99a00; bottom: 20%; right: 0px; position: absolute; z-index: -1; }

.title-2 h2{margin:0px auto; padding: 40px 20px 0px 20px; font-size:2.15rem;  font-weight:500; color:#333e48; background: #fff; letter-spacing: 3px; position: relative;}
.title-2 h2:before { content: "";width:120px;height: 120px; margin: auto;display: block;  left:calc(50% - 60px); top:-90px; position: absolute; background: url("../images/index/title-2.png") no-repeat center bottom; background-size: 100% auto}

.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;  }    
} 



.icon-pix{   margin: auto; background-image: attr(src url); background-repeat: no-repeat; background-size:100% auto;background-position:center; position: absolute;z-index:1; width: 100px;  height: 100px; top: -150px; right:calc(50% - 50px); bottom: 0; left: calc(50% - 50px); transition: 0.8s 1s; }

@media (max-width:1180px) {
 .icon-pix{ top: -100px; }   
}
@media (max-width:1024px) {
 .icon-pix{width:80px;height: 80px;  top: -60px; }   
}

.title-icon { width: 100%;  margin:30px 0px;  display: flex; flex-wrap: wrap; flex-direction: column;  justify-content: center; position: relative;z-index: 1 }
.title-icon:after { content: "";width: 100%;height: 2px; margin: auto;display: block; background:#f99a00; bottom: 20%; right: 0px; position: absolute; z-index: -1; }

.title-icon  h2{margin:0px auto; padding: 40px 20px 0px 20px; font-size:2.15rem;  font-weight:500; color:#f99a00; background: #fff; letter-spacing: 3px; position: relative;}
 

.title-icon  h3{margin:10px auto 0px auto; font-size:1rem; font-weight:600;color:#999; position: relative; }
.title-icon  h3 strong{ color:#2c2c2c;font-weight:700; }

@media (max-width: 991.98px) {
.title-icon  h2{  font-size:2rem;  }
.title-icon  h3{  font-size: 1.875rem;  }
}
@media (max-width: 767.98px) {
.title-icon  { padding-top: 30px; }   
.title-icon  h2{  font-size:1.75rem;  }
.title-icon  h3{  font-size:1.25rem;  }    
}

@media (max-width: 440px) {
.title-icon  { padding-top: 30px; }   
.title-icon  h2{  font-size:1.5rem;  }
.title-icon  h3{  font-size:1rem;  }  
 .title-icon:after {  bottom: 12%;  }   
}

.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:#f99a00; bottom: 27%; left: 0px; position: absolute;  }  

.title-3 h3{margin:0px auto; padding: 0px 0px 10px 0px;  letter-spacing: 3px; position: relative;}
.title-3 h3:after { content: "";width:30%;height:4px; margin: auto; background:#f99a00; bottom: 0px; 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:#f99a00;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;align-items: flex-start; justify-content: space-between; }
@media (max-width:1200px) {
.main-box{margin:3% auto;}
 }
.grid-row {width:calc(100%/3 - 10px); padding: 0px 5px; 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%; padding:0px;  position: relative;  border-radius:15px; overflow: hidden;   }
.grid-item figure{  padding:10px 0px;  border: solid 1px #ffe29b; border-radius:15px; overflow: hidden; }
.grid-item iframe{ border-radius:15px; overflow: hidden; }
.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: #f99a00; 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:#f99a00; 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:#f99a00;}
.btn-01:hover em{background:#f99a00; transform: scaleX(0.5);}
.btn-01:hover i{background:#f99a00;  }
 @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;     }