@charset "utf-8";

.popup main .hide {
    display: none;
}

.popup main.show {
    display: block;
}

.popup main {
    padding: 0;
}

.popup article {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 2rem;
}

    .popup article header .title h4 {
        font-size: clamp(1.1rem, 1.6vw, 1.3rem);
        font-weight: 600;
        color: #ffffff;
        padding: .8rem;
        text-align: center;
        background: linear-gradient(to bottom, rgba(80, 80, 80, 1) 0%, rgba(112, 112, 112, 1) 100%);
    }

    .popup article section {
        width: 80%;
        margin: 0 auto;
        padding-top: 3%;
        text-align: center;
    }

        .popup article section h1 {
            font-size: clamp(1rem, 1.6vw, 1.5rem);
            color: #303030;
            font-weight: 400;
        }

        /*pop_bind_hint的提示文字*/
        .popup article section p {
            font-size: var(--normal-txt-size);
            text-align: justify;
            line-height: 1.6;
        }

            .popup article section span.notice,
            .popup article section p.notice {
                font-weight: 600;
                color: var(--red);
            }

.popup .label-title {
    text-align: left;
}

.popup .form-group .ps_group {
    align-items: flex-start;
    margin-top: 3%;
    text-align: left;
}

    .popup .form-group .ps_group p {
        font-size: calc(var(--normal-txt-size)*1);
        margin-bottom: 0.8rem;
    }

.popup article .button_group {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
}

    .popup article .button_group .button {
        margin: 0.5rem;
        max-width: 230px;
        padding: var(--block-margins-ss) 0;
    }

.popup.member_mail > article > div {
    margin: 0 auto;
    text-align: center;
}

.popup article .icon_svg {
    width: clamp(35px, 8%, 40px);
    height: auto;
    /* 動態寬度：最小 40px，最大 100px，理想值根據 8% 設定 */
    margin: 0 auto .5rem auto;
}

    .popup article .icon_svg svg {
        aspect-ratio: 1/1;
    }

.popup article svg,
.recommended_jobs .content svg {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    display: block;
    background-color: var(--basic-gray);
    mask-size: 100% 100%;
}


.popup article .article_content {
    width: 90%;
    margin: 0 auto;
    padding-top: 1rem;
    text-align: center;
}

    .popup article .article_content > p {
        padding: .5rem 0;
    }

    .popup article .article_content .member_email_address {
        word-break: break-all;
    }

/*forget_password*/
.forget_password .form-group {
    width: 80%;
}

/*bind_hint*/

.bind_hint article .article_content img {
    width: 100%;
    max-width: 500px;
    display: block;
    /* 使圖片變為區塊元素 */
    margin-left: auto;
    /* 自動設置左邊距 */
    margin-right: auto;
    /* 自動設置右邊距 */
}

.bind_results > article:not(.show) {
    display: none;
}


.bind_results article.already svg,
.bind_results article.fail svg,
.double_check article svg,
.pop_unsubscribe_fail article svg,
.bind_hint article svg,
.memory article svg,
.world_transfer article svg {
    mask-image: url(../images/svg/notice.svg);
}

.bind_results article.success svg,
.pop_reset_complete article svg,
.pop_welcome svg {
    mask-image: url(../images/svg/succuss.svg);
}

.forget_password article svg {
    mask-image: url(../images/svg/forget_password.svg);
}

.member_mail article svg {
    mask-image: url(../images/svg/mail.svg);
}

.serial_code_query svg {
    mask-image: url(../images/svg/Meteo.svg);
}

.pop_exchange svg,
.pop_new_player svg {
    mask-image: url(../images/svg/gift.svg);
}

.pop_exchange.step2 svg {
    mask-image: url(../images/svg/role_pick.svg);
}

/*無法退訂的跳窗*/
.pop_unsubscribe_fail article section {
    text-align: left;
    padding: var(--block-margins-s);
}

