@charset "UTF-8";
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%;
  font: inherit;
  vertical-align: baseline;
}

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

body {
  line-height: 1;
}

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

.gbox .gbox-wrap {
  width: 40vw;
  max-width: none;
  border-radius: 20px;
  box-sizing: border-box;
  margin: 5.2083333333vw 0;
  padding: 3.6458333333vw 0 3.6458333333vw 0;
  background-color: #f0d3a8;
  border: 0.2083333333vw solid #9b5c23;
}
.gbox .gbox-wrap .gbox-content {
  font-size: 1.5625vw;
  font-weight: bold;
  color: #5c3604;
}
.gbox .gbox-wrap .gbox-close {
  width: 2.6041666667vw;
  height: 2.6041666667vw;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  top: 1.0416666667vw;
  right: 1.0416666667vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/btn-close-01-pc.png);
  z-index: 4;
}
@media screen and (max-width: 767px) {
  .gbox .gbox-wrap {
    width: 66.6666666667vw;
    border-radius: 2.6666666667vw;
    margin: 13.3333333333vw 0;
    padding: 9.3333333333vw 0 9.3333333333vw 0;
  }
  .gbox .gbox-wrap .gbox-content {
    font-size: 4vw;
    padding: 2.6666666667vw;
  }
  .gbox .gbox-wrap .gbox-close {
    width: 6.5333333333vw;
    height: 6.5333333333vw;
    top: 2.6666666667vw;
    right: 2.6666666667vw;
  }
}

.gbox.gbox-description .gbox-wrap {
  width: 57.8645833333vw;
  height: 48.125vw;
  max-width: none;
  border-radius: 0;
  box-sizing: border-box;
  margin: 0 0 0 0;
  padding: 13.0208333333vw 6.25vw 5.2083333333vw 8.8541666667vw;
  background-color: transparent;
  border: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/lightbox-bg-pc.png);
}
.gbox.gbox-description .gbox-wrap::after {
  content: "";
  display: block;
  width: 15.625vw;
  height: 15.625vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/user-default.png);
  position: absolute;
  bottom: -3.125vw;
  right: 1.0416666667vw;
  pointer-events: none;
}
.gbox.gbox-description .gbox-wrap .gbox-content {
  width: 100%;
  height: 100%;
  font-size: 1.5625vw;
  font-weight: bold;
  color: #695338;
}
.gbox.gbox-description .gbox-wrap .gbox-close {
  top: 6.7708333333vw;
  right: 5.2083333333vw;
}
.gbox.gbox-description .lb-scroll {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  font-size: 1.4583333333vw;
  font-weight: normal;
  line-height: 1.2;
}
.gbox.gbox-description .lb-scroll .scroll-content > div {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .gbox.gbox-description .gbox-wrap {
    width: 100%;
    height: 158.5333333333vw;
    max-width: none;
    border-radius: 0;
    box-sizing: border-box;
    padding: 40vw 10.6666666667vw 14.6666666667vw 10.6666666667vw;
    background-image: url(./img/lightbox-bg-mb.png);
  }
  .gbox.gbox-description .gbox-wrap::after {
    content: "";
    display: block;
    width: 40vw;
    height: 40vw;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(./img/user-default.png);
    position: absolute;
    bottom: -9.3333333333vw;
    right: -5.3333333333vw;
  }
  .gbox.gbox-description .gbox-wrap .gbox-content {
    width: 100%;
    height: 100%;
    font-size: 4vw;
    font-weight: bold;
    color: #695338;
    padding: 0;
  }
  .gbox.gbox-description .gbox-wrap .gbox-close {
    top: 19.3333333333vw;
    right: 4vw;
  }
  .gbox.gbox-description .lb-scroll {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .gbox.gbox-description .lb-scroll .scroll-content {
    font-size: 3.7333333333vw;
  }
}

.scroll-content {
  padding-right: 0.78125vw !important;
}
@media screen and (max-width: 767px) {
  .scroll-content {
    padding-right: 2vw !important;
  }
}

.scrollbar-track {
  width: 0.78125vw !important;
  background-color: #968258 !important;
  box-sizing: border-box;
  right: -0.1041666667vw !important;
  border-radius: 20px !important;
}
.scrollbar-track .scrollbar-thumb {
  width: 0.9375vw !important;
  background-color: #fef2d7 !important;
  border: 0.15625vw solid #78633c !important;
  left: -0.0520833333vw;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px !important;
}
.scrollbar-track .scrollbar-thumb::before {
  width: 0.46875vw;
  height: 97%;
  content: "";
  display: block;
  background-color: #480f00;
  border-radius: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .scrollbar-track {
    width: 2vw !important;
    background-color: #968258 !important;
    box-sizing: border-box;
    right: -0.2666666667vw !important;
    border-radius: 20px !important;
  }
  .scrollbar-track .scrollbar-thumb {
    width: 2.6666666667vw !important;
    background-color: #fef2d7 !important;
    border: 0.4vw solid #78633c !important;
    left: -0.2666666667vw;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px !important;
  }
  .scrollbar-track .scrollbar-thumb::before {
    width: 1.3333333333vw;
  }
}

.canvas-video-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "微軟正黑體", "PingFangTC-Regular", "Heiti TC", "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.canvas-video-wrapper.mobile-mode {
  background-color: rgba(0, 0, 0, 0.8);
}
.canvas-video-wrapper.mobile-mode .canvas-overlay {
  display: none;
}
.canvas-video-wrapper .canvas-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
  pointer-events: none;
  transition: background-color 0.3s ease;
}
.canvas-video-wrapper .canvas-overlay.full-black {
  background-color: rgb(0, 0, 0);
}
.canvas-video-wrapper .canvas-container {
  position: relative;
  width: 75vw;
  height: 46.875vw;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .canvas-video-wrapper .canvas-container {
    width: 100%;
    height: 100%;
  }
}
.canvas-video-wrapper #videoCanvas {
  position: absolute;
  width: 75vw;
  height: 46.875vw;
  z-index: 0;
  pointer-events: none;
  display: block;
  object-fit: cover;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.canvas-video-wrapper .swiper {
  width: 100%;
  height: 100%;
}
.canvas-video-wrapper .swiper-button-prev {
  width: 2.8125vw;
  height: 3.3854166667vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/arrow-03-pc.png);
  border: none;
  outline: none;
}
.canvas-video-wrapper .swiper-button-prev::after {
  display: none;
}
@media screen and (max-width: 767px) {
  .canvas-video-wrapper .swiper-button-prev {
    width: 7.2vw;
    height: 8.6666666667vw;
  }
}
.canvas-video-wrapper .swiper-button-next {
  width: 2.8125vw;
  height: 3.3854166667vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/arrow-03_1-pc.png);
  border: none;
  outline: none;
}
.canvas-video-wrapper .swiper-button-next::after {
  display: none;
}
@media screen and (max-width: 767px) {
  .canvas-video-wrapper .swiper-button-next {
    width: 7.2vw;
    height: 8.6666666667vw;
  }
}
.canvas-video-wrapper .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75vw;
  height: 46.875vw;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
  box-sizing: border-box;
  padding: 6.7708333333vw 5.2083333333vw 4.1666666667vw 5.2083333333vw;
}
.canvas-video-wrapper .content.show {
  opacity: 1;
  pointer-events: auto;
}
@media screen and (max-width: 767px) {
  .canvas-video-wrapper .content {
    width: 100%;
    height: 115.2vw;
    padding: 18.6666666667vw 0vw 5.3333333333vw 0vw;
    background-image: url(./img/video/roll-01.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .canvas-video-wrapper .content[data-type="1"] {
    background-image: url(./img/video/roll-01.png);
  }
  .canvas-video-wrapper .content[data-type="2"] {
    background-image: url(./img/video/roll-02.png);
  }
  .canvas-video-wrapper .content[data-type="3"] {
    background-image: url(./img/video/roll-03.png);
  }
  .canvas-video-wrapper .content[data-type="4"] {
    background-image: url(./img/video/roll-04.png);
  }
  .canvas-video-wrapper .content[data-type="5"] {
    background-image: url(./img/video/roll-05.png);
  }
  .canvas-video-wrapper .content[data-type="6"] {
    background-image: url(./img/video/roll-06.png);
  }
  .canvas-video-wrapper .content[data-type="7"] {
    background-image: url(./img/video/roll-07.png);
  }
  .canvas-video-wrapper .content[data-type="8"] {
    background-image: url(./img/video/roll-08.png);
  }
  .canvas-video-wrapper .content[data-type="9"] {
    background-image: url(./img/video/roll-09.png);
  }
}
.canvas-video-wrapper .close-btn {
  width: 3.0729166667vw;
  height: 3.0729166667vw;
  position: absolute;
  top: 5.2083333333vw;
  right: 5.46875vw;
  z-index: 10000;
  pointer-events: auto;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .canvas-video-wrapper .close-btn {
    width: 7.8666666667vw;
    height: 7.8666666667vw;
    top: 20vw;
    right: 4vw;
  }
}

.leaf {
  width: 12.7604166667vw;
  height: 12.7604166667vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/leaf-pc.png);
  position: absolute;
  right: 4.6875vw;
  bottom: 3.6458333333vw;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .leaf {
    width: 32.6666666667vw;
    height: 32.6666666667vw;
    right: -12vw;
    bottom: 6.6666666667vw;
  }
}

.step-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 5.2083333333vw;
}
@media screen and (max-width: 767px) {
  .step-content {
    padding: 0 14vw 0 14.6666666667vw;
  }
}

