* {box-sizing: border-box;}

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

@font-face {
    font-family: 'Shilla_CultureB-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/Shilla_CultureB-Bold.woff2')
        format('woff2');
    font-weight: 700;
    font-style: normal;
}

:root {
    --background: #ffffff;
    --black: #181818;
    --stroke: #e7e7e7;
    --container: #f5f5f5;
    --primary: #5c735c;
    --sub: #bb3115;
    --text: #3f3f3f;
    --text2: #8e8e8e;
    --max-width: 65rem;
    --max-list-width: 68rem;
}

html body {
    margin: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    width:100vw;;
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    touch-action: manipulation
}

.container {
    margin-top: 4rem;
    display: block;
    width:100vw;
}

.header {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--stroke);
    height: 4rem;

    width: 100vw;
    position: fixed;
    background-color: white;
    top: 0;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 100%;
    max-width: var(--max-width);
}

.title {
    margin-left: 1.5rem;
    font-family: Shilla_CultureB-Bold;
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    letter-spacing: 0.05rem;
    color: var(--primary);
    width: 40%;
    min-width: 20rem;
}

.menu {
    display: block;
    width: 60%;
    margin-right: 2rem;
}

.menu-btn {
    position:fixed;
    display: none;
    text-align: right;
    width: 50%;
    right: 2rem;
}

.menu-btn:hover{
    
}

#menu-open{
    cursor: pointer;
}

.menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    float: right;
    margin-left: 4rem;

    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0em;
    text-align: left;
    color: var(--primary);
}

.menu-folding {
    display: block;
    width: 100vw;

    position: fixed;
    background-color: white;
    top: 4rem;
}

.folding-item {
    display: flex;
    width: 100vw;
    height: 4rem;
    justify-content: center;
    align-items: center;

    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0em;
    color: var(--primary);
    border-bottom: 1px solid var(--stroke);
}



.swing-in-top-fwd {
    -webkit-animation: swing-in-top-fwd 1s both;
    animation: swing-in-top-fwd 1s both;
}

@-webkit-keyframes swing-in-top-fwd {
    0% {
        -webkit-transform: rotateX(-100deg);
        transform: rotateX(-100deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 0;
        display: block;
    }
    100% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 1;
    }
}
@keyframes swing-in-top-fwd {
    0% {
        -webkit-transform: rotateX(-100deg);
        transform: rotateX(-100deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 0;
        display: block;
    }
    100% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 1;
    }
}

.bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--stroke);
    height: 4rem;
}
.banner {
    margin: 0 1rem 0 1rem;
}

.swing-out-top-fwd {
    -webkit-animation: swing-out-top-fwd 1s both;
    animation: swing-out-top-fwd 1s both;
}

@-webkit-keyframes swing-out-top-fwd {
    0% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateX(70deg);
        transform: rotateX(70deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 0;
        display: none;
    }
}
@keyframes swing-out-top-fwd {
    0% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateX(70deg);
        transform: rotateX(70deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 0;
        display: none;
    }
}

/* Page Transition Animations */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.page-exit {
    animation: fadeOut 0.3s ease-in-out forwards;
}

.page-enter {
    animation: fadeIn 0.3s ease-in-out forwards;
    opacity: 0;
}

.container {
    transition: opacity 0.3s ease-in-out;
}

.container.hidden-transition {
    opacity: 0;
}

/* Smooth appearance on page load - only for pages with transition support */
body.enable-transitions:not(.page-loaded) .header,
body.enable-transitions:not(.page-loaded) .container {
    opacity: 0;
}

body.enable-transitions.page-loaded .header,
body.enable-transitions.page-loaded .container {
    animation: fadeIn 0.3s ease-in-out forwards;
}

/* desktop 규격 */
@media screen and (min-width: 1024px) {
    .menu-folding {
        display: none;
    }
}

/* tablet 규격 */
@media screen and (max-width: 1023px) {
    .menu {
        display: none;
    }

    .menu-btn {
        display : block;
        width : 3em;
    }
    .banner {
        margin: 0;
    }
}

/* fold 규격 */
@media screen and (max-width: 280px) {
    .title{
        margin-left:0.75rem;
        min-width: 14rem;
    }
    .menu-btn {
        margin-right: 0.75rem;
    }
    .folding-item {
        height:3rem;
    }

    .banner {
        margin: 0;
    }
}


.hidden {
    display: none;
}

a{
    text-decoration: none;
    color: var(--primary);
}