/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  --background-color: #070920;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --accent-color: #e76317;
  --surface-color: #eeeeee;
  --contrast-color: #eeeeee;
  --nav-color: #e5eaee;
  --nav-hover-color: #ff4a17;
  --nav-mobile-background-color: #141313;
  --nav-dropdown-background-color: #141313;
  --nav-dropdown-color: #444444;
  --nav-dropdown-hover-color: #ff4a17;
  scroll-behavior: smooth;
}

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;
}

/* =========================================================
   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.btn-xlg {
  padding: 0.8em 1.2em;
  font-size: 1em;
}


.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.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;}

/*--------------------------------------------------------------
# SKIN-4 CUSTUM STYLE
--------------------------------------------------------------*/
/* body.start-page {
  background-image: url("/assets/images/texture-vector4.jpg");
  background-color: #000;  
  background-repeat: repeat;
}

#top-visual {
  background-image: url("/dist/assets/images/top_bg01.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left top;
} */

.menu-title-mo { scroll-margin-top: 64px; }
.mobile-navbar-toggle {
  font-size:2em;
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  background-color:#070920;
  padding: 2px 0;  
  z-index: 997;  
}
.header .mobile {
  background-color:#070920;
}
.header .bi-list {
  font-size: 1.8em;
  margin-right: 2px;
}

#header {
  transition: background-color 0.3s ease;
  background-color: transparent;
}
#header.scrolled {
  background-color: rgba(0,0,0,0.5);
  backdrop-filter: blur(6px);
}

/* 기본(PC) 환경: 전체 표시 */
#top-visual .top-visual-left,
#top-visual .top-visual-center,
#top-visual .top-visual-right {
  display: block;
}
#top-visual .top-visual-center {
  text-align: center;
  color: #fff;
  font-weight: 600;
  line-height: 150%;
}

#top-visual .top-visual-center p {
  padding-top: 20px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 150%;
}


/* 공통 컨테이너: 항상 가운데 정렬 + 화면보다 넓어지지 않도록 */
.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;
}
.menu-title-mo {
  padding-bottom:10px;
  font-size: 1.2em;
  font-weight: 600;
}

/* 상단우측 현재메뉴표시 */
.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;
}
/* 모바일 (≤799px): 세로 배치 + 순서 전환 */
@media (max-width: 799px) {
  .app-content-header,
  .app-content-body {
    padding: 15px 8px;
  }
  .breadcrumb { display: none !important; }
}


/*--------------------------------------------------------------
# Navigation Menu (PC 기본)
--------------------------------------------------------------*/
.navmenu-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2px;
}
/* 왼쪽 메뉴: 공지, 고객센터, 쪽지 */
.navmenu-menu-l {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  width: 540px;
}
/* 오른쪽 메뉴: 마이페이지, 로그인, 가입 */
.navmenu-menu-r {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  width: 540px;
}
/* 중앙 로고 영역 */
.navmenu-menu-logo {
  flex: 0 0 180px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 로고 이미지 공통 */
.navmenu-menu-logo img {
  height: auto;
  width: auto;
  max-width: 120px;
  max-height: 120px;
  object-fit: contain;
  display: block;
}

/*--------------------------------------------------------------
# 모바일 레이아웃 (<= 767px)
--------------------------------------------------------------*/
@media (max-width: 767px) {
  /* 네비 전체 줄 높이 & 패딩 조정 */
  .navmenu-wrap {
    position: relative;    /* 로고 절대 위치 기준 */
    padding: 0 4px;
    height: 56px;          /* 헤더 높이 고정 */
  }
  /* 왼쪽 영역: 햄버거 버튼만 남기기 */
  .navmenu-menu-l {
    width: auto;           /* 고정 520px 제거 */
    flex: 0 0 auto;
  }
  /* 햄버거 버튼(#menuBtn)은 보이게 */
  #menuBtn {
    display: block;
  }
  /* 왼쪽 버튼 그룹(공지/고객센터/쪽지)은 모바일에서 숨김 */
  .navmenu-menu-l .navimenu-itmes {
    display: none;
  }
  /* 오른쪽 메뉴 그룹 전체 숨김 (마이페이지/로그인/가입) */
  .navmenu-menu-r {
    display: none;
  }
  /* 중앙 로고: 화면 기준 딱 정중앙 고정 */
  .navmenu-menu-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    /* 원래: translate(-50%, -50%) 에서 X축을 조금 더 왼쪽으로 */
    transform: translate(-55%, -50%);
    flex: none;
    width: auto;
    height: 50px;
  }
  /* 모바일 로고 이미지 크기 고정 (새로고침 해도 동일) */
  .navmenu-menu-logo img {
    height: 50px;
    max-height: 50px;
    min-width: 60px;
    margin-left:-20px;    
    padding-bottom: 5px;
  }
}

