.main-area.top { background-color:#fff;}
.main-area.top .main-content { padding:0px;  }

.product-arera{ padding: 0px;  margin-top:30px; width: 100%; display: flex; flex-wrap: wrap;}
.product-arera .main-content {width:calc(100% - 300px);  position: relative;  padding:0px 0px 30px 0px; margin-top:0px; margin-bottom: 30px; border-radius: 20px; background: #fff;  }

.product-arera .main-content .description{ margin:20px auto; padding: 0px 30px }

.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:30px; margin-top: 0px; }
}
 @media (max-width: 992px) {
.product-arera{   margin-top:auto;}
.product-arera .main-content {width:100%;  padding:0px;   margin-top: 0px;  box-shadow: none;  }
}
@media (max-width: 840px) {
.main-area.top .product-arera{margin-top:0px; }	
.product-arera{ margin-top:0px;  padding:0px;}
}
@media (max-width: 767.98px) {
.product-arera .main-content .description{ padding: 0px; }	
.product-arera{  padding:0px;}
}
 
 /*font-size*/
.title { font-size: 1.25rem; font-weight: 700; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); }
@media (min-width: 768px) {
.title {font-size: 1.5rem; }
}

@media (min-width: 1100px) {
.title {font-size: 1.75rem; }
}
@media (min-width: 1300px) {
.title {font-size: 1.875rem; }
}
@media (min-width: 1600px) {
.title {font-size: 2rem; }
}


 

