.modal_overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 10000;
}

.modal_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 8rem);
    max-width: 92rem;
    max-height: 142.5rem;
    background: var(--color-FFF);
    border-radius: 5rem;
    /* max-height: 140rem; */
    /* padding-bottom: calc((1420 / 920) * 85.1856%); */
    aspect-ratio: 92/142;
}

.modal_step_box {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 14.8148vw 15.1852vw 12.3077vw;
}
.fin_modal_step_box {
    padding: 0;
}
.modal_close {
    position: absolute;
    top: 3.8rem;
    right: 3.8rem;
    width: 6.4rem;
    height: 6.4rem;
    cursor: pointer;
    z-index: 10000;
}
.lang_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 16rem);
    background: var(--color-FFF);
    border-radius: 5rem;
    /* padding-bottom: calc((580 / 920) * 85.1856%); */
    aspect-ratio: 9.2/5.8 !important;
}
.modal_step {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: fit-content;
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%; */
}
/* .modal_step_box {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 14.9vw 15.4vw 11.9vw;
} */
.final_step {
    height: 100%;
}
.lang_modal_step {
    /* padding: 11.4rem 14.1rem 11.1rem !important; */
    padding: 10.6vw 13.1vw 10.3vw !important;
}

.modal_header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    width: 100%;
    align-items: center;
}

.step1 {
    margin-bottom: 8.2vw;
}
.member_header {
    gap: 3rem !important;
    margin-bottom: 6.6vw !important;
}
.member_step2 {
    margin-bottom: 0.7rem !important;
}
.modal_header h2 {
    font-size: 5.6rem;
    font-weight: 700;
    color: var(--color-222);
    line-height: 1.77;
    white-space: nowrap;
}
.member_header h2 {
    line-height: 1.3 !important;
}

.sub_title {
    color: var(--color-8E8E8E);
    font-size: 2.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.options_list {
    display: flex;
    flex-direction: column;
}

.option_item {
    display: flex;
    gap: 2rem;
    align-items: center;
    padding: 2.3rem 3.4rem;
    height: 8.8rem;
    border: 0.2rem solid var(--color-D9DCE4);
    border-radius: 1.6rem;
    color: var(--color-8E8E8E);
    font-size: 2.4rem;
    font-weight: 500;
}
.required {
    /* gap: 2rem; */
    gap: 0;
    /* justify-content: space-between; */
}
.option_item_label {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.option_item .toggle_icon {
    width: 2.8rem;
    height: 2.8rem;
}
.all_agree {
    border: none;
    background-color: var(--color-F0F1F4);
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 4rem;
}
.option_item_list {
    display: flex;
    flex-direction: column;
}
.option_item {
    margin-bottom: 1.8rem;
}
.option_item:last-child {
    margin-bottom: 0;
}
/* .option_item input[type="checkbox"] {
    width: 20px;
    height: 20px;
} */

.option_item input[type="checkbox"] {
    appearance: none;
    width: 32px;
    height: 32px;
    background: url("../images/icons/icon_check.png") no-repeat center/contain;
}

.option_item input[type="checkbox"]:checked {
    background: url("../images/icons/icon_checked.png") no-repeat center/contain;
}
.option_item input[type="checkbox"]:checked + label {
    color: var(--color-3E7FF6);
}

/* step 2 */

.step2 {
    margin-bottom: 4.6rem;
}
.phone_input_container,
.pin_input_container {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}

.phone_type_selector,
.pin_type_selector {
    display: flex;
    width: 100%;
    background-color: var(--color-F7F8F9);
    border-radius: 1.6rem;
    padding: 2.5rem 0;
    height: 9.2rem;
}
.setting_pin {
    background-color: var(--color-F7F8F9) !important;
}
.pin_type_selector {
    padding: 1.5rem 0;
    gap: 1.6rem;
    justify-content: center;
    align-items: center;
}
.pin_type_selector img {
    width: 6rem;
    height: 6rem;
}
.pin_type_selector span {
    color: var(--color-5B6270);
    font-size: 2.8rem;
    font-weight: 600;
}
.phone_type {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.phone_type input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    position: relative;
}

.phone_type input[type="checkbox"] {
    background-image: url("../images/icons/icon_check.png");
    background-size: cover;
}

.phone_type input[type="checkbox"]:checked {
    background-image: url("../images/icons/icon_checked.png");
}
.phone_type input[type="checkbox"]:checked ~ span {
    color: var(--color-3E7FF6);
}
.phone_type span {
    font-size: 2.8rem;
    font-weight: 600;
    color: var(--color-8E8E8E);
}
.phone_number,
.pin_number {
    margin-bottom: 4rem;
    border-bottom: 0.2rem solid var(--color-D9DCE4);
}

.pin_number {
    display: flex;
    justify-content: center;
    padding: 10.4rem 0 4.8rem;
}

.pin_digit {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background-color: var(--color-D9DCE4);
    margin-right: 3.6rem;
}
.pin_digit:last-child {
    margin-right: 0;
}

.pin_digit.filled {
    background-color: var(--color-3E7FF6);
}
.phone_number input {
    width: 100%;
    padding: 3rem 0;
    font-size: 5.8rem;
    text-align: center;
    border: none;
    font-weight: 600;
    font-family: Pretendard;
    color: var(--color-3E7FF6);
    outline: none;
}

.number_pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 2.4rem;
    border-radius: 2.2rem;
    overflow: hidden;
    filter: drop-shadow(0px 2px 14px rgba(0, 0, 0, 0.08));
}

.number_pad button {
    width: 100%;
    background: var(--color-FFF);
    border: none;
    border-right: 1px solid var(--color-D9DCE4);
    border-bottom: 1px solid var(--color-D9DCE4);
    /* display: flex;
    position: relative; */
    /* padding-bottom: calc((129 / 196) * 100%); */
    aspect-ratio: 19.6/12.9;
    font-size: 4.6rem;
    font-weight: 700;
    font-family: Pretendard;
    position: relative;
}
.number_pad button span,
.delete img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4.6rem;
    font-weight: 700;
    font-family: Pretendard;
}
.number_pad button:focus-visible,
.number_pad button:active {
    background-color: var(--color-F0F1F4) !important;
    outline: none;
}
.number_pad button:nth-child(3n) {
    border-right: none;
}

