@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: calc(var(--fs)*100);
}

* {
  -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;
  forced-color-adjust: none;
}


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, 0);
  width: 0;
  height: 0
}

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

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

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

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

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: .2;
  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: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body {
  background: #000;
}

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

#app {
  position: relative;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity .25s ease-out
}

.init #app {
  opacity: 1
}

#app .fp-section {
  display: block;
  min-height: calc(var(--vh) * 100) !important;
  overflow: hidden !important
}

#app .fp-scrollable {
  height: 100% !important
}

#app .fp-tableCell {
  display: block !important;
  width: 100vw !important;
  min-height: 100% !important;
  overflow: hidden;
}

#app .scene-content {
  min-height: 100% !important;
  overflow: hidden !important;
  min-height: auto;
}

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

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

.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;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  mix-blend-mode: soft-light;
}

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

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


#app.insub:before,
#app.insub: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: 100%;
}

#header {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: auto;
  z-index: 6;
  width: 100%;
  height: .9rem;
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, .7);
  transition: background-color .25s ease-out
}

.class-debut-view #header,
.update-detail-view #header,
.detail-view #header {
  z-index: 10;
  background-color: rgba(0, 0, 0, 1);
}

.class-debut-view .btn[name="navToggle"],
.update-detail-view .btn[name="navToggle"],
.detail-view .btn[name="navToggle"] {
  pointer-events: none;
  opacity: 0
}


/* detail-page-ui */
.detail-page-ui.nav {
  position: absolute;
  top: .9rem;
  height: .7rem;
  left: 0;
  z-index: 2;
  opacity: 0;
  width: 100%;
  text-align: center;
  pointer-events: none;
  border-top: .02rem solid #3e3b42;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 1);
}

.detail-page-ui.close {
  position: absolute;
  background: #000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease-out;
  right: .12rem;
  width: .8rem;
  height: .9rem;
  top: 0;
}

.detail-view .detail-page-ui {
  opacity: 1;
  pointer-events: fill;
}

.detail-page-ui.nav>button {
  font-family: 'Nanum Gothic';
  font-size: .26rem;
  font-weight: 400;
  line-height: .32rem;
  display: inline-block;
  position: relative;
  vertical-align: top;
  padding: .18rem .6rem;
  letter-spacing: -.075em;
  color: #808080;
  transition: opacity .25s ease-out;
}

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


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


.detail-page-ui .close-btn {
  width: .64rem;
  height: .64rem;
  display: block;
  margin: 0 auto;
  position: absolute;
  padding: .08rem;
  z-index: 10;
  right: 0;
  top: .05rem;
  box-sizing: content-box;
}


/* 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: max(100%, 100vw);
  min-height: max(100%, 100vh);
  min-height: max(100%, 100lvh);
}

.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 */
.btn[name="navToggle"] {
  position: fixed;
  right: .12rem;
  top: .05rem;
  width: .8rem;
  height: .8rem;
  z-index: 10;
}

.btn[name="navToggle"] .line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: .58rem;
  height: .03rem;
}

.btn[name="navToggle"] .line.l2 {
  transform: translate(-50%, -50%);
}

.btn[name="navToggle"] .line.l2:before,
.btn[name="navToggle"] .line.l2:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%
}

.btn[name="navToggle"] .line.l1,
.btn[name="navToggle"] .line.l3,
.btn[name="navToggle"] .line.l2:before,
.btn[name="navToggle"] .line.l2:after {
  background: linear-gradient(to right, rgba(180, 180, 180, 0) 0%, rgba(180, 180, 180, 1) 35%, rgba(180, 180, 180, 1) 65%, rgba(180, 180, 180, 0) 100%);
  transform: translate(-50%, -50%) rotate(0deg);
  transition: all .25s ease-out;
  opacity: 1;
}

.btn[name="navToggle"] .line.l1 {
  margin-top: -.13rem
}

.btn[name="navToggle"] .line.l3 {
  margin-top: .13rem
}

.btn[name="navToggle"] .line.l2:after {
  opacity: 0;
}

.nav-opened .btn[name="navToggle"] .line.l1,
.nav-opened .btn[name="navToggle"] .line.l3 {
  margin: 0;
  opacity: 0;
}

.nav-opened .btn[name="navToggle"] .line.l2:before,
.nav-opened .btn[name="navToggle"] .line.l2:after {
  opacity: 1;
  width: .64rem;
  background: linear-gradient(to right, rgba(192, 185, 200, 0) 0%, rgba(192, 185, 200, 1) 35%, rgba(192, 185, 200, 1) 65%, rgba(192, 185, 200, 0) 100%);
}

.nav-opened .btn[name="navToggle"] .line.l2:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.nav-opened .btn[name="navToggle"] .line.l2:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}



#gnb {
  position: fixed;
  right: 0;
  width: 100%;
  top: 0;
  height: 100vh;
  overflow: hidden;
  clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 0);
  z-index: 9;
  pointer-events: none;
  transition: all .15s ease-out;
}

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

#gnb:before,
#gnb:after {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  height: 100%;
  opacity: 0;
}

.nav-opened #gnb:before {
  opacity: .3
}

.nav-opened #gnb:after {
  opacity: 1
}

#gnb:before {
  left: 0;
  width: 100%;
  background: url(../img/m_nav-pattern.jpg) repeat-x center / cover;
}

#gnb:after {
  right: 0;
  width: calc(100% - 1.2rem);
  background: linear-gradient(to left, rgba(0, 0, 0, .96) 35%, rgba(0, 0, 0, .85) 65%, rgba(0, 0, 0, 0) 100%)
}

#gnb .nav-wrap:before {
  content: "";
  display: block;
  flex: none;
  height: .9rem;
}

#gnb .nav-wrap {
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: end;
  float: right;
  box-sizing: border-box;
  height: 100vh;
  overflow: hidden;
}

#gnb .nav-blank {
  display: block;
  flex: none;
}

#gnb .nav-line {
  display: block;
  flex: none;
  width: .03rem;
  position: relative;
  margin-right: .505rem;
  height: .96rem;
  z-index: 1;
}

#gnb .nav-line.top {
  background: linear-gradient(to top, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 100%)
}

#gnb .nav-line.btm {
  background: linear-gradient(to bottom, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 100%)
}

#navigation {
  flex: 1;
  position: relative;
  z-index: 1;
  pointer-events: fill;
  max-height: 100%;
  overflow-y: auto;
  width: auto;
  display: none;
  text-align: right;
  box-sizing: border-box;
}

.nav-opened #gnb #navigation {
  display: block;
}

#navigation>li {
  white-space: nowrap;
  position: relative;
  padding: .12rem .52rem;
}

#navigation>li:before,
#navigation>li:after {
  content: "";
  display: block;
  width: .03rem;
  position: absolute;
  right: .505rem;
  background: rgba(255, 255, 255, .3);
}

#navigation>li:before {
  height: .26rem;
  top: 0;
}

#navigation>li:after {
  height: calc(100% - .4rem);
  bottom: 0;
}

#navigation>li.multi:before {
  height: .44rem;
}

#navigation>li.multi:after {
  height: calc(100% - .57rem);
}

#navigation>li:first-child {
  padding-top: 1.4rem;
}

#navigation>li:first-child:before {
  height: 1.52rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 1.28rem)
}

#navigation>li:first-child:after {
  height: calc(100% - 1.68rem)
}

#navigation>li:last-child {
  padding-bottom: 1.4rem;
}

#navigation>li:last-child:after {
  background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 1.28rem)
}

#navigation li a {
  display: block;
  width: auto;
  position: relative;
}

#navigation li>a {
  padding: .025rem 0;
  padding-right: .3rem;
}

#navigation li>a:before {
  content: "";
  display: block;
  width: .15rem;
  height: .15rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  border: .03rem solid rgba(255, 255, 255, .3);
  border-radius: 100%;
  box-sizing: border-box;
}

#navigation li>a:after {
  content: "";
  display: block;
  width: .22rem;
  height: .53rem;
  position: absolute;
  right: 0;
  top: 50%;
  opacity: 0;
  transform: translate(50%, -50%);
  background: url(../img/nav-marker.png) no-repeat center / contain;
  box-sizing: border-box;
  transition: opacity .15s ease-out;
}

#navigation .sub {
  display: block;
  padding: .06rem .3rem .18rem 0
}

#navigation .sub>a {
  padding: .08rem 0;
}

#navigation .g-txt {
  position: relative;
  display: inline-block;
  z-index: 1;
  font-weight: 400;
  font-size: .3rem;
  line-height: .36rem;
  letter-spacing: -.075em;
}

#navigation .sub .g-txt {
  font-size: .24rem;
  line-height: .32rem;
  letter-spacing: -.05em;
  font-family: 'Nanum Gothic';
}

#navigation .g-txt em,
#navigation .g-txt strong {
  font: inherit;
  color: #808080;
  font-weight: 400;
  background: none;
  letter-spacing: inherit;
  padding-left: 0;
  padding-right: .02rem;
}

#navigation .g-txt strong {
  color: #ccb96a;
}

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

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

#navigation a.on .g-txt em,
#navigation a.on:before {
  background: linear-gradient(-181deg, #d6dbf9 50%, #a6aac1 55%, #9799aa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#navigation a.on .g-txt strong {
  background: linear-gradient(-181deg, #e8dac1 0%, #eadabf 48%, #d5af74 50%, #bba686 95%, #81715e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#navigation>li>a.on:after {
  opacity: 1
}



/* header ui */

#header h1 {
  flex: none;
  width: .9rem;
  padding: .16rem .28rem
}

#header .bi {
  display: block;
  width: 100%;
  height: auto;
}

.links {
  flex: 1;
  height: .8rem;
  padding: 0 .92rem 0 .12rem;
  text-align: right;
  position: relative;
}

.links>button {
  display: inline-block;
  position: relative;
  width: .56rem;
  height: .56rem;
  margin: .12rem 0;
  vertical-align: top;
}

