.cate-slide {
    padding: 40px 0;
}

.cate-slide .swiper-slide {
    width: auto;
    margin-right: 23px;
}

.cate-slide .swiper-slide a {
    display: block;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    font-size: 24px;
    font-weight: 500;
    line-height: 46px;
    border-radius: 48px;
    padding: 0 28px;
    transition-property: background, color;
    transition-duration: 0.3s;
}

.cate-slide .swiper-slide a:hover,
.cate-slide .swiper-slide a.active {
    background-color: var(--primary-color);
    color: #fff;
}

.faq-list {
    border-top: 1px solid #C9C9C9;
}

.faq-item {
    border-bottom: 1px solid #C9C9C9;
    ;
}

.faq-item.empty {
    text-align: center;
    padding: 35px 0;
    font-size: 20px;
}

.faq-item .faq-answer {
    width: 100%;
    padding: 35px 43px 35px 23px;
    box-sizing: border-box;
    position: relative;
    font-size: 20px;
    font-weight: 600;
    text-align: left;
    line-height: 1.45em;
}

.faq-item .faq-answer::after {
    content: '';
    width: 16px;
    aspect-ratio: 2 / 1;
    position: absolute;
    right: 23px;
    top: 50%;
    transform: translate(0, -50%);
    transition: transform 0.3s;
    background: transparent url(/assets/images/common/icon_chevron_down.svg) no-repeat center center / cover;
}

.faq-item .faq-answer.active::after {
    transform: rotate(180deg) translate(0, 50%);
}

.faq-item .faq-content {
    display: none;
    padding: 28px 23px 57px;
    position: relative;
    background-color: #F9F9F9;
    font-size: 18px;
    line-height: 1.85em;
    border-top: 1px solid #C9C9C9;
}


@media (max-width:1280px) {
    .cate-slide .swiper-slide a {
        font-size: 18px;
    }

    .faq-item .faq-answer {
        font-size: 18px;
    }
}

@media (max-width:1100px) {
    .cate-slide {
        padding: 30px 0;
    }

    .cate-slide .swiper-slide a {
        font-size: 16px;
        line-height: 40px;
    }

    .faq-item .faq-answer {
        font-size: 16px;
        padding: 25px 40px 25px 15px;
    }

    .faq-item .faq-content {
        font-size: 16px;
        padding: 20px 15px 30px;
    }
}

@media (max-width:768px) {
    .cate-slide {
        padding: calc((25 / 700) * 100vw) 0 calc((40 / 700) * 100vw);
    }

    .cate-slide .swiper-slide {
        margin-right: 13px;
    }

    .cate-slide .swiper-slide a {
        font-size: calc((24 / 700) * 100vw);
        line-height: calc((46 / 700) * 100vw);
        padding: 0 calc((30 / 700) * 100vw);
    }

    .faq-item .faq-answer {
        padding: calc((32 / 700) * 100vw) calc((33 / 700) * 100vw) calc((32 / 700) * 100vw) calc((13 / 700) * 100vw);
        font-size: calc((26 / 700) * 100vw);
        line-height: 1.45em;
        word-break: keep-all;
    }

    .faq-item .faq-answer::after {
        width: calc((20 / 700) * 100vw);
        right: calc((13 / 700) * 100vw);
        top: calc((32 / 700) * 100vw);
        transform: translate(0, calc((14 / 700) * 100vw));
    }

    .faq-item .faq-answer.active::after {
        transform: rotate(180deg) translate(0, calc((-14 / 700) * 100vw));
    }

    .faq-item .faq-content {
        padding: calc((26 / 700) * 100vw) calc((23 / 700) * 100vw) calc((38 / 700) * 100vw) calc((23 / 700) * 100vw);
        font-size: calc((26 / 700) * 100vw);
        word-break: keep-all;
        line-height: 1.53em;
    }

    .faq-item.empty {
        font-size: calc((26 / 700) * 100vw);
        padding: calc((32 / 700) * 100vw) 0;

    }
}