.title.step {
  font-size: 3.90625vw;
  font-weight: bold;
  color: #804c11;
  margin-bottom: 3.6458333333vw;
}
@media screen and (max-width: 767px) {
  .title.step {
    font-size: 10vw;
    margin-bottom: 8vw;
  }
}

.userPhoto {
  width: 10.4166666667vw;
  height: 10.4166666667vw;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  margin-bottom: 2.0833333333vw;
  position: relative;
}
.userPhoto > div {
  width: 9.375vw;
  height: 9.375vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.userPhoto > div img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top -0.4166666667vw left 0.15625vw;
  transform: scale(3.5);
  pointer-events: none;
}
.userPhoto.default img {
  transform: scale(2.5);
}
@media screen and (max-width: 767px) {
  .userPhoto {
    width: 26.6666666667vw;
    height: 26.6666666667vw;
    margin-bottom: 5.3333333333vw;
  }
  .userPhoto > div {
    width: 24vw;
    height: 24vw;
  }
  .userPhoto > div img {
    object-position: top -0.8vw left 0.4vw;
    transform: scale(3.5);
  }
}

.step-text {
  width: 36.4583333333vw;
  max-height: 23.4375vw;
  font-size: 1.5625vw;
  font-weight: bold;
  color: #804c11;
  text-align: center;
  line-height: 1.2;
}
@media screen and (max-width: 767px) {
  .step-text {
    width: 60vw;
    max-height: 60vw;
    font-size: 4vw;
    line-height: 1.3;
    box-sizing: border-box;
    padding: 0 0vw;
  }
}

@media screen and (max-width: 767px) {
  .step-text.friends br {
    display: none;
  }
  .step-text.friends span {
    display: block;
  }
  .step-text.friends .scroll-content {
    font-size: 3.2vw;
  }
}

.class-trans-content {
  display: flex;
  flex-direction: column;
  gap: 1.3020833333vw;
  margin-bottom: 2.0833333333vw;
  height: 19.2708333333vw;
  flex-wrap: wrap;
}
.class-trans-content.normal {
  height: auto;
}
.class-trans-content > div {
  display: flex;
  width: 18.75vw;
  height: 2.7083333333vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/class-trans-bg-pc.png);
  position: relative;
}
.class-trans-content > div::before {
  content: "";
  display: block;
  position: absolute;
  width: 0.2604166667vw;
  height: 2.0833333333vw;
  background-color: #b59769;
  left: 1.1979166667vw;
  bottom: -1.5625vw;
}
.class-trans-content > div:nth-child(5)::before {
  display: none;
}
.class-trans-content > div:last-child::before {
  display: none;
}
.class-trans-content > div span:nth-child(1) {
  width: 2.65625vw;
  height: 2.6041666667vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/icon-class-off-pc.png);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
.class-trans-content > div span:nth-child(2) {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.5625vw;
  font-weight: bold;
  color: #603823;
  color: #717171;
  box-sizing: border-box;
  padding-left: 3.3854166667vw;
}
.class-trans-content > div.active span:nth-child(1) {
  background-image: url(./img/icon-class-pc.png);
}
.class-trans-content > div.active span:nth-child(2) {
  color: #603823;
}
@media screen and (max-width: 767px) {
  .class-trans-content {
    row-gap: 1.3333333333vw;
    column-gap: 0;
    margin-bottom: 2.6666666667vw;
    height: 40vw;
  }
  .class-trans-content.normal {
    height: auto;
  }
  .class-trans-content > div {
    width: 36.8vw;
    height: 6.9333333333vw;
    background-image: url(./img/class-trans-bg-mb.png);
    box-sizing: border-box;
    padding: 0 0 0 4vw;
  }
  .class-trans-content > div::before {
    width: 0.6666666667vw;
    height: 5.3333333333vw;
    left: 2.9333333333vw;
    bottom: -4vw;
  }
  .class-trans-content > div span:nth-child(1) {
    width: 6.8vw;
    height: 6.6666666667vw;
    left: 0;
  }
  .class-trans-content > div span:nth-child(2) {
    font-size: 3.2vw;
    box-sizing: border-box;
    padding-left: 4vw;
  }
}

.icon.light {
  width: 6.0416666667vw;
  height: 8.5416666667vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/icon-light-pc.png);
  margin-bottom: 1.0416666667vw;
}
@media screen and (max-width: 767px) {
  .icon.light {
    width: 15.4666666667vw;
    height: 21.8666666667vw;
    margin-bottom: 2.6666666667vw;
  }
}

.step-text .job {
  color: #381600;
}

.step-text.class {
  font-size: 1.4583333333vw;
}
@media screen and (max-width: 767px) {
  .step-text.class {
    font-size: 3.4666666667vw;
  }
}

.step-text.trans {
  display: flex;
  justify-content: center;
  max-height: 14.5833333333vw;
  width: 40.625vw;
}
@media screen and (max-width: 767px) {
  .step-text.trans {
    width: 57.3333333333vw;
    max-height: 37.3333333333vw;
  }
}

