.contact_wrap {
    display: flex;
    gap: 30px;
}

.contact_example_area {
    width: 100%;
    max-width: 392px;
    aspect-ratio: 1/1.759;
    padding: 8px;
    border-radius: 56px;
    background: url("/static/app_www/base/img/bg_phone.png") top center / cover no-repeat;
    box-shadow: 0px 25.18px 50.37px -12.09px rgba(0, 0, 0, 0.1);

    display: flex;
    flex-direction: column;
}

.contact_example_area::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 23.6%;
    flex-shrink: 0;

}

.contact_example_area .contact_example {
    padding: 20px 16.5px;
    flex-grow: 1;
    background-color: #3D3D3D;
    border-radius: 0 0 51px 51px;
}

.contact_bubble_list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.contact_bubble_list>li {
    overflow: hidden;
}

.contact_bubble_list .contact_bubble {
    display: flex;
    width: 100%;
    transform: translateY(calc(100% + 1px));
    transition: all 0.6s ease;
}

.contact_bubble_list .contact_bubble.active {
    transform: translateY(0);
}

.service_info_card .card_head {
    width: 100%;
}

.service_info_card .card_tag {
    max-width: 350px;
}

.service_info_card .no {
    width: fit-content;
}

.service_info_card .contact_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}

.service_info_card .contact_info .card_desc {
    margin-top: 0;
}

.service_info_card .contact_info .btn_default {
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 100px;
}

@media screen and (max-width:1023px) {
    .contact_wrap {
        flex-direction: column;
        gap: 16px;
    }

    .contact_example_area {
        margin: 0 auto;
    }
}

@media screen and (max-width:767px) {
    .contact_example_area {
        padding-bottom: 9px;
    }

    .contact_example_area .contact_example {
        border-radius: 0 0 42px 42px;
        padding: 20px 14px;
    }
}