@font-face { font-family: 'SCDream'; src: url('/assets/skin36/font/S-CoreDream-4Regular.woff') format('woff'); font-weight: 400; }
@font-face { font-family: 'SCDream'; src: url('/assets/skin36/font/S-CoreDream-5Medium.woff') format('woff'); font-weight: 500; }
@font-face { font-family: 'SCDream'; src: url('/assets/skin36/font/S-CoreDream-6Bold.woff') format('woff'); font-weight: 600; }
@font-face { font-family: 'SCDream'; src: url('/assets/skin36/font/S-CoreDream-7ExtraBold.woff') format('woff'); font-weight: 700; }

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

html {
 width: 100%;
  overflow-y: auto;
}

::-webkit-scrollbar {width: 4px;height: 4px;}
::-webkit-scrollbar-button, ::-webkit-scrollbar-track {display: none;}
::-webkit-scrollbar-corner {display: none;}
::-webkit-scrollbar-thumb {background-color: hsla(0,0%,100%,.1);border-radius: 12px;}
::-webkit-scrollbar-button, ::-webkit-scrollbar-track {display: none;}
::-webkit-scrollbar-track-piece {background-color: transparent;}


body {
  text-align: center;width: 100%;
  background:#000 url(/assets/skin36/img/bgbg.jpg)no-repeat center center ;background-size: cover;
  color: #fff;
  font-size: 13px;
  font-family: 'SCDream', 'Open Sans', 'noto-sans-kr', Arial, sans-serif;
  transition: 0.3s;
}

button, a, input, select, textarea, span {
  outline: none !important;
  transition: 0.3s;
}

button {padding: 0;}
a {text-decoration: none;}
a:hover {text-decoration: none;}
i {display: inline-flex;}

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

:root {
  --orange: #ff8b2d;
  --yellow: #ffdd3e;
  --white-yellow: #ffd989;
  --red: #fe744f;
}

.text-yellow {
  color: var(--yellow) !important;
}

.text-orange {
  color: var(--orange) !important;
}

.text-red {
  color: var(--red) !important;
}

.text-white-y {
  color: var(--white-yellow) !important;
}

.font-small {
  font-size: 10px;
}

.font-s-12 {
  font-size: 12px !important;
}

.font-bold {
  font-weight: bold;
letter-spacing: 1px;
}

.table-layout-fixed {
  table-layout: fixed;
}

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

.dflex-ac-jb {
  display: flex !important;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

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

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

.dflex-ae-jc {
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
}

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

.wrapper.affix {
  padding-top: 88px;
}

.wd50 {width: 50%;}
.wd100 {width: 100%;}

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

.bs-ul li {
  list-style: none;
  width: auto;
  height: auto;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  position: relative;
}

.container {
  position: relative;
}

@media (min-width: 1200px) {
  .container {
      max-width: 1560px;
  }
}
@media (max-width: 1200px) {
  .container {
      max-width: 100%;padding: 0 5px;
  }
}


/* Banner Section */

.banner-section {
  height: 476px;
  position: relative;
  padding: 50px 0 0;
}

.banner-section:before {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url(../img/bg/stars-bg.png);
  background-position: bottom center;
  animation: starsAnim 0.7s ease infinite;
}

@keyframes starsAnim {
  0% {
      opacity: 1;
  }
  50% {
      opacity: 0.5;
  }
  100% {
      opacity: 1;
  }
}

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

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

.logo img {
    max-width: 100%;
    height: 80px;
}

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

.logo .logo-img {
  width: 100%;
  position: relative;
  opacity: 0;
}

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

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

@keyframes lgABigAnim {
  0% {
      opacity: 0;
      transform: scale(0.25) rotate(-90deg);
  }
  10% {
      opacity: 1;
      transform: scale(1) rotate(0deg);
  }
  95% {
      opacity: 1;
      transform: scale(1) rotate(0deg);
  }
  100% {
      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);
  }
  100% {
      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);
  }
  100% {
      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);
  }
  100% {
      opacity: 0;
      transform: translateY(0);
  }
}

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

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


/* Banner Background */

.banner-background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9;
}

.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:0;
  animation: bannerLightAnim 15s ease infinite;
}

@keyframes bannerLightAnim {
  0% {
      opacity: 0;
  }
  8% {
      opacity: 0;
  }
  13% {
      opacity: 1;
  }
  97% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}

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

@keyframes bannerLightImg {
  0% {
      opacity: 1;
  }
  50% {
      opacity: 0.5;
  }
  100% {
      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: 50%;
    right: 0%;
    left: auto;
    animation: candySlotAnim 15s ease infinite;
    bottom: 64%;
    font-size: 48px;
    font-weight: 700;
    text-align: left;    line-height: 44px;font-family: 'roboto';
}
.banner-background .candy-slot font {color: #ffcc00;}

@keyframes candySlotAnim {
  0% {
      opacity: 0;
      transform: translateX(15%);
  }
  8% {
      opacity: 1;
      transform: translateX(0);
  }
  95% {
      opacity: 1;
      transform: translateX(0);
  }
  100% {
      opacity: 0;
      transform: translateX(0);
  }
}

.banner-background .money-slot {
  width: 50%;
  right: 0%;
  left: auto;
  bottom: -5%;
  animation: moneySlotAnim 15s ease infinite;
  bottom: 34%;
    font-size: 25px;
    font-weight: 200;
    text-align: left;    line-height: 34px;font-family: 'roboto';
}
.banner-background .money-slot p.first {border-bottom: 1px solid #666;padding-bottom: 15px;}
.banner-background .money-slot p.first font {color:#ffcc00}
.banner-background .money-slot p.first font:last-child {font-weight: 700;}
.banner-background .money-slot p.second {color: #fff;font-weight: 700;font-size: 30px;}
.banner-background .money-slot p.second font {color:#fa404d}
.banner-background .money-slot p.second font:last-child {font-weight: 700;}

@keyframes moneySlotAnim {
  0% {
      opacity: 0;
      transform: translateX(-15%);
  }
  8% {
      opacity: 1;
      transform: translateX(0);
  }
  95% {
      opacity: 1;
      transform: translateX(0);
  }
  100% {
      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: 45%;
  left: -7.5%;
  transform-origin: bottom center;
  animation: casinoItemAnim 15s ease infinite;
}

@keyframes casinoItemAnim {
  0% {
      opacity: 0;
      transform: scale(0.5);
  }
  4% {
      opacity: 0;
      transform: scale(0.5);
  }
  10% {
      opacity: 1;
      transform: scale(1);
  }
  95% {
      opacity: 1;
      transform: scale(1);
  }
  100% {
      opacity: 0;
      transform: scale(1);
  }
}

.banner-background .girl-left {
  width: 19%;
  left: -3%;
  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);
  }
  100% {
      opacity: 0;
      transform: translateX(0);
  }
}

.banner-background .girl-center {
  width: 47%;
  left: 0%;bottom: -24%;
  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);
  }
  100% {
      opacity: 0;
      transform: translateY(0);
  }
}

.banner-background .girl-right {
  width: 19%;
  left: 17%;
  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);
  }
  100% {
      opacity: 0;
      transform: translateX(0);
  }
}


/* Banner Text */

.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, 0.75);
  background-color: rgba(0, 0, 0, 0.57);
  padding: 15px 15px;
  -webkit-mask-image: linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 5%,black 25%,black 75%,rgba(0,0,0,0) 95%,rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 5%,black 25%,black 75%,rgba(0,0,0,0) 95%,rgba(0,0,0,0) 100%);
  position: relative;
  z-index: 1;
}

.banner-carousel .text-panel:before {
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto 0;
  border: solid 1px #9c988f;
  opacity: 0.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);
  }
  100% {
      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);
  }
  100% {
      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);
  }
  100% {
      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: rgba(255, 255, 255, 0.5);
  border:none;
  opacity: 1;
  transition: 0.3s;
}

.carousel-indicators li:hover {
  background-color: rgba(255, 255, 255, 1);
}

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


/* Header Section */

.header-section {
  width: 100%;
  height: 88px;z-index: 999;    background: rgba(0, 0, 0, 0.4);
}

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

.main-menu {
  height: 100%;
}

.main-menu li {
  height: 100%;
}

.main-menu li a {
  height: 100%;
  padding: 0 15px;
  color: #aaa;    font-size: 14px;
  white-space: nowrap;border-top: 4px solid transparent;
}

.main-menu li a .icon-panel {margin-right: 8px;}
.main-menu li a:hover {
  color: #ffffff;border-top: 4px solid #fa404d;
}

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

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



/* Before After Login */

.before-login {
  display: none;
}

.before-login.active {
  display: block;
}

.before-login .input-panel {
  width: 180px;
  height: 40px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 1), 0 1px 0 rgba(255, 255, 255, 0.08);
  margin-left: 5px;
}

.before-login .input-panel .icon-panel {
  width: 40px;
  height: 100%;
  color: var(--white-yellow);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.before-login .input-panel input {
  width: calc(100% - 40px);
  height: 100%;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  color: #ffffff;
}

.before-login .input-panel input::-webkit-input-placeholder{
  color:#937e62;
}

.before-login .desktop button {
  width: 120px;
  height: 40px;
  border-radius: 5px;
  margin-left: 5px;
}


.after-login.active {
  display: block;
}

.after-login button {
  width: 100px;
  height: 35px;
  margin-left: 5px;
}

.after-login .nav-btn {
  height: 40px;
  font-size: 18px;
  margin-left: 3px;    color: #aaa;padding: 2px 10px;background: #222;border-radius: 5px;
}

.after-login .nav-btn:hover {
  color: #ffffff;
}

.after-login .nav-btn:hover:before {
  transform: translateY(0);
}

.after-login .active .nav-btn:before {
  transform: translateY(0);
  opacity: 1;
}

.after-login .active .nav-btn {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 1.0);
  box-shadow: 0 2px 0 #002f6f;
}

.after-login .message-btn .count {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color:#ff0000;
  color: #ffffff;
  font-size: 8px;
  position: absolute;
  right: -8px;
  top: -2px;
  text-shadow: none;
}

.after-login .mobile button {
  width: calc(50% - 8px);
  margin:3px;
}
.after-login .mobile a {width: calc(50% - 8px);margin:3px;padding: 8px;    display: flex;align-items: center;justify-content: center;gap: 5px;}


@media (min-width: 576px) {
    .col-sm-9 {
        width: 100%;
        max-width: 1540px;position: relative;
    }
}


/* Dropdown */

.drop-down {
  position: relative;
  transition: 0.3s;
}

.drop-down .mypage-toggle {
  height: 40px;
  transition: 0s;
  margin-left: 5px;    color: #eee;padding: 2px 10px;background: #222;border-radius: 5px;
}

.drop-down .mypage-toggle:hover {
  color: #ffffff;
}

.drop-down .mypage-toggle .arrow-icon{
  transition: 0.3s;
}

.drop-down .mypage-toggle .arrow-icon {
  margin-left: 8px;
  transition: 0.3s;
}

.drop-down.active .mypage-toggle .arrow-icon {
  transform: rotate(180deg);
}

.drop-down:hover .mypage-toggle .arrow-icon {
  opacity: 1;
  bottom: 2px;
}

.drop-down-menu {
  width: 250px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 75%;
  background-color: #222;
  box-shadow: 0 2px 8px rgb(0 0 0);
  border-radius: 10px;
  border: solid 1px #f10000;
  padding: 10px 10px;
  pointer-events: none;
  opacity: 0;
  transition: 0.3s;
}

.drop-down.active .drop-down-menu {
  top: calc( 100% + 10px );
  opacity: 1;
  pointer-events: auto;z-index: 9;
}

