.cms-top.main-area{margin-top: 20px;}

 /*--分類new-tag --*/
 .new-tag { display: flex; flex-wrap: wrap; flex-direction: row; top:0px; right: 0px;  width: auto;padding: 0px 10px; font-size: 0.875rem; color: #fff; 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: absolute; }
.new-tag-01{ background:#222;}
.new-tag-02{background:#0582cc;}
.new-tag-03{background:#629e9e;}
 /*--分類小圖示icon--*/
.icon-tag{ display: block; width: 16px; height: 16px;margin-top:5px; margin-right:10px;  background: url("../images/icon/icon-tag.svg") no-repeat left top; }
/*--end分類new-tag --*/
/*-------------------*/
/***** blog *****/
/*------------------*/
.blog{ padding:20px 0px; }

.blog-list {width: 100%; max-width: 1400px; margin: 10px auto;  padding:10px; display: flex;  flex-wrap: wrap; position: relative; z-index: 1;  }
.blog-list li{  width: calc(100% / 2 - 20px);   margin:0px 10px; box-sizing: border-box;  list-style: none;  transition: all 0.5s ease 0s;  position: relative; padding:0px 34px;  }
.blog-list  li:nth-child(even){ margin-top: 90px;}
.blog-list li:hover{ }
.blog-list .news-box {position: relative;z-index: 1;  width: 100%; box-sizing: border-box;display: -ms-flexbox; display: flex; flex-wrap: wrap; align-content: center;  margin: 0;  padding:20px 0px; color: #4c4c4c; font-size: 14px; font-weight: 400; line-height: 1.8rem; letter-spacing: 0.5px; }

.blog-list li figure{  width: 100%; padding-bottom: 100%; height: 0; overflow: hidden; position: relative; background-color:#000;   transition: all 0.5s ease 0s;}
.blog-list figure img {transition: all 0.5s ease-in-out;}

.blog-list figure::before,.blog-list figure::after {  pointer-events: none; transition: all 0.5s ease-in-out;}
.blog-list figure::before { content: ""; position: absolute; left: 8px; top: 8px; z-index: 2; width: calc(100% - 16px); height: calc(100% - 16px); border: 1px solid #fff; transform: scale(0.95); opacity: 0;}
.blog-list figure::after { content: "More"; position: absolute; z-index: 99; left: 50%; top: 55%; transform: translate(-50%, -50%); padding:7px 43px; font-size: 12px; letter-spacing: 0.06em; color: #fff; opacity: 0; border: 1px solid #fff;}
.blog-list li:hover figure::before { transform: scale(1); opacity: 1; transition-delay: 0.2s;}
.blog-list li:hover figure::after { top: 50%; opacity: 1; transition-delay: 0.3s;}
.blog-list li:hover figure img { opacity: .7;}
.blog-list h3 {position: relative;width: 100%; height: 80px;  font-size:1.75rem;  line-height: 2.5rem; font-weight:700; letter-spacing: .18em;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; }
.blog-list  h3 a{ color:#000!important; }
.blog-list p { width: 100%; height: 76px; font-size: 1rem; line-height: 1.7142857143rem;  letter-spacing: .05em;color:#555; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word;}
.blog-list p a{ color:#000;   }
.blog-list .new-tag { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 12px;  padding-bottom: 12px; position: relative;}
.blog-list .new-tag a { font-size: 12px; color: #555; letter-spacing: 0.02em;}
.blog-list .new-tag a:hover { color: #df7475;}
.blog-list .new-tag a:not(:last-child)::after { content: "、";}
@media (max-width: 1199.98px) {
.blog-list li{  margin:0px 10px; }
}
@media (max-width:840px) {
.blog-list{margin: 0px; padding: 0px;}   
.blog-list li{ width: calc(100%/ 2 - 10px); padding:10px; margin:30px 5px;   }
}
@media (max-width:768px) {
.blog-list li{  margin:10px 5px;   }
.blog-list li:nth-child(even){ margin-top: auto;}
}
@media (max-width:767.98px) {
.blog-list li{ width: calc(100%/ 2 - 10px); padding:10px 5px; margin:10px 5px;  }
.blog-list h3 { height: 54px;  font-size:1rem; line-height: 1.7142857143rem;  }
.blog-list p {  font-size: .9rem; line-height: 1.7142857143rem;  }   
}

@media (max-width:320px) {
.blog-list li{ width: calc(100% - 10px); }
}


/* Sweep To Right effect */
.hvr-sweep-to-right { display: block;  }
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { color: #fff!important;}
 




.text-button { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.125rem; cursor: pointer; display: inline-block; color: currentColor;margin-top: 2.1875rem;  padding-left: 2.1875rem; position: relative; transition: padding 0.3s ease}
.text-button::before { content: ''; display: inline-block; position: absolute; left: 0; top: 50%; width: 1.5625rem; height: 0.0625rem; background: currentColor; vertical-align: middle; margin-right: 0.625rem; transition: padding 0.3s ease}
@media (hover: hover) {
.text-button:hover { color: currentColor; padding-left: 2.8125rem  }
.text-button:hover:before { width: 2.1875rem; color: currentColor  }
}



.product-arera{ padding:50px 0px 0px 0px;  width: 100%; display: flex; flex-wrap: wrap;    }
.product-arera .main-content {width:calc(100% - 300px);  padding-left:40px; position: relative;  padding:30px 60px; margin:0px auto 30px auto;  border-radius: 20px; background: #fff;  box-shadow: 0 0 30px hsla(0,0%,46.7%,.2); }
.bg{background-image: linear-gradient(to top, #fff 0%, #fbfdf6 90% ,#fff 100%);}
@media (min-width: 992px) and (max-width: 1199.98px) { 
.product-arera{  padding:0px;}
.product-arera .main-content {width:calc(100% - 240px);  padding-left:20px;  }
}
 @media (max-width: 992px) {
 .product-arera .main-content {width:100%;  padding:0px; box-shadow: none; }
}
@media (max-width: 767.98px) {
.product-arera{  padding:0px;}
.product-arera .main-content {width:100%;  padding:0px;}
}

.daily-body { margin: 1em 0}
@media (min-width:768px) {
.daily-body { margin: 0 0 2rem  }
}
@media (min-width:1200px) {
.daily-body {  margin:0em 0 2rem }
}
.daily-body .row {  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center}
.daily-body .col { margin: 1em 0}
@media (max-width:767px) {
.daily-body .col { -ms-flex-preferred-size: auto;  flex-basis: auto;  width: 100%  }
}
@media (min-width:768px) {
.daily-body .col {  margin: 1.5em 0  }
}
/*col1item*/
.daily-body .col1item { width: 100%}
@media (min-width:768px) {
.daily-body .col1item { display: -webkit-box;  display: -ms-flexbox; display: flex;  -webkit-box-align: center; -ms-flex-align: center; align-items: center  }
}
@media (min-width:768px) {
.daily-body .col1item .txtbox, .daily-body .col1item img {  width: 50% }
}
@media (min-width:768px) {
.daily-body .col1item .txtbox { padding: 0 5%  }
}
/*col4item*/
.daily-body .col4item { -ms-flex-preferred-size: auto; flex-basis: auto; width: 100%}
@media (min-width:768px) {
.daily-body .col4item { width: 50% }
}
.daily-body .txtbox { margin-top: 1rem}
 
.daily-body .txtbox .title { color: #333;  font-weight: 700;}
.daily-body .txtbox .txtdes { margin-top: 1em}
.daily-tip { color: #333; /*background-color:rgba(231,213,176,.1);*/  padding: 0 1.25em; }
.daily-tip-bg { background-color:rgba(231,213,176,.3)  }

 
.f-1rem{ font-size: 1rem; font-weight: 600; margin-bottom: 10px;}

 /*----------------------------------------/
熱門推薦
----------------------------------------*/
.product-cate{ width:100%; height: auto; margin:0px; padding:40px 0px;  position: relative;   }
.product-cate li{width: 100%;  margin:0px auto 5% auto;padding:0px; list-style: none; display: flex;flex-wrap: wrap; justify-content: center; align-items: center; transition: all 0.3s linear 0s;   position: relative; z-index: 0;  }
.product-cate li figure{ width:70%; height: auto; margin-bottom:0px; overflow: hidden; background-color:transparent;  position: relative;z-index: 1; transition: all 0.5s ease 0s; }
.product-cate li figure img { width: 100%; max-width: 100%; height: auto;transition: all 0.5s ease 0s; clip-path: polygon(0 9%, 100% 0, 100% 90%, 0% 100%); -webkit-filter:grayscale(0);  }
.product-cate li:hover figure img {/*-webkit-filter:grayscale(1); -webkit-filter:blur(3);*/  transform: scale(1.1);  opacity: 1; } 
.product-cate li .inner{width:40%;height:auto;  padding:40px;  margin: 0 0px 0px -10%;  position: relative; z-index: 4; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);  background: rgba(255,255,255,.5);}
.product-cate li .inner::before{ content: ""; width:calc(100% - 20px); height:calc(100% - 20px); border: solid 2px #fff; position: absolute; left:10px; top:10px;}
.product-cate .inner  h3{position: relative;width: 100%;  margin:0px 0px 30px 0px; font-size: 1.75rem; font-weight:700; color:#222;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; word-break: normal;}
.product-cate .inner h4{position: relative;width: 100%;  margin:0px 0px 10px 0px; font-size:1.063rem; line-height: 1.7142857143rem; font-weight:700; color:#222;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; word-break: normal;}
 
.product-cate .inner-list{ width: 100%; padding: 0px 0px 0px 30px; margin-bottom: 10px; font-size: 1rem; line-height: 1.5rem; color:#000;  font-weight:600;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; word-break: normal; position: relative;  }
.product-cate .inner-list:hover{ color: #e84a75;}
.product-cate .inner-list a{color:#222;}
.product-cate .inner-list:after{ content: ""; width: 16px; height: 4px; position: absolute; left:0px; top:10px; background: #000;}
.product-cate .btn-area{margin-top: 30px;}
.product-cate li:nth-child(odd) .inner{ padding-left: 160px;  }
.product-cate li:nth-child(1) .inner{ background: rgba(214,233,245,.5); }
.product-cate li:nth-child(2) .inner{ background: rgba(203,207,190,.5); }
.product-cate li:nth-child(3) .inner{ background: rgba(255,216,216,.5); }
.product-cate li:nth-child(4) .inner{ background: rgba(255,255,255,.5); }
.product-cate li:nth-child(even){flex-direction: row-reverse;}
.product-cate li:nth-child(even) .inner{margin: 0 -20% 0px 10%;  }
@media (max-width:820px) {
 .product-cate li .inner{width:50%;  padding:40px 20px;  margin: 0 0px 0px -20%;  }
.product-cate li:nth-child(even) .inner{margin: 0 -20% 0px 0; }
 }

@media (max-width:767.98px) {
.product-cate .inner  h3{  font-size: 1.35rem; }
.product-cate li figure{ width:100%;   }
.product-cate li .inner,.product-cate li:nth-child(even) .inner{width:100%;height:auto;  padding:40px;  margin:-10% 0px 0px 0px;  }
}