.btn_block {
    width: 100%;
    margin: var(--block-margins-s) auto;
    display: flex;
    justify-content: center;
}

.pop_unsubscribe_fail a {
    padding: var(--block-margins-ss);
}

/*兌換序號*/

.pop_exchange.step2 .select_block {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    align-items: center;
    gap: 0.5rem;
}

    .pop_exchange.step2 .select_block .select_box {
        width: 70%;
    }

        .pop_exchange.step2 .select_block .select_box select {
            width: 100%;
            margin-bottom: clamp(0.5rem, 1vw, 1rem);
        }

.btn.update.icon {
    width: 5%;
    min-width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.btn.update img {
    width: 100%;
}

.popup.pop_exchange.step2 .ps_group {
    width: 75%;
    margin: 0 auto;
    font-size: calc(var(--normal-txt-size)*0.9);
}

.popup .highlight {
    color: var(--dark-red);
}

.popup.pop_exchange.step2 .ps_group ul li {
    margin-bottom: calc(var(--block-margins-ss)*0.6);
}

.popup.pop_exchange.step2 .ps_group ul {
    padding-bottom: calc(var(--block-margins-ss)*0.6);
}

.popup.pop_exchange.step2 .ps_group li {
    display: flex;
    align-items: flex-start;
    /* 確保圖示對齊第一行文字 */
    gap: .25rem;
}

    .popup.pop_exchange.step2 .ps_group li::before {
        content: '';
        flex-shrink: 0;
        width: clamp(0.4rem, 1vw, 0.6rem);
        aspect-ratio: 1 / 1;
        margin-top: calc(((var(--normal-txt-size) * 0.9)*1.5 - clamp(0.4rem, 1vw, 0.6rem))/2);
        margin-right: 0;
        background-color: var(--dark-red);
        -webkit-mask-image: url('../images/svg/star.svg');
        mask-image: url('../images/svg/star.svg');
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        vertical-align: middle;
    }


/*收件人查詢，地址查詢*/
.pop_recipient article .article_content.info {
    width: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    padding-top: 1.5rem;
    flex-direction: column;
}

    .pop_recipient article .article_content.info ul {
        width: 100%;
        border: 1px solid var(--gray04);
        padding: 5%;
    }

        .pop_recipient article .article_content.info ul li {
            padding-bottom: var(--block-margins-ss);
        }

            .pop_recipient article .article_content.info ul li span.title {
                margin-right: 0.3rem;
            }

            .pop_recipient article .article_content.info ul li span:not(.title) {
                display: inline-block;
                flex-wrap: wrap;
            }

/*實體商品交易明細*/
.pop_physical_detail article .article_content {
    margin-bottom: var(--block-margins-s);
}

    .pop_physical_detail article .article_content h5 {
        font-weight: 600;
        margin-bottom: calc(var(--block-margins-s)*0.8);
        letter-spacing: 0.1rem;
    }

    .pop_physical_detail article .article_content .item_box {
        padding: 0;
    }

/*序號查詢跳窗*/
.serial_code_query article .article_content ul {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

    .serial_code_query article .article_content ul li {
        display: flex;
        word-break: break-all;
        font-size: 1.2rem;
        justify-content: left;
        flex-direction: column;
        position: relative;
        border: 1px solid #dfdfdf;
        width: 100%;
        margin: 3% auto 0;
        padding: 4%;
    }

.serial_code_query .title {
    width: 100%;
    max-width: 600px;
}

.serial_code_query article .article_content ul li .copy {
    max-width: 5rem;
    font-size: 1rem;
    padding: 0.2rem 0.4rem;
    margin-top: 0.5rem;
}

.serial_code_query article .article_content ul li.bond::before {
    content: "已綁定";
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.5rem;
    height: auto;
    border-width: 1px;
    border-style: solid;
    border-image: initial;
    border-color: var(--basic-darkgray);
    background-color: transparent;
    color: var(---basic-darkgray);
    font-size: 1rem;
    padding: 0.2rem 0.4rem;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
}

.serial_code_query article .article_content ul li .button {
    margin-left: auto;
}

.serial_code_query article .article_content ul li .serial_code {
    text-align: left;
    padding: 0.3rem 0 0;
    font-size: 1rem;
}

.serial_code_query article .article_content ul li .name {
    text-align: left;
    font-weight: 500;
    font-size: 1.1rem;
}

.pop_invoice article .article_content ul li .serial_code {
    text-align: center;
}


/*商品詳情跳窗pop_purchase_detail*/
.pop_purchase_detail .hide {
    display: none;
}

.pop_purchase_detail .show {
    display: block;
}

.pop_purchase_detail article {
    max-width: 600px;
}

.pop_purchase_detail header {
    max-width: 600px;
}

.pop_purchase_detail .article_content {
    width: 90% !important;
}

.pop_purchase_detail .item_box {
    width: 100%;
    margin: 0 auto calc(var(--block-margins-ss)*1.5);
    padding: 0;
    border: 1px solid var(--gray04);
}

    .pop_purchase_detail .item_box > .item {
        width: 100%;
        display: flex;
        justify-content: space-around;
        padding: 0.7rem 0 0.85rem;
        text-align: center;
    }

    .pop_purchase_detail .item_box .item:last-child {
        border-bottom: 0 !important;
    }

    .pop_purchase_detail .item_box > .item:not(.title) {
        border-bottom: 1px solid #e5e5e5;
    }

    .pop_purchase_detail .item_box .item.title {
        background-color: #f3f3f3;
        text-align: center;
        padding: 0.6rem 0 0.6rem;
    }

    .pop_purchase_detail .item_box .item .order {
        width: 12%;
    }

    .pop_purchase_detail .item_box .item .name {
        width: 57%;
        text-align: left;
    }

    .pop_purchase_detail .item_box .item:not(.title) .name {
        text-align: left;
    }

    .pop_purchase_detail .item_box .item .price {
        width: 15%;
    }

    .pop_purchase_detail .item_box .item .quantity {
        width: 12%;
    }



/*pop_purchase_detail world_box伺服器條列*/

.pop_purchase_detail .world_box .list_content {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: .5rem 0 0;
}

.world_box .item_title {
    background-color: #f3f3f3;
    text-align: center;
    padding: clamp(0.4rem, 1.2vw, 0.7rem) 0;
}

.world_box .list_content .item {
    display: flex;
    gap: .3rem;
    justify-content: flex-start;
    flex-wrap: wrap;
}

    .world_box .list_content .item .item_name::before {
        content: '';
        display: inline-block;
        width: 0.6rem;
        aspect-ratio: 1 / 1;
        margin-right: clamp(0.2rem, 1vw, 0.3rem);
        background-color: var(--gray02);
        -webkit-mask-image: url('../images/svg/star.svg');
        mask-image: url('../images/svg/star.svg');
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        margin-top: 0.2rem;
    }

    .world_box .list_content .item .item_name {
        font-weight: 500;
        min-width: 105px;
        text-align: left;
        margin-right: .5rem;
        display: flex;
        align-items: center;
    }

    .world_box .list_content .item:last-child {
        border-bottom: 0;
    }

.world_box .item .destination .worlds {
    display: flex;
    flex-wrap: wrap;
    min-width: 50%;
}

    .world_box .item .destination .worlds span {
        display: inline-block;
        border: 1px solid var(--gray03);
        line-height: 1.6;
        padding: 0 0.4rem;
        min-width: 5.2em;
        text-align: center;
    }

        .world_box .item .destination .worlds span.icon {
            border: none;
            width: 30%;
            max-width: 26px;
            min-width: 26px;
            text-align: center;
            height: -webkit-fill-available;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .world_box .item .destination .worlds span.icon svg {
                width: 100%;
                height: auto;
                aspect-ratio: 1/1;
                background-color: var(--gray02);
                mask-image: url(../images/svg/arrow.svg) !important;
                mask-size: 100% 120%;
                mask-position: center center;
                mask-repeat: no-repeat;
                transition: all 0.2s ease-in-out;
            }


.pop_purchase_detail .world_box ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.6rem, 1.3vw, 1.3rem);
    justify-content: space-around;
    line-height: 1.8;
    align-items: center;
    margin: 0 auto;
    padding: .3rem 1rem;
    border-bottom: 1px solid #e5e5e5;
}

/*pop_purchase_detail 訂單總額與折扣金額*/
.pop_purchase_detail .summary_box {
    width: 100%;
}

.pop_purchase_detail .price_summary {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.6rem, 1.3vw, 1.3rem);
    justify-content: space-between;
    padding: clamp(1rem, 1.3vw, 1.3rem);
    align-items: flex-end;
    margin: 0 auto;
    background-color: #f3f3f3;
}

    .pop_purchase_detail .price_summary li {
        width: fit-content;
        display: flex;
        justify-content: flex-end;
    }

        .pop_purchase_detail .price_summary li.discount {
            display: none;
        }

        .pop_purchase_detail .price_summary li span.num {
            flex: 1;
            text-align: right;
            color: #222;
            font-weight: 500;
        }

