/* CSS Document */
/** 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 { width: 100%; max-width: 1330px; padding-left: 15px; padding-right: 15px; margin: auto; }
@media (max-width:1440px) {
.wrapper { padding-right: 20px; padding-left: 20px; }
}
@media (max-width:1024px) {
.wrapper { padding-right: 30px; padding-left: 30px; }
}

@media (max-width:767.98px) {
.wrapper { padding-right: 20px; padding-left: 20px; }
}

@media (max-width:375px) {
.wrapper { padding-right: 10px; padding-left: 10px; }
}


@media (min-width: 1441px) {
.wrapper { padding-left: 0px; padding-right: 0px; margin: auto; }
}
 
.banner{width: 100%; max-width: 100%;height: auto; margin: 0px auto; padding:0px;  position: relative; }
.banner .slick-dots{ bottom: 20px}
.banner .slide { width: 100%; min-height:66vh;position: relative;}
@media (max-width:1180px) {
.banner .slide {min-height: 56vh; }
.banner .slick-dots{ bottom: 20px}
}
@media (min-width: 1600px) {
.banner .slide { width: 100%;  min-height: 74vh; display: block; position: relative;}
}
.banner .slide .slide-img { width: 100%; height: auto;  overflow: hidden;  position:relative; transform: translateY(-5%); }
.banner .slide .slide-img img { width: 100%; height: auto;  opacity: 1 !important;  -webkit-animation-duration: 3s; animation-duration: 3s; transition: all 1s ease;}
.banner .slide .slide-content { width: 55%; position: absolute;top:38%;  left: 10%; transform: translate(-10%, -38%);}
.banner .slide .slide-content-headings { text-align: center; color: #fff; text-shadow: 0px 1px 2px rgba(0,0,0,.2);  }
.banner .slide .slide-content-headings strong{color: #fff;}
.banner .slide .slide-content-headings h2 { font-size: 3.15rem; font-weight:900; line-height:2.5rem; margin:30px 0; text-align: left;   }
.banner .slide .slide-content-headings h3 { font-size: 1.75rem; font-weight:900; line-height:2rem;   margin: 10px 0; text-align: left; }
.banner .slide .slide-content-headings p { font-size:1.5rem; font-weight:700; line-height:2rem; letter-spacing: -0.1px;  margin: 10px 0; text-align: left;  color: #fff;  }
@media (min-width: 1400px) {
.banner .slide .slide-content { max-width: 500px; top:42%;  left:15%; transform: translate(-15%, -42%);}
.banner .slide .slide-content-headings { transform: scale(1.2)}
}
@media (min-width: 1900px) {
.banner .slide .slide-content {  top:45%;  left:15%; transform: translate(-15%, -45%);}
.banner .slide .slide-content-headings { transform: scale(1.3)}
}
@media (max-width:840px) {
.banner .slide {min-height: 40vh; }
.banner .slide .slide-content { width: 90%;  top:45%;  left:30%; transform: translate(-30%, -75%);}
.banner .slide .slide-content-headings h2 { font-size: 3rem; line-height:3.75rem; margin-bottom: 20px; }
.banner .slide .slide-content-headings h3 { font-size: 2rem; line-height:2.5rem;}
.banner .slide .slide-content-headings p { font-size:1.5rem;  }
.banner .slick-dots{ display: none;}
}
@media (max-width:767.98px) {
.banner .slide .slide-content { top:45%;  left:30%; transform: translate(-30%, -65%);}
.banner .slide .slide-content-headings h2 { font-size: 1.75rem;   line-height:2.35rem; margin-bottom: 10px; }
.banner .slide .slide-content-headings h3 { font-size: 1.15rem;  line-height:1.5rem;   }
.banner .slide .slide-content-headings p { font-size:1rem;line-height: 1.35rem;  }
}
@media (min-width:768px) {
.banner .slide .slide-content-headings .animated { transition: all 0.5s ease;}
.banner .slider [data-animation-in] {opacity: 0;  -webkit-animation-duration: 1.5s; animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;}
.zoomInImage { -webkit-animation-name: zoomInImage; animation-name: zoomInImage;}    
}
/* /////////// IMAGE ZOOM /////////// */
@-webkit-keyframes zoomInImage {
from { transform: scale3d(1, 1, 1); }
to { transform: scale3d(1.1, 1.1, 1.1); }
}
@keyframes zoomInImage {
from { transform: scale3d(1, 1, 1); }
to { transform: scale3d(1.1, 1.1, 1.1); }
}

