@media (min-width: 320px) {

    :root {
        --invite-friend-max-width: 576px;
        --frameB-hight: 130px;
    }

    #invite-friend {
        padding-top: 18%;
    }

    #invite-friend-content {
        margin-top: 3%;
        flex-direction: column;
        height: auto;
    }

    /* invite-friend-invite */

    #invite-friend-invite {
        width: 100%;
        max-width: var(--invite-friend-max-width);

        flex-direction: column;
        order: 1;
        margin-top: 3%;
    }

    .invite-friend-reward-item {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: var(--invite-friend-max-width);
        height: var(--frameB-hight);
        padding: 0px;
        margin-top: -10px;
        margin-bottom: -10px;
    }

    .invite-friend-reward-background-warp {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
    }

    .invite-friend-reward-background-image {
        width: 100%;
        height: 100%;
    }

    .invite-friend-reward-item-content {
        position: relative;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        clip-path: inset(3vh 3vh 3vh 3vh);
    }

    .invite-friend-reward-left {
        position: relative;
        width: 40%;
        height: var(--frameB-hight);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 0px;
        margin-left: 30px;
        z-index: 5;
    }

    .invite-friend-reward-left img {
        width: 100%;
    }

    .invite-friend-reward-t1 {
        font-size: clamp(20px, 5vw, 25px);
        margin-bottom: -3%;
        color: #6c4b4b;
    }

    .invite-friend-reward-t2 {
        font-size: clamp(12px, 3.5vw, 15px);
        margin-top: -10px;
        color: #6e5d78;
    }

    .invite-friend-reward-right {
        position: relative;
        height: var(--frameB-hight);
        width: auto;
        aspect-ratio: 1 / 1;
        margin-right: 5%;
    }

    .invite-friend-sun {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;
        width: 300%;
        height: 300%;
    }

    .invite-friend-reward {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60%;
        height: 60%;
        object-fit: contain;
        z-index: 10;

    }

    #invite-friend-copy-code-btn {
        width: clamp(150px, 50%, 350px);
        height: 10vh;
    }


    /* invite-friend-accept-invite */

    #invite-friend-accept-invite {
        width: 100%;
        height: auto;
        max-width: var(--invite-friend-max-width);
    }

    .invite-friend-hero {
        display: none;
    }

    #invite-friend-paste-code-btn {
        width: clamp(150px, 50%, 350px);
        height: 10vh;
    }
}

@media (min-width: 576px) {

    #input-invite-code-dialog-close-btn {
        top: calc(50% - 320px);
        left: min(calc(50% + 34vw), calc(50% + 350px));
        width: 45px;
        height: 45px;
    }

    #input-invite-code-dialog-panel {
        max-width: 850px;
        max-height: 560px;
    }

    #input-invite-code-dialog-panel-title {
        margin-top: 30px;
    }

    #input-invite-code-dialog-input-row {
        margin-top: 110px;
    }

    #input-invite-code-dialog-input-root {
        height: 100%;
    }

    #input-invite-code-dialog-input {
        width: 100%;
        height: 100%;
    }

    #input-invite-code-dialog-confirm-btn {
        /* aspect-ratio: 470/160; */
        margin-top: 70px;
    }
}

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

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

@media (min-width: 1200px) {
    :root {
        --invite-friend-max-width: 700px;
        --frameB-hight: 180px;
    }

    #invite-friend {
        padding-top: 120px;
        display: flex;
        flex-direction: column;
        justify-content:center;
        align-items: center;
    }

    #invite-friend-content {
        margin-top: 3%;
        height: 100%;
        flex-direction: row;
        order: 1;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
    }

    #invite-friend-invite {
        margin-top: 0%;
         
    }

    #invite-friend-copy-code-btn {
        margin-top: 5px;
        width: 350px;
        height: 119.1px;
        z-index: 3;
    }

    #invite-friend-accept-invite {
        position: relative;
        width: 780px;
        order: 2;
    }

    .invite-friend-reward-item-content {
        clip-path: inset(calc(var(--frameB-hight) * 0.15));
    }

    .invite-friend-hero {
        position: absolute;
        left: 40%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
        display: block;
    }

    .invite-friend-hero img {
        position: absolute;
        left: 100%;
        top: 40%;
        transform: translate(-50%, -50%);
        max-width: 100%;
        max-height: 100%;
        display: block;
        object-fit: contain;
    }

    .invite-friend-reward-item {
        height: 180px;
        width: 100%;
    }

    #invite-friend-accept-invite .invite-friend-reward-item {
        height: 500px;
        width: 480px;
    }

    #invite-friend-accept-invite .invite-friend-reward-item-content {
        flex-direction: column;
        padding-top: 200px;
    }

    .invite-friend-reward-left {
        height: 200px;
        width: 250px;
        margin-left: 8%;
    }

    .invite-friend-reward-t1 {
        font-size: 35px;
        
        margin-bottom: -3%;
        color: #6c4b4b;
    }

    .invite-friend-reward-t2 {
        font-size: 22px;
        margin-top: -3%;
        color: #6e5d78;
    }

    #invite-friend-accept-invite .invite-friend-reward-left {
        position: absolute;
        left: 8%;
        Top: 30%;
        margin: 0px;
        height: 200px;
        width: 45%;
    }

    #invite-friend-accept-invite .invite-friend-reward-right {
        position: absolute;
        left: 8%;
        Top: 50%;
        height: auto;
        width: 45%;
    }

    #invite-friend-accept-invite .invite-friend-reward-right .invite-friend-sun {
        height: 200%;
        width: 200%;
    }

    #invite-friend-paste-code-btn {
        margin-top: 5px;
        width: 350px;
        height: 119.1px;
        z-index: 3;
    }


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

    #input-invite-code-dialog-panel {
        width: 850px;
        height: 560px;
    }

    #input-invite-code-dialog-panel-title {
        font-size: 40px;
        width: 630px;
        margin-top: 30px;
    }

    #input-invite-code-dialog-input-row {
        width: 560px;
        height: 60px;
        margin-top: 110px;
    }

    #input-invite-code-dialog-input-row span {
        font-size: 26px;
    }

    #input-invite-code-dialog-input-root {
        width: 400px;
        height: 100%;
    }

    #input-invite-code-dialog-input {
        width: 100%;
        height: 100%;
        padding-left: 20px;
        line-height: 100%;
        font-size: 26px;
    }

    #input-invite-code-dialog-confirm-btn {
        width: 300px;
        height: 102.1px;
        /* aspect-ratio: 470/160; */
        margin-top: 70px;
    }
}

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