@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: 0;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox], [type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/* 禁止滾動 */
body.imgbox-no-scroll {
  position: fixed;
  width: 100vw;
  overflow: hidden;
}

/* Overlay 視窗背景 */
.imgbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(24, 24, 28, 0.9);
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s;
  opacity: 0;
  flex-direction: column;
  user-select: none;
}

.imgbox-overlay.active {
  opacity: 1;
}

/* 大圖區塊 */
.imgbox-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  /* min-height: 200px; */
  width: 90vw;
  /* max-width: 1000px; */
  height: calc(100vh - 100px);
  max-height: 80vh;
  margin: 30px 0 0 0;
  background: transparent;
  border-radius: 12px;
  box-sizing: border-box;
}

.imgbox-img {
  max-width: 100%;
  max-height: 100%;
  /* margin: 0 48px; */
  border-radius: 12px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
  background: #18181c;
  opacity: 0;
  object-fit: contain;
  display: block;
  user-select: none;
}

.imgbox-img.show {
  opacity: 1;
}

/* 控制按鈕們：獨立於圖區，全固定定位 */
.imgbox-controls {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
}

.imgbox-btn,
.imgbox-close {
  pointer-events: auto;
}

/* 上一張（左側固定） */
.imgbox-prev {
  position: fixed;
  left: 24px;
  top: calc(50% - 30px);
  transform: translateY(-50%);
  width: 38px;
  height: 56px;
  background: rgba(0, 0, 0, 0.45);
  border: none;
  color: #fff;
  font-size: 1em;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  z-index: 10002;
  transition: background 0.2s;
  user-select: none;
}

.imgbox-prev:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* 下一張（右側固定） */
.imgbox-next {
  position: fixed;
  right: 24px;
  top: calc(50% - 30px);
  transform: translateY(-50%);
  width: 38px;
  height: 56px;
  background: rgba(0, 0, 0, 0.45);
  border: none;
  color: #fff;
  font-size: 1em;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  z-index: 10002;
  transition: background 0.2s;
  user-select: none;
}

.imgbox-next:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* 關閉（右上角固定） */
.imgbox-close {
  position: fixed;
  top: 24px;
  right: 24px;
  font-size: 1em;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  cursor: pointer;
  line-height: 38px;
  z-index: 10002;
  transition: background 0.2s;
  text-align: center;
}

.imgbox-close:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* 按鈕 disabled 狀態 */
.imgbox-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgba(80, 80, 80, 0.18);
  color: #bbb;
  pointer-events: none;
}

/* 縮圖列容器 */
.imgbox-thumbs-container {
  position: relative;
  width: 80vw;
  max-width: 1000px;
  margin: 10px auto 18px auto;
  background: transparent;
  box-sizing: border-box;
}

