@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;0,900;1,300;1,800&display=swap');
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@font-face {font-family:"Noto Sans KR";font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}
@font-face {font-family:"Noto Sans KR";font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}
@font-face {font-family:"Noto Sans KR";font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}
@font-face {font-family:"Noto Sans KR";font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}
@font-face {font-family:"Noto Sans KR";font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}
@font-face {font-family:"Noto Sans KR";font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}
* {margin: 0;padding: 0;box-sizing: border-box; font-family: 'Poppins', sans-serif; font-size:9pt}
html,body,form{color:#4e4242; height:100%; background:url(../Image/boom-background.png) no-repeat #0b0b0b; background-position:center center; background-attachment:fixed; background-size:cover} 
table{ width:100%; border-spacing:0; border-collapse:collapse;}
 th{position:sticky; padding:10px; z-index:10; background-color:#2a2a2a; color:white; top:0px;}
 tr{width:100%!important;}
 td{padding:10px; text-align:center;  border-bottom:1px solid #2a2a2a;}
.NoPadding{padding:0px !important}img{width:100%; display:block;}.Clear{clear:both; height:10px;}

::-webkit-scrollbar {width: 6px;background-color:black;}
::-webkit-scrollbar-thumb {background-color:#183d83; border-radius:3px}

input, textarea,select {-webkit-appearance: none; -webkit-border-radius: 0; border-radius: 0; appearance: none; outline:none;}
input[type=text] {width:100%; font-weight:600;  border-radius:5px; box-sizing:border-box; padding:8px 10px 8px 10px; font-size:1.1em; color:white; border:2px solid #3a3a3a; background-color:black; transition:all 200ms}
input[type=text]:hover {border:2px solid #5a5a5a}
input[type=text]:focus {border:2px solid #1d89bb; box-shadow: 0px 0px 10px  rgba(29.137.187,0.5);}

input[type=password] {width:100%; font-weight:600;  border-radius:5px; box-sizing:border-box; padding:8px 10px 8px 10px; font-size:1.1em; color:white; border:2px solid #3a3a3a; background-color:black; transition:all 200ms}
input[type=password]:hover {border:2px solid #5a5a5a}
input[type=password]:focus {border:2px solid #1d89bb; box-shadow: 0px 0px 10px  rgba(29.137.187,0.5);}

.InputInfo{padding:20px 10px 5px 10px !important; font-size:1.2em; font-weight:500}

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 #4a4a4a}
select:focus {border:2px solid #6a6a6a; box-shadow: 0px 0px 10px rgba(255,255,255,0.5)}

textarea{width:100%; font-weight:600;  border-radius:5px; box-sizing:border-box; padding:15px; font-size:1.1em; color:white; border:1px solid #3a3a3a; background-color:black; resize:none; height:200px; transition:all 200ms}
textarea:hover {border:2px solid #5a5a5a}
textarea:focus {border:2px solid #1d89bb; box-shadow: 0px 0px 10px  rgba(29.137.187,0.5);}

input[type=button] {width:100%; font-weight:600; 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:600; 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;}


.BtnPink{background-color:#a0231d!important; border:1px solid black; padding:10px!important; color:black!important}
.BtnPink:active{background-color:#d73961!important}

i{ font-size:1.3em; cursor:pointer; transition:all 200ms }i:active{ color:#9a9a9a }
.TL{text-align:left}.TC{text-align:center}.TR{text-align:right}

.OverView{position:fixed; width:100%; height:100%; display:none; z-index:100;  background-color:rgba(0,0,0,0.5); backdrop-filter:contrast(250%) blur(10px);}
.OverViewArea{display:flex; width:100%; height:100%; padding:10px; align-items:center; overflow-y:scroll;justify-content:center;overflow:auto; padding-top: 30px; }
.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:10px; top:0px; opacity:1}
.OverViewItemBox{background-color:rgba(0,0,0,1); width:100%; border-radius:15px; border:0px solid #0e0e0e; box-shadow: 0px 0px 150px rgba(255,255,255,0.5); }
.OverViewTitleBar {width:100%;font-size:1.6em; font-weight:600; padding:10px; background:url(../Image/Logo2.png) no-repeat rgba(0,0,0,0); box-shadow: 0px 10px 1px rgba(0,0,0,0.2);border-bottom:1px solid #1a1a1a; border-radius:15px 15px 0px 0px; color:#a0231d;  background-size:40px; text-indent:42px; background-position:6px 2px}
.OverViewTitleBar > i{float:right; position:relative; top:2px; color:gray; transition:all 200ms;}
.OverViewTitleBar > i:hover{color:white}
.OverViewTitleBar > i:active{color:#d52526}
.OverViewContent {width:100%;padding:10px; color:white; border-radius:0px 0px 15px 15px; color:white; background:url(../Image/boom-background-OverView.png) center center no-repeat; background-size:cover }


.LoginBox{width:100%; padding:10px; max-width:400px; margin:0 auto; padding:30px; border-radius:3px; background-color:rgba(0,0,0,0)}
.LoginBox > div{padding:5px}.LoginBox > div > input[type=text],input[type=password]{font-size:1.3em; padding:10px;}
.InfoText{color:#9a9a9a; line-height:33px; padding-top:20px !important;}

.JoinBox{width:100%; padding:10px; max-width:400px; display:flex; flex-wrap:wrap; margin:0 auto; padding:30px; border-radius:3px; background-color:rgba(0,0,0,0)}
.JoinBox > div{width:50%; padding:3px;}.JoinBox > div > div{padding:10px}.JoinBox > div > input[type=text],input[type=password]{font-size:1.3em; padding:10px;}


.Header{background:url(../Image/header.png) no-repeat center center; background-size:cover; border-bottom:1px solid #1a1a1a; padding:10px; position:sticky;top:0px; z-index:99; border-bottom:0px solid #1d89bb; box-shadow: 0 4px 4px -4px rgba(0,0,0,1);}
.MenuArea{width:100%; max-width:1400px; margin:0 auto; display:flex; align-items:center}
.MenuLogo{width:230px;  text-align:center; cursor:pointer;}.MenuLogo > img{width:65%; margin:0 auto}
.MenuItem{flex:1; text-align:center; padding:20px; line-height:20px; font-weight:300; cursor:pointer; color:white}
.MenuItem > div > b{ font-family: 'Noto Sans KR', sans-serif;font-size:1.8em; font-weight:900; transition:all 200ms}
.MenuItem:hover{background:linear-gradient(to bottom,#1e89d9, #0f65bd);color: transparent;-webkit-background-clip:text; }
.MenuItem:active{background:linear-gradient(to bottom,#a0231d, #a0231d);color: transparent;-webkit-background-clip:text; }
.MobileMenuArea{display:none; width:100%; align-items:center;} .MobileMenuArea > div{flex:1; padding:3px; color:white} .MobileMenuArea > .MenuLogo > img{width:45px;}

.Status{width:100%; padding:10px 20px 10px 20px; position:sticky; top:105px; z-index:99; border-top:1px solid #0d4aaa; background-color:rgba(0,0,0,1);}
.StatusBar{ flex:1; color:white; margin:0 auto; text-align:right; padding:10px 60px 10px 10px;}
.StatusBar > label{padding-left:6px; font-size:1.1em; cursor:pointer; transition:all 200ms}
.StatusBar > label:active{opacity:0.5}

.StatusBarMobile{display:none; text-align:center}
.StatusBarMobile > label{padding:3px; color:#a0231d; font-weight:600; font-size:1.1em; cursor:pointer; transition:all 200ms}
.StatusBarMobile > label:active{opacity:0.5}

.ContentArea{width:100%; max-width:1400px; padding:10px 20px 20px 20px;  margin:0 auto;}
.FlexBox{display:flex; width:100%;}
.FlexBoxWrap{display:flex; width:100%; flex-wrap:wrap;}

.Box100{width:100%; padding:5px;}.Box95{width:95%; padding:5px;}.Box90{width:90%; padding:5px;}.Box85{width:85%; padding:5px;}.Box80{width:80%; padding:5px;}
.Box75{width:75%; padding:5px;}.Box70{width:70%; padding:5px;}.Box65{width:65%; padding:5px;}.Box60{width:60%; padding:5px;}.Box55{width:55%; padding:5px;}.Box50{width:50%; padding:5px;}
.Box45{width:45%; padding:5px;}.Box40{width:40%; padding:5px;}.Box35{width:35%; padding:5px;}.Box30{width:30%; padding:5px;}.Box25{width:25%; padding:5px;}.Box20{width:20%; padding:5px;}
.Box15{width:15%; padding:5px;}.Box10{width:10%; padding:5px;}.Box5{width:5%; padding:5px;}

.ItemBox{background-color:rgba(0,0,0,1); padding:10px; border-radius:5px; border:1px solid #0e0e0e;box-shadow: 0px 0px 5px black; }

.TitleBar{font-size:1.6em; font-weight:600; padding:10px; border-radius:5px 5px 0px 0px!important; color:white; font-weight:900;  background-size:40px; text-indent:10px; background-position:10px 2px}
.ThirdPartyBanner {padding:10px; display:flex; align-items:center; background-color:rgba(0,0,0,0.8); border:1px solid black; border-radius:0px 0px 5px 5px!important; border-radius:5px;}
.ThirdPartyBanner > img{width:50%; cursor:pointer; transition:all 200ms}
.ThirdPartyBanner > img:hover{transform:scale(1.1)}
.ThirdPartyBanner > img:active{transform:scale(0.95)}
.ThirdPartyBanner > div{width:50%; text-align:center; cursor:pointer; font-size:1.3em; font-weight:600; color:white;transition:all 200ms}
.ThirdPartyBanner > div:hover{color:#ff6a00}
.ThirdPartyBanner > div:active{color:#d52526}

.ThTitle{padding:5px 5px 10px 5px; font-size:0.95em; font-weight:600}


.FooterArea{ width:100%; padding:40px 10px 40px 10px; margin:0 auto; background-color:rgba(0,0,0,0.5);} 
.FooterArea > div{width:100%; margin:0 auto; padding:30px; color:white; max-width:1000px; text-align:center;} .FooterArea > div > img {width:80%;}

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

.SlotGameItem{padding:5px; width:16.6%; 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:1em; font-weight:400; border-radius:0px 0px 5px 5px; text-align:center; background-color:rgba(0,0,0,0.8); padding: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;}

.CasinoBanner{width:16.6%;; padding:5px; cursor:pointer; background:url(../Image//Casino/casinoBack.png) no-repeat center center; background-size:cover;  transition:all 200ms}.CasinoBanner > img{width:100%; border-radius:45% 45% 0px 0px;background-color:rgba(0,0,0,0.7)}
                                                                              .CasinoBanner:hover{transform:scale(1.15)}
.CasinoBanner:active{transform:scale(0.98)}
.CasinoBannerTitle{background-color:rgba(0,0,0,1); width:100%; text-align:center; padding:35px 10px 30px 10px; color:white; font-weight:600; font-size:1.3em; border-radius:0px 0px 50% 50%}

.SlotBanner{width:16.6%;; padding:5px; cursor:pointer; transition:all 200ms}.SlotBanner > img{width:100%; border-radius:45% 45% 0px 0px; background-color:rgba(0,0,0,0.7)}
                                                                            .SlotBanner:hover{transform:scale(1.15)}
.SlotBanner:active{transform:scale(0.98)}
.SlotoBannerTitle{background-color:rgba(0,0,0,1); width:100%; text-align:center; padding:35px 10px 30px 10px; color:white; font-weight:600; font-size:1.3em; border-radius:0px 0px 50% 50%}


.FlaxBoxArea{display:flex; flex-wrap:wrap}
.FlaxBoxBtn{width:25%; padding:3x;}
.FlaxBoxText{width:100%; padding:1px;} .FlaxBoxText > input[type=text]{font-size:2em; text-align:center;}

.PageBox{padding:20px;}
.SubTitle{font-size:3em; background-color:rgba(0,0,0,0.7); padding:20px 20px 0px 30px; border-radius:10px 10px 0px 0px; font-weight:900; color:rgba(255,255,255,1)}
.Info{font-size:1.2em; background-color:rgba(0,0,0,0.7); line-height:40px; padding:10px 20px 20px 20px; border-radius:0px 0px 10px 10px; font-weight:300; color:rgba(255,255,255,1)}


.BaordList{padding:0px; font-weight:100 !important;}
.PageListArea{display:flex; flex-wrap:wrap;background-color:rgba(0,0,0,0.0);font-size:0.95em; padding:10px 0px 10px 0px;  border-radius: 0px 3px 3px 0px; font-size:1.2em; border:1px solid #ffd700; border:0px; color:white!important;}
.PageListArea > div{border:1px solid rgba(0,0,0,0.1);}
.ListTitle{width:65%; background-color:rgba(0,0,0,0.5); text-align:left; padding:5px; text-indent:3px; cursor:pointer; transition: 300ms;}.ListTitle:hover{text-indent:5px}
.ListDate{width:25%; text-align:center; background-color:rgba(0,0,0,0.5); padding:5px;}.ListStatus{width:10%; text-align:center; background-color:rgba(0,0,0,0.5); padding:5px;}
.ListTitle2{width:75%; background-color:rgba(0,0,0,0.5); padding:5px; cursor:pointer; text-indent:3px; transition:all 300ms;}.ListTitle2:hover{text-indent:5px}
.ListDate2{width:20%; text-align:center; background-color:rgba(0,0,0,0.5); padding:5px;}
.ComentArea{padding:20px; background-color:black; border:1px solid #3a3a3a; border-top:0px; border-radius:0px 0px 10px 10px}
.ComentArea02{padding:20px; background-color:black; border:1px solid #3a3a3a; border-top:0px; border-radius:0px 0px 10px 10px}
.ListContent{background:url(../Image/Notice.png) no-repeat rgba(0,0,0,1); background-size:40px; text-indent:42px; background-position:0px 0px; font-size:1.2em; width:100%; padding:10px;}

.OverViewContentBoard {width:100%; padding:20px; color:white; border-radius:0px 0px 0px 0px; color:white; background-color:black}
.OverViewContentComent {width:100%; padding:20px; color:white; border-radius:0px 0px 0px 0px; background-color:black; color:white; }
.OverViewContentfooter{width:100%; padding:20px; color:white; border-radius:0px 0px 10px 10px; background-color:black; color:white; }

.PopUpItem{position:fixed; width:500px;  border:0px solid rgba(0,0,0,1); background-color:black; border-radius:10px; 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; height:400px; overflow-y:scroll;padding:3px 10px 3px 10px; background-color:#dddddd}

.ViewContent{max-height:500px; overflow-y:scroll}


.GameSelectorArea{padding:10px; width:50%;  background-color:rgba(0,0,0,0); transition:all 300ms }
.GameSelectorArea:hover > div > img{transform:scale(1.2);filter:grayscale(0); opacity:1}
.GameSelectorArea:hover > div > div > span{color:#28bbff;}
.GameSelectorArea:hover > div > div > p{color:white}
.GameSelectOver{ filter:grayscale(100); transition:all 200ms; opacity:0.5; z-index:99 }
.GameSelectOver:hover{  animation:GameSelectOver 0.5s alternate 1;animation-fill-mode: forwards; }


.GameSelectorAreaSelect{padding:10px; width:50%;  background-color:rgba(0,0,0,0); transition:all 300ms }
.GameSelectorAreaSelect > div{background:linear-gradient(45deg,#1d89bb,#28bbff);}
.GameSelectorAreaSelect > div > img{transform:scale(1.2);filter:grayscale(0); opacity:1}
.GameSelectorAreaSelect > div > div > span{color:#28bbff;}
.GameSelectorAreaSelect > div > div > p{color:white}

@keyframes GameSelectOver{0%   {transform:scale(1);filter:grayscale(100);}100%   {transform:scale(1.2);filter:grayscale(0); opacity:1}}

.GameSelectorCasino{width:100%; position:relative;box-shadow: 0px  0px 10px 4px rgba(0,0,0,1);  overflow:hidden; border:2px solid rgba(0,0,0,0); background:linear-gradient(45deg,#2a2a2a,#1a1a1a); transform: skew(0deg); border-radius:10px; cursor:pointer; transition:all 200ms}
.GameSelectorCasino:hover{background:linear-gradient(45deg,#1d89bb,#28bbff);}
.GameSelectorCasino > img{width:100%;}
.GameSelectorCasino > div{position:absolute; margin:0 auto; width:100%; text-align:right; padding:10px 60px 10px 10px ;top:50%; right:0px; transform:translateY(-50%); color:white; transition:all 200ms}
.GameSelectorCasino > div > span{font-size:3em; font-weight:900; text-shadow: 1px 1px black;transition:all 200ms}
.GameSelectorCasino > div > p{font-size:1em; color:gray; font-weight:900; transition:all 200ms}

.GameSelectorSlot{width:100%; position:relative;box-shadow: 0px  0px 10px 4px rgba(0,0,0,1);  overflow:hidden; border:2px solid rgba(0,0,0,0); background:linear-gradient(45deg,#2a2a2a,#1a1a1a); transform: skew(0deg); border-radius:10px; cursor:pointer; transition:all 200ms}
.GameSelectorSlot:hover{background:linear-gradient(45deg,#1d89bb,#28bbff);}
.GameSelectorSlot > img{width:100%;}
.GameSelectorSlot > div{position:absolute; margin:0 auto; width:100%; text-align:right; padding:10px 60px 10px 10px ;top:50%; right:0px; transform:translateY(-50%); color:white; transition:all 200ms}
.GameSelectorSlot > div > span{font-size:3em; font-weight:900; text-shadow: 1px 1px black;transition:all 200ms}
.GameSelectorSlot > div > p{font-size:1em; color:gray; font-weight:900; transition:all 200ms}

.BetListType{ width:10%;}
.BetListTime{ width:15%;}
.BetListVendor{ width:20%;}
.BetListTitle{ width:20%;}
.BetListBet{ width:10%; text-align:right}
.BetListWin{ width:10%; text-align:right}
.BetListBetID{width:10%; cursor:pointer; font-weight:600; color:yellow}
.BetListHeader{background-color:#1a1a1a; color:white; font-size:1.2em; font-weight:600}

@media screen and (max-width: 900px) {
    .MenuLogo{width:150px;}.MenuLogo > img{width:80px!important; position:relative; top:3px;}
    .MenuItem > div > b{font-size:1.2em; font-weight:600;}
    .Status{top:66px;}
    .Box50{width:100%}
    .CasinoBanner{width:25%}
    .SlotBanner{width:25%}
}

@media screen and (max-width: 630px) {
    .StatusBar{text-align:center; font-size:0.85em!important}
    .StatusBar > label{padding:2px;}
    .Status{top:73px;}
    .MobileHide{display:none}
    .MenuItem{font-size:0.9em}
    
    .StatusBarMobile{display:block; text-align:center}

    .ContentArea{padding:5px;}

    .MenuArea {
        display: none;
    }
    .MobileMenuArea{display:flex}
    .CasinoBanner{width:33.3%}
    .SlotBanner{width:33.3%}
    .SubTitle{font-size:1.5em ;font-weight:100; padding:20px 20px 0px 20px;}
    .Info{font-size:0.95em; line-height:30px; padding:10px 20px 20px 20px; }
    .SlotGameItem{width:25%;}
    .SlotGameTITLE{font-size:0.95em;}
    .ListTitle{width:85%; background-color:rgba(0,0,0,0.5); text-align:left; padding:5px; cursor:pointer; transition: 300ms;}.ListTitle:hover{color:orangered; text-indent:5px}
    .ListDate{width:100%; text-align:left; background-color:rgba(0,0,0,0.5); padding:5px;}.ListStatus{width:15%; text-align:center; background-color:rgba(0,0,0,0.5); padding:5px;}
    .ListTitle2{width:100%; background-color:rgba(0,0,0,0.5); border-top:0px; padding:5px; cursor:pointer; transition:all 300ms;}.ListTitle2:hover{color:orangered; text-indent:5px}
    .ListDate2{width:100%; text-align:left; border-bottom:0px; background-color:rgba(0,0,0,0.5); padding:5px 5px 0px 5px;}

    .PopUpItem{width:95%; position:fixed; margin:0 auto;}
    
    .GameSelectorCasino > div > span{font-size:1em;}
    .GameSelectorSlot > div > span{font-size:1em;}
    .GameSelectorSlot > div{padding:10px 10px 10px 10px}
    .GameSelectorCasino > div{padding:10px 10px 10px 10px}

    .BetListType{ width:15%;}
    .BetListTime{ width:25%;}
    .BetListVendor{ width:30%;}
    .BetListTitle{ display:none}
    .BetListBet{ width:15%; text-align:right}
    .BetListWin{ width:15%; text-align:right}
    .BetListBetID{display:none;}
}

.loader {width: 50px;height: 50px;border-radius: 50%;margin: 3em;display: inline-block;position: relative;vertical-align: middle;}
.loader, .loader:before ,.loader:after {animation: 1s infinite ease-in-out;}
.loader:before,.loader:after {width: 100%;height: 100%;border-radius: 50%;position: absolute;top: 0;left: 0;}
.loader-black {background-color: transparent;}
.loader-3:before {content: '';border: 10px solid #158ced;top: -10px;left: -10px;animation-name: loader3;}
@keyframes loader3 {0% {transform: scale(0);}100% {transform: scale(1);}}
.loading{margin:0 auto;  padding:30px 30px 10px 30px}
.loading span {
    display: inline-block; /* span 내부요소들을 한줄로 세우기 */
    width: 20px;
    height: 20px;
    padding: 3px;
    border-radius:50%;
    background-color: gray;
    animation: loading 1s 0s linear infinite;
    /* 이벤트명  반복시간  딜레이시간  이벤트처리부드럽게  이벤트무한반복*/
}

    .loading span:nth-child(1) { /*loading의 자식 중 첫번째 span*/
        /*nth-child : 형제 사이에서의 순서*/
        animation-delay: 0s;
        background-color: #d52526;
    }
  
  .loading span:nth-child(2) {
    animation-delay: 0.2s;
    background-color: #d52526;
  }

    .loading span:nth-child(3) {
        animation-delay: 0.4s;
        background-color: #d52526;
    }
@keyframes loading {        /*loading이라는 keyframe 애니메이션*/
    0%,                      /* 0, 50, 100은 구간*/
    100% {
      opacity: 0;            /* 안보였다가 */
      transform: scale(0.3); /*transform의 scale로 요소를 확대 또는 축소할 수 있음*/   
    }
    50% {
      opacity: 1;             /* 보였다가 */
      transform: scale(1); /* 1.2배 */
    }
  }