@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');

@font-face {
  font-family: 'HeirofLight';
  src: url('../font/HeirofLightRegular.woff2') format('woff2'),
    url('../font/HeirofLightRegular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'HeirofLight';
  src: url('../font/HeirofLightBold.woff2') format('woff2'),
    url('../font/HeirofLightBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

/* default */
:root {
  color-scheme: only dark;
  font-size: var(--fs);
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  text-rendering: optimizeLegibility;
  font-family: "HeirofLight", sans-serif;
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased
}

div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
table,
th,
td,
form,
fieldset,
legend,
select,
button,
input,
textarea,
figure,
figcaption {
  margin: 0;
  padding: 0;
  font-size: 0;
  font-weight: inherit;
  font-style: inherit;
  color: inherit;
  line-height: 0
}

fieldset,
li,
img {
  border: 0;
  vertical-align: baseline
}

ul,
ol {
  list-style: none
}

input,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}

address,
caption,
cite,
code,
dfn,
em,
var,
h1,
h2,
h3,
h4,
h5,
h6,
caption,
strong,
span {
  font-style: inherit;
  color: inherit;
  font-weight: inherit
}

button {
  box-shadow: none;
  outline: 0;
  border: 0 none;
  background: transparent;
  cursor: pointer
}

button::-moz-focus-inner {
  padding: 0
}

a,
a:focus,
a:active,
a:hover {
  outline: none;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer
}

hr {
  display: none
}

legend {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  font-size: 1px;
  line-height: 100px;
  white-space: nowrap
}

::-ms-clear {
  display: none
}

::-ms-reveal {
  display: none
}

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

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, .5)
}

::-webkit-scrollbar-corner {
  background: rgba(0, 0, 0, .5)
}

::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  background: rgba(255, 255, 255, .1)
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .3)
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield
}

input::placeholder {
  opacity: .3;
  color: inherit
}

input+label {
  cursor: pointer;
}

input[disabled],
input:disabled+label {
  cursor: default;
}

select::-ms-expand {
  display: none
}

select {
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0 none;
  outline: 0 none
}

img {
  width: 100%;
  height: auto;
  object-fit: contain
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  scroll-behavior: auto
}

body {
  overflow-y: hidden;
  overflow-x: auto;
  background: #000;
}

#appTimer {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0
}

#app {
  position: relative;
  margin: 0 auto;
  width: 100%;
  min-width: 960px;
  min-height: 720px;
  height: min(calc(var(--vh)*100), 100vh);
  overflow: hidden;
  /*
  touch-action: pan-y;
  scroll-behavior: smooth;
  */
  opacity: 0;
  transition: opacity .25s ease-out
}

.init #app {
  opacity: 1
}

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

#app:before,
#app:after {
  content: "";
  display: block;
  position: fixed;
  pointer-events: none;
  z-index: 3;
  opacity: 1;
  transition: all .8s ease-out;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  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) 70%, rgba(0, 0, 0, 1) 100%)
}

#app:after {
  background: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 1) 100%)
}

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

#app.insub:before,
#app.insub:after {
  opacity: 0;
}


#app.update-detail-view:before,
#app.update-detail-view:after {
  opacity: 0;
}

.screen-out {
  font-size: 0;
  line-height: 0;
  width: 1px;
  height: 1px;
  left: -1px;
  top: -1px
}

.scene {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh)*100);
}

.fp-scroller {
  transition-duration: .25s !important
}


#header {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: auto;
  z-index: 10;
  width: 100%;
  height: .62rem;
  min-width: 960px;
  display: flex;
  align-items: stretch;
  background: rgba(0, 0, 0, 1);
  transition: top .25s ease-out
}



/* bg */
.scene-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  overflow: hidden
}

.fit-cover {
  position: absolute;
  left: 50%;
  top: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform: translate(-50%, -50%);
  min-width: 100vw;
  min-height: 100vh
}

.fit-cover video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mix-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.mix-layer img {
  object-fit: cover;
}

.mix-layer.screen {
  mix-blend-mode: screen;
}

.mix-layer.color {
  mix-blend-mode: color;
}

.mix-layer.overlay {
  mix-blend-mode: overlay;
}

/* gnb */
#gnb {
  position: fixed;
  left: 0;
  width: 1.8rem;
  top: 0;
  height: 100vh;
  height: calc(var(--vh)*100);
  display: flex;
  flex-direction: column;
  align-items: start;
  z-index: 5;
  pointer-events: none;
}

#gnb:before {
  content: "";
  display: block;
  flex: none;
  height: 2rem;
}

#gnb:after {
  content: "";
  display: block;
  flex: 1;
  min-height: 1.12rem;
}

#gnb a {
  pointer-events: fill
}

.side-banner {
  position: absolute;
  left: 0;
  width: 3.68rem;
  bottom: .62rem;
}

.side-banner>a {
  display: block;
  pointer-events: fill;
  width: 100%;
  box-shadow: .01rem .021rem .25rem rgba(0, 0, 0, .6);
}

.side-banner>p {
  color: #fafafa;
  font-size: .22rem;
  line-height: .28rem;
  letter-spacing: -.075em;
  padding-bottom: .1rem;
  font-weight: 400;
  width: 100%;
  text-align: center;
  text-shadow: 0 .01rem .1rem rgba(0, 0, 0, 1);
}

.side-banner .buttons {
  position: absolute;
  left: .14rem;
  width: 1.32rem;
  height: 1.23rem;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.side-banner .buttons:before,
.side-banner .buttons:after {
  flex: 1;
  content: "";
  display: block;
}

.side-banner .buttons .btn {
  flex: none;
  display: block;
  pointer-events: fill;
  width: 100%;
}

.side-banner .buttons .btn+.btn {
  margin-top: .07rem;
}

#navigation {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  align-items: center;
  display: flex;
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
  opacity: 1;
  pointer-events: auto;
  transition: all .25s ease-out
}

.detail-view #navigation {
  clip-path: polygon(50% 0, 50% 100%, 50% 100%, 50% 0);
  opacity: 0;
  pointer-events: none;
  transition-delay: .15s
}

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

#navigation>li {
  flex: 1;
  white-space: nowrap;
  position: relative;
}

#navigation li a {
  display: block;
  width: auto;
  position: relative;
  padding: 0 min(.6rem, 2vw)
}

#navigation a>span,
#navigation a>small,
#navigation a>strong {
  position: relative;
  display: inline-block;
  z-index: 1;
  font-weight: 600;
  font-size: .2rem;
  line-height: .36rem;
  padding: .13rem;
  letter-spacing: -.075em;
  color: #adadad;
}

#navigation a>small {
  font-size: .15rem;
  line-height: .18rem;
}

#navigation a strong {
  color: #c7b27a;
}

#navigation a.on small,
#navigation a:hover small,
#navigation a.on span,
#navigation a:hover span {
  color: #fff
}

#navigation a.on strong,
#navigation a:hover strong {
  color: #ffe39d
}

/* header ui */
.detail-page-ui {
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: all .25s ease-out;
}

.detail-view .detail-page-ui {
  opacity: 1;
  pointer-events: fill;
  z-index: 1;
  transition-delay: .15s;
}

.detail-page-ui.nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0, 50% 100%, 50% 100%, 50% 0);
  text-align: center;
}

.detail-page-ui.nav>button {
  font-family: 'Nanum Gothic';
  font-size: .26rem;
  font-weight: 400;
  line-height: .3rem;
  display: inline-block;
  vertical-align: top;
  padding: .16rem .82rem;
  letter-spacing: -.075em;
  color: #808080;
  position: relative;
}

.detail-page-ui.nav>button+button:before {
  content: "";
  display: block;
  left: 0;
  transform: translate(-50%, -50%) rotate(-45deg);
  position: absolute;
  top: 50%;
  width: .08rem;
  height: .08rem;
  box-sizing: border-box;
  border: .02rem solid #747474
}

.detail-view .detail-page-ui.nav {
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}

.detail-view .detail-page-ui.close {
  margin-right: .12rem;
  width: 1.1rem;
}

.detail-page-ui.nav>button:hover,
.detail-page-ui.nav>button.active {
  color: #fff
}

.detail-page-ui.close {
  flex: none;
  width: 0;
  padding: 0;
  position: relative;
}

.detail-page-ui.close:before {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: .01rem;
  height: .44rem;
  background: rgba(255, 255, 255, .2)
}

.detail-page-ui .close-btn {
  width: .64rem;
  height: .64rem;
  display: block;
  margin: 0 auto;
  position: relative;
}

.detail-page-ui .close-btn:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
  background: url(../img/ic-close-on.png) no-repeat center / contain;
  z-index: 1;
  opacity: 0;
  transition: opacity .25s ease-out
}

.detail-page-ui .close-btn:hover:after {
  opacity: 1;
}

.detail-page-ui .close-btn:active {
  transform: scale(.96);
  transition-duration: .15s;
}

#header h1 {
  flex: none;
  width: 1.6rem;
  text-align: center
}

#header .bi {
  display: block;
  width: .8rem;
  height: auto;
  margin: 0 auto;
  padding: .06rem;
  padding-bottom: .05rem
}

nav {
  flex: 1;
  text-align: center;
  position: relative
}


.links {
  flex: none;
  height: 100%;
  padding: 0;
  text-align: right;
  position: relative;
}

.links>button {
  display: inline-block;
  position: relative;
  width: .5rem;
  height: 100%;
  margin: 0;
  vertical-align: middle;
}

.links>button>span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: .54rem;
  height: auto;
  transform: translateX(-50%) translateY(-50%);
}

#header .btn[name="crossplay"] {
  display: block;
  flex: none;
  height: 100%;
  margin: 0;
  position: relative;
  margin-left: .14rem;
  width: 2.47rem;
  background: url(../img/download-btn.jpg) repeat-x center / auto 100%;
  opacity: 1;
  pointer-events: fill;
  overflow: hidden;
  transition: all .25s ease-out
}


#header .btn[name="crossplay"] span {
  width: 100%;
  text-align: center;
  white-space: nowrap;
  font-size: .3rem;
  line-height: .36rem;
  padding-bottom: .04rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.075em;
  text-shadow: -.01rem -.01rem .05rem rgba(0, 0, 0, .35), 0 .025rem .01rem rgba(0, 0, 0, .55);
  opacity: 1;
  overflow: hidden;
  transition: all .25s ease-out;
}

.detail-view #header .btn[name="crossplay"] {
  transition-delay: .15s;
  opacity: 0;
  pointer-events: none;
  width: 0
}

.detail-view #header .btn[name="crossplay"] span {
  transition-delay: .15s;
  opacity: 0;
  width: 0
}

.links>button .default {
  opacity: 1
}

.links>button .selected {
  opacity: 0
}

.links>button:hover .default,
.links>button.active .default {
  opacity: 0
}

.links>button:hover .selected,
.links>button.active .selected {
  opacity: 1
}

.btn[value="sound"] .txt {
  position: absolute;
  right: 100%;
  left: auto;
  margin-right: 0;
  width: 1.3rem;
  height: 100%;
  top: 0;
}

.btn[value="sound"] .txt:before {
  content: "SOUND OFF";
  display: block;
  position: absolute;
  font-size: .18rem;
  line-height: .24rem;
  letter-spacing: .1em;
  color: #ccb858;
  text-align: center;
  top: 55%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  height: auto;
  animation: sound-txt 3.6s 0s ease-in-out infinite
}

.btn[value="sound"].on .txt:before {
  content: "SOUND ON";
  animation: none
}

.btn[value="sound"] .icon {
  width: .3rem;
  height: .28rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: .02rem;
  overflow: hidden;
}

.btn[value="sound"] .icon:before {
  content: "";
  display: block;
  position: absolute;
  width: .01rem;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg) scale(2);
  background: #ccb858;
  box-shadow: 0 .01rem .01rem rgba(0, 0, 0, 1);
  opacity: 1;
}

.btn[value="sound"] .sound-bar {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: .02rem;
}

.btn[value="sound"] .sound-bar i {
  flex: 1;
  width: 100%;
  background: #ccb858;
  box-shadow: 0 .01rem .01rem rgba(0, 0, 0, 1);
  display: block;
}

.btn[value="sound"] .sound-bar.bar1 i.sq1,
.btn[value="sound"] .sound-bar.bar1 i.sq2,
.btn[value="sound"] .sound-bar.bar1 i.sq5,
.btn[value="sound"] .sound-bar.bar1 i.sq6,
.btn[value="sound"] .sound-bar.bar2 i.sq4,
.btn[value="sound"] .sound-bar.bar2 i.sq5,
.btn[value="sound"] .sound-bar.bar3 i.sq1,
.btn[value="sound"] .sound-bar.bar3 i.sq2,
.btn[value="sound"] .sound-bar.bar3 i.sq3,
.btn[value="sound"] .sound-bar.bar3 i.sq4,
.btn[value="sound"] .sound-bar.bar4 i.sq1,
.btn[value="sound"] .sound-bar.bar4 i.sq2 {
  opacity: 0
}

.btn[value="sound"].on .icon:before {
  opacity: 0
}

.btn[value="sound"].on .sound-bar i {
  animation-duration: 1.25s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}

.btn[value="sound"].on .sound-bar.bar2 i {
  animation-delay: 0s
}

.btn[value="sound"].on .sound-bar.bar4 i {
  animation-delay: .25s
}

.btn[value="sound"].on .sound-bar.bar1 i {
  animation-delay: .5s
}

.btn[value="sound"].on .sound-bar.bar3 i {
  animation-delay: .75s
}

.btn[value="sound"] .sound-bar i.sq1 {
  animation-name: sound-bar01;
}

.btn[value="sound"] .sound-bar i.sq2 {
  animation-name: sound-bar02;
}

.btn[value="sound"] .sound-bar i.sq3 {
  animation-name: sound-bar03;
}

.btn[value="sound"] .sound-bar i.sq4 {
  animation-name: sound-bar04;
}

.btn[value="sound"] .sound-bar i.sq5 {
  animation-name: sound-bar05;
}

.btn[value="sound"] .sound-bar i.sq6 {
  animation-name: sound-bar06;
}


.btn[value="sound"]:hover .icon {
  transform: translate(-50%, -50%) scale(1.12)
}


@keyframes sound-bar01 {

  0%,
  79% {
    opacity: 0
  }

  80%,
  100% {
    opacity: 1
  }
}

@keyframes sound-bar02 {

  0%,
  63% {
    opacity: 0
  }

  64%,
  100% {
    opacity: 1
  }
}

@keyframes sound-bar03 {

  0%,
  47% {
    opacity: 0
  }

  48%,
  100% {
    opacity: 1
  }
}

@keyframes sound-bar04 {

  0%,
  31% {
    opacity: 0
  }

  32%,
  100% {
    opacity: 1
  }
}

@keyframes sound-bar05 {

  0%,
  15% {
    opacity: 0
  }

  16%,
  100% {
    opacity: 1
  }
}

@keyframes sound-bar06 {

  0%,
  100% {
    opacity: 1
  }
}


@keyframes sound-txt {

  95%,
  10% {
    opacity: 1
  }

  50%,
  55% {
    opacity: 0.3
  }

}

.share-pop {
  position: absolute;
  right: 0;
  width: 2.34rem;
  box-sizing: border-box;
  top: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  padding-top: .62rem;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: all .25s ease-out;
}

.share-pop:before {
  content: "";
  display: block;
  position: absolute;
  width: .5rem;
  top: 0;
  height: .62rem;
  right: 0;
  background: linear-gradient(to bottom, rgba(34, 35, 41, .8) 0%, rgba(42, 43, 50, .8) 25%);
  box-sizing: border-box;
  border: .015rem solid rgba(89, 91, 99, .8);
  border-bottom: 0 none;
}

.share-pop:after {
  content: "";
  display: block;
  position: absolute;
  height: .015rem;
  background: rgba(89, 91, 99, .8);
  left: 0;
  top: .62rem;
  width: calc(100% - .5rem)
}

.share-pop .btn,
.share-pop input {
  pointer-events: fill;
}

.share-pop.visible {
  opacity: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  overflow: visible;
}

.content-box {
  padding: .22rem .11rem;
  width: 2.34rem;
  position: relative;
  box-sizing: border-box;
  height: 1.7rem;
  background: linear-gradient(to bottom, rgba(42, 43, 50, .8) 50%, rgba(42, 43, 50, 0) 100%);
}

.content-box:before,
.content-box:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  height: 100%;
  width: .015rem;
  background: linear-gradient(to bottom, rgba(89, 91, 99, .8) 50%, rgba(89, 91, 99, 0) 100%);
}

.content-box:before {
  left: 0;
}

.content-box:after {
  right: 0;
}

.svc-link {
  display: flex;
  height: .4rem;
  margin-bottom: .2rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: .18rem
}

.svc-link>button {
  flex: none;
  width: .4rem;
  position: relative;
}

.svc-link>button:before {
  content: "";
  display: block;
  position: absolute;
  left: -.1rem;
  opacity: 0;
  width: .01rem;
  background: rgba(82, 89, 103, .35);
  height: .2rem;
  margin-top: -.1rem;
  top: 50%;
}

.svc-link>button+button:before {
  opacity: 1
}

.copy-url {
  display: flex;
  height: .34rem;
  width: 100%;
  box-sizing: border-box;
  border: .01rem solid rgba(82, 89, 103, .4);
  align-items: stretch;
}

.copy-url>input {
  flex: 1;
  background: #101116;
  outline: none;
  border: 0 none;
  color: #fff;
  font-size: .13rem;
  line-height: .18rem;
  padding: .08rem .04rem;
  font-weight: 400;
  overflow: hidden;
}

.copy-url>button {
  flex: none;
  background: rgba(82, 89, 103, .4);
  text-align: center;
  width: .66rem;
  font-size: .19rem;
  line-height: .24rem;
  padding: .05rem 0;
  color: #fff;
  font-weight: 400;
}


/* content */
.scene-content {
  width: 12.8rem;
  z-index: 5;
  margin: 0 auto;
  position: relative;
  height: auto;
  min-height: 100vh;
  min-height: calc(var(--vh)*100);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.scene-content:before,
.scene-content:after {
  content: "";
  display: block;
  flex: 1
}

.active .scene-content {
  pointer-events: auto;
}

.fade-up {
  position: relative;
  height: auto;
  margin: 0 auto;
}

.fade-up>* {
  opacity: 0;
  transform: translateY(.25rem)
}

.init .scene.active .fade-up>* {
  opacity: 1;
  transform: translateY(0);
  transition: all 0s ease-out;
}


.btn.action-btn {
  width: 3.12rem;
  height: auto;
  position: relative;
  margin: 0 auto;
}

.btn.action-btn:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: url(../img/action-btn-light.png) no-repeat center top / 100% auto;
  opacity: 0;
  transition: opacity .25s ease-out
}

.btn.action-btn:hover:before {
  opacity: 1
}

.g-txt {
  position: relative;
  display: inline-block;
  z-index: 1;
  font-weight: 700;
}

