/*scrollbar優化*/
::-webkit-scrollbar { width: 0px;} 
::-webkit-scrollbar-track { background-color: rgba(255, 255, 255, 0); height:5px;} /* 滑軌背景色 */
::-webkit-scrollbar-thumb { background-color: rgba(236,132,41,0);} /* 滑塊顏色 */
::-webkit-scrollbar-button { background-color: rgba(0,0,0,0); height: 10px;} /* 滑軌兩頭監聽按鈕色 */
::-webkit-scrollbar-corner { background-color: black;} /* 橫向滾動條和縱向滾動條相交處尖角的顏色*/


@font-face {
  font-family: 'Huninn';
  src: url('Huninn-Regular.ttf') format("truetype");
  font-style: normal;
  font-weight: 400;
}

header{ background-color:#ffffff;}
body,.bg-light{  
  font-family: "Huninn", Noto Sans TC, sans-serif; background-color: #e5e5e5 !important;
}
.test::placeholder,::placeholder {
color: #2196f3;
}

/*動態*/
div,p{transition: all 0.125s linear;}

a { color:#ee831b;text-decoration: none; }

footer {
  background-color: #252525;
}
footer a, footer a:hover, .list-unstyled.text-white a, .list-unstyled.text-white a:hover {
  color: #c7c7c7;
}
.orange {
    background-color: #ee831b;
    color: aliceblue;
    padding: .3rem .8rem;
    margin: 0 1rem 0 -3rem;
    display: inline-block;
    font-weight: 400;
}
.d-flex .text-muted {
  font-size: 0.6em;
  letter-spacing: 2rem;
}
.gamebox {
    border-radius: 1.5rem;
    padding: 2rem;
    background-color: white;
    transform: translateY(-2.5rem);
    margin-bottom: 1rem;
}
.card-body p {
  margin-bottom: 0rem;
	color: #4d4d4d;
}
.mb-1 small {
  color: darkgray;
}
.card {
  border-radius: 0rem;
}
.card:hover{
    box-shadow: 6px 6px #87878726;
    cursor: pointer;
    transform: translateY(-10px);
}
.card a{color: darkgray;}
.content{
  margin: 0 auto;
}
/*回報表單 button*/
textarea.form-control.rewards{ min-height: 200px;}

.modal-footer{
	border: none;
	padding: 1rem 1rem;
	background-color: #f3f7f9;
}
/*search*/
.searchb{
	padding: 2rem;
	background-color: #f7f7f7;
}
.btn-group-vertical .btn-primary{
	background-color: #ee831b;
	border-color: #ee831b;
}
/*qa*/
.nav-tabs {
	position: absolute;
	transform: translateY(-2rem);
}
.nav-tabs .nav-link{
	background-color: #e7e7e7;
	color: #9b9b9b;
}
.accordion-button .mark, .accordion-button mark, .accordion-body .mark, .accordion-body mark {
  padding: .4em .6em;
  background-color: #ee831b;
  color: aliceblue;
  margin-right: .5rem;
}
.accordion-body .mark, .accordion-body mark {
	background-color: #cdcdcd;
	padding: .4em .6em;
	display: none;
}
.accordion-button:not(.collapsed) {
	color: #ffffff;
	background-color: #ec8429;
}
.accordion-body {
  background-color: #f7f7f7;
	padding: 1rem 1.7rem;
	color: #535353;
}
.accordion-button:focus {
  box-shadow: none;
}
.accordion-button {
  color: #555555;
}
.nav-item{ margin-right: 3px;}
/*svg*/
.accordion-button::after,.accordion-button:not(.collapsed)::after{ 
	background-image: url("../images/caret-down-fill.svg");
	opacity: .5;
}
.exclamation{ 
	background: url(../images/exclamation.svg) no-repeat;
	width: 10px;
	height: 20px;
	display: inline-block;
	margin: 0px 3px 0 0;
}

/*常見問題下小按鈕*/
.ot_Games{ height: 17.5rem; }
.ot_Games .card{ 
	width: 11.5%;
	text-align: center;
	float: left;
	margin: .5%;
	font-size: small;
	border-radius: 0rem;
}
.ot_Games .card .card-body{
	padding: .5rem 1rem;
}
.ot_Games h6{
    color: #ffffff;
    margin: 2rem 0 .5rem;
    background-color: #bb7d5b;
    width: fit-content;
    padding: .3rem .6rem .1rem;
    border-radius: .8rem 0rem .8rem 0rem;
}

/*問題回報*/
.blockquote-footer {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}
.alert.alert-secondary{
	padding: 20px;
}
.form-check .mark,.form-check mark {
    padding: .4em;
    background-color: #ffffff00;
    color: #dc3545;
}
.form-check-input:checked {
    background-color: #ec8429;
    border-color: #ec8429;
}
.form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin-top: 3px;
}
.form-control {
    background-color: #fbfbfb;
    border: 1px solid #9595956b;
    border-radius: 0;
}
.modal-body .form-control{font-size: .8rem;}
.h5.box{
    background-color: #ee831b;
    padding: .3rem .6rem .2rem;
    color: #ffffff;
    display: table;
    border-radius: .8rem 0rem .8rem 0rem;
}
.h5.box small{
    font-size: medium;
    letter-spacing: 0px;
    top: -2px;
    position: relative;
}
.form-label,.form-group label{
    margin-bottom: 0rem;
    background-color: #898989;
    padding: .1rem 0.4rem .2rem;
    color: aliceblue;
    letter-spacing: 1px;
}
.blockquote-footer::before {
    content: unset;
}

.loginicon{
    float: left;
    width: 100%;
    margin-bottom: .4rem;
}

.fb,.gle{	
	margin: 3% 4% 3% 0;
	width: 2rem;
	height: 2rem;
	float: left;
}
.fb{ 
	background: url(../images/icon_fb.png) no-repeat top right; 
	background-size: cover; 
}
.gle{
	background: url(../images/icon_gle.png) no-repeat top right; 
	background-size: cover; 
}

#fb h5{
	text-align: center;
    color: #959595;
}
.input-group-text {
	border-radius: unset;
	background-color: #898989;
	padding: .3rem .4rem;
	color: aliceblue;
	font-size: 1rem;
}
.check{margin: .4rem 0;}
.col-sm .form-control{width: 4rem;}

