:root {
  --white: #fff;
  --max-width: 1080px;
  --n-space: min(max(12px, 3.5vmin), 30px);
  --n-space-s: min(max(8px, 2vmin), 20px);
  --n-space-xs: min(max(4px, 1vmin), 10px);
  --base: #17003b;
  --primary: #2c1616;
  --secondary: #202a39;
  --secondary-hover: #f7ce8c;
  --tertiary: #93acd3;
  --red: #ed1d49;
  --blue: #2283f6;
  --radius: 12px;
  --h1: calc(32px + (42 - 32) * ((100vw - 360px) / (1920 - 360)))
}

.n-columns-2 {
  grid-template-columns: repeat(2, 1fr);
  display: grid
}

.login,
.register {
  text-align: center;
  font-weight: 700;
  color: #fff;
  padding: 13px 20px
}

.register {
  background: #f1983b
}

.login {
  background: #262626
}

html {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%
}

a,
bb,
body,
center,
div,
em,
h1,
h2,
h3,
h4,
h5,
h6,
header,
html,
iframe,
img,
li,
menu,
nav,
ol,
p,
span,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
ul {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline
}

a,
a:active,
a:focus {
  outline: 0;
  text-decoration: none
}

a {
  color: #f1983b;
  font-weight: bolder;
  -moz-transition: .5s all linear;
  -webkit-transition: .5s all linear;
  transition: .5s all linear
}

a:hover {
  color: #fff;
  -moz-transition: .5s all linear;
  -webkit-transition: .5s all linear;
  transition: .5s all linear
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: .5rem
}

p {
  margin: 0 0 10px
}

p {
  margin-top: 0;
  margin-bottom: 1rem
}

.clear {
  clear: both
}

body {
  background-color: #17003b;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.marquee-text {
  height: auto;
  display: block;
  line-height: 30px;
  overflow: hidden;
  position: relative
}

table.bb {
  width: 100%
}

.marquee-text div {
  height: auto;
  line-height: 22px;
  font-size: 13px;
  white-space: nowrap;
  color: #f7ce8c;
  z-index: 1;
  font-weight: 600;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  animation: marquee 20s linear infinite;
  margin-top: 3px
}

.marquee-text:hover div {
  animation-play-state: paused
}

@keyframes marquee {
  0% {
    transform: translateX(100%)
  }

  100% {
    transform: translateX(-100%)
  }
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 5px;
  font: 250 22px BebasNeue;
  width: 100%;
  color: #fff;
  text-shadow: 0 0 3px #000;
  letter-spacing: 1px
}

.container {
  max-width: 720px
}

table.bb {
  width: 100%
}


@media (min-width:992px) {
  .container {
    max-width: 960px
  }

  table.bb {
    width: 100%
  }
}

@media (min-width:1200px) {
  .container {
    width: 1000px
  }

  table.bb {
    width: 96%
  }
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px
}

.p-0 {
  padding: 0
}

.col-md-12,
.col-md-4,
.col-md-6,
.col-md-8,
.col-xs-6 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px
}

.col-xs-6 {
  float: left;
  width: 50%
}

@media (min-width:768px) {

  .btn-login {
    width: 49%;
  }

  .col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%
  }

  .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%
  }

  .col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%
  }

  .col-md-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    width: 100%
  }

  .order-first {
    -ms-flex-order: -1;
    order: -1
  }

  .logform {
    padding-top: 2rem
  }

  .nopadding {
    padding: 0
  }
}

@media (max-width:768px) {

  .btn-login {
    width: 100%;
  }

  .tengah {
    width: 80%;
    margin: auto;
    padding: 10px 0px;
  }

  .border-bt {
    border-bottom: 1px solid var(--secondary-hover);
    border-top: 1px solid var(--secondary-hover);
    padding: 5px 15px
  }
}

.pt-1,
.py-1 {
  padding-top: .25rem
}

.pb-1,
.py-1 {
  padding-bottom: .25rem
}

.pt-2,
.py-2 {
  padding-top: .5rem
}

.pb-2,
.py-2 {
  padding-bottom: .5rem
}

.mt-2,
.my-2 {
  margin-top: .5rem
}

.mb-2,
.my-2 {
  margin-bottom: .5rem
}

.m1-macau,
.my-3 {
  margin-top: .75rem
}

.mb-3,
.my-3 {
  margin-bottom: .75rem
}

.mt-4 {
  margin-top: 1.1rem
}

.mt-5,
.my-5 {
  margin-top: 2rem
}

.mb-5,
.my-5 {
  margin-bottom: 2rem
}

