@charset "utf-8";
@import url('lost-sword-style.v1.css');


:root {
  font-size: calc(var(--fs)*100);
}

::-webkit-scrollbar {
  background: rgba(255, 255, 255, .5);
  width: 0;
  height: 0
}

html,
body {
  overflow: hidden;
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  opacity: 0;
  transition: opacity .25s var(--easing)
}

.init #app {
  opacity: 1
}

#app.switching {
  scroll-snap-type: none;
}

#app.switching .scene,
#app.wide .scene {
  scroll-snap-stop: normal;
}

.resizing #app *,
.resizing #app *:before,
.resizing #app *:after {
  transition: none !important
}

#app:before {
  content: "";
  display: block;
  position: fixed;
  pointer-events: none;
  z-index: 3;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  mix-blend-mode: soft-light;
}

#app:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 1) 100%)
}


/* scenes */
.scene {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  /*
  scroll-snap-align: start;
  scroll-snap-stop: always;
  */
  scroll-snap-align: start end;
  scroll-snap-stop: normal;
  height: auto;
  min-height: max(calc(var(--vh) *100), 7.2rem);
  max-width: max(calc(var(--vh) *100), 7.2rem);
  margin: 0 auto;
}

.scene-bg {
  overflow: hidden;
  max-width: max(calc(var(--vh) *100), 7.2rem);
}

.scene-content {
  z-index: 3;
  width: 7.2rem;
  margin: 0 auto;
}

.scn-title>span:before,
.scn-title>span:after {
  width: 1.76rem;
  height: .1rem
}

.scn-title>span {
  height: .2rem;
  padding: 0 .3rem
}

.btn-group {
  width: 4.3rem;
  margin: 0 auto;
  height: auto;
  display: block;
}

.btn-group>.bt-go {
  display: block;
  width: 100%;
  height: .82rem;
  text-align: center;
  border-radius: .41rem;
}

.btn-group>.bt-go+.bt-go {
  margin-top: .16rem
}

.btn-group>.bt-go:before,
.btn-group>.bt-go:after {
  border-radius: .41rem;
}

.btn-group>.bt-go .deco {
  width: 1.4rem;
}

.btn-group>.bt-go .line {
  width: 4.18rem;
  top: 51%
}

.bt-go>span {
  font-size: .27rem;
  line-height: .33rem;
  margin-top: .02rem;
  font-weight: 800
}

.layer .bt-go>span {
  font-weight: 700
}

a.bt-go>span {
  padding-top: .24rem
}

.bt-go>span>.svg {
  width: .09rem;
  margin-left: .13rem;
}

.bt-go .arrow {
  width: .1rem;
}

/* loading */
#loading .animate {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(75%, 75vh);
  height: auto;
  transform: translate(-50%, -50%);
}

#loading .animate .txt {
  display: block;
  width: 100%;
  margin: 0 auto;
}


/* tabs */
.scn-tabs {
  display: block;
  text-align: center;
  margin: .48rem 0 .6rem
}

.scn-tabs>li {
  display: inline-block;
  vertical-align: top;
}

.scn-tabs>li+li {
  margin-left: .03rem
}

.scn-tabs label {
  display: block;
  width: 1.77rem;
  position: relative;
  height: .56rem;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}

.scn-tabs label:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: .02rem solid #bb6d30;
  background: #363129;
}

.scn-tabs label:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  box-shadow: inset 0 .02rem .02rem rgba(255, 255, 255, .4);
  mix-blend-mode: plus-lighter;
}

.scn-tabs>li:first-child label {
  padding-left: .16rem;
}

.scn-tabs>li:first-child label .deco {
  margin-left: .08rem
}

.scn-tabs>li:first-child label,
.scn-tabs>li:first-child label:before,
.scn-tabs>li:first-child label:after {
  border-radius: .28rem 0 0 .28rem;
}


.scn-tabs>li:last-child label {
  padding-right: .16rem;
}

.scn-tabs>li:last-child label .deco {
  margin-left: -.08rem
}

.scn-tabs>li:last-child label,
.scn-tabs>li:last-child label:before,
.scn-tabs>li:last-child label:after {
  border-radius: 0 .28rem .28rem 0;
}

.scn-tabs label .deco {
  position: absolute;
  display: block;
  width: .9rem;
  height: .9rem;
  position: absolute;
  left: 50%;
  opacity: 0;
  top: 50%;
  transform: translate(-50%, -50%)
}

.scn-tabs label .deco .magic-3 {
  fill: #3c1717;
}

.scn-tabs label .line {
  position: absolute;
  display: block;
  left: .05rem;
  top: .05rem;
  bottom: .05rem;
  right: .05rem;
  box-sizing: border-box;
  overflow: hidden;
  border-width: 0;
  border-style: solid;
  border-color: #5a5955;
  opacity: .45;
}

.scn-tabs label .line .svg {
  position: absolute;
  width: auto;
  top: 0;
  height: 100%;
  object-fit: contain;
  fill: #5a5955
}

.scn-tabs>li:first-child .line {
  border-right-width: .02rem;
}

.scn-tabs>li:first-child .line .svg {
  left: 0;
}

.scn-tabs>li:last-child .line {
  border-left-width: .02rem;
}

.scn-tabs>li:last-child .line .svg {
  right: 0;
}

.scn-tabs label:active .line,
.scn-tabs label:active .deco,
.scn-tabs label:active:before {
  transform: scale(.98)
}

.scn-tabs label:active .deco {
  transform: translate(-50%, -50%) scale(.98)
}

.scn-tabs label>span {
  display: inline-block;
  font-size: .2rem;
  font-weight: 500;
  color: #fff;
  line-height: .24rem;
  position: relative;
  z-index: 1;
  padding: .18rem 0 .14rem;
  opacity: .5;
}

.scn-tabs input:checked+label:before,
.scn-tabs label:hover:before {
  background-color: #ffb700;
}

.scn-tabs input:checked+label .deco,
.scn-tabs label:hover .deco {
  opacity: .13;
}

.scn-tabs input:checked+label .line,
.scn-tabs label:hover .line {
  border-color: #aa7c00;
}

.scn-tabs input:checked+label .line .svg,
.scn-tabs label:hover .line .svg {
  fill: #aa7c00;
}

.scn-tabs input:checked+label>span,
.scn-tabs label:hover>span {
  opacity: 1;
  color: #2b2825;
  font-weight: 700
}



/*ui*/

#header {
  position: fixed;
  left: 50%;
  top: 0;
  pointer-events: none;
  z-index: 10;
  width: 100%;
  max-width: max(calc(var(--vh) *100), 7.2rem);
  transform: translateX(-50%);
  height: 1rem;
  display: flex;
  align-items: center;
}

#header button {
  pointer-events: auto
}

#header>h1 {
  flex: 1;
  text-align: center;
}

#header .bi {
  display: inline-block;
  width: 2.2rem;
  position: relative;
  height: auto;
  pointer-events: fill;
  vertical-align: middle;
}

#header .bi .white-bi {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0
}

#header .bi:active img {
  transform: scale(.97)
}

#app.dark h1 .bi>img {
  opacity: 0
}

#app.dark h1 .bi .white-bi {
  opacity: 1
}

#header h1 .bi:active img {
  transform: scale(.97)
}

#header>.utils {
  flex: none;
  width: 2rem;
  position: relative;
}

#header>.utils button[name="nav"] {
  padding: .08rem;
  display: block
}

#header>.utils button[name="nav"] .icon {
  display: block;
  width: .72rem;
  height: auto
}

#header>.utils button[name="nav"] .icon:active>img {
  transform: scale(.97)
}


#gnb {
  position: fixed;
  left: 50%;
  width: 100%;
  max-width: max(calc(var(--vh) *100), 7.2rem);
  transform: translateX(-50%);
  top: 0;
  height: max(calc(var(--vh) *100), 7.2rem);
  overflow: hidden;
  background: rgba(255, 255, 255, .9);
  clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
  z-index: 15;
  pointer-events: none;
  transition: all .15s ease-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

#app.nav-opened * {
  pointer-events: none !important;
}

#app.nav-opened #gnb {
  pointer-events: fill !important;
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
  transition-duration: .35s;
}

#app.nav-opened #gnb * {
  pointer-events: auto !important;
}

.popup-view #app.nav-opened #layers * {
  pointer-events: fill !important;
}

#gnb:before,
#gnb:after {
  content: "";
  display: block;
  flex: 1
}

#gnb button[name="nav"] {
  position: absolute;
  padding: .12rem;
  top: .5rem;
  right: .2rem;
  box-sizing: content-box;
  width: .72rem;
}

#gnb button[name="nav"] .icon {
  display: block;
  width: 100%;
  height: auto;
}

#gnb>.bi {
  flex: none;
  width: 4.6rem;
  display: block;
  height: auto;
  margin: 0 auto;
}

#navigation {
  display: block;
  width: 100%;
  height: auto;
  flex: none;
  margin-top: .64rem
}

#navigation>li {
  display: block;
  position: relative;
}

#navigation>li+li {
  margin-top: .36rem
}

#navigation>li>a,
#navigation>li>button {
  width: 2.5rem;
  margin: 0 auto;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  position: relative;
}

#navigation>li>a:before,
#navigation>li>a:after,
#navigation>li>a .svg,
#navigation>li>button:before,
#navigation>li>button:after,
#navigation>li>button .svg {
  content: "";
  z-index: 0;
  display: block;
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: scale(.9);
  transition: all .15s var(--easing);
}

#navigation>li>a:before,
#navigation>li>a:after,
#navigation>li>button:before,
#navigation>li>button:after {
  left: 50%;
  top: 50%;
  background: #ffb700;
}

#navigation>li>a:before,
#navigation>li>button:before {
  width: 2.5rem;
  height: .44rem;
  margin-left: -1.25rem;
  margin-top: -.22rem;
  border-radius: .22rem;
}

#navigation>li>a:after,
#navigation>li>button:after {
  width: 2.18rem;
  margin-left: -1.09rem;
  height: .52rem;
  margin-top: -.26rem;
}

#navigation>li>a .svg,
#navigation>li>button .svg {
  width: 110%;
  left: -5%;
  top: 0;
  height: auto;
}

#navigation>li>a .svg .fill,
#navigation>li>button .svg .fill {
  fill: #c1903b;
}

#navigation>li>a.on:before,
#navigation>li>a.on:after,
#navigation>li>a.on .svg {
  opacity: 1;
  transform: scale(1);
}

#navigation>li>a.on span {
  color: #000
}

#navigation>li>a:active:before,
#navigation>li>a:active:after,
#navigation>li>a:active .svg,
#navigation>li>button:active:before,
#navigation>li>button:active:after,
#navigation>li>button:active .svg {
  transition: none;
  transform: scale(.97)
}

#navigation>li>a span,
#navigation>li>button span {
  display: inline-flex;
  position: relative;
  z-index: 1;
  width: 2.76rem;
  height: .52rem;
  font-weight: 700;
  color: #b9b9b9;
  padding-top: .05rem;
  font-size: .24rem;
  line-height: .3rem;
  justify-content: center;
  align-items: center;
  box-sizing:border-box
}


