@import 'https://fonts.googleapis.com/css2?family=Manrope:wght@700&display=swap';body {

  padding: 0;

  overflow-x: hidden;

  font-size: 16px;

  background: #fff;

  line-height: 1.5;

  color: #333

}



.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

}



select,textarea,input,a:hover,a:focus,button {

  outline: none

}



.img_fit {

  max-width: 100%;

  display: block

}



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-align-items: center;

  align-items: 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-80 {

  width: 80%

}



.col-12 {

  width: 100%

}



.col-10 {

  width: 90%

}



.col-R {

  padding-left: 20px

}



.col-L {

  padding-right: 20px

}



a,.mask,li:hover,.btn,nav li>a:after,.thumbimg img,.block {

  transition: all .3s ease;

  -moz-transition: all .3s ease;

  -webkit-transition: all .3s ease;

  -o-transition: all .3s ease

}



.thumbimg:hover img.col-12,.btn:hover {

  -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: 0 0

}



.center-img {

  margin: 0 auto

}







.logo {

  display: inline-block;

  margin-right: auto;

  padding: 5px 0;

  color: #ffdf67

}



.logo img {

  width: 180px;

  display: inline-block;

  vertical-align: middle

}



.topnav>li {

  position: relative

}



.topnav>li>a {

  padding: 15px;

  display: block;

  color: var(--white)

}



.topnav li>a:hover {

  color: var(--secondary-color)

}



.topnav,.topnav li>a {

  height: 100%

}



.topnav li.active>a,.topnav li.active>a:hover {

  color: var(--secondary-color)

}



#nav-icon {

  z-index: 1000;

  position: absolute;

  right: 10px;

  top: 5px;

  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 {

  height: 2px;

  width: 80%;

  border-radius: 9px;

  opacity: 1;

  left: 10%;

  -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)

}



.down {

  left: -20px;

  right: -20px;

  z-index: 3;

  position: absolute;

  background: rgba(0,0,0,.7)

}



.down a {

  padding: 10px 5px;

  display: block

}



.down a:hover,.down a.active {

  background: rgba(0,0,0,.2)

}



.down-icon {

  position: absolute;

  right: 8px;

  top: 15px

}



.topnav>li.secnav>a {

  padding-right: 30px

}



.sns {

  margin-top: 20px

}



.sns a:hover {

  opacity: .6

}



.side_nav {

  position: fixed;

  right: 0;

  bottom: 45%;

  z-index: 9

}



.side_nav .a2a_kit a {

  display: block;

  float: none;

  margin-bottom: 5px

}



.scroll_fix .down {

  position: relative;

  left: 0;

  right: 0

}



.all-height {

  height: 100%

}



.btn {

  padding: 10px 25px;

  text-align: center;

  margin: 2px auto;

  display: inline-block;

  background: var(--primary-color);

  border-radius: 10px;

  color: #fff

}



.btn-sec {

  background: rgba(0,0,0,.7);

  border: 2px solid #fff;

  color: #fff

}



.banner {

  color: #fff;

  background-image: url(../images/banner-bg.jpg);

  background-repeat: no-repeat;

  background-position: center;

  position: relative;

  background-size: cover;

  overflow: hidden;

  padding: 40px 0

}



.banner-title {

  font-size: 3rem;

  display: inline-block;

  line-height: 1.2;

  color: var(--primary-color)

}



.banner-block .btn {

  min-width: 30%;

  box-shadow: 5px 0 15px rgba(0,0,0,.4)

}



.banner-img {

  max-width: 120%;

  margin-right: -20%

}



.box {

  background: #19587b;

  border-radius: 20px

}



.banner-title {

  color: var(--secondary-color)

}



footer {

  padding: 30px;

  color: #999;

  background-color: #1b1b1b

}



footer a {

  color: var(--white)

}



.content {

  padding: 1.5em

}



.game-content {

  padding: 0 1.5em 1.5em;

  margin-top: -60px

}



.game-img {

  margin-top: -40px

}



.casino-img {

  margin: -30px 0;

  margin-left: -20%;

  max-width: 110%

}



.sabong-img {

  margin: -50px 0

}



.home-bg {

  background: url(../images/home-bg.jpg) no-repeat center #090f15

}



.home-bg2 {

  background: url(../images/home-bg2.jpg) no-repeat center

}



.home-bg3 {

  background: url(../images/home-bg3.jpg) no-repeat center

}



.game-list img {

  margin: 0 auto

}



.home-game {

  position: relative

}



.game-img {

  position: absolute;

  bottom: 0;

  max-width: 45%

}



.home-img {

  max-width: 110%;

  margin-right: -10%;

  margin-top: -50px

}



