@charset "UTF-8";
:root {
  --primary: #117E96;
  --secondary: #009CAD;
  --tertiary: #F39C12;
  --primary-light: #11AAC1;
  --primary-dark: #126E7D;
  --primary-text: #2D2D2D;
  --secondary-text: #464646;
  --tertiary-text: #8C8C8C;
  --quaternary-text: #B3B3B3;
  --primary-border: #E5E5E5;
  --secondary-border: #D9D9D9;
  --base-bg: #FFFFFF;
  --b1-bg: #F8F8F8;
  --f1-bg: #FFFFFF;
  --f2-bg: #F3F3F3;
  --primary-bg: rgba(17, 170, 193, 0.1);
  --primary-highline-bg: rgba(17, 170, 193, 0.2);
  --warning: #DE2427;
  --purewhite: #FFFFFF;
  --shadow-light: 0 4px 10px 1px rgba(0, 0, 0, 0.1);
  --shadow-soft: 0 0 30px 0 rgba(0, 0, 0, 0.06);
  --shadow-hard: 0 2px 2px -4px rgba(0, 0, 0, 0.04) ,0 0 8px -1px rgba(0, 0, 0, 0.08);
  --shadow-base: 0 4px 4px rgba(0 0 0/0.1),0 1px 8px rgba(0 0 0/0.05),0 3px 20px rgba(0 0 0/0.1) ;
}

html[data-theme=dark] {
  --primary: #00B0B6;
  --secondary: #00B0B6;
  --primary-light: #33CCCC;
  --primary-dark: #009CAD;
  --primary-text: #F7F7F7;
  --secondary-text: #C7C6CB;
  --tertiary-text: #A7A6AD;
  --quaternary-text: #A7A6AD;
  --primary-border: #444444;
  --secondary-border: #444444;
  --base-bg: #1C1C1C;
  --b1-bg: #111111;
  --f1-bg: #272728;
  --f2-bg: #444444;
  --primary-bg: rgba(17, 170, 193, 0.1);
  --primary-highline-bg: rgba(17, 170, 193, 0.2);
  --warning: #F25C62;
  --purewhite: #FFFFFF;
  --shadow-light: 0 4px 8px -1px rgba(0, 0, 0, 0.2);
  --shadow-soft: 0 4px 12px 20px rgba(0, 0, 0, 0.2) ,0 0 20px 4px rgba(0, 0, 0, 0.2);
  --shadow-hard: 0 0 0 1px rgba(0, 0, 0, 0.06) ,0 0 10px 16px rgba(0, 0, 0, 0.5);
}

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%;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a:hover {
  text-decoration: none;
}

a {
  color: var(--secondary-text);
}

