* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
  color: #555;
  font-size: 1.4rem;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

td,
th,
caption {
  font-size: 1.4rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: 100%;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}

a {
  color: #555;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  border: none;
}

ol,
ul,
li {
  list-style: none;
}

input,
textarea,
select,
button {
  font: 14px Verdana, Helvetica, Arial, sans-serif;
}

table {
  border-collapse: collapse;
}

html {
  font-size: 62.5%;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  *zoom: 1;
}

body {
  font: 14px/1.8 Microsoft Yahei, Arial, Helvetica, sans-serif;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  position: relative;
}

.header,
.footer,
.container {
  position: relative;
  margin: 0 auto;
}

.header {
  z-index: 3;
  height: 105px;
  position: fixed;
  top: 0;
  left: 0;
}

.main {
  z-index: 1;
}

.footer {
  z-index: 2;
  height: 60px;
  line-height: 60px;
}

.header {
  width: 100%;
}

.header .pc,
.header .wap {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

.header .pc {
  padding: 34px 0 7px 0;
  max-width: 1200px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.header .pc a {
  display: block;
}

.header .pc img {
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

.header .pc > .item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}

.header .pc > .item.logo {
  padding: 0 14px;
  width: 330px;
  height: 100px;
}

/* .header .pc>.item.logo:hover>a img {
  filter: brightness(1.2);
} */

.header .pc > .item.slogan {
  padding: 0 14px;
}

.header .pc > .item.menu {
  max-width: 735px;
  width: 100%;
  justify-content: flex-end;
  gap: 1vmin;
}

.header .pc > .item.menu a {
  max-width: 127px;
  max-height: 44px;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 1.8rem;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border-radius: 44px;
  cursor: pointer;
}

.header .pc > .item.menu a:hover {
  color: #292148;
  background-image: linear-gradient(to bottom, #f4c557 0%, #ffffcb 100%);
}

.header .pc > .item.menu a:hover .img-div .off {
  display: none;
}

.header .pc > .item.menu a:hover .img-div .on {
  display: block;
}

.header .pc > .item.menu a .img-div {
  margin: 0 0.8vmin 0 0;
  width: 100%;
  max-width: 24px;
}

.header .pc > .item.menu a .img-div .off,
.header .pc > .item.menu a .img-div .on {
  width: 100%;
  height: auto;
}

.header .pc > .item.menu a .img-div .on {
  display: none;
}

.header .wap {
  position: relative;
  background-color: rgba(0, 0, 0, 0.48);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  display: none;
}

.header .wap a {
  display: block;
}

.header .wap img {
  display: block;
  margin: auto;
  width: 100%;
  height: auto;
}

.header .wap .item.logo {
  width: 156px;
}

.header .wap .item.menu {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 26px;
  height: 26px;
  margin-right: 5%;
}

.header .wap .item.menu > img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.header.scrollBg {
  background: rgba(25, 23, 58, 0.9);
}

.footer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  align-items: center;
  text-align: center;
  font-size: 14px;
  color: #dbdaf3;
  background: #19173a;
}

.footer .pc,
.footer .wap {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

.footer .pc .copy {
  text-align: center;
}

.footer .wap {
  display: none;
  border-top: 1px solid #433d67;
}

.footer .wap .f-item {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 25%;
  height: 100%;
  background: #19173a;
  color: #fff;
  font-size: 12px;
  text-decoration: none;
  border-right: 1px solid #433d67;
}

.footer .wap .f-item:hover {
  background: #27245c;
}

.footer .wap .f-item:last-child {
  border-right: none;
}

.footer .wap .f-item img,
.footer .wap .f-item p {
  display: block;
}

.footer .wap .f-item img {
  margin-bottom: 4px;
  width: auto;
  height: 24px;
}

.footer .wap .f-item p {
  line-height: 20px;
}

.container {
  margin: 0 auto;
  width: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.container .main {
  margin: 0 auto;
  margin-top: 105px;
  width: 100%;
  height: calc(100vh - 105px);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: scroll;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.container .main .wrap {
  position: relative;
  margin: 0 auto;
  padding: 1% 0;
  width: calc(160vh - 165px);
  height: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.container .main .wrap .zone {
  position: relative;
  z-index: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.container .main .wrap .area {
  position: absolute;
  top: 59.6%;
  right: 0;
  left: 0;
  z-index: 3;
  margin: 0 auto;
  padding-top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.container .main .wrap .area .message-div,
.container .main .wrap .area .search-div {
  position: relative;
  margin: 0 auto;
  width: 100%;
}

.container .main .wrap .area .message-div {
  text-align: center;
  color: #fff94e;
}

.container .main .wrap .area .message-div .text {
  font-size: 3.4vmin;
  font-weight: bold;
  letter-spacing: 0.6vmin;
}

.container .main .wrap .area .message-div .count {
  margin-top: -1.4%;
  font-size: 2.4vmin;
}

.container .main .wrap .area .message-div .count em {
  display: inline-block;
  margin-right: 0.2%;
  margin-left: 0.2%;
  color: #fff;
  font-style: normal;
}

.container .main .wrap .area .search-div .pc,
.container .main .wrap .area .search-div .wap {
  position: relative;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.container .main .wrap .area .search-div .pc img,
.container .main .wrap .area .search-div .pc .div,
.container .main .wrap .area .search-div .wap img,
.container .main .wrap .area .search-div .wap .div {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

.container .main .wrap .area .search-div .pc .div,
.container .main .wrap .area .search-div .wap .div {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.container .main .wrap .area .search-div .pc .input-el,
.container .main .wrap .area .search-div .wap .input-el {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.container .main .wrap .area .search-div .pc {
  margin-top: -4.8%;
  flex-direction: row;
}

.container .main .wrap .area .search-div .pc .input-el {
  margin-top: 2.5%;
  margin-left: -1.3%;
  width: 69.6%;
  height: 39.2%;
  border-radius: 30px;
  border: rgb(255, 202, 95) 0.3vmin solid;
  background: linear-gradient(
    to bottom,
    rgb(68, 1, 16) 0%,
    rgb(138, 18, 25) 100%
  );
}

.container .main .wrap .area .search-div .pc input,
.container .main .wrap .area .search-div .pc button {
  display: block;
  height: 100%;
  line-height: 100%;
  background: none;
  border-radius: 30px;
  font-size: 1.8vmin;
  border: none;
}

.container .main .wrap .area .search-div .pc input {
  width: 71%;
  color: #fff;
  text-align: center;
}

.container .main .wrap .area .search-div .pc input::-webkit-input-placeholder {
  color: #efafa2;
}

.container .main .wrap .area .search-div .pc .search-btn {
  width: 28%;
  margin-right: 0.5%;
  height: 90%;
  line-height: 90%;
  text-align: center;
  font-size: 1.8vmin;
  font-weight: bold;
  text-shadow: #2e0000 0 0 4px;
  color: #fff;
  background: linear-gradient(
    to bottom,
    rgb(255, 255, 255) 0%,
    rgb(255, 192, 93) 10%,
    rgb(231, 152, 33) 100%
  );
  box-shadow: inset -1px -1px 3px #2e0000;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
}

.container .main .wrap .area .search-div .pc .search-btn:hover {
  filter: brightness(1.1);
  transform-origin: center;
  transform: scale(0.98);
}

.container .main .wrap .area .search-div .wap {
  margin: -2.4vmin auto 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2.8vmin;
  display: none;
}

.container .main .wrap .area .search-div .wap .div {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.container .main .wrap .area .search-div .wap .div > .input-el {
  margin-top: 6.4%;
  margin-left: -0.5%;
  width: 67.2%;
  height: 50%;
  border-radius: 30px;
  border: rgb(255, 202, 95) 0.4vmin solid;
  background: linear-gradient(
    to bottom,
    rgb(68, 1, 16) 0%,
    rgb(138, 18, 25) 100%
  );
}

.container .main .wrap .area .search-div .wap input,
.container .main .wrap .area .search-div .wap button {
  display: block;
  height: 100%;
  line-height: 100%;
  background: none;
  border-radius: 30px;
  font-size: 2.8vmin;
  border: none;
}

.container .main .wrap .area .search-div .wap input {
  width: 100%;
  color: #fff;
  text-align: center;
}

.container .main .wrap .area .search-div .wap input::-webkit-input-placeholder {
  color: #efafa2;
}

.container .main .wrap .area .search-div .wap .search-btn {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  line-height: 100%;
  text-align: center;
  font-size: 1.8vmin;
  font-weight: bold;
  color: #fff;
  font-size: 0;
  text-indent: -999;
  background: none;
  cursor: pointer;
}

.container .main .wrap .area .search-div .b-wrap,
.container .main .wrap .area .search-div .b-btn,
.container .main .wrap .area .search-div .pc-btn {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

.container .main .wrap .area .search-div .b-wrap a,
.container .main .wrap .area .search-div .b-btn a,
.container .main .wrap .area .search-div .pc-btn a {
  display: block;
}

.container .main .wrap .area .search-div .b-wrap img,
.container .main .wrap .area .search-div .b-btn img,
.container .main .wrap .area .search-div .pc-btn img {
  position: relative;
}

.container .main .wrap .area .search-div .b-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.container .main .wrap .area .search-div .b-wrap.pc {
  width: 76%;
}

.container .main .wrap .area .search-div .b-btn {
  margin: 0 auto;
  width: 64%;
  transition: all 0.1s ease-in-out;
}

.container .main .wrap .area .search-div .b-btn:hover {
  filter: brightness(1.1);
  transform-origin: center;
  transform: scale(0.98);
}

.container .main .wrap .area .search-div .pc-btn {
  margin: 0 auto;
  width: 48%;
  transition: all 0.1s ease-in-out;
}

.container .main .wrap .area .search-div .pc-btn:hover {
  filter: brightness(1.1);
  transform-origin: center;
  transform: scale(0.98);
}

.container .main .wrap .item {
  position: relative;
  z-index: 0;
  width: 100%;
  height: auto;
}

.container .main .wrap .item .div {
  position: relative;
  width: 100%;
}

.container .main .wrap .item .div > img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin: auto;
}

.container .main .wrap .item .div {
  height: 100%;
}

.container .main .wrap .item .div > img {
  max-width: 100%;
  max-height: 100%;
}

.container .main .wrap .item.abs {
  position: absolute;
  margin: auto;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

.container .main .wrap .item.abs.left {
  width: 34%;
  height: 46%;
  top: 22%;
  bottom: auto;
  left: -28%;
  z-index: 2;
}

.container .main .wrap .item.abs.left div > img {
  margin-right: 0;
}

.container .main .wrap .item.abs.right {
  width: 75.2%;
  height: 90%;
  top: 7.4%;
  right: -60%;
  z-index: 2;
}

.container .main .wrap .item.abs.right div > img {
  margin-left: 0;
}

.container .main .wrap .item.abs.title {
  width: 95%;
  height: 38%;
  top: 0;
  z-index: 3;
}

.container .main .wrap .item.abs.title .div > img {
  margin-bottom: 0;
}

.container .main .wrap .item.abs.bg {
  width: 87.8%;
  height: 63.4%;
  top: 30%;
  margin-left: -5%;
  z-index: 1;
}

.container .main .wrap .item.abs.bg .div > img {
  margin-top: 0;
}

.container .content {
  margin: 0 auto;
  padding: 2%;
  width: 100%;
  max-width: 1200px;
  height: auto;
  color: #fff;
}

.play {
  position: relative;
  z-index: 0;
  margin: auto;
  width: 100%;
  height: 78%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.grid-box {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 1.2vmin;
  grid-row-gap: 1.2vmin;
}

.grid-box > .item {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 0.8vmin;
  border: rgba(255, 255, 255, 0.3) 1px solid;
  border-radius: 1vmin;
  position: relative;
  overflow: hidden;
  filter: blur(1);
  backdrop-filter: blur(5px);
}

.grid-box > .item::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1vmin;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.3) 100%
  );
}

.grid-box > .item.on,
.grid-box > .item:hover {
  border: #ffdf71 1px solid;
}

.grid-box > .item.on::after,
.grid-box > .item:hover::after {
  box-shadow: inset 0 0 28px -2px rgb(252, 205, 1);
}

.grid-box > .item .img-box {
  position: relative;
  width: 44%;
  height: 44%;
}

.grid-box > .item .img-box > img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.grid-box > .item p {
  display: block;
  text-align: center;
  font-size: 1.4vmin;
  line-height: 2vmin;
  color: #fff;
}

.grid-box > .item.role0 {
  grid-area: 1/1/2/2;
}

.grid-box > .item.role1 {
  grid-area: 1/2/2/3;
}

.grid-box > .item.role2 {
  grid-area: 1/3/2/4;
}

.grid-box > .item.role3 {
  grid-area: 1/4/2/5;
}

.grid-box > .item.role4 {
  grid-area: 1/5/2/6;
}

.grid-box > .item.role5 {
  grid-area: 1/6/2/7;
}

.grid-box > .item.role6 {
  grid-area: 2/6/3/7;
}

.grid-box > .item.role7 {
  grid-area: 3/6/4/7;
}

.grid-box > .item.role8 {
  grid-area: 4/6/5/7;
}

.grid-box > .item.role9 {
  grid-area: 5/6/6/7;
}

.grid-box > .item.role10 {
  grid-area: 5/5/6/6;
}

.grid-box > .item.role11 {
  grid-area: 5/4/6/5;
}

.grid-box > .item.role12 {
  grid-area: 5/3/6/4;
}

.grid-box > .item.role13 {
  grid-area: 5/2/6/3;
}

.grid-box > .item.role14 {
  grid-area: 5/1/6/2;
}

.grid-box > .item.role15 {
  grid-area: 4/1/5/2;
}

.grid-box > .item.role16 {
  grid-area: 3/1/4/2;
}

.grid-box > .item.role17 {
  grid-area: 2/1/3/2;
}

.grid-box > .box {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 0.4vmin;
}

.grid-box > .box.center {
  grid-area: 2/2/5/6;
  padding: 2% 0 0 0;
}

.grid-box > .box.center .img-box {
  position: relative;
  width: 100%;
  height: 50%;
}

.grid-box > .box.center .img-box:nth-child(1) {
  height: 60%;
}

.grid-box > .box.center .img-box:nth-child(1) img {
  margin-bottom: 0;
}

.grid-box > .box.center .img-box:nth-child(2) {
  height: 40%;
}

.grid-box > .box.center .img-box:nth-child(2) img {
  margin-top: 0;
}

.grid-box > .box.center .img-box img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.grid-box > .box.center .img-box .btn {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 57.6%;
  height: 100%;
}

.grid-box > .box.center .img-box .btn > img {
  left: 6.8%;
}

.grid-box > .box.center .img-box .btn:hover > img {
  filter: brightness(1.1);
}

.countdown {
  position: relative;
  z-index: 0;
  margin: auto;
  padding: 1% 0;
  width: 100%;
  height: 20%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2vmin;
}

.countdown .message-div {
  text-align: center;
  color: #fff94e;
  margin: auto;
  padding: 3% 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.countdown .message-div .text {
  color: #fff;
  font-size: 3.6vmin;
  font-weight: bold;
  background: #fafbff;
  background: linear-gradient(to bottom, #fafbff 0%, #fafbff 50%, #c2c6ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 3vmin;
}

.countdown .message-div .count {
  position: relative;
  font-size: 2vmin;
  height: 100%;
  color: #fff;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 1.2vmin;
}

.countdown .message-div .count > div {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  min-width: 7.2vmin;
  width: 100%;
  height: 100%;
  border-radius: 0.6vmin;
  border: #000 0.4vmin solid;
  overflow: hidden;
}

.countdown .message-div .count > div > span {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50%;
}

.countdown .message-div .count > div > span:nth-child(1) {
  background-color: rgb(31, 29, 30);
  color: #fffc53;
  font-size: 2.4vmin;
  font-weight: bold;
  letter-spacing: 0.1vmin;
}

.countdown .message-div .count > div > span:nth-child(2) {
  background-color: rgb(67, 66, 66);
  color: #fff;
  font-size: 1.6vmin;
}

.countdown .img-div {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.countdown .img-div > img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.countdown .img-div.icon-left,
.countdown .img-div.icon-right {
  width: 7.2%;
  height: 58%;
}

.countdown .img-div.count-center {
  width: 74%;
  height: 90%;
  background-image: url(../images/play/countdown-icon-bg_left.png),
    url(../images/play/countdown-icon-bg_right.png),
    url(../images/play/countdown-icon-bg_center.png);
  background-repeat: no-repeat;
  background-position: left center, right center, center center;
  background-size: auto 100%, auto 100%, 60% 100%;
}

.countdown .img-div.count-icon {
  width: 4.8%;
  height: 52%;
  margin-right: 1vmin;
}

.checker {
  position: relative;
  margin: auto;
  padding: 2%;
  width: 100%;
  height: 16%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10%;
  display: none;
}

.checker input,
.checker button {
  display: block;
  width: 80%;
  height: 45%;
  text-align: center;
  border: none;
  border-radius: 1vmin;
  font-size: 3vmin;
  font-weight: bold;
}

.checker button {
  color: rgb(180, 0, 0);
  background-image: linear-gradient(
    to bottom,
    rgb(244, 193, 79) 0%,
    rgb(251, 234, 150) 100%
  );
  cursor: pointer;
}

.col-div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 0;
  width: 100%;
  height: auto;
}

.col-div.col-pad-b {
  padding-bottom: 8%;
}

.col-div.col-pad-l {
  padding-left: 4%;
}

.col-div.row {
  flex-direction: row;
}

.col-div.column {
  flex-direction: column;
}

.col-div.custom.theme-default {
  color: #dbdaf3;
  font-size: 1.6vmin;
  line-height: 3vmin;
}

.col-div.custom.c-title,
.col-div.custom.c-content {
  word-wrap: break-word;
  word-break: break-all;
}

.col-div.custom.c-title {
  background-image: url(../images/play/title-line_bg.png);
  background-repeat: repeat-x;
  background-position: left bottom;
  margin-bottom: 4vmin;
  padding-bottom: 4vmin;
  font-weight: bold;
}

.col-div.custom.c-title .title-wrap {
  position: relative;
  padding-left: 3vmin;
}

.col-div.custom.c-title .title-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1vmin;
  height: 100%;
  background-color: #ffe081;
  border-radius: 0.5vmin;
}

.col-div.custom.c-title .title-wrap > h2,
.col-div.custom.c-title .title-wrap > p {
  display: block;
  width: 100%;
}

.col-div.custom.c-title .title-wrap > h2 {
  color: #ffe081;
  font-size: 4vmin;
  line-height: 4vmin;
  margin-bottom: 1vmin;
}

.col-div.custom.c-title .title-wrap > p {
  color: #fff;
  font-size: 2vmin;
  font-weight: normal;
  letter-spacing: 0.5vmin;
}

.col-div.custom.c-content > h3,
.col-div.custom.c-content > p {
  width: 100%;
}

.col-div.custom.c-content > h3 {
  color: #ffe081;
  font-weight: bold;
}

.col-div.custom.c-content > p {
  margin-bottom: 4vmin;
}

.col-div.custom.c-content > p > span {
  color: #ffe081;
}

.col-div.w5 {
  width: 5%;
}

.col-div.w10 {
  width: 10%;
}

.col-div.w15 {
  width: 15%;
}

.col-div.w20 {
  width: 20%;
}

.col-div.w25 {
  width: 25%;
}

.col-div.w30 {
  width: 30%;
}

.col-div.w35 {
  width: 35%;
}

.col-div.w40 {
  width: 40%;
}

.col-div.w45 {
  width: 45%;
}

.col-div.w50 {
  width: 50%;
}

.col-div.w55 {
  width: 55%;
}

.col-div.w60 {
  width: 60%;
}

.col-div.w65 {
  width: 65%;
}

.col-div.w70 {
  width: 70%;
}

.col-div.w75 {
  width: 75%;
}

.col-div.w80 {
  width: 80%;
}

.col-div.w85 {
  width: 85%;
}

.col-div.w90 {
  width: 90%;
}

.col-div.w95 {
  width: 95%;
}

.col-div.w100 {
  width: 100%;
}

.tableBox {
  margin: 0 auto;
  width: 100%;
}

.tableBox table {
  width: 100%;
  border-collapse: collapse;
}

.tableBox table th,
.tableBox table td {
  padding: 1%;
  width: 25%;
  color: #dbdaf3;
  font-size: 1.6vmin;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #605ba2;
  background: #292457;
}

.tableBox table tr:nth-child(2n + 1) td {
  background: #3b376b;
}

.tableBox table th {
  font-weight: bold;
  color: #272553;
  line-height: 1.45;
  background: #ff5662;
}

.cover {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  display: none;
  background: rgba(0, 0, 0, 0.5);
}

.popBox {
  position: fixed;
  left: 50%;
  top: 50%;
  margin: auto;
  z-index: 1000;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  display: none;
}

.popBox .img {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position: absolute;
  transform: translate(-50%, -50%);
}

.popBox .img > img {
  display: block;
  margin: auto;
  max-width: 100vw;
  max-height: 100vh;
}

.popBox .img p {
  position: absolute;
  bottom: 16%;
  right: 0;
  left: 0;
  width: 100%;
  display: block;
  color: #fff;
  font-size: 3vmin;
  font-weight: bold;
  text-align: center;
}

.popBox .img p span {
  display: block;
  color: #fff100;
}

.popBox .img p .txt02 {
  font-size: 4vmin;
}

.popBox .img .close {
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 10%;
  height: 8%;
}

.popBox .img .close a {
  display: block;
}

.popBox .img .close a > img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

.pop {
  margin: -158px 0 0 -282px;
  width: 564px;
  height: 317px;
  position: fixed;
  left: 50%;
  top: 50%;
  display: none;
  z-index: 9999;
  box-sizing: border-box;
  background: url(../images/pop/tclogin.png) no-repeat center top;
}

.pop .close {
  position: absolute;
  right: -24px;
  top: -24px;
}

.pop .user_name {
  margin: 68px auto 0;
  width: 350px;
  height: 80px;
  display: block;
  color: #6c3114;
  font-size: 24px;
  line-height: 80px;
  text-align: center;
  background: #fff4e4;
  border-radius: 20px;
  border: none;
}

.pop .tcsub {
  color: #fff;
  display: block;
  font-size: 30px;
  font-weight: 700;
  height: 80px;
  line-height: 80px;
  margin: 68px auto 0;
  text-align: center;
  width: 350px;
  border-radius: 20px;
  border: none;
  background: #f63d3d;
}

.searchBox {
  padding: 21px 50px 50px;
  width: 96%;
  max-width: 720px;
  position: fixed;
  left: 50%;
  top: 50%;
  display: none;
  z-index: 10000;
  border-radius: 20px;
  box-sizing: border-box;
  background: #241f46;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.searchBox .close {
  position: absolute;
  right: 18px;
  top: 18px;
}

.searchBox p {
  margin-bottom: 24px;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.searchBox .search {
  margin: 0 auto 32px;
  width: 100%;
  max-width: 510px;
  position: relative;
}

.searchBox .search input {
  margin: 0;
  padding: 0 20px;
  width: 100%;
  height: 50px;
  color: #161616;
  font-size: 18px;
  line-height: 50px;
  box-sizing: border-box;
  border-radius: 25px;
  border: none;
  background: #fff;
}

.searchBox .search a {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.searchBox .search input::-webkit-input-placeholder {
  color: #161616;
}

.searchBox .search input::-moz-placeholder {
  color: #161616;
  opacity: 1;
}

.searchBox .search input:-moz-placeholder {
  color: #161616;
  opacity: 1;
}

.searchBox table {
  width: 100%;
  border-collapse: collapse;
}

.searchBox th {
  color: #272553;
  font-size: 14px;
  line-height: 38px;
  text-align: center;
  background: #ffdf70;
  border: 1px solid #605ba2;
}

.searchBox td {
  padding: 7px 10px;
  color: #dbdaf3;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
  border: 1px solid #605ba2;
}

.searchBox td span {
  color: #fff21c;
}

.searchBox tr:nth-child(2n + 1) td {
  background: #3b376b;
}

@media screen and (max-width: 1200px) {
  .container .main .wrap .zone {
    width: 96%;
    height: 96%;
  }
}

@media screen and (max-width: 1024px) {
  body {
    background-position: center top;
    background-size: 136% auto;
  }

  .header .pc,
  .footer .pc {
    display: none;
  }

  .header .wap,
  .footer .wap {
    display: flex;
  }

  .header,
  .footer {
    height: 66px;
  }

  .footer {
    position: fixed;
    bottom: 0;
    right: 0;
    line-height: normal;
  }

  .container .main .wrap .zone .area .pc {
    display: none;
  }

  .container .main .wrap .zone .area .wap {
    display: flex;
  }

  .container {
    margin-bottom: 66px;
  }

  .container .main {
    background-position: center top;
    background-size: 160% auto;
    margin-top: 66px;
    height: calc(78vh - 132px);
  }

  .container .main .wrap {
    padding: 0;
    width: calc(75vh - 132px);
    height: 100%;
    max-width: none;
    max-height: 133.3333333333vmin;
  }

  .container .main .wrap .zone .area {
    top: 36%;
  }

  .container .main .wrap .item.abs.left {
    width: 29.6%;
    height: 29.6%;
    top: 18%;
    bottom: auto;
    left: -4%;
  }

  .container .main .wrap .item.abs.right {
    width: 66%;
    height: 58%;
    top: 10%;
    right: -28.8%;
  }

  .container .main .wrap .item.abs.title {
    width: 68%;
    height: 19.8%;
    top: 4.8%;
  }

  .container .main .wrap .item.abs.bg {
    width: 62%;
    height: 32.8%;
    top: 19.8%;
    margin-left: -5%;
  }

  .container .content {
    padding: 8% 4% 4% 4%;
  }

  .grid-box {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, 1fr);
  }

  .grid-box > .item {
    gap: 0.4vmin;
  }

  .grid-box > .item > p {
    font-size: 12px;
    line-height: 14px;
    transform: scale(0.75);
  }

  .grid-box > .item .img-box {
    position: relative;
    width: 50%;
    height: 50%;
  }

  .grid-box > .item.role0 {
    grid-area: 1/1/2/2;
  }

  .grid-box > .item.role1 {
    grid-area: 1/2/2/3;
  }

  .grid-box > .item.role2 {
    grid-area: 1/3/2/4;
  }

  .grid-box > .item.role3 {
    grid-area: 1/4/2/5;
  }

  .grid-box > .item.role4 {
    grid-area: 1/5/2/6;
  }

  .grid-box > .item.role5 {
    grid-area: 2/5/3/6;
  }

  .grid-box > .item.role6 {
    grid-area: 3/5/4/6;
  }

  .grid-box > .item.role7 {
    grid-area: 4/5/5/6;
  }

  .grid-box > .item.role8 {
    grid-area: 5/5/6/6;
  }

  .grid-box > .item.role9 {
    grid-area: 6/5/7/6;
  }

  .grid-box > .item.role10 {
    grid-area: 6/4/7/5;
  }

  .grid-box > .item.role11 {
    grid-area: 6/3/7/4;
  }

  .grid-box > .item.role12 {
    grid-area: 6/2/7/3;
  }

  .grid-box > .item.role13 {
    grid-area: 6/1/7/2;
  }

  .grid-box > .item.role14 {
    grid-area: 5/1/6/2;
  }

  .grid-box > .item.role15 {
    grid-area: 4/1/5/2;
  }

  .grid-box > .item.role16 {
    grid-area: 3/1/4/2;
  }

  .grid-box > .item.role17 {
    grid-area: 2/1/3/2;
  }

  .grid-box > .box.center {
    grid-area: 2/2/6/5;
    gap: 2vmin;
  }

  .grid-box > .box.center .img-box .btn {
    width: 90%;
  }

  .play {
    width: 100%;
    height: 66%;
  }

  .countdown {
    padding: 2% 0;
    width: 100%;
    height: 18%;
    flex-wrap: wrap;
    gap: 1vmin;
  }

  .countdown .message-div {
    flex-wrap: wrap;
    padding: 0;
  }

  .countdown .message-div .text {
    font-size: 3.6vmin;
    margin-right: 0;
  }

  .countdown .message-div .count {
    padding: 0;
    width: 80%;
    height: 56%;
    justify-content: center;
    gap: 0.8vmin;
  }

  .countdown .message-div .count > div {
    border-radius: 1vmin;
    width: auto;
    min-width: 18%;
  }

  .countdown .message-div .count > div > span:nth-child(1) {
    font-size: 3vmin;
    letter-spacing: 0.1vmin;
  }

  .countdown .message-div .count > div > span:nth-child(2) {
    font-size: 1.6vmin;
  }

  .countdown .img-div.count-center {
    width: 100%;
    height: 100%;
    background: none;
  }

  .countdown .img-div.icon-left,
  .countdown .img-div.icon-right {
    display: none;
  }

  .countdown .img-div.count-icon {
    padding: 0;
    width: 4%;
    height: 20%;
  }

  .checker {
    display: flex;
  }

  .col-div.w5,
  .col-div.w10,
  .col-div.w15,
  .col-div.w20,
  .col-div.w25,
  .col-div.w30,
  .col-div.w35,
  .col-div.w40,
  .col-div.w45,
  .col-div.w50,
  .col-div.w55,
  .col-div.w60,
  .col-div.w65,
  .col-div.w70,
  .col-div.w75,
  .col-div.w80,
  .col-div.w85,
  .col-div.w90,
  .col-div.w95,
  .col-div.w100 {
    width: 100%;
  }

  .col-div.col-pad-l {
    padding-left: 0;
  }

  .col-div.custom.c-title {
    margin-bottom: 6vmin;
  }

  /* 手機板樣式調整 */
  .pop .close {
    /* right: 91px;
    top: 10px; */
    right: 252px;
    top: 338px;
  }
  .searchBox td {
    padding: 0;
  }
  .popBox .img p {
    font-size: 3rem;
  }
  .popBox .img p .txt02 {
    font-size: 4rem;
  }
}

.heartbeat {
  /* animation: heartbeat 1.8s 4s ease-in-out infinite both; */
}

@keyframes heartbeat {
  from {
    transform: scale(1);
    transform-origin: center center;
    animation-timing-function: ease-out;
  }

  10% {
    transform: scale(0.91);
    animation-timing-function: ease-in;
  }

  17% {
    transform: scale(0.98);
    animation-timing-function: ease-out;
  }

  33% {
    transform: scale(0.87);
    animation-timing-function: ease-in;
  }

  45% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
}

.pulsate-fwd-r {
  animation: pulsate-fwd-r 2s ease-in-out 1.5s infinite both;
}

@keyframes pulsate-fwd-r {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.975);
  }

  100% {
    transform: scale(1);
  }
}

.pulsate-fwd-l {
  animation: pulsate-fwd-l 1.5s ease-in-out infinite both;
}

@keyframes pulsate-fwd-l {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

.text-glow {
  animation: text-glow 1s linear infinite alternate;
}

@keyframes text-glow {
  from {
    text-shadow: 0px 0px 5px #fff, 0px 0px 5px #614ad3;
  }

  to {
    text-shadow: 0px 0px 20px #fff, 0px 0px 20px #614ad3;
  }
}

.bg-brightness-contrast {
  animation: bg-brightness-contrast 1.5s ease-in-out 1s infinite alternate;
}

@keyframes bg-brightness-contrast {
  0% {
    filter: brightness(1);
    -webkit-filter: brightness(1);
  }

  50% {
    filter: brightness(1.2);
    -webkit-filter: brightness(1.2);
  }

  100% {
    filter: brightness(1);
    -webkit-filter: brightness(1);
  }
}

.flip-in-hor-bottom {
  animation: flip-in-hor-bottom 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes flip-in-hor-bottom {
  0% {
    transform: rotateX(80deg);
    opacity: 0;
  }

  100% {
    transform: rotateX(0);
    opacity: 1;
  }
}

.wobble-ver-left {
  animation: wobble-ver-left 4.5s infinite both;
}

@keyframes wobble-ver-left {
  0%,
  78%,
  100% {
    transform: translateY(0) rotate(0);
    transform-origin: 50% 50%;
  }

  83% {
    transform: translateY(-30px) rotate(-6deg);
  }

  86% {
    transform: translateY(15px) rotate(6deg);
  }

  89% {
    transform: translateY(-15px) rotate(-3.6deg);
  }

  92% {
    transform: translateY(9px) rotate(2.4deg);
  }

  95% {
    transform: translateY(-6px) rotate(-1.2deg);
  }
}

.scale-in-center {
  animation: scale-in-center 0.3s 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
}

.scale-in-center-1 {
  animation: scale-in-center 0.3s 1.25s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
}

@keyframes scale-in-center {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.swirl-in-fwd {
  animation: swirl-in-fwd 0.6s ease-out both;
}

@keyframes swirl-in-fwd {
  0% {
    transform: rotate(-540deg) scale(0);
    opacity: 0;
  }

  100% {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}

.swirl-in-bck {
  /* animation: swirl-in-bck 0.75s ease-out both; */
}

@keyframes swirl-in-bck {
  0% {
    transform: rotate(540deg) scale(5);
    opacity: 0;
  }

  100% {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}

.swing-in-top-fwd {
  animation: swing-in-top-fwd 0.5s 1.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
    both;
}

@keyframes swing-in-top-fwd {
  0% {
    transform: rotateX(-100deg);
    transform-origin: top;
    opacity: 0;
  }

  100% {
    transform: rotateX(0deg);
    transform-origin: top;
    opacity: 1;
  }
}

.flicker-1 {
  animation: flicker-1 2s 4.5s linear infinite both;
}

@keyframes flicker-1 {
  0%,
  100% {
    opacity: 1;
  }

  41.99% {
    opacity: 1;
  }

  42% {
    opacity: 0;
  }

  43% {
    opacity: 0;
  }

  43.01% {
    opacity: 1;
  }

  47.99% {
    opacity: 1;
  }

  48% {
    opacity: 0;
  }

  49% {
    opacity: 0;
  }

  49.01% {
    opacity: 1;
  }
}

.fade-in-top {
  animation: fade-in-top 1s 1.7s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes fade-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.fade-in {
  animation: fade-in 2.4s 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*# sourceMappingURL=template-style.css.map */

/*vue設定*/
[v-cloak] {
  display: none;
}

/*----查詢彈出窗樣是設定-----*/
.remake {
  cursor: pointer;
}

#pages {
  text-align: center;
}

/*layui*/
.layui-laypage .layui-laypage-curr .layui-laypage-em {
  left: 0px !important;
  top: 0px !important;
  background-color: #ffdf70 !important;
  padding: 0 !important;
}

.layui-laypage .layui-laypage-curr em {
  color: #272553 !important;
}

.layui-laypage a,
.layui-laypage span {
  color: #dbdaf3 !important;
  background-color: transparent !important;
  border: 1px solid #605ba2 !important;
  height: 24px;
  line-height: 24px;
}