.toggle_inner {gap: 10px;}
.toggle_inner button {background:#222;border-radius: 10px;color: #fa404d;border: 0;min-width: 182px;max-width: 182px;padding: 15px 24px;height: 150px;}
.toggle_inner button:hover,.toggle_inner button.active {background: #fa404d;color:#fff;}
.toggle_inner button i {font-size: 44px;}
.toggle_inner button div {font-size: 18px;font-weight: 700;}

.toggle_inner .jackpot_sum {background:#222;border-radius: 10px;color: #fa404d;border: 0;padding: 15px 10px;min-width: 170px;font-family: 'roboto';display: flex;align-items: center;flex-wrap: wrap;justify-content: center;height: 150px;max-width: 440px}
.toggle_inner .jackpot_sum div {font-weight: 900;font-size: 44px;display: flex;align-items: center;width: 100%;justify-content: center;line-height: 40px;gap: 10px;
  background: linear-gradient(to right, rgb(191, 149, 63), rgb(252, 246, 186), rgb(179, 135, 40), rgb(251, 245, 183), rgb(170, 119, 28)); -webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.toggle_inner .jackpot_sum div i {font-size: 30px;}
.toggle_inner .jackpot_sum p {font-weight: 700;font-size: 28px;display: flex;align-items: center;width: 100%;justify-content: center;line-height: 30px;margin: 0;
  background: linear-gradient(to right, rgb(191, 149, 63), rgb(252, 246, 186), rgb(179, 135, 40), rgb(251, 245, 183), rgb(170, 119, 28)); -webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.toggle_inner .msg {min-width: 300px;height: 150px;position: relative;}
.toggle_inner .msg .telegram {display: flex;align-items: center;justify-content: space-between;background: #21A1E2;border-radius: 10px;padding: 14px 10px;min-width: 170px;}
.toggle_inner .msg .telegram > div {text-align: left;    margin-top: 0px;font-size: 14px;}
.toggle_inner .msg .telegram img {height: 40px;}
.toggle_inner .msg .kakao {display: flex;align-items: center;justify-content: space-between;background: #FAE101;border-radius: 10px;padding: 14px 10px;min-width: 300px;position: absolute;bottom: 0;color:#3f2c25}
.toggle_inner .msg .kakao > div {text-align: left;    margin-top: 0px;font-size: 14px;}
.toggle_inner .msg .kakao img {height: 45px;}
.toggle_inner .msg .whatsapp {display: flex;align-items: center;justify-content: space-between;background: #1EBEA5;border-radius: 10px;padding: 14px 10px;min-width: 300px;position: absolute;bottom: 0;color:#fff}
.toggle_inner .msg .whatsapp > div {text-align: left;    margin-top: 0px;font-size: 14px;}
.toggle_inner .msg .whatsapp img {height: 45px;}





.mp_text {max-width: 1520px;margin: 10px auto;}
.mp_text .left {display: flex;align-items: center;gap: 10px;font-size: 26px;font-weight: 200;}
.mp_text .left font {font-weight: 700;}
.mp_text .right {display: flex;align-items: center;background: #222;padding: 8px 15px;border-radius: 15px;gap: 20px;}
.mp_text .right span {font-size: 16px;font-weight: 700;}
.mp_text .right div {display: flex;align-items: center;gap: 5px;}
.mp_text .right div a {color:#fff;padding: 8px 15px;border-radius: 10px;}
.mp_text .right div a.active {background: #fa404d;}

/* Account Info */
.after-login .account-info {
  padding: 0;
  margin-right: 5px;
  font-size: 13px;gap: 10px;
}

.after-login .account-info .info-panel {
  height: 40px;
  background-color: #222;
  cursor: pointer;
  margin-left: 3px;
  overflow: hidden;
  padding: 0 8px;
  border-radius: 5px;
}

.after-login .account-info .level-icon {
  margin-right: 5px;
}

.after-login .account-info .labels {
  margin-right: 5px;
}

.after-login .account-info .money {color: #eda916;}
.after-login .account-info .point {color: #ace16f;}
.after-login .account-info .point a {background: #ace16f;border-radius: 5px;padding: 2px 10px;color: #000;margin-left: 5px;}

.after-login .account-info .icon {
  color: #ffffff;
  position: absolute;
  right: -2px;
  top: -2px;
  font-size: 40px;
  opacity: 0.1;
}

.after-login .account-info .m-icon {
  width: 32px;
  color: #ffd350;
  margin-right: 5px;
  font-size: 22px;
}

.after-login .account-info .info {
  color: #ffffff;
}

.after-login .account-info .symbol {
  color: #eafeae;
  margin-left:3px;
}

.after-login .drop-down .btn-grp {
  margin: 5px 0 0;
}

.after-login .drop-down .btn-grp a {
  width:100%;
  height:40px;
  border-radius: 3px;
  margin: 0 0 5px;
  box-shadow: none;display: inline-flex;    align-items: center;justify-content: center;gap: 5px;}

.after-login .drop-down .btn-grp a i {
  margin-right: 8px;
}

.after-login .drop-down .btn-grp a:after {
  width: 0;
  height: 0;
  border-left: solid 10px transparent;
  border-bottom: solid 10px #0d2240;
  right: 3px;
  bottom: 3px;
}

.after-login .account-info .btn-grp {
  width: calc(100% + 6px);
  margin: -4px -3px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 0;
}

.after-login .account-info .btn-grp a {
  width: calc(50% - 6px);
  margin: 3px;
  float: left;
}



/* Site Button */

.btn-yellow {
  color: rgba(0, 0, 0, 0.75);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  background-color: #ffc657;
  background-image: linear-gradient(#ffce6b,#ffbd3f);
  border: solid 1px #ffd273;
  border-radius: 5px;
  font-weight: bold;
letter-spacing: 1px;
  position: relative;
  z-index: 1;
}

.btn-gold {
  color: rgba(0, 0, 0, 0.75);
  background-color: #ffc281;
  border: solid 1px #dece8f;
  border-radius: 5px;
  font-weight: bold;
letter-spacing: 1px;
  position: relative;
  z-index: 1;
}

.btn-red {
  color: #ffffff;
  background-color: #fa404d;
  border: solid 1px #d85c38;
  border-radius: 5px;
  position: relative;
  z-index: 1;
}

.btn-orange {
  color: rgba(0, 0, 0, 0.75);
  font-weight: bold;
  letter-spacing: 1px;
  border: solid 1px #ffac66;  
  background-color: #ff9900;
  border-radius: 5px;
  position: relative;
  z-index: 1;
}




/* Toggle Section */

.page-content {
  position: relative;
  padding: 0 0 30px;
}

.page-content:before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(../img/bg/toggle-glow.png);
  background-position: top center;
  background-repeat: no-repeat;
  animation: toggleGLow 2s ease infinite;
}

@keyframes toggleGLow {
  0% {
      opacity: 1;
  }
  50% {
      opacity: 0.6;
  }
  100% {
      opacity: 1;
  }
}

.toggle-section { padding: 30px 0 15px 0;}
.toggle-section .container {
  width: 100%;
/*    max-width: 1200px;*/
}
.toggle-section .container.dflex-ac-jc {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}

.toggle-btn {
  width: calc(33% - 1px);
/*    width: calc(25% - 1px); */
  height: 72px;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  color: var(--white-yellow);
  font-weight: bold;
letter-spacing: 1px;
  font-size: 20px;
  font-weight: 600;
  transition: 0s;
}

.toggle-btn:hover {
  color: var(--orange);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 1), 0 0 15px rgba(255, 255, 255, 0.25); 
}

.toggle-btn.active {
  color: var(--orange);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 1), 0 0 15px rgba(255, 255, 255, 0.4); 
}

/*.toggle-btn:first-child {  margin-right: auto;}*/
.toggle-btn.telegram-btn {
border-width: 2px;
  border-style: solid;
  border-image: linear-gradient(to right, #d7b472, #855d17) 1;
  text-align: center;
  background: #070604;
}
.toggle-btn.telegram-btn .w-ba {
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  display: initial !important;
}
.toggle-btn.telegram-btn .w-ba img { height: 100%; width: auto; max-width: 100%;}
.toggle-btn .btn-panel {
/*    width: calc(100% - 83px);*/
  width: 96%;
  height: 100%;
  border: solid 1px #614822;
  background-image: linear-gradient(#261e12, #17110b);
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
  flex-wrap: nowrap;
}

/*.toggle-btn:first-child .btn-panel { margin-right: 29px;}*/
/*.toggle-btn:nth-child(even) .btn-panel { margin-left: 29px;}*/
/*.toggle-btn:last-child .btn-panel { margin-left: 29px;}*/
/*
.toggle-btn .btn-panel:before {
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 5px;
  background-color: #392b19;
}

.toggle-btn .btn-panel:after {
  width: 29px;
  height: calc(100% + 2px);
  top: -1px;
  background-image: url(../img/bg/toggle-bg.png);
  background-size: 100% 100%;
}
*/
/*
.toggle-btn:first-child .btn-panel:after { right: -29px;}
.toggle-btn:nth-child(even) .btn-panel:after {
  left: -29px;
  transform: rotateY(180deg);
}
.toggle-btn:last-child .btn-panel:after {
  left: -29px;
  transform: rotateY(180deg);
}
*/

.toggle-btn .btn-panel .category {
  position:absolute;
  right: 10%;
  text-align: right;
/*    top: -3px;*/
  white-space: nowrap;
}

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

.toggle-btn .icon-panel:before {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url(../img/bg/icon-bg.png?v=1);
  background-size: 100% 100%;
}
/*
.toggle-btn:first-child .icon-panel {
  margin-left: -95px;
  margin-right: 25px;
}
.toggle-btn:nth-child(even) .icon-panel {
  margin-right: -15px;
  margin-left: 25px;
}

.toggle-btn:last-child .icon-panel {
  margin-right: -95px;
  margin-left: 25px;
}
*/
.toggle-btn:nth-child(even) .icon-panel:before { transform: rotateY(180deg);}
.toggle-btn:last-child .icon-panel:before { transform: rotateY(180deg);}
.toggle-btn .icon-panel img { transition: 0.3s;}
.toggle-btn:hover .icon-panel img { transform: scale(0.8);}
.toggle-btn.active .icon-panel img { animation: toggleIconAnim 2s ease infinite;}

@keyframes toggleIconAnim {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(0.95);
  }
  100% {
      transform: scale(1);
  }
}

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

@keyframes indicatorAnim {
  0% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-3px);
  }
  100% {
      transform: translateY(0);
  }
}

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


/* Slot Casino Section */
.deco_girl {position: absolute;width: 100%;left: 0;    top: -60px;padding: 0 100px;}
.deco_girl img {height: 200px;}

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

.sc-section {
  max-width:1520px;
  position: relative;
  display: none;margin: 0 auto;
}

.sc-section.active {
  display: block;
}

.sc-btn {
  flex: 0 19.4%;
  display: inline-block;
  position: relative;
  animation: scBtnAnim 0.8s ease 1 backwards;
  transform-origin: bottom center;
}

.sc-btn img {width: 100%;}

@keyframes scBtnAnim {
  0% {
      opacity: 0;
      transform: translateY(50px) scale(0.5);
  }
  50% {
      opacity: 1;
      transform: translateY(-20px) scale(1);
  }
  100% {
      opacity: 1;
      transform: translateY(0) scale(1);
  }
}

.sc-btn.off {
  opacity: 0.5;
}

.sc-btn:hover {
  z-index: 2;
  margin-top: -10px;
}

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

.sc-btn .g-panel {
  width: 100%;
  background-color: #301605;
  border-radius: 8px;
  padding: 8px 9px;
  overflow: hidden;
  transition: 0.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, 0.8), rgba(149, 112, 76, 0.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, 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;
}

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

.sc-btn .g-cont .g-img {
  width: 100%;
  transition: 0.5s;
}

.sc-btn:hover .g-cont .g-img {
  transform: scale(1.1);
  opacity: 0.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: #ffffff;
  font-size: 16px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 1);
  vertical-align: top;
}

.sc-btn .g-info .en-text {
  color: var(--white-yellow);
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 1);
  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, 0.5);
  margin: -40px auto 0;
  transition: 0.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, 0.6));max-height: 40px;
}

.sc-btn .glass {
  width: 200%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0),rgba(255, 255, 255, 0.1));
  transform-origin: bottom left;
  transform: rotate(-48deg);
  z-index: 1;
  transition: 0.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: solid 1px rgba(255, 255, 255, 0.15);
  border-bottom: solid 1px rgba(255, 255, 255, 0.15);
  transition: 0.5s;
  -webkit-mask-image: linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 5%,black 25%,black 75%,rgba(0,0,0,0) 95%,rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 5%,black 25%,black 75%,rgba(0,0,0,0) 95%,rgba(0,0,0,0) 100%);
}

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

.sc-btn .play-btn {
  width: 140px;
  height: 35px;
  border-radius: 5px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 4;
  opacity: 0;
  transform: scale(0);
}


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


/* Board Section */


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

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

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

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

.board-panel {
  width: calc(33.33% - 50px );
  margin: 0 15px;
}

.board-panel .header {
  width: 100%;
  height: 50px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(0, 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-weight: bold;
letter-spacing: 1px;
  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 rgba(0, 0, 0, 1);                 
  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: solid 1px rgba(255, 255, 255, 0.1);
}

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

.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(to left, #dc664a, #af3936);
  text-align:center;
  margin-left:8px;
  box-shadow: 0 0 10px rgba(253, 126, 103, 0.5);
}


/* Realtime Board */

.realtime-board {
  width: 33.33%;
  margin: 0 20px;
}

.realtime-board:before,
.realtime-board:after {
  width: 100%;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-repeat: no-repeat;
}

.realtime-board:before {
  width: 563px;
  background-image: url(../img/bg/realtime-top-bg.png);
  background-position: top center;
  top: -45px;
}

.realtime-board:after {
  width: 612px;
  background-image: url(../img/bg/realtime-bot-bg.png);
  background-position: bottom center;
  bottom: -115px;
}

.realtime-board .realtime-nav {
  margin: 0 0 6px;
}

.realtime-board .realtime-nav button {
  width: calc(50% - 4px);
  height: 42px;
  border-radius: 5px;
  border: solid 1px #614822;
  background-color: #261e12;
  background-image: linear-gradient(#261e12, #17110b);
  color: #ffddae;
  margin:0 2px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.realtime-board .realtime-nav button:hover {
  color: #ffffff;
}

.realtime-board .realtime-nav button:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: linear-gradient(#433520, #31261a);
  transition: 0.3s;
  z-index: -1;
  opacity: 0;
}

.realtime-board .realtime-nav button:hover:before {
  opacity: 1;
}

.realtime-board .realtime-nav button.active {
  border-color: #fcbe41;
  background-color: #fdcd6a;
  background-image: linear-gradient(#fdcd6a, #a27417);
  color: rgba(0, 0, 0, 0.75);
 font-weight: bold;
letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

.realtime-board .realtime-nav button.active:before {
  display: none;
}

.realtime-board .rb-panel {
  width: 100%;
  background-color: #5e4322;
  background-image: linear-gradient(to bottom left, #f5cc7f, #96653b, #b79453);
  border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 1;
  padding: 6px;
}

.realtime-board .rb-panel: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: 0.3s;
}

.realtime-board .rb-panel .rb-cont {
  width: 100%;
  min-height: 32px;
  background-color: #301605;
  background-image: radial-gradient(#4d3319, #301605, #301605);
  border-radius: 8px;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.75);
  padding: 5px 18px;
}

.rolling-realtime {
  width: 100%;
  margin: 0 auto;
  display: none;
  animation: realtimeAnim 0.5s ease 1 forwards;
}

@keyframes realtimeAnim {
  0% {
      opacity: 0;
      transform: scale(0.5);
  }
  100% {
      opacity: 1;
      transform: scale(1);
  }
}

.rolling-realtime.active {
  display: block;
}

.rolling-realtime ul {
  width: 100%;
  float: left;
}

.rolling-realtime ul li {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 48px;
  cursor: pointer;
  transition: 0.3s;
}

.rolling-realtime ul li div {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #ffffff;
  font-size: 15px;
  transition: 0.3s;
  border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}

.rolling-realtime ul li:hover div {
  background-color: rgba(255, 255, 255, 0.08);
}

.rolling-realtime ul li div.user {
  width: 35%;
  justify-content: flex-start;
}

.rolling-realtime ul li div.amount {
  color: var(--orange);
 font-weight: bold;
letter-spacing: 1px;
  font-size: 18px;
  width: 35%;
  padding-right: 3%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 1);
}

.rolling-realtime ul li div.date {
  color: #ffdd95;
  width: 30%;
  text-align: right;
  padding-right: 5px;
}

.rolling-realtime ul li .crown-icon {
  margin: 4px -2px 0 -2px;
}

/* ¸ÞÀÎÇÏ´Ü ¸Þ½ÅÀú ¿µ¿ª */
.cs_message_btn_set {
margin: 0 0;
padding: 0 0;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
flex-direction: row;
}
.cs_message_btn_set li {
margin: 0 0 20px 0;
padding: 0 0; 
list-style: none;
background: url(/img/main_bottom_cs_btn_bg.png);
background-position: 0 0;
background-repeat: no-repeat;
width: 30%;
/* min-width: 300px; */
height:130px;
background-size: 100% 100%;
text-align: center;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
flex-direction: row;
}
.cs_message_btn_set li img.ico {
width:70px;
height:auto;
margin-right: 20px;
}
.cs_message_btn_set li > div {
text-align: left;
}
.cs_message_btn_set li > div h3 {
font-weight: 700;
margin:5px 0 0 0;
font-size: 22px;
}
.cs_message_btn_set li > div p {
margin: 0 0;
font-size: 16px;
}
@media(max-width:1024px){
  .cs_message_btn_set li { width:48%;}
}
@media(max-width:767px){
  .cs_message_btn_set li { width:48%;}
}
@media(max-width:676px){
  .cs_message_btn_set li { width:98%;}
}
@media(max-width:500px){
  .cs_message_btn_set li { width:98%; height:90px;}
  .cs_message_btn_set li img.ico {width: 50px; height: auto; margin-right: 15px}
  .cs_message_btn_set li > div h3 {font-size: 19px;}
  .cs_message_btn_set li > div p {font-size: 14px;}
}

/* Footer Section */

.footer-section {
  padding: 35px 0;
  overflow: hidden;
}

.footer-section:before,
.footer-section:after {
  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, 0.25);
}

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

.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 .copyright {
  padding: 30px 0 0;
  color: #aaa;
  font-size: 12px;
  border-top:1px solid ;border-image:linear-gradient(to left,#111,#777,#111);border-image-slice: 1;
}

.footer-section .copyright:after {
  width: 100%;
  height: 1px;
  left: 0;
  top: 0;
  background-image: linear-gradient(to right, rgba(124, 100, 59, 0),rgba(124, 100, 59, 1),rgba(124, 100, 59, 0));
}

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

.scroll-top:hover{
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 2px 10px rgba(0, 0, 0, 0.75), 0 0 15px rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 0 10px rgba(255, 255, 255, 0.5);
}

.scroll-top i{
  position: relative;
  top: -4px;
}

.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 rgba(255, 255, 255, 0.5), inset 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: 0.3s;
}

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

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


/*=========================================================== M O D A L ===============================================================*/

.modal-backdrop {
  background-color: #060301;
}

.modal-backdrop.show {
  opacity: 0.9;
}

.modal {
  padding: 0 !important;
  overflow-y: auto;
}

.modal::-webkit-scrollbar {
  width: 0;
  background-color: transparent;
}

.modal::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.modal *::-webkit-scrollbar {
  width: 10px;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 5px;
}

.modal *::-webkit-scrollbar-thumb {
  background: linear-gradient(#ffda91, #ffba49);
  border: solid 2px rgba(0, 0, 0, 1);
  border-radius: 5px;
}

.modal-dialog {
  max-width: 980px;
  padding: 0 !important;
}

.modal-content {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  z-index: 1;
  border-radius: 0;
}


/* Modal Close Btn */

.modal-close-btn {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 12px;
  top: 12px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  border: none;
  color: #fff;
    font-size: 21px;
}

.modal-close-btn:before,
.modal-close-btn:after{
  width:2px;
  height:calc(100% - 20px);
  background-color: var(--white-yellow);
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  transform:rotate(45deg);
  transition:0.5s;
}

.modal-close-btn:after{
  transform:rotate(-45deg);
}

.modal-close-btn:hover:before{
  transform:rotate(135deg);
  background-color:#dc431f;
}

.modal-close-btn:hover:after{
  transform:rotate(-135deg);
  background-color:#dc431f;
}


/* Modal Header */

.modal-header {
  border: none;
  border-radius: 15px;
  background-image: linear-gradient(#222, #181818, #141414);
  padding: 1px;
  overflow: hidden;
  flex-wrap: wrap;
}

.modal-banner {
  width: 100%;
  height: auto;
  background-image: url(../img/bg/modal-banner-bg.jpg);
  background-size: cover;
  background-position: top center;
  border-radius: 15px 15px 0 0;
  padding: 15px 0 15px 0;
}

.modal-banner .modal-logo {
  width: 120px;
  display: inline-block;
  margin: 0 0 5px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 1.0));
}


.modal-title .modal-icon {
  width: 114px;
  height: 120px;
  background-image: url(../img/bg/modal-icon-bg.png);
  background-size: 100% 100%;
  color: var(--white-yellow);
  font-size: 36px;
  margin: 0 auto;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 0 15px rgba(255, 255, 255, 0.5);
}

.modal-title .title-panel {
  margin: 5px 0 0;
}

.modal-title .title {
  width: 100%;
  font-size: 24px;
  display: inline-block;
font-weight: bold;
letter-spacing: 1px;
  vertical-align:  top;
}

.modal-title .sub {
  width: 100%;
  display: inline-block;
  color: #fa404d;
  font-size: 10px;
  letter-spacing: 5px;
  vertical-align:  top;
}


/* Modal Head Panel */

.modal-head-panel {
  width: 100%;
  min-height: 34px;
  position: relative;
  margin: 45px auto 20px;
  padding: 0 30px;
}

.modal-head-panel .btn-grp button {
  width: 110px;
  height: 34px;
  margin-left: 8px;
  font-size: 12px;
}

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

.ask-link:hover {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 1), 0 0 10px rgba(255, 255, 255, 0.3);
}

.ask-link span {
  transition: 0s;
}

.ask-link .icon {
  color: var(--white-yellow);
  font-size: 14px;
  transition: 0.3s;
}

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


/* Modal Body */

.modal-body {
  width: 100%;
  background-color: #141414;
  border-radius: 10px;
  margin: 5px 0 0;
  padding: 15px 30px 15px;
}

.modal-menu {
  width: 100%;
  border-bottom: solid 2px rgba(255, 255, 255, 0.1);
  margin: 0 0 30px;
}

.modal-menu li:before {
  content: '';
  width: 1px;
  height: 14px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto 0;
  background-color: rgba(255, 255, 255, 0.1);
}

.modal-menu li:first-child:before {
  display: none;
}

.modal-menu li a {
  height: 68px;
  color: #cccccc;
  position: relative;
  transition: 0s;
}

.modal-menu li a:hover {
  color: var(--orange);
}

.modal-menu li a.active {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 1), 0 0 10px rgba(255, 255, 255, 0.25);
}

.modal-menu li a:before {
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  right: 0;
  left: 0;
  bottom: -2px;
  margin: 0 auto;
  background-image: linear-gradient(to right, rgba(235, 212, 132, 0), rgba(235, 212, 132, 1), rgba(235, 212, 132, 0));
  opacity: 0;
}

.modal-menu li a.active:before {
  opacity: 1;
}

.modal-menu li a .icon-panel {
  width: 40px;
  height: 26px;
  margin: 0 0 0 -5px;
  position: relative;
  z-index: 1;
  color: var(--white-yellow);
  transition: 0.3s;
}

.modal-menu li a:hover .icon-panel {
  color: var(--orange);
}

.modal-menu li a.active .icon-panel {
  color: rgba(0, 0, 0, 0.75);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  margin: 0 10px 0 -5px;
}

.modal-menu li a .icon-panel:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 3px;
  transform: skew(-10deg);
  background-image: linear-gradient(#ecdc9a, #9f8b44);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 1), 0 0 10px rgba(255, 255, 255, 0.3);
  z-index: -1;
  opacity: 0;
  transition: 0.3s;
}

.modal-menu li a.active .icon-panel:before {
  opacity: 1;
}


/* Form Container */

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

.form-container .form-group{
  width:100%;
  float:left;
  margin:0 0 20px;
}

.form-container .form-group:last-child{
  margin:0 0;
}

.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;
  align-items:center;
}

.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:#000000;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: none;
  border-radius: 8px;
  transition:0.3s;
  padding:0 15px;
}
.form-container .form-group input:read-only{
  color:#000000;
}
.form-container .form-group input::-webkit-input-placeholder{
  color: #333333;
}
.form-container .form-group .select-input {
  width:100%;
  height:100%;
  float:left;
  color:#000000;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  transition:0.3s;
  display:flex;
  align-items:center;
}
.form-container .form-group .select-input select{
  width:100%;
  height:48px;
  border:none;
  color:#333333;
  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: #000000;
  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:#000000;
  background-color: #ffffff;
  border: none;
  border-radius: 8px;
  transition:0.3s;
  padding:20px 18px;
  resize:none;
}
.form-container .form-group textarea::-webkit-input-placeholder{
  color:#333333;
}
.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 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.5);
  color: #fff;
  position:relative;
  z-index:1;
  overflow:hidden;
  border-radius:8px;
  transition: 0.3s;
  margin:0 0 0 5px;
}
.form-container .form-group .form-btn:hover{
  background-color:#917853;
}

