/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
*,:after,:before {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59,130,246,.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style:
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59,130,246,.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style:
}

/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/
*,:after,:before {
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

:after,:before {
  --tw-content: ""
}

:host,html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent
}

body {
  line-height: inherit
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px
}

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}

h1,h2,h3,h4,h5,h6 {
  font-size: inherit;
  font-weight: inherit
}

a {
  color: inherit;
  text-decoration: inherit
}

b,strong {
  font-weight: bolder
}

code,kbd,pre,samp {
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em
}

small {
  font-size: 80%
}

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

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

table {
  text-indent: 0;
  border-color: inherit
}

button,input,optgroup,select,textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  /* color: inherit; */
  margin: 0;
  padding: 0
}

/* button,select {
  text-transform: none
} */

button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none
}

:-moz-focusring {
  outline: auto
}

:-moz-ui-invalid {
  box-shadow: none
}

progress {
  vertical-align: baseline
}

::-webkit-inner-spin-button,::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

summary {
  display: list-item
}

blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre {
  margin: 0
}

fieldset {
  margin: 0
}

fieldset,legend {
  padding: 0
}

menu,ol,ul {
  list-style: none;
  margin: 0;
  padding: 0
}

dialog {
  padding: 0
}

textarea {
  resize: vertical
}

input::-moz-placeholder,textarea::-moz-placeholder {
  opacity: 1;
  color: #9ca3af
}

input::placeholder,textarea::placeholder {
  opacity: 1;
  color: #9ca3af
}

[role=button],button {
  cursor: pointer
}

:disabled {
  cursor: default
}

audio,canvas,embed,iframe,img,object,svg,video {
  display: block;
  vertical-align: middle
}

img,video {
  max-width: 100%;
  height: auto
}

[hidden]:where(:not([hidden=until-found])) {
  display: none
}

.container {
  width: 100%;
  text-align: center;
  justify-content: center;
  /* border: 1px solid #ba975e; */
}

@media (min-width: 640px) {
  .container {
      max-width:640px
  }
}

@media (min-width: 768px) {
  .container {
      max-width:768px
  }
}

@media (min-width: 1024px) {
  .container {
      max-width:1024px
  }
}

@media (min-width: 1280px) {
  .container {
      max-width:1280px
  }
}

@media (min-width: 1536px) {
  .container {
      max-width:1536px
  }
}

.absolute {
  position: absolute
}

.relative {
  position: relative
}

.right-2 {
  right: .5rem
}

.top-4 {
  top: 1rem
}

.mx-auto {
  margin-left: auto;
  margin-right: auto
}

.mb-1 {
  margin-bottom: .25rem
}

.mb-2 {
  margin-bottom: .5rem
}

.mb-5 {
  margin-bottom: 1.25rem
}

.ml-1 {
  margin-left: .25rem
}

.ml-3 {
  margin-left: .75rem
}

.ml-auto {
  margin-left: auto
}

.mr-1 {
  margin-right: .25rem
}

.mr-2 {
  margin-right: .5rem
}

.mr-3 {
  margin-right: .75rem
}

.mr-auto {
  margin-right: auto
}

.mt-10 {
  margin-top: 2.5rem
}

.mt-2 {
  margin-top: .5rem
}

.mt-3 {
  margin-top: .75rem
}

.mt-5 {
  margin-top: 1.25rem
}

.mt-8 {
  margin-top: 2rem
}

.block {
  display: block
}

.flex {
  display: flex
}

.table {
  display: table
}

.hidden {
  display: none
}

.h-full {
  height: 100%
}

.w-full {
  width: 100%
}

.transform {
  transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.cursor-not-allowed {
  cursor: not-allowed
}

.cursor-pointer {
  cursor: pointer
}

.flex-col {
  flex-direction: column
}

.flex-wrap {
  flex-wrap: wrap
}

.items-start {
  align-items: flex-start
}

.items-center {
  align-items: center
}

.justify-start {
  justify-content: flex-start
}

.justify-center {
  justify-content: center
}

.gap-3 {
  gap: .75rem
}

.rounded-sm {
  border-radius: .125rem
}

.border {
  border-width: 1px
}

.p-1 {
  padding: .25rem
}

.p-2 {
  padding: .5rem
}

.px-2 {
  padding-left: .5rem;
  padding-right: .5rem
}

.px-3 {
  padding-left: .75rem;
  padding-right: .75rem
}

.py-2 {
  padding-top: .5rem;
  padding-bottom: .5rem
}

.pt-24 {
  padding-top: 6rem
}

.pt-3 {
  padding-top: .75rem
}

.pt-5 {
  padding-top: 1.25rem
}

.text-left {
  text-align: left
}

.text-center {
  text-align: center
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem
}

.font-bold {
  font-weight: 700
}

.uppercase {
  text-transform: uppercase
}

.italic {
  font-style: italic
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255/var(--tw-text-opacity,1))
}

.underline {
  text-decoration-line: underline
}

.transition {
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s
}

@media (min-width: 768px) {
  .md\:mr-0 {
      margin-right:0
  }
}

@media (min-width: 1024px) {
  .lg\:px-3 {
      padding-left:.75rem;
      padding-right: .75rem
  }
}

@media (min-width: 1280px) {
  .xl\:flex {
      display:flex
  }
}

@font-face {
  font-family: SCDream1;
  src: url(/fonts/SCDream1.739c3fc6.otf)
}

@font-face {
  font-family: SCDream4;
  src: url(/fonts/SCDream4.8e22d002.otf)
}

@font-face {
  font-family: SCDream5;
  src: url(/fonts/SCDream5.38518f58.otf)
}

@font-face {
  font-family: SCDream6;
  src: url(/fonts/SCDream6.929c1ed2.otf)
}

@font-face {
  font-family: SCDream8;
  src: url(/fonts/SCDream8.da8f6488.otf)
}

*,:after,:before {
  box-sizing: border-box;
  /* font-family: Raleway,sans-serif */
}

html::-webkit-scrollbar {
  width: 10px;
  background: #000;
  border-left: 1px solid hsla(0,0%,100%,.1)
}

html::-webkit-scrollbar-thumb {
  background: linear-gradient(#d6735f,#8b4434,#8b4c34);
  border: 1px solid #000;
  border-radius: 5px;
  height: 0
}

body {
  margin: 0;
  background:#251b0d;
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative
}

#app {
  overflow: hidden
}

ul {
  list-style: none;
  padding: 0;
  margin: 0
}

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

p {
  line-height: 1.4285em;
  margin: 0
}

button {
  cursor: pointer
}

a,button,input,p,select,span,td,th {
  outline: none!important;
  font-family: SCDream5,sans-serif
}

h1 {
  font-size: 2.125rem
}

h1,h2 {
  font-weight: 700
}

h2 {
  font-size: 1.875rem
}

.complete,.win {
  color: #34c38f
}

.cancel,.lose {
  color: #f46a6a
}

.pending {
  color: #343a40
}

.review {
  color: #f1b44c
}

.notification-count {
  position: absolute;
  top: 20px;
  right: 0;
  background: #ffd989;
  width: 15px;
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: #000;
  font-size: .6rem;
  z-index: 2
}

ul.breadcrumb {
  padding: 1rem;
  list-style: none;
  display: flex;
  justify-content: flex-end
}

ul.breadcrumb li {
  display: inline;
  font-size: .8rem
}

ul.breadcrumb li+li:before {
  padding: 8px;
  color: #fff;
  content: "|"
}

ul.breadcrumb li a,ul.breadcrumb.game-list li a {
  color: #fff;
  text-decoration: none
}

ul.breadcrumb li a:hover,ul.breadcrumb.game-list li a:hover {
  font-weight: 500
}

.breadcrumb .router-link-active.router-link-exact-active,ul.breadcrumb.game-list .router-link-active.router-link-exact-active {
  color: #ffd989;
  font-weight: 500
}

.btn-panel.disabled {
  border: 1px solid #999;
  background: #666;
  color: #666;
  cursor: not-allowed
}

.dflex-ac-jc {
  justify-content: center
}

.dflex-ac-ja,.dflex-ac-jc {
  display: flex!important;
  align-items: center;
  align-content: center;
  flex-wrap: wrap
}

.dflex-ac-ja {
  justify-content: space-around
}

.dflex-ac-js {
  justify-content: flex-start
}

.dflex-ac-je,.dflex-ac-js {
  display: flex!important;
  align-items: center;
  align-content: center;
  flex-wrap: wrap
}

.dflex-ac-je {
  justify-content: flex-end
}

.bg-active {
  visibility: visible;
  opacity: 1
}

.scroll-top {
  width: 70px;
  height: 70px;
  background-color: transparent;
  background-image: linear-gradient(#96653b,#59351d);
  text-shadow: 0 1px 2px #000;
  box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),0 1px 2px #000;
  border: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 10;
  transition: .3s;
  overflow: hidden;
  border-radius: 10px;
  color: #ffe890;
  font-size: 38px
}

.scroll-top:hover {
  box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),0 2px 10px rgba(0,0,0,.75),0 0 15px hsla(0,0%,100%,.4);
  text-shadow: 0 1px 2px #000,0 0 10px hsla(0,0%,100%,.5)
}

.scroll-top .fa {
  position: relative
}

