@charset "utf-8";

@import url(./root.css);

/* --------------------------------------------
 * HanbitSoft Service Development Team
 * 그라나도 에스파다 M 사전예약페이지 Stylesheet
 * Author - sgp8116@hanbitsoft.co.kr DEC 2023
----------------------------------------------- */

/* CSS Reset
-------------------------------------------------------------- */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
strong,
small,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
select,
input,
button,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
figure,
figcaption {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: inherit;
}
img,
fieldset,
button {
    border: 0;
}
article,
aside,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
    display: block;
}
html,
body {
    line-height: 1.2;
    font-family: "Noto Sans JP", Malgun Gothic, "맑은 고딕", "돋움", dotum,
        Helvetica, sans-serif;
    font-size: 16px;
    color: #000;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
img {
    width: 100%;
    vertical-align: middle;
}
ol,
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: #000;
}
a:hover,
a:focus,
a:active {
    text-decoration: none;
    color: #181c26;
}
strong,
em {
    font-weight: normal;
}
em {
    font-style: normal;
}
button {
    font-family: inherit;
    cursor: pointer;
    border: 0;
    outline: 0;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
input[type="text"]:-ms-clear {
    display: none !important;
}
caption,
legend {
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    visibility: hidden;
}
input {
    font-family: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
}
input[type="radio"] {
    -webkit-appearance: radio;
    -moz-appearance: radio;
    appearance: radio;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
}
input[type="text"],
input[type="password"],
input[type="submit"],
input[type="search"] {
    border-radius: 0;
    outline: 0;
}
input:checked[type="checkbox"] {
    background-color: #fff;
    -webkit-appearance: checkbox;
    cursor: pointer;
}
input[type="checkbox"] {
    background-color: #fff;
    -webkit-appearance: checkbox;
    cursor: pointer;
}
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"] {
    -webkit-appearance: button;
    border-radius: 0;
    cursor: pointer;
}
input[type="text"]::-ms-clear {
    display: none;
}
/* placeholder */
.placeholder {
    color: #999;
    font-size: 1rem;
    font-weight: 400;
} /* IE9 이하를 위한 css */
input::-webkit-input-placeholder {
    color: #999;
    font-size: 1rem;
    font-weight: 400;
}
input:-ms-input-placeholder {
    color: #999;
    font-size: 1rem;
    font-weight: 400;
} /* IE */
input:-moz-input-placeholder {
    color: #999;
    font-size: 1rem;
    font-weight: 400;
} /* Firefox */
input::-ms-input-placeholder {
    color: #999;
    font-size: 1rem;
    font-weight: 400;
    transform: scale(0.55) translateX(-40%);
} /* IE */
input::placeholder {
    color: #999;
    font-size: 1rem;
    font-weight: 400;
    opacity: 1;
} /* IE10 이상을 위한 css */

/* Reserved Class
-------------------------------------------------------------- */
.irPm {
    display: block;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    overflow: hidden;
}
.irWa {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}
.blind {
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    margin: -1px;
    width: 1px;
    height: 1px;
}
.show {
    display: block;
}
.hide {
    display: none;
}
.fL {
    float: left;
}
.fR {
    float: right;
}
.clearFix:after {
    display: block;
    content: "";
    clear: both;
}
/* skip navigation */
.skip-navigation a {
    display: block;
    position: absolute;
    left: 0;
    top: -10000px;
    text-align: center;
    width: 100%;
    height: 40px;
    z-index: 500;
    line-height: 40px;
    font-weight: 600;
    font-size: 18px;
}
.skip-navigation a:hover,
.skip-navigation a:focus,
.skip-navigation a:active {
    background: #000;
    top: 0;
    left: 0;
    color: #fff;
}
.visibilityhidden {
    visibility: hidden;
}

