#body {
    background: url("/Images/main/bg-main.png") #000000 top center no-repeat;
    transition: background 1s linear;
    overflow-x: hidden;
}

#header {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

#leftblank {
    width: 415px;
    flex-shrink: 1;
    text-align: center;
    justify-content: center;
    align-items: end;

}

#lefttop {
    width: 100%;
    height: 301.44px;
}

#leftbottom {

    width: 100%;
    height: 360px;
    background-image: url('/images/leftphone.png');
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 170px;

}

#uphead {

    flex-shrink: 0;
    text-align: center;
    position: relative;
}

#upmenulogo {
    margin-top: 10px;
    margin-bottom: 5px;
    width: 500px;
}
#upmenu{
    position: relative;
}
#gamemenudiv{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #42072F 0%, #11030D 100%);
}
.menudiv{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menubtn{
    cursor: pointer;
}

#upmenubar {

    width: 100%;
    /* height: 74px; */
}


#menuicon {
    width: 10%;
    position: absolute;
    top: 7%;
    right: 8%;
    float: right;
    display: none;
}

#sidemenu {
    display: none;
}

#upcenter {
    margin-top: 40px;
}

#upcenterimage {
    width: 840px;
}

#rightblank {
    width: 415px;
    flex-shrink: 1;
}

#maindiv {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

#upmain {
    
    flex-shrink: 0;
    text-align: center;
}

#mainstartimg {
    width: 585px;
    margin: 10px;
}

#mainlogin {
    display: flex;
    margin-top: 20px;
    width: 2280px;
    height: 90px;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    justify-content: center;
    background: linear-gradient(180deg, #42072F 0%, #11030D 100%); 
    background-size: contain;
    background-repeat: no-repeat;
    border:5px solid rgb(255, 226, 96);
}

#mainloginmobile {
    display: flex;
    margin-top: 20px;
    width: 100%;
    height: 120px;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.7);
}

#beforelogin {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;

}

#beforelogin2 {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;

}
#logintextdiv{
    
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}
#logintextdiv2{
    
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    display: none;
   }
#logouta{
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}
#logoutbtn{
    width: 80px;
    margin: auto;
    margin-left: 20px;
}
#bigb {
    color: #fff700;
    font-size: 23px;
}
#bigb2 {
    color: #ffffff;
    font-size: 23px;
}

li {
    margin: 0 3px 0 3px;
    padding: auto;
}
img {
    vertical-align : bottom;
}
ul{
    list-style:none;
}
#loginid {
    height: 40px;
    width: 250px;
    border-radius: 5px;
    font-size: 15px;
    border: none;
    padding: 4px 0 4px 5px;
}
#loginpswd {
    height: 40px;
    width: 250px;
    border-radius: 5px;
    font-size: 15px;
    border: none;
    padding: 4px 0 4px 5px;
}

#loginnow {
    text-align: center;
    /* font-family: 'NanumGothic'; */
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #090d18,
        0 0 30px #090d18, 0 0 40px #090d18, 0 0 55px #090d18,
        0 0 75px #090d18;
    font-size: 30px;
}

#loginnow2 {
    text-align: center;
    /* font-family: 'NanumGothic'; */
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #090d18,
        0 0 30px #090d18, 0 0 40px #090d18, 0 0 55px #090d18,
        0 0 75px #090d18;
    font-size: 10px;
}



.text::placeholder {
    font-size: 15px;
}

.btn {
    height: 40px;
    width: 124.888px;
    margin: 0 0 0 0;
    padding: 0 !important;

}

#upcentermobile {
    display: none;
}

#upcentermobileimage {
    width: 100%;
    display: none;
}

#mainexpl {
    width: 100%;
}

#mainexplimg {
    width: 1450px;
    /* height: 367px; */

    display: flex;
    margin: auto;

    margin-top: 25px;
}

#mep1 {
    /* display: table-cell; */
    width: 483.3333px;
    background-image: url('/images/mainexpl1.png');
    background-size: 483.3333px;
    background-repeat: no-repeat;
    position: relative;
}

#notimaindiv{
    position: absolute;
    width: 100%;
    height: 80%;
    top: 0;
    left: 0;
    /* overflow: auto; */
    color: white;
    text-align: start;
}