.home-img3 {

  max-width: 120%;

  margin-left: -20%

}



.sport-img {

  margin-top: -50px

}



.list-content {

  box-shadow: 0 10px 20px rgba(0,0,0,.2);

  padding: 10px;

  border-radius: 10px

}



.list-content:hover {

  background-color: #19587b;

  color: #fff

}



.pagetop {

  background-image: url(../images/banner-bg.jpg);

  background-position: center;

  background-size: cover;

  color: #fff

}



.pagetop-ft {

  padding: 80px 0

}



.page-title {

  font-size: 3em;

  font-weight: 400;

  display: inline-block

}



.banner-title {

  font-size: 3em;

  font-weight: 400

}



.slot-bg {

  background-image: url(../images/slot-bg.jpg)

}



.sign-bg {

  background-image: url(../images/signup-bg.jpg)

}



.sport-bg {

  background-image: url(../images/sport-bg.jpg)

}



.fish-bg {

  background-image: url(../images/fish-bg.jpg)

}



.promo-bg {

  background-image: url(../images/promotion-bg.jpg)

}



.casino-bg {

  background-image: url(../images/casino-bg.jpg)

}



.sabong-bg {

  background-image: url(../images/sabong-bg.jpg)

}



.down-bg {

  background-image: url(../images/down-bg.jpg)

}



.promo-bg {

  background-image: url(../images/promo-bg.jpg)

}



.agent-bg {

  background-image: url(../images/agent-bg.jpg)

}



.movie-bg {

  background-image: url(../images/movie-bg.jpg)

}



.ytplayer {

  width: 100%;

  height: 50vh

}



.main {

  padding-top: 40px;

  padding-bottom: 40px

}



.mask {

  left: 0;

  right: 0;

  bottom: 0;

  position: absolute;

  color: var(--white);

  padding: 10px 15px;

  background: -moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%);

  background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%);

  background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#a6000000',GradientType=0 )

}



.title {

  line-height: 1.2;

  font-size: var(--h2);

  color: #fff;

}



.title span {

  color: var(--primary-color)

}



.title-w span {

  color: var(--secondary-color)

}



.table-main {

  margin: 15px 0;

  border-left: 1px solid rgba(255,255,255,.6);

  background-color: #eee;

  border-bottom: 1px solid rgba(255,255,255,.6)

}



.table-main th,.table-main td {

  padding: 8px;

  border-right: 1px solid rgba(255,255,255,.6)

}



.table-main th {

  background-color: #144560;

  color: #fff

}



.tt {

  border-left: 5px solid #efc76b;

  padding-left: 10px

}



.list {

  padding-left: 30px

}



.list li {

  list-style: outside decimal;

  margin-bottom: 10px

}



.accordion-area {

  list-style: none;

  margin: 0 auto

}



.accordion-area>li {

  margin-top: 15px;

  overflow: hidden;

  background-color: #313131

}



.accordion-area>li .open {

  background-color: #f1d101

}



.accordion-title {

  position: relative;

  cursor: pointer;

  font-weight: 400;

  color: #fff;

  transition: all .5s ease;

  padding: 10px;

  padding-right: 40px

}



.accordion-area>li .open {

  color: #000

}



.accordion-box {

  display: none;

  padding: 15px;

  background-color: #373c4b

}



.accordion-box img {

  margin: 10px auto

}



.qa-q {

  position: relative;

  background-color: var(--primary-color);

  display: inline-block;

  color: #19587b;

  margin-right: 25px

}



.accordion-title span {

  padding: 10px

}



.more {

  padding: 5px 30px;

  display: inline-block;

  margin-top: 10px;

  background-color: var(--primary-color);

  color: #000

}



.accordion-title::before {

  position: absolute;

  content: '';

  width: 30px;

  height: 30px;

  top: 10px;

  right: 10px;

  background: url(../images/er.png) no-repeat center

}



.accordion-title.close::before {

  transform: rotateZ(-180deg)

}



.more {

  border: 1px solid #fff;

  color: #fff;

  padding: 5px 30px;

  display: inline-block;

  margin-top: 10px

}



.border {

  border-radius: 10px

}



.p {

  margin: 15px 0

}



.spot>li,.w6 {

  background: url(../images/spot.png) no-repeat left 5px;

  padding-left: 25px;

  margin: 5px 0

}



.spot-w li {

  background: url(../images/spot-w.png) no-repeat left 5px

}



.spot {

  margin: 10px 0

}



:root {

  --primary-color: #e45c68;

  --secondary-color: #ffe400;

  --white: #fff;

  --h2: 2rem

}



.h2 {

  font-size: var(--h2)

}



