body{
    color: #ffffff;
}

body *{
    font-size: 2rem;
}

/*** general start ***/
.hidden{
    display: none !important;
}
.v-hidden{
    visibility: hidden !important;
}

/*** general end ***/

/*** header start ***/
.lang-tw #header {
    font-family: Arial,"微軟正黑體";
}

#header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    z-index: 100;
    /* background: url("../images/sty1_home/header-bg1.webp") center center / cover no-repeat !important; */
    background: url("../images/sty1_home/header-bg1.webp") center center / 100% 100% no-repeat !important;
}

#header.hide-border {
    border-bottom: none !important;
}

/*#header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.2rem;
    background: linear-gradient(to right, rgb(27, 30, 26) 0%, rgba(58, 162, 236, 0.98) 50%, rgb(28, 30, 28) 100%);
}*/

#header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.5rem 0rem;
}

#header .header-content .header-left {
    /* min-width: 20rem; */
    min-width: 18rem;
}

#header .logo-area {
    width: 26rem;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
}

#header .logo{
    width: 85%;
    margin-left: 2rem;
}

#header .header-content .header-right {
    display: flex;
    flex: 1 0;
    gap: 2rem;
    align-items: center;
    margin-left: 7rem;
    margin-right: 2rem;
}

.back-btn-area{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
}

.back-btn-area .feature-btn{
    /*height: 6rem;
	padding: 0 2.4rem;*/
    height: 4rem;
    padding: 0 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /*gap: 1rem;*/

    /*border-radius: 99.9rem;*/

    /* 金色邊框 + 內邊框 */
    border: .25rem solid rgba(255, 235, 170, .95);
    box-shadow:
		0 .6rem 1.4rem rgba(0,0,0,.35),          /* 外陰影 */
		inset 0 .25rem .8rem rgba(255,255,255,.35), /* 上方高光 */
		inset 0 -.35rem .9rem rgba(140, 70, 0, .30), /* 下方陰影 */
		inset 0 0 0 .18rem rgba(160, 80, 0, .22);    /* 內框 */

    /* 金色漸層（上亮下暗） */
    background:
		radial-gradient(circle at 25% 20%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%),
        linear-gradient(to bottom, #ffe39a 0%, #ffc84a 35%, #f1a700 70%, #d07a00 100%);

    /* 字體/文字 */
    /*font-family: "Segoe UI", "Noto Sans TC", sans-serif;*/
	color: #6b2b00;          /* 深褐 */
    font-weight: 800;
    letter-spacing: .15rem;
    text-shadow:
	0 .15rem 0 rgba(255,255,255,.35),  /* 上亮 */
	0 .25rem 0 rgba(0,0,0,.25);        /* 下暗 */

    user-select: none;
    cursor: pointer;

    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    /*margin-left: 2rem;*/
}

.back-btn-area .feature-btn > div{
    font-size: 2.3rem;
}

/* 做出圖那種「亮面反光」 */
.back-btn-area .feature-btn::before{
	content:"";
	position:absolute;
    inset: .35rem .6rem auto .6rem;
    height: 45%;
    border-radius: 99.9rem;
	background: linear-gradient(to bottom, rgba(255,255,255,.45), rgba(255,255,255,0));
	pointer-events:none;
}

/* 讓 pseudo-element 生效需要定位 */
.back-btn-area .feature-btn{ 
    position: relative;
    overflow: hidden;
}

/* hover/active 手感 */
.back-btn-area .feature-btn:hover{
    filter: brightness(1.05);
    transform: translateY(-1px);
}
.back-btn-area .feature-btn:active{
    filter: brightness(.98);
    transform: translateY(1px);
    box-shadow:
    0 .35rem 1.0rem rgba(0,0,0,.30),
    inset 0 .2rem .7rem rgba(255,255,255,.28),
        inset 0 -.35rem .9rem rgba(140, 70, 0, .35),
        inset 0 0 0 .18rem rgba(160, 80, 0, .22);
}

#header {
    --height: 6rem;
	--cap: calc(var(--height) * 50 / 70); /* left/right 邊界圖 cap 原始比例 50:70 */
}

