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

 
/*--分類new-tag --*/
.new-tag {  width: auto; padding:5px 14px; font-size: 1rem; color: #fff;  text-transform: capitalize;  word-break: keep-all;  position: absolute; z-index: 99;left:20px; top: 20px; background-image: linear-gradient(135deg, #ffbc9f 10%, #ed6d34 100%);border-radius:0px 30px 0px 30px;  }
.new-tag a{color:#fff;}
@media (max-width:992px) {
.new-tag {  width: auto; padding:5px 14px; font-size: .75rem; left:auto; right:0px; top: 0px; border-radius:0px 20px 0px 20px;   }
 }
 /*----------------------------------------/
產品清單頁  cms-main-.product-item  
----------------------------------------*/
.product-item { width:100%; margin:0px auto;  padding:20px; display: flex; flex-wrap: wrap; position: relative; }
.product-item li { width: calc(100%/4 - 20px); margin:40px 10px ; padding:0px 10px;z-index: 1; list-style: none; border-radius:15px;overflow: hidden;   transition: all 0.3s linear 0s; position: relative;  }
.product-item li figure{  width: 100%; padding-bottom:100%; height: 0;  position: relative; z-index: 0; transition: all 0.5s ease 0s;  border-radius:15px;overflow: hidden; border: solid 1px #d8e1e9; box-shadow: 0px 5px 10px rgba(0,0,0,.1);   }
.product-item li figure:after, .product-item li figure:before { pointer-events: none; content: ''; width: 100%;  height: 100%; box-sizing: border-box; position: absolute;z-index: 999; top: 0; left: 0;  transform: scale(0); transition: 0.5s;}
.product-item li figure:after { border-top: 10px solid rgba(195, 13, 35,.8); border-right: 10px solid rgba(195, 13, 35,.8);  transform-origin: 100% 0%;}
.product-item li figure:before {border-bottom: 10px solid rgba(195, 13, 35,.8); border-left: 10px solid rgba(195, 13, 35,.8); transform-origin: 0 100%;}

.product-item li:hover img { transform: scale(1.05);  opacity: 1; }
.product-item li:hover figure:after,.product-item li:hover figure:before { transform: scale(1);}
.product-item li:hover{} 
/*--橫式樣式--*/
.product-item li.photo-v figure{  width: 100%;  padding-bottom:132.5%;  height: 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s ease 0s;  }
/*--橫式樣式--*/
 
 
.product-item .inner{  width: 100%;  padding:10px 0px; position: relative;} 
.product-item .inner h3{ width: 100%;margin: 10px auto; font-weight:700; font-size:1.125rem;  color:#000; line-height:1.875rem; text-align: center;  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:#3b3d40; }
.product-item .inner a p{ width: 100%; margin:5px 0px; font-size: .9rem; line-height: 1.5rem; 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 .inner-txt{color:#c30d23;}
 
@media only screen and (max-width:1024px){
.product-item li {width: calc(100%/3 - 30px); margin: 15px; padding:0px; }
}
@media (max-width:992px) {
.product-item {   padding:20px 0px;  }	
.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;    }
.product-item li:nth-child(3n){margin-right: auto;}
.product-item li:nth-child(2n){margin-right: auto;}
.product-item .inner h3{  font-size:1rem; line-height:1.5rem; }  
}
@media (max-width:280px) {
.product-item li { width:100%; margin: 10px auto;   }
.product-item .inner h3{ font-size:.9rem; line-height:1.25rem; }      
}

/*---------------------------------
best-wrap
----------------------------------------*/
.best-wrap{  width: 100%; margin:0 auto; padding:20px 0px;  background-image: linear-gradient(to bottom, #fff 0%, #ebeff2 50%, #fff 100%);}
.best-wrap .product-item {height: auto;}
.best-wrap .product-item li { width: calc( 100% - 20px); margin:40px 10px; padding:0px;   }
 i.arrow-r { width: 40px; height: 40px; top: auto; bottom: 10px; right: 0; margin: 3px 10px auto auto ; position: absolute;background: url("../images/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}
 .best-wrap .product-item .slick-prev,.best-wrap .product-item .slick-next{  top:-15px;  }
.best-wrap .product-item .slick-prev{ left:calc(50% - 70px);}   
.best-wrap .product-item .slick-next{right:calc(50% - 70px);}
@media (max-width:480px) {
.best-wrap .product-item li { margin:20px 10px; padding:0px;}
 .best-wrap .product-item .slick-prev,.best-wrap .product-item .slick-next{ top:-5px;  }
	
.best-wrap .product-item .slick-prev{ left:calc(50% - 50px);}   
.best-wrap .product-item .slick-next{right:calc(50% - 50px);}
	
}

/*cms-btn-more =================================*/ 
.more-txt { font-size: 16px; font-weight: 400; line-height: 1.5;  color: #fff;  -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
@media (max-width:767px) {
.more-txt { font-size: 14px; line-height: normal; letter-spacing: normal }
}
@media (max-width:768px) {
a.btn-view{ font-size: 0.875rem;}
}
  
/*----------------------------------------/
產品詳細內容區塊
----------------------------------------*/
.main-product{ background-image: linear-gradient(to top, #efeeef 0%, #fff 70%, #efeeef 100%); }
.product-wrapper { width: 100%; margin:auto; padding:40px 0px 20px 0px;  display: flex;  flex-wrap: wrap; justify-content: space-between;  position: relative;}
/*----------------------------------------/
圖片輪播區塊
----------------------------------------*/
.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}
.clearfix{display:block;zoom:1}
.product-left{width:calc(50% - 30px);  padding: 0px 15px;  background-color:transparent;  }
.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: 0px 0px 20px 0px;  margin:0px auto;    }
@media (max-width:840px) {
.product-left{width:100%;padding: 5px 0px 0px 0px;  }  
.product-right{ width:100%; margin: auto; padding: 10px 0px;  }
}
@media (max-width:767.98px) {
.product-right{  padding: 10px 0px;}
}


.box-for{width: 100%; position: relative; }
.slider-for{  width:100%; margin: 0px ; padding: 0px; list-style: none;  }
.slider-for li{ position: relative; width: 100%;  margin:0px;padding:0px 10px;}
.slider-for li figure{  width: 100%; padding-bottom: 100%; height: 0; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s ease 0s;  }
.slider-for .slick-prev,.slider-for .slick-next{  top:35%;}
@media (max-width:840px) {
.box-for{ display: flex; flex-direction: column}
.slider-for{  order: 2 }  
.slider-for li{  padding:0px;}    
}
@media (max-width:767.98px) {
.slider-for li{  padding:0px;}
.slider-for .slick-prev{ left:-15px;}
.slider-for .slick-next{ right:-15px;}   
}

 /*----------------------------------------/
btn區塊
----------------------------------------*/
.product-info{ width:100%; padding:0px 0px 0px 20px; display: flex; flex-wrap: wrap;   align-items:center;  }
@media (max-width:767.98px) {
.product-info{ padding:0px; }
}
.product-info-title { width:100%;  padding:20px 0px; margin: auto;   -webkit-box-sizing: border-box; box-sizing: border-box;  z-index:2; }
.product-info-title h1 {margin: 0px;  font-weight: 700; font-size:2rem;line-height: 3.75rem; letter-spacing:2px;  color:#000; }
.product-info-title h2{   margin-bottom: 30px; font-size:1.15rem; font-weight: 700;   word-spacing: normal; word-break:normal; }
.product-info-title p{ font-size:1.15rem;line-height: 1.75rem; font-weight: 700;  margin-bottom: 20px; } 
@media (max-width:1024px) {
.product-info-title { width:100%;  padding: 40px 0px 0px 0px;  }
}
@media (max-width:767.98px) {
.product-info-title {padding: 0px 20px 40px 20px;   }    
.product-info-title h1 { font-size:2rem;line-height:2.75rem;  }
.product-info-title p{ font-size:1.125rem;line-height: 1.5rem;   }   
}
@media (max-width:640px) {
.product-info-title {padding: 0px;}      
}
@media (max-width:320px) {
.product-info-title h1::before { width:36px;height:36px;}
.product-info-title h1 { font-size:1.5rem;line-height:2rem;  }  
.product-info-title p{ font-size:1rem; line-height: 1.375rem;}      
}


.product-box{width: 100%; margin:auto ; padding:0px 0px 20px 0px;}
.product-box .dl-row{ display: flex; flex-wrap: wrap}

.product-box dl{ display: flex; flex-wrap: nowrap; position: relative; width: 100%; border-bottom: 1px solid #ddd; margin: 0; margin-left: -4px; padding: 10px 0; vertical-align: top;  letter-spacing: 1px;}
.product-box dl.noline{ border-bottom: none;}
.product-box dl.full{  width: 100%;}
.product-box dl.mark img{ margin: 5px;}
.product-box dl.act dd{ color: #ce0000;}
.product-box dl dt{  width: 30%; line-height: 26px; font-size: 1rem;  font-weight: normal; color: #999; padding: 1px 5px;}
.product-box dl dd{  width: 70%; line-height: 26px; font-size: 1rem;  color: #000;}


@media only screen and (min-width: 1200px) {
.product-box .dl-row{ display: flex; flex-wrap: wrap;width: 100%; }
.product-box .dl-row dl{ width: calc(50% - 15px);}
.product-box .dl-row dl.half{  width: calc(50% + 15px); padding-left: 30px;}
.product-box .dl-row dl.half::before{ content: ''; display: block; position: absolute;  width: 1px; height: 30px; background: #ddd; top: 15px; left: 15px;} 
}

.product-wrapper .social-icons{margin: 0px; justify-content: flex-start}
.product-wrapper .social-icons li{background-color:#798385}
.product-wrapper .social-icons li:hover{background-color:#000; border-color: #000}

.pdd-toggle-area{width: 100%;margin:20px 0px 0px 0px;   display: flex; flex-wrap: nowrap; align-items: center;  }
.pdd-toggle-area .btn{ width: calc(100%/3 - 20px); margin-right:20px; }
@media (max-width:767.98px) {
.pdd-toggle-area{ flex-direction: column;}   
.pdd-toggle-area .btn{ width: 100%;;margin:10px auto; }  
}
  
.tab-content {padding: 40px 0px;}
@media (max-width:767.98px) {
.tab-content {padding:0px;}
}

.product-description{ width: 100%; padding:30px 0px 10px 0px;   color:#888;  }
.product-description p { margin: 5px 0px; font-size:1rem; font-weight: 400; letter-spacing: 1px; word-wrap:normal; word-spacing: normal; word-break:normal; }
.product-description span {  margin: 5px 0px; font-size:0.85rem;  font-weight: 400; color:#888;  word-spacing: normal; word-break:normal;}
.product-description p strong{color:#000;}
.specbox { padding:0px; margin: 10px 0px; width: 50% }
.specbox li{ width: 100%;padding:0px 0px 5px 0px; display: flex; flex-wrap: wrap; align-items: center}
.specbox .name-pix {  width: 20px; margin: 0;  }
.specbox .name-pix figure{margin-top: -5px; }
.specbox .name-pix img{  width: 20px;height:20px;margin:0px auto }
.specbox .name-txt {width: calc(100% - 26px - 10px); padding-left: 10px; font-size:1rem; color: #575757;}
@media (max-width:767.98px) {
.specbox {  width: 100% }
}

/*----------------------------------------/
自訂編輯區塊
----------------------------------------*/
.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:#c30d23; 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; }
 
.datatable { width: 100%; border-spacing: 0; margin: auto;background-color:#fff;}
@media (max-width: 991.98px) {
.datatable { width: 100%;}
}
 @media (max-width:767.98px) {
.table-wrapper {   margin:0px auto 30px auto;  overflow: auto; }
 }
.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; flex-wrap: wrap;text-align: right}
.datatable span.txt-name{ display: flex; flex-wrap: wrap;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; }
}
.table-box{display: none}
 @media (max-width:767.98px) {
.table-box{display: block; background-color: #fff;}
.table-box .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center}
.table-box .wrap span{margin: auto 0; }
.table-box .txt-r{width: 30%;justify-content: flex-end; text-align: right}
.table-box .txt-name{width:70% }
.table-box .txt-center{text-align: center}

/*  Responsive2
------------------------------- */
.table-box{width: 100%; margin:auto ; padding:0px;}
.table-box .dl-row{ display: inline;}
.table-box dl{ display: flex; flex-wrap:wrap;align-items: center;position: relative; width: 100%; border-bottom: 1px solid #555; margin: 0; padding:3px 0;  letter-spacing: 1px;}
.table-box dl.noline{ border-bottom: none;}
.table-box dl.bottom-line{  border-bottom:2px solid #000; background-color:#eaeaea }
.table-box dl.mark img{ margin: 5px;}
.table-box dl.act dd{ color: #ce0000;}
.table-box dl dt{ width:65%; font-size: 0.875rem; font-weight:400;color:#575757;  padding: 1px 5px; }
.table-box dl dd{ width: calc(100% - 65%); font-size: 0.875rem; font-weight:700; text-align: center;}
.table-box .col.item {flex: 1 0 0; }
.table-box .full{ flex: 1 0 100%;}
.table-box .column{margin: auto 0; width: 100%;flex-direction: column}
.table-box .col {  padding: 0px 2px 0px 0px ;word-wrap: normal; word-break: keep-all; word-spacing: normal}
.table-box .item-half{margin: auto 0; width:50%;}
}





.w-list{ width: 100%; margin: auto; padding: 0px 20px; list-style: none}
.w-list li{ display: block; padding-left: 20px;  margin-bottom: 20px; font-size: 1.15rem;   font-size: min(max(3.5vw, .9rem), 1.15rem);font-weight:400; line-height: 1.5; letter-spacing: normal; color: #000;  position: relative; }
.w-list li:before { width: 10px; height:10px; content: "";  left:0px; top:10px;position: absolute; background-color:#49b232; border-radius: 2px;}
.w-list li p{font-size: 1rem;   font-size: min(max(3.5vw, .875rem), 1rem);}
 @media (max-width:767.98px) {
 .w-list{  padding: 0px; }    
}
 
.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:480px;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: 1024px) {
.video { width:100%; padding:0px; }   
}
@media (max-width: 768px) {
.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);}
}



.product{ width:100%;  margin:0px auto 30px auto; padding:0px; display: flex; flex-wrap: wrap; }
.product li { width:calc(100%/4  - 20px); margin:20px 10px;padding:0px; list-style: none;   transition: all 0.5s ease 0s;  position: relative; z-index: 9;}
.product li .item{width: 100%; display: flex; flex-wrap: wrap;  align-items: flex-start; border-radius: 8px; overflow: hidden;  border: solid 1px #d8e1e9;transition: 0.3s;}
.product li:hover .item{  border: solid 1px #c30d23}
.product li:hover h3{  color: #c30d23}
.product li .photo{ width: 100%; padding: 0px;overflow: hidden;}
.product li .photo figure{ width: 100%; height: auto; padding-bottom: 100%; overflow: hidden; position: relative;  z-index: 1; transition: all 0.5s ease 0s;  }
.product li .photo figure img {  width: 100%; height: auto; margin: auto; transition: all 0.5s ease 0s; overflow: hidden;   }
.product li .photo figure:hover img { transform: scale(1.1);  opacity: 1; }
.product li .inner-body{width:100%; margin: auto; padding:10px;  position: relative;z-index: 9;  } 
.product li h3{  padding:0px; margin:0px 0px 10px 0px;width: 100%; font-weight:500; font-size:1.375rem; text-align: center; line-height:2.25rem;  color:#2c3943; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;overflow: hidden; }
.product li p{  margin:5px 0px; padding: 0px;  font-size:1rem; line-height: 1.75rem;  font-weight: 400; color:#656363; overflow: hidden; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;} 
@media (max-width:1024px) {
.product li {padding:0px 5px;}   
}
@media (max-width:840px) {
.product li { width:calc(100%/3  - 20px); }
	
.product li .inner-body{width:100%; margin: 0px; padding:20px 10px;   } 
.product li .photo{ width:100%; }   
}
@media (max-width:767.98px) {
.product li {  width:calc(100%/2  - 20px); margin:10px; padding:0px ; }
.product li h3{  font-size:1.25rem; line-height: 1.5rem;  }
.product li p{   font-size:.9rem; line-height: 1.375rem; } 
}

@media (max-width:320px) {
.product li { width:100%; margin:10px auto; }
	
}
@media (max-width:280px) {
.product li h3{ font-size:1rem;}
.product li p{ font-size:.875rem;} 
}
 
.application { display: flex; flex-wrap: wrap;}
.application a,.application a:visited {color: #fff;}
.application a:hover { opacity: 1; color: #fff; text-decoration: none;}
.application .col { padding: 0;}
.application .desc { display: flex; align-items: center; flex: 1 0 50%;}
.application .block-title { padding: 0 8vw;}
.application .block-title-txt p{ margin:  0; font-size: clamp(.9rem, 2.3vw, 1.125rem); text-transform: uppercase;  color: #494341; line-height: 2rem;}
.application .tit-wp { border-bottom: 1px solid #fff;}
.application .tit-wp h3 { margin-bottom:20px; font-size: clamp(1.125rem, 2.3vw, 2rem); text-transform: uppercase; line-height:2rem;}
.application .tit-wp .subtitle { margin-bottom: 12px; font-size: clamp(0.875rem, 2.3vw, 1rem); line-height: 1.5rem; font-weight: 700;  }
.application .images { height: 100%; padding: 0; background-color:#000;}
.application .images img {  opacity: 0.3; -o-object-fit: cover; object-fit: cover;  height: 100% !important; transition: 1s; width: 100%;}
.application .copy { display: flex; align-items: flex-end; position: absolute; top: 0; bottom: 0; left: 0; right: 0;  padding: 2vw;}
.application .item { position: relative; flex: 1 0 25%;}
.application .item::before { content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: clamp(28px, 3.75vw, 40px); height: clamp(24px, 3vw, 32px); background-color:#d14c34; transition: 0.5s; opacity: 0;}
.application .item .col.copy .text { opacity: 0; height: 0; overflow: hidden; transition: 1s; margin-top: 12px; line-height: 1.6;}
.application .item:hover::before { opacity: 1;}
.application .item:hover .images img { opacity: 0.6;}
.application .item:hover .col.copy .text { opacity: 1; height: 100px; margin-bottom: 40px;}
@media screen and (max-width: 1680px) {
.application .block-title { padding: 2vw 6vw; }
}
@media screen and (max-width: 1280px) {
.application .tit-wp h3 { font-size:1.125rem; }	
.application .item .col.copy .text { font-size:0.9rem; }	
.application .block-title-txt p{font-size:0.9rem; }	
}
@media screen and (max-width: 992px) {
.application .desc{ flex: 1 0 100%; }
.application .item {  flex: 1 0 31.333%; }
}
@media screen and (max-width:992px) {
.application .tit-wp .subtitle {display: none; }
}
@media screen and (max-width: 767.98px) {
.application .item {  flex: 1 0 50%; }
.application .tit-wp{  margin-bottom: 12px; }
.application .tit-wp h3 { font-size: 1.125rem;margin-bottom:10px;  }   
.application .item .col.copy .text { display: none; opacity: 1;  height: 100px; margin-bottom: 40px;  }
}
@media screen and (max-width: 360px) {
.application .item{ flex: 1 0 100%; }
}


.application-item { width:100%; margin:30px auto; padding:0px; position: relative; z-index: 99;}
.application-item li { width:calc(100%  - 30px); margin:50px 15px;padding:0px; list-style: none;   transition: all 0.5s ease 0s;  position: relative; z-index: 9;}
.application-item li .item{width: 100%; display: flex; flex-wrap: wrap;  align-items: flex-start;}
.application-item li:nth-child(even) .item{ flex-direction: row-reverse}
.application-item li:nth-child(even) .item-inner{  margin: auto auto auto -10%;}
.application-item li .item-inner{width:40%; margin: auto -10% auto auto; padding:40px;  display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start;position: relative;z-index: 9; clip-path: polygon(0 10%, 100% 0, 100% 90%, 0% 100%);    background-color: #f6f6f6;  } 
.application-item li .item-pic{ width: 60%; display: flex; flex-wrap: wrap; justify-content: center; align-items:center;}
.application-item li .item-pic figure{ width: 100%; padding-bottom: 63.25%; height: 0; overflow: hidden; position: relative;  z-index: 1; transition: all 0.5s ease 0s; clip-path: polygon(0 5%, 100% 0, 100% 85%, 0% 100%);  }
.application-item li .item-pic figure img { max-width: 100%; height: auto; margin: auto; transition: all 0.5s ease 0s;   }
.application-item li .item-pic figure:hover img { transform: scale(1.1);  opacity: 1; }
.application-item li h3{flex: 0 0 100%; padding:0px 0px 0px 20px; margin:0px 0px 20px 0px;  font-size:2rem; font-size: min(max(3.5vw, 1.15rem), 2rem);font-weight:700; line-height:2rem;color:#1d2087; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;overflow: hidden; position: relative }
.application-item li h3:before { width:8px;  height:8px;  content: ""; position: absolute; top: 12px; left: 0; background-color:#e60012; border-radius: 50%;}
.application-item li  h3:first-letter{ color:#e60013;}
.application-item li p{   margin:5px 0px; padding: 0px;  font-size:1rem; line-height: 1.5rem;  font-weight: 400;color: #000;  overflow: hidden; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;} 
.application-item li .item-inner-txt{ width: 100%;  padding:0px;margin:0px 0px 40px 0px;  position: relative;} 

.application-item li .circle-icon{width: 80px; height: 80px;  background-color: #272727; display: flex; flex-wrap: wrap;  justify-content: center; align-items: center; position: absolute; right:0px; top:0px;z-index: 9; clip-path: polygon(0 5%, 100% 0, 100% 85%, 0% 100%); }
.application-item li .circle-icon img{ width: 80%; height: auto; margin: auto; }
.application-item li:nth-child(even) .circle-icon{ left:0px; top:20px;}
.application-item li .more-icon{width: 100%; max-width: 200px;}
@media (max-width:1024px) {
.application-item li {margin:30px 15px;}   
}
@media (max-width:840px) {
.application-item li .circle-icon{   top:0px; }
.application-item li:nth-child(even) .circle-icon{   top:20px;}
.application-item li { width: 100%; margin:0px auto; padding: 0px;}   
.application-item li .item{ margin:30px auto 50px auto;padding:0px; flex-direction: column-reverse}
.application-item li .item-inner,.application-item li:nth-child(even) .item-inner{width:100%; margin:-10% 0px 0px 0px; padding:60px 40px 40px 40px;   } 
.application-item li .item-pic{ width:100%; }   
.application-item li:nth-child(even) .item{ flex-direction:column-reverse}
}
@media (max-width:767.98px) {
.application-item li .item-inner,.application-item li:nth-child(even) .item-inner{ padding:40px 20px 20px 20px;   } 
.application-item li h3{  font-size:1.125rem; line-height: 1.5rem;  }
.application-item li p{   font-size:.875rem;line-height: 1.15rem;  } 
}
@media (max-width:440px) {
.application-item li .item-inner,.application-item li:nth-child(even) .item-inner{ padding:40px 10px;   } 	
.application-item li .circle-icon{ width: 60px; height: 60px;  right:0px; top:0px; }
.application-item li:nth-child(even) .circle-icon{ left:0px; top:10px;}
}


@media (max-width:320px) {
.application-item li .item-inner{ padding:30px 10px;}   
.application-item li:nth-child(even) .circle-icon{  top:4px;}	
}



 
/*----------------------------------------/
service
---------------------------------------- */
.service-wrap{ padding: 80px 0px; background: url("../images/index/bg-service.jpg")  repeat-x left top #000; background-size: 60% auto;  }
.service { width: calc(100% + 40px); margin:0px auto 0px 120px; padding: 0px; display: flex;flex-wrap: wrap; position: relative;z-index: 1;}
.service li {width: calc(100%/3 - 40px ); margin:20px; position: relative;  transition: all 0.3s linear 0s; list-style: none; }
.service li:nth-child(1) { margin-left: -120px }
.service li:nth-child(4) { margin-left: 0px }
.service li .item{width: 100%;  }

.service li .inner-body { position: absolute;bottom:0px; left:0px; width:100%; height: auto; padding:10px 0px; display: flex; flex-wrap: nowrap; justify-content: space-between;align-items: center; z-index: 9; background-color: rgba(0,0,0,.5) }
.service li i{width:15%;}
.service li i img{filter:invert(100%) brightness(5) grayscale(1)}
.service li:hover i img{filter:none}
.service li h3 { width:85%;position: relative; z-index: 5; margin: auto 30px;font-size:1.5rem; font-weight: 400; color: #fff; letter-spacing: 1px;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); }
.service li h3::after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #c30d23; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0);}
.service li:hover h3::after { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
.service li:hover h3{ color:#c30d23}
.service li .photo { width: 100%; height: auto; padding: 0px;  overflow: hidden; position: relative; z-index: 0;  }
.service li .photo figure{ width: 100%; padding-top:75.25%; height: 0; object-fit: cover;overflow: hidden;background: #000; position: relative; transition: all 0.5s ease 0s;}
.service li .photo figure img { max-width: none;  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.service li:hover  .photo figure img {opacity: 0.4; transform: scale(1.05)}
@media (max-width:1280px) {
.service li h3{ font-size:1.125rem; margin-bottom: 10px; }
}
 @media (max-width:1024px) {
.service { width:100%; margin:0px auto; }
.service li:nth-child(1) { margin-left:auto}
.service li:nth-child(4) { margin-left: auto}
}

 @media (max-width:480px) {
.service { margin:0px auto; padding: 0px;}   
.service li {width: calc(100%/2 - 20px ); margin:10px; position: relative;  transition: all 0.3s linear 0s; list-style: none; }
.service li .inner-body { padding:5px 0px;  }
.service li i{width:32px;}
.service li h3 { width:calc(100%- 32px); margin: auto 10px;  font-size:1rem; }
}
 @media (max-width:280px) {
 .service li {width: 100%;}    
}