@charset "UTF-8";
:root { --bg-color: #191b24;
  --text-base: #aaa;
  --primary-color: #ffd875;
  --primary-color-hover: #ffde8a;
  --primary-button-text: #191b24;
  --primary-text: #ffd875;
  --top-bg-default: #202331;
  --border-color: #ffffff10;
  --bg-2: #282b3a;
  --bg-3: #2f3346;
  --bg-4: #3e435c;
  --bg-5: #535d8e;
  --footer-bg: #0f111a;
  --shadow-large: 0 0 20px 20px rgba(0, 0, 0, 0.1);
  --h-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
  --category-name: #fff;
  --padding-base: 40px;
  --bs-border-color: rgba(0, 0, 0, 0.3);
  --Toastify__progress-bar--error: #f85f5f !important;
  --toastify-icon-color-error: #f85f5f !important; }

.button-play,
.primary-gradient,
.w-chart .number { background: #fecf59;
  background: linear-gradient(39deg, #fecf59, #fff1cc); }

.btn-outline { border-color: hsla(0, 0%, 100%, 0.5) !important; }

.icon-20 { width: 20px;
  height: 20px; }

.icon-16 { width: 16px;
  height: 16px; }

#totop,
.button-play,
.cat-more .line-center,
.d-item .text,
.de-type .item,
.item-focus.is-on,
.menu-toggle .icon-menu *,
.pin-trans .line-center,
.search-toggle .icon-search *,
.sound-cover,
.toggle-x *,
.top-slide-small .swiper-slide,
.top-up .sw-item .v-thumbnail img,
.topic-item .inc-icon,
.topics-grid .row-topic,
.topics-line .topic-item,
.transition,
header { transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s; }

.item-title { color: #fff;
  font-size: 1em;
  font-weight: 400;
  margin-bottom: 0.5rem;
  line-height: 1.5; }

header { display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: #191b24;
  background: linear-gradient(0deg, rgba(25, 27, 36, 0), #191b24); }

#search .search-input { width: 100%;
  height: 2.8rem;
  line-height: 2rem;
  padding: 0.4rem 3rem;
  background-color: hsla(0, 0%, 100%, 0.08);
  color: #fff;
  font-size: 1em;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0.4rem;
  border: 1px solid transparent !important; }

#main_menu,
#main_user { display: flex;
  align-items: center;
  gap: 1.5rem; }

#main_user .button-user { font-size: 1em;
  padding: 0.6rem 1.4rem;
  border-radius: 3rem;
  border: 1px solid hsla(0, 0%, 100%, 0.5);
  color: #fff;
  opacity: 0.9;
  font-weight: 500;
  white-space: nowrap;
  min-width: 145px;
  text-align: center; }

.search-toggle.toggled .icon-search svg { opacity: 0; }

.top-detail-wrap:after,
.top-slide-main:before { content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  z-index: 3;
  background: #191b24;
  background: linear-gradient(0deg, #191b24, rgba(25, 27, 36, 0)); }

.slide-elements .cover-fade,
.top-detail-wrap .cover-fade { width: 100%;
  max-width: 1900px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  mask-image: linear-gradient(
    0deg,
    transparent,
    #000 20%,
    #000 80%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    0deg,
    transparent,
    #000 20%,
    #000 80%,
    transparent
  ); }

.slide-elements .cover-fade .cover-image { width: 100%;
  height: 100%;
  display: block;
  position: relative;
  mask-image: linear-gradient(
    90deg,
    transparent 10px,
    rgba(0, 0, 0, 0.2) 15%,
    #000 40%,
    #000 80%,
    transparent 99%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 10px,
    rgba(0, 0, 0, 0.2) 15%,
    #000 40%,
    #000 80%,
    transparent 99%
  ); }

.top-slide-wrap .top-slide-small .swiper-slide { width: 65px;
  height: 45px;
  cursor: pointer;
  position: relative;
  border: 3px solid transparent; }

.top-slide-wrap .top-slide-small .swiper-slide img { width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  background-color: var(--bg-2); }

.slide-content .media-title-image { margin-bottom: 2rem; }

.slide-content .touch .button-play svg { font-size: 28px;
  position: relative;
  left: 2px; }

.v-thumbnail .pin-thumb { position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  padding: 0 0.6rem;
  background: #191b24;
  background: linear-gradient(0deg, rgba(25, 27, 36, 0), rgba(25, 27, 36, 0.7)); }

.v-thumbnail .pin-thumb.on-bottom { top: auto;
  bottom: 0;
  background: #191b24;
  background: linear-gradient(0deg, rgba(25, 27, 36, 0.7), rgba(25, 27, 36, 0)); }

.top-up .sw-item .v-thumbnail .mask { position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: hsla(0, 0%, 100%, 0.05); }

.big-slide-wrapper .slide-content .media-title { font-size: 2.2em; }

.big-slide-wrapper .slide-elements .cover-fade { width: calc(100% - 500px);
  height: 100% !important;
  left: auto;
  transform: none;
  right: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000); }

.sw-actor .item-duo { background-color: #ffffff05;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 0.5rem;
  -webkit-mask-image: linear-gradient(0deg, transparent 20%, #000 70%, #000);
  mask-image: linear-gradient(0deg, transparent 20%, #000 70%, #000); }

.sw-cover { width: 100%;
  position: relative; }

.sw-cover .h-item { padding: 1rem 1.25rem;
  position: relative;
  z-index: 2;
  gap: 1.25rem;
  align-items: flex-start; }

.sw-cover.single .h-item { padding: 1rem; }

.demo-tip,
.qtip-default { background-color: var(--bg-3);
  width: 100%;
  max-width: 420px;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
  border: none !important;
  color: #fff;
  line-height: 1.5; }

.sw-tip .media-teaser { background-size: cover;
  background-position: 50%;
  position: relative;
  mask-image: linear-gradient(0deg, transparent, #000 30px);
  -webkit-mask-image: linear-gradient(0deg, transparent, #000 30px); }

.sw-tip .media-teaser .sound-mute { position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 4; }

.sw-tip .media-teaser .info { position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  background: #2f3346;
  background: linear-gradient(
    20deg,
    rgba(47, 51, 70, 0.6),
    rgba(47, 51, 70, 0)
  ); }

.sw-tip .media-item { width: 100%;
  padding: 0 1.5rem 1.5rem;
  background: #2f3346;
  background: linear-gradient(0deg, #2f3346, rgba(47, 51, 70, 0.7));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); }

.v-tabs.nav-tabs .nav-link + .nav-link { margin-left: 40px; }

.filter-toggle.toggled i { color: var(--primary-text); }

.v-filter .fe-row { display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color); }

.v-filter .fe-row .fe-name { width: 120px;
  text-align: right;
  flex-shrink: 0;
  font-weight: 500;
  color: #fff; }

.v-filter .fe-row .fe-results { flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.6rem; }

.v-filter .fe-row .fe-results .item { padding: 0 0.5rem;
  color: #fff;
  cursor: pointer;
  opacity: 0.8; }

.v-filter .fe-row .fe-results .item.active { border-color: var(--primary-color);
  color: var(--primary-text);
  opacity: 1 !important; }

.top-detail-wrap .cover-fade .cover-image { position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.6;
  background-size: cover;
  background-position: 50%;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 30%,
    #000 70%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 30%,
    #000 70%,
    transparent
  ); }

.ds-info #toggle-detail { display: none; }

.content-gap { padding: 0 40px;
  display: flex;
  flex-direction: column;
  gap: 40px; }

.de-type .item .m-thumbnail { position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 40%;
  max-width: 130px;
  mask-image: linear-gradient(270deg, #000, transparent 95%);
  -webkit-mask-image: linear-gradient(270deg, #000, transparent 95%); }

.actors-grid-wrapper .item-actor .v-actor,
.de-actors .item-actor .v-actor { width: 100%;
  height: 0;
  padding-bottom: calc(100% + 40px);
  border-radius: 0;
  margin: 0;
  -webkit-mask-image: linear-gradient(0deg, transparent, #000 60px);
  mask-image: linear-gradient(0deg, transparent, #000 60px); }

.de-soundtrack .item-sound.active,
.de-soundtrack .item-sound:hover { background-color: hsla(0, 0%, 100%, 0.05); }

.v-form-control::placeholder { color: hsla(0, 0%, 100%, 0.4); }

.my-area { margin-bottom: 1.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem; }

.ma-user .info small { color: #666;
  font-size: 12px;
  margin-bottom: 2px; }

.ma-user .info span { font-weight: 500;
  color: #333; }

.discuss-list { justify-content: space-between;
  margin-top: 3rem; }

.discuss-list,
.discuss-wrap { display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%; }

.discuss-wrap { margin-top: 2rem;
  padding: 0; }

.d-item { display: flex;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
  width: 100%;
  margin-bottom: 1rem; }

.d-item .info { flex-grow: 1;
  width: 100%;
  min-width: 0; }

.d-item .text { color: var(--text-base);
  filter: blur(0);
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%; }

.d-item .comment-bottom { position: relative;
  font-size: 12px;
  margin-top: 0.5rem;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap; }

.d-item .comment-bottom .btn-xs { height: 28px;
  opacity: 0.5;
  font-weight: 300;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0; }

.d-item .comment-bottom .btn-comment.active,
.d-item .comment-bottom .btn-xs:hover { opacity: 1;
  transform: translateY(-1px); }

.ma-input { width: 100%; }

.ma-input .v-form-control { width: 100%;
  min-height: 80px;
  resize: vertical; }

.ma-buttons { display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-start; }

.ma-buttons .btn { flex-shrink: 0; }

.ma-buttons .v-toggle { margin-right: 0.5rem; }

.ma-buttons .btn-gif { margin-left: 0.25rem; }

.limit-wrap { padding: 0 1rem 0.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 180px;
  width: 100%; }

.d-item .replies-wrap { margin-top: 1rem;
  width: 100%; }

.d-item .replies-wrap .replies { display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 0 0;
  width: 100%; }

.group-react { gap: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap; }

.group-react .item { padding: 0;
  gap: 0.4rem;
  justify-content: center;
  height: 28px;
  cursor: pointer;
  font-size: 11px;
  flex-shrink: 0; }

.child-discuss { padding-top: 20px;
  width: 100%;
  margin: 0; }

.emo-list .el-item:hover,
.gif-list .gl-item:hover { background-color: #ffffff10; }

.gr-admin > span { background: linear-gradient(65deg, #f7c325, #fff);
  -webkit-background-clip: text; }

.gr-admin > .gr-tag { border-color: #f7c325;
  color: #f7c325;
  background-color: #febf0060; }

.sound-play { padding: 1rem 1.5rem;
  background: #fff;
  background: linear-gradient(
    0deg,
    hsla(0, 0%, 100%, 0.05),
    hsla(0, 0%, 100%, 0)
  );
  width: 100%; }

#wrapper.makeup:before { content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 900px;
  background: #0f111a;
  background: linear-gradient(0deg, rgba(15, 17, 26, 0), #0f111a); }

.wc-main .wm-info .info { width: 400px;
  flex-shrink: 0; }

.item-focus.is-on { background-color: rgba(83, 93, 142, 0.5) !important;
  visibility: visible !important;
  z-index: 101 !important; }

.focus-backdrop { display: none; }

body.focus-mod .focus-backdrop { display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #08080a;
  z-index: 100; }

.reason-list .h-item.active { color: var(--primary-color);
  background-color: hsla(0, 0%, 100%, 0.05); }

.v-dropdown-menu .dropdown-blank,
.v-dropdown-menu .dropdown-item { font-size: 13px;
  padding: 0.4rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem; }

.v-dropdown-menu.bg-dark hr { border-color: hsla(0, 0%, 100%, 0.2); }

.topics-list.single { border-radius: 1rem;
  background: #282b3a;
  background: linear-gradient(0deg, rgba(40, 43, 58, 0) 20%, #282b3a);
  padding: 2rem;
  gap: 2rem; }

.topics-grid .row-topic .mask { -webkit-mask-image: linear-gradient(180deg, #000 -10%, rgba(0, 0, 0, 0.1));
  mask-image: linear-gradient(180deg, #000 -10%, rgba(0, 0, 0, 0.1)); }

.topics-grid .row-topic { position: relative;
  top: 0;
  padding: 1.2rem 2.5rem 1.2rem 1.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
  justify-content: space-between;
  background: hsla(0, 0%, 100%, 0.8);
  background: radial-gradient(
    at left top,
    hsla(0, 0%, 100%, 0.8) 30%,
    hsla(0, 100%, 72%, 0.79) 100%
  ); }

.topics-grid .row-topic .intro .heading-md { font-weight: 700;
  font-size: 2em;
  color: #fff;
  line-height: 1.3; }

.topic-background { position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50vh;
  mask-image: linear-gradient(0deg, transparent, #000);
  -webkit-mask-image: linear-gradient(0deg, transparent, #000);
  opacity: 0.5; }

.rate-comment div.v-form-control { border: none;
  font-size: 1.2em;
  line-height: 1.6;
  height: auto !important;
  min-height: auto !important;
  background-color: hsla(0, 0%, 100%, 0.025) !important; }

.noti-wrap { position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: #ffffff05; }

.noti-wrap .h-item { padding: 1rem;
  color: var(--text-base); }

.noti-wrap .h-item.new,
.noti-wrap .h-item:hover { background-color: #ffffff05; }

.noti-wrap .h-item.new:hover { background-color: #ffffff07; }

.noti-dropdown { width: 320px;
  margin-top: 5px !important; }

.noti-dropdown .dropdown-top { border-bottom: 1px solid #ffffff10; }

.td-d-item .di-poster { position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
  mask-image: linear-gradient(180deg, #000, transparent 80%); }

.cards-boxed .row-tabs a.active { color: #000;
  background: #fcf1d8;
  background: linear-gradient(94deg, #fcf1d8, #fdb9de); }

.sw-cover.cover-fade .v-thumbnail img { mask-image: linear-gradient(0deg, transparent, #000 40%);
  -webkit-mask-image: linear-gradient(0deg, transparent, #000 40%); }

#body-load { position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  background-color: var(--bg-color);
  animation: body-load-effect 1.5s forwards; }

#body-load .bl-logo { max-width: 800px;
  flex-direction: column;
  gap: 2rem;
  font-size: 3em;
  line-height: 1.4;
  color: #ffffff30;
  font-weight: 600;
  animation: logo-load 1.5s forwards; }

.home-board { display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  width: 100%;
  padding: 6rem 8rem;
  margin: 15rem auto 8rem;
  border-radius: 2rem;
  background-color: hsla(0, 0%, 100%, 0.025);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(15px); }

.Toastify__toast-theme--dark { background: #ffffff0f !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px); }

.v-dropdown-menu.bg-dark.user-dropdown { background-color: #272c43 !important; }

.swiper-fade .swiper-slide { pointer-events: none;
  transition-property: opacity; }

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; }

div[data-ntpc="YouTubeEmbed"] { width: 100% !important;
  height: 100% !important; }

.custom-dropdown.dropdown-toggle:after { display: none; }

.btn-gif { background-color: transparent;
  border: 1px solid #ffffff30;
  transition: all 0.3s ease; }

.btn-gif,
.btn-gif:hover { color: var(--primary-text); }

.btn-gif:hover { background-color: #ffffff10;
  border-color: #ffffff50; }

.btn-gif.active { background-color: #3556b6;
  border-color: #3556b6;
  color: var(--primary-text); }