@charset "UTF-8";

main {
    padding: 96px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

.width100 {
    width: 100%;
}

.flexbox {
    display: flex;
}

.flex-direction-c {
    flex-direction: column;
}

.align-c {
    align-items: center;
}

.gap16 {
    gap: 16px;
}

.support_container {
    display: flex;
    max-width: 1024px;
    width: 100%;
    padding: 64px 40px;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    border-radius: 10px;
    border: 1px solid #80CFF4;
    background: #FFF;
}

.support_flexbox {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    row-gap: 16px;
    align-self: stretch;
    flex-wrap: wrap;
}

.support-faq_link {
    display: flex;
    width: 176px;
    padding: 24px 16px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    background: #EEFCFF;
}

.support-faq_link .btn {
    width: 100%;
    align-items: center;
    font-size: 14px;
    padding: 8px;
}

.support_link .txt-height {
    height: 48px;
    display: flex;
    align-items: center;
}

.support_txt {
    text-align: center;
}

.support_link {
    display: flex;
    width: 48%;
    padding: 32px 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    border-radius: 12px;
    background: #EEFCFF;
}

.before .support_link {
    height: 248px;
}

.after .support_link{
    height: 291px;
}

.support-after_content h3 {
    width: 100%;
    border-radius: 4px;
    padding: 16px 24px;
    background: #C5ECFF;
}

.support-after_content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

@media screen and (max-width: 1024px) {
    main {
        padding: 96px 16px;
    }
}

@media screen and (max-width: 640px) {
    .support_container {
        padding: 40px 16px;
        gap: 32px;
    }

    .support-faq_link {
        width: 48%;
        padding: 16px 12px;
    }

    .support-faq_link .btn {
        font-size: 12px;
    }

    .before .support_flexbox,
    .after .support_flexbox {
        flex-direction: column;
    }

    .support_link {
        width: 100%;
        padding: 32px 16px;
    }
    .support-after_content h3{
        padding: 16px 12px;
    }
}