@media (min-width: 436px) {
    :root {
        --registration-step1-panel-width: 420px;
        --registration-step1-panel-height: 270px;
        --registration-region-select-width: 160px;
        --registration-region-select-height: 40px;
        --registration-phone-input-width: 200px;
        --registration-phone-input-margin-left: 20px;

        --registration-step2-panel-width: 420px;
        --registration-step2-panel-height: 280px;

        --registration-step3-panel-width: 420px;
        --registration-step3-panel-height: 310px;
    }

    #registration-title {
        font-size: 23px;
        padding-top: 80px;
    }

    #registration-step1-panel {
        margin-top: -25px;
    }

    #registration-step1-panel-title {
        margin-left: 50px;
        font-size: 16px;
        margin-top: calc(var(--registration-step1-panel-height) / -2 + 16px / 2);
    }

    #registration-step1-panel-title label {
        font-size: 16px;
    }

    #registration-phone-row {
        margin-top: -20px;
    }

    #registration-region-selected-option span {
        font-size: 14px;
    }

    #registration-region-options-container div {
        padding-left: 15px;
    }

    #registration-region-options-container div span {
        font-size: 14px;
    }

    #registration-phone-input {
        line-height: 14px;
        font-size: 14px;
    }

    #registration-btn {
        width: 150px;
        height: 51px;
        /* aspect-ratio: 470/160; */
        margin-top: 90px;
        margin-left: calc(var(--registration-step1-panel-width) / 2 - 150px / 2);
    }

    #registration-step2-panel {
        margin-top: -80px;
    }

    #registration-step2-panel-title {
        font-size: 16px;
        margin-top: 60px;
        margin-left: 50px;
        width: 300px;
    }

    #registration-step2-panel-content {
        margin-top: 105px;
        margin-left: 5px;
    }

    #registration-step2-reward {
        width: 130px;
        height: 85px;
        margin-top: -3px;
        margin-bottom: -7px;
    }

    #registration-step2-panel-t1 {
        font-size: 13px;
    }

    #registration-step2-panel-t2 {
        font-size: 11px;
    }

    #registration-step2-panel-store-btns {
        margin-top: 0px;
    }

    .registration-store-btn {
        width: 130px;
    }

    #registration-step3-panel {
        margin-top: -80px;
    }

    #registration-step3-panel-title {
        font-size: 16px;
        margin-top: 60px;
        margin-left: 50px;
        width: 300px;
    }

    #registration-step3-panel-content {
        margin-top: 100px;
        margin-left: 8%;
        width: 70%;
    }

    .registration-step3-reward span {
        font-size: 13px;
        margin-bottom: -10px;
    }

    .registration-step3-reward img {
        margin-top: 7px;
    }

    #registration-step3-panel-store-btns {
        margin-top: -5px;
    }
}

@media (min-width: 576px) {
    #registration-title {
        font-size: 30px;
    }

    #register-success-dialog-close-btn {
        /* top: calc(50% - 300px); */
        left: 83vw;
        width: 45px;
        height: 45px;
    }

    #register-success-dialog-panel-content {
        padding-top: 8vw;
    }

    #register-success-dialog-panel-title {
        margin-bottom: 30px;
    }

    .register-success-dialog-panel-t1 {
        font-size: 28px;
        line-height: 36px;
    }

    .register-success-dialog-panel-t2 {
        margin-top: -20px;
        font-size: 20px;
    }

    #register-success-dialog-panel img {
        width: 300px;
    }
}

@media (min-width: 768px) {
    #registration-title {
        font-size: 40px;
    }

    #register-success-dialog-close-btn {
        left: calc(50% + min(38vw, 340px));
    }

    #register-success-dialog-panel-content {
        padding-top: 60px;
    }

    #register-success-dialog-panel-title {
        font-size: 40px;
        line-height: 40px;
        margin-bottom: 30px;
    }

    .register-success-dialog-panel-t1 {
        font-size: 28px;
        line-height: 36px;
    }

    .register-success-dialog-panel-t2 {
        font-size: 20px;
    }

}

@media (min-width: 992px) {}