.pop_purchase_detail .cha_info {
    width: 100%;
    margin: calc(var(--block-margins-ss)*0.8) auto;
    text-align: left;
}

    .pop_purchase_detail .cha_info .name {
        font-weight: 500;
        color: #222;
    }

    .pop_purchase_detail .cha_info ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
    }




/*頭像選擇跳窗*/
.pop_avatar .content .form-group .avatar_block {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

    .pop_avatar .content .form-group .avatar_block .pic_option {
        width: 45%;
        max-width: 200px;
        min-width: 50px;
        aspect-ratio: 1/1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
        background-size: cover;
        margin: 1.5%;
        transition: filter 0.3s ease-in-out;
        /* 亮度变化平滑 */
    }

        /* 默认状态：白色边框 + 灰色阴影 */
        .pop_avatar .content .form-group .avatar_block .pic_option::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            border: 0.35rem solid white;
            /* 默认白色边框 */
            border-radius: 50%;
            box-sizing: border-box;
            transform: translate(-50%, -50%);
            pointer-events: none;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            /* 默认淡淡的灰色阴影 */
            transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }

        /* 当鼠标悬停或选中时，边框变为金褐色，阴影消失 */
        .pop_avatar .content .form-group .avatar_block .pic_option:hover::before,
        .pop_avatar .content .form-group .avatar_block .pic_option.on::before {
            border-color: #ddc183d7;
            /* 变成金褐色 */
            box-shadow: none;
            /* 移除阴影 */
        }

