/* CSS Document */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; }
html { font-size: 100%; }  
h1, h2, h3, h4, h5, h6 { line-height: 1.25em;font-family: 'Noto Sans TC', 'Microsoft JhengHei', 'Raleway', "sans-serif"!important; }
p, td, li, label { font-size: 1rem;   color: #333; line-height: 1.5rem;   font-weight: 400;}
 a { color:#232323;text-decoration: none!important; -moz-transition: color 0.25s ease, opacity 0.25s ease; -o-transition: color 0.25s ease, opacity 0.25s ease; -webkit-transition: color 0.25s ease, opacity 0.25s ease; transition: color 0.25s ease, opacity 0.25s ease }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a img { border: none; }
article a { word-wrap: break-word; word-break: keep-all; }
strong { font-weight: 700; }
  /** font-family:=================================*/
.txt-ch{font-family: 'Noto Sans TC', 'Microsoft JhengHei',"sans-serif"; }
.txt-en{font-family: 'Raleway', "sans-serif"; }
 /**訊息公告區塊 =================================*/
.cms-notice{width: 100%; height:40px;  background:#f4f4f4; padding:0px 15px; overflow:hidden;}
.cms-notice-wrap{width: 100%; max-width: 1160px; margin:0 auto; padding: 0px; display: flex; flex-wrap: wrap; align-items: center;align-content: center; }
.cms-notice-wrap i{padding-right: 5px; color: #fcb811; }
.cms-notice-title{ width: 10%; font-size:0.9375rem;margin-top: -5px;color: #fcb811; }
.cms-notice-list{ width: 85%; list-style: none; }
.cms-notice-list li{list-style: none;padding-top:10px; display: block;  font-size:0.9375rem; color:#3c3c3c; }
.cms-notice-list li a{ color:#3c3c3c!important; }
.cms-notice-list .slick-prev {top:60%; left:95%;z-index: 1; }
.cms-notice-list .slick-next {top:60%; right:0;z-index: 1;  }
.cms-notice-list .slick-prev:before, .cms-notice-list .slick-next:before {  font-size: 1rem; color: #3c3c3c; }
/**banner=================================*/
.cms-main-banner{ width:100%; height: auto; margin:0px auto; padding: 0px; overflow: hidden;  position: relative; z-index: 0;}
.cms-main-banner img{ width: 100%; max-width: 100%;  height: auto; position: relative; }
.cms-main-banner .slick-prev { left:0;z-index: 1; }
.cms-main-banner .slick-next { right:0;z-index: 1;  }
.cms-main-banner .slick-dots { right:50px; top:30px; width: 30px;  flex-direction: column;z-index: 999;  }

 @media (max-width: 1024px) {
.cms-notice{display: none;}
     
}

@media (max-width: 767.98px) {
.cms-main-banner{ width: 100%; height: auto;  margin:0px auto;}
.cms-main-banner .slick-dots { bottom:-10px; }
.cms-notice-title{ margin-top: -25px; }
.cms-notice-title strong{ display: none;}
.cms-notice-list .slick-prev,.cms-notice-list .slick-next {display: none!important; }   
}

.cms-main-wrap{ width: 100%; max-width: 1160px; margin: auto; height: auto;  display: flex; flex-wrap: wrap; justify-content: center;  }
@media (max-width:1440px) {
 .cms-main-wrap{  max-width: 1200px; }
}


.cms-icon-box{ width: 100%; padding: 10px 0px;background:#fef1cf;   }
.cms-icon-box-list{  width: 100%; max-width: 1200px; display: flex;flex-wrap: wrap; justify-content: space-between;  margin: auto; padding: 0px;  }
.cms-icon-box-list li{ width: calc(100%/4 );  margin: auto;  list-style: none; }
.cms-icon-box-list li a{  width:100%; display: flex;flex-wrap: wrap; align-content: center; align-items: center; margin: auto;   }
.cms-icon-box-list li a:hover{ opacity: .5;}
.cms-icon-box-list li a h3{ display: flex; width: calc(100% - 100px); color:#3c3c3c;}
.icon-all{display: flex; width: 64px; height: 64px;  margin: auto; background: no-repeat left top;  }
.icon-1{background-image: url("../images/index/icon-1.svg"); }
.icon-2{background-image: url("../images/index/icon-2.svg"); }
.icon-3{background-image: url("../images/index/icon-3.svg"); }
.icon-4{background-image: url("../images/index/icon-4.svg"); }
@media (max-width: 767.98px) {
.cms-icon-box{ padding:5px 0px; }
.cms-icon-box-list li{width: calc(100%/2 - 10px ); margin:0px 0px 10px 10px;  padding: 0px; }
.icon-all{  width: 32px; height: 32px;     }
.cms-icon-box-list li a h3{   width: calc(100% - 32px); }
}
 /*Special 
=================================*/
.cms-main-special {position: relative; margin:0;  width: 100%;  display: flex; flex-wrap: wrap; background:#fffbf1;  }
.cms-main-special-card {width: 100%; -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; margin:0px; padding:10px 0px; display: flex; flex-wrap: wrap; position: relative; }
.cms-main-special-card .item{ width: 100%; max-width: 100%; margin:15px;   padding: 0px 0px 40px 0px; height: auto; position: relative;  transition: all 0.3s;   }
.cms-main-special-card .item img{ position: relative; z-index: 0; padding:0px; }
.cms-main-special-card .item h3{  padding-top:25px; letter-spacing: 2px; text-align: center; font-weight: 700; color: #fff; }
.cms-main-special-card .item.slick-current{ transform: translate3d(0px, -10px, 0px); transition: all 0.3s; opacity: 1; }
.cms-main-special-card .slick-dots{bottom:0px;}
.cms-main-special-card .slick-prev{ top:60%; left:0;z-index: 1; }
.cms-main-special-card .slick-next{top:60%; right:0;z-index: 1;  }
@media (max-width: 1199.98px) {
.cms-main-special-item {width: 100%;   -ms-flex: 1 1 100%; flex: 1 1 100%;  padding:20px; }
.cms-main-special-card { width: calc(100% - 30%); -webkit-box-flex: 1; -ms-flex: 1 1 calc(100% - 30%); flex: 1 1 calc(100% - 30%);  display: flex; flex-wrap: wrap;}
.cms-main-special-item .cms-main-txt{  margin:0px auto 2% auto; }
}

 

/*----------------------------------------/
產品清單頁  cms-main-product-item  
----------------------------------------*/
.cms-main-product { width: 100%; padding:50px 15px;  margin:0 auto; position: relative;  }
.cms-main-product-item { width:100%; margin:0px auto;  padding:20px 0px; display: flex; flex-wrap: wrap; }
.cms-main-product-item li { width: calc( 100%/4 - 20px); margin:10px 10px; padding:10px;  position: relative; z-index: 1; list-style: none;  transition: all 0.3s linear 0s;}

.cms-main-product-item li a{display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; }
.cms-main-product-item li a figure { position: relative; width:100%; height: auto; margin-bottom: 15px; overflow: hidden; border: solid 1px #a2c38c; border-radius:10px;  transition: all 0.5s ease 0s; }
.cms-main-product-item li a figure img {  width: 100%; max-width: 100%;  transition: all 0.3s;}
.cms-main-product-item li figure:hover img { transform: scale(1.1);  opacity: 0.6; }
.cms-main-product-item li .cms-main-product-inner{width: 100%;margin: 0px; display: flex; flex-wrap: wrap;align-content: center; align-items: center; } 

.cms-main-product-item li figcaption{ width:100%;}
#cms-main .cms-main-product-item li figcaption  h3{flex: 0 0 100%; margin:0px; padding: 0px;   font-size:1rem; line-height:1.75rem; font-weight: 400;  color:#000; overflow: hidden; word-break:keep-all;  word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical; }
#cms-main .cms-main-product-item li .cms-main-product-inner p{ flex: 0 0 100%; margin: 10px 0px; font-size: 0.875rem; line-height: 1.5rem; font-weight: 300; color:#838383; overflow: hidden; word-break: keep-all; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;} 
.cms-main-product-item li .cms-buy{ width: 44px; height: 44px;  display: flex; justify-content: center; align-content: center; align-items: center; background: #7cbc6d; border-radius:99rem; transition: all 0.5s ease 0s; transform: scale(1); }
.cms-main-product-item li .cms-buy:hover{transform: scale(1.1); background: #fcb811; }
.cms-main-product-item li .cms-buy i{color: #fff; -webkit-transform: translate3d(0, 0px,0); transform: translate3d(0, 0px,0);transition: transform 0.35s; }
.cms-main-product-item li .cms-buy:hover i{ -webkit-transform: translate3d(0, 5px,0); transform: translate3d(0,5px,0);}

.cms-main-product-item li .cms-price{ width: 100%; padding: 10px 0px 2px 0px;  display: flex; flex-wrap: wrap; justify-content: space-between; align-content:center;  }
.cms-main-product-item li .cms-product-price{ margin:0px;  color:#87b538; }
.cms-main-product-item li .cms-product-price-origin{ margin:0px; color:#c9c9c9; text-decoration: line-through; }


.cms-main-product-note { position: absolute; top:5px; left: 0px; padding: 5px; width:60px; height:60px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; border-radius:99rem; font-size:0.875rem; text-align: left; line-height: 1.5em; text-shadow:none; z-index: 11; }
.cms-main-product-note.cms-main-product-note-sale {  color: #fff; background:#cc3333; }
.cms-main-product-note.cms-main-product-note-stock { color: #fff; background:#ff9900; }

.cms-main-product-item .slick-current {  }	
.cms-main-product-item .slick-dots {bottom:-30px;  }	
.cms-main-product-item .slick-prev { left:0; z-index: 11; }
.cms-main-product-item .slick-next { right:10px; z-index: 11; }
@media (max-width: 767.98px) {
.cms-main-product-item li { width: calc(100% / 2 - 10px); margin: 10px 5px; padding: 0px; height: auto; position: relative; transition: all 0.3s linear 0s; z-index: 1; background: #fff;  }
.cms-main-product-item li:nth-child(3n){margin-right: auto;}
.cms-main-product-item li:nth-child(2n){margin-right: 0;}
.cms-main-product-note {top:0px; left: 0px; width:40px; height:40px; font-size:0.75rem; text-align: center;   }

}


 
 /*cms-Title Styles 樣式
=================================*/
.cms-title { width: 100%; margin: 30px auto 15px auto;  display: flex; flex-wrap: wrap; position: relative; justify-content: flex-start; }
.cms-title-i{ flex: 0 0 10%; }
.cms-title-box{ flex: 0 0 auto; padding-right:40px; }
.cms-title-txt{ flex: 0 0 50%;  display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; align-items: center; }

.cms-title h1{ margin:0px auto;display: block; text-align: center;font-size: 2rem;   font-weight: 400; color: #87b538; }
.cms-title h2{ margin:0px;display: block; width: 100%; font-size:2.5rem;  font-weight:500; color: #87b538; }
.cms-title h3{ margin:0px; font-size:2rem; font-weight:300;color:#385823;}
.cms-title h3 strong{ color:#fcb811;font-weight:700; }
.cms-title p{ margin:0px; font-size:1.063rem;font-weight:400;  }

.icon-title{display: block; width: 88px; height: 104px;  margin: auto; background: no-repeat left top;  }
.icon-5{background-image: url("../images/index/icon-5.svg"); }
.icon-6{background-image: url("../images/index/icon-6.svg"); }
.icon-7{  display: block; width: 31px; height: 41px; background: url("../images/index/title-icon.png") no-repeat left top;   }
@media (max-width: 991.98px) {
 .cms-title h2{  font-size:2rem;  }
 .cms-title h3{  font-size: 1.875rem;  }
 }
@media (max-width: 767.98px) {
#cms-main .cms-title h1, .cms-title h2{  font-size:1.75rem;  }
 .cms-title-txt{ flex: 0 0 100%;  }
 .icon-title{ background-size:80% auto; background-position: center top; }
   
} 

.cms-title-2{ width: 100%; margin: auto auto 30px auto;  display: flex; flex-wrap: wrap; position: relative; justify-content: flex-start;  }
.cms-title-2 .cms-title-i{ flex: 0 0 10%;  }
.cms-title-2 .cms-title-box{ flex: 0 0 90%;  }

.cms-title-2 h1{ margin:0px;display: block; font-size: 2rem; font-weight: 400; color: #87b538; }
.cms-title-2 h2{ margin:0px;display: block; font-size: 2rem; font-weight: 400; color: #87b538;  }
 

/*-------------------*/
/***** about *****/
/*------------------*/
.cms-main-about { width: 100%; padding:100px 0; margin:0; position: relative; display: flex; flex-wrap: wrap; background: url("../images/index/about-left.jpg") no-repeat left top; }
 .cms-main-about-item {  width:calc(50% - 15px);  display: flex; flex-wrap: wrap; padding:0px 5%; }
.cms-main-txt{width: 100%;  margin:5% auto;  display: flex; flex-wrap: wrap; position: relative; z-index: 1;}
 #cms-main .cms-main-txt p { width: 100%; font-size: 1rem; line-height:2rem; color: #7a818c; font-weight: 300;  padding:5px; letter-spacing: 1px; margin-bottom: 20px;  }
 #cms-main .cms-main-txt p strong{  display: block;  width: 100%; font-size: 1.313rem; line-height: 2rem; letter-spacing: 1.2px; font-weight:400;  padding:5px; margin-bottom: 10px; color: #000; }
.cms-main-card { width:calc(40% - 15px); margin:0px 15px; padding:0px; display: flex; flex-wrap: wrap; }
.cms-main-card figure { display: block;  width: 90%; max-width:90%; margin:0 auto;   }
.cms-main-card figure img {  width: 100%; max-width: 100%; transition: all 0.3s; position: relative; z-index: 1; }
@media (min-width: 992px) and (max-width: 1199.98px) {
.cms-main-card { width:calc(38.33333% - 9.16667px); margin:0px; padding:0px;  display: flex; flex-wrap: wrap; }
.cms-main-about-item {  width:calc(61.66667% - 12.83333px);  display: flex; flex-wrap: wrap; padding-left:5%; }
}
 @media (max-width: 1024px) {
 .cms-main-about {   background-size: 15% auto; }
    
}
 @media (max-width: 999px) {
  .cms-main-about { padding:10px 0;   }
     
}
 @media (max-width: 767.98px) {
.cms-main-about-item { width: 100%; padding: 15px;}
.cms-main-card { width:100%; padding:50px 0px 0px 0px;}
} 


/*-------------------*/
/***** news圖文方格 *****/
/*------------------*/
 
.cms-news-wrap{ width: 100%; padding:50px 0px; margin:0px; display: flex; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1;background: #f4f4f4;    }
.new-tag { display: flex; flex-wrap: wrap; flex-direction: row; margin-top: -41px;  width: 100%; transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; overflow: hidden; text-transform: capitalize;  word-break: keep-all;   z-index: 9;  position: relative; }
#cms-main a.new-tag-tcategory{ color:#000;  }
.new-tag-tcategory{ width: auto;max-width: 100%; font-size: 14px; font-weight: 400; line-height: 1.57; letter-spacing: normal; position: relative; padding:10px; margin: 0px;   color: #fff; background:#e7e7e7; -webkit-transition: background-color .2s,color .2s,border-color .2s; transition: background-color .2s,color .2s,border-color .2s;}
.new-tag-tcategory:hover{ color: #fff; background:#000;  }
#cms-main a.new-tag-tcategory:hover{ color: #fff;  }
.cms-main-news-list {width: 100%; max-width: 1400px; margin: 10px auto;  padding:10px; display: flex;  flex-wrap: wrap; position: relative; z-index: 1; }
.cms-main-news-list li{ width: calc(100% - 60px); padding: 10px; margin:0px 30px ; box-sizing: border-box;  list-style: none;  transition: all 0.5s ease 0s;   background: #fff; }
.cms-main-news-list li:hover{ }
.cms-main-news-list figure img { display: block; width: 100%; max-width:100%; height: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: all 0.3s linear; position: relative;  }
.cms-main-news-list figcaption { box-sizing: border-box; color: #4c4c4c; font-size: 14px; font-weight: 400; line-height: 1.8rem; letter-spacing: 0.5px; padding: 20px;  position: relative;  }
.cms-main-news-list figcaption .wrap { display: -ms-flexbox; display: flex; flex-wrap: wrap;   width: 100%; margin: 0;}
.cms-main-news-list figcaption .news-box {position: relative;  width: 100%; box-sizing: border-box;}
.cms-main-news-list figcaption  h3 {width: 100%; margin-bottom: 10px; }
.cms-main-news-list figcaption a h3{ position: relative; font-size: 1.313rem;  line-height: 2rem; font-weight: 700; color:#fcb811!important; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word;}
 .cms-main-news-list figcaption p { width: 100%; height: 52px; font-size: 1rem; line-height: 1.5rem; color:#404040; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word;}
 
.cms-main-news-list .cms-date{  width: 40%; margin-top: -12%;  right: 0px;  padding: 0px;  height: 40px; color:#cacaca; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack:flex-start;  -ms-flex-pack: flex-start;justify-content: flex-start; -webkit-box-align:flex-start; -ms-flex-align: flex-start; align-items: flex-start; opacity: 1; z-index: 9; position: relative;}
.cms-main-news-list .slick-next {right: 5px;}
.cms-main-news-list .slick-prev {left: 5px; z-index: 99;}
@media (max-width: 1199.98px) {
.cms-main-news-list li{  margin:0px 10px; }
 }
@media (max-width: 798px) {
.cms-news-wrap{ background-size:50% auto,100% auto ,100% 100%; }
.cms-main-news-list {  padding:10px; margin: 0px auto;   }
}


 /*----------------------------------------/
產品總覽頁Product
----------------------------------------*/
.cms-product-wrap{  width: 100%; margin: 0px auto; padding:50px 0px;  background:#f7fbf5; }
.cms-product-wrap .cms-main-wrap{  max-width: 1160px; margin: auto; height: auto; padding: 20px 0px; display: flex; flex-wrap: wrap; justify-content: space-between;  }
.cms-product-cate { width:60%; margin:0px auto;  padding:0px 0px 30px 30px; position:relative; z-index: 1; display: flex; flex-wrap: wrap;  }
.cms-product-cate li{ width:100%;  margin:0px auto; padding:0px 20px; display: flex; flex-wrap: wrap; justify-content: space-between;  position: relative; z-index: 1;overflow: hidden;  transition: all 0.3s linear 0s;  }
 

 .cms-product-cate li figure { position: relative;  margin: 10px 15px 30px 0px;  width:calc(100%/2 - 30px) ;  height:auto; text-align: center; cursor: pointer;background: #fff; overflow: hidden; transition: all 0.3s linear 0s; }
.cms-product-cate li figure img { position: relative; display: block; max-width: 100%;  height: auto; opacity:1; overflow: hidden; transition: all 0.3s linear 0s; }
.cms-product-cate li figure:hover img { transform: scale(1.15)}
.cms-product-cate li figure:hover{ box-shadow: 5px 5px 8px rgba(0,0,0,.1); } 
.cms-product-cate li figure figcaption { padding:15px 10px; color: #fff; text-transform: uppercase;position: relative;display: block; width:100%; height:auto; font-size: 1.25rem; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cms-product-cate li figure h2 {word-spacing: -0.15em;  font-size: 100%;  font-weight: 400;}
.cms-product-cate li figure h2 span {font-weight: 700;}
.cms-product-cate li figure h2,.cms-product-cate li figure p {margin: 0; color: #75a001;  }
.cms-product-cate li figure p { font-size:100%; font-weight: 700;}

.cms-cate{ width: 40%; height: 86%; overflow: hidden;  display: flex; }
.cms-cate figure { position: relative; float: left; overflow: hidden; margin: 10px;width: 100%; height:100%;text-align: center; cursor: pointer;	}
.cms-cate figure img { position: relative; display: block;    max-width: 100%; opacity:1;}
.cms-cate figure figcaption { padding: 2em; color: #75a001;  text-transform: uppercase; font-size: 1.25rem; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cms-cate figure figcaption::before,.cms-cate li figure figcaption::after {pointer-events: none;}
.cms-cate figure figcaption,.cms-cate li figure figcaption > a { position: absolute; top: 0; left: 0; width:100%; height: 100%;}
 /* Anchor will cover the whole item by default For some effects it will show as a button*/
.cms-cate figure figcaption > a { z-index: 1000;  white-space: nowrap; font-size: 0; opacity: 0;}
.cms-cate figure h2 {word-spacing: -0.15em;  font-size: 150%;  font-weight: 400;}
.cms-cate figure h2 span {font-weight: 700;}
.cms-cate figure h2,.cms-cate li figure p {margin: 0; padding: 20px; color: #75a001;background: #fff; border: solid 1px #75a001;}
.cms-cate figure p { font-size:100%; font-weight: 700;}
@media (max-width: 797.98px) {
 .cms-product-wrap{  padding:10px 0px; }
 .cms-cate{ width: 100%;   }
 .cms-product-cate { width:100%; margin:0px;  padding:0px 0px 30px 0px;  }
 .cms-product-cate li{   padding:0px 5px; }
   
 .cms-product-cate li figure {  margin: 10px 5px 30px 5px;  width:calc(100%/2 - 10px) ; }

}


/*---------------*/
/***** Bubba *****/
/*---------------*/
figure.effect-bubba { background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%); background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);}
figure.effect-bubba img {opacity: 1; -webkit-transition: opacity 0.35s; transition: opacity 0.35s;}
figure.effect-bubba:hover img {opacity: 0.4;}
figure.effect-bubba figcaption::before,figure.effect-bubba figcaption::after { position: absolute; top:16px; right:16px; bottom: 16px; left: 16px; content: ''; opacity:1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;}
figure.effect-bubba figcaption::before { border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0,1); transform: scale(0,1);}
figure.effect-bubba figcaption::after { border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1,0); transform: scale(1,0);}
figure.effect-bubba h2 { margin-top: 45%; -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 figcaption::before,figure.effect-bubba:hover figcaption::after { opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
figure.effect-bubba:hover h2,figure.effect-bubba:hover p { opacity: .7; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0);}

 
.cms-product-cate .slick-prev { left:0; }
.cms-product-cate .slick-next { right:0 }
.cms-product-cate .slick-prev, .cms-product-cate .slick-next { font-size: 0; line-height: 0; position: absolute; top: 40%; z-index:1; display: block; width:36px; height: 36px; padding: 0;background:#d80a4a; border-radius:99rem; outline: none;}
 .cms-product-cate .slick-prev:before,.cms-product-cate .slick-next:before { color: #fff; font-size: 1.15rem;  }
 
 
/*cms-btn Styles 樣式=================================*/ 
.cms-btn-01 { cursor: pointer; width: 100%; max-width: 220px; height: 3rem; line-height: 3rem; display: block; margin: 0; position: relative;   box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.34); background-image: linear-gradient(to right, #ec640a 10%, #fcca5c 100%); border-radius:25px; z-index: 1;  }
.cms-btn-01 span { display: block;padding-left: 35px;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;}
.cms-btn-01 em {position: absolute;width: 45%; height: 1px;right: 23px;top: 50%;transform: scaleX(0.25); transform-origin: center right; transition: all 0.3s ease; background: #fff;  z-index:1;   }
.cms-btn-01:before,.cms-btn-01:after {content: '';background:#f39139;height:100%; width: 0;position: absolute;transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);}
.cms-btn-01:before { top: 0; left: 0; right: auto;  border-radius:25px; }
.cms-btn-01:after { bottom: 0; right: 0; left: auto; border-radius:25px; }
.cms-btn-01:hover:before { width: 100%; right: 0; left: auto;}
.cms-btn-01:hover:after {  width: 100%; left: 0; right: auto;}
.cms-btn-01:hover span{ color: #000;}
.cms-btn-01:hover em{background: #000; transform: scaleX(0.5);}
 
/*cms-btn-more =================================*/ 
  
[class^="cms-btn-"] {
    margin: .4em;
    padding: 8px 40px;
    cursor: pointer;
    background: #4ca338;
    text-decoration: none;
    color: #fff;
    -webkit-tap-highlight-color: rgba(0,0,0,1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* Bounce To Right */
#cms-main a.cms-btn-more{
  display: inline-block;color: #fff; max-height: 48px;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
#cms-main a.cms-btn-more:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:#fcb811; border: solid 1px #fcb811;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
#cms-main a.cms-btn-more:hover, #cms-main a.cms-btn-more:focus, #cms-main a.cms-btn-more:active { color: #000;}
#cms-main a.cms-btn-more:hover:before, #cms-main a.cms-btn-more:focus:before, #cms-main a.cms-btn-more:active:before { -webkit-transform: scaleX(1); transform: scaleX(1);  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);}


 
/*cms-btn Styles 4====*/
.cms-btn-btnbox {position: relative;z-index:1; display: flex;  justify-content: center;  width: 100%; height: auto; margin:20px auto;  transition: all 1s;}