#notitop{
    width: 100%;
    height: 25%;
}
#notibottom{
    width: 100%;
    height: 75%;
}
.notili{
    /* font-size: 11px; */
    margin: 5px 0 25px 25px;
}
.outmoneyli{
    /* font-size: 11px; */
    margin: 5px 0 25px 25px;
}
#mep2 {
    /* display: table-cell; */
    width: 483.3333px;
    background-image: url('/images/mainexpl2.png');
    background-size: 483.3333px;
    background-repeat: no-repeat;
    position: relative;
}

#mep3 {
    /* display: table-cell; */
    width: 483.3333px;
    background-image: url('/images/mainexpl3.png');
    background-size: 483.3333px;
    background-repeat: no-repeat;
    position: relative;
}

#outmoneymaindiv{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* overflow: auto; */
    color: white;
    text-align: start;
    overflow: hidden;
    /* padding-bottom: 10px; */
}
#outmopneybottom{
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 65%;
}
#rolling_notice{
    position: relative;
    width: 100%;
}

#outmoneytop{
    width: 100%;
    height: 25%;
}
#outmoneybottom{
    width: 100%;
    height: 75%;
}

#inout {
    width: 60%;
    margin: auto;
    position: absolute;
    top: 22%;
    left: 19%;

}

#mainlink {
    margin-top: 2%;
    margin-bottom: 2%;
    display: flex;
    width: 100%;
    justify-content: center;


}

.link {
    margin: 0 10px 0 10px;

}

.linkimg {

    width: 285px;
}

#maincall {

    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 30px;
}

#cacaocall {
    position: relative;
}
.infodiv{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
}
.teltopdiv{
    width: 100%;
    height: 50%;
}
.telbottomdiv{
    width: 100%;
    height: 50%;
    display: flex;
    align-items: start;
    justify-content: center;
}
#telcall {
    position: relative;
}
#banner, #banner2 {
    display: none;
}

.linkcall {
    width: 725px;
    margin: 0 5px 0 5px;
}

.call {
    width: 725px;
    margin: 2%;
}


#cacaoid {
    width: 100%;
    display: block;
    text-align: center;
    font-size: 75px;
    font-weight: bold;
    color: gold;
    text-shadow: 1px 1px 0px rgb(5, 5, 5);


}
#telnum {
    width: 100%;
    display: block;
    text-align: center;
    font-size: 75px;
    font-weight: bold;
    color: gold;
    text-shadow: 1px 1px 0px rgb(5, 5, 5);

}

#mainbottombar {
    width: 100%;
    margin: 1% 0 1% 0;
    border-top: solid 1px rgba(81, 81, 81, 0.7);
    border-bottom: solid 1px rgba(81, 81, 81, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mainbottomnav {
    color: rgba(255, 255, 255, 1);
    font-size: 1.5vw;
    margin: 0.5% 2% 0.5% 2%;

}

.mainbottomnav2 {
    color: rgba(81, 81, 81, 0.7);
    font-size: 1.5vw;
    margin: 0 2% 0 2%;
}

#mainbottomlink {
    width: 100%;
    margin-bottom: 4%;
}

#mainbottomlinkimg {
    margin-top: 3%;
    width: 50%;
}

#main {
    width: 100%;


}

#sidemenu {
    background-color: rgb(33 37 58 / 80%);
    width: 200px;
    position: absolute;
    top: 0;
    right: -200px;
    bottom: 0;
    transition: 1s ease;
    text-align: center;

}

#sidestart {
    width: 150px;
    margin-top: 50px;
}

.sidelist {
    color: #fff;
    display: block;
    margin: 20px 0 0 0;
    cursor: pointer;
}