/*上傳檔案*/
.btn-outline-secondary {
    color: #ffffff;
    border-color: #ffa454;
    background: #ffa454;
}
.alert-secondary {
    color: #454545;
    background-color: #f1f1f1;
    border-color: #95959500;
}
/*btn*/
.sendbtn{
    display: inline-block;
    position: relative;
    max-width: 160px;
    border: none;
    border-radius: 4px;
    background-color: #ec8429;
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: transformease-in 0.1s, box-shadowease-in 0.25s;
    padding: 10px 20px;
}
#accordionFlushExample .sendbtn{
    margin: 1rem auto;
}
.btn-case{
    color: #ffffff;
    background-color: #ee831b;
    border-color: #ffffff00;
    box-shadow: 0px 4px 0px 0px #ffc9a0;
    border-radius: .5rem;
}
.sendbtn:hover,.btn-case:hover{
    color: #ffffff;
    background-color: #e60074;
    box-shadow: 0px 4px 0px 0px #ff00805c;
}
.sendbtn:active,.btn-case:active {
		color: #ffffff;
    transform: scale(0.9);
    background-color: #e60074;
    box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}

#ais .sendbtn,
#ais .sendbtn:focus,
#ais .sendbtn:hover{
	margin: .5rem;
}

.sendbtn:before,
.sendbtn:after {
    content: "";
    display: block;
    position: absolute;
    width: 140%;
    height: 100%;
    left: -20%;
    z-index: -1000;
    transition: all ease-in-out 0.5s;
    background-repeat: no-repeat;
}
.sendbtn:before {
    display: none;
    top: -75%;
    background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
.sendbtn:after {
    display: none;
    bottom: -75%;
    background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
.sendbtn:active {
    transform: scale(0.9);
    background-color: #e60074;
    box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
.sendbtn:active:before {
    display: block;
    animation: anim-top ease-in-out 0.75s forwards;
}
.sendbtn:active:after {
    display: block;
    animation: anim-bottom ease-in-out 0.75s forwards;
}
@keyframes anim-top {
    0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
    }
    50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
    }
    100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}
@keyframes anim-bottom {
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
    }
    50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
    }
    100% {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}
/******************************** nav ********************************/
.fixed{
	right: 2rem;
	bottom: 7rem;
	position: fixed;
	cursor: pointer;
}
.navpre {
	width: 9rem;
	height: 11rem;
	background: url(../images/moqa.png) no-repeat top center;
	background-size: contain;
	cursor: pointer;
	margin: .2rem 0 0;
}
.navpre:hover{ transform: scale(1.1);
}
/******************************** 重要通知&切換帳號 ********************************/

.important,.chaccount {
	width: 9rem;
	height: 2.4rem;
	background: url(../images/icon_important.png) no-repeat top center;
	background-size: contain;
}
.chaccount {
	background: url(../images/icon_account.png) no-repeat top center;
	background-size: contain;
}
.important:hover,.chaccount:hover{ transform: scale(1.05);}

