@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Roboto");
@import url("https://fonts.googleapis.com/css?family=Lato");
:root {
  --bg-color: #eaeaea;
  --bg-nav: #f9f9f9;
  --bg-box: #f9f9f9;
  --font-color: #555;
  --main-color: #3399cc;
  --legend-color: #6e0caf;
  --primary-font: "Lato", Helvetica, Arial, 微軟正黑體,新細明體, sans-serif;
}

ul.sortmenu li {
  --border-sort:#ffc019;
}

.ui-state-default {
  --bg-sort-default: #ffe9c1;
}

.ui-state-highlight {
  --bg-sort-hightlight: #ffb735;
}

.kiosk-info > .box-group .list-item .list-title,
.kiosk-info > .list-item {
  --bg-list-title: #76578b;
}

.switch-button-background {
  --bg-switch: #66da6a;
}

.switch-button-background, .switch-button-button {
  --border-switch-btn: #ccc;
}

.switch-button-label.on {
  --color-switch-on: #45d62c;
}

.switch-button-label.off {
  --color-switch-off: #555;
}

.comps-daily {
  --bg-compsItem: #e8dfeb;
}

table.dataTable thead {
  --bg-thead: #7029a1;
}

table.dataTable thead th {
  --border-bottom-thead: #aa1ed7;
}