.step-text .deco {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin: 1.0416666667vw;
  gap: 0.5208333333vw;
  word-break: break-all;
}
.step-text .deco div {
  width: auto;
  height: auto;
  background-size: 100% 100%;
  border-image-source: url(./img/test.png);
  border-image-slice: 8 8 8 8 fill;
  border-image-width: 0.3125vw;
  border-image-repeat: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5208333333vw 2.0833333333vw;
  box-sizing: border-box;
  font-size: 2.6041666667vw;
  font-weight: bold;
  color: #381600;
}
.step-text .deco.text div {
  font-size: 1.5625vw;
  color: #804c11;
  padding: 0.78125vw 1.0416666667vw;
  background-size: 100% 100%;
  border-image-source: url(./img/test.png);
  border-image-slice: 8 8 8 8 fill;
  border-image-width: 0.3125vw;
  border-image-repeat: stretch;
}
@media screen and (max-width: 767px) {
  .step-text .deco {
    margin: 2.6666666667vw;
    gap: 1.3333333333vw;
  }
  .step-text .deco div {
    border-image-slice: 5 5 5 5 fill;
    border-image-width: 0.8vw;
    padding: 1.3333333333vw 5.3333333333vw;
    font-size: 6.6666666667vw;
  }
  .step-text .deco.date div {
    font-size: 6.6666666667vw;
  }
  .step-text .deco.text div {
    font-size: 3.4666666667vw;
    border-image-source: url(./img/test.png);
    border-image-slice: 5 5 5 5 fill;
    border-image-width: 0.8vw;
    border-image-repeat: stretch;
  }
}

.step-text .deco.t1 {
  display: inline-block;
  box-sizing: border-box;
  padding: 0 0.2604166667vw;
  margin: 0 0 0.5208333333vw 0;
  gap: 0vw;
  word-break: break-all;
}
.step-text .deco.t1 span {
  width: auto;
  height: auto;
  background-size: 100% 100%;
  border-image-source: url(./img/test.png);
  border-image-slice: 3 3 3 3 fill;
  border-image-width: 0.15625vw;
  border-image-repeat: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4166666667vw 1.0416666667vw;
  box-sizing: border-box;
  font-size: 1.5625vw;
  font-weight: bold;
  color: #381600;
}
@media screen and (max-width: 767px) {
  .step-text .deco.t1 {
    margin: 0.6666666667vw;
    gap: 0vw;
  }
  .step-text .deco.t1 span {
    border-image-slice: 3 3 3 3 fill;
    border-image-width: 0.4vw;
    padding: 0.6666666667vw 1.3333333333vw;
    font-size: 4vw;
  }
}

.icon.bag {
  width: 5.8333333333vw;
  height: 5.7291666667vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/icon-bag-pc.png);
  margin-bottom: 1.5625vw;
}
@media screen and (max-width: 767px) {
  .icon.bag {
    width: 14.9333333333vw;
    height: 14.6666666667vw;
    margin-bottom: 2.6666666667vw;
  }
}

.icon.mushroom {
  width: 5.46875vw;
  height: 5.8333333333vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/icon-mushroom-pc.png);
  margin-bottom: 1.5625vw;
}
@media screen and (max-width: 767px) {
  .icon.mushroom {
    width: 14vw;
    height: 14.9333333333vw;
    margin-bottom: 4vw;
  }
}

.icon.photo {
  width: 46.875vw;
  height: 27.1875vw;
  background-image: url(./img/step-photo-01-pc.png);
  margin-bottom: 2.0833333333vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.icon.photo.ff {
  background-image: url(./img/step-photo-02-pc.png);
}
.icon.photo.ff span {
  display: block;
  width: 9.375vw;
  height: 9.375vw;
  position: absolute;
  overflow: visible;
}
.icon.photo.ff span:nth-child(1) {
  bottom: 2.0833333333vw;
  left: 14.0625vw;
}
.icon.photo.ff span:nth-child(2) {
  bottom: 2.0833333333vw;
  left: 25vw;
}
.icon.photo.ff span:nth-child(3) {
  bottom: 2.0833333333vw;
  left: 29.1666666667vw;
}
.icon.photo.ff span img {
  width: auto;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform: scale(3.5);
  object-position: top -0.3125vw left 0vw;
}
.icon.photo .userOnly {
  width: 9.375vw;
  height: 9.375vw;
  position: absolute;
  overflow: visible;
  bottom: 2.0833333333vw;
  left: 26.0416666667vw;
}
.icon.photo .userOnly img {
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: top -0.4166666667vw left 0.2083333333vw;
  transform: scale(3.5);
  pointer-events: none;
}
.icon.photo .userImage {
  width: 9.375vw;
  height: 9.375vw;
  position: absolute;
  overflow: visible;
  bottom: 1.5625vw;
  left: 17.7083333333vw;
}
.icon.photo .userImage img {
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: top -0.4166666667vw left 0.2083333333vw;
  transform: scale(3.5);
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .icon.photo {
    background-image: url(./img/step-photo-01-mb.png);
    width: 71.7333333333vw;
    height: 42.4vw;
    margin-bottom: 2.6666666667vw;
    position: relative;
    right: 0vw;
  }
  .icon.photo.ff {
    background-image: url(./img/step-photo-02-mb.png);
  }
  .icon.photo.ff span {
    display: block;
    width: 24vw;
    height: 24vw;
  }
  .icon.photo.ff span:nth-child(1) {
    bottom: 2vw;
    left: 13.3333333333vw;
  }
  .icon.photo.ff span:nth-child(2) {
    bottom: 2vw;
    left: 33.3333333333vw;
  }
  .icon.photo.ff span:nth-child(3) {
    bottom: 2vw;
    left: 40.6666666667vw;
  }
  .icon.photo.ff span img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    transform: scale(2.3);
    object-position: top 0vw left 0vw;
  }
  .icon.photo .userOnly {
    width: 24vw;
    height: 24vw;
    position: absolute;
    overflow: visible;
    bottom: -0.2666666667vw;
    left: 34.6666666667vw;
  }
  .icon.photo .userOnly img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top -1.0666666667vw left 0.5333333333vw;
    transform: scale(2.3);
  }
  .icon.photo .userImage {
    width: 24vw;
    height: 24vw;
    position: absolute;
    overflow: visible;
    bottom: -0.2666666667vw;
    left: 20vw;
  }
  .icon.photo .userImage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top -1.0666666667vw left 0.5333333333vw;
    transform: scale(2.3);
  }
}

.step-text .red {
  font-size: 1.875vw;
  font-weight: bold;
  color: #f53104;
  margin: 2.0833333333vw 0;
}
@media screen and (max-width: 767px) {
  .step-text .red {
    font-size: 4.8vw;
    margin: 5.3333333333vw 0;
  }
}

a.pre {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18.0729166667vw;
  height: 6.40625vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/btn-pre-pc.png);
  margin-top: 2.6041666667vw;
}
@media screen and (max-width: 767px) {
  a.pre {
    width: 46.2666666667vw;
    height: 16.4vw;
    margin-top: 6.6666666667vw;
  }
}

.icon.sound {
  width: 4.7916666667vw;
  height: 5vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/icon-sound-pc.png);
  margin-bottom: 2.6041666667vw;
}
@media screen and (max-width: 767px) {
  .icon.sound {
    width: 12.2666666667vw;
    height: 12.8vw;
    margin-bottom: 6.6666666667vw;
  }
}

.choices {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  font-size: inherit;
}
.choices:focus {
  outline: none;
}
.choices[data-type*=select-one] .choices__inner {
  padding: 0 1.5625vw;
}
.choices[data-type*=select-one]:after {
  content: "";
  border: none;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 1.8229166667vw;
  height: 1.5104166667vw;
  background-image: url(./img/arrow-01-pc.png);
  top: 50%;
  transform: translateY(-50%);
  right: 1.5625vw;
  margin: 0;
}
.choices[data-type*=select-one].is-open:after {
  content: "";
  border: none;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 1.8229166667vw;
  height: 1.5104166667vw;
  background-image: url(./img/arrow-01-pc.png);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  right: 1.5625vw;
  margin: 0;
}
.choices[data-type*=select-multiple] .choices__inner, .choices[data-type*=text] .choices__inner {
  cursor: text;
}
@media screen and (max-width: 767px) {
  .choices[data-type*=select-one] .choices__inner {
    padding: 0 4vw;
  }
  .choices[data-type*=select-one]:after {
    width: 6vw;
    height: 4.9333333333vw;
    right: 6.6666666667vw;
  }
  .choices[data-type*=select-one].is-open:after {
    width: 6vw;
    height: 4.9333333333vw;
    right: 6.6666666667vw;
  }
}