.number_pad button:nth-child(n + 10) {
    border-bottom: none;
}
.delete {
    display: flex;
    justify-content: center;
    align-items: center;
}
.delete img {
    /* width: 100%;
    height: 100%; */
    aspect-ratio: 19.6/12.9;
}

.modal_button {
    width: 100%;
    height: auto;
    /* max-height: 5.4rem; */
    padding: 0 3.5rem;
    background-color: var(--color-3E7FF6);
    color: var(--color-FFF);
    border: none;
    border-radius: 10rem;
    position: relative;
}
.modal_button span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3.2rem;
    font-weight: 700;
    white-space: nowrap;
}
.modal_button:disabled {
    background-color: var(--color-D9DCE4);
    cursor: not-allowed;
}

.modal_buttons {
    width: 100%;
    padding: 0 4.6rem;
    padding-bottom: 5.8vw;
    display: flex;
    /* gap: 1.4rem; */
}
.modal_button.primary {
    margin-left: 1.4rem;
}
.agree_box {
    width: 100%;
    padding: 0 15.4vw;
    padding-bottom: 5.8vw;
    display: flex;
    gap: 1.4rem;
}
.download {
    max-width: 59rem !important;
    min-width: 59rem !important;
    justify-content: center !important;
}
.final_button {
    /* padding-bottom: calc((108 / 590) * 100%); */
    aspect-ratio: 590/108;
}
.confirmation_box {
    width: 100%;
}
.confirmation_txt {
    color: var(--color-3E7FF6);
}
.countdown_txt {
    margin-top: 2.4rem;
    font-size: 2.8rem;
    color: var(--color-8E8E8E);
    font-weight: 500;
    text-align: center;
}

.secondary {
    background-color: var(--color-F0F1F4);
    color: var(--color-858E9F);
    /* padding-bottom: calc((108 / 224) * 27.054%);
    width: 27.2676vw; */
    aspect-ratio: 224/108;
    width: 27.4vw;
}

.confirmation_bg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5rem 5rem 0 0;
}

.confirmation_content {
    padding-top: 24.8vw;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    z-index: 1;
}

