input, button, select, optgroup, textarea {
    margin: 0px;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    /* Safari 和 Chrome 常用於 iOS 下移除內建樣式 */
    -moz-appearance: none;
    /* FireFox */
    appearance: none;
  /*以下移除 Chrome 產生的按鈕陰影*/
    outline-style: none;
    outline-width: 0px;
    border: none;
    border-style: none;
    text-shadow: none;
    -webkit-user-select: text;
    outline-color: transparent;
    box-shadow: none;
}
.active,
.airmode-contro label,
.switch label::after,
.check-box:before,
.btn-set {
cursor: pointer;
}
.mainContent {
    width:1200px;
    float:right;
}
.mobile.mainContent {
    width:100%;
    float:none;
    min-height:100vh;
    padding:0;
}
body {
    background: #fff;
}
.cms-logo {
	width: 100%;
    padding: 100px 0px 20px 0px;
    text-align: center;
}
.miniContainer {
    width:90%;
    margin:0 auto;
    
}


.GG {display:none;}
*{
    box-sizing:border-box;
    line-height:1.5;
}
body{
    font-size:16px;
    font-family: "微軟正黑體", sans-serif;
    overflow-x: hidden;
}
.container {
    width:1280px;
    margin:0 auto;
}
.cfix:after {
    content:"";
    display:block;
    clear: both;
}
h1 {
    font-size:2rem;
    line-height:3;
}
h2 {
    font-size:1.6rem;
    line-height:2;
}
h3,h4,h5 {
    font-size:1.3rem;
    font-weight:normal;
}
a {
    text-decoration: none;
    color:inherit;
}
table th, table td {
    padding:.5em;
    border:1px solid #ccc;
    text-align:center;
}
table th {
    background:#eee;
}
.col2:after, .col3:after, .col4:after, .col5:after, .col6:after, .col7:after, .col8:after {
    content:"";
    display:block;
    clear:both;
}
.col2 > li {
    width:50%;
    float:left;
}
.col4 > li {
    width:25%;
    float:left;
}
.col6 > li {
    width:16.66%;
    float:left;
}
.col7 > li {
    width:14.28%;
    float:left;
}
.imgBk {
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.lineLimit {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
#loading {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(../images/Preloader_8.gif) center no-repeat #fff;
}

.menuBtn {position:absolute;z-index: 102;right: 0;top: 0;width: 50px;height: 50px;
background: #22528f;color:#fff;}
.menuBtn .icon {    position: absolute;cursor: pointer;width: 25px;height: 25px;top: 0;left: 0;right: 0;bottom: 0;margin: auto;transition: all .3s ease-in-out;}
.menuBtn .icon .top, .menuBtn .icon .mid, .menuBtn .icon .bot {background-color: #fff;height: 3.125px;width: 25px;position: absolute;left: 1.25px;overflow: hidden;transition: all .3s ease-in-out;}
.menuBtn .icon .top {top:1.25px;}
.menuBtn .icon .mid {top:10.25px;}
.menuBtn .icon .bot {top:19.25px;}
.menuBtn.active .icon .top {top: 10.25px;transform: rotate(45deg);background-color: #fff;}
.menuBtn.active .icon .mid {opacity: 0;transform: rotate(45deg);background-color: #fff;}
.menuBtn.active .icon .bot {top: 10.25px;transform: rotate(-45deg);background-color: #fff;}
.mainMenu .menuMask {
    visibility: hidden;
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    top:50px;
    background:rgba(0,0,0,.8);
    color:#fff;
    transition: .5s;
    opacity: 0;
    z-index:100;
}
.mainMenu .menuList {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background: #22528f;
    transition: .5s;
    padding:50px 0;
}
.menuList > li {
    font-size:1.5em;
    letter-spacing: .25em;
    padding:0 3em;
    text-align:center;
}
.menuList > li a {
    line-height:2;
    padding:.3em 0;
    display:inline-block;
    border-bottom:1px solid #ccc;
}
.menuBtn.active ~ .menuMask {
    visibility: visible;
    opacity: 1;
}
.menuBtn.active ~ .menuMask .menuList {
    left:0;
}




.mainContent {
    padding:1em;
}
.classStatus .buildingList > li {
    display:inline-block;
    vertical-align: text-top;
    padding:1em 2em;
}
.classStatus .buildingList .classList > li {
    border:1px solid #ccc;
    padding:.5em;
    min-width:12em;
    text-align:center;
    border-bottom:0;
}
.classStatus .buildingList .classList > li:hover, .buildingList .classList > li.active {
    background:#b00;
    color:#fff;
    cursor: pointer;
    transition: .5s;
}
.classStatus .buildingList .classList > li:last-of-type {
    border-bottom:1px solid #ccc;
}
.overageManageTable {
    width:100%;
}
.overageManageTable td {
    text-align:center;
}
.overageManageTable .action a {
    color:#00c;
}
.overageManageTable .action a:hover {
    text-decoration: underline;
}
.overageHistoryTable td {
    text-align:center;
}
.overageManage .col2.info > li {
    padding:1em;
}
.overageManage .col2.info > li > .col2 {
    
}
.overageManage .col2.info > li > .col2 > .col {
    padding:.5em;
    border:1px solid #666;
    text-align:center;
}
.overageManage .col2.info > li > .col2 > .col.title {
    background:#eee;
}
.overageManage .col2.info > li > .col2 > .col.content {
    position:relative;
}
.overageManage .col2.info .moneyStoreBtn {
    position:absolute;
    right:0;
    top:0;
    max-height:100%;
    height:1.5em;
    width:1.5em;
    vertical-align: middle;
    background:#333;
    color:#fff;
    font-size:32px;
    line-height:32px;
    cursor: pointer;
}

.classManage .itemBox > input {
    display:none;
}
.classManage .itemBox .itemName {
    float:left;
    display:block;
    width:10em;
    height:30px;
    line-height:30px;
    padding:0 .5em;
    border:1px solid #ccc;
    
}
.classManage .buildingList > li {
    display:inline-block;
    vertical-align: top;
}
.classManage .buildingList > li > .itemBox .itemName {
    background: #a66;
    color:#fff;
}
.classManage .floorList > li > .itemBox .itemName {
    background: #6c6;
    color:#fff;
}
.classManage .classList > li > .itemBox .itemName {
    background: #fff;
}
.classManage .itemBox .editBtn,
.classManage .itemBox .addBtn,
.classManage .itemBox .deleteBtn {
    float:left;
    display:block;
    text-align:center;
    width:30px;
    height:30px;
    line-height:30px;
    border:1px solid #ccc;
    border-left:none;
    cursor: pointer;
}
.classManage .itemBox .editBtn:before {
    content:"\f044";
    font-family: FontAwesome;
    line-height:30px;
}
.classManage .itemBox .addBtn {
    font-size:24px;
    line-height:24px;
}
.classManage .itemBox .deleteBtn {
    font-size:24px;
    line-height:24px;
}
.classManage .itemBox {
    display:inline-block;
}
.classManage label.switch:before {
    content:"\f0da";
    font-family: FontAwesome;
    line-height:30px;
}
.classManage input:checked ~ .switch:before {
    content:"\f0d7"
}
.classManage label.switch {
    width:30px;
    height:30px;
    float:left;
    border:1px solid #ccc;
    text-align:center;
    border-right:none;
}
.classManage .buildingList > li:after, .classManage .floorList:after > li, .classManage .classList > li:after {
    display:block;
    content:"";
    clear:both;
}
.classManage .buildingList > li > input:not(:checked) ~ ul.floorList {
    display:none;
}
.classManage .floorList > li > input:not(:checked) ~ ul.classList {
    display:none;
}
.classManage .classList {
    padding-left:30px;
}
.CompareElec .datepickerList > li, .CompareElec .targetpickerList > li {
    display:inline-block;
}
.datepickerBox button {
    background: #fff;
    border:1px solid #999;
    padding:.5em 2em;
}
.chartJsBox {
    text-align:center;height:500px;line-height:500px;border:1px solid #999;margin:2em auto;"
}

.dataTableBox {
    text-align:right;
}
.dataTable {
    width:100%;
}
.datepickerList > li > input, .targetpickerList > li > select {
    height:32px;
    width:240px;
}
.ms-choice {
    border-radius: 0;
}
.targetpickerList .ms-choice {
    width:240px;
    height:32px;
}
.timeList > li {
    display:inline-block;
    font-size:16px;
}

form.Setting button {
    background: #fff;
    border:1px solid #999;
    padding:.5em 2em;
}


.curList > li, .curTitle {
    border:1px solid #ccc;
    width:8em;
    padding:0 1em;
    line-height:2em;
    text-align:center;
    color:#ccc;
    height:2em;
}
.curTitle {
    background: #666;
    color:#fff;
}

.dayList > li {
    float:left;
}
.curList > li {
    position: relative;
    cursor: default;
}

.classMark {
    position:absolute;
    left:0;
    top:0;
    border:1px solid #ccc;
    width:100%;
    background: #6cc;
    color:#fff;
    z-index: 1;
    
}
.classMark[data-classTime="1"] {
    height:2em;
    line-height:2em;
}
.classMark[data-classTime="2"] {
    height:4em;
    line-height:4em;
}
.classMark[data-classTime="3"] {
    height:6em;
    line-height:6em;
}
.classMark[data-classTime="4"] {
    height:8em;
    line-height:8em;
}
.classMark[data-classTime="5"] {
    height:10em;
    line-height:10em;
}
.classMark[data-classTime="6"] {
    height:12em;
    line-height:12em;
}
.classMark[data-classTime="7"] {
    height:14em;
    line-height:14em;
}
.classMark[data-classTime="8"] {
    height:16em;
    line-height:16em;
}
.boxContainer {
}
.increaseClassBox {
    display:none;
    padding:1em;
    border:1px solid #666;
    width:400px;
    box-shadow: 2px 2px 2px #888;
    position: absolute;
    background: #fff;
    z-index: 10;
    top:5px;
    left:20px;
    text-align:left;
    color:#666;
}
.increaseClassBox .title {
    border-bottom:1px solid #666;
    width:100%;
    display:block;
    margin-bottom:1em;
    
}
.increaseClassBox input.btn {
    background: #5af;
    border:1px solid #999;
    padding:.5em 2em;
    color:#fff;
    float:right;
}
.increaseClassBox .closeBtn {
    position: absolute;
    right:0;
    top:0;
    padding:.5em;
    cursor: pointer;
    color:#aaa;
}
.timeBar .curList > li {
    border:none;
    color:#666;
}
.timeBar .curTitle {
    opacity: 0;
}
.priceSet input[type="number"] {
    height:36px;
    margin-bottom:.5em;
    font-size:22px;
    width:8em;
    text-align:center;
}
.Setting .setList > li {
    display:inline-block;
}
.pageSetting input[type="number"] {
    height:32px;
    text-align:center;
}
.pageSetting .btn {
    width:13em;
    height:32px;
    background: #fff;
    border:1px solid #666;
    
}
.FeLogin h1 {
    text-align:center;
    line-height:1.5em;
    font-size:24px
}
.FeLogin.mainContent.mobile {
	background: #ffffff;
    border: 3px solid #22528f;
}
.mainContent.mobile {
    border:3px solid #22528f;
    background: #fff;
}
#loginForm {
    text-align:center;
    margin-top:3em;
}
.forgotPS a {
    font-size:12px;
    text-align:
}
#loginForm input {
    width:100%;
    height:32px;
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    border:1px solid #ccc;
    text-align:center;
}
#loginForm input[type="submit"] {
    background: #22528f;
    color:#fff;
}
#loginForm input[type="submit"]:hover {
    background: #2767ba;
}
.mainContent.mobile h1 {
    padding: 0;
    line-height:46px;
    border-bottom:3px solid #22528f;
    font-size:26px;
    text-align:center;
/*    padding-right:50px; */
}
.mainContent.mobile h2 {
    font-size:20px;
    text-align:center;
}
.valBox {
    border:1px solid #666;height:40px;
    line-height:40px;
    text-align:center;
    border-radius: 6px;
    font-size:20px;
    font-weight:bold;
    margin-bottom:2em;
}
.FEswitchClassList {
    padding:1em 0;
}
.FEswitchClassList > li {
    width:50%;
    float:left;
    padding:.5em;
    text-align:center;
    border:1px solid #fff;
    background: #333;
    color:#fff;
}
.FEswitchClassList > li.active {
    background: #4a92dd;
}

.FeElehis .valBox {
    border:3px solid #fff;
    background: #4a92dd;
    color:#fff;
    line-height: 36px;
}
table.priceHis {
    width:100%;
}
/*nini*//*nini*//*nini*//*nini*//*nini*//*nini*//*nini*//*nini*//*nini*//*nini*/
.redBox {
    color: #ff0000;
    text-align: center;
    padding: 0px 10px;
    position: absolute;
}
.btn-set {
	border: none;
    line-height: 1.2rem;
    background: #f1f1f1;
    padding: 5px 15px;
    border-radius: 5px;
    float: right;
    margin-top: 20px;
}
.btn-set:hover {
    background: #ddd;
}
/*冷氣現況*************************************************************/
.air-status {
    width: 50%;
    float: left;
    padding: 5px 5px;
border: 3px solid #fff;
    background: #EBF2FB;
    border-radius: 10px;
    text-align: center;
    font-size: 12px;
    margin: 15px 0px;
}
.air-status img {
	width: 70%;
}
.air-status-t {
	width: 50%;
    padding: 10px 0px;
    float: left;
    display: grid;
}
.air-status-t .l,
.air-status-t .r {
	padding: 5px 0px;
    line-height: 10px;
}
.air-status-t .r {
    color: #4a92dd;
    font-size: 14px;
    font-weight: bolder;
    line-height: 16px;
}
.mini-p {
    font-size: 14px;
    color: #aaa;
}





.air-checkbox {
	opacity: 0;
	float:left;
	position: absolute;
}
.air-label {
    width: 100%;
    padding: 15px 0px 25px 0px;
}
.air-checkbox + .air-label {
    position: relative;
    cursor: pointer;
    float: left;
}
.air-checkbox + .air-label::before {
    content: ' ';
    position: absolute;
    bottom: 4px;
    left: 50%;
    margin-left: -15px;
    width: 20px;
    height: 20px;
    display: block;
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.air-checkbox + .air-label::after {
    content: ' ';
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -8px;
    display: block;
    z-index: 1;
    -ms-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    transition: all .3s ease;
    opacity: 0;
    border: 0px;
    width: 5px;
    height: 10px;
    border-bottom: 3px solid #4a92dd;
    border-right: 3px solid #4a92dd;
    transform: rotate(45deg);
}

.air-checkbox:checked + .air-label::after {
	opacity: 1;
}
/*冷氣控制*************************************************************/
.AirControl {
	height: 550px;
	margin-top: 20px;
}
.AirControl li {
    border-top: 1px solid #eee;
    padding: 0px 10px;
    float: left;
    height: 60px;
    line-height: 55px;
}
.AirControl li.ControlBox-broad {
	width: 100%;
    height: 28px;
    line-height: 0px;
    font-size: 14px;
    color: #aaa;
    border-top: 0px solid #eee;
}
.AirControl li.ControlBox-l {
	width: 30%;
}
.AirControl li.ControlBox-r {
	width: 70%;
}
.AirControl li:nth-of-type(1), .AirControl li:nth-of-type(2) {
    border-top: 0px solid #eee;
}
.AirControl li:nth-last-of-type(1) {
    border-top: 1px solid #eee;
}
.AirControl span.classLightDes {
    float: right;
    height: 60px;
    line-height: 55px;
}
.AirControl p {
font-size: .5em;
    color: #aaa;
    position: relative;
    top: -20px;
    width: 250px;
}
.setTEMP {
    width: 100%;
    position: relative;
    left: 4px;
}
/**************************************************************/
.switch {
    float: right;
    position: relative;
    top: 28px;
}
.switch input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}
.switch input[type="checkbox"] + label {
  position: relative;
  flex: 1;
}
.switch input[type="checkbox"] + label::before {
  content: "";
  display: inline-block;
  box-sizing: border-box;
  width: 54px;
  height: 30px;
  border-radius: 30px;
  border: 1px solid #DDD;
  box-shadow: 0 0 0 gray inset;
  transition: all 0.25s ease-in-out 0s;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.switch input[type="checkbox"] + label::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  border: 1px solid #DDD;
  background-color: white;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  transition: all 0.25s ease-in-out 0s;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}
.switch input[type="checkbox"]:checked + label::before {
  border: 1px solid #60bc70;
  box-shadow: 0 0 100px #60bc70 inset;
}
.switch input[type="checkbox"]:checked + label::after {
  right: 0;
  border: 1px solid #60bc70;
}
.t-chkbox {
    display: none;
}
/*溫度控制*************************************************************/
.input-number {
    width: 60%;
    vertical-align: top;
    text-align: center;
    outline: none;
    line-height: 25px;
    z-index: 4;
    position: relative;
    border-radius: 0;
}

.input-number,
.input-number-decrement,
.input-number-increment {
    border: 1px solid #ccc;
    height: 38px;
    user-select: none;
    margin: 10px -3px;
}

.input-number-decrement,
.input-number-increment {
    display: inline-block;
    width: 20%;
    height: 38px;
    line-height: 34px;
    font-size: 24px;
    background: #f1f1f1;
    color: #444;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}
.input-number-decrement:active,
.input-number-increment:active {
  background: #ddd;
}

.input-number-decrement {
  border-right: none;
  border-radius: 4px 0 0 4px;
}

.input-number-increment {
  border-left: none;
  border-radius: 0 4px 4px 0;
}
.input-temperature {
    vertical-align: top;
    text-align: center;
    outline: none;
    line-height: 25px;
    z-index: 4;
    position: relative;
    border: 1px solid #ccc;
    height: 30px;
    user-select: none;
    margin: 14px -3px;
    border-radius: 5px;
    float: right;
    margin-right: 20px;
    width: 100px;
}
/**************************************************************/
.Controlcheckbox {
    width: 65px;
    text-align: left!important;
}
.check-box {
    position: absolute;
    vertical-align: text-top;
    margin: 0px!important;
    outline: none!important;
    background: none!important;
    /*top: -30px;
    left: -5px;*/
}
.Controlcheckbox .check-box {
    right: 0px;
}
/*未選取*/
.check-box:before {
	content: "";
    position: absolute;
    z-index: 1;
    width: 15px;
    height: 15px;
    /* border: 1px solid #ccc; */
    border-radius: 3px;
    width: 41vw;
    height: 45vw;
    margin-left: -7vw;
}
/*未選取*/
.check-box:after {
    content: "";
    position: absolute;
}
/*已選取 方塊*/
.check-box:checked:before {
	/*
    background: #4a92dd;
    border: 1px solid #4a92dd;
    */
}
/*已選取 Ｖ*/
.check-box:checked:after {
    content: " ";
    z-index: 1;
    border: 0px;
    width: 8px;
    height: 17px;
    border-bottom: 3px solid #4a92dd;
    border-right: 3px solid #4a92dd;
    transform: rotate(45deg);
    margin: 60px 0px 0px -15px;
}
/*禁止選取disabled
.check-box:disabled:before {
    background: #eee;
}*/
/*時段選單*************************************************************/

/*the container must be positioned relative:*/
.custom-select {
	position: relative;
	width: 100%;
    float: right;
    text-align: center;
}

.custom-select select {
  display: none; /*hide original SELECT element:*/
}

.select-selected {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 0px 6px;
    line-height: 36px;
    margin: 9px 0px;
    height: 40px;
}
/*style the arrow inside the select element:*/
.select-selected:after {
    position: absolute;
    content: "";
    top: 24px;
    right: 15px;
 	width: 0;
 	height: 0;
 	border: 6px solid transparent;
 	border-color: #444 transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #444 transparent;
  top: 18px;
}
/*style items (options):*/
.select-items {
    position: absolute;
    background-color: #f1f1f1;
    left: 0;
    right: 0;
    z-index: 99;
    border: 1px solid #ccc;
    margin: 0px 9px 0px 0px;
}
.select-items {
    position: fixed;
    z-index: 11;
    width: 100vw;
    height: 100vh;
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -moz-transition: -moz-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    top: 0%;
    border: none;
    background: rgba(0, 0, 0, 0.3);
    overflow-y: auto;
	padding: 50px 0px;
}
/*style the items (options), including the selected item:*/
.select-items div {
    padding: 0px 10px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
    user-select: none;
    line-height: 35px;
    background: #FFF;
    width: 200px;
    margin: 0px auto;
    top: 0;
    position: relative;
    box-shadow: 0px 15px 15px 0px rgba(0,0,0,.5);
}
/*hide the items when the select box is closed:*/
.select-hide {
	display: none;
}
.select-items div:hover, .same-as-selected {
	background: #ddd;
}
/*運作模式*************************************************************/
.airmode-contro {
    /*
    text-align: right;
    margin: 17px 0px;
    */
}
.airmode-contro input[type="radio"] {
    display: none;
}
.airmode-contro input[type="radio"] + label {
    background-color: #f3f3f3;
    padding: 0px 8px;
    border: 1px solid #ccc;
    color: #444;
    font-weight: normal;
    line-height: 25px;
}
.airmode-contro input[type="radio"]:checked + label {
    background-color: #60bc70;
    color: #fff;
    border: 1px solid #60bc70;
}
/**************************************************************/





@media all and (min-width:769px) {
    .dayList .curList > li:hover {
        background: #FF6600;
    }
    .overageManage .col2.info .moneyStoreBtn:hover {
        background: #c00;
    }
    .datepickerBox button:hover {

    }
    .increaseClassBox .closeBtn:hover {
        color:#000;
    }
	.redBox {
		font-size: 20px;
	}
}
@media all and (max-width:768px) {
	.redBox {
		font-size: 16px;
	}
}
@media all and (max-width:767px) {
    
}
@media all and (max-width:480px) {
	.redBox {
		font-size: 12px;
	}
}