html,
body {
    width: 100%;
    height: 100%;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media screen and (max-width:480px) {
    #menuicon {
        display: block;
    }

    #sidemenu {
        display: none;
    }

    #upmenulogo {
        width: 50%;
    }

    /* #upmenu{
        opacity: 0.0;
        float: right;   
        margin: 0 0 0 0;
    } */
    #upmenubar {
        /* float: right;
        height: 1px;
        margin: 0 0 0 0;
        opacity: 0.0; */
        display: none;
    }

    #mainloginmobile {
        display: flex;
        text-align: center;
        height: 150px;
        vertical-align: middle;
        height: 100%;
        padding: 5px 0 5px 0;
        margin: 0 0 0 0;
        background-image: url('/images/loginframe.png');

    }

    #beforelogin2 {
        width: 90%;
        height: 100%;
        padding: 0 0 0 0;
        margin: 5px 0 5px 0;
    }
    #upmenu{
        display: none;
    }

    .li2 {
        padding: 0 5px 0 0;
        /* margin: 1% 1% 1% 1%; */
        margin: 0 0 0 0;
        display: flex;
        vertical-align: middle;
        text-align: center;
        align-items: center;
        height: 100%;
    }
    .text::placeholder {
        font-size: 12px;
    }
    #join{
     margin-left: 5px;   
    }
    #mobileb {
        color: #fff700;
        font-size: 12px;
    }
    #mobileb2 {
        color: #ffffff;
        font-size: 12px;
    }
    #logoutbtn{
        width: 50px;
        margin: 0 0 0 0;
        margin-left: 10px;
    }

    /* #upcenter{
        margin: 15px;
    } */
    #leftblank {
        display: none;
    }

    #rightblank {
        display: none;
    }

    #uphead {
        width: 100%;
    }
    #loginnow2 {
        display: none;

    }

    #loginid2 {
        width: 100%;
        height: 100%;
        border-radius: 5%;
        padding: 2px 0 2px 3px;
        border: none;
    }

    #loginpswd2 {

        width: 100%;
        height: 100%;
        border-radius: 5%;
        padding: 2px 0 2px 3px;
        border: none;

    }
    
    
    img{
        margin: 0 0 0 0;
        vertical-align: bottom;
    }
    .btn2 {
        width: 120%;
        height: 19px;
        margin: 0 0 0 0;

        padding: 0 0 0 0;
        
        display: table-cell;
    }

    #upcentermobile {
        display: block;
    }

    #upcentermobileimage {
        width: 100%;
        display: block;
    }

    #upcenter {
        margin-top: 0px;
        width: 100%;
    }

    #upcenterimage {

        width: 100%;
    }

    #mainlogin {

        display: none;
    }

    #upmain {
        width: 100%;
    }

    #mainstartimg {
        width: 90%;
    }

    #mainexpl {

        width: 100%;


    }

    #mainexplimg {
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: start;
        margin-top: 25px;

    }

    .backexpimage {
        width: 100%;
    }

    #mep1 {
        vertical-align: middle;
        text-align: center;
        width: 70%;
        margin-bottom: 2%;
        background-image: url('/images/mainexpl1.png');
        background-size: 100%;
        background-repeat: no-repeat;
    }

    #notiul{
        width: 100%;
        height: 100%;
    }
    #outmoneyul{
        width: 100%;
        height: 100%;
    }
    .notili{
        font-size: 11px;
        margin: 5px 0px 15px 10px;
        
    }
    .outmoneyli{
        font-size: 11px;
        margin: 5px 0px 10px 10px;
    }

    #mep2 {

        width: 70%;
        margin-bottom: 2%;
        background-image: url('/images/mainexpl2.png');
        background-size: 100%;
        background-repeat: no-repeat;
    }
    
    #mep3 {

        width: 70%;
        margin-bottom: 2%;
        background-image: url('/images/mainexpl3.png');
        background-size: 100%;
        background-repeat: no-repeat;
    }
    #outmopneybottom{
        overflow: hidden;
        position: absolute;
        width: 100%;
        height: 68%;
    }


    #mainlink {
        
        display: block;
        width: 100%;
        justify-content: center;


    }

    .link {
        margin: 0 2% 0 2%;
        display: inline;

    }

    .linkimg {
        display: inline;
        width: 40%;
    }

    #maincall {

        display: block;
        width: 100%;
        justify-content: center;
        margin-bottom: 0px;
        
    }

    #cacaocall {
        position: relative;
    }

    .linkcall {
        width: 90%;
        margin: 0 5px 0 5px;
    }
    .linkcall2 {
        width: 100%;
        margin: 0 0px 0 0px;
    }
    #banner, #banner2 {
        display: block;
    }
    .call2 {
        width: 100%;
        margin: 0 0 0 0;
        /* margin-bottom: 3%; */
    }
    #banner2{
        margin: 0 0 0 0;
    }


    .call {
        width: 90%;
        margin: auto auto;
        margin-bottom: 3%;
    }

    #cacaoid {
        width: 100%;
        
        display: block;
        text-align: center;
        font-size: 8vw;
        font-weight: bold;
        color: gold;
        text-shadow: 1px 1px 0px rgb(5, 5, 5);
    }

    #telnum {
        width: 100%;

        display: block;
        text-align: center;
        font-size:  8vw;
        font-weight: bold;
        color: gold;
        text-shadow: 1px 1px 0px rgb(5, 5, 5);
        
    }
    

    #mainbottombar {
        width: 100%;
        
        border-top: solid 1px rgba(81, 81, 81, 0.7);
        border-bottom: solid 1px rgba(81, 81, 81, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mainbottomnav {
        color: rgba(255, 255, 255, 1);
        font-size: 3vw;
        margin: 0.5% 2% 0.5% 2%;
    
    }
    
    .mainbottomnav2 {
        color: rgba(81, 81, 81, 0.7);
        font-size: 3vw;
        margin: 0 2% 0 2%;
    }
    #main {
        width: 100%;
    
        background-image: url('');
        
    
    
    }
    #body {
        background: url("/Images/main/bg-main.png") #000000 top center no-repeat;
        background-size: 100%;
        background-attachment: fixed;
        
    }
    #logintextdiv{
    
     height: 30px;
     display: none
    }
    #logintextdiv2{
    
        height: 30px;
        display: none
       }
    #mainbottomlinkimg {
        margin: 0 0 0 0;
        width: 100%;
    }
    #mainbottomlink {
        margin: 0 0 0 0;
        width: 100%;
    }
    #mainbottombar{
        display: none;
    }
          
    

}
/* @media screen and (max-width:668px) {
    #cacaoid {
        font-size: 40px;
        top: 50%;
        left: 31%;
    }

}
@media screen and (max-width:568px) {
    #cacaoid {
        font-size: 35px;
    }

}
@media screen and (max-width:468px) {
    #cacaoid {
        font-size: 30px;
        left: 30%;
    }

}
@media screen and (max-width:368px) {
    #cacaoid {
        font-size: 23px;
        left: 30%;
    }


}
@media screen and (max-width:268px) {
    #cacaoid {
        font-size: 18px;
        left: 30%;
    }


} */