.confirmation_box img {
    width: 12rem;
    height: 12rem;
    margin-bottom: 5.3vw;
}
.confirmation_box h2 {
    font-size: 5.6rem;
    font-weight: 700;
    color: var(--color-222);
    margin-bottom: 3.2vw;
    line-height: 1.18;
}
.confirmation_box p {
    font-size: 2.8rem;
    font-weight: 500;
    color: var(--color-8E8E8E);
}

/* 결제 모달 */

.qr_box {
    position: relative;
    width: 26.2vw;
    height: 26.2vw;
    margin: 0 auto;
}
.qr_box img {
    position: absolute;
    width: 3vw;
    height: 3vw;
}
.line1 {
    top: 0;
    left: 0;
}
.line2 {
    top: 0;
    right: 0;
}
.line3 {
    bottom: 0;
    left: 0;
}
.line4 {
    bottom: 0;
    right: 0;
}
.qr_code {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22.8vw !important;
    height: 21.852vw !important;
    max-width: 24.6rem;
}
.about_box {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-F7F8F9);
    border-radius: 1.2rem;
    height: 17.6rem;
    max-width: 59.2rem;
    /* margin: 10.2rem auto 0; */
    margin: 9.5vw auto 0;
}
.about_box span {
    font-size: 2.8rem;
    font-weight: 500;
    color: var(--color-5B6270);
    text-align: center;
    line-height: 1.33;
}
.payment_confirmation_content {
    /* padding-top: 38.8rem; */
    padding-top: 64.7%;
}
.payment_confirmation_box h2 {
    margin-bottom: 4.8rem;
}
.payment_confirmation_box h2 > span {
    color: var(--color-3E7FF6);
}
.payment_confirmation_box p {
    color: var(--color-5B6270);
    font-weight: 700;
    margin-bottom: 3.6rem;
}
.word {
    color: var(--color-8E8E8E);
    font-weight: 400;
    /* 원래 500 -> 폰트 굵기 전체적으로 팀장님한테 확인 받기 */
    font-size: 2.8rem;
    line-height: 1.25;
    white-space: nowrap;
}

/* 언어 선택 */
.lang_title {
    font-size: 5rem;
    font-weight: 600;
    color: var(--color-222);
    line-height: 1.32;
    white-space: nowrap;
    text-align: center;
    margin-bottom: 7.8vw;
}
.country {
    display: flex;
    justify-content: center;
    gap: 8.2vw;
    align-items: center;
    margin: 0 auto;
    max-width: 63.8rem;
}
.country li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.2rem;
    cursor: pointer;
}
.country li > .gonfalon {
    width: 100%;
    height: 100%;
    max-height: 14.3vw;
    max-width: 14.3vw;
    min-height: 2.4rem;
    min-width: 2.4rem;
    box-shadow: 0 0.2rem 1.6rem 0 rgba(0, 0, 0, 0.12);
    border-radius: 10rem;
}

.country li span {
    color: var(--color-222);
    font-weight: 600;
    font-size: 2.4rem;
}

.country li > .check_icon {
    position: absolute;
    right: -0.8rem;
    top: -0.8rem;
    width: 4.5vw !important;
    height: 4.5vw !important;
}

/*  */

.member_info_box {
    display: flex;
    flex-direction: column;
    gap: 3.6rem;
}
.info_item {
    display: flex;
    gap: 1.4rem;
}
.info_label {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--color-5B6270);
}
.info_value {
    font-size: 3.2rem;
    font-weight: 500;
    color: var(--color-000);
}
.error_box {
    margin-top: 26.1vw;
}
.error_message {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--color-5B6270);
}