.choices__inner {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  font-size: inherit;
  min-height: auto;
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 2.0833333333vw;
  font-size: 1.25vw;
  color: #9b5c23;
}
@media screen and (max-width: 767px) {
  .choices__inner {
    padding: 0 5.3333333333vw;
    font-size: 4vw;
  }
}

.is-focused .choices__inner,
.is-open .choices__inner {
  border: none;
}

.choices__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.25vw !important;
  color: #9b5c23 !important;
}
@media screen and (max-width: 767px) {
  .choices__list {
    font-size: 4vw !important;
  }
}

.choices__list--single {
  display: block;
  padding: 0;
  width: 100%;
}

.choices__list--single .choices__item {
  width: 100%;
}

.choices__list--multiple {
  display: inline;
}
.choices__list--multiple .choices__item {
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  color: inherit;
}

.choices__list--dropdown {
  visibility: hidden;
  z-index: 1000;
  position: absolute;
  width: 100%;
  background: transparent;
  border: none;
  top: 100%;
  margin: 0;
  overflow: visible;
  will-change: visibility;
  max-height: none;
  background-color: #fffbf2 !important;
  border: 0.15625vw solid #beb5a0 !important;
}
.choices__list--dropdown.is-active {
  visibility: visible;
  border-radius: 10px;
}
.choices__list--dropdown .choices__list {
  position: relative;
  max-height: none;
  overflow: visible;
}
.choices__list--dropdown .choices__item {
  position: relative;
  padding: 0;
  font-size: inherit;
  cursor: pointer;
  font-size: 1.25vw !important;
  color: #9b5c23 !important;
  background-color: #fffbf2;
}
@media screen and (max-width: 767px) {
  .choices__list--dropdown {
    border: 0.4vw solid #beb5a0 !important;
  }
  .choices__list--dropdown .choices__item {
    font-size: 4vw !important;
  }
}

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  padding: 1.0416666667vw 1.5625vw;
}
@media screen and (max-width: 767px) {
  .choices__list--dropdown .choices__item,
  .choices__list[aria-expanded] .choices__item {
    padding: 2.6666666667vw 4vw;
  }
}

@media screen and (max-width: 767px) {
  .choices__list--dropdown .choices__list,
  .choices__list[aria-expanded] .choices__list {
    max-height: 57.3333333333vw;
  }
}

.is-flipped .choices__list--dropdown {
  top: auto;
  bottom: 100%;
  margin: 0;
}

.choices__item {
  cursor: default;
}

.choices__item--selectable {
  cursor: pointer;
}

.choices__item--disabled {
  cursor: not-allowed;
  user-select: none;
  opacity: 0.5;
}

.choices__heading {
  padding: 0;
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
}

.choices__button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.choices__button:focus {
  outline: none;
}

.choices__input {
  display: inline-block;
  vertical-align: baseline;
  background: transparent;
  font-size: inherit;
  margin: 0;
  border: 0;
  padding: 0;
  max-width: 100%;
}
.choices__input:focus {
  outline: 0;
}
.choices__input::placeholder {
  color: inherit;
  opacity: 1;
}

.choices__placeholder {
  opacity: 1;
}

@font-face {
  font-family: "GenSenRounded";
  src: url("https://tw.hicdn.beanfun.com/fonts/GenSenRounded/GenSenRounded2TW-R.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GenSenRounded";
  src: url("https://tw.hicdn.beanfun.com/fonts/GenSenRounded/GenSenRounded2TW-M-subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "GenSenRounded", "PingFangTC-Regular", "Heiti TC", "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #000;
}
body.lightbox-open, body.canvas-video-open {
  overflow: hidden !important;
}

#container {
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
  overflow: hidden;
}

.main-content {
  width: 100%;
  height: 56.25vw;
  background-color: #000;
  box-sizing: border-box;
  position: relative;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(./img/body-bg-pc.jpg);
  background-position: center top;
}
@media screen and (max-width: 767px) {
  .main-content {
    width: 100%;
    height: 177.8666666667vw;
    background-image: url(./img/body-bg-mb.jpg);
    background-size: cover;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.nav {
  width: 100%;
  height: 5.2083333333vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(./img/nav-bg-pc.png);
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .nav {
    height: 13.3333333333vw;
  }
}

.nav-content {
  width: 62.5vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.0833333333vw;
}
.nav-content a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #fff;
  font-size: 1.5625vw;
  font-weight: bold;
  cursor: pointer;
}
.nav-content a::before {
  content: "";
  width: 3.1770833333vw;
  height: 2.96875vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/nav-icon-pc.png);
  opacity: 0;
  transition: 0.5s all;
  position: relative;
  left: 0.3645833333vw;
  bottom: 0.1041666667vw;
}
.nav-content a:hover {
  text-shadow: 0 0 10px #f0a930;
}
.nav-content a:hover::before {
  content: "";
  width: 3.1770833333vw;
  height: 2.96875vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/nav-icon-pc.png);
  opacity: 1;
}
.nav-content .logo {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/logo-pc.png);
  width: 6.9270833333vw;
  height: 3.3854166667vw;
}
.nav-content .logo::before {
  display: none;
}
@media screen and (max-width: 767px) {
  .nav-content {
    width: 100%;
    gap: 4vw;
  }
  .nav-content a {
    font-size: 4vw;
  }
  .nav-content a::before {
    display: none;
  }
  .nav-content a:hover {
    text-shadow: none;
  }
  .nav-content a:hover::before {
    display: none;
  }
  .nav-content .logo {
    width: 13.8666666667vw;
    height: 6.8vw;
  }
  .nav-content .logo::before {
    display: none;
  }
}

