@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: 0.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 0.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: 0.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,
.pop_launcher_notice 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: 0.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: 0.7rem;
  padding: 0.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: 0.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: 0.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: 0.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, .pop_launcher_notice section a{
  text-decoration: underline;
  color: var(--basic-gold);
  margin: 0 3px;
}

.world_transfer section a:hover, .pop_launcher_notice 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,
.pop_launcher_notice ul.notice_list li {
  display: flex;
  align-items: flex-start;
  /* 確保星星對齊第一行文字 */
  line-height: 1.4;
  margin: 0 0 0.3rem 0;
}

.submit_content ul li::before,
.pop_launcher_notice ul.notice_list li::before {
  --icon-url: url("../images/svg/star.svg");
  content: "";
  display: inline-block;
  width: 8px;
  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.2rem;
  margin-top: 0.48rem;
  flex-shrink: 0;
}
/*資料更新提醒*/
.pop_welcome main h1 {
  width: fit-content;
  text-align: left;
  margin: 0 auto;
}

/*購買主程式跳窗pop_launcher_notice*/
.pop_launcher_notice article section {
  text-align: left;
}
.pop_launcher_notice ul.notice_list li {
color: var(--red);
}
.pop_launcher_notice ul.notice_list li::before {
  background-color: var(--red);
}
.pop_launcher_notice ul.notice_list li:last-child{
    color: var(--basic-gray); 
}
.pop_launcher_notice ul.notice_list li:last-child:before{
    background-color: var(--basic-gray);
}
@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: 0.5rem;
    padding: 0.5rem 0 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: 0.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: 0.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: 0.6rem 0 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;
  }
}