.platform_step {
    padding: 14.8148vw 15.1852vw 12.3077vw;
}
/* @media (min-width: 1200px) {
    .modal_container {
        height: 142.5rem;
        padding-bottom: 0;
    }
} */
@media (max-width: 1000px) {
    /* .modal_container {
        padding-bottom: calc((1420 / 920) * 97.1856%);
    } */

    .modal_header {
        gap: 2.2rem;
    }
    .modal_header h2 {
        font-size: 4.8rem;
    }
    .sub_title {
        font-size: 2.6rem;
    }

    .phone_number input {
        padding: 2rem 0;
        font-size: 5rem;
    }
    .phone_type input[type="checkbox"] {
        width: 3.6rem;
        height: 3.6rem;
    }

    .phone_type span {
        font-size: 2.4rem;
    }

    .number_pad button span {
        font-size: 4rem;
    }
    .modal_buttons {
        bottom: 5.6rem;
    }
    .modal_button span {
        font-size: 2.8rem;
    }

    .option_item {
        height: 8rem;
        padding: 0 3.4rem;
        font-size: 2rem;
    }

    .all_agree {
        font-size: 2.4rem;
        margin-bottom: 3.6rem;
    }

    .option_item {
        margin-bottom: 1.6rem;
    }
}
@media (max-width: 950px) {
    .lang_title {
        font-size: 4.2rem;
    }
    .lang_modal_close {
        width: 5.4rem;
        height: 5.4rem;
    }
    .country li span {
        font-size: 2.2rem;
    }
    .country {
        gap: 7.2vw;
    }
    .confirmation_box img {
        width: 10rem;
        height: 10rem;
    }
    .confirmation_box h2 {
        font-size: 4.8rem;
    }
    .confirmation_box p {
        font-size: 2.4rem;
    }
    .word {
        font-size: 2.4rem;
    }
}

@media (max-width: 850px) {
    .modal_header {
        gap: 2rem;
    }

    .lang_container,
    .modal_container {
        width: calc(100% - 8rem);
    }
    .modal_close {
        width: 5.6rem;
        height: 5.6rem;
    }

    .number_pad button span {
        font-size: 3.4rem;
    }
    .modal_header h2 {
        font-size: 4.2rem;
    }
    .pin_type_selector span {
        font-size: 2.4rem;
    }
    .pin_number {
        padding: 8.4rem 0 3.8rem;
    }
    .pin_digit {
        width: 2.4rem;
        height: 2.4rem;
        margin-right: 3.2rem;
    }
    .phone_number input {
        font-size: 4.2rem;
    }
    .modal_button span {
        font-size: 2.6rem;
    }
}

@media (max-width: 800px) {
    .lang_title {
        font-size: 3.8rem;
    }
    .lang_modal_close {
        width: 4.8rem;
        height: 4.8rem;
    }
    .country li span {
        font-size: 2rem;
    }
    .country {
        gap: 6.4vw;
    }
    .lang_title {
        margin-bottom: 6.2vw;
    }
}
@media (max-width: 770px) {
    .modal_header {
        gap: 1.8rem;
    }

    .confirmation_bg {
        border-radius: 4.2rem 4.2rem 0 0;
    }
    .modal_close {
        width: 4.4rem;
        height: 4.4rem;
    }

    .number_pad button span {
        font-size: 2.8rem;
    }
    .step2 {
        margin-bottom: 3.6rem;
    }
    .modal_header h2 {
        font-size: 3.6rem;
    }
    .sub_title {
        font-size: 2.4rem;
    }
    .phone_type_selector,
    .pin_type_selector {
        height: 7.8rem;
    }
    .pin_type_selector span {
        font-size: 2.2rem;
    }
    .pin_number {
        padding: 6.4rem 0 3.2rem;
    }
    .pin_digit {
        width: 2.2rem;
        height: 2.2rem;
        margin-right: 2.8rem;
    }
    .phone_number input {
        font-size: 3.8rem;
    }
    .phone_type input[type="checkbox"] {
        width: 3.2rem;
        height: 3.2rem;
    }

    .phone_type span {
        font-size: 2rem;
    }

    .all_agree {
        margin-bottom: 3.2rem;
    }

    .option_item {
        height: 7.4rem;
    }
}

