*,

*:before,

*:after {

  -webkit-box-sizing: border-box;

          box-sizing: border-box;

}



html,

body,

div,

span,

applet,

object,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

a,

abbr,

acronym,

address,

big,

cite,

code,

del,

dfn,

em,

img,

ins,

kbd,

q,

s,

samp,

small,

strike,

strong,

sub,

tt,

var,

b,

u,

i,

center,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td,

article,

aside,

canvas,

details,

embed,

figure,

figcaption,

footer,

header,

hgroup,

menu,

nav,

output,

ruby,

section,

summary,

time,

mark,

audio,

video {

  margin: 0;

  padding: 0;

  border: 0;

  font-size: 100%;

  font: inherit;

  vertical-align: baseline;

}



/* HTML5 display-role reset for older browsers */

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section {

  display: block;

}



body {

  line-height: 1;

}



ol,

ul {

  list-style: none;

}



blockquote,

q {

  quotes: none;

}



blockquote:before,

blockquote:after,

q:before,

q:after {

  content: "";

  content: none;

}



table {

  border-collapse: collapse;

  border-spacing: 0;

}



a {

  text-decoration: none;

}



a {

  outline: none;

  /* for Firefox */

  hlbr: expression(this.onFocus=this.blur());

  /* for IE */

  cursor: pointer;

}



a:link,

a:visited,

a:hover,

a:active {

  text-decoration: none;

}



select,

input,

textarea {

  border: none;

  border-radius: 0;

  -webkit-appearance: none;

  outline: none;

}



button {

  background: none;

  border: 0px;

}



html,

body {

  padding: 0;

  margin: 0 auto;

  font-family: sans-serif;

  color: #ffffff;

}



html {

  width: 100%;

  height: 100%;

}



body {

  width: 100vw;

  height: auto;

  overflow-x: hidden;

  -ms-overflow-style: none;

}



body::-webkit-scrollbar {

  display: none;

}



img {

  vertical-align: middle;

  -ms-touch-action: manipulation;

      touch-action: manipulation;

}



button,

label,

li,

a {

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  -webkit-tap-highlight-color: transparent;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}



button {

  padding: 0;

  cursor: pointer;

}



/***************************/

.btn_hall,

.btn_def {

  width: calc((100vh - 5.67vw - 6.29vh - 8.85vh - 14.815vh) * 0.4574);

  height: calc(((100vh - 5.67vw - 6.29vh - 8.85vh - 14.815vh) * 0.4574) * 0.3508);

  font-size: 2.29vw;

  font-weight: 400;

  letter-spacing: 0;

  line-height: 2.6vw;

  color: #ffffff;

  background-image: url(../img/btn_def.png);

  background-repeat: no-repeat;

  background-size: 100%;

}



.btn_hall:disabled,

.btn_def:disabled {

  background-image: url(../img/btn_disabled.png);

}



@media (max-width: 768px) {

  .btn_hall {

    width: 43vw;

    height: calc(43vw * 0.3508);

    max-width: 183px;

    max-height: 63px;

    font-size: 25px;

    line-height: 28px;

  }

  .btn_def {

    width: 47.4vw;

    height: calc(47.4vw * 0.3508);

    max-width: 203px;

    max-height: 70px;

    font-size: 27px;

    line-height: 28px;

  }

}



.main {

  width: 100vw;

  height: 100vh;

  overflow: hidden;

  position: relative;

  background-image: url(../img/bg.png);

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

}



.main::before {

  content: "";

  width: 82.34vw;

  height: 5.67vw;

  position: absolute;

  top: 0;

  right: -6.3vw;

  background-image: url(../img/top_bg.png);

  background-repeat: no-repeat;

  background-size: 100%;

  background-position: top right;

}



.main::after {

  content: "";

  width: 74.68vw;

  height: 6.97vw;

  position: absolute;

  left: 0;

  top: 0;

  background-image: url(../img/top_bar.png);

  background-repeat: no-repeat;

  background-size: 100%;

}



@media (max-width: 768px) {

  .main {

    width: 100vw;

    height: auto;

    overflow-y: scroll;

    -ms-overflow-style: none;

    background-image: url(../img/bg.png);

    background-repeat: repeat;

    background-size: inherit;

    background-position: 20% center;

  }

  .main::-webkit-scrollbar {

    display: none;

  }

  .main::before {

    display: none;

  }

  .main::after {

    content: "";

    width: 100vw;

    height: 105px;

    position: absolute;

    top: 0;

    right: 0;

    background-repeat: no-repeat;

    background-size: auto 130px;

    background-position: left bottom;

  }

}