/* Form Btn Group */

.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 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 5px;
  color: #ffffff;
  font-size: 12px;
  transition: 0.3s;
  padding: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.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 */

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

.form-footer button {
  width: 180px;
  height: 50px;
  margin: 0 5px;
}

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

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


/* Pagination */

.pagination {
  margin: 30px 0 0;
  justify-content: center;
}

.pagination li {
  float: left;
}

.pagination>li>a {
  width: 24px;
  height: 24px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 3px;
  border-radius: 4px;
  position: relative;
  z-index: 1;
  transition: 0.3s;
  overflow: hidden;
}

.pagination .turn-pg a {
  color: #ffffff;
  font-size: 12px;
  margin: 0 8px;
}

.pagination>li>a:hover {
  color: #ffffff;
}

.pagination .turn-pg a:hover {
  color: var(--yellow);
}

.pagination .active {
  color: var(--orange);
  border: solid 1px var(--orange);
}

.pagination .active:hover {
  color: var(--orange);
  border: solid 1px var(--orange);
}


/* BS Table */

.bs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.bs-table thead th {
  height: 50px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.25);
}

.bs-table thead th:first-child {
  border-radius: 8px 0 0 0;
}

.bs-table thead th:last-child {
  border-radius: 0 8px 0 0;
}

.with-depth thead th {
  border-radius: 8px 8px 0 0 !important;
}

