@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

body {font-family: 'Roboto', sans-serif;font-size: 14px;color: #111111;overflow-x: hidden;margin:0 auto;}
.bodybg {position:fixed;width:100%;height:100%;z-index:-1;background: #f0e9d6;}

* {transition: all 0.3s;}
*, ::after, ::before {box-sizing: border-box;}

a {text-decoration: none;}
a.ss1 {font-weight:bold;color: #ffffff;}
    a.ss1:hover { color:#ffffff }

img {max-width: 100%;}

.w100px { width:100px }
.w150px { width:150px }

label.error { color:#ff0000; font-size:12px; font-weight:bold; display:flex; justify-content:center; align-items:center }

.note { margin-top: 5px; display: block; font-size: 11px; color: #df0e0b; font-weight: bold; }

#loading { z-index: 1080; position: fixed; width: 100%; top: 0; bottom: 0; display:none }
#loading.aaa { display:block }
#loading .mask { height: 100%; width: 100%; background: #000; opacity: .6;}
#loading .mask img { position: absolute; top: 50%; left: 50%; width: 100px; margin: -50px; -webkit-animation-name: spin; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-name: spin; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear;}
#loading .logo { position: absolute; top: 50%; left: 50%; height: 80px; width: 80px; margin: -40px; background-size: cover; background-position: center; background-color: #000; border-radius: 100%;}

.startgame-wrapper { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1079; display:none }
.startgame-wrapper.aaa { display:block }
.startgame { position:absolute; top:0; left:0; width:100%; height:100%; background-color:#ffffff }
    .startgame .frame { width:100%; height:calc(100% - 46px) }
        .startgame .frame iframe { width:100%; height:100%; }
    .startgame .frame-close { height:46px; font-size:16px; font-weight:bold; color:#ffffff; background-color:#222222; display:flex; justify-content:center; align-items:center; cursor:pointer; text-transform:uppercase }
        .startgame .frame-close:hover { filter:brightness(1.3) }
.startgame-close { display:none; position:absolute; width:100%; height:100%; top:0; left:0; justify-content:center; align-items:center; background:rgba(0,0,0,0.6); z-index:1 }
.startgame-close.aaa { display:flex }
.sgc { padding:24px; background-color:#111111; color:#ffffff }
    .sgc h5 { font-size:16px; }
    .sgc .sgc-btn { margin-top:20px; display:flex; justify-content:center; align-items:center; gap:12px }
    .sgc .sgc-btn button { border:2px solid #ffffff; color:#ffffff; background:transparent; width:100%; padding:2px; text-transform:uppercase }
    .sgc .sgc-btn button:hover { color:#ffc107; border-color:#ffc107 }

.btn-submit {font-size:18px;font-weight:bold;padding:8px 24px;border-radius:8px;color:#ffffff;background: #00554e;border:0;width:100%;cursor:pointer}
    .btn-submit:hover {filter: brightness(1.2) drop-shadow(0px 0px 8px #fff870);}
    .btn-submit[disabled] { filter:grayscale(1) brightness(0.5); pointer-events:none } 

.btns {font-size:16px;font-weight:bold;padding:6px 18px;border-radius:8px;color: #f0e9d6!important;/* border:1px solid #de00b5; */white-space:nowrap}
    .btns.s1 {background-color: #000000;}
    .btns.s2 {background: #f0e9d6;color: #000000 !important;!i;!;}
    .btns:hover {filter: brightness(1.2) drop-shadow(0px 0px 8px #fff870 );}
    .btns.upper { text-transform:uppercase }
    .btns.ani { animation-name:buttonGlowing; animation-duration:1.5s; animation-timing-function:linear; animation-direction:normal; animation-iteration-count:infinite; }
    .btns.small { font-size:12px; padding:4px 12px }

@keyframes buttonGlowing {
  60% {filter: brightness(1.4) drop-shadow(0px 0px 6px #fff870)  drop-shadow(0px 0px 6px #fff870)  drop-shadow(0px 0px 6px #fff870);}
}

.btnsvg {display:flex;justify-content:center;align-items:center;flex-direction:column;gap:4px;color: #00554e;background-color: #f0e9d6;padding:4px;border-radius:8px;border: 2px solid #ffffff;font-size:12px}
    .btnsvg svg, .btnsvg img { max-height:32px }
    .btnsvg.aaa, .btnsvg:hover {background: linear-gradient(180deg, #04655b 0%, #00554e 100%);color: #f0e9d6;border: 2px solid #f0e9d6;}

.btnsvg2 { display:flex; justify-content:center; align-items:center; flex-direction:column; gap:4px; color:#ffffff; padding:8px 4px 4px 4px; font-size:12px }
    .btnsvg2 svg { height:28px }
    .btnsvg2.aaa, .btnsvg2:hover {color: #fff870;}

.btnmg { display:flex; gap:4px; background: linear-gradient(180deg, #65008e 0%, #ea0191 100%); border-radius:8px; padding:0 16px; align-items:center; font-size:14px; color:#ffffff; font-weight:bold; }
    .btnmg img { max-height:42px }
    .btnmg:hover { filter:brightness(1.2) drop-shadow(0px 0px 8px #de00b5) }

.btntt {display:flex;gap:12px;padding:4px 16px;align-items:center;font-size:14px;color: #f0e9d6;}
    .btntt i { font-size:16px }
    .btntt.aaa, .btntt:hover {color: #fff870;}

.btncircle {display:flex;align-items:center;justify-content:center;font-size:9px;line-height:9px;font-weight:bold;color:#ffffff;flex-direction:column;border-radius:50%;background: linear-gradient(180deg, #04655b 0%, #00554e 100%);border:2px solid #ffffff;width:66px;height:66px;}
    .btncircle svg { max-height:38px; margin-top:-6px }
    .btncircle:hover { filter:brightness(1.2) drop-shadow(0px 0px 8px #fff870) }

.linkwithicon { display:flex; gap:8px; color:#888888!important; align-items:center }
    .linkwithicon i {color: #00554e;font-size:18px;}

.topnav {position:fixed;top:0;left:0;width:100%;z-index:8;background: #00554e;}
    .topnav .ccon { display:flex; padding:8px 16px; height:64px; gap:16px; justify-content:space-between }
    .topnav .logo { display:flex; gap:8px; align-items:center; width:210px }
        .topnav .logo img { max-height:48px }
        .topnav .logo .arrows {color: #f0e9d6;font-size:20px;cursor:pointer}
    .topnav .items {display:flex; gap:8px; justify-content:space-between; align-items:center; width:calc(100% - 210px)} 
        .topnav .items .il, .topnav .items .ir {display:flex; gap:16px; align-items:center;}

.accmenu { position:relative }
    .accmenu .top { display:flex; gap:8px; align-items:center; cursor:pointer }
        .accmenu .top .avatar { border-radius:8px;overflow:hidden }
            .accmenu .top .avatar img { max-height:38px; min-width:38px }
        .accmenu .top .name {color: #f0e9d6;font-weight:bold}
        .accmenu .top i { color:#888888 }
    .accmenu .con {position:absolute;display:none;flex-direction:column;gap:8px;justify-content:center;background-color: #00554e;border: 1px solid #f0e9d6;padding:12px;border-radius:8px;right:0;margin-top:12px;white-space:nowrap;font-size:12px}
        .accmenu .con hr {color: #ffffff;}
    .accmenu .btntt { font-size:12px }
    .accmenu.aaa .con { display:flex }

.bist { display:flex; gap:8px; align-items:center }
    .bist .icons {color: #fff871;}
        .bist .icons svg { height:28px }
    .bist .icons.wi { width:44px }
        .bist .icons img { height:42px; width:44px }
    .bist .infos { display:flex; flex-direction:column; justify-content:center }
        .bist .infos small {color: #ffffff;font-size:10px;}
        .bist .infos span { color:#ffffff; font-size:12px; font-weight:bold }

.btmnav { position:fixed; bottom:0; left:0; width:100%; z-index:4; background:#00554e; justify-content:space-evenly; align-items:center; height:60px; display:none }
    .btmnav .btnsvg2 { gap:2px } 
    .btmnav .btnsvg2 svg {  }

.langs {border: 1px solid #ffffff;border-radius:50px;padding:4px 8px 4px 4px;display:inline-block;cursor:pointer;position:relative;font-weight:bold;background-color: #f0e9d6;}
    .langs .hh { display:flex; gap:4px; align-items:center; justify-content:space-between; cursor:pointer }
        .langs .hh span {  }
        .langs .hh i { font-size:12px; color:#666666 }
    .langs .cc { position:absolute; left:0; margin-top:4px; background-color:#ffffff; border:1px solid #ececec; border-radius:8px; overflow:hidden; display:none }
        .langs .cc .ll { display:flex; gap:8px; align-items:center; cursor:pointer; padding:4px 12px 4px 8px;}
        .langs .cc .ll:hover { background-color:#ececec } 
            .langs .cc .ll span {  }
    .langs.aaa { background-color:#ececec; color:#666666 }
        .langs.aaa .cc { display:block }
    .langs img { max-width:28px }

.main-wrap { padding-top:64px; position:relative }

.sidebar {padding:16px;background-color: #04655b;position:fixed;z-index:7;left:0;top:64px;width:230px;height:calc(100vh - 64px);overflow-y:auto}
    .sidebar .items { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:24px }
    .sidebar .items a { width:calc(50% - 8px) }
    .sidebar .items2, .sidebar .items3 { display:flex; flex-direction:column; gap:12px; margin-bottom:24px }
    .sidebar .itemseve { position:relative; margin-bottom:16px;}
        .sidebar .itemseve .bgs {  }

.sidebar::-webkit-scrollbar { height: 2px; width: 2px; background: transparent;}
.sidebar::-webkit-scrollbar-thumb { background: #fff870; -webkit-border-radius: 1ex; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);}

.sidebar .langs { display:none; margin-bottom:16px }

.content-wrap { padding:8px 24px; width:100%; padding-left:254px} 
    .content-wrap .con { max-width:1600px; margin:0px auto }

.cccwrap { margin:12px 0px }

.ann {color: #111111;font-size:11px;height:24px;position:relative;display:flex;justify-content:center;align-items:center;padding:0px;}
    .ann .iicon {color: #04655b;font-size:14px;}
    .ann .ttext { width:100% }
    .ann .ttext span { padding-right:20px }
    .ann .readmore { position:absolute; top:10%; right:0px; height:80%; display:flex; justify-content:center; align-items:center; padding:0 8px; font-weight:bold; font-size:11px; border-radius:50px; color:#ffffff; border:1px solid #de00b5; background-color:#0d0127; text-transform:uppercase }

.banner-wrap { margin:8px 0px; border-radius:16px; overflow:hidden }
.splide__slide img { width:100%; }

.hebox-wrap { display:flex; gap:12px; margin:8px 0px; flex-wrap:wrap }
.hebox { border-radius:12px; border:0px solid #ffffff; /*box-shadow:inset 0px 0px 16px #ffffff;*/ padding:4px 12px; background:linear-gradient(180deg, #04655b 0%, #00554e 100%); width:calc(25% - 9px) }
.hebox.s1 { border-color:#dab25b; /*box-shadow:inset 0px 0px 16px #509950*/ }
    /*.hebox.s1:hover { box-shadow:inset 0px 0px 30px #509950 }*/
.hebox.s2 { border-color:#dab25b; /*box-shadow:inset 0px 0px 16px #b182f4*/ }
    /*.hebox.s2:hover { box-shadow:inset 0px 0px 30px #b182f4 }*/
.hebox.s3 { border-color:#dab25b; /*box-shadow:inset 0px 0px 16px #f6c255*/ }
    /*.hebox.s3:hover { box-shadow:inset 0px 0px 30px #f6c255 }*/
.hebox.s4 { border-color:#dab25b; /*box-shadow:inset 0px 0px 16px #cc2f20*/ }
    /*.hebox.s4:hover { box-shadow:inset 0px 0px 30px #cc2f20 }*/
.hebox:hover { filter:brightness(1.2) }
    .hebox a { display:flex; gap:16px; color:#ffffff; justify-content:start; align-items:center }
    .hebox .iicon { min-width:40px; max-width:32%; width:140px }
    .hebox .infos { display:flex; flex-direction:column; line-height:normal }
        .hebox .infos .tt { font-size:1vw; font-weight:bold }
        .hebox ,infos .desc { font-size:12px; }

.winner-wrap {font-size:12px;color: #111111;}
.winner-cons { padding:6px 0px; }
    .winner-cons .mqhold { display:flex; align-items:center; gap:5px;}
    .winner-cons .mqhold div { margin-right:8px }
    .winner-cons img { max-width:40px; margin-right:5px; }
    .winner-cons .user {color: #04655b;font-weight:bold}
    .winner-cons .amo {color: ##04655b;font-weight:bold}

.game-wrap { }
.gametabs {border-radius:16px;background: linear-gradient(180deg, #04655b 0%, #00554e 100%);padding:4px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;overflow-x:auto}
.gamecons { margin:16px 0px }
.glbox { display:none }
.glbox.aaa { display:block }
    .glbox .games { display:flex; flex-wrap:wrap }
        .glbox .games .gl { width:calc(12.5% - 16px); margin:8px; cursor:pointer; position:relative }
            .glbox .games .gl .iimg { border-radius:8px; overflow:hidden; display:block; position:relative; }
                .glbox .games .gl .iimg.s2 { width:100%; padding-top:100%; background-color: #000000 }
                .glbox .games .gl .iimg.s2 img { min-height:100% }
                .glbox .games .gl .iimg img { width:100% }
            .glbox .games .gl .name {font-size:12px;text-align:center;padding-top:8px;color: #111111;}
            .glbox .games .gl .ppic { position:absolute; width:100%; height:100%; top:50%; transform: translateY(-50%); z-index:1 } 
        .glbox .games .gl:hover .iimg::before { content:''; position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.8); top:0; left:0; z-index:2 }
        .glbox .games .gl:hover .iimg::after {position:absolute;font-family:"FontAwesome";content:"\f04b";font-size:30px;color: #fff870;top:50%;left:50%;transform:translate(-50%, -50%);z-index:2}
.glinfo { }
    .glinfo .tt { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px }
    .glinfo .gt { display:flex; gap:8px; align-items:center; font-weight:bold; font-size:16px }
    .glinfo .gt svg { height:28px; }

.glmenu { margin-bottom:16px; position:relative }
.glmenu .glmenu-swiper { margin:0px 28px }
.glmenu .swiper-button-next, .glmenu .swiper-button-prev { color:#ffffff; }
.glmenu .swiper-button-next::after, .glmenu .swiper-button-prev::after { font-size:20px; }
.glmenu .swiper-button-prev { left:0px; }
.glmenu .swiper-button-next { right:0px; }
.glmenu .btnsvg {  } 
.glmenu .btnsvg span { font-size:10px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; width:100%; text-align:center }

.footer-wrap {background: rgba(0,0,0,0.1);padding:16px;border-radius:16px}

.follow-wrap {  }
    .follow-wrap .tt { font-size:12px; color:#111111; text-align:center; padding-bottom:8px}
    .follow-wrap .cons { display:flex; gap:8px; justify-content:center; align-items:center }
        .follow-wrap .cons img { max-width:32px }

.provider-wrap {border-bottom: 1px solid #ffffff;border-left-width:0;border-right-width:0;padding:16px 0px;margin:0px 0px 24px 0px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
    .provider-wrap img { max-width:118px }

.license-wrap {display: flex;justify-content: center;gap: 80px;border-bottom: 1px solid #ffffff;padding-bottom: 16px;margin-bottom: 24px;}
    .license-wrap .tt { white-space:nowrap; }
    .license-wrap .cons { display: flex; gap: 16px; flex-wrap:wrap}
        .license-wrap .cons img { max-height: 30px; }

.footer-conwrap { display:flex; gap:12px  }
.footcon { white-space:nowrap; display:flex; flex-direction:column; gap:8px }
.seo-wrap {color: #111111;}
    .seo-wrap h1 {font-size:24px;color: #1;}
    .seo-wrap h2 {font-size:22px;color: #03665b;}
    .seo-wrap h3 { font-size:20px; color:#ffffff }
    .seo-wrap h4 { font-size:18px; color:#ffffff }
    .seo-wrap h5 { font-size:16px; color:#ffffff }
    .seo-wrap a {color: #03665b;}

.copyright-wrap {text-align:center;text-transform:uppercase;font-size:12px;margin-top:12px;color: #111111;}
    .copyright-wrap span {font-weight:bold;color: #03665b;}

.float-lc { position:fixed; right:15px; bottom:68px; z-index:3; display:flex; flex-direction:column }

.modal-s1 {  }
    .modal-s1 .modal-header {background: #00554e;border-color: #00554e;padding:12px;color:#ffffff;display:flex;justify-content:center;align-items:center;font-size:16px;gap:8px;font-weight:bold}
    .modal-s1 .modal-content {border: 2px solid #00554e;color: #484848;background-color: #f0e9d6;}
    .modal-s1 .modal-body { background-size:cover; background-repeat:no-repeat; background-position:center }
    .modal-s1 .modal-footer { border:0; background-color:#000000 }
    .modal-s1 .modal-title-cus { color:var(--syscolor-title); font-size:30px; font-weight:bold; text-transform:uppercase; margin-bottom:12px; text-align:center; line-height:normal }
    .modal-s1 a {color: #00554e;font-weight:bold}
    .modal-s1 a.btn-modal-close { color:#ffffff }
    .modal-s1.videos {  }
        .modal-s1.videos video { width:100% }
.btn-modal-close { position:absolute; z-index:1; font-size:28px; color:#ffffff; right:-6px; top:-6px; line-height:normal }
.modal-s2 {  }
    .modal-s2 .modal-content { background:transparent }
    .modal-s2 a.btn-modal-close { color:#00554e }

.pann-wrapper { display:block; border-radius:5px; overflow:hidden }
.pann-sidemenu { background-color:#111111; min-width:auto; max-width:none; width:100%; padding:10px; overflow-x:auto; white-space:nowrap; font-size:0 }
    .pann-sidemenu a { color:#ffffff; background-color:#363636; display:inline-block; padding:8px 16px; font-size:14px; border-radius:5px; margin:0px 3px; font-weight:bold }
    .pann-sidemenu a.aaa { background:linear-gradient(180deg, #65008e 0%, #ea0191 100%); color:#ffffff }
.pann-content { width:100%; }
    .pann-content.more { background-color:#0d0127; padding:10px; }

.pannbox { display:none; }
.pannbox.aaa { display:block }

.input-group.s1:focus-within { border-color:#00554e }
.input-group.s1 {border: 2px solid #00554e;border-radius:8px;overflow:hidden;padding:4px 12px;background-color:#ffffff}
    .input-group.s1 .input-group-text { font-size:14px; color:#888888; border-radius:0px; background-color:#ffffff; border:0  }
    .input-group.s1 .form-control { border:0; font-size:14px; color:#555555; outline:none; appearance:auto; -moz-appearance:auto; -webkit-appearance:auto; height:32px; }
        .input-group.s1 .form-control:focus { box-shadow:none }
        .input-group.s1 .form-control::placeholder { color:#888888 } 
        .input-group.s1 .form-control:disabled { background-color:#ffffff; }
    .input-group.s1.wr { }
    .input-group.s1.wr .bbtn { position:absolute; z-index:6; right:0; top:0; width:auto; border-radius:8px 0px 0px 8px!important }
        .input-group.s1.wr .bbtn img { max-height:40px }

.input-group.s2:focus-within { border-color:#ffffff }
.input-group.s2 {border: 2px solid #03665b;border-radius:8px;overflow:hidden;padding:0px 12px;background-color: #ffffff;border-radius:50px}
    .input-group.s2 .input-group-text {font-size:14px;color:#888888;border-radius:0px;background-color: #ffffff;border:0}
    .input-group.s2 .form-control { border:0; font-size:14px; color:#111111; outline:none; background-color:transparent; padding:4px 8px; appearance:auto; -moz-appearance:auto; -webkit-appearance:auto; }
        .input-group.s2 .form-control:focus { box-shadow:none }
        .input-group.s2 .form-control::placeholder { color:#aaaaaa } 
        .input-group.s2 .form-control:disabled { background-color:transparent; }

.form-check label { font-size:12px }
.form-check-input:checked, .form-check-input { background-color:transparent; border-color:#de00b5;}
.form-check-input:focus { box-shadow:none }

.promo-wrap { }
.prmenu {display:flex;align-items:center;justify-content:space-between;border-radius:12px;background: linear-gradient(180deg, #04655b 0%, #00554e 100%);padding:0px 24px;overflow-x:auto;height:58px}
    .prmenu a { color:#ffffff; padding:12px 18px; font-weight:bold; white-space:nowrap }
    .prmenu a.aaa, .prmenu a:hover {color: #fff870;}
.prcon { margin:24px 0px; display:flex; gap:24px; flex-wrap:wrap; position:relative }
.prbox {background-color: #03665b;border-radius:12px;overflow:hidden;width:0;opacity:0;visibility:hidden;height:0;position:absolute}
    .prbox .iimg {  }
        .prbox .iimg img { width:100% }
    .prbox .ccon { padding:12px; text-align:center }
        .prbox .ccon h5 {margin:0;color: #ffffff;}
        .prbox .ccon small { font-size:10px; display:block; color:#888888 }
        .prbox .ccon .act { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:8px }
    .prbox.aaa {opacity:1; visibility:visible; height:100%; width:calc(50% - 12px); position:relative}
.prdetail {  }
    .prdetail .iimg { border-radius:12px; overflow:hidden; margin-bottom:16px }
        .prdetail .iimg img { width:100% }
    .prdetail .ddesc {  }
    .prdetail .cta { margin:8px 0px 16px; text-align:center }

.acc-wrap { max-width:768px; margin:0 auto; border-radius:16px; background-color:#00554e; overflow:hidden  }
.accbox-header { display:flex; gap:24px; justify-content:space-between; align-items:center; padding:24px; }
.accbox-content {background-color: #ffffff;padding:24px;}
    .accbox-content h3 {text-align:center;margin-bottom:24px;padding-bottom:24px;border-bottom: 1px solid #03665b;font-size:24px}

.acc-infos { display:flex; gap:8px; align-items:center; width:35%; position:relative }
    .acc-infos .avatar { position:relative }
        .acc-infos .avatar img { max-height:66px; border-radius:8px; }
        .acc-infos .avatar.edit { cursor:pointer } 
        /*.acc-infos .avatar.edit:hover::before { content:''; position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.8); top:0; left:0; z-index:2 }
        .acc-infos .avatar.edit:hover::after { position:absolute; font-family:"FontAwesome"; content:"\f044"; font-size:22px; color:#de00b5; top:50%; left:50%; transform:translate(-50%, -50%); z-index:2 }*/
        .acc-infos .avatar .badges { position:absolute; width:20px; height:20px; display:flex; justify-content:center; align-items:center; border-radius:50%; background-color:#fff871; right:-2px; bottom:-2px; font-size:12px; }
    .acc-infos .detail {  }
        .acc-infos .detail .name { color:#f0e9d6; font-weight:bold; font-size:16px }
        .acc-infos .detail .infos { display:flex; flex-direction:column; justify-content:center }
            .acc-infos .detail .infos small { color:#888888; font-size:10px; }
            .acc-infos .detail .infos span { color:#ffffff; font-size:12px; font-weight:bold }

.acc-buttons { display:flex; flex-wrap:nowrap; gap:16px; width:60%  }
    .acc-buttons a { width:25% }

.avsshop { position:absolute; background-color:#0d0127; border:2px solid #de00b5; border-radius:8px; top:76px; padding:6px; display:none }
    .avsshop::before { content:""; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid #de00b5; position:absolute; top:-8px; left:26px }
    .avsshop .avs-con { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:6px; width:284px }
    .avsshop .ava { max-width:52px; border-radius:8px; overflow:hidden; cursor:pointer }
    .avsshop .ava.aaa, .avsshop .ava:hover { border:2px solid #de00b5; filter:brightness(1.2) }
    .avsshop .avs-cta { margin-top:6px }

.sys-avatarbox.aaa .sys-avatarshop { display:block }

.acccon {  }

.acclinks { width:80%; margin:0 auto; display:flex; flex-direction:column; gap:24px }
    .acclinks a { width:100%; display:flex; justify-content:space-between; align-items:center; padding:12px 24px; gap:12px }
    .acclinks span { display:flex; align-items:center; gap:12px }

.accbox-back { display:flex; align-items:center; gap:24px; padding:24px 24px 0px; background-color:#ffffff }
    .accbox-back .backs { display:flex; align-items:center; gap:8px; font-weight:bold }
        .accbox-back .backs i { color:#00554e }
        .accbox-back .backs span { color:#888888 }

.depo-wrap {  }
.depopm {display:flex;justify-content:center;align-items:start;overflow-x:auto;gap:16px;padding:12px;border-radius:12px;background-color: #00554e;margin-bottom:20px}
    .depopm img { max-height:58px }
    .depopm a { filter:grayscale(1); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; line-height:normal; font-size:12px; font-weight:bold; padding:4px 12px }
    .depopm a.aaa, .depopm a:hover {filter:grayscale(0);color: #f0e9d6;}
.depopmsel { margin-bottom:20px; display:flex; flex-wrap: wrap; gap:12px }
    .dsel {border: 1px solid #03665b;background-color: #fffaee;color: #00554e;font-size:16px;border-radius:12px;padding:0px 24px;width:calc(33.33% - 9px);cursor:pointer;position:relative;height:48px;display:flex;align-items:center}
    .dsel:hover, .dsel.aaa {background-color: #03665b;color: #fffaee;} 
    .dsel.aaa::before { content:""; position:absolute; font-family:"FontAwesome"; content:"\f14a"; font-size:26px; color:#ffffff; top:50%; right:24px; transform:translateY(-50%) }
    .depopmsel .break { flex-basis:100%; }
.depoamo { margin-bottom:20px; display:flex; align-items:center; justify-content:center; flex-wrap: wrap; gap:12px } 
    .depoamo a {border: 1px solid #01675b;background-color: #fffaee;color: #01675b;font-size:14px;font-weight:bold;border-radius:12px;width:calc(12.5% - 11px);cursor:pointer;position:relative;height:48px;display:flex;align-items:center;justify-content:center}
    .depoamo a.aaa, .depoamo a:hover {background-color: #01675b;color: #fffaee;}

.history-wrap {  }
.hissel { margin-bottom:20px; display:flex; flex-wrap: wrap; gap:12px }
    .hsel {border: 1px solid #03665b;background-color: #fffaee;color: #00554e;font-size:16px;border-radius:12px;padding:0px 24px;width:calc(50% - 6px);cursor:pointer;position:relative;height:48px;display:flex;align-items:center}
    .hsel:hover, .hsel.aaa {background-color: #03665b;color: #fffaee;} 
    .hsel.aaa::before { content:""; position:absolute; font-family:"FontAwesome"; content:"\f14a"; font-size:26px; color:#ffffff; top:50%; right:24px; transform:translateY(-50%) }

table { width:100%; border-collapse:collapse }
    table thead {background-color: #03665b;color:#ffffff}
    table td, table th {padding:5px;border: 1px solid #00554e;}
    table td {background-color: #ffffff;}

.sysdes { }
.sysmob { display:none }

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { color:#ffffff!important }

.ref { text-align: center; }
.referral { display: flex; margin-bottom: 20px; }
.refqr { display: flex; flex-direction: column; border: 2px solid #f0e9d6; padding: 24px 24px 16px 24px; border-radius: 13px; text-align: center; background: #00554e; width: 40%; margin: 0px auto;}
    .refqr a { color: #ffffff; margin-top: 10px; }
    .refqr .iimg { padding:8px; background-color:#ffffff }
    .refqr .iimg img, .refqr .iimg canvas { max-width:100% }
.refshare { margin: 30px; width: -webkit-fill-available; }
.refsm { margin: 20px; }
.refsm .cons a img { margin: 5px;}
.refnote { font-weight: bold; text-align: center; }
    .refnote span { color: #de00b5; }
.refspecial { display:flex; justify-content:center; align-items:center; gap:8px }
    .refspecial img { max-height:26px; margin-top:-6px }

.reftnc { text-align: left; margin-top: 20px; line-height: 24px; }
.reftnc li { font-size: 12px; color: #ffffff; }

.ref .tier { line-height:normal }
.ref .tier2 { font-size: 12px; }
.ref .tier2 span { font-size: 10px; }

.contact { display: flex; flex-direction: column; align-items: center; }
.con-chanel { min-width: 180px; margin: 10px; font-size: 20px !important; padding: 6px 24px !important; background-color:#04655b}
    .con-chanel a { color: inherit; display: flex; align-items: center; gap: 14px; }
    .con-chanel i { font-size: 28px; }

.appdl-wrap {  }
    .appdl-wrap .appdl-title {  }
    .appdl-wrap .appdl-desc { display:flex; gap:16px; margin:32px 0px }
        .appdl-wrap .appdl-desc .btnmg { width:100%; text-transform:uppercase; padding:4px 16px; justify-content:center; gap:8px }
        .appdl-wrap .appdl-desc .btnmg img { max-height:36px }
    .appdl-wrap .appdl-holder { display:flex }
        .appdl-wrap .appdl-holder .holder { margin:0px auto; position:relative }
        .appdl-wrap .appdl-holder .holder .bbg {  }
        .appdl-wrap .appdl-holder .holder .ccon { position:absolute; top:10%; left:20%; width:60% }
            .appdl-wrap .appdl-holder .holder .ccon .ttitle { text-align:center; font-size:38px; font-weight:bold }
            .appdl-wrap .appdl-holder .holder .ccon .desc { text-align:center }
            .appdl-wrap .appdl-holder .holder .ccon .info { padding:24px 0px 0px }
                .appdl-wrap .appdl-holder .holder .ccon .info ol { padding:0px 20px 0px 50px; margin:0 }
                .appdl-wrap .appdl-holder .holder .ccon .info ol li { padding:12px 0px }
            .appdl-wrap .appdl-holder .holder .ccon .qrcode { margin:30px; padding:10px; background-color:#ffffff; border:3px solid #de00b5 }
                .appdl-wrap .appdl-holder .holder .ccon .qrcode img, .appdl-wrap .appdl-holder .holder .ccon .qrcode canvas { max-width:100% }
            .appdl-wrap .appdl-holder .holder .ccon .cta { filter:drop-shadow(0px 0px 6px #de00b5) drop-shadow(0px 0px 6px #de00b5) }
                .appdl-wrap .appdl-holder .holder .ccon .cta a:hover { filter:brightness(1.4) }

.guide { display: flex; }
.g-video { display: flex; flex-direction: column; cursor: pointer; }
.g-video .btnmg {justify-content: center;padding: 10px;margin: 15px 5px;}

.app-dl { display: none; align-items: center; position: relative; }
.app-dl i { position: absolute; right: 10px; top:50%; transform:translateY(-50%)}
.app-dl img{ max-height: 64px; }
.app-dl-ico img { max-width: 66px; margin-bottom: 10px; }
.app-banner {display: none; z-index:8; position: fixed; }
body.dl-app .app-dl { display:flex }

.rebate-wrapper {}
.bals-rebate-holder { display:flex; gap:8px }
.bals-rebate-wrapper { position:relative; width:100%; border-radius:8px; padding:12px 18px; border:1px solid #ffffff; background:#f0e9d6; line-height:normal;  display:flex; justify-content:space-between; align-items:center; text-align:left; border-radius:8px;}
    .bals-rebate-wrapper .ttitle { color:#ff4201; font-size:12px; font-weight:bold; }
    .bals-rebate-wrapper .info { font-size:28px; color:#000000; font-weight:bold }
    .bals-rebate-wrapper .info a { color:#ff4201; font-size:14px }
    .bals-rebate-wrapper i { color:#de00b5 }
    .bals-rebate-wrapper button { min-width:120px }
    .bals-rebate-wrapper button[disabled] { filter:grayscale(1); pointer-events:none }
.rebate-table {} 
    .rebate-table table { width:100%; text-align:center; border-collapse:collapse; }
    .rebate-table table thead { font-size:16px; font-weight:bold; }
    .rebate-table table th, .rebate-table table td { padding:8px; }
    .rebate-table table td { font-size:12px }

.footcon { display:none;  }

.checkin-wrapper { position:relative }
    .checkin-wrapper .bbg {  }
    .checkin-wrapper .con { position:absolute; top:28%; left:3%; width:94% }
        .checkin-wrapper .con .desc { text-align:center; font-weight:bold; margin: 0 auto; max-width:70%; line-height:normal }

.cims-wrap { display:flex; gap:2px; margin-top:2px }
.cims { position:relative; pointer-events:none }
    .cims .iimg { position:relative }
    .cims .date { position:absolute; color:#2100ac; font-size:12px; font-weight:bold; display:flex; justify-content:center; align-items:center; width:100%; top:18% }
    .cims.ready { cursor:pointer; pointer-events:auto; animation:blinkShadow 2s ease infinite; }
    .cims.miss { filter:grayscale(1) }
    .cims.done .iimg::before { content:''; background-image:url(../img/ci/c-done.png); position:absolute; top:0; left:0; width:100%; height:100%; background-size:100% 100%; }

.fc-top { cursor:pointer }
    .fc-top img { max-height:48px }

.sp-popup { display:flex; flex-direction:column; justify-content:center; align-items:center }
    .sp-popup .iimg {  }

.sys-aapps-in, .sys-ci { display:none }
.sys-aapps-in.aaa, .sys-ci.aaa { display:flex }

.download-pop-wrapper {  }
.prov-title-img { text-align: center; padding-bottom: 10px; }
.access-info { text-align: center; overflow: auto; margin: 10px auto 15px; font-size: 14px; }
.download-wrapper {  }
.downloadbox { display:flex; gap:20px; justify-content:center }
.dlbox { max-width:160px; }
    .dlbox .iimg { padding:10px; background-color:#ffffff }
    .dlbox .iimg img, .dlbox .iimg canvas { width:100% }
    .dlbox .bbtn { padding-top:3px; text-align:center }

@keyframes blinkShadow {
    50% {
        filter:drop-shadow(0 0 8px #dc0eff) brightness(1.2);
        transform:scale(1.03)
    }
}

@keyframes spin {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg) }
}

@media (min-width: 768px) {
    body.msb {  }
    body.msb .topnav .logo .arrows { transform:rotate(180deg) } 
    body.msb .sidebar { padding:0; width:56px; }
    body.msb .sidebar .items { flex-direction:column; gap:12px }
    body.msb .sidebar .items a { width:100% }
    body.msb .sidebar .items a span { display:none }
    body.msb .sidebar .items a.btnsvg { border:2px solid transparent }
    body.msb .sidebar .items a.btnsvg.aaa, body.msb .sidebar .items a.btnsvg:hover {border: 2px solid #f0e9d6;}
    body.msb .btnsvg svg { max-height:28px }
    body.msb .sidebar a.btnmg { background:transparent; padding:0 6px }
    body.msb .sidebar a.btnmg img { max-height:70px }
    body.msb .sidebar a.btnmg span { display:none }
    body.msb .sidebar a.btntt { padding:4px 6px; justify-content:center}
    body.msb .sidebar a.btntt i { font-size:22px; }
    body.msb .sidebar a.btntt span { display:none }
    body.msb .content-wrap { padding-left:80px }
    body.msb .sidebar .itemseve { text-align:center }
    body.msb .sidebar .itemseve .bgs { max-width:50px; margin:0 auto; border-radius:8px; overflow:hidden; display:block }
    body.msb .sidebar .itemseve .bgs img { width:216px; max-width:none }
}

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

    .glbox .games .gl { width:calc(16.66% - 16px); margin:8px; cursor:pointer; position:relative }

}

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

    .sysdes { display:none }
    .sysmob { display:flex }

}

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

    .sidebar { left:-230px }
    .content-wrap { padding-left:24px }
    .topnav .logo { width:42vw }
    .topnav .logo .arrows { transform:rotate(180deg) }
    .topnav .items { justify-content:flex-end; width:auto }
    .topnav .items .il, .topnav .items .ir { gap:8px }
    .btmnav { display:flex }
    .provider-wrap img { max-width:20% }
    .license-wrap { flex-direction: column; gap:10px; font-size: 12px; }
    .prdetail .license-wrap { margin-bottom: 0px; margin-top: 30px; border-bottom: none; border-top: 1px solid #222; padding-bottom: 0px; flex-direction: row; padding-top: 10px; justify-content: space-between }
    .prdetail .license-wrap .cons {gap: 10px}
    .prdetail .license-wrap .cons img {max-height: 20px;}

    .topnav .ccon, .content-wrap { padding:8px 12px }
    .content-wrap { padding-bottom:68px }
    
    .seo-wrap { font-size:2.8vw }
    .seo-wrap h1 { font-size:5.4vw }
    .seo-wrap h2 { font-size:5vw }
    .seo-wrap h3 { font-size:4.6vw }
    .seo-wrap h4 { font-size:4.2vw }
    .seo-wrap h5 { font-size:3.8vw }

    .copyright-wrap { font-size:2.4vw }

    .prbox.aaa { width:100% }

    .accmenu .top { font-size:2.8vw }
    .accmenu .top .avatar img { max-height:7vw; min-width:7vw }

    .accbox-header { flex-direction:column; align-items:start }
    .acc-infos, .acc-buttons, .acclinks { width:100% }
    .acc-buttons { gap:8px }

    .depoamo, .depopmsel, .hissel { gap:6px }
    .dsel, .depoamo a, .hsel { font-size:14px; height:42px }
    .depoamo a { width:calc(25% - 5px) }
    .dsel, .hsel { width:calc(50% - 3px) }

    body.msb .topnav .logo .arrows { transform:rotate(0deg) } 
    body.msb .sidebar { left:0 }
    body.msb .main-wrap::before { content:''; position:fixed; z-index:5; width:100%; height:calc(100vh - 64px); left:0px; top:64px; background:rgba(0,0,0,0.5) }
    
    .glbox .games .gl { width:calc(25% - 12px); margin:6px }

    .topnav .items .il, .footcon { display:none }
    .sidebar .langs { display:block }

    .referral { flex-direction: column;}
    .refqr { width: 50%; }
    .refqr a { color: #ffffff; margin-top: 10px; }
    .refshare { margin: 20px 0px 0px; }
    .refsm { margin: 5px; }

    .checkin-wrapper .con .desc { max-width:100%; font-size:3vw }
    .cims .date { font-size:2.8vw }

    .bals-rebate-holder { flex-direction:column }

    .bist .icons.wi { width:28px }
        .bist .icons img { height:28px; width:28px }

    .hebox-wrap { flex-wrap:wrap; gap:12px }
    .hebox { width:calc(50% - 6px) }
    .hebox a { flex-direction:column; gap:4px; }
    .hebox .infos { text-align:center }
    .hebox .infos .tt { font-size:3.2vw }
    .hebox .infos .desc { font-size:2.2vw }

}

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

    .btns { font-size:3.2vw; padding:.8vw 2.4vw }
    .glbox .games .gl { width:calc(33.33% - 12px); }

    .appdl-wrap .appdl-desc { gap:8px; margin:20px 0px }
    .appdl-wrap .appdl-desc .btnmg img { max-height:28px }
    .appdl-wrap .appdl-holder .holder .ccon { font-size:3vw }
    .appdl-wrap .appdl-holder .holder .ccon .ttitle { font-size:6.6vw }
    .appdl-wrap .appdl-holder .holder .ccon .info { padding-top:4vw }
    .appdl-wrap .appdl-holder .holder .ccon .info ol { padding:0px 4vw 0px 6vw }
    .appdl-wrap .appdl-holder .holder .ccon .info ol li { padding:2vw 0px }
    .appdl-wrap .appdl-holder .holder .ccon .qrcode { margin:4vw; padding:2vw }

    .guide { display: grid; grid-template-columns: repeat(2, 1fr);}
    body.dl-app .app-banner { display: block; height: 52px;}
    .app-banner .app-dl .c-app { margin-top: -10px; }
    body.dl-app .topnav .app-dl { display: none; }

    body.dl-app {}
    body.dl-app .topnav { margin-top: 12vw;}
    body.dl-app .main-wrap { top: 50px; }
    body.dl-app .sidebar { top:114px; height:calc(100vh - 114px)  }

}