[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: 44vw;
    margin: 0 auto;
}
.snsLinkUl li {
    width: 12vw;
}
.snsLinkUl a {
    display: block;
}


/* Header */
header {
    z-index: 10;
    width: 100%;
    max-width: 750px;
    height: 14.3733vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5.3333vw 0 1.4666vw;
    background: url(../images/bg/header.png) center top no-repeat;
    background-size: 100% auto;
}
.logoA {
    display: block;
    width: 33.3333vw;
    margin-top: -2.6666vw;
    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-weight: 800;
}
nav .snsLinkUl {
    margin-top: 6.4vw;
}


/* Section */
/* Section1 (Hero / Store) */
#section1 {
    z-index: 1;
    background-color: #CFCBF5;
    background-image: url("../images/bg/bg_main.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    padding: 18.6666vw 0 12vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden; /* heroAvataImg가 화면보다 커지면 좌우를 잘라 가로 스크롤 방지 */
}
.heroKeyvisualImg {
    width: 100%;
}
.heroLogoImg {
    width: 52vw;
    margin-top: 1.3333vw;
}
.heroTitleDiv {
    margin-top: 4vw;
    line-height: 0;
}
.heroTitleImg {
    width: 65.4666vw;
}
.storeRewardArea {
    width: 100%;
    margin-top: 9.3333vw;
}
.storeHeadingDiv {
    margin-bottom: 4.8vw;
}
.storeHeadingTitle {
    font-size: var(--font-size-50);
    line-height: 1.2;
    font-weight: var(--font-weight-extra-bold);
    color: #5B3E9E;
}
.storeHeadingSub {
    font-size: var(--font-size-34);
    font-weight: var(--font-weight-bold);
    color: #7C5FC0;
}
.storeRewardImg {
    width: 82.6666vw;
}
.storeGuideText {
    margin-top: 4.8vw;
    font-size: var(--font-size-26);
    line-height: 125%;
    font-weight: var(--font-weight-bold);
    color: #FFFFFF;
}
.storeBtn {
    display: inline-block;
    width: 62vw;
    margin-top: 5.3333vw;
}
.heroAvataImg {
    width: 112vw;
    margin-top: -3vw;
    margin-right: 3vw;
}

/* Section2 (Milestone Rewards) */
#section2 {
    margin-top: -13vw;
    z-index: 2;
    background-color: #EDD3FF;
    border-radius: 10vw 10vw 0 0;
    overflow: visible;
}
.milestoneTitleImg {
    width: 80%;
    display: block;
    position: relative;
    top: -6.6666vw;
    margin: 0 auto;
}
.milestoneInner {
    margin-top: -4vw;
    padding: 0 6vw 12vw;
    text-align: center;
}
.milestoneDetailArea {
    background-color: #CCB0FF;
    padding: 8vw 0 18vw;
    overflow: hidden;
}
.milestoneDescDiv {
    font-size: var(--font-size-38);
    font-weight: var(--font-weight-extra-bold);
    line-height: var(--font-line-height-100);
    color: #714BCB;
    margin-bottom: 6.4vw;
}
.stageRewardDiv {
    height: 352vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.6666vw;
    margin-bottom: 7.2vw;
}
.stageRewardDiv img {
    width: auto;
    height: 100%;
}
.stageRewardInfoTextA {
    display: inline-block;
    font-size: var(--font-size-34);
    line-height: var(--font-line-height-42);
    font-weight: var(--font-weight-extra-bold);
    color: var(--font-color-purple2);
    text-decoration: underline;
    margin-bottom: 6.4vw;
}
.milestoneDetailBox {
    width: 120vw;
    margin-left: 50%;
    transform: translateX(-50%);
}
.milestoneDetailImg {
    width: 100%;
    display: block;
}
.milestoneDetailSns {
    position: absolute;
    left: 50%;
    bottom: 15%;
    transform: translateX(-50%);
    width: 44vw;
}


/* Section3 */
#section3 {
    margin-top: -13vw;
    z-index: 4;
    border-radius: 10vw 10vw 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;
    color: var(--font-color-purple5);
    font-size: var(--font-size-22);
    line-height: var(--font-line-height-36);
    letter-spacing: var(--font-letter-spacing-40);
}


/* 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;
}
.closeBtn {
    display: inline-block;
    width: 30.6666vw;
    color: var(--color-white);
    font-size: var(--font-size-30);
    line-height: 10.6666vw;
    font-weight: var(--font-weight-bold);
    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: 700;
    font-size: var(--font-size-37);
}
.infoMessageDiv {
    text-align: left;
    padding: 0 4.5333vw;
}



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


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


    /* Header */
    header {
        height: 10.78rem;
        padding: 0 4rem 0 1.1rem;
    }
    .logoA {
        width: 25rem;
        margin-top: -2rem;
    }
    .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 (Hero / Store) */
    #section1 {
        padding: 14rem 0 9rem;
    }
    .heroLogoImg {
        width: 39rem;
        margin-top: 1rem;
    }
    .heroTitleDiv {
        margin-top: 3rem;
    }
    .heroTitleImg {
        width: 49.1rem;
    }
    .storeRewardArea {
        margin-top: 7rem;
    }
    .storeHeadingDiv {
        margin-bottom: 3.6rem;
    }
    .storeRewardImg {
        width: 62rem;
    }
    .storeGuideText {
        margin-top: 3.6rem;
    }
    .storeBtn {
        width: 46.5rem;
        margin-top: 4rem;
    }
    .heroAvataImg {
        width: 84rem;
        margin-top: -2rem;
    }

    /* Section2 (Milestone Rewards) */
    #section2 {
        margin-top: -9.75rem;
        border-radius: 7.5rem 7.5rem 0 0;
    }
    /* .milestoneTitleImg {
        position: absolute;
        top: -5rem;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
    } */
    .milestoneTitleImg {
        position: relative;
        top: -5rem;
        width: 80%;
        display: block;
        margin: 0 auto;
    }
    .milestoneInner {
        margin-top: -3rem;
        padding: 0 4.5rem 9rem;
    }
    .milestoneDetailArea {
        padding: 6rem 0 13.5rem;
    }
    .milestoneDetailBox {
        width: 90rem;
    }
    .milestoneDescDiv {
        margin-bottom: 4.8rem;
    }
    .stageRewardDiv {
        height: 264rem;
        gap: 2rem;
        margin-bottom: 5.4rem;
    }
    .stageRewardInfoTextA {
        margin-bottom: 4.8rem;
    }
    .milestoneDetailSns {
        width: 33rem;
    }


    /* Section3 */
    #section3 {
        border-radius: 7.5rem 7.5rem 0 0;
        padding: 4.8rem 0 7.2rem;
        margin-top: -9.75rem;
    }
    .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;
    }
}



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