@media (min-width: 1200px) {
    :root {
        --registration-step1-panel-width: 820px;
        --registration-step1-panel-height: 380px;
        --registration-region-select-width: 250px;
        --registration-region-select-height: 45px;
        --registration-phone-input-width: 310px;
        --registration-phone-input-margin-left: 18px;

        --registration-step2-panel-width: 450px;
        --registration-step2-panel-height: 460px;

        --registration-step3-panel-width: 450px;
        --registration-step3-panel-height: 460px;
    }

    #registration {
        display: block;
        flex-direction: unset;
        align-items: unset;
    }

    #registration-title {
        font-size: 45px;
        padding-top: 110px;
        margin-bottom: 0px;
    }

    #registration-step1-panel {
        margin-top: -35px;
        margin-left: calc(50% - var(--registration-step1-panel-width) / 2);
    }

    #registration-step1-panel-title {
        width: calc(var(--registration-step1-panel-width) - 80px);
        font-size: 25px;
        margin-top: calc(var(--registration-step1-panel-height) / -2 + 5px);
        margin-left: 15px;
    }

    #registration-step1-panel-title label {
        font-size: 25px;
        display: inline-block;
    }

    #registration-region-selected-option {
        width: 100%;
        height: 100%;
        padding-left: 7px;
    }

    #registration-region-selected-option span {
        font-size: 20px;
    }

    #registration-region-options-container {
        margin-left: 2px;
    }

    #registration-region-options-container div {
        font-size: 16px;
        margin-top: 5px;
        margin-bottom: 2.5px;
        padding-left: 19px;
    }

    #registration-region-options-container div span {
        padding-right: 12px;
        font-size: 20px;
    }

    #registration-phone-input {
        width: 90%;
        height: 30px;
        line-height: 45px;
        font-size: 20px;
        margin-left: 20px;
    }

    #registration-btn {
        margin-top: 162px;
        width: 243px;
        height: 82.71px;
        margin-left: calc(var(--registration-step1-panel-width) / 2 - 243px / 2);
    }

    #registration-step23-row {
        --registration-step23-row-width: calc(var(--registration-step2-panel-width) + var(--registration-step3-panel-width) + 0px);
        width: var(--registration-step23-row-width);
        margin-left: calc(50% - var(--registration-step23-row-width) / 2);
        margin-top: -100px;
        display: flex;
        justify-content: space-between;
    }

    #registration-step2-panel {
        margin-top: 0px;
        margin-left: 0px;
    }

    #registration-step2-panel-title {
        width: calc(var(--registration-step2-panel-width) - 160px);
        height: 30px;
        font-size: 25px;
        margin-top: 80px;
        margin-left: 60px;
    }

    #registration-step2-panel-content {
        margin-top: 140px;
        margin-left: 4.5%;
        padding-left: 0px;
        width: 80%;
        height: 170px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #registration-step2-reward {
        width: 225px;
        height: auto;
        margin-top: -5px;
        margin-bottom: -20px;
    }

    #registration-step2-panel-t1 {
        font-size: 20px;
    }

    #registration-step2-panel-t2 {
        font-size: 17px;
    }

    #registration-step2-panel-content-reward {
        height: 135px;
    }

    #registration-step2-panel-store-btns {
        width: 100%;
        margin-top: 60px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .registration-store-btn {
        width: 150px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .registration-store-btn img {
        width: 100%;
    }

    #registration-step3-panel {
        margin-top: 0px;
        margin-left: 0px;
    }

    #registration-step3-panel-title {
        width: calc(var(--registration-step3-panel-width) - 160px);
        height: 30px;
        font-size: 25px;
        margin-top: 80px;
        margin-left: 60px;
    }

    #registration-step3-panel-content {
        margin-top: 140px;
        margin-left: 2px;
        width: 440px;
        height: 260px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #registration-step3-rewards {
        width: 100%;
    }

    .registration-step3-reward span {
        font-size: 20px;
    }

    .registration-step3-reward img {
        width: 180px;
    }

    #registration-step3-panel-store-btns {
        margin-top: -12px;
    }

    #register-success-dialog-close-btn {
        top: calc(50% - 315px);
        left: calc(50% + 340px);
        width: 45px;
        height: 45px;
    }

    #register-success-dialog-panel {
        width: 850px;
        height: 560px;
    }

    #register-success-dialog-store-btns a {
        margin-left: 10px;
        margin-right: 10px;
        width: 50%;
    }

    #register-success-dialog-store-btns a img {
        width: 100%;
    }
}

@media (min-width: 1452px) {}