/*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;
  /*vertical-align: baseline;*/
}

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;
  /* 避免使用者反白任何區塊 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

html {
  scroll-behavior: smooth;
}

body,
.wrap {
  width: 1080px;
  height: 1920px;
  /*overflow:hidden;*/
  font-family: '微軟正黑體', Arial, Helvetica, sans-serif;
  background: url('../images/bg.jpg') left top no-repeat;
}

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

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

h1 {
  font-size: 72px;
  font-weight: normal;
}

h2 {
  font-size: 42px;
  font-weight: normal;
}

h3 {
  font-size: 38px;
  line-height: 2.6;
}

h4 {}

h5 {}

p {
  font-size: 34px;
}

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

/*圖片水平垂直置中*/

.imgXYcenter {
  text-align: center;
}

.imgXYcenter span {
  height: 100%;
  display: inline-block;
}

/* IE6 hack */

.imgXYcenter * {
  vertical-align: middle;
}

/* 讓foto下的所有元素都居中 */

/*clear float*/

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

.clear::after {
  clear: both;
}

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

/*for any div whitch needs relative*/

.wrap-relative {
  position: relative;
}

/*隱藏*/

.Hide {
  opacity: 0;
}

/*報到號碼*/

.Check_Number {
  height: 130px;
  background: url('../images/bg_Check_Number.png') no-repeat;
  color: #fff;
  padding-left: 180px;
  position: relative;
}

.Check_Number span {
  display: inline-block;
  width: 200px;
  line-height: 130px;
  text-align: center;
  font-size: 72px;
}

.Check_Number span.title {
  position: absolute;
  left: 75px;
  top: 14px;
  font-size: 40px;
  max-width: 4ch;
  font-weight: bold;
  line-height: 50px;
}

/*登入與倒數訊息*/

.Login-Message {
  position: absolute;
  top: 460px;
  left: 170px;
  font-size: 36px;
  font-weight: bold;
}

.Login-Message>span {
  color: #00bfe1;
  margin: 0 20px;
}

/*文字顏色*/

.Light-Blue {
  color: #00bfe1 !important;
}

.Dark-Blue {
  color: #094b77 !important;
  font-weight: bold;
}

/*lightbox 下方Title區塊調整，為了遮水平scrollbar*/

#cboxTitle {
  height: 40px !important;
  border-top: 0 !important;
}

#cboxOverlay {
  background: url(../images/bg-cboxOverlay.png) repeat-x;
}

/*iframe 內容CSS設定*/

.iframe .btn-area {
  width: 840px;
  height: 70px;
  padding: 30px;
  clear: both;
}

.iframe .btn-area a {
  display: block;
  float: right;
  width: 70px;
  height: 70px;
}

.iframe .btn-area a.CLOSE {
  background: url(../images/CLOSE.png);
  text-indent: -9999px;
}

.iframe .info {
  padding: 30px;
  text-align: center;
}

.iframe .info .text {
  width: 840px;
  height: 400px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  letter-spacing: 5px;
}

.iframe .info .text p {
  font-size: 42px;
}

.iframe .info .text img {
  padding: 10px 0 30px;
}

/*錯誤*/

.warning {
  text-align: center;
}

.warning p {
  font-size: 42px;
  line-height: 1.4 !important;
}

.warning img {
  padding: 10px 0 30px;
}

/*錯誤-醒目版*/

.Error {
  background: #e2747e;
  border: 0;
  border-radius: 8px;
  padding: 50px;
}

.Error>.info p {
  color: #fff;
}

.Error>.info .BTN a.Single {
  background: #fff;
  color: #e2747e;
}

/*文字對齊*/

.Center {
  text-align: center !important;
}

.Left {
  text-align: left !important;
}

.Right {
  text-align: right !important;
}

/*------------------------index------------------------*/

.index-set {
  position: relative;
  padding: 0 130px;
}

.index-set .Header {}

/*Logo*/

.index-set .Logo {
  width: 485px;
  height: 440px;
  float: left;
}