/******************************** lightbox ********************************/
#serialmyModal_mimi,#serialmyModal_917,#serialmyModal_mobile{ margin: 1% 0;}
.form-group {
    /*background-color: #fff0;
    margin-bottom: 5px;*/
}
.modal-backdrop.in {
    filter: alpha(opacity=75);
    opacity: .8;
}
.modal-content {
	box-shadow: 0 5px 20px rgba(0, 0, 0, .5);
	border-radius: 0;
	border: none;
}
#serialmyModal_mimi .modal-content,
#serialmyModal_ddt .modal-content,
#serialmyModal_917 .modal-content,
#serialmyModal_mobile .modal-content {
    position: relative;
    background-color: #fff0;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 0px solid #999;
    border: 0px solid rgba(0,0,0,.2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0);
    box-shadow: 0 3px 9px rgba(0,0,0,0);
}
/*.modal-header {
    border-bottom: 0px solid #e5e5e5;
}*/
#serialmyModal_mimi .btn-close,
#serialmyModal_ddt .btn-close,
#serialmyModal_917 .btn-close,
#serialmyModal_mobile .btn-close,
.qa.modal-header .btn-close { 
    background: url(../images/close.png) no-repeat bottom;
    background-size: 100%;
    width: 45px;
    height: 44px;
    top: -10px;
    right: -20px;
    opacity: 1;
    z-index: 9999;
    position: absolute;
}
.qa.modal-header .btn-close{
	right: 1rem;
  top: 1rem;
}
.serialbox00 .form-control,.serialbox01 .form-control,.serialbox02 .form-control,.serialbox03 .form-control{
    position: relative;
    border-radius: 0;
    padding: 1px 7px 0;
    font-family: 'Microsoft JhengHei', 微軟正黑體;
    color: #a5a199;
    border: 1px solid #7575755e;
		border: 0px solid #7575755e;
		margin-bottom: 0px; 
		font-size: 1rem;
}

.serialbox01,.serialbox02,.serialbox03{
    width: 370px;
    position: relative;
    margin: 0 auto;
    padding: 270px 0 0;
}
.serialbox01{
    background: url(../images/login_mimi.png) no-repeat bottom;
    background-size: 100%;
}
.serialbox02{
    background: url(../images/login_917.png) no-repeat bottom;
    background-size: 100%;
}
.serialbox03{
    background: url(../images/login_mobile.png) no-repeat bottom;
    background-size: 100%;
}
.serialboxbg{
    width: 370px;
    left: 0;
    position: absolute;
}
.login{ 
	width: 370px;
	border: 14px solid #e6e6e6;
	background-color: #d3d3d3;
	margin: 0 auto;
	position: absolute;
	padding: 1rem 1rem .5rem;
	top: -1px;
}
.form-check-label,.mb-2 a {
	display: inline-block;
	color: #717171 !important;
	font-size: .9rem;
}
.col-6 .sendbtn{
    margin: .5rem auto;
    float: left;
    padding: 6px 16px;
}
.input-group-append {
  cursor: pointer;
}
.table>:not(caption)>*>* { 
	border: none;
}
.table>:not(:last-child)>:last-child>* {
    font-weight: 500;
}
.table-dark{
    color: #ffc927;
    letter-spacing: 5px;
    font-size: 1.25rem;
    font-weight: 300;
}
th,td{
    height: 40px;
    line-height: 40px;
}
td .btn-info {
    color: #ffffff;
}
fieldset{ display: flex;}
fieldset .pr-8{padding-right: 8px;}
/*6個月查詢*/
.alert {
    position: relative;
    margin-bottom: 0rem;
    border: 0;
    border-radius: 0;
		padding:0;
}
.table{
	vertical-align: middle;
	text-align: center;
}
/*///////////////留言回報///////////////*/
.messageb{ padding: 1.4rem;font-family: system-ui;}
.messageb textarea{ 
	max-height: 100px;
	min-height: 100px;
}
.casenb{font-family: system-ui;}
.toast {
	box-shadow: .2rem .3rem .2rem rgba(0, 0, 0, .05);
	border: none;
	width: 100%;
}
.toast small,.toast .me-auto{font-weight: 500;}
.member{ background-color: #eaf2ff;}
.service{ background-color: #ffe0cb;}
.qa.modal-header{ padding: 0; border-bottom: none;}
.modal-body{ 
	background-color: #e9e9e9;
	padding: 1rem;
	max-height: 19rem;
	font-family: system-ui;
	color: #494949;
	width: 99.8%;
}
#account_issues .modal-body,#atcase .modal-body{
	padding: 1.3rem 1.4rem;
	max-height: fit-content;
}
.svq,.sva {
	background: url(../images/icon_report-a.png) no-repeat center #ee831b;
	background-size: contain;
	width: 3rem;
	height: 2.8rem;

}
.svq{
	background: url(../images/icon_report-q.png) no-repeat center #3394ff;
	background-size: contain;
}

#pbreport .modal-body,#im_notice .modal-body{
	min-height:auto;
	color: #616161;
}
/*選擇遊戲*/
#gamechoice .modal-body{
    max-height: 16.4rem;
    min-height: 16.4rem;
}
#gamechoice .form-check-label{   
    color: #373737;
    font-size: 1rem;
    line-height: 1.9;
}
#gamechoice .form-check-input{
    width: 1.4em;
    height: 1.4em;
    margin-right: 4px;
}