#navigation>li .sub {
  display: flex;
  pointer-events: auto;
  gap: .4rem;
  width: 100%;
  align-items: center;
  height: .52rem;
  justify-content: center;
  margin: .12rem 0 0
}

#navigation>li .sub>button {
  flex: none;
  width: auto;
  display: inline-block;
  text-align: center;
  padding: .16rem
}


#navigation>li .sub>button span {
  display: inline-block;
  position: relative;
  line-height: .3rem;
  font-size: .22rem;
  font-weight:600;
  color:#b9b9b9
}


#navigation>li .sub>button span:before,
#navigation>li .sub>button span:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: rotate(-45deg);
  width: .07rem;
  height: .07rem;
  margin-top:-.035rem;
  background: #a47626;
  opacity: 0;
  transition: all .15s var(--easing)
}

#navigation>li .sub>button span:before {
  right: 100%;
  margin-right: .05rem
}

#navigation>li .sub>button span:after {
  left: 100%;
  margin-left: .05rem
}

#navigation>li a.on+.sub>button span{
  color: #595959;
}
#navigation>li a.on+.sub>button.on span {
  color: #a47626
}

#navigation>li a.on+.sub>button.on span:before {
  opacity: 1;
  margin-right: .1rem
}

#navigation>li a.on+.sub>button.on span:after {
  opacity: 1;
  margin-left: .1rem
}


#linkButtons {
  position: fixed;
  width: 100%;
  max-width: max(calc(var(--vh) *100), 7.2rem);
  left: 50%;
  transform: translateX(calc(-50% + .25rem));
  bottom: 1.2rem;
  pointer-events: none;
  text-align: center;
  height: auto;
  z-index: 5
}

#linkButtons>a,
#linkButtons>button {
  display: block;
  margin: 0;
  position: relative;
}

#linkButtons>a {
  width: .56rem;
}

#linkButtons>a>img {
  opacity: .6;
}

#linkButtons>a span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-35%);
  color: #fff;
  font-weight: 700;
  font-size: .16rem;
  line-height: .2rem
}

#linkButtons>a .svg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(-90deg);
  width: .08rem;
  opacity: .6;
  bottom: 92%;
  fill: #fff;
}

#linkButtons>a,
#linkButtons>button {
  pointer-events: fill;
  display: block;
}


#linkButtons>button {
  width: .5rem;
  opacity: .6;
  margin-left: .03rem;
  overflow: hidden;
  height: .5rem;
  border-radius: 100%;
}

#linkButtons>a+button {
  margin-top: .45rem
}

#linkButtons>button+button {
  margin-top: .1rem
}

#linkButtons>button:hover {
  opacity: 1
}

#linkButtons>a:hover>img {
  opacity: 1
}

#linkButtons>a:active img,
#linkButtons>button:active {
  transform: scale(.96)
}

.swiper-button-prev,
.swiper-button-next {
  width: .7rem;
  height: .7rem;
}

/* Main */
.scene[data-name="Main"] .fit-cover>img {
  transform: scale(1.05);
  opacity: 0;
  transition: opacity .25s var(--easing), transform 1s var(--easing);
}

.scene[data-name="Main"].active .fit-cover>img {
  opacity: 1;
  transform: scale(1);
}

.scene[data-name="Main"] .scene-bg:before {
  content: "";
  display: block;
  position: fixed;
  pointer-events: none;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100vw;
  height: 4rem;
  background: linear-gradient(to bottom, rgba(143, 198, 240, 1) 0%, rgba(143, 198, 240, 0) 100%)
}

.scene[data-name="Main"] .title {
  width: 100%;
  margin: .88rem auto .22rem;
  position: relative;
  text-align: center;
}

.scene[data-name="Main"] .title img {
  height: .5rem;
  width: auto;
  display: inline-block;
  object-fit: contain;
}

.scene[data-name="Main"] .logo {
  width: 6.74rem;
  display: block;
  margin: 0 auto;
}

.scene[data-name="Main"] .market-buttons>button {
  flex: none;
  width:1.87rem;
}


.scene[data-name="Main"] .title img {
  position: relative;
  z-index: 1
}

.scene[data-name="Main"] .bt-play {
  display: block;
  width: 1.24rem;
  height: 1.24rem;
  margin: 1.5rem auto 0
}

.scene[data-name="Main"] .grand-open {
  width: 4.5rem;
  display: block;
  margin: .2rem auto 0;
  padding-bottom: .08rem
}

.scene[data-name="Main"] .official-launch {
  width: 100%;
  display: block;
  text-align: center;
  margin: .2rem auto 0;
  padding-bottom: .8rem
}

.scene[data-name="Main"] .official-launch img {
  display: inline-block;
  height: .76rem;
  width: auto;
  object-fit: contain;
}

.scene[data-name="Main"] .bt-play + .btn-group{
  margin-top:.9rem
}

.scene[data-name="Main"] .market-buttons {
  width: 5.16rem;
  display: flex;
  gap: .08rem;
  margin: .32rem auto .2rem;
}

.scene[data-name="Main"] .banner {
  margin-top: 0
}

.banner {
  width: 5.34rem;
  margin: .32rem auto 0;
  flex: none;
  position: relative;
}

.banner .swiper-pagination.swiper-pagination-fraction {
  bottom: .36rem;
  right: .32rem;
  left: auto;
  width: .7rem;
  font-size: .16rem;
  line-height: .2rem;
  padding: .02rem 0 .04rem;
  border-radius: .13rem;
  background: rgba(0, 0, 0, .57);
}

.banner .swiper-container {
  overflow: hidden;
  display: block;
  width: 100%;
  height: auto;
}

.banner .swiper-container .swiper-slide {
  display: block;
  height: auto;
  position: relative;
}

/* Pre-order */
.scene[data-name="Pre-order"] {
  background: #0b0403;
}

.scene[data-name="Pre-order"] .scene-bg:before {
  content: "";
  display: block;
  position: fixed;
  pointer-events: none;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100vw;
  height: 2.5rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 100%)
}

.scene[data-name="Pre-order"] .bg-video {
  position: absolute;
  width: 12.8rem;
  height: 12.8rem;
  left: 50%;
  top: 0;
  margin-left: -6.4rem
}

.scene[data-name="Pre-order"] .scene-bg video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  opacity: 0;
  transition: opacity .1s var(--easing);
}

.scene[data-name="Pre-order"] .scene-bg video.visible {
  display: block;
  opacity: 1
}


.scene[data-name="Pre-order"] .click-msg {
  position: absolute;
  display: block;
  width: 18.75%;
  height: 16.72%;
  top: 56.8%;
  left: 40.625%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-15%);
  transition: all .25s .5s var(--easing);
}

.scene[data-name="Pre-order"] .click-msg.visible {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s
}

.scene[data-name="Pre-order"] .click-msg>img,
.scene[data-name="Pre-order"] .click-msg:before {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
}

.scene[data-name="Pre-order"] .click-msg:before {
  content: "";
  filter: saturate(0) brightness(10) blur(.1rem);
  background: url(../img/preorder-click.png) no-repeat center / contain;
  animation: preorder-click-shadow-ani .5s cubic-bezier(.4, 0, .6, 1) infinite alternate-reverse
}

.scene[data-name="Pre-order"] .click-msg>img {
  object-fit: contain;
  animation: preorder-click-ani .5s cubic-bezier(.4, 0, .6, 1) infinite alternate-reverse
}

@keyframes preorder-click-ani {
  0% {
    transform: translateY(0%)
  }

  100% {
    transform: translateY(5%)
  }
}

@keyframes preorder-click-shadow-ani {
  0% {
    transform: translateY(0%);
    opacity: .5;
  }

  20% {
    opacity: .5
  }

  80% {
    opacity: 0
  }

  100% {
    transform: translateY(5%);
    opacity: 0
  }
}

.scene[data-name="Pre-order"] .scene-content {
  height: 18.8rem;
}

.scene[data-name="Pre-order"] .scn-title {
  margin-top: 1rem;
}

.scene[data-name="Pre-order"] .scn-title>span:before,
.scene[data-name="Pre-order"] .scn-title>span:after {
  background-image: url(../img/deco-line-tit-w.png)
}

.scene[data-name="Pre-order"] .clicker {
  width: 7rem;
  height: 7rem;
  pointer-events: none;
  display: block;
  margin: 4rem auto 4.2rem
}

.init .scene[data-name="Pre-order"].active .clicker.visible {
  pointer-events: fill;
}

.init .scene[data-name="Pre-order"].active.frm-opened .clicker {
  pointer-events: none;
}

.scene[data-name="Pre-order"] .scene-bg:after,
.scene[data-name="Pre-order"] .scene-layer:after {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  z-index: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: calc(100% - 12rem);
  background: linear-gradient(to bottom, rgba(11, 4, 3, 0) 0%, rgba(11, 4, 3, 1) .8rem)
}

.scene-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  background: #0b0403;
  transition: all .3s var(--easing);
}

.scene-layer .btn-group {
  position: relative;
  z-index: 10
}

.scene[data-name="Pre-order"] .scene-layer:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 12.8rem;
  background: url(../video/m_preorder-loop.jpg) no-repeat center top / 12.8rem auto;
  opacity: 0;
  transform: scale(1.05);
  transition: all .9s .3s var(--easing)
}

.scene[data-name="Pre-order"].frm-opened .scene-layer {
  opacity: 1;
  z-index: 3;
  pointer-events: fill;
}

.scene[data-name="Pre-order"].frm-opened .scene-layer:before {
  opacity: .3;
  transform: scale(1);
}

.scene[data-name="Pre-order"] .scene-layer .preorder-frm,
.scene[data-name="Pre-order"] .scene-layer .btn-group {
  opacity: 0;
  pointer-events: none;
  transform: translateY(.15rem);
  transition: all .4s .45s var(--easing)
}

.scene[data-name="Pre-order"].frm-opened .scene-layer .preorder-frm,
.scene[data-name="Pre-order"].frm-opened .scene-layer .btn-group {
  opacity: 1;
  pointer-events: fill;
  transform: translateY(0);
}

.preorder-frm {
  position: relative;
  margin: 0 auto;
  margin-top: .56rem;
  margin-bottom: .9rem;
  width: 6.83rem;
}

.preorder-frm .close-btn {
  position: absolute;
  left: auto;
  right: 0;
  bottom: 100%;
  width: .7rem;
  height: auto
}

.preorder-frm .frm-box {
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  top: 0;
  left: 0;
  color: #5a5a5a;
  letter-spacing: -.06em;
}


.preorder-frm+.btn-group {
  margin: 0
}

.preorder-frm .frm-box .period {
  text-align: center;
  font-size: .25rem;
  line-height: .3rem;
  font-weight: 700;
  margin-top: 1.4rem;
}

.preorder-frm .frm-box .notice {
  text-align: center;
  font-size: .17rem;
  line-height: .24rem;
  letter-spacing: -.06em;
  font-weight: 500;
  margin: .03rem 0 0
}

.preorder-frm .frm-box .rewards {
  margin: 0 auto;
  width: 6.8rem;
  display: block;
  position: relative;
}

