@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; animation-name:BackAni; background-position:center center; background-attachment:fixed; background-size:cover} table{width:100%;}
@keyframes BackAni {0% {opacity:1;}50% {opacity:0.5;}100% {opacity:0;}}
.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:linear-gradient(-45deg, #26D0CE,#1A2980);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 #4a4a4a}
input[type=text]:focus {border:2px solid #6a6a6a; box-shadow: 0px 0px 10px  rgba(255,255,255,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 #4a4a4a}
input[type=password]:focus {border:2px solid #6a6a6a; box-shadow: 0px 0px 10px rgba(255,255,255,0.5);}
.InputInfo{padding:20px 10px 5px 10px !important; font-size:1.2em; font-weight:500}

.BtnBlue{width:60%!important; padding:7px 7px 5px 5px!important; background:linear-gradient(-45deg, #1488CC, #2B32B2) !important;color:white!important;box-shadow: 0px  0px 15px 4px rgba(122,192,250,0.7);  border:1px solid rgba(0,0,0,0.1); border-radius:40px !important; transition:all 200ms}
.BtnRed{width:60%!important; padding:7px 7px 5px 5px!important; background:linear-gradient(-45deg, #fc6767, #ec008c) !important;color:white!important;box-shadow: 0px  0px 15px 4px rgba(122,192,250,0.7);  border:1px solid rgba(0,0,0,0.1); border-radius:40px !important; transition:all 200ms}
.BtnBlueBasic{background:linear-gradient(-45deg,#1488CC, #2B32B2) !important;color:white!important; transition:all 200ms}
.BtnRedBasic{background:linear-gradient(-45deg, #fc6767, #ec008c) !important;color:white!important; transition:all 200ms}
.BtnPurple{background:linear-gradient(-45deg, #f805af, #6130e3) !important;color:white!important; transition:all 200ms}

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:1px solid #4a4a4a}
textarea:focus {border:1px solid #0a5ef8; box-shadow: 0px 0px 10px #0a5ef8;}

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

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; color:white; background:linear-gradient(-45deg, #26D0CE,#1A2980); border-radius:10px 10px 0px 0px}
.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-image: linear-gradient(#2b3343, #181d27); 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-color: rgba(11, 13, 17, 0.75); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);position:fixed;  border-bottom: solid 1px #475775; background-image:url(../Image/header-bg.png) ; height:126px; width:100%; position:fixed;top:0px; z-index:99; border-bottom:0px solid #d52526; box-shadow: 0 4px 4px -4px rgba(0,0,0,1);}
.MenuArea{width:100%; max-width:1300px; height:70px; background-image: linear-gradient(#2b3343, #181d27); margin:0 auto; border-bottom: solid 0px #354255; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 1.0)); display:flex; align-items:center}
.StatusArea{width:100%; max-width:1300px; color:white; display:flex; margin:0 auto; }

.MenuLogo{width:180px; text-align:center; cursor:pointer; margin-top:0px;align-self: flex-start}.MenuLogo > img{width:100%; margin:0 auto;}
.MenuItem{flex:1; text-align:center;   line-height:20px; font-weight:300; font-size:1em; cursor:pointer; color:white}
.MenuItemLeft{width:30px; height:70px; background-image:linear-gradient(#2b3343, #181d27); transform:skew(15deg);left:0; border-left: solid 1px #354255; transform-origin: bottom left;}
.MenuItemRight{width:30px; height:70px;  background-image:linear-gradient(#2b3343, #181d27); transform:skew(-15deg);right:0; border-right: solid 1px #354255; transform-origin: bottom right; }

.MenuItem > div > b{ font-family: 'Noto Sans KR', sans-serif;font-size:2em; font-weight:900; transition:all 200ms}
.MenuItem:hover{background:linear-gradient(-45deg, #26D0CE,#1A2980); color: transparent;-webkit-background-clip:text; }
.MenuItem:active{background:linear-gradient(-45deg, #26D0CE,#1A2980); color: transparent;-webkit-background-clip:text; }
.MobileMenuArea{display:none; height:70px; width:100%; align-items:center;background-image: linear-gradient(#2b3343, #181d27);} .MobileMenuArea > div{flex:1; padding:3px; color:white} .MobileMenuArea > .MenuLogo > img{width:45px;}

.Status{width:100%; position:fixed; top:75px; z-index:100; background-color:rgba(20,20,20,1); display:none;}

.StatusBar{width:100%; display:flex; color:white; max-width:1280px; margin:0 auto;  padding:10px 20px 10px 20px;}
.StatusBar > div{padding:6px; flex:auto; font-size:1.1em; cursor:pointer; transition:all 200ms}
.StatusBar > div:active{opacity:0.5}
.StatusInnerCenter{display:flex; flex:1;}.StatusInnerCenter > div{width:auto;}
.StatusInnerLeft{display:flex; justify-content:left; flex:1}.StatusInnerLeft > div{width:auto; padding-right:25px; font-size:1.3em;}
.StatusInnerRight{display:flex;justify-content:right; flex:1}.StatusInnerRight > div{width:auto; padding-left:25px;font-size:1.3em; }

.ContentArea{width:100%; max-width:1400px; padding:170px 10px 10px 10px; position:relative; z-index:3;  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,0); padding:10px; border-radius:5px; border:0px solid #0e0e0e;box-shadow: 0px 0px 0px black; }

.TitleBar{font-size:1.6em; width:100%; max-width:300px; font-weight:600; padding:10px; border-radius:5px 5px 0px 0px!important; color:white;  background-size:40px; text-indent:50px; background-position:10px 2px}
.TitleBar > img {width:100%}
.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:20%; padding:10px; cursor:pointer;  transition:all 200ms}.CasinoBanner > div > img{width:100%; border-radius:15px 15px  0px 0px; }
.CasinoBanner:hover > div > * {top:0px; border-radius:15px; left:0px; opacity:1;}
.CasinoBanner > div {border-radius:15px; position:relative; z-index:0;  background-color:rgba(0,0,0,0.9); border:1px solid #1A2980; transition:all 200ms}
.CasinoBanner > div:hover {border-radius:15px;  box-shadow: 0px  0px 15px 4px rgba(122,192,250,0.7); border:1px solid #101010; transition:all 100ms}
.CasinoBanner > div > *{position:relative; top:-13px; left:-13px;transition:all 200ms}
.CasinoBanner:active{transform:scale(0.98)}
.CasinoBannerTitle{background:linear-gradient(-45deg, #2B32B2, #1488CC); width:100%; text-align:center; padding:25px 10px 25px 10px; color:white; font-weight:600; font-size:2em; border-radius:0px 0px 15px 15px}

.SlotBanner{width:20%; padding:10px; cursor:pointer;  transition:all 200ms}.SlotBanner > div > img{width:100%; border-radius:15px 15px  0px 0px; }
.SlotBanner:hover > div > * {top:0px;border-radius:15px; left:0px; opacity:1;}
.SlotBanner > div {border-radius:15px; position:relative; z-index:0;  background-color:rgba(0,0,0,0.8); border:1px solid #f016c6 transition:all 200ms}
.SlotBanner > div:hover {border-radius:15px;  box-shadow: 0px  0px 15px 4px rgba(168,24,24,0.7); border:1px solid #101010; transition:all 100ms}
.SlotBanner > div > *{position:relative; top:-13px; left:-13px;transition:all 200ms}
.SlotBanner:active{transform:scale(0.98)}
.SlotoBannerTitle{background:linear-gradient(to right, #fc6767, #ec008c); width:100%; text-align:center; padding:25px 10px 25px 10px; color:white; font-weight:600; font-size:2em; border-radius:0px 0px 15px 15px}

.BannerOverView{z-index:0; width:100%; margin:0 auto; background-color:rgba(0,0,0,0.6) !important; border:0px !important; position:absolute !important; width:100%; padding:10px; text-align:center; padding-top:35%; opacity:0; height:100%; top:0px!important;}

.FlaxBoxArea{display:flex; flex-wrap:wrap}
.FlaxBoxBtn{width:25%; padding:1px;}
.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:20px 20px 20px 20px; border-radius:0px 0px 10px 10px; font-weight:900; 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; border:1px solid #ffd700; border:0px;}
.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}


.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 10px 10px; background-color:#1a1a1a; 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; max-height:400px; overflow-y:scroll;padding:20px 10px 20px 10px; background-color:#dddddd}

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

.BackDisco{width:100%; position:fixed; top:0px; left:50%; transform: translate(-50%, 0); z-index:0; top:0px; animation: BgDisco 6s infinite } .BackAni > img{width:100%;}
.BackHighlight{width:100%; position:fixed; top:0px; left:50%; transform: translate(-50%, 0); z-index:1; animation: BgHighlight 3s infinite; } .BackAni > img{width:100%;}
@keyframes BgHighlight {0%   {opacity:0.2}50%   {opacity:0.8}100%   {opacity:0.2}}
@keyframes BgDisco {0%   {top:0px}50%   {top:50px;}100%   {top:0px;}}

.fairy {position:fixed; left: 48px;top: 75px; width:200px;transform-origin: top center;animation: fairyAnim 5s ease infinite; z-index:2}
.symbols {position:fixed; right: 30px;top: 120px; width:250px;transform-origin: top center;animation: symbolsAnim 5s ease infinite; z-index:3}
.dog {position:fixed; right: 10px; top: 130px; width:240px;transform-origin: top center;animation: dogAnim 5s ease infinite; z-index:2}
.sevens {position:fixed; left: 30px;top: 130px; width:280px;transform-origin: top center;animation: symbolsAnim 5s ease infinite; z-index:2}
@keyframes fairyAnim{0% {transform: rotate(-5deg);}50% {transform: rotate(5deg);}100% {transform: rotate(-5deg);}}
@keyframes symbolsAnim{0% {transform: scale(1.0);}50% {transform: scale(0.9);}100% {transform: scale(1);}}
@keyframes dogAnim{0% {transform: translateY(0);}50% {transform: translateY(7%);}100% {transform: translateY(0);}}


.LeftBG{ position:fixed; width:600px; bottom:-100px; left:0px; animation: LeftBG 4s ease infinite;}
.RightBG{ position:fixed; width:600px; bottom:-100px; right:0px; animation: RightBG 4s ease infinite;}
@keyframes LeftBG{0% {transform: translateX(0);}50% {transform: translateX(-12%);}100% {transform: translateX(0);}}
@keyframes RightBG{0% {transform: translateX(0);}50% {transform: translateX(12%);}100% {transform: translateX(0);}}





@media screen and (max-width: 900px) {
    .MenuLogo{width:180px;  }.MenuLogo > img{width:100%;top:0px;}
    .MenuItem > div > b{font-size:1.2em; font-weight:600;}

    .Box50{width:100%}
    .CasinoBanner{width:50%; font-size:1em; padding:5px;}
    .SlotBanner{width:50%; font-size:1em; padding:5px;}
}

@media screen and (max-width: 630px) {
    .Header{background-color: rgba(11, 13, 17, 0.75); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7); border-bottom: solid 1px #475775; background-image:url(../Image/header-bg.png) ; height:30px; width:100%; position:fixed;top:0px; z-index:99; border-bottom:0px solid #d52526; box-shadow: 0 4px 4px -4px rgba(0,0,0,0);}
    .StatusBar{text-align:center;  width:100%; font-size:0.85em!important; padding:0px; background-color:rgba(0,0,0,0.8)}
    .StatusBar > label{padding:2px;}
    .Status{top:72px;}
    .MobileHide{display:none}
    .MenuItem{font-size:0.9em}

    .MenuArea{display:none;}
    .MenuLogo{align-self:center; position:relative; top:15px; width:900px!important;}.MenuLogo > img{width:300px;}
    .MobileMenuArea{display:flex;box-shadow: 0px  0px 15px 4px rgba(122,192,250,0.7); background:linear-gradient(#2b3343, #181d27); height:60px; padding:10px; z-index:100;}
    
    .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;}

    .fairy {left: 45px;top: 70px; width:60px;}
    .symbols {right: 0px;top: 110px; width:170px;}
    .dog {right: 15px;top: 100px; width:120px;}
    .sevens{width:160px; top:100px; left:0px;}

    .LeftBG{display:none}
    .RightBG{display:none}

    .CasinoBannerTitle{font-size:1.3em}
    .SlotoBannerTitle{font-size:1.3em}

    .SlotBanner > div > *{position:relative; top:0px; left:0px;transition:all 200ms}
    .CasinoBanner > div > *{position:relative; top:0px; left:0px;transition:all 200ms}

    .StatusInnerRight > div{width:auto; padding-right:15px; padding-left:0px; }

    .ContentArea{padding:170px 0px 0px 0px;}

}

.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배 */
    }
  }