/*pop_double_check*客服頁列表刪除再確認*/
.double_check .btn-group {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: var(--block-margins-s);
}

    .double_check .btn-group .button {
        width: 40%;
        padding: 0.4rem;
    }

.double_check h3 {
    font-size: calc(var(--normal-txt-size)*1.2);
    margin-bottom: var(--block-margins-m);
}

.pop_rename .error {
    text-align: left;
}

/*world_transfer*/
.world_transfer section a {
    text-decoration: underline;
    color: var(--basic-gold);
    margin: 0 5px;
}

    .world_transfer section a:hover {
        text-decoration: none;
    }

/*↓↓↓↓↓↓memory member_mail 冒險者留影簿投稿跳窗↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
.memory .form-group a {
    color: var(--basic-gold);
    text-decoration: underline;
}

    .memory .form-group a:hover {
        text-decoration: none;
    }

.memory .form-group {
    margin-top: calc(var(--block-margins-s) *0.6) !important;
}

    .memory .form-group .notice {
        margin-top: calc(var(--block-margins-ss) *0.6);
        color: var(--dark-red);
        margin-bottom: 0.5rem;
    }

        .memory .form-group .notice p {
            font-size: calc(var(--normal-txt-size)*0.9);
            margin-bottom: 1rem !important;
        }

.memory .submit_content {
    padding: 0 var(--block-margins-s);
    border: 1px solid var(--gray04);
    position: relative;
}

.memory .form-group .ps_group p {
    margin-bottom: 0.5rem;
}

.member_mail.memory .copy.gray01 {
    width: fit-content;
    background: none;
    border: none;
}

    .member_mail.memory .copy.gray01 button {
        position: absolute;
        right: 0.6rem;
        top: 0.6rem;
        font-size: var(--normal-txt-size);
        color: var(--basic-gray);
        font-weight: 400;
        background: linear-gradient(to bottom, #f1f1f1 1%, #d7d7d7 100%);
        white-space: nowrap;
        /* 強制文字不換行 */
        max-width: none;
        /* 移除最大寬度限制，避免字數多時被切掉 */
        width: max-content;
        /* 寬度隨文字長度自動撐開 */

        padding: 0.2rem 0.6rem;
        cursor: pointer;
    }