/*跑馬燈*/
#header .marquee-container{
    padding: 0;
    flex: 1;
}

#header .marquee-area{
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--height);
	min-width: calc(var(--cap) * 2); /* 左右各 50px,不能再窄否則兩張圖會互相蓋到 */
    width: 100%;
	padding: 0 calc(14px * 50 / 70);   /* ← 只要小於 50px,文字就會壓進左右圖的留白區 */
    /* background: #1d2129;
    border: 0.01rem solid #666e7f;
    border-radius: 3rem; */
    background-image:
        url(../images/sty1_home/header_marquee_bg1_left.webp),
        url(../images/sty1_home/header_marquee_bg1_right.webp);
    background-repeat: no-repeat, no-repeat;
    background-position: left center, right center;
    background-size: auto 100%, auto 100%;
}

#header .marquee-area::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    left: calc(var(--cap) - 1px);
    right: calc(var(--cap) - 1px);
    background-image: url(../images/sty1_home/header_marquee_bg1_repeat_x.webp);
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
}

#header .marquee-area .trumpet-img{
    width: 2.5rem;
}

#header .marquee-area .marquee{
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    height: 2rem;
    margin-left: 1rem;
    overflow: hidden;
    line-height: initial;
}

#header .marquee-area .marquee .marquee-c{
    color: #ffffff;
    white-space: nowrap;
    position: absolute;
    animation: marquee 30000ms linear infinite;
    /*animation: marquee var(--duration, 10s) linear infinite;*/
    --start-x: 100%;
    --end-x: -100%;
}

@keyframes marquee {
    0% {
        /* left: 100%; */
        transform: translateX(var(--start-x));
    }
    100% {
        /* left: 0; */
        transform: translateX(var(--end-x));
    }
}

/* #header .machine-no-area{
    display: flex;
    align-items: center;
    background-image: url(../images/sty1_home/machine_no_bg.webp?c=1);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0.8rem;
}

#header .machine-no-area .no{
    color:#FFF;
    padding-left: 3rem;
} */

#header .machine-no-area .expand{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: var(--height);
	min-width: calc(var(--cap) * 2); /* 左右各 50px,不能再窄否則兩張圖會互相蓋到 */
	padding: 0 calc(14px * 50 / 70);   /* ← 只要小於 50px,文字就會壓進左右圖的留白區 */
    background-image:
        url(../images/sty1_home/header_btn_bg2_left.webp),
        url(../images/sty1_home/header_btn_bg2_right.webp);
    background-repeat: no-repeat, no-repeat;
    background-position: left center, right center;
    background-size: auto 100%, auto 100%;
    color: #fff;
    white-space: nowrap;
}

#header .machine-no-area .expand::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    left: calc(var(--cap) - 1px);
    right: calc(var(--cap) - 1px);
    background-image: url(../images/sty1_home/header_btn_bg2_repeat_x.webp);
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
}

#header .machine-no-area .expand span {
    position: relative;
    font-size: 2.2rem;
}

#header .machine-no-area .expand .title {
    color: #b89752;
}

#header .customer-info-area{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: var(--height);
	min-width: calc(var(--cap) * 2); /* 左右各 50px,不能再窄否則兩張圖會互相蓋到 */
	padding: 0 calc(14px * 50 / 70);   /* ← 只要小於 50px,文字就會壓進左右圖的留白區 */
    background-image:
        url(../images/sty1_home/header_btn_bg2_left.webp),
        url(../images/sty1_home/header_btn_bg2_right.webp);
    background-repeat: no-repeat, no-repeat;
    background-position: left center, right center;
    background-size: auto 100%, auto 100%;
    color: #fff;
    white-space: nowrap;
}

#header .customer-info-area::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    left: calc(var(--cap) - 1px);
    right: calc(var(--cap) - 1px);
    background-image: url(../images/sty1_home/header_btn_bg2_repeat_x.webp);
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
}

#header .customer-area {
    position: relative;
    display: flex;
    align-items: center;
    height: 4rem;
    overflow: hidden;
}

#header .customer-title {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b89752;
    font-size: 2.2rem;
}

