@charset "utf-8";

/* FAQ */

.category-tab{}
.category-tab input[type='radio']{width: 1px; height: 1px; overflow: hidden;}
.category-tab input[type='radio'] + label{padding: 10px 20px; border-radius: var(--radius-round); border: 1px solid #ddd; background: #f5f5f5; color: var(--color-text-muted);}
.category-tab input[type='radio'] + label:after,
.category-tab input[type='radio'] + label:before{display: none;}
.category-tab input[type='radio']:checked + label{color: var(--primary); border-color: var(--bg-primary);  font-weight: var(--font-weight-bold); background: #fff;}

.faq-list {margin-bottom: 28px; }
.faq-list .faq-item {border-bottom: 1px solid var(--bg-dark200);padding: 30px 0;}
.faq-list .faq-q {
    position: relative;
    width: 100%;
    color: var(--color-text-base);
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}
.faq-list .circle{
    display: block;
    background: var(--primary); color: var(--color-text-base);
    margin-right: 10px;
    width: 50px; height: 50px;
    line-height: 49px;
    border-radius: 50%;
    text-align: center;
    font-weight: 800;
}
.faq-list .faq-icon {
    position: absolute;
    width: 25px;
    height: 25px;
    right: 0;
    display: block;
    top: 32%;
}
.faq-list .faq-icon:after,
.faq-list .faq-icon:before{position: absolute; top:50%; right: 50%; display: block; content: ''; width: 100%; height: 1px; transform: translate(-50%, -50%); background: var(--bg-primary); transition: transform .3s;}
.faq-list .faq-icon:before{transform: translate(-50%, -50%) rotate(90deg);}
.faq-list .faq-q.open .faq-icon:before {transform: translate(-50%, -50%) rotate(180deg);}
.faq-list .faq-a {
    display: flex;
    align-items: start;
    font-size: var(--font-size-md);
    color: var(--primary);
    line-height: 1.7;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s;
}
.faq-list .faq-a.open { max-height: 160px; padding-top:20px;}
.faq-list .faq-a.open pre{margin-top: 7px;}
.faq-list .faq-a.open pre br{display: none}
.faq-list div.btn-area{margin-top: 90px;}
.faq-list div.btn-area a.btn{width: 560px; margin: 0 auto; border-radius:var(--radius-round); background: var(--bg-primary); color: var(--bg-dark200);}
.faq-list div.btn-area a.btn:hover{}

@media screen and (max-width:839px){

    .faq-list .faq-q{padding-right: 60px;}

}