.wrapper { position: relative; display: block; margin:0px  auto;  width: 100%; padding:0px 30px;  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;}
}

@media (max-width:320px) {
.wrapper {padding:0px 20px; }
}
.banner{width: 100%; max-width: 100%;height: auto; margin: 0px auto; padding:0px;  }
.banner .slick-dots{ bottom: 20px}
.banner .slide { width: 100%; min-height:60vh;}
.banner .slide .slide-img { width: 100%; height: auto;  overflow: hidden;  position:relative; }
.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; }
}

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

.banner .slick-prev { left:0; }
.banner .slick-next { right:0px; }
.banner .slick-prev, .banner .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%;bottom:-30px; z-index:99; display: block; width:60px; height:60px; border-radius:99rem;  padding: 0; outline: none; background-color:#fff; border: none; }
.banner .slick-next { opacity: 1; background-image: url("../images/icon/arrow-right.svg") ; background-repeat: no-repeat; background-position: center; background-size:30%;}
.banner .slick-prev{ opacity: 1;background-image: url("../images/icon/arrow-left.svg") ; background-repeat: no-repeat; background-position: center;background-size:30%;}
.banner .slick-next:hover,.banner .slick-next:focus  {   background-image: url("../images/icon/arrow-right-b.svg") ;  }
.banner .slick-prev:hover,.banner .slick-prev:focus  { background-image: url("../images/icon/arrow-left-b.svg") ;  }
@media (max-width:767.98px) {
.banner .slick-prev, .banner .slick-next {   width:30px; height:30px; }	
}

 /* /////////// IMAGE ZOOM /////////// */
