@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');}

html, form{width:100%; height:100%;  margin:0px; color:white; }
body {margin:0px; background:url(../Image/bg-main.png) no-repeat top center #000000; width:100%; height:100%; font-family: 'Noto Sans KR', sans-serif; font-size:14px; color:white }
.ClearBoth{clear:both;}.ClearBothH{clear:both; height:5px;} div{ box-sizing:border-box;} *{margin:0; padding:0;}li{list-style:none;}

.PanelOverView{position:fixed;width:100%;height:100%; background-color:rgba(0,0,0,0.7); z-index:100; padding:30px; display:none; overflow-y:scroll}
.PanelPopupArea{position:relative; top:-900px;margin:0 auto; opacity:0;}
.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);}}

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

.OverViewClose{width:50px; margin:0 auto; padding:10px; text-align:right; font-size:3em; font-weight:800}
.OverViewClose > i{cursor:pointer; transition:all 300ms}.OverViewClose > i:hover{color:#158ced}
.OverViewTitle{text-align:left; font-size:1.5em; padding:10px; font-weight:700; }
.OverViewTitle > i{float:right; cursor:pointer; font-size:1.6em; transition:all 300ms }.OverViewTitle > i:hover{color:#158ced}
.OverViewBox{width:100%; max-width:1000px; margin:0 auto; padding:10px; background-color:black; border-radius:10px; border:2px solid #08243a;background-image:url(../Image/OverViewBack.png); background-repeat:no-repeat; background-position:top center; box-shadow:0px 0px 60px rgba(21,140,237,0.5);}
.OverViewBoxS{width:100%; max-width:600px; margin:0 auto; padding:10px; background-color:black; border-radius:10px; border:2px solid #08243a;background-image:url(../Image/OverViewBack.png); background-repeat:no-repeat; background-position:top center; box-shadow:0px 0px 60px rgba(21,140,237,0.5);}
.OverViewBoxBtnArea{padding:8px; color:white; font-size:1.2em; cursor:pointer; font-weight:300; transition:all 300ms }
.OverViewInbox{border:1px solid #111111; background-color:#2a2a2a; padding:10px;}

.BtnSelect{padding:10px; color:white; border:1px solid #158ced; background-color:#158ced;}
.BtnNonSelect{padding:10px; color:white; border:1px solid #158ced; transition:all 300ms}
.BtnNonSelect:hover{padding:10px; color:white; border:1px solid #158ced; background-color:#158ced;}

/*Input*/
input{outline: none;-webkit-appearance: none;-webkit-border-radius:0px; font-size:1.05em; font-weight:700; width:100%; }
select{outline: none;-webkit-appearance: none;-webkit-border-radius:0px; font-size:1.05em; font-weight:700; width:100% }
input[type=text]{border-width: 0; color:white; box-sizing:border-box; padding:10px; border:1px solid #333333; background-color:black; transition:all 400ms }
input[type=password]{border-width: 0; color:white; box-sizing:border-box; padding:10px; border:1px solid #333333; background-color:black; transition:all 400ms }
input[type=text]:hover{border:1px solid white; }
input[type=password]:hover{border:1px solid white;}
input[type=text]:focus{border:1px solid #158ced;}
input[type=password]:focus{border:1px solid #158ced;}

select{border-width: 0; box-sizing:border-box; padding:10px; width:100%; border:2px solid transparent; background-color:#babcc1; transition:all 400ms }
select:hover{border:2px solid #babcc1; background-color:rgba(255,255,255,0.4) }
select:focus{border:2px solid #158ced; background-color:rgba(255,255,255,0.4) }

textarea{outline: none;-webkit-appearance:none;-webkit-border-radius:0px; resize:none; color:white; border-radius:5px; min-height:300px; border-width: 0; box-sizing:border-box; padding:10px; width:100%; border:1px solid #4a4a4a; background-color:#111111; transition:all 200ms }
textarea:hover{border:2px solid white; background-color:#1a1a1a }
textarea:focus{border:1px solid #158ced; background-color:#1a1a1a }

input[type=submit]{ border-width: 0; box-sizing:border-box; color:white; cursor:pointer; padding:9px; width:100%; border:1px solid #158ced; background-color:#151515; transition:all 400ms }
input[type=submit]:hover{border:1px solid #2e6da4; background-image:linear-gradient(#158ced, #0e60e6); color:#f2f2f2 }
input[type=submit]:active{background-color:black; color:#f2f2f2 }

input[type=button]{ border-width: 0; box-sizing:border-box; color:white; cursor:pointer; padding:9px; width:100%; border:1px solid #158ced; background-color:#151515; transition:all 400ms }
input[type=button]:hover{border:1px solid #2e6da4; background-image:linear-gradient(#158ced, #0e60e6); color:#f2f2f2 }
input[type=button]:active{background-color:black; color:#f2f2f2 }


/* LINK */
a:link {text-decoration:none; color:inherit; border:0px;}
a:visited {text-decoration:none; color:inherit; border:0px;}
a:active {text-decoration:none; color:inherit; border:0px;}
a:hover {text-decoration:none; color:inherit; border:0px;}

/* Layout */
.LDT{display:table; height:100%; width:100%; text-align:center; table-layout:fixed}
.LDTR{display:table-row; }
.LDTC{display:table-cell; vertical-align:middle;}
.DT{display:table; text-align:center; table-layout:fixed }
.DTR{display:table-row;}
.DTC{display:table-cell; vertical-align:middle}
.TR{text-align:right}.TL{text-align:left}.TC{text-align:center;}
.VT{vertical-align:top}.VM{vertical-align:middle;}.VB{vertical-align:bottom}
.AC{margin:0 auto}.WM{width:100%;}.BoardBottomHide{border-bottom:3px;}
.MobileHide{display:block}.MobileShow{display:none}

/*MENU*/
header{width:100%; height:118px; background-image:url(../Image/TopBG.png);}
.WebMenu{display:table;}.MobileMenu{display:none}
.LeftArea{width:1010px;}.RightArea{width:250px; background-color:#181818; padding:0px 20px 20px 20px;}

.QuickMenu{width:100%;  padding:10px; text-align:right}

.QuickMenu > label{padding-left:10px; color:#808080; cursor:pointer; transition:all 300ms}
.QuickMenu > label:hover{color:white;}

.QuickMenuStatus{width:100%;  padding:10px; text-align:right; display:none}
.QuickMenuStatus > label{padding-left:10px; color:#808080; cursor:pointer; transition:all 300ms}
.QuickMenuStatus > label:hover{color:white;}

.LogoArea{width:250px; vertical-align:middle;} .LogoArea > img {width:60%;}
.MenuItem{padding:16px; cursor:pointer; transition:all 300ms}
.MenuA{color:white; font-size:1.2em; padding-bottom:5px; font-weight:900;transition:all 300ms}
.MenuB{color:#808080; font-size:0.8em;transition:all 300ms}
.MenuItem:hover{background-image: linear-gradient(#4a4a4a, black);}
.MenuItem:hover > .MenuA{color:#158ced}
.MenuItem:hover > .MenuB{color:white}

.JacpPotArea{padding:10px 10px 0px 10px;}
.JacpPotContent{width:990px; height:160px; background:url(../Image/jackpot.jpg) no-repeat; cursor:pointer; transition:all 300ms;}
.JacpPotContent:hover{background:url(../Image/jackpot-hover.jpg) no-repeat; }
.JackpotContent{font-size:4.5em;  font-family:nanumsquarer; font-weight:900; text-align:center ;background:linear-gradient(to bottom,white, #158ced);color: transparent;-webkit-background-clip:text; font-weight:900; padding-right:10px; width:100%; position:relative; text-align:right; top:25%;-webkit-text-stroke: 1px black;}

.SyncWidth{width:1010px;}

.BannerArea{border: 1px solid #333333; background-color:black; border-bottom:0px;}
.BannerIconArea01{ padding:10px 5px 10px 10px;}
.BannerIcon01{width:485px; height:158px; background:url(../Image/game-button-1.jpg) no-repeat; cursor:pointer; transition:all 300ms}
.BannerIcon01:hover { background:url(../Image/game-button-1-hover.jpg) no-repeat;}
.BannerIconArea02{ padding:10px 10px 10px 5px;}
.BannerIcon02{width:485px; height:158px; background:url(../Image/game-button-2.jpg) no-repeat; cursor:pointer; transition:all 300ms}
.BannerIcon02:hover { background:url(../Image/game-button-2-hover.jpg) no-repeat;}

.BoardArea{border: 1px solid #333333; background-color:black; border-right:0px;}
.BoardArea > .DT > .DTR > .DTC{border-right:1px solid #333333}
.BoardTitle{background-color:#181818; color:#158ced; padding:15px; font-size:1.3em; font-weight:600; text-align:left;}
.BoardTitle > label{font-size:0.7em; color:white; float:right; position:relative; top:3px;}

.LoginTitle{color:#158ced; padding:20px; font-size:1.3em; font-weight:700}
.StatusNickName{color:white; font-size:1.1em; font-weight:300; text-align:center; padding:30px 0px 30px 0px;}
.StatusMoney{background-color:black; border:1px solid #333333; color:#158ced; padding:10px; font-size:1.1em; font-weight:600; text-align:left; border-right:0px;}
.StatusMoney > label{font-size:0.9em; font-weight:300; color:white }
.MoneyChangeBtn{width:70px; background-color:black; font-size:1.3em; border-left:1px solid #333333; cursor:pointer; transition:all 300ms; border-left:0px;}
.MoneyChangeBtn:hover{color:#158ced; }

.MoneyChangeBtn{width:50px; background-color:black; font-size:1.3em; border:1px solid #333333; cursor:pointer; transition:all 300ms; border-left:0px;}

.StatusArea{background-color:black; cursor:pointer;border:1px solid #333333; transition:all 200ms}
.StatusArea:hover{background-color:#158ced; cursor:pointer;border:1px solid #333333;}
.StatusTitle{padding:10px; text-align:left;}
.StatusContent{padding:10px;  text-align:right;}



/*flexArea*/

.FlaxBoxItem{ padding:1px; border-radius:0px; }.FlaxBoxItem > img{width:100%;}
.FlaxBoxItem > input {font-size:2em; color:#ffd700; text-align:center; background-color:black; border:2px solid #9a9a9a}
.FlaxBoxItem > input:hover{background-color:#1a1a1a}
.FlaxBoxItem > input:focus{background-color:#1a1a1a; border:2px solid #ffd700}

.FlaxBtnArea{display:flex; flex-wrap:wrap}
.FlaxBoxArea{width:100%; margin:0 auto; display:flex; flex-wrap:wrap; }
.FlaxBoxGameB{width:25%; padding:3px;}
.FlaxBoxGameM{width:20%; padding:3px;}
.FlaxBoxGameS{width:10%; padding:3px;}
.FlaxBoxGameArea{width:16.6%; padding:5px; border:0px solid rgba(0,0,0,0);}
.FlaxBoxGameArea:hover{border:0px solid rgba(0,0,0,0); padding:5px}
.FlaxGame{ background-color:black;} .FlaxGame > img{opacity:0.6; cursor:pointer; transition:all 300ms;}.FlaxGame > img:hover{opacity:1;}
.FlaxGameSlot{ background-color:black; width:100%;  border-bottom:0px; padding:3px; cursor:pointer; } .FlaxGameSlot > img{opacity:1; width:100%; border-radius:5px; cursor:pointer; transition:all 300ms;}.FlaxGameSlot > img:hover{opacity:0.8;}
.SlotGameTitle{padding:10px 10px 10px 10px; background-color:#111111}
.ServerType{width:100% ; padding:10px; text-align:left; color:#158ced; background-color:#111111; border:6px solid black}
.FlaxBoxBannerC{width:20%; padding:3px;}
.FlaxBannerC{ background-color:black; } .FlaxBannerC > img{opacity:0.8; cursor:pointer; transition:all 300ms; width:100%;}.FlaxBannerC > img:hover{opacity:1;}

.FlaxBoxBtn{width:25%; padding:3px;} .FlaxBoxBtnBig{width:100%; padding:3px;}
.FlaxBoxBtnC{width:25%; padding:3px;}.FlaxBoxBtnBlue{width:25%; padding:3px}
.FlaxBoxBtn > input{ font-size:1.2em; padding:10px; background-color:#bb0e0e; border:1px solid black; }
.FlaxBoxBtnC > input{ font-size:1.2em; padding:10px; }
.FlaxBoxBtnBlue > input{ font-size:1.2em; padding:10px; background-color:#158ced; border:1px solid black; }
.FlaxBoxBtnBig > input{ font-size:1.2em; padding:10px; background-color:#158ced; font-size:2em; padding:20px 10px 20px 10px; border:1px solid black; }
.BtnOver{background-color:#000000}
.FlaxBoxText{width:100%; padding:3px;}

.MoneyBox{font-size:3em; text-align:center;}

.InfoText{padding:10px; background-color:black; text-align:left; font-size:1.1em; color:#158ced; line-height:30px;}

.PageListArea{display:flex; flex-wrap:wrap;background-color:#1a1a1a;font-size:0.8em; padding:10px;  border-radius: 0px 3px 3px 0px; border:1px solid #ffd700; border:0px;}
.PageListArea > div{border:1px solid #1a1a1a;}
.ListTitle{width:75%; background-color:#111111; text-align:left; padding:10px; cursor:pointer; transition: 300ms;}.ListTitle:hover{color:#158ced; text-indent:10px}
.ListDate{width:15%; text-align:center; background-color:#111111; padding:10px;}.ListStatus{width:10%; text-align:center; background-color:#111111; padding:10px;}
.ListTitle2{width:80%; background-color:#111111; padding:10px; cursor:pointer; transition:all 300ms;}.ListTitle2:hover{color:#158ced; text-indent:10px}
.ListDate2{width:20%; text-align:center; background-color:#111111; padding:10px;}

.ViewTitle{background-color:#111111; padding:10px; text-align:left;font-size:1.2em; color:#158ced}.ViewTitle > b{color:#ffd700}
.ViewContent{background-color:#222222; text-align:left; font-weight:100; font-size:0.9em; padding:10px;}

.InputArea{width:100%; padding:10px 10px 10px 10px; background-color:#000000}
.InputHeader{ background-color:#000000; width:130px;}
.InputContent{ border: 3px solid #000000}



.BottomArea{text-align:center; padding:10px 0px 50px 0px;}.BottomArea>img {width:100%; max-width:900px;}

.MainCarouselArea{width:1010px; overflow:hidden; height:332px}
.MainCarouselItem{width:100%;}.MainCarouselItem > img{width:100%;}

.MobileFlaxArea{display:none; flex-wrap:wrap}
.BannerAreaM{ width:100%; padding:39px 10px 10px 10px; display:none;}
.TitleM{ padding:10px; font-size:1.2em; font-weight:700; text-align:left; color:#158ced; background-color:rgba(0,0,0,0.7)}

.MnRow{padding:5px 10px 5px 10px; width:100%; cursor:pointer; white-space:nowrap;  text-overflow:ellipsis; overflow:hidden; transition:all 200ms}
.MnRow:hover{text-indent:15px; color:#158ced}

.MobileMenuBotton{border:3px solid black; background-color:#333333; font-size:1.2em; width:100%; font-weight:700; cursor:pointer; color:#158ced; border-radius:10px; padding:15px; transition:all 200ms;}
.MobileMenuBotton:hover{background-color:#158ced; color:white}

/*Language*/

.LanSet{float:left}.LanSet > img{width:25px; padding-left:10px; position:relative; top:3px; cursor:pointer }
.LanguageTitle{padding:10px; text-align:left}.LanguageImg{padding:10px;}.LanguageImg > img {width:40px;}
.OverViewBoxLanguage{width:100%; max-width:350px; margin:0 auto; padding:10px; background-color:black; border-radius:10px; border:2px solid #08243a;background-image:url(../Image/OverViewBack.png); background-repeat:no-repeat; background-position:top center; box-shadow:0px 0px 60px rgba(21,140,237,0.5);}
.KR{display:none}
.EN{display:none}
.CN{display:none}
.TH{display:none}
.VN{display:none}
.KH{display:none}

.PopUpItem{position:fixed; top:100px; margin:0 36%; width:500px;  border:4px solid rgba(0,0,0,0); background-color:black; font-size:0.9em}
.PopUpContent{padding:5px ;border:2px solid #08243a;background-image:url(../Image/OverViewBack.png); background-repeat:no-repeat; background-position:top center; box-shadow:0px 0px 60px rgba(21,140,237,0.5);
}.PopUpContent > .WM{padding:0px; text-align:left; color:white}
.PopUpContent > .WM > img{width:100%; display:block}.PopUpContent > .DT {cursor:pointer; padding:10px}
.PopUpContent >.PopUpTitleText{font-size:1.4em; color:#ffd700; padding:10px; font-weight:900}
.PopUpContent >.PopUpContentText{line-height:20px; height:400px; overflow-y:scroll; padding:20px 10px 20px 10px; background-color:#2a2a2a}

@media screen and (max-width: 1260px) {
    .SyncWidth{width:100%;}
    .LeftArea{width:100%;}
    
    .MainCarouselArea{width:100%; height:auto;}
    .owl-dots{display:none}

    .MobileHide{display:none}
    .MobileShow{display:block}
    
    .RightArea{display:none;}
    
    .WebMenu{display:none;}
    .MobileMenu{display:table; width:100%; padding:0px 0px 0px 0px; position:fixed; left:0px; top:0px; z-index:10; background-image:url(../Image/TopBG.png)}
    .LogoArea{width:33.3%; height:78px; padding:0px 20px 0px 20px; font-size:2em; color:#158ced}
    .LogoArea > img{position:relative; top:6px; left:-13px; width:300%; max-width:120px;}

    .InfoText{font-size:0.8em}

    .FlaxBoxGameArea{width:20%; padding:3px;}
    .FlaxBoxGameM{width:33.3%;}
    .FlaxBoxBtn > input{font-size:0.9em; padding:10px 5px 10px 5px;} 
    .FlaxBoxBtnC > input{font-size:0.9em; padding:10px 5px 10px 5px;} 
    .FlaxBoxBtnBlue > input{font-size:0.9em; padding:10px 5px 10px 5px;} 

    .PopUpItem{width:100%; position:relative; margin:0 auto; top:40px;}
    
    

    .StatusBarM{background-color:rgba(0,0,0,0.8); padding:10px; float:left}
    .MobileView{ width:100%; padding:83px 10px 10px 10px; display:block;}

    .JacpPotArea{padding:0px;}

    .JacpPotContent{width:100%; height:auto; background: url(../Image/jackpot.jpg) no-repeat;}
    .JacpPotContent:hover{background: url(../Image/jackpot.jpg) no-repeat;}
    .JackpotContent{font-size:3em;  font-family:nanumsquarer; font-weight:900; text-align:center ;background:linear-gradient(to bottom,#158ced,#158ced );color: transparent;-webkit-background-clip:text; font-weight:900; padding:15px; width:100%;-webkit-text-stroke: 1px black;}

    .BannerArea{border: 1px solid #333333; background-color:black; border-bottom:0px;}

    .BannerIconArea01{ padding:0px 1px 0px 0px;}
    .BannerIcon01{width:100%; height:auto;cursor:pointer; transition:all 300ms}
    .BannerIconArea01 > img{width:100%;}
    .BannerIcon01:hover { background:url(../Image/game-button-1.jpg) no-repeat;background-size:contain;}

    .BannerIconArea02{ padding:0px 0px 0px 1px}
    .BannerIcon02{width:100%; height:auto;cursor:pointer; transition:all 300ms}
    .BannerIconArea02 > img{width:100%;}
    .BannerIcon02:hover { background:url(../Image/game-button-2.jpg) no-repeat;background-size:contain;}

    .InputHeader{width:100px; font-size:0.9em;}
    .InputContent{  font-size:0.9em;}
    .BottomArea{font-size:0.8em;}
    .FlaxBoxBannerC{width:20%; padding:3px;}

    .ListTitle{width:55%; background-color:#111111; text-align:left; padding:10px; cursor:pointer; transition: 300ms;}.ListTitle:hover{color:#158ced; text-indent:10px}
    .ListDate{width:25%; text-align:center; background-color:#111111; padding:10px;}.ListStatus{width:20%; text-align:center; background-color:#111111; padding:10px;}
    .ListTitle2{width:75%; background-color:#111111; padding:10px; cursor:pointer; transition:all 300ms;}.ListTitle2:hover{color:#158ced; text-indent:10px}
    .ListDate2{width:25%; text-align:center; background-color:#111111; padding:10px;}

}

@media screen and (max-width: 760px) {

    .FlaxBoxGameArea{width:25%; padding:3px;}
    .FlaxBoxBannerC{width:20%; padding:3px;}
    .SlotGameTitle{font-size:0.8em}
    .MnRow{font-size:0.8em; padding-top:7px}

    .ListTitle2{ font-size:0.8em}.ListTitle2:hover{text-indent:0px;}
    .ListDate2 {font-size:0.8em}

}