.scroll-top:before {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 8px;
  background-image: radial-gradient(#492f16,#291304);
  box-shadow: 0 1px 2px hsla(0,0%,100%,.5),inset 0 1px 2px rgba(0,0,0,.5);
  transition: .3s
}

.scroll-top:hover:before {
  background-color: rgba(0,0,0,.7)
}

.scroll-top:after {
  width: 140%;
  height: 100%;
  left: 0;
  bottom: -5%;
  transform-origin: bottom left;
  transform: rotate(-45deg);
  background-color: hsla(0,0%,100%,.05);
  border-radius: 30%
}

input.is-invalid {
  border-color: #f46a6a;
  padding-right: calc(1.5em + .94rem)!important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23f46a6a'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23f46a6a' stroke='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(.375em + .235rem) center;
  background-size: calc(.75em + .47rem) calc(.75em + .47rem)
}

input.number {
  text-align: end
}

.invalid-feedback {
  margin-top: .25rem;
  font-size: 80%;
  color: #f46a6a;
  text-align: start
}

.btn-get-bank {
  color: #fff;
  text-shadow: 0 1px 0 hsla(0,0%,100%,.4);
  background-color: #ffc657;
  background-image: linear-gradient(#afa462,#6a5128,#372b17);
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px #1d160e;
  font-family: noto-sans-bold;
  position: relative;
  z-index: 1;
  padding: .3em 1em;
  font-size: .8rem
}

.bet-list-mobile,.points-list-mobile {
  display: none
}

.bet-list-desktop,.points-list-desktop {
  display: block
}

table {
  width: 100%;
  border-collapse: collapse;
  text-transform: capitalize;
  height: 100%;
  display: table
}

.bet-list-mobile .label {
  color: #d2b270
}

.content__wrapper {
  margin-top: 2em
}

.content__wrapper * {
  font-size: 1rem
}

.content__wrapper img {
  max-width: 50vh;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain
}

.page-loader {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%)
}

.vendor-title {
  text-align: center;
  margin: 1em 0;
  font-family: SCDream5,sans-serif;
  color: #ffd989
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
header {
  /* background: #212129; */
  background: rgba(30, 30, 30, 0);
  transition: all 0.5s;
  /* background-image: src('/ui15/images/top_bg01.jpg'); */
  background-position: top center;
  background-repeat: no-repeat;
}

.header-section {
  width: 100%;
  height: 88px;
  background-image: linear-gradient(#261e12,#17110b);
  border-top: 1px solid #614822;
  box-shadow: 0 5px 20px rgba(0,0,0,.6);
  margin-top: -1px;
  /* z-index: 5; */
  /* border: 2px solid #34c38f; */
}

.affix .header-section {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99
}

.header-section:after,.header-section:before {
  width: 100%;
  height: 7px;
  left: 0
}

.header-section:before {
  top: 0;
  border-bottom: 1px solid #3d301f
}

.header-section:after {
  height: 5px;
  bottom: 0;
  background-image: linear-gradient(#9f6c40,#4f3319);
  z-index: 1
}

.main-menu {
  height: 100%;
  /* background-color: #afa462; */
}

.main-menu li {
  height: 100%;
  padding: 0 .1em;
  display:inline-block;
  text-align: center;
  vertical-align: middle;
}

.main-menu li a {
  height: 100%;
  padding: 0 15px;
  color: #ffd989;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}

.bs-ul {
  list-style: none;
  margin-bottom: 0;
  width: auto;
  display: table;
  padding: 0
}

.main-menu li a:hover {
  color: #fff;
  text-shadow: 0 1px 0 #000,0 0 8px hsla(0,0%,100%,.5)
}

.main-menu li a:before {
  width: 100%;
  height: calc(100% - 7px);
  left: 0;
  bottom: 0;
  background-image: linear-gradient(#afa462,#6a5128,#372b17);
  transition: .3s;
  opacity: 0
}

.main-menu li a:hover:before {
  opacity: 1
}

.main-menu li a i {
  margin-right: 8px
}

.nav-container {
  height: 100%;
  width: 100%
}

.nav-container ul {
  margin: 0 10px
}

.nav-container ul li {
  padding: 0 12px;
  width: 120px
}

.nav-container ul li a {
  color: #fff;
  text-shadow: 0 1px 0 #000;
  border-radius: 15px
}

.nav-container ul li a span {
  padding-left: 5px
}

.input-panel {
  background-color: rgba(0,0,0,.5);
  box-shadow: inset 0 1px 2px #000,0 1px 0 hsla(0,0%,100%,.08);
  padding: .5em .9em;
  border-radius: 5px;
  margin-left: 5px;
  height: 40px
}

.input-panel input {
  background-color: hsla(0,0%,100%,0);
  height: 100%;
  outline: 0;
  color: #fff
}

.desktop-button {
  font-size: medium;
  width: 120px;
  height: 40px;
  border-radius: 5px;
  margin: 0 5px
}

.mobile-button {
  border-radius: 5px;
  width: calc(50% - 6px);
  margin: 0 3px;
  height: 35px
}

.desktop-button:first-of-type {
  margin-left: 10px
}

.login-btn {
  background-color: #f7ef0f;
  background-image: linear-gradient(#f7ef0f,#d29f00);
  color: #000;
  font-weight: 600;
}

.desktop {
  display: block!important
}

.mobile {
  display: none!important
}

.btn-yellow:before {
  background-image: linear-gradient(#ffac66,#d77421)
}

.before-login .desktop .join-link,.before-login .desktop .login-btn {
  width: 120px;
  height: 40px;
  border-radius: 5px;
  margin-left: 5px
}

.btn-green {
  color: #fff;
  background-color: #388E3C;
  background-image: linear-gradient(#388E3C,#216324);
  border: 1px solid #388E3C;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px #1d160e;
  text-shadow: 0 1px 0 #000;
  position: relative;
  z-index: 1
}

.btn-red {
  color: #fff;
  background-color: #be462a;
  background-image: linear-gradient(#e3603b,#a3321e);
  border: 1px solid #d85c38;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px #1d160e;
  text-shadow: 0 1px 0 #000;
  position: relative;
  z-index: 1
}

.btn-blue {
  color: #fff;
  background-color: #2083e4;
  background-image: linear-gradient(#2083e4,#10273f);
  border: 1px solid #2083e4;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px #1d160e;
  text-shadow: 0 1px 0 #000;
  position: relative;
  z-index: 1
}


.btn-yellow {
  color: #fff;
  background-color: #ffce6b;
  background-image: linear-gradient(#ffce6b,#b18128);
  border: 1px solid #ffce6b;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px #1d160e;
  text-shadow: 0 1px 0 #000;
  position: relative;
  z-index: 1
}

.wrapper {
  width: 100%;
  min-height: 100%;
  position: relative;
  overflow: hidden
}

.banner-section {
  height: 476px;
  /* background-image: url(/ui15/images/banner-background.544edd4b.jpg); */
  background-image: url(/ui15/images/top_bg03.jpg); 
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
  padding: 50px 0 0;
  overflow: hidden;
}

.banner-section:before {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url();
  background-position: bottom;
  animation: starsAnim .7s ease infinite
}

.banner-section .banner-bg {
  width: 100%;
  display: none;
  z-index: -1;
  position: relative
}

@keyframes starsAnim {
  0% {
      opacity: 1
  }

  50% {
      opacity: .5
  }

  to {
      opacity: 1
  }
}

.logo {
  max-width: 450px;
  display: inline-block;
  position: relative
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%)
}

.logo img {
  bottom: 0;
  position: absolute
}

.logo .logo-bg {
  width: 160.69%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  bottom: auto
}

.logo .aria-img,.logo .logo-img {
  width: 100%;
  position: relative
}

.logo-img {
  filter : drop-shadow(2px 2px 3px #222);
}

.logo .aria-img {
  opacity: 0
}

.logo .a-b {
  width: 76.93%;
  left: 0;
  top: 0;
  animation: lgABigAnim 8s ease infinite
}

@keyframes lgABigAnim {
  0% {
      opacity: 0;
      transform: scale(.25) rotate(-90deg)
  }

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

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

  to {
      opacity: 0;
      transform: scale(1) rotate(0deg)
  }
}

.logo .r {
  width: 19.66%;
  left: 47%;
  bottom: 11%;
  animation: lgRAnim 8s ease infinite
}

@keyframes lgRAnim {
  0% {
      opacity: 0;
      transform: translateY(-50%)
  }

  5% {
      opacity: 0;
      transform: translateY(-50%)
  }

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

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

  to {
      opacity: 0;
      transform: translateY(0)
  }
}

.logo .i {
  width: 6%;
  right: 24.5%;
  bottom: 13.5%;
  animation: lgIAnim 8s ease infinite
}

@keyframes lgIAnim {
  0% {
      opacity: 0;
      transform: translateY(-50%)
  }

  7% {
      opacity: 0;
      transform: translateY(-50%)
  }

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

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

  to {
      opacity: 0;
      transform: translateY(0)
  }
}

.logo .a {
  width: 20.52%;
  right: 0;
  bottom: 15.5%;
  animation: lgAAnim 8s ease infinite
}

@keyframes lgAAnim {
  0% {
      opacity: 0;
      transform: translateY(-50%)
  }

  9% {
      opacity: 0;
      transform: translateY(-50%)
  }

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

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

  to {
      opacity: 0;
      transform: translateY(0)
  }
}

.logo .rac {
  width: 100%;
  bottom: 10%
}

.logo .lasvegas {
  width: 61.54%;
  bottom: 0
}

.banner-background {
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9
}

.banner-background,.banner-background img {
  position: absolute;
  left: 0;
  bottom: 0
}

.banner-background div {
  position: absolute;
  bottom: 0
}

.banner-background div img {
  width: 100%;
  position: relative
}

.banner-background .light {
  width: 32.76%;
  left: -20%;
  bottom: -15%;
  animation: bannerLightAnim 15s ease infinite
}

@keyframes bannerLightAnim {
  0% {
      opacity: 0
  }

  8% {
      opacity: 0
  }

  13% {
      opacity: 1
  }

  97% {
      opacity: 1
  }

  to {
      opacity: 0
  }
}

.banner-background .light img {
  animation: bannerLightImg 1s ease infinite
}

@keyframes bannerLightImg {
  0% {
      opacity: 1
  }

  50% {
      opacity: .5
  }

  to {
      opacity: 1
  }
}

.banner-background .glow-right {
  width: 38.53%;
  right: 5%;
  animation: bannerLightAnim 15s ease infinite
}

.banner-background .glow-right img {
  animation: bannerLightImg 1s ease infinite
}

.banner-background .candy-slot {
  width: 12.3%;
  right: 14%;
  left: auto;
  animation: candySlotAnim 15s ease infinite
}

@keyframes candySlotAnim {
  0% {
      opacity: 0;
      transform: translateX(15%)
  }

  8% {
      opacity: 1;
      transform: translateX(0)
  }

  95% {
      opacity: 1;
      transform: translateX(0)
  }

  to {
      opacity: 0;
      transform: translateX(0)
  }
}

.banner-background .money-slot {
  width: 38.93%;
  right: 1%;
  left: auto;
  animation: moneySlotAnim 15s ease infinite
}

@keyframes moneySlotAnim {
  0% {
      opacity: 0;
      transform: translateX(-15%)
  }

  8% {
      opacity: 1;
      transform: translateX(0)
  }

  95% {
      opacity: 1;
      transform: translateX(0)
  }

  to {
      opacity: 0;
      transform: translateX(0)
  }
}

.banner-background .girl-slot {
  width: 33%;
  right: 6%;
  left: auto;
  animation: girlSlotAnim 15s ease infinite
}

@keyframes girlSlotAnim {
  0% {
      opacity: 0;
      transform: translateX(-15%)
  }

  8% {
      opacity: 1;
      transform: translateX(0)
  }

  95% {
      opacity: 1;
      transform: translateX(0)
  }

  to {
      opacity: 0;
      transform: translateX(0)
  }
}

.banner-background .glow-left {
  width: 38.34%;
  left: 4%;
  animation: bannerLightAnim 15s ease infinite
}

.banner-background .glow-left img {
  animation: bannerLightImg 1s ease infinite
}

.banner-background .casino-items {
  width: 38.53%;
  left: -4.5%;
  transform-origin: bottom center;
  animation: casinoItemAnim 15s ease infinite
}

@keyframes casinoItemAnim {
  0% {
      opacity: 0;
      transform: scale(.5)
  }

  4% {
      opacity: 0;
      transform: scale(.5)
  }

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

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

  to {
      opacity: 0;
      transform: scale(1)
  }
}

.banner-background .girl-left {
  width: 18.09%;
  left: 4%;
  animation: girlLeftAnim 15s ease infinite
}

@keyframes girlLeftAnim {
  0% {
      opacity: 0;
      transform: translateX(15%)
  }

  2% {
      opacity: 0;
      transform: translateX(15%)
  }

  10% {
      opacity: 1;
      transform: translateX(0)
  }

  95% {
      opacity: 1;
      transform: translateX(0)
  }

  to {
      opacity: 0;
      transform: translateX(0)
  }
}

.banner-background .girl-center {
  width: 20.50%;
  left: 11%;
  animation: girlCenterAnim 15s ease infinite
}

@keyframes girlCenterAnim {
  0% {
      opacity: 0;
      transform: translateY(15%)
  }

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

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

  to {
      opacity: 0;
      transform: translateY(0)
  }
}

.banner-background .girl-right {
  width: 22.4%;
  left: 20%;
  animation: girlRightAnim 15s ease infinite
}

@keyframes girlRightAnim {
  0% {
      opacity: 0;
      transform: translateX(-15%)
  }

  2% {
      opacity: 0;
      transform: translateX(-15%)
  }

  10% {
      opacity: 1;
      transform: translateX(0)
  }

  95% {
      opacity: 1;
      transform: translateX(0)
  }

  to {
      opacity: 0;
      transform: translateX(0)
  }
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden
}

.carousel-inner:after {
  display: block;
  clear: both;
  content: ""
}

.banner-carousel {
  position: relative;
  z-index: 5;
  margin: 35px auto 0
}

.banner-carousel .text-panel {
  max-width: 730px;
  margin: 0 auto 25px;
  text-shadow: 0 1px 2px rgba(0,0,0,.75);
  background-color: rgba(0,0,0,.57);
  padding: 15px 15px;
  -webkit-mask-image: linear-gradient(90deg,transparent 0,transparent 5%,#000 25%,#000 75%,transparent 95%,transparent);
  mask-image: linear-gradient(90deg,transparent 0,transparent 5%,#000 25%,#000 75%,transparent 95%,transparent);
  position: relative;
  z-index: 1
}

.banner-carousel .text-panel:before {
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto 0;
  border: 1px solid #9c988f;
  opacity: .4
}

.banner-carousel .text-panel h1 {
  color: #f4efd4;
  font-size: 30px;
  opacity: 0
}

.banner-carousel .text-panel h2 {
  font-size: 24px;
  color: #e8a31e;
  opacity: 0
}

.banner-carousel .text-panel h1:first-child {
  animation: bannerText01 6s ease 1 forwards
}

@keyframes bannerText01 {
  0% {
      opacity: 0;
      transform: scale(0)
  }

  10% {
      opacity: 1;
      transform: scale(1.1)
  }

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

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

  to {
      opacity: 0;
      transform: scale(0)
  }
}

.banner-carousel .text-panel h2:nth-child(2) {
  animation: bannerText02 6s ease 1 forwards
}

@keyframes bannerText02 {
  0% {
      opacity: 0;
      transform: scale(0)
  }

  3% {
      opacity: 0;
      transform: scale(0)
  }

  13% {
      opacity: 1;
      transform: scale(1.1)
  }

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

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

  to {
      opacity: 0;
      transform: scale(0)
  }
}

.banner-carousel .text-panel h2:nth-child(3) {
  animation: bannerText03 6s ease 1 forwards
}

@keyframes bannerText03 {
  0% {
      opacity: 0;
      transform: scale(0)
  }

  6% {
      opacity: 0;
      transform: scale(0)
  }

  16% {
      opacity: 1;
      transform: scale(1.1)
  }

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

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

  to {
      opacity: 0;
      transform: scale(0)
  }
}

.carousel-indicators {
  margin: 0 auto;
  bottom: 0
}

.carousel-indicators li {
  width: 30px;
  height: 4px;
  border-radius: 3px;
  margin: 0 5px;
  background-color: hsla(0,0%,100%,.5);
  border: none;
  opacity: 1;
  transition: .3s
}

.carousel-indicators li:hover {
  background-color: #fff
}

.carousel-indicators li.active {
  width: 40px;
  height: 6px;
  background-color: #de4628
}

.page-content {
  background-image: url('/ui15/images/main-bg.e7b23b2f.png');
  background-color: #0c0603;
  background-position: top center;         /* 상단 중앙 정렬 */
  background-repeat: no-repeat;            /* 반복 없음 */
  background-size: 100% auto;              /* 넓이 100%, 높이는 자동 */
  position: relative;
  z-index: 1;
  padding: 0 0 30px;
  width: 100%;
}

.page-content:before {
  width: 100%;
  /* height: 100%; */
  top: 0;
  left: 0;
  bottom: 0;
  background-image: url();
  background-position: top;
  background-repeat: no-repeat;
  animation: toggleGLow 2s ease infinite
}

@keyframes toggleGLow {
  0% {
      opacity: 1
  }

  50% {
      opacity: .6
  }

  to {
      opacity: 1
  }
}

.toggle-section .container {
  width: 100%;
  max-width: 1052px
}

.toggle-btn {
  width: calc(40% - 45px);
  height: 72px;
  background-color: transparent;
  border: none;
  color: #ffd989;
  font-family: noto-sans-bold;
  font-size: 24px;
  transition: 0s
}

.ml-auto,.mx-auto {
  margin-left: auto!important
}

.toggle-2 .toggle-btn {
  width: calc(45% - 45px)
}

.toggle-btn.mini-toggle {
  width: 20%;
  align-self: flex-start;
  height: 60px
}

.toggle-btn:hover {
  color: #ff8b2d;
  text-shadow: 0 1px 1px #000,0 0 15px hsla(0,0%,100%,.25)
}

.toggle-btn.active {
  color: #ff8b2d;
  text-shadow: 0 1px 1px #000,0 0 15px hsla(0,0%,100%,.4)
}

.toggle-btn .btn-panel {
  width: calc(100% - 123px);
  height: 100%;
  border: 1px solid #614822;
  background-image: linear-gradient(#261e12,#17110b);
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.5));
  flex-wrap: nowrap
}

.toggle-btn:first-child .btn-panel {
  margin-right: 29px
}

.toggle-btn:last-child .btn-panel {
  margin-left: 29px
}

.toggle-btn.mini-toggle .btn-panel {
  flex-flow: column-reverse;
  justify-content: center;
  font-size: .8em;
  width: 100%
}

.toggle-btn .btn-panel:before {
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 5px;
  background-color: #392b19
}

.toggle-btn .btn-panel.none-corner:after {
  display: none;
  width: 100%;
  background-image: none;
  height: 15px;
  top: auto;
  bottom: 0;
  border-left: 15px solid #000;
  border-top: 15px solid transparent
}

.toggle-btn:first-child .btn-panel:after,.toggle-btn:last-child .btn-panel:after {
  width: 29px;
  height: calc(100% + 2px);
  top: -1px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAABIBAMAAAD4/uN4AAAAGFBMVEVHcExhSCJhSCJhSCJhSCIcFQ0lHRFdRSBpqY9nAAAABXRSTlMAjYqJiDjY3hEAAADkSURBVDjLlY7hccMwCEa/ETJCRsgIXQI6AeRv2+TO6xeBkCV8TWNkfH56gMG2xAW6xNfM98L6D5+u53P1b/XLiD/6WfLx/h1Vma1/FIjXz14Xr4uPAeP/Nmvdxy/MM8UhYSUy3kNJV+bi234keaxebD4z9VTy+fYZ6f109Aae4VslebonH+0DYr924dn9GBCeRkiy9IvZ+z4U+/vf6NBfmVUWNnzFDV+wI0/cXp8fmDU9gaI7s+sHkkPfkneNSV+TQ/8gedIoGkWjaBSNrr+RHPqSXDSKRtEoGkWjaBSNorFti/4FnspVAQyrjT8AAAAASUVORK5CYII=);
  background-size: 100% 100%
}

.toggle-btn:first-child .btn-panel:after {
  right: -29px
}

.toggle-btn:last-child .btn-panel:after {
  left: -29px;
  transform: rotateY(180deg)
}

.toggle-btn .btn-panel .category {
  position: relative;
  top: -3px;
  white-space: nowrap
}

.toggle-btn .icon-panel {
  width: 152px;
  height: 120px;
  position: relative
}

.toggle-btn .icon-panel:before {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url(/img/icon-bg.9378cddb.png);
  background-size: 100% 100%;
  position: absolute;
  z-index: -1
}

.toggle-btn:first-child .icon-panel {
  margin-left: -90px;
  margin-right: 25px
}

.toggle-btn:last-child .icon-panel {
  margin-right: -80px;
  margin-left: 60px
}

.toggle-btn:last-child .icon-panel:before {
  transform: rotateY(180deg)
}

.toggle-btn .icon-panel img {
  transition: .3s
}

.toggle-btn:hover .icon-panel img {
  transform: scale(.8)
}

.toggle-btn.active .icon-panel img {
  animation: toggleIconAnim 2s ease infinite
}

@keyframes toggleIconAnim {
  0% {
      transform: scale(1)
  }

  50% {
      transform: scale(.95)
  }

  to {
      transform: scale(1)
  }
}

.toggle-btn .indicator {
  font-size: 1em;
  opacity: 0;
  animation: indicatorAnim 1s ease infinite
}

@keyframes indicatorAnim {
  0% {
      transform: translateY(0)
  }

  50% {
      transform: translateY(-3px)
  }

  to {
      transform: translateY(0)
  }
}

.toggle-btn.mini-toggle .indicator {
  margin-right: 0!important;
  margin-top: -5px;
  display: none
}

.toggle-btn.active .indicator {
  opacity: 1;
  display: inline-block
}


.game-provider {
  margin: 30px 0 0;
}

.sc-section {
  width: calc(100% + 16px);
  position: relative;
  left: -8px
}

.sc-section.active {
  display: block
}

.sc-btn {
  width: 242px;
  background-color: #5e4322;
  background-image: linear-gradient(to bottom left,#f5cc7f,#96653b,#b79453);
  border-radius: 10px;
  box-shadow: 0 5px 15px #000;
  display: inline-block;
  margin: 0 7.5px 20px;
  padding: 5px 5px;
  position: relative;
  animation: scBtnAnim .8s ease 1 backwards;
  transform-origin: bottom center;
  overflow: hidden;
  transition: all .3s
}

@keyframes scBtnAnim {
  0% {
      opacity: 0;
      transform: translateY(50px) scale(.5)
  }

  50% {
      opacity: 1;
      transform: translateY(-20px) scale(1)
  }

  to {
      opacity: 1;
      transform: translateY(0) scale(1)
  }
}

.sc-btn.disabled {
  pointer-events: none;
  opacity: .3
}

.sc-btn.off {
  opacity: .5
}

.sc-btn:hover {
  z-index: 2;
  margin-top: -20px;
  margin-bottom: -20px;
  box-shadow: 0 0 10px hsla(39,63%,78%,.5)
}

.sc-btn:after,.sc-btn:before {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 10px;
  background-image: linear-gradient(#97663c,#58341c);
  transition: .3s
}

.sc-btn:after {
  background-image: linear-gradient(#f3dbac,#ba975e);
  opacity: 0
}

.sc-btn:hover:after {
  opacity: 1
}

.sc-btn .g-panel {
  width: 100%;
  background-color: #301605;
  border-radius: 8px;
  padding: 8px 9px;
  overflow: hidden;
  transition: .3s
}

.sc-btn:hover .g-panel {
  background-color: #503624
}

.sc-btn .g-panel:before {
  width: 120%;
  height: 50%;
  left: -10%;
  right: 0;
  bottom: -20%;
  margin: 0 auto;
  background-image: radial-gradient(rgba(108,74,40,.8),rgba(149,112,76,.15),rgba(108,74,40,0),rgba(108,74,40,0))
}

.sc-btn .g-panel:after {
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  box-shadow: inset 0 0 30px rgba(0,0,0,.75);
  border-radius: 8px;
  z-index: 4
}

.sc-btn .g-cont {
  background-color: #000;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 1px #6c4829;
  height: 130px
}

.sc-btn:hover .g-cont {
  box-shadow: 0 1px 1px #ae845f,0 2px 5px rgba(0,0,0,.5)
}

.sc-btn .g-cont .g-img {
  width: 100%;
  transition: .5s;
  -o-object-fit: contain;
  object-fit: contain;
  height: 100%
}

.sc-btn .g-cont .g-img.g-img-cover {
  -o-object-fit: cover;
  object-fit: cover
}

.sc-btn:hover .g-cont .g-img {
  transform: scale(1.1);
  opacity: .5
}

.sc-btn .g-info {
  width: 100%;
  position: relative;
  left: 0;
  top: 0;
  margin: 5px 0 -5px;
  z-index: 3
}

.sc-btn .g-info .g-name {
  width: 100%;
  display: inline-block;
  color: #fff;
  font-size: 16px;
  text-shadow: 0 1px 2px #000;
  vertical-align: top
}

.sc-btn .g-info .en-text {
  color: #ffd989;
  font-size: 12px;
  text-shadow: 0 1px 2px #000;
  vertical-align: top
}

.sc-btn .g-logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #b9975e;
  background-image: linear-gradient(#f7dfb1,#b9975e,#f7dfb1);
  box-shadow: 0 2px 5px rgba(0,0,0,.5);
  margin: -40px auto 0;
  transition: .3s
}

.sc-btn:hover .g-logo {
  margin: 10px auto 0
}

.sc-btn .g-logo:before {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 50%;
  background-color: #301605
}

.sc-btn .g-logo .icon-img {
  filter: drop-shadow(0 0 10px rgba(210,126,70,.6))
}

.sc-btn .glass {
  width: 200%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(hsla(0,0%,100%,0),hsla(0,0%,100%,.1));
  transform-origin: bottom left;
  transform: rotate(-48deg);
  z-index: 1;
  transition: .3s
}

.sc-btn:hover .glass {
  transform: rotate(0deg);
  opacity: 0
}

.sc-btn .g-footer {
  position: relative;
  z-index: 3
}

.sc-btn .g-footer:before {
  width: 0;
  height: 7px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-top: 1px solid hsla(0,0%,100%,.15);
  border-bottom: 1px solid hsla(0,0%,100%,.15);
  transition: .5s;
  -webkit-mask-image: linear-gradient(90deg,transparent 0,transparent 5%,#000 25%,#000 75%,transparent 95%,transparent);
  mask-image: linear-gradient(90deg,transparent 0,transparent 5%,#000 25%,#000 75%,transparent 95%,transparent)
}

.sc-btn:hover .g-footer:before {
  width: 100%
}

.sc-btn .play-btn {
  width: 100px;
  height: 35px;
  border-radius: 5px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 4;
  box-shadow: 0 0 10px hsla(39,63%,78%,.5),0 1px 2px #000,inset 0 0 0 1px #1d160e;
  opacity: 0;
  transform: scale(0)
}

.play-btn:has(>img) {
  display: grid;
  grid-template-columns: .75fr .25fr;
  align-items: center
}

.sc-btn .play-btn:hover {
  box-shadow: 0 0 15px #ead1a3,0 1px 2px #000,inset 0 0 0 1px #1d160e
}

.sc-btn:hover .play-btn {
  opacity: 1;
  transform: scale(1)
}

.board-section {
  background-color: #1c1302;
  border-top: 1px solid #2d2315;
  border-bottom: 1px solid #2d2315;
  padding: 40px 0;
  overflow: hidden
}

.board-section:after,.board-section:before {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0
}

.board-section:before {
  background-image: url(/ui15/images/board-bg.579825e5.png);
  background-position: top;
  background-size: cover;
  mix-blend-mode: screen
}

.board-section:after {
  width: calc(100% + 60px);
  left: -30px;
  box-shadow: inset 0 0 30px #000
}

.board-panel {
  width: 100%;
  margin: 10px 0;
  min-height: 360px
}

.board-panel .header {
  width: 100%;
  height: 50px;
  border-radius: 8px;
  background-color: rgba(0,0,0,.4);
  box-shadow: 0 1px 1px hsla(0,0%,100%,.1),inset 0 1px 1px rgba(0,0,0,.5);
  padding: 0 15px 0 0
}

.board-panel .header .icon-panel {
  height: 50px
}

.board-panel .header .title-panel {
  position: relative;
  z-index: 1
}

.board-panel .header .title-panel .title {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(#fdf9af,#e5b75b);
  background-size: 100% 100%;
  position: relative;
  color: #d6d6d6;
  font-size: 24px;
  font-family: noto-sans-bold;
  margin: 0
}

.board-panel .header .title-panel .title:before {
  content: attr(data-text);
  display: inline-block;
  background: 0 0;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
  text-shadow: 0 2px 2px #000;
  z-index: -1
}

.board-panel .header .more-link {
  color: var(--red)
}

.board-panel .header .more-link:hover {
  color: var(--yellow)
}

.board-panel table {
  width: 100%;
  margin: 18px 0 0
}

.board-panel table tr td {
  height: 48px;
  border-bottom: 1px solid hsla(0,0%,100%,.1)
}

.border-bottom {
  border-bottom: 0!important
}

.board-panel table .date-td {
  width: 26%;
  color: #beaf91;
  text-align: right;
  padding-right: 10px
}

.btm-event-section table .date-td {
  white-space: nowrap;
  min-width: -moz-fit-content;
  min-width: fit-content
}

.board-panel table td a {
  color: #fff;
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  overflow: hidden
}

.board-panel table td a:hover {
  color: var(--orange)
}

.new-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  font-size: 10px;
  border-radius: 3px;
  padding: 0;
  background-color: #dc664a;
  background-image: linear-gradient(270deg,#dc664a,#af3936);
  text-align: center;
  margin-left: 8px;
  box-shadow: 0 0 10px hsla(9,97%,70%,.5)
}

.customer-container {
  margin-top: 120px
}

.customer-container>.row {
  flex-wrap: nowrap
}

.customer-btn {
  flex-grow: 1;
  max-width: 320px;
  width: 100%;
  background-color: #5e4322;
  background-image: linear-gradient(to bottom left,#f5cc7f,#96653b,#b79453);
  border-radius: 10px;
  box-shadow: 0 5px 15px #000;
  display: inline-block;
  margin: 0 2.5px 20px;
  padding: 5px 5px;
  position: relative;
  animation: scBtnAnim .8s ease 1 backwards;
  transform-origin: bottom center
}

.customer-btn:after,.customer-btn:before {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 10px;
  background-image: linear-gradient(#97663c,#58341c);
  transition: .3s
}

.customer-btn:after {
  background-color: rgba(216,137,60,.25);
  opacity: 0
}

.customer-btn:hover:after {
  opacity: 1
}

.customer-btn .g-panel {
  width: 100%;
  border-radius: 8px;
  padding: 8px 9px;
  overflow: hidden;
  transition: .3s;
  display: flex;
  justify-content: center
}

.customer-btn .g-panel:before {
  width: 120%;
  height: 50%;
  left: -10%;
  right: 0;
  bottom: -20%;
  margin: 0 auto
}

.customer-btn .g-panel:after {
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  border-radius: 8px;
  z-index: 4
}

.customer-btn .g-logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #b9975e;
  box-shadow: 0 2px 5px rgba(0,0,0,.5);
  transition: .3s
}

.customer-btn .g-logo:before {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 50%;
  background-color: rgba(87,36,3,.78)
}

.customer-btn .g-info {
  width: 60%;
  position: relative;
  left: 0;
  top: 0;
  margin: 5px 0 -5px;
  z-index: 3;
  font-size: 16px
}

.customer-btn .g-info .g-name {
  width: 100%;
  display: inline-block;
  color: #fff;
  font-size: 1.25em;
  text-shadow: 0 1px 2px #000;
  vertical-align: top
}

.customer-btn .g-info .en-text {
  color: #ffd989;
  font-size: 1em;
  text-shadow: 0 1px 2px #000;
  vertical-align: top
}

.customer-btn .glass {
  width: 200%;
  height: 300%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(hsla(0,0%,100%,0),hsla(0,0%,100%,.1));
  transform-origin: bottom left;
  transform: rotate(-28deg);
  z-index: 1;
  transition: .3s
}

.customer-btn:hover .glass {
  transform: rotate(-28deg) translateY(70%)
}

.bet-list .points-list,.rolling-realtime {
  width: 100%;
  margin: 0 auto;
  animation: realtimeAnim .5s ease 1 forwards
}

.bet-list ul li,.points-list ul li,.rolling-realtime ul li {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 50px
}

.bet-list ul li div,.points-list ul li div,.rolling-realtime ul li div {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #fff;
  font-size: 15px;
  transition: .3s;
  border-bottom: 1px solid hsla(0,0%,100%,.1)
}

.transaction-header-list {
  text-transform: uppercase;
  font-weight: 700
}

.transaction-header-list div {
  color: #e5ad2e!important
}

.rolling-realtime ul li div:first-child {
  width: 10%;
  justify-content: flex-start
}

.rolling-realtime ul li div:nth-child(2) {
  font-family: noto-sans-bold;
  width: 30%;
  padding-right: 3%;
  text-shadow: 0 1px 2px #000
}

.rolling-realtime ul li div:nth-child(3) {
  color: #fff;
  width: 30%;
  text-align: right;
  padding-right: 5px
}

.rolling-realtime ul li div:nth-child(4) {
  color: hsla(0,0%,100%,.5);
  width: 30%;
  text-align: right;
  padding-right: 5px
}

.bet-list ul li div:first-child {
  width: 10%;
  justify-content: flex-start
}

.bet-list ul li div:nth-child(2) {
  width: 18%;
  justify-content: center
}

.bet-list ul li div:nth-child(3),.bet-list ul li div:nth-child(4),.bet-list ul li div:nth-child(5),.bet-list ul li div:nth-child(6),.bet-list ul li div:nth-child(7),.bet-list ul li div:nth-child(8) {
  width: 12%;
  justify-content: center
}

.points-list ul li div:first-child {
  width: 10%;
  justify-content: flex-start
}

.points-list ul li div:nth-child(2),.points-list ul li div:nth-child(3),.points-list ul li div:nth-child(4),.points-list ul li div:nth-child(5),.points-list ul li div:nth-child(6) {
  width: 18%;
  justify-content: center
}

@keyframes realtimeAnim {
  0% {
      opacity: 0;
      transform: scale(1.1)
  }

  to {
      opacity: 1;
      transform: scale(1)
  }
}

.realtime-nav button.active {
  background-color: #66803c;
  background-image: linear-gradient(#afa462,#6a5128,#372b17);
  background-repeat: repeat-x;
  background-position: 50%
}

@media (max-width: 768px) {
  header [class^="fa-"],
  header [class*=" fa-"] {
    display: none !important;
  }
}

.footer-section {
  padding: 35px 0;
  overflow: hidden;
  background: #0c0603;
  /* background: rgb(98,39,3);
  background: radial-gradient(circle, rgba(98,39,3,1) 19%, rgba(0,0,0,1) 100%);   */
}

.footer-section:after,.footer-section:before {
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  box-shadow: 0 0 1000px #5e3310
}

.footer-section:before {
  width: 70%;
  top: -100%;
  box-shadow: 0 0 1400px #5e3310,0 0 2000px #5e3310;
}

.footer-section:after {
  width: 956px;
  height: 12px;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  background-image: radial-gradient(#fed885,transparent,transparent);
  border-radius: 50%;
  box-shadow: 0 5px 10px rgba(0,0,0,.25);
}


/* .footer-section  {
  box-shadow: 0 0 1400px #5e3310, 0 0 2000px #5e3310;
  background: rgb(98,39,3);
  background: radial-gradient(circle, rgba(98,39,3,1) 19%, rgba(0,0,0,1) 100%);  
}  */

.text-end {
  text-align: end
}

.text-info {
  color: #50a5f1
}

.text-danger {
  color: #f46a6a
}

.text-success {
  color: #34c38f
}

.text-warning {
  color: #f1b407
}

.ask-link {
  color: #fff;
  font-size: 12px;
  display: inline-block
}

.ask-link:hover {
  color: #fff;
  text-shadow: 0 1px 0 #000,0 0 10px hsla(0,0%,100%,.3)
}

.ask-link span {
  transition: 0s
}

.ask-link .icon {
  color: #ffd989;
  font-size: 14px;
  transition: .3s
}

.ask-link:hover .icon {
  color: var(--red);
  transform: translateX(5px)
}

.form-container {
  width: 100%;
  /* max-width: 900px; */
  display: inline-block
}

.form-container .form-group {
  width: 100%;
  float: left
}

.form-container .labels {
  width: 100%;
  text-align: left;
  float: left;
  margin: 0 0 6px;
  color: #ebdec3;
  font-size: 12px;
  position: relative;
  padding: 0 0 0 5px;
  z-index: 1
}

.form-container .infos {
  width: 100%;
  float: right;
  display: flex
}

.form-container .w-icon .infos i {
  color: #492801;
  position: absolute;
  left: 18px
}

.form-container .w-icon .infos input {
  padding-left: 45px
}

.form-container .form-group .input-container {
  width: 100%;
  float: left;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start
}

.form-container .w-btn .input-container {
  width: calc(100% - 125px)
}

.form-container .form-group input {
  width: 100%;
  height: 44px;
  float: left;
  color: #000;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  border: none;
  border-radius: 8px;
  transition: .3s;
  padding: 0 15px
}

.form-container .form-group input:-moz-read-only {
  color: rgba(0,0,0,.5)
}

.form-container .form-group input:read-only {
  color: rgba(0,0,0,.5)
}

.form-container .form-group input::-webkit-input-placeholder {
  color: #333
}

.form-container .form-group .select-input {
  width: 100%;
  height: 100%;
  float: left;
  color: #000;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  border-radius: 8px;
  transition: .3s;
  display: flex;
  align-items: center;
  position: relative
}

.form-container .form-group .phone-container>.select-input {
  width: calc(100% + 150px)
}

.form-container .form-group .select-input select {
  width: 100%;
  height: 44px;
  border: none;
  color: #333;
  background-color: transparent;
  -webkit-appearance: none;
  padding: 0 15px;
  cursor: pointer
}

.form-container .form-group select option {
  color: #000
}

.form-container .form-group .select-input i {
  color: #000;
  font-size: 18px;
  position: absolute;
  right: 15px
}

.form-container .form-group .text-area {
  height: auto;
  border-radius: 10px
}

.form-container .form-group textarea {
  width: 100%;
  height: 200px;
  float: left;
  color: #000;
  background-color: #fff;
  border: none;
  border-radius: 8px;
  transition: .3s;
  padding: 20px 18px;
  resize: none
}

.form-container .form-group textarea::-webkit-input-placeholder {
  color: #333
}

.form-container .form-group .form-btn {
  width: 120px;
  height: 44px;
  border: none;
  float: right;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  background-color: #625747;
  box-shadow: inset 0 1px 0 hsla(0,0%,100%,.15),0 1px 2px rgba(0,0,0,.5);
  color: #fff;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 8px;
  transition: .3s;
  margin: 0 0 0 5px
}

.form-container .form-group .form-btn:hover {
  background-color: #917853
}

.form-container .form-group .infos .btn-grp {
  width: 100%;
  float: left
}

.form-container .form-group .infos .btn-grp button {
  width: 16.66%;
  width: calc(16.66% - 4px);
  height: 38px;
  float: left;
  margin: 0 2px;
  background-color: #625747;
  box-shadow: inset 0 1px 0 hsla(0,0%,100%,.15),0 1px 2px rgba(0,0,0,.5);
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  transition: .3s;
  padding: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  flex-grow: 1
}

.form-container .form-group .infos .btn-grp button:hover {
  background-color: #917853
}

.form-container .form-group .infos .btn-grp button:first-child {
  margin-left: 0;
  width: calc(16.66% - 2px)
}

.form-container .form-group .infos .btn-grp button:last-child {
  width: calc(16.66% - 2px);
  background-color: #a34141;
  margin-right: 0
}

.form-container .form-group .infos .btn-grp button:last-child:hover {
  background-color: #ff4d4d
}

.form-footer {
  width: 100%;
  margin: 20px auto 0;
  flex-wrap: nowrap
}

.form-footer button,.form-footer input[type=submit] {
  width: 180px;
  height: 50px;
  margin: 0 5px
}

.form-footer button:first-child {
  margin-left: 0
}

.form-footer button:last-child {
  margin-right: 0
}

.realtime-nav button.active-btn {
  background-color: #66803c;
  background-image: linear-gradient(#afa462,#6a5128,#372b17);
  background-repeat: repeat-x;
  background-position: 50%
}

.realtime-nav button {
  height: 54px;
  width: calc(50% - 4px);
  border-radius: 6px;
  border: none;
  background-image: linear-gradient(#261e12,#17110b);
  color: #fff;
  font-size: 18px;
  font-family: noto-sans-bold;
  text-shadow: 0 1px 0 rgba(0,0,0,.75);
  margin: auto 2px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: all .3s ease
}

.content {
  min-height: 400px;
  width: 100%;
  background-color: rgba(34,34,34,.5);
  border: 1px solid hsla(0,0%,100%,.15);
  border-radius: 10px;
  position: relative;
  z-index: 1;
  padding: 10px 15px
}

.form-group input {
  width: 100%;
  height: 45px;
  color: #fff;
  background-color: hsla(0,0%,100%,.02);
  border: 1px solid hsla(0,0%,100%,.1);
  border-radius: 8px;
  transition: .3s;
  padding: 0 15px;
  margin-bottom: .8em
}

.custom-btn {
  border-radius: 5px;
  max-width: 95px;
  width: 100%;
  padding: .5em
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%
}

.dropbtn {
  background-color: transparent;
  color: #fff;
  padding: 0;
  border: none;
  cursor: pointer
}

.dropdown img {
  width: 26px
}

.dropdown {
  z-index: 99;
  padding-top: 5px
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #141313;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);
  z-index: 1
}

.dropdown-content a {
  color: #fff;
  padding: .5rem .75rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 1em
}

.dropdown-content a:hover {
  background-color: #b7810d;
  color: #000
}

.dropdown:hover .dropdown-content {
  display: block
}

@media (hover: hover) {
  .dropdown:hover .dropdown-content {
      display:block
  }
}


@media (max-width: 1280px) {
  .desktop {
      display:none!important
  }

  .mobile {
      display: block!important;
      display: none!important
  }

  .after-login .mobile button, .before-login .mobile button {
      width: calc(50% - 8px);
      height: 35px;
      margin: 0 4px
  }

  .mypage-btn i {
      font-size: 16px;
      transition: .3s
  }

  .mypage-btn.opened i {
      transform: rotate(180deg)
  }

  .sn-overlay {
      width: 100%;
      height: 100%;
      position: fixed;
      z-index: 98;
      background-color: rgba(11,2,16,.5);
      top: 0;
      left: 0;
      pointer-events: none;
      opacity: 0;
      transition: .3s
  }

  .sn-overlay.active {
      opacity: 1;
      pointer-events: auto
  }

  dd,dl,dt,li,ol,ul {
      margin: 0;
      list-style: none
  }

  @media screen and (max-width: 990px) {
      .notice_popup_area {
          top:4rem;
          left: 0;
          max-width: 100%
      }

      .notice_popup * {
          word-break: break-all;
          max-width: 100%;
          height: auto
      }

      .notice_popup .notice_popup_text {
          padding: 1rem
      }
  }

  @media (max-width: 1300px) {
      .banner-section {
          height:300px;
          padding: 0
      }

      .banner-section .container {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          margin: auto
      }

      .logo {
          width: 18.59%
      }

      .banner-carousel {
          margin-top: 1%
      }

      .banner-carousel .text-panel {
          padding: 1.5% 15px;
          margin-bottom: 1.25%
      }

      .banner-carousel .text-panel:before {
          height: 92%
      }
  }

  @media (max-width: 1140px) {
      .banner-section .banner-bg {
          width:140%;
          left: -20%
      }
  }

  @media (max-width: 900px) {
      .banner-carousel .text-panel {
          margin-bottom:1.75%
      }

      .banner-carousel .text-panel h1 {
          font-size: 3.4vw
      }

      .banner-carousel .text-panel h2 {
          font-size: 2.6vw
      }
  }

  @media screen and (min-width: 768px) {
      .custom-btn {
          max-width:105px
      }
  }

  @media (max-width: 767px) {
      .banner-section {
          height:220px;
          padding: 0
      }

      .logo {
          width: 22%
      }

      .banner-section .banner-bg {
          width: 170%;
          left: -35%
      }

      .banner-carousel .text-panel {
          padding: 3% 15px;
          margin-bottom: 2.5%
      }     
  }

  @media (max-width: 500px) {
      .banner-section {
          height:200px;
          padding: 0
      }

      .logo {
          width: 25%;
          margin-top: 1%
      }

      .carousel-indicators li {
          width: 20px;
          height: 4px;
          margin: 0 2px
      }

      .carousel-indicators li.active {
          width: 30px;
          height: 4px
      }

      .banner-section .banner-bg {
          width: 180%;
          left: -40%
      }

      .banner-background {
          width: 120%;
          left: -10%
      }
  }

  @media (min-width: 1536px) {
      .container {
          max-width:1280px!important
      }
  }

  @media (max-width: 1470px) {
      .main-menu li a {
          padding:0 15px
      }

      .before-login .desktop button {
          width: 100px
      }

      .before-login .input-panel {
          width: 150px
      }
  }

  @media (min-width: 1281px) {
      .sidebar {
          display:block!important
      }
  }

  @media (max-width: 1280px) {
      .mobile {
          display:block!important
      }

      .desktop {
          display: none!important
      }

      .header-section {
          height: auto
      }

      .header-section .container {
          padding: 0
      }

      .header-section:after,.header-section:before {
          height: 3px
      }

      .main-menu {
          width: 100%;
          table-layout: fixed;
          border-bottom: 1px solid hsla(0,0%,100%,.1)
      }

      .main-menu li a {
          height: 43px;
          padding: 2px 0 0
      }

      .main-menu li a:before {
          height: calc(100% - 4px)
      }

      .bal-container {
          /* border: 1px solid white; */
          width: 100%;
          padding: 8px 5px 11px
      }

      .sidebar {
          width: 100%;
          margin: 10px auto 0;
          padding: 15px 10px;
          background-color: rgba(0,0,0,.25);
          display: none
      }

      .sidebar .al-inner,.sidebar-fixed .al-inner {
          width: 100%;
          max-width: 500px;
          margin: 0 auto
      }
  }

  @media (max-width: 900px) {
      .toggle-section .container {
          padding:0
      }

      .toggle-btn {
          height: 70px;
          font-size: 18px;
          margin-top: -1px
      }

      .toggle-btn.mini-toggle {
          height: 50px
      }

      .toggle-btn .indicator {
          font-size: 24px
      }

      .toggle-btn .btn-panel {
          width: 100%
      }

      .toggle-btn.mini-toggle .btn-panel {
          font-size: .9em
      }

      .toggle-btn:first-child .icon-panel {
          margin-left: 0;
          margin-right: 15px
      }

      .toggle-btn:last-child .icon-panel {
          margin-right: 0;
          margin-left: 15px
      }

      .toggle-btn:first-child .btn-panel {
          margin-right: 0
      }

      .toggle-btn:last-child .btn-panel {
          margin-left: 0
      }

      .toggle-btn .icon-panel {
          width: 100px;
          height: 80px
      }

      .toggle-btn .icon-panel img {
          max-height: 60px
      }

      .toggle-btn .btn-panel:before {
          bottom: 3px
      }
  }

  @media (max-width: 600px) {
      .toggle-btn {
          width:calc(35% - 30px);
          height: 60px;
          font-size: 14px
      }

      .toggle-2 .toggle-btn {
          width: calc(40% - 45px)
      }

      .toggle-btn.mini-toggle {
          width: 18%
      }

      .toggle-btn .btn-panel {
          font-size: 1em;
          justify-content: center
      }

      .toggle-btn.mini-toggle .btn-panel {
          font-size: .9em
      }

      .toggle-btn .indicator {
          font-size: 18px;
          top: -2px;
          position: relative
      }

      .toggle-btn .icon-panel {
          display: none!important
      }

      .toggle-btn:first-child .btn-panel .category {
          margin-left: 2em
      }

      .toggle-btn:last-child .btn-panel .category {
          margin-right: 2em
      }
  }

  @media (max-width: 500px) {
      .main-menu li a {
          font-size:12px
      }

      .main-menu li a .fa {
          display: block
      }

      .toggle-section {
          padding: 0 5px
      }

      .toggle-btn {
          width: calc(35% - 8px);
          height: 50px;
          margin: 10px 4px 0
      }

      .toggle-2 .toggle-btn {
          width: calc(40% - 8px)
      }

      .toggle-btn.mini-toggle {
          flex-grow: 1
      }

      .toggle-btn .btn-panel {
          border-radius: 5px
      }

      .toggle-btn .btn-panel:after {
          display: none
      }

      .toggle-btn .icon-panel {
          width: 80px;
          height: 50px
      }

      .toggle-btn:first-child .icon-panel {
          margin-left: -10px;
          margin-right: 0
      }

      .toggle-btn:last-child .icon-panel {
          margin-right: -10px;
          margin-left: 0
      }

      .toggle-btn .icon-panel img {
          max-height: 44px
      }

      .toggle-btn {
          font-size: 12px
      }

      .toggle-btn .indicator {
          font-size: 14px
      }

      .toggle-btn:first-child .btn-panel .category {
          margin-left: 0
      }

      .toggle-btn:last-child .btn-panel .category {
          margin-right: 0
      }
  }

  @media (max-width: 414px) {
      .sidebar .al-inner {
          flex-wrap:wrap
      }

      .sidebar .al-cont {
          width: 50%!important;
          height: 40px;
          margin: 2px 0;
          padding: 5px 10px
      }

      .sidebar .al-cont:first-child {
          order: 1
      }

      .sidebar .al-cont:nth-child(2) {
          order: 3
      }

      .sidebar .al-cont:nth-child(3) {
          order: 5
      }

      .sidebar .al-cont:nth-child(4) {
          order: 2
      }

      .sidebar .al-cont:nth-child(5) {
          order: 4
      }

      .sidebar .al-cont:nth-child(6) {
          order: 6
      }

      .sidebar .al-cont .labels {
          top: 0;
          bottom: 0;
          left: 5px;
          margin: auto 0
      }

      .sidebar .btn-group {
          padding: 0;
          background-color: transparent;
          background-image: none;
          border: none
      }

      .sidebar .btn-group button {
          width: calc(50% - 8px);
          height: 30px;
          font-size: 12px;
          margin: 0 4px
      }
  }

  @media (max-width: 1430px) {
      .board-section .row {
          margin:0
      }

      .board-panel {
          width: 100%;
          max-width: 740px;
          margin: 10px 0
      }

      .board-panel:first-child {
          order: 2
      }

      .realtime-board {
          width: 100%;
          max-width: 740px;
          margin: 10px 0;
          order: 1;
          margin-bottom: 100px
      }

      .board-panel:last-child {
          order: 3
      }

      .board-section {
          padding: 40px 10px 15px
      }

      .customer-container {
          margin-top: 0
      }
  }

  @media (max-width: 1310px) {
      .sc-btn {
          width:calc(20% - 15px)
      }
  }

  @media (max-width: 1024px) {
      .sc-btn {
          width:calc(25% - 15px)
      }
  }

  @media (max-width: 767px) {
      .sc-btn {
          width:calc(50% - 15px)
      }

      .footer-section .provider-logo img {
          max-width: 80px;
          max-height: 34px;
          margin: 8px 10px
      }

      .sc-btn .g-info .g-name {
          font-size: 14px;
          white-space: nowrap
      }
  }

  @media (max-width: 476px) {
      .page-content {
          padding:0
      }

      .game-provider {
          margin: 20px 0 0
      }

      .sc-btn {
          width: calc(50% - 12px);
          margin: 7px 6px;
          padding: 2px;
          box-shadow: 0 2px 5px #000
      }

      .sc-btn .g-panel {
          padding: 6px 6px 8px
      }

      .sc-btn .play-btn {
          width: 80px;
          height: 30px;
          font-size: 12px
      }

      .board-panel .header .icon-panel img {
          max-width: 70px
      }

      .board-panel:last-child .header .icon-panel img {
          max-width: 60px
      }

      .board-panel .header .title-panel .title {
          font-size: 18px
      }

      .board-section .board-panel .content table td a {
          max-width: 200px;
          font-size: 12px
      }

      .board-panel table tr td {
          font-size: 12px;
          padding-right: 0
      }

      .realtime-board .rb-panel .rb-cont {
          padding: 5px 8px
      }

      .rolling-realtime ul li div {
          font-size: 12px
      }

      .rolling-realtime ul li div.amount {
          font-size: 14px;
          padding: 0
      }

      .rolling-realtime ul li .crown-icon {
          width: 30px
      }

      .footer-section {
          padding: 25px 0 35px
      }

      .footer-section .provider-logo {
          padding: 0 0 20px
      }

      .footer-section .copyright {
          padding: 15px 0 0
      }
  }

  @media (max-width: 1024px) {
      .level-information .container {
          width:25%
      }

      .level-information .container:first-child {
          width: 20%
      }

      .level-information .container span {
          font-size: 12px
      }

      .level-information .container .labels {
          margin-right: 0
      }

      .level-information .container .amount {
          font-size: 14px
      }

      .level-information .point-form {
          width: 55%;
          padding: 0 5px
      }

      .level-information .point-form input {
          width: 58%;
          border-radius: 5px 0 0 5px
      }

      .level-information .points-btn {
          width: 40%;
          position: relative;
          right: 0;
          font-size: 8px;
          border-radius: 0 5px 5px 0
      }

      .gamelist-container {
          margin: 0 0 -20px;
          padding: 0
      }

      .game-btn {
          width: calc(20% - 16px)
      }
  }
}

@media screen and (max-width: 650px) {
  .bet-list-mobile,.points-list-mobile {
      display:block
  }

  .bet-list-desktop,.points-list-desktop {
      display: none
  }

  .footer-section .copyright img {
      width: 150px!important
  }
}

.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap
}

.page-link {
  position: relative;
  display: block;
  color: #fff;
  background-color: #141313;
  border: 1px solid #292828;
  padding: .2rem .75rem
}

.page-link.active {
  background-color: #ff7444;
  background-image: linear-gradient(#afa462,#6a5128,#372b17);
  color: #fff!important
}

.page-link.disabled {
  color: #b6b3ac;
  pointer-events: none
}

.page-link:hover {
  color: #b7810d
}

.swal2-popup {
  background: #130e09!important;
  border: 1px solid #656565;
  color: #fff
}

.btn-circle {
  width: 25px;
  height: 25px;
  text-align: center;
  padding: 3px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 12.5px;
}

.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}

.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
.navbar {
  position: fixed;
  top: 0;
}

/**
* Mobile Navigation 
*/
/*  pc모드 */
@media (min-width: 600px) {
  .navbar {
    display:none;
  }
  .banner-section {
    margin-top:0px;
  }  
  .navbar-mobile {
    display:none;
  }
}
/* 모바일모드  */
@media (max-width: 599px) {
  .navbar {
    display:block;
  }
  .banner-section {
    margin-top:40px;
  }
}

.w-ba {
  position: relative;
  z-index: 1
}

.w-ba:after,.w-ba:before {
  content: "";
  pointer-events: none;
  z-index: -1;
  position: absolute
}

.navbar-brand {
  font-size:1.4em;
  justify-content: start;
}

.navbar-mobile {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* display:none; */
  position: fixed;
  overflow: hidden;
  width:100%;
  height:100%;
  transition: 0.3s;
  z-index: 999;
  padding:10px;
  background: #261b15;
  /* background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,1) 28%, rgba(41,17,2,1) 70%); */
}

.navbar-mobile .navbar-title {
  padding:15px 10px;
}

.navbar-mobile .navbar-login {
  text-align:left;
  padding:15px 2px;
}

.navbar-mobile .mobile-nav-toggle {
  color: #fff;
  font-size: 35px;
  cursor: pointer;
  line-height: 0;
  transition: 0.5s; 
  position: absolute;
  top: 15px;
  right: -10px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  padding: 10px;
  overflow-y: auto;
  transition: 0.3s;
}

.navbar-mobile a,
.navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: #fff;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
  color: #5c9f24;
  font-size: 16px;
}

.navbar-mobile>ul>li {
  white-space: nowrap;
  padding: 3px 0;
  border-bottom: 1px solid #444444;
}

.navbar-mobile a:hover:before,
.navbar-mobile li:hover>a:before,
.navbar-mobile .active:before {
  visibility: hidden;
}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
  margin: 15px;
  color: #5c9f24;
  padding-left: 15px;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
  color: #5c9f24;
}

.navbar-mobile .dropdown>.dropdown-active {
  display: block;
}

.navi_top_logo {
  max-height:30px;
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 0px 0;
}

.section-bg {
  background-color: #f1f1f1;
}

.section-title {
  text-align: center;
  padding: 30px 0;
}

.section-title h2 {
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 30px 0;
  padding-bottom: 0;
  color: #fff;
  /* color: #5c9f24; */
}

.section-title p {
  margin-bottom: 0;
}


/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
    width: 60px;
  height: 60px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #6fc02c;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer-section {
  width:100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: #0c0603; 
  /* border: 1px solid red; */
  /* background: radial-gradient(#622703, #080808);  */
  text-align:center;
  justify-content: center;
}

.footer-section .top-line {
  padding: 0;
  height:10px;
  background-image: url('/ui15/images/footer_top_line.png');
  background-repeat: no-repeat;
  background-position: top center;
}

.footer-section .divider {
  height: 1px;
  background-image: linear-gradient(90deg, rgba(124, 100, 59, 0), #7c643b, rgba(124, 100, 59, 0));
}

.footer-section .provider-logo {
  padding: 0 0 20px
}

.footer-section .provider-logo img {
  margin: 8px 15px;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,1))
}

.footer-section .provider-logo img.no-shadow {
  filter: none
}

.footer-section .container {
  padding: 20px 0;
}

.footer-section .copyright {
  padding: 30px 0 0;
  color: #65544a;
  font-size: 12px
}

.footer-section .copyright img {
  width: 220px
}

.main-content {  
  width:100%;
  height:auto;
  padding:20px 0 50px 0;
  background: black;
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgb(46, 17, 1) 100%);
}

#gameLoading{
  display: none;
  z-index:5000;
  position: fixed;
  width:300px;
  height:170px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 팝업창 스크롤바의 폭 너비 */
.form-box::-webkit-scrollbar {
  width: 14px;  
}
.form-box::-webkit-scrollbar-thumb {
  background: rgb(58, 56, 56);
  border-radius: 10px;
}
.form-box::-webkit-scrollbar-track {
  background: rgba(37, 30, 37, 0.1);
}

.powerball-box {
  margin: 30px 0;
  width: 1280px;
  /* background-color: #160505;
  border:1px solid #d30ded; */
}

.powerball-left {
  width: 880px; 
  padding:0;
  margin:0; 
  /* background-color: #ccc; */
}

.powerball-cart {
  width: 395px;  
  padding-left:5px;
  align-items: end;
  border:0 solid orange;
}


/* 
* 파워볼메뉴 메뉴바 
*/
.p_nav {
	margin: 0 auto 0;
	position: relative;
	width: 100%;
	height: 50px;
	background-color: #34495e;
  border:1px solid #181818;
	border-radius: 8px;
	font-size: 0;
}
.p_nav a {
	line-height: 50px;
	height: 100%;
	font-size: 15px;
	display: inline-block;
	position: relative;
	z-index: 1;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	color: white;
	cursor: pointer;
}
.p_nav .animation {
	position: absolute;
	height: 100%;
	top: 0;
	z-index: 0;
	transition: all .5s ease 0s;
	border-radius: 8px;
}
.p_nav a:nth-child(1) {
	width: 120px;
}
.p_nav a:nth-child(2) {
	width: 120px;
}
.p_nav a:nth-child(3) {
	width: 120px;
}
.p_nav a:nth-child(4) {
	width: 120px;
}
.p_nav a:nth-child(5) {
	width: 120px;
}
.p_nav a:nth-child(6) {
	width: 120px;
}
.p_nav .start-dh_game, .p_nav a:nth-child(1):hover~.animation {
	width: 120px;
	left: 0;
	background-color: #e74c3c;
}
.p_nav .start-dh_ladder, .p_nav a:nth-child(2):hover~.animation {
	width: 120px;
	left: 120px;
	background-color: #e74c3c;
}
.p_nav .start-evo, .p_nav a:nth-child(3):hover~.animation {
	width: 120px;
	left: 240px;
	background-color: #e74c3c;
}
.p_nav .start-eos_3min, .p_nav a:nth-child(4):hover~.animation {
	width: 120px;
	left: 360px;
	background-color: #e74c3c;
}
.p_nav .start-eos_5min, .p_nav a:nth-child(5):hover~.animation {
	width: 120px;
	left: 480px;
	background-color: #e74c3c;
}
.p_nav .start-sports, .p_nav a:nth-child(6):hover~.animation {
	width: 120px;
	left: 600px;
	background-color: #e74c3c;
}

.p_nav h1 {
	text-align: center;
	margin: 40px 0 40px;
	text-align: center;
	font-size: 30px;
	color: #ecf0f1;
	text-shadow: 2px 2px 4px #000000;
	font-family: 'Cherry Swash', cursive;
}

.p_nav p {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    color: #ecf0f1;
    font-family: 'Cherry Swash',cursive;
    font-size: 16px;
}

.p_nav span {
    color: #2BD6B4;
}

#popBox {
  padding:30px;
}

.mobile-container {
  padding:20px;
  text-align:left;
  background:#251b0d;
}



/* 
* 모바일 파워볼메뉴 메뉴바 
*/


.p_nav_mobile {
  width: 100%;
  height: 40px;
  table-layout: fixed;
  border-bottom: 1px solid hsla(0,0%,100%,.1);
  background-image: linear-gradient(#261e12,#17110b);
  border-top: 1px solid #614822;
  box-shadow: 0 5px 20px rgba(0,0,0,.6);
  margin-top: 10px;
}

.p_nav_mobile ul {
  display: flex;
  flex-wrap: wrap;
  padding: 8px 4px;
  margin: 0;
  list-style: none;
}

.p_nav_mobile li {
  padding: 0;
  margin: auto;
}

.p_nav_mobile li a {
  font-size:12px;
  font-weight:300;
  color:#ecd8ac;
}
.p_nav_mobile li .active {
  font-size:13px;
  font-weight:400;
  color:orange;
}


#popBox .btn-group {
  width:100%;
  padding-bottom:10px;  
}

#popBox .btn-group.customer {
  width:50%;
  padding-bottom:10px;  
}

.mobile-container th, td {
  font-weight:300;
  font-size:12px;
}
.mobile-container tbody, td {
  font-weight:300;
  font-size:12px;
}


.miniview-mobiles {
  position: relative;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  aspect-ratio: 4/3;
  height: auto;
  overflow: hidden;
}

.miniview-mobiles .miniview {
  position: relative;
  top:10px;
  left:-40px;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;	
  border: none;  
}

.miniview-mobiles .miniview-eos {
  position: relative;
  top:10px;
  left:-50px;
  -webkit-transform: scale(0.55);
  transform: scale(0.55);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;	
  border: none;  
}

.miniview-mobiles .miniview-evo {
  position: relative;
  top:10px;
  left:20px;
  -webkit-transform: scale(0.55);
  transform: scale(0.55);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;	
  border: none;  
}

.powerball-miniview {
  position: relative;
  top: 0;
  bottom: 0;
  right: 0;
  width: 900px;
  aspect-ratio: 4/3;
  height: auto;
  overflow: hidden;
}

.powerball-miniview iframe{
  position: relative;
  width:900px;
  top:10px;
  left:-10px;
  border: none;    
  /* border:2px solid red; */
}


/* 스킨변경 */

.skin_area {
  width:100%;  
  margin:0 auto;
  padding:2px 5px;
  background-color: #333;
}

.skin_area span {
  padding:8px 0;
  margin:2px;
  width:100%;
  height:35px;
}
.skin_area .col {
  width:100%;
  height:100%;
  padding:0;
  margin:2px;
}

.navar-logo-mobile {
  max-height: 36px; 
  padding: 0;
  margin-top: 0px;  
  /* border:1px solid orange; */
}


/* Desktop Navigation */
@media (min-width: 800px) { 
  .skin_area {
    /* position: absolute;
    top:0; */
    display: block;
  }
}
@media (max-width: 799px) { 
  .skin_area {
    /* position: relative;
    top:6px;
    z-index: inherit; */
    display: block;
  }
}

#slotModal {
  margin-top:45px;
}