* {
  font-family: 'Rounded Mgen+ 1c' !important;
}

[v-clock] {
    display: none;
}

body:not(.guideline) {
    font-size: var(--font-size-24);
    line-height: var(--font-line-height-36);
}
.container {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}
.container.menuOpen {
    overflow: hidden;
}


/* Common */
.snsLinkUl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 34vw;
    margin: 0 auto;
}
.snsLinkUl li {
    width: 12vw;
}
.snsLinkUl a {
    display: block;
}


/* Header */
header {
    z-index: 10;
    width: 100%;
    max-width: 750px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5.3333vw 0 1.4666vw;
}
.logoA {
    display: block;
    width: 41.0666vw;
    line-height: 0;
}
.menuBtnDiv {
    width: 9.0666vw;
    height: 9.0666vw;
}
.menuBtnDiv a {
    display: block;
    line-height: 0;
    width: 100%;
    transition: opacity .3s ease-in-out;
}
.menuBtnDiv a.btnMenuClose {
    opacity: 0;
}
.menuOpen .menuBtnDiv a.btnMenuOpen {
    opacity: 0;
}
.menuOpen .menuBtnDiv a.btnMenuClose {
    opacity: 1;
}
/* Nav */
nav {
    z-index: 9;
    width: 100%;
    max-width: 750px;
    background: var(--bg-color-purple) url(../images/bg/bg_nav_bottom.png) center bottom no-repeat;
    background-size: 100% auto;
    border-bottom-left-radius: 6.4vw;
    border-bottom-right-radius: 6.4vw;
    padding-bottom: 29vw;
    padding-top: 28.6666vw;
    text-align: center;
    transform: translateY(-100%);
    transition: transform .3s ease-in-out;
    box-shadow: 0 .4rem .8rem rgba(0, 0, 0, 0.16);
}
.menuOpen nav {
    transform: translateY(0);
}
.menuTitleImg {
    width: 66.6666vw;
    margin-bottom: 5.8666vw;
}
.menuUl {
    font-size: var(--font-size-50);
    line-height: var(--font-size-50);
}
.menuUl li {
    width: 100%;
    padding: 4vw 0;
    position: relative;
}
.menuUl li::after {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    content: "";
    display: block;
    width: 55.7333vw;
    height: .1rem;
    border-bottom: .1rem dashed var(--color-white);
}
.menuUl li:last-child::after {
    display: none;
}
.menuUl a {
    color: var(--color-white);
    font-family: 'Rounded Mgen+ 1c';
    font-weight: 400;
    
}
nav .snsLinkUl {
    margin-top: 6.4vw;
}


/* Section */
/* Section1 */
#section1 {
    z-index: 1;
    padding: 25.6vw 0;
    background: url("../images/bg/bg_section1.png") center repeat;
    background-size: contain;
}
.videoDiv {
    height: 56.2666vw;
}
.p2kVideo {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Section2 */
#section2 {
    margin-top: -32vw;
    z-index: 2;
    border-radius: 6vw 6vw 0 0;
    min-height: 100vh;
    overflow: hidden;
}
.preRegistrationSection1 {
    background: url(../images/bg/bg_pre_registration_section1.png) no-repeat center;
    background-size: 100% 100%;
    padding: 3.7333vw 0 5.3333vw;
    text-align: center;
}
.preRegistrationSection1 .logoImg {
    width: 64vw;
}
.preRegistrationA {
    display: inline-block;
    width: 66.6666vw;
}
.preRegistrationSection2 {
    z-index: 2;
    top: -.1rem;
    background-color: var(--bg-color-purple);
    line-height: 0;
}
.preRegistrationTitleAndDateDiv {
    position: absolute;
    top: .6666vw;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    line-height: 0;
}
.preRegistrationTitleImg {
    width: 72.5333vw;
    margin-bottom: 2.2666vw;
}
.preRegistrationDateImg {
    width: 64.2666vw;
}
.preRegistrationContantsDiv {
    width: 79.4666vw;
    position: absolute;
    top: 90.6vw;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}
