/*調整修改用CSS*/
html{
    overflow-x:hidden;
    /*overflow-y:overlay;*/
    overflow-inline: hidden;
}
/*文字*/
/*字體都加在這*/
.h1, .h2 ,.h3, .h4 , #menu,.div_column ,#file ,#text , .btn , .button , .form-control,
 .wrapper h1, .wrapper h2, .wrapper h3, .wrapper h4, .wrapper h5,a,p,#loading-body2-btn,
 .btn-back a::after, .label-right, .label-center,.label-left, .card-header h6,
table tbody, .table>tbody>tr>th, input[type="checkbox"] + label,
.text-green, #footer .copyright, .title {
    font-family:"微軟正黑體",-apple-system,BlinkMacSystemFont,"Segoe UI",
    Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji",
    "Segoe UI Emoji","Segoe UI Symbol" ;
    color:#006666;
 }

 /*大標題*/
 .h1, h1, h1.h4,#banner h1{
    font-size: 30px;
    font-weight: bold;
    color:#193939;

}
h1.title{
    font-size: 72px !important;
    color:#FFFFFF !important;
    text-shadow: 0 0 6px rgba(26,23,23,0.60);
}
.jumbotron-heading{
    margin-bottom: 58PX;
}
.h3, .h4 {
    margin: 0 auto;
    font-weight: bold;
    text-align: center;
}
h1.h3 ,span.h5{
    text-align: center;
}
h4{
    font-size: 21px;
    font-weight: 600;

}
.card-header{
    background-color:#006666;
}
.card-header h6{
    color: #FFF;
    font-size: 21px;
}
/*負值餘額名單提示文字*/
.alert-orange{
    color: #FF8367;
    background-color: #FFF4F1;
    border-color: #FF8367;
}
/*學生電力使用紀錄房號顯示*/
.alert-green{
    background-color: #F0F7F7;
    border: 2px solid;
    border-color: #006666;
}


/*label邊框調整*/
.p-5{
    padding: 3rem 3rem 0px !important;
}
/*label文字*/
.label-font{
    text-align: center;
    font-weight: 900;
    font-size: 16px;
}
#adminlogin, #adminlogin2{
    margin-top: 70px;
}
.user, .lock  {
    position: relative;
    display:inline-block;
    margin:9px 0;
  }
.user:before, .lock:before {
    font-family: "Font Awesome 5 Free"; 
    color:#193939;
    font-weight: 900; 
    content: "\f007";
    font-size: 21px;
    position: absolute;
    left: 7%;
    top: 45%;
    transform: translateY(-50%);
  }
  .user input , .lock input{
    text-indent: 20px;
  }
.lock:before {
    content: "\f13e";
}

/*BTN文字*/
.btn-loginfont, .btn-loginfont2{
    font-size:30px;
    color:#fff;
    height: 80%;
}

.btn-loginfont2:hover{
    color:black;
}
.btn-primary2{
    background-color: #006666;
    border-color: none;
}

.btn-h-auto{
    height:auto;
    padding-left: 0;/*確認更新文字爆版處理*/
    padding-right: 0;
}
/*LOGO 大小*/
.school_image{
    width: 100%;
    height:auto;
}
/*ICON 大小*/

@media (min-width: 768px) {
.sidebar .nav-item .nav-link i {
    font-size: 1rem;
}
.sidebar .nav-item .nav-link span{
    font-size: 1rem;
    color: white;
    font-weight: bolder;
}
.sidebar.toggled .nav-item .nav-link span{
    font-size: unset;
}
}
.chart-size {
    font-size: 9rem;
    color: #58B2DC;
}

/*color*/
.bg-gray{
    background-color: #f8f9fc;
}




