.k-header h1 {
    margin: 0;
    padding: 30px 15px;
    font-size: 32px;
    font-weight: lighter;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: 微軟正黑體,verdana,Times New Roman,新細明體;
    /* Margin bottom by footer height */
    /*margin-bottom: 60px;*/
    margin-left: 0px;
	margin-top: 0px;
}

.loginText {
	font-size: 14px;
	font-weight: bold;
	color: #028D9A;
}

.loginText12 {
	font-size: 12px;
	font-weight: bold;
	color: #028D9A;
}

.banner {
	height: 65px;
	color: #fff;
	background-image: url("../../assets/images/TopBanner.jpg")
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    /* height: 60px; */
    background-color: #7DCEDF;
    text-align: center;
}
.footerCS {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFFFFF;
}
.footerCS_TEL {
	font-size: x-large;
	color: #FFFFFF;
}
.footerCopyRight {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	font-weight: bold;
}

.placeholders {
    margin: 30px auto;
}

.placeholder img {
    display: inline-block;
}

.L {
	text-align: left;
}

.C {
	text-align: center;
}

.R {
	text-align: right;
}

.red {
    color: red;
}

.navy {
    color: navy;
}

.green {
    color: teal;
}

.blue {
    color: blue;
}

.error {
    color: red;
}

.breakWord {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.borderless tr td {
    border: none !important;
}

.x-list-boxes {
	float: left;
	width: 45%;
}

.x-list-boxes-arrows {
	float: left;
	width: 10%;
	text-align: center;
}

.x-table-layout {
	table-layout: fixed;
	margin-bottom: 0;
}

.x-table-header {
	background: linear-gradient(silver, white);
}

.x-table-wrap-scroll, .x-table-wrap-scroll-normal {
	border: 1px solid lightgray;
	border-radius: 3px;
	overflow-x: auto;
	overflow-y: hidden;
}

#formCollapse {
    width: 33px;
    height: 33px;
    background: #f5f5f5;
}
#formCollapse span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background: #555;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
    transition-delay: 0.2s;
}
#formCollapse span:first-of-type {
    transform: rotate(45deg) translate(2px, 2px);
}
#formCollapse span:nth-of-type(2) {
    opacity: 0;
}
#formCollapse span:last-of-type {
    transform: rotate(-45deg) translate(1px, -1px);
}
#formCollapse.active span {
    transform: none;
    opacity: 1;
    margin: 4px auto;
}

#formCollapse1 {
    width: 23px;
    height: 23px;
    background: #f5f5f5;
}
#formCollapse1 span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background: #555;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
    transition-delay: 0.2s;
}
#formCollapse1 span:first-of-type {
    transform: rotate(45deg) translate(2px, 2px);
}
#formCollapse1 span:nth-of-type(2) {
    opacity: 0;
}
#formCollapse1 span:last-of-type {
    transform: rotate(-45deg) translate(1px, -1px);
}
#formCollapse1.active span {
    transform: none;
    opacity: 1;
    margin: 4px auto;
}

#formCollapse2 {
    width: 23px;
    height: 23px;
    background: #f5f5f5;
}
#formCollapse2 span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background: #555;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
    transition-delay: 0.2s;
}
#formCollapse2 span:first-of-type {
    transform: rotate(45deg) translate(2px, 2px);
}
#formCollapse2 span:nth-of-type(2) {
    opacity: 0;
}
#formCollapse2 span:last-of-type {
    transform: rotate(-45deg) translate(1px, -1px);
}
#formCollapse2.active span {
    transform: none;
    opacity: 1;
    margin: 4px auto;
}

#formCollapse3 {
    width: 23px;
    height: 23px;
    background: #f5f5f5;
}
#formCollapse3 span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background: #555;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
    transition-delay: 0.2s;
}
#formCollapse3 span:first-of-type {
    transform: rotate(45deg) translate(2px, 2px);
}
#formCollapse3 span:nth-of-type(2) {
    opacity: 0;
}
#formCollapse3 span:last-of-type {
    transform: rotate(-45deg) translate(1px, -1px);
}
#formCollapse3.active span {
    transform: none;
    opacity: 1;
    margin: 4px auto;
}

#formCollapse4 {
    width: 23px;
    height: 23px;
    background: #f5f5f5;
}
#formCollapse4 span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background: #555;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
    transition-delay: 0.2s;
}
#formCollapse4 span:first-of-type {
    transform: rotate(45deg) translate(2px, 2px);
}
#formCollapse4 span:nth-of-type(2) {
    opacity: 0;
}
#formCollapse4 span:last-of-type {
    transform: rotate(-45deg) translate(1px, -1px);
}
#formCollapse4.active span {
    transform: none;
    opacity: 1;
    margin: 4px auto;
}

#formCollapse5 {
    width: 23px;
    height: 23px;
    background: #f5f5f5;
}
#formCollapse5 span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background: #555;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
    transition-delay: 0.2s;
}
#formCollapse5 span:first-of-type {
    transform: rotate(45deg) translate(2px, 2px);
}
#formCollapse5 span:nth-of-type(2) {
    opacity: 0;
}
#formCollapse5 span:last-of-type {
    transform: rotate(-45deg) translate(1px, -1px);
}
#formCollapse5.active span {
    transform: none;
    opacity: 1;
    margin: 4px auto;
}