/* Styles
-------------------------------------------------------------- */
html {
    background-color: #fff;
    scroll-behavior: smooth;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
input[type="radio"]:focus-visible ~ .checkmark,
input[type="checkbox"]:focus-visible ~ .checkmark {
    outline: 2px solid #0071e3;
    outline-offset: 2px;
}

/* common section */
.section {
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
    position: relative;
    width: var(--section-width);
    max-width: 2560px;
    margin: 0 auto;
}
.section-content {
    position: relative;
    width: var(--section-content-width);
    max-width: 2400px;
    margin: 0 auto;
}

/* main page */
.section-main-page {
    background-image: url(../images/main-page/main-page-background-image.jpg);
    padding: var(--main-page-padding);
}
.section-main-page .main-page-video {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section-main-page .play-youtube {
    position: relative;
    width: var(--main-page-play-youtube-width);
    height: var(--main-page-play-youtube-height);
    margin: var(--main-page-play-youtube-margin);
}
.section-main-page .button-play-youtube {
    border-radius: 50%;
    background: url(../images/main-page/button-play-youtube.png) no-repeat 0 0 /
        contain;
    position: relative;
    width: var(--main-page-button-play-youtube-width);
    height: var(--main-page-button-play-youtube-height);
    z-index: 1;
}
.section-main-page .link-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: var(--main-page-link-wrapper-margin-bottom);
    z-index: 1;
}
.section-main-page .link-to-pre-registration {
    background: url(../images/main-page/link-to-pre-registration.png) no-repeat
        0 0 / contain;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--main-page-link-to-pre-registration-width);
    height: var(--main-page-link-to-pre-registration-height);
}
.section-main-page .event-period {
    background: url(../images/main-page/event-period.png) no-repeat 0 0 /
        contain;
    width: var(--main-page-event-period-width);
    height: var(--main-page-event-period-height);
    margin: 0 auto;
}
.section-main-page .link-stores {
    display: flex;
    justify-content: center;
    gap: var(--main-page-link-stores-gap);
    padding-top: var(--main-page-link-stores-padding-top);
}
.section-main-page .link-store {
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
    width: var(--main-page-link-store-width);
    height: var(--main-page-link-store-height);
}
.section-main-page .link-stores .stores-google-play {
    background-image: url(../images/main-page/google-play.png);
}
.section-main-page .link-stores .stores-app-store {
    background-image: url(../images/main-page/app-store.png);
}
.section-main-page .link-stores .pc-version {
    background-image: url(../images/main-page/pc-version.png);
}
.section-main-page .link-stores .stores-one-store {
    background-image: url(../images/main-page/one-store.png);
}
.section-main-page .link-stores .stores-kakao-games {
    background-image: url(../images/main-page/kakao-games.png);
    display: block;
    position: relative;
    z-index: 1;
}
.section-main-page .link-stores .link-kakao-games {
    position: relative;
}
.section-main-page .link-stores .link-kakao-games .box {
    position: absolute;
    top: -285%;
    left: 50%;
    transform: translate(-50%, 0);
    background: url(../images/main-page/box.png) no-repeat 0 0 / contain;
    width: var(--main-page-link-kakao-games-item-image-width);
    height: var(--main-page-link-kakao-games-item-image-height);
}
.section-main-page .link-stores .stores-pc-version {
    border: 0;
    border-radius: 0;
    background-image: url(../images/main-page/pc-version.png);
}
.section-main-page .os-notice {
    background: url(../images/main-page/os-notice.png) no-repeat 50% 0 / contain;
    width: 35.78vw;
    height: 0.89vw;
    margin: 2.21vw auto 0;
}