.bg-w {

  background-color: #fff

}



#nav-icon span {

  background-color: #fff

}



.w-main {

  color: var(--primary-color)

}



.w1 {

  color: var(--secondary-color)

}



.w-white {

  color: var(--white)

}



.bg {

  background: url(../images/bg.jpg) no-repeat center #000;

  background-attachment: fixed

}



.bg-b {

  background-color: #1b1b1b

}



.w-b {

  color: #000

}



.title,.banner-title,.tt,.page-title {

  font-family: manrope,sans-serif

}



.bg-dark {

  background-color: #144560

}



.bg-grey {

  background-color: #eee

}



.bg-main {

  background: #ffd164;

  background: -moz-linear-gradient(top,#ffd164 0%,#ff9f00 100%);

  background: -webkit-linear-gradient(top,#ffd164 0%,#ff9f00 100%);

  background: linear-gradient(to bottom,#ffd164 0%,#ff9f00 100%);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd164',endColorstr='#ff9f00',GradientType=0 )

}



.bg-purple {

  background-color: #8957a1

}



.bg-blue {

  background-color: #0068b7

}



.btn-down {

  background: #313131;

  border: 1px solid #ffd164;

  color: #fff

}



.hidden,.thumbimg {

  overflow: hidden

}



footer,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 {

  font-weight: 700

}



.w2,.tt {

  font-size: 1.8rem;

  line-height: 1.2

}



.w3 {

  font-size: 1.2rem

}



.num {

  font-size: 3.5rem;

  line-height: 1;

  display: inline-block;

  color: var(--primary-color);

  font-weight: 700

}



.mb-3 {

  margin-bottom: 2rem

}



.mb-2 {

  margin-bottom: 1.2rem

}



.mt-3 {

  margin-top: 2rem

}



.mt-2 {

  margin-top: 1.2rem

}



.py-3 {

  padding: 2rem 0

}



.l1 {

  line-height: 1.1

}



.pb-0 {

  padding-bottom: 0

}



.pt-0 {

  padding-top: 0

}



.pb-3 {

  padding-bottom: 2rem

}



.pt-3 {

  padding-top: 2rem

}



.pb-2 {

  padding-bottom: 1rem

}



.pr-2 {

  padding-right: 1.2rem

}



.py-2 {

  padding: 20px 0

}



.p-2 {

  padding: 20px

}



.pt-0 {

  padding-top: 0

}



@media screen and (min-width: 900px) and (max-width:1200px) {

  .container {

      width:850px

  }



  .banner-img {

      margin-right: -20%

  }

}



@media screen and (min-width: 700px) and (max-width:899px) {

  .container {

      width:670px

  }

}



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

  .col-xl-9 {

      width:66%

  }



  .col-xl-6 {

      width: 50%

  }



  .col-xl-12 {

      width: 100%

  }



  .pagetitle,.pagetop h2 {

      font-size: 2rem

  }

}



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

  .col-lg-12 {

      width:100%;

      padding: 0

  }



  .col-lg-6 {

      width: 50%;

      padding: 0

  }



  .col-lg-9 {

      width: 66.66%;

      padding: 0

  }



  .col-lg-3 {

      width: 33.33%;

      padding: 0

  }



  #nav-icon,.visible-lg {

      display: block

  }



  .topnav li>a {

      padding: 10px 0;

      border-bottom: 1px dashed rgba(0,0,0,.2)

  }



  .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: 50px;

      background: rgba(24,35,49,.9)

  }



  .topnav li {

      position: relative

  }



  .topnav>li {

      border-top: 1px dashed #2b3849

  }



  .banner-title {

      font-size: 2.2em;

      line-height: 1

  }



  .content {

      padding: 15px

  }

}



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

  .container {

      width:100%;

      padding: 0 20px

  }



  .main {

      padding-top: 20px;

      padding-bottom: 20px

  }



  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.5rem;

      line-height: 1.3

  }



  .logo img {

      max-width: 150px;

      display: block

  }



  .mask {

      padding: 10px

  }



  .pb-md-0 {

      padding-bottom: 0

  }



  .side_nav {

      bottom: 0

  }



  .slot-img,.game-img {

      margin-top: 0

  }



  .banner-img,.home-img3,.casino-img,.sport-img {

      max-width: 100%;

      margin: 0

  }



  .home-img {

      margin: 0 auto

  }



  .banner,.pagetop {

      padding-top: 50px

  }



  .pagetop {

      text-align: center

  }



  .md-left {

      text-align: left

  }



  .btn-row img {

      display: block;

      margin: 0 auto

  }

}



@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-9 {

      width: 66.66%

  }



  .btn-row img {

      width: 30px

  }

}