.social-media-content {
  position: absolute;
  width: 14.8958333333vw;
  height: 19.8958333333vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/socialMedia-bg-pc.png);
  right: 0;
  top: 11.9791666667vw;
  transition: 0.5s all;
}
.social-media-content.close {
  right: -7.5520833333vw;
}
.social-media-content.open {
  right: -14.5833333333vw;
}
.social-media-content .switch-btn {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 5.7291666667vw;
  height: 5.8333333333vw;
  background-size: cover;
  background-position: center bottom;
  top: 0;
  left: -4.4791666667vw;
  position: absolute;
  cursor: pointer;
}
.social-media-content .switch-btn.close {
  background-image: url(./img/socialMedia-btn-close-pc.png);
}
.social-media-content .switch-btn.open {
  background-image: url(./img/socialMedia-btn-open-pc.png);
}
.social-media-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 0 1.8229166667vw 0.78125vw 2.5vw;
}
.social-media-content a {
  width: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  padding: 0.5208333333vw 0;
  border-bottom: 0.15625vw solid #fff;
}
.social-media-content a:last-child {
  border-bottom: 0;
}
.social-media-content a span {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  background-size: cover;
  background-position: center bottom;
}
.social-media-content a span.f_b {
  width: 3.2291666667vw;
  height: 3.125vw;
  background-image: url(./img/socialMedia-f_b-02-pc.png);
}
.social-media-content a span.y_t {
  width: 3.2291666667vw;
  height: 2.65625vw;
  background-image: url(./img/socialMedia-y_t-02-pc.png);
}
.social-media-content a span.i_g {
  width: 3.2291666667vw;
  height: 3.125vw;
  background-image: url(./img/socialMedia-i_g-02-pc.png);
}
.social-media-content a span.t_d {
  width: 3.125vw;
  height: 3.0729166667vw;
  background-image: url(./img/socialMedia-t_d-02-pc.png);
}
.social-media-content a:hover span {
  background-position: center top;
}
@media screen and (max-width: 767px) {
  .social-media-content {
    width: 38.1333333333vw;
    height: 50.9333333333vw;
    top: 30.6666666667vw;
    z-index: 2;
  }
  .social-media-content.close {
    right: -19.3333333333vw;
  }
  .social-media-content.open {
    right: -37.3333333333vw;
  }
  .social-media-content .switch-btn {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    width: 14.6666666667vw;
    height: 14.9333333333vw;
    left: -11.4666666667vw;
  }
  .social-media-content {
    padding: 0 4.6666666667vw 2vw 6.4vw;
  }
  .social-media-content a {
    padding: 1.3333333333vw 0;
    border-bottom: 0.4vw solid #fff;
  }
  .social-media-content a span.f_b {
    width: 8.2666666667vw;
    height: 8vw;
  }
  .social-media-content a span.y_t {
    width: 8.2666666667vw;
    height: 6.8vw;
  }
  .social-media-content a span.i_g {
    width: 8.2666666667vw;
    height: 8vw;
  }
  .social-media-content a span.t_d {
    width: 8vw;
    height: 7.8666666667vw;
  }
}

.section {
  width: 59.9479166667vw;
  height: 44.1666666667vw;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 7.5520833333vw;
  left: 20.3125vw;
  position: absolute;
  z-index: 1;
}
.section::after {
  width: 100%;
  height: 100%;
  display: block;
  content: "";
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/book-pc.png);
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .section {
    width: 218.5333333333vw;
    height: 146.2666666667vw;
    top: 13.3333333333vw;
    left: -12vw;
    position: absolute;
  }
  .section::after {
    background-image: url(./img/book-mb.png);
  }
  .section.next {
    left: -106.6666666667vw;
  }
}

.page-content {
  width: 57.8645833333vw;
  height: 42.7604166667vw;
  position: absolute;
  z-index: 3;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/page-pc.png);
  top: -1.8229166667vw;
  left: -0.78125vw;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .page-content {
    width: 191.0666666667vw;
    height: 143.0666666667vw;
    background-image: url(./img/page-mb.png);
    top: -4.6666666667vw;
    left: 9.3333333333vw;
  }
}

.search-content {
  width: 22.3958333333vw;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 6.5104166667vw;
  left: 5.9895833333vw;
  pointer-events: visible;
}
@media screen and (max-width: 767px) {
  .search-content {
    width: 74.1333333333vw;
    top: 22.6666666667vw;
    left: 17.3333333333vw;
  }
}

.title {
  display: flex;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

.tag-content {
  position: absolute;
  display: flex;
  top: -0.5208333333vw;
  left: 5.46875vw;
  z-index: 2;
  display: flex;
  gap: 1.0416666667vw;
}
.tag-content .tag {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  width: 10.4166666667vw;
  height: 3.8541666667vw;
  background-size: cover;
  background-position: center bottom;
  position: relative;
}
.tag-content .tag:nth-child(1) {
  background-image: url(./img/tab-btn-01-pc.png);
}
.tag-content .tag:nth-child(2) {
  background-image: url(./img/tab-btn-02-pc.png);
}
.tag-content .tag.active {
  background-position: center top;
  top: -0.5208333333vw;
}
.tag-content .tag {
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .tag-content {
    top: 2.6666666667vw;
    left: 32vw;
    gap: 2.6666666667vw;
  }
  .tag-content .tag {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 30.5333333333vw;
    height: 11.2vw;
    background-size: cover;
    background-position: center bottom;
  }
  .tag-content .tag.active {
    top: -1.3333333333vw;
  }
}

.title.t1 {
  width: 8.6458333333vw;
  height: 1.9791666667vw;
  background-image: url(./img/title-01-pc.png);
  margin-bottom: 1.0416666667vw;
}
@media screen and (max-width: 767px) {
  .title.t1 {
    width: 28.6666666667vw;
    height: 6.4vw;
    margin-bottom: 4vw;
  }
}

.input-list {
  display: flex;
  flex-direction: column;
  gap: 0.5208333333vw;
  margin-bottom: 0.78125vw;
}
@media screen and (max-width: 767px) {
  .input-list {
    gap: 2vw;
    margin-bottom: 2.6666666667vw;
  }
}

.input-title {
  font-size: 1.25vw;
  font-weight: bold;
  color: #9b5c23;
}
@media screen and (max-width: 767px) {
  .input-title {
    font-size: 4.1333333333vw;
  }
}

.attention-content {
  box-sizing: border-box;
  padding: 0.5208333333vw;
  display: flex;
  flex-direction: column;
  gap: 1.5625vw;
  list-style-type: "* ";
}
@media screen and (max-width: 767px) {
  .attention-content {
    padding: 1.3333333333vw;
    gap: 4vw;
  }
}

.attention-text {
  font-size: 1.25vw;
  font-weight: bold;
  color: #9b5c23;
  line-height: 1.2;
}
.attention-text::marker {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .attention-text {
    font-size: 4.1333333333vw;
  }
}

.input-text {
  display: flex;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 21.875vw;
  height: 3.125vw;
  background-image: url(./img/searchBar-bg-pc.png);
  box-sizing: border-box;
  padding: 0 4.1666666667vw 0 0.78125vw;
  position: relative;
}
@media screen and (max-width: 767px) {
  .input-text {
    width: 72.9333333333vw;
    height: 10.4vw;
    padding: 0 13.3333333333vw 0 2vw;
  }
}

input[type=text] {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
  outline: none;
  font-size: 1.25vw;
  color: #e1c1a5;
}
input[type=text]:focus {
  outline: none;
  border: none;
}
input[type=text]::placeholder {
  color: #e1c1a5;
}
@media screen and (max-width: 767px) {
  input[type=text] {
    font-size: 4.1333333333vw;
  }
}

.searchBtn {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 2.1875vw;
  height: 2.1875vw;
  background-image: url(./img/icon-search-pc.png);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1.0416666667vw;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .searchBtn {
    width: 6.9333333333vw;
    height: 6.9333333333vw;
    right: 3.3333333333vw;
  }
}

.input-select {
  display: flex;
  width: 22.34375vw;
  height: 3.59375vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/selectBar-bg-pc.png);
}
@media screen and (max-width: 767px) {
  .input-select {
    width: 74.1333333333vw;
    height: 11.7333333333vw;
  }
}

select {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
}

.list-content {
  width: 22.3958333333vw;
  position: absolute;
  right: 1.5625vw;
  top: 6.5104166667vw;
  min-height: 35.4166666667vw;
  z-index: 4;
  pointer-events: visible;
}
@media screen and (max-width: 767px) {
  .list-content {
    width: 70.6666666667vw;
    right: 8.6666666667vw;
    top: 22.6666666667vw;
    min-height: 106.6666666667vw;
  }
}

.info-counts {
  width: 10.4166666667vw;
  font-size: 1.25vw;
  font-weight: bold;
  color: #885719;
  box-sizing: border-box;
}
.info-counts span {
  width: 100%;
  height: 100%;
  display: block;
}
@media screen and (max-width: 767px) {
  .info-counts {
    width: 26.6666666667vw;
    font-size: 4.1333333333vw;
  }
}

