:root {
  --color-bingo: #000;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

.btn.btn-2 {
  background: var(--colorpr-gradient-1);
  border    : none;
  color     : #fff;
}

.btn.btn-2:hover {
  color    : #fff !important;
  transform: scale(0.9);
}

.btn.btn-2::after,
.btn.btn-2::before {
  display: none;
}

.segTitle {
  font-weight: bold;
  line-height: normal;
}

.backToTop {
  background: var(--colorpr-cta);
  color     : var(--colorpr-text-cta);
}

.cta {
  background: var(--colorpr-cta);
}

.cta .showhidecta {
  background: var(--colorpr-cta);
  color     : var(--colorpr-text-cta);
}

.cta .--item {
  color: var(--colorpr-text-cta);
}

.btnpr.btn-1 {
  background    : var(--colorpr-gradient-1);
  height        : 54px;
  display       : flex;
  align-items   : center;
  font-weight   : 600;
  text-transform: uppercase;
  transition    : all 0.3s ease;
  border-radius : 60px;
  padding       : 0 32px;
  width         : -moz-max-content;
  width         : max-content;
  color         : #000;
  border        : none;
  font-size     : 18px;
  font-weight   : bold;
}

.btnpr:hover {
  transform: scale(0.9);
}

@media (min-width: 769px) and (max-width: 1279px) {
  .btnpr.btn-1 {
    height   : 40px;
    font-size: 14px;
    padding  : 0 24px;
  }
}

@media (max-width: 769px) {
  .btnpr.btn-1 {
    padding  : 0px 24px;
    height   : 44px;
    font-size: 16px;
  }
}

header.pc .headerBot .--menu .--itemMenu:hover .--nameMenu {
  color                  : var(--colorpr-2);
  background             : var(--colorpr-gradient-2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

header.pc .headerBot .--menu .--itemMenu:hover.--sub::after {
  color                  : var(--colorpr-2);
  background             : var(--colorpr-gradient-2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

header.pc .popoverProd .--listCar .--item:hover .--name {
  color                  : unset;
  background             : var(--colorpr-gradient-2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 769px) {
  header.mb {
    border-bottom: none;
  }

  header.mb .--tabbar {
    background: var(--colorpr-gradient-1);
  }
}

.bingoBanner {
  position: relative;
}

.bingoBanner .--img {
  width: 100%;
}

.bingoBanner .--img.mobi {
  display: none;
}

.bingoBanner img {
  width: 100%;
}

.bingoBanner .--icon {
  position  : absolute;
  bottom    : 20%;
  display   : inline-block;
  width     : 50px;
  height    : 50px;
  text-align: center;
  color     : #000;
  font-size : 24px;
  right     : 20%;
  cursor    : pointer;
}

.bingoBanner .--icon svg {
  animation: bounce 1s infinite;
}

@media (max-width: 769px) {
  .bingoBanner .--img.pc {
    display: none;
  }

  .bingoBanner .--img.mobi {
    display: block;
  }

  .bingoBanner .--icon {
    left     : 50%;
    transform: translate(-50%, 0);
    bottom   : 32px;
  }
}

.bingoIntro {
  padding   : 100px 0;
  position  : relative;
  background: #000;
}

.bingoIntro svg {
  position : absolute;
  top      : -1px;
  left     : 0;
  width    : 100%;
  height   : auto;
  transform: translate(0, -50%);
}

.bingoIntro svg path,
.bingoIntro svg rect {
  fill: var(--colorpr-2);
}

.bingoIntro .segTitle {
  line-height: normal;
  max-width  : 70%;
  position   : relative;
  z-index    : 1;
  color      : #fff;
}

.bingoIntro article {
  max-width : 70%;
  margin-top: 24px;
  color     : #fff;
  position  : relative;
  z-index   : 1;
}

.bingoIntro .--info {
  display   : flex;
  grid-gap  : 40px;
  margin-top: 24px;
  position  : relative;
  z-index   : 1;
}

.bingoIntro .--listColor {
  width    : 240px;
  flex     : 0 0 auto;
  display  : flex;
  flex-flow: column;
  gap      : 4px;
}

.bingoIntro .--listColor .--item {
  background : #fff;
  cursor     : pointer;
  display    : flex;
  align-items: center;
  max-width  : 40px;
  transition : max-width 0.75s ease;
}

.bingoIntro .--listColor .--item.active {
  border-left: 3px solid #fff;
  gap        : 12px;
  width      : 100%;
  max-width  : 100%;
  margin-left: -20px;
}

.bingoIntro .--listColor .--item.active .--codeColor {
  max-width: calc(100% - 52px);
  width    : 100%;
}

.bingoIntro .--listColor .--item.active .--color {
  border: 2px solid #fff;
  flex  : 0 0 auto;
}

.bingoIntro .--listColor .--codeColor {
  position  : relative;
  max-width : 0;
  transition: all 0.75s ease-in-out;
  overflow  : hidden;
  height    : 100%;
}

.bingoIntro .--listColor .--codeColor span {
  position   : absolute;
  top        : 50%;
  font-size  : 20px;
  width      : -moz-max-content;
  width      : max-content;
  font-weight: 600;
  left       : 50%;
  transform  : translate(-50%, -50%);
}

.bingoIntro .--listColor .--color {
  width : 40px;
  border: 2px solid #fff;
  height: 40px;
}

.bingoIntro .--title {
  position      : absolute;
  font-size     : 450px;
  text-transform: uppercase;
  bottom        : 12%;
  left          : 56%;
  color         : #fff;
  line-height   : 1;
  transform     : translate(-50%, 0);
  font-family   : var(--font-bingo);
}

.bingoIntro .--listCar {
  flex-grow : 1;
  min-height: 450px;
  position  : relative;
}

.bingoIntro .--listCar .--item {
  position  : absolute;
  top       : 22%;
  left      : 0%;
  width     : 85%;
  opacity   : 0;
  transition: opacity 0.3s linear;
  height    : 100%;
}

.bingoIntro .--listCar .--item.active {
  opacity: 1;
}

.bingoIntro .--listCar .--item img {
  -o-object-fit: cover;
  object-fit   : cover;
  width        : 100%;
  height       : auto;
}

@media (max-width: 1279px) {
  .bingoIntro {
    padding: 80px 0;
  }

  .bingoIntro .--title {
    font-size: 220px;
  }
}

@media (max-width: 769px) {
  .bingoIntro {
    padding            : 60px 0 100px;
    background-position: 100% 45%;
    background-size    : auto;
  }

  .bingoIntro svg {
    top: -1px;
  }

  .bingoIntro .--title {
    font-size: 130px;
    bottom   : 6%;
    left     : 50%;
    transform: translate(-50%, -50%);
  }

  .bingoIntro .segTitle {
    max-width: 100%;
  }

  .bingoIntro .segTitle br {
    display: none;
  }

  .bingoIntro .--info {
    flex-flow: column;
    grid-gap : 16px;
  }

  .bingoIntro .--listColor {
    flex-flow      : row;
    width          : auto;
    height         : -moz-max-content;
    height         : max-content;
    justify-content: start;
    position       : relative;
  }

  .bingoIntro .--listColor .--item.active {
    width      : -moz-max-content;
    width      : max-content;
    margin-left: 0;
    border-left: none;
  }

  .bingoIntro .--listColor .--item.active .--codeColor {
    width: -moz-max-content;
    width: max-content;
  }

  .bingoIntro .--listColor .--item .--codeColor {
    position  : absolute;
    left      : 0;
    top       : calc(100% + 8px);
    width     : -moz-max-content;
    width     : max-content;
    transition: none;
  }

  .bingoIntro .--listColor .--item .--codeColor span {
    position : relative;
    top      : unset;
    left     : unset;
    transform: none;
    color    : #fff;
    width    : -moz-max-content;
    width    : max-content;
  }

  .bingoIntro .--listCar {
    height    : 170px;
    min-height: unset;
  }

  .bingoIntro .--listCar .--item {
    bottom   : calc(-50% - 95px);
    left     : 50%;
    width    : 90%;
    top      : unset;
    transform: translate(-50%, -50%);
  }

  .bingoIntro .--listCar .--item img {
    height: 100%;
  }

  .bingoIntro article {
    max-width: 100%;
  }
}

.bingoExterior {
  background: #222222;
  padding   : 100px 0;
  color     : #fff;
}

.bingoExterior .nav-tabs {
  justify-content: space-evenly;
  border-bottom  : none;
  margin-top     : 24px;
}

.bingoExterior .nav-link {
  border        : none;
  padding       : 0;
  color         : white;
  border-radius : 0;
  font-size     : 20px;
  font-weight   : bold;
  padding-bottom: 8px;
}

.bingoExterior .nav-link.active {
  border-bottom          : 2px solid var(--colorpr-2);
  background             : var(--colorpr-gradient-2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bingoExterior .--listExterior {
  width : 80%;
  margin: 0 auto;
}

.bingoExterior .--listExterior .--item {
  background   : #fff;
  overflow     : hidden;
  border-radius: 16px;
}

.bingoExterior .--listExterior .--item .--img {
  width      : 100%;
  margin     : auto;
  height     : 100%;
  display    : flex;
  align-items: center;
}

.bingoExterior .--listExterior .--item img {
  width        : 100%;
  -o-object-fit: cover;
  object-fit   : cover;
  height       : 100%;
}

.bingoExterior .--listExterior .slick-dots {
  display        : flex;
  gap            : 4px;
  justify-content: center;
  bottom         : 30px;
}

.bingoExterior .--listExterior .slick-dots li {
  border-radius: 50%;
  background   : #bab7b7;
  width        : 20px;
  transition   : all 0.3s ease;
  height       : 20px;
}

.bingoExterior .--listExterior .slick-dots li.slick-active {
  background: var(--colorpr-gradient-2);
}

.bingoExterior .--listExterior .slick-slide {
  position  : absolute;
  top       : 0;
  left      : 0;
  right     : 0;
  bottom    : 0;
  margin    : auto;
  opacity   : 0;
  z-index   : 1;
  width     : 100% !important;
  transform : translate3d(0, 0, 0);
  transition: opacity 1s, transform 1s;
}

.bingoExterior .--listExterior .slick-current {
  opacity  : 1;
  position : relative;
  display  : block;
  transform: translate3d(-50%, 0, 20px) !important;
  z-index  : 3;
  width    : 90% !important;
  left     : 50%;
  right    : 50%;
}

.bingoExterior .--listExterior .slick-track {
  max-width  : 100% !important;
  transform  : translate3d(0, 0, 0) !important;
  perspective: 100px;
  height     : 450px;
}

.bingoExterior .--listExterior .slick-list {
  padding-top   : 8% !important;
  padding-bottom: 8% !important;
  padding-left  : 15% !important;
  padding-right : 15% !important;
}

.bingoExterior .--listExterior .prevSlide {
  opacity  : 1;
  z-index  : 2;
  transform: translate3d(-20%, 0, 0);
}

.bingoExterior .--listExterior .nextSlide {
  opacity  : 1;
  z-index  : 2;
  transform: translate3d(20%, 0, 0);
}

.bingoExterior .--listContent {
  width     : 60%;
  margin    : 32px auto 0;
  text-align: center;
}

.bingoExterior .--listContent .--name {
  background             : var(--colorpr-gradient-2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size              : 40px;
  font-weight            : bold;
  width                  : -moz-max-content;
  width                  : max-content;
  margin                 : 0 auto;
}

.bingoExterior .slider {
  position: relative;
}

.bingoExterior .slider .--arrow {
  position       : absolute;
  top            : 50%;
  transform      : translate(0, -50%);
  background     : #fff;
  box-shadow     : 0px 4px 20px 0px rgba(0, 0, 0, 0.2);
  width          : 62px;
  height         : 62px;
  color          : var(--colorpr-2);
  display        : flex;
  align-items    : center;
  justify-content: center;
  border-radius  : 50%;
  cursor         : pointer;
  pointer-events : auto;
  font-size      : 18px;
  transition     : all 0.3s ease;
}

.bingoExterior .slider .--arrow.slick-prev {
  left: 0;
}

.bingoExterior .slider .--arrow.slick-next {
  right: 0;
}

.bingoExterior .slider .--arrow:hover {
  transform : translate(0, -50%) scale(0.9);
  background: var(--colorpr-2);
  color     : #fff;
}

@media (min-width: 769px) and (max-width: 1279px) {
  .bingoExterior {
    padding: 80px 0;
  }

  .bingoExterior .--listExterior .slick-track {
    height: 320px;
  }

  .bingoExterior .--listContent .--name {
    font-size: 28px;
  }
}

@media (max-width: 769px) {
  .bingoExterior {
    padding: 60px 0;
  }

  .bingoExterior .nav-tabs {
    gap: 16px;
  }

  .bingoExterior .segTitle {
    text-align: center;
  }

  .bingoExterior .nav-link {
    font-size: 16px;
  }

  .bingoExterior .--listExterior {
    width: 100%;
  }

  .bingoExterior .--listExterior .slick-track {
    height: 180px;
  }

  .bingoExterior .--listExterior .slick-dots {
    margin-top: 16px;
  }

  .bingoExterior .--listExterior .slick-list {
    padding-left : 10% !important;
    padding-right: 10% !important;
  }

  .bingoExterior .--listExterior .nextSlide {
    transform: translate3d(10%, 0, 0);
  }

  .bingoExterior .--listExterior .prevSlide {
    transform: translate3d(-10%, 0, 0);
  }

  .bingoExterior .--listExterior .slick-current {
    width: 80% !important;
  }

  .bingoExterior .--listContent {
    width : 100%;
    margin: 24px auto 0;
  }

  .bingoExterior .--listContent .--name {
    font-size: 24px;
  }

  .bingoExterior .--listContent article {
    font-size: 14px;
  }

  .bingoExterior .slider {
    margin-top: 24px;
  }

  .bingoExterior .slider .--arrow {
    width    : 32px;
    height   : 32px;
    font-size: 16px;
  }

  .bingoExterior .slider .--arrow.slick-prev {
    left: -12px;
  }

  .bingoExterior .slider .--arrow.slick-next {
    right: -12px;
  }
}

.bingoInterior {
  padding : 100px 0;
  position: relative;
}

.bingoInterior svg {
  position: absolute;
  top     : -4px;
  left    : 0;
  width   : 100%;
  height  : auto;
}

.bingoInterior svg path {
  fill: var(--colorpr-2);
}

.bingoInterior .--content {
  margin-top: 40px;
  position  : relative;
}

.bingoInterior .--listMarker .--item {
  position       : absolute;
  width          : 32px;
  height         : 32px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  border-radius  : 50%;
  background     : var(--colorpr-gradient-1);
  cursor         : pointer;
  transition     : all 0.3s ease;
}

.bingoInterior .--listMarker .--item.active {
  background: var(--colorpr-gradient-2);
}

.bingoInterior .--listMarker .--item i {
  transition : all 0.3s ease-in-out;
  font-size  : 18px;
  line-height: normal;
}

.bingoInterior .--listMarker .--item:hover i {
  transform: rotate(90deg);
}

.bingoInterior .--listPopup {
  position      : absolute;
  top           : 0;
  left          : 0;
  pointer-events: none;
  width         : 100%;
  height        : 100%;
}

.bingoInterior .--listPopup .--item {
  position      : absolute;
  opacity       : 0;
  top           : 50%;
  left          : 40px;
  transform     : translate(0, -50%);
  max-height    : 90%;
  overflow      : hidden;
  pointer-events: none;
  text-align    : center;
  width         : 580px;
  padding       : 32px 60px;
  display       : flex;
  color         : #fff;
  flex-flow     : column;
  gap           : 24px;
  border-radius : 20px;
  overflow      : hidden;
}

.bingoInterior .--listPopup .--item::after {
  content                : "";
  display                : block;
  top                    : 0;
  left                   : 0;
  width                  : 100%;
  height                 : 100%;
  position               : absolute;
  background             : rgba(10, 10, 10, 0.7);
  -webkit-backdrop-filter: blur(47px);
  backdrop-filter        : blur(47px);
  z-index                : -1;
}

.bingoInterior .--listPopup .--item .--name {
  font-size              : 24px;
  font-weight            : 600;
  width                  : -moz-max-content;
  width                  : max-content;
  margin                 : 0 auto;
  background             : var(--colorpr-gradient-2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bingoInterior .--listPopup .--item .--close {
  position       : absolute;
  top            : 0;
  right          : 0;
  width          : 40px;
  height         : 40px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : rgba(0, 0, 0, 0.1215686275);
  font-size      : 24px;
  cursor         : pointer;
}

.bingoInterior .--listPopup .--item .--close i {
  transition: all 0.3s ease-in-out;
}

.bingoInterior .--listPopup .--item .--close:hover i {
  transform: rotate(90deg);
}

.bingoInterior .--listPopup .--item article {
  font-size: 14px;
}

.bingoInterior .--listPopup .--item img {
  width        : 100%;
  border-radius: 16px;
}

.bingoInterior .--listPopup .--item.active {
  opacity       : 1;
  z-index       : 1;
  pointer-events: auto;
}

.bingoInterior .--img {
  width        : 100%;
  border-radius: 24px;
  overflow     : hidden;
}

.bingoInterior .--img img {
  width: 100%;
}

@media (max-width: 769px) {
  .bingoInterior {
    padding : 60px 0;
    position: relative;
    z-index : 9;
  }

  .bingoInterior svg {
    top: -1px;
  }

  .bingoInterior .segTitle {
    text-align: center;
  }

  .bingoInterior .--content {
    margin-top: 24px;
  }

  .bingoInterior .--listPopup .--item {
    position : fixed;
    top      : 50%;
    left     : 50%;
    transform: translate(-50%, -50%);
    width    : calc(100vw - 30px);
    padding  : 24px 15px;
  }

  .bingoInterior .--listPopup .--item::after {
    opacity: 1;
  }
}

.bingoEngine {
  padding : 100px 0;
  position: relative;
}

.bingoEngine svg {
  position : absolute;
  top      : -4px;
  left     : 0;
  width    : 100%;
  height   : auto;
  z-index  : 1;
  transform: translate(0, -50%);
}

.bingoEngine svg path,
.bingoEngine svg rect {
  fill: var(--colorpr-2);
}

.bingoEngine .--bg {
  position: absolute;
  left    : 0;
  width   : 100%;
  bottom  : 0;
  height  : 100%;
  z-index : -1;
}

.bingoEngine .--bg img {
  width        : 100%;
  height       : 100%;
  -o-object-fit: cover;
  object-fit   : cover;
}

.bingoEngine .--bg::after {
  content   : "";
  position  : absolute;
  top       : 0;
  left      : 0;
  width     : 100%;
  height    : 100%;
  background: linear-gradient(63deg, #1a2130 33.29%, rgba(26, 33, 48, 0) 100%);
}

.bingoEngine .segTitle {
  text-align: center;
  color     : #fff;
}

.bingoEngine .--engine {
  display              : grid;
  grid-template-columns: repeat(2, 1fr);
  gap                  : 24px;
  width                : 80%;
  margin               : 40px auto 0;
}

.bingoEngine .--engine .--item {
  background   : var(--colorpr-gradient-1);
  color        : #fff;
  padding      : 24px;
  border-radius: 20px;
  display      : flex;
  flex-flow    : column;
}

.bingoEngine .--engine .--item img {
  border-radius: 16px;
  width        : 100%;
  margin-top   : 20px;
  aspect-ratio : 3/2;
  -o-object-fit: cover;
  object-fit   : cover;
}

.bingoEngine .--engine .--name {
  font-size  : 24px;
  text-align : center;
  font-weight: 600;
}

.bingoEngine .--engine article {
  margin-top: 20px;
  text-align: justify;
  margin    : auto 0 0 0;
}

.bingoEngine .--listEngine {
  margin-top: 60px;
}

.bingoEngine .--listEngine .slick-list {
  overflow: visible;
}

.bingoEngine .--listEngine .--item {
  width   : 60vw;
  position: relative;
  margin  : 0 12px;
}

.bingoEngine .--listEngine .--item.slick-current article {
  opacity: 1;
}

.bingoEngine .--listEngine .--item article {
  position  : absolute;
  bottom    : 0;
  left      : 0;
  transition: all 0.5s ease;
  color     : #fff;
  opacity   : 0;
  z-index   : 1;
  width     : 100%;
  padding   : 0 60px 16px;
}

.bingoEngine .--listEngine .--item article::after {
  content   : "";
  position  : absolute;
  bottom    : 0;
  left      : 0;
  width     : 100%;
  height    : calc(100% + 40px);
  z-index   : -1;
  background: linear-gradient(0deg, rgba(52, 46, 46, 0.63), rgba(255, 255, 255, 0));
}

.bingoEngine .--listEngine .--item .--img {
  width: 100%;
}

.bingoEngine .--listEngine .--item .--img img {
  width: 100%;
}

.bingoEngine .slider {
  position: relative;
}

.bingoEngine .slider .--arrow {
  position       : absolute;
  top            : 50%;
  transform      : translate(0, -50%);
  background     : #fff;
  box-shadow     : 0px 4px 20px 0px rgba(0, 0, 0, 0.2);
  width          : 62px;
  height         : 62px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  border-radius  : 50%;
  cursor         : pointer;
  pointer-events : auto;
  font-size      : 18px;
  transition     : all 0.3s ease;
}

.bingoEngine .slider .--arrow i {
  color: #000;
}

.bingoEngine .slider .--arrow.slick-prev {
  left: 0;
}

.bingoEngine .slider .--arrow.slick-next {
  right: 0;
}

.bingoEngine .slider .--arrow:hover {
  transform : translate(0, -50%) scale(0.9);
  background: var(--colorpr-gradient-1);
}

.bingoEngine .slick-dots {
  display        : flex;
  gap            : 4px;
  justify-content: center;
  bottom         : 30px;
  margin-top     : 24px;
}

.bingoEngine .slick-dots li {
  border-radius: 50%;
  background   : #bab7b7;
  width        : 20px;
  transition   : all 0.3s ease;
  height       : 20px;
}

.bingoEngine .slick-dots li.slick-active {
  background: var(--colorpr-gradient-2);
}

@media (min-width: 769px) and (max-width: 1279px) {
  .bingoEngine {
    padding: 80px 0;
  }
}

@media (max-width: 769px) {
  .bingoEngine {
    padding: 60px 0;
  }

  .bingoEngine svg {
    top: -1px;
  }

  .bingoEngine .--engine {
    grid-template-columns: repeat(2, 1fr);
    margin-top           : 24px;
    gap                  : 12px;
    width                : 100%;
  }

  .bingoEngine .--engine .--item {
    padding: 8px;
  }

  .bingoEngine .--engine .--item img {
    margin: 12px 0;
    height: 180px;
  }

  .bingoEngine .--engine .--name {
    font-size: 14px;
  }

  .bingoEngine .--listEngine .--item {
    width: 300px;
  }

  .bingoEngine .--listEngine .--item article {
    padding : 16px;
    position: relative;
    bottom  : unset;
    left    : 0;
    color   : #000;
  }

  .bingoEngine .--listEngine .--item article::after {
    display: none;
  }

  .bingoEngine .slider .--arrow {
    width : 40px;
    height: 40px;
  }

  .bingoEngine .slider .--arrow.slick-prev {
    left: -14px;
  }

  .bingoEngine .slider .--arrow.slick-next {
    right: -14px;
  }
}

.bingoVersion {
  padding: 100px 0;
}

.bingoVersion .--content {
  gap       : 60px;
  display   : flex;
  margin-top: 40px;
}

.bingoVersion .segTitle {
  position      : relative;
  z-index       : 1;
  pointer-events: none;
}

.bingoVersion .nav-pills {
  width: 240px;
  flex : 0 0 auto;
}

.bingoVersion .nav-pills button {
  background    : transparent;
  border        : none;
  box-shadow    : none;
  color         : #000;
  border-radius : 0;
  font-size     : 20px;
  padding       : 16px;
  text-transform: uppercase;
  font-weight   : 600;
  transition    : unset;
  border-radius : 4px;
  position      : relative;
  border        : 1px solid transparent;
}

.bingoVersion .nav-pills button::after,
.bingoVersion .nav-pills button::before {
  content       : "";
  position      : absolute;
  left          : 50%;
  transform     : translate(-50%, 0);
  width         : calc(100% - 30px);
  border-bottom : 6px solid #fff;
  pointer-events: none;
}

.bingoVersion .nav-pills button::after {
  top: -4px;
}

.bingoVersion .nav-pills button::before {
  bottom: -4px;
}

.bingoVersion .nav-pills button span::after,
.bingoVersion .nav-pills button span::before {
  content       : "";
  position      : absolute;
  height        : calc(100% - 30px);
  pointer-events: none;
  border-left   : 6px solid #fff;
}

.bingoVersion .nav-pills button span::after {
  right: -4px;
}

.bingoVersion .nav-pills button span::before {
  left: -4px;
}

.bingoVersion .nav-pills button.active {
  background: transparent;
  border    : 2px solid var(--colorpr-2);
}

.bingoVersion .nav-pills button.active span {
  background             : var(--colorpr-gradient-2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bingoVersion .tab-content {
  flex-grow : 1;
  margin-top: -200px;
  position  : relative;
}

.bingoVersion table .td-content {
  text-align    : center;
  width         : 32%;
  vertical-align: middle;
}

.bingoVersion table a {
  text-decoration: none;
  color          : #000;
}

.bingoVersion table th {
  width           : 160px;
  background-color: white;
  padding         : 0.75rem;
}

.bingoVersion table tr:nth-of-type(odd) {
  background: rgba(0, 0, 0, 0.05);
}

.bingoVersion table tr:first-child {
  background: transparent;
}

.bingoVersion table td {
  padding: 0.75rem;
}

.bingoVersion .--viewDetail {
  width : -moz-max-content;
  width : max-content;
  margin: 24px auto 0;
}

.bingoVersion .--viewDetail:hover {
  border: 1px solid var(--colorpr-gradient-1) !important;
}

.bingoVersion .--viewDetail:hover::after,
.bingoVersion .--viewDetail:hover::before {
  background: var(--colorpr-gradient-1) !important;
}

.bingoVersion .--viewDetail img {
  filter: brightness(100) invert(0);
}

.bingoVersion .--viewDetail:active {
  background: var(--colorpr-gradient-1);
}

@media (min-width: 769px) and (max-width: 1279px) {
  .bingoVersion {
    padding: 80px 0;
  }

  .bingoVersion .nav-pills button {
    font-size: 16px;
  }
}

@media (max-width: 769px) {
  .bingoVersion {
    padding: 60px 0;
  }

  .bingoVersion .--content {
    flex-flow: column;
    gap      : 24px;
  }

  .bingoVersion .nav-pills {
    flex-direction: row !important;
    width         : 100%;
    overflow      : hidden;
    overflow-x    : auto;
    flex          : unset;
    flex-wrap     : unset;
    gap           : 24px;
  }

  .bingoVersion .nav-pills button {
    flex     : 0 0 auto;
    font-size: 14px;
  }

  .bingoVersion .tab-content {
    margin-top: 0;
  }

  .bingoVersion table {
    width  : 100% !important;
    height : auto !important;
    display: block !important;
  }

  .bingoVersion table colgroup {
    width: 100% !important;
  }

  .bingoVersion table img {
    width: 100% !important;
  }

  .bingoVersion table tbody {
    display: block;
    width  : 100%;
  }

  .bingoVersion table tr {
    height         : auto !important;
    width          : 100%;
    display        : flex !important;
    justify-content: space-between;
    flex           : 0 0 auto;
  }

  .bingoVersion table td {
    height: auto !important;
  }

  .bingoVersion table td:nth-child(2) {
    text-align: right !important;
  }
}

.bingoExpense {
  padding: 100px 0;
}

.bingoExpense .segTitle {
  text-align: center;
}

.bingoExpense article {
  text-align: center;
  position  : relative;
  padding   : 80px 0;
}

.bingoExpense article::after {
  content     : "";
  position    : absolute;
  left        : calc(100% + 90px);
  border-right: 1px solid var(--color-1);
  height      : 100%;
  top         : 0;
}

.bingoExpense article .car-title {
  font-weight   : 700;
  font-size     : 18px;
  line-height   : 32px;
  text-align    : center;
  letter-spacing: 0.1em;
}

.bingoExpense article .car-price {
  line-height            : 88px;
  font-size              : 70px;
  background             : var(--colorpr-gradient-2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bingoExpense article .car-content {
  font-size: 16px;
}

.bingoExpense article .car-content span {
  color      : var(--color-1);
  font-weight: 600;
  font-size  : 18px;
}

.bingoExpense .--content {
  display              : grid;
  margin-top           : 40px;
  grid-template-columns: 40% auto;
  gap                  : 180px;
}

.bingoExpense .form-group {
  display    : flex;
  gap        : 24px;
  align-items: center;
}

.bingoExpense .form {
  flex-flow      : column;
  gap            : 30px;
  justify-content: center;
}

.bingoExpense label {
  font-weight: 600;
  flex       : 0 0 auto;
  width      : 170px;
  font-size  : 16px;
}

.bingoExpense .nice-select {
  background : #eee;
  height     : 60px;
  display    : flex;
  align-items: center;
  font-size  : 16px;
}

.bingoExpense .nice-select .current {
  text-transform: uppercase;
  font-weight   : 600;
}

.bingoExpense .nice-select::after {
  content         : "\f107";
  font            : normal normal normal 14px/1 FontAwesome;
  border          : none;
  margin-top      : 0;
  height          : auto;
  transform       : translate(0, -50%);
  transform-origin: unset;
  right           : 20px;
  color           : #000;
  font-size       : 18px;
}

.bingoExpense .--viewDetail {
  width : -moz-max-content;
  width : max-content;
  margin: 0 auto;
}

@media (min-width: 769px) and (max-width: 1279px) {
  .bingoExpense {
    padding: 80px 0;
  }
}

@media (max-width: 769px) {
  .bingoExpense {
    padding: 60px 0;
  }

  .bingoExpense .--content {
    flex-flow: column;
    display  : flex;
    gap      : 24px;
  }

  .bingoExpense article {
    padding: 0;
  }

  .bingoExpense article .car-title {
    font-size: 16px;
  }

  .bingoExpense article .car-price {
    font-size  : 40px;
    line-height: 1;
  }

  .bingoExpense article .car-content br {
    display: none;
  }

  .bingoExpense article::after {
    display: none;
  }

  .bingoExpense .form-group {
    flex-flow  : column;
    align-items: flex-start;
    gap        : 0;
  }

  .bingoExpense .nice-select {
    height: 40px;
  }

  .bingoExpense .form {
    gap: 12px;
  }
}

.bingoForm {
  background-color: #000;
  color           : #fff;
  padding         : 60px 0 56vh;
  position        : relative;
}

.bingoForm .--background {
  position : absolute;
  bottom   : -6%;
  left     : 50%;
  width    : 60%;
  transform: translate(-50%, 0);
}

.bingoForm .--background img {
  width        : 100%;
  height       : 100%;
  -o-object-fit: cover;
  object-fit   : cover;
}

.bingoForm .segTitle {
  position  : relative;
  z-index   : 1;
  text-align: center;
}

.bingoForm article {
  text-align: center;
  width     : 50%;
  margin    : 16px auto 0;
  position  : relative;
  z-index   : 1;
}

.bingoForm .form {
  margin-top           : 32px;
  display              : grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap              : 32px;
  -moz-column-gap      : 60px;
  column-gap           : 60px;
  position             : relative;
  z-index              : 2;
}

.bingoForm .form-group {
  display  : flex;
  flex-flow: column;
  gap      : 4px;
}

.bingoForm input,
.bingoForm .nice-select {
  height       : 44px;
  border       : none !important;
  background   : transparent !important;
  border-radius: 0 !important;
  border-bottom: 2px solid #fff !important;
  color        : #fff;
  padding      : 0 !important;
}

.bingoForm input:-webkit-autofill,
.bingoForm input:-webkit-autofill:hover,
.bingoForm input:-webkit-autofill:focus,
.bingoForm input:-webkit-autofill:active,
.bingoForm .nice-select:-webkit-autofill,
.bingoForm .nice-select:-webkit-autofill:hover,
.bingoForm .nice-select:-webkit-autofill:focus,
.bingoForm .nice-select:-webkit-autofill:active {
  background-color: #000 !important;
  color           : #fff !important;
}

.bingoForm label {
  font-size  : 14px;
  font-weight: bold;
}

.bingoForm .nice-select::after {
  font-family     : "FontAwesome";
  transform       : translate(0, -50%);
  content         : "\f078";
  border          : none;
  transform-origin: unset;
  margin-top      : 0;
  height          : auto;
}

.bingoForm .nice-select .list {
  color: #000;
}

.bingoForm .--viewDetail {
  width   : -moz-max-content;
  width   : max-content;
  margin  : 32px 0 0 auto;
  z-index : 1;
  color   : #fff;
  position: relative;
}

@media (max-width: 769px) {
  .bingoForm {
    padding: 60px 0 200px;
  }

  .bingoForm article {
    width: 100%;
  }

  .bingoForm button {
    margin: 24px 0 0;
  }

  .bingoForm .--background {
    bottom: -40px;
    width : 90%;
  }

  .bingoForm input,
  .bingoForm .nice-select {
    height: 36px !important;
  }

  .bingoForm .form {
    grid-template-columns: repeat(1, 1fr);
  }
}

.bingoDialog {
  position      : fixed;
  top           : 50%;
  left          : 50%;
  width         : 90vw;
  max-height    : calc(100vh - 30px);
  transform     : translate(-50%, -50%);
  padding       : 50px 90px;
  background    : rgba(0, 0, 0, 0.7);
  gap           : 40px;
  display       : flex;
  z-index       : 999;
  opacity       : 0;
  border-radius : 20px;
  overflow      : hidden;
  pointer-events: none;
}

.bingoDialog.active {
  opacity       : 1;
  pointer-events: auto;
}

.bingoDialog .--close {
  position       : absolute;
  top            : 0;
  right          : 0;
  width          : 40px;
  height         : 40px;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : #fff;
  color          : #000;
}

.bingoDialog .--close i {
  transition: all 0.3s ease;
}

.bingoDialog .--close:hover i {
  transform: rotate(90deg);
}

.bingoDialog .--img {
  width : 60%;
  flex  : 0 0 auto;
  height: auto;
}

.bingoDialog .--img img {
  width        : 100%;
  -o-object-fit: cover;
  object-fit   : cover;
  height       : 100%;
}

.bingoDialog .--txt {
  color    : #fff;
  font-size: 13px;
}

.bingoDialog .--name {
  font-size              : 28px;
  text-transform         : uppercase;
  font-weight            : bold;
  text-align             : center;
  background             : var(--colorpr-gradient-2);
  -webkit-background-clip: text;
  background-clip        : text;
  -webkit-text-fill-color: transparent;
  width                  : -moz-max-content;
  width                  : max-content;
  margin                 : 0 auto;
}

.bingoDialog article {
  text-align: center;
  font-size : 13px;
}

.bingoDialog .nice-select {
  color      : #000;
  height     : 32px;
  display    : flex;
  align-items: center;
}

.bingoDialog .nice-select::-moz-placeholder {
  color: #000;
}

.bingoDialog .nice-select::placeholder {
  color: #000;
}

.bingoDialog form {
  margin-top: 20px;
}

.bingoDialog .form-group.checkbox {
  display: flex;
  gap    : 10px;
}

.bingoDialog .form-group.checkbox input {
  width : 16px;
  height: 16px !important;
  flex  : 0 0 auto;
}

.bingoDialog .form-group.checkbox a {
  background             : var(--colorpr-gradient-2);
  -webkit-background-clip: text;
  background-clip        : text;
  -webkit-text-fill-color: transparent;
}

.bingoDialog input {
  height: 32px !important;
  color : #000;
}

.bingoDialog input::-moz-placeholder {
  color: #000;
}

.bingoDialog input::placeholder {
  color: #000;
}

.bingoDialog .--viewDetail {
  margin         : 24px auto 0;
  color          : #fff;
  justify-content: center;
}

@media (min-width: 769px) and (max-width: 1279px) {
  .bingoDialog {
    padding: 32px 48px;
  }

  .bingoDialog .form-group.checkbox {
    font-size: 12px;
  }
}

@media (max-width: 769px) {
  .bingoDialog {
    padding  : 50px 15px;
    flex-flow: column;
  }

  .bingoDialog .--img {
    display: none;
  }

  .bingoDialog .--name {
    font-size: 20px;
  }
}

.bgBlock {
  position      : fixed;
  opacity       : 0;
  top           : 0;
  left          : 0;
  width         : 100vw;
  height        : 100vh;
  background    : rgba(0, 0, 0, 0.5);
  opacity       : 0;
  pointer-events: none;
}

.bgBlock.active {
  opacity       : 1;
  pointer-events: auto;
}

/*# sourceMappingURL=bingo.css.map */