.faq {

    margin: 0 auto;
    background: #fff; dd
    overflow: hidden;
}

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

.faq-q {
    cursor: pointer;
    font-size: 1rem;
    padding:1rem 1rem;
    font-weight: 500;
    position: relative;
}
.faq-q > i { color:#333;  margin-right: .5rem; }
.faq-q::after {
    content: '+';
    position: absolute;
    right: 20px;
    transition: transform 0.3s;
}

.faq-item.active .faq-q::after {
    content: '−';
    transform: rotate(180deg);
}

.faq-a {
    font-size: 1rem; font-weight: 300;
    border-top: 1px solid #dfdfdf;
    background: #f9f9f9;
    display: none;
    padding: 2rem 2rem;
    color: #444;
    line-height: 1.6;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}


div.itemBox {
    display: grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap: 1rem;
}
div.itemBox > div {
    background: #f9f9f9;
    font-size:.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    aspect-ratio: 1/1;
    grid-gap: .5rem;
    cursor: pointer;
}
div.itemBox > div > i { font-size: 1.5rem; color: #787878; }
div.itemBox > div.on {
    background: #333; color:#FFF;
}
div.itemBox > div.on > i {
    color:#FFF;
}
div.itemBox > div:hover {
    background: #333; color:#FFF;
}
div.itemBox > div:hover > i {
    color:#FFF;
}


@media (max-width: 599px) {
    div.itemBox {
        display: grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap: 1rem;
    }

}

/* Fold / Flip */
@media (min-width: 600px) and (max-width: 767px) {

    div.itemBox {
        display: grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap: 1rem;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {

    div.itemBox {
        display: grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap: 1rem;
    }

    div.itemBox > div {
        aspect-ratio: 3/2;
    }

}

/* Small Desktop / Laptop */
@media (min-width: 1025px) and (max-width: 1439px) {

}

/* Large Desktop / WQHD 이상 */
@media (min-width: 1440px) {

}