@media (max-width: 700px) {
    .lang_title {
        font-size: 3.4rem;
    }
    .lang_modal_close {
        top: 3.2rem;
        right: 3.2rem;
        width: 4.2rem;
        height: 4.2rem;
    }
    .country li span {
        font-size: 1.8rem;
    }
    .country {
        gap: 6vw;
    }
    .lang_title {
        margin-bottom: 5.8vw;
    }
    .lang_modal_step {
        padding: 8.6vw 13.1vw 8.3vw !important;
    }

    .confirmation_box img {
        width: 7.2rem;
        height: 7.2rem;
    }
    .confirmation_box h2 {
        font-size: 3.8rem;
    }
    .confirmation_box p {
        font-size: 2rem;
    }
    .word {
        font-size: 2rem;
    }
}
@media (max-width: 620px) {
    .modal_header {
        gap: 1.6rem;
    }
    .modal_header h2 {
        font-size: 3.2rem;
    }
    .sub_title {
        font-size: 2rem;
    }
    .lang_title {
        font-size: 2.8rem;
    }
    .lang_modal_close {
        top: 2.8rem;
        right: 2.8rem;
        width: 3.6rem;
        height: 3.6rem;
    }
    .country li span {
        font-size: 1.6rem;
    }
    .country {
        gap: 6vw;
    }
    .lang_title {
        margin-bottom: 4.8vw;
    }
    .country li {
        gap: 1.8rem;
    }

    .country li > .check_icon {
        right: -0.4rem;
        top: -0.4rem;
    }
    .phone_number input {
        font-size: 3.2rem;
    }

    .number_pad button span {
        font-size: 2.6rem;
    }
    .modal_button span {
        font-size: 2rem;
        white-space: nowrap;
    }

    .pin_digit {
        width: 1.8rem;
        height: 1.8rem;
        margin-right: 2.4rem;
    }
    .about_box {
        height: 15rem;
    }
    .about_box span {
        font-size: 2.4rem;
    }
    .option_item {
        padding: 0 2.4rem;
        gap: 1.8rem;
        height: 6.6rem;
        font-size: 1.8rem;
    }

    .all_agree {
        font-size: 2.2rem;
        margin-bottom: 2.4rem;
    }

    .option_item {
        margin-bottom: 1.2rem;
    }
    .option_item input[type="checkbox"] {
        width: 2.8rem;
        height: 2.8rem;
    }
}

@media (max-height: 1500px) {
    .modal_step_box {
        padding: 7rem 7.5rem 4.6rem;
    }
    .fin_modal_step_box {
        padding: 0;
    }
    .step1 {
        margin-bottom: 4.2rem;
    }
    .step2 {
        margin-bottom: 3.6rem;
    }
    .modal_header {
        gap: 1.4rem;
    }
    .agree_box {
        width: 100%;
        padding: 0 7.5rem;
        padding-bottom: 5.6rem;
        display: flex;
        gap: 1.4rem;
    }
    .phone_type_selector,
    .pin_type_selector {
        height: 7.8rem;
    }
    .phone_type span {
        font-size: 2rem;
    }
    .phone_type input[type="checkbox"] {
        width: 3.2rem;
        height: 3.2rem;
    }
    .modal_container {
        /* width: calc(100% - 4rem);
        height: 80rem;
        padding-bottom: 0; */
        width: calc(100% - 4rem);
        aspect-ratio: 49/80;
        max-height: 80rem;
        max-width: 48rem;
        padding-bottom: 0;
    }
    .modal_step {
        /* aspect-ratio: 49/80; */
        max-height: 80rem !important;
        max-width: 48rem;
        margin: 0 auto;
    }
    .modal_header h2 {
        font-size: 2.8rem;
    }
    .member_header {
        margin-bottom: 3.75rem !important;
    }
    .sub_title {
        font-size: 1.8rem;
    }
    .phone_number input {
        padding: 1.6rem 0;
        font-size: 2.6rem;
    }
    .lang_container {
        border-radius: 3.6rem;
    }
    .lang_title {
        font-size: 2rem;
    }
    .lang_modal_close {
        top: 1.8rem;
        right: 1.8rem;
        width: 2rem;
        height: 2rem;
    }
    .country li {
        gap: 1.4rem;
    }
    .country li span {
        font-size: 1.2rem;
    }
    .country {
        gap: 4.5vw;
    }
    .modal_close {
        top: 2.4rem;
        right: 2.4rem;
        width: 3.4rem;
        height: 3.4rem;
    }

    .number_pad button span {
        font-size: 2rem;
    }
    .modal_buttons {
        padding-bottom: 3.4rem;
    }
    .modal_button span {
        font-size: 1.6rem;
        max-height: 5.8rem;
    }

    .pin_digit {
        width: 1.6rem;
        height: 1.6rem;
        margin-right: 2rem;
    }

    .about_box {
        height: 13rem;
        margin: 5.5rem auto 0;
    }
    .about_box span {
        font-size: 2rem;
    }

    .option_item {
        height: 5.4rem;
        font-size: 1.4rem;
        gap: 1.4rem;
    }

    .all_agree {
        font-size: 1.6rem;
        margin-bottom: 2.2rem;
    }

    .option_item input[type="checkbox"] {
        width: 2rem;
        height: 2rem;
    }

    .pin_number {
        padding: 6.4rem 0 3.2rem;
    }
    .confirmation_content {
        padding-top: 15rem;
    }

    .confirmation_box img {
        width: 6rem;
        height: 6rem;
        margin-bottom: 5.3vw;
    }
    .line1,
    .line2,
    .line3,
    .line4 {
        max-width: 1.7rem !important;
    }
    .confirmation_box h2 {
        font-size: 3.2rem;
    }
    .confirmation_box p {
        font-size: 1.6rem;
    }
    .qr_box {
        max-width: 15rem;
    }
    .qr_box img {
        max-width: 13rem;
    }
    .word {
        font-size: 1.8rem;
    }

    .option_item {
        margin-bottom: 1.2rem;
    }
    .option_item {
        padding: 0 2.4rem;
    }
    .modal_button.primary {
        min-width: 26.3rem;
    }

    .platform_step {
        padding: 14.8148vw 7.1852vw 12.3077vw;
    }
}