.pb-5 {
  padding-bottom: 1.25rem
}

.mx-5 {
  margin-left: .75rem;
  margin-right: .75rem
}

.pt-3 {
  padding-top: 1rem
}

.pt-5 {
  padding-top: 2rem
}

.bg-blue {
  background-color: var(--secondary-hover)
}

.bottom {
  float: left;
  width: 100%
}

.konten {
  color: #f7ce8c;
  box-shadow: 0px 0px 10px 2px #f7ce8c;
  border-radius: 5px;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-align: justify;
  ;
  vertical-align: middle;
  border: 1px solid var(--secondary-hover);
  background: var(--primary)
}

h1 {
  padding: var(--n-space-s);
  font-size: calc(34px + (48 - 34) * ((100vw - 360px)/ (1900 - 360)))
}

h2,
h3,
h4,
h5,
h6 {
  padding: var(--n-space);
  border-top: 1px solid var(--secondary-hover)
}

.konten p {
  padding: 0 20px;
  line-height: 1.8
}

.konten h2 {
  font-size: 1.3em
}

.konten h3 {
  font-size: 1.1em
}

.konten p {
  font-size: 1em
}

.konten a {
  color: var(--#f1983b)
}

.list {
  margin-bottom: 1rem
}

.bb {
  text-decoration: none;
  color: #fbd018
}

.bb a {
  color: #2c1616
}

.bb .tg-0lax {
  text-align: left;
  vertical-align: middle;
  width: 35%
}

.bb .tg-baqh {
  text-align: center;
  vertical-align: middle;
  width: 32.5%
}

.slide {
  width: 100%;
  border: 2px solid var(--secondary-hover);
  border-radius: 4px;
  box-shadow: 0 0 3px 0 var(--secondary-hover)
}

.lc-atribut {
  border: 2px solid var(--secondary-hover);
  border-radius: 4px;
  box-shadow: 0 0 5px 0 var(--secondary-hover)
}

ul {
  color: #fff;
  text-align: left
}

.faq-label {
  display: flex;
  font-size: 1.5em;
  justify-content: space-between;
  padding: 1em;
  margin: 12px 0 0;
  background: #0095ff
}

.faq-answer {
  padding: 1em;
  font-size: 1.19em;
  color: #fff;
  text-align: justify;
  background: var(--primary);
  transition: all .35s
}

.qiuonline {
  text-align: center;
  font-size: 1.5em;
  justify-content: space-between;
  padding: 1em;
  margin: 12px 0 0;
  background: var(--secondary-hover)
}

.list {
  margin-bottom: 1rem
}

.d-none {
  display: none
}

a {
  background-color: transparent
}

a:active,
a:hover {
  outline: 0
}

h1 {
  margin: .67em 0;
  font-size: 2em
}

img {
  border: 0
}

.text-center {
  text-align: center
}

p#breadcrumbs {
  padding: var(--n-space-s);
  color: linear-gradient(to bottom, var(--secondary-hover) 0, #ffecb2 100%);
  text-align: center;
  background: var(--secondary)
}

.konten ul li {
  list-style-type: square
}

.konten li {
  margin: 5px 30px 10px;
  text-align: justify;
  color: #f7ce8c
}

.n-columns-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr)
}

.fixed-menu {
  position: fixed;
  display: grid;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: #120707
}

.btn-footer {
  padding: var(--n-space-s);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  color: #f1983b;
  border: var(--radius)
}

.btn-footer:hover {
  background: var(--secondary-hover);
  color: var(--red)
}

.btn-footer svg {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: var(--n-space-xs);
  fill: #f7ce8c
}

.btn-dftr svg {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--n-space-xs);
  fill: #f7ce8c
}

.active {
  background: var(--secondary-hover);
  color: var(--red)
}

.footer {
  padding-bottom: 75px
}

.btn-login {
  background: linear-gradient(to bottom, #ffc83c 5%, #e1701a 100%);
  background-color: #ffc83c;
  border-radius: 6px;
  display: inline-block;
  cursor: pointer;
  color: #000;
  font-family: Arial;
  font-size: 13px;
  font-weight: 700;
  padding: 15px 40px;
  text-decoration: none;
  margin-bottom: 10px;
}

.n-container {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 var(--n-space)
}

.m-b-normal {
  margin-bottom: var(--n-space)
}

.n-columns-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr)
}

.n-columns-m-3 {
  grid-template-columns: repeat(3, 1fr)
}

.n-columns-gap {
  grid-gap: var(--n-space-s)
}

.n-slots {
  border-radius: var(--radius);
  width: 100%;
}