/*時鐘*/

.index-set .Clock {
  width: 335px;
  height: 210px;
  padding: 20px 0;
  margin-top: 60px;
  float: right;
  /*border-top: solid 1px #fff;
	border-bottom: solid 1px #fff;*/
  color: #fff;
  text-align: center;
  background: rgba(0, 40, 91, .8);
}

.index-set .Clock h1.clock-time {
  line-height: 1.6;
  letter-spacing: 10px;
}

.index-set .Lang {
  width: 335px;
  height: 125px;
  padding: 20px 0;
  margin-top: 45px;
  float: right;
  color: #fff;
  text-align: center;
  background: rgba(0, 40, 91, .8);
}

.index-set .Lang h2 {
  font-size: 3.5rem;
}

/*報到號碼*/

.index-set .Check_Number {
  margin-top: 60px;
}

/*內容*/

.index-set .Main {
  position: absolute;
  top: 680px;
  width: 820px;
}

/*按鈕*/

.index-set a.BTN {
  display: inline-block;
  position: relative;
  /*讓icon不影響文字行高*/
  background-image: url('../images/BTN.png');
  margin-bottom: 30px;
  color: #465a6d;
  text-shadow: 1px 1px 0px #fff;
}

.index-set a.BTN.Large,
.index-set a.BTN.Small {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.BTN-group {
  display: flex;
  align-items: flex-start;
}

.index-set a.BTN.Small {
  flex-direction: column;
}

.index-set a.BTN.Large {
  width: 820px;
  height: 200px;
  line-height: 200px;
  vertical-align: middle;
  background-position: left 0;
  font-size: 68px;
}

.index-set a:active.BTN.Large {
  background-position: left -200px;
}

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

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

.index-set a.BTN.Small:not(:last-of-type) {
  margin-right: 16px;
}

/* 大按鈕內容 */
.index-set .BTN.Large .BTN-head {
  display: flex;
  flex-direction: column;
  place-content: center;
  margin-right: 40px;
  width: 90px;
  height: 200px;
}
.index-set .BTN.Large .BTN-head b,
.index-set .BTN.Large .BTN-head span {
  display: flex;
  place-content: center;
}
.index-set .BTN.Large .BTN-body {
  display: flex;
  flex-direction: column;
  place-content: center;
}
/* 小按鈕內容 */
.index-set .BTN.Small .BTN-head {
  width: 260px;
  height: 70px;
  margin-bottom: 10px;
  flex-basis: 30%;
}
.index-set .BTN.Small .BTN-body {
  max-width: 5ch;
  display: flex;
  place-content: center;
  flex-basis: 40%;
}

/*座位預約*/

.icon-reservation {
  background: url('../images/icon-reservation.png') 50% 50% no-repeat;
}

/*等位報到*/

.icon-check-in {
  background: url('../images/icon-check-in.png') 50% 50% no-repeat;
}

/*預約報到*/

.icon-reserve-check {
  background: url('../images/icon-reserve-check.png') 50% 50% no-repeat;
}

/*個人紀錄*/

.icon-personal {
  background: url('../images/icon-personal.png') 50% 50% no-repeat;
}

/*提前結束*/

.icon-leave {
  background: url('../images/icon-leave.png') 50% 50% no-repeat;
}

/*預約規則*/

.icon-rule {
  background: url('../images/icon-rule.png') 50% 50% no-repeat;
}

/*已過時間*/

.icon-closed {
  background: url('../images/CLOSE.png') 50% 50% no-repeat;
}

/*空位*/

.Available_Seat {
  font-size: 42px;
  line-height: normal !important;
  width: auto!important;
}

.Available_Seat>b {
  font-size: 86px;
  color: #00a6d0;
  letter-spacing: -5px;
  display: block;
  padding-top: 10px;
}

/*------------------------page------------------------*/

.page-set {
  position: relative;
}

.page-set .Header {
  padding: 0 100px;
  height: 400px;
}

.page-set .main {}

/*Logo*/

.page-set .Logo {
  width: 680px;
  height: 180px;
  float: left;
}

/*時鐘*/

.page-set .Clock {
  width: 180px;
  height: 60px;
  margin-top: 40px;
  float: right;
  /*border: solid 1px #fff;*/
  color: #fff;
  text-align: center;
  background: rgba(0, 40, 91, .8);
}

.page-set .Clock h1.clock-time {
  font-size: 42px;
  letter-spacing: 5px;
}

.page-set .Lang {
  width: 180px;
  height: 60px;
  margin-top: 25px;
  float: right;
  /*border: solid 1px #fff;*/
  color: #fff;
  text-align: center;
  background: rgba(0, 40, 91, .8);
}

.page-set .Lang h4 {
  font-size: 2.5rem;
  font-weight: 500;
}

/*報到號碼*/

.page-set .Check_Number {
  margin: 40px 30px 0;
}

/*內容*/

.page-set .Main {
  background: #fff;
  height: 1520px;
}

.page-set .Main h2 {
  color: #094b77;
  font-weight: bold;
}

.page-set .Main h3 {
  color: #00bfe1;
}

.page-set .Main #container h3 {
  color: initial
}