ins, a {
  text-decoration: none;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  outline: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

input:focus, select:focus, textarea:focus, button:focus {
  outline: 0;
}

img {
  display: block;
  object-fit: cover;
}

[contenteditable=true] {
  padding: 0;
  margin: 0;
  text-decoration: none;
  outline: none;
}

button {
  border: none;
  margin: 0;
  padding: 0;
  outline: none;
  background: none;
  text-align: inherit;
  cursor: pointer;
}

.service__icon {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  width: 24px;
  height: 24px;
}
.service__icon.sidenav__icon {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
  display: inline-flex;
  flex-shrink: 0;
}
.service__icon.section-icon {
  width: 18px;
  height: 18px;
}
.service__icon.icon-home {
  background-image: url(../icon/serviceicon_home.svg);
}
.service__icon.icon-subscribe {
  background-image: url(../icon/serviceicon_subscribe.svg);
}
.service__icon.icon-forum {
  background-image: url(../icon/serviceicon_forum.svg);
}
.service__icon.icon-news {
  background-image: url(../icon/serviceicon_gnn.svg);
}
.service__icon.icon-now {
  background-image: url(../icon/serviceicon_now.svg);
}
.service__icon.icon-ani {
  background-image: url(../icon/serviceicon_anime.svg);
}
.service__icon.icon-ec {
  background-image: url(../icon/serviceicon_ec.svg);
}
.service__icon.icon-setting {
  background-image: url(../icon/serviceicon_setting.svg);
}
.service__icon.icon-editboard {
  position: relative;
  background-image: url(../icon/icon_editboard.svg);
  margin: 2px 6px;
}
.service__icon.icon-edit-shortcut {
  position: relative;
  display: inline-block;
  margin: 2px 6px;
  background-image: url(../icon/icon_edit.svg);
}
.service__icon.icon-guild {
  background-image: url(../icon/serviceicon_guild.svg);
}
.service__icon.icon-create {
  background-image: url(../icon/serviceicon_create-home.svg);
}
.service__icon.icon-live {
  background-image: url(../icon/serviceicon_game.svg);
}
.service__icon.icon-skin {
  background-image: url(../icon/serviceicon_skin.svg);
}
.service__icon.icon-fuli {
  background-image: url(../icon/serviceicon_fuli.svg);
}
.service__icon.icon-hardware {
  background-image: url(../icon/serviceicon_hardware.svg);
}
.service__icon.icon-sticker {
  background-image: url(../icon/serviceicon_sticker.svg);
}
.service__icon.icon-wall {
  background-image: url(../icon/serviceicon_wall.svg);
}
.service__icon.icon-data {
  background-image: url(../icon/serviceicon_book.svg);
}
.service__icon.icon-member {
  background-image: url(../icon/serviceicon_member.svg);
}
.service__icon.icon-gamecrazy {
  background-image: url(../icon/serviceicon_gamecrazy.svg);
}
.service__icon.icon-acg {
  background-image: url(../icon/serviceicon_acg.svg);
}
.service__icon.icon-support {
  background-image: url(../icon/serviceicon_support.svg);
}
.service__icon.icon-arrow {
  background-image: url(../icon/serviceicon_arrowDown.svg);
  transition: all 0.3s ease;
}
.service__icon.icon-arrow.rotate {
  transform: rotate(180deg);
}
.service__icon.icon-menu {
  width: 24px;
  height: 24px;
  margin-right: 0;
  background-image: url(../icon/toolicon_menu.svg);
}
.service__icon.icon-mark {
  background-image: url(../icon/serviceicon_mark.svg);
}
.service__icon.icon-mail {
  background-image: url(../icon/serviceicon_mail.svg);
}
.service__icon.icon-creator {
  background-image: url(../icon/serviceicon_create.svg);
}
.service__icon.icon-friend {
  background-image: url(../icon/serviceicon_friend.svg);
}
.service__icon.icon-record {
  background-image: url(../icon/serviceicon_record.svg);
}
.service__icon.icon-buy {
  background-image: url(../icon/serviceicon_buy.svg);
}

.tool__icon {
  mask-size: contain;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
}
.tool__icon:hover .text-tooltip {
  opacity: 1;
  visibility: visible;
}
.tool__icon.icon-notice {
  mask: url(../icon/toolbaricon_notice.svg) no-repeat center;
  background-color: var(--secondary-text);
}
.tool__icon.icon-im {
  mask: url(../icon/toolbaricon_im.svg) no-repeat center;
  background-color: var(--secondary-text);
}
.tool__icon.icon-search {
  mask: url(../icon/toolbaricon_search.svg) no-repeat center;
  background-color: var(--secondary-text);
}
.tool__icon.icon-more {
  background-image: url(../icon/toolbaricon_menu_w.png);
}
.tool__icon.icon-create {
  background-image: url(../icon/serviceicon_create.svg);
}
.tool__icon.icon-skin {
  background-image: url(../icon/serviceicon_skin.svg);
}
.tool__icon.icon-mail {
  background-image: url(../icon/serviceicon_mail.svg);
}
.tool__icon.icon-mark {
  background-image: url(../icon/serviceicon_mark.svg);
}
.tool__icon.icon-guild {
  background-image: url(../icon/serviceicon_guild.svg);
}
.tool__icon.icon-date {
  background-image: url(../icon/serviceicon_date.svg);
}
.tool__icon.icon-mode {
  background-image: url(../icon/serviceicon_mode.svg);
}
.tool__icon.icon-setting {
  background-image: url(../icon/serviceicon_setting.svg);
}
.tool__icon.icon-logout {
  background-image: url(../icon/serviceicon_logout.svg);
}
.tool__icon.icon-volume {
  background-image: url(https://i2.bahamut.com.tw/sound-on.svg?_=1);
  background-position: 50% 50%;
  filter: invert(72%) sepia(3%) saturate(29%) hue-rotate(60deg) brightness(100%) contrast(91%);
  width: 20px;
  height: 20px;
}
.tool__icon.icon-closed {
  mask: url(../icon/icon_X.svg);
}

.info__icon {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 4px;
}
.info__icon.icon-gp {
  background-image: url(https://i2.bahamut.com.tw/icon/icon_post_like_unselect.png);
  width: 16px;
  height: 16px;
}
.info__icon.icon-gp.rotate {
  transform: rotate(-180deg);
}
.info__icon.icon-message {
  background-image: url(https://i2.bahamut.com.tw/icon/msg_regular.png);
  width: 16px;
  height: 16px;
}
.info__icon.icon-fire {
  mask: url(../icon/icon_fire-outline.svg) no-repeat center;
  margin-right: 0;
  background-color: var(--quaternary-text);
}
.info__icon.icon-fire--md {
  width: 24px;
  height: 24px;
  margin-right: 4px;
}
.info__icon.icon-info {
  width: 16px;
  height: 16px;
  background-image: url(../icon/icon_info-outline.svg);
}
.info__icon.icon-menu {
  position: relative;
  background-image: url(../icon/icon_menu.svg);
  width: 24px;
  height: 24px;
  background-color: transparent;
  border-radius: 99em;
  transition: all 0.3s;
}
.info__icon.icon-menu:hover {
  background-color: var(--f2-bg);
}
.info__icon.icon-mark {
  mask: url(../icon/icon_mark.svg) no-repeat center;
  width: 24px;
  height: 24px;
  background-color: var(--quaternary-text);
}
.info__icon.icon-mark.is-active {
  background-color: var(--primary);
}
.info__icon.icon-subscribe {
  width: 24px;
  height: 24px;
  mask: url(../icon/serviceicon_subscribe.svg);
  background-color: var(--quaternary-text);
}
.info__icon.icon-recommend {
  width: 24px;
  height: 24px;
  mask: url(../icon/icon_recommend.svg);
  mask-size: 100%;
  background-color: var(--quaternary-text);
}
.info__icon.icon-x-twitter {
  width: 20px;
  height: 20px;
  background-image: url(../icon/icon_X-twitter.svg);
}
.info__icon.icon-R18 {
  background-image: url(../icon/icon_R18.svg);
}
.info__icon.icon-child-protection {
  background-image: url(../icon/icon_child-protection.svg);
}
.info__icon.icon-heart {
  background-image: url(../icon/icon_heart_light-default.svg);
}
.info__icon.icon-time {
  background-image: url(../icon/icon_time.svg);
}

.sidenav-section__link.is-active {
  color: var(--primary);
  background-color: var(--primary-bg);
  font-weight: bold;
  border-radius: 4px;
}
.sidenav-section__link.is-active .icon-home {
  background-image: url(../icon/serviceicon_home-active.svg);
}
.sidenav-section__link.is-active .icon-subscribe {
  background-image: url(../icon/serviceicon_subscribe-active.svg);
}
.sidenav-section__link.is-active .icon-forum {
  background-image: url(../icon/serviceicon_forum-active.svg);
}
.sidenav-section__link.is-active .icon-now {
  background-image: url(../icon/serviceicon_now-active.svg);
}
.sidenav-section__link.is-active .icon-news {
  background-image: url(../icon/serviceicon_gnn-active.svg);
}
.sidenav-section__link.is-active .icon-ani {
  background-image: url(../icon/serviceicon_anime-active.svg);
}
.sidenav-section__link.is-active .icon-ec {
  background-image: url(../icon/serviceicon_ec-active.svg);
}

.material-symbols-outlined {
  margin-right: 4px;
  font-size: 17px;
}

.btn {
  display: inline-block;
  padding: 8px 16px;
  margin: 0 8px;
  font-size: 14px;
  border-radius: 4px;
  transition: all 0.3s;
  text-align: center;
}
.btn.is-disable {
  color: var(--tertiary-text);
}
.btn-sm {
  width: 60px;
}
.btn-md {
  width: 90px;
}
.btn-lg {
  width: 120px;
}
.btn-xl {
  width: 140px;
}
.btn-box {
  margin-top: 12px;
}
.btn-primary {
  background: var(--primary);
  color: var(--purewhite);
}
.btn-primary:hover {
  background: var(--primary-dark);
}
.btn-outline {
  color: var(--primary);
  font-weight: 500;
  border: 1px solid var(--primary);
  background: transparent;
}
.btn-outline--ghost {
  border: 1px solid var(--primary-border);
  background: var(--f2-bg);
  border-radius: 24px;
  color: var(--quaternary-text);
}
.btn-outline--ghost:hover {
  color: var(--tertiary-text);
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
}
.btn-outline--primary {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
  border-radius: 8px;
}
.btn-outline--primary:hover {
  transform: translateY(-8px);
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
}
.btn__play {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background-image: url(https://i2.bahamut.com.tw/icon_videoplayer.svg);
}
.btn__follow {
  flex-shrink: 0;
  padding: 0;
  margin-left: 16px;
  color: var(--primary);
}
.btn__follow:hover {
  color: var(--primary-dark);
}
.btn__follow.is-disable {
  color: var(--quaternary-text);
  cursor: default;
}
.btn__group {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px auto;
}
.btn.btn-filter {
  display: flex;
  align-items: center;
  padding: 8px 8px;
  color: var(--secondary-text);
  background-color: var(--b1-bg);
}
.btn.btn-filter:hover {
  color: var(--primary);
}
.btn.btn-filter.is-active {
  font-weight: bold;
  color: var(--primary);
}
.btn.btn-filter .forum-filter-text {
  white-space: nowrap;
}

.main-nav__form {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 30px !important;
  margin: 0 !important;
  color: var(--primary-text);
  background: var(--f2-bg);
  border-radius: 24px;
  border: 2px solid transparent;
}
.main-nav__form.is-focus {
  background: var(--f1-bg);
  border-color: var(--secondary);
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
}
.main-nav__form.is-focus .gsc-input input::placeholder {
  color: var(--secondary-text);
}
.main-nav__form.is-focus .gsc-search-button svg {
  fill: var(--secondary);
}
.main-nav__form .gsc-search-button {
  position: absolute;
  top: calc((100% - 30px) / 2);
  left: 2px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  text-align: center;
}
.main-nav__form .gsc-search-button:hover {
  background: none !important;
  border-color: transparent !important;
}
.main-nav__form .gsc-search-button svg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  fill: var(--secondary-text);
}
.main-nav__form form.gsc-search-box {
  margin: 0 !important;
  max-width: 100% !important;
}
.main-nav__form form.gsc-search-box table.gsc-search-box {
  margin-bottom: 0 !important;
}
.main-nav__form form.gsc-search-box td.gsc-input {
  padding-right: 0 !important;
}
.main-nav__form .gsc-input {
  background: none !important;
  color: var(--secondary-text);
  font-size: 14px;
  line-height: normal !important;
}
.main-nav__form .gsc-input input {
  padding: 0 0 0 24px !important;
}
.main-nav__form .gsc-input input::placeholder {
  color: var(--quaternary-text);
  opacity: 1;
}
.main-nav__form .gsc-input .gsc-input-box {
  border: none;
  background: none;
}

.gsib_a {
  padding: 5px 9px 4px 9px !important;
  background: none !important;
}

.gsib_b {
  height: 100% !important;
  width: 20px !important;
  padding: 0 !important;
}

.gssb_c .gsc-completion-container {
  background: var(--f1-bg);
  border-radius: 4px;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
  border-color: var(--primary-border);
  border-top-color: var(--primary-border);
}
.gssb_c .gsc-completion-container tr:last-child img {
  display: none;
}
.gssb_c .gsc-completion-selected {
  display: block;
  background: var(--f2-bg);
}

.gsc-search-box {
  position: relative;
}
.gsc-search-box .gsst_b {
  right: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px !important;
}
.gsc-search-box .gscb_a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--quaternary-text) !important;
  font-size: 24px;
}

.gssb_a {
  padding: 4px 8px !important;
  font-size: 15px;
  color: var(--warning);
  font-weight: 500;
  border: none !important;
}
.gssb_a img {
  display: none;
}
.gssb_a b {
  color: var(--secondary-text);
}

.gssb_e {
  box-shadow: none !important;
}

table.gstl_51.gssb_c {
  position: fixed !important;
}

table.gssb_c.gstl_50 {
  top: 0 !important;
}

:host, html, body {
  width: 100%;
  height: 100%;
  font-family: "Helvetica Neue", Helvetica, "Roboto", Arial, "Lucida Grande", "PingFang TC", "蘋果儷中黑", "Apple LiGothic Medium", sans-serif;
}

body {
  position: relative;
  background: var(--b1-bg);
  width: 100%;
  min-width: 360px;
  overscroll-behavior: none;
  overflow-x: hidden;
}

.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-xs {
  font-size: 13px;
}
.text-sm {
  font-size: 14px;
}
.text-md {
  font-size: 15px;
}
.text-lg {
  font-size: 18px;
}
.text__link {
  display: inline-block;
  color: var(--primary);
  font-size: 14px;
}
.text__link:hover {
  color: var(--primary-dark);
}
.text__link:hover .fa-angle-right {
  transform: translateX(8px);
  transition: all 0.3s;
}
.text__link .fa-angle-right {
  margin-left: 4px;
}

.fw-normal {
  font-weight: normal;
}
.fw-md {
  font-weight: 500;
}
.fw-lg {
  font-weight: 700;
}
.fw-xl {
  font-weight: 900;
}
.fw-bold {
  font-weight: bold;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  width: 100%;
  height: 0;
  border-radius: 4px;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sidenav-section .toggle__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--secondary-text);
  font-weight: 500;
  cursor: pointer;
}
.sidenav-section .toggle__trigger .fa-angle-down {
  color: var(--quaternary-text);
  font-size: 16px;
  transition: all 0.3s ease;
}
.sidenav-section .toggle__trigger .fa-angle-down.rotate {
  transform: rotate(180deg);
}
.sidenav-section .toggle__closed {
  position: absolute;
  z-index: 9;
  top: calc((100% - 20px) / 2);
  right: 12px;
  display: inline-block;
  width: 16px;
  height: 18px;
  background-image: url(../icon/icon_X.svg);
  background-position: 100% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(257deg) brightness(103%) contrast(100%);
}
.sidenav-section .tooltip {
  position: relative;
  display: inline-block;
  margin-right: -6px;
}
.sidenav-section .tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 106%;
  left: 0%;
  transform: translateX(-50%);
  background: var(--f1-bg);
  color: var(--secondary-text);
  border: 1px solid var(--primary-border);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 10;
}
.sidenav-section .tooltip::before {
  content: "";
  position: absolute;
  bottom: 52%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: var(--primary-border) transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  z-index: 9;
}
.sidenav-section .tooltip .icon-editboard::before, .sidenav-section .tooltip .icon-edit-shortcut::before {
  content: "";
  position: absolute;
  bottom: 74%;
  left: 50.25%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: var(--f1-bg) transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  z-index: 12;
}
.sidenav-section .tooltip:hover {
  border-radius: 4px;
  background-color: var(--f2-bg);
  cursor: pointer;
}
.sidenav-section .tooltip:hover::after, .sidenav-section .tooltip:hover::before,
.sidenav-section .tooltip:hover .icon-editboard::before, .sidenav-section .tooltip:hover .icon-edit-shortcut::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-2px);
}
.sidenav-section .tooltip:hover .icon-editboard {
  background-color: transparent;
  border-radius: 0;
}

