/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 05 2026 | 05:25:17 */
/* ============================
   qna.css
   QNA 아코디언 공통 스타일
   --typeB-* → --one-* 변수로 교체
============================ */

.one-qna-li {
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--one-gap-r);
}

.qna-li {
    overflow: hidden;
    border-radius: 1rem;
}

.qna-question {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--one-gap-lg);
    padding: var(--one-gap-lg) var(--one-gap-xl);
    background: var(--sub-color03);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.25s ease;
}

.qna-question:hover { background-color: #002d57; }

.qna-li.active .qna-question { background-color: #002050; }

.qna-question-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--one-gap-r);
    color: var(--white-color);
    font-size: var(--one-body);
    line-height: var(--one-lh-r);
    letter-spacing: -0.02em;
    word-break: keep-all;
}

.qna-num {
    white-space: nowrap;
    flex-shrink: 0;
}

.qna-arrow {
    flex-shrink: 0;
    width: 27px;
    height: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(0deg) scale(1.6);
    transform-origin: center center;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.qna-arrow::before,
.qna-arrow::after {
    content: '';
    position: absolute;
    width: 11px;
    height: 2px;
    background: var(--white-color);
    border-radius: 2px;
    top: 39%;
}

.qna-arrow::before {
    left: 3px;
    transform: translateY(-50%) rotate(-45deg);
    transform-origin: right center;
}

.qna-arrow::after {
    right: 3px;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: left center;
}

.qna-li.active .qna-arrow { transform: rotate(180deg) scale(1.6); }

.qna-answer-wrap {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.75s ease;
}

.qna-li.active .qna-answer-wrap {
    max-height: 800px;
    opacity: 1;
}

.qna-answer {
    color: var(--one-txt-color);
    font-size: var(--one-body);
    line-height: var(--one-lh-r);
    font-weight: 400;
    letter-spacing: -0.02em;
    word-break: keep-all;
    background-color: var(--sub-color02);
    padding: var(--one-gap-xl) calc(var(--one-gap-xl) + var(--one-gap-r) + 2.5em) var(--one-gap-xl);
    border-top: 1px solid var(--sub-color01);
}


/* ======================================================
   반응형
   ====================================================== */
@media all and (max-width: 1024px) {
    .qna-answer { padding-left: calc(var(--one-gap-xl) + 2em); }
}

@media all and (max-width: 639px) {
    .qna-question-text { align-items: flex-start; }
    .qna-arrow { width: 23px; height: 22px; }
    .qna-arrow::before,
    .qna-arrow::after { width: 9px; }
    .qna-answer { padding-left: 3em; text-align: left !important; }
}