.links>button>span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.links>button .default {
  opacity: 1
}

.links>button .selected {
  opacity: 0
}

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

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

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

.btn[name="controlSound"] .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[name="controlSound"].on .txt:before {
  content: "SOUND ON";
  animation: none
}

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

.btn[name="controlSound"] .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[name="controlSound"] .sound-bar {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: .02rem;
}

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

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

.btn[name="controlSound"].on .icon:before {
  opacity: 0
}

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

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

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

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

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

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

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

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

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

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

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


@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: .92rem;
  width: 2.34rem;
  box-sizing: border-box;
  top: .12rem;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  padding-top: .74rem;
  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: .56rem;
  top: 0;
  height: .74rem;
  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: .74rem;
  width: calc(100% - .56rem)
}

.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: 100%;
  max-width: 100vw;
  z-index: 5;
  margin: 0 auto;
  position: relative;
  height: auto;
  min-height: max(100vh, 10rem);
  min-height: max(100lvh, 10rem);
  box-sizing: border-box;
  padding-top: .1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

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

.scene-content:after {
  min-height: .5rem
}

.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.16rem;
  height: auto;
  position: relative;
  margin: 0 auto;
}


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

.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;
  color: #000;
  white-space: nowrap;
}

.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);
  background-color: #70170c
}


.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: .24rem;
  margin: 0 auto;
}

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

.scene-title .g-txt {
  font-size: .5rem;
  line-height: .7rem;
  margin: 0;
}

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

.event-no {
  display: block;
  text-align: center;
  width: 3.53rem;
  color: #ceba99;
  letter-spacing: .05em;
  font-size: .22rem;
  line-height: .26rem;
  padding: .05rem 0;
  margin-bottom: .14rem;
  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;
  padding: .06rem 0;
}

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

.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: 5.95rem;
  letter-spacing: -.025em;
  font-size: .17rem;
  line-height: .21rem;
  padding: .03rem 0;
  font-weight: 300;
  text-shadow: 0 .01rem .02rem rgba(0, 0, 0, 1);
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}

.scene .scene-title:before {
  opacity: 0;
  transform: translateY(15%);
}

.scene-title,
.event-no,
.sub-title,
.event-period {
  opacity: 0;
  transform: translateY(.25rem);
}

.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);
  transition: all .55s ease-out
}

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

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

.scene.active .scene-title:before {
  transition-delay: .15s;
  transition-duration: .35s;
}

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

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


/* form */

.frm-box {
  width: 6.55rem;
  background: url(../img/m_frm-box.png) no-repeat center / 100% auto;
  height: 10.46rem;
}

.frm-box .scene-title:before {
  background-image: url(../img/frm-box-title-line.png)
}

.frm-box .scene-title {
  padding-top: .44rem;
}

.frm-box .scene-title .g-txt {
  letter-spacing: -.075em
}

.frm-box .sub-title {
  position: relative;
  z-index: 2;
}

.frm-box .sub-title .g-txt {
  letter-spacing: -.05em;
  font-size: .29rem;
  line-height: .35rem;
  font-weight: 700;
}

.frm-box .product-name .g-txt em {
  background: linear-gradient(180deg, #ffffff 15%, #c6c6c6 50%, #cbcac8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.frm-box .sub-title .g-txt em {
  background: linear-gradient(180deg, #ffffff 15%, #c6c6c6 50%, #cbcac8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.frm-box .sub-title .g-txt strong {
  background: linear-gradient(-181deg, #e8dac1 0%, #eadabf 48%, #d5af74 50%, #bba686 95%, #81715e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.frm-box .event-period {
  background-image: url(../img/event-period-bg.png);
  width: 6.62rem;
  color: #fff;
}

.banner-area>p {
  color: #fff;
  font-size: .22rem;
  line-height: .27rem;
  letter-spacing: -.05em;
  text-shadow: 0 .01rem .07rem rgba(0, 0, 0, 1);
  padding: .14rem .06rem;
  text-align: left;
}

.banner-area>p.align-c {
  text-align: center;
}

.banner-area+.banner-area {
  margin-top: .1rem;
}

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

.check-frm>input {
  position: absolute;
  right: 100%;
  height: 1px;
  width: 1px;
  font-size: 1px;
  line-height: 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+label.on:after,
.check-frm>input:checked+label:after {
  opacity: 1;
}

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

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

.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: .24rem;
  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;
}

.auth-btn {
  width: 1.4rem;
  height: .37rem;
  position: absolute;
  right: 0;
  top: 0;
  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: .12rem 0;
}

.frm-check-list .check-frm {
  display: inline-block;
  line-height: .21rem;
  padding: .04rem 0;
}

.frm-check-list .check-frm.short {
  width: 1.62rem;
}

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

.register-box .frm-check-list .check-frm label {
  letter-spacing: -.1em
}

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

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

.frm-box .confirm-btn {
  padding: .15rem 0;
  text-align: center;
  display: block;
  width: 100%;
}


.frm-box .confirm-btn .g-txt {
  font-size: .32rem;
  line-height: .39rem;
  letter-spacing: -.075em;
}

/* etc */

.main-banner {
  position: fixed;
  right: .26rem;
  left: .26rem;
  top: 1rem;
  pointer-events: none;
  z-index: 5;
}

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

.main-banner .event-banner {
  top: .1rem;
  left: 0;
  width: 2.44rem;
  transform: translateX(-25%);
}

.main-banner .event-banner .btn+.btn {
  margin-top: .04rem
}

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

.main-banner .top {
  top: .1rem;
  right: -.04rem;
  width: 2.46rem;
  transform: translateX(50%);
}

.main-banner .top .btn {
  width: 100%;
  box-sizing: border-box;
}

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

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


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

.main-banner .event-banner>.btn {
  margin-top: -.18rem
}

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

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

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

.community-banner {
  transform: translateX(50%);
  right: -.08rem;
  top: 0
}

.community-banner>p {
  color: #fff;
  font-size: .18rem;
  line-height: .24rem;
  letter-spacing: -.05em;
  text-shadow: 0 .01rem .06rem rgba(0, 0, 0, 1);
  padding: 0 .03rem .07rem 0;
  text-align: right;
}

.community-banner .btn {
  position: relative;
  width: 3.09rem
}


.final-tester-banner {
  transform: translateX(50%);
  right: -.08rem;
  bottom: -.16rem;
  width: 1.67rem;
}


.side-banner {
  position: absolute;
  left: -.26rem;
  width: 2.16rem;
  bottom: 0;
  transform: translateX(-50%);
}

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

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

.side-banner .buttons {
  position: absolute;
  width: 98%;
  left: 0;
  height: auto;
  bottom: .14rem;
  display: flex;
  gap: .05rem;
  align-items: center;
}

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

.side-banner .buttons span {
  flex: none;
  display: block;
  width: .92rem
}


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

.scroll-ic::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -.3rem;
  height: 250%;
  left: 50%;
  width: 100vw;
  transform: translateY(100%) translateX(-50%);
  background: linear-gradient(to top, rgba(0, 0, 0, .9) 40%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  transition: all .15s ease-out
}

.scroll-ic.shade::after {
  transform: translateY(0) translateX(-50%);
  opacity: 1
}

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

.scroll-ic:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  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%;
  z-index: 1;
  transform: translateX(-50%);
  opacity: 0;
  width: 1.6rem;
  height: auto;
  text-align: center;
  pointer-events: none;
  transition: opacity .25s
}

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

.scroll-ic a .g-txt {
  display: inline-block;
  transform: rotateX(-90deg);
  white-space: nowrap;
  letter-spacing: -.075em;
  font-weight: 400;
  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)
  }
}

/* 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"] .mix-layer {
  opacity: 0;
  background: rgba(0, 0, 0, .1) url(../img/main-pattern.png) no-repeat center / cover;
}

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


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


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

.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);
  opacity: .5;
  mix-blend-mode: overlay;
}

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

.scene[data-name="Main"] .main-title.lv1 {
  width: 7.12rem;
  padding-top: .08rem
}

.scene[data-name="Main"] .main-title.lv1 .light {
  width: .4rem;
  height: .4rem
}

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

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

.scene[data-name="Main"] .main-title.lv1 .light.l3 {
  left: 4.2rem;
    top: .86rem;
}
.scene[data-name="Main"] .main-title.lv1 .light.l4 {
  left: 2.79rem;
    top: 1.26rem;
}

.scene[data-name="Main"] .main-title.lv2 {
  width: 7.2rem
}

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

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

.scene[data-name="Main"] .main-title.lv2 .light.l3 {
  left: 4.83rem;
  top: .76rem;
}

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

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

.scene[data-name="Main"] .register-btn:before {
  content: "";
  display: block;
  position: absolute;
  top: .08rem;
  height: .32rem;
  width: 2.1rem;
  left: 50%;
  transform: translate(-50%, -50%);
  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;
  opacity: 0;
  transform: translateY(.25rem);
  transition: all .55s ease-out;
}


.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);
  transition: all .5s ease-out;
}

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


.store-buttons {
  display: flex;
  height: auto;
  max-width: 6rem;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: .05rem;
}

.store-buttons button {
  flex: none;
  width: 1.67rem;
  height: auto
}

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


/* Pre-registration */
.scene[data-name="Pre-registration"] .scene-title .g-txt {
  font-size: .38rem;
  margin-top: .08rem
}
.scene[data-name="Pre-registration"] .register-box .rewards{width:5.68rem;margin:0 auto;padding:.04rem 0}
.scene[data-name="Pre-registration"] .register-box .rewards > img{width:100%;height:auto}
.scene[data-name="Pre-registration"] .scene-title .g-txt{font-size:.37rem;line-height:.45rem}
.scene[data-name="Pre-registration"] .frm-check-list .check-frm{padding:.02rem 0}
.scene[data-name="Pre-registration"] .banner-area{margin-top:.07rem}

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

.scene[data-name="Download"] .scene-content {
  padding-top: 1.2rem;
  padding-bottom: 1rem
}

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