/*Login背景*/
/*.bg-gradient-primary{
    background-image:linear-gradient(180deg,#36b9cc 10%,#4e73df 100%)
}*/
.footer-bg{
    background-color: none;
    
}
.copyright span{
    color: #3a3b45;
    font-size: 14px;
}
.modal-footer{
    border-top: unset;
}
/*每頁header color*/
#header{
    background-color:#F6F6F6;
    position: fixed;
    height: auto;
    margin: 0 auto;
}
#header nav a[href="#menu"]{
    color:#006666;
}
.button.alt, .button.alt2{
    background-color:#006666;
    color:#FFFFFF;
    box-shadow:none;
    font-weight: bolder;
}

.button.alt:hover, .button.alt2:hover {
    background-color:#006666;
}
#menu{
    background:#FFFFFF;
    font-size: 21px;
}
#menu > ul.links > li > a:not(.button){
    color:#006666;
    font-weight: bold;
    height:auto;
    line-height: 1.25;
    padding: 1rem 1em;
}
/*每頁id="main"*/
.wrapper{
    padding-top: 3em;
}
/*查詢切換頁BTN*/
.nav-martop{
    margin-top: -49px;
}
.nav-tabs .nav-link{
    background-color: #F0F7F7;
    border: 2px solid #006666;
    border-bottom: none;
}
.nav-tabs .nav-link.active{
    background-color: #FFF;
    border: 2px solid #006666;
    border-bottom: 3px solid #FFF;
}

.nav-tabs .nav-link2.active {
    background-color: rgba(247, 147, 30, 0.7);
}
.nav-tabs .nav-link:hover {
    border: 2px solid #006666;
    background-color: #F0F7F7;
}
hr.view{
    margin-top: -0.1rem;
    margin-bottom: 1rem;
    border-top: 3px solid #006666;
}
a:hover{
    text-decoration: none;
    color:#fff;
    color:#006666;
}
/*icon 超連結文字底線取消*/
a:focus{
    text-decoration: none;
}
.csv-download{
    text-decoration: underline;
    margin-top: 50px;
}
.csv-download a:hover{
    color:#006666;
}
/*查詢切換頁BTN END*/
.border-left-primary{
    border-left: none !important;
}
.password-border{
    border:6px  double #36b9cc;
}
.form-control2{
    border:1.75px solid rgb(150, 150, 150);
}
/*MENU color*/
.bg-menu{
    background-color: #85c8f3;
}
.sidebar-dark hr.sidebar-divider{
    border-top: 1px solid #00458aa1;
}
.sidebar-dark .nav-item .nav-link i{
    color:#00458aa1;
    
}
.sidebar .nav-item .nav-link span , .sidebar-dark .nav-item .nav-link{
    color:#00458a;
}
.sidebar-dark #sidebarToggle::after ,.sidebar-dark.toggled #sidebarToggle::after{
    color: #00458a;

}

/*MENU ICON 滑入顏色*/
.sidebar-dark .nav-item .nav-link:active i,
.sidebar-dark .nav-item .nav-link:focus i,
.sidebar-dark .nav-item .nav-link:hover i{
    color:#00458aa1;

}

#menu .close,
#menu .close:hover{
    color:#006666;
}
.hr-style{
    border-bottom: 2px solid #F0F7F7 ;
    margin: 0;
}
.dropdown-item:active, .dropdown-item:hover{
    background-color:#ffffff;
    color: #2e2f37;
}
.list-group-item{
    border: 2px solid #AEDADA;
}
/*排版*/
.icon-mar, .table-mar , .span-mar, .h1-mar{
    margin-top: 50px;
}
#menu > ul {
    margin: 50px 0 1rem 0;
}
.table-mar, .mar-bot50{
    margin-bottom: 50px;
}
.mar-center2{
    margin-left: auto;
    margin-right: auto;
}
.btn-mar{
    margin-top: 100px;

}