#header .customer-userid {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* color: #8392b2; */
    font-size: 2.2rem;
}

#header .quota-area{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: var(--height);
	min-width: calc(var(--cap) * 2); /* 左右各 50px,不能再窄否則兩張圖會互相蓋到 */
	padding: 0 calc(14px * 50 / 70);   /* ← 只要小於 50px,文字就會壓進左右圖的留白區 */
    background-image:
        url(../images/sty1_home/header_btn_bg2_left.webp),
        url(../images/sty1_home/header_btn_bg2_right.webp);
    background-repeat: no-repeat, no-repeat;
    background-position: left center, right center;
    background-size: auto 100%, auto 100%;
    color: #fff;
    white-space: nowrap;
}


#header .quota-area::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: -1;
    left: calc(var(--cap) - 1px);
    right: calc(var(--cap) - 1px);
    background-image: url(../images/sty1_home/header_btn_bg2_repeat_x.webp);
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
}

#header .cash-quota-area {
    position: relative;
    display: flex;
    align-items: center;
    height: 4rem;
    overflow: hidden;
}


#header .cash-quota-title,
#header .cash-quota{
    position:relative;
    z-index:2;
}

#header .cash-quota-area .cash-quota-title {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b89752;
    font-size: 2.2rem;
}

#header .cash-quota-area .cash-quota {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2.2rem;
}

#header .giveup-btn{
    /* background-image: url(../images/sty1_home/header_btn_bg1.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%; */
    background-image: url(../images/sty1_home/header_giveup_btn_bg1.webp);
    background-repeat: no-repeat;
    background-size: 100% 200%;
    background-position: 0 0;
    /*width: 9rem;
    height: 4rem;
	font-size: 2.2rem;*/
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.3); */
    /* border-radius: 2.7rem; */

    width: 11rem;
    height: 6rem;
    /* margin-left: -1rem; */
    font-size: 2.5rem;
}

#header .giveup-btn:hover{
    background-position: 0 100%;
}

#header .voice-btn{
    /* background-repeat: no-repeat;
    background-size: 100% 100%; */
    width: 6rem;
    height: 6rem;
    cursor: pointer;
    /* box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.3);
    border-radius: 2.7rem; */
    background-repeat: no-repeat;
    background-size: 100% 200%;
    background-position: 0 0;
}

#header .voice-btn.open{
    background-image: url(../images/sty1_home/header_voice_open_btn_bg1.webp);
}
#header .voice-btn.open:hover{
    background-position: 0 100%;
}

#header .voice-btn.close{
    background-image: url(../images/sty1_home/header_voice_close_btn_bg1.webp);
}
#header .voice-btn.close:hover{
    background-position: 0 100%;
}

#header .refresh-btn{
    /* background-image: url(../images/sty1_home/header_refresh_btn.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%; */
    background-image: url(../images/sty1_home/header_refresh_btn_bg1.webp);
    background-repeat: no-repeat;
    background-size: 100% 200%;
    background-position: 0 0;
    width: 6rem;
    height: 6rem;
    cursor: pointer;
}
#header .refresh-btn:hover{
    background-position: 0 100%;
}

#header .mail-btn{
    /* background-image: url(../images/sty1_home/header_mail_btn.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%; */
    background-image: url(../images/sty1_home/header_mail_btn_bg1.webp);
    background-repeat: no-repeat;
    background-size: 100% 200%;
    background-position: 0 0;
    width: 6rem;
    height: 6rem;
    cursor: pointer;
}
#header .mail-btn:hover{
    background-position: 0 100%;
}

#header .login-btn{
    /* background-image: url(../images/sty1_home/header_btn_bg3.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%; */
    background-image: url(../images/sty1_home/header_giveup_btn_bg1.webp);
    background-repeat: no-repeat;
    background-size: 100% 200%;
    background-position: 0 0;
    width: 10rem;
    height: 5.5rem;
    cursor: pointer;
    /* box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.3);
    border-radius: 2.7rem; */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#header .login-btn:hover{
    background-position: 0 100%;
}


#header .login-btn .txt{
    font-size: 2.3rem;
    position: relative;
    top: -0.2rem;
    color: #FFF;
}