.page-set .Title,
.page-set .BTN {
  position: absolute;
}

/*標題*/

.page-set .Title {
  width: 120px;
  height: 470px;
  background: #00bfe1;
  color: #fff;
  text-align: center;
  padding-top: 45px;
}

.Title>.sidetitle-eng {
  writing-mode: vertical-rl;
  font-size: 50px;
  line-height: 120px;
}

/*按鈕*/

.page-set .BTN {
  top: 930px;
}

.page-set .BTN a.Back,
.page-set .BTN a.Home {
  display: block;
  width: 120px;
  height: 162px;
  background-image: url('../images/BTN_page.png');
  color: rgba(0, 0, 0, 0)
}

.page-set .BTN a.Back {
  background-position: left top;
}

.page-set .BTN a.Home {
  background-position: left bottom;
}

.page-set .BTN a:active.Back {
  background-position: right top;
}

.page-set .BTN a:active.Home {
  background-position: right bottom;
}

/*---- scroller area ----*/

.wrap-scroller {
  /*position: absolute;
	top: 470px;
	left: 170px;
	width: 910px;*/
  position: relative;
}

.wrap-scroller h2 {
  position: absolute;
  left: 170px;
  top: 55px;
}

/*scroll area
.wrap-scroller .content{
	overflow: auto;
	position: relative;
	width: 800px;
	height: 1100px;
	left: 0 !important;
	top: 30px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	font-size: 34px;
	line-height: 1.8;
}*/

/*scroll BTN tyle*/

.wrap-scroller #floorinfo {
  /*width: 800px;
    height: 1100px;*/
  font-size: 34px;
  line-height: 1.8;
}

/*個人紀錄 scroll 位置高度調整*/

.wrap-scroller #floorinfo.H990 {
  top: 340px !important;
}

.wrap-scroller #floorinfo.H990,
.wrap-scroller #floorinfo.H990 .ScrollBox {
  height: 990px;
}

.wrap-scroller.H1100 {
  top: 560px !important;
}

.wrap-scroller.H1100 .content {
  height: 1100px !important;
}

/*麵包屑*/

.Bread-crumbs {
  position: absolute;
  top: 530px;
  left: 170px;
  line-height: 60px;
  border: solid 1px #bdc1c2;
  font-size: 30px;
  font-weight: bold;
  padding: 0 20px;
  color: rgba(51, 51, 51, 1);
}

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

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

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

/*刷卡登入*/

.bibi {
  text-align: center;
}

.bibi h4 {
  line-height: 1.6;
  font-size: 42px;
  color: #445061;
  margin-bottom: 30px;
}

.bibi .GIF {
  width: 800px;
  height: 600px;
  background: #555;
  margin: 0 auto;
}