#formCollapse6 {
    width: 23px;
    height: 23px;
    background: #f5f5f5;
}
#formCollapse6 span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background: #555;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
    transition-delay: 0.2s;
}
#formCollapse6 span:first-of-type {
    transform: rotate(45deg) translate(2px, 2px);
}
#formCollapse6 span:nth-of-type(2) {
    opacity: 0;
}
#formCollapse6 span:last-of-type {
    transform: rotate(-45deg) translate(1px, -1px);
}
#formCollapse6.active span {
    transform: none;
    opacity: 1;
    margin: 4px auto;
}

#formCollapse7 {
    width: 23px;
    height: 23px;
    background: #f5f5f5;
}
#formCollapse7 span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background: #555;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
    transition-delay: 0.2s;
}
#formCollapse7 span:first-of-type {
    transform: rotate(45deg) translate(2px, 2px);
}
#formCollapse7 span:nth-of-type(2) {
    opacity: 0;
}
#formCollapse7 span:last-of-type {
    transform: rotate(-45deg) translate(1px, -1px);
}
#formCollapse7.active span {
    transform: none;
    opacity: 1;
    margin: 4px auto;
}

#formCollapse8 {
    width: 23px;
    height: 23px;
    background: #f5f5f5;
}
#formCollapse8 span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background: #555;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
    transition-delay: 0.2s;
}
#formCollapse8 span:first-of-type {
    transform: rotate(45deg) translate(2px, 2px);
}
#formCollapse8 span:nth-of-type(2) {
    opacity: 0;
}
#formCollapse8 span:last-of-type {
    transform: rotate(-45deg) translate(1px, -1px);
}
#formCollapse8.active span {
    transform: none;
    opacity: 1;
    margin: 4px auto;
}

#formCollapse9 {
    width: 23px;
    height: 23px;
    background: #f5f5f5;
}
#formCollapse9 span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background: #555;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
    transition-delay: 0.2s;
}
#formCollapse9 span:first-of-type {
    transform: rotate(45deg) translate(2px, 2px);
}
#formCollapse9 span:nth-of-type(2) {
    opacity: 0;
}
#formCollapse9 span:last-of-type {
    transform: rotate(-45deg) translate(1px, -1px);
}
#formCollapse9.active span {
    transform: none;
    opacity: 1;
    margin: 4px auto;
}

@media (max-width: 768px) {
  .k-item {
    display: block;
    clear: both;
    float: none;
    width: 100%;
  }

  .k-header h1 {
    margin: 0;
    padding: 16px 15px 14px 60px;
    font-size: 18px;
    font-weight: lighter;
   }  
}

marquee {
  -webkit-animation: caption 50s linear 0s infinite;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #ffffff;
  -webkit-box-shadow: inset 0px 0px 0px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
  box-shadow: inset 0px 0px 0px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
  -webkit-transition: background-color 350ms;
  -moz-transition: background-color 350ms;
  transition: background-color 350ms;
  overflow: hidden;
  overflow-x:-webkit-marquee;
  -webkit-marquee-direction: right;
  -webkit-marquee-style: scroll;
  -webkit-marquee-speed: normal;
  -webkit-marquee-increment: small;
  -webkit-marquee-repetition: 5;
  overflow-x: marquee-line;
  marquee-direction: forward;
  marquee-style: loop;
  marquee-speed: slow;
  marquee-play-count: 5;
  color: red;
  background: #ffffff;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 1200px) {
	.hide-lg {
		display: none;
	}
}

@media (max-width: 1000px) {
	.hide-md {
		display: none;
	}
}

@media (min-width: 1000px) {
	#loginContainer {
		width: 70%;
	}
}

@media (min-width: 750px) and (max-width: 999px) {
    #loginContainer {
         width: 90%;
    }
    #oldHome {
		display: none;
	}
	.footer {
		display: none;
	}
}

@media (max-width: 750px) {
    .banner {
		background-image: url("../../assets/images/TopBanner2.jpg")
	}
	#oldHome {
		display: none;
	}
	.hide-sm {
		display: none;
	}
	.glyphicon-log-out {
		display: none;
	}
	.footer {
		display: none;
	}
}

@media (max-width: 560px)  {
	.x-table-wrap-scroll table, .x-table-wrap-scroll thead, .x-table-wrap-scroll tbody, .x-table-wrap-scroll th, .x-table-wrap-scroll td, .x-table-wrap-scroll tr { 
		display: block;
	}
	th.hide-sm, th.hide-md, th.hide, td.hide-sm, td.hide-md, td.hide-lg {
		display: none;
	}
	.x-table-wrap-scroll thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.x-table-wrap-scroll tr {
		border-bottom: 1px solid silver;
	}
	.x-table-wrap-scroll td {
		border: none;
		border-bottom: 1px solid silver;
		position: relative;
		padding-left: 105px;
		font-size: 12px;
	}
	.x-table-wrap-scroll td:before { 
		position: absolute;
		top: 1px;
		left: 1px;
		width: 100px; 
		/*padding-right: 10px;*/
		background: linear-gradient(to right, silver, white);
		/*white-space: nowrap;*/
		font-size: 12px;
		font-weight: bold;
	}
}