.g-txt em {
  font-weight: inherit;
  letter-spacing: inherit;
  text-align: center;
  background: linear-gradient(-181deg, #ffffff 25%, #d2d5e3 55%, #7e828e 80%, #9498a8 95%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-block;
  position: relative;
  z-index: 1;
  padding-left: .02rem;
  padding-right: .02rem;
}

.g-txt:before,
.g-txt:after {
  content: attr(data-text);
  display: block;
  z-index: -1;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  font-weight: inherit;
  letter-spacing: inherit;
  text-align: center;
  white-space: nowrap;
  color: #000;
}

.g-txt:before {
  top: 0;
  filter: blur(.06rem)
}

.g-txt:after {
  top: .01rem;
  left: .01rem;
  filter: blur(.01rem)
}

.g-txt.on-btn {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-52%);
  font-size: .3rem;
  line-height: .4rem;
  letter-spacing: -.075em;
}

.g-txt.on-btn:before {
  top: .03rem;
  filter: blur(.08rem)
}

.g-txt.on-btn em {
  background: linear-gradient(-181deg, #fff 0%, #fafafa 50%, #888991 54%, #b8b7c8 66%, #a9a7b3 85%);
  -webkit-background-clip: text;
  background-clip: text;
}

.confirm-btn {
  position: relative;
  background-position: center;
  transition: tranform .15s ease-out;
  transform: scale(1)
}

.confirm-btn:active {
  transform: scale(.98)
}

.confirm-btn .g-txt em {
  background: url(../img/confirm-btn-txt.jpg) repeat-x center / auto 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.confirm-btn .g-txt:before {
  opacity: .5;
  filter: blur(.06rem)
}

.confirm-btn .g-txt:after {
  opacity: .7;
  filter: blur(.04rem)
}

.confirm-btn:before,
.confirm-btn:after {
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  top: 0;
  height: 100%;
}

.confirm-btn,
.confirm-btn:before,
.confirm-btn:after {
  background-image: url(../img/confirm-btn.jpg);
  background-size: auto 100%;
  background-repeat: repeat-x;
}

.confirm-btn:before {
  left: 0;
  background-position: left center;
}

.confirm-btn:after {
  right: 0;
  background-position: right center;
}

.scene-title {
  display: block;
  text-align: center;
  position: relative;
  width: 100%;
  padding-bottom: .2rem;
  margin: 0 auto;
}

.scene-title:before {
  content: "";
  display: block;
  height: .39rem;
  width: 100%;
  background-repeat: no-repeat;
  bottom: -.04rem;
  position: absolute;
  left: 0;
  background-position: center;
  background-size: auto 100%;
}

.scene-title .g-txt {
  font-size: .72rem;
  line-height: .9rem;
  margin: .06rem 0;
}

.scene-title .g-txt:before {
  top: .03rem;
  filter: blur(.12rem)
}

.event-no {
  display: block;
  text-align: center;
  width: 3.93rem;
  color: #ceba99;
  letter-spacing: .05em;
  font-size: .24rem;
  line-height: .32rem;
  padding: .04rem 0;
  font-weight: 700;
  text-shadow: 0 .01rem .02rem rgba(0, 0, 0, 1);
  background: url(../img/event-no-bg.png) no-repeat center / auto 100%;
}

.sub-title {
  display: block;
  text-align: center;
}

.sub-title .g-txt {
  font-size: .26rem;
  line-height: .32rem;
  font-weight: 400;
}

.sub-title .g-txt em {
  color: #fff;
  background: none;
}

.sub-title .g-txt:before {
  mix-blend-mode: multiply;
  filter: blur(.03rem);
}

.sub-title .g-txt:after {
  mix-blend-mode: multiply;
  filter: blur(.01rem);
  opacity: 1
}

.sub-title .g-txt strong {
  color: #ffebca
}

.sub-title .g-txt strong.acc {
  color: #ccb96a
}

.ng,
.ng * {
  font-family: 'Nanum Gothic';
}

.event-period {
  display: block;
  text-align: center;
  width: 6rem;
  letter-spacing: -.025em;
  font-size: .18rem;
  line-height: .24rem;
  padding: .04rem 0;
  font-weight: 300;
  text-shadow: 0 .01rem .02rem rgba(0, 0, 0, 1);
  margin: .08rem auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}

.scene .scene-title:before {
  opacity: 0;
  transform: translateY(15%);
  transition: all .35s ease-out
}

.scene-title,
.event-no,
.sub-title,
.event-period {
  opacity: 0;
  transform: translateY(.25rem);
  transition: all .55s ease-out
}

.scene.active .scene-title:before,
.scene.active .scene-title,
.scene.active .event-no,
.scene.active .sub-title,
.scene.active .event-period {
  opacity: 1;
  transform: translateY(0);
}

.scene.active .event-no {
  transition-delay: .15s
}

.scene.active .scene-title {
  transition-delay: .25s
}

.scene.active .scene-title:before {
  transition-delay: .3s
}

.scene.active .sub-title {
  transition-delay: .35s
}

.scene.active .event-period {
  transition-delay: .4s
}


/* form */


.check-frm {
  display: block;
  flex: none;
  position: relative;
  overflow: hidden;
}

.check-frm>input {
  position: absolute;
  right: 100%;
  height: 1px;
  width: 1px;
  padding: 0;
  margin: 0
}

.check-frm>label {
  display: inline-block;
  position: relative;
}

.check-frm>label:before,
.check-frm>label:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
}

.check-frm>label:before {
  border: .01rem solid #bca883;
  background: rgba(0, 0, 0, .5);
}

.check-frm>label:after {
  opacity: 0;
  background: url(../img/frm-check.png) no-repeat center / contain;
}

.check-frm>input:checked+label:after {
  opacity: 1;
}

.frm-block {
  display: flex;
  width: 100%;
  align-items: stretch;
  margin-top: .1rem;
  padding: .08rem 0;
  height: .37rem;
  overflow: hidden;
  position: relative;
}

.frm-block:before {
  content: "";
  display: block;
  position: absolute;
  bottom: .01rem;
  left: 0;
  width: 100%;
  height: .025rem;
  background: url(../img/frm-line.jpg) repeat-x left bottom / auto .02rem;
}

.frm-block+.frm-block {
  margin-top: 0;
}

.frm-block+.frm-block:before {
  background-position: right bottom;
}

.frm-block>* {
  flex: none
}

.frm-block>input {
  flex: 1;
  letter-spacing: -.075em;
  font-size: .18rem;
  line-height: .21rem;
  font-weight: 700;
  border: 0 none;
  background: transparent;
  outline: none;
  color: #fff;
  width: auto;
  display: block;
  overflow: hidden;
}

.frm-block>input::placeholder {
  color: #fff;
  opacity: 1;
  font-weight: 400;
}

.frm-block input:valid,
.frm-block input[value] {
  line-height: .37rem;
  font-size: .32rem;
}

.frm-block.disabled {
  pointer-events: none !important;
}

.frm-block.disabled * {
  opacity: .7;
}

.frm-block .prefix {
  flex: none;
  text-align: left;
  width: .8rem;
}

.frm-block .auth-btn {
  position: absolute;
  right: 0;
  top: .08rem
}

.auth-btn {
  width: 1.4rem;
  height: .37rem;
  text-align: center;
  background: url(../img/frm-auth-btn.jpg) no-repeat center / auto 100%
}

.auth-btn .g-txt em,
.auth-btn .g-txt:after {
  background: linear-gradient(to bottom, #fff 0%, #d6cdb9 55%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.auth-btn .g-txt {
  font-size: .16rem;
  line-height: .21rem;
  margin: .09rem 0 .07rem;
  font-weight: 700;
  letter-spacing: -.075em;
}

.auth-btn .g-txt:after {
  top: 0;
  left: 0;
  filter: none;
  opacity: 1;
}

.auth-btn .g-txt:before {
  color: #4c351b;
  top: 0;
  filter: blur(.15rem)
}

.frm-check-list {
  padding: .14rem 0;
}

.frm-check-list .check-frm {
  line-height: .21rem;
  padding: .02rem 0;
}

.frm-check-list .check-frm label {
  line-height: .21rem;
  font-size: .16rem;
  padding: 0 0 0 .32rem;
  letter-spacing: -.05em;
  color: #b3b3b3;
  vertical-align: middle;
}

.frm-check-list .check-frm label:before,
.frm-check-list .check-frm label:after {
  width: .18rem;
  height: .18rem;
}

.frm-check-list .more-btn {
  width: .8rem;
  margin-left: .1rem;
  vertical-align: middle;
}


/* etc */

.main-banner {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  bottom: 0;
  height: min(calc(var(--vh)*100), 100vh);
  pointer-events: none;
  z-index: 5;
}

.main-banner>div {
  position: absolute;
  height: auto;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: all .35s 0s ease-out;
}

.main-banner .top {
  transform: translateX(50%);
  top: .92rem;
  right: .43rem;
  width: 2.44rem;
}

.main-banner .event-banner {
  transform: translateX(-50%);
  top: .96rem;
  left: .44rem;
  width: 2.42rem;
}

.main-banner.top-banner-view .top,
.main-banner.evt-banner-view .event-banner {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.main-banner .btn {
  display: block;
  padding: 0;
  margin: 0;
  width: 100%;
  height: auto;
  position: static;
  cursor: pointer;
}

.main-banner .btn+.btn {
  margin-top: .05rem;
}

.main-banner .btn>img {
  transform: scale(1);
  transition: transform .05s
}

.main-banner .btn:active>img {
  transform: scale(.97)
}


.scroll-ic {
  position: fixed;
  cursor: pointer;
  z-index: 5;
  left: 50%;
  width: .62rem;
  height: .62rem;
  bottom: .18rem;
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  transition: all .35s ease-out
}

.scroll-ic.hidden {
  transform: translateX(-50%) translateY(15%);
  opacity: 0;
  pointer-events: none;
}

.scroll-ic:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../img/scroll-down-ic.png) no-repeat center / contain;
  animation: scroll-icon-anim 1.5s ease-in-out infinite
}

.scroll-ic>a {
  position: absolute;
  bottom: 0;
  padding-bottom:.56rem;
  left: 50%;
  width: 1.6rem;
  height: auto;
  text-align: center;
  transform: translateX(-50%);
  pointer-events:none;
  opacity: 0;
  transition: opacity .25s
}

.scroll-ic>a.visible {
  opacity: 1;
  pointer-events:fill;
}

.scroll-ic>a .g-txt {
  display: inline-block;
  white-space: nowrap;
  letter-spacing: -.075em;
  font-weight: 400;
  transform: rotateX(-90deg);
  transition: transform .25s
}

.scroll-ic>a.visible .g-txt{
  transform: rotateX(0deg);
}

.scroll-ic>a span.g-txt {
  font-size: .18rem;
  line-height: .24rem;
}

.scroll-ic>a small.g-txt {
  font-size: .11rem;
  line-height: .18rem;
}

.scroll-ic>a[data-no="0"] span.g-txt {
  font-size: .13rem;
  line-height: .21rem;
  letter-spacing: .05em
}

.scroll-ic .g-txt em {
  color: #ffdbdb;
  text-shadow: 0 .01rem .01rem rgba(0, 0, 0, .1);
  background: none
}

.scroll-ic .g-txt:before,
.scroll-ic .g-txt:after {
  color: #ff0000
}

.scroll-ic .g-txt:before {
  filter: blur(.1rem)
}

.scroll-ic .g-txt:after {
  filter: blur(.03rem)
}

@keyframes scroll-icon-anim {

  0%,
  100% {
    transform: translateY(-.02rem)
  }

  50% {
    transform: translateY(.04rem)
  }
}



.store-buttons {
  display: flex;
  height: .6rem;
  align-items: stretch;
  gap: 0;
  width: 100%;
  justify-content: center;
}

.store-buttons:before,
.store-buttons:after {
  content: "";
  display: block;
  flex: 1
}

.store-buttons button {
  flex: none;
  width: auto;
  height: 100%
}

.store-buttons button>img {
  width: auto;
  height: 100%;
}


.os-select>span {
  display: inline-block;
  vertical-align: top;
}

.os-select>span+span {
  margin-left: .24rem
}

.os-select i {
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: .28rem;
  padding: 0 .12rem 0 .22rem;
}

.os-select i:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  background: #000;
  border-radius: 100%;
  filter: blur(.1rem);
  width: .28rem;
  height: .28rem;
  left: .22rem;
  top: 0;
  mix-blend-mode: multiply;
}

.os-select i img {
  position: relative;
  z-index: 1;
}

.os-select label {
  font-size: .26rem;
  line-height: .32rem;
  font-weight: 700;
  padding-left: .24rem;
}

.os-select .check-frm label:before,
.os-select .check-frm label:after {
  width: .24rem;
  height: .24rem
}


.class-card {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

.class-card .visual {
  display: block;
  position: relative;
  width: 100%;
}

.class-card .visual:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  left: .04rem;
  top: .04rem;
  bottom: .04rem;
  right: .04rem;
  border: .01rem solid #6d4041;
  opacity: .6
}

.class-card .icon,
.class-card .g-txt {
  position: absolute;
}

.class-card .icon {
  width: 1.02rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform .35s ease-out;
}

.class-card .g-txt {
  left: 50%;
  transform: translateX(-50%);
  top: 65.8%;
  font-weight: 700;
  font-size: .23rem;
  line-height: .28rem;
  letter-spacing: .025em;
  text-shadow: none;
  text-transform: uppercase;
  transition: all .35s ease-out;
}

.class-card[data-name="archer"] .g-txt {
  letter-spacing: .1em
}

.class-card .g-txt em {
  color: #6d4041;
  background: none;
}

.class-card .g-txt:before,
.class-card .g-txt:after {
  display: none;
}


.class-card .off,
.class-card .on {
  width: 100%;
  height: auto;
}

.class-card .on {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity .35s ease-out
}

input:checked+.class-card .on,
.class-card:hover .on {
  opacity: 1
}

input:checked+.class-card .icon,
.class-card:hover .icon,
.layer .class-card .icon {
  transform: translate(-50%, 0);
}

input:checked+.class-card .g-txt,
.class-card:hover .g-txt,
.layer .class-card .g-txt {
  top: 83.4%
}

input:checked+.class-card .g-txt em,
.class-card:hover .g-txt em,
.layer .class-card .g-txt em {
  background: linear-gradient(to bottom, #f4db89 45%, #c29a56 55%, #c4a971 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}


input:checked+.class-card .g-txt:before,
.class-card:hover .g-txt:before,
.layer .class-card .g-txt:before {
  display: block;
  mix-blend-mode: darken;
  opacity: 1;
  top: 0;
  filter: blur(.05rem);
}

input:checked+.class-card .g-txt:after,
.class-card:hover .g-txt:after,
.layer .class-card .g-txt:after {
  display: block;
  opacity: 1;
  top: 0;
  left: 0;
  z-index: 1;
  filter: blur(.01rem);
  mix-blend-mode: soft-light;
  background: linear-gradient(to bottom, #a59383 0%, #463e33 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.class-grid {
  display: flex;
  width: 8.28rem;
  margin: 0 auto;
  align-items: stretch;
  gap: .08rem;
  padding-top: .08rem;
  height: 3.48rem
}

.class-grid .grid-item {
  flex: 1;
}

.class-grid .class-btn {
  height: .4rem;
  width: 100%;
  display: block;
  text-align: center;
  position: relative;
  padding-right: .4rem;
  box-sizing: border-box;
  background: #2d0d0e
}

.class-grid .class-btn .txt {
  display: block;
  text-align: center;
  font-weight: 700;
  color: #a26768;
  letter-spacing: -.075em;
  font-size: .16rem;
  line-height: .24rem;
  padding: .08rem 0;
}

.class-grid .class-btn .ic {
  position: absolute;
  right: 0;
  top: 0;
  width: .4rem;
  height: .4rem;
  background: #4a1819
}

.class-grid .class-btn .ic:before,
.class-grid .class-btn .ic:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  background: #9a6061;
  height: .02rem;
  width: .11rem;
  transition: transform .25s ease-out;
}

.class-grid .class-btn .ic:before {
  transform: translate(-50%, -50%) rotate(0deg);
}

.class-grid .class-btn .ic:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.class-grid .class-btn:hover .ic:before {
  transform: translate(-50%, -50%) rotate(-90deg);
}

.class-grid .class-btn:hover .ic:after {
  transform: translate(-50%, -50%) rotate(0deg);
}


/* Main */
.scene[data-name="Main"] {
  overflow: visible
}

.scene[data-name="Main"] .scene-bg {
  background-image: url(../img/main-bg-v14.jpg);
}

.scene[data-name="Main"] .scene-bg:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .1);
  pointer-events: none;
}

.scene[data-name="Main"] .slogan {
  position: relative;
  margin: 0 auto;
  width: 7.3rem;
  height: 2.95rem;
  padding-left: .34rem;
  padding-top: .48rem;
}


.scene[data-name="Main"] .fade-up {
  height: auto;
  margin-top: 1.5rem;
}

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

.scene[data-name="Main"] .main-title {
  display: block;
  text-align: center;
  width: 7.56rem;
  position: relative;
  margin: 0 auto -.12rem;
}

.scene[data-name="Main"] .main-title .light {
  position: absolute;
  width: .44rem;
  height: .44rem;
  mix-blend-mode: lighten;
  opacity: .7;
}

.scene[data-name="Main"] .main-title .light:before,
.scene[data-name="Main"] .main-title .light:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../img/update-title-light.png) no-repeat center / contain;
}

.scene[data-name="Main"] .main-title .light:before {
  transform: scale(1.8);
  mix-blend-mode: overlay;
}

.scene[data-name="Main"] .main-title .light:after {
  mix-blend-mode: lighten;
  filter: grayscale(1.2);
}


.scene[data-name="Main"] .main-title.lv1 {
  width: 7.56rem;
  margin-top: .1rem;
}

.scene[data-name="Main"] .main-title.lv1 .light.l1 {
  left: .85rem;
  top: .94rem;
}

.scene[data-name="Main"] .main-title.lv1 .light.l2 {
  left: 1.75rem;
  top: .94rem
}

.scene[data-name="Main"] .main-title.lv1 .light.l3 {
  left: 3.98rem;
  top: .94rem
}

.scene[data-name="Main"] .main-title.lv1+.register-btn+.store-buttons {
  margin-top: .6rem
}


.scene[data-name="Main"] .main-title.lv2 {
  width: 9.25rem;
  margin-top: .08rem;
}
.scene[data-name="Main"] .main-title.lv2 .light.l1 {
  left: .85rem;
  top: .92rem;
}

.scene[data-name="Main"] .main-title.lv2 .light.l2 {
  left: 2.39rem;
  top: .94rem
}

.scene[data-name="Main"] .main-title.lv2 .light.l3 {
  left: 4.5rem;
  top: .96rem
}
.scene[data-name="Main"] .main-title.lv2+.store-buttons {
  margin-top: .54rem
}


.scene[data-name="Main"] .register-btn {
  display: block;
  text-align: center;
  width: 3.39rem;
  margin: 0 auto;
  position: relative;
}

.scene[data-name="Main"] .register-btn:before {
  content: "";
  display: block;
  position: absolute;
  top: .1rem;
  height: .32rem;
  width: 2.1rem;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.4);
  mix-blend-mode: soft-light;
  background: url(../img/btn-register-v14-light.png) no-repeat center / contain;
}