.phoneNumberInput {
    width: 100%;
    height: 11.5vw;
    border: .5vw solid var(--border-color-purple);
    border-radius: 3vw;
    padding: 0 2.6vw;
    font-size: var(--font-size-28);
    /* font-weight: var(--font-weight-bold); */
    color: var(--font-color-purple4);
    margin-bottom: 4vw;
}
.phoneNumberInput:focus, .phoneNumberInput:focus-visible {
    border: .5vw solid var(--border-color-purple);
    outline: none;
}
.personalInformationDiv {
    padding: 0 2.2666vw;
    margin-bottom: 3.7333vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: var(--font-weight-regular);
}
.personalInformationDiv > div {
    display: flex;
    align-items: center;
    color: var(--font-color-gray);
}
.personalInformationInput {
    width: 4vw;
    height: 4vw;
    margin-right: 2vw;
    border-radius: 0;
    vertical-align: middle;
    border: .4vw solid var(--border-color-gray);
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    background-color: var(--color-white);
}
.personalInformationInput:checked {
    background-color: var(--color-white);
    position: relative;
}
.personalInformationInput:checked::before {
    content: "";
    position: absolute;
    left: 1vw;
    top: -.5vw;
    width: .9vw;
    height: 2.7vw;
    border: solid var(--border-color-gray);
    border-width: 0 .6vw .6vw 0;
    transform: rotate(45deg);
}
.personalInformationTextLabel, .personalInformationMoreBtn {
    top: .1vw;
}
.personalInformationTextLabel {
    /* font-size: var(--font-size-24); */
    font-family: 'Rounded Mgen+ 1c', sans-serif;
    font-weight: 400; /* regular */
    cursor: pointer;
}
.personalInformationMoreBtn {
    /* font-weight: var(--font-weight-bold); */
    text-decoration: underline;
    color: var(--font-color-purple3);
}
.preRegistrationBtn {
    display: inline-block;
    width: 66.6666vw;
    margin-bottom: 2.4vw;
}
.preRegistrationNoteBtn {
    display: inline-block;
    font-size: var(--font-size-30);
    /* font-weight: var(--font-weight-bold); */
    line-height: 1;
    color: var(--font-color-purple3);
    border-bottom: .3vw solid var(--font-color-purple3);
}
.preRegistrationStoreA {
    display: inline-block;
    width: 66.6666vw;
    position: absolute;
    left: 50%;
    bottom: 25.5vw;
    transform: translateX(-50%);
}
.preRegistrationSection3 {
    margin-top: -6vw;
    z-index: 3;
    background: url(../images/bg/bg_section2.png) repeat-y center;
    background-size: contain;
    border-radius: 6vw 6vw 0 0;
    padding: 17.3333vw 6vw 21.3333vw;
    text-align: center;
}
.preRegistrationSection3TitleImg {
    width: 88vw;
    position: absolute;
    top: -5.4vw;
    left: 50%;
    transform: translateX(-50%);
}
.preRegistrationSection3DescDiv {
    font-size: var(--font-size-38);
    /* font-weight: var(--font-weight-extra-bold); */
    line-height: var(--font-line-height-50);
    color: var(--font-color-purple2);
    margin-bottom: 4.8vw;
}
.stageRewardDiv {
    height: 303.7333vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5.3333vw 0 1.6vw;
    margin-bottom: 7.2vw;
}
.stageRewardDiv > div {
    height: 100%;
}
.stageRewardDiv img {
    width: auto;
    height: 100%;
}
.stageRewardInfoTextA {
    display: inline-block;
    font-size: var(--font-size-34);
    line-height: var(--font-line-height-42);
    color: var(--font-color-purple2);
    text-decoration: underline;
    margin-bottom: 6.4vw;


    font-family: 'Rounded Mgen+ 1c', sans-serif;
    font-weight: 400; /* regular */

}
.stageRewardSnsDiv {
    border: .8vw solid var(--border-color-pink);
    border-radius: 6.6666vw;
    background-color: var(--bg-color-pink-70);
    padding: 6vw 0;
    color: var(--font-color-purple2);
    font-size: var(--font-size-36);
    line-height: var(--font-line-height-42);
    font-weight: var(--font-weight-bold);
}
.stageRewardSnsDescDiv {
    margin-bottom: 4.8vw;
      font-weight:400;
}
.stageRewardSnsDescDiv strong {
    font-weight: var(--font-weight-extra-bold);
    color: var(--font-color-pink);
}

.rewardContentDiv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4;
    margin-bottom: 7.2vw;
}


/* Section3 */
#section3 {
    margin-top: -27vw;
    z-index: 4;
    border-radius: 6vw 6vw 0 0;
    background-color: var(--bg-color-section3);
    padding: 6.4vw 0 10.1333vw;
    text-align: center;
}
.section3TitleImg {
    width: 34.9333vw;
    margin-bottom: 3.7333vw;
}
.section3ContentsImg {
    width: 70.6666vw;
}
.section3DescDiv {
    margin-top: 6.9333vw;    
    /* line-height: var(--font-line-height-36); */
    /* letter-spacing: var(--font-letter-spacing-40); */
    color: var(--font-color-purple5);
    font-family: 'Rounded Mgen+ 1c', sans-serif;
    font-weight: 400; /* regular */
}


