@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-link-height: calc(73px / var(--ratio));
    --header-link-text-height: calc(31px / var(--ratio));
    --header-official-lounge-link-width: calc(300px / var(--ratio));
    --header-official-lounge-link-text-width: calc(175px / var(--ratio));
    --header-youtube-link-width: calc(250px / var(--ratio));
    --header-youtube-link-text-width: calc(86px / 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(466px / var(--ratio));
  --quick-menu-height: calc(438px / var(--ratio)); */
    --quick-menu-width: calc(459px / var(--ratio));
    --quick-menu-height: calc(644px / var(--ratio));
    --quick-menu-padding-top: calc(38px / var(--ratio));
    --quick-menu-list-width: calc(302px / var(--ratio));
    --quick-menu-link-height: calc(66px / 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));
    --quick-menu-pre-order-padding-top: calc(132px / var(--ratio));

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

    /* main page */
    --main-page-padding: calc(972px / var(--ratio)) 0 calc(726px / 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-link-to-pre-registration-text-width: calc(563px / var(--ratio));
    --main-page-link-to-pre-registration-text-height: calc(52px / var(--ratio));

    --main-page-link-stores-gap: calc(20px / var(--ratio));

    --main-page-link-store-width: calc(352px / var(--ratio));
    --main-page-link-store-height: calc(105px / var(--ratio));

    --main-page-link-kakao-games-item-image-width: calc(555px / var(--ratio));
    --main-page-link-kakao-games-item-image-height: calc(481px / var(--ratio));

    --main-240912-update-title-width: calc(1690px / var(--ratio));
    --main-240912-update-title-height: calc(480px / var(--ratio));
    --main-240912-update-title-padding-bottom: calc(100px / var(--ratio));

    --main-241226-new-title-width: calc(1707px / var(--ratio));
    --main-241226-new-title-height: calc(487px / var(--ratio));

    /* footer */
    --footer-height: calc(137px / 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(150px / var(--ratio));
    --footer-copyright-font-size: calc(28px / var(--ratio));

    /* 게임 뉴스 */
    --game-news-height: calc(2160px / var(--ratio));
    --game-news-padding-top: calc(253px / var(--ratio));
    --game-news-headline-margin-bottom: calc(77px / var(--ratio));
    --game-news-headline-width: calc(653px / var(--ratio));
    --game-news-headline-height: calc(73px / var(--ratio));
    --game-news-content-width: calc(1586px / var(--ratio));
    --game-news-swiper-width: calc(1164px / var(--ratio));
    --game-news-swiper-button-width: calc(65px / var(--ratio));
    --game-news-swiper-button-height: calc(123px / 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(299px / 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));

    /* 20240912 사전예약 */
    --main-page-headline-top: calc(600px / var(--ratio));
    --main-page-link-store-bottom: calc(915px / var(--ratio));

    --pre-registration-padding-top: calc(320px / var(--ratio));
    --pre-registration-height: calc(2160px / var(--ratio));

    --pre-registration-headline-padding-bottom: calc(60px / var(--ratio));
    --pre-registration-headline-width: calc(1842px / var(--ratio));
    --pre-registration-headline-height: calc(245px / var(--ratio));

    --pre-registration-rewards-box-width: calc(2086px / var(--ratio));
    --pre-registration-rewards-box-height: calc(527px / var(--ratio));
    --pre-registration-rewards-box-padding-bottom: calc(20px / var(--ratio));
    --pre-registration-rewards-item-width: calc(1676px / var(--ratio));
    --pre-registration-rewards-item-height: calc(436px / var(--ratio));

    --pre-registration-form-box-height: calc(838px / 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-alert-height: calc(154px / var(--ratio));
    --pre-registration-alert-font-size: calc(48px / var(--ratio));
    --pre-registration-alert-link-side-padding: calc(115px / var(--ratio));
    --pre-registration-alert-link-arrow-width: calc(92px / var(--ratio));
    --pre-registration-alert-link-arrow-height: calc(27px / var(--ratio));

    --section-novia-background-width: calc(2237px / var(--ratio));
    --section-novia-background-height: calc(1211px / var(--ratio));
    --section-novia-ch-width: calc(838px / var(--ratio));
    --section-novia-ch-height: calc(1889px / var(--ratio));
    --section-novia-ch-left: calc(250px / var(--ratio));
    --section-novia-link-width: calc(344px / var(--ratio));
    --section-novia-link-height: calc(50px / var(--ratio));
    --section-novia-link-top: calc(1483px / var(--ratio));
    --section-novia-link-left: calc(537px / var(--ratio));

    --section-novia-event-content-width: calc(2237px / var(--ratio));
    --section-novia-event-content-height: calc(1745px / var(--ratio));

    --main-page-link-to-pre-order-width: calc(1610px / var(--ratio));
    --main-page-link-to-pre-order-height: calc(222px / var(--ratio));

    /* 20241226 신규 지역 신규서버 */
    --pre-registration-link-background-height: calc(154px / var(--ratio));
    --pre-registration-link-width: calc(955px / var(--ratio));
    --pre-registration-link-height: calc(106px / var(--ratio));

    --section-coupon-item-width: calc(2250px / var(--ratio));
    --section-coupon-item-height: calc(1291px / var(--ratio));

    --link-coupon-guild-top: calc(720px / var(--ratio));
    --link-coupon-guild-left: calc(376.819px / var(--ratio));
    --link-coupon-guild-width: calc(440px / var(--ratio));
    --link-coupon-guild-height: calc(70px / var(--ratio));

    /* new contents */
    --pre-registration-popup-position-top: calc(337px / var(--ratio));
    --pre-registration-popup-position-left: calc(358px / var(--ratio));
    --pre-registration-popup-width: calc(37px / var(--ratio));
    --pre-registration-popup-height: calc(37px / var(--ratio));

    --section-pre-order-event-headline-width: calc(1214px / var(--ratio));
    --section-pre-order-event-headline-height: calc(374px / var(--ratio));
    --section-pre-order-event-contents-width: calc(2237px / var(--ratio));
    --section-pre-order-event-contents-height: calc(1878px / var(--ratio));
    --section-pre-order-event-link-width: calc(744px / var(--ratio));
    --section-pre-order-event-link-height: calc(132px / var(--ratio));

    --section-pre-order-event-02-content-width: calc(1973px / var(--ratio));
    --section-pre-order-event-02-content-height: calc(1652px / var(--ratio));

    --section-coupon-02-item-width: calc(2237px / var(--ratio));
    --section-coupon-02-item-height: calc(1291px / var(--ratio));
    --link-coupon-guild-02-top: calc(783.36px / var(--ratio));
    --link-coupon-guild-02-left: calc(318.72px / var(--ratio));

    --section-event-04-content-width: calc(2080px / var(--ratio));
    --section-event-04-content-height: calc(2011px / var(--ratio));
    --section-event-04-content-link-top: calc(1732px / var(--ratio));
    --section-event-04-content-link-left: calc(919px / var(--ratio));
    --section-event-04-content-link-width: calc(1070px / var(--ratio));
    --section-event-04-content-link-height: calc(130px / var(--ratio));

    --section-novia-benefit-button-01-top: calc(33px / var(--ratio));
    --section-novia-benefit-button-01-height: calc(1408px / var(--ratio));
    --section-novia-benefit-button-01-a-top: calc(460px / var(--ratio));

    --section-pre-order-button-open-popup-01-top: calc(307px / var(--ratio));
    --section-pre-order-button-open-popup-01-left: calc(190px / 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;
}