/*個人紀錄*/

.personal_list {
  clear: both;
}

.personal_list .Record {
  display: inline-block;
  vertical-align: top;
}

.personal_list .Record a {
  display: block;
  border: solid 1px #6b6b6b;
  margin: 0 10px 30px 0;
  width: 340px;
  color: #000;
}

.personal_list .Record h4 {
  line-height: 2;
  letter-spacing: 5px;
  font-weight: normal;
  margin-top: 1px;
  letter-spacing: 2px;
}

.personal_list .Record h4 span {
  color: #fff;
  margin-right: 25px;
  letter-spacing: 2px;
}

/*等位*/

.personal_list .Record h4 span.wait {
  padding: 0;
  min-width: 150px;
  text-align: center;
  display: inline-block;
  background: #03487f;
}

/*預約*/

.personal_list .Record h4 span.reservation {
  padding: 0;
  min-width: 150px;
  text-align: center;
  display: inline-block;
  background: #00bfe1;
}

.dl-horizontal {
  font-size: 26px;
  padding: 20px;
}

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

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

/*資料顯示區塊*/

.info-wrap {
  position: absolute;
  left: 180px;
  top: 600px;
  width: 840px;
  max-height: 1200px;
  letter-spacing: 5px;
  /*background: #e5e5e5;*/
}

.T550 {
  top: 550px !important;
}

.T650 {
  top: 650px !important;
}

/*線框資料*/

.info-wrap.border {
  border: solid 1px #bdc1c2;
  padding: 50px;
}

.info {
  margin-bottom: 30px;
}

.info h2 {
  font-size: 54px;
  text-align: center;
  color: #03487f;
  letter-spacing: 10px;
  margin: 50px 0 80px;
}

.info p {
  line-height: 1.8;
  margin-bottom: 30px;
  color: #445061;
}

.info span {
  color: #00bfe1;
}

.info .dl-horizontal {
  font-size: 34px;
  line-height: 1.8;
  padding: 0;
  margin-bottom: 30px;
}

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

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

/*月曆設定*/

.info .ui-datepicker {
  width: 700px;
  margin: 0 auto;
  padding: 0;
  border-radius: 0;
  font-size: 34px;
  font-family: '微軟正黑體', Arial, Helvetica, sans-serif;
  border: solid 1px #6e7a86;
}

.info .ui-datepicker .ui-datepicker-header {
  border-radius: 0;
  border: 0;
  background: #3f4f5f;
  padding: 15px 0;
  border-bottom: solid 1px #6e7a86;
}

.info .ui-datepicker .ui-datepicker-title span,
.info .ui-datepicker thead span {
  color: #fff;
}

.info .ui-state-default,
.info .ui-widget-content .ui-state-default,
.info .ui-widget-header .ui-state-default {
  text-align: center;
  line-height: 2.6;
  border: 0;
  background: none;
}

.info .ui-datepicker thead {
  background: #3f4f5f;
}

/*當天日期*/

.info .ui-state-highlight,
.info .ui-widget-content .ui-state-highlight,
.info .ui-widget-header .ui-state-highlight {
  border: solid 2px #b4b4b4;
  color: #454545;
}

/*被點選的日期*/

.info .ui-state-active,
.info .ui-widget-content .ui-state-active,
.info .ui-widget-header .ui-state-active {
  background: #00bfe1;
  color: #fff;
}

/*休館日 不可點選*/

.info .DisableDate {
  background: #dfdfdf;
  color: #fff;
  cursor: not-allowed;
}

/*上個月 下個月 切換按鈕*/

.info .ui-datepicker .ui-datepicker-prev,
.info .ui-datepicker .ui-datepicker-next {
  height: 90px;
  width: 90px;
  background: #fff;
}

.info .ui-datepicker .ui-datepicker-prev {
  background: url('../images/prev.png')
}

.info .ui-datepicker .ui-datepicker-next {
  background: url('../images/next.png')
}

.info .ui-widget-header .ui-icon {
  background: none;
}

