@charset "utf-8";

:root {
    --ratio: 4;

    /* header */
    --header-width: calc(3840px / var(--ratio));
    --header-height: calc(290px / var(--ratio));
    --header-content-padding: 0 calc(100px / var(--ratio));
    --header-logo-width: calc(514px / var(--ratio));
    --header-links-gap: calc(20px / var(--ratio));
    --header-links-width-and-height: calc(125px / var(--ratio));
    --header-button-bgm-width: calc(141px / var(--ratio));
    --header-button-bgm-height: calc(81px / var(--ratio));
    --content-header-logo-width: calc(472px / var(--ratio));

    /* quick menu */
    --quick-menu-width: calc(459px / var(--ratio));
    --quick-menu-height: calc(644px / var(--ratio));
    --quick-menu-padding-top: calc(130.56px / var(--ratio));
    --quick-menu-list-width: calc(302px / var(--ratio));
    --quick-menu-link-height: calc(68px / var(--ratio));
    --quick-menu-link-font-size: calc(30px / var(--ratio));
    --quick-menu-official-cafe-link-padding-left: calc(42px / var(--ratio));
    --quick-menu-official-cafe-link-icon-width: calc(32px / var(--ratio));
    --quick-menu-official-cafe-link-icon-height: calc(31px / var(--ratio));
    --quick-menu-showcase-width: calc(390px / var(--ratio));
    --quick-menu-showcase-height: calc(241px / var(--ratio));
    --quick-menu-showcase-position-top: calc(-279px / var(--ratio));
    --quick-menu-showcase-position-left: calc(34px / var(--ratio));
    --quick-menu-showcase-link-to-online-showcase: calc(61px / var(--ratio));

    /* common */
    --section-content-width: calc(2400px / var(--ratio));

    /* main page */
    --main-page-padding: calc(900px / var(--ratio)) 0 calc(521px / var(--ratio));
    --main-page-play-youtube-width: calc(214px / var(--ratio));
    --main-page-play-youtube-height: calc(216px / var(--ratio));
    --main-page-play-youtube-margin: 0 auto calc(114px / var(--ratio));

    --main-page-link-wrapper-margin-bottom: calc(186px / var(--ratio));
    --main-page-link-to-pre-registration-width: calc(864px / var(--ratio));
    --main-page-link-to-pre-registration-height: calc(162px / var(--ratio));

    --main-page-event-period-width: calc(1205px / var(--ratio));
    --main-page-event-period-height: calc(105px / var(--ratio));

    --main-page-link-stores-gap: calc(20px / var(--ratio));
    --main-page-link-stores-padding-top: calc(40px / var(--ratio));
    --main-page-link-store-width: calc(426px / var(--ratio));
    --main-page-link-store-height: calc(127px / var(--ratio));

    /* 사전 예약 */
    --pre-registration-padding: calc(241px / var(--ratio)) 0
        calc(395px / var(--ratio));

    --pre-registration-headline-width: calc(1134px / var(--ratio));
    --pre-registration-headline-height: calc(240px / var(--ratio));
    --pre-registration-headline-margin-bottom: calc(180px / var(--ratio));

    --pre-registration-rewards-margin-bottom: calc(90px / var(--ratio));
    --pre-registration-rewards-list-gap: calc(40px / var(--ratio));
    --pre-registration-rewards-item-gap: calc(15px / var(--ratio));
    --pre-registration-rewards-item-image-width: calc(308px / var(--ratio));
    --pre-registration-rewards-item-image-height: calc(309px / var(--ratio));
    --pre-registration-rewards-item-image-text-font-size: calc(
        26px / var(--ratio)
    );
    --pre-registration-rewards-item-image-text-line-height: calc(
        33.49px / var(--ratio)
    );

    --pre-registration-form-os-gap: calc(100px / var(--ratio));
    --pre-registration-form-os-margin-bottom: calc(46px / var(--ratio));
    --pre-registration-form-os-label-padding-left: calc(63px / var(--ratio));
    --pre-registration-form-os-label-font-size: calc(32px / var(--ratio));
    --pre-registration-form-os-text-gap: calc(10px / var(--ratio));
    --pre-registration-form-os-android-icon-width: calc(39px / var(--ratio));
    --pre-registration-form-os-android-icon-height: calc(43px / var(--ratio));
    --pre-registration-form-os-ios-icon-width: calc(33px / var(--ratio));
    --pre-registration-form-os-ios-icon-height: calc(40px / var(--ratio));
    --pre-registration-form-os-checkmark-width-and-height: calc(
        45px / var(--ratio)
    );
    --pre-registration-form-os-checkmark-after-width-and-height: calc(
        23px / var(--ratio)
    );

    --pre-registration-form-mobile-number-margin-bottom: calc(
        42px / var(--ratio)
    );
    --pre-registration-form-mobile-number-input-width: calc(
        799px / var(--ratio)
    );
    --pre-registration-form-mobile-number-input-height: calc(
        109px / var(--ratio)
    );

    --pre-registration-form-agreement-width: calc(785px / var(--ratio));
    --pre-registration-form-agreement-margin-bottom: calc(54px / var(--ratio));
    --pre-registration-form-agreement-each-gap: calc(10px / var(--ratio));
    --pre-registration-form-agreement-label-padding-left: calc(
        65px / var(--ratio)
    );
    --pre-registration-form-agreement-label-font-size: calc(
        25.12px / var(--ratio)
    );
    --pre-registration-form-agreement-label-line-height: calc(
        44px / var(--ratio)
    );
    --pre-registration-form-agreement-checkmark-width-and-height: calc(
        44px / var(--ratio)
    );
    --pre-registration-form-agreement-checkmark-after-position-left: calc(
        15px / var(--ratio)
    );
    --pre-registration-form-agreement-checkmark-after-position-top: calc(
        5px / var(--ratio)
    );
    --pre-registration-form-agreement-checkmark-after-width: calc(
        10px / var(--ratio)
    );
    --pre-registration-form-agreement-checkmark-after-height: calc(
        20px / var(--ratio)
    );
    --pre-registration-form-agreement-checkmark-after-border-width: 0
        calc(6px / var(--ratio)) calc(6px / var(--ratio)) 0;

    --pre-registration-button-submit-width: calc(913px / var(--ratio));
    --pre-registration-button-submit-height: calc(198px / var(--ratio));
    --pre-registration-button-submit-text-width: calc(371px / var(--ratio));
    --pre-registration-button-submit-text-height: calc(51px / var(--ratio));

    /* 스토어 사전 예약 */
    --pre-registration-store-padding: calc(237px / var(--ratio)) 0
        calc(289px / var(--ratio));
    --pre-registration-store-headline-margin-bottom: calc(240px / var(--ratio));
    --pre-registration-store-headline-width: calc(1235px / var(--ratio));
    --pre-registration-store-headline-height: calc(367px / var(--ratio));

    --pre-registration-store-gift-wrapper: calc(192px / var(--ratio));
    --pre-registration-store-gift-margin-bottom: calc(173px / var(--ratio));
    --pre-registration-store-gift-list-gap: calc(40px / var(--ratio));
    --pre-registration-store-gift-item-gap: calc(15px / var(--ratio));
    --pre-registration-store-gift-image-width: calc(308px / var(--ratio));
    --pre-registration-store-gift-image-height: calc(309px / var(--ratio));

    --pre-registration-store-gift-image-text-font-size: calc(
        26px / var(--ratio)
    );
    --pre-registration-store-gift-image-text-line-height: calc(
        33.49px / var(--ratio)
    );

    --pre-registration-store-stores-wrapper-gap: calc(24px / var(--ratio));
    --pre-registration-store-stores-wrapper-width: calc(877px / var(--ratio));
    --pre-registration-store-link-store-width: calc(426px / var(--ratio));
    --pre-registration-store-link-store-height: calc(126px / var(--ratio));

    /* 누적 사전예약자 */
    --pre-registration-cumulative-padding: calc(237px / var(--ratio)) 0
        calc(292px / var(--ratio));
    --pre-registration-cumulative-headline-wrapper-margin-bottom: calc(
        170px / var(--ratio)
    );
    --pre-registration-cumulative-headline-width: calc(1654px / var(--ratio));
    --pre-registration-cumulative-headline-height: calc(305px / var(--ratio));

    --pre-registration-cumulative-people-gap: calc(25px / var(--ratio));
    --pre-registration-cumulative-people-width: calc(822px / var(--ratio));
    --pre-registration-cumulative-people-height: calc(113px / var(--ratio));
    --pre-registration-cumulative-people-margin: 0 auto
        calc(72px / var(--ratio));
    --pre-registration-cumulative-people-headline-font-size: calc(
        32px / var(--ratio)
    );
    --pre-registration-cumulative-people-subhead-font-size: calc(
        50px / var(--ratio)
    );
    --pre-registration-cumulative-people-subhead-people-font-size: calc(
        70px / var(--ratio)
    );

    --pre-registration-cumulative-graph-margin-bottom: calc(
        197px / var(--ratio)
    );
    --pre-registration-cumulative-graph-width: calc(1423px / var(--ratio));
    --pre-registration-cumulative-graph-height: calc(95px / var(--ratio));
    --pre-registration-cumulative-graph-inner-height: calc(71px / var(--ratio));
    --pre-registration-cumulative-graph-people-position-top: calc(
        115px / var(--ratio)
    );
    --pre-registration-cumulative-graph-people-font-size: calc(
        26px / var(--ratio)
    );
    --pre-registration-cumulative-graph-image-width: calc(244px / var(--ratio));
    --pre-registration-cumulative-graph-image-height: calc(
        242px / var(--ratio)
    );

    --pre-registration-cumulative-rewards-item-box-width: calc(
        376px / var(--ratio)
    );
    --pre-registration-cumulative-rewards-item-box-height: calc(
        825px / var(--ratio)
    );
    --pre-registration-cumulative-rewards-item-box-padding-top: calc(
        64px / var(--ratio)
    );
    --pre-registration-cumulative-rewards-item-headline-font-size: calc(
        42px / var(--ratio)
    );
    --pre-registration-cumulative-rewards-item-headline-line-height: calc(
        103px / var(--ratio)
    );
    --pre-registration-cumulative-rewards-item-headline-decoration-width-and-height: calc(
        12px / var(--ratio)
    );
    --pre-registration-cumulative-rewards-item-headline-decoration-position: calc(
        -20px / var(--ratio)
    );

    --pre-registration-cumulative-rewards-item-image-height: calc(
        475px / var(--ratio)
    );
    --pre-registration-cumulative-rewards-item-image-1-width: calc(
        298px / var(--ratio)
    );
    --pre-registration-cumulative-rewards-item-image-2-width: calc(
        294px / var(--ratio)
    );
    --pre-registration-cumulative-rewards-item-image-3-width: calc(
        228px / var(--ratio)
    );
    --pre-registration-cumulative-rewards-item-image-4-width: calc(
        225px / var(--ratio)
    );
    --pre-registration-cumulative-rewards-item-image-5-width: calc(
        219px / var(--ratio)
    );
    --pre-registration-cumulative-rewards-item-image-6-width: calc(
        239px / var(--ratio)
    );
    --pre-registration-cumulative-rewards-item-name-font-size: calc(
        26px / var(--ratio)
    );
    --pre-registration-cumulative-rewards-item-name-line-height: calc(
        33.49px / var(--ratio)
    );
    --pre-registration-cumulative-rewards-item-clear-mark-width-and-height: calc(
        249px / var(--ratio)
    );

    /* facebook 이벤트 */
    --pre-registration-facebook-padding: calc(238px / var(--ratio)) 0
        calc(192px / var(--ratio));
    --pre-registration-facebook-headline-width: calc(1754px / var(--ratio));
    --pre-registration-facebook-headline-height: calc(629px / var(--ratio));
    --pre-registration-facebook-headline-margin-bottom: calc(
        32px / var(--ratio)
    );
    --pre-registration-facebook-event-items-width: calc(2400px / var(--ratio));
    --pre-registration-facebook-event-items-height: calc(1070px / var(--ratio));

    /* footer */
    --footer-height: calc(213px / var(--ratio));
    --footer-link-to-game-content-font-size: calc(42px / var(--ratio));
    --footer-link-to-game-content-arrow-width: calc(27px / var(--ratio));
    --footer-link-to-game-content-arrow-height: calc(31px / var(--ratio));
    --footer-copyright-height: calc(213px / var(--ratio));
    --footer-copyright-font-size: calc(28px / var(--ratio));
    --footer-grade-img-width: calc(133px / var(--ratio));
    --footer-grade-height: calc(303px / var(--ratio));
    --footer-grade-font-size: calc(24px / var(--ratio));

    /* 게임 소개 */
    --game-introduce-height: calc(2160px / var(--ratio));
    --game-introduce-headline-position-top: calc(321px / var(--ratio));
    --game-introduce-headline-width: calc(473px / var(--ratio));
    --game-introduce-headline-height: calc(169px / var(--ratio));
    --game-introduce-background-image-position-top: calc(394px / var(--ratio));
    --game-introduce-background-image-position-right: calc(28px / var(--ratio));
    --game-introduce-background-image-width: calc(1588px / var(--ratio));
    --game-introduce-background-image-height: calc(1421px / var(--ratio));
    --game-introduce-content-margin: 0 calc(160px / var(--ratio))
        calc(255px / var(--ratio)) 0;
    --game-introduce-content-headline-width: calc(363px / var(--ratio));
    --game-introduce-content-headline-height: calc(132px / var(--ratio));
    --game-introduce-button-width: calc(349px / var(--ratio));
    --game-introduce-button-height: calc(82px / var(--ratio));
    --game-introduce-button-margin-top: calc(30px / var(--ratio));
    --game-introduce-button-arrow-position-right: calc(46px / var(--ratio));
    --game-introduce-button-arrow-width: calc(19px / var(--ratio));
    --game-introduce-button-arrow-height: calc(21px / var(--ratio));
    --game-introduce-core-content-background-image-position-bottom: calc(
        142px / var(--ratio)
    );
    --game-introduce-core-content-background-image-position-left: calc(
        -97px / var(--ratio)
    );
    --game-introduce-core-content-background-image-width: calc(
        1662px / var(--ratio)
    );
    --game-introduce-core-content-background-image-height: calc(
        1428px / var(--ratio)
    );
    --game-introduce-core-content-content-margin: calc(555px / var(--ratio)) 0 0
        calc(153px / var(--ratio));
    --game-introduce-core-content-content-headline-width: calc(
        372px / var(--ratio)
    );
    --game-introduce-core-content-content-headline-height: calc(
        133px / var(--ratio)
    );

    /* 미디어 */
    --media-height: calc(2160px / var(--ratio));
    --media-headline-position-top: calc(321px / var(--ratio));
    --media-headline-width: calc(473px / var(--ratio));
    --media-headline-height: calc(173px / var(--ratio));
    --media-gallary-background-image-position-top: calc(472px / var(--ratio));
    --media-gallary-background-image-position-right: calc(-27px / var(--ratio));
    --media-gallary-background-image-width: calc(1588px / var(--ratio));
    --media-gallary-background-image-height: calc(1416px / var(--ratio));
    --media-gallary-content-margin: 0 calc(192px / var(--ratio))
        calc(300px / var(--ratio)) 0;
    --media-gallary-content-headline-width: calc(278px / var(--ratio));
    --media-gallary-content-headline-height: calc(132px / var(--ratio));
    --media-ost-background-image-position-bottom: calc(142px / var(--ratio));
    --media-ost-background-image-position-left: calc(-97px / var(--ratio));
    --media-ost-background-image-width: calc(1661px / var(--ratio));
    --media-ost-background-image-height: calc(1418px / var(--ratio));
    --media-ost-content-margin: calc(480px / var(--ratio)) 0 0
        calc(154px / var(--ratio));
    --media-ost-content-headline-width: calc(404px / var(--ratio));
    --media-ost-content-headline-height: calc(129px / var(--ratio));

    /* 히스토리 */
    --history-height: calc(2160px / var(--ratio));
    --history-padding-top: calc(317px / var(--ratio));
    --history-headline-margin-bottom: calc(107px / var(--ratio));
    --history-headline-width: calc(1552px / var(--ratio));
    --history-headline-height: calc(182px / var(--ratio));
    --history-content-width: calc(2393px / var(--ratio));
    --history-content-height: calc(1087px / var(--ratio));
    --history-link-wrapper-margin-top: calc(120px / var(--ratio));
    --history-link-gap: calc(34px / var(--ratio));
    --history-link-width: calc(950px / var(--ratio));
    --history-link-height: calc(211px / var(--ratio));
    --history-link-text-width: calc(412px / var(--ratio));
    --history-link-text-height: calc(48px / var(--ratio));
    --history-link-text-arrow-width: calc(25px / var(--ratio));
    --history-link-text-arrow-height: calc(29px / var(--ratio));

    /* contents modal */
    --contents-modal-width: calc(2800px / var(--ratio));
    --contents-modal-height: calc(1584px / var(--ratio));
    --contents-modal-button-close-modal-position-top: calc(50px / var(--ratio));
    --contents-modal-button-close-modal-width: calc(105px / var(--ratio));
    --contents-modal-button-close-modal-height: calc(101px / var(--ratio));
    --contents-modal-headline-padding-top: calc(83px / var(--ratio));
    --contents-modal-headline-margin-bottom: calc(47px / var(--ratio));
    --contents-modal-headline-width: calc(183px / var(--ratio));
    --contents-modal-headline-height: calc(46px / var(--ratio));
    --contents-modal-gallery-headline-width: calc(128px / var(--ratio));
    --contents-modal-gallery-headline-height: calc(46px / var(--ratio));

    /* 핵심콘텐츠 modal */
    --core-contents-modal-headline-width: calc(228px / var(--ratio));
    --core-contents-modal-headline-height: calc(47px / var(--ratio));
    --core-contents-modal-swiper-play-button-width-and-height: calc(
        177px / var(--ratio)
    );

    /* swiper */
    --swiper-carousel-slide-width: calc(1717px / var(--ratio));
    --swiper-game-introduce-top-height: calc(973px / var(--ratio));
    --swiper-game-introduce-top-margin-bottom: calc(30px / var(--ratio));
    --swiper-game-introduce-thumbs-height: calc(323px / var(--ratio));
    --swiper-navigation-button-position-top: calc(1300px / var(--ratio));
    --swiper-navigation-button-width: calc(56px / var(--ratio));
    --swiper-navigation-button-height: calc(123px / var(--ratio));
    --swiper-navigation-button-position-left-right: calc(455px / var(--ratio));

    /* modal OST */
    --ost-headline-width: calc(99px / var(--ratio));
    --ost-headline-height: calc(41px / var(--ratio));
    --ost-content-position: translate3d(0, calc(60px / var(--ratio)), 0);
    --ost-progress-circle-width-and-height: calc(28px / var(--ratio));
    --ost-swiper-width: calc(1096px / var(--ratio));
    --ost-swiper-thumbnail-width-and-height: calc(374px / var(--ratio));
    --ost-swiper-thumbnail-image-width-and-height: calc(336px / var(--ratio));
    --ost-swiper-thumbnail-image-inner-circle-width-and-height: calc(
        60px / var(--ratio)
    );
    --ost-swiper-thumbnail-image-cover-width-and-height: calc(
        335px / var(--ratio)
    );
    --ost-controls-position-top: calc(-83px / var(--ratio));
    --ost-controls-width: calc(1676px / var(--ratio));
    --ost-controls-height: calc(337px / var(--ratio));
    --ost-controls-title-padding-top: calc(120px / var(--ratio));
    --ost-controls-title-font-size: calc(28px / var(--ratio));
    --ost-controls-title-line-height: calc(29.94px / var(--ratio));
    --ost-controls-box-gap: calc(135px / var(--ratio));
    --ost-controls-box-position-bottom: calc(69px / var(--ratio));
    --ost-controls-box-button-prev-next-width: calc(44px / var(--ratio));
    --ost-controls-box-button-prev-next-height: calc(46px / var(--ratio));
    --ost-controls-box-button-play-width: calc(52px / var(--ratio));
    --ost-controls-box-button-play-height: calc(64px / var(--ratio));
    --ost-controls-box-button-pause-width: calc(58px / var(--ratio));
    --ost-controls-box-button-pause-height: calc(64px / var(--ratio));

    /* footer term */
    --footer-copyright-flex-gap: calc(28px / var(--ratio));
    --footer-term-link-font-size: calc(28px / var(--ratio));
}

.section-pre-registration
    .pre-registration
    .form-mobile-number
    input[type="text"] {
    font-size: 16px;
}
.modal.youtube .button-close-modal {
    top: 0;
    right: -35px;
}
.modal .modal-wrapper {
    width: 80%;
}

.game-introduce .main {
    overflow-x: hidden;
}
.contents-modal .contents-modal-container {
    width: 100%;
}
.swiper-button-next,
.swiper-button-prev {
    display: none;
}
.contents-modal.ost .contents-modal-container {
    width: 90%;
}
.contents-modal.ost .contents-modal-container .button-close-modal {
    top: 5%;
    right: 5%;
}
.modal .modal-wrapper .modal-content .content-wrapper {
    height: 200px;
}