.submit_content ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    flex: 1;
    /* 讓列表佔據剩餘空間，防止按鈕被過度擠壓 */
}

    .submit_content ul:nth-of-type(2) {
        margin: 0 0 0.5rem 0;
    }

    .submit_content ul li {
        display: flex;
        align-items: flex-start;
        /* 確保星星對齊第一行文字 */
        line-height: 1.4;
        margin: 0 0 0.3rem 0;
    }

        .submit_content ul li::before {
            --icon-url: url('../images/svg/star.svg');
            content: '';
            display: inline-block;
            width: 0.55em;
            aspect-ratio: 1;
            background-color: var(--gray02, #888);
            -webkit-mask: var(--icon-url) no-repeat center / contain;
            mask: var(--icon-url) no-repeat center / contain;
            margin-right: 0.2em;
            margin-top: 0.4em;
            flex-shrink: 0;
        }


@media (max-width: 1050px) {
    .pop_avatar .content .form-group .avatar_block .pic_option {
        width: 30%;
    }
}

@media (max-width: 500px) {

    .serial_code_query article .article_content ul li .name {
        font-size: clamp(0.95rem, 2vw, 1.1rem);
    }

    .serial_code_query article .article_content ul li .serial_code {
        font-size: clamp(0.9rem, 2vw, 1rem);
    }

    .pop_purchase_detail .world_box .list_content {
        border-bottom: 1px solid #e5e5e5;
        gap: .5rem;
        padding: .5rem 0 .2rem;
    }

    .pop_purchase_detail .item_box.for_world .item.title {
        display: none;
    }

    .pop_purchase_detail .item_box.for_world > .item {
        flex-wrap: wrap;
        padding: clamp(0.8rem, 1.2vw, 1.2rem) 0;
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }

    .pop_purchase_detail .world_box .list_content .item {
        padding-bottom: calc(var(--block-margins-s)*0.5);
        gap: calc(var(--block-margins-ss)*1);
    }

    .pop_purchase_detail .item_box.for_world .item .order {
        width: fit-content;
        text-align: left;
        margin-left: -0.3rem;
    }

        .pop_purchase_detail .item_box.for_world .item .order::after {
            content: ".";
            display: inline;
        }

    .pop_purchase_detail .item_box.for_world .item .name {
        width: 92%;
        margin-bottom: clamp(0.5rem, 1vw, 1rem);
    }

    .pop_purchase_detail .item_box.for_world .item .price {
        width: fit-content;
        text-align: left;
        margin-left: 5.8vw;
    }

        .pop_purchase_detail .item_box.for_world .item .price::before {
            content: "價格:";
            display: inline;
            padding-left: 0;
            padding-right: 0.2rem;
        }

        .pop_purchase_detail .item_box.for_world .item .price::after,
        .pop_purchase_detail .price_summary li span.num::after {
            content: "水晶";
            display: inline;
            padding-left: 0.3rem;
        }

    .pop_purchase_detail .item_box.for_world .item .quantity {
        width: fit-content;
        flex: 1;
        text-align: right;
    }

        .pop_purchase_detail .item_box.for_world .item .quantity::before {
            content: "X";
            display: inline;
            padding-right: 0.2rem;
        }

    /*商品詳情訂單總額*/
    .pop_purchase_detail .price_summary {
        flex-direction: column;
    }

        .pop_purchase_detail .price_summary li {
            gap: clamp(0.2rem, 1vw, 0.8rem);
        }
}

@media (max-width: 450px) {
    .pop_purchase_detail .item_box > .item {
        flex-wrap: wrap;
        padding: clamp(0.8rem, 1.2vw, 1.2rem) 0;
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }

    .pop_purchase_detail .item_box {
        padding: 0;
    }

        .pop_purchase_detail .item_box .item.title {
            display: none;
        }

        .pop_purchase_detail .item_box .item .order {
            width: fit-content;
            text-align: left;
            margin-left: -0.3rem;
        }

        .pop_purchase_detail .item_box.for_world .item .order {
            margin-left: 0
        }

        .pop_purchase_detail .item_box .item .order::after {
            content: ".";
            display: inline;
        }

        .pop_purchase_detail .item_box .item .name {
            width: 92%;
            margin-bottom: clamp(0.5rem, 1vw, 1rem);
        }

        .pop_purchase_detail .item_box .item .price {
            width: fit-content;
            text-align: left;
            margin-left: 5.8vw;
        }

            .pop_purchase_detail .item_box .item .price::before {
                content: "價格:";
                display: inline;
                padding-left: 0;
                padding-right: 0.2rem;
            }

            .pop_purchase_detail .item_box .item .price::after,
            .pop_purchase_detail .price_summary li span.num::after {
                content: "水晶";
                display: inline;
                padding-left: 0.3rem;
            }

        .pop_purchase_detail .item_box .item .quantity {
            width: fit-content;
            flex: 1;
            text-align: right;
        }

            .pop_purchase_detail .item_box .item .quantity::before {
                content: "X";
                display: inline;
                padding-right: 0.2rem;
            }

    .pop_purchase_detail .cha_info {
        padding-bottom: 0.5rem;
    }

        .pop_purchase_detail .cha_info ul li + li {
            margin-top: .35rem;
        }

        .pop_purchase_detail .cha_info ul {
            flex-direction: column;
            gap: 0;
        }


    /*商品詳情訂單總額*/
    .pop_purchase_detail .price_summary {
        flex-direction: column;
    }

        .pop_purchase_detail .price_summary li {
            gap: clamp(0.2rem, 1vw, 0.8rem);
        }


    /*實體商品交易明細*/

    .pop_physical_detail article .article_content .item_box {
        border-top: 1px solid #e5e5e5;
    }

    .pop_physical_detail .item_box .item .price::after,
    .pop_physical_detail .price_summary li span.num::after {
        content: "";
    }

    .pop_physical_detail .item_box .item .price::before,
    .pop_physical_detail .price_summary li span.num::before {
        content: "NT$";
        display: inline;
        padding-left: 0;
        padding-right: 0.2rem;
    }
}

@media (max-width: 420px) {
    .pop_purchase_detail .world_box .list_content .item {
        flex-direction: column;
    }

    /*↓↓↓↓↓↓memory member_mail 冒險者留影簿投稿跳窗↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/

    .member_mail.memory .copy.gray01 button {
        position: relative;
        right: unset;
        top: unset;
        margin-bottom: 0.4rem;
    }
}

@media (min-width: 291px) and (max-width: 450px) {
    .pop_purchase_detail .cha_info {
        padding: .6rem;
    }
}

@media (max-width: 290px) {
    .pop_purchase_detail .item_box {
        border: 0;
    }

        .pop_purchase_detail .item_box > .item:last-child {
            border-bottom: 1px solid #e5e5e5 !important;
        }

        .pop_purchase_detail .item_box > .item {
            border: 1px solid #e5e5e5;
            margin-bottom: clamp(0.6rem, 1vw, 0.9rem);
        }

        .pop_purchase_detail .item_box:not(.for_world) .item {
            padding-left: 0;
            padding-right: 0;
            padding-top: 0;
        }

            .pop_purchase_detail .item_box:not(.for_world) .item .price {
                margin-left: 0;
            }

            .pop_purchase_detail .item_box:not(.for_world) .item .order {
                width: 100% !important;
                background-color: #dfdfdf;
                text-align: center;
                padding-top: 0.3rem;
                padding-bottom: 0.3rem;
                margin-left: 0;
            }

                .pop_purchase_detail .item_box:not(.for_world) .item .order::after {
                    content: "";
                }

            .pop_purchase_detail .item_box:not(.for_world) .item .name {
                margin-top: 0.8rem;
                width: 100%;
            }

            .pop_purchase_detail .item_box:not(.for_world) .item > div:not(.order) {
                padding-left: 1rem;
                padding-right: 1rem;
            }

    .pop_exchange.step2 .select_block .select_box,
    .popup.pop_exchange.step2 .ps_group {
        width: 100%;
    }

    .pop_purchase_detail .price_summary {
        align-items: flex-start;
    }

        .pop_purchase_detail .price_summary li {
            justify-content: flex-start;
            flex-wrap: wrap;
        }

            .pop_purchase_detail .price_summary li span.num {
                text-align: right;
                flex: initial;
                display: flex;
            }
}

@media (max-width: 260px) {
    /*world區塊的最小版樣式*/

    .pop_purchase_detail .item_box.for_world .item {
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }

        .pop_purchase_detail .item_box.for_world .item .price {
            margin-left: 0;
        }

        .pop_purchase_detail .item_box.for_world .item .order {
            width: 100% !important;
            background-color: #dfdfdf;
            text-align: center;
            padding-top: 0.3rem;
            padding-bottom: 0.3rem;
            margin-left: 0;
        }

    .pop_purchase_detail .world_box .list_content {
        padding: .6rem 0 .5rem;
    }

    .pop_purchase_detail .item_box.for_world .item .order::after {
        content: "";
    }

    .pop_purchase_detail .item_box.for_world .item .name {
        margin-top: 0.8rem;
        width: 100%;
    }

    .world_box .item .destination .worlds span {
        min-width: 100%;
    }

    .pop_purchase_detail .world_box .list_content .item {
        gap: calc(var(--block-margins-ss)*0.7);
    }

    .pop_purchase_detail .item_box.for_world > .item > :not(.order) {
        padding: 0 8%;
    }

    .world_box .list_content .item .destination .worlds {
        flex-direction: column;
        align-items: center;
    }

    .world_box .item .destination .worlds span.icon svg {
        transform: rotate(90deg);
    }

    .world_box .list_content .item .item_name {
        text-align: center;
        margin-right: 0;
    }
}

@media (max-width: 200px) {

    .pop_purchase_detail .item_box.for_world .item {
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }

        .pop_purchase_detail .item_box.for_world .item .price {
            margin-left: 0;
        }

        .pop_purchase_detail .item_box.for_world .item .order {
            width: 100% !important;
            background-color: #dfdfdf;
            text-align: center;
            padding-top: 0.3rem;
            padding-bottom: 0.3rem;
        }

            .pop_purchase_detail .item_box.for_world .item .order::after {
                content: "";
            }

    .pop_purchase_detail .item_box > .item {
        text-align: center;
    }

    .pop_purchase_detail .item_box .item > div {
        width: 100% !important;
    }
}