/* @media (max-height: 830px) {
    .modal_container {
        max-height: 55rem;
        max-width: 33.5rem;
        padding-bottom: 0;
    }
    .modal_step {
        max-height: 55rem !important;
        max-width: 33.5rem;
        margin: 0 auto;
    }
} */

@media (max-width: 570px) {
    /* .modal_container {
         height: auto;
        padding-bottom: calc((800 / 490) * 80.3708%); 
}*/
    .modal_button {
        padding: 0 2.5rem;
    }
    .modal_button.primary {
        min-width: auto;
    }
    .modal_header {
        gap: 1.4rem;
    }

    .lang_container,
    .modal_container {
        border-radius: 3.6rem;
    }
    .confirmation_bg {
        border-radius: 3.6rem 3.6rem 0 0;
    }
    .phone_number input {
        padding: 1.6rem 0;
        font-size: 2.8rem;
    }
    .phone_type input[type="checkbox"] {
        width: 2.8rem;
        height: 2.8rem;
    }

    .phone_type span {
        font-size: 1.8rem;
    }
    .modal_header h2 {
        font-size: 2.8rem;
    }
    .sub_title {
        font-size: 1.8rem;
    }
    .lang_container {
        border-radius: 4rem;
    }
    .lang_title {
        font-size: 2.4rem;
    }
    .lang_modal_close {
        top: 2rem;
        right: 2rem;
        width: 3rem;
        height: 3rem;
    }
    .country li {
        gap: 1.6rem;
    }
    .country li span {
        font-size: 1.4rem;
    }
    .country {
        gap: 5vw;
    }
    .modal_close {
        top: 3rem;
        right: 3rem;
        width: 4rem;
        height: 4rem;
    }

    .number_pad button span {
        font-size: 2.4rem;
    }
    .confirmation_box img {
        width: 6rem;
        height: 6rem;
    }
    .confirmation_box h2 {
        font-size: 3.2rem;
    }
    .confirmation_box p {
        font-size: 1.6rem;
    }
    .word {
        font-size: 1.8rem;
    }
    .about_box {
        height: 13rem;
    }
    .about_box span {
        font-size: 2rem;
    }

    .option_item {
        padding: 0 2rem;
        font-size: 1.6rem;
        gap: 1.6rem;
        height: 5.8rem;
    }

    .all_agree {
        font-size: 2rem;
    }

    .option_item input[type="checkbox"] {
        width: 2.4rem;
        height: 2.4rem;
    }
    .modal_step_box {
        padding: 5rem 8vw 5vw !important;
    }
    .fin_modal_step_box {
        padding: 0 !important;
    }
    .modal_buttons {
        padding: 0 8vw;
        padding-bottom: 5.8vw;
    }
    .agree_box {
        padding: 0 8vw;
        padding-bottom: 5.8vw;
    }
}

