:root{
    --txt-color1:#F5F5F5;/*白*/
    --txt-color2:#FFE971;/*黃*/
    --border-color1: rgba(201, 146, 94, 0.7);
    --border-color2: rgba(201, 146, 94, 0.5);
    --block-bg1:#4D2F1E;
    --block-bg2:#1a100a;
    --active-bg1:rgba(201, 146, 94, 0.5);
    --active-bg2:rgba(201, 146, 94, 1);
    --footer-height:67px;
    --header-height:45px;
}
html,body{
	color:var(--txt-color1);
	font-size: 16px;
	font-family: "Helvetica", "Arial","LiHei Pro","微軟正黑體","Noto Sans TC", sans-serif;
	height:100%;
	margin: 0;
	padding: 0;
	background-color:#000;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color:transparent;
}
a:link,a:visited{
	color:var(--txt-color1);
	text-decoration:none;
}
a:hover,a:active{
	color:var(--txt-color2);
	text-decoration:none;
}
/* .wrap -> .main -> .header */
.header{
    box-shadow:0 0 0 1px var(--border-color2) inset;
	background-color:#2e0502;
    background-image: url('img/header_bg.jpg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size:100% 100%;
    height:var(--header-height);
     position: relative;
}
.header-title{
    position: absolute;
    top:2px;
    height:calc(100% - 2px);
    width:100%;
    pointer-events: none;
    font-size: 20px;
    font-weight:bolder;
    color:var(--txt-color2);
}
.header .btns{
   height:28px;   
    cursor: pointer; 
    
}
.header .btnlogo{
    padding:3%; 
    height:100%;
    cursor: pointer; 
}
.header .btns.adjust{
    margin-right:3px;
    margin-top:9px;  
}
.header .btnlogo:hover{
    filter: brightness(115%);
}
.header .btns:active,.header .btns:hover{
    filter: brightness(130%);
}
.header .dropdown-menu-dark{
	background-color:var(--block-bg2);
    border-radius:10px;
    box-shadow: 0px 0px 0px 1px  var(--border-color2) inset ;
}
.header .dropdown-menu-dark a:hover {
    background-color:var(--active-bg1);
}
.header .dropdown-menu-dark a:visited,
.header .dropdown-menu-dark a:active {
	background-color:var(--active-bg2);
}
.header .dropdown-menu.adjust{
    margin:15px 1px !important;
    min-width:150px !important;
}
.header .dropdown-divider{	
    border: 0;
    height:1px;
    background-color:var(--border-color2) ;
}
.header .dropdown-menu {
      display: block;
      visibility: hidden;
      right: 0;
      top:  -100px;
      opacity: 0.1;
      transition: 0.2s;
}
 .header .dropdown-menu.show {
    visibility: visible;
    top:50px;
    opacity: 1;
    transition: 0.25s;
}


.wrap{
    min-height: 100%;/*置底用*/
    
    background-image: url('img/bg.jpg');
    background-repeat: no-repeat;
    background-position: 100% var(--header-height);
    background-size:auto calc(100% - var(--footer-height) - var(--header-height));    
    background-attachment: fixed;
}
.wrap .main{
	padding-bottom:var(--footer-height);/*置底的高*/
}

/* .wrap -> .footer */
.footer{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    height:var(--footer-height);/*置底的高*/ 
    z-index:9999;
    visibility:visible;
    box-shadow:0 0 0 1px var(--border-color2) inset;
	background-color:var(--block-bg2);
    background-image: url('img/footer_bg.jpg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size:100% 100%;
}

.nav_items{
    opacity: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size:contain;    
    filter: brightness(1000%);
    cursor: pointer; 
}
.nav_items:hover, .nav_items_onselect{
    opacity: 1;
    filter: brightness(100%);
}

.nav_items[onClick="window.location.href='#';"],
.nav_items[onClick=''],
.nav_items[onClick='#'],
.nav_items:not([onClick]){
     opacity: 0.5;
    filter: brightness(1000%);
}
.yellow_gradient{
    background: -moz-linear-gradient(top,  #FCD758 0%, #DE9E15 100%);
    background: -webkit-linear-gradient(top,  #FCD758 0%,#DE9E15 100%);
    background: linear-gradient(to bottom,  #FCD758 0%,#DE9E15 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCD758', endColorstr='#DE9E15',GradientType=0 );
}

.orange_gradient{
    background: -moz-linear-gradient(top,  #FFA042 0%, #D26900 100%);
    background: -webkit-linear-gradient(top,  #FFA042 0%,#D26900 100%);
    background: linear-gradient(to bottom,  #FFA042 0%,#D26900 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFA042', endColorstr='#D26900',GradientType=0 );
}
.btn{outline:0px;}
.btn:visited.btn:active,.btn:hover{
    outline:0px;
    box-shadow: 0px 0px 0px 4px rgba(252, 214, 90,0.5);
}
.dataArea{max-width:600px;}
.mt_1{margin-top:15px;}
.mt_2{margin-top:30px;}
.mb_1{margin-bottom:15px;}
.mb_2{margin-bottom:30px;}
.pt_1{padding-top:15px;}
.pb_1{padding-bottom:15px;}

@media screen and (max-width: 992px) {

    .wrap{
        background-position: 0% var(--header-height);
    }
} 
/*@media  screen and (max-height: 450px){
    .wrap{
        background-size:auto calc(100%  - var(--header-height));    
    }
    .wrap .main{
        padding-bottom:0;
    }
    .footer{    
        visibility:hidden;
    }
}*/
/*錯誤訊息相關*/
.data--hide{visibility:hidden;position: absolute;top: -9999px;}
.data--show{visibility:visible;position: unset;top: unset;}
.data-error .card{--bs-card-bg:rbga(0,0,0,0);--bs-border-color-translucent:rbga(0,0,0,0);--bs-card-spacer-y:8px;}.data-error .card-title{color:#FFAC00;font-weight:bold;}.data-error .card-img-top{width: 140px;}
/*小紅點提示*/
.badge{
    position: relative;
}
.badge::after {
    content: " ";
    position: absolute;
    top: 0px;
    right: 5px;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    background:linear-gradient(#FF9797,#E00000 80%);
    box-shadow:inset 1px -1.5px 6px #CE0000;
} 
.dropdown #dropdownMenuLink .badge{ padding:0;margin:0;top: -14px;right:1px;}
.dropdown-menu>li .badge{ padding:0;margin:0;top: -18px;right:-5px;}