.preorder-frm .rewards>ul {
  position: absolute;
  top: .15rem;
  width: 5.8rem;
  left: .5rem;
  text-align: center;
}

.preorder-frm .rewards>ul li {
  position: relative;
  display: inline-block;
  z-index: 2;
  vertical-align: top;
  width: 2.85rem;
  padding-bottom: .06rem
}

.preorder-frm .rewards>ul li>img {
  display: block;
  width: 2.14rem;
  margin: 0 auto
}

.preorder-frm .rewards>ul li p {
  display: block;
  text-align: center;
  color: #5a5a5a;
  margin-top: -.12rem;
  letter-spacing: -.06em
}

.preorder-frm .rewards>ul li:last-child {
  margin-top: -.06rem;
}

.preorder-frm .rewards>ul li:last-child p {
  margin-top: -.06rem;
}

.preorder-frm .rewards>ul li p strong {
  display: block;
  font-size: .25rem;
  line-height: .3rem;
  font-weight: 800
}

.preorder-frm .rewards>ul li p span {
  display: inline-block;
  width: auto;
  white-space: nowrap;
  font-size: .18rem;
  line-height: .2rem;
  font-weight: 700
}

.preorder-frm .rewards>ul li:last-child strong {
  color: #a23f45
}

.preorder-frm .rewards>ul li.achieve:after {
  content: "";
  display: block;
  position: absolute;
  left: 52%;
  top: .14rem;
  width: .87rem;
  height: .87rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain
}

.preorder-frm .rewards>ul li:last-child.achieve:after {
  width: 1.07rem;
  height: 1.07rem;
  top: 0
}

.preorder-frm .rewards.type-6>ul {
  top: .4rem
}

.preorder-frm .rewards.type-6>ul li {
  width: 1.8rem;
  height: 2.5rem;
}

.preorder-frm .rewards.type-6>ul li>img {
  position: absolute;
  left: 50%;
  top: .9rem;
  transform: translate(-50%, -50%);
  width: 2.52rem;
  height: auto;
  object-fit: contain;
}

.preorder-frm .rewards.type-6>ul li p {
  position: absolute;
  top: 1.92rem;
  left: 50%;
  width: auto;
  transform: translateX(-50%);
}

.preorder-frm .rewards.type-6>ul li:last-child p {
  top: 2rem
}

.preorder-frm .rewards.type-6>ul li.achieve:after {
  width: 1.12rem;
  height: 1.12rem;
  left: auto;
  right: 0;
  top: 0
}

.preorder-frm .rewards.type-6>ul li:last-child.achieve:after {
  right: -.08rem
}

.preorder-frm .rewards>ul li.achieve>img {
  filter: saturate(0) brightness(0.8)
}

.preorder-frm .rewards>ul li.achieve p * {
  color: #a1a1a1 !important
}


.preorder-frm .frm-box .char {
  position: absolute;
  left: -.55rem;
  top: 9.35rem;
  width: 10.48rem;
  transform: translateZ(0)
}

.preorder-frm .frm-field {
  width: 5.88rem;
  display: block;
  margin: 0 auto;
}


.preorder-frm .frm-field .user-agree {
  padding: .3rem .24rem 0;
}

.preorder-frm .market-select {
  display: block;
  text-align: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: .1rem 0 .14rem
}

.preorder-frm input[type="checkbox"],
.preorder-frm input[type="radio"] {
  position: absolute;
  font-size: 1px;
  height: 1px;
  visibility: hidden;
  right: 100%;
  bottom: 100%
}

.preorder-frm input[type="checkbox"]+label:before {
  background-image: url(../img/frm-checkbox.png)
}

.preorder-frm input[type="radio"]+label:before {
  background-image: url(../img/frm-radio.png)
}

.preorder-frm input[type="checkbox"]+label:before,
.preorder-frm input[type="radio"]+label:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: .3rem;
  height: .3rem;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top
}

.preorder-frm input[type="checkbox"]:checked+label:before,
.preorder-frm input[type="radio"]:checked+label:before {
  background-position-y: bottom
}

.preorder-frm .market-select label {
  display: inline-block;
  text-align: left;
  width: 2.2rem;
  box-sizing: border-box;
  padding-left: .45rem;
  position: relative;
}

.preorder-frm .market-select label:before {
  top: .07rem;
}

.preorder-frm .market-select label>span,
.preorder-frm .market-select label .ic {
  display: inline-block;
  vertical-align: middle;
}

.preorder-frm .market-select label .ic {
  width: .45rem;
}

.preorder-frm .market-select label span {
  font-size: .26rem;
  line-height: .35rem;
  letter-spacing: -.03em;
  font-weight: 600;
  display: inline-block;
  padding: .05rem .1rem
}

.preorder-frm .market-select .doc-btn {
  position: absolute;
  right: .4rem;
  top: .18rem
}

.preorder-frm .input-field {
  display: flex;
  height: .76rem;
  width: 100%;
  min-width: 0;
  align-items: center;
  background: #fff;
  border: .02rem solid #d5d5d3;
  border-radius: .11rem;
  box-sizing: border-box;
}

.preorder-frm .input-field .preval {
  flex: none;
  width: 1.32rem;
  text-align: center;
  font-size: .23rem;
  color: #6d6d6d;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: .29rem
}

.preorder-frm .input-field input {
  flex: 1;
  font-size: .23rem;
  color: #6d6d6d;
  text-align: left;
  font-weight: 600;
  padding: 0 .15rem;
  letter-spacing: -.03em;
  line-height: .29rem;
  border: 0 none;
  outline: none;
  min-width: 0;
}

.preorder-frm .doc-btn {
  display: inline-block;
  vertical-align: middle;
  background: #959494;
  padding: .04rem .14rem .03rem;
  border-radius: .14rem;
  color: rgba(255, 255, 255, .6);
  letter-spacing: -.03em;
  font-size: .15rem;
  line-height: .21rem;
}


.preorder-frm .user-agree>span {
  display: block;
  position: relative;
  width: 100%
}

.preorder-frm .user-agree label {
  font-size: .19rem;
  line-height: .3rem;
  display: block;
  padding: .05rem 0;
  padding-left: .44rem;
}

.preorder-frm .user-agree label:before {
  top: .05rem
}

.preorder-frm .user-agree .doc-btn {
  margin-left: .12rem
}

.preorder-frm .user-agree .all-check {
  margin-bottom: .13rem
}

.preorder-frm .user-agree .all-check label {
  font-size: .22rem;
  color: #575757
}

.preorder-frm .user-agree .all-check label:before {
  top: .03rem
}


/* Game */

.scene[data-name="Game"] .fit-cover>img {
  transform: scale(1.05);
  opacity: 0;
  transition: opacity .5s var(--easing), transform 1s var(--easing);
}

.scene[data-name="Game"].active .fit-cover>img {
  opacity: 1;
  transform: scale(1);
}

.scene[data-name="Game"] .article {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--easing);
}

.scene[data-name="Game"] .article * {
  pointer-events: none !important;
}

.scene[data-name="Game"] .article.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  transition-delay: .15s
}

.scene[data-name="Game"].active .article.visible * {
  pointer-events: auto !important;
}

.scene[data-name="Game"] .scn-tabs {
  margin-bottom: 0;
}

.scene[data-name="Game"] .viewer {
  position: relative;
  height: 5.72rem;
  width: 100%;
  box-sizing: border-box;
}

.scene[data-name="Game"] .swiper-button-prev,
.scene[data-name="Game"] .swiper-button-next {
  top: 60%
}

.scene[data-name="Game"] .swiper-button-prev {
  left: 0;
  right: auto
}

.scene[data-name="Game"] .swiper-button-next {
  right: 0;
  left: auto
}

.scene[data-name="Game"] .swiper-container {
  display: block;
  position: absolute;
  overflow: hidden;
  top: .65rem;
  left: 50%;
  transform: translateX(-50%);
  width: 6.8rem;
  box-sizing: content-box;
  padding: 0 .2rem;
}

.scene[data-name="Game"] .swiper-slide {
  padding: .22rem .25rem;
  box-sizing: border-box;
  pointer-events: none;
}

.scene[data-name="Game"] .swiper-slide:before {
  content: "";
  display: block;
  position: absolute;
  left: .22rem;
  top: 0;
  right: .22rem;
  bottom: 0;
  z-index: 0;
  opacity: 0;
  background: url(../img/game-feature-frame.png) no-repeat center / contain;
  transition: opacity 0s var(--easing)
}

.scene[data-name="Game"] .swiper-slide>button {
  display: block;
  width: 100%;
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 0s var(--easing)
}

.scene[data-name="Game"] .swiper-slide.swiper-slide-active:before,
.scene[data-name="Game"] .swiper-slide.swiper-slide-prev:before,
.scene[data-name="Game"] .swiper-slide.swiper-slide-next:before,
.scene[data-name="Game"] .swiper-slide.swiper-slide-active>button,
.scene[data-name="Game"] .swiper-slide.swiper-slide-prev>button,
.scene[data-name="Game"] .swiper-slide.swiper-slide-next>button {
  opacity: 1;
  pointer-events: auto;
  transition: opacity .25s var(--easing);
}

.scene[data-name="Game"] .swiper-slide .preview {
  position: relative;
  display: block;
  overflow: hidden;
}

.scene[data-name="Game"] .swiper-slide .preview:before {
  content: "";
  display: block;
  padding-top: 55.5%
}

.scene[data-name="Game"] .swiper-slide .preview img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  min-width: 100%;
  min-height: 100%;
}

.scene[data-name="Game"] .swiper-slide>button .bt-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translate(-50%, -50%);
  opacity: .65
}

.article-title {
  position: relative;
  padding: .4rem 0 0;
  display: block;
  height: auto;
  width: 100%;
  text-align: center;
  font-size: .22rem;
  line-height: .3rem;
  color: #5a5a5a;
  letter-spacing: -.06em;
  font-weight: 600
}

.article-title>strong {
  color: #d76203
}

.pet-frame {
  width: 6.88rem;
  margin: .24rem auto 0;
}

.ability-card-wrapper {
  position: relative;
  margin: .4rem auto 0;
  width: 6.74rem;
}

.ability-card-wrapper:before {
  content: "";
  display: block;
  position: absolute;
  background: url(../img/game-ability-light-ring.png) no-repeat center / contain;
  width: 8.2rem;
  height: 2.76rem;
  top: 1.46rem;
  z-index: 10;
  pointer-events: none;
  left: -.88rem
}



/* Character */
.scene[data-name="Character"] {
  background: url(../img/m_character-bg.jpg) no-repeat center bottom / cover;
}

.scene[data-name="Character"].active .fit-cover>span {
  transform: translateX(-50%);
  opacity: 1;
}

.scene[data-name="Character"] .fit-cover>span {
  left: 50%;
  height: auto;
  position: absolute;
  opacity: 0;
  transition: all .5s var(--easing)
}

.scene[data-name="Character"] .fit-cover .ethan {
  width: 12.12rem;
  margin-left: -5.8rem;
  top: 70%;
  transform: translateX(-60%);
}

.scene[data-name="Character"] .fit-cover .elizabeth {
  width: 7.78rem;
  margin-left: 2.94rem;
  top: 78.125%;
  transform: translateX(-40%);
}