.scene[data-name="Main"] .register-btn.no-light:before {
  display: none
}

.scene[data-name="Main"] .store-buttons {
  margin: .44rem auto 0;
  gap: .16rem;
  height: .68rem;
}

.init .scene[data-name="Main"] .fade-up>* {
  opacity: 0;
  transform: translateY(.25rem);
  transition: all .75s ease-out;
}

.init .scene[data-name="Main"].active .fade-up>* {
  opacity: 1;
  transform: translateY(0);
}

.init .scene[data-name="Main"].active .logo {
  transition-delay: .5s;
  transition-duration: .4s;
}

.init .scene[data-name="Main"].active .main-title {
  transition-delay: .55s;
  transition-duration: .4s;
}

.init .scene[data-name="Main"].active .register-btn {
  transition-delay: .65s;
  transition-duration: .35s;
}

.init .scene[data-name="Main"].active .store-buttons {
  transition-delay: .7s;
  transition-duration: .35s;
}


/* Download */
.scene[data-name="Download"] {
  background: url(../img/download-bg.jpg) no-repeat center / cover;
  background-attachment: fixed;
}

.scene[data-name="Download"]:after {
  content: "";
  position: absolute;
  opacity: 0;
  transition: opacity .15s ease-out;
  pointer-events: none;
  z-index: 5;
  display: block;
  bottom: 0;
  height: 20vh;
  width: 100%;
  left: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0) 100%)
}

.scene[data-name="Download"].shade:after {
  opacity: 1;
}

.scene[data-name="Download"] .scene-content {
  padding: 2.04rem 0 1.82rem;
  box-sizing: border-box;
}

.scene[data-name="Download"] .scene-title {
  padding: 0
}

.scene[data-name="Download"] .scene-title .g-txt {
  font-size: .62rem;
  line-height: .64rem;
  padding: .04rem 0;
  letter-spacing: -.075em
}

.scene[data-name="Download"] .scene-title .g-txt em {
  background: url(../img/download-title-bg.jpg) repeat-x 0 0 / auto 100%;
  color: rgba(255, 255, 255, .25);
  -webkit-background-clip: text;
  background-clip: text;
}

.scene[data-name="Download"] .sub-title .g-txt {
  font-size: .35rem;
  line-height: .42rem;
  letter-spacing: -.075em
}

.scene[data-name="Download"] .g-txt:after {
  filter: blur(.05rem);
  mix-blend-mode: color-dodge;
  mix-blend-mode: plus-lighter;
}

.scene[data-name="Download"] .g-txt:before {
  filter: blur(.15rem);
  background: rgba(0, 0, 0, .7);
}

.scene[data-name="Download"] .store-buttons {
  padding: .3rem 0 .52rem;
  height: .65rem;
  gap: .05rem;
}

.scene[data-name="Download"] .store-buttons,
.scene[data-name="Download"] .spec-details {
  opacity: 0;
  transform: translateY(.25rem);
  transition: all .6s ease-out;
}

.init .scene[data-name="Download"].active .store-buttons,
.init .scene[data-name="Download"].active .spec-details {
  opacity: 1;
  transform: translateY(0);
}

.init .scene[data-name="Download"].active .store-buttons {
  transition-delay: .4s;
}

.init .scene[data-name="Download"].active .spec-details {
  transition-delay: .5s;
}

.init .scene[data-name="Download"].active .spec-details+.spec-details {
  transition-delay: .55s;
}

/* Newserver */
.scene[data-name="Newserver"] .scene-bg {
  background-image: url(../img/newserver-bg.jpg)
}

.scene[data-name="Newserver"] .scene-content {
  left: 1.68rem;
}

.scene[data-name="Newserver"] .visual {
  position: absolute;
  width: 8.72rem;
  top: 0;
  height: 100%;
  left: 23.3%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.scene[data-name="Newserver"] .visual img {
  display: block;
  width: 100%;
  height: auto;
  flex: none;
}

.scene[data-name="Newserver"] .visual:before {
  content: "";
  display: block;
  flex: 1;
}

.scene[data-name="Newserver"] .visual:before {
  min-height: .36rem
}

.scene[data-name="Newserver"] .scene-title {
  padding-bottom: .36rem
}

.scene[data-name="Newserver"] .scene-title:before {
  background-image: url(../img/update-title-line.png);
}

.scene[data-name="Newserver"] .scene-title .g-txt {
  font-size: .65rem;
  line-height: .72rem;
  display: block;
  margin: 0;
  letter-spacing: -.075em
}

.scene[data-name="Newserver"] .scene-title .g-txt:before {
  filter: blur(.08rem);
}

.scene[data-name="Newserver"] .scene-title .g-txt:after {
  filter: blur(.04rem);
}

.scene[data-name="Newserver"] .scene-title .g-txt strong {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 7%, rgba(235, 200, 131, 1) 40%, rgba(202, 172, 118, 1) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.scene[data-name="Newserver"] .sub-title {
  font-size: .22rem;
  line-height: .31rem;
  padding-bottom: .09rem;
  color: #d3d3d3;
  letter-spacing: -.065em;
  text-shadow: 0 .01rem .07rem rgba(0, 0, 0, .7), 0 .01rem .04rem rgba(0, 0, 0, 1);
}

.scene[data-name="Newserver"] .event-period {
  background-image: url(../img/event-period-bg.png);
  width: 100%;
  height: .32rem;
  background-size: auto 100%;
  color: #fff;
  font-size: .22rem;
  line-height: .32rem;
  letter-spacing: -.025em
}

.new-server-rewards {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  gap: .1rem;
  margin: .6rem auto 0;
}

.new-server-rewards>.tit {
  position: absolute;
  left: 50%;
  top: -.48rem;
  width: 5.12rem;
  padding: .23rem 0;
  text-align: center;
  transform: translateX(-50%);
  background: url(../img/newserver-reward-tit.png) no-repeat center / contain
}

.new-server-rewards>.tit .g-txt {
  font-size: .33rem;
  letter-spacing: -.055em;
  line-height: .4rem;
}

.new-server-rewards>.tit .g-txt em {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 5%, rgba(223, 224, 208, 1) 50%, rgba(195, 163, 116, 1) 75%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.new-server-rewards:before,
.new-server-rewards:after {
  flex: 1;
  content: "";
  display: block;
}

.new-server-rewards>.box {
  flex: none;
  width: 3.86rem
}

.new-server-rewards+.confirm-btn {
  margin-top: .2rem;
  width: 4rem;
  height: .65rem;
  box-sizing: border-box;
  padding-bottom: .04rem
}

.new-server-rewards+.confirm-btn .g-txt {
  font-size: .3rem;
  line-height: .37rem;
  letter-spacing: -.075em;
}

.new-server-rewards+.confirm-btn .g-txt em {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 5%, rgba(223, 224, 208, 1) 50%, rgba(195, 163, 116, 1) 75%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}


.scene[data-name="Newserver"] .visual {
  opacity: 0;
  transform: translateX(-50%) translateY(10%);
  transition: all .75s ease-out
}

.scene[data-name="Newserver"] .new-server-rewards {
  opacity: 0;
  transform: translateY(.2rem);
  transition: all .55s ease-out
}

.scene[data-name="Newserver"] .confirm-btn {
  opacity: 0;
  transform: translateY(.25rem);
  transition: all .55s ease-out
}


.init .scene[data-name="Newserver"].active .visual {
  opacity: 1;
  transform: translateX(-50%);
  transition-delay: .35s
}

.init .scene[data-name="Newserver"].active .scene-title {
  transition-delay: .5s;
}

.init .scene[data-name="Newserver"].active .sub-title {
  transition-delay: .55s;
}

.init .scene[data-name="Newserver"].active .event-period {
  transition-delay: .6s;
}

.init .scene[data-name="Newserver"].active .new-server-rewards {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .7s
}

.init .scene[data-name="Newserver"].active .confirm-btn {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .75s
}


/* Update */
.scene[data-name="Update"] .scene-bg {
  background-image: url(../img/update-v2-bg.jpg)
}

.scene[data-name="Update"] .visual {
  position: absolute;
  width: 7.26rem;
  top: 0;
  height: 100%;
  left: 22.5%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.scene[data-name="Update"] .visual img {
  display: block;
  width: 100%;
  height: auto;
  flex: none;
}

.scene[data-name="Update"] .visual:before,
.scene[data-name="Update"] .visual:after {
  content: "";
  display: block
}

.scene[data-name="Update"] .visual:before {
  min-height: .85rem;
  flex: 5;
}

.scene[data-name="Update"] .visual:after {
  flex: 1;
}

.scene[data-name="Update"] .scene-content {
  width: 10rem;
  left: 1.76rem
}

.scene[data-name="Update"] .scene-title {
  font-size: .84rem;
  line-height: 1.12rem;
  letter-spacing: -.075em;
}

.scene[data-name="Update"] .scene-title:before {
  background-image: url(../img/update-title-line.png)
}

.scene[data-name="Update"] .sub-title .g-txt {
  font-size: .34rem;
  line-height: .52rem;
  letter-spacing: -.05em;
}

.scene[data-name="Update"] .sub-title .g-txt em,
.scene[data-name="Update"] .g-txt strong {
  color: transparent;
  background: linear-gradient(to bottom, #f6eddb 12%, #f9edbb 12%, #f8de91 52%, #e5b972 52%, #deb26d 93%, #b8a07a 93%);
  -webkit-background-clip: text;
  background-clip: text;
}

.update-frame-wall {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: start;
  width: 12.72rem;
  margin: .24rem auto;
}

.update-frame-wall .frame-btn .frame-name {
  position: absolute;
  top: .75rem;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
}

.update-frame-wall {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  gap: .2rem;
  margin: .52rem auto 0;
}

.update-frame-wall .frame-btn .frame-name {
  position: absolute;
  top: .7rem;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
}

.update-frame-wall .frame-btn .frame-name .g-txt {
  font-size: .32rem;
  line-height: .4rem;
  letter-spacing: -.075em
}

.update-frame-wall .frame-name .light {
  position: absolute;
  width: .5rem;
  height: .5rem;
  opacity: 0;
  mix-blend-mode: screen;
}

.update-frame-wall .frame-btn:hover .frame-name .light {
  opacity: 1;
}

.update-frame-wall .frame-name .light:before,
.update-frame-wall .frame-name .light:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../img/update-title-light.png) no-repeat center / contain;
}

.update-frame-wall .frame-name .light:before {
  transform: scale(2);
  mix-blend-mode: multiply;
  opacity: .35;
}

.update-frame-wall .frame-name .light:after {
  mix-blend-mode: lighten;
  filter: grayscale(1.2);
  opacity: .6;
}

.update-frame-wall .frame-btn[value="warlock"]:hover .pic {
  box-shadow: -.02rem -.02rem .07rem rgba(11, 32, 72, .65), .025rem .025rem .07rem rgba(11, 32, 72, .65);
}

.update-frame-wall .frame-btn[value="warlock"] .light.l1 {
  left: .24rem;
  top: -.145rem;
}

.update-frame-wall .frame-btn[value="warlock"] .light.l2 {
  left: 1.6rem;
  top: -.15rem;
}

.update-frame-wall .frame-btn[value="crossworld"]:hover .pic {
  box-shadow: -.02rem -.02rem .07rem rgba(14, 54, 67, .65), .025rem .025rem .07rem rgba(14, 54, 67, .25);
}

.update-frame-wall .frame-btn[value="crossworld"] .light {
  left: .4rem;
  top: -.135rem;
}

.update-frame-wall .frame-btn {
  position: relative;
  width: 4.14rem;
  flex: none;
  box-shadow: 0 .04rem .2rem rgba(0, 0, 0, .6), 0 .04rem .1rem rgba(0, 0, 0, .6);
}

.update-frame-wall .frame-btn .pic {
  position: absolute;
  width: 3.52rem;
  height: 4rem;
  left: 50%;
  top: 50%;
  overflow: visible;
  transform: translate(-50%, -50%);
}

.update-frame-wall .frame-btn .pic img {
  left: 0;
  top: 0;
  transform: none;
  width: 100%;
  height: auto;
  transition: opacity .1s linear
}

.update-frame-wall .frame-btn .on {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.update-frame-wall .frame-btn .off {
  opacity: 1;
}

.update-frame-wall .frame-btn:hover .on {
  opacity: 1;
}

.update-frame-wall .frame-btn:hover .off {
  opacity: 0;
}


.scene[data-name="Update"] .visual {
  opacity: 0;
  transform: translateX(-50%) translateY(10%);
  transition: all .75s ease-out
}

.scene[data-name="Update"] .update-frame-wall .frame-btn {
  opacity: 0;
  transform: scale(1.05) translateY(-4%);
  transition: all .25s ease-out
}

.scene[data-name="Update"] .sub-title {
  opacity: 0;
  transform: translateY(.25rem);
  transition: all .55s ease-out
}

.init .scene[data-name="Update"].active .scene-title {
  transition-delay: .5s;
}

.init .scene[data-name="Update"].active .sub-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .6s;
}

.init .scene[data-name="Update"].active .visual {
  opacity: 1;
  transform: translateX(-50%);
  transition-delay: .35s
}

.init .scene[data-name="Update"].active .update-frame-wall .frame-btn {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.init .scene[data-name="Update"].active .frame-btn:nth-child(1) {
  transition-delay: .45s
}

.init .scene[data-name="Update"].active .frame-btn:nth-child(2) {
  transition-delay: .55s
}

.init .scene[data-name="Update"].active .frame-btn:nth-child(3) {
  transition-delay: .6s
}

.init .scene[data-name="Update"].active .frame-btn:nth-child(4) {
  transition-delay: .65s
}


/* update-detail-layer */
.update-detail-layer {
  position: absolute;
  pointer-events: none;
  top: .62rem;
  left: 0;
  z-index: 9;
  width: 100%;
  min-width: 960px;
  bottom: 0;
  background-color: #000;
  transition: clip-path .35s ease-out;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

.update-detail-layer.visible {
  pointer-events: fill;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.update-detail-layer .swiper-container {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0 auto;
}

.update-detail-layer .swiper-slide {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 65%;
}

.update-detail-layer .swiper-slide.v1-character {
  background-image: url(../img/update-v1-detail-character.jpg);
}

.update-detail-layer .swiper-slide.v1-war {
  background-image: url(../img/update-v1-detail-war.jpg);
}

.update-detail-layer .swiper-slide.v1-system {
  background-image: url(../img/update-v1-detail-system.jpg);
}

.update-detail-layer .swiper-slide.v2-equipment {
  background-image: url(../img/update-v2-detail-equipment.jpg);
}

.update-detail-layer .swiper-slide.v2-dungeon {
  background-image: url(../img/update-v2-detail-dungeon.jpg);
}

.update-detail-layer .swiper-slide.v2-crossworld {
  background-image: url(../img/update-v2-detail-crossworld.jpg);
}

.update-detail-layer .swiper-slide.v14-continent {
  background-image: url(../img/update-v14-continent.jpg);
}

.update-detail-layer .swiper-slide.v14-imprint {
  background-image: url(../img/update-v14-imprint.jpg);
}

.update-detail-layer .swiper-slide.v14-tower {
  background-image: url(../img/update-v14-tower.jpg);
}

.update-detail-layer .swiper-slide.v14-alliance {
  background-image: url(../img/update-v14-alliance.jpg);
}

.update-detail-layer .swiper-slide.anniv1-warlock {
  background-image: url(../img/update-anniv1-detail-warlock.png);
}

.update-detail-layer .swiper-slide.anniv1-crossworld {
  background-image: url(../img/update-anniv1-detail-crossworld.png);
}

.update-detail-layer .close-btn {
  position: absolute;
  width: .64rem;
  height: .64rem;
  top: .26rem;
  right: .32rem;
  transform: scale(1);
  transition: transform .25s ease-out;
  z-index: 1;
}

.update-detail-layer .close-btn:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top: .01rem;
  background: url(../img/ic-close-shadow.png) no-repeat center / contain;
  z-index: -1;
  filter: blur(.01rem)
}

.update-detail-layer .close-btn:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
  background: url(../img/ic-close-on.png) no-repeat center / contain;
  z-index: 1;
  opacity: 0;
  transition: opacity .25s ease-out
}

.update-detail-layer .close-btn:hover:after {
  opacity: 1;
}

.update-detail-layer .close-btn:active {
  transform: scale(.84);
  transition-duration: .15s;
}

.update-detail-layer .swiper-pagination {
  position: absolute;
  font-size: .16rem;
  line-height: .24rem;
  left: .44rem;
  top: 1.72rem;
  width: auto;
  height: auto;
  bottom: auto;
  text-align: left;
}

.update-detail-layer .swiper-pagination:after {
  content: "";
  display: block;
  position: absolute;
  left: -.1rem;
  top: -.1rem;
  bottom: -.1rem;
  right: -.1rem;
  border-radius: .24rem;
  background: #000;
  pointer-events: none;
  z-index: -1;
  opacity: .4;
  filter: blur(.36rem)
}

.update-detail-layer .swiper-pagination:before {
  content: "<에오스 블랙>\A 1주년 주요 업데이트";
  display: block;
  font-size: .22rem;
  line-height: .3rem;
  letter-spacing: -.065em;
  padding-bottom: .2rem;
  white-space: pre;
  font-weight: bold;
  text-shadow: 0 0 .08rem rgba(0, 0, 0, .7)
}

.update-detail-layer .swiper-pagination-bullet {
  display: block;
  width: auto;
  opacity: 1;
  background: none;
  border-radius: 0;
  height: auto;
  padding: .06rem 0;
  padding-left: .2rem;
  position: relative;
  font-size: .19rem;
  line-height: .24rem;
  letter-spacing: -.065em;
  color: #a1a1a1;
  font-weight: bold;
  text-shadow: 0 0 .08rem rgba(0, 0, 0, .7)
}

.update-detail-layer .swiper-pagination-bullet:before {
  content: "·";
  display: block;
  position: absolute;
  left: 0;
  font-size: .32rem;
  line-height: .32rem;
  top: 50%;
  font-weight: bold;
  transform: translateY(-50%);
}


.update-detail-layer .swiper-pagination-bullet.swiper-pagination-bullet-active {
  color: #ffe185;
}

.update-detail-layer .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.update-detail-layer .swiper-slide:before {
  content: "";
  display: block;
  flex: 1
}

.update-detail-layer .content {
  flex: none;
  text-align: center;
  height: 3.72rem;
  width: 12.8rem;
  margin: 0 auto;
  padding-bottom: .1rem
}

.update-title {
  font-size: .64rem;
  line-height: .7rem;
  letter-spacing: -.075em;
  font-weight: 900;
}

.update-title .g-txt em {
  background: linear-gradient(-181deg, #ffffff 25%, #d2d5e3 55%, #7e828e 80%, #9498a8 95%);
  -webkit-background-clip: text;
  background-clip: text;
}

.update-title .g-txt:before {
  filter: blur(.07rem)
}

.update-title .g-txt:after {
  text-shadow: 0 0 .02rem rgba(0, 0, 0, .1);
  filter: blur(.02rem)
}

.update-name {
  font-size: .52rem;
  line-height: .6rem;
  letter-spacing: -.05em;
  position: relative;
  padding-bottom: .35rem;
  margin-bottom: .15rem;
  padding-top: .1rem;
  font-weight: 900;
}

.update-name .g-txt em {
  background: linear-gradient(-180deg, #e7d9c0 0%, #f5ce8a 35%, #e4b25c 50%, #c2903a 55%, #be8c36 60%, #d2a04a 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.update-name .g-txt:before {
  filter: blur(.08rem)
}

.update-name .g-txt:after {
  text-shadow: 0 0 .02rem rgba(0, 0, 0, .1);
  filter: blur(.03rem)
}

.update-name:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: .39rem;
  bottom: -.05rem;
  background: url(../img/update-detail-title-line.png) no-repeat center / contain
}

.update-dc {
  font-size: .23rem;
  color: #d3d3d3;
  line-height: .31rem;
  letter-spacing: -.065em;
  font-weight: 700;
  display: block;
  position: relative;
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .9), .01rem .01rem .1rem rgba(0, 0, 0, .7), 0 0 .01rem rgba(0, 0, 0, .35)
}

.update-dc:before {
  font-size: .32rem;
  content: "·";
  display: inline-block;
  vertical-align: bottom;
  margin-right: .16rem
}

/* Introduction */
.scene[data-name="Introduction"] .frame-01,
.scene[data-name="Introduction"] .frame-02 {
  position: absolute;
  transform: translate(-50%, -50%);
  height: auto;
}

.scene[data-name="Introduction"] .frame-01 {
  left: 6.6%;
  top: 93.98%;
  width: 4.7rem;
}

.scene[data-name="Introduction"] .frame-02 {
  left: 96.98%;
  top: 32.4%;
  width: 6.28rem;
}

.scene[data-name="Introduction"] .mix-layer.screen {
  opacity: .45
}

.scene[data-name="Introduction"] .mix-layer.overlay {
  background: rgba(88, 89, 104, .5)
}

.scene[data-name="Introduction"] .scene-title .g-txt em {
  background: linear-gradient(to bottom, #ffffff 18%, #9498ac 21%, #9498ac 24%, #ffffff 30%, #8f909a 75%, #7b7a7c 90%);
  -webkit-background-clip: text;
  background-clip: text;
}

.scene[data-name="Introduction"] .scene-title:before {
  background-image: url(../img/introduction-title-line.png)
}

.introduction-wall {
  position: relative;
  height: 7.2rem;
  width: 12.8rem;
  margin: 0 auto;
}

.frame-btn {
  position: absolute;
  transform: translate(-50%, -50%);
  height: auto
}

.frame-btn>span {
  display: block;
}

.frame-btn .frame-name {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  height: auto;
  left: 0;
}

.frame-btn .frame-name:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  top: 100%;
  margin-top: -.03rem;
  height: .3rem;
  background: url(../img/update-v14-frame-line.png) no-repeat center / auto 100%;
}

.frame-btn .frame-name .g-txt {
  font-size: .43rem;
  line-height: .52rem;
  letter-spacing: -.075em;
}

.frame-btn .frame-name .g-txt em {
  background: linear-gradient(to bottom, #fff 5%, #8f9199 80%);
  -webkit-background-clip: text;
  background-clip: text;
}

.frame-btn .pic>img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

.frame-btn .pic {
  position: relative;
  height: auto;
  overflow: hidden;
}

.frame-btn .pic .swiper-container {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

#introductionClassPager {
  position: absolute;
  left: 48.5%;
  top: 52.8%;
  width: 4.3rem;
  height: auto;
}

#introductionClassPager .swiper-pagination-bullet {
  opacity: 1;
  margin: 0;
  background: none;
  display: block;
  border-radius: 0;
  height: auto;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  padding-left: .24rem;
  border: 0 none;
  outline: none;
}

#introductionClassPager .swiper-pagination-bullet:before,
#introductionClassPager .swiper-pagination-bullet:after {
  content: "";
  display: block;
  position: absolute;
  width: .09rem;
  height: .11rem;
  top: 50%;
  transform: translateY(-50%);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  opacity: 0;
}

#introductionClassPager .swiper-pagination-bullet:before {
  background: #000;
  filter: blur(.04rem);
  left: .12rem;
  top: calc(50% + .02rem);
}

#introductionClassPager .swiper-pagination-bullet:after {
  left: .11rem;
  background: #73747c
}

#introductionClassPager .icon {
  display: inline-block;
  width: .48rem;
  height: .48rem;
  position: relative;
  vertical-align: middle;
}