/*提式框*/
.tooltip .tooltip-inner {
    text-align: center; /* 內文靠左，預設置中 */ 
    background-color: #f08200; /* 背景顏色 */
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before{
	border-top-color: #f08200;
}
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .bs-tooltip-bottom .tooltip-arrow::before {

    border-bottom-color: #f08200;
}
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .bs-tooltip-end .tooltip-arrow::before{
	right: 0px;
	top: -9px;
	border-width: .4rem .4rem .4rem 0;
	border-right-color: #f08200;
}
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .bs-tooltip-start .tooltip-arrow::before{
    border-right-color: #f08200;
    border-left-color: #f08200;
    left: -1px;
    top: -9px;
}
.icon_editor{
	margin: .4rem 0;
}
.icon_editor .tle{
	padding: 0 0 0 .5%;
	color: #d07d3f;
	font-size: 1.45rem;
	top: .8rem;
	position: relative;
	font-weight: 500;
}
/*rwd*/
@media screen and (max-width: 576px){

.rit{    
	right: 0;
	position: absolute;
	margin-right: .8rem;
}		
.row-cols-1>* { width: 50%;}
.orange{ margin: 0; font-size: 1.2rem;}
.d-flex .text-muted{letter-spacing: .2rem;}	
.gamebox{
	max-width: 100%;
	transform: translateY(0rem);
	border-radius: 0rem;
	border: 0;
}

.nav-tabs {
    transform: translateY(-1.9rem);
}	
.nav-tabs .nav-link {
	font-size: .9rem;
	padding: .5rem .3rem;
	border: none;
}
/*.row .col-12{
    padding: 0;
	}*/
.accordion-flush .accordion-item .accordion-button{
	padding: .8rem;
	font-size: .9rem;	
	}
.accordion-body {
    font-size: .9rem;
}	
.serialbox01, .serialbox02, .serialbox03{
	width: 100%;
	height: auto;
	background-size: contain;
}
.float-end {float: unset !important;}
.container.py-4 {padding: 0 1.5rem;}
.container.py-4 .mb-1{width: 70%;}
.fixed{
	transform: scale(.73);
  right: 0;
  bottom: 0;
}
#ais .sendbtn{
    margin: .5rem;
    font-size: 1rem;
    padding: .6rem .8rem;
	}
.ot_Games .card {	width: 24%;}	
.serialboxbg{ width: 100%;}
.login{
	width: 89.2%;
	margin: 0 auto;
	position: relative;
	}	
.icon_editor .tle{font-size: 1.1rem;}
.modal-content{ transform: scale(.96);}
.report.tle{
	float: right;
	width: 74%;
	line-height: 1.4rem;
	font-size: 1rem;
	}
.col-sm .form-control,.input-group .form-control{
    width: 8rem;
}
.input-group.casenb .form-control,.input-group.casenb .form-control{
		width: 4rem;
	}
.table-dark{
	font-size: 1rem;
	letter-spacing: 0px;
	}
th, td {
	height: 20px;
	line-height: 20px;
	font-size: .84rem;
}
.table>:not(caption)>*>*{
	padding: .3rem;
	white-space: nowrap;
	}
.btn.btn-case{
font-size: .86rem;	
border-radius: .3rem;	
	}	
.svb {
width: 40px;
height: 40px;	
	}
.toast {width: auto;}
	
#serialmyModal_mimi .btn-close, #serialmyModal_917 .btn-close, 
#serialmyModal_mobile .btn-close, .qa.modal-header .btn-close, #serialmyModal_ddt .btn-close {
    right: 0rem;
}
}