.scene[data-name="Download"] .scene-title .g-txt {
  font-size: .46rem;
  line-height: .54rem;
  padding: 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: .27rem;
  line-height: .33rem;
  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: .16rem 0 .32rem;
}

.scene[data-name="Download"] .store-buttons button {
  height: .44rem
}

.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-onehalf.jpg)
}

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

.scene[data-name="Newserver"] .visual>img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  transform: translateY(1.5%);
  flex: none;
}

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

.scene[data-name="Newserver"] .scene-content:after {
  flex: 1.5;
}

.scene[data-name="Newserver"] .scene-title {
  margin: 0;
  margin-top: 1.4rem;
  padding-bottom: .36rem
}

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

.scene[data-name="Newserver"] .scene-title .g-txt em {
  background: linear-gradient(-181deg, #ffffff 15%, #d2d5e3 40%, #7e828e 75%, #9498a8 95%);
}

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

.scene[data-name="Newserver"] .scene-title .g-txt em,
.scene[data-name="Newserver"] .scene-title .g-txt strong {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

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

.scene[data-name="Newserver"] .sub-title {
  font-size: .18rem;
  line-height: .21rem;
  padding: .07rem 0 .1rem;
  color: #d3d3d3;
  font-weight: 700;
  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"] .sub-title .g-txt em {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 40%, rgba(155, 156, 156, 1) 80%);
}

.scene[data-name="Newserver"] .sub-title .g-txt strong {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 25%, rgba(249, 245, 215, 1) 45%, rgba(212, 169, 67, 1) 80%);
}

.scene[data-name="Newserver"] .sub-title .g-txt em,
.scene[data-name="Newserver"] .sub-title .g-txt strong {
  font-weight: 600;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

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

.scene[data-name="Newserver"] .details {
  position: relative;
  width: 5.01rem;
  margin: .5rem auto .09rem;
}

.scene[data-name="Newserver"] .details>.tit {
  position: absolute;
  left: 50%;
  top: -.44rem;
  width: 4.26rem;
  padding: .2rem 0;
  text-align: center;
  transform: translateX(-50%);
  background: url(../img/newserver-reward-tit.png) no-repeat center / contain
}

.scene[data-name="Newserver"] .details>.tit .g-txt {
  font-size: .29rem;
  letter-spacing: -.055em;
  line-height: .32rem;
}

.scene[data-name="Newserver"] .details>.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
}

.scene[data-name="Newserver"] .new-server-spec {
  margin-top: 2.9rem
}

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

.new-server-rewards>.box {
  display: block;
  width: 100%;
}

.new-server-rewards>.box+.box {
  margin-top: .04rem
}

.new-server-rewards+.confirm-btn {
  margin-top: 0;
  margin-bottom: 1.4rem;
  width: 3.8rem;
  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
}

.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[data-name="new-server-alarm"] .frm-check-list {
  width: 3.4rem;
}

.layer[data-name="new-server-alarm"] .frm-check-list .check-frm {
  display: block;
}


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

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

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

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

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

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

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

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

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





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

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

.scene[data-name="Update"] .visual>img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  transform: translateY(16%);
  flex: none;
}

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

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

.scene[data-name="Update"] .scene-title {
  font-size: .66rem;
  line-height: .72rem;
  letter-spacing: -.075em;
  margin-top: .75rem
}


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

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

.scene[data-name="Update"] .sub-title {
  padding: .04rem 0 0
}

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

.scene[data-name="Update"] .g-txt strong,
.scene[data-name="Update"] strong.g-txt em {
  color: transparent;
  background: linear-gradient(to bottom, #f6eddb 20%, #f8ebb9 35%, #ffea92 50%, #ecc477 55%, #ffd57d 70%, #bea884 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.update-frame-wall {
  position: relative;
  width: 5.66rem;
  margin: min(4rem, 55%) auto 0;
}

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

.update-frame-wall .frame-btn .frame-name {
  line-height: 0;
}

.update-frame-wall .frame-btn .frame-name .g-txt {
  display: block;
  font-size: .3rem;
  line-height: .36rem;
  letter-spacing: -.075em
}

.update-frame-wall .frame-btn {
  position: relative;
  display: block;
  width: 100%;
  flex: none;
  height: auto;
  box-shadow: 0 .04rem .2rem rgba(0, 0, 0, .6), 0 .04rem .1rem rgba(0, 0, 0, .6);
}

.update-frame-wall .frame-btn+.frame-btn {
  margin-top: .14rem
}

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

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

.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(1.8);
  mix-blend-mode: lighten;
  opacity: .35;
}

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

.update-frame-wall .frame-btn[value="silence-tower"] .light.l1 {
  left: .11rem;
  top: -.13rem;
}

.update-frame-wall .frame-btn[value="silence-tower"] .light.l2 {
  left: -.09rem;
  top: -.14rem;
}

.update-frame-wall .frame-btn[value="legendary-skills"] .light.l1 {
  left: .65rem;
  top: -.13rem;
}

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

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

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

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

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

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

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

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



/* update-detail-layer */
.update-detail-layer {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  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-container .swiper-button-next:before,
.update-detail-layer .swiper-container .swiper-button-prev:before {
  background-image: url(../img/layer-arrow-off.png)
}

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

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

.update-detail-layer .swiper-slide.legendary-skills {
  background-image: url(../img/update-detail-legendary-skills_m.jpg);
}



.update-detail-layer .swiper-pagination {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 14vh;
  width: 6.4rem;
  height: auto;
  display: flex;
  box-sizing: border-box;
  align-items: start;
  bottom: auto;
  justify-content: center;
  padding: 0 1.2rem
}

.update-detail-layer .swiper-pagination:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  width: 6.4rem;
  left: 50%;
  transform: translateX(-50%);
  height: max(.015rem, 1px);
  top: 0;
  opacity: .55;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 12.5%, rgba(255, 255, 255, 1) 87.5%, rgba(255, 255, 255, 0) 100%)
}

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

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


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

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

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

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

.update-detail-layer .content {
  flex: none;
  text-align: center;
  width: 100%
}

.update-detail-layer .content-kv {
  position: absolute;
  left: 50%;
  width: 7.2rem;
  height: auto;
  pointer-events: none;
  top: 40%;
  transform: translate3d(-50%, -50%, 0);
}

.update-title {
  font-size: .36rem;
  line-height: .4rem;
  letter-spacing: -.075em;
  font-weight: 700;
}

.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: .63rem;
  line-height: .75rem;
  letter-spacing: -.075em;
  position: relative;
  padding-bottom: .3rem;
  padding-top: .05rem;
  margin-bottom: .24rem;
  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: -.1rem;
  background: url(../img/update-detail-title-line.png) no-repeat center / contain
}

.update-dc {
  font-size: .21rem;
  color: #d3d3d3;
  line-height: .32rem;
  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: .24rem;
  line-height: .32rem;
  content: "·";
  display: inline-block;
  vertical-align: bottom;
  margin-right: .12rem
}

.update-detail-ui.close {
  position: absolute;
  background: #000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease-out;
  right: .12rem;
  width: .8rem;
  height: .9rem;
  top: 0;
}

.update-detail-ui .close-btn {
  width: .64rem;
  height: .64rem;
  display: block;
  margin: 0;
  position: absolute;
  padding: .08rem;
  z-index: 10;
  right: 0;
  top: .05rem;
  box-sizing: content-box;
  z-index: 10
}

.update-detail-view .update-detail-ui {
  pointer-events: fill;
  opacity: 1;
}

.update-detail-view #scrollMark {
  opacity: 0
}


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

.scene[data-name="Event"] .scene-content,
.scene[data-name="Event_sub"] .scene-content {
  padding-top: .6rem
}

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

.scene[data-name="Event"] .scene-title>span {
  font-size: .38rem;
  line-height: .44rem;
  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: .48rem;
  line-height: .52rem;
  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%);
  font-weight: 700;
  color: transparent
}

.scene[data-name="Event"] .g80 {
  width: 6.4rem;
  height: 3.36rem;
  margin: 1.4rem auto 0;
  position: relative;
}

.scene[data-name="Event"] .g80 .car {
  width: 7.28rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(calc(-50% + .12rem));
}

.scene[data-name="Event"] .g80 .badge {
  width: 1.44rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-3.08rem);
}

.scene[data-name="Event"] .btn[name="event-g80-howto"] {
  margin: .16rem auto;
  display: block;
  text-align: center;
  position: relative;
  width: 1.39rem;
}

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

.scene[data-name="Event"] .btn[name="event-g80-howto"] .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"] .btn[name="event-g80-howto"] span {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-45%);
  width: 100%;
  text-align: center;
  font-size: .16rem;
  letter-spacing: -.075em;
  color: #fff;
  line-height: .2rem;
  font-weight: 400
}



.scene[data-name="Event"] .event-period {
  display: inline-flex;
  align-items: stretch;
  min-width: 3.52rem;
  width: auto;
  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 .1rem .08rem;
  white-space: nowrap;
}

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

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

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

.scene[data-name="Event"] .sub-title .g-txt em,
.scene[data-name="Event_sub"] .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,
.scene[data-name="Event_sub"] .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,
.scene[data-name="Event_sub"] .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,
.scene[data-name="Event_sub"] .sub-title .g-txt:after {
  filter: blur(.01rem);
}

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




.scene[data-name="Event_sub"] .sub-title {
  position: relative;
  padding-bottom: .24rem;
}

.scene[data-name="Event_sub"] .sub-title:before {
  content: "";
  display: block;
  width: 100%;
  left: 0;
  position: absolute;
  height: .31rem;
  background: url(../img/event-title-line.png) no-repeat center / auto 100%;
  bottom: -.04rem
}

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


.event-gift-preview {
  width: 6.4rem;
  margin: .12rem auto .6rem;
}

.event-gift-preview .gift-list {
  display: block;
  width: 100%;
  text-align: center;
  position: relative;
  left: -.065rem
}