/* 縮圖列 - 水平滾動 */
.imgbox-thumbs {
  display: flex;
  gap: 10px;
  padding: 10px 0 12px 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* 當縮圖不需要滾動時置中 */
.imgbox-thumbs.no-scroll {
  justify-content: center;
}

/* Webkit 滾動條樣式 */
.imgbox-thumbs::-webkit-scrollbar {
  height: 6px;
}

.imgbox-thumbs::-webkit-scrollbar-track {
  background: transparent;
}

.imgbox-thumbs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.imgbox-thumbs::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.imgbox-thumbs img {
  width: 58px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.65;
  border: 2px solid transparent;
  transition: border 0.2s, opacity 0.2s;
  background: #232326;
  flex-shrink: 0; /* 防止縮圖被壓縮 */
}

.imgbox-thumbs img.active,
.imgbox-thumbs img:hover {
  opacity: 1;
  border: 2px solid #fdc234;
  background: #232326;
}

/* 無 thumbnails 時補空間 */
.imgbox-thumbs:empty {
  display: block;
  min-height: 18px;
  content: "";
}

/* RWD */
@media (max-width: 700px) {
  .imgbox-wrap {
    width: 98vw;
    height: 56vw;
    min-width: 0;
  }
  .imgbox-thumbs-container {
    width: 98vw;
    max-width: 98vw;
  }
  .imgbox-prev {
    left: 4px;
  }
  .imgbox-next {
    right: 4px;
  }
  .imgbox-close {
    top: 8px;
    right: 10px;
  }
}
@media (max-width: 480px) {
  .imgbox-wrap {
    height: 44vw;
  }
  .imgbox-thumbs img {
    width: 38px;
    height: 28px;
  }
}
/* @font-face {
font-family: 'Noto Serif TC';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('https://tw.hicdn.beanfun.com/fonts/NotoSerifTC/noto-serif-tc-v32-chinese-traditional-300.woff2') format('woff2');
}

@font-face {
	font-family: 'Noto Serif TC';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('https://tw.hicdn.beanfun.com/fonts/NotoSerifTC/noto-serif-tc-v32-chinese-traditional-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Noto Serif TC';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('https://tw.hicdn.beanfun.com/fonts/NotoSerifTC/noto-serif-tc-v32-chinese-traditional-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Noto Serif TC';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('https://tw.hicdn.beanfun.com/fonts/NotoSerifTC/noto-serif-tc-v32-chinese-traditional-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Noto Serif TC';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('https://tw.hicdn.beanfun.com/fonts/NotoSerifTC/noto-serif-tc-v32-chinese-traditional-900.woff2') format('woff2');
} */
@font-face {
  font-family: "Noto Serif TC";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://tw.hicdn.beanfun.com/fonts/NotoSerifTC/noto-serif-tc-v32-chinese-traditional-600.woff2") format("woff2");
}
/*function & variables*/
/* design start */
html {
  font-size: 768px;
}

body, input, button, textarea, select, optgroup {
  font-family: "PingFangTC-Regular", "Heiti TC", "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1;
}

body {
  background: url(img/body-bg.jpg) 50% 0% repeat-y #070b26;
  text-align: center;
  font-size: 0.0299479167rem;
  line-height: 1.3;
  color: #fff;
  font-weight: 300;
}

input, button, textarea, select, optgroup {
  padding: 0;
  margin: 0;
  outline: none;
  border: none;
  box-sizing: border-box;
  border-radius: 0;
  appearance: none;
  background: none;
  display: inline-block;
}

h2, h3 {
  margin: 0 0 1em 0;
  font-family: "Noto Serif TC", "PMingLiU", "Times New Roman", serif;
  font-weight: 600;
  line-height: 1;
}

h2 {
  padding: 0.2083333333rem 0 0 0;
  position: relative;
  background: url(img/h2-bg.png) 50% 0%/0.2044270833rem auto no-repeat;
}
h2:after {
  content: attr(data-text);
  font-size: 0.0911458333rem;
  background-image: radial-gradient(circle at 50% 100%, #248966, #53ffed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h3 {
  margin: 0 0 0.5em 0;
  font-size: 0.0716145833rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #38ade4;
}
h3:before, h3:after {
  content: "";
  width: 0.1549479167rem;
  aspect-ratio: 119/29;
  background: url(img/h3-deco.png) 50% 50%/100% 100% no-repeat;
}
h3:after {
  transform: scaleX(-1);
}

P {
  margin: 0 0 1em 0;
}
P br {
  display: none;
}

em {
  font-style: normal;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
}

.hr {
  width: 1.5625rem;
  aspect-ratio: 1200/59;
  margin: 0 auto 0.078125rem auto;
  background: url(img/hr-bg.png) 0 0/100% 100% no-repeat;
}

.hr.down {
  margin: 0.078125rem auto 0 auto;
  transform: scaleY(-1);
}

.intro {
  min-width: 1.5625rem;
  height: 1.8489583333rem;
  background: url(img/intro-title.png) 50% 0 no-repeat, url(img/intro_bg.jpg) 50% 0 no-repeat;
  overflow: hidden;
  position: relative;
  display: none;
}
.intro .intro-char {
  width: 1.8854166667rem;
  aspect-ratio: 1448/1199;
  background: url(img/intro-char.png) 0 0/100% 100% no-repeat;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  animation: moveLeftRight 2s ease-in-out infinite;
}
.intro.active {
  display: block;
}

@keyframes moveLeftRight {
  0% {
    transform: translateX(-50%) translateX(0);
  }
  50% {
    transform: translateX(-50%) translate(0.0130208333rem, 0.0065104167rem);
  }
  100% {
    transform: translateX(-50%) translateX(0);
  }
}
.logo {
  width: 0.1510416667rem;
  aspect-ratio: 116/92;
  font-size: 0;
  background: url(img/logo.png) 0 0/100% 100% no-repeat;
  position: absolute;
  left: 0.0260416667rem;
  top: 0.0260416667rem;
  z-index: 10;
}

.container {
  min-width: 1.5625rem;
  display: none;
}
.container.active {
  display: block;
}

.sec-youtube {
  padding: 0.2604166667rem 0 0 0;
  margin-bottom: 0.1041666667rem;
}
.sec-youtube iframe {
  width: 1.25rem;
  height: 0.703125rem;
}

.sec-new-dongeon {
  margin-bottom: 0.2083333333rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.sec-new-dongeon p {
  color: #6ab5d8;
}
.sec-new-dongeon p em {
  color: #5bfbcc;
}
.sec-new-dongeon .gallery {
  width: 1.1588541667rem;
  margin-bottom: 0.078125rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.sec-new-dongeon .gallery img {
  width: 32.8%;
  margin-bottom: 0.0130208333rem;
  opacity: 0.6;
  cursor: pointer;
}
.sec-new-dongeon .gallery img:hover {
  opacity: 1;
}
.sec-new-dongeon .setps {
  display: flex;
  justify-content: center;
}
.sec-new-dongeon .setps .step {
  width: 0.36328125rem;
  aspect-ratio: 279/147;
  margin: 0 -0.0130208333rem;
  font-size: 0;
  background: url("_") 50% 50%/100% 100% no-repeat;
}
.sec-new-dongeon .setps .step:hover {
  filter: brightness(1.2);
  cursor: help;
}
.sec-new-dongeon .setps .step1 {
  background-image: url(img/step01.png);
}
.sec-new-dongeon .setps .step2 {
  background-image: url(img/step02.png);
}
.sec-new-dongeon .setps .step3 {
  background-image: url(img/step03.png);
}
.sec-new-dongeon .setps .step4 {
  background-image: url(img/step04.png);
}

.tippy-box[data-theme=tip-type1] {
  font-size: 0.0260416667rem;
  text-align: left;
  box-shadow: 0 0 0.01953125rem rgba(0, 0, 0, 0.3);
}
.tippy-box[data-theme=tip-type1] .tippy-content {
  padding: 0.0260416667rem;
  background-color: #41acff;
}
.tippy-box[data-theme=tip-type1] .tippy-content .addl {
  padding: 0.01953125rem 0.0260416667rem;
  margin-top: 0.0130208333rem;
  background: #0c3657;
  color: #b2d1e9;
}
.tippy-box[data-theme=tip-type1] .tippy-content .addl img {
  max-width: 100%;
}
.tippy-box[data-theme=tip-type1] .tippy-arrow {
  color: #41acff;
}

.tippy-box[data-placement^=bottom][data-theme=tip-type1] > .tippy-arrow:before, .tippy-box[data-placement^=top][data-theme=tip-type1] > .tippy-arrow:before {
  transform: scale(1.5);
}

.tippy-box[data-theme=type2] {
  font-size: 0.0260416667rem;
  text-align: left;
  color: #ffbdbd;
  box-shadow: 0 0 0.01953125rem rgba(0, 0, 0, 0.3);
}
.tippy-box[data-theme=type2] .tippy-content {
  padding: 0.0260416667rem;
  background-color: #df6262;
}
.tippy-box[data-theme=type2] .tippy-content h4 {
  color: #fff;
  margin: 0;
}

.sec-new-system {
  margin-bottom: 0.15625rem;
}
.sec-new-system h2 {
  margin-bottom: 0.078125rem;
}
.sec-new-system p {
  color: #6ab5d8;
}
.sec-new-system h2, .sec-new-system h3, .sec-new-system p {
  position: relative;
  z-index: 1;
}
.sec-new-system .phases {
  min-width: 1.5625rem;
  overflow: hidden;
  margin-top: -0.1302083333rem;
}
.sec-new-system .phases .phases-wrap {
  width: 1.5625rem;
  aspect-ratio: 1200/830;
  margin: 0 auto;
  position: relative;
}
.sec-new-system .phases .phases-wrap .phase {
  width: 0.7421875rem;
  aspect-ratio: 570/790;
  font-size: 0;
  position: absolute;
  background: url("_") 0 0/100% 100% no-repeat;
}
.sec-new-system .phases .phases-wrap .phase:before {
  content: "";
  width: 0.30078125rem;
  aspect-ratio: 231/86;
  background: url("_") 0 0/100% 100% no-repeat;
  position: absolute;
}
.sec-new-system .phases .phases-wrap .phase1 {
  left: -0.078125rem;
  top: 0rem;
  background-image: url(img/boss-phase1.png);
}
.sec-new-system .phases .phases-wrap .phase1:before {
  background-image: url(img/boss-phase1-title.png);
  left: 0.078125rem;
  top: 0.4817708333rem;
}
.sec-new-system .phases .phases-wrap .phase2 {
  left: 0.5598958333rem;
  top: 0.0260416667rem;
  background-image: url(img/boss-phase2.png);
}
.sec-new-system .phases .phases-wrap .phase2:before {
  background-image: url(img/boss-phase2-title.png);
  left: 0rem;
  top: 0.4166666667rem;
}
.sec-new-system .phases .phases-wrap .phase3 {
  left: 1.0026041667rem;
  top: 0.0520833333rem;
  background-image: url(img/boss-phase3.png);
}
.sec-new-system .phases .phases-wrap .phase3:before {
  background-image: url(img/boss-phase3-title.png);
  left: 0.2473958333rem;
  top: 0.4036458333rem;
}

.sec-booty {
  width: 1.5625rem;
  padding-bottom: 0.2604166667rem;
  margin: 0 auto;
}
.sec-booty p {
  color: #6f8a82;
}
.sec-booty .btn {
  padding: 0.0416666667rem 0.234375rem;
  margin: 0.0260416667rem 0 0.1171875rem 0;
  color: #1c3432;
  font-size: 0.0390625rem;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
  line-height: 1;
  vertical-align: middle;
  outline: 0;
  border: none;
  box-sizing: border-box;
  background: linear-gradient(to right, #19fff4, #adffae);
  appearance: none;
  display: inline-block;
}
.sec-booty .weapons .details {
  margin-bottom: 0.0260416667rem;
}
.sec-booty .weapons .details .item {
  display: none;
  justify-content: space-between;
  align-items: flex-start;
}
.sec-booty .weapons .details .item.active {
  display: flex;
}
.sec-booty .weapons .details .item .img img {
  display: block;
}
.sec-booty .weapons .details .item table {
  width: 0.9375rem;
  text-align: left;
  color: #808cbf;
  font-size: 0.0260416667rem;
  background: #121844;
}
.sec-booty .weapons .details .item table th, .sec-booty .weapons .details .item table td {
  padding: 0.0260416667rem;
  border-bottom: 2px solid #2e3566;
}
.sec-booty .weapons .details .item table th {
  width: 32%;
  text-align: center;
}
.sec-booty .weapons .details .item table td {
  background: #050a33;
}
.sec-booty .weapons .note {
  padding: 0.0260416667rem 0;
  margin-bottom: 0.1302083333rem;
  font-size: 0.0260416667rem;
  color: #9098b8;
  background: rgba(20, 21, 30, 0.7);
}
.sec-booty .powers .details {
  margin-bottom: 0.078125rem;
}
.sec-booty .powers .details .item {
  display: none;
  color: #8a9be6;
}
.sec-booty .powers .details .item.active {
  display: block;
}
.sec-booty .powers .details .item .title {
  margin-bottom: 0.0260416667rem;
  font-size: 0.0416666667rem;
  color: #39ffe6;
  font-weight: 500;
}
.sec-booty .powers .details .item em {
  color: #b8776a;
}
.sec-booty .weapons .menu, .sec-booty .powers .menu {
  margin-bottom: 0.0260416667rem;
  display: flex;
  flex-wrap: wrap;
  background: #20222f;
}
.sec-booty .weapons .menu a, .sec-booty .powers .menu a {
  width: 20%;
  padding: 0.0325520833rem 0;
  font-size: 0.0260416667rem;
  color: #8b90b3;
  text-decoration: none;
  box-sizing: border-box;
  border-right: 0.0013020833rem solid #313342;
  border-bottom: 0.0013020833rem solid #313342;
}
.sec-booty .weapons .menu a:nth-child(5n), .sec-booty .powers .menu a:nth-child(5n) {
  border-right: none;
}
.sec-booty .weapons .menu a:empty, .sec-booty .powers .menu a:empty {
  pointer-events: none;
}
.sec-booty .weapons .menu a.active, .sec-booty .powers .menu a.active {
  color: #fff;
  background: #cd3a8d;
}

.back-to-intro {
  width: 100%;
  height: 0.2669270833rem;
  font-size: 0;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  background: url(img/nav-bg.png) 50% 0 no-repeat;
  pointer-events: none;
}
.back-to-intro a {
  width: 0.28125rem;
  aspect-ratio: 216/158;
  background: url(img/back-home.png) 50% 50%/100% 100% no-repeat;
  display: inline-block;
  pointer-events: auto;
}

.side-menu {
  width: 0.3828125rem;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9;
  transform: translateX(100%);
  transition: transform 0.5s;
}
.side-menu .side-menu-wrap {
  height: 100%;
  font-weight: bold;
  background: #000;
  overflow: auto;
}
.side-menu .side-menu-wrap::-webkit-scrollbar {
  display: none;
}
.side-menu .side-menu-wrap * {
  display: block;
}
.side-menu .side-menu-wrap blockbustar {
  height: 0.0703125rem;
  aspect-ratio: 588/108;
  background: url(img/blockbustar.png) 0 0/100% 100% no-repeat;
}
.side-menu .side-menu-wrap a {
  text-decoration: none;
}
.side-menu .side-menu-wrap .home {
  padding: 0.0260416667rem 0;
  font-size: 0.0208333333rem;
  color: #8a8a8a;
}
.side-menu .side-menu-wrap blockbustar ~ a {
  height: 0.1276041667rem;
  color: #6793f7;
  position: relative;
  border-left: 0.0052083333rem solid #4f33f9;
  background: url(img/nav-item-bg.jpg) 0 0/100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.side-menu .side-menu-wrap blockbustar ~ a:after {
  content: "";
  width: 100%;
  height: 0.0013020833rem;
  background: #27166c;
  position: absolute;
  bottom: 0;
  left: 0;
}
.side-menu .side-menu-wrap blockbustar ~ a:hover {
  filter: brightness(1.1);
  color: #31f8ff;
}
.side-menu .side-menu-wrap blockbustar ~ a:hover span {
  color: #fff;
}
.side-menu .side-menu-wrap blockbustar ~ a span {
  font-size: 0.0208333333rem;
  font-weight: 400;
  color: #5062cc;
}
.side-menu .side-menu-toggler {
  width: 0.046875rem;
  padding: 0.0104166667rem 0;
  background: #000;
  font-size: 0.0208333333rem;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-99%, -50%);
  cursor: pointer;
}
.side-menu .side-menu-toggler span {
  display: block;
}
.side-menu .side-menu-toggler .X {
  display: none;
}
.side-menu.active {
  transform: translateX(0%);
}
.side-menu.active .side-menu-toggler .E {
  display: none;
}
.side-menu.active .side-menu-toggler .X {
  display: block;
}

#gbox .gbox-wrap {
  width: auto;
  max-width: none;
  margin: 0.1041666667rem 0;
  padding: 0;
}
#gbox .gbox-wrap .gbox-content {
  padding: 0;
  position: relative;
}
#gbox .gbox-wrap .gbox-content img {
  display: block;
}
#gbox .gbox-wrap .gbox-content .gbox-tip {
  width: 0.0520833333rem;
  aspect-ratio: 1/1;
  position: absolute;
  left: 0.6028645833rem;
  top: 0.43359375rem;
  background: red;
  opacity: 0;
}
#gbox .gbox-wrap .gbox-close {
  font-size: 0.0651041667rem;
  color: #fff;
  left: 50%;
  top: -0.078125rem;
  transform: translateX(-50%);
}
#gbox .gbox-wrap .gbox-action .gbox-btn {
  margin: 0;
}

