a { text-decoration: none;}
i { background-color: transparent; font-style: normal;}
li { list-style: none; }
body { background-color: var(--bg-body);}
input { font-weight: 400;}

/* 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; } /* 네이비 (신뢰, 안정감) */

.font-weight-light { font-weight: 300; }
.font-weight-regular { font-weight: 400; }
.font-weight-medium { font-weight: 500; } 
.font-weight-semibold { font-weight: 600; } 
.font-weight-bold { font-weight: 700; }
.font-weight-black { font-weight: 900; }  

.font-small { font-size: 0.85em; }
.font-normal { font-size: 0.95em; }
.font-large { font-size: 1.1em; }
.font-xlarge { font-size: 1.3em; }


/* =========================================================
   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: 5px 14px;
  font-size: 0.94rem;
}

.btn.mini {
  padding: 4px 10px;
  font-size: 0.85rem;
}

.btn.minimum {
  padding: 2px 8px;
  font-size: 0.8rem;
}

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

.popup-container-center {
  text-align: center; 
  padding-bottom: 10px; 
}

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



input::-ms-clear,
input::-ms-reveal {
    display: none;
}

input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
    display: none;
}

body::-webkit-scrollbar,
.popupBackground::-webkit-scrollbar,
[id$="Panel"]::-webkit-scrollbar,
[id$="Popup"]::-webkit-scrollbar {
    width: 12px;
}

body::-webkit-scrollbar-thumb,
.popupBackground::-webkit-scrollbar-thumb,
[id$="Panel"]::-webkit-scrollbar-thumb,
[id$="Popup"]::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: 10px;
}

body::-webkit-scrollbar-track,
.popupBackground::-webkit-scrollbar-track,
[id$="Panel"]::-webkit-scrollbar-track,
[id$="Popup"]::-webkit-scrollbar-track {
    background-color: var(--color-black);
}

header:after,
footer .footerWrap ul:after,
aside ul li a:after,
#joinPopup ul li div:after,
[class$="Container"] .contentWrap .tabMenu:after,
.mainContainer .noticeSlider li:after,
.mainContainer .mainSlider:after,
.mainContainer .mainGameBox ul:after,
.mainContainer .mainBoardBox:after,
.mainContainer .mainBoardBox ol:after,
.casinoContainer .contentWrap ul:after,
.slotContainer .contentWrap ul:after,
.slotCateContainer .contentWrap ul:after,
.noticeContainer .contentWrap table tbody tr:after,
.readContainer .contentWrap .title:after,
.readContainer .contentWrap .commentBox div:after,
.chargeContainer .contentWrap .bankList:after,
.exchangeContainer .contentWrap .bankList:after,
.modifyContainer .contentWrap ul li div:after {
    content: "";
    display: block;
    clear: both;
}

.closeBtn {
    width: 35px;
    line-height: 33px;
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: "FontAwesome";
    background-color: transparent;
    border: 0;
    color: var(--color-font);
    font-size: 16px;
    cursor: pointer;
}

:root {
    --bg-body: #0d0d0d;
    --bg-header: #171717;
    --bg-footer: #141414;
    --bg-aside: #121212;
    --bg-mainBoard: #1c1c1c;
    --bg-mainList: #141414;
    --bg-menuList: #1f1f1f;
    --bg-thead: #212121;
    --bg-readContent: #171717;
    --bg-table: #171717;
    --bg-mobMenuBtn: #212121;
    --bg-input: #080808;
    --bg-bgNoneinput: #1a1a1a;
    --bg-writeinput: #242424;
    --bg-button: #212121;
    --bg-textarea: #0f0f0f;
    --bg-btnHover: #212121;
    --bg-pageActive: #212121;
    --bg-casinoBnr: #1a132c;
    --bg-slotBnr: #2c1326;
    --color-mpColor: #ca306b;
    --color-btnStartColor: #eb4c89;
    --color-btnEndColor: #ca306b;
    --color-font: #777;
    --color-gray: #777;
    --color-white: #eee;
    --color-black: #1a1a1a;
    --color-red: #d2302b;
    --color-border: #25272c;
    --color-lightGrey: #ccc;
    --color-burgundy: #933;
    --color-darkYellow: #d2a804;
    --color-yellow: #fec65e;
    --color-lightYellow: #fff210;
    --color-orange: #ff7f00;
    --color-lightOrange: #f90;
    --color-brown: #473d2a;
    --color-darkGreen: #1e8567;
    --color-green: #393;
    --color-lightGreen: #88f588;
    --color-neonGreen: #cff536;
    --color-navy: #1b2a4d;
    --color-blue: #4196ef;
    --color-skyBlue: #24b2e5;
    --color-neonBlue: #66ffff;
    --color-pink: #eb2268;
    --color-purple: #a441ef;
}

[id$="Panel"],
[id$="Popup"] {
    display: none;
}

[id$="Panel"].active,
[id$="Popup"].active {
    display: block;
}

.mask,
.mask2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: none;
}

.mask.active,
.mask2.active {
    display: block;
}

.material-symbols-outlined {
    font-variation-settings: "FILL"0, "wght"400, "GRAD"0, "opsz"24;
}

.display_none {
    display: none !important;
}

.floatingBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(19.92deg,
            rgb(175 13 98 / 79%) -6.45%,
            rgb(175 13 85 / 35%) 78.77%),
        rgb(216 216 216 / 5%);
    color: var(--color-white);
    border-radius: 30px;
    z-index: 1;
    transition: bottom 0.2s ease;
}

.floatingBtn:hover {
    bottom: 26px;
}

.floatingBtn span {
    font-size: 36px;
}

@keyframes lotate {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes jelly {
    25% {
        transform: scale(0.9, 1.1);
    }

    50% {
        transform: scale(1.1, 0.9);
    }

    75% {
        transform: scale(0.95, 1.05);
    }
}

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

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

@keyframes scale2 {
    0% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes textMove {
    0% {
        margin-left: -20px;
        opacity: 0;
    }

    100% {
        margin-left: 0px;
        opacity: 1;
    }
}

@keyframes anim {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.popupBackground {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.7);
    overflow-y: auto;
}

.popupBackground .popupWrap {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.popupBackground .popupWrap>div {
    position: static;
    transform: translate(0, 0) !important;
    margin: 10px;
    border: 1px solid var(--color-mpColor);
    box-shadow: none;
    font-size: 14px;
}

.popup_btn input[type="checkbox"] {
    display: none;
}

.popup_btn label {
    display: block;
    width: 100%;
    padding: 15px 3px;
    box-sizing: border-box;
    background: linear-gradient(to right,
            var(--color-btnStartColor),
            var(--color-btnEndColor));
    color: var(--color-white);
    font-weight: 500;
    text-align: center;
    cursor: pointer;
}

.popup_btn span {
    position: absolute;
    top: 15px;
    right: 15px;
    color: var(--color-white);
}

#toastContainer {
    position: absolute;
    top: 20px;
    right: 20px;
}

.toast {
    border: none !important;
    box-shadow: none !important;
    max-width: 250px !important;
}

.toast-body {
    text-align: center;
    border-radius: 5px;
    color: #fff;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.toast-body.blue {
    background-color: #20a8d8;
}

.toast-body.red {
    background-color: #f86c6b;
}

.toast-body.orange {
    background-color: #f0ad4e;
}

.toast-body.green {
    background-color: #4dbd74;
}

.toast-body>span {
    width: 50px;
    font-size: 22px;
}

.toast-body div {
    width: calc(100% - 50px);
}

.toast-body div span {
    display: block;
    text-align: left;
}

.allMoneyReturnBtn {
    padding: 6px 10px;
    box-sizing: border-box;
    background-color: #393939;
    color: var(--color-white);
    font-size: 13px;
    border-radius: 5px;
    margin-left: 5px;
    cursor: pointer;
}

#spanMoneyMo,
#spanMoneyPC,
#spanPointMo,
#spanPointPC {
    color: var(--color-darkYellow);
    font-weight: 900;
}

/* All Using */
@media screen and (max-width: 767px) {
    header .allMoneyReturnBtn {
        display: none;
    }

    .floatingBtn {
        bottom: 70px;
    }

    .floatingBtn:hover {
        bottom: 76px;
    }

    .popupBackground {
        display: block;
        padding: 50px 3%;
    }

    .popupBackground .popupWrap>div {
        max-width: 400px;
        margin: 0 0 20px;
        box-sizing: border-box;
        font-size: 13px;
    }

    header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        background-color: var(--bg-header);
        width: 100%;
        padding: 10px 3%;
        box-sizing: border-box;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
    }

    header .headUserInfo {
        display: inline-block;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 12px 10px;
        box-sizing: border-box;
        border-radius: 10px;
        display: none;
    }

    header .headUserInfo .status_login {
        font-size: 12px;
        color: var(--color-white);
    }

    header .headUserInfo .allMoneyReturnBtn {
        padding: 5px 10px;
        box-sizing: border-box;
        background-color: #393939;
        color: var(--color-white);
        font-size: 12px;
        border-radius: 5px;
        margin-left: 5px;
        cursor: pointer;
    }

    header .mobMenuBtn {
        float: left;
        height: 35px;
        background-color: var(--bg-mobMenuBtn);
        color: var(--color-font);
        border: 0;
        border-radius: 5px;
        margin: 4px 10px 0 0;
        cursor: pointer;
    }

    header h1 {
        float: left;
        line-height: 39px;
    }

    header h1 a {
        display: block;
    }

    header h1 a img {
        width: 100%;
        max-width: 110px;
        vertical-align: middle;
    }

    header .headerBtnBox {
        float: right;
        max-width: 1600px;
        margin: 0 auto;
        text-align: right;
    }

    header .headerBtnBox input[type="button"] {
        height: 35px;
        padding: 0 10px;
        box-sizing: border-box;
        border: 0;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 700;
        line-height: 22px;
        cursor: pointer;
    }

    header .headerBtnBox input[type="button"]:not(.joinBtn) {
        background-color: transparent;
        color: var(--color-font);
    }

    header .headerBtnBox input[type="button"].joinBtn {
        background: linear-gradient(to right,
                var(--color-btnStartColor),
                var(--color-btnEndColor));
        color: var(--color-white);
    }

    header .headerBtnBox input[type="button"].loginBtn {
        background: linear-gradient(to right,
                var(--color-darkGreen),
                var(--color-green));
        color: var(--color-white);
    }

    header .headerBtnBox input[type="button"]:not(.joinBtn):hover {
        background-color: var(--bg-btnHover);
    }

    header .headerBtnBox input[type="button"].material-symbols-outlined {
        font-size: 22px;
    }

    header .headerBtnBox .status_login {
        margin-left: 5px;
        box-sizing: border-box;
        border: 0;
        border-radius: 5px;
        color: var(--color-font);
        font-size: 15px;
        font-weight: 700;
        /*line-height: 22px;*/
        vertical-align: middle;
    }

    header .headerBtnBox .status_login i.material-symbols-outlined {
        position: relative;
        vertical-align: middle;
    }

    header .headerBtnBox .status_login i.material-symbols-outlined span {
        display: block;
        width: 15px;
        line-height: 15px;
        border-radius: 50%;
        background-color: red;
        color: var(--color-white);
        font-size: 10px;
        text-align: center;
        position: absolute;
        top: 0;
        right: -6px;
        font-family: "NanumSquareNeo";
        font-weight: 900;
    }

    header .headerBtnBox .status_login:not(a) {
        display: none;
    }

    header .headerBtnBox .status_login i {
        color: var(--color-mpColor);
    }

    header .headerBtnBox .status_login:nth-of-type(3) i {
        display: inline-block;
        width: 13px;
        line-height: 13px;
        background-color: var(--color-mpColor);
        color: var(--color-black);
        border-radius: 50%;
        font-size: 11px;
        font-weight: 900;
        text-align: center;
        vertical-align: text-bottom;
    }

    header .headerBtnBox .status_login.onlyMob i {
        display: inline-block;
        width: 24px;
        line-height: 24px;
        background-color: transparent;
        color: var(--color-mpColor);
        border-radius: 50%;
        font-size: 24px;
        font-weight: 900;
        text-align: center;
        vertical-align: middle;
    }

    header .headerBtnBox a.status_login input {
        height: 38px;
        box-sizing: border-box;
        border: 0;
        border-radius: 5px;
        background: linear-gradient(to right,
                var(--color-btnStartColor),
                var(--color-btnEndColor));
        color: var(--color-white) !important;
        font-size: 12px;
        font-weight: 700;
        line-height: 22px;
    }

    header .headerBtnBox input[value="sms"] {
        display: none;
    }

    /* header */

    aside {
        display: none;
    }

    /* aside */

    #gnbPanel {
        position: fixed;
        top: 0;
        left: 0;
        background-color: var(--bg-aside);
        width: 100%;
        height: 100%;
        padding: 0 3%;
        box-sizing: border-box;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
        overflow-y: auto;
    }

    #gnbPanel .sportsLinkBtn img {
        width: 100%;
    }

    #gnbPanel h3 {
        line-height: 65px;
        margin-bottom: 5px;
    }

    #gnbPanel h3 a {
        display: block;
    }

    #gnbPanel h3 a img {
        width: 100%;
        max-width: 110px;
        vertical-align: middle;
    }

    #gnbPanel .mobUserMoney {
        margin-top: 10px;
        margin-bottom: 40px;
        padding-top: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;        
        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
    }

    #gnbPanel .mobUserMoney>a {
        display: block;
        margin-bottom: 10px;
    }

    #gnbPanel .mobUserMoney>p {
        font-size: 14px;
        font-weight: 700;
        margin-top: 8px;
    }

    #gnbPanel .mobUserMoney>p>span:not(:first-child) {
        margin-left: 10px;
    }

    #gnbPanel .mobUserMoney>p>span {
        color: var(--color-font);
    }

    #gnbPanel .mobUserMoney>p>span>span {
        color: var(--color-darkYellow);
    }

    #gnbPanel .mobUserMoney .status_login {
        box-sizing: border-box;
        border: 0;
        border-radius: 5px;
        color: var(--color-font);
        font-size: 16px;
        font-weight: 700;
        line-height: 22px;
        vertical-align: middle;
    }

    /* #gnbPanel .mobUserMoney .status_login:not(:first-child) {
                    margin-left: 15px;
                }*/

    #gnbPanel .mobUserMoney .status_login i {
        color: var(--color-mpColor);
    }

    #gnbPanel .mobUserMoney .status_login:nth-of-type(3) i {
        display: inline-block;
        width: 15px;
        line-height: 15px;
        background-color: var(--color-mpColor);
        color: var(--color-black);
        border-radius: 50%;
        font-size: 12px;
        font-weight: 900;
        text-align: center;
        vertical-align: text-bottom;
    }

    #gnbPanel b {
        display: block;
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 900;
        color: var(--color-font);
    }

    #gnbPanel ul:not(:last-of-type) {
        margin-bottom: 40px;
    }

    #gnbPanel ul:last-of-type {
        margin-bottom: 20px;
    }

    #gnbPanel ul li {
        padding: 0 20px;
        background-color: var(--bg-menuList);
        border-radius: 10px 0 10px 0;
    }

    #gnbPanel ul li:not(:last-of-type) {
        margin-bottom: 5px;
    }

    #gnbPanel ul:first-of-type li:first-of-type {
        background: linear-gradient(26.79deg,
                rgba(109, 43, 255, 0.480402) 1.86%,
                rgba(109, 43, 255, 0.04) 85.25%,
                rgba(109, 43, 255, 0.04) 85.25%),
            rgba(216, 216, 216, 0.05);
    }

    #gnbPanel ul:first-of-type li:nth-of-type(2) {
        background: linear-gradient(19.92deg,
                rgba(175, 13, 132, 0.511772) -6.45%,
                rgba(175, 13, 132, 0.04) 78.77%),
            rgba(216, 216, 216, 0.05);
    }

    #gnbPanel ul:first-of-type li:last-of-type {
        background: linear-gradient(19.92deg,
                rgb(175 17 13 / 51%) -6.45%,
                rgba(175, 13, 132, 0.04) 78.77%),
            rgba(216, 216, 216, 0.05);
    }

    #gnbPanel ul li a {
        display: block;
        font-size: 14px;
        color: var(--color-white);
    }

    #gnbPanel ul:first-of-type li a {
        padding: 9px 0;
    }

    #gnbPanel ul:not(:first-of-type) li a {
        padding: 13px 0;
    }

    #gnbPanel ul li a span {
        vertical-align: middle;
        color: var(--color-mpColor);
    }

    #gnbPanel ul li a span:first-of-type {
        margin-right: 20px;
    }

    #gnbPanel ul li a span.menuIco {
        position: relative;
        display: inline-block;
        width: 35px;
        height: 35px;
    }

    #gnbPanel ul li a span .cardIco {
        width: 36px;
    }

    #gnbPanel ul li a span .spinIco {
        position: absolute;
        animation-name: lotate;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        width: 35px;
    }

    #gnbPanel ul li a span .spinPointIco {
        position: absolute;
        top: -6px;
        left: 8px;
        width: 18px;
    }

    /* gnbPanel */

    #loginPopup {
        position: fixed;
        top: 10%;
        left: 50%;
        transform: translate(-50%, -10%);
        background-color: var(--bg-aside);
        width: 100%;
        height: 100%;
        padding: 100px 3%;
        box-sizing: border-box;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
    }

    #loginPopup b {
        display: block;
        margin-bottom: 20px;
        font-size: 24px;
        line-height: 30px;
        font-weight: 900;
        text-align: center;
        color: var(--color-white);
    }

    #loginPopup ul {
        margin-bottom: 20px;
    }

    #loginPopup ul li {
        margin-bottom: 10px;
    }

    #loginPopup ul li input {
        width: 100%;
        height: 38px;
        padding: 0 15px;
        box-sizing: border-box;
        border: 1px solid transparent;
        border-radius: 5px;
        font-size: 14px;
        font-weight: 700;
    }

    #loginPopup ul li input:not([type="button"]) {
        background-color: var(--bg-input);
        color: var(--color-font);
    }

    #loginPopup ul li input:not([type="button"]):focus {
        border-color: var(--color-mpColor);
        outline: none;
    }

    #loginPopup ul li input[type="button"],
    #loginPopup ul li input[type="submit"] {
        background-color: var(--color-mpColor);
        color: var(--color-white);
        font-weight: 600;
        cursor: pointer;
    }

    #loginPopup span {
        color: var(--color-font);
        font-size: 14px;
    }

    #loginPopup input[data-popup="joinPopup"] {
        background-color: transparent;
        color: var(--color-mpColor);
        border: 0;
        font-size: 14px;
        cursor: pointer;
    }

    /* loginPopup */

    #joinPopup {
        position: fixed;
        top: 10%;
        left: 50%;
        transform: translate(-50%, -10%);
        background-color: var(--bg-aside);
        width: 100%;
        height: 100%;
        padding: 50px 3% 30px;
        box-sizing: border-box;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
        overflow-y: auto;
    }

    #joinPopup b {
        display: block;
        margin-bottom: 20px;
        font-size: 24px;
        line-height: 30px;
        font-weight: 900;
        text-align: center;
        color: var(--color-white);
    }

    #joinPopup ul li:not(:last-of-type) {
        margin-bottom: 25px;
    }

    #joinPopup ul li label {
        display: block;
        margin-bottom: 10px;
        padding: 0 10px;
        box-sizing: border-box;
        color: var(--color-white);
        font-size: 14px;
        font-weight: 600;
    }

    #joinPopup ul li input,
    #joinPopup ul li select {
        height: 38px;
        padding: 0 10px;
        box-sizing: border-box;
        border: 1px solid transparent;
        border-radius: 5px;
        font-size: 13px;
        font-weight: 700;
    }

    #joinPopup ul li>input {
        width: 100%;
    }

    #joinPopup ul li input:not([type="button"]),
    #joinPopup ul li select {
        background-color: var(--bg-input);
        color: var(--color-font);
    }

    #joinPopup ul li input:not([type="button"]):focus {
        border-color: var(--color-mpColor);
        outline: none;
    }

    #joinPopup ul li input[type="button"] {
        background-color: var(--color-mpColor);
        color: var(--color-white);
        cursor: pointer;
    }

    #joinPopup ul li span {
        display: block;
        margin-top: 10px;
        padding: 0 10px;
        box-sizing: border-box;
        color: var(--color-font);
        font-size: 12px;
        line-height: 18px;
        font-weight: 600;
    }

    #joinPopup ul li div>* {
        float: left;
    }

    #joinPopup ul li:not(.userPhone, .userBank) div input[type="text"] {
        width: calc(100% - 85px);
    }

    #joinPopup ul li div input[type="button"] {
        width: 80px;
        margin-left: 5px;
        background-color: var(--color-mpColor);
        color: var(--color-white);
        cursor: pointer;
    }

    #joinPopup ul li.userPhone div select,
    #joinPopup ul li.userPhone div input[type="text"] {
        width: calc((100% - 35px) / 3);
        padding: 0 10px;
    }

    #joinPopup ul li.userPhone div i {
        width: 15px;
        line-height: 38px;
        color: var(--color-font);
        text-align: center;
    }

    #joinPopup ul li.userBank div select {
        width: 140px;
    }

    #joinPopup ul li.userBank div input[type="text"]:first-of-type {
        width: calc(100% - 149px);
        margin-left: 5px;
    }

    #joinPopup ul li.userBank div input[type="text"]:last-of-type {
        width: 100%;
        margin-top: 10px;
    }

    /* joinPopup */

    footer {
        background-color: var(--bg-header);
        padding: 20px 25px 80px;
        box-sizing: border-box;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
        color: var(--color-font);
    }

    footer .footerWrap {
        max-width: 1600px;
        margin: 0 auto;
    }

    footer .footerWrap ul {
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--color-border);
    }

    footer .footerWrap ul li {
        float: left;
        width: calc(100% / 5);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 10px 0;
        box-sizing: border-box;
    }

    footer .footerWrap ul li img {
        width: 100%;
    }

    footer .footerWrap ul li:nth-child(n + 1):nth-child(-n + 10) img {
        max-width: 120px;
    }

    footer .footerWrap ul li:nth-child(n + 11):nth-child(-n + 39) img {
        max-width: 60px;
    }

    footer .footerWrap h3 {
        font-size: 16px;
        line-height: 22px;
        font-weight: 900;
        margin-bottom: 20px;
    }

    footer .footerWrap p {
        font-size: 12px;
        line-height: 18px;
        margin-bottom: 20px;
    }

    footer .footerWrap small {
        font-size: 10px;
        line-height: 18px;
        margin-bottom: 20px;
    }

    /* footer */

    .quickFooter {
        display: flex;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        background-color: var(--bg-header);
        border-top: solid #666 1px;
        padding: 15px 0 12px;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
    }

    .quickFooter a {
        display: block;
        width: 20%;
        color: var(--color-font);
        font-size: 12px;
        font-weight: 600;
        text-align: center;
    }

    .quickFooter a:nth-of-type(3) {
        position: relative;
        color: var(--color-black);
    }

    .quickFooter a:nth-of-type(3):after {
        content: "";
        display: block;
        position: absolute;
        top: -4px;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: -1;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-color: var(--color-mpColor);
    }

    .quickFooter a:nth-of-type(3)::before {
        content: "";
        display: block;
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: -1;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: var(--bg-header);
    }

    .quickFooter a span {
        display: block;
        margin-bottom: 3px;
        font-size: 20px;
    }

    /* mob quickFooter */
}

