* {margin: 0;padding: 0;box-sizing: border-box; font-family: 'Pretendard Variable', sans-serif; font-size:9pt; user-select:none;scrollbar-width: thin;scrollbar-color: #333333 #1a1a1a;}
html{color:#4e4242; width:100%; height:100%; background-color:white;; overflow:hidden;   } 
body{color:#4e4242; width:100%; height:100%; background-image:url(../Image/backpa.png); overflow:hidden;   } 
form{color:#4e4242; width:100%; height:100%; background-image:radial-gradient(ellipse at center,rgba(0,0,0,0) 50%,rgba(0,0,0,0.4) 100%); overflow:hidden;   }

.MobileShow{display:none}

.NoPadding{padding:0px !important}img{width:100%; display:block;}.Clear{clear:both; height:10px;}.ClearBothH{clear:both; height:15px;}
.TL{text-align:left!important}.TC{text-align:center!important}.TR{text-align:right!important}

::-webkit-scrollbar {width: 8px;height: 8px;}
::-webkit-scrollbar-track {background: #1a1a1a;border-radius: 4px;}
::-webkit-scrollbar-thumb {background-color: #4d4d4d;border-radius: 4px;box-shadow:inset 1px 1px 2px rgba(255,255,255,0.05),inset -1px -1px 2px rgba(0,0,0,0.5);}
::-webkit-scrollbar-thumb:hover {background-color: #4d4d4d; }

a,a:link,a:visited,a:hover,a:active,a:focus {color: #23204b; font-size:1.2em; font-weight:700; text-decoration: none;background: none;outline: none;cursor: pointer;}

i{cursor:pointer}

.OverView{position:fixed; width:100%; height:100%; display:none; z-index:100;  background-color:rgba(0,0,0,0.3); backdrop-filter: blur(2px); }
.OverViewArea{display:flex; width:100%; height:100%; padding:10px; align-items:center; overflow-y:scroll;justify-content:center;overflow:auto;  }
.OverViewInnerS{width:100%; max-width:450px; position:relative; padding:10px; top:0px; opacity:0}
.OverViewInnerM{width:100%; max-width:600px; position:relative; padding:10px; top:0px; opacity:0}
.OverViewInnerSM{width:100%; max-width:550px; position:relative; padding:10px; top:0px; opacity:0; }
.OverViewInnerB{width:100%; max-width:800px; position:relative; padding:10px; top:0px; opacity:0}
.OverViewInnerVB{width:100%; max-width:1200px; position:relative; padding:20px 10px 10px 10px; top:0px; opacity:1}
.OverViewItemBox{width:100%; border-radius:10px; border:1px solid black; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3), 0px 0px 0px rgba(0, 0, 0, 0); }
.OverViewTitleBar {width:100%;font-size:1.6em; font-weight:600; padding:20px; background:url(../Image/Logo2.png) no-repeat rgba(0,0,0,1); box-shadow: 0px 10px 1px rgba(0,0,0,0.2);border-bottom:1px solid #1a1a1a; border-radius:15px 15px 0px 0px; color:white;  background-size:40px; text-indent:42px; background-position:13px 12px}
.OverViewTitleBar > i{float:right; font-weight:900; font-size:1.3em; position:relative; top:0px; color:gray; transition:all 200ms;}
.OverViewTitleBar > i:hover{color:white}
.OverViewTitleBar > i:active{color:#d52526}
.OverViewContent {width:100%;padding:20px; color:white; border-radius:0px 0px 15px 15px; color:white; background-color:#12192d; background-size:cover }

input, textarea,select,button {-webkit-appearance: none; -webkit-border-radius: 2px; box-shadow:1px 1px 5px rgba(0, 0, 0, 0.6),-1px -1px 15px rgba(0, 0, 0, 0.1)!important; border-radius: 2px; appearance: none; outline:none; width:100%;}
input:disabled{border:1px solid #2a2a2a!important; box-shadow:1px 1px 15px rgba(0, 0, 0, 0.6),-1px -1px 15px rgba(0, 0, 0, 0.1)!important;  border-radius:2px!important;}
input:disabled:hover{border:1px solid #2a2a2a!important;}

button:disabled{border:1px solid #2a2a2a!important; box-shadow:1px 1px 15px rgba(0, 0, 0, 0.6),-1px -1px 15px rgba(0, 0, 0, 0.1)!important;  border-radius:2px!important;}
button:disabled:hover{border:1px solid #2a2a2a!important;}

input[type=text] {width:100%; font-weight:600;  border-radius:5px; box-sizing:border-box; font-size:1.2em; padding:10px; color:white; box-shadow:inset 0px 0px 10px  black; border:1px solid #2a2a2a; background-color:#1a1a1a; transition:all 200ms}
input[type=text]:hover {border:1px solid #23204b}
input[type=text]:focus {border:1px solid #23204b; box-shadow: 0px 0px 10px  rgba(0,0,0,1);}

input[type=password] {width:100%; font-weight:600;  border-radius:5px; box-sizing:border-box;font-size:1.2em; padding:10px; color:white; box-shadow:inset 0px 0px 10px  black; border:1px solid #2a2a2a; background-color:#1a1a1a; transition:all 200ms}
input[type=password]:hover {border:1px solid #23204b}
input[type=password]:focus {border:1px solid #23204b;  box-shadow: 0px 0px 10px rgba(0,0,0,1);}

select {width:100%; font-weight:600;  border-radius:5px; box-sizing:border-box; padding:11px 10px 11px 10px; font-size:1.1em; color:white;  border:2px solid #3a3a3a; background-color:black; transition:all 200ms}
select:hover {border:2px solid #23204b}
select:focus {border:2px solid #23204b; box-shadow: 0px 0px 10px rgba(255,255,255,0.5)}

textarea{width:100%; font-weight:600; resize:none; min-height:230px;  border-radius:5px; box-sizing:border-box; font-size:1.2em; padding:15px; color:white; box-shadow:inset 0px 0px 10px  black; border:1px solid #2a2a2a; background-color:#1a1a1a; transition:all 200ms}
textarea:hover {border:1px solid #23204b}
textarea:focus {border:1px solid #23204b;  box-shadow: 0px 0px 10px rgba(0,0,0,1);}

input[type=button] {width:100%; font-weight:900; text-align:center; border-radius:5px; cursor:pointer; box-sizing:border-box; padding:10px; color:white; border:1px solid #2a2a2a; background-color:#1a1a1a; font-size:1.2em; transition:all 200ms}
input[type=button]:active {border:1px solid #3a3a3a; box-shadow:inset 0px 0px 10px black;}

input[type=submit] {width:100%; font-weight:900; text-align:center; border-radius:5px; cursor:pointer; box-sizing:border-box; padding:10px; color:white; border:1px solid #2a2a2a; background-color:#1a1a1a; font-size:1.2em; transition:all 200ms}
input[type=submit]:active {border:1px solid #3a3a3a; box-shadow:inset 0px 0px 10px black;}

button {width:100%; font-weight:900; text-align:center; border-radius:5px; cursor:pointer; box-sizing:border-box; padding:10px; color:white; border:1px solid #2a2a2a; background-color:#1a1a1a; font-size:1.2em; transition:all 200ms}
button:active {border:1px solid #3a3a3a; box-shadow:inset 0px 0px 10px black;}

.BtnLime{background-color:#fffd1a!important; color:black!important;}
.BtnDarkBlue{background-color:#23204b!important; color:white!important;}
.BtnRed{background-color:#AA0114!important; color:white!important;}
.BtnOrange{background-color:#AA0114!important; color:black!important;}
.BtnBlack{background-color:black!important; color:white!important;}
.BtnDisabled{border:1px solid #2a2a2a!important; background-color:rgb(28, 28, 28)!important; box-shadow:1px 1px 15px rgba(0, 0, 0, 0.6),-1px -1px 15px rgba(0, 0, 0, 0.1)!important;  border-radius:2px!important;}
.BtnDisabled:active{border:1px solid #2a2a2a!important; box-shadow:inset 0px 0px 10px black!important;}


.CenterBox{width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.CenterBoxInner{background: linear-gradient(135deg, #dfe7ea, #f4f8fa, #dfe7ea);border-radius:10px; border:1px solid #b9b9b9;  color:#2a2a2a; width:90%; max-width:600px; padding:20px; box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.6), 0px 0px 0px rgba(0, 0, 0, 0);}

.CenterBoxInner > table{ width:100%;}
.LoginBox{width:100%; text-align:center;font-size:1.3em; font-weight:700; line-height:50px;} .LoginBox > div{padding:5px; width:100%;}
.LoginBox > img{ margin:0 auto; width:60%; padding:30px 10px 30px 10px;}

.LoginBox > div > input {font-size:2em; padding:20px 10px 20px 10px!important}

header{margin:0 auto; width:100%; max-width:1600px; padding:20px 20px 0px 20px;  }
.MenuArea {display:flex; justify-content:right;align-items:center;  border-radius: 10px 10px 0px 0px;border: 1px solid black; border-bottom:0px; background: linear-gradient(135deg, #dfe7ea, #f4f8fa, #dfe7ea); box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6), 0px 0px 0px rgba(0, 0, 0, 0); padding: 3px 20px 3px 20px;color:#ffffff; transition: all 0.3s ease;}
.Logo{color:#fffd1a; margin-right:auto; font-size:2em;padding:10px 20px 10px 20px;}.Logo >img {width:150px; transform:scale(2); cursor:pointer;}
.MenuItem{font-size:1.8em; text-shadow:0px 0px 6px rgba(255, 255, 255, 0.1); font-weight:900;padding:10px 20px 10px 20px;cursor:pointer; color:black; transition:all 70ms}
.MenuItem:hover {text-shadow:0px 0px 6px rgba(255, 255, 255, 0.2),1px 1px 2px rgba(0, 0, 0, 0.6); color:#3d379d; transform: translateY(-2px) scale(1.03);}
.MenuItem:active {text-shadow:-1px -1px 0 rgba(255, 255, 255, 0.2),1px 1px 0 rgba(0, 0, 0, 0.8);transform: translateY(2px) scale(0.97);}
.MenuItemSelect {font-size:2em; font-weight:700;padding:10px 20px 10px 20px;cursor:pointer; text-shadow:0px 0px 6px rgba(255, 255, 255, 0.4),1px 1px 2px rgba(0, 0, 0, 0.6); color:#3d379d; transform: translateY(-2px) scale(1.03);}

.Top{margin:0 auto; width:100%; max-width:1600px; padding:0px 20px 10px 20px;  }
.StatusArea{display:flex; justify-content:right;align-items:center;  border-radius:0px 0px 10px 10px;border: 1px solid black;background-color:#dbdbdb; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6), 0px 0px 0px rgba(0, 0, 0, 0); padding: 10px 20px 10px 20px;color:#ffffff; transition: all 0.3s ease;}

.LoginControl{display:flex; align-items:center;}.LoginControl> div{padding:3px; width:150px;}

.Content{margin:0 auto; width:100%; max-width:1600px; padding:10px 20px 10px 20px; }
.ContentArea{background: linear-gradient(135deg, #dfe7ea, #f4f8fa, #dfe7ea);color:white; height:100%; font-size:1.2em; border:1px solid black; border-radius:5px; overflow-x:auto; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6), 0px 0px 0px rgba(0, 0, 0, 0); padding: 20px;  }

.Ttitle{padding:13px 20px 13px 20px; width:99.4%; margin:0 auto; display:flex; align-items:center; background-size:50px; text-indent:60px; border:1px solid #2a2a2a; border-radius:5px; box-shadow: 0px 0px 3px  rgba(0,0,0,0.8); ; }
.Ttitle > div{flex:1; vertical-align:central; font-size:1.8em; font-weight:900;  color:#3a3a3a;text-shadow:0px 0px 6px rgba(255, 255, 255, 0.4),1px 1px 2px rgba(0, 0, 0, 0.6); }

.PageTtitle{padding:30px 20px 30px 20px; display:flex; align-items:center;  background : url(../Image/Logo.png) white no-repeat 20px center; color:#2a2a2a; background-size:100px; text-indent:110px; border:1px solid #121212; border-bottom:0px; border-radius:5px 5px 0px 0px;box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2), 0px 0px 0px rgba(0, 0, 0, 0); }
.PageTtitle > div{flex:1; vertical-align:text-bottom; height:100%; position:relative; top:2px; font-size:2em; font-weight:700; color:#3a3a3a}
.PageInfo{ font-size:1.3em; line-height:33px; background:rgba(0,0,0,0.5); padding:20px; border:1px solid black;  border-radius:0px 0px 5px 5px;box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5), 0px 0px 0px rgba(0, 0, 0, 0);}
.PageInfo > b{font-size:1.3em;}

.SubVendorArea{width: 100%; display:flex; flex-wrap:wrap; padding-bottom:16px;}
.SubVendorArea:hover .SubVendor{filter:grayscale(65%)}
.SubVendorArea .SubVendor:hover{filter:none}
.SubVendor{width: 16.66%; padding:5px;}
.SubVendorArea{width: 100%; display:flex; flex-wrap:wrap; padding-bottom:10px; }
.SubVendorArea{width: 100%; display:flex; flex-wrap:wrap; padding-bottom:10px; }
.SubVendorInner{overflow:hidden; background-color:white; border:1px solid #747474; padding:0px; text-align:center; box-shadow: 0px 0px 3px  rgba(0,0,0,0.8); border-radius:5px; cursor:pointer; transition:all 50ms}
.SubVendorInner:hover{transform:scale(1.00);box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6), 0px 0px 0px rgba(0, 0, 0, 0);}
.SubVendorInner:hover > .SubVendorTitle {background-color:#1a1a1a; color:yellowgreen;;}
.SubVendorInner:hover > div > img {background-color:#23204b; color:black;}
.SubVendorInner:active{transform:scale(1)}
.SubVendorTitle{background-color:#f5f5f5;  text-shadow:0px 0px 6px rgba(255, 255, 255, 0.4),1px 1px 2px rgba(0, 0, 0, 0.6);font-size:2.5em;  font-weight:900; padding:20px 5px 20px 5px; color:#23204b; border-top:1px solid black; transition:all 50ms}
.SubVendorSport{width:33.3%}

.ListArea{width: 100%; display:flex; flex-wrap:wrap; padding-bottom:10px;}
.ListWriter{}
.ListTitle{}
.ListOnlyTitle{ width:100%; padding:0px 5px 4px 5px;  }
.OnlyTitleInner{ cursor:pointer; color:#1a1a1a; font-size:1.4em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:900; border:1px solid black; border-radius:3px; padding:20px; transition:all  150ms; background:url(../Image/Notice.png) #dbdbdb no-repeat 20px center; background-size:25px; text-indent:30px;}
.OnlyTitleInner:hover{color:#3d379d;  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6), 0px 0px 0px rgba(0, 0, 0, 0);border:1px solid #2a2a2a;}

.ListOnlyTitleQ{ width:100%; justify-content:left; padding:5px 5px 5px 5px;  }
.OnlyTitleInnerQ{ display:flex; justify-content:flex-start; cursor:pointer; font-size:1.4em; border-radius:3px; padding:10px 20px 10px 30px; border:1px solid black; font-weight:900; color:black; transition:all  150ms; background:#dbdbdb no-repeat 20px center;  background-size:25px;}
.OnlyTitleInnerQ:hover{color:#3d379d;  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6), 0px 0px 0px rgba(0, 0, 0, 0);border:1px solid #2a2a2a;}
.OnlyTitleInnerQ > div{padding-right:15px; color:#2a2a2a; font-size:1.2em;}

.MoneyBox{width:100%; max-width:1600px; margin:0 auto;}
.FlaxBoxArea{ width:100%; display:flex; flex-wrap:wrap;}
.FlaxBoxBtn{ width:25%; padding:5px;}.FlaxBoxBtn > input{font-size:1.5em; padding:20px;}
.FlaxBoxText{padding:3px; width:100%;}.FlaxBoxText > input{font-size:3em; padding:20px; width:100%; text-align:center;}

.ListView{ width:100%; overflow-y:scroll; display:flex; flex-wrap:wrap; align-content:start;}

.SlotGameItem{padding:10px; width:20%; cursor:pointer; transition:all 200ms}
.SlotGameItem:active{transform:scale(0.98)}.SlotGameItem:active > img{transform:scale(1);background-color:rgba(38,49,84,0.8);}
.SlotGameIMG > img{width:100%; border-radius:5px 5px 0px 0px !important; background-color:rgba(38,49,84,0.4); padding:0px;}
.SlotGameTITLE{font-size:1.5em; font-weight:700; border-radius:0px 0px 5px 5px; text-align:center; background-color:rgba(0,0,0,0.8); padding:20px 10px 20px 10px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ThOnlyIcon > img{background:linear-gradient(to right, rgba(15,19,31,0.8), rgba(38,49,84,0.4)) !important;}

.OverViewContentBoard {width:100%; padding-bottom:10px; color:white; border-radius:0px 0px 10px 10px; overflow:hidden; color:white; background-color:#1a1a1a}
.OverViewContentComent {width:100%;  padding:20px; color:white; border-radius:0px 0px 0px 0px; background-color:#1a1a1a; color:white; }
.BoardContent{font-size:1.4em!important; line-height:45px!important;}

.PopUpItem{position:fixed; width:25%;  border:0px solid rgba(0,0,0,1); border-radius:10px; padding:10px 0px 20px 0px; font-size:0.9em}
.PopUpContent{padding:0px ;border:0px solid rgba(255,255,255,0.6); background-color:#1a1a1a; border-radius:10px;}
.PopUpContent > .WM{padding:0px; text-align:left; color:black}
.PopUpContent > .WM > img{width:100%; display:block}.PopUpContent > .DT {cursor:pointer; padding:10px}
.PopUpContent >.PopUpTitleText{font-size:1.4em; background-color:#1a1a1a; border-radius:10px 10px 0px 0px;  color:white; padding:10px; font-weight:900}
.PopUpContent >.PopUpContentText{line-height:20px; max-height:300px; overflow-y:auto; padding:20px 10px 20px 10px; background-color:#dddddd}

.FlexBox{display:flex; width:100%;}
.FlexBoxWrap{display:flex; width:100%; flex-wrap:wrap;}

.MobileMenu{width:60px; position:fixed; bottom:20px; left:20px; z-index:900; display:none; transition:all 200ms}
.MobileMenu:active{transform:scale(0.95)}

@media screen and (max-width: 1200px) {
    .MenuItem{font-size:1.2em; padding:5px 10px 5px 10px;}
    .MenuItemSelect{font-size:1.3em; padding:5px 10px 5px 10px;}
}

@media screen and (max-width: 740px) { 
    .PopUpItem{width:95%; position:fixed; margin:0 auto;}
    .MobileShow{display:block}
    .MobileHide{display:none}
    
    header{padding:0px;  }
    .MenuArea{justify-content:center; padding:5px; border-radius:0px}
    .Logo{margin:auto;}.Logo > img{width:100px; transform:scale(1)}
    .MenuItem{display:none;}
    .MenuItemSelect{display:none;}

    .MobileMenu{display:block;}
    .FlaxBoxBtn > input{font-size:1em; padding:10px;}
    .Top{padding:0px;}
    .StatusArea{ justify-content:center; border-radius:0px; padding:5px;}
    .LoginControl > div{padding:3px;flex:1!important; width:auto!important; }

    .Content{padding:0px}


    .SubVendor{width: 33.33%; }
    .SubVendorTitle{font-size:1em; font-weight:700}
    .LoginControl{width:100%;}
    .LoginControl > div > input,button{font-size:0.9em!important;}

    .SlotGameItem{width:33.3%}
    .OnlyTitleInner{font-size:1em;background:url(../Image/Notice.png) #dbdbdb no-repeat 10px center; background-size:30px; font-weight:400; text-indent:30px;}

    .PageInfo{font-size:1em; font-weight:400 }

    .PageTtitle{padding:15px 5px 15px 5px; display:flex; align-items:center;  background:url(../Image/Logo.png) #dbdbdb no-repeat 10px center; background-size:40px; text-indent:55px; border:1px solid #121212; border-bottom:-10px; border-radius:5px 5px 0px 0px;box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2), 0px 0px 0px rgba(0, 0, 0, 0); }
    .PageTtitle > div{flex:1; vertical-align:text-bottom; height:100%; position:relative; top:0px; font-size:1em; font-weight:600; color:white}    
    .OnlyTitleInnerQ > div{padding-right:5px;  font-size:1em; font-weight:300}
    .OverViewTitleBar{font-size:1.2em;}
    .BoardContent{font-size:1em!important; line-height:20px!important; height:90%!important; overflow-y:scroll!important}
}

@media screen and (max-width: 500px) {
    .LoginControl > div > input,button{padding:5px 2px 5px 2px !important;}
    .SubVendor{width: 33.33%; }
}


/* stagger delay for each letter */
@keyframes glow {0%, 100% {text-shadow: 0 0 5px #fffd1a, 0 0 10px #3d379d, 0 0 20px #3d379d;transform: scale(1) rotate(0deg);opacity: 1;}50% {text-shadow: 0 0 20px #3d379d, 0 0 30px #3d379d, 0 0 40px #3d379d;transform: scale(1.2) rotate(3deg);opacity: 0.85;}}
.loader {font-family: sans-serif;font-size: 2em;font-weight: 700;color: #3d379d;display: flex;gap: 10px;justify-content: center;align-items: center;height: 100vh;}
.loader span {display: inline-block;font-size:0.9em;font-weight:900;animation: glow 1.6s infinite ease-in-out;}


.loader span:nth-child(1) { animation-delay: 0s; }
.loader span:nth-child(2) { animation-delay: 0.1s; }
.loader span:nth-child(3) { animation-delay: 0.2s; }
.loader span:nth-child(4) { animation-delay: 0.3s; }
.loader span:nth-child(5) { animation-delay: 0.4s; }
.loader span:nth-child(6) { animation-delay: 0.5s; }
.loader span:nth-child(7) { animation-delay: 0.6s; }

/* stagger delay for each letter */
.neon-flicker {display: block;filter: grayscale(60%) brightness(0.9);animation: smoothFlicker 4s infinite ease-in-out both;}
@keyframes smoothFlicker {0%   { filter: grayscale(60%) brightness(0.9); }15%  { filter: grayscale(20%) brightness(1.1); }25%  { filter: grayscale(20%) brightness(1.1); }35%  { filter: grayscale(60%) brightness(0.9); }50%  { filter: grayscale(60%) brightness(0.9); }60%  { filter: grayscale(10%) brightness(1.05); }70%  { filter: grayscale(60%) brightness(0.9); }85%  { filter: grayscale(30%) brightness(1.02); }100% { filter: grayscale(60%) brightness(0.9); }}