#header .logout-btn{
    /* background-image: url(../images/sty1_home/header_btn_bg4.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%; */
    background-image: url(../images/sty1_home/header_giveup_btn_bg1.webp);
    background-repeat: no-repeat;
    background-size: 100% 200%;
    background-position: 0 0;
    width: 10rem;
    height: 5.5rem;
    cursor: pointer;
    /* box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.3);
    border-radius: 2.7rem; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding-left: 3rem; */
}

#header .logout-btn:hover{
    background-position: 0 100%;
}

#header .logout-btn .txt{
    /* font-size: 2rem; */
    font-size: 2.3rem;
    position: relative;
    /* top: 0.15rem; */
    top: -0.2rem;
    color: #FFF;
}

#header .mem-center-btn{
    /*background-image: url(../images/sty1_home/header_mem_center_btn_bg1.webp);
    background-repeat: no-repeat;
    background-size: 100% 200%;
    background-position: 0 0;
    width: 14.5rem;
    height: 5.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding-left: 4.2rem;*/
    background-image: url(../images/sty1_home/header_mem_center_btn_bg1.webp);
    background-repeat: no-repeat;
    background-size: 100% 200%;
    background-position: 0 0;
    width: 6rem;
    height: 6rem;
    cursor: pointer;
}
#header .mem-center-btn:hover{
    background-position: 0 100%;
}

#header .mem-center-btn .txt{
    font-size: 2rem;
    position: relative;
    top: -0.1rem;
    color: #fff;
}

#header:has(.chang-lang-div:not(.hidden)) {
    z-index: 101;
}

#header .lang-area{
    display: flex;
    align-items: center;
    width: 6rem;
    height: 6rem;
    background-image: url(../images/sty1_home/header_lang_btn_bg1.webp);
    background-repeat: no-repeat;
    background-size: 100% 200%;
    background-position: 0 0;
}
#header .lang-area:hover{
    background-position: 0 100%;
}

#header .lang-area img.now-lang-img,
#header .lang-area img.lang-img {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#header .chang-lang-div{
    position: absolute;
    /* right:2rem; */
	top:8.5rem;
    /* background: linear-gradient(#7b0000, #3d0000); */
    background: linear-gradient(#41444c, #1d2533);
    border-radius: 1rem;
    z-index: 101;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    -webkit-user-select: none;
    user-select: none;
}

#header .chang-lang-div .flex-div{
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 1rem 2rem;
    gap:2rem;
}

#header .chang-lang-div .flex-div:hover,
#header .chang-lang-div .flex-div.active{
    background: linear-gradient(90deg, #ffe6a3, #f5c45a);
    color: #1d2533;
}

#header .chang-lang-div .lang-img{
    width:4rem;
}

#header .chang-lang-div .lang-txt{
}