/* mobile */

@media screen and (min-width: 768px) and (max-width: 1279px) {
    .popupBackground {
        padding: 100px 50px;
    }

    .popupBackground .popupWrap>div {
        width: calc((100% - 40px) / 2) !important;
        max-width: 400px;
    }

    .caHolMoney span {
        font-size: 16px !important;
    }

    .caHolMoney span>span {
        color: var(--color-darkYellow);
    }

    header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        background-color: var(--bg-header);
        width: 100%;
        padding: 10px 25px;
        box-sizing: border-box;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
    }

    header .headUserInfo {
        display: inline-flex;
        /* inline-block -> inline-flex */
        align-items: center;
        /* 세로축 가운데 정렬 */
        flex-wrap: nowrap;
        /* 줄바꿈 방지 */
        gap: 8px;
        /* 요소 간 간격 (ms-2 대체 가능) */
        background-color: rgba(0, 0, 0, 0.5);
        padding: 12px 10px;
        box-sizing: border-box;
        border-radius: 10px;
    }

    header .headUserInfo>a {
        display: inline-flex;
        align-items: center;
    }

    header .headUserInfo .status_login {
        font-size: 12px;
        color: var(--color-white);
    }

    header .headUserInfo .allMoneyReturnBtn {
        padding: 5px 10px;
        box-sizing: border-box;
        background-color: #393939;
        color: var(--color-white);
        font-size: 12px;
        border-radius: 5px;
        margin-left: 5px;
        cursor: pointer;
    }


    header .mobMenuBtn {
        float: left;
        height: 35px;
        background-color: var(--bg-mobMenuBtn);
        color: var(--color-font);
        border: 0;
        border-radius: 5px;
        margin: 4px 10px 0 0;
        cursor: pointer;
    }

    header h1 {
        float: left;
        line-height: 38px;
    }

    header h1 a {
        display: block;
    }

    header h1 a img {
        width: 100%;
        max-width: 140px;
        vertical-align: middle;
    }

    header .headerBtnBox {
        max-width: 1600px;
        margin: 0 auto;
        text-align: right;
    }

    header .headerBtnBox input[type="button"] {
        height: 38px;
        padding: 0 10px;
        box-sizing: border-box;
        border: 0;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 700;
        line-height: 22px;
        cursor: pointer;
    }

    header .headerBtnBox input[type="button"]:not(.joinBtn) {
        background-color: transparent;
        color: var(--color-font);
    }

    header .headerBtnBox input[type="button"].joinBtn {
        background: linear-gradient(to right,
                var(--color-btnStartColor),
                var(--color-btnEndColor));
        color: var(--color-white);
    }

    header .headerBtnBox input[type="button"].loginBtn {
        background: linear-gradient(to right,
                var(--color-darkGreen),
                var(--color-green));
        color: var(--color-white);
    }

    header .headerBtnBox input[type="button"]:not(.joinBtn):hover {
        background-color: var(--bg-btnHover);
    }

    header .headerBtnBox input[type="button"].material-symbols-outlined {
        font-size: 22px;
    }

    header .headerBtnBox .status_login {
        margin-left: 5px;
        box-sizing: border-box;
        border: 0;
        border-radius: 5px;
        color: var(--color-font);
        font-size: 16px;
        font-weight: 600;
        vertical-align: middle;
    }

    header .headerBtnBox .status_login .point {
        display: inline-block;
        width: 20px;
        line-height: 20px;
        background-color: var(--color-mpColor);
        color: var(--color-black);
        border-radius: 50%;
        font-size: 12px;
        font-weight: 900;
        text-align: center;
        vertical-align: middle;
    }

    header .headerBtnBox .status_login i.material-symbols-outlined {
        position: relative;
        vertical-align: middle;
    }

    header .headerBtnBox .status_login i.material-symbols-outlined span {
        display: block;
        width: 15px;
        line-height: 15px;
        border-radius: 50%;
        background-color: red;
        color: var(--color-white);
        font-size: 10px;
        text-align: center;
        position: absolute;
        top: 0;
        right: -6px;
        font-family: "NanumSquareNeo";
        font-weight: 900;
    }

    header .headerBtnBox .status_login i {
        color: var(--color-mpColor);
    }

    header .headerBtnBox .status_login:nth-of-type(3) i {
        display: inline-block;
        width: 17px;
        line-height: 17px;
        background-color: var(--color-mpColor);
        color: var(--color-black);
        border-radius: 50%;
        font-size: 15px;
        font-weight: 900;
        text-align: center;
        vertical-align: text-bottom;
    }

    header .headerBtnBox a.status_login input {
        height: 38px;
        box-sizing: border-box;
        border: 0;
        border-radius: 5px;
        background: linear-gradient(to right,
                var(--color-btnStartColor),
                var(--color-btnEndColor));
        color: var(--color-white) !important;
        font-size: 12px;
        font-weight: 700;
        line-height: 22px;
    }

    /* header */

    aside {
        display: none;
    }

    /* aside */

    #gnbPanel {
        position: fixed;
        top: 0;
        left: 0;
        background-color: var(--bg-aside);
        width: 260px;
        height: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
    }

    #gnbPanel .sportsLinkBtn img {
        width: 100%;
    }

    #gnbPanel h3 {
        line-height: 65px;
        margin-bottom: 20px;
    }

    #gnbPanel h3 a {
        display: block;
    }

    #gnbPanel h3 a img {
        width: 100%;
        max-width: 140px;
        vertical-align: middle;
    }

    #gnbPanel .mobUserMoney {
        display: none;
    }

    #gnbPanel b {
        display: block;
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 900;
        color: var(--color-font);
    }

    #gnbPanel ul:not(:last-of-type) {
        margin-bottom: 40px;
    }

    #gnbPanel ul:last-of-type {
        margin-bottom: 20px;
    }

    #gnbPanel ul li {
        padding: 0 20px;
        background-color: var(--bg-menuList);
        border-radius: 10px 0 10px 0;
    }

    #gnbPanel ul li:not(:last-of-type) {
        margin-bottom: 5px;
    }

    #gnbPanel ul:first-of-type li:first-of-type {
        background: linear-gradient(26.79deg,
                rgba(109, 43, 255, 0.480402) 1.86%,
                rgba(109, 43, 255, 0.04) 85.25%,
                rgba(109, 43, 255, 0.04) 85.25%),
            rgba(216, 216, 216, 0.05);
    }

    #gnbPanel ul:first-of-type li:nth-of-type(2) {
        background: linear-gradient(19.92deg,
                rgba(175, 13, 132, 0.511772) -6.45%,
                rgba(175, 13, 132, 0.04) 78.77%),
            rgba(216, 216, 216, 0.05);
    }

    #gnbPanel ul:first-of-type li:last-of-type {
        background: linear-gradient(19.92deg,
                rgb(175 17 13 / 51%) -6.45%,
                rgba(175, 13, 132, 0.04) 78.77%),
            rgba(216, 216, 216, 0.05);
    }

    #gnbPanel ul li a {
        display: block;
        font-size: 14px;
        color: var(--color-white);
    }

    #gnbPanel ul:first-of-type li a {
        padding: 9px 0;
    }

    #gnbPanel ul:not(:first-of-type) li a {
        padding: 13px 0;
    }

    #gnbPanel ul li a span {
        vertical-align: middle;
        color: var(--color-mpColor);
    }

    #gnbPanel ul li a span:first-of-type {
        margin-right: 20px;
    }

    #gnbPanel ul li a span.menuIco {
        position: relative;
        display: inline-block;
        width: 35px;
        height: 35px;
    }

    #gnbPanel ul li a span .cardIco {
        width: 36px;
    }

    #gnbPanel ul li a span .spinIco {
        position: absolute;
        animation-name: lotate;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        width: 35px;
    }

    #gnbPanel ul li a span .spinPointIco {
        position: absolute;
        top: -6px;
        left: 8px;
        width: 18px;
    }

    /* gnbPanel */

    #loginPopup {
        position: fixed;
        top: 10%;
        left: 50%;
        transform: translate(-50%, -10%);
        background-color: var(--bg-aside);
        width: 100%;
        max-width: 500px;
        padding: 20px 20px 30px;
        box-sizing: border-box;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
    }

    #loginPopup b {
        display: block;
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 22px;
        font-weight: 900;
        color: var(--color-white);
    }

    #loginPopup ul {
        margin-bottom: 20px;
    }

    #loginPopup ul li {
        margin-bottom: 10px;
    }

    #loginPopup ul li input {
        width: 100%;
        height: 38px;
        padding: 0 15px;
        box-sizing: border-box;
        border: 1px solid transparent;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 700;
    }

    #loginPopup ul li input:not([type="button"]) {
        background-color: var(--bg-input);
        color: var(--color-font);
    }

    #loginPopup ul li input:not([type="button"]):focus {
        border-color: var(--color-mpColor);
        outline: none;
    }

    #loginPopup ul li input[type="button"],
    #loginPopup ul li input[type="submit"] {
        background-color: var(--color-mpColor);
        color: var(--color-white);
        font-weight: 600;
        cursor: pointer;
    }

    #loginPopup span {
        color: var(--color-font);
        font-size: 13px;
    }

    #loginPopup input[data-popup="joinPopup"] {
        background-color: transparent;
        color: var(--color-mpColor);
        border: 0;
        cursor: pointer;
    }

    /* loginPopup */

    #joinPopup {
        position: fixed;
        top: 10%;
        left: 50%;
        transform: translate(-50%, -10%);
        background-color: var(--bg-aside);
        width: 100%;
        max-width: 500px;
        padding: 20px 20px;
        box-sizing: border-box;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
    }

    #joinPopup b {
        display: block;
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 22px;
        font-weight: 900;
        color: var(--color-white);
    }

    #joinPopup ul li:not(:last-of-type) {
        margin-bottom: 25px;
    }

    #joinPopup ul li label {
        display: block;
        margin-bottom: 10px;
        padding: 0 10px;
        box-sizing: border-box;
        color: var(--color-white);
        font-size: 13px;
        font-weight: 600;
    }

    #joinPopup ul li input,
    #joinPopup ul li select {
        height: 38px;
        padding: 0 15px;
        box-sizing: border-box;
        border: 1px solid transparent;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 700;
    }

    #joinPopup ul li>input {
        width: 100%;
    }

    #joinPopup ul li input:not([type="button"]),
    #joinPopup ul li select {
        background-color: var(--bg-input);
        color: var(--color-font);
    }

    #joinPopup ul li input:not([type="button"]):focus {
        border-color: var(--color-mpColor);
        outline: none;
    }

    #joinPopup ul li input[type="button"] {
        background-color: var(--color-mpColor);
        color: var(--color-white);
        cursor: pointer;
    }

    #joinPopup ul li span {
        display: block;
        margin-top: 10px;
        padding: 0 10px;
        box-sizing: border-box;
        color: var(--color-font);
        font-size: 11px;
        line-height: 18px;
        font-weight: 600;
    }

    #joinPopup ul li div>* {
        float: left;
    }

    #joinPopup ul li:not(.userPhone, .userBank) div input[type="text"] {
        width: calc(100% - 95px);
    }

    #joinPopup ul li div input[type="button"] {
        width: 90px;
        margin-left: 5px;
        background-color: var(--color-mpColor);
        color: var(--color-white);
        cursor: pointer;
    }

    #joinPopup ul li.userPhone div select,
    #joinPopup ul li.userPhone div input[type="text"] {
        width: calc((100% - 40px) / 3);
    }

    #joinPopup ul li.userPhone div i {
        width: 20px;
        line-height: 38px;
        color: var(--color-font);
        text-align: center;
    }

    #joinPopup ul li.userBank div select {
        width: 140px;
    }

    #joinPopup ul li.userBank div input[type="text"]:first-of-type {
        width: calc(100% - 149px);
        margin-left: 5px;
    }

    #joinPopup ul li.userBank div input[type="text"]:last-of-type {
        width: 100%;
        margin-top: 10px;
    }

    /* joinPopup */

    footer {
        background-color: var(--bg-header);
        padding: 30px 25px;
        box-sizing: border-box;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
        color: var(--color-font);
    }

    footer .footerWrap {
        max-width: 1600px;
        margin: 0 auto;
    }

    footer .footerWrap ul {
        margin-bottom: 40px;
        padding-bottom: 40px;
        border-bottom: 1px solid var(--color-border);
    }

    footer .footerWrap ul li {
        float: left;
        width: calc(100% / 10);
        height: 63px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 10px 0;
        box-sizing: border-box;
    }

    footer .footerWrap ul li img {
        width: 100%;
    }

    footer .footerWrap ul li:nth-child(n + 1):nth-child(-n + 10) img {
        max-width: 120px;
    }

    footer .footerWrap ul li:nth-child(n + 11):nth-child(-n + 39) img {
        max-width: 70px;
    }

    footer .footerWrap h3 {
        font-size: 20px;
        line-height: 30px;
        font-weight: 900;
        margin-bottom: 20px;
    }

    footer .footerWrap p {
        font-size: 12px;
        line-height: 18px;
        margin-bottom: 20px;
    }

    footer .footerWrap small {
        font-size: 10px;
        line-height: 18px;
        margin-bottom: 20px;
    }

    /* footer */

    .quickFooter {
        display: none;
    }

    /* mob quickFooter */
}