@media screen and (min-width:480px) {
    #menuicon {
        display: none;
    }

    #sidemenu {
        display: none;
    }

    #mainloginmobile {
        display: none;
    }
}
.banner-container {
    position: relative;
    min-height: 400px;
    background: url(/Images/main/main-banner.png) top center no-repeat;
}
.promo-text__container {
    height: 400px;
}
.main-container {
    width: 1260px;
    margin: 0 auto;
    position: relative;
}
.promo-text__slider {
    position: absolute;
    width: 500px;
    height: 120px;
    top: 40%;
    transform: translate(25%, -50%);
    left: 0;
}
.promo_left_txt {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    padding-top: 50px;
}
#mainstart .button-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
#mainstart .gamebutton {
    width: 100%;
    height: 485px;
    font-size: 16px;
    color: #ffffff;
    position: relative;
}
.game-button-live {
    background: url(/Images/main/game-buttons/gamebutton-01.jpg);
}
.gamebuttons {
    width: 100%;
    height: 100%;
    max-width: 485px;
    margin: 0 auto;
    position: relative;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.gamebuttons-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: absolute;
    bottom: 40px;
    right: 50%;
    transform: translateX(50%);
    font-weight: 700;
}
.gamebuttons-info .btn-popup {
    width: 200px;
    height: 60px;
    font-size: 24px;
    border-radius: 0;
    background: #751056;
    border: 1px solid #751056;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.footer-page {
    background: var(--black);
    text-align: center;
    font-size: 12px;
}
.footer-logo-container {
    padding: 20px 0px 10px;
    width: 1260px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.footer-page .footer-logo-container img {
    width: 120px;
    margin: 3px;
}
.footer-page p {
    margin: 0;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
}
.footer-page span {
    color: #00ccfc;
    font-weight: bold;
}
.mainbtdiv {width: auto;min-width: 104px;transition: .3s ease-out;padding: 11px 15px;border-radius: 50px;}
.mainbtbg1 {background-color: #00a8ea;}
.mainbtbg2 {background-color: #f0ab05;}
.mainbtbg3 {background-color: #4e5ca0;}
.mainbtbg4 {background-color: #d93e44;}
@media screen and (max-width:480px) {
  .banner-container {min-height: 200px;background: url(/Images/main/main-banner.png) bottom center no-repeat;}
  .main-container, .footer-logo-container { width: 100%; }
  .promo-text__slider {width: 100%; transform: unset;}
  .promo-text__container {max-height: 300px;}
  .promo_left_txt {padding-top: 0px;}
  .mainbtdiv {min-width: 84px;}
}