.banner {margin:-3% 0px 0px 0px; position: relative; padding: 0px 0px 50px 0px;z-index: 1;  }
.banner::after {  content: "";  position: absolute; z-index:-1;  width: 100%;  height: calc(100% + 180px); top: -180px; right: 0;  background: url(../images/index/bg.jpg) repeat #f8f8f8;background-size: 100px;transition: 0.8s 1s;}
.banner-item{width: 100%; max-width: 100%; margin: 0px auto; height: auto; padding:0px;display: flex; flex-wrap: wrap;justify-content: center;  position: relative;  }
 /* ==== Slider Style === */
.banner-item li{ width: 100%; height: 100%; margin: 0px auto; padding: 0px;  position: relative; transition: all .5s ease; }
.banner-item li .slider-item {  width:100%;  padding: 40px 0px 0px 0px; margin: auto; position: relative;  display: flex; flex-wrap: wrap;justify-content: center; }
/*.slider-item{ position: relative; display: block; margin:0px auto; padding: 0px 20px; width: 100%;  max-width: calc((100% - 40px)/12*12 + 40px); }*/
@media (min-width: 768px) {
.slider-item{ max-width:1280px;}
}
@media (min-width:1025px) {
.slider-item{ padding-right: 40px; padding-left: 40px;   }
}
@media(max-width: 1400px) {
.slider-item,.banner-nav { transform: scale(.9)}
}
@media(max-width: 1024px) {
.slider-item,.banner-nav { transform: scale(.95)}
 }

@media(max-width: 840px) {
.banner {margin:70px 0px 0px 0px;   }
}

.banner-item li .slider-img { width:50%; height: auto;  margin: auto; padding: 40px 0px; position: relative;  }
.banner-item li figure { width:100%;max-width: 600px;   height:auto; margin: auto;position: relative;  }
.banner-item li figure img { margin: auto;position: relative; z-index: 1; }
.banner-item li figure::before{content: ""; width: 58%; height: 100%; display: block; position: absolute; left:-8%; top:-5%;  border: solid 5px  #f15921; ; z-index: -1;}
.banner-item li figure::after{  width:200%; content: attr(data-content);color: #fff; font-size: 180px; font-size: min(max(12vw, 82px), 180px);  font-weight: 500; word-wrap: normal; font-family: 'MuseoModerno', cursive; left:-96%; top:10%;position: absolute; z-index:0;}
.banner-item li.slick-current.slick-active .slogan{   animation:fadeInDown 1s both 1s;}
.banner-item li.slick-current.slick-active figure img{ animation:fadeInRight 1s both 1s;}
.banner-item li.slick-current.slick-active figure::after{ animation:fadeInUp 1s both 1s;}
.banner-item li.slick-current.slick-active figure::before{ animation:fadeInDown 1s both 1s;}

.slogan {width:calc(50% - 20%); height: auto;  margin: auto 10%; position: relative;z-index: 1;  }   
.slogan::before{ content: attr(data-content);color: #000;  font-size: 130px;  font-size: min(max(10vw, 90px), 130px); font-weight: 500;  letter-spacing: 3px;font-family: 'MuseoModerno', cursive; writing-mode: vertical-lr;position: absolute; left:-25%; top:0;  transform:rotate(180deg);   }
.slogan::after{ content: "" ; width:2px; height: 240px; background-color: #000;position: absolute; left:25%; top:-15%;  transform:rotate(45deg);  }
.slogan .txt-content{ width: 100%; margin: auto; padding: 0px; }
.slogan .txt-content h1{ margin: 0px 0px 20px 0px; padding:0;  font-size:40px; font-size: min(max(3.5vw, 30px), 40px); line-height:2.875rem; font-weight:500; text-align: left;  letter-spacing: 1px; color:#000;  }
.slogan .txt-content h2{ width:auto;margin:50px auto 0px auto;padding:0px 0px 0px 100px;font-size:40px; font-size: min(max(3.5vw, 16px), 40px);line-height:2.875rem;font-weight:500;color: #f15921;letter-spacing: 1px;}




.slogan .txt-content h3{ margin: 0px 0px 50px 0px; padding:0;font-size:40px; font-size: min(max(3.5vw, 30px), 40px);  line-height:2.875rem; font-weight:500; text-align: left;  letter-spacing: 1px; color:#000;  }
.slogan .txt-content h4{  margin: 60px auto  0px auto; padding:0; font-size:40px; font-size: min(max(3.5vw, 30px), 40px); line-height:2.875rem; font-weight:500;  text-align: center; color: #f15921;  }
/*old
.slogan .txt-content h3{ margin: 0px 0px 50px 0px; padding:0;font-size:40px; line-height:2.875rem; font-weight:500;letter-spacing: 3px; text-align: left; color:#000;  }
.slogan .txt-content h4{ width:auto; margin:100px auto 0px auto; padding:0; font-size:40px; font-weight:500; color: #f15921;letter-spacing: 3px;   }
*/
.slogan .txt-content p{ width:100%;margin:60px 0px 0px 10px; padding:0 0px 0px 10px; font-size:1rem; font-size: min(max(2vw, .875rem), 1rem);line-height: 1.5rem;  letter-spacing: 1px; text-align: left; font-weight:400; color:#6d6d6d;   }
 .img-blur { position: absolute; right:2%; top:-5%; width: 45%; height: 100%; z-index: -5;}
.img-blur-bg {max-width: 100%;height: 100%;background-position:center;background-repeat: no-repeat; background-size: contain; opacity: .1;}

@media(max-width: 1180px) {
.banner-item li .slider-img { padding: 40px 0px 20px 0px;  }   
.banner-item li figure::before{ left:-15%; width: 48%; height:calc(100% + 20px);  }
.banner-item li figure::after{ top:5%; left:-84%; /*font-size: 140px;*/}
.img-blur {  width: 50%;  }
}

@media(max-width: 1024px) {
 .banner-item li .slider-img {  padding: 40px 0px 20px 0px;  }   
.banner-item li figure::before{  left:-15%;width: 48%; height: 98%;  }
.banner-item li figure::after{ top:5%; left:-84%; /*font-size: 140px;*/}
   .img-blur {  width: 50%;  }
  
}
/*//for 平板裝置(768px<螢幕尺寸<979px)*/
@media (min-width: 769px) and (max-width: 979px) {
.banner-item li .slider-item{padding: 0px 0px 40px 0px;}   
.banner-item li figure::before{  left:-15%;width: 48%; height:calc(100% + 24px); }
.slogan { margin: 17% 10% auto 10%;   }   
.slogan .txt-content p{ ;margin:60px 0px 0px 0px; padding:0px;}   
}
 
@media (max-width: 768px) {
.banner-item li{ width: 100%;}
.banner-item li .slider-item { height: 100%; padding: 40px 0px 0px 0px;flex-direction: column-reverse; }
.banner-item li figure::after{ display: none;}
.banner-item li figure::before{ top:0px; left:25%;  }
.banner-item li .slider-img { width:100%; height: auto;  margin: auto; padding: 20px 0px 0px 0px; position: relative;border-bottom: solid 1px #c0c0c0;  }
.banner-item li .slogan {width:100%; height: auto;  margin:10% auto; position: relative; }   
.slogan::before,.slogan .txt-content p, .img-blur { display: none;}
.slogan .txt-content{  display: flex;flex-wrap: wrap; order: 1;}  
.slogan::after{  height: 120px; left:50%; top:-40px;    }
.slogan .txt-content h3{    line-height: 2rem;margin: 0px auto; padding:0; }
.slogan .txt-content h4{  line-height: 2rem;margin: 0px auto; padding:0;  }    
}   

 

@media (max-width: 767.98px) {
 .banner-item li .slider-item {  padding: 40px 0px 0px 0px;  }
.banner-item li .slider-img {  padding:0px;   }
.banner-item li figure { width:100%;max-width: 600px; height:  auto; margin: auto;position: relative;  }

 }


.banner-nav .slick-slider{ width: 100%; margin:0px auto; padding:0px!important;position: relative;  }
.banner-nav{ width: 100%; max-width:1280px;  margin:-72px auto auto auto; padding:20px 180px 0px 180px; list-style:none;  display: flex; justify-content: center; border-top:solid 1px  #c0c0c0;}


.banner-nav li{width:100%; height:auto; margin:0px  auto; padding:0px 20px; position: relative; }
.banner-nav li .item { width:auto; height: auto;  margin: auto; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; position: relative;  }
.banner-nav li .item:after { content:""; position: absolute;left:57%;  bottom: 10%; width:100%; height: 1px; background: #c0c0c0; }  
.banner-nav li:last-child .item:after { display: none }  
.banner-nav li figure {  margin: 0px auto; width: 100px; height: auto;  text-align: center; cursor: pointer; position: relative; overflow: hidden;}
.banner-nav li figure img {   opacity: .5; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; -webkit-filter:grayscale(100%);  }
.banner-nav li figure:hover img {-webkit-filter:grayscale(0);opacity: 1; }
.banner-nav li.slick-current img{-webkit-filter:grayscale(0);opacity: 1;}
.banner-nav li span {position: relative;  padding: 10px 6px 40px 6px; font-size: 1.125rem; line-height: 1.25; font-weight: 500; letter-spacing: 1px; text-align: center;  color:#c0c0c0; }
.banner-nav li span:before { content:""; position: absolute;  left: 50%;  bottom:16px; transform: translate(-50%, 0px);width: 6px; height: 6px; background: #c0c0c0; border-radius:99rem; }
.banner-nav li.slick-current span{ color:#f15921;} 
.banner-nav li.slick-current span:after{ content:""; position: absolute;   left: 50%;  bottom: 0px; transform: translate(-50%, 0px);width:38px; height: 38px; border-radius:99rem;border: solid 1px #f15921;} 
.banner-nav li.slick-current span:before{ background: #f15921; } 
 /* .cms-product-arera .cms-main-content {width:calc(100% - 400px);  padding-left:30px; position: relative;  }*/
.cms-bg{background-image: linear-gradient(to top, #fff 0%, #fbfdf6 90% ,#fff 100%);}


@media(max-width: 1024px) {
 .banner-nav{margin:-72px auto auto auto;  padding:20px 80px 0px 80px;  }
}

/*//for 平板裝置(768px<螢幕尺寸<979px)*/
@media (min-width: 769px) and (max-width: 979px) {
 .banner-nav{  padding:20px 0px 0px 0px;  }

}

@media (max-width: 768px) {
.banner-nav{ width:100%;min-width: 600px; margin: 0px auto auto auto; padding: 0px; border-top:none;   }
.banner-nav li{  height:auto; margin:0px 20px; padding:0px; }
.banner-nav li figure { padding: 10px; border: solid 1px  #c0c0c0;}
.banner-nav li.slick-current figure{border: solid 1px #f15921;}  
.banner-nav li span {position: relative;  padding: 20px 6px; font-size: 1.125rem; line-height: 1.25; text-align: center;  color:#000; }
.banner-nav li span:before { display: none;}
.banner-nav li.slick-current span{ color:#f15921;} 
.banner-nav li.slick-current span:after{display: none;} 
.banner-nav li.slick-current span:before{ background: #f15921; }  
.banner-nav li .item:after { display: none;}  
.banner-nav .slick-initialized .slick-slider { width:100%; }
.banner-nav .slick-slider .slick-track,.banner-nav .slick-slider .slick-list{ width:100%!important; }
}

@media (max-width: 767.98px) {
.banner-nav{  min-width: 420px; margin: 0px!important;padding: 0px!important; }
.banner-nav li{  height:auto; margin:0px 20px; padding:0px; }
}

/* 篩選 */
@media(max-width:979px) {
body.offcanvas-active{overflow:auto;overflow-x: hidden!important;}
.offcanvas-header{ display:none; }
.screen-overlay { width:0%; height: 100%; z-index: 30; position: fixed; top: 0; left: 0; opacity:1; visibility:hidden;  background-color: rgba(34, 34, 34, 0.6); transition:opacity .2s linear, visibility .1s, width 1s ease-in;}
.screen-overlay.show { transition:opacity .5s ease, width 0s; opacity:1; width:100%; visibility:visible;}
.btn-clear{ width: auto; padding: 10px; color: #3A3A3C; border:none;background:none;   } 
.offcanvas-header{ display:flex; flex-wrap: wrap; justify-content: space-between; align-content: center; align-items: center; width: 100%; padding:10px 20px 10px 10px;  border-bottom: solid 1px #e9e7e1;position: relative;  }
.offcanvas-header .btn-close {width: 404px; height: 40px; color:rgba(58,58,60,1); background: url("../images/icon/icon-colse.svg") no-repeat center center;  ; border:none;  }
.mobile-offcanvas{ visibility: hidden; transform:translateX(-100%); background-color:#f8f8f8;; border-radius:0;  display:block; position: fixed;  top: 0; left:0; height: 100%;z-index: 1200;width:400px; padding:40px 20px 20px 100px;overflow-y: scroll; overflow-x: hidden; transition: visibility .2s ease-in-out, transform .2s ease-in-out; }
.mobile-offcanvas.show{visibility: visible;transform: translateX(0);}	
.mobile-offcanvas::-webkit-scrollbar { display: none;-webkit-appearance: none;}
.mobile-offcanvas::-webkit-scrollbar:vertical { width: 6px; }
.mobile-offcanvas::-webkit-scrollbar:horizontal {  height: 12px;}
.mobile-offcanvas::-webkit-scrollbar-thumb { background-color:#000; border-radius: 5px; border:solid 2px #dfe7eb;}
.mobile-offcanvas::-webkit-scrollbar-track { border-radius: 0px;  background-color:#fff;}
}

.filter-wrap{width: 100%; display:flex; justify-content:space-between; flex-wrap: wrap;  }
.filter-btn-wrap{flex: 0 0 15%; display:flex;justify-content: flex-end; }
.filter-selected-wrap{flex: 0 0 85%; height: auto; display:flex;flex-wrap: wrap;  }
.filter-selected{ width:auto; height: 24px; display:flex;flex-wrap: nowrap; align-items: center; margin-right:10px; font-size:0.8125rem; line-height: 1rem; cursor:pointer; }
.filter-tags{ padding:0px 5px;  width: auto; height: 24px; display: flex; justify-content: center; align-content: center; align-items: center;  color:#6d6d6d;}
.filter-tags-remove{  width: 15px; height: 15px;   border: solid 1px #fff; border-radius:99rem; background: url("../images/icon/icon-colse.svg") no-repeat center;background-size: 60% auto; -webkit-filter:invert(1);}
.filter-btn{width: auto;padding: 7px 15px; margin:0px; display: flex;flex-wrap: wrap;justify-content: flex-end; align-content: center; align-items: center; cursor: pointer;color: #000;  border: #000 solid 1px;background: #fff;   }
.filter-btn i{width: 20px; height: 20px;; margin-right:10px;}    

@media screen and (max-width: 1180px){
.filter-btn{width: auto;padding: 7px 12px; font-size: 14px;  }
.filter-btn i{width: 16px; height:16px;  }    

}

@media screen and (max-width: 992px){
.filter-btn-wrap{display: none; }
.filter-selected-wrap{flex: 0 0 100%;   }
}


/*filter*/
.leftMenu > ul ul.search-list-s{width: 100%; padding: 0px 0px 30px 0px;  }
.leftMenu > ul ul.search-list-s li { width: 100%; padding: 0px; margin: 0px; display: flex; flex-wrap: wrap;  }
.search-list-s label { margin:5px;  position: relative;padding-left:25px;font-size: 0.9rem; line-height: 1.5rem; color: #6d6d6d; cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.search-list-s label.label-list{ width: calc(100%/2 - 15px); display: flex;  flex-wrap: wrap; align-items: flex-start;  flex-direction: column; }
/* Hide the browser's default checkbox */
.search-list-s label input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
/* Create a custom checkbox */
.checkmark {position: absolute;top: 9px;left: 0;height: 14px;width: 14px; border-radius: 99rem; border: solid 1px #000;}
/* On mouse-over, add a grey background color */
.search-list-s label:hover input ~ .checkmark {background-color: #ccc;}
/* When the checkbox is checked, add a blue background */
.search-list-s label input:checked ~ .checkmark {background-color: #000;}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {content: "";position: absolute;display: none;}
/* Show the checkmark when checked */
.search-list-s label input:checked ~ .checkmark:after {display: block;}
/* Style the checkmark/indicator */
.search-list-s label .checkmark:after {left: 4px;top: 0px;width: 5px;height: 8px;border: solid white;border-width: 0 1px 1px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}

@media screen and (max-width: 992px){
/*.search-list-s label.label-list{ width: calc(100% - 25px); }*/
    
}

.text-stroke{ -webkit-text-stroke: 1px #a3d6bf;} 
/*product-list-layout*/
.main-area{ background: #fff;  }
.main-body{display:flex; flex-wrap:nowrap;   padding:0px; position: relative; }
#menubox{flex: 0 0 21%;   margin: 0px; padding:0px; top:0px;  display: flex; flex-wrap: wrap;  align-content: flex-start;  /*position: sticky;  position: -webkit-sticky;*/overflow: hidden;}
#menubox2{/*flex:0 0 79%;*/   width: 79%; padding:60px 0px 200px 0px;position: relative;}
#menubox2.right-box{ flex-basis:1; flex-grow: 1; width: calc(100% - 100px);margin-left:100px; }


 @media screen and (max-width: 992px){
 .main-body{ flex-wrap:wrap;}    
#menubox{flex: 1 1 100%; height:auto;  margin: 0px; padding:0px; top:0px; position: relative;  }
#menubox2{flex:1 1 100%; width: 100%;padding:0px;  }
}

 /*----------------------------------------/
產品清單頁  cms-main-product-item  
----------------------------------------*/
/*--分類new-tag --*/
.tag {  width: auto; padding:20px; font-size: 1.125rem; color: #4a4a4a; 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; left:0px; top: 0px;  }
.tag a{color:#4a4a4a;}

.product{ flex: 1 1 100%; height: auto;  min-height:400px; padding:0px;  margin:0px auto 100px auto;  position: relative;  animation:fadeInRightBig 1.5s both 1.5s; }
.product:nth-child(2){ animation-delay:2s; animation:fadeInRightBig 2.5s both 2.5s;}
.product:nth-child(3){ animation-delay:3s; animation:fadeInRightBig 3s both 3s;}
.product-row { width: 100%; display: flex; flex-wrap: wrap;  overflow: hidden;  }
.product-cover{width: 37%; display: flex;  position: relative;  z-index:9;    }
.product-box{ width: calc(63% - 60px); margin-right: 60px; padding:60px 0px 60px 60px; background: #f8f8f8;  position: relative; z-index: 1; }
 
.m-title{display: none;}

  @media(max-width: 1180px) {
.product-box{ width: calc(63% - 30px); margin-right: 30px; padding:60px 0px 30px 30px; background: #f8f8f8;  position: relative; z-index: 1; }
}

@media(max-width:979px) {
.product-cover{width: 100%; height: 400px; overflow: hidden;  }
.product-box{ width: 100%;margin-right: 0; padding:0px; position: relative;z-index: 999; }
.product-box .cms-title{display: none;}   
.m-title { width:100%; height: auto;margin:0px auto 20px auto ;padding: 0px; display: block; position: relative;  } 
.m-title h2{  font-size:1.875rem; text-align: center; font-weight:700;    }
}
@media(max-width:640px) {
.product-box{margin-top: -20%; }
}
 
.product-cate{ width:100%;height: auto;margin:0px auto; padding:0px; position: relative; overflow: hidden; }
.product-cate figure{ width: 100%;height: 100%;position: relative; }
.product-cate figure img {  transition: all 0.5s ease 0s; object-fit: cover; transform-origin: left;  }
 /* ==== 底圖 === */
.bg-cover { background-image: attr(src url); background-repeat: no-repeat; background-size: cover;background-position:center top; position: absolute;z-index: -1;  width: 100%;  height:100%; top: 0px; right: 0; bottom: 0; left: 0;   line-height: 0; transition: 0.8s 1s; }

@media(max-width:640px) {
.product-cate{ width:100%;height: 80%; }
.product-cate figure{ width: 100%;height: 100%;position: relative; }
}

.product-cate .title-box{color: #fff; font-size: 128px; font-weight:500; letter-spacing: 3px;font-family: 'MuseoModerno', cursive; writing-mode: vertical-lr;position: absolute; left:2%; bottom:20%;  transform:rotate(180deg);}
@media (max-width:1680px) {
.product-cate .title-box{ font-size: 128px; bottom:15%;  }
}
@media (max-width:1440px) {
.product-cate .title-box{ font-size: 120px; bottom:12%; }
}
@media (max-width:1366px) {
.product-cate .title-box{ font-size: 100px; bottom:23%; }
}
@media (max-width:1280px) {
.product-cate .title-box{ font-size: 100px; bottom:15%;  }
}
@media (max-width:1180px) {
.product-cate .title-box{ font-size: 80px; bottom:18%;  }
}
@media(max-width:979px) {
.product-cate .title-box{  width: 100%; text-align: center;  writing-mode: horizontal-tb;  left:auto; top:10%; bottom:auto;  transform:rotate(0deg);}
}
@media(max-width:640px) {
.product-cate .title-box{ font-size:40px;  top:35%; }
}


.product-item { width: 100%; margin: 100px 0px 0px 20px; }
.product-item li{ width: 100%;  max-width:355px; display: block; margin: 0px 40px 0px auto; padding:20px 0px; list-style: none; background: #fff; position: relative;transition: all .35s ease; -webkit-box-shadow: 2vw 3vw 3vw -3vw rgb(0,0,0,20%);  box-shadow: 3vw 3vw 3vw -3vw rgb(0,0,0,20%);   }
.product-item li figure { width: 100%; padding-top:100%;  height: auto; margin-top: 32px; margin-bottom: 12px;overflow: hidden; background: #fff; position: relative;z-index: 1; transition: all 0.5s ease 0s;   }
.product-item li figure img{ width: 100%;  height: 0; padding: 10px;  }
.product-inner{width:calc(100% - 30px); margin: auto; padding:15px 5px 0px 5px;transition: transform 0.35s;  } 
.item-title{ margin-bottom: 10px;padding-bottom: 15px; border-bottom: solid 1px #dfdfdf; }
.item-title h3 { margin: 5px 0px; font-size:1.125rem; line-height: 1.466; font-weight:500; overflow: hidden; white-space: normal;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; text-overflow: ellipsis;}
.item-title p{ color: #6d6d6d; font-size: 14px; line-height: 1.466; word-wrap: break-word;  text-overflow: ellipsis; }
.item-sub-title{color: #6d6d6d; font-size: 14px;}

.btn-area { width: 100%; position: absolute; z-index: 5; bottom:0; left: 0; transition: all 0.4s ease-out 0s; opacity:0; }
.btn01 { display:flex; flex-wrap: wrap;justify-content: center;align-items: center; align-content: center; width: 100%; line-height: 76px; border: 1px solid #f15921;  padding: 0 30px; position: relative; color: #fff !important; background:#f15921; overflow: hidden;}
.btn01 i{width: 16px; height:16px; margin-left: 10px; }
.product-item li:hover .btn-area{opacity: 1; }

/*改變輪播位置*/
.product-item .slick-track{  transform: translate3d(0, 0, 0);}
.product-item .slick-list{ overflow: visible; left:-50px;}
.product-item .slick-slider{ overflow: hidden; }
 
.product-item .slick-prev,.product-item .slick-next{ top:-120px; }
.product-item .slick-prev{ left: auto; right: 140px;}
.product-item .slick-next{ left: auto; right: 80px;}
@media (max-width:1680px) {
.product-item  {  margin: 40px 0px 0px 20px; }
.product-item li{margin: 0px 30px 0px auto;      }
}
@media (max-width:1440px) {
.tag {  width: auto; padding:10px 20px; font-size:1rem;}   
.product-item li{margin: 0px 30px 0px auto; padding:10px 0px;     }
.item-title h3 { margin: 5px 0px; font-size:1rem;}
.btn01 {line-height: 64px;}
}
@media (max-width:1366px) {
.tag { font-size:14px;}   
.product-item li{ padding:0px;}
 .item-title h3 { font-size:.9rem;}
.item-title p{ font-size: 12px; }
.item-sub-title{ font-size: 12px;}
}
@media (max-width:1280px) {
.product-box .cms-title h2{font-size: 1.25rem;}
.product-item .slick-prev,.product-item .slick-next{ top:-60px; }
}

@media(max-width:979px) {
.product-item  { width: 100%; margin:-100px auto 40px auto;  padding: 0px; display: flex; flex-wrap: wrap; }
.product-item li{ width: calc(100%/3 - 20px); margin: 10px;   }
}
@media(max-width:640px) {
.product-item li{ width: calc(100%/2 - 20px); margin: 10px; position: relative; background-color: transparent; box-shadow: none;}
.product-item li figure {  margin-top: 0px;    }
.product-item li figure img{  margin-top: 20px;     }
.tag{display: none;}  
.item-title{ margin-bottom: 10px;padding-bottom: 15px; border-bottom: none; }
.item-title h3 { margin: 5px 0px; font-size:14px; line-height: 1.466; font-weight:500; }
.item-title p,.item-sub-title{ display: none }
.btn-area { width: auto;  opacity:1;position: absolute; z-index: 5; bottom:auto;left:auto; top:0px; right: 0;}
.btn01 {width: auto; padding: 5px; line-height: 1rem; background:none; border: none; font-size:0;  }
.btn01 i.icon-heart{   background: url("../images/icon/icon-heart-l.svg") no-repeat left center;	}
.btn-area:hover .btn01 i.icon-heart{   background: url("../images/icon/icon-heart-b.svg") no-repeat left center;	}
}

/*---------------------------------
best-wrap
----------------------------------------*/
.cms-best-wrap{width: 100%; margin:0 auto; padding:80px 0px 40px 15%; background: #f8f8f8;position: relative;display: block; }
.cms-best-wrap .cms-title{ margin-left: -30px;}
.cms-best-wrap .product-item {  width: 100%;  margin:0px; display: block;  }
.cms-best-wrap .product-item::before{content: ""; width:16%; height: 100%; background: #f8f8f8; position: absolute; left: -18%; top:0px; z-index: 99; }
.cms-best-wrap .product-item li{ transform: scale(.9);margin: 10px -15px 10px 0px ;}
.cms-best-wrap .slick-slider{overflow: visible;    }  
.cms-best-wrap .slick-prev,.cms-best-wrap .slick-next{ top:-60px;  -webkit-filter:grayscale(100%) brightness(0); position: absolute; z-index: 9999; }
.cms-best-wrap .slick-prev{ left: auto; right: 120px;  }
.cms-best-wrap .slick-next{ left: auto; right: 60px; }
@media (max-width:840px) {
.cms-best-wrap{width: 100%; margin:0 auto; padding:80px 20px; overflow: hidden; }
.cms-best-wrap .cms-title{padding-left: 20px;}
.cms-best-wrap .product-item::before{ display: none;}
.cms-best-wrap .product-item li{ margin: 10px auto;}
}
 @media (max-width:767.98px) {
.cms-best-wrap .product-item { width: 100%; display: flex;  flex-wrap: wrap; justify-content: space-between; }
.cms-best-wrap .product-item li{ width: calc(100%/2 - 10px);  transform: scale(1); margin: 10px 0px;}
}

/*----------------------------------------/
product-show圖片輪播區塊
----------------------------------------*/
.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}
.clearfix{display:block;zoom:1}
.top-area{width: 100%; height: auto; padding-top: 50px; margin-top: 0; position: relative; display: flex; flex-wrap: wrap;   }


.main-product-left{width:73%;  padding:120px 0px 0px 0px;  display: flex; flex-wrap: wrap;position: relative; z-index: 1;  order: 1;  }
.main-product-left::after {content: "";  position: absolute; z-index: 0; width:100%;height: calc(100% + 180px); top: -180px; right: 0; background: url("../images/index/bg.jpg") repeat #f8f8f8; background-size: 100px; transition: 0.8s 1s;}
.main-product-right{ width:27%;  padding:20px 0px 0px 0px; margin-top:-30px;  position: relative; }
.main-product-right .reveal{overflow: visible;}
@media (max-width:1440px) {
.main-product-left{width:73%; padding:100px 0px 0px 0px; }
}
@media (max-width:979px) {
.main-product-left{width:70%; padding:70px 0px 0px 0px;  }
.main-product-right{ width:30%; padding:20px 0px 0px 0px; margin-top:-30px;   }
}
@media (max-width:767.98px) {
.main-product-left{width:100%; padding:0px;order: 1; }
.main-product-right{ width:100%; margin:-150px auto auto auto; padding:0px; order: 1;z-index: 99;}
.main-product-right .img-item figure{width: 50%; } 
.top-area::after {content: "";  position: absolute; z-index: 0; width:100%;height: calc(100% + 180px); top: -180px; right: 0; background: url("../images/index/bg.jpg") repeat #f8f8f8; background-size: 100px; transition: 0.8s 1s;}
    
    
}
.main-product-right .img-item figure::before{content: ""; width: 56%;height: calc(100% + 100px); min-height: 450px; display: block; position: absolute; left:-12%; top:-40px;  border: solid 5px  #f15921; ; z-index: 1;}
@media (max-width:1440px) {
.main-product-right .img-item figure::before{ width: 66%; left:-12%; top:-40px;  border: solid 5px  #f15921; ; z-index: -1;}
}
@media (max-width:1280px) {
.main-product-right .img-item figure::before{ display: none;}
}


.img-item { width:100%;  height:100%;  padding:0px 40px 0px 30px;   margin:auto 0;  position: relative;   }
.img-item figure { width:100%; margin:100px auto auto auto;position: relative;   }
.img-item figure img { max-width: 100%;height: auto; margin: auto auto auto 30px;  position: relative; z-index: 1; }
.img-item figure::before{content: ""; width: 46%; height: 70%; display: block; position: absolute; left:-10%; top:-4%;  border: solid 5px  #f15921; ; z-index: -1;}
.img-item figure::after{  width:200%; content: attr(data-content);color: #fff; font-size: 180px; font-weight: 500; word-wrap: normal; font-family: 'MuseoModerno', cursive; left:-96%; top:10%;position: absolute; z-index:0;}
@media (max-width:1024px) {
.img-item figure img {  margin: auto ;  position: relative; z-index: 1; }
}
/*----------------------------------------/
product-show tab .mobile display 
----------------------------------------*/
.tab-menu{width:100%;padding: 10px 0px; background: #000; display: block; }
.tab-menu li{width:auto; text-align: center;position: relative; }
.tab-menu li:after{content: ""; width: 1px; height: 100%; background: #fff; position: absolute; right: 0px; top:0px;}
.tab-menu li a span{color: #fff; font-size: 0.9rem; font-weight: 500;  }
.tab-menu li.slick-current.slick-active a span{ color: #f15921; }
@media (min-width:841px) {
.tab-menu{display: none!important;}     
}
/*----------------------------------------/
.main-product-left 產品規格
----------------------------------------*/
.product-info{ width:100%; padding:10px 0px 0px 0px; margin: 0px; position: relative; z-index: 1;  }
.product-info h1,.main-product-right h1{ width: 100%; font-weight: 700; font-size:1.875rem;  font-size: min(max(3vw, 1.125rem), 1.875rem); color:#333; letter-spacing: 1px;   }
.product-info p,.main-product-right p{ width: 100%; font-weight:400; font-size: 1rem;  font-size: min(max(3vw, .875rem), 1rem); color:#6d6d6d; letter-spacing: 1px;   }

@media (min-width:1100px) {
.product-info h1,.main-product-right h1{     }
}
@media (max-width:1024px) {
.product-info p,.main-product-right p{  letter-spacing: 0;   }
}

@media (max-width:767.98px) {
.product-info { display: flex; flex-wrap: wrap; }
.grid-half .btn.cms-btn-secondary,.main-product-right .btn.cms-btn-secondary{ width:100%; max-width: 100%; margin: 10px auto;}
}

@media (max-width:640px) {
.product-info h1,.main-product-right h1{   /*font-size:18px; */   }
.product-info p,.main-product-right p{  margin-bottom: 10px;   }

}


.grid-box-mobile{display: none; }  

.grid-box{padding: 0px 20px 60px 120px;  margin: auto;position: relative;  }
@media (max-width:1366px) {
.grid-box{padding: 20px 20px 60px 80px;  }
}
@media (max-width:1280px) {
.grid-box{padding: 20px 20px 60px 60px;  }
}
@media (max-width:1024px) {
.grid-box{padding: 20px 20px 60px 30px;  }
}
@media (max-width:769px) {
.grid-box{padding: 20px 20px 60px 20px;  }
}
@media (max-width:767.98px) {
.grid-box{order: 3;  }
    .grid-box-mobile{display: block;}  

.m-01{  margin-top: -350px;padding:0px 40px;    }
.m-02{  margin-top: 200px;  }
}
 

.grid-wrap { display: flex; flex-wrap: wrap; justify-content: flex-start;width: 100%;position: relative;}
.grid-half{ width: calc(100% / 2);padding: 0px; position: relative;}
 @media (max-width:767.98px) {
.grid-half{ width: 100%; order: 3; }    
.grid-wrap.items-end{flex-direction: column-reverse;}   
}
.en-title{  position: absolute;  width:100%;  top:-160px; left: -70px;  font-size: 180px;color: #fff; z-index: -1;  }
 @media (max-width:1440px) {
 .en-title{ transform:scale(.9); }
}

 @media (max-width:1024px) {
 .en-title{ transform:scale(.8); }
}
 @media (max-width:979px) {
 .en-title{ transform:scale(.7); }
}
 @media (max-width:767.98px) {
 .en-title{ display: none; }
}

.product-description{width: 100%;padding:0px; margin: 0px; position: relative; border-top:solid 1px #c0c0c0;}
 @media (max-width:767.98px) {
.product-description{ order: 1;  border-top:none;}
}
 .t-section {width: 100%;  padding: 20px 0; margin: 60px 20px;  }
 @media (max-width:1024px) {
 .t-section {margin:20px 0px 60px 0px; }
 }

 @media (max-width:840px) {
 .t-section {padding: 20px 0px; margin:20px 0px;}
 }
 .title-area{width: 80%; margin: auto; text-align: center; color: #6d6d6d;}
 @media (max-width:767.98px) {
.title-area{width: 100%; padding:0px 20px; text-align: left; overflow: hidden; }
 }
 @media (max-width:576px) {
.title-area{ padding:0px;}
 }


.title-area>p { width: 100%; color: #6d6d6d; line-height: 1.6; letter-spacing: 1.6px; font-size: 1rem;  font-size: min(max(3vw, .875rem), 1rem)}
 .prd-area{width: 94%; margin: auto; padding-top: 80px;position: relative; }
 @media (max-width:767.98px) {
.prd-area{width: 100%; padding-top: 0px; background: #f8f8f8; }
 }
 
.bg-title{position: absolute; z-index: -1; width:100%;  top:80px; left: 0px; font-size: 130px; font-size: min(max(10vw, 90px), 130px); color: #f8f8f8;font-weight: 500;line-height:8rem; font-family: 'MuseoModerno', cursive; }
@media (max-width: 840px) {
.bg-title{ top:100px;  line-height:4rem;    }
}
.prd-wrap{  width: calc(100%/2 - 10%); margin-left: 10%; display: flex; flex-wrap: wrap; transition: all 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);  transition-delay: .3s; }
@media (max-width:1366px) {
.prd-wrap{  width: calc(100%/2 - 6%); margin-left: 3%;   }
}
@media (max-width:1024px) {
.prd-wrap{  width: calc(100% - 6%); margin-left: 3%; margin-bottom: 3%;   }
}
@media (max-width:767.98px) {
.prd-wrap{  width:100%; margin:10px auto ; padding: 0px;   }
}



.prd-wrap::first-of-type{margin-left: 0px;}
.prd-wrap .text-header { width:70px; position: relative;}
.prd-wrap .text-header:before { content: ""; position: absolute; left:0px; top:0px; width: 2px; height: 70px;background: #000; }
.prd-wrap .text-header > span  { padding-left: 10px; font-size: 1.125rem;  font-weight: 500; }
.prd-wrap .text-box { width:calc(100% - 70px)}
@media (max-width:767.98px) {
.prd-wrap .text-header { width:100%;margin-bottom: 20px; }
.prd-wrap .text-header:before {display: none; }    
.prd-wrap .text-box { width:100%}
}


/*product-show 應用配置*/
.map-wrapper-row { max-width:1100px; margin: 0 auto; padding: 150px 0px;}
 @media (max-width:1366px) {
.map-wrapper-row { padding:150px 0px 40px 0px;}
}

 @media (max-width:768px) {
.map-wrapper-row { padding:250px 0px 200px 0px;}
}

 @media (max-width:767.98px) {
.map-wrapper-row { padding:200px 0px;}
}
.map-pins-component { width: auto; margin:0px; padding: 200px 20px;   position: relative; }
.map-pins-component .map-image {  max-width: 100%; opacity: 1;   position: relative; z-index: -1;}
.pin { position: absolute; transition: all 0.5s ease 0s;  }
.pin .pin-popup {position: relative;top: -320px; left: 0px;  width: 100%;  /*box-shadow: 6px 6px 5px rgb(0, 0, 0,20%) */ }
.pin .pin-popup .name{ margin-left: 20px; font-size:1.25rem; font-weight: 500;  color: #000; letter-spacing: 2px;display: none; }
.pin .pin-popup .text { margin-top: -50px; padding: 20px;  border-radius: 25px;opacity:0; transition: opacity 0.3s; pointer-events: none; background: #fff; box-shadow: rgb(46 46 46 / 20%) 0px 48px 100px 0px; }
.pin .pin-popup .text span { font-size:1.25rem; font-weight: 500;  color: #f15921; letter-spacing: 2px; }
.pin:hover .name { opacity: 0;}
.pin:hover .text { opacity: 1; transition: all 0.5s ease 0s;}

/*dot-top*/
.pin .label-dot-top { width: 12px; height: 12px; border-radius: 50%; margin: auto; background-color:#f15921;transition: transform 0.3s; position: relative; }
.pin:hover .label-dot-top:before { content: ""; position: absolute;  width: 1px; height: 300px; top: -300px; left: 6px; background-color:#f15921;  }
.pin .label-dot-top:after { content: ""; position: absolute;  width: 30px; height: 30px; top: -9px; left: -9px; border-radius: 50%;background-color:#f15921; opacity: .5;}
/*dot-bottom*/
.pin .label-dot-bottom { width: 12px; height: 12px; border-radius: 50%; margin: auto; background-color:#1083A4;transition: transform 0.3s; position: relative; }
.pin:hover .label-dot-bottom:before { content: ""; position: absolute;  width: 1px; height: 200px; bottom: -200px; left: 6px; background-color:#1083A4   }
.pin .label-dot-bottom:after { content: ""; position: absolute;  width: 30px; height: 30px; top: -9px; left: -9px; border-radius: 50%;background-color:#1083A4; opacity: .5;}
.pin .pin-popup-bottom {position: relative;bottom: -200px; left: 80px;  width: 100%;  /*box-shadow: 6px 6px 5px rgb(0, 0, 0,20%) */ }
.pin .pin-popup-bottom .name{ display: none;   margin-left: 20px; font-size:1.25rem; font-weight: 500;  color: #000; letter-spacing: 2px; position: relative; z-index: 0;  }
.pin .pin-popup-bottom .text { margin-top: -50px; padding: 20px;  border-radius: 25px;opacity:0; transition: opacity 0.3s; position: relative; z-index: 1;  background: #fff; box-shadow: rgb(46 46 46 / 20%) 0px 48px 100px 0px; }
.pin .pin-popup-bottom .text span { font-size:1.25rem; font-weight: 500;  color: #1083A4; letter-spacing: 2px; }

.pin:hover .pin-popup-bottom .name { opacity: 0;}
.pin:hover .pin-popup-bottom .text { opacity: 1;}

.map-pins-component .pin-0{ left:-20px; top:46%;pointer-events: auto;}
.map-pins-component .pin-1{ left:30%; top:56%;pointer-events: auto;}
.map-pins-component .pin-2{ left:70%; top:62%;pointer-events: auto;}
.map-pins-component .pin-3{ left:2%; top:50%;pointer-events: auto; z-index: 99;}
.map-pins-component .pin-4{ left:13%; top:48%;pointer-events: auto;z-index: 5;}
@media(max-width:979px) {
 .map-pins-component .pin-0 .pin-popup{ left: 20px; top:-270px;}  

}
 @media (max-width:768px) {
.map-pins-component { transform: scale(.8)}
}



  @media (max-width:767.98px) {
.map-pins-component { transform: scale(1);padding: 150px 20px;   position: relative; }
.pin .pin-popup {position: relative;top: -140px; left: 0px;  width: 100%;  /*box-shadow: 6px 6px 5px rgb(0, 0, 0,20%) */ }
.pin:hover .label-dot-top:before { content: ""; position: absolute;  width: 1px; height: 140px; top: -140px; left: 6px;   }
.pin .pin-popup .text { margin-top: -50px; padding: 10px; font-size:14px;  }
.pin .pin-popup .text span { font-size:14px;   }
.pin:hover .label-dot-bottom:before {   width: 1px; height: 160px; bottom: -160px; left: 6px; background-color:#1083A4   }
.pin .pin-popup-bottom .text {   padding: 10px; font-size:14px;  }
.pin .pin-popup-bottom .text span { font-size:14px;}
.map-pins-component .pin-0 .pin-popup{ left: 60px; top:-140px;}  
}

@media (max-width:576px) {
.pin .pin-popup .text { opacity:1;   }
.pin .pin-popup-bottom .text { opacity:1;  }
.pin .label-dot-top:before { content: ""; position: absolute;  width: 1px; height: 140px; top: -140px; left: 6px;  background-color:#f15921; }       
.pin.pin-2 .label-dot-top:before { content: ""; position: absolute;  width: 1px; height: 100px; top: -100px; left: 6px;  background-color:#f15921; }       

.map-pins-component .pin-0{ left:-60px; top:46%; }
.map-pins-component .pin-1{ left:30px; top:46%; }
.map-pins-component .pin-2{ left:60%; top:58%; }    


.pin-0 .label-dot-top{left:-30px;}

.pin.pin-1 .label-dot-top:before { content: ""; position: absolute;  width: 1px; height: 90px; top: -90px; left: 6px;  background-color:#f15921; }    
.pin.pin-1 .pin-popup { top: -90px; left: 0px;  width: 100%;  /*box-shadow: 6px 6px 5px rgb(0, 0, 0,20%) */ }
.pin.pin-2 .pin-popup { top: -90px; left: -30px;   width: 100%; min-width: 140px; /*box-shadow: 6px 6px 5px rgb(0, 0, 0,20%) */ }



.pin-3 .label-dot-bottom{ left:-70px; top:50%; }
.pin-4 .label-dot-bottom{ left:-60px; top:50%; }

.pin.pin-3 .pin-popup-bottom { bottom: -100px; left: 30px;   }
.pin.pin-4 .pin-popup-bottom { bottom: -160px; left: 60px;   }   

.pin.pin-3 .label-dot-bottom:before { content: ""; position: absolute;  width: 1px; height:60px; bottom: -50px; left: 6px; background-color:#1083A4   }
.pin.pin-4 .label-dot-bottom:before { content: ""; position: absolute;  width: 1px; height: 160px; bottom: -150px; left: 6px; background-color:#1083A4   }  

    
}


 
/* ==== Slider Style === */
.grid-section{  width: 100%; display: flex; flex-wrap: wrap; margin: 100px 0px 0px 0px;  }
.grid-cover{width: 32%; background: #f8f8f7; position: relative;transition: transform .6s;animation:fadeInDown 1s both 1s; }
.grid-content{width: 68%; }
.pro-list { width: 100%; margin: 20px 0px; right: -120px ;}
@media (max-width:1024px) {
.pro-list {right: 0px; left:0px; margin: 20px auto;padding: 0px; }   
}

@media (max-width:767.98px) {
 .grid-cover{width: 100%;   }
.grid-content{width: 100%; }
   
}



.pro-list li{ width: 100%; margin:0px; padding: 0px 0px 0px 50px;  position: relative; transition: all .5s ease; z-index: 0; transition-delay: .6s; overflow: visible; }
.pro-list li figure { width:100%; height: auto;  margin:0px; padding: 0px 20px; position: relative;z-index: 0;  }
.pro-list li .pro-item {  display: flex; flex-wrap: wrap; flex-direction: column;  position: relative;}
.item-number {width: 100%;  height: auto;  margin: auto; padding-left: 20px; display: flex; flex-wrap: wrap;  flex-direction: column;  z-index: 9; transition: transform .6s;animation:fadeInDown .6s both .6s;}   
.item-number::before{  }
.item-number::after{ content: "" ; width: 1px; height: 100px; background-color: #f15921; position: absolute; left:0px; top:0px;    z-index: 9; }

.txt-content{  transition: transform .4s; position: relative;  }
.txt-content h3{ margin: 0px; padding:0px;font-size:1rem; line-height:2.35rem; font-weight:500; text-align: left;  letter-spacing: 1px; color:#6d6d6d;; /*text-shadow: 0px 1px 2px rgba(0,0,0,.1);*/ position: relative;}
.txt-content p{ width: 100%;margin: 0px 0px 20px 0px; padding:0; font-size:0.9rem;  line-height:1.5rem;  text-align: left; font-weight:400;  color:#6d6d6d;/*text-shadow: 0px 1px 2px rgba(0,0,0,.1);  */ }

.pro-list li.slick-current.slick-active h3{ color: #f15921; animation:fadeInDown .5s both .5s;}
.pro-list li.slick-current.slick-active .item-number{color: #1a596f;}
.pro-list li.slick-current.slick-active .item-number::before{ animation:fadeInDown .3s both .4s; content: attr(data-content); color:#f15921; font-size: 72px; font-weight: 500;  letter-spacing: 3px;font-family: 'MuseoModerno', cursive; writing-mode: vertical-rl;position: absolute; left:-40px; top:10%;  transform:rotate(180deg); z-index: 9; }
.pro-list li.slick-current.slick-active .item-number::after{top:80px; animation:fadeInUp .3s both .4s;}
.pro-list li.slick-current.slick-active{ z-index: 999; transition: all 0.25s ease 0s;}
.pro-list li.slick-slide:not(.slick-current) { z-index:1;}
.pro-list .slick-prev, .pro-list .slick-next{transition-delay:1s; top:auto; bottom:-70px;  -webkit-filter:grayscale(100%) brightness(0); opacity: .5; }
.pro-list .slick-prev:hover,.pro-list .slick-prev:focus,.pro-list .slick-next:hover,.pro-list.slick-next:focus{transform: scale(1); opacity: 1; }
.pro-list .slick-prev:focus,.pro-list .slick-next:focus{  opacity:1;   }
.pro-list .slick-prev{left:50px;}
.pro-list .slick-next{ right: auto; left:120px; }
@media (max-width:767.98px) {
  .pro-list li{   margin:0px auto; padding: 0px;   }
  .pro-list li .pro-item { padding: 0px 40px;  }

.pro-list li figure { width:100%; height: auto;  margin:0px auto; padding: 0px 20px; position: relative;z-index: 0;  }
.pro-list li figure img{  display: block; margin:0px auto; padding: 0px 20px;  }
.pro-list li.slick-current.slick-active h3{ color: #000; }
.pro-list li.slick-current.slick-active .item-number{color: #000; font-size: 14px;}
    
.pro-list li.slick-current.slick-active .item-number::before{display: none;}
.pro-list li.slick-current.slick-active .item-number::after{display: none;}
.pro-list li{  margin:0px auto; padding: 0px;  }
.txt-content h3{  text-align: center;  color:#000; }
.txt-content p{  font-size: 14px; text-align: center; }  
    
.pro-list .slick-prev:before  { content: "";width: 30px; height:30px;  margin: auto;  display: block; background: url("../images/icon/arrow-left.svg") no-repeat center top;  }
.pro-list .slick-next:before { content: ""; width: 30px; height: 30px;  margin: auto;  display: block; background: url("../images/icon/arrow-right.svg") no-repeat center top; }
.pro-list .slick-prev, .pro-list .slick-next{ top:50%;}
.pro-list .slick-next{ right: 50px; left:auto; }

    
    
}
.series-item  { width: 100%; margin: 0px; padding:0px;position: relative;  transition: transform .6s; animation:fadeInUp 1s both 1.5s; }
.series-item li{ width: 100%; padding:0px; margin:0px 5px;   -webkit-transition: all 0.5s; transition: all 0.5s; list-style: none; position: relative; }
.series-item li a {   display: block; padding:100px 20px  20px 20px;   position: relative;  -webkit-transition: all 0.5s; transition: all 0.5s; overflow: visible;  }
.series-item li:before { content: ""; width: 100%; height: 50%; position: absolute; left: 0px; right:0px;   bottom: 0px; margin: auto;  pointer-events: none;  opacity: 1; background:#f8f8f8; -webkit-transition: all 0.5s; transition: all 0.5s;}
.series-item li:hover:before { height: 70%;}
.series-item li figure {  position: relative; width: 100%; margin: auto; padding-bottom: 20px; text-align: center;z-index: 9;  }
.series-item li figure img{  width:100%; margin: auto; display:block;}
.series-item li a h3 { margin-bottom: 5px; font-size:1rem; line-height: 1.466; font-weight: 500; color:#000; overflow: hidden; white-space: normal;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; text-overflow: ellipsis; }
.series-item li a p{ color:#6d6d6d; font-size: 14px; line-height: 1.466; word-wrap: break-word;  text-overflow: ellipsis; height: 45px;}
.series-inner{ text-align: center; }
.series-item li:hover figure{  transform: translateY(-10%);transition: all 0.5s;  }
.series-item li:hover::after{ animation:fadeInUp .3s both .5s; content: attr(data-content); color:#f15921; font-size: 130px; font-weight: 500;  letter-spacing: 3px;font-family: 'MuseoModerno', cursive;  
position: absolute; left:15%; top:10%;  z-index: 0; }
.series-item li.slick-current.slick-active {transform: scale(1.1); }
.series-item li.slick-current.slick-active::after {tnimation:fadeInUp .3s both .5s; content: attr(data-content); color:#f15921; font-size: 130px; font-weight: 500;  letter-spacing: 3px;font-family: 'MuseoModerno', cursive;  
position: absolute; left:15%; top:13%;  z-index: 0; }
@media (max-width:1280px) {
.series-item li.slick-current.slick-active::after {  font-size: 120px; }
}

@media (max-width:767.98px) {
 .series-item li a {  padding:50px 20px  20px 20px;   position: relative;  -webkit-transition: all 0.5s; transition: all 0.5s; overflow: visible;  }
   
.series-item li.slick-current.slick-active {transform: scale(1); }
.series-item li.slick-current.slick-active::after { font-size: 40px; position: absolute; left:15%; top:13%;  z-index: 0; }
    
.series-item li figure {   width: 100%;max-width: 60%; margin: auto; padding-bottom: 20px; text-align: center;z-index: 9;  }
    
    
}
.series-item li.slick-slide:not(.slick-current) { margin-top: 58px;transform: scale(.8)}
.series-item .slick-prev, .series-item .slick-next{transition-delay:6s; top:50%; bottom:auto;  -webkit-filter:grayscale(100%); }
.series-item .slick-prev{right:57%; left:auto;}
.series-item .slick-next{   left:60%; }




.tabs-wrapper{margin:100px 0px 30px 0px; position: relative;}
.resp-tabs-list li{border-radius:60px 60px 0px 0px; border: solid 1px #6d6d6d;  color: #6d6d6d;}
.resp-tabs-list li a {  font-size: 1.875rem; font-weight: 400;  color: #6d6d6d!important;}


#cms-tabs-product .resp-tab-active  { color: #000!important;   border-bottom: solid 1px #fff;  }
#cms-tabs-product .resp-tab-active a { color: #000!important;    }
.resp-tabs-list {  width:100%; padding: 10px; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; text-align: center; z-index:1;  background-color:transparent; border-bottom: solid 1px #fff;}

@media (max-width:840px) {
.tabs-wrapper{ padding: 0px 40px;}
}
@media (max-width:767.98px) {
 #cms-tabs-product .resp-tabs-list { border-bottom: solid 1px #000;}
#cms-tabs-product .resp-tabs-list li{ justify-content:flex-start; padding: 0px; border-radius:0px; border: none;  color: #6d6d6d;  }
.resp-tabs-list li a {  font-size:14px;  }
.resp-tabs-list li:after { content: ""; width: 4px; height: 4px; border-radius:99rem; background:#000;  position: absolute; right: 20px; top:20px;  }
.resp-tabs-list li:last-child:after {display: none;  }
#cms-tabs-product .resp-tab-active:after { content: ""; width:auto; height: 2px; background:#f15921;  position: absolute; left: 0px; top:36px;  }

}

.edit {  margin: auto; margin: 100px auto;}


/*產品規格*/
.flight-list .item { font-size: 1rem; font-weight: 700; }
.flight-list .item ul li  { padding-left: 0; position: static}
.flight-list .item ul li:before  { display: none;  position: static; top: inherit; left: inherit; width: auto; height: auto; background-color: transparent}
.flight-list .item li  { list-style: none;  padding-left: 0; position: static}
.flight-list .item li:before { display: none; position: static; top: inherit; left: inherit;  width: auto;  height: auto; background-color: transparent;  -webkit-transform: translate(0); transform: translate(0)}
.flight-list { padding-bottom: 1rem}
.flight-list .item:hover { color:#f15921;  }
@media (min-width:992px) {
.flight-list { padding: 15px 0 }
}
.flight-list .item { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; color:#000; padding:10px 2px; margin:5px 0; background-color: #fff; border-bottom:  solid 1px #eee; }

.flight-list li { font-size: 1rem;  font-weight: 400; border-top: 1px dashed #c9c9c9; padding-top: .55em;  padding-bottom: .3em}
@media (min-width:768px) {
.flight-list li { padding-bottom: .5em  }
}
.flight-list li {  -webkit-box-flex: 1;  -ms-flex-positive: 1; flex-grow: 1; padding: 0;  border-top: none; text-align: left; position: relative!important; }
.flight-list li:after { content: "" ; width: 10px; height:200%; display: block; position: absolute!important;right: 10px;top:0px; background:#fff;z-index: 1;  }
.flight-list li:first-of-type:after { display: none;    }
.flight-list li:last-child:after { display: none;}
.flight-list li:nth-child(3):after{ display: none;}
.flight-list li:nth-child(1){width: 40px; }
.flight-list li:nth-child(2){width: 65%; display: flex; flex-wrap: wrap; justify-content: space-between;   }
.flight-list li:nth-child(3){width: calc(35% - 100px); }
.flight-list li:nth-child(4){width: 60px; color: #9e9e9e; }
.flight-list li:nth-child(2) span{padding-right: 30px; color: #9e9e9e;}
.flight-list li:first-of-type {border-top: none}
@media (max-width: 767.98px) {
.flight-list { overflow-x: scroll; padding-bottom: .75rem;width: 100%;}
.flight-list .item { width: 100%;min-width: 700px;  }
.flight-list li:nth-child(1){width: 40px; }
.flight-list li:nth-child(2){width:250px;   }
.flight-list li:nth-child(3){width: calc(350px - 100px); }
.flight-list li:nth-child(4){width: 60px; color: #9e9e9e; }
}
/*tab 影片規格*/

.video-list { width: 100%;  margin: 0 auto; padding:20px; display: flex; flex-wrap: wrap;   }
.video-list li { width: calc(100%/2); height: auto; margin: 40px auto; position: relative; z-index: 1; display: flex; flex-wrap: wrap;  list-style: none; transition: transform 0.5s; }
.video-list li .inner {padding: 20px 5px;}
.video-list li h3 {  font-size: 1.25rem;  font-size: min(max(3vw, 1rem),1.25rem); font-weight:700; line-height: 1.6;  color: #000; }
.video-list li h3 a { color: #000; }
.video-list li figure  {width: 100%; padding-bottom: 75%; height: 0; overflow: hidden; position: relative;  z-index: 1;border: solid 5px rgba(255,255,255,.2); border-radius:15px; box-shadow: 0 2px 16px 0 rgba(0,0,0,0.4); transition: all 0.5s ease-in-out;}




.top-box{width: calc(100% - 710px); position: relative;z-index: 9999;pointer-events: none; }
@media (max-width:1680px) {
.top-box{width: calc(100% - 650px); }
}
@media (max-width:1440px) {
.top-box{width: calc(100% - 580px); }
}
@media (max-width:1280px) {
.top-box{width: calc(100% - 510px); }
}
@media (max-width:840px) {
 .top-box{width:100%;   padding: 40px 100px;margin: auto; order: 3; position: relative; z-index: 0}
 .top-box:after{content: ""; width: 100%; height: 400px; position: absolute; left:0px; top:-50%; background: #f8f8f8;z-index: -1;} 
}
@media (max-width:420px) {
 .top-box{ padding: 40px 80px; }
}




/* cms-title-block h1 =======================================================================	*/
.top-box .title-block{  margin:0px auto 30px auto;   }
.top-box .title-block:after{ bottom:6px;     }
.top-box .title-block h2 {  margin:0px;   }
.top-box .title-block h3{ width: 50%; margin:0px; line-height:5rem; word-break: keep-all; word-wrap: normal;  }
 @media (max-width:840px) {
.top-box .title-block h3{ width: 100%; }
.top-box .title-block{display: none;}
}


.productArea{ width:100%; position: relative; padding: 0px 40px; z-index: 1;}
 @media (max-width:1680px) {
 .productArea {padding: 0px;  display: flex; flex-wrap: wrap; flex-direction: column; }   
}

 @media (max-width:767.98px) {
 .productArea { justify-content: center; }   
}

 .productArea .cms-btn-btnbox { margin:150px auto 0px auto; border-bottom: solid 1px #dfdfdf;}  

/*--------------------------------商品區--------------------------------*/
 .productArea .wrap { position: relative;display: flex; flex-wrap: wrap; flex-direction: column; }
 /*-------版面位置----------*/
.productArea .leftBox { width: 100%; margin:-600px auto auto auto; padding: 0px; overflow: visible; }   
 @media (max-width:1440px) {
.productArea .leftBox {  margin:-590px auto auto auto;  }   
}
 @media (max-width:1024px) {
   .productArea .cms-btn-btnbox { margin:30px auto 0px auto;}  
   
}
 @media (max-width:840px) {
.productArea .leftBox {  margin:0px auto auto auto; order:2; }   
 .productArea .cms-btn-btnbox { width:calc(100% - 80px); order:3; margin:30px auto 0px auto;}  
 }
.productArea .TopBox{width:50%;}
/*--------商品位置設定---------*/
.productArea .leftBox .txtExp {color: #222;  }
/*--------------------------------文--------------------------------*/
.productArea .productList {width: 100%; margin: 120px 0px 40px 0px;padding: 0px; position: relative;z-index: 9; }
.productList li:not(:first-child) {display: none;}
.productList li {padding:0px;}
.productList .Img {display: none;text-align: center;}
.productList .Img img { display: block;width: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.productList .Txt {padding: 0 60px 0 10px; }
.productList .item_name {display: block;margin-bottom: 30px; font-size: 1.125rem; font-size: min(max(3vw, 1rem), 1.125rem); font-weight: 700; color: #000;}
.productList .item_text {color: #000;}
.productList .item_text {padding-bottom: 20px;margin-bottom: 20px;font-size:1rem;  font-size: min(max(3vw, .875rem), 1rem)!important; color: #6d6d6d;}
.productList .item_text a:not(:hover) {color: #000;}
.productList .txtExp {height: calc(28px * 5);line-height: 28px;}
 

 @media (max-width:1440px) {
.productArea .productList { margin: 80px 0px 40px 0px; }
    
 }

 @media (max-width:840px) {
.productArea .productList {  margin:0px auto auto auto; order:1; }   
}

 @media (max-width:767.98px) {
.productList .Txt {width: 100%;  padding:0px; }
/*.productList .item_text { font-size:14px;  }
*/.productList .cms-dot li{padding-left: 14px;}
}



 /*--------------------------------圖--------------------------------*/
.productMoreList {width:100%; height:700px; margin: auto; padding:0px;  }
.productMoreList li { width:100%; margin:440px 20px 0px 20px; padding:0px; transform: scale(0.65) translateX(-50%);  transition: all 0.5s ease;   }
.productMoreList .item {}
.productMoreList .slick-list{ width: 1000px;  }
.productMoreList .slick-track{  pointer-events: none; transform: translate3d(0, 0, 0);}
.productMoreList .slick-slide:after{pointer-events: none;}
.productMoreList .slick-active { opacity: 1; transform: scale(0.65) translateX(-50%); transition: all 0.5s ease; }
.productMoreList .slick-active .Txt { opacity: 1; }
.productMoreList .slick-active + .slick-active { transform: scale(0.65) translateX(-100%); }
.productMoreList .slick-active + .slick-active .Txt { transition: all 0.5s 0.2s ease; }
.productMoreList .slick-active + .slick-current { transform: scale(0.65) translateX(-150%);  opacity: 1; }
.productMoreList .slick-active + .slick-current .Txt {  opacity: 0; transition: all 0s ease; }
.productMoreList .slick-active + .slick-current .Img {   }
.productMoreList .slick-active + .slick-current .Img img {  }
.productMoreList .slick-current + .slick-active { transform: scale(2.2) translate(-24%,-36%);  }
.productMoreList .slick-current + .slick-active .Txt {  opacity: 0; transition: all 0s ease;  }
.productMoreList .slick-current + .slick-active .Img { opacity: 1;transition: all 0.5s ease; }
.productMoreList .slick-current + .slick-active + .slick-active {transform: scale(0.5) translateX(-20%); }
.productMoreList .Img { padding: 0;  }
.productMoreList .Img img { display: block; width: 100%;  }
.productMoreList .Txt { display: none; position: absolute; top: 100%; left: 0;  z-index: 5; width: 50%; padding: 20px 15px 0 5px; opacity: 0; transform: scale(2); transform-origin: top left;  transition: all 0.5s ease; }
.productMoreList .Txt .item_name {   font-size: 1.125rem; font-size: min(max(3.5vw, 1rem), 1.125rem);  text-align: center; /*display: none;*/}
.productMoreList .Txt .item_text p{font-size:1rem;  font-size: min(max(3vw, .875rem), 1rem);color: #525252;  display: none;}
.productMoreList .slick-prev:before  { content: "";width: 30px; height:30px;  margin: auto;  display: block; background: url("../images/icon/arrow-left.svg") no-repeat center top;  }
.productMoreList .slick-next:before { content: ""; width: 30px; height: 30px;  margin: auto;  display: block; background: url("../images/icon/arrow-right.svg") no-repeat center top; }

@media (min-width: 1440px) {
.productMoreList .slick-list{ width: 1280px;  }
 }
@media (min-width: 1680px) {
.productMoreList .slick-list{ width: 1400px;  }
 }

@media (min-width: 1920px) {
.productMoreList .slick-list{ width: 1500px;  }
 }

  @media (min-width:1180px) and (max-width: 1440px) {
.productMoreList li { margin:460px 20px 0px 20px;  }
.productMoreList .slick-active { transform: scale(0.65) translateX(-30%); }
.productMoreList .slick-active + .slick-active { transform: scale(0.65) translateX(-95%); }
.productMoreList .slick-active + .slick-current { transform: scale(0.65) translateX(-160%);  }
.productMoreList .slick-current + .slick-active { transform: scale(2.4) translate(-24%,-36%);  }
} 
@media (max-width:840px) {
.productMoreList {  height: auto; margin: auto; padding:0px;  } 
.productMoreList .slick-list{ width: 600px; margin: auto; }
.productMoreList li { width:100%;   margin:0px auto; padding:0px ; transform: scale(1) translateX(0);  transition: all 0.5s ease;   }
.productMoreList li .Img img {  margin:0px auto;  }
.productMoreList .slick-active { transform: scale(1) translateX(0); }
.productMoreList .slick-active + .slick-active { transform: scale(1) translateX(0); }
.productMoreList .slick-active + .slick-current { transform: scale(1) translateX(0);  }
.productMoreList .slick-current + .slick-active { transform: scale(1) translate(0,0);  }
.productMoreList .slick-current + .slick-active + .slick-active {transform: scale(1) translateX(0); }    
}
 @media (max-width: 640px) {
 .productMoreList .slick-list{ width: 360px; margin: auto; }
 }
 
 @media (max-width: 420px) {
 .productMoreList .slick-list{ width: 240px; margin: auto; }

}

/***********************slick按鈕**************************/
.arrowBox{ width: calc(100% - 800px);  height: 79px;margin:auto 0px; position:relative; }
.arrowPrev{ position: absolute; right:calc(0px + 60px);  z-index: 9999; } 
.arrowNext{ position: absolute; right:0px;z-index: 9999;  } 
.arrowPrev, .arrowNext { width: 30px; height: 30px; top:-100px; cursor: pointer; -webkit-user-select: none; user-select: none; }
.arrowNext::before,.arrowPrev::before{ -webkit-filter: grayscale(1) brightness(0);}
.arrowNext::before { content: " "; display: block; width:30px;height: 30px; background: url("../images/icon/arrow-right-w.svg")  no-repeat right top; background-size: contain;}
.arrowPrev::before { content: " "; display: block; width:30px;height: 30px; background: url("../images/icon/arrow-left-w.svg")  no-repeat left top; background-size: contain;}
.arrowPrev:hover, .arrowNext:hover {opacity: .5}
.arrowPrev:hover::before, .arrowNext:hover::before {opacity: .5}

@media (max-width: 1680px) {
.arrowBox{ width: calc(100% - 700px); }
}
@media (max-width: 1440px) {
.arrowBox{ width: calc(100% - 600px); }
}
@media (max-width: 1280px) {
.arrowBox{ width: calc(100% - 520px); }
}

@media (max-width: 1180px) {
.arrowBox{ width: calc(100% - 460px); }
}


@media (max-width: 840px) {
.arrowBox{ display: none;}  
    
 }



/*mobile-version*/
.mobile-version{display: none;  }
.pc-version{display: block;  }
.title-version{display: none;  }
@media (max-width: 840px) {
.title-version{display: block;  }
}
@media (max-width: 767.98px) {
.mobile-version hr{ border-top: rgba(0, 0, 0, 0.18) 1px solid; }
.mobile-version{display: block;  padding: 20px 40px; position: relative; } 
.pc-version{display: none;  }
}
.mold-wrapper{}
@media (max-width:840px) {
.mold-wrapper{ padding:0px 40px;}
}





 .reveal { visibility: hidden; position: relative;  width:100%;height:auto;  overflow: hidden;} 
/* Reveal block */
.reveal-holder { width: 100%; height: 101%;   position: relative; }
 @media (max-width:1024px) {
.reveal-holder {  width: 100%;  height: 101%;  }
}
.reveal-holder .reveal-block { position: absolute; z-index: 99; top: 0; width: 100%; height: 101%; background: white;}
.reveal-holder .reveal-block::before { content: ""; position: absolute;  top: 0; left: 0; right: 0; bottom: 0; background: #fff; transition-property: transform; transition-duration: 0.5s;}
.reveal-block.gradient::before { background: linear-gradient(to left, #000, #ccc);}
.reveal-block.gradient-two::before { background: linear-gradient(to left, #f8f8f8, #fff);}
.reveal-block.extra { background: #fff;}
.reveal-block.extra::before {  background: #f8f8f8;}
.reveal-block.top.aos-animate::before,.reveal-block.bottom.aos-animate::before { transform: scaleY(1);}
.reveal-block.left.aos-animate::before,.reveal-block.right.aos-animate::before { transform: scaleX(1);}
.reveal-block.top::before {transform: scaleY(0);transform-origin: 0% 100%;}
.reveal-block.left::before {transform: scaleX(0);transform-origin: 100% 0%;}
.reveal-block.right::before {transform: scaleX(0);transform-origin: 0% 100%;}
.reveal-block.bottom::before { transform: scaleY(0);transform-origin: 100% 0%;}

/* AOS animate */
[data-aos=reveal-top],[data-aos=reveal-left],[data-aos=reveal-right],[data-aos=reveal-bottom] { transition-property: transform;  transition-delay: 0.5s;}
[data-aos=reveal-top] { transform: scaleY(1);}
[data-aos=reveal-top].aos-animate {transform: scaleY(0);transform-origin: 100% 0%;}
[data-aos=reveal-left] {transform: scaleX(1);}
[data-aos=reveal-left].aos-animate { transform: scaleX(0);transform-origin: 0% 100%;}
[data-aos=reveal-right] { transform: scaleX(1);}
[data-aos=reveal-right].aos-animate {  transform: scaleX(0); transform-origin: 100% 0%;}
[data-aos=reveal-bottom] { transform: scaleY(1);}
[data-aos=reveal-bottom].aos-animate { transform: scaleY(0); transform-origin: 0% 100%;}
[data-aos=reveal-item] { visibility: hidden; transition-property: visibility; transition-duration: 0s;}
[data-aos=reveal-item].aos-animate { visibility: visible;}