.title.t2 {
  display: flex;
  align-items: center;
  gap: 0.5208333333vw;
  margin-bottom: 1.5625vw;
}
.title.t2::before {
  display: flex;
  width: 11.1979166667vw;
  height: 1.9791666667vw;
  display: flex;
  content: "";
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/title-02-pc.png);
}
@media screen and (max-width: 767px) {
  .title.t2 {
    gap: 1.3333333333vw;
    margin-bottom: 4vw;
  }
  .title.t2::before {
    width: 37.0666666667vw;
    height: 6.4vw;
  }
}

.info-content {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.78125vw;
}
@media screen and (max-width: 767px) {
  .info-content {
    gap: 2.6666666667vw;
    margin-bottom: 2.6666666667vw;
  }
}

.info-item {
  width: 21.5625vw;
  height: 5.7291666667vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/list-bg-01-pc.png);
  position: relative;
  cursor: pointer;
}
.info-item .tag {
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 4.4791666667vw;
  height: 1.3020833333vw;
  background-image: url(./img/tag-01-pc.png);
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.info-item .tag[data-num="1"] {
  background-image: url(./img/tag-01-pc.png);
}
.info-item .tag[data-num="2"] {
  background-image: url(./img/tag-02-pc.png);
}
.info-item .tag[data-num="3"] {
  background-image: url(./img/tag-03-pc.png);
}
.info-item .tag[data-num="4"] {
  background-image: url(./img/tag-04-pc.png);
}
.info-item .master-tag {
  position: absolute;
  right: 1.875vw;
  top: 50%;
  transform: translateY(-50%);
  width: 3.125vw;
  height: 1.5625vw;
  box-sizing: border-box;
  background-color: #644324;
  font-size: 1.0416666667vw;
  font-weight: bold;
  color: #f0d3a8;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-content: center;
  text-align: center;
}
.info-item .master-tag span {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .info-item {
    width: 69.4666666667vw;
    height: 17.3333333333vw;
    background-image: url(./img/list-bg-01-mb.png);
  }
  .info-item .tag {
    width: 14.9333333333vw;
    height: 4.5333333333vw;
    top: -2vw;
    background-image: url(./img/tag-01-pc.png);
  }
  .info-item .tag[data-num="1"] {
    background-image: url(./img/tag-01-pc.png);
  }
  .info-item .tag[data-num="2"] {
    background-image: url(./img/tag-02-pc.png);
  }
  .info-item .tag[data-num="3"] {
    background-image: url(./img/tag-03-pc.png);
  }
  .info-item .tag[data-num="4"] {
    background-image: url(./img/tag-04-pc.png);
  }
  .info-item .master-tag {
    right: 4.8vw;
    width: 9.3333333333vw;
    height: 4.6666666667vw;
    font-size: 3.2vw;
    top: 48%;
  }
}

.user-photo {
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 3.4375vw;
  height: 3.4895833333vw;
  background-image: url(./img/photoDeco-01-pc.png);
  top: 50%;
  transform: translateY(-50%);
  left: 1.5625vw;
  box-sizing: border-box;
  padding: 0.2604166667vw 0.2083333333vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.user-photo > div {
  width: 2.96875vw;
  height: 2.96875vw;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.user-photo img {
  width: 100%;
  height: 100%;
  transform: scale(3.5);
  object-fit: contain;
  object-position: left 0.0520833333vw top -0.15625vw;
  pointer-events: none;
}
.user-photo.default img {
  transform: scale(2.5);
}
@media screen and (max-width: 767px) {
  .user-photo {
    width: 11.3333333333vw;
    height: 11.3333333333vw;
    background-image: url(./img/photoDeco-01-pc.png);
    top: 2.4vw;
    transform: none;
    left: 4vw;
    padding: 0.6666666667vw 0.5333333333vw;
  }
  .user-photo > div {
    width: 9.8666666667vw;
    height: 9.8666666667vw;
  }
  .user-photo img {
    width: 100%;
    height: 100%;
    transform: scale(3.5);
    object-position: left 0.1333333333vw top -0.4vw;
    pointer-events: none;
  }
}

.info-text {
  width: 10.4166666667vw;
  height: 100%;
  padding: 1.3020833333vw 0;
  position: absolute;
  left: 5.7291666667vw;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  word-break: break-all;
  color: #5b3504;
  font-size: 1.25vw;
}
@media screen and (max-width: 767px) {
  .info-text {
    width: 33.3333333333vw;
    box-sizing: border-box;
    padding: 2vw 0 3.3333333333vw 0;
    left: 18.6666666667vw;
    font-size: 4vw;
  }
}

.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 4;
}

.pagination-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.78125vw;
}
.pagination-numbers li {
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .pagination-numbers {
    gap: 2.6666666667vw;
  }
}

.pagination-numbers__symbol {
  display: flex;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 1.5104166667vw;
  height: 1.8229166667vw;
  background-image: url(./img/arrow-02-pc.png);
}
.pagination-numbers__symbol.disabled {
  display: none;
  cursor: default;
}
@media screen and (max-width: 767px) {
  .pagination-numbers__symbol {
    width: 4.4vw;
    height: 5.2vw;
  }
}

.pagination-first {
  display: none;
}

.pagination-last {
  display: none;
}

.pagination-next {
  transform: rotate(180deg);
}

.pagination-numbers__item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25vw;
  font-weight: bold;
  color: #420000;
}
.pagination-numbers__item.ellipsis {
  cursor: auto;
}
.pagination-numbers__item.active {
  color: #885719;
}
@media screen and (max-width: 767px) {
  .pagination-numbers__item {
    font-size: 4vw;
  }
}

.title.t3 {
  width: 8.6458333333vw;
  height: 1.9791666667vw;
  background-image: url(./img/title-03-pc.png);
  margin-bottom: 1.0416666667vw;
}
@media screen and (max-width: 767px) {
  .title.t3 {
    width: 28.5333333333vw;
    height: 6.4vw;
    margin-bottom: 4vw;
  }
}

.title.t4 {
  display: flex;
  align-items: center;
  gap: 0.5208333333vw;
  margin-bottom: 1.5625vw;
}
.title.t4::before {
  display: flex;
  width: 11.1979166667vw;
  height: 1.9791666667vw;
  display: flex;
  content: "";
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/title-04-pc.png);
}
@media screen and (max-width: 767px) {
  .title.t4 {
    gap: 1.3333333333vw;
    margin-bottom: 4vw;
  }
  .title.t4::before {
    width: 32.9333333333vw;
    height: 6.4vw;
  }
}

.page-switch-btn-content {
  display: none;
}
@media screen and (max-width: 767px) {
  .page-switch-btn-content {
    display: flex;
    height: 10.1333333333vw;
    width: 100%;
    position: absolute;
    top: 48%;
    transform: translateY(-50%);
    z-index: 5;
    justify-content: space-between;
    pointer-events: none;
  }
  .page-switch-btn-content span {
    pointer-events: visible;
    width: 8vw;
    height: 10.1333333333vw;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(./img/arrow-03_1-pc.png);
    position: absolute;
  }
  .page-switch-btn-content span:nth-child(1) {
    left: 1.3333333333vw;
    background-image: url(./img/arrow-03-pc.png);
  }
  .page-switch-btn-content span:nth-child(2) {
    right: 1.3333333333vw;
  }
}

.search-lb-content {
  width: 100dvw;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 500;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: scroll;
}
.search-lb-content > div {
  width: 62.5vw;
  height: auto;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .search-lb-content > div {
    width: 100%;
    height: 108.8vw;
  }
}

