/*font-size*/
.title { font-size: 1.125rem; font-weight: 700;width: 90%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); }
@media (min-width: 740px) {
.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; }
}


.article-info{ width: 100%; margin: 0 auto; padding:30px 20px; background: #fff; position: relative; z-index: 9;}
.article-info .cms-title-3{margin-top: 50px;}
.article-pretitle { margin: auto auto 30px auto; font-size:1.75rem;font-weight: 500;  }
.article-pretitle::before { content: "\2015"; margin-right: 0.25rem;  color:#322927}
.article-text-stroke{ -webkit-text-stroke: 1px #a3d6bf;} 

/*.article-info::before{ content: attr(data-content); color: #fff; font-size: 72px; font-weight: 700; position: absolute; left:0px; top:0px;  -webkit-text-stroke: 2px #322927; z-index: -1; opacity: .1;}
*/.article-content{width: 100%; margin: 0 auto; padding:20px 0px;}
.article-content h2{  font-size: 30px;font-weight: 600;color: #cc2621;padding: 10px 0; margin-top: 15px; }
.article-content h3{  font-size: 26px;font-weight: 600;color: #000;padding: 10px 0; margin-top: 15px; }
.article-content h4{  font-size: 22px;font-weight: 600;color: #000;padding: 10px 0; margin-top: 15px; }
.article-content h5{  font-size: 18px;font-weight: 600;color: #000;padding: 10px 0; margin-top: 15px; }
.article-content h6{  font-size: 14px;font-weight: 600;color: #000;padding: 10px 0; margin-top: 15px; }
.article-box { position: relative;  -webkit-column-count: 1;  column-count: 1; -webkit-column-gap: 20px; column-gap: 20px; color: #515151;  margin-bottom: 20px; }
.article-box p{  color: #515151; font-size: 0.9rem; line-height: 1.5rem; margin-bottom: 25px; }
.article-box h2{  font-size: 30px;font-weight: 700;color: #cc2621;padding: 10px 0; margin-top: 15px;}
.article-box h3{  font-size: 26px;font-weight: 600;color: #000;padding: 10px 0; margin-top: 15px; }
.article-box h4{  font-size: 22px;font-weight: 600;color: #000;padding: 10px 0; margin-top: 15px; }
.article-box h5{  font-size: 18px;font-weight: 600;color: #000;padding: 10px 0; margin-top: 15px; }
.article-box h6{  font-size: 14px;font-weight: 600;color: #000;padding: 10px 0; margin-top: 15px; }
.video-container {  position: relative; padding-bottom:45%;  padding-top: 30px; height: 0;  overflow: hidden;}
@media (max-width:767.98px) {
  .video-container { height:300px; }
  
}
 
.cms-product-cate { width:100%; margin:0px auto;  padding:0px 0px 100px 0px;   position: relative;z-index: 0;}
.cms-product-cate li { margin:25px auto;  position: relative; padding-top: 1.5rem;transition: all 0.3s linear 0s; counter-increment: index;  list-style: none;}
.cms-product-cate li .item{display: flex;flex-wrap: wrap; align-items: center; background-color: #fafafa;   transition: all 0.3s linear 0s; }
.cms-product-cate li:nth-child(even) .item{flex-direction: row-reverse }
.cms-product-cate li a h3 { position: relative; z-index: 5;font-size:1.875rem; color: #312927;  display: block; text-align: left}
.cms-product-cate li figure{flex: 0 0 50%; }
.inner-box{ flex: 0 0 50%; padding: 20px 40px;  }
.inner-box h3{margin-bottom: 15px;}
.desc{margin-bottom: 15px; color: #666464;}
/*.article-box:before { position: absolute;left: 50%; top: 0;content: '';width: 1px; height: 100%;background-color: #ebebeb;}
*/
 
@media (max-width:768px) {
.article-info{padding:0px;}
.cms-product-cate li figure{flex: 0 0 100%; }
.inner-box{ flex: 0 0 100%; padding: 20px 10px;  }
.cms-product-cate li .item{  align-items: flex-start;   }
}

.card-container{width: 100%;padding: 0px; display: flex; flex-wrap: wrap; align-content:flex-start;}
.card-list{ width: calc(100%/4 - 60px);  margin:30px;  overflow: hidden;  position: relative;  }
.card-count-container{ display: flex; align-items: center; width: 100px; height: 100px;  padding: 0px; position: absolute; top:0px; left:0px; }
.card-count{ font-size: 36px; font-weight: 700; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; align-content: center; border-radius: 50%; margin: auto;   overflow: hidden; color: #fff;  box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5);text-shadow: 0px 0px 5px rgba(0, 0,0, 0.2); transition: all 0.2s ease-in-out;background-color:#f39700;}
.card-content{ padding:0px;border-radius:99rem; border: solid 3px rgba(255,255,255,.5); box-shadow: 0px 4px 8px -2px #fda668; background-blend-mode: overlay; }
.card-content img{ padding:0px;border-radius:99rem; }
.card-footer{ padding: 15px 20px; color:#000; font-size: 1.188rem; font-weight: 700; text-align:center;background-color:transparent; border-top:none; }



.grid-card{ position: relative;list-style: none; text-align: center;margin: 0 auto; display: flex; flex-wrap: wrap; }
.grid-card-list{ width: 50%;margin: 0 auto; display: flex;  }
.grid-card-list-3{ width:calc(100%/3 - 10px);margin: 0 10px 0px 0px; display: flex;  }
@media (max-width:767.98px) {
 .grid-card-list-3{ width:calc(100%/2 - 10px);   }
   
}
.grid-bottom {   position: absolute;top:0px;   }
.grid-bottom h2{ color: #000; font-size:1.125rem; line-height: 1.5rem; text-shadow: 1px 1px  #fff; }
 /* Common style */
.grid-card figure { position: relative; display: flex;width: 100%;margin: 10px 0;text-align: center; cursor: pointer; overflow: hidden;}
.grid-card figure img {position: relative; display: block; width: 100%;min-width: 100%; height: auto; opacity:1;}
.grid-card figure figcaption {padding: 2em; color: #fff;font-size: 1.25em;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.grid-card figure figcaption::before,.grid-card figure figcaption::after {pointer-events: none;}
.grid-card figure figcaption,.grid-card figure figcaption > a {position: absolute;top: 0;left: 0;width: 100%; height: 100%;}
/* Anchor will cover the whole item by default */
.grid-card figure figcaption > a {z-index: 1000; text-indent: 200%;font-size: 0;opacity: 0;pointer-events: none;cursor: text;}
.grid-card figure h2 { word-spacing: -0.15em; font-weight: 400;}
.grid-card figure h2 span {font-weight: 700;}
.grid-card figure h2,.grid-card  figure p {margin: 0;}
.grid-card figure p { letter-spacing: 1px; font-size: 68.5%;}
@media (max-width:767.98px) {
  .grid-card figure figcaption {padding:40% 5px;  font-size: 1rem; }
}


/*---------------*/
/***** julia *****/
/*---------------*/
figure.effect-julia { background: #000;cursor: default;}
figure.effect-julia img { max-width: none; -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; -webkit-backface-visibility: hidden;backface-visibility: hidden;}
figure.effect-julia figcaption {text-align: left;}
figure.effect-julia h2 {position: relative;padding: 0.5em 0;}
figure.effect-julia p { display: block; width: auto; max-width: 340px; margin: 0 0 0.25em; padding: 0.4em 1em; background: rgba(255,255,255,0.9); color: #2f3238; text-transform: none; font-weight: 500; font-size: 75%; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;	-webkit-transform: translate3d(-380px,0,0);transform: translate3d(-380px,0,0);}
figure.effect-julia p:first-child {-webkit-transition-delay: 0.15s;transition-delay: 0.15s;}
figure.effect-julia p:nth-of-type(2) {-webkit-transition-delay: 0.1s;transition-delay: 0.1s;}
figure.effect-julia p:nth-of-type(3) {-webkit-transition-delay: 0.05s;transition-delay: 0.05s;}
figure.effect-julia:hover p:first-child {-webkit-transition-delay: 0s;transition-delay: 0s;}
figure.effect-julia:hover p:nth-of-type(2) {-webkit-transition-delay: 0.05s;transition-delay: 0.05s;}
figure.effect-julia:hover p:nth-of-type(3) {-webkit-transition-delay: 0.1s;transition-delay: 0.1s;}
figure.effect-julia:hover img {opacity: 0.4;-webkit-transform: scale3d(1.1,1.1,1);transform: scale3d(1.1,1.1,1);}
figure.effect-julia:hover p {opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}

.cms-slider-nav { width: 100%;  height: auto; margin:20px auto; padding:0px;order:1; position: relative;  }
/*.cms-slider-nav:after{ content: ""; width: 80%; height: 4px;  background: #cf0004; position: absolute; z-index: 0; left:10%; top:35%; transform: translate(0,-35%);}
*/
.slider-nav{margin: auto;padding: 0; display: flex; flex-wrap: wrap;   position: relative; z-index: 9; }
 .slider-nav li { width: calc(100%/4); padding:10px; margin: auto; display: flex;flex-wrap: wrap; justify-content: center;  }
.slider-nav .nav-item { text-align: center; width: 100%; padding-bottom: 34px; position: relative}
.slider-nav .nav-item:hover .nav-img {background-color: #312927}
.slider-nav .nav-item:hover .nav-img img {   filter: grayscale(1) brightness(600%) opacity(1); }
.slider-nav .nav-item:hover .nav-img:before { border: dashed 1px #fff; filter: grayscale(1) brightness(1) opacity(1);}
.slider-nav .nav-item:hover p { color: #cf0004}
.slider-nav .nav-img {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin:10px auto;width: 150px;height:150px;border-radius: 50%;background-color:#fff;position: relative;}
.slider-nav .nav-img:before { content: ""; width: calc(100% - 16px);  height: calc(100% - 16px); display: block;  border: dashed 1px #000; border-radius:50%; position: absolute; filter: grayscale(1) brightness(0) opacity(0.3);   transform-origin: 50% 50%;}
.slider-nav .nav-img img {  margin: auto;display: block;  transform: scale(.8);opacity: 0.7;  }
.slider-nav .nav-item p{ font-size:1rem; color: #000; font-weight: 700; line-height: 1rem; }
@media (max-width:768px) {
.slider-nav li {  width: calc(100%/2);   }
}
.slider-nav .slick-prev,.slider-nav .slick-next{top:auto;bottom:0px; transform: scale(.8)}
.slider-nav .slick-prev{left:35%;}
.slider-nav .slick-next{right:35%;}

.nav-img{ display: inline-flex; margin:20px 10px 0px 0px;  padding: 0px; width:80px; height: 80px;}
.nav-txt{ display: inline-flex; width:calc(100% - 100px);  padding-top: 20px; padding-left:20px;font-size: 2.5rem; font-weight:700!important; color:#fff  }

/*----------------------------------------/
產品清單頁  cms-product-cate  
----------------------------------------*/
.application.cms-product-cate { width:100%; margin:0px auto;  padding:30px 0px 60px 0px; display: flex; flex-wrap: wrap; position: relative;z-index: 0;}
.application.cms-product-cate li {width:calc(100%/4 - 10px);height: auto; margin:20px 5px; padding:0px; position: relative; z-index: 1; list-style: none;  transition: all 0.3s linear 0s; overflow: hidden;}
.application.cms-product-cate li img { transition: all 0.3s ease;overflow: hidden; }
.application.cms-product-cate li:hover img {transform: scale(.95); opacity: .5;  }
.application.cms-product-cate li:after,.application.cms-product-cate li:before {pointer-events: none; content: ''; width:calc(100% - 2px); height:100%;  box-sizing: border-box;  position: absolute; top: 0;left: 0;transform: scale(0); transition: 0.5s;z-index:9; }
.application.cms-product-cate li:after { border-top: 2px solid #312927;  border-right:2px solid #312927;  transform-origin: 100% 0%;}
.application.cms-product-cate li:before { border-bottom: 2px solid #312927; border-left: 2px solid #312927; transform-origin: 0 100%;}
.application.cms-product-cate li:hover:after,.applications .cms-product-cate li:hover:before { transform: scale(1);}
.application.cms-product-cate li figure {display: block; vertical-align: top;  width:100%; height:auto; margin: 0px; position: relative;z-index: 3; transition: all 0.3s linear 0s; overflow: hidden;} 
.application.cms-product-cate li figure:before {  content: ""; display: block;width:calc(100% - 0px);  background-image: linear-gradient(to bottom, rgba(255,255,255,.0) 50%, rgba(0,0,0,.75)  100%); opacity: 1; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;}
.application.cms-product-cate li:hover figure:before {    background-image: linear-gradient(to bottom, rgba(255,255,255,.0) 20%, rgba(0,0,0,1)  100%); }
.application.cms-product-cate li .inner-body { position: absolute;bottom:20px; left:0px; width:100%; height: auto; padding:10px 20px;  display: block;z-index: 9; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1);}
.application.cms-product-cate li:hover .inner-body {  margin-top: -22px; -webkit-transform: translateY(-22px); transform: translateY(-22px)}
.application.cms-product-cate li a h3 {position: relative; width: 100%; z-index: 8; font-size:1.25rem;  line-height: 1.5rem; font-weight:700;  letter-spacing: -1px; color:#fff; word-break: keep-all; word-wrap: normal;}
.application.cms-product-cate li a span {position: relative;  width: 100%; z-index: 8; font-size:0.75rem;  line-height: 2rem; font-weight:500; color:#fff;  }

@media (max-width:768px) {
.application.cms-product-cate li .inner-body {   padding:10px; }
.application.cms-product-cate li a h3 { min-height: 72px; }
}
@media (max-width:767.98px) {
.application.cms-product-cate { padding:0px 0px 60px 0px;}
.application.cms-product-cate li {width:calc(100%/2 - 10px); }
}
@media(max-width: 350px) {
.slider-nav li{width: 100%;}
}

 /*---------------------------------
best-wrap
----------------------------------------*/
.cms-best-wrap{  width: 100%; margin:0 auto; padding:20px 0px 0px 0px;  display: flex; flex-wrap: wrap; background-image: linear-gradient(to bottom, #f1f4f4 0%, #d9e1e0 100%);}
.cms-best-wrap .cms-product-item { width:100%; text-align: center;   padding:0px 15px;  margin: 10px auto; }
.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-best-wrap .slick-dots {bottom:-30px;}
.cms-best-wrap .slick-dots li{margin: 15px 2px;}