.system-loading {
  max-width: 100px;
  margin: auto;
}

.notification-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  width: 40px;
  height: 20px;
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--purewhite);
  background: var(--warning);
  border-radius: 99em;
  text-align: center;
}
.notification-badge.nav-notification-badge {
  position: absolute;
  top: -12%;
  right: -6%;
  max-width: 20px;
  pointer-events: none;
}
.notification-badge.nav-notification-badge.signin {
  top: -30%;
  right: -50%;
}

.section-index {
  margin: 48px 0;
}
.section-index:nth-child(1) {
  margin-top: 0;
}
.section-index__title {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--primary-text);
}
.section-index__title:hover .fa-angle-right {
  transform: translateX(8px);
  transition: all 0.3s;
}
.section-index__title .fa-angle-right {
  display: inline-block;
  margin-left: 8px;
  font-size: 1.25rem;
  color: var(--quaternary-text);
}
.section-index__tab {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  line-height: 28px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--tertiary-text);
  border-radius: 24px;
  background: var(--f2-bg);
  white-space: nowrap;
  font-weight: 500;
}
.section-index__tab:hover {
  background: var(--primary-light);
  color: var(--purewhite);
}
.section-index__tab.is-active {
  background: var(--primary-light);
  color: var(--purewhite);
}
.section-index__head {
  margin-bottom: 16px;
}
.section-index__body {
  position: relative;
}
.section-index__row {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.section-index__row.margin-negative-bottom {
  margin-bottom: -16px;
}
.section-index__tip-box {
  display: flex;
  align-items: center;
  line-height: 28px;
  margin-top: 16px;
  margin-bottom: -16px;
  color: var(--tertiary-text);
  font-size: 14px;
}
.section-index__item {
  display: inline-flex;
  margin-left: 16px;
}
.section-index__item:first-child {
  margin-left: 0;
}
.section-index__item.flex-end {
  position: sticky;
  right: 0;
  display: flex;
  margin-left: auto;
}
.section-index__label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  display: flex;
  color: var(--purewhite);
  font-size: 12px;
  backdrop-filter: blur(1px);
  font-weight: normal;
}
.section-index__label .label__main, .section-index__label:has(.label__sub) .label__sub {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(17, 170, 193, 0.75);
  border-radius: 0 0 8px 0;
  line-height: 1.25;
}
.section-index__label:has(.label__sub) .label__main, .section-index__label:has(.label__sub) .label__sub {
  border-radius: 0;
}
.section-index__label:has(.label__sub) .label__sub {
  border-radius: 0 0 8px 0;
  background: rgba(0, 0, 0, 0.7);
}

.BH-banner {
  width: 100%;
  height: auto;
}
.BH-banner--lg {
  width: 100%;
  height: auto;
}
.BH-banner--md {
  display: none;
}
.BH-banner__row {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.BH-banner__row .BH-banner__item {
  margin-bottom: 8px;
}
.BH-banner img {
  width: 100%;
}

.section-slider:hover .swiper-button-prev,
.section-slider:hover .swiper-button-next {
  opacity: 1;
}
.section-slider__linear::after {
  content: "";
  background: linear-gradient(90deg, transparent, rgb(255, 255, 255));
  width: 100%;
  max-width: 70px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
}
.section-slider .swiper-button-prev,
.section-slider .swiper-button-next {
  width: 50px;
  height: 50px;
  z-index: 11;
  color: var(--purewhite);
  background: rgba(0, 0, 0, 0.76);
  border-radius: 99em;
  opacity: 0;
  transition: all 0.3s;
  outline: none;
}
.section-slider .swiper-button-prev::after,
.section-slider .swiper-button-next::after {
  font-size: 18px;
  font-weight: bold;
}
.section-slider .swiper-button-prev.swiper-button-disabled,
.section-slider .swiper-button-next.swiper-button-disabled {
  background: rgba(0, 0, 0, 0.24);
  pointer-events: auto;
}
.section-slider .swiper-button-prev {
  left: 0;
}
.section-slider .swiper-button-next {
  right: 0;
}

.footer__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% - 348px);
}
.footer__wrap a {
  color: var(--secondary-text);
}
.footer__row {
  width: 100%;
  max-width: 1092px;
  margin: 20px 0;
}
.footer__content {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--primary-text);
}
.footer__content:nth-child(2) {
  align-items: flex-end;
}
.footer__inner {
  width: 300px;
  margin-bottom: 24px;
  color: var(--secondary-text);
  line-height: 1.5;
}
.footer__inner:last-child {
  margin-bottom: 0;
}
.footer__inner:last-child .footer__item::after {
  display: none;
}
.footer__item {
  max-height: 20px;
}
.footer__item::after {
  content: "|";
  position: absolute;
  display: inline-block;
  width: 1px;
  color: var(--primary-border);
}
.footer__item:nth-child(1), .footer__item:nth-child(2), .footer__item:nth-child(3) {
  margin-bottom: 8px;
}
.footer__item:nth-child(3)::after, .footer__item:last-child::after {
  content: none;
}
.footer__link {
  display: inline-block;
  padding-right: 16px;
  color: var(--secondary-text);
  transition: all 0.3s;
}
.footer__link .fa-brands {
  font-size: 22px;
}
.footer__link:hover {
  opacity: 0.7;
}
.footer__qrcode {
  width: 60px;
  height: 60px;
}
.footer__device {
  display: flex;
  align-items: center;
}
.footer__device .fa-brands {
  font-size: 14px;
}
.footer__device .footer__link {
  padding: 0 8px;
}
.footer__device .footer__link:last-child {
  padding-right: 0;
}
.footer__copyright {
  width: 100%;
  padding-top: 12px;
  border-top: 1px solid var(--primary-border);
  color: var(--secondary-text);
}