/* 사전예약 */
.section-pre-registration {
    background-image: url(../images/pre-registration/pre-registration-background-image.jpg);
    padding: var(--pre-registration-padding);
}
.section-pre-registration .headline-wrapper {
    margin-bottom: var(--pre-registration-headline-margin-bottom);
}
.section-pre-registration .headline-wrapper .headline {
    background: url(../images/pre-registration/headline.png) no-repeat 0 0 /
        contain;
    width: var(--pre-registration-headline-width);
    height: var(--pre-registration-headline-height);
    margin: 0 auto;
}
.section-pre-registration .pre-registration .rewards-wrapper {
    margin-bottom: var(--pre-registration-rewards-margin-bottom);
}
.section-pre-registration .pre-registration .rewards-wrapper .rewards-list {
    display: flex;
    justify-content: center;
    gap: var(--pre-registration-rewards-list-gap);
}
.section-pre-registration .pre-registration .rewards-wrapper .rewards-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--pre-registration-rewards-item-gap);
}
.section-pre-registration
    .pre-registration
    .rewards-wrapper
    .rewards-item
    .rewards-item-image {
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
    width: var(--pre-registration-rewards-item-image-width);
    height: var(--pre-registration-rewards-item-image-height);
}
.section-pre-registration
    .pre-registration
    .rewards-wrapper
    .rewards-item:nth-child(1)
    .rewards-item-image {
    background-image: url(../images//pre-registration/rewards-01.png);
}
.section-pre-registration
    .pre-registration
    .rewards-wrapper
    .rewards-item:nth-child(2)
    .rewards-item-image {
    background-image: url(../images//pre-registration/rewards-02.png);
}
.section-pre-registration
    .pre-registration
    .rewards-wrapper
    .rewards-item:nth-child(3)
    .rewards-item-image {
    background-image: url(../images//pre-registration/rewards-03.png);
}
.section-pre-registration
    .pre-registration
    .rewards-wrapper
    .rewards-item:nth-child(4)
    .rewards-item-image {
    background-image: url(../images//pre-registration/rewards-04.png);
}
.section-pre-registration
    .pre-registration
    .rewards-wrapper
    .rewards-item:nth-child(5)
    .rewards-item-image {
    background-image: url(../images//pre-registration/rewards-05.png);
}
.section-pre-registration
    .pre-registration
    .rewards-wrapper
    .rewards-item
    .rewards-item-text {
    font-size: var(--pre-registration-rewards-item-image-text-font-size);
    font-weight: 500;
    line-height: var(--pre-registration-rewards-item-image-text-line-height);
    letter-spacing: -0.25px;
    color: #fff;
    text-align: center;
    text-shadow: 2px 1px 0px rgba(0, 0, 0, 0.8);
}
.section-pre-registration .pre-registration .form-os {
    display: flex;
    justify-content: center;
    gap: var(--pre-registration-form-os-gap);
    margin-bottom: var(--pre-registration-form-os-margin-bottom);
}
.section-pre-registration .pre-registration .form-os .form-os-label {
    display: block;
    position: relative;
    padding-left: var(--pre-registration-form-os-label-padding-left);
    cursor: pointer;
    font-size: var(--pre-registration-form-os-label-font-size);
    color: #fff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.section-pre-registration
    .pre-registration
    .form-os
    .form-os-label
    input[type="radio"],
.section-pre-registration .pre-registration .form-os .form-os-label .text {
    vertical-align: middle;
}
.section-pre-registration
    .pre-registration
    .form-os
    .form-os-label
    input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.section-pre-registration .pre-registration .form-os .form-os-label .text {
    display: flex;
    align-items: center;
    gap: var(--pre-registration-form-os-text-gap);
    font-weight: 700;
}
.section-pre-registration
    .pre-registration
    .form-os
    .form-os-label
    .text::before {
    content: "";
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
}
.section-pre-registration
    .pre-registration
    .form-os
    .form-os-label
    #user-os-android
    ~ .text::before {
    background-image: url(../images/pre-registration/ico-android.png);
    width: var(--pre-registration-form-os-android-icon-width);
    height: var(--pre-registration-form-os-android-icon-height);
}
.section-pre-registration
    .pre-registration
    .form-os
    .form-os-label
    #user-os-ios
    ~ .text::before {
    background-image: url(../images/pre-registration/ico-apple.png);
    width: var(--pre-registration-form-os-ios-icon-width);
    height: var(--pre-registration-form-os-ios-icon-width);
}
.section-pre-registration .pre-registration .form-os .form-os-label .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: var(--pre-registration-form-os-checkmark-width-and-height);
    width: var(--pre-registration-form-os-checkmark-width-and-height);
    background-color: #fff;
    border-radius: 50%;
}
.section-pre-registration
    .pre-registration
    .form-os
    .form-os-label
    input[type="radio"]:checked
    ~ .checkmark {
    background-color: #fff;
}
.section-pre-registration
    .pre-registration
    .form-os
    .form-os-label
    .checkmark::after {
    content: "";
    position: absolute;
    display: none;
}
.section-pre-registration
    .pre-registration
    .form-os
    .form-os-label
    input[type="radio"]:checked
    ~ .checkmark::after {
    display: block;
}
.section-pre-registration
    .pre-registration
    .form-os
    .form-os-label
    .checkmark::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--pre-registration-form-os-checkmark-after-width-and-height);
    height: var(--pre-registration-form-os-checkmark-after-width-and-height);
    border-radius: 50%;
    background: #000;
}
.section-pre-registration .pre-registration .form-mobile-number {
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #140c09;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: var(--pre-registration-form-mobile-number-input-width);
    height: var(--pre-registration-form-mobile-number-input-height);
    margin: 0 auto var(--pre-registration-form-mobile-number-margin-bottom);
}
.section-pre-registration .pre-registration .form-mobile-number .select-box {
    background: #140c09;
    width: 40%;
    font-size: 0.938vw;
    color: #fff;
    text-align: center;
}
.section-pre-registration
    .pre-registration
    .form-mobile-number
    .select-box:focus-visible {
    outline: 0;
}
.section-pre-registration .pre-registration .form-mobile-number .line {
    background: #fff;
    display: block;
    width: 1px;
    height: 1.12vw;
}
.section-pre-registration
    .pre-registration
    .form-mobile-number
    input[type="email"] {
    background: transparent;
    width: 95%;
    font-size: 0.938vw;
    font-weight: 700;
    color: #fff;
    text-align: center;
}
.section-pre-registration
    .pre-registration
    .form-mobile-number
    input[type="email"]:focus-visible {
    outline: 0;
}
.section-pre-registration
    .pre-registration
    .form-mobile-number
    input[type="email"]::placeholder {
    font-size: var(--pre-registration-form-mobile-number-input-font-size);
}
.section-pre-registration .pre-registration .form-agreement {
    display: flex;
    justify-content: center;
    width: var(--pre-registration-form-agreement-width);
    margin: 0 auto var(--pre-registration-form-agreement-margin-bottom);
}
.section-pre-registration
    .pre-registration
    .form-agreement
    .form-agreement-each {
    display: flex;
    flex-direction: column;
    gap: var(--pre-registration-form-agreement-each-gap);
}
.section-pre-registration
    .pre-registration
    .form-agreement
    .form-agreement-all {
    align-self: flex-end;
    margin-left: auto;
}
.section-pre-registration .pre-registration .form-agreement .container {
    display: block;
    position: relative;
    padding-left: var(--pre-registration-form-agreement-label-padding-left);
    cursor: pointer;
    font-size: var(--pre-registration-form-agreement-label-font-size);
    line-height: var(--pre-registration-form-agreement-label-line-height);
    color: #fff;
    text-decoration: underline;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.section-pre-registration .pre-registration .form-agreement .container strong {
    font-weight: 700;
}
.section-pre-registration .pre-registration .form-agreement input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.section-pre-registration .pre-registration .form-agreement .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: var(--pre-registration-form-agreement-checkmark-width-and-height);
    width: var(--pre-registration-form-agreement-checkmark-width-and-height);
    background-color: #fff;
}
.section-pre-registration
    .pre-registration
    .form-agreement
    input:checked
    ~ .checkmark {
    background-color: #fff;
}
.section-pre-registration .pre-registration .form-agreement .checkmark::after {
    content: "";
    position: absolute;
    display: none;
}
.section-pre-registration
    .pre-registration
    .form-agreement
    .container
    input:checked
    ~ .checkmark::after {
    display: block;
}
.section-pre-registration
    .pre-registration
    .form-agreement
    .container
    .checkmark::after {
    left: var(--pre-registration-form-agreement-checkmark-after-position-left);
    top: var(--pre-registration-form-agreement-checkmark-after-position-top);
    width: var(--pre-registration-form-agreement-checkmark-after-width);
    height: var(--pre-registration-form-agreement-checkmark-after-height);
    border: solid #000;
    border-width: var(
        --pre-registration-form-agreement-checkmark-after-border-width
    );
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.section-pre-registration .pre-registration .form-submit {
    display: flex;
    justify-content: center;
}
.section-pre-registration .pre-registration .form-submit .button-submit {
    background: url(../images/pre-registration/button-submit-background.png)
        no-repeat 0 0 / contain;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--pre-registration-button-submit-width);
    height: var(--pre-registration-button-submit-height);
}
.section-pre-registration
    .pre-registration
    .form-submit
    .button-submit
    .button-submit-text {
    background: url(../images/pre-registration/button-submit-text.png) no-repeat
        0 0 / contain;
    width: var(--pre-registration-button-submit-text-width);
    height: var(--pre-registration-button-submit-text-height);
    transition: transform 0.5s;
}
.section-pre-registration
    .pre-registration
    .form-submit
    .button-submit:hover
    .button-submit-text {
    transform: translate3d(0, -1px, 0);
}

/* 스토어 사전예약 */
.section-pre-registration-store {
    background-image: url(../images/pre-registration-store/pre-registration-store-background-image.jpg);
    padding: var(--pre-registration-store-padding);
}
.section-pre-registration-store .headline-wrapper {
    margin-bottom: var(--pre-registration-store-headline-margin-bottom);
}
.section-pre-registration-store .headline-wrapper .headline {
    background: url(../images/pre-registration-store/headline.png) no-repeat 0 0 /
        contain;
    width: var(--pre-registration-store-headline-width);
    height: var(--pre-registration-store-headline-height);
    margin: 0 auto;
}
.section-pre-registration-store .additional-gifts-wrapper {
    margin-bottom: var(--pre-registration-store-gift-wrapper);
}
.section-pre-registration-store .additional-gifts-wrapper .additional-gifts {
    margin-bottom: var(--pre-registration-store-gift-margin-bottom);
}
.section-pre-registration-store
    .additional-gifts-wrapper
    .additional-gifts
    .additional-gifts-list {
    display: flex;
    justify-content: center;
    gap: var(--pre-registration-store-gift-list-gap);
}
.section-pre-registration-store
    .additional-gifts-wrapper
    .additional-gifts
    .additional-gifts-item {
    display: flex;
    flex-direction: column;
    gap: var(--pre-registration-store-gift-item-gap);
}
.section-pre-registration-store
    .additional-gifts-wrapper
    .additional-gifts
    .additional-gifts-item-image {
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
    width: var(--pre-registration-store-gift-image-width);
    height: var(--pre-registration-store-gift-image-height);
}
.section-pre-registration-store
    .additional-gifts-wrapper
    .additional-gifts
    .additional-gifts-item:nth-child(1)
    .additional-gifts-item-image {
    background-image: url(../images/pre-registration-store/gift-01.png);
}
.section-pre-registration-store
    .additional-gifts-wrapper
    .additional-gifts
    .additional-gifts-item:nth-child(2)
    .additional-gifts-item-image {
    background-image: url(../images/pre-registration-store/gift-02.png);
}
.section-pre-registration-store
    .additional-gifts-wrapper
    .additional-gifts
    .additional-gifts-item:nth-child(3)
    .additional-gifts-item-image {
    background-image: url(../images/pre-registration-store/gift-03.png);
}
.section-pre-registration-store
    .additional-gifts-wrapper
    .additional-gifts
    .additional-gifts-item:nth-child(4)
    .additional-gifts-item-image {
    background-image: url(../images/pre-registration-store/gift-04.png);
}
.section-pre-registration-store
    .additional-gifts-wrapper
    .additional-gifts
    .additional-gifts-item-text {
    font-size: var(--pre-registration-store-gift-image-text-font-size);
    font-weight: 500;
    line-height: var(--pre-registration-store-gift-image-text-line-height);
    letter-spacing: -0.25px;
    color: #fff;
    text-align: center;
    text-shadow: 2px 1px 0px rgba(0, 0, 0, 0.8);
}
.section-pre-registration-store .additional-gifts-wrapper .stores-wrapper {
    display: flex;
    justify-content: center;
    /* flex-wrap: wrap; */
    gap: var(--pre-registration-store-stores-wrapper-gap);
    width: var(--pre-registration-store-stores-wrapper-width);
    margin: 0 auto;
}
.section-pre-registration-store
    .additional-gifts-wrapper
    .stores-wrapper
    .link-store {
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
    width: var(--pre-registration-store-link-store-width);
    height: var(--pre-registration-store-link-store-height);
}
.section-pre-registration-store
    .additional-gifts-wrapper
    .stores-wrapper
    .link-store.link-store-google-play {
    background-image: url(../images/pre-registration-store/google-play.png);
}
.section-pre-registration-store
    .additional-gifts-wrapper
    .stores-wrapper
    .link-store.link-store-app-store {
    background-image: url(../images/pre-registration-store/app-store.png);
}
.section-pre-registration-store
    .additional-gifts-wrapper
    .stores-wrapper
    .link-store.pc-version {
    background-image: url(../images/pre-registration-store/pc-version.png);
}
.section-pre-registration-store
    .additional-gifts-wrapper
    .stores-wrapper
    .link-store.link-store-one-store {
    background-image: url(../images/pre-registration-store/one-store.png);
}
.section-pre-registration-store
    .additional-gifts-wrapper
    .stores-wrapper
    .link-store.link-store-kakao-games {
    background-image: url(../images/pre-registration-store/kakao-games.png);
}

/* 누적 사전예약자 */
.section-pre-registration-cumulative-event {
    background-image: url(../images/cumulative-event/cumulative-event-background-image.jpg);
    padding: var(--pre-registration-cumulative-padding);
}
.section-pre-registration-cumulative-event .headline-wrapper {
    margin-bottom: var(
        --pre-registration-cumulative-headline-wrapper-margin-bottom
    );
}
.section-pre-registration-cumulative-event .headline-wrapper .headline {
    background: url(../images/cumulative-event/headline.png) no-repeat 0 0 /
        contain;
    width: var(--pre-registration-cumulative-headline-width);
    height: var(--pre-registration-cumulative-headline-height);
    margin: 0 auto;
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .cumulative-number-of-people {
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pre-registration-cumulative-people-gap);
    width: var(--pre-registration-cumulative-people-width);
    height: var(--pre-registration-cumulative-people-height);
    margin: var(--pre-registration-cumulative-people-margin);
    position: relative;
    overflow: hidden;
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .cumulative-number-of-people::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 200%;
    background: radial-gradient(#000, #392c1b);
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .cumulative-number-of-people
    .headline,
.section-pre-registration-cumulative-event
    .cumulative-event
    .cumulative-number-of-people
    .subhead {
    position: relative;
    z-index: 1;
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .cumulative-number-of-people
    .headline {
    font-size: var(--pre-registration-cumulative-people-headline-font-size);
    letter-spacing: -0.25px;
    color: #ffe2a4;
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .cumulative-number-of-people
    .subhead {
    font-size: var(--pre-registration-cumulative-people-subhead-font-size);
    font-weight: 500;
    letter-spacing: -0.25px;
    color: #fff;
    margin-top: -5px;
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .cumulative-number-of-people
    .subhead
    .people {
    font-size: var(
        --pre-registration-cumulative-people-subhead-people-font-size
    );
    font-weight: 700;
    letter-spacing: -0.25px;
}
.section-pre-registration-cumulative-event .cumulative-event .graph-wrapper {
    position: relative;
    width: var(--pre-registration-cumulative-graph-width);
    margin: 0 auto var(--pre-registration-cumulative-graph-margin-bottom);
}
/* .section-pre-registration-cumulative-event .cumulative-event .graph-wrapper::after {
  content: "";
  position: absolute;
  top: -70%;
  right: -9%;
  background: url(../images/cumulative-event/box.png) no-repeat 0 0 / contain;
  width: var(--pre-registration-cumulative-graph-image-width);
  height: var(--pre-registration-cumulative-graph-image-height);
  animation: floating 1.5s ease-in infinite alternate;
} */
.section-pre-registration-cumulative-event
    .cumulative-event
    .graph-wrapper
    .real-tiem-graph {
    position: relative;
    width: var(--pre-registration-cumulative-graph-width);
    margin-bottom: 10px;
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .graph-wrapper
    .real-tiem-graph
    .graph-border {
    border-radius: 50px;
    border: 5px solid transparent;
    background: linear-gradient(
            to right,
            #fff 0%,
            #afa68f 20%,
            #fff 30%,
            #afa68f 50%,
            #fff 70%,
            #afa68f 80%,
            #fff 100%
        )
        border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    width: var(--pre-registration-cumulative-graph-width);
    height: var(--pre-registration-cumulative-graph-height);
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .graph-wrapper
    .real-tiem-graph
    .graph {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translate(0, -50%);
    border-radius: 50px;
    /* background: linear-gradient(to right, #ffc169 0%, #fe5400 100%); */
    background: transparent;
    height: var(--pre-registration-cumulative-graph-inner-height);
    overflow: hidden;
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .graph-wrapper
    .real-tiem-graph
    .graph::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50px;
    background: linear-gradient(to right, #ffc169 0%, #fe5400 100%);
    width: 100%;
    height: 100%;
    transform: translate3d(-110%, 0, 0);
    transition: transform 1s 1s ease-in-out;
}
.section-pre-registration-cumulative-event.active
    .cumulative-event
    .graph-wrapper
    .real-tiem-graph
    .graph::after {
    transform: translate3d(0, 0, 0);
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .graph-wrapper
    .number-of-people {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: var(--pre-registration-cumulative-graph-people-font-size);
    font-weight: 700;
    letter-spacing: -0.25px;
    color: #ffba41;
    margin-left: 10px;
}
.section-pre-registration-cumulative-event .cumulative-event .rewards-wrapper {
    display: flex;
    justify-content: space-between;
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .rewards-wrapper
    .rewards-item {
    position: relative;
    background: url(../images/cumulative-event/frame.png) no-repeat 0 0 /
        contain;
    width: var(--pre-registration-cumulative-rewards-item-box-width);
    height: var(--pre-registration-cumulative-rewards-item-box-height);
    padding-top: var(
        --pre-registration-cumulative-rewards-item-box-padding-top
    );
    box-sizing: border-box;
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .rewards-wrapper
    .rewards-item
    .headline {
    text-align: center;
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .rewards-wrapper
    .rewards-item
    .headline
    span {
    display: inline-block;
    font-size: var(
        --pre-registration-cumulative-rewards-item-headline-font-size
    );
    font-weight: 700;
    line-height: var(
        --pre-registration-cumulative-rewards-item-headline-line-height
    );
    letter-spacing: -0.25px;
    color: #fff;
    text-align: center;
    position: relative;
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .rewards-wrapper
    .rewards-item
    .headline
    span::before,
.section-pre-registration-cumulative-event
    .cumulative-event
    .rewards-wrapper
    .rewards-item
    .headline
    span::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translate(0, -50%) rotate(45deg);
    background-color: #fff;
    width: var(
        --pre-registration-cumulative-rewards-item-headline-decoration-width-and-height
    );
    height: var(
        --pre-registration-cumulative-rewards-item-headline-decoration-width-and-height
    );
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .rewards-wrapper
    .rewards-item
    .headline
    span::before {
    left: var(
        --pre-registration-cumulative-rewards-item-headline-decoration-position
    );
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .rewards-wrapper
    .rewards-item
    .headline
    span::after {
    right: var(
        --pre-registration-cumulative-rewards-item-headline-decoration-position
    );
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .rewards-wrapper
    .rewards-item
    .item-image {
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: contain;
    height: var(--pre-registration-cumulative-rewards-item-image-height);
    margin: 0 auto;
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .rewards-wrapper
    .rewards-item.p5
    .item-image {
    background-image: url(../images/cumulative-event/item-01.png);
    width: var(--pre-registration-cumulative-rewards-item-image-1-width);
    background-position-x: 7px;
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .rewards-wrapper
    .rewards-item.p10
    .item-image {
    background-image: url(../images/cumulative-event/item-02.png);
    width: var(--pre-registration-cumulative-rewards-item-image-2-width);
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .rewards-wrapper
    .rewards-item.p20
    .item-image {
    background-image: url(../images/cumulative-event/item-03.png);
    width: var(--pre-registration-cumulative-rewards-item-image-3-width);
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .rewards-wrapper
    .rewards-item.p30
    .item-image {
    background-image: url(../images/cumulative-event/item-04.png);
    width: var(--pre-registration-cumulative-rewards-item-image-4-width);
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .rewards-wrapper
    .rewards-item.p40
    .item-image {
    background-image: url(../images/cumulative-event/item-05.png);
    width: var(--pre-registration-cumulative-rewards-item-image-5-width);
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .rewards-wrapper
    .rewards-item.p50
    .item-image {
    background-image: url(../images/cumulative-event/item-06.png);
    width: var(--pre-registration-cumulative-rewards-item-image-6-width);
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .rewards-wrapper
    .rewards-item
    .item-name {
    font-size: var(--pre-registration-cumulative-rewards-item-name-font-size);
    font-weight: 500;
    line-height: var(
        --pre-registration-cumulative-rewards-item-name-line-height
    );
    letter-spacing: -0.25px;
    color: #fff;
    text-align: center;
    text-shadow: 2px 1px 0 rgba(0, 0, 0, 0.8);
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .rewards-wrapper
    .rewards-item
    .item-name
    span {
    color: #24c4ff;
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .rewards-wrapper
    .rewards-item.clear
    .clear {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .rewards-wrapper
    .rewards-item
    .clear
    .clear-mark {
    background: url(../images/cumulative-event/clear-mark.png) no-repeat 0 0 /
        contain;
    width: var(
        --pre-registration-cumulative-rewards-item-clear-mark-width-and-height
    );
    height: var(
        --pre-registration-cumulative-rewards-item-clear-mark-width-and-height
    );
}
.section-pre-registration-cumulative-event
    .cumulative-event
    .rewards-wrapper
    .rewards-item.clear
    .clear {
    display: flex;
}

/* facebook 이벤트 */
.section-pre-registration-facebook-event {
    background-image: url(../images/facebook-event/facebook-event-background-image.jpg);
    padding: var(--pre-registration-facebook-padding);
}
.section-pre-registration-facebook-event .headline-wrapper {
    background: url(../images/facebook-event/headline.png) no-repeat 0 0 /
        contain;
    position: relative;
    width: var(--pre-registration-facebook-headline-width);
    height: var(--pre-registration-facebook-headline-height);
    margin: 0 auto var(--pre-registration-facebook-headline-margin-bottom);
    z-index: 1;
}
.section-pre-registration-facebook-event .facebook-event {
    background: url(../images/facebook-event/items.png) no-repeat 0 0 / contain;
    width: var(--pre-registration-facebook-event-items-width);
    height: var(--pre-registration-facebook-event-items-height);
    margin: 0 auto;
}

/* modal pc client download */
.popover-download-pc-client {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    z-index: 1000;
}
.popover-download-pc-client .popover-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 66.5vw;
    max-height: 80vh;
    margin: 0 auto;
    overflow-y: auto;
}
.popover-download-pc-client .popover-content .content {
    position: relative;
    background: url(../images/pcpopover.jpg) no-repeat 0 0 / cover;
    width: 100%;
    height: 125vw;
}
.popover-download-pc-client .close-popover {
    background: 0;
    position: absolute;
    top: 2vw;
    right: 3vw;
    width: 3.385vw;
    height: 3.385vw;
    z-index: 1;
}
.popover-download-pc-client .popover-content .content .download-link {
    position: absolute;
    top: 19.7vw;
    left: 50%;
    transform: translate(-43%, 0);
    width: 19vw;
    height: 3.5vw;
}
.popover-download-pc-client .popover-content .content .link-official-cafe {
    position: absolute;
    top: 84.5vw;
    left: 50%;
    transform: translate(-9%, 0);
    width: 4.219vw;
    height: 4.6vw;
}

/* footer */
.footer .link-wrapper {
    background: url(../images/footer-backgroud.jpg) no-repeat 50% 0 / cover;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--footer-height);
}
.footer .link-wrapper .link-to-game-contents {
    font-size: var(--footer-link-to-game-content-font-size);
    font-weight: 500;
    letter-spacing: -0.25px;
    color: #e2c4af;
    text-shadow: 2px 1px 0 rgba(0, 0, 0, 0.8);
}
.footer .link-wrapper .link-to-game-contents::after {
    content: "";
    background: url(../images/arrow-right.png) no-repeat 0 0 / contain;
    display: inline-block;
    width: var(--footer-link-to-game-content-arrow-width);
    height: var(--footer-link-to-game-content-arrow-height);
    animation: moveRight 1s infinite alternate;
}
.footer .grade {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--footer-grade-height);
}
.footer .grade .img-grade {
    width: var(--footer-grade-img-width);
}
.footer .grade span {
    font-family: "Noto Sans HK", serif;
    font-optical-sizing: auto;
    font-size: var(--footer-grade-font-size);
    font-weight: 400;
    font-style: normal;
    color: #fff;
    padding-left: 23px;
}
.footer .copyright {
    border-top: 1px solid #333;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--footer-copyright-height);
}
.footer .copyright p {
    font-size: var(--footer-copyright-font-size);
    font-weight: 500;
    letter-spacing: -0.25px;
    color: #616161;
}

/* animation */
@keyframes moveRight {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(2px, 0, 0);
    }
}

@keyframes floating {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(0, -10%, 0);
    }
}

@keyframes roulette {
    0% {
        transform: rotate(111.5deg);
    }
    25% {
        transform: rotate(130deg);
    }
    75% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(111.5deg);
    }
}

/* common animation */
.section-pre-registration .headline-wrapper,
.section-pre-registration .pre-registration,
.section-pre-registration-store .headline-wrapper,
.section-pre-registration-store .additional-gifts-wrapper,
.section-pre-registration-cumulative-event .headline-wrapper,
.section-pre-registration-cumulative-event .cumulative-event,
.section-pre-registration-facebook-event .headline-wrapper,
.section-pre-registration-facebook-event .facebook-event {
    transform: translate3d(0, 10%, 0);
    opacity: 0;
    transition: all 1s;
}
.section-pre-registration .pre-registration,
.section-pre-registration-store .additional-gifts-wrapper,
.section-pre-registration-cumulative-event .cumulative-event,
.section-pre-registration-kakao-event .apply-roulette-event {
    transition: all 1s 0.25s;
}

.section-pre-registration.active .headline-wrapper,
.section-pre-registration.active .pre-registration,
.section-pre-registration-store.active .headline-wrapper,
.section-pre-registration-store.active .additional-gifts-wrapper,
.section-pre-registration-cumulative-event.active .headline-wrapper,
.section-pre-registration-cumulative-event.active .cumulative-event,
.section-pre-registration-facebook-event.active .headline-wrapper,
.section-pre-registration-facebook-event.active .facebook-event {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

/* new content */
.section-main-page {
    height: 100vh;
    padding: 0;
}
.section-main-page .section-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.section-main-page .section-content .headline-wrapper .headline {
    background: url(../images/main-page/headline.png) no-repeat 50% 0 / contain;
    width: calc((1660 / 3840) * 100vw);
    height: calc((678 / 3840) * 100vw);
    margin: 0 auto;
}
.section-main-page .link-stores {
    padding-top: calc((100 / 3840) * 100vw);
}
.section-main-page .link-stores .stores-pc-version {
    background-image: url(../images/main-page/pc-version-2.png);
}