/* reset css */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
/* ol,ul, li, */
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
}

a {
  outline: none;
  border: 0;
  text-decoration: none;
}

a img {
  border: 0;
}

map>area,
map>area:active,
map>area:focus {
  outline: none;
  border: 0;
}

* {
  box-sizing: border-box;
}

body {
  background: url('../images/bg.jpg') 50% top no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
}

body,
.wrap {
  width: 1100px;
  margin: 0 auto;
  font-family: '微軟正黑體', Arial, Helvetica, sans-serif;
}

button {
  border: 0;
  padding: 0;
  border-radius: 5px;
}

table tr td,
table tr th {
  padding: 3px 5px;
}

h1 {
  font-size: 2.5rem;
  font-weight: normal;
}

h2 {
  font-size: 2rem;
  font-weight: normal;
}

h3 {
  font-size: 1.75rem;
  line-height: 2.6;
}

h4 {}

h5 {}

p {
  font-size: 1rem;
}

ul ul,
ol ul {
  list-style-type: disc;
}

/* clear float */
.clear::before,
.clear::after {
  content: "";
  display: table;
}

.clear::after {
  clear: both;
}

.clear {
  zoom: 1;
  /* IE6, IE7 */
}

.Login {
  width: 620px;
  height: 445px;
}

.Login a {
  display: block;
  float: left;
  width: 50%;
  color: #000;
  line-height: 3.2;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dddddd+86,cecece+100 */
  background: rgb(221, 221, 221);
  /* Old browsers */
  background: -moz-linear-gradient(top, rgba(221, 221, 221, 1) 86%, rgba(206, 206, 206, 1) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(221, 221, 221, 1) 86%, rgba(206, 206, 206, 1) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(221, 221, 221, 1) 86%, rgba(206, 206, 206, 1) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#cecece', GradientType=0);
  /* IE6-9 */
}

.Login a.active {
  background: #00bfe1;
  color: #fff;
}

/* 報到號碼 */
.check-number {
  background: rgba(6, 45, 86, .5);
  border-radius: 25px;
  height: 200px;
  margin-left: 50px;
}

.check-number span {
  line-height: 50px;
  width: 30%;
  font-size: 5rem;
  border: transparent;
}

.check-number span:last-child {
  border-right: solid 3px transparent;
}

.check-number:before {
  display: inline-block;
  font-size: 1.5rem;
  line-height: 24px;
  padding-top: 24px;
}

.check-number .title {
  font-size: 5rem;
  line-height: 80px;
  border: transparent;
}

/* 登入與倒數訊息 */
.login-message {
  width: 600px;
}

input {
  padding: 15px 15px;
  width: 400px;
  border-radius: 8px;
  border: solid 1px #d3d3d3;
  font-size: 1.25rem;
  margin-bottom: 15px;
}

/* 錯誤 */
.warning p {
  line-height: 1.4 !important;
}

/* 錯誤-醒目版 */
.Error {
  background-color: #e2747e;
  border: 0;
  border-radius: 8px;
}

.Error .BTN a.Single {
  background-color: #fff !important;
  color: #e2747e !important;
}

/* ------------------------index------------------------ */
.index-set .Logo img {
  width: 100px;
  height: 100px;
}

.index-set .Logo .system-name {
  letter-spacing: 0.25rem;
}

/* 時鐘 */
.index-set .Clock {
  width: 160px;
  height: 60px;
  line-height: 60px;
  background: rgba(49, 49, 103, 0.70);
  border-radius: 8px;
}

.index-set .Clock>h1 {
  font-size: 2rem;
  letter-spacing: 5px;
}

/* 時鐘 */
.index-set .Lang {
  width: 160px;
  height: 60px;
  line-height: 60px;
  background: rgba(49, 49, 103, 0.70);
  border-radius: 8px;
}

/* 內容 */
.index-set .Main {
  width: 935px;
}

/* 按鈕 */
.index-set a.BTN {
  display: inline-block;
  /* position: relative; */
  margin-right: 8px;
  margin-bottom: 30px;
  color: #465a6d;
  text-shadow: 1px 1px 0px #fff;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0f0f5+2,dde2e7+100 */
  background: rgb(240, 240, 245);
  /* Old browsers */
  background: -moz-linear-gradient(top, rgba(240, 240, 245, 1) 2%, rgba(221, 226, 231, 1) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(240, 240, 245, 1) 2%, rgba(221, 226, 231, 1) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(240, 240, 245, 1) 2%, rgba(221, 226, 231, 1) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f5', endColorstr='#dde2e7', GradientType=0);
  /* IE6-9 */
  border-radius: 15px;
  border: solid 1px rgba(255, 255, 255, .6);
  -webkit-box-shadow: 0px 0px 5px 0px rgba(66, 66, 66, .6);
  -moz-box-shadow: 0px 0px 5px 0px rgba(66, 66, 66, .6);
  box-shadow: 0px 0px 5px 0px rgba(66, 66, 66, .6);
}

.index-set a.BTN.Large {
  width: 300px;
  vertical-align: middle;
  background-position: left 0;
}

.index-set a:active.BTN.Large {
  box-shadow: none;
  border: solid 1px rgba(255, 255, 255, .25);
  background-color: #dce1e6;
  -webkit-box-shadow: inset 0px 0px 12px 0px rgba(6, 45, 86, .75);
  -moz-box-shadow: inset 0px 0px 12px 0px rgba(6, 45, 86, .75);
  box-shadow: inset 0px 0px 12px 0px rgba(6, 45, 86, .75);
}

.index-set a.BTN.Small {
  width: 260px;
  height: 265px;
  background-position: left -400px;
  font-size: 3.5rem;
  text-align: center;
  padding-top: 110px;
  line-height: 60px;
}

.index-set a:active.BTN.Small {
  background-position: left -665px;
}

/* 按鈕icon */
.index-set a.BTN.Large span,
.index-set a.BTN.Small span {
  position: absolute;
  display: block;
}

.index-set a.BTN.Large .d-flex {
  margin: auto 15px;
}

.index-set a.BTN.Large .d-flex.english {
  margin: auto 30px;
}

.index-set a.BTN.Large figure {
  position: relative;
  width: 90px;
  height: 160px;
}

.index-set a.BTN.Large figure.small {
  min-width: 50px;
  max-width: 50px;
  margin-right: 1rem;
}

.index-set a.BTN.Large figure img {
  position: absolute;
  width: 100%;
  /* 適應外層寬度 */
  height: 100%;
  /* 適應外層高度 */
  object-fit: scale-down;
  /* 填滿外層給的寬高 */
  object-position: center;
  /* 調整圖片根據外層置中對齊 */
}

.index-set a.BTN.Small span {
  top: 25px;
  width: 260px;
  height: 75px;
}

/* ------------------------page------------------------ */
.page-set .Logo {
  width: 680px;
  height: 95px;
}

.page-set .Logo img {
  width: 100px;
  max-height: 105px;
}

.page-set .Logo span {
  width: 100%;
  line-height: 1.2;
  letter-spacing: 2px;
}

.page-set .Logo .system-name {
  letter-spacing: 0.25rem;
  padding-left: 120px;
}

/* 時鐘 */
.page-set .Clock {
  margin-top: 15px;
  background: rgba(49, 49, 103, .45);
  border-radius: 8px;
  padding: 5px 10px;
}

.page-set .Clock>h1 {
  font-size: 1.375rem;
  letter-spacing: 5px;
}

/* 內容 */
.page-set .Main h2 {
  color: #094b77;
}

.page-set .Title+section {
  position: absolute;
  right: 0;
  top: 0;
}

/* 按鈕 */
.page-set .BTN {
  position: absolute;
  padding: 20px;
  top: 40px;
  right: 20px;
}

.page-set .BTN a.Back,
.page-set .BTN a.Home {
  display: block;
  width: 140px;
  height: 50px;
  line-height: 50px;
  color: #fff;
  float: left;
  background-color: #3b3c71;
  border-radius: 10px;
  font-size: 1.5rem;
  text-align: center;
}

/* 麵包屑 */
.bread-crumbs {
  height: 40px;
  width: 600px;
  line-height: 40px;
  color: rgba(51, 51, 51, 1);
}

.bread-crumbs span:before {
  content: " > ";
  padding: 0 12px;
}

.bread-crumbs span:nth-child(1):before {
  content: "";
}

.bread-crumbs .hold {
  color: rgba(51, 51, 51, .3);
}

/* 個人紀錄 */
.personal_list {
  clear: both;
}

.personal_list .Record {
  width: 33%;
  height: 240px;
  border: solid 1px #6b6b6b;
  vertical-align: top;
}

.personal_list .Record h4 {
  line-height: 2;
  letter-spacing: 3px;
}

/* 等位 */
.personal_list .Record h4 span.wait {
  background-color: #03487f;
}

.dl-horizontal dt {
  float: left;
  width: 140px;
  clear: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-horizontal dd {
  margin-left: 120px;
}

/* 資料顯示區塊 */
.T650 {
  top: 650px !important;
}

.info h2 {
  color: #03487f;
  letter-spacing: 5px;
  line-height: 2;
}

.info p {
  line-height: 1.4;
  color: #445061;
}

.info .dl-horizontal {
  line-height: 1.4;
}

.info .dl-horizontal dt {
  width: 200px;
}

.info .dl-horizontal dd {
  margin-left: 200px;
}

/* 內頁操作按鈕 */
.info .BTN {
  width: 100%;
  font-size: 1.5rem;
  position: relative;
  top: 0;
  right: 0;
}

.info .BTN a:active {
  box-shadow: 0px 0px 10px 5px rgba(45, 45, 45, .7) inset;
}

.info .BTN a.Notice,
.info .BTN a.Normal,
.info .BTN a.Normalbig,
.info .BTN a.Single,
.info .BTN a.Sporadic,
.info .BTN a.Waiting {
  display: block;
  text-align: center;
  color: #fff;
  border-radius: 7px;
}

.info .BTN a.Notice,
.info .BTN a.Normal {
  float: left;
  width: calc(100% / 2 - 4px);
  margin: 0 2px;
  line-height: 2.6;
}

.info .BTN a.Normalbig {
  float: left;
  width: calc(100% / 1 - 4px);
  height: 100px;
  line-height: 2.6;
  width: 80%;
  margin: 0 10%;
}

.info .BTN a.Single {
  width: 50%;
  height: 70px;
  line-height: 2.6;
}

/* 零星時段、現場等位 操作按鈕 */
.info .BTN a.Sporadic,
.info .BTN a.Waiting {
  width: calc(100% / 2 - 4px);
  float: left;
  margin: 0 2px;
  padding: 20px 20px;
  font-weight: bold;
}

.info .BTN a.Sporadic {
  background-color: #10b7e7;
}

/* 零星時段 */
.info .BTN a.Waiting {
  background-color: #03467c;
}

/* 現場等位 */
.info .BTN a.Sporadic span,
.info .BTN a.Waiting span {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.6;
}

/* 現場登記 */
.seat-number h4 {
  line-height: 2;
}

.seat-number .border {
  border: solid 1px #ccc;
  border-radius: 8px;
  width: 260px;
}

.seat-number .border.W500 {
  width: 500px !important;
}

/* 等位 */
.wait-seat h2 {
  font-size: 5rem;
  letter-spacing: 2px;
  line-height: normal;
}

.wait-seat h4 {
  letter-spacing: 2px;
  font-weight: normal;
}

.wait-seat .QR,
.wait-seat .Number,
.wait-seat .Person {
  width: calc(100% / 3 - 10px);
  height: 200px;
  overflow: hidden;
}

.wait-seat .QR,
.wait-seat .Person {
  border: solid 1px #3f4f5f;
}

/* 選擇日期 */
.date-picker h2 {
  color: #314b65;
}

.tip span.NowDate,
.tip span.PickDate,
.tip span.DisableDate {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.tip span.NowDate {
  background-color: #3f4f5f;
}

.tip span.PickDate {
  background-color: #00bfe1;
}

.tip span.DisableDate {
  background-color: #eee;
}

.tip span.Full,
.tip span.Less,
.tip span.Noseat {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.tip span.Full {
  background-color: #4f6172;
}

.tip span.Less {
  background-color: #eb6153;
}

.tip span.Noseat {
  background-color: #d7d7d7;
}

/* 選擇時段 */
.Picked h3 {
  color: #26292d !important;
  border-bottom: none;
}

/* 時段 */
.section {
  border: solid 1px #bdc1c2;
  width: 100%;
}

.section .period {
  width: calc(100% / 3);
  min-height: 360px;
}

.section .period:nth-child(2){
  border-right: solid 1px #bdc1c2;
  border-left: solid 1px #bdc1c2;
}

.section .period h3 {
  line-height: 3;
  font-weight: normal;
  letter-spacing: 5px;
}

.section .period a {
  line-height: 80px;
}

.section .period a:active {
  box-shadow: 0px 0px 5px 2px rgba(45, 45, 45, .3) inset;
}

.section .period a.Noseat {
  cursor: not-allowed;
}

.section .period a:active.Noseat {
  box-shadow: 0px 0px 5px 2px rgba(45, 45, 45, 0) inset;
}

.section .period span {
  background-color: #4f6172;
  /* 座位預設充足 */
  border-radius: 50%;
  line-height: 50px;
  width: 50px;
}

.section .period .Active {
  background-color: #00bfe1;
  color: #fff !important;
}

.section .period .Active>span {
  background-color: #fff !important;
  color: #00bfe1 !important;
}

.section .period .Less>span {
  background-color: #eb6153;
}

/* 座位稀少 */
.section .period .Noseat>span {
  background-color: #b9bcbf;
}

.section .period .Noseat {
  /* 無座位 */
  background-color: #dfdfdf;
  color: #fff;
}

/* 大區塊 */
.Seats a {
  border-radius: 5px;
  background-color: #445464;
  font-size: 1.375rem;
}

/* 座位編號+時間 */
.Seats a p {
  border-bottom: solid 1px rgba(255, 255, 255, .3);
}

.Seats a p,
.Seats a .User,
.Seats a .Time {
  font-size: 1.125rem;
  line-height: 29px;
}

.Seats a:hover {
  background-color: #1db3d2;
}

/* 按鈕狀態設定 */
/* 目前選擇 */
.Seats a.Active {
  background-color: #1db3d2;
}

.Seats a.Reserved,
.Seats a.Not-open,
.Seats a.Leave,
.Seats a.Ending,
.Seats a.Seating {
  cursor: not-allowed;
}

/* 已被預約 */
.Seats a.Reserved {
  background-color: #fff;
  color: #dfdfdf !important;
  border: solid 1px #dfdfdf;
}

/* 不開放 */
.Seats a.Not-open {
  background-color: #dfdfdf;
}

/* 暫時離開 */
.Seats a.Leave {
  background: rgba(159, 151, 192, .5);
}

/* 即將結束 */
.Seats a.Ending {
  background: rgba(234, 84, 20, 1);
}

/* 目前座位 */
.Seats a.Seating {
  background: green;
}

/* 上一層區塊 */
.upper-block a {
  border-radius: 5px;
  background-color: #435363;
}

.upper-block a.active {
  background-color: #00bfe1;
}

/* 座位狀態 */
.status div {
  font-size: 1.375rem;
  vertical-align: top;
  display: inline-block;
  padding: 0 .5rem;
}

.status .avalible span,
.status .occupied span,
.status .forbidden span,
.status .suspended span,
.status .ending span,
.status .current span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  margin-right: .5rem;
}

.status .avalible span {
  background-color: #425363;
}

.status .occupied span {
  background-color: #fff;
  border: solid 1px gray;
}

.status .forbidden span {
  background-color: #dcdcdc;
}

.status .suspended span {
  background-color: #9f97c0;
}

.status .ending span {
  background-color: #e95412;
}

.status .current span {
  background-color: green;
}

/* 燈箱樣式 */
body.modal-open {
  overflow: hidden;
  /* Optional: hides body scroll bar when modal is open. */
}

.modal {
  opacity: 0;
  /* Fade in/out animation. */
  transition: opacity 0.2s ease-in;
  background: rgba(0, 0, 0, .75);
}

.modal-content {
  width: 1100px;
  color: #445061;
  line-height: 1.8;
  background-color: #fff;
  padding: 100px 50px 60px;
}

.modal-header {
  padding-bottom: 14px;
  position: relative;
}

.modal-header>h2 {
  flex: 1;
}

.modal-header .close {
  background-color: #fff;
  font-weight: 100;
  font-size: 5.5rem;
  border: 0;
  border-radius: 999px;
  padding: 0;
  margin: 0;
  line-height: 1rem;
  height: 2rem;
  width: 2rem;
  position: absolute;
  top: -30px;
  right: 30px;
}

/* 加載畫面 */
.loading {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, .8) url('./../images/loading.gif') 50% 50% no-repeat;
}