.fixed-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  width: 100px;
  bottom: 24px;
  right: 24px;
  z-index: 12;
  transition: ease 0.3s;
}
.fixed-right__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 65px;
  height: 65px;
  background: var(--base-bg);
  margin-bottom: 8px;
  padding: 4px;
  border: 1px solid var(--primary-border);
  border-radius: 4px;
  transition: all 0.3s;
  font-size: 13px;
  font-weight: 500;
  color: var(--quaternary-text);
}
.fixed-right__link:hover {
  color: var(--tertiary-text);
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
  border-color: transparent;
}
.fixed-right__link:hover:nth-child(2) .fixed-right__img {
  background: url(../www/img_dgirl_cry.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
}
.fixed-right__link:nth-child(1) .fixed-right__img {
  border-radius: 99rem;
  overflow: hidden;
  background: url(../icon/icon_page.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fixed-right__link:nth-child(1) .fixed-right__text {
  background: none;
  color: var(--quaternary-text);
}
.fixed-right__gotop {
  width: 48px;
  height: 46px;
  margin-bottom: 0;
  background: var(--base-bg);
  line-height: 1;
  font-size: 13px;
}
.fixed-right__gotop .fa-angle-up {
  font-size: 18px;
}
.fixed-right__img {
  width: 40px;
  height: 40px;
  background: url(../www/img_dgirl_smile.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
}

.open-app {
  display: none;
}

.tippy-content li {
  padding: 8px 16px;
  cursor: pointer;
}
.tippy-content li:hover {
  background: var(--primary);
  color: var(--purewhite);
}
.tippy-content .sidenav-tippy__item:hover {
  background: transparent;
  color: var(--primary);
}

.dropdown-menu {
  margin: 0 -9px;
}

.tag-color__Wii, .tag-color__DS, .tag-color__WiiU, .tag-color__3DS, .tag-color__NS2, .tag-color__NS {
  background-color: #E60012;
}

.tag-color__OLG, .tag-color__PC {
  background-color: #19B5FE;
}

.tag-color__PSP, .tag-color__PSV, .tag-color__PS3, .tag-color__PS5, .tag-color__PS4 {
  background-color: #0070C9;
}

.tag-color__X360, .tag-color__XBOX360, .tag-color__XBSX, .tag-color__XBONE {
  background-color: #107C10;
}

.tag-color__Android {
  background-color: #A2C139;
}

.tag-color__other {
  background-color: #FF9C00;
}

.tag-color__BD, .tag-color__DVD, .tag-color__CD {
  background-color: #FFAF00;
}

.tag-color__steam, .tag-color__Epic {
  background-color: #6F6F6F;
}

.tag-color__iOS {
  background-color: #231f20;
}

.tag-color {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 3;
  min-width: 40px;
  max-width: 40px;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 4px;
  color: var(--purewhite);
  font-size: 12px;
  text-align: center;
  line-height: 1.25;
}
.tag-color__etc {
  background-color: var(--primary);
}
.article-card__tag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 6px;
  border-radius: 4px 0 8px 0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}
.article-card__tag .tag-icon {
  display: block;
  width: 16px;
  height: 16px;
}
.article-card__tag.expert {
  background-color: #F39C12;
}

.main-sidebar__left {
  position: sticky;
  top: 44px;
  flex-shrink: 0;
  z-index: 99;
  flex-shrink: 0;
  width: 240px;
  max-width: 240px;
  padding-top: 16px;
  height: calc(100vh - 44px);
  background: var(--base-bg);
  box-shadow: var(--shadow-soft);
  overflow-x: hidden;
  transition: transform 0.3s ease-in-out;
}
.main-sidebar__left .sidenav-section__link:hover {
  background: var(--primary-bg);
}
.main-sidebar__brief {
  display: none;
}

.sidenav-section__container {
  padding: 0 8px 48px;
}
.sidenav-section__row {
  padding: 8px 0;
}
.sidenav-section__row:has(.sidenav-section__setting) {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 240px;
  padding: 12px 16px;
  background: var(--f1-bg);
  border-top: 1px solid var(--primary-border);
}
.sidenav-section__row.sidenav-secondary {
  padding: 0;
}
.sidenav-section__row:nth-child(3) .sidenav-section__item:last-child {
  padding: 0;
}
.sidenav-section__menu-icon {
  display: none;
}
.sidenav-section__top {
  padding: 8px 0;
  border-bottom: 1px solid var(--primary-border);
}
.sidenav-section__shortcut {
  border-bottom: 1px solid var(--primary-border);
}
.sidenav-section__shortcut .sidenav-shortcut__btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  height: 36px;
  margin: 0 8px 4px;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--primary-border);
  border-radius: 24px;
  color: var(--secondary-text);
  background: rgba(204, 204, 204, 0.2);
  font-size: 14px;
  transition: all 0.3s ease;
}
.sidenav-section__shortcut .sidenav-shortcut__btn:hover {
  background: rgba(204, 204, 204, 0.4);
}
.sidenav-section__shortcut .sidenav-section__heading {
  margin: 8px 0;
}
.sidenav-section__shortcut .icon-add-shortcut {
  font-size: 24px;
  color: var(--primary);
}
.sidenav-section__heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--tertiary-text);
}
.sidenav-section__content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.sidenav-section__img {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 4px;
}
.sidenav-section__img.avatar__img {
  border-radius: 100%;
}
.sidenav-section__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.sidenav-section__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  color: var(--secondary-text);
}
.sidenav-section__link:hover {
  color: var(--primary);
}
.sidenav-section__link.link-item__text:hover {
  background: transparent;
  color: var(--primary);
}
.sidenav-section__link .notification-badge {
  position: absolute;
  width: 8px;
  height: 8px;
  padding: 0;
  margin: 0;
  right: -2px;
}
.sidenav-section__setting {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--tertiary-text);
}
.sidenav-section__setting:hover {
  color: var(--primary);
}
.sidenav-section__setting .icon-setting {
  mask: url(../icon/serviceicon_setting.svg);
  background: #8C8C8C;
  width: 20px;
  height: 20px;
}
.sidenav-section .toggle__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: var(--secondary-text);
  font-weight: 500;
  cursor: pointer;
}
.sidenav-section .toggle__trigger .fa-angle-down {
  color: var(--quaternary-text);
  font-size: 16px;
  transition: all 0.3s ease;
}
.sidenav-section .toggle__trigger .fa-angle-down.rotate {
  transform: rotate(180deg);
}
.sidenav-section .toggle__closed {
  position: absolute;
  z-index: 9;
  top: calc((100% - 20px) / 2);
  right: 12px;
  display: inline-block;
  width: 16px;
  height: 18px;
  background-image: url(../icon/icon_X.svg);
  background-position: 100% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(257deg) brightness(103%) contrast(100%);
}

.sidenav-tippy-content {
  display: flex;
  flex-direction: column;
}
.sidenav-tippy-content.mobile {
  display: none;
}
.sidenav-tippy-content .sidenav-tippy__item {
  pointer-events: auto;
  padding: 0;
}
.sidenav-tippy-content .sidenav-tippy__item:not(:last-child) {
  border-bottom: 1px solid var(--primary-border);
  padding-bottom: 8px;
}
.sidenav-tippy-content .sidenav-tippy__item .sidenav-section__link {
  padding: 4px 12px;
}

.main-nav {
  position: fixed;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 44px;
  padding: 0 12px 0 4px;
  z-index: 100;
  background: var(--base-bg);
  box-shadow: var(--shadow-light);
}
.main-nav .text-tooltip {
  background: var(--f1-bg);
  color: var(--secondary-text);
  box-shadow: var(--shadow-light);
  border: 1px solid var(--primary-border);
  border-radius: 4px;
}
.main-nav .text-tooltip::after {
  border-color: transparent transparent var(--f1-bg);
}
.main-nav img {
  width: 100%;
}
.main-nav__left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.main-nav__toggle {
  position: relative;
  display: none;
  cursor: pointer;
}
.main-nav__toggle .icon-menu {
  mask: url(../icon/toolicon_menu.svg);
}
.main-nav__btn {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  padding: 4px 8px;
}
.main-nav__btn:hover .tool__icon {
  background: var(--secondary);
}
.main-nav__msg {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  padding: 12px 0px;
  color: var(--purewhite);
  background: var(--primary-light);
}
.main-nav__logo {
  display: inline-block;
  flex-shrink: 0;
  width: 150px;
  height: 40px;
  mask: url(https://i2.bahamut.com.tw/top_logo.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: 50% 50%;
  background: var(--secondary-text);
}
.main-nav__row {
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 24px;
}
.main-nav__row .member__content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}
.main-nav__link {
  display: inline-block;
  white-space: nowrap;
}
.main-nav__link:hover .main-nav__member {
  border: 2px solid #33cccc;
  box-shadow: 0 0 5px 0px rgba(51, 204, 204, 0.5);
}
.main-nav__link .text-tooltip {
  left: calc((100% - 22px) / 2);
}
.main-nav__member {
  width: 28px;
  height: 28px;
  border: 2px solid var(--primary-border);
  border-radius: 100%;
  overflow: hidden;
}
.main-nav__dropdown {
  position: relative;
  width: 24px;
  height: 24px;
  text-align: center;
  color: var(--secondary-text);
}
.main-nav__dropdown:hover {
  color: var(--secondary);
}
.main-nav__dropdown .fa-angle-down {
  font-size: 20px;
}