@media (max-width: 480px) {
    /* .modal_container {
        padding-bottom: calc((1420 / 920) * 122.1856%);
    } */
    .lang_container,
    .modal_container {
        width: calc(100% - 4rem);
    }
    .modal_header h2 {
        font-size: 2.4rem;
    }
    .sub_title {
        font-size: 1.4rem;
    }
    .phone_number input {
        font-size: 2.6rem;
    }
    .lang_container {
        border-radius: 3.6rem;
    }
    .lang_title {
        font-size: 2rem;
    }
    .lang_modal_close {
        top: 1.8rem;
        right: 1.8rem;
        width: 2rem;
        height: 2rem;
    }
    .country li {
        gap: 1.4rem;
    }
    .country li span {
        font-size: 1.2rem;
    }
    .country {
        gap: 4.5vw;
    }
    .modal_close {
        top: 2.4rem;
        right: 2.4rem;
        width: 3.4rem;
        height: 3.4rem;
    }

    .number_pad button span {
        font-size: 2rem;
    }
    .modal_button {
        font-size: 1.6rem;
    }

    .pin_digit {
        width: 1.6rem;
        height: 1.6rem;
        margin-right: 2rem;
    }
    .about_box {
        height: 11rem;
    }
    .about_box span {
        font-size: 1.8rem;
    }

    .option_item {
        height: 5.4rem;
        font-size: 1.4rem;
        gap: 1.4rem;
    }

    .all_agree {
        font-size: 1.6rem;
        margin-bottom: 2.2rem;
    }

    .option_item input[type="checkbox"] {
        width: 2rem;
        height: 2rem;
    }

    .secondary {
        padding-bottom: calc((108 / 224) * 33.054%);
    }
}

@media (max-width: 430px) {
    .pin_number {
        padding: 4.8rem 0 2.6rem;
    }
    .modal_header h2 {
        font-size: 2.2rem;
    }
    .sub_title {
        font-size: 1.4rem;
    }
    .lang_title {
        font-size: 1.8rem;
    }
    .lang_modal_close {
        top: 1.6rem;
        right: 1.6rem;
        width: 2rem;
        height: 2rem;
    }
    .country li {
        gap: 1.2rem;
    }
    .country li span {
        font-size: 1.1rem;
    }

    .lang_modal_step {
        padding: 10vw 11.1vw 9.3vw !important;
    }
    .modal_close {
        top: 2rem;
        right: 2rem;
        width: 2.8rem;
        height: 2.8rem;
    }
    .confirmation_box img {
        width: 4.6rem;
        height: 4.6rem;
    }
    .confirmation_box h2 {
        font-size: 2.6rem;
    }
    .confirmation_box p {
        font-size: 1.2rem;
    }
    .word {
        font-size: 1.6rem;
    }
    .about_box {
        height: 9rem;
    }
    .about_box span {
        font-size: 1.6rem;
    }
    .option_item {
        height: 5rem;
        font-size: 1.2rem;
        gap: 1.2rem;
    }

    .all_agree {
        font-size: 1.4rem;
        margin-bottom: 1.8rem;
    }
    .phone_type input[type="checkbox"] {
        width: 2.4rem;
        height: 2.4rem;
    }

    .phone_type span {
        font-size: 1.6rem;
    }
    .phone_type_selector,
    .pin_type_selector {
        height: 6rem;
    }
}

@media (max-width: 380px) {
    .lang_container {
        border-radius: 2.2rem;
    }
    .lang_title {
        font-size: 1.6rem;
    }
    .phone_number input {
        font-size: 2.4rem;
    }
    .country li {
        gap: 1rem;
    }
    .country li span {
        font-size: 1rem;
    }
    .country li > .check_icon {
        right: -0.3rem;
        top: -0.3rem;
    }
    .word {
        font-size: 1.3rem;
    }
    .about_box {
        height: 7.5rem;
    }
    .about_box span {
        font-size: 1.4rem;
    }
    .option_item {
        height: 4.8rem;
    }
}