@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; user-select:none; font-family: 'Poppins', sans-serif; font-size:9pt}
html,body,form{color:#4e4242; height:100%; background:url(../Image/boom-background.png) no-repeat black;  background-position:center center; background-attachment:fixed; background-size:cover} table{width:100%;}
.NoPadding{padding:0px !important}img{width:100%;}.Clear{clear:both; height:10px;}

.BackVideo {position:fixed;top: 50%;left: 50%;min-width:100%; min-height: 100%;width: auto;height: auto;z-index:10; 
    transform:translateX(-50%) translateY(-50%);background: url('//demosthenes.info/assets/Images/polina.jpg') no-repeat;background-size: cover; transition:opacity; opacity:0.5 }

::-webkit-scrollbar {width: 8px;height: 8px;}
::-webkit-scrollbar-track {background: #1a1a1a;border-radius: 4px;}
::-webkit-scrollbar-thumb {background-color: #333333;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; }

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}

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:300px; 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 #240404; background-color:#901213; font-size:1.2em; transition:all 200ms}
input[type=button]:active {border:1px solid #240404; 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 #240404; background-color:#901213; font-size:1.2em; transition:all 200ms}
input[type=submit]:active {border:1px solid #240404; 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 !important}.TC{text-align:center !important}.TR{text-align:right !important}

.OverView{position:fixed; width:100%; height:100%; display:none; z-index:100; overflow:hidden;  background-color:rgba(0,0,0,0.5);backdrop-filter:contrast(250%) blur(5px); }
.OverViewArea{display:flex; width:100%; height:100%; align-items:center; overflow-y:scroll;justify-content:center;}
.OverViewInnerS{width:100%; max-width:450px; position:relative; padding:10px; top:0px; opacity:0}
.OverViewInnerSM{width:100%; max-width:550px; position:relative; padding:10px; top:0px; opacity:0; }
.OverViewInnerM{width:100%; max-width:600px; 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:#121212; 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: 15px 20px 15px 20px;background: linear-gradient(to bottom,rgba(70, 0, 0, 1) 10%,rgba(90, 0, 0, 1) 40%,rgba(70, 0, 0, 1) 100%);text-align:left;border-bottom: 1px solid #1a1a1a;color: white;border-radius: 15px 15px 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:url(../Image/boom-background-OverView.png) center center no-repeat; background-size:cover }

.MainCarouselItem> img{border-radius:0px !important;}

.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:white !important; line-height:33px; padding-top:20px !important; color:black}

.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: linear-gradient(to bottom,rgba(70, 0, 0, 1) 10%,rgba(90, 0, 0, 1) 40%,rgba(70, 0, 0, 1) 100%);backdrop-filter:contrast(250%) blur(5px);  padding:0px 10px 0px 10px; position:sticky; top:41px; z-index:99; border-bottom:0px solid #1a1a1a; box-shadow: 0 4px 4px -4px rgba(0,0,0,1);}
.MenuArea{width:100%; max-width:1800px; margin:0 auto; display:flex; align-items:center; padding:0px 20px 0px 20px}
.MenuLogo{width:120px;  text-align:center}.MenuLogo > img{width:100%; margin:0 auto}
.MenuItem{flex:1; text-align:right; padding:10px 20px 10px 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,deeppink, red);color: transparent;-webkit-background-clip:text; }
.MenuItem:active{background:linear-gradient(to bottom,skyblue, white);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:0px 20px 0px 20px; position:sticky; top:0px; z-index:99; background: linear-gradient(
  to bottom,
  #000000 100%,
  #000000 100%,
  #000000 100%
);}
.StatusBar{width:100%; color:white; max-width:1800px; margin:0 auto; text-align:right; padding:10px 20px 10px 20px;}
.StatusBar > label{padding-left:6px; font-size:1.1em; cursor:pointer; transition:all 200ms}
.StatusBar > label:active{opacity:0.5}

.ContentArea{width:100%; position:relative; z-index:30; max-width:1800px; 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:0px solid rgba(255,255,255,0.3);box-shadow: 0px 0px 1px #9a9a9a; }

.TitleBar{font-size:1.6em; font-weight:600; padding:10px; background:linear-gradient(to right, rgba(135,4,22,0.8), rgba(135,4,22,0.2));backdrop-filter:contrast(250%) blur(5px); border-radius:5px 5px 0px 0px!important; color:white; }
.ThirdPartyBanner {padding:10px; display:flex; flex-wrap:wrap; align-items:center; background-color:rgba(0,0,0,1); border:0px solid rgba(255,255,255,0.3); border-radius:5px!important; font-size:0.9em; border-radius:5px;}
.ThirdPartyBanner > img{width:16.66%; cursor:pointer; transition:all 200ms}
.ThirdPartyBanner > img:hover{transform:scale(1.1)}
.ThirdPartyBanner > img:active{transform:scale(0.95)}
.ThirdPartyBanner > div{width:16.66%; 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;transform:scale(0.95)}

.ThTitle{padding:20px; background-color:rgba(144,18,19,0.9); border:1px solid #901213; border-top:0px; font-size:1.2em; font-weight:600; border-radius:0px 0px 5px 5px}


.FooterArea{ width:100%; padding:40px 10px 40px 10px; position:relative; margin:0 auto; z-index:30; background:linear-gradient(to right, rgba(0,0,0,0.8), 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(0.98);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:10px;}
.SlotGameTITLE{font-size:1.2em; font-weight:400; border-radius:0px 0px 5px 5px; text-align:center; background-color:rgba(38,49,84,0.8); padding:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ThOnlyIcon{padding:5px;}
.ThOnlyIcon > img{background:linear-gradient(to right, rgba(15,19,31,0.8), rgba(38,49,84,0.4)) !important; border:2px solid #901213; border-bottom:0px; border-radius:5px 5px 0px 0px;}


.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:10px 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:75%; 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:15%; 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:80%; 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:rgba(0,0,0,1)}
.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; font-size:0.9em}
.PopUpContent{padding:0px ;border:0px solid rgba(255,255,255,0.6); background-color:#901213; border-radius:5px;}
.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:#901213; border-radius:5px;  color:white; padding:10px; font-weight:900}
.PopUpContent >.PopUpContentText{line-height:20px; max-height:300px; overflow-y:scroll;padding:20px 10px 20px 10px; background-color:#dddddd}

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

@media screen and (max-width: 830px) {
    .Header{top:37px;}
    .StatusBar{text-align:center; font-size:0.85em!important}
    .StatusBar > label{padding:2px;}
    .MobileHide{display:none}
    .MenuItem{font-size:0.9em}
    .ThirdPartyBanner{padding:0px!important;}
    .ThirdPartyBanner > div {width:50%; padding:3px; font-size:1.2em}
    .SlotGameItem{padding:5px; width:33.3%}
    .MenuArea{display:none;}
    .MobileMenuArea{display:flex}
    .PopUpItem{width:95%; position:fixed; margin:0 auto;}
    .Box100{padding:1px;}
    .ThTitle{font-size:1em; font-weight:700}
}


.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;
    background-color: gray;
    border-radius:50%;
    animation: loading 1s 0s linear infinite;
    /* 이벤트명  반복시간  딜레이시간  이벤트처리부드럽게  이벤트무한반복*/
}

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

    .loading span:nth-child(3) {
        animation-delay: 0.4s;
        background-color: #901213;
    }
@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배 */
    }
  }