/* 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%;  }  
 /** font-family:=================================*/
.txt-ch{font-family: 'Noto Sans TC', 'Microsoft JhengHei',"sans-serif"; }
.txt-en{font-family: 'Rubik', "sans-serif"; }

.container { position: relative; margin-right: auto; margin-left: auto; width: 100%; padding-right: 20px; padding-left: 20px; max-width: calc((100% - 40px)/12*12 + 40px)}
@media (min-width:768px) {
.container { padding-right: 40px; padding-left: 40px; max-width: 768px  }
}
@media (min-width:1200px) {
.container { padding-right: 40px; padding-left: 40px; max-width: 1280px}
}
@media (min-width:1920px) {
.container { padding-right: 40px; padding-left: 40px; max-width: 1440px }
}


 
 
 /**banner=================================*/
.cms-main-banner{ width:100%; height: auto; margin:-20px auto auto auto; padding: 0px; overflow: hidden;  position: relative; z-index: 1;}
.cms-main-banner img{ width: 100%; max-width: 100%;  height: auto; position: relative;-webkit-animation: zoom 2s ease-in-out; -moz-animation: zoom 2s ease-in-out; -o-animation: zoom 2s ease-in-out; -ms-animation: zoom 2s ease-in-out; animation: zoom 2s ease-in-out; }
.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 {position: absolute; bottom:-40px!important; justify-content: center; }
.cms-main-banner .slick-dots li.slick-active button, .cms-main-banner .slick-dots li:hover button { background:#184598; }
.cms-main-banner .slick-dots li button { background:rgba(24,69,152,.5);   }
 
@keyframes zoom {
  0% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
 
  

.cms-main-wrap{ width: 100%; max-width: 1400px; margin: auto; height: auto;  display: flex; flex-wrap: wrap;justify-content: center;  }
.cms-main-about{position: relative; margin:0;padding: 80px 0px 40px 0px;  width: 100%;  display: flex; flex-wrap: wrap; background: url("../images/index/about-a2.png")  no-repeat  -80px bottom  #f9f7ef; background-size: 20% auto;    }
.cms-main-about:before{content: ""; display: block; width:30%; height:100%; top:-60px; right:-260px;  position:absolute; z-index:0;  background: url("../images/index/about-a1-1.png") no-repeat right  top; background-size:100% auto  ; }
@media (min-width:1600px) {
.cms-main-about:before{ width:25%; top:-60px; right:-200px;  }
.cms-main-about{  background-position:left bottom;  background-size: 20% auto;    }

}
.cms-main-about-item {width: 50%; height: auto; -webkit-box-flex: 1; -ms-flex: 1 1 50%; flex: 1 1 50%;  padding:40px 0px 0px 40px ;  display: flex; flex-wrap: wrap; align-content: center; align-items: center; }
.cms-main-txt{width: 100%;max-width: 70%; margin:3% auto auto auto; display: flex; flex-wrap: wrap; position: relative; z-index: 1;}
#cms-main .cms-main-txt p { width: 100%; font-size:1.125rem; font-weight: 400; line-height: 2.35rem; padding:5px;   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-about-card { width: calc(100% - 50%); -webkit-box-flex: 1; -ms-flex: 1 1 calc(100% - 50%); flex: 1 1 calc(100% - 50%); margin:20px 0px;   padding:10px 0px; display: flex; flex-wrap: wrap; position: relative; }
.cms-main-about-card .item{ width: 100%; max-width: 100%; margin:15px 0px; padding: 0px 0px 40px 0px; height: auto; position: relative;  transition: all 0.3s;z-index: 0; }
.cms-main-about-card .item img{ position: relative; z-index: 0; padding:0px;  box-shadow: 5px 5px 8px rgba(0,0,0,.1);}
.cms-main-about-card .item:before{content: ""; display: block; width:50%; height:100%; top:-100px; right:-80px;  position:absolute; z-index:1;  background: url("../images/index/about-a1.png") no-repeat  right  top; background-size: 100% auto; }


.cms-main-about-tilte {margin:10px 0; padding: 100px 0px 80px 50px;  width: 80%; height: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; position: relative;  z-index:0;  }
.cms-main-about-tilte:before{content: ""; display: block; width:70%; height:100%; top:0px; left:0px;  position:absolute; z-index:0;  border: solid 8px #e9494a;}
.cms-main-about-tilte:after{content: ""; display: block; width:20%; height:60%; top:50px; left:60%;  position:absolute; z-index:0; background: #f9f7ef;}

.cms-main-about-tilte h3{ width: 100%; font-size: 2.35rem; font-weight: 700;margin: 0; text-align: right;position: relative; z-index: 3;   }
.cms-main-about-tilte h3:before{content: ""; display: block; width:40%; height:200px; top:-70px; left:-10%;  position:absolute; z-index:0;  background: url("../images/index/smaile.svg") no-repeat left top; background-size: auto; }
.cms-main-about-tilte p{ width: 100%; font-size: 1.35rem; font-weight: 400;margin: 0; text-align: right;position: relative; z-index: 3;   }



@media (min-width:1600px) {
.cms-main-about-item {  padding-left:10%; }
.cms-main-about-card { width: calc(100% - 60%); -webkit-box-flex: 1; -ms-flex: 1 1 calc(100% - 60%); flex: 1 1 calc(100% - 60%); margin:20px 0px;   padding:10px 0px; display: flex; flex-wrap: wrap; position: relative; }
.cms-main-about-card .item{  padding-top: 10%;  }
}

@media (max-width: 1199.98px) {
.cms-main-about{  margin: 0; }
.cms-main-about:before{  width:30%; height:100%; top:-60px; right:0px;}    
.cms-main-about-item {width: 100%;   flex: 1 1 100%;  display: flex; flex-wrap: wrap; justify-content: center; margin: 0px; padding:40px 25px; }
.cms-main-about-card { width: calc(100% - 30%); -webkit-box-flex: 1; -ms-flex: 1 1 calc(100% - 30%); flex: 1 1 calc(100% - 30%); margin: 0px auto; padding: 0px; }
.cms-main-about-item .cms-main-txt{  margin:0px auto 2% auto; }
.cms-main-about-card .item{  margin: 0px auto; padding:100px 40px; }
.cms-main-about-card .item img{  border-radius:0px;}
/*.cms-main-about-tilte { width: 60%; }*/
.cms-main-about-tilte h3:before{ width:40%; height:100px; top: 0px; left:0; }
.cms-main-about-card .item:before{  width:30%; height:100%; top:-50px; right:80px; }
}
@media (max-width: 768px) {
.cms-main-about{  margin:0px;padding: 20px 0px; }
.cms-main-about-item { padding:10px 25px; }   
.cms-main-about-tilte {margin:10px 0; padding: 50px 0px 50px 50px;  width: 100%;}
.cms-main-about-tilte h3{ font-size: 1.875rem;   }
.cms-main-about-tilte h3:before{  width:30%; height:200px; top:-40px; left: -10%;  position:absolute; z-index:0;background-size: 100% auto; }
.cms-main-about-tilte:before{  width:80%;  }
.cms-main-about-item .cms-main-txt{  max-width: 100%; margin: auto; }
   .cms-main-about-card .item:before{  width:50%; height:50%; top:0px; right:0px; }
.cms-main-about-card .item{  margin: 0px auto; padding: 40px; }

}

/*-------------------*/
/***** 最新消息 *****/
/*------------------*/
.cms-news-wrap{ width: 100%; padding:50px 0px; margin:0px; display: flex; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; background-image:linear-gradient(180deg, #f9f7ef 0%, #fcfbf6 100%);   }
.new-tag { display: flex; flex-wrap: wrap; flex-direction: row; 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;   }
#cms-main a.new-tag-tcategory{ color:#d4afaf;  }
.new-tag-tcategory{ width: auto;max-width: 100%; font-size: 0.75rem; font-weight: 400; line-height: 1.57; letter-spacing: normal; position: relative; padding:0px 8px; margin: 2px; border: solid 1px #d4afaf; border-radius:5px; color: #fff; background:#fff; -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:#d4afaf;  }
#cms-main a.new-tag-tcategory:hover{ color: #fff;  }
.cms-main-news-list {width: 100%; max-width: 1400px; padding:10px 10px 50px 10px;  display: flex;  flex-wrap: wrap; position: relative; margin: 60px auto;  z-index: 1; }
.cms-main-news-list li{ width: calc(100% - 40px); padding: 10px; list-style: none; margin:0px 20px ; box-sizing: border-box;  transition: all 0.5s ease 0s; border-radius:15px; background: #fff; position: relative;  }
.cms-main-news-list li:before{ content: ""; position: absolute;width: 96%; height: 96%; display: block; border: solid 1px #ccc; border-radius:10px;  z-index: 1;pointer-events: none;}
.cms-main-news-list figure img { display: block; width: 70%; max-width:100%; height: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: all 0.3s linear; position: relative; z-index: 0; }
.cms-main-news-list figcaption { box-sizing: border-box; color: #4c4c4c; padding: 20px;}
.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: calc(100% - 46px); box-sizing: border-box;}
.cms-main-news-list figcaption  h3 {width: 100%; margin-bottom: 10px;  }
.cms-main-news-list figcaption  h3 a {   position: relative; font-size: 1rem;  line-height: 1.75rem; font-weight: 700; color:#000 !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{   }
.cms-main-news-list {  padding:10px; margin: 60px auto 0px auto;   }
 .cms-main-news-list li:before{  display: none;}
   
.cms-main-news-list figcaption { padding: 0px;}
.cms-main-news-list figcaption .news-box { width: 100%!important;   }
.cms-main-news-list figure img { width: 70%; max-width:100%; height: auto;   }
.cms-main-news-list figcaption  h3 { margin: 10px 0px;  }
.cms-main-news-list figcaption  h3 a { line-height: 1.5rem; }
    
 .cms-main-news-list figcaption  h3 a { line-height: 1.5rem; -webkit-line-clamp: 3; }
 .cms-main-news-list figcaption p { -webkit-line-clamp: 3;  }   
    
    
    
}
/* Underline From Left */
a.hvr-underline-from-left {color: #e94949;}
.hvr-underline-from-left { display: inline-block; 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; overflow: hidden;}
.hvr-underline-from-left:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; background:#e94949; height: 4px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {right: 0;}
.btn-view{font-size: 0.75rem;}

.cms-main-news-list .slick-dots{bottom:0px; background-color: transparent;}
.cms-main-news-list .slick-dots li { background-color: transparent;  }

  
 
.cms-main-product { width: 100%; padding:50px 15px;  margin:0 auto; position: relative; background-image:linear-gradient(180deg, #fff 0%,  #f9f7ef 100%); background-position: left top; background-size: 100% auto; background-repeat: no-repeat;    }
 
@media (min-width: 992px) and (max-width: 1199.98px) {
.cms-main-product {  padding:100px 15px 50px 15px; }
}
@media (max-width: 1199.98px) {
.cms-main-product {  padding:100px 15px 50px 15px; }
}
@media (max-width: 767.98px) {
.cms-main-product {  padding:30px 15px 15px 15px; }
 }

.cms-main-product-item { width:100%;  margin:15px  auto;  padding:0px; display: flex; flex-wrap: wrap;   list-style: none; position: relative; z-index: 0;}
.cms-main-product-item li { width: calc(100% - 10px); margin:30px 20px; padding: 0px;  display: flex; flex-wrap: wrap;  position: relative; transition: all 0.3s linear 0s; z-index:0;  }
.cms-main-product-item li:hover { transform: scale(1.05); -webkit-transform: translate3d(0,-10,0);transform: translate3d(0,-10px,0); }
.cms-main-product-item li a{ display: flex; flex-wrap: wrap; justify-content:center;}
.cms-main-product-item li a figure { position: relative; width:100%; height: auto;   transition: all 0.5s ease 0s; }
.cms-main-product-item li a figure img {  width: 100%; max-width: 100%; transition: all 0.3s; -webkit-transform: translate3d(0,0px,0);transform: translate3d(0px,0px,0px);  }
.cms-main-product-item li:hover figure img {  transform: scale(1.05);  }
#cms-main .cms-main-product-item li a h3{ margin:15px auto ; padding:0px 5px;  width: 100%; max-height:52px;  font-size:1rem; font-weight:500;color: #000;  text-align: center;  overflow: hidden; word-break:break-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 a p{  margin: 0 10px; padding:0px 5px; font-size:0.875rem; line-height: 1.5rem; color:#6c7280; text-align: left;   overflow: hidden; word-break:break-all; word-break: keep-all; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp:3;  -webkit-box-orient: vertical; }
#cms-main .cms-main-product-item li a span.cms-main-product-unit{  margin: 0 10px; padding:0px 5px; font-size:0.75rem; line-height: 1.5rem; color:#6c7280; text-align: right; border: solid 1px #6c7280; border-radius:5px;  overflow: hidden; word-break:break-all; word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp:2;  -webkit-box-orient: vertical; }
.cms-main-product-item li a span.cms-main-product-price{ display: flex; justify-content: center; margin:0px auto;font-size:1rem; color:#000;  font-weight: 700; }
.cms-main-product-item li a span.cms-main-product-price-origin{ display: flex; justify-content: center; margin:0px auto;font-size:.85rem; color:#717171;  font-weight: 700;text-decoration: line-through; }
.cms-main-product-note { position: absolute; top:15px; left: 0; width:auto; height: auto; padding: 5px 15px;font-size:0.9375rem; 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:0px; z-index: 11; }
 

 
.cms-main-icon { width: 100%; padding:40px 0px; margin: 0; position: relative; 
background-image:url("../images/index/pinut.png"),url("../images/index/bg-cate.jpg"); background-position: center 110%,left top; background-size:80% auto,100% auto; background-repeat:repeat-x,no-repeat;background-color: #f9f7ef; }
.cms-main-icon-wrap{ width:100%;  max-width: 800px;margin:0 auto; padding:80px 0px 40px 0px;  display: flex; flex-wrap: wrap;  }
.cms-main-icon-list{ width: 100%;   padding:0px;  display: flex; flex-wrap: wrap; } 
.cms-main-icon-list li{  display: flex; flex-wrap: wrap;flex-direction: column;  justify-content: center; width: calc(100%/4 - 40px); margin: 0px 20px; padding: 10px 0px; list-style: none;  transition: all 0.5s ease 0s;  border-radius:15px; box-shadow: 0px 3px 15px 0px rgb(162 162 162 / 25%);  background-color:transparent;position: relative;  }
.cms-main-icon-list li:hover{  transform: scale(1.1);  box-shadow: 0 4px 4px rgb(0 0 0 / 25%);  }
.cms-main-icon-list li:before{ content: "";  width: 40px; height: 40px; position: absolute; right: 0px; bottom: 0px; border-radius:50px 0px 15px 0px; background-color: transparent;  }
.cms-main-icon-list li:nth-child(1):before{background-color: #e5d7c6;}
.cms-main-icon-list li:nth-child(2):before{background-color: #ced2bb;}
.cms-main-icon-list li:nth-child(3):before{background-color: #dad2c9;}
.cms-main-icon-list li:nth-child(4):before{background-color: #dfe2d1;}
 #cms-main .cms-main-icon-list li h4{ display: block; width: 80%; margin:5px 0; font-size:1rem; font-weight:500;  color:#000; text-align: center; position: relative;z-index: 1; }
.cms-main-icon-wrap i { display: block; width:200px; height:160px;  margin:-30% auto auto auto; position: relative; background-repeat: no-repeat;    }
.icon-all{display: block; margin: auto; }
.icon-1{background: url("../images/index/dot-1.png"); background-position: center top; background-size: 150px auto;  }
.icon-2{background: url("../images/index/dot-2.png"); background-position: center 0px; background-size: 150px auto;}
.icon-3{background: url("../images/index/dot-3.png"); background-position: center 0px; background-size: 150px auto; }
.icon-4{background: url("../images/index/dot-4.png"); background-position: center 0px; background-size: 150px auto;}

@media (max-width: 767.98px) {
.cms-main-icon-wrap{  padding:30px 10px 0px 10px; }   
.cms-main-icon-list li{  width: calc(100%/2 - 40px); margin:20px;  }
.cms-main-icon-wrap i {  width:125px; height:100px;  margin-top: -20%;  }
.icon-1,.icon-2,.icon-3,.icon-4{  background-size: 125px auto;  }
   
}

 
 /*cms-Title Styles 樣式
=================================*/
.cms-title { width:100%; height: auto; margin:0 auto 2% auto;  padding: 0px; display: flex; justify-content: center; align-items: center;  flex-wrap: wrap; flex-direction:column; background: none;}
.cms-title h1{ margin:0 auto;padding: 20px 0px; display: block; font-size: 2.75rem; font-weight: 400; color:#000; }
.cms-title h2{ margin:0px auto; display: block; font-size: 1.063rem;  font-weight: 700; color: #e9494a; }
.cms-title h3{ margin:15px auto;color:#000;}
.cms-title p{ margin:0px auto; font-size: 1rem; color: #7a818c; }
.cms-title img{ margin-bottom: 15px;}
@media (max-width: 991.98px) {
 .cms-title h3{  font-size: 1.875rem;  }
 }
@media (max-width: 767.98px) {
#cms-main .cms-title h1{  font-size:1.75rem;  }
 } 


.cms-title-2 { width:100%; height: auto; margin:0 auto 2% auto;  padding-top: 0px;  padding-bottom: 0;  display: flex; justify-content: center; align-items: center;  flex-wrap: wrap; flex-direction:column; background: none;}
.cms-title-2 i.title-logo {display: block; margin: auto; width: 150px; height:78px; background:url(../images/index/smaile.svg) no-repeat left top;}
.cms-title-2 h2{ margin:0 auto;padding: 20px 0px; width: 100%;  font-size:2.5rem; font-weight: 400;text-align: center;  position: relative; z-index: 1;   }
#cms-main .cms-title-2 h3{ margin:0px; font-weight: 700; font-size:1.063rem;  color:#e9494a;}
#cms-main .cms-title-2 p{ margin:0px; font-size:1rem;  color:#6c7280;  }
@media (max-width: 767.98px) {
.cms-title-2 i.title-logo { width: 115px; height:60px; }
.cms-title-2 h2{  font-size:1.875rem;  margin: 0px auto; padding:10px 0px; }    
.cms-title-2 h3{  font-size: 1.875rem;  }  
}
  

.cms-title-3 { width:100%; max-width: 1200px; height: auto; margin:0 auto 2% auto;  padding: 0px;  display: flex; justify-content: center; align-items: center;  flex-wrap: wrap; flex-direction:column; background: none; position: relative;}


.cms-title-3:before,.cms-title-3:after {content: '';background:#e9494a;height:2px; width:30%; position: absolute; transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);}

.cms-title-3:before{ left:0px;}
.cms-title-3:after{right: 0px;}

.cms-title-3 h2{ margin:0 auto;padding: 20px 0px; width: 100%;  font-size:2.75rem; font-weight: 400;text-align: center;  position: relative; z-index: 1;   }
#cms-main .cms-title-3 h3{ margin:0px; font-weight: 700; font-size:1.063rem;  color:#e9494a;}
#cms-main .cms-title-3 p{ margin:0px; font-size:1rem;  color:#6c7280;  }
@media (max-width: 767.98px) {
 .cms-title-3 h2 {  font-size: 1.875rem; padding: 30px 0px 10px 0px; }  
 .cms-title-3:before{ left:10px;}
.cms-title-3:after{right: 10px;}  
}
  



 
/*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 =================================*/ 
.cms-next-button {  width: auto; height: 35px; padding: 20px 50px; position: relative; display: -webkit-box;  display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: space-between; cursor: pointer;  border-radius:30px; background-color:#e9494a; transition: all 0.3s ease; }
 .cms-next-button:hover{ background:#bfa3a3; box-shadow: 0px 5px 5px rgba(191,163,163,.3); }
.cms-next-button:hover .cms-icon-wrap{ transform:translate3d(30px, 0px, 0px)}
.cms-next-button-txt { font-size: 16px; font-weight: 400; line-height: 1.5;  color: #fff;  -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}

.cms-icon-wrap{ display: flex;flex-wrap: wrap; position: relative; transition: all 0.3s ease; }
.cms-next-button-circle { width: 30px; height: 30px;  position: relative; display: block; margin-left: 50px; border:2px solid #fff;  border-radius: 50%;  -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
 .cms-next-button i { font-size: 1.75rem; color: #fff;  position: absolute; top:-4px; right: 5px; margin: 5px auto ; -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}



@media (max-width:767.98px) {
.cms-next-button { width: auto; height: 24px }
.cms-next-button-txt { font-size: 14px; line-height: normal; letter-spacing: normal }
.cms-next-button-circle { width: 24px; height: 24px;  }
.cms-next-button i { font-size: 1.35rem;   top:-4px; right: 5px; margin: 5px auto ;}  
    
}
 



 
/*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;}