.scene[data-name="Character"] .scn-title {
  margin-top: .7rem;
}

.character-list-view {
  padding: .3rem 0 .52rem;
  position: relative;
}

.character-list-view .swiper-pagination {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.character-list-view .swiper-pagination .swiper-pagination-bullet {
  width: .19rem;
  height: .19rem;
  opacity: 1;
  padding: 0;
  margin: 0;
  background: #979797
}

.character-list-view .swiper-pagination .swiper-pagination-bullet+.swiper-pagination-bullet {
  margin-left: .19rem
}

.character-list-view .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #e86464
}

.character-list-view .swiper-button-prev {
  top: 52%;
  margin-right: -.05rem
}

.character-list-view .swiper-button-next {
  top: 52%;
  margin-left: -.05rem
}

#characterSwiper {
  width: 5.84rem;
  margin: 0 auto;
  overflow: hidden;
}

#characterSwiper .swiper-slide {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  row-gap: .1rem;
  box-sizing: border-box;
}

#characterSwiper .item {
  width: 1.38rem;
  height: 1.46rem;
  position: relative;
  padding: .03rem;
}

#characterSwiper .item * {
  pointer-events: none;
}

#characterSwiper .item:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  background: url(../img/character-thumbnail-stroke.svg) no-repeat center / contain
}

#characterSwiper .thumbnail {
  display: block;
  height: 1.38rem;
  position: relative;
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.49 138.16"><title></title><path d="M124.34,124.18c-1.61.86-2.94.76-5.59,3-1,.87-1.32,3.13-3.88,5s-7.47,1.8-7.47,1.8H72.9a20,20,0,0,0-2.56.66c-1.56.47-4.15,2.61-5,3.34l-.14.13L65,138c-.86-.73-3.45-2.87-5-3.34a20.26,20.26,0,0,0-2.55-.66H23.09s-4.92.09-7.48-1.8-2.86-4.15-3.88-5c-2.65-2.27-4-2.17-5.58-3S0,120.08,0,114.91V23.25C0,18.08,4.54,14.82,6.15,14s2.93-.75,5.58-3c1-.87,1.33-3.12,3.88-5s7.48-1.8,7.48-1.8H57.48A20.26,20.26,0,0,0,60,3.47C61.59,3,64.18.86,65,.12L65.19,0l.14.12c.86.74,3.45,2.88,5,3.35a20,20,0,0,0,2.56.66h34.5s4.92-.09,7.47,1.8,2.87,4.14,3.88,5c2.65,2.28,4,2.18,5.59,3s6.15,4.11,6.15,9.28v91.66C130.49,120.08,126,123.33,124.34,124.18Z" /></svg>');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.49 138.16"><title></title><path d="M124.34,124.18c-1.61.86-2.94.76-5.59,3-1,.87-1.32,3.13-3.88,5s-7.47,1.8-7.47,1.8H72.9a20,20,0,0,0-2.56.66c-1.56.47-4.15,2.61-5,3.34l-.14.13L65,138c-.86-.73-3.45-2.87-5-3.34a20.26,20.26,0,0,0-2.55-.66H23.09s-4.92.09-7.48-1.8-2.86-4.15-3.88-5c-2.65-2.27-4-2.17-5.58-3S0,120.08,0,114.91V23.25C0,18.08,4.54,14.82,6.15,14s2.93-.75,5.58-3c1-.87,1.33-3.12,3.88-5s7.48-1.8,7.48-1.8H57.48A20.26,20.26,0,0,0,60,3.47C61.59,3,64.18.86,65,.12L65.19,0l.14.12c.86.74,3.45,2.88,5,3.35a20,20,0,0,0,2.56.66h34.5s4.92-.09,7.47,1.8,2.87,4.14,3.88,5c2.65,2.28,4,2.18,5.59,3s6.15,4.11,6.15,9.28v91.66C130.49,120.08,126,123.33,124.34,124.18Z" /></svg>');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

#characterSwiper .thumbnail:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
  background: #969696;
  opacity: 0;
  transition: opacity .25s var(--easing)
}

#characterSwiper .thumbnail:after {
  content: "";
  display: block;
  position: absolute;
  mix-blend-mode: overlay;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.27rem;
  height: 1.35rem;
  background: url(../img/character-thumbnail-line.png) no-repeat center / contain
}

#characterSwiper .thumbnail .magic-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.3rem;
  opacity: .5;
  transition: opacity .25s var(--easing)
}


#characterSwiper .profile {
  display: block;
  width: 100%;
  height: 100%;
}

#characterSwiper .profile img {
  position: absolute;
  width: 1.4rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#characterSwiper .name {
  color: #fff;
  font-size: .16rem;
  line-height: .2rem;
  bottom: .24rem;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 50%);
  opacity: 1;
  white-space: nowrap;
  width: auto;
  z-index: 2;
}


#characterSwiper .name:before,
#characterSwiper .name:after {
  content: "";
  display: block;
  width: .1rem;
  height: .1rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: url(../img/character-view-native-deco.png) no-repeat center / contain
}

#characterSwiper .name:before {
  right: 100%;
  margin-right: .03rem
}

#characterSwiper .name:after {
  left: 100%;
  margin-left: .03rem
}

#characterSwiper .profile:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: .4rem;
  background: #000;
  filter: blur(.06rem);
  z-index: 1;
  bottom: 0;
  opacity: .6
}

#characterSwiper .profile:before {
  content: "";
  display: block;
  position: absolute;
  mix-blend-mode: overlay;
  top: 0;
  left: 0;
  width: 100%;
  height: 75%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

/*
#characterSwiper .item:disabled .profile:after,
#characterSwiper .item[disabled] .profile:after,
#characterSwiper .item:disabled .thumbnail .magic-circle,
#characterSwiper .item[disabled] .thumbnail .magic-circle {
  opacity: 0
}

#characterSwiper .item:disabled .thumbnail:before,
#characterSwiper .item[disabled] .thumbnail:before {
  opacity: 1
}
*/
#characterSwiper .item:disabled,
#characterSwiper .item[disabled] {
  pointer-events: none;
  cursor: default
}

/*
#characterSwiper .item:disabled:after,
#characterSwiper .item[disabled]:after {
  content: 'Coming Soon';
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  bottom: .24rem;
  color: #fff;
  font-weight: 500;
  font-size: .13rem;
  line-height: .15rem
}
*/

.character-detail {
  position: absolute;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  z-index: 3;
  transition-duration: .2s;
  opacity: 0;
}

.scene.active .character-detail {
  transition: all .35s var(--easing)
}

.detail-view .character-detail {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: auto;
}

.scene.active.detail-view .character-detail {
  transition-duration: .5s;
  opacity: 1;
}

.character-detail .btm-bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 12.8rem;
  transform: translateX(-50%);
}

.character-detail .character-detail-view {
  position: relative;
  width: 100%;
  max-width: 7.2rem;
  margin: 0 auto;
  height: 6.88rem
}

.character-detail .character-detail-content {
  width: 5.24rem;
  margin-left: .28rem;
  opacity: 0;
  transform: rotateY(-90deg);
  transition: all .35s var(--easing)
}

.character-detail .deco {
  position: absolute;
  width: 8rem;
  left: 2rem;
  top: 50%;
  pointer-events: none;
  height: 12.8rem;
  transform: translateY(-50%);
}

.character-detail .visual {
  position: absolute;
  bottom: 0;
  left: 80.5%;
  width: 7rem;
  height: 7rem;
  transform: translateY(10%) translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: all .35s var(--easing)
}

.active.detail-view .character-detail .visual {
  transition-delay: .25s;
  transform: translateY(0) translateX(-50%);
  opacity: 1
}

.active.detail-view .character-detail-content {
  transition-delay: .25s;
  opacity: 1;
  transform: rotateY(0deg);
}

.character-detail .visual>span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