.info .ui-datepicker .ui-datepicker-prev-hover,
.info .ui-datepicker .ui-datepicker-next-hover {
  border: 0;
}

/*內頁操作按鈕*/

.info .BTN {
  width: 100%;
  font-size: 38px;
  position: static;
  margin-bottom: 30px;
}

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

.info .BTN a.Notice,
.info .BTN a.Normal {
  display: block;
  width: calc(100% / 2 - 4px);
  height: 100px;
  float: left;
  text-align: center;
  color: #fff;
  border-radius: 7px;
  margin: 0 2px;
  line-height: 2.6;
}

.info .BTN a.Normalbig {
  display: block;
  width: calc(100% / 1 - 4px);
  height: 100px;
  float: left;
  text-align: center;
  color: #fff;
  border-radius: 7px;
  margin: 0 2px;
  line-height: 2.6;
}

.info .BTN a.Notice {
  background: #00bfe1;
}

.info .BTN a.Normal {
  background: #3f4f5f;
}

.info .BTN a.Normalbig {
  background: #3f4f5f;
}

.info .BTN a.Single {
  display: block;
  width: 50%;
  height: 100px;
  margin: 0 auto;
  background: #3f4f5f;
  text-align: center;
  color: #fff;
  border-radius: 7px;
  line-height: 2.6;
}

/*零星時段、現場等位 操作按鈕*/

.info .BTN a.Sporadic,
.info .BTN a.Waiting {
  display: block;
  width: calc(100% / 2 - 4px);
  float: left;
  text-align: center;
  color: #fff;
  border-radius: 7px;
  margin: 0 2px;
  padding: 20px 20px 40px;
  line-height: 2.6;
}

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

/*零星時段*/

.info .BTN a.Waiting {
  background: #03467c;
}

/*現場等位*/

.info .BTN a.Sporadic span,
.info .BTN a.Waiting span {
  color: #fff;
  font-size: 28px;
  line-height: 1.6;
}

/*現場登記*/

.seat-number {
  text-align: center;
  font-size: 42px;
  margin-bottom: 60px;
}

.seat-number h4 {
  font-weight: normal;
  line-height: 2;
}

.seat-number p {
  line-height: 2;
  font-size: 42px;
}

.seat-number .border {
  border: solid 1px #094b77;
  border-radius: 8px;
  width: fit-content;
  margin: 0 auto;
  padding: 25px 15px;
}

.seat-number .border.W600 {
  width: 600px !important;
  margin-bottom: 30px;
}

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

.seat-number .border>span {
  margin: 0 15px;
}

/*等位*/

.wait-seat {
  margin-bottom: 50px;
}

.wait-seat h2 {
  font-size: 80px;
  letter-spacing: 2px;
  margin: 0;
}

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

.wait-seat .QR,
.wait-seat .Number,
.wait-seat .Person {
  /* 原有QRCODE 三個一排 */
  width: calc(100% / 3 - 10px);
  /* width: calc(100% / 2 - 10px); */
  float: left;
  height: 200px;
  overflow: hidden;
  text-align: center;
}