/* 한줄공지영역 */
.scroll_area_box { width:100%; background:#0a182f; }
.scroll_area {
  width:100%; max-width:1000px; height:40px;
  padding-top:10px; margin:0 auto; overflow:hidden;
  color:#fff; background:#0a182f;  /* 배경 통일 */
}

/* 마퀴 컨테이너 */
.marquee { position:relative; overflow:hidden; }

/* 트랙: 아이템들을 가로로 나열하고 무한 스크롤 */
.marquee__track {
  display:inline-flex;
  align-items:center;
  gap: 40px;              /* 항목 간 간격 */
  white-space:nowrap;
  will-change: transform;
  animation: marquee-scroll var(--mq-duration, 40s) linear infinite;
}

/* 커스텀 태그 mqnotice 기본 표시 */
mqnotice { display:inline-block; }

/* 링크 스타일 */
mqnotice a { color:#fff; text-decoration:none; }
mqnotice a:hover { text-decoration:underline; }

/* 애니메이션: 바로 오른쪽에서 시작 → 왼쪽으로 진행 → 절반(-50%) 이동 시 무한 반복 */
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* 2회차까지 포함된 트랙의 절반 너비만큼 이동 */
}

/* 호버 시 일시정지 */
.marquee:hover .marquee__track { animation-play-state: paused; }

/* 모바일 최적화 */
@media (max-width: 799px) {
  .scroll_area { max-width:100vw; padding:8px 5px; }
  .marquee__track { gap: 28px; }
  /* 모바일에선 조금 더 빠르게 */
  .marquee__track { animation-duration: var(--mq-duration-mobile, 20s); }
}

/*--------------------------------------------------------------
# Games (벤더목록, 게임목록)
--------------------------------------------------------------*/
.provider-list {
  width: 100%;
  /* max-width: 1400px; */
  /* border: 2px solid orange; */
}

/*--------------------------------------------------------------
# Games (벤더목록, 게임목록)
--------------------------------------------------------------*/
.games {
  /* background: #1a1a1a;   */
  grid-template-columns: repeat(6, 1fr); gap: 1rem;
}

.games .member {
  text-align: center;
  position: relative;
}

.games .member .member-info {
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  transition: 0.2s;
}

.games .member .member-info-content {
  margin-top: -50px;
  transition: margin 0.2s;
}

.games .member:hover .member-info 
{
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.7);
  opacity: 1;
  transition: 0.4s;
  font-weight: 500;
}

.games .member:hover .member-info-content {
  margin-top: 0;
  transition: margin 0.4s;
}

.games .member h4 {
  font-weight: 500;
  margin-bottom: 2px;
  font-size: 16px;
  color: #fff;
}

.games .member span {
  font-style: italic;
  display: block;
  font-size: 13px;
  color: #fff;
}

.games .member .social {
  margin-top: 8px;
}

.games .member .social a {
  transition: color 0.3s;
  color: #fff;
}

.games .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

.games .img-game {
  box-sizing: border-box;
  padding: 2px;
  border-radius: 15px;
  margin: 1px;
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1), box-shadow 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

.games .img-game img {
  padding:0; 
  margin:auto;
  width:100%;
  position: relative;
  border-radius: 15px;
}

/* VENDOR LIST 2~6칸 적용*/
.vendor-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr); /* 기본: 모바일 2칸 */
}