.character-detail .visual>span.gradient {
  -webkit-mask-image: linear-gradient(115deg, transparent 27%, #000 33%);
  -webkit-mask-position: 0 0;
  -webkit-mask-size: contain;
  mask-image: linear-gradient(115deg, transparent 27%, #000 33%);
  mask-position: 0 0;
  mask-size: contain;
}

.character-detail .visual>span.wide {
  width: 12rem;
  top: 15%;
  left: -30%;
}

.character-detail .visual>span.reverse img {
  transform: rotateY(-180deg)
}

.character-detail .visual>span.type2 {
  width: 10.84rem;
  left: -26%;
  top: -10%;
}

.character-detail .visual>span.l10 {
  left: 10%;
}

.character-detail .profile-card {
  width: 5.24rem;
  position: relative
}

.character-detail .profile-card .masked-area {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 521.11 524.5"><title></title><path stroke="%23d5d5d5" d="M505.33,488.65c-4.12,2.18-7.52,1.94-14.32,7.77-2.61,2.23-3.4,8-9.95,12.87s-19.18,4.61-19.18,4.61h-182a54.09,54.09,0,0,0-6.56,1.7c-4,1.2-10.65,6.69-12.85,8.58l-.37.32-.37-.32c-2.21-1.89-8.85-7.38-12.86-8.58a53.78,53.78,0,0,0-6.55-1.7h-181s-12.62.24-19.17-4.61-7.35-10.64-10-12.87c-6.8-5.83-10.19-5.59-14.32-7.77S0,478.11,0,464.86V380.09c.58-2.45,1.54-6,2.48-7.42,2.22-3.31,10.32-5,10.32-5a23.58,23.58,0,0,1-7.29-1.87c-2.91-1.13-4.57-4.19-5.51-7V59.64C0,46.39,11.65,38,15.78,35.85s7.52-1.94,14.32-7.77c2.61-2.24,3.4-8,10-12.87S59.23,10.6,59.23,10.6H240.28a53.78,53.78,0,0,0,6.55-1.7c4-1.2,10.65-6.69,12.86-8.58l.37-.32.37.32c2.2,1.89,8.85,7.38,12.85,8.58a54.09,54.09,0,0,0,6.56,1.7h182s12.62-.24,19.18,4.61S488.4,25.84,491,28.08c6.8,5.83,10.2,5.58,14.32,7.77s15.78,10.54,15.78,23.79v298a16.5,16.5,0,0,1-2.31,5.71c-2.43,3.31-6.7,3.84-9.71,4.35-4.43.74,5.26-1,9.71,5.59a23.12,23.12,0,0,1,2.31,4.91v86.65C521.11,478.11,509.46,486.46,505.33,488.65Z" /></svg>');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 521.11 524.5"><title></title><path stroke="%23d5d5d5" d="M505.33,488.65c-4.12,2.18-7.52,1.94-14.32,7.77-2.61,2.23-3.4,8-9.95,12.87s-19.18,4.61-19.18,4.61h-182a54.09,54.09,0,0,0-6.56,1.7c-4,1.2-10.65,6.69-12.85,8.58l-.37.32-.37-.32c-2.21-1.89-8.85-7.38-12.86-8.58a53.78,53.78,0,0,0-6.55-1.7h-181s-12.62.24-19.17-4.61-7.35-10.64-10-12.87c-6.8-5.83-10.19-5.59-14.32-7.77S0,478.11,0,464.86V380.09c.58-2.45,1.54-6,2.48-7.42,2.22-3.31,10.32-5,10.32-5a23.58,23.58,0,0,1-7.29-1.87c-2.91-1.13-4.57-4.19-5.51-7V59.64C0,46.39,11.65,38,15.78,35.85s7.52-1.94,14.32-7.77c2.61-2.24,3.4-8,10-12.87S59.23,10.6,59.23,10.6H240.28a53.78,53.78,0,0,0,6.55-1.7c4-1.2,10.65-6.69,12.86-8.58l.37-.32.37.32c2.2,1.89,8.85,7.38,12.85,8.58a54.09,54.09,0,0,0,6.56,1.7h182s12.62-.24,19.18,4.61S488.4,25.84,491,28.08c6.8,5.83,10.2,5.58,14.32,7.77s15.78,10.54,15.78,23.79v298a16.5,16.5,0,0,1-2.31,5.71c-2.43,3.31-6.7,3.84-9.71,4.35-4.43.74,5.26-1,9.71,5.59a23.12,23.12,0,0,1,2.31,4.91v86.65C521.11,478.11,509.46,486.46,505.33,488.65Z" /></svg>');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  position: absolute;
  left: .01rem;
  top: .01rem;
  right: .01rem;
  bottom: .01rem
}

.profile-card .native {
  height: .72rem;
  width: 100%;
  display: block;
  position: relative;
}

.profile-card .native span {
  width: auto;
  display: block;
  position: absolute;
  top: .3rem;
  left: 50%;
  transform: translateX(-50%);
}

.profile-card .native span>img {
  display: block;
  height: .29rem;
  width: auto;
  object-fit: contain;
}

.profile-card .native span:before,
.profile-card .native span:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: .2rem;
  height: .2rem;
  opacity: .5;
  background: url(../img/character-view-native-deco.png) no-repeat center / contain
}

.profile-card .native span:before {
  right: 100%
}

.profile-card .native span:after {
  left: 100%
}

.profile-card .native:before,
.profile-card .native:after {
  content: "";
  display: block;
  position: absolute;
  mix-blend-mode: overlay;
}

.profile-card .native:before {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: .17;
  background: url(../img/character-view-native-pattern.png) no-repeat center / cover
}

.profile-card .native:after {
  width: 5.2rem;
  height: .7rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: .01rem;
  background: url(../img/character-view-native-line.png) no-repeat center top / 100% auto
}

.profile-card .summary {
  display: block;
  padding-left: .4rem;
  padding-top: .2rem;
  font-size: .22rem;
  color: #5a5a5a;
  letter-spacing: -.04em;
  line-height: .28rem;
  font-weight: 600
}

.profile-card .name {
  display: block;
  padding-left: .4rem;
  width: 4rem;
  padding-top: .05rem
}

.profile-card .profile {
  display: block;
  width: 4.75rem;
  padding-left: .4rem;
  padding-top: .24rem;
  padding-bottom: .2rem;
  text-align: left;
}

.profile-card .profile li {
  display: inline-flex;
  align-items: start;
  min-width: 0;
  gap: .1rem;
  margin: .04rem 0;
}

.profile-card .profile li:nth-child(odd) {
  width: 1.85rem
}

.profile-card .profile li:nth-child(even) {
  width: 2.9rem
}

.profile-card .profile li .tit {
  width: .76rem;
  flex: none;
  position: relative;
}

.profile-card .profile li .tit>span {
  position: absolute;
  left: .1rem;
  width: .5rem;
  text-align: left;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: .16rem;
  line-height: .19rem;
  letter-spacing: -.06em;
}

.profile-card .profile li .detail {
  color: #7b7b7b;
  font-size: .15rem;
  line-height: .2rem;
  letter-spacing: -.06em;
  padding-top: .15em
}

.profile-card .description:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: .08rem;
  background: url(../img/deco-line-profile.png) no-repeat center / contain
}

.profile-card .description {
  padding: .28rem .48rem 0;
  text-align: left;
  position: relative;
  color: #7b7b7b;
  font-size: .18rem;
  line-height: .24rem;
  letter-spacing: -.06em;
}

.movie-card {
  width: 5.38rem;
  margin: 0 auto;
  margin-top: 1.15rem;
  position: relative;
}

.movie-card>span {
  width: 2.38rem;
  height: 1.08rem;
  overflow: hidden;
  position: absolute;
  background: #b3b3b3;
  border-radius: .12rem;
  top: .18rem
}

.movie-card>span>img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.movie-card .skill {
  right: 50%;
  margin-right: .04rem
}

.movie-card .ending {
  left: 50%;
  margin-left: .04rem
}

.voice {
  position: absolute;
  left: 1.6rem;
  bottom: .8rem;
  opacity: 0;
  transform: translateY(.2rem);
  transition: all .2s var(--easing)
}

.active.detail-view .voice {
  transition-delay: .5s;
  opacity: 1;
  transform: translateY(0);
}

.voice .inner-circle {
  border-radius: .35rem;
  overflow: hidden;
  width: 2.5rem;
  height: .7rem;
  position: relative;
  display: flex;
  align-items: center;
}

.voice .inner-circle .tit {
  background: #3b2e2e;
  display: block;
  text-align: center;
  color: #fff;
  letter-spacing: 0;
  font-size: .18rem;
  line-height: .2rem;
  padding: .25rem 0;
  width: .8rem;
  flex: none
}

.voice .cv-name {
  min-width: 0;
  width: auto;
  flex: 1;
}

.voice .cv-name p {
  text-align: center;
  display: inline-block;
  color: #fff;
  width: 1.2rem;
  font-size: .26rem;
  line-height: .3rem;
}

.voice .cv-name button {
  display: block;
  width: .4rem;
  height: .4rem;
  background: #e3e3e3;
  position: absolute;
  right: .12rem;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 100%;
}