.wait-seat .Number,
.wait-seat .Person {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wait-seat .Number {
  margin: 0 10px;
  color: #fff;
  background: #00bfe1;
}

.wait-seat .Number h2 {
  color: #fff;
  line-height: normal;
}

.wait-seat .Person h2 {
  line-height: normal;
}

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

/*選擇日期*/

.Date-picker {}

.Date-picker .Heading {
  margin-bottom: 50px
}

.Date-picker .Heading h2 {
  font-size: 42px;
  color: #314b65;
  line-height: 2;
}

.Date-picker .Heading p {
  color: #00bfe1;
}

.tip {
  width: 700px;
  margin: 30px auto;
}

.tip p {
  margin: 0;
}

.tip span.NowDate,
.tip span.Active,
.tip span.DisableDate {
  float: left;
  width: 30px;
  height: 30px;
  margin-top: 16px;
  margin-right: 25px
}

.tip span.NowDate {
  border: solid 2px #b4b4b4;
}

.tip span.Active {
  background: #00bfe1;
}

.tip span.DisableDate {
  background: #dfdfdf;
}

.tip span.Full,
.tip span.Less,
.tip span.Noseat {
  float: left;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-top: 16px;
  margin-right: 25px
}

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

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

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

/*選擇時段*/

.Picked {
  margin-bottom: 50px;
}

.Picked h3 {
  color: #26292d !important;
  border-bottom: solid 1px #26292d;
}

.Picked table {
  margin: 20px 0;
  font-size: 28px;
}

.Picked table a {
  display: block;
  line-height: 2.6;
  color: #3f4f5f;
}

.Picked table thead {
  line-height: 2.6;
}

.Picked table .Active {
  background: #00bfe1;
  color: #fff !important;
}

.Picked table .NowDate {
  border: solid 2px #b4b4b4;
  color: #3f4f5f;
}

.Picked table .prev,
.Picked table .next {
  width: 60px;
  height: 60px;
  text-indent: -9999px;
}

.Picked table .prev {
  background: url('../images/prev-Blue.png');
}

.Picked table .next {
  background: url('../images/next-Blue.png');
}

/*時段*/

.section {
  border: solid 1px #bdc1c2;
  display: flex;
  margin-bottom: 1.25rem;
}

.section .pupu {
  width: calc(100% / 3);
  min-height: 360px;
  text-align: center;
  padding-bottom: 20px;
  letter-spacing: 0;
  border-right: solid 1px #bdc1c2;
}

.section .pupu:nth-child(3) {
  border-right: 0px;
}

.section .pupu h3 {
  font-size: 32px;
  line-height: 3.5;
  color: #000;
  font-weight: normal;
  letter-spacing: 5px;
}

.section .pupu a {
  border-top: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
  display: block;
  font-size: 28px;
  line-height: 80px;
  color: #000;
}

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

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

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

.section .pupu span {
  display: inline-block;
  background: #4f6172;
  /*座位預設充足*/
  border-radius: 50%;
  line-height: 50px;
  width: 50px;
  color: #fff;
  margin: 0 10px;
}

.section .pupu .Active {
  background: #00bfe1;
  color: #fff;
}

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

.section .pupu .Less>span {
  background: #eb6153;
}

/*座位稀少*/

.section .pupu .Noseat>span {
  background: #b9bcbf;
}

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

/*閱讀座位定位*/

.Seats {
  position: relative;
  width: 768px;
  height: 812px;
  left: 200px;
  top: 240px;
  /*background: url('../images/seat.jpg') left top no-repeat;*/
}

.Seats.onsite {
  background: url('../images/seat_onsite.png') left top no-repeat !important;
}

/*大區塊*/

.Seats .Plate {
  position: absolute;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  height: 115px;
  width: 66px;
}

.Seats .Plate.Double {
  position: absolute;
  height: 31px;
  width: 66px;
}

.Seats .Plate.Single {
  position: absolute;
  height: 31px;
  width: 31px;
}

.space-btw {
  justify-content: space-between;
}

.Seats .Plate a {
  display: block;
  float: left;
  border-radius: 5px;
  background: #445464;
  font-size: 1.2rem;
  line-height: 31px;
  text-align: center;
  /*display: table-cell;
	vertical-align: middle;*/
  color: #fff;
  width: 31px;
  height: 31px;
  /* margin-right: 2px; */
  ;
}

.R90 a {
  transform: rotate(90deg);
}

.R180 a {
  transform: rotate(180deg);
}

.R270 a {
  transform: rotate(270deg);
}

.Seats .Plate div:nth-of-type(3),
.Seats .Plate div:nth-of-type(4) {
  align-self: flex-end;
}

.Seats .Plate.rtl a {
  float: left;
}

/*左邊至右*/

.Seats .Plate.Vertical {
  width: 60px;
}

.Seats .Plate.Vertical a {
  margin-right: 0;
  margin-bottom: 4px;
}

/*直排座位*/

/**/

.Seats .Plate.Vertical.MB80>div>a {
  margin-bottom: 22.5px;
}

/*座位編號+時間*/

.Seats .Plate a p {
  border-bottom: solid 1px rgba(255, 255, 255, .3);
}

.Seats .Plate a p,
.Seats .Plate a .Time {
  font-size: 18px;
  line-height: 29px;
}

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

/*.Seats .Plate div{ margin-bottom: 6px; }*/

/*按鈕狀態設定*/

/*目前選擇*/

.Seats .Plate a.Active {
  background: #1db3d2;
  color: #fff;
}

/*已被預約*/

.Seats .Plate a.Reserved {
  background: #fff;
  color: #dfdfdf;
  cursor: not-allowed;
  border: solid 1px #dfdfdf;
}

/*不開放  */

.Seats .Plate a.Not-open {
  background: #dfdfdf;
  color: #fff;
  cursor: not-allowed;
}

/*暫時離開*/

.Seats .Plate a.Leave {
  /* background: rgba(159, 151, 192, .5); */
  background: rgb(207, 203, 223);
  color: #fff;
  cursor: not-allowed;
}

/*座位按鈕大小設定*/

/*寬按鈕 80x50
.Seats .Plate.Wide div a{
	width: 80px;
	height: 50px;
}*/

/*直按鈕 50x80
.Seats .Plate.High div a{
	width: 50px;
	height: 80px;
}*/

/*斜的按鈕 45x70
.Seats .Plate.Slanting div a{
	width: 70px;
	height: 45px;
}*/

/*桌子水平並排 無框線*/

.Seats .Plate.W150 {
  width: 150px;
}

.Seats .Plate.W200 {
  width: 200px;
}

.Seats .Plate.W500 {
  width: 500px;
}

.Seats .Plate.W600 {
  width: 600px;
}

.Seats .Plate.W150 a,
.Seats .Plate.W200 a,
.Seats .Plate.W250 a {
  float: left;
  display: block;
  /*width: 80px;*/
  margin-bottom: 2px;
}

/*寬按鈕 同桌框線*/

.Seats .Plate.Wide.Border {
  border: solid 1px #a29797;
  padding: 3px;
  background: #fff;
  box-sizing: border-box;
  width: 176px
}

.Seats .Plate.Wide.Border div {
  float: left;
  display: block;
  width: 80px;
  margin: 2px;
}

/*直按鈕 同桌框線 2人一組*/

.Seats .Plate.High.Border-2P {
  border: solid 1px #a29797;
  padding: 3px;
  background: #fff;
  box-sizing: border-box;
}

.Seats .Plate.High.Border-2P div {
  display: block;
  width: 50px;
  margin: 2px;
}

/*直按鈕 同桌框線 4~6人一組*/

.Seats .Plate.High.Border {
  border: solid 1px #a29797;
  padding: 3px;
  background: #fff;
  box-sizing: border-box;
  width: 118px
}

.Seats .Plate.High.Border div {
  float: left;
  display: block;
  width: 50px;
  margin: 2px;
}

/*直按鈕 3人一組*/

.Seats .Plate.High.people {}

.Seats .Plate.High.people div {
  float: left;
  display: block;
  width: 50px;
  margin: 5px;
}

/* 燈箱樣式 */

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;
}

.modal-content {
  color: #445061;
  line-height: 1.8;
  margin-bottom: 30px;
  background-color: #fff;
  padding: 70px 36px 120px 36px;
  width: 840px;
  /* height: 820px; */
}

.modal-content span {
  color: #00bfe1;
}

.modal-header {
  /* display: flex; */
  padding-bottom: 14px;
  position: relative;
}

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

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

.modal-header .close:hover {
  background-color: #ccc;
}

/* 加載畫面 */

.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;
}

/* 列印收據 */
#printable div {
  padding: 10px 0px;
}