#introductionClassPager .g-txt {
  font-weight: 400;
  font-size: .24rem;
  line-height: .3rem;
  letter-spacing: -.05em;
  padding-left: .03rem;
  margin: .08rem 0;
  vertical-align: middle;
}

#introductionClassPager .g-txt em {
  color: #73747c;
  background: none;
  transition: color .15s;
}

#introductionClassPager .icon:before,
#introductionClassPager .icon:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: .56rem;
  height: .56rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#introductionClassPager .icon:after {
  opacity: 0;
  transition: opacity .15s;
}

#introductionClassPager .swiper-pagination-bullet:hover .icon:after,
#introductionClassPager .swiper-pagination-bullet.swiper-pagination-bullet-active .icon:after {
  opacity: 1
}

#introductionClassPager .swiper-pagination-bullet:hover .g-txt em,
#introductionClassPager .swiper-pagination-bullet.swiper-pagination-bullet-active .g-txt em {
  color: #fff;
}

#introductionClassPager .swiper-pagination-bullet.swiper-pagination-bullet-active:before,
#introductionClassPager .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
  opacity: 1
}

#introductionClassPager .icon.archer:before {
  background-image: url(../img/introduction-class-archer-icon-off.png);
}

#introductionClassPager .icon.archer:after {
  background-image: url(../img/introduction-class-archer-icon-on.png);
}

#introductionClassPager .icon.warrior:before {
  background-image: url(../img/introduction-class-warrior-icon-off.png);
}

#introductionClassPager .icon.warrior:after {
  background-image: url(../img/introduction-class-warrior-icon-on.png);
}

#introductionClassPager .icon.sorceress:before {
  background-image: url(../img/introduction-class-sorceress-icon-off.png);
}

#introductionClassPager .icon.sorceress:after {
  background-image: url(../img/introduction-class-sorceress-icon-on.png);
}

#introductionClassPager .icon.fighter:before {
  background-image: url(../img/introduction-class-fighter-icon-off.png);
}

#introductionClassPager .icon.fighter:after {
  background-image: url(../img/introduction-class-fighter-icon-on.png);
}

#introductionClassPager .icon.rogue:before {
  background-image: url(../img/introduction-class-rogue-icon-off.png);
}

#introductionClassPager .icon.rogue:after {
  background-image: url(../img/introduction-class-rogue-icon-on.png);
}

#introductionClassPager .icon.warlock:before {
  background-image: url(../img/introduction-class-warlock-icon-off.png);
}

#introductionClassPager .icon.warlock:after {
  background-image: url(../img/introduction-class-warlock-icon-on.png);
}


.frame-btn .pic:before {
  content: "";
  display: block;
}

.frame-btn .inner-frame,
.frame-btn .outer-frame {
  position: absolute;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.frame-btn .pic:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  mix-blend-mode: multiply;
  transition: opacity .1s linear
}

.frame-btn:hover .pic:after {
  opacity: 0;
}

.frame-btn .inner-frame img {
  width: 100%;
  height: auto;
  transition: opacity .1s linear
}

.frame-btn .inner-frame .on {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.frame-btn .inner-frame .off {
  opacity: 1;
}

.frame-btn:hover .inner-frame .on {
  opacity: 1;
}

.frame-btn:hover .inner-frame .off {
  opacity: 0;
}

.frame-btn[value="class"] {
  left: 28.67%;
  top: 47.92%
}

.frame-btn[value="class"] .frame-name {
  top: 83.2%
}

.frame-btn[value="class"] .pic {
  width: 3.58rem;
}

.frame-btn[value="class"] .pic:before {
  padding-top: 140.78%;
}

.frame-btn[value="class"] .pic:after {
  background: rgba(28, 31, 32, .6);
}

.frame-btn[value="class"] .inner-frame {
  width: 4.6rem;
}

.frame-btn[value="class"] .outer-frame {
  width: 5.63rem;
}

.frame-btn[value="worldlore"] {
  left: 71.72%;
  top: 25.835%
}

.frame-btn[value="worldlore"] .pic {
  width: 3.56rem;
}

.frame-btn[value="worldlore"] .pic:before {
  padding-top: 58.43%;
}

.frame-btn[value="worldlore"] .pic:after {
  background: rgb(128, 131, 149);
}

.frame-btn[value="worldlore"] .inner-frame {
  width: 4.3rem;
}

.frame-btn[value="worldlore"] .outer-frame {
  width: 4.97rem;
}

.frame-btn[value="feature"] {
  left: 83.2%;
  top: 71.58%
}

.frame-btn[value="feature"] .pic {
  width: 3.24rem;
}

.frame-btn[value="feature"] .pic:before {
  padding-top: 62.5%;
}

.frame-btn[value="feature"] .pic:after {
  background: rgb(128, 131, 149);
}

.frame-btn[value="feature"] .inner-frame {
  width: 3.82rem;
}

.frame-btn[value="feature"] .outer-frame {
  width: 4.62rem;
}

.scene[data-name="Introduction"] .frame-01,
.scene[data-name="Introduction"] .frame-02,
.scene[data-name="Introduction"] .frame-btn {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.1);
}

.scene[data-name="Introduction"].active .frame-01,
.scene[data-name="Introduction"].active .frame-02,
.scene[data-name="Introduction"].active .frame-btn {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: all .35s ease-out;
}

.scene[data-name="Introduction"].active .frame-btn[value="class"] {
  transition-delay: .7s
}

.scene[data-name="Introduction"].active .frame-btn[value="worldlore"] {
  transition-delay: .85s
}

.scene[data-name="Introduction"].active .frame-btn[value="feature"] {
  transition-delay: 1s
}

.scene[data-name="Introduction"].active .frame-01 {
  transition-delay: .45s
}

.scene[data-name="Introduction"].active .frame-02 {
  transition-delay: .55s
}

#introductionClassPager {
  opacity: 0;
  transform: translateX(-5%);
  transition: all .55s ease-out;
}

.active #introductionClassPager {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1s;
}

/* Tvc-showcase */
.scene[data-name="Tvc-showcase"] .scene-bg {
  background-image: url(../img/tvc-bg.jpg)
}

.scene[data-name="Tvc-showcase"] .tvc-btn {
  width: 50%;
  display: block;
  position: relative;
  float: left;
}

.scene[data-name="Tvc-showcase"]:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  width: .96rem;
  height: 100%;
  transform: translateX(-50%);
  background: url(../img/tvc-line.png) no-repeat center / 100% auto;
}

.scene[data-name="Tvc-showcase"] .visual {
  overflow: hidden;
  display: flex;
  height: calc(var(--vh)*100);
  flex-direction: column;
}

.scene[data-name="Tvc-showcase"] .visual:before {
  content: "";
  display: block;
  flex: 1
}


.tvc-btn .model {
  height: auto;
  position: relative;
  width: 8.57rem;
  margin: 0 auto;
  flex: none;
  transform: translateX(0);
}

.tvc-btn .model .shadow {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  opacity: 1;
  transition: opacity .5s ease-out
}

.tvc-btn:hover .model .shadow {
  opacity: 0
}

.gradient-shadow {
  flex: 1;
  position: relative;
}

.gradient-shadow:before {
  content: "";
  display: block;
  height: 200%;
  bottom: 0;
  left: 0;
  width: 100%;
  position: absolute;
  background: linear-gradient(to top, rgba(0, 0, 0, 1) 33%, rgba(0, 0, 0, 0) 100%);
}

.tvc-btn .description {
  position: absolute;
  top: 50%;
  width: 7.2rem;
  margin-top: -.85rem;
}

.tvc-btn[value="tvc-shame"] .description {
  right: 0
}

.tvc-btn[value="tvc-revenge"] .description {
  left: 0
}

.tvc-btn .slogan {
  width: 4.62rem;
  display: block;
  margin: 0 auto;
  position: relative;
  transform: translateX(0);
}

.tvc-btn .on {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
}

.tvc-btn .tvc-name {
  display: block;
  margin: 0 auto;
  position: relative;
  width: 3.3rem;
  box-shadow: .06rem .01rem .09rem rgba(0, 0, 0, .5);
}

.tvc-btn .tvc-name:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: url(../img/tvc-btn-light.jpg) no-repeat center top / 100% auto;
  opacity: 0;
  transition: all .35s ease-out
}

.tvc-btn:hover .tvc-name:before {
  opacity: 1
}

.tvc-btn .mission {
  padding-top: .18rem;
  display: block;
  text-align: center;
}

.tvc-btn .mission .g-txt {
  font-size: .28rem;
  line-height: .36rem;
  letter-spacing: -.05em;
  font-weight: 400;
}

.tvc-btn .mission .g-txt em {
  background: none;
  color: #c5ae88
}



.tvc-btn .model {
  transition: transform 1.75s ease-out;
}

.tvc-btn:hover .model {
  transition-duration: 1s;
}

.tvc-btn .slogan {
  transition: transform .75s 0s ease-out
}

.tvc-btn:hover .slogan {
  transition: transform .45s 0s ease-out
}

.tvc-btn[value="tvc-shame"]:hover .model {
  transform: translateX(1.08rem)
}

.tvc-btn[value="tvc-shame"]:hover .slogan {
  transform: translateX(-.7rem)
}

.tvc-btn[value="tvc-revenge"]:hover .model {
  transform: translateX(-1.08rem)
}

.tvc-btn[value="tvc-revenge"]:hover .slogan {
  transform: translateX(.7rem)
}

.tvc-btn .on {
  opacity: 0;
  clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
  transition: clip-path .35s ease-in;
}

.tvc-btn:hover .on {
  opacity: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.tvc-btn {
  opacity: 0;
  transition: all .75s ease-out
}

.tvc-btn[value="tvc-shame"] {
  transform: translateX(-10%);
}

.tvc-btn[value="tvc-revenge"] {
  transform: translateX(10%);
}

.tvc-btn .description {
  opacity: 0;
  transform: translateY(.25rem);
  transition: all .55s ease-out
}

.tvc-btn .tvc-name,
.tvc-btn .mission {
  opacity: 0;
  transform: translateY(.1rem);
  transition: all .5s ease-out
}

.active .tvc-btn {
  opacity: 1;
  transform: translateX(0);
  transition-delay: .15s
}

.active .tvc-btn .description,
.active .tvc-btn .tvc-name,
.active .tvc-btn .mission {
  opacity: 1;
  transform: translateY(0);
}

.active .tvc-btn .description {
  transition-delay: .85s;
}

.active .tvc-btn .tvc-name {
  transition-delay: .9s;
}

.active .tvc-btn .mission {
  transition-delay: .95s;
}


/* Event */
.scene[data-name="Event"] .scene-bg {
  background-image: url(../img/event-bg.jpg)
}

.scene[data-name="Event"] .scene-content {
  width: 14.2rem
}

.scene[data-name="Event"] .scene-title {
  padding: .13rem 0;
}

.scene[data-name="Event"] .scene-title:before {
  background-image: url(../img/event-title-line.png);
  bottom: -.2rem
}

.scene[data-name="Event"] .scene-title>span {
  font-size: .48rem;
  line-height: .54rem;
  color: #fafafa;
  font-weight: 700;
  letter-spacing: -.05em;
  text-shadow: 0 0 .07rem rgba(0, 0, 0, 1), -.01rem .01rem .035rem rgba(0, 0, 0, .75), .01rem -.01rem .035rem rgba(0, 0, 0, .75)
}

.scene[data-name="Event"] .scene-title .g-txt {
  font-size: .54rem;
  text-shadow: none
}

.scene[data-name="Event"] .scene-title .g-txt em {
  background: url(../img/event-title-bg.jpg) no-repeat center / cover;
  -webkit-background-clip: text;
  background-clip: text;
  color: rgba(255, 240, 148, .25);
  transform: translateY(5%);
}

.scene[data-name="Event"] .sub-title {
  padding: .1rem 0;
  margin: .08rem 0 .12rem;
}

.scene[data-name="Event"] .sub-title>span {
  vertical-align: middle;
  display: inline-block;
}

.scene[data-name="Event"] .sub-title>button {
  vertical-align: middle;
  display: inline-block;
  margin-left: .24rem;
  position: relative;
  width: 1.39rem;
}

.scene[data-name="Event"] .sub-title .arrows {
  display: inline-block;
  margin-left: .06rem;
  position: relative;
  width: .09rem;
  height: .2rem;
  vertical-align: top;
}

.scene[data-name="Event"] .sub-title .arrows:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  width: .09rem;
  height: .11rem;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}


.scene[data-name="Event"] .sub-title>button span {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  font-size: .15rem;
  letter-spacing: -.075em;
  color: #fff;
  line-height: .2rem;
  font-weight: 700
}

.scene[data-name="Event"] .sub-title .g-txt em {
  font-weight: 700;
  color: transparent
}

.scene[data-name="Event"] .sub-title .g-txt {
  font-size: .28rem;
  line-height: .34rem;
  letter-spacing: -.05em;
}