.voice .cv-name button img {
  width: .22rem;
  height: auto;
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.character-detail-view .btn-back {
  position: absolute;
  bottom: 100%;
  margin-bottom: .1rem;
  left: .32rem;
  padding: .1rem 0;
  padding-left: .5rem;
  color: #5a5a5a;
  font-size: .22rem;
  letter-spacing: -.04em;
  line-height: .3rem;
  font-weight: 600;
}

.character-detail-view .btn-back:before {
  content: "";
  display: block;
  left: 0;
  height: .26rem;
  width: .41rem;
  position: absolute;
  top: .12rem;
  background: url(../img/ic-back.png) no-repeat center top / 100% auto
}

.character-detail-view .btn-back:hover {
  color: #c95155
}

.character-detail-view .btn-back:hover:before {
  background-position-y: bottom
}

/* Universe */

.scene[data-name="Universe"] .fit-cover {
  background: #fff;
}

.scene[data-name="Universe"] .fit-cover .masked-bg {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  height: 82.315%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 1065'%3E%3Ctitle%3E-%3C/title%3E%3Cpath d='M1280,1065H0V115c42.92,32.5,76.17,68.17,118.91,66.29,71.46-6.33,174.64,35.47,193.67,67.81,14.66,21.6,51.05,55.42,76.33,73.33,8.61,5.78,16.26,9.68,21.95,10.83,23.58,5.51,96.62,26.91,126.15,45.23,29.31,18.72,66.54,20.07,87.59,6.66,21.27-12.94,50.66-52.1,98.6-58.65,48-6.35,78.39-2.12,109.06-45,30.33-44.39,78.68-94.37,124.18-97.78,37.67-2.82,79,12.86,126.25-4.45l-6.36-3.7-8-.29,5.89-8.84-.88-6.49,8.25,4.72,21.52-5.31-17.39,12.38-.21,6.44a144.35,144.35,0,0,0,27.24-14.32C1173.1,126,1280.05.65,1280,0,1280.34,194,1280,1065,1280,1065ZM1092.24,164.1l-13.56,3.24-3.53,4.72,6.19.88ZM1071,178.84s-22.1,6.18-40.08,5.89-32.72-4.13-56.59-3.54c-12.38.31-20.34.3-20.34.3s25.94-5.31,50.7-4.72,35.66.3,49.51-3l13.85-3.24-4.42,5.6Zm-73.39-4.72c-7.37.59-26.82,1.18-37.43,4.13s-1.47.29-18.86,4.71-57.47,33.6-57.47,33.6,23.49-18.43,40.29-28.16,42.82-14,50.78-14.87,30.38-1.69,38-6.19c6-3.54.29-8.55.29-8.55a4,4,0,0,1-.59,5.9c-2,1.83-5.89,1.47-7.95-1.18s-1.48-8.25,4.42-10.32,13.85,2.36,10.61,12.09C1017.5,172,1005,173.53,997.63,174.12ZM276.18,217c-5.7-2.73-41.38-20.1-60.89-25.66-7.11-2-12-4.22-12.87-11.24-1.27-10.18,7.4-13,12.78-9.77s4.85,8.79,2.31,11-6.42,1.78-8-.41a4,4,0,0,1,.58-5.89s-6.58,3.77-1.39,8.43c6.58,5.91,27.33,10.88,29.64,12.21,6.95,4,41.28,15.47,55.07,29.13,9.48,9.4,11.21,12.49,11.21,12.49S292.37,224.74,276.18,217Zm-75.79-44.8c-3,8.87,1.32,13.81,1.32,13.81l-11.11-2.33c-.46-2.06-1.2-5.41-1.78-7.67-.88-3.46-2.58-4.2-2.58-4.2s.77,8.61,1,11.16l-18.33-3.84a19.91,19.91,0,0,1,5.36-3.19c3.87-1.56,10.17-1.08,10.17-1.08l-.34-2.72-2.71.28c-2.69.27-9.59,3.21-13.47,6.5l-2.3-.48a34.15,34.15,0,0,1,6.95-6.41,18.86,18.86,0,0,1,6.85-2.48l2.09-13.8s5.86,2.64,8.7,5.1L193,163.3s7.19-.94,11.35.19a23.51,23.51,0,0,1,7,3.22S202.36,166.41,200.39,172.19Zm-3.79-6.81c-4.53.19-6.42,1.7-6.42,1.7l-5.68-4.16,6.07,6.91,1.31,9.36s.94-6.62,1.89-8.7,8.51-4.73,8.51-4.73S201.15,165.19,196.6,165.38Zm-34,12.91s-5.82-.13-11.74-.39c-7.9-.35-22.8.16-34.58,0-11-.13-16-.9-14.57-1-11.92.48-47-20.92-47-20.92s30.07,14.27,39.72,16.41a80.44,80.44,0,0,0,21.65,2,283.14,283.14,0,0,1,44.11.95,26.51,26.51,0,0,1,5.51-3.31,54.31,54.31,0,0,1,8.34-2.63s-4.93,2.76-6.47,3.88A52.49,52.49,0,0,0,162.57,178.29Z' /%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
  -webkit-mask-size: cover;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 1065'%3E%3Ctitle%3E-%3C/title%3E%3Cpath d='M1280,1065H0V115c42.92,32.5,76.17,68.17,118.91,66.29,71.46-6.33,174.64,35.47,193.67,67.81,14.66,21.6,51.05,55.42,76.33,73.33,8.61,5.78,16.26,9.68,21.95,10.83,23.58,5.51,96.62,26.91,126.15,45.23,29.31,18.72,66.54,20.07,87.59,6.66,21.27-12.94,50.66-52.1,98.6-58.65,48-6.35,78.39-2.12,109.06-45,30.33-44.39,78.68-94.37,124.18-97.78,37.67-2.82,79,12.86,126.25-4.45l-6.36-3.7-8-.29,5.89-8.84-.88-6.49,8.25,4.72,21.52-5.31-17.39,12.38-.21,6.44a144.35,144.35,0,0,0,27.24-14.32C1173.1,126,1280.05.65,1280,0,1280.34,194,1280,1065,1280,1065ZM1092.24,164.1l-13.56,3.24-3.53,4.72,6.19.88ZM1071,178.84s-22.1,6.18-40.08,5.89-32.72-4.13-56.59-3.54c-12.38.31-20.34.3-20.34.3s25.94-5.31,50.7-4.72,35.66.3,49.51-3l13.85-3.24-4.42,5.6Zm-73.39-4.72c-7.37.59-26.82,1.18-37.43,4.13s-1.47.29-18.86,4.71-57.47,33.6-57.47,33.6,23.49-18.43,40.29-28.16,42.82-14,50.78-14.87,30.38-1.69,38-6.19c6-3.54.29-8.55.29-8.55a4,4,0,0,1-.59,5.9c-2,1.83-5.89,1.47-7.95-1.18s-1.48-8.25,4.42-10.32,13.85,2.36,10.61,12.09C1017.5,172,1005,173.53,997.63,174.12ZM276.18,217c-5.7-2.73-41.38-20.1-60.89-25.66-7.11-2-12-4.22-12.87-11.24-1.27-10.18,7.4-13,12.78-9.77s4.85,8.79,2.31,11-6.42,1.78-8-.41a4,4,0,0,1,.58-5.89s-6.58,3.77-1.39,8.43c6.58,5.91,27.33,10.88,29.64,12.21,6.95,4,41.28,15.47,55.07,29.13,9.48,9.4,11.21,12.49,11.21,12.49S292.37,224.74,276.18,217Zm-75.79-44.8c-3,8.87,1.32,13.81,1.32,13.81l-11.11-2.33c-.46-2.06-1.2-5.41-1.78-7.67-.88-3.46-2.58-4.2-2.58-4.2s.77,8.61,1,11.16l-18.33-3.84a19.91,19.91,0,0,1,5.36-3.19c3.87-1.56,10.17-1.08,10.17-1.08l-.34-2.72-2.71.28c-2.69.27-9.59,3.21-13.47,6.5l-2.3-.48a34.15,34.15,0,0,1,6.95-6.41,18.86,18.86,0,0,1,6.85-2.48l2.09-13.8s5.86,2.64,8.7,5.1L193,163.3s7.19-.94,11.35.19a23.51,23.51,0,0,1,7,3.22S202.36,166.41,200.39,172.19Zm-3.79-6.81c-4.53.19-6.42,1.7-6.42,1.7l-5.68-4.16,6.07,6.91,1.31,9.36s.94-6.62,1.89-8.7,8.51-4.73,8.51-4.73S201.15,165.19,196.6,165.38Zm-34,12.91s-5.82-.13-11.74-.39c-7.9-.35-22.8.16-34.58,0-11-.13-16-.9-14.57-1-11.92.48-47-20.92-47-20.92s30.07,14.27,39.72,16.41a80.44,80.44,0,0,0,21.65,2,283.14,283.14,0,0,1,44.11.95,26.51,26.51,0,0,1,5.51-3.31,54.31,54.31,0,0,1,8.34-2.63s-4.93,2.76-6.47,3.88A52.49,52.49,0,0,0,162.57,178.29Z' /%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center bottom;
  mask-size: cover;
  opacity: 0;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  transition: clip-path .55s var(--easing);
}

.scene[data-name="Universe"].active .fit-cover .masked-bg {
  opacity: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.scene[data-name="Universe"] .fit-cover .masked-bg img {
  position: absolute;
  left: 50%;
  bottom: 0;
  min-width: 100%;
  min-height: 56.25%;
  height: auto;
  width: auto;
  filter: blur(.04rem);
  transform: scale(1.1) translateX(-50%);
  transition: transform .8s var(--easing);
}

.scene[data-name="Universe"].active .fit-cover .masked-bg img {
  transform: scale(1) translateX(-50%);
}


.scene[data-name="Universe"] .scn-title {
  margin-top: .2rem;
}

.scene[data-name="Universe"] .book {
  position: relative;
  margin: .28rem auto;
  width: 7rem;
  opacity: 0;
  transform: translateY(4%);
  transition: opacity .25s 0s var(--easing), transform .5s 0s var(--easing)
}

.scene[data-name="Universe"].active .book {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .25s .5s var(--easing), transform .65s .35s var(--easing);
}

.scene[data-name="Universe"] .book .swiper-container {
  position: absolute;
  width: 6.2rem;
  height: 7.32rem;
  left: 50%;
  top: 50%;
  margin-left: -3.1rem;
  margin-top: -3.66rem;
  overflow: hidden;
  pointer-events: fill;
}

.book .swiper-container .swiper-slide .page-scroller {
  display: block;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.book .swiper-container .swiper-slide .page:before,
.book .swiper-container .swiper-slide .page:after {
  content: "";
  display: block;
  height: .25rem
}

.book .swiper-container .swiper-slide.swiper-slide-active .page-scroller.touch-allow {
  touch-action: pan-y !important;
  overflow-y: auto;
}

.book .page-scroller .page {
  padding-right: .25rem;
}

.page-title {
  display: block;
  position: relative;
  text-align: center;
  font-size: .24rem;
  line-height: .4rem;
  color: #3c3634;
  font-weight: 700;
  padding: 0 0 .16rem;
}

.page-title:before {
  content: "";
  display: block;
  position: absolute;
  bottom: .06rem;
  width: 100%;
  left: 0;
  background: url(../img/deco-line-universe.png) no-repeat center / auto 100%;
  height: .06rem;
}

.page-title strong {
  font: inherit;
  font-size: .28rem;
  color: #884129;
  display: inline-block;
  margin-left: .1rem
}

.page .cover {
  width: 4.7rem;
  display: block;
  margin: 0 auto;
}

.page .stit {
  display: block;
  font-size: .24rem;
  line-height: .36rem;
  color: #414141;
  font-weight: 700;
  text-align: center;
}

.page .dc {
  display: block;
  font-size: .16rem;
  line-height: .24rem;
  color: #414141;
  font-weight: 500;
  text-align: center;
}

.page .empty-space {
  display: block;
  height: .15rem
}

.page .logo {
  display: block;
  width: 3.84rem;
  margin: .1rem auto
}

.page .illust {
  width: 4.6rem;
  margin: 0 auto;
  box-sizing: border-box;
  padding: .1rem;
  background: url(../img/universe-illust-frame.png) no-repeat center / contain;
}

.page .dc+.dc {
  margin-top: .12rem
}

.page .page-title+.dc {
  margin-top: .16rem
}

.page .dialog {
  width: 4.4rem;
  position: relative;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: auto;
  gap: .2rem;
}

.page .dialog+.dialog {
  margin-top: .1rem
}

.page .dc+.dialog {
  margin-top: .08rem
}

.page .dialog+.dc {
  margin-top: .08rem
}

.page .mg-0 {
  margin-top: 0 !important
}

.page .mg-5 {
  margin-top: .05rem !important
}

.page .dialog .who {
  flex: none;
  width: .7rem;
  text-align: center;
  position: relative;
}

.page .dialog .who:before {
  content: "";
  display: block;
  position: relative;
  margin: 0 auto;
  border-radius: 100%;
  width: .6rem;
  height: .6rem;
  border: .02rem solid #5e4c47;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.page .dialog .who .name {
  position: relative;
  display: block;
  color: #fff;
  font-size: .11rem;
  line-height: .19rem;
  font-weight: 700;
  z-index: 1;
  width: 100%;
  padding-top: .01rem;
  margin-top: -.06rem;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center top;
}

.page .dialog .words {
  flex: 1;
  min-height: 100%;
  vertical-align: middle;
  text-align: left;
  font-family: "Nanum Myeongjo";
  font-size: .16rem;
  line-height: .24rem;
  align-content: center;
  font-weight: 700
}

.page .dialog.ethan .words {
  color: #1c4c9b
}

.page .dialog.ethan .who:before {
  background-image: url(../img/universe-profile-ethan.jpg)
}

.page .dialog.ethan .who .name {
  background-image: url(../img/universe-tag-ethan.png)
}

.page .dialog.elizabeth .words {
  color: #cc3c65
}

.page .dialog.elizabeth .who:before {
  background-image: url(../img/universe-profile-elizabeth.jpg)
}

.page .dialog.elizabeth .who .name {
  background-image: url(../img/universe-tag-elizabeth.png)
}

.page .dialog.bedivere .words {
  color: #1d8326
}

.page .dialog.bedivere .who:before {
  background-image: url(../img/universe-profile-bedivere.jpg)
}

.page .dialog.bedivere .who .name {
  background-image: url(../img/universe-tag-bedivere.png)
}

.page .dialog.morgana .words {
  color: #884129
}

.page .dialog.morgana .who:before {
  background-image: url(../img/universe-profile-morgana.jpg)
}

.page .dialog.morgana .who .name {
  background-image: url(../img/universe-tag-morgana.png)
}

.page .dialog.goblin .words {
  color: #3e534b
}

.page .dialog.goblin .who:before {
  background-image: url(../img/universe-profile-goblin.jpg)
}

.page .dialog.goblin .who .name {
  background-image: url(../img/universe-tag-goblin.png)
}

.page-scroller {
  position: relative;
}

.page-scroller::-webkit-scrollbar {
  height: 0;
  width: 0;
}

.page-scroller .scroll-element,
.page-scroller .scroll-element div {
  border: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 10;
}

.page-scroller .scroll-element div {
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.page-scroller .scroll-element.scroll-x {
  display: none;
}

.page-scroller .scroll-element.scroll-y {
  position: absolute;
  z-index: 20;
  width: .04rem;
  bottom: .4rem;
  top: .4rem;
  right: .25rem;
  overflow: visible;
}

.page-scroller .scroll-element.scroll-y .scroll-element_track {
  position: absolute;
  width: 100%;
  height: calc(100% + .8rem);
  left: 0;
  top: -.4rem;
  background: linear-gradient(to bottom, rgba(172, 158, 141, 0) 0%, rgba(172, 158, 141, 1) 25%, rgba(172, 158, 141, 1) 75%, rgba(172, 158, 141, 0) 100%) !important
}

.page-scroller .scroll-element.scroll-y .scroll-bar {
  position: absolute;
  display: block;
  background: #7e6a5c;
  border: 0 none;
  border-radius: .14rem;
  width: .28rem;
  left: 50%;
  margin-left: -.14rem;
}

.page-scroller .scroll-element.scroll-y .scroll-bar:before,
.page-scroller .scroll-element.scroll-y .scroll-bar:after {
  content: "";
  display: block;
  position: absolute;
  left: .02rem;
  width: .24rem;
  height: .24rem;
  background: url(../img/scroll-arrow.png) no-repeat center / contain
}

.page-scroller .scroll-element.scroll-y .scroll-bar:before {
  top: .08rem
}

.page-scroller .scroll-element.scroll-y .scroll-bar:after {
  bottom: .08rem;
  transform: rotate(180deg)
}

.scene[data-name="Universe"] .part-tabs {
  position: relative;
  display: flex;
  margin: .3rem auto .1rem;
  width: 6.8rem;
  height: .37rem;
  align-items: stretch;
  justify-content: center;
  gap: .1rem;
  left: auto;
  bottom: auto;
  top: auto;
  right: auto;
}

.part-tabs .swiper-pagination-bullet {
  display: block;
  cursor: pointer;
  position: relative;
  width: auto;
  height: auto;
  margin: 0;
  flex: 1;
  text-align: center;
  opacity: 1 !important;
  border-radius: 0;
  box-sizing: border-box;
  background: none !important
}

.part-tabs .swiper-pagination-bullet:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: .17rem;
  background: rgba(28, 9, 3, .6);
}

.part-tabs .swiper-pagination-bullet em {
  font-size: .2rem;
  font-weight: 500;
  line-height: .26rem;
  padding: .08rem 0 0;
  display: inline-block;
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, .75);
  letter-spacing: 0;
  text-shadow: 0 0 .08rem rgba(0, 0, 0, .3);
}

.part-tabs .swiper-pagination-bullet .deco {
  position: absolute;
  width: .24rem;
  height: 120%;
  top: -10%;
  overflow: hidden;
  border-radius: .12rem;
}

.part-tabs .swiper-pagination-bullet .deco.st {
  left: 0;
  transition: left .2s var(--easing)
}

.part-tabs .swiper-pagination-bullet .deco.ed {
  right: 0;
  transition: right .2s var(--easing)
}

.part-tabs .swiper-pagination-bullet .deco>.svg {
  display: none;
  position: absolute;
  top: 0;
  height: 100%;
  object-fit: contain;
  fill: #c1903b;
  width: auto
}

.part-tabs .swiper-pagination-bullet .deco.st>.svg {
  left: 0
}

.part-tabs .swiper-pagination-bullet .deco.ed>.svg {
  right: 0
}

.part-tabs .swiper-pagination-bullet.swiper-pagination-bullet-active em {
  color: #da9e12;
  font-weight: 700;
}

.part-tabs .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
  background: rgba(28, 9, 3, .8);
}

.part-tabs .swiper-pagination-bullet.swiper-pagination-bullet-active .deco.st {
  left: -.1rem
}

.part-tabs .swiper-pagination-bullet.swiper-pagination-bullet-active .deco.ed {
  right: -.1rem
}

.part-tabs .swiper-pagination-bullet.swiper-pagination-bullet-active .deco>.svg {
  display: block
}

.part-tabs .swiper-pagination-bullet:active .deco,
.part-tabs .swiper-pagination-bullet:active:before {
  transform: scale(1, .95)
}



/* Media */
.scene[data-name="Media"] .fit-cover>span {
  position: absolute;
  transform: translate(-40%, -45%);
  pointer-events: none;
  opacity: 0;
}

.scene[data-name="Media"] .fit-cover>img {
  transform: scale(1.05);
  opacity: 0;
  transition: opacity .5s var(--easing), transform 1s var(--easing);
}

.scene[data-name="Media"].active .fit-cover>img {
  opacity: 1;
  transform: scale(1);
}


.scene[data-name="Media"] .viewer {
  position: relative;
  width: 7.2rem;
  margin: 0 auto;
  height: 8.4rem;
}

.scene[data-name="Media"] .swiper-buttons {
  position: absolute;
  left: -2%;
  top: 2.15rem;
  transform: translateY(-50%);
  opacity: 0;
  width: 104%;
  pointer-events: none;
}

.scene[data-name="Media"] .swiper-buttons.visible {
  opacity: 1;
  pointer-events: auto;
}

.scene[data-name="Media"] .swiper-button-prev,
.scene[data-name="Media"] .swiper-button-next {
  top: 50%;
  margin: 0;
}

.scene[data-name="Media"] .swiper-button-prev {
  right: auto;
  left: 0;
}

.scene[data-name="Media"] .swiper-button-next {
  right: 0;
  left: auto;
}

.scene[data-name="Media"] .swiper-container {
  display: block;
  position: absolute;
  top: .2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 6.76rem;
  box-sizing: content-box;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  display: none
}

.scene[data-name="Media"] .swiper-container.visible {
  opacity: 1;
  pointer-events: auto;
  display: block
}

.scene[data-name="Media"] .swiper-slide {
  box-sizing: border-box;
  padding: 0;
  pointer-events: none;
}

.scene[data-name="Media"] .swiper-slide>button {
  display: block;
  width: 100%;
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 0s var(--easing)
}

.scene[data-name="Media"] .swiper-slide.swiper-slide-active:before,
.scene[data-name="Media"] .swiper-slide.swiper-slide-prev:before,
.scene[data-name="Media"] .swiper-slide.swiper-slide-next:before,
.scene[data-name="Media"] .swiper-slide.swiper-slide-active>button,
.scene[data-name="Media"] .swiper-slide.swiper-slide-prev>button,
.scene[data-name="Media"] .swiper-slide.swiper-slide-next>button {
  opacity: 1;
  pointer-events: auto;
  transition: opacity .25s var(--easing);
}

.scene[data-name="Media"] .swiper-slide .preview {
  position: relative;
  display: block;
  overflow: hidden;
}

.scene[data-name="Media"] .swiper-slide .preview:before {
  content: "";
  display: block;
  padding-top: 56.25%
}

.scene[data-name="Media"] .swiper-slide .preview img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  min-width: 100%;
  min-height: 100%;
}

