.loading-spinner {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(farthest-side, #0f62fe 94%, #0000) top/6px 6px no-repeat, conic-gradient(#0000 30%, #0f62fe);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 6px), #000 0);
  animation: s3 1.5s infinite linear; }

@keyframes s3 {
  100% {
    transform: rotate(1turn); } }

@charset "UTF-8";
/* svod icon */
@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"; }

.icon-film:before {
  content: "\E95D"; }

.icon-globe:before {
  content: "\E95E"; }

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

.icon-mail:before {
  content: "\E960"; }

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

.icon-success:before {
  content: "\E962"; }

.icon-tv:before {
  content: "\E963"; }

.icon-redo:before {
  content: "\E964"; }

.icon-times-circle-filled:before {
  content: "\E965"; }

.icon-img-thumb:before {
  content: "\E966"; }

.icon-social-facebook:before {
  content: "\E967"; }

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

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

.icon-social-youtube:before {
  content: "\E96A"; }

.icon-chevron-down:before {
  content: "\E96B"; }

.icon-giftbox:before {
  content: "\E96C"; }

.icon-social-line:before {
  content: "\E96D"; }

.icon-custom:before {
  content: "\E96E"; }

.icon-shopping-bag-alt:before {
  content: "\E96F"; }

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

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

.icon-copy:before {
  content: "\E972"; }

.icon-open-in-new:before {
  content: "\E973"; }

.icon-chevron-up:before {
  content: "\E974"; }

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

.icon-volume-on:before {
  content: "\E976"; }

.icon-volume-off:before {
  content: "\E977"; }

.icon-play1:before {
  content: "\E978"; }

.icon-pause:before {
  content: "\E979"; }

/*font-face*/
@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; }

/*Prefix for customize Mello framework*/
/*global components*/
.viewed:before, footer .ft-row:before, .thumb > a:after {
  content: '';
  display: block; }

/*font-face*/
@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; }

/*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_heaventlight, san-serif;
  font-size: 15px;
  line-height: 22px; }

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

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

.viewed:before, footer .ft-row:before, .thumb > a:after {
  content: '';
  display: block; }

/*scroll*/
.scroll-style-2::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #fff; }

.scroll-style-2::-webkit-scrollbar {
  width: 5px;
  background-color: #fff; }

.scroll-style-2::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #707070; }

.scroll-style-2 {
  scrollbar-color: #595959 #e0e0e0;
  scrollbar-width: thin; }

.scroll-style-2::-webkit-scrollbar {
  width: 2px;
  height: 2px; }

.scroll-style-2::-webkit-scrollbar-button {
  width: 0px;
  height: 0px; }

.scroll-style-2::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border: 0px none #ffffff;
  border-radius: 50px; }

.scroll-style-2::-webkit-scrollbar-thumb:hover {
  background: #ffffff; }

.scroll-style-2::-webkit-scrollbar-thumb:active {
  background: #000000; }

.scroll-style-2::-webkit-scrollbar-track {
  background: #666666;
  border: 0px none #ffffff;
  border-radius: 50px; }

.scroll-style-2::-webkit-scrollbar-track:hover {
  background: #666666; }

.scroll-style-2::-webkit-scrollbar-track:active {
  background: #333333; }

.scroll-style-2::-webkit-scrollbar-corner {
  background: transparent; }

.premium-badge, header .ic-profile > a .premium-monthly, header .ic-profile > a .premium-yearly, header .ic-profile > a .member-normaly, header .ic-profile .profile-dropdown a .profile-extra .premium-monthly, header .ic-profile .profile-dropdown a .profile-extra .premium-yearly, header .ic-profile .profile-dropdown a .profile-extra .member-normaly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .premium-monthly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .premium-yearly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .member-normaly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .premium-monthly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .premium-yearly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .member-normaly {
  font-family: "db_heaventmed", san-serif;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  transition: opacity 0.5s;
  margin-right: 8px;
  padding: 0 6px;
  box-sizing: border-box;
  height: 18px;
  border: 1px solid transparent; }
  .premium-badge .icon, header .ic-profile > a .premium-monthly .icon, header .ic-profile > a .premium-yearly .icon, header .ic-profile > a .member-normaly .icon, header .ic-profile .profile-dropdown a .profile-extra .premium-monthly .icon, header .ic-profile .profile-dropdown a .profile-extra .premium-yearly .icon, header .ic-profile .profile-dropdown a .profile-extra .member-normaly .icon, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .premium-monthly .icon, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .premium-yearly .icon, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .member-normaly .icon, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .premium-monthly .icon, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .premium-yearly .icon, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .member-normaly .icon {
    font-size: 12px;
    margin-right: 3px; }

/*main header*/
header {
  width: 100%;
  box-sizing: border-box;
  height: 64px;
  padding: 0 40px;
  border-radius: 0;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 12 !important;
  box-shadow: none; }
  @media (max-width: 1220px) {
    header {
      padding: 0 20px; } }
  header > div {
    box-sizing: border-box;
    margin: 0 auto;
    position: relative;
    max-width: 1280px;
    height: 100%;
    z-index: 1; }
  header .logo {
    position: absolute;
    left: 0;
    top: 10px;
    z-index: 7;
    margin: 0;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease; }
    header .logo img {
      height: 44px;
      width: auto;
      display: block; }
  header nav {
    width: 90%;
    text-align: left;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    /* Flip the image on hover */ }
    header nav ul {
      display: flex;
      align-items: center;
      padding: 16px 0; }
    header nav li {
      display: inline-block;
      text-align: left;
      margin: 0 24px 0 0 !important;
      /*position: relative;*/
      -webkit-transition: all 0.4s ease;
      transition: all 0.2s ease; }
      header nav li > a,
      header nav li > p {
        color: #F2F6FD;
        min-width: auto;
        text-decoration: none;
        display: inline-block;
        position: relative;
        font-size: 20px;
        line-height: 120%;
        padding: 0;
        font-family: "db_heaventmed", san-serif;
        letter-spacing: 0.25px;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease; }
      header nav li a:hover {
        opacity: 70%;
        /*color:#0076FF; border-bottom: 5px solid #0076FF;*/ }
      header nav li.item-packages {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s;
        background: linear-gradient(#00040D, #00040D) padding-box, linear-gradient(90deg, #8d7a5b 0%, #ebe0cd 51.04%, #8d7a5b 100%);
        color: #313149;
        border: 1px solid transparent;
        border-radius: 4px; }
        header nav li.item-packages.show-package-button {
          opacity: 1;
          pointer-events: initial; }
        header nav li.item-packages a {
          padding: 4px 20px !important;
          margin: 0 !important;
          font-size: 18px !important;
          font-family: "db_heaventmed", san-serif !important;
          line-height: 24px;
          transform: translate(0px, 0px) !important;
          color: #fff; }
          header nav li.item-packages a:after {
            display: none; }
          header nav li.item-packages a span {
            background: linear-gradient(180deg, #8D7A5B 0%, #EBE0CD 51.04%, #8D7A5B 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; }
      header nav li.item-packages:hover {
        background: linear-gradient(#00040D, #00040D) padding-box, linear-gradient(90deg, #f2f6fd 0%, #f2f6fd 51.04%, #f2f6fd 100%); }
        header nav li.item-packages:hover a:hover {
          opacity: 100%; }
          header nav li.item-packages:hover a:hover span {
            background: #F2F6FD;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; }
    header nav li.mobile {
      display: none; }
    header nav .main-nav {
      display: none; }
    header nav li.other a:after {
      content: "";
      width: 10px;
      height: 6px;
      background: url("/static/images/ch3plus/icon-dropdown.svg") 0 0 no-repeat;
      display: inline-block;
      margin: 9px 0 0 5px;
      background-size: 100%; }
    header nav .tvlive img {
      vertical-align: text-top;
      margin-left: 2px; }
    header nav li.active a {
      color: #0076FF;
      border-bottom: 5px solid #0076FF; }
    header nav .item-dropdown .dropdown {
      display: none; }
    header nav li:last-child {
      margin: 0 !important; }
    header nav .item-dropdown-hover {
      position: relative; }
      header nav .item-dropdown-hover:hover a span img {
        transform: rotate(180deg);
        transition: transform 0.3s ease; }
    header nav .item-dropdown-hover a:hover + .dropdown,
    header nav .item-dropdown-hover .dropdown:hover {
      display: block; }
    header nav .item-dropdown-hover a {
      position: relative; }
    header nav .item-dropdown-hover a:hover img {
      transform: rotate(180deg);
      transition: transform 0.3s ease;
      /* Smooth transition for the flip */ }
    header nav .item-dropdown-hover img {
      transition: transform 0.3s ease;
      /* Ensure smooth transition when flipping back */ }
    header nav .item-dropdown-hover a:hover::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 100px;
      /* เพิ่มพื้นที่ hover เพื่อให้ลากเมาส์ผ่านได้ */
      background-color: transparent;
      pointer-events: none; }
    header nav .item-dropdown-hover .dropdown {
      display: none;
      position: absolute;
      background-color: black;
      min-width: 160px;
      box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.2);
      z-index: 1000;
      border: 1px solid #7d7d7d;
      border-radius: 5px;
      top: 35px;
      font-size: 18px;
      font-family: "db_heaventmed", san-serif;
      line-height: 24px;
      transform: translate(0px, 0px);
      margin: 0 !important;
      font-size: 18px !important;
      font-family: "db_heaventmed", san-serif !important;
      line-height: 24px;
      transform: translate(0px, 0px) !important;
      left: 0; }
    header nav .item-dropdown-hover .dropdown-content-hover a {
      color: #F2F6FD;
      padding: 8px 16px;
      /* Adjusted the padding as per your request */
      text-decoration: none;
      display: block;
      border-bottom: 1px solid #26282E;
      width: 145px; }
      header nav .item-dropdown-hover .dropdown-content-hover a:last-child {
        border-bottom: none; }
    header nav .item-dropdown-hover .dropdown-content a:first-child {
      border-top: none; }
    header nav .item-dropdown-hover .dropdown-content a:last-child {
      border-bottom: none; }
    header nav .item-dropdown-hover .dropdown-content-hover a:hover {
      transition: opacity 0.2s ease-in-out;
      /* Applying transition to opacity */
      opacity: 0.7;
      /* Use 0.7 instead of 70% for proper opacity */ }
  header .member {
    position: absolute;
    right: 190px;
    top: 29px;
    margin: 0;
    visibility: visible !important; }
    header .member a {
      color: #fff;
      font-size: 24px; }
    header .member span {
      display: block; }
  header .ic-profile {
    position: relative;
    cursor: pointer;
    width: auto;
    color: #fff;
    z-index: 6;
    float: right;
    display: inline-block;
    margin: 0 !important; }
    header .ic-profile > a {
      width: 40px;
      height: 40px;
      float: left;
      position: relative;
      z-index: 2; }
      header .ic-profile > a img {
        border-radius: 100%;
        width: 38px;
        display: inline-block;
        border: 1px solid #F2F6FD; }
      header .ic-profile > a .premium-badge, header .ic-profile > a .premium-monthly, header .ic-profile > a .premium-yearly, header .ic-profile > a .member-normaly, header .ic-profile > a .profile-dropdown a .profile-extra .premium-monthly, header .ic-profile > a .profile-dropdown a .profile-extra .premium-yearly, header .ic-profile > a .profile-dropdown a .profile-extra .member-normaly, header .ic-profile > a .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .premium-monthly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container header .ic-profile > a .premium-monthly, header .ic-profile > a .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .premium-yearly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container header .ic-profile > a .premium-yearly, header .ic-profile > a .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .member-normaly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container header .ic-profile > a .member-normaly, header .ic-profile > a .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .premium-monthly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra header .ic-profile > a .premium-monthly, header .ic-profile > a .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .premium-yearly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra header .ic-profile > a .premium-yearly, header .ic-profile > a .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .member-normaly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra header .ic-profile > a .member-normaly {
        position: absolute;
        bottom: -10px;
        margin-right: 0;
        left: 50%;
        transform: translate(-50%, 0%);
        width: max-content; }
      header .ic-profile > a .premium-monthly {
        border-color: #A0A0A0;
        background: linear-gradient(146.75deg, #D7D2CC 11.86%, #304352 91.38%); }
      header .ic-profile > a .premium-yearly {
        border-color: #8D7A5B;
        background: linear-gradient(146.75deg, #D3CBB8 21.36%, #6D6027 91.38%); }
      header .ic-profile > a .member-normaly {
        border-color: #0F62FE;
        background: linear-gradient(144.39deg, #84A8EB -2.42%, #558AEB 30.21%, #092353 107.89%);
        box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.15); }
    header .ic-profile .profile-dropdown {
      float: left;
      margin: 0;
      width: auto;
      padding: 0 0 0 8px !important; }
      header .ic-profile .profile-dropdown > a {
        height: 42px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column; }
      header .ic-profile .profile-dropdown > p {
        font-family: 'db_heaventmed', san-serif;
        font-size: 18px;
        cursor: pointer;
        color: #fff;
        max-width: 75px;
        margin-left: 10px;
        line-height: 1;
        display: inline-block;
        z-index: 2;
        position: relative; }
        header .ic-profile .profile-dropdown > p > img {
          float: right;
          margin: 8px 0 0; }
        header .ic-profile .profile-dropdown > p span {
          display: block;
          white-space: nowrap;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis; }
          header .ic-profile .profile-dropdown > p span img {
            width: 15px;
            height: auto;
            float: left;
            margin-right: 5px; }
        header .ic-profile .profile-dropdown > p span:first-child {
          height: 15px;
          padding: 3px 0 0;
          overflow: hidden;
          margin: 0 0 3px; }
      header .ic-profile .profile-dropdown a .profile-name {
        display: flex;
        align-items: center;
        font-family: 'db_heaventbold';
        font-size: 20px; }
        header .ic-profile .profile-dropdown a .profile-name .name-text {
          white-space: nowrap;
          max-width: 86px;
          overflow: hidden;
          text-overflow: ellipsis; }
        header .ic-profile .profile-dropdown a .profile-name .caret {
          display: inline-block;
          margin-left: 5px;
          transition: transform 0.3s ease;
          font-size: 8px; }
      header .ic-profile .profile-dropdown a .profile-extra {
        display: flex; }
        header .ic-profile .profile-dropdown a .profile-extra .heart-wrapper {
          font-size: 14px;
          font-family: "db_heaventregular", san-serif;
          display: inline-flex;
          align-items: center; }
          header .ic-profile .profile-dropdown a .profile-extra .heart-wrapper .icon {
            font-size: 10px;
            color: #FA4D56;
            margin-right: 3px; }
        header .ic-profile .profile-dropdown a .profile-extra .point-wrapper {
          display: inline-flex;
          align-items: center;
          margin-left: 7px;
          font-family: "db_heaventregular", san-serif;
          font-size: 14px; }
          header .ic-profile .profile-dropdown a .profile-extra .point-wrapper:first-child {
            margin-left: 0; }
          header .ic-profile .profile-dropdown a .profile-extra .point-wrapper img {
            height: 10px;
            margin-right: 2px; }
        header .ic-profile .profile-dropdown a .profile-extra .premium-monthly {
          border-color: #A0A0A0;
          background: linear-gradient(146.75deg, #D7D2CC 11.86%, #304352 91.38%); }
        header .ic-profile .profile-dropdown a .profile-extra .premium-yearly {
          border-color: #8D7A5B;
          background: linear-gradient(146.75deg, #D3CBB8 21.36%, #6D6027 91.38%); }
        header .ic-profile .profile-dropdown a .profile-extra .member-normaly {
          border-color: #0F62FE;
          background: linear-gradient(144.39deg, #84A8EB -2.42%, #558AEB 30.21%, #092353 107.89%);
          box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.15); }
    header .ic-profile .profile-menu {
      display: none !important;
      position: absolute;
      margin: 0;
      border: 1px solid #393939 !important;
      background-color: #161616 !important;
      top: 46px;
      right: 0;
      z-index: 2;
      border-radius: 4px;
      width: 200px !important;
      box-sizing: unset; }
      header .ic-profile .profile-menu .item {
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center;
        font-family: "db_heaventmed", san-serif;
        font-size: 18px; }
        header .ic-profile .profile-menu .item .item-icon-wrapper {
          display: flex;
          width: 25px; }
          header .ic-profile .profile-menu .item .item-icon-wrapper .item-icon {
            font-size: 12px;
            color: #F4F4F4; }
        header .ic-profile .profile-menu .item .item-title {
          flex-grow: 1; }
        header .ic-profile .profile-menu .item::before {
          background-color: #393939; }
    header .ic-profile.active .profile-dropdown .profile-name .caret {
      transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg); }
    header .ic-profile.active .profile-menu {
      display: block !important; }
  header .member.invalid a {
    background-position: 0 -738px; }
  header .member.valid a {
    background: none; }
    header .member.valid a img {
      margin-top: 5px;
      border-radius: 30px;
      width: 42px;
      border: 2px solid #fff; }
  header .nav-group {
    position: absolute;
    right: 0;
    top: 10px;
    /*float: right; margin: 9px 3% 0 0;*/
    height: 44px;
    -webkit-transition: top 0.4s ease;
    transition: top 0.4s ease; }
    header .nav-group .nav-line {
      width: 1px;
      height: 44px;
      display: block;
      background: #61616F !important;
      float: right;
      margin: 0 15px !important; }
  header .menu-setting,
  header .menu-setting-2 {
    display: none;
    float: right;
    padding: 10px 0;
    margin: 0; }
    header .menu-setting a,
    header .menu-setting-2 a {
      display: inline-block; }
  header .register {
    display: inline-flex;
    align-items: center;
    float: right;
    padding: 0 !important;
    margin: 0;
    font-size: 20px; }
    header .register .icon-user {
      font-size: 20px;
      color: #fff;
      margin-right: 12px; }
    header .register .divider {
      display: inline-block;
      width: 1px;
      height: 44px;
      background-color: #61616F;
      margin: 0 15px !important;
      opacity: 0.5; }
    header .register a {
      font-family: "db_heaventmed", san-serif;
      font-size: 22px;
      line-height: 28px;
      letter-spacing: 0.25px; }
  header .hd-search {
    float: right;
    padding: 10px 0 !important; }
    @media only screen and (min-width: 1024px) and (max-width: 1370px) {
      header .hd-search {
        margin-right: 0px; } }
    header .hd-search a .icon-search {
      font-size: 18px; }
  header .btn-noti {
    float: right;
    padding: 10px 5px !important;
    margin: 0 !important;
    position: relative; }
    @media (max-width: 1055px) {
      header .btn-noti {
        margin: 0 !important;
        padding: 10px 0 !important; } }
    header .btn-noti > a {
      width: 19px;
      height: 22px;
      background: url("/static/images/icon/bell.svg") 0 0 no-repeat;
      display: inline-block;
      background-position: center; }
    header .btn-noti .noti-detail {
      width: 320px;
      background: #121212;
      position: absolute;
      right: 0;
      z-index: 7;
      border-radius: 5px;
      overflow: hidden;
      display: none;
      -webkit-box-shadow: 0px 0px 7px 0px rgba(18, 18, 18, 0.75);
      -moz-box-shadow: 0px 0px 7px 0px rgba(18, 18, 18, 0.75);
      box-shadow: 0px 0px 7px 0px rgba(18, 18, 18, 0.75); }
      header .btn-noti .noti-detail .head {
        padding: 12px 20px;
        overflow: hidden;
        background: #2A2A2A;
        border-radius: 5px; }
        header .btn-noti .noti-detail .head h3 {
          font-family: "db_heaventregular", san-serif;
          font-weight: normal;
          color: #fff;
          font-size: 24px;
          line-height: 1;
          display: inline-block;
          float: left; }
        header .btn-noti .noti-detail .head .btn-setnoti {
          margin: 4px 0 0 25px; }
        header .btn-noti .noti-detail .head a {
          font-family: "db_heaventregular", san-serif;
          font-weight: normal;
          color: #fff;
          font-size: 16px;
          line-height: 1;
          float: right;
          margin: 4px 0 0; }
        header .btn-noti .noti-detail .head a:hover {
          color: #0076ff;
          text-decoration: underline; }
      header .btn-noti .noti-detail .noti-list {
        padding: 20px;
        height: 350px;
        overflow-y: scroll;
        position: relative; }
        header .btn-noti .noti-detail .noti-list > p {
          color: #fff;
          font-family: "db_heaventmed", san-serif;
          font-weight: normal;
          font-size: 16px;
          width: 100%;
          text-align: center;
          position: absolute;
          left: 0;
          top: 43%;
          right: 0; }
        header .btn-noti .noti-detail .noti-list ul li {
          padding: 10px 0;
          margin: 0;
          overflow: hidden;
          border-bottom: 1px solid #707070; }
          header .btn-noti .noti-detail .noti-list ul li > a {
            overflow: hidden;
            display: flex; }
            header .btn-noti .noti-detail .noti-list ul li > a img {
              width: 80px;
              height: 80px;
              float: left;
              margin: 0 15px 0 0; }
            header .btn-noti .noti-detail .noti-list ul li > a div {
              float: left;
              padding: 12px 0 0;
              width: 180px;
              overflow: hidden; }
              header .btn-noti .noti-detail .noti-list ul li > a div > * {
                padding-left: 16px; }
              header .btn-noti .noti-detail .noti-list ul li > a div p.highlight {
                font-family: "db_heaventmed", san-serif;
                font-weight: normal;
                line-height: 1;
                font-size: 16px;
                color: #0076FF;
                margin: 0 0 5px; }
              header .btn-noti .noti-detail .noti-list ul li > a div h2 {
                font-family: "db_heaventmed", san-serif;
                font-weight: normal;
                line-height: 1;
                font-size: 16px;
                color: #fff;
                margin: 0 0 5px; }
                header .btn-noti .noti-detail .noti-list ul li > a div h2 span:first-child {
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  max-width: 120px;
                  float: left;
                  margin: 0 5px 0 0; }
              header .btn-noti .noti-detail .noti-list ul li > a div h2.title span {
                max-width: 100%;
                float: none;
                display: block;
                white-space: unset;
                margin: 0; }
              header .btn-noti .noti-detail .noti-list ul li > a div p:last-child {
                font-family: "db_heaventregular", san-serif;
                font-weight: normal;
                line-height: 1;
                font-size: 12px;
                color: #9B9B9B; }
        header .btn-noti .noti-detail .noti-list ul li:hover {
          cursor: pointer; }
          header .btn-noti .noti-detail .noti-list ul li:hover > a div h2 {
            color: #0076ff; }
        header .btn-noti .noti-detail .noti-list ul li:last-child {
          border-bottom: 0;
          padding: 10px 0 0;
          margin: 0; }
        header .btn-noti .noti-detail .noti-list ul li.active > a div h2 {
          position: relative; }
        header .btn-noti .noti-detail .noti-list ul li.active > a div h2:before {
          content: '';
          width: 8px;
          height: 8px;
          display: inline-block;
          background: #0076FF;
          position: absolute;
          left: 0;
          top: 3px;
          border-radius: 100%; }
  header .btn-noti.noticontent > a {
    position: relative;
    display: inline-block;
    background: url("/static/images/icon/bell-notification.svg") 0 0 no-repeat; }
  header .btn-noti.active .noti-detail {
    display: block; }
  header .btn-noti.active > a {
    position: relative;
    display: inline-block;
    width: 19px;
    height: 22px;
    /*background: url('/static/images/icon/icon-noti-hover.svg') 0 0 no-repeat; background-size: 100%;*/ }
    header .btn-noti.active > a img {
      display: none; }
  header .ch-app-dl {
    float: right;
    position: relative;
    padding: 12px 0;
    /*>a:after { content:''; width: 10px; height: 14px; background: url('/static/images/icon/icon-arrow-down.svg') 0 0 no-repeat; background-size: 100%; display: inline-block; position: absolute; right: -4.6px; top: 0;-webkit-transition: top 0.4s ease; transition: top 0.4s ease;}*/ }
    @media only screen and (min-width: 1024px) and (max-width: 1370px) {
      header .ch-app-dl {
        margin-right: 0px; } }
    header .ch-app-dl > a {
      position: relative;
      display: flex !important;
      align-items: center; }
      header .ch-app-dl > a span {
        font-family: "db_heaventmed", san-serif;
        font-size: 20px !important;
        color: #ffffff; }
      header .ch-app-dl > a span:last-child {
        display: none; }
      header .ch-app-dl > a .icon-mobile {
        font-size: 14px !important; }
    header .ch-app-dl .dropdown {
      visibility: hidden;
      opacity: 0;
      position: absolute;
      transition: all 0.4s ease;
      left: -30px;
      top: 50px;
      width: 190px;
      background: #fff;
      border-radius: 0;
      padding: 20px 25px;
      box-sizing: border-box;
      text-align: center; }
      header .ch-app-dl .dropdown img {
        width: 90%;
        height: auto;
        display: block;
        margin: 10px auto; }
      header .ch-app-dl .dropdown p {
        color: #0076ff;
        font-family: "db_heaventmed", san-serif;
        font-weight: normal;
        font-size: 22px;
        font-weight: normal;
        line-height: 1; }
        header .ch-app-dl .dropdown p span {
          display: block; }
      header .ch-app-dl .dropdown a {
        color: #3B3B3B;
        font-family: "db_heaventregular", san-serif;
        font-weight: normal;
        font-size: 16px;
        font-weight: normal;
        text-decoration: none; }
      header .ch-app-dl .dropdown a:hover {
        text-decoration: underline; }
    header .ch-app-dl .dropdown:hover {
      visibility: visible;
      opacity: 1; }
  header .ch-app-dl:hover {
    /*>a:after { content:''; width: 10px; height: 14px; background: url('/static/images/icon/icon-arrow-down-active.svg') 0 0 no-repeat; background-size: 100%; display: inline-block; position: absolute; right: -4.6px; top: 7px;-webkit-transition: top 0.4s ease; transition: top 0.4s ease;}*/ }
    header .ch-app-dl:hover .dropdown {
      visibility: visible;
      opacity: 1;
      display: block; }

.wrapall.active {
  opacity: 0; }

body header .logo {
  top: 10px;
  -webkit-transition: top 0.4s ease;
  transition: top 0.4s ease; }
  body header .logo a img {
    height: 44px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease; }

body .nav-group .menu-setting a span,
body .nav-group .menu-setting-2 a span {
  display: inline-block;
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1); }
  body .nav-group .menu-setting a span.menu-1,
  body .nav-group .menu-setting-2 a span.menu-1 {
    font-size: 24px;
    opacity: 1;
    -webkit-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease; }
  body .nav-group .menu-setting a span.menu-2,
  body .nav-group .menu-setting-2 a span.menu-2 {
    font-size: 20px;
    display: none;
    opacity: 0;
    -webkit-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease; }

body .nav-detail {
  margin-top: 150px;
  display: inline-block;
  display: none;
  width: 100%;
  height: 70vh; }
  body .nav-detail > ul {
    width: 60%;
    float: left;
    padding: 30px 0 0; }
    body .nav-detail > ul > li {
      width: 25%;
      float: left; }
      body .nav-detail > ul > li h3 {
        font-family: "db_heaventmed", san-serif;
        color: #fff;
        font-weight: normal;
        font-size: 22px;
        line-height: 1;
        margin: 0 0 15px; }
        body .nav-detail > ul > li h3 a {
          color: #fff;
          cursor: default; }
          body .nav-detail > ul > li h3 a img {
            display: none; }
      body .nav-detail > ul > li h3.tvlive a:after {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 8px;
        background: #FD0012;
        display: inline-block;
        margin: 7px 0 0 5px;
        vertical-align: top; }
      body .nav-detail > ul > li h3.tvlive a {
        cursor: pointer; }
      body .nav-detail > ul > li ul li {
        padding: 0 0 10px 10px; }
        body .nav-detail > ul > li ul li a {
          font-family: "db_heaventregular", san-serif;
          font-weight: normal;
          font-size: 20px;
          line-height: 1;
          color: #9B9B9B; }
        body .nav-detail > ul > li ul li a:hover {
          text-decoration: underline;
          color: #0076FF; }
      body .nav-detail > ul > li ul li:last-child {
        padding: 0 0 0 10px; }
  body .nav-detail .user-set {
    width: 40%;
    float: right;
    height: 100%;
    position: relative; }
    body .nav-detail .user-set .user-profile {
      /*width: 315px;*/
      width: auto;
      float: right; }
      body .nav-detail .user-set .user-profile > img {
        width: 98px;
        height: 98px;
        float: left;
        margin: 0 30px 0 0;
        border-radius: 10px;
        border-radius: 100%;
        border: 1px solid #fff; }
      body .nav-detail .user-set .user-profile > div {
        float: left;
        position: relative;
        /*width: 185px;*/
        width: auto; }
        body .nav-detail .user-set .user-profile > div p {
          font-family: "db_heaventmed", san-serif;
          font-size: 22px;
          cursor: pointer;
          color: #fff;
          /*width: 140px;*/
          line-height: 1;
          display: inline-block;
          position: relative;
          padding: 25px 0 0;
          width: auto; }
          body .nav-detail .user-set .user-profile > div p span {
            display: inline-block; }
            body .nav-detail .user-set .user-profile > div p span img {
              width: 18px;
              height: auto;
              float: left;
              margin-right: 5px;
              padding: 1px 0 0; }
          body .nav-detail .user-set .user-profile > div p span:first-child {
            margin: 0 0 3px;
            white-space: nowrap;
            max-width: 140px;
            overflow: hidden;
            text-overflow: ellipsis; }
          body .nav-detail .user-set .user-profile > div p span:last-child {
            font-size: 20px;
            font-family: "db_heaventlight", san-serif;
            font-weight: normal;
            display: block;
            clear: both; }
        body .nav-detail .user-set .user-profile > div > a {
          font-family: "db_heaventmed", san-serif;
          font-weight: normal;
          color: #9B9B9B;
          font-size: 14px;
          border: 1px solid #9B9B9B;
          padding: 3px 5px;
          border-radius: 5px;
          display: inline-block;
          /*position: absolute; right: 0; bottom: 0;*/
          margin: 0 0 0 5px;
          -webkit-transition: all 0.4s ease;
          transition: all 0.4s ease; }
        body .nav-detail .user-set .user-profile > div > a:hover {
          background: #2F31D9;
          color: #fff;
          border: 1px solid #2F31D9;
          -webkit-transition: all 0.4s ease;
          transition: all 0.4s ease; }
    body .nav-detail .user-set > ul {
      clear: both;
      text-align: right;
      padding: 20px 0 0; }
      body .nav-detail .user-set > ul li {
        margin: 0 0 20px; }
        body .nav-detail .user-set > ul li a {
          font-family: "db_heaventmed", san-serif;
          font-weight: normal;
          color: #9B9B9B;
          font-size: 48px;
          line-height: 1; }
        body .nav-detail .user-set > ul li .underline {
          position: relative; }
        body .nav-detail .user-set > ul li a:hover {
          color: #3526D9; }
        body .nav-detail .user-set > ul li .underline:before {
          content: '';
          display: block;
          position: absolute;
          right: 0;
          bottom: 0;
          height: 5px;
          width: 0;
          transition: width 0s ease, background .5s ease; }
        body .nav-detail .user-set > ul li .underline:after {
          content: '';
          display: block;
          position: absolute;
          right: 0;
          bottom: 0;
          height: 5px;
          width: 0;
          background: #3526D9;
          transition: width .5s ease; }
        body .nav-detail .user-set > ul li .underline:hover:before {
          width: 100%;
          background: #3526D9;
          transition: width .5s ease; }
        body .nav-detail .user-set > ul li .underline:hover:after {
          width: 100%;
          background: transparent;
          transition: all 0s ease; }
      body .nav-detail .user-set > ul li:last-child {
        margin: 0; }
    body .nav-detail .user-set .logout {
      position: absolute;
      right: 0;
      bottom: 0;
      padding: 0 0 5px;
      display: none; }
      body .nav-detail .user-set .logout a {
        color: #3F3F3F;
        font-family: "db_heaventmed", san-serif;
        font-weight: normal;
        font-size: 36px;
        line-height: 1; }
      body .nav-detail .user-set .logout a:hover {
        color: #ff0000; }
      body .nav-detail .user-set .logout .underline {
        position: relative; }
      body .nav-detail .user-set .logout .underline:before {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        height: 5px;
        width: 0;
        transition: width 0s ease, background .5s ease; }
      body .nav-detail .user-set .logout .underline:after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        height: 5px;
        width: 0;
        background: #ff0000;
        transition: width .5s ease; }
      body .nav-detail .user-set .logout .underline:hover:before {
        width: 100%;
        background: #ff0000;
        transition: width .5s ease; }
      body .nav-detail .user-set .logout .underline:hover:after {
        width: 100%;
        background: transparent;
        transition: all 0s ease; }

body .nav-detail:after {
  content: '';
  width: 1px;
  height: 90%;
  background: #525252;
  display: block;
  position: absolute;
  left: 60%;
  top: 5%; }

body.menu-active-set {
  overflow: hidden; }
  body.menu-active-set header {
    width: 100%;
    height: 100%;
    -webkit-transition: unset;
    transition: unset; }
    body.menu-active-set header > div:after {
      opacity: 0; }
    body.menu-active-set header .logo {
      top: 42px;
      -webkit-transition: top 0.4s ease;
      transition: top 0.4s ease; }
      body.menu-active-set header .logo a img {
        height: 80px;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease; }
    body.menu-active-set header .nav-detail .user-set .logout {
      position: absolute;
      right: 0;
      bottom: 0;
      color: #3F3F3F;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal;
      font-size: 48px;
      line-height: 1;
      display: block;
      display: inline-block; }
  body.menu-active-set nav {
    display: none; }
  body.menu-active-set .nav-group .menu-setting a span.menu-1,
  body.menu-active-set .nav-group .menu-setting-2 a span.menu-1 {
    display: none;
    opacity: 0;
    -webkit-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease; }
  body.menu-active-set .nav-group .menu-setting a span.menu-2,
  body.menu-active-set .nav-group .menu-setting-2 a span.menu-2 {
    display: inline-block;
    opacity: 1;
    -webkit-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease; }
  body.menu-active-set .nav-group .register {
    display: none; }
  body.menu-active-set .nav-group .nav-line {
    display: none; }
  body.menu-active-set .nav-group .hd-search {
    display: none; }
  body.menu-active-set .nav-group .btn-noti {
    display: none; }
  body.menu-active-set .nav-group .ic-profile {
    display: none; }
  body.menu-active-set .nav-group .ch-app-dl {
    display: none; }
  body.menu-active-set .nav-detail {
    display: inline-block; }

header:before {
  content: "";
  width: 100%;
  height: 64px;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
  background: #00040D;
  /*background: -moz-linear-gradient(top, #191919 0%, transparent 100%); background: -webkit-linear-gradient(top, #191919 0%, transparent 100%); background: linear-gradient(to bottom, #191919 0%, transparent 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );*/
  z-index: 0;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease; }

body.w-detect .check-browser {
  width: 100%;
  height: 60px;
  text-align: center;
  background: #0076ff;
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 0 40px;
  box-sizing: border-box;
  max-width: inherit; }
  body.w-detect .check-browser p {
    color: #ffffff;
    font-family: "db_heaventmed", san-serif;
    font-size: 24px;
    line-height: 29px;
    padding: 16px 0 15px;
    position: relative;
    margin: 0 auto;
    max-width: 1280px; }
    body.w-detect .check-browser p img {
      vertical-align: top;
      margin: 0 12px 0 0; }
    body.w-detect .check-browser p a.close {
      position: absolute;
      right: 0;
      top: 20px; }

body.w-detect .check-browser:after {
  display: none; }

body.w-detect header {
  top: 60px; }

body.w-detect .wrapall {
  margin-top: 60px; }

body.maintenance-bar-detect .alert-MA {
  width: 100%;
  height: 60px;
  text-align: center;
  background: #0076ff;
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 0 40px;
  box-sizing: border-box;
  max-width: inherit; }
  body.maintenance-bar-detect .alert-MA p {
    color: #ffffff;
    font-family: "db_heaventmed", san-serif;
    font-size: 24px;
    line-height: 29px;
    padding: 16px 0 15px;
    position: relative;
    margin: 0 auto;
    max-width: 1280px; }
    body.maintenance-bar-detect .alert-MA p img {
      vertical-align: top;
      margin: 0 12px 0 0; }
    body.maintenance-bar-detect .alert-MA p a.close {
      position: absolute;
      right: 0;
      top: 20px; }

body.maintenance-bar-detect .alert-MA:after {
  display: none; }

body.maintenance-bar-detect header {
  top: 60px; }

body.maintenance-bar-detect .wrapall {
  margin-top: 60px; }

body.maintenance-bar-detect.video-content-now .wrapall {
  margin-top: 120px; }

body.maintenance-bar-detect.schedule .wrapall {
  margin-top: 160px; }

@media screen and (min-width: 1200px) {
  .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content {
    /*a { margin-right: 2.5% !important;}*/ }
    .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
    .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
    .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
    .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
    .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
    .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child {
      margin: 0 !important; } }

@media screen and (min-width: 1200px) {
  body.sub-cat header:before {
    height: 64px; }
  body.sub-cat header::after {
    content: '';
    width: 100%;
    height: 48px;
    display: inline-block;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background-color: #666; }
  body.sub-cat.series-cat header::after {
    background-color: #B91A20; }
  body.sub-cat.tvshow-cat header::after {
    background-color: #02D97F; }
  body.sub-cat.tvshow-cat header .dropdown-content > a,
  body.sub-cat.tvshow-cat header .dropdown-content > p {
    color: #00040D !important; }
  body.sub-cat.tvshow-cat header .dropdown-content p:after {
    background-color: #00040D !important; }
  body.sub-cat.news-cat header::after {
    background-color: #1A46D3; } }

@media screen and (min-width: 1200px) and (max-width: 1299px) {
  body.sub-cat.news-cat .navigation .item-dropdown .dropdown .dropdown-content a {
    margin-right: 20px; } }

@media screen and (min-width: 1200px) and (max-width: 1099px) {
  body.sub-cat.news-cat .navigation .item-dropdown .dropdown .dropdown-content a {
    margin-right: 12px; } }

@media screen and (min-width: 1200px) {
  body.sub-cat.fandom-cat header::after {
    background-color: #533FCD; }
  body.sub-cat.music-cat header::after {
    background-color: #FFD007; }
  body.sub-cat.music-cat header .dropdown-content > a,
  body.sub-cat.music-cat header .dropdown-content > p {
    color: #00040D !important; }
  body.sub-cat.music-cat header .dropdown-content p:after {
    background-color: #00040D !important; }
  body.sub-cat.special-cat header::after {
    background-color: #533FCD; }
  body.sub-cat.special-cat header .dropdown-content > a,
  body.sub-cat.special-cat header .dropdown-content > p {
    color: #F2F6FD !important; }
  body.sub-cat.special-cat header .dropdown-content p:after {
    background-color: #F2F6FD !important; } }

@media screen and (min-width: 1200px) {
  .category.sub-cat .navigation .item-dropdown .dropdown,
  .news-hp.sub-cat .navigation .item-dropdown .dropdown,
  .news-category.sub-cat .navigation .item-dropdown .dropdown,
  .lakorn.sub-cat .navigation .item-dropdown .dropdown,
  .news-video.sub-cat .navigation .item-dropdown .dropdown,
  .music-hp.sub-cat .navigation .item-dropdown .dropdown,
  .fandom-hp.sub-cat .navigation .item-dropdown .dropdown {
    display: inline-block; }
    .category.sub-cat .navigation .item-dropdown .dropdown .dropbtn,
    .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropbtn,
    .news-category.sub-cat .navigation .item-dropdown .dropdown .dropbtn,
    .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropbtn,
    .news-video.sub-cat .navigation .item-dropdown .dropdown .dropbtn,
    .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropbtn,
    .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropbtn {
      display: none; }
    .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
    .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
    .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
    .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
    .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
    .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
    .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content {
      position: absolute;
      top: 64px;
      width: 100%;
      max-width: 1280px;
      left: 0;
      margin: 0 auto;
      /*border-bottom: 1px solid #ffffff40;*/
      padding: 0;
      -webkit-transition: top 0.4s ease;
      transition: top 0.4s ease;
      min-width: 111.2%;
      height: 48px;
      display: flex;
      align-items: center; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p {
        font-family: "db_heaventmed", san-serif;
        font-size: 20px;
        line-height: 120%;
        letter-spacing: 0.25px;
        padding-right: 24px;
        margin-right: 24px;
        color: #F2F6FD;
        position: relative; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after {
        content: '';
        width: 1px;
        height: 28px;
        background-color: #F2F6FD;
        opacity: 30%;
        display: inline-block;
        position: absolute;
        top: -2px;
        right: 0; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a {
        float: left;
        margin-right: 32px;
        font-size: 18px;
        line-height: 24px;
        font-family: "db_heaventregular", san-serif;
        letter-spacing: 0.25px;
        -webkit-transition: opacity 0.4s ease;
        transition: opacity 0.4s ease;
        color: #F2F6FD;
        opacity: 70%; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active {
        -webkit-transition: opacity 0.4s ease;
        transition: opacity 0.4s ease;
        opacity: 100%;
        font-family: "db_heaventmed", san-serif; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover {
        -webkit-transition: opacity 0.4s ease;
        transition: opacity 0.4s ease;
        opacity: 100%; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child {
        margin-right: 0; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide {
        display: none; }
  .category.sub-cat .sp-banner,
  .news-hp.sub-cat .sp-banner,
  .news-category.sub-cat .sp-banner,
  .lakorn.sub-cat .sp-banner,
  .news-video.sub-cat .sp-banner,
  .music-hp.sub-cat .sp-banner,
  .fandom-hp.sub-cat .sp-banner {
    padding-top: 145px; }
  .category.sub-cat.series-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .category.sub-cat.series-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .category.sub-cat.series-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .category.sub-cat.series-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .category.sub-cat.series-cat .item-dropdown.item-special .dropdown .dropdown-content {
    display: none; }
  .category.sub-cat.tvshow-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .category.sub-cat.tvshow-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .category.sub-cat.tvshow-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .category.sub-cat.tvshow-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .category.sub-cat.tvshow-cat .item-dropdown.item-special .dropdown .dropdown-content {
    display: none; }
  .music-hp.sub-cat.music-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .music-hp.sub-cat.music-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .music-hp.sub-cat.music-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .music-hp.sub-cat.music-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .music-hp.sub-cat.music-cat .item-dropdown.item-special .dropdown .dropdown-content,
  .category.sub-cat.music-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .category.sub-cat.music-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .category.sub-cat.music-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .category.sub-cat.music-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .category.sub-cat.music-cat .item-dropdown.item-special .dropdown .dropdown-content {
    display: none; }
  .news-hp.sub-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .news-hp.sub-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .news-hp.sub-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .news-hp.sub-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .news-hp.sub-cat .item-dropdown.item-special .dropdown .dropdown-content,
  .news-category.sub-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .news-category.sub-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .news-category.sub-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .news-category.sub-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .news-category.sub-cat .item-dropdown.item-special .dropdown .dropdown-content,
  .lakorn.sub-cat.news-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .lakorn.sub-cat.news-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .lakorn.sub-cat.news-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .lakorn.sub-cat.news-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .lakorn.sub-cat.news-cat .item-dropdown.item-special .dropdown .dropdown-content,
  .news-video.sub-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .news-video.sub-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .news-video.sub-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .news-video.sub-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .news-video.sub-cat .item-dropdown.item-special .dropdown .dropdown-content,
  .category.sub-cat.news-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .category.sub-cat.news-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .category.sub-cat.news-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .category.sub-cat.news-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .category.sub-cat.news-cat .item-dropdown.item-special .dropdown .dropdown-content {
    display: none; }
  .fandom-hp.sub-cat.fandom-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .fandom-hp.sub-cat.fandom-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .fandom-hp.sub-cat.fandom-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .fandom-hp.sub-cat.fandom-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .fandom-hp.sub-cat.special-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .fandom-hp.sub-cat.special-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .fandom-hp.sub-cat.special-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .fandom-hp.sub-cat.special-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .category.sub-cat.fandom-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .category.sub-cat.fandom-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .category.sub-cat.fandom-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .category.sub-cat.fandom-cat .item-dropdown.item-music .dropdown .dropdown-content {
    display: none; }
  .category.sub-cat.special-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .category.sub-cat.special-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .category.sub-cat.special-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .category.sub-cat.special-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .category.sub-cat.special-cat .item-dropdown.item-music .dropdown .dropdown-content {
    display: none; } }

@media screen and (max-width: 1199px) {
  .category.sub-cat header:before,
  .news-hp.sub-cat header:before,
  .news-category.sub-cat header:before,
  .lakorn.sub-cat header:before,
  .news-video.sub-cat header:before,
  .music-hp.sub-cat header:before {
    height: 50px; }
  .category.sub-cat .sp-banner,
  .news-hp.sub-cat .sp-banner,
  .news-category.sub-cat .sp-banner,
  .lakorn.sub-cat .sp-banner,
  .news-video.sub-cat .sp-banner,
  .music-hp.sub-cat .sp-banner {
    padding-top: 50px; } }

@media screen and (max-width: 1199px) {
  .dropdown .dropbtn {
    color: #fff;
    text-decoration: none;
    display: inline-block;
    position: relative;
    font-size: 22px;
    font-family: db_heaventmed, san-serif;
    letter-spacing: 0.5px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    line-height: 26px;
    min-width: 200px;
    padding: 15px 0 5px;
    margin: 0;
    width: 100%; }
    .dropdown .dropbtn img {
      float: right;
      margin-top: 8px;
      transition: all 0.25s ease-in; }
  .dropdown .dropdown-content {
    width: 80%;
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden; }
    .dropdown .dropdown-content a {
      margin: 0;
      padding: 10px 12px 10px 0;
      border-bottom: 0.6px solid rgba(216, 216, 216, 0.4);
      width: 100%;
      clear: both;
      display: block;
      font-size: 18px; }
    .dropdown .dropdown-content a:first-child {
      padding: 0 12px 10px 0; }
    .dropdown .dropdown-content a:last-child {
      border-bottom: 0; }
  .dropdown.active .dropbtn img {
    transform: rotate(-180deg);
    transition: all 0.25s ease-in; }
  .dropdown.active .dropdown-content {
    max-height: 800px;
    transition: max-height 0.25s ease-in; } }

/*large screen*/
@media only screen and (min-width: 1200px) {
  header nav ul {
    margin-left: 70px; }
  .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content {
    min-width: unset; } }

/*small & large together screen*/
@media only screen and (min-width: 1200px) {
  header .btn-noti.active .noti-detail {
    height: auto !important; }
    header .btn-noti.active .noti-detail .noti-list {
      height: 350px !important; } }

/*medium screen ex.ipad navigation when exceed*/
/*for iPad pro*/
@media only screen and (max-width: 1199px) {
  body .wrapall > div {
    padding-top: 50px; } }

/*mobile screen (max: 1023) and iPad pro (size: 1024)*/
@media only screen and (max-width: 1199px) {
  body header {
    height: 50px;
    width: 100%;
    padding: 0; }
    body header > div {
      width: 100%;
      margin: 0 auto;
      display: inline-block; }
      body header > div .logo {
        left: calc(50% - 26px);
        top: 7px;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease; }
        body header > div .logo a img {
          height: 36px;
          width: auto;
          -webkit-transition: all 0.4s ease;
          transition: all 0.4s ease; }
    body header > div:after {
      width: 94%;
      margin: 0 3%; }
    body header nav {
      position: relative;
      width: 100%;
      display: none; }
      body header nav .main-nav {
        width: 20px;
        height: 20px;
        display: block;
        float: left;
        margin-left: 1%;
        background: url(/static/images/ico-nav.svg) no-repeat -141px -310px;
        margin: 20px 0 0 3%; }
        body header nav .main-nav span {
          display: block;
          text-indent: -9999px; }
      body header nav ul {
        width: 30%;
        max-width: 320px;
        min-width: 270px;
        height: 97vh;
        border-radius: 0;
        background: #191919;
        position: absolute;
        left: -300vw;
        top: 0;
        padding-top: 30px;
        z-index: 6;
        overflow: auto;
        transition: left 0.2s; }
        body header nav ul li {
          width: 225px;
          margin: 0 auto;
          text-align: left;
          margin: 0 0 0 20px;
          border-bottom: 0.6px solid rgba(216, 216, 216, 0.4); }
          body header nav ul li a:hover {
            border: none; }
        body header nav ul a {
          line-height: 26px;
          min-width: 200px;
          padding: 15px 0 10px;
          margin: 0; }
          body header nav ul a span:before {
            float: left;
            margin-right: 20px;
            height: 25px;
            background-size: 420px; }
        body header nav ul li:nth-of-type(2) a span:before {
          background-position: 2px -77px; }
        body header nav ul li:nth-of-type(3) a span:before {
          background-position: -1px -165px;
          width: 50px;
          margin-right: -4px; }
        body header nav ul li:nth-of-type(4) a span:before {
          background-position: 1px -248px;
          width: 26px; }
        body header nav ul li:nth-of-type(5) a span:before {
          background-position: -109px -1px; }
        body header nav ul li:nth-of-type(6) a span:before {
          background-position: -107px -473px;
          width: 26px; }
        body header nav ul li:nth-of-type(7) a span:before {
          background-position: 2px -543px;
          width: 26px; }
        body header nav ul li:nth-of-type(8) a span:before {
          background-position: -109px -77px; }
        body header nav ul li:nth-of-type(9) a span:before {
          background-position: -109px -165px;
          width: 25px; }
        body header nav ul li.mobile {
          display: block;
          border-top: 1px solid #fff;
          opacity: 0.5;
          margin: 40px auto;
          padding: 40px 0; }
          body header nav ul li.mobile a {
            margin: 0;
            padding: 0; }
        body header nav ul li.active a {
          border-bottom: none; }
        body header nav ul li.item-dropdown > a {
          display: none; }
        body header nav ul li.item-dropdown .dropdown {
          display: inline-block; }
        body header nav ul li:last-child {
          margin-bottom: 150px; }
    body header .member {
      right: 35px; }
      body header .member a {
        background: url(/static/images/ico-nav.svg) no-repeat -499px 0 !important; }
    body header .member.invalid a {
      background-position: -395px 0 !important; }
    body header .member.valid a {
      background: none; }
      body header .member.valid a img {
        width: 26px;
        margin-top: 0; }
    body header .nav-group {
      /*top: 9px; right: 3%;*/
      margin: 9px 3% 0 3%;
      position: unset; }
      body header .nav-group .menu-setting,
      body header .nav-group .menu-setting-2 {
        display: block;
        padding: 5px 0;
        margin-left: 10px; }
      body header .nav-group .register {
        padding: 5px 0;
        margin: 0 10px;
        display: none; }
      body header .nav-group .hd-search {
        float: left;
        padding: 5px 0;
        margin: 0;
        transition: float 0.4s ease; }
        body header .nav-group .hd-search > a {
          display: inline-block; }
      body header .nav-group .btn-noti {
        padding: 5px 0 !important;
        margin-left: 10px !important; }
      body header .nav-group .btn-noti.active {
        position: unset; }
        body header .nav-group .btn-noti.active .noti-detail {
          width: 100%;
          top: 50px;
          left: 0;
          right: 0;
          height: 83vh; }
      body header .nav-group .nav-line {
        margin: 0 5px;
        height: 34px;
        background: #ffffff80; }
      body header .nav-group .nav-line {
        display: none; }
      body header .nav-group .ic-profile {
        width: auto; }
        body header .nav-group .ic-profile > a img {
          width: 31px; }
        body header .nav-group .ic-profile .profile-dropdown {
          display: none; }
      body header .nav-group .ic-profile {
        display: none; }
      body header .nav-group .ch-app-dl {
        display: none; }
    body header .nav-detail:after {
      display: none; }
    body header .nav-detail .user-set {
      width: 100%;
      float: none;
      height: auto;
      padding: 0 0 25px; }
      body header .nav-detail .user-set .user-profile {
        width: 300px;
        margin: 0 auto;
        float: none;
        display: block;
        overflow: hidden;
        padding: 20px 0;
        text-align: center; }
        body header .nav-detail .user-set .user-profile > img {
          width: 58px;
          height: 58px;
          margin: 0 10px 0 0;
          float: none;
          display: inline-block;
          vertical-align: text-bottom; }
        body header .nav-detail .user-set .user-profile > div {
          width: 230px;
          float: none;
          display: inline; }
          body header .nav-detail .user-set .user-profile > div p {
            font-size: 24px;
            padding: 0; }
          body header .nav-detail .user-set .user-profile > div > a {
            bottom: 15px;
            background: #2F31D9;
            color: #fff;
            border: 1px solid #2F31D9; }
      body header .nav-detail .user-set > ul {
        width: 100%;
        text-align: center; }
        body header .nav-detail .user-set > ul li a {
          font-size: 36px;
          line-height: 1;
          color: #9B9B9B; }
        body header .nav-detail .user-set > ul li:last-child {
          margin: 0 0 15px; }
    body header .nav-detail > ul {
      width: 90%;
      float: none;
      border-top: 1px solid #9B9B9B;
      padding: 25px 0 0;
      margin: 0 auto;
      overflow: hidden; }
      body header .nav-detail > ul > li {
        width: 100%;
        clear: both; }
        body header .nav-detail > ul > li h3 {
          text-align: center;
          font-size: 24px; }
          body header .nav-detail > ul > li h3 a {
            cursor: pointer; }
            body header .nav-detail > ul > li h3 a img {
              display: inline-block;
              transition: all 0.25s ease-in; }
        body header .nav-detail > ul > li ul {
          margin: 0 auto;
          max-height: 0;
          transition: max-height 0.15s ease-out;
          overflow: hidden; }
          body header .nav-detail > ul > li ul li {
            text-align: left;
            margin: 0 0 15px -30px;
            padding: 0 0 0 50%; }
          body header .nav-detail > ul > li ul li:last-child {
            margin: 0 0 15px -30px;
            padding: 0 0 0 50%; }
      body header .nav-detail > ul > li.active h3 a img {
        transform: rotate(-180deg);
        transition: all 0.25s ease-in; }
      body header .nav-detail > ul > li.active ul {
        max-height: 1000px;
        transition: max-height 0.25s ease-in;
        margin-top: 0; }
  body header:before {
    height: 50px; }
  body.menu-active-set header > div {
    max-height: 1000px;
    overflow-y: scroll;
    height: 100%; }
    body.menu-active-set header > div .logo {
      top: 42px;
      left: 50%;
      margin: 0 0 0 -58px;
      -webkit-transition: all 0.4s ease;
      transition: all 0.4s ease; }
      body.menu-active-set header > div .logo a img {
        width: 116px;
        height: auto;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease; }
  body.menu-active-set header .nav-detail .user-set .logout {
    position: static;
    width: 100%;
    text-align: center;
    padding: 20px 0 0;
    padding: 5px 0 0;
    font-size: unset; }
    body.menu-active-set header .nav-detail .user-set .logout a {
      font-size: 28px;
      line-height: 1;
      color: #3F3F3F; }
  /*menu active mobile*/
  body.menu-active {
    overflow: hidden; }
    body.menu-active .main-nav {
      position: relative;
      z-index: 7;
      width: 250px;
      padding: 15px 0 10px;
      transition: all 0.2s;
      background-image: none;
      background-color: #191919;
      margin: 0; }
      body.menu-active .main-nav span {
        background: url(/static/images/ico-nav.svg) no-repeat -331px -296px;
        width: 14px;
        height: 14px;
        float: right; }
    body.menu-active ul {
      left: 0;
      transition: left 0.2s; }
    body.menu-active nav:after {
      content: '';
      display: block;
      width: 100%;
      height: 100vh;
      background: #000;
      z-index: 2;
      opacity: 0.8; }
    body.menu-active header .logo {
      z-index: 2; }
    body.menu-active #button.show {
      opacity: 0; }
  /*footer mobile*/
  footer {
    width: 100%;
    text-align: center;
    border-radius: 5px 5px 0 0;
    margin: 50px 0 0;
    padding: 40px 1% 10px;
    box-size: border-box; }
    footer p {
      padding: 0 3% 3px;
      line-height: 25px; }
    footer .footer-secondary p,
    footer .footer-secondary ul {
      width: 100%;
      text-align: left;
      padding: 0 0 10px; }
    footer .footer-secondary ul li {
      display: block;
      padding: 10px 0; }
    footer .footer-secondary:before {
      width: 88%;
      left: 2%; }
  body.noti-active {
    overflow: hidden; }
    body.noti-active header:before {
      opacity: 1;
      background: rgba(25, 25, 25, 0.9);
      -webkit-transition: unset;
      transition: unset; }
    body.noti-active .btn-noti .noti-detail .noti-list {
      height: 100%; }
      body.noti-active .btn-noti .noti-detail .noti-list ul li > a div {
        width: 63%; }
        body.noti-active .btn-noti .noti-detail .noti-list ul li > a div h2 span:first-child {
          max-width: 85%; }
        body.noti-active .btn-noti .noti-detail .noti-list ul li > a div h2.title span:first-child {
          max-width: 100%;
          margin-right: 0; }
  body.w-detect .check-browser {
    padding: 0 2%; }
  body.maintenance-bar-detect .alert-MA {
    padding: 0 2%; }
  body.maintenance-bar-detect.video-content-now .wrapall {
    margin-top: 105px; }
  body.maintenance-bar-detect.video-content-now header:before {
    top: 60px; }
  body.maintenance-bar-detect.schedule .wrapall {
    margin-top: 145px; }
  body.maintenance-bar-detect.schedule header:before {
    top: 60px; } }

/*mobile screen */
@media only screen and (max-width: 767px) {
  body header nav ul {
    height: 96.5vh; }
  body header .nav-group .ic-profile {
    display: none; }
  body .ui.modals.dimmer.transition.visible.active {
    padding-left: 0;
    padding-right: 0; }
  body.w-detect .check-browser {
    text-align: left;
    height: 72px;
    top: -72px; }
    body.w-detect .check-browser p {
      font-size: 16px;
      line-height: 19px;
      display: inline-block;
      padding: 19px 0 15px; }
      body.w-detect .check-browser p > img {
        float: left;
        margin: 5px 10px 0 2px; }
      body.w-detect .check-browser p span {
        float: left;
        width: 75%; }
      body.w-detect .check-browser p a img {
        margin: 6px 12px 0 0; }
  body.w-detect header {
    top: 72px; }
  body.w-detect .wrapall {
    margin-top: 72px; } }

/*mobile screen */
@media only screen and (max-width: 1023px) and (min-width: 576px) {
  body.maintenance-bar-detect .alert-MA p {
    font-size: 20px; } }

@media only screen and (max-width: 576px) {
  body.noti-active .btn-noti .noti-detail .noti-list ul li > a div {
    width: 70%; }
    body.noti-active .btn-noti .noti-detail .noti-list ul li > a div h2 span:first-child {
      max-width: 82%;
      margin-right: 3px; } }

/*mobile screen */
@media only screen and (max-width: 360px) {
  body.noti-active .btn-noti .noti-detail .noti-list ul li > a div {
    width: 65%; }
    body.noti-active .btn-noti .noti-detail .noti-list ul li > a div h2 span:first-child {
      max-width: 76%;
      margin-right: 3px; } }

@media only screen and (max-width: 320px) {
  body.maintenance-bar-detect .alert-MA p {
    padding: 10px 0 5px; }
    body.maintenance-bar-detect .alert-MA p > img {
      margin: 15px 10px 0 2px; } }

@-webkit-keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.5); }
  20% {
    -webkit-transform: scaleY(1); } }

@keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5); }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1); } }

body.animating.in.dimmable, body.dimmed.dimmable {
  overflow: hidden !important; }

.blocker {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 13 !important;
  padding: 20px;
  box-sizing: border-box;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center; }

.blocker:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.05em; }

.blocker.behind {
  background-color: transparent; }

.modal {
  display: none;
  vertical-align: middle;
  position: relative;
  z-index: 2;
  max-width: 500px;
  box-sizing: border-box;
  width: 90%;
  background: #121212;
  padding: 50px 30px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 10px #000;
  -moz-box-shadow: 0 0 10px #000;
  -o-box-shadow: 0 0 10px #000;
  -ms-box-shadow: 0 0 10px #000;
  box-shadow: 0 0 10px #000;
  text-align: left;
  color: #fff; }
  .modal .logo {
    display: block;
    margin: 0 auto 25px; }
  .modal h3 {
    text-align: center;
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    font-weight: normal;
    font-size: 36px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin: 0 0 10px; }
  .modal > p {
    text-align: center;
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    font-size: 26px;
    line-height: 1.2;
    color: #9B9B9B;
    margin: 0 0 10px; }
  .modal > p.text-w {
    color: #ffffff;
    margin: 0; }
    .modal > p.text-w a {
      color: #0076FF;
      text-decoration: underline; }
    .modal > p.text-w a:hover {
      text-decoration: none; }
  .modal > p.text-s {
    font-size: 20px;
    line-height: 28px;
    margin: 0; }
  .modal > p.highlight {
    color: #0076FF; }
  .modal > a.btn {
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    max-width: 214px;
    padding: 20.5px 0;
    clear: both;
    display: block;
    margin: 15px auto 0;
    text-align: center;
    background: #0F62FE;
    font-size: 24px;
    border-radius: 5px; }
  .modal h4 {
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    font-size: 48px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 10px; }
    .modal h4 a {
      color: #0076FF;
      text-decoration: underline; }
    .modal h4 a:hover {
      text-decoration: none; }
  .modal a.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    display: block;
    width: 19px;
    height: 19px;
    text-indent: -9999px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("/static/images/icon-close.svg"); }
  .modal a.btn-login {
    display: block;
    margin: 0 auto 10px;
    width: 348px;
    height: 55px;
    border-radius: 10px;
    cursor: pointer;
    text-align: left; }
    .modal a.btn-login img {
      margin: 7px 0;
      float: none; }
    .modal a.btn-login span {
      float: none;
      font-size: 29px;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal;
      margin: 16px 16px 0;
      width: auto;
      margin-right: 0;
      display: inline-block; }
  .modal a.log-Facebook {
    background-color: #3077E9; }
    .modal a.log-Facebook img {
      width: 20px;
      height: auto;
      display: inline-block;
      vertical-align: middle;
      padding-left: 60px;
      margin-top: -1px; }
    .modal a.log-Facebook span {
      margin: 18px 7px 0; }
  .modal a.log-Google {
    background-color: #ffffff;
    color: #707070; }
    .modal a.log-Google img {
      width: 18px;
      height: auto;
      display: inline-block;
      vertical-align: middle;
      padding-left: 60px;
      margin-top: 0; }
    .modal a.log-Google span {
      margin: 18px 7px 0; }
  .modal a.log-Line {
    background-color: #01B901; }
    .modal a.log-Line img {
      width: 24px;
      height: auto;
      display: inline-block;
      vertical-align: middle;
      padding-left: 58px;
      margin-top: 0; }
    .modal a.log-Line span {
      margin: 18px 2px 0; }
  .modal a.log-Apple {
    border-radius: 0;
    overflow: hidden; }
    .modal a.log-Apple img {
      margin: 0;
      width: 100%; }
  .modal .modal-toggle {
    margin: 20px auto 0;
    width: 346px; }
    .modal .modal-toggle .toggle-navigation {
      width: 100%;
      position: relative;
      clear: both;
      margin: 20px 0;
      overflow: hidden;
      border-top: 1px solid #ffffff;
      padding-top: 20px; }
      .modal .modal-toggle .toggle-navigation > li {
        width: 50%;
        display: inline-block;
        float: left;
        text-align: center;
        color: #9B9B9B;
        font-size: 24px;
        font-family: "db_heaventmed", san-serif;
        font-weight: normal;
        cursor: pointer; }
        .modal .modal-toggle .toggle-navigation > li a {
          color: #9B9B9B; }
      .modal .modal-toggle .toggle-navigation .tab1 {
        width: 45%; }
      .modal .modal-toggle .toggle-navigation .tab2 {
        width: 55%; }
    .modal .modal-toggle .toggle-navigation:before {
      content: "|";
      position: absolute;
      left: 44%;
      top: 20px;
      font-size: 30px; }
    .modal .modal-toggle .toggle-detail {
      clear: both;
      width: 100%; }
      .modal .modal-toggle .toggle-detail > li {
        display: none;
        width: 100%;
        overflow: hidden; }
      .modal .modal-toggle .toggle-detail > li.active {
        display: block; }
  .modal .headline {
    position: relative;
    font-size: 24px;
    margin: 0 0 20px; }
    .modal .headline span {
      background: #121212;
      padding: 0 15px; }
  .modal .headline:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #ffffff;
    position: absolute;
    top: 50%;
    z-index: -1; }
  .modal .text-captcha {
    margin: 20px auto 0;
    color: #9B9B9B;
    font-size: 16px;
    text-align: center;
    width: 70%; }
    .modal .text-captcha a {
      color: #9B9B9B;
      text-decoration: underline; }
    .modal .text-captcha a:hover {
      text-decoration: none; }
  .modal .modal-toggle.error h3.headline {
    margin: 0; }
  .modal .modal-toggle.error > span {
    color: #ff0000;
    width: 100%;
    display: inline-block;
    text-align: center; }
    .modal .modal-toggle.error > span a {
      text-decoration: underline;
      color: #ff0000; }
    .modal .modal-toggle.error > span a:hover {
      text-decoration: none; }
  .modal .checkbox.error label {
    color: #fff; }
  .modal .checkbox.error span {
    text-align: center;
    display: block; }
  .modal p.barOr {
    position: relative;
    width: 348px;
    font-family: "db_heaventmed", san-serif;
    margin: 28px auto;
    color: #fff; }
    .modal p.barOr span {
      background: #121212;
      position: relative;
      padding: 0 20px; }
  .modal p.barOr:before {
    content: '';
    height: 1px;
    width: 100%;
    background: #fff;
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 1px); }

.modal-standardBox {
  display: block;
  vertical-align: middle;
  position: relative;
  z-index: 2;
  max-width: 500px;
  box-sizing: border-box;
  width: 90%;
  background: #121212;
  padding: 50px 30px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 10px #000;
  -moz-box-shadow: 0 0 10px #000;
  -o-box-shadow: 0 0 10px #000;
  -ms-box-shadow: 0 0 10px #000;
  box-shadow: 0 0 10px #000;
  text-align: left;
  color: #fff;
  margin: 0 auto; }
  .modal-standardBox .logo {
    display: block;
    margin: 0 auto 25px; }
  .modal-standardBox h3 {
    text-align: center;
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    font-weight: normal;
    font-size: 36px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin: 0 0 10px; }
  .modal-standardBox > p {
    text-align: center;
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    font-size: 26px;
    line-height: 1.2;
    color: #9B9B9B;
    margin: 0 0 10px; }
  .modal-standardBox > p.text-w {
    color: #ffffff;
    margin: 0; }
    .modal-standardBox > p.text-w a {
      color: #0076FF;
      text-decoration: underline; }
    .modal-standardBox > p.text-w a:hover {
      text-decoration: none; }
  .modal-standardBox > p.text-s {
    font-size: 20px;
    line-height: 28px;
    margin: 0; }
  .modal-standardBox > p.highlight {
    color: #0076FF; }
  .modal-standardBox > a.btn {
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    max-width: 214px;
    padding: 20.5px 0;
    clear: both;
    display: block;
    margin: 15px auto 0;
    text-align: center;
    background: #0F62FE;
    font-size: 24px;
    border-radius: 5px; }
  .modal-standardBox h4 {
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    font-size: 48px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 10px; }
    .modal-standardBox h4 a {
      color: #0076FF;
      text-decoration: underline; }
    .modal-standardBox h4 a:hover {
      text-decoration: none; }
  .modal-standardBox a.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    display: block;
    width: 19px;
    height: 19px;
    text-indent: -9999px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("/static/images/icon-close.svg"); }
  .modal-standardBox a.btn-login {
    display: block;
    margin: 0 auto 10px;
    width: 348px;
    height: 55px;
    border-radius: 10px;
    cursor: pointer;
    text-align: left; }
    .modal-standardBox a.btn-login img {
      margin: 7px 0;
      float: none; }
    .modal-standardBox a.btn-login span {
      float: none;
      font-size: 29px;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal;
      margin: 16px 16px 0;
      width: auto;
      margin-right: 0;
      display: inline-block; }
  .modal-standardBox a.log-Facebook {
    background-color: #3077E9; }
    .modal-standardBox a.log-Facebook img {
      width: 20px;
      height: auto;
      display: inline-block;
      vertical-align: middle;
      padding-left: 60px;
      margin-top: -1px; }
    .modal-standardBox a.log-Facebook span {
      margin: 18px 7px 0; }
  .modal-standardBox a.log-Google {
    background-color: #ffffff;
    color: #707070; }
    .modal-standardBox a.log-Google img {
      width: 18px;
      height: auto;
      display: inline-block;
      vertical-align: middle;
      padding-left: 60px;
      margin-top: 0; }
    .modal-standardBox a.log-Google span {
      margin: 18px 7px 0; }
  .modal-standardBox a.log-Line {
    background-color: #01B901; }
    .modal-standardBox a.log-Line img {
      width: 24px;
      height: auto;
      display: inline-block;
      vertical-align: middle;
      padding-left: 58px;
      margin-top: 0; }
    .modal-standardBox a.log-Line span {
      margin: 18px 2px 0; }
  .modal-standardBox a.log-Apple {
    border-radius: 0;
    overflow: hidden; }
    .modal-standardBox a.log-Apple img {
      margin: 0;
      width: 100%; }
  .modal-standardBox .modal-toggle {
    margin: 20px auto 0;
    width: 346px; }
    .modal-standardBox .modal-toggle .toggle-navigation {
      width: 100%;
      position: relative;
      clear: both;
      margin: 20px 0;
      overflow: hidden;
      border-top: 1px solid #ffffff;
      padding-top: 20px; }
      .modal-standardBox .modal-toggle .toggle-navigation > li {
        width: 50%;
        display: inline-block;
        float: left;
        text-align: center;
        color: #9B9B9B;
        font-size: 24px;
        font-family: "db_heaventmed", san-serif;
        font-weight: normal;
        cursor: pointer; }
        .modal-standardBox .modal-toggle .toggle-navigation > li a {
          color: #9B9B9B; }
      .modal-standardBox .modal-toggle .toggle-navigation .tab1 {
        width: 45%; }
      .modal-standardBox .modal-toggle .toggle-navigation .tab2 {
        width: 55%; }
    .modal-standardBox .modal-toggle .toggle-navigation:before {
      content: "|";
      position: absolute;
      left: 44%;
      top: 20px;
      font-size: 30px; }
    .modal-standardBox .modal-toggle .toggle-detail {
      clear: both;
      width: 100%; }
      .modal-standardBox .modal-toggle .toggle-detail > li {
        display: none;
        width: 100%;
        overflow: hidden; }
      .modal-standardBox .modal-toggle .toggle-detail > li.active {
        display: block; }
  .modal-standardBox .headline {
    position: relative;
    font-size: 24px;
    margin: 0 0 20px; }
    .modal-standardBox .headline span {
      background: #121212;
      padding: 0 15px; }
  .modal-standardBox .headline:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #ffffff;
    position: absolute;
    top: 50%;
    z-index: -1; }
  .modal-standardBox .text-captcha {
    margin: 20px auto 0;
    color: #9B9B9B;
    font-size: 16px;
    text-align: center;
    width: 70%; }
    .modal-standardBox .text-captcha a {
      color: #9B9B9B;
      text-decoration: underline; }
    .modal-standardBox .text-captcha a:hover {
      text-decoration: none; }
  .modal-standardBox .modal-toggle.error h3.headline {
    margin: 0; }
  .modal-standardBox .modal-toggle.error > span {
    color: #ff0000;
    width: 100%;
    display: inline-block;
    text-align: center; }
    .modal-standardBox .modal-toggle.error > span a {
      text-decoration: underline;
      color: #ff0000; }
    .modal-standardBox .modal-toggle.error > span a:hover {
      text-decoration: none; }
  .modal-standardBox .checkbox.error label {
    color: #fff; }
  .modal-standardBox .checkbox.error span {
    text-align: center;
    display: block; }
  .modal-standardBox p.barOr {
    position: relative;
    width: 348px;
    font-family: "db_heaventmed", san-serif;
    margin: 28px auto;
    color: #fff; }
    .modal-standardBox p.barOr span {
      background: #121212;
      position: relative;
      padding: 0 20px; }
  .modal-standardBox p.barOr:before {
    content: '';
    height: 1px;
    width: 100%;
    background: #fff;
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 1px); }

.modal-spinner {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  padding: 12px 16px;
  border-radius: 5px;
  background-color: #111;
  height: 20px; }
  .modal-spinner > div {
    border-radius: 100px;
    background-color: #fff;
    height: 20px;
    width: 2px;
    margin: 0 1px;
    display: inline-block;
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out; }
  .modal-spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s; }
  .modal-spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s; }
  .modal-spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s; }

form {
  margin: 20px 0; }
  form fieldset {
    border: none; }
    form fieldset ul {
      width: 86%;
      margin: 0 auto;
      overflow: hidden; }
      form fieldset ul li {
        clear: both;
        width: 100%;
        overflow: hidden;
        margin: 0 0 24px; }
        form fieldset ul li label {
          width: 100%;
          color: #9B9B9B;
          font-size: 24px;
          font-family: "db_heaventmed", san-serif;
          font-weight: normal; }
        form fieldset ul li input[type="text"],
        form fieldset ul li input[type="password"] {
          border: none;
          border-bottom: 1px solid #9B9B9B;
          display: block;
          background: none;
          width: 96%;
          color: #fff;
          padding: 0 2%;
          font-size: 24px;
          font-family: "db_heaventmed", san-serif;
          font-weight: normal; }
        form fieldset ul li input[type="password"]:-ms-input-placeholder {
          font-family: "db_heaventregular", san-serif;
          font-size: 14px; }
        form fieldset ul li input[type="password"]::-webkit-input-placeholder {
          font-family: "db_heaventregular", san-serif;
          font-size: 14px; }
        form fieldset ul li input[type="password"]:-moz-placeholder {
          font-family: "db_heaventregular", san-serif;
          font-size: 14px; }
        form fieldset ul li input[type="password"]::-moz-placeholder {
          font-family: "db_heaventregular", san-serif;
          font-size: 14px; }
        form fieldset ul li input[disabled] {
          background: #9b9b9b;
          color: #fff; }
      form fieldset ul li.checkbox {
        margin: 0 0 15px; }
        form fieldset ul li.checkbox p {
          margin-bottom: 15px;
          color: #9B9B9B;
          font-size: 16px;
          font-family: "db_heaventregular", san-serif;
          line-height: 1; }
          form fieldset ul li.checkbox p a {
            color: #0076FF;
            text-decoration: underline; }
          form fieldset ul li.checkbox p a:hover {
            text-decoration: none; }
          form fieldset ul li.checkbox p a:first-of-type {
            display: inline-block; }
        form fieldset ul li.checkbox label {
          font-size: 15px;
          color: #fff;
          float: left;
          width: auto; }
          form fieldset ul li.checkbox label input[type="checkbox"] {
            border-radius: 0;
            margin-right: 8px; }
          form fieldset ul li.checkbox label a {
            color: #0076FF;
            text-decoration: underline; }
          form fieldset ul li.checkbox label a:hover {
            text-decoration: none; }
        form fieldset ul li.checkbox > a {
          float: left;
          color: #0076FF;
          text-decoration: none;
          font-size: 24px;
          line-height: 28px; }
        form fieldset ul li.checkbox > a:hover {
          text-decoration: none; }
        form fieldset ul li.checkbox > a:last-child {
          float: right; }
      form fieldset ul li.focus label {
        color: #ffffff; }
      form fieldset ul li.focus input[type="text"] {
        /*border-bottom: 1px solid #fff;*/ }
      form fieldset ul li.error label {
        color: #ff0000; }
      form fieldset ul li.error span {
        color: #ff0000; }
      form fieldset ul li.error input[type="text"], form fieldset ul li.error input[type="password"] {
        /*border-bottom: 1px solid #ff0000;*/ }
      form fieldset ul li.error .ant-calendar-picker.ant-calendar-picker-large > div {
        border-bottom: 1px solid #ff0000; }
      form fieldset ul li.eye > div {
        position: relative; }
        form fieldset ul li.eye > div input[type="text"], form fieldset ul li.eye > div input[type="password"] {
          padding: 0 10% 0 2%;
          width: 88%; }
        form fieldset ul li.eye > div p {
          position: absolute;
          top: 5px;
          right: 0;
          cursor: pointer;
          width: 20px;
          height: 14px;
          background: url("/static/images/eye-slash.svg") 0 0 no-repeat;
          text-indent: -9999px; }
      form fieldset ul li.eye > div.active {
        position: relative; }
        form fieldset ul li.eye > div.active p {
          background-image: url("/static/images/eye.svg");
          background-position: 1px 0; }
      form fieldset ul li.DateOfBirth .ant-calendar-picker.ant-calendar-picker-large > div {
        border-bottom: 1px solid #9B9B9B; }
        form fieldset ul li.DateOfBirth .ant-calendar-picker.ant-calendar-picker-large > div > input {
          border-bottom: none;
          width: 96%;
          color: #fff;
          padding: 0 2%;
          font-size: 24px;
          font-family: "db_heaventmed", san-serif;
          font-weight: normal; }
      form fieldset ul li .box {
        margin: 4px 0 0;
        clear: both;
        display: block; }
        form fieldset ul li .box div.radio {
          width: 33%;
          float: left; }
    form fieldset input[type="submit"], form fieldset button[type="submit"] {
      width: 100%;
      background: #0F62FE;
      border-radius: 3px;
      border: none;
      color: #fff;
      font-size: 22px;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal;
      padding: 13px 0px;
      cursor: pointer; }

.tem2 form fieldset ul {
  min-height: auto;
  margin: 0 auto 20px; }

.tem2 form fieldset input[type="submit"], .tem2 form fieldset button[type="submit"] {
  max-width: 214px;
  display: block;
  margin: 0 auto; }

.tem2 > div {
  text-align: center;
  margin: 0; }
  .tem2 > div p {
    font-size: 26px;
    color: #9B9B9B;
    line-height: 1;
    font-family: "db_heaventlight", san-serif; }
    .tem2 > div p span {
      color: #0076FF;
      font-size: 24px; }
  .tem2 > div p:last-child span {
    color: #ffffff;
    font-size: 30px; }
  .tem2 > div .btn-group {
    padding: 35px 0 0; }
    .tem2 > div .btn-group a {
      text-align: center;
      max-width: 191px;
      width: 46%;
      margin-right: 4%;
      display: inline-block;
      padding: 9.5px 0px;
      border-radius: 3px;
      font-size: 22px;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal; }
      .tem2 > div .btn-group a:hover {
        text-decoration: none; }
    .tem2 > div .btn-group a:last-child {
      margin-right: 0; }
    .tem2 > div .btn-group a.cancel {
      background: #4A4A4A; }
    .tem2 > div .btn-group a.agree {
      background: #0F62FE; }
  .tem2 > div > a {
    background: #0F62FE;
    text-align: center;
    max-width: 191px;
    width: 46%;
    display: inline-block;
    padding: 10.5px 0px;
    border-radius: 3px;
    font-size: 22px;
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    margin-top: 35px; }

.form-group {
  display: block;
  margin-bottom: 15px; }

.form-group input {
  padding: 0;
  /*display: none;*/
  height: initial;
  width: initial;
  display: inline-block;
  opacity: 0;
  margin-bottom: 0;
  cursor: pointer;
  position: absolute; }

.form-group label {
  position: relative;
  cursor: pointer; }

.form-group label:before {
  content: '';
  -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 7px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 5px;
  border-radius: 3px;
  background: #514E4E;
  margin-top: 0; }

.form-group input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 1px;
  left: 5px;
  width: 4px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg); }

.register .form-group input:checked + label:after {
  top: 4px; }

.accept-box {
  width: 348px;
  margin: 15px auto 0;
  text-align: left; }
  .accept-box a {
    color: #0076FF;
    text-decoration: underline; }
  .accept-box a:hover {
    text-decoration: none; }

.accept-box.error span {
  color: #ff0000;
  display: inline-block;
  clear: both;
  text-align: center; }

/* The container */
.container-checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

/* Hide the browser's default checkbox */
.container-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer; }

/* Create a custom checkbox */
.container-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 19px;
  width: 19px;
  border: 1px solid #191919;
  border-radius: 4px;
  background-color: #f2f2f2; }

/* On mouse-over, add a grey background color */
.container-checkbox:hover input ~ .checkmark {
  background-color: #f2f2f2; }

/* When the checkbox is checked, add a blue background */
.container-checkbox input:checked ~ .checkmark {
  background-color: #2196F3; }

/* Create the checkmark/indicator (hidden when not checked) */
.container-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none; }

/* Show the checkmark when checked */
.container-checkbox input:checked ~ .checkmark:after {
  display: block; }

/* Style the checkmark/indicator */
.container-checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }

.form-check {
  margin: 12px 40px; }
  .form-check .checkmark-box {
    text-align: left;
    font-family: "db_heaventmed", san-serif;
    font-size: 20px;
    line-height: 16px;
    background: #D8DBE2;
    padding: 14px 18px;
    margin-bottom: 30px; }
  .form-check .container-checkbox {
    font-family: "db_heaventmed", san-serif;
    font-size: 20px;
    line-height: 16px;
    color: #191919;
    padding-top: 3px;
    padding-left: 36px;
    margin-bottom: 0; }
    .form-check .container-checkbox a {
      color: #0076ff;
      text-decoration: underline; }
    .form-check .container-checkbox .checkmark {
      width: 20px;
      height: 20px;
      border-radius: 4px; }
    .form-check .container-checkbox .checkmark:after {
      left: 7px;
      top: 2px;
      border-width: 0 1.5px 1.5px 0; }
    .form-check .container-checkbox input:checked ~ .checkmark {
      background-color: #1f40d9;
      border: 1px solid #1f40d9; }
  .form-check button[type="button"] {
    font-family: "db_heaventregular", san-serif;
    font-size: 24px;
    line-height: 28px;
    width: 320px;
    text-align: center;
    background: #1f40d9;
    padding: 10px 0;
    color: #fff;
    border-radius: 4px;
    cursor: pointer; }
  .form-check button[type="button"]:disabled {
    background-color: #9b9b9b;
    cursor: default; }
  .form-check .not-agree {
    background: none !important; }

.form-check fieldset:disabled .container-checkbox {
  cursor: default;
  color: #9b9b9b; }
  .form-check fieldset:disabled .container-checkbox .checkmark {
    border: 1px solid #9b9b9b; }

.form-check fieldset:disabled button[type="button"] {
  background: #9b9b9b;
  cursor: default; }

.form-check.form-policy .checkmark-box {
  text-align: center;
  margin-bottom: 24px; }

.form-check.form-policy button[type="button"] {
  display: block;
  margin: 0 auto; }

.form-check.form-policy button[type="button"].not-agree {
  margin-top: 24px;
  width: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #7B7E85; }

.profile .modal {
  max-width: 300px; }
  .profile .modal h3 {
    margin: 0; }
  .profile .modal form.edit fieldset ul {
    width: 100%;
    margin: 0; }
    .profile .modal form.edit fieldset ul li {
      margin-bottom: 20px; }
    .profile .modal form.edit fieldset ul li.gender input {
      margin-left: 3px; }
    .profile .modal form.edit fieldset ul li.gender label {
      margin-right: 10px;
      font-size: 20px;
      color: #fff; }
  .profile .modal form.edit fieldset a {
    color: #fff;
    background: #9A9999;
    width: 48%;
    display: inline-block;
    text-align: center;
    padding: 10px 0;
    font-size: 22px;
    font-family: "db_heaventmed", san-serif;
    border-radius: 3px;
    float: left; }
  .profile .modal form.edit fieldset input[type="submit"], .profile .modal form.edit fieldset button[type="submit"] {
    width: 48%;
    padding: 8px 0px;
    float: right; }

.profile .modal.tem2 {
  max-width: 500px; }

.profile #delete-acc.tem2 h3 {
  margin: 0 0 5px; }

.profile #delete-acc.tem2 > div p {
  font-size: 18px;
  color: #fff;
  margin: 0 0 10px;
  font-family: "db_heaventregular", san-serif; }
  .profile #delete-acc.tem2 > div p span {
    font-size: 18px;
    color: #fff; }

.profile #delete-acc.tem2 > div p.btn-group {
  padding: 10px 0 0; }

.profile #delete-acc.tem2 > div p.btn-group.has-active-subscription {
  padding: 20px 0 10px; }

.modal.modal-login {
  padding: 80px 30px; }
  .modal.modal-login > h3 {
    font-size: 32px;
    line-height: 18px;
    margin: 0 0 32px;
    letter-spacing: 0; }
  .modal.modal-login p.regis {
    font-family: "db_heaventregular", san-serif;
    font-size: 20px;
    line-height: 18px;
    color: #fff; }
    .modal.modal-login p.regis a {
      color: #0076ff;
      margin: 0 0 0 20px; }
  .modal.modal-login p.captcha {
    font-family: "db_heaventregular", san-serif;
    color: #9b9b9b;
    font-size: 18px;
    line-height: 24px;
    width: 284px;
    margin: 140px auto 0; }
    .modal.modal-login p.captcha span {
      display: block; }
      .modal.modal-login p.captcha span a {
        color: #9b9b9b;
        text-decoration: underline; }

.modal-center.term-condition {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 12;
  padding: 20px;
  box-sizing: border-box;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center; }
  .modal-center.term-condition .detail {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 960px;
    background: #fff;
    padding: 40px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    -o-box-shadow: 0 0 10px #000;
    -ms-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    text-align: center;
    color: #191919;
    height: calc(100vh - 40px); }
    .modal-center.term-condition .detail > h3 {
      font-size: 32px;
      line-height: 32px;
      margin: 0 0 24px;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal; }
      .modal-center.term-condition .detail > h3 span {
        display: block; }
    .modal-center.term-condition .detail .content {
      height: calc(83vh - 367px);
      overflow-y: scroll;
      padding: 0 94px;
      margin: 0 auto;
      text-align: left;
      overflow-x: hidden;
      width: calc(100% - 188px); }
      .modal-center.term-condition .detail .content .policy h2 {
        text-indent: 0; }
      .modal-center.term-condition .detail .content .policy h4 {
        font-weight: normal; }
      .modal-center.term-condition .detail .content .policy p {
        text-indent: 0; }
    .modal-center.term-condition .detail .content.contentHeight {
      height: calc(83vh - 280px); }
    .modal-center.term-condition .detail .pdpaStep {
      width: calc(100% - 188px);
      margin: 0 auto 24px;
      display: flex;
      position: relative; }
      .modal-center.term-condition .detail .pdpaStep > p {
        width: 50%;
        text-align: center;
        flex: 0 0 50%;
        font-family: "db_heaventmed", san-serif;
        font-weight: normal;
        font-size: 24px;
        color: #7B7E85;
        margin: 0; }
        .modal-center.term-condition .detail .pdpaStep > p span {
          display: block; }
        .modal-center.term-condition .detail .pdpaStep > p span.check {
          width: 18px;
          height: 18px;
          border: 2px solid #7B7E85;
          border-radius: 100%;
          display: inline-block;
          position: relative;
          background-color: #fff;
          padding: 7px;
          margin-top: 8px;
          box-sizing: unset; }
        .modal-center.term-condition .detail .pdpaStep > p span.check:after {
          content: '';
          width: 18px;
          height: 18px;
          display: inline-block;
          background-color: #7B7E85;
          border-radius: 100%; }
    .modal-center.term-condition .detail .pdpaStep.first > p:first-child {
      color: #0F62FE; }
      .modal-center.term-condition .detail .pdpaStep.first > p:first-child span.check {
        border: 2px solid #0F62FE; }
      .modal-center.term-condition .detail .pdpaStep.first > p:first-child span.check:after {
        background-color: #0F62FE; }
    .modal-center.term-condition .detail .pdpaStep.second > p:last-child {
      color: #0F62FE; }
      .modal-center.term-condition .detail .pdpaStep.second > p:last-child span.check {
        border: 2px solid #0F62FE; }
      .modal-center.term-condition .detail .pdpaStep.second > p:last-child span.check:after {
        background-color: #0F62FE; }
    .modal-center.term-condition .detail .pdpaStep:after {
      content: '';
      height: 2px;
      width: 50%;
      background-color: #7B7E85;
      display: block;
      position: absolute;
      bottom: 17px;
      left: 25%;
      z-index: -1; }
    .modal-center.term-condition .detail .pdpaStep.second:after {
      background-color: #0F62FE; }
    .modal-center.term-condition .detail .form-check {
      padding: 0; }
      .modal-center.term-condition .detail .form-check fieldset {
        padding: .35em .75em .625em; }
      .modal-center.term-condition .detail .form-check .checkmark-box {
        background-color: #0F62FE;
        border-radius: 12px;
        color: #fff; }
      .modal-center.term-condition .detail .form-check .container-checkbox {
        color: #fff;
        font-size: 16px; }
        .modal-center.term-condition .detail .form-check .container-checkbox a {
          color: #fff; }
        .modal-center.term-condition .detail .form-check .container-checkbox .checkmark {
          border: 1px solid #fff;
          background-color: #0F62FE;
          box-sizing: unset; }
        .modal-center.term-condition .detail .form-check .container-checkbox input:checked ~ .checkmark {
          background-color: #fff;
          border: 1px solid #fff; }
        .modal-center.term-condition .detail .form-check .container-checkbox .checkmark:after {
          border: solid #0F62FE;
          border-width: 0 2px 2px 0; }
      .modal-center.term-condition .detail .form-check button[type="button"] {
        background-color: #0F62FE; }
      .modal-center.term-condition .detail .form-check button[type="button"]:disabled {
        background-color: #9b9b9b;
        cursor: default; }
      .modal-center.term-condition .detail .form-check .not-agree {
        background: none; }

.scroll-style-3::-webkit-scrollbar-track {
  -webkit-box-shadow: unset;
  border-radius: 10px;
  background-color: #fff; }

.scroll-style-3::-webkit-scrollbar {
  width: 5px;
  background-color: #fff; }

.scroll-style-3::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: unset;
  background-color: #707070; }

.scroll-style-3 {
  scrollbar-color: #0F62FE #ffffff;
  scrollbar-width: thin; }

.scroll-style-3::-webkit-scrollbar {
  width: 8px;
  height: 80px; }

.scroll-style-3::-webkit-scrollbar-button {
  width: 0px;
  height: 0px; }

.scroll-style-3::-webkit-scrollbar-thumb {
  background: #0F62FE;
  border-radius: 0px; }

.scroll-style-3::-webkit-scrollbar-thumb:hover {
  background: #0F62FE; }

.scroll-style-3::-webkit-scrollbar-thumb:active {
  background: #0F62FE; }

.scroll-style-3::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 0px; }

.scroll-style-3::-webkit-scrollbar-track:hover {
  background: #ffffff; }

.scroll-style-3::-webkit-scrollbar-track:active {
  background: #ffffff; }

.scroll-style-3::-webkit-scrollbar-corner {
  background: transparent; }

/* start tutorial*/
.modal-center.tutorial-pdpa {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 8;
  padding: 20px;
  box-sizing: border-box;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center; }
  .modal-center.tutorial-pdpa .detail {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 960px;
    background: #fff;
    padding: 40px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    -o-box-shadow: 0 0 10px #000;
    -ms-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    text-align: center;
    color: #191919;
    height: calc(100vh - 40px); }
    .modal-center.tutorial-pdpa .detail img {
      height: 45vh;
      max-height: 480px; }
    .modal-center.tutorial-pdpa .detail h3 {
      font-family: 'db_heaventmed', san-serif;
      font-weight: normal;
      color: #191919;
      font-size: 44px;
      line-height: 0.5;
      letter-spacing: 0.8px;
      margin: 20px 0; }
    .modal-center.tutorial-pdpa .detail p {
      font-family: 'db_heaventregular';
      font-weight: normal;
      color: #191919;
      font-size: 24px;
      line-height: 1.5;
      letter-spacing: 0.44px;
      width: 600px;
      margin: 0 auto;
      text-align: left;
      display: inline-block; }
      .modal-center.tutorial-pdpa .detail p span {
        font-size: 28px; }
    .modal-center.tutorial-pdpa .detail p:last-of-type {
      margin: 0; }
    .modal-center.tutorial-pdpa .detail > a {
      position: absolute;
      right: 10px;
      top: 10px;
      display: block; }
      .modal-center.tutorial-pdpa .detail > a img {
        margin: 0;
        width: 15px;
        height: auto; }
    .modal-center.tutorial-pdpa .detail ul {
      padding: 0 0 0 30px;
      width: 600px;
      margin: 0 auto;
      display: inline-block; }
      .modal-center.tutorial-pdpa .detail ul li {
        list-style: disc outside;
        text-align: left;
        font-size: 24px;
        line-height: 1.5;
        letter-spacing: 0.44px; }
    .modal-center.tutorial-pdpa .detail .btn-step {
      position: absolute;
      bottom: 40px;
      left: 0;
      right: 0; }
      .modal-center.tutorial-pdpa .detail .btn-step a {
        display: block;
        font-size: 24px;
        line-height: 27px;
        text-align: center;
        font-family: 'db_heaventregular';
        width: 296px;
        padding: 10.5px 0;
        margin: 0 auto 20px;
        border-radius: 4px; }
      .modal-center.tutorial-pdpa .detail .btn-step a.next {
        background: #1f40d9; }
      .modal-center.tutorial-pdpa .detail .btn-step a.previous {
        color: #9b9b9b; }
      .modal-center.tutorial-pdpa .detail .btn-step p {
        width: auto;
        text-align: center;
        height: auto;
        line-height: normal;
        margin-top: 20px; }
        .modal-center.tutorial-pdpa .detail .btn-step p span {
          background: #bfbfbf;
          width: 12px;
          height: 12px;
          margin-right: 16px;
          border-radius: 100%;
          display: inline-block; }
        .modal-center.tutorial-pdpa .detail .btn-step p span.active {
          background: #1f40d9; }
        .modal-center.tutorial-pdpa .detail .btn-step p span:last-child {
          margin: 0; }
    .modal-center.tutorial-pdpa .detail .cont {
      position: absolute;
      left: 0;
      right: 0;
      top: 50vh; }

.modal-center.tutorial-pdpa:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.05em; }

@media screen and (min-width: 1024px) and (max-height: 979px) {
  .modal-center.tutorial-pdpa .detail img {
    height: 35vh; }
  .modal-center.tutorial-pdpa .detail .cont {
    top: 43vh; } }

@media screen and (min-width: 1024px) and (max-height: 859px) {
  .modal-center.tutorial-pdpa .detail .btn-step {
    bottom: 20px; }
    .modal-center.tutorial-pdpa .detail .btn-step p {
      margin: 0; } }

/* react semantic ui */
.ui.modal {
  max-width: 500px;
  width: 90%;
  background: none;
  margin: 0;
  padding: 0; }
  .ui.modal .wrap-md {
    width: 100%;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    background: #121212;
    padding: 30px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    -o-box-shadow: 0 0 10px #000;
    -ms-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    text-align: center;
    color: #fff; }
    .ui.modal .wrap-md h3 {
      text-align: center;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal;
      font-size: 36px;
      letter-spacing: 0.5px;
      line-height: 1.2;
      margin: 0 0 10px; }
    .ui.modal .wrap-md > div p {
      font-size: 26px;
      color: #9B9B9B;
      line-height: 1; }
    .ui.modal .wrap-md > div .btn-group {
      padding: 35px 0 0; }
      .ui.modal .wrap-md > div .btn-group a {
        text-align: center;
        max-width: 191px;
        width: 46%;
        margin-right: 4%;
        display: inline-block;
        padding: 9.5px 0px;
        border-radius: 3px;
        font-size: 22px;
        font-family: "db_heaventmed", san-serif;
        font-weight: normal; }
      .ui.modal .wrap-md > div .btn-group a.agree {
        background: #0F62FE; }
      .ui.modal .wrap-md > div .btn-group a.cancel {
        background: #4A4A4A; }
      .ui.modal .wrap-md > div .btn-group a:last-child {
        margin-right: 0; }

.second-mail > p {
  font-family: "db_heaventmed", san-serif;
  font-weight: normal;
  font-size: 18px;
  line-height: 20px;
  text-align: center; }

.second-mail form fieldset input[type="submit"], .second-mail form fieldset button[type="submit"] {
  width: 200px;
  background-color: #0F62FE;
  font-size: 18px;
  line-height: 22px;
  font-family: "db_heaventmed", san-serif;
  font-weight: normal;
  padding: 9px 0;
  margin: 40px auto 0;
  display: block; }

.second-mail form fieldset input[type="submit"].btn-disabled, .second-mail form fieldset button[type="submit"].btn-disabled {
  background-color: #9b9b9b !important;
  cursor: default; }

.second-mail form fieldset ul li.DateOfBirth .ant-calendar-picker.ant-calendar-picker-large > div {
  border-bottom: 1px solid #9B9B9B; }

.second-mail form fieldset ul li .box {
  margin: 4px 0 0;
  clear: both;
  display: block; }
  .second-mail form fieldset ul li .box div.radio {
    width: 33%;
    float: left; }

.radio {
  /*margin: 0.5rem;*/ }
  .radio label {
    font-size: 16px;
    line-height: 20px; }
  .radio input[type="radio"] {
    position: absolute;
    opacity: 0; }
    .radio input[type="radio"] + .radio-label {
      display: flex;
      align-items: center;
      justify-content: center; }
      .radio input[type="radio"] + .radio-label:before {
        content: '';
        background: #121416;
        border-radius: 100%;
        display: inline-block;
        width: 8px;
        height: 8px;
        position: relative;
        cursor: pointer;
        text-align: center;
        transition: all 250ms ease;
        border: 5px solid #121416;
        box-shadow: 0 0 0 1px #F2F6FD;
        margin: 0 8px 0 2px; }
    .radio input[type="radio"]:checked + .radio-label:before {
      background-color: #F2F6FD;
      box-shadow: 0 0 0 1px #0F62FE;
      border: 5px solid #0F62FE; }
    .radio input[type="radio"]:focus + .radio-label:before {
      outline: none;
      border-color: #0F62FE; }
    .radio input[type="radio"]:checked:disabled + .radio-label:before {
      background-color: #F2F6FD;
      box-shadow: 0 0 0 1px #55585E;
      border: 5px solid #55585E; }
    .radio input[type="radio"] + .radio-label:empty:before {
      margin-right: 0; }
  .radio input[type="radio"]:not(:checked) + label:after {
    opacity: 0 !important;
    -webkit-transform: scale(0);
    transform: scale(0);
    display: none !important;
    padding-left: 0 !important; }
  .radio input[type="radio"]:checked + label:after {
    opacity: 0 !important;
    -webkit-transform: scale(0);
    transform: scale(0);
    display: none !important;
    padding-left: 0 !important; }

/*force calendar*/
.ant-calendar-input {
  color: #fff !important;
  background: #000 !important; }

.ant-calendar-picker-container {
  z-index: 1000 !important; }

.profile .ant-calendar {
  background: #000 !important;
  color: #fff !important;
  background-color: #000 !important; }
  .profile .ant-calendar table {
    background: #000 !important;
    color: #fff !important; }

.ant-calendar-selected-day .ant-calendar-date {
  background: #0F62FE !important;
  color: #fff !important;
  border: none !important; }

.ant-calendar-header .ant-calendar-century-select {
  color: #fff !important; }

.ant-calendar-header .ant-calendar-decade-select {
  color: #fff !important; }

.ant-calendar-header .ant-calendar-year-select {
  color: #fff !important; }

.ant-calendar-header .ant-calendar-month-select {
  color: #fff !important; }

.ant-calendar-date {
  color: #fff !important; }

.ant-calendar-date:hover {
  background: #0F62FE !important;
  color: #fff !important; }

.ant-calendar-picker:focus {
  -webkit-box-shadow: 0 !important;
  box-shadow: 0 !important; }

.ant-calendar-picker-input.ant-input:focus {
  -webkit-box-shadow: unset !important;
  box-shadow: unset !important; }

.ant-input:focus {
  -webkit-box-shadow: unset !important;
  box-shadow: unset !important; }

.ant-calendar-month-panel {
  background: #000 !important; }

.ant-calendar-month-panel-header .ant-calendar-month-panel-century-select {
  color: #fff !important; }

.ant-calendar-month-panel-header .ant-calendar-month-panel-decade-select {
  color: #fff !important; }

.ant-calendar-month-panel-header .ant-calendar-month-panel-year-select {
  color: #fff !important; }

.ant-calendar-month-panel-header .ant-calendar-month-panel-month-select {
  color: #fff !important; }

.ant-calendar-month-panel-month {
  color: #fff !important; }

.ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month {
  background: #0F62FE !important; }

.ant-calendar-header a:hover {
  background: #0F62FE !important;
  color: #fff !important; }

.ant-calendar-header .ant-calendar-next-month-btn:hover::before {
  color: #fff !important; }

.ant-calendar-header .ant-calendar-next-month-btn:hover::after {
  color: #fff !important; }

.ant-calendar-month-panel-month:hover {
  background: #0F62FE !important; }

.ant-calendar-year-panel {
  background: #000 !important; }

.ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year {
  background: #0F62FE !important; }

.ant-calendar-year-panel-last-decade-cell .ant-calendar-year-panel-year {
  color: #fff !important; }

.ant-calendar-year-panel-next-decade-cell .ant-calendar-year-panel-year {
  color: #fff !important; }

.ant-calendar-year-panel-year:hover {
  background: #0F62FE !important; }

.ant-calendar-year-panel-header .ant-calendar-year-panel-century-select {
  color: #fff !important; }

.ant-calendar-year-panel-header .ant-calendar-year-panel-decade-select {
  color: #fff !important; }

.ant-calendar-year-panel-header .ant-calendar-year-panel-year-select {
  color: #fff !important; }

.ant-calendar-year-panel-header .ant-calendar-year-panel-month-select {
  color: #fff !important; }

.ant-calendar-year-panel-year {
  color: #fff !important; }

.ant-calendar-disabled-cell.ant-calendar-today .ant-calendar-date {
  position: relative;
  border-radius: 2px;
  padding: 2px 0 0;
  background: none;
  width: 26px !important;
  height: 24px !important;
  margin: 0 auto;
  display: inline-block; }

.ant-calendar-disabled-cell.ant-calendar-today .ant-calendar-date:before {
  display: none; }

.ant-calendar-disabled-cell .ant-calendar-date {
  background: none !important;
  color: #ffffffa8 !important; }

.ant-calendar-disabled-cell .ant-calendar-date:hover {
  border-radius: 2px;
  padding: 2px 0 0;
  background: none;
  width: 26px !important;
  height: 24px !important;
  margin: 0 auto;
  display: inline-block;
  border: none; }

.ant-calendar-footer .ant-calendar-footer-btn .ant-calendar-today-btn-disabled {
  color: #fff !important; }

.ant-calendar-decade-panel-century {
  background: #000 !important; }

.ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade {
  background: #0F62FE !important;
  color: #fff !important; }

.ant-calendar-decade-panel-decade {
  color: #fff !important; }

.ant-calendar-decade-panel-last-century-cell .ant-calendar-decade-panel-decade {
  color: #fff !important; }

.ant-calendar-decade-panel-next-century-cell .ant-calendar-decade-panel-decade {
  color: #fff !important; }

/*smart banner*/
.smartbanner-show .modal-center.term-condition {
  top: 80px; }
  .smartbanner-show .modal-center.term-condition .detail {
    height: calc(100vh - 120px); }
    .smartbanner-show .modal-center.term-condition .detail .content {
      height: calc(83vh - 350px); }

@media screen and (min-width: 1024px) and (max-height: 767px) {
  .modal-center.tutorial-pdpa .detail img {
    height: 30vh; }
  .modal-center.tutorial-pdpa .detail .cont {
    top: 37vh; } }

@media screen and (min-width: 1024px) and (max-height: 699px) {
  .modal-center.tutorial-pdpa .detail img {
    display: none; }
  .modal-center.tutorial-pdpa .detail .cont {
    top: 20vh; } }

@media screen and (width: 1024px) and (height: 1366px) {
  .modal-center.tutorial-pdpa .detail .cont {
    top: 40vh; } }

@media screen and (max-width: 1023px) {
  .modal-center.tutorial-pdpa .detail {
    width: calc(100vw - 80px); }
    .modal-center.tutorial-pdpa .detail img {
      width: 100%;
      height: auto; }
    .modal-center.tutorial-pdpa .detail .cont {
      position: static; }
  .modal-center.term-condition .detail {
    width: 100%; } }

@media screen and (max-width: 767px) {
  .modal-center.term-condition .detail {
    padding: 20px 8px; }
    .modal-center.term-condition .detail > h3 {
      font-size: 28px;
      line-height: 1; }
    .modal-center.term-condition .detail .content {
      padding: 0;
      width: 92%; }
    .modal-center.term-condition .detail .form-check {
      margin: 12px 0;
      width: 100%; }
      .modal-center.term-condition .detail .form-check .checkmark-box {
        width: calc(100% - 24px);
        padding: 12px; }
      .modal-center.term-condition .detail .form-check button[type="button"] {
        width: 100%; }
    .modal-center.term-condition .detail .form-check.form-policy .checkmark-box label {
      font-size: 18px; }
    .modal-center.term-condition .detail .form-check.form-policy button[type="button"] {
      margin-top: 20px; }
    .modal-center.term-condition .detail .pdpaStep {
      width: 100%; }
      .modal-center.term-condition .detail .pdpaStep > p {
        font-size: 16px; } }

@media screen and (max-width: 576px) {
  .modal-center.tutorial-pdpa .detail {
    padding: 6px;
    width: 99%; }
    .modal-center.tutorial-pdpa .detail h3 {
      font-size: 32px;
      line-height: 1.2;
      margin: 0 0 12px; }
    .modal-center.tutorial-pdpa .detail p {
      width: calc(100% - 30px);
      font-size: 20px;
      line-height: 28px; }
    .modal-center.tutorial-pdpa .detail ul {
      width: calc(100% - 30px); }
      .modal-center.tutorial-pdpa .detail ul li {
        font-size: 20px;
        line-height: 28px; }
    .modal-center.tutorial-pdpa .detail .btn-step a {
      width: 92%; } }

@media screen and (max-width: 576px) and (max-height: 669px) {
  .modal-center.tutorial-pdpa .detail img {
    width: 75%; }
  .modal-center.tutorial-pdpa .detail .btn-step a {
    margin: 0 auto 8px;
    font-size: 20px;
    padding: 8px 0; }
  .modal-center.tutorial-pdpa .detail .btn-step p {
    margin: 0; } }

@media screen and (max-height: 499px) {
  .modal-center.tutorial-pdpa .detail {
    height: auto; }
    .modal-center.tutorial-pdpa .detail img {
      display: none; }
    .modal-center.tutorial-pdpa .detail .btn-step {
      position: static;
      margin-top: 20px; } }

/* end tutorial*/
@media only screen and (max-width: 500px) {
  .ui.modal {
    width: 90%;
    padding: 30px 10px; } }

@media only screen and (max-width: 500px) {
  .modal {
    width: 100%;
    padding: 50px 10px; }
    .modal a.btn-login {
      width: 100%;
      height: auto;
      padding: 4% 0 3.4%;
      border-radius: 5px; }
      .modal a.btn-login img {
        padding-left: 16%;
        margin: -3px 0 0; }
      .modal a.btn-login span {
        font-size: 22px;
        margin: 0 0 0 1%; }
    .modal a.btn-login.log-Google img {
      padding-left: 17%; }
    .modal a.btn-login.log-Facebook img {
      padding-left: 17%; }
    .modal a.btn-login.log-Apple {
      padding: 0; }
      .modal a.btn-login.log-Apple img {
        padding: 0; }
    .modal a.btn-login.log-Line span {
      margin: 0; }
    .modal .modal-toggle {
      width: 100%; }
      .modal .modal-toggle .toggle-navigation > li {
        font-size: 20px; }
    .modal p.barOr {
      width: 100%; }
  .modal.modal-login {
    padding: 50px 10px; }
    .modal.modal-login a.close-modal {
      top: 20px;
      right: 20px; }
  form fieldset ul li label {
    font-size: 20px; }
  #delete-acc.tem2 > div p span {
    display: block;
    padding: 10px 0 0; }
  .accept-box {
    width: 100%; }
  .modal-standardBox {
    width: 100%;
    padding: 50px 10px; }
    .modal-standardBox a.btn-login {
      width: 100%;
      height: auto;
      padding: 4% 0 3.4%;
      border-radius: 5px; }
      .modal-standardBox a.btn-login img {
        padding-left: 16%;
        margin: -3px 0 0; }
      .modal-standardBox a.btn-login span {
        font-size: 22px;
        margin: 0 0 0 1%; }
    .modal-standardBox a.btn-login.log-Google img {
      padding-left: 17%; }
    .modal-standardBox a.btn-login.log-Facebook img {
      padding-left: 17%; }
    .modal-standardBox a.btn-login.log-Apple {
      padding: 0; }
      .modal-standardBox a.btn-login.log-Apple img {
        padding: 0; }
    .modal-standardBox a.btn-login.log-Line span {
      margin: 0; }
    .modal-standardBox .modal-toggle {
      width: 100%; }
      .modal-standardBox .modal-toggle .toggle-navigation > li {
        font-size: 20px; }
    .modal-standardBox p.barOr {
      width: 100%; } }

@media screen and (max-width: 320px) {
  .modal-center.term-condition .detail .pdpaStep > p {
    font-size: 12px;
    line-height: 1; } }

body {
  position: relative;
  background: #00040D;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: geometricPrecision; }

#truehits_div {
  position: absolute;
  bottom: 22px;
  left: 10px; }

.fav, a[class^=share] {
  width: 34px;
  height: 34px;
  float: left;
  background: url(/static/images/share-btn.svg) no-repeat;
  background-size: 100%;
  margin: 0 5px 0 0; }
  .fav span, a[class^=share] span {
    display: block;
    text-indent: -9999px; }

.t-highlight {
  font-family: 'db_heaventbold';
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: normal;
  display: inline-block;
  background: #4d2598;
  background: -moz-linear-gradient(left, #2723B5 0%, #2723B5 0%, #E43131 100%, #E43131 100%);
  background: -webkit-linear-gradient(left, #2723B5 0%, #2723B5 0%, #E43131 100%, #E43131 100%);
  background: linear-gradient(left, #2723B5 0%, #2723B5 0%, #E43131 100%, #E43131 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  position: relative; }

.invisible {
  display: none; }

a[class^=share] {
  background-position: 0 -51px;
  background-size: 100%; }

.view-all {
  position: absolute;
  right: 0;
  top: 10px;
  color: #0076FF;
  font-size: 20px;
  line-height: 23px;
  font-family: 'db_heaventbold', san-serif; }

.view-all:hover {
  text-decoration: underline; }

*[class|=ico] {
  color: #fff;
  font-size: 16px;
  border-radius: 4px;
  padding: 2px 7px;
  margin: 0 5px 0 0;
  font-family: 'db_heaventmed', san-serif;
  text-transform: uppercase;
  letter-spacing: 0.3px; }

.ico-teaser {
  background: #DC353D;
  vertical-align: top; }

.ico-hit {
  background: #7757BE;
  vertical-align: top; }

.ico-showing {
  background: #0F62FE;
  vertical-align: top; }

.ico-clip {
  background-color: #0F62FE;
  vertical-align: top; }

.ico-clip:before {
  content: '';
  width: 7px;
  height: 10px;
  display: inline-block;
  background: url(/static/images/icon-play.svg) 0px 2px no-repeat;
  background-size: 100%;
  margin-right: 5px; }

#wrapper .container {
  box-sizing: border-box;
  margin: 0 40px; }

.viewed:before {
  display: block;
  width: 15px;
  height: 13px;
  background: url(/static/images/icon-eye.svg) no-repeat 0 0;
  vertical-align: middle;
  background-size: 100%;
  margin: 4px 5px 0 0;
  float: left; }

/*bootstrap form error*/
.has-error .checkbox, .has-error .checkbox-inline, .has-error .control-label, .has-error .help-block, .has-error .radio, .has-error .radio-inline, .has-error.checkbox label, .has-error.checkbox-inline label, .has-error.radio label, .has-error.radio-inline label {
  color: #CA3131;
  font-size: 14px;
  font-family: db_heaventregular, san-serif; }

.has-success input[type="text"],
.has-success .control-label,
.has-success .help-block,
.has-success .form-control-feedback {
  color: #3BC271; }

/*footer global*/
footer {
  width: 100%;
  text-align: left;
  border-radius: 0;
  margin: 0;
  padding: 0 40px 10px;
  box-sizing: border-box;
  overflow: hidden;
  background: #000;
  color: #fff;
  position: relative;
  /*end ft-row*/ }
  footer .ft-row:before {
    width: 100%;
    height: 1px;
    background: #fff;
    opacity: 0.2;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    width: 100%; }
  footer .ft-row {
    width: 100%;
    max-width: 1200px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    padding: 25px 0 0;
    /*> p:after { content:''; display: block; position: absolute; bottom: -20px; left: 50%; width: 40px; height: 2px; background:#fff; margin: 0 0 0 -20px; opacity: 0.7;}*/ }
    footer .ft-row > p {
      margin: 0 0 10px; }
    footer .ft-row > a {
      display: block;
      clear: both;
      margin: 0 0 15px; }
    footer .ft-row img {
      height: 40px;
      width: auto;
      padding: 0; }
    footer .ft-row p {
      color: #fff;
      font-size: 18px;
      padding: 0 0 5px;
      position: relative; }
    footer .ft-row p.qr-dl {
      margin: 0 10px 0 0;
      display: inline-block;
      float: left;
      padding: 0; }
      footer .ft-row p.qr-dl img {
        height: auto;
        width: 128px; }
    footer .ft-row .footer-secondary {
      width: 100%;
      margin: 0 auto;
      text-align: center;
      position: relative;
      padding: 20px 0 10px;
      overflow: hidden;
      font-family: db_heaventmed, san-serif;
      font-size: 16px;
      line-height: 25px;
      letter-spacing: 0.5px; }
      footer .ft-row .footer-secondary p {
        color: #D7D7D7; }
      footer .ft-row .footer-secondary a {
        color: #D7D7D7; }
    footer .ft-row > ul {
      float: left;
      overflow: hidden;
      width: 70%; }
      footer .ft-row > ul > li {
        float: left;
        margin: 0 4% 0 0; }
        footer .ft-row > ul > li h3 {
          font-family: db_heaventmed, san-serif;
          font-size: 22px;
          line-height: 25px;
          letter-spacing: 0.5px;
          font-weight: normal;
          margin: 0 0 15px;
          text-align: left; }
          footer .ft-row > ul > li h3 img {
            display: none; }
        footer .ft-row > ul > li ul li {
          font-family: db_heaventmed, san-serif;
          clear: both;
          margin: 0 0 10px;
          overflow: hidden; }
          footer .ft-row > ul > li ul li a {
            font-size: 16px;
            line-height: 25px;
            color: #F2F6FD; }
            footer .ft-row > ul > li ul li a img {
              height: 15px;
              width: auto;
              float: left;
              padding: 0; }
          footer .ft-row > ul > li ul li a:hover {
            text-decoration: underline;
            color: #0076FF; }
      footer .ft-row > ul > li:last-child {
        margin: 0; }
      footer .ft-row > ul .contact-us ul li a {
        display: flex;
        align-items: center; }
        footer .ft-row > ul .contact-us ul li a span[class^="icon-"] {
          font-size: 16px;
          line-height: 100%;
          margin-right: 8px; }
        footer .ft-row > ul .contact-us ul li a:hover {
          text-decoration: none; }
          footer .ft-row > ul .contact-us ul li a:hover span {
            text-decoration: underline; }
          footer .ft-row > ul .contact-us ul li a:hover span[class^="icon-"] {
            text-decoration: none; }
    footer .ft-row .app-dl {
      float: right;
      overflow: hidden;
      width: 270px; }
      footer .ft-row .app-dl h3 {
        font-size: 22px;
        line-height: 25px;
        font-family: db_heaventmed, san-serif;
        letter-spacing: 0.5px;
        font-weight: normal;
        margin: 0 0 10px;
        display: inline-block; }
        footer .ft-row .app-dl h3 span {
          float: left; }
        footer .ft-row .app-dl h3 img {
          width: auto;
          padding: 0;
          float: left;
          margin: 3px 9px 0 9px;
          height: 16px; }
      footer .ft-row .app-dl p {
        float: left; }
        footer .ft-row .app-dl p > a {
          float: left;
          clear: both;
          margin: 0 0 10px; }
          footer .ft-row .app-dl p > a img {
            height: 36px;
            width: auto;
            display: block; }
        footer .ft-row .app-dl p > a:last-child {
          margin: 0; }

/* end footer*/
/*category header global*/
.main-hd {
  padding: 0 0 10px;
  font-weight: normal; }
  .main-hd > * {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: 0.5px;
    font-family: db_heaventmed, san-serif;
    display: inline-block;
    min-width: 100px;
    font-weight: normal; }

.sub-hd {
  margin: 0 0 5px 50px;
  color: #4A4A4A;
  font-size: 30px;
  font-weight: normal;
  font-family: db_heaventmed, san-serif; }
  .sub-hd > * {
    display: inline-block;
    color: #4A4A4A;
    line-height: 40px; }

.current .sub-hd > * {
  background: #4d2598;
  background: -moz-linear-gradient(left, #2723B5 0%, #2723B5 0%, #E43131 100%, #E43131 100%);
  background: -webkit-linear-gradient(left, #2723B5 0%, #2723B5 0%, #E43131 100%, #E43131 100%);
  background: linear-gradient(left, #2723B5 0%, #2723B5 0%, #E43131 100%, #E43131 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text; }

.row {
  width: 100%;
  position: relative;
  clear: both;
  margin: 0 0 25px; }

/*ads*/
.sp-banner {
  text-align: center;
  width: 100%;
  margin: 0 0 25px;
  overflow: hidden;
  min-height: 90px; }

/*player icon global*/
.thumb {
  position: relative; }

.thumb > a:after {
  position: absolute;
  left: 45%;
  top: 50%;
  width: 90px;
  height: 90px;
  margin: -45px 0 0 -25px;
  background: url(/static/images/player.svg) no-repeat;
  background-size: 100%;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 2; }

article.no-vdo .thumb > a:after {
  display: none; }

.item:hover .thumb > a:after, .item:hover .link a {
  opacity: 1 !important;
  transition: opacity 0.5s; }

.boomBox-sticky {
  position: sticky;
  position: -webkit-sticky;
  top: 90px; }

/*modal global*/
.modal-backdrop {
  opacity: 0;
  background: #191919;
  box-shadow: 0 2px 50px 0 rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  z-index: 8;
  display: none; }

.modal-overlay {
  position: fixed;
  width: 50%;
  height: 50%;
  bottom: -100vh;
  left: 50%; }

.modal-overlay.active {
  z-index: 9;
  left: 0;
  bottom: 0; }

.modal-overlay[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden; }

.modal-overlay[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  z-index: 30; }

.modal-overlay .content-area {
  margin: auto; }

.modal-overlay button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0; }

.modal-overlay .btn-close {
  width: 44px;
  height: 44px;
  position: absolute;
  right: 20px;
  top: 10px;
  text-align: center;
  color: #9b9b9b;
  z-index: 20;
  font-family: "db_heaventregular", san-serif;
  background: none;
  font-size: 16px;
  cursor: pointer; }

.modal-overlay .btn-close em {
  font-style: normal; }

/*modal search global*/
section.searchmodal {
  width: 80%;
  max-width: 820px;
  height: calc(100vh - 20px);
  left: 0;
  right: 0;
  top: 100vh;
  display: none;
  margin: 0;
  position: fixed;
  margin: 0 auto;
  padding: 88px 0 0;
  overflow: inherit;
  /*search trend suggest global*/ }
  section.searchmodal .modal-content {
    /*form:after { content:''; width: 20px; height: 20px; background: url("/static/images/icon/icon-search.svg") 0 0 no-repeat; position: absolute; right: 0; bottom: 12px; cursor: pointer;}*/ }
    section.searchmodal .modal-content > div {
      position: relative; }
    section.searchmodal .modal-content form {
      width: 100%;
      position: relative;
      background-color: #121416;
      padding: 11px 16px;
      box-sizing: border-box;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 4px;
      border: 1px solid #26282E; }
      section.searchmodal .modal-content form .icon-search {
        color: #7B7E85;
        font-size: 15px;
        padding: 2.5px;
        margin-right: 16px; }
        section.searchmodal .modal-content form .icon-search::before {
          content: "\E90E" !important; }
      section.searchmodal .modal-content form input[type="text"] {
        font-size: 20px;
        line-height: 120%;
        font-family: "db_heaventregular", san-serif;
        background-color: transparent;
        font-weight: 400;
        color: #F2F6FD;
        width: calc(100% - 54px);
        box-sizing: border-box;
        border-bottom: none; }
        section.searchmodal .modal-content form input[type="text"] input[type="text"]::-webkit-input-placeholder {
          color: #7B7E85; }
        section.searchmodal .modal-content form input[type="text"] input[type="text"]::-moz-placeholder {
          color: #7B7E85; }
        section.searchmodal .modal-content form input[type="text"] input[type="text"]:-ms-input-placeholder {
          color: #7B7E85; }
        section.searchmodal .modal-content form input[type="text"] input[type="text"]:-moz-placeholder {
          color: #7B7E85; }
      section.searchmodal .modal-content form input[type="text"]:focus, section.searchmodal .modal-content form input[type="text"]:invalid, section.searchmodal .modal-content form input[type="text"]:required {
        outline: none;
        border: none;
        box-shadow: none; }
      section.searchmodal .modal-content form button[type="button"] {
        background: none;
        border: 0;
        border-radius: 0; }
        section.searchmodal .modal-content form button[type="button"] .icon-search {
          margin: 0;
          color: #F2F6FD;
          font-size: 18px; }
        section.searchmodal .modal-content form button[type="button"] .icon-times-circle-filled {
          color: #7B7E85; }
        section.searchmodal .modal-content form button[type="button"] > span {
          display: block;
          font-size: 24px;
          line-height: 1;
          padding: 0; }
      section.searchmodal .modal-content form .btn-Search {
        display: flex;
        align-items: center; }
        section.searchmodal .modal-content form .btn-Search::before {
          content: '';
          width: 1px;
          height: 32px;
          background: #26282E;
          display: inline-block;
          margin: 0 19px 0 16px; }
        section.searchmodal .modal-content form .btn-Search .icon-search::before {
          content: "\E90E" !important; }
    section.searchmodal .modal-content .btn-close {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      right: calc(50% - 514px);
      top: 24px; }
      section.searchmodal .modal-content .btn-close .icon-x {
        display: block;
        font-size: 24px;
        line-height: 1; }
    section.searchmodal .modal-content .guide-search {
      width: 100%;
      position: absolute;
      top: 55px;
      padding: 0;
      z-index: 2;
      background: #121416;
      overflow-y: scroll;
      max-height: calc(100vh - 144px);
      border: 1px solid #26282E;
      border-top: none;
      box-sizing: border-box; }
      section.searchmodal .modal-content .guide-search li {
        display: flex;
        align-items: flex-start;
        color: #F2F6FD;
        font-family: "db_heaventregular", san-serif;
        font-size: 20px;
        line-height: 120%;
        padding: 12px 16px;
        cursor: pointer; }
        section.searchmodal .modal-content .guide-search li p {
          color: #F2F6FD;
          font-family: "db_heaventregular", san-serif;
          font-size: 20px;
          line-height: 120%;
          cursor: pointer; }
          section.searchmodal .modal-content .guide-search li p span {
            color: #5A8FF2; }
        section.searchmodal .modal-content .guide-search li .search-cat {
          text-align: right;
          color: #9b9b9b;
          flex: auto; }
          section.searchmodal .modal-content .guide-search li .search-cat p {
            text-align: right;
            color: #9b9b9b; }
        section.searchmodal .modal-content .guide-search li:hover {
          background-color: #092353; }
        section.searchmodal .modal-content .guide-search li > p:first-child {
          width: 528px;
          margin-right: 100px;
          display: block;
          display: -webkit-box;
          max-width: 528px;
          margin: 0 100px 0 0;
          font-size: 20px;
          line-height: 120%;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis; }
      section.searchmodal .modal-content .guide-search li:before {
        content: '';
        width: 15px;
        height: 15px;
        display: inline-block;
        margin: 2.5px 18.5px 2.5px 2.5px;
        background: url("/static/images/icon/icon-search.svg") 0 0 no-repeat;
        background-size: 100%;
        flex: 0 0 auto; }
      section.searchmodal .modal-content .guide-search li.search-history:before {
        background: url("/static/images/icon/icon-search-history.svg") 0 0 no-repeat; }
  section.searchmodal .search-trend {
    width: 100%;
    clear: both;
    position: relative;
    overflow: hidden; }
    section.searchmodal .search-trend h2 {
      color: #F2F6FD;
      font-family: "db_heaventregular", san-serif;
      font-weight: normal;
      font-size: 28px;
      line-height: 120%;
      width: 100%;
      padding: 32px 0 16px; }
    section.searchmodal .search-trend li {
      width: auto;
      float: left;
      margin: 0 12px 12px 0;
      border: 1px solid #26282E;
      border-radius: 18px;
      transition: all 0.3s;
      cursor: pointer; }
      section.searchmodal .search-trend li a {
        font-size: 20px;
        line-height: 120%;
        color: #F2F6FD;
        padding: 6px 20px;
        display: inline-block; }
    section.searchmodal .search-trend li:hover {
      border: 1px solid #193366;
      transition: all 0.3s;
      background: #092353; }
    section.searchmodal .search-trend li.selected {
      background: #092353;
      border: 1px solid #193366;
      transition: all 0.3s; }
    section.searchmodal .search-trend .btn-clear {
      position: absolute;
      right: 0;
      top: 36px;
      font-family: "db_heaventregular", san-serif;
      font-size: 22px;
      line-height: 120%;
      cursor: pointer; }
      section.searchmodal .search-trend .btn-clear a {
        color: #7B7E85; }
  section.searchmodal .nodata {
    width: 100%;
    clear: both;
    color: #fff;
    text-align: center;
    padding: 50px 0; }
    section.searchmodal .nodata p {
      color: #fff;
      font-size: 18px; }
  section.searchmodal .search-tab .toggle-navigation {
    width: 100%;
    display: flex;
    flex-wrap: nowrap; }
    section.searchmodal .search-tab .toggle-navigation li, section.searchmodal .search-tab .toggle-navigation .item {
      font-family: "db_heaventregular", san-serif;
      font-size: 20px;
      line-height: 120%;
      color: #7B7E85;
      float: left;
      margin: 0 8px 0 0;
      cursor: pointer;
      padding: 0 8px 10px;
      flex: 1 0 auto; }
    section.searchmodal .search-tab .toggle-navigation li.active, section.searchmodal .search-tab .toggle-navigation .item.active {
      color: #0F62FE;
      cursor: default;
      border-bottom: 2px solid #0F62FE; }
    section.searchmodal .search-tab .toggle-navigation li:hover, section.searchmodal .search-tab .toggle-navigation .item:hover {
      color: #F2F6FD; }
    section.searchmodal .search-tab .toggle-navigation li:last-child, section.searchmodal .search-tab .toggle-navigation .item:last-child {
      margin: 0; }
  section.searchmodal .search-tab .toggle-detail {
    clear: both;
    display: block;
    width: 100%;
    position: relative; }
    section.searchmodal .search-tab .toggle-detail > li {
      /*display: none;*/
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      visibility: hidden;
      opacity: 0;
      z-index: -10; }
      section.searchmodal .search-tab .toggle-detail > li .result {
        height: calc(100vh - 242px);
        /*.section-search:first-child { padding: 0;
						a.readMore { top: 43px;}
					}*/ }
        section.searchmodal .search-tab .toggle-detail > li .result .section-search:last-child {
          padding: 0 0 50px; }
        section.searchmodal .search-tab .toggle-detail > li .result .section-search:last-of-type {
          padding-bottom: 100px; }
        section.searchmodal .search-tab .toggle-detail > li .result .section-search {
          padding: 0;
          position: relative;
          display: inline-block;
          width: 100%;
          margin: 0 0 32px;
          /*.pagination { text-align: right; font-family: $font-first; font-size: 22px; line-height: 25px; letter-spacing: 0.5px; padding: 15px 0 50px; clear: both;
							a,span { color: #fff; padding: 8px 13px; display: inline-block;}
							a:hover,span.active { background: #0F62FE; border-radius: 3px;}
						}*/ }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search > h2 {
            font-family: "db_heaventregular", san-serif;
            font-weight: 400;
            font-size: 28px;
            line-height: 120%;
            color: #F2F6FD;
            margin: 0 0 16px; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul {
            padding: 0; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li {
              margin: 0; }
              section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article {
                padding: 0;
                margin: 0; }
                section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article h2 {
                  font-size: 20px;
                  line-height: 24px;
                  color: #fff;
                  font-weight: normal;
                  margin: 0 0 2px;
                  padding: 0;
                  font-family: "db_heaventmed", san-serif;
                  max-height: 48px;
                  overflow: hidden; }
                  section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article h2 span {
                    color: #5A8FF2; }
                  section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article h2 span.ico-showing {
                    color: #fff;
                    font-size: 12px;
                    padding: 4px 12px; }
                section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article p {
                  color: #7B7E85; }
                section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article .relate h4 {
                  font-family: "db_heaventmed", san-serif;
                  font-weight: normal;
                  font-size: 18px;
                  line-height: 22px;
                  color: #6F6F6F; }
                section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article .relate p {
                  font-family: "db_heaventmed", san-serif;
                  font-size: 21px;
                  line-height: 24px;
                  color: #fff;
                  letter-spacing: 0;
                  padding: 0;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis; }
                  section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article .relate p span {
                    color: #5A8FF2; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed article .thumb {
            background: url(/static/images/logo-ch3plus-gray.svg) center center no-repeat #8d8d8d;
            background-size: 50px;
            width: 100%;
            padding-top: 150%;
            position: relative;
            margin-bottom: 12px;
            border-radius: 4px;
            overflow: hidden; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed article .thumb > a {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.thumb-small article .thumb {
            padding-top: 100%; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li {
            width: calc(25% - 15px);
            display: none;
            max-width: 190px; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li article .thumb {
              padding-top: 56.25%; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-of-type(5n+1) {
            clear: none; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-of-type(4n+1) {
            clear: both; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-child(1),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-child(2),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-child(3),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-child(4) {
            display: inline-block; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li {
            display: none; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li:nth-child(1),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li:nth-child(2),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li:nth-child(3),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li:nth-child(4),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li:nth-child(5) {
            display: inline-block; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed article .thumb > a {
            background: url(/static/images/logo-ch3plus-gray.svg) center center no-repeat #8d8d8d;
            background-size: 50px;
            width: 100%;
            padding-top: 56.24%;
            position: relative;
            margin-bottom: 10px;
            display: block;
            border-radius: 8px; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed article .thumb > a img {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search a.readMore {
            position: absolute;
            top: 4px;
            right: 5px;
            color: #7B7E85;
            font-size: 22px;
            line-height: 120%;
            font-family: "db_heaventregular", san-serif; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li {
            width: calc(25% - 15px);
            max-width: 100%; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li .detail {
              /*p.time-show:after { content: ''; display: inline-block; width: 1px; height: 15px; background: #8D8D8D; position: absolute; right: 0; top: 2px; bottom: 0;}*/ }
              section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li .detail p.time-show {
                float: left;
                position: relative;
                margin-right: 10px;
                padding-right: 10px;
                letter-spacing: 0; }
              section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li .detail p.viewed {
                float: left; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li:nth-of-type(5n+1) {
            clear: none; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li:nth-of-type(4n+1) {
            clear: both; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search p.icon-loading {
            clear: both;
            text-align: center;
            padding: 0 0 50px; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search p.icon-loading .loading-spinner {
              width: 50px;
              height: auto; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.news-search .thumb > a:after {
            display: none; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.news-search .detail h2 {
            color: #fff;
            font-size: 22px;
            line-height: 25px;
            font-family: db_heaventmed, san-serif;
            font-weight: normal;
            max-height: 47px;
            overflow: hidden; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .news-search .item .detail h2 span {
            color: #0076ff; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .owl-stage {
            padding-left: 0 !important; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .owl-dots {
            display: none; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .owl-nav .owl-next {
            width: 40px !important;
            background: url(/static/images/svod/svod-next-icon.png) no-repeat 15px center/auto 24px, rgba(22, 22, 22, 0.3) !important;
            top: -1px !important;
            bottom: -1px !important;
            right: -1px !important;
            height: initial !important;
            opacity: 1 !important;
            border: none;
            position: absolute;
            text-indent: -9999px; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .owl-nav .owl-prev {
            width: 40px !important;
            background: url(/static/images/svod/svod-next-icon.png) no-repeat 15px center/auto 24px, rgba(22, 22, 22, 0.3) !important;
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
            top: -1px !important;
            left: -1px !important;
            bottom: -1px !important;
            height: initial !important;
            opacity: 1 !important;
            border: none;
            position: absolute;
            text-indent: -9999px; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .item .thumb {
            position: relative;
            background: url(/static/images/logo-ch3plus-gray.svg) center center no-repeat #8d8d8d;
            padding-top: 100%;
            width: 100%;
            border-radius: 100%;
            border: 1.67882px solid #FFFFFF; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .item .thumb img {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              border-radius: 100%; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .item h3 {
            font-family: "db_heaventmed", san-serif;
            font-weight: normal;
            font-size: 21px;
            line-height: 24px;
            color: #ffffff;
            text-align: center;
            margin-top: 12px; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            gap: 20px; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist > article {
              width: calc(12.5% - 17.5px);
              max-width: 80px;
              float: left; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist > article:last-child {
              margin-right: 0; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist .item .thumb {
              position: relative;
              background: url(/static/images/logo-ch3plus-gray.svg) center center no-repeat #8d8d8d;
              padding-top: 100%;
              width: 100%;
              border-radius: 100%;
              border: 1.67882px solid #FFFFFF; }
              section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist .item .thumb img {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border-radius: 100%;
                width: 100%;
                height: auto; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist .item h3 {
              font-family: "db_heaventregular", san-serif;
              font-weight: normal;
              font-size: 20px;
              line-height: 120%;
              color: #F2F6FD;
              text-align: center;
              margin-top: 8px; }
              section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist .item h3 span {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                word-spacing: 80px; }
        section.searchmodal .search-tab .toggle-detail > li .result.show-full-list .section-search .item-feed.landscape li {
          display: inline-block !important; }
    section.searchmodal .search-tab .toggle-detail > li.active {
      visibility: visible;
      opacity: 1;
      z-index: 1; }
  section.searchmodal .MuiTabs-root {
    position: relative;
    margin: 32px 0;
    padding: 0;
    min-height: auto; }
    section.searchmodal .MuiTabs-root .MuiTab-root {
      font-family: "db_heaventregular", san-serif;
      font-weight: normal;
      font-size: 20px;
      line-height: 120%;
      max-width: auto;
      min-height: auto;
      letter-spacing: 0;
      padding: 0 8px 10px;
      width: auto;
      min-width: auto;
      margin-right: 8px;
      text-transform: none; }
      section.searchmodal .MuiTabs-root .MuiTab-root:last-child {
        margin-right: 0; }
    section.searchmodal .MuiTabs-root .MuiTab-textColorPrimary {
      color: #F2F6FD; }
    section.searchmodal .MuiTabs-root .MuiTabs-scrollButtonsDesktop, section.searchmodal .MuiTabs-root .MuiTabs-scrollButtons {
      color: #F2F6FD; }
    section.searchmodal .MuiTabs-root .MuiTabScrollButton-root {
      opacity: 1;
      z-index: 1;
      width: 24px;
      height: 24px;
      -webkit-backdrop-filter: blur(5px);
      -moz-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px); }
      section.searchmodal .MuiTabs-root .MuiTabScrollButton-root.Mui-disabled {
        opacity: 0;
        z-index: 0; }
      section.searchmodal .MuiTabs-root .MuiTabScrollButton-root:first-of-type {
        position: absolute;
        left: 0;
        top: 0;
        justify-content: left; }
      section.searchmodal .MuiTabs-root .MuiTabScrollButton-root:last-of-type {
        position: absolute;
        right: 0;
        top: 0;
        justify-content: right; }
    section.searchmodal .MuiTabs-root .MuiTabs-indicator {
      background-color: #0F62FE !important; }
    section.searchmodal .MuiTabs-root .MuiSvgIcon-fontSizeSmall {
      font-size: 24px; }
    @media only screen and (max-width: 659px) {
      section.searchmodal .MuiTabs-root .MuiTabs-scroller {
        margin: 0 16px; } }
    section.searchmodal .MuiTabs-root .MuiSwitch-thumb,
    section.searchmodal .MuiTabs-root .MuiTouchRipple-root {
      background-color: unset !important; }
  section.searchmodal .btn-closeText {
    cursor: pointer; }

/*modal share global*/
section.sharemodal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: -100vh;
  left: 0;
  transition: all 0.3s;
  overflow: hidden; }
  section.sharemodal .modal-content {
    padding: 0 50px;
    box-sizing: border-box;
    width: 580px;
    height: 465px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: #FAFAFA;
    margin: -232px 0 0 -290px;
    border-radius: 5px; }
    section.sharemodal .modal-content .main-hd {
      font-size: 48px;
      font-family: db_heaventmed, san-serif;
      line-height: 45px;
      font-weight: normal;
      text-align: center;
      padding: 50px 0;
      margin: 0; }
    section.sharemodal .modal-content p {
      color: #575757;
      font-size: 20px;
      font-family: db_heaventmed, san-serif; }
    section.sharemodal .modal-content .url {
      font-size: 16px;
      line-height: 20px;
      font-family: db_heaventlight, san-serif;
      color: #575757;
      border-bottom: 1px solid #efefef;
      padding: 20px 0;
      width: 100%;
      overflow: hidden; }
    section.sharemodal .modal-content .btn-close {
      text-indent: -9999px;
      background: url(/static/images/ico-nav.svg) no-repeat -314px -363px; }
    section.sharemodal .modal-content button.copy {
      padding: 10px 0;
      background: #0076FF;
      box-shadow: 0 0 41px 0 rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      display: block;
      position: absolute;
      bottom: 30px;
      left: 50%;
      width: 160px;
      margin: 0 0 0 -80px;
      font-family: db_heaventmed, san-serif;
      font-size: 20px;
      color: #fff;
      cursor: pointer; }

/*when modal-active*/
body[class*=modal] {
  height: 100vh;
  overflow: hidden !important; }
  body[class*=modal] .modal-backdrop {
    display: block;
    opacity: 1; }
  body[class*=modal] section.searchmodal.active {
    top: 0;
    display: block; }
  body[class*=modal] section.sharemodal.active {
    left: 0;
    top: 0; }

section.clearmodal {
  display: none; }
  section.clearmodal .modal-content {
    background: #121416;
    border-radius: 10px;
    padding: 12px;
    overflow: hidden;
    text-align: center;
    width: 100%;
    height: 100%;
    max-width: 480px;
    border: 1px solid #26282E;
    box-sizing: border-box; }
    section.clearmodal .modal-content h3 {
      font-family: "db_heaventmed", san-serif;
      font-size: 32px;
      line-height: 120%;
      font-weight: normal;
      text-align: center;
      color: #F2F6FD;
      margin: 28px 0 8px; }
    section.clearmodal .modal-content p {
      font-family: "db_heaventregular", san-serif;
      font-size: 22px;
      line-height: 120%;
      text-align: center;
      color: #F2F6FD;
      margin: 0 0 24px; }
    section.clearmodal .modal-content a {
      font-family: "db_heaventregular", san-serif;
      font-size: 22px;
      line-height: 120%;
      display: inline-block;
      width: 50%;
      max-width: 160px;
      border-radius: 4px;
      padding: 9px;
      border: 1px solid #55585E;
      box-sizing: border-box; }
    section.clearmodal .modal-content a.cf-clear {
      background: #0F62FE;
      color: #ffffff;
      text-align: center;
      border: 1px solid #0F62FE; }
    section.clearmodal .modal-content a:first-of-type {
      margin: 0 16px 0 0; }
    section.clearmodal .modal-content .icon-x {
      position: absolute;
      right: 12px;
      top: 12px;
      font-size: 16px;
      color: #F2F6FD;
      cursor: pointer; }

section.clearmodal.active {
  display: block;
  left: 50%;
  top: 50%;
  bottom: unset;
  width: 480px;
  height: 228px;
  margin: -114px 0 0 -240px; }

.modal-clearmodal .modal-backdrop {
  z-index: 30; }

.modal-clearmodal section.clearmodal.active {
  z-index: 31; }

body.modal-searchmodal > .modal-backdrop {
  display: none; }

body.modal-searchmodal .modal-backdrop {
  background: rgba(0, 4, 13, 0.85);
  mix-blend-mode: normal;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  -moz-backdrop-filter: blur(25px); }

/*search result page*/
.result {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  height: 87vh;
  /*scrollbar-color: #ffffff #000000;
  scrollbar-width: thin;*/
  -ms-overflow-style: none; }
  .result ul {
    padding: 30px 0 0;
    width: 100%;
    padding-right: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap; }
  .result li {
    width: calc(16.67% - 17px);
    max-width: 120px; }
    .result li article {
      margin: 0 10px 0 0;
      padding: 0 0 25px; }
    .result li p {
      padding: 0 0 5px;
      font-family: db_heaventlight, san-serif;
      font-size: 16px;
      line-height: 20px;
      letter-spacing: 1px; }
    .result li h2 {
      padding: 0 0 10px;
      font-weight: normal;
      font-family: db_heaventmed, san-serif;
      font-size: 22px;
      line-height: 25px;
      letter-spacing: 0.5px; }
    .result li a {
      color: #F2F6FD; }
    .result li img {
      display: block;
      width: 100%;
      margin: 0;
      border-radius: 4px; }
    .result li .item .thumb > a:after {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      top: 0;
      left: 0;
      margin: 0;
      background-size: 30%;
      background-position: center;
      border-radius: 5px; }
    .result li .item .detail p.type {
      font-family: "db_heaventregular", san-serif;
      font-size: 16px;
      line-height: 120%;
      color: #7B7E85;
      letter-spacing: 0; }
      @media only screen and (max-width: 659px) {
        .result li .item .detail p.type {
          font-size: 14px; } }
  .result .loading {
    padding: 50px 0 0; }
    .result .loading * {
      display: block;
      margin: 0 auto;
      text-align: center;
      font-size: 16px;
      color: #fff;
      font-family: db_heaventlight, san-serif;
      letter-spacing: 1px; }
  .result .tag {
    margin: 25px 0 0;
    overflow: hidden;
    position: relative; }
    .result .tag h3 {
      font-family: db_heaventmed, san-serif;
      font-size: 36px;
      line-height: 40px;
      font-weight: normal;
      letter-spacing: 0.5px;
      color: #fff;
      margin: 0 0 10px;
      font-weight: normal; }
    .result .tag p a {
      display: inline-block;
      padding: 6px 10px;
      color: #fff;
      border: 1px solid #fff;
      border-radius: 3px;
      margin: 0 15px 15px 0;
      font-size: 20px;
      font-family: db_heaventbold, san-serif;
      letter-spacing: 0.5px; }
    .result .tag p a:last-child {
      margin-right: 0; }
    .result .tag p a:hover {
      background: rgba(255, 255, 255, 0.2); }
    .result .tag a.clearmodal {
      font-size: 20px;
      line-height: 24px;
      font-family: db_heaventbold, san-serif;
      letter-spacing: 0.5px;
      color: #fff;
      position: absolute;
      right: 0;
      top: 0; }

.result::-webkit-scrollbar {
  width: 2px;
  height: 2px;
  display: none; }

.result::-webkit-scrollbar-button {
  width: 0px;
  height: 0px; }

.result::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border: 0px none #ffffff;
  border-radius: 50px; }

.result::-webkit-scrollbar-thumb:hover {
  background: #ffffff; }

.result::-webkit-scrollbar-thumb:active {
  background: #000000; }

.result::-webkit-scrollbar-track {
  background: #666666;
  border: 0px none #ffffff;
  border-radius: 50px; }

.result::-webkit-scrollbar-track:hover {
  background: #666666; }

.result::-webkit-scrollbar-track:active {
  background: #333333; }

.result::-webkit-scrollbar-corner {
  background: transparent; }

.search-not-found div:first-child {
  padding: 64px 0 24px;
  text-align: center; }
  .search-not-found div:first-child img {
    width: 48px; }
  .search-not-found div:first-child span.icon-search {
    font-size: 48px;
    line-height: 100%;
    margin: 0 0 16px;
    color: #7B7E85;
    display: inline-block; }
  .search-not-found div:first-child h3 {
    font-family: "db_heaventregular", san-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 120%;
    color: #F2F6FD;
    margin: 0; }
  .search-not-found div:first-child p {
    font-family: "db_heaventmed", san-serif;
    font-size: 20px;
    line-height: 28px;
    color: #fff; }

.search-not-found .search-trend > ul {
  padding: 0;
  gap: 12px; }
  .search-not-found .search-trend > ul > li {
    display: inline-block;
    float: none;
    max-width: inherit;
    margin: 0; }
    .search-not-found .search-trend > ul > li:nth-of-type(5n+1) {
      clear: none; }

.footer-bar {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  z-index: 3;
  background: rgba(0, 0, 0, 0.85);
  box-shadow: #1f1f1f 0px 0px 8px;
  display: block; }
  .footer-bar p {
    text-align: center;
    padding: 10px;
    color: #b7b7b6;
    letter-spacing: 1px;
    font-size: 16px;
    line-height: 20px; }
    .footer-bar p a {
      text-decoration: underline;
      color: #faa935; }
    .footer-bar p a:last-child {
      text-decoration: none;
      background: #0F62FE;
      padding: 6px 25px;
      border-radius: 4px;
      color: #fff;
      margin: 0 0 0 10px;
      font-family: db_heaventmed, san-serif;
      letter-spacing: 0.5px;
      font-size: 20px;
      display: inline-block; }

/*hack for IE*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* IE10+ specific styles go here */
  img {
    border: none; }
  *[class*="-hd"] > * {
    color: #4d2598;
    background: transparent !important; } }

/*modernizr*/
.no-backgroundcliptext *[class*="-hd"] > *, .no-backgroundcliptext h2.highlight {
  color: #4d2598 !important;
  background: transparent !important; }

/*smart banner*/
.smartbanner-show section.searchmodal .search-tab .toggle-detail > li .result {
  height: calc(80vh - 80px); }

.smartbanner-show body[class*=modal] section.searchmodal.active {
  top: 80px; }

.smartbanner-show .svod-sidebar .svod-sidebar-content {
  top: 80px;
  height: calc(100vh - 120px) !important; }

.smartbanner-show .wrapall > div:first-child {
  padding-top: 80px !important; }

.smartbanner-show .child-nav-container {
  margin-top: 80px; }

.smartbanner-show .artist-list-page .container {
  padding-top: 50px; }

/*extra large screen*/
@media only screen and (min-width: 1365px) {
  .result ul li:nth-of-type(5n+1) {
    clear: both; }
  .result ul li:nth-of-type(5n) {
    margin: 0; }
  .result ul.item-feed.landscape li:nth-of-type(5n+1) {
    clear: none; } }

@media only screen and (min-width: 1024px) and (max-width: 1260px) {
  footer .ft-row > ul > li {
    margin: 0 4% 0 0; } }

@media screen and (min-width: 1200px) {
  .result .section-search .owl-loaded.owl-carousel.news-search .owl-nav > * {
    background-position: 0 42%; }
  .result .section-search .owl-loaded.owl-carousel.news-search .owl-nav .owl-prev {
    background-position: 10px 42%; } }

@media only screen and (max-width: 1199px) and (min-width: 1024px) {
  .result .section-search .owl-loaded.owl-carousel.news-search .owl-nav > * {
    background-position: 0 32%; }
  .result .section-search .owl-loaded.owl-carousel.news-search .owl-nav .owl-prev {
    background-position: 10px 32%; } }

@media only screen and (min-width: 1024px) {
  .result .section-search .owl-loaded.owl-carousel.news-search .owl-nav .owl-prev {
    width: 40px !important;
    background: url(/static/images/svod/svod-next-icon.png) no-repeat 15px 43%, rgba(22, 22, 22, 0.3) !important;
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    top: -1px !important;
    left: -1px !important;
    bottom: -1px !important;
    height: initial !important;
    opacity: 1 !important;
    border: none;
    position: absolute;
    text-indent: -9999px; }
  .result .section-search .owl-loaded.owl-carousel.news-search .owl-nav .owl-next {
    width: 40px !important;
    background: url(/static/images/svod/svod-next-icon.png) no-repeat 15px 43%, rgba(22, 22, 22, 0.3) !important;
    top: -1px !important;
    bottom: -1px !important;
    right: -1px !important;
    height: initial !important;
    opacity: 1 !important;
    border: none;
    position: absolute;
    text-indent: -9999px; }
  footer .ft-row > ul > li ul li.show-mobile {
    display: none; } }

/*mobile screen */
@media only screen and (max-width: 1023px) {
  body .sp-banner {
    min-height: unset; }
  body .sp-banner img {
    width: 100%; }
  body .sp-banner > div > div {
    margin: 0 auto; }
  #truehits_div {
    position: absolute;
    bottom: 37px;
    right: 4%;
    left: auto; }
  .ico-teaser, .ico-hit, .ico-showing {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 2px; }
  .view-all {
    right: 0;
    top: 10px; }
  body[class*=modal] section.searchmodal .thumb > a:after, body[class*=modal] section.searchmodal .thumb:hover a:after, body[class*=modal] section.searchmodal .link a {
    opacity: 1 !important;
    background-color: transparent; }
  body[class*=modal] section.searchmodal .search-trend {
    width: calc(100% - 32px);
    margin: 0 auto; }
    body[class*=modal] section.searchmodal .search-trend h2 {
      width: 100%;
      padding: 32px 0 12px;
      font-size: 22px;
      text-align: left; }
    body[class*=modal] section.searchmodal .search-trend .btn-clear {
      top: 37px;
      font-size: 18px; }
  body[class*=modal] section.searchmodal .btn-close {
    width: auto;
    right: 24px; }
  /*modernizr*/
  .no-picture .hero-carousel .owl-item img {
    width: 200%; }
  #wrapper .container {
    margin: 0 15px; }
  /*footer mobile*/
  footer .ft-row > p {
    text-align: center; }
  footer .ft-row p {
    padding: 0 3% 3px;
    line-height: 25px; }
  footer .ft-row .footer-secondary p, footer .ft-row .footer-secondary ul {
    width: 100%;
    text-align: left;
    padding: 0 0 10px; }
  footer .ft-row .footer-secondary ul li {
    display: block;
    padding: 10px 0; }
  footer .ft-row .footer-secondary:before {
    width: 88%;
    left: 2%; }
  footer .ft-row p.qr-dl {
    display: none; }
  /*share modal mobile*/
  section.sharemodal, section.sharemodal.active {
    display: block; }
    section.sharemodal .modal-content, section.sharemodal.active .modal-content {
      width: 80%;
      padding: 0 30px;
      height: 400px;
      margin: -200px 0 0 -40%; }
      section.sharemodal .modal-content .main-hd, section.sharemodal.active .modal-content .main-hd {
        font-size: 36px; }
  /*search result mobile*/
  .result ul {
    padding: 20px 0 40px;
    overflow: hidden; }
    .result ul li {
      width: 50%;
      overflow: hidden; }
      .result ul li h2 {
        font-size: 18px;
        font-weight: normal;
        line-height: 22px; }
    .result ul li:nth-of-type(5n+1) {
      clear: none; }
    .result ul li:nth-of-type(2n+1) {
      clear: both; }
    .result ul li:nth-of-type(2n) article {
      margin: 0 0 0 10px;
      float: right; }
  /*back to top*/
  #button {
    display: inline-block;
    background-color: #21297e;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 3px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 3; }
  #button::after {
    background: url("/static/images/BACKTOTOP.svg") 0 0 no-repeat;
    width: 30px;
    height: 20px;
    content: '';
    display: block;
    margin: 15px auto;
    background-size: 100%; }
  #button:hover {
    cursor: pointer;
    background-color: #21297ecc; }
  #button:active {
    background-color: #21297e; }
  #button.show {
    opacity: 1;
    visibility: visible; }
  .search-not-found div:first-child {
    width: 100%;
    margin: 0 auto;
    padding: 60px 0 20px; }
  .search-not-found .search-trend {
    text-align: center; }
    .search-not-found .search-trend ul {
      padding: 0; }
      .search-not-found .search-trend ul li {
        display: inline-block;
        clear: none; }
  section.searchmodal .search-tab .toggle-detail > li .result .section-search {
    width: 100%; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search a.readMore {
      right: 0;
      top: 4px;
      font-size: 18px; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search > h2 {
      font-size: 21px;
      line-height: 24px;
      margin: 0 0 8px; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed {
      padding: 0 0 10px; }
      section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li {
        width: 100%;
        clear: both; }
        section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li article.item {
          margin: 0; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li article.item .thumb {
            width: 190px;
            height: auto;
            float: left;
            padding-right: 10px; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article {
      float: none; }
      section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article .relate h4 {
        font-size: 16px;
        line-height: 20px; }
      section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article .relate p {
        font-size: 18px;
        line-height: 22px; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li:nth-of-type(2n) article {
      float: none; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-of-type(2n+1) {
      clear: both; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li:nth-child(5) {
      display: none; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .item h3 {
      font-size: 18px;
      line-height: 22px;
      margin-top: 4px; }
  section.searchmodal .modal-content .guide-search li p {
    line-height: 32px;
    letter-spacing: 0.36px; }
  section.searchmodal .modal-content .guide-search li .search-cat {
    flex: 0 0 23%;
    padding: 0; }
  section.searchmodal .modal-content .guide-search li p:first-of-type {
    margin-right: 5%;
    width: auto;
    flex: 0 0 60%; }
  section.searchmodal .modal-content .guide-search li:before {
    margin-top: 8px; }
  section.searchmodal .modal-content form input[type="text"] {
    width: calc(100% - 54px); } }

/*0-659px screen*/
@media only screen and (max-width: 659px) {
  section.searchmodal {
    width: 100%;
    padding-top: 72px; }
    section.searchmodal .btn-close {
      right: 24px;
      top: 24px;
      height: 24px !important; }
  body section.searchmodal .modal-content form input[type="text"] {
    font-size: 20px;
    line-height: 1;
    max-width: calc(100% - 54px); }
  .view-all {
    right: 0; }
  section.clearmodal.active {
    width: calc(100% - 32px);
    left: 16px;
    right: 16px;
    top: calc(50% - 98px);
    margin: auto;
    height: 196px; }
  section.clearmodal .modal-content {
    padding: 0; }
    section.clearmodal .modal-content h3 {
      font-size: 28px;
      margin: 40px 0 8px; }
    section.clearmodal .modal-content p {
      font-size: 18px; }
    section.clearmodal .modal-content > a {
      max-width: 131px;
      font-size: 18px; }
  body section.searchmodal .btn-close {
    width: auto;
    right: 16px; }
  body section.searchmodal .modal-content form {
    padding: 12px 19px 12px 12px;
    width: calc(100% - 32px);
    margin: 0 auto; }
    body section.searchmodal .modal-content form .icon-search {
      margin-right: 8px; }
    body section.searchmodal .modal-content form input[type="text"] {
      max-width: calc(100% - 54px);
      width: calc(100% - 54px); }
  body section.searchmodal .modal-content .guide-search {
    width: calc(100% - 32px);
    margin: 0 auto;
    left: 16px;
    right: 16px; }
  section.searchmodal .search-tab .toggle-detail > li .result .section-search {
    width: calc(100% - 32px);
    margin: 0 auto 32px;
    display: block;
    clear: both;
    overflow: hidden; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search h2 {
      font-size: 22px;
      line-height: 120%; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search a.readMore {
      right: 0;
      top: 4px;
      font-size: 18px; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist article.item {
      width: calc(25% - 16px);
      max-width: fi;
      gap: 16px;
      display: none; }
      section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist article.item h3 {
        font-size: 18px; }
      section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist article.item:nth-child(1), section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist article.item:nth-child(2), section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist article.item:nth-child(3), section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist article.item:nth-child(4) {
        display: inline-block; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist.full-tab article.item {
      display: inline-block !important; }
  section.searchmodal .search-tab .toggle-detail > li .result ul {
    gap: 16px 8px; }
    section.searchmodal .search-tab .toggle-detail > li .result ul li {
      width: calc(33% - 5.33px);
      max-width: 109px; }
  section.searchmodal .search-tab .toggle-detail > li .result .item-feed.landscape li {
    width: calc(50% - 4px) !important; } }

/* footer */
@media only screen and (max-width: 1024px) {
  body .wrapall > div.footer-bar {
    padding: 0; }
    body .wrapall > div.footer-bar p {
      text-align: left; }
      body .wrapall > div.footer-bar p a:last-child {
        /*display: block; max-width: calc(94px - 50px);*/
        display: table;
        clear: both;
        margin: 10px auto;
        max-width: unset; } }

@media only screen and (max-width: 1023px) {
  footer .ft-row > p {
    display: none; }
  footer .ft-row > a {
    text-align: center; }
  footer .ft-row > ul {
    width: 100%; }
    footer .ft-row > ul > li {
      display: block; }
    footer .ft-row > ul li.show {
      display: inline-block;
      float: none;
      text-align: center;
      margin: 0;
      width: 100%; }
      footer .ft-row > ul li.show h3 {
        display: none; }
      footer .ft-row > ul li.show ul li {
        display: none; }
      footer .ft-row > ul li.show ul li.show-list {
        display: inline-block;
        margin: 0 30px 0 0; }
  footer .ft-row .app-dl {
    display: block;
    float: none;
    width: 100%;
    text-align: center;
    margin: 0 0 15px; }
    footer .ft-row .app-dl > h3 {
      margin: 0; }
    footer .ft-row .app-dl > p {
      overflow: hidden;
      float: none; }
      footer .ft-row .app-dl > p > a {
        float: none;
        margin-right: 5px; }
        footer .ft-row .app-dl > p > a img {
          display: inline-block; }
      footer .ft-row .app-dl > p > a:last-child {
        margin-right: 0; }
  footer .ft-row .footer-secondary p {
    text-align: center;
    padding: 0; } }

@media only screen and (max-width: 767px) {
  footer {
    padding: 0 3% 10px; }
    footer .ft-row > ul {
      width: 100%; }
      footer .ft-row > ul li.show ul li.show-list {
        margin: 0 20px 0 0; }
      footer .ft-row > ul li {
        width: 100%;
        margin: 0;
        padding: 10px 0 5px;
        border-bottom: 0.6px solid rgba(216, 216, 216, 0.4); }
        footer .ft-row > ul li h3 {
          font-size: 20px;
          margin: 0 0 5px; }
          footer .ft-row > ul li h3 img {
            float: right;
            height: 7px;
            margin: 9px 0 0px;
            display: inline-block;
            transition: all 0.25s ease-in; }
        footer .ft-row > ul li ul {
          width: 90%;
          margin: 0 auto;
          max-height: 0;
          transition: max-height 0.15s ease-out;
          overflow: hidden; }
          footer .ft-row > ul li ul li {
            margin: 0; }
          footer .ft-row > ul li ul li:last-child {
            border: none; }
      footer .ft-row > ul li.active ul {
        max-height: 1000px;
        transition: max-height 0.25s ease-in;
        margin-top: 0; }
      footer .ft-row > ul li.active h3 img {
        transform: rotate(-180deg);
        transition: all 0.25s ease-in; }
      footer .ft-row > ul li:first-child {
        padding-top: 0; }
      footer .ft-row > ul li.contact-us {
        border: none;
        display: flex;
        align-items: center; }
        footer .ft-row > ul li.contact-us h3 {
          float: left;
          margin: 0 20px 0 0;
          font-size: 16px; }
        footer .ft-row > ul li.contact-us ul {
          display: block;
          max-height: inherit;
          width: auto;
          margin: 0;
          padding: 0; }
          footer .ft-row > ul li.contact-us ul li {
            border: none;
            float: left;
            width: auto;
            clear: none;
            padding: 0;
            margin: 0 20px 0 0; }
            footer .ft-row > ul li.contact-us ul li a span:first-child {
              min-width: auto; }
            footer .ft-row > ul li.contact-us ul li a span:last-child {
              display: none; }
            footer .ft-row > ul li.contact-us ul li a span[class^="icon-"] {
              font-size: 20px;
              margin: 0; }
          footer .ft-row > ul li.contact-us ul li:last-child {
            margin: 0; }
    footer .ft-row .app-dl > p > a {
      display: block;
      margin: 0; }
      footer .ft-row .app-dl > p > a img {
        display: inline-block; }
  section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li article.item .thumb {
    width: 42%; } }

@media only screen and (max-width: 768px) {
  section.searchmodal .search-tab .tab-scroll {
    overflow-x: scroll;
    -ms-overflow-style: none; }
  section.searchmodal .search-tab .tab-scroll::-webkit-scrollbar {
    display: none; } }

.scroll-style-3::-webkit-scrollbar-track {
  -webkit-box-shadow: unset;
  border-radius: 10px;
  background-color: #F2F6FD; }

.scroll-style-3::-webkit-scrollbar {
  width: 5px;
  background-color: #F2F6FD; }

.scroll-style-3::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: unset;
  background-color: #00040D; }

.scroll-style-3 {
  scrollbar-color: #26282E #121416;
  scrollbar-width: thin; }

.scroll-style-3::-webkit-scrollbar {
  width: 8px;
  height: 80px; }

.scroll-style-3::-webkit-scrollbar-button {
  width: 0px;
  height: 0px; }

.scroll-style-3::-webkit-scrollbar-thumb {
  background: #26282E;
  border-radius: 100px; }

.scroll-style-3::-webkit-scrollbar-thumb:hover {
  background: #26282E; }

.scroll-style-3::-webkit-scrollbar-thumb:active {
  background: #26282E; }

.scroll-style-3::-webkit-scrollbar-track {
  background: #121416;
  border-radius: 0; }

.scroll-style-3::-webkit-scrollbar-track:hover {
  background: #121416; }

.scroll-style-3::-webkit-scrollbar-track:active {
  background: #121416; }

.scroll-style-3::-webkit-scrollbar-corner {
  background: transparent; }

.premium-badge, header .ic-profile > a .premium-monthly, header .ic-profile > a .premium-yearly, header .ic-profile > a .member-normaly, header .ic-profile .profile-dropdown a .profile-extra .premium-monthly, header .ic-profile .profile-dropdown a .profile-extra .premium-yearly, header .ic-profile .profile-dropdown a .profile-extra .member-normaly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .premium-monthly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .premium-yearly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .member-normaly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .premium-monthly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .premium-yearly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .member-normaly {
  font-family: "db_heaventmed", san-serif;
  font-weight: normal;
  font-size: 10px;
  line-height: 120%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  transition: opacity 0.5s;
  padding: 0 8px;
  border-radius: 100px;
  margin-right: 0; }
  .premium-badge .icon, header .ic-profile > a .premium-monthly .icon, header .ic-profile > a .premium-yearly .icon, header .ic-profile > a .member-normaly .icon, header .ic-profile .profile-dropdown a .profile-extra .premium-monthly .icon, header .ic-profile .profile-dropdown a .profile-extra .premium-yearly .icon, header .ic-profile .profile-dropdown a .profile-extra .member-normaly .icon, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .premium-monthly .icon, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .premium-yearly .icon, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .member-normaly .icon, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .premium-monthly .icon, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .premium-yearly .icon, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .member-normaly .icon {
    font-size: 12px;
    margin-right: 4px; }

.svod-sidebar {
  z-index: -100;
  background: none !important;
  position: fixed !important;
  width: 100vw;
  height: 100vh;
  height: calc(100 * var(--vh, 1vh));
  top: 0;
  margin: 0 !important;
  border: 0 !important;
  /*prevent sidebar close roughly*/
  transition: z-index 0.5s step-end; }
  .svod-sidebar.active {
    z-index: 12 !important;
    transition: z-index 0.5s step-start; }
  .svod-sidebar .svod-sidebar-content {
    height: 100%;
    padding: 0 !important; }
    .svod-sidebar .svod-sidebar-content .sidebar-container {
      display: flex;
      position: relative;
      height: 100%;
      flex-direction: column;
      justify-content: space-between; }
      .svod-sidebar .svod-sidebar-content .sidebar-container .icon-close {
        position: absolute;
        right: 28px;
        top: 28px;
        font-weight: 700;
        font-size: 16px;
        z-index: 1; }
      .svod-sidebar .svod-sidebar-content .sidebar-container .register {
        display: flex;
        flex-direction: column;
        font-size: 20px;
        font-family: "db_heaventregular", san-serif;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: #00040D; }
        .svod-sidebar .svod-sidebar-content .sidebar-container .register .regis-icon {
          margin-right: 15px; }
        .svod-sidebar .svod-sidebar-content .sidebar-container .register .divider {
          width: 0.5px;
          background-color: #61616F;
          display: inline-block;
          height: 26px;
          margin: 0 16px; }
        .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile {
          display: flex;
          padding: 24px 24px 16px; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container {
            margin-right: 15px;
            position: relative; }
            .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container img {
              border-radius: 100%;
              border: 1px solid #fff;
              width: 50px;
              display: inline-block; }
            .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .premium-badge, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .premium-monthly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .premium-yearly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .member-normaly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .svod-profile-info .profile-extra .premium-monthly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .avatar-container .premium-monthly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .svod-profile-info .profile-extra .premium-yearly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .avatar-container .premium-yearly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .svod-profile-info .profile-extra .member-normaly, .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .avatar-container .member-normaly {
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translate(-50%, 0%);
              width: max-content; }
            .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .premium-monthly {
              border-color: #A0A0A0;
              background: linear-gradient(146.75deg, #D7D2CC 11.86%, #304352 91.38%); }
            .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .premium-yearly {
              border-color: #8D7A5B;
              background: linear-gradient(146.75deg, #D3CBB8 21.36%, #6D6027 91.38%); }
            .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .avatar-container .member-normaly {
              border-color: #0F62FE;
              background: linear-gradient(144.39deg, #84A8EB -2.42%, #558AEB 30.21%, #092353 107.89%);
              box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.15); }
          .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-name {
            font-family: 'db_heaventbold';
            font-size: 22px;
            line-height: 28px; }
            .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-name i {
              color: #F2F6FD;
              font-size: 12px;
              vertical-align: middle;
              margin-left: 6px; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra {
            display: flex; }
            .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .heart-wrapper {
              font-size: 16px;
              line-height: 120%;
              font-family: "db_heaventregular", san-serif;
              display: inline-flex;
              align-items: center; }
              .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .heart-wrapper .icon {
                font-size: 12px;
                color: #FA4D56;
                margin-right: 4px; }
            .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .premium-monthly {
              border-color: #A0A0A0;
              background: linear-gradient(146.75deg, #D7D2CC 11.86%, #304352 91.38%); }
            .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .premium-yearly {
              border-color: #8D7A5B;
              background: linear-gradient(146.75deg, #D3CBB8 21.36%, #6D6027 91.38%); }
            .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .member-normaly {
              border-color: #0F62FE;
              background: linear-gradient(144.39deg, #84A8EB -2.42%, #558AEB 30.21%, #092353 107.89%);
              box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.15); }
            .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .point-wrapper {
              display: inline-flex;
              align-items: center;
              margin-left: 8px;
              font-family: "db_heaventregular", san-serif;
              font-size: 18px;
              line-height: 120%; }
              .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .point-wrapper:first-child {
                margin-left: 0; }
              .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-ic-profile .svod-profile-info .profile-extra .point-wrapper img {
                height: 12px;
                margin-right: 4px; }
        .svod-sidebar .svod-sidebar-content .sidebar-container .register .stick-area {
          padding: 24px;
          border-top: 1px solid #26282E;
          display: flex;
          justify-content: space-between; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .register .stick-area > * {
            width: calc(50% - 8px); }
          .svod-sidebar .svod-sidebar-content .sidebar-container .register .stick-area p {
            background: linear-gradient(#00040D, #00040D) padding-box, linear-gradient(90deg, #8d7a5b 0%, #ebe0cd 51.04%, #8d7a5b 100%);
            color: #313149;
            border: 1px solid transparent;
            border-radius: 4px;
            text-align: center; }
            .svod-sidebar .svod-sidebar-content .sidebar-container .register .stick-area p a {
              width: calc(100% - 40px);
              padding: 9px 20px !important;
              margin: 0 !important;
              font-size: 18px !important;
              font-family: "db_heaventmed", san-serif !important;
              line-height: 24px;
              transform: translate(0px, 0px) !important;
              color: #fff;
              display: inline-block; }
              .svod-sidebar .svod-sidebar-content .sidebar-container .register .stick-area p a span {
                font-family: "db_heaventregular", san-serif;
                background: linear-gradient(180deg, #8D7A5B 0%, #EBE0CD 51.04%, #8D7A5B 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .register .stick-area .btn-tvlive {
            display: flex;
            align-items: center;
            border: 1px solid #7B7E85;
            border-radius: 4px;
            justify-content: center; }
        .svod-sidebar .svod-sidebar-content .sidebar-container .register .svod-login {
          display: flex;
          align-items: center;
          padding: 30px 0 30px 24px;
          font-family: "db_heaventmed", san-serif;
          font-size: 22px;
          line-height: 26px; }
      .svod-sidebar .svod-sidebar-content .sidebar-container .sidebar-menu,
      .svod-sidebar .svod-sidebar-content .sidebar-container .sub-menu {
        width: 100%;
        border-top: 1px solid #26282E;
        margin-left: 0;
        margin-right: 0;
        padding: 24px 0;
        margin-top: 0; }
        .svod-sidebar .svod-sidebar-content .sidebar-container .sidebar-menu a.item,
        .svod-sidebar .svod-sidebar-content .sidebar-container .sub-menu a.item {
          display: flex;
          align-items: center;
          font-family: "db_heaventbold", san-serif;
          font-size: 18px;
          line-height: 24px;
          margin: 0;
          padding: 12px 24px;
          color: #F2F6FD !important; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .sidebar-menu a.item .item-title,
          .svod-sidebar .svod-sidebar-content .sidebar-container .sub-menu a.item .item-title {
            width: 100%; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .sidebar-menu a.item .item-icon-wrapper,
          .svod-sidebar .svod-sidebar-content .sidebar-container .sub-menu a.item .item-icon-wrapper {
            display: flex;
            width: 30px; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .sidebar-menu a.item .caret,
          .svod-sidebar .svod-sidebar-content .sidebar-container .sub-menu a.item .caret {
            margin-left: auto;
            font-weight: 700; }
      .svod-sidebar .svod-sidebar-content .sidebar-container .sub-menu {
        margin-top: 16px;
        height: calc(100vh - 350px);
        overflow-y: overlay; }
        .svod-sidebar .svod-sidebar-content .sidebar-container .sub-menu.logged-in {
          height: calc(100vh - 350px); }
        .svod-sidebar .svod-sidebar-content .sidebar-container .sub-menu.has-button {
          height: calc(100vh - 350px); }
        .svod-sidebar .svod-sidebar-content .sidebar-container .sub-menu.logged-in.has-button {
          height: calc(100vh - 350px); }
        .svod-sidebar .svod-sidebar-content .sidebar-container .sub-menu .main-menu-item .caret {
          margin-left: 0;
          margin-right: 12px; }
      .svod-sidebar .svod-sidebar-content .sidebar-container .packages-btn {
        display: inline-block;
        font-family: 'db_heaventregular';
        background-color: transparent;
        border: 1px solid #FFFFFF;
        border-radius: 4px;
        padding: 5px 32px;
        color: #F4F4F4;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 18px;
        font-family: "db_heaventmed", san-serif;
        font-size: 18px; }
        @media only screen and (max-width: 767px) {
          .svod-sidebar .svod-sidebar-content .sidebar-container .packages-btn {
            padding: 9px 55px; } }
      .svod-sidebar .svod-sidebar-content .sidebar-container .log-out {
        display: flex;
        align-items: center;
        color: #F2F6FD;
        font-family: "db_heaventbold", san-serif;
        font-size: 18px;
        line-height: 24px; }
        .svod-sidebar .svod-sidebar-content .sidebar-container .log-out .icon {
          margin-right: 10px; }
      .svod-sidebar .svod-sidebar-content .sidebar-container .p-top {
        overflow: hidden; }
      .svod-sidebar .svod-sidebar-content .sidebar-container .category-list {
        padding: 0 0 34px;
        overflow-x: auto;
        overflow-y: scroll;
        height: calc(100vh - 192px);
        margin-top: 192px; }
        .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section {
          margin: 0 24px; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section h2 {
            font-family: "db_heaventmed", san-serif;
            font-weight: normal;
            font-size: 28px;
            line-height: 32px;
            letter-spacing: 0.25px;
            margin-bottom: 18px;
            display: flex;
            align-items: center; }
            .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section h2 a {
              color: #F2F6FD; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section h2:before {
            content: '';
            width: 4px;
            height: 24px;
            display: inline-block;
            margin-right: 12px;
            background-color: #F2F6FD; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section ul {
            overflow: hidden;
            padding: 0 0 16px;
            margin: 0 0 32px;
            border-bottom: 1px solid #26282E; }
            .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section ul li {
              width: 50%;
              max-width: 160px;
              display: inline-block;
              float: left;
              margin-bottom: 16px; }
              .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section ul li a {
                color: #F2F6FD;
                font-family: "db_heaventregular", san-serif;
                font-size: 22px;
                line-height: 28px;
                letter-spacing: 0.25px; }
            .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section ul li:nth-child(2n+1) {
              clear: both; }
            .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section ul li:nth-child(2n) {
              float: right; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section.series h2:before {
            background-color: #B91A20; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section.programs h2:before {
            background-color: #02D97F; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section.news h2:before {
            background-color: #1A46D3; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section.short h2:before {
            background-color: #D549B2; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section.shop h2:before {
            background-color: #e738a9; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section.shorts-special h2:before {
            background-color: #D549B2; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section.fandom h2:before {
            background-color: #533FCD; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section.music h2:before {
            background-color: #FFD007; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section.special h2:before {
            background-color: #533FCD; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section.movie h2:before {
            background-color: #CDDEFE; }
        .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section:last-child {
          padding-bottom: 100px; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section:last-child ul {
            border-bottom: none; }
      .svod-sidebar .svod-sidebar-content .sidebar-container .category-list::-webkit-scrollbar {
        width: 0;
        background: transparent; }
      .svod-sidebar .svod-sidebar-content .sidebar-container .category-list::-webkit-scrollbar-thumb {
        background: #00040D; }
      .svod-sidebar .svod-sidebar-content .sidebar-container .modal-profile-sidebar {
        position: absolute;
        left: -100%;
        top: 0;
        z-index: 1;
        width: 100%;
        background: #00040D;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: left 0.3s ease; }
        .svod-sidebar .svod-sidebar-content .sidebar-container .modal-profile-sidebar .header-top {
          padding: 24px; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .modal-profile-sidebar .header-top .goback {
            display: flex;
            align-items: center;
            font-size: 18px;
            line-height: 24px;
            letter-spacing: 0.25px;
            font-family: "db_heaventregular", san-serif; }
            .svod-sidebar .svod-sidebar-content .sidebar-container .modal-profile-sidebar .header-top .goback img {
              margin-right: 8px; }
        .svod-sidebar .svod-sidebar-content .sidebar-container .modal-profile-sidebar .p-bottom {
          border-top: 1px solid #26282E; }
          .svod-sidebar .svod-sidebar-content .sidebar-container .modal-profile-sidebar .p-bottom a.log-out {
            margin: 28px 0 36px 24px; }
      .svod-sidebar .svod-sidebar-content .sidebar-container .modal-profile-sidebar.active {
        left: 0;
        transition: left 0.3s ease; }

.ui.wide.left.sidebar,
.ui.wide.right.sidebar {
  width: 50%;
  padding: 24px; }

.ui.inverted.segment,
.ui.primary.inverted.segment {
  background: #00040D; }

@media screen and (max-width: 767px) {
  .svod-sidebar .svod-sidebar-content .sidebar-container .ui.inverted.secondary.vertical.sidebar-menu .item:hover, .svod-sidebar .svod-sidebar-content .sidebar-container .ui.inverted.secondary.vertical.sub-menu .item:hover {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important; }
  .svod-sidebar .svod-sidebar-content .sidebar-container .register .stick-area p a {
    width: 100%;
    padding: 10px 0 !important; }
  .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section ul li {
    width: 137px; }
  .ui.wide.left.sidebar,
  .ui.wide.right.sidebar {
    width: 90%; } }

@media only screen and (max-width: 374px) {
  .svod-sidebar .svod-sidebar-content .sidebar-container .category-list .section ul li {
    width: 48%; } }

.smartbanner-show .svod-sidebar .svod-sidebar-content .sidebar-container .sub-menu {
  height: calc(100vh - 415px); }
  .smartbanner-show .svod-sidebar .svod-sidebar-content .sidebar-container .sub-menu.logged-in {
    height: calc(100vh - 415px); }
  .smartbanner-show .svod-sidebar .svod-sidebar-content .sidebar-container .sub-menu.has-button {
    height: calc(100vh - 415px); }
  .smartbanner-show .svod-sidebar .svod-sidebar-content .sidebar-container .sub-menu.logged-in.has-button {
    height: calc(100vh - 415px); }

/*@font-face {
  font-family: 'icomoon';
  src:  url('/static/font/font-icon/icobeci.eot');
  src:  url('/static/font/font-icon/icobeci.eot') format('embedded-opentype'),
  url('/static/font/font-icon/icobeci.ttf') format('truetype'),
  url('/static/font/font-icon/icobeci.woff') format('woff'),
  url('/static/font/font-icon/icobeci.svg') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 14px;


  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  &:before {
    font-family: inherit;
  }
}

.icon-giveHearts:before {
  content: "\e900";
}
*/

/* palette */
/* gradient */
/* variable */
/* palette */
/* gradient */
/* variable */
/*font*/
/*db_heavent*/
@font-face {
  font-family: 'db_heavent';
  src: url("/static/font/db_heavent_blk_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: 800;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent';
  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: 700;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent';
  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: 500;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent';
  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: 400, normal;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent';
  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: 300;
  font-style: normal; }

/*db_heavent_condensed*/
@font-face {
  font-family: 'db_heavent';
  src: url("/static/font/db_heavent_blk_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: 800;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent_cond';
  src: url("/static/font/db_heavent_cond_bd_v3.2.1.ttf") format("truetype");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent_cond';
  src: url("/static/font/db_heavent_cond_med_v3.2.1.ttf") format("truetype");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent_cond';
  src: url("/static/font/db_heavent_cond_v3.2.1.ttf") format("truetype");
  font-weight: 400, normal;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent_cond';
  src: url("/static/font/db_heavent_cond_li_v3.2.1.ttf") format("truetype");
  font-weight: 300;
  font-style: normal; }

.global-language-switcher {
  float: right;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box; }
  .global-language-switcher * {
    box-sizing: border-box; }
  .global-language-switcher .language-switcher-btn {
    cursor: pointer;
    color: #F2F6FD; }
    .global-language-switcher .language-switcher-btn .icon {
      font-size: 24px; }
  .global-language-switcher .language-menu {
    display: none !important;
    position: absolute;
    margin: 0;
    border: 1px solid #55585E !important;
    background-color: #00040D !important;
    top: 46px;
    left: 0;
    z-index: 2;
    border-radius: 4px;
    width: 140px !important;
    box-sizing: unset; }
    .global-language-switcher .language-menu .item {
      position: relative;
      margin-bottom: 0 !important;
      display: flex !important;
      align-items: center;
      padding: 16px 16px 16px 40px;
      height: 48px; }
      .global-language-switcher .language-menu .item .icon-wrapper {
        display: flex;
        position: absolute;
        left: 16px; }
        .global-language-switcher .language-menu .item .icon-wrapper .icon {
          font-size: 16px;
          color: #F2F6FD; }
      .global-language-switcher .language-menu .item .item-title {
        flex-grow: 1;
        font-family: "db_heavent", san-serif;
        font-size: 18px;
        letter-spacing: 0.25px;
        color: #F2F6FD; }
      .global-language-switcher .language-menu .item::before {
        background-color: #393939; }
      .global-language-switcher .language-menu .item:hover {
        background-color: #092353 !important; }
  .global-language-switcher.active .language-menu {
    display: block !important; }
  .global-language-switcher.full-screen {
    position: unset; }
    .global-language-switcher.full-screen .language-menu {
      width: 100vw !important;
      height: calc(100vh - 49px) !important;
      border: none !important;
      top: 49px;
      left: 0;
      right: 0; }
      .global-language-switcher.full-screen .language-menu .item {
        height: 46px; }

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .global-language-switcher {
    height: auto;
    padding: 5px 0 !important; }
    .global-language-switcher .language-menu {
      top: 34px;
      left: unset;
      right: 0; } }

@media only screen and (max-width: 767px) {
  .global-language-switcher {
    height: auto;
    padding: 5px 0 !important; }
    .global-language-switcher .language-menu {
      top: 34px;
      left: unset;
      right: 0; } }

/*!
 * # Semantic UI 2.5.0 - Modal
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */.ui.modal{position:absolute;display:none;z-index:1001;text-align:left;background:#fff;border:none;box-shadow:1px 3px 3px 0 rgba(0,0,0,.2),1px 3px 15px 2px rgba(0,0,0,.2);transform-origin:50% 25%;flex:0 0 auto;border-radius:.28571429rem;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;will-change:top,left,margin,transform,opacity}.ui.modal>.icon:first-child+*,.ui.modal>:first-child:not(.icon){border-top-left-radius:.28571429rem;border-top-right-radius:.28571429rem}.ui.modal>:last-child{border-bottom-left-radius:.28571429rem;border-bottom-right-radius:.28571429rem}.ui.modal>.close{cursor:pointer;position:absolute;top:-2.5rem;right:-2.5rem;z-index:1;opacity:.8;font-size:1.25em;color:#fff;width:2.25rem;height:2.25rem;padding:.625rem 0 0 0}.ui.modal>.close:hover{opacity:1}.ui.modal>.header{display:block;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;background:#fff;margin:0;padding:1.25rem 1.5rem;box-shadow:none;color:rgba(0,0,0,.85);border-bottom:1px solid rgba(34,36,38,.15)}.ui.modal>.header:not(.ui){font-size:1.42857143rem;line-height:1.28571429em;font-weight:700}.ui.modal>.content{display:block;width:100%;font-size:1em;line-height:1.4;padding:1.5rem;background:#fff}.ui.modal>.image.content{display:flex;flex-direction:row}.ui.modal>.content>.image{display:block;flex:0 1 auto;width:'';align-self:top}.ui.modal>[class*="top aligned"]{align-self:top}.ui.modal>[class*="middle aligned"]{align-self:middle}.ui.modal>[class*=stretched]{align-self:stretch}.ui.modal>.content>.description{display:block;flex:1 0 auto;min-width:0;align-self:top}.ui.modal>.content>.icon+.description,.ui.modal>.content>.image+.description{flex:0 1 auto;min-width:'';width:auto;padding-left:2em}.ui.modal>.content>.image>i.icon{margin:0;opacity:1;width:auto;line-height:1;font-size:8rem}.ui.modal>.actions{background:#f9fafb;padding:1rem 1rem;border-top:1px solid rgba(34,36,38,.15);text-align:right}.ui.modal .actions>.button{margin-left:.75em}@media only screen and (max-width:767px){.ui.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.modal{width:88%;margin:0}}@media only screen and (min-width:992px){.ui.modal{width:850px;margin:0}}@media only screen and (min-width:1200px){.ui.modal{width:900px;margin:0}}@media only screen and (min-width:1920px){.ui.modal{width:950px;margin:0}}@media only screen and (max-width:991px){.ui.modal>.header{padding-right:2.25rem}.ui.modal>.close{top:1.0535rem;right:1rem;color:rgba(0,0,0,.87)}}@media only screen and (max-width:767px){.ui.modal>.header{padding:.75rem 1rem!important;padding-right:2.25rem!important}.ui.modal>.content{display:block;padding:1rem!important}.ui.modal>.close{top:.5rem!important;right:.5rem!important}.ui.modal .image.content{flex-direction:column}.ui.modal .content>.image{display:block;max-width:100%;margin:0 auto!important;text-align:center;padding:0 0 1rem!important}.ui.modal>.content>.image>i.icon{font-size:5rem;text-align:center}.ui.modal .content>.description{display:block;width:100%!important;margin:0!important;padding:1rem 0!important;box-shadow:none}.ui.modal>.actions{padding:1rem 1rem 0!important}.ui.modal .actions>.button,.ui.modal .actions>.buttons{margin-bottom:1rem}}.ui.inverted.dimmer>.ui.modal{box-shadow:1px 3px 10px 2px rgba(0,0,0,.2)}.ui.basic.modal{background-color:transparent;border:none;border-radius:0;box-shadow:none!important;color:#fff}.ui.basic.modal>.actions,.ui.basic.modal>.content,.ui.basic.modal>.header{background-color:transparent}.ui.basic.modal>.header{color:#fff}.ui.basic.modal>.close{top:1rem;right:1.5rem}.ui.inverted.dimmer>.basic.modal{color:rgba(0,0,0,.87)}.ui.inverted.dimmer>.ui.basic.modal>.header{color:rgba(0,0,0,.85)}.ui.legacy.modal,.ui.legacy.page.dimmer>.ui.modal{top:50%;left:50%}.ui.legacy.page.dimmer>.ui.scrolling.modal,.ui.page.dimmer>.ui.scrolling.legacy.modal,.ui.top.aligned.dimmer>.ui.legacy.modal,.ui.top.aligned.legacy.page.dimmer>.ui.modal{top:auto}@media only screen and (max-width:991px){.ui.basic.modal>.close{color:#fff}}.ui.loading.modal{display:block;visibility:hidden;z-index:-1}.ui.active.modal{display:block}.modals.dimmer[class*="top aligned"] .modal{margin:5vh auto}@media only screen and (max-width:767px){.modals.dimmer[class*="top aligned"] .modal{margin:1rem auto}}.legacy.modals.dimmer[class*="top aligned"]{padding-top:5vh}@media only screen and (max-width:767px){.legacy.modals.dimmer[class*="top aligned"]{padding-top:1rem}}.scrolling.dimmable.dimmed{overflow:hidden}.scrolling.dimmable>.dimmer{justify-content:flex-start}.scrolling.dimmable.dimmed>.dimmer{overflow:auto;-webkit-overflow-scrolling:touch}.scrolling.dimmable>.dimmer{position:fixed}.modals.dimmer .ui.scrolling.modal{margin:1rem auto}.scrolling.undetached.dimmable.dimmed{overflow:auto;-webkit-overflow-scrolling:touch}.scrolling.undetached.dimmable.dimmed>.dimmer{overflow:hidden}.scrolling.undetached.dimmable .ui.scrolling.modal{position:absolute;left:50%;margin-top:1rem!important}.ui.modal .scrolling.content{max-height:calc(80vh - 10em);overflow:auto}.ui.fullscreen.modal{width:95%!important;margin:1em auto}.ui.fullscreen.modal>.header{padding-right:2.25rem}.ui.fullscreen.modal>.close{top:1.0535rem;right:1rem;color:rgba(0,0,0,.87)}.ui.modal{font-size:1rem}.ui.mini.modal>.header:not(.ui){font-size:1.3em}@media only screen and (max-width:767px){.ui.mini.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.mini.modal{width:35.2%;margin:0}}@media only screen and (min-width:992px){.ui.mini.modal{width:340px;margin:0}}@media only screen and (min-width:1200px){.ui.mini.modal{width:360px;margin:0}}@media only screen and (min-width:1920px){.ui.mini.modal{width:380px;margin:0}}.ui.small.modal>.header:not(.ui){font-size:1.3em}@media only screen and (max-width:767px){.ui.tiny.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.tiny.modal{width:52.8%;margin:0}}@media only screen and (min-width:992px){.ui.tiny.modal{width:510px;margin:0}}@media only screen and (min-width:1200px){.ui.tiny.modal{width:540px;margin:0}}@media only screen and (min-width:1920px){.ui.tiny.modal{width:570px;margin:0}}.ui.small.modal>.header:not(.ui){font-size:1.3em}@media only screen and (max-width:767px){.ui.small.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.small.modal{width:70.4%;margin:0}}@media only screen and (min-width:992px){.ui.small.modal{width:680px;margin:0}}@media only screen and (min-width:1200px){.ui.small.modal{width:720px;margin:0}}@media only screen and (min-width:1920px){.ui.small.modal{width:760px;margin:0}}.ui.large.modal>.header{font-size:1.6em}@media only screen and (max-width:767px){.ui.large.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.large.modal{width:88%;margin:0}}@media only screen and (min-width:992px){.ui.large.modal{width:1020px;margin:0}}@media only screen and (min-width:1200px){.ui.large.modal{width:1080px;margin:0}}@media only screen and (min-width:1920px){.ui.large.modal{width:1140px;margin:0}}
/*!
 * # Semantic UI 2.5.0 - Dimmer
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */.dimmable:not(body){position:relative}.ui.dimmer{display:none;position:absolute;top:0!important;left:0!important;width:100%;height:100%;text-align:center;vertical-align:middle;padding:1em;background-color:rgba(0,0,0,.85);opacity:0;line-height:1;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.5s;animation-duration:.5s;transition:background-color .5s linear;flex-direction:column;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;will-change:opacity;z-index:1000}.ui.dimmer>.content{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;color:#fff}.ui.segment>.ui.dimmer{border-radius:inherit!important}.ui.dimmer:not(.inverted)::-webkit-scrollbar-track{background:rgba(255,255,255,.1)}.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive{background:rgba(255,255,255,.15)}.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35)}.animating.dimmable:not(body),.dimmed.dimmable:not(body){overflow:hidden}.dimmed.dimmable>.ui.animating.dimmer,.dimmed.dimmable>.ui.visible.dimmer,.ui.active.dimmer{display:flex;opacity:1}.ui.disabled.dimmer{width:0!important;height:0!important}.dimmed.dimmable>.ui.animating.legacy.dimmer,.dimmed.dimmable>.ui.visible.legacy.dimmer,.ui.active.legacy.dimmer{display:block}.ui[class*="top aligned"].dimmer{justify-content:flex-start}.ui[class*="bottom aligned"].dimmer{justify-content:flex-end}.ui.page.dimmer{position:fixed;transform-style:'';perspective:2000px;transform-origin:center center}body.animating.in.dimmable,body.dimmed.dimmable{overflow:hidden}body.dimmable>.dimmer{position:fixed}.blurring.dimmable>:not(.dimmer){-webkit-filter:blur(0) grayscale(0);filter:blur(0) grayscale(0);transition:.8s -webkit-filter ease;transition:.8s filter ease;transition:.8s filter ease,.8s -webkit-filter ease}.blurring.dimmed.dimmable>:not(.dimmer){-webkit-filter:blur(5px) grayscale(.7);filter:blur(5px) grayscale(.7)}.blurring.dimmable>.dimmer{background-color:rgba(0,0,0,.6)}.blurring.dimmable>.inverted.dimmer{background-color:rgba(255,255,255,.6)}.ui.dimmer>.top.aligned.content>*{vertical-align:top}.ui.dimmer>.bottom.aligned.content>*{vertical-align:bottom}.ui.inverted.dimmer{background-color:rgba(255,255,255,.85)}.ui.inverted.dimmer>.content>*{color:#fff}.ui.simple.dimmer{display:block;overflow:hidden;opacity:1;width:0%;height:0%;z-index:-100;background-color:rgba(0,0,0,0)}.dimmed.dimmable>.ui.simple.dimmer{overflow:visible;opacity:1;width:100%;height:100%;background-color:rgba(0,0,0,.85);z-index:1}.ui.simple.inverted.dimmer{background-color:rgba(255,255,255,0)}.dimmed.dimmable>.ui.simple.inverted.dimmer{background-color:rgba(255,255,255,.85)}
.cookie-footer-bar {
  position: fixed;
  left: 0px;
  bottom: 0px;
  z-index: 3;
  background: #121416;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #26282E;
  padding: 24px 0; }
  @media only screen and (max-width: 767px) {
    .cookie-footer-bar {
      padding: 0 !important;
      height: 200px; } }
  .cookie-footer-bar .cookie-footer-bar-row {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 16px; }
    @media only screen and (max-width: 767px) {
      .cookie-footer-bar .cookie-footer-bar-row {
        flex-direction: column;
        gap: 12px; } }
    .cookie-footer-bar .cookie-footer-bar-row .content h3 {
      font-family: "db_heaventregular", san-serif;
      font-weight: normal;
      font-size: 20px;
      line-height: 120%;
      color: #F2F6FD; }
    .cookie-footer-bar .cookie-footer-bar-row .content p {
      font-family: "db_heaventregular", san-serif;
      font-weight: normal;
      font-size: 18px;
      line-height: 120%;
      letter-spacing: 0.2px;
      color: #B9BBC2; }
      .cookie-footer-bar .cookie-footer-bar-row .content p a {
        text-decoration: underline;
        color: #B9BBC2;
        white-space: nowrap; }
    .cookie-footer-bar .cookie-footer-bar-row > a {
      width: 100%;
      max-width: 120px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #0F62FE;
      color: #F2F6FD;
      border-radius: 4px;
      font-family: "db_heaventregular", san-serif;
      font-weight: normal;
      font-size: 18px;
      line-height: 120%; }

@charset "UTF-8";
/* svod icon */
@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"; }

.icon-film:before {
  content: "\E95D"; }

.icon-globe:before {
  content: "\E95E"; }

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

.icon-mail:before {
  content: "\E960"; }

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

.icon-success:before {
  content: "\E962"; }

.icon-tv:before {
  content: "\E963"; }

.icon-redo:before {
  content: "\E964"; }

.icon-times-circle-filled:before {
  content: "\E965"; }

.icon-img-thumb:before {
  content: "\E966"; }

.icon-social-facebook:before {
  content: "\E967"; }

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

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

.icon-social-youtube:before {
  content: "\E96A"; }

.icon-chevron-down:before {
  content: "\E96B"; }

.icon-giftbox:before {
  content: "\E96C"; }

.icon-social-line:before {
  content: "\E96D"; }

.icon-custom:before {
  content: "\E96E"; }

.icon-shopping-bag-alt:before {
  content: "\E96F"; }

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

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

.icon-copy:before {
  content: "\E972"; }

.icon-open-in-new:before {
  content: "\E973"; }

.icon-chevron-up:before {
  content: "\E974"; }

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

.icon-volume-on:before {
  content: "\E976"; }

.icon-volume-off:before {
  content: "\E977"; }

.icon-play1:before {
  content: "\E978"; }

.icon-pause:before {
  content: "\E979"; }

/*font-face*/
@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; }

/*Prefix for customize Mello framework*/
/*global components*/
.viewed:before, footer .ft-row:before, .thumb > a:after {
  content: '';
  display: block; }

/*font-face*/
@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; }

/*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_heaventlight, san-serif;
  font-size: 15px;
  line-height: 22px; }

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

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

.viewed:before, footer .ft-row:before, .thumb > a:after {
  content: '';
  display: block; }

/*scroll*/
.scroll-style-2::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #fff; }

.scroll-style-2::-webkit-scrollbar {
  width: 5px;
  background-color: #fff; }

.scroll-style-2::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #707070; }

.scroll-style-2 {
  scrollbar-color: #595959 #e0e0e0;
  scrollbar-width: thin; }

.scroll-style-2::-webkit-scrollbar {
  width: 2px;
  height: 2px; }

.scroll-style-2::-webkit-scrollbar-button {
  width: 0px;
  height: 0px; }

.scroll-style-2::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border: 0px none #ffffff;
  border-radius: 50px; }

.scroll-style-2::-webkit-scrollbar-thumb:hover {
  background: #ffffff; }

.scroll-style-2::-webkit-scrollbar-thumb:active {
  background: #000000; }

.scroll-style-2::-webkit-scrollbar-track {
  background: #666666;
  border: 0px none #ffffff;
  border-radius: 50px; }

.scroll-style-2::-webkit-scrollbar-track:hover {
  background: #666666; }

.scroll-style-2::-webkit-scrollbar-track:active {
  background: #333333; }

.scroll-style-2::-webkit-scrollbar-corner {
  background: transparent; }

.premium-badge, header .ic-profile > a .premium-monthly, header .ic-profile > a .premium-yearly, header .ic-profile > a .member-normaly, header .ic-profile .profile-dropdown a .profile-extra .premium-monthly, header .ic-profile .profile-dropdown a .profile-extra .premium-yearly, header .ic-profile .profile-dropdown a .profile-extra .member-normaly {
  font-family: "db_heaventmed", san-serif;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  transition: opacity 0.5s;
  margin-right: 8px;
  padding: 0 6px;
  box-sizing: border-box;
  height: 18px;
  border: 1px solid transparent; }
  .premium-badge .icon, header .ic-profile > a .premium-monthly .icon, header .ic-profile > a .premium-yearly .icon, header .ic-profile > a .member-normaly .icon, header .ic-profile .profile-dropdown a .profile-extra .premium-monthly .icon, header .ic-profile .profile-dropdown a .profile-extra .premium-yearly .icon, header .ic-profile .profile-dropdown a .profile-extra .member-normaly .icon {
    font-size: 12px;
    margin-right: 3px; }

/*main header*/
header {
  width: 100%;
  box-sizing: border-box;
  height: 64px;
  padding: 0 40px;
  border-radius: 0;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 12 !important;
  box-shadow: none; }
  @media (max-width: 1220px) {
    header {
      padding: 0 20px; } }
  header > div {
    box-sizing: border-box;
    margin: 0 auto;
    position: relative;
    max-width: 1280px;
    height: 100%;
    z-index: 1; }
  header .logo {
    position: absolute;
    left: 0;
    top: 10px;
    z-index: 7;
    margin: 0;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease; }
    header .logo img {
      height: 44px;
      width: auto;
      display: block; }
  header nav {
    width: 90%;
    text-align: left;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    /* Flip the image on hover */ }
    header nav ul {
      display: flex;
      align-items: center;
      padding: 16px 0; }
    header nav li {
      display: inline-block;
      text-align: left;
      margin: 0 24px 0 0 !important;
      /*position: relative;*/
      -webkit-transition: all 0.4s ease;
      transition: all 0.2s ease; }
      header nav li > a,
      header nav li > p {
        color: #F2F6FD;
        min-width: auto;
        text-decoration: none;
        display: inline-block;
        position: relative;
        font-size: 20px;
        line-height: 120%;
        padding: 0;
        font-family: "db_heaventmed", san-serif;
        letter-spacing: 0.25px;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease; }
      header nav li a:hover {
        opacity: 70%;
        /*color:#0076FF; border-bottom: 5px solid #0076FF;*/ }
      header nav li.item-packages {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s;
        background: linear-gradient(#00040D, #00040D) padding-box, linear-gradient(90deg, #8d7a5b 0%, #ebe0cd 51.04%, #8d7a5b 100%);
        color: #313149;
        border: 1px solid transparent;
        border-radius: 4px; }
        header nav li.item-packages.show-package-button {
          opacity: 1;
          pointer-events: initial; }
        header nav li.item-packages a {
          padding: 4px 20px !important;
          margin: 0 !important;
          font-size: 18px !important;
          font-family: "db_heaventmed", san-serif !important;
          line-height: 24px;
          transform: translate(0px, 0px) !important;
          color: #fff; }
          header nav li.item-packages a:after {
            display: none; }
          header nav li.item-packages a span {
            background: linear-gradient(180deg, #8D7A5B 0%, #EBE0CD 51.04%, #8D7A5B 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; }
      header nav li.item-packages:hover {
        background: linear-gradient(#00040D, #00040D) padding-box, linear-gradient(90deg, #f2f6fd 0%, #f2f6fd 51.04%, #f2f6fd 100%); }
        header nav li.item-packages:hover a:hover {
          opacity: 100%; }
          header nav li.item-packages:hover a:hover span {
            background: #F2F6FD;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; }
    header nav li.mobile {
      display: none; }
    header nav .main-nav {
      display: none; }
    header nav li.other a:after {
      content: "";
      width: 10px;
      height: 6px;
      background: url("/static/images/ch3plus/icon-dropdown.svg") 0 0 no-repeat;
      display: inline-block;
      margin: 9px 0 0 5px;
      background-size: 100%; }
    header nav .tvlive img {
      vertical-align: text-top;
      margin-left: 2px; }
    header nav li.active a {
      color: #0076FF;
      border-bottom: 5px solid #0076FF; }
    header nav .item-dropdown .dropdown {
      display: none; }
    header nav li:last-child {
      margin: 0 !important; }
    header nav .item-dropdown-hover {
      position: relative; }
      header nav .item-dropdown-hover:hover a span img {
        transform: rotate(180deg);
        transition: transform 0.3s ease; }
    header nav .item-dropdown-hover a:hover + .dropdown,
    header nav .item-dropdown-hover .dropdown:hover {
      display: block; }
    header nav .item-dropdown-hover a {
      position: relative; }
    header nav .item-dropdown-hover a:hover img {
      transform: rotate(180deg);
      transition: transform 0.3s ease;
      /* Smooth transition for the flip */ }
    header nav .item-dropdown-hover img {
      transition: transform 0.3s ease;
      /* Ensure smooth transition when flipping back */ }
    header nav .item-dropdown-hover a:hover::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 100px;
      /* เพิ่มพื้นที่ hover เพื่อให้ลากเมาส์ผ่านได้ */
      background-color: transparent;
      pointer-events: none; }
    header nav .item-dropdown-hover .dropdown {
      display: none;
      position: absolute;
      background-color: black;
      min-width: 160px;
      box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.2);
      z-index: 1000;
      border: 1px solid #7d7d7d;
      border-radius: 5px;
      top: 35px;
      font-size: 18px;
      font-family: "db_heaventmed", san-serif;
      line-height: 24px;
      transform: translate(0px, 0px);
      margin: 0 !important;
      font-size: 18px !important;
      font-family: "db_heaventmed", san-serif !important;
      line-height: 24px;
      transform: translate(0px, 0px) !important;
      left: 0; }
    header nav .item-dropdown-hover .dropdown-content-hover a {
      color: #F2F6FD;
      padding: 8px 16px;
      /* Adjusted the padding as per your request */
      text-decoration: none;
      display: block;
      border-bottom: 1px solid #26282E;
      width: 145px; }
      header nav .item-dropdown-hover .dropdown-content-hover a:last-child {
        border-bottom: none; }
    header nav .item-dropdown-hover .dropdown-content a:first-child {
      border-top: none; }
    header nav .item-dropdown-hover .dropdown-content a:last-child {
      border-bottom: none; }
    header nav .item-dropdown-hover .dropdown-content-hover a:hover {
      transition: opacity 0.2s ease-in-out;
      /* Applying transition to opacity */
      opacity: 0.7;
      /* Use 0.7 instead of 70% for proper opacity */ }
  header .member {
    position: absolute;
    right: 190px;
    top: 29px;
    margin: 0;
    visibility: visible !important; }
    header .member a {
      color: #fff;
      font-size: 24px; }
    header .member span {
      display: block; }
  header .ic-profile {
    position: relative;
    cursor: pointer;
    width: auto;
    color: #fff;
    z-index: 6;
    float: right;
    display: inline-block;
    margin: 0 !important; }
    header .ic-profile > a {
      width: 40px;
      height: 40px;
      float: left;
      position: relative;
      z-index: 2; }
      header .ic-profile > a img {
        border-radius: 100%;
        width: 38px;
        display: inline-block;
        border: 1px solid #F2F6FD; }
      header .ic-profile > a .premium-badge, header .ic-profile > a .premium-monthly, header .ic-profile > a .premium-yearly, header .ic-profile > a .member-normaly, header .ic-profile > a .profile-dropdown a .profile-extra .premium-monthly, header .ic-profile > a .profile-dropdown a .profile-extra .premium-yearly, header .ic-profile > a .profile-dropdown a .profile-extra .member-normaly {
        position: absolute;
        bottom: -10px;
        margin-right: 0;
        left: 50%;
        transform: translate(-50%, 0%);
        width: max-content; }
      header .ic-profile > a .premium-monthly {
        border-color: #A0A0A0;
        background: linear-gradient(146.75deg, #D7D2CC 11.86%, #304352 91.38%); }
      header .ic-profile > a .premium-yearly {
        border-color: #8D7A5B;
        background: linear-gradient(146.75deg, #D3CBB8 21.36%, #6D6027 91.38%); }
      header .ic-profile > a .member-normaly {
        border-color: #0F62FE;
        background: linear-gradient(144.39deg, #84A8EB -2.42%, #558AEB 30.21%, #092353 107.89%);
        box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.15); }
    header .ic-profile .profile-dropdown {
      float: left;
      margin: 0;
      width: auto;
      padding: 0 0 0 8px !important; }
      header .ic-profile .profile-dropdown > a {
        height: 42px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column; }
      header .ic-profile .profile-dropdown > p {
        font-family: 'db_heaventmed', san-serif;
        font-size: 18px;
        cursor: pointer;
        color: #fff;
        max-width: 75px;
        margin-left: 10px;
        line-height: 1;
        display: inline-block;
        z-index: 2;
        position: relative; }
        header .ic-profile .profile-dropdown > p > img {
          float: right;
          margin: 8px 0 0; }
        header .ic-profile .profile-dropdown > p span {
          display: block;
          white-space: nowrap;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis; }
          header .ic-profile .profile-dropdown > p span img {
            width: 15px;
            height: auto;
            float: left;
            margin-right: 5px; }
        header .ic-profile .profile-dropdown > p span:first-child {
          height: 15px;
          padding: 3px 0 0;
          overflow: hidden;
          margin: 0 0 3px; }
      header .ic-profile .profile-dropdown a .profile-name {
        display: flex;
        align-items: center;
        font-family: 'db_heaventbold';
        font-size: 20px; }
        header .ic-profile .profile-dropdown a .profile-name .name-text {
          white-space: nowrap;
          max-width: 86px;
          overflow: hidden;
          text-overflow: ellipsis; }
        header .ic-profile .profile-dropdown a .profile-name .caret {
          display: inline-block;
          margin-left: 5px;
          transition: transform 0.3s ease;
          font-size: 8px; }
      header .ic-profile .profile-dropdown a .profile-extra {
        display: flex; }
        header .ic-profile .profile-dropdown a .profile-extra .heart-wrapper {
          font-size: 14px;
          font-family: "db_heaventregular", san-serif;
          display: inline-flex;
          align-items: center; }
          header .ic-profile .profile-dropdown a .profile-extra .heart-wrapper .icon {
            font-size: 10px;
            color: #FA4D56;
            margin-right: 3px; }
        header .ic-profile .profile-dropdown a .profile-extra .point-wrapper {
          display: inline-flex;
          align-items: center;
          margin-left: 7px;
          font-family: "db_heaventregular", san-serif;
          font-size: 14px; }
          header .ic-profile .profile-dropdown a .profile-extra .point-wrapper:first-child {
            margin-left: 0; }
          header .ic-profile .profile-dropdown a .profile-extra .point-wrapper img {
            height: 10px;
            margin-right: 2px; }
        header .ic-profile .profile-dropdown a .profile-extra .premium-monthly {
          border-color: #A0A0A0;
          background: linear-gradient(146.75deg, #D7D2CC 11.86%, #304352 91.38%); }
        header .ic-profile .profile-dropdown a .profile-extra .premium-yearly {
          border-color: #8D7A5B;
          background: linear-gradient(146.75deg, #D3CBB8 21.36%, #6D6027 91.38%); }
        header .ic-profile .profile-dropdown a .profile-extra .member-normaly {
          border-color: #0F62FE;
          background: linear-gradient(144.39deg, #84A8EB -2.42%, #558AEB 30.21%, #092353 107.89%);
          box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.15); }
    header .ic-profile .profile-menu {
      display: none !important;
      position: absolute;
      margin: 0;
      border: 1px solid #393939 !important;
      background-color: #161616 !important;
      top: 46px;
      right: 0;
      z-index: 2;
      border-radius: 4px;
      width: 200px !important;
      box-sizing: unset; }
      header .ic-profile .profile-menu .item {
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center;
        font-family: "db_heaventmed", san-serif;
        font-size: 18px; }
        header .ic-profile .profile-menu .item .item-icon-wrapper {
          display: flex;
          width: 25px; }
          header .ic-profile .profile-menu .item .item-icon-wrapper .item-icon {
            font-size: 12px;
            color: #F4F4F4; }
        header .ic-profile .profile-menu .item .item-title {
          flex-grow: 1; }
        header .ic-profile .profile-menu .item::before {
          background-color: #393939; }
    header .ic-profile.active .profile-dropdown .profile-name .caret {
      transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg); }
    header .ic-profile.active .profile-menu {
      display: block !important; }
  header .member.invalid a {
    background-position: 0 -738px; }
  header .member.valid a {
    background: none; }
    header .member.valid a img {
      margin-top: 5px;
      border-radius: 30px;
      width: 42px;
      border: 2px solid #fff; }
  header .nav-group {
    position: absolute;
    right: 0;
    top: 10px;
    /*float: right; margin: 9px 3% 0 0;*/
    height: 44px;
    -webkit-transition: top 0.4s ease;
    transition: top 0.4s ease; }
    header .nav-group .nav-line {
      width: 1px;
      height: 44px;
      display: block;
      background: #61616F !important;
      float: right;
      margin: 0 15px !important; }
  header .menu-setting,
  header .menu-setting-2 {
    display: none;
    float: right;
    padding: 10px 0;
    margin: 0; }
    header .menu-setting a,
    header .menu-setting-2 a {
      display: inline-block; }
  header .register {
    display: inline-flex;
    align-items: center;
    float: right;
    padding: 0 !important;
    margin: 0;
    font-size: 20px; }
    header .register .icon-user {
      font-size: 20px;
      color: #fff;
      margin-right: 12px; }
    header .register .divider {
      display: inline-block;
      width: 1px;
      height: 44px;
      background-color: #61616F;
      margin: 0 15px !important;
      opacity: 0.5; }
    header .register a {
      font-family: "db_heaventmed", san-serif;
      font-size: 22px;
      line-height: 28px;
      letter-spacing: 0.25px; }
  header .hd-search {
    float: right;
    padding: 10px 0 !important; }
    @media only screen and (min-width: 1024px) and (max-width: 1370px) {
      header .hd-search {
        margin-right: 0px; } }
    header .hd-search a .icon-search {
      font-size: 18px; }
  header .btn-noti {
    float: right;
    padding: 10px 5px !important;
    margin: 0 !important;
    position: relative; }
    @media (max-width: 1055px) {
      header .btn-noti {
        margin: 0 !important;
        padding: 10px 0 !important; } }
    header .btn-noti > a {
      width: 19px;
      height: 22px;
      background: url("/static/images/icon/bell.svg") 0 0 no-repeat;
      display: inline-block;
      background-position: center; }
    header .btn-noti .noti-detail {
      width: 320px;
      background: #121212;
      position: absolute;
      right: 0;
      z-index: 7;
      border-radius: 5px;
      overflow: hidden;
      display: none;
      -webkit-box-shadow: 0px 0px 7px 0px rgba(18, 18, 18, 0.75);
      -moz-box-shadow: 0px 0px 7px 0px rgba(18, 18, 18, 0.75);
      box-shadow: 0px 0px 7px 0px rgba(18, 18, 18, 0.75); }
      header .btn-noti .noti-detail .head {
        padding: 12px 20px;
        overflow: hidden;
        background: #2A2A2A;
        border-radius: 5px; }
        header .btn-noti .noti-detail .head h3 {
          font-family: "db_heaventregular", san-serif;
          font-weight: normal;
          color: #fff;
          font-size: 24px;
          line-height: 1;
          display: inline-block;
          float: left; }
        header .btn-noti .noti-detail .head .btn-setnoti {
          margin: 4px 0 0 25px; }
        header .btn-noti .noti-detail .head a {
          font-family: "db_heaventregular", san-serif;
          font-weight: normal;
          color: #fff;
          font-size: 16px;
          line-height: 1;
          float: right;
          margin: 4px 0 0; }
        header .btn-noti .noti-detail .head a:hover {
          color: #0076ff;
          text-decoration: underline; }
      header .btn-noti .noti-detail .noti-list {
        padding: 20px;
        height: 350px;
        overflow-y: scroll;
        position: relative; }
        header .btn-noti .noti-detail .noti-list > p {
          color: #fff;
          font-family: "db_heaventmed", san-serif;
          font-weight: normal;
          font-size: 16px;
          width: 100%;
          text-align: center;
          position: absolute;
          left: 0;
          top: 43%;
          right: 0; }
        header .btn-noti .noti-detail .noti-list ul li {
          padding: 10px 0;
          margin: 0;
          overflow: hidden;
          border-bottom: 1px solid #707070; }
          header .btn-noti .noti-detail .noti-list ul li > a {
            overflow: hidden;
            display: flex; }
            header .btn-noti .noti-detail .noti-list ul li > a img {
              width: 80px;
              height: 80px;
              float: left;
              margin: 0 15px 0 0; }
            header .btn-noti .noti-detail .noti-list ul li > a div {
              float: left;
              padding: 12px 0 0;
              width: 180px;
              overflow: hidden; }
              header .btn-noti .noti-detail .noti-list ul li > a div > * {
                padding-left: 16px; }
              header .btn-noti .noti-detail .noti-list ul li > a div p.highlight {
                font-family: "db_heaventmed", san-serif;
                font-weight: normal;
                line-height: 1;
                font-size: 16px;
                color: #0076FF;
                margin: 0 0 5px; }
              header .btn-noti .noti-detail .noti-list ul li > a div h2 {
                font-family: "db_heaventmed", san-serif;
                font-weight: normal;
                line-height: 1;
                font-size: 16px;
                color: #fff;
                margin: 0 0 5px; }
                header .btn-noti .noti-detail .noti-list ul li > a div h2 span:first-child {
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  max-width: 120px;
                  float: left;
                  margin: 0 5px 0 0; }
              header .btn-noti .noti-detail .noti-list ul li > a div h2.title span {
                max-width: 100%;
                float: none;
                display: block;
                white-space: unset;
                margin: 0; }
              header .btn-noti .noti-detail .noti-list ul li > a div p:last-child {
                font-family: "db_heaventregular", san-serif;
                font-weight: normal;
                line-height: 1;
                font-size: 12px;
                color: #9B9B9B; }
        header .btn-noti .noti-detail .noti-list ul li:hover {
          cursor: pointer; }
          header .btn-noti .noti-detail .noti-list ul li:hover > a div h2 {
            color: #0076ff; }
        header .btn-noti .noti-detail .noti-list ul li:last-child {
          border-bottom: 0;
          padding: 10px 0 0;
          margin: 0; }
        header .btn-noti .noti-detail .noti-list ul li.active > a div h2 {
          position: relative; }
        header .btn-noti .noti-detail .noti-list ul li.active > a div h2:before {
          content: '';
          width: 8px;
          height: 8px;
          display: inline-block;
          background: #0076FF;
          position: absolute;
          left: 0;
          top: 3px;
          border-radius: 100%; }
  header .btn-noti.noticontent > a {
    position: relative;
    display: inline-block;
    background: url("/static/images/icon/bell-notification.svg") 0 0 no-repeat; }
  header .btn-noti.active .noti-detail {
    display: block; }
  header .btn-noti.active > a {
    position: relative;
    display: inline-block;
    width: 19px;
    height: 22px;
    /*background: url('/static/images/icon/icon-noti-hover.svg') 0 0 no-repeat; background-size: 100%;*/ }
    header .btn-noti.active > a img {
      display: none; }
  header .ch-app-dl {
    float: right;
    position: relative;
    padding: 12px 0;
    /*>a:after { content:''; width: 10px; height: 14px; background: url('/static/images/icon/icon-arrow-down.svg') 0 0 no-repeat; background-size: 100%; display: inline-block; position: absolute; right: -4.6px; top: 0;-webkit-transition: top 0.4s ease; transition: top 0.4s ease;}*/ }
    @media only screen and (min-width: 1024px) and (max-width: 1370px) {
      header .ch-app-dl {
        margin-right: 0px; } }
    header .ch-app-dl > a {
      position: relative;
      display: flex !important;
      align-items: center; }
      header .ch-app-dl > a span {
        font-family: "db_heaventmed", san-serif;
        font-size: 20px !important;
        color: #ffffff; }
      header .ch-app-dl > a span:last-child {
        display: none; }
      header .ch-app-dl > a .icon-mobile {
        font-size: 14px !important; }
    header .ch-app-dl .dropdown {
      visibility: hidden;
      opacity: 0;
      position: absolute;
      transition: all 0.4s ease;
      left: -30px;
      top: 50px;
      width: 190px;
      background: #fff;
      border-radius: 0;
      padding: 20px 25px;
      box-sizing: border-box;
      text-align: center; }
      header .ch-app-dl .dropdown img {
        width: 90%;
        height: auto;
        display: block;
        margin: 10px auto; }
      header .ch-app-dl .dropdown p {
        color: #0076ff;
        font-family: "db_heaventmed", san-serif;
        font-weight: normal;
        font-size: 22px;
        font-weight: normal;
        line-height: 1; }
        header .ch-app-dl .dropdown p span {
          display: block; }
      header .ch-app-dl .dropdown a {
        color: #3B3B3B;
        font-family: "db_heaventregular", san-serif;
        font-weight: normal;
        font-size: 16px;
        font-weight: normal;
        text-decoration: none; }
      header .ch-app-dl .dropdown a:hover {
        text-decoration: underline; }
    header .ch-app-dl .dropdown:hover {
      visibility: visible;
      opacity: 1; }
  header .ch-app-dl:hover {
    /*>a:after { content:''; width: 10px; height: 14px; background: url('/static/images/icon/icon-arrow-down-active.svg') 0 0 no-repeat; background-size: 100%; display: inline-block; position: absolute; right: -4.6px; top: 7px;-webkit-transition: top 0.4s ease; transition: top 0.4s ease;}*/ }
    header .ch-app-dl:hover .dropdown {
      visibility: visible;
      opacity: 1;
      display: block; }

.wrapall.active {
  opacity: 0; }

body header .logo {
  top: 10px;
  -webkit-transition: top 0.4s ease;
  transition: top 0.4s ease; }
  body header .logo a img {
    height: 44px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease; }

body .nav-group .menu-setting a span,
body .nav-group .menu-setting-2 a span {
  display: inline-block;
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1); }
  body .nav-group .menu-setting a span.menu-1,
  body .nav-group .menu-setting-2 a span.menu-1 {
    font-size: 24px;
    opacity: 1;
    -webkit-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease; }
  body .nav-group .menu-setting a span.menu-2,
  body .nav-group .menu-setting-2 a span.menu-2 {
    font-size: 20px;
    display: none;
    opacity: 0;
    -webkit-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease; }

body .nav-detail {
  margin-top: 150px;
  display: inline-block;
  display: none;
  width: 100%;
  height: 70vh; }
  body .nav-detail > ul {
    width: 60%;
    float: left;
    padding: 30px 0 0; }
    body .nav-detail > ul > li {
      width: 25%;
      float: left; }
      body .nav-detail > ul > li h3 {
        font-family: "db_heaventmed", san-serif;
        color: #fff;
        font-weight: normal;
        font-size: 22px;
        line-height: 1;
        margin: 0 0 15px; }
        body .nav-detail > ul > li h3 a {
          color: #fff;
          cursor: default; }
          body .nav-detail > ul > li h3 a img {
            display: none; }
      body .nav-detail > ul > li h3.tvlive a:after {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 8px;
        background: #FD0012;
        display: inline-block;
        margin: 7px 0 0 5px;
        vertical-align: top; }
      body .nav-detail > ul > li h3.tvlive a {
        cursor: pointer; }
      body .nav-detail > ul > li ul li {
        padding: 0 0 10px 10px; }
        body .nav-detail > ul > li ul li a {
          font-family: "db_heaventregular", san-serif;
          font-weight: normal;
          font-size: 20px;
          line-height: 1;
          color: #9B9B9B; }
        body .nav-detail > ul > li ul li a:hover {
          text-decoration: underline;
          color: #0076FF; }
      body .nav-detail > ul > li ul li:last-child {
        padding: 0 0 0 10px; }
  body .nav-detail .user-set {
    width: 40%;
    float: right;
    height: 100%;
    position: relative; }
    body .nav-detail .user-set .user-profile {
      /*width: 315px;*/
      width: auto;
      float: right; }
      body .nav-detail .user-set .user-profile > img {
        width: 98px;
        height: 98px;
        float: left;
        margin: 0 30px 0 0;
        border-radius: 10px;
        border-radius: 100%;
        border: 1px solid #fff; }
      body .nav-detail .user-set .user-profile > div {
        float: left;
        position: relative;
        /*width: 185px;*/
        width: auto; }
        body .nav-detail .user-set .user-profile > div p {
          font-family: "db_heaventmed", san-serif;
          font-size: 22px;
          cursor: pointer;
          color: #fff;
          /*width: 140px;*/
          line-height: 1;
          display: inline-block;
          position: relative;
          padding: 25px 0 0;
          width: auto; }
          body .nav-detail .user-set .user-profile > div p span {
            display: inline-block; }
            body .nav-detail .user-set .user-profile > div p span img {
              width: 18px;
              height: auto;
              float: left;
              margin-right: 5px;
              padding: 1px 0 0; }
          body .nav-detail .user-set .user-profile > div p span:first-child {
            margin: 0 0 3px;
            white-space: nowrap;
            max-width: 140px;
            overflow: hidden;
            text-overflow: ellipsis; }
          body .nav-detail .user-set .user-profile > div p span:last-child {
            font-size: 20px;
            font-family: "db_heaventlight", san-serif;
            font-weight: normal;
            display: block;
            clear: both; }
        body .nav-detail .user-set .user-profile > div > a {
          font-family: "db_heaventmed", san-serif;
          font-weight: normal;
          color: #9B9B9B;
          font-size: 14px;
          border: 1px solid #9B9B9B;
          padding: 3px 5px;
          border-radius: 5px;
          display: inline-block;
          /*position: absolute; right: 0; bottom: 0;*/
          margin: 0 0 0 5px;
          -webkit-transition: all 0.4s ease;
          transition: all 0.4s ease; }
        body .nav-detail .user-set .user-profile > div > a:hover {
          background: #2F31D9;
          color: #fff;
          border: 1px solid #2F31D9;
          -webkit-transition: all 0.4s ease;
          transition: all 0.4s ease; }
    body .nav-detail .user-set > ul {
      clear: both;
      text-align: right;
      padding: 20px 0 0; }
      body .nav-detail .user-set > ul li {
        margin: 0 0 20px; }
        body .nav-detail .user-set > ul li a {
          font-family: "db_heaventmed", san-serif;
          font-weight: normal;
          color: #9B9B9B;
          font-size: 48px;
          line-height: 1; }
        body .nav-detail .user-set > ul li .underline {
          position: relative; }
        body .nav-detail .user-set > ul li a:hover {
          color: #3526D9; }
        body .nav-detail .user-set > ul li .underline:before {
          content: '';
          display: block;
          position: absolute;
          right: 0;
          bottom: 0;
          height: 5px;
          width: 0;
          transition: width 0s ease, background .5s ease; }
        body .nav-detail .user-set > ul li .underline:after {
          content: '';
          display: block;
          position: absolute;
          right: 0;
          bottom: 0;
          height: 5px;
          width: 0;
          background: #3526D9;
          transition: width .5s ease; }
        body .nav-detail .user-set > ul li .underline:hover:before {
          width: 100%;
          background: #3526D9;
          transition: width .5s ease; }
        body .nav-detail .user-set > ul li .underline:hover:after {
          width: 100%;
          background: transparent;
          transition: all 0s ease; }
      body .nav-detail .user-set > ul li:last-child {
        margin: 0; }
    body .nav-detail .user-set .logout {
      position: absolute;
      right: 0;
      bottom: 0;
      padding: 0 0 5px;
      display: none; }
      body .nav-detail .user-set .logout a {
        color: #3F3F3F;
        font-family: "db_heaventmed", san-serif;
        font-weight: normal;
        font-size: 36px;
        line-height: 1; }
      body .nav-detail .user-set .logout a:hover {
        color: #ff0000; }
      body .nav-detail .user-set .logout .underline {
        position: relative; }
      body .nav-detail .user-set .logout .underline:before {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        height: 5px;
        width: 0;
        transition: width 0s ease, background .5s ease; }
      body .nav-detail .user-set .logout .underline:after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        height: 5px;
        width: 0;
        background: #ff0000;
        transition: width .5s ease; }
      body .nav-detail .user-set .logout .underline:hover:before {
        width: 100%;
        background: #ff0000;
        transition: width .5s ease; }
      body .nav-detail .user-set .logout .underline:hover:after {
        width: 100%;
        background: transparent;
        transition: all 0s ease; }

body .nav-detail:after {
  content: '';
  width: 1px;
  height: 90%;
  background: #525252;
  display: block;
  position: absolute;
  left: 60%;
  top: 5%; }

body.menu-active-set {
  overflow: hidden; }
  body.menu-active-set header {
    width: 100%;
    height: 100%;
    -webkit-transition: unset;
    transition: unset; }
    body.menu-active-set header > div:after {
      opacity: 0; }
    body.menu-active-set header .logo {
      top: 42px;
      -webkit-transition: top 0.4s ease;
      transition: top 0.4s ease; }
      body.menu-active-set header .logo a img {
        height: 80px;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease; }
    body.menu-active-set header .nav-detail .user-set .logout {
      position: absolute;
      right: 0;
      bottom: 0;
      color: #3F3F3F;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal;
      font-size: 48px;
      line-height: 1;
      display: block;
      display: inline-block; }
  body.menu-active-set nav {
    display: none; }
  body.menu-active-set .nav-group .menu-setting a span.menu-1,
  body.menu-active-set .nav-group .menu-setting-2 a span.menu-1 {
    display: none;
    opacity: 0;
    -webkit-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease; }
  body.menu-active-set .nav-group .menu-setting a span.menu-2,
  body.menu-active-set .nav-group .menu-setting-2 a span.menu-2 {
    display: inline-block;
    opacity: 1;
    -webkit-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease; }
  body.menu-active-set .nav-group .register {
    display: none; }
  body.menu-active-set .nav-group .nav-line {
    display: none; }
  body.menu-active-set .nav-group .hd-search {
    display: none; }
  body.menu-active-set .nav-group .btn-noti {
    display: none; }
  body.menu-active-set .nav-group .ic-profile {
    display: none; }
  body.menu-active-set .nav-group .ch-app-dl {
    display: none; }
  body.menu-active-set .nav-detail {
    display: inline-block; }

header:before {
  content: "";
  width: 100%;
  height: 64px;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
  background: #00040D;
  /*background: -moz-linear-gradient(top, #191919 0%, transparent 100%); background: -webkit-linear-gradient(top, #191919 0%, transparent 100%); background: linear-gradient(to bottom, #191919 0%, transparent 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );*/
  z-index: 0;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease; }

body.w-detect .check-browser {
  width: 100%;
  height: 60px;
  text-align: center;
  background: #0076ff;
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 0 40px;
  box-sizing: border-box;
  max-width: inherit; }
  body.w-detect .check-browser p {
    color: #ffffff;
    font-family: "db_heaventmed", san-serif;
    font-size: 24px;
    line-height: 29px;
    padding: 16px 0 15px;
    position: relative;
    margin: 0 auto;
    max-width: 1280px; }
    body.w-detect .check-browser p img {
      vertical-align: top;
      margin: 0 12px 0 0; }
    body.w-detect .check-browser p a.close {
      position: absolute;
      right: 0;
      top: 20px; }

body.w-detect .check-browser:after {
  display: none; }

body.w-detect header {
  top: 60px; }

body.w-detect .wrapall {
  margin-top: 60px; }

body.maintenance-bar-detect .alert-MA {
  width: 100%;
  height: 60px;
  text-align: center;
  background: #0076ff;
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 0 40px;
  box-sizing: border-box;
  max-width: inherit; }
  body.maintenance-bar-detect .alert-MA p {
    color: #ffffff;
    font-family: "db_heaventmed", san-serif;
    font-size: 24px;
    line-height: 29px;
    padding: 16px 0 15px;
    position: relative;
    margin: 0 auto;
    max-width: 1280px; }
    body.maintenance-bar-detect .alert-MA p img {
      vertical-align: top;
      margin: 0 12px 0 0; }
    body.maintenance-bar-detect .alert-MA p a.close {
      position: absolute;
      right: 0;
      top: 20px; }

body.maintenance-bar-detect .alert-MA:after {
  display: none; }

body.maintenance-bar-detect header {
  top: 60px; }

body.maintenance-bar-detect .wrapall {
  margin-top: 60px; }

body.maintenance-bar-detect.video-content-now .wrapall {
  margin-top: 120px; }

body.maintenance-bar-detect.schedule .wrapall {
  margin-top: 160px; }

@media screen and (min-width: 1200px) {
  .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content {
    /*a { margin-right: 2.5% !important;}*/ }
    .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
    .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
    .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
    .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
    .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
    .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child {
      margin: 0 !important; } }

@media screen and (min-width: 1200px) {
  body.sub-cat header:before {
    height: 64px; }
  body.sub-cat header::after {
    content: '';
    width: 100%;
    height: 48px;
    display: inline-block;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background-color: #666; }
  body.sub-cat.series-cat header::after {
    background-color: #B91A20; }
  body.sub-cat.tvshow-cat header::after {
    background-color: #02D97F; }
  body.sub-cat.tvshow-cat header .dropdown-content > a,
  body.sub-cat.tvshow-cat header .dropdown-content > p {
    color: #00040D !important; }
  body.sub-cat.tvshow-cat header .dropdown-content p:after {
    background-color: #00040D !important; }
  body.sub-cat.news-cat header::after {
    background-color: #1A46D3; } }

@media screen and (min-width: 1200px) and (max-width: 1299px) {
  body.sub-cat.news-cat .navigation .item-dropdown .dropdown .dropdown-content a {
    margin-right: 20px; } }

@media screen and (min-width: 1200px) and (max-width: 1099px) {
  body.sub-cat.news-cat .navigation .item-dropdown .dropdown .dropdown-content a {
    margin-right: 12px; } }

@media screen and (min-width: 1200px) {
  body.sub-cat.fandom-cat header::after {
    background-color: #533FCD; }
  body.sub-cat.music-cat header::after {
    background-color: #FFD007; }
  body.sub-cat.music-cat header .dropdown-content > a,
  body.sub-cat.music-cat header .dropdown-content > p {
    color: #00040D !important; }
  body.sub-cat.music-cat header .dropdown-content p:after {
    background-color: #00040D !important; }
  body.sub-cat.special-cat header::after {
    background-color: #533FCD; }
  body.sub-cat.special-cat header .dropdown-content > a,
  body.sub-cat.special-cat header .dropdown-content > p {
    color: #F2F6FD !important; }
  body.sub-cat.special-cat header .dropdown-content p:after {
    background-color: #F2F6FD !important; } }

@media screen and (min-width: 1200px) {
  .category.sub-cat .navigation .item-dropdown .dropdown,
  .news-hp.sub-cat .navigation .item-dropdown .dropdown,
  .news-category.sub-cat .navigation .item-dropdown .dropdown,
  .lakorn.sub-cat .navigation .item-dropdown .dropdown,
  .news-video.sub-cat .navigation .item-dropdown .dropdown,
  .music-hp.sub-cat .navigation .item-dropdown .dropdown,
  .fandom-hp.sub-cat .navigation .item-dropdown .dropdown {
    display: inline-block; }
    .category.sub-cat .navigation .item-dropdown .dropdown .dropbtn,
    .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropbtn,
    .news-category.sub-cat .navigation .item-dropdown .dropdown .dropbtn,
    .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropbtn,
    .news-video.sub-cat .navigation .item-dropdown .dropdown .dropbtn,
    .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropbtn,
    .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropbtn {
      display: none; }
    .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
    .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
    .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
    .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
    .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
    .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
    .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content {
      position: absolute;
      top: 64px;
      width: 100%;
      max-width: 1280px;
      left: 0;
      margin: 0 auto;
      /*border-bottom: 1px solid #ffffff40;*/
      padding: 0;
      -webkit-transition: top 0.4s ease;
      transition: top 0.4s ease;
      min-width: 111.2%;
      height: 48px;
      display: flex;
      align-items: center; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p {
        font-family: "db_heaventmed", san-serif;
        font-size: 20px;
        line-height: 120%;
        letter-spacing: 0.25px;
        padding-right: 24px;
        margin-right: 24px;
        color: #F2F6FD;
        position: relative; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after {
        content: '';
        width: 1px;
        height: 28px;
        background-color: #F2F6FD;
        opacity: 30%;
        display: inline-block;
        position: absolute;
        top: -2px;
        right: 0; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a {
        float: left;
        margin-right: 32px;
        font-size: 18px;
        line-height: 24px;
        font-family: "db_heaventregular", san-serif;
        letter-spacing: 0.25px;
        -webkit-transition: opacity 0.4s ease;
        transition: opacity 0.4s ease;
        color: #F2F6FD;
        opacity: 70%; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active {
        -webkit-transition: opacity 0.4s ease;
        transition: opacity 0.4s ease;
        opacity: 100%;
        font-family: "db_heaventmed", san-serif; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover {
        -webkit-transition: opacity 0.4s ease;
        transition: opacity 0.4s ease;
        opacity: 100%; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child {
        margin-right: 0; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide {
        display: none; }
  .category.sub-cat .sp-banner,
  .news-hp.sub-cat .sp-banner,
  .news-category.sub-cat .sp-banner,
  .lakorn.sub-cat .sp-banner,
  .news-video.sub-cat .sp-banner,
  .music-hp.sub-cat .sp-banner,
  .fandom-hp.sub-cat .sp-banner {
    padding-top: 145px; }
  .category.sub-cat.series-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .category.sub-cat.series-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .category.sub-cat.series-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .category.sub-cat.series-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .category.sub-cat.series-cat .item-dropdown.item-special .dropdown .dropdown-content {
    display: none; }
  .category.sub-cat.tvshow-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .category.sub-cat.tvshow-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .category.sub-cat.tvshow-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .category.sub-cat.tvshow-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .category.sub-cat.tvshow-cat .item-dropdown.item-special .dropdown .dropdown-content {
    display: none; }
  .music-hp.sub-cat.music-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .music-hp.sub-cat.music-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .music-hp.sub-cat.music-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .music-hp.sub-cat.music-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .music-hp.sub-cat.music-cat .item-dropdown.item-special .dropdown .dropdown-content,
  .category.sub-cat.music-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .category.sub-cat.music-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .category.sub-cat.music-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .category.sub-cat.music-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .category.sub-cat.music-cat .item-dropdown.item-special .dropdown .dropdown-content {
    display: none; }
  .news-hp.sub-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .news-hp.sub-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .news-hp.sub-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .news-hp.sub-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .news-hp.sub-cat .item-dropdown.item-special .dropdown .dropdown-content,
  .news-category.sub-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .news-category.sub-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .news-category.sub-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .news-category.sub-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .news-category.sub-cat .item-dropdown.item-special .dropdown .dropdown-content,
  .lakorn.sub-cat.news-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .lakorn.sub-cat.news-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .lakorn.sub-cat.news-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .lakorn.sub-cat.news-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .lakorn.sub-cat.news-cat .item-dropdown.item-special .dropdown .dropdown-content,
  .news-video.sub-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .news-video.sub-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .news-video.sub-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .news-video.sub-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .news-video.sub-cat .item-dropdown.item-special .dropdown .dropdown-content,
  .category.sub-cat.news-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .category.sub-cat.news-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .category.sub-cat.news-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .category.sub-cat.news-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .category.sub-cat.news-cat .item-dropdown.item-special .dropdown .dropdown-content {
    display: none; }
  .fandom-hp.sub-cat.fandom-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .fandom-hp.sub-cat.fandom-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .fandom-hp.sub-cat.fandom-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .fandom-hp.sub-cat.fandom-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .fandom-hp.sub-cat.special-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .fandom-hp.sub-cat.special-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .fandom-hp.sub-cat.special-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .fandom-hp.sub-cat.special-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .category.sub-cat.fandom-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .category.sub-cat.fandom-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .category.sub-cat.fandom-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .category.sub-cat.fandom-cat .item-dropdown.item-music .dropdown .dropdown-content {
    display: none; }
  .category.sub-cat.special-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .category.sub-cat.special-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .category.sub-cat.special-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .category.sub-cat.special-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .category.sub-cat.special-cat .item-dropdown.item-music .dropdown .dropdown-content {
    display: none; } }

@media screen and (max-width: 1199px) {
  .category.sub-cat header:before,
  .news-hp.sub-cat header:before,
  .news-category.sub-cat header:before,
  .lakorn.sub-cat header:before,
  .news-video.sub-cat header:before,
  .music-hp.sub-cat header:before {
    height: 50px; }
  .category.sub-cat .sp-banner,
  .news-hp.sub-cat .sp-banner,
  .news-category.sub-cat .sp-banner,
  .lakorn.sub-cat .sp-banner,
  .news-video.sub-cat .sp-banner,
  .music-hp.sub-cat .sp-banner {
    padding-top: 50px; } }

@media screen and (max-width: 1199px) {
  .dropdown .dropbtn {
    color: #fff;
    text-decoration: none;
    display: inline-block;
    position: relative;
    font-size: 22px;
    font-family: db_heaventmed, san-serif;
    letter-spacing: 0.5px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    line-height: 26px;
    min-width: 200px;
    padding: 15px 0 5px;
    margin: 0;
    width: 100%; }
    .dropdown .dropbtn img {
      float: right;
      margin-top: 8px;
      transition: all 0.25s ease-in; }
  .dropdown .dropdown-content {
    width: 80%;
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden; }
    .dropdown .dropdown-content a {
      margin: 0;
      padding: 10px 12px 10px 0;
      border-bottom: 0.6px solid rgba(216, 216, 216, 0.4);
      width: 100%;
      clear: both;
      display: block;
      font-size: 18px; }
    .dropdown .dropdown-content a:first-child {
      padding: 0 12px 10px 0; }
    .dropdown .dropdown-content a:last-child {
      border-bottom: 0; }
  .dropdown.active .dropbtn img {
    transform: rotate(-180deg);
    transition: all 0.25s ease-in; }
  .dropdown.active .dropdown-content {
    max-height: 800px;
    transition: max-height 0.25s ease-in; } }

/*large screen*/
@media only screen and (min-width: 1200px) {
  header nav ul {
    margin-left: 70px; }
  .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content {
    min-width: unset; } }

/*small & large together screen*/
@media only screen and (min-width: 1200px) {
  header .btn-noti.active .noti-detail {
    height: auto !important; }
    header .btn-noti.active .noti-detail .noti-list {
      height: 350px !important; } }

/*medium screen ex.ipad navigation when exceed*/
/*for iPad pro*/
@media only screen and (max-width: 1199px) {
  body .wrapall > div {
    padding-top: 50px; } }

/*mobile screen (max: 1023) and iPad pro (size: 1024)*/
@media only screen and (max-width: 1199px) {
  body header {
    height: 50px;
    width: 100%;
    padding: 0; }
    body header > div {
      width: 100%;
      margin: 0 auto;
      display: inline-block; }
      body header > div .logo {
        left: calc(50% - 26px);
        top: 7px;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease; }
        body header > div .logo a img {
          height: 36px;
          width: auto;
          -webkit-transition: all 0.4s ease;
          transition: all 0.4s ease; }
    body header > div:after {
      width: 94%;
      margin: 0 3%; }
    body header nav {
      position: relative;
      width: 100%;
      display: none; }
      body header nav .main-nav {
        width: 20px;
        height: 20px;
        display: block;
        float: left;
        margin-left: 1%;
        background: url(/static/images/ico-nav.svg) no-repeat -141px -310px;
        margin: 20px 0 0 3%; }
        body header nav .main-nav span {
          display: block;
          text-indent: -9999px; }
      body header nav ul {
        width: 30%;
        max-width: 320px;
        min-width: 270px;
        height: 97vh;
        border-radius: 0;
        background: #191919;
        position: absolute;
        left: -300vw;
        top: 0;
        padding-top: 30px;
        z-index: 6;
        overflow: auto;
        transition: left 0.2s; }
        body header nav ul li {
          width: 225px;
          margin: 0 auto;
          text-align: left;
          margin: 0 0 0 20px;
          border-bottom: 0.6px solid rgba(216, 216, 216, 0.4); }
          body header nav ul li a:hover {
            border: none; }
        body header nav ul a {
          line-height: 26px;
          min-width: 200px;
          padding: 15px 0 10px;
          margin: 0; }
          body header nav ul a span:before {
            float: left;
            margin-right: 20px;
            height: 25px;
            background-size: 420px; }
        body header nav ul li:nth-of-type(2) a span:before {
          background-position: 2px -77px; }
        body header nav ul li:nth-of-type(3) a span:before {
          background-position: -1px -165px;
          width: 50px;
          margin-right: -4px; }
        body header nav ul li:nth-of-type(4) a span:before {
          background-position: 1px -248px;
          width: 26px; }
        body header nav ul li:nth-of-type(5) a span:before {
          background-position: -109px -1px; }
        body header nav ul li:nth-of-type(6) a span:before {
          background-position: -107px -473px;
          width: 26px; }
        body header nav ul li:nth-of-type(7) a span:before {
          background-position: 2px -543px;
          width: 26px; }
        body header nav ul li:nth-of-type(8) a span:before {
          background-position: -109px -77px; }
        body header nav ul li:nth-of-type(9) a span:before {
          background-position: -109px -165px;
          width: 25px; }
        body header nav ul li.mobile {
          display: block;
          border-top: 1px solid #fff;
          opacity: 0.5;
          margin: 40px auto;
          padding: 40px 0; }
          body header nav ul li.mobile a {
            margin: 0;
            padding: 0; }
        body header nav ul li.active a {
          border-bottom: none; }
        body header nav ul li.item-dropdown > a {
          display: none; }
        body header nav ul li.item-dropdown .dropdown {
          display: inline-block; }
        body header nav ul li:last-child {
          margin-bottom: 150px; }
    body header .member {
      right: 35px; }
      body header .member a {
        background: url(/static/images/ico-nav.svg) no-repeat -499px 0 !important; }
    body header .member.invalid a {
      background-position: -395px 0 !important; }
    body header .member.valid a {
      background: none; }
      body header .member.valid a img {
        width: 26px;
        margin-top: 0; }
    body header .nav-group {
      /*top: 9px; right: 3%;*/
      margin: 9px 3% 0 3%;
      position: unset; }
      body header .nav-group .menu-setting,
      body header .nav-group .menu-setting-2 {
        display: block;
        padding: 5px 0;
        margin-left: 10px; }
      body header .nav-group .register {
        padding: 5px 0;
        margin: 0 10px;
        display: none; }
      body header .nav-group .hd-search {
        float: left;
        padding: 5px 0;
        margin: 0;
        transition: float 0.4s ease; }
        body header .nav-group .hd-search > a {
          display: inline-block; }
      body header .nav-group .btn-noti {
        padding: 5px 0 !important;
        margin-left: 10px !important; }
      body header .nav-group .btn-noti.active {
        position: unset; }
        body header .nav-group .btn-noti.active .noti-detail {
          width: 100%;
          top: 50px;
          left: 0;
          right: 0;
          height: 83vh; }
      body header .nav-group .nav-line {
        margin: 0 5px;
        height: 34px;
        background: #ffffff80; }
      body header .nav-group .nav-line {
        display: none; }
      body header .nav-group .ic-profile {
        width: auto; }
        body header .nav-group .ic-profile > a img {
          width: 31px; }
        body header .nav-group .ic-profile .profile-dropdown {
          display: none; }
      body header .nav-group .ic-profile {
        display: none; }
      body header .nav-group .ch-app-dl {
        display: none; }
    body header .nav-detail:after {
      display: none; }
    body header .nav-detail .user-set {
      width: 100%;
      float: none;
      height: auto;
      padding: 0 0 25px; }
      body header .nav-detail .user-set .user-profile {
        width: 300px;
        margin: 0 auto;
        float: none;
        display: block;
        overflow: hidden;
        padding: 20px 0;
        text-align: center; }
        body header .nav-detail .user-set .user-profile > img {
          width: 58px;
          height: 58px;
          margin: 0 10px 0 0;
          float: none;
          display: inline-block;
          vertical-align: text-bottom; }
        body header .nav-detail .user-set .user-profile > div {
          width: 230px;
          float: none;
          display: inline; }
          body header .nav-detail .user-set .user-profile > div p {
            font-size: 24px;
            padding: 0; }
          body header .nav-detail .user-set .user-profile > div > a {
            bottom: 15px;
            background: #2F31D9;
            color: #fff;
            border: 1px solid #2F31D9; }
      body header .nav-detail .user-set > ul {
        width: 100%;
        text-align: center; }
        body header .nav-detail .user-set > ul li a {
          font-size: 36px;
          line-height: 1;
          color: #9B9B9B; }
        body header .nav-detail .user-set > ul li:last-child {
          margin: 0 0 15px; }
    body header .nav-detail > ul {
      width: 90%;
      float: none;
      border-top: 1px solid #9B9B9B;
      padding: 25px 0 0;
      margin: 0 auto;
      overflow: hidden; }
      body header .nav-detail > ul > li {
        width: 100%;
        clear: both; }
        body header .nav-detail > ul > li h3 {
          text-align: center;
          font-size: 24px; }
          body header .nav-detail > ul > li h3 a {
            cursor: pointer; }
            body header .nav-detail > ul > li h3 a img {
              display: inline-block;
              transition: all 0.25s ease-in; }
        body header .nav-detail > ul > li ul {
          margin: 0 auto;
          max-height: 0;
          transition: max-height 0.15s ease-out;
          overflow: hidden; }
          body header .nav-detail > ul > li ul li {
            text-align: left;
            margin: 0 0 15px -30px;
            padding: 0 0 0 50%; }
          body header .nav-detail > ul > li ul li:last-child {
            margin: 0 0 15px -30px;
            padding: 0 0 0 50%; }
      body header .nav-detail > ul > li.active h3 a img {
        transform: rotate(-180deg);
        transition: all 0.25s ease-in; }
      body header .nav-detail > ul > li.active ul {
        max-height: 1000px;
        transition: max-height 0.25s ease-in;
        margin-top: 0; }
  body header:before {
    height: 50px; }
  body.menu-active-set header > div {
    max-height: 1000px;
    overflow-y: scroll;
    height: 100%; }
    body.menu-active-set header > div .logo {
      top: 42px;
      left: 50%;
      margin: 0 0 0 -58px;
      -webkit-transition: all 0.4s ease;
      transition: all 0.4s ease; }
      body.menu-active-set header > div .logo a img {
        width: 116px;
        height: auto;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease; }
  body.menu-active-set header .nav-detail .user-set .logout {
    position: static;
    width: 100%;
    text-align: center;
    padding: 20px 0 0;
    padding: 5px 0 0;
    font-size: unset; }
    body.menu-active-set header .nav-detail .user-set .logout a {
      font-size: 28px;
      line-height: 1;
      color: #3F3F3F; }
  /*menu active mobile*/
  body.menu-active {
    overflow: hidden; }
    body.menu-active .main-nav {
      position: relative;
      z-index: 7;
      width: 250px;
      padding: 15px 0 10px;
      transition: all 0.2s;
      background-image: none;
      background-color: #191919;
      margin: 0; }
      body.menu-active .main-nav span {
        background: url(/static/images/ico-nav.svg) no-repeat -331px -296px;
        width: 14px;
        height: 14px;
        float: right; }
    body.menu-active ul {
      left: 0;
      transition: left 0.2s; }
    body.menu-active nav:after {
      content: '';
      display: block;
      width: 100%;
      height: 100vh;
      background: #000;
      z-index: 2;
      opacity: 0.8; }
    body.menu-active header .logo {
      z-index: 2; }
    body.menu-active #button.show {
      opacity: 0; }
  /*footer mobile*/
  footer {
    width: 100%;
    text-align: center;
    border-radius: 5px 5px 0 0;
    margin: 50px 0 0;
    padding: 40px 1% 10px;
    box-size: border-box; }
    footer p {
      padding: 0 3% 3px;
      line-height: 25px; }
    footer .footer-secondary p,
    footer .footer-secondary ul {
      width: 100%;
      text-align: left;
      padding: 0 0 10px; }
    footer .footer-secondary ul li {
      display: block;
      padding: 10px 0; }
    footer .footer-secondary:before {
      width: 88%;
      left: 2%; }
  body.noti-active {
    overflow: hidden; }
    body.noti-active header:before {
      opacity: 1;
      background: rgba(25, 25, 25, 0.9);
      -webkit-transition: unset;
      transition: unset; }
    body.noti-active .btn-noti .noti-detail .noti-list {
      height: 100%; }
      body.noti-active .btn-noti .noti-detail .noti-list ul li > a div {
        width: 63%; }
        body.noti-active .btn-noti .noti-detail .noti-list ul li > a div h2 span:first-child {
          max-width: 85%; }
        body.noti-active .btn-noti .noti-detail .noti-list ul li > a div h2.title span:first-child {
          max-width: 100%;
          margin-right: 0; }
  body.w-detect .check-browser {
    padding: 0 2%; }
  body.maintenance-bar-detect .alert-MA {
    padding: 0 2%; }
  body.maintenance-bar-detect.video-content-now .wrapall {
    margin-top: 105px; }
  body.maintenance-bar-detect.video-content-now header:before {
    top: 60px; }
  body.maintenance-bar-detect.schedule .wrapall {
    margin-top: 145px; }
  body.maintenance-bar-detect.schedule header:before {
    top: 60px; } }

/*mobile screen */
@media only screen and (max-width: 767px) {
  body header nav ul {
    height: 96.5vh; }
  body header .nav-group .ic-profile {
    display: none; }
  body .ui.modals.dimmer.transition.visible.active {
    padding-left: 0;
    padding-right: 0; }
  body.w-detect .check-browser {
    text-align: left;
    height: 72px;
    top: -72px; }
    body.w-detect .check-browser p {
      font-size: 16px;
      line-height: 19px;
      display: inline-block;
      padding: 19px 0 15px; }
      body.w-detect .check-browser p > img {
        float: left;
        margin: 5px 10px 0 2px; }
      body.w-detect .check-browser p span {
        float: left;
        width: 75%; }
      body.w-detect .check-browser p a img {
        margin: 6px 12px 0 0; }
  body.w-detect header {
    top: 72px; }
  body.w-detect .wrapall {
    margin-top: 72px; } }

/*mobile screen */
@media only screen and (max-width: 1023px) and (min-width: 576px) {
  body.maintenance-bar-detect .alert-MA p {
    font-size: 20px; } }

@media only screen and (max-width: 576px) {
  body.noti-active .btn-noti .noti-detail .noti-list ul li > a div {
    width: 70%; }
    body.noti-active .btn-noti .noti-detail .noti-list ul li > a div h2 span:first-child {
      max-width: 82%;
      margin-right: 3px; } }

/*mobile screen */
@media only screen and (max-width: 360px) {
  body.noti-active .btn-noti .noti-detail .noti-list ul li > a div {
    width: 65%; }
    body.noti-active .btn-noti .noti-detail .noti-list ul li > a div h2 span:first-child {
      max-width: 76%;
      margin-right: 3px; } }

@media only screen and (max-width: 320px) {
  body.maintenance-bar-detect .alert-MA p {
    padding: 10px 0 5px; }
    body.maintenance-bar-detect .alert-MA p > img {
      margin: 15px 10px 0 2px; } }

@-webkit-keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.5); }
  20% {
    -webkit-transform: scaleY(1); } }

@keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5); }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1); } }

body.animating.in.dimmable, body.dimmed.dimmable {
  overflow: hidden !important; }

.blocker {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 13 !important;
  padding: 20px;
  box-sizing: border-box;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center; }

.blocker:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.05em; }

.blocker.behind {
  background-color: transparent; }

.modal {
  display: none;
  vertical-align: middle;
  position: relative;
  z-index: 2;
  max-width: 500px;
  box-sizing: border-box;
  width: 90%;
  background: #121212;
  padding: 50px 30px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 10px #000;
  -moz-box-shadow: 0 0 10px #000;
  -o-box-shadow: 0 0 10px #000;
  -ms-box-shadow: 0 0 10px #000;
  box-shadow: 0 0 10px #000;
  text-align: left;
  color: #fff; }
  .modal .logo {
    display: block;
    margin: 0 auto 25px; }
  .modal h3 {
    text-align: center;
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    font-weight: normal;
    font-size: 36px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin: 0 0 10px; }
  .modal > p {
    text-align: center;
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    font-size: 26px;
    line-height: 1.2;
    color: #9B9B9B;
    margin: 0 0 10px; }
  .modal > p.text-w {
    color: #ffffff;
    margin: 0; }
    .modal > p.text-w a {
      color: #0076FF;
      text-decoration: underline; }
    .modal > p.text-w a:hover {
      text-decoration: none; }
  .modal > p.text-s {
    font-size: 20px;
    line-height: 28px;
    margin: 0; }
  .modal > p.highlight {
    color: #0076FF; }
  .modal > a.btn {
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    max-width: 214px;
    padding: 20.5px 0;
    clear: both;
    display: block;
    margin: 15px auto 0;
    text-align: center;
    background: #0F62FE;
    font-size: 24px;
    border-radius: 5px; }
  .modal h4 {
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    font-size: 48px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 10px; }
    .modal h4 a {
      color: #0076FF;
      text-decoration: underline; }
    .modal h4 a:hover {
      text-decoration: none; }
  .modal a.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    display: block;
    width: 19px;
    height: 19px;
    text-indent: -9999px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("/static/images/icon-close.svg"); }
  .modal a.btn-login {
    display: block;
    margin: 0 auto 10px;
    width: 348px;
    height: 55px;
    border-radius: 10px;
    cursor: pointer;
    text-align: left; }
    .modal a.btn-login img {
      margin: 7px 0;
      float: none; }
    .modal a.btn-login span {
      float: none;
      font-size: 29px;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal;
      margin: 16px 16px 0;
      width: auto;
      margin-right: 0;
      display: inline-block; }
  .modal a.log-Facebook {
    background-color: #3077E9; }
    .modal a.log-Facebook img {
      width: 20px;
      height: auto;
      display: inline-block;
      vertical-align: middle;
      padding-left: 60px;
      margin-top: -1px; }
    .modal a.log-Facebook span {
      margin: 18px 7px 0; }
  .modal a.log-Google {
    background-color: #ffffff;
    color: #707070; }
    .modal a.log-Google img {
      width: 18px;
      height: auto;
      display: inline-block;
      vertical-align: middle;
      padding-left: 60px;
      margin-top: 0; }
    .modal a.log-Google span {
      margin: 18px 7px 0; }
  .modal a.log-Line {
    background-color: #01B901; }
    .modal a.log-Line img {
      width: 24px;
      height: auto;
      display: inline-block;
      vertical-align: middle;
      padding-left: 58px;
      margin-top: 0; }
    .modal a.log-Line span {
      margin: 18px 2px 0; }
  .modal a.log-Apple {
    border-radius: 0;
    overflow: hidden; }
    .modal a.log-Apple img {
      margin: 0;
      width: 100%; }
  .modal .modal-toggle {
    margin: 20px auto 0;
    width: 346px; }
    .modal .modal-toggle .toggle-navigation {
      width: 100%;
      position: relative;
      clear: both;
      margin: 20px 0;
      overflow: hidden;
      border-top: 1px solid #ffffff;
      padding-top: 20px; }
      .modal .modal-toggle .toggle-navigation > li {
        width: 50%;
        display: inline-block;
        float: left;
        text-align: center;
        color: #9B9B9B;
        font-size: 24px;
        font-family: "db_heaventmed", san-serif;
        font-weight: normal;
        cursor: pointer; }
        .modal .modal-toggle .toggle-navigation > li a {
          color: #9B9B9B; }
      .modal .modal-toggle .toggle-navigation .tab1 {
        width: 45%; }
      .modal .modal-toggle .toggle-navigation .tab2 {
        width: 55%; }
    .modal .modal-toggle .toggle-navigation:before {
      content: "|";
      position: absolute;
      left: 44%;
      top: 20px;
      font-size: 30px; }
    .modal .modal-toggle .toggle-detail {
      clear: both;
      width: 100%; }
      .modal .modal-toggle .toggle-detail > li {
        display: none;
        width: 100%;
        overflow: hidden; }
      .modal .modal-toggle .toggle-detail > li.active {
        display: block; }
  .modal .headline {
    position: relative;
    font-size: 24px;
    margin: 0 0 20px; }
    .modal .headline span {
      background: #121212;
      padding: 0 15px; }
  .modal .headline:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #ffffff;
    position: absolute;
    top: 50%;
    z-index: -1; }
  .modal .text-captcha {
    margin: 20px auto 0;
    color: #9B9B9B;
    font-size: 16px;
    text-align: center;
    width: 70%; }
    .modal .text-captcha a {
      color: #9B9B9B;
      text-decoration: underline; }
    .modal .text-captcha a:hover {
      text-decoration: none; }
  .modal .modal-toggle.error h3.headline {
    margin: 0; }
  .modal .modal-toggle.error > span {
    color: #ff0000;
    width: 100%;
    display: inline-block;
    text-align: center; }
    .modal .modal-toggle.error > span a {
      text-decoration: underline;
      color: #ff0000; }
    .modal .modal-toggle.error > span a:hover {
      text-decoration: none; }
  .modal .checkbox.error label {
    color: #fff; }
  .modal .checkbox.error span {
    text-align: center;
    display: block; }
  .modal p.barOr {
    position: relative;
    width: 348px;
    font-family: "db_heaventmed", san-serif;
    margin: 28px auto;
    color: #fff; }
    .modal p.barOr span {
      background: #121212;
      position: relative;
      padding: 0 20px; }
  .modal p.barOr:before {
    content: '';
    height: 1px;
    width: 100%;
    background: #fff;
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 1px); }

.modal-standardBox {
  display: block;
  vertical-align: middle;
  position: relative;
  z-index: 2;
  max-width: 500px;
  box-sizing: border-box;
  width: 90%;
  background: #121212;
  padding: 50px 30px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 10px #000;
  -moz-box-shadow: 0 0 10px #000;
  -o-box-shadow: 0 0 10px #000;
  -ms-box-shadow: 0 0 10px #000;
  box-shadow: 0 0 10px #000;
  text-align: left;
  color: #fff;
  margin: 0 auto; }
  .modal-standardBox .logo {
    display: block;
    margin: 0 auto 25px; }
  .modal-standardBox h3 {
    text-align: center;
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    font-weight: normal;
    font-size: 36px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin: 0 0 10px; }
  .modal-standardBox > p {
    text-align: center;
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    font-size: 26px;
    line-height: 1.2;
    color: #9B9B9B;
    margin: 0 0 10px; }
  .modal-standardBox > p.text-w {
    color: #ffffff;
    margin: 0; }
    .modal-standardBox > p.text-w a {
      color: #0076FF;
      text-decoration: underline; }
    .modal-standardBox > p.text-w a:hover {
      text-decoration: none; }
  .modal-standardBox > p.text-s {
    font-size: 20px;
    line-height: 28px;
    margin: 0; }
  .modal-standardBox > p.highlight {
    color: #0076FF; }
  .modal-standardBox > a.btn {
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    max-width: 214px;
    padding: 20.5px 0;
    clear: both;
    display: block;
    margin: 15px auto 0;
    text-align: center;
    background: #0F62FE;
    font-size: 24px;
    border-radius: 5px; }
  .modal-standardBox h4 {
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    font-size: 48px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 10px; }
    .modal-standardBox h4 a {
      color: #0076FF;
      text-decoration: underline; }
    .modal-standardBox h4 a:hover {
      text-decoration: none; }
  .modal-standardBox a.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    display: block;
    width: 19px;
    height: 19px;
    text-indent: -9999px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("/static/images/icon-close.svg"); }
  .modal-standardBox a.btn-login {
    display: block;
    margin: 0 auto 10px;
    width: 348px;
    height: 55px;
    border-radius: 10px;
    cursor: pointer;
    text-align: left; }
    .modal-standardBox a.btn-login img {
      margin: 7px 0;
      float: none; }
    .modal-standardBox a.btn-login span {
      float: none;
      font-size: 29px;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal;
      margin: 16px 16px 0;
      width: auto;
      margin-right: 0;
      display: inline-block; }
  .modal-standardBox a.log-Facebook {
    background-color: #3077E9; }
    .modal-standardBox a.log-Facebook img {
      width: 20px;
      height: auto;
      display: inline-block;
      vertical-align: middle;
      padding-left: 60px;
      margin-top: -1px; }
    .modal-standardBox a.log-Facebook span {
      margin: 18px 7px 0; }
  .modal-standardBox a.log-Google {
    background-color: #ffffff;
    color: #707070; }
    .modal-standardBox a.log-Google img {
      width: 18px;
      height: auto;
      display: inline-block;
      vertical-align: middle;
      padding-left: 60px;
      margin-top: 0; }
    .modal-standardBox a.log-Google span {
      margin: 18px 7px 0; }
  .modal-standardBox a.log-Line {
    background-color: #01B901; }
    .modal-standardBox a.log-Line img {
      width: 24px;
      height: auto;
      display: inline-block;
      vertical-align: middle;
      padding-left: 58px;
      margin-top: 0; }
    .modal-standardBox a.log-Line span {
      margin: 18px 2px 0; }
  .modal-standardBox a.log-Apple {
    border-radius: 0;
    overflow: hidden; }
    .modal-standardBox a.log-Apple img {
      margin: 0;
      width: 100%; }
  .modal-standardBox .modal-toggle {
    margin: 20px auto 0;
    width: 346px; }
    .modal-standardBox .modal-toggle .toggle-navigation {
      width: 100%;
      position: relative;
      clear: both;
      margin: 20px 0;
      overflow: hidden;
      border-top: 1px solid #ffffff;
      padding-top: 20px; }
      .modal-standardBox .modal-toggle .toggle-navigation > li {
        width: 50%;
        display: inline-block;
        float: left;
        text-align: center;
        color: #9B9B9B;
        font-size: 24px;
        font-family: "db_heaventmed", san-serif;
        font-weight: normal;
        cursor: pointer; }
        .modal-standardBox .modal-toggle .toggle-navigation > li a {
          color: #9B9B9B; }
      .modal-standardBox .modal-toggle .toggle-navigation .tab1 {
        width: 45%; }
      .modal-standardBox .modal-toggle .toggle-navigation .tab2 {
        width: 55%; }
    .modal-standardBox .modal-toggle .toggle-navigation:before {
      content: "|";
      position: absolute;
      left: 44%;
      top: 20px;
      font-size: 30px; }
    .modal-standardBox .modal-toggle .toggle-detail {
      clear: both;
      width: 100%; }
      .modal-standardBox .modal-toggle .toggle-detail > li {
        display: none;
        width: 100%;
        overflow: hidden; }
      .modal-standardBox .modal-toggle .toggle-detail > li.active {
        display: block; }
  .modal-standardBox .headline {
    position: relative;
    font-size: 24px;
    margin: 0 0 20px; }
    .modal-standardBox .headline span {
      background: #121212;
      padding: 0 15px; }
  .modal-standardBox .headline:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #ffffff;
    position: absolute;
    top: 50%;
    z-index: -1; }
  .modal-standardBox .text-captcha {
    margin: 20px auto 0;
    color: #9B9B9B;
    font-size: 16px;
    text-align: center;
    width: 70%; }
    .modal-standardBox .text-captcha a {
      color: #9B9B9B;
      text-decoration: underline; }
    .modal-standardBox .text-captcha a:hover {
      text-decoration: none; }
  .modal-standardBox .modal-toggle.error h3.headline {
    margin: 0; }
  .modal-standardBox .modal-toggle.error > span {
    color: #ff0000;
    width: 100%;
    display: inline-block;
    text-align: center; }
    .modal-standardBox .modal-toggle.error > span a {
      text-decoration: underline;
      color: #ff0000; }
    .modal-standardBox .modal-toggle.error > span a:hover {
      text-decoration: none; }
  .modal-standardBox .checkbox.error label {
    color: #fff; }
  .modal-standardBox .checkbox.error span {
    text-align: center;
    display: block; }
  .modal-standardBox p.barOr {
    position: relative;
    width: 348px;
    font-family: "db_heaventmed", san-serif;
    margin: 28px auto;
    color: #fff; }
    .modal-standardBox p.barOr span {
      background: #121212;
      position: relative;
      padding: 0 20px; }
  .modal-standardBox p.barOr:before {
    content: '';
    height: 1px;
    width: 100%;
    background: #fff;
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 1px); }

.modal-spinner {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  padding: 12px 16px;
  border-radius: 5px;
  background-color: #111;
  height: 20px; }
  .modal-spinner > div {
    border-radius: 100px;
    background-color: #fff;
    height: 20px;
    width: 2px;
    margin: 0 1px;
    display: inline-block;
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out; }
  .modal-spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s; }
  .modal-spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s; }
  .modal-spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s; }

form {
  margin: 20px 0; }
  form fieldset {
    border: none; }
    form fieldset ul {
      width: 86%;
      margin: 0 auto;
      overflow: hidden; }
      form fieldset ul li {
        clear: both;
        width: 100%;
        overflow: hidden;
        margin: 0 0 24px; }
        form fieldset ul li label {
          width: 100%;
          color: #9B9B9B;
          font-size: 24px;
          font-family: "db_heaventmed", san-serif;
          font-weight: normal; }
        form fieldset ul li input[type="text"],
        form fieldset ul li input[type="password"] {
          border: none;
          border-bottom: 1px solid #9B9B9B;
          display: block;
          background: none;
          width: 96%;
          color: #fff;
          padding: 0 2%;
          font-size: 24px;
          font-family: "db_heaventmed", san-serif;
          font-weight: normal; }
        form fieldset ul li input[type="password"]:-ms-input-placeholder {
          font-family: "db_heaventregular", san-serif;
          font-size: 14px; }
        form fieldset ul li input[type="password"]::-webkit-input-placeholder {
          font-family: "db_heaventregular", san-serif;
          font-size: 14px; }
        form fieldset ul li input[type="password"]:-moz-placeholder {
          font-family: "db_heaventregular", san-serif;
          font-size: 14px; }
        form fieldset ul li input[type="password"]::-moz-placeholder {
          font-family: "db_heaventregular", san-serif;
          font-size: 14px; }
        form fieldset ul li input[disabled] {
          background: #9b9b9b;
          color: #fff; }
      form fieldset ul li.checkbox {
        margin: 0 0 15px; }
        form fieldset ul li.checkbox p {
          margin-bottom: 15px;
          color: #9B9B9B;
          font-size: 16px;
          font-family: "db_heaventregular", san-serif;
          line-height: 1; }
          form fieldset ul li.checkbox p a {
            color: #0076FF;
            text-decoration: underline; }
          form fieldset ul li.checkbox p a:hover {
            text-decoration: none; }
          form fieldset ul li.checkbox p a:first-of-type {
            display: inline-block; }
        form fieldset ul li.checkbox label {
          font-size: 15px;
          color: #fff;
          float: left;
          width: auto; }
          form fieldset ul li.checkbox label input[type="checkbox"] {
            border-radius: 0;
            margin-right: 8px; }
          form fieldset ul li.checkbox label a {
            color: #0076FF;
            text-decoration: underline; }
          form fieldset ul li.checkbox label a:hover {
            text-decoration: none; }
        form fieldset ul li.checkbox > a {
          float: left;
          color: #0076FF;
          text-decoration: none;
          font-size: 24px;
          line-height: 28px; }
        form fieldset ul li.checkbox > a:hover {
          text-decoration: none; }
        form fieldset ul li.checkbox > a:last-child {
          float: right; }
      form fieldset ul li.focus label {
        color: #ffffff; }
      form fieldset ul li.focus input[type="text"] {
        /*border-bottom: 1px solid #fff;*/ }
      form fieldset ul li.error label {
        color: #ff0000; }
      form fieldset ul li.error span {
        color: #ff0000; }
      form fieldset ul li.error input[type="text"], form fieldset ul li.error input[type="password"] {
        /*border-bottom: 1px solid #ff0000;*/ }
      form fieldset ul li.error .ant-calendar-picker.ant-calendar-picker-large > div {
        border-bottom: 1px solid #ff0000; }
      form fieldset ul li.eye > div {
        position: relative; }
        form fieldset ul li.eye > div input[type="text"], form fieldset ul li.eye > div input[type="password"] {
          padding: 0 10% 0 2%;
          width: 88%; }
        form fieldset ul li.eye > div p {
          position: absolute;
          top: 5px;
          right: 0;
          cursor: pointer;
          width: 20px;
          height: 14px;
          background: url("/static/images/eye-slash.svg") 0 0 no-repeat;
          text-indent: -9999px; }
      form fieldset ul li.eye > div.active {
        position: relative; }
        form fieldset ul li.eye > div.active p {
          background-image: url("/static/images/eye.svg");
          background-position: 1px 0; }
      form fieldset ul li.DateOfBirth .ant-calendar-picker.ant-calendar-picker-large > div {
        border-bottom: 1px solid #9B9B9B; }
        form fieldset ul li.DateOfBirth .ant-calendar-picker.ant-calendar-picker-large > div > input {
          border-bottom: none;
          width: 96%;
          color: #fff;
          padding: 0 2%;
          font-size: 24px;
          font-family: "db_heaventmed", san-serif;
          font-weight: normal; }
      form fieldset ul li .box {
        margin: 4px 0 0;
        clear: both;
        display: block; }
        form fieldset ul li .box div.radio {
          width: 33%;
          float: left; }
    form fieldset input[type="submit"], form fieldset button[type="submit"] {
      width: 100%;
      background: #0F62FE;
      border-radius: 3px;
      border: none;
      color: #fff;
      font-size: 22px;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal;
      padding: 13px 0px;
      cursor: pointer; }

.tem2 form fieldset ul {
  min-height: auto;
  margin: 0 auto 20px; }

.tem2 form fieldset input[type="submit"], .tem2 form fieldset button[type="submit"] {
  max-width: 214px;
  display: block;
  margin: 0 auto; }

.tem2 > div {
  text-align: center;
  margin: 0; }
  .tem2 > div p {
    font-size: 26px;
    color: #9B9B9B;
    line-height: 1;
    font-family: "db_heaventlight", san-serif; }
    .tem2 > div p span {
      color: #0076FF;
      font-size: 24px; }
  .tem2 > div p:last-child span {
    color: #ffffff;
    font-size: 30px; }
  .tem2 > div .btn-group {
    padding: 35px 0 0; }
    .tem2 > div .btn-group a {
      text-align: center;
      max-width: 191px;
      width: 46%;
      margin-right: 4%;
      display: inline-block;
      padding: 9.5px 0px;
      border-radius: 3px;
      font-size: 22px;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal; }
      .tem2 > div .btn-group a:hover {
        text-decoration: none; }
    .tem2 > div .btn-group a:last-child {
      margin-right: 0; }
    .tem2 > div .btn-group a.cancel {
      background: #4A4A4A; }
    .tem2 > div .btn-group a.agree {
      background: #0F62FE; }
  .tem2 > div > a {
    background: #0F62FE;
    text-align: center;
    max-width: 191px;
    width: 46%;
    display: inline-block;
    padding: 10.5px 0px;
    border-radius: 3px;
    font-size: 22px;
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    margin-top: 35px; }

.form-group {
  display: block;
  margin-bottom: 15px; }

.form-group input {
  padding: 0;
  /*display: none;*/
  height: initial;
  width: initial;
  display: inline-block;
  opacity: 0;
  margin-bottom: 0;
  cursor: pointer;
  position: absolute; }

.form-group label {
  position: relative;
  cursor: pointer; }

.form-group label:before {
  content: '';
  -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 7px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 5px;
  border-radius: 3px;
  background: #514E4E;
  margin-top: 0; }

.form-group input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 1px;
  left: 5px;
  width: 4px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg); }

.register .form-group input:checked + label:after {
  top: 4px; }

.accept-box {
  width: 348px;
  margin: 15px auto 0;
  text-align: left; }
  .accept-box a {
    color: #0076FF;
    text-decoration: underline; }
  .accept-box a:hover {
    text-decoration: none; }

.accept-box.error span {
  color: #ff0000;
  display: inline-block;
  clear: both;
  text-align: center; }

/* The container */
.container-checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

/* Hide the browser's default checkbox */
.container-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer; }

/* Create a custom checkbox */
.container-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 19px;
  width: 19px;
  border: 1px solid #191919;
  border-radius: 4px;
  background-color: #f2f2f2; }

/* On mouse-over, add a grey background color */
.container-checkbox:hover input ~ .checkmark {
  background-color: #f2f2f2; }

/* When the checkbox is checked, add a blue background */
.container-checkbox input:checked ~ .checkmark {
  background-color: #2196F3; }

/* Create the checkmark/indicator (hidden when not checked) */
.container-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none; }

/* Show the checkmark when checked */
.container-checkbox input:checked ~ .checkmark:after {
  display: block; }

/* Style the checkmark/indicator */
.container-checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }

.form-check {
  margin: 12px 40px; }
  .form-check .checkmark-box {
    text-align: left;
    font-family: "db_heaventmed", san-serif;
    font-size: 20px;
    line-height: 16px;
    background: #D8DBE2;
    padding: 14px 18px;
    margin-bottom: 30px; }
  .form-check .container-checkbox {
    font-family: "db_heaventmed", san-serif;
    font-size: 20px;
    line-height: 16px;
    color: #191919;
    padding-top: 3px;
    padding-left: 36px;
    margin-bottom: 0; }
    .form-check .container-checkbox a {
      color: #0076ff;
      text-decoration: underline; }
    .form-check .container-checkbox .checkmark {
      width: 20px;
      height: 20px;
      border-radius: 4px; }
    .form-check .container-checkbox .checkmark:after {
      left: 7px;
      top: 2px;
      border-width: 0 1.5px 1.5px 0; }
    .form-check .container-checkbox input:checked ~ .checkmark {
      background-color: #1f40d9;
      border: 1px solid #1f40d9; }
  .form-check button[type="button"] {
    font-family: "db_heaventregular", san-serif;
    font-size: 24px;
    line-height: 28px;
    width: 320px;
    text-align: center;
    background: #1f40d9;
    padding: 10px 0;
    color: #fff;
    border-radius: 4px;
    cursor: pointer; }
  .form-check button[type="button"]:disabled {
    background-color: #9b9b9b;
    cursor: default; }
  .form-check .not-agree {
    background: none !important; }

.form-check fieldset:disabled .container-checkbox {
  cursor: default;
  color: #9b9b9b; }
  .form-check fieldset:disabled .container-checkbox .checkmark {
    border: 1px solid #9b9b9b; }

.form-check fieldset:disabled button[type="button"] {
  background: #9b9b9b;
  cursor: default; }

.form-check.form-policy .checkmark-box {
  text-align: center;
  margin-bottom: 24px; }

.form-check.form-policy button[type="button"] {
  display: block;
  margin: 0 auto; }

.form-check.form-policy button[type="button"].not-agree {
  margin-top: 24px;
  width: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #7B7E85; }

.profile .modal {
  max-width: 300px; }
  .profile .modal h3 {
    margin: 0; }
  .profile .modal form.edit fieldset ul {
    width: 100%;
    margin: 0; }
    .profile .modal form.edit fieldset ul li {
      margin-bottom: 20px; }
    .profile .modal form.edit fieldset ul li.gender input {
      margin-left: 3px; }
    .profile .modal form.edit fieldset ul li.gender label {
      margin-right: 10px;
      font-size: 20px;
      color: #fff; }
  .profile .modal form.edit fieldset a {
    color: #fff;
    background: #9A9999;
    width: 48%;
    display: inline-block;
    text-align: center;
    padding: 10px 0;
    font-size: 22px;
    font-family: "db_heaventmed", san-serif;
    border-radius: 3px;
    float: left; }
  .profile .modal form.edit fieldset input[type="submit"], .profile .modal form.edit fieldset button[type="submit"] {
    width: 48%;
    padding: 8px 0px;
    float: right; }

.profile .modal.tem2 {
  max-width: 500px; }

.profile #delete-acc.tem2 h3 {
  margin: 0 0 5px; }

.profile #delete-acc.tem2 > div p {
  font-size: 18px;
  color: #fff;
  margin: 0 0 10px;
  font-family: "db_heaventregular", san-serif; }
  .profile #delete-acc.tem2 > div p span {
    font-size: 18px;
    color: #fff; }

.profile #delete-acc.tem2 > div p.btn-group {
  padding: 10px 0 0; }

.profile #delete-acc.tem2 > div p.btn-group.has-active-subscription {
  padding: 20px 0 10px; }

.modal.modal-login {
  padding: 80px 30px; }
  .modal.modal-login > h3 {
    font-size: 32px;
    line-height: 18px;
    margin: 0 0 32px;
    letter-spacing: 0; }
  .modal.modal-login p.regis {
    font-family: "db_heaventregular", san-serif;
    font-size: 20px;
    line-height: 18px;
    color: #fff; }
    .modal.modal-login p.regis a {
      color: #0076ff;
      margin: 0 0 0 20px; }
  .modal.modal-login p.captcha {
    font-family: "db_heaventregular", san-serif;
    color: #9b9b9b;
    font-size: 18px;
    line-height: 24px;
    width: 284px;
    margin: 140px auto 0; }
    .modal.modal-login p.captcha span {
      display: block; }
      .modal.modal-login p.captcha span a {
        color: #9b9b9b;
        text-decoration: underline; }

.modal-center.term-condition {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 12;
  padding: 20px;
  box-sizing: border-box;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center; }
  .modal-center.term-condition .detail {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 960px;
    background: #fff;
    padding: 40px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    -o-box-shadow: 0 0 10px #000;
    -ms-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    text-align: center;
    color: #191919;
    height: calc(100vh - 40px); }
    .modal-center.term-condition .detail > h3 {
      font-size: 32px;
      line-height: 32px;
      margin: 0 0 24px;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal; }
      .modal-center.term-condition .detail > h3 span {
        display: block; }
    .modal-center.term-condition .detail .content {
      height: calc(83vh - 367px);
      overflow-y: scroll;
      padding: 0 94px;
      margin: 0 auto;
      text-align: left;
      overflow-x: hidden;
      width: calc(100% - 188px); }
      .modal-center.term-condition .detail .content .policy h2 {
        text-indent: 0; }
      .modal-center.term-condition .detail .content .policy h4 {
        font-weight: normal; }
      .modal-center.term-condition .detail .content .policy p {
        text-indent: 0; }
    .modal-center.term-condition .detail .content.contentHeight {
      height: calc(83vh - 280px); }
    .modal-center.term-condition .detail .pdpaStep {
      width: calc(100% - 188px);
      margin: 0 auto 24px;
      display: flex;
      position: relative; }
      .modal-center.term-condition .detail .pdpaStep > p {
        width: 50%;
        text-align: center;
        flex: 0 0 50%;
        font-family: "db_heaventmed", san-serif;
        font-weight: normal;
        font-size: 24px;
        color: #7B7E85;
        margin: 0; }
        .modal-center.term-condition .detail .pdpaStep > p span {
          display: block; }
        .modal-center.term-condition .detail .pdpaStep > p span.check {
          width: 18px;
          height: 18px;
          border: 2px solid #7B7E85;
          border-radius: 100%;
          display: inline-block;
          position: relative;
          background-color: #fff;
          padding: 7px;
          margin-top: 8px;
          box-sizing: unset; }
        .modal-center.term-condition .detail .pdpaStep > p span.check:after {
          content: '';
          width: 18px;
          height: 18px;
          display: inline-block;
          background-color: #7B7E85;
          border-radius: 100%; }
    .modal-center.term-condition .detail .pdpaStep.first > p:first-child {
      color: #0F62FE; }
      .modal-center.term-condition .detail .pdpaStep.first > p:first-child span.check {
        border: 2px solid #0F62FE; }
      .modal-center.term-condition .detail .pdpaStep.first > p:first-child span.check:after {
        background-color: #0F62FE; }
    .modal-center.term-condition .detail .pdpaStep.second > p:last-child {
      color: #0F62FE; }
      .modal-center.term-condition .detail .pdpaStep.second > p:last-child span.check {
        border: 2px solid #0F62FE; }
      .modal-center.term-condition .detail .pdpaStep.second > p:last-child span.check:after {
        background-color: #0F62FE; }
    .modal-center.term-condition .detail .pdpaStep:after {
      content: '';
      height: 2px;
      width: 50%;
      background-color: #7B7E85;
      display: block;
      position: absolute;
      bottom: 17px;
      left: 25%;
      z-index: -1; }
    .modal-center.term-condition .detail .pdpaStep.second:after {
      background-color: #0F62FE; }
    .modal-center.term-condition .detail .form-check {
      padding: 0; }
      .modal-center.term-condition .detail .form-check fieldset {
        padding: .35em .75em .625em; }
      .modal-center.term-condition .detail .form-check .checkmark-box {
        background-color: #0F62FE;
        border-radius: 12px;
        color: #fff; }
      .modal-center.term-condition .detail .form-check .container-checkbox {
        color: #fff;
        font-size: 16px; }
        .modal-center.term-condition .detail .form-check .container-checkbox a {
          color: #fff; }
        .modal-center.term-condition .detail .form-check .container-checkbox .checkmark {
          border: 1px solid #fff;
          background-color: #0F62FE;
          box-sizing: unset; }
        .modal-center.term-condition .detail .form-check .container-checkbox input:checked ~ .checkmark {
          background-color: #fff;
          border: 1px solid #fff; }
        .modal-center.term-condition .detail .form-check .container-checkbox .checkmark:after {
          border: solid #0F62FE;
          border-width: 0 2px 2px 0; }
      .modal-center.term-condition .detail .form-check button[type="button"] {
        background-color: #0F62FE; }
      .modal-center.term-condition .detail .form-check button[type="button"]:disabled {
        background-color: #9b9b9b;
        cursor: default; }
      .modal-center.term-condition .detail .form-check .not-agree {
        background: none; }

.scroll-style-3::-webkit-scrollbar-track {
  -webkit-box-shadow: unset;
  border-radius: 10px;
  background-color: #fff; }

.scroll-style-3::-webkit-scrollbar {
  width: 5px;
  background-color: #fff; }

.scroll-style-3::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: unset;
  background-color: #707070; }

.scroll-style-3 {
  scrollbar-color: #0F62FE #ffffff;
  scrollbar-width: thin; }

.scroll-style-3::-webkit-scrollbar {
  width: 8px;
  height: 80px; }

.scroll-style-3::-webkit-scrollbar-button {
  width: 0px;
  height: 0px; }

.scroll-style-3::-webkit-scrollbar-thumb {
  background: #0F62FE;
  border-radius: 0px; }

.scroll-style-3::-webkit-scrollbar-thumb:hover {
  background: #0F62FE; }

.scroll-style-3::-webkit-scrollbar-thumb:active {
  background: #0F62FE; }

.scroll-style-3::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 0px; }

.scroll-style-3::-webkit-scrollbar-track:hover {
  background: #ffffff; }

.scroll-style-3::-webkit-scrollbar-track:active {
  background: #ffffff; }

.scroll-style-3::-webkit-scrollbar-corner {
  background: transparent; }

/* start tutorial*/
.modal-center.tutorial-pdpa {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 8;
  padding: 20px;
  box-sizing: border-box;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center; }
  .modal-center.tutorial-pdpa .detail {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 960px;
    background: #fff;
    padding: 40px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    -o-box-shadow: 0 0 10px #000;
    -ms-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    text-align: center;
    color: #191919;
    height: calc(100vh - 40px); }
    .modal-center.tutorial-pdpa .detail img {
      height: 45vh;
      max-height: 480px; }
    .modal-center.tutorial-pdpa .detail h3 {
      font-family: 'db_heaventmed', san-serif;
      font-weight: normal;
      color: #191919;
      font-size: 44px;
      line-height: 0.5;
      letter-spacing: 0.8px;
      margin: 20px 0; }
    .modal-center.tutorial-pdpa .detail p {
      font-family: 'db_heaventregular';
      font-weight: normal;
      color: #191919;
      font-size: 24px;
      line-height: 1.5;
      letter-spacing: 0.44px;
      width: 600px;
      margin: 0 auto;
      text-align: left;
      display: inline-block; }
      .modal-center.tutorial-pdpa .detail p span {
        font-size: 28px; }
    .modal-center.tutorial-pdpa .detail p:last-of-type {
      margin: 0; }
    .modal-center.tutorial-pdpa .detail > a {
      position: absolute;
      right: 10px;
      top: 10px;
      display: block; }
      .modal-center.tutorial-pdpa .detail > a img {
        margin: 0;
        width: 15px;
        height: auto; }
    .modal-center.tutorial-pdpa .detail ul {
      padding: 0 0 0 30px;
      width: 600px;
      margin: 0 auto;
      display: inline-block; }
      .modal-center.tutorial-pdpa .detail ul li {
        list-style: disc outside;
        text-align: left;
        font-size: 24px;
        line-height: 1.5;
        letter-spacing: 0.44px; }
    .modal-center.tutorial-pdpa .detail .btn-step {
      position: absolute;
      bottom: 40px;
      left: 0;
      right: 0; }
      .modal-center.tutorial-pdpa .detail .btn-step a {
        display: block;
        font-size: 24px;
        line-height: 27px;
        text-align: center;
        font-family: 'db_heaventregular';
        width: 296px;
        padding: 10.5px 0;
        margin: 0 auto 20px;
        border-radius: 4px; }
      .modal-center.tutorial-pdpa .detail .btn-step a.next {
        background: #1f40d9; }
      .modal-center.tutorial-pdpa .detail .btn-step a.previous {
        color: #9b9b9b; }
      .modal-center.tutorial-pdpa .detail .btn-step p {
        width: auto;
        text-align: center;
        height: auto;
        line-height: normal;
        margin-top: 20px; }
        .modal-center.tutorial-pdpa .detail .btn-step p span {
          background: #bfbfbf;
          width: 12px;
          height: 12px;
          margin-right: 16px;
          border-radius: 100%;
          display: inline-block; }
        .modal-center.tutorial-pdpa .detail .btn-step p span.active {
          background: #1f40d9; }
        .modal-center.tutorial-pdpa .detail .btn-step p span:last-child {
          margin: 0; }
    .modal-center.tutorial-pdpa .detail .cont {
      position: absolute;
      left: 0;
      right: 0;
      top: 50vh; }

.modal-center.tutorial-pdpa:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.05em; }

@media screen and (min-width: 1024px) and (max-height: 979px) {
  .modal-center.tutorial-pdpa .detail img {
    height: 35vh; }
  .modal-center.tutorial-pdpa .detail .cont {
    top: 43vh; } }

@media screen and (min-width: 1024px) and (max-height: 859px) {
  .modal-center.tutorial-pdpa .detail .btn-step {
    bottom: 20px; }
    .modal-center.tutorial-pdpa .detail .btn-step p {
      margin: 0; } }

/* react semantic ui */
.ui.modal {
  max-width: 500px;
  width: 90%;
  background: none;
  margin: 0;
  padding: 0; }
  .ui.modal .wrap-md {
    width: 100%;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    background: #121212;
    padding: 30px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    -o-box-shadow: 0 0 10px #000;
    -ms-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    text-align: center;
    color: #fff; }
    .ui.modal .wrap-md h3 {
      text-align: center;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal;
      font-size: 36px;
      letter-spacing: 0.5px;
      line-height: 1.2;
      margin: 0 0 10px; }
    .ui.modal .wrap-md > div p {
      font-size: 26px;
      color: #9B9B9B;
      line-height: 1; }
    .ui.modal .wrap-md > div .btn-group {
      padding: 35px 0 0; }
      .ui.modal .wrap-md > div .btn-group a {
        text-align: center;
        max-width: 191px;
        width: 46%;
        margin-right: 4%;
        display: inline-block;
        padding: 9.5px 0px;
        border-radius: 3px;
        font-size: 22px;
        font-family: "db_heaventmed", san-serif;
        font-weight: normal; }
      .ui.modal .wrap-md > div .btn-group a.agree {
        background: #0F62FE; }
      .ui.modal .wrap-md > div .btn-group a.cancel {
        background: #4A4A4A; }
      .ui.modal .wrap-md > div .btn-group a:last-child {
        margin-right: 0; }

.second-mail > p {
  font-family: "db_heaventmed", san-serif;
  font-weight: normal;
  font-size: 18px;
  line-height: 20px;
  text-align: center; }

.second-mail form fieldset input[type="submit"], .second-mail form fieldset button[type="submit"] {
  width: 200px;
  background-color: #0F62FE;
  font-size: 18px;
  line-height: 22px;
  font-family: "db_heaventmed", san-serif;
  font-weight: normal;
  padding: 9px 0;
  margin: 40px auto 0;
  display: block; }

.second-mail form fieldset input[type="submit"].btn-disabled, .second-mail form fieldset button[type="submit"].btn-disabled {
  background-color: #9b9b9b !important;
  cursor: default; }

.second-mail form fieldset ul li.DateOfBirth .ant-calendar-picker.ant-calendar-picker-large > div {
  border-bottom: 1px solid #9B9B9B; }

.second-mail form fieldset ul li .box {
  margin: 4px 0 0;
  clear: both;
  display: block; }
  .second-mail form fieldset ul li .box div.radio {
    width: 33%;
    float: left; }

.radio {
  /*margin: 0.5rem;*/ }
  .radio label {
    font-size: 16px;
    line-height: 20px; }
  .radio input[type="radio"] {
    position: absolute;
    opacity: 0; }
    .radio input[type="radio"] + .radio-label {
      display: flex;
      align-items: center;
      justify-content: center; }
      .radio input[type="radio"] + .radio-label:before {
        content: '';
        background: #121416;
        border-radius: 100%;
        display: inline-block;
        width: 8px;
        height: 8px;
        position: relative;
        cursor: pointer;
        text-align: center;
        transition: all 250ms ease;
        border: 5px solid #121416;
        box-shadow: 0 0 0 1px #F2F6FD;
        margin: 0 8px 0 2px; }
    .radio input[type="radio"]:checked + .radio-label:before {
      background-color: #F2F6FD;
      box-shadow: 0 0 0 1px #0F62FE;
      border: 5px solid #0F62FE; }
    .radio input[type="radio"]:focus + .radio-label:before {
      outline: none;
      border-color: #0F62FE; }
    .radio input[type="radio"]:checked:disabled + .radio-label:before {
      background-color: #F2F6FD;
      box-shadow: 0 0 0 1px #55585E;
      border: 5px solid #55585E; }
    .radio input[type="radio"] + .radio-label:empty:before {
      margin-right: 0; }
  .radio input[type="radio"]:not(:checked) + label:after {
    opacity: 0 !important;
    -webkit-transform: scale(0);
    transform: scale(0);
    display: none !important;
    padding-left: 0 !important; }
  .radio input[type="radio"]:checked + label:after {
    opacity: 0 !important;
    -webkit-transform: scale(0);
    transform: scale(0);
    display: none !important;
    padding-left: 0 !important; }

/*force calendar*/
.ant-calendar-input {
  color: #fff !important;
  background: #000 !important; }

.ant-calendar-picker-container {
  z-index: 1000 !important; }

.profile .ant-calendar {
  background: #000 !important;
  color: #fff !important;
  background-color: #000 !important; }
  .profile .ant-calendar table {
    background: #000 !important;
    color: #fff !important; }

.ant-calendar-selected-day .ant-calendar-date {
  background: #0F62FE !important;
  color: #fff !important;
  border: none !important; }

.ant-calendar-header .ant-calendar-century-select {
  color: #fff !important; }

.ant-calendar-header .ant-calendar-decade-select {
  color: #fff !important; }

.ant-calendar-header .ant-calendar-year-select {
  color: #fff !important; }

.ant-calendar-header .ant-calendar-month-select {
  color: #fff !important; }

.ant-calendar-date {
  color: #fff !important; }

.ant-calendar-date:hover {
  background: #0F62FE !important;
  color: #fff !important; }

.ant-calendar-picker:focus {
  -webkit-box-shadow: 0 !important;
  box-shadow: 0 !important; }

.ant-calendar-picker-input.ant-input:focus {
  -webkit-box-shadow: unset !important;
  box-shadow: unset !important; }

.ant-input:focus {
  -webkit-box-shadow: unset !important;
  box-shadow: unset !important; }

.ant-calendar-month-panel {
  background: #000 !important; }

.ant-calendar-month-panel-header .ant-calendar-month-panel-century-select {
  color: #fff !important; }

.ant-calendar-month-panel-header .ant-calendar-month-panel-decade-select {
  color: #fff !important; }

.ant-calendar-month-panel-header .ant-calendar-month-panel-year-select {
  color: #fff !important; }

.ant-calendar-month-panel-header .ant-calendar-month-panel-month-select {
  color: #fff !important; }

.ant-calendar-month-panel-month {
  color: #fff !important; }

.ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month {
  background: #0F62FE !important; }

.ant-calendar-header a:hover {
  background: #0F62FE !important;
  color: #fff !important; }

.ant-calendar-header .ant-calendar-next-month-btn:hover::before {
  color: #fff !important; }

.ant-calendar-header .ant-calendar-next-month-btn:hover::after {
  color: #fff !important; }

.ant-calendar-month-panel-month:hover {
  background: #0F62FE !important; }

.ant-calendar-year-panel {
  background: #000 !important; }

.ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year {
  background: #0F62FE !important; }

.ant-calendar-year-panel-last-decade-cell .ant-calendar-year-panel-year {
  color: #fff !important; }

.ant-calendar-year-panel-next-decade-cell .ant-calendar-year-panel-year {
  color: #fff !important; }

.ant-calendar-year-panel-year:hover {
  background: #0F62FE !important; }

.ant-calendar-year-panel-header .ant-calendar-year-panel-century-select {
  color: #fff !important; }

.ant-calendar-year-panel-header .ant-calendar-year-panel-decade-select {
  color: #fff !important; }

.ant-calendar-year-panel-header .ant-calendar-year-panel-year-select {
  color: #fff !important; }

.ant-calendar-year-panel-header .ant-calendar-year-panel-month-select {
  color: #fff !important; }

.ant-calendar-year-panel-year {
  color: #fff !important; }

.ant-calendar-disabled-cell.ant-calendar-today .ant-calendar-date {
  position: relative;
  border-radius: 2px;
  padding: 2px 0 0;
  background: none;
  width: 26px !important;
  height: 24px !important;
  margin: 0 auto;
  display: inline-block; }

.ant-calendar-disabled-cell.ant-calendar-today .ant-calendar-date:before {
  display: none; }

.ant-calendar-disabled-cell .ant-calendar-date {
  background: none !important;
  color: #ffffffa8 !important; }

.ant-calendar-disabled-cell .ant-calendar-date:hover {
  border-radius: 2px;
  padding: 2px 0 0;
  background: none;
  width: 26px !important;
  height: 24px !important;
  margin: 0 auto;
  display: inline-block;
  border: none; }

.ant-calendar-footer .ant-calendar-footer-btn .ant-calendar-today-btn-disabled {
  color: #fff !important; }

.ant-calendar-decade-panel-century {
  background: #000 !important; }

.ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade {
  background: #0F62FE !important;
  color: #fff !important; }

.ant-calendar-decade-panel-decade {
  color: #fff !important; }

.ant-calendar-decade-panel-last-century-cell .ant-calendar-decade-panel-decade {
  color: #fff !important; }

.ant-calendar-decade-panel-next-century-cell .ant-calendar-decade-panel-decade {
  color: #fff !important; }

/*smart banner*/
.smartbanner-show .modal-center.term-condition {
  top: 80px; }
  .smartbanner-show .modal-center.term-condition .detail {
    height: calc(100vh - 120px); }
    .smartbanner-show .modal-center.term-condition .detail .content {
      height: calc(83vh - 350px); }

@media screen and (min-width: 1024px) and (max-height: 767px) {
  .modal-center.tutorial-pdpa .detail img {
    height: 30vh; }
  .modal-center.tutorial-pdpa .detail .cont {
    top: 37vh; } }

@media screen and (min-width: 1024px) and (max-height: 699px) {
  .modal-center.tutorial-pdpa .detail img {
    display: none; }
  .modal-center.tutorial-pdpa .detail .cont {
    top: 20vh; } }

@media screen and (width: 1024px) and (height: 1366px) {
  .modal-center.tutorial-pdpa .detail .cont {
    top: 40vh; } }

@media screen and (max-width: 1023px) {
  .modal-center.tutorial-pdpa .detail {
    width: calc(100vw - 80px); }
    .modal-center.tutorial-pdpa .detail img {
      width: 100%;
      height: auto; }
    .modal-center.tutorial-pdpa .detail .cont {
      position: static; }
  .modal-center.term-condition .detail {
    width: 100%; } }

@media screen and (max-width: 767px) {
  .modal-center.term-condition .detail {
    padding: 20px 8px; }
    .modal-center.term-condition .detail > h3 {
      font-size: 28px;
      line-height: 1; }
    .modal-center.term-condition .detail .content {
      padding: 0;
      width: 92%; }
    .modal-center.term-condition .detail .form-check {
      margin: 12px 0;
      width: 100%; }
      .modal-center.term-condition .detail .form-check .checkmark-box {
        width: calc(100% - 24px);
        padding: 12px; }
      .modal-center.term-condition .detail .form-check button[type="button"] {
        width: 100%; }
    .modal-center.term-condition .detail .form-check.form-policy .checkmark-box label {
      font-size: 18px; }
    .modal-center.term-condition .detail .form-check.form-policy button[type="button"] {
      margin-top: 20px; }
    .modal-center.term-condition .detail .pdpaStep {
      width: 100%; }
      .modal-center.term-condition .detail .pdpaStep > p {
        font-size: 16px; } }

@media screen and (max-width: 576px) {
  .modal-center.tutorial-pdpa .detail {
    padding: 6px;
    width: 99%; }
    .modal-center.tutorial-pdpa .detail h3 {
      font-size: 32px;
      line-height: 1.2;
      margin: 0 0 12px; }
    .modal-center.tutorial-pdpa .detail p {
      width: calc(100% - 30px);
      font-size: 20px;
      line-height: 28px; }
    .modal-center.tutorial-pdpa .detail ul {
      width: calc(100% - 30px); }
      .modal-center.tutorial-pdpa .detail ul li {
        font-size: 20px;
        line-height: 28px; }
    .modal-center.tutorial-pdpa .detail .btn-step a {
      width: 92%; } }

@media screen and (max-width: 576px) and (max-height: 669px) {
  .modal-center.tutorial-pdpa .detail img {
    width: 75%; }
  .modal-center.tutorial-pdpa .detail .btn-step a {
    margin: 0 auto 8px;
    font-size: 20px;
    padding: 8px 0; }
  .modal-center.tutorial-pdpa .detail .btn-step p {
    margin: 0; } }

@media screen and (max-height: 499px) {
  .modal-center.tutorial-pdpa .detail {
    height: auto; }
    .modal-center.tutorial-pdpa .detail img {
      display: none; }
    .modal-center.tutorial-pdpa .detail .btn-step {
      position: static;
      margin-top: 20px; } }

/* end tutorial*/
@media only screen and (max-width: 500px) {
  .ui.modal {
    width: 90%;
    padding: 30px 10px; } }

@media only screen and (max-width: 500px) {
  .modal {
    width: 100%;
    padding: 50px 10px; }
    .modal a.btn-login {
      width: 100%;
      height: auto;
      padding: 4% 0 3.4%;
      border-radius: 5px; }
      .modal a.btn-login img {
        padding-left: 16%;
        margin: -3px 0 0; }
      .modal a.btn-login span {
        font-size: 22px;
        margin: 0 0 0 1%; }
    .modal a.btn-login.log-Google img {
      padding-left: 17%; }
    .modal a.btn-login.log-Facebook img {
      padding-left: 17%; }
    .modal a.btn-login.log-Apple {
      padding: 0; }
      .modal a.btn-login.log-Apple img {
        padding: 0; }
    .modal a.btn-login.log-Line span {
      margin: 0; }
    .modal .modal-toggle {
      width: 100%; }
      .modal .modal-toggle .toggle-navigation > li {
        font-size: 20px; }
    .modal p.barOr {
      width: 100%; }
  .modal.modal-login {
    padding: 50px 10px; }
    .modal.modal-login a.close-modal {
      top: 20px;
      right: 20px; }
  form fieldset ul li label {
    font-size: 20px; }
  #delete-acc.tem2 > div p span {
    display: block;
    padding: 10px 0 0; }
  .accept-box {
    width: 100%; }
  .modal-standardBox {
    width: 100%;
    padding: 50px 10px; }
    .modal-standardBox a.btn-login {
      width: 100%;
      height: auto;
      padding: 4% 0 3.4%;
      border-radius: 5px; }
      .modal-standardBox a.btn-login img {
        padding-left: 16%;
        margin: -3px 0 0; }
      .modal-standardBox a.btn-login span {
        font-size: 22px;
        margin: 0 0 0 1%; }
    .modal-standardBox a.btn-login.log-Google img {
      padding-left: 17%; }
    .modal-standardBox a.btn-login.log-Facebook img {
      padding-left: 17%; }
    .modal-standardBox a.btn-login.log-Apple {
      padding: 0; }
      .modal-standardBox a.btn-login.log-Apple img {
        padding: 0; }
    .modal-standardBox a.btn-login.log-Line span {
      margin: 0; }
    .modal-standardBox .modal-toggle {
      width: 100%; }
      .modal-standardBox .modal-toggle .toggle-navigation > li {
        font-size: 20px; }
    .modal-standardBox p.barOr {
      width: 100%; } }

@media screen and (max-width: 320px) {
  .modal-center.term-condition .detail .pdpaStep > p {
    font-size: 12px;
    line-height: 1; } }

body {
  position: relative;
  background: #00040D;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: geometricPrecision; }

#truehits_div {
  position: absolute;
  bottom: 22px;
  left: 10px; }

.fav, a[class^=share] {
  width: 34px;
  height: 34px;
  float: left;
  background: url(/static/images/share-btn.svg) no-repeat;
  background-size: 100%;
  margin: 0 5px 0 0; }
  .fav span, a[class^=share] span {
    display: block;
    text-indent: -9999px; }

.t-highlight {
  font-family: 'db_heaventbold';
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: normal;
  display: inline-block;
  background: #4d2598;
  background: -moz-linear-gradient(left, #2723B5 0%, #2723B5 0%, #E43131 100%, #E43131 100%);
  background: -webkit-linear-gradient(left, #2723B5 0%, #2723B5 0%, #E43131 100%, #E43131 100%);
  background: linear-gradient(left, #2723B5 0%, #2723B5 0%, #E43131 100%, #E43131 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  position: relative; }

.invisible {
  display: none; }

a[class^=share] {
  background-position: 0 -51px;
  background-size: 100%; }

.view-all {
  position: absolute;
  right: 0;
  top: 10px;
  color: #0076FF;
  font-size: 20px;
  line-height: 23px;
  font-family: 'db_heaventbold', san-serif; }

.view-all:hover {
  text-decoration: underline; }

*[class|=ico] {
  color: #fff;
  font-size: 16px;
  border-radius: 4px;
  padding: 2px 7px;
  margin: 0 5px 0 0;
  font-family: 'db_heaventmed', san-serif;
  text-transform: uppercase;
  letter-spacing: 0.3px; }

.ico-teaser {
  background: #DC353D;
  vertical-align: top; }

.ico-hit {
  background: #7757BE;
  vertical-align: top; }

.ico-showing {
  background: #0F62FE;
  vertical-align: top; }

.ico-clip {
  background-color: #0F62FE;
  vertical-align: top; }

.ico-clip:before {
  content: '';
  width: 7px;
  height: 10px;
  display: inline-block;
  background: url(/static/images/icon-play.svg) 0px 2px no-repeat;
  background-size: 100%;
  margin-right: 5px; }

#wrapper .container {
  box-sizing: border-box;
  margin: 0 40px; }

.viewed:before {
  display: block;
  width: 15px;
  height: 13px;
  background: url(/static/images/icon-eye.svg) no-repeat 0 0;
  vertical-align: middle;
  background-size: 100%;
  margin: 4px 5px 0 0;
  float: left; }

/*bootstrap form error*/
.has-error .checkbox, .has-error .checkbox-inline, .has-error .control-label, .has-error .help-block, .has-error .radio, .has-error .radio-inline, .has-error.checkbox label, .has-error.checkbox-inline label, .has-error.radio label, .has-error.radio-inline label {
  color: #CA3131;
  font-size: 14px;
  font-family: db_heaventregular, san-serif; }

.has-success input[type="text"],
.has-success .control-label,
.has-success .help-block,
.has-success .form-control-feedback {
  color: #3BC271; }

/*footer global*/
footer {
  width: 100%;
  text-align: left;
  border-radius: 0;
  margin: 0;
  padding: 0 40px 10px;
  box-sizing: border-box;
  overflow: hidden;
  background: #000;
  color: #fff;
  position: relative;
  /*end ft-row*/ }
  footer .ft-row:before {
    width: 100%;
    height: 1px;
    background: #fff;
    opacity: 0.2;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    width: 100%; }
  footer .ft-row {
    width: 100%;
    max-width: 1200px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    padding: 25px 0 0;
    /*> p:after { content:''; display: block; position: absolute; bottom: -20px; left: 50%; width: 40px; height: 2px; background:#fff; margin: 0 0 0 -20px; opacity: 0.7;}*/ }
    footer .ft-row > p {
      margin: 0 0 10px; }
    footer .ft-row > a {
      display: block;
      clear: both;
      margin: 0 0 15px; }
    footer .ft-row img {
      height: 40px;
      width: auto;
      padding: 0; }
    footer .ft-row p {
      color: #fff;
      font-size: 18px;
      padding: 0 0 5px;
      position: relative; }
    footer .ft-row p.qr-dl {
      margin: 0 10px 0 0;
      display: inline-block;
      float: left;
      padding: 0; }
      footer .ft-row p.qr-dl img {
        height: auto;
        width: 128px; }
    footer .ft-row .footer-secondary {
      width: 100%;
      margin: 0 auto;
      text-align: center;
      position: relative;
      padding: 20px 0 10px;
      overflow: hidden;
      font-family: db_heaventmed, san-serif;
      font-size: 16px;
      line-height: 25px;
      letter-spacing: 0.5px; }
      footer .ft-row .footer-secondary p {
        color: #D7D7D7; }
      footer .ft-row .footer-secondary a {
        color: #D7D7D7; }
    footer .ft-row > ul {
      float: left;
      overflow: hidden;
      width: 70%; }
      footer .ft-row > ul > li {
        float: left;
        margin: 0 4% 0 0; }
        footer .ft-row > ul > li h3 {
          font-family: db_heaventmed, san-serif;
          font-size: 22px;
          line-height: 25px;
          letter-spacing: 0.5px;
          font-weight: normal;
          margin: 0 0 15px;
          text-align: left; }
          footer .ft-row > ul > li h3 img {
            display: none; }
        footer .ft-row > ul > li ul li {
          font-family: db_heaventmed, san-serif;
          clear: both;
          margin: 0 0 10px;
          overflow: hidden; }
          footer .ft-row > ul > li ul li a {
            font-size: 16px;
            line-height: 25px;
            color: #F2F6FD; }
            footer .ft-row > ul > li ul li a img {
              height: 15px;
              width: auto;
              float: left;
              padding: 0; }
          footer .ft-row > ul > li ul li a:hover {
            text-decoration: underline;
            color: #0076FF; }
      footer .ft-row > ul > li:last-child {
        margin: 0; }
      footer .ft-row > ul .contact-us ul li a {
        display: flex;
        align-items: center; }
        footer .ft-row > ul .contact-us ul li a span[class^="icon-"] {
          font-size: 16px;
          line-height: 100%;
          margin-right: 8px; }
        footer .ft-row > ul .contact-us ul li a:hover {
          text-decoration: none; }
          footer .ft-row > ul .contact-us ul li a:hover span {
            text-decoration: underline; }
          footer .ft-row > ul .contact-us ul li a:hover span[class^="icon-"] {
            text-decoration: none; }
    footer .ft-row .app-dl {
      float: right;
      overflow: hidden;
      width: 270px; }
      footer .ft-row .app-dl h3 {
        font-size: 22px;
        line-height: 25px;
        font-family: db_heaventmed, san-serif;
        letter-spacing: 0.5px;
        font-weight: normal;
        margin: 0 0 10px;
        display: inline-block; }
        footer .ft-row .app-dl h3 span {
          float: left; }
        footer .ft-row .app-dl h3 img {
          width: auto;
          padding: 0;
          float: left;
          margin: 3px 9px 0 9px;
          height: 16px; }
      footer .ft-row .app-dl p {
        float: left; }
        footer .ft-row .app-dl p > a {
          float: left;
          clear: both;
          margin: 0 0 10px; }
          footer .ft-row .app-dl p > a img {
            height: 36px;
            width: auto;
            display: block; }
        footer .ft-row .app-dl p > a:last-child {
          margin: 0; }

/* end footer*/
/*category header global*/
.main-hd {
  padding: 0 0 10px;
  font-weight: normal; }
  .main-hd > * {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: 0.5px;
    font-family: db_heaventmed, san-serif;
    display: inline-block;
    min-width: 100px;
    font-weight: normal; }

.sub-hd {
  margin: 0 0 5px 50px;
  color: #4A4A4A;
  font-size: 30px;
  font-weight: normal;
  font-family: db_heaventmed, san-serif; }
  .sub-hd > * {
    display: inline-block;
    color: #4A4A4A;
    line-height: 40px; }

.current .sub-hd > * {
  background: #4d2598;
  background: -moz-linear-gradient(left, #2723B5 0%, #2723B5 0%, #E43131 100%, #E43131 100%);
  background: -webkit-linear-gradient(left, #2723B5 0%, #2723B5 0%, #E43131 100%, #E43131 100%);
  background: linear-gradient(left, #2723B5 0%, #2723B5 0%, #E43131 100%, #E43131 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text; }

.row {
  width: 100%;
  position: relative;
  clear: both;
  margin: 0 0 25px; }

/*ads*/
.sp-banner {
  text-align: center;
  width: 100%;
  margin: 0 0 25px;
  overflow: hidden;
  min-height: 90px; }

/*player icon global*/
.thumb {
  position: relative; }

.thumb > a:after {
  position: absolute;
  left: 45%;
  top: 50%;
  width: 90px;
  height: 90px;
  margin: -45px 0 0 -25px;
  background: url(/static/images/player.svg) no-repeat;
  background-size: 100%;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 2; }

article.no-vdo .thumb > a:after {
  display: none; }

.item:hover .thumb > a:after, .item:hover .link a {
  opacity: 1 !important;
  transition: opacity 0.5s; }

.boomBox-sticky {
  position: sticky;
  position: -webkit-sticky;
  top: 90px; }

/*modal global*/
.modal-backdrop {
  opacity: 0;
  background: #191919;
  box-shadow: 0 2px 50px 0 rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  z-index: 8;
  display: none; }

.modal-overlay {
  position: fixed;
  width: 50%;
  height: 50%;
  bottom: -100vh;
  left: 50%; }

.modal-overlay.active {
  z-index: 9;
  left: 0;
  bottom: 0; }

.modal-overlay[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden; }

.modal-overlay[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  z-index: 30; }

.modal-overlay .content-area {
  margin: auto; }

.modal-overlay button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0; }

.modal-overlay .btn-close {
  width: 44px;
  height: 44px;
  position: absolute;
  right: 20px;
  top: 10px;
  text-align: center;
  color: #9b9b9b;
  z-index: 20;
  font-family: "db_heaventregular", san-serif;
  background: none;
  font-size: 16px;
  cursor: pointer; }

.modal-overlay .btn-close em {
  font-style: normal; }

/*modal search global*/
section.searchmodal {
  width: 80%;
  max-width: 820px;
  height: calc(100vh - 20px);
  left: 0;
  right: 0;
  top: 100vh;
  display: none;
  margin: 0;
  position: fixed;
  margin: 0 auto;
  padding: 88px 0 0;
  overflow: inherit;
  /*search trend suggest global*/ }
  section.searchmodal .modal-content {
    /*form:after { content:''; width: 20px; height: 20px; background: url("/static/images/icon/icon-search.svg") 0 0 no-repeat; position: absolute; right: 0; bottom: 12px; cursor: pointer;}*/ }
    section.searchmodal .modal-content > div {
      position: relative; }
    section.searchmodal .modal-content form {
      width: 100%;
      position: relative;
      background-color: #121416;
      padding: 11px 16px;
      box-sizing: border-box;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 4px;
      border: 1px solid #26282E; }
      section.searchmodal .modal-content form .icon-search {
        color: #7B7E85;
        font-size: 15px;
        padding: 2.5px;
        margin-right: 16px; }
        section.searchmodal .modal-content form .icon-search::before {
          content: "\E90E" !important; }
      section.searchmodal .modal-content form input[type="text"] {
        font-size: 20px;
        line-height: 120%;
        font-family: "db_heaventregular", san-serif;
        background-color: transparent;
        font-weight: 400;
        color: #F2F6FD;
        width: calc(100% - 54px);
        box-sizing: border-box;
        border-bottom: none; }
        section.searchmodal .modal-content form input[type="text"] input[type="text"]::-webkit-input-placeholder {
          color: #7B7E85; }
        section.searchmodal .modal-content form input[type="text"] input[type="text"]::-moz-placeholder {
          color: #7B7E85; }
        section.searchmodal .modal-content form input[type="text"] input[type="text"]:-ms-input-placeholder {
          color: #7B7E85; }
        section.searchmodal .modal-content form input[type="text"] input[type="text"]:-moz-placeholder {
          color: #7B7E85; }
      section.searchmodal .modal-content form input[type="text"]:focus, section.searchmodal .modal-content form input[type="text"]:invalid, section.searchmodal .modal-content form input[type="text"]:required {
        outline: none;
        border: none;
        box-shadow: none; }
      section.searchmodal .modal-content form button[type="button"] {
        background: none;
        border: 0;
        border-radius: 0; }
        section.searchmodal .modal-content form button[type="button"] .icon-search {
          margin: 0;
          color: #F2F6FD;
          font-size: 18px; }
        section.searchmodal .modal-content form button[type="button"] .icon-times-circle-filled {
          color: #7B7E85; }
        section.searchmodal .modal-content form button[type="button"] > span {
          display: block;
          font-size: 24px;
          line-height: 1;
          padding: 0; }
      section.searchmodal .modal-content form .btn-Search {
        display: flex;
        align-items: center; }
        section.searchmodal .modal-content form .btn-Search::before {
          content: '';
          width: 1px;
          height: 32px;
          background: #26282E;
          display: inline-block;
          margin: 0 19px 0 16px; }
        section.searchmodal .modal-content form .btn-Search .icon-search::before {
          content: "\E90E" !important; }
    section.searchmodal .modal-content .btn-close {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      right: calc(50% - 514px);
      top: 24px; }
      section.searchmodal .modal-content .btn-close .icon-x {
        display: block;
        font-size: 24px;
        line-height: 1; }
    section.searchmodal .modal-content .guide-search {
      width: 100%;
      position: absolute;
      top: 55px;
      padding: 0;
      z-index: 2;
      background: #121416;
      overflow-y: scroll;
      max-height: calc(100vh - 144px);
      border: 1px solid #26282E;
      border-top: none;
      box-sizing: border-box; }
      section.searchmodal .modal-content .guide-search li {
        display: flex;
        align-items: flex-start;
        color: #F2F6FD;
        font-family: "db_heaventregular", san-serif;
        font-size: 20px;
        line-height: 120%;
        padding: 12px 16px;
        cursor: pointer; }
        section.searchmodal .modal-content .guide-search li p {
          color: #F2F6FD;
          font-family: "db_heaventregular", san-serif;
          font-size: 20px;
          line-height: 120%;
          cursor: pointer; }
          section.searchmodal .modal-content .guide-search li p span {
            color: #5A8FF2; }
        section.searchmodal .modal-content .guide-search li .search-cat {
          text-align: right;
          color: #9b9b9b;
          flex: auto; }
          section.searchmodal .modal-content .guide-search li .search-cat p {
            text-align: right;
            color: #9b9b9b; }
        section.searchmodal .modal-content .guide-search li:hover {
          background-color: #092353; }
        section.searchmodal .modal-content .guide-search li > p:first-child {
          width: 528px;
          margin-right: 100px;
          display: block;
          display: -webkit-box;
          max-width: 528px;
          margin: 0 100px 0 0;
          font-size: 20px;
          line-height: 120%;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis; }
      section.searchmodal .modal-content .guide-search li:before {
        content: '';
        width: 15px;
        height: 15px;
        display: inline-block;
        margin: 2.5px 18.5px 2.5px 2.5px;
        background: url("/static/images/icon/icon-search.svg") 0 0 no-repeat;
        background-size: 100%;
        flex: 0 0 auto; }
      section.searchmodal .modal-content .guide-search li.search-history:before {
        background: url("/static/images/icon/icon-search-history.svg") 0 0 no-repeat; }
  section.searchmodal .search-trend {
    width: 100%;
    clear: both;
    position: relative;
    overflow: hidden; }
    section.searchmodal .search-trend h2 {
      color: #F2F6FD;
      font-family: "db_heaventregular", san-serif;
      font-weight: normal;
      font-size: 28px;
      line-height: 120%;
      width: 100%;
      padding: 32px 0 16px; }
    section.searchmodal .search-trend li {
      width: auto;
      float: left;
      margin: 0 12px 12px 0;
      border: 1px solid #26282E;
      border-radius: 18px;
      transition: all 0.3s;
      cursor: pointer; }
      section.searchmodal .search-trend li a {
        font-size: 20px;
        line-height: 120%;
        color: #F2F6FD;
        padding: 6px 20px;
        display: inline-block; }
    section.searchmodal .search-trend li:hover {
      border: 1px solid #193366;
      transition: all 0.3s;
      background: #092353; }
    section.searchmodal .search-trend li.selected {
      background: #092353;
      border: 1px solid #193366;
      transition: all 0.3s; }
    section.searchmodal .search-trend .btn-clear {
      position: absolute;
      right: 0;
      top: 36px;
      font-family: "db_heaventregular", san-serif;
      font-size: 22px;
      line-height: 120%;
      cursor: pointer; }
      section.searchmodal .search-trend .btn-clear a {
        color: #7B7E85; }
  section.searchmodal .nodata {
    width: 100%;
    clear: both;
    color: #fff;
    text-align: center;
    padding: 50px 0; }
    section.searchmodal .nodata p {
      color: #fff;
      font-size: 18px; }
  section.searchmodal .search-tab .toggle-navigation {
    width: 100%;
    display: flex;
    flex-wrap: nowrap; }
    section.searchmodal .search-tab .toggle-navigation li, section.searchmodal .search-tab .toggle-navigation .item {
      font-family: "db_heaventregular", san-serif;
      font-size: 20px;
      line-height: 120%;
      color: #7B7E85;
      float: left;
      margin: 0 8px 0 0;
      cursor: pointer;
      padding: 0 8px 10px;
      flex: 1 0 auto; }
    section.searchmodal .search-tab .toggle-navigation li.active, section.searchmodal .search-tab .toggle-navigation .item.active {
      color: #0F62FE;
      cursor: default;
      border-bottom: 2px solid #0F62FE; }
    section.searchmodal .search-tab .toggle-navigation li:hover, section.searchmodal .search-tab .toggle-navigation .item:hover {
      color: #F2F6FD; }
    section.searchmodal .search-tab .toggle-navigation li:last-child, section.searchmodal .search-tab .toggle-navigation .item:last-child {
      margin: 0; }
  section.searchmodal .search-tab .toggle-detail {
    clear: both;
    display: block;
    width: 100%;
    position: relative; }
    section.searchmodal .search-tab .toggle-detail > li {
      /*display: none;*/
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      visibility: hidden;
      opacity: 0;
      z-index: -10; }
      section.searchmodal .search-tab .toggle-detail > li .result {
        height: calc(100vh - 242px);
        /*.section-search:first-child { padding: 0;
						a.readMore { top: 43px;}
					}*/ }
        section.searchmodal .search-tab .toggle-detail > li .result .section-search:last-child {
          padding: 0 0 50px; }
        section.searchmodal .search-tab .toggle-detail > li .result .section-search:last-of-type {
          padding-bottom: 100px; }
        section.searchmodal .search-tab .toggle-detail > li .result .section-search {
          padding: 0;
          position: relative;
          display: inline-block;
          width: 100%;
          margin: 0 0 32px;
          /*.pagination { text-align: right; font-family: $font-first; font-size: 22px; line-height: 25px; letter-spacing: 0.5px; padding: 15px 0 50px; clear: both;
							a,span { color: #fff; padding: 8px 13px; display: inline-block;}
							a:hover,span.active { background: #0F62FE; border-radius: 3px;}
						}*/ }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search > h2 {
            font-family: "db_heaventregular", san-serif;
            font-weight: 400;
            font-size: 28px;
            line-height: 120%;
            color: #F2F6FD;
            margin: 0 0 16px; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul {
            padding: 0; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li {
              margin: 0; }
              section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article {
                padding: 0;
                margin: 0; }
                section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article h2 {
                  font-size: 20px;
                  line-height: 24px;
                  color: #fff;
                  font-weight: normal;
                  margin: 0 0 2px;
                  padding: 0;
                  font-family: "db_heaventmed", san-serif;
                  max-height: 48px;
                  overflow: hidden; }
                  section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article h2 span {
                    color: #5A8FF2; }
                  section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article h2 span.ico-showing {
                    color: #fff;
                    font-size: 12px;
                    padding: 4px 12px; }
                section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article p {
                  color: #7B7E85; }
                section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article .relate h4 {
                  font-family: "db_heaventmed", san-serif;
                  font-weight: normal;
                  font-size: 18px;
                  line-height: 22px;
                  color: #6F6F6F; }
                section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article .relate p {
                  font-family: "db_heaventmed", san-serif;
                  font-size: 21px;
                  line-height: 24px;
                  color: #fff;
                  letter-spacing: 0;
                  padding: 0;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis; }
                  section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article .relate p span {
                    color: #5A8FF2; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed article .thumb {
            background: url(/static/images/logo-ch3plus-gray.svg) center center no-repeat #8d8d8d;
            background-size: 50px;
            width: 100%;
            padding-top: 150%;
            position: relative;
            margin-bottom: 12px;
            border-radius: 4px;
            overflow: hidden; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed article .thumb > a {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.thumb-small article .thumb {
            padding-top: 100%; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li {
            width: calc(25% - 15px);
            display: none;
            max-width: 190px; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li article .thumb {
              padding-top: 56.25%; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-of-type(5n+1) {
            clear: none; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-of-type(4n+1) {
            clear: both; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-child(1),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-child(2),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-child(3),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-child(4) {
            display: inline-block; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li {
            display: none; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li:nth-child(1),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li:nth-child(2),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li:nth-child(3),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li:nth-child(4),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li:nth-child(5) {
            display: inline-block; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed article .thumb > a {
            background: url(/static/images/logo-ch3plus-gray.svg) center center no-repeat #8d8d8d;
            background-size: 50px;
            width: 100%;
            padding-top: 56.24%;
            position: relative;
            margin-bottom: 10px;
            display: block;
            border-radius: 8px; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed article .thumb > a img {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search a.readMore {
            position: absolute;
            top: 4px;
            right: 5px;
            color: #7B7E85;
            font-size: 22px;
            line-height: 120%;
            font-family: "db_heaventregular", san-serif; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li {
            width: calc(25% - 15px);
            max-width: 100%; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li .detail {
              /*p.time-show:after { content: ''; display: inline-block; width: 1px; height: 15px; background: #8D8D8D; position: absolute; right: 0; top: 2px; bottom: 0;}*/ }
              section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li .detail p.time-show {
                float: left;
                position: relative;
                margin-right: 10px;
                padding-right: 10px;
                letter-spacing: 0; }
              section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li .detail p.viewed {
                float: left; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li:nth-of-type(5n+1) {
            clear: none; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li:nth-of-type(4n+1) {
            clear: both; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search p.icon-loading {
            clear: both;
            text-align: center;
            padding: 0 0 50px; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search p.icon-loading .loading-spinner {
              width: 50px;
              height: auto; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.news-search .thumb > a:after {
            display: none; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.news-search .detail h2 {
            color: #fff;
            font-size: 22px;
            line-height: 25px;
            font-family: db_heaventmed, san-serif;
            font-weight: normal;
            max-height: 47px;
            overflow: hidden; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .news-search .item .detail h2 span {
            color: #0076ff; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .owl-stage {
            padding-left: 0 !important; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .owl-dots {
            display: none; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .owl-nav .owl-next {
            width: 40px !important;
            background: url(/static/images/svod/svod-next-icon.png) no-repeat 15px center/auto 24px, rgba(22, 22, 22, 0.3) !important;
            top: -1px !important;
            bottom: -1px !important;
            right: -1px !important;
            height: initial !important;
            opacity: 1 !important;
            border: none;
            position: absolute;
            text-indent: -9999px; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .owl-nav .owl-prev {
            width: 40px !important;
            background: url(/static/images/svod/svod-next-icon.png) no-repeat 15px center/auto 24px, rgba(22, 22, 22, 0.3) !important;
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
            top: -1px !important;
            left: -1px !important;
            bottom: -1px !important;
            height: initial !important;
            opacity: 1 !important;
            border: none;
            position: absolute;
            text-indent: -9999px; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .item .thumb {
            position: relative;
            background: url(/static/images/logo-ch3plus-gray.svg) center center no-repeat #8d8d8d;
            padding-top: 100%;
            width: 100%;
            border-radius: 100%;
            border: 1.67882px solid #FFFFFF; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .item .thumb img {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              border-radius: 100%; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .item h3 {
            font-family: "db_heaventmed", san-serif;
            font-weight: normal;
            font-size: 21px;
            line-height: 24px;
            color: #ffffff;
            text-align: center;
            margin-top: 12px; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            gap: 20px; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist > article {
              width: calc(12.5% - 17.5px);
              max-width: 80px;
              float: left; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist > article:last-child {
              margin-right: 0; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist .item .thumb {
              position: relative;
              background: url(/static/images/logo-ch3plus-gray.svg) center center no-repeat #8d8d8d;
              padding-top: 100%;
              width: 100%;
              border-radius: 100%;
              border: 1.67882px solid #FFFFFF; }
              section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist .item .thumb img {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border-radius: 100%;
                width: 100%;
                height: auto; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist .item h3 {
              font-family: "db_heaventregular", san-serif;
              font-weight: normal;
              font-size: 20px;
              line-height: 120%;
              color: #F2F6FD;
              text-align: center;
              margin-top: 8px; }
              section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist .item h3 span {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                word-spacing: 80px; }
        section.searchmodal .search-tab .toggle-detail > li .result.show-full-list .section-search .item-feed.landscape li {
          display: inline-block !important; }
    section.searchmodal .search-tab .toggle-detail > li.active {
      visibility: visible;
      opacity: 1;
      z-index: 1; }
  section.searchmodal .MuiTabs-root {
    position: relative;
    margin: 32px 0;
    padding: 0;
    min-height: auto; }
    section.searchmodal .MuiTabs-root .MuiTab-root {
      font-family: "db_heaventregular", san-serif;
      font-weight: normal;
      font-size: 20px;
      line-height: 120%;
      max-width: auto;
      min-height: auto;
      letter-spacing: 0;
      padding: 0 8px 10px;
      width: auto;
      min-width: auto;
      margin-right: 8px;
      text-transform: none; }
      section.searchmodal .MuiTabs-root .MuiTab-root:last-child {
        margin-right: 0; }
    section.searchmodal .MuiTabs-root .MuiTab-textColorPrimary {
      color: #F2F6FD; }
    section.searchmodal .MuiTabs-root .MuiTabs-scrollButtonsDesktop, section.searchmodal .MuiTabs-root .MuiTabs-scrollButtons {
      color: #F2F6FD; }
    section.searchmodal .MuiTabs-root .MuiTabScrollButton-root {
      opacity: 1;
      z-index: 1;
      width: 24px;
      height: 24px;
      -webkit-backdrop-filter: blur(5px);
      -moz-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px); }
      section.searchmodal .MuiTabs-root .MuiTabScrollButton-root.Mui-disabled {
        opacity: 0;
        z-index: 0; }
      section.searchmodal .MuiTabs-root .MuiTabScrollButton-root:first-of-type {
        position: absolute;
        left: 0;
        top: 0;
        justify-content: left; }
      section.searchmodal .MuiTabs-root .MuiTabScrollButton-root:last-of-type {
        position: absolute;
        right: 0;
        top: 0;
        justify-content: right; }
    section.searchmodal .MuiTabs-root .MuiTabs-indicator {
      background-color: #0F62FE !important; }
    section.searchmodal .MuiTabs-root .MuiSvgIcon-fontSizeSmall {
      font-size: 24px; }
    @media only screen and (max-width: 659px) {
      section.searchmodal .MuiTabs-root .MuiTabs-scroller {
        margin: 0 16px; } }
    section.searchmodal .MuiTabs-root .MuiSwitch-thumb,
    section.searchmodal .MuiTabs-root .MuiTouchRipple-root {
      background-color: unset !important; }
  section.searchmodal .btn-closeText {
    cursor: pointer; }

/*modal share global*/
section.sharemodal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: -100vh;
  left: 0;
  transition: all 0.3s;
  overflow: hidden; }
  section.sharemodal .modal-content {
    padding: 0 50px;
    box-sizing: border-box;
    width: 580px;
    height: 465px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: #FAFAFA;
    margin: -232px 0 0 -290px;
    border-radius: 5px; }
    section.sharemodal .modal-content .main-hd {
      font-size: 48px;
      font-family: db_heaventmed, san-serif;
      line-height: 45px;
      font-weight: normal;
      text-align: center;
      padding: 50px 0;
      margin: 0; }
    section.sharemodal .modal-content p {
      color: #575757;
      font-size: 20px;
      font-family: db_heaventmed, san-serif; }
    section.sharemodal .modal-content .url {
      font-size: 16px;
      line-height: 20px;
      font-family: db_heaventlight, san-serif;
      color: #575757;
      border-bottom: 1px solid #efefef;
      padding: 20px 0;
      width: 100%;
      overflow: hidden; }
    section.sharemodal .modal-content .btn-close {
      text-indent: -9999px;
      background: url(/static/images/ico-nav.svg) no-repeat -314px -363px; }
    section.sharemodal .modal-content button.copy {
      padding: 10px 0;
      background: #0076FF;
      box-shadow: 0 0 41px 0 rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      display: block;
      position: absolute;
      bottom: 30px;
      left: 50%;
      width: 160px;
      margin: 0 0 0 -80px;
      font-family: db_heaventmed, san-serif;
      font-size: 20px;
      color: #fff;
      cursor: pointer; }

/*when modal-active*/
body[class*=modal] {
  height: 100vh;
  overflow: hidden !important; }
  body[class*=modal] .modal-backdrop {
    display: block;
    opacity: 1; }
  body[class*=modal] section.searchmodal.active {
    top: 0;
    display: block; }
  body[class*=modal] section.sharemodal.active {
    left: 0;
    top: 0; }

section.clearmodal {
  display: none; }
  section.clearmodal .modal-content {
    background: #121416;
    border-radius: 10px;
    padding: 12px;
    overflow: hidden;
    text-align: center;
    width: 100%;
    height: 100%;
    max-width: 480px;
    border: 1px solid #26282E;
    box-sizing: border-box; }
    section.clearmodal .modal-content h3 {
      font-family: "db_heaventmed", san-serif;
      font-size: 32px;
      line-height: 120%;
      font-weight: normal;
      text-align: center;
      color: #F2F6FD;
      margin: 28px 0 8px; }
    section.clearmodal .modal-content p {
      font-family: "db_heaventregular", san-serif;
      font-size: 22px;
      line-height: 120%;
      text-align: center;
      color: #F2F6FD;
      margin: 0 0 24px; }
    section.clearmodal .modal-content a {
      font-family: "db_heaventregular", san-serif;
      font-size: 22px;
      line-height: 120%;
      display: inline-block;
      width: 50%;
      max-width: 160px;
      border-radius: 4px;
      padding: 9px;
      border: 1px solid #55585E;
      box-sizing: border-box; }
    section.clearmodal .modal-content a.cf-clear {
      background: #0F62FE;
      color: #ffffff;
      text-align: center;
      border: 1px solid #0F62FE; }
    section.clearmodal .modal-content a:first-of-type {
      margin: 0 16px 0 0; }
    section.clearmodal .modal-content .icon-x {
      position: absolute;
      right: 12px;
      top: 12px;
      font-size: 16px;
      color: #F2F6FD;
      cursor: pointer; }

section.clearmodal.active {
  display: block;
  left: 50%;
  top: 50%;
  bottom: unset;
  width: 480px;
  height: 228px;
  margin: -114px 0 0 -240px; }

.modal-clearmodal .modal-backdrop {
  z-index: 30; }

.modal-clearmodal section.clearmodal.active {
  z-index: 31; }

body.modal-searchmodal > .modal-backdrop {
  display: none; }

body.modal-searchmodal .modal-backdrop {
  background: rgba(0, 4, 13, 0.85);
  mix-blend-mode: normal;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  -moz-backdrop-filter: blur(25px); }

/*search result page*/
.result {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  height: 87vh;
  /*scrollbar-color: #ffffff #000000;
  scrollbar-width: thin;*/
  -ms-overflow-style: none; }
  .result ul {
    padding: 30px 0 0;
    width: 100%;
    padding-right: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap; }
  .result li {
    width: calc(16.67% - 17px);
    max-width: 120px; }
    .result li article {
      margin: 0 10px 0 0;
      padding: 0 0 25px; }
    .result li p {
      padding: 0 0 5px;
      font-family: db_heaventlight, san-serif;
      font-size: 16px;
      line-height: 20px;
      letter-spacing: 1px; }
    .result li h2 {
      padding: 0 0 10px;
      font-weight: normal;
      font-family: db_heaventmed, san-serif;
      font-size: 22px;
      line-height: 25px;
      letter-spacing: 0.5px; }
    .result li a {
      color: #F2F6FD; }
    .result li img {
      display: block;
      width: 100%;
      margin: 0;
      border-radius: 4px; }
    .result li .item .thumb > a:after {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      top: 0;
      left: 0;
      margin: 0;
      background-size: 30%;
      background-position: center;
      border-radius: 5px; }
    .result li .item .detail p.type {
      font-family: "db_heaventregular", san-serif;
      font-size: 16px;
      line-height: 120%;
      color: #7B7E85;
      letter-spacing: 0; }
      @media only screen and (max-width: 659px) {
        .result li .item .detail p.type {
          font-size: 14px; } }
  .result .loading {
    padding: 50px 0 0; }
    .result .loading * {
      display: block;
      margin: 0 auto;
      text-align: center;
      font-size: 16px;
      color: #fff;
      font-family: db_heaventlight, san-serif;
      letter-spacing: 1px; }
  .result .tag {
    margin: 25px 0 0;
    overflow: hidden;
    position: relative; }
    .result .tag h3 {
      font-family: db_heaventmed, san-serif;
      font-size: 36px;
      line-height: 40px;
      font-weight: normal;
      letter-spacing: 0.5px;
      color: #fff;
      margin: 0 0 10px;
      font-weight: normal; }
    .result .tag p a {
      display: inline-block;
      padding: 6px 10px;
      color: #fff;
      border: 1px solid #fff;
      border-radius: 3px;
      margin: 0 15px 15px 0;
      font-size: 20px;
      font-family: db_heaventbold, san-serif;
      letter-spacing: 0.5px; }
    .result .tag p a:last-child {
      margin-right: 0; }
    .result .tag p a:hover {
      background: rgba(255, 255, 255, 0.2); }
    .result .tag a.clearmodal {
      font-size: 20px;
      line-height: 24px;
      font-family: db_heaventbold, san-serif;
      letter-spacing: 0.5px;
      color: #fff;
      position: absolute;
      right: 0;
      top: 0; }

.result::-webkit-scrollbar {
  width: 2px;
  height: 2px;
  display: none; }

.result::-webkit-scrollbar-button {
  width: 0px;
  height: 0px; }

.result::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border: 0px none #ffffff;
  border-radius: 50px; }

.result::-webkit-scrollbar-thumb:hover {
  background: #ffffff; }

.result::-webkit-scrollbar-thumb:active {
  background: #000000; }

.result::-webkit-scrollbar-track {
  background: #666666;
  border: 0px none #ffffff;
  border-radius: 50px; }

.result::-webkit-scrollbar-track:hover {
  background: #666666; }

.result::-webkit-scrollbar-track:active {
  background: #333333; }

.result::-webkit-scrollbar-corner {
  background: transparent; }

.search-not-found div:first-child {
  padding: 64px 0 24px;
  text-align: center; }
  .search-not-found div:first-child img {
    width: 48px; }
  .search-not-found div:first-child span.icon-search {
    font-size: 48px;
    line-height: 100%;
    margin: 0 0 16px;
    color: #7B7E85;
    display: inline-block; }
  .search-not-found div:first-child h3 {
    font-family: "db_heaventregular", san-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 120%;
    color: #F2F6FD;
    margin: 0; }
  .search-not-found div:first-child p {
    font-family: "db_heaventmed", san-serif;
    font-size: 20px;
    line-height: 28px;
    color: #fff; }

.search-not-found .search-trend > ul {
  padding: 0;
  gap: 12px; }
  .search-not-found .search-trend > ul > li {
    display: inline-block;
    float: none;
    max-width: inherit;
    margin: 0; }
    .search-not-found .search-trend > ul > li:nth-of-type(5n+1) {
      clear: none; }

.footer-bar {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  z-index: 3;
  background: rgba(0, 0, 0, 0.85);
  box-shadow: #1f1f1f 0px 0px 8px;
  display: block; }
  .footer-bar p {
    text-align: center;
    padding: 10px;
    color: #b7b7b6;
    letter-spacing: 1px;
    font-size: 16px;
    line-height: 20px; }
    .footer-bar p a {
      text-decoration: underline;
      color: #faa935; }
    .footer-bar p a:last-child {
      text-decoration: none;
      background: #0F62FE;
      padding: 6px 25px;
      border-radius: 4px;
      color: #fff;
      margin: 0 0 0 10px;
      font-family: db_heaventmed, san-serif;
      letter-spacing: 0.5px;
      font-size: 20px;
      display: inline-block; }

/*hack for IE*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* IE10+ specific styles go here */
  img {
    border: none; }
  *[class*="-hd"] > * {
    color: #4d2598;
    background: transparent !important; } }

/*modernizr*/
.no-backgroundcliptext *[class*="-hd"] > *, .no-backgroundcliptext h2.highlight {
  color: #4d2598 !important;
  background: transparent !important; }

/*smart banner*/
.smartbanner-show section.searchmodal .search-tab .toggle-detail > li .result {
  height: calc(80vh - 80px); }

.smartbanner-show body[class*=modal] section.searchmodal.active {
  top: 80px; }

.smartbanner-show .svod-sidebar .svod-sidebar-content {
  top: 80px;
  height: calc(100vh - 120px) !important; }

.smartbanner-show .wrapall > div:first-child {
  padding-top: 80px !important; }

.smartbanner-show .child-nav-container {
  margin-top: 80px; }

.smartbanner-show .artist-list-page .container {
  padding-top: 50px; }

/*extra large screen*/
@media only screen and (min-width: 1365px) {
  .result ul li:nth-of-type(5n+1) {
    clear: both; }
  .result ul li:nth-of-type(5n) {
    margin: 0; }
  .result ul.item-feed.landscape li:nth-of-type(5n+1) {
    clear: none; } }

@media only screen and (min-width: 1024px) and (max-width: 1260px) {
  footer .ft-row > ul > li {
    margin: 0 4% 0 0; } }

@media screen and (min-width: 1200px) {
  .result .section-search .owl-loaded.owl-carousel.news-search .owl-nav > * {
    background-position: 0 42%; }
  .result .section-search .owl-loaded.owl-carousel.news-search .owl-nav .owl-prev {
    background-position: 10px 42%; } }

@media only screen and (max-width: 1199px) and (min-width: 1024px) {
  .result .section-search .owl-loaded.owl-carousel.news-search .owl-nav > * {
    background-position: 0 32%; }
  .result .section-search .owl-loaded.owl-carousel.news-search .owl-nav .owl-prev {
    background-position: 10px 32%; } }

@media only screen and (min-width: 1024px) {
  .result .section-search .owl-loaded.owl-carousel.news-search .owl-nav .owl-prev {
    width: 40px !important;
    background: url(/static/images/svod/svod-next-icon.png) no-repeat 15px 43%, rgba(22, 22, 22, 0.3) !important;
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    top: -1px !important;
    left: -1px !important;
    bottom: -1px !important;
    height: initial !important;
    opacity: 1 !important;
    border: none;
    position: absolute;
    text-indent: -9999px; }
  .result .section-search .owl-loaded.owl-carousel.news-search .owl-nav .owl-next {
    width: 40px !important;
    background: url(/static/images/svod/svod-next-icon.png) no-repeat 15px 43%, rgba(22, 22, 22, 0.3) !important;
    top: -1px !important;
    bottom: -1px !important;
    right: -1px !important;
    height: initial !important;
    opacity: 1 !important;
    border: none;
    position: absolute;
    text-indent: -9999px; }
  footer .ft-row > ul > li ul li.show-mobile {
    display: none; } }

/*mobile screen */
@media only screen and (max-width: 1023px) {
  body .sp-banner {
    min-height: unset; }
  body .sp-banner img {
    width: 100%; }
  body .sp-banner > div > div {
    margin: 0 auto; }
  #truehits_div {
    position: absolute;
    bottom: 37px;
    right: 4%;
    left: auto; }
  .ico-teaser, .ico-hit, .ico-showing {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 2px; }
  .view-all {
    right: 0;
    top: 10px; }
  body[class*=modal] section.searchmodal .thumb > a:after, body[class*=modal] section.searchmodal .thumb:hover a:after, body[class*=modal] section.searchmodal .link a {
    opacity: 1 !important;
    background-color: transparent; }
  body[class*=modal] section.searchmodal .search-trend {
    width: calc(100% - 32px);
    margin: 0 auto; }
    body[class*=modal] section.searchmodal .search-trend h2 {
      width: 100%;
      padding: 32px 0 12px;
      font-size: 22px;
      text-align: left; }
    body[class*=modal] section.searchmodal .search-trend .btn-clear {
      top: 37px;
      font-size: 18px; }
  body[class*=modal] section.searchmodal .btn-close {
    width: auto;
    right: 24px; }
  /*modernizr*/
  .no-picture .hero-carousel .owl-item img {
    width: 200%; }
  #wrapper .container {
    margin: 0 15px; }
  /*footer mobile*/
  footer .ft-row > p {
    text-align: center; }
  footer .ft-row p {
    padding: 0 3% 3px;
    line-height: 25px; }
  footer .ft-row .footer-secondary p, footer .ft-row .footer-secondary ul {
    width: 100%;
    text-align: left;
    padding: 0 0 10px; }
  footer .ft-row .footer-secondary ul li {
    display: block;
    padding: 10px 0; }
  footer .ft-row .footer-secondary:before {
    width: 88%;
    left: 2%; }
  footer .ft-row p.qr-dl {
    display: none; }
  /*share modal mobile*/
  section.sharemodal, section.sharemodal.active {
    display: block; }
    section.sharemodal .modal-content, section.sharemodal.active .modal-content {
      width: 80%;
      padding: 0 30px;
      height: 400px;
      margin: -200px 0 0 -40%; }
      section.sharemodal .modal-content .main-hd, section.sharemodal.active .modal-content .main-hd {
        font-size: 36px; }
  /*search result mobile*/
  .result ul {
    padding: 20px 0 40px;
    overflow: hidden; }
    .result ul li {
      width: 50%;
      overflow: hidden; }
      .result ul li h2 {
        font-size: 18px;
        font-weight: normal;
        line-height: 22px; }
    .result ul li:nth-of-type(5n+1) {
      clear: none; }
    .result ul li:nth-of-type(2n+1) {
      clear: both; }
    .result ul li:nth-of-type(2n) article {
      margin: 0 0 0 10px;
      float: right; }
  /*back to top*/
  #button {
    display: inline-block;
    background-color: #21297e;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 3px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 3; }
  #button::after {
    background: url("/static/images/BACKTOTOP.svg") 0 0 no-repeat;
    width: 30px;
    height: 20px;
    content: '';
    display: block;
    margin: 15px auto;
    background-size: 100%; }
  #button:hover {
    cursor: pointer;
    background-color: #21297ecc; }
  #button:active {
    background-color: #21297e; }
  #button.show {
    opacity: 1;
    visibility: visible; }
  .search-not-found div:first-child {
    width: 100%;
    margin: 0 auto;
    padding: 60px 0 20px; }
  .search-not-found .search-trend {
    text-align: center; }
    .search-not-found .search-trend ul {
      padding: 0; }
      .search-not-found .search-trend ul li {
        display: inline-block;
        clear: none; }
  section.searchmodal .search-tab .toggle-detail > li .result .section-search {
    width: 100%; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search a.readMore {
      right: 0;
      top: 4px;
      font-size: 18px; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search > h2 {
      font-size: 21px;
      line-height: 24px;
      margin: 0 0 8px; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed {
      padding: 0 0 10px; }
      section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li {
        width: 100%;
        clear: both; }
        section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li article.item {
          margin: 0; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li article.item .thumb {
            width: 190px;
            height: auto;
            float: left;
            padding-right: 10px; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article {
      float: none; }
      section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article .relate h4 {
        font-size: 16px;
        line-height: 20px; }
      section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article .relate p {
        font-size: 18px;
        line-height: 22px; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li:nth-of-type(2n) article {
      float: none; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-of-type(2n+1) {
      clear: both; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li:nth-child(5) {
      display: none; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .item h3 {
      font-size: 18px;
      line-height: 22px;
      margin-top: 4px; }
  section.searchmodal .modal-content .guide-search li p {
    line-height: 32px;
    letter-spacing: 0.36px; }
  section.searchmodal .modal-content .guide-search li .search-cat {
    flex: 0 0 23%;
    padding: 0; }
  section.searchmodal .modal-content .guide-search li p:first-of-type {
    margin-right: 5%;
    width: auto;
    flex: 0 0 60%; }
  section.searchmodal .modal-content .guide-search li:before {
    margin-top: 8px; }
  section.searchmodal .modal-content form input[type="text"] {
    width: calc(100% - 54px); } }

/*0-659px screen*/
@media only screen and (max-width: 659px) {
  section.searchmodal {
    width: 100%;
    padding-top: 72px; }
    section.searchmodal .btn-close {
      right: 24px;
      top: 24px;
      height: 24px !important; }
  body section.searchmodal .modal-content form input[type="text"] {
    font-size: 20px;
    line-height: 1;
    max-width: calc(100% - 54px); }
  .view-all {
    right: 0; }
  section.clearmodal.active {
    width: calc(100% - 32px);
    left: 16px;
    right: 16px;
    top: calc(50% - 98px);
    margin: auto;
    height: 196px; }
  section.clearmodal .modal-content {
    padding: 0; }
    section.clearmodal .modal-content h3 {
      font-size: 28px;
      margin: 40px 0 8px; }
    section.clearmodal .modal-content p {
      font-size: 18px; }
    section.clearmodal .modal-content > a {
      max-width: 131px;
      font-size: 18px; }
  body section.searchmodal .btn-close {
    width: auto;
    right: 16px; }
  body section.searchmodal .modal-content form {
    padding: 12px 19px 12px 12px;
    width: calc(100% - 32px);
    margin: 0 auto; }
    body section.searchmodal .modal-content form .icon-search {
      margin-right: 8px; }
    body section.searchmodal .modal-content form input[type="text"] {
      max-width: calc(100% - 54px);
      width: calc(100% - 54px); }
  body section.searchmodal .modal-content .guide-search {
    width: calc(100% - 32px);
    margin: 0 auto;
    left: 16px;
    right: 16px; }
  section.searchmodal .search-tab .toggle-detail > li .result .section-search {
    width: calc(100% - 32px);
    margin: 0 auto 32px;
    display: block;
    clear: both;
    overflow: hidden; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search h2 {
      font-size: 22px;
      line-height: 120%; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search a.readMore {
      right: 0;
      top: 4px;
      font-size: 18px; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist article.item {
      width: calc(25% - 16px);
      max-width: fi;
      gap: 16px;
      display: none; }
      section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist article.item h3 {
        font-size: 18px; }
      section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist article.item:nth-child(1), section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist article.item:nth-child(2), section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist article.item:nth-child(3), section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist article.item:nth-child(4) {
        display: inline-block; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist.full-tab article.item {
      display: inline-block !important; }
  section.searchmodal .search-tab .toggle-detail > li .result ul {
    gap: 16px 8px; }
    section.searchmodal .search-tab .toggle-detail > li .result ul li {
      width: calc(33% - 5.33px);
      max-width: 109px; }
  section.searchmodal .search-tab .toggle-detail > li .result .item-feed.landscape li {
    width: calc(50% - 4px) !important; } }

/* footer */
@media only screen and (max-width: 1024px) {
  body .wrapall > div.footer-bar {
    padding: 0; }
    body .wrapall > div.footer-bar p {
      text-align: left; }
      body .wrapall > div.footer-bar p a:last-child {
        /*display: block; max-width: calc(94px - 50px);*/
        display: table;
        clear: both;
        margin: 10px auto;
        max-width: unset; } }

@media only screen and (max-width: 1023px) {
  footer .ft-row > p {
    display: none; }
  footer .ft-row > a {
    text-align: center; }
  footer .ft-row > ul {
    width: 100%; }
    footer .ft-row > ul > li {
      display: block; }
    footer .ft-row > ul li.show {
      display: inline-block;
      float: none;
      text-align: center;
      margin: 0;
      width: 100%; }
      footer .ft-row > ul li.show h3 {
        display: none; }
      footer .ft-row > ul li.show ul li {
        display: none; }
      footer .ft-row > ul li.show ul li.show-list {
        display: inline-block;
        margin: 0 30px 0 0; }
  footer .ft-row .app-dl {
    display: block;
    float: none;
    width: 100%;
    text-align: center;
    margin: 0 0 15px; }
    footer .ft-row .app-dl > h3 {
      margin: 0; }
    footer .ft-row .app-dl > p {
      overflow: hidden;
      float: none; }
      footer .ft-row .app-dl > p > a {
        float: none;
        margin-right: 5px; }
        footer .ft-row .app-dl > p > a img {
          display: inline-block; }
      footer .ft-row .app-dl > p > a:last-child {
        margin-right: 0; }
  footer .ft-row .footer-secondary p {
    text-align: center;
    padding: 0; } }

@media only screen and (max-width: 767px) {
  footer {
    padding: 0 3% 10px; }
    footer .ft-row > ul {
      width: 100%; }
      footer .ft-row > ul li.show ul li.show-list {
        margin: 0 20px 0 0; }
      footer .ft-row > ul li {
        width: 100%;
        margin: 0;
        padding: 10px 0 5px;
        border-bottom: 0.6px solid rgba(216, 216, 216, 0.4); }
        footer .ft-row > ul li h3 {
          font-size: 20px;
          margin: 0 0 5px; }
          footer .ft-row > ul li h3 img {
            float: right;
            height: 7px;
            margin: 9px 0 0px;
            display: inline-block;
            transition: all 0.25s ease-in; }
        footer .ft-row > ul li ul {
          width: 90%;
          margin: 0 auto;
          max-height: 0;
          transition: max-height 0.15s ease-out;
          overflow: hidden; }
          footer .ft-row > ul li ul li {
            margin: 0; }
          footer .ft-row > ul li ul li:last-child {
            border: none; }
      footer .ft-row > ul li.active ul {
        max-height: 1000px;
        transition: max-height 0.25s ease-in;
        margin-top: 0; }
      footer .ft-row > ul li.active h3 img {
        transform: rotate(-180deg);
        transition: all 0.25s ease-in; }
      footer .ft-row > ul li:first-child {
        padding-top: 0; }
      footer .ft-row > ul li.contact-us {
        border: none;
        display: flex;
        align-items: center; }
        footer .ft-row > ul li.contact-us h3 {
          float: left;
          margin: 0 20px 0 0;
          font-size: 16px; }
        footer .ft-row > ul li.contact-us ul {
          display: block;
          max-height: inherit;
          width: auto;
          margin: 0;
          padding: 0; }
          footer .ft-row > ul li.contact-us ul li {
            border: none;
            float: left;
            width: auto;
            clear: none;
            padding: 0;
            margin: 0 20px 0 0; }
            footer .ft-row > ul li.contact-us ul li a span:first-child {
              min-width: auto; }
            footer .ft-row > ul li.contact-us ul li a span:last-child {
              display: none; }
            footer .ft-row > ul li.contact-us ul li a span[class^="icon-"] {
              font-size: 20px;
              margin: 0; }
          footer .ft-row > ul li.contact-us ul li:last-child {
            margin: 0; }
    footer .ft-row .app-dl > p > a {
      display: block;
      margin: 0; }
      footer .ft-row .app-dl > p > a img {
        display: inline-block; }
  section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li article.item .thumb {
    width: 42%; } }

@media only screen and (max-width: 768px) {
  section.searchmodal .search-tab .tab-scroll {
    overflow-x: scroll;
    -ms-overflow-style: none; }
  section.searchmodal .search-tab .tab-scroll::-webkit-scrollbar {
    display: none; } }

.scroll-style-3::-webkit-scrollbar-track {
  -webkit-box-shadow: unset;
  border-radius: 10px;
  background-color: #F2F6FD; }

.scroll-style-3::-webkit-scrollbar {
  width: 5px;
  background-color: #F2F6FD; }

.scroll-style-3::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: unset;
  background-color: #00040D; }

.scroll-style-3 {
  scrollbar-color: #26282E #121416;
  scrollbar-width: thin; }

.scroll-style-3::-webkit-scrollbar {
  width: 8px;
  height: 80px; }

.scroll-style-3::-webkit-scrollbar-button {
  width: 0px;
  height: 0px; }

.scroll-style-3::-webkit-scrollbar-thumb {
  background: #26282E;
  border-radius: 100px; }

.scroll-style-3::-webkit-scrollbar-thumb:hover {
  background: #26282E; }

.scroll-style-3::-webkit-scrollbar-thumb:active {
  background: #26282E; }

.scroll-style-3::-webkit-scrollbar-track {
  background: #121416;
  border-radius: 0; }

.scroll-style-3::-webkit-scrollbar-track:hover {
  background: #121416; }

.scroll-style-3::-webkit-scrollbar-track:active {
  background: #121416; }

.scroll-style-3::-webkit-scrollbar-corner {
  background: transparent; }

.svod-floating-button {
  position: fixed;
  bottom: 10px;
  right: 20px;
  z-index: 999;
  width: 160px;
  height: auto;
  filter: unset;
  transition: all 0.3s ease;
  animation: bounce 10s infinite; }
  .svod-floating-button:hover {
    transform: scale(1.1);
    transition: all 0.3s ease;
    filter: brightness(1.2);
    animation: unset !important; }
  .svod-floating-button .floating-wrapper {
    position: relative; }
    .svod-floating-button .floating-wrapper img {
      display: block;
      width: 100%; }
    .svod-floating-button .floating-wrapper .close-btn {
      position: absolute;
      top: 0;
      right: 0;
      width: 24px;
      height: 24px;
      border-radius: 100%;
      background: #7b7e85;
      opacity: 0.8;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center; }
      .svod-floating-button .floating-wrapper .close-btn .icon {
        color: #f2f6fd; }

@media only screen and (max-width: 767px) {
  .svod-floating-button {
    bottom: 10px;
    right: 10px;
    width: 100px; }
    .svod-floating-button .floating-wrapper .close-btn {
      width: 16px;
      height: 16px; }
      .svod-floating-button .floating-wrapper .close-btn .icon {
        font-size: 10px; } }

.w3-modal-consent-pdpa .modal-consent-pdpa {
  padding: 0 0 64px !important;
  height: calc(100% - 50px); }
  @media only screen and (max-width: 576px) {
    .w3-modal-consent-pdpa .modal-consent-pdpa {
      padding: 0 0 16px !important;
      height: calc(100% - 10px); } }

.modal-consent-pdpa {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 4, 13, 0.7);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 12;
  box-sizing: border-box;
  padding: 80px 0 65px; }
  @media only screen and (min-width: 768px) and (max-width: 1023px) {
    .modal-consent-pdpa {
      padding: 44px 0; } }
  @media only screen and (max-width: 767px) {
    .modal-consent-pdpa {
      padding: 44px 0; } }
  .modal-consent-pdpa .body-consent-pdpa {
    width: calc(100% - 36px);
    max-width: 609px;
    height: 100%;
    padding: 24px 16px;
    box-sizing: border-box;
    color: #F2F6FD;
    background-color: #121416;
    border: 1px solid #26282E;
    border-radius: 8px;
    overflow: hidden; }
    .modal-consent-pdpa .body-consent-pdpa .latest-update {
      font-family: "db_heaventmed", san-serif;
      font-size: 22px;
      line-height: 120%;
      color: #7B7E85;
      padding-bottom: 8px; }
    .modal-consent-pdpa .body-consent-pdpa > h3 {
      font-family: "db_heaventregular", san-serif;
      font-size: 28px;
      line-height: 120%;
      color: #F2F6FD;
      padding-bottom: 8px;
      font-weight: normal; }
    .modal-consent-pdpa .body-consent-pdpa .consent-pdpa {
      overflow-y: scroll;
      overflow-x: hidden;
      height: calc(100% - 183px); }
      @media only screen and (max-width: 576px) {
        .modal-consent-pdpa .body-consent-pdpa .consent-pdpa {
          height: calc(100% - 248px); } }
    .modal-consent-pdpa .body-consent-pdpa .scroll-style-4::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px #121416;
      border-radius: 10px;
      background-color: #121416; }
    .modal-consent-pdpa .body-consent-pdpa .scroll-style-4::-webkit-scrollbar {
      width: 2px;
      background-color: #55585E; }
    .modal-consent-pdpa .body-consent-pdpa .scroll-style-4::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background-color: #55585E; }
    .modal-consent-pdpa .body-consent-pdpa .consent-info {
      font-family: "db_heaventregular", san-serif;
      font-size: 16px;
      line-height: 120%;
      color: #F2F6FD;
      background: #34373D;
      border-radius: 4px;
      padding: 8px;
      margin: 12px 0 16px; }
    .modal-consent-pdpa .body-consent-pdpa .btn-consent-pdpa {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px; }
      .modal-consent-pdpa .body-consent-pdpa .btn-consent-pdpa button {
        width: 50%;
        height: 44px;
        background: none;
        font-size: 22px;
        line-height: 120%;
        border-radius: 4px;
        color: #F2F6FD;
        font-family: "db_heaventregular", san-serif;
        font-weight: normal;
        border: 1px solid #55585E;
        cursor: pointer; }
        .modal-consent-pdpa .body-consent-pdpa .btn-consent-pdpa button.btn-primary {
          background-color: #0F62FE;
          border: 1px solid #0F62FE; }

.policy h2.txt-highlight {
  text-align: center;
  text-decoration: underline;
  margin: 0 0 16px; }

.policy p {
  font-family: "db_heaventregular", san-serif;
  font-weight: normal;
  font-size: 18px;
  line-height: 120%;
  margin: 0 0 20px;
  color: #B9BBC2; }
  .policy p a {
    color: #0F62FE;
    text-decoration: underline; }
    .policy p a:hover {
      text-decoration: none; }
  .policy p strong {
    font-weight: normal;
    font-family: "db_heaventmed", san-serif; }

.policy h2 {
  font-family: "db_heaventmed", san-serif;
  font-weight: normal;
  font-size: 18px;
  line-height: 120%;
  color: #B9BBC2; }

.policy h3 {
  font-family: "db_heaventmed", san-serif;
  font-weight: normal;
  font-size: 18px;
  line-height: 120%;
  color: #B9BBC2; }

.policy ul li {
  margin: 0 0 20px;
  list-style: none; }
  .policy ul li ol {
    margin: 0 0 10px 0; }
    .policy ul li ol li {
      font-family: "db_heaventregular", san-serif;
      font-weight: normal;
      font-size: 18px;
      line-height: 120%;
      margin: 0;
      color: #B9BBC2; }
      .policy ul li ol li p span {
        display: inline-block;
        text-indent: 0;
        margin: 0; }

.policy .disc {
  margin: 0 0 16px 16px; }
  @media only screen and (max-width: 576px) {
    .policy .disc {
      padding: 0; } }
  .policy .disc li {
    list-style: disc outside;
    text-indent: 0;
    margin: 0;
    color: #B9BBC2;
    font-family: "db_heaventregular", san-serif;
    font-size: 18px;
    line-height: 120%; }

.policy table {
  width: 100%;
  margin: 20px 0; }
  .policy table thead tr th {
    text-align: center;
    padding: 20px;
    border: 1px solid #B9BBC2;
    width: 50%;
    font-family: "db_heaventregular", san-serif;
    font-size: 20px;
    line-height: 120%;
    border-bottom: none;
    color: #B9BBC2; }
  .policy table thead tr th:first-child {
    border-right: none; }
  .policy table tbody tr td {
    vertical-align: top;
    font-family: "db_heaventregular", san-serif;
    font-size: 18px;
    line-height: 120%;
    padding: 20px;
    border: 1px solid #B9BBC2;
    border-bottom: 0;
    color: #B9BBC2; }
    .policy table tbody tr td ul {
      padding: 0 0 0 20px; }
      .policy table tbody tr td ul li {
        list-style: disc outside;
        margin: 0 0 4px; }
      .policy table tbody tr td ul li:last-child {
        margin: 0; }
  .policy table tbody tr td:first-child {
    border-right: none; }
  .policy table tbody tr:last-child td {
    border-bottom: 1px solid #B9BBC2; }

.policy p.address span {
  display: block; }

a {
    cursor: pointer;
}

.icon-alert-alt:before {
  font-size: 56px;
}

.pace {
    width: 140px;
    height: 300px;
    position: fixed;
    top: -90px;
    right: -20px;
    z-index: 2000;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    -webkit-transition: all 2s linear 0s;
    -moz-transition: all 2s linear 0s;
    transition: all 2s linear 0s;
  }
  
  .pace.pace-active {
    -webkit-transform: scale(.25);
    -moz-transform: scale(.25);
    -ms-transform: scale(.25);
    -o-transform: scale(.25);
    transform: scale(.25);
    opacity: 1;
  }
  
  .pace .pace-activity {
    width: 140px;
    height: 140px;
    border-radius: 70px;
    background: #29d;
    position: absolute;
    top: 0;
    z-index: 1911;
    -webkit-animation: pace-bounce 1s infinite;
    -moz-animation: pace-bounce 1s infinite;
    -o-animation: pace-bounce 1s infinite;
    -ms-animation: pace-bounce 1s infinite;
    animation: pace-bounce 1s infinite;
  }
  
  .pace .pace-progress {
    position: absolute;
    display: block;
    left: 50%;
    bottom: 0;
    z-index: 1910;
    margin-left: -30px;
    width: 60px;
    height: 75px;
    background: rgba(20, 20, 20, .1);
    box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
    border-radius: 30px / 40px;
    -webkit-transform: scaleY(.3) !important;
    -moz-transform: scaleY(.3) !important;
    -ms-transform: scaleY(.3) !important;
    -o-transform: scaleY(.3) !important;
    transform: scaleY(.3) !important;
    -webkit-animation: pace-compress .5s infinite alternate;
    -moz-animation: pace-compress .5s infinite alternate;
    -o-animation: pace-compress .5s infinite alternate;
    -ms-animation: pace-compress .5s infinite alternate;
    animation: pace-compress .5s infinite alternate;
  }
  
  @-webkit-keyframes pace-bounce {
    0% {
      top: 0;
      -webkit-animation-timing-function: ease-in;
    }
    40% {}
    50% {
      top: 140px;
      height: 140px;
      -webkit-animation-timing-function: ease-out;
    }
    55% {
      top: 160px;
      height: 120px;
      border-radius: 70px / 60px;
      -webkit-animation-timing-function: ease-in;
    }
    65% {
      top: 120px;
      height: 140px;
      border-radius: 70px;
      -webkit-animation-timing-function: ease-out;
    }
    95% {
      top: 0;
      -webkit-animation-timing-function: ease-in;
    }
    100% {
      top: 0;
      -webkit-animation-timing-function: ease-in;
    }
  }
  
  @-moz-keyframes pace-bounce {
    0% {
      top: 0;
      -moz-animation-timing-function: ease-in;
    }
    40% {}
    50% {
      top: 140px;
      height: 140px;
      -moz-animation-timing-function: ease-out;
    }
    55% {
      top: 160px;
      height: 120px;
      border-radius: 70px / 60px;
      -moz-animation-timing-function: ease-in;
    }
    65% {
      top: 120px;
      height: 140px;
      border-radius: 70px;
      -moz-animation-timing-function: ease-out;}
    95% {
      top: 0;
      -moz-animation-timing-function: ease-in;
    }
    100% {top: 0;
      -moz-animation-timing-function: ease-in;
    }
  }
  
  @keyframes pace-bounce {
    0% {
      top: 0;
      animation-timing-function: ease-in;
    }
    50% {
      top: 140px;
      height: 140px;
      animation-timing-function: ease-out;
    }
    55% {
      top: 160px;
      height: 120px;
      border-radius: 70px / 60px;
      animation-timing-function: ease-in;
    }
    65% {
      top: 120px;
      height: 140px;
      border-radius: 70px;
      animation-timing-function: ease-out;
    }
    95% {
      top: 0;
      animation-timing-function: ease-in;
    }
    100% {
      top: 0;
      animation-timing-function: ease-in;
    }
  }
  
  @-webkit-keyframes pace-compress {
    0% {
      bottom: 0;
      margin-left: -30px;
      width: 60px;
      height: 75px;
      background: rgba(20, 20, 20, .1);
      box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
      border-radius: 30px / 40px;
      -webkit-animation-timing-function: ease-in;
    }
    100% {
      bottom: 30px;
      margin-left: -10px;
      width: 20px;
      height: 5px;
      background: rgba(20, 20, 20, .3);
      box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
      border-radius: 20px / 20px;
      -webkit-animation-timing-function: ease-out;
    }
  }
  
  @-moz-keyframes pace-compress {
    0% {
      bottom: 0;
      margin-left: -30px;
      width: 60px;
      height: 75px;
      background: rgba(20, 20, 20, .1);
      box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
      border-radius: 30px / 40px;
      -moz-animation-timing-function: ease-in;
    }
    100% {
      bottom: 30px;
      margin-left: -10px;
      width: 20px;
      height: 5px;
      background: rgba(20, 20, 20, .3);
      box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
      border-radius: 20px / 20px;
      -moz-animation-timing-function: ease-out;
    }
  }
  
  @keyframes pace-compress {
    0% {
      bottom: 0;
      margin-left: -30px;
      width: 60px;
      height: 75px;
      background: rgba(20, 20, 20, .1);
      box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
      border-radius: 30px / 40px;
      animation-timing-function: ease-in;
    }
    100% {
      bottom: 30px;
      margin-left: -10px;
      width: 20px;
      height: 5px;
      background: rgba(20, 20, 20, .3);
      box-shadow: 0 0 20px 35px rgba(20, 20, 20, .3);
      border-radius: 20px / 20px;
      animation-timing-function: ease-out;
    }
  }
body.cover-lightbox_open {
  overflow: hidden; }

.cover-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1000; }
  .cover-lightbox:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000; }
  .cover-lightbox .content-lightbox {
    position: relative;
    width: 100%;
    height: 100%; }
    .cover-lightbox .content-lightbox img {
      width: 100%;
      height: auto;
      position: absolute;
      top: 50%;
      right: 0;
      bottom: 0;
      left: 0;
      transform: translateY(-50%); }
      @media only screen and (max-width: 991px) {
        .cover-lightbox .content-lightbox img {
          height: 100%;
          width: auto;
          top: 0;
          left: 50%;
          transform: translateX(-50%) scale(0.9); } }
  .cover-lightbox .cover-lightbox-close {
    position: absolute;
    right: 20px;
    top: 20px;
    border-radius: 100%;
    background: #55585E;
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center; }
    @media only screen and (max-width: 991px) {
      .cover-lightbox .cover-lightbox-close {
        right: 12px;
        top: 12px;
        width: 28px;
        height: 28px; } }
    .cover-lightbox .cover-lightbox-close .icon-x {
      font-size: 20px; }
      @media only screen and (max-width: 991px) {
        .cover-lightbox .cover-lightbox-close .icon-x {
          font-size: 16px; } }

.opening-ads {
  position: fixed;
  z-index: 10000;
  width: 100%;
  height: 100%;
  display: inline-block;
  overflow: hidden;
  background: rgba(0, 4, 13, 0.85);
  mix-blend-mode: normal;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  -moz-backdrop-filter: blur(25px); }
  .opening-ads #div-gpt-ad-openning {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .opening-ads button {
    position: absolute;
    top: 20px;
    right: 40px;
    background: none;
    font-size: 24px;
    color: #fff;
    cursor: pointer; }

body.adSpotlightCover {
  overflow: hidden !important; }

@charset "UTF-8";
/* palette */
/* gradient */
/* variable */
/* svod icon */
@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"; }

.icon-film:before {
  content: "\E95D"; }

.icon-globe:before {
  content: "\E95E"; }

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

.icon-mail:before {
  content: "\E960"; }

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

.icon-success:before {
  content: "\E962"; }

.icon-tv:before {
  content: "\E963"; }

.icon-redo:before {
  content: "\E964"; }

.icon-times-circle-filled:before {
  content: "\E965"; }

.icon-img-thumb:before {
  content: "\E966"; }

.icon-social-facebook:before {
  content: "\E967"; }

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

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

.icon-social-youtube:before {
  content: "\E96A"; }

.icon-chevron-down:before {
  content: "\E96B"; }

.icon-giftbox:before {
  content: "\E96C"; }

.icon-social-line:before {
  content: "\E96D"; }

.icon-custom:before {
  content: "\E96E"; }

.icon-shopping-bag-alt:before {
  content: "\E96F"; }

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

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

.icon-copy:before {
  content: "\E972"; }

.icon-open-in-new:before {
  content: "\E973"; }

.icon-chevron-up:before {
  content: "\E974"; }

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

.icon-volume-on:before {
  content: "\E976"; }

.icon-volume-off:before {
  content: "\E977"; }

.icon-play1:before {
  content: "\E978"; }

.icon-pause:before {
  content: "\E979"; }

/*font-face*/
@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; }

/*Prefix for customize Mello framework*/
/*global components*/
.viewed:before, footer .ft-row:before, .thumb > a:after {
  content: '';
  display: block; }

/*font-face*/
@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; }

/*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_heaventlight, san-serif;
  font-size: 15px;
  line-height: 22px; }

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

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

.viewed:before, footer .ft-row:before, .thumb > a:after {
  content: '';
  display: block; }

/*scroll*/
.scroll-style-2::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #fff; }

.scroll-style-2::-webkit-scrollbar {
  width: 5px;
  background-color: #fff; }

.scroll-style-2::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #707070; }

.scroll-style-2 {
  scrollbar-color: #595959 #e0e0e0;
  scrollbar-width: thin; }

.scroll-style-2::-webkit-scrollbar {
  width: 2px;
  height: 2px; }

.scroll-style-2::-webkit-scrollbar-button {
  width: 0px;
  height: 0px; }

.scroll-style-2::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border: 0px none #ffffff;
  border-radius: 50px; }

.scroll-style-2::-webkit-scrollbar-thumb:hover {
  background: #ffffff; }

.scroll-style-2::-webkit-scrollbar-thumb:active {
  background: #000000; }

.scroll-style-2::-webkit-scrollbar-track {
  background: #666666;
  border: 0px none #ffffff;
  border-radius: 50px; }

.scroll-style-2::-webkit-scrollbar-track:hover {
  background: #666666; }

.scroll-style-2::-webkit-scrollbar-track:active {
  background: #333333; }

.scroll-style-2::-webkit-scrollbar-corner {
  background: transparent; }

.premium-badge, header .ic-profile > a .premium-monthly, header .ic-profile > a .premium-yearly, header .ic-profile > a .member-normaly, header .ic-profile .profile-dropdown a .profile-extra .premium-monthly, header .ic-profile .profile-dropdown a .profile-extra .premium-yearly, header .ic-profile .profile-dropdown a .profile-extra .member-normaly {
  font-family: "db_heaventmed", san-serif;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  transition: opacity 0.5s;
  margin-right: 8px;
  padding: 0 6px;
  box-sizing: border-box;
  height: 18px;
  border: 1px solid transparent; }
  .premium-badge .icon, header .ic-profile > a .premium-monthly .icon, header .ic-profile > a .premium-yearly .icon, header .ic-profile > a .member-normaly .icon, header .ic-profile .profile-dropdown a .profile-extra .premium-monthly .icon, header .ic-profile .profile-dropdown a .profile-extra .premium-yearly .icon, header .ic-profile .profile-dropdown a .profile-extra .member-normaly .icon {
    font-size: 12px;
    margin-right: 3px; }

/*main header*/
header {
  width: 100%;
  box-sizing: border-box;
  height: 64px;
  padding: 0 40px;
  border-radius: 0;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 12 !important;
  box-shadow: none; }
  @media (max-width: 1220px) {
    header {
      padding: 0 20px; } }
  header > div {
    box-sizing: border-box;
    margin: 0 auto;
    position: relative;
    max-width: 1280px;
    height: 100%;
    z-index: 1; }
  header .logo {
    position: absolute;
    left: 0;
    top: 10px;
    z-index: 7;
    margin: 0;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease; }
    header .logo img {
      height: 44px;
      width: auto;
      display: block; }
  header nav {
    width: 90%;
    text-align: left;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    /* Flip the image on hover */ }
    header nav ul {
      display: flex;
      align-items: center;
      padding: 16px 0; }
    header nav li {
      display: inline-block;
      text-align: left;
      margin: 0 24px 0 0 !important;
      /*position: relative;*/
      -webkit-transition: all 0.4s ease;
      transition: all 0.2s ease; }
      header nav li > a,
      header nav li > p {
        color: #F2F6FD;
        min-width: auto;
        text-decoration: none;
        display: inline-block;
        position: relative;
        font-size: 20px;
        line-height: 120%;
        padding: 0;
        font-family: "db_heaventmed", san-serif;
        letter-spacing: 0.25px;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease; }
      header nav li a:hover {
        opacity: 70%;
        /*color:#0076FF; border-bottom: 5px solid #0076FF;*/ }
      header nav li.item-packages {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s;
        background: linear-gradient(#00040D, #00040D) padding-box, linear-gradient(90deg, #8d7a5b 0%, #ebe0cd 51.04%, #8d7a5b 100%);
        color: #313149;
        border: 1px solid transparent;
        border-radius: 4px; }
        header nav li.item-packages.show-package-button {
          opacity: 1;
          pointer-events: initial; }
        header nav li.item-packages a {
          padding: 4px 20px !important;
          margin: 0 !important;
          font-size: 18px !important;
          font-family: "db_heaventmed", san-serif !important;
          line-height: 24px;
          transform: translate(0px, 0px) !important;
          color: #fff; }
          header nav li.item-packages a:after {
            display: none; }
          header nav li.item-packages a span {
            background: linear-gradient(180deg, #8D7A5B 0%, #EBE0CD 51.04%, #8D7A5B 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; }
      header nav li.item-packages:hover {
        background: linear-gradient(#00040D, #00040D) padding-box, linear-gradient(90deg, #f2f6fd 0%, #f2f6fd 51.04%, #f2f6fd 100%); }
        header nav li.item-packages:hover a:hover {
          opacity: 100%; }
          header nav li.item-packages:hover a:hover span {
            background: #F2F6FD;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent; }
    header nav li.mobile {
      display: none; }
    header nav .main-nav {
      display: none; }
    header nav li.other a:after {
      content: "";
      width: 10px;
      height: 6px;
      background: url("/static/images/ch3plus/icon-dropdown.svg") 0 0 no-repeat;
      display: inline-block;
      margin: 9px 0 0 5px;
      background-size: 100%; }
    header nav .tvlive img {
      vertical-align: text-top;
      margin-left: 2px; }
    header nav li.active a {
      color: #0076FF;
      border-bottom: 5px solid #0076FF; }
    header nav .item-dropdown .dropdown {
      display: none; }
    header nav li:last-child {
      margin: 0 !important; }
    header nav .item-dropdown-hover {
      position: relative; }
      header nav .item-dropdown-hover:hover a span img {
        transform: rotate(180deg);
        transition: transform 0.3s ease; }
    header nav .item-dropdown-hover a:hover + .dropdown,
    header nav .item-dropdown-hover .dropdown:hover {
      display: block; }
    header nav .item-dropdown-hover a {
      position: relative; }
    header nav .item-dropdown-hover a:hover img {
      transform: rotate(180deg);
      transition: transform 0.3s ease;
      /* Smooth transition for the flip */ }
    header nav .item-dropdown-hover img {
      transition: transform 0.3s ease;
      /* Ensure smooth transition when flipping back */ }
    header nav .item-dropdown-hover a:hover::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 100px;
      /* เพิ่มพื้นที่ hover เพื่อให้ลากเมาส์ผ่านได้ */
      background-color: transparent;
      pointer-events: none; }
    header nav .item-dropdown-hover .dropdown {
      display: none;
      position: absolute;
      background-color: black;
      min-width: 160px;
      box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.2);
      z-index: 1000;
      border: 1px solid #7d7d7d;
      border-radius: 5px;
      top: 35px;
      font-size: 18px;
      font-family: "db_heaventmed", san-serif;
      line-height: 24px;
      transform: translate(0px, 0px);
      margin: 0 !important;
      font-size: 18px !important;
      font-family: "db_heaventmed", san-serif !important;
      line-height: 24px;
      transform: translate(0px, 0px) !important;
      left: 0; }
    header nav .item-dropdown-hover .dropdown-content-hover a {
      color: #F2F6FD;
      padding: 8px 16px;
      /* Adjusted the padding as per your request */
      text-decoration: none;
      display: block;
      border-bottom: 1px solid #26282E;
      width: 145px; }
      header nav .item-dropdown-hover .dropdown-content-hover a:last-child {
        border-bottom: none; }
    header nav .item-dropdown-hover .dropdown-content a:first-child {
      border-top: none; }
    header nav .item-dropdown-hover .dropdown-content a:last-child {
      border-bottom: none; }
    header nav .item-dropdown-hover .dropdown-content-hover a:hover {
      transition: opacity 0.2s ease-in-out;
      /* Applying transition to opacity */
      opacity: 0.7;
      /* Use 0.7 instead of 70% for proper opacity */ }
  header .member {
    position: absolute;
    right: 190px;
    top: 29px;
    margin: 0;
    visibility: visible !important; }
    header .member a {
      color: #fff;
      font-size: 24px; }
    header .member span {
      display: block; }
  header .ic-profile {
    position: relative;
    cursor: pointer;
    width: auto;
    color: #fff;
    z-index: 6;
    float: right;
    display: inline-block;
    margin: 0 !important; }
    header .ic-profile > a {
      width: 40px;
      height: 40px;
      float: left;
      position: relative;
      z-index: 2; }
      header .ic-profile > a img {
        border-radius: 100%;
        width: 38px;
        display: inline-block;
        border: 1px solid #F2F6FD; }
      header .ic-profile > a .premium-badge, header .ic-profile > a .premium-monthly, header .ic-profile > a .premium-yearly, header .ic-profile > a .member-normaly, header .ic-profile > a .profile-dropdown a .profile-extra .premium-monthly, header .ic-profile > a .profile-dropdown a .profile-extra .premium-yearly, header .ic-profile > a .profile-dropdown a .profile-extra .member-normaly {
        position: absolute;
        bottom: -10px;
        margin-right: 0;
        left: 50%;
        transform: translate(-50%, 0%);
        width: max-content; }
      header .ic-profile > a .premium-monthly {
        border-color: #A0A0A0;
        background: linear-gradient(146.75deg, #D7D2CC 11.86%, #304352 91.38%); }
      header .ic-profile > a .premium-yearly {
        border-color: #8D7A5B;
        background: linear-gradient(146.75deg, #D3CBB8 21.36%, #6D6027 91.38%); }
      header .ic-profile > a .member-normaly {
        border-color: #0F62FE;
        background: linear-gradient(144.39deg, #84A8EB -2.42%, #558AEB 30.21%, #092353 107.89%);
        box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.15); }
    header .ic-profile .profile-dropdown {
      float: left;
      margin: 0;
      width: auto;
      padding: 0 0 0 8px !important; }
      header .ic-profile .profile-dropdown > a {
        height: 42px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column; }
      header .ic-profile .profile-dropdown > p {
        font-family: 'db_heaventmed', san-serif;
        font-size: 18px;
        cursor: pointer;
        color: #fff;
        max-width: 75px;
        margin-left: 10px;
        line-height: 1;
        display: inline-block;
        z-index: 2;
        position: relative; }
        header .ic-profile .profile-dropdown > p > img {
          float: right;
          margin: 8px 0 0; }
        header .ic-profile .profile-dropdown > p span {
          display: block;
          white-space: nowrap;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis; }
          header .ic-profile .profile-dropdown > p span img {
            width: 15px;
            height: auto;
            float: left;
            margin-right: 5px; }
        header .ic-profile .profile-dropdown > p span:first-child {
          height: 15px;
          padding: 3px 0 0;
          overflow: hidden;
          margin: 0 0 3px; }
      header .ic-profile .profile-dropdown a .profile-name {
        display: flex;
        align-items: center;
        font-family: 'db_heaventbold';
        font-size: 20px; }
        header .ic-profile .profile-dropdown a .profile-name .name-text {
          white-space: nowrap;
          max-width: 86px;
          overflow: hidden;
          text-overflow: ellipsis; }
        header .ic-profile .profile-dropdown a .profile-name .caret {
          display: inline-block;
          margin-left: 5px;
          transition: transform 0.3s ease;
          font-size: 8px; }
      header .ic-profile .profile-dropdown a .profile-extra {
        display: flex; }
        header .ic-profile .profile-dropdown a .profile-extra .heart-wrapper {
          font-size: 14px;
          font-family: "db_heaventregular", san-serif;
          display: inline-flex;
          align-items: center; }
          header .ic-profile .profile-dropdown a .profile-extra .heart-wrapper .icon {
            font-size: 10px;
            color: #FA4D56;
            margin-right: 3px; }
        header .ic-profile .profile-dropdown a .profile-extra .point-wrapper {
          display: inline-flex;
          align-items: center;
          margin-left: 7px;
          font-family: "db_heaventregular", san-serif;
          font-size: 14px; }
          header .ic-profile .profile-dropdown a .profile-extra .point-wrapper:first-child {
            margin-left: 0; }
          header .ic-profile .profile-dropdown a .profile-extra .point-wrapper img {
            height: 10px;
            margin-right: 2px; }
        header .ic-profile .profile-dropdown a .profile-extra .premium-monthly {
          border-color: #A0A0A0;
          background: linear-gradient(146.75deg, #D7D2CC 11.86%, #304352 91.38%); }
        header .ic-profile .profile-dropdown a .profile-extra .premium-yearly {
          border-color: #8D7A5B;
          background: linear-gradient(146.75deg, #D3CBB8 21.36%, #6D6027 91.38%); }
        header .ic-profile .profile-dropdown a .profile-extra .member-normaly {
          border-color: #0F62FE;
          background: linear-gradient(144.39deg, #84A8EB -2.42%, #558AEB 30.21%, #092353 107.89%);
          box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.15); }
    header .ic-profile .profile-menu {
      display: none !important;
      position: absolute;
      margin: 0;
      border: 1px solid #393939 !important;
      background-color: #161616 !important;
      top: 46px;
      right: 0;
      z-index: 2;
      border-radius: 4px;
      width: 200px !important;
      box-sizing: unset; }
      header .ic-profile .profile-menu .item {
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center;
        font-family: "db_heaventmed", san-serif;
        font-size: 18px; }
        header .ic-profile .profile-menu .item .item-icon-wrapper {
          display: flex;
          width: 25px; }
          header .ic-profile .profile-menu .item .item-icon-wrapper .item-icon {
            font-size: 12px;
            color: #F4F4F4; }
        header .ic-profile .profile-menu .item .item-title {
          flex-grow: 1; }
        header .ic-profile .profile-menu .item::before {
          background-color: #393939; }
    header .ic-profile.active .profile-dropdown .profile-name .caret {
      transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg); }
    header .ic-profile.active .profile-menu {
      display: block !important; }
  header .member.invalid a {
    background-position: 0 -738px; }
  header .member.valid a {
    background: none; }
    header .member.valid a img {
      margin-top: 5px;
      border-radius: 30px;
      width: 42px;
      border: 2px solid #fff; }
  header .nav-group {
    position: absolute;
    right: 0;
    top: 10px;
    /*float: right; margin: 9px 3% 0 0;*/
    height: 44px;
    -webkit-transition: top 0.4s ease;
    transition: top 0.4s ease; }
    header .nav-group .nav-line {
      width: 1px;
      height: 44px;
      display: block;
      background: #61616F !important;
      float: right;
      margin: 0 15px !important; }
  header .menu-setting,
  header .menu-setting-2 {
    display: none;
    float: right;
    padding: 10px 0;
    margin: 0; }
    header .menu-setting a,
    header .menu-setting-2 a {
      display: inline-block; }
  header .register {
    display: inline-flex;
    align-items: center;
    float: right;
    padding: 0 !important;
    margin: 0;
    font-size: 20px; }
    header .register .icon-user {
      font-size: 20px;
      color: #fff;
      margin-right: 12px; }
    header .register .divider {
      display: inline-block;
      width: 1px;
      height: 44px;
      background-color: #61616F;
      margin: 0 15px !important;
      opacity: 0.5; }
    header .register a {
      font-family: "db_heaventmed", san-serif;
      font-size: 22px;
      line-height: 28px;
      letter-spacing: 0.25px; }
  header .hd-search {
    float: right;
    padding: 10px 0 !important; }
    @media only screen and (min-width: 1024px) and (max-width: 1370px) {
      header .hd-search {
        margin-right: 0px; } }
    header .hd-search a .icon-search {
      font-size: 18px; }
  header .btn-noti {
    float: right;
    padding: 10px 5px !important;
    margin: 0 !important;
    position: relative; }
    @media (max-width: 1055px) {
      header .btn-noti {
        margin: 0 !important;
        padding: 10px 0 !important; } }
    header .btn-noti > a {
      width: 19px;
      height: 22px;
      background: url("/static/images/icon/bell.svg") 0 0 no-repeat;
      display: inline-block;
      background-position: center; }
    header .btn-noti .noti-detail {
      width: 320px;
      background: #121212;
      position: absolute;
      right: 0;
      z-index: 7;
      border-radius: 5px;
      overflow: hidden;
      display: none;
      -webkit-box-shadow: 0px 0px 7px 0px rgba(18, 18, 18, 0.75);
      -moz-box-shadow: 0px 0px 7px 0px rgba(18, 18, 18, 0.75);
      box-shadow: 0px 0px 7px 0px rgba(18, 18, 18, 0.75); }
      header .btn-noti .noti-detail .head {
        padding: 12px 20px;
        overflow: hidden;
        background: #2A2A2A;
        border-radius: 5px; }
        header .btn-noti .noti-detail .head h3 {
          font-family: "db_heaventregular", san-serif;
          font-weight: normal;
          color: #fff;
          font-size: 24px;
          line-height: 1;
          display: inline-block;
          float: left; }
        header .btn-noti .noti-detail .head .btn-setnoti {
          margin: 4px 0 0 25px; }
        header .btn-noti .noti-detail .head a {
          font-family: "db_heaventregular", san-serif;
          font-weight: normal;
          color: #fff;
          font-size: 16px;
          line-height: 1;
          float: right;
          margin: 4px 0 0; }
        header .btn-noti .noti-detail .head a:hover {
          color: #0076ff;
          text-decoration: underline; }
      header .btn-noti .noti-detail .noti-list {
        padding: 20px;
        height: 350px;
        overflow-y: scroll;
        position: relative; }
        header .btn-noti .noti-detail .noti-list > p {
          color: #fff;
          font-family: "db_heaventmed", san-serif;
          font-weight: normal;
          font-size: 16px;
          width: 100%;
          text-align: center;
          position: absolute;
          left: 0;
          top: 43%;
          right: 0; }
        header .btn-noti .noti-detail .noti-list ul li {
          padding: 10px 0;
          margin: 0;
          overflow: hidden;
          border-bottom: 1px solid #707070; }
          header .btn-noti .noti-detail .noti-list ul li > a {
            overflow: hidden;
            display: flex; }
            header .btn-noti .noti-detail .noti-list ul li > a img {
              width: 80px;
              height: 80px;
              float: left;
              margin: 0 15px 0 0; }
            header .btn-noti .noti-detail .noti-list ul li > a div {
              float: left;
              padding: 12px 0 0;
              width: 180px;
              overflow: hidden; }
              header .btn-noti .noti-detail .noti-list ul li > a div > * {
                padding-left: 16px; }
              header .btn-noti .noti-detail .noti-list ul li > a div p.highlight {
                font-family: "db_heaventmed", san-serif;
                font-weight: normal;
                line-height: 1;
                font-size: 16px;
                color: #0076FF;
                margin: 0 0 5px; }
              header .btn-noti .noti-detail .noti-list ul li > a div h2 {
                font-family: "db_heaventmed", san-serif;
                font-weight: normal;
                line-height: 1;
                font-size: 16px;
                color: #fff;
                margin: 0 0 5px; }
                header .btn-noti .noti-detail .noti-list ul li > a div h2 span:first-child {
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  max-width: 120px;
                  float: left;
                  margin: 0 5px 0 0; }
              header .btn-noti .noti-detail .noti-list ul li > a div h2.title span {
                max-width: 100%;
                float: none;
                display: block;
                white-space: unset;
                margin: 0; }
              header .btn-noti .noti-detail .noti-list ul li > a div p:last-child {
                font-family: "db_heaventregular", san-serif;
                font-weight: normal;
                line-height: 1;
                font-size: 12px;
                color: #9B9B9B; }
        header .btn-noti .noti-detail .noti-list ul li:hover {
          cursor: pointer; }
          header .btn-noti .noti-detail .noti-list ul li:hover > a div h2 {
            color: #0076ff; }
        header .btn-noti .noti-detail .noti-list ul li:last-child {
          border-bottom: 0;
          padding: 10px 0 0;
          margin: 0; }
        header .btn-noti .noti-detail .noti-list ul li.active > a div h2 {
          position: relative; }
        header .btn-noti .noti-detail .noti-list ul li.active > a div h2:before {
          content: '';
          width: 8px;
          height: 8px;
          display: inline-block;
          background: #0076FF;
          position: absolute;
          left: 0;
          top: 3px;
          border-radius: 100%; }
  header .btn-noti.noticontent > a {
    position: relative;
    display: inline-block;
    background: url("/static/images/icon/bell-notification.svg") 0 0 no-repeat; }
  header .btn-noti.active .noti-detail {
    display: block; }
  header .btn-noti.active > a {
    position: relative;
    display: inline-block;
    width: 19px;
    height: 22px;
    /*background: url('/static/images/icon/icon-noti-hover.svg') 0 0 no-repeat; background-size: 100%;*/ }
    header .btn-noti.active > a img {
      display: none; }
  header .ch-app-dl {
    float: right;
    position: relative;
    padding: 12px 0;
    /*>a:after { content:''; width: 10px; height: 14px; background: url('/static/images/icon/icon-arrow-down.svg') 0 0 no-repeat; background-size: 100%; display: inline-block; position: absolute; right: -4.6px; top: 0;-webkit-transition: top 0.4s ease; transition: top 0.4s ease;}*/ }
    @media only screen and (min-width: 1024px) and (max-width: 1370px) {
      header .ch-app-dl {
        margin-right: 0px; } }
    header .ch-app-dl > a {
      position: relative;
      display: flex !important;
      align-items: center; }
      header .ch-app-dl > a span {
        font-family: "db_heaventmed", san-serif;
        font-size: 20px !important;
        color: #ffffff; }
      header .ch-app-dl > a span:last-child {
        display: none; }
      header .ch-app-dl > a .icon-mobile {
        font-size: 14px !important; }
    header .ch-app-dl .dropdown {
      visibility: hidden;
      opacity: 0;
      position: absolute;
      transition: all 0.4s ease;
      left: -30px;
      top: 50px;
      width: 190px;
      background: #fff;
      border-radius: 0;
      padding: 20px 25px;
      box-sizing: border-box;
      text-align: center; }
      header .ch-app-dl .dropdown img {
        width: 90%;
        height: auto;
        display: block;
        margin: 10px auto; }
      header .ch-app-dl .dropdown p {
        color: #0076ff;
        font-family: "db_heaventmed", san-serif;
        font-weight: normal;
        font-size: 22px;
        font-weight: normal;
        line-height: 1; }
        header .ch-app-dl .dropdown p span {
          display: block; }
      header .ch-app-dl .dropdown a {
        color: #3B3B3B;
        font-family: "db_heaventregular", san-serif;
        font-weight: normal;
        font-size: 16px;
        font-weight: normal;
        text-decoration: none; }
      header .ch-app-dl .dropdown a:hover {
        text-decoration: underline; }
    header .ch-app-dl .dropdown:hover {
      visibility: visible;
      opacity: 1; }
  header .ch-app-dl:hover {
    /*>a:after { content:''; width: 10px; height: 14px; background: url('/static/images/icon/icon-arrow-down-active.svg') 0 0 no-repeat; background-size: 100%; display: inline-block; position: absolute; right: -4.6px; top: 7px;-webkit-transition: top 0.4s ease; transition: top 0.4s ease;}*/ }
    header .ch-app-dl:hover .dropdown {
      visibility: visible;
      opacity: 1;
      display: block; }

.wrapall.active {
  opacity: 0; }

body header .logo {
  top: 10px;
  -webkit-transition: top 0.4s ease;
  transition: top 0.4s ease; }
  body header .logo a img {
    height: 44px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease; }

body .nav-group .menu-setting a span,
body .nav-group .menu-setting-2 a span {
  display: inline-block;
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1); }
  body .nav-group .menu-setting a span.menu-1,
  body .nav-group .menu-setting-2 a span.menu-1 {
    font-size: 24px;
    opacity: 1;
    -webkit-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease; }
  body .nav-group .menu-setting a span.menu-2,
  body .nav-group .menu-setting-2 a span.menu-2 {
    font-size: 20px;
    display: none;
    opacity: 0;
    -webkit-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease; }

body .nav-detail {
  margin-top: 150px;
  display: inline-block;
  display: none;
  width: 100%;
  height: 70vh; }
  body .nav-detail > ul {
    width: 60%;
    float: left;
    padding: 30px 0 0; }
    body .nav-detail > ul > li {
      width: 25%;
      float: left; }
      body .nav-detail > ul > li h3 {
        font-family: "db_heaventmed", san-serif;
        color: #fff;
        font-weight: normal;
        font-size: 22px;
        line-height: 1;
        margin: 0 0 15px; }
        body .nav-detail > ul > li h3 a {
          color: #fff;
          cursor: default; }
          body .nav-detail > ul > li h3 a img {
            display: none; }
      body .nav-detail > ul > li h3.tvlive a:after {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 8px;
        background: #FD0012;
        display: inline-block;
        margin: 7px 0 0 5px;
        vertical-align: top; }
      body .nav-detail > ul > li h3.tvlive a {
        cursor: pointer; }
      body .nav-detail > ul > li ul li {
        padding: 0 0 10px 10px; }
        body .nav-detail > ul > li ul li a {
          font-family: "db_heaventregular", san-serif;
          font-weight: normal;
          font-size: 20px;
          line-height: 1;
          color: #9B9B9B; }
        body .nav-detail > ul > li ul li a:hover {
          text-decoration: underline;
          color: #0076FF; }
      body .nav-detail > ul > li ul li:last-child {
        padding: 0 0 0 10px; }
  body .nav-detail .user-set {
    width: 40%;
    float: right;
    height: 100%;
    position: relative; }
    body .nav-detail .user-set .user-profile {
      /*width: 315px;*/
      width: auto;
      float: right; }
      body .nav-detail .user-set .user-profile > img {
        width: 98px;
        height: 98px;
        float: left;
        margin: 0 30px 0 0;
        border-radius: 10px;
        border-radius: 100%;
        border: 1px solid #fff; }
      body .nav-detail .user-set .user-profile > div {
        float: left;
        position: relative;
        /*width: 185px;*/
        width: auto; }
        body .nav-detail .user-set .user-profile > div p {
          font-family: "db_heaventmed", san-serif;
          font-size: 22px;
          cursor: pointer;
          color: #fff;
          /*width: 140px;*/
          line-height: 1;
          display: inline-block;
          position: relative;
          padding: 25px 0 0;
          width: auto; }
          body .nav-detail .user-set .user-profile > div p span {
            display: inline-block; }
            body .nav-detail .user-set .user-profile > div p span img {
              width: 18px;
              height: auto;
              float: left;
              margin-right: 5px;
              padding: 1px 0 0; }
          body .nav-detail .user-set .user-profile > div p span:first-child {
            margin: 0 0 3px;
            white-space: nowrap;
            max-width: 140px;
            overflow: hidden;
            text-overflow: ellipsis; }
          body .nav-detail .user-set .user-profile > div p span:last-child {
            font-size: 20px;
            font-family: "db_heaventlight", san-serif;
            font-weight: normal;
            display: block;
            clear: both; }
        body .nav-detail .user-set .user-profile > div > a {
          font-family: "db_heaventmed", san-serif;
          font-weight: normal;
          color: #9B9B9B;
          font-size: 14px;
          border: 1px solid #9B9B9B;
          padding: 3px 5px;
          border-radius: 5px;
          display: inline-block;
          /*position: absolute; right: 0; bottom: 0;*/
          margin: 0 0 0 5px;
          -webkit-transition: all 0.4s ease;
          transition: all 0.4s ease; }
        body .nav-detail .user-set .user-profile > div > a:hover {
          background: #2F31D9;
          color: #fff;
          border: 1px solid #2F31D9;
          -webkit-transition: all 0.4s ease;
          transition: all 0.4s ease; }
    body .nav-detail .user-set > ul {
      clear: both;
      text-align: right;
      padding: 20px 0 0; }
      body .nav-detail .user-set > ul li {
        margin: 0 0 20px; }
        body .nav-detail .user-set > ul li a {
          font-family: "db_heaventmed", san-serif;
          font-weight: normal;
          color: #9B9B9B;
          font-size: 48px;
          line-height: 1; }
        body .nav-detail .user-set > ul li .underline {
          position: relative; }
        body .nav-detail .user-set > ul li a:hover {
          color: #3526D9; }
        body .nav-detail .user-set > ul li .underline:before {
          content: '';
          display: block;
          position: absolute;
          right: 0;
          bottom: 0;
          height: 5px;
          width: 0;
          transition: width 0s ease, background .5s ease; }
        body .nav-detail .user-set > ul li .underline:after {
          content: '';
          display: block;
          position: absolute;
          right: 0;
          bottom: 0;
          height: 5px;
          width: 0;
          background: #3526D9;
          transition: width .5s ease; }
        body .nav-detail .user-set > ul li .underline:hover:before {
          width: 100%;
          background: #3526D9;
          transition: width .5s ease; }
        body .nav-detail .user-set > ul li .underline:hover:after {
          width: 100%;
          background: transparent;
          transition: all 0s ease; }
      body .nav-detail .user-set > ul li:last-child {
        margin: 0; }
    body .nav-detail .user-set .logout {
      position: absolute;
      right: 0;
      bottom: 0;
      padding: 0 0 5px;
      display: none; }
      body .nav-detail .user-set .logout a {
        color: #3F3F3F;
        font-family: "db_heaventmed", san-serif;
        font-weight: normal;
        font-size: 36px;
        line-height: 1; }
      body .nav-detail .user-set .logout a:hover {
        color: #ff0000; }
      body .nav-detail .user-set .logout .underline {
        position: relative; }
      body .nav-detail .user-set .logout .underline:before {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        height: 5px;
        width: 0;
        transition: width 0s ease, background .5s ease; }
      body .nav-detail .user-set .logout .underline:after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        height: 5px;
        width: 0;
        background: #ff0000;
        transition: width .5s ease; }
      body .nav-detail .user-set .logout .underline:hover:before {
        width: 100%;
        background: #ff0000;
        transition: width .5s ease; }
      body .nav-detail .user-set .logout .underline:hover:after {
        width: 100%;
        background: transparent;
        transition: all 0s ease; }

body .nav-detail:after {
  content: '';
  width: 1px;
  height: 90%;
  background: #525252;
  display: block;
  position: absolute;
  left: 60%;
  top: 5%; }

body.menu-active-set {
  overflow: hidden; }
  body.menu-active-set header {
    width: 100%;
    height: 100%;
    -webkit-transition: unset;
    transition: unset; }
    body.menu-active-set header > div:after {
      opacity: 0; }
    body.menu-active-set header .logo {
      top: 42px;
      -webkit-transition: top 0.4s ease;
      transition: top 0.4s ease; }
      body.menu-active-set header .logo a img {
        height: 80px;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease; }
    body.menu-active-set header .nav-detail .user-set .logout {
      position: absolute;
      right: 0;
      bottom: 0;
      color: #3F3F3F;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal;
      font-size: 48px;
      line-height: 1;
      display: block;
      display: inline-block; }
  body.menu-active-set nav {
    display: none; }
  body.menu-active-set .nav-group .menu-setting a span.menu-1,
  body.menu-active-set .nav-group .menu-setting-2 a span.menu-1 {
    display: none;
    opacity: 0;
    -webkit-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease; }
  body.menu-active-set .nav-group .menu-setting a span.menu-2,
  body.menu-active-set .nav-group .menu-setting-2 a span.menu-2 {
    display: inline-block;
    opacity: 1;
    -webkit-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease; }
  body.menu-active-set .nav-group .register {
    display: none; }
  body.menu-active-set .nav-group .nav-line {
    display: none; }
  body.menu-active-set .nav-group .hd-search {
    display: none; }
  body.menu-active-set .nav-group .btn-noti {
    display: none; }
  body.menu-active-set .nav-group .ic-profile {
    display: none; }
  body.menu-active-set .nav-group .ch-app-dl {
    display: none; }
  body.menu-active-set .nav-detail {
    display: inline-block; }

header:before {
  content: "";
  width: 100%;
  height: 64px;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
  background: #00040D;
  /*background: -moz-linear-gradient(top, #191919 0%, transparent 100%); background: -webkit-linear-gradient(top, #191919 0%, transparent 100%); background: linear-gradient(to bottom, #191919 0%, transparent 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );*/
  z-index: 0;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease; }

body.w-detect .check-browser {
  width: 100%;
  height: 60px;
  text-align: center;
  background: #0076ff;
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 0 40px;
  box-sizing: border-box;
  max-width: inherit; }
  body.w-detect .check-browser p {
    color: #ffffff;
    font-family: "db_heaventmed", san-serif;
    font-size: 24px;
    line-height: 29px;
    padding: 16px 0 15px;
    position: relative;
    margin: 0 auto;
    max-width: 1280px; }
    body.w-detect .check-browser p img {
      vertical-align: top;
      margin: 0 12px 0 0; }
    body.w-detect .check-browser p a.close {
      position: absolute;
      right: 0;
      top: 20px; }

body.w-detect .check-browser:after {
  display: none; }

body.w-detect header {
  top: 60px; }

body.w-detect .wrapall {
  margin-top: 60px; }

body.maintenance-bar-detect .alert-MA {
  width: 100%;
  height: 60px;
  text-align: center;
  background: #0076ff;
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 0 40px;
  box-sizing: border-box;
  max-width: inherit; }
  body.maintenance-bar-detect .alert-MA p {
    color: #ffffff;
    font-family: "db_heaventmed", san-serif;
    font-size: 24px;
    line-height: 29px;
    padding: 16px 0 15px;
    position: relative;
    margin: 0 auto;
    max-width: 1280px; }
    body.maintenance-bar-detect .alert-MA p img {
      vertical-align: top;
      margin: 0 12px 0 0; }
    body.maintenance-bar-detect .alert-MA p a.close {
      position: absolute;
      right: 0;
      top: 20px; }

body.maintenance-bar-detect .alert-MA:after {
  display: none; }

body.maintenance-bar-detect header {
  top: 60px; }

body.maintenance-bar-detect .wrapall {
  margin-top: 60px; }

body.maintenance-bar-detect.video-content-now .wrapall {
  margin-top: 120px; }

body.maintenance-bar-detect.schedule .wrapall {
  margin-top: 160px; }

@media screen and (min-width: 1200px) {
  .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content {
    /*a { margin-right: 2.5% !important;}*/ }
    .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
    .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
    .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
    .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
    .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
    .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child {
      margin: 0 !important; } }

@media screen and (min-width: 1200px) {
  body.sub-cat header:before {
    height: 64px; }
  body.sub-cat header::after {
    content: '';
    width: 100%;
    height: 48px;
    display: inline-block;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background-color: #666; }
  body.sub-cat.series-cat header::after {
    background-color: #B91A20; }
  body.sub-cat.tvshow-cat header::after {
    background-color: #02D97F; }
  body.sub-cat.tvshow-cat header .dropdown-content > a,
  body.sub-cat.tvshow-cat header .dropdown-content > p {
    color: #00040D !important; }
  body.sub-cat.tvshow-cat header .dropdown-content p:after {
    background-color: #00040D !important; }
  body.sub-cat.news-cat header::after {
    background-color: #1A46D3; } }

@media screen and (min-width: 1200px) and (max-width: 1299px) {
  body.sub-cat.news-cat .navigation .item-dropdown .dropdown .dropdown-content a {
    margin-right: 20px; } }

@media screen and (min-width: 1200px) and (max-width: 1099px) {
  body.sub-cat.news-cat .navigation .item-dropdown .dropdown .dropdown-content a {
    margin-right: 12px; } }

@media screen and (min-width: 1200px) {
  body.sub-cat.fandom-cat header::after {
    background-color: #533FCD; }
  body.sub-cat.music-cat header::after {
    background-color: #FFD007; }
  body.sub-cat.music-cat header .dropdown-content > a,
  body.sub-cat.music-cat header .dropdown-content > p {
    color: #00040D !important; }
  body.sub-cat.music-cat header .dropdown-content p:after {
    background-color: #00040D !important; }
  body.sub-cat.special-cat header::after {
    background-color: #533FCD; }
  body.sub-cat.special-cat header .dropdown-content > a,
  body.sub-cat.special-cat header .dropdown-content > p {
    color: #F2F6FD !important; }
  body.sub-cat.special-cat header .dropdown-content p:after {
    background-color: #F2F6FD !important; } }

@media screen and (min-width: 1200px) {
  .category.sub-cat .navigation .item-dropdown .dropdown,
  .news-hp.sub-cat .navigation .item-dropdown .dropdown,
  .news-category.sub-cat .navigation .item-dropdown .dropdown,
  .lakorn.sub-cat .navigation .item-dropdown .dropdown,
  .news-video.sub-cat .navigation .item-dropdown .dropdown,
  .music-hp.sub-cat .navigation .item-dropdown .dropdown,
  .fandom-hp.sub-cat .navigation .item-dropdown .dropdown {
    display: inline-block; }
    .category.sub-cat .navigation .item-dropdown .dropdown .dropbtn,
    .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropbtn,
    .news-category.sub-cat .navigation .item-dropdown .dropdown .dropbtn,
    .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropbtn,
    .news-video.sub-cat .navigation .item-dropdown .dropdown .dropbtn,
    .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropbtn,
    .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropbtn {
      display: none; }
    .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
    .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
    .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
    .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
    .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
    .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
    .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content {
      position: absolute;
      top: 64px;
      width: 100%;
      max-width: 1280px;
      left: 0;
      margin: 0 auto;
      /*border-bottom: 1px solid #ffffff40;*/
      padding: 0;
      -webkit-transition: top 0.4s ease;
      transition: top 0.4s ease;
      min-width: 111.2%;
      height: 48px;
      display: flex;
      align-items: center; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p {
        font-family: "db_heaventmed", san-serif;
        font-size: 20px;
        line-height: 120%;
        letter-spacing: 0.25px;
        padding-right: 24px;
        margin-right: 24px;
        color: #F2F6FD;
        position: relative; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content > p:after {
        content: '';
        width: 1px;
        height: 28px;
        background-color: #F2F6FD;
        opacity: 30%;
        display: inline-block;
        position: absolute;
        top: -2px;
        right: 0; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a {
        float: left;
        margin-right: 32px;
        font-size: 18px;
        line-height: 24px;
        font-family: "db_heaventregular", san-serif;
        letter-spacing: 0.25px;
        -webkit-transition: opacity 0.4s ease;
        transition: opacity 0.4s ease;
        color: #F2F6FD;
        opacity: 70%; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.active {
        -webkit-transition: opacity 0.4s ease;
        transition: opacity 0.4s ease;
        opacity: 100%;
        font-family: "db_heaventmed", san-serif; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:hover {
        -webkit-transition: opacity 0.4s ease;
        transition: opacity 0.4s ease;
        opacity: 100%; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a:last-child {
        margin-right: 0; }
      .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide,
      .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide,
      .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide,
      .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide,
      .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide,
      .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide,
      .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content a.drophide {
        display: none; }
  .category.sub-cat .sp-banner,
  .news-hp.sub-cat .sp-banner,
  .news-category.sub-cat .sp-banner,
  .lakorn.sub-cat .sp-banner,
  .news-video.sub-cat .sp-banner,
  .music-hp.sub-cat .sp-banner,
  .fandom-hp.sub-cat .sp-banner {
    padding-top: 145px; }
  .category.sub-cat.series-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .category.sub-cat.series-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .category.sub-cat.series-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .category.sub-cat.series-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .category.sub-cat.series-cat .item-dropdown.item-special .dropdown .dropdown-content {
    display: none; }
  .category.sub-cat.tvshow-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .category.sub-cat.tvshow-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .category.sub-cat.tvshow-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .category.sub-cat.tvshow-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .category.sub-cat.tvshow-cat .item-dropdown.item-special .dropdown .dropdown-content {
    display: none; }
  .music-hp.sub-cat.music-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .music-hp.sub-cat.music-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .music-hp.sub-cat.music-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .music-hp.sub-cat.music-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .music-hp.sub-cat.music-cat .item-dropdown.item-special .dropdown .dropdown-content,
  .category.sub-cat.music-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .category.sub-cat.music-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .category.sub-cat.music-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .category.sub-cat.music-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .category.sub-cat.music-cat .item-dropdown.item-special .dropdown .dropdown-content {
    display: none; }
  .news-hp.sub-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .news-hp.sub-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .news-hp.sub-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .news-hp.sub-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .news-hp.sub-cat .item-dropdown.item-special .dropdown .dropdown-content,
  .news-category.sub-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .news-category.sub-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .news-category.sub-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .news-category.sub-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .news-category.sub-cat .item-dropdown.item-special .dropdown .dropdown-content,
  .lakorn.sub-cat.news-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .lakorn.sub-cat.news-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .lakorn.sub-cat.news-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .lakorn.sub-cat.news-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .lakorn.sub-cat.news-cat .item-dropdown.item-special .dropdown .dropdown-content,
  .news-video.sub-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .news-video.sub-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .news-video.sub-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .news-video.sub-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .news-video.sub-cat .item-dropdown.item-special .dropdown .dropdown-content,
  .category.sub-cat.news-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .category.sub-cat.news-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .category.sub-cat.news-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .category.sub-cat.news-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .category.sub-cat.news-cat .item-dropdown.item-special .dropdown .dropdown-content {
    display: none; }
  .fandom-hp.sub-cat.fandom-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .fandom-hp.sub-cat.fandom-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .fandom-hp.sub-cat.fandom-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .fandom-hp.sub-cat.fandom-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .fandom-hp.sub-cat.special-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .fandom-hp.sub-cat.special-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .fandom-hp.sub-cat.special-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .fandom-hp.sub-cat.special-cat .item-dropdown.item-music .dropdown .dropdown-content,
  .category.sub-cat.fandom-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .category.sub-cat.fandom-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .category.sub-cat.fandom-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .category.sub-cat.fandom-cat .item-dropdown.item-music .dropdown .dropdown-content {
    display: none; }
  .category.sub-cat.special-cat .item-dropdown.item-series .dropdown .dropdown-content,
  .category.sub-cat.special-cat .item-dropdown.item-tvshow .dropdown .dropdown-content,
  .category.sub-cat.special-cat .item-dropdown.item-news .dropdown .dropdown-content,
  .category.sub-cat.special-cat .item-dropdown.item-fandom .dropdown .dropdown-content,
  .category.sub-cat.special-cat .item-dropdown.item-music .dropdown .dropdown-content {
    display: none; } }

@media screen and (max-width: 1199px) {
  .category.sub-cat header:before,
  .news-hp.sub-cat header:before,
  .news-category.sub-cat header:before,
  .lakorn.sub-cat header:before,
  .news-video.sub-cat header:before,
  .music-hp.sub-cat header:before {
    height: 50px; }
  .category.sub-cat .sp-banner,
  .news-hp.sub-cat .sp-banner,
  .news-category.sub-cat .sp-banner,
  .lakorn.sub-cat .sp-banner,
  .news-video.sub-cat .sp-banner,
  .music-hp.sub-cat .sp-banner {
    padding-top: 50px; } }

@media screen and (max-width: 1199px) {
  .dropdown .dropbtn {
    color: #fff;
    text-decoration: none;
    display: inline-block;
    position: relative;
    font-size: 22px;
    font-family: db_heaventmed, san-serif;
    letter-spacing: 0.5px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    line-height: 26px;
    min-width: 200px;
    padding: 15px 0 5px;
    margin: 0;
    width: 100%; }
    .dropdown .dropbtn img {
      float: right;
      margin-top: 8px;
      transition: all 0.25s ease-in; }
  .dropdown .dropdown-content {
    width: 80%;
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden; }
    .dropdown .dropdown-content a {
      margin: 0;
      padding: 10px 12px 10px 0;
      border-bottom: 0.6px solid rgba(216, 216, 216, 0.4);
      width: 100%;
      clear: both;
      display: block;
      font-size: 18px; }
    .dropdown .dropdown-content a:first-child {
      padding: 0 12px 10px 0; }
    .dropdown .dropdown-content a:last-child {
      border-bottom: 0; }
  .dropdown.active .dropbtn img {
    transform: rotate(-180deg);
    transition: all 0.25s ease-in; }
  .dropdown.active .dropdown-content {
    max-height: 800px;
    transition: max-height 0.25s ease-in; } }

/*large screen*/
@media only screen and (min-width: 1200px) {
  header nav ul {
    margin-left: 70px; }
  .category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .news-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .news-category.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .lakorn.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .news-video.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .music-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content,
  .fandom-hp.sub-cat .navigation .item-dropdown .dropdown .dropdown-content {
    min-width: unset; } }

/*small & large together screen*/
@media only screen and (min-width: 1200px) {
  header .btn-noti.active .noti-detail {
    height: auto !important; }
    header .btn-noti.active .noti-detail .noti-list {
      height: 350px !important; } }

/*medium screen ex.ipad navigation when exceed*/
/*for iPad pro*/
@media only screen and (max-width: 1199px) {
  body .wrapall > div {
    padding-top: 50px; } }

/*mobile screen (max: 1023) and iPad pro (size: 1024)*/
@media only screen and (max-width: 1199px) {
  body header {
    height: 50px;
    width: 100%;
    padding: 0; }
    body header > div {
      width: 100%;
      margin: 0 auto;
      display: inline-block; }
      body header > div .logo {
        left: calc(50% - 26px);
        top: 7px;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease; }
        body header > div .logo a img {
          height: 36px;
          width: auto;
          -webkit-transition: all 0.4s ease;
          transition: all 0.4s ease; }
    body header > div:after {
      width: 94%;
      margin: 0 3%; }
    body header nav {
      position: relative;
      width: 100%;
      display: none; }
      body header nav .main-nav {
        width: 20px;
        height: 20px;
        display: block;
        float: left;
        margin-left: 1%;
        background: url(/static/images/ico-nav.svg) no-repeat -141px -310px;
        margin: 20px 0 0 3%; }
        body header nav .main-nav span {
          display: block;
          text-indent: -9999px; }
      body header nav ul {
        width: 30%;
        max-width: 320px;
        min-width: 270px;
        height: 97vh;
        border-radius: 0;
        background: #191919;
        position: absolute;
        left: -300vw;
        top: 0;
        padding-top: 30px;
        z-index: 6;
        overflow: auto;
        transition: left 0.2s; }
        body header nav ul li {
          width: 225px;
          margin: 0 auto;
          text-align: left;
          margin: 0 0 0 20px;
          border-bottom: 0.6px solid rgba(216, 216, 216, 0.4); }
          body header nav ul li a:hover {
            border: none; }
        body header nav ul a {
          line-height: 26px;
          min-width: 200px;
          padding: 15px 0 10px;
          margin: 0; }
          body header nav ul a span:before {
            float: left;
            margin-right: 20px;
            height: 25px;
            background-size: 420px; }
        body header nav ul li:nth-of-type(2) a span:before {
          background-position: 2px -77px; }
        body header nav ul li:nth-of-type(3) a span:before {
          background-position: -1px -165px;
          width: 50px;
          margin-right: -4px; }
        body header nav ul li:nth-of-type(4) a span:before {
          background-position: 1px -248px;
          width: 26px; }
        body header nav ul li:nth-of-type(5) a span:before {
          background-position: -109px -1px; }
        body header nav ul li:nth-of-type(6) a span:before {
          background-position: -107px -473px;
          width: 26px; }
        body header nav ul li:nth-of-type(7) a span:before {
          background-position: 2px -543px;
          width: 26px; }
        body header nav ul li:nth-of-type(8) a span:before {
          background-position: -109px -77px; }
        body header nav ul li:nth-of-type(9) a span:before {
          background-position: -109px -165px;
          width: 25px; }
        body header nav ul li.mobile {
          display: block;
          border-top: 1px solid #fff;
          opacity: 0.5;
          margin: 40px auto;
          padding: 40px 0; }
          body header nav ul li.mobile a {
            margin: 0;
            padding: 0; }
        body header nav ul li.active a {
          border-bottom: none; }
        body header nav ul li.item-dropdown > a {
          display: none; }
        body header nav ul li.item-dropdown .dropdown {
          display: inline-block; }
        body header nav ul li:last-child {
          margin-bottom: 150px; }
    body header .member {
      right: 35px; }
      body header .member a {
        background: url(/static/images/ico-nav.svg) no-repeat -499px 0 !important; }
    body header .member.invalid a {
      background-position: -395px 0 !important; }
    body header .member.valid a {
      background: none; }
      body header .member.valid a img {
        width: 26px;
        margin-top: 0; }
    body header .nav-group {
      /*top: 9px; right: 3%;*/
      margin: 9px 3% 0 3%;
      position: unset; }
      body header .nav-group .menu-setting,
      body header .nav-group .menu-setting-2 {
        display: block;
        padding: 5px 0;
        margin-left: 10px; }
      body header .nav-group .register {
        padding: 5px 0;
        margin: 0 10px;
        display: none; }
      body header .nav-group .hd-search {
        float: left;
        padding: 5px 0;
        margin: 0;
        transition: float 0.4s ease; }
        body header .nav-group .hd-search > a {
          display: inline-block; }
      body header .nav-group .btn-noti {
        padding: 5px 0 !important;
        margin-left: 10px !important; }
      body header .nav-group .btn-noti.active {
        position: unset; }
        body header .nav-group .btn-noti.active .noti-detail {
          width: 100%;
          top: 50px;
          left: 0;
          right: 0;
          height: 83vh; }
      body header .nav-group .nav-line {
        margin: 0 5px;
        height: 34px;
        background: #ffffff80; }
      body header .nav-group .nav-line {
        display: none; }
      body header .nav-group .ic-profile {
        width: auto; }
        body header .nav-group .ic-profile > a img {
          width: 31px; }
        body header .nav-group .ic-profile .profile-dropdown {
          display: none; }
      body header .nav-group .ic-profile {
        display: none; }
      body header .nav-group .ch-app-dl {
        display: none; }
    body header .nav-detail:after {
      display: none; }
    body header .nav-detail .user-set {
      width: 100%;
      float: none;
      height: auto;
      padding: 0 0 25px; }
      body header .nav-detail .user-set .user-profile {
        width: 300px;
        margin: 0 auto;
        float: none;
        display: block;
        overflow: hidden;
        padding: 20px 0;
        text-align: center; }
        body header .nav-detail .user-set .user-profile > img {
          width: 58px;
          height: 58px;
          margin: 0 10px 0 0;
          float: none;
          display: inline-block;
          vertical-align: text-bottom; }
        body header .nav-detail .user-set .user-profile > div {
          width: 230px;
          float: none;
          display: inline; }
          body header .nav-detail .user-set .user-profile > div p {
            font-size: 24px;
            padding: 0; }
          body header .nav-detail .user-set .user-profile > div > a {
            bottom: 15px;
            background: #2F31D9;
            color: #fff;
            border: 1px solid #2F31D9; }
      body header .nav-detail .user-set > ul {
        width: 100%;
        text-align: center; }
        body header .nav-detail .user-set > ul li a {
          font-size: 36px;
          line-height: 1;
          color: #9B9B9B; }
        body header .nav-detail .user-set > ul li:last-child {
          margin: 0 0 15px; }
    body header .nav-detail > ul {
      width: 90%;
      float: none;
      border-top: 1px solid #9B9B9B;
      padding: 25px 0 0;
      margin: 0 auto;
      overflow: hidden; }
      body header .nav-detail > ul > li {
        width: 100%;
        clear: both; }
        body header .nav-detail > ul > li h3 {
          text-align: center;
          font-size: 24px; }
          body header .nav-detail > ul > li h3 a {
            cursor: pointer; }
            body header .nav-detail > ul > li h3 a img {
              display: inline-block;
              transition: all 0.25s ease-in; }
        body header .nav-detail > ul > li ul {
          margin: 0 auto;
          max-height: 0;
          transition: max-height 0.15s ease-out;
          overflow: hidden; }
          body header .nav-detail > ul > li ul li {
            text-align: left;
            margin: 0 0 15px -30px;
            padding: 0 0 0 50%; }
          body header .nav-detail > ul > li ul li:last-child {
            margin: 0 0 15px -30px;
            padding: 0 0 0 50%; }
      body header .nav-detail > ul > li.active h3 a img {
        transform: rotate(-180deg);
        transition: all 0.25s ease-in; }
      body header .nav-detail > ul > li.active ul {
        max-height: 1000px;
        transition: max-height 0.25s ease-in;
        margin-top: 0; }
  body header:before {
    height: 50px; }
  body.menu-active-set header > div {
    max-height: 1000px;
    overflow-y: scroll;
    height: 100%; }
    body.menu-active-set header > div .logo {
      top: 42px;
      left: 50%;
      margin: 0 0 0 -58px;
      -webkit-transition: all 0.4s ease;
      transition: all 0.4s ease; }
      body.menu-active-set header > div .logo a img {
        width: 116px;
        height: auto;
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease; }
  body.menu-active-set header .nav-detail .user-set .logout {
    position: static;
    width: 100%;
    text-align: center;
    padding: 20px 0 0;
    padding: 5px 0 0;
    font-size: unset; }
    body.menu-active-set header .nav-detail .user-set .logout a {
      font-size: 28px;
      line-height: 1;
      color: #3F3F3F; }
  /*menu active mobile*/
  body.menu-active {
    overflow: hidden; }
    body.menu-active .main-nav {
      position: relative;
      z-index: 7;
      width: 250px;
      padding: 15px 0 10px;
      transition: all 0.2s;
      background-image: none;
      background-color: #191919;
      margin: 0; }
      body.menu-active .main-nav span {
        background: url(/static/images/ico-nav.svg) no-repeat -331px -296px;
        width: 14px;
        height: 14px;
        float: right; }
    body.menu-active ul {
      left: 0;
      transition: left 0.2s; }
    body.menu-active nav:after {
      content: '';
      display: block;
      width: 100%;
      height: 100vh;
      background: #000;
      z-index: 2;
      opacity: 0.8; }
    body.menu-active header .logo {
      z-index: 2; }
    body.menu-active #button.show {
      opacity: 0; }
  /*footer mobile*/
  footer {
    width: 100%;
    text-align: center;
    border-radius: 5px 5px 0 0;
    margin: 50px 0 0;
    padding: 40px 1% 10px;
    box-size: border-box; }
    footer p {
      padding: 0 3% 3px;
      line-height: 25px; }
    footer .footer-secondary p,
    footer .footer-secondary ul {
      width: 100%;
      text-align: left;
      padding: 0 0 10px; }
    footer .footer-secondary ul li {
      display: block;
      padding: 10px 0; }
    footer .footer-secondary:before {
      width: 88%;
      left: 2%; }
  body.noti-active {
    overflow: hidden; }
    body.noti-active header:before {
      opacity: 1;
      background: rgba(25, 25, 25, 0.9);
      -webkit-transition: unset;
      transition: unset; }
    body.noti-active .btn-noti .noti-detail .noti-list {
      height: 100%; }
      body.noti-active .btn-noti .noti-detail .noti-list ul li > a div {
        width: 63%; }
        body.noti-active .btn-noti .noti-detail .noti-list ul li > a div h2 span:first-child {
          max-width: 85%; }
        body.noti-active .btn-noti .noti-detail .noti-list ul li > a div h2.title span:first-child {
          max-width: 100%;
          margin-right: 0; }
  body.w-detect .check-browser {
    padding: 0 2%; }
  body.maintenance-bar-detect .alert-MA {
    padding: 0 2%; }
  body.maintenance-bar-detect.video-content-now .wrapall {
    margin-top: 105px; }
  body.maintenance-bar-detect.video-content-now header:before {
    top: 60px; }
  body.maintenance-bar-detect.schedule .wrapall {
    margin-top: 145px; }
  body.maintenance-bar-detect.schedule header:before {
    top: 60px; } }

/*mobile screen */
@media only screen and (max-width: 767px) {
  body header nav ul {
    height: 96.5vh; }
  body header .nav-group .ic-profile {
    display: none; }
  body .ui.modals.dimmer.transition.visible.active {
    padding-left: 0;
    padding-right: 0; }
  body.w-detect .check-browser {
    text-align: left;
    height: 72px;
    top: -72px; }
    body.w-detect .check-browser p {
      font-size: 16px;
      line-height: 19px;
      display: inline-block;
      padding: 19px 0 15px; }
      body.w-detect .check-browser p > img {
        float: left;
        margin: 5px 10px 0 2px; }
      body.w-detect .check-browser p span {
        float: left;
        width: 75%; }
      body.w-detect .check-browser p a img {
        margin: 6px 12px 0 0; }
  body.w-detect header {
    top: 72px; }
  body.w-detect .wrapall {
    margin-top: 72px; } }

/*mobile screen */
@media only screen and (max-width: 1023px) and (min-width: 576px) {
  body.maintenance-bar-detect .alert-MA p {
    font-size: 20px; } }

@media only screen and (max-width: 576px) {
  body.noti-active .btn-noti .noti-detail .noti-list ul li > a div {
    width: 70%; }
    body.noti-active .btn-noti .noti-detail .noti-list ul li > a div h2 span:first-child {
      max-width: 82%;
      margin-right: 3px; } }

/*mobile screen */
@media only screen and (max-width: 360px) {
  body.noti-active .btn-noti .noti-detail .noti-list ul li > a div {
    width: 65%; }
    body.noti-active .btn-noti .noti-detail .noti-list ul li > a div h2 span:first-child {
      max-width: 76%;
      margin-right: 3px; } }

@media only screen and (max-width: 320px) {
  body.maintenance-bar-detect .alert-MA p {
    padding: 10px 0 5px; }
    body.maintenance-bar-detect .alert-MA p > img {
      margin: 15px 10px 0 2px; } }

@-webkit-keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.5); }
  20% {
    -webkit-transform: scaleY(1); } }

@keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5); }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1); } }

body.animating.in.dimmable, body.dimmed.dimmable {
  overflow: hidden !important; }

.blocker {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 13 !important;
  padding: 20px;
  box-sizing: border-box;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center; }

.blocker:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.05em; }

.blocker.behind {
  background-color: transparent; }

.modal {
  display: none;
  vertical-align: middle;
  position: relative;
  z-index: 2;
  max-width: 500px;
  box-sizing: border-box;
  width: 90%;
  background: #121212;
  padding: 50px 30px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 10px #000;
  -moz-box-shadow: 0 0 10px #000;
  -o-box-shadow: 0 0 10px #000;
  -ms-box-shadow: 0 0 10px #000;
  box-shadow: 0 0 10px #000;
  text-align: left;
  color: #fff; }
  .modal .logo {
    display: block;
    margin: 0 auto 25px; }
  .modal h3 {
    text-align: center;
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    font-weight: normal;
    font-size: 36px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin: 0 0 10px; }
  .modal > p {
    text-align: center;
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    font-size: 26px;
    line-height: 1.2;
    color: #9B9B9B;
    margin: 0 0 10px; }
  .modal > p.text-w {
    color: #ffffff;
    margin: 0; }
    .modal > p.text-w a {
      color: #0076FF;
      text-decoration: underline; }
    .modal > p.text-w a:hover {
      text-decoration: none; }
  .modal > p.text-s {
    font-size: 20px;
    line-height: 28px;
    margin: 0; }
  .modal > p.highlight {
    color: #0076FF; }
  .modal > a.btn {
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    max-width: 214px;
    padding: 20.5px 0;
    clear: both;
    display: block;
    margin: 15px auto 0;
    text-align: center;
    background: #0F62FE;
    font-size: 24px;
    border-radius: 5px; }
  .modal h4 {
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    font-size: 48px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 10px; }
    .modal h4 a {
      color: #0076FF;
      text-decoration: underline; }
    .modal h4 a:hover {
      text-decoration: none; }
  .modal a.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    display: block;
    width: 19px;
    height: 19px;
    text-indent: -9999px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("/static/images/icon-close.svg"); }
  .modal a.btn-login {
    display: block;
    margin: 0 auto 10px;
    width: 348px;
    height: 55px;
    border-radius: 10px;
    cursor: pointer;
    text-align: left; }
    .modal a.btn-login img {
      margin: 7px 0;
      float: none; }
    .modal a.btn-login span {
      float: none;
      font-size: 29px;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal;
      margin: 16px 16px 0;
      width: auto;
      margin-right: 0;
      display: inline-block; }
  .modal a.log-Facebook {
    background-color: #3077E9; }
    .modal a.log-Facebook img {
      width: 20px;
      height: auto;
      display: inline-block;
      vertical-align: middle;
      padding-left: 60px;
      margin-top: -1px; }
    .modal a.log-Facebook span {
      margin: 18px 7px 0; }
  .modal a.log-Google {
    background-color: #ffffff;
    color: #707070; }
    .modal a.log-Google img {
      width: 18px;
      height: auto;
      display: inline-block;
      vertical-align: middle;
      padding-left: 60px;
      margin-top: 0; }
    .modal a.log-Google span {
      margin: 18px 7px 0; }
  .modal a.log-Line {
    background-color: #01B901; }
    .modal a.log-Line img {
      width: 24px;
      height: auto;
      display: inline-block;
      vertical-align: middle;
      padding-left: 58px;
      margin-top: 0; }
    .modal a.log-Line span {
      margin: 18px 2px 0; }
  .modal a.log-Apple {
    border-radius: 0;
    overflow: hidden; }
    .modal a.log-Apple img {
      margin: 0;
      width: 100%; }
  .modal .modal-toggle {
    margin: 20px auto 0;
    width: 346px; }
    .modal .modal-toggle .toggle-navigation {
      width: 100%;
      position: relative;
      clear: both;
      margin: 20px 0;
      overflow: hidden;
      border-top: 1px solid #ffffff;
      padding-top: 20px; }
      .modal .modal-toggle .toggle-navigation > li {
        width: 50%;
        display: inline-block;
        float: left;
        text-align: center;
        color: #9B9B9B;
        font-size: 24px;
        font-family: "db_heaventmed", san-serif;
        font-weight: normal;
        cursor: pointer; }
        .modal .modal-toggle .toggle-navigation > li a {
          color: #9B9B9B; }
      .modal .modal-toggle .toggle-navigation .tab1 {
        width: 45%; }
      .modal .modal-toggle .toggle-navigation .tab2 {
        width: 55%; }
    .modal .modal-toggle .toggle-navigation:before {
      content: "|";
      position: absolute;
      left: 44%;
      top: 20px;
      font-size: 30px; }
    .modal .modal-toggle .toggle-detail {
      clear: both;
      width: 100%; }
      .modal .modal-toggle .toggle-detail > li {
        display: none;
        width: 100%;
        overflow: hidden; }
      .modal .modal-toggle .toggle-detail > li.active {
        display: block; }
  .modal .headline {
    position: relative;
    font-size: 24px;
    margin: 0 0 20px; }
    .modal .headline span {
      background: #121212;
      padding: 0 15px; }
  .modal .headline:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #ffffff;
    position: absolute;
    top: 50%;
    z-index: -1; }
  .modal .text-captcha {
    margin: 20px auto 0;
    color: #9B9B9B;
    font-size: 16px;
    text-align: center;
    width: 70%; }
    .modal .text-captcha a {
      color: #9B9B9B;
      text-decoration: underline; }
    .modal .text-captcha a:hover {
      text-decoration: none; }
  .modal .modal-toggle.error h3.headline {
    margin: 0; }
  .modal .modal-toggle.error > span {
    color: #ff0000;
    width: 100%;
    display: inline-block;
    text-align: center; }
    .modal .modal-toggle.error > span a {
      text-decoration: underline;
      color: #ff0000; }
    .modal .modal-toggle.error > span a:hover {
      text-decoration: none; }
  .modal .checkbox.error label {
    color: #fff; }
  .modal .checkbox.error span {
    text-align: center;
    display: block; }
  .modal p.barOr {
    position: relative;
    width: 348px;
    font-family: "db_heaventmed", san-serif;
    margin: 28px auto;
    color: #fff; }
    .modal p.barOr span {
      background: #121212;
      position: relative;
      padding: 0 20px; }
  .modal p.barOr:before {
    content: '';
    height: 1px;
    width: 100%;
    background: #fff;
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 1px); }

.modal-standardBox {
  display: block;
  vertical-align: middle;
  position: relative;
  z-index: 2;
  max-width: 500px;
  box-sizing: border-box;
  width: 90%;
  background: #121212;
  padding: 50px 30px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 10px #000;
  -moz-box-shadow: 0 0 10px #000;
  -o-box-shadow: 0 0 10px #000;
  -ms-box-shadow: 0 0 10px #000;
  box-shadow: 0 0 10px #000;
  text-align: left;
  color: #fff;
  margin: 0 auto; }
  .modal-standardBox .logo {
    display: block;
    margin: 0 auto 25px; }
  .modal-standardBox h3 {
    text-align: center;
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    font-weight: normal;
    font-size: 36px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin: 0 0 10px; }
  .modal-standardBox > p {
    text-align: center;
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    font-size: 26px;
    line-height: 1.2;
    color: #9B9B9B;
    margin: 0 0 10px; }
  .modal-standardBox > p.text-w {
    color: #ffffff;
    margin: 0; }
    .modal-standardBox > p.text-w a {
      color: #0076FF;
      text-decoration: underline; }
    .modal-standardBox > p.text-w a:hover {
      text-decoration: none; }
  .modal-standardBox > p.text-s {
    font-size: 20px;
    line-height: 28px;
    margin: 0; }
  .modal-standardBox > p.highlight {
    color: #0076FF; }
  .modal-standardBox > a.btn {
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    max-width: 214px;
    padding: 20.5px 0;
    clear: both;
    display: block;
    margin: 15px auto 0;
    text-align: center;
    background: #0F62FE;
    font-size: 24px;
    border-radius: 5px; }
  .modal-standardBox h4 {
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    font-size: 48px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 10px; }
    .modal-standardBox h4 a {
      color: #0076FF;
      text-decoration: underline; }
    .modal-standardBox h4 a:hover {
      text-decoration: none; }
  .modal-standardBox a.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    display: block;
    width: 19px;
    height: 19px;
    text-indent: -9999px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("/static/images/icon-close.svg"); }
  .modal-standardBox a.btn-login {
    display: block;
    margin: 0 auto 10px;
    width: 348px;
    height: 55px;
    border-radius: 10px;
    cursor: pointer;
    text-align: left; }
    .modal-standardBox a.btn-login img {
      margin: 7px 0;
      float: none; }
    .modal-standardBox a.btn-login span {
      float: none;
      font-size: 29px;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal;
      margin: 16px 16px 0;
      width: auto;
      margin-right: 0;
      display: inline-block; }
  .modal-standardBox a.log-Facebook {
    background-color: #3077E9; }
    .modal-standardBox a.log-Facebook img {
      width: 20px;
      height: auto;
      display: inline-block;
      vertical-align: middle;
      padding-left: 60px;
      margin-top: -1px; }
    .modal-standardBox a.log-Facebook span {
      margin: 18px 7px 0; }
  .modal-standardBox a.log-Google {
    background-color: #ffffff;
    color: #707070; }
    .modal-standardBox a.log-Google img {
      width: 18px;
      height: auto;
      display: inline-block;
      vertical-align: middle;
      padding-left: 60px;
      margin-top: 0; }
    .modal-standardBox a.log-Google span {
      margin: 18px 7px 0; }
  .modal-standardBox a.log-Line {
    background-color: #01B901; }
    .modal-standardBox a.log-Line img {
      width: 24px;
      height: auto;
      display: inline-block;
      vertical-align: middle;
      padding-left: 58px;
      margin-top: 0; }
    .modal-standardBox a.log-Line span {
      margin: 18px 2px 0; }
  .modal-standardBox a.log-Apple {
    border-radius: 0;
    overflow: hidden; }
    .modal-standardBox a.log-Apple img {
      margin: 0;
      width: 100%; }
  .modal-standardBox .modal-toggle {
    margin: 20px auto 0;
    width: 346px; }
    .modal-standardBox .modal-toggle .toggle-navigation {
      width: 100%;
      position: relative;
      clear: both;
      margin: 20px 0;
      overflow: hidden;
      border-top: 1px solid #ffffff;
      padding-top: 20px; }
      .modal-standardBox .modal-toggle .toggle-navigation > li {
        width: 50%;
        display: inline-block;
        float: left;
        text-align: center;
        color: #9B9B9B;
        font-size: 24px;
        font-family: "db_heaventmed", san-serif;
        font-weight: normal;
        cursor: pointer; }
        .modal-standardBox .modal-toggle .toggle-navigation > li a {
          color: #9B9B9B; }
      .modal-standardBox .modal-toggle .toggle-navigation .tab1 {
        width: 45%; }
      .modal-standardBox .modal-toggle .toggle-navigation .tab2 {
        width: 55%; }
    .modal-standardBox .modal-toggle .toggle-navigation:before {
      content: "|";
      position: absolute;
      left: 44%;
      top: 20px;
      font-size: 30px; }
    .modal-standardBox .modal-toggle .toggle-detail {
      clear: both;
      width: 100%; }
      .modal-standardBox .modal-toggle .toggle-detail > li {
        display: none;
        width: 100%;
        overflow: hidden; }
      .modal-standardBox .modal-toggle .toggle-detail > li.active {
        display: block; }
  .modal-standardBox .headline {
    position: relative;
    font-size: 24px;
    margin: 0 0 20px; }
    .modal-standardBox .headline span {
      background: #121212;
      padding: 0 15px; }
  .modal-standardBox .headline:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #ffffff;
    position: absolute;
    top: 50%;
    z-index: -1; }
  .modal-standardBox .text-captcha {
    margin: 20px auto 0;
    color: #9B9B9B;
    font-size: 16px;
    text-align: center;
    width: 70%; }
    .modal-standardBox .text-captcha a {
      color: #9B9B9B;
      text-decoration: underline; }
    .modal-standardBox .text-captcha a:hover {
      text-decoration: none; }
  .modal-standardBox .modal-toggle.error h3.headline {
    margin: 0; }
  .modal-standardBox .modal-toggle.error > span {
    color: #ff0000;
    width: 100%;
    display: inline-block;
    text-align: center; }
    .modal-standardBox .modal-toggle.error > span a {
      text-decoration: underline;
      color: #ff0000; }
    .modal-standardBox .modal-toggle.error > span a:hover {
      text-decoration: none; }
  .modal-standardBox .checkbox.error label {
    color: #fff; }
  .modal-standardBox .checkbox.error span {
    text-align: center;
    display: block; }
  .modal-standardBox p.barOr {
    position: relative;
    width: 348px;
    font-family: "db_heaventmed", san-serif;
    margin: 28px auto;
    color: #fff; }
    .modal-standardBox p.barOr span {
      background: #121212;
      position: relative;
      padding: 0 20px; }
  .modal-standardBox p.barOr:before {
    content: '';
    height: 1px;
    width: 100%;
    background: #fff;
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 1px); }

.modal-spinner {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  padding: 12px 16px;
  border-radius: 5px;
  background-color: #111;
  height: 20px; }
  .modal-spinner > div {
    border-radius: 100px;
    background-color: #fff;
    height: 20px;
    width: 2px;
    margin: 0 1px;
    display: inline-block;
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out; }
  .modal-spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s; }
  .modal-spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s; }
  .modal-spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s; }

form {
  margin: 20px 0; }
  form fieldset {
    border: none; }
    form fieldset ul {
      width: 86%;
      margin: 0 auto;
      overflow: hidden; }
      form fieldset ul li {
        clear: both;
        width: 100%;
        overflow: hidden;
        margin: 0 0 24px; }
        form fieldset ul li label {
          width: 100%;
          color: #9B9B9B;
          font-size: 24px;
          font-family: "db_heaventmed", san-serif;
          font-weight: normal; }
        form fieldset ul li input[type="text"],
        form fieldset ul li input[type="password"] {
          border: none;
          border-bottom: 1px solid #9B9B9B;
          display: block;
          background: none;
          width: 96%;
          color: #fff;
          padding: 0 2%;
          font-size: 24px;
          font-family: "db_heaventmed", san-serif;
          font-weight: normal; }
        form fieldset ul li input[type="password"]:-ms-input-placeholder {
          font-family: "db_heaventregular", san-serif;
          font-size: 14px; }
        form fieldset ul li input[type="password"]::-webkit-input-placeholder {
          font-family: "db_heaventregular", san-serif;
          font-size: 14px; }
        form fieldset ul li input[type="password"]:-moz-placeholder {
          font-family: "db_heaventregular", san-serif;
          font-size: 14px; }
        form fieldset ul li input[type="password"]::-moz-placeholder {
          font-family: "db_heaventregular", san-serif;
          font-size: 14px; }
        form fieldset ul li input[disabled] {
          background: #9b9b9b;
          color: #fff; }
      form fieldset ul li.checkbox {
        margin: 0 0 15px; }
        form fieldset ul li.checkbox p {
          margin-bottom: 15px;
          color: #9B9B9B;
          font-size: 16px;
          font-family: "db_heaventregular", san-serif;
          line-height: 1; }
          form fieldset ul li.checkbox p a {
            color: #0076FF;
            text-decoration: underline; }
          form fieldset ul li.checkbox p a:hover {
            text-decoration: none; }
          form fieldset ul li.checkbox p a:first-of-type {
            display: inline-block; }
        form fieldset ul li.checkbox label {
          font-size: 15px;
          color: #fff;
          float: left;
          width: auto; }
          form fieldset ul li.checkbox label input[type="checkbox"] {
            border-radius: 0;
            margin-right: 8px; }
          form fieldset ul li.checkbox label a {
            color: #0076FF;
            text-decoration: underline; }
          form fieldset ul li.checkbox label a:hover {
            text-decoration: none; }
        form fieldset ul li.checkbox > a {
          float: left;
          color: #0076FF;
          text-decoration: none;
          font-size: 24px;
          line-height: 28px; }
        form fieldset ul li.checkbox > a:hover {
          text-decoration: none; }
        form fieldset ul li.checkbox > a:last-child {
          float: right; }
      form fieldset ul li.focus label {
        color: #ffffff; }
      form fieldset ul li.focus input[type="text"] {
        /*border-bottom: 1px solid #fff;*/ }
      form fieldset ul li.error label {
        color: #ff0000; }
      form fieldset ul li.error span {
        color: #ff0000; }
      form fieldset ul li.error input[type="text"], form fieldset ul li.error input[type="password"] {
        /*border-bottom: 1px solid #ff0000;*/ }
      form fieldset ul li.error .ant-calendar-picker.ant-calendar-picker-large > div {
        border-bottom: 1px solid #ff0000; }
      form fieldset ul li.eye > div {
        position: relative; }
        form fieldset ul li.eye > div input[type="text"], form fieldset ul li.eye > div input[type="password"] {
          padding: 0 10% 0 2%;
          width: 88%; }
        form fieldset ul li.eye > div p {
          position: absolute;
          top: 5px;
          right: 0;
          cursor: pointer;
          width: 20px;
          height: 14px;
          background: url("/static/images/eye-slash.svg") 0 0 no-repeat;
          text-indent: -9999px; }
      form fieldset ul li.eye > div.active {
        position: relative; }
        form fieldset ul li.eye > div.active p {
          background-image: url("/static/images/eye.svg");
          background-position: 1px 0; }
      form fieldset ul li.DateOfBirth .ant-calendar-picker.ant-calendar-picker-large > div {
        border-bottom: 1px solid #9B9B9B; }
        form fieldset ul li.DateOfBirth .ant-calendar-picker.ant-calendar-picker-large > div > input {
          border-bottom: none;
          width: 96%;
          color: #fff;
          padding: 0 2%;
          font-size: 24px;
          font-family: "db_heaventmed", san-serif;
          font-weight: normal; }
      form fieldset ul li .box {
        margin: 4px 0 0;
        clear: both;
        display: block; }
        form fieldset ul li .box div.radio {
          width: 33%;
          float: left; }
    form fieldset input[type="submit"], form fieldset button[type="submit"] {
      width: 100%;
      background: #0F62FE;
      border-radius: 3px;
      border: none;
      color: #fff;
      font-size: 22px;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal;
      padding: 13px 0px;
      cursor: pointer; }

.tem2 form fieldset ul {
  min-height: auto;
  margin: 0 auto 20px; }

.tem2 form fieldset input[type="submit"], .tem2 form fieldset button[type="submit"] {
  max-width: 214px;
  display: block;
  margin: 0 auto; }

.tem2 > div {
  text-align: center;
  margin: 0; }
  .tem2 > div p {
    font-size: 26px;
    color: #9B9B9B;
    line-height: 1;
    font-family: "db_heaventlight", san-serif; }
    .tem2 > div p span {
      color: #0076FF;
      font-size: 24px; }
  .tem2 > div p:last-child span {
    color: #ffffff;
    font-size: 30px; }
  .tem2 > div .btn-group {
    padding: 35px 0 0; }
    .tem2 > div .btn-group a {
      text-align: center;
      max-width: 191px;
      width: 46%;
      margin-right: 4%;
      display: inline-block;
      padding: 9.5px 0px;
      border-radius: 3px;
      font-size: 22px;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal; }
      .tem2 > div .btn-group a:hover {
        text-decoration: none; }
    .tem2 > div .btn-group a:last-child {
      margin-right: 0; }
    .tem2 > div .btn-group a.cancel {
      background: #4A4A4A; }
    .tem2 > div .btn-group a.agree {
      background: #0F62FE; }
  .tem2 > div > a {
    background: #0F62FE;
    text-align: center;
    max-width: 191px;
    width: 46%;
    display: inline-block;
    padding: 10.5px 0px;
    border-radius: 3px;
    font-size: 22px;
    font-family: "db_heaventmed", san-serif;
    font-weight: normal;
    margin-top: 35px; }

.form-group {
  display: block;
  margin-bottom: 15px; }

.form-group input {
  padding: 0;
  /*display: none;*/
  height: initial;
  width: initial;
  display: inline-block;
  opacity: 0;
  margin-bottom: 0;
  cursor: pointer;
  position: absolute; }

.form-group label {
  position: relative;
  cursor: pointer; }

.form-group label:before {
  content: '';
  -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 7px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 5px;
  border-radius: 3px;
  background: #514E4E;
  margin-top: 0; }

.form-group input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 1px;
  left: 5px;
  width: 4px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg); }

.register .form-group input:checked + label:after {
  top: 4px; }

.accept-box {
  width: 348px;
  margin: 15px auto 0;
  text-align: left; }
  .accept-box a {
    color: #0076FF;
    text-decoration: underline; }
  .accept-box a:hover {
    text-decoration: none; }

.accept-box.error span {
  color: #ff0000;
  display: inline-block;
  clear: both;
  text-align: center; }

/* The container */
.container-checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

/* Hide the browser's default checkbox */
.container-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer; }

/* Create a custom checkbox */
.container-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 19px;
  width: 19px;
  border: 1px solid #191919;
  border-radius: 4px;
  background-color: #f2f2f2; }

/* On mouse-over, add a grey background color */
.container-checkbox:hover input ~ .checkmark {
  background-color: #f2f2f2; }

/* When the checkbox is checked, add a blue background */
.container-checkbox input:checked ~ .checkmark {
  background-color: #2196F3; }

/* Create the checkmark/indicator (hidden when not checked) */
.container-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none; }

/* Show the checkmark when checked */
.container-checkbox input:checked ~ .checkmark:after {
  display: block; }

/* Style the checkmark/indicator */
.container-checkbox .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }

.form-check {
  margin: 12px 40px; }
  .form-check .checkmark-box {
    text-align: left;
    font-family: "db_heaventmed", san-serif;
    font-size: 20px;
    line-height: 16px;
    background: #D8DBE2;
    padding: 14px 18px;
    margin-bottom: 30px; }
  .form-check .container-checkbox {
    font-family: "db_heaventmed", san-serif;
    font-size: 20px;
    line-height: 16px;
    color: #191919;
    padding-top: 3px;
    padding-left: 36px;
    margin-bottom: 0; }
    .form-check .container-checkbox a {
      color: #0076ff;
      text-decoration: underline; }
    .form-check .container-checkbox .checkmark {
      width: 20px;
      height: 20px;
      border-radius: 4px; }
    .form-check .container-checkbox .checkmark:after {
      left: 7px;
      top: 2px;
      border-width: 0 1.5px 1.5px 0; }
    .form-check .container-checkbox input:checked ~ .checkmark {
      background-color: #1f40d9;
      border: 1px solid #1f40d9; }
  .form-check button[type="button"] {
    font-family: "db_heaventregular", san-serif;
    font-size: 24px;
    line-height: 28px;
    width: 320px;
    text-align: center;
    background: #1f40d9;
    padding: 10px 0;
    color: #fff;
    border-radius: 4px;
    cursor: pointer; }
  .form-check button[type="button"]:disabled {
    background-color: #9b9b9b;
    cursor: default; }
  .form-check .not-agree {
    background: none !important; }

.form-check fieldset:disabled .container-checkbox {
  cursor: default;
  color: #9b9b9b; }
  .form-check fieldset:disabled .container-checkbox .checkmark {
    border: 1px solid #9b9b9b; }

.form-check fieldset:disabled button[type="button"] {
  background: #9b9b9b;
  cursor: default; }

.form-check.form-policy .checkmark-box {
  text-align: center;
  margin-bottom: 24px; }

.form-check.form-policy button[type="button"] {
  display: block;
  margin: 0 auto; }

.form-check.form-policy button[type="button"].not-agree {
  margin-top: 24px;
  width: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #7B7E85; }

.profile .modal {
  max-width: 300px; }
  .profile .modal h3 {
    margin: 0; }
  .profile .modal form.edit fieldset ul {
    width: 100%;
    margin: 0; }
    .profile .modal form.edit fieldset ul li {
      margin-bottom: 20px; }
    .profile .modal form.edit fieldset ul li.gender input {
      margin-left: 3px; }
    .profile .modal form.edit fieldset ul li.gender label {
      margin-right: 10px;
      font-size: 20px;
      color: #fff; }
  .profile .modal form.edit fieldset a {
    color: #fff;
    background: #9A9999;
    width: 48%;
    display: inline-block;
    text-align: center;
    padding: 10px 0;
    font-size: 22px;
    font-family: "db_heaventmed", san-serif;
    border-radius: 3px;
    float: left; }
  .profile .modal form.edit fieldset input[type="submit"], .profile .modal form.edit fieldset button[type="submit"] {
    width: 48%;
    padding: 8px 0px;
    float: right; }

.profile .modal.tem2 {
  max-width: 500px; }

.profile #delete-acc.tem2 h3 {
  margin: 0 0 5px; }

.profile #delete-acc.tem2 > div p {
  font-size: 18px;
  color: #fff;
  margin: 0 0 10px;
  font-family: "db_heaventregular", san-serif; }
  .profile #delete-acc.tem2 > div p span {
    font-size: 18px;
    color: #fff; }

.profile #delete-acc.tem2 > div p.btn-group {
  padding: 10px 0 0; }

.profile #delete-acc.tem2 > div p.btn-group.has-active-subscription {
  padding: 20px 0 10px; }

.modal.modal-login {
  padding: 80px 30px; }
  .modal.modal-login > h3 {
    font-size: 32px;
    line-height: 18px;
    margin: 0 0 32px;
    letter-spacing: 0; }
  .modal.modal-login p.regis {
    font-family: "db_heaventregular", san-serif;
    font-size: 20px;
    line-height: 18px;
    color: #fff; }
    .modal.modal-login p.regis a {
      color: #0076ff;
      margin: 0 0 0 20px; }
  .modal.modal-login p.captcha {
    font-family: "db_heaventregular", san-serif;
    color: #9b9b9b;
    font-size: 18px;
    line-height: 24px;
    width: 284px;
    margin: 140px auto 0; }
    .modal.modal-login p.captcha span {
      display: block; }
      .modal.modal-login p.captcha span a {
        color: #9b9b9b;
        text-decoration: underline; }

.modal-center.term-condition {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 12;
  padding: 20px;
  box-sizing: border-box;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center; }
  .modal-center.term-condition .detail {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 960px;
    background: #fff;
    padding: 40px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    -o-box-shadow: 0 0 10px #000;
    -ms-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    text-align: center;
    color: #191919;
    height: calc(100vh - 40px); }
    .modal-center.term-condition .detail > h3 {
      font-size: 32px;
      line-height: 32px;
      margin: 0 0 24px;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal; }
      .modal-center.term-condition .detail > h3 span {
        display: block; }
    .modal-center.term-condition .detail .content {
      height: calc(83vh - 367px);
      overflow-y: scroll;
      padding: 0 94px;
      margin: 0 auto;
      text-align: left;
      overflow-x: hidden;
      width: calc(100% - 188px); }
      .modal-center.term-condition .detail .content .policy h2 {
        text-indent: 0; }
      .modal-center.term-condition .detail .content .policy h4 {
        font-weight: normal; }
      .modal-center.term-condition .detail .content .policy p {
        text-indent: 0; }
    .modal-center.term-condition .detail .content.contentHeight {
      height: calc(83vh - 280px); }
    .modal-center.term-condition .detail .pdpaStep {
      width: calc(100% - 188px);
      margin: 0 auto 24px;
      display: flex;
      position: relative; }
      .modal-center.term-condition .detail .pdpaStep > p {
        width: 50%;
        text-align: center;
        flex: 0 0 50%;
        font-family: "db_heaventmed", san-serif;
        font-weight: normal;
        font-size: 24px;
        color: #7B7E85;
        margin: 0; }
        .modal-center.term-condition .detail .pdpaStep > p span {
          display: block; }
        .modal-center.term-condition .detail .pdpaStep > p span.check {
          width: 18px;
          height: 18px;
          border: 2px solid #7B7E85;
          border-radius: 100%;
          display: inline-block;
          position: relative;
          background-color: #fff;
          padding: 7px;
          margin-top: 8px;
          box-sizing: unset; }
        .modal-center.term-condition .detail .pdpaStep > p span.check:after {
          content: '';
          width: 18px;
          height: 18px;
          display: inline-block;
          background-color: #7B7E85;
          border-radius: 100%; }
    .modal-center.term-condition .detail .pdpaStep.first > p:first-child {
      color: #0F62FE; }
      .modal-center.term-condition .detail .pdpaStep.first > p:first-child span.check {
        border: 2px solid #0F62FE; }
      .modal-center.term-condition .detail .pdpaStep.first > p:first-child span.check:after {
        background-color: #0F62FE; }
    .modal-center.term-condition .detail .pdpaStep.second > p:last-child {
      color: #0F62FE; }
      .modal-center.term-condition .detail .pdpaStep.second > p:last-child span.check {
        border: 2px solid #0F62FE; }
      .modal-center.term-condition .detail .pdpaStep.second > p:last-child span.check:after {
        background-color: #0F62FE; }
    .modal-center.term-condition .detail .pdpaStep:after {
      content: '';
      height: 2px;
      width: 50%;
      background-color: #7B7E85;
      display: block;
      position: absolute;
      bottom: 17px;
      left: 25%;
      z-index: -1; }
    .modal-center.term-condition .detail .pdpaStep.second:after {
      background-color: #0F62FE; }
    .modal-center.term-condition .detail .form-check {
      padding: 0; }
      .modal-center.term-condition .detail .form-check fieldset {
        padding: .35em .75em .625em; }
      .modal-center.term-condition .detail .form-check .checkmark-box {
        background-color: #0F62FE;
        border-radius: 12px;
        color: #fff; }
      .modal-center.term-condition .detail .form-check .container-checkbox {
        color: #fff;
        font-size: 16px; }
        .modal-center.term-condition .detail .form-check .container-checkbox a {
          color: #fff; }
        .modal-center.term-condition .detail .form-check .container-checkbox .checkmark {
          border: 1px solid #fff;
          background-color: #0F62FE;
          box-sizing: unset; }
        .modal-center.term-condition .detail .form-check .container-checkbox input:checked ~ .checkmark {
          background-color: #fff;
          border: 1px solid #fff; }
        .modal-center.term-condition .detail .form-check .container-checkbox .checkmark:after {
          border: solid #0F62FE;
          border-width: 0 2px 2px 0; }
      .modal-center.term-condition .detail .form-check button[type="button"] {
        background-color: #0F62FE; }
      .modal-center.term-condition .detail .form-check button[type="button"]:disabled {
        background-color: #9b9b9b;
        cursor: default; }
      .modal-center.term-condition .detail .form-check .not-agree {
        background: none; }

.scroll-style-3::-webkit-scrollbar-track {
  -webkit-box-shadow: unset;
  border-radius: 10px;
  background-color: #fff; }

.scroll-style-3::-webkit-scrollbar {
  width: 5px;
  background-color: #fff; }

.scroll-style-3::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: unset;
  background-color: #707070; }

.scroll-style-3 {
  scrollbar-color: #0F62FE #ffffff;
  scrollbar-width: thin; }

.scroll-style-3::-webkit-scrollbar {
  width: 8px;
  height: 80px; }

.scroll-style-3::-webkit-scrollbar-button {
  width: 0px;
  height: 0px; }

.scroll-style-3::-webkit-scrollbar-thumb {
  background: #0F62FE;
  border-radius: 0px; }

.scroll-style-3::-webkit-scrollbar-thumb:hover {
  background: #0F62FE; }

.scroll-style-3::-webkit-scrollbar-thumb:active {
  background: #0F62FE; }

.scroll-style-3::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 0px; }

.scroll-style-3::-webkit-scrollbar-track:hover {
  background: #ffffff; }

.scroll-style-3::-webkit-scrollbar-track:active {
  background: #ffffff; }

.scroll-style-3::-webkit-scrollbar-corner {
  background: transparent; }

/* start tutorial*/
.modal-center.tutorial-pdpa {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 8;
  padding: 20px;
  box-sizing: border-box;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  text-align: center; }
  .modal-center.tutorial-pdpa .detail {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 960px;
    background: #fff;
    padding: 40px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    -o-box-shadow: 0 0 10px #000;
    -ms-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    text-align: center;
    color: #191919;
    height: calc(100vh - 40px); }
    .modal-center.tutorial-pdpa .detail img {
      height: 45vh;
      max-height: 480px; }
    .modal-center.tutorial-pdpa .detail h3 {
      font-family: 'db_heaventmed', san-serif;
      font-weight: normal;
      color: #191919;
      font-size: 44px;
      line-height: 0.5;
      letter-spacing: 0.8px;
      margin: 20px 0; }
    .modal-center.tutorial-pdpa .detail p {
      font-family: 'db_heaventregular';
      font-weight: normal;
      color: #191919;
      font-size: 24px;
      line-height: 1.5;
      letter-spacing: 0.44px;
      width: 600px;
      margin: 0 auto;
      text-align: left;
      display: inline-block; }
      .modal-center.tutorial-pdpa .detail p span {
        font-size: 28px; }
    .modal-center.tutorial-pdpa .detail p:last-of-type {
      margin: 0; }
    .modal-center.tutorial-pdpa .detail > a {
      position: absolute;
      right: 10px;
      top: 10px;
      display: block; }
      .modal-center.tutorial-pdpa .detail > a img {
        margin: 0;
        width: 15px;
        height: auto; }
    .modal-center.tutorial-pdpa .detail ul {
      padding: 0 0 0 30px;
      width: 600px;
      margin: 0 auto;
      display: inline-block; }
      .modal-center.tutorial-pdpa .detail ul li {
        list-style: disc outside;
        text-align: left;
        font-size: 24px;
        line-height: 1.5;
        letter-spacing: 0.44px; }
    .modal-center.tutorial-pdpa .detail .btn-step {
      position: absolute;
      bottom: 40px;
      left: 0;
      right: 0; }
      .modal-center.tutorial-pdpa .detail .btn-step a {
        display: block;
        font-size: 24px;
        line-height: 27px;
        text-align: center;
        font-family: 'db_heaventregular';
        width: 296px;
        padding: 10.5px 0;
        margin: 0 auto 20px;
        border-radius: 4px; }
      .modal-center.tutorial-pdpa .detail .btn-step a.next {
        background: #1f40d9; }
      .modal-center.tutorial-pdpa .detail .btn-step a.previous {
        color: #9b9b9b; }
      .modal-center.tutorial-pdpa .detail .btn-step p {
        width: auto;
        text-align: center;
        height: auto;
        line-height: normal;
        margin-top: 20px; }
        .modal-center.tutorial-pdpa .detail .btn-step p span {
          background: #bfbfbf;
          width: 12px;
          height: 12px;
          margin-right: 16px;
          border-radius: 100%;
          display: inline-block; }
        .modal-center.tutorial-pdpa .detail .btn-step p span.active {
          background: #1f40d9; }
        .modal-center.tutorial-pdpa .detail .btn-step p span:last-child {
          margin: 0; }
    .modal-center.tutorial-pdpa .detail .cont {
      position: absolute;
      left: 0;
      right: 0;
      top: 50vh; }

.modal-center.tutorial-pdpa:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.05em; }

@media screen and (min-width: 1024px) and (max-height: 979px) {
  .modal-center.tutorial-pdpa .detail img {
    height: 35vh; }
  .modal-center.tutorial-pdpa .detail .cont {
    top: 43vh; } }

@media screen and (min-width: 1024px) and (max-height: 859px) {
  .modal-center.tutorial-pdpa .detail .btn-step {
    bottom: 20px; }
    .modal-center.tutorial-pdpa .detail .btn-step p {
      margin: 0; } }

/* react semantic ui */
.ui.modal {
  max-width: 500px;
  width: 90%;
  background: none;
  margin: 0;
  padding: 0; }
  .ui.modal .wrap-md {
    width: 100%;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    background: #121212;
    padding: 30px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    -o-box-shadow: 0 0 10px #000;
    -ms-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    text-align: center;
    color: #fff; }
    .ui.modal .wrap-md h3 {
      text-align: center;
      font-family: "db_heaventmed", san-serif;
      font-weight: normal;
      font-size: 36px;
      letter-spacing: 0.5px;
      line-height: 1.2;
      margin: 0 0 10px; }
    .ui.modal .wrap-md > div p {
      font-size: 26px;
      color: #9B9B9B;
      line-height: 1; }
    .ui.modal .wrap-md > div .btn-group {
      padding: 35px 0 0; }
      .ui.modal .wrap-md > div .btn-group a {
        text-align: center;
        max-width: 191px;
        width: 46%;
        margin-right: 4%;
        display: inline-block;
        padding: 9.5px 0px;
        border-radius: 3px;
        font-size: 22px;
        font-family: "db_heaventmed", san-serif;
        font-weight: normal; }
      .ui.modal .wrap-md > div .btn-group a.agree {
        background: #0F62FE; }
      .ui.modal .wrap-md > div .btn-group a.cancel {
        background: #4A4A4A; }
      .ui.modal .wrap-md > div .btn-group a:last-child {
        margin-right: 0; }

.second-mail > p {
  font-family: "db_heaventmed", san-serif;
  font-weight: normal;
  font-size: 18px;
  line-height: 20px;
  text-align: center; }

.second-mail form fieldset input[type="submit"], .second-mail form fieldset button[type="submit"] {
  width: 200px;
  background-color: #0F62FE;
  font-size: 18px;
  line-height: 22px;
  font-family: "db_heaventmed", san-serif;
  font-weight: normal;
  padding: 9px 0;
  margin: 40px auto 0;
  display: block; }

.second-mail form fieldset input[type="submit"].btn-disabled, .second-mail form fieldset button[type="submit"].btn-disabled {
  background-color: #9b9b9b !important;
  cursor: default; }

.second-mail form fieldset ul li.DateOfBirth .ant-calendar-picker.ant-calendar-picker-large > div {
  border-bottom: 1px solid #9B9B9B; }

.second-mail form fieldset ul li .box {
  margin: 4px 0 0;
  clear: both;
  display: block; }
  .second-mail form fieldset ul li .box div.radio {
    width: 33%;
    float: left; }

.radio {
  /*margin: 0.5rem;*/ }
  .radio label {
    font-size: 16px;
    line-height: 20px; }
  .radio input[type="radio"] {
    position: absolute;
    opacity: 0; }
    .radio input[type="radio"] + .radio-label {
      display: flex;
      align-items: center;
      justify-content: center; }
      .radio input[type="radio"] + .radio-label:before {
        content: '';
        background: #121416;
        border-radius: 100%;
        display: inline-block;
        width: 8px;
        height: 8px;
        position: relative;
        cursor: pointer;
        text-align: center;
        transition: all 250ms ease;
        border: 5px solid #121416;
        box-shadow: 0 0 0 1px #F2F6FD;
        margin: 0 8px 0 2px; }
    .radio input[type="radio"]:checked + .radio-label:before {
      background-color: #F2F6FD;
      box-shadow: 0 0 0 1px #0F62FE;
      border: 5px solid #0F62FE; }
    .radio input[type="radio"]:focus + .radio-label:before {
      outline: none;
      border-color: #0F62FE; }
    .radio input[type="radio"]:checked:disabled + .radio-label:before {
      background-color: #F2F6FD;
      box-shadow: 0 0 0 1px #55585E;
      border: 5px solid #55585E; }
    .radio input[type="radio"] + .radio-label:empty:before {
      margin-right: 0; }
  .radio input[type="radio"]:not(:checked) + label:after {
    opacity: 0 !important;
    -webkit-transform: scale(0);
    transform: scale(0);
    display: none !important;
    padding-left: 0 !important; }
  .radio input[type="radio"]:checked + label:after {
    opacity: 0 !important;
    -webkit-transform: scale(0);
    transform: scale(0);
    display: none !important;
    padding-left: 0 !important; }

/*force calendar*/
.ant-calendar-input {
  color: #fff !important;
  background: #000 !important; }

.ant-calendar-picker-container {
  z-index: 1000 !important; }

.profile .ant-calendar {
  background: #000 !important;
  color: #fff !important;
  background-color: #000 !important; }
  .profile .ant-calendar table {
    background: #000 !important;
    color: #fff !important; }

.ant-calendar-selected-day .ant-calendar-date {
  background: #0F62FE !important;
  color: #fff !important;
  border: none !important; }

.ant-calendar-header .ant-calendar-century-select {
  color: #fff !important; }

.ant-calendar-header .ant-calendar-decade-select {
  color: #fff !important; }

.ant-calendar-header .ant-calendar-year-select {
  color: #fff !important; }

.ant-calendar-header .ant-calendar-month-select {
  color: #fff !important; }

.ant-calendar-date {
  color: #fff !important; }

.ant-calendar-date:hover {
  background: #0F62FE !important;
  color: #fff !important; }

.ant-calendar-picker:focus {
  -webkit-box-shadow: 0 !important;
  box-shadow: 0 !important; }

.ant-calendar-picker-input.ant-input:focus {
  -webkit-box-shadow: unset !important;
  box-shadow: unset !important; }

.ant-input:focus {
  -webkit-box-shadow: unset !important;
  box-shadow: unset !important; }

.ant-calendar-month-panel {
  background: #000 !important; }

.ant-calendar-month-panel-header .ant-calendar-month-panel-century-select {
  color: #fff !important; }

.ant-calendar-month-panel-header .ant-calendar-month-panel-decade-select {
  color: #fff !important; }

.ant-calendar-month-panel-header .ant-calendar-month-panel-year-select {
  color: #fff !important; }

.ant-calendar-month-panel-header .ant-calendar-month-panel-month-select {
  color: #fff !important; }

.ant-calendar-month-panel-month {
  color: #fff !important; }

.ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month {
  background: #0F62FE !important; }

.ant-calendar-header a:hover {
  background: #0F62FE !important;
  color: #fff !important; }

.ant-calendar-header .ant-calendar-next-month-btn:hover::before {
  color: #fff !important; }

.ant-calendar-header .ant-calendar-next-month-btn:hover::after {
  color: #fff !important; }

.ant-calendar-month-panel-month:hover {
  background: #0F62FE !important; }

.ant-calendar-year-panel {
  background: #000 !important; }

.ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year {
  background: #0F62FE !important; }

.ant-calendar-year-panel-last-decade-cell .ant-calendar-year-panel-year {
  color: #fff !important; }

.ant-calendar-year-panel-next-decade-cell .ant-calendar-year-panel-year {
  color: #fff !important; }

.ant-calendar-year-panel-year:hover {
  background: #0F62FE !important; }

.ant-calendar-year-panel-header .ant-calendar-year-panel-century-select {
  color: #fff !important; }

.ant-calendar-year-panel-header .ant-calendar-year-panel-decade-select {
  color: #fff !important; }

.ant-calendar-year-panel-header .ant-calendar-year-panel-year-select {
  color: #fff !important; }

.ant-calendar-year-panel-header .ant-calendar-year-panel-month-select {
  color: #fff !important; }

.ant-calendar-year-panel-year {
  color: #fff !important; }

.ant-calendar-disabled-cell.ant-calendar-today .ant-calendar-date {
  position: relative;
  border-radius: 2px;
  padding: 2px 0 0;
  background: none;
  width: 26px !important;
  height: 24px !important;
  margin: 0 auto;
  display: inline-block; }

.ant-calendar-disabled-cell.ant-calendar-today .ant-calendar-date:before {
  display: none; }

.ant-calendar-disabled-cell .ant-calendar-date {
  background: none !important;
  color: #ffffffa8 !important; }

.ant-calendar-disabled-cell .ant-calendar-date:hover {
  border-radius: 2px;
  padding: 2px 0 0;
  background: none;
  width: 26px !important;
  height: 24px !important;
  margin: 0 auto;
  display: inline-block;
  border: none; }

.ant-calendar-footer .ant-calendar-footer-btn .ant-calendar-today-btn-disabled {
  color: #fff !important; }

.ant-calendar-decade-panel-century {
  background: #000 !important; }

.ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade {
  background: #0F62FE !important;
  color: #fff !important; }

.ant-calendar-decade-panel-decade {
  color: #fff !important; }

.ant-calendar-decade-panel-last-century-cell .ant-calendar-decade-panel-decade {
  color: #fff !important; }

.ant-calendar-decade-panel-next-century-cell .ant-calendar-decade-panel-decade {
  color: #fff !important; }

/*smart banner*/
.smartbanner-show .modal-center.term-condition {
  top: 80px; }
  .smartbanner-show .modal-center.term-condition .detail {
    height: calc(100vh - 120px); }
    .smartbanner-show .modal-center.term-condition .detail .content {
      height: calc(83vh - 350px); }

@media screen and (min-width: 1024px) and (max-height: 767px) {
  .modal-center.tutorial-pdpa .detail img {
    height: 30vh; }
  .modal-center.tutorial-pdpa .detail .cont {
    top: 37vh; } }

@media screen and (min-width: 1024px) and (max-height: 699px) {
  .modal-center.tutorial-pdpa .detail img {
    display: none; }
  .modal-center.tutorial-pdpa .detail .cont {
    top: 20vh; } }

@media screen and (width: 1024px) and (height: 1366px) {
  .modal-center.tutorial-pdpa .detail .cont {
    top: 40vh; } }

@media screen and (max-width: 1023px) {
  .modal-center.tutorial-pdpa .detail {
    width: calc(100vw - 80px); }
    .modal-center.tutorial-pdpa .detail img {
      width: 100%;
      height: auto; }
    .modal-center.tutorial-pdpa .detail .cont {
      position: static; }
  .modal-center.term-condition .detail {
    width: 100%; } }

@media screen and (max-width: 767px) {
  .modal-center.term-condition .detail {
    padding: 20px 8px; }
    .modal-center.term-condition .detail > h3 {
      font-size: 28px;
      line-height: 1; }
    .modal-center.term-condition .detail .content {
      padding: 0;
      width: 92%; }
    .modal-center.term-condition .detail .form-check {
      margin: 12px 0;
      width: 100%; }
      .modal-center.term-condition .detail .form-check .checkmark-box {
        width: calc(100% - 24px);
        padding: 12px; }
      .modal-center.term-condition .detail .form-check button[type="button"] {
        width: 100%; }
    .modal-center.term-condition .detail .form-check.form-policy .checkmark-box label {
      font-size: 18px; }
    .modal-center.term-condition .detail .form-check.form-policy button[type="button"] {
      margin-top: 20px; }
    .modal-center.term-condition .detail .pdpaStep {
      width: 100%; }
      .modal-center.term-condition .detail .pdpaStep > p {
        font-size: 16px; } }

@media screen and (max-width: 576px) {
  .modal-center.tutorial-pdpa .detail {
    padding: 6px;
    width: 99%; }
    .modal-center.tutorial-pdpa .detail h3 {
      font-size: 32px;
      line-height: 1.2;
      margin: 0 0 12px; }
    .modal-center.tutorial-pdpa .detail p {
      width: calc(100% - 30px);
      font-size: 20px;
      line-height: 28px; }
    .modal-center.tutorial-pdpa .detail ul {
      width: calc(100% - 30px); }
      .modal-center.tutorial-pdpa .detail ul li {
        font-size: 20px;
        line-height: 28px; }
    .modal-center.tutorial-pdpa .detail .btn-step a {
      width: 92%; } }

@media screen and (max-width: 576px) and (max-height: 669px) {
  .modal-center.tutorial-pdpa .detail img {
    width: 75%; }
  .modal-center.tutorial-pdpa .detail .btn-step a {
    margin: 0 auto 8px;
    font-size: 20px;
    padding: 8px 0; }
  .modal-center.tutorial-pdpa .detail .btn-step p {
    margin: 0; } }

@media screen and (max-height: 499px) {
  .modal-center.tutorial-pdpa .detail {
    height: auto; }
    .modal-center.tutorial-pdpa .detail img {
      display: none; }
    .modal-center.tutorial-pdpa .detail .btn-step {
      position: static;
      margin-top: 20px; } }

/* end tutorial*/
@media only screen and (max-width: 500px) {
  .ui.modal {
    width: 90%;
    padding: 30px 10px; } }

@media only screen and (max-width: 500px) {
  .modal {
    width: 100%;
    padding: 50px 10px; }
    .modal a.btn-login {
      width: 100%;
      height: auto;
      padding: 4% 0 3.4%;
      border-radius: 5px; }
      .modal a.btn-login img {
        padding-left: 16%;
        margin: -3px 0 0; }
      .modal a.btn-login span {
        font-size: 22px;
        margin: 0 0 0 1%; }
    .modal a.btn-login.log-Google img {
      padding-left: 17%; }
    .modal a.btn-login.log-Facebook img {
      padding-left: 17%; }
    .modal a.btn-login.log-Apple {
      padding: 0; }
      .modal a.btn-login.log-Apple img {
        padding: 0; }
    .modal a.btn-login.log-Line span {
      margin: 0; }
    .modal .modal-toggle {
      width: 100%; }
      .modal .modal-toggle .toggle-navigation > li {
        font-size: 20px; }
    .modal p.barOr {
      width: 100%; }
  .modal.modal-login {
    padding: 50px 10px; }
    .modal.modal-login a.close-modal {
      top: 20px;
      right: 20px; }
  form fieldset ul li label {
    font-size: 20px; }
  #delete-acc.tem2 > div p span {
    display: block;
    padding: 10px 0 0; }
  .accept-box {
    width: 100%; }
  .modal-standardBox {
    width: 100%;
    padding: 50px 10px; }
    .modal-standardBox a.btn-login {
      width: 100%;
      height: auto;
      padding: 4% 0 3.4%;
      border-radius: 5px; }
      .modal-standardBox a.btn-login img {
        padding-left: 16%;
        margin: -3px 0 0; }
      .modal-standardBox a.btn-login span {
        font-size: 22px;
        margin: 0 0 0 1%; }
    .modal-standardBox a.btn-login.log-Google img {
      padding-left: 17%; }
    .modal-standardBox a.btn-login.log-Facebook img {
      padding-left: 17%; }
    .modal-standardBox a.btn-login.log-Apple {
      padding: 0; }
      .modal-standardBox a.btn-login.log-Apple img {
        padding: 0; }
    .modal-standardBox a.btn-login.log-Line span {
      margin: 0; }
    .modal-standardBox .modal-toggle {
      width: 100%; }
      .modal-standardBox .modal-toggle .toggle-navigation > li {
        font-size: 20px; }
    .modal-standardBox p.barOr {
      width: 100%; } }

@media screen and (max-width: 320px) {
  .modal-center.term-condition .detail .pdpaStep > p {
    font-size: 12px;
    line-height: 1; } }

body {
  position: relative;
  background: #00040D;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: geometricPrecision; }

#truehits_div {
  position: absolute;
  bottom: 22px;
  left: 10px; }

.fav, a[class^=share] {
  width: 34px;
  height: 34px;
  float: left;
  background: url(/static/images/share-btn.svg) no-repeat;
  background-size: 100%;
  margin: 0 5px 0 0; }
  .fav span, a[class^=share] span {
    display: block;
    text-indent: -9999px; }

.t-highlight {
  font-family: 'db_heaventbold';
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: normal;
  display: inline-block;
  background: #4d2598;
  background: -moz-linear-gradient(left, #2723B5 0%, #2723B5 0%, #E43131 100%, #E43131 100%);
  background: -webkit-linear-gradient(left, #2723B5 0%, #2723B5 0%, #E43131 100%, #E43131 100%);
  background: linear-gradient(left, #2723B5 0%, #2723B5 0%, #E43131 100%, #E43131 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  position: relative; }

.invisible {
  display: none; }

a[class^=share] {
  background-position: 0 -51px;
  background-size: 100%; }

.view-all {
  position: absolute;
  right: 0;
  top: 10px;
  color: #0076FF;
  font-size: 20px;
  line-height: 23px;
  font-family: 'db_heaventbold', san-serif; }

.view-all:hover {
  text-decoration: underline; }

*[class|=ico] {
  color: #fff;
  font-size: 16px;
  border-radius: 4px;
  padding: 2px 7px;
  margin: 0 5px 0 0;
  font-family: 'db_heaventmed', san-serif;
  text-transform: uppercase;
  letter-spacing: 0.3px; }

.ico-teaser {
  background: #DC353D;
  vertical-align: top; }

.ico-hit {
  background: #7757BE;
  vertical-align: top; }

.ico-showing {
  background: #0F62FE;
  vertical-align: top; }

.ico-clip {
  background-color: #0F62FE;
  vertical-align: top; }

.ico-clip:before {
  content: '';
  width: 7px;
  height: 10px;
  display: inline-block;
  background: url(/static/images/icon-play.svg) 0px 2px no-repeat;
  background-size: 100%;
  margin-right: 5px; }

#wrapper .container {
  box-sizing: border-box;
  margin: 0 40px; }

.viewed:before {
  display: block;
  width: 15px;
  height: 13px;
  background: url(/static/images/icon-eye.svg) no-repeat 0 0;
  vertical-align: middle;
  background-size: 100%;
  margin: 4px 5px 0 0;
  float: left; }

/*bootstrap form error*/
.has-error .checkbox, .has-error .checkbox-inline, .has-error .control-label, .has-error .help-block, .has-error .radio, .has-error .radio-inline, .has-error.checkbox label, .has-error.checkbox-inline label, .has-error.radio label, .has-error.radio-inline label {
  color: #CA3131;
  font-size: 14px;
  font-family: db_heaventregular, san-serif; }

.has-success input[type="text"],
.has-success .control-label,
.has-success .help-block,
.has-success .form-control-feedback {
  color: #3BC271; }

/*footer global*/
footer {
  width: 100%;
  text-align: left;
  border-radius: 0;
  margin: 0;
  padding: 0 40px 10px;
  box-sizing: border-box;
  overflow: hidden;
  background: #000;
  color: #fff;
  position: relative;
  /*end ft-row*/ }
  footer .ft-row:before {
    width: 100%;
    height: 1px;
    background: #fff;
    opacity: 0.2;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    width: 100%; }
  footer .ft-row {
    width: 100%;
    max-width: 1200px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    padding: 25px 0 0;
    /*> p:after { content:''; display: block; position: absolute; bottom: -20px; left: 50%; width: 40px; height: 2px; background:#fff; margin: 0 0 0 -20px; opacity: 0.7;}*/ }
    footer .ft-row > p {
      margin: 0 0 10px; }
    footer .ft-row > a {
      display: block;
      clear: both;
      margin: 0 0 15px; }
    footer .ft-row img {
      height: 40px;
      width: auto;
      padding: 0; }
    footer .ft-row p {
      color: #fff;
      font-size: 18px;
      padding: 0 0 5px;
      position: relative; }
    footer .ft-row p.qr-dl {
      margin: 0 10px 0 0;
      display: inline-block;
      float: left;
      padding: 0; }
      footer .ft-row p.qr-dl img {
        height: auto;
        width: 128px; }
    footer .ft-row .footer-secondary {
      width: 100%;
      margin: 0 auto;
      text-align: center;
      position: relative;
      padding: 20px 0 10px;
      overflow: hidden;
      font-family: db_heaventmed, san-serif;
      font-size: 16px;
      line-height: 25px;
      letter-spacing: 0.5px; }
      footer .ft-row .footer-secondary p {
        color: #D7D7D7; }
      footer .ft-row .footer-secondary a {
        color: #D7D7D7; }
    footer .ft-row > ul {
      float: left;
      overflow: hidden;
      width: 70%; }
      footer .ft-row > ul > li {
        float: left;
        margin: 0 4% 0 0; }
        footer .ft-row > ul > li h3 {
          font-family: db_heaventmed, san-serif;
          font-size: 22px;
          line-height: 25px;
          letter-spacing: 0.5px;
          font-weight: normal;
          margin: 0 0 15px;
          text-align: left; }
          footer .ft-row > ul > li h3 img {
            display: none; }
        footer .ft-row > ul > li ul li {
          font-family: db_heaventmed, san-serif;
          clear: both;
          margin: 0 0 10px;
          overflow: hidden; }
          footer .ft-row > ul > li ul li a {
            font-size: 16px;
            line-height: 25px;
            color: #F2F6FD; }
            footer .ft-row > ul > li ul li a img {
              height: 15px;
              width: auto;
              float: left;
              padding: 0; }
          footer .ft-row > ul > li ul li a:hover {
            text-decoration: underline;
            color: #0076FF; }
      footer .ft-row > ul > li:last-child {
        margin: 0; }
      footer .ft-row > ul .contact-us ul li a {
        display: flex;
        align-items: center; }
        footer .ft-row > ul .contact-us ul li a span[class^="icon-"] {
          font-size: 16px;
          line-height: 100%;
          margin-right: 8px; }
        footer .ft-row > ul .contact-us ul li a:hover {
          text-decoration: none; }
          footer .ft-row > ul .contact-us ul li a:hover span {
            text-decoration: underline; }
          footer .ft-row > ul .contact-us ul li a:hover span[class^="icon-"] {
            text-decoration: none; }
    footer .ft-row .app-dl {
      float: right;
      overflow: hidden;
      width: 270px; }
      footer .ft-row .app-dl h3 {
        font-size: 22px;
        line-height: 25px;
        font-family: db_heaventmed, san-serif;
        letter-spacing: 0.5px;
        font-weight: normal;
        margin: 0 0 10px;
        display: inline-block; }
        footer .ft-row .app-dl h3 span {
          float: left; }
        footer .ft-row .app-dl h3 img {
          width: auto;
          padding: 0;
          float: left;
          margin: 3px 9px 0 9px;
          height: 16px; }
      footer .ft-row .app-dl p {
        float: left; }
        footer .ft-row .app-dl p > a {
          float: left;
          clear: both;
          margin: 0 0 10px; }
          footer .ft-row .app-dl p > a img {
            height: 36px;
            width: auto;
            display: block; }
        footer .ft-row .app-dl p > a:last-child {
          margin: 0; }

/* end footer*/
/*category header global*/
.main-hd {
  padding: 0 0 10px;
  font-weight: normal; }
  .main-hd > * {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: 0.5px;
    font-family: db_heaventmed, san-serif;
    display: inline-block;
    min-width: 100px;
    font-weight: normal; }

.sub-hd {
  margin: 0 0 5px 50px;
  color: #4A4A4A;
  font-size: 30px;
  font-weight: normal;
  font-family: db_heaventmed, san-serif; }
  .sub-hd > * {
    display: inline-block;
    color: #4A4A4A;
    line-height: 40px; }

.current .sub-hd > * {
  background: #4d2598;
  background: -moz-linear-gradient(left, #2723B5 0%, #2723B5 0%, #E43131 100%, #E43131 100%);
  background: -webkit-linear-gradient(left, #2723B5 0%, #2723B5 0%, #E43131 100%, #E43131 100%);
  background: linear-gradient(left, #2723B5 0%, #2723B5 0%, #E43131 100%, #E43131 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text; }

.row {
  width: 100%;
  position: relative;
  clear: both;
  margin: 0 0 25px; }

/*ads*/
.sp-banner {
  text-align: center;
  width: 100%;
  margin: 0 0 25px;
  overflow: hidden;
  min-height: 90px; }

/*player icon global*/
.thumb {
  position: relative; }

.thumb > a:after {
  position: absolute;
  left: 45%;
  top: 50%;
  width: 90px;
  height: 90px;
  margin: -45px 0 0 -25px;
  background: url(/static/images/player.svg) no-repeat;
  background-size: 100%;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 2; }

article.no-vdo .thumb > a:after {
  display: none; }

.item:hover .thumb > a:after, .item:hover .link a {
  opacity: 1 !important;
  transition: opacity 0.5s; }

.boomBox-sticky {
  position: sticky;
  position: -webkit-sticky;
  top: 90px; }

/*modal global*/
.modal-backdrop {
  opacity: 0;
  background: #191919;
  box-shadow: 0 2px 50px 0 rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  z-index: 8;
  display: none; }

.modal-overlay {
  position: fixed;
  width: 50%;
  height: 50%;
  bottom: -100vh;
  left: 50%; }

.modal-overlay.active {
  z-index: 9;
  left: 0;
  bottom: 0; }

.modal-overlay[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden; }

.modal-overlay[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  z-index: 30; }

.modal-overlay .content-area {
  margin: auto; }

.modal-overlay button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0; }

.modal-overlay .btn-close {
  width: 44px;
  height: 44px;
  position: absolute;
  right: 20px;
  top: 10px;
  text-align: center;
  color: #9b9b9b;
  z-index: 20;
  font-family: "db_heaventregular", san-serif;
  background: none;
  font-size: 16px;
  cursor: pointer; }

.modal-overlay .btn-close em {
  font-style: normal; }

/*modal search global*/
section.searchmodal {
  width: 80%;
  max-width: 820px;
  height: calc(100vh - 20px);
  left: 0;
  right: 0;
  top: 100vh;
  display: none;
  margin: 0;
  position: fixed;
  margin: 0 auto;
  padding: 88px 0 0;
  overflow: inherit;
  /*search trend suggest global*/ }
  section.searchmodal .modal-content {
    /*form:after { content:''; width: 20px; height: 20px; background: url("/static/images/icon/icon-search.svg") 0 0 no-repeat; position: absolute; right: 0; bottom: 12px; cursor: pointer;}*/ }
    section.searchmodal .modal-content > div {
      position: relative; }
    section.searchmodal .modal-content form {
      width: 100%;
      position: relative;
      background-color: #121416;
      padding: 11px 16px;
      box-sizing: border-box;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 4px;
      border: 1px solid #26282E; }
      section.searchmodal .modal-content form .icon-search {
        color: #7B7E85;
        font-size: 15px;
        padding: 2.5px;
        margin-right: 16px; }
        section.searchmodal .modal-content form .icon-search::before {
          content: "\E90E" !important; }
      section.searchmodal .modal-content form input[type="text"] {
        font-size: 20px;
        line-height: 120%;
        font-family: "db_heaventregular", san-serif;
        background-color: transparent;
        font-weight: 400;
        color: #F2F6FD;
        width: calc(100% - 54px);
        box-sizing: border-box;
        border-bottom: none; }
        section.searchmodal .modal-content form input[type="text"] input[type="text"]::-webkit-input-placeholder {
          color: #7B7E85; }
        section.searchmodal .modal-content form input[type="text"] input[type="text"]::-moz-placeholder {
          color: #7B7E85; }
        section.searchmodal .modal-content form input[type="text"] input[type="text"]:-ms-input-placeholder {
          color: #7B7E85; }
        section.searchmodal .modal-content form input[type="text"] input[type="text"]:-moz-placeholder {
          color: #7B7E85; }
      section.searchmodal .modal-content form input[type="text"]:focus, section.searchmodal .modal-content form input[type="text"]:invalid, section.searchmodal .modal-content form input[type="text"]:required {
        outline: none;
        border: none;
        box-shadow: none; }
      section.searchmodal .modal-content form button[type="button"] {
        background: none;
        border: 0;
        border-radius: 0; }
        section.searchmodal .modal-content form button[type="button"] .icon-search {
          margin: 0;
          color: #F2F6FD;
          font-size: 18px; }
        section.searchmodal .modal-content form button[type="button"] .icon-times-circle-filled {
          color: #7B7E85; }
        section.searchmodal .modal-content form button[type="button"] > span {
          display: block;
          font-size: 24px;
          line-height: 1;
          padding: 0; }
      section.searchmodal .modal-content form .btn-Search {
        display: flex;
        align-items: center; }
        section.searchmodal .modal-content form .btn-Search::before {
          content: '';
          width: 1px;
          height: 32px;
          background: #26282E;
          display: inline-block;
          margin: 0 19px 0 16px; }
        section.searchmodal .modal-content form .btn-Search .icon-search::before {
          content: "\E90E" !important; }
    section.searchmodal .modal-content .btn-close {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      right: calc(50% - 514px);
      top: 24px; }
      section.searchmodal .modal-content .btn-close .icon-x {
        display: block;
        font-size: 24px;
        line-height: 1; }
    section.searchmodal .modal-content .guide-search {
      width: 100%;
      position: absolute;
      top: 55px;
      padding: 0;
      z-index: 2;
      background: #121416;
      overflow-y: scroll;
      max-height: calc(100vh - 144px);
      border: 1px solid #26282E;
      border-top: none;
      box-sizing: border-box; }
      section.searchmodal .modal-content .guide-search li {
        display: flex;
        align-items: flex-start;
        color: #F2F6FD;
        font-family: "db_heaventregular", san-serif;
        font-size: 20px;
        line-height: 120%;
        padding: 12px 16px;
        cursor: pointer; }
        section.searchmodal .modal-content .guide-search li p {
          color: #F2F6FD;
          font-family: "db_heaventregular", san-serif;
          font-size: 20px;
          line-height: 120%;
          cursor: pointer; }
          section.searchmodal .modal-content .guide-search li p span {
            color: #5A8FF2; }
        section.searchmodal .modal-content .guide-search li .search-cat {
          text-align: right;
          color: #9b9b9b;
          flex: auto; }
          section.searchmodal .modal-content .guide-search li .search-cat p {
            text-align: right;
            color: #9b9b9b; }
        section.searchmodal .modal-content .guide-search li:hover {
          background-color: #092353; }
        section.searchmodal .modal-content .guide-search li > p:first-child {
          width: 528px;
          margin-right: 100px;
          display: block;
          display: -webkit-box;
          max-width: 528px;
          margin: 0 100px 0 0;
          font-size: 20px;
          line-height: 120%;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis; }
      section.searchmodal .modal-content .guide-search li:before {
        content: '';
        width: 15px;
        height: 15px;
        display: inline-block;
        margin: 2.5px 18.5px 2.5px 2.5px;
        background: url("/static/images/icon/icon-search.svg") 0 0 no-repeat;
        background-size: 100%;
        flex: 0 0 auto; }
      section.searchmodal .modal-content .guide-search li.search-history:before {
        background: url("/static/images/icon/icon-search-history.svg") 0 0 no-repeat; }
  section.searchmodal .search-trend {
    width: 100%;
    clear: both;
    position: relative;
    overflow: hidden; }
    section.searchmodal .search-trend h2 {
      color: #F2F6FD;
      font-family: "db_heaventregular", san-serif;
      font-weight: normal;
      font-size: 28px;
      line-height: 120%;
      width: 100%;
      padding: 32px 0 16px; }
    section.searchmodal .search-trend li {
      width: auto;
      float: left;
      margin: 0 12px 12px 0;
      border: 1px solid #26282E;
      border-radius: 18px;
      transition: all 0.3s;
      cursor: pointer; }
      section.searchmodal .search-trend li a {
        font-size: 20px;
        line-height: 120%;
        color: #F2F6FD;
        padding: 6px 20px;
        display: inline-block; }
    section.searchmodal .search-trend li:hover {
      border: 1px solid #193366;
      transition: all 0.3s;
      background: #092353; }
    section.searchmodal .search-trend li.selected {
      background: #092353;
      border: 1px solid #193366;
      transition: all 0.3s; }
    section.searchmodal .search-trend .btn-clear {
      position: absolute;
      right: 0;
      top: 36px;
      font-family: "db_heaventregular", san-serif;
      font-size: 22px;
      line-height: 120%;
      cursor: pointer; }
      section.searchmodal .search-trend .btn-clear a {
        color: #7B7E85; }
  section.searchmodal .nodata {
    width: 100%;
    clear: both;
    color: #fff;
    text-align: center;
    padding: 50px 0; }
    section.searchmodal .nodata p {
      color: #fff;
      font-size: 18px; }
  section.searchmodal .search-tab .toggle-navigation {
    width: 100%;
    display: flex;
    flex-wrap: nowrap; }
    section.searchmodal .search-tab .toggle-navigation li, section.searchmodal .search-tab .toggle-navigation .item {
      font-family: "db_heaventregular", san-serif;
      font-size: 20px;
      line-height: 120%;
      color: #7B7E85;
      float: left;
      margin: 0 8px 0 0;
      cursor: pointer;
      padding: 0 8px 10px;
      flex: 1 0 auto; }
    section.searchmodal .search-tab .toggle-navigation li.active, section.searchmodal .search-tab .toggle-navigation .item.active {
      color: #0F62FE;
      cursor: default;
      border-bottom: 2px solid #0F62FE; }
    section.searchmodal .search-tab .toggle-navigation li:hover, section.searchmodal .search-tab .toggle-navigation .item:hover {
      color: #F2F6FD; }
    section.searchmodal .search-tab .toggle-navigation li:last-child, section.searchmodal .search-tab .toggle-navigation .item:last-child {
      margin: 0; }
  section.searchmodal .search-tab .toggle-detail {
    clear: both;
    display: block;
    width: 100%;
    position: relative; }
    section.searchmodal .search-tab .toggle-detail > li {
      /*display: none;*/
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      visibility: hidden;
      opacity: 0;
      z-index: -10; }
      section.searchmodal .search-tab .toggle-detail > li .result {
        height: calc(100vh - 242px);
        /*.section-search:first-child { padding: 0;
						a.readMore { top: 43px;}
					}*/ }
        section.searchmodal .search-tab .toggle-detail > li .result .section-search:last-child {
          padding: 0 0 50px; }
        section.searchmodal .search-tab .toggle-detail > li .result .section-search:last-of-type {
          padding-bottom: 100px; }
        section.searchmodal .search-tab .toggle-detail > li .result .section-search {
          padding: 0;
          position: relative;
          display: inline-block;
          width: 100%;
          margin: 0 0 32px;
          /*.pagination { text-align: right; font-family: $font-first; font-size: 22px; line-height: 25px; letter-spacing: 0.5px; padding: 15px 0 50px; clear: both;
							a,span { color: #fff; padding: 8px 13px; display: inline-block;}
							a:hover,span.active { background: #0F62FE; border-radius: 3px;}
						}*/ }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search > h2 {
            font-family: "db_heaventregular", san-serif;
            font-weight: 400;
            font-size: 28px;
            line-height: 120%;
            color: #F2F6FD;
            margin: 0 0 16px; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul {
            padding: 0; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li {
              margin: 0; }
              section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article {
                padding: 0;
                margin: 0; }
                section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article h2 {
                  font-size: 20px;
                  line-height: 24px;
                  color: #fff;
                  font-weight: normal;
                  margin: 0 0 2px;
                  padding: 0;
                  font-family: "db_heaventmed", san-serif;
                  max-height: 48px;
                  overflow: hidden; }
                  section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article h2 span {
                    color: #5A8FF2; }
                  section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article h2 span.ico-showing {
                    color: #fff;
                    font-size: 12px;
                    padding: 4px 12px; }
                section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article p {
                  color: #7B7E85; }
                section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article .relate h4 {
                  font-family: "db_heaventmed", san-serif;
                  font-weight: normal;
                  font-size: 18px;
                  line-height: 22px;
                  color: #6F6F6F; }
                section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article .relate p {
                  font-family: "db_heaventmed", san-serif;
                  font-size: 21px;
                  line-height: 24px;
                  color: #fff;
                  letter-spacing: 0;
                  padding: 0;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis; }
                  section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article .relate p span {
                    color: #5A8FF2; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed article .thumb {
            background: url(/static/images/logo-ch3plus-gray.svg) center center no-repeat #8d8d8d;
            background-size: 50px;
            width: 100%;
            padding-top: 150%;
            position: relative;
            margin-bottom: 12px;
            border-radius: 4px;
            overflow: hidden; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed article .thumb > a {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.thumb-small article .thumb {
            padding-top: 100%; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li {
            width: calc(25% - 15px);
            display: none;
            max-width: 190px; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li article .thumb {
              padding-top: 56.25%; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-of-type(5n+1) {
            clear: none; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-of-type(4n+1) {
            clear: both; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-child(1),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-child(2),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-child(3),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-child(4) {
            display: inline-block; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li {
            display: none; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li:nth-child(1),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li:nth-child(2),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li:nth-child(3),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li:nth-child(4),
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li:nth-child(5) {
            display: inline-block; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed article .thumb > a {
            background: url(/static/images/logo-ch3plus-gray.svg) center center no-repeat #8d8d8d;
            background-size: 50px;
            width: 100%;
            padding-top: 56.24%;
            position: relative;
            margin-bottom: 10px;
            display: block;
            border-radius: 8px; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed article .thumb > a img {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search a.readMore {
            position: absolute;
            top: 4px;
            right: 5px;
            color: #7B7E85;
            font-size: 22px;
            line-height: 120%;
            font-family: "db_heaventregular", san-serif; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li {
            width: calc(25% - 15px);
            max-width: 100%; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li .detail {
              /*p.time-show:after { content: ''; display: inline-block; width: 1px; height: 15px; background: #8D8D8D; position: absolute; right: 0; top: 2px; bottom: 0;}*/ }
              section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li .detail p.time-show {
                float: left;
                position: relative;
                margin-right: 10px;
                padding-right: 10px;
                letter-spacing: 0; }
              section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li .detail p.viewed {
                float: left; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li:nth-of-type(5n+1) {
            clear: none; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li:nth-of-type(4n+1) {
            clear: both; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search p.icon-loading {
            clear: both;
            text-align: center;
            padding: 0 0 50px; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search p.icon-loading .loading-spinner {
              width: 50px;
              height: auto; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.news-search .thumb > a:after {
            display: none; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.news-search .detail h2 {
            color: #fff;
            font-size: 22px;
            line-height: 25px;
            font-family: db_heaventmed, san-serif;
            font-weight: normal;
            max-height: 47px;
            overflow: hidden; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .news-search .item .detail h2 span {
            color: #0076ff; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .owl-stage {
            padding-left: 0 !important; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .owl-dots {
            display: none; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .owl-nav .owl-next {
            width: 40px !important;
            background: url(/static/images/svod/svod-next-icon.png) no-repeat 15px center/auto 24px, rgba(22, 22, 22, 0.3) !important;
            top: -1px !important;
            bottom: -1px !important;
            right: -1px !important;
            height: initial !important;
            opacity: 1 !important;
            border: none;
            position: absolute;
            text-indent: -9999px; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .owl-nav .owl-prev {
            width: 40px !important;
            background: url(/static/images/svod/svod-next-icon.png) no-repeat 15px center/auto 24px, rgba(22, 22, 22, 0.3) !important;
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
            top: -1px !important;
            left: -1px !important;
            bottom: -1px !important;
            height: initial !important;
            opacity: 1 !important;
            border: none;
            position: absolute;
            text-indent: -9999px; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .item .thumb {
            position: relative;
            background: url(/static/images/logo-ch3plus-gray.svg) center center no-repeat #8d8d8d;
            padding-top: 100%;
            width: 100%;
            border-radius: 100%;
            border: 1.67882px solid #FFFFFF; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .item .thumb img {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              border-radius: 100%; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .item h3 {
            font-family: "db_heaventmed", san-serif;
            font-weight: normal;
            font-size: 21px;
            line-height: 24px;
            color: #ffffff;
            text-align: center;
            margin-top: 12px; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            gap: 20px; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist > article {
              width: calc(12.5% - 17.5px);
              max-width: 80px;
              float: left; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist > article:last-child {
              margin-right: 0; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist .item .thumb {
              position: relative;
              background: url(/static/images/logo-ch3plus-gray.svg) center center no-repeat #8d8d8d;
              padding-top: 100%;
              width: 100%;
              border-radius: 100%;
              border: 1.67882px solid #FFFFFF; }
              section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist .item .thumb img {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border-radius: 100%;
                width: 100%;
                height: auto; }
            section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist .item h3 {
              font-family: "db_heaventregular", san-serif;
              font-weight: normal;
              font-size: 20px;
              line-height: 120%;
              color: #F2F6FD;
              text-align: center;
              margin-top: 8px; }
              section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist .item h3 span {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                word-spacing: 80px; }
        section.searchmodal .search-tab .toggle-detail > li .result.show-full-list .section-search .item-feed.landscape li {
          display: inline-block !important; }
    section.searchmodal .search-tab .toggle-detail > li.active {
      visibility: visible;
      opacity: 1;
      z-index: 1; }
  section.searchmodal .MuiTabs-root {
    position: relative;
    margin: 32px 0;
    padding: 0;
    min-height: auto; }
    section.searchmodal .MuiTabs-root .MuiTab-root {
      font-family: "db_heaventregular", san-serif;
      font-weight: normal;
      font-size: 20px;
      line-height: 120%;
      max-width: auto;
      min-height: auto;
      letter-spacing: 0;
      padding: 0 8px 10px;
      width: auto;
      min-width: auto;
      margin-right: 8px;
      text-transform: none; }
      section.searchmodal .MuiTabs-root .MuiTab-root:last-child {
        margin-right: 0; }
    section.searchmodal .MuiTabs-root .MuiTab-textColorPrimary {
      color: #F2F6FD; }
    section.searchmodal .MuiTabs-root .MuiTabs-scrollButtonsDesktop, section.searchmodal .MuiTabs-root .MuiTabs-scrollButtons {
      color: #F2F6FD; }
    section.searchmodal .MuiTabs-root .MuiTabScrollButton-root {
      opacity: 1;
      z-index: 1;
      width: 24px;
      height: 24px;
      -webkit-backdrop-filter: blur(5px);
      -moz-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px); }
      section.searchmodal .MuiTabs-root .MuiTabScrollButton-root.Mui-disabled {
        opacity: 0;
        z-index: 0; }
      section.searchmodal .MuiTabs-root .MuiTabScrollButton-root:first-of-type {
        position: absolute;
        left: 0;
        top: 0;
        justify-content: left; }
      section.searchmodal .MuiTabs-root .MuiTabScrollButton-root:last-of-type {
        position: absolute;
        right: 0;
        top: 0;
        justify-content: right; }
    section.searchmodal .MuiTabs-root .MuiTabs-indicator {
      background-color: #0F62FE !important; }
    section.searchmodal .MuiTabs-root .MuiSvgIcon-fontSizeSmall {
      font-size: 24px; }
    @media only screen and (max-width: 659px) {
      section.searchmodal .MuiTabs-root .MuiTabs-scroller {
        margin: 0 16px; } }
    section.searchmodal .MuiTabs-root .MuiSwitch-thumb,
    section.searchmodal .MuiTabs-root .MuiTouchRipple-root {
      background-color: unset !important; }
  section.searchmodal .btn-closeText {
    cursor: pointer; }

/*modal share global*/
section.sharemodal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: -100vh;
  left: 0;
  transition: all 0.3s;
  overflow: hidden; }
  section.sharemodal .modal-content {
    padding: 0 50px;
    box-sizing: border-box;
    width: 580px;
    height: 465px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: #FAFAFA;
    margin: -232px 0 0 -290px;
    border-radius: 5px; }
    section.sharemodal .modal-content .main-hd {
      font-size: 48px;
      font-family: db_heaventmed, san-serif;
      line-height: 45px;
      font-weight: normal;
      text-align: center;
      padding: 50px 0;
      margin: 0; }
    section.sharemodal .modal-content p {
      color: #575757;
      font-size: 20px;
      font-family: db_heaventmed, san-serif; }
    section.sharemodal .modal-content .url {
      font-size: 16px;
      line-height: 20px;
      font-family: db_heaventlight, san-serif;
      color: #575757;
      border-bottom: 1px solid #efefef;
      padding: 20px 0;
      width: 100%;
      overflow: hidden; }
    section.sharemodal .modal-content .btn-close {
      text-indent: -9999px;
      background: url(/static/images/ico-nav.svg) no-repeat -314px -363px; }
    section.sharemodal .modal-content button.copy {
      padding: 10px 0;
      background: #0076FF;
      box-shadow: 0 0 41px 0 rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      display: block;
      position: absolute;
      bottom: 30px;
      left: 50%;
      width: 160px;
      margin: 0 0 0 -80px;
      font-family: db_heaventmed, san-serif;
      font-size: 20px;
      color: #fff;
      cursor: pointer; }

/*when modal-active*/
body[class*=modal] {
  height: 100vh;
  overflow: hidden !important; }
  body[class*=modal] .modal-backdrop {
    display: block;
    opacity: 1; }
  body[class*=modal] section.searchmodal.active {
    top: 0;
    display: block; }
  body[class*=modal] section.sharemodal.active {
    left: 0;
    top: 0; }

section.clearmodal {
  display: none; }
  section.clearmodal .modal-content {
    background: #121416;
    border-radius: 10px;
    padding: 12px;
    overflow: hidden;
    text-align: center;
    width: 100%;
    height: 100%;
    max-width: 480px;
    border: 1px solid #26282E;
    box-sizing: border-box; }
    section.clearmodal .modal-content h3 {
      font-family: "db_heaventmed", san-serif;
      font-size: 32px;
      line-height: 120%;
      font-weight: normal;
      text-align: center;
      color: #F2F6FD;
      margin: 28px 0 8px; }
    section.clearmodal .modal-content p {
      font-family: "db_heaventregular", san-serif;
      font-size: 22px;
      line-height: 120%;
      text-align: center;
      color: #F2F6FD;
      margin: 0 0 24px; }
    section.clearmodal .modal-content a {
      font-family: "db_heaventregular", san-serif;
      font-size: 22px;
      line-height: 120%;
      display: inline-block;
      width: 50%;
      max-width: 160px;
      border-radius: 4px;
      padding: 9px;
      border: 1px solid #55585E;
      box-sizing: border-box; }
    section.clearmodal .modal-content a.cf-clear {
      background: #0F62FE;
      color: #ffffff;
      text-align: center;
      border: 1px solid #0F62FE; }
    section.clearmodal .modal-content a:first-of-type {
      margin: 0 16px 0 0; }
    section.clearmodal .modal-content .icon-x {
      position: absolute;
      right: 12px;
      top: 12px;
      font-size: 16px;
      color: #F2F6FD;
      cursor: pointer; }

section.clearmodal.active {
  display: block;
  left: 50%;
  top: 50%;
  bottom: unset;
  width: 480px;
  height: 228px;
  margin: -114px 0 0 -240px; }

.modal-clearmodal .modal-backdrop {
  z-index: 30; }

.modal-clearmodal section.clearmodal.active {
  z-index: 31; }

body.modal-searchmodal > .modal-backdrop {
  display: none; }

body.modal-searchmodal .modal-backdrop {
  background: rgba(0, 4, 13, 0.85);
  mix-blend-mode: normal;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  -moz-backdrop-filter: blur(25px); }

/*search result page*/
.result {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  height: 87vh;
  /*scrollbar-color: #ffffff #000000;
  scrollbar-width: thin;*/
  -ms-overflow-style: none; }
  .result ul {
    padding: 30px 0 0;
    width: 100%;
    padding-right: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap; }
  .result li {
    width: calc(16.67% - 17px);
    max-width: 120px; }
    .result li article {
      margin: 0 10px 0 0;
      padding: 0 0 25px; }
    .result li p {
      padding: 0 0 5px;
      font-family: db_heaventlight, san-serif;
      font-size: 16px;
      line-height: 20px;
      letter-spacing: 1px; }
    .result li h2 {
      padding: 0 0 10px;
      font-weight: normal;
      font-family: db_heaventmed, san-serif;
      font-size: 22px;
      line-height: 25px;
      letter-spacing: 0.5px; }
    .result li a {
      color: #F2F6FD; }
    .result li img {
      display: block;
      width: 100%;
      margin: 0;
      border-radius: 4px; }
    .result li .item .thumb > a:after {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      top: 0;
      left: 0;
      margin: 0;
      background-size: 30%;
      background-position: center;
      border-radius: 5px; }
    .result li .item .detail p.type {
      font-family: "db_heaventregular", san-serif;
      font-size: 16px;
      line-height: 120%;
      color: #7B7E85;
      letter-spacing: 0; }
      @media only screen and (max-width: 659px) {
        .result li .item .detail p.type {
          font-size: 14px; } }
  .result .loading {
    padding: 50px 0 0; }
    .result .loading * {
      display: block;
      margin: 0 auto;
      text-align: center;
      font-size: 16px;
      color: #fff;
      font-family: db_heaventlight, san-serif;
      letter-spacing: 1px; }
  .result .tag {
    margin: 25px 0 0;
    overflow: hidden;
    position: relative; }
    .result .tag h3 {
      font-family: db_heaventmed, san-serif;
      font-size: 36px;
      line-height: 40px;
      font-weight: normal;
      letter-spacing: 0.5px;
      color: #fff;
      margin: 0 0 10px;
      font-weight: normal; }
    .result .tag p a {
      display: inline-block;
      padding: 6px 10px;
      color: #fff;
      border: 1px solid #fff;
      border-radius: 3px;
      margin: 0 15px 15px 0;
      font-size: 20px;
      font-family: db_heaventbold, san-serif;
      letter-spacing: 0.5px; }
    .result .tag p a:last-child {
      margin-right: 0; }
    .result .tag p a:hover {
      background: rgba(255, 255, 255, 0.2); }
    .result .tag a.clearmodal {
      font-size: 20px;
      line-height: 24px;
      font-family: db_heaventbold, san-serif;
      letter-spacing: 0.5px;
      color: #fff;
      position: absolute;
      right: 0;
      top: 0; }

.result::-webkit-scrollbar {
  width: 2px;
  height: 2px;
  display: none; }

.result::-webkit-scrollbar-button {
  width: 0px;
  height: 0px; }

.result::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border: 0px none #ffffff;
  border-radius: 50px; }

.result::-webkit-scrollbar-thumb:hover {
  background: #ffffff; }

.result::-webkit-scrollbar-thumb:active {
  background: #000000; }

.result::-webkit-scrollbar-track {
  background: #666666;
  border: 0px none #ffffff;
  border-radius: 50px; }

.result::-webkit-scrollbar-track:hover {
  background: #666666; }

.result::-webkit-scrollbar-track:active {
  background: #333333; }

.result::-webkit-scrollbar-corner {
  background: transparent; }

.search-not-found div:first-child {
  padding: 64px 0 24px;
  text-align: center; }
  .search-not-found div:first-child img {
    width: 48px; }
  .search-not-found div:first-child span.icon-search {
    font-size: 48px;
    line-height: 100%;
    margin: 0 0 16px;
    color: #7B7E85;
    display: inline-block; }
  .search-not-found div:first-child h3 {
    font-family: "db_heaventregular", san-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 120%;
    color: #F2F6FD;
    margin: 0; }
  .search-not-found div:first-child p {
    font-family: "db_heaventmed", san-serif;
    font-size: 20px;
    line-height: 28px;
    color: #fff; }

.search-not-found .search-trend > ul {
  padding: 0;
  gap: 12px; }
  .search-not-found .search-trend > ul > li {
    display: inline-block;
    float: none;
    max-width: inherit;
    margin: 0; }
    .search-not-found .search-trend > ul > li:nth-of-type(5n+1) {
      clear: none; }

.footer-bar {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  z-index: 3;
  background: rgba(0, 0, 0, 0.85);
  box-shadow: #1f1f1f 0px 0px 8px;
  display: block; }
  .footer-bar p {
    text-align: center;
    padding: 10px;
    color: #b7b7b6;
    letter-spacing: 1px;
    font-size: 16px;
    line-height: 20px; }
    .footer-bar p a {
      text-decoration: underline;
      color: #faa935; }
    .footer-bar p a:last-child {
      text-decoration: none;
      background: #0F62FE;
      padding: 6px 25px;
      border-radius: 4px;
      color: #fff;
      margin: 0 0 0 10px;
      font-family: db_heaventmed, san-serif;
      letter-spacing: 0.5px;
      font-size: 20px;
      display: inline-block; }

/*hack for IE*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* IE10+ specific styles go here */
  img {
    border: none; }
  *[class*="-hd"] > * {
    color: #4d2598;
    background: transparent !important; } }

/*modernizr*/
.no-backgroundcliptext *[class*="-hd"] > *, .no-backgroundcliptext h2.highlight {
  color: #4d2598 !important;
  background: transparent !important; }

/*smart banner*/
.smartbanner-show section.searchmodal .search-tab .toggle-detail > li .result {
  height: calc(80vh - 80px); }

.smartbanner-show body[class*=modal] section.searchmodal.active {
  top: 80px; }

.smartbanner-show .svod-sidebar .svod-sidebar-content {
  top: 80px;
  height: calc(100vh - 120px) !important; }

.smartbanner-show .wrapall > div:first-child {
  padding-top: 80px !important; }

.smartbanner-show .child-nav-container {
  margin-top: 80px; }

.smartbanner-show .artist-list-page .container {
  padding-top: 50px; }

/*extra large screen*/
@media only screen and (min-width: 1365px) {
  .result ul li:nth-of-type(5n+1) {
    clear: both; }
  .result ul li:nth-of-type(5n) {
    margin: 0; }
  .result ul.item-feed.landscape li:nth-of-type(5n+1) {
    clear: none; } }

@media only screen and (min-width: 1024px) and (max-width: 1260px) {
  footer .ft-row > ul > li {
    margin: 0 4% 0 0; } }

@media screen and (min-width: 1200px) {
  .result .section-search .owl-loaded.owl-carousel.news-search .owl-nav > * {
    background-position: 0 42%; }
  .result .section-search .owl-loaded.owl-carousel.news-search .owl-nav .owl-prev {
    background-position: 10px 42%; } }

@media only screen and (max-width: 1199px) and (min-width: 1024px) {
  .result .section-search .owl-loaded.owl-carousel.news-search .owl-nav > * {
    background-position: 0 32%; }
  .result .section-search .owl-loaded.owl-carousel.news-search .owl-nav .owl-prev {
    background-position: 10px 32%; } }

@media only screen and (min-width: 1024px) {
  .result .section-search .owl-loaded.owl-carousel.news-search .owl-nav .owl-prev {
    width: 40px !important;
    background: url(/static/images/svod/svod-next-icon.png) no-repeat 15px 43%, rgba(22, 22, 22, 0.3) !important;
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    top: -1px !important;
    left: -1px !important;
    bottom: -1px !important;
    height: initial !important;
    opacity: 1 !important;
    border: none;
    position: absolute;
    text-indent: -9999px; }
  .result .section-search .owl-loaded.owl-carousel.news-search .owl-nav .owl-next {
    width: 40px !important;
    background: url(/static/images/svod/svod-next-icon.png) no-repeat 15px 43%, rgba(22, 22, 22, 0.3) !important;
    top: -1px !important;
    bottom: -1px !important;
    right: -1px !important;
    height: initial !important;
    opacity: 1 !important;
    border: none;
    position: absolute;
    text-indent: -9999px; }
  footer .ft-row > ul > li ul li.show-mobile {
    display: none; } }

/*mobile screen */
@media only screen and (max-width: 1023px) {
  body .sp-banner {
    min-height: unset; }
  body .sp-banner img {
    width: 100%; }
  body .sp-banner > div > div {
    margin: 0 auto; }
  #truehits_div {
    position: absolute;
    bottom: 37px;
    right: 4%;
    left: auto; }
  .ico-teaser, .ico-hit, .ico-showing {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 2px; }
  .view-all {
    right: 0;
    top: 10px; }
  body[class*=modal] section.searchmodal .thumb > a:after, body[class*=modal] section.searchmodal .thumb:hover a:after, body[class*=modal] section.searchmodal .link a {
    opacity: 1 !important;
    background-color: transparent; }
  body[class*=modal] section.searchmodal .search-trend {
    width: calc(100% - 32px);
    margin: 0 auto; }
    body[class*=modal] section.searchmodal .search-trend h2 {
      width: 100%;
      padding: 32px 0 12px;
      font-size: 22px;
      text-align: left; }
    body[class*=modal] section.searchmodal .search-trend .btn-clear {
      top: 37px;
      font-size: 18px; }
  body[class*=modal] section.searchmodal .btn-close {
    width: auto;
    right: 24px; }
  /*modernizr*/
  .no-picture .hero-carousel .owl-item img {
    width: 200%; }
  #wrapper .container {
    margin: 0 15px; }
  /*footer mobile*/
  footer .ft-row > p {
    text-align: center; }
  footer .ft-row p {
    padding: 0 3% 3px;
    line-height: 25px; }
  footer .ft-row .footer-secondary p, footer .ft-row .footer-secondary ul {
    width: 100%;
    text-align: left;
    padding: 0 0 10px; }
  footer .ft-row .footer-secondary ul li {
    display: block;
    padding: 10px 0; }
  footer .ft-row .footer-secondary:before {
    width: 88%;
    left: 2%; }
  footer .ft-row p.qr-dl {
    display: none; }
  /*share modal mobile*/
  section.sharemodal, section.sharemodal.active {
    display: block; }
    section.sharemodal .modal-content, section.sharemodal.active .modal-content {
      width: 80%;
      padding: 0 30px;
      height: 400px;
      margin: -200px 0 0 -40%; }
      section.sharemodal .modal-content .main-hd, section.sharemodal.active .modal-content .main-hd {
        font-size: 36px; }
  /*search result mobile*/
  .result ul {
    padding: 20px 0 40px;
    overflow: hidden; }
    .result ul li {
      width: 50%;
      overflow: hidden; }
      .result ul li h2 {
        font-size: 18px;
        font-weight: normal;
        line-height: 22px; }
    .result ul li:nth-of-type(5n+1) {
      clear: none; }
    .result ul li:nth-of-type(2n+1) {
      clear: both; }
    .result ul li:nth-of-type(2n) article {
      margin: 0 0 0 10px;
      float: right; }
  /*back to top*/
  #button {
    display: inline-block;
    background-color: #21297e;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 3px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 3; }
  #button::after {
    background: url("/static/images/BACKTOTOP.svg") 0 0 no-repeat;
    width: 30px;
    height: 20px;
    content: '';
    display: block;
    margin: 15px auto;
    background-size: 100%; }
  #button:hover {
    cursor: pointer;
    background-color: #21297ecc; }
  #button:active {
    background-color: #21297e; }
  #button.show {
    opacity: 1;
    visibility: visible; }
  .search-not-found div:first-child {
    width: 100%;
    margin: 0 auto;
    padding: 60px 0 20px; }
  .search-not-found .search-trend {
    text-align: center; }
    .search-not-found .search-trend ul {
      padding: 0; }
      .search-not-found .search-trend ul li {
        display: inline-block;
        clear: none; }
  section.searchmodal .search-tab .toggle-detail > li .result .section-search {
    width: 100%; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search a.readMore {
      right: 0;
      top: 4px;
      font-size: 18px; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search > h2 {
      font-size: 21px;
      line-height: 24px;
      margin: 0 0 8px; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed {
      padding: 0 0 10px; }
      section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li {
        width: 100%;
        clear: both; }
        section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li article.item {
          margin: 0; }
          section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li article.item .thumb {
            width: 190px;
            height: auto;
            float: left;
            padding-right: 10px; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article {
      float: none; }
      section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article .relate h4 {
        font-size: 16px;
        line-height: 20px; }
      section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li article .relate p {
        font-size: 18px;
        line-height: 22px; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search ul li:nth-of-type(2n) article {
      float: none; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.landscape li:nth-of-type(2n+1) {
      clear: both; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.item-feed.show-5-4 li:nth-child(5) {
      display: none; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search .owl-carousel.artist .item h3 {
      font-size: 18px;
      line-height: 22px;
      margin-top: 4px; }
  section.searchmodal .modal-content .guide-search li p {
    line-height: 32px;
    letter-spacing: 0.36px; }
  section.searchmodal .modal-content .guide-search li .search-cat {
    flex: 0 0 23%;
    padding: 0; }
  section.searchmodal .modal-content .guide-search li p:first-of-type {
    margin-right: 5%;
    width: auto;
    flex: 0 0 60%; }
  section.searchmodal .modal-content .guide-search li:before {
    margin-top: 8px; }
  section.searchmodal .modal-content form input[type="text"] {
    width: calc(100% - 54px); } }

/*0-659px screen*/
@media only screen and (max-width: 659px) {
  section.searchmodal {
    width: 100%;
    padding-top: 72px; }
    section.searchmodal .btn-close {
      right: 24px;
      top: 24px;
      height: 24px !important; }
  body section.searchmodal .modal-content form input[type="text"] {
    font-size: 20px;
    line-height: 1;
    max-width: calc(100% - 54px); }
  .view-all {
    right: 0; }
  section.clearmodal.active {
    width: calc(100% - 32px);
    left: 16px;
    right: 16px;
    top: calc(50% - 98px);
    margin: auto;
    height: 196px; }
  section.clearmodal .modal-content {
    padding: 0; }
    section.clearmodal .modal-content h3 {
      font-size: 28px;
      margin: 40px 0 8px; }
    section.clearmodal .modal-content p {
      font-size: 18px; }
    section.clearmodal .modal-content > a {
      max-width: 131px;
      font-size: 18px; }
  body section.searchmodal .btn-close {
    width: auto;
    right: 16px; }
  body section.searchmodal .modal-content form {
    padding: 12px 19px 12px 12px;
    width: calc(100% - 32px);
    margin: 0 auto; }
    body section.searchmodal .modal-content form .icon-search {
      margin-right: 8px; }
    body section.searchmodal .modal-content form input[type="text"] {
      max-width: calc(100% - 54px);
      width: calc(100% - 54px); }
  body section.searchmodal .modal-content .guide-search {
    width: calc(100% - 32px);
    margin: 0 auto;
    left: 16px;
    right: 16px; }
  section.searchmodal .search-tab .toggle-detail > li .result .section-search {
    width: calc(100% - 32px);
    margin: 0 auto 32px;
    display: block;
    clear: both;
    overflow: hidden; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search h2 {
      font-size: 22px;
      line-height: 120%; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search a.readMore {
      right: 0;
      top: 4px;
      font-size: 18px; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist article.item {
      width: calc(25% - 16px);
      max-width: fi;
      gap: 16px;
      display: none; }
      section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist article.item h3 {
        font-size: 18px; }
      section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist article.item:nth-child(1), section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist article.item:nth-child(2), section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist article.item:nth-child(3), section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist article.item:nth-child(4) {
        display: inline-block; }
    section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist.full-tab article.item {
      display: inline-block !important; }
  section.searchmodal .search-tab .toggle-detail > li .result ul {
    gap: 16px 8px; }
    section.searchmodal .search-tab .toggle-detail > li .result ul li {
      width: calc(33% - 5.33px);
      max-width: 109px; }
  section.searchmodal .search-tab .toggle-detail > li .result .item-feed.landscape li {
    width: calc(50% - 4px) !important; } }

/* footer */
@media only screen and (max-width: 1024px) {
  body .wrapall > div.footer-bar {
    padding: 0; }
    body .wrapall > div.footer-bar p {
      text-align: left; }
      body .wrapall > div.footer-bar p a:last-child {
        /*display: block; max-width: calc(94px - 50px);*/
        display: table;
        clear: both;
        margin: 10px auto;
        max-width: unset; } }

@media only screen and (max-width: 1023px) {
  footer .ft-row > p {
    display: none; }
  footer .ft-row > a {
    text-align: center; }
  footer .ft-row > ul {
    width: 100%; }
    footer .ft-row > ul > li {
      display: block; }
    footer .ft-row > ul li.show {
      display: inline-block;
      float: none;
      text-align: center;
      margin: 0;
      width: 100%; }
      footer .ft-row > ul li.show h3 {
        display: none; }
      footer .ft-row > ul li.show ul li {
        display: none; }
      footer .ft-row > ul li.show ul li.show-list {
        display: inline-block;
        margin: 0 30px 0 0; }
  footer .ft-row .app-dl {
    display: block;
    float: none;
    width: 100%;
    text-align: center;
    margin: 0 0 15px; }
    footer .ft-row .app-dl > h3 {
      margin: 0; }
    footer .ft-row .app-dl > p {
      overflow: hidden;
      float: none; }
      footer .ft-row .app-dl > p > a {
        float: none;
        margin-right: 5px; }
        footer .ft-row .app-dl > p > a img {
          display: inline-block; }
      footer .ft-row .app-dl > p > a:last-child {
        margin-right: 0; }
  footer .ft-row .footer-secondary p {
    text-align: center;
    padding: 0; } }

@media only screen and (max-width: 767px) {
  footer {
    padding: 0 3% 10px; }
    footer .ft-row > ul {
      width: 100%; }
      footer .ft-row > ul li.show ul li.show-list {
        margin: 0 20px 0 0; }
      footer .ft-row > ul li {
        width: 100%;
        margin: 0;
        padding: 10px 0 5px;
        border-bottom: 0.6px solid rgba(216, 216, 216, 0.4); }
        footer .ft-row > ul li h3 {
          font-size: 20px;
          margin: 0 0 5px; }
          footer .ft-row > ul li h3 img {
            float: right;
            height: 7px;
            margin: 9px 0 0px;
            display: inline-block;
            transition: all 0.25s ease-in; }
        footer .ft-row > ul li ul {
          width: 90%;
          margin: 0 auto;
          max-height: 0;
          transition: max-height 0.15s ease-out;
          overflow: hidden; }
          footer .ft-row > ul li ul li {
            margin: 0; }
          footer .ft-row > ul li ul li:last-child {
            border: none; }
      footer .ft-row > ul li.active ul {
        max-height: 1000px;
        transition: max-height 0.25s ease-in;
        margin-top: 0; }
      footer .ft-row > ul li.active h3 img {
        transform: rotate(-180deg);
        transition: all 0.25s ease-in; }
      footer .ft-row > ul li:first-child {
        padding-top: 0; }
      footer .ft-row > ul li.contact-us {
        border: none;
        display: flex;
        align-items: center; }
        footer .ft-row > ul li.contact-us h3 {
          float: left;
          margin: 0 20px 0 0;
          font-size: 16px; }
        footer .ft-row > ul li.contact-us ul {
          display: block;
          max-height: inherit;
          width: auto;
          margin: 0;
          padding: 0; }
          footer .ft-row > ul li.contact-us ul li {
            border: none;
            float: left;
            width: auto;
            clear: none;
            padding: 0;
            margin: 0 20px 0 0; }
            footer .ft-row > ul li.contact-us ul li a span:first-child {
              min-width: auto; }
            footer .ft-row > ul li.contact-us ul li a span:last-child {
              display: none; }
            footer .ft-row > ul li.contact-us ul li a span[class^="icon-"] {
              font-size: 20px;
              margin: 0; }
          footer .ft-row > ul li.contact-us ul li:last-child {
            margin: 0; }
    footer .ft-row .app-dl > p > a {
      display: block;
      margin: 0; }
      footer .ft-row .app-dl > p > a img {
        display: inline-block; }
  section.searchmodal .search-tab .toggle-detail > li .result .section-search ul.news-feed li article.item .thumb {
    width: 42%; } }

@media only screen and (max-width: 768px) {
  section.searchmodal .search-tab .tab-scroll {
    overflow-x: scroll;
    -ms-overflow-style: none; }
  section.searchmodal .search-tab .tab-scroll::-webkit-scrollbar {
    display: none; } }

.scroll-style-3::-webkit-scrollbar-track {
  -webkit-box-shadow: unset;
  border-radius: 10px;
  background-color: #F2F6FD; }

.scroll-style-3::-webkit-scrollbar {
  width: 5px;
  background-color: #F2F6FD; }

.scroll-style-3::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: unset;
  background-color: #00040D; }

.scroll-style-3 {
  scrollbar-color: #26282E #121416;
  scrollbar-width: thin; }

.scroll-style-3::-webkit-scrollbar {
  width: 8px;
  height: 80px; }

.scroll-style-3::-webkit-scrollbar-button {
  width: 0px;
  height: 0px; }

.scroll-style-3::-webkit-scrollbar-thumb {
  background: #26282E;
  border-radius: 100px; }

.scroll-style-3::-webkit-scrollbar-thumb:hover {
  background: #26282E; }

.scroll-style-3::-webkit-scrollbar-thumb:active {
  background: #26282E; }

.scroll-style-3::-webkit-scrollbar-track {
  background: #121416;
  border-radius: 0; }

.scroll-style-3::-webkit-scrollbar-track:hover {
  background: #121416; }

.scroll-style-3::-webkit-scrollbar-track:active {
  background: #121416; }

.scroll-style-3::-webkit-scrollbar-corner {
  background: transparent; }

/*font*/
/*db_heavent*/
@font-face {
  font-family: 'db_heavent';
  src: url("/static/font/db_heavent_blk_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: 800;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent';
  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: 700;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent';
  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: 500;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent';
  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: 400, normal;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent';
  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: 300;
  font-style: normal; }

/*db_heavent_condensed*/
@font-face {
  font-family: 'db_heavent';
  src: url("/static/font/db_heavent_blk_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: 800;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent_cond';
  src: url("/static/font/db_heavent_cond_bd_v3.2.1.ttf") format("truetype");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent_cond';
  src: url("/static/font/db_heavent_cond_med_v3.2.1.ttf") format("truetype");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent_cond';
  src: url("/static/font/db_heavent_cond_v3.2.1.ttf") format("truetype");
  font-weight: 400, normal;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent_cond';
  src: url("/static/font/db_heavent_cond_li_v3.2.1.ttf") format("truetype");
  font-weight: 300;
  font-style: normal; }

.svod-modal.ui.modal {
  position: relative;
  background: #121416;
  border: 1px solid #26282E;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 40px 12px 40px;
  text-align: center;
  font-family: "db_heavent", san-serif; }
  .svod-modal.ui.modal > span {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 16px;
    cursor: pointer;
    color: #B9BBC2; }
  .svod-modal.ui.modal h3 {
    font-family: "db_heavent", san-serif;
    font-weight: 500;
    color: #F4F4F4;
    margin-bottom: 6px;
    font-size: 33px;
    white-space: pre-wrap; }
  .svod-modal.ui.modal p {
    color: #F4F4F4;
    font-size: 20px;
    margin-bottom: 24px;
    white-space: pre-wrap; }
    .svod-modal.ui.modal p.button-wrapper {
      margin-top: 50px; }
  .svod-modal.ui.modal button, .svod-modal.ui.modal .agree {
    font-family: 'db_heaventregular';
    font-size: 22px;
    background-color: #0F62FE;
    border-radius: 4px;
    color: #F2F6FD;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
    padding: 9px 32px;
    cursor: pointer;
    width: 200px;
    height: 44px;
    font-size: 22px;
    font-weight: 400;
    font-style: normal; }
    .svod-modal.ui.modal button:disabled, .svod-modal.ui.modal .agree:disabled {
      background: #C6C6C6;
      color: #8D8D8D; }
  .svod-modal.ui.modal .content {
    background: transparent;
    width: auto;
    padding: 0; }
  .svod-modal.ui.modal .modal-logo {
    margin-top: -150px;
    margin-bottom: 32px;
    width: 232px;
    height: 151px; }
  .svod-modal.ui.modal .agree {
    font-size: 22px;
    font-family: 'db_heaventbold',sans-serif; }
  .svod-modal.ui.modal .confirm {
    display: flex; }
    .svod-modal.ui.modal .confirm button {
      width: 100%;
      padding: 0 !important;
      font-size: 22px;
      line-height: 1.2;
      letter-spacing: 0.2px;
      height: 44px; }
      .svod-modal.ui.modal .confirm button:first-child {
        margin-right: 16px;
        display: inline-block;
        font-family: 'db_heaventregular';
        background-color: transparent;
        border: 1px solid #FFFFFF;
        border-radius: 4px;
        padding: 5px 32px;
        color: #F4F4F4;
        cursor: pointer;
        font-family: "db_heavent", san-serif;
        color: #F2F6FD;
        border: 1px solid #55585E;
        font-weight: 500; }
        @media only screen and (max-width: 767px) {
          .svod-modal.ui.modal .confirm button:first-child {
            padding: 9px 55px; } }
      .svod-modal.ui.modal .confirm button .icon-loading .loading-spinner {
        width: 25px !important;
        margin: 0 !important; }
  .svod-modal.ui.modal.bottom-label {
    padding: 65px 40px; }
    .svod-modal.ui.modal.bottom-label .modal-bottom-label {
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 35px;
      background-color: #262626;
      border-radius: 0 0 9px 9px;
      font-size: 16px; }
  .svod-modal.ui.modal.campaign-success-modal {
    padding: 40px 0 40px 0 !important; }
    .svod-modal.ui.modal.campaign-success-modal > button {
      width: 160px;
      margin-top: 8px; }
    .svod-modal.ui.modal.campaign-success-modal .campaign-modal-prefix {
      margin-bottom: 16px; }
      .svod-modal.ui.modal.campaign-success-modal .campaign-modal-prefix .campaign-icon-wrapper {
        width: 54px;
        height: 54px;
        background: transparent;
        border-radius: 100%;
        overflow: hidden;
        border: 1px solid #55585E;
        display: inline-flex;
        align-items: center;
        justify-content: center; }

@media only screen and (max-width: 460px) {
  .svod-modal.ui.modal h3 {
    font-size: 28px; }
  .svod-modal.ui.modal p {
    font-size: 18px; }
  .svod-modal.ui.modal button, .svod-modal.ui.modal .agree {
    height: 36px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 18px; }
  .svod-modal.ui.modal .agree {
    padding: 9px 0px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%; }
  .svod-modal.ui.modal .confirm button {
    font-size: 18px;
    height: 36px; }
    .svod-modal.ui.modal .confirm button:first-child {
      font-weight: 400; } }

/*no ads support SVOD*/
.music-hp .wrapall.noAds #wrapper {
  padding-top: 123px; }

.music-hp .wrapall.noAds .sp-banner.first {
  display: none; }

.category .wrapall.noAds .sp-banner.first {
  min-height: 0; }

.category.sub-cat .wrapall.noAds #wrapper {
  padding-top: 148px; }

.category.sub-cat .wrapall.noAds .sp-banner.first {
  display: none; }

.lakorn .wrapall.noAds .sp-banner.first {
  display: none; }

.news-hp .wrapall.noAds .sp-banner.first {
  display: none; }

.news-hp .wrapall.noAds .boomBox {
  display: none; }

.news-hp .wrapall.noAds > div:first-child {
  padding-top: 148px; }

.news-category .wrapall.noAds .sp-banner.first {
  display: none; }

.news-category .wrapall.noAds .wrap-col {
  padding-top: 148px; }
  .news-category .wrapall.noAds .wrap-col .col-left {
    width: 100%; }
    .news-category .wrapall.noAds .wrap-col .col-left #_popIn_recommend {
      display: none; }
  .news-category .wrapall.noAds .wrap-col .col-right {
    display: none; }
    .news-category .wrapall.noAds .wrap-col .col-right .boomBox {
      display: none; }

.news-category .articleCat-list article > a {
  width: 25%; }

.news-video .wrapall.noAds .sp-banner.first {
  display: none; }

.news-video .wrapall.noAds > div:first-child {
  padding-top: 80px; }

.news-video .wrapall.noAds .col-news-4 {
  display: none; }

.news-video .wrapall.noAds .col-news-3 {
  flex: 0 0 100%; }

.news-video .wrapall.noAds .article-news .boomBox-inread {
  display: none; }

.news-video .wrapall.noAds #_popIn_recommend {
  display: none; }

.schedule .wrapall.noAds .sp-banner.first {
  display: none; }

.schedule .wrapall.noAds .boomBox {
  display: none; }

.event-live .wrapall.noAds .sp-banner.first {
  display: none; }

.event-live .wrapall.noAds .sp-banner-ads-live {
  display: none; }

.event-live .wrapall.noAds .container-content .d-flex .content-3 .wrap-content-3 {
  width: 100%; }

.video-content-now .wrapall.noAds .sp-banner.first {
  display: none; }

.video-content-now .wrapall.noAds .col-right-watching.col-video-4 {
  display: none; }

.homepage .sp-banner.first {
  position: relative;
  margin: 24px 0; }

.homepage .wrapall.noAds .sp-banner.first {
  display: none; }

.fandom .sp-banner.first {
  position: relative;
  margin: 24px 0;
  padding: 0; }

.fandom .wrapall.noAds .sp-banner.first {
  display: none; }

.fandom-ranking .fandom-ranking-page {
  padding-top: 0; }

.fandom-ranking .sp-banner.first {
  margin-top: 104px; }

.fandom-ranking .wrapall.noAds .sp-banner.first {
  display: none; }

.fandom-ranking .wrapall.noAds .fandom-ranking-page {
  padding-top: 85px; }

.fandom-ranking.w-detect .sp-banner.first {
  margin-top: 164px; }

.artist-detail .artist-sp-banner {
  margin-top: 104px; }
  .artist-detail .artist-sp-banner > h2 {
    font-family: 'db_heaventbold', san-serif;
    color: #fff;
    text-align: center;
    font-size: 60px;
    line-height: 64px; }
  .artist-detail .artist-sp-banner .sp-banner.first {
    margin: 24px 0; }

.artist-detail .svod-artist-detail-page {
  padding-top: 0; }

.artist-detail .wrapall.noAds .artist-sp-banner {
  display: none; }

.artist-detail .wrapall.noAds .svod-artist-detail-page {
  padding-top: 64px; }

.artist-detail.w-detect .artist-sp-banner {
  margin-top: 184px; }

.article .wrapall.noAds .sp-banner.first {
  display: none; }

.article .wrapall.noAds .wrap-col {
  /*.col-left { max-width: 765px; margin: 0 auto;} */ }
  .article .wrapall.noAds .wrap-col .col-right {
    display: none; }
    .article .wrapall.noAds .wrap-col .col-right .boomBox {
      display: none; }

.article .wrapall.noAds .boomBox-inread {
  display: none; }

@media only screen and (min-width: 1025px) {
  .smartbanner-show .music-hp header.noAds {
    margin-top: 80px; }
  .smartbanner-show .music-hp .wrapall.noAds #wrapper {
    padding-top: 204px !important; }
  .smartbanner-show .category .wrapall.noAds > #wrapper {
    padding-top: 228px !important; }
  .smartbanner-show .category.sub-cat header.noAds {
    margin-top: 80px; }
  .smartbanner-show .category.sub-cat .wrapall.noAds > #wrapper {
    padding-top: 228px !important; }
  .smartbanner-show .news-hp.sub-cat .wrapall.noAds > div:first-child {
    padding-top: 228px !important; }
  .smartbanner-show .news-category .wrapall.noAds .wrap-col {
    padding-top: 228px; }
  .smartbanner-show .news-video .wrapall.noAds > div:first-child {
    padding-top: 160px !important; }
  .smartbanner-show .fandom header {
    margin-top: 80px; }
  .smartbanner-show .fandom .banner-container {
    margin-top: 160px; }
  .smartbanner-show .fandom-ranking header {
    top: 80px; }
  .smartbanner-show .fandom-ranking .fandom-ranking-page {
    padding-top: 0; }
  .smartbanner-show .fandom-ranking .sp-banner.first {
    margin-top: 184px; }
  .smartbanner-show .fandom-ranking .wrapall.noAds .fandom-ranking-page {
    padding-top: 160px; }
  .smartbanner-show .fandom-ranking.w-detect header {
    top: 140px; }
  .smartbanner-show .fandom-ranking.w-detect .fandom-ranking-page {
    padding-top: 0; }
  .smartbanner-show .fandom-ranking.w-detect .sp-banner.first {
    margin-top: 224px; }
  .smartbanner-show .artist-detail header {
    top: 80px; }
  .smartbanner-show .artist-detail .wrapall.noAds .svod-artist-detail-page {
    padding-top: 160px; }
  .smartbanner-show .artist-detail.w-detect header {
    top: 140px; }
  .smartbanner-show .article .wrapall > div:first-child {
    padding-top: 184px !important; }
  .smartbanner-show .article header {
    margin-top: 80px; }
  .smartbanner-show .article .boomBox {
    top: 150px; } }

@media only screen and (min-width: 1024px) and (max-width: 1024px) {
  .event-live .wrapall.noAds .container-content .d-flex .content-3 .wrap-content-3 {
    width: 100%; } }

@media only screen and (max-width: 1024px) {
  .music-hp .wrapall.noAds #wrapper {
    padding-top: 62px; }
  .category.sub-cat .wrapall.noAds #wrapper {
    padding-top: 74px; }
  .category.sub-cat .wrapall.noAds .sp-banner.first {
    display: none; }
  .news-hp .wrapall.noAds > div:first-child {
    padding-top: 72px; }
  .news-category .wrapall.noAds .wrap-col {
    padding-top: 72px; }
  .news-category .wrapall.noAds .articleCat-list article > a {
    width: 30%; }
  .news-video .wrapall.noAds > div:first-child {
    padding-top: 50px; }
  .fandom .sp-banner.first {
    position: relative;
    margin: 24px 0 0 !important;
    padding: 0; }
  .fandom .banner-container {
    padding-top: 0;
    margin-top: 50px; }
  .fandom .wrapall.noAds .fandom-page {
    padding-top: 0; }
  .fandom-ranking .sp-banner.first {
    margin-top: 74px;
    padding-top: 0; }
  .fandom-ranking.w-detect .sp-banner.first {
    margin-top: 134px; }
  .artist-detail .artist-sp-banner {
    padding-top: 0;
    margin-top: 74px; }
  .artist-detail .wrapall.noAds .svod-artist-detail-page {
    padding-top: 50px; }
  .artist-detail.w-detect .artist-sp-banner {
    margin-top: 154px; }
  .homepage .sp-banner.first {
    padding-top: 0; }
  .article {
    /*padding-top: 50px;*/ }
    .article .wrapall > div:first-child {
      padding-top: 75px; }
  .smartbanner-show .music-hp header.noAds {
    margin-top: 80px; }
  .smartbanner-show .music-hp .wrapall.noAds > div:first-child {
    padding-top: 0 !important; }
  .smartbanner-show .category .wrapall.noAds > #wrapper {
    padding-top: 154px !important; }
  .smartbanner-show .category.sub-cat header.noAds {
    margin-top: 80px; }
  .smartbanner-show .category.sub-cat .wrapall.noAds > #wrapper {
    padding-top: 154px !important; }
  .smartbanner-show .news-hp.sub-cat header.noAds {
    margin-top: 80px; }
  .smartbanner-show .news-hp.sub-cat .wrapall.noAds > div:first-child {
    padding-top: 154px !important; }
  .smartbanner-show .news-category .wrapall.noAds .wrap-col {
    padding-top: 154px; }
  .smartbanner-show .news-video .wrapall.noAds > div:first-child {
    padding-top: 130px !important; }
  .smartbanner-show .fandom header {
    margin-top: 80px; }
  .smartbanner-show .fandom .banner-container {
    margin-top: 130px;
    padding-top: 0; }
  .smartbanner-show .fandom-ranking header {
    margin-top: 80px; }
  .smartbanner-show .fandom-ranking .sp-banner.first {
    margin-top: 154px; }
  .smartbanner-show .fandom-ranking .wrapall.noAds .fandom-ranking-page {
    padding-top: 160px !important; }
  .smartbanner-show .fandom-ranking.w-detect header {
    margin-top: 140px; }
  .smartbanner-show .fandom-ranking.w-detect .sp-banner.first {
    margin-top: 214px; }
  .smartbanner-show .artist-detail header {
    margin-top: 80px; }
  .smartbanner-show .artist-detail .wrapall.noAds .svod-artist-detail-page {
    padding-top: 130px; }
  .smartbanner-show .artist-detail.w-detect header {
    margin-top: 130px; }
  .smartbanner-show .artist-detail.w-detect .wrapall.noAds .svod-artist-detail-page {
    padding-top: 120px; }
  .smartbanner-show .article .wrapall > div:first-child {
    padding-top: 155px !important; }
  .smartbanner-show .article header {
    margin-top: 80px; }
  .smartbanner-show .article .boomBox {
    top: 150px; } }

@media only screen and (max-width: 767px) {
  .music-hp .wrapall.noAds #wrapper {
    padding-top: 0; }
  .noAds.news-category .wrapall.noAds .articleCat-list article > a {
    width: 40%; }
  .fandom-ranking .fandom-ranking-page {
    padding-top: 0 !important; }
  .fandom-ranking .wrapall.noAds .fandom-ranking-page {
    padding-top: 85px !important; }
  .artist-detail .artist-sp-banner h2 {
    font-size: 40px;
    line-height: 44px; }
  .smartbanner-show .artist-detail .wrapall.noAds .svod-artist-detail-page {
    padding-top: 130px; }
  .smartbanner-show .artist-detail.w-detect header {
    top: 152px; }
  .smartbanner-show .artist-detail.w-detect .wrapall.noAds .svod-artist-detail-page {
    padding-top: 130px; } }

@media only screen and (min-width: 1024px) {
  button.vjs-picture-in-picture-control > .vjs-tooltip {
    right: -2.3em !important; } }

@media only screen and (min-width: 1024px) {
  .vjs-menu-container {
    right: 0px !important;
    width: max-content !important;
    min-width: 100%; }
  .vjs-menu-container.vjs-submenu-container {
    right: 0px !important;
    width: 100% !important; } }

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .vjs-menu-container {
    right: 0px !important;
    width: max-content !important;
    min-width: 100%; }
  .vjs-menu-container.vjs-submenu-container {
    right: 0px !important;
    width: 100% !important; } }

/* palette */
/* gradient */
/* variable */
/*font*/
/*db_heavent*/
@font-face {
  font-family: 'db_heavent';
  src: url("/static/font/db_heavent_blk_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: 800;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent';
  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: 700;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent';
  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: 500;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent';
  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: 400, normal;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent';
  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: 300;
  font-style: normal; }

/*db_heavent_condensed*/
@font-face {
  font-family: 'db_heavent';
  src: url("/static/font/db_heavent_blk_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: 800;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent_cond';
  src: url("/static/font/db_heavent_cond_bd_v3.2.1.ttf") format("truetype");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent_cond';
  src: url("/static/font/db_heavent_cond_med_v3.2.1.ttf") format("truetype");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent_cond';
  src: url("/static/font/db_heavent_cond_v3.2.1.ttf") format("truetype");
  font-weight: 400, normal;
  font-style: normal; }

@font-face {
  font-family: 'db_heavent_cond';
  src: url("/static/font/db_heavent_cond_li_v3.2.1.ttf") format("truetype");
  font-weight: 300;
  font-style: normal; }

/* palette */
/* gradient */
/* variable */
.point-mission-bar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 4px;
  height: 44px; }
  .point-mission-bar .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    margin-right: 4px; }
    .point-mission-bar .icon-wrapper img {
      display: block;
      width: 15px;
      height: 15px; }
  .point-mission-bar .message {
    flex: 1;
    font-family: "db_heavent", san-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0.2px;
    color: #26282E; }
  .point-mission-bar .login-btn {
    font-family: "db_heavent", san-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0.2px;
    color: #0F62FE; }
    .point-mission-bar .login-btn:hover {
      text-decoration: none; }
  .point-mission-bar .close-btn {
    cursor: pointer;
    display: flex;
    text-decoration: none; }
    .point-mission-bar .close-btn .icon {
      font-size: 16px;
      color: #B9BBC2; }
  .point-mission-bar.mg-12 {
    margin-top: 12px; }
  .point-mission-bar.theme-dark {
    background-color: #121416;
    border: 1px solid #26282E; }
    .point-mission-bar.theme-dark .message {
      color: #B9BBC2; }
  .point-mission-bar.theme-light {
    background-color: #F2F6FD;
    border: 1px solid #D8DBE2; }

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .point-mission-bar {
    height: 40px; }
    .point-mission-bar .message {
      font-size: 18px; }
    .point-mission-bar .login-btn {
      font-size: 18px; } }

@media only screen and (max-width: 767px) {
  .point-mission-bar {
    height: 40px; }
    .point-mission-bar .message {
      font-size: 18px; }
    .point-mission-bar .login-btn {
      font-size: 18px; } }

.noAds .leaderboard-header,
.noAds .leaderboard-footer,
.noAds .bannerAds,
.noAds .gird-boombox,
.noAds .boomBox,
.noAds .boombox-inread {
  display: none !important;
  visibility: hidden; }

/*font family Graphik TH*/
@font-face {
  font-family: 'Graphik TH';
  src: url("/static/News2021/fonts/GraphikTH-Medium.eot");
  src: url("/static/News2021/fonts/GraphikTH-Medium.eot?#iefix") format("embedded-opentype"), url("/static/News2021/fonts/GraphikTH-Medium.woff2") format("woff2"), url("/static/News2021/fonts/GraphikTH-Medium.woff") format("woff"), url("/static/News2021/fonts/GraphikTH-Medium.ttf") format("truetype"), url("/static/News2021/fonts/GraphikTH-Medium.svg#GraphikTH-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Graphik TH';
  src: url("/static/News2021/fonts/GraphikTH-Light.eot");
  src: url("/static/News2021/fonts/GraphikTH-Light.eot?#iefix") format("embedded-opentype"), url("/static/News2021/fonts/GraphikTH-Light.woff2") format("woff2"), url("/static/News2021/fonts/GraphikTH-Light.woff") format("woff"), url("/static/News2021/fonts/GraphikTH-Light.ttf") format("truetype"), url("/static/News2021/fonts/GraphikTH-Light.svg#GraphikTH-Light") format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Graphik TH';
  src: url("/static/News2021/fonts/GraphikTH-Regular.eot");
  src: url("/static/News2021/fonts/GraphikTH-Regular.eot?#iefix") format("embedded-opentype"), url("/static/News2021/fonts/GraphikTH-Regular.woff2") format("woff2"), url("/static/News2021/fonts/GraphikTH-Regular.woff") format("woff"), url("/static/News2021/fonts/GraphikTH-Regular.ttf") format("truetype"), url("/static/News2021/fonts/GraphikTH-Regular.svg#GraphikTH-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Graphik TH';
  src: url("/static/News2021/fonts/GraphikTH-Semibold.eot");
  src: url("/static/News2021/fonts/GraphikTH-Semibold.eot?#iefix") format("embedded-opentype"), url("/static/News2021/fonts/GraphikTH-Semibold.woff2") format("woff2"), url("/static/News2021/fonts/GraphikTH-Semibold.woff") format("woff"), url("/static/News2021/fonts/GraphikTH-Semibold.ttf") format("truetype"), url("/static/News2021/fonts/GraphikTH-Semibold.svg#GraphikTH-Semibold") format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Graphik TH';
  src: url("/static/News2021/fonts/GraphikTH-Bold.eot");
  src: url("/static/News2021/fonts/GraphikTH-Bold.eot?#iefix") format("embedded-opentype"), url("/static/News2021/fonts/GraphikTH-Bold.woff2") format("woff2"), url("/static/News2021/fonts/GraphikTH-Bold.woff") format("woff"), url("/static/News2021/fonts/GraphikTH-Bold.ttf") format("truetype"), url("/static/News2021/fonts/GraphikTH-Bold.svg#GraphikTH-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap; }

/*font family Graphik Thai Loop*/
@font-face {
  font-family: 'Graphik Thai Loop';
  src: url("/static/News2021/fonts/GraphikThaiLoop-Medium.eot");
  src: url("/static/News2021/fonts/GraphikThaiLoop-Medium.eot?#iefix") format("embedded-opentype"), url("/static/News2021/fonts/GraphikThaiLoop-Medium.woff2") format("woff2"), url("/static/News2021/fonts/GraphikThaiLoop-Medium.woff") format("woff"), url("/static/News2021/fonts/GraphikThaiLoop-Medium.ttf") format("truetype"), url("/static/News2021/fonts/GraphikThaiLoop-Medium.svg#GraphikThaiLoop-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Graphik Thai Loop';
  src: url("/static/News2021/fonts/GraphikThaiLoop-Bold.eot");
  src: url("/static/News2021/fonts/GraphikThaiLoop-Bold.eot?#iefix") format("embedded-opentype"), url("/static/News2021/fonts/GraphikThaiLoop-Bold.woff2") format("woff2"), url("/static/News2021/fonts/GraphikThaiLoop-Bold.woff") format("woff"), url("/static/News2021/fonts/GraphikThaiLoop-Bold.ttf") format("truetype"), url("/static/News2021/fonts/GraphikThaiLoop-Bold.svg#GraphikThaiLoop-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Graphik Thai Loop';
  src: url("/static/News2021/fonts/GraphikThaiLoop-Light.eot");
  src: url("/static/News2021/fonts/GraphikThaiLoop-Light.eot?#iefix") format("embedded-opentype"), url("/static/News2021/fonts/GraphikThaiLoop-Light.woff2") format("woff2"), url("/static/News2021/fonts/GraphikThaiLoop-Light.woff") format("woff"), url("/static/News2021/fonts/GraphikThaiLoop-Light.ttf") format("truetype"), url("/static/News2021/fonts/GraphikThaiLoop-Light.svg#GraphikThaiLoop-Light") format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Graphik Thai Loop';
  src: url("/static/News2021/fonts/GraphikThaiLoop-Semibold.eot");
  src: url("/static/News2021/fonts/GraphikThaiLoop-Semibold.eot?#iefix") format("embedded-opentype"), url("/static/News2021/fonts/GraphikThaiLoop-Semibold.woff2") format("woff2"), url("/static/News2021/fonts/GraphikThaiLoop-Semibold.woff") format("woff"), url("/static/News2021/fonts/GraphikThaiLoop-Semibold.ttf") format("truetype"), url("/static/News2021/fonts/GraphikThaiLoop-Semibold.svg#GraphikThaiLoop-Semibold") format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'Graphik Thai Loop';
  src: url("/static/News2021/fonts/GraphikThaiLoop-Regular.eot");
  src: url("/static/News2021/fonts/GraphikThaiLoop-Regular.eot?#iefix") format("embedded-opentype"), url("/static/News2021/fonts/GraphikThaiLoop-Regular.woff2") format("woff2"), url("/static/News2021/fonts/GraphikThaiLoop-Regular.woff") format("woff"), url("/static/News2021/fonts/GraphikThaiLoop-Regular.ttf") format("truetype"), url("/static/News2021/fonts/GraphikThaiLoop-Regular.svg#GraphikThaiLoop-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'ico-news';
  src: url("/static/News2021/fonts/ico/ico-news.eot?jewqwq");
  src: url("/static/News2021/fonts/ico/ico-news.eot?jewqwq#iefix") format("embedded-opentype"), url("/static/News2021/fonts/ico/ico-news.ttf?jewqwq") format("truetype"), url("/static/News2021/fonts/ico/ico-news.woff?jewqwq") format("woff"), url("/static/News2021/fonts/ico/ico-news.svg?jewqwq#ico-news") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block; }

[class^="icon-"].ico-news, [class*=" icon-"].ico-news, .owl-next.ico-news, .owl-prev.ico-news {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'ico-news' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 14px;
  padding: 0;
  margin: 0;
  letter-spacing: 0;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  [class^="icon-"].ico-news:before, [class*=" icon-"].ico-news:before, .owl-next.ico-news:before, .owl-prev.ico-news:before {
    font-family: inherit; }

.icon-chevron-down:before {
  content: "\E918"; }

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

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

.icon-chevron-up:before {
  content: "\E91B"; }

.icon-red-dot:before {
  content: "\E917";
  color: #ff2929; }

.icon-close-2:before {
  content: "\E916"; }

.icon-menu-2:before {
  content: "\E915"; }

.icon-close-circle:before {
  content: "\E913"; }

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

.icon-expand:before {
  content: "\E912"; }

.icon-back-to-top:before {
  content: "\E911"; }

.icon-arrow-next-thin:before {
  content: "\E90F"; }

.icon-arrow-prev-thin:before {
  content: "\E910"; }

.icon-search2:before {
  content: "\E90E"; }

.icon-ch3plus:before {
  content: "\E90D"; }

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

.icon-menu:before {
  content: "\E907"; }

.icon-close:before {
  content: "\E901"; }

.icon-dropdown:before {
  content: "\E904"; }

.icon-decrease-font:before {
  content: "\E903"; }

.icon-increase-font:before {
  content: "\E906"; }

.icon-decrease-font--filled:before {
  content: "\E902"; }

.icon-increase-font--filled:before {
  content: "\E905"; }

.icon-pause:before {
  content: "\E908"; }

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

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

.icon-backward-15s:before {
  content: "\E900"; }

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

.smartbanner-show .News2021 {
  padding-top: 80px; }
  .smartbanner-show .News2021 header {
    margin-top: 80px; }
  .smartbanner-show .News2021 .header-news {
    top: 130px; }

.smartbanner-show main {
  padding-top: 0; }

.smartbanner-show .menu-s > div {
  padding-top: 100px; }
  .smartbanner-show .menu-s > div .nav-icon4.open {
    top: 100px; }

@media only screen and (min-width: 1025px) {
  .smartbanner-show .News2021 .header-news {
    top: 144px; } }

/*global components*/
/*reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  box-sizing: border-box; }

*, :after, :before {
  box-sizing: border-box; }

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;
  position: relative;
  /*overflow-x: hidden;*/ }

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

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

a:hover {
  text-decoration: underline; }

body.News2021 header a:hover {
  text-decoration: none; }

button {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
  text-align: inherit;
  outline: none; }

button::-moz-focus-inner {
  border: 0;
  padding: 0; }

button:focus:not(:focus-visible) {
  outline: none; }

button:focus:not(:-moz-focusring) {
  outline: none; }

.News2021 #button {
  display: flex;
  background-color: #1A46D3;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 100px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 3;
  align-items: center;
  justify-content: center;
  font-size: 34px; }
  .News2021 #button:after {
    display: none; }

.News2021 #button:hover {
  cursor: pointer;
  background-color: #163CB6;
  text-decoration: none; }

.News2021 #button:active {
  background-color: #163CB6; }

.News2021 #button.show {
  opacity: 1;
  visibility: visible; }

.footer-bar {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  z-index: 4;
  background: rgba(0, 0, 0, 0.85);
  box-shadow: #1f1f1f 0px 0px 8px;
  display: block; }
  .footer-bar p {
    font-family: 'db_heaventlight' !important;
    font-weight: normal;
    text-align: center;
    padding: 10px;
    color: #b7b7b6;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.5px; }
    .footer-bar p a {
      text-decoration: underline;
      color: #faa935; }
    .footer-bar p a:last-child {
      font-family: 'Graphik TH', 'san-serif';
      font-weight: 500;
      text-decoration: none;
      background: #1A46D3;
      padding: 8px 24px;
      border-radius: 4px;
      color: #fff;
      margin: 0 0 0 10px;
      font-size: 14px;
      line-height: 1;
      display: inline-block; }

@media only screen and (max-width: 1023px) {
  .footer-bar p {
    text-align: left; }
    .footer-bar p a:last-child {
      display: block;
      clear: both;
      margin: 10px auto 0;
      max-width: max-content !important; } }

.logoutmodal.blur {
  display: none; }

body.modal-logoutmodal {
  overflow: hidden; }
  body.modal-logoutmodal .logoutmodal.blur.active {
    position: fixed;
    top: 0;
    right: 20px;
    bottom: 0;
    left: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center; }
    body.modal-logoutmodal .logoutmodal.blur.active .modal-content {
      position: relative;
      z-index: 10;
      width: 80vh;
      max-width: 500px;
      background: #fff;
      padding: 30px 20px 20px;
      border-radius: 4px;
      box-sizing: unset; }
      body.modal-logoutmodal .logoutmodal.blur.active .modal-content .logout-detail {
        text-align: center; }
        body.modal-logoutmodal .logoutmodal.blur.active .modal-content .logout-detail h3 {
          font-family: 'Graphik TH', 'san-serif';
          font-weight: 600;
          font-size: 23px;
          line-height: 150%;
          margin-bottom: 16px; }
        body.modal-logoutmodal .logoutmodal.blur.active .modal-content .logout-detail p {
          font-family: 'Graphik TH', 'san-serif';
          font-weight: 400;
          font-size: 16px;
          line-height: 150%;
          margin-bottom: 24px; }
        body.modal-logoutmodal .logoutmodal.blur.active .modal-content .logout-detail > div {
          display: flex;
          justify-content: space-between;
          max-width: 260px;
          margin: 0 auto; }
          body.modal-logoutmodal .logoutmodal.blur.active .modal-content .logout-detail > div button {
            width: 49%;
            max-width: 124px;
            border-radius: 4px;
            background-color: #1A46D3;
            height: 32px;
            color: #fff;
            font-family: 'Graphik TH', 'san-serif';
            font-weight: 400;
            font-size: 14px;
            line-height: 150%;
            cursor: pointer; }
          body.modal-logoutmodal .logoutmodal.blur.active .modal-content .logout-detail > div .btn-close {
            background-color: #868686; }
  body.modal-logoutmodal .logoutmodal.blur:after {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #4E4E4E80;
    -webkit-backdrop-filter: blur(1rem) saturate(120%);
    backdrop-filter: blur(1rem) saturate(120%); }

@media only screen and (max-width: 320px) {
  body.modal-logoutmodal .logoutmodal.blur.active .modal-content {
    padding: 30px 10px 20px; } }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Graphik TH', 'san-serif';
  font-weight: 600; }

p {
  font-family: 'Graphik Thai Loop', 'san-serif';
  font-weight: 400; }

.News2021 {
  background: #fff; }
  .News2021 .leaderboard-header {
    width: 100%;
    text-align: center;
    margin: 24px 0 40px;
    display: inline-block; }
  .News2021 .leaderboard-footer {
    width: 100%;
    text-align: center;
    margin: 20px 0;
    display: inline-block; }
  .News2021 .row {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 24px;
    padding: 0 16px; }
  .News2021 .image-highlight {
    display: block;
    position: relative;
    overflow: hidden; }
    .News2021 .image-highlight .thumb {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: auto; }
      .News2021 .image-highlight .thumb > img {
        width: 100%;
        height: auto;
        display: block; }
    .News2021 .image-highlight .icon-video {
      position: absolute;
      bottom: 12px;
      left: 12px;
      color: #F2F6FD;
      font-size: 24px; }
    .News2021 .image-highlight .time {
      font-family: 'Graphik TH', 'san-serif';
      font-weight: 400;
      font-size: 12px;
      line-height: 150%;
      position: absolute;
      bottom: 12px;
      right: 12px; }
  .News2021 .image-highlight:after {
    content: '';
    display: block;
    /*padding-bottom: 56.25%;*/
    padding-bottom: calc(9 / 16 * 100%); }
  .News2021 .image-highlight.video .thumb:before {
    content: '';
    width: 100%;
    height: 60px;
    display: inline-block;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.0086472) 6.67%, rgba(0, 0, 0, 0.03551) 13.33%, rgba(0, 0, 0, 0.0816599) 20%, rgba(0, 0, 0, 0.147411) 26.67%, rgba(0, 0, 0, 0.231775) 33.33%, rgba(0, 0, 0, 0.331884) 42.19%, rgba(0, 0, 0, 0.442691) 51.04%, rgba(0, 0, 0, 0.557309) 59.37%, rgba(0, 0, 0, 0.668116) 68.75%, rgba(0, 0, 0, 0.768225) 78.12%, rgba(0, 0, 0, 0.852589) 88.02%, #000000 100%);
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0; }
  .News2021 .readMore-s {
    font-family: 'Graphik Thai Loop', 'san-serif';
    font-weight: 400;
    color: #55585E;
    font-size: 12px;
    line-height: 150%;
    text-decoration: underline; }
  .News2021 .readMore-s:hover {
    text-decoration: none; }
  .News2021 .row-u-pd {
    padding: 0; }
  .News2021 .container-fluid {
    background-color: #E0E2E6;
    padding: 40px 0; }
  .News2021 .container-fluid .row {
    margin: 0 auto; }
  .News2021 .container-fluid.bg-white {
    background-color: #ffffff !important; }
  .News2021 .container-leaderboard {
    background-color: #E0E2E6; }
  .News2021 .main-hd {
    margin-bottom: 24px; }
    .News2021 .main-hd > * {
      font-family: 'Graphik TH', 'san-serif';
      font-weight: 600;
      font-size: 24px;
      line-height: 150%;
      color: #00040D;
      letter-spacing: 0; }
    .News2021 .main-hd > a:hover {
      text-decoration: none; }
  .News2021 .readMore {
    font-family: 'Graphik TH', 'san-serif';
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #55585E;
    text-decoration: underline; }
  .News2021 .readMore:hover {
    text-decoration: none; }
  .News2021 .detail-s {
    /*margin-right: 5px;*/ }
    .News2021 .detail-s > p {
      display: inline-block;
      font-family: 'Graphik Thai Loop', 'san-serif';
      font-weight: 400;
      font-size: 10px;
      line-height: 150%;
      color: #55585E;
      margin-right: 5px; }
      .News2021 .detail-s > p span {
        font-family: 'Graphik Thai Loop', 'san-serif';
        font-weight: 500;
        color: #FF2929; }
    .News2021 .detail-s > p:last-child {
      margin-right: 0; }
    .News2021 .detail-s p.time {
      position: relative;
      padding-right: 6px; }
    .News2021 .detail-s p.time:after {
      content: '|';
      position: absolute;
      right: 0;
      top: 0;
      display: inline-block; }

header .hd-search .icon-search:before {
  content: "\E90E"; }

header .searchmodal .icon-search:before {
  content: "\E90E"; }

/* force modal search css*/
.News2021 section.searchmodal .search-tab .toggle-detail > li .result .section-search .artist .item .thumb {
  box-sizing: content-box; }

.News2021 section.searchmodal .search-tab .toggle-detail > li .result .section-search a.readMore {
  text-decoration: none; }

.News2021 .global-language-switcher .ui.vertical.menu {
  margin: 0; }

.News2021 .global-language-switcher .ui.inverted.menu .item {
  padding: 16px 16px 16px 40px; }

@media only screen and (max-width: 1024px) {
  .News2021 .row {
    padding: 0; }
  .News2021 .row-u-pd {
    padding: 0; } }

@media only screen and (max-width: 767px) {
  .News2021 .main-hd > * {
    font-size: 20px; } }

body.menu-responsive-active {
  overflow: hidden; }

.wrapper {
  position: relative;
  padding-top: 164px; }
  .wrapper.noAds {
    padding-top: 204px; }

.flex-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch; }
  .flex-container .flex-container-1 {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto; }
  .flex-container .flex-container-2 {
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto; }

div.header-news {
  background: #1A46D3;
  width: 100%;
  height: 100px;
  margin: 0 auto;
  padding: 30px 0 20px;
  transition: all 0.3s ease;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 11; }
  div.header-news > div {
    width: 100%;
    height: auto;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: flex-end;
    position: relative;
    transition: all 0.3s ease; }
    div.header-news > div .logo-news > a {
      display: inline-block; }
      div.header-news > div .logo-news > a img {
        transition: width 0.3s ease;
        width: 125px;
        height: auto; }
    div.header-news > div .logo-news span {
      left: -9999px;
      position: absolute;
      white-space: nowrap;
      overflow: hidden;
      display: block; }
    div.header-news > div nav {
      margin: 0 0 0 80px;
      opacity: 1;
      transition: all 0.3s ease;
      position: relative; }
      div.header-news > div nav ul {
        display: flex;
        margin-left: 0 !important;
        padding: 0;
        align-items: unset; }
        div.header-news > div nav ul li {
          margin-right: 22px !important; }
          div.header-news > div nav ul li a {
            font-family: 'Graphik TH', 'san-serif';
            font-weight: 400;
            font-size: 16px;
            position: relative;
            padding: 0;
            letter-spacing: 0;
            line-height: 24px; }
          div.header-news > div nav ul li a:after {
            transition: all .5s;
            content: '';
            width: 0%;
            height: 4px;
            display: block;
            background: #F2F6FD;
            position: absolute;
            left: 0;
            bottom: -20px;
            right: 0;
            margin: auto; }
          div.header-news > div nav ul li a:hover {
            text-decoration: none; }
          div.header-news > div nav ul li a:hover:after {
            transition: all .5s;
            width: 100%; }
        div.header-news > div nav ul li:last-child {
          margin-right: 0; }
      div.header-news > div nav ul.section {
        position: absolute;
        top: 40px;
        left: 0;
        padding-top: 17px;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        opacity: 0;
        transition: opacity 0.3s ease;
        visibility: hidden; }
        div.header-news > div nav ul.section li {
          white-space: nowrap; }
          div.header-news > div nav ul.section li a:after {
            bottom: -17px; }
    div.header-news > div .header-search {
      position: absolute;
      right: 16px;
      top: 6px;
      transition: top 0.3s ease; }
      div.header-news > div .header-search form {
        margin: 0; }
      div.header-news > div .header-search .searchBox-fakeInput {
        background: #1A46D3;
        border: 1px solid #F2F6FD;
        border-radius: 4px;
        display: flex;
        align-items: center; }
      div.header-news > div .header-search .searchBox-inputWrapper,
      div.header-news > div .header-search .searchBox-clearWrapper {
        display: table-cell;
        vertical-align: middle;
        padding-right: 12px; }
      div.header-news > div .header-search .searchBox-inputWrapper {
        width: 218px; }
      div.header-news > div .header-search .searchBox-clearWrapper {
        width: 80px;
        display: flex; }
      div.header-news > div .header-search .searchBox-input {
        background-color: transparent;
        border: none;
        box-shadow: none;
        outline: none;
        width: 100%;
        padding: 10.5px 12px;
        font-family: 'Graphik TH', 'san-serif';
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        color: #F2F6FD; }
      div.header-news > div .header-search .searchBox-input:focus {
        outline: none;
        box-shadow: none; }
      div.header-news > div .header-search .searchBox-input::-webkit-input-placeholder {
        /* Edge */
        color: #F2F6FD;
        opacity: 0.5; }
      div.header-news > div .header-search .searchBox-input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #F2F6FD;
        opacity: 0.5; }
      div.header-news > div .header-search .searchBox-input::placeholder {
        color: #F2F6FD;
        opacity: 0.5; }
      div.header-news > div .header-search .searchBox-clear {
        color: #CCC;
        padding: 0 12px 0 0;
        cursor: pointer;
        font-size: inherit;
        cursor: pointer;
        -webkit-transition: all 3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        display: inline-block;
        position: relative;
        width: 32px; }
        div.header-news > div .header-search .searchBox-clear .icon-close-circle {
          font-size: 20px;
          display: block;
          opacity: 0.5;
          color: #F2F6FD; }
      div.header-news > div .header-search .searchBox-clear:after {
        content: '';
        width: 1px;
        height: 20px;
        display: inline-block;
        background: #F2F6FD;
        opacity: 0.25;
        position: absolute;
        top: 0;
        right: 0; }
      div.header-news > div .header-search .searchBox-icSearch {
        padding: 0 0 0 12px;
        display: inline-block;
        width: 32px; }
        div.header-news > div .header-search .searchBox-icSearch .icon-search-3 {
          font-size: 20px;
          color: #F2F6FD;
          display: block;
          padding: 0;
          margin: 0; }
      div.header-news > div .header-search .suggest {
        padding: 16px;
        background: #fff;
        border-radius: 4px;
        /*max-height: 188px;*/
        width: 300px;
        margin: 8px 0 0;
        border: 1px solid #E0E2E6;
        overflow-x: hidden;
        z-index: 1; }
        div.header-news > div .header-search .suggest ul li {
          display: flex;
          align-items: self-start;
          margin-bottom: 20px; }
          div.header-news > div .header-search .suggest ul li > span {
            background-color: #F1F2F4;
            border-radius: 100%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            flex: 0 0 24px; }
            div.header-news > div .header-search .suggest ul li > span i {
              font-size: 12px;
              color: #55585E; }
          div.header-news > div .header-search .suggest ul li p {
            font-family: 'Graphik TH', 'san-serif';
            font-weight: 400;
            font-size: 14px;
            line-height: 21px;
            color: #00040D; }
            div.header-news > div .header-search .suggest ul li p span {
              font-weight: 500;
              color: #1A46D3; }
        div.header-news > div .header-search .suggest ul li:last-child {
          margin-bottom: 0; }
  div.header-news.sticky {
    transition: all 0.3s ease;
    height: 64px;
    padding: 16px; }
    div.header-news.sticky .logo-news a img {
      transition: width 0.3s ease;
      width: 80px;
      height: auto; }
    div.header-news.sticky > div {
      align-items: center;
      transition: all 0.3s ease; }
      div.header-news.sticky > div nav {
        margin: 0 0 0 60px;
        transition: all 0.3s ease; }
        div.header-news.sticky > div nav ul li a:after {
          bottom: -22px; }
        div.header-news.sticky > div nav ul.section {
          top: 42px; }
          div.header-news.sticky > div nav ul.section li a:after {
            bottom: -17px; }
      div.header-news.sticky > div .header-search {
        transition: top 0.3s ease;
        top: -6px; }

div.header-news:before {
  display: none; }

div.header-news.more-active {
  height: 155px;
  transition: all 0.3s ease; }
  div.header-news.more-active nav ul.section {
    opacity: 1;
    transition: opacity 0.3s ease;
    visibility: visible; }
  div.header-news.more-active nav ul li a.more-section:after {
    width: 100%; }
  div.header-news.more-active.sticky {
    height: 119px; }

.nav-icon4 {
  width: 36px;
  height: 36px;
  position: relative;
  margin: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  cursor: pointer;
  display: none;
  background-color: #00AF32;
  border-radius: 100%; }
  .nav-icon4 span {
    display: block;
    position: absolute;
    height: 2px;
    width: 20px;
    background: #ffffff;
    border-radius: 1px;
    opacity: 1;
    left: 11px;
    -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-icon4 span:nth-child(1) {
    top: 12px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center; }
  .nav-icon4 span:nth-child(2) {
    top: 20px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center; }
  .nav-icon4 span:nth-child(3) {
    top: 28px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center; }

.nav-icon4.open {
  border: 1px solid #fff; }
  .nav-icon4.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 11px;
    left: 12px;
    width: 24px; }
  .nav-icon4.open span:nth-child(2) {
    width: 0%;
    opacity: 0; }
  .nav-icon4.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 28px;
    left: 11px;
    width: 24px; }

.nav-hemberger {
  width: 36px;
  height: 36px;
  padding: 6px;
  position: relative;
  margin: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  cursor: pointer;
  display: none;
  background-color: #00AF32;
  border-radius: 100%; }
  .nav-hemberger span.icon-menu-2 {
    color: #F2F6FD;
    font-size: 24px;
    padding: 0;
    margin: 0; }

.nav-close {
  width: 36px;
  height: 36px;
  padding: 6px;
  background-color: #00AF32;
  border-radius: 100%; }
  .nav-close span.icon-close-2 {
    color: #F2F6FD;
    font-size: 24px; }

.menu-responsive {
  position: absolute;
  top: 0;
  right: 16px;
  z-index: 3; }

.responsive-search {
  position: absolute;
  top: 6px;
  right: 60px;
  font-size: 24px; }
  .responsive-search > span.ico-news.icon-search-3 {
    color: #F2F6FD;
    font-size: 24px;
    padding: 0;
    margin: 0; }

.menu-s {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  visibility: hidden;
  z-index: 12; }
  .menu-s > div {
    z-index: 11;
    position: relative;
    width: 50%;
    background: #1A46D3;
    height: 100vh;
    padding: 16px;
    margin-left: calc(-50% - 21px);
    transition: all 0.3s ease; }
    .menu-s > div > p span {
      text-indent: -9999px;
      position: absolute;
      white-space: nowrap;
      overflow: hidden;
      display: block; }
    .menu-s > div > p img {
      height: auto;
      width: 100px; }
    .menu-s > div ul {
      display: flex;
      padding-top: 28px;
      border-top: 1px solid #F2F6FD80;
      margin-top: 24px; }
      .menu-s > div ul li {
        width: 50%;
        padding: 0 0 0 16px; }
        .menu-s > div ul li a {
          font-family: 'Graphik TH', 'san-serif';
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          clear: both;
          display: block;
          float: left;
          margin-bottom: 12px;
          padding-bottom: 8px;
          position: relative; }
        .menu-s > div ul li a.active:after {
          transition: all .5s;
          content: '';
          width: 100%;
          height: 4px;
          display: block;
          background: #F2F6FD;
          position: absolute;
          left: 0;
          bottom: 0;
          right: 0;
          margin: auto; }
    .menu-s > div .nav-close {
      position: absolute;
      right: 16px;
      top: 16px; }

.username-s {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 36px;
  width: calc(100% - 32px); }
  .username-s > p {
    font-family: 'Graphik TH', 'san-serif';
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #fff;
    display: flex;
    align-content: center;
    justify-content: center; }
    .username-s > p > span:first-child {
      width: calc(100% - 14px);
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis; }
    .username-s > p > a {
      margin-top: -3px; }
    .username-s > p > a:hover {
      text-decoration: none; }
  .username-s .logout {
    font-family: 'Graphik TH', 'san-serif';
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: #FF3434;
    margin-top: 16px; }

body.menu-responsive-active {
  /*header {
		.group-right {
			div.search { z-index: 3;}
		}
	}*/ }
  body.menu-responsive-active .menu-s {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 12;
    height: 100vh;
    visibility: visible; }
    body.menu-responsive-active .menu-s > div {
      margin-left: 0;
      transition: all 0.3s ease; }
  body.menu-responsive-active .menu-s:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #00040D80;
    -webkit-backdrop-filter: blur(1rem) saturate(120%);
    /*backdrop-filter: blur(1rem) saturate(120%);*/ }

body[class*=menu-responsive-active] .modal-backdrop {
  opacity: 0 !important; }

body.News2021 .sidebar-container .icon-close.icon-cross::before {
  content: "\E908"; }

@media only screen and (max-width: 1199px) {
  div.header-news > div nav ul li {
    margin-right: 12px; } }

@media only screen and (min-width: 1025px) {
  .nav-icon4 {
    display: none; }
  .nav-hemberger {
    display: none; }
  .menu-responsive {
    display: none; }
  .menu-s {
    display: none; }
  .header-search > span {
    display: none; }
  .responsive-search {
    display: none; } }

@media only screen and (min-width: 1025px) and (max-width: 1199px) {
  div.header-news.NavWidthOver > div .header-search .searchBox-inputWrapper {
    width: 100px; }
  div.header-news.NavWidthOver > div .header-search .suggest {
    width: 182px; } }

@media only screen and (max-width: 1024px) {
  body.News2021 .svod-sidebar .svod-sidebar-content {
    height: 100vh; }
    body.News2021 .svod-sidebar .svod-sidebar-content .sidebar-container .register .stick-area p a {
      width: 100% !important; }
  .wrapper {
    padding-top: 112px; }
  .wrapper.noAds {
    padding-top: 144px; }
  div.header-news {
    height: 64px;
    padding: 12px 0;
    top: 50px; }
    div.header-news > div {
      display: inline-block;
      height: 100px; }
      div.header-news > div .logo-news a img {
        height: auto;
        width: 80px; }
      div.header-news > div nav {
        display: none; }
      div.header-news > div .header-search {
        width: calc(100% - 32px);
        top: unset;
        bottom: 0;
        left: 16px;
        display: flex;
        opacity: 0;
        transition: opacity 0.5s ease;
        visibility: hidden; }
        div.header-news > div .header-search > form {
          width: calc(100% - 40px); }
          div.header-news > div .header-search > form .searchBox-fakeInput {
            width: 100%; }
            div.header-news > div .header-search > form .searchBox-fakeInput .searchBox-inputWrapper {
              width: calc(100% - 80px);
              display: inline-block; }
            div.header-news > div .header-search > form .searchBox-fakeInput .searchBox-clearWrapper {
              display: inline-block;
              padding-right: 0; }
        div.header-news > div .header-search > .icon-close {
          font-size: 20px;
          color: #F2F6FD;
          width: 40px;
          height: 40px;
          padding: 10px; }
        div.header-news > div .header-search .suggest {
          position: absolute;
          top: 44px;
          width: 100%; }
    div.header-news.sticky {
      padding: 12px 0; }
  .nav-hemberger {
    display: block; }
  div.search-active {
    height: 124px; }
    div.search-active .responsive-search {
      opacity: 0;
      visibility: hidden; }
    div.search-active > div .header-search {
      opacity: 1;
      transition: opacity 0.5s ease;
      visibility: visible; }
    div.search-active.sticky {
      height: 124px; }
      div.search-active.sticky > div .header-search {
        opacity: 1;
        transition: opacity 0.5s ease;
        visibility: visible;
        top: unset; } }

@media only screen and (max-width: 767px) {
  div.header-news > div .logo-news img {
    width: 80px;
    height: auto; }
  .menu-s > div {
    width: 90%;
    margin-left: calc(-70% - 21px); } }

footer .ft-row .footer-secondary p {
  font-family: 'db_heaventmed', san-serif; }

.share-social .jssocials-share {
  margin: 0 8px 0 0; }

.share-social .jssocials-share-facebook > a {
  background: url("/static/images/icon-social/facebook.svg") 0 0 no-repeat;
  width: 32px;
  height: 32px;
  display: inline-block;
  background-size: 100%; }

.share-social .jssocials-share-twitter > a {
  background: url("/static/images/icon-social/x.svg") 0 0 no-repeat;
  width: 32px;
  height: 32px;
  display: inline-block;
  background-size: 100%; }

.share-social .jssocials-share-line > a {
  background: url("/static/images/icon-social/line.svg") 0 0 no-repeat;
  width: 32px;
  height: 32px;
  display: inline-block;
  background-size: 100%; }

.share-social .sharemodal {
  background: url("/static/images/icon-social/share-link.svg") 0 0 no-repeat;
  width: 32px;
  height: 32px;
  display: inline-block;
  background-size: 100%;
  cursor: pointer; }
  .share-social .sharemodal span {
    visibility: hidden; }

.share-social .sharemodal.active {
  position: static !important; }

.sharemodal.blur {
  display: none; }

body.modal-sharemodal {
  overflow: hidden; }
  body.modal-sharemodal .sharemodal.blur.active {
    position: fixed;
    top: 0;
    right: 20px;
    bottom: 0;
    left: 20px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center; }
    body.modal-sharemodal .sharemodal.blur.active .modal-content {
      position: relative;
      z-index: 10;
      width: 80vh;
      height: 80vh;
      max-width: 500px;
      max-height: 500px;
      background: #fff;
      padding: 30px 20px 20px;
      border-radius: 4px;
      box-sizing: unset; }
      body.modal-sharemodal .sharemodal.blur.active .modal-content .btn-close {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        font-size: 20px; }
        body.modal-sharemodal .sharemodal.blur.active .modal-content .btn-close em {
          text-indent: -9999px;
          visibility: hidden;
          display: none; }
      body.modal-sharemodal .sharemodal.blur.active .modal-content h3 {
        font-family: 'Graphik TH', 'san-serif';
        font-weight: 600;
        font-size: 24px;
        line-height: 150%;
        text-align: center;
        margin: 0 0 40px; }
      body.modal-sharemodal .sharemodal.blur.active .modal-content p {
        font-family: 'Graphik TH', 'san-serif';
        font-weight: 400;
        font-size: 20px;
        line-height: 150%; }
      body.modal-sharemodal .sharemodal.blur.active .modal-content p.url {
        font-weight: 300;
        font-size: 16px;
        border-bottom: 1px solid #7070707a;
        padding: 20px 0; }
      body.modal-sharemodal .sharemodal.blur.active .modal-content button.copy {
        font-family: 'Graphik TH', 'san-serif';
        font-weight: 500;
        font-size: 14px;
        position: absolute;
        bottom: 20px;
        left: 50%;
        margin-left: -80px;
        background: #1A46D3;
        color: #fff;
        padding: 4px 10px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 160px;
        height: 43px;
        cursor: pointer; }
  body.modal-sharemodal .sharemodal.blur:after {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #4E4E4E80;
    -webkit-backdrop-filter: blur(1rem) saturate(120%);
    backdrop-filter: blur(1rem) saturate(120%); }

.relate {
  display: grid;
  grid-template-columns: 221px auto;
  grid-template-rows: auto;
  gap: 0px 16px;
  grid-template-areas: "main-hd relate-list";
  grid-area: content; }

.relate .main-hd {
  grid-area: main-hd; }

.relate-list {
  grid-area: relate-list; }

.relate .main-hd {
  padding: 0; }

.relate-list {
  margin: 0;
  width: 100%;
  max-width: 932px;
  position: relative;
  z-index: 0; }
  .relate-list article {
    width: calc(25% - 12px);
    max-width: 221px;
    margin: 0 16px 24px 0;
    display: block;
    float: left;
    background-color: #F1F2F4; }
    .relate-list article .detail {
      padding: 16px; }
      .relate-list article .detail p.sub-category {
        font-family: 'Graphik TH', 'san-serif';
        font-weight: 600;
        font-size: 12px;
        line-height: 150%;
        margin-bottom: 8px; }
        .relate-list article .detail p.sub-category a {
          color: #1A46D3; }
      .relate-list article .detail h3 {
        font-family: 'Graphik TH', 'san-serif';
        font-weight: 600;
        font-size: 16px;
        line-height: 150%;
        margin-bottom: 24px; }
        .relate-list article .detail h3 a {
          color: #00040D;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          min-height: 72px; }
      .relate-list article .detail .detail-s p span {
        color: #1A46D3; }
  .relate-list article:nth-child(4n) {
    margin-right: 0; }
  .relate-list article:nth-child(4n+1) {
    clear: both; }

.relate-article .row {
  margin: 0 auto 40px; }

@media only screen and (max-width: 1024px) {
  .relate {
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "main-hd" "relate-list"; }
  .relate {
    padding: 0 16px; }
    .relate .main-hd {
      padding: 0; }
    .relate .relate-list {
      margin: 0; }
  .relate-list {
    max-width: unset; }
    .relate-list article {
      max-width: unset; }
      .relate-list article .detail {
        padding: 12px; }
        .relate-list article .detail p.sub-category {
          margin-bottom: 4px; }
        .relate-list article .detail h3 {
          margin-bottom: 16px; }
        .relate-list article .detail .detail-s p.time {
          display: block; }
        .relate-list article .detail .detail-s p.time:after {
          display: none; } }

@media only screen and (max-width: 767px) {
  .relate {
    padding: 0 8px; }
  .relate-list {
    display: flex;
    flex-direction: column; }
    .relate-list article {
      width: 100%;
      margin: 0 0 16px;
      display: table; }
      .relate-list article .image-highlight {
        display: table-cell;
        width: 150px; }
        .relate-list article .image-highlight .thumb img {
          width: 210%;
          margin: -9% 0 0 -56%; }
      .relate-list article .image-highlight:after {
        padding-bottom: calc(1 / 1 * 100%); }
      .relate-list article .detail {
        display: table-cell;
        vertical-align: top;
        padding: 12px 8px; }
        .relate-list article .detail p.sub-category {
          margin: 0; }
        .relate-list article .detail h3 a {
          min-height: 72px; }
        .relate-list article .detail .detail-s p.time {
          display: inline-block; }
        .relate-list article .detail .detail-s p.time:after {
          display: unset; }
  .relate-article .row {
    margin: 0 auto 32px; } }

@media only screen and (max-width: 374px) {
  .relate-list article .detail h3 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 52px; } }

.content {
  display: grid;
  grid-template-columns: minmax(auto, 896px) auto;
  grid-template-rows: auto;
  gap: 0px 16px;
  grid-template-areas: "highlight-header sidebar" "article-content sidebar";
  grid-area: content; }

.highlight-header {
  grid-area: highlight-header; }

.article-content {
  grid-area: article-content; }

.sidebar {
  grid-area: sidebar; }

.content {
  width: 100%;
  max-width: 1280px;
  padding: 0 16px;
  margin: 0 auto 80px; }

.highlight-header {
  width: 100%;
  max-width: 785px;
  margin: 0 0 24px auto; }
  .highlight-header > div {
    padding-top: 56.25%;
    position: relative; }
    .highlight-header > div .videoWrapper {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: auto; }
    .highlight-header > div > img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: auto; }

.article-content {
  width: 100%;
  max-width: 785px;
  margin: 0 0 0 auto;
  padding: 0;
  position: relative; }
  .article-content p.sub-category {
    font-family: 'Graphik TH', 'san-serif';
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #00040D;
    margin-bottom: 8px; }
  .article-content h1 {
    font-family: 'Graphik TH', 'san-serif';
    font-weight: 600;
    font-size: 24px;
    line-height: 150%;
    color: #00040D;
    padding-bottom: 16px; }
  .article-content p.writer {
    font-family: 'Graphik Thai Loop', 'san-serif';
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #55585E;
    padding-bottom: 14px; }
  .article-content .detail-s {
    margin-bottom: 60px; }
    .article-content .detail-s > p span {
      color: #00040D; }
  .article-content .share-social {
    position: absolute;
    right: 10px;
    margin: -92px 0 0; }
  .article-content .text-read {
    clear: both;
    font-family: 'Graphik Thai Loop', 'san-serif';
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: #00040D;
    position: relative;
    z-index: 1; }
    .article-content .text-read p {
      font-family: 'Graphik Thai Loop', 'san-serif';
      font-weight: 400;
      font-size: 18px;
      line-height: 150%;
      color: #00040D;
      padding-bottom: 16px; }
      .article-content .text-read p a {
        text-decoration: underline;
        color: #1A46D3;
        font-family: 'Graphik Thai Loop', 'san-serif';
        font-weight: 500; }
    .article-content .text-read ul {
      padding-left: 16px; }
      .article-content .text-read ul li {
        list-style: disc outside;
        font-family: 'Graphik Thai Loop', 'san-serif';
        font-weight: 400;
        font-size: 18px;
        line-height: 150%;
        color: #00040D;
        padding-bottom: 16px; }
      .article-content .text-read ul li:last-child {
        padding-bottom: 0; }
    .article-content .text-read ol {
      padding-left: 16px; }
      .article-content .text-read ol li {
        list-style: decimal outside;
        font-family: 'Graphik Thai Loop', 'san-serif';
        font-weight: 400;
        font-size: 18px;
        line-height: 150%;
        color: #00040D;
        padding-bottom: 16px; }
      .article-content .text-read ol li:last-child {
        padding-bottom: 0; }
    .article-content .text-read > img, .article-content .text-read img {
      width: 100% !important;
      height: auto;
      margin-bottom: 40px; }
    .article-content .text-read .note-float-left {
      margin: 0 16px 0 0; }
    .article-content .text-read .note-float-right {
      margin: 0 0 0 16px; }
    .article-content .text-read .boomBox-inread {
      width: 100%;
      display: block;
      margin: 0px auto;
      text-align: center;
      margin-bottom: 16px !important; }

.bannerAds {
  margin: 24px 0; }

.boombox-inread {
  height: 0;
  opacity: 0;
  overflow: hidden;
  margin-bottom: 0;
  transition: all 0.3s ease; }

.boombox-inread.active {
  height: auto;
  opacity: 1;
  margin-bottom: 40px;
  transition: all 0.3s ease; }

.sidebar .boomBox {
  position: sticky;
  top: 144px;
  margin: 0 0 24px;
  text-align: right; }

#cookie_policy.footer-bar {
  z-index: 10 !important; }

.News2021 #button {
  z-index: 10 !important; }

@media only screen and (max-width: 1024px) {
  .content {
    grid-template-areas: "highlight-header" "article-content" "sidebar";
    grid-template-columns: auto; }
  .content {
    padding: 0 16px;
    margin: 0 auto 40px; }
    .content .main-hd {
      display: none; }
    .content .highlight-header {
      max-width: 100%; }
    .content .article-content {
      padding: 0;
      max-width: 100%; }
  .sidebar .boomBox {
    margin: 0;
    text-align: center; } }

@media only screen and (max-width: 767px) {
  .content {
    padding: 0 10px; }
  .article-content .detail-s {
    margin-bottom: 16px; }
  .article-content .share-social {
    position: static;
    right: unset;
    margin: 0 0 58px; }
  .article-content .text-read .note-float-left {
    margin: 0;
    float: none;
    width: 100%; }
  .article-content .text-read .note-float-right {
    margin: 0;
    float: none;
    width: 100%; }
  .highlight-header {
    margin: 0 0 10px; } }

.newsdetail .cookie-footer-bar .content {
  display: flex;
  padding: 0;
  margin: 0 !important;
  flex-direction: column; }