.scene[data-name="Event"] .sub-title .g-txt em {
  background: linear-gradient(-181deg, #d1d1d1 0%, #e2e2e2 15%, #9d9d9d 80%);
  -webkit-background-clip: text;
  background-clip: text;
}

.scene[data-name="Event"] .sub-title .g-txt.emph em {
  background: linear-gradient(-181deg, #fff9bc 25%, #b4903a 45%, #7b5c17 50%, #eac478 95%);
  color: rgba(255, 240, 148, .25);
  -webkit-background-clip: text;
  background-clip: text;
}

.scene[data-name="Event"] .sub-title .g-txt:before {
  filter: blur(.03rem);
  text-shadow: 0 0 .05rem rgba(0, 0, 0, 1)
}

.scene[data-name="Event"] .sub-title .g-txt:after {
  filter: blur(.01rem);
}

.scene[data-name="Event"] .sub-title .g-txt.emph:after {
  color: #fff;
  filter: blur(0);
  left: 0;
  top: 0;
}

.scene[data-name="Event"] .event-period {
  display: flex;
  align-items: stretch;
  width: 3.52rem;
  height: .32rem;
  border: .01rem solid #6c6c6c;
  margin: 0 0 .07rem;
  padding: 0;
  font-size: .14rem;
  line-height: .19rem;
  letter-spacing: 0
}

.scene[data-name="Event"] .event-period>span:after {
  content: "";
  display: block;
  width: .01rem;
  top: 0;
  bottom: 0;
  right: 0;
  background: #6c6c6c;
  position: absolute;
}

.scene[data-name="Event"] .event-period>strong {
  flex: 1;
  padding: .06rem 0 .08rem;
}

.event-gift-preview {
  padding: .62rem 0 .5rem;
  position: relative;
  display: flex;
  align-items: start;
  height: auto;
  width: 100%;
}

.scene[data-name="Event"] .event-period>span {
  flex: none;
  width: 1.25rem;
  background: #2d2b28;
  padding: .06rem 0 .08rem;
  position: relative;
}


.event-gift-preview .gift-list {
  flex: none;
  display: flex;
  flex-flow: wrap;
  width: 7.45rem;
  align-items: end;
  justify-content: end;
  gap: .11rem
}

.event-gift-preview .gift-list>li {
  flex: auto;
  max-width: 1.77rem;
  position: relative;
}

.event-gift-preview .gift-list .item {
  position: absolute;
  width: 1.46rem;
  left: 50%;
  top: .22rem;
  height: auto;
  transform: translateX(-50%);
}

.event-gift-preview .gift-list .target {
  color: #000;
  font-size: .14rem;
  font-weight: 600;
  line-height: .17rem;
  letter-spacing: -.05em;
  padding-top: .08rem;
  display: block;
  text-align: center;
}

.event-gift-preview .gift-list .name {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: .4rem;
}

.event-gift-preview .gift-list .name>* {
  flex: none;
  display: block;
  text-align: center;
  color: #220f00;
  font-weight: 700;
  letter-spacing: -.025em
}

.event-gift-preview .gift-list .name:before,
.event-gift-preview .gift-list .name:after {
  content: "";
  display: block;
  flex: 1
}

.event-gift-preview .gift-list .name em {
  font-size: .15rem;
  line-height: .17rem;
}

.event-gift-preview .gift-list .name .long {
  font-size: .13rem
}

.event-gift-preview .gift-list .name small {
  font-size: .11rem;
  line-height: .13rem;
  margin-top: .02rem;
}

.event-gift-preview .g80 {
  flex: 1;
  position: relative;
  z-index: 2
}

.event-gift-preview .g80 .badge {
  position: absolute;
  left: -1.08rem;
  top: -.08rem;
  width: 2.3rem;
}

.event-gift-preview .g80 .car {
  position: absolute;
  left: -1.96rem;
  top: 1.2rem;
  width: 11.55rem;
}

.event-gift-preview .event-notice {
  position: absolute;
  bottom: .16rem;
  right: 0;
  padding: .07rem 0;

}

.event-gift-preview .event-notice>* {
  display: inline-block;
  position: relative;
  z-index: 1;
  vertical-align: middle;
}

.event-gift-preview .event-notice>span {
  font-size: .14rem;
  line-height: .2rem;
  letter-spacing: -.05em;
}

.event-gift-preview .event-notice>span:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .3;
  filter: blur(.05rem);
  z-index: -1
}

.event-gift-preview .event-notice .more-btn {
  width: .8rem;
  margin-left: .05rem;
}


.scene[data-name="Event"] .event-gift-preview {
  opacity: 0;
  transform: translateY(.25rem);
  transition: all .55s ease-out;
}

.init .scene[data-name="Event"].active .event-gift-preview {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .55s;
}





.spec-details {
  display: block;
  padding: .14rem 0;
  width: 9.4rem;
  margin: 0 auto;
}

.spec-details .spec-title-btn {
  color: #fff;
  font-size: .27rem;
  width: 7.1rem;
  margin: 0 auto .16rem;
  line-height: .34rem;
  padding: .04rem 0 .06rem;
  display: block;
  letter-spacing: -.05em;
  text-align: center;
  background: url(../img/download-spec-title-bg.png) no-repeat center / auto 100%;
}

.spec-details .spec-title-btn .arrows {
  display: inline-block;
  margin-left: .1rem;
  position: relative;
  width: .3rem;
  height: .34rem;
  vertical-align: top;
}

.spec-details .spec-title-btn .arrows:before,
.spec-details .spec-title-btn .arrows:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  width: .13rem;
  height: .15rem;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.spec-details .spec-title-btn .arrows:before {
  left: 0
}

.spec-details .spec-title-btn .arrows:after {
  right: 0
}

.spec-details p {
  display: block;
  position: relative;
  text-align: left;
  color: #fff;
  font-weight: 400;
  text-shadow: 0 0 .05rem rgba(0, 0, 0, .9), -.01rem -.01rem .02rem rgba(0, 0, 0, .45), .01rem -.01rem .02rem rgba(0, 0, 0, .45), -.01rem .01rem .02rem rgba(0, 0, 0, .45), .01rem .01rem .02rem rgba(0, 0, 0, .45);
  letter-spacing: -.05em;
}

.spec-details .spec-name {
  font-size: .21rem;
  line-height: .28rem;
}

.spec-details .bullet {
  font-size: .18rem;
  line-height: .23rem;
  padding-left: .28rem;
}

.spec-details .bullet:before {
  content: "-";
  position: absolute;
  left: 0;
  width: .28rem;
  top: 0;
  text-align: center;
  display: block;
}

.spec-details table {
  margin: .06rem 0;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-left: .01rem solid rgba(255, 255, 255, .3);
  border-bottom: .01rem solid rgba(255, 255, 255, .3);
  background: rgba(0, 0, 0, .85);
}

.spec-details table th,
.spec-details table td {
  text-align: center;
  font-size: .21rem;
  color: #fff;
  font-weight: 400;
  vertical-align: middle;
  line-height: .26rem;
  letter-spacing: -.05em;
  border: .01rem solid rgba(255, 255, 255, .3);
  border-left: 0 none;
  border-bottom: 0 none;
}

.spec-details table thead {
  background: #16292a
}

.spec-details table thead th {
  height: .4rem;
}

.spec-details table tbody th,
.spec-details table tbody td {
  height: .38rem;
}

/* video controller */

.screen-frame {
  position: relative;
  width: 100%;
  height: auto;
}

.screen-frame:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 56.25%;
  background: #000
}

.screen-frame .vid-player {
  position: absolute;
  width: 100%;
  display: block;
  left: 0;
  top: 0;
  height: 100%;
  overflow: hidden;
}

.screen-frame .youtube_screen {
  position: absolute;
  width: 100%;
  height: 300%;
  left: 0;
  top: 50%;
  opacity: 0;
  transform: translateY(-50%);
}

.full-video-playing * {
  z-index: 0 !important;
  transition: none !important;
}

.full-video-playing .fullpage-wrapper {
  transform: none !important
}

.full-video-playing #header,
.full-video-playing #gnb,
.full-video-playing #footer {
  z-index: -1;
}

.full-video-playing #app:before,
.full-video-playing #app:after {
  display: none;
}

.full-video-playing #app .vid-controls {
  bottom: 0;
}

.full-video-playing #app .layer[data-name="common-video"] {
  width: 100vw;
  height: 100vh;
  max-width: 100%
}

.full-video-playing #app .view-box,
.full-video-playing #app .screen-frame.full-vid {
  position: fixed;
  margin: 0;
  padding: 0;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
}

.screen-frame.playing .youtube_screen {
  opacity: 1
}

.screen-frame.playing .preview {
  pointer-events: none;
  opacity: 0;
  transition-delay: 0s;
}

.screen-frame.playing .vid-controls {
  opacity: 1;
  transition: opacity .25s ease-out
}

.screen-frame .preview {
  position: absolute;
  width: auto;
  height: auto;
  width: calc(100% + .02rem);
  height: calc(100% + .02rem);
  left: -.01rem;
  top: -.01rem;
  opacity: 1;
  pointer-events: fill;
  background-color: #000;
  transition: opacity 0s .15s;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.screen-frame .preview:before,
.screen-frame .preview:after {
  content: "";
  display: block;
  width: .96rem;
  height: .96rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -.48rem;
  margin-top: -.48rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain
}

.screen-frame .preview:before {
  transform: rotate(360deg);
  transition: transform .35s ease-out;
  background-image: url(../img/media-play-btn.png)
}

.screen-frame .preview:after {
  transform: scale(1);
  transition: transform .1s ease-out;
  background-image: url(../img/media-play-arrow.png)
}

.screen-frame .preview:hover:before {
  transform: rotate(0deg)
}

.screen-frame .preview:active:after {
  transform: scale(.95)
}

.screen-frame .vid-controls {
  position: absolute;
  display: flex;
  height: .4rem;
  left: .08rem;
  right: .08rem;
  bottom: 0;
  width: calc(100% - .16rem);
  align-items: center;
}

.vid-controls>* {
  flex: none;
}

.vid-controls .play-bar {
  flex: 1;
  position: relative;
  height: 100%;
  cursor: pointer;
  overflow: hidden
}

.vid-controls .play-bar:before {
  content: "";
  display: block;
  height: .01rem;
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #a9a9a9
}

.vid-controls .play-bar>.filled {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  height: .026rem;
  background: #fff
}

.vid-controls .play-video,
.vid-controls .play-time,
.vid-controls .play-sound,
.vid-controls .full-screen {
  padding: 0 .06rem;
  box-sizing: content-box
}

.vid-controls .play-video,
.vid-controls .play-sound,
.vid-controls .full-screen {
  width: .4rem;
  height: .4rem;
  background-repeat: no-repeat;
  background-size: .4rem auto;
  background-position: center
}

.vid-controls .play-video {
  margin-right: .16rem;
}

.playing .vid-controls .play-video {
  background-image: url(../img/vid-pause.png)
}

.vid-controls .play-video,
.paused .vid-controls .play-video {
  background-image: url(../img/vid-play.png)
}

.vid-controls .play-sound {
  background-image: url(../img/vid-sound-off.png)
}

.vid-controls .play-sound.on {
  background-image: url(../img/vid-sound-on.png)
}

.vid-controls .full-screen {
  background-image: url(../img/vid-fullscreen.png)
}

.vid-controls .play-time {
  width: auto;
  font-family: 'Nanum Gothic';
  min-width: .72rem;
  text-align: right;
  padding-right: .12rem;
  font-size: .18rem;
  line-height: .25rem;
  position: relative;
  letter-spacing: -.05em;
  font-weight: 700;
  color: #808080;
}


/* Media */

.scene[data-name="Media"] {
  background: #000;
}

.scene[data-name="Media"] .scene-bg {
  height: calc(100% - 1.4rem);
  top: 0;
  transform: translateX(-50%);
  background-image: url(../img/media-bg.jpg);
  background-position: center bottom;
  background-size: cover;
}

.scene[data-name="Media"] .scene-title .g-txt {
  letter-spacing: -.075em;
}

.scene[data-name="Media"] .scene-title,
.scene[data-name="Media"] .sub-title,
.scene[data-name="Media"] .screen-frame,
.scene[data-name="Media"] .thumbnails {
  z-index: 5;
}

.scene[data-name="Media"] .scene-title:before {
  background-image: url(../img/media-title-line.png)
}

.scene[data-name="Media"] .view-box {
  position: relative;
  z-index: 2;
  width: 6.7rem;
  overflow: visible;
  margin: .5rem auto
}

.scene[data-name="Media"] .view-box:before {
  content: "";
  display: block;
  z-index: -1;
  background: #000 url(../img/media-frame.png) no-repeat center / 7.23rem auto;
  position: absolute;
  left: -.38rem;
  top: -.33rem;
  right: -.38rem;
  bottom: -.33rem;
  border-radius: .1rem;
}

.scene[data-name="Media"] .thumbnails {
  position: relative;
  width: 6.12rem;
  margin: 0 auto .44rem;
}

.scene[data-name="Media"] .thumbnails .swiper-container {
  width: 100%;
  height: auto;
  overflow: hidden;
}

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

.scene[data-name="Media"] .thumbnails .box {
  background: #000;
  padding: .04rem;
  pointer-events: fill;
  cursor: pointer;
}

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

.scene[data-name="Media"] .thumb:before {
  content: "";
  display: block;
  position: relative;
  z-index: 1;
  padding-top: calc((3/7)*100%);
  box-sizing: border-box;
  border: .01rem solid rgba(161, 142, 117, .7);
  border-radius: .01rem;
}

.scene[data-name="Media"] .thumb:after {
  content: "";
  display: block;
  position: absolute;
  left: .04rem;
  top: .04rem;
  bottom: .04rem;
  right: .04rem;
  border: .01rem solid rgba(161, 142, 117, .4);
  border-radius: .01rem;
}

.scene[data-name="Media"] .thumbnails .txt {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-weight: 700;
  font-size: .18rem;
  line-height: .22rem;
  letter-spacing: -.025em;
  text-shadow: 0 .01rem .05rem rgba(0, 0, 0, 1)
}

.scene[data-name="Media"] .thumb>img {
  position: absolute;
  width: 100%;
  object-fit: cover;
  left: 50%;
  top: 50%;
  opacity: .3;
  transform: translate(-50%, -50%) scale(1);
  transition: all .5s ease-out
}

.scene[data-name="Media"] .thumbnails .swiper-slide.swiper-slide-thumb-active .thumb img,
.scene[data-name="Media"] .thumbnails .swiper-slide:hover .thumb img {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

.swiper-button-next,
.swiper-button-prev {
  width: .84rem;
  height: .84rem;
  transform: translateY(-50%);
  margin: 0;
  background: none;
}

.swiper-button-next:before,
.swiper-button-prev:before,
.swiper-button-next:after,
.swiper-button-prev:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

}

.swiper-button-prev:before,
.swiper-button-prev:after {
  transform: rotate(-180deg)
}

.swiper-button-next:before,
.swiper-button-prev:before {
  background-image: url(../img/media-arrow-off.png);
}

.swiper-button-next:after,
.swiper-button-prev:after {
  transition: opacity .15s ease-out;
  opacity: 0;
  background-image: url(../img/media-arrow-on.png);
}

.swiper-button-next:hover:after,
.swiper-button-prev:hover:after {
  opacity: 1
}

.scene[data-name="Media"] .swiper-button-next {
  left: 100%;
  margin-left: -.03rem
}

.scene[data-name="Media"] .swiper-button-prev {
  left: auto;
  right: 100%;
  margin-right: -.03rem
}

.scene[data-name="Media"] .view-box,
.scene[data-name="Media"] .thumbnails {
  opacity: 0;
  transform: translateY(.25rem);
  transition: all .55s ease-out;
}


.scene[data-name="Media"] .deco {
  position: absolute;
  z-index: -2;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
  transition: all .35s ease-out;
}

.scene[data-name="Media"] .ink-01 {
  width: 10.32rem;
  top: 1.38rem;
  left: -1.08rem;
  clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0);
}

.scene[data-name="Media"] .ink-02 {
  width: 7.61rem;
  top: .32rem;
  left: 5.14rem;
  clip-path: polygon(0 50%, 0 50%, 0 50%, 0 50%);
}

.scene[data-name="Media"] .ink-03 {
  width: 13.24rem;
  top: 2.85rem;
  left: 3.34rem;
  clip-path: polygon(50% 20%, 50% 20%, 50% 20%, 50% 20%);
}

.scene[data-name="Media"] .ink-04 {
  width: 9.68rem;
  top: 2.24rem;
  left: 6.28rem;
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}

.scene[data-name="Media"] .ink-05 {
  width: 6.9rem;
  top: .1rem;
  left: 7.84rem;
  clip-path: polygon(0 80%, 0 80%, 0 80%, 0 80%);
}

.scene[data-name="Media"] .ink-06 {
  width: 9.82rem;
  top: -.66rem;
  left: 2.98rem;
  clip-path: polygon(50% 100%, 50% 100%, 50% 100%, 50% 100%);
}

.scene[data-name="Media"].active .view-box,
.scene[data-name="Media"].active .thumbnails {
  opacity: 1;
  transform: translateY(0);
}

.scene[data-name="Media"].active .deco {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.scene[data-name="Media"].active .deco.ink-01 {
  transition-delay: .45s
}

.scene[data-name="Media"].active .deco.ink-02 {
  transition-delay: .5s
}

.scene[data-name="Media"].active .deco.ink-03 {
  transition-delay: .55s
}

.scene[data-name="Media"].active .deco.ink-04 {
  transition-delay: .65s
}

.scene[data-name="Media"].active .deco.ink-05 {
  transition-delay: .75s
}

.scene[data-name="Media"].active .deco.ink-06 {
  transition-delay: .85s
}

.scene[data-name="Media"].active .view-box {
  transition-delay: .45s
}

.scene[data-name="Media"].active .thumbnails {
  transition-delay: .55s
}




/* footer */

#footer {
  background: #000;
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  height: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: fill;
  z-index: 5;
}

#footer>* {
  flex: none
}

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

#footer>p {
  display: block;
  text-align: center;
}

#footer>p+p {
  margin-top: .14rem;
}

#footer span,
#footer button,
#footer a {
  font-weight: 300;
}

#footer>p>span,
#footer>p>button,
#footer>p>a {
  color: #aaaab5;
  font-size: .14rem;
  line-height: .18rem;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

#footer .copyright {
  font-size: .12rem;
}

.cp-links>button,
.cp-links>a {
  padding: 0 .18rem
}

.cp-links>button+a:before,
.cp-links>a+button:before,
.cp-links>a+a:before {
  content: "";
  display: block;
  position: absolute;
  width: .01rem;
  height: .11rem;
  background: #8b8b94;
  border-right: .01rem solid #45454a;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cp-links strong {
  color: #D7CCB5;
  font-weight: 700;
}

.cp-info>span {
  padding-left: .1rem;
}

.cp-info>span:before {
  content: "";
  display: block;
  position: absolute;
  width: .04rem;
  height: .04rem;
  background: #3e3e46;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.cp-info>span+span {
  margin-left: .12rem;
}

.cp-info>span>a {
  border-bottom: .01rem solid #3e3e46;
}

.site-info .ci {
  width: 1rem;
  margin-right: .16rem
}



/* layer */
#layers {
  position: fixed;
  height: 0;
  top: 0;
  width: 100%;
  left: 0;
  z-index: 99;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}

#dim {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  opacity: 0;
  background: rgba(0, 0, 0, .8);
  transition: opacity .25s ease-out
}

.layer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease-out
}

.popup-view #layers {
  pointer-events: fill;
  opacity: 1;
  height: 100%;
}

.popup-view #dim {
  pointer-events: fill;
  opacity: 1
}

.popup-view .layer.visible {
  pointer-events: fill;
  opacity: 1
}


.layer-head {
  height: .32rem;
  align-items: center;
  justify-content: end;
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  display: none;
}

.layer-head.visible {
  display: flex;
}

.layer-head>* {
  flex: none
}

.layer-head:before {
  content: "";
  display: block;
  flex: 1
}

.layer-head:after {
  content: "";
  display: block;
  flex: none;
  width: .8rem;
}

.layer-head .check-frm label {
  color: #808080;
  font-weight: 700;
  letter-spacing: -.05em;
  font-size: .18rem;
  line-height: .25rem;
  padding-left: .28rem;
}

.layer-head .check-frm label:before,
.layer-head .check-frm label:after {
  width: .17rem;
  height: .17rem;
}

.layer-head .check-frm label:before {
  border-color: #808080
}

.layer .close-btn {
  position: absolute;
  width: .44rem;
  height: .44rem;
  top: .08rem;
  right: .08rem;
  transform: scale(1);
  transition: transform .25s ease-out;
  z-index: 1;
}

.layer .close-btn:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top: .01rem;
  background: url(../img/ic-close-shadow.png) no-repeat center / contain;
  z-index: -1;
  filter: blur(.01rem)
}

