/*捲軸底色*/
::-webkit-scrollbar-track {
  -webkit-box-shadow:  0 -1px 2px rgba(0, 0, 0, 0.8);
  background-color: #b8a0db;
  border:1px solid #ccc; padding:2px
}
/*捲軸寬度*/
::-webkit-scrollbar {  width: 10px;  background-color: black;}
/*捲軸本體顏色*/
::-webkit-scrollbar-thumb {  background-color: #824990;}



input,button,a{outline:none!important;  }
h3{	text-align: center;	font-size: 20px;	font-weight: normal;	letter-spacing: 1px; margin-top:0}

a {	color: #f1f1f8;	text-decoration: underline; cursor: pointer;}
a:hover {	color: #f1f1f8;	text-decoration: underline;}
a.turquoise {	color: #00c9db;}
a.white {	color: #fff;}
.modal{ color:#333}
.modal-title{line-height: 1.3;    color: #8c3985; font-size: 1.05rem;}
.modal-header{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fcfcfc+8,fff298+100 */
background: #fcfcfc; /* Old browsers */
background: -moz-linear-gradient(top,  #fcfcfc 8%, #fff298 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #fcfcfc 8%,#fff298 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #fcfcfc 8%,#fff298 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#fff298',GradientType=0 ); /* IE6-9 */
box-shadow: 0px 1px 5px #9a7737;

}
.login_box{	background:#3b1bc2 url(../images/bg.jpg) center center no-repeat fixed;
	-moz-background-size:cover;display: flex;
	background-size: cover;   width:100%; height:100%; position:relative}
.login_area{ display:flex;    width: 760px;/*原先是300*/     
    margin: auto;
    background-color: rgb(0 0 0 / 45%);
    padding: 45px 0;
    border-radius: 20px;    justify-content: center;
   /* align-items: center;  */  flex-direction: column;
   	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.login_btn_group{ display:flex; width:100%; justify-content: center; }
.login_btn_group i{ margin-right: 5px;}
.form_set{
	border:1px solid #582d93; background-color:#306; color:#FFF; line-height:25px; padding:6px 15px; font-size:19px; margin-bottom:10px;     letter-spacing: 3px; border-radius: 8px;}
.form_btn, .btn-blue{
color:#FFF; margin:2px 0;  cursor: pointer; width:46%;  text-decoration: none;
border-radius: 8px; font-size:16px; line-height:35px; font-weight:bold;     text-align: center;
transition: background-image .5s,transform .5s;/*避免漸層色滑過閃逤*/	
	}
.form_btn{
	background: rgb(255,94,2);
    background: -moz-linear-gradient(top, #ff9900 0%,#ff5e00 40%,#e14200 100%);
    background: -webkit-linear-gradient(top, #ff9900 0%,#ff5e00 40%,#e14200 100%);
    background:linear-gradient(to bottom,  #ff9900 0%,#ff5e00 40%,#e14200 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5e00', endColorstr='#e14200',GradientType=0 );
    -moz-box-shadow: 0px 1px 3px 1px rgb(183 0 0 / 70%) inset;
    -webkit-box-shadow: 0px 1px 3px 1px rgb(183 0 0 / 70%) inset;
    box-shadow: 0px 1px 3px 1px rgb(183 0 0 / 70%) inset;
    text-shadow: 0px 2px 3px rgb(107 0 0 / 90%);
       border: 1px solid #ffb127;padding: 5px;
}

.btn-blue{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4ed3fc+0,0bb5e0+40,0074aa+100 */
background: rgb(78,211,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(78,211,252,1) 0%, rgba(0,120,206,1) 40%, rgba(0,116,170,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(78,211,252,1) 0%,rgba(0,120,206,1) 40%,rgba(0,116,170,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(78,211,252,1) 0%,rgba(0,120,206,1) 40%,rgba(0,116,170,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ed3fc', endColorstr='#0074aa',GradientType=0 ); /* IE6-9 */
-moz-box-shadow: 0px 1px 3px 1px rgb(0 22 170 / 70%) inset;
    -webkit-box-shadow: 0px 1px 3px 1px rgb(0 22 170 / 70%) inset;
    box-shadow: 0px 1px 3px 1px rgb(0 22 170 / 70%) inset;
	text-shadow: 0px 2px 3px rgba(0, 20, 165, .9);
	border: 1px solid #27b7ff;

	}
.form_btn:hover{ background: #F30; transform:translateY(-10%); text-decoration: none; }
.btn-blue:hover{ background:#039; transform:translateY(-10%); text-decoration: none;}
.loginIcon_group{ display:flex;  flex-wrap: wrap; justify-content: space-around;}
.loginIcon{
	height:95px;
	width:95px;
	border-radius: 8px;
	margin:10px 5px 15px;
	background-image: url(../images/login_icon.svg);
	background-repeat: no-repeat; 
	background-position: 0px 0px;
	cursor: pointer;
	    background-size: 400%;
}
.loginIcon_fb{	background-position:0 0;}
.loginIcon_google{	background-position: -95px top;}
.loginIcon_apple{	background-position: -190px top;}
.loginIcon_line{	background-position: -285px top;}/*
.loginIcon_google { display:flex; height:auto;   width:100%;justify-content: center;}
.loginIcon_apple{ height: 45px;     width: 100%;}*/
.login_otherLine{ width:100%; position:relative; display: flex;
    justify-content: center;    align-items: center; color:#7459df; margin:8px 0 16px}
.login_otherLine:before, .login_otherLine:after{ content:""; position:absolute; margin:auto; height:1px; width:40%; background-color:#4a2fb8}
.login_otherLine:before{ left:0}
.login_otherLine:after{ right:0}

/*註冊區塊*/
.register_box{    background: #3b1bc2 url(../images/bg.jpg) center center no-repeat fixed;
    padding: 3% 0;    -moz-background-size: cover;    display: flex;    background-size: cover;    width: 100%;
    position: relative;    display: grid;    gap: 80px; height: 100%;    }
.register_area, .register_form, .register_hintBox{display:flex;  width: 760px;   margin:auto; position: relative; flex-direction: column; 
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.register_area{   background-color: rgb(61 15 48 / 70%); 	  border: 3px solid #e0b521;   	}
.register_area_top{ 
	height: 50px;	font-size: 17pt;	color: #ffd4ff;	width: 100%;
	background-image: url(../images/register_rule_boxTitleBg.png);
	background-repeat: repeat-x;	border-bottom: 3px solid #e0b521;    display: flex	;		justify-content: center;
	align-items: center;		font-weight: bold; }
.register_form .position-absolute, .login_area .position-absolute{ top: 30px; z-index: 9999; }
.dropdown-mimic .btn {   min-width: 120px;   text-align: left;   display: flex;   justify-content: space-between;    align-items: center; 
background-color: #000;    border: 1px solid #000;  color: #fff;  }
.flag-icon {      width: 28px;      height: 17px;      margin-right: 6px;      object-fit: cover;    }
.dropdown-mimic  .list-group-item{    background-color: #3f3f3f;    border: 1px solid #515151;    width: 120px;    color: #fff;
    padding: .5rem 0.8rem; cursor: pointer;}
.dropdown-mimic .list-group-item:hover{ background-color: #4a2b75;}

.option-flag-vi, .option-flag-tw{  background-repeat: no-repeat;  background-size: 30px 20px;  padding-left: 10px; /* 預留空間避免文字壓住圖 */}
.option-flag-vi{background-image: url('../images/flag_vi.jpg');}
.option-flag-tw{background-image: url('../images/flag_tw.jpg');}
ul.register_declare_list, ul.register_formSet, .register_hint_info{ min-height: 200px;    display: flex	;		align-items: center;}
ul.register_declare_list{display: grid;  margin:0; padding:5% 5% 3%; list-style: none; gap:12px;  position: relative;}
.register_declare_list li{ margin:0; list-style: none; position: relative;display: grid; padding: 6px; border-radius: 6px;
	grid-template-columns: 60px 1fr 60px; gap:12px;     align-items: center; border: 2px solid #b873f2;     padding-right: 20px;
background: linear-gradient(to bottom,  #721099 0%,#4a0982 40%,#260357 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
box-shadow: 0px 0px 8px #000 inset;}
.rule_checkbox_set{position: relative; text-align: center;     cursor: pointer;}
.rule_checkbox_img{max-width: 100%; position: relative;}
.rule_tick_img{max-width: 100%; position: absolute; left:0 ; right: 0; top: 0; bottom: 0; margin: auto;}
.rule_txtInfo{     font-size: 18pt;    color: #f3e332; }
.register_rule_btn, .register_goldBtn, .register_yellowBtn{font-size: 16pt; text-decoration: none;    transition: background-image .5s, transform .5s;
	position:relative; display: flex; font-weight: 600;    cursor: pointer; justify-content: center;     align-items: center;
}
.register_rule_btn{color:#FFF;	width:50px; height: 43px;   	background: url(../images/register_rule_icon.png) center center no-repeat ;		
		text-shadow: 0 0 0.2em #910606, 0 0 0.2em #910606,	0 0 0.2em #910606; padding: 0 10px;	}
.register_rule_btn:before, .register_rule_btn:after{ position: absolute; absolute; height:43px; width:10px; 	background-image: url(../images/register_rule_icon.png); 
	background-repeat:no-repeat; content: "";}
.register_rule_btn:before{ left:-10px;  background-position: left center;}
.register_rule_btn:after{ right:-10px; background-position: right center;}

.register_goldBtn{ display: inline-block;  width: 60%;  height: 51px;  line-height: 51px;  color: #c40000; text-align: center;
  text-shadow: 0 0 0.2em #fff9e4, 0 0 0.2em #fff7db;  border-width: 0 20px; /* 左右切 20px 當圓角 */  border-style: solid;
  border-image: url(../images/register_goldBtn.png) 0 20 fill stretch;
  -ms-border-image: url(../images/register_goldBtn.png) 0 20 fill stretch;}

.register_yellowBtn{color: #49250a;  width: 181px; height: 41px; text-shadow: 0 0 0.2em #f8e6a6, 0 0 0.2em #f8e6a6;
	background: url(../images/register_yellowBtn.png) center center no-repeat ;}
.register_rule_btn:hover, .register_goldBtn:hover, .register_yellowBtn:hover{ opacity: 0.7; transform:translateY(-4%); text-decoration: none; }
.register_goldBtn:hover, .register_yellowBtn:hover{color:#7c0000 ;}

.register_foot_btnBox{    display: flex;	margin-bottom: 35px;	justify-content: center;}
.register_foot_btnBox a, .login_btn_group a{   margin: 0 15px;   width: auto;   letter-spacing: 0px;   padding: 5px 18px;  }
.register_foot_btnBox .btn-blue i, .register_foot_btnBox .form_btn i{ margin-right: 5px;}
.register_form{
	border: 2px solid #e0b521;box-shadow: 0px 0px 12px #000 inset; border-radius: 10px;     position: relative;
background: linear-gradient(to bottom,  #d0401f 0%,#80214d 45%,#410971 100%); }
ul.register_formSet{display: grid;  margin:0 auto; padding:2% 5% 5%; list-style: none; gap:18px;  position: relative;     width: 80%;
    justify-content: center;}
.register_formSet li{ margin:0; list-style: none; position: relative;display: grid; grid-template-columns: 1fr 2fr; 
	gap:12px; font-size: 16pt;     align-items: center; }
.register_formSet li label{ text-align: center; margin-bottom:0}
.register_formSet li .form-control{background-color: #000; color:#fff; text-align: center;   font-weight: bold; border: 1px solid #000;
    letter-spacing: 1px;     font-size: 13pt;}
.register_formSet li .form-control-pushTxt{
background: linear-gradient(to right,  #dcb429 2%,#000000 10%,#000000 91%,#dcb429 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border: 1px solid #dcb429;}
.register_formSet_top{position: relative; display: flex	;		justify-content: center;	align-items: center;  margin-bottom: 50px;}
.register_formSet_topBg-1{ padding: 3px;	position: absolute;    border-radius: 50px;
	background: linear-gradient(135deg,  #fff372 0%,#965f00 18%,#fff372 38%,#965f00 57%,#965f00 57%,#fff372 80%,#965f00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
.register_formSet_topBg-2{ background-color: #9e1818; box-shadow: 0px 0px 20px #000 inset; border-radius: 50px; position: relative;
    height: 40px;    width: 280px;    display: flex;    justify-content: center;    align-items: center;font-size: 17pt;
    font-weight: bold;}
.register_formSet_topBg-2:before{content: ""; position: absolute; right: 265px;
	background-image: url(../images/register_formSet_top_light.png); background-repeat:repeat-x; height: 34px; width: 136px;}
.register_formSet_topBg-2:after{content: ""; position: absolute; left: 265px;
		background-image: url(../images/register_formSet_top_light.png); background-repeat:repeat-x; height: 34px; width: 132px;}
.register_hintBox{border: 2px solid #8b92ff; border-radius: 10px;     position: relative; background-color: #1c1f52; }
.register_hint_top{ background-color: #2d34a5; border-bottom: 2px solid #8b92ff; position: relative; height: 60px; display: flex;
justify-content: center; align-items: center; border-radius: 10px 10px 0 0;}
.register_hint_topBg{ position: relative; width: 255px; height: 65px; top: -10px; padding-top: 15px; text-align: center;
 color: #ffdb31; font-size: 17pt; font-weight: bold;  background-image: url(../images/register_hint_topBg.png); background-repeat:no-repeat;}
.register_hintBox .btn-orange{  border-radius: 50px;    padding: 8px 15px;    font-size: 15pt;    font-weight: 600;}
.register_hint_info{ padding: 30px; font-size: 15pt; text-align: center;  line-height: 1.7;     flex-direction: column; }
.register_hint_info img{ margin-bottom: 18px;}
.register_hintBox .register_foot_btnBox{
	background-color: #2d34a5; border-top: 2px solid #8b92ff; margin-bottom: 0; padding: 20px 0 15px; border-radius: 0 0 10px 10px;}
.register_form .loginIcon_group{justify-content: center; margin-top: 50px;}
.register_form .login_otherLine{color: #9d95b9; width: 90%;     margin: 8px auto 16px;}
.register_form .login_otherLine:before, .register_form .login_otherLine:after{    background-color: #8c79d7;}
.register_form .loginIcon_group h3{   width: 100%;    text-align: center;}
.register_form .form-control, .login_area .form-control{   color: #fff; background-color: #000;    border: 0px solid #000;      font-size: 12pt;}
.login_area .input-group-prepend .form-control{ font-size: 11pt;}

.register_form .form-control::placeholder, .login_area .form-control::placeholder{ /* CSS 3 標準 */  color: #b9b9b9;}
.register_form .form-control::-webkit-input-placeholder, .login_area .form-control::-webkit-input-placeholder { /* Chrome, Safari */  color: #b9b9b9;}
.register_form .form-control:-ms-input-placeholder, .login_area .form-control:-ms-input-placeholder { /* IE 10+ */  color: #b9b9b9;}
.register_form .form-control::-moz-placeholder, .login_area .form-control::-moz-placeholder { /* Firefox 19+ */  color: #b9b9b9;  opacity: 1;}
.register_form .input-group-prepend .form-control, .login_area .input-group-prepend .form-control{letter-spacing: 0px;}
.register_form .error-text {   color: #ffc107;       font-size: 0.9rem;      margin-top: 5px;    }
.register_form .error-text span{ color: #ff6600; }
#show_download_APP .modal-body{        text-align: center;    width: 90%;    margin: auto;
    font-size: 17pt;    flex-wrap: wrap;    line-height: 1.7;    padding: 40px 0;    display: grid;10px }
#show_download_APP	.btn-orange{     border-radius: 50px;    font-weight: bold;    margin: auto;    padding: 5px 25px;}
#show_download_APP .modal-body img{margin: auto;width: 200px;}
#show_userTerms .declare-box, #show_gameRules .declare-box, #show_privacyPolicy .declare-box, #show_memberTerms .declare-box{ margin-bottom: 0; color: #fff}
.register_form input:-webkit-autofill,
.register_form input:-webkit-autofill:hover,
.register_form input:-webkit-autofill:focus,
.register_form input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #000 inset !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
}
@media (max-width: 768px){
	.register_area, .register_form, .register_hintBox{ width: 90%;}
	.register_goldBtn{ width: 100%;}
}
@media (max-width: 540px) {
	.register_declare_list li{ grid-template-columns: 40px 1fr 60px;     gap: 6px;}
	.rule_txtInfo{ font-size: 16pt;}
	.rule_checkbox_img{     width: 30px;}
	.rule_tick_img{ width: 45px;}
	.register_formSet_topBg-2{padding: 0 15px; width: 280px; font-size: 13pt; padding: 0 25px;}
	.register_formSet_topBg-2:before{ width: 0px; height: 0px;  /*right: 105px;    width: 80px;	background-size: 20px;	top: 7px;*/}
	.register_formSet_topBg-2:after{  width: 0px; height: 0px;/*left: 105px;    width: 80px; background-size: 20px;	top: 7px;*/ }
	ul.register_formSet{ width: 100%; padding: 5%;}
	.register_formSet li{ font-size: 14pt;}
	.register_area_top{font-size: 16pt;}
	.register_rule_btn, .register_goldBtn, .register_yellowBtn{ font-size: 13pt;}
	.register_rule_btn{min-width:auto;}
	.register_form .form-control, .login_area .form-control{ font-size: 11pt;}
	.register_foot_btnBox{    flex-wrap: wrap;}
	.register_foot_btnBox a, .login_btn_group a{ width: 92%; margin: 0 0 15px;}

 .register_form .loginIcon_group{ width:auto; margin: 25px 0 0;}
.register_form .loginIcon_fb, .register_form .loginIcon_line, .register_form .loginIcon_google, .register_form .loginIcon_apple{scale:80%;}
.login_btn_group{flex-direction: column;    align-items: center;}

}

.topUp_review{/*儲值-等待審核*/
background: #f0f0f0 url(../images/topUp-bg.jpg) center center no-repeat fixed;
    -moz-background-size: cover;    background-size: cover; 
	display: flex;    width: 100%;    height: 100%;justify-content: center;    align-items: center; font-size:19px; color:#900; font-weight:bold}
	
.loginIcon_google ifram.haAclf{ width:100%!important}
/**過渡頁**/
    
.turnPage_box{
	background:#f0f0f0 url(../images/turnPage_bg.jpg) center center no-repeat fixed;
    -moz-background-size: cover;    background-size: cover; 
	display: flex;    width: 100%;    height: 100%;justify-content: center;  }
.turn_apple{ display:none}
.turn_apple_loading{ position:relative; display:flex;     justify-content: center;
    align-items: center;}
.turn_google{
	position:absolute; left:0; right:0; top:0;
	bottom:0; width:350px; height:80px;	margin: auto;
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(0px 6px 2px rgba(0, 0, 0, 0.7));

}
.turn_google .nsm7Bb-HzV7m-LgbsSe{ 
height:80px; font-size:16px;     border-radius: 50px ; padding:0 20px;transition: background-image .5s,transform .5s; }
.turn_google .nsm7Bb-HzV7m-LgbsSe:hover{transform:translateY(-10%);}
.turn_google .nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c{ 
width:25px; height: 25px;    min-width: 25px;}
.turn_google .nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-BPrWId{    font-weight: 800;}


@media (max-width: 800px) {
.login_area{ width:90%;    padding: 45px 6%;}	
	}

@media (max-width: 540px) {
	
h3{ font-size:17px}

.loginIcon_group{ width:250px; margin: auto;}
.loginIcon{margin: 15px 5px;}
.loginIcon_fb, .loginIcon_line, .loginIcon_google, .loginIcon_apple{scale:95%;}
.form_btn, .btn-blue{ font-size:15px}
.turn_google{ width:90%}

	}
@media (max-width: 320px) {
	.loginIcon_group{ width:200px}
	.loginIcon_fb, .loginIcon_line, .loginIcon_google, .loginIcon_apple{scale:80%;}
	.loginIcon{    margin: 15px 0px;}}