.faq-contents {
display: flex;
flex-direction: column;
gap: 24px;
}

.faq-title {
display: flex;
align-items: center;
gap: 12px;
}

.faq-icon {
line-height: 0;
}

.faq-icon img {
height: 35px;
}

.faq-title h3 {
font-size: 28px;
font-weight: 700;
}

.faq-main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
}

.faq-a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px;
background: var(--w-color);
border: 1px solid var(--t-color);
border-radius: 24px;
box-shadow: 0 10px 20px rgba(235, 190, 13, 0.15);
cursor: pointer;
}

.faq-items {
display: flex;
flex-direction: column;
gap: 12px;
}


.faq-b {
background: var(--s-color);
border-radius: 24px;
margin-top: 12px;
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s ease;
padding: 0 24px;
}

.faq-item .faq-b {
    opacity: 0;
    height: 0;
}

.faq-item.active .faq-b {
    opacity: 1;
    height: auto;
}

.faq-b p {
font-size: 16px;
line-height: 2;
overflow: hidden;
margin: 24px 0;
}

.faq-item.active .faq-b {
grid-template-rows: 1fr;
}

.faq-l {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}

.faq-item.active img {
	transform: rotate(180deg);
}

@media (max-width: 1400px) {}

@media (max-width: 1200px) {
.faq-icon img {
height: 30px;
}

.faq-title h3 {
    font-size: 26px;
}

}

@media (max-width: 992px) {
.faq-main {
flex-direction: column;
}

.faq-icon img {
    height: 26px;
}

.faq-title h3 {
    font-size: 24px;
}

.faq-image {
    width: 100%;
}

.faq-l {
    width: 100%;
}

.faq-image img {
    width: 100%;
}

}

@media (max-width: 768px) {
.faq-icon img {
height: 24px;
}

.faq-title h3 {
    font-size: 22px;
}

}

@media (max-width: 576px) {}

@media (max-width: 480px) {}

@media (max-width: 390px) {}