.bs-table tr {
  cursor: pointer;
}

.bs-table tr td {
  height: 50px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  padding: 1px;
  transition: 0.3s;
  background-color: rgba(255, 255, 255, 0.08);
  border-bottom: solid 1px rgba(0, 0, 0, 0.25);
  border-top: solid 1px rgba(255, 255, 255, 0.05);
}

.bs-table tr:last-child td:first-child {
  border-radius: 0 0 0 10px;
}

.bs-table tr:last-child td:last-child {
  border-radius: 0 0 10px 0;
}

.bs-table tr:hover td {
  background-color: rgba(255, 255, 255, 0.05);
}

.bs-table tr.active td {
  background-color: rgba(255, 255, 255, 0.05);
}

.bs-table tr td a {
  color: #fff;
  font-size: 12px;
  transition: 0.3s;
  display: inline-block;
  vertical-align: middle;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.bs-table tr td a:hover {
  color: var(--orange);
}

.bs-table tr.active .title-td {
  color: var(--orange);
}

.bs-table tr.active td a {
  color: var(--orange);
}

.bs-table tr .count-td {
  width: 120px;
}

.bs-table tr .count-tag {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  padding: 1px 0;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  color: rgba(0, 0, 0, 0.75);
  font-weight: bold;
letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-image: linear-gradient( #e8d895, #998642);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 1), 0 0 5px rgba(255, 255, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.bs-table tr .title-td {
  text-align: left;
  padding-left: 15px;
  max-width: 590px;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bs-table tr .date-td {
  width: 20%;
  color: #f9e3c3;
}

.bs-table tr .nav-td {
  width: 40px;
}

.bs-table tr td .delete-btn {
  background-color: transparent;
  border: none;
  color: var(--white-yellow);
  font-size: 12px;
  transition: 0.3s;
}

.bs-table tr td .delete-btn:hover {
  color: var(--orange);
}

.bs-table tr td .nav-btn {
  background-color: transparent;
  border: none;
  position: relative;
}

.bs-table tr td .nav-btn i {
  position: relative;
  color: #fff;
  font-size: 10px;
  transition: 0.3s;
  transform: rotate(0deg);
}

.bs-table tr td .nav-btn:hover i {
  color: #ffca5f;
}

.bs-table tr.active td .nav-btn i {
  transform: rotate(180deg);
  top: 5px;
}

.bs-table tr td .plus-btn {
  width: 16px;
  height: 16px;
  background-color: var(--red);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  padding: 0 0 0;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.bs-table tr td .plus-btn:hover {
  background-color: #ffbb31;
}

.bs-table tr td .plus-btn:before,
.bs-table tr td .plus-btn:after {
  content: '';
  width: 2px;
  height: 50%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  background-color: #fff;
  transition: 0.3s;
}

.bs-table tr td .plus-btn:after {
  transform: rotate(90deg);
}

.bs-table tr.active td .plus-btn:before {
  height: 0;
}

.bs-table tr td .plus-btn:hover:before,
.bs-table tr td .plus-btn:hover:after {
  background-color: rgba(0, 0, 0, 0.5);
}


/* With Depth */

.with-depth tr:nth-last-child(2) td:first-child {
  border-radius: 0 0 0 10px;
}

.with-depth tr:nth-last-child(2) td:last-child {
  border-radius: 0 0 10px 0;
}

.with-depth .message-content {
  display: none;
  height: 200px;
  margin: 2px 0 5px;
}

.with-depth tr.depth-click, tr.depth-click-basic, tr.depth-click-finance, tr.depth-click-game {
  cursor: pointer;
}

.with-depth tr.dropdown,
tr.dropdown-basic,
tr.dropdown-finance,
tr.dropdown-game{
  background-color: transparent;
}

.with-depth tr.dropdown td,
tr.dropdown-basic td,
tr.dropdown-finance td,
tr.dropdown-game td {
  padding: 0;
  border: none;
  height: auto;
  box-shadow: none;
}

.with-depth .dropdown td,
tr.dropdown-basic td,
tr.dropdown-finance td,
tr.dropdown-game td {
  background-color: transparent;
  border: none;
}

.with-depth tr.dropdown:hover td,
tr.dropdown-basic:hover td,
tr.dropdown-finance:hover td,
tr.dropdown-game:hover td {
  background-color: transparent;
  border: none;
}


/* Message Content */

.message-content {
  width: 100%;
  height: 400px;
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.15), 0 -1px 0 rgba(255, 255, 255, 0.05);
  margin: 5px 0 0;
  padding: 10px;
  border-radius: 10px;
}

.message-content .inner-container {
  width: 100%;
  height: 100%;
  float: left;
  color: #fff;
  /*white-space: pre-wrap;*/
  text-align: left;
  overflow-y: scroll;
  padding: 5px 10px;
}

.modal-tab{
  width:100%;
  display:none;
  margin:0 auto;
  animation:modalTabAnim 0.5s ease 1 forwards;
}

@keyframes modalTabAnim{
  0%{opacity:0;transform:translateY(-10%);}
  100%{opacity:1;transform:translateY(0);}
}

.modal-tab.active{
  display:block;
}


/* Level Information */

.bs-table td .level-txt {
  display: inline-block;
  width: 45px;
  text-align: left;
}

.level-information{
  width:100%;
  height:80px;
  float:left;
  display:flex;
  position:relative;
  margin-bottom:10px;
  border-radius: 10px;
  background-color:rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.05), inset 0 1px 4px rgba(0, 0, 0, 0.2);
}

.level-information .container{ 
  width:auto; 
  height:100%;
  float:left;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  padding:0 20px !important;
}

.level-information .container .inner{ 
  width:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}

.level-information .container span{ 
  color:#fff;
  font-size:14px;
  white-space:nowrap;
}

.level-information .container .labels{ 
  margin-right:10px;
}

.level-information .container .amount{
  color: var(--yellow);
  font-size:18px;
  display:inline-block;
  position:relative;
  margin:0;
  vertical-align:middle;
}

.level-information .point-form{
  width:310px;
  height:100%;
  float:right;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 125px 0 5px;
  position:relative;
}

.level-information .point-form input{
  width:100%;
  height:38px;
  border-radius:1px;
  padding:0 5px;
  color:#000;
  font-size:12px;
  background-color:#ffffff;
  border:none;
  border-radius:2px;
}

.level-information .point-form input::-webkit-input-placeholder{
  color:#000;
}

.level-information .points-btn{
  width:110px;
  height:38px;
  color:#fff;
  font-size:12px;
  border:none;
  border-radius:1px;
  background-color: #d5553e;
  transition:0.3s;
  white-space:nowrap;
  position:absolute;
  right:10px;
  border-radius:2px;
}

.level-information .points-btn:hover{ 
  background-color:#ca2001;
}


/* Gamelist Modal */

.gamelistModal .modal-dialog {
  max-width: 1320px;
}

.gamelist-container {
  min-height: 400px;
  max-height: 570px;
  margin: 0 0 -10px;
  overflow-y: scroll;
  padding: 0 8px 0 0;
}

.game-btn {
  width: calc(16.66% - 16px);
  display: inline-block;
  margin: 0 8px 15px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background-color: #000;
  background-image: linear-gradient(#97663c, #58341c);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);
  padding: 2px;
}

.game-btn:hover {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 1), 0 0 10px rgba(255, 255, 255, 0.25);
}

.game-btn:before {
  width: 100%;
  height: 100%;
  transition: 0.3s;
  background: linear-gradient(#ffda91, #ffba49);
  top: 0;
  left: 0;
  opacity: 0;
}

.game-btn:hover:before {
  opacity: 1;
}

.game-btn .g-panel {
  width: 100%;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background-color: #000000;
  border: solid 1px #251b0d;
}

.game-btn .g-panel .g-img {
  transition: 0.5s;
}

.game-btn:hover .g-panel .g-img {
  opacity: 0.3;
  transform: scale(1.1);
}

.game-btn .g-panel .g-footer {
  width: 100%;
  height: 40px;
  left: 0;
  bottom: 0;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-btn .g-panel .g-footer:before {
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  margin: 0 auto;
  background-image: linear-gradient(to right, rgba(235, 212, 132, 0), rgba(235, 212, 132, 1), rgba(235, 212, 132, 0));
}

.game-btn .g-panel .g-footer .name-text {
  width: 100%;
  display: inline-block;
  overflow: hidden;
  position: relative;
  color: #fff;
}

.game-btn .g-panel .g-footer .name-text span {
  position: relative;
  transform: translateY(0);
  display: inline-block;
  transition: 0.5s;
  max-width: 96%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 auto;
}

.game-btn .g-panel .g-footer .name-text span:last-child {
  color: var(--yellow);
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(100%);
opacity: 0;
}

.game-btn:hover .g-panel .g-footer .name-text span:first-child {
  transform: translateY(-100%);
}

.game-btn:hover .g-panel .g-footer .name-text span:last-child {
  transform: translateY(0);
opacity: 1;
}

.game-btn .g-panel .play-btn {
  position: absolute;
  top: 8px;
  left: 10px;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  display: flex;
  align-items: center;
}

.game-btn .g-panel .play-btn .text {
  color: #ffffff;
  font-size: 12px;
  text-shadow: 0 1px 1px #000000, 0 0 8px rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  position: absolute;
  left: 0;
  opacity: 0;
  transition: 0.3s;
}

.game-btn .g-panel .play-btn:hover .text {
  color: var(--orange);
}

.game-btn:hover .g-panel .play-btn .text {
  opacity: 1;
}

.game-btn .g-panel .play-btn .icon {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  border-radius: 50%;
  overflow: hidden;
  border: none;
  position: relative;
  z-index: 1;
  transition: 0.3s;
  color: #fff;
}

.game-btn .g-panel .play-btn:hover .icon {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 0 10px rgba(255, 255, 255, 0.4);
}

.game-btn .g-panel .play-btn .icon:before,
.game-btn .g-panel .play-btn .icon:after {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transition: 0.3s;
  background-image: linear-gradient(rgba(0, 153, 51, 1), rgba(0, 103, 51, 1));
}

.game-btn .g-panel .play-btn .icon:after {
  background-image: linear-gradient(var(--orange), #b35b13);
  opacity: 0;
}

.game-btn:hover .g-panel .play-btn .icon:before {
  opacity: 0;
}

.game-btn:hover .g-panel .play-btn .icon:after {
  opacity: 1;
}

.game-btn:hover .g-panel .play-btn .icon {
  transform: translateX(55px) rotate(360deg);
}

.game-btn .g-panel .play-btn .icon i {
  transition: 0.3s;
}

.game-btn:hover .g-panel .play-btn .icon i {
  opacity: 0;
}

.game-btn .g-panel .play-btn .icon .hover-icon {
  position: absolute;
  opacity: 0;
}

.game-btn:hover .g-panel .play-btn .icon .hover-icon {
  opacity: 1;
}

.game-btn .loading {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 100%;
}

.gap5 {gap: 5px;}
.gap10 {gap: 10px;}
.gap15 {gap: 15px;}
.gap20 {gap: 20px;}
.fs14 {font-size: 14px;}
.fs16 {font-size: 16px;}
.fs18 {font-size: 18px;}
.dif {display: inline-flex;}

/* Login Join */

.loginModal .modal-dialog {
  max-width: 600px;
}



.captcha {display: flex;align-items: center;justify-content: space-between;gap: 5px;}
.captcha img {border-radius: 10px;    height: 50px;    min-width: 120px;}
.captcha .btn {height: 45px;display: flex;align-items: center;justify-content: center;}
.captcha i {font-size: 24px;cursor: pointer;color:#fff;}
.captcha input {border-radius: 10px;border:0;background:rgba(0,0,0,.5);color:#fff;height:45px;padding:0 10px;width:50%;    font-family: sans-serif !important; }
.captcha input::placeholder {color:#1c6aff;font-size: 14px;}



/*-------------------------------------------------------------------------------------*
*  ÆÄ¿öº¼                                                                             *
*-------------------------------------------------------------------------------------*/
.bg_game {float:left; width:100%; min-height:300px; background:url("../images/bg1.jpg") center top no-repeat; text-align:center; padding:20px 0 20px 0; margin:0 0 0 0;}

.po_info_wrap       {background:rgba(29,31,34,0.85); border-bottom:1px solid rgba(255,255,255,0.0); float:left; width:100%; padding:10px 0 10px 0; border-radius:5px;}
.po_info1           {float:left; width:100%; line-height:26px; color:#ffd800; padding:0 20px 0 20px; font-size:26px; font-weight:700;}
.po_info2           {float:left; width:100%; line-height:32px; color:#ffba00; padding:5px 20px 0 26px; font-size:22px; font-weight:700;}
.po_info3           {float:left; width:100%; line-height:20px; color:#f2f2f2; padding:5px 20px 0 26px; font-size:18px; font-weight:500; text-align:center;}

.po_title  {float:left; width:100%; height:46px; line-height:46px; font-size:20px; color:#ffffff; letter-spacing:-1pt; font-weight:600; background:url("../images/bg1.jpg") center top no-repeat; padding:0 15px 0 15px; text-align: left;}
.po_title_right {display:inline-block; width:250px; height:30px; line-height:30px; background:rgba(0,0,0,0.6); border-radius:100px; text-align:center; font-size:15px; font-weight:500; color:#00fff0;}



.po_box_wrap {float:left; width:100%; background:linear-gradient(to right, #444444 0%,  #333333 100%); padding:0 10px 0 10px; display:inline-block; border-radius:5px; cursor:pointer;
         min-width:100%; height:60px; line-height:60px; border:1px solid #000000; position:relative;}
.po_box_wrap:hover {background:linear-gradient( #555555 0%,  #111111 100%); border:1px solid rgba(255,255,255,0.1); box-shadow:0 0x 50px #ddca74;}
.po_box_wrap_on {float:left; width:100%; background:url("../images/bg_top2.jpg") center top no-repeat; background-size:100% 100%; padding:0 10px 0 10px; display:inline-block; border-radius:5px; cursor:pointer; min-width:100%; height:60px; line-height:60px; border:1px solid #f7e28f; position:relative;}


.po_box1 {float:left; width:100%; background:rgba(0,0,0,0.4); padding:5px 0 5px 0;}

.po_btn1 {display:inline-block; text-align:center; border-radius:4px; color:#ffffff; font-size:15px; letter-spacing:0pt; font-weight:600; text-shadow:1px 1px 1px rgba(0,0,0,0.3); cursor:pointer;
        background:linear-gradient(#358ee4 0%,  #2f80ce 100%); min-width:36px; height:36px; line-height:36px; border:1px solid rgba(0,0,0,0.6); padding:0 10px 0 10px; margin:11px 0 0 0;}
    
.po_btn2 {display:inline-block; text-align:center; border-radius:4px; color:#ffffff; font-size:15px; letter-spacing:0pt; font-weight:600; text-shadow:1px 1px 1px rgba(0,0,0,0.3); cursor:pointer;
        background:linear-gradient(#e91d25 0%,  #d31a22 100%); min-width:36px; height:36px; line-height:36px; border:1px solid rgba(0,0,0,0.6); padding:0 10px 0 10px; margin:11px 0 0 0;}
          
.po_btn3 {display:inline-block; text-align:center; border-radius:4px; color:#ffffff; font-size:15px; letter-spacing:0pt; font-weight:600; text-shadow:1px 1px 1px rgba(0,0,0,0.3); cursor:pointer;
        background:linear-gradient(#509b00 0%,  #468700 100%); min-width:36px; height:36px; line-height:36px; border:1px solid rgba(0,0,0,0.6); padding:0 10px 0 10px; margin:11px 0 0 0;}
      
.po_btn4 {display:inline-block; text-align:center; border-radius:4px; color:#ffffff; font-size:15px; letter-spacing:0pt; font-weight:600; text-shadow:1px 1px 1px rgba(0,0,0,0.3); cursor:pointer;
        background:linear-gradient(#666666 0%,  #777777 100%); min-width:36px; height:36px; line-height:36px; border:1px solid rgba(0,0,0,0.6); padding:0 10px 0 10px; margin:11px 0 0 0;}
      
          
.po_s_font {float:right; color:#e2e2e2; font-size:14px; font-weight:400; padding:0 0 0 10px;}

.cart_title {float:left; width:100%; height:52px; line-height:52px; font-size:18px; color:#ffffff; letter-spacing:-1pt; font-weight:700; background:rgba(0,0,0,0.4); padding:5px 15px 0 15px; background-image: linear-gradient(#261e12, #17110b);
  border-bottom: solid 1px #382913;}

.cart_box {float:left; width:100%; background:rgba(0,0,0,0.4); padding:0 0 20px 0; margin:0 0 10px 0;}
.cart_box td {color:#ffffff; font-size:14px; letter-spacing:0pt; font-weight:500; cursor:pointer;}

.cart_btn1       {background:linear-gradient(#444444 0%,  #333333 100%); width:100%; height:42px; line-height:42px; text-align:center; display:inline-block; color:#ffffff; font-size:16px; font-weight:600; text-shadow:1px 1px 1px rgba(0,0,0,0.2); border-radius:3px;
                border-top:1px solid rgba(255,255,255,0.1); border-left:1px solid rgba(255,255,255,0.1);}
.cart_btn1:hover {background:linear-gradient(#5b5b5b 0%,  #4d4d4d 100%);}

.cart_btn2       {background:linear-gradient(#a38948 0%,  #87713c 100%); width:100%; height:60px; line-height:60px; text-align:center; display:inline-block; color:#ffffff; font-size:22px; font-weight:600; text-shadow:1px 1px 1px rgba(0,0,0,0.2); border-radius:3px;
                border-top:1px solid rgba(255,255,255,0.1); border-left:1px solid rgba(255,255,255,0.1);}
.cart_btn2:hover {background:linear-gradient(#87713c 0%,  #a38948 100%);}
.input_cart  {background-color:#232323; border:1px solid #373947; width:100%; height:40px; color:#fff; padding:0 10px 0 10px; font-size:18px; border-radius:3px; text-align:right;}

.cart_bet {background:rgba(0,0,0,0.4); padding:7px 22px 7px 22px; line-height:22px; margin:0 0 3px 0; color:#b2c7c7;}  /* ÆÀ ¼±Åýà */
.cart_bet td {color:#b2c7c7;}

.black_wrap {background:rgba(0,0,0,0.8); width:100%; height:100%; position:absolute; top:0px; left:0px; border-radius:10px; text-align:center; padding:350px 0 0 0;}

.cart_r11      {background:#ff9c00; display:inline-block; text-align:center; min-width:40px; padding:8px 8px 8px 8px; line-height:12px; color:#ffffff; font-size:12px; font-weight:700; border-radius:3px;}
.cart_r22      {background:#444444; display:inline-block; text-align:center; min-width:40px; padding:8px 8px 8px 8px; line-height:12px; color:#ffffff; font-size:12px; font-weight:700; border-radius:3px;}
.cart_r33      {background:#474c79; display:inline-block; text-align:center; min-width:40px; padding:8px 8px 8px 8px; line-height:12px; color:#ffffff; font-size:12px; font-weight:700; border-radius:3px;}

.betcart_moveset {
position: absolute;
top: 13px;
right: 30px;
font-size: 12px;
}
.betcart_moveset > label { cursor: pointer; }
.betcart_moveset > label input {
vertical-align: middle;
margin: -2px 4px 0 0;
}


.check1 {float:left; width:100%; height:60px; background:rgba(0,0,0,0.8); position:absolute; z-index:9998; text-align:center; font-size:16px; letter-spacing:-1px; font-weight:500; color:#ffffff; line-height:23px; padding:8px 0 0 0;
top:0px; left:0px; border-radius:3px; margin:0 0 0 0;}

.check2 {float:left; width:100%; height:100vh; background:rgba(0,0,0,0.8); position:absolute; z-index:9998; text-align:center; font-size:26px; letter-spacing:-1px; font-weight:700; color:#ffffff; line-height:23px; padding:200px 0 0 0;
top:0px; left:0px; border-radius:3px; margin:0 0 0 0;}


.heartbeat {
  -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
          animation: heartbeat 1.5s ease-in-out infinite both;
}

@-webkit-keyframes heartbeat {
from {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}
10% {
  -webkit-transform: scale(0.91);
          transform: scale(0.91);
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}
17% {
  -webkit-transform: scale(0.98);
          transform: scale(0.98);
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}
33% {
  -webkit-transform: scale(0.87);
          transform: scale(0.87);
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}
45% {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}
}
@keyframes heartbeat {
from {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}
10% {
  -webkit-transform: scale(0.91);
          transform: scale(0.91);
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}
17% {
  -webkit-transform: scale(0.98);
          transform: scale(0.98);
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}
33% {
  -webkit-transform: scale(0.87);
          transform: scale(0.87);
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}
45% {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}
}


.main-menu li a.dropdown-item span {width: 100%;line-height: 30px;}


.realtime-menu {padding:10px}
.mp_cs {padding:20px;background: rgba(0, 0, 0, 0.4);border-radius: 8px;}
.header-section > .container {max-width:1560px}
.header-section .toplogo {margin-right:20px}
.header-section .toplogo img {height:60px}
.main--wrap > div {margin: 0px auto}
.contents-wrapper {margin-top:30px;min-height:700px}
.main--wrap > div .page_title {font-size: 24px;max-width: 100%;color: #fff;height: 70px;margin:30px auto 30px auto;position:relative;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;}
.main--wrap > div .page_title span {    color: #999;display: flex;align-items: center;justify-content: center;width: 100%;margin-top: 12px;}

.main_slide {max-width:1520px;}
.main_slide img {border-radius: 10px;width: 100%;}

.main--wrap > div .page_title:after {
  position: absolute;
  content:"";
    width: 50%;
    height: 3px;
    bottom: 33px;
    left: 50%;
    transform: translateX(-50%);
    background-image: radial-gradient(#eee, transparent, transparent);
    border-radius: 50%;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
  }

.contents-wrapper > .rounded {background-color:#222 !important}

.popup_wrap {display: flex;z-index: 99999;flex-wrap: wrap;position: absolute;left: 0;top: 7%;max-width: 100%;min-width: 1400px;width: 100%;justify-content: center;overflow-y: scroll;align-items: flex-start;}
.main_popup { min-width:450px;min-height:300px;max-width:400px;background: #111;}
.main_popup img {width:100%}
.main_popup h1 {height:40px;line-height:40px;margin-top:0px;background:rgba(0,0,0,0.3);border-radius:3px;text-align:center;font-size:16px;}
.main_popup .p_content {margin-top:0px;background:rgba(0,0,0,0.3);border-radius:0px;padding:5px;min-height: 200px;}
.main_popup .p_content p {margin: 0;}
.main_popup .pop_close {height:34px;line-height:34px;width:100%;padding:0 30px;background:#000;color:#fff;text-align:center;font-size:13px;}
.main_popup .pop_close input {-webkit-appearance: auto;-moz-appearance: auto;appearance: auto;width:15px;height:15px;vertical-align: middle;}
.main_popup .pop_close button.oneday {padding:0 10px;height:25px;line-height:25px;background:#333;color:#fff;margin-left:20px;border-radius:3px;border:0;}
.main_popup .pop_close button.close {padding:0 10px;height:25px;line-height:25px;background:#333;color:#fff;margin-left:20px;border-radius:3px;border:0;}
.main_popup figure {margin: 0;}

@media(max-width:690px){
	.popup_wrap {top:0;position: fixed;left:0;min-width:100%;padding:0;}
	.main_popup {min-width: 100%; max-width: 100%;position:fixed;left:0;top:0;overflow-y: auto;height: 100%;}
  .dropdown-toggle::after {display: none;}
  .main_slide {margin: 5px !important;}
}


.text-bg-dark {background-color: #444 !important;text-align: left;}
.text-bg-secondary {background-color: transparent;background: url(/assets/skin36/img/pattern.png)center;}
.form-control,.form-control:focus {background-color: #222;color: #fff;border: 0;outline: 0;}
.card-footer > a,.card-footer > button {width: 100%;}
.bg-dark {background-color:#1d0b17 !important}
.tab_type {display: flex;align-items: center;flex-wrap: wrap;gap: 8px;}
.tab_type a {color:#aaa;background: #444;padding: 6px 10px;    border-radius: 5px;display: inline-flex;align-items: center;justify-content: center;}
.tab_type a.active {background: #fe3e4d;color:#fff;border: 0;}
.list-group a {background: #444;border: 0;color: #eee;margin-bottom: 4px;border-radius: 8px;}
.list-group-item {background: #444;border: 0;color: #eee;}
.list-group-item .subject {
  border-bottom: 1px solid;
  border-image: linear-gradient(to left,#111,#444,#111);
  border-image-slice: 1;
  padding: 5px 0;
}
table.table th{background:#777;color: #fff;}
td.action button {font-size: 12px;}
.list_table th {color:#fff;border-bottom: 1px solid #444;}
.list_table td {background: #333;color:#fff;border-bottom: 1px solid #444;}

.d-flex {align-items: center;}

.dflexS {display: flex;align-items: center;justify-content: space-between;}
.dflexC {display: flex;align-items: center;justify-content: center;}
.dflexL {display: flex;align-items: center;justify-content: left;}
.dflexR {display: flex;align-items: center;justify-content: right;}

.mp_board {max-width: 1520px;margin: 30px auto;gap: 10px;align-items: flex-start;}
.mp_board .txt-box {background: #222;border-radius: 14px;padding: 20px;width: 40%;}
.mp_board .txt-box h4 {text-align: left;}
.mp_board .txt-box a {display: flex;align-items: center;color:#fff;height: 30px;}
.mp_board .cs-box {background: #222;border-radius: 14px;padding: 20px;width: 20%;}
.mp_board .cs-box a {background:#fa404d;border-radius: 12px;color: #fff;display: flex;align-items: center;justify-content: center; padding: 0px 0;height: 44px; margin-top: 10px;gap: 5px;}
.mp_board .cs-box a i {font-size: 18px;    display: inline-flex;}


/** 쿠폰 **/
.couponwrap {flex-wrap: wrap;gap:10px;}
.coupon-box {position: relative;width:350px;height:146px;cursor:pointer;}
.coupon-box img {position: absolute;left:0;top:0;width: 350px;}
.coupon-box .coupon-title {position: absolute;text-align:center;width: 218px;}
.coupon-box .coupon-expire {position: absolute;text-align:center;font-size:14px;font-weight:700;width: 218px;}
.coupon-box .logo {left:7px !important;top:49px;width:60px;max-width: 100%;left: inherit; filter: opacity(0.5);}

.coupon-box .coupon-title.percent {left:57px;top:22px;text-align:center;font-size:42px;font-weight:900;color:#fa404a;}
.coupon-box .coupon-expire.percent {left:57px;top:107px;color:#ff9da2;}

.coupon-box .coupon-title.money {left:72px;top:51px;text-align:center;font-size:36px;font-weight:900;color:#fa404a;letter-spacing: -1px;}
.coupon-box .coupon-expire.money {left:72px; bottom:5px;color:#fa404a;}

.coupon-box .coupon-title.point {left:0px;top:54px;text-align:center;font-size:42px;font-weight:900;color:#fa404a;width: 202px;letter-spacing: -1px;}
.coupon-box .coupon-expire.point {right:50px; top:40px;color:#ff9da2;width: 100px;}





.dropdown-menu {background:#222;padding: 0;margin-top:-14px !important;}
.dropdown-menu li {cursor: pointer;}
.dropdown-item {color:#fff;background: none;text-align: center;}
.dropdown-item:hover {background-image: none;color:#fff;background: none;border: 0;}
.dropdown-item:hover::before {background-image: none;color:#fff;}
.dropdown-toggle {position: relative;cursor: pointer;    display: flex;align-items: center;}
.dropdown-toggle::after {opacity: 1 !important;width: 10px !important;height: 10px !important;background-color: transparent !important;background-image: none !important;position: absolute;right: -0px !important;bottom: 36px !important;margin: 0 !important;left: inherit !important;}



.row {--bs-gutter-x: 0;}
button.close {    border: 0;background: none;}
/** 홀덤 **/
.holdembtn {display: flex;align-items: center;justify-content: center;position: relative;border:1px solid #222;margin:0 10px;border-image:linear-gradient(to left,#222,#aaa,#222);border-image-slice: 1;transition: 0.4s;filter: brightness(0.9);color:#bbb}
.holdembtn span.title {position: absolute;top:0;left:0;padding:10px 30px;background:repeating-linear-gradient(45deg, #212529, transparent 70px);border-radius: 0 0 16px 0px;font-size: 18px;}
.holdembtn small {position: absolute;top:40%;left:0; width:100%;background: rgba(0,0,0,0.3);font-size: 24px;padding:20px 0;color:#fff;    font-weight: 700;text-shadow: 0 1px 1px #000;}
.holdembtn:hover {filter: brightness(1.1);transform: scale(1.02);}

/** 미니게임 **/
.mini_notice {background: #282828;margin: 5px 0px;border-radius: 8px;}
.minicart {gap: 10px;}
.minicart > div {background: #282828;border-radius: 8px;gap: 10px;padding: 10px;}
.minicart > div.first {width: 60%;}
.minicart > div.first .left {gap: 10px;}
.minicart > div.first .left span {margin-right: auto;border-left: 1px solid #fff;padding-left: 20px;margin-left: 10px;}
.minicart > div.first .left input {text-align: right;padding: 10px;color: #eda916;background: #111;border: 1px solid #333;width: 70%;font-size: 18px;}
.minicart > div.first .bet-slip {margin-top: 8px;gap: 8px;}
.minicart > div.first .bet-slip > span {border-radius: 8px;padding: 0px 15px;display: flex;align-items: center;justify-content: center;height: 40px;background-color: #444;flex: 1 1;cursor: pointer;}
.minicart > div.first .bet-slip > span.cancel {background-color: #8d4046;}
.minicart > div.second {height: 117px;display: flex;align-items: center;flex-wrap: wrap;width: 20%;}
.minicart > div.second > div {width: 100%;}
.minicart > div.second > div.expectedmoney {font-size: 15px;}
.minicart > div.second > div.pick_selected {color:#eda916;}
.minicart button.betbtn {width: 20%;height: 117px;border-radius: 8px;    background: linear-gradient(0deg, #a3242e, #fe3e4d);color: #fff;border: 0;font-size: 24px;font-weight: 700;}

/** 2024-05-30 개발자가 추가 및 수정함 **/
.round-info {color: #aaa;text-align: center;padding: 10px 0 !important;    background: #282828;margin: 5px 0px;border-radius: 8px;}
.round-info-time {display: inline-block;}
.round-info-clock {display: inline-block;}
/**************************************/

/* .round-info {background:#111;color: #aaa;display:flex;align-items: center;justify-content: space-between;height:40px;} */
.round-info .round-no {color:#fff;margin-right:4px;}
.round-info .lotte-time {background:#111;border-radius: 3px;padding:3px 10px;font-size: 13px;;}
.round-info .bet-end-count {background:#fe3e4d;color:#fff;padding: 5px 20px;border-radius: 4px;margin-left:20px;}
.gametype {margin: 5px 0px 2px 0;text-align:center;padding-bottom:10px;border-radius: 8px;background: url(/assets/skin36/img/pattern.png);border: 1px solid #555;width: 49.5%;}
.gametype .page-title {display: flex;align-items: center;justify-content: center;height:34px;margin-bottom:6px}

.dflexCW {display: flex;align-items: center;justify-content: center;flex-wrap: wrap;}
/* .gametype .minibtn {min-width:25%} */
.gametype .minibtn > span.btn {width:100%;color:#fff;}

.left-pick-color {background: #7574da;}
.right-pick-color {background: #fe3e4d;}
.pick-btn-selected {background: #ffdd00 !important;color:#000 !important;}
.pick-btn:hover {background-color: #ffdd00 !important;color:#000 !important}

.btn-vio {background: #7574da;color: #fff;}
.btn-vio:hover {background: #7574da;color: #fff;}
.btn-primary {background-color: #8AB366;border-color: #8AB366;}
.btn-primary:hover {background-color: #8AB366;border-color: #8AB366;}


/** 카트 **/
.cart {height: 900px;top:44px;z-index: 99;}
.cart .page-title {background:#222;display: flex;align-items: center;justify-content: center;height:36px;margin-bottom:0px;border-radius: 3px 3px 0 0;color:#eee;}
.cart .cartbody {background: #111;font-size: 14px;color:#ccc}
.cart .cartbody input {background: #000;border: 1px solid #333;text-align: right !important;color: #ffcc00;font-size: 14px;margin-bottom:5px;}
.cart .cartbody input::placeholder {color:#ffcc00}
.cart .pick_selected {background:#000;}
.cart .expectedmoney {margin:5px 0 2px 0;}
.cart .bet-slip {background: #181818;font-size: 14px;color:#ccc;display: flex;align-items: center;flex-wrap: wrap;justify-content: center;gap: 3px;}
.cart .bet-slip span {cursor: pointer;width:23.98%;    background: #111;padding: 5px 0;margin-bottom: 3px;border: 1px solid #333;}
.cart .bet-slip span.cancel {background: #330000;}
.cart .bet-slip span:hover {filter: brightness(1.2);}

.cart .bet-slip .betbtn {width:100%;background: repeating-linear-gradient(180deg, #1265cd, transparent 70px);display: flex;align-items: center;justify-content: center;height: 40px;border: 0;color: #fff;}
.cart .bet-slip .betbtn:hover {filter: brightness(1.2);}


@media(max-width:690px){
	.fww {flex-wrap: wrap;} 
	.holdembtn {width: 100% !important;margin-bottom:5px;}
	.contents-wrapper > .row > div {padding:0 !important}
	.mini_notice {font-size: 13px;background: repeating-linear-gradient(45deg, #212529, transparent 140px);}
	.round-info {font-size: 12px;height:60px;flex-wrap: wrap;justify-content: center;gap:5px}
	.round-info .lotte-time {font-size: 12px;}
	.round-info .bet-end-count {margin-left: 0;}

	.cart {position: fixed;left:0;bottom:0;top:inherit;height:inherit;}
	.cart .page-title {display: none;}
	.cart .bet-slip {margin-bottom: 0 !important;}
	.cart .bet-slip span {width:11.74%;font-size: 13px;}
  /* .gametype .minibtn {max-width:25%} */


}

.data-changed-animation-red {
  animation: red-blink 1.4s linear;
  animation-iteration-count: 3
}

@keyframes red-blink {
  0% {
      background-color: #e985850d
  }

  50% {
      background-color: #e9858580
  }

  to {
      background-color: #e985850d
  }
}

.data-changed-animation-blue {
  animation: blue-blink 1.4s linear;
  animation-iteration-count: 3
}

@keyframes blue-blink {
  0% {
      background-color: #85c1e90d
  }

  50% {
      background-color: #85c1e980
  }

  to {
      background-color: #85c1e90d
  }
}

.list-group-item div { text-align: left;     width: 100%;overflow-y: auto;}



/**   스포츠  **/
/** 스포츠 **/
.jongmok {background:#222;gap:10px;margin-bottom: 5px;overflow-x: auto; padding:0 10px;   position: sticky;top: 0;z-index: 99;}
.jongmok button {border:0;background:none;padding:10px 0px;position: relative;    min-width: 80px;color: #eee;}
.jongmok button img {height:32px;margin-bottom:5px;}
.jongmok button small {position: absolute; right:10px;top:6px;background: #fff;color:#000;border-radius: 6px;padding:0 5px;font-size: 10px;}
.jongmok button.active {background: #333;border-radius: 4px;}
.jongmok::-webkit-scrollbar {height:10px;}
.jongmok::-webkit-scrollbar-thumb {background:#aaa}

.league_info {height:40px;background-color: #29292a;padding:0 10px;border-bottom:1px solid rgba(0,0,0,.2);}
.league_info .league_name img {height:16px;margin-right:5px;}
.spolist {border:0;width:100%;padding:0 5px}
.spolist ul {width:100%;margin:0;padding:2px 0px;gap:4px; flex-wrap: wrap;}
.spolist ul li {min-height:38px;padding:0 10px;background:#323232;color:#c7c7c7;text-align:center;border-right:1px solid rgba(0,0,0,.2);border-bottom:1px solid rgba(0,0,0,.2);position: relative;
	display: flex; align-items: center;justify-content: center;border-radius: 5px;}
.spolist li.home,.spolist li.away,.spolist li.draw {background:transparent;cursor:pointer;justify-content: space-between;border:1px solid #444;}
.spolist li.home:hover,.spolist li.away:hover,.spolist li.draw:hover {background:#444;}
.spolist li.selected:hover {background:#ffdd00;}
.spolist li.selected {background: #ffdd00;}
.spolist li.selected .teamname {color: #000;}
.spolist li.selected .odd {color: #000;}
.spolist li.time {width:14%}
.spolist li.market {width:11%}
.spolist li.home {width:33%}
.spolist li.draw,.spolist li.notbtn {width:10% !important;justify-content: center;}
.spolist li.away {width:33%}
.spolist li.more {width:5%}

.spolist li.notbtn .odd{color:#c7c7c7}
.spolist li.home .teamname {text-align: left;min-width: 50%;}
.spolist li.away .teamname {text-align: right;min-width: 50%;}
.spolist li .teamname {color:#fff}
.spolist li .teamname small {font-size: 12px;color:#fff;margin-left:4px}
.spolist li .odd {color:#e2deb8}
.spolist li.more button {background:none;border:0;width: 100%; height: 100%;}
.spolist li.more button:hover {color:#fff;}

.spolist .row-3 li.home, .spolist .row-3 li.away{width: 41.3%;}

.spolist li.home img.under,.spolist li.home img.handi {/*margin-left:auto;margin-right:3px*/}
.spolist li.away img.over,.spolist li.away img.handi {/*margin-right:auto;margin-left:3px*/}
.spolist .addgame {display:none; margin:0 0 3px 0;width:100%;}
.spolist .addgame.active {display:block}
.spolist .addgame > div {display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;background: #111;margin-bottom: 3px;padding: 0 5px;border-radius: 5px;}
.spolist .addgame .row-2 li{width:46.5%}
/* .spolist .addgame .row-3 li{width:33%} */

.spolist ul li div.lock {display:none;align-items: center;justify-content: center; background:rgba(0,0,0,0.8);position:absolute;left: 0;top:0;width: 100%;height:100%;border-radius: 3px;z-index: 1;cursor:default}
.spolist ul li div.lock i {font-size: 18px;}
.spolist ul li div.lock.active {display: flex;}
.spolist ul.row-2 li {width:46.5%}
.spolist ul.row-2 > li.btn_more,.spolist ul.row-3 > li.btn_more {width:6%;background: none;padding: 0;}
.spolist ul.row-3.inplay  {flex-wrap: nowrap;}
.spolist ul.row-3 li {width: 33.0% ;}

.domestic .moregame {background: none;border: 1px solid #000;width:50px;text-align:center;min-height: 38px;    padding: 5px 0;border-radius: 3px;background: linear-gradient(45deg, #fff, #eee);color: #000;}
.domestic .spolist {    padding: 3px 0;}
.domestic .spolist .basicgame {width:100%;display: flex;justify-content: space-between;    flex-wrap: wrap;    padding: 0 5px;background: #111;border-radius: 5px;margin-bottom: 3px;}
.domestic .spolist .timenmarket {width:21%;display: flex;align-items: center;justify-content: space-around;gap:5px}
.domestic .spolist .timenmarket span {flex:1 1;display: flex;align-items: center;justify-content: center; min-height: 38px;padding: 0 5px;border-radius: 5px;}
.domestic .spolist ul {width:79%}
.domestic .spolist li.time {width:11%}
.domestic .spolist li.domarket {width:12%}
.domestic .spolist li.home img.over,.domestic .spolist li.home img.under, .domestic .spolist li.home img.handi {margin-left:auto;margin-right:3px}
.domestic .spolist li.away img.over,.domestic .spolist li.away img.under, .domestic .spolist li.away img.handi {margin-right:auto;margin-left:3px}



.legacy .spolist li.time {width:12%}
.legacy .spolist li.market {width:11%}
.legacy .spolist li.home,.spolist li.away {width:31%}
.legacy .spolist li.draw,.spolist li.notbtn {width:10%;}
.legacy .spolist li.more {width:5%}

.legacy .spolist ul {flex-wrap: inherit;}
.legacy .spolist li.away .teamname {text-align: right;}




.sw_r .game_screen .gameinfo {padding: 0 3% !important;}
.sw_r .game_screen .team-wrap span {font-size: 1.0rem !important;}
.sw_r .game_screen .date {font-size: 12px !important;}
.inplay_wrap {position:relative;width:100%;height: calc(100vh - env(safe-area-inset-bottom) - -0px);}
.inplay_wrap .sw_l { width: calc(30% - 6px);float: left;overflow-y: auto;height: 100%;background: #222;}
.inplay_wrap .sw_l::-webkit-scrollbar {display: none;}
.inplay_wrap .sw_l .jongmok {justify-content: space-around;}
.inplay_wrap .sw_l .jongmok button {padding:10px 4px}

.inplay_wrap .sw_r {width: calc(70% - 0px);float: right;overflow-y: auto;height: 100%;margin: 0 0 10px 0;overflow-x:hidden ;    border-radius: 4px;padding:0 3px;background: #222;}

.inplay_wrap .spolist {margin-bottom:5px;}
.inplay_wrap .sw_l .spolist .setone {border-bottom: 1px solid #141414;}
.inplay_wrap .sw_l .spolist .setone.active {border-left: 4px solid #ffdd00;}
.inp_league {background-color: #333;padding: 0px 10px;border-bottom: 1px solid rgba(0,0,0,.2);}
.inp_league .league_name {margin-bottom:0px;height:36px;}
.inp_league .league_name img {height: 24px;    width: 24px;border-radius: 50%; margin-right: 5px;}
.inp_league .league_name span {margin-right: auto;}
.inp_league .league_name i {font-size: 16px;cursor: pointer;}
.setone .league_time {height:32px;padding:0 10px;border-bottom: 1px solid #313131;}
.setone .league_time .ltime {color:#fff;    display: inline-flex;align-items: center;gap: 4px;}
.setone .league_time .ltime i {color: #198754;font-size: 13px;}
.setone .more {display: flex;align-items: center;gap:4px;}
.setone .more i {font-size: 16px;cursor: pointer;color:#999;}
.setone .moregame {background: none;border:0;font-size: 12px;color: #f2dfbe;padding: 5px 0;min-width: 41px;border-radius: 4px;}
.setone .teamvsteam {margin:5px 0 0 10px; cursor: pointer;}
.setone .teamvsteam > div {display: flex;align-items: center;justify-content: left;gap:5px;height:30px;    padding-right: 10px;}
.setone .teamvsteam > div img {height:26px;}
.setone .teamvsteam .dflex4 {gap:4px;display: flex;align-items: center;justify-content: left;}
.setone .teamvsteam .hscore,.setone .teamvsteam .ascore {margin-left: auto;    background: #333;padding: 0 10px;border-radius: 3px;display: inline-flex;align-items: center;justify-content: center;height: 22px;min-width: 28px;}
.setone .statistics {display: flex;align-items: center;justify-content: left;padding:0 10px;height:30px;border-top:1px solid #333;    margin-top: 4px;}


.inplay li {padding:0 5px !important}
.inplay li img {margin:0 5px}
.itype {width: 12%;}
.itype small {margin:4px;background: #222;padding: 2px 4px;border-radius: 3px;}

.addgame .livemarket {width:19%}
.inplay .home,.inplay .away {width:32.1% !important;justify-content: center !important;}
.inplay .draw,.inplay .notbtn {width:32.1% !important;position: relative}
.inplay .wd50 {width:49.4% !important}
.inplay .notbtn small {position: absolute;bottom: 0;background: #222;padding: 2px 8px;min-width: 91px;}
.inplay .notbtn span.odd {position: absolute;top: 10px;}

.inplay .teamname small.handi {color:#83d273}
.inplay .teamname small.under {color:#6078e4}
.inplay .teamname small.over {color:#f73838}


.sw_r .game_screen { text-align:center; margin-bottom:10px;height:120px;background: linear-gradient(135deg,#152a1e,#143727,#1e3c2b);position: relative;    border-radius: 6px;}
.sw_r .game_screen > img {object-fit: cover;width: 100%;height: 100%;border-radius: 6px;    filter: brightness(0.6);}
.sw_r .game_screen .gameinfo {text-align: center;position: absolute;left:0;top:0; width: 100%;height: 100%;display: flex;align-items: center;justify-content: space-around;padding:0 15%}
.sw_r .game_screen .team-wrap {display: flex;flex-direction: column;overflow: hidden; align-items: center;justify-content: center;padding: 10px 0 0 0;border-radius: 5px;color: #fff;}
.sw_r .game_screen .team-wrap span {font-size: 1.2rem;color: #fff;font-weight: 600;}
.sw_r .game_screen .date {padding: 8px;margin: 10px 0 0 0;text-align: center;    font-size: 15px;color:#fff;}
.sw_r .game_screen .date div {color:#fff}
.sw_r .game_screen .date .gilg {color: #eccf68;text-shadow: 0 1px 1px #000;font-weight: 700;}
.sw_r .game_screen .team-wrap i {font-style: normal;color: #f30;font-weight: 900;font-size: 17px;}

.sw_r .game_screen .inplayinfo {position:absolute;left:10px;top:5px;width:100%}
.sw_r .game_screen .inplayinfo .lgwrap {display: flex;align-items: center;justify-content: left;gap:8px;height:28px;border-bottom:1px solid #aaa;width:calc( 100% - 20px )}
.sw_r .game_screen .inplayinfo .lgwrap img.flag {height:24px;width: 24px;border-radius: 50%;;}
.sw_r .game_screen .inplayinfo .lgwrap span {color:#fff;}

.sw_r .game_screen .inplayinfo .score-wrap {display: flex;align-items: center;justify-content: space-between;padding:2px 0;border-bottom:1px solid #aaa;width:calc( 100% - 20px )}
.sw_r .game_screen .inplayinfo .score-wrap .left .teaminfo {color:#fff;display: flex;align-items: center;justify-content: left;gap:8px;height:28px}
.sw_r .game_screen .inplayinfo .score-wrap .left .teaminfo img {height:22px;}
.sw_r .game_screen .inplayinfo .score-wrap .left .teaminfo span {color:#fff;}

.sw_r .game_screen .inplayinfo .score-wrap .right .scoreinfo {}
.sw_r .game_screen .inplayinfo .score-wrap .right .scoreinfo th,.sw_r .game_screen .inplayinfo .score-wrap .right .scoreinfo td {color:#fff;padding:0 5px;}
.sw_r .game_screen .inplayinfo .score-wrap .right .scoreinfo th i {color:#fff;}
.sw_r .game_screen .inplayinfo .score-wrap .right .scoreinfo th i.red {color:#c10000;}
.sw_r .game_screen .inplayinfo .score-wrap .right .scoreinfo th i.yel {color:#ffdd00;}
.sw_r .game_screen .inplayinfo .stat {display: flex;align-items: center;justify-content: left;padding: 0 10px;height: 27px;color:#fff;font-size: 11px;}


.sw_r .game_tab { display:flex;align-items: center;justify-content: left; margin-bottom:10px;border:0;background: rgba(0, 0, 0, 0.2);border-radius: 4px;padding:8px;overflow-x: auto;gap:6px}
.sw_r .game_tab button { font-size:12px; cursor:pointer;color: #f2f2f2;border: 0;background: #333;border-radius: 8px;display: inline-flex;align-items: center;justify-content: center;}
.sw_r .game_tab button:hover, .sw_r .game_tab button.active { background:#ffdd00;color:#000}
.sw_r .spolist {background: none;padding:0;}
.sw_r .spolist .tit {display: flex;align-items: center;justify-content: left;margin:15px 0 3px 10px;padding-left:10px;color: #c4c4d7;border-left:2px solid #766f62;}
.sw_r .spolist .tit i {color: #629ad9;}
.inplayex .home,.inplayex .away,.inplayex .draw ,.inplayex .notbtn {width:33.03% !important}
.inplayex .draw ,.inplayex .notbtn {justify-content: space-between !important;}
.inplayex .wd50 {width:49.7% !important}


.center_content {width: calc(100% - 610px);margin: 0px auto; padding:0 5px; height: calc(100vh - env(safe-area-inset-bottom) - -160px);}
.center_content .col-sm-9 {width:100%;min-height: 700px;margin-top:0 !important;height: 100%;overflow-y: auto;}
.center_content .col-sm-80 {width:80%;min-height: 700px;height: 100%;overflow-y: auto;}

.favwrap {background: #141516;padding:5px 10px;margin-bottom: 3px;border-radius: 4px;}
.favwrap .favsel {display: flex;align-items: center;justify-content: space-between;height:34px;cursor: pointer;}
.favwrap .favsel span {margin-right:auto;margin-left:5px}
.favwrap i {font-size: 18px;}
.favwrap i.fi-rr-icon-star {color: #ffc107;}
.favwrap .favselected {padding: 10px;background: #333;border-radius: 5px;}
.favwrap .favselected.active {background-color:#ffc90a; color: #000;}
.leaguewrap{display: none; overflow-y: auto;max-height: 290px;}
.leaguewrap.active{display: block; }


.left_lg {width:295px;background:#111;padding:0 0px;overflow-y: auto;height:100%;}
.left_lg .matchwrap {background: #141516;padding:5px 10px;margin-bottom: 3px;border-radius: 4px;}
.left_lg .matchwrap .matchsel {display: flex;align-items: center;justify-content: space-between;height:39px;cursor: pointer;border-bottom: 1px solid #333;padding-bottom: 5px;}
.left_lg .matchwrap .matchsel select {background:#222;border:1px solid #333;height:28px;border-radius: 5px;padding:0 5px;    color: #fff;}
.left_lg .matchwrap .sort_country {margin-top:5px}
.left_lg .matchwrap .sort_country .ctrywrap {background: #282724;padding: 0 8px;margin-bottom: 3px;border-radius: 6px;}
.left_lg .matchwrap .sort_country .ctry {display: flex;align-items: center;justify-content: space-between;height:40px;cursor: pointer;}
.left_lg .matchwrap .sort_country .ctry img.flag {width:24px; height: 24px;border-radius: 50%;}
.left_lg .matchwrap .sort_country .ctry span {margin-right: auto;margin-left: 10px;color:#f2f2f2;font-size: 13px;}
.left_lg .matchwrap .sort_country .ctrywrap .ctry_league {display: none;margin:0;padding:0; border-top:1px solid #333}
.left_lg .matchwrap .sort_country .ctrywrap .ctry_league li {display: flex;align-items: center;justify-content: left;height:34px;gap:5px;padding:0 10px;color: #eee;cursor: pointer;}
.left_lg .matchwrap .sort_country .ctrywrap .ctry_league li i {font-size: 16px;}


/** 베팅내역 **/
.bet--list {}
.bet--list .th {display: flex;align-items: center;justify-content: space-around;flex-wrap: wrap;background: #111;}
.bet--list .th > div {padding:6px 10px;background: #111;display: flex;align-items: center;justify-content: center; min-height: 30px;   flex: auto;}

.bet--list .inner {display: flex;align-items: center;justify-content: space-around;flex-wrap: wrap;min-height: 34px;background: #222;}
.bet--list .inner > div {padding:6px 10px;display: flex;align-items: center;justify-content: center;    flex: auto;}
.bet--list .inner > div.-teamvsteam {display: flex;align-items: center;justify-content: space-between; gap:5px}
.bet--list .-odd span {background: #000;border-radius: 4px;padding:2px 5px}

.bet--list .-one {width:12%}
.bet--list .-two {width:12%}
.bet--list .-three {width:15%}
.bet--list .-four {width:12%}
.bet--list .-five {width:12%}
.bet--list .-six {width:9%;}
.bet--list .-seven {width:9%}


.bet--list .outer {display: flex;align-items: center;justify-content: space-around;flex-wrap: wrap;background: #333;padding:5px 10px;}
.bet--list .outer > div {padding:6px 10px;background: #000;display: flex;align-items: center;justify-content: center; border-radius: 3px;}
.bet--list .outer > div span.fail {margin-left:3px}
.bet--list .success {color:#0ecf48;}
.bet--list .fail {color:#f10000;}
.bet--list .wait {color:#aaa;}

.overauto {overflow: auto;}
.btn_wrap_right {display: flex;align-items: center;justify-content: right;padding: 10px ;}

@media screen and (max-width:980px) {
	.bet--list {min-width: 600px;}
	.bet--list .th > div,.bet--list .inner > div {padding: 5px 3px;}
/* 	.-league.-one {width:50%;justify-content: left !important;background: #181818;}
	.-time.-two {width:50%;justify-content: right !important;background: #181818;}
	.-teamvsteam.-three {width: 40%;flex-wrap: wrap;gap:0 !important}
	.-teamvsteam.-three .teamname {width:100%}
	.-market.-four {width:20%}
	.-select.-five {width:20%}

 */	.bet--list .outer {padding:5px 5px;justify-content: space-between;}
	.bet--list .outer > div {margin-bottom:2px;    padding: 3px 5px;}

	.domestic .spolist .timenmarket {width:100%}
	.domestic .spolist ul {width:100%}
	.domestic .spolist ul li {width:32.4%}
	.spolist .addgame .row-2 li {width: 43.8%;}
	/* .spolist .addgame .row-3 li {width: 32.5%;} */
  .bet--list .-one,.bet--list .-four {display: none !important;}
  .bet--list .-two {width: 10%;}
  .bet--list .-three {width: 20%;}

}

.search-league {margin-bottom: 5px;}
#searchLeague {background:#111;border:1px solid #333;color:#c7c7c7;  }
#searchLeague::placeholder {color:#ccc}

/** 라이트 **/
.right_content {width: 300px;flex-shrink: 0;position: sticky;right: 0;top: 167px;background: #333;overflow-y: auto;height:100%;padding:8px;    padding: 8px;border-radius: 8px;}
.onenotice {padding:5px;}
.onenotice marquee{font-size: 13px;}
.top-info-box {border: 2px solid #373b3d;margin-bottom:5px;border-radius: 4px;}
.top-info-box .top_info1 {padding:8px;}
.top-info-box .top_info1 > div {display: flex;align-items: center;justify-content: space-between;height:26px;gap:5px;color:#ccc}
.top-info-box .top_info1 > div .name {color:#e5dfb4;margin-left:auto}
.top-info-box .top_info1 > div i {font-size: 16px;}
.top-info-box .top_info2 {background: #333;}
.top-info-box .top_info2 a {width:33.33%;display: flex;align-items: center;justify-content: center;height:26px;}
.right_content .head {height:40px;color: #fff;font-size: 14px;background: #111;padding:0 10px;}
.right_content .head a {margin-left:auto;display: flex;align-items: center;justify-content: center;gap:3px;}
.right_content .body {position: relative;}
.stake {border-top: 1px solid hsla(0,0%,100%,.03);padding: 0 6px 10px;    background: #181818;}
.stake .alldel {color:#fff;}
.stake .alldel button {background:none;border:0;color:#fff;}
.stake .bet-btn, .stake>div{margin-top: 10px;}
.stake .moneyinput {}
.stake .moneyinput input{ width: 100%;height: 35px;background:#111;text-align: right;   border: 1px solid #333;color: #fff;;padding: 0 10px;outline: 0;border-radius:4px;}
.stake .moneyinput input::placeholder {color:#ddd}
.stake .moneyinput button.cash-init {background:none;border:0;;width:40px;height:35px;display: inline-flex;align-items: center;justify-content: center;}
.stake .moneyinput button.cash-init i {color:#fff;font-size: 16px;}
.stake .moneybtn {gap:2px;margin-top:5px;    flex-wrap: wrap;}
.stake .moneybtn a,.stake .moneybtn span {height: 35px;background:linear-gradient(180deg, #ffcc00, #896806);display: flex;align-items: center;
  justify-content: center;width:32.66%;cursor: pointer;color:#000;border-radius:4px;}
.stake .moneybtn a:hover,.stake .moneybtn span:hover {filter:brightness(1.1);}
.stake .bet-btn {background: linear-gradient(0deg, #a3242e, #fe3e4d);
  height:50px;width:100%;color: #fff;border:0;display: flex;align-items: center;justify-content: center;gap:8px;font-size: 18px;border-radius: 4px;}
.stake .bet-btn i {}
.stake .bet-btn:hover {filter:brightness(1.1);}
.stake .color-beige {color:#ffdd56}
.right_content .telegram {width: 100%;display: flex;align-items: center;justify-content: space-between;padding:10px;border-radius: 2px;margin-top:5px; background: #106f98;}
.right_content .telegram i {font-size:50px;color:#69c5ec;}
.right_content .telegram img {height:55px;}
.right_content .telegram .txtwrap {margin-right:auto;margin-left:20px;border-left: 2px solid #33abdf;padding-left: 14px;color:#eee}

.hdban {margin-bottom:5px;display:block}
.hdban img {width: 100%;border-radius: 18px;}

.bet-list {max-height: calc(75px * 4);overflow-y: auto;}
.bet-list::-webkit-scrollbar {display: none;}
.bet-list-item {padding:10px;width:100%;background: #000;font-size: 11px;border-bottom:1px solid #333}
.bet-list-item > div {line-height: 18px;}
.bet-list-item .lginfo img {height:14px;margin-right:3px}
.bet-list-item button.xclose {border:0;background: none;}
.bet-list-item button.xclose i {font-size: 14px;color:#fff;}
.bet-list-item .dflexL {gap:4px;}
.bet-list-item .dflexL span {color:#fff;}
.bet-list-item .dflexL span.vs {color:#c7c7c7;}
.bet-list-item .selected {color:#e9de7d}
.bet-list-item .selected .type {color:#56fdff}
.bet-list-item .odd {color:#ffdd56}
.bet-list-item .odd-del {color:#ceb963; margin-left: auto !important; position: relative; margin-right: 5px;}
.bet-list-item .odd-del-x {width:100%; text-align:center; position: absolute; top:0; left: 0; color:#c10000;}
.bet-list-item .odd-del-x i{color:#c10000;}

.bet-bonus {flex-grow: 1;max-height: 426px;flex-shrink: 0;border-bottom: 1px solid rgba(0,0,0,.2);align-items: center;}

.bet-bonus-item {padding:10px;width:100%;background: #000;font-size: 11px;border-bottom:1px solid rgba(0, 0, 0, 0.2)}
.bet-bonus-item > div {line-height: 18px;}
.bet-bonus-item .lginfo img {height:14px;margin-right:3px}
.bet-bonus-item button.xclose {border:0;background: none;}
.bet-bonus-item button.xclose i {font-size: 14px;color:#fff;}
.bet-bonus-item .dflexL {gap:4px;}
.bet-bonus-item .dflexL span {color:#fff;}
.bet-bonus-item .dflexL span.vs {color:#c7c7c7;}
.bet-bonus-item .selected {color:#e9de7d}
.bet-bonus-item .selected .type {color:#56fdff}
.bet-bonus-item .odd {color:#ffdd56}


.limit_mount {margin: 5px auto;width: 100%;padding: 0 10px;    color: #ccc;}
.limit_mount > div {height: 24px;}
.limit_mount > div small {font-size: 12px;color:#8bc34a}


.btn_red_s {background: #a10000;color:#fff;border-radius: 3px;border: 0;padding: 2px;}


.bank_choice {padding:10px 20px;gap: 10px;flex-wrap:wrap}
.bank_choice button {border: 0;background:#000;border-radius: 8px;height: 55px;display: flex;align-items: center;justify-content: center;padding: 0 10px;box-shadow: 0 0 1px #fff;}
.bank_choice button:hover,.bank_choice button.active {background: #fff;}
.bank_choice button img {height: 40px;}
.bank_info {padding: 5px 20px;}
.bank_info .tab-pane {    text-align: left;font-size: 16px;background: rgba(0, 0, 0, 0.5);border-radius: 8px;padding: 10px;border: 1px solid #999;}
.bank_info .tab-pane > div {line-height: 30px;display: flex;align-items: center;gap: 10px;}
.fi-rr-copy-alt {cursor: pointer;color: #ff6600;}
.qrcode {padding: 10px;}
.qrcode img {height: 250px;    border-radius: 8px;}

@media screen and (max-width:980px) {
  .bank_choice {padding:10px 10px;gap: 5px;flex-wrap: wrap;}
  .bank_choice button {height: 40px;padding: 0 5px;flex: 0 23%;}
  .bank_choice button img {height: 30px;}
  .bank_info {padding: 5px 10px;}

}


.codestatus {background: #000;border-radius: 5px;padding: 0 10px;height: 32px;display: flex;align-items: center;color: #aaa;}
#recommendCode.form-control::placeholder {color:#aaa;font-size: 13px;}
.modal-header button.close {    position: absolute;right: 15px;top: 0px;color: #fff;z-index: 9;font-size: 30px;}
.modal-footer {background: #111;}
.modal-title {width: 100%;padding: 5px 0;}

.tab_content {display: none;}
.tab_content.active {display: block;}
.sort select {background: #111;border:1px solid #333;color:#ccc;height: 34px;padding: 0 20px;border-radius: 4px;}
.input-group.calendar {width: auto;}
.calendar input.datepicker {background: #111;border: 1px solid #333;border-radius: 4px 0 0 4px;padding: 0 5px;height: 32px;}
.calendar .input-group-text {background: #111;border-color: #333;color: #ccc;}
.datepicker {color:#ccc;font-size: 12px;z-index: 99999 !important;    padding: 10px;}
.datepicker table {width: 100%;text-align: center;}
.datepicker table td,.datepicker table th {padding: 4px;}
table.rcom_table th {background: #444;border-color: #333;color:#aaa}
table.rcom_table td {background: #181818;border-color: #333;color:#ccc;    word-break: break-all;}


@media screen and (max-width:980px) {
  .sort {flex-wrap: wrap;}
  .sort select {width: 100%;}
  .input-group.calendar {flex-wrap: nowrap;}
  .calendar input.datepicker {max-width: 128px;}
  table.rcom_table th,table.rcom_table td {padding: 3px;font-size: 11px;vertical-align: middle;}
  .btnsearch {width: 100%;}
}


#gameList {align-items: flex-start;gap: 8px;}
#gameList > div {  border-radius: 5px;overflow: hidden;flex: 0 0 16.1%;}
#gameList > div a {padding-bottom: 39px;position: relative;    background: #111;}
#gameList > div a img {width: 100% !important;       aspect-ratio: 4 / 3.2;object-fit: cover;}
#gameList > div a small {position: absolute;width: 100%;bottom: 0px;left: 0px;height: 34%;display: flex;    justify-content: center;align-items: end;padding-bottom: 13px;
  background: linear-gradient(rgba(27, 29, 57, 0) 0%, rgba(27, 29, 57, 0) 10%, rgba(27, 29, 57, 0.2) 20%, rgba(27, 29, 57, 0.6) 30%, rgba(27, 29, 57, 0.7) 40%, rgb(27, 29, 57) 50%, rgb(27, 29, 57) 70%, rgb(27, 29, 57) 80%, rgb(27, 29, 57) 90%, rgb(27, 29, 57) 100%)
}

@media(max-width:690px){
    #gameList {gap:3px;}
    #gameList > div {width: 32.6%;flex: inherit;}
    #gameList > div a {width:100%}

}