.scene[data-name="Media"] .swiper-slide>button .bt-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translate(-50%, -50%);
  opacity: .65
}

/* Digital-goods */
.scene[data-name="Digital-Goods"] {
  background: #efefef;
}

.scene[data-name="Digital-Goods"] .scene-content {
  min-height: calc(calc(var(--vh)* 100) - 2.72rem);
  height: max(calc(calc(var(--vh)* 100) - 2.72rem), 12.8rem);
}

.scene[data-name="Digital-Goods"] .fit-cover>span {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: all .35s .3s var(--easing);
}

.scene[data-name="Digital-Goods"].active .fit-cover>span {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.scene[data-name="Digital-Goods"] .fit-cover .circle {
  width: 20rem;
  transform: translateX(-50%) translateY(5%);
  top: 53.125%;
  left: 50%;
}

.scene[data-name="Digital-Goods"] .fit-cover .ethan,
.scene[data-name="Digital-Goods"] .fit-cover .bedivere {
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(10%);
}

.scene[data-name="Digital-Goods"] .fit-cover .ethan {
  width: 3.3rem;
  margin-top: 1.44rem;
  margin-left: 1.86rem
}

.scene[data-name="Digital-Goods"] .fit-cover .bedivere {
  width: 3rem;
  margin-top: .8rem;
  margin-left: -2.36rem
}

.scene[data-name="Digital-Goods"] .scn-title>span {
  height: .23rem
}

.scene[data-name="Digital-Goods"] .btn-group {
  gap: .1rem;
}

.scene[data-name="Digital-Goods"] .article.visible .btn-group {
  z-index: 5;
  pointer-events: auto
}


.scene[data-name="Digital-Goods"] .bt-go .outline {
  position: Absolute;
}

.scene[data-name="Digital-Goods"] .bt-go .outline {
  position: absolute;
  height: 100%;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden
}

.scene[data-name="Digital-Goods"] .bt-go .outline .line {
  transform: translateY(-50%)
}

.scene[data-name="Digital-Goods"] .bt-go .outline.st {
  right: 50%;
}

.scene[data-name="Digital-Goods"] .bt-go .outline.ed {
  left: 50%;
}

.scene[data-name="Digital-Goods"] .bt-go .outline.st .line {
  left: 0;
}

.scene[data-name="Digital-Goods"] .bt-go .outline.ed .line {
  left: auto;
  right: 0;
}

.scene[data-name="Digital-Goods"] .viewer {
  height: 9rem;
  width: 100%;
  position: relative;
}

.scene[data-name="Digital-Goods"] .article {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--easing);
}

.scene[data-name="Digital-Goods"] .article * {
  pointer-events: none !important;
}

.scene[data-name="Digital-Goods"].active .article.visible * {
  pointer-events: auto !important;
}

.scene[data-name="Digital-Goods"] .article.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  transition-delay: .15s
}


.scene[data-name="Digital-Goods"] .scn-tabs {
  margin-bottom: 0
}

.scene[data-name="Digital-Goods"] .btn-group {
  margin: .15rem auto 0;
}

.scene[data-name="Digital-Goods"] .btn-group>.bt-go {
  display: block;
  margin: 0 auto
}

.scene[data-name="Digital-Goods"] .btn-group>.bt-go+.bt-go {
  margin-top: .15rem
}

.scene[data-name="Digital-Goods"] .btn-group>.bt-go,
.scene[data-name="Digital-Goods"] .btn-group>.bt-go:before,
.scene[data-name="Digital-Goods"] .btn-group>.bt-go:after {
  height: .8rem;
  border-radius: .4rem
}

.scene[data-name="Digital-Goods"] .btn-group>.bt-go {
  width: 3.44rem;
}

.scene[data-name="Digital-Goods"] .btn-group>.bt-go .outline {
  width: 1.67rem;
}

.scene[data-name="Digital-Goods"] .btn-group>.bt-go>span {
  font-size: .24rem;
}