.top_bar {

  position: relative;

  z-index: 1;

  width: 100%;

  height: 5.67vw;

  padding: 0 83px 0 43px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: justify;

      -ms-flex-pack: justify;

          justify-content: space-between;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  font-size: 1.46vw;

  font-weight: 400;

  letter-spacing: 0;

  line-height: 2vw;

}



@media (max-width: 768px) {

  .top_bar {

    width: 100%;

    height: auto;

    padding: 0;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

        -ms-flex-direction: column;

            flex-direction: column;

    font-size: 15px;

    line-height: 20px;

  }

}



.user_inner {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: start;

      -ms-flex-pack: start;

          justify-content: flex-start;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -ms-flex-wrap: wrap;

      flex-wrap: wrap;

  width: 44vw;

}



.user_inner li {

  color: #ffea95;

}



.user_inner li:nth-child(2n) {

  width: 26vw;

}



.user_inner li:nth-child(2n + 1) {

  width: 18vw;

}



.user_inner li:nth-child(1), .user_inner li:nth-child(2) {

  margin-bottom: 7px;

}



.user_inner li span {

  display: inline-block;

}



.user_inner li span:first-child {

  width: 4.6875vw;

  margin-right: 6px;

}



.user_inner li span:last-child {

  padding: 0 26px 0px 21px;

  border-radius: 50px;

  color: #ffffff;

  background-color: #000000;

}



@media (max-width: 768px) {

  .user_inner {

    width: 100vw;

    margin: 20px auto 30px auto;

    padding: 0 12vw;

    -ms-flex-wrap: wrap;

        flex-wrap: wrap;

  }

  .user_inner li:nth-child(2n) {

    width: 38vw;

  }

  .user_inner li:nth-child(2n + 1) {

    width: 38vw;

  }

  .user_inner li span {

    display: inline-block;

  }

  .user_inner li span:first-child {

    width: 45px;

  }

  .user_inner li span:last-child {

    padding: 2px 16px;

  }

}



@media (max-width: 503px) {

  .user_inner {

    padding: 0 20px;

  }

  .user_inner li:nth-child(2n) {

    width: calc(50vw - 20px);

  }

  .user_inner li:nth-child(2n + 1) {

    width: calc(50vw - 20px);

  }

}



@media (max-width: 422px) {

  .user_inner li:nth-child(2n) {

    width: calc(60vw - 20px);

  }

  .user_inner li:nth-child(2n + 1) {

    width: calc(40vw - 20px);

  }

}



#closeall_btn {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: start;

      -ms-flex-pack: start;

          justify-content: center;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  background-color: #FFFFFF55;

  border-radius: 5px;

  border: 1px solid #FFFFFF55;

  padding: 0px 5px;

  font-size: 10px;

  cursor: pointer;

}



.balance {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: end;

      -ms-flex-pack: end;

          justify-content: flex-end;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

}



.balance_inner {

  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;

}



.balance_inner .cash {

  white-space: nowrap;

}



.balance_inner .btn_inner {

  margin-left: 25px;

  margin-right: 38px;

}



.balance_inner .btn_inner button {

  width: 2.815vw;

  height: 2.815vw;

  padding: 0;

}



.balance_inner .btn_inner button img {

  width: 100%;

}



.balance .ctrl_inner {

  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;

}



.balance span {

  display: inline-block;

  width: 9.68vw;

  height: 2.07vw;

  margin-right: 18px;

  font-size: 1.14vw;

  font-weight: 400;

  letter-spacing: 0;

  line-height: 2.03vw;

  color: #ffce0d;

  text-align: center;

  background-image: url(../img/bg_status.png);

  background-repeat: no-repeat;

  background-size: 100%;

}



.balance span:last-child {

  margin-right: 0;

}



@media (max-width: 1490px) {

  .balance .ctrl_inner {

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

        -ms-flex-direction: column;

            flex-direction: column;

  }

  .balance span {

    margin-right: 0;

  }

  .balance span:last-child {

    margin-top: 5px;

  }

}