.find-character-lb {
  width: 27.7083333333vw;
  height: 37.3958333333vw;
  position: absolute;
  top: 50%;
  left: 15.625vw;
  transform: translateY(-50%);
  z-index: 2;
  transition: 0.5s all;
}
.find-character-lb.active {
  left: 4.1666666667vw;
}
@media screen and (max-width: 767px) {
  .find-character-lb {
    width: 82.6666666667vw;
    height: 108.8vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .find-character-lb.active {
    left: 50%;
  }
}

.info-content-lb {
  width: 27.7083333333vw;
  height: 37.3958333333vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 1.5625vw 3.125vw 3.6458333333vw 3.125vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/findList-bg-01-pc.png);
}
@media screen and (max-width: 767px) {
  .info-content-lb {
    width: 82.6666666667vw;
    height: 108.8vw;
    padding: 10.6666666667vw 8vw 6.6666666667vw 8vw;
    background-image: url(./img/findList-bg-01-mb.png);
  }
}

.avatar {
  width: 10.46875vw;
  height: 10.5208333333vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/photoDeco-01-pc.png);
  box-sizing: border-box;
  padding: 0.6770833333vw 0.625vw;
  margin-bottom: 0.78125vw;
  position: relative;
  overflow: hidden;
}
.avatar > div {
  width: 9.375vw;
  height: 9.375vw;
  overflow: hidden;
  position: absolute;
  top: -0.4166666667vw;
  left: 1.0416666667vw;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(3);
  pointer-events: none;
}
.avatar.default img {
  transform: scale(2.5);
}
@media screen and (max-width: 767px) {
  .avatar {
    width: 30.5333333333vw;
    height: 30.5333333333vw;
    padding: 1.7333333333vw 1.6vw;
    margin-bottom: 2.6666666667vw;
  }
  .avatar > div {
    width: 27.4666666667vw;
    height: 27.4666666667vw;
    top: -1.3333333333vw;
    left: 2.6666666667vw;
  }
  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(3);
    pointer-events: none;
  }
}

.info-content-lb .name {
  font-size: 1.5625vw;
  font-weight: bold;
  color: #44180b;
  margin-bottom: 1.3020833333vw;
}
@media screen and (max-width: 767px) {
  .info-content-lb .name {
    font-size: 4.5333333333vw;
    margin-bottom: 4vw;
  }
}

.personal-tag {
  width: auto;
  height: 2.7083333333vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin-bottom: 1.8229166667vw;
  background-image: url(./img/name-bg-02-pc.png);
  border-image-slice: 3 3 3 3 fill;
  border-image-width: 0.15625vw;
  border-image-repeat: stretch;
  background-size: 100% 100%;
  padding: 0.5208333333vw 0.78125vw 0.5208333333vw 2.0833333333vw;
  position: relative;
}
.personal-tag::before {
  width: 2.9166666667vw;
  height: 2.7083333333vw;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -1.0416666667vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/name-bg-02_1-pc.png);
}
.personal-tag span {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.25vw;
  font-weight: bold;
  color: #fff;
  position: relative;
  bottom: 0.0520833333vw;
}
@media screen and (max-width: 767px) {
  .personal-tag {
    height: 7.3333333333vw;
    margin-bottom: 4.6666666667vw;
    background-image: url(./img/name-bg-02-pc.png);
    border-image-slice: 3 3 3 3 fill;
    border-image-width: 0.15625vw;
    border-image-repeat: stretch;
    padding: 1.3333333333vw 2vw 1.3333333333vw 6vw;
  }
  .personal-tag::before {
    width: 8.4vw;
    height: 7.8666666667vw;
    left: -2.6666666667vw;
  }
  .personal-tag span {
    font-size: 3.2vw;
    bottom: 0.1333333333vw;
  }
}

.info-table {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5208333333vw;
}
.info-table div {
  display: flex;
  width: 100%;
  background-color: #cdb6a0;
  box-sizing: border-box;
  padding: 0.4166666667vw 0;
}
.info-table div > span {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}
.info-table div > span:nth-child(1) {
  width: 9.375vw;
}
.info-table div > span:nth-child(2) {
  flex: 1;
  font-size: 1.25vw;
  font-weight: bold;
  color: #44180b;
}
@media screen and (max-width: 767px) {
  .info-table {
    gap: 1.3333333333vw;
  }
  .info-table div {
    padding: 1.0666666667vw 0;
  }
  .info-table div > span {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .info-table div > span:nth-child(1) {
    width: 26.6666666667vw;
  }
  .info-table div > span:nth-child(2) {
    flex: 1;
    font-size: 3.6vw;
    font-weight: bold;
    color: #44180b;
  }
}

.level .title {
  width: 2.65625vw;
  height: 1.5104166667vw;
  background-image: url(./img/title-05-pc.png);
}
@media screen and (max-width: 767px) {
  .level .title {
    width: 7.8666666667vw;
    height: 4.2666666667vw;
  }
}

.class .title {
  width: 2.65625vw;
  height: 1.5104166667vw;
  background-image: url(./img/title-06-pc.png);
}
@media screen and (max-width: 767px) {
  .class .title {
    width: 7.8666666667vw;
    height: 4.2666666667vw;
  }
}

.create-date .title {
  width: 5.1041666667vw;
  height: 1.5104166667vw;
  background-image: url(./img/title-07-pc.png);
}
@media screen and (max-width: 767px) {
  .create-date .title {
    width: 14.8vw;
    height: 4.2666666667vw;
  }
}

.end-date .title {
  width: 5.1041666667vw;
  height: 1.5104166667vw;
  background-image: url(./img/title-08-pc.png);
}
@media screen and (max-width: 767px) {
  .end-date .title {
    width: 14.8vw;
    height: 4.2666666667vw;
  }
}

.share-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 26.0416666667vw;
  position: absolute;
  bottom: -6.7708333333vw;
  left: 51%;
  transform: translateX(-50%);
  row-gap: 0.2604166667vw;
  column-gap: 0.78125vw;
}
.share-content div,
.share-content a {
  display: flex;
  width: 11.5104166667vw;
  height: 3.4375vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  cursor: pointer;
}
.share-content div:hover,
.share-content a:hover {
  background-position: center top;
}
@media screen and (max-width: 767px) {
  .share-content {
    width: 80vw;
    bottom: -18.6666666667vw;
    left: 50%;
    transform: translateX(-50%);
    column-gap: 3.3333333333vw;
    row-gap: 0.6666666667vw;
  }
  .share-content div,
  .share-content a {
    width: 33.3333333333vw;
    height: 9.3333333333vw;
    background-size: contain;
  }
}

.download {
  background-image: url(./img/findList-btn-02-pc.png);
}
@media screen and (max-width: 767px) {
  .download {
    background-image: url(./img/findList-btn-02-mb.png);
  }
}

.f_bShare {
  background-image: url(./img/findList-btn-03-pc.png);
}
@media screen and (max-width: 767px) {
  .f_bShare {
    background-image: url(./img/findList-btn-03-mb.png);
  }
}

.t_dShare {
  background-image: url(./img/findList-btn-05-pc.png);
}
@media screen and (max-width: 767px) {
  .t_dShare {
    background-image: url(./img/findList-btn-05-mb.png);
  }
}

.record {
  background-image: url(./img/findList-btn-04-pc.png);
}
@media screen and (max-width: 767px) {
  .record {
    background-image: url(./img/findList-btn-04-mb.png);
  }
}