.btn-mar2{
    margin-right: 20px;

}
.btn-martop20{
    margin-top: 20px;

}
.mar-top25{
    margin-top: 25px;
}
.btn-martop30,  .mar-top30{
    margin-top: 30px;

}
.btn-martop216{
    margin-top: 216px;

}
.btn-marbot20{
    margin-bottom: 20px;
}
.btn-marbot10{
    margin-bottom: 10px;
}
.btn-marbot51{
    margin-bottom: 51px;
}
.marbot-208{
    margin-bottom: 208px;

}
/*住宿中心滿版設定*/
.mar-center{
    margin:1em 0 4.55em;
}
/*右上BTN設定*/

.mar-nav{
    margin:-6px auto;
}
.dropdown-divider{
    border-top: 2px solid #F0F7F7;
}
/*.mar-left-right60{
    margin: 0 60px;
}*/

.icon-center{
    text-align: center;
    line-height:2.5;
}
.form-center{
    margin: 0 auto; 
    color: black;
    line-height: 3;
}
.select-mar,.label-mar{
    margin-top: 40px;
    
}
/*調整input、select間距*/
.select-mar2{ /*input vs select*/
    margin-top: -10px;
}
.select-mar3{ /*select vs input*/
    margin-top: 30px;
}
.select-mar4{ /*select vs select*/
    margin-top: 23px;
}
/*多餘的倒三角透明*/
.caret{
	opacity: 0;
}
/*會影響下拉查詢、選擇全部的功能
.btn-block{
    margin: 50px 0;
}
*/
.menu-mar{
    margin-top: -10px;
}
.card-border{
    border-radius: 0;
    padding: 1.25rem;
}
.card-green{
    background-color: #F0F7F7;
    border:2px solid #006666;
}
.card-green-input{
    border:2px solid #006666;
    height: 50px;
}
.nav-border, .nav-border a ,  .nav-link.active span{
    border-bottom: none;
    text-align: center;
    color:#006666;
    
}
/*Login Page*/
.custom-control-label::after, .custom-control-label::before{
    top: .75rem;
}


/*查詢紀錄*/
.form-a ,.form-a2{
    margin: 0 auto;
    background-color: rgba(41, 171, 272, 0.9);
    border:none;
    color: black;
    font-weight: bolder;
}
    /*報表查詢匯出BTN*/
.form-a2{
    background-color: rgba(247, 147, 30, 0.9);
}
.btn:hover, .text-black{
    color: black;

}
.btn:focus{
    color:#fff ;
}
.btn2:hover{
    color:white ;
}
.text-orange{
    color: #FF8367;
    font-weight: bold;
    font-size:21px !important;
}
.text-orange:focus, .text-orange2:focus{
    color: #FF8367;
}
.search-mar{
    margin: 0 100px;
}

.text_in_use, .orange {
    color: #FF8367;
}
.text_negative {
    color: #FF8367;
}
.text_normal {
    color: #193939;
}
@media (max-width: 768px){
    .d-sm-inline-block {
        display: none!important;
    }
    h1.title{
        font-size: 60px !important;
    }
}


/*弘光版面*/
#header nav .button{
    height:56px;
    padding:0 2rem;
}
#banner {
    background-repeat:no-repeat;
    background-size:cover;
    background-position:bottom 0px center;
    background-attachment: fixed;
    width: 100%;
    opacity:1;
    height:85vh;
    background-image: url(../../img/bk.jpg);
}
@media(max-width:980px){
    #banner {
        background-position:top 90px center;
        max-width: 100%;
        height:120vh;
    }
}
/*footer
#footer{
    padding:10px  0em;
    background: #006666;
    text-align: center;
    color: #FFFFFF;
    position: fixed;
    top:91%;
    left: 0;
    bottom: 0;
    width: 100%;
    opacity: 1;
    max-height: 150em;

}*/
#footer{
    padding:10px  0em;
    background: #006666;
    text-align: center;
    color: #FFFFFF;
    position: fixed;
    bottom: 0;
    width: 100%;
    opacity: 1;
    height: 64px;
}
#footer .copyright{
    border-top:none;
    font-size: 18px;
    color:unset;
    padding: 15px 0;
    margin: 0;
}
/*footer-TEST*/
/*login*/
#identity, #identity2 {
	display  : none;
	position : absolute;
	top: 31vh;
	left: 47vw;
	width  : 460px;
	/*height : 527px;*/
	height : auto;
	margin: -200px 0 0 -170px;
	background : #fff;
	border-radius : 5px;
}
@media screen and (max-width: 768px) and (min-width:576px){
    #identity, #identity2 {
        left: 42vw;
    }
}
@media screen and (max-width: 575px){
    #identity, #identity2 {
        left: 9.5px;
        max-width: 95vw;
        height: auto;
        margin: 0 auto;
        top: 80px;
    }
}