@-webkit-keyframes zoomInImage {
from { transform: scale3d(1, 1, 1); }
to { transform: scale3d(1.02, 1.02, 1.02); }
}
@keyframes zoomInImage {
from { transform: scale3d(1, 1, 1); }
to { transform: scale3d(1.02, 1.02, 1.02); }
}
.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{  position: relative } 
main::before{ content: ""; width: 100%; height: 300px; position: absolute; left:0px;bottom:0px; background: url("../images/index/footer.png") repeat-x left bottom; background-size:contain;}
.main-wrap{ width: 100%; margin: auto; height: auto;  display: flex; flex-wrap: wrap;  position: relative;  }
/**區塊 =================================*/
.notice{width: 100%; max-width: 960px; margin: auto; padding:20px 20px 100px 20px; display: flex; flex-wrap: nowrap;justify-content:space-between; align-items: flex-start;  }
.notice-item{ width:calc(100%/4); padding: 20px 15px;  }
.notice-switch{ margin: auto; display: flex; flex-wrap:wrap; justify-content: center ; flex-direction: column  }
.notice-icon{width: 80px; height: 80px; padding: 10px; margin: auto auto 10% auto; display: flex; flex-wrap:wrap; justify-content: center; align-items: center; border-radius:99rem;   background:#c30e24;}
.notice-icon i{width: 60px; height: 60px; padding:0px;display: block; margin: auto;}
.notice-txt p{ font-size: 1rem; font-weight: 700; color: #000; text-align: center;}
.notice-txt strong{width: 100%; font-size: 1.15rem; display: block; }
.notice-txt figure{width: 100%; max-width: 80px; height: auto; margin: auto}
@media (max-width: 1201px) {
.notice{ padding: 10px;}
.notice-txt{width:auto; }
}
@media (max-width:992px) {
.notice{height:auto; flex-wrap:wrap;  padding: 0px; }    
.notice-item{ width:calc(100%/2); padding:0px 15px;margin-bottom: 15px; }    
}
@media (max-width: 767.98px) {
.notice-txt p{ font-size:0.75rem; }
.notice-item{ width:calc(100%/2); padding:0px 5px;  }    	 
}

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


.mainArea { padding: 50px 0; background: url(../images/index/bg.jpg);    }

/*Recommend */
.recommend{width: 100%; padding:0px;  margin:100px 0px 50px 0px; position: relative;z-index: 2 }
.recommend:before{  content: "";width:30%;height: 278px; top: -150px;  left:0px;  position: absolute;  background: url("../images/index/line-w.png") no-repeat right top; background-size: auto;  z-index: 0; }
.recommend:after{  content: "";width:30%;height: 278px; bottom: -150px;  right:0px;  position: absolute;  background: url("../images/index/line-w.png") no-repeat left top; background-size: auto;  z-index: 1; }
 @media (max-width: 1199.98px) {
.recommend{background-size: auto 100%; }   
.recommend:before{ top: -200px; }
.recommend:after{ bottom: -250px;}	  
}
@media (max-width: 767.98px) {
 .recommend:after{ width:30%;height:168px; bottom: -100px;  background-size: auto 100%  }
 .recommend:before{ height:168px; background-size: auto 100%  }
}
.recommend-txt{ width: 40%; order: 2}
.recommend-box{ width: 60%; order: 1; position: relative;}
 @media (max-width: 1024px) {
.recommend-txt{ width: 35%; }
.recommend-box{ width: 65%; }
}
 @media (max-width: 767.98px) {
.recommend-txt{ width: 100%; }
.recommend-box{ width: 100%; }
}
.recommend-box:after{  content: "";width: 100%;height: 100%; top: 50px; left:250px; position: absolute;  background: url("../images/index/line-2.png") no-repeat center top; background-size: contain;  z-index: -1; }
.recommend-txt .title-v { width: 100%; padding: 50px 0; position: relative; z-index: 10;  writing-mode: tb-rl; font-family: "Noto Serif TC", serif; letter-spacing: 2.5px;  font-weight: 500;  color: #080808; line-height: 2; flex-direction: column; display: flex; justify-content: center;}

.title-v h2{margin-left: 30px; color:#c30d24; font-size:3rem; font-weight: 500; letter-spacing:20px; line-height: 1.5; position: relative; border-right: solid 1px #c30d24;border-left: solid 1px #c30d24}
.title-v h2::before{content: ""; width: 1px; height: 100%; position: absolute; right: -10px; top:0px; background-color: #c30d24}
.title-v h2::after{content: ""; width: 1px; height: 100%; position: absolute; left: -10px; top:0px; background-color: #c30d24}
.title-v h3{margin-left:10px; color:#000; font-size:2rem; font-weight: 700; letter-spacing:8px; line-height: 1.5; position: relative;  }
.title-v p{  color:#666; font-size:1.5rem; font-weight: 500; letter-spacing:2px; line-height: 1.5; position: relative;  }
 @media (max-width: 767.98px) {
.title-v h2{ font-size:2.5rem; }
.title-v h3{  font-size:1.875rem;  }
.title-v p{   font-size:1.125rem; }
}
@media (max-width:320px) {
.title-v h2{ font-size:1.875rem; }
.title-v h3{ font-size:1.275rem;  }
.title-v p{ font-size:1rem; }
}
/*------------video -----------------*/
.video-list { width: 100%;  margin: 0 auto; padding:20px; display: flex; flex-wrap: wrap;   }
.video-list li { width:100%; height: auto; margin:0px auto; position: relative; z-index: 1;  list-style: none;   transition: all 0.3s linear 0s; }
.video-list figure  {width: 100%; padding-bottom:56.375%; height: 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s ease-in-out;box-shadow: 5px 5px 5px rgba(0,0,0,.4); }
.video-list figure img { max-width:100%; height: auto; object-fit: contain; margin: auto; display: block;   transition: all 0.5s ease-in-out;}

 @media (max-width: 767.98px) {
.video-list { padding:0px;  }
 }


/* ------------ STATES ------------ */
.card-play { width: 76px; height: 76px; padding: 0px; position: absolute; z-index: 99;left: 50%;  top: 50%; transform: translate(-50%, -50%);border-radius:99rem;  margin: auto; opacity: .75; cursor: pointer; transition: opacity 0.3s ease-out;}
.card-play a{display: flex; flex-wrap: nowrap; align-items: center;}
.card-play em{ width:76px; height: 76px; display: inline-block; border-radius: 50%; background: url("../images/icon/play.svg") center center/cover; transition: all 0.5s ease-out;}

.video-list li:hover .card-play { opacity: 1; left: 50%;top: 45%; transform: translate(-50%, -45%); box-shadow: 5px 5px 5px rgba(0,0,0,.2); transition: all 0.5s ease-out; }
.video-list li:hover { transform: scale3d(1.01, 1.01, 1.01);  }
.video-list li:hover .item{ transform: scale3d(1.01, 1.01, 1.01); box-shadow: 2px 4px 16px #00000029;}
.video-list li:hover figure img { transform: scale(1.05);  opacity: 1; }


 
.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 15px;  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; border-radius:18px; 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;  transition: all 0.3s linear 0s;   } 
.product-item li .inner{width: 100%; margin:0px; padding: 10px 15px; } 
.product-item li .inner h3 a{   font-size:1.15rem; font-size: min(max(2vw, 0.9rem), 1.15rem); line-height:1.875rem; font-weight: 700; letter-spacing: 2px; text-align: left; 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; }
   
.product-item li .inner p{  margin: 0px; font-size:0.75rem; line-height:1.5rem; font-weight: 600; color:#7b7b7b; 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: 'Quicksand', sans-serif; }
.product-item li .product-price{ margin:0px;  color:#c30d25; 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:5px 0px; color:#7b7b7b; font-size:.75rem; font-weight:500;  }

.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:0.75rem;  text-align: left; line-height: 1rem; text-shadow:none; z-index: 11; }
.note.note-sale {  color: #fff; background:#000; }

.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:.75rem; text-align: left; line-height: 1.35rem; text-shadow:none; }
a:hover.tag-cate{  opacity:.85;  }
 
.tag-red{background:#c30e24; }
.tag-green{background:#7d2f39;}
.tag-purple{background:#604f9e}
.tag-brown{background:#b04422;}
 
.product-item .slick-dots {bottom:-30px;  }	
.product-item .slick-prev { left:calc(50% - 60px);  top:auto; bottom: -30px;}
.product-item .slick-next { right:calc(50% - 60px); top:auto; bottom: -30px; }

 @media (max-width: 768px) {
.product-item li { padding:10px 5px; }
 }

 @media (max-width: 767.98px) {
.product-item .slick-prev {  bottom: -20px;}
.product-item .slick-next { bottom: -20px; }
}
 @media only screen and (max-width:440px) {
 .product-item li .inner{ padding: 10px 10px; } 	 
.product-item li .price{ font-size:0.9rem; }
}
 @media only screen and (max-width:280px) {
.tag-cate-list { display: none }
.note { padding:2px 5px; }	 
	 }
/*news */
.news-wrap{width: 100%; margin: 0px auto; padding:80px 0px; position: relative; }
.news-wrap::before{content: ""; width: 20%; height: 500px; position: absolute; left:0px; bottom: 10vh; background: url("../images/index/fish-left.png") no-repeat left top; background-size: auto 100%;}
.news-wrap::after{content: ""; width: 20%; height: 400px; position: absolute; right:0px; bottom: 10vh; background: url("../images/index/fish-right.png") no-repeat right top; background-size: auto 100%;}
.news{ width:100%;  margin: auto; padding:30px 150px; position: relative;}
.news-list { width: 100%; margin: auto; padding: 0px; }
.news-list li {width:100%;  padding: 20px; margin:10px auto; list-style: none; border-radius: 30px; overflow: hidden; position: relative;}
.news-list .item { display: flex; flex-wrap: wrap; padding:0px; border: 1px solid #eeeeee; border-radius: 30px; position: relative;}
.news-list .news-pic { width: 100%;padding: 0 ; border-radius: 30px; position: relative; }
.news-list .news-box { width: calc(100% - 50px); padding:10px 20px; background-color: #f1e9d4; position: absolute; left:0px; bottom:0px;  z-index: 2;  border-radius:0px 30px 0px 0px; transition: all 0.5s ease-in-out;}
.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:30px;   transition: all 0.5s ease-in-out;}
.news-list .news-box .news-date { width: 100%; margin: 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 .bom {font-size: 12px; }
.news-list .news-box .news-inner {width: 100%;}
.news-list .news-box h3 a { min-height: 44px; font-weight: 700; font-size: 1rem;  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 }
.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;}
.news-list li:hover .news-box {background-color: #b71d26;}
.news-list li:hover .item  h3 a ,.news-list li:hover .item  p, .news-list li:hover .item .bom{color: #fff;}
.news-list li:hover  figure img { transform: scale(1.05);transition: all 0.5s ease-in-out;}

.news-list .slick-dots {bottom:-30px;  }	
.news-list .slick-prev { left:-30px; }
.news-list .slick-next { right:-30px; }

@media (max-width: 992px) {
.news-wrap{padding:0px; }
}
@media (max-width: 767.98px) {
.news{  padding:0px; }
.news-wrap::before{height: 300px;  bottom: 40vh; }
.news-wrap::after{height: 200px; bottom: 10vh; }
.news-list li { padding: 0px 20px; margin: auto; }
.news-list .news-box { width: calc(100% - 30px); padding:10px; }
.news-list .slick-prev { left:-20px; }
.news-list .slick-next { right:-20px; }
.news-list .news-box h3 a { min-height: 38px; font-size: 0.875rem;}	
 }

 /*main-about
=================================*/
.main-about{   margin:0px; padding:50px 0px;  }
@media (max-width: 1280px) {
.main-about{  padding:0px; }
}
.main-about .animated {  -webkit-animation-duration: 1.5s; animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;}
 
.block:nth-child(1){width:40%; height: auto;  margin: 0; padding:0px;  }
.block:nth-child(2){width:60%; height: auto;  margin: 0; padding:0px;  }
.block-txt{width:100%;  margin:60px auto; padding:0px 50px 0px 0px ; }
.block-txt .title{margin: 0px;}

.block p { width: 100%; font-size:1rem;  line-height:2rem; font-weight: 500;  padding:5px 0px; margin-bottom:10px;  color:#000;   }
.block .btn-01{margin:30px 0px;}
@media (max-width: 440px) {
.block-txt{ padding:0px; }	
}

.grid-row {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:20px; width: 100%; margin: 10% auto  }
.grid-row .grid-item {position: relative}
.grid-row .grid-item:nth-child(1){ }
.grid-row .grid-item:nth-child(2){margin-top: -20%}
.grid-row .grid-item:nth-child(3){margin-top: -45%}


.grid-switch{ width: calc(100% - 20px); height: auto;  margin-top: -140px; letter-spacing: 2px; padding:10px 0px 0px 20px; left:0px;  position: absolute; z-index: 2}
.grid-txt{width:100%; display: block;font-size: .9rem; font-weight: 500; color: #000;  }
.grid-txt strong{width:100%;margin-bottom: 10px; display: block;font-size:1.125rem; font-weight: 700; color: #c30e24;  }
@media (max-width: 992px) {
.block:nth-child(1),.block:nth-child(2){width:100%; height: auto;  margin: 0; padding:0px;  }
.block-txt .title{margin: 0px auto;}
.block-txt .title-4 h1{margin:0px auto 10px auto; text-align: center  }	
}
 @media (max-width: 767.98px) {
.grid-switch{ width: 100%;  padding:10px 0px 0px 10px; margin-top: -70px;  }	
.grid-row { grid-gap:10px;}
.grid-txt strong{ font-size:0.9rem; }
.grid-txt span{  display: none }
.block-txt .title-4 h1{font-size: 150%; }	
	 
}
 @media (max-width: 320px) {
.grid-switch{  margin-top: -50px;  }	
.grid-txt strong{ font-size:0.75rem; }
}

 @media (max-width: 280px) {
.grid-txt strong{ font-size:0.5rem; }
	 
}

.bg-left{ position:fixed; z-index:0;width: 10%; height: 30vh; left:0px; bottom:30vh;}
.bg-right{ position:fixed; z-index:0;width: 10%; height: 40vh; right:0px; bottom:10vh;}
 
 
 /*cms-Title Styles 樣式
=================================*/
.title { width: auto; max-width: 300px; margin: 30px auto; padding:0px;  display: flex; flex-wrap: wrap; flex-direction: column;  justify-content: center; position: relative;z-index: 1 }
.title:before { content: "";width:60px;height: 40px; margin: auto;display: block;  left:-44px; top:10px; position: absolute; background: url("../images/index/title.svg") no-repeat left top}
.title:after { content: "";width:300px;height: 16px; margin: auto;display: block;  background: url("../images/index/line-1.svg") no-repeat left bottom ; background-size: 180% auto;  bottom: 38%; left: -20px; position: absolute; z-index: -1; }
.title h2{margin:0px auto 15px auto; padding: 0px 20px; font-size:2.15rem;  font-weight:700; color: #b71d26;  letter-spacing: 3px; position: relative;}
.title h3{margin:10px auto; font-size:1rem; font-weight:600;color:#000; 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 h2{  font-size:1.75rem;  }
.title h3{  font-size: 1.25rem;  }
} 
@media (max-width:320px) {
.title h2{  font-size:1.375rem;  }
.title h3{  font-size: 1rem;  }
.title:before { width:50px;height: 30px; left:-18px;  top:6px; }
.title:after { bottom: 50%; left:0px;background-size: 150% auto; }
}
 .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:#c30e24;letter-spacing: 3px;}
 /*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; background:#c30e24;  z-index: 1;transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);  }
.btn-01 span { display: flex; margin: auto; padding:0px;text-transform: uppercase;letter-spacing: 3px; transform-origin: center left; transition: color 0.3s ease;position: relative;z-index:1; font-weight: 700;  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:#52040e;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;   }
.btn-01:after { bottom: 0; right: 0; left: auto; }
.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:#fff;}
.btn-01:hover em{background:#c30e24; transform: scaleX(0.5);}
.btn-01:hover i{background:#c30e24;  }
.btn-01:hover{box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.34); transform: translateY(-5%);  transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);  }
@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;     }