@-webkit-keyframes zoomOutImage {
from { transform: scale3d(1.1, 1.1, 1.1); }
to {transform: scale3d(1, 1, 1); }
}
@keyframes zoomOutImage {
from { transform: scale3d(1.1, 1.1, 1.1); }
to { transform: scale3d(1, 1, 1); }
}
.zoomOutImage { -webkit-animation-name: zoomOutImage; animation-name: zoomOutImage;}
.main-wrap{ width: 100%; margin: auto; height: auto;  display: flex; flex-wrap: wrap;  position: relative;  }
 /*Special 
================================= */
.main-special {position: relative; margin:0; padding:50px 0px 20px 0px; width: 100%;  display: flex; flex-wrap: wrap; background:#f5f5f5;  }
.main-special-card {width: 100%; -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; margin:0px; padding:0px; display: flex; flex-wrap: wrap; position: relative; }
.main-special-card .item{ width: 100%; max-width: 100%; margin:15px;   padding: 0px; height: auto; position: relative;  transition: all 0.3s;   }
.main-special-card .item.slick-current{  transform: translate3d(0px, -10px, 0px);  transition: all 0.3s; opacity: 1; }
.main-special-card .slick-dots{bottom:60px;right: 30px; width: auto;}
.main-special-card .slick-prev{ top:60%; left:0;z-index: 1; }
.main-special-card .slick-next{top:60%; right:0;z-index: 1;  }
@media (max-width: 1199.98px) {
.main-special-item {width: 100%;   -ms-flex: 1 1 100%; flex: 1 1 100%;  padding:20px; }
.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;}
.main-special-item .main-txt{  margin:0px auto 2% auto; }
}
@media (max-width: 767.98px) {
.main-special-card .slick-prev{ top:100%!important; left:35%; }
.main-special-card .slick-next{ top:100%!important; right:35%; }
}
.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;  margin:0px; position: relative;  }
@media (max-width: 1200px) {
.main-product {  padding:20px 0px;  }
}
@media (max-width: 840px) {
.main-product {  padding:0px;  }
}
.product-item { width:100%; margin:0px auto;  padding:20px 0px; display: flex; flex-wrap: wrap;  }
.product-item li { width: calc( 100%  - 20px); margin:10px; padding:0px;  position: relative; z-index: 1; list-style: none;  transition: all 0.3s linear 0s;}
/* .product-item li a{display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start;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;}
.product-item li:hover figure img { transform: scale(1.05);  opacity: 0.6; }
.product-item li .item{width: 100%;margin:0px 0px 10px 0px;   } 
.product-item li .inner{width: 100%;margin:0px 0px 10px 0px;  } 
.product-item li .inner h3{ max-height: 55px; padding: 6px; margin: 0px; font-size: .9rem; line-height: 1.5rem; text-align: left;   color: #2c2c2c;overflow: hidden; word-break: break-all; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.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: 1rem; font-weight: 400; font-family: 'Oswald', sans-serif;}
.product-item li .product-price{ margin:0px;  color:#b3292c; }
.product-item li .product-price-origin{ margin:0px; color:#c9c9c9; text-decoration: line-through; }
.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; }
.main-product-note.main-product-note-sale {  color: #fff; background:#cc3333; }
.main-product-note.main-product-note-stock { color: #fff; background:#3ea527; }



.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%;  }
@media (max-width: 767.98px) {
.product-item {padding:0px; margin: 0px; }    
.product-item li { width:100%; margin:10px; padding:0px;  position: relative; z-index: 1; list-style: none;  transition: all 0.3s linear 0s;}
.product-item .slick-prev { left:calc(50% - 36px);  }
.product-item .slick-next { right:calc(50% - 36px);   }
}

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

/*Recommend */
.recommend{width: 100%; padding:50px 0px 50px 180px;  margin:0px;  display: flex; flex-wrap: wrap;}
.recommend-title{width:20%; margin-right: 5%; display: flex; flex-wrap: wrap; flex-direction: column; position: relative;} 
.recommend-box{width:75%; } 
@media (max-width: 1440px) {
.recommend{ max-width: 1330px; padding:20px 0px 50px 20px; margin: auto; }
.recommend-title{width:23%; margin-right:2%; } 
}
@media (max-width: 1024px) {
.recommend{ padding:60px 0px 50px 60px; margin: auto; }
}
@media (max-width: 840px) {
.recommend{ padding:60px 0px 50px 20px;  }
}
@media (max-width: 767.98px) {
.recommend{ padding:60px 0px 50px 0px;  }   
.recommend-title{width:100%; margin:auto;padding: 0px 20px 0px 20px; } 
.recommend-box{width:100%; } 
}

