/*----------------------------------------/
產品總覽頁Product
----------------------------------------*/
 
 /* cms-product-cate -----------------*/
.cms-product-cate { width:100%; max-width: 1360px; margin: 5% auto;  display: flex; flex-wrap: wrap; justify-content: center;  align-content: flex-start;align-items: flex-start;  }
.cms-product-cate li{ width: calc(100% / 2 - 30px); margin: 30px 15px; padding:0px;  position: relative; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: flex-start;}
.cms-product-cate li figure{ width: 70%;padding: 30px; position: relative; z-index: 1; display: flex; }
.cms-product-cate li figure img{ width: 100%; max-width: 80%; height: auto;   margin: auto;animation: bg-circle 30s ease-in-out infinite;position: relative;z-index: 1; }
.cms-product-cate li figcaption { width:35%;  margin-left:-5%; margin-top:5%;   z-index: 9; position: relative;  display: flex; flex-wrap: wrap;  justify-content: flex-start; align-content: flex-start;  align-items: flex-start;flex-direction: column; }
.cms-product-cate li figcaption .cms-bg{ width: 100%;  background:#fff; padding: 30px;  box-shadow: 3px 5px 8px rgba(0,0,0,.2); }
#cms-main .cms-product-cate h3{  display: flex;padding-left: 20px; font-size: 2rem; font-weight: 700; position: relative; z-index: 1; color:#000;  overflow: hidden; transition: 0.3s;font-family: 'Noto Serif TC','Poppins', 'Microsoft JhengHei', "sans-serif"!important;  }
.cms-product-cate h3:hover{ color:#ff9e08;   }
.cms-product-cate h3:after { position: absolute; transition: 0.3s; content: "";  width: 0; left: 0%; bottom: 0; height: 3px; background: #ff9e08;}
.cms-product-cate h3:hover:after { width: 100%; left: 0;}
.cms-product-cate h3:before { content: ""; width: 8px; height: 26px; background-color: #f8c630; display: block; position: absolute; top: 8px; left: 0;}
#cms-main .cms-product-cate p{ margin:20px 0px;  font-size: 1rem; line-height: 1.65rem;  overflow: hidden; color: #000; }
.bg-circle {  position: absolute; width:80%; height: 200px;overflow: hidden; z-index: 0; border: 10px solid #ffc107;  }
.cms-product-cate li ul.cms-dot{border-bottom: solid 1px #e8e6e4;}
.cms-product-cate li ul.cms-dot li{width: 100%;display: block;}

@media (max-width:1199.98px) {
.bg-circle { width:40%;   height: 360px; }
 }

@media (max-width: 991.98px) {
.cms-product-cate li{  justify-content:center; margin:20px auto;  }
.cms-product-cate li figcaption .cms-bg {padding: 10px;}
.bg-circle {  height:500px; }
.cms-product-cate li figure{ width: 100%;margin:15px auto;  padding:0px 30px;  }
.cms-product-cate li figcaption { width:100%; margin-top:-10%;  margin-left:auto;  padding:15px;  }
.cms-product-cate li:nth-child(even) figcaption { margin-left:auto; margin-right: auto; }
.cms-product-cate h3 { font-size: 1.75rem;margin: 10px 0px 10px 0px;  } 
#cms-main .cms-product-cate p{ margin:0px;  font-size: 0.875rem;line-height: 1.25rem; }   
.cms-product-cate li .bg-circle{ width:80%; height:40%; margin: auto; }
#cms-main .cms-product-cate li figcaption a.cms-btn-02{display: none; }
}

 @media (max-width: 767.98px) {
 .cms-product-cate li{ justify-content:center; margin:20px auto;  }
.cms-product-cate li figcaption { width:100%; margin-top:-10%;  margin-left:auto;  padding:15px 0px;  }
#cms-main .cms-product-cate h3{  padding-left: 20px; font-size: 1.5rem;   }   
.cms-product-cate li figure{ padding:0px; align-content: flex-start;}
.cms-product-cate li .bg-circle{ width:100%; height:50%; margin: auto; }
}

@keyframes opacity {
0% { opacity: 1 }
65% { opacity: .5 }
to { opacity: 1 }
}
@keyframes bg-circle {
0% { transform: translateZ(0)   }
10% {transform: translate(0%, -10%) translate3d(0px, 50px, 0px); }
25% { transform:translate(0%, -18%) translate3d(0px, 0px, 0px);   }
50% {  transform: translate(0%, -20%) translate3d(0px, 0px, 0px); }
70% { transform: translate(0%, -10%) translate3d(0px, 0px, 0px);    }
to {  transform: translate(0%, -5%) translate3d(0px, 0px, 0px); }
}


/*----------------------------------------/
產品清單頁  cms-main-product-item  
----------------------------------------*/
.cms-main-product { width: 100%; padding:15px; margin-top:90px; position: relative;  }
.cms-main-product-item { width:100%;  margin:50px auto ;  padding:0px; display: flex; flex-wrap: wrap; overflow: hidden;  list-style: none;  background: #fff;}
.cms-main-product-item li { width: calc(100% / 4 - 30px); margin:30px 15px; padding: 15px; height: auto; position: relative;transition: all 0.5s ease 0s;  z-index: 1; overflow: hidden;  border-right:solid 1px #f3f3f3; border-bottom: solid 1px #f3f3f3;}
.cms-main-product-item li:nth-child(4n){margin-right: 0px;   border-right:none;}
.cms-main-product-item li:hover { transform: scale(0.95);}
.cms-main-product-item li a figure { position: relative;   width:100%; max-width:100%; height: auto;  margin: auto; overflow: hidden; transition: all 0.5s ease 0s; } 
.cms-main-product-item li a figure img {  width: 100%; max-width: 100%; transition: all 0.3s; -webkit-transform: translate3d(0,0px,0);transform: translate3d(0px,0px,0px);  }
.cms-main-product-item li:hover figure img {  opacity: 0.7;-webkit-transform: translate3d(0,-20,0);transform: translate3d(0,-20px,0); -webkit-filter:grayscale(1); -webkit-transition-delay: 0.15s;transition-delay: 0.15s;  }
#cms-main .cms-main-product-item li a h3{ margin: 0 auto; font-size:1.15rem; font-weight:700;  text-align: center;  color:#000; overflow: hidden;word-break: keep-all; word-wrap:break-word;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;font-family: 'Poppins', 'Microsoft JhengHei', "sans-serif"!important;  }
 .cms-main-product-item .slick-current {  }	
.cms-main-product-item .slick-dots {bottom:-30px;  }	
.cms-main-product-item .slick-prev { left:0; z-index: 11; }
.cms-main-product-item .slick-next { right:10px; z-index: 11; }
 
.btn-box { margin-top: auto;}
.cms-main-product-item li:nth-child(2n) .btn-box { text-align: left;}


 
@media (max-width: 767.98px) {
.cms-main-product-item li { width: calc(100% / 2 - 10px); margin: 10px 5px; height: auto; position: relative; transition: all 0.3s linear 0s; z-index: 1; background: #fff;  }
.cms-main-product-item li:nth-child(3n){margin-right: auto;}
.cms-main-product-item li:nth-child(2n){margin-right: 0;}
#cms-main .cms-main-product-item li a h3{ font-size:0.9rem; font-weight:400;  }
    
}
 
/*----------------------------------------/
圖片輪播區塊
----------------------------------------*/
ul.cms-slider-for{  height: auto; margin: 0 auto;  width: 100%; max-width:800px;position: relative;  }
ul.cms-slider-for li { width: 100%;  height: auto; margin:  auto; padding: 0px; position: relative; transition: all .5s ease; -webkit-transition: all .5s ease; moz-transition: all .5s ease;  -o-transition: all .5s ease;  -ms-transition: all .5s ease;  z-index: 99; }
ul.cms-slider-for li img{ width: 100%; max-width:90%;  z-index:999; position: relative; transition: all 0.4s ease-in-out;  -webkit-transition: all 0.4s ease-in-out;  -moz-transition: all 0.4s ease-in-out;  }
#cms-main ul.cms-slider-for .slick-dots {bottom:-20px;}
.cms-slider-for .slick-active { transition: all 0.4s ease-in-out;  -webkit-transition: all 0.4s ease-in-out;  -moz-transition: all 0.4s ease-in-out;}
.cms-slider-for .slick-prev {left: inherit;right: 50%;  margin-right: 45px;}
.cms-slider-for .slick-prev:after { content: ''; width: 38px; background: #999999; position: absolute;  height: 1px; top: 50%; right: -64px; transform: translate(0, -50%); -moz-transform: translate(0, -50%);  -o-transform: translate(0, -50%);  -webkit-transform: translate(0, -50%);}
.cms-slider-for .slick-next { right: inherit; left: 50%;  margin-left: 45px;}
.cms-slider-for .slick-prev,.cms-slider-for .slick-next { width: 36px;  height: 36px; margin-top: 0; top: 90%!important;  }
.cms-slider-for .slick-prev:before,.cms-slider-for .slick-next:before {width: 100%; display: block; height: 100%; opacity: 1; content: " ";}
.cms-slider-for .slick-current{opacity:1; transform: scale(1);  /*transform: translateY(-50px); */ }
 
ul.cms-slider-for:before { content:""; display: block; position: absolute; width: 60%; height: 400px; margin-top: -6%; background:#ffda86; z-index: 0; }




/*----------------------------------------/
btn區塊
----------------------------------------*/
.cms-product-group{width: 100%; max-width:800px; margin:0px auto; display: flex; flex-wrap: wrap; position: relative; }
.cms-product-group .btn{ margin: auto 2%;}
 

 /*----------------------------------------/
產品詳細內容區塊
----------------------------------------*/
.cms-main-product-wrapper {  width: 100%; max-width: 1400px;  margin: auto!important; padding: 0px 50px;  }
.cms-main-product-block{width:100%; max-width: 1200px; margin:5% auto auto auto; display: flex; }
.cms-main-product-left{width:60%; padding:0px;  position: relative; z-index: 0;}
.cms-main-product-right{width:40%; height: auto; margin:5% auto auto -8%;   display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; align-items: flex-start;position: relative;z-index: 2; }
@media only screen and (max-width: 999px) {
 .cms-main-product-wrapper { padding: 15px;  }
}
@media (max-width: 767.98px) {
.cms-main-product-left, .cms-main-product-right{width: 100%;padding:0px;  }
}
.cms-main-product-info{ width:100%; padding:15px 50px; margin: 0 auto; position: relative; z-index:3;  display: flex; flex-wrap: wrap; background-image: linear-gradient(to top, rgba(255,255,255,1) 20%, rgba(255,238,195,1) 100%); box-shadow: 3px 5px 8px rgba(0,0,0,.3);}
/*.cms-main-product-info:after { content:""; display: block; position: absolute; bottom: 0px;right: 0px; width: 20%; height: 20%;   background:#f3f3f3; z-index: 0; }
*/
#cms-main .cms-main-product-info h1{  padding:0px 0px 10px 0px; margin:10px 0px;text-align: left; width: 100%; display: block;  font-size:2rem; font-weight: 700; color:#000; word-spacing: normal; word-break:normal;position: relative;  }
#cms-main .cms-main-product-info h1::before { content: '';left: -130px; top:45%; width: 120px; height: 1px;position: absolute; background: linear-gradient(to left, #ffc636 0%, #ff4700 100%);  }
.cms-product-description{ padding:5px 0px; width: 100%; align-content: flex-start; }
#cms-main .cms-product-description p {margin-bottom: 15px;}
#cms-main .cms-product-description ul{width: 100%; margin: auto;}
#cms-main .cms-product-description ul li{width: 100%;margin:0px;padding: 5px 0px; display: flex; flex-wrap: wrap; align-content: center; align-items: center; font-size:1rem; line-height: 1.5rem;   }
#cms-main .cms-product-description ul li ul li{ }
#cms-main .cms-product-description ul li span.cms-item-title{width:auto; justify-content: flex-start; padding:10px 5px 10px 0px;color:#222629;  font-size:1.15rem; font-weight: 700; }
#cms-main .cms-product-description p strong{color:#483e39;}
#cms-main .cms-product-description ul.cms-dot{margin:10px 0px;}
#cms-main .cms-product-description ul.cms-dot li{ width: 100%; display: block; padding: 3px 15px; font-size:1rem; line-height:1.75rem; font-weight:400;  background: url(../images/icon/dot.svg)  no-repeat left 12px; background-size:6px;   }



  @media (max-width: 991.98px) {
.cms-main-product-info{padding:15px; }    
}
@media (max-width: 767.98px) {
 .cms-main-product-block{ flex-wrap: wrap; flex-direction: column; }
 .cms-main-product-info{  padding:0px 20px;}    
 .cms-main-product-right{ margin:5% auto auto auto; }
   
   
}


.cms-table-scroll { width: 100%;  overflow: hidden; overflow-x: auto;margin: auto;   padding: 20px; -webkit-overflow-scrolling: touch;  }
.cms-table-scroll::-webkit-scrollbar {width:16px; height:16px;}
.cms-table-scroll::-webkit-scrollbar-thumb { border-radius:80px;   -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2); background:#020065;}
.cms-table-scroll::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2); border-radius:15px;background:#e8f6f9;}

@media (max-width: 767.98px) {
.cms-table-scroll { width: 100%;  overflow: hidden; overflow-x: hidden;margin: auto;   padding: 20px 0px; -webkit-overflow-scrolling: touch;  }

}


.cms-pic-wrap{width:100%;min-width: 2000px; display: flex; flex-wrap: nowrap;}
.cms-pic{ width: 100%; max-width: 100%;  height: auto; }
.cms-pic img{ display: block;width: 100%; max-width: 100%;  height: auto; margin: auto;}

@media (max-width: 767.98px) {
.cms-pic-wrap{width:100%; max-width: 100%;  min-width: 100%;   flex-wrap: wrap; }

}
#cms-tabs-product .resp-tab-content { padding:0px 0px 30px 0px ;}
.resp-tab-content h4{ margin:2% 0;  font-size: 1.15rem; font-weight: 700; }
#cms-main .resp-tab-content p{ margin:1% 0; font-size: 1rem; font-weight: 700;  }
.edit{padding: 15px;}
/*---------------------------------
best-wrap
----------------------------------------*/
.cms-best-wrap{  width: 100%; max-width: 1160px; height: auto;  margin:0 auto 50px auto; padding:20px 0px 50px 0px;  overflow: hidden;  }
.cms-best-wrap .cms-main-product-item { width:100%; overflow: hidden; padding:30px 15px; border: solid 5px #ff9d00;}
.cms-best-wrap .cms-main-product-item li { width: calc(100% - 10px); margin: 10px 5px; padding: 15px 0px 30px 0px; height: auto; position: relative; transition: all 0.3s linear 0s; z-index: 1; background: #fff; border:none;  }
.cms-main-product-item li:hover figure img { transform: scale(0.8);   }
.cms-best-wrap .slick-dots li button:before{ color: #fff; }
.cms-best-wrap .slick-dots li.slick-active button:before { opacity: .75; color: #fff; }
#cms-main .cms-best-wrap .cms-main-product-item li a h3 {font-size: 1rem;}
 

.cms-best-wrap .slick-active { transition: all 0.4s ease-in-out;  -webkit-transition: all 0.4s ease-in-out;  -moz-transition: all 0.4s ease-in-out;}
.cms-best-wrap .slick-prev {left: inherit;right: 50%;  margin-right: 45px;   }
.cms-best-wrap .slick-prev:after { content: ''; width: 38px; background: #999999; position: absolute;  height: 1px; top: 50%; right: -64px; transform: translate(0, -50%); -moz-transform: translate(0, -50%);  -o-transform: translate(0, -50%);  -webkit-transform: translate(0, -50%);}
.cms-best-wrap .slick-next { right: inherit; left: 50%;  margin-left: 45px;}
.cms-best-wrap .slick-prev,.cms-best-wrap .slick-next { width: 36px;  height: 36px; margin-top: 0; top: 95%!important;  }
.cms-best-wrap .slick-prev:before,.cms-best-wrap .slick-next:before {width: 100%; display: block; height: 100%; opacity: 1; content: " ";}




.cms-main-product-link{ color: #ef3d6f; display: inline-block; margin:20px auto;  width: auto; position: relative;  left: 0;  overflow: hidden;transition:all .3s}
.cms-main-product-link a{color: #fff;}
.cms-main-product-link .cms-btn-text{display:inline-block;padding-right:22px; font-size: 1.25rem; transition:all .3s}
.cms-main-product-link .cms-left-arrow{position:absolute;left:-30px;top:50%;transform:translateY(-50%);transition:all .3s;font-size:14px;margin-top:1px}
.cms-main-product-link .cms-right-arrow{position:absolute;right:0;top:50%;transform:translateY(-50%);transition:all .3s;font-size:14px}
.cms-main-product-link i{font-weight:bold}
.cms-main-product-link:hover .cms-btn-text{left:6px; padding-right:0;padding-left:22px}
.cms-main-product-link:hover .cms-left-arrow {left:0px}
.cms-main-product-link:hover .cms-right-arrow {right:-30px}
.cms-bg-2{background-image: linear-gradient(233deg, #c30d23, #3e0200);}
.cms-bg-3{background-image: linear-gradient(233deg, #d3d00a, #eeec64);}
.cms-bg-4{background-image: linear-gradient(233deg, #c3beb9, #f9f8f8);}


 

 /* cms-main-download =====================================================================*/
 
 


 
.p_type_list{ width: 100%; max-width: 1400px; padding: 20px 25px;  margin: auto;}
.p_type_list .page_box .img .cover img, .p_type_list .page_box .btn{ -webkit-transition: all .4s; -moz-transition: all .4s; -ms-transition: all .4s; -o-transition: all .4s;  transition: all .4s;}
.p_type_list .page_box { position: relative; display: block;}
.p_type_list .page_box .img { position: relative; background: url(../images/index/index_p_bg.jpg) center/cover;}
.p_type_list .page_box .img .cover { overflow: hidden; position: absolute; bottom: 0; left: 0; width: 100%; height: 550px; text-align: center;}
.p_type_list .page_box .img .cover img { position: relative; max-width: inherit; animation: bg-circle 30s ease-in-out infinite;}
.p_type_list .page_box .txt.p { margin-top: -100px;}
.p_type_list .page_box .txt { position: relative; margin-top: -200px; eft: 0; width: 100%; background: #FFF; display: inline-block; vertical-align: text-bottom;}
.p_type_list .page_box .txt h4 { color: #333; display: inline-block; vertical-align: text-bottom;}
.p_type_list .page_box:nth-child(odd) .btn {right: 75%;}
.p_type_list .page_box .btn { position: absolute; width: 100px; height: 100px; background: #04285f; color: #fff; text-align: center; vertical-align: middle;}  
.p_type_list .page_box > div { position: relative;}
.p_type_list .page_box .btn span { display: inline-block; font-size: 35px; line-height: 35px; position: relative; top: 5px;}
 
@media screen and (min-width: 1400px){
.page_box { border-bottom: none; margin-bottom: 200px;}
.p_type_list .page_box .img { height: 470px;} 
.p_type_list .page_box .img .cover {  height: 550px;}
.p_type_list .page_box:nth-child(odd) .img .cover img { padding-left: 100px;}   
.p_type_list .page_box .img .cover img { height: 130%; top: 85px;}  
.p_type_list .page_box:nth-child(odd) .txt { padding: 100px 120px 0 0;}   
 h4 { font-size: 30px; line-height: 40px;}   
 .p_type_list .page_box .btn { top: 270px;}   
   

}
@media screen and (min-width: 1200px){
.p_type_list .page_box .img { height: 400px;} 
.p_type_list .page_box .img .cover {  height: 480px;}
.p_type_list .page_box:nth-child(odd) .img .cover img { padding-left:90px;}    
.p_type_list .page_box .img .cover img { height: 150%; top: 100px;}   
.p_type_list .page_box:nth-child(odd) .txt { padding: 90px 110px 0 0;}
 h4 { font-size:27px; line-height: 37px;}   
 .p_type_list .page_box .btn { top: 200px;}   
}

@media screen and (min-width: 992px){
.page_box { border-bottom: none;}
.p_type_list .page_box .img { height: 350px;} 
.p_type_list .page_box .img .cover {  height: 450px;}
.p_type_list .page_box:nth-child(odd) .img .cover img { padding-left: 80px;}    
.p_type_list .page_box .img .cover img { height: 150%; top: 75px;}   
.p_type_list .page_box:nth-child(odd) .txt { padding: 80px 100px 0 0;} 
 h4 { font-size:25px; line-height: 35px;} 
 .p_type_list .page_box .btn { top: 150px;} 
   
  
}
@media screen and (min-width: 768px){
.page_box { margin-bottom: 75px;  padding-bottom: 75px;}
.p_type_list .page_box .img { height: 300px;} 
.p_type_list .page_box .img .cover {  height: 400px;}
.p_type_list .page_box:nth-child(odd) .img .cover img { padding-left:50px;}    
.p_type_list .page_box .img .cover img { height: 150%; top: 100px;}   
.p_type_list .page_box:nth-child(odd) .txt {padding: 60px 60px 0 0;} 
 h4 { font-size:22px; line-height: 32px;}  
.p_type_list .page_box .btn { top: 100px;}
   
}
 
.p_type_list .page_box > div.no_pad { padding: 0;}
.p_type_list .page_box > div {position: relative;}