.faq{  width: 100%;  margin:0px auto; padding:20px; counter-reset: index; background-color: transparent; list-style: none; }
.faq li { margin:0px auto 20px auto;  padding: 10px 0px ; display: flex; flex-wrap: wrap; border: solid 1px #f0f0f0; border-radius:8px;   counter-increment: index;  background:#fff;   position: relative;}
.faq li::before { z-index: 3; content: counters(index, ".", decimal-leading-zero); font-size: 1.5rem; text-align: right;  font-weight: 500;  min-width: 50px; padding-right: 12px; font-variant-numeric: tabular-nums; align-self:center;background:#654915; background-attachment: fixed;  -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.faq li::after{content: ""; position: absolute; left:0px; top:20px; width: 50px; height:50px; background:#f0f0f0; border-radius:0px 15px 15px 0px;}

.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% - 50px); padding:20px 0px 20px 20px; cursor: pointer;font-size: 1.125rem;font-weight:400; 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 70px; overflow: hidden;  transition: max-height 0.5s ease, padding-bottom 0.5s ease;   }
.faq li .answer p{ font-family: "Noto Sans TC", sans-serif;  font-weight:300; }

.faq li .answer a{ color:#0ea997; text-decoration: underline!important; }
.faq li .answer a:hover{ color:#70a84a;}

.faq .plus-minus-toggle { position: absolute;bottom: -10px; right: 0px;  z-index: 2;cursor: pointer; width: 50px; height: 50px; border-radius:100px 0px 10px  0px; transition: background-color .3s ease, transform .3s ease;}
.faq .plus-minus-toggle.collapsed { background:#f0f0f0; }
 
.faq .plus-minus-toggle:before,.faq .plus-minus-toggle:after { content: '';width: 21px;height:2px; right:20%; top: 52%; position: absolute;   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:#654915;}
.faq .plus-minus-toggle.collapsed:before {transform: rotate(180deg);background:#654915;  }
.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;}

 /*hover*/
.faq li:hover{border-color:#654915;  }
.faq li:hover h3.question {color:#654915; }
.faq li:hover .plus-minus-toggle.collapsed { background:#654915; }
.faq li:hover .plus-minus-toggle.collapsed:after {  background:#fff;}
.faq li:hover .plus-minus-toggle.collapsed:before { background:#fff;  }

 @media (max-width:992px) {
.faq{max-width: 100%;  padding:30px 0px;}    
.faq .question { font-size: 16px;}
.faq h3.question { padding:10px 34px 10px 10px; font-size:0.9375rem; }

}
@media (max-width:420px) {
.faq .plus-minus-toggle { right: 0px; }    
.faq li .answer {padding:15px 15px 25px 60px;}
}