.find-list-lb {
  position: absolute;
  top: 49%;
  left: 18.75vw;
  transform: translateY(-50%);
  width: 27.03125vw;
  height: 34.8958333333vw;
  z-index: 1;
  transition: 0.5s all;
}
.find-list-lb::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/findList-bg-02-pc.png);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.find-list-lb.active {
  left: 30.2083333333vw;
}
@media screen and (max-width: 767px) {
  .find-list-lb {
    display: none;
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 98.6666666667vw;
    height: 101.6vw;
    z-index: 3;
  }
  .find-list-lb::after {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(./img/findList-bg-02-mb.png);
    position: absolute;
  }
  .find-list-lb.active {
    display: block;
    left: 50%;
  }
}

.switch-btn-lb {
  width: 3.6979166667vw;
  height: 10.9375vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/findList-btn-01-open-pc.png);
  z-index: 1;
  position: absolute;
  top: 2.6041666667vw;
  right: -2.8645833333vw;
  cursor: pointer;
}
.switch-btn-lb.active {
  background-image: url(./img/findList-btn-01-close-pc.png);
}
.switch-btn-lb.guild {
  background-image: url(./img/findList-btn-01_1-open-pc.png);
}
.switch-btn-lb.guild.active {
  background-image: url(./img/findList-btn-01_1-close-pc.png);
}
@media screen and (max-width: 767px) {
  .switch-btn-lb {
    width: 10vw;
    height: 30.9333333333vw;
    z-index: 10;
    top: 18.6666666667vw;
    right: -0.6666666667vw;
    background-image: url(./img/findList-btn-01-close-pc.png);
  }
  .switch-btn-lb.active {
    background-image: url(./img/findList-btn-01-open-pc.png);
  }
  .switch-btn-lb.guild {
    background-image: url(./img/findList-btn-01_1-close-pc.png);
  }
  .switch-btn-lb.guild.active {
    background-image: url(./img/findList-btn-01_1-open-pc.png);
  }
}

.close-btn {
  width: 3.125vw;
  height: 3.0729166667vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/btn-close-01-pc.png);
  position: absolute;
  z-index: 3;
  top: -1.5625vw;
  right: -3.3854166667vw;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .close-btn {
    width: 7.8666666667vw;
    height: 7.8666666667vw;
    top: -12vw;
    right: 5.3333333333vw;
    z-index: 10;
  }
}

.friend-list-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 2.6041666667vw 2.6041666667vw 0 2.0833333333vw;
}
@media screen and (max-width: 767px) {
  .friend-list-content {
    padding: 8vw 10.6666666667vw 0 18.6666666667vw;
  }
}

.info-content.find {
  position: relative;
  z-index: 4;
  gap: 0.2604166667vw;
}
.info-content.find .info-item {
  width: 21.5625vw;
  height: 3.90625vw;
  background-image: url(./img/list-bg-02-pc.png);
}
.info-content.find .tag {
  display: none;
}
@media screen and (max-width: 767px) {
  .info-content.find {
    gap: 2vw;
  }
  .info-content.find .info-item {
    width: 60.8vw;
    height: 9.8666666667vw;
    background-image: url(./img/list-bg-02-mb.png);
  }
  .info-content.find .info-item .user-photo {
    width: 10vw;
    height: 10vw;
    background-image: url(./img/photoDeco-01-pc.png);
    top: -0.6666666667vw;
    transform: none;
    left: 2.6666666667vw;
    padding: 0.6666666667vw 0.5333333333vw;
  }
  .info-content.find .info-item .user-photo > div {
    width: 8.6666666667vw;
    height: 8.6666666667vw;
  }
  .info-content.find .info-item .user-photo img {
    width: 100%;
    height: 100%;
    transform: scale(3);
    object-position: left 0.1333333333vw top -0.2666666667vw;
    pointer-events: none;
  }
  .info-content.find .info-item .info-text {
    width: 29.3333333333vw;
    left: 16vw;
  }
}

.title.t9 {
  display: flex;
  align-items: center;
  gap: 0.2604166667vw;
  position: relative;
  left: 0.78125vw;
  margin-bottom: 0.78125vw;
  z-index: 4;
}
.title.t9::before {
  width: 8.6979166667vw;
  height: 1.9791666667vw;
  content: "";
  display: block;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/title-09-pc.png);
}
.title.t9 .member {
  box-sizing: border-box;
  border: 0.15625vw solid #644324;
  border-radius: 50px;
  padding: 0.1041666667vw 0.6770833333vw;
  font-size: 1.25vw;
  font-weight: bold;
  color: #644324;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title.t9 .member span {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .title.t9 {
    left: 0;
    margin-bottom: 3.3333333333vw;
    gap: 1.3333333333vw;
  }
  .title.t9::before {
    width: 25.2vw;
    height: 5.6vw;
    content: "";
    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(./img/title-09-pc.png);
  }
  .title.t9 .member {
    border: 0.4vw solid #644324;
    padding: 0.2666666667vw 1.7333333333vw;
    font-size: 3.6vw;
  }
}

.title.t10 {
  display: flex;
  align-items: center;
  gap: 0.2604166667vw;
  position: relative;
  left: 0.78125vw;
  margin-bottom: 0.78125vw;
  z-index: 4;
}
.title.t10::before {
  width: 8.6458333333vw;
  height: 1.9791666667vw;
  content: "";
  display: block;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./img/title-10-pc.png);
}
.title.t10 .member {
  box-sizing: border-box;
  border: 0.15625vw solid #644324;
  border-radius: 50px;
  padding: 0.2604166667vw 0.6770833333vw;
  font-size: 1.25vw;
  font-weight: bold;
  color: #644324;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 0.1041666667vw;
}
@media screen and (max-width: 767px) {
  .title.t10 {
    left: 0;
    margin-bottom: 3.3333333333vw;
    gap: 1.3333333333vw;
  }
  .title.t10::before {
    width: 25.2vw;
    height: 5.6vw;
    content: "";
    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(./img/title-10-pc.png);
  }
  .title.t10 .member {
    border: 0.4vw solid #644324;
    padding: 0.2666666667vw 1.7333333333vw;
    font-size: 3.6vw;
    top: 0.2666666667vw;
  }
}

.title.t11 {
  width: 3.90625vw;
  height: 1.5104166667vw;
  background-image: url(./img/title-11-pc.png);
}
@media screen and (max-width: 767px) {
  .title.t11 {
    width: 11.4666666667vw;
    height: 4.2666666667vw;
  }
}

.title.t12 {
  width: 5.1041666667vw;
  height: 1.5104166667vw;
  background-image: url(./img/title-12-pc.png);
}
@media screen and (max-width: 767px) {
  .title.t12 {
    width: 14.9333333333vw;
    height: 4.2666666667vw;
  }
}

.title.t13 {
  width: 5.15625vw;
  height: 1.5104166667vw;
  background-image: url(./img/title-13-pc.png);
}
@media screen and (max-width: 767px) {
  .title.t13 {
    width: 15.0666666667vw;
    height: 4.2666666667vw;
  }
}

.alert {
  font-size: 1.0416666667vw;
  font-weight: bold;
  color: #bd0000;
}
@media screen and (max-width: 767px) {
  .alert {
    font-size: 3.7333333333vw;
  }
}

#cdnPath {
  display: none;
}

.guildName {
  position: absolute;
  top: 0.78125vw;
  left: 1.8229166667vw;
  font-size: 1.25vw;
  color: #88613c;
}
@media screen and (max-width: 767px) {
  .guildName {
    top: 2vw;
    left: 6vw;
    font-size: 3.2vw;
  }
}