@media screen and (max-width: 768px) {
  html {
    font-size: 100vw;
  }
  body {
    font-size: 0.0390625rem;
  }
  body.black {
    background: #000;
  }
  p br {
    display: block;
  }
  .hr {
    width: 100%;
    aspect-ratio: 768/61;
    background: url(img/hr-bg-m.png) 0 0/100% 100% no-repeat;
  }
  .container {
    min-width: 0;
    padding: 0 0.0520833333rem;
  }
  .intro {
    min-width: 0;
    background: url(img/intro-title-m.png) 50% 0/100% auto no-repeat, url(img/intro_bg-m.jpg) 50% 0/100% auto no-repeat;
  }
  .intro .intro-char {
    bottom: -0.078125rem;
  }
  .back-to-intro {
    height: 0.3841145833rem;
    background: url(img/nav-bg-m.png) 50% 0/100% 100% no-repeat;
  }
  .back-to-intro a {
    position: relative;
    top: 0.0520833333rem;
  }
  .logo {
    width: 0.15625rem;
  }
  .sec-youtube {
    padding-top: 0.3385416667rem;
  }
  .sec-youtube iframe {
    width: 100%;
    height: 0.546875rem;
  }
  .sec-new-dongeon {
    height: 1.8229166667rem;
    display: block;
  }
  .sec-new-dongeon .gallery {
    width: 100%;
  }
  .sec-new-dongeon .gallery img {
    opacity: 1;
  }
  .sec-new-dongeon .setps {
    width: 100%;
    position: relative;
  }
  .sec-new-dongeon .setps .step {
    width: 0.390625rem;
    position: absolute;
  }
  .sec-new-dongeon .setps .step.step1 {
    left: 0;
    top: 0;
  }
  .sec-new-dongeon .setps .step.step2 {
    left: 0.3645833333rem;
    top: 0;
  }
  .sec-new-dongeon .setps .step.step3 {
    right: 0.3645833333rem;
    top: 0.234375rem;
  }
  .sec-new-dongeon .setps .step.step4 {
    right: 0;
    top: 0.234375rem;
  }
  .sec-new-system .phases {
    width: 1rem;
    min-width: 0;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .sec-new-system .phases .phases-wrap {
    width: 100%;
    height: 1.4322916667rem;
    aspect-ratio: auto;
  }
  .sec-new-system .phases .phases-wrap .phase2 {
    left: 0.546875rem;
  }
  .sec-new-system .phases .phases-wrap .phase3 {
    top: 0.5208333333rem;
    left: 0.1302083333rem;
  }
  .sec-new-system .sys-img {
    max-width: 100%;
  }
  .sec-booty {
    width: 100%;
  }
  .sec-booty .weapons .details .item .img {
    margin-bottom: 0.0260416667rem;
  }
  .sec-booty .weapons .details .item .img img {
    width: 100%;
  }
  .sec-booty .weapons .details .item table {
    width: 100%;
    font-size: 0.0390625rem;
  }
  .sec-booty .weapons .details .item.active {
    display: block;
  }
  .sec-booty .weapons .note {
    padding: 0.0390625rem 0;
    font-size: 0.0364583333rem;
  }
  .sec-booty .weapons .menu a, .sec-booty .powers .menu a {
    width: 50%;
    font-size: 0.0390625rem;
    border-right: 0.0013020833rem solid #313342;
    border-bottom: 0.0013020833rem solid #313342;
  }
  .sec-booty .weapons .menu a:nth-child(5n), .sec-booty .powers .menu a:nth-child(5n) {
    border-right: 0.0013020833rem solid #313342;
  }
  .sec-booty .weapons .menu a:nth-child(2n), .sec-booty .powers .menu a:nth-child(2n) {
    border-right: none;
  }
  .side-menu {
    width: 0.65078125rem;
  }
  .side-menu .side-menu-wrap blockbustar {
    width: 100%;
    height: auto;
  }
  .side-menu .side-menu-wrap .home {
    padding: 0.0442708333rem 0;
    font-size: 0.0416666667rem;
  }
  .side-menu .side-menu-wrap blockbustar ~ a {
    height: 0.2169270833rem;
    font-size: 0.0520833333rem;
    border-left: 0.0088541667rem solid #4f33f9;
  }
  .side-menu .side-menu-wrap blockbustar ~ a:after {
    height: 0.0022135417rem;
  }
  .side-menu .side-menu-wrap blockbustar ~ a span {
    font-size: 0.0416666667rem;
  }
  .side-menu .side-menu-toggler {
    width: 0.0796875rem;
    padding: 0.0177083333rem 0;
    font-size: 0.0416666667rem;
  }
  #gbox .gbox-wrap .gbox-content img {
    width: 90vw;
  }
  #gbox .gbox-wrap .gbox-content .gbox-tip {
    width: 0.1302083333rem;
    left: 0.703125rem;
    top: 0.44921875rem;
  }
}/*# sourceMappingURL=default.css.map */