body{
	color: #ffffff;
}

body *{
    font-size: 2rem;
}

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

/*** general end ***/

/*** header start ***/

#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;
}

#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 {
}

#header .logo-area {
    width: 25rem;
    display: flex;
    align-items: center;
}

#header .logo{
	width: 70%;
    margin-left: 4rem;
}

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

.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 .machine-no-area{
    display: flex;
    align-items: center;
    background-image: url(../images/sty1_home/machine_no_bg.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 0.8rem;
}

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

#header .customer-info-area{
	padding: 0.8rem 1.5rem;
	background-image: url(../images/sty1_home/customer_info_area_bg1.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#header .customer-area {
    display: flex;
    align-items: stretch;
    width: 22rem;
    height: 4rem;
    border-radius: 3rem;
    overflow: hidden;

    background: linear-gradient(to bottom, #22262f, #303746);
}

#header .customer-title {
    width: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 2.2rem;

    border-radius: 3rem;
    background: linear-gradient(to bottom, #647f99, #24303d);
}

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

#header .quota-area{
    display: flex;
    align-items: center;
    gap: 1rem;
	padding: 0.8rem 1.5rem;
	background-image: url(../images/sty1_home/quota_area_bg1.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#header .cash-quota-area {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 23.5rem;
    height: 4rem;
    border-radius: 3rem;
    overflow: hidden;
	
	padding: 0.2rem;
    background: linear-gradient(
        to bottom,
        #f63713 0%,
        #ff3f28 20%,
        #d92110 55%,
        #a01f0d 100%
    );
}

#header .cash-quota-area::before{
    content:"";

    position:absolute;
    inset: 0.2rem;
	
    border-radius:inherit;

    background:linear-gradient(
        to bottom,
        #9b1208,
        #6f0d06
    );

    z-index:0;
}

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

#header .cash-quota-area .cash-quota-title {
	width: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 2.2rem;

    background: linear-gradient(
        to bottom,
        #f83713 0%,
        #f12810 35%,
        #c4140a 75%,
        #a01f0d 100%
    );
    border-radius: 3rem;
}

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

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

#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;
}

#header .voice-btn.open{
    background-image: url(../images/sty1_home/header_voice_open_btn.webp);
}

#header .voice-btn.close{
    background-image: url(../images/sty1_home/header_voice_close_btn.webp);
}

#header .mail-btn{
    background-image: url(../images/sty1_home/header_mail_btn.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 4.5rem;
    height: 4.5rem;
    cursor: pointer;
}

#header .login-btn{
    background-image: url(../images/sty1_home/header_btn_bg3.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 12rem;
    height: 6rem;
    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 .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%;
    width: 10rem;
    height: 4.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 .txt{
    font-size: 2rem;
    position: relative;
    top: 0.15rem;
    color: #FFF;
}

#header .mem-center-btn{
    background-image: url(../images/sty1_home/header_btn_bg2.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 13.5rem;
    height: 4.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;
    padding-left: 4rem;
}

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

.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{
	background-color: transparent!important;
	border-radius: 1rem!important;
    box-shadow: rgb(102 102 102) 0px 0.2rem 1rem !important;
}

/*.login-layer .layui-layer-content{
	border-radius: .6rem;
}*/

.login-area{
	margin: 0 auto;
    width: 40rem;
    background-image: url(../images/sty1_home/login_layer_bg.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 2rem 3rem 3rem 3rem;
}

.login-area .header{
    color: #EAECEF;
    text-align: center;
    font-weight: bold;
}

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

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

.login-area .main {
	padding: 2.4rem;
    margin-top: 1.5rem;
    border-radius: 2rem;
}

.login-area .main .account-block,
.login-area .main .password-block{
	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: 100%;
    height: 4.6rem;
	text-align: center;
	line-height: 4.6rem;
    font-weight: bold;
    cursor: pointer;
    color: #FFF;
	background: #4a6077;
    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: #9fb0d3;
}
.skin-1 .giveup-result-dialog .title-text::after{
    content: "";
    position: absolute;
	top: 15%;
    left: 5%;
    right: 5%;
    bottom: 0;
    height: 0.2rem;
    background: #99abd0;
    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;
	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);
}