.login.form {
	
	height      : 70px;
	line-height : 70px;
	text-align: center;
	vertical-align: middle;
	margin: 40px auto 0px;
}

.login.form.title {
	
	height      : 100px;
	line-height : 100px;
	
	background : #006666;
	
	font-weight : bold;
	font-family : Microsoft JhengHei;
	font-size   : 21px;
	color       : #fff;
	
	border-radius : 5px;
}

.login.form.notice {
	color       : red;
	height      : 20px;
	line-height : 20px;
}

.div_column {
    display:inline-block;
    color:#193939;
    font-size: 21PX;
    font-weight: bold;
}

.glyphicon {
	
	font-size: 16px;
}

.button.alt {
	padding: 0;
}

.button.alt.login {
	width: 85%;
}
/*名單匯入樣式*/


#file::after{
    background-color: #fff;
    border-color: 2px solid #006666;
    content: ' ';
}
.inputbtn-style1{ 

    background: none;
    background-image: linear-gradient(#F7FFFF 50%, #EBFFFF 100%);
    border: 2px solid #006666 !important;
    position: absolute; 
    left: 32px; 
    top: 137px;
    margin: 0;
    padding: 0 5px !important;
    width: 83px;
    font-weight: bold;

}
/*.inputbtn-style2{ 
    position: absolute; 
    left: 20px; 
    top: 80px;
}*/
.btn-green{
    color:#006666;
    background-color:#F0F7F7;
    border:3px solid #006666;
    font-weight: bold;
}

.btn-green:hover {
    border:3px solid #FF8367;
    color:#FF8367;
    background-color:#FFF;
}
/*返回BTN*/
/*.btn-back{
   /* margin: 0px 50px 10px;

}*/
.btn-back a{
    color:#FFBC00;

}
.btn-back a::after{
    font-size: 40px;
    font-weight: bold;
    content: "返回";
    cursor: pointer;
    padding-left: 5px;
}
/*right menu*/
.dropdown-item{
    padding: 0px 1.5rem;

}
.btnfont-21{
    font-size: 21px;
}
.btnfont-30{
    font-size: 30px;
}
.button:hover{
    background: #FF8367;
}
.btn-orange, .btn-orange span{
    color: #FFFFFF;
    font-weight: bold;
    font-size:21px;
    background: #FF8367;
}
.text-green{
    color: #006666;
    font-weight: bold;
    font-size:21px;
}


.text-gray{
    color:#7C7B7B;
}
/*單筆新增*/
.label-right, .label-center, .label-left, input[type="checkbox"] + label,
table tbody, .text-darkgreen{
    /*text-align: right;*/
    font-size: 21px;
    font-weight: 600;
    color:#193939;

}
input[type="checkbox"] + label{
    font-size: 21px;
}
.label-right{
    text-align: right;
    padding: 15px 0 0;
}
.label-center{
    text-align: center;
}
.label-left{
    text-align: left;

}
/*pd內距樣式*/
.pd-top25{
    padding: 25px 0 0 0;
}
.pd-10{
    padding: 10px 0 ;
}
.pd-content_us{
    padding-top:0.5rem;
    padding-bottom:0.5rem;
    padding-left: 3.75rem !important;

}

/*複選修改*/
select.form-control[multiple], select.form-control[size]{
    border: solid 1px #dee1e3;
    background: rgba(144, 144, 144, 0.075);

}
.bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:active{
    border: solid 1px #dee1e3;
    box-shadow: none;
}

/*bootstrap-select-選項預設提示字換色*/
.bootstrap-select > .dropdown-toggle[title],
.bootstrap-select > .dropdown-toggle[title]:hover,
.bootstrap-select > .dropdown-toggle[title]:focus,
.bootstrap-select > .dropdown-toggle[title]:active,
.dropdown-menu>li>a, .btn-default {
    color:#006666;
    font-size: 18px;
    font-weight: 600;
    border-color: #dee1e3;
    padding-left: 1em;
    padding-right: 1em;

}

/*bootstrap-select置中
.bootstrap-select .dropdown-toggle .filter-option{
    text-align: center;
}*/
.cur-select,.cur-select2{
    width: 100px;
    margin: 0 auto;
}
.cur-select{
    padding: 0px 30px;
}
.btn-default{
    background-color: #e6e6e6;
    background: rgba(144, 144, 144, 0.075);

}
.form-mar{
margin-bottom: 1.85rem;
}
/*全選/取消全選樣式*/
.bs-actionsbox .btn-group button{
    width:100%;
}
/*input 修改輸入文字樣式*/
.form-control:focus {
    color:#006666;
}
input[type="text"],input[type="text"]:hover,input[type="text"]:focus,input[type="text"]:active,
input[type="date"],input[type="password"],input[type="email"],input[type="time"]{
    color:#006666;
    font-weight: 600;
    font-size: 18px;
    /*text-align: center;*/
    
}

/*input placeholder修改*/
.form-control::-webkit-input-placeholder {
    color: #006666 !important;
}
.form-control:-ms-input-placeholder {
    color: #006666!important;
}
.form-control::-ms-input-placeholder {
    color: #006666 !important;
  }
.form-control::placeholder {
    color: #006666 !important;
}
/*input 客服其他說明 placeholder修改*/
.form-control.orange::-webkit-input-placeholder {
    color: #f6755e !important;
}
.form-control.orange:-ms-input-placeholder {
    color: #f6755e !important;
}
.form-control.orange::-ms-input-placeholder {
    color: #f6755e !important;
  }
.form-control.orange::placeholder {
    color: #f6755e !important;
}


/*input placeholder focus修改*/
.form-control:focus::-webkit-input-placeholder {
    color: #a8a8a8 !important;
}
.form-control:focus:-ms-input-placeholder {
    color: #a8a8a8!important;
}
.form-contro:focus::-ms-input-placeholder {
    color: #a8a8a8 !important;
  }
.form-control:focus::placeholder {
    color: #a8a8a8 !important;
}

/*input 尺寸修改*/
input[type="text"], input[type="date"], input[type="password"], input[type="email"], select ,
.time-height,input[type="time"].time-style{
    height: 3.5em;
    line-height: 3.5em;
}
/*input time新增門禁排程尺寸修改*/
.time-height2{
    height: 3.5em;
    line-height: 3.5em;
    /*padding: 15px;*/
    padding: .5rem 15px;
    background: rgba(144, 144, 144, 0.075);

}
input[type="text"], input[type="date"], input[type="password"], input[type="email"], input[type="tel"], select, textarea,input[type="time"].time-style{
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    background: rgba(144, 144, 144, 0.075);
    border-radius: 4px;
    border: none;
    border: solid 1px #dee1e3;
    color: #006666;
    display: block;
    outline: 0;
    padding: 0 1em;
    text-decoration: none;
    width: 100%;
}
input[type="date"],input[type="time"].time-style{
    padding: .85rem .75rem;
}


/*智慧電力管理設定 */
select.input-lg2{
    line-height: 34px;
}

/*input type=search修改樣式*/

input[type="search"],input[type="number"]{
    height: 3em;
}


/*checkbox*/
.card{
    border: 2px solid #006666;
}
/*報表匯出邊框設定*/
.border-report{
    border-left:none ;
    border-right:none ;
    border-bottom:none ;
    border-radius: 0;
}
input[type="checkbox"] + label:before{
	background:#FFF;
	border: solid 3px #006666;
    left: 15px;
    top:  5px;
}

input[type="checkbox"]:checked + label:before{
    background: #006666;
    border: solid 2px #006666;
    color: #ffffff;
    content: '\f00c';
}
.checkbox-mar{
    margin-left: 10px;
    margin-right: 10px;

}
/*修改名單資料*/
.panel-noshadow{
    -webkit-box-shadow: unset; 
     box-shadow: unset; 
}
/*TABLE CSS*/
table{
    white-space:nowrap;
}
.table .thead-green th{
    background-color: #006666;
    color:#F0F7F7;
    text-align: center;
    font-family:"微軟正黑體",-apple-system,BlinkMacSystemFont,"Segoe UI",
    Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji",
    "Segoe UI Emoji","Segoe UI Symbol";
    font-size: large;
}
.table tbody tr{
    border-bottom: solid 2px #006666;
    font-size: 18px;
}
.table>tbody>tr>th{
    text-align: center;
}
.table>tbody>tr>td{
    vertical-align: middle;
}
.inner2{
    max-width: 80em;
}
.inner3{
    max-width: 100em;
    margin: 0 auto;
}

/*新增指定時段用*/
.inner4{
    margin: 0 auto;
    max-width: 45em;
}
.inner5{
    max-width: 110em;
    margin: 0 auto;
}
/*學生登入介面用*/
.inner6{
    margin: 0 auto;
    max-width: 30em;
}
/*文字編輯器樣式*/
.cke_1 .cke_top {
    background-color: rgb(224, 242, 244);
    border-bottom-color: rgb(179, 193, 195);
}

.cke_1 .cke_bottom {
    background-color: rgb(224, 242, 244);
    border-top-color: rgb(179, 193, 195);
}
/*文字編輯器-隱藏關於ckeditor4彈窗*/
#cke_91{
    display: none;
}
/*系統使用現況*/
.fz-18{
    font-size: 18px;
}
.nowsystem ul li,
.study-rate ul li{
    display: block;
}
.b-align{
    white-space: normal;
    text-align: left;
}
.b-label{
    background: #006666;
    color: #FFF;
    padding: 4px;
    border-radius: 3px;
    line-height: 2.25;
}
.nowsystem ul li .b-left{
    float: left;
}
.study-rate ul{
    list-style-type:none;
}
.study-rate ul li{
    padding: 0;
}
/*table 表頭水平置中*/
.table>thead>tr>th {
    vertical-align: middle;
}
/*table 所有中文斷行文字*/
.editgroup{ 
    word-break: keep-all;
    white-space: normal;

}
.editgroup :nth-child(6),
.editgroup :nth-child(8),
.editgroup :nth-child(10){ 
    width: 10%;
}
/*table 所有列文字樣式一致*/
table .refund-period tr :nth-child(n) { 
    font-size:18px;
    font-weight:600;
}
/*table 背景顏色一致*/
table tbody tr:nth-child(2n + 1) {
    background-color: #F0F7F7;
}

