/*----------------------------------------/
牡丹有店總覽頁 
----------------------------------------*/
.product-cate{ width:100%; margin:0px auto;  padding:20px;   }
.product-cate li { width: 100%; margin:30px auto 60px auto; padding:0px;   list-style: none; transition: all 0.3s linear 0s;}
.product-cate li .product-pic {  display: flex; width:50%; height: auto;   overflow: hidden; transition: all 0.5s ease 0s; z-index: 0; }
.product-cate li figure img { max-width:100%; height: auto; object-fit: cover; margin: auto; display: block; overflow: hidden; border-radius:0px;   transition: all 0.5s ease-in-out;}
.product-cate li figure  { width:100%;padding-bottom: 67.5%; height: 0; overflow: hidden; background: #eee; position: relative;  z-index: 1; transition: all 0.5s ease 0s; transition: all 0.5s ease-in-out;}
.product-cate li:hover figure img { opacity:1;  transform: scale(1.1); background:#e84a75  }
.product-cate  li .item-wrap{ width:100%;margin: auto;padding: 0px;  display: flex; flex-wrap: wrap; justify-content: center; }
.product-cate li:nth-child(even) .item-wrap{ flex-direction: row-reverse;    }
.product-cate li:nth-child(even){ flex-direction: row-reverse;    }
.product-cate li:nth-child(even) .product-note { width:60px; height:30px; left:auto;right: 0px!important;}
.product-cate li .product-inner{width: 50%; padding: 20px 80px; margin: 0px ; display: flex; flex-wrap: wrap; flex-direction: column; align-self: center;  transition: all 0.3s linear 0s;z-index: 1; } 
.product-cate li .product-inner p{  margin: 10px 0px; font-size: 1.063rem;  font-size: min(max(3vw, .875rem), 1.063rem);     line-height: 1.875rem; font-weight: 400; color:#767676;  overflow: hidden; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;} 
.product-cate li .product-inner p a{color: #333;}
.product-cate li:hover .product-inner p a  { color:#e84a75;} 
.product-cate li .item{ display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-bottom: 20px;}
.product-cate li .item i { display:flex;  margin:20px 10px; width:46px; height:46px; }
.product-cate li .item i img{ -webkit-filter:invert(1); }
.product-cate li .item-title{ display: flex; width: calc(100% - 66px);}
.product-cate li .item h3 {   padding-bottom: 0px;margin: 0px; font-size:1.75rem;font-size: min(max(3vw, 1.25rem), 1.75rem); font-weight:700;letter-spacing:2px; color:#000; 
overflow: hidden; word-break:normal;  word-wrap:break-word;text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}
.product-cate li .product-note { position: relative;  padding: 5px;  width: 100px; height:30px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center;  font-size:0.875rem; text-align: left; line-height: 1.5em; text-shadow:none; z-index: 11;    }
.product-note.product-note-sale {  color: #fff; background:#cc3333; }
.product-note.product-note-stock { color: #fff; background:#e84a75; }
@media (max-width: 840px) {
.product-cate{padding:20px 0px; }
.product-cate li .product-inner{padding: 20px 30px;}   
}
@media (max-width: 767.98px) {
.product-cate{ width:100%; margin:0px auto;  padding:20px 0px;  }
.product-cate li { width:100%; margin:30px auto; padding:0px;  }
.product-cate li .product-pic { width:100%;   }
.product-cate li .product-inner{width: 100%; padding:0px; margin: 0px ;   } 
.product-cate li .product-inner p{  margin:5px 0px;  line-height: 1.5rem; } 
.product-cate li .item{  margin-bottom: 10px;}
.product-cate li .item i { margin:20px 5px; width:36px; height:36px; }
.product-cate li .item-title{ display: flex; width: calc(100% - 46px);}
}


/*牡丹有店清單頁*/
.title-block { width: 80%; padding-top: 40px; justify-content: flex-start;}
.title-block h2{ margin:0px 15px;   font-weight: 700;color: #000;  }
.title-block p {width: 100%; margin:15px;  }
.con p{ font-size:0.9rem; color:#404040;  }
.con p strong{ font-size:1.125rem;   }  
.con p a{  color:#404040;  }
.con { width: 100%; height: auto;  padding:0px 0px 155px 0px;  position: relative; display: flex; flex-wrap: wrap;}

.con-wrap { position: relative; padding: 25px 40px; width: calc(100% - 20px); margin:10px;  } 
.stor-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;  position: relative; }
.stor-tag-category{ width: auto;max-width: 100%; height: 40px; font-size: 14px; font-weight: 400; line-height: 1.57; letter-spacing: normal; position: relative; padding:10px; margin: 0px; color: #fff; background:#7e787a; -webkit-transition: background-color .2s,color .2s,border-color .2s; transition: background-color .2s,color .2s,border-color .2s;}

.location { position: relative; padding: 25px; width: calc(100% - 50px); margin:30px auto;  display: flex; flex-wrap: wrap; align-content: center; align-items: center; }   
.location-img{ width: 50%;  display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; align-items: center; }

.location-img figure img { max-width:100%; height: auto; object-fit: cover; margin: auto; display: block; overflow: hidden; border-radius:0px;   transition: all 0.5s ease-in-out;}
.location-img figure  { width:100%;padding-bottom: 67.5%; height: 0; overflow: hidden; background: #eee; position: relative; z-index: 1; transition: all 0.5s ease 0s; transition: all 0.5s ease-in-out; background-color: aqua  }



.location-detail{ width:50%; display: flex; flex-wrap: wrap;  justify-content: space-between; padding:10px 50px; }
.w5{ width:50%; display: flex; flex-wrap: wrap;  padding:5px 0px; margin: auto; }
.w10{ width:100%;  padding:5px 0px; margin: auto; }
@media (max-width:920px) {
.location-detail{ width: 100%;  }

}

@media (max-width:820px) {
.con { width: 100%; max-width: 90%; margin: auto; }
.location {  padding: 0px 0px 10px 0px; width:100%; margin:30px auto;  }      
.location-img{ width: 100%; justify-content: center; }  
.location-img figure img{ width: 100%; margin: auto; border-radius:10px 10px 0px 0px;  }
.location-detail{ width: 100%; padding:30px;  }
}
@media (max-width:767.98px) {
 .location-detail{  padding:30px 0px;  }
   
}

.con-title { width: 100%;margin: 5px auto; padding-bottom: 15px; border-bottom:  solid 1px #000; position: relative;}
.con-title h3{ width: calc(100% - 140px); font-size:1.75rem; font-size: min(max(3vw, 1.25rem), 1.75rem); font-weight:700; letter-spacing: .5px; color:#2c2c2c;  overflow: hidden; word-break:normal;  word-wrap:break-word;text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}
 
.con-title .btn-right{position: absolute; width:140px; right: -20px;  top:-10px;}
.con-title strong{ display: block;  }
.con-title span{ display: block; font-size:1rem; font-weight:400;  }
.con-style {background: #fff; border-bottom:solid 1px rgba(0,0,0,.1); position: relative; }
@media (max-width: 768px) {
.con-title {  font-size:1.063rem; }
.location.con-style:before,.con-style:before{  display: none;  }   
}


@media (max-width: 767.98px) {
 .con-title h3{ width: 100%;  }
.con-title .btn-right{position: relative; width:100%; right: auto;  top:auto;}
}

















/*----------------------------------------/
清單頁  product-item  
----------------------------------------*/
.main-product { width: 100%; padding:50px 15px;  margin:0 auto; position: relative;  }
.product-item { width:100%; margin:0px auto;  padding:20px 60px; display: flex; flex-wrap: wrap; }
.product-item li { width: calc( 100%/3 - 60px); margin:50px 30px; padding:0px; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; border-color:transparent;position: relative; z-index: 1; list-style: none;  transition: all 0.3s linear 0s;}
.product-item li:hover { border: solid 1px #e84a75; box-shadow:0px 5px 8px rgba(0,0,0,.05);} 
.product-item li figure{ position: relative; width:100%; height: auto; margin-bottom:0px; overflow: hidden; background-color:transparent;  transition: all 0.5s ease 0s; }
.product-item li figure img {  width: 100%; max-width: 100%;  transition: all 0.3s;}
.product-item li figure:hover img { transform: scale(1.1);  opacity: 1; }
.product-item li .product-inner{width: 100%;margin: 0px; padding: 0px 20px 0px 20px; display: flex; flex-wrap: wrap; justify-content: center;  align-content: center; align-items: center; } 
.product-item li .product-inner p{ flex: 0 0 100%; min-height:56px; margin:5px 0px; padding: 0px;  font-size:0.9375rem; line-height: 1.5rem; font-weight:400; text-align: left; overflow: hidden; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;} 

.product-item li h3{flex: 0 0 100%; padding:20px 0px; margin:10px 0px;width: 100%; font-weight:700; font-size:1.063rem; line-height:1.75rem; text-align: left; color: #000; border-bottom:solid 1px #ccc;}
.product-item li h3 a{ color: #333; overflow: hidden; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.product-item li:hover h3 a, .product-item li:hover p{color:#e84a75; }
.product-item li .buy{ width: 44px; height: 44px;  display: flex; justify-content: center; align-content: center; align-items: center; background: #000; border-radius:99rem; transition: all 0.5s ease 0s; transform: scale(1); }
.product-item li .price{ width: 100%; margin: 10px auto; display: flex; flex-wrap: wrap; justify-content:center;  align-content:center;font-size:0.9rem;  font-weight: 400;  }
.product-item li .product-price{ margin:0px 10px; color:#e84a75; font-weight: 500; }
.product-item li .product-price-origin{ margin:0px 10px; color:#b5b5b5; text-decoration: line-through; }
.product-item li .product-note { position: absolute;top:0px; left: 0px; padding: 5px; width:60px; height:30px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center;  font-size:0.875rem; text-align: left; line-height: 1.5em; text-shadow:none; z-index: 11; }
.product-note.product-note-sale {  color: #fff; background:#cc3333; }
.product-note.product-note-stock { color: #fff; background:#e84a75; /*transform: rotate(5deg);*/}
@media only screen and (max-width:1200px){
.product-item {  padding:20px 60px; }
.product-item li h3{  padding:20px 0px; }
 }
@media (max-width: 1024px) {
.product-item {padding:20px; }
}

@media only screen and (max-width: 992px){
.product-item {padding:20px 0px; }
.product-item li {width: calc(100% /3 - 20px); margin:30px 10px; padding:0px; }
.product-item li h3{font-size: 1rem;line-height: 1.5rem; }  
.product-item li .main-product-inner{width: 100%;margin: 0px; padding: 0px 10px;   } 
.product-item li .main-product-inner p{  margin:5px 0px; padding: 0px;  } 
   
}
@media (max-width: 767.98px) {
.product-item li { width: calc(100% / 2 - 20px);  }
.product-item li:nth-child(3n){margin-right: auto;}
.product-item li:nth-child(2n){margin-right: 0;}
.product-item li .main-product-inner p{ font-size: 0.875rem; } 
   
}
 






.datatable{ width: 100%;}
.datatable tr{ width: 100%; border-bottom: solid 1px #f5f5f5;}
.datatable th{font-size: 0.9rem;  color: #000;text-align: center; }
.datatable td{font-size: .875rem; font-weight: 300; line-height: 1.125rem; color: #333;text-align: center; }



.bg-background { background-image: attr(src url); background-repeat: no-repeat; background-size: contain;background-position:center top; position: absolute;z-index: -1; top: -126px; left: 0; right: 0; bottom: 0; line-height: 0;  width: 100%;  }

.main-facility { width: 100%; padding:0px;position: relative; margin: 5% auto 0 auto;background-color: transparent;}
/*-----------牡丹有聚-----------------*/ 
.about-cate{ width:100%; margin: auto; padding:20px 40px; position: relative;  display: flex; flex-wrap: wrap;   }
.about-cate li{ width:calc(100%/2 - 20px); margin:0px 10px; padding:20px; display: flex; flex-wrap: wrap; justify-content: center; align-self: flex-start;  transition: all 0.5s ease 0s;   }
.about-cate li:nth-child(even) {  margin-top: 10%;   }
 
.about-cate figure img { max-width:100%; height: auto; object-fit: cover; margin: auto; display: block; overflow: hidden; border-radius:0px;   transition: all 0.5s ease-in-out;}
.about-cate figure  {width: 100%; padding-bottom: 66.66%; height: 0; overflow: hidden; position: relative;  z-index: 1; transition: all 0.5s ease 0s; transition: all 0.5s ease-in-out; background-color: antiquewhite}
.about-cate li:hover figure img { opacity:1;  transform: scale(1.15); background:#e84a75  }

.about-title { width:100%; height: auto; margin:20px 0px 50px 0px;padding: 0px;  position: relative; }
.about-title:after{  content: ""; position: absolute; right:0px; bottom: 0px;width:60%; height:2px; background:#e84a75;  } 
.about-title h3{ display: block;margin:5px 0px; padding:30px 0px 0px 70px; font-size:1.75rem; font-size: min(max(3vw, 1.5rem), 1.75rem); line-height:1.875rem; font-weight:700; color:#e84a75;  letter-spacing: 1px; position: relative;  }
.about-title-icon{  position: absolute;  left: 0px; top:10px; width:60px; height:60px;  background-image: attr(src url); background-repeat: no-repeat; background-size: contain; background-position:center top;  }
 

.about-title h4{  width: auto;  margin:0px;  font-size: 2rem; font-weight: 700;color: #c98f25; text-shadow: 0px 0px rgba(255,255,255,1); letter-spacing: 2px;}
.about-title span{ width: auto; margin:10px auto; font-size:1rem; letter-spacing:2px; font-weight:400; color: #333;   }
.about-title p{  width:100%;  margin:0px;  font-size:0.875rem; font-weight:700;  color:#c98f25; }
.about-cate .item{ width: 100%; padding:0px;position: relative;  }
.about-cate .about-inner{width: 100%; margin:auto; padding:20px 10px;  } 
.about-inner p{ font-size: 1rem; line-height: 1.75rem; font-weight: 500; color:#000;   word-break: break-all; overflow: hidden;white-space: pre-line;  word-wrap:break-word; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 6;  -webkit-box-orient: vertical;} 
.about-cate .about-inner a.cms-btn{margin-top: 30px;}
@media (max-width: 920px) {
.about-cate{ width:100%; margin: auto;padding:50px 0px 20px 0px; }
.about-title:after{  width:50%; }    
.about-title h3{ padding:30px 0px 0px 50px; }
 .about-title-icon{ width:50px; height:50px;    }
}
@media (max-width:840px) {
.about-cate li{ width:calc(100%/2 - 10px); margin:0px 5px; padding:20px 10px;   }
}


@media (max-width: 767.98px) {
.about-title { margin:20px 0px;  }
 .about-title:after{width:40%; }       
.about-cate .about-inner{ padding:20px 0px; } 
.about-cate li{ width:100%; margin:0px auto 30px auto; padding:0px;  }
.about-cate li:nth-child(even) { margin-top:0px;} 
 .about-title h3{ padding:30px 0px 0px 60px;   } 
}
@media (max-width: 320px) {
.about-title-icon{  top:20px;  width:40px; height:40px;    }
.about-title:after{ display: none }    

}

/*------------tour-cate -----------------*/
.tour{ padding:20px 0px; background-image: linear-gradient(to top,#f5f5f5 50%, #fff 100%);}
.tour-cate .slick-dots{ bottom: 50px;}
.tour-cate .slick-list{ padding-top:60px; }
.tour-cate{ width:100%; margin: auto; padding:0px; pointer-events: auto; }
.tour-cate li{ width:calc(100% - 10px); margin:0px auto; padding:10px 5px;   transition: all 0.5s ease 0s; transform: scale(0.85);  cursor: pointer; }
.tour-cate li.slick-current{ transform: translateY(-60px);transition: all 0.5s ease 0s;}

.tour-cate li figure{  width: 100%; padding-bottom: 100%; height: 0; overflow: hidden; position: relative;  z-index: 1; transition: all 0.5s ease 0s;  }
.tour-cate li figure img {max-height: 100%; transition: all 0.3s linear 0s;}

@media (max-width: 767.98px) {
.tour-cate li{ width:100%; margin:0px auto; padding:0px 5px;  }
}