#recommend.product-item{padding-top: 100px;}
#recommend.product-item .slick-current { transform: translateY(-20px); transition: all 0.3s linear 0s; z-index: 9; }	
#recommend.product-item .slick-current figure { box-shadow: 0px 5px 5px rgba(0,0,0,.2); transition: all 0.3s linear 0s;}
#recommend.product-item li { width: calc( 100%  - 20px); margin:10px; transform: scale(.9); transition: all 0.3s linear 0s;}
#recommend.product-item li .inner h3{ font-size:1.5rem; line-height:1.75rem; font-weight:700;   }
@media (max-width: 767.98px) {
 #recommend.product-item{padding-top:20px;}
 #recommend.product-item li .inner h3{ font-size:1.15rem;  }  
}
 
/*bg-style */
.bg-coffe{background: url("../images/index/bg-1.jpg") no-repeat right bottom; }
.bg-brwon{ background-color:#edece6;}
.bg-bk{ background-color:#000;}
@media (max-width: 1280px) {
.bg-coffe{  background: none;}
}

/*news */
.news-wrap{width: 100%; margin: 0px; padding: 0px; }
.news-block{ width:50%; padding:0px; margin: 0px; }
.news{ width:100%; max-width: 80%; padding:50px; margin: auto; display: flex;flex-wrap: wrap;  flex-direction: column; }
.news-block.bg-bk figure{ width:100%;  display: flex;flex-wrap: wrap; }
.news-block.bg-bk figure img{ width:100%; height: auto;   }

@media (max-width: 1280px) {
.news{  max-width:100%; padding:20px 40px; }
}

@media (max-width: 840px) {
.news-block.bg-bk{ width:30%;}
.news-block.bg-brwon{ width:70%;}
}

@media (max-width:767.98px) {
.news{ padding:20px; }
.news-block.bg-bk{ display: none;}
.news-block.bg-brwon{ width:100%;}
}



a.new-tag-tcategory{ color:#c19963;  }
a.new-tag-tcategory:hover{ color: #fff;  }
.new-tag-tcategory{ width: auto;max-width: 100%; font-size: 14px; font-weight: 400; letter-spacing: normal; position: relative; padding:5px 10px; margin: 0px;   color:#c19963; border: solid 1px #c19963;-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:#2c2c2c;  }

.news-list {width: 100%;  margin: 10px auto;  padding:0px;  position: relative; z-index: 1; }
.news-list li{ width: 100%; padding:0px 10px;  margin:10px 0px;  display: flex; flex-wrap: wrap;  list-style: none; word-wrap: break-word;   transition: all 0.5s ease 0s;  border-bottom: solid 1px #2c2c2c;}
.news-list li:hover{opacity: .5; }
.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;  }
.news-list .wrap { display: -ms-flexbox; display: flex; flex-wrap: wrap;justify-content: space-between; align-items: center;  width: 100%; margin: 0;}
.news-list .wrap .inner{width: calc(100% - 100px); padding: 10px;  }
.news-list .wrap .inner-btn{width: 100px;}
.news-list h3 { width: 100%; margin:10px 0px;  padding: 0px; font-size: 1.15rem; line-height: 2rem; font-weight: 700; letter-spacing: 1px; color:#2c2c2c; overflow: hidden; word-break:break-all;  word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 3; -webkit-box-orient: vertical;  }

.news-list p { width: 100%; margin: 0px;  padding: 0px; font-size: 0.9375rem; line-height: 1.5rem; color:#404040; overflow: hidden; word-break:break-all;  word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 3; -webkit-box-orient: vertical;  }
.news-list .date{  font-size:.9rem;   padding: 0px;    color:#8b8b8b; }
.news-list .slick-next {right: 5px;}
.news-list .slick-prev {left: 5px; z-index: 99;}
.news-list li:last-child{border-bottom: none;}

@media (max-width:767.98px) {
.news-list .wrap .inner{width: calc(100% - 50px); padding: 10px;  }
.news-list .wrap .inner-btn{width: 50px;}

}


 /*main-about
=================================*/
.main-about{ position: relative; margin:0px; padding:50px 0px; display: flex; flex-wrap: wrap;justify-content: space-between;   }
@media (max-width: 1280px) {
 .main-about{  padding:20px 0px;   }
   
}
.main-about .animated {  -webkit-animation-duration: 1.5s; animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;}
.block {width:50%; height: auto;  margin: 0; padding:0px;  display: flex; flex-wrap: wrap;  position: relative;z-index: 1 }
.block figure{ width:100%; margin: 0px; padding: 0px; display: block; }
.block figure img{ width:100%; height: auto; display: block;  }
.block-txt{width:100%; max-width:70%;  margin:60px auto; padding:0px 20px ; display: flex; flex-wrap: wrap; align-self: flex-start; position: relative; z-index: 1;}
.block p { width: 100%; font-size:1rem;  line-height:1.875rem; font-weight: 400;  padding:5px; margin-bottom:30px;  color:#8f929e;   }
.block 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: #8f929e; }
.card-1{ width: calc(40% - 50px);  padding:20% 25px 0px 25px;  position: relative;}
.card-2{ width: calc(60% - 50px);  padding: 15px 25px;  position: relative;}

.block-box{ width: 80%;bottom: 0px;left:0px;  position: absolute; z-index: 9; }
.post-btn{  margin-left:62.5%; }
 

@media (max-width: 1180px) {
.block-txt{  max-width:100%;  margin:60px auto; padding:0px 40px;  }
.card-1{ width: 40%;  padding:20% 0px 0px 20px;  position: relative;}
.card-2{ width: 60%;  padding: 15px 0px 15px 30px; position: relative;}
 }
 
@media (max-width:840px) {
.main-about{ padding:40px 0px;background-size: 100% auto; background-position:0px top;}
.block-txt{ margin:20px 0px; padding: 0px 20px 0px 40px;}   
}
@media (max-width:768px) {
.block {width:100%;  }
.block p {  margin-bottom:15px;  }
}
@media (max-width:320px) {
 .block-txt{ margin:20px 0px; padding: 0px 20px}   
}
 
.store-wrap{width: 100%; margin: 0px; padding:0px 0px 40px 0px;position: relative; z-index: 2; }
.store-wrap:after{content: ""; width: 100%; height: 70vh; left:0px; bottom:0px; position: absolute;z-index: 0; background: #f6f5f1;}
.store-block{ width:50%; padding:0px 50px; display: flex;flex-wrap: wrap;  align-items: center;position: relative;z-index: 1 }
@media (max-width: 1200px) {
.store-block{  padding:0px;  }
 }

@media (max-width:767.98px) {
.store-block{ width:100%; padding:0px 20px;  }
 }
.store{ width:100%; max-width: 80%; padding:50px; margin: auto; display: flex;flex-wrap: wrap;  flex-direction: column; }
.store-txt{ font-size: 4rem; font-weight: 700; color:#c19963; position: absolute; left: -25%; opacity: .1 }
 @media (max-width: 1280px) {
 .store-txt{  left: -2%;  }
 }
 @media (max-width: 840px) {
.store-txt{ font-size: 2.75rem;}
   
}
 @media (max-width: 767.98px) {
 .store-wrap:after{ width: 100%; height: 100vh; }
    
}
.store-list{ width:100%; margin:0px auto;  padding:20px 0px; display: flex; flex-wrap: wrap;   }
.store-list li { width: calc( 100%/2  - 40px); margin:10px 20px; padding:0px;  position: relative; z-index: 1; list-style: none;  transition: all 0.3s linear 0s;}
.store-list li figure { position: relative; width:100%;max-width: 90%; height: auto; margin-bottom: 15px; overflow: hidden;  transition: all 0.5s ease 0s; }
.store-list li figure img {  width: 100%; max-width: 100%;  transition: all 0.3s;}
.store-list li figure{  width: 100%; padding-bottom: 100%; height: 0; overflow: hidden; position: relative;  z-index: 1; transition: all 0.5s ease 0s;}
.store-list  li:hover figure img { transform: scale(1.05);  opacity: 0.6; }
.store-list li .item{width: 100%;margin:0px 20px;   } 
.store-list li .inner{width: 100%;margin:0px 0px 10px 0px;  } 
.store-list li h3{ font-size: 1.75rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 10px;}
.store-list li p{ font-size: 1rem; font-weight: 700; color:#8f929e;}
.store-list li:nth-child(1){ margin-top: 100px;}

@media (max-width: 840px) {
.store-list{ padding: 0px;  }
}
 @media (max-width: 767.98px) {
.store-list li { width: calc( 100%/2  - 0px); margin:10px 0px; padding:0px;  }
.store-list li .item{ margin:0px 10px;}  
.store-list li h3{ font-size: 1.5rem; }
}

 /*cms-Title Styles 樣式
=================================*/
.title { width: 100%;  margin: 30px 0px ;  display: flex; flex-wrap: wrap; flex-direction: column; position: relative; }
.title:after { content: "";width: 70%;height: 2px; margin: auto;display: block; background: #2c2c2c; bottom: 50%; right: 0px; position: absolute;  }

.title h2{margin:0px; font-size:2.5rem;  font-weight:700; color: #2c2c2c;letter-spacing: 3px; }
.title h3{margin:0px; font-size:2rem; font-weight:700;color:#2c2c2c;}
.title h3 strong{ color:#2c2c2c;font-weight:700; }
.title p{ margin:0px; font-size:1.063rem;font-weight:400;  }

@media (max-width: 991.98px) {
.title h2{  font-size:2rem;  }
.title h3{  font-size: 1.875rem;  }
}
@media (max-width: 767.98px) {
.title h1, .title h2{  font-size:1.75rem;  }
.title h3{  font-size: 1.5rem;  }
.title:after { display: none; }
} 


.title-2 { width: 100%;  margin: 30px 0px ;  display: flex; flex-wrap: wrap; flex-direction: column; position: relative; }
.title-2 h2{margin:0px; font-size:2.5rem;  font-weight:700; color: #2c2c2c;letter-spacing: 3px; }
.title-2 h3{margin:0px; font-size:2rem; font-weight:700;color:#2c2c2c;}
.title-2 h3 strong{ color:#2c2c2c;font-weight:700; }
.title-2 p{ margin:0px; font-size:1.063rem;font-weight:400;  }
@media (max-width: 991.98px) {
.title-2 h2{  font-size:2rem;  }
.title-2 h3{  font-size: 1.75rem;  }
}
@media (max-width: 768px) {
.title-2 h1, .title-2 h2{  font-size:1.75rem;  }
.title-2 h3{  font-size: 1.5rem;  }
} 
@media (max-width: 767.98px) {
.title-2 {margin: 30px auto; }   
}
.title-txt{margin: 20px 0px 60px 0px;color:#8f929e; font-weight: 400;  }
@media (max-width: 767.98px) {
.title-txt{margin: 0px; }   
}
.title-3 {margin: 30px 0px;  display: flex; flex-wrap: wrap; flex-direction: column;  position: relative; font-size: 1.75rem; font-weight: 500; letter-spacing: 3px; }
.title-name{width:100%; color:#2c2c2c; font-size: 3rem; font-weight: 700; }
.title-name-sub{width:100%;  color: #2c2c2c; font-size: 1.75rem;  font-weight: 500; }
.title-name-txt{width:100%;margin-top:20px; max-width: 80%;  }
.title-name-txt p { font-size:1rem;  line-height:1.875rem; font-weight: 400;  padding:5px; margin-bottom: 50px;  /*color:#8f929e; */  }
@media (max-width: 1280px) {
.title-name-txt{ max-width: 100%;  }
}

@media (max-width:840px) {
.title-3 { font-size: 1.5rem;   }
}
@media (max-width:768px) {
.title-3 { font-size: 1.35rem;   }
.title-name-txt p { margin-bottom: 0px;  }

}



.title-4 {  margin:100px 0px 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:3.2rem; font-weight:700;color:#2c2c2c;letter-spacing: 3px; position: relative;   }
.title-4 h2{margin:0px;  font-size:2rem;  font-weight:700;color:#2c2c2c;letter-spacing: 3px;}
@media (max-width:840px) {
.title-4 h1{ font-size:3rem; }
}
@media (max-width:767.98px) {
.title-4 {  margin:30px 0px; }
.title-4 h1{ font-size:2rem; }
}
 
 /*----------------------------------------/
產品總覽頁Product
----------------------------------------*/
.product-wrap{ width: 100%; margin: 0px auto; padding:50px 0px; /* background:#f7fbf5; */}
 @media (max-width:1200px) {
.product-wrap{padding: 0px 0px 40px 0px}
}
 @media (max-width:767.98px) {
.product-wrap .wrapper { padding-right: 0px; padding-left: 0px; }
}
 
.main-box{ width: 100%; max-width: 1160px; margin:10% auto;}
.grid-row {width: 100%; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; justify-content: space-between; position: relative; margin-bottom: 25px; }
.grid-item { -webkit-box-flex: 0;  -ms-flex-positive: 0; flex-grow: 0; width: 100%; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding: 15px;  position: relative;  }

@media (max-width:1440px) {
.main-box{ margin:3% auto; padding: 0px;}
}

@media (max-width:1360px) {
.main-box{ margin:0px auto; }
.grid-item { padding: 10px; }

}
@media (max-width:767.98px) {
.grid-row { margin-bottom: 5px;  }
.grid-item { padding:3px; }
 }
@media (max-width:320px) {
.grid-item { padding:3px 2px; }
 }  
 
 

/*---------------*/
/***** Bubba *****/
/*---------------*/
figure.effect-bubba { width: 100%; height:auto; background:#2c2c2c; }
figure.effect-bubba img {opacity: 1; -webkit-transition: opacity 0.35s; transition: opacity 0.35s;  background:#2c2c2c;}
figure.effect-bubba:hover img {opacity: 0.85;}
figure.effect-bubba figcaption::before,figure.effect-bubba figcaption::after { position: absolute; top:20px; right:20px; bottom: 0px; left: 20px; 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 { font-size: 2rem; font-weight: 700;  margin: -80px  auto 10px 25px;  color:#fff;-webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0);}
figure.effect-bubba h2::after { content: "";width:20%;height: 2px; margin: auto;display: block; background: #fff; bottom:-10px; left: 0px; position: absolute;  } 
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: .85; -webkit-transform: translate3d(0,-40px,0); transform: translate3d(0,-40px,0);} 
@media (max-width: 1200px) {
figure.effect-bubba h2 { font-size: 1.75rem;   }
}

@media (max-width: 767.98px) {
figure.effect-bubba h2 { font-size: 1.15rem;  margin: -30px auto 0px 15px;}
figure.effect-bubba figcaption::before,figure.effect-bubba figcaption::after { display: none}
}

/*btn-01  =================================*/ 
.btn-01 { cursor: pointer; width: 100%;  max-width: 220px; height: 3rem; line-height: 3rem; display: block; margin:40px 0px 0px 0px; position: relative; box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.34); background:#c09862; border-radius:0px; z-index: 1;  }
.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;}
.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;   }
.btn-01:before,.btn-01:after {content: '';background:#ccc;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: #2c2c2c;}
.btn-01:hover em{background: #2c2c2c; transform: scaleX(0.5);}

@media (max-width: 767.98px) {
.btn-01 { max-width: 180px; height: 2.5rem; line-height: 2.5rem;  margin:20px 0px 0px 0px;}
.btn-01:before,.btn-01:after {display: none;}
.btn-01:hover  {background:#ccc;  }
}

/* btn-more =================================*/ 
.btn-more{ width: 200px; max-height: 48px; display:flex; flex-wrap: wrap; align-items: center; justify-content: center;  padding: 10px; color: #fff;background:#c19963; 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;}
a.btn-more{color: #fff;}
a.btn-more:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0;  background:#ccc; border: solid 1px #c19963;  -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;}
a.btn-more:hover, a.btn-more:focus, a.btn-more:active { color: #2c2c2c;}
a.btn-more:hover:before, a.btn-more:focus:before, a.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);}
.btn-more em{  display: flex; width: 30px; height: 16px;margin-left: 10px; }
.btn-more em img{  -webkit-filter:invert(1);}
a.btn-more:hover em{ transform: translateX(10px)}

/* Bounce To Right */
.btn-circle{ width: 50px; height: 50px; border-radius:99rem;  display:flex; flex-wrap: wrap; align-items: center; justify-content: center;  padding: 10px; color: #fff;background: #c19963; 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; overflow: hidden;}

a.btn-circle:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0;  background:#2c2c2c;  border-radius:99rem;  -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;}
a.btn-circle:hover, a.btn-circle:focus, a.btn-circle:active { color: #2c2c2c;}
a.btn-circle:hover:before, a.btn-circle:focus:before, a.btn-circle: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);}
.btn-circle em{  display: flex; width:40px; height: 26px;margin-left: 0px; }
.btn-circle em img{  -webkit-filter:invert(1);}
a.btn-circle:hover em{ transform: translateX(10px)}


.btn-secondary { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; color:#6e6c6c; font-weight: 500; background:#fff; border:solid 1px #6e6c6c;border-radius:10px;   }
.btn-secondary:hover { color: #fff; background: #6e6c6c;; border-color:#6e6c6c;; }
/* btnbox ====*/
.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;     }

.amg_banner_wrap {position: relative; z-index: 10; height: 0; padding-bottom: 48.5%; overflow: hidden;}
.amg_banner_wrap > section {position: absolute!important; top: 0!important; left: 0!important; right: 0!important; bottom: 0!important;}
@media only screen and (max-width:768px){
 .amg_banner_wrap {padding-bottom: 123.06%;}
}