/* Modal */
.modal {
    width: 100%;
    max-height: 100%;
    max-width: 75rem;
    overflow-y: scroll;
    z-index: 20;
    background-color: var(--color-white);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-black);
    font-weight: var(--font-weight-regular);
    border-radius: 6.1333vw;
}
.btnModalClose {
    width: 9.3333vw;
    height: 9.3333vw;
    bottom: 4vw;
    right: 4vw;
}
/* Success & Error Modal */
.successModal, .errorModal {
    padding: 12.8vw 12vw 5.3333vw;
    text-align: center;
}
.successMessageDiv, .errorMessageDiv {
    font-size: var(--font-size-30);
    line-height: var(--font-line-height-42);
    white-space: nowrap;
    margin-bottom: 6vw;
    font-weight: 400; /* regular */
}
.closeBtn {
    display: inline-block;
    width: 30.6666vw;
    color: var(--color-white);
    font-size: var(--font-size-30);
    line-height: 10.6666vw;

    background-color: var(--button-color-popup);
    text-align: center;
    border-radius: 5.3333vw;
}
/* Info Modal */
.infoModal {
    text-align: center;
    width: 100%;
    max-width: 75rem;
    padding: 6.6666vw 4.8vw 15.2vw;
}
.infoModalTitleDiv {
    margin-bottom: 6.4vw;;
}
.infoModalTitleDiv > div {
    position: absolute;
    top: 9.8vw;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: var(--color-white);
    font-weight: 400;
    font-size: var(--font-size-34);
}
.infoMessageDiv {
    text-align: left;
    padding: 0 4.5333vw;
    font-weight: 400;

}