.member-service {
  position: absolute;
  top: 44px;
  right: 0;
  width: 360px;
  max-width: 360px;
  overflow: hidden auto;
  padding: 8px;
  border-radius: 0 0 8px 8px;
  background: var(--base-bg);
  box-shadow: var(--shadow-base);
}
.member-service__heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--primary-border);
  color: var(--primary-text);
  font-size: 18px;
  font-weight: 500;
}
.member-service__content {
  display: flex;
  transition: all 0.3s;
  width: 100%;
}
.member-service__inner {
  position: relative;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin-left: 8px;
}
.member-service__wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.member-service__wrapper.empty-default {
  margin-top: 12px;
}
.member-service__item {
  position: relative;
  padding: 4px 8px;
}
.member-service__item.new-message {
  background: var(--primary-highline-bg);
  border-radius: 4px;
}
.member-service__item.new-message .notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
}
.member-service__item.mode-silent {
  filter: grayscale(1);
  opacity: 0.7;
}
.member-service__item.mode-silent .icon-silent {
  background-image: url(https://i2.bahamut.com.tw/sound-off.svg?_=1);
}
.member-service__item:hover {
  border-radius: 4px;
  background: var(--primary-highline-bg);
}
.member-service__item:hover .member-service__toolbar {
  opacity: 1;
}
.member-service__profile {
  position: relative;
}
.member-service__cover {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  overflow: hidden;
  background: var(--f1-bg);
  border: 1px solid var(--primary-border);
}
.member-service__cover.group__cover {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  color: var(--purewhite);
  font-size: 24px;
  font-weight: 500;
}
.member-service__pin {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 20px;
  height: 20px;
  outline: 2px solid #ffffff;
  outline-offset: -2px;
  border-radius: 99em;
}
.member-service__img {
  height: 100%;
}
.member-service__msg {
  font-size: 14px;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  -webkit-line-clamp: 6;
  color: var(--secondary-text);
}
.member-service__msg.chat__msg {
  display: -webkit-box;
  width: calc(100% - 20px);
  color: var(--tertiary-text);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.member-service__time {
  font-size: 12px;
  color: var(--quaternary-text);
}
.member-service__time.chat__time {
  position: absolute;
  top: 0;
  right: 0;
}
.member-service__toolbar {
  position: absolute;
  top: 25%;
  right: 8px;
  max-height: 30px;
  padding: 4px;
  background: var(--f2-bg);
  border: 1px solid var(--primary-border);
  border-radius: 4px;
  opacity: 0;
  transition: all 0.3s;
  z-index: 10;
}
.member-service__toolbar:hover {
  background: var(--f1-bg);
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
}
.member-service__toolbar:hover .icon-volume {
  filter: invert(22%) sepia(62%) saturate(18%) hue-rotate(345deg) brightness(96%) contrast(86%);
}
.member-service__group {
  margin: 8px 0;
  text-align: center;
}
.member-service__link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  font-size: 14px;
  color: var(--primary);
  text-align: center;
}
.member-service__link:hover {
  color: var(--primary-light);
}

.member-popover {
  width: 260px;
  max-height: min(100vh - 100px, 798px);
}
.member-popover__wrap {
  border-bottom: 1px solid var(--primary-border);
}
.member-popover__wrap:last-child {
  border: none;
}
.member-popover__row {
  padding: 4px 0;
}
.member-popover__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 12px;
}
.member-popover__info:hover {
  color: var(--primary);
}
.member-popover__info:hover .member-popover__profile-content {
  border-color: var(--primary-bg);
}
.member-popover__profile {
  position: relative;
}
.member-popover__profile-content {
  overflow: hidden;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 3px solid var(--f1-bg);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}
.member-popover__level {
  position: absolute;
  right: -24px;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F32470;
  color: var(--purewhite);
  max-height: 20px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-family: teko;
  box-sizing: border-box;
}
.member-popover__user {
  margin-top: 8px;
}
.member-popover__account {
  color: var(--tertiary-text);
  font-size: 14px;
}
.member-popover__stats {
  display: flex;
  justify-content: space-around;
  font-size: 13px;
  padding-bottom: 8px;
}
.member-popover__metric {
  color: var(--secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 30%;
}
.member-popover__metric:nth-child(2) {
  width: 40%;
}
.member-popover__metric:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 40%;
  width: 1px;
  background: var(--primary-border);
}
.member-popover__unit {
  color: var(--tertiary-text);
  font-size: 12px;
}
.member-popover__toggle-label {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  cursor: pointer;
}
.member-popover__btn-box {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  max-width: 40px;
  height: 24px;
  margin-left: auto;
  border-radius: 100px;
  background-color: #ccc;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.13) inset;
}
.member-popover__btn-box .member-popover__btn {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  margin-top: 2px;
  margin-left: 2px;
  transition: margin-left 0.5s;
}
.member-popover__checkbox {
  position: absolute;
  opacity: 0;
}
.member-popover__checkbox:checked ~ .member-popover__btn-box {
  background-color: #009cad;
}
.member-popover__checkbox:checked ~ .member-popover__btn-box .member-popover__btn {
  margin-left: 18px;
}
.member-popover__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  color: var(--secondary-text);
  font-size: 14px;
}
.member-popover__link:hover {
  background: var(--primary-bg);
  color: var(--primary);
  border-radius: 4px;
}
.member-popover__link-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.member-popover__finished {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}
.member-popover__finished.signed-in {
  background: var(--f2-bg);
  color: var(--tertiary-text);
}
.member-popover__finished.signed-in-no {
  border: 1px solid var(--warning);
  color: var(--warning);
}

.notice-popover {
  padding: 8px;
}
.notice-popover__title {
  font-size: 14px;
  padding-right: 4px;
  color: var(--primary);
  font-weight: 500;
}
.notice-popover__row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 8px;
}
.notice-popover__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 30px;
  border-bottom: 1px solid var(--primary-border);
  text-align: center;
}
.notice-popover__item.is-active .notice-popover__tab {
  color: var(--primary);
  font-weight: 500;
}
.notice-popover__tab {
  position: relative;
  display: inline-block;
  min-width: 60px;
  color: var(--secondary-text);
  font-size: 14px;
  cursor: pointer;
}
.notice-popover__tab:hover {
  color: var(--primary);
  transition: all 0.3s ease-in-out;
}
.notice-popover__tab .notification-badge {
  position: absolute;
  top: -4px;
  right: 0;
  width: 18px;
  height: 14px;
  padding: 2px;
  font-size: 10px;
}
.notice-popover .tab__line {
  position: absolute;
  bottom: 0;
  height: 3px;
  background: var(--primary);
  border-radius: 4px 4px 0 0;
  transition: left 0.3s ease-in-out, width 0.3s ease-in-out;
}
.notice-popover .member-service__wrapper {
  max-height: min(100vh - 150px, 685px);
}
.notice-popover .member-service__cover {
  position: relative;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 4px;
  overflow: initial;
}
.notice-popover .member-service__img {
  border: 1px solid var(--primary-border);
  border-radius: 4px;
}
.notice-popover .subscribe-content .member-service__item.mode-silent .icon-silent {
  background-image: url(../icon/icon-subcribe-off.svg);
}
.notice-popover .subscribe-content .icon-volume {
  background-image: url(../icon/icon-subcribe-on.svg);
}

.chat-popover__name {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}
.chat-popover__article {
  display: flex;
  align-items: center;
  max-height: 18px;
}
.chat-popover__status-group {
  display: flex;
  gap: 2px;
  margin-left: 4px;
}
.chat-popover__notice {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 500;
  background: var(--secondary);
  color: var(--purewhite);
  border-radius: 99rem;
  line-height: 1.25;
}
.chat-popover__row {
  display: flex;
  align-items: center;
}
.chat-popover__row .chat-popover__name {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 150px;
  margin-right: 4px;
  margin-bottom: 0;
  -webkit-line-clamp: 1;
  color: var(--secondary-text);
  font-size: 14px;
  word-break: break-word;
}
.chat-popover__row .icon-volume {
  width: 16px;
  height: 16px;
}
.chat-popover__row svg {
  width: 12px;
  height: 12px;
}
.chat-popover__chanel {
  margin-left: 4px;
  font-size: 12px;
  color: var(--tertiary-text);
}
.chat-popover .member-service__heading {
  margin-bottom: 8px;
}
.chat-popover .member-service__wrapper {
  display: block;
  max-height: min(100vh - 185px, 600px);
}
.chat-popover .member-service__content {
  align-items: center;
}
.chat-popover .btn.btn-outline {
  background: transparent;
}
.chat-popover .btn.btn-outline:hover {
  color: var(--primary);
}
.chat-popover .btn.btn-primary {
  background: var(--primary) !important;
  color: var(--purewhite) !important;
  border-color: var(--primary) !important;
}
.chat-popover .btn.btn-primary:hover {
  background: var(--primary-dark) !important;
}
.chat-popover .mode-silent {
  filter: none;
  opacity: 1;
}
.chat-popover .list-empty__img {
  width: 180px;
}
.chat-popover .system-loading {
  max-width: 100px;
  margin: 16px auto 8px;
}

