body,h1, h2, h3, h4, h5, h6, p ,.sky-form .checkbox {font-family: Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft JhengHei", "WenQuanYi Micro Hei", sans-serif !important;}

body.login-bg {
  display: flex; /*使物件依序排列*/
  flex-direction: column; /*使物件垂直排列*/
}
.wrapper {
  flex-grow: 1; /*可佔滿垂直剩餘的空間*/
}

body.loginAdmin-bg {
    display: flex; /*使物件依序排列*/
    flex-direction: column; /*使物件垂直排列*/
}

.mainbg{background-color: #fdf4e3; background-image: url(../images/content-bg.png); background-repeat: no-repeat; background-size: auto; padding-top:10rem;}

header {padding:0.7rem 0rem 1rem 0rem;
    position:-webkit-sticky;
    position:sticky;
    top:0px;
    z-index: 999;
    background-color: #fff;
}
.navbar { padding: 0;}

.navbar .navbar-brand{padding-top:5px;}

.navbar-nav li.nav-item{background-color: #796a55; color:#fff; margin-left:1rem;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; text-align: left;}

.navbar-nav li.nav-item:after{     content: ""; position: absolute;
    margin-top: -48px; margin-left: 5px;height: 53px;
    background: #000;
    opacity: 0.8;
    display: block;
    z-index: -1;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.navbar-nav li.nav-item.i1:after{width: 135px; }
.navbar-nav li.nav-item.i2:after{width: 161px; }
.navbar-nav li.nav-item.i3:after{width: 112px; }
.navbar-nav li.nav-item.i4:after{width: 183px; }
.navbar-nav li.nav-item.i5:after{width: 139px; }
.navbar-nav li.nav-item.i6:after{width: 139px; }

.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .active>.nav-link {font-size: 1.3rem;letter-spacing: 0px;margin: 0 4px;}
.navbar-light .navbar-nav .nav-link {transition: all 0.3s ease-in-out;-webkit-trasition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;}
.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link:hover { color: #fff;}
.navbar-light .navbar-nav li.nav-item.active:hover .nav-link{ opacity: 0.7; }
.navbar-light .navbar-nav .nav-link {  color: #fbc93d; letter-spacing: 1px; font-weight: 500;}
.navbar-expand-lg .navbar-nav { text-align: right; width: 100%;}

.txtbg{position:absolute; text-align: center; z-index: 1;}
.index-per{position:absolute; z-index:111;}
.index-bg{position:relative; z-index:11;}
.tit-1{position: absolute; z-index: 112; height:100%;text-align: center;}
.tit-1 h1{top: 7.5rem;position: relative; font-size:4rem; color:#fbc93d; font-weight: 600;}

.tit-2 {text-align: center;}
.tit-2 h2{ font-size:1.9rem; color:#fbc93d; font-weight: 600; position: relative; z-index: 10; }
.tit-2:after{
    content: "";
    position: absolute;
    background-image: url(../images/banner-txtbg.png);
    width:180px;
    height: 150px;
    z-index:1;
    margin-top:-7.2rem;
    margin-left:-5.8rem;
    background-size: cover;
    }
.tit-2.doub:after{margin-top:-7.8rem;}

.right { float: right;}
.center { text-align: center;}
.bt { margin: 20px 0;}
.mg-lr {margin: 0 5px;}
.mg0 { margin: 0px;}
.menu { margin: 20px 0;}
.menu .center{ display: inline-block; margin: 0 30px;}
.btn-primary {
    color: #fff;
    background-color: #e67e22;
    border-color: #e67e22;
    margin: 5px;
}
.btn-primary:hover {
    color: #fff;
    background-color: #c86710;
    border-color: #aa550b;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #e67e22;
    border-color: #ffac63;
}
.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(230,126,34,.5);
}
.page-img {
    max-width: 100%;
}
hr {
    margin: 40px 0;
}
.content-box {
    padding: 50px 40px;
    border: 0px solid #e67e22;
    margin: 0 auto;
}
.content-box h3 {
    color: #e67e22;
}
.custom-file-label::after { display: none;}

div.footer {
    background: #fdf4e3;
    margin: 0px 0 0;
    background-image: url(../images/content-bg-bottom.png); background-repeat: no-repeat; background-size: auto;
    background-position: 0% 100%;
    height:210px;
}
.footer-loginAdmin {
    background: #efefef;
    margin: 10px 0 0;
    position: absolute;
    width: 100%;
    bottom: 0;
}

footer p {
    margin: 0;
}
table th { width: 25%;}
thead { background: #e67e22;    color: #ffffff;}
.table thead th { border: 1px solid #999;}
.qa tbody, .qa th, .qa td {
    border:1px solid #999;
}
.qa ol, .qa ul {
    margin: 20px 0;
}
.form-signin {
    width: 100%;
    max-width: 500px;
    padding: 15px;
    margin: auto;
    margin: 30px auto;
}
.form-signin-box {
    background: rgba(0,0,0,0.5);
    padding: 20px;
    border-radius: 20px;
    margin-bottom:10px;
}
.form-signin h2, .form-signin h3 ,.form-signin p , .form-signin label {
    color: #ffffff !important;
}
.form-signin p , .form-signin label {
    font-size: 20px;
}
.form-label-group {
    margin: 10px 0;
}
.login-bg {
    background: url(../images/login.jpeg) no-repeat center center fixed;
    height: 100vh;
    position: relative;
    z-index: 1;
}
.loginAdmin-bg {
    background: url(../images/loginAdmin.jpg) no-repeat center center fixed;
    height: 100vh;
    position: relative;
    z-index: 1;
}
.modal-body p {
    color: #000;
}

.material-icons {
    top: 4px;
    position: relative;
}
.banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #c6e3f2;
}
.banner-bt {
    position: absolute;
    right: 15%;
    bottom: 60px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
}
.bt-font {
    font-size: 27px;
}
.mg-top5 { margin: 5px 0;}
.mg-top20 { margin: 20px 0 0 0;}
.mg-top30 { margin: 30px 0 0 0;}


/*mark add*/
/*.navbar-expand-lg .navbar-nav{margin:0 auto;}*/
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:focus { box-shadow: 0 0 0 0.2rem rgba(255,63,17,0.8);}
a.navbar-brand, .navbar-light .navbar-nav .nav-link{border:2px dashed transparent;}
a {  color: #796a55;}
a:hover { color: #fbc93d;}
.navbar-light .navbar-nav .nav-link:focus{border:2px dashed #e67e22; }
.qa_h4{width:100%; background-color: #e67e22; color:#fff; padding:10px 15px; font-weight: 700; font-size:1.4rem;}
h4.panel-title{font-size:1.2rem; padding:0.4rem 1rem; background-color: #f3f3f3;}
.panel-heading a { display: block; text-decoration-line:none; color:#e67e22; border:2px dashed transparent; padding:5px; font-weight:600;}
.panel-heading a:hover {color:#555;}
.panel-heading a:focus, .block-grid-v2-info h4 a:focus,a.navbar-brand:focus {border:2px dashed #e67e22; }
.panel-body {padding:1rem 2rem; line-height:1.8rem;}
.sm-margin-bottom-20{margin-bottom:20px;}
.sm-margin-bottom-20:hover .block-grid-v2-info.rounded-bottom{border-bottom:3px solid #e67e22;}
.block-grid-v2-info h4{ font-size:1.3rem; line-height:1.85rem;}
.block-grid-v2-info h4 a{color:#e67e22; text-decoration:none;}
.block-grid-v2-info h4 a:hover{color:#ccc;}
.block-grid-v2-info p{text-align: left;}

.table-light tbody+tbody, .table-light td, .table-light th, .table-light thead th { border-color: #eee; border-left: solid 1px #eee;}

footer {background-color: #eee;}
/*footer.login_page{    position: absolute; width: 100%; bottom: 0;}*/
footer .add{font-size:0.9rem;padding:0.8rem 0; line-height:1.9rem;}

.fname {font-size:1.4rem; font-weight: 500;}
.fname span{font-size:0.9rem;display: block;}
footer .copyright{background-color: #222; text-align: center; color:#fff; padding:0.5rem 0;}
/*mark end*/
@media (max-width:2500px) {
/*footer.login_page{    position: relative; width: 100%; bottom: 0;}*/
.txtbg{position:absolute; text-align: center; z-index: 1;left:50%;top:50%; transform: translate(-50%,-50%)}
}

@media (max-width:1280px) {
.banner{text-align: center;}
.txtbg{position:absolute; text-align: center; z-index: 1;width:300px !important;left:50%;top:50%; transform: translate(-50%,-50%)}
.txtbg .res_img{width:100%;}
.tit-1 h1{top: 50%;position: relative; font-size:2rem; color:#fbc93d; font-weight: 600; transform: translate(0%,-50%)}
.nav-item a i{display: none;}
}

@media (min-width: 1200px){
.container.nav_box { max-width: 1366px;}
}

@media (min-width:991px) and (max-width: 1200px){
.navbar-expand-lg .navbar-nav .nav-link { padding-right: .25rem; padding-left: .25rem;}
}

@media (max-width:991px) {
header .container{    padding-right: 0px;    padding-left: 0px;}
.tit-1 h1{font-size:1.6rem;}
button:focus {outline-color: #fbc93d;}
.tit-1 h1, .tit-2 h2{font-weight: 500;}
.navbar { justify-content: space-between; padding:0.5rem;}
.navbar .navbar-brand{ width: 275px;}
.nav_logo img{width:255px; margin-top:5px;}
.navbar-nav li.nav-item{margin:0.2rem 0; text-align: left;}
.navbar-nav li.nav-item:after{ opacity: 0;  display: none;}
.navbar-light .navbar-toggler { background-color: #796a55; color:#fbc93d;}
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.content-box {  padding: 30px 15px; }
.menu .center { margin: 0 10px; }
.bt { margin: 10px 0; }
.banner-bt { bottom: -20px; }
.bt-font { font-size: inherit; }
.footer-loginAdmin {   position: relative; }
.add .row{padding:0px 1rem;}
}