.type-list { background:#051f4c;padding-top:75px; margin-bottom: 70px;}
.bg-pro{  background-color: #e5eaef; border-radius:  30px 350px 30px 30px;  }
.product{width: 100%; padding: 50px 0px; display: flex; flex-wrap: wrap;   position: relative; z-index: 1;}
@media (max-width: 992px) {
.product{   padding:0px 0px 50px 0px;  }    
}

@media (min-width: 1600px) {
.product{width: 100%; padding: 50px ;  margin: auto; }
}

.product li {  width: calc(100%/2 - 20px); margin: 30px 10px;  transition: all 0.3s linear 0s; list-style: none;position: relative; z-index: 1; }
.product li .item{width: 100%; padding: 0px; display: flex; flex-wrap: wrap;align-items: flex-start; overflow: hidden;background-image: linear-gradient(-135deg, #d8f0fb 0%, #2e97d6 100%);border-radius:  25px;}
/*.product li:nth-child(even) .item{flex-direction: row-reverse}
*//*font-size*/
.product li h3 { margin: 20px 0px; color:#191970; font-size:1.5rem; font-weight: 900; line-height:2rem; overflow: hidden;white-space: pre-line;word-break:normal; word-wrap:break-word; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp:3;  -webkit-box-orient: vertical;  }
.product li h3 a{color:#000;}
.product li h3:before{ position: absolute; transition: 0.3s; content: ""; width: 100%; left: 0; bottom: 0; height: 1px; background:#fff;}
.product li .photo { width: 45%; height: auto; padding:0px; margin: auto;  overflow: hidden;  position: relative;  }
.product li .photo figure{ width: 100%;  padding-top:100%;height: 0;  object-fit: cover; overflow: hidden; position: relative; transition: all 0.5s ease 0s;   } 
.product li:hover .photo figure{ transform: scale(1.1);overflow: hidden; transition: 0.3s linear;   } 
.product li:hover .item{background-image: linear-gradient(75deg, #d8f0fb 0%, #2e97d6 100%);} 

.product li .inner-box {width:55%;margin:0 ; padding: 20px 20px 20px 10px;  position: relative; z-index: 9; transition: all .4s ease;   }
.product li .inner-box .inner-txt{  min-height: 220px;  margin: 0px 0px 20px auto; overflow: hidden;  }
.product li .inner-box .desc { font-size:.9rem; line-height:1.5rem; color: #000;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow-wrap: break-word; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1);}

.product li .inner-box .series{margin:0px 10px;}
.product li .inner-box .series ul{width: 100%;margin:0px 0px 10px 0px;padding: 0px; display: flex;flex-wrap: wrap; }
.product li .inner-box .series ul li{width:calc(100%);margin:0px 0px 2px 0px;padding: 0px 0px 0px 20px;font-size:0.9rem; font-weight: 400; position: relative  }
.product li .inner-box .series ul li::after{content: ""; width:8px; height: 8px; position: absolute; left:0px; top:8px; border-radius:99rem;  background:#0e8dd0}
.product li .inner-box .series ul li:nth-child(even) ul li:nth-child(even):after{display: none;}



.product li .inner-box .series ul li a{ color:#000;  }
.product li .inner-box .series ul li ul{margin:20px 0px 0px 0px;}
.product li .inner-box .series ul li ul li{width:100%;margin: 0px 0px 10px 0px;padding: 0px;font-size: 1rem; font-weight: 400;  }
.product li .inner-box .series ul li ul li a{ color:#334f60; border-bottom:none  }
.product li .inner-box .series ul li a:hover{ color:#e60013;  }

.product li .inner-box .btn-1{max-width: 200px;}

.top-title { flex: 1 1 auto; text-transform: uppercase;padding-bottom: 10px; position: relative;  overflow: hidden; transition: 0.3s;}
.top-title:after { position: absolute; transition: 0.3s; content: ""; width:20%; left: 0; bottom: 0; height: 3px; background:#e60013;}
.top-title:hover { cursor: pointer;}
.top-title:hover:after { width: 100%; left: 0;}

 
@media (max-width:1024px) {
.product li { width: 100%; margin:30px auto;}   
 
 }
@media (max-width:767.98px) {
.product li .photo { width: 100%;   }
.product li .inner-box {width:100%; padding: 20px; }
  .product li h3 { min-height:50px;  font-size:1.375rem; line-height: 1.5rem; }   
 }
	
@media (max-width:320px) {
 .product li h3 {font-size:1.5rem; }   
.product li h3 span{font-size: .9rem;}
	.product .btn-01{width: auto}
	.product li .inner-box .series{margin:0px;}

}

.grid-box { margin: 30px auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex ;  -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap ; align-items: center;}
.grid-box .inner-pic{width:30%; border-radius:0px 30px 0px 0px; overflow: hidden}
.grid-box .inner-pic img{  border-radius:0px 30px 0px 0px; overflow: hidden}
.grid-box .inner-txt{width:70%;padding: 0px 20px; }
.grid-box .inner-txt h3 { margin: 20px 0px; color:#0087ce; font-size:1.375rem; font-weight: 700; line-height:2rem;    }
.grid-box .inner-txt .inner-desc{padding: 20px 0px;}
 @media (max-width:767.98px) {
.grid-box .inner-pic{width:100%;  }
.grid-box .inner-txt{width:100%;padding: 0px; }
 }
 
.cable-table{width: 100%; margin-bottom: 1rem; }
.cable-table table{width: 100%; margin-bottom: 1rem; font-size: 80%; font-family: "Open Sans", serif; background-color: #fff; border: solid 2px  #0b6db2}
.cable-table table tbody th{padding: 1rem; background-color: #0D6CB2; color: #fff; font-weight: 700; }
.cable-table table tbody td{padding: 0.1rem; background-color: #fff; color: #000; text-align: center;font-size: 80%;font-weight: 500;border-bottom: solid 1px #d8eaf7 }
.cable-table .attributes {width: 150px; background-color: #e8f5ff;border-bottom: solid 1px #e8f5ff }
.cable-table .attributes span{ font-size: 80%; }

ul.no-bullet, ol.no-bullet { margin-left: 0; list-style: none;}
ul.no-bullet li, ol.no-bullet li{ font-size: 80%;font-weight: 500;  }



/*--分類new-tag --*/
.new-tag {  width: auto; padding:0px 5px; font-size: 0.75rem; color: #fff;  text-transform: capitalize;  word-break: keep-all;  position: absolute; z-index: 99;left:0px; top:0px; background-image: linear-gradient(135deg, #1c73e8 10%, #215285 100%); border-radius:0px ;  }
.new-tag a{color:#fff;}
.new-tag-red {  background-image: linear-gradient(135deg, #E91E63 10%, #e91e1e 100%);}
@media (max-width:992px) {
  }
@media (max-width:767.98px) {
.new-tag {  padding:2px 4px; font-size: .5rem;    }
 }


 

 /*----------------------------------------/
產品清單頁  cms-main-.product-item  
----------------------------------------*/
.product-item { width:100%; margin:0px auto;  padding:20px 0px; display: flex; flex-wrap: wrap; position: relative; }

 @media (max-width:767.98px) {
.product-item { width: calc( 100% + 20px); margin:0px -10px;   }	 
 
}

.product-item li { width: calc( 100%/4 - 30px); margin:40px 15px 40px 15px; padding:0px ; display: flex; flex-wrap: wrap;align-self: flex-start;  align-content: flex-start; align-items: flex-start; z-index: 1; list-style: none;  transition: all 0.3s linear 0s; position: relative;   }
.product-item li figure{  width: 100%; padding-bottom:100%; height: 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s ease 0s; border:solid 1px #f0f0f0;-webkit-box-shadow: 0px 2px 3px 3px rgba(0, 0, 0, 0.05);box-shadow:0px 2px 3px 3px rgba(0, 0, 0, 0.05); border-radius:20px;   }
 
 
/*--橫式樣式--*/
.product-item li.photo-v figure{  width: 100%; padding-bottom:50%; height: 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s ease 0s;  }
.product-item li:hover img { transform: scale(1.05);  opacity: 1; }
.product-item li figure:before{ opacity: 0; content: "";width: 100%; height: 100%;position: absolute;z-index: 999;transform: translateY(-100%);background-image: linear-gradient(-135deg, #d8f0fb 0%, #2e97d6 100%);transition: all 0.5s 0s ease;pointer-events: none }

.product-item li:hover figure:before{ opacity: 0.5;  transform: translateY(0px); transition: all 0.5s 0s ease; }
.product-item .inner{  width: 100%;  padding: 10px; position: relative;} 
.product-item .inner h3{ width: 100%;margin:10px 0px; font-weight:400; font-size: 1.125rem;  color:#000; line-height:1.75rem;overflow: hidden;white-space: pre-line;word-break:normal; word-wrap:break-word; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical; }
.product-item .inner a h3 {  color:#000; }
.product-item .inner a p{ width: 100%; margin:5px 0px; font-size: .9rem; line-height: 1.375rem; font-weight: 400; color:#312927;  overflow: hidden; white-space:pre-wrap;word-break:normal; word-wrap:break-word; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;} 
.product-item .inner-txt{min-height: 68px;  font-size: .875rem;  line-height: 1.35rem;color:#312927; overflow: hidden;white-space: pre-line;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 a h3,.product-item li:hover a p{color:#e60013;}
 @media only screen and (max-width:1180px){
.product-item .inner h3{  font-size:1rem; line-height:1.5rem; }
}
@media only screen and (max-width:1024px){
.product-item li {width: calc(100%/3 - 30px); margin:30px 15px; padding:0px; }
}
@media (max-width:992px) {
.product-item .inner a p{   line-height: 1.125rem;  } 
}
@media (max-width: 767.98px) {
.product-item li { width: calc(100%/2 - 20px); margin: 10px 10px; height: auto; position: relative; transition: all 0.3s linear 0s; z-index: 1;   } 
}
@media (max-width:320px) {
.product-item li {width: calc(100%  - 30px);  margin: 10px auto;   }
}

/*---------------------------------
best-wrap
----------------------------------------*/
.best-wrap{  width: 100%;  margin:0 auto; padding:20px 0px;  background-image: linear-gradient(to top, #fff 0%,#eef6ff 100%);  }
.best-wrap .product-item {width: calc(100% + 20px);  height: auto;  margin:0 auto; padding: 20px;  }
.best-wrap .product-item li{  width: calc(100% - 20px); margin: 10px; } 
.best-wrap .product-item .inner h3{font-size: 1rem; line-height: 1.5rem;}
.best-wrap .slick-dots li {  width: 8px; height: 8px;  margin: 0 7.5px;  vertical-align: 6px; }

 i.arrow-r { width: 40px; height: 40px; top: auto; bottom: 10px; right: 0; margin: 3px 10px auto auto ; position: absolute;background: url("/zh-TW/images/theme-b67/icon/arrow-right-f.svg") no-repeat right top;   -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
@media only screen and (max-width:1180px){
.best-wrap .product-item .inner h3{  font-size:1rem; line-height:1.5rem; }
}
@media only screen and (max-width:992px){
.best-wrap{ background-image: none;}
}
@media (max-width: 767.98px) {
.best-wrap .product-item{ width: calc(100% + 40px); margin:0px -20px;}	
 }

@media (max-width:320px) {
.best-wrap .product-item{ width: 100%; margin:0px;}	
.best-wrap .product-item li {width: calc(100%  - 20px);  margin:0px 10px;   }
}

  
/*----------------------------------------/
產品詳細內容區塊
----------------------------------------*/
.main-product{ background-image: linear-gradient(to top, #e7f1f6 0%, #fff 10%, #fff 100%);-webkit-box-shadow: 0px 0px 17.52px 6.48px rgba(0, 0, 0, 0.05);box-shadow: 0px 0px 17.52px 6.48px rgba(0, 0, 0, 0.05); }
.product-wrapper { width: 100%; margin:auto; padding:0px;  display: flex;  flex-wrap: wrap; justify-content: space-between;  position: relative;}

/*----------------------------------------/
圖片輪播區塊
----------------------------------------*/
.product-left{width:calc(50% - 130px);padding: 50px 15px; max-height:100vh; position: sticky; overflow-y: scroll;   z-index: 1;background-color:transparent;  order: 2; }

@media (max-width:1024px) {
.product-left{width:calc(50% - 130px);  height: auto;   padding:0px;}   
}
@media (max-width:840px) {
.product-left{width:100%;padding: 5px 0px 0px 0px; height: auto;  max-height:none; order: 2;position: relative;  }  
}

.product-left::-webkit-scrollbar { display: none;-webkit-appearance: none;}
.product-left::-webkit-scrollbar:vertical { width: 6px; }
.product-left::-webkit-scrollbar:horizontal {  height: 12px;}
.product-left::-webkit-scrollbar-thumb { background-color:#000; border-radius: 5px; border:solid 2px #dfe7eb;}
.product-left::-webkit-scrollbar-track { border-radius: 0px;  background-color:#fff;}

.product-right{ width:50%;   padding:20px 0px; margin:0px auto;order: 1;   }
.product-nav{ width:100px;  padding:20px 0px; margin:0px auto; order: 3;   }
@media (max-width:840px) {
.product-right{ width:100%; margin: auto; padding: 10px 0px; order: 1;}
.product-nav{ width:100%;  padding:20px 0px; margin:0px auto; order: 3;   }
}
@media (max-width:767.98px) {
.product-right{  padding: 10px 0px; border:none;  }
}
 
.box-for{width:calc(100% - 20%); }
.box-nav{width:20%; padding:0px 10px;}
@media (max-width:1024px) {
.box-nav{ padding:0px;}
}
@media (max-width:767.98px) {
.box-nav{width:100%; order: 3; margin: 0px; padding: 10px 0px;  }
.box-for{width:100%; order: 2; }
}

.slider-for{width:100%; margin: 0px; padding: 0px; list-style: none;  }
.slider-for li{ position: relative; width: 100%;  margin:0px;padding:0px 10px; border-radius:15px; overflow: hidden; }
.slider-for li img{width: 100%; border-radius:15px; overflow: hidden;  }
.slider-for .slick-prev,.slider-for .slick-next{  top:35%;}

.slider-nav{ width:100%; height: auto; margin:20px 0px 0px 0px; padding:0px;   }
.slider-nav li{ width: 100%; opacity:1; margin:10px;padding: 5px; border-radius:10px;   }
.slider-nav li img{ width:100%; margin:0px; padding:0px; border: solid 1px #eee;border-radius:10px; }
.slider-nav li.slick-current img,.slider-nav li:focus img{opacity: 1;  border: solid 2px #29b8ed}
 
.slider-for .slick-prev, .slider-for .slick-next{  background-color: #29b8ed;border: solid 2px #29b8ed }


@media (max-width:1024px) {
.slider-nav li{  margin:5px;padding:0px;  }
}

@media (max-width:767.98px) {
.slider-nav li{ margin:10px 5px;padding: 0px; display: flex;  }
.slider-for li{  padding:0px;}
.btn-box.download,.btn-box.inquiry{transform: scale(.85)}
}
 
/*----------------------------------------/
上一筆 下一筆 btn區塊
----------------------------------------*/
.product-group{width: 100%;  margin:10px 0px; border-radius:0px; }
.product-group .btn{ width: 100px; height: 100px; margin: 0px auto 10px auto; display: flex; flex-wrap: wrap;justify-content: center; align-items: center;  background-color:#edf6ff;  border-radius:15px;  border: none;overflow: hidden;box-shadow: 0px 0px 13px 0px rgba(26, 141, 226, .5); }

.product-group .btn:hover{  background-color:#bdd3ea; }

@media (max-width:840px) {
.product-group{ display: flex; flex-wrap: wrap;justify-content: space-around;}
.product-group .btn{ width: 120px; height: 120px; margin:10px; }
}

@media (max-width:420px) {
.product-group .btn{ width:72px; height:72px; margin:10px 5px; }
.product-group .btn-01{ line-height:1.125rem; }	
.product-group .btn-01 i {  margin:5px auto;}	
}

@media (max-width:380px) {
.product-group .btn{ width: 62px; height:62px;}
}
@media (max-width:320px) {
.product-group{  justify-content: center}
.product-group .btn{ width:72px; height:72px; margin:10px 15px;}
}
@media (max-width:280px) {
.product-group .btn{  width: 62px; height:62px;margin:10px 15px;}	
}
 
/*----------------------------------------/
social-icons
----------------------------------------*/
.social-wrap{  width: 100%; color:#555;  display: flex; flex-wrap: nowrap; justify-content: flex-start; align-content: center; align-items: center; font-size:0.875rem;   }
.social-wrap span{width:auto;}
.social-wrap .social-icons{ width: 70%;  }
.social-wrap .social-icons{justify-content: flex-start;align-content: center; align-items: center; font-size: 0.875rem;}
.social-wrap .social-icons li{ width: 26px!important; height: 26px;  margin:5px; background-color: #555 }
.social-wrap .social-icons li:hover{  background-color:#e60012; border: solid 1px #e60012;  }
.social-wrap .social-icons li i{ background-size:14px;  }
.btn.inquiry{  background-color:#0c8dd0; }
 

.product-info{ width:100%; padding:0px 0px 0px 20px; display: flex; flex-wrap: wrap;  align-content: flex-start; align-items: flex-start;  }
.product-info-title { width: 100%;   padding:0px 0px 10px 0px; }
.product-info-title h1{ font-weight: 700; font-size: 26px; color:#000; letter-spacing: 1px;  }
.product-info-title h2{  width: 100%; margin-bottom: 30px; font-size:1.15rem; font-weight: 700; color:#000;  word-spacing: normal; word-break:normal; }
.product-info-title p{  width: 100%; margin: 5px 0px; font-size:1.15rem; font-weight: 700; color:#727272;  word-spacing: normal; word-break:normal;  }
@media (min-width:1600px) {
.product-info-title h1{  font-size: 1.875rem;  }
}
@media (max-width:767.98px) {
.product-info{  padding:0px;  }    
}


.product-description{ width: 100%; padding:10px 0px; color:#888; font-family: 'Poppins', sans-serif; }
.product-description p {width: 100%; margin: 5px 0px; font-size:0.9rem; font-weight: 400; color:#333;  word-spacing: normal; word-break:normal;}
.product-description span {  word-spacing: normal; word-break:normal; }
.product-description p strong{color:#000;}
.product-info-title .btn{ width: 50%;  }
.specbox { width: 100%; margin: 0;padding:0px; display: flex; -ms-flex-wrap: wrap;  flex-wrap: wrap;  justify-content: flex-start; }
.specbox .name { width: 100%; margin:10px 0px; color:#0e8dd0; font-weight:700; font-size:1.175rem; }
.spec-list{ width: 100%;  margin:10px 0px;padding: 0px 0px 0px 10px; position: relative; list-style: decimal; list-style-position: inherit}
.spec-list li{ width: 100%; padding:8px 0px; margin:0px; font-size:.85rem; line-height:1.125rem; font-weight:400; color:#858585; border-bottom: solid 1px rgba(0,0,0,.0875);}



.spec-list li:nth-child(even){background-color: #f1f1f1;} 
@media (max-width:767.98px) {
.spec-list{  padding: 0px 0px 0px 20px; list-style-position:inherit}
 .spec-list.half li{ width:100%;}  	
}


.specbox-2{margin:40px auto;font-family: 'Poppins', sans-serif;}
.specbox-2 .name { width: 100%;  margin:40px 0px 20px 0px ;  color:#2da6e0; font-weight:700; font-size:1rem; }
.spec-title { width: auto;padding: 0px 10px; margin-bottom: 10px;}
.spec-title p{ font-size: .875rem; color: #666;}
.item-title { width: 100%; }    
.item-txt {  padding: 0px 10px; margin-bottom: 10px;}
.specbox-panel { width: calc(100%/2 - 20px); margin: 10px; display: flex; flex-wrap: wrap; align-items: flex-start; flex-direction: column;  }
.way-delivery{ width: 150px; font-size:0.9rem; font-weight: 700;  padding:2px 10px 2px 0px;  color:#2da6e0;  }
.way-txt{ font-size:0.9rem; font-weight: 400;  padding:2px 0px;  }
@media (max-width:767.98px) {
.way-delivery{ width:100%; display:block; padding: 0px; text-align: left;  }
.way-txt{ width:100%; padding: 0px;   }
}

.btmline { border-bottom: 1px solid #e8e8e8; padding-bottom: 1.25rem; margin-bottom: 1.25rem; display: block;}


 
.pdd-toggle-area{ position: relative;width: 100%;margin: 30px 0px 0px 0px; border: 1px solid #f2f2f2; display: flex;  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);z-index: 3 }
.pdd-toggle-area:before { content: ""; display: block; width: 1px; height: 100%; border-left: 1px solid #e5e5e5; position: absolute; left: 50%; pointer-events: none; z-index: 6; transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) }
.pdd-toggle-area a { width: 50%;height:3vw; display: flex; align-items: center; text-align: center; justify-content: center; position: relative; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1)}
.pdd-toggle-area a:after { content: ""; position: absolute;  width: 100%; height: 100%; background: linear-gradient(to right, #3676be, #292487); transform-origin: center bottom; transform: scaleY(0); left: 0;  top: 0;  z-index: 1; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1)}
.pdd-toggle-area a .fz-C, .pdd-toggle-area a .icon { display: inline-block; margin-left: 10px; transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);  position: relative; z-index: 3;font-weight: 600; color: #000}
.pdd-toggle-area a:nth-child(1){background-color:#f2f2f2; }
.pdd-toggle-area a:nth-child(2){background-color:#e5e5e5; }
.pdd-toggle-area a .icon:before { width: 1rem; height: 1rem }
.pdd-toggle-area a:hover { color: #fff; background-color:#2da6e0 }
.pdd-toggle-area a:hover span { color: #fff;  }
@media (min-width: 0) and (max-width: 979px) {
.pdd-toggle-area a { height: 52px }
.pdd-toggle-area a .fz-C { font-size: .875rem }
}
@media (max-width:767.98px) {
.pdd-toggle-area{  margin: 30px 0px;}   
.pdd-toggle-area a { height: 36px }
}

.icon-down{width: 12px; height: 12px; }
.sec1 { position: relative; display: -webkit-box; display: -ms-flexbox;  display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;  margin-bottom: 100%;  width: 100%;  min-height: 800px; height: calc(100vh - 130px); background-color: #fff;}
  
/*----------------------------------------/
自訂編輯區塊
----------------------------------------*/
.edit{width: 100%; max-width: 1160px; padding:15px 5px; margin: auto;}
.edit h4 img{display: block; width: 100%; max-width:600px;  margin: 15px auto!important;}
.edit .description{display: block; width: 100%; max-width:680px;  margin: 15px auto!important;}
.w5{ width: 50%; display: flex; flex-wrap: wrap; align-items: center;}
 
.spec{ width: 100%;  margin: auto; list-style: none; padding:50px 0px; counter-reset: index; }
.spec li { width: calc(100% - 56px); padding: 0px; margin-bottom: 15px; display: block;   counter-increment: index; position: relative;}
.spec li::before { margin-right: 20px; padding:5px; z-index: 3; content: counters(index, ".", decimal-leading-zero); font-size: 1.125rem; text-align: center;  font-weight: 700; font-variant-numeric: tabular-nums; align-self:center; ; background-attachment: fixed;  -webkit-background-clip: text; -webkit-text-fill-color: #fff;  background:#215284; border-radius:99rem;}
.spec li:hover{ background:#f8f7f7;}
.spec li .m-tag{ margin: 2px 5px; height: 26px; padding:0px 5px 2px 5px; background-color: #f66a2c; border-radius:10px; color: #fff; text-align: center;  position: relative;}
@media (max-width:768px) {
.spec li::before {display: block; margin: 0px; width:40px; height: 40px;}
.spec li { width:100%; }
}


/*table css*/
:root { --stickyBackground: #eee; --borderColor: #c9cccf;}
.table-wrapper { width: 100%; height: auto;  margin: 30px auto;  overflow: auto; }
@media (max-width: 991.98px) {
.table-wrapper { width: 100%; height: 320px; border: 1px solid var(--borderColor); overflow: auto;}
}
.datatable { width: 100%; border-spacing: 0; margin: auto;background-color:#fff;}
@media (max-width: 991.98px) {
.datatable { width: 100%;}
}

.datatable thead { font-size: 12px; line-height: 16px; letter-spacing: 0.05em; font-weight: 700; text-transform: uppercase;}
.datatable tbody { font-size: .9rem;}
.datatable th { font-size:1rem; font-weight: 700; padding: 15px; white-space: nowrap; border-top: 2px solid #000;  border-bottom: 2px solid #000;  }
.datatable td { font-size:.9rem; padding: 10px 15px; white-space: nowrap; border: 1px solid var(--borderColor);   }
.datatable thead td{ color: #000;  font-weight: 700; }
/*.datatable tr:nth-child(even) {background-color:#ededed; }*/
.datatable tr.sticky {color: #000; font-weight: 700; position: sticky;  top: 0;  z-index: 1;  background: #fff;box-shadow: 0 0 6px rgba(0,0,0,0.25);}
.datatable th.sticky,.datatable td.sticky {  color: #000;  font-weight: 700;  position: sticky; left: 0; background: var(--stickyBackground);}
.datatable th.sticky::after,.datatable td.sticky::after {  content: ""; position: absolute; right: -6px; top: 0; bottom: -1px;  width: 5px; border-left: 1px solid var(--borderColor); background: linear-gradient(90deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 100%);}
.datatable th.sticky::before,.datatable td.sticky::before { content: ""; position: absolute; left: -6px; top: 0; bottom: -1px;  width: 5px; border-right: 1px solid var(--borderColor); background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 100%);}
.datatable td .wrap { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center}

.datatable span.txt-r{ display: flex;text-align: right}
.datatable span.txt-name{ display: flex;flex-direction: column;  }
.pic-14{width: 66px; height: 66px;  }
@media (max-width:320px) {
.datatable tr.sticky {   position: relative;  }
.datatable th.sticky,.datatable td.sticky {  position: relative; }
}


.spec-box{position: relative}
.spec-box .title-left{  width: 100%!important;  display: block; margin: 0; padding:20px 0px 10px 0px;   cursor: pointer; position: relative; }
.spec-box .title-left::before {position: absolute;  right:0px; top:30px; margin-right: 10px; content: ""; display: inline-block; vertical-align: middle; margin-top:10px; width:16px; height:16px; background-color:transparent;  border-top: 4px solid #e60012; border-right: 4px solid #e60012; -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: transform .5s; transition: transform .5s; }


.spec-box .spec-table {   height: auto; }
.spec-box.active .title-3::before { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.spec-box.active .spec-table { max-height: 0; overflow: hidden; padding:0px; }

 
.video { width:600px;margin: 50px auto; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center;  position: relative; transition: all 0.3s linear 0s; 
border: 1px solid #fff3eb;background: #fffaee;  box-shadow: 0px 2px 4px rgba(172, 184 ,204 ,.25), 0px 4px 4px rgba(172, 184 ,204 ,.2), 0px 8px 8px rgba(172, 184 ,204 ,.15), 0px 16px 16px rgba(172, 184 ,204 ,.1), 0px 24px 24px rgba(172, 184 ,204 ,.25);mix-blend-mode: multiply; border-radius:15px;  overflow: hidden;  }
.video figure{ position: relative; width:100%;  height: 0; padding:75% 0px 0px 0px; overflow: hidden;object-fit: contain;background-color: #fff; box-shadow: 0px 1px 9px rgba(0,0,0,.1);  transition: all 0.5s ease 0s; }
.video figure img { max-width: 100%; height: auto; transition: all .35s ease;  }
.video:hover figure{  transform: scale(1.05)}
.video-title { width: 100%; max-height: 56.7px; margin: auto; padding:10px 0px; color:#565656; font-size:1rem; line-height: 1.375rem;  font-weight:400; overflow: hidden; word-break:normal;  text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical; }
.video .btn-play {   margin: auto; z-index:99; }  
@media (max-width: 768px) {
.video { width:100%; padding:0px; }   
.video li{ width: calc(100%/2 - 50px); margin: 50px 25px;  }
}

@media (max-width: 767.98px) {
.video { width: 100%; margin: 30px auto;}
.fancybox-slide--iframe .fancybox-content { padding: 0px;  width: 100%!important; height: 80%; max-width: calc(100% - 10px); max-height: calc(100% - 100px);}
}


 /*Application photo Styles 1
=================================*/
.application-item { width:calc(100%  + 20px); margin:30px auto; padding:0px; display: flex;flex-wrap: wrap;  position: relative; z-index: 99;}
.application-item li { width:calc(100%/3  - 20px); margin:50px 10px;padding:0px; list-style: none;   transition: all 0.5s ease 0s;  position: relative; z-index: 9;}
.application-item li:hover .ad::before{ opacity:0;   }
.application-item li:hover .ad figure img {transform: scale(1.05); }
@media (max-width:840px) {
.application-item { width:100%; }	
.application-item li { width:calc(100%/2  - 20px); margin:10px }
}
@media (max-width:320px) {
.application-item li { width:100%; margin:10px auto}
	
}


.ad{ overflow: hidden; margin:0px; padding:0px;  position: relative;z-index: 0}
.ad figure{ display: block; width: 100%; height: auto;  object-fit: cover; transition: all 0.5s ease 0s;  position: relative;      }
.ad figure img { position: relative;z-index: 0; display:block; transition: transform .6s;  /*  pointer-events: none; */  }
.ad::before{content: "" ; width: 100%; height: 100%; display: block; position: absolute; z-index: 9; left:0; top:0;  pointer-events: none; background-image: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(26,27,29,1) 100%); }
.ad-img-box { position:absolute;z-index: 99; top:30%; left:auto; margin:0px auto; padding:0px; width:100%; height:auto;border-radius:99rem;}
@media (max-width:1180px) {
.ad-img-box { left:-17%;   }
}
@media (max-width:1024px) {
.ad-img-box { left:auto;   }
}




/*Application photo icon 
=================================*/
.ad-img-box i { margin:0px auto; width:60px; height:60px; filter: brightness(500%) }
.ad-img-box h3 {   width: auto; margin:0px auto; font-size:1.5rem;font-weight:700; text-align: center; color:#fff;word-wrap: normal; word-break: break-all}
.ad-img-box h3 a{ color:#fff; }
.ad-img-box-wrap {  width: 140px; height: 140px;margin: auto; padding: 0px; display: flex; justify-content: center; flex-direction: column;  border-radius:99rem; }
 
@media (max-width:767.98px) {
.ad-img-box h3 {  font-size:1.125rem;  }
}





.application { width:calc(100%  + 20px); margin:30px auto; padding:0px; display: flex;flex-wrap: wrap;  position: relative; z-index:1;}
.application li { width:calc(100%/2  - 30px); margin:50px 15px;padding:0px; list-style: none;   transition: all 0.5s ease 0s;  position: relative;  }

@media (max-width:767.98px) {
.application { width:100%; }	
}
@media (max-width:320px) {
.application { width:100%; }	
.application li { width:100%; margin:20px auto;  }	
}

 /*-------------------*/
/***** Automobile *****/
/*------------------*/
.area-content{  margin: auto; padding: 30px 0px; position: relative;  }
.cms-slider-nav { width:30%;}
.cms-slider-for { width:70%;}
.cms-slider-nav .slider-nav{ width: 100%; height: auto; padding:40px 0px 20px 0px; margin:10% auto;position: relative ;z-index: 1}
.cms-slider-nav .slider-nav .slick-list{overflow: visible}
.cms-slider-nav .slider-nav:after{ content: "";width:1px; height: 100%; background:#939393; position: absolute; left:8px; bottom:0px; z-index: -1;}
.cms-slider-nav .slider-nav li{ width: 100%; margin:auto auto 10px  auto; list-style: none;  cursor: pointer;  position: relative; }
.cms-slider-nav .slider-nav li .item-nav{width: 100%;padding:0px 0px 0px 30px; font-size: 1.125rem; font-weight: 700; line-height: 1.35rem; color:#000; position: relative;}   
.cms-slider-nav .slider-nav li:before{content: "";width:16px; height: 16px; background-color: transparent; border: dashed 1px #939393; border-radius:99rem;  position: absolute; left:0px; top:10px;  }   
.cms-slider-nav .slider-nav li:after{content: "";width:10px; height: 10px; background: #939393; border-radius:99rem;  position: absolute; left:3px; top:13px;  }   
.cms-slider-nav .slider-nav li.slick-current .item-nav{ color:#0087ce;}
.cms-slider-nav .slider-nav li.slick-current:after{background:#0087ce;  }   
.cms-slider-nav .slider-nav li.slick-current::before{border-color:#0087ce; }

.automobile-item { width:100%; margin: auto; padding:40px 0px  80px 0px; list-style: none; position: relative; z-index: 9;}
.automobile-item li { width:100%; padding-bottom: 80px;  transition: all 0.5s ease    }
.automobile-item li .item{display: flex; flex-wrap: wrap;}
.automobile-item li figure{ width: 100%; height: auto; padding:0px 40px; margin: auto;  overflow: hidden;  position: relative;  }
.automobile-item li .photo { width: 100%; height: auto; padding:0px; margin: auto;  overflow: hidden;  position: relative;  }
.automobile-item li .photo img { width: 100%; height: auto; padding:0px; margin: auto;  overflow: hidden;  position: relative;  }
.automobile-item li .inner-box {width:100%;margin:0 ; padding:20px 0px;   }
.automobile-item li .inner-box h3{margin-bottom: 15px; font-size: 1.375rem; font-weight: 700;color:#0087ce; } 
.automobile-item li .inner-box p{margin-bottom: 15px; font-size: 1rem; font-weight:400; color: #535d67 } 

.automobile-item .slick-prev,.automobile-item .slick-next{ top:auto; bottom:40px; width: 48px; height: 48px;  border: solid 2px #e0e4e7; border-radius:0px;  background-color: #fff;  }
.automobile-item .slick-prev{left:auto; right:94px}
.automobile-item .slick-next{ right: 40px; }
.automobile-item .slick-prev:before, .automobile-item .slick-next:before { -webkit-filter:none; }
.automobile-item .slick-prev:hover,.automobile-item .slick-prev:focus,.automobile-item .slick-next:hover,.automobile-item .slick-next:focus{ background-color:#e0e4e7; opacity:1 }


 
@media (max-width:767.98px) {
.cms-slider-nav { width:100%; }
.cms-slider-for { width:100%; }
.cms-slider-nav .slider-nav:after{ width:100%; height: 1px; left:8px; top:6px;   } 
.cms-slider-nav .slider-nav{  width:100%;  padding:0px; margin: auto; overflow: hidden }		
.cms-slider-nav .slider-nav li:before{  left:calc(50% - 8px); top:0px;  }   
.cms-slider-nav .slider-nav li:after{  left:calc(50% - 5px);  top:3px;  }   
.cms-slider-nav .slider-nav li .item-nav{ padding:20px 0px 0px 0px;  font-size:1rem; font-weight: 400; text-align: center;}   
 .cms-slider-nav .slider-nav li .item-nav{ font-size:.9rem; }  
.automobile-item { padding:0px 0px 20px 0px; }	
.automobile-item li figure{  padding:0px; }	
}





.album{ width:100%; margin:0px auto;  padding:20px 0px; display: flex; flex-wrap: wrap; position: relative; }
.album li { width: calc( 100%/4 ); margin:20px 0px; padding:20px ; display: flex; flex-wrap: wrap;align-self: flex-start;  align-content: flex-start; align-items: flex-start; z-index: 1; list-style: none;  transition: all 0.3s linear 0s; position: relative;}
.album li figure{  width: 100%; padding-bottom:100%; height: 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s ease 0s; border:solid 1px #f0f0f0;   }
.album .inner{  width: 100%;  padding: 10px; position: relative;} 
.album .inner h3{ width: 100%;margin:10px 0px; font-weight:700; font-size: 1.125rem;  color:#000; line-height:1.75rem; white-space: pre-line;word-break:normal; word-wrap:break-word;  }


@media (max-width:840px) {
.album li { width: calc( 100%/2 ); padding:0px 10px ;  }
.album .inner h3{   font-size: 1rem; line-height:1.5rem;  }
}

@media (max-width:280px) {
.album li { width:100%;  }
}


.area-content .introduction{padding-bottom:70px; position: relative;}
.area-content .introduction::before { content: ""; position: absolute; width: 100%; height: 517px; bottom:0px; left: 0;background: url("/zh-TW/images/theme-b67/index/bg-item-w.png") no-repeat left bottom;background-size: 100% auto;}
.area-content .introduction:nth-child(even)::before { content: ""; position: absolute;z-index:-1;  width: 100%; height: 334px; bottom:0px; left: 0;background: url("/zh-TW/images/theme-b67/index/bg-item.png") no-repeat left bottom; background-size: cover;}
.area-content .introduction:nth-child(odd){  margin: 0px; padding-top: 50px; padding-bottom: 220px; background-color:#f0f5f5; }
.area-content .introduction:nth-child(even){  margin: 0px; padding-bottom: 240px; background-color: #fff; }
 .area-content .introduction:last-child::before { display: none}
.area-content .introduction:last-child{ background: linear-gradient(to bottom, #f0f5f5, transparent);}


@media (max-width:1024px) {
.area-content .introduction:nth-child(even)::before { height: 500px; }
}
@media (max-width:767.98px) {
.area-content .introduction:nth-child(even){ padding-bottom: 140px;  }
.area-content .introduction::before,.area-content .introduction:nth-child(even)::before { display: none} 	
.area-content .introduction:nth-child(odd){  padding-bottom: 0px; }
 }
 .bg-introduction{background: url("/zh-TW/images/theme-b67/index/bg-des.jpg") no-repeat left top;background-size: 100% auto;}
 
.introduction{margin:0px auto; position: relative; z-index: 1; }
.introduction-album{width: 100%; max-width: 600px; margin:5% auto 10% auto}
.introduction .grid-box { padding: 0px 40px;border-bottom: solid 2px #f5f5f5}
.introduction .grid-box .inner-txt { padding: 0px 60px;}
 .introduction-list { width: 100%; margin: 30px auto;padding:0px 0px 50px 0px; position: relative}
.introduction-list li{width: 100%; margin: 30px auto;  list-style: none}
.introduction-list li .item{ display: flex; flex-wrap: wrap; align-items: center;}
.introduction-list li:nth-child(even) .item{ flex-direction: row-reverse}
.introduction-list li .photo { width: 40%; height: auto; padding:0px; margin: auto;  overflow: hidden;  position: relative; border-radius:0px 60px 0px 60px;   }
.introduction-list li .inner-box {width:60%;margin:0 ; padding:20px 30px;   }
.introduction-list li  h3{margin-bottom: 15px; font-size: 1.375rem; font-weight: 700;color:#0087ce; } 
.introduction-list li  p{margin-bottom: 15px; font-size: 1rem; font-weight:400; color: #535d67 } 
 .introduction-list li .photo-2 { width: 50%; height: auto; padding:0px; margin: auto;  overflow: hidden;  position: relative;     }
.introduction-list li .inner-box-2 {width:calc(50% - 10%) ;margin:auto 5%; padding:20px 30px;border-radius:20px; border: solid 2px  #d0ecff; -webkit-box-shadow: 0px 2px 3px 3px rgba(0, 0, 0, 0.05);box-shadow:0px 2px 3px 3px rgba(0, 0, 0, 0.05);  }
 .introduction .mt150{margin-top: -150px;}
@media (max-width:768px) {
.introduction .grid-box { padding: 0px; }
.introduction .grid-box .inner-txt { padding: 0px;}
 }
@media (max-width:767.98px) {
.introduction-list li .photo { width: 100%;   }
.introduction-list li .inner-box {width:100%; padding:20px;}
 .introduction-list li .photo-2 { width: 100%;  }
.introduction-list li .inner-box-2 {width:100% ;margin:auto; padding:20px;  }
	
 }


.w-list{ width: 100%; margin: auto; padding: 0px 20px; list-style: none}
.w-list li{ display: block; padding-left: 20px;  margin: 10px 0px; font-size: 1rem; font-size: min(max(3.5vw, .875rem), 1rem); font-weight:400;   letter-spacing: normal; color: #535d67;  position: relative; }
.w-list li:before { width: 10px; height:10px; content: "";  left:0px; top:10px;position: absolute; background-color:#535d67; border-radius: 2px;}
.w-list li p{font-size: 1rem;   font-size: min(max(3.5vw, .875rem), 1rem);color: #535d67 }
 @media (max-width:767.98px) {
 .w-list{  padding: 0px; }    
}
 
.introduction-table{width: 100%; margin-bottom: 1rem;border-radius: 20px;  }
.introduction-table table{width: 100%; margin-bottom: 1rem;  border-radius: 20px;  -webkit-box-shadow: 0px 2px 3px 3px rgba(0, 0, 0, 0.05);  box-shadow: 0px 2px 3px 3px rgba(0, 0, 0, 0.05); overflow: hidden;}
.introduction-table table tbody{ border-radius: 20px;  border: solid 2px #d0ecff;   background-color: #fff; overflow: hidden; }
.introduction-table table tbody th{padding: 1rem; background-color: #0D6CB2; color: #fff; font-weight: 700; }
.introduction-table table tbody td{padding: 1rem;  color: #000; text-align: left;font-size: 100%;font-weight: 500; border: solid 1px #d0ecff;   }
.introduction-table table tbody tr:nth-child(even){background-color: #e8f5ff;}

.software{ width: 100%; margin: auto;padding: 0px;   display: flex; flex-wrap: wrap;align-self: flex-start; align-content: flex-start; align-items: flex-start; }
.software li { width: calc( 100%/4 - 30px); margin:40px 15px 40px 15px; padding:0px ;z-index: 1; list-style: none;  transition: all 0.3s linear 0s; position: relative;   }
.software li figure{  width: 100%; padding-bottom:57.875%; height: 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s ease 0s; border:solid 1px #f0f0f0;-webkit-box-shadow: 0px 2px 3px 3px rgba(0, 0, 0, 0.05);box-shadow:0px 2px 3px 3px rgba(0, 0, 0, 0.05); border-radius:10px;}
.software li .inner-txt{ margin:10px auto;}
.software li .inner-txt h3{ font-size:1.175rem; font-weight: 700; text-align: center; color:#0087ce }
 @media (max-width:840px) {
.software li { width: calc( 100%/2 - 30px); margin: 15px;   }
 }
  @media (max-width:767.98px) {
.software li { width:100%; margin: 15px auto;   }
 }