table.dataTable tbody tr.active, table.dataTable tbody tr:hover.active,
table.dataTable tr.odd:hover, table.dataTable tr.even:hover {
  --bg-td-hover: #fbecff;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden], template {
  display: none;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

html,
button,
input,
select,
textarea {
  font-family: sans-serif;
}

body {
  margin: 0;
}

a {
  background: transparent;
}
a:focus {
  outline: thin dotted;
}
a:hover, a:active {
  outline: 0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}

h3 {
  font-size: 1.17em;
  margin: 1em 0;
}

h4 {
  font-size: 1em;
  margin: 1.33em 0;
}

h5 {
  font-size: 0.83em;
  margin: 1.67em 0;
}

h6 {
  font-size: 0.75em;
  margin: 2.33em 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

mark {
  background: #ff0;
  color: #000;
}

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

q {
  quotes: "“" "”" "‘" "’";
}

q:before,
q:after {
  content: "";
  content: none;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
  white-space: normal;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
}

button,
input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
input[disabled] {
  cursor: default;
}

input[type=checkbox],
input[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

input[type=search] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* adjust safari height 100% */
*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

html, body {
  height: 100%;
}

/* adjust if left height must be 100% */
body {
  background: var(--bg-color);
  color: var(--font-color);
  font-family: var(--primary-font);
  font-size: 16px;
  line-height: normal;
}

a {
  color: var(--main-color);
  text-decoration: none;
}

a:link, a:hover, a:visited, a:active {
  border: none;
  outline: none;
}

a, img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

a:focus, input:focus, textarea:focus, select:focus {
  outline: 0;
}

input, textarea, select {
  -webkit-appearance: none;
}

input::-moz-placeholder {
  opacity: 1;
}

input, select {
  height: 40px;
  line-height: 40px;
  padding: 0px 10px;
}

input:focus {
  -webkit-box-shadow: 0 0 3px #461b8d;
          box-shadow: 0 0 3px #461b8d;
  border: solid 1px #330976;
}

input:-moz-read-only {
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px #ddd;
  font-size: 0.9em;
  -moz-transition: 0.3s linear border;
  transition: 0.3s linear border;
}

input[type=text], input[type=password], input[type=email], input[type=url], input[type=date], input[type=month], input[type=time], input[type=datetime], input[type=datetime-local], input[type=week], input[type=number], input[type=search], input[type=tel], input[type=color], input:read-only {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 3px #ddd;
          box-shadow: inset 0 1px 3px #ddd;
  font-size: 0.9em;
  -webkit-transition: 0.3s linear border;
  -o-transition: 0.3s linear border;
  transition: 0.3s linear border;
}

select, textarea {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 3px #ddd;
          box-shadow: inset 0 1px 3px #ddd;
  font-size: 0.9em;
  -webkit-transition: 0.3s linear border;
  -o-transition: 0.3s linear border;
  transition: 0.3s linear border;
}

.clear {
  clear: both;
}

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

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
  /*IE/7/6*/
}

/***************[Layout Css]**************/
.left {
  float: left;
}

.right {
  float: right;
}

.center {
  margin: 0 auto;
  text-align: center;
}

.t-left {
  text-align: left;
}

.t-right {
  text-align: right;
}

.t-center {
  text-align: center;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.hide {
  display: none !important;
}

.show {
  display: block !important;
}

.opacity-show {
  opacity: 1 !important;
}

.opacity-hide {
  opacity: 0 !important;
}

.img100 {
  width: 100%;
}

.txt-green {
  color: #487f06;
}

.txt-orange {
  color: #ff6600;
}

.txt-deep-blue {
  color: #274876;
}

.txt-deep-red {
  color: #850303;
}

.txt-deep-green {
  color: #047109;
}

.txt-white {
  color: #fff;
}

/*指定顏色*/
.txt-black {
  color: #000;
}

.txt-bluegreen {
  color: #089baa;
}

.txt-orange-light {
  color: #ff7a62;
}

.txt-red {
  color: #ff0000;
}

.txt-bold {
  font-weight: bold;
}

.txt-nobold {
  font-weight: normal;
}

.mt-5 {
  margin-top: 5px;
}

.mb-5 {
  margin-bottom: 5px;
}

.mr-5 {
  margin-right: 5px;
}

.ml-5 {
  margin-left: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mr-10 {
  margin-right: 10px;
}

.ml-10 {
  margin-left: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mr-15 {
  margin-right: 15px;
}

.ml-15 {
  margin-left: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mr-20 {
  margin-right: 20px;
}

.ml-20 {
  margin-left: 20px;
}

.mt-25 {
  margin-top: 25px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mr-25 {
  margin-right: 25px;
}

.ml-25 {
  margin-left: 25px;
}

.mt-30 {
  margin-top: 30px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mr-30 {
  margin-right: 30px;
}

.ml-30 {
  margin-left: 30px;
}

.mt-35 {
  margin-top: 35px;
}

.mb-35 {
  margin-bottom: 35px;
}

.mr-35 {
  margin-right: 35px;
}

.ml-35 {
  margin-left: 35px;
}

.mt-40 {
  margin-top: 40px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mr-40 {
  margin-right: 40px;
}

.ml-40 {
  margin-left: 40px;
}

.mt-45 {
  margin-top: 45px;
}

.mb-45 {
  margin-bottom: 45px;
}

.mr-45 {
  margin-right: 45px;
}

.ml-45 {
  margin-left: 45px;
}

.dv2 {
  width: 50%;
}

.dv3 {
  width: 33.3333333333%;
}

.dv4 {
  width: 25%;
}

.dv5 {
  width: 20%;
}

.dv6 {
  width: 16.6666666667%;
}

.dv7 {
  width: 14.2857142857%;
}

.dv8 {
  width: 12.5%;
}

.dv9 {
  width: 11.1111111111%;
}

/*指定文字大小*/
.ft13 {
  font-size: 13px;
}

.ft14 {
  font-size: 14px;
}

.ft15 {
  font-size: 15px;
}

.ft16 {
  font-size: 16px;
}

.ft17 {
  font-size: 17px;
}

.ft18 {
  font-size: 18px;
}

.ft19 {
  font-size: 19px;
}

.ft20 {
  font-size: 20px;
}

/*************************/
.loading-wrap {
  margin: 2em auto;
  padding: 1em;
  text-align: center;
  width: 100%;
}

.no-data {
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, #b96c06), to(transparent));
  background: -o-linear-gradient(left, transparent 0%, #b96c06 50%, transparent 100%);
  background: linear-gradient(90deg, transparent 0%, #b96c06 50%, transparent 100%);
  color: #fff3ce;
  font-size: em(20);
  margin: 2em auto;
  padding: 0.7em;
  text-align: center;
  width: 70%;
}

/***************[Button]**************/
.btn-wrap {
  text-align: center;
  width: 100%;
}

button {
  background: #027db2;
  background: -webkit-gradient(linear, left top, left bottom, from(#0495c6), color-stop(50%, #027db2), to(#06639e));
  background: -o-linear-gradient(#0495c6 0%, #027db2 50%, #06639e 100%);
  background: linear-gradient(#0495c6 0%, #027db2 50%, #06639e 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#8d15e7), color-stop(50%, #6008b1), to(#330976));
  background: -o-linear-gradient(#8d15e7 0%, #6008b1 50%, #330976 100%);
  background: linear-gradient(#8d15e7 0%, #6008b1 50%, #330976 100%);
  border: none;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  min-width: 100px;
  padding: 0 10px;
  width: auto;
}
button:hover, button:focus, button:active {
  background: -webkit-gradient(linear, left top, left bottom, from(#ae4bf9), color-stop(50%, #874cbd), to(#311e50));
  background: -o-linear-gradient(#ae4bf9 0%, #874cbd 50%, #311e50 100%);
  background: linear-gradient(#ae4bf9 0%, #874cbd 50%, #311e50 100%);
}
button.small {
  display: inline-block;
  font-weight: normal;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  min-width: 100px;
  width: auto;
}

button:focus, button:active {
  outline: 0;
}

button.btn-aid {
  background: #965d09;
  background: -webkit-gradient(linear, left top, left bottom, from(#6651e5), to(#3d1878));
  background: -o-linear-gradient(top, #6651e5, #3d1878 100%);
  background: linear-gradient(180deg, #6651e5, #3d1878 100%);
}
button.btn-aid:hover, button.btn-aid:focus, button.btn-aid:active {
  background: -webkit-gradient(linear, left top, left bottom, from(#8075ff), to(#56378d));
  background: -o-linear-gradient(top, #8075ff, #56378d 100%);
  background: linear-gradient(180deg, #8075ff, #56378d 100%);
}

button.btn-cancel {
  background: #965d09;
  background: -webkit-gradient(linear, left top, left bottom, from(#582b9c), to(#1d064c));
  background: -o-linear-gradient(top, #582b9c, #1d064c 100%);
  background: linear-gradient(180deg, #582b9c, #1d064c 100%);
}
button.btn-cancel:hover, button.btn-cancel:focus, button.btn-cancel:active {
  background: -webkit-gradient(linear, left top, left bottom, from(#3d1e6b), to(#1e0842));
  background: -o-linear-gradient(top, #3d1e6b, #1e0842 100%);
  background: linear-gradient(180deg, #3d1e6b, #1e0842 100%);
}

button.red {
  background: #b20719;
  background: -webkit-gradient(linear, left top, left bottom, from(#d90d18), to(#b20719));
  background: -o-linear-gradient(top, #d90d18 0%, #b20719 100%);
  background: linear-gradient(180deg, #d90d18 0%, #b20719 100%);
}
button.red:hover, button.red:focus, button.red:active {
  background: -webkit-gradient(linear, left top, left bottom, from(#c01203), to(#900801));
  background: -o-linear-gradient(#c01203 0%, #900801);
  background: linear-gradient(#c01203 0%, #900801);
}

button.orange {
  background: #b93d01;
  background: -webkit-gradient(linear, left top, left bottom, from(#e16d08), to(#b93d01));
  background: -o-linear-gradient(#e16d08 0%, #b93d01 100%);
  background: linear-gradient(#e16d08 0%, #b93d01 100%);
}
button.orange:hover, button.orange:focus, button.orange:active {
  background: -webkit-gradient(linear, left top, left bottom, from(#d85406), to(#a52c01));
  background: -o-linear-gradient(#d85406 0%, #a52c01);
  background: linear-gradient(#d85406 0%, #a52c01);
}

button.purple {
  background: #6111eb;
  background: -webkit-gradient(linear, left top, left bottom, from(#7538ef), to(#5710e8));
  background: -o-linear-gradient(#7538ef 0%, #5710e8 100%);
  background: linear-gradient(#7538ef 0%, #5710e8 100%);
}
button.purple:hover, button.purple:focus, button.purple:active {
  background: -webkit-gradient(linear, left top, left bottom, from(#581beb), to(#4312b1));
  background: -o-linear-gradient(#581beb 0%, #4312b1);
  background: linear-gradient(#581beb 0%, #4312b1);
}

button.blue-green {
  background: #068a9e;
  background: #240189;
}
button.blue-green:hover, button.blue-green:focus, button.blue-green:active {
  background: #2f04b3;
}

button.red:disabled, button.red:disabled:hover,
button.orange:disabled, button.orange:disabled:hover,
button.purple:disabled, button.purple:disabled:hover,
button.blue-green:disabled, button.blue-green:disabled:hover {
  background: #8e8d8d;
  background: -webkit-gradient(linear, left top, left bottom, from(#565656), to(#8e8d8d));
  background: -o-linear-gradient(top, #565656 0%, #8e8d8d);
  background: linear-gradient(180deg, #565656 0%, #8e8d8d);
}

/** can not click **/
button:disabled {
  background: #8e8d8d;
  background: -webkit-gradient(linear, left top, left bottom, from(#565656), to(#8e8d8d));
  background: -o-linear-gradient(top, #565656 0%, #8e8d8d);
  background: linear-gradient(180deg, #565656 0%, #8e8d8d);
}
button:disabled:hover {
  background: #8e8d8d;
  background: -webkit-gradient(linear, left top, left bottom, from(#565656), to(#8e8d8d));
  background: -o-linear-gradient(top, #565656 0%, #8e8d8d);
  background: linear-gradient(180deg, #565656 0%, #8e8d8d);
}

/* keyboard - jQuery UI Widget */
.ui-keyboard {
  background: #e9e4ff;
  -webkit-box-shadow: 0px 2px 0px #a294da;
          box-shadow: 0px 2px 0px #a294da;
  text-align: center;
  padding: 0.3em;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8900;
  /* see issue #484 */
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

.ui-keyboard-has-focus {
  z-index: 8901;
}

.ui-keyboard div {
  font-size: 1.1em;
}

.ui-keyboard[contenteditable] {
  white-space: pre;
}

.ui-keyboard-button {
  height: 2em;
  min-width: 2em;
  margin: 0.15em;
  cursor: pointer;
  overflow: hidden;
  line-height: 2em;
  padding: 0 5px;
  -moz-user-focus: ignore;
}

.ui-keyboard-button.ui-corner-all {
  border-radius: 4px;
}

.ui-keyboard-button.ui-state-default {
  background: -webkit-gradient(linear, left top, left bottom, from(#7355eb), to(#54149b));
  background: -o-linear-gradient(#7355eb 0%, #54149b 100%);
  background: linear-gradient(#7355eb 0%, #54149b 100%);
  border: none;
}

.ui-keyboard-button.ui-state-default.ui-state-hover {
  background: #74569f;
  -webkit-box-shadow: 0 0 5px #fff, 0 0 8px #fff;
          box-shadow: 0 0 5px #fff, 0 0 8px #fff;
}

.ui-keyboard-button.ui-state-default.ui-state-active {
  background: -webkit-gradient(linear, left top, left bottom, from(#88addf), to(#5662b5));
  background: -o-linear-gradient(#88addf 0%, #5662b5 100%);
  background: linear-gradient(#88addf 0%, #5662b5 100%);
}
.ui-keyboard-button.ui-state-default.ui-state-active.ui-state-hover {
  background: #88addf;
}

.ui-keyboard-button span {
  color: #fff;
  font-family: var(--primary-font);
  padding: 0;
  margin: 0;
  white-space: nowrap;
  display: inline-block;
}

.ui-keyboard-button-endrow {
  clear: left;
}

.ui-keyboard-space {
  width: 15em;
}

/* see http://nicolasgallagher.com/another-css-image-replacement-technique/ */
.ui-keyboard-space span, .ui-keyboard-empty span {
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}

.ui-keyboard-preview-wrapper {
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* width is calculated in IE, since 99% = 99% full browser width =( */
.ui-keyboard-preview {
  text-align: left;
  margin: 0 0 3px 0;
  display: inline;
  width: 99%;
}

.ui-keyboard-keyset {
  text-align: center;
  white-space: nowrap;
}

.ui-keyboard-input {
  text-align: left;
}

.ui-keyboard-input-current {
  -webkit-box-shadow: 0 0 5px #fbdd78;
  box-shadow: 0 0 5px #fbdd78;
}

.ui-keyboard-placeholder {
  color: #888;
}

/* disabled or readonly inputs, or use
 input[disabled='disabled'] { color: #f00; } */
.ui-keyboard-nokeyboard {
  color: #888;
  border-color: #888;
}

.ui-keyboard-spacer {
  display: inline-block;
  width: 1px;
  height: 0;
  cursor: default;
}

.ui-keyboard-NBSP span, .ui-keyboard-ZWSP span, .ui-keyboard-ZWNJ span,
.ui-keyboard-ZWJ span, .ui-keyboard-LRM span, .ui-keyboard-RLM span {
  font-size: 0.5em;
  line-height: 1.5em;
  white-space: normal;
}

/* combo key styling - toggles diacritics on/off */
.ui-keyboard-button.ui-keyboard-combo.ui-state-default {
  border-color: #ffaf0f;
}

/* (in)valid inputs */
button.ui-keyboard-accept.ui-keyboard-valid-input {
  border-color: #0c0;
  background: #080;
  color: #fff;
}

button.ui-keyboard-accept.ui-keyboard-valid-input:not([disabled]):hover {
  background: #0a0;
}

button.ui-keyboard-accept.ui-keyboard-invalid-input {
  border-color: #c00;
  background: #800;
  color: #fff;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

button.ui-keyboard-accept.ui-keyboard-invalid-input:not([disabled]):hover {
  background: #a00;
}

/*** Caret extension definition ***/
/* margin-top => is added to the caret height (top & bottom) */
.ui-keyboard-caret {
  background: #c00;
  width: 1px;
  margin-top: 3px;
}

/*** jQuery Mobile definitions ***/
/* jQuery Mobile styles - need wider buttons because of font size and
 text-overflow:ellipsis */
div.ui-body.ui-keyboard button.ui-keyboard-button.ui-btn {
  padding: 0.5em 1em;
  border-color: transparent;
}

.ui-body .ui-keyboard-button {
  width: 3em;
  height: 3em;
  display: inline-block;
}

.ui-body .ui-keyboard-widekey {
  width: 5.5em;
}

.ui-body .ui-keyboard-space {
  width: 15em;
}

.ui-body .ui-keyboard-space span {
  visibility: hidden;
  /* hides the ellipsis */
}

.ui-body .ui-keyboard-keyset {
  line-height: 0.5em;
}

.ui-body input.ui-input-text, .ui-body textarea.ui-input-text {
  width: 95%;
}

/* over-ride padding set by mobile ui theme - needed because the mobile script
 wraps button text with several more spans */
.ui-body .ui-btn-inner {
  height: 2em;
  padding: 0.2em 0;
  margin: 0;
}

.ui-body .ui-btn {
  margin: 0;
  font-size: 13px;
  /* mobile default size is 13px */
}

/* override Bootstrap excessive button padding */
button.ui-keyboard-button.btn {
  padding: 1px 6px;
}

/* enable/disable icons */
button.ui-keyboard-toggle span {
  width: 0.8em;
  height: 0.8em;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

/* unlocked icon (keyboard enabled) */
button.ui-keyboard-toggle span {
  /* light theme unlocked icon - fill: #111 */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iIzExMSI+PHBhdGggZD0iTTguNyw0LjRINy41SDUuMHYtMS45YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40LDAtMi41LDEuMS0yLjUsMi41djEuOWgxLjIgdi0xLjljMC0wLjcsMC42LTEuMiwxLjItMS4yczEuMiwwLjYsMS4yLDEuMnYxLjljLTAuNywwLTEuMiwwLjYtMS4yLDEuMlY4LjggYzAsMC43LDAuNiwxLjIsMS4yLDEuMmg1LjBDOS40LDEwLDEwLDkuNCwxMCw4LjhWNS42QzEwLDUuMCw5LjQsNC40LDguOCw0LjR6IE02LjYsNy40djEuMCBjMCwwLjItMC4xLDAuMy0wLjMsMC4zUzYuMCw4LjYsNi4wLDguNFY3LjRjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zLDAuMy0wLjYsMC42LTAuNiBTNi45LDYuNiw2LjksNi45QzYuOSw3LjEsNi44LDcuMyw2LjYsNy40eiIvPjwvc3ZnPg==);
}

.ui-keyboard-dark-theme button.ui-keyboard-toggle span {
  /* dark theme unlocked icon - fill: #eee */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2VlZSI+PHBhdGggZD0iTTguNyw0LjRINy41SDUuMHYtMS45YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40LDAtMi41LDEuMS0yLjUsMi41djEuOWgxLjIgdi0xLjljMC0wLjcsMC42LTEuMiwxLjItMS4yczEuMiwwLjYsMS4yLDEuMnYxLjljLTAuNywwLTEuMiwwLjYtMS4yLDEuMlY4LjggYzAsMC43LDAuNiwxLjIsMS4yLDEuMmg1LjBDOS40LDEwLDEwLDkuNCwxMCw4LjhWNS42QzEwLDUuMCw5LjQsNC40LDguOCw0LjR6IE02LjYsNy40djEuMCBjMCwwLjItMC4xLDAuMy0wLjMsMC4zUzYuMCw4LjYsNi4wLDguNFY3LjRjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zLDAuMy0wLjYsMC42LTAuNiBTNi45LDYuNiw2LjksNi45QzYuOSw3LjEsNi44LDcuMyw2LjYsNy40eiIvPjwvc3ZnPg==);
}

/* locked icon (keyboard disabled) */
button.ui-keyboard-toggle.ui-keyboard-disabled span {
  /* light theme locked icon - fill: #111 */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iIzExMSI+PHBhdGggZD0iTTcuNCA0LjRWMi41YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40IDAtMi41IDEuMS0yLjUgMi41djEuOSBjLTAuNyAwLTEuMiAwLjUtMS4yIDEuMnYzLjFDMS4zIDkuNCAxLjggMTAgMi41IDEwaDQuOWMwLjcgMCAxLjItMC42IDEuMi0xLjJWNS42IEM4LjcgNC45IDguMSA0LjQgNy40IDQuNHogTTUuMyA3LjR2MS4wYzAgMC4yLTAuMSAwLjMtMC4zIDAuM2MtMC4yIDAtMC4zLTAuMS0wLjMtMC4zVjcuNCBjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zIDAuMy0wLjYgMC42LTAuNmMwLjMgMCAwLjYgMC4zIDAuNiAwLjYgQzUuNiA3LjEgNS41IDcuMyA1LjMgNy40eiBNNi4yIDQuNEgzLjdWMi41YzAtMC43IDAuNS0xLjIgMS4yLTEuMmMwLjcgMCAxLjIgMC42IDEuMiAxLjIgVjQuNHoiLz48L3N2Zz4=);
}

.ui-keyboard-dark-theme button.ui-keyboard-toggle.ui-keyboard-disabled span {
  /* dark theme locked icon - fill: #eee */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iI2VlZSI+PHBhdGggZD0iTTcuNCA0LjRWMi41YzAtMS40LTEuMS0yLjUtMi41LTIuNWMtMS40IDAtMi41IDEuMS0yLjUgMi41djEuOSBjLTAuNyAwLTEuMiAwLjUtMS4yIDEuMnYzLjFDMS4zIDkuNCAxLjggMTAgMi41IDEwaDQuOWMwLjcgMCAxLjItMC42IDEuMi0xLjJWNS42IEM4LjcgNC45IDguMSA0LjQgNy40IDQuNHogTTUuMyA3LjR2MS4wYzAgMC4yLTAuMSAwLjMtMC4zIDAuM2MtMC4yIDAtMC4zLTAuMS0wLjMtMC4zVjcuNCBjLTAuMi0wLjEtMC4zLTAuMy0wLjMtMC41YzAtMC4zIDAuMy0wLjYgMC42LTAuNmMwLjMgMCAwLjYgMC4zIDAuNiAwLjYgQzUuNiA3LjEgNS41IDcuMyA1LjMgNy40eiBNNi4yIDQuNEgzLjdWMi41YzAtMC43IDAuNS0xLjIgMS4yLTEuMmMwLjcgMCAxLjIgMC42IDEuMiAxLjIgVjQuNHoiLz48L3N2Zz4=);
}

.ui-keyboard.ui-keyboard-disabled button:not(.ui-keyboard-toggle),
.ui-keyboard.ui-keyboard-disabled input {
  opacity: 0.5;
}

/*** Alt-Keys Popup extension ***/
/* clickable overlay on top of keyboard to hide the popup */
.ui-keyboard-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}

/* the actual popup styling, class names from the css.container option are also
 added */
.ui-keyboard-popup {
  display: inline-block;
  /* default buttons are 2em wide + .1em margin on either side (set in
  .ui-keyboard-button definition); so use multiples of 2.2em for a max-width
  if you don't want any extra white space on the sides, e.g.
  5 buttons * 2.2em = 11em,
  6 buttons * 2.2em = 13.2em, etc
  */
  max-width: 22em;
  /* 10 buttons */
}

/*** Extender keyboard extension ***/
div.ui-keyboard-extender {
  margin-left: 5px;
}

button.ui-keyboard-extender span {
  width: 0.9em;
  height: 0.9em;
  display: inline-block;
  margin-bottom: 3px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  /* light theme extender icon - fill: #111 */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3R5bGU9ImZpbGw6IzExMSI+PGc+PHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzExMSIgZD0iTSAwLjUsNC41IDE1LjUsNC41IDE1LjUsMTUuNSAwLjUsMTUuNSBaIj48L3BhdGg+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMiIgeT0iNiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjYiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSI4IiB5PSI2Ij48L3JlY3Q+PHBhdGggZD0ibSAxMSw2IDMsMCAwLDUgLTIsMCAwLC0zIC0xLDAgeiI+PC9wYXRoPjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSI2IiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjEyIj48L3JlY3Q+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iOSIgeT0iOSI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjYiIHk9IjkiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHg9IjIiIHk9IjkiPjwvcmVjdD48L2c+PC9zdmc+);
}

.ui-keyboard-dark-theme button.ui-keyboard-extender span {
  /* dark theme extender icon - fill: #eee */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgc3R5bGU9ImZpbGw6I2VlZSI+PGc+PHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2VlZSIgZD0iTSAwLjUsNC41IDE1LjUsNC41IDE1LjUsMTUuNSAwLjUsMTUuNSBaIj48L3BhdGg+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iMiIgeT0iNiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjYiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSI4IiB5PSI2Ij48L3JlY3Q+PHBhdGggZD0ibSAxMSw2IDMsMCAwLDUgLTIsMCAwLC0zIC0xLDAgeiI+PC9wYXRoPjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjEyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSI2IiBoZWlnaHQ9IjIiIHg9IjUiIHk9IjEyIj48L3JlY3Q+PHJlY3Qgd2lkdGg9IjIiIGhlaWdodD0iMiIgeD0iOSIgeT0iOSI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHg9IjYiIHk9IjkiPjwvcmVjdD48cmVjdCB3aWR0aD0iMiIgaGVpZ2h0PSIyIiB4PSIyIiB5PSIxMiI+PC9yZWN0PjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHg9IjIiIHk9IjkiPjwvcmVjdD48L2c+PC9zdmc+);
}

/* Media Queries (optimized for jQuery UI themes;
 may be slightly off in jQuery Mobile themes) */
/* 240 x 320 (small phone)  */
@media all and (max-width: 319px) {
  .ui-keyboard div {
    font-size: 9px;
  }

  .ui-keyboard .ui-keyboard-input {
    font-size: 12px;
  }

  /* I don't own an iPhone so I have no idea how small this really is... is it
  even clickable with your finger? */
  .ui-body .ui-btn {
    margin: 0;
    font-size: 9px;
  }

  .ui-body .ui-keyboard-button {
    width: 1.8em;
    height: 2.5em;
  }

  .ui-body .ui-keyboard-widekey {
    width: 4em;
  }

  .ui-body .ui-keyboard-space {
    width: 8em;
  }

  .ui-body .ui-btn-inner {
    height: 2.5em;
    padding: 0.3em 0;
  }
}
/* 320 x 480 (iPhone)  */
@media all and (min-width: 320px) and (max-width: 479px) {
  .ui-keyboard div {
    font-size: 9px;
  }

  .ui-keyboard .ui-keyboard-input {
    font-size: 14px;
  }

  /* I don't own an iPhone so I have no idea how small this really is... is it
  even clickable with your finger? */
  .ui-body .ui-btn {
    margin: 0;
    font-size: 11px;
  }

  .ui-body .ui-keyboard-button {
    width: 1.8em;
    height: 3em;
  }

  .ui-body .ui-keyboard-widekey {
    width: 4.5em;
  }

  .ui-body .ui-keyboard-space {
    width: 10em;
  }

  .ui-body .ui-btn-inner {
    height: 3em;
    padding: 0.7em 0;
  }
}
/* 480 x 640 (small tablet) */
@media all and (min-width: 480px) and (max-width: 767px) {
  .ui-keyboard div {
    font-size: 13px;
  }

  .ui-keyboard .ui-keyboard-input {
    font-size: 14px;
  }

  .ui-body .ui-btn {
    margin: 0;
    font-size: 10px;
  }

  .ui-body .ui-keyboard-button {
    height: 2.5em;
  }

  .ui-body .ui-btn-inner {
    height: 2.5em;
    padding: 0.5em 0;
  }
}
.ui-widget.ui-widget-content {
  border: 1px solid #b6afbd;
}

/***basic***/
body {
  background-size: 100% 100%;
  background-attachment: fixed;
}

a:hover, a:active {
  color: #0066cc;
  text-decoration: underline;
}

/***structure***/
.mask {
  background: rgba(248, 248, 248, 0.1);
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 1;
  height: 100%;
  width: 100%;
}

.wrapper {
  position: relative;
  z-index: 2;
  height: 100%;
  min-width: 1024px;
  width: 100%;
}

.header {
  background: -webkit-gradient(linear, left top, left bottom, from(#5502b6), color-stop(30%, #330695), to(#150077));
  background: -o-linear-gradient(top, #5502b6 0%, #330695 30%, #150077 100%);
  background: linear-gradient(180deg, #5502b6 0%, #330695 30%, #150077 100%);
  -webkit-box-shadow: 0 0 3px #666;
          box-shadow: 0 0 3px #666;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 56px;
  line-height: 56px;
  padding: 0px;
  position: fixed;
  text-align: left;
  z-index: 99999;
  width: 100%;
  *zoom: 1;
}
.header:after {
  content: " ";
  clear: both;
  display: block;
  overflow: hidden;
  height: 0;
}

.marquee-wrap {
  background: #fbecff;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 3px #666;
          box-shadow: 0 0 3px #666;
  border: none;
  height: 30px;
  margin-top: 56px;
  margin: 62px 8px 6px;
  overflow: hidden;
  position: fixed;
  width: calc(100% - 16px);
  z-index: 999;
}

.side, .main {
  height: calc(100% - 56px - 30px - 6px);
  margin-top: calc(56px + 30px + 6px);
  padding: 8px;
  position: relative;
}

.side {
  position: fixed;
  float: left;
  overflow: auto;
  width: 240px;
  z-index: 99999;
}

.main {
  float: right;
  padding: 8px 8px 8px 3px;
  width: calc( 100% - 240px);
  overflow: auto;
  z-index: 1;
}
.main h2 {
  color: #fff;
  font-size: 36px;
  letter-spacing: 1px;
  padding: 40px 0px 30px 32px;
}

.content {
  padding: 0;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.box {
  background: var(--bg-box);
  border-radius: 4px;
  -webkit-box-shadow: 0 0 3px #666;
          box-shadow: 0 0 3px #666;
  margin: 0 auto 0.6em;
  text-align: left;
  width: 100%;
  padding: 10px 20px 20px 20px;
  position: relative;
  border-radius: 4px;
  -webkit-box-shadow: 0px 0px 5px #777;
          box-shadow: 0px 0px 5px #777;
  *zoom: 1;
}
.box:after {
  content: " ";
  clear: both;
  display: block;
  overflow: hidden;
  height: 0;
}
.box legend {
  border-bottom: 1px solid #ddd;
  color: var(--legend-color);
  font-size: 24px;
  font-weight: bold;
  padding: 0 0 5px 0;
  margin: 0 auto 10px;
  width: 100%;
}
.box h1 {
  color: #4c95d3;
  font-weight: normal;
  font-size: 25px;
  width: 100%;
}
.box div {
  line-height: 30px;
}
.box .zoom {
  display: none;
  right: 10px;
  top: 0px;
  position: absolute;
}
@media (min-width: 1025px) {
  .box .zoom {
    display: block;
  }
}

.header h1 {
  color: #fff;
  float: left;
  font-size: 21px;
  font-weight: normal;
  display: block;
  margin: 0;
  padding: 0 0 0 20px;
  text-align: left;
  vertical-align: middle;
  width: auto;
}
.header .breadcrumbs {
  color: #eee;
  font-size: 15px;
  margin-left: 5px;
}
.header .breadcrumbs::before {
  content: "/";
  display: inline-block;
  padding-right: 5px;
}

/*** top area ***/
.top-function {
  float: right;
  height: 56px;
  line-height: 56px;
  width: auto;
  text-align: right;
  *zoom: 1;
}
.top-function:after {
  content: " ";
  clear: both;
  display: block;
  overflow: hidden;
  height: 0;
}

.username {
  background: -webkit-gradient(linear, left top, left bottom, from(#800ee8), to(#5412be));
  background: -o-linear-gradient(top, #800ee8 0%, #5412be 100%);
  background: linear-gradient(180deg, #800ee8 0%, #5412be 100%);
  border: solid 1px #3c0483;
  border-radius: 18px;
  color: #fff;
  font-size: 13px;
  float: left;
  height: 36px;
  line-height: 35px;
  margin: 10px 10px 0 0;
  padding: 0 15px;
  width: auto;
}

/*** language ***/
.Navigation {
  background: -webkit-gradient(linear, left bottom, left top, from(#172a3f), color-stop(50%, #0f1e31), to(#0d1d29));
  background: -o-linear-gradient(bottom, #172a3f 0%, #0f1e31 50%, #0d1d29 100%);
  background: linear-gradient(bottom, #172a3f 0%, #0f1e31 50%, #0d1d29 100%);
  cursor: pointer;
  display: block;
  float: left;
  height: 100%;
  min-width: 120px;
  margin: 0;
  padding: 0px 5px 0px 0px;
  text-align: left;
  *zoom: 1;
}
.Navigation:after {
  content: " ";
  clear: both;
  display: block;
  overflow: hidden;
  height: 0;
}

.Navigation > ul {
  background: url(/static/images/icon_lanN.png) right 14px no-repeat;
  color: #fff;
  font-size: 0.938em;
  float: left;
  display: block;
  height: 100%;
  list-style: none;
  margin: 0 auto;
  padding: 0 1% 0 9%;
  position: relative;
  width: 100%;
  *zoom: 1;
  z-index: 300;
}
.Navigation > ul a {
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
.Navigation > ul li {
  position: relative;
}
.Navigation > ul li a {
  display: block;
  color: #fff;
}
.Navigation > ul > li > a:hover {
  color: #fff;
}
.Navigation > ul li:hover > ul {
  display: block;
}

.Navigation > ul ul {
  display: none;
  float: left;
  position: absolute;
  left: -11px;
  margin: 0;
  padding: 0;
  width: 117%;
  z-index: 200;
}
.Navigation > ul ul li {
  border-bottom: none;
  padding: 0;
  position: relative;
}
.Navigation > ul ul li a {
  background: #041a31;
  color: #fff;
  font-size: 0.918em;
  line-height: 40px;
  padding: 0px 10px 0px 12px;
  position: relative;
  width: 100%;
  height: 100%;
}
.Navigation > ul ul li a:hover {
  background: #02162a;
  color: #FFF;
  font-weight: bold;
  text-decoration: none;
}

/*** log out ***/
.logout {
  display: block;
  float: left;
  font-size: 20px;
  height: 100%;
}
.logout a {
  background: #ff5454;
  color: #FFF;
  display: block;
  height: 100%;
  letter-spacing: 0px;
  text-align: center;
  text-decoration: none;
  padding: 0px 14px;
}
.logout a:hover {
  background: #ff3333;
}

.side {
  background: transparent;
}
.side h1 {
  border-bottom: 1px solid #ddd;
  color: #555;
  font-weight: bold;
  font-size: 1.75em;
  padding: 40px 0px;
}

ul.nav {
  background: var(--bg-nav);
  border-radius: 4px;
  -webkit-box-shadow: 0 0 3px #666;
          box-shadow: 0 0 3px #666;
  color: #000;
  display: block;
  font-size: 1em;
  font-weight: normal;
  height: 100%;
  list-style: none;
  margin: 0 auto;
  overflow-y: auto;
  padding: 0;
  width: 100%;
  z-index: 1000;
  -webkit-overflow-scroll: touch;
}
ul.nav li {
  border-bottom: 1px solid #ccc;
}

ul.nav li a {
  color: #000;
  display: block;
  padding: 16px 0px;
  text-decoration: none;
}
ul.nav li a:link, ul.nav li a:visited {
  padding-left: 19px;
}
ul.nav li a:hover, ul.nav li a:active {
  background: white;
  font-weight: bold;
}
ul.nav li a img {
  height: auto;
  vertical-align: middle;
  width: 26px;
}
ul.nav li a .icon-new {
  background: red;
  border-radius: 50px;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 12px;
  text-decoration: none; }
  ul.nav li a:link, ul.nav li a:visited {
    padding-left: 19px; }
  ul.nav li a:hover, ul.nav li a:active {
    background: white;
    font-weight: bold; }
  ul.nav li a img {
    height: auto;
    vertical-align: middle;
    width: 26px; }
  ul.nav li a .icon-new {
    background: red;
    border-radius: 50px;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;					  
  height: 16px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: revert;
  margin-left: 5px;
  position: relative;
  width: 16px;
}

/*有子選單 title*/
ul.nav li.first_open_active > a {
  background: -webkit-gradient(linear, left top, left bottom, from(#de93e5), to(#995cc3));
  background: -o-linear-gradient(top, #de93e5 0%, #995cc3 100%);
  background: linear-gradient(180deg, #de93e5 0%, #995cc3 100%);
  color: #000;
  font-size: 1.063em;
  font-weight: bold;
  padding-left: 19px;
}

/*第二層*/
ul.nav ul {
  background: #fbecff;
  display: none;
  list-style: none;
  padding: 0;
}
ul.nav ul li {
  border-bottom: none;
  /*公告-子項目縮排*/
  /*選取狀態*/
}
ul.nav ul li a:link, ul.nav ul li a:visited {
  padding: 8px 0px 8px 49px;
}
ul.nav ul li a:hover, ul.nav ul li a:active {
  background: #f2b6ff;
}
ul.nav ul li.sub.second_menu_active a {
  background: #f2b6ff url("../images/icon_reddot.png") 32px 12px no-repeat;
  padding: 8px 0px 8px 55px;
}
ul.nav ul li.sub a {
  color: #497d99;
  padding: 8px 0px 8px 55px;
}
ul.nav ul li.second_menu_active a {
  background: #f2b6ff url("../images/icon_reddot.png") 32px 12px no-repeat;
  font-weight: bold;
  padding: 8px 0px 8px 49px;
}

.side .version-num {
  bottom: 15px;
  color: #999;
  font-size: 12px;
  position: absolute;
  text-align: center;
  width: 100%;
}

.wrap.popup {
  border-radius: 4px;
  padding: 15px;
  overflow: hidden;
  width: 100%;
}

/*headline*/
.headline {
  border-bottom: 1px solid #ddd;
  color: var(--legend-color);
  font-size: 22px;
  font-weight: bold;
  padding: 0 0 5px 0;
  margin: 0 0 10px 0;
  width: 100%;
}

.fancybox-wrap, .fancybox-skin {
  background: transparent;
  border-radius: 8px;
}

.ui-loader {
  display: none;
}

.fancybox-wrap iframe {
  border-radius: 4px;
  overflow-x: hidden;
}

.scroll-text ul {
  color: #cc0000;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
}

.scroll-text ul li {
  font-size: 17px;
  height: auto;
  padding: 4px 8px;
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  white-space: nowrap;
}

.scroll-img {
  border: 1px solid red;
  width: 680px;
  height: 142px;
  overflow: hidden;
  font-size: 0;
}

table.dataTable thead {
  background: var(--bg-thead);
}

table.dataTable thead th {
  border-bottom: 3px solid var(--border-bottom-thead);
  line-height: 20px;
  padding: 4px 9px 4px;
  word-break: keep-all;
}

table.dataTable tbody tr.active, table.dataTable tbody tr:hover.active {
  background: var(--bg-td-hover);
}

table.dataTable tr.odd:hover, table.dataTable tr.even:hover {
  background: var(--bg-td-hover);
}

.ui-selectmenu-button.ui-button {
  background: #fff;
  border: 1px solid #ccc;
  -webkit-box-shadow: inset 0 1px 3px #ddd;
          box-shadow: inset 0 1px 3px #ddd;
  padding: 0 10px;
  height: 36px;
  line-height: 36px;
  width: 90px;
}
.ui-selectmenu-button.ui-button:hover {
  border-radius: 4px;
}
.ui-selectmenu-button.ui-corner-all, .ui-selectmenu-button.ui-corner-top {
  border-radius: 4px;
}
.ui-selectmenu-button .ui-selectmenu-icon.ui-icon {
  margin-top: 10px;
}

/***Content***/
/*headline*/
.contentTitle {
  font-weight: bold;
}

.stone {
  margin-left: 30px;
  vertical-align: middle;
}

/*fill-in-form */
ul.fill-in-form {
  margin: 0 0 20px 0;
  padding: 0;
}
ul.fill-in-form li {
  color: #333;
  display: block;
  height: 40px;
  line-height: 40px;
  margin: 10px 0;
  *zoom: 1;
}
ul.fill-in-form li:after {
  content: " ";
  clear: both;
  display: block;
  overflow: hidden;
  height: 0;
}
ul.fill-in-form li .form-content {
  color: #555;
  font-size: 0.938em;
  font-weight: normal;
  float: left;
  display: table-cell;
  height: 100%;
  line-height: 40px;
  vertical-align: middle;
  width: 70%;
}
ul.fill-in-form li .detail {
  display: block;
  float: left;
  width: 75%;
}
ul.fill-in-form li .message {
  color: #ff6666;
}
ul.fill-in-form li .category {
  background: #eefeff;
  margin: 5px auto;
  padding: 5px;
  width: 98%;
}
ul.fill-in-form.delwidth li .title-name {
  width: 100px;
  min-width: 100px;
}

ul.fill-in-form li .title-name, ul.fill-in-form li .title {
  color: #333;
  float: left;
  display: inline-block;
  font-size: 1em;
  font-weight: bold;
  height: 100%;
  line-height: 40px;
  min-width: 100px;
  padding-right: 10px;
  width: auto;
}
ul.fill-in-form li .text {
  display: block;
  float: left;
  height: 100%;
  line-height: 40px;
  margin-right: 3px;
}
ul.fill-in-form li input {
  float: left;
  height: 100%;
  padding: 0 5px;
}
ul.fill-in-form li button {
  display: inline-block;
  height: 100%;
}

ul.fill-in-form3 {
  margin: 0 0 20px 0;
  padding: 0;
}
ul.fill-in-form3 li {
  color: #333;
  display: block;
  height: 26px;
  line-height: 26px;
  margin: 7px 0;
  *zoom: 1;
}
ul.fill-in-form3 li:after {
  content: " ";
  clear: both;
  display: block;
  overflow: hidden;
  height: 0;
}
ul.fill-in-form3 li.dash-line {
  height: 5px;
  border-bottom: dashed 1px #999;
}

ul.fill-in-form3 li .title-name {
  color: #333;
  float: left;
  display: inline-block;
  font-size: 1em;
  font-weight: bold;
  height: 100%;
  line-height: 26px;
  min-width: 100px;
  padding-right: 10px;
  width: auto;
}
ul.fill-in-form3 li .text {
  display: block;
  float: left;
  height: 100%;
  line-height: 40px;
  margin-right: 3px;
}
ul.fill-in-form3 li input {
  float: left;
  height: 100%;
  padding: 0 5px;
}
ul.fill-in-form3 li button {
  display: inline-block;
  height: 100%;
}

ul.fill-in-form3.long li .title-name {
  min-width: 160px;
}

/* 資料表單 */
ul.fill-in-form2 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 auto 20px;
  padding: 0;
  width: 98%;
}
@media (min-width: 1281px) {
  ul.fill-in-form2 {
    width: 80%;
  }
}
ul.fill-in-form2 li {
  border-bottom: dashed 1px #ccc;
  color: #555;
  display: block;
  margin: 2px 0;
  padding: 5px 0px 5px;
  *zoom: 1;
}
ul.fill-in-form2 li:after {
  content: " ";
  clear: both;
  display: block;
  overflow: hidden;
  height: 0;
}
ul.fill-in-form2 li label {
  cursor: pointer;
  font-size: 0.938em;
  line-height: 28px;
  margin-right: 20px;
  vertical-align: middle;
  width: auto;
}
ul.fill-in-form2 li .select-pic {
  background: #efefef;
  border-radius: 10px;
  display: inline-block;
  margin-right: 10px;
  padding: 5px 10px 5px 10px;
  text-align: center;
  width: 180px;
}
ul.fill-in-form2 li .select-pic img {
  max-width: 120px;
  width: 100%;
}
ul.fill-in-form2 li .select-pic label {
  margin-right: 0px;
}
ul.fill-in-form2 li .select-pic:hover {
  background: #e2f7fb;
}
ul.fill-in-form2 li .select-pic.active {
  background: #cff2f8;
  border: solid 5px #a3e6f1;
}
ul.fill-in-form2 li .select-pic.active img {
  opacity: 0.5;
}
ul.fill-in-form2 li .title-namem, ul.fill-in-form2 li .title {
  color: #111;
  display: table-cell;
  font-size: 1em;
  font-weight: bold;
  line-height: 28px;
  min-width: 85px;
  padding: 5px;
  text-align: right;
  vertical-align: top;
  width: 11%;
}
ul.fill-in-form2 li .form-content, ul.fill-in-form2 li .detail {
  color: #555;
  font-size: 0.938em;
  font-weight: bold;
  display: table-cell;
  padding: 5px;
  vertical-align: middle;
  width: 89%;
}
ul.fill-in-form2 li .message {
  color: #ff6666;
}
ul.fill-in-form2 .btn-gray {
  background: #777;
  color: #000;
  display: inline-block;
  font-size: 0.938em;
  margin-bottom: 5px;
  padding: 4px 8px 4px;
  text-decoration: none;
  width: auto;
  border-radius: 2px;
}
ul.fill-in-form2 .btn-gray:hover {
  background: #555;
}
ul.fill-in-form2.no-line li {
  border-bottom: none;
}
ul.fill-in-form2.addwidth li .title {
  width: 20%;
  min-width: 160px;
}
ul.fill-in-form2.delwidth li .title-name {
  width: 100px;
  min-width: 100px;
}
ul.fill-in-form2 a.blue-link {
  background: #55c7cf;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  margin-bottom: 5px;
  padding: 0px 8px 0px;
  text-decoration: none;
  width: auto;
  border-radius: 2px;
}
ul.fill-in-form2 a.blue-link:hover {
  background: #28b6c3;
}
ul.fill-in-form2 .blk-prize {
  background: #dff7f7;
  margin: 0px 0 10px;
  padding: 5px 5px 0px;
  width: 800px;
  border-radius: 10px;
}
ul.fill-in-form2 .blk-prize .prize-ranknum {
  float: left;
  margin-right: 20px;
}
ul.fill-in-form2 .blk-prize .prize-item {
  float: left;
}
ul.fill-in-form2 .blk-prize .prize-item-single {
  width: 400px;
  margin-bottom: 5px;
}
ul.fill-in-form2 .blk-prize .prize-quantity {
  width: 160px;
}
ul.fill-in-form2 .blk-prize .prize-add {
  display: block;
  float: right;
  margin-left: 8px;
  padding-top: 8px;
}

ul.fill-in-form2 li .form-content ul, ul.fill-in-form2 li .detail ul {
  background: #FFFFFF;
  color: #000;
  font-weight: bold;
  padding: 10px;
  margin: 0 20px;
  border-radius: 10px;
}
ul.fill-in-form2 li .form-content ul li, ul.fill-in-form2 li .detail ul li {
  border-bottom: solid 1px #ccc;
  color: #333;
  display: list-item;
  font-weight: normal;
  /* css influence for select2, remove some attributes*/
}
ul.fill-in-form2 li .form-content ul li:last-child, ul.fill-in-form2 li .detail ul li:last-child {
  border-bottom: none;
  padding: 0 0 0 0;
}
ul.fill-in-form2 li .form-content ul li div, ul.fill-in-form2 li .detail ul li div {
  padding: 3px 0;
}
ul.fill-in-form2 li .form-content ul li div input[type=text], ul.fill-in-form2 li .detail ul li div input[type=text] {
  width: 100px;
}
ul.fill-in-form2 li .form-content ul li div .form-icon-delete, ul.fill-in-form2 li .detail ul li div .form-icon-delete {
  display: inline-block;
}

/* 資料呈現 */
ul.info-graphy {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 auto 20px;
  padding: 0;
  width: 100%;
}
ul.info-graphy li {
  color: #555;
  display: block;
  margin: 0px 0;
  padding: 0px 0px;
}
ul.info-graphy li label {
  cursor: pointer;
  font-size: 0.938em;
  line-height: 28px;
  margin-right: 20px;
  vertical-align: middle;
  width: auto;
}
ul.info-graphy li .title-name {
  color: #000;
  display: table-cell;
  font-size: 1em;
  font-weight: bold;
  line-height: 28px;
  min-width: 85px;
  padding: 0px 5px 5px 5px;
  text-align: right;
  width: 11%;
}
ul.info-graphy li .info-content {
  color: #555;
  font-size: 0.938em;
  font-weight: normal;
  display: table-cell;
  padding: 5px;
  width: 89%;
}
ul.info-graphy li .message {
  color: #ff6666;
}
ul.info-graphy .btn-gray {
  background: #777;
  color: #fff;
  display: inline-block;
  font-size: 0.938em;
  margin-bottom: 5px;
  padding: 4px 8px 4px;
  text-decoration: none;
  width: auto;
  border-radius: 2px;
}
ul.info-graphy .btn-gray:hover {
  background: #555;
}
ul.info-graphy.no-line li {
  border-bottom: none;
}
ul.info-graphy a.blue-link {
  background: #55c7cf;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  margin-bottom: 5px;
  padding: 0px 8px 0px;
  text-decoration: none;
  width: auto;
  border-radius: 2px;
}
ul.info-graphy a.blue-link:hover {
  background: #28b6c3;
}

/* flag width setup */
.flag-item {
  float: left;
  margin: 0 12px 10px 0px;
}

/*資料區塊*/
.box-group {
  color: #fff;
  float: left;
  margin-right: 1%;
  padding: 0;
  width: 49%;
}

.box-g-3 {
  float: left;
  margin-right: 2%;
  width: 32%;
}

.last-child {
  margin-right: 0;
}

.list-item {
  *zoom: 1;
}
.list-item:after {
  content: " ";
  clear: both;
  display: block;
  overflow: hidden;
  height: 0;
}

.list-title {
  background: #0faada;
  border-bottom: dashed 1px #8bd9ff;
  color: #fff;
  float: left;
  font-size: 16px;
  line-height: 22px;
  padding: 1% 2%;
  width: 40%;
}
@media (min-width: 1025px) {
  .list-title {
    font-size: 17px;
  }
}

.list-detail {
  background: #eee;
  border-bottom: dashed 1px #ddd;
  color: #555;
  float: right;
  font-size: 16px;
  padding: 1% 2%;
  overflow: hidden;
  width: 60%;
}
@media (min-width: 1025px) {
  .list-detail {
    font-size: 17px;
  }
}

ul.blk-property {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  background: #007fbd;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(59%, #008ac9), to(rgba(0, 166, 217, 0.8)));
  background: -o-linear-gradient(bottom, #008ac9 59%, rgba(0, 166, 217, 0.8) 100%);
  background: linear-gradient(360deg, #008ac9 59%, rgba(0, 166, 217, 0.8) 100%);
  background: -o-linear-gradient(360deg, #008ac9 59%, rgba(0, 166, 217, 0.8) 100%);
  color: #ffa27c;
  font-size: 1.063em;
  padding: 15px 40px 20px;
}
ul.blk-property li {
  border-bottom: dashed 1px #8bd9ff;
  color: #fff;
  font-size: 15px;
}
ul.blk-property .title {
  color: #fff;
  float: left;
  font-size: 15px;
  padding: 10px 0 0px;
  width: 70%;
}
ul.blk-property .detail {
  color: #fff;
  float: right;
  font-size: 15px;
  font-weight: bold;
  padding: 10px 0 0px;
  text-align: right;
  width: 25%;
}

.tab-content {
  margin: 0 auto;
  padding-top: 20px;
  width: 99%;
}

.no-data {
  color: #f66;
  font-size: 1.438em;
}

/* 排行榜比賽新增 */
.blk-prize {
  background: #dff7f7;
  margin: 10px 0;
  padding: 10px 10px 0px 10px;
  width: 800px;
  border-radius: 10px;
}
.blk-prize .prize-ranknum {
  float: left;
  margin-right: 20px;
}
.blk-prize .prize-item {
  float: left;
}
.blk-prize .prize-item-single {
  width: 400px;
  margin-bottom: 10px;
}
.blk-prize .prize-quantity {
  width: 160px;
}
.blk-prize .prize-add {
  display: block;
  float: right;
  margin-left: 8px;
  padding-top: 8px;
}
.blk-prize .DaySeq {
  color: #333;
  line-height: 36px;
}

/* 選單自由排序 */
ul.sortmenu {
  padding: 10px 0px;
  width: 80%;
  margin: auto;
}
ul.sortmenu li {
  border: 1px solid var(--border-sort);
  color: #000;
  cursor: pointer;
  margin: 10px auto;
  padding: 10px;
  text-align: center;
  border-radius: 6px;
}
ul.sortmenu li img {
  vertical-align: middle;
}
ul.sortmenu li span {
  display: block;
  width: 200px;
  margin: 0 auto;
  text-align: left;
}

.ui-state-default {
  background: var(--bg-sort-default);
}

.ui-state-highlight {
  border: none;
  background: var(--bg-sort-hightlight);
  height: 25px;
}

/* 項目清單陳列樣式 */
.blk_calendar_item {
  font-size: 13px;
  margin-bottom: 30px;
  width: 100%;
}
.blk_calendar_item ul.cal_wrapper {
  margin: 0 0 15px 0;
  padding: 0;
  width: auto;
  text-align: left;
}
.blk_calendar_item ul.cal_wrapper li {
  background: #ecf0ff;
  color: #145d83;
  float: left;
  margin: 0 2px 0 0;
  min-height: 150px;
  padding: 0%;
  text-align: left;
  width: 13.5714285714%;
}
.blk_calendar_item ul.cal_wrapper li .cal_date {
  background: #cbe4f9;
  font-weight: bold;
  line-height: 30px;
  height: 30px;
  text-align: center;
  width: 100%;
}
.blk_calendar_item ul.cal_wrapper li .cal_content {
  padding: 1%;
}
.blk_calendar_item ul.cal_wrapper li .cal_content > div {
  margin-bottom: 2px;
}
.blk_calendar_item ul.cal_wrapper li img {
  vertical-align: middle;
  width: 24px;
  height: auto;
  margin: 0px 3px 0 0;
}

/*** 31days sign in ***/
ul.calendar-wrapper {
  width: 100%;
  text-align: left;
}
ul.calendar-wrapper li {
  background: #c7f1f0;
  display: block;
  float: left;
  margin: 0 8px 8px 0;
  padding: 0.3% 8px 10px 8px;
  width: 19%;
  min-width: 127px;
  border-radius: 10px;
}

ul.calendar-wrapper li .cal-add {
  color: #ff6600;
  font-size: 15px;
  margin-bottom: 10px;
  text-align: right;
  width: 100%;
}
ul.calendar-wrapper li .cal-add a {
  color: #ff6600;
}
ul.calendar-wrapper li .cal-date {
  color: #0079b0;
  font-size: 18px;
  font-weight: bold;
  line-height: 30px;
  margin-top: -36px;
  text-align: left;
  position: absolute;
}
ul.calendar-wrapper li .cal-item-wrapper {
  border-top: dashed 1px #5ecec1;
  width: 100%;
  margin: 5px auto 10px;
  padding-top: 8px;
}
ul.calendar-wrapper li .cal-item {
  background: #badee1;
  margin: 0 auto;
  width: 100%;
  border-radius: 5px;
}
ul.calendar-wrapper li .cal-item .cal-item-left {
  float: left;
  padding: 8px 6px;
  width: 85%;
}
ul.calendar-wrapper li .cal-item .cal-item-right {
  float: left;
  padding: 29px 0 0 1%;
  width: 15%;
}
ul.calendar-wrapper li .cal-item select {
  width: 100%;
  padding: 3px;
}
ul.calendar-wrapper li .cal-item input {
  width: 100%;
  margin-top: 3px;
  padding: 3px;
}
ul.calendar-wrapper li .cal-upload, ul.calendar-wrapper li .cal-upload img {
  width: 70px;
  height: auto;
  margin: 0 auto;
}

/*** 管理者權限設定頁面 ***/
table.adminuser_setting {
  background: #a0e6e8;
  font-size: 0.938em;
  line-height: 140%;
  width: 100%;
}
table.adminuser_setting th {
  background: #c1f0f1;
  border: solid 1px #fff;
  color: #000;
  font-weight: bold;
  padding: 12px;
}
table.adminuser_setting td {
  background: #ddf8f8;
  border: solid 1px #fff;
  color: #4d4d4d;
  padding: 7px;
}
table.adminuser_setting td a, table.adminuser_setting td a:link, table.adminuser_setting td a:visited {
  color: #1c6fb1;
  text-decoration: none;
}
table.adminuser_setting td a:hover, table.adminuser_setting td a:active {
  color: #1c6fb1;
  text-decoration: underline;
}

/*** 金流項目清單 ***/
.adjust_tablestyle {
  font-size: 0.813em;
  line-height: 17px;
}
.adjust_tablestyle th {
  padding: 6px 3px 2px;
}
.adjust_tablestyle td {
  text-align: left;
  padding: 3px 5px;
}
.adjust_tablestyle td.t-left {
  text-align: left;
}
.adjust_tablestyle td.t-center {
  text-align: center;
}
.adjust_tablestyle td.t-right {
  text-align: right;
}

/*** 共用頁籤樣式 ***/
ul.usual-tab {
  background: #f7f7f7;
}

ul.usual-tab li {
  font-size: 13px;
  color: #0f5699;
  cursor: pointer;
  background-color: #f2f9ff;
  display: block;
  float: left;
  margin-right: 1px;
}
ul.usual-tab li a {
  background: #ddd;
  color: #333;
  display: block;
  line-height: 30px;
  padding: 0 25px;
  text-decoration: none;
}
ul.usual-tab li a:hover {
  color: #fff;
  background: #777;
}
ul.usual-tab li.active a {
  color: #fff;
  cursor: default;
  background-color: #0f5699;
}

.usual-content {
  background: #f7f7f7;
  padding: 20px 20px 20px 20px;
}

.batch-wrapper {
  background: #5fa2dc;
  line-height: 45px;
  margin: 10px 0 30px 0;
  min-width: 308px;
  width: intrinsic;
  /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;
  /* Firefox/Gecko */
  width: -webkit-max-content;
  /* Chrome */
}
.batch-wrapper p {
  color: #fff;
  padding: 0 0 0 10px;
}
.batch-wrapper button.btn-batch {
  background: #498bd3;
  border-left: solid 1px #b7e0ff;
  font-size: 17px;
  letter-spacing: 2px;
  line-height: 45px;
  padding: 0px 40px;
  border-radius: 0px;
}
.batch-wrapper button.btn-batch:hover {
  background: #3f7cca;
}

/*********************************************************/
.v-top {
  vertical-align: top;
}

.v-middle {
  vertical-align: middle;
}

.v-bottom {
  vertical-align: bottom;
}

.Mall_id_error {
  color: #ff0000;
  font-size: 14px;
  font-weight: bold;
}

/*指定寬度*/
.w-p20 {
  width: 20%;
}

/*******************客服回報*********************************/
.ServiceForm {
  width: 96%;
  margin: 0 auto;
  font-weight: 500;
}
.ServiceForm ul {
  list-style: none;
  padding: 0;
}
.ServiceForm ul li {
  width: 100%;
  margin: 15px 0;
  clear: both;
}
.ServiceForm ul li:last-child {
  margin-top: 15px;
}
.ServiceForm ul li .Input {
  width: 100%;
  min-height: 40px;
  line-height: 40px;
  border-radius: 5px;
  padding: 5px 10px;
  color: #868686;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.ServiceForm ul li .Txt_area {
  min-height: 100px;
  line-height: 25px;
}
.ServiceForm ul li .table {
  border: 4px solid #3399cc;
  width: 100%;
  height: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 5px;
  margin-bottom: 15px;
}
.ServiceForm ul li .table .tr {
  width: 100%;
  height: auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: 1px solid #3399cc;
  background: #fff;
  color: #000;
}
.ServiceForm ul li .table .tr:first-child {
  height: 45px;
  line-height: 45px;
  color: #fff;
  margin-bottom: 3px;
  padding: 0 5px;
  background: #3399cc;
  border-bottom: 3px solid #2e82c5;
}
.ServiceForm ul li .table .tr:first-child .tit {
  font-size: 12px;
  text-align: left;
}
.ServiceForm ul li .table .tr:first-child .time {
  float: right;
  font-size: 12px;
  color: #c8e2e7;
  text-align: right;
}
.ServiceForm ul li .table .tr:nth-child(2) {
  min-height: 80px;
  height: auto;
  color: #000;
  margin-bottom: 3px;
  background: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  text-align: left;
  word-break: break-all;
  background: #f7fdfb;
}
.ServiceForm ul li .table .tr .ansbar {
  width: 100%;
  height: 35px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 5px;
}
.ServiceForm ul li .table .tr .ansbar .tit_name {
  line-height: 35px;
  font-size: 14px;
  font-weight: bold;
  color: #005ca5;
  text-align: left;
}
.ServiceForm ul li .table .tr .ansbar .tit_time {
  line-height: 35px;
  float: right;
  text-align: right;
  font-size: 12px;
  color: #005ca5;
}
.ServiceForm ul li .table .tr .ans_text {
  min-height: 45px;
  line-height: 20px;
  color: #636363;
  font-size: 16px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 5px 15px 5px;
  word-wrap: break-word;
  word-break: keep-all;
}

@media (min-width: 590px) {
  .ServiceForm ul li .table .tr {
    padding: 10px 5px 10px 5px;
  }
}
@media (min-width: 590px) {
  .ServiceForm ul li .table .tr:first-child .tit {
    font-size: 16px;
  }
}
@media (min-width: 590px) {
  .ServiceForm ul li .table .tr .ansbar .tit_name {
    font-size: 16px;
  }
}
ul.list-info {
  border-radius: 5px;
  list-style: none;
  margin: 15px auto 8px;
  padding: 0;
  width: 100%;
  *zoom: 1;
}
ul.list-info:after {
  content: " ";
  clear: both;
  display: block;
  overflow: hidden;
  height: 0;
}
ul.list-info li {
  margin: 0 0 0 0;
  *zoom: 1;
}
ul.list-info li:after {
  content: " ";
  clear: both;
  display: block;
  overflow: hidden;
  height: 0;
}

ul.list-info li {
  margin: 0 0 5px 0;
  *zoom: 1;
}
ul.list-info li:after {
  content: " ";
  clear: both;
  display: block;
  overflow: hidden;
  height: 0;
}
ul.list-info li .title, ul.list-info li .detail {
  display: block;
  float: left;
  font-size: 1em;
  font-weight: bold;
  height: 40px;
  line-height: 40px;
}
ul.list-info li .title {
  color: #111;
  padding: 0 10px 0 5px;
  text-align: right;
  width: 40%;
}
ul.list-info li .title.left {
  text-align: left;
}
ul.list-info li .detail {
  color: #555;
  width: 60%;
}

ul.list-info li .detail input {
  width: 100%;
}
ul.list-info li .detail input:-moz-read-only {
  background: #f2f2f2;
}
ul.list-info li .detail input:read-only {
  background: #f2f2f2;
}
ul.list-info li .detail input[type=radio], ul.list-info li .detail input[type=checkbox] {
  width: 22px;
  height: 22px;
}
ul.list-info li .detail input, ul.list-info li .detail textarea {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 3px #ddd;
          box-shadow: inset 0 1px 3px #ddd;
  padding: 0 10px;
}
ul.list-info li .detail input:focus, ul.list-info li .detail textarea:focus {
  -webkit-box-shadow: 0 0 3px #51b9ff !important;
          box-shadow: 0 0 3px #51b9ff !important;
  border: solid 1px #51b9ff !important;
}
ul.list-info li .detail textarea {
  padding: 5px 10px;
}

ul.list-info.dv2 li {
  float: left;
  width: 50%;
}
ul.list-info.white {
  background: #fff;
  border: solid 3px #eee;
}
ul.list-info.height-auto li .title, ul.list-info.height-auto li .detail {
  height: auto;
}
ul.list-info.line li {
  border-bottom: solid 2px #eee;
}

ul.list-usual {
  list-style: none;
  margin: 0 auto 10px;
  padding: 0;
  width: 100%;
}
ul.list-usual li {
  color: #111;
  font-weight: bold;
  margin: 10px 0 15px;
}

ul.list-usual li label {
  cursor: pointer;
  margin: 0 10px 0 0;
}

.popupContainer {
  background: #eae8ef;
  border: 1px solid #cfc7dd;
  border-radius: 5px;
  height: 100%;
  margin: 0 auto;
  min-width: 320px;
  padding: 0;
  position: absolute;
  width: 100%;
}

/* Popup Styles*/
.popupHeader {
  background: #efedf1;
  border-bottom: 1px solid #c9b3d6;
  color: #410088;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  position: fixed;
  padding: 10px 20px;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
}

.popupBody {
  margin: 42px 0 0 0;
  padding: 20px 15px;
}

.user_login {
  margin: 0 auto;
  width: 60%;
}
.user_login div {
  margin: 0 auto 5px;
}
.user_login div i, .user_login div .ui-input-text {
  display: inline-block;
}
.user_login div i {
  width: 7%;
}
.user_login div .ui-input-text {
  width: 91%;
}
.user_login div input, .user_login div input[type=text], .user_login div input[type=email], .user_login div input[type=password] {
  background: #fff;
  border-radius: 5px;
  border: 1px solid #ccc;
  color: #330976;
  display: inline-block;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  padding: 10px;
  margin: 0 auto 5px;
  width: 91%;
}
.user_login div input:focus, .user_login div input:active, .user_login div input[type=text]:focus, .user_login div input[type=text]:active, .user_login div input[type=email]:focus, .user_login div input[type=email]:active, .user_login div input[type=password]:focus, .user_login div input[type=password]:active {
  border: solid 1px #461b8d;
  -webkit-box-shadow: 0 0 3px #330976;
          box-shadow: 0 0 3px #330976;
}

.user_login .btn-wrap {
  margin: 170px auto 0;
}
.user_login .btn-wrap button {
  width: 60%;
}

.machine-count {
  padding: 15px 0 0 0;
  margin: 0 auto 20px;
}
.machine-count .machine-total, .machine-count .machine-category {
  color: #111;
  text-align: left;
}
.machine-count .machine-total {
  font-size: 19px;
  font-weight: bold;
}
.machine-count .machine-category {
  *zoom: 1;
}
.machine-count .machine-category:after {
  content: " ";
  clear: both;
  display: block;
  overflow: hidden;
  height: 0;
}
.machine-count .machine-category div {
  display: inline-block;
  font-size: 18px;
  position: relative;
  margin: 0 40px 0 0;
}
.machine-count .machine-category div span {
  margin-left: 10px;
}

.machine-count .machine-category div::before {
  background: #018fd1;
  content: "";
  display: inline-block;
  height: 15px;
  margin: 0px 5px 0 0;
  padding: 0 0 0 0;
  position: relative;
  width: 15px;
}
.machine-count .machine-category div:nth-child(2)::before {
  background: #5bbe22;
}
.machine-count .machine-category div:nth-child(3)::before {
  background: #777;
}

.machine-list {
  -ms-flex-line-pack: start;
      align-content: start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  height: auto;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin: 0 auto;
  width: 100%;
}
.machine-list .item {
  background: #777;
  background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#777));
  background: -o-linear-gradient(#888 0%, #777);
  background: linear-gradient(#888 0%, #777);
  border-radius: 8px;
  border: solid 1px #666;
  -webkit-box-shadow: 4px 4px 0px #666;
          box-shadow: 4px 4px 0px #666;
  color: #fff;
  cursor: pointer;
  font-size: 19px;
  height: 60px;
  line-height: 56px;
  margin: 0 15px 15px 0;
  overflow: hidden;
  padding: 0 5px;
  text-align: center;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100%/6 - 15px);
}

.machine-list .item.playing {
  background: #018fd1;
  background: -webkit-gradient(linear, left top, left bottom, from(#0fa4e9), to(#018fd1));
  background: -o-linear-gradient(#0fa4e9 0%, #018fd1);
  background: linear-gradient(#0fa4e9 0%, #018fd1);
  border: solid 1px #0082ad;
  -webkit-box-shadow: 4px 4px 0px #0082ad;
          box-shadow: 4px 4px 0px #0082ad;
}
.machine-list .item.connected {
  background: #5bbe22;
  background: -webkit-gradient(linear, left top, left bottom, from(#72d53a), to(#5bbe22));
  background: -o-linear-gradient(#72d53a 0%, #5bbe22);
  background: linear-gradient(#72d53a 0%, #5bbe22);
  border: solid 1px #579d20;
  -webkit-box-shadow: 4px 4px 0px #579d20;
          box-shadow: 4px 4px 0px #579d20;
}
.machine-list .item.error {
  background: #b70001;
  background: -webkit-gradient(linear, left top, left bottom, from(#d51112), to(#b70001));
  background: -o-linear-gradient(#d51112 0%, #b70001);
  background: linear-gradient(#d51112 0%, #b70001);
  border: solid 1px #7e0308;
  -webkit-box-shadow: 4px 4px 0px #7e0308;
          box-shadow: 4px 4px 0px #7e0308;
}

.edit-machine-wrap {
  margin: 15px 0;
  padding-right: 140px;
  text-align: center;
}
.edit-machine-wrap .btn-wrap {
  margin: 45px 0 0 65px;
}

.edit-machine-wrap .machine-name {
  color: #111;
  font-weight: bold;
}
.edit-machine-wrap input {
  margin: 10px auto;
  width: 110px;
}

.coutomerAccount-wrap {
  width: 100%;
}
.coutomerAccount-wrap .ca-top {
  *zoom: 1;
}
.coutomerAccount-wrap .ca-top:after {
  content: " ";
  clear: both;
  display: block;
  overflow: hidden;
  height: 0;
}
.coutomerAccount-wrap ul.list-info li {
  border-bottom: solid 2px #eee;
}

.coutomerAccount-wrap .ca-search {
  color: #111;
  float: left;
  font-weight: bold;
  height: atuo;
  *zoom: 1;
}
.coutomerAccount-wrap .ca-search:after {
  content: " ";
  clear: both;
  display: block;
  overflow: hidden;
  height: 0;
}
.coutomerAccount-wrap .ca-search input {
  height: 40px;
  line-height: 40px;
}

.ca-info .btn-wrap button {
  margin: 0 2px 10px;
}

.coutomerAccount-wrap .ca-search select {
  background: url("/static/images/asc.gif") right center no-repeat, -webkit-gradient(linear, left top, left bottom, from(#eadaff), to(#b5abef));
  background: url("/static/images/asc.gif") right center no-repeat, -o-linear-gradient(top, #eadaff, #b5abef);
  background: url("/static/images/asc.gif") right center no-repeat, linear-gradient(180deg, #eadaff, #b5abef);
  border: solid 1px #b497d5;
  -webkit-box-shadow: none;
          box-shadow: none;
  font-weight: bold;
  min-width: 140px;
  padding: 0 10px 0 10px;
}
.coutomerAccount-wrap .ca-search select option {
  line-height: 200%;
}

.new-customer-wrap ul.list-info {
  margin: 20px 0 20px 0;
  width: 95%;
}
.new-customer-wrap ul.list-info li .title {
  width: 38%;
}
.new-customer-wrap ul.list-info li .detail {
  width: 62%;
}

.new-customer-wrap .btn-wrap {
  margin-top: 250px;
}

.game-history-wrap ul.list-usual {
  margin: 0 auto 30px;
  min-width: 400px;
  width: 60%;
}
.game-history-wrap table {
  width: 100%;
}

.purchase-wrap ul.fill-in-form2 li .detail button {
  height: 36px;
  line-height: 36px;
  min-width: 80px;
  margin: 0 5px 5px 0;
}

.store-info {
  min-height: 500px;
}
.store-info ul.list-info {
  margin: 0 auto;
  width: 500px;
}
.store-info ul.list-info li {
  border: none;
  margin: 0 0 10px 0;
}
.store-info ul.list-info li .title, .store-info ul.list-info li .detail {
  height: auto;
}
.store-info ul.list-info li .title {
  width: 120px;
}
.store-info ul.list-info li .detail {
  width: calc(100% - 120px);
}

.store-info .btn-wrap {
  margin: 250px auto 0;
}

table.shift-detail thead th:first-child {
  width: 190px;
}
@media (min-width: 1100px) {
  table.shift-detail thead th:first-child {
    width: auto;
  }
}

table.shift-detail tbody td:first-child {
  line-height: 26px;
  word-break: keep-all;
}

table.shift-detail tbody td:last-child button {
  min-width: 60px;
  width: 60px;
}

.kiosk-info > .box-group {
  margin-right: 0;
  width: 50%;
}
.kiosk-info > .box-group .list-item {
  background: #eee;
  border-bottom: solid 1px #ccc;
  width: 100%;
}
.kiosk-info > .box-group .list-item .list-title, .kiosk-info > .box-group .list-item .list-detail {
  padding: 5px 10px;
}
.kiosk-info > .box-group .list-item .list-title {
  background: var(--bg-list-title);
  border: none;
  width: 160px;
}
.kiosk-info > .box-group .list-item .list-detail {
  border-bottom: solid 1px #ccc;
  margin-bottom: -1px;
  overflow: none;
  width: calc(100% - 160px);
}

.kiosk-info > .list-item {
  border-bottom: solid 1px #ccc;
  width: 100%;
}
.kiosk-info > .list-item .list-title, .kiosk-info > .list-item .list-detail {
  padding: 5px 10px;
}
.kiosk-info > .list-item .list-title {
  background: var(--bg-list-title);
  border: none;
  width: 160px;
}
.kiosk-info > .list-item .list-detail {
  border-bottom: solid 1px #ccc;
  margin-bottom: -1px;
  overflow: none;
  width: calc(100% - 160px);
}

.change-pwd-wrap {
  width: 100%;
}
.change-pwd-wrap ul.list-info {
  width: 500px;
}

.change-pwd-wrap ul.list-info li .title {
  width: 140px;
}
.change-pwd-wrap ul.list-info li .detail {
  width: calc( 100% - 140px );
}

.change-pwd-wrap .btn-wrap {
  margin: 250px auto 0;
}

.comps-wrap {
  margin: 0 auto;
}
.comps-wrap h3 {
  color: #111;
  margin: 1em 0 0.5em;
}
.comps-wrap section {
  margin: 0 auto 25px;
  *zoom: 1;
}
.comps-wrap section:after {
  content: " ";
  clear: both;
  display: block;
  overflow: hidden;
  height: 0;
}
.comps-wrap .btn-wrap {
  margin: 20px auto 0;
}

.comps-daily {
  background: var(--bg-compsItem);
  margin: 0 auto 10px;
  padding: 5px 10px;
  width: 100%;
  *zoom: 1;
}
.comps-daily:after {
  content: " ";
  clear: both;
  display: block;
  overflow: hidden;
  height: 0;
}
.comps-daily .comps-setup {
  color: #333;
  font-weight: bold;
  float: left;
  width: calc(100% - 100px);
}
.comps-daily .comps-switch {
  float: right;
  width: 100px;
}

.comps-setup input, .comps-setup select {
  height: 36px;
  width: 80px;
}

/* 開關 */
.switch-button-label {
  font-size: 13px;
  cursor: pointer;
  margin-top: 5px;
}
.switch-button-label.off {
  color: var(--color-switch-off);
}
.switch-button-label.on {
  color: var(--color-switch-on);
  font-weight: bold;
}

.switch-button-background {
  background: var(--bg-switch);
  border: 1px solid var(--border-switch-btn);
  border-radius: 15px;
  cursor: pointer;
  float: left;
  position: relative;
  margin: 5px 5px 1px 5px;
}

.switch-button-button {
  border-radius: 15px;
  position: absolute;
  left: -1px;
  top: -1px;
  background: #fff;
  border: 1px solid var(--border-switch-btn);
}

.organ-table tr th:first-child {
  width: 32%;
}

.organ-table tr th:nth-child(2) {
  width: 100px;
}

.organ-table tr td:last-child {
  vertical-align: middle;
  width: auto;
}
.organ-table tr td:last-child button {
  background: #965d09;
  background: #240189;
  font-size: 14px;
  height: 36px;
  line-height: 36px;
  margin: 2px 2px;
  min-width: 75px;
  padding: 0 0px;
  text-align: center;
  width: 115px;
}
.organ-table tr td:last-child button:hover, .organ-table tr td:last-child button:focus, .organ-table tr td:last-child button:active {
  background: #2f04b3;
}
.organ-table tr td:last-child button:disabled {
  background: #8e8d8d;
  background: -webkit-gradient(linear, left top, left bottom, from(#565656), to(#8e8d8d));
  background: -o-linear-gradient(top, #565656 0%, #8e8d8d);
  background: linear-gradient(180deg, #565656 0%, #8e8d8d);
}
.organ-table tr td:last-child button:disabled:hover {
  background: #8e8d8d;
  background: -webkit-gradient(linear, left top, left bottom, from(#565656), to(#8e8d8d));
  background: -o-linear-gradient(top, #565656 0%, #8e8d8d);
  background: linear-gradient(180deg, #565656 0%, #8e8d8d);
}
.organ-table tr td:last-child .btn-space {
  margin-right: 121px;
}

.permission-nav {
  margin: 15px auto 15px;
  text-align: center;
}
.permission-nav button {
  font-size: 15px;
  margin: 0 1px 5px;
  min-width: 80px;
}

.admin-wrap {
  padding: 0.8rem 0.8rem 0;
}

.admin-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.admin-tabs a {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: solid 1px #d0d0d0;
  border-bottom: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 2.2rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 0.1rem -1px 0;
  padding: 0 1rem;
  position: relative;
  text-decoration: none;
  z-index: 2;
}
.admin-tabs a:link, .admin-tabs a:visited {
  background: #a4938e;
  color: #fff;
}
.admin-tabs a:hover {
  background: #c88641;
}
.admin-tabs a.active {
  background: #fff;
  color: #bb6a16;
  font-weight: bold;
}
.admin-tabs a.active:hover {
  background: #fff;
}

.admin-content {
  background: #fff;
  border: solid 1px #d0d0d0;
  padding: 1rem 1rem 0.5rem;
  position: relative;
  z-index: 1;
}

.admin-tabs a.active:hover {
	background: #fff
}
.admin-content {
	background: #fff;
	border: solid 1px #d0d0d0;
	padding: 16px 16px 8px;
	padding: 1rem 1rem 0.5rem;
	position: relative;
	z-index: 1
}
.board-item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 10px;
	position: relative;
	width: 100%;
}
.board-item a.board-pic {
	display: inline-block;
	margin-right: 10px;
}
.board-item a.board-pic img {
	max-width: 400px;
	height: auto;
	width: 100%;
}
.board-info {
	position: relative;
}
.board-info .icon-new {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background: red;
	border-radius: 50%;
	color: #fff;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	font-weight: bold;
	height: 20px;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	right: -30%;
	position: absolute;
	top: 2%;
	width: 20px;
}
.game-cate {
	color: #6098ff;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 5px;
}
.game-device {
	color: #005f9c;
	font-size: 14px;
	margin-left: 5px;
}
.board-title {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 20px;
}
.board-period {
	color: #000;
	font-size: 19px;
	margin-bottom: 25px;
}
.board-more {
	background: #41678b;
	border-radius: 3px;
	cursor: pointer;
	display: inline-block;
	color: #fff;
	font-size: 14px;
	margin-bottom: 25px;
	padding: 0 5px;
}
.board-content .board-banner {
	text-align: center;
}
.board-content .board-banner img {
	height: auto;
	max-width: 1000px;
	width: 100%;
}
.board-content .board-period {
	color: #555;
	font-size: 22px;
	margin-bottom: 0;
	text-align: center;
}
.board-content .board-title {
	text-align: center;
}
.board-subtitle {
	color: #000;
	font-size: 22px;
	font-weight: bold;
}
/*輪播banner*/

.banner {
	margin-top: 0;
	position: relative;
}
.banner-rotation {
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
}
.banner-rotation img {
	width: 100%;
	height: auto;
}
.slick-slider {
	overflow: hidden;
}
button.slick-prev, button.slick-next {
	text-indent: -9999px;
	position: absolute;
	top: 0;
	z-index: 99;
	min-width: auto;
	width: 40px;
	height: 100%;
	background: transparent;
	border: none;
	border-radius: 0px;
}
button.slick-prev::after, button.slick-next::after {
	width: 12px;
	height: 12px;
	border-bottom: 3px solid #037cb5;
	border-right: 3px solid #037cb5;
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	right: 50%;
	-webkit-transform: translaㄋteY(-50%) translateX(20%) rotate(-45deg);
	-ms-transform: translaㄋteY(-50%) translateX(20%) rotate(-45deg);
	transform: translaㄋteY(-50%) translateX(20%) rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
@media (min-width: 568px) {
	button.slick-prev::after, button.slick-next::after {
		width: 15px;
		height: 15px;
	}
}
button.slick-next {
	right: 0%;
}
button.slick-prev {
	left: 0%;
}
button.slick-prev::after {
	-webkit-transform: translateX(60%) rotate(135deg);
	-ms-transform: translateX(60%) rotate(135deg);
	transform: translateX(60%) rotate(135deg);
}
.slick-dots {
	width: 100%;
	position: absolute;
	bottom: 0%;
	text-align: center;
	height: 22px;
	background: transparent;
	line-height: 9px;
}
@media (min-width: 768px) {
	.slick-dots {
		height: 32px;
	}
}
.slick-dots li {
	margin: 0 10px;
	display: inline-block;
}
@media (min-width: 768px) {
	.slick-dots li {
		margin: 10px 10px;
	}
}
.slick-dots li.slick-active button {
	background: -webkit-gradient(linear, left top, left bottom, from(#f5d570), color-stop(10%, #fff4b2), color-stop(40%, #ffe18a), color-stop(60%, #bf8e43), to(#85562f));
	background: -webkit-linear-gradient(top, #f5d570, #fff4b2 10%, #ffe18a 40%, #bf8e43 60%, #85562f);
	background: -o-linear-gradient(top, #f5d570, #fff4b2 10%, #ffe18a 40%, #bf8e43 60%, #85562f);
	background: linear-gradient(180deg, #f5d570, #fff4b2 10%, #ffe18a 40%, #bf8e43 60%, #85562f);
}
.slick-dots li>button {
	width: 12px;
	height: 12px;
	background: #000;
	border-radius: 20px;
	border: solid 1px #ecd05c;
	color: transparent;
	cursor: pointer;
	display: block;
	font-size: 0px;
	outline: none;
	line-height: 0px;
	min-width: auto;
	padding: 0px;
	text-indent: -9999px;
}
@media (min-width: 768px) {
	.slick-dots li>button {
		width: 15px;
		height: 15px;
	}
}
.bannerList {
	position: relative;
	width: 100%;
	/* height:100%;
    top: 0; */
}
.bannerInfo {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	display: none;
	position: absolute;
	z-index: 2;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 250, 250, 0.5);
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.bannerList:hover .bannerInfo {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.dw-poster {
	color: #fff;
	cursor: pointer;
	font-size: 22px;
	text-align: center;
	width: 50%;
	height: calc( 100% - 112px);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	bottom: 32px;
	position: absolute;
	background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.65)), to(#2c4760));
	background: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.65), #2c4760);
	background: -o-linear-gradient(right, rgba(0, 0, 0, 0.65), #2c4760);
	background: linear-gradient(-90deg, rgba(0, 0, 0, 0.65), #2c4760);
	border-right: 1px solid #8d8d8d;
}
a.detail {
	color: #000;
	display: inline-block;
	font-size: 22px;
	text-align: center;
	width: 50%;
	height: calc( 100% - 112px);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	bottom: 32px;
	position: absolute;
	right: 0;
	background: -webkit-gradient(linear, right top, left top, from(#2c4760), to(rgba(0, 0, 0, 0.65)));
	background: -webkit-linear-gradient(right, #2c4760, rgba(0, 0, 0, 0.65));
	background: -o-linear-gradient(right, #2c4760, rgba(0, 0, 0, 0.65));
	background: linear-gradient(-90deg, #2c4760, rgba(0, 0, 0, 0.65));
}
a.detail:hover {
	text-decoration: none;
}
.dw-poster, a.detail {
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}
.dw-poster:hover, a.detail:hover {
	-webkit-filter: brightness(1.9);
	filter: brightness(1.9);
}
.dw-poster div, a.detail div {
	color: #fff;
}
.banner-header {
	left: 0;
	top: 0;
	right: 0;
	padding: 10px 0 10px 15px;
	position: absolute;
	background: #003864;
}
.banner-header>h2 {
	color: #c5e9df;
	font-size: 24px;
	margin: 0;
	padding: 0;
	text-align: left;
}
.banner-header>h4 {
	color: #f7f7f7;
	text-align: left;
	margin: 0;
	padding: 0;
}