@media (max-width: 768px) {

  #closeall_btn {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: start;

        -ms-flex-pack: start;

          justify-content: center;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;

    -ms-flex-wrap: wrap;

        flex-wrap: wrap;

    width: 44vw;

    background-color: #FFFFFF55;

    border-radius: 5px;

  }



  .balance {

    margin-top: 20px;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

        -ms-flex-direction: column;

            flex-direction: column;

    -webkit-box-pack: center;

        -ms-flex-pack: center;

            justify-content: center;

  }

  .balance_inner {

    margin-bottom: 25px;

    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;

    font-size: 28px;

    line-height: 37px;

  }

  .balance_inner .btn_inner {

    margin-left: 30px;

    margin-right: 0px;

  }

  .balance_inner .btn_inner button {

    width: 45px;

    height: 45px;

  }

  .balance span {

    width: 186px;

    height: 39px;

    font-size: 22px;

    line-height: 39px;

  }

}



@media (max-width: 420px) {

  .balance span {

    display: block;

    margin-right: 0px;

  }

  .balance span:last-child {

    margin-top: 20px;

  }

}



.content {

  padding: 6.29vh 0 8.85vh 0;

  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;

}



.content > div {

  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;

}



@media (max-width: 768px) {

  .content {

    width: 100%;

    padding: 0;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

        -ms-flex-direction: column;

            flex-direction: column;

  }

  .content > div {

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

        -ms-flex-direction: column;

            flex-direction: column;

  }

}



.hall {

  position: relative;

  height: calc(100vh - 5.67vw - 6.29vh - 8.85vh - 14.815vh);

  margin-right: 9.68vw;

  margin-top: 3.7vh;

}



.hall img {

  height: 100%;

}



.hall .btn_wrap {

  position: absolute;

  left: 50%;

  bottom: 39px;

  -webkit-transform: translateX(-50%);

          transform: translateX(-50%);

}



@media (max-width: 768px) {

  .hall {

    width: calc(100vw - 40vw);

    height: auto;

    max-width: 248px;

    margin-right: 0;

    margin-top: 35px;

    margin-bottom: 47px;

  }

  .hall img {

    width: 100%;

    height: auto;

  }

  .hall .btn_wrap {

    margin-left: -1vw;

    position: absolute;

    left: 50%;

    bottom: 39px;

    -webkit-transform: translateX(-50%);

            transform: translateX(-50%);

  }

}



.item {

  height: calc(((100vh - 6.97vw - 6.29vh - 8.85vh - 50px) / 2));

  margin-right: 5.72vw;

  padding-bottom: 43px;

  position: relative;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

}



.item_list .group {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: start;

      -ms-flex-pack: start;

          justify-content: flex-start;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

}



.item img {

  height: 100%;

}



.item:nth-child(2n) {

  margin-right: 0;

}



.item:first-child, .item:nth-child(2) {

  margin-bottom: 50px;

}



.item:first-child img {

  margin-left: -11px;

}



.item:nth-child(2) {

  padding-top: 7px;

}



.item:nth-child(3) img {

  margin-left: -19px;

}



.item:last-child {

  padding-top: 14px;

}



.item .btn_wrap {

  position: absolute;

  left: 50%;

  -webkit-transform: translateX(-50%);

          transform: translateX(-50%);

  bottom: 0;

}



@media (max-width: 768px) {

  .item {

    width: 50vw;

    height: auto;

    margin-right: 0;

    margin-bottom: 30px;

    padding-bottom: 28px;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;

  }

  .item_list {

    width: 100vw;

  }

  .item_list .group {

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

        -ms-flex-direction: column;

            flex-direction: column;

    -webkit-box-pack: center;

        -ms-flex-pack: center;

            justify-content: center;

  }

  .item:nth-child(2n) {

    margin-right: 0;

  }

  .item:first-child, .item:nth-child(2) {

    margin-bottom: 30px;

  }

  .item:first-child img {

    width: 49.29vw;

    height: auto;

    max-width: 211px;

    margin-left: -2.57vw;

  }

  .item:nth-child(2) {

    padding-top: 0px;

  }

  .item:nth-child(2) img {

    width: 42.52vw;

    height: auto;

    max-width: 182px;

  }

  .item:nth-child(3) img {

    width: 50.7vw;

    height: auto;

    max-width: 217px;

    margin-left: -4.43vw;

  }

  .item:last-child {

    padding-top: 0px;

    margin-bottom: 52px;

  }

  .item:last-child img {

    width: 42.99vw;

    height: auto;

    max-width: 184px;

  }

  .item .btn_wrap {

    position: absolute;

    left: 50%;

    -webkit-transform: translateX(-50%);

            transform: translateX(-50%);

    bottom: 0;

  }

}

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