.layer .close-btn:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
  background: url(../img/ic-close-on.png) no-repeat center / contain;
  z-index: 1;
  opacity: 0;
  transition: opacity .25s ease-out
}

.layer .close-btn:hover:after {
  opacity: 1;
}

.layer .close-btn:active {
  transform: scale(.84);
  transition-duration: .15s;
}

.layer {
  width: 5.72rem;
  height: auto;
}

.layer .layer-body {
  position: absolute;
  top: .07rem;
  left: .07rem;
  right: .07rem;
  bottom: .07rem;
  text-align: center;
}

.layer .layer-body:before,
.layer .layer-body:after {
  content: "";
  display: block;
  pointer-events: none;
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  background: url(../img/layer-frame.png) no-repeat center top / 100% auto;
}

.layer .layer-body:before {
  bottom: 0;
  transform: rotateX(180deg)
}

.layer .layer-body:after {
  top: 0;
  clip-path: polygon(0 0, calc(100% - .58rem) 0, calc(100% - .58rem) .58rem, 100% .58rem, 100% 100%, 0 100%);
}

.layer[data-close="off"] .layer-body:after {
  clip-path: none
}

.layer[data-close="off"] .close-btn {
  display: none;
}

.alert-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 2.9rem;
  padding: .64rem .4rem 0;
  text-align: center;
  font-weight: 400;
  color: #fff;
  line-height: .43rem;
  font-size: .36rem;
  word-break: keep-all;
  word-wrap: break-word;
}

.alert-msg.small {
  line-height: .33rem;
  font-size: .28rem;
}

.layer.notice .alert-msg {
  line-height: .4rem;
  font-size: .33rem;
}

.layer.notice small {
  margin-top: .2rem
}