.scene[data-name="Digital-Goods"] .device .btn-group {
  position: absolute;
  bottom: 0;
  width: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.scene[data-name="Digital-Goods"] .device .btn-group>.bt-go,
.scene[data-name="Digital-Goods"] .device .btn-group>.bt-go:before,
.scene[data-name="Digital-Goods"] .device .btn-group>.bt-go:after {
  height: .56rem;
  border-radius: .28rem
}

.scene[data-name="Digital-Goods"] .device .btn-group>.bt-go {
  width: 100%
}

.scene[data-name="Digital-Goods"] .device .btn-group>.bt-go>span {
  padding-top: .12rem
}

.scene[data-name="Digital-Goods"] .device .btn-group>.bt-go .outline {
  width: 1.08rem;
}

.scene[data-name="Digital-Goods"] .device .btn-group>.bt-go .outline .line {
  width: 2.7rem;
}

.ogq-content {
  height: auto;
  width: 6.84rem;
  margin: .32rem auto 0;
  position: relative;
}

.ogq-content .character {
  position: absolute;
  width: 1.54rem;
  height: auto;
  top: .08rem
}

.ogq-content .character.c01 {
  left: -.02rem
}

.ogq-content .character.c02 {
  right: -.08rem
}


.dp-table {
  position: relative;
  width: 6.8rem;
  margin: 0 auto;
  margin-top: .15rem;
  height: auto
}

.dp-table:before,
.dp-table:after {
  content: "";
  display: block;
  pointer-events: none;
  position: absolute;
  z-index: 0;
  transform: translateZ(0);
}

.dp-table:before {
  width: 18.43rem;
  height: 50vh;
  top: 10rem;
  left: 50%;
  transform: translateX(-50%);
  background: #fff
}

.dp-table:after {
  width: 18.43rem;
  left: 50%;
  transform: translateX(-50%);
  height: 8.5rem;
  top: 1.55rem;
  background: url(../img/m_dgoods-wallpaper-table.png) no-repeat center top / 100% auto
}

.dp-table .device {
  z-index: 1;
  margin: 0 auto;
  position: relative;
}

.dp-table .device-group {
  display: block;
  height: 4rem;
  width: 6.08rem;
  margin: .2rem auto 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.dp-table .device-group>.device {
  flex: none;
  position: relative;
}

.dp-table .device .name {
  position: absolute;
  left: 0;
  bottom: .7rem;
  width: 100%;
  text-align: center;
}

.dp-table .device .name span {
  display: inline-block;
  position: relative;
  font-size: .16rem;
  letter-spacing: -.06em;
  font-weight: 600;
  color: #5a5a5a;
  line-height: .2rem;
  padding: 0 .1rem
}

.dp-table .device .name span:before,
.dp-table .device .name span:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: url(../img/dgoods-wallpaper-dvc-deco.png) no-repeat center / contain;
  width: .2rem;
  height: .2rem;
  opacity: .5
}

.dp-table .device .name span:before {
  right: 100%
}

.dp-table .device .name span:after {
  left: 100%
}

.dp-table .device .swiper-container {
  position: absolute;
  overflow: hidden;
}

.dp-table .device .swiper-container .swiper-slide {
  position: relative;
  overflow: hidden;
}

.dp-table .device .swiper-container .swiper-slide>img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.dp-table .device .swiper-button-prev,
.dp-table .device .swiper-button-next {
  width: .52rem;
  height: .52rem
}

.dp-table .device.wp-mobile {
  width: 1.74rem
}

.dp-table .device.wp-mobile .swiper-container {
  border-radius: .24rem;
  width: 1.3rem;
  height: 2.85rem;
  left: .2rem;
  top: .06rem
}

.dp-table .device.wp-mobile .swiper-button-prev,
.dp-table .device.wp-mobile .swiper-button-next {
  top: 1.72rem
}

.dp-table .device.wp-tablet {
  width: 5.2rem;
  height: 4.46rem
}

.dp-table .device.wp-tablet .swiper-container {
  border-radius: .08rem;
  width: 4.56rem;
  height: 3rem;
  left: .32rem;
  top: .17rem
}

.dp-table .device.wp-tablet .swiper-button-prev,
.dp-table .device.wp-tablet .swiper-button-next {
  top: 2rem
}

.dp-table .device.wp-watch {
  width: 1.6rem;
  margin-top: .2rem
}

.dp-table .device.wp-watch .name {
  bottom: 1rem;
}

.dp-table .device.wp-watch .swiper-container {
  border-radius: .18rem;
  width: 1.2rem;
  height: 1.4rem;
  left: .21rem;
  top: .52rem
}


.dp-table .device.wp-watch .swiper-button-prev,
.dp-table .device.wp-watch .swiper-button-next {
  top: 1.54rem
}


.scene[data-name="Digital-Goods"] .footer {
  background: #1b1b1b;
  position: relative;
  z-index: 3;
  transform: translateZ(0);
}

.footer .aligner {
  width: 5.4rem;
  margin: 0 auto;
  height: 2.72rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.footer .aligner:before,
.footer .aligner:after {
  content: "";
  display: block;
  flex: 1
}

.footer .aligner p {
  display: block;
  text-align: center;
  flex: none
}


.footer .aligner span,
.footer .aligner a,
.footer .aligner button {
  display: inline-block;
  vertical-align: top;
  font-size: .14rem;
  color: #7b7b7b;
  letter-spacing: -.06em;
  line-height: .2rem
}

.footer .aligner span:not(.divider)+span:not(.divider) {
  margin-left: .2rem
}

.footer .aligner button {
  color: #fff;
}

.footer .aligner button strong {
  color: #6de5f3;
}

.footer .divider {
  text-align: center;
  width: .24rem;
  font-weight: 600;
  margin: 0;
  padding: 0
}

.footer .c-info {
  margin-top: .12rem
}

.footer .ci-copy {
  margin-top: .24rem
}

.footer .ci {
  color: #7b7b7b;
  letter-spacing: -.04em;
}

.footer .ci img {
  display: block;
  height: .18rem;
  width: auto;
  object-fit: contain;
}

.footer .ci+.ci {
  margin-left: .32rem
}

.footer .copyright {
  margin: 0;
  text-align: center;
  padding-top: .24rem;
  display: block;
  color: #7b7b7b;
  letter-spacing: -.04em;
}

/* layer */
.layer .layer-body {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
}

.layer[data-name="common-viewer"],
.layer[data-name="common-video"] {
  width: 7.2rem;
  max-width: 100%;
}

.layer .view-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #000;
  height: auto;
}

.layer .view-box:before {
  content: "";
  display: block;
}

.layer[data-name="common-video"] .view-box:before {
  padding-top: 56.25%
}

.layer[data-name="common-video"] .youtube_screen {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.layer .close-btn {
  width: .88rem;
  height: auto;
  box-sizing: border-box;
  padding: .07rem;
  right: 0;
  top: auto;
  bottom: 100%;
}

.layer .download-btn {
  width: .56rem;
  padding: .15rem;
  height: auto;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  box-sizing: content-box;
}


.layer .bt-go.ok {
  width: 1.96rem;
  height: .6rem;
  display: inline-block;
  overflow: hidden;
  border-radius: .3rem;
}

.layer .bt-go.ok:before,
.layer .bt-go.ok:after {
  border-radius: .3rem;
}

.layer .bt-go.ok .outline {
  position: absolute;
  width: .95rem;
  height: 100%;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden
}

.layer .bt-go.ok .outline .line {
  width: 3.12rem;
  transform: translateY(-50%)
}

.layer .bt-go.ok .outline.st {
  right: 50%;
}

.layer .bt-go.ok .outline.ed {
  left: 50%;
}

.layer .bt-go.ok .outline.st .line {
  left: 0;
}

.layer .bt-go.ok .outline.ed .line {
  left: auto;
  right: 0;
}


.layer.type-doc {
  width: 5.18rem;
}

.layer.type-doc .doc-content {
  position: absolute;
  width: 4.24rem;
  height: 5.9rem;
  text-align: center;
  color: #5a5a5a;
  letter-spacing: -.06em;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.layer.type-doc .empty-space {
  height: .32rem;
  display: block
}

.layer.type-doc .doc-content .title {
  font-size: .2rem;
  line-height: .3rem;
  font-weight: 600;
  padding: .28rem 0
}

.layer.type-doc .doc-content .desc p {
  padding: .04rem 0;
  text-align: left;
  font-size: .16rem;
  line-height: .23rem;
  font-weight: 400
}

.layer.type-doc .doc-content .desc strong {
  font-weight: 600;
}

.layer.type-doc .doc-content .desc ul {
  padding: .04rem 0;
}

.layer.type-doc .doc-content .desc ul+ul {
  padding-top: .1rem;
}

.layer.type-doc .doc-content .desc ul li {
  padding-left: .14rem;
  display: block;
  position: relative;
  text-align: left;
  font-size: .16rem;
  line-height: .23rem;
  font-weight: 400
}

.layer.type-doc .doc-content .desc ul li:before {
  content: "";
  display: block;
  font: inherit;
  text-align: center;
  width: .14rem;
  position: absolute;
  left: 0;
  top: 0;
}

.layer.type-doc .doc-content .desc ul.dot li:before {
  content: "·"
}

.layer.type-doc .doc-content .desc ul.star li:before {
  content: "*";
  top: .03rem
}

.layer.type-doc .doc-content a {
  color: #a23f45
}

.layer.type-doc .doc-content .btn-group {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: .25rem;
  text-align: center;
  margin: 0;
  padding: 0
}

.layer[data-name="alert"] {
  width: 5.18rem;
}

.layer[data-name="alert"] .doc-content {
  position: absolute;
  width: 4.4rem;
  height: 1.2rem;
  top: .4rem;
  text-align: center;
  color: #5a5a5a;
  letter-spacing: -.06em;
  left: 50%;
  transform: translateX(-50%);
}

.layer[data-name="alert"] .doc-content .btn-group {
  position: absolute;
  left: 0;
  width: 100%;
  top: 100%;
  text-align: center;
  margin: 0;
  padding: 0
}

.layer[data-name="alert"] .doc-content .desc {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  text-align: center;
  font-size: .2rem;
  line-height: .3rem;
  font-weight: 600
}


/* v2 Added */
.cookie-pop {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 15;
  transform: translateY(.86rem);
  height: .62rem;
  transition: transform .2s ease-out
}

.cookie-pop.visible {
  transition-duration: .35s
}

.cookie-pop:before {
  content: "";
  display: block;
  position: absolute;
  height: .86rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0
}

.cookie-pop-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: -.01rem;
  height: 100%;
  width: 100%
}

.cookie-pop-wrap>p {
  flex: 1;
  text-align: center;
  color: #9c8d82;
  word-wrap: break-word;
  word-break: keep-all
}

.cookie-pop-wrap>button {
  flex: none;
  display: block;
  background: url(../../assets/img/cookie-pop-btn-all.png) no-repeat center / contain;
  color: #bea78e;
  text-align: center;
  letter-spacing: 0;
  font-weight: 600
}

.cookie-pop-wrap>button[value="custom"] {
  background-image: url(../../assets/img/cookie-pop-btn-setting.png);
  color: #9c8d82
}

.mobile .cookie-pop {
  width: 6.4rem;
  margin-left: -3.2rem;
}

.mobile .cookie-pop.visible {
  transform: translateY(-.1rem);
}

.mobile .cookie-pop:before {
  width: 7.2rem;
  background: url(../../assets/img/cookie-pop_m.png) no-repeat center / contain;
}

.mobile .cookie-pop-wrap>p {
  font-size: .07rem;
  line-height: .1rem;
  letter-spacing: -.025em;
  padding-right: .05rem
}

.mobile .cookie-pop-wrap>button {
  width: 1rem;
  height: .28rem;
  font-size: .08rem;
  line-height: .15rem;
}

.layer[data-name="webshop"] {
  width: 5.38rem;
}

.layer[data-name="webshop"] .doc-content {
  position: absolute;
  width: 3.36rem;
  height: 100%;
  top: 0;
  text-align: center;
  color: #5a5a5a;
  letter-spacing: -.06em;
  left: .24rem;
}

.layer[data-name="webshop"] .doc-content .desc {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  text-align: center;
  font-size: .21rem;
  line-height: .33rem;
  font-weight: 600
}

.layer[data-name="webshop"] .close-btn{
  margin-left: -.25rem;
  margin-bottom: -.25rem;
  right:auto;
  left:100%;
}