/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
html, body {
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic",
                "Segoe UI", Roboto, "Helvetica Neue", Arial,
                "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
  font-style: normal;
  line-height: 1.25;
  color: #fff;
  background-color: #1a1a1a;
  margin: 0;
  padding: 0;
}

/* 모든 기본 폰트 사이즈를 통일 */
body, th, td, input, select, textarea, button, 
label, span, div, p, a, li, dt, dd, strong, em {
  font-size: 0.98em;
  font-family: inherit;
  line-height: 1.25;
  color: inherit;
}

a {color: #ffffff;text-decoration: none;}
a:hover {color: #74c92d;text-decoration: none;}

/*
css site custom style
*/
.btn-elegant {
  background-color: #2E2E2E; color:#fff; }
  .btn-elegant:hover {
    background-color: #3b3b3b !important; }
  .btn-elegant:focus, .btn-elegant:active, .btn-elegant.active {
    background-color: #080808 !important; }
  .btn-elegant.dropdown-toggle {
    background-color: #2E2E2E !important; }
    .btn-elegant.dropdown-toggle:hover, .btn-elegant.dropdown-toggle:focus {
      background-color: #3b3b3b !important; }

.btn-outline-elegant {
  border: 2px solid #2E2E2E;
  color: #2E2E2E !important;
  background-color: transparent; }
  .btn-outline-elegant:hover, .btn-outline-elegant:focus, .btn-outline-elegant:active, .btn-outline-elegant:active:focus, .btn-outline-elegant.active {
    background-color: transparent;
    color: #2E2E2E;
    border-color: #2E2E2E; }

.btn-unique {
  background-color: #880e4f; color:#fff; }
  .btn-unique:hover {
    background-color: #9f105c !important; }
  .btn-unique:focus, .btn-unique:active, .btn-unique.active {
    background-color: #430727 !important; }
  .btn-unique.dropdown-toggle {
    background-color: #880e4f !important; }
    .btn-unique.dropdown-toggle:hover, .btn-unique.dropdown-toggle:focus {
      background-color: #9f105c !important; }

.btn-outline-unique {
  border: 2px solid #880e4f;
  color: #880e4f !important;
  background-color: transparent; }
  .btn-outline-unique:hover, .btn-outline-unique:focus, .btn-outline-unique:active, .btn-outline-unique:active:focus, .btn-outline-unique.active {
    background-color: transparent;
    color: #880e4f;
    border-color: #880e4f; }

.btn-dark-green {
  background-color: #388E3C; color:#fff;}
  .btn-dark-green:hover {
    background-color: #3fa044 !important; }
  .btn-dark-green:focus, .btn-dark-green:active, .btn-dark-green.active {
    background-color: #225725 !important; }
  .btn-dark-green.dropdown-toggle {
    background-color: #388E3C !important; }
    .btn-dark-green.dropdown-toggle:hover, .btn-dark-green.dropdown-toggle:focus {
      background-color: #3fa044 !important; }

.btn-outline-dark-green {
  border: 2px solid #388E3C;
  color: #388E3C !important;
  background-color: transparent; }
  .btn-outline-dark-green:hover, .btn-outline-dark-green:focus, .btn-outline-dark-green:active, .btn-outline-dark-green:active:focus, .btn-outline-dark-green.active {
    background-color: transparent;
    color: #388E3C;
    border-color: #388E3C; }

.btn-mdb-color {
  background-color: #59698D; color:#fff; }
  .btn-mdb-color:hover {
    background-color: #63759d !important; }
  .btn-mdb-color:focus, .btn-mdb-color:active, .btn-mdb-color.active {
    background-color: #3b465e !important; }
  .btn-mdb-color.dropdown-toggle {
    background-color: #59698D !important; }
    .btn-mdb-color.dropdown-toggle:hover, .btn-mdb-color.dropdown-toggle:focus {
      background-color: #63759d !important; }

.btn-outline-mdb-color {
  border: 2px solid #59698D;
  color: #59698D !important;
  background-color: transparent; }
  .btn-outline-mdb-color:hover, .btn-outline-mdb-color:focus, .btn-outline-mdb-color:active, .btn-outline-mdb-color:active:focus, .btn-outline-mdb-color.active {
    background-color: transparent;
    color: #59698D;
    border-color: #59698D; }

.btn-red {
  background-color: #D32F2F; color:#fff; }
  .btn-red:hover {
    background-color: #d74444 !important; }
  .btn-red:focus, .btn-red:active, .btn-red.active {
    background-color: #962020 !important; }
  .btn-red.dropdown-toggle {
    background-color: #D32F2F !important; }
    .btn-red.dropdown-toggle:hover, .btn-red.dropdown-toggle:focus {
      background-color: #d74444 !important; }

.btn-outline-red {
  border: 2px solid #D32F2F;
  color: #D32F2F !important;
  background-color: transparent; }
  .btn-outline-red:hover, .btn-outline-red:focus, .btn-outline-red:active, .btn-outline-red:active:focus, .btn-outline-red.active {
    background-color: transparent;
    color: #D32F2F;
    border-color: #D32F2F; }

.btn-pink {
  background-color: #ec407a; color:#fff; }
  .btn-pink:hover {
    background-color: #ee578a !important; }
  .btn-pink:focus, .btn-pink:active, .btn-pink.active {
    background-color: #cb1452 !important; }
  .btn-pink.dropdown-toggle {
    background-color: #ec407a !important; }
    .btn-pink.dropdown-toggle:hover, .btn-pink.dropdown-toggle:focus {
      background-color: #ee578a !important; }

.btn-outline-pink {
  border: 2px solid #ec407a;
  color: #ec407a !important;
  background-color: transparent; }
  .btn-outline-pink:hover, .btn-outline-pink:focus, .btn-outline-pink:active, .btn-outline-pink:active:focus, .btn-outline-pink.active {
    background-color: transparent;
    color: #ec407a;
    border-color: #ec407a; }

.btn-purple {
  background-color: #8e24aa; color:#fff; }
  .btn-purple:hover {
    background-color: #a028bf !important; }
  .btn-purple:focus, .btn-purple:active, .btn-purple.active {
    background-color: #59176b !important; }
  .btn-purple.dropdown-toggle {
    background-color: #8e24aa !important; }
    .btn-purple.dropdown-toggle:hover, .btn-purple.dropdown-toggle:focus {
      background-color: #a028bf !important; }

.btn-outline-purple {
  border: 2px solid #8e24aa;
  color: #8e24aa !important;
  background-color: transparent; }
  .btn-outline-purple:hover, .btn-outline-purple:focus, .btn-outline-purple:active, .btn-outline-purple:active:focus, .btn-outline-purple.active {
    background-color: transparent;
    color: #8e24aa;
    border-color: #8e24aa; }

.btn-deep-purple {
  background-color: #512da8; color:#fff; }
  .btn-deep-purple:hover {
    background-color: #5b32bc !important; }
  .btn-deep-purple:focus, .btn-deep-purple:active, .btn-deep-purple.active {
    background-color: #341d6c !important; }
  .btn-deep-purple.dropdown-toggle {
    background-color: #512da8 !important; }
    .btn-deep-purple.dropdown-toggle:hover, .btn-deep-purple.dropdown-toggle:focus {
      background-color: #5b32bc !important; }

.btn-outline-deep-purple {
  border: 2px solid #512da8;
  color: #512da8 !important;
  background-color: transparent; }
  .btn-outline-deep-purple:hover, .btn-outline-deep-purple:focus, .btn-outline-deep-purple:active, .btn-outline-deep-purple:active:focus, .btn-outline-deep-purple.active {
    background-color: transparent;
    color: #512da8;
    border-color: #512da8; }

.btn-indigo {
  background-color: #3f51b5; color:#fff;}
  .btn-indigo:hover {
    background-color: #4d5ec1 !important; }
  .btn-indigo:focus, .btn-indigo:active, .btn-indigo.active {
    background-color: #2b387c !important; }
  .btn-indigo.dropdown-toggle {
    background-color: #3f51b5 !important; }
    .btn-indigo.dropdown-toggle:hover, .btn-indigo.dropdown-toggle:focus {
      background-color: #4d5ec1 !important; }

.btn-outline-indigo {
  border: 2px solid #3f51b5;
  color: #3f51b5 !important;
  background-color: transparent; }
  .btn-outline-indigo:hover, .btn-outline-indigo:focus, .btn-outline-indigo:active, .btn-outline-indigo:active:focus, .btn-outline-indigo.active {
    background-color: transparent;
    color: #3f51b5;
    border-color: #3f51b5; }

.btn-blue {
  background-color: #1976D2; color:#fff; }
  .btn-blue:hover {
    background-color: #2083e4 !important; }
  .btn-blue:focus, .btn-blue:active, .btn-blue.active {
    background-color: #11508e !important; }
  .btn-blue.dropdown-toggle {
    background-color: #1976D2 !important; }
    .btn-blue.dropdown-toggle:hover, .btn-blue.dropdown-toggle:focus {
      background-color: #2083e4 !important; }

.btn-outline-blue {
  border: 2px solid #1976D2;
  color: #1976D2 !important;
  background-color: transparent; }
  .btn-outline-blue:hover, .btn-outline-blue:focus, .btn-outline-blue:active, .btn-outline-blue:active:focus, .btn-outline-blue.active {
    background-color: transparent;
    color: #1976D2;
    border-color: #1976D2; }

.btn-light-blue {
  background-color: #82B1FF; color:#fff; }
  .btn-light-blue:hover {
    background-color: #9cc1ff !important; }
  .btn-light-blue:focus, .btn-light-blue:active, .btn-light-blue.active {
    background-color: #3681ff !important; }
  .btn-light-blue.dropdown-toggle {
    background-color: #82B1FF !important; }
    .btn-light-blue.dropdown-toggle:hover, .btn-light-blue.dropdown-toggle:focus {
      background-color: #9cc1ff !important; }

.btn-outline-light-blue {
  border: 2px solid #82B1FF;
  color: #82B1FF !important;
  background-color: transparent; }
  .btn-outline-light-blue:hover, .btn-outline-light-blue:focus, .btn-outline-light-blue:active, .btn-outline-light-blue:active:focus, .btn-outline-light-blue.active {
    background-color: transparent;
    color: #82B1FF;
    border-color: #82B1FF; }

.btn-cyan {
  background-color: #00bcd4; color:#fff; }
  .btn-cyan:hover {
    background-color: #00d3ee !important; }
  .btn-cyan:focus, .btn-cyan:active, .btn-cyan.active {
    background-color: #007888 !important; }
  .btn-cyan.dropdown-toggle {
    background-color: #00bcd4 !important; }
    .btn-cyan.dropdown-toggle:hover, .btn-cyan.dropdown-toggle:focus {
      background-color: #00d3ee !important; }

.btn-outline-cyan {
  border: 2px solid #00bcd4;
  color: #00bcd4 !important;
  background-color: transparent; }
  .btn-outline-cyan:hover, .btn-outline-cyan:focus, .btn-outline-cyan:active, .btn-outline-cyan:active:focus, .btn-outline-cyan.active {
    background-color: transparent;
    color: #00bcd4;
    border-color: #00bcd4; }

.btn-teal {
  background-color: #00796b; color:#fff; }
  .btn-teal:hover {
    background-color: #009382 !important; }
  .btn-teal:focus, .btn-teal:active, .btn-teal.active {
    background-color: #002d27 !important; }
  .btn-teal.dropdown-toggle {
    background-color: #00796b !important; }
    .btn-teal.dropdown-toggle:hover, .btn-teal.dropdown-toggle:focus {
      background-color: #009382 !important; }

.btn-outline-teal {
  border: 2px solid #00796b;
  color: #00796b !important;
  background-color: transparent; }
  .btn-outline-teal:hover, .btn-outline-teal:focus, .btn-outline-teal:active, .btn-outline-teal:active:focus, .btn-outline-teal.active {
    background-color: transparent;
    color: #00796b;
    border-color: #00796b; }

.btn-green {
  background-color: #388E3C; color:#fff; }
  .btn-green:hover {
    background-color: #3fa044 !important; }
  .btn-green:focus, .btn-green:active, .btn-green.active {
    background-color: #225725 !important; }
  .btn-green.dropdown-toggle {
    background-color: #388E3C !important; }
    .btn-green.dropdown-toggle:hover, .btn-green.dropdown-toggle:focus {
      background-color: #3fa044 !important; }

.btn-outline-green {
  border: 2px solid #388E3C;
  color: #388E3C !important;
  background-color: transparent; }
  .btn-outline-green:hover, .btn-outline-green:focus, .btn-outline-green:active, .btn-outline-green:active:focus, .btn-outline-green.active {
    background-color: transparent;
    color: #388E3C;
    border-color: #388E3C; }

.btn-light-green {
  background-color: #8bc34a; color:#fff; }
  .btn-light-green:hover {
    background-color: #97c95d !important; }
  .btn-light-green:focus, .btn-light-green:active, .btn-light-green.active {
    background-color: #649130 !important; }
  .btn-light-green.dropdown-toggle {
    background-color: #8bc34a !important; }
    .btn-light-green.dropdown-toggle:hover, .btn-light-green.dropdown-toggle:focus {
      background-color: #97c95d !important; }

.btn-outline-light-green {
  border: 2px solid #8bc34a;
  color: #8bc34a !important;
  background-color: transparent; }
  .btn-outline-light-green:hover, .btn-outline-light-green:focus, .btn-outline-light-green:active, .btn-outline-light-green:active:focus, .btn-outline-light-green.active {
    background-color: transparent;
    color: #8bc34a;
    border-color: #8bc34a; }

.btn-lime {
  background-color: #afb42b; color:#fff; }
  .btn-lime:hover {
    background-color: #c3c930 !important; }
  .btn-lime:focus, .btn-lime:active, .btn-lime.active {
    background-color: #73761c !important; }
  .btn-lime.dropdown-toggle {
    background-color: #afb42b !important; }
    .btn-lime.dropdown-toggle:hover, .btn-lime.dropdown-toggle:focus {
      background-color: #c3c930 !important; }

.btn-outline-lime {
  border: 2px solid #afb42b;
  color: #afb42b !important;
  background-color: transparent; }
  .btn-outline-lime:hover, .btn-outline-lime:focus, .btn-outline-lime:active, .btn-outline-lime:active:focus, .btn-outline-lime.active {
    background-color: transparent;
    color: #afb42b;
    border-color: #afb42b; }

.btn-yellow {
  background-color: #fbc02d; color:#fff; }
  .btn-yellow:hover {
    background-color: #fbc846 !important; }
  .btn-yellow:focus, .btn-yellow:active, .btn-yellow.active {
    background-color: #d79b04 !important; }
  .btn-yellow.dropdown-toggle {
    background-color: #fbc02d !important; }
    .btn-yellow.dropdown-toggle:hover, .btn-yellow.dropdown-toggle:focus {
      background-color: #fbc846 !important; }

.btn-outline-yellow {
  border: 2px solid #fbc02d;
  color: #fbc02d !important;
  background-color: transparent; }
  .btn-outline-yellow:hover, .btn-outline-yellow:focus, .btn-outline-yellow:active, .btn-outline-yellow:active:focus, .btn-outline-yellow.active {
    background-color: transparent;
    color: #fbc02d;
    border-color: #fbc02d; }

.btn-amber {
  background-color: #ffa000; color:#fff; }
  .btn-amber:hover {
    background-color: #ffaa1a !important; }
  .btn-amber:focus, .btn-amber:active, .btn-amber.active {
    background-color: #b37000 !important; }
  .btn-amber.dropdown-toggle {
    background-color: #ffa000 !important; }
    .btn-amber.dropdown-toggle:hover, .btn-amber.dropdown-toggle:focus {
      background-color: #ffaa1a !important; }

.btn-outline-amber {
  border: 2px solid #ffa000;
  color: #ffa000 !important;
  background-color: transparent; }
  .btn-outline-amber:hover, .btn-outline-amber:focus, .btn-outline-amber:active, .btn-outline-amber:active:focus, .btn-outline-amber.active {
    background-color: transparent;
    color: #ffa000;
    border-color: #ffa000; }

.btn-orange {
  background-color: #f57c00; color:#fff; }
  .btn-orange:hover {
    background-color: #ff8910 !important; }
  .btn-orange:focus, .btn-orange:active, .btn-orange.active {
    background-color: #a95500 !important; }
  .btn-orange.dropdown-toggle {
    background-color: #f57c00 !important; }
    .btn-orange.dropdown-toggle:hover, .btn-orange.dropdown-toggle:focus {
      background-color: #ff8910 !important; }

.btn-outline-orange {
  border: 2px solid #f57c00;
  color: #f57c00 !important;
  background-color: transparent; }
  .btn-outline-orange:hover, .btn-outline-orange:focus, .btn-outline-orange:active, .btn-outline-orange:active:focus, .btn-outline-orange.active {
    background-color: transparent;
    color: #f57c00;
    border-color: #f57c00; }

.btn-deep-orange {
  background-color: #ff7043; color:#fff; }
  .btn-deep-orange:hover {
    background-color: #ff835d !important; }
  .btn-deep-orange:focus, .btn-deep-orange:active, .btn-deep-orange.active {
    background-color: #f63b00 !important; }
  .btn-deep-orange.dropdown-toggle {
    background-color: #ff7043 !important; }
    .btn-deep-orange.dropdown-toggle:hover, .btn-deep-orange.dropdown-toggle:focus {
      background-color: #ff835d !important; }

.btn-outline-deep-orange {
  border: 2px solid #ff7043;
  color: #ff7043 !important;
  background-color: transparent; }
  .btn-outline-deep-orange:hover, .btn-outline-deep-orange:focus, .btn-outline-deep-orange:active, .btn-outline-deep-orange:active:focus, .btn-outline-deep-orange.active {
    background-color: transparent;
    color: #ff7043;
    border-color: #ff7043; }

.btn-brown {
  background-color: #795548; color:#fff; }
  .btn-brown:hover {
    background-color: #896052 !important; }
  .btn-brown:focus, .btn-brown:active, .btn-brown.active {
    background-color: #49332b !important; }
  .btn-brown.dropdown-toggle {
    background-color: #795548 !important; }
    .btn-brown.dropdown-toggle:hover, .btn-brown.dropdown-toggle:focus {
      background-color: #896052 !important; }

.btn-outline-brown {
  border: 2px solid #795548;
  color: #795548 !important;
  background-color: transparent; }
  .btn-outline-brown:hover, .btn-outline-brown:focus, .btn-outline-brown:active, .btn-outline-brown:active:focus, .btn-outline-brown.active {
    background-color: transparent;
    color: #795548;
    border-color: #795548; }

.btn-grey {
  background-color: #616161; color:#fff; }
  .btn-grey:hover {
    background-color: #6e6e6e !important; }
  .btn-grey:focus, .btn-grey:active, .btn-grey.active {
    background-color: #3b3b3b !important; }
  .btn-grey.dropdown-toggle {
    background-color: #616161 !important; }
    .btn-grey.dropdown-toggle:hover, .btn-grey.dropdown-toggle:focus {
      background-color: #6e6e6e !important; }

.btn-outline-grey {
  border: 2px solid #616161;
  color: #616161 !important;
  background-color: transparent; }
  .btn-outline-grey:hover, .btn-outline-grey:focus, .btn-outline-grey:active, .btn-outline-grey:active:focus, .btn-outline-grey.active {
    background-color: transparent;
    color: #616161;
    border-color: #616161; }

.btn-blue-grey {
  background-color: #78909c; color:#fff; }
  .btn-blue-grey:hover {
    background-color: #879ca7 !important; }
  .btn-blue-grey:focus, .btn-blue-grey:active, .btn-blue-grey.active {
    background-color: #546973 !important; }
  .btn-blue-grey.dropdown-toggle {
    background-color: #78909c !important; }
    .btn-blue-grey.dropdown-toggle:hover, .btn-blue-grey.dropdown-toggle:focus {
      background-color: #879ca7 !important; }

.btn-outline-blue-grey {
  border: 2px solid #78909c;
  color: #78909c !important;
  background-color: transparent; }
  .btn-outline-blue-grey:hover, .btn-outline-blue-grey:focus, .btn-outline-blue-grey:active, .btn-outline-blue-grey:active:focus, .btn-outline-blue-grey.active {
    background-color: transparent;
    color: #78909c;
    border-color: #78909c; }

.btn-white {
  background-color: #fff; }
  .btn-white:hover {
    background-color: white !important; }
  .btn-white:focus, .btn-white:active, .btn-white.active {
    background-color: #d9d9d9 !important; }
  .btn-white.dropdown-toggle {
    background-color: #fff !important; }
    .btn-white.dropdown-toggle:hover, .btn-white.dropdown-toggle:focus {
      background-color: white !important; }

.btn-outline-white {
  border: 2px solid #fff;
  color: #fff !important;
  background-color: transparent; }
  .btn-outline-white:hover, .btn-outline-white:focus, .btn-outline-white:active, .btn-outline-white:active:focus, .btn-outline-white.active {
    background-color: transparent;
    color: #fff;
    border-color: #fff; }

.btn-black {
  background-color: #000; color:#fff; }
  .btn-black:hover {
    background-color: #0d0d0d !important; }
  .btn-black:focus, .btn-black:active, .btn-black.active {
    background-color: black !important; }
  .btn-black.dropdown-toggle {
    background-color: #000 !important; }
    .btn-black.dropdown-toggle:hover, .btn-black.dropdown-toggle:focus {
      background-color: #0d0d0d !important; }

.btn-outline-black {
  border: 2px solid #000;
  color: #000 !important;
  background-color: transparent; }
  .btn-outline-black:hover, .btn-outline-black:focus, .btn-outline-black:active, .btn-outline-black:active:focus, .btn-outline-black.active {
    background-color: transparent;
    color: #000;
    border-color: #000; }
   

    /* Gradient buttons */
.btn-gradient {
  text-decoration: none;
  color: white;
  padding: 10px 20px;
  display: inline-block;
  position: relative;
  border: 1px solid rgba(0,0,0,0.21);
  border-bottom: 4px solid rgba(0,0,0,0.21);
  border-radius: 4px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
  cursor: pointer;
}
/* Gradient - ugly css is ugly */
.btn-gradient.cyan {
  background: rgba(27,188,194,1);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(27,188,194,1)), to(rgba(24,163,168,1)));
  background: -webkit-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);
  background: -moz-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);
  background: -o-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);
  background: linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1bbcc2', endColorstr='#18a3a8', GradientType=0);
}

.btn-gradient.red{ 
  background: rgba(250,90,90,1);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(250,90,90,1)), to(rgba(232,81,81,1)));
  background: -webkit-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);
  background: -moz-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);
  background: -o-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);
  background: linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa5a5a', endColorstr='#e85151', GradientType=0 );
}
.btn-gradient.orange {
  background: rgba(255,105,30,1);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,105,30,1)), to(rgba(230,95,28,1)));
  background: -webkit-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);
  background: -moz-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);
  background: -o-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);
  background: linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);
}
.btn-gradient.blue {
  background: rgba(102,152,203,1);
  background: -moz-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(102,152,203,1)), color-stop(100%, rgba(92,138,184,1)));
  background: -webkit-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
  background: -o-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
  background: -ms-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
  background: linear-gradient(to bottom, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6698cb', endColorstr='#5c8ab8', GradientType=0 );
}
.btn-gradient.purple { 
  background: rgba(203,153,197,1);
  background: -moz-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(203,153,197,1)), color-stop(100%, rgba(181,134,176,1)));
  background: -webkit-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
  background: -o-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
  background: -ms-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
  background: linear-gradient(to bottom, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb99c5', endColorstr='#b586b0', GradientType=0 );
}
.btn-gradient.yellow {
  background: rgba(240,210,100,1);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(240,210,100,1)), to(rgba(229,201,96,1)));
  background: -webkit-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);
  background: -moz-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);
  background: -o-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);
  background: linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0d264', endColorstr='#e5c960', GradientType=0 );
}
.btn-gradient.green {
  background: rgba(130,200,160,1);
  background: -moz-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(130,200,160,1)), color-stop(100%, rgba(130,199,158,1)));
  background: -webkit-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);
  background: -o-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);
  background: -ms-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);
  background: linear-gradient(to bottom, rgba(130,200,160,1) 0%, rgba(124, 185, 149, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82c8a0', endColorstr='#82c79e', GradientType=0 );
}

.btn-gradient.red:active    {background: #E35252;}
.btn-gradient.orange:active {background: #E8601B;}
.btn-gradient.cyan:active   {background: #169499;}
.btn-gradient.blue:active   {background: #608FBF;}
.btn-gradient.purple:active {background: #BD8EB7;}
.btn-gradient.yellow:active {background: #DBC05B;}
.btn-gradient.green:active  {background: #72B08E;}

.bg-blue		{background-color:#0d6efd;}    
.bg-indigo	{background-color:#6610f2;}    
.bg-purple	{background-color:#6f42c1;}    
.bg-pink		{background-color:#d63384;}    
.bg-red		  {background-color:#dc3545;}    
.bg-orange	{background-color:#fd7e14;}    
.bg-yellow	{background-color:#ffc107;}    
.bg-green	  {background-color:#198754;}    
.bg-teal		{background-color:#20c997;}    
.bg-cyan		{background-color:#0dcaf0;}    
.bg-black	  {background-color:#000;}    
.bg-white	  {background-color:#fff;}    
.bg-gray		{background-color:#6c757d;}    
.bg-dark		{background-color:#212529;}    

.fc-blue 	{color:#0d6efd;}
.fc-indigo 	{color:#6610f2;}
.fc-purple 	{color:#6f42c1;}
.fc-pink 	{color:#d63384;}
.fc-red 	{color:#dc3545;}
.fc-orange 	{color:#fd7e14;}
.fc-yellow 	{color:#ffc107;}
.fc-green 	{color:#198754;}
.fc-teal 	{color:#20c997;}
.fc-cyan 	{color:#0dcaf0;}
.fc-white 	{color:#fff;}
.fc-gray 	{color:#6c757d;}
.fc-gray-dark {color:#343a40;}
.fc-primary {color:#0d6efd;}
.fc-secondary {color:#6c757d;}
.fc-success {color:#198754;}
.fc-info 	{color:#0dcaf0;}
.fc-warning {color:#ffc107;}
.fc-danger 	{color:#dc3545;}
.fc-light 	{color:#f8f9fa;}
.fc-dark 	{color:#212529;}

.fs-1 {font-size: calc(1.375rem + 1.5vw) !important;}
.fs-2 {font-size: calc(1.325rem + 0.9vw) !important;}
.fs-3 {font-size: calc(1.3rem + 0.6vw) !important;}
.fs-4 {font-size: calc(1.275rem + 0.3vw) !important;}
.fs-5 {font-size: 1.25rem !important;}
.fs-6 {font-size: 1rem !important;}
.fs-7 {font-size: 0.9rem !important;}

.fst-italic {font-style: italic !important;}
.fst-normal {font-style: normal !important;}
.fw-light {font-weight: 300 !important;}
.fw-lighter {font-weight: lighter !important;}
.fw-normal {font-weight: 400 !important;}
.fw-bold {font-weight: 700 !important;}
.fw-bolder {font-weight: bolder !important;}

.lh-1 {line-height: 1 !important;}
.lh-sm {line-height: 1.25 !important;}
.lh-base {line-height: 1.5 !important;}
.lh-lg {line-height: 2 !important;}  

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

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

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

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

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  background: #212129;
  /* background: rgba(30, 30, 30, 0); */
  transition: all 0.5s;
  z-index: 997;
  height: 120px;
  padding-top:45px;
}

#header.sticky {
  background: rgba(20, 20, 20, 1);
  position: fixed;
  top: 0;
  border-bottom: 1px solid rgba(255, 200, 39, 0.1);
}

#header_skin {
  /* background: #212129; */
  background: rgba(30, 30, 30, 0);
  transition: all 0.5s;
  z-index: 997;
  height: 120px;
  width:100%;
  padding-top:0px;
}

#header_skin.sticky {
  background: rgba(20, 20, 20, 1);
  position: fixed;
  top: 0;
  border-bottom: 1px solid rgba(255, 200, 39, 0.1);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar>ul>li {
  white-space: nowrap;
  padding: 10px 0 10px 22px;
}

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  font-family: "Noto Sans KR","Roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  transition: 0.3s;
  text-transform: uppercase;
  position: relative;
}

.navbar a i,
.navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-right: 5px;
}

.navbar>ul>li>a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -6px;
  left: 0;
  background-color: #5c9f24;
  visibility: hidden;
  width: 0px;
  transition: all 0.3s ease-in-out 0s;
}

.navbar a:hover:before,
.navbar li:hover>a:before,
.navbar .active:before {
  visibility: visible;
  width: 100%;
  color:#dbee31;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
  color: #fff;
}

.navbar .getstarted,
.navbar .getstarted:focus {
  padding: 8px 25px;
  margin-left: 12px;
  border-radius: 4px;
  color: #fff;
  font-weight: 400;
  font-family: "Noto Sans KR","Poppins", sans-serif;
  border: 2px solid #5c9f24;
}

.navbar .getstarted:hover,
.navbar .getstarted:focus:hover {
  color: #fff;
  background: #5c9f24;
}

.navbar .getstarted:hover:before,
.navbar li:hover>.getstarted:before {
  visibility: hidden;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 22px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
}

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

.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  color: #2a2a2a;
}

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

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

.navbar .dropdown:hover>ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover>ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: 40vh;
  background-color: rgba(17, 17, 17, 0.8);
  overflow: hidden;
  padding: 0;
}

#hero .carousel-item {
  width: 100%;
  height: 40vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  transition: 0.3;
}

#hero .carousel-item::before {
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

#hero .carousel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

#hero .carousel-content {
  text-align: center;
  padding:0 40px;
}

#hero h2 {
  color: #fff;
  margin-top: 130px;
  margin-bottom: 30px;
  font-size: 48px;
  font-weight: 700;
}

#hero h2 span {
  color: #5c9f24;
}

#hero p {
  width: 80%;
  animation-delay: 0.4s;
  margin: 0 auto 30px auto;
  color: #fff;
}

#hero .carousel-inner .carousel-item {
  transition-property: opacity;
  background-position: center top;
}

#hero .carousel-inner .carousel-item,
#hero .carousel-inner .active.carousel-item-start,
#hero .carousel-inner .active.carousel-item-end {
  opacity: 0;
}

#hero .carousel-inner .active,
#hero .carousel-inner .carousel-item-next.carousel-item-start,
#hero .carousel-inner .carousel-item-prev.carousel-item-end {
  opacity: 1;
  transition: 0.5s;
}

#hero .carousel-inner .carousel-item-next,
#hero .carousel-inner .carousel-item-prev,
#hero .carousel-inner .active.carousel-item-start,
#hero .carousel-inner .active.carousel-item-end {
  left: 0;
  transform: translate3d(0, 0, 0);
}

#hero .carousel-control-next-icon,
#hero .carousel-control-prev-icon {
  background: none;
  font-size: 30px;
  line-height: 0;
  width: auto;
  height: auto;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  transition: 0.3s;
  color: rgba(255, 255, 255, 0.5);
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hero .carousel-control-next-icon:hover,
#hero .carousel-control-prev-icon:hover {
  background: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
}

#hero .carousel-indicators li {
  cursor: pointer;
  background: #fff;
  overflow: hidden;
  border: 0;
  width: 12px;
  height: 12px;
  border-radius: 50px;
  opacity: 0.6;
  transition: 0.3s;
}

#hero .carousel-indicators li.active {
  opacity: 1;
  background: #5c9f24;
}

#hero .btn-get-started {
  font-family: "Noto Sans KR","Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 32px 12px 32px;
  border-radius: 4px;
  transition: 0.5s;
  line-height: 1;
  margin: 10px;
  color: #fff;
  animation-delay: 0.8s;
  text-transform: uppercase;
  border: 2px solid #5c9f24;
  background: #5c9f24;
}

#hero .btn-get-started:hover {
  background: #6ab82a;
  border-color: #6ab82a;
  color: #fff;
}


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

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

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

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

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

/*--------------------------------------------------------------
# Team (patched)
  - 카드 간격 축소: .row-tight 거터 사용
  - 카드 크기 확대: .img-game aspect-ratio 상향
  - 카드 시각 개선: radius / shadow / hover 미세 튜닝
  - 캡션 클래스 추가: .card-caption
--------------------------------------------------------------*/

/* 행 간격(거터) 축소: row에 row-tight 클래스를 추가해 사용 */
.row-tight {
  --bs-gutter-x: .5rem;
  --bs-gutter-y: .5rem;
}

/* 기존 */
.team {
  /* background: #1a1a1a; */
  text-align: center;
}

/* 카드 컨테이너: 살짝 더 볼드한 룩 */
.team .member {
  text-align: center;
  margin-bottom: 12px;
  position: relative;
  background: #111; 
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.team .member:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,.45);
}

/* 이미지 박스: 세로를 조금 더 키워 '조금 커진' 느낌 */
.team .img-game {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4; 
  overflow: hidden;
  background: #111;
}
.team .img-game img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* hover 오버레이 */
.team .member .member-info {
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  transition: opacity 0.2s ease, background 0.2s ease, margin 0.2s ease;
}
.team .member .member-info-content {
  margin-top: -50px;
  transition: margin 0.2s ease;
}
.team .member:hover .member-info {
  background: rgba(0, 0, 0, 0.7);
  opacity: 1;
  transition-duration: 0.4s;
}
.team .member:hover .member-info-content {
  margin-top: 0;
  transition-duration: 0.4s;
}

/* 타이틀/설명 */
.team .member h4 {
  font-weight: 500;
  margin-bottom: 2px;
  font-size: 16px;
  color: #fff;
}
.team .member span {
  font-style: italic;
  display: block;
  font-size: 13px;
  color: #fff;
}

/* 버튼/소셜 영역 */
.team .member .social {
  margin-top: 12px;                  /* 15px → 12px */
}
.team .member .social a {
  transition: color 0.3s;
  color: #fff;
}
.team .member .social a:hover {
  color: #5c9f24;
}
.team .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

/* 카드 하단 캡션(이미지 아래 제목) */
.team .card-caption {
  text-align: center;
  color: #fff;
  padding: 6px 4px 10px;
  font-size: 0.92rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  margin-top: 35px;
  font-size: 11px;
  background: #111111;
  color: #fff;
}

#footer .footer-top {
  background: #1d1d1d;
  border-top: 1px solid #2f2f2f;
  border-bottom: 1px solid #2f2f2f;
  padding: 30px 0 30px 0;
}

#footer .footer-top .footer-info {
  margin-bottom: 30px;
}

#footer .footer-top .footer-info h3 {
  font-size: 24px;
  margin: 0 0 20px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  font-weight: 700;
}

#footer .footer-top .footer-info p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: "Noto Sans KR","Roboto", sans-serif;
  color: #fff;
}

#footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #2a2a2a;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .footer-top .social-links a:hover {
  background: #5c9f24;
  color: #fff;
  text-decoration: none;
}

#footer .footer-top h4 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  position: relative;
  padding-bottom: 12px;
}

#footer .footer-top .footer-links {
  margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer-top .footer-links ul i {
  padding-right: 2px;
  color: #eee;
  font-size: 15px;
  line-height: 1;
}

#footer .footer-top .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}

#footer .footer-top .footer-links ul a {
  color: #fff;
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
}

#footer .footer-top .footer-links ul a:hover {
  color: #fff;
}

#footer .footer-top .footer-newsletter form {
  margin-top: 30px;
  background: #fff;
  padding: 6px 10px;
  position: relative;
  border-radius: 4px;
}

#footer .footer-top .footer-newsletter form input[type=email] {
  border: 0;
  padding: 4px;
  width: calc(100% - 110px);
}

#footer .footer-top .footer-newsletter form input[type=submit] {
  position: absolute;
  top: 0;
  right: -2px;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 20px;
  background: #5c9f24;
  color: #fff;
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
}

#footer .footer-top .footer-newsletter form input[type=submit]:hover {
  background: #eaeaea;
}

#footer .copyright {
  font-size: 12px;
  text-align: center;
  padding: 20px 0;
}

#footer .credits {
  padding: 10px 0;
  text-align: center;
  font-size: 13px;
  color: #fff;
}

/* Menu */
ul.menu {
	height: 1em;
	line-height: 1em;
	list-style: none;
	padding-left: 0;
}

ul.menu li {
	display: inline-block;
	border-left: solid 1px rgba(128, 128, 128, 0.2);
	padding-left: 1.25em;
	margin-left: 1.25em;
}

ul.menu li:first-child {
	border-left: 0;
	padding-left: 0;
	margin-left: 0;
}

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

.headerVisual {
  position: relative;
  background-color: black;
  height: 40vh;
  min-height: 25rem;
  max-height: 620px;
  width: 100%;
  overflow: hidden;
}

.headerVisual video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.headerVisual .container {
  position: relative;
  z-index: 2;
}

.headerVisual .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

#popModal {
  color:#000;
}

.modal-dialog {
  min-width:300px; 
  min-height:400px; 
}

#slotModal .modal-header {
  padding: 9px 15px;
  background-color: #111;
  color: #fff;
  border: 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin-top: 10px;
}

#slotModal .modal-content {
  background-color: #111;
  color: #fff;
  border-color: #999;
}

#slotModal .btn-close { color: #fff; }
#slotModal .modal-body { border: 0; }
#slotModal .modal-footer { border: 0; }


.popModal-title {
  width:100%;
  height:40px;
  font-size:1.0em;
  font-weight:400;
  padding:6px 2px;
  margin:auto;
  background: #101010;
  color:#fff;  
  border:1px solid orange;
}

.popModal-title button {
  font-size: 12px; 
}

.modal-table {
  max-width: 1400px;
}

#topbar {
  background:#000;
  height:45px;
  font-size: 0.94em;
  font-weight: 500;
}

#topbar .userid{
  font-size: 1.1em;
  font-weight: 700;
}

#topbar button {
  height:25px; font-size:0.9em; padding:0 12px; margin-left: 3px; margin-top:-2px;
}

#topbar .badge{
  color:#fff;
  padding: 4px 8px;
  font-size: 0.94em;
  font-weight: 500;
}

#topbar .login-money {
  font-size:0.9em;
  color:#fff;
}

#proc_frame {
  width:100%; margin:auto; padding:0; display:block;
}

.gradient-buttons .btn {
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0.2) 49%, rgba(0,0,0,0.15) 51%, rgba(0,0,0,0.05));
  background-repeat: repeat-x;
}

.card {
margin: 10px;
box-shadow: 0 5px 10px -2.5px;
}

.game-button {
  display: flex;
  padding: 3px;
}

.game-button .child {
  flex:1;
  text-align: center;
  margin:1px;
}

th {
  font-weight: bold;
  text-align:center;
}

.box-cover {
  display: flex;
  justify-content: space-between;
  background: #eaeaea;
  margin-bottom: 1px;
}

.box-item{
  padding: 2px 5px;
  margin: 0;
}



.w1{width:25px;}
.w2{width:44px;}
.w3{width:60px;}
.w4{width:80px;}
.w5{width:100px;}
.w6{width:120px;}

.point-detail {display: block;}

.contact-info {
  font-size:12px;
  color:#aeaeae;
  padding-left:10px;
}
.contact-info strong{
  font-size:12px;
  color:#fff;
}

#bank_info {
  font-size: 16px;
  font-weight: 400;
  color:orange;
}

#bank_info_pop {
  font-size: 16px;
  font-weight: 400;
  color:rgba(250,90,90,1);
}

header button {
  margin-left:3px;
}

.footer-box {
	border-top: 1px solid #141414;
    background: url(../images/main/footer_logos_bg.jpg) top center;
}

.footer-box .logoset {
	padding: 50px 0;
	text-align: center;
	overflow: hidden;
}

.footer-box .logoset img {
	display: inline-block;
}

.f_logo {
  float: left;
	width: 20%;
	text-align: center;	
	padding-top: 51px;
}

.tx_footer {
    text-align: center;
    color: #ffffff;
    font-weight: 100;
    font-size: 12px;
    line-height: 120%;
}

.img-game {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 6;  /* 박스 비율 (예시: 가로4 세로3) */
  overflow: hidden;
  background-color: #000; /* 이미지 로딩 전 배경 */
  border-radius: 15px; /* 필요시 */
  background: linear-gradient(45deg, #F48ACE 0%, #493A97 100%);
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1), box-shadow 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

.img-game img {
  position: absolute;
  inset: 3px;             /* top, right, bottom, left 각각 3px 간격 */
  border-radius: 13px;     /* 부모보다 살짝 작게 */
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

.img-game:hover img {
  transform: scale(1.05); /* 살짝 확대 효과 (선택사항) */
}

.navbar ul li a span{
  color:#fff;  
  font-size:xx-small;
  margin-right:5px;
}






.game-name {
  font-size:0.9em;
  font-weight: 100;
  color:#fff;
  margin:-10px 0 20px 0;
}

.footer img {
  width: calc(100% / 8);
}

.lendingListBOS {
  font-size: 22px;
  font-weight: 500;
  line-height: 28px;
  text-align: center;
  color: #fff;
  padding: 0 0 5px;
  margin: 0 ;
  width: 100%
}

.game-categories {
  width: 100%;
  position: relative;
}

.category__list {
  width:100%;
  align-items: center;
  background-color: #040309; 
  margin: 0;
  padding: 5px 10px;
}

.category__name {
  white-space: nowrap
}

.category__item {
  align-items: center;
  align-self: stretch;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: auto
}

.category__item:first-child {
  padding-left: 0
}

.category__link {
  border-radius: 30px;
  color: #fff;
  display: flex;
  font-size: 12px;
  font-weight: 600;
  justify-content: center;
  letter-spacing: .01em;
  line-height: 15px;
  margin: 0 5px;
  outline: none;
  padding: 10px 8px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .3s ease;
  width: auto
}

.category__link:active,.category__link:focus,.category__link:hover {
  cursor: pointer;
  outline: none;
  text-decoration: none
}

.category__link:hover {
  color: #fff;
  background: radial-gradient(circle at 5% -70%,rgba(255,99,239,.7) 6.25%,rgba(30,106,220,.406) 61.98%,rgba(39,245,134,.7) 100%),#2dfff2;
}

.category__link.category__link--current {
  background: radial-gradient(circle at 5% -70%,rgba(255,99,239,.7) 6.25%,rgba(30,106,220,.406) 61.98%,rgba(39,245,134,.7) 100%),#2dfff2;
}

.category__link .font-icons {
  font-size: 14px;
  margin-right: 8px
}

.category__icon {
  display: inline-block;
  height: 14px;
  margin: 0 5px 0 0;
  vertical-align: top;
  width: auto
}

#category__mobile, #category__web {
  display: none;
}

/* .category__link .a:hover {
  background: radial-gradient(circle at 5% -70%,rgba(255,99,239,.7) 6.25%,rgba(30,106,220,.406) 61.98%,rgba(39,245,134,.7) 100%),#2dfff2
} */

.mobile-container {
  max-width:1000px;
  padding-bottom:2px;
}

.form-id, .form-pw {
  width:150px;
  height:26px;
  font-size: 12px;
  border-radius: 10px;
  outline: none;
  border:none;
  padding-left: 10px;
  margin-right:6px;
  color: #eee;
  background-color: rgb(31, 32, 44);
}

#pop-box {
  font-size:12px;
  color:#fff;
}

#popModal{z-index:99991}
#alertModal{z-index:99999}

.input_money {
  height:30px;  
  width:110px;
  vertical-align: middle;
}

.bank_message {
  font-size: 12px;
  line-height: 150%;  
}

/* 팝업창 스크롤바의 폭 너비 */
.form-box::-webkit-scrollbar {
  width: 10px;  
}

.form-box::-webkit-scrollbar-thumb {
  background: rgb(58, 56, 56); /* 스크롤바 색상 */
  border-radius: 10px; /* 스크롤바 둥근 테두리 */
}

.form-box::-webkit-scrollbar-track {
  background: rgba(37, 30, 37, 0.1);  /*스크롤바 뒷 배경 색상*/
}

/*툴팁 스타일*/
a.tip {
  position: relative;
}

a.tip span {
  display: none;
  position: absolute;
  top: -30px;
  left: 30px;
  width: 150px;
  padding: 5px 8px;
  z-index: 100;
  background: #000;
  color: #fff;
  text-align: left;
}

a:hover.tip span {
  display: block;
}  

.form-input {
  font-size:12px;
  width: 100%;
  height: 28px;
  border-radius: 0.25rem ;
  vertical-align: middle;
}

.form-input-wbtn {
  font-size:12px;
  width: 70%;
  float: left;
  height: 28px;
  border-radius: 0.25rem ;  
  vertical-align: middle;
}

.form-control.wbtn2 {
  width: 70%;
  float: left;
  border-radius: 0.25rem ;  
  vertical-align: middle;
}

span .wbtn2 {
  width: 30%;
  float: left;
}

.align-left {
  float: left;
}

.mo-menubar-box {
  width:100%;height:45px;
}
.mo-menubar-box .first {
  float:left;height:45px;width:50%;
}
.mo-menubar-box .second {
  float:left;height:45px;
}

.img_bright_10 {
  filter: brightness(10%)
}
.img_bright_30 {
  filter: brightness(30%)
}
.img_bright_50 {
  filter: brightness(50%)
}
.img_bright_70 {
  filter: brightness(70%)
}

.skin_layer {
  width:100%;
  background-color: #0d0d0d;
  padding:0;
  margin:0;
} 

modal-nav > .modal-nav.nav-tabs{
    border: none;
    color:#fff;
    background:#272e38;
    border-radius:0;
}

modal-nav > div a.modal-nav-item.nav-link{
    border: none;
    padding: 8px 3px;
    color:#fff;
    background:#272e38;
    border-radius:0;
}

a.modal-nav-item.nav-link.active {
    border: none;
    padding: 8px 3px;
    color:#fff;
    background:#272e38;
    border-radius:0;
}

.tab-content{
    background: #fdfdfd;
    line-height: 25px;
    border: 1px solid #ddd;
    border-top:5px solid #3c8ce7;
    border-bottom:5px solid #d7dbdf;
    padding:20px 20px;
}

modal-nav > div a.modal-nav-item.nav-link:hover,
modal-nav > div a.modal-nav-item.nav-link:focus,
modal-nav > div a.modal-nav-item.nav-link.active {
    border: none;
    background: #500303;
    color:#fff;
    border-radius:0;
    transition:background 0.20s linear;
} 


/* 공통 컨테이너: 항상 가운데 정렬 + 화면보다 넓어지지 않도록 */
.app-main {
  /* 기본 최대폭: 100% (필요 시 클래스에서 덮어씀) */
  --app-main-max: 100%;
  /* 실제 폭: 화면 100% 또는 설정된 최대폭 중 더 작은 값 */
  width: min(100%, var(--app-main-max));
  /* 수평 가운데 정렬 */
  margin-inline: auto;
  /* 좌우 여백(반응형) – 좁은 화면에서 붙지 않게 */
  padding-inline: clamp(12px, 3vw, 20px);
}

/* 메뉴별 최대폭 설정(필요한 것만 추가하세요) */
.app-main.w-800  { --app-main-max: 800px; }
.app-main.w-1000 { --app-main-max: 1000px; }
.app-main.w-1100 { --app-main-max: 1100px; }
.app-main.w-1200 { --app-main-max: 1200px; }
.app-main.w-1300 { --app-main-max: 1300px; }
.app-main.w-1400 { --app-main-max: 1400px; }
.app-main.w-1600 { --app-main-max: 1600px; }

/* 나머지 스타일은 그대로 사용 */
.app-content-header {
  padding: 15px 0 10px 0;
}
.app-content-header .menu-title {
  padding-top: 6px;
  font-size: 1.3em;
  font-weight: 500;
}
.app-content-body {
  font-size: 1em;
  min-height: 500px;
  padding: 20px 25PX;
  margin: 0 0 10px 0;
  background: #282828;
  border-radius: 10px;
}

/* 레거시 브라우저(아주 구형) 대응: width:min() 미지원 시 대체 */
@supports not (width: min(100%, 1000px)) {
  .app-main { width: 100%; max-width: var(--app-main-max); }
}


/* 상단우측 현재메뉴표시 */
.breadcrumb-item + .breadcrumb-item {
    padding-left: 0.3rem;
    padding-right: 0.2rem;
}

.breadcrumb-item a {
  letter-spacing: -1px;
  word-spacing:1px;
}

.breadcrumb-item+.breadcrumb-item::before {
  color: #aaa;
}

/*
custom table css
cus_table01 클래스 네이밍 적용
사용: <table class="cus_table01">...</table>
*/
.cus_table01 {
  width: 100%;
  max-width: 100%;
  /* table-layout: fixed;*/
  box-sizing: border-box;
  border-collapse: separate;
  border-spacing: 0;}

/* thead 헤더 셀에도 보더 적용 */
.cus_table01 thead th {
  border-top: 1px solid #dce1ee;
  border-left: 1px solid #dce1ee;
  border-right: 1px solid #dce1ee;
  border-bottom: 1px solid #dce1ee;
}

/* 맨 왼쪽 헤더 셀의 좌측 보더 */
.cus_table01 thead th:first-child {
  border-left: 1px solid #dce1ee;
}

/* 셀 패딩 */
.cus_table01 th,
.cus_table01 td {
  overflow-wrap: anywhere;  /* 너무 긴 토큰(연속 영문/숫자) 강제 줄바꿈 */
  word-break: keep-all;     /* 한글은 글자 단위로 안 잘리게 */
  padding: 6px 15px;
  font-size: 0.9em;
}

/* 헤더 */
.cus_table01 thead th {
  background: #f8f9fd;
  color: #161616;
  text-align: left;
}

/* 바디 셀 보더 */
.cus_table01 tbody td {
  border-right: 1px solid #dce1ee;
  border-bottom: 1px solid #dce1ee;
}
.cus_table01 tbody td:first-child {
  border-left: 1px solid #dce1ee;
}

/* 테이블 스타일2 */
.cus_table02 table.table {
	margin-bottom: initial;
}
.cus_table02 table.table th,
.cus_table02 table.table td {
	vertical-align: middle;
	padding: 8px 12px;
  font-size: 0.9em;
}
/* .cus_table02 table.table td:not(td table td) {
	height: 38px;
} */
.cus_table02 table.table .panel {
  font-size: 0.9em;
	vertical-align: middle;
	word-break: keep-all;
	background-color: #ced4da;
	font-weight: 600;
}

/* ============================
  cus_table02 전용 폼 컨트롤
  ============================ */
.cus_table02 table.table input.form-control,
.cus_table02 table.table select.form-control,
.cus_table02 table.table textarea.form-control,
.cus_table02 table.table {
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #ced4da;
  background-color: #fff;    /* 흰 배경 */
  color: #495057;            /* 글자색 */
}

/* Hover & Focus 시 강조 */
.cus_table02 table.table input.form-control:focus,
.cus_table02 table.table select.form-control:focus,
.cus_table02 table.table textarea.form-control:focus {
  border-color: #80bdff;
  background-color: #fdfefe;
  box-shadow: 0 0 2px rgba(0,123,255,.25);
  outline: none;
}

/* 비활성화 상태 */
.cus_table02 table.table input.form-control:disabled,
.cus_table02 table.table select.form-control:disabled,
.cus_table02 table.table textarea.form-control:disabled {
  background-color: #e9ecef;
  opacity: 1;
  color: #6c757d;
}

/* ============================
  cus_table02 전용 input width 규격
  ============================ */

/* 자동폭 (내용에 따라 늘어남) */
.cus_table02 table.table input.normal {
  width: auto;
  /* min-width: 100px;  */
}

/* 짧은 길이 (예: 코드, 숫자 등) */
.cus_table02 table.table input.short {
  max-width: 120px;
}

/* 중간 길이 (일반 텍스트 입력) */
.cus_table02 table.table input.middle {
  max-width: 200px;
}

/* 긴 길이 (예: 이메일, 주소 일부) */
.cus_table02 table.table input.long {
  max-width: 300px;
}

/* 100% 꽉 차는 길이 */
.cus_table02 table.table input.full {
  width: 100%;
  box-sizing: border-box; /* padding 포함 */
}

/* td 내의 form-control + 버튼/셀렉트 등을 한 줄로 */
.table td .form-inline-group {
  display: inline-flex;
  align-items: center;
  gap: 3px; /* 간격 */
  width: 100%;
}

.table td .form-inline-group .form-control {
  flex: 1 1 auto;    /* 가능한 공간 차지 */
  min-width: 0;      /* flex 아이템 수축 허용 */
}

.table td .form-inline-group .btn {
  flex: 0 0 auto;    /* 버튼은 고정 */
  white-space: nowrap;
}

/* Bootstrap 5용 커스텀 form-inline 대체 */
.form-control,
.form-select,
.input-group {
  font-size:0.86em;         /* 글자 크기 ↓ */
  border: var(--bs-border-width) solid var(--bs-gray-500);
  border-radius: var(--bs-border-radius-sm);
}

.input-group input, .input-group button, .input-group select {
  border:0;
}
.input-group button {
  border-radius: 0;
}

.form-inline { 
  display: flex; 
  flex-wrap: wrap;       /* 좁아지면 자동 줄바꿈 */
  align-items: center; 
  gap: .5rem;            /* 컨트롤 간격 */
}
.form-inline .form-control,
.form-inline .form-select,
.form-inline .input-group {
  width: 100%;           /* 100% 확장을 막고 내용폭으로 */
}
.form-inline .btn { white-space: nowrap; }
.form-inline .form-label { margin-bottom: 0; } /* 수직 정렬 보정 */

/* === form-inline 컴팩트 프리셋 === */
.form-inline.form-compact{
  gap:.3rem;               /* 컨트롤 간격 축소 (.5rem → .375rem) */
  align-items:end;           /* 라벨/컨트롤 하단 정렬(옵션) */
  /* --ctl-width:12rem;         기본 너비(원하면 여기서 조정) */
}
.form-inline.form-compact .form-label{
  margin-bottom:0;
  font-size:.875rem;         /* 14px 정도(기본 16px 기준) */
}
.form-inline.form-compact .form-control,
.form-inline.form-compact .form-select,
.form-inline.form-compact .input-group-text{
  width:var(--ctl-width);    /* 기본 너비 ↓, 필요시 w-auto로 덮어쓰기 */
}
.form-inline.form-compact .input-group{
  width:var(--ctl-width);
}
.form-inline.form-compact .btn{
  font-size:0.95em;
  padding:.25rem .6rem;
  line-height:1.25;
  /* 또는 버튼은 그냥 .btn-sm 사용해도 OK */
}

/* 폭을 내용에 맞출 컨트롤은 w-auto로 예외 처리 */
.form-inline.form-compact .w-auto{
  width:auto !important;
}
.form-control, .form-control:focus {
    box-shadow: none;
}
.flatpickr-input {  
  cursor: pointer;
}

/* =========================================================
   Button Color System (AdminLTE/Bootstrap .btn 확장)
   - 공통 속성은 한 번만 선언
   - 각 색상 클래스는 변수만 지정
   - 활성(pressed) 시 배경과 그림자 색을 일관되게 사용
   ========================================================= */

/* 공통 인터랙션: 그림자와 active 효과 */
.btn {
  padding: 0.35em 0.95em;
  font-size: 0.9em;
  font-weight: 600;
  color: #ffffff;
  border-radius: 4px;

  /* 개별 색상 클래스에서 아래 변수들을 세팅합니다. */
  --btn-bg: #6c757d;
  --btn-shadow: #5a6268;
  --btn-active: #5a6268;
  background-color: var(--btn-bg);
  box-shadow: 0 1px 0 var(--btn-shadow);
}
.btn:active,
.btn.active {
  box-shadow: 0 0 0 var(--btn-shadow);
  background-color: var(--btn-active);
}
/* Hover = Active 색상 */
.btn:hover,
.btn:focus {
  background-color: var(--btn-active);
  box-shadow: 0 0 0 var(--btn-shadow);
  color: #ffffff; /* 대비 보정 */
}

/* =========================================================
   Palette (색상 코드 정리)
   - 각 색상은 bg/shadow/active 3종을 명시
   - 가독성이 떨어질 수 있는 색(예: lime)은 필요시 .text-dark 등으로 오버라이드 권장
   ========================================================= */

/* dark */
.btn.dark {
  --btn-bg: #222;
  --btn-shadow: #3f4449;
  --btn-active: #3f4449;
}

.btn.danger {
  --btn-bg: #e84253 !important;  
  --btn-shadow: #e04342;
  --btn-active: #e04342;
}

.btn.success {
  --btn-bg: #088080 !important ;
  --btn-shadow: #006666; 
  --btn-active: #006666;
}

.btn.info {  
  --btn-bg: #3a9ed3  !important;
  --btn-shadow: #1f63a0;  /* bg보다 15~20% 어둡게 */
  --btn-active: #1f63a0;
}

.btn.primary {
  --btn-bg: #277dcb;
  --btn-shadow: #1f63a0;  /* bg보다 15~20% 어둡게 */
  --btn-active: #1f63a0;
}

.btn.warning {
  --btn-bg: #dc890f;
  --btn-shadow: #aa6704;  /* bg보다 15~20% 어둡게 */
  --btn-active: #aa6704;
  
}

/* Blue */
.btn.blue {
  --btn-bg: #277dcb;
  --btn-shadow: #1f63a0;  /* bg보다 15~20% 어둡게 */
  --btn-active: #1f63a0;
}

/* Green (원본이 약간 틴트 차이가 있었음 → 계열 유지) */
.btn.green {
  --btn-bg: #49898e;
  --btn-shadow: #3c6f72;
  --btn-active: #3c6f72;
}

/* Red */
.btn.red {
  --btn-bg: #fa5a5a;
  --btn-shadow: #e04342;
  --btn-active: #e04342;
}

/* Purple */
.btn.purple {
  --btn-bg: #cb99c5;
  --btn-shadow: #ad83a8;
  --btn-active: #ad83a8;
}

/* Cyan */
.btn.cyan {
  --btn-bg: #7fccde;
  --btn-shadow: #73b9c9;
  --btn-active: #73b9c9;
}

/* Yellow */
.btn.yellow {
  --btn-bg: #f0d264;
  --btn-shadow: #d1b757;
  --btn-active: #d1b757;
  color: #000; /* 대비 확보 */
}

/* Orange */
.btn.orange {
  --btn-bg: #ff914d;
  --btn-shadow: #e67d44;
  --btn-active: #e67d44;
}

/* Pink */
.btn.pink {
  --btn-bg: #ff69b4;
  --btn-shadow: #e35a9f;
  --btn-active: #e35a9f;
}

/* Teal */
.btn.teal {
  --btn-bg: #008080;
  --btn-shadow: #006666;
  --btn-active: #006666;
}

/* Lime (가독성 주의: 필요 시 .text-dark 사용 권장) */
.btn.lime {
  --btn-bg: #a3ff00;
  --btn-shadow: #8cc600;
  --btn-active: #8cc600;
  color: #000; /* 대비 확보 */
}

/* Brown */
.btn.brown {
  --btn-bg: #8b4513;
  --btn-shadow: #6e350d;
  --btn-active: #6e350d;
}

/* Gray */
.btn.gray {
  --btn-bg: #808080;
  --btn-shadow: #666666;
  --btn-active: #666666;
}

/* Light Gray */
.btn.light-gray {
  --btn-bg: #adacac;
  --btn-shadow: #8f8f8f;
  --btn-active: #8f8f8f;
}

/* Navy */
.btn.navy {
  --btn-bg: #001f3f;
  --btn-shadow: #00142b;
  --btn-active: #00142b;
}

/* Olive */
.btn.olive {
  --btn-bg: #808000;
  --btn-shadow: #666600;
  --btn-active: #666600;
}

/* Maroon */
.btn.maroon {
  --btn-bg: #800000;
  --btn-shadow: #660000;
  --btn-active: #660000;
}

/* Indigo */
.btn.indigo {
  --btn-bg: #2d1d85;
  --btn-shadow: #3621ac;
  --btn-active: #3621ac;
}

/* Gold */
.btn.gold {
  --btn-bg: #ffd700;
  --btn-shadow: #ccac00;
  --btn-active: #ccac00;
  color: #000; /* 대비 확보 */
}

/* Silver */
.btn.silver {
  --btn-bg: #c0c0c0;
  --btn-shadow: #9a9a9a;
  --btn-active: #9a9a9a;
  color: #000; /* 대비 확보 */
}

/* Sky */
.btn.sky {
  --btn-bg: #87ceeb;
  --btn-shadow: #6ca8c0;
  --btn-active: #6ca8c0;
  color: #222;
}

/* Coral */
.btn.coral {
  --btn-bg: #ff7f50;
  --btn-shadow: #cc6540;
  --btn-active: #cc6540;
}

/* Violet */
.btn.violet {
  --btn-bg: #8a2be2;
  --btn-shadow: #6d22b5;
  --btn-active: #6d22b5;
}

/* Turquoise */
.btn.turquoise {
  --btn-bg: #40e0d0;
  --btn-shadow: #33b3a6;
  --btn-active: #33b3a6;
  color: #000; /* 대비 확보 */
}

.btn.btn-lg {
  padding: 0.5em 1.2em;
  font-size: 0.9em;
}

.btn.mini {
  padding: 0.3em 0.8em;
  font-size: 0.9em;
}

.btn.minimum {
  padding: 3px 12px;
  font-size: 0.8em;
}

.badge-primary {
  padding: 4px 10px;
  background-color:#277dcb !important;    
}
.badge-danger {
  padding: 4px 10px;
  background-color:#e84253 !important;    
}
.badge-success {
  padding: 4px 10px;
  background-color:#03a787 !important;
}
.badge-info {
  padding: 4px 10px;
  background-color:#3a9ed3 !important;
}
.badge-coral {
  padding: 4px 10px;
  background-color:#ff7f50 !important;
}
.popup-container-center {
  text-align: center; 
  padding-bottom: 10px; 
}


/* user-color */	
.color-level-0  {	color: #7f8c8d !important; border-color: #7f8c8d !important;}
.color-level-1  {	color: #3f51b5 !important; border-color: #3f51b5 !important;}
.color-level-2  {	color: #49898e !important; border-color: #49898e !important;}
.color-level-3  {	color: #94771f !important; border-color: #94771f !important;}
.color-level-4  {	color: #d27000 !important; border-color: #d27000 !important;}
.color-level-5  {	color: #28af94 !important; border-color: #28af94 !important;}
.color-level-6  {	color: #49898e !important; border-color: #49898e !important;}
.color-level-7  {	color: #9B59B6 !important; border-color: #9B59B6 !important;}
.color-level-8  {	color: #de2641 !important; border-color: #de2641 !important;}
.color-level-9  {	color: #23bd12 !important; border-color: #23bd12 !important;}
.color-level-10 {	color: #23bd12 !important; border-color: #23bd12 !important;}

.bg-level-0  {	background: #7f8c8d !important;}
.bg-level-1  {	background: #3f51b5 !important;}
.bg-level-2  {	background: #49898e !important;}
.bg-level-3  {	background: #94771f !important;}
.bg-level-4  {	background: #d27000 !important;}
.bg-level-5  {	background: #28af94 !important;}
.bg-level-6  {	background: #49898e !important;}
.bg-level-7  {	background: #9B59B6 !important;}
.bg-level-8  {	background: #de2641 !important;}
.bg-level-9  {	background: #23bd12 !important;}
.bg-level-10 {	background: #23bd12 !important;}
.bg-level-99 {	background: #3f4449 !important;}
.bg-level-100 {	background: #7f8c8d !important;}
.bg-level-1,.bg-level-2,.bg-level-3,.bg-level-4,.bg-level-5,
.bg-level-6,.bg-level-7,.bg-level-8,.bg-level-9,.bg-level-10, .bg-level-99	{	text-shadow: 0 0 1px rgba(0, 0, 0, 0.7); color: #FFFFFF;}

/* 폰트컬러 커스텀 */
.font-blue    { color: #5a97c8; }
.font-green   { color: #49898e; }
.font-red     { color: #fa5a5a; }
.font-purple  { color: #cb99c5; }
.font-cyan    { color: #7fccde; }
.font-yellow  { color: #f0d264; }
.font-orange  { color: #f39c12; } /* 주황 (경고, 포인트 강조) */
.font-pink    { color: #e91e63; } /* 핑크 (포인트, 버튼) */
.font-lime    { color: #cddc39; } /* 라임 (밝은 포인트) */
.font-teal    { color: #009688; } /* 틸 (차분한 느낌, 서브포인트) */
.font-indigo  { color: #3f51b5; } /* 인디고 (신뢰감, 메뉴/링크) */
.font-brown   { color: #795548; } /* 브라운 (텍스트 보조, 중후한 톤) */
.font-gray    { color: #7f8c8d; } /* 중간 회색 (설명글, 비활성화 텍스트) */
.font-black   { color: #2c3e50; } /* 진한 검정 (메인 타이틀, 헤더) */
.font-silver  { color: #bdc3c7; } /* 밝은 회색 (보조 텍스트, 구분선) */
.font-navy    { color: #001f3f; } /* 네이비 (신뢰, 안정감) */


.btn.search {width:100px;}
.btn.mini-search {width:90px;}

/* 버튼넓이 */
.btn.ws-40  , .form-control.ws-40 , .form-select.ws-40  {width:40px;}
.btn.ws-50  , .form-control.ws-50 , .form-select.ws-50  {width:50px;}
.btn.ws-60  , .form-control.ws-60 , .form-select.ws-60  {width:60px;}
.btn.ws-70  , .form-control.ws-70 , .form-select.ws-70  {width:70px;}
.btn.ws-80  , .form-control.ws-80 , .form-select.ws-80  {width:80px;}
.btn.ws-90  , .form-control.ws-90 , .form-select.ws-90  {width:90px;}
.btn.ws-100 , .form-control.ws-100, .form-select.ws-100 {width:100px;}
.btn.ws-110 , .form-control.ws-110, .form-select.ws-110 {width:110px;}
.btn.ws-120 , .form-control.ws-120, .form-select.ws-120 {width:120px;}
.btn.ws-130 , .form-control.ws-130, .form-select.ws-130 {width:130px;}
.btn.ws-140 , .form-control.ws-140, .form-select.ws-140 {width:140px;}
.btn.ws-150 , .form-control.ws-150, .form-select.ws-150 {width:150px;}
.btn.ws-160 , .form-control.ws-160, .form-select.ws-160 {width:160px;}
.btn.ws-170 , .form-control.ws-170, .form-select.ws-170 {width:170px;}
.btn.ws-180 , .form-control.ws-180, .form-select.ws-180 {width:180px;}
.btn.ws-190 , .form-control.ws-190, .form-select.ws-190 {width:190px;}
.btn.ws-200 , .form-control.ws-200, .form-select.ws-200 {width:200px;}
.btn.ws-210 , .form-control.ws-210, .form-select.ws-210 {width:210px;}
.btn.ws-220 , .form-control.ws-220, .form-select.ws-220 {width:220px;}
.btn.ws-230 , .form-control.ws-230, .form-select.ws-230 {width:230px;}
.btn.ws-240 , .form-control.ws-240, .form-select.ws-240 {width:240px;}
.btn.ws-250 , .form-control.ws-250, .form-select.ws-250 {width:250px;}

/* 영역이용위한 투명버튼 */
.btn-transparent {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.btn-transparent:hover {
  color: #0056b3;
  background-color: rgba(0, 0, 0, 0.05);
}

/* ========== Base: Mobile (≤768) ========== */

/* ================================
  Mobile Navigation (merged & cleaned)
  - 모바일(≤768px): topbar 숨김, main-nav 상단 고정
  - 햄버거 클릭 시 .navbar-mobile 슬라이드 인
  - 기존 스타일 유지 + 전환 애니메이션/접근성 보완
   ================================ */

/* 데스크톱: 햄버거 숨김 */
.mobile-nav-toggle { 
  color:#fff; font-size:2em; cursor:pointer; display:none; line-height:0; transition:.5s; 
}
.mobile-nav-toggle.bi-x { color:#5c9f24; }

/* 아이콘 앞 여백 */
.navbar-mobile ul li .bi { margin-right:1em; }

/* 모바일 패널 (기본 숨김 + 슬라이드 준비) */
.navbar-mobile {
  /* 기존 값 살림 */
  position: fixed;
  overflow: hidden;
  top: 60px; left: 0; right: 0; bottom: 0;
  background: #181818;
  z-index: 999;
  padding: 10px;

  /* 전환용 설정 */
  display: none;                 /* 닫힐 때는 화면에서 제거 */
  transform: translateX(100%);   /* 오른쪽 밖 대기 */
  transition: transform .3s ease;
}

/* 열렸을 때: 보이게 + 슬라이드 인 */
.navbar-mobile.open {
  display: block;
  transform: translateX(0);
}

/* 패널 내부 상단 타이틀/로그인 구역 */
.navbar-mobile .navbar-title { padding:15px 10px; font-size: 1.1em; text-align: center; }
.navbar-mobile .navbar-login { text-align:left; padding:15px 2px; }

/* 패널 내 닫기(X) 아이콘 위치/스타일 */
.navbar-mobile .mobile-nav-toggle {
  color:#fff; font-size:35px; cursor:pointer; line-height:0; transition:.5s;
  position:absolute; top:15px; right:-10px;
}

/* 메뉴 리스트: 전체 높이 스크롤 */
.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  padding: 10px;
  background-color: #282828;
  overflow-y: auto;
  transition: .3s;
  list-style: none;
}

/* 링크 기본/호버 */
.navbar-mobile a,
.navbar-mobile a:focus {
  padding:10px 20px;
  font-size:15px;
  color:#fff;
  text-decoration:none;
}
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
  color:#5c9f24;
  font-size:16px;
}

/* 1뎁스 아이템 구분선 */
.navbar-mobile > ul > li {
  white-space: nowrap;
  padding: 3px 0;
  border-bottom: 1px solid #444444;
}

/* before 장식 비활성 */
.navbar-mobile a:hover:before,
.navbar-mobile li:hover>a:before,
.navbar-mobile .active:before { visibility: hidden; }

/* 시작 버튼 강조 */
.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
  margin:15px;
  color:#5c9f24;
  padding-left:15px;
}

/* 드롭다운(필요 시 유지) */
.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0 0 30px rgba(127,137,161,.25);
}
.navbar-mobile .dropdown ul li { min-width:200px; }
.navbar-mobile .dropdown ul a { padding:10px 20px; }
.navbar-mobile .dropdown ul a i { font-size:12px; }
.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a { color:#5c9f24; }
.navbar-mobile .dropdown > .dropdown-active { display:block; }

.mobile-nav-toggle { display: block; }
.navbar ul { display: none; }

.logo { width: 70%; }

#topbar { visibility: hidden; }        /* 필요 시 display:none 권장 */
#nav_login_btn { visibility: hidden; } /* 필요 시 display:none 권장 */

#header {
  height: 60px;
  min-height: 60px;
  padding-top: 0;
}

/* hero */
#hero h2 { font-size: 28px; }          /* 기존 max-width:768 규칙을 기본값으로 흡수 */
#hero p { width: 100%; }               /* 데스크탑에서 60%로 축소 예정 */
#hero .carousel-control-prev,
#hero .carousel-control-next { width: 10%; } /* 데스크탑에서 5%로 축소 예정 */

/* icons */
.category__icon {
  height: 18px;          /* 기본값(모바일) 제안 */
  margin-right: 8px;
}

/* ========== Tablet (≥768px) ========== */
@media (min-width: 768px) {
  /* 필요 시 타이포 키우기 */
  #hero h2 { font-size: 32px; }

  .category__icon {
    height: 22px;
    margin-right: 10px;
  }
}

/* ========== Desktop (≥1024px) ========== */
@media (min-width: 1024px) {
  /* 네비게이션 전개 */
  .mobile-nav-toggle { display: none; }
  .navbar ul { display: flex; } /* flex 기반 메뉴 */

  /* 상단 바/로그인 버튼 노출 */
  #topbar { visibility: visible; }        /* 공간 확보 필요 없으면 display:block */
  #nav_login_btn { visibility: visible; } /* 공간 확보 필요 없으면 display:block */

  /* hero 레이아웃 조정 */
  #hero p { width: 60%; }
  #hero .carousel-control-prev,
  #hero .carousel-control-next { width: 5%; }
}

/* ========== Wide (≥1632px) ========== */
@media (min-width: 1632px) {
  .category__icon { height: 30px; }
}

/* =======================================
   2-Line Fixed Header (Topbar + Main Nav)
   ======================================= */

#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: #111;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 윗줄: 로그인/유저 정보 */
#topbar {
  height: 50px;
  background: #000;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 14px;
}

/* 아랫줄: 메인 네비게이션 */
.main-nav {
  height: 60px;
  background: #181818;
}

/* 로고 */
.logo-top {
  height: 70px;
  padding: 10px;
}

.logo-top-mobile {
  max-height:70px;margin:4px 4px;
}
.logo-top-pc {
  max-height:70px;margin:4px 4px;
}

.logo-bottom-m {max-height:70px;margin:4px 8px;}
.logo-bottom-p {max-height:70px;margin:4px 8px;}


/* 메뉴 */
.navbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 1rem;
}

.navbar a {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}

.navbar a:hover {
  color: #ffc107;
}

/* 모바일 네비게이션 토글 버튼 */
.mobile-nav-toggle {
  display: none;
  font-size: 26px;
  color: #fff;
  cursor: pointer;
}

/* 반응형: 모바일에서 상단 고정 단순화 */
@media (max-width: 768px) {
  #topbar {
    display: none; /* 모바일에서는 로그인 정보 줄 숨김 */
  }
  .navbar ul {
    display: none;
    flex-direction: column;
    background: #111;
    position: absolute;
    top: 60px;
    right: 0;
    left: 0;
    padding: 1rem;
  }
  .mobile-nav-toggle {
    display: block;
  }
}

/* 금액선택 버튼 그룹 */
.money-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* 버튼 기본 크기 조정 */
.money-btn-group .btn {
  min-width: 80px;
  flex: 1 1 auto; /* 공간에 맞게 늘어남 */
}

/* 모바일(≤768px): 세로 배치 */
@media (max-width: 768px) {
  .money-btn-group {
    flex-direction: column; /* 버튼 세로 정렬 */
    align-items: stretch;   /* 폭 100% */
  }
  .money-btn-group .btn {
    width: 100%;
    flex: none;
  }
}

/* ==========================
  입금내역 헤더 (검색폼 + 정보)
  ========================== */

.deposit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* 검색폼 내부: PC 기본 가로 배치 */
#search-form form {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}

/* 메인페이지 공지/입금/출금 박스 */
#main-dashboard .main-box {
  background: #1e1e1e;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  color: #fff;
  min-height: 250px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#main-dashboard .main-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 12px rgba(0,0,0,0.5);
}

#main-dashboard h5 {
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 8px;
  font-size: 1.1em;
}

#main-dashboard .main-box {
  background: #1e1e1e;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  color: #fff;
  min-height: 280px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#main-dashboard .main-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 12px rgba(0,0,0,0.5);
}

#main-dashboard h5 {
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 8px;
  margin-bottom: 12px;
  font-size: 1.05em;
}

/* ===========================
  공통 리스트 스타일
=========================== */
.list-wrap {
  list-style: none;
  margin: 0;
  padding: 0 10px;
}
.list-wrap li {
  display: table;
  width: 100%;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  padding: 6px 0;
  font-size: 1em;
  color: #fff;
}
.list-wrap li:last-child {
  border-bottom: none;
}

/* ===========================
  2칸짜리 (공지사항)
=========================== */
.notice-list li {
  display: table;
  table-layout: fixed; /* 폭 균등 분배 */
  width: 100%;
}
.notice-list li span {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notice-list .subject {
  width: 70%;
  text-align: left;
}
.notice-list .date {
  width: 30%;
  text-align: right;
  color: #bbb;
  font-size: 0.95em;
}

/* ===========================
  3칸짜리 (입금/출금 내역)
=========================== */
.bank-list li {
  display: table;
  table-layout: fixed; /* 셀 폭 균등하게 */
  width: 100%;
}
.bank-list li span {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 칸별 폭 설정 */
.bank-list .user {
  width: 30%;
  text-align: left;
}
.bank-list .amount {
  width: 30%;
  text-align: center;
  font-weight: 600;
}
.bank-list .date {
  width: 40%;
  text-align: right;
  color: #bbb;
  font-size: 0.95em;
}

/* ===========================
  반응형 (모바일에서도 동일)
=========================== */
@media (max-width: 768px) {
  .notice-list li, .bank-list li {
    display: table;
    table-layout: fixed;
  }
}

/* 모바일 (≤768px): 세로 배치 + 순서 전환 */
@media (max-width: 768px) {
  /* 1) topbar 숨김 */
  .topbar { display: none !important; }

  .breadcrumb { display: none !important; }

  /* 2) .main-nav 가 최상단으로 */
  .main-nav {
    position: sticky;     /* 헤더 최상단에 붙도록 */
    top: 0;
    z-index: 1030;
    background: var(--bs-body-bg, #111);
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  /* 3) 데스크톱 메뉴는 감추고 햄버거만 표시 */
  #navbar ul { display: none !important; }
  #navbar .mobile-nav-toggle {
    display: inline-block;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    margin-left: 12px;
  }

  /* 레이아웃 자잘한 간격 */
  #header .container { gap: .5rem; }
  
   /* 본문이 헤더에 가리지 않도록 (fixed-top/ sticky 높이에 맞춰 조정 필요시) */
  body { scroll-padding-top: 60px; }

  .deposit-header {
    flex-direction: column;       /* 위아래로 배치 */
    align-items: stretch;         /* 폭 100% */
  }

  #search-form {
    order: 1;                     /* 검색폼을 먼저 */
    width: 100%;
    margin-bottom: 0.75rem;
  }

  #padding-info {
    order: 2;                     /* padding-info를 아래로 */
    text-align: left;
  }

  /* 검색폼 내부요소를 세로 배치 */
  #search-form form {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  #search-form input,
  #search-form select,
  #search-form button {
    width: 100%;
  }

  #list-paging-info {
    padding-bottom: 8px;
  }
  .app-main { 
    padding:2px;
  }

  .app-content-body {
    font-size: 1em;
    min-height: 500px;
    padding: 10px 5PX;
    margin: 0 0 10px 0;
    background: #282828;
    border-radius: 4px;
  }
}

.memo-subject {
  padding-top: 2px;
  /* background: white; */
  padding:5px;
}
.memo-content {
  display: none;
  margin-top: 8px;
  padding-top: 3px;
  background: #ccc;
}

.board_view {
  line-height: 1.6;
}


/* 알림팝업 폰트지정 */
.alertify .ajs-dialog {
    max-width: 400px;
    background-color: #fff;
}



/* 베팅리스트관련 */
.betlist td{
  font-size: 0.87rem;
}
.betlist .thumbnail {
  width: 80px;
  height: 45px;
  object-fit: cover;
}
.betlist .table_slim td {padding:3px 4px;margin:0;height:22px;font-size: 0.85rem}
.betlist .table_slim2 td {padding:3px 4px;margin:0;height:22px;font-size: 0.85rem}
.s_dice {width:28px;border:0 solid #999; margin:2px;} 
.s_card {width:20px;border:1px solid #999; margin:2px;vertical-align: middle; border:0px;}
.s_card_l {width:36px;border:1px solid #999; margin:2px;vertical-align: middle; border:0px;}
.b_card {width:50px;border:1px solid #999;}
.b_card_l {width:80px;border:1px solid #999;}

/* ===============================
  테이블 셀 공통
=============================== */
td.col-thumb {
  text-align: center;              /* 텍스트 기반 가운데 정렬 */
  vertical-align: middle;          /* 세로 중앙정렬 */
  padding: 6px 8px;
}

/* ===============================
  썸네일 박스: 가운데 정렬용 flex
=============================== */
.thumb {
  display: flex;
  justify-content: center;
  align-items: center;             /* 이미지 수직·수평 중앙 */
  width: 80px;                    /* 고정 or 반응형으로 조정 */
  height: 50px;                    /* aspect-ratio와 함께 사용 가능 */
  overflow: hidden;
  border-radius: 6px;
  background: #2b2f36;             /* 로딩 전 배경 */
  position: relative;
}

/* 비율 고정: CLS 방지 (선택적) */
.ratio-4x3 {
  aspect-ratio: 4 / 3;
}

/* 스켈레톤 효과 */
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ===============================
  썸네일 이미지
=============================== */
.thumb img {
  max-width: 100%;
  /* max-height: 100%; */
  object-fit: cover;              /* 비율 유지하면서 꽉 채움 */
  opacity: 0;                     /* 처음엔 안보이게 */
  transition: opacity 0.3s ease;
}

/* 로딩 완료 시 페이드인 */
.thumb.is-loaded img { opacity: 1; }