.layer.notice .g-txt em {
  background: linear-gradient(-181deg, #f3ebdc 0%, #f3ebdc 48%, #a18251 50%, #d3c8ba 95%, #a89278 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.alert-msg>* {
  flex: none;
}

.alert-msg:before,
.alert-msg:after {
  content: "";
  display: block;
  flex: 1;
}

.layer-buttons {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.layer-buttons .confirm-btn {
  width: 3.65rem;
  padding: .15rem 0;
}

.layer-buttons .confirm-btn .g-txt {
  font-size: .29rem;
  line-height: .33rem;
  letter-spacing: -.075em;
  font-weight: 700;
  margin: 0;
}




.layer[data-name="common-video"] {
  width: 15.36rem;
  max-width: 80%;
  background: #000
}

.layer[data-name="common-video"] .layer-body {
  position: relative;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
}

.layer[data-name="common-video"] .layer-body:before,
.layer[data-name="common-video"] .layer-body:after {
  display: none;
}

.layer[data-name="common-video"] .close-btn {
  top: auto;
  bottom: 100%;
  margin-bottom: -.06rem;
}

.layer[data-name="common-video"] .view-box {
  padding: .12rem .16rem .74rem;
}

.layer[data-name="common-video"] .view-box .vid-controls {
  bottom: -.6rem;
  left: .12rem;
  width: auto;
  right: .12rem;
}

.layer[data-name="common-video"] .preview:before {
  transition: none
}

.layer-frm-title {
  display: block;
  position: relative;
  padding: .6rem 0 .37rem;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.layer-frm-title .g-txt {
  font-size: .4rem;
  line-height: .48rem;
  letter-spacing: -.075em;
}

.layer-frm-title:before {
  content: "";
  display: block;
  position: absolute;
  bottom: .03rem;
  left: 50%;
  width: 4.24rem;
  margin-left: -2.12rem;
  height: .31rem;
  background: url(../img/layer-title-line.png) no-repeat center / auto 100%
}

.layer .layer-frm-title .g-txt.emph em,
.layer .layer-preempt-title .g-txt.emph em {
  background: linear-gradient(-181deg, #fff 10%, #fff4c5 15%, #d0ba8f 50%, #a18e67 70%, #8c7b59 95%);
  color: rgba(255, 255, 255, .15);
  -webkit-background-clip: text;
  background-clip: text;
}


.layer[data-name="user-info-check"] .layer-frm-title {
  padding-top: .5rem
}

.layer[data-name="user-info-check"] .layer-frm-title .g-txt {
  font-size: .35rem;
  line-height: .4rem;
  letter-spacing: 0;
}

.layer[data-name="user-info-check"] .layer-frm-subtit {
  font-weight: 700;
}

.layer[data-name="user-info-check"] .banner {
  margin: .06rem 0 .28rem;
  width: 4.29rem;
  margin-left: -.05rem;
  position: relative;
}

.layer[data-name="user-info-check"] .banner>span {
  font-size: .16rem;
  position: absolute;
  right: 0;
  width: 3.56rem;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  line-height: .22rem;
  letter-spacing: -.075em;
  color: #c7c7c7;
  text-shadow: .01rem .01rem .01rem rgba(0, 0, 0, .8)
}

.layer[data-name="user-info-check"] .banner strong {
  color: #f0db88
}

.layer[data-name="new-server-alarm"] .layer-frm-title {
  padding-top: .5rem
}

.layer[data-name="new-server-alarm"] .layer-frm-title .g-txt {
  font-size: .42rem;
  line-height: .44rem;
  letter-spacing: -.04em;
}

.layer[data-name="new-server-alarm"] .layer-frm-title .g-txt em {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 7%, rgba(167, 169, 181, 1) 40%, rgba(97, 97, 95, 1) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.layer[data-name="new-server-alarm"] .layer-frm-content {
  width: 4.34rem
}

.layer[data-name="new-server-alarm"] .layer-frm-content>form {
  min-height: 1.2rem;
  padding-top: 0;
}

.layer[data-name="new-server-alarm"] .layer-frm-content .frm-check-list {
  padding: .1rem 0
}

.layer[data-name="new-server-alarm"] .layer-frm-subtit {
  font-weight: 600;
  font-size: .18rem;
  letter-spacing: -.025em;
}

.layer-frm-subtit {
  display: block;
  text-align: center;
  font-weight: 400;
  font-size: .2rem;
  line-height: .26rem;
  color: #b5200f;
  letter-spacing: -.025em;
  text-shadow: 0 .01rem .02rem rgba(0, 0, 0, 1)
}

.layer-frm-content {
  width: 4.2rem;
  margin: 0 auto;
  position: relative
}

.layer-frm-content>form {
  display: flex;
  width: 100%;
  min-height: 1.42rem;
  flex-direction: column;
  align-items: center;
  padding-top: .1rem;
}

.layer-frm-content>form:before,
.layer-frm-content>form:after {
  content: "";
  display: block;
  flex: 1;
}

.layer-frm-content>form>* {
  flex: none
}

.layer-frm-content .frm-check-list {
  width: 3.84rem;
  margin: 0 auto;
  text-align: left;
  height: 1.24rem;
  padding: 0;
}

.layer-frm-content .frm-check-list label {
  color: #fff
}

.layer-frm-content .frm-block {
  height: .43rem;
  padding: .08rem 0 .06rem;
  margin: 0;
}

.layer-frm-content .auth-btn {
  width: 1.04rem;
  height: auto;
  position: absolute;
  right: 0;
  top: .11rem
}

.layer-frm-content .auth-btn .g-txt {
  margin: .09rem 0 .07rem
}




.layer-terms-title {
  display: block;
  position: relative;
  padding: .36rem 0 .03rem;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  font-size: .32rem;
  line-height: .44rem;
  letter-spacing: -.075em;
}

.layer-terms-title:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4.2rem;
  margin-left: -2.1rem;
  height: .03rem;
  background: url(../img/layer-terms-title-line.jpg) repeat-x center / auto 100%;
}

.layer .layer-terms-title {
  padding: .06rem 0 .1rem;
  font-size: .32rem;
  line-height: .36rem;
  margin-top: .3rem;
}

.layer .terms-detail+.layer-terms-title {
  margin-top: 0
}

.layer .terms-detail {
  width: 4.8rem;
  height: auto;
  padding: .14rem 0 .12rem;
  margin: 0 auto;
  left: auto;
  text-align: center;
}

.layer .terms-detail .dot {
  text-align: left;
  font-size: .12rem;
  line-height: .18rem
}

.layer .terms-detail .dot:before {
  top: .05rem
}

.layer .terms-detail table {
  width: 100%;
  box-sizing: border-box;
  border: .01rem solid #484848;
  border-radius: .02rem;
  border-collapse: collapse;
  margin: .03rem auto .05rem;
  table-layout: fixed;
}

.layer .terms-detail table tr th {
  background: rgba(60, 60, 60, .5);
  border-right: .01rem solid #484848;
  width: 1.35rem;
}

.layer .terms-detail table tr th,
.layer .terms-detail table tr td {
  border-top: .01rem solid #484848;
  font-size: .14rem;
  line-height: .18rem;
  letter-spacing: -.04em;
  font-weight: 200;
  vertical-align: middle;
  padding: .04rem 0 .02rem;
  min-height: .3rem
}

.layer .terms-detail table strong {
  font-size: .19rem;
  line-height: .24rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: inherit;
}

.layer .terms-detail table tr:first-child th,
.layer .terms-detail table tr:first-child td {
  border-top: 0 none
}


.layer[data-name="event-g80"] {
  width: 6.22rem
}

.layer[data-name="event-g80"] .terms-detail {
  width: 5.4rem;
  padding: .1rem 0 0 .12rem
}

.layer[data-name="event-g80"] .layer-terms-title {
  margin-top: .32rem;
  padding: 0 0 .12rem;
}

.layer[data-name="event-g80"] .terms-detail p {
  font-size: .14rem;
  letter-spacing: -.025em;
  line-height: .2rem;
  text-align: left;
  word-wrap: break-word;
  word-break: keep-all;
}

.layer[data-name="event-g80"] .warning {
  font-weight: 600;
  color: #ff3939
}


.terms-detail {
  font-weight: 400;
  line-height: .2rem;
  word-wrap: break-word;
  word-break: keep-all;
  font-size: .15rem;
  letter-spacing: -.05em;
  display: block;
  width: 4.4rem;
  height: 3.7rem;
  text-align: left;
  margin: .12rem auto 0;
  position: relative;
  left: .1rem;
  color: rgba(255, 255, 255, .9)
}

.layer[data-name="terms-event"] .terms-detail {
  margin-top: .22rem
}

.terms-detail .blank {
  display: block;
  height: .1rem
}

.terms-detail p {
  display: block;
  position: relative;
  font: inherit;
}

.terms-detail p.dot {
  padding-left: .12rem;
}

.terms-detail p.dot:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: .05rem;
  height: .05rem;
  background: #fff;
  top: .07rem;
}

.terms-detail p>span {
  display: block;
  position: relative;
  font: inherit;
  padding-left: .18rem;
}

.terms-detail p i {
  position: absolute;
  top: 0;
  left: 0;
  font: inherit;
}

.terms-detail p i.bracket:after {
  content: ")";
  display: inline;
}

.terms-detail strong {
  color: #c3ad7d
}


.layer-preempt-title {
  display: block;
  position: relative;
  padding: .6rem 0 .2rem;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.layer-preempt-title.long {
  padding: .36rem 0 .2rem;
}

.layer-preempt-title .g-txt {
  font-size: .42rem;
  line-height: .48rem;
  letter-spacing: -.075em;
}

.layer-preempt-title .g-txt.emph em {
  background: linear-gradient(-181deg, #fff9bc 25%, #b4903a 45%, #7b5c17 50%, #eac478 95%);
  color: rgba(255, 240, 148, .25);
  -webkit-background-clip: text;
  background-clip: text;
}

.layer-preempt-title.long .g-txt {
  font-size: .34rem;
  line-height: .4rem;
}

.layer-preempt-title:before {
  content: "";
  display: block;
  position: absolute;
  bottom: -.05rem;
  left: 50%;
  width: 4.24rem;
  margin-left: -2.12rem;
  height: .31rem;
  background: url(../img/layer-title-line.png) no-repeat center / auto 100%
}

.layer-banner {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.layer-banner>img {
  transform: scale(1);
  transition: transform .15s
}

.layer-banner:active img {
  transform: scale(.98)
}


.layer .preempted-options {
  display: flex;
  align-items: stretch;
  width: 4.54rem;
  margin: 0 auto .12rem;
  margin-top: .2rem;
  gap: .01rem;
  position: relative;
  z-index: 5
}

.layer .preempted-info .preempted-options {
  flex-direction: column;
  gap: .08rem;
  height: 100%;
  flex: 1;
  margin: 0;
}

.layer .preempted-info .preempted-options:before,
.layer .preempted-info .preempted-options:after {
  content: "";
  display: block;
  flex: 1;
}

.layer .preempted-options>li {
  flex: 1;
}

.layer .preempted-options .item-name,
.layer .preempted-options .item-value {
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 0;
}

.layer .preempted-options .item-name {
  color: #fff;
  background: #423026;
  font-weight: 700;
  font-size: .18rem;
  line-height: .23rem;
  padding: .05rem 0;
  overflow: visible;
  text-shadow: .01rem .01rem .01rem rgba(0, 0, 0, .5)
}

.layer .preempted-options button.item-name {
  position: relative;
  width: 100%;
}

.layer .preempted-options button.item-name i {
  position: absolute;
  width: .19rem;
  height: .11rem;
  top: 50%;
  transform: translateY(-50%);
  right: .18rem;
}

.layer .preempted-options button.item-name i img {
  position: absolute;
  width: .6rem;
  left: -10%;
  bottom: 75%;
}

.layer .preempted-options button.item-name i span {
  position: absolute;
  width: .6rem;
  left: -20%;
  bottom: 225%;
  text-shadow: none;
  color: #aa2415;
  font-size: .19rem;
  font-weight: 900;
  letter-spacing: -.025em;
  text-align: center;
  line-height: .25rem;
}

.layer .preempted-options .item-name i:before,
.layer .preempted-options .item-name i:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotateX(0deg);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform .15s
}

.layer .preempted-options .item-name i:before {
  background: #000;
  filter: blur(.03rem);
  right: 0;
  top: .01rem;
}

.layer .preempted-options .item-name i:after {
  top: 0;
  right: .01rem;
  background: #938987
}

.layer .preempted-options button.item-name+.item-value>em {
  opacity: 0;
  transition: opacity .15s
}

.layer .preempted-options li.public button.item-name+.item-value>em {
  opacity: 1;
}

.layer .preempted-options li.public .item-name i:before,
.layer .preempted-options li.public .item-name i:after {
  transform: rotateX(180deg);
}

.layer .preempted-options .item-value {
  color: #000;
  background: #e5e5e5;
  font-weight: 700;
  font-size: .2rem;
  line-height: .27rem;
  padding: .08rem 0;
  margin-top: .01rem;
}

.layer .preempted-options .item-value>em {
  font: inherit;
  display: inline
}

.layer .preempted-info {
  display: flex;
  gap: .14rem;
  width: 4.76rem;
  margin: 0 auto;
  height: 3.5rem;
  align-items: center;
  margin-bottom: .15rem;
}

.layer[data-name="preempt-complete"] .preempted-options .item-name {
  font-size: .16rem;
  line-height: .2rem;
  padding: .03rem 0 .04rem;
}

.layer[data-name="preempt-complete"] .preempted-options .item-value {
  font-size: .23rem;
  line-height: .3rem;
  letter-spacing: -.05em;
  padding: 0 0 .02rem;
  margin: 0;
}

.layer[data-name="join-complete"] .layer-preempt-title {
  padding-top: .5rem
}

.layer[data-name="join-complete"] .layer-preempt-title .g-txt {
  font-size: .36rem
}

.layer[data-name="join-complete"] .preempted-options {
  margin: 0 auto;
  padding: .22rem 0 .14rem;
  width: 2.9rem
}

.layer[data-name="join-complete"] .preempted-options button.item-name i {
  right: 22%
}

.layer[data-name="join-complete"] .preempt-notice {
  font-size: .16rem;
  line-height: .2rem;
  font-weight: 600
}

.layer .classes-preview {
  position: relative;
  width: 4.7rem;
  margin: .22rem auto;
  height: auto;
}

.layer .classes-preview:before,
.layer .classes-preview:after {
  content: "";
  display: block;
  width: .4rem;
  height: .4rem;
  z-index: 3;
  position: absolute;
  background: url(../img/layer-preempt-complete-clip.png) no-repeat center / contain;
}

.layer .classes-preview:before {
  left: 0;
  top: 0;
  transform: translate(-35%, -35%) rotate(180deg)
}

.layer .classes-preview:after {
  right: 0;
  bottom: 0;
  transform: translate(35%, 35%) rotate(0deg)
}


.layer .preempted-info .class-card {
  flex: none;
  width: 2.14rem;
  position: relative;
  overflow: visible;
}

.layer .preempted-info .class-card:before,
.layer .preempted-info .class-card:after {
  content: "";
  display: block;
  width: .4rem;
  height: .4rem;
  z-index: 3;
  position: absolute;
  background: url(../img/layer-preempt-complete-clip.png) no-repeat center / contain;
}

.layer .preempted-info .class-card:before {
  left: 0;
  top: 0;
  transform: translate(-35%, -35%) rotate(180deg)
}

.layer .preempted-info .class-card:after {
  right: 0;
  bottom: 0;
  transform: translate(35%, 35%) rotate(0deg)
}

.layer .preempted-info .class-card .visual {
  border-radius: .02rem;
  overflow: hidden;
  box-shadow: .01rem .01rem 0 #040000
}

.layer .preempt-notice {
  display: block;
  text-align: center;
  color: #fff;
  font-size: .18rem;
  line-height: .22rem;
  letter-spacing: -.025em;
  font-weight: 400;
}

.layer .preempt-notice strong {
  font-weight: 800;
  color: #b71f0e
}

.layer .preempt-notice small {
  display: block;
  font-size: .16rem;
  line-height: .2rem;
  padding: .15rem 0 0;
}

.layer .preempt-notice small+small {
  padding: .06rem;
}

.layer.confirm .layer-buttons button {
  width: 1.8rem;
}

.layer.confirm .layer-buttons button+button {
  margin-left: .05rem;
}


.layer .swiper-container {
  width: 100%;
  overflow: hidden;
}

.layer .swiper-container .swiper-button-prev,
.layer .swiper-container .swiper-button-next {
  width: .64rem;
  height: .64rem
}


.layer .swiper-container .swiper-button-next:before,
.layer .swiper-container .swiper-button-prev:before {
  background-image: url(../img/layer-arrow-off.png)
}

.layer .swiper-container .swiper-button-next:after,
.layer .swiper-container .swiper-button-prev:after {
  background-image: url(../img/layer-arrow-on.png)
}

.reward-tb {
  display: block;
  margin: 0 auto;
  width: 4.2rem;
  box-sizing: border-box;
  border: .01rem solid #494949;
  border-radius: .02rem
}

.reward-tb .row {
  display: flex;
  align-items: stretch;
  position: relative;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  box-sizing: border-box;
  border-top: .01rem solid #494949;
}

.reward-tb .row:first-child {
  border-top: 0 none
}

.reward-tb .row.tit {
  background-color: rgba(60, 60, 60, .5);
}

.reward-tb .row.view {
  background-color: rgba(0, 0, 0, .5);
}


.reward-tb .row>div {
  flex: 1;
  position: relative;
  z-index: 1;
  text-align: center;
  padding: .09rem 0 .07rem;
  word-wrap: break-word;
  word-break: keep-all;
  color: #fff;
  letter-spacing: -.025em;
  font-weight: 400;
  font-size: .15rem;
  line-height: .16rem;
}

.reward-tb .row>div .date {
  padding: .02rem 0 .07rem;
  word-wrap: break-word;
  word-break: keep-all;
  color: #fff;
  letter-spacing: -.025em;
  font-weight: 400;
  font-size: .15rem;
  line-height: .16rem;
  border-bottom: .01rem solid #494949;
  margin-bottom: .07rem
}

.reward-tb .row>div p+.date {
  border-top: .01rem solid #494949;
  padding-top: .09rem;
  margin-top: .07rem
}


.reward-tb .row>div:first-child {
  flex: 1
}

.reward-tb .row>div:before,
.reward-tb .row>div:after {
  content: "";
  display: block;
}

.reward-tb .row>div * {
  font: inherit;
  letter-spacing: inherit;
}

.reward-tb .row>div+div {
  border-left: .01rem solid #494949
}

.reward-tb .row>div strong {
  font-weight: 700;
}

.reward-tb .row.view>div {
  padding: 0
}

.reward-tb .row.tit>div {
  font-size: .17rem;
  line-height: .19rem;
  padding-top: .08rem
}

.reward-tb .row.tit>div strong {
  font-weight: 700;
  font-size: .19rem;
  line-height: .23rem
}

.reward-tb .row>div p {
  display: block;
  text-align: left;
  font-size: .13rem;
  line-height: .2rem;
  padding-left: .18rem;
  letter-spacing: -.075em;
  position: relative;
  max-width: 3rem;
  white-space: nowrap;
  width: 100%;
  margin: 0 auto;
  color: #d5d5d5;
}

.reward-tb .row>div p:before {
  content: "";
  display: block;
  width: .4em;
  height: .4em;
  background: #d5d5d5;
  position: absolute;
  left: .09rem;
  top: 40%;
  transform: translateY(-50%);
}


.layer.benefit {
  width: 13.24rem;
}

.layer.benefit .layer-body {
  z-index: 1;
}

.layer.benefit .layer-body:before,
.layer.benefit .layer-body:after,
.layer.benefit .layer-frm-title:before {
  display: none;
}

.layer.benefit .swiper-button-prev {
  left: .4rem;
}

.layer.benefit .swiper-button-next {
  right: .4rem;
}

.layer.benefit .layer-frm-title {
  padding: 0 0 .12rem;
  margin: 0;
}

.layer.benefit .layer-frm-title .g-txt {
  font-size: .43rem;
  line-height: .48rem;
  letter-spacing: -.075em;
  font-weight: 600;
}

.layer.benefit .layer-frm-title .g-txt em {
  background: linear-gradient(-181deg, #ffffff 0%, #eeeeee 15%, #b9b8b9 55%, #85847f 80%, #b1b0a8 95%);
  -webkit-background-clip: text;
  background-clip: text;
}

.layer.benefit .event-title {
  display: block;
  margin: 0 auto;
  position: relative;
  padding-bottom: .4rem;
  width: 100%;
  text-align: center;
}

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

.layer.benefit .event-title>img {
  display: block;
  width: auto;
  object-fit: contain;
  margin: 0 auto;
  height: 1.02rem;
}


.layer.benefit .event-title .g-txt {
  font-size: .3rem;
  line-height: .35rem;
  margin: .15rem 0 -.15rem
}

.layer.benefit .event-title .g-txt em {
  background: linear-gradient(-180deg, #fffff4 10%, #ffffdc 45%, #ede487 50%, #ede480 95%);
  -webkit-background-clip: text;
  background-clip: text;
}

.layer.benefit .event-period {
  opacity: 1;
  transform: none;
  transition: none;
  color: #edd079;
  font-size: .21rem;
  letter-spacing: -.025em;
  line-height: .28rem;
  padding: .04rem 0;
  margin: .05rem auto 0;
  font-family: 'Nanum Gothic';
  width: 7.2rem;
  text-align: center;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 15%, rgba(0, 0, 0, .6) 85%, rgba(0, 0, 0, 0) 100%);
}

.layer.benefit .event-desc {
  font-size: .22rem;
  line-height: .31rem;
  color: #e4e3e3;
  text-align: center;
  letter-spacing: -.05em;
  font-weight: 500;
}

.layer.benefit .event-desc small {
  font-size: .18rem;
  color: #b1b1b1;
}

.layer.benefit .event-desc strong {
  color: #edd079;
}

.layer.benefit .weekly-tb {
  margin-top: .18rem;
}

.layer.benefit .weekly-tb .head {
  height: .44rem;
}

.layer.benefit .weekly-tb+.event-title {
  margin-top: .36rem;
}

.layer.benefit .swiper-slide.mid {
  height: 8.44rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.layer.benefit .swiper-slide.mid:before,
.layer.benefit .swiper-slide.mid:after {
  content: "";
  display: block;
  flex: 1;
}

.layer.benefit .swiper-slide.mid>* {
  flex: none;
}

.layer[data-name="register-rewards"] {
  width: 5.72rem;
}

.layer[data-name="register-rewards"] .swiper-button-prev,
.layer[data-name="register-rewards"] .swiper-button-next {
  width: .52rem
}

.layer[data-name="register-rewards"] .swiper-button-prev {
  left: .2rem
}

.layer[data-name="register-rewards"] .swiper-button-next {
  right: .2rem
}

.layer[data-name="register-rewards"] .layer-frm-title {
  padding: .32rem 0 .32rem
}

.layer[data-name="register-rewards"] .layer-frm-title .g-txt {
  font-size: .37rem;
  line-height: .4rem;
}


.layer[data-name="register-rewards"] .swiper-container {
  width: 100%;
  height: 4.44rem;
  overflow: hidden;
}

.layer[data-name="comeback-benefit"] .layer-frm-title .g-txt {
  font-size: .62rem;
  line-height: .65rem;
}

.layer[data-name="comeback-benefit"] .event-title>img {
  height: 1.2rem
}

.layer[data-name="comeback-benefit"] .weekly-tb .head {
  height: .52rem
}

.layer[data-name="comeback-benefit"] .weekly-tb .col {
  width: 1.56rem;
  height: 1.72rem
}

.layer[data-name="comeback-benefit"] .weekly-tb .head span {
  font-size: .21rem;
  line-height: .24rem;
}

.layer[data-name="comeback-benefit"] .weekly-tb .body span {
  font-size: .19rem;
  line-height: .25rem;
}

.layer[data-name="comeback-benefit"] .event-desc {
  padding: .08rem 0;
}

.layer[data-name="update-event"] .event-desc {
  padding: .12rem 0;
}

.layer[data-name="update-event"] .event-period {
  margin-bottom: .3rem;
}

.weekly-tb {
  display: block;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  width: fit-content;
  height: auto;
  border: .02rem solid #554b3f;
  padding: .04rem;
  margin-top: .32rem;
}

.weekly-tb:before,
.weekly-tb:after {
  content: "";
  display: block;
  position: absolute;
  mix-blend-mode: color-dodge;
  mix-blend-mode: plus-lighter;
  opacity: .7;
  width: .63rem;
  height: .54rem;
  background: url(../img/layer-weekly-tb-light.png) no-repeat center/contain;
}

.weekly-tb:before {
  left: -.05rem;
  top: -.05rem
}

.weekly-tb:after {
  transform: rotateX(180deg) rotateY(180deg);
  right: -.05rem;
  bottom: -.05rem
}

.weekly-tb+.weekly-tb {
  margin-top: .2rem
}

.weekly-tb .row {
  position: relative;
  width: fit-content;
  box-sizing: border-box;
  border: .01rem solid rgba(161, 142, 117, .35);
}

.weekly-tb .col {
  height: 1.5rem;
  width: 1.36rem;
  display: inline-flex;
  flex-direction: column;
}

.weekly-tb .col+.col {
  border: .01rem solid rgba(161, 142, 117, .35);
}

.weekly-tb .head,
.weekly-tb .body {
  position: relative;
  text-align: center;
}

.weekly-tb .head>span,
.weekly-tb .body>span {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
  z-index: 1;
}

.weekly-tb .body>span {
  top: 54%;
  left: -.02rem;
  width: calc(100% + .04rem);
}

.weekly-tb .head>span {
  top: 48%;
  left: 0;
  width: 100%;
}

.weekly-tb .head:before,
.weekly-tb .body:before {
  z-index: -1;
  content: "";
  display: block;
  position: relative;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
}

.weekly-tb .body:after {
  content: "";
  display: block;
  position: relative;
  position: absolute;
  left: 0;
  top: -.1rem;
  width: 100%;
  height: .2rem;
  background: url(../img/layer-weekly-tb-line.png) no-repeat center / auto 100%;
}

.weekly-tb .head {
  flex: none;
  height: .48rem;
}

.weekly-tb .head span {
  font-size: .19rem;
  line-height: .21rem;
  letter-spacing: -.035em;
}

.weekly-tb .head span em {
  background: linear-gradient(-181deg, #ddd0ba 25%, #debc96 45%, #cea76a 50%, #d9af77 95%);
  color: rgba(229, 210, 184, .25);
  -webkit-background-clip: text;
  background-clip: text;
}

.weekly-tb .head:before {
  opacity: .6;
  background: rgba(45, 25, 2, 1)
}

.weekly-tb .blue .head:before {
  opacity: .5;
  background: rgba(20, 142, 193, 1);
  box-shadow: inset 0 0 .16rem rgba(74, 175, 213, .5);
}

.weekly-tb .gold .head:before {
  opacity: .6;
  background: rgba(172, 101, 0, 1);
  box-shadow: inset 0 0 .12rem rgba(220, 210, 104, .4);
}

.weekly-tb .coper .head:before {
  opacity: .6;
  background: rgba(255, 121, 42, 1);
  box-shadow: inset 0 0 .12rem rgba(220, 210, 104, .45);
}

.weekly-tb .purple .head:before {
  opacity: .5;
  background: rgba(119, 46, 194, 1);
  box-shadow: inset 0 0 .12rem rgba(17, 39, 48, .52);
}

.weekly-tb .body {
  flex: 1;
}

.weekly-tb .body * {
  font-family: 'Nanum Gothic';
  letter-spacing: -.065em;
  text-shadow: 0 0 .01rem rgba(0, 0, 0, 1), 0 0 .04rem rgba(0, 0, 0, 1);
}

.weekly-tb .body span {
  color: #c7c7c7;
  font-size: .17rem;
  line-height: .22rem;
}

.weekly-tb .blue .body:before {
  opacity: .35;
  background: rgba(44, 97, 106, 1);
  box-shadow: inset 0 0 .17rem rgba(121, 200, 230, .65);
}

.weekly-tb .blue .body span {
  color: #0bc8ff
}

.weekly-tb .gold .body:before {
  opacity: .45;
  background: rgba(87, 69, 25, 1);
  box-shadow: inset 0 0 .15rem rgba(220, 210, 104, .45);
}

.weekly-tb .gold .body span {
  color: #ffba00
}

.weekly-tb .coper .body:before {
  opacity: .2;
  background: rgba(255, 121, 42, 1);
  box-shadow: inset 0 0 .15rem rgba(220, 210, 104, .45);
}

.weekly-tb .coper .body span {
  color: #ff9353
}

.weekly-tb .purple .body:before {
  opacity: .35;
  background: rgba(119, 46, 194, 1);
  box-shadow: inset 0 0 .15rem rgba(17, 39, 48, .64);
}

.weekly-tb .purple .body span {
  color: #d5acff
}

.weekly-tb .body span small {
  color: #cf5651;
  display: block;
  font-size: .14rem;
  line-height: .15rem;
  margin-top: .02rem;
}


/* class-debut-layer */
.class-debut-layer {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  min-width: 960px;
  height: 100%;
  background-color: #000;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: clip-path .35s ease-out;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

.class-debut-layer.visible {
  pointer-events: fill;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.class-debut-layer .content {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0 auto;
}

.class-debut-layer .content>div {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.class-debut-layer .class-visual {
  left: 0;
  width: 100%;
}

.class-debut-layer .class-info {
  left: 50%;
  width: 8rem;
  box-sizing: border-box;
  padding-left: .64rem
}


.class-debut-layer .class-visual:before {
  content: "";
  display: block;
  flex: 1
}

.class-debut-layer .avatar {
  flex: none;
  height: min(12.8rem, 100vh);
  width: 12.8rem;
  position: relative;
}

.class-debut-layer .gradient-shadow {
  flex: 1;
  width: 100%;
}

.class-debut-layer .gradient-shadow:before {
  height: 300%;
}

.class-debut-layer .avatar img {
  position: absolute;
  width: auto;
  height: 100%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.class-debut-layer .class-info>p {
  width: 100%
}

.class-debut-layer .class-info .desc {
  font-size: .22rem;
  letter-spacing: -.05em;
  height: auto;
  padding-top: .28rem
}

.class-debut-layer .class-info .stit {
  padding-top: .6rem;
}

.class-debut-layer .class-info .stit .g-txt {
  font-size: .39rem;
  letter-spacing: -.075em;
  line-height: .5rem;
}

.class-debut-layer .class-info .name {
  padding-bottom: .25rem;
}

.class-debut-layer .class-info .name:before {
  background-image: url(../img/detail-debut-title-line.png);
  height: .39rem;
  width: 100%;
  background-size: auto .39rem
}

.class-debut-layer .class-info .name span.g-txt {
  font-size: .97rem;
  line-height: 1rem;
  letter-spacing: -.04em;
  margin: .12rem 0;
}

.class-debut-layer .class-info .name small.g-txt {
  font-size: .52rem;
  line-height: .72rem;
  letter-spacing: 0;
  margin: .04rem 0
}

.class-debut-layer .class-info .name span.g-txt em {
  background: linear-gradient(-181deg, #fdfbc7 0%, #ffffa0 .3em, #f7db73 10%, #e5c568 50%, #cba658 55%, #ba934d 75%, #bba378 95%);
  -webkit-background-clip: text;
  background-clip: text;
}

.class-debut-layer .class-info .name small.g-txt em {
  background: linear-gradient(-181deg, #fdfbc7 0%, #ffffa0 .5em, #f7db73 10%, #e5c568 50%, #cba658 55%, #ba934d 75%, #bba378 95%);
  -webkit-background-clip: text;
  background-clip: text;
}

.class-debut-layer .close-btn {
  position: absolute;
  width: .64rem;
  height: .64rem;
  top: .88rem;
  right: .32rem;
  transform: scale(1);
  transition: transform .25s ease-out;
  z-index: 1;
}

.class-debut-layer .close-btn:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top: .01rem;
  background: url(../img/ic-close-shadow.png) no-repeat center / contain;
  z-index: -1;
  filter: blur(.01rem)
}

.class-debut-layer .close-btn:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
  background: url(../img/ic-close-on.png) no-repeat center / contain;
  z-index: 1;
  opacity: 0;
  transition: opacity .25s ease-out
}

.class-debut-layer .close-btn:hover:after {
  opacity: 1;
}

.class-debut-layer .close-btn:active {
  transform: scale(.84);
  transition-duration: .15s;
}

#logueDebut {
  background-image: url(../img/detail-debut-rogue-bg.jpg)
}

#logueDebut .avatar img {
  left: 28.125%;
}



/* detail-page */
.detail-page {
  position: fixed;
  pointer-events: fill;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  min-width: 960px;
  height: 100%;
  overflow: hidden;
  transition: clip-path .35s ease-out;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  background: #000;
}

.detail-view .detail-page {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.detail-page .page {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - .62rem);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.detail-view .detail-page .page {
  transition: all .45s ease-out;
}

.detail-page .page.visible {
  opacity: 1;
  pointer-events: fill;
}


.detail-page .page.class {
  background-image: url(../img/detail-class-bg.jpg)
}

.particles {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 100vh);
  height: max(100%, 100vh);
  mix-blend-mode: screen;
  z-index: -1
}

.feature-grid {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: stretch;
}

.feature-grid>.line {
  flex: none;
  position: relative;
  width: 0;
}

.feature-grid>.line:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: .4rem;
  width: .025rem;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #e3d397 40%, #e3d397 60%, rgba(0, 0, 0, 0) 100%)
}

.feature-grid .feature-item {
  flex: 1;
  overflow: hidden;
  position: relative;
  transition: flex .35s
}

.feature-grid .feature-item>img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  filter: saturate(35%) brightness(35%);
  transition: filter .5s ease-out
}

.feature-grid .feature-item:hover {
  flex: 2.8
}

.feature-grid .feature-item:hover>img {
  filter: saturate(100%) brightness(100%);
}

.feature-grid .feature-item:hover .particles {
  z-index: 1
}


.feature-item .default-title {
  position: absolute;
  left: 0;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: -.075em;
  white-space: nowrap;
  line-height: .64rem;
  color: #88775b;
  padding: .33rem 0;
  text-shadow: 0 0 .08rem rgba(0, 0, 0, 1);
  background: url(../img/detail-feature-title-line.png) no-repeat center bottom / auto .33rem;
  transition: all .4s ease-out;
}

.feature-item .hover-content {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  padding: .68rem 0;
  transition: all .4s ease-out
}

.feature-item .hover-content:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: 10.8rem;
  width: 100%;
  background: linear-gradient(35deg, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 0) 50%);
}

.feature-item .hover-content .title {
  padding-left: .64rem;
  position: relative;
  padding-bottom: .26rem;
}

.feature-item .hover-content .title:before {
  content: "";
  display: block;
  position: absolute;
  left: .56rem;
  width: 4.5rem;
  height: .39rem;
  bottom: -.05rem;
  background: url(../img/detail-class-title-line.png) no-repeat left center / auto 100%;
}

.feature-item .hover-content .dc {
  font-size: .24rem;
  line-height: .36rem;
  letter-spacing: -.05em;
  padding-left: .64rem;
  text-shadow: 0 .01rem .07rem rgba(0, 0, 0, 1);
}

.feature-item .hover-content .title {
  opacity: 0;
  transform: translateY(.25rem);
  transition: all .65s ease-out;
}

.feature-item .hover-content .dc>span {
  opacity: 0;
  transform: translateY(.1rem);
  transition: all .55s ease-out;
}

.feature-item .hover-content .dc strong {
  color: #ff3636;
  font-weight: 700;
}

.feature-item .hover-content .dc>span {
  display: block
}

.feature-item .hover-content .title .g-txt {
  font-size: .8rem;
  line-height: .96rem;
  letter-spacing: -.075em;
  font-weight: 700
}

.feature-item:hover .default-title {
  opacity: 0;
  transform: translateY(-50%) rotateX(-90deg);
}

.feature-item:hover .hover-content {
  opacity: 1;
  pointer-events: fill
}

.feature-item:hover .hover-content .title,
.feature-item:hover .hover-content .dc>span {
  opacity: 1;
  transform: translateY(0);
}

.feature-item:hover .hover-content .title {
  transition-delay: .35s
}

.feature-item:hover .hover-content .dc .line-1 {
  transition-delay: .55s
}

.feature-item:hover .hover-content .dc .line-2 {
  transition-delay: .7s
}

.feature-item:hover .hover-content .dc .line-3 {
  transition-delay: .8s
}




.page.class .swiper-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.page.class .swiper-slide * {
  pointer-events: none
}

.page.class .swiper-slide.swiper-slide-active * {
  pointer-events: fill
}

.page.class .swiper-pagination {
  position: absolute;
  left: 5.75%;
  top: 50%;
  bottom: auto;
  transform: translate(-100%, -50%);
  width: 1.48rem;
  opacity: 0;
  transition: all .45s ease-out;
}

.page.class.visible .swiper-pagination {
  opacity: 1;
  transform: translate(-50%, -50%);
  transition-delay: .45s;
}

.page.class .swiper-pagination-bullet {
  width: 100%;
  display: block;
  margin: 0;
  height: auto;
  position: relative;
  padding: 0;
  border-radius: 0;
  opacity: .5;
  background: none;
  outline: none;
  transition: opacity .15s
}

.page.class .swiper-pagination-bullet+.swiper-pagination-bullet {
  margin-top: .05rem;
}

.page.class .swiper-pagination-bullet:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.page.class .swiper-pagination-bullet .square,
.page.class .swiper-pagination-bullet .square:before,
.page.class .swiper-pagination-bullet .square:after {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.page.class .swiper-pagination-bullet .square {
  width: .81rem;
  height: .81rem;
  border: .01rem solid #474747;
  background: #30271a;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-45deg);
  transition: transform .35s .15s, opacity .15s
}

.page.class .swiper-pagination-bullet .square:before,
.page.class .swiper-pagination-bullet .square:after {
  content: "";
  display: block;
}

.page.class .swiper-pagination-bullet .square:before {
  width: .71rem;
  height: .71rem;
  background: #1d160d;
}

.page.class .swiper-pagination-bullet .square:after {
  width: .75rem;
  height: .75rem;
  background: url(../img/detail-class-ic-deco.jpg) no-repeat center / cover;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform .35s .15s
}

.page.class .swiper-pagination-bullet.swiper-pagination-bullet-active .square {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 1;
}

.page.class .swiper-pagination-bullet.swiper-pagination-bullet-active .square:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.page.class .swiper-pagination-bullet .icon,
.page.class .swiper-pagination-bullet .icon::before {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain
}

.page.class .swiper-pagination-bullet .icon:before,
.page.class .swiper-pagination-bullet .icon:after {
  content: "";
  display: block;
  opacity: 0;
  transition: opacity .25s ease-out
}

.page.class .swiper-pagination-bullet .icon:after {
  position: absolute;
  left: 20.5%;
  top: 19.5%;
  width: 40%;
  height: 40%;
  mix-blend-mode: color-dodge;
  mix-blend-mode: plus-lighter;
  transition: opacity .15s .2s ease-out;
  background: url(../img/detail-class-ic-light.png) no-repeat center / contain
}

.page.class .swiper-pagination-bullet:hover,
.page.class .swiper-pagination-bullet.swiper-pagination-bullet-active,
.page.class .swiper-pagination-bullet.swiper-pagination-bullet-active .icon:before,
.page.class .swiper-pagination-bullet.swiper-pagination-bullet-active .icon:after {
  opacity: 1;
}

.page.class .swiper-pagination-bullet .icon.archer {
  background-image: url(../img/detail-class-ic-anniv1-archer-off.png);
}

.page.class .swiper-pagination-bullet .icon.archer:before {
  background-image: url(../img/detail-class-ic-anniv1-archer-on.png);
}

.page.class .swiper-pagination-bullet .icon.warrior {
  background-image: url(../img/detail-class-ic-anniv1-warrior-off.png);
}

.page.class .swiper-pagination-bullet .icon.warrior:before {
  background-image: url(../img/detail-class-ic-anniv1-warrior-on.png);
}

.page.class .swiper-pagination-bullet .icon.sorceress {
  background-image: url(../img/detail-class-ic-anniv1-sorceress-off.png);
}

.page.class .swiper-pagination-bullet .icon.sorceress:before {
  background-image: url(../img/detail-class-ic-anniv1-sorceress-on.png);
}

.page.class .swiper-pagination-bullet .icon.fighter {
  background-image: url(../img/detail-class-ic-anniv1-fighter-off.png);
}

.page.class .swiper-pagination-bullet .icon.fighter:before {
  background-image: url(../img/detail-class-ic-anniv1-fighter-on.png);
}

.page.class .swiper-pagination-bullet .icon.rogue {
  background-image: url(../img/detail-class-ic-anniv1-rogue-off.png);
}

.page.class .swiper-pagination-bullet .icon.rogue:before {
  background-image: url(../img/detail-class-ic-anniv1-rogue-on.png);
}

.page.class .swiper-pagination-bullet .icon.warlock {
  background-image: url(../img/detail-class-ic-anniv1-warlock-off.png);
}

.page.class .swiper-pagination-bullet .icon.rogue:before {
  background-image: url(../img/detail-class-ic-anniv1-warlock-on.png);
}


.page.class .class-visual {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.page.class .class-visual:before {
  flex: 1;
  display: block;
  content: "";
}

.page.class .class-visual .avatar {
  flex: none;
  height: auto;
  position: relative;
  height: min(14.98rem, 100vh);
  margin-top: 0;
  transform: translateY(.5rem);
  transition: transform .6s ease-out;
}


.page.class .class-visual img {
  position: absolute;
  width: 20.94rem;
  transform: translate(-50%, -50%);
}

.page.class .swiper-slide[data-name="archer"] .class-visual img {
  top: 63%;
  left: 61.45%;
}

.page.class .swiper-slide[data-name="warrior"] .class-visual img {
  top: 63%;
  left: 63.6%;
}

.page.class .swiper-slide[data-name="sorceress"] .class-visual img {
  top: 63%;
  left: 62.7%;
}

.page.class .swiper-slide[data-name="fighter"] .class-visual img {
  top: 60.8%;
  left: 65.42%;
}

.page.class .swiper-slide[data-name="rogue"] .class-visual img {
  top: 63%;
  left: 61.45%;
}

.page.class .swiper-slide[data-name="warlock"] .class-visual img {
  top: 63%;
  left: 44.375%;
}

.page.class .class-info {
  position: absolute;
  left: 8.85%;
  top: 50%;
  margin-left: .88rem;
  padding-bottom: .15rem;
  opacity: 0;
  transform: translateY(-45%);
  transition: all .6s ease-out;
}

.class-info .name {
  padding-bottom: .28rem;
  position: relative;
}

.class-info .name:before {
  content: "";
  display: block;
  position: absolute;
  left: -.08rem;
  width: 4.5rem;
  height: .39rem;
  bottom: 0;
  background: url(../img/detail-class-title-line.png) no-repeat left center / auto 100%;
}

.class-info .name span.g-txt {
  font-size: .8rem;
  line-height: .96rem;
  letter-spacing: -.075em;
  vertical-align: bottom;
}

.class-info .name small.g-txt {
  font-size: .4rem;
  line-height: .48rem;
  margin-left: .05rem;
  vertical-align: bottom;
}

.class-info .desc {
  height: 2.1rem;
  font-size: .24rem;
  letter-spacing: -.025em;
  line-height: .29rem;
  text-shadow: 0 .01rem .07rem rgba(0, 0, 0, 1)
}

.class-info .wp {
  position: relative;
  width: 3.24rem;
  margin-left: -.52rem;
}

.class-info .wp .tit {
  position: absolute;
  left: .52rem;
  top: .14rem;
  width: 100%;
  text-align: left
}

.class-info .wp .tit .g-txt {
  font-size: .29rem;
  line-height: .32rem;
  letter-spacing: -.04em;
}

.class-info .wp .tit .g-txt em {
  background: linear-gradient(-181deg, #faf7f4 0%, #ead7b7 55%, #dbb780 60%, #bdab95 95%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.class-info .wp>div {
  position: absolute;
  top: .62rem;
  text-align: center;
}

.class-info .wp .main {
  width: .66rem;
  left: .55rem;
}

.class-info .wp .secondary {
  width: 1.36rem;
  left: 1.38rem;
}

.class-info .wp>div .ic {
  display: inline-block;
  width: .66rem;
  height: .66rem;
}

.class-info .wp>div .ic+.ic {
  margin-left: .03rem;
}

.class-info .wp>div p {
  display: block;
  font-weight: 700;
  letter-spacing: 0;
  font-size: .15rem;
  line-height: .19rem;
  padding: .03rem 0;
  text-shadow: 0 .01rem 0 rgba(0, 0, 0, .5)
}

.page.class .view-box {
  position: absolute;
  right: 8.85%;
  top: 50%;
  width: 3.32rem;
  opacity: 0;
  transform: translateY(-45%);
  transition: all .6s ease-out;
}

.page.class .view-box:before,
.page.class .view-box:after {
  content: "";
  display: block;
  position: absolute;
  left: -.24rem;
  top: -.22rem;
  right: -.24rem;
  pointer-events: none;
}

.page.class .view-box:before {
  z-index: -1;
  bottom: 0;
  background: #000;
}

.page.class .view-box:after {
  z-index: 3;
  bottom: .44rem;
  background: url(../img/detail-class-vid-frame.png) no-repeat center / 3.6rem auto;
}

.page.class .view-box p {
  text-align: center;
  display: block;
  padding: .2rem 0 .12rem
}

.page.class .view-box p .g-txt {
  font-size: .28rem;
  line-height: .36rem;
  letter-spacing: -.05em;
}

.swiper-slide[data-name="archer"] .view-box .preview {
  background-image: url(../img/detail-class-vid-archer.jpg)
}

.swiper-slide[data-name="warrior"] .view-box .preview {
  background-image: url(../img/detail-class-vid-warrior.jpg)
}

.swiper-slide[data-name="sorceress"] .view-box .preview {
  background-image: url(../img/detail-class-vid-sorceress.jpg)
}

.swiper-slide[data-name="fighter"] .view-box .preview {
  background-image: url(../img/detail-class-vid-fighter.jpg)
}

.swiper-slide[data-name="rogue"] .view-box .preview {
  background-image: url(../img/detail-class-vid-rogue.jpg)
}
.swiper-slide[data-name="warlock"] .view-box .preview {
  background-image: url(../img/detail-class-vid-warlock.png)
}

.page.class .swiper-slide-active .class-visual .avatar {
  transform: translateY(0);
}

.page.class .swiper-slide-active .class-info,
.page.class .swiper-slide-active .view-box {
  transform: translateY(-50%);
  opacity: 1;
  transition-delay: .35s
}

.page.worldlore .fit-cover:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .3);
}

.page.worldlore .swiper-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.page.worldlore .swiper-slide:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background-color: rgba(0, 0, 0, 1);
  opacity: 1;
  transition: opacity .5s ease-out
}

.page.worldlore .swiper-slide.swiper-slide-active:after {
  opacity: 0;
}

.page.worldlore .worldlore-btm-area {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  pointer-events: auto;
  z-index: 1;
}

.page.worldlore .swiper-container:before {
  pointer-events: none;
  content: "";
  display: block;
  height: 6.4rem;
  bottom: 0;
  position: absolute;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, .8) 15%, rgba(0, 0, 0, 0) 100%);
}

.page.worldlore .worldlore-btm-area:after {
  content: "";
  display: block;
  left: 0;
  width: 100%;
  height: .01rem;
  background: #463c32;
  top: .48rem;
  position: absolute;
}

.page.worldlore .worldlore-btm-area .swiper-pagination {
  position: relative;
  margin: 0 auto;
  width: 9.4rem;
  display: flex;
  align-items: stretch;
  height: 1.6rem;
  bottom: auto;
}

.page.worldlore .worldlore-btm-area .swiper-pagination-bullet {
  flex: 1;
  margin: 0;
  padding: .75rem 0 0;
  background: none;
  outline: none;
  display: block;
  position: relative;
  text-align: center;
  border-radius: 0;
  opacity: 1;
  z-index: 1;
  cursor: pointer;
}

.worldlore-btm-area .swiper-pagination-bullet:before,
.worldlore-btm-area .swiper-pagination-bullet:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: .22rem;
  transform: translateX(-50%);
  width: .52rem;
  height: .52rem;
}

.worldlore-btm-area .swiper-pagination-bullet:before {
  background: url(../img/detail-worldlore-pager.png) no-repeat center / contain;
}

.worldlore-btm-area .swiper-pagination-bullet:after {
  background: url(../img/detail-worldlore-pager-on.png) no-repeat center / contain;
  opacity: 0;
  transition: opacity .2s
}

.worldlore-btm-area .swiper-pagination-bullet:hover:after,
.worldlore-btm-area .swiper-pagination-bullet.swiper-pagination-bullet-active:after {
  opacity: 1
}

.worldlore-btm-area .swiper-pagination-bullet .g-txt {
  display: block;
  font-size: .24rem;
  line-height: .32rem;
}

.worldlore-btm-area .swiper-pagination-bullet .g-txt em {
  color: #88775b;
  background: none;
}

.worldlore-btm-area .swiper-pagination-bullet.swiper-pagination-bullet-active .g-txt em {
  background: linear-gradient(-181deg, #faf7f4 0%, #ead7b7 55%, #dbb780 60%, #bdab95 95%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.worldlore-btm-area .swiper-button-prev,
.worldlore-btm-area .swiper-button-next {
  top: .48rem;
  z-index: 1;
  position: absolute;
  margin: 0;
  bottom: auto;
}

.worldlore-btm-area .swiper-button-prev {
  right: 50%;
  margin-right: 5.06rem;
  left: auto;
}

.worldlore-btm-area .swiper-button-next {
  left: 50%;
  margin-left: 5.06rem;
  right: auto;
}

.page.worldlore .play-btn {
  margin-top: -.42rem;
}

.page.worldlore .swiper-slide {
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.page.worldlore .swiper-slide.swiper-slide-active {
  opacity: 1 !important;
  pointer-events: auto;
}

.page.worldlore .swiper-slide:before {
  content: "";
  display: block;
  flex: 1;
  padding-top: 1.6rem
}

.page.worldlore .worldlore-content {
  display: block;
  flex: 1;
  padding: 0 .72rem 1.6rem;
}

.worldlore-content .title {
  padding: .6rem 0 .25rem;
  transform: translateY(.25rem);
  transition: all .65s ease-out
}

.worldlore-content .title .g-txt {
  font-size: .72rem;
  line-height: .9rem;
  letter-spacing: -.075em
}

.worldlore-content .dc {
  font-size: .22rem;
  line-height: .32rem;
  letter-spacing: 0;
  padding-left: .05rem;
  color: #c5ae88;
  text-shadow: 0 .01rem .07rem rgba(0, 0, 0, 1);
}

.worldlore-content .dc>span {
  transform: translateY(.1rem);
  display: block;
  transition: all .55s ease-out
}

.worldlore-content .title,
.worldlore-content .dc>span {
  opacity: 0;
}

.detail-view .page.visible .swiper-slide-active .worldlore-content .title,
.detail-view .page.visible .swiper-slide-active .worldlore-content .dc>span {
  transform: translateY(0);
  opacity: 1;
}

.detail-view .page.visible .swiper-slide-active .worldlore-content .title {
  transition-delay: .4s
}

.detail-view .page.visible .swiper-slide-active .worldlore-content .line-1 {
  transition-delay: .6s
}

.detail-view .page.visible .swiper-slide-active .worldlore-content .line-2 {
  transition-delay: .75s
}

.detail-view .page.visible .swiper-slide-active .worldlore-content .line-3 {
  transition-delay: .85s
}

.play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: .96rem;
  height: .96rem;
  cursor: pointer;
  pointer-events: fill;
  z-index: 10;
}

.play-btn:before,
.play-btn:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: .96rem auto
}

.play-btn:before {
  transform: rotate(360deg);
  transition: transform .35s ease-out;
  background-image: url(../img/media-play-btn.png)
}

.play-btn:after {
  transform: scale(1);
  transition: transform .1s ease-out;
  background-image: url(../img/media-play-arrow.png)
}

.play-btn:hover:before {
  transform: rotate(0deg)
}

.play-btn:active:after {
  transform: scale(.95)
}




.layer[data-name="crossplay-launcher"] {
  background: #fff;
  width: 7.7rem;
  height: 5.3rem;
  border: .01rem solid #c4c4c4;
  color: #000;
}

.launcher-title {
  text-align: center;
  font-size: .21rem;
  letter-spacing: -.05em;
  line-height: .3rem;
  font-weight: 700;
  padding: .32rem 0 .2rem;
}

.launcher-content {
  display: block;
  margin: 0 auto;
  width: 6.96rem;
  box-sizing: border-box;
  background: #e1e1e1;
  padding: .27rem .32rem;
}

.launcher-content>p {
  font-size: .21rem;
  letter-spacing: -.05em;
  font-weight: 700;
  line-height: .27rem;
}

.launcher-content>ul+p {
  padding-top: .2rem
}

.launcher-content>ul {
  padding-top: .14rem;
  margin-left: -.15rem;
}

.launcher-content>ul>li {
  padding-left: .15rem;
  line-height: .25rem;
  font-size: .17rem;
  letter-spacing: -.05em;
  font-weight: 500;
  position: relative;
}

.launcher-content>ul>li:before {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  width: .04rem;
  height: .04rem;
  border-radius: 100%;
  background: #000;
  top: .125rem;
  transform: translateY(-50%);
}

.launcher-close-btn {
  position: absolute;
  right: .08rem;
  top: .08rem;
  width: .4rem;
  height: auto;
  padding: .12rem 0;
  pointer-events: fill;
  transition: all .15s
}

.launcher-close-ic {
  display: block;
  width: .16rem;
  height: .16rem;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  transform: scale(1);
}

.launcher-close-btn:hover .launcher-close-ic {
  transform: scale(1.15);
}

.launcher-close-btn:active .launcher-close-ic {
  transform: scale(.95);
}

.launcher-close-ic:before,
.launcher-close-ic:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: .02rem;
  height: .18rem;
  background: #000;
  transform-origin: 0 0;
}

.layer[data-name="crossplay-launcher"].visible .launcher-close-ic:before {
  transform: rotate(-30deg) translate(-50%, -50%);
}

.layer[data-name="crossplay-launcher"].visible .launcher-close-ic:after {
  transform: rotate(30deg) translate(-50%, -50%);
}

.layer[data-name="crossplay-launcher"] .layer-buttons {
  padding: .22rem 0 0
}

.layer[data-name="crossplay-launcher"] .layer-buttons .btn {
  display: inline-block;
  color: #000;
  border-radius: .08rem;
  font-size: .17rem;
  line-height: .24rem;
  letter-spacing: 0;
  font-weight: 300;
  padding: .16rem 0;
  border: .02rem solid #787878;
  width: 2.3rem;
}

.layer[data-name="crossplay-launcher"] .layer-buttons .btn:active {
  transform: scale(0.98)
}

.store-buttons button:active {
  transform: scale(.98)
}