.cms-main-area{ background: url("../images/index/bg-line.jpg") no-repeat left 50px #fff; background-size: 100% auto;   }
#cms-main .cms-main-choose .cms-description{  width:calc(100% - 200px);  margin:0px auto; padding:20px 100px; background-color: transparent;}

@media (max-width: 840px) {
#cms-main .cms-main-choose .cms-description{  width:calc(100% - 40px);  padding:20px; }
}
@media (max-width: 768px) {
#cms-main .cms-main-choose .cms-description{  width:100%;  padding:20px 0px; }
}
.submenu {  width: 100%; max-width: 1400px;  position: relative; z-index: 3;   margin: 0px auto 60px auto;height: 120px; display: flex; flex-direction: row; flex-wrap: wrap;  box-shadow: 0 6px 24px 0 rgb(0 0 0 / 20%);}
.submenu > div, .submenu > a { width: 216px; background: #00437c; display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center;}
.submenu > a:hover { background: #1d2a73;}
.submenu-title { font-size: 24px; font-weight: 500; color: #fff; letter-spacing: 0.1rem; line-height: 100%;}
.submenu  aside#cssmenu {  background-image: linear-gradient(to top, #e3edf6 0%, #fff 100%);  width: calc(100% - 216px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.submenu  aside#cssmenu ul{width:100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content:space-around;}
.submenu-title-pto {  width: 20px;  margin-top: 3px;}
.submenu-title-2 { font-size: 15px; color: #fff !important;}
.submenu-nav{ width: 140px;display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; position: relative; z-index: 3;}
.submenu-nav:before{ content: ""; width: 120px; height: 120px; position: absolute; z-index:-1; top:-10px;left: 10px; border-radius: 100%; background: #00437c; display: flex;flex-direction: row; flex-wrap: nowrap; justify-content: center ;align-items: center; font-size: 16px; color: #fff; line-height: 24px;  transition: all 0.4s ease-out 0s; opacity: 0; transform: scale(0);box-shadow: 0px 0px 20px 0px #00437c;}
.submenu-nav figure { width: 64px; height: 64px;  margin-bottom: 10px;}
.submenu-nav h3 { width: 100%;   }
.submenu-nav:hover:before {  opacity: 1; transform: scale(1);}
.submenu-nav:hover figure { filter:grayscale(100%) brightness(500%) ;}
.submenu-nav:hover h3 {color: #fff;  }

aside#cssmenu li.active .submenu-nav:before{ opacity: 1; transform: scale(1);} 
aside#cssmenu li.active .submenu-nav figure { filter:grayscale(100%) brightness(500%) ;}
aside#cssmenu li.active .submenu-nav h3 {color: #fff;  }

@media (max-width: 1180px) {
.submenu {   margin-top: 0px;  }
}

@media (max-width: 1024px) {
.submenu > div, .submenu > a { width:150px; }
.submenu-nav{ width: 100px; }
.submenu-nav:before{  width: 100px; height: 100px;left:0px; }
.submenu  aside#cssmenu {  width: calc(100% - 150px);}
.submenu-nav figure { width: 36px; height: 36px;  margin-bottom: 10px;}
}

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

.cms-product-arera{ padding: 0px;  width: 100%; display: flex; flex-wrap: wrap;    }
.cms-bg{background-image: linear-gradient(to top, #fff 0%, #fbfdf6 90% ,#fff 100%);}
 
  /*  banner area*/
.cms-main-banner-img img  { width: 100%; height: auto; -o-object-fit: cover;  object-fit: cover; -webkit-backface-visibility: hidden;  backface-visibility: hidden; transition: all 0.3s; position: relative; z-index: 0;}
.text-content {   width: 100%; height: 100%; padding: 20px 30px; transform: translateX(0); position: relative; z-index: 1;    }

/* choose style */
.cms-main-choose{ width: 100%;padding:150px 0px 150px 0px; margin:0px auto; position: relative; background:url("../images/index/about-brand.jpg")  no-repeat left top #e6e6e6; background-size: 100% auto, 50% auto;}
.cms-main-choose:before{ content: ""; position: absolute;right: 0px; bottom: 0px; width: 100%; height:50%;background-image: linear-gradient(to bottom, rgba(255,255,255,.1) 0%,rgba(255,255,255,1) 80%, rgba(215, 233, 247,.5) 100%); }
.cms-choose-wrap{ display: flex; flex-wrap: wrap; justify-content: center;}
.choose-txt{width: 600px; padding:0px 50px 0px 50px;display: flex; flex-wrap: wrap; align-content: center; }
.choose-txt p{ margin-top: 10px;  font-size:1.188rem;font-weight:500;  letter-spacing: 1px;}
.cms-main-choose .cms-title-3 h2,.cms-main-choose .cms-title-3 h3,.cms-main-choose .cms-title-3 p{ color:#fff;}
 
.choose{ width: 100%;  margin:50px auto; padding:0px; display: flex; flex-wrap: wrap; justify-content:center;align-content: flex-start;align-items: flex-start; list-style:none;}
.choose li{width:calc(100%/3 - 20px); margin:10px 0px; padding:30px 0px;display: flex; flex-wrap: wrap; justify-content:center;align-items:flex-start; align-self:flex-start; flex-direction: column; position: relative;  }
.choose li figure { width:200px; height:200px;position: relative; overflow: hidden; display: flex; margin: 20px ;   cursor: pointer;}
.choose li .choose-inner{  padding: 10px; display: flex; flex-wrap: wrap;  flex-direction: column;  -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);  -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s;}

.choose li h3 {  margin:15px 0;  font-size:1rem; font-weight: 700;text-align: left;  }
.choose li p { margin:5px 0; color:#fff; font-size: 1.75rem; font-weight: 700; text-align: left;  -webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(0deg, #00437c,  #3f51b5), linear-gradient(180deg, #151515, #151515);
-webkit-text-fill-color: rgba(0, 0, 0, 0);
line-height: 1; }

.choose li .choose-inner-list{ width: 100%; display: flex; flex-wrap: wrap; align-items: center; flex-direction: column;  }

.cms-title-block:after{  background-color:#00437c; }
.cms-title-block h1 {  color:#00437c;  }
.cms-title-block h1 span{   color:#00437c;  }
.cms-title-block p {  color:#00437c;  }

/*hover style*/
.choose li:hover figure img{ filter: blur(3px); opacity: .5;   } 
.choose li:hover .choose-inner{ -webkit-transform: translate3d(0,-50px,0); transform: translate3d(0,-50px,0); }
@media (max-width:1180px) {
.cms-main-choose{  margin-top:-30px; }
}

@media (max-width:840px) {
.cms-main-choose{  margin-top:0px; padding:50px 0px; }
.choose {justify-content: flex-start;}
.choose li{width:calc(100%/2); margin:10px 0px; padding:30px 0px; }
}


@media (max-width:767.98px) {
.choose {margin: auto  10px; }
.choose li{  width: 100%; }
.choose li a{  width: 100%;  flex-direction: row; }
.choose li figure { width:100px; height:100px;}
.choose-inner{width:calc(100% - 120px); padding: 0px 10px; justify-content: flex-start;}
.choose li h3, .choose li p {text-align: left; margin:15px 0px;}
 }

/*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; }
}


.text-stroke{ -webkit-text-stroke: 1px #a3d6bf;} 
.main-wrap{width: 100%;padding: 0px; display: flex; flex-wrap: wrap; align-content:flex-start;}


 
.section {width: 100%;  padding:40px 0px; }
.section1 {width: 100%;  padding:60px 0px; }
.main-product-left{width: 100%;  margin: -90px auto auto auto;  padding:20px; position: relative;   }
.main-product-right{ width:35%; height: 100%; padding: 0px; margin-left: 0px; display: flex;flex-wrap: wrap; justify-content:flex-end; align-content: flex-start; position: relative;  order: 1; }
.main-product-left .social-icons{justify-content: center;align-content: center; align-items: center; font-size: 0.875rem;}
 
 
.section1 .title-2{margin-bottom: 40px;}
/*  item-box  */
.item-box { width: 100%;padding: 0px; margin-bottom:10px;  }
.item-box.end { margin-top: 10%; margin-bottom:10px;  }

.item-box p,.item-box ul li {width: calc(100% - 20px);font-size: 1.1rem; line-height:2.15rem; color:#555; }

.item-box  ul{ width: 100%; margin: 10px; padding: 0px;  }

.tip { margin-top: 40px; width: 100%;}
.tip-item {width:100%; margin: 0 0 40px 0; display: -webkit-box; display: -ms-flexbox; display: flex;  -webkit-box-align: center;  -ms-flex-align: center; justify-content: flex-start; align-items: center;}
.tip .tit { width:15%;padding: 0 5px;margin: 0 20px 0 0; font-size: 20px; font-weight: 500;border-left: 3px solid #14b39f;color: #14b39f;} 
.tip .text {width:85%;font-size: 1rem;color: #777; }
.tip .tit-full { padding: 0 5px;margin: 0 20px 0 0; font-size: 20px; font-weight: 500;border-left: 3px solid #14b39f;color: #14b39f;} 




.item-wrap { width: 100%; margin: 10% auto auto auto; padding-bottom: 10%; display: flex; flex-wrap: wrap;align-items: center;  }
.item-wrap .item { width: 60%; margin-left: 40px;  padding: 30px; min-height: 320px;  display: flex; flex-wrap: wrap; justify-content:space-between;align-items: center; position: relative;}
.item-wrap .item h3 { width: 100%;  margin: 0px 0px 20px 0px; font-size: 1.75rem; font-weight:500; color:#00437c; letter-spacing:3px; position: relative;}
.item-wrap .item h3::before{ content: attr(data-content); color: rgba(0,0,0,0); font-size: 120px; font-weight: 900; font-family: 'Poppins',sans-serif; letter-spacing: 3px; position: absolute; left:-10%; top:-200%;  -webkit-text-stroke:3px #55a5ce; z-index: 1; opacity: .1;}

.item-wrap .item h3:after { content: "";  display: block; margin: auto;  width: 100%;  height: 12px;  margin-top: -15px;background:rgba(177,235,255,.5);}
.item-wrap .item p.str {  text-align: left; line-height: 2rem; letter-spacing: 2px; color: #038279; }
.item-wrap .item-pic{ display: flex; flex-wrap: wrap; flex-direction: column; width: calc(40% - 100px); height: auto; }
.item-wrap .item-pic img{ max-width: 100%; height: auto; border-radius:50px; box-shadow: 15px 15px 0px #dcefed }
.item-wrap:nth-child(even) {flex-direction: row-reverse ;  }

@media (max-width: 767.98px) {
.item-wrap .item { width: 100%;  margin: 0px;  padding: 30px 0px; }
.item-wrap .item-pic{ width: 100%; margin: auto;}
.item-wrap .item h3 { font-size: 1.375rem; letter-spacing:2px; }
.item-wrap .item-pic img{  border-radius:5px;   }
 .item-box p,.item-box ul li {width:100%;font-size: 1rem;  }
   
}


.process { width: 100%; margin: 10% auto auto auto; padding-bottom: 10%; display: flex; flex-wrap: wrap;  }
.process-item { width: calc(100%/3 - 30px);margin: 35px 15px; padding: 50px;background-color: #fff;	-webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1); border-radius:50px;}
  
@media (max-width: 1023px) {
.process-item {width: calc(100%/2 - 30px);}
 }


@media (max-width: 767.98px) {
.process-item { width: 100%; margin:15px auto; padding: 20px 0px; background: none;box-shadow: none;border-bottom: solid 1px  rgba(85, 163, 206, 0.3);  border-radius:0px;} 
}
.process-item .item {width: 100%;}
.process-inner .num {padding: 0 0 0 25px;position: relative; font-size: 13px; color: #00437c; text-transform: uppercase; font-family: "Poppins";}
.process-inner .num::before { content: "";position: absolute;top: 50%; left: 0;width: 15px; height: 1px; background-color:#00437c;}
.process-inner .num span {margin: 0 5px;}
.process-inner .top {width: 100%;padding: 15px 0;margin-bottom: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify;  -ms-flex-pack: justify;  justify-content: space-between;border-bottom: 1px solid rgba(0, 0, 0, 0.2);}
.process-inner .top .tit{font-size: 20px; font-weight: 500;color:#00437c; }
.process-inner .text {overflow-y: auto;padding: 0px 0;font-size: 15px;color: #191919;letter-spacing: 0.7px;line-height: 1.6;}
.process-inner .text::-webkit-scrollbar {width: 5px;background-color: #e5e5e5;}
.process-inner .text::-webkit-scrollbar-thumb {background-color: #e3aba1;}
.process-inner .icon{ width: 60px; height: 60px;}


.about-box-mission{position: relative;  z-index: 9;}

.box { position: relative;  z-index: 0; margin: 0 auto;padding:0px 30px 30px 50px; width: 80%; height: auto; transition: 0.4s;   }
.box .fas { font-size: 25px; height: 50px; width: 50px; line-height: 50px !important; background-color: transparent; color: #2C3A47;}
.box .fa1 {position: absolute; top: 0; left: 0;z-index: 1; }
.box .fa2 {position: absolute;  bottom: -30px; right: 0; z-index: 1;}

@media (max-width: 767.98px) {
.box { padding:0px 0px 30px 0px; width: 100%;  }
.item-box p{width: 100%;}
}

@media (max-width: 1180px) {
.tip .tip-item {margin: 0 0 20px 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start;  align-items: flex-start;	}
.tip .tit { margin: 0 0 5px 0; }
}


.item-title { width: calc(100% / 2);padding: 0px 10px; margin-bottom: 10px;}

@media (max-width: 767.98px) {
.item-title { width: calc(100% - 20px);padding: 0px 10px; margin-bottom: 10px;}   
.product-info-title .btn{ width:100%; display: flex; flex-wrap: wrap; }  
.product-info-title .btn i.icon-shop{display: inline-block!important; margin: 0px;}  
}  




.faq{  width: 100%;max-width: 90%;  margin: auto; list-style: none; padding:0px; counter-reset: index; background-color: transparent;}
.faq li { display: flex; flex-wrap: wrap; border-bottom: solid 2px #0ea997; counter-increment: index; margin-bottom:15px; }
.faq li::before {  content: counters(index, ".", decimal-leading-zero); font-size: 1.5rem; text-align: right;  font-weight: 700;  min-width: 50px; padding-right: 12px; font-variant-numeric: tabular-nums; align-self:center;background:#0ea997; ; background-attachment: fixed;  -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.faq li:hover{ background:#f8f7f7;}

.faq li.active .answer {display: block; max-height:100%;  transition: max-height 0.5s ease, padding-bottom 0.5s ease;    }
.faq li.active h3.question { color:#000; transition: color 0.5s ease;}
.faq li.active { background-color:#fff; }
 
.faq h3.question {position: relative; width: calc(100% - 60px); padding:20px; cursor: pointer;font-size: 1.5rem;font-weight:500; color:#333;  transition: color 0.5s ease;}
.faq li .answer { display: none;color: #495057; font-size: 16px; line-height: 24px;width: 100%; max-height: 0; padding:15px 15px 25px 50px;  background-color:#f5f7f9;  overflow: hidden;  transition: max-height 0.5s ease, padding-bottom 0.5s ease;}
.faq li .answer a{ color:#0ea997; text-decoration: underline!important; }
.faq li .answer a:hover{ color:#70a84a;}

.faq .plus-minus-toggle { position: absolute;top: 50%; right: 0px;  z-index: 2;cursor: pointer; width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; transition: background-color .3s ease, transform .3s ease;}
.faq .plus-minus-toggle.collapsed { background:#0ea997; }
.faq .plus-minus-toggle:before,.faq .plus-minus-toggle:after { content: '';width: 21px;height:4px; right:15%; top: 45%; position: absolute; transform: translate(-50%, -50%);   transition: transform 500ms ease;}
.faq .plus-minus-toggle:after{transform: rotate(-45deg);  background:#000; }
.faq .plus-minus-toggle:before{ transform: rotate(45deg);  background:#000; }  
.faq .plus-minus-toggle.collapsed:after {transform: rotate(90deg); background:#fff;}
.faq .plus-minus-toggle.collapsed:before {transform: rotate(180deg);background:#fff;  }
.faq li.active .answer:before{ -ms-transform: translateY(-50%) scaleX(1); transform: translateY(-50%) scaleX(1);}
.faq li.active .answer:before { position: absolute; top: 50%; left: 0;  -ms-transform-origin: left; transform-origin: left; -ms-transform: translateY(-50%) scaleX(0); transform: translateY(-50%) scaleX(0); width: 3%;  height: 2px; background-color: #fff; transition: transform .3s ease;}

@media (max-width:767.98px) {
.faq{max-width: 100%;padding-left:0px; padding-right:0px;}    
.faq .question { font-size: 16px;}
.faq h3.question { padding:10px 34px 10px 10px; font-size:0.9375rem; }
.faq .plus-minus-toggle { right: -25px; }
}




.btnbox{display: flex; flex-wrap: wrap; justify-content: center;}









/*----------------------------------------/
產品清單頁  cms-main-product-item  
---------------------------------------- 
.cms-product-cate{ width:100%; margin:0px auto;  padding: 0px 20px 60px 20px;  display: flex; flex-wrap: wrap; justify-content: center;}
.cms-product-cate li { width:calc(100%/5 - 40px); margin:20px; padding:20px; position: relative; z-index: 1; list-style: none;  border-radius:30px;  transition: all 0.3s linear 0s; transform: scale(.85);background-image: linear-gradient(to top, #e3edf6 0%, #fff 100%); box-shadow: 0px 5px 5px rgba(0,0,0,.2) }
.cms-product-cate li:hover {transform: scale(1.05); } 
.cms-product-cate li a h3{ margin: 10px auto auto auto; text-align: center; font-weight: 700;}
.cms-product-cate li a figure{  width:100%; height: auto; margin-bottom:0px; overflow: hidden; background-image: linear-gradient(to left, #e3edf6 0%, #fff 100%);  display: block; border-radius:50%;   position: relative; order: 2;  }
.cms-product-cate li a figure img {  width: 100%;  height:100%; border-radius:50%; transition: all 0.5s ease 0s;   }
  @media (max-width:1180px) {
.cms-product-cate li { width:calc(100%/4 - 20px);    }
}
@media (max-width:767.98px) {
.cms-product-cate{ padding: 0px 0px 60px 0px;}

.cms-product-cate li {width:calc(100%/2 - 20px); margin:0px 10px;}
  }

/*--分類new-tag -- 
.new-tag { display: flex; flex-wrap: wrap; align-items: center; width: auto; padding:2px 4px; font-size: 0.75rem; color: #fff; transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; overflow: hidden; text-transform: capitalize;  word-break: keep-all; z-index: 9; position: absolute; right:0px; top: 0px;  }
.new-tag a{color:#fff;}
.new-tag-01{ background:#db0632;}
 
.cms-product-item  { margin: 0 -30px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;  }
.cms-product-item li{ width: calc(100%/4); margin: 15px 0px; padding:0px;  list-style: none; background: #fff; position: relative;transition: all .35s ease; -webkit-box-shadow: 5vw 5vw 3vw -3vw rgb(0,0,0,20%);  box-shadow: 5vw 5vw 3vw -3vw rgb(0,0,0,20%);  }
.cms-product-item li:after {  content: ""; position: absolute; top: 0; right: 0;  width: 1px; height: 100%;background: #e0e0e0; z-index: 2;}
.cms-product-item li:before{content: "";position: absolute;pointer-events: none;top: 0;left: 0;z-index:1;width: 100%;height: 100%;background: rgba(0,67,124,.9);text-align: center;color: #fff;padding: 0% 10% 0 10%;display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center;transition: all 0.4s ease-out 0s;opacity: 0;}
.cms-product-item li figure {  width: 100%; padding-bottom: 100%;  height: 0; background-color: #fff; transition: all 0.5s ease 0s; position: relative;  }
.cms-product-item li img { position: absolute; top: 0; left: 0;  width: 100%;  height: 100%; transform: scale(.95); }
.cms-product-item li:hover img { transform: scale(1);  opacity: 1; }
.cms-product-item li a .arrow { position: absolute; right: 0; bottom: 0; opacity: 1;}
.cms-product-item li a .arrow:before { content: ""; display: block;  width: 0; height: 0; border-style: solid; border-width: 0 0 101px 101px; border-color: transparent transparent #2a82bc transparent;}
.cms-product-inner{width: 100%;  min-height:100px;  padding: 0px 10px; text-align: center; position: relative;  z-index: 4; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);  -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s;  }
.cms-product-item li a h3 { margin: 5px 0px; font-size:1.313rem; line-height: 1.466; font-weight:400; overflow: hidden; white-space: normal;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; text-overflow: ellipsis;}
.cms-product-item li p{ color: #262626; font-size: 15px; line-height: 1.466; word-wrap: break-word;  text-overflow: ellipsis; height: 45px;}

.btn-area { position: absolute; z-index: 5; bottom:16%; left: calc(50% - 75px); transition: all 0.4s ease-out 0s; opacity:0; }
.btn01 { display: inline-block; width: 150px; line-height: 50px; border: 1px solid rgba(255,255,255,.41); text-align: center; padding: 0 30px; position: relative; color: #fff !important; overflow: hidden;}
.btn01:before { content: ""; position: absolute; top: 0; left: -100%; width: 100%;  height: 100%; background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.6), transparent); transition: all 650ms;}
.btn01:hover:before { left: 100%}
.btn01 span { position: absolute; top:25px; right: 25px;}
.btn01 span:before, .btn01 span:after { position: absolute;content: ""; width: 10px; height: 2px; background: #fff; transform-origin: 50% 50%;}
.btn01 span:after { transform: rotate(90deg);}
 
.cms-product-item li:hover .cms-product-inner{ color: #fff!important;  -webkit-transform: translate3d(0,-150px,0); transform: translate3d(0,-150px,0); }
.cms-product-item li:hover a p{ color: #fff!important; }
.cms-product-item li:hover:before{opacity: 1;}
.cms-product-item li:hover .btn-area{opacity: 1; }
@media (max-width: 1180px) {
 
.cms-product-item li a figure,.cms-product-item li a .arrow {opacity: 1;  }
 }
@media (max-width: 1024px) {
.cms-product-item  {width: 100%; padding: 0px;  margin: 0 auto; }
 }
 @media (max-width: 992px) {
.cms-product-item li a .arrow:before { border-width: 0 0 70px 70px; }
}
@media (max-width: 840px) {
.cms-product-item li{ width: calc(100%/3); }
}
@media (max-width: 767.98px) {
.cms-product-item li{ width: calc(100%/2); padding: 0px; }
.cms-product-item li:after, .cms-product-item li:befor{display: none!important;} 
.cms-product-item li a h3 {   font-size:1rem;  }
}

/*cms-btn-more ================================= 
.cms-more { width: auto;   height: 35px; padding: 20px 2px 20px 15px; position: relative; display: -webkit-box;  display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; cursor: pointer;  border-radius:30px;  background-image: linear-gradient(120deg, #22559e 0%, #6fcccb 55%);  }
@media (max-width:767px) {
.cms-more { width: auto; height: 24px }
}
.cms-more:hover .cms-more-circle, .cms-more:hover i { -webkit-transform: scale(1.2); transform: scale(1.2)}
.cms-more:hover .cms-more-txt, .cms-more:hover i { -webkit-transform: translateX(5px); transform: translateX(5px)}
.cms-more:hover{background:#afd9d3; }
.cms-more-circle { width: 30px; height: 30px;  position: relative; display: block; margin-left: 20px; border:2px solid #fff;  border-radius: 50%;  -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
@media (max-width:767px) {
.cms-more-circle { width: 24px; height: 24px; margin-right: 15px}
}
.cms-more i { font-size: 1.875rem; color: #fff;  position: absolute; top: 0; bottom: 0; left: auto; margin: 5px auto auto 100px;   -webkit-transition: -webkit-transform .2s;  transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s}
.cms-more i.icon-check { font-size: 1.35rem; margin: 10px auto auto 86px;  }
.cms-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) {
.cms-more-txt { font-size: 14px; line-height: normal; letter-spacing: normal }
}
@media (max-width:768px) {
a.btn-view{ font-size: 0.875rem;}
}

/*----------------------------------------/
產品詳細內容區塊
---------------------------------------- 
.cms-main-product-wrapper { width: 100%; margin:auto; padding: 0px;  display: flex;  flex-wrap: wrap; align-items: center; align-content: center; position: relative;}
/*----------------------------------------/
圖片輪播區塊
---------------------------------------- 
.cms-main-product-left{width:calc(50% - 30px); padding:15px; display: flex;  flex-wrap: wrap; position: relative;  z-index: 1;background-color: rgba(255,255,255,.9);   box-shadow:  1px 5px 6px rgba(0,0,0,.15), inset 2px 6px 6px rgba(0,0,0,.15);  order: 2;}
.cms-main-product-right{ width:50%;  padding: 0px; margin:0px;  position: relative;   z-index: 0;  order: 1;}
.cms-main-product-left .cms-social-icons{justify-content: center;align-content: center; align-items: center; font-size: 0.875rem;}
.cms-slider-for { width:100%;  margin: 0px auto; padding:20px 50px!important; display: flex;  align-content: flex-start; flex-wrap: wrap;  }
.slider-for{ width: 100%;  margin: 0px!important; padding:0px!important; overflow: hidden;  position: relative; z-index: 0; }
.slider-for li,.slider-nav li { width: 100%; display: block;margin: auto; padding: 0px; cursor: pointer; }
.slider-for li img{ display: block;width: 80%;  height: auto;margin: auto; padding: 0px;}  
.slider-for .slick-dots{bottom: 20px;}
.slider-nav{ width:100%;   height: auto; margin:0px; padding:0px;   display: flex;  flex-wrap: wrap; justify-content: flex-start; position: absolute; left:0px;  z-index: 9;}
.slider-nav li{ width: 100px; opacity:.8; margin:10px;padding: 5px; background: #fff; border: solid 1px rgba(0,0,0,.35)   }
.slider-nav li img{ width:100%;  margin:0px; padding:0px;  }
.slider-nav li.slick-current,.slider-nav li:focus{opacity: 1;}
.slider-nav .slick-dots {bottom:-20px;}
.slider-nav .slick-prev,.slider-nav .slick-next{ width: 36px; height: 36px; top:30%;  }


 @media (max-width:820px) {
.cms-main-product-left{width:100%;padding: 5px 0px 0px 0px; order: 2;}  
.cms-main-product-right{ width:100%; margin: auto; padding: 10px 50px; order: 1;}
}
 @media (max-width:767.98px) {
.cms-main-product-right{  padding: 10px;}
     
}
/*----------------------------------------/
產品規格
---------------------------------------- 
.cms-product-form-item{ width: 100%; display: flex; flex-wrap: wrap; padding-top: 15px; }
.cms-product-form-item label{font-size:.875rem;font-weight:700!important; color:#3a3a3c;   }
.cms-option-radio { width: 100%; border: 0;  padding: 0;  margin: 0;  position: relative; font-size: 0.9rem; }
/*----------------------------------------/
數量選擇
---------------------------------------- 
.cms-amount-value{ width:100%; max-width: 60%; min-height: 2rem; margin:10px 0px 0px 0px; display: flex;  flex-direction: row; justify-content: space-between; align-content: center; align-items: center; }  
.cms-amount-value span{color: #333;}
.cms-amount {  width:100%;  height: 41px;  border:solid 1px #333; border-radius:0px; margin:8px 0; display: flex;  flex-direction: row; justify-content: space-between; align-content: center; }
.cms-amount a{ width: 40px;   border:none;  }
.cms-amount-button { display: flex; justify-content: center;align-items: center; align-self: center; width: 60px; height:36px;   padding: 0 10px;  font-size:1.125rem; font-weight:700;color: #999;  background-color: #fff; border: solid 1px #999;}
.cms-spec-group{width: 100%;}
.cms-spec-group-title {margin-bottom: 10px; font-size: 0.875rem; color:#333; font-weight: 500; }
 
/*----------------------------------------/
btn區塊
---------------------------------------- 
.cms-product-group{width: 100%; margin:10px 0px; display: flex; flex-wrap: wrap; justify-content: space-between; }
 #cms-main .cms-product-group .btn{ width: calc(100%/3 - 20px); margin: auto 10px auto 0px;  border-radius:5px;  }
.cms-product-info button {  border-radius:0px; }
 @media (max-width:767.98px) {
#cms-main .cms-product-group .btn{ width: calc(100%/2 - 20px);  margin: auto; }
}
.cms-btn-group{width: 100%; margin:10px 0px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.cms-btn-group a{width:auto; margin:10px 0px; padding:0px 20px; }
.cms-product-info{ width:100%; padding:0px 0px 0px 20px; display: flex; flex-wrap: wrap;  align-content: flex-start; align-items: flex-start;  }
#cms-main .cms-product-info h1{ width: 100%; display: flex; justify-content: flex-start; font-weight: 700; font-size: 26px; color:#333; letter-spacing: 1px;   }
#cms-main .cms-product-info h2{  width: 100%; margin-bottom: 30px; font-size:1.15rem; font-weight: 700; color:#776b62;  word-spacing: normal; word-break:normal; }
#cms-main .cms-product-info p{  width: 100%; margin: 5px 0px; font-size:0.875rem; font-weight: 700; color:#7a7a7a;  word-spacing: normal; word-break:normal;  }
.cms-product-description{ width: 100%; padding:5px 0px 10px 0px;   color:#888;  }
#cms-main .cms-product-description p {width: 100%; margin: 5px 0px; font-size:0.9rem; font-weight: 400; color:#333;  word-spacing: normal; word-break:normal;}
#cms-main .cms-product-description span {width: 100%; margin: 5px 0px; font-size:0.85rem;  font-weight: 400; color:#888;  word-spacing: normal; word-break:normal;}
#cms-main .cms-product-description ul li .cms-item-title{width:auto; justify-content: flex-start; padding:5px 5px 5px 0px;color:#98979d;  font-size:0.85rem;}
#cms-main .cms-product-description p strong{color:#000;}
.cms-badge-tag{ padding: 5px; width: 100%;  display: flex; flex-wrap: wrap; transition: all .3s; cursor: pointer;}

a.a-tag { width: auto; height: 36px; margin-right: 5px; font-size: 14px;  font-weight: 700; line-height: 1.57; letter-spacing: normal; position: relative;  display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 6px 8px 5px 9px;  max-width: 100%; color: #1e88c9;  border: 1px solid #1e88c9;  border-radius:0px;  -webkit-transition: background-color .2s,color .2s,border-color .2s; transition: background-color .2s,color .2s,border-color .2s; -ms-flex-wrap: wrap; flex-wrap: wrap;}
a.a-tag:hover{color: #fff; background: #1e88c9;}
.cms-product-info-title{ width: calc(100%  - 20px);padding: 0px 10px; align-self: center; margin-bottom: 20px;}
#cms-main .cms-product-info-title .btn{ width: 50%;  }
.specbox {  display: -webkit-box; display: -ms-flexbox;  display: flex; -ms-flex-wrap: wrap;  flex-wrap: wrap;  -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;width: 100%;}
.cms-box-card{width: 50%;}

.item-title { width: calc(100% / 2);padding: 0px 10px; margin-bottom: 10px;}
@media (max-width:767.98px) {
.item-title { width: 100%; }   
.cms-box-card{width: 100%;}
}

#cms-main .item-title p{ font-size: .875rem; color: #666;}
.specbox .name { margin-bottom: 10px; padding-bottom:5px; border-bottom: 1px solid rgba(0, 0, 0, 0.2);  color:#000; font-weight:700; font-size:1rem; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.specbox p {width: calc(100% - 20px);font-size:.9rem; color: #575757;}

.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:#00437c }
.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 }
 }

.icon-down{width: 12px; height: 12px; background: url("../images/icon/slick-down.svg") no-repeat left top;}
.product-info {display: flex; flex-wrap: wrap;  width:100%; margin: auto;}
  
/*----------------------------------------/
social-icons
--------------------------------------- 
#cms-main .cms-product-info .cms-social-icons{color:#675952;  display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; align-items: center; font-size:0.75rem;   }
#cms-main .cms-product-info .cms-social-icons li{ width: auto!important; margin:5px; padding-top: 8px;  }
#cms-main .cms-product-info .cms-social-icons li a{ opacity:1;font-size:0!important;color:#675952!important;  }
@media (max-width: 991.98px) {
.cms-product-info{padding-left:0; }    
}
@media (max-width: 767.98px) {
.cms-product-info{  padding:0px; border:none; }    
}
 
/*----------------------------------------/
spec tab
---------------------------------------- 
.bg-tab{padding: 20px; background-image: linear-gradient(to bottom, #fff 0%, #e4e9eb 50%, #fff 100%);} 
.spec-edit{ width: 100%; max-width: 900px; margin: auto; padding: 50px 0px;}
.edit{width: 100%; padding:15px 5px; margin: auto;   }
.edit .description{display: block; width: 100%; max-width:680px;  margin: 15px auto!important;}
.imgEditor { width:80%; height: auto; margin: auto; display: block;} 
  


@keyframes rotate {
0% { transform: rotate(0deg) }
to { transform: rotate(360deg)  }
}
@keyframes rotate2 {
0% { transform: rotate(0deg) scale(1) }
to { transform: rotate(-359deg) scale(1)  }
}

@keyframes rotateIt {
to { transform: rotate(-360deg); }
}