/*table 非前7列背景色為無*/
table .refund-period tr:nth-child(n){
    background-color:unset;
}
/*table 指定前7列背景色一致*/
table .refund-period tr:nth-child(n+1):nth-child(-n+7){
    background-color: #F0F7F7;
}

/*table 指定第二欄全部靠左*/
table .refund-period tr td:nth-child(2)
/*table .refund-period tr th:nth-child(2)*/ { 
    text-align: left;
}

table .record-poweruser tr td:nth-child(2)
/*table .refund-period tr th:nth-child(2)*/ { 
    text-align: left;
    width:450px;
}
/*icon 無權限的樣式*/
.lockicon{
    width: 150px !important;
    height: 150px;
    background: rgba(11, 45, 45, 0.9);
    color: #FFF;
    border-radius: 8px;
    line-height: 1.75;
    z-index: 100;
    font-size: 5em;
    padding: 2rem;
}
.check-table-position{
    left: -10px;
    top: -12px;
}
/*下拉選單選項跑版*/
.bootstrap-select .dropdown-toggle .filter-option {
    padding: 10px 0;
}
/*下拉選單選項寬度*/
.form-inline .bootstrap-select{
    width: inherit;
}
/*客服中心*/
#loading-body2-btn:focus{
    background-color: #f6755e;
}

