@font-face {
  font-family: 'db_heaventblack';
  src: url("/static/font/db_heavent_bd_v3.2.1-webfont.eot");
  src: url("/static/font/db_heavent_blk_v3.2.1-webfont.eot?#iefix") format("embedded-opentype"), url("/static/font/db_heavent_blk_v3.2.1-webfont.woff2") format("woff2"), url("/static/font/db_heavent_blk_v3.2.1-webfont.woff") format("woff"), url("/static/font/db_heavent_blk_v3.2.1-webfont.ttf") format("truetype"), url("/static/font/db_heavent_blk_v3.2.1-webfont.svg#db_heaventblack") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'db_heaventlight';
  src: url("/static/font/db_heavent_li_v3.2.1-webfont.eot");
  src: url("/static/font/db_heavent_li_v3.2.1-webfont.eot?#iefix") format("embedded-opentype"), url("/static/font/db_heavent_li_v3.2.1-webfont.woff2") format("woff2"), url("/static/font/db_heavent_li_v3.2.1-webfont.woff") format("woff"), url("/static/font/db_heavent_li_v3.2.1-webfont.ttf") format("truetype"), url("/static/font/db_heavent_li_v3.2.1-webfont.svg#db_heaventlight") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'db_heaventbold';
  src: url("/static/font/db_heavent_bd_v3.2.1-webfont.eot");
  src: url("/static/font/db_heavent_bd_v3.2.1-webfont.eot?#iefix") format("embedded-opentype"), url("/static/font/db_heavent_bd_v3.2.1-webfont.woff2") format("woff2"), url("/static/font/db_heavent_bd_v3.2.1-webfont.woff") format("woff"), url("/static/font/db_heavent_bd_v3.2.1-webfont.ttf") format("truetype"), url("/static/font/db_heavent_bd_v3.2.1-webfont.svg#db_heaventbold") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'db_heaventregular';
  src: url("/static/font/db_heavent_v3.2.1-webfont.eot");
  src: url("/static/font/db_heavent_v3.2.1-webfont.eot?#iefix") format("embedded-opentype"), url("/static/font/db_heavent_v3.2.1-webfont.woff2") format("woff2"), url("/static/font/db_heavent_v3.2.1-webfont.woff") format("woff"), url("/static/font/db_heavent_v3.2.1-webfont.ttf") format("truetype"), url("/static/font/db_heavent_v3.2.1-webfont.svg#db_heaventregular") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'db_heaventmed';
  src: url("/static/font/db_heavent_med_v3.2.1-webfont.eot");
  src: url("/static/font/db_heavent_med_v3.2.1-webfont.eot?#iefix") format("embedded-opentype"), url("/static/font/db_heavent_med_v3.2.1-webfont.woff2") format("woff2"), url("/static/font/db_heavent_med_v3.2.1-webfont.woff") format("woff"), url("/static/font/db_heavent_med_v3.2.1-webfont.ttf") format("truetype"), url("/static/font/db_heavent_med_v3.2.1-webfont.svg#db_heaventmed") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'icomoon';
  src: url("/static/font/svod-icon/icomoon.eot");
  src: url("/static/font/svod-icon/icomoon.eot") format("embedded-opentype"), url("/static/font/svod-icon/icomoon.ttf") format("truetype"), url("/static/font/svod-icon/icomoon.woff") format("woff"), url("/static/font/svod-icon/icomoon.svg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block; }
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 14px;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  [class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: inherit; }

.icon-crown:before {
  content: "\e900"; }

.icon-check-circle-fill:before {
  content: "\e901"; }

.icon-star:before {
  content: "\e902"; }

.icon-share:before {
  content: "\e903"; }

.icon-news:before {
  content: "\e904"; }

.icon-monitor:before {
  content: "\e905"; }

.icon-megaphone:before {
  content: "\e906"; }

.icon-clipboard:before {
  content: "\e907"; }

.icon-cross:before {
  content: "\e908"; }

.icon-jam-alert:before {
  content: "\e909"; }

.icon-checked:before {
  content: "\e90a"; }

.icon-caret-right:before {
  content: "\e90b"; }

.icon-caret-down:before {
  content: "\e91c"; }

.icon-caret-left:before {
  content: "\e90c"; }

.icon-user:before {
  content: "\e90d"; }

.icon-search:before {
  content: "\e90e"; }

.icon-crown2:before {
  content: "\e90f"; }

.icon-hamburger:before {
  content: "\e912"; }

.icon-folder:before {
  content: "\e910"; }

.icon-coupon:before {
  content: "\e911"; }

.icon-heart1:before {
  content: "\e914"; }

.icon-exit:before {
  content: "\e915"; }

.icon-check-circle-outline:before {
  content: "\e916"; }

.icon-caret-down-fill:before {
  content: "\e917"; }

.icon-gift-box:before {
  content: "\e91a"; }

.icon-movie:before {
  content: "\e918"; }

.icon-eye:before {
  content: "\e919"; }

.icon-instagram:before {
  content: "\e91b"; }

.icon-fullhd:before {
  content: "\e91d"; }

.icon-no-ads:before {
  content: "\e91e"; }

.icon-group:before {
  content: "\e91f"; }

.icon-content:before {
  content: "\e920"; }

.icon-mobile:before {
  content: "\e921"; }

.icon-edit:before {
  content: "\e922"; }

.icon-filled-heart:before {
  content: "\e923"; }

.icon-download:before {
  content: "\e924"; }

.icon-devices:before {
  content: "\e925"; }

.icon-heart-outline:before {
  content: "\e926"; }

.icon-user-star:before {
  content: "\e927"; }

.icon-plus:before {
  content: "\e92a"; }

.icon-user-checked:before {
  content: "\e92c"; }

.icon-user-plus:before {
  content: "\e92d"; }

.icon-mini-heart-hand:before {
  content: "\e92b"; }

.icon-locked:before {
  content: "\e92e"; }

.icon-bold-plus:before {
  content: "\e92f"; }

.icon-sharp-checked:before {
  content: "\e931"; }

.icon-circle-plus:before {
  content: "\e932"; }

.icon-info:before {
  content: "\e933"; }

.icon-user-filled:before {
  content: "\e934"; }

.icon-flame:before {
  content: "\e935"; }

.icon-video-camera:before {
  content: "\e93a"; }

.icon-bar-chart:before {
  content: "\e936"; }

.icon-paper-roll:before {
  content: "\e937"; }

.icon-heart:before {
  content: "\e938"; }

.icon-plus-circle:before {
  content: "\e939"; }

.icon-x:before {
  content: "\e93b"; }

.icon-sort-alt:before {
  content: "\e93c"; }

.icon-long-arrow-left:before {
  content: "\e93d"; }

.icon-ticket:before {
  content: "\e930"; }

.icon-heart-alt:before {
  content: "\e93e"; }

.icon-user-alt:before {
  content: "\e93f"; }

.icon-scroll:before {
  content: "\e940"; }

.icon-package:before {
  content: "\e941"; }

.icon-phone-laptop:before {
  content: "\e942"; }

.icon-ticket-alt:before {
  content: "\e943"; }

.icon-plus-circle-alt:before {
  content: "\e944"; }

.icon-sign-out:before {
  content: "\e945"; }

.icon-file-alt:before {
  content: "\e946"; }

.icon-chevron-left:before {
  content: "\e947"; }

.icon-chevron-right:before {
  content: "\e948"; }

.icon-info-circle:before {
  content: "\e949"; }

.icon-small-crown:before {
  content: "\e94a"; }

.icon-map-marker:before {
  content: "\e928"; }

.icon-clock:before {
  content: "\e929"; }

.icon-minus:before {
  content: "\e94b"; }

.icon-album:before {
  content: "\e94c"; }

.icon-times-circle-outline:before {
  content: "\e94d"; }

.icon-check-circle-solid:before {
  content: "\e94e"; }

.icon-alert-circle:before {
  content: "\e94f"; }

.icon-shield-privacy:before {
  content: "\e950"; }

.icon-calendar:before {
  content: "\e913"; }

.icon-play:before {
  content: "\e951"; }

.icon-signal:before {
  content: "\e952"; }

.icon-flash:before {
  content: "\e953"; }

.icon-leading:before {
  content: "\e954"; }

.icon-alert:before {
  content: "\e955"; }

.icon-lock:before {
  content: "\e956"; }

.icon-star-alert:before {
  content: "\e957"; }

.icon-kebab:before {
  content: "\e958"; }

.icon-bin:before {
  content: "\e959"; }

.icon-point-alt:before {
  content: "\e95a"; }

.icon-gift:before {
  content: "\e95b"; }

.icon-question-circle:before {
  content: "\e95c"; }

/*reset*/
* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

input[type='text'], input[type='submit'], select, textarea, button {
  -webkit-appearance: none;
  border-radius: 0;
  border: none; }

input:focus, select:focus, textarea:focus, button:focus, a:focus {
  outline: none; }

body {
  -webkit-overflow-scrolling: touch;
  font-family: 'db_heaventmed', san-serif; }

ul li, ol li {
  list-style: none; }

a {
  text-decoration: none;
  color: #ffffff; }

body {
  background: #1c0404; }

.wrapper {
  overflow: hidden;
  /*background-image: url("../images/BG-Landing_Page_Gulf-1.jpg");*/
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #191919;
  min-height: 100vh; }

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto; }

.content {
  /*padding: 32px 0 0;*/ }

.head-back {
  background: #00040D;
  margin-bottom: 16px; }
  .head-back .head-bg {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto; }
    @media only screen and (max-width: 1280px) {
      .head-back .head-bg {
        padding: 0 16px; } }
    .head-back .head-bg .goback {
      padding: 10px 0;
      display: flex; }
      @media only screen and (max-width: 1024px) {
        .head-back .head-bg .goback {
          padding: 8px 0; } }
      .head-back .head-bg .goback a {
        display: flex;
        align-items: center;
        font-size: 22px; }
        @media only screen and (max-width: 1024px) {
          .head-back .head-bg .goback a {
            font-size: 18px; } }
        .head-back .head-bg .goback a img {
          margin-right: 16px;
          width: 44px;
          height: auto;
          padding: 0;
          vertical-align: unset; }
          @media only screen and (max-width: 1024px) {
            .head-back .head-bg .goback a img {
              width: 36px;
              height: auto; } }
        .head-back .head-bg .goback a span {
          font-size: 16px;
          margin-right: 4px; }

header {
  text-align: center;
  margin-bottom: 32px; }

.video-box {
  padding: 0;
  max-width: 1280px;
  margin: 0 auto 68px;
  position: relative;
  z-index: 1;
  box-sizing: border-box; }
  .video-box .videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    background-color: #000;
    /*>iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}*/ }
    .video-box .videoWrapper > a {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .video-box .videoWrapper > a img {
        width: 100%;
        height: auto; }
    .video-box .videoWrapper > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }

.content-detail {
  padding-bottom: 48px;
  max-width: 1280px;
  margin: 0 auto;
  display: flex; }
  .content-detail .info-detail {
    max-width: 896px;
    width: 70%; }
    .content-detail .info-detail .detail-table {
      overflow: hidden;
      float: left;
      width: 100%;
      display: table;
      min-height: 280px; }
      .content-detail .info-detail .detail-table .detail {
        width: calc(40%);
        border-radius: 8px;
        padding: 16px;
        max-width: 420px;
        margin: 0 16px 0 0;
        display: table-cell;
        vertical-align: middle; }
        @media only screen and (max-width: 1199px) {
          .content-detail .info-detail .detail-table .detail {
            width: 30%;
            padding: 0; } }
        .content-detail .info-detail .detail-table .detail p {
          text-align: center; }
          .content-detail .info-detail .detail-table .detail p img {
            width: 100%;
            height: auto;
            max-width: 360px; }
      .content-detail .info-detail .detail-table .sponsor {
        width: 60%;
        position: relative;
        overflow: hidden;
        display: table-cell;
        vertical-align: middle;
        max-width: 490px; }
        @media only screen and (max-width: 1199px) {
          .content-detail .info-detail .detail-table .sponsor {
            width: 70%; } }
        .content-detail .info-detail .detail-table .sponsor > div {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column; }
          .content-detail .info-detail .detail-table .sponsor > div h3 {
            font-size: 16px;
            line-height: 20px;
            color: #fff;
            font-weight: normal;
            margin-bottom: 8px;
            text-align: center;
            font-family: 'db_heaventlight' !important;
            letter-spacing: 0.5px;
            margin-top: -20px; }
            @media only screen and (max-width: 659px) {
              .content-detail .info-detail .detail-table .sponsor > div h3 {
                margin-top: 0; } }
          .content-detail .info-detail .detail-table .sponsor > div img {
            width: 100%;
            height: auto; }
  .content-detail .boomBox {
    display: inline-block;
    width: 30%;
    /*width: calc(100% - 896px);*/
    text-align: center; }

.remark {
  padding: 10px 0;
  width: 100%;
  display: inline-block;
  text-align: center;
  background: #121416; }
  @media only screen and (max-width: 1024px) {
    .remark {
      margin-bottom: 16px; } }
  @media only screen and (max-width: 767px) {
    .remark {
      padding: 8px 28px;
      box-sizing: border-box; } }
  .remark h3 {
    font-size: 20px;
    line-height: 120%;
    color: #F2F6FD;
    font-weight: normal;
    text-align: center;
    font-family: 'db_heaventregular' !important; }
  .remark p {
    font-size: 20px;
    line-height: 120%;
    color: #F2F6FD;
    font-weight: normal;
    text-align: center;
    font-family: 'db_heaventregular' !important;
    margin: 0; }
    @media only screen and (max-width: 1024px) {
      .remark p {
        font-size: 18px; } }
    @media only screen and (max-width: 767px) {
      .remark p {
        font-size: 14px; } }
    @media only screen and (max-width: 1024px) {
      .remark p span {
        display: block; } }
    @media only screen and (max-width: 767px) {
      .remark p span {
        display: inline; } }

.wrap-live-content {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 16px;
  overflow: hidden;
  /*display: flex;*/
  display: grid;
  grid-template-columns: auto 375px;
  grid-template-rows: auto auto auto auto;
  gap: 0px 8px;
  grid-template-areas: "live-content-left live-content-right" "remark remark";
  grid-area: content; }
  .wrap-live-content .live-content-left {
    grid-area: live-content-left; }
  .wrap-live-content .live-content-right {
    grid-area: live-content-right; }
  .wrap-live-content .remark {
    grid-area: remark; }
  @media only screen and (max-width: 1024px) {
    .wrap-live-content {
      grid-template-areas: "live-content-left" "remark" "live-content-right";
      grid-template-columns: 100%; } }
  .wrap-live-content .live-content-left {
    /*flex: 0 0 calc(100% - 383px);*/ }
    .wrap-live-content .live-content-left .video-box {
      margin: 0; }
  .wrap-live-content .live-content-right {
    /*flex: 0 0 375px; margin-left: 8px;*/
    position: relative; }
    .wrap-live-content .live-content-right #pre-login {
      height: calc(100% - 50px); }

.wrap-live-content.noChat {
  display: block; }
  .wrap-live-content.noChat .live-content-left {
    width: 100%; }
  .wrap-live-content.noChat .live-content-right {
    display: none; }

.pre-exclusive {
  position: absolute;
  width: 100%;
  height: calc(100% - 52px);
  line-height: 30px;
  z-index: 1;
  backdrop-filter: blur(5px);
  display: table; }
  .pre-exclusive > div {
    display: table-cell;
    text-align: center;
    vertical-align: middle; }
    .pre-exclusive > div h3 {
      text-align: center;
      font-family: "db_heaventmed",san-serif;
      font-weight: normal;
      font-size: 36px;
      letter-spacing: 0.2px;
      line-height: 120%;
      margin: 0 0 10px;
      color: #F2F6FD; }
    .pre-exclusive > div > div p {
      font-size: 26px;
      color: #B9BBC2;
      line-height: 120%;
      font-family: "db_heaventregular",san-serif; }
    .pre-exclusive > div > div .btn-group {
      padding: 24px 0 0;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center; }
      .pre-exclusive > div > div .btn-group a {
        text-align: center;
        max-width: 170px;
        height: 44px;
        width: 46%;
        display: inline-block;
        border-radius: 4px;
        font-size: 22px;
        line-height: 120%;
        font-family: "db_heaventregular",san-serif;
        font-weight: normal;
        background: #0F62FE;
        color: #F2F6FD;
        display: flex;
        align-items: center;
        justify-content: center; }

.sp-banner {
  text-align: center;
  width: 100%;
  margin: 0 0 16px;
  overflow: hidden; }

.wrapper.noAds .sp-banner.first {
  display: none; }
.wrapper.noAds .boomBox {
  display: none; }
.wrapper.noAds .content-detail .info-detail {
  width: 100%;
  max-width: 100%; }
  .wrapper.noAds .content-detail .info-detail .detail-table .detail {
    width: 30%; }
    @media only screen and (max-width: 767px) {
      .wrapper.noAds .content-detail .info-detail .detail-table .detail {
        width: 100%; } }
  .wrapper.noAds .content-detail .info-detail .detail-table .sponsor {
    width: 70%; }
    @media only screen and (max-width: 767px) {
      .wrapper.noAds .content-detail .info-detail .detail-table .sponsor {
        width: 100%; } }
    .wrapper.noAds .content-detail .info-detail .detail-table .sponsor > div {
      display: inline; }

.wrapper.noSponsor .content-detail .info-detail .detail-table .detail {
  width: 100%; }
.wrapper.noSponsor .content-detail .info-detail .detail-table .sponsor {
  display: none; }

.wrapper.noLogo .content-detail .info-detail .detail-table .detail {
  display: none; }

.wrapper.noAds.noSponsor.noLogo .content-detail .info-detail .detail-table {
  display: none; }

.wrapper.noSponsor.noLogo .content-detail {
  display: inline-block;
  width: 100%; }
  .wrapper.noSponsor.noLogo .content-detail .info-detail {
    width: 100%;
    max-width: 100%; }
    .wrapper.noSponsor.noLogo .content-detail .info-detail .detail-table {
      display: none; }
  .wrapper.noSponsor.noLogo .content-detail .boomBox {
    width: 100%; }

.wrapper.noAds.noLogo .content-detail .info-detail .detail-table .sponsor > div {
  width: 100%;
  max-width: 100%;
  display: inline-block; }

.event-live .container-content {
  width: 100% !important; }

@media only screen and (max-width: 1299px) {
  .sponsor > div {
    width: 100%; } }
@media only screen and (max-width: 1280px) {
  .container {
    width: calc(100% - 40px); } }
@media only screen and (max-width: 1200px) and (min-width: 1024px) {
  .wrap-live-content,
  .content-detail {
    width: 100%; } }
@media only screen and (max-width: 1199px) {
  .content-detail {
    flex-direction: column; }
    .content-detail .info-detail {
      width: 100%;
      max-width: unset; }
    .content-detail .boomBox {
      width: 100%; } }
@media only screen and (max-width: 1024px) {
  .wrap-live-content {
    /*.live-content-left { margin-bottom: 20px;}*/ }
    .wrap-live-content .live-content-right {
      margin-left: 0; }
      .wrap-live-content .live-content-right .chat-wrapper {
        height: 526px !important;
        position: relative; }

  .content-detail {
    width: calc(100% - 16px);
    margin: 0 auto; }
    .content-detail .info-detail .detail-table {
      min-height: unset; }

  .sp-banner {
    min-height: unset; } }
@media only screen and (max-width: 991px) and (min-width: 768px) {
  .content-detail .sponsor img {
    max-width: 460px;
    display: block;
    margin: 0 auto; } }
@media only screen and (max-width: 768px) {
  .wrapper {
    background-position: top center;
    background-size: cover;
    min-height: 100vh; }

  .video-box {
    margin-bottom: 40px; }

  .content-detail {
    display: block; }
    .content-detail .sponsor {
      flex: auto;
      width: 100%;
      padding-top: 0; }
      .content-detail .sponsor h3 {
        text-align: center; }
      .content-detail .sponsor > div p > a {
        width: 52px;
        height: auto; }
      .content-detail .sponsor > div p > span {
        width: 52px;
        height: auto; }
    .content-detail .detail {
      margin-bottom: 44px; }
      .content-detail .detail .logo {
        width: 90%;
        height: auto;
        max-width: 300px; }

  .goback {
    text-align: left;
    padding: 40px 16px; }
    .goback > a {
      font-size: 20px; }
      .goback > a img {
        width: auto;
        height: 18px; } }
@media only screen and (max-width: 659px) {
  .video-box {
    margin-bottom: 24px; }

  header {
    margin-bottom: 28px; }
    header .logo {
      width: 178px;
      height: auto; }

  .content {
    padding: 0; }

  .content-detail {
    display: block; }
    .content-detail .info-detail .detail-table {
      display: inline-block; }
      .content-detail .info-detail .detail-table .detail {
        padding: 0 0 16px;
        width: 100%;
        display: block;
        max-width: 100%; }
        .content-detail .info-detail .detail-table .detail p img {
          width: 80%;
          height: auto; }
      .content-detail .info-detail .detail-table .sponsor {
        width: 100%;
        display: block;
        max-width: 100%; }
        .content-detail .info-detail .detail-table .sponsor h3 {
          margin-bottom: 4px; }
        .content-detail .info-detail .detail-table .sponsor > div {
          padding: 0; }
          .content-detail .info-detail .detail-table .sponsor > div p > a {
            width: 41px;
            height: auto;
            padding: 4px; }
          .content-detail .info-detail .detail-table .sponsor > div p > span {
            width: 41px;
            height: auto;
            padding: 4px; }
    .content-detail .info-detail .remark {
      padding-bottom: 0; }
    .content-detail .boomBox {
      margin: 0; } }
@media only screen and (max-width: 659px) {
  .container {
    width: calc(100% - 32px); } }