.limited-story {
  flex-direction: row;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--primary-border);
}
.limited-story .member-service__item {
  padding: 0 0 8px 0;
}
.limited-story .member-service__item:hover {
  background: none;
}
.limited-story__name {
  color: var(--tertiary-text);
  font-weight: normal;
}
.limited-story__cover {
  margin-bottom: 4px;
}
.limited-story__msg {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 67px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  background: var(--f2-bg);
  -webkit-line-clamp: 3;
  word-break: break-word;
}
.limited-story ~ .swiper-button-prev,
.limited-story ~ .swiper-button-next {
  width: 28px;
  height: 28px;
}
.limited-story ~ .swiper-button-prev::after,
.limited-story ~ .swiper-button-next::after {
  font-size: 14px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.column {
  display: flex;
  flex-direction: column;
}

[class*=col-] {
  position: relative;
}

[class*=col-1] {
  flex-basis: 8.3333333333%;
  max-width: 8.3333333333%;
}

[class*=col-2] {
  flex-basis: 16.6666666667%;
  max-width: 16.6666666667%;
}

[class*=col-3] {
  flex-basis: 25%;
  max-width: 25%;
}

[class*=col-4] {
  flex-basis: 33.3333333333%;
  max-width: 33.3333333333%;
}

[class*=col-5] {
  flex-basis: 41.6666666667%;
  max-width: 41.6666666667%;
}

[class*=col-6] {
  flex-basis: 50%;
  max-width: 50%;
}

[class*=col-7] {
  flex-basis: 58.3333333333%;
  max-width: 58.3333333333%;
}

[class*=col-8] {
  flex-basis: 66.6666666667%;
  max-width: 66.6666666667%;
}

[class*=col-9] {
  flex-basis: 75%;
  max-width: 75%;
}

[class*=col-10] {
  flex-basis: 83.3333333333%;
  max-width: 83.3333333333%;
}

[class*=col-11] {
  flex-basis: 91.6666666667%;
  max-width: 91.6666666667%;
}

[class*=col-12] {
  flex-basis: 100%;
  max-width: 100%;
}

@media (max-width: 1024px) {
  [class*=col-wp-1] {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }
}
@media (max-width: 1024px) {
  [class*=col-wp-2] {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }
}
@media (max-width: 1024px) {
  [class*=col-wp-3] {
    flex-basis: 25%;
    max-width: 25%;
  }
}
@media (max-width: 1024px) {
  [class*=col-wp-4] {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }
}
@media (max-width: 1024px) {
  [class*=col-wp-5] {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }
}
@media (max-width: 1024px) {
  [class*=col-wp-6] {
    flex-basis: 50%;
    max-width: 50%;
  }
}
@media (max-width: 1024px) {
  [class*=col-wp-7] {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }
}
@media (max-width: 1024px) {
  [class*=col-wp-8] {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }
}
@media (max-width: 1024px) {
  [class*=col-wp-9] {
    flex-basis: 75%;
    max-width: 75%;
  }
}
@media (max-width: 1024px) {
  [class*=col-wp-10] {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }
}
@media (max-width: 1024px) {
  [class*=col-wp-11] {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }
}
@media (max-width: 1024px) {
  [class*=col-wp-12] {
    flex-basis: 100%;
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  [class*=col-wm-1] {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }
}
@media (max-width: 768px) {
  [class*=col-wm-2] {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }
}
@media (max-width: 768px) {
  [class*=col-wm-3] {
    flex-basis: 25%;
    max-width: 25%;
  }
}
@media (max-width: 768px) {
  [class*=col-wm-4] {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }
}
@media (max-width: 768px) {
  [class*=col-wm-5] {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }
}
@media (max-width: 768px) {
  [class*=col-wm-6] {
    flex-basis: 50%;
    max-width: 50%;
  }
}
@media (max-width: 768px) {
  [class*=col-wm-7] {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }
}
@media (max-width: 768px) {
  [class*=col-wm-8] {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }
}
@media (max-width: 768px) {
  [class*=col-wm-9] {
    flex-basis: 75%;
    max-width: 75%;
  }
}
@media (max-width: 768px) {
  [class*=col-wm-10] {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }
}
@media (max-width: 768px) {
  [class*=col-wm-11] {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }
}
@media (max-width: 768px) {
  [class*=col-wm-12] {
    flex-basis: 100%;
    max-width: 100%;
  }
}
[class*=col-wm-l-1] {
  flex-basis: 8.3333333333%;
  max-width: 8.3333333333%;
}

[class*=col-wm-l-2] {
  flex-basis: 16.6666666667%;
  max-width: 16.6666666667%;
}

[class*=col-wm-l-3] {
  flex-basis: 25%;
  max-width: 25%;
}

[class*=col-wm-l-4] {
  flex-basis: 33.3333333333%;
  max-width: 33.3333333333%;
}

[class*=col-wm-l-5] {
  flex-basis: 41.6666666667%;
  max-width: 41.6666666667%;
}

[class*=col-wm-l-6] {
  flex-basis: 50%;
  max-width: 50%;
}

[class*=col-wm-l-7] {
  flex-basis: 58.3333333333%;
  max-width: 58.3333333333%;
}

[class*=col-wm-l-8] {
  flex-basis: 66.6666666667%;
  max-width: 66.6666666667%;
}

[class*=col-wm-l-9] {
  flex-basis: 75%;
  max-width: 75%;
}

[class*=col-wm-l-10] {
  flex-basis: 83.3333333333%;
  max-width: 83.3333333333%;
}

[class*=col-wm-l-11] {
  flex-basis: 91.6666666667%;
  max-width: 91.6666666667%;
}

[class*=col-wm-l-12] {
  flex-basis: 100%;
  max-width: 100%;
}

.section-index .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -8px;
  margin-left: -8px;
}
.section-index [class*=col-] {
  padding-left: 8px;
  padding-right: 8px;
}

.col {
  flex: 1 0 0%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-2 {
  flex: 0 0 auto;
  width: 20%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

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

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-20 {
    flex: 0 0 auto;
    width: 20%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-20 {
    flex: 0 0 auto;
    width: 20%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-20 {
    flex: 0 0 auto;
    width: 20%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 1280px) {
  .col-xl {
    flex: 1 0 0%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-20 {
    flex: 0 0 auto;
    width: 20%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
  }
  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-20 {
    flex: 0 0 auto;
    width: 20%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
.global-container ~ .dialogify {
  background-color: var(--base-bg);
}
.global-container ~ .dialogify p {
  color: var(--secondary-text);
}
.global-container ~ .dialogify p a {
  color: var(--primary);
  margin-left: 8px;
}
.global-container ~ .dialogify img {
  display: inline-block;
}
.global-container ~ .dialogify .dialogify__content {
  max-width: 100% !important;
}
.global-container ~ .dialogify .dialogify__body {
  max-width: 100%;
  min-width: auto;
  height: 100%;
  max-height: 100%;
  background-color: transparent;
}
.global-container ~ .dialogify .dialogify_title {
  color: var(--primary);
}
.global-container ~ .dialogify .btn {
  background-color: var(--f2-bg);
}
.global-container ~ .dialogify .btn.btn-primary, .global-container ~ .dialogify .btn.btn-danger {
  background-color: var(--primary);
}
.global-container ~ .dialogify .btn.btn-primary:hover, .global-container ~ .dialogify .btn.btn-danger:hover {
  background-color: var(--primary-dark);
}
.global-container ~ .dialogify .form-check__check {
  background: var(--f1-bg);
}

.dialogify .fixed-panel {
  width: 936px;
  height: 630px;
}
@media (max-width: 1279px) {
  .dialogify .fixed-panel {
    width: 472px;
    height: 578px;
  }
}
.dialogify .fixed-panel .editboard {
  float: right;
  font-size: 14px;
  line-height: 18px;
  color: var(--tertiary-text);
}
.dialogify .fixed-panel .editboard .ml-4 {
  margin-left: 4px;
}
.dialogify .fixed-panel .editboard:hover {
  color: var(--primary);
}
.dialogify .fixed-panel .dialogify_title {
  margin-top: 16px;
}
.dialogify__body .lightbox__content .board__inner {
  --board-columns: 4;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;
}
@media (max-width: 1279px) {
  .dialogify__body .lightbox__content .board__inner {
    --board-columns: 2;
  }
}
@media (max-width: 1499px) and (min-width: 767px) {
  .dialogify__body .lightbox__content .board__inner {
    --board-columns: 3;
  }
}
@media (max-width: 767px) {
  .dialogify__body .lightbox__content .board__inner {
    --board-columns: 3;
  }
}
@media (max-width: 539px) {
  .dialogify__body .lightbox__content .board__inner {
    --board-columns: 2;
  }
}
.dialogify__body .lightbox__content .board__layout {
  min-width: 377px;
}
.dialogify__body .lightbox__content .board__item {
  width: calc(100% / var(--board-columns));
}
.dialogify__body .lightbox__content .board__item .sidenav-section__link {
  display: flex;
  align-items: center;
  height: 43px;
  padding: 4px 12px;
}
.dialogify__body .lightbox__content .board__item .sidenav-section__link:hover {
  background-color: var(--f2-bg);
}

body:has(dialog.dialogify.fixed) {
  overflow: hidden;
}

.dialogify.popup-dailybox {
  color: var(--secondary-text);
}
.dialogify.popup-dailybox .popup-dailybox--width {
  background-color: var(--f1-bg);
}
.dialogify.popup-dailybox .popup-dailybox__subtitle {
  color: var(--secondary-text);
}
.dialogify.popup-dailybox .popup-dailybox__bottom {
  color: var(--secondary-text);
}
.dialogify.popup-dailybox .popup-dailybox__btn {
  color: var(--purewhite);
  background: var(--tertiary);
}
.dialogify.popup-dailybox .popup-dailybox__btn[disabled] {
  color: var(--tertiary-text);
  background: var(--primary-border);
}
.dialogify.popup-dailybox .popup-dailybox__fulilink {
  color: var(--secondary-text);
}
.dialogify.popup-dailybox .popup-dailybox__badge img {
  width: 20px;
  height: 20px;
}
.dialogify.popup-dailybox .dailybox {
  color: var(--secondary-text);
}
.dialogify.popup-dailybox .dailybox .dailybox-day {
  --check-overlay-bg: rgba(255, 255, 255, 0.7);
  background: var(--f1-bg);
}
.dialogify.popup-dailybox .dailybox .dailybox-day:after {
  background-color: var(--check-overlay-bg);
}

.dialogify.popup-dailybox-tip {
  color: var(--secondary-text);
}

html[data-theme=dark] .dialogify.popup-dailybox .popup-dailybox__title {
  color: var(--tertiary);
}
html[data-theme=dark] .dialogify.popup-dailybox .dailybox-day {
  --check-overlay-bg: rgba(39, 39, 40, 0.75);
}
html[data-theme=dark] .dialogify.popup-dailybox-tip .popup-dailybox-tip__title {
  color: var(--tertiary);
}

html[data-theme=dark] .service__icon {
  filter: invert(93%) sepia(7%) saturate(108%) hue-rotate(211deg) brightness(85%) contrast(91%);
}
html[data-theme=dark] .sidenav-section__link.is-active .service__icon {
  filter: none;
}
html[data-theme=dark] .sidenav-section__link.is-active .icon-home {
  background-image: url(../icon/serviceicon_home_dark-active.svg);
}
html[data-theme=dark] .sidenav-section__link.is-active .icon-subscribe {
  background-image: url(../icon/serviceicon_subscribe_dark-active.svg);
}
html[data-theme=dark] .sidenav-section__link.is-active .icon-forum {
  background-image: url(../icon/serviceicon_forum_dark-active.svg);
}
html[data-theme=dark] .sidenav-section__link.is-active .icon-news {
  background-image: url(../icon/serviceicon_gnn_dark-active.svg);
}
html[data-theme=dark] .sidenav-section__link.is-active .icon-ani {
  background-image: url(../icon/serviceicon_anime_dark-active.svg);
}
html[data-theme=dark] .sidenav-section__link.is-active .icon-ec {
  background-image: url(../icon/serviceicon_ec_dark-active.svg);
}
html[data-theme=dark] .info__icon.icon-x-twitter {
  filter: invert(100%) sepia(100%) saturate(14%) hue-rotate(238deg) brightness(102%) contrast(106%);
}
html[data-theme=dark] .info__icon.icon-gp {
  mask: url(https://i2.bahamut.com.tw/icon/icon_post_like_unselect.png);
  mask-size: cover;
  background-color: var(--primary-text);
  background-image: none;
}
html[data-theme=dark] .info__icon.icon-message {
  mask: url(https://i2.bahamut.com.tw/icon/msg_regular.png);
  mask-size: cover;
  background-color: var(--tertiary-text);
  background-image: none;
}
html[data-theme=dark] .info__icon.icon-heart {
  background-image: url(../icon/icon_heart_dark-default.svg);
}
html[data-theme=dark] .info__icon.icon-heart:hover {
  background-image: url(../icon/icon_heart_dark-hover.svg);
}
html[data-theme=dark] .info__icon.icon-heart.is-active {
  background-image: url(../icon/icon_heart_dark-active.svg);
}

html[data-theme=dark] .main-sidebar__control {
  background: transparent;
}
html[data-theme=dark] .main-sidebar__left, html[data-theme=dark] .main-sidebar__brief {
  background: var(--f1-bg);
}
html[data-theme=dark] .main-sidebar__left {
  box-shadow: var(--shadow-light);
}
html[data-theme=dark] .sidenav-section__top {
  background: var(--f1-bg);
}
html[data-theme=dark] .sidenav-section .sidenav-section__menu-icon {
  background: var(--f1-bg);
}
html[data-theme=dark] .main-nav-primary-color {
  background: linear-gradient(90deg, #00b0b6, #09635d);
}
html[data-theme=dark] .main-nav-primary-color .icon-menu {
  filter: none;
  background-color: #f7f7f7;
}
html[data-theme=dark] .member-service {
  border: 1px solid var(--primary-border);
  box-shadow: none;
  background: var(--f1-bg);
}
html[data-theme=dark] .member-service__toolbar:hover .icon-volume {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(113deg) brightness(108%) contrast(102%);
}
html[data-theme=dark] .member-popover__profile-content {
  border-color: var(--primary-border);
}
html[data-theme=dark] .member-popover__icon {
  filter: invert(93%) sepia(7%) saturate(108%) hue-rotate(211deg) brightness(85%) contrast(91%);
}
html[data-theme=dark] .footer__qrcode {
  filter: invert(96%) sepia(52%) saturate(2%) hue-rotate(314deg) brightness(112%) contrast(100%);
}

.global-container img {
  display: inline-block;
}
.global-container .main-nav__toggle {
  display: block;
}
.global-container .main-sidebar__left.is-collapsed {
  transform: translateX(0);
}
.global-container .main-sidebar__control {
  display: flex;
  align-items: center;
  text-align: center;
  padding: 4px;
  width: 100%;
  color: var(--purewhite);
}
.global-container .main-sidebar__backdrop {
  z-index: 101 !important;
}
.global-container.sidebar-collapsed .main-sidebar__left {
  position: fixed;
  top: 44px;
  left: 0;
  height: calc(100vh - 44px);
  z-index: 99;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
}
.global-container.sidebar-collapsed .main-sidebar__left.is-collapsed {
  transform: translateX(-100%);
}
.global-container.sidebar-collapsed .main-sidebar__left.sidebar-hover {
  transform: translateX(0);
}
.global-container .sidenav-section .toggle__trigger {
  padding: 0;
}
.global-container .main-nav-primary-color {
  padding: 0 12px 0 16px;
  background: linear-gradient(90deg, var(--primary-light), var(--primary));
}
.global-container .main-nav-primary-color .main-nav__logo,
.global-container .main-nav-primary-color .icon-notice,
.global-container .main-nav-primary-color .icon-im,
.global-container .main-nav-primary-color .icon-menu {
  background-image: none;
  background-color: #f7f7f7;
}
.global-container .main-nav-primary-color .main-nav__row, .global-container .main-nav-primary-color .main-nav__item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.global-container .main-nav-primary-color .main-nav__btn {
  transition: all 0.3s ease-in-out;
  height: 100%;
}
.global-container .main-nav-primary-color .main-nav__btn:hover {
  background-color: var(--primary-light);
}
.global-container .main-nav-primary-color .main-nav__btn:hover .icon-notice,
.global-container .main-nav-primary-color .main-nav__btn:hover .icon-im {
  background: var(--purewhite);
}
.global-container .main-nav-primary-color .main-nav__btn .notification-badge.nav-notification-badge {
  top: 6%;
}
.global-container .main-nav-primary-color .main-nav__link {
  color: var(--purewhite);
}
.global-container .main-nav-primary-color .main-nav__link:hover .main-nav__member {
  border-color: var(--primary-light);
}
.global-container .main-nav-primary-color .fa-angle-down {
  color: var(--purewhite);
}
.global-container .main-nav-primary-color .fa-angle-down:hover {
  color: var(--primary-light);
}
.global-container .main-nav-primary-color .main-nav__form {
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.2);
}
.global-container .main-nav-primary-color .main-nav__form.is-focus {
  background: var(--f1-bg) !important;
  border: 2px solid var(--primary-light) !important;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1) !important;
}
.global-container .main-nav-primary-color .main-nav__form.is-focus .gsc-input input::placeholder {
  color: var(--secondary-text);
}
.global-container .main-nav-primary-color .main-nav__form.is-focus .gsc-search-button svg {
  fill: var(--primary-light);
}
.global-container .main-nav-primary-color .main-nav__form .gsc-input input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}
.global-container .main-nav-primary-color .main-nav__form .gsc-search-button svg {
  fill: #ffffff;
}
.global-container .main-container {
  display: flex;
  width: 100%;
  margin-top: 43px;
}
.global-container .main-container__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.global-container .main-container__wrap {
  width: 100%;
  max-width: 1250px;
}
.global-container .main-container .simplebar-content {
  padding-top: 0 !important;
}
.global-container .member-service__inner {
  flex-direction: column;
}
.global-container .chat-popover .member-service__content .limited-story__msg {
  color: var(--secondary-text);
}

.tippy-box[data-placement^=right] > .tippy-content {
  padding: 5px 9px;
}

.tippy-box {
  border-radius: 4px;
}

@media (max-width: 1499px) {
  .global-container .main-nav__toggle {
    position: relative;
    display: block;
  }
  .global-container .main-nav__toggle .icon-menu {
    mask: url(../icon/toolicon_menu.svg);
  }
  .global-container .main-nav__toggle .notification-badge {
    top: 4px;
    right: 0;
    width: 8px;
    height: 8px;
  }
  .global-container .main-nav.main-nav-primary-color .icon-menu {
    background: var(--purewhite);
  }
  .global-container .main-sidebar__left {
    position: fixed;
    z-index: 999;
    top: 0;
    min-height: 100vh;
    transform: translateX(-100%);
    transition: all 0.3s ease-in-out;
  }
  .global-container .main-sidebar__left.is-collapsed {
    transform: translateX(0);
  }
  .global-container .main-sidebar__left .sidenav-section__item .main-sidebar__control {
    padding: 8px 12px;
  }
  .global-container .main-container__content {
    width: calc(100% - 64px);
  }
  .global-container .sidenav-section__menu-icon {
    position: sticky;
    top: 0;
    z-index: 9;
    display: block;
    padding: 8px 0 4px;
    background: var(--base-bg);
  }
  .global-container .sidenav-section__menu-icon .sidenav-section__item {
    width: 100%;
  }
  .global-container .sidenav-section__top {
    padding-top: 0;
  }
  .global-container .member-service__item {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
  }
  .global-container .member-service__toolbar {
    position: initial;
    opacity: 1;
  }
}
@media (max-width: 1499px) and (min-width: 767px) {
  .main-sidebar__brief {
    position: sticky;
    top: 44px;
    display: block;
    width: 64px;
    height: calc(100vh - 44px);
    background: var(--base-bg);
    box-shadow: 4px 1px 12px -4px rgba(0, 0, 0, 0.12);
    border-right: 1px solid var(--primary-border);
  }
  .main-sidebar__brief #favoriteBoard {
    display: block;
  }
  .main-sidebar__brief .sidenav-section__title,
  .main-sidebar__brief .sidenav-section__heading .toggle__trigger,
  .main-sidebar__brief .sidenav-section__name,
  .main-sidebar__brief .icon-edit-shortcut {
    display: none;
  }
  .main-sidebar__brief .sidenav-section__top {
    padding: 8px 0;
  }
  .main-sidebar__brief .sidenav-section__row:nth-child(2), .main-sidebar__brief .sidenav-section__row:nth-child(3) {
    border-bottom: 1px solid var(--primary-border);
  }
  .main-sidebar__brief .sidenav-section__row:nth-child(3) .sidenav-section__heading {
    display: none;
  }
  .main-sidebar__brief .sidenav-section__row:has(.sidenav-section__setting), .main-sidebar__brief .sidenav-section__row:has(i.fa-angle-down:not(.rotate)) {
    display: none;
  }
  .main-sidebar__brief .sidenav-section__row.is-empty {
    border: none;
  }
  .main-sidebar__brief .sidenav-section__row #favoriteBoard {
    display: none;
  }
  .main-sidebar__brief .sidenav-section__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .main-sidebar__brief .sidenav-section__content, .main-sidebar__brief .sidenav-section__heading {
    justify-content: center;
  }
  .main-sidebar__brief .sidenav__icon {
    margin-right: 0;
  }
  .main-sidebar__brief .section-icon.icon-editboard {
    width: 24px;
    height: 24px;
    margin: 8px 12px;
    flex-shrink: 0;
  }
  .main-sidebar__brief .sidenav-section__link {
    justify-content: center;
    padding: 8px;
  }
  .main-sidebar__brief .sidenav-section__item {
    padding: 0;
  }
  .main-sidebar__brief .sidenav-section__shortcut .sidenav-section__heading {
    display: none;
  }
  .main-sidebar__brief .sidenav-section__shortcut .toggle__trigger {
    display: block;
    font-size: 0.0000001em;
    color: transparent;
  }
  .main-sidebar__brief .sidenav-section__shortcut .toggle__trigger .fa-angle-down {
    font-size: 24px;
  }
  .main-sidebar__brief .sidenav-section__shortcut .sidenav-shortcut__btn {
    margin: 0 auto;
    padding: 4px;
  }
  .global-container .main-container__wrap {
    max-width: min(1250px, max(100vw - 64px, 360px));
  }
}
@media (max-width: 991px) {
  .main-nav__msg {
    display: none;
  }
}
@media (max-width: 767px) {
  .global-container .main-sidebar__toggle .nav-notification-badge {
    top: 12px;
    right: 4px;
  }
  .global-container .main-sidebar__left {
    position: fixed;
    width: 100%;
  }
  .global-container .main-nav__form {
    display: none;
  }
  .global-container .main-nav__msg {
    display: none;
  }
  .global-container .main-nav__logo {
    display: block;
    width: 120px;
    height: 36px;
  }
  .global-container .main-nav__header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 98;
  }
  .global-container .main-nav__link {
    color: var(--primary-text);
  }
  .global-container .main-nav__input {
    display: none;
  }
  .global-container .main-nav__search-icon {
    display: block;
    width: auto;
    height: auto;
  }
  .global-container .main-nav__search-icon::before {
    font-size: 20px;
  }
  .global-container .main-nav .icon-search {
    margin: 4px 8px;
  }
  .global-container .main-container__content {
    width: 100%;
  }
  .global-container .main-nav-primary-color .icon-search {
    background: var(--purewhite);
  }
  .global-container .search-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
    z-index: 999;
    padding: 8px 16px 8px 8px;
    background: var(--f1-bg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  }
  .global-container .search-mobile .main-nav__form {
    display: flex;
    align-items: center;
    max-width: 100%;
    height: 100%;
  }
  .global-container .search-mobile .main-nav__form .gsc-input input {
    padding-left: 0 !important;
  }
  .global-container .search-mobile form.gsc-search-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }
  .global-container .search-mobile .gsc-input-box {
    width: 90%;
    min-width: auto;
    padding: 0 0 0 32px;
  }
  .global-container .search-mobile__closed {
    position: absolute;
    z-index: 10;
    font-size: 14px;
    right: 12px;
    color: var(--tertiary-text);
  }
  .global-container table.gssb_c.gstl_50 {
    position: fixed !important;
    top: 0 !important;
    left: 50px !important;
    max-width: 320px !important;
  }
  .global-container table.gstl_51.gssb_c {
    width: 100% !important;
    top: 48px !important;
    left: 0 !important;
    box-shadow: var(--shadow-hard);
  }
  .dialogify.fixed.b-n50 {
    bottom: -50%;
    max-width: 100%;
  }
  .dialogify .fixed-panel {
    max-width: none;
    max-height: 60vh;
    width: 100vw;
  }
  .dialogify__close {
    display: none;
  }
}
@media (min-width: 768px) {
  .global-container .main-nav__item.search-padding {
    display: none;
  }
  .global-container .search-mobile {
    display: none;
  }
}
@media (max-width: 539px) {
  .main-nav {
    padding: 0 8px;
  }
  .main-nav__row {
    gap: 8px;
    margin-right: 0;
  }
  .main-nav__item.member__content {
    gap: 4px;
  }
  .main-sidebar__left {
    height: 100%;
  }
  .info__icon.icon-info {
    width: 14px;
    height: 14px;
  }
  .notification-badge.nav-notification-badge.signin {
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    color: transparent;
  }
  .member-service {
    width: 100%;
    max-width: 100%;
  }
  .member-service__msg {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .main-sidebar__left {
    position: fixed;
    max-width: 240px;
    transition: ease-in-out 0.3s;
  }
  .main-sidebar__left.is-collapsed .main-sidebar__control .sideburger-icon {
    width: 20px;
    height: 24px;
  }
  .main-sidebar__toggle {
    position: sticky;
    top: 0;
    left: -4px;
    border-radius: 0;
    box-shadow: none;
  }
  .main-sidebar__toggle .notification-badge.nav-notification-badge {
    top: 8px;
    right: 4px;
  }
}