@media (min-width: 576px) {
  .vendor-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .vendor-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 992px) {
  .vendor-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1280px) {
  .vendor-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 1600px) {
  .vendor-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* @media (min-width: 1800px) {
  .vendor-grid {
    grid-template-columns: repeat(7, 1fr);
  }
} */

@media (min-width: 2000px) {
  .vendor-grid {
    grid-template-columns: repeat(7, 1fr);
  }
}
/* 모바일(800px 미만)에서는 가운데만 표시 */
@media (max-width: 799px) {
  .page-title {    
    height: 500px;
  }
  #header {
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(6px);
  }
  #top-visual .top-visual-right {
    display: none !important;
  }
  #top-visual .top-visual-center {
    position: absolute;
    display: block;
    text-align: left;
    padding:240px 0 0 20px;        
    width: 90%;
    z-index: inherit;
  }
  #top-visual .top-visual-center h1 {
    font-size: 2rem;
  }
  #top-visual .top-visual-center p {
    font-size: 1rem;
    font-weight: 500;    
  }
  .header {
    --background-color: rgba(7, 9, 20, 1);
  }
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 2em;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }  
  .provider-list {
    width:100%;
    padding:10px 0;  
  }
  .navimenu-itmes {
    display: none;
  }    
}

/* Desktop Navigation */
@media (min-width: 800px) {
  .page-title {    
    height: 550px;
  }
  .header {
    --background-color: rgba(7, 9, 20, 0);
  }
  .provider-list {
    width:100%;
    padding:40px 45px;  
  }
  .navimenu-items {
    display: block;
  } 
}

/* footer*/
.FooterSection {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  /* background-color: #181818;  */
}

.vendors-list {
  margin:30px auto;
  text-align: center;
}

.vendors-list img {
  filter: grayscale(100%);
  opacity: 0.5;
}

.region-licensing {
  margin:auto;
  padding:60px 80px;
  max-width: 1600px;
  color:#786f8e;
  text-align:center;
}

.region-licensing h2 {
  color:#2588ce;
  font-size: 24px;
  margin-bottom: .5em;  
}

.region-licensing a {
  text-decoration: underline
}

.region-licensing a:hover {
  font-weight: 400
}

.region-licensing .field--text-long {
  line-height: 1.4
}

.Footer-wrapper {
  margin: 0 auto;
  padding:20px 80px;
  max-width: 1600px;
  text-align: center;
}

.Footer-wrapper li {
  display: inline-block; 
  margin: 0;
} 

.Footer-wrapper .menu-item::after{
  content: "|";
  float: right;
  display: block;
}
.Footer-wrapper .menu-item:last-child::after{
  content: "";
}

.Footer-wrapper .menu-item a{
  padding: 0 10px;
  /* border: 1px solid blue; */
}

.footer-mobile{
  font-size:0.8em;
  color: 999;
  width:100%;
  text-align: center;
  border-top: 1px solid #333;
  padding: 15px 10px;
  background:#181818;  
}
/* 게임 카테고리버튼 */
.game-nav-section {
    padding: 8px;
    background-image: linear-gradient(90deg, #182a46, #3b527a, #182a46);
}
.game-nav-section img {
    min-height: 40px;
    max-height: 100px;
}

.btn-tiny {
  font-size: 13px;
  height: 30px;
  font-family: GothamMedium;
}
.btn-nav {
  text-align: center;
  padding: 5px 16px;
  /* margin:1px; */
  transition: .5s;
  background-size: 200% auto !important;
  color: #f5f5f5;
  border: 1px solid #33baf4;
  border-radius: 50px;
  display: inline-block;
  background-color: rgba(0,0,0,0.5);
}
.btn-nav:hover {
  background: hsla(0,0%,100%,.4)
}
.btn-nav.money {
  padding:2px 16px;
  margin:1px 2px;
  font-weight:500;
}
.playBtn {
    color: #fff;
    background: linear-gradient(90deg, #9370db, #1e90ff);
    background: linear-gradient(90deg, #3b527a, #182a46);
}
.playBtn:hover { color: #ffff;}



/* 메인페이지 공지/입금/출금 박스 */
#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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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



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

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

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

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

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

.image-box {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.image-box img {
  position: absolute; /* 부모 기준 absolute 배치 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지 비율 유지하며 박스 꽉 채우기 */
}

.image-box.slot {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

#gameLoading {display: none;}




/* 베팅리스트관련 */
.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; }