@charset "utf-8";

body:not(.popup) {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    min-height: 100vh;
}

body:not(.popup) main {
    flex: 1 1 auto;
}

:root {
    --step-bg: linear-gradient(to bottom, #d6d6d6 50%, #ececec 100%);
    --form-bg: linear-gradient(to bottom, #fbfbfb 50%, #f3f3f3 100%);
    --gold-gradient: linear-gradient(to bottom, #cea32d, #946d1b);
    --gray-gradient: linear-gradient(to bottom, #979797, #6b6b6b);
    --nag-btn-gradient: linear-gradient(to bottom, #f2f1f1 0%, #bfbfbf 100%);

    --gray01: rgb(59, 59, 59);
    /*文字基本顏色*/
    --gray02: rgb(89, 89, 89);
    /*淡一階的文字顏色*/
    --gray03: rgb(175, 175, 175);
    /*細細的襯線用色*/
    --gray04: rgb(219, 219, 219);
    --gray05: rgb(246, 246, 246);
    --gray06: #878787;

    --blue: rgb(7, 106, 203);
    --red: rgb(215, 24, 24);
    --dark-red: #840000;
    --basic-gold: rgb(168, 123, 0);


    --block-margins-member: calc(var(--block-margins-s) * 0.35);

    --normal-txt-size: clamp(1rem, 1.15vw, 1.15rem);
    --block-margins-m: clamp(2rem, 3vw, 3rem);
    --block-margins-s: clamp(1rem, 2vw, 2rem);
    --block-margins-ss: clamp(0.4rem, 1vw, 0.7rem);
    --border-radius-button: 7px;
    --border-bright-gray: 1px solid #d7d7d7;
    --box-shadow-light: 0px 0px 3px rgba(0, 0, 0, 0.22);
    --box-shadow-pop: 0px 1px 5px rgba(0, 0, 0, 0.3);
    --border-radius-ss: 3px;
    --border-radius-s: 5px;

    --border-wt-style: clamp(0.2rem, 1.2vw, 0.4rem) solid #fff;
    /*白色相片邊框*/
    --border-wt-style-s: clamp(0.1rem, 0.25vw, 0.25rem) solid #fff;
    /*白色相片邊框*/

}

/*fancybox*/
.fancybox__slide {
    /* max-width: 800px !important; */
    margin: 0 auto !important;
}

.fancybox__container {
    --fancybox-bg: rgba(24, 24, 27, 0.8);
}

.fancybox__content {
    background: none !important;
    /* 修正fancybox內容高度沒超過視窗，但會出現捲軸bug修正*/
    /* box-sizing不得為border-box */
    /* 修正後會出現下方多了一塊原本--fancy-content padding的高度，所以要用變數來控制讓iframe的高度減掉padding高度 */
    /* box-sizing:initial !important;     */
    --fancy-content-padding: 36px;
    padding: var(--fancy-content-padding);
    /* ↓修正會出現scroll bar */
    flex: 0.01 1 auto !important;
}

.has-image .fancybox__content,
.fancybox__carousel .fancybox__slide.has-map .fancybox__content,
.fancybox__carousel .fancybox__slide.has-pdf .fancybox__content,
.fancybox__carousel .fancybox__slide.has-video .fancybox__content,
.fancybox__carousel .fancybox__slide.has-html5video .fancybox__content {
    --fancy-content-padding: 0;
}

/*
.fancybox__content iframe{
    高度剛好的話，仍會出現捲軸，所以要比內容多加1px才會不顯示捲軸
   height: calc(100% - var(--fancy-content-padding)* .5 + 1px); 
}
*/

.fancybox__content>.carousel__button.is-close {
    top: 5px !important;
    right: 30px !important;
}

/*麵包屑未開放的頁面先不能連*/
/* .gmnote .bread_crumbs li:nth-of-type(2) a, .gmnote_content .bread_crumbs li:nth-of-type(2) a{
    pointer-events: none; 
    cursor: default; } */

/*coming_soon敬請期待*/
main .coming_soon {
    position: relative;
}

main .coming_soon::after {
    content: "敬請期待";
    color: #fff;
    position: absolute;
    z-index: 10;
    font-weight: 500;
    letter-spacing: 0.2rem;
    width: 100%;
    height: 100%;
    background: #868686bd;
    top: 0;
    left: 0;
    text-shadow:
        0px 0px 3px rgba(60, 60, 60, 0.8),
        /* 第一層：較小、較淺 */
        0px 0px 15px rgb(66, 66, 66);
    /* 第二層：較大、較深 */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in;
    opacity: 0;
    font-size: clamp(1.1rem, 1.3vw, 1.3rem);
}

@media(hover) {

    /* .coming_soon a:hover{
    cursor:none;
    } */
    main .coming_soon:hover::after {
        opacity: 1;
    }

    main .coming_soon:hover {
        opacity: .7;
    }
}

@media (max-width:768px) {
    main .coming_soon::after {
        opacity: 1;
    }
}

@media (hover: none) {
    main .coming_soon::after {
        opacity: 1;
    }
}

/*---------------------------登入/註冊區/綁定驗證碼----------------------/
/*logoin*/
.basic_gold {
    color: var(--basic-gold);
}

.login .all {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* .content{width: 100%;} */
.login main {
    padding-top: 4vw;
    padding-bottom: 4vw;
}

.verification_code_info main,
.verification_code_step main {
    padding-top: 120px;
}

.verification_code_info main .login-info {
    padding-bottom: var(--block-margins-s);
}

.login>.content {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.login .content>.logo {
    width: 50%;
    padding-bottom: 2%;
    max-width: 300px;
    min-width: 100px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 1rem;
}

.login .content>.logo a {
    width: 100%;
    display: block;
}

.login .content>.logo svg {
    width: 100%;
    height: auto;
    aspect-ratio: 300/76;
    mask-image: url(../images/svg/header/logo_ff14.svg);
    mask-size: 100% 100%;
    background-color: #000;
}

.login-info label {
    text-align: left;
}

.login-info .title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #ffffff;
    padding: .7rem;
    text-align: center;
    background: linear-gradient(to bottom, rgba(80, 80, 80, 1) 0%, rgba(112, 112, 112, 1) 100%);
}

.login .frame {
    width: 100%;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
}

.login img {
    width: 100%;
}

.login-info {
    padding-bottom: clamp(10px, 5vw, 20px);
}

.login form {
    margin: 0 5%;
    padding-bottom: 3%
        /* padding-top: 2%; */
}

.login label {
    display: block;
    margin: 0.5rem 0 .5rem 0;
}

.login .label-title {
    font-size: 1.2rem;
    font-weight: 500;
}

.login input,
.login select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: left;
    color:var(--gray06);
    font-size: 1.1rem;
}

.login input.visually-hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    padding: 0 !important;
    border: none !important;
    font-size: 0 !important;
    color: transparent !important;
}

.login select {
    width: 100%;
    /* 下拉选单宽度占满父容器 */
    border: 1px solid #dcdcdc;
    /* 设置边框 */
    padding: 0.5rem 2.5rem 0.5rem 0.5rem;
    /* 内边距：右侧留出空间给下拉按钮 */
    background-color: #fff;
    /* 背景为白色 */
    appearance: none;
    /* 移除浏览器默认样式 */
    -webkit-appearance: none;
    /* 针对 Safari 移除默认样式 */
    -moz-appearance: none;
    /* 针对 Firefox 移除默认样式 */
    position: relative;
    /* 相对定位以便按钮居中 */
    background-image: url('../images/svg/v.svg');
    /* 设置背景图片 */
    background-repeat: no-repeat;
    /* 禁止重复 */
    background-position: right 0.5rem center;
    /* 图片位于右侧居中，距离右边框1rem */
    background-size: 1rem;
    /* 按钮图片大小 */
    cursor: pointer;
}

.login form .hint {
    text-align: right;
}

.login.register_step2 .form-group .hint_group .error,
.login.forget_password .form-group .hint_group .error {
    width: 100%;
}

.register_step2 .hint {
    text-align: left !important;
}
/*登入和註冊的眼睛區塊*/

.login main .password_box{
    width: 100%; position: relative;
}
.login main .password_box input {
    padding: 0.5rem 2.3rem 0.5rem 0.5rem;
}
.login main .eye {
  position: absolute;
  top: 0;
  right:0.5rem;
  transform: translateY(40%);
  cursor: pointer;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

main .eye-icon {
  width: 100%;
  height: 100%;
  fill: #888;
  display: none;
}

main .eye-icon.eye-show {
  display: block;
}
main .eye-icon svg{
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
}
main svg.eye-icon.eye-show{
    mask-image: url(../images/svg/viewer_off.svg);
    mask-size: 100% 100%;
    background-color:var(--gray06);
}
main svg.eye-icon.eye-hide{
    mask-image: url(../images/svg/viewer.svg);
    mask-size: 100% 100%;
            background-color:var(--gray06);
}

/* token失效錯誤頁面 */
body.login:not(.popup) {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

body.login:not(.popup) main {
    flex: 1 1 auto;
}

.token_error.login form {
    padding: 0;
}

.token_error.login form .form-group {
    padding: 2rem 0;
}


/* .register_step2 .hint.error{display: none;} */

.register_step2 .form-group.birthday .select_group {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

/* .login.register_step1 .block {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
} */

.login form a,
.login form a span,
.verification_code_step main .hint a{
    color: var(--basic-gold);
    text-decoration: underline;
    display: inline;
}
.login main button, main button{
 padding: calc(var(--block-margins-ss) * 1) calc(var(--block-margins-ss) *0.5); 
}
button{ cursor: pointer;}
.login main button, main button,
.login main .button,
main .button,
.popup .button,
.account main .button{
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    background: linear-gradient(to bottom, rgba(189, 160, 81, 1) 0%, rgba(145, 118, 60, 1) 100%);
    color: white;
    font-size: clamp(1.2rem, 1.5vw, 1.4rem);
    text-align: center;
    font-weight: 500;
    max-width: 250px;
    transition: all 0.1s ease;
}

.button.gray01 {
    color: var(--basic-gray);
    background: linear-gradient(to bottom, #f1f1f1 1%, #d7d7d7 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.login button {
    transition: transform 0.1s ease, filter 0.1s ease;
}

.login button:hover {
    filter: brightness(1.08);
}

.form-group {
    margin: 0 auto;
}


.login .form-group {
    text-align: center;
    margin-top: 1rem;
    width: 80%;
}

.login .form-group:has(.avatar_block) {
    width: 100%;
}

.login .form-group .hint_group {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    margin-top: 1.5%;
}

.login .form-group .hint_group.error {
    display: flex;
    justify-content: left;
    align-items: baseline;
    flex-direction: column;
}

.error {
    color: #b52626;
}
.login .form-group .hint{
font-size:var(--normal-txt-size);
margin-left: auto;
}
.login .form-group .hint_group .error,
.login .form-group span.hint {
    width: 100%;
    text-align: left;
    font-size: 0.88rem;
}

.login .form-group span.hint {
    margin-top: 1.5%;
}

.login .form-group .hint_group .hint {
    /* width: 50%; */
     width: fit-content;
    display: block;
}

.login .form-group .hint_group .error {
    /* width: 50%; */
    width: fit-content;
}
.login.verification_code_step .form-group .hint_group .error {
    width: 100%;
}
.login .form-group .hint_group .error span {
     display: none;  
}

.login .form-group .hint_group>span {
    display: inline-block;
}

.form-group span {
    display: inline-block;
}

.form-group.margin_top {
    margin-top: 1rem;
}

.login .dispersion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.1rem;
}

.login .block {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 40%;
}

.login .block .check {
    display: inline;
    margin-left: 2%;
}

.login .checkbox {
    width: 18px;
    cursor: pointer;
    height: 18px;
      flex-shrink: 0; /* ✅ 防止被壓縮 */
}

.form-group .qrcode {
    width: clamp(100px, 100%, 300px);
    aspect-ratio: 1/1;
    margin: 0 auto;
    max-width: 200px;
}
/*核取方塊*/
.login .block {
    width: 100%;
    margin-bottom: var(--block-margins-ss);
    display: flex;
    align-items: start;
    margin-top: var(--block-margins-ss);
}

.login .block .check{
margin-top: 0;
}

.login .block .checkbox{
    margin-top: 3px;
}

.login .block .check span{
    line-height: 1.6; text-align: justify;
}
/*啟用一次性驗證碼*/
.verification_code_step main .key {
    text-align: left;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.verification_code_step main .key p {
    word-break: break-all;
    padding: 0.6rem 0.4rem;
}

/*兌換序號*/

/* .login form .form-group:last-of-type{
    margin-bottom: 5%; 
} */
/*一次性驗證碼相關頁面verification_code, verification_code_info*/

.verification_code_info .all {
    max-width: 850px;
}
.verification_code_info main a{
   width: fit-content;
  height: auto;
  display: inline-block; /* 關鍵：讓 <a> 能收斂成包圖片大小 */
  line-height: 0;         /* 防止文字行高影響外觀 */
  vertical-align: middle; /* 跟圖片一起垂直對齊 */
}
/* .verification_code_info main h3::before{
    content: '';
    position: absolute;
    width: clamp(20px,2vw,25px);
    height: 100%;
    left: -1.8rem;
    aspect-ratio: 1/1;
    background: var(--gold-gradient);
    mask-image: url("../images/svg/star.svg");
    -webkit-mask-image: url("../images/svg/star.svg");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;
    z-index: -1;
    pointer-events: none;
} */
.verification_code_info main h3 {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--basic-gold);
    font-size: calc(var(--normal-txt-size) * 1.35);
    font-weight: 500;
    margin-bottom: var(--block-margins-ss);
    line-height: 1.5;
    word-break: break-word;
    /* flex-wrap: wrap; */
    align-items: baseline;
}
 .verification_code_info main h3::before {
    content: "";
    display: inline-block;
   width: clamp(20px, 2vw, 25px);
  aspect-ratio: 1/1;
  background: var(--gold-gradient);
  mask-image: url("../images/svg/star.svg");
  -webkit-mask-image: url("../images/svg/star.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
  flex-shrink: 0;
  transform: translateY(0.25rem);
}

.verification_code_info main ol {
    width: 100%;
    list-style-type: decimal;
    margin: calc( var(--block-margins-s) * 0.5) auto;
}
.verification_code_info main .step_block h3{
    margin-top: var(--block-margins-s);
}
.verification_code_info main .step_block li:last-of-type span{
display: inline;
}


/*一次性驗證碼步驟說明*/

  .verification_code_info main article{ 
    width: 86%; margin: 0 auto;}

.verification_code_info main .txt_box{ 
    margin: 0 auto;
    padding:calc( var(--block-margins-s) * 1.5) 0 calc( var(--block-margins-s) * 0.5);  
    line-height: 1.8;
    border-bottom: 1px solid var(--gray04);

}
.verification_code_info main .txt_box p{
     text-align: justify;
}

.verification_code_info main span.notice{
     font-weight: 600; color: var(--red);
}
.verification_code_info main a{
      color: var(--basic-gold);
     text-decoration: underline;
}
.verification_code_info main .txt_box p>span{display: inline-block; 
     margin: calc(var(--block-margins-ss)*0.8) 0;
}

.verification_code_info main ol li, .verification_code_info main .txt_box{
    font-size: calc(var(--normal-txt-size)*1.07) ;
}
.verification_code_info main li{
    display: inline-flex; flex-wrap: nowrap;
}
.verification_code_info main ol li {
    list-style: none;
    line-height: 1.8;
    margin: calc(var(--block-margins-s)*0.6) auto;
    display: flex;
    justify-content: left;
    align-items: baseline;
}

.verification_code_info main ol li .step_nun {
    width: clamp(25px, 3vw, 30px);
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    background-color: var(--gray02);
    display: inline-flex;
    justify-content: center;
    padding-bottom: 2px;
    align-items: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 400;
    line-height: 1;
    font-size: calc(var(--normal-txt-size) *1);
    margin-right:calc( var(--block-margins-ss) *0.8);
}
.verification_code_info ol li span {
    display:inline-flex;
    align-items: center;
    flex-wrap: wrap;
}
.verification_code_info ol li span.one_block{
    justify-content: flex-start; align-items: flex-start;
    display: flex; flex-direction: column;
}
.verification_code_info ol li span.one_block>span:nth-of-type(2){
     justify-content: flex-start;
    display: flex; flex-direction: column;
}
.verification_code_info .gift_button{
    width: fit-content; margin: 0 auto;
}
.verification_code_info .gift_button a {
    display: block;
    line-height: 0;
}

.verification_code_info .gift_button a img {
    display: block; padding: var(--block-margins-ss);
    max-width: 100%;
    height: auto;
}


.double_row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.verification_code_info .keycode {
    width: 60%;
    background-color: var(--basic-brightgray);
    padding: 0.5rem 1rem;
    font-size: 1.4rem;
    margin-top: 0.5rem;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


.verification_code_info main li img {
    padding: 0.5rem;
}

.google_authenticator_logo {
    max-width: 50px;
}
.verification_code_info .step_block img.step2-1{
     max-width: 50px; 
}
.verification_code_info .step_block img.step2-2 {
     max-width: 350px; 
}
.verification_code_info .step_block img.step3 {
 max-width: 600px; margin: 0 auto;
    margin-left: auto ;
}
.verification_code_info .notice_block img.step1{
     max-width: 350px; 
}
.verification_code_info .notice_block{
    border-top: 1px solid var(--gray04);
    padding-top: var(--block-margins-s);
}
.btn_google, .btn_apple {
    max-width: 150px;
}

.verification_code_info .qrcode {
    max-width: 120px;
    display: block;
    border: 1px;
    border-color: var(--basic-brightgray);
}

/*帶有取消意味的按鈕*/
main .btn.nag,
main .button.nag,
button.nag {
    background: var(--nag-btn-gradient) !important;
    color: var(--basic-gray) !important;
}

/*內頁基礎設定*/
.inside_pages main {
    width: 100%;
    margin: 80px auto clamp(6rem, 10vw, 8rem);
}

.inside_pages main .all {
    width: 100%;
}

.inside_pages main .all .content {
    color: var(--basic-gray);
    margin: 0 auto;
    max-width: 1200px;
    font-size: 1.1rem;
    line-height: 2.4rem;
    width: 100%;
    margin: 0 auto;
}

.inside_pages main .all .content .header {
    border-bottom: 1px solid;
    border-color: var(--basic-gray);
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 1rem;
    margin-bottom: clamp(0.8rem, 1vw, 1.8rem);
}

.inside_pages main .all .content .header h1 {
    font-size: 2.5rem;
    font-weight: 300;
    align-self: flex-end;
    margin: 0;
}

.inside_pages main .all .content .header .bread_crumbs {
    display: flex;
    font-size: 0.95rem;
    z-index: 50;
    align-items: flex-end;
    flex-direction: row;
    justify-content: flex-end;
    margin: 0;
}

.inside_pages main .all .content .header .bread_crumbs li {
    width: auto;
    display: flex;
}

.inside_pages main .all .content .header .bread_crumbs a {
    display: block;
    width: 100%;
    height: 100%;
}

.inside_pages main .all .content .header h1,
.inside_pages main .all .content .header .bread_crumbs {
    line-height: 1;
    vertical-align: bottom;
}

.inside_pages main>.all>.content>.header>ul>li::before {
    padding-right: 4px;
    padding-left: 4px;
    border-color: var(--basic-gray);
    content: ">";
    pointer-events: none;
}

.inside_pages main>.all>.content>.header>ul>li:nth-of-type(1):before {
    content: "";
}

.inside_pages main>.all>.content>.header>ul>li>a>span {
    background: url(../images/svg/home2.svg) no-repeat center top;
    width: 16px;
    height: 16px;
    display: block;
    background-size: contain;
    text-indent: -99999px;
}

/*內頁通用按鈕設定*/
.inside_pages main .button {
    width: auto;
    /* padding: 0.2rem 0.4rem; */
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    color: var(--basic-gray);
    background: linear-gradient(to bottom, #f1f1f1 1%, #d7d7d7 100%);
    text-align: center;
    margin-left: 0.5rem;
    line-height: normal;
}
.button a, a.button{
    width: 100%; height: 100%; display: block; 
    padding: calc(var(--block-margins-ss) *0.4) calc(var(--block-margins-ss) *0.5);}

.inside_pages main.button_style2 {
    max-width: 150px;
    min-width: 80px;
    font-size: 1rem;
}

/*類別選擇區塊*/

.inside_pages main>.all>.content>section>.subtab {
    max-width: 550px;
    margin-left: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    border: 1px solid;
    border-color: var(--basic-gray);
}

.inside_pages main>.all>.content>section .subtab li a {
    width: 100%;
    height: auto;
    display: block;
    padding: 1% 2%;
}

.inside_pages main>.all>.content>section .subtab li {
    width: 100%;
    text-align: center;
    border-right: 1px solid;
    border-color: var(--basic-gray);
}

.inside_pages main>.all>.content>section .subtab li:last-of-type {
    border-right: none;
}

.inside_pages main>.all>.content>section .subtab li.on {
    background-color: var(--basic-gray);
    color: #ffffff;
}



/*內頁基礎表格樣式*/
.inside_pages main .all .content .list .item>div {
    padding: clamp(0.8rem, 5vw, 1.3rem) 0;
}

.inside_pages main .list {
    width: 100%;
    min-height: 230px;
}

.inside_pages main .list .item_title,
.inside_pages main .list .item {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.inside_pages main .list .item_title {
    background-color: #f3f3f3;
    padding: 0.5rem 0;
}

.inside_pages main .list .item_title>div {
    text-align: center;
}

.inside_pages main .list .item>div {
    text-align: center;
}

.inside_pages main .list .item {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e5e5e5;
}

@media (hover: hover) {
    .inside_pages main .list .item:hover {
        background-color: #f8f8f8;
    }
    main .eye:hover .eye-icon{
        background-color: var(--gray02);
}
}




/*頁碼切換區塊*/
.inside_pages main .all .content>.pagination {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: clamp(1%, 2vw, 2%);
    margin-bottom: clamp(1%, 2vw, 2%);
}

.inside_pages main .all .content>.pagination li {
    margin: 1% 1%;
    padding: 0.5%;
}

.inside_pages main .all .content>.pagination li a {
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 30px;
}

.inside_pages main .all .content>.pagination .btn_page.on {
    background-color: var(--basic-gray);
    color: #fff;
}

/*搜尋文章區塊*/
.inside_pages main .all .search_box {
    max-width: 500px;
    margin: 1rem auto;
    border: 1px solid #d7d7d7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.5rem;
    margin-top: clamp(2rem, 2vw, 2rem);
    margin-bottom: clamp(2rem, 2vw, 2rem);
    padding-left: 0.5rem;
    padding-right: 0.5rem;

}

.inside_pages main .search_box>.search_txt {
    width: 90%;
    /* 占據剩餘空間 */
    border: none;
    /* 移除輸入框邊框 */
    outline: none;
    /* 去掉聚焦邊框 */
    box-sizing: border-box;
    /* 確保 padding 不影響寬度 */
}

.inside_pages main .search_box>.search_txt input {
    width: 100%;
}

.inside_pages main .search_box>.search_button {
    width: clamp(1.5rem, 2vw, 1.8rem);
    height: clamp(1.5rem, 2vw, 1.8rem);
    position: relative;
    background: url('../images/svg/search.svg') no-repeat center center;
    background-size: contain;
    /* 確保背景適應按鈕大小 */
    border: none;
    /* 移除邊框 */
    cursor: pointer;
    /* 鼠標變為指針 */
}

.inside_pages main .all .search_box .search_button a {
    width: 100%;
    display: block;
    height: 100%;
}


/*購買紀錄頁*/
.records main .all .content .expiration_date p {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 1.5rem;
    color: var(--basic-gold);
    font-weight: 300;
}

.records main .all .content .expiration_date p.no_data {
    display: none;
}

.records main .all .content>section>.subtab {
    max-width: 380px;
}


/*購買紀錄列表records_list*/

.records main .list .item_title,
.records main .list .item {
    display: flex;
    font-size: clamp(1.1rem, 2vw, 1.2rem);
    justify-content: space-around;
    gap: 0.2rem;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
}

.records main .records_list .item .payment {
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: left;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}
.records main .all .content .records_list a{
    font-size: var(--normal-txt-size); width:fit-content; min-width: 80px;
}
.records .first_block {
    width: 56%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.5rem;
    align-items: center;
}

.records .second_block {
    width: 42%;
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 0.5rem;
    align-items: center;
}


/*分別定義出各欄位需要的寬度比例*/
.records main .records_list .item_title .first_block .item_name,
.records main .records_list .item .first_block .item_name {
    width: 52%;
}

.records main .records_list .item_title .first_block .payment,
.records main .records_list .item .first_block .payment {
    width: 27%;
}

.records main .records_list .item_title .first_block .price,
.records main .records_list .item .first_block .price {
    width: 19%;
}

.records main .records_list .item_title .second_block .start_time,
.records main .records_list .item .second_block .start_time {
    width: 30%;
}

.records main .records_list .item_title .second_block .end_time,
.records main .records_list .item .second_block .end_time {
    width: 30%;
}

.records main .records_list .item_title .second_block .remark,
.records main .records_list .item .second_block .remark {
    width: 30%; display: flex; justify-content: center;
}

.records main .records_list .item .item_name {
    /* font-size: clamp(1rem, 1.2vw, 1.2rem); */
    text-align: left;
}

.records main .records_list .item.recoup .item_name {
    /*補償類品項文字置中*/
    text-align: center;
}


.records>main>.all>.content .notice_list {
    width: 100%;
    text-align: left;
    font-size: 1rem;
    border-top: 1px solid;
    border-color: var(--gray03);

}

.records>main>.all>.content .notice_list>h1 {
    font-size: 1.3rem;
    font-weight: 300;
    margin-bottom: 0.5rem;
    display: inline-flex;
    align-items: center;
    margin-top: 1rem;
}

.records>main>.all>.content .notice_list>h1::before {
    content: '';
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background: url('../images/svg/notice.svg') no-repeat center center;
    background-size: contain;
    /* 图片自适应伪元素大小 */
    margin-right: 0.5rem;
    /* 与 h1 保持间距 */
}

.records>main>.all>.content .notice_list ul {
    padding-left: 1.5rem;
}

.records>main>.all>.content .notice_list ul li {
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    font-weight: 300; line-height: 2;
    letter-spacing: 0.03rem;
    text-indent: -1.2rem;
}

.records>main>.all>.content .notice_list ul li::before {
    content: '';
    display: inline-block;
    width: clamp(0.7rem, 1vw, 0.8rem);
    aspect-ratio: 1 / 1;
    margin-right: clamp(0.2rem, 1vw, 0.5rem);
    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;
    vertical-align: middle;
}

.records>main>.all>.content .notice_list ul li a {
    width: 100%;
    height: fit-content;
    /* display: block; */
    /* padding-bottom: clamp(0.1rem,1vw,0.2rem ); */
    text-decoration: underline 1px solid;
    color: var(--basic-gold);
    /* font-size: clamp(0.8rem,3vw,1.5rem ); */
}

.records>main>.all>.content .notice_list ul li a:hover {
    cursor: pointer;
}

/*--------------------------------------account個人中心--------------------------------------*/

.account>main>.all>.content>.box_wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.account>main>.all>.content>.box_wrapper>.priority_box {
    width: 70%;
    max-width: 850px;
    margin-right: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: fit-content;
    flex-wrap: wrap;
}

.account>main>.all>.content>.box_wrapper>.secondary_box {
    width: 28%;
    max-width: 350px;
    position: relative;
}

.account>main>.all>.content>.box_wrapper>.third_box {
    width: 70%;
    max-width: 850px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* margin-top: -8.5rem; */
    margin-top: var(--block-margins-s);

}

.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box {
    width: 100%;
    max-width: 850px;
    background: url('../images/member/account/bg.webp') no-repeat center top;
    /* background-size:100% ;  */
    /* 确保子项使用绝对定位时以此为参考 */
}

/* 父级容器样式 */
.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* 为子元素提供定位基准 */
}

/* 子容器 .avatar_img 样式 */
.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img {
    position: relative;
    width: 23.5%;
    max-width: 200px;
    min-width: 150px;
    aspect-ratio: 1 / 1;
    margin: 1.5rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: 100% !important;

    background-position: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.06);
    border-radius: 50%;
}


.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0.35rem solid #fff;
    border-radius: 50%;
    box-sizing: border-box;
    pointer-events: none;
}


.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .edit_btn a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img.avatar_01-1 {
    background: url('../images/member/account/avatar_01-1.png');

}

.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img.avatar_01-2 {
    background: url('../images/member/account/avatar_01-2.png');
}

.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img.avatar_02-1 {
    background: url('../images/member/account/avatar_02-1.png');
}

.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img.avatar_02-2 {
    background: url('../images/member/account/avatar_02-2.png');
}

.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img.avatar_03-1 {
    background: url('../images/member/account/avatar_03-1.png');
}

.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img.avatar_03-2 {
    background: url('../images/member/account/avatar_03-2.png');
}

.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img.avatar_04-1 {
    background: url('../images/member/account/avatar_04-1.png');
}

.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img.avatar_04-2 {
    background: url('../images/member/account/avatar_04-2.png');
}

.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img.avatar_05-1 {
    background: url('../images/member/account/avatar_05-1.png');
}

.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img.avatar_05-2 {
    background: url('../images/member/account/avatar_05-2.png');
}

.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img.avatar_06-1 {
    background: url('../images/member/account/avatar_06-1.png');
}

.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img.avatar_06-2 {
    background: url('../images/member/account/avatar_06-2.png');
}

.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img.avatar_07-1 {
    background: url('../images/member/account/avatar_07-1.png');
}

.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img.avatar_07-2 {
    background: url('../images/member/account/avatar_07-2.png');
}

.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img.avatar_08-1 {
    background: url('../images/member/account/avatar_08-1.png');
}

.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img.avatar_08-2 {
    background: url('../images/member/account/avatar_08-2.png');
}


/* 图片样式 */
.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img img {
    display: block;
    width: 100%;
    height: auto;
}

/* 编辑按钮样式 */
.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img .edit_btn {
    position: absolute;
    right: clamp(1rem, 0.3vw, 4rem);
    bottom: clamp(1rem, 1.5vw, 6rem);
    transform: translate(50%, 50%);
    /* 修正定位 */
    width: clamp(3rem, 2.5vw, 4rem);
    /* 按钮宽度 */
    height: clamp(3rem, 2.5vw, 4rem);
    /* 按钮高度，保证宽高相等 */
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    border: none;
    outline: none;
    padding: 0.6rem;
    transition: all 0.2s ease-in-out;

}

.account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img .edit_btn svg {
    width: 100%;
    height: auto;
    mask-image: url(../images/svg/edit.svg);
    mask-size: 100% 100%;
    background-color: #000;
}

/*account頁面通用設定*/
.account>main>.all>.content>.box_wrapper>div {
    margin-top: 2.5%;
}

.account>main>.all>.content>.box_wrapper>div>div>h1 {
    font-size: clamp(1.5rem, 2.5vw, 1.7rem);
    text-align: left;
    margin-bottom: clamp(0.5rem, 5%, 0.7rem);
}

/*⭣⭣⭣⭣帳號服務區塊⭣⭣⭣⭣⭣*/

.account>main>.all>.content>.box_wrapper>.priority_box .account_service_box {
    width: 100%;
    margin-top: var(--block-margins-s);
}

.account>main>.all>.content>.box_wrapper>.priority_box .account_service_box ul,
.account .third_box .button_group ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* gap: var(--block-margins-member); */
    border: 1px solid #d8d8d8;

}

.account>main>.all>.content>.box_wrapper>.priority_box .account_service_box>ul li,
.account .third_box .button_group ul li {
    width: 25%;
    padding: var(--block-margins-s) 0 calc(var(--block-margins-s) * 0.6);
}

.account>main>.all>.content>.box_wrapper>.priority_box .account_service_box>ul li>a,
.account .third_box .button_group ul li>a {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.account>main>.all>.content>.box_wrapper>.priority_box .account_service_box>ul>li>a .title,
 .account .third_box .button_group ul li>a .title {
    text-align: center;
    padding-top: clamp(0.3rem, 4%, 0.6rem);
    padding-bottom: clamp(0.3rem, 4%, 0.6rem);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.2rem;
}

.account>main>.all>.content>.box_wrapper>.priority_box .account_service_box ul>li>a>svg,
.account .third_box .button_group ul>li>a>svg {
    width: clamp(2.5rem, 3.5vw, 3.5rem);
    aspect-ratio: 1/1;
    mask-size: 100% 100%;
    background-color: var(--gray02);
    margin-bottom: calc(var(--block-margins-ss) * 0.5);
    transition: all 0.1s ease-in-out;
}

.account>main>.all>.content .priority_box .account_service_box ul li a:hover svg,
.account .third_box .button_group ul li a:hover svg {
    background: var(--gray01);
}

.account>main>.all>.content>.box_wrapper>.priority_box .account_service_box ul .subscribe svg {
    mask-image: url(../images/svg/header/07-2_subscribe.svg);
}

.account>main>.all>.content>.box_wrapper>.priority_box .account_service_box ul .crystal svg {
    mask-image: url(../images/svg/header/07-4_crystal_buying.svg);
}

.account>main>.all>.content>.box_wrapper>.priority_box .account_service_box ul .servant svg {
    mask-image: url(../images/svg/servant.svg);
}

.account>main>.all>.content>.box_wrapper>.priority_box .account_service_box ul .reset_code svg {
    mask-image: url(../images/svg/forget_password.svg);
}

/*會員專區*/

.account .third_box .button_group ul li.exchange a svg {
    mask-image: url(../images/svg/gift.svg);
}

.account .third_box .button_group ul li.new_player a svg {
    mask-image: url(../images/svg/new_player.svg);
}

.account .third_box .button_group ul li.verification_code a svg {
    mask-image: url(../images/svg/verification_code.svg);
}

.account .third_box .button_group ul li.records a svg {
    mask-image: url(../images/svg/header/08-3_records.svg);
}

/*帳號狀態*/

.account>main>.all>.content>.box_wrapper>.priority_box .account_status_box {
    width: 100%;
    margin-top: var(--block-margins-s);
}

.account>main>.all>.content>.box_wrapper>.priority_box .account_status_box ul {
    width: 100%;
    display: flex;
    gap: var(--block-margins-member);
}

.account>main>.all>.content>.box_wrapper>.priority_box .account_status_box ul li {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 2.5 1 0%;
    /* grow: 3, shrink: 1, basis: 0 */
    border: 1px solid #d8d8d8;
    text-align: center;
}

.account>main>.all>.content>.box_wrapper>.priority_box .account_status_box ul li.wide {
    flex: 5 1 0%;
    /* grow: 4，比其他多一點 */
}

.account>main>.all>.content>.box_wrapper>.priority_box .account_status_box ul li h5 {
    width: 100%;
    /* background:var(--step-bg); */
    background-color: #ebebeb;
    font-weight: 500;
}

.account>main>.all>.content>.box_wrapper>.priority_box .account_status_box ul li p {
    margin: calc(var(--block-margins-ss) * 0.2) auto calc(var(--block-margins-ss) * 0.8);
    line-height: 1.5;
    font-size: clamp(1rem, 1.1vw, 1.1rem);
}

.account>main>.all>.content>.box_wrapper>.priority_box .account_status_box ul li p.default {
    display: none;
}

.account>main>.all>.content>.box_wrapper>.priority_box .account_status_box ul li .button {
    width: fit-content;
    margin: 0 auto;
    font-size: clamp(1rem, 1.1vw, 1.1rem);
    font-weight: 400;
    min-width: 90px;
}

.account>main>.all>.content>.box_wrapper>.priority_box .account_status_box ul li .button.gold {
    background: var(--gold-gradient);
    color: #fff;
    /* display: none; */
}

.account>main>.all>.content>.box_wrapper>.priority_box .account_status_box ul li .li_content {
    flex: 1;
    /* 撐開剩餘高度 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--block-margins-ss) 0 calc(var(--block-margins-ss) * 1.3);
}

/*⭣⭣⭣⭣狀態列⭣⭣⭣⭣⭣*/
.account>main>.all>.content>.box_wrapper>.secondary_box .player_status {
    width: 100%;
    border: 1px solid #d8d8d8;
}

.account>main>.all>.content>.box_wrapper>.secondary_box .player_status .label_box {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.account>main>.all>.content>.box_wrapper>.secondary_box>.player_status .label_box li {
    width: 50%;
    text-align: center;
    font-size: clamp(0.8rem, 2.5vw, 1.1rem);
    background-color: #ebebeb;
    color: #979797;
    border-bottom: #d8d8d8 1px solid;
    cursor: pointer;
}

.account>main>.all>.content>.box_wrapper>.secondary_box .player_status .label_box>.on {
    color: var(---basic-gray);
    background-color: #fff;
    border-bottom: none
}

.account>main>.all>.content>.box_wrapper>.secondary_box .player_status .label_box li:nth-child(1) {
    border-right: 1px solid #d8d8d8;
}

.account>main>.all>.content>.box_wrapper>.secondary_box .player_status .info_box {
    width: 100%;
    padding: clamp(0.4rem, 10%, 1.5rem);
    min-height: 230px;
}

.account>main>.all>.content>.box_wrapper>.secondary_box .player_status .info_box ul li {
    margin-bottom: clamp(0.5rem, 3%, 1rem);
}

.account>main>.all>.content>.box_wrapper>.secondary_box .player_status .info_box .status li {
    border-bottom: 1px solid #d8d8d8;
    margin-bottom: clamp(1rem, 5%, 1.2rem);
}

.account>main>.all>.content>.box_wrapper>.secondary_box .player_status>.info_box>.status li h5 {
    font-size: clamp(0.9rem, 3vw, 1.1rem);
    font-weight: 500;
}

.account>main>.all>.content>.box_wrapper>.secondary_box .player_status>.info_box>.status li p {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    color: #303030;
}

.account>main>.all>.content>.box_wrapper>.secondary_box .player_status>.info_box>.notify {
    padding-top: clamp(0.5rem, 8%, 1rem);
}

.account>main>.all>.content>.box_wrapper>.secondary_box .player_status>.info_box>.notify li p {
    color: #303030;
    margin-left: 0.5rem;
    position: relative;
    padding-left: 1.5rem;
    line-height: 1.5;
    font-size: clamp(1rem, 20%, 1.6rem)
}

.account>main>.all>.content>.box_wrapper>.secondary_box .player_status>.info_box>.notify li p::before {
    content: "";
    position: absolute;
    top: 0;
    /* 固定到段落顶部 */
    left: 0;
    /* 对齐段落左侧 */
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    background: url('../images/svg/notice.svg') no-repeat center center;
    background-size: contain;
    /* 确保图片完全显示 */
    margin-top: 0.2rem;
    /* 根据实际情况微调位置 */
}

.account>main>.all>.content>.box_wrapper>.secondary_box .player_status>.info_box>.notify {
    display: none;
}


/*⭣⭣⭣⭣狀態列下方banner⭣⭣⭣⭣⭣*/
.account>main>.all>.content>.box_wrapper>.secondary_box .banner_box {
    position: relative;
    /* 确保子元素相对于此定位 */
    width: 100%;
    max-width: 350px;
    /* 桌机版最大宽度 */
    margin: 0 auto;
    overflow: hidden;
    aspect-ratio: 71/36;
}

.account>main>.all>.content>.box_wrapper>.secondary_box .banner_box .swiper-wrapper {
    width: 100%;
    height: 100%;
    /* 确保内容高度正确继承 */
    display: flex;
    align-items: center;
    /* 确保内容垂直居中 */
}

.account>main>.all>.content>.box_wrapper>.secondary_box .banner_box .swiper-slide img {
    width: 100%;
    /* 图片宽度自动适应 */
    height: auto;
    /* 图片高度按比例调整 */
    display: block;
    object-fit: cover;
}


/*⭣⭣⭣推薦碼區塊recommend_block⭣⭣⭣*/
.account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block {
    width: 100%;
    max-width: 350px;
    margin-top: calc(var(--block-margins-s) * 0.7);
    position: absolute;
}

.account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .title {
    width: 100%;
    height: fit-content;
    padding: calc(var(--block-margins-ss) * 0.7);
    background: linear-gradient(to bottom, #ab9462 0%, #c2ab6e 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3%;
    flex-wrap: wrap;
    line-height: 1.3;
}

.account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .title h5 {
    color: #fff;
    font-size: clamp(1.1rem, 1.4vw, 1.4rem);
    text-shadow: 0px 0px 2px rgba(81, 66, 53, 0.8);
}

.account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .confetti-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    /* 最底層 */
}

.account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content {
    width: 100%;
    background: url(../images/member/account/bg_s_recommend.jpg) no-repeat center top;
    padding: var(--block-margins-ss);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .role {
    width: 26%;
    max-width: 138px;
    background: url(../images/member/account/role_recommend.png) no-repeat center top;
    aspect-ratio: 138/168;
    background-size: 100%;
    margin: calc(var(--block-margins-ss) *0.5) auto;
    animation: float 2s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7));
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0);
    }
}

.account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .text {
    font-size: clamp(1.2rem, 1.4vw, 1.4rem);
    letter-spacing: 1px;
}

.account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .arrow_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--block-margins-ss);
    padding-left: 1rem;
}

.account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .button {
    font-size: clamp(0.8rem, 1vw, 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    /* padding: calc(var(--block-margins-ss)*0.5) var(--block-margins-ss); */
}
.account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .button a >span {
    padding: calc(var(--block-margins-ss)*0.3) var(--block-margins-ss);
}
.account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .button span {
    font-size: calc(var(--normal-txt-size)*0.9);
    display: inline-block;
}

.account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .button svg {
    width: clamp(0.8rem, 1vw, 1rem);
    aspect-ratio: 1/1;
    mask-size: 100% 100%;
    mask-image: url(../images/svg/v.svg);
    background-color: var(--gray01);
    transform: translateY(0.1rem) translateX(-0.2rem) rotate(-90deg);
}

.account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .arrow_box li {
    flex: 1;
    color: #fff;
    font-size: clamp(1.15rem, 1.5vw, 1.5rem);
    font-weight: 500;
    margin-left: -4%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 100%, 100%;
    /* 確保圖片適應容器的大小 */
    background-position: center, center;
    /* 背景圖片對齊方式 */
    background-repeat: no-repeat, no-repeat;/
}

.account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .arrow_box li:nth-of-type(1) {
    background-image: url(../images/member/account/step1_g.svg), url(../images/member/account/step1.svg);
}

.account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .arrow_box li:nth-of-type(2) {
    background-image: url(../images/member/account/step2_g.svg), url(../images/member/account/step2.svg);
}

.account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .arrow_box li:nth-of-type(3) {
    background-image: url(../images/member/account/step2_g.svg), url(../images/member/account/step3.svg);
}

.account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .arrow_box li:nth-of-type(4) {
    background-image: url(../images/member/account/step2_g.svg), url(../images/member/account/step4.svg);
}

.account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .arrow_box li:nth-of-type(5) {
    background-image: url(../images/member/account/step2_g.svg), url(../images/member/account/step5.svg);
}

.account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .arrow_box li.active {
    background-size: 0%, 100%;
    /* 隱藏第一張背景圖，顯示第二張背景圖 */
}

/*⭡⭡⭡推薦碼區塊recommend_block⭡⭡⭡*/



/*⭣⭣⭣會員專屬區塊button_group⭣⭣⭣*/
/* .account>main>.all>.content>.box_wrapper>.third_box {
    gap: var(--block-margins-member);
}
*/
.account>main>.all>.content>.box_wrapper>.third_box>div {
    flex: 1;
}

/*⭣⭣⭣交易紀錄表⭣⭣⭣*/

.account>main>.all>.content>.box_wrapper>.third_box>.transaction_history>.history_list {
    border: #d8d8d8 1px solid;
    /* padding: 3%; */
    aspect-ratio: 8/7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.account>main>.all>.content>.box_wrapper>.third_box>.transaction_history>.history_list>ul>li {
    display: flex;
    flex-wrap: wrap;
    margin-left: 1.5rem;
    padding-top: clamp(0.7rem, 1vw, 1rem);
    padding-bottom: clamp(0.7rem, 1vw, 1rem);
    line-height: clamp(1.2rem, 1vw, 1.5rem);
}

.account>main>.all>.content>.box_wrapper>.third_box>.transaction_history>.history_list>ul>li>p {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    margin-right: 1rem;
    position: relative;
    width: auto;

}

.account>main>.all>.content>.box_wrapper>.third_box>.transaction_history>.history_list>ul>li>p::before {
    content: "";
    position: absolute;
    top: 0;
    left: -1.5rem;
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    background: url('../images/svg/notice.svg') no-repeat center center;
    background-size: contain;
    margin-top: 0.1rem;
}


.account>main>.all>.content>.box_wrapper>.third_box>.transaction_history>.history_list>ul>li>span {
    color: var(--basic-gold);
    border-color: var(--basic-gold);
    border: 1px solid;
    font-size: clamp(0.85rem, 1vw, 1rem);
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}

.account>main>.all>.content>.box_wrapper>.third_box>.transaction_history>.history_list .button {
    margin-top: 1rem;
    max-width: 200px;
    font-size: clamp(1rem, 1.1vw, 1.1rem);
    padding: calc(var(--block-margins-ss) * 0.5) calc(var(--block-margins-ss) * 0.8);
    font-weight: 400;
}


/*gmnote頁面 冒險日記*/
.gmnote main .all .content>.title,
.tv main .all .content>.title,
.retainer main .all .content>.title,
.service main .all .content>.title
/* .memory main .all .content> .title */
{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: clamp(1rem, 1vw, 2rem);
    border-bottom: 1px solid;
    border-color: var(---basic-gray);
    padding-top: var(--block-margins-ss);
    padding-bottom: var(--block-margins-s);
}

.gmnote main .all .content .title h1 {
    width: 9%;
    min-width: 90px;
    font-size: clamp(1.5rem, 1.5vw, 1.7rem);
    color: var(--basic-gold);
}

.gmnote main .all .content .title p {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 2;
}
.gmnote main .all .content .title p >span{
    display: block;
}
.gmnote main .all .content .title p .space {
    margin: 0 0.4rem;
}

.gmnote main .all .content .note_list,
.wallpaper main .all .content .download_list.desktop {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: calc(var(--block-margins-s)*0.8);
    margin-top: 1rem;
}

.gmnote main .all .content .note_list .note,
body.wallpaper main .all .content .download_list .item {
    width: 48.5%;
    border: 1px solid var(--gray06);
    margin-bottom: 1rem;
    line-height: 1;
}

.gmnote main.all .content .note_list .note a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gmnote main .all .content .note_list .note img {
    width: 100%; height: auto;
}

.gmnote main .all .content .note_list .note .title {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* flex-direction: column; */
    padding: clamp(0.4rem, 1vw, 0.8rem);
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    line-height: 1.6;
    text-align: left;
}

.gmnote .not_found p {
    width: 100%;
    padding: 2% 0;
    font-size: 1.3rem;
    text-align: center;
    font-weight: 600;
}

@media (hover) {
    .account>main>.all>.content>.box_wrapper>.priority_box .avatar_box .avatar .avatar_img .edit_btn:hover {
        background: rgba(255, 255, 255, 0.9);
        filter: brightness(1.08);
    }
}

@media (max-width: 1300px) {
    .inside_pages main {
        width: 90%;
    }

    .account>main>.all>.content>.box_wrapper>.third_box {

        /*margin-top: clamp(-12rem, calc(-9rem - (1300px - 100vw) * 0.2), -8.5rem);  負值增大 */

        margin-top: clamp(1.5rem, calc(3rem - (1300px - 100vw) * 0.2), 3rem);
        /*負值增大*/
    }

}

@media (max-width: 1200px) {

    /* .account > main > .all > .content > .box_wrapper > .third_box {
        margin-top: clamp(-11rem, calc(-9rem - 2%), -9rem)
    } */

    .account>main>.all>.content>.box_wrapper>.third_box>.transaction_history>.history_list>ul>li {
        padding-top: clamp(0.3rem, 0.7vw, 0.8rem);
        padding-bottom: clamp(0.3rem, 0.7vw, 0.8rem);
    }

    .account>main>.all>.content>.box_wrapper>.third_box>.transaction_history>.history_list>ul>li>p {
        margin-right: .5rem;

    }

    .records main .records_list .item .payment {
        gap: 0;
    }

    .inside_pages main .button {
        margin-left: 0;
    }


}

@media (max-width: 1000px) {
    .account>main>.all>.content>.box_wrapper>.third_box>.transaction_history>.history_list .button {
        margin-top: clamp(0.5rem, 1vw, 1rem);
    }

    .inside_pages main {
        margin: 90px auto clamp(4.5rem, 10vw, 8rem);
    }
}

@media (max-width: 800px) {
    .login-info .title {
        font-size: clamp(1.3rem, 1.5vw, 1.5rem);
    }


    .account>main>.all>.content>.box_wrapper>.secondary_box {
        width: 100%;
        margin-top: 2rem;
        max-width: 800px;
    }

    .account>main>.all>.content>.box_wrapper>.priority_box {
        width: 100%;
        margin-right: 0;
    }

    .account>main>.all>.content>.box_wrapper>.secondary_box .banner_box {
        max-width: 800px;
    }

    .account>main>.all>.content>.box_wrapper>.third_box {
        width: 100%;
        margin-top: 2rem;
    }

    .account>main>.all>.content>.box_wrapper>.third_box>.transaction_history>.history_list>ul>li:nth-of-type(1) {
        margin-top: 0;
    }

    .account>main>.all>.content>.box_wrapper>.third_box>.transaction_history>.history_list>ul>li {
        padding-top: clamp(0.7rem, 1vw, 1rem);
        padding-bottom: clamp(0.7rem, 1vw, 1rem);
        line-height: clamp(1.2rem, 1vw, 1.5rem);
    }

    .account>main>.all>.content>.box_wrapper>.third_box>.transaction_history>.history_list>ul>li>p {
        font-size: clamp(0.9rem, 1vw, 1rem);
    }

    .account>main>.all>.content>.box_wrapper>.secondary_box .player_status .info_box {
        min-height: fit-content;
    }

    .account>main>.all>.content>.box_wrapper>.secondary_box .player_status .info_box .status {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        gap: var(--block-margins-ss);
        justify-content: space-between;
    }

    .account>main>.all>.content>.box_wrapper>.secondary_box .player_status .info_box .status li {
        width: 47%;
    }
}

@media (max-width: 800px) and (min-width: 429px) {

    /*推薦碼區塊recommend_block*/
    .account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block {
        width: 100%;
        max-width: 767px;
        position: relative;
        margin-top: calc(var(--block-margins-s) * 1.5)
    }

    .account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content {
        background: url(../images/member/account/bg_l_recommend.jpg) no-repeat center 50%;
        position: relative;
        padding-bottom: var(--block-margins-s);
    }

    .account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .title h5 {
        font-size: clamp(1.1rem, 1.5vw, 1.5rem);
    }

    .account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .role {
        width: 15%;
        position: absolute;
        left: 3%;
        bottom: 10%;
        max-width: 100px;
        margin: calc(var(--block-margins-ss) *0.3) auto;
    }

    .account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .arrow_box {
        width: 48%;
        margin-bottom: 0;
        transform: translateX(-2rem);
    }

    .account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .arrow_box li {
        font-size: clamp(1.15rem, 3vw, 1.5rem);
    }

    .account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .text {
        font-size: clamp(1.6rem, 2.1vw, 2.1rem);
        margin: var(--block-margins-ss);
        transform: translateX(-2rem);
    }

    .account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .button {
        width: clamp(120px, 20vw, 150px);
        position: absolute;
        right: 2vw;
        top: 50%;
        transform: translateY(-50%);
    }

    .account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .button span {
        font-size: calc(var(--normal-txt-size)*1);
    }
}

@media (max-width: 767px) {

    .verification_code_info main,
    .verification_code_step main {
        padding-top: clamp(65px, 20vw, 90px);
    }

    .verification_code_info .gift-banner .banner-txt h1 {
        font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    }

    .account>main>.all>.content>.box_wrapper>.third_box>.transaction_history>.history_list>ul>li {
        padding-top: clamp(0.4rem, 0.8vw, 0.7rem);
        padding-bottom: clamp(0.4rem, 0.8vw, 0.7rem);
        line-height: clamp(1.2rem, 1vw, 1.5rem);
    }


    .verification_code_info .gift-banner .banner-txt h2 {
        font-size: clamp(1.4rem, 2.5vw, 2rem);
    }

    .inside_pages main>.all>.content>section>.subtab {
        /*類別切換列改為置中*/
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2rem;
        margin-bottom: 2rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        border: 1px solid;
        border-color: var(--basic-gray);
    }
/*gmnote*/
/* .gmnote>main>.all>.content>.note_list{
    gap: 0;
} */


    /*交易紀錄*/
    .records main .list .item_title {
        display: none;
    }

    .records main .list .item_title,
    .records main .list .item {
        font-size: clamp(1rem, 2vw, 1.1rem);
        justify-content: space-between;
        gap: 0.2rem;
        align-items: center;
        flex-direction: column;
        padding: 0.5rem 1rem;
        border: 1px solid #d5d5d5;
        margin: 0 auto 1.5rem;
    }

    .records .first_block {
        align-items: baseline;
    }

    .records main .all .content .list .item>div {
        padding: clamp(0.8rem, 2vw, 1rem) 0;

    }

    .records main .records_list .item .item_name {
        order: 1;
    }

    .records main .records_list .item .price {
        order: 2;
        width: 15%;
    }

    .records main .records_list .item .price::before {
        content: "NT.";
        position: relative;
    }

    .records main .records_list .item.crystal .price::before {
        content: "";
    }

    .records main .records_list .item.crystal .price::after {
        content: " 水晶";
    }

    .records main .records_list .item.recoup .item_name {
        text-align: left;
    }

    .records main .records_list .item .payment {
        justify-content: center;
        order: 3;
        text-align: right;
    }

    .records .first_block {
        width: 100%;
        align-items: flex-start;
        display: flex;
        flex-direction: row;
        justify-content: left;
        border-bottom: 1px solid #e5e5e5;
        line-height: normal;
        align-items: baseline;
    }

    .records .second_block {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        line-height: normal;
        flex-wrap: wrap;
    }

    .records main .records_list .item .first_block .item_name {
        font-size: clamp(1.1rem, 2vw, 1.2rem);
        width: 55%;
    }

    .records main .records_list .item .first_block .payment span::after {
        content: "付款";
        position: relative;
        display: inline;
        padding-left: 0.1rem;
        /* margin-right: 0.5rem; */
    }

   .records main .records_list .item .second_block .start_time,
   .records main .records_list .item .second_block .end_time  {
    width: fit-content;
    text-align: left;
}

.records main .records_list .item .second_block .remark {
    width: 100%;
    position: relative;
    /* right: 0%; */
    display: flex;
    justify-content: end;
    text-align: left;
}

    .records main .records_list .item .second_block .start_time::after {
        content: "至";
        position: relative;
        display: inline;
        padding-left: 0.3rem;
    }

    .records main .records_list .item .second_block .end_time::after {
        content: "止";
        position: relative;
        display: inline;
        padding-left: 0.3rem;
    }

 

    .records main .records_list .item .first_block .payment {
        width: auto;
        margin-left: auto;
        align-items: flex-end;
    }

    .records main .records_list .item .payment .button {
        margin-top: 0.5rem;
    }



}

@media (max-width: 700px) {

    .double_row {
        display: block;
    }
}

@media (max-width: 660px) {

    /*登入頁*/

    .login input,
    .login select {
        font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    }

    .login .label-title {
        font-size: clamp(1rem, 2.5vw, 1.3rem);
        margin: 0.4rem 0 .4rem 0;
    }

    .login .hint {
        font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    }

    /* .login .label-title {
        font-size:clamp(1rem,2.5vw,1.2rem);
    } */
    .records main .all .content .expiration_date p {
        width: 100%;
        justify-content: center;
    }

    .gmnote main .all .content .title {
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .gmnote main .all .content .title h1 {
        width: 100%;
        margin: 0 auto;
        line-height: 1.5rem;
    }

    .gmnote main .all .content .title p {
        width: 100%;
        line-height: 1.9rem;
    }


}

@media (max-width: 600px) {

    .verification_code_info .all {
        margin-bottom: 0;
    }

    .verification_code_info .keycode {
        width: 90%;
    }


    .verification_code_info ol li{
        margin: calc( var(--block-margins-s) *0.8) 0;
    }

    .verification_code_info ol li, .verification_code_info main .txt_box{
        font-size: clamp(1.1rem, 2vw, 1.3rem);
        line-height: 2
    }
    .verification_code_info .gift_button a {
        padding: 3%;
        margin: 3% 0;
    }

    .frame_style01 {
        box-shadow: none
    }


    .records>main>.all>.content .notice_list {
        padding: 0.5rem;
    }

    .account>main>.all>.content>.box_wrapper>.third_box>.transaction_history>.history_list {
        padding: 5%;
        aspect-ratio: inherit;
    }

    /* body.gmnote:not(.tv)>main>.all>.content>.note_list>.note {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    } */
     body.gmnote:not(.tv) main .all .content .note_list .note {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /*個人中心中心account*/

    .account>main>.all>.content>.box_wrapper>.third_box {
        flex-direction: column;
    }

    /* .account>main>.all>.content>.box_wrapper>.third_box>.button_group {
        width: 100%;
    } */

    .account>main>.all>.content>.box_wrapper>.third_box>.transaction_history {
        width: 100%;
    }

    .account>main>.all>.content>.box_wrapper>.third_box>.transaction_history>.history_list>ul>li {
        padding-top: clamp(0.6rem, 2.5vw, 1.3rem);
        padding-bottom: clamp(0.6rem, 2.5vw, 1.3rem);
        line-height: clamp(1.2rem, 1vw, 1.5rem);
    }

    .account>main>.all>.content>.box_wrapper>.third_box>.transaction_history>.history_list>ul>li>p {
        font-size: clamp(1rem, 2.5vw, 1.4rem);
    }

    .account>main>.all>.content>.box_wrapper>.third_box>.transaction_history>.history_list .button {
        margin-top: 1vw;
        max-width: 250px;
        font-size: clamp(1rem, 2vw, 1.3rem);
        padding: 1.5% 2.5%;
    }

/*交易紀錄*/
.records main .records_list .item .second_block .remark {
    justify-content: left;
    text-align: left;
}

}

@media(max-width:550px) {

    .records main .records_list .item .first_block .item_name {
        text-align: center;
        background-color: #e6e6e6;
    }

    .records main .records_list .item .first_block {
        justify-content: space-between;
        flex-wrap: wrap;
        padding-top: 0 !important;
    }

    .records main .records_list .item .first_block .item_name {
        width: 100%;
        padding: 0.5rem;
    }

    .records main .records_list .item .first_block .price {
        width: 48%;
        text-align: left;
        padding-top: 0.3rem;
    }

    .records main .list .item_title,
    .records main .list .item {
        padding: 0;
    }

    .records main .records_list .item div>div:not(.item_name) {
        padding: 0 1rem 0.3rem;
    }

    .records main .records_list .item .second_block .start_time {
        padding-right: 0;

    }

    .records main .records_list .item .second_block .end_time {
        padding-left: 0;

    }
}

@media (max-width: 500px) {

    .inside_pages main .all .content {
        font-size: 1rem;
    }

    .inside_pages main .all .content .header h1 {
        font-size: clamp(1.5rem, 7vw, 2.5rem);
    }

    .inside_pages main .all .content .header .bread_crumbs {
        font-size: clamp(0.7rem, 1vw, 0.85rem);
    }


    /* .verification_code_info ol li span {
    display: inline; vertical-align: middle;
} */

    .verification_code_info .gift-banner .banner-txt {
        width: 90%;
    }

    .verification_code_info .gift-banner img {
        width: 30%;
        margin-left: 0;
        margin-top: 2rem;
    }
    .verification_code_info .gift_button a img {
    padding: 0;
}

.verification_code_info ol li span.one_block>span:nth-of-type(1){
    display: inline;
}
.verification_code_info ol li span.one_block > span:nth-of-type(1) img {
  vertical-align: middle; /* ✅ 垂直對齊文字中線 */
}
    /*個人中心中心account*/
    .account>main>.all>.content>.box_wrapper>.priority_box .account_service_box>ul,
    .account .third_box .button_group ul {
        /* flex-direction: column; */
        flex-wrap: wrap;
    }

    .account>main>.all>.content>.box_wrapper>.priority_box .account_service_box>ul li,
    .account .third_box .button_group ul li {
        /* margin-bottom: var(--block-margins-ss); */
        width: 50%;
    }


    /*帳號狀態*/
    .account>main>.all>.content>.box_wrapper>.priority_box .account_status_box ul {
        flex-direction: column;
        gap: calc(var(--block-margins-s) * 0.6);
    }

    .account>main>.all>.content>.box_wrapper>.priority_box .account_status_box ul li {
        flex: 1 1 0%;
    }

    .account>main>.all>.content>.box_wrapper>.priority_box .account_status_box ul li.wide {
        flex: 1 1 0%;
    }

    .account>main>.all>.content>.box_wrapper>.priority_box .account_status_box ul li .li_content {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: var(--block-margins-s);
    }

    .account>main>.all>.content>.box_wrapper>.priority_box .account_status_box ul li .li_content p,
    .account>main>.all>.content>.box_wrapper>.priority_box .account_status_box ul li .li_content .button {
        margin: 0;
    }

}


@media (max-width: 429px) {
    .login .form-group .hint_group .error>span>span {
        display: inline;
    }

    .login .form-group {
        width: 85%;
    }


    /*個人中心訊息改直式*/
    .account>main>.all>.content>.box_wrapper>.secondary_box .player_status .info_box .status li {
        width: 100%;
    }

    /*⭣⭣⭣推薦碼區塊recommend_block⭣⭣⭣*/
    .account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block {
        position: relative;
        margin-top: calc(var(--block-margins-s) * 1.5);
        max-width: 450px;
    }

    .account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content {
        background-size: cover;
    }

    .account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .arrow_box {
        width: 95%;
    }

    .account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .button {
        margin: calc(var(--block-margins-ss)) auto;
    }

    .account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .role {
        max-width: 70px;
    }

}



@media (max-width: 380px) {
    .inside_pages main .all .content .header h1 {
        align-self: flex-start;
        margin-bottom: 3%;
    }

    .inside_pages main .all .content .header {
        align-items: flex-start;
        flex-direction: column;
        justify-content: flex-start;
        padding-bottom: 1rem;
        margin-bottom: clamp(0.8rem, 1vw, 1.8rem);
    }
}

@media (max-width: 350px) {

    .records main .records_list .item {
        line-height: normal;
    }

    .records main .records_list .item .second_block {
        flex-wrap: wrap;
    }

    .records main .records_list .item .second_block .start_time,
    .records main .records_list .item .second_block .end_time {
        /* width: 49%; */
        text-align: left;
        line-height: 0.7rem;
    }

    .records main .records_list .item .second_block .remark {
        width: 100%;
        /* text-align: right; */
    }

    .records main .records_list .item .second_block .end_time {
        padding-left: 0.2rem;
    }

    /*帳號狀態*/
    .account>main>.all>.content>.box_wrapper>.priority_box .account_status_box ul li .li_content {
        flex-direction: column;
        gap: var(--block-margins-ss);
    }

}

@media (max-width: 300px) {
    .login .form-group .hint_group .error {
        width: 100%;
    }

    .login .form-group .hint_group .hint {
        width: 100%;
    }

    /*帳號服務*/


    .records main .records_list .item .second_block .end_time {
        padding-left: 0;
    }

    .records main .records_list .item .second_block .end_time {
        width: fit-content;
        text-align: left;
    }

   .records main .records_list .item .second_block .remark {
    position: relative;
    text-align: center;
    width: 100%;
    padding-top: 0.5rem;
    justify-content: center;
}

    .records main .records_list .item .second_block {
        flex-wrap: wrap;
        justify-content: center;
    }

    .records main .records_list .item .second_block .start_time,
    .records main .records_list .item .second_block .end_time {
        width: fit-content;
        padding: 0;
    }

    .records main .all .content .list .item .first_block {
        justify-content: center;
    }

    .records main .records_list .item .first_block .payment {
        width: auto;
        margin: 0 auto;
    }

    .records main .records_list .item .first_block .price {
        width: 100%;
        text-align: center;
    }

    .records main .records_list .item .second_block {
        padding: 0.5rem 0.5rem 0.8rem !important;
    }

}


@media (max-width: 250px) {
    .account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .title {
        gap: 0;
        flex-direction: column;
        padding: var(--block-margins-ss) 0;
    }

    .account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .title h5 {
        line-height: 1.2;
    }

    .account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .arrow_box {
        width: 100%;
    }

    .account>main>.all>.content>.box_wrapper>.secondary_box .recommend_block .recommend_content .arrow_box li {
        font-size: clamp(0.9rem, 2vw, 1.15rem);
    }

}

@media (max-width: 220px) {

    .account>main>.all>.content>.box_wrapper>.priority_box .account_service_box>ul li,
    .account .third_box .button_group ul li {
        width: 100%;
    }

}