@media (min-width: 750px) {
    html {
        background-attachment: fixed;
        background-image: url(../images/bg/bg_cloud.png), url(../images/bg/bg_star.png), linear-gradient(var(--bg-color-root-start), var(--bg-color-root-end));
        background-repeat: repeat-x, repeat, no-repeat;
        background-position: bottom center;
    }


    /* Common */
    .snsLinkUl {
        width: 25rem;
    }
    .snsLinkUl li {
        width: 9rem;
    }


    /* Header */
    header {
        padding: 0 4rem 0 1.1rem;
    }
    .logoA {
        width: 30.8rem;
    }
    .menuBtnDiv {
        width: 6.8rem;
        height: 6.8rem;
    }
    /* Nav */
    nav {
        border-bottom-left-radius: 4.5rem;
        border-bottom-right-radius: 4.5rem;
        padding-bottom: 5.6rem;
        padding-top: 21.5rem;
    }
    .menuTitleImg {
        width: 50rem;
        margin-bottom: 3.7rem;
    }
    .lineDiv {
        width: 53rem;
        margin: 0 auto .5rem;
        border-bottom: .3rem solid var(--font-color-brown);
    }
    .menuUl li {
        padding: 3rem 0;
    }
    .menuUl li::after {
        width: 41.8rem;
    }
    nav .snsLinkUl {
        margin-top: 4.8rem;
    }


    /* Section */
    /* Section1 */
    #section1 {
        padding: 19.2rem 0;
    }
    .videoDiv {
        height: 42.2rem;
    }

    /* Section2 */
    #section2 {
        margin-top: -15rem;
        border-radius: 4.5rem 4.5rem 0 0;
    }
    .preRegistrationSection1 {
        padding: 3rem 0 4rem;
    }
    .preRegistrationSection1 .logoImg {
        width: 48rem;
    }
    .preRegistrationA {
        width: 50rem;
    }
    .preRegistrationTitleAndDateDiv {
        top: .5rem;
    }
    .preRegistrationTitleImg {
        width: 54.4rem;
        margin-bottom: 1.8rem;
    }
    .preRegistrationDateImg {
        width: 40rem;
    }
    .preRegistrationContantsDiv {
        width: 59.6rem;
        top: 68.4rem;
    }
    .phoneNumberInput {
        height: 9.2rem;
        border: .3rem solid var(--border-color-purple);
        border-radius: 2rem;
        padding: 0 3rem;
        margin-bottom: 3rem;
    }
    .phoneNumberInput:focus, .phoneNumberInput:focus-visible {
        border: .3rem solid var(--border-color-purple);
    }
    .personalInformationDiv {
        padding: 0 1.8rem;
        margin-bottom: 2.8rem;
    }
    .personalInformationInput {
        width: 4vw;
        height: 4vw;
        margin-right: 2vw;
        border-radius: 0;
        vertical-align: middle;
        border: .4vw solid var(--border-color-gray);
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        background-color: var(--color-white);
    }
    .personalInformationInput {
        width: 2.6rem;
        height: 2.6rem;
        margin-right: .4rem;
        border: .2rem solid var(--border-color-gray);
    }
    .personalInformationInput:checked::before {
        left: .7rem;
        top: -.3rem;
        width: .6rem;
        height: 1.8rem;
        border-width: 0 .3rem .3rem 0;
    }
    .personalInformationTextLabel, .personalInformationMoreBtn {
        top: .1rem;
    }
    .preRegistrationBtn {
        width: 50rem;
        margin-bottom: 1.8rem;
    }
    .preRegistrationNoteBtn {
        border-bottom: .2rem solid var(--font-color-purple3);
    }
    .preRegistrationStoreA {
        width: 50rem;
        bottom: 19rem;
    }
    .preRegistrationSection3 {
        margin-top: -4rem;
        border-radius: 4.5rem 4.5rem 0 0;
        padding: 13rem 4.5rem 16rem;
    }
    .preRegistrationSection3TitleImg {
        width: 66rem;
        top: -4rem;
    }
    .preRegistrationSection3DescDiv {
        margin-bottom: 3.8rem;
    }
    .stageRewardDiv {
        height: 227.8rem;
        padding: 0 1.2rem 0 4rem;
        margin-bottom: 5.4rem;
    }
    .stageRewardInfoTextA {
        margin-bottom: 4.8rem;
    }
    .stageRewardSnsDiv {
        border: .6rem solid var(--border-color-pink);
        border-radius: 5rem;
        padding: 4.4rem 0;
    }
    .stageRewardSnsDescDiv {
        margin-bottom: 3.6rem;
        font-weight:400;
        
    }


    /* Section3 */
    #section3 {
        border-radius: 4.5rem 4.5rem 0 0;
        padding: 4.8rem 0 7.2rem;
        margin-top: -14rem;
    }
    .section3TitleImg {
        width: 26.2rem;
        margin-bottom: 2.8rem;
    }
    .section3ContentsImg {
        width: 53rem;
    }
    .section3DescDiv {
        margin-top: 5.2rem;
    }


    /* Modal */
    .modal {
        border-radius: 4.6rem;
    }
    .btnModalClose {
        width: 6.8rem;
        height: 6.8rem;
        bottom: 3rem;
        right: 3rem;
    }
    /* Success & Error Modal */
    .successModal, .errorModal {
        padding: 9.6rem 9rem 4rem;
    }
    .successMessageDiv, .errorMessageDiv {
        margin-bottom: 4.2rem;
    }
    .closeBtn {
        width: 23rem;
        line-height: 8rem;
        border-radius: 4rem;
    }
    /* Info Modal */
    .infoModal {
        padding: 5rem 3.6rem 11.2rem;
    }
    .infoModalTitleDiv {
        margin-bottom: 4.8rem;
    }
    .infoModalTitleDiv > div {
        position: absolute;
        top: 7.4rem;
    }
    .infoMessageDiv {
        padding: 0 3.4rem;
    }
}

input::placeholder {
  font-family: 'Rounded Mgen+ 1c', sans-serif;
  font-weight: 400;
}



/* 핸드폰 가로 모드일 때 스타일 적용 */
@media (orientation: landscape) {
    nav {
        overflow-y: scroll;
        height: -webkit-fill-available;
    }
}



@font-face {
  font-family: 'Rounded Mgen+ 1c';
  src: url('./fonts/rounded-x-mgenplus-1c-thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Rounded Mgen+ 1c';
  src: url('./fonts/rounded-x-mgenplus-1c-light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Rounded Mgen+ 1c';
  src: url('./fonts/rounded-x-mgenplus-1c-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Rounded Mgen+ 1c';
  src: url('./fonts/rounded-x-mgenplus-1c-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Rounded Mgen+ 1c';
  src: url('./fonts/rounded-x-mgenplus-1c-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Rounded Mgen+ 1c';
  src: url('./fonts/rounded-x-mgenplus-1c-heavy.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Rounded Mgen+ 1c';
  src: url('./fonts/rounded-x-mgenplus-1c-black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}