/* tablet */

@media screen and (min-width: 1280px) {
    .popupBackground {
        padding: 100px 50px;
    }

    .popupBackground .popupWrap>div {
        width: calc((100% - 60px) / 3) !important;
        max-width: 400px;
    }

    .caHolMoney span {
        font-size: 16px !important;
    }

    .caHolMoney span>span {
        color: var(--color-darkYellow);
    }

    header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        background-color: var(--bg-header);
        width: calc(100% - 260px);
        margin-left: 260px;
        padding: 10px 0;
        box-sizing: border-box;
        box-shadow: 0px 9px 14px rgb(255, 255, 255, 0.1);
    }

    header .headUserInfo {
        display: inline-block;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 12px 10px;
        box-sizing: border-box;
        border-radius: 10px;
    }

    header .headUserInfo .status_login {
        font-size: 12px;
        color: var(--color-white);
    }

    header .headUserInfo .allMoneyReturnBtn {
        padding: 5px 10px;
        box-sizing: border-box;
        background-color: #393939;
        color: var(--color-white);
        font-size: 12px;
        border-radius: 5px;
        margin-left: 5px;
        cursor: pointer;
    }

    header .mobMenuBtn {
        display: none;
    }

    header h1 {
        display: none;
    }

    header .headerBtnBox {
        max-width: 1600px;
        margin: 0 auto;
        padding-right: 10px;
        box-sizing: border-box;
        text-align: right;
    }

    header .headerBtnBox input[type="button"] {
        height: 38px;
        padding: 0 20px;
        box-sizing: border-box;
        border: 0;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 700;
        line-height: 22px;
        cursor: pointer;
    }

    header .headerBtnBox input[type="button"]:not(.joinBtn) {
        background-color: transparent;
        color: var(--color-font);
    }

    header .headerBtnBox input[type="button"].joinBtn {
        background: linear-gradient(to right,
                var(--color-btnStartColor),
                var(--color-btnEndColor));
        color: var(--color-white);
    }

    header .headerBtnBox input[type="button"].loginBtn {
        background: linear-gradient(to right,
                var(--color-darkGreen),
                var(--color-green));
        color: var(--color-white);
    }

    header .headerBtnBox input[type="button"].joinBtn:hover {
        animation: jelly 0.5s;
    }

    header .headerBtnBox input[type="button"]:not(.joinBtn):hover {
        background-color: var(--bg-btnHover);
    }

    header .headerBtnBox input[type="button"].material-symbols-outlined {
        font-size: 22px;
    }

    header .headerBtnBox .status_login {
        margin-left: 5px;
        box-sizing: border-box;
        border: 0;
        border-radius: 5px;
        color: var(--color-font);
        font-size: 16px;
        font-weight: 600;
        vertical-align: middle;
    }

    header .headerBtnBox .status_login .point {
        display: inline-block;
        width: 20px;
        line-height: 20px;
        background-color: var(--color-mpColor);
        color: var(--color-black);
        border-radius: 50%;
        font-size: 12px;
        font-weight: 900;
        text-align: center;
        vertical-align: middle;
    }

    header .headerBtnBox .status_login i {
        color: var(--color-mpColor);
    }

    header .headerBtnBox .status_login i.material-symbols-outlined {
        position: relative;
        vertical-align: middle;
    }

    header .headerBtnBox .status_login i.material-symbols-outlined span {
        display: block;
        width: 15px;
        line-height: 15px;
        border-radius: 50%;
        background-color: red;
        color: var(--color-white);
        font-size: 10px;
        text-align: center;
        position: absolute;
        top: 0;
        right: -6px;
        font-family: "NanumSquareNeo";
        font-weight: 900;
    }

    header .headerBtnBox .status_login:nth-of-type(3) i {
        display: inline-block;
        width: 17px;
        line-height: 17px;
        background-color: var(--color-mpColor);
        color: var(--color-black);
        border-radius: 50%;
        font-size: 15px;
        font-weight: 900;
        text-align: center;
        vertical-align: text-bottom;
    }

    header .headerBtnBox a.status_login input {
        height: 38px;
        box-sizing: border-box;
        border: 0;
        border-radius: 5px;
        background: linear-gradient(to right,
                var(--color-btnStartColor),
                var(--color-btnEndColor));
        color: var(--color-white) !important;
        font-size: 12px;
        font-weight: 700;
        line-height: 22px;
    }

    /* header */

    aside {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        background-color: var(--bg-aside);
        width: 260px;
        height: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
    }

    aside h2 {
        line-height: 65px;
        margin-bottom: 20px;
    }

    aside h2 a {
        display: block;
    }

    aside h2 img {
        width: 100%;
        max-width: 140px;
        max-height: 54px;
        vertical-align: middle;
        display: block;
        object-fit: contain;
        margin: 10px auto 0;
    }

    aside .mobUserMoney {
        display: none;
    }

    aside b {
        display: block;
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 900;
        color: var(--color-font);
    }

    aside ul:not(:last-of-type) {
        margin-bottom: 40px;
    }

    aside ul li {
        padding: 0 20px;
        background-color: var(--bg-menuList);
        border-radius: 10px 0 10px 0;
    }

    aside ul li:not(:last-of-type) {
        margin-bottom: 5px;
    }

    aside ul:first-of-type li:first-of-type {
        background: linear-gradient(26.79deg,
                rgba(109, 43, 255, 0.480402) 1.86%,
                rgba(109, 43, 255, 0.04) 85.25%,
                rgba(109, 43, 255, 0.04) 85.25%),
            rgba(216, 216, 216, 0.05);
    }

    aside ul:first-of-type li:nth-of-type(2) {
        background: linear-gradient(19.92deg,
                rgba(175, 13, 132, 0.511772) -6.45%,
                rgba(175, 13, 132, 0.04) 78.77%),
            rgba(216, 216, 216, 0.05);
    }

    aside ul:first-of-type li:last-of-type {
        background: linear-gradient(19.92deg,
                rgb(175 17 13 / 51%) -6.45%,
                rgba(175, 13, 132, 0.04) 78.77%),
            rgba(216, 216, 216, 0.05);
    }

    aside ul li a {
        display: block;
        font-size: 14px;
        color: var(--color-white);
    }

    aside ul:first-of-type li a {
        padding: 9px 0;
    }

    aside ul:not(:first-of-type) li a {
        padding: 13px 0;
    }

    aside ul li a span {
        vertical-align: middle;
        color: var(--color-mpColor);
    }

    aside ul li a span:first-of-type {
        margin-right: 20px;
    }

    aside ul li a span.menuIco {
        position: relative;
        display: inline-block;
        width: 35px;
        height: 35px;
    }

    aside ul li a span .cardIco {
        width: 36px;
    }

    aside ul li a span .spinIco {
        position: absolute;
        animation-name: lotate;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        width: 35px;
    }

    aside ul li a span .spinPointIco {
        position: absolute;
        top: -6px;
        left: 8px;
        width: 18px;
    }

    aside .sportsLinkBtn {
        display: block;
        margin-top: 20px;

        /*display: flex;
                align-items: flex-end;               
                height: calc(100vh - 804px);
                min-height: 240px;*/
    }

    aside .sportsLinkBtn img {
        width: 100%;
    }

    /* aside */

    .mask:has(#gnbPanel),
    #gnbPanel {
        display: none !important;
    }

    /* gnbPanel */

    #loginPopup {
        position: fixed;
        top: 10%;
        left: 50%;
        transform: translate(-50%, -10%);
        background-color: var(--bg-aside);
        width: 100%;
        max-width: 500px;
        padding: 20px 20px 30px;
        box-sizing: border-box;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
    }

    #loginPopup b {
        display: block;
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 22px;
        font-weight: 900;
        color: var(--color-white);
    }

    #loginPopup ul {
        margin-bottom: 20px;
    }

    #loginPopup ul li {
        margin-bottom: 10px;
    }

    #loginPopup ul li input {
        width: 100%;
        height: 38px;
        padding: 0 15px;
        box-sizing: border-box;
        border: 1px solid transparent;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 700;
    }

    #loginPopup ul li input:not([type="button"]) {
        background-color: var(--bg-input);
        color: var(--color-font);
    }

    #loginPopup ul li input:not([type="button"]):focus {
        border-color: var(--color-mpColor);
        outline: none;
    }

    #loginPopup ul li input[type="button"],
    #loginPopup ul li input[type="submit"] {
        background-color: var(--color-mpColor);
        color: var(--color-white);
        font-weight: 600;
        cursor: pointer;
    }

    #loginPopup span {
        color: var(--color-font);
        font-size: 13px;
    }

    #loginPopup input[data-popup="joinPopup"] {
        background-color: transparent;
        color: var(--color-mpColor);
        border: 0;
        cursor: pointer;
    }

    /* loginPopup */

    #joinPopup {
        position: fixed;
        top: 10%;
        left: 50%;
        transform: translate(-50%, -10%);
        background-color: var(--bg-aside);
        width: 100%;
        max-width: 500px;
        padding: 20px 20px;
        box-sizing: border-box;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
    }

    #joinPopup b {
        display: block;
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 22px;
        font-weight: 900;
        color: var(--color-white);
    }

    #joinPopup ul li:not(:last-of-type) {
        margin-bottom: 25px;
    }

    #joinPopup ul li label {
        display: block;
        margin-bottom: 10px;
        padding: 0 10px;
        box-sizing: border-box;
        color: var(--color-white);
        font-size: 13px;
        font-weight: 600;
    }

    #joinPopup ul li input,
    #joinPopup ul li select {
        height: 38px;
        padding: 0 15px;
        box-sizing: border-box;
        border: 1px solid transparent;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 700;
    }

    #joinPopup ul li>input {
        width: 100%;
    }

    #joinPopup ul li input:not([type="button"]),
    #joinPopup ul li select {
        background-color: var(--bg-input);
        color: var(--color-font);
    }

    #joinPopup ul li input:not([type="button"]):focus {
        border-color: var(--color-mpColor);
        outline: none;
    }

    #joinPopup ul li input[type="button"] {
        background-color: var(--color-mpColor);
        color: var(--color-white);
        cursor: pointer;
    }

    #joinPopup ul li span {
        display: block;
        margin-top: 10px;
        padding: 0 10px;
        box-sizing: border-box;
        color: var(--color-font);
        font-size: 11px;
        line-height: 18px;
        font-weight: 600;
    }

    #joinPopup ul li div>* {
        float: left;
    }

    #joinPopup ul li:not(.userPhone, .userBank) div input[type="text"] {
        width: calc(100% - 95px);
    }

    #joinPopup ul li div input[type="button"] {
        width: 90px;
        margin-left: 5px;
        background-color: var(--color-mpColor);
        color: var(--color-white);
        cursor: pointer;
    }

    #joinPopup ul li.userPhone div select,
    #joinPopup ul li.userPhone div input[type="text"] {
        width: calc((100% - 40px) / 3);
    }

    #joinPopup ul li.userPhone div i {
        width: 20px;
        line-height: 38px;
        color: var(--color-font);
        text-align: center;
    }

    #joinPopup ul li.userBank div select {
        width: 140px;
    }

    #joinPopup ul li.userBank div input[type="text"]:first-of-type {
        width: calc(100% - 149px);
        margin-left: 5px;
    }

    #joinPopup ul li.userBank div input[type="text"]:last-of-type {
        width: 100%;
        margin-top: 10px;
    }

    /* joinPopup */

    footer {
        background-color: var(--bg-header);
        width: calc(100% - 260px);
        margin-left: 260px;
        padding: 40px 25px;
        box-sizing: border-box;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
        color: var(--color-font);
    }

    footer .footerWrap {
        max-width: 1600px;
        margin: 0 auto;
    }

    footer .footerWrap ul {
        margin-bottom: 40px;
        padding-bottom: 40px;
        border-bottom: 1px solid var(--color-border);
    }

    footer .footerWrap ul li {
        float: left;
        width: calc(100% / 10);
        height: 63px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 10px 0;
        box-sizing: border-box;
    }

    footer .footerWrap ul li img {
        width: 100%;
    }

    footer .footerWrap ul li:nth-child(n + 1):nth-child(-n + 10) img {
        max-width: 120px;
    }

    footer .footerWrap ul li:nth-child(n + 11):nth-child(-n + 39) img {
        max-width: 70px;
    }

    footer .footerWrap h3 {
        font-size: 20px;
        line-height: 30px;
        font-weight: 900;
        margin-bottom: 20px;
    }

    footer .footerWrap p {
        font-size: 12px;
        line-height: 18px;
        margin-bottom: 20px;
    }

    footer .footerWrap small {
        font-size: 10px;
        line-height: 18px;
        margin-bottom: 20px;
    }

    /* footer */

    .quickFooter {
        display: none;
    }

    /* mob quickFooter */
}

/* desktop */

.site_logo_top {
    max-width: 140px;
    max-height: 54px;
    object-fit: contain;
}

.site_logo_top_nav {
    max-width: 180px;
    max-height: 70px;
    object-fit: contain;
}

@media screen and (max-width: 767px) {
    .site_logo_top {
        padding-left:8px;
        max-width: 100px;
        max-height: 40px;
        object-fit: contain;
    }

    .site_logo_top_nav {
        width: 100px;
        max-height: 54px;
        object-fit: contain;
    }
}