.quota-overlay{
    position: fixed;
    inset: 0;
    z-index: 99;
    justify-self: center;

    display: flex;
    align-items: center;
    justify-content: center;

	background: transparent;      /* ✅ 不要遮整個 */
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
.quota-overlay.is-show{
    opacity: 1;
}

/* 中間那塊：半透明黑色面板 */
.quota-fly{
    padding: 1.4rem 2.8rem;
    border-radius: 1.8rem;
	background: rgba(0,0,0,.55);  /* ✅ 只有中間半透明黑 */
	box-shadow: 0 1rem 3rem rgba(0,0,0,.35);

	font-family: "Impact","Arial Black","Segoe UI",sans-serif;
    font-size: clamp(5.6rem, 8vw, 12rem);
    font-weight: 900;
    color: #ffd84a;

    -webkit-text-stroke: 0.6rem #0b0b0b;
	text-shadow: 0 0.8rem 0 rgba(0,0,0,.55);
}


/*** header end ***/



/* layer start */

/* 登入 */
.login-layer{}

.login-layer .layui-layer-content {}

.layui-layer {
    background-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.login-layer .layui-layer-content{
    overflow: visible !important;
}

.login-area{
    position: relative;
    background-image: url(../images/sty1_home/login_layer_bg.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.login-area .header{
    position: absolute;
    top: -70px;
}

.login-area .header .logo{
    width: 17.5rem;
}

.login-area .header .txt{
    font-size: 3rem;
    margin-top: 2rem;
}

.login-area .header1 {
    margin-top: 70px;
    color: #f0cd88;
}

.login-area .header2 {
    margin-top: 3px;
    color: #77726c;
    font-size: 16px;
}


.login-area .main {
    padding: 2.4rem;
    margin-top: 1.5rem;
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-area .main .account-block,
.login-area .main .password-block{
    display: flex;
    align-items: center;
    width: 80%;
    background: #fff;
    border-radius: 3rem;
}
.login-area .main .password-block{
    display: flex;
    align-items: center;
    margin-top: 2.4rem;
}

.login-area .main .account-block input,
.login-area .main .password-block input{
    width: 100%;
    height: 5rem;
    padding-left: 4.5rem;
    background-repeat: no-repeat !important;
    background-position: 5% center !important;
    background-size: auto 45% !important;
    background: transparent;
    border: none;
    font-size: 2rem;
    border: none;
}

.login-area .main .password-block input{
    background-position: 7.2% center !important;
    background-size: auto 40% !important;
}

.login-area .main .password-block img{
    margin-right: 1.6rem;
    cursor: pointer;
    width: 1.8rem;
    filter: grayscale(1);
}

.login-area .main .remember-div{
    margin-top: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.login-area .main .remember-div .remember-ckbox{
    margin-right: 1.2rem;
    width: 1.92rem;
    height: 1.92rem;
}

.login-area .main .remember-div .remember-txt{
    font-size: 1.8rem;
    color: #FFF;
}

.login-area .main .account-block input{
    background-image: url(../images/sty1_home/login_userid_icon.webp);
}

.login-area .main .password-block input{
    background-image: url(../images/sty1_home/login_password_icon.webp);
}

.login-area .main .enter-login-btn{
    margin-top: 2.4rem;
    font-size: 2rem;
    width: 80%;
    height: 4.6rem;
    text-align: center;
    line-height: 4.6rem;
    font-weight: bold;
    cursor: pointer;
    color: #FFF;
    background: linear-gradient(to bottom, #a98039 0%, #6d4717 100%);
    border-radius: 3rem;
}

/* 棄分結果layer內容 */
.skin-1 .giveup-result-dialog{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3rem;
    position: relative;
}
.skin-1 .giveup-result-dialog .title-text{
    color: #000;
}
.skin-1 .giveup-result-dialog .title-text::after{
    content: "";
    position: absolute;
    top: 15%;
    left: 5%;
    right: 5%;
    bottom: 0;
    height: 0.2rem;
    background: #000;
    box-shadow: 0 0 .6rem rgba(169, 181, 207, .35);
}
.skin-1 .giveup-result-dialog .result-div{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.skin-1 .giveup-result-dialog .result-div .result-text{
    color: #000;
}
.skin-1 .giveup-result-dialog .result-div .result-quota {
    font-size: 5rem !important;
    color: #e47070;
    font-weight: bold;
    padding-top: 2rem;
}
.skin-1 .giveup-result-dialog .result-time{
    color: #000;
}

/*
.layui-layer-setwin .layui-layer-close{
	background: url(../images/sty1_home/layer_close_btn.webp) no-repeat center center !important;
	background-size: 100% 100%;
	width: 3.2rem;
	height: 3.2rem;
	
	//background-image: url(../images/sty1_home/layer_close_btn.webp) !important;
	//background-repeat: no-repeat;
	//background-size: 100% 100%;
}

 //把原本的字 / icon 隱藏 
.layui-layer-setwin .layui-layer-close i {
	display: none;
}
*/

/* layer end */

.layui-layer.layui-layer-iframe.mem-center {
    max-width: 128rem;

    /* background: #ecebe6; */
    /* background: #0e131b; */
    background: #3a3a3a;
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);

    border-radius: 18px;
    /* border: 2px solid #6780a9; */

    /* box-shadow:
		0 12px 30px rgba(0,0,0,.35),
		inset 0 1px 0 rgba(255,255,255,.35); */
}