body{padding:0;overflow-x:hidden;font-size:16px; line-height: 1.5; color:#fff;background: #000; }
.container{width:1170px;margin:0 auto; }
img,a,p,ul,li,div,input,h1,h2,h3,h4,h5,h6,span,textarea,table,tr,td{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0;padding: 0}
body {font-family: Arial, Helvetica, sans-serif; }
a{text-decoration:none; color:#333;  }
select,textarea,input,a:hover,a:focus,button{outline:none}
.img_fit{max-width:100%; display:block;}
img{height: auto;}
ul{padding-left:0;list-style-type:none;}
body,p,ul{margin:0;}
.clr{clear:both}
.scroll_fix{overflow-y:hidden} 
table{border-collapse: collapse;width: 100%}
.flex { display:flex; display:-webkit-box;display:-moz-box; display:-ms-flexbox; display: -webkit-flex; flex-wrap: wrap;}
.flex-md{ -webkit-align-items: center;align-items: center;-webkit-justify-content: center; justify-content: center;}  
.flex-center{-webkit-justify-content: center; justify-content: center;}
.flex-bt{  -webkit-align-items: flex-end; align-items: flex-end;}
.flex-space-between{ justify-content: space-between;}
.flex-md-row-reverse { flex-direction: row-reverse ;}
.flex-container { align-content:stretch;} 
.flex-1 { flex: 1 0 0%;}
.col-auto { flex: 0 0 auto; width: auto;}
.mr-l{margin-left:auto;}
.col-6 {width: 50%;}
.col-3{width: 33.33%;}  .col-9{width: 66.66%;}  
.col-4 {width: 25%;}  .col-8 {width: 75%;}
.col-45 {width: 45%;} .col-55 {width: 55%;}
.col-1{width: 16.66%} .col-5 {width: 20%;} 
.col-60 {width: 60%;}  .col-40 {width: 40%;} 
.col-12 {width: 100%;} .col-10{width:83.33%;}
.col-R{padding-left: 20px;} .col-L{padding-right: 20px;}
a,.mask,li:hover, .btn,nav li>a:after, .thumbimg img,.box {transition: all 0.3s ease;-moz-transition: all 0.3s ease;-webkit-transition:all 0.3s ease;-o-transition: all 0.3s ease;}
.thumbimg:hover img  {-webkit-transform:scale(1.1);transform:scale(1.1);}
.row{margin: 0 -10px;}
.row>li{padding:10px;} 
hr{border: 0;border-top:1px solid #bfbfbf ;background: none;}
.center-img{margin: 0 auto;}
/*---------------------------------------------------------*/  
header{  z-index: 9;   ;padding: 8px 0; background-color: #212121;}  
.logo {  display:block ;}  
.topnav>li{position: relative; }
.topnav>li>a{padding:16px ; display:block; color: #fff;}    
.topnav>li>a:hover{color: var(--primary-color);}
.topnav ,.topnav li>a{height: 100%; } 
.topnav li.active>a,.topnav li.active>a:hover{  background: var(--primary-color); color: #000;} 
 nav{ background: #333333 ;  }

#nav-icon{background-color: var(--primary-color); z-index:1000;position:absolute;right:0;top:0; height:50px;width:50px;
  -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;cursor: pointer}
#nav-icon span{ background-color: #333; height:2px;width:60%;border-radius: 9px; opacity: 1;left: 20%;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}
#nav-icon span:nth-child(1) {top:15px;}#nav-icon span:nth-child(2) {top:25px;}#nav-icon span:nth-child(3) {top:35px;}
#nav-icon.open span:nth-child(1) {top:25px;-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-o-transform: rotate(135deg);transform: rotate(135deg);}
#nav-icon.open span:nth-child(2) {opacity: 0;left: -60px;}
#nav-icon.open span:nth-child(3) {top:25px;-webkit-transform: rotate(-135deg);-moz-transform: rotate(-135deg);-o-transform: rotate(-135deg);transform: rotate(-135deg);}
 
 
.sns{margin-top: 20px;}
.sns a:hover{opacity:0.6;}
.side_nav{position: fixed;right: 0;bottom: 45%;z-index: 9;}
.side_nav .a2a_kit a{display: block;float: none;margin-bottom: 5px}


.dropdown{position: relative;padding-right: 20px; }
.dropdown::after{content:"";position: absolute;right:8px ;top:15px;color: #fff; background:  url(../images/er.png);width: 15px;height: 15px;}
.dropdown-open{display: none;  z-index: 99;position: absolute;left: -20px;right: -20px;top:48px; background:rgba( 20,20,20,0.9);}
.dropdown-open a{color: #fff;padding:8px; display: block;}
.dropdown-open a:hover{background-color: #fff;color: #000;}
.dropdown-open::after{ background:  url(../images/er.png);}
 
.all-height{height:100%;}
.top-btn{text-align: right;}
.top-btn .btn{padding: 10px 20px;width: 100%; }
.top-btn li{padding:5px 5px 0 5px;}
.btn{padding:10px 5%;text-align: center;margin:5px ; display:inline-block; color: #222;border-radius: 10px; 
   background:var(--primary-color);}  
.btn-list  .btn:hover, .top-btn .btn:hover { background: #fff;   }
.btn-sec{background: #f4f4f4;} 
  
.banner{ background:url(../images/banner-bg.webp) ; background-repeat:  no-repeat;background-position:  center ;color: #fff;
  position: relative; background-size: cover; overflow: hidden;padding:  80px 0;  } 
.banner-title{font-size:2.8rem; font-weight: bold;  line-height: 1.5; text-transform: uppercase;  }  
.banner-block{background-image: linear-gradient(180deg, #272727, #4a4a4a); padding: 2em;}
.box{ height: 100%;border-radius:16px;background: linear-gradient(135deg,  #333333 0%,#4d4a2e 100%) }
.banner a,.bg-box a{color: #fff;}
.box-title{font-size: 1.3em; font-weight: bold;}   
.box-contain{background: #fff;color: #000; padding: 16px;position: relative; }
 

.pagetop{  background-position: center ;background-size: cover; color: #fff;  padding: 100px 0; text-align: center;}     
.page-title{font-size:3em;font-weight:bold;display: inline-block; }
 
 
 
.pagetop-register{background-image: url(../images/pagetop-register.webp) ;}
.pagetop-casino{background-image: url(../images/pagetop-casino.webp) ;} 
.pagetop-slot{background-image: url(../images/pagetop-slot.webp) ;}
.pagetop-sport{background-image: url(../images/pagetop-sport.webp) ; } 
.pagetop-esport{background-image: url(../images/pagetop-esport.webp) ; }  
.pagetop-deposit{background-image: url(../images/pagetop-deposit.webp) ; } 
.pagetop-withdrawal{background-image: url(../images/pagetop-withdrawal.webp) ; }
.pagetop-agent{background-image: url(../images/pagetop-agent.webp) ; }
.pagetop-promo{background-image: url(../images/pagetop-promo.webp) ; }
.pagetop-app{background-image: url(../images/pagetop-app.webp) ; }
.pagetop-login{background-image: url(../images/pagetop-login.webp) ; }
.pagetop-fish{background-image: url(../images/pagetop-fish.webp) ; }

 

.btn-list .btn{display: flex; }
.btn-list .btn span{display: block; font-size: 3em; line-height: 1;}
 
 .game-box { background:#fff;border: 1px solid #faf160; overflow: hidden;}
 .game-title{  font-size: 1.4em;font-weight: bold;}  


 footer { padding:24px 0;color:#707272;background-color: #212121; }    
 footer a:hover{color: var(--primary-color);} 
 .footer-nav{margin:8px 0;}
 .footer-nav a{padding: 10px;display: inline-block; color: #fff;}
.ft-title{font-size: 1.4em;font-weight: bold;margin-top: 8px;}
.footer-contain{margin-bottom: 24px;padding-bottom: 24px; border-bottom: 1px solid #666;}
.copyright{color: #eee;text-align: center;   }

.content{padding:16px;}   
.contain{padding:2em;}
 
.home-bg{background:url(../images/home-bg.webp) no-repeat center  ;  }   
 .home-img{margin-top: -24px;}
.home-img2 { max-width:120%;margin-right: -20%;}
.home-img3 { max-width:120%;margin-left: -20%;}  
  
.stretch{ align-items:stretch; }
 

/*QA*/
.faqs{ list-style: none;  margin:0 auto;   }
.faqs>li{ margin-bottom: 16px;   overflow: hidden;  background: #333;border-radius:16px; } 
.faq-question { position: relative;  cursor: pointer;  font-weight: bold;  transition: all .5s ease;   padding :16px ; padding-right:40px;  }  
.faqs>li .open{ color:var(--primary-color);background: linear-gradient(135deg, #333333 0%, #4d4a2e 100%); }
.faq-answer{display: none; padding: 15px;   }
 .faq-question::before { position: absolute; content: ''; width: 30px; height: 30px; top: 8px; right: 10px;background: url(../images/down.png) no-repeat center;}
.faq-question.open::before { background: url(../images/down_a.png) no-repeat center;;}
  
 

.table-main{ margin:16px 0;  border-right: 1px solid rgba(168, 168, 168, 0.6) ; border-top: 1px solid rgba(168, 168, 168, 0.6) ;  border-bottom: 1px solid rgba(168, 168, 168, 0.6) }
.table-main th,.table-main td{padding: 8px;border-left: 1px solid rgba(168, 168, 168, 0.6);  }
.table-main th{background-color:var(--primary-color);color: #000;  ; border-bottom: 1px solid rgba(1255, 255, 255, 0.6) ; }
.table-main tr:nth-child(odd){background-color:rgba( 0,0,0,0.2);}
 
  
.main{padding-top: 40px;padding-bottom: 40px; }
.mask{ left: 0; right: 0; bottom: 0;position: absolute; padding: 10px;background: linear-gradient(90deg, #90e290, rgba(88,170,88,0.6) );color: #000; }  
.title { line-height: 1.2; font-size: var(--h2);  font-weight: bold; margin: 16px 0; color: var(--primary-color); } 

 
.border{border-radius: 10px; }
.p {margin:16px 0;} 
.spot>li  {background: url(../images/spot.png) no-repeat left top ; padding-left:25px;margin:10px 0;}
.spot-check>li {background: url(../images/spot-check.png) no-repeat left 5px ;padding-left:30px;  }
.check-icon {background: url(../images/spot-check.png) no-repeat left 5px ;padding-left:30px;  }

.spot-list li{background: url(../images/spot.png) no-repeat left 5px ; padding-left:20px; margin-right:20px;}
.spot,.spot-num {margin: 16px 0;}  
.spot-num li{margin:8px 0;}

.step{counter-reset: step ;}
.step>li{padding:10px 0;position: relative;padding-left: 40px;height: 100%}
.step>li:before{position: absolute;
content:counter(step); counter-increment: step; width: 30px;height: 30px;background-color: var(--primary-color);
color: #000;border-radius: 50%;display: inline-block;text-align: center;line-height: 30px ;left: 0px;  z-index: 1; }
.step>li:after{
  content:'';position: absolute;width: 2px;height: 100%; background-color: var(--primary-color);left:14px; top:10px; z-index: 0;}
.step>li:last-child:after{content:none}


/*--------------------------------------------------------*/  
:root {
  --primary-color: #ffe400;
  --secondary-color: #0099cf; 
  --white:#fff;
  --h2: 2rem;
}
.h2{font-size: var(--h2);}
.bg-main {background: linear-gradient(135deg, #333333 0%, #4d4a2e 100%); }
.title,.banner-title,.page-title{font-family:  Arial, Helvetica,  sans-serif;} 
.bg-w{background: #fff;color: #333;}   
.w-text{color: #fff;}
.w-main {color: var(--primary-color);} 
.w1{color: var(--secondary-color);} 
.bg{background: url(../images/bg.webp) no-repeat center fixed ;background-size: cover; }   
 
 
.w-b{color: #000;}  
.bg-grey{background :#333333}  
.big-txt{font-size:4.8em;display: block;margin-top: -40px;}

.bg-g{background: linear-gradient(135deg,  #08a372 0%,#064733 100%); color: #fff;}
.bg-b{ background: linear-gradient(135deg,  #3889d1 0%,#1b5a8f 99%);color: #fff;  }
.bg-p{ background: linear-gradient(135deg,  #612a84 0%,#422178 99%);color: #fff;}
.bg-y{ background: linear-gradient(135deg,  #e5be3e 0%,#745416 99%);color: #fff;}
.bg-red{ background: linear-gradient(135deg,  #f46490 0%,#bb1d4d 99%);color: #fff;}
.bg-o{ background: linear-gradient(135deg,  #ffac37 0%,#fc6901 99%);color: #fff;}
 

.hidden,.thumbimg {overflow:hidden;}
 nav a,.center {text-align:center;}
.inline,.pagenav a{display:inline-block;}
#nav-icon span,.thumbimg {display: block;}
#nav-icon,.down,.visible-md,.visible-lg{display:none}
nav>a, .inline{vertical-align: middle;}
 .relate, .thumbimg {position:relative;}
#nav-icon span,.topnav li>a:after , .mask,.cover  {position:absolute;}
.bg, .bg-cover{background-position:center;background-size:cover;background-repeat: no-repeat;}
a {cursor: pointer;}
.btn, .w-bold, .sec-title,.faq-question{font-weight: bold;} 
.w2  {font-size:1.6rem;line-height: 1.2;}
.w3, .sec-title{font-size:1.3rem;}
.num{font-size:2rem;line-height: 1 ;font-weight: bold;  }
 

.mb-3{margin-bottom:2rem ;}  .mb-2{margin-bottom:1.2rem ;} 
.mb-1{margin-bottom:0.5rem ;} 
.mt-3{margin-top:2rem ;}  .mt-2{margin-top:1.2rem ;}
.py-3{padding:2rem 0;}   .py-2{padding:1.2rem 0;} 
.l1{line-height: 1.1;}  .mt-1{margin-top: -15px;}
.pb-0{padding-bottom: 0!important;}   .pt-0{padding-top: 0;}  
.pb-3{padding-bottom: 2rem;} .pt-3{padding-top: 2rem;}
.pr-2{padding-right: 1.2rem;}
.py-2{padding: 20px 0;} .p-2{padding: 20px ;}
.pt-0{padding-top: 0;}
/*-----------------------S----------------------------------*/  
 
@media screen and (min-width:900px) and (max-width:1200px){ 
.container{width:850px;}    
 }
@media screen and (min-width:700px) and (max-width:899px){  
.container{width:670px;}   
 header{padding-right: 60px;}   
}
 
/*---------------------------------------------------------*/
@media screen and (max-width:1200px){ 
  .col-xl-9{ width:66%;}
  .col-xl-3{ width:33%;}
 .col-xl-6{ width:50%;}
 .col-xl-12{ width:100%;} 
 .pagetitle,.pagetop h2{font-size:2rem;}  
 .banner-title{font-size: 2.4em; }  
 #nav-icon  {display:block;}   
 .topnav li>a{padding: 10px 0;border-bottom: 1px do rgba(255,255,255,0.3); color: #fff;} 
.topnav, .down,.topnav li>a::after,.hidden-lg{display:none} 
.topnav{overflow: auto;}
.topnav{height: 100%;position: fixed;left:0;top:0;right:0;z-index:999; padding-top:60px ; background: rgba( 0,0,0,0.9) ; }
.topnav li {position: relative;}  
 
}
 
@media screen and (max-width:899px){ 
.col-lg-12 { width:100%; padding: 0}	
.col-lg-0{width: 0;}
.col-lg-6 { width:50%; padding: 0}	
.col-lg-9 { width:66.66%; padding: 0}	
.col-lg-3{width:33.33%; padding: 0} 
 .visible-lg{display:block;}     
header{padding: 8px 0;}
.logo{width: 130px;}
 
.banner{ padding:40px 0;}    
.big-txt{font-size:3.5em; text-align: center;}
.dropdown-open{ left:  0px;right:  0px;}
.dropdown-open{ position:relative;top: 0; } 
.down-btn{position: absolute;right: 0; top: 0;width: 45px;height: 45px;z-index: 9 ;background: rgba(255,255,255,0.2);}
.dropdown{ padding-right: 0px; }

.footer-nav {display: block;} 
}
@media screen and (max-width:699px){
.container{width:100%;padding: 0 20px;}	
.main{padding-top:40px;padding-bottom: 40px;  }
 nav a,.col-md-12  {width:100% !important} 
 .col-md-6{width: 50%;}
 .col-md-8{width: 75%;}
 .col-md-3{width: 33.33%;}  
.col-R.col-md-12,.col-L.col-md-12{padding: 0} 
.visible-md{display:block;} 
.hidden-md,.side_nav .a2a_kit{display:none;}  
.title,.banner-title{font-size: 1.8rem;line-height: 1.3;} 
.page-title {font-size: 2.3em; } 
.pagetop{padding: 70px 0 ;  }  
 .mask{padding: 10px;}
 .pb-md-0{padding-bottom: 0;}   
.side_nav{bottom: 0;} 
 .home-img2 ,.home-img3 {max-width: 100%;margin: 0;} 
 .home-img{margin: 0 auto;}    
 .top-btn{-webkit-align-items: center;align-items: center;-webkit-justify-content: center; justify-content: center;}  
 .copyright{ text-align: left }
} 

@media screen and (max-width:479px){
.col-sm-12{width: 100%}	  
.col-sm-12.col-R{padding: 0;}
.col-sm-6{width: 50%;}
.col-sm-3{width:33.33%;}  
 .col-sm-9{width: 66.66%;}      
}