.event-gift-preview .gift-list>li {
  width: 1.94rem;
  display: inline-block;
  margin-left: .13rem;
  margin-top: .13rem;
  vertical-align: top;
  position: relative;
}

.event-gift-preview .gift-list>li.blank {
  width: 0;
  display: block;
  margin: 0
}

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

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

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

.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: .16rem;
  line-height: .19rem;
}

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

.event-gift-preview .gift-list .name small {
  font-size: .12rem;
  line-height: .14rem;
  margin-top: .03rem;
}


.event-gift-preview .event-notice {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  padding: .14rem 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: .16rem;
  line-height: .24rem;
  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: .9rem;
  margin-left: .06rem;
}


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

.init .scene[data-name="Event"].active .scene-content>.btn {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .5s
}

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


/* Character-preemption */

.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: .05rem;
  top: .05rem;
  bottom: .05rem;
  right: .05rem;
  border: .01rem solid #6d4041;
  opacity: .6
}

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

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

.class-card .g-txt {
  left: 32.32%;
  transform: translateX(-50%);
  top: 64.05%;
  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[data-name="archer"] .icon,
.class-card[data-name="archer"] .g-txt {
  left: 30.54%;
}

.class-card[data-name="sorceress"] .icon,
.class-card[data-name="sorceress"] .g-txt {
  left: 36.12%;
}

.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 {
  opacity: 1
}

.layer .class-card .icon {
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 1.02rem;
}

.layer .class-card .g-txt {
  left: 50%;
  top: 83.4%
}

input:checked+.class-card .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,
.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,
.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;
  flex-wrap: wrap;
  width: 5.4rem;
  height: 5.28rem;
  box-sizing: content-box;
  margin: 0 auto;
  align-items: stretch;
  gap: .12rem;
  padding-top: .4rem;
}

.class-grid .grid-item {
  flex: 1;
  min-width: 2.62rem;
  height: 2.58rem;
}

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





/* Introduction */
.introduction-wall {
  height: 7.2rem;
  width: 7.2rem;
}

.scene-content .introduction-wall {
  margin: .72rem auto;
  position: relative;
}

.scene-bg .introduction-wall {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.scene-bg .introduction-wall>span {
  position: absolute;
  transform: translate(-50%, -50%);
  height: auto;
}

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

.scene[data-name="Introduction"] .frame-01 {
  left: 124.6%;
  top: -0.7%;
  width: 6.28rem;
}

.scene[data-name="Introduction"] .frame-02 {
  left: 103.75%;
  top: 131.5%;
  width: 4.7rem;
}

.scene[data-name="Introduction"] .frame-03 {
  left: 0;
  top: 141.7%;
  width: 4.2rem;
}

.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 {
  font-size: .58rem
}

.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)
}

.frame-btn {
  position: absolute;
  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%;
  height: .24rem;
  background: url(../img/update-v14-frame-line.png) no-repeat center / auto 100%;
}*/

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

.frame-btn .frame-name .g-txt em {
  background: linear-gradient(to bottom, #fff 30%, #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: 52%;
  top: -6%;
  width: 2rem;
  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;
  margin-bottom: -.03rem
}

#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: .04rem;
  margin: .09rem 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.swiper-pagination-bullet-active .icon:after {
  opacity: 1
}

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

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

#introductionClassPager .icon.paladin:after {
  background-image: url(../img/introduction-class-paladin-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[value="class"] {
  left: 26.8%;
  top: 25%
}

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

.scene[data-name="Introduction"] .scene-bg .introduction-wall>span,
.scene[data-name="Introduction"] .frame-btn {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.1);
}

.scene[data-name="Introduction"].active .scene-bg .introduction-wall>span,
.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: .55s
}

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

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

.scene[data-name="Introduction"].active .scene-bg .introduction-wall .frame-01 {
  transition-delay: .4s
}

.scene[data-name="Introduction"].active .scene-bg .introduction-wall .frame-02 {
  transition-delay: .45s
}

.scene[data-name="Introduction"].active .scene-bg .introduction-wall .frame-03 {
  transition-delay: .5s
}

#introductionClassPager {
  opacity: 0;
  transform: translateX(-5%);
}

.active #introductionClassPager {
  opacity: 1;
  transform: translateX(0);
  transition: all .55s ease-out;
  transition-delay: .85s;
}

/* Tvc-showcase */

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

.scene[data-name="Tvc-showcase"] .visual {
  overflow: hidden;
  display: flex;
  height: 100%;
  flex-direction: column;
}

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

.scene[data-name="Tvc-showcase"] .model {
  flex: none;
  height: 12.8rem;
  position: relative;
}

.scene[data-name="Tvc-showcase"] .model>span {
  width: 8.57rem;
  position: absolute;
  height: 100%;
}

.scene[data-name="Tvc-showcase"] .model .shame {
  right: 50%;
  margin-left: -.16rem;
  top: 3.125%;
}

.scene[data-name="Tvc-showcase"] .model .revenge {
  left: 50%;
  margin-left: -1.42rem;
  top: 4.22%;
}

.model .shame img {
  transform: rotate(11.36deg)
}

.model .shame {
  transform: translateX(-10%);
}

.model .revenge {
  transform: translateX(10%);
}

.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) 50%, rgba(0, 0, 0, 0) 100%);
}

.scene[data-name="Tvc-showcase"] .scene-content {
  text-align: center;
}

.scene[data-name="Tvc-showcase"] .slogan {
  width: 6.4rem;
  display: block;
  margin: 4rem auto 0;
  height: 4.2rem;
  position: relative;
}

.scene[data-name="Tvc-showcase"] .slogan>span {
  position: absolute;
  width: 4.15rem;
}

.scene[data-name="Tvc-showcase"] .slogan .shame {
  top: 0;
  left: .2rem;
}

.scene[data-name="Tvc-showcase"] .slogan .revenge {
  bottom: 0;
  right: 0;
}

.tvc-btn-wrap {
  width: 6.4rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  align-items: start;
  height: auto;
}

.tvc-btn {
  flex: 1;
  padding: .08rem 0;
}

.tvc-btn .tvc-name {
  display: block;
  margin: 0 auto;
  position: relative;
  width: 2.7rem;
  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 .mission {
  padding-top: .24rem;
  display: block;
  text-align: center;
}

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

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



.scene[data-name="Tvc-showcase"] .model>span {
  opacity: 0;
}

.scene[data-name="Tvc-showcase"].active .model>span {
  opacity: 1;
  transform: translateX(0);
  transition: all .75s .2s ease-out
}

.scene[data-name="Tvc-showcase"] .slogan .shame {
  transform: scale(1.2) translateY(-3.5%) translateX(-12%);
}

.scene[data-name="Tvc-showcase"] .slogan .revenge {
  transform: scale(1.2) translateY(-3.5%) translateX(12%);
}

.scene[data-name="Tvc-showcase"] .slogan>span {
  opacity: 0;
}

.scene[data-name="Tvc-showcase"].active .slogan>span {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity .3s ease-out, transform .15s ease-in;
}

.scene[data-name="Tvc-showcase"].active .slogan .shame {
  transition-delay: .45s, .4s;
}

.scene[data-name="Tvc-showcase"].active .slogan .revenge {
  transition-delay: .75s, .7s;
}


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

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

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

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



.achievement-status {
  display: flex;
  margin: .34rem auto;
  height: .75rem;
  width: 5.68rem;
  align-items: stretch;
  background: #6b150b;
  padding: .02rem;
  box-sizing: border-box;
}

.achievement-status>.subj {
  flex: 1;
  text-align: center;
  color: #cc8b8c;
  font-size: .25rem;
  letter-spacing: -.05em;
  line-height: .35rem;
  font-weight: 700;
  padding: .2rem 0;
}

.achievement-status>.content {
  flex: none;
  width: 3.1rem;
  text-align: right;
  font-weight: 700;
  font-size: .39rem;
  color: #a21a09;
  line-height: .41rem;
  padding: .15rem .32rem .15rem .2rem;
  background: #000;
  box-sizing: border-box;
}

.benefit-list {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem;
  align-items: center;
  justify-content: center;
  width: 5.68rem;
  margin: 0 auto;
  padding: .24rem 0 .2rem;
}

.benefit-list>li {
  position: relative;
  flex: none;
  width: 1.78rem;
  height: 2.9rem;
  background: url(../img/m_achievement-off.jpg) no-repeat center top / contain;
  box-shadow: 0 .06rem .09rem rgba(0, 0, 0, .7);
}

.benefit-list .goal {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: .22rem 0;
}

.benefit-list>li.on .goal:before,
.benefit-list>li.on .goal:after {
  content: "";
  display: block;
  position: absolute;
  opacity: 0;
}

.benefit-list .goal:before {
  left: 50%;
  top: -.04rem;
  z-index: -1;
  width: 1.47rem;
  height: 1.1rem;
  transform: translateX(-50%);
  background: url(../img/achievement-goal-bg.png) no-repeat center top / contain;
}

.benefit-list .goal:after {
  left: 50%;
  transform: translateX(-50%);
  top: .03rem;
  z-index: -1;
  width: 1.28rem;
  height: .63rem;
  background: url(../img/achievement-goal-light.png) no-repeat center / cover;
  mix-blend-mode: screen;
}

.benefit-list .goal .g-txt {
  font-size: .34rem;
  line-height: .4rem;
  letter-spacing: -.04em;
}

.benefit-list .goal .g-txt em {
  background: linear-gradient(to bottom, #a7a7a7 0%, #a7a7a7 35%, #b2b2b2 50%, #878787 55%, #878787 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.benefit-list .goal .g-txt:after {
  left: 0;
  top: 0;
  filter: none;
  opacity: .4;
  color: #fff;
  mix-blend-mode: hue;
}

.benefit-list .reward {
  display: block;
  width: 100%;
  position: relative;
  height: 1.03rem;
}

.benefit-list .reward img {
  position: absolute;
  left: 14%;
  width: 72%;
  top: -8.5%
}

.benefit-list .reward-name {
  display: block;
  width: 100%;
  position: relative;
  height: .48rem;
}

.benefit-list .reward-name>span {
  text-align: center;
  position: absolute;
  left: 0;
  width: 100%;
  top: 50%;
  transform: translateY(-48%);
  color: #808080;
  font-weight: 400;
  font-size: .155rem;
  line-height: .18rem;
  letter-spacing: -.04em;
}

.benefit-list .reward-name small {
  font-size: .13rem;
  display: inline-block;
  margin: 0 .02rem;
  color: #5e5e5e
}

.benefit-list .target {
  display: block;
  text-align: center;
  width: 1.32rem;
  margin: 0 auto;
  color: #808080;
  font-weight: 700;
  font-size: .16rem;
  line-height: .18rem;
  letter-spacing: -.05em;
  padding: .075rem 0 .065rem;
  text-shadow: 0 .01rem .2rem rgba(0, 0, 0, .6);
}

.benefit-list>li.on {
  background-image: url(../img/m_achievement-on.jpg)
}

.benefit-list>li.on .goal:before,
.benefit-list>li.on .goal:after {
  opacity: 1
}

.benefit-list>li.on .goal .g-txt em {
  background: linear-gradient(to bottom, #e9dcc6 35%, #e2ccab 48%, #deb26d 50%, #daba89 75%, #b9a58c 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.benefit-list>li.on .reward-name>span {
  font-weight: 700;
  color: #774b23
}

.benefit-list>li.on .reward-name>span small {
  font-weight: 900;
  color: #7e5c41
}

.benefit-list>li.on .target {
  color: #fef2d0;
  text-shadow: 0 .01rem .2rem rgba(254, 242, 208, .6);
}

.benefit-list>li.on .target:after {
  content: "확정";
  display: inline-block;
  font: inherit;
  margin-left: .4em
}

.event-notice {
  display: block;
  text-align: center;
}

.event-notice .g-txt {
  font-weight: 400;
  font-size: .16rem;
  line-height: .27rem;
}

.event-notice .g-txt em {
  color: #dcc9b3;
  text-shadow: 0 .01rem .05rem rgba(0, 0, 0, .7);
}


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

.spec-details .spec-title-btn {
  color: #fff;
  font-size: .22rem;
  line-height: .26rem;
  padding: .06rem 0 .05rem;
  display: block;
  width: 6rem;
  margin: 0 auto;
  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: .08rem;
  position: relative;
  width: .23rem;
  height: .27rem;
  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: .1rem;
  height: .12rem;
  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: .22rem;
  line-height: .3rem;
  padding: .2rem 0 .05rem
}

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

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

.spec-details table {
  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: -.075em;
  border: .01rem solid rgba(255, 255, 255, .3);
  border-left: 0 none;
  border-bottom: 0 none;
}

.spec-details table small {
  font-size: .19rem;
}

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

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

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

/* 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%);
  pointer-events: none
}

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

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

.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-color: #000;
  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(0deg);
  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 .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 */
.init #fullPage>.section:last-child,
#fullPage>.section:last-child .fp-scroller,
#fullPage>.section:last-child {
  min-height: calc(var(--vh) * 100) !important;
}

#fullPage>.section:last-child,
#fullPage>.section:last-child .fp-scroller {
  display: flex;
  flex-direction: column;
}

#fullPage>.section:last-child .scene[data-name="Media"] {
  flex: 1 1 auto;
  min-height: 0;
}

