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;
    box-shadow: rgba(0, 0, 0, 0.61) 0.57rem 0.82rem 1.7rem 0.3rem;
    z-index: 100;
    padding: 2rem 0rem;
    background: linear-gradient(to bottom, #950000, #330500);
    border-bottom:0.2rem solid #910000;
}


/*#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%;
}

#header .header-content .header-left {
	width: 35rem;
	display: flex;
}

#header .logo-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 35rem;
    height: 11rem;
    overflow: hidden;
    background-image: url(../images/sty1_home/logo_area_bg.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
}

#header .logo{
	width: 80%;
    margin-left: 1rem;
}

#header .header-content .header-right {
    display: flex;
	/*text-align: right;
    justify-content: flex-end;*/
	flex: 1;
	gap: 2rem;
	padding-right: 2rem;
    align-items: center;
}

/*#header .feature-btn {
    height: 7rem;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    border-radius: 99.9rem;
    border: .3rem solid rgba(238, 178, 255, .95);
    background: radial-gradient(circle at 35% 25%, #5a43d9 0%, #3620a6 35%, #240e6f 70%, #1a0755 100%);
    box-shadow: 0 0 1rem rgba(255, 120, 255, .75), 0 0 2.2rem rgba(255, 120, 255, .55), inset 0 0 1rem rgba(255, 255, 255, .12), inset 0 0 0 0.2rem rgba(120, 80, 255, .25);
    font-family: "Impact", "Arial Black", "Segoe UI", sans-serif;
    text-align: center;
    user-select: none;
    color: #ffd84a;
    font-size: 4rem;
    font-weight: 600;
    text-shadow: 0 0.2rem 0 rgba(0, 0, 0, .55), 0 0 0.8rem rgba(255, 220, 120, .25);
}

#header .feature-btn svg {
	margin-right: 2rem;
}*/

#header .feature-btn{
	height: 7rem;
	padding: 0 2.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;
}

#header .feature-btn > div{
	font-size: 2.3rem;
}

/* 做出圖那種「亮面反光」 */
#header .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 生效需要定位 */
#header .feature-btn{ 
	position: relative; 
	overflow: hidden; 
}

/* hover/active 手感 */
#header .feature-btn:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}
#header .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%;
    width: fit-content;
    height: fit-content;
    padding: 1.5rem;
    font-size: 2rem;
}

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

#header .machine-no-area .no{
    color:#fcaea6;
    padding-left: .5rem;
}

#header .marquee-area{
    flex: 1;
    display: flex;
    align-items: center;
}

#header .marquee-area .trumpet-img{
    width:4.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 .cash-quota {
	width: 18rem;
    height: 6rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 99.9rem;
    font-family: "Impact", "Arial Black", "Segoe UI", sans-serif;
    text-align: center;
    user-select: none;
    color: #ffd84a;
    font-size: 3.3rem;
    font-weight: 600;
    -webkit-text-stroke: 0.05rem #0b0b0b;
    text-shadow: 0 0.2rem 0 rgba(0, 0, 0, .55), 0 0 0.8rem rgba(255, 220, 120, .25);
    background-image: url(../images/sty1_home/credit_bg.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#header .cash-quota::before{
	content: "";
    position: absolute;
    top: -1.5rem;
    /*color: #ffd84a;
    font-size: 3.2rem;
    font-weight: 900;
    letter-spacing: .2rem;
    -webkit-text-stroke: 0.2rem #0b0b0b;
    text-shadow: 0 0.2rem 0 rgba(0, 0, 0, .55), 0 0 1rem rgba(255, 255, 255, .25);*/
    background-image: url(../images/sty1_home/credit_txt.webp);
    width: 8.5rem;
    height: 2.62rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#header .giveup-btn{
    background-image: url(../images/sty1_home/header_btn_bg1.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 9.94rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    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: 6rem;
    height: 6rem;
    cursor: pointer;
    box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.3);
    border-radius: 2.7rem;
}

#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;
    cursor: pointer;
    padding-left: 5.2rem;
}

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

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

#header .mem-center-btn .txt{
    font-size: 2.3rem;
    position: relative;
    top: -0.3rem;
    color: #5f3a00;
}

.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: 3rem;
}

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

.login-area .header .logo{
    width: 80%
}

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

.login-area .main {
	padding: 2.4rem;
    margin-top: 1rem;
    border-radius: 2rem;
    background-color: #5a0600;
}

.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: 5.6rem;
	text-align: center;
	line-height: 5.6rem;
	border-radius: 0.6rem;
    font-weight: bold;
    cursor: pointer;
    color: #563300;
    background-image: url(../images/sty1_home/login_layer_login_btn_bg.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}




/* 棄分結果layer內容 */
.skin-1 .giveup-result-dialog{
	display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
	gap: 3rem;
	color: #FFF;
}
.skin-1 .giveup-result-dialog .result-div{
	display: flex;
    flex-direction: column;
    align-items: center;
}

.skin-1 .giveup-result-dialog .result-quota {
	font-size: 5rem !important;
	color: #ffd84a;
	font-weight: bold;
	padding-top: 2rem;
}

/*
.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;
	backdrop-filter: blur(10px) saturate(120%);
	-webkit-backdrop-filter: blur(10px) saturate(120%);

	border-radius: 18px;
	border: 1px solid rgba(255,255,255,0.35);

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