/*PAD*/
@media screen and (min-width:320px) and (max-width:768px){
    .school_image {
        width: 80%;
    }
    .inner6{
        max-width: 85%;
    }
    .inner2{
        max-width: 92%;
    }
}
@media screen and (max-width: 1024px) {
    #header nav .button {
        padding: 0 1rem;
    }
    #banner {
        background-position: top 20px center;
    }
}
@media screen and (max-width: 980px) {
    #header nav.left {
        left: 1em;
        z-index: 9999;
        top: 1em;
    } 
}
/*school_image*/
@media screen and (max-width: 950px) {
    .school_image {
        margin: 2vh auto; 
        mix-blend-mode: multiply; 
        filter: brightness(99%);
    }
}

/*PAD 名單匯入*/
@media screen and (max-width: 991px){
    .btn-mar{
        margin-top:0px;
    }
    .btn-mar button{
        margin-top: 15px;
    }
}
/*手機版*/
@media screen and (max-width: 360px){
    /*名單匯入*/
    .csv-download{
        text-align: center !important;
    }
    .span-mar{
        margin-top: 20px;
    }
    #input-csv h1{
        font-size: 28px;
    }
    .btn-mar button{
        font-size: 25px;
    }
}
@media screen and (max-width: 359px){
    .btnfont-30,.btn-loginfont, .btn-loginfont2{
        font-size: 24px;
    }
}
@media screen and (max-width: 575px){
    .label-right,.label-left {
        text-align: center;
    }
    .btn-back a::after{
        font-size: 30px;
        font-weight: bold;
        padding-left:5px;
    }
    .fa-chevron-circle-left:before{
        font-size: 35px;
    }
    .login.form {
        height: 90px;
        line-height: inherit;
    }
    .user-pwd-width{
        max-width: 300px;
    }
}
@media screen and (max-width: 450px){
    .login.form.notice{
        margin-block-start: inherit;
    }
}
@media screen and (max-width: 480px){
    #footer {
        display: block;
    }
}

@media screen and (max-width: 425px){
    #header {
        background-color: #F6F6F6;
       /* height: 12%;
        /*手機不支援background-attachment 方法1 ok 
        padding-bottom: 6%;*/
    }
    #header nav.left {
        left: 0.5em;
        top: .5rem;
        z-index: 9999;
    }

    #banner {
        background-position: top 20px center;
        /*手機不支援background-attachment 方法2 ok */
        background-color: #F6F6F6;
    }
    h1.title{
        font-size: 32px !important;
    }
    .btn{
        padding-left:6px;
        padding-right:6px;
    }        


}


@media screen and (max-width: 768px){
    /*報表匯出邊框設定*/
    .border-report{
        border:unset;
    }
    .nav-tabs .nav-link.active{
        background-color:#006666;
        /*border-bottom:unset; 解除白底邊間隔線*/
    }
    .nav-tabs .nav-link:hover {
        background-color: #006666;
        color:#FFF;
    }
    .nav-link.active span{
        color: #FFF;
    }
    .mtb-1{
        margin: 1rem 0;
    }
    .mb-1{
        margin-bottom: 1rem !important;
    }
    .pd-0{
        padding: 0;
    }
}