.init #app .scene[data-name="Media"],
.init #app .scene[data-name="Media"] .scene-content {
  height: auto !important;
  min-height: calc((var(--vh) * 100) - 3.14rem) !important;
}

.scene[data-name="Media"] .scene-title {
  margin-top: .62rem;
}

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

.scene[data-name="Media"] .sub-title {
  padding: .05rem 0 .66rem;
}

.scene[data-name="Media"] .sub-title .g-txt {
  font-size: .27rem;
  line-height: .31rem
}

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

.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: 6;
}

.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: 5.42rem;
  overflow: visible;
  margin: .66rem auto
}

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

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

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

.scene[data-name="Media"] .thumbnails .swiper-slide {
  padding: 0 .02rem;
  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: .16rem;
  line-height: .19rem;
  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 {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

.swiper-button-next,
.swiper-button-prev {
  width: .76rem;
  height: .76rem;
  transform: translateY(-50%);
  margin: 0;
  cursor: pointer;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 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 {
  opacity: 0;
  background-image: url(../img/media-arrow-off.png);
}

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

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

.swiper-button-next:disabled:before,
.swiper-button-prev:disabled:before,
.swiper-button-next.swiper-button-disabled:before,
.swiper-button-prev.swiper-button-disabled:before {
  opacity: 1;
}

.swiper-button-next:disabled:after,
.swiper-button-prev:disabled:after
.swiper-button-next.swiper-button-disabled:after,
.swiper-button-prev.swiper-button-disabled:after {
  opacity: 0;
}

.scene[data-name="Media"] .swiper-button-next {
  left: 100%;
  right: auto;
  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"] .deco>img {
  display: block;
  position: relative;
  z-index: -10;
}

.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: .3s
}

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

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

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

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

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

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

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




/* footer */

#footer {
  background: #000;
  position: relative;
  left: auto;
  width: 100%;
  bottom: auto;
  height: 3.14rem;
  min-height: 3.14rem;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: fill;
  z-index: 5;
}

#footer>* {
  flex: none
}


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

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

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

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

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

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

.cp-links>button+a:before,
.cp-links>a+button:before,
.cp-links>a+a:before {
  content: "";
  display: block;
  position: absolute;
  width: .01rem;
  height: .13rem;
  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 {
  padding: .14rem 0;
}

.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 {
  padding: .14rem 0 .1rem;
}

#footer .site-info .ci {
  display:block;
  margin: 0 auto;
  width: 1.65rem;
}

#footer .site-info .ci.bluepotion,
#footer .site-info .ci.blomics {
  display: inline-block;
  vertical-align: middle;
}
#footer .site-info .ci.blomics{
  width: .94rem;
  margin-left: .16rem
}
#footer .site-info .ci.blomics + .copyright {
  display: block
}



/* 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: .48rem;
  height: .48rem;
  top: .06rem;
  right: .06rem;
  transform: scale(1);
  transition: transform .1s;
  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 {
  width: 5.72rem;
  height: auto;
}

/* Swiper 버튼 iOS 호환성 */
.layer .swiper-button-next,
.layer .swiper-button-prev {
  pointer-events: auto !important;
  touch-action: manipulation;
}

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

.wide .layer[data-name="common-alert"] .alert-msg {
  height: 3.6rem;
}

.wide .layer[data-name="common-video"] {
  width: min(90vw, 90vh);
}

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

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

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

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

.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: 6.72rem;
  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-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: 0;
}

.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[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 .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-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-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.6rem;
  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%;
}

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

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

.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: -.025em;
  font-weight: 200;
  vertical-align: middle;
  padding: .04rem 0 .02rem;
  min-height: .3rem
}

.layer .terms-detail table strong {
  font-size: .18rem;
  line-height: .25rem;
  font-weight: 700;
  color: #fff
}

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


.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: .5rem 0 .2rem;
}

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

.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 .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: #fff;
  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: .24rem;
  width: 4.6rem;
  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: .48rem;
  height: .48rem
}

.layer .swiper-container .swiper-button-prev {
  left: .25rem
}

.layer .swiper-container .swiper-button-next {
  right: .25rem
}

.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)
}



.layer[data-name="register-rewards"] .swiper-button-prev,
.layer[data-name="register-rewards"] .swiper-button-next {
  width: .48rem
}

.layer[data-name="register-rewards"] .swiper-button-prev {
  left: .24rem
}

.layer[data-name="register-rewards"] .swiper-button-next {
  right: .24rem
}

.layer[data-name="register-rewards"] .layer-buttons .confirm-btn {
  width: 3.4rem;
  padding: .12rem 0
}

.layer[data-name="register-rewards"] .layer-frm-title {
  padding: .4rem 0 .24rem
}

.layer[data-name="register-rewards"] .layer-frm-title:before {
  width: 100%;
  margin: 0;
  height: .24rem;
  left: auto;
}

.layer[data-name="register-rewards"] .layer-frm-title .g-txt {
  font-size: .34rem;
  line-height: .37rem;
  letter-spacing: -.075em;
}

.layer[data-name="register-rewards"] .swiper-container {
  width: 100%;
  height: 4.06rem;
  margin-top: -.05rem;
  overflow: hidden;
}

.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: .06rem 0 .04rem;
  word-wrap: break-word;
  word-break: keep-all;
  color: #fff;
  letter-spacing: -.025em;
  font-weight: 400;
  font-size: .15rem;
  line-height: .18rem;
}

.reward-tb .row>div:first-child {
  flex: 1
}

.reward-tb .row>div * {
  font: inherit;
  letter-spacing: inherit;
}

.reward-tb .row>div+div {
  border-left: .01rem solid #494949
}

.reward-tb .row>div.col {
  display: flex;
  flex-direction: column;
  padding: 0
}

.reward-tb .row>div.col>* {
  flex: none
}

.reward-tb .row>div.col .empty {
  flex: 1;
  display: block;
}

.reward-tb .row>div.col .date {
  margin: 0;
  border-top: .01rem solid #494949;
  padding-top: .05rem
}

.reward-tb .row>div strong {
  font-weight: 700;
}

.reward-tb .row.view>div {
  padding: 0;
  font-size: 0;
  line-height: 0;
}

.reward-tb .row.tit>div {
  font-size: .17rem;
  line-height: .22rem
}

.reward-tb .row.tit>div strong {
  font-weight: 700;
}

.reward-tb .row.tit>div {
  padding-top: .04rem;
  padding-bottom: .02rem
}

.reward-tb .row>div div.date {
  padding: 0 0 .04rem;
  word-wrap: break-word;
  word-break: keep-all;
  color: #fff;
  letter-spacing: -.025em;
  font-weight: 400;
  font-size: .15rem;
  line-height: .18rem;
  margin-bottom: .04rem;
  border-bottom: .01rem solid #494949
}

.reward-tb .row>div p+.date {
  padding-top: .06rem;
  margin-top: .06rem;
  border-top: .01rem solid #494949
}

.reward-tb .row>div p {
  display: block;
  text-align: left;
  font-size: .12rem;
  line-height: .18rem;
  padding-left: .18rem;
  letter-spacing: -.025em;
  position: relative;
  max-width: 3rem;
  width: 100%;
  margin: 0 auto;
  color: #d5d5d5;
}

.reward-tb .row>div p:before {
  content: "";
  display: block;
  width: .36em;
  height: .36em;
  background: #d5d5d5;
  position: absolute;
  left: .09rem;
  top: 50%;
  transform: translateY(-50%);
}


.layer.benefit {
  width: 6.8rem;
}

.layer.benefit .layer-body {
  z-index: 1;
}

.layer.benefit .layer-frm-title:before {
  display: none;
}

.layer.benefit .layer-frm-title {
  padding: 0 0 .06rem;
  margin: 0;
}

.layer.benefit .layer-frm-title .g-txt {
  font-size: .29rem;
  line-height: .32rem;
  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: .24rem;
  width: 6.5rem;
  text-align: center;
}

.layer.benefit .event-title>img {
  width: 5.6rem;
  margin: 0 auto
}

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

.layer.benefit .event-title .g-txt {
  font-size: .14rem;
  line-height: .2rem;
  letter-spacing: -.05em;
  margin: .1rem 0 0
}
.layer.benefit .event-title .g-txt + .g-txt{
  margin-top:0;display:block;
}

.layer.benefit .event-title .g-txt em {
  background: linear-gradient(-180deg, #fffff4 10%, #ffffdc 25%, #ede487 50%, #ede480 90%);
  -webkit-background-clip: text;
  background-clip: text;
}

.layer.benefit .event-title .g-txt strong {
  background: linear-gradient(-180deg, #efefd4 10%, #ffebc3 20%, #f0cc96 45%, #85560e 85%);
  -webkit-background-clip: text;
  background-clip: text;
}

.layer.benefit .event-period {
  opacity: 1;
  transform: none;
  transition: none;
  color: #edd079;
  font-size: .13rem;
  letter-spacing: -.025em;
  line-height: .16rem;
  padding: .05rem 0;
  margin: 0 auto;
  font-family: 'Nanum Gothic';
  width: 4.4rem;
  margin-top: .1rem;
  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: .14rem;
  line-height: .19rem;
  color: #e4e3e3;
  text-align: center;
  letter-spacing: -.05em;
  font-weight: 500;
  padding: .02rem 0 0;
}

.layer.benefit .event-desc.has-bar::before {
  content: "- ";
  display: inline-block;
  margin-right: .4em;
  font: inherit;
  color: inherit
}

.layer.benefit .event-desc small {
  font-size: .12rem;
  color: #b1b1b1
}

.layer.benefit .event-desc strong {
  color: #edd079;
}

.layer.benefit .event-period+.weekly-tb {
  margin-top: .1rem;
}

.layer.benefit .weekly-tb+.weekly-tb {
  margin-top: .08rem;
}

.layer.benefit .weekly-tb .head {
  height: .3rem;
}

.layer.benefit .weekly-tb+.event-title {
  margin-top: .36rem;
}

.layer.benefit .swiper-slide.mid {
  height: 7.6rem;
  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="comeback-benefit"] .layer-frm-title .g-txt {
  font-size: .38rem;
  line-height: .42rem;
}

.layer .weekly-tb .reward-tb {
  width: 4.4rem
}

.layer .weekly-tb .reward-tb .row {
  width: 100%
}

.layer .weekly-tb .reward-tb .head {
  height: .64rem;
}

.layer .weekly-tb .reward-tb .head span {
  font-size: .2rem;
  line-height: .24rem;
  color: #fff;
  letter-spacing: -.025em;
}

.layer .weekly-tb .reward-tb .head strong {
  color: #ffd865
}

.layer .weekly-tb .reward-tb .row {
  align-items: center;
}

.layer .weekly-tb .reward-tb .row div>p {
  font-size: .15rem;
  line-height: .18rem;
  text-align: center;
  padding: 0
}

.layer .weekly-tb .reward-tb .row div>p::before {
  display: none
}

.layer .weekly-tb .reward-tb .row div>div {
  font-size: .12rem;
  line-height: .18rem;
  letter-spacing: -.025em;
  padding: .04rem 0 .03rem
}

.layer .weekly-tb .reward-tb .row>div {
  color: #d5d5d5;
  padding: 0
}

.layer .weekly-tb .reward-tb .row div>div+div {
  border-top: .01rem solid #494949
}

.layer[data-name="comeback-benefit"] .p1 .weekly-tb {
  margin-top: .25rem
}

.layer[data-name="comeback-benefit"] .p2 .weekly-tb .head {
  height: .36rem
}

.layer[data-name="comeback-benefit"] .p2 .weekly-tb .col {
  width: 1.05rem;
  height: 1.22rem
}

.layer[data-name="comeback-benefit"] .p2 .weekly-tb .head span {
  font-size: .18rem;
  line-height: .21rem;
}

.layer[data-name="comeback-benefit"] .p2 .weekly-tb .body span {
  font-size: .14rem;
  line-height: .18rem;
}

.layer[data-name="comeback-benefit"] .event-desc {
  padding: 0;
  font-size: .17rem;
  line-height: .22rem
}

.layer[data-name="comeback-benefit"] .reward-tb .row>div.narrow {
  flex: .4
}

.layer[data-name="comeback-benefit"] .event-desc small {
  font-size: .14rem
}

.layer.benefit[data-name="update-event"] .event-desc {
  padding: .16rem 0 .1rem;
}

.layer.benefit[data-name="newbie-benefit"] .event-desc {
  color: #bcbcbc;
  line-height: .17rem;
  font-size: .13rem;
}

.layer.benefit .title-img {
  display: block;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.layer.benefit[data-name="newbie-benefit"] .weekly-tb .col {
  width: .92rem
}

.layer.benefit[data-name="newbie-benefit"] .p1 .event-title .g-txt,
.layer.benefit[data-name="newbie-benefit"] .p2 .event-title .g-txt {
  letter-spacing: -.065em
}

.layer.benefit[data-name="newbie-benefit"] .event-period {
  font-size: .14rem;
}

.layer.benefit[data-name="newbie-benefit"] .weekly-tb .reward-tb .row>div.narrow {
  width: .88rem;
  flex: none
}


.layer.benefit[data-name="newbie-benefit"] .p3 .event-desc,
.layer.benefit[data-name="newbie-benefit"] .p4 .event-desc {
  padding: .16rem 0 .1rem;
}

.layer.benefit[data-name="newbie-benefit"] .p3 .event-period,
.layer.benefit[data-name="newbie-benefit"] .p4 .event-period {
  margin-bottom:.16rem
}

.layer.benefit[data-name="comeback-benefit"] .weekly-tb>.reward-tb {
  width: 5rem
}

.layer.benefit[data-name="comeback-benefit"] .weekly-tb .col {
  width: .92rem
}

.layer.benefit[data-name="comeback-benefit"] .weekly-tb .reward-tb .row.ng>div:first-child {
  width: 1rem;
  flex: none
}

.layer.benefit[data-name="comeback-benefit"] .p1 .event-desc {
  font-size: .17rem;
  line-height: .225rem;
  color: #bcbcbc;
  letter-spacing: -.05em
}

.layer.benefit[data-name="comeback-benefit"] .p1 .event-title {
  margin-bottom: .1rem;
}

.layer.benefit[data-name="comeback-benefit"] .p1 .event-title .title-img{
  width:102%;margin-left:-1%
}
.layer.benefit[data-name="comeback-benefit"] .p2 .event-title .title-img{
  width:92%;margin:0 auto
}

.layer[data-name="register-rewards"] {
  width: 6.4rem
}

.layer[data-name="register-rewards"] .swiper-container {
  height: 4.48rem
}

.layer[data-name="register-rewards"] .swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.layer[data-name="register-rewards"] .reward-tb {
  width: 4.8rem;
}

.layer[data-name="register-rewards"] .p2 .reward-tb .row>div p {
  max-width: 3.5rem;
}

.layer[data-name="register-rewards"] .reward-tb .row.tit>div {
  font-size: .15rem;
  line-height: .2rem
}

.layer[data-name="register-rewards"] .reward-tb .row.tit strong {
  font-weight: 500
}

/*
.layer[data-name="register-rewards"] .p1 .reward-tb .row>div div.date,
.layer[data-name="register-rewards"] .p1 .reward-tb .row>div {
  font-size: .14rem;
  line-height: .16rem
}

.layer[data-name="register-rewards"] .p1 .reward-tb .row.view>div {
  margin-top: -.05rem;
  margin-bottom: -.05rem;
}
*/
.weekly-tb {
  display: block;
  box-sizing: border-box;
  margin: 0 auto;
  position: relative;
  height: auto;
  width: fit-content;
  border: .02rem solid #554b3f;
  padding: .04rem;
}

.weekly-tb:before,
.weekly-tb:after {
  content: "";
  display: block;
  position: absolute;
  mix-blend-mode: color-dodge;
  mix-blend-mode: plus-lighter;
  opacity: .7;
  width: .56rem;
  height: .48rem;
  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: .08rem
}

.weekly-tb .row {
  position: relative;
  display: flex;
  align-items: stretch;
  height: auto;
  width: fit-content;
  box-sizing: border-box;
  border: .01rem solid rgba(161, 142, 117, .35);
}

.weekly-tb .col {
  height: 1rem;
  width: .85rem;
  display: inline-flex;
  display: 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;
  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: 50%;
  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: .29rem;
}

.weekly-tb .head span {
  font-size: .15rem;
  line-height: .19rem;
  letter-spacing: -.035em;
  margin-top: -.01rem;
}

.weekly-tb .head span em {
  background: linear-gradient(-181deg, #efe1ca 25%, #b69d77 48%, #caa467 50%, #bba487 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 .green .head:before {
  opacity: .5;
  background: rgba(74, 165, 125, 1);
  box-shadow: inset 0 0 .15rem rgba(220, 210, 104, .4);
}

.weekly-tb .body {
  flex: 1;
}

.weekly-tb .body * {
  font-family: 'Nanum Gothic';
  letter-spacing: -.075em;
  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: .13rem;
  line-height: .155rem;
}

.weekly-tb .body span.long {
  font-size: .11rem;
  line-height: .12rem;
}

.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 .green .body:before {
  opacity: .2;
  background: rgba(74, 165, 125, 1);
  box-shadow: inset 0 0 .15rem rgba(220, 210, 104, .6);
}

.weekly-tb .green .body span {
  color: #adffd2
}

.weekly-tb .body span small {
  color: #cf5651;
  display: block;
  font-size: .1rem;
  line-height: .11rem;
  margin-top: .02rem
}


/* class-debut-layer */

.class-debut-layer {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  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 0100%);
}

.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;
  left: 0;
  width: 100%;
}

.class-debut-layer .class-visual:before {
  content: "";
  display: block;
  flex: 1
}

.class-debut-layer .avatar {
  flex: none;
  height: min(13.18rem, 100vh);
  width: 100%;
  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 .content .class-info {
  text-align: center;
  justify-content: end;
}

.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;
  padding-bottom: 1rem
}

.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;
  background-position: center;
}

.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-ui.close {
  position: absolute;
  background: #000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease-out;
  right: .12rem;
  width: .8rem;
  height: .9rem;
  top: 0;
}

.class-debut-ui .close-btn {
  width: .64rem;
  height: .64rem;
  display: block;
  margin: 0;
  position: absolute;
  padding: .08rem;
  z-index: 10;
  right: 0;
  top: .05rem;
  box-sizing: content-box;
  z-index: 10
}

.class-debut-view .class-debut-ui {
  pointer-events: fill;
  opacity: 1;
}

.class-debut-view #scrollMark {
  opacity: 0
}

#logueDebut {
  background-image: url(../img/detail-debut-rogue-bg.jpg)
}

#logueDebut .avatar img {
  left: 56.81%;
}


/* detail-page */
.detail-page {
  position: fixed;
  pointer-events: none;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: all .25s ease-out;
  clip-path: polygon(0 .9rem, 100% .9rem, 100% .9rem, 0 .9rem);
  background: #000;
}

.detail-view .detail-page {
  pointer-events: fill;
  top: 0;
  opacity: 1;
  clip-path: polygon(0 .9rem, 100% .9rem, 100% 100%, 0 100%);
  transition: clip-path .35s ease-out;
}

.detail-page .page {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - 1.6rem);
  opacity: 0;
  overflow-y: auto;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.detail-page .page-spacer {
  height: 100%;
  min-height: 10.4rem;
  overflow: hidden;
  position: relative;
}

.detail-page .fit-cover {
  min-height: max(calc(100vh - 1.6rem), 100%);
  min-height: max(calc(100lvh - 1.6rem), 100%);
  min-width: max(calc(100vw - 1.6rem), 100%);
}

.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);
  background-position-x: 27.5%
}

.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;
  opacity: .7
}

.feature-grid {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: stretch;
}

.feature-grid>.line {
  flex: none;
  position: relative;
  height: 0;
  width: 100%;
  display: block;
}

.feature-grid>.line:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: .025rem;
  transform: translateY(-50%);
  background: linear-gradient(to right, 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
}

#featureItem02>img {
  top: 25%;
  transform: translate(-50%, -25%)
}

#featureItem03>img {
  top: 5%;
  transform: translate(-50%, -5%)
}

#featureItem04>img {
  top: 60%;
  transform: translate(-50%, -60%)
}

#featureItem05>img {
  top: 10%;
  transform: translate(-50%, -10%)
}


.feature-grid .feature-item:hover {
  flex: 2.7
}

.feature-grid .feature-item:hover>img {
  filter: saturate(100%) brightness(100%);
}

.feature-item .default-title {
  position: absolute;
  left: 0;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: .45rem;
  font-weight: 700;
  letter-spacing: -.075em;
  white-space: nowrap;
  line-height: .52rem;
  color: #88775b;
  padding: 0 0 .25rem;
  text-shadow: 0 0 .06rem rgba(0, 0, 0, 1);
  background: url(../img/detail-feature-title-line.png) no-repeat center bottom / auto .27rem;
  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: 0 0 .4rem;
  transition: all .4s ease-out
}

.feature-item .hover-content:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: 5.4rem;
  width: 100%;
  background: linear-gradient(15deg, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 80%);
}

.feature-item .hover-content .title {
  padding-left: .48rem;
  position: relative;
  padding-bottom: .2rem;
}

.feature-item .hover-content .title:before {
  content: "";
  display: block;
  position: absolute;
  left: .4rem;
  width: 3.66rem;
  height: .31rem;
  bottom: -.07rem;
  background: url(../img/detail-class-title-line.png) no-repeat left center / auto 100%;
}

.feature-item .hover-content .dc {
  font-size: .18rem;
  line-height: .28rem;
  letter-spacing: -.05em;
  padding-left: .56rem;
  text-shadow: 0 .01rem .05rem 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: .6rem;
  line-height: .65rem;
  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-button-prev,
.page.class .swiper-button-next {
  position: absolute;
  bottom: 1.44rem;
  top: auto;
  transform: translateY(50%);
  width: .6rem;
  height: .6rem;
}

.page.class .swiper-button-prev:before,
.page.class .swiper-button-prev:after,
.page.class .swiper-button-next:before,
.page.class .swiper-button-next:after {
  display: none
}

.page.class .swiper-button-prev {
  left: auto;
  right: 50%;
  margin-right: 3.04rem
}

.page.class .swiper-button-prev img {
  transform: rotateY(-180deg);
}

.page.class .swiper-button-next {
  right: auto;
  left: 50%;
  margin-left: 3.04rem
}

.page.class .swiper-pagination {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2.9rem;
  width: 100%;
  text-align: center
}

.page.class .swiper-pagination:before {
  content: "";
  display: block;
  height: .01rem;
  top: 1.44rem;
  left: 0;
  width: 100%;
  position: absolute;
  background: #4d4d4d;
}


.page.class .swiper-pagination-bullet {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  position: relative;
  padding: 0;
  border-radius: 0;
  background: none;
  outline: none;
  opacity: 1;
  margin: .94rem 0 0;
}

.page.class .swiper-pagination-bullet+.swiper-pagination-bullet {
  margin-left: -.1rem;
}

.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: .54rem;
  height: .54rem;
  background: #000;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-45deg);
  transition: all .35s
}

.page.class .swiper-pagination-bullet .square:before,
.page.class .swiper-pagination-bullet .square:after {
  content: "";
  transition: all .35s;
  display: block;
}

.page.class .swiper-pagination-bullet .square:before {
  width: .52rem;
  height: .52rem;
  opacity: 0;
}

.page.class .swiper-pagination-bullet .square:after {
  width: .46rem;
  height: .46rem;
  opacity: 0;
  background: url(../img/detail-class-ic-deco.jpg) no-repeat center / cover;
  transform: translate(-50%, -50%) rotate(0deg);
}

.page.class .swiper-pagination-bullet.swiper-pagination-bullet-active .square {
  border: .01rem solid #474747;
  background: #30271a;
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 1;
}

.page.class .swiper-pagination-bullet.swiper-pagination-bullet-active .square:after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.page.class .swiper-pagination-bullet.swiper-pagination-bullet-active .square:before {
  opacity: 1;
  background: #1d160d;
}

.page.class .swiper-pagination-bullet .icon {
  opacity: .5
}

.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 {
  opacity: 0;
  content: "";
  display: block;
  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.swiper-pagination-bullet-active .icon,
.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-onehalf-archer-off.png);
}

.page.class .swiper-pagination-bullet .icon.archer:before {
  background-image: url(../img/detail-class-ic-onehalf-archer-on.png);
}

.page.class .swiper-pagination-bullet .icon.warrior {
  background-image: url(../img/detail-class-ic-onehalf-warrior-off.png);
}

.page.class .swiper-pagination-bullet .icon.warrior:before {
  background-image: url(../img/detail-class-ic-onehalf-warrior-on.png);
}

.page.class .swiper-pagination-bullet .icon.sorceress {
  background-image: url(../img/detail-class-ic-onehalf-sorceress-off.png);
}

.page.class .swiper-pagination-bullet .icon.sorceress:before {
  background-image: url(../img/detail-class-ic-onehalf-sorceress-on.png);
}

.page.class .swiper-pagination-bullet .icon.fighter {
  background-image: url(../img/detail-class-ic-onehalf-fighter-off.png);
}

.page.class .swiper-pagination-bullet .icon.fighter:before {
  background-image: url(../img/detail-class-ic-onehalf-fighter-on.png);
}

.page.class .swiper-pagination-bullet .icon.rogue {
  background-image: url(../img/detail-class-ic-onehalf-rogue-off.png);
}

.page.class .swiper-pagination-bullet .icon.rogue:before {
  background-image: url(../img/detail-class-ic-onehalf-rogue-on.png);
}

.page.class .swiper-pagination-bullet .icon.warlock {
  background-image: url(../img/detail-class-ic-onehalf-warlock-off.png);
}

.page.class .swiper-pagination-bullet .icon.warlock:before {
  background-image: url(../img/detail-class-ic-onehalf-warlock-on.png);
}

.page.class .swiper-pagination-bullet .icon.paladin {
  background-image: url(../img/detail-class-ic-onehalf-paladin-off.png);
}

.page.class .swiper-pagination-bullet .icon.paladin:before {
  background-image: url(../img/detail-class-ic-onehalf-paladin-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: 20rem;
  margin-top: -8.6rem;
  transform: translateY(.5rem);
  transition: transform .6s ease-out;
}

.page.class .class-visual img {
  position: absolute;
  width: 17.16rem;
  bottom: 0;
  transform: translateX(-50%);
}


.swiper-slide[data-name="paladin"] .class-visual img {
  left: 45.56%;
}

.swiper-slide[data-name="warlock"] .class-visual img {
  left: 45.56%;
}

.swiper-slide[data-name="rogue"] .class-visual img {
  left: 75%;
}

.swiper-slide[data-name="archer"] .class-visual img {
  left: 75%;
}

.swiper-slide[data-name="warrior"] .class-visual img {
  left: 75%;
}

.swiper-slide[data-name="sorceress"] .class-visual img {
  left: 75%;
}

.swiper-slide[data-name="fighter"] .class-visual img {
  left: 75%;
}

.page.class .class-info {
  position: absolute;
  left: .52rem;
  top: 50%;
  padding-top: 1.12rem;
  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: -.06rem;
  width: 3.66rem;
  height: .31rem;
  bottom: 0;
  background: url(../img/detail-class-title-line.png) no-repeat left center / auto 100%;
}


.class-info .name span.g-txt {
  font-size: .65rem;
  line-height: .72rem;
  letter-spacing: -.075em;
  vertical-align: bottom;
}

.class-info .name small.g-txt {
  font-size: .32rem;
  line-height: .4rem;
  margin-left: .05rem;
  vertical-align: bottom;
}

.class-info .desc {
  height: 1.72rem;
  padding-left: .04rem;
  font-size: .22rem;
  letter-spacing: -.025em;
  line-height: .26rem;
  text-shadow: 0 .01rem .07rem rgba(0, 0, 0, 1)
}

.class-info .wp {
  position: relative;
  width: 2.92rem;
  margin-left: -.46rem;
}

.class-info .wp .tit {
  position: absolute;
  left: .46rem;
  top: .12rem;
  width: 100%;
  text-align: left
}

.class-info .wp .tit .g-txt {
  font-size: .26rem;
  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: .52rem;
  text-align: center;
}

.class-info .wp .main {
  width: .6rem;
  left: .48rem;
}

.class-info .wp .secondary {
  width: 1.24rem;
  left: 1.22rem;
}

.class-info .wp>div .ic {
  display: inline-block;
  width: .6rem;
  height: .6rem;
}

.class-info .wp>div .ic+.ic {
  margin-left: .03rem;
}

.class-info .wp>div p {
  display: block;
  font-weight: 700;
  letter-spacing: 0;
  font-size: .14rem;
  line-height: .18rem;
  padding: .05rem 0;
  text-shadow: 0 .01rem 0 rgba(0, 0, 0, .5)
}

.page.class .view-box {
  position: absolute;
  left: .6rem;
  top: 50%;
  width: 2.36rem;
  opacity: 0;
  margin-top: -3.8rem;
  transform: translateY(10%);
  transition: all .6s ease-out;
}

.page.class .view-box:after {
  content: "";
  display: block;
  position: absolute;
  left: -.07rem;
  top: -.07rem;
  right: -.07rem;
  bottom: -.07rem;
  pointer-events: none;
}

.page.class .view-box:after {
  z-index: 3;
  background: url(../img/detail-class-vid-frame.png) no-repeat center / 2.48rem auto;
}

.page.class .view-box p {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  top: .94rem;
}

.page.class .view-box p .g-txt {
  font-size: .23rem;
  line-height: .27rem;
  letter-spacing: -.05em;
}

.swiper-slide[data-name="paladin"] .view-box .preview {
  background-image: url(../img/detail-class-vid-warlock.png)
}

.swiper-slide[data-name="warlock"] .view-box .preview {
  background-image: url(../img/detail-class-vid-warlock.png)
}

.swiper-slide[data-name="rogue"] .view-box .preview {
  background-image: url(../img/detail-class-vid-rogue.jpg)
}

.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)
}

.page.class.visible .swiper-slide-active .class-visual .avatar {
  transform: translateY(0);
}

.page.class.visible .swiper-slide-active .class-info {
  transform: translateY(-50%);
  opacity: 1;
  transition-delay: .35s
}

.page.class.visible .swiper-slide-active .view-box {
  transform: translateY(0);
  opacity: 1;
  transition-delay: .35s
}

.page.class.visible .screen-frame .preview:before,
.page.class.visible .screen-frame .preview:after {
  width: .76rem;
  height: .76rem;
  margin-left: -.38rem;
}

.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 {
  background-color: rgba(0, 0, 0, .3);
}


.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: 8.8rem;
  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: .54rem;
  position: absolute;
}

.page.worldlore .worldlore-btm-area .swiper-pagination {
  position: relative;
  margin: 0 auto;
  width: 3.5rem;
  display: flex;
  align-items: stretch;
  height: 2rem;
  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;
  width: auto;
  height: auto;
}

.worldlore-btm-area .swiper-pagination-bullet:before,
.worldlore-btm-area .swiper-pagination-bullet:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: .28rem;
  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.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: .54rem;
  z-index: 1;
  position: absolute;
  margin: 0;
  bottom: auto;
  width: .72rem;
  height: .72rem;
}

.worldlore-btm-area .swiper-button-prev {
  right: 50%;
  margin-right: 2.3rem;
  left: auto;
}

.worldlore-btm-area .swiper-button-next {
  left: 50%;
  margin-left: 2.3rem;
  right: auto;
}

.page.worldlore .play-btn {
  top: 66%
}

.page.worldlore .swiper-slide {
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.page.worldlore .swiper-slide.swiper-slide-active {
  pointer-events: auto;
}

.page.worldlore .swiper-slide:before,
.page.worldlore .swiper-slide:after {
  content: "";
  display: block;
  flex: 1;
}

.page.worldlore .worldlore-content {
  display: block;
  height: 3.4rem;
  position: relative;
  flex: none;
  text-align: center;
}

.worldlore-content .title {
  padding: 0 0 .25rem;
  transform: translateY(.25rem);
  padding: 0 0 .48rem;
  transition: all .65s ease-out
}

.worldlore-content .title .g-txt {
  font-size: .58rem;
  line-height: .7rem;
  letter-spacing: -.075em
}

.worldlore-content .dc {
  font-size: .2rem;
  line-height: .28rem;
  letter-spacing: 0;
  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)
}


#app.samsung-stock {
  /*scroll-snap-type: none;*/
  height: 100lvh;
}

#app.samsung-stock .btn[name="navToggle"] .line.l1,
#app.samsung-stock .btn[name="navToggle"] .line.l3,
#app.samsung-stock .btn[name="navToggle"] .line.l2:before,
#app.samsung-stock .btn[name="navToggle"] .line.l2:after {
  background: #b4b4b4;
  width: .4rem
}

#app.samsung-stock .nav-opened .btn[name="navToggle"] .line.l2 {
  width: .58rem;
}

#app.samsung-stock #navigation a.on .g-txt em {
  color: #d6dbf9
}

#app.samsung-stock #navigation a .g-txt strong {
  color: #bba686
}

#app.samsung-stock #navigation a.on .g-txt strong {
  color: #ebd062
}

#app.samsung-stock .g-txt:before,
#app.samsung-stock .g-txt:after {
  display: none !important
}

#app.samsung-stock .g-txt em {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #dadbe5;
  text-shadow: 0 0 .05rem rgba(0, 0, 0, .8)
}

#app.samsung-stock .g-txt.on-btn em {
  color: #fafafa;
}

#app.samsung-stock .confirm-btn .g-txt em {
  color: #efd8b6
}

#app.samsung-stock .frm-box .sub-title .g-txt em {
  color: #efd8b6
}

#app.samsung-stock .frm-box .sub-title .g-txt strong {
  /*color: #e11f05*/
  color: #dcb06d
}

#app.samsung-stock .auth-btn .g-txt em {
  color: #f6edd9
}

#app.samsung-stock .server-grid label {
  background: #000
}

#app.samsung-stock .server-grid input:checked+label {
  background: #6f572c
}

#app.samsung-stock .scene[data-name="Download"] .scene-title .g-txt em,
#app.samsung-stock .scene[data-name="Event"] .scene-title .g-txt em {
  color: #c5a656
}

#app.samsung-stock .scene[data-name="Event"] .sub-title .g-txt.emph em,
#app.samsung-stock .scene[data-name="Event_sub"] .sub-title .g-txt.emph em {
  color: #d2b86b
}

#app.samsung-stock .tvc-btn .mission .g-txt em {
  color: #c5ae88
}




@supports (height: 100dvh) {

  html,
  body {
    height: 100dvh;
  }

  #app .fp-section,
  #app .fp-tableCell,
  #app .scene-content {
    min-height: 100dvh !important;
  }

  #fullPage>.section:last-child,
  #fullPage>.section:last-child .fp-scroller {
    min-height: 100dvh !important;
  }

  #app .scene[data-name="Media"],
  #app .scene[data-name="Media"] .scene-content {
    height: auto !important;
    min-height: calc(100dvh - 3.14rem) !important;
  }

  #app.samsung-stock {
    height: 100dvh
  }
}



#app.samsung-stock .page.class .swiper-pagination-bullet .square,
#app.samsung-stock .page.class .swiper-pagination-bullet .square:before,
#app.samsung-stock .page.class .swiper-pagination-bullet.swiper-pagination-bullet-active .square,
#app.samsung-stock .page.class .swiper-pagination-bullet.swiper-pagination-bullet-active .square:before {
  background-image: url(../img/blank.gif);
  background-repeat: repeat;
  background-position: center;
}

#app.samsung-stock .page.class .swiper-pagination-bullet.swiper-pagination-bullet-active .icon:after {
  mix-blend-mode: normal;
  display: none
}


.register-box .form-area input[type="radio"] {
  height: 16px;
  width: 16px;
  font-size: 16px;
  line-height: 16px;
  opacity: 0;
}

.layer .alert-msg.small {
  line-height: 1.2
}