.tabs-container {
overflow: hidden;
}
.tab-menu {
display: flex;
gap: 3rem;
margin-bottom: 3rem;
}
.tab-link {
cursor: pointer;
font-size: 2.6rem;
color: #9ea1c4;
margin: 0;
transition: all 0.3s;
}
.tab-link:hover {
color: #364aff;
}
.tab-link.tab-active {
color: #364aff;
}
.tab-content {
display: none;
}
.tab-content.tab-active {
display: block;
}
details {
border-bottom: 1px solid #cecece;
overflow: hidden;
}
summary {
padding: 4rem 0;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
summary h3 {
font-size: 2.4rem;
font-weight: 700;
}
summary h3 .q-list {
color: #cecece;
display: inline-block;
width: 7rem;
}
summary h3 .q-text {
transition: all 0.3s;
}
summary:hover h3 .q-text {
color: #364aff;
}
summary .arrow-box {
display: flex;
justify-content: center;
align-items: center;
width: 4rem;
height: 4rem;
border-radius: 50%;
border: 1px solid #cbcbcb;
transition: all 0.3s;
}
summary .arrow-box .icon-arrow {
color: #cbcbcb;
transition: all 0.3s;
}
.faq-active summary .arrow-box {
transform: rotate(180deg);
background-color: #364aff;
}
.faq-active summary .arrow-box .icon-arrow {
color: #fff;
}
.content-wrapper {
height: 0;
overflow: hidden;
transition: height 0.3s ease-out;
}
.answer {
padding: 0 0 4rem 7rem;
font-size: 2rem;
font-weight: 400;
line-height: 3;
}
.answer a {
font-weight: 700;
color: #364aff;
}
@media screen and (max-width: 768px) {
summary h3 .q-list {
width: 5rem;
}
.answer {
padding: 0 0 4rem 0;
}
summary .arrow-box {
display: none;
}
}