@charset "utf-8";
/* CSS Document */

body{ font-family: "Noto Sans KR"; }
body *{ box-sizing: border-box;}
header{ position: fixed; z-index: 100; width: 100%; background-color: #fff; border-top:3px solid #363636; }

header>h1{ height: 4rem; display: flex; align-items: center; justify-content: center; font-size: 1.5em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); width: 100%; }
header>h1>a{ display: flex; }

.logo-txt{ font-family: 'Cute Font'; font-size: 2rem; font-weight: 500; letter-spacing: -0.05em; color:black; }
.logo{ height: 2.0rem; margin-right: 0.2em; }

#nav{ 
    list-style: none; padding-inline-start: 0em; 
    display: flex; align-items: center; margin: 0%; flex: 1 1 auto;
}
#nav>li{ flex:1 1 auto; }
#nav>li>a{ display: block; width: 100%; font-size: 1.1em; font-weight: 500; }
#nav>li>div{ display: block; text-align: left; }
#nav>li>div>a{ transition: all 0.3s ease-out; }
#nav>li>div>div{ display: none; }

#conts{ color:rgba(0, 0, 0, 0.6); font-weight: 400; }
#conts>h1{ 
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 1rem 0rem 1rem 0rem; margin-bottom: 1.5rem; 
    font-family: "Cute Font"; font-size: 3rem; color:black; font-weight: normal; text-align: center; letter-spacing: -0.1rem;
}
#conts>h1>.h1-desc{ font-family:"Noto Sans KR"; font-size: 1rem; font-weight: 300; color: rgba(0, 0, 0, 0.5); letter-spacing: 0rem; }
#location{ display: flex; align-items: center; font-size: 0.9em; color:rgba(0, 0, 0, 0.5); }

/* footer{ display: flex; justify-content: center; border-top: 1px solid rgba(0, 0, 0, 0.1); }
footer>div:last-child{ font-size: 0.9rem; color:rgba(0, 0, 0, 0.7); }
footer>div:last-child>p:not(:last-child){ display: inline-block; }
footer>div:last-child>p:last-child{ margin-top:1em; color:rgba(0, 0, 0, 0.5) } */

footer{ display: flex; flex-wrap: wrap; justify-content: center; background: #232323; text-align: center; color:#fff; }
footer>div:last-child{ font-size: 0.9rem; color: rgba(255, 255, 255, 0.3); margin-top: 1em; }
footer>div:last-child>p:not(:last-child){ display: inline-block; }
footer>div:last-child>p:last-child{ margin-top:1em; color: rgba(255, 255, 255, 0.7); }

.material-icons{ font-size: inherit; }
/* 
#topani{ background: #A27A53; width: 100%; position: relative; top:0px; left: 0px; overflow: hidden; text-align: center; }
#topani>*{ position: absolute; }
#ani01{ 
    background: url(/images/topimg.jpg) 50% 0% / cover; width: 100%; height: 710px; 
    animation: imageZoom linear 30s infinite;
}
@keyframes imageZoom{
    0% { top: 3em }
    50% { top: -20em; }
    100% { top: 3em; }
}
#ani02{height: 290px;background-image: url(/images/topani02.png);bottom:0px;left: calc(50% - 800px);}
#ani03{ width: 240px; bottom: 70px; left: calc(50% - 120px); font-size: 2.2em; font-weight: 700; color:#ffdba5; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); }
#ani04{ width: 680px; bottom: 40px; left: calc(50% - 340px); font-size: 1.2em; font-weight: 500; color: rgba(255, 255, 255, 0.8); } 
*/

#topani{ width: 100%; position: relative; top:0px; left: 0px; overflow: hidden; text-align: center; }
#topani>*{ position: absolute; }
#ani01{ 
    background: url(/images/topimg.jpg) 50% 0% / cover; width: 100vw; height: 50vw; 
    animation: imageZoom linear 20s infinite;
}
@keyframes imageZoom{
    0% { top: 3em }
    50% { top: -20em; }
    100% { top: 3em; }
}
#ani02{ width:750px; height: 135px; background-image: url(/images/topimgbox.svg); left: calc(50% - 375px); bottom: 2em; }
#ani03{ color:#fff; font-family: "Cute Font"; font-weight: bold; font-size: 3em; letter-spacing: -0.02em; text-align: center; width: 220px; left: calc(50% - 110px); bottom: 2.2em; text-shadow: 0px 0px 7px rgba(0, 0, 0, 1); }
#ani04{ color:#fff; font-size: 1.2em; font-weight: 500; letter-spacing: -0.05em; text-align: center; width: 580px; left: calc(50% - 290px); bottom: 2.2em; text-shadow: 0px 0px 10px rgba(0, 0, 0, 1); }

/*PC*/
@media screen and (min-width: 1024.1px) {
    :root {
        --fullwidth: 1200px;
    }

    header{ 
        border-bottom: 1px solid rgba(0, 0, 0, 0.1); display: flex; flex-wrap: wrap; height: 100px;
        justify-content: center;
    }
    #topmn{ 
        position: absolute; width: 160px; height: 2em; background: #363636; color:rgba(255, 255, 255, 0.5);
        top:0px; left: calc(50vw + 600px - 160px); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
        display: flex; justify-content: center; align-items: center; gap: 0.7em; font-size: 0.8em;
    }
    #topmn>.material-icons{ font-size: 1.2em; color:rgba(255, 255, 255, 0.5) }

    header>h1{ border-bottom: 0; width: 220px; }    
    .logo-txt{ font-size: 3rem; padding-top: 2.5rem;  }
    .logo{ height: 3rem; }

    #nav{ max-width: calc(1200px - 220px); min-width: calc(1024px - 220px); padding-left: 9%; padding-top: 2em; }
    /* #nav::before{ content: ""; display: block; width: 15%; } */
    #nav>li{ position: relative; text-align: center; }
    #nav>li>a{ font-size: 1.2em; font-weight: 500; line-height: 4rem; }
    #nav>li>a:after{ 
        content:''; position:absolute; display:block; bottom:0px; left:50%; width:0%; height:2px; background-color:#fff;
        transition:all 0.2s ease-out; 
    }
    #nav>li>div{ 
        position: absolute; display: none; opacity: 0; width: 100%; font-size: 1.05em; padding: 1em 0.5em; font-weight: 500; 
        color:rgba(0, 0, 0, 0.7); animation: navani ease-out 0.5s; animation-fill-mode:forwards;
    }
    @keyframes navani { 100%{ opacity: 1; } }
    #nav>li>a.onmenu{color:#D30033; }
    #nav>li>a.onmenu:after{background-color:#D30033; left:0%; width:100%; }
    #nav>li>div>a{ display: flex; justify-content: center; line-height: 2.5rem; transition:all 0.2s ease-out; }
    #nav>li>div>a.menuon{ color:#D30033; transform: scale(1.15); }
    #nav>li>div>a.menuoff{ color:unset; opacity: 0.7; }

    #nav_bar { display: none; background:#fff; width:100%; height:210px; border-bottom: 1px solid #999; border-top:1px solid rgba(0, 0, 0, 0.1); box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);  }
    #conts{ min-height: calc(100vh - 300px - 15rem); padding-bottom: 2rem; margin:auto; }
    #conts>h1{ width: 1200px; margin-left: auto; margin-right: auto; }

    #location{ position: relative; right: 0px; top:5rem; height: 0px; justify-content: flex-end; font-size: 1em; }

    /* footer{ gap: 1em; padding: 2em 0em; min-height: 10rem; margin: auto; }
    footer>div:first-child{ width: 60px; }
    footer>div:last-child{ flex:0 1 calc(1200px - 60px - 1em)} */

    footer{ padding: 2em 0em 3em 0em; min-height: 15rem; margin: auto; } /*14rem*/
    footer>div:first-child{ 
        display: flex; justify-content: center; align-items: center; width: 100%; color:#fff; padding: 0em; 
    }
    footer>div:last-child{ flex:0 1 calc(900px - 60px - 1em)}
}
/*탭 이하*/
@media screen and (max-width: 1024px) {
    :root {
        --fullwidth: calc(100vw - 2em);
    }   

    header>h1{ height: 3rem; position: fixed; background: #fff; }
    #btn-nvopen{ background: url(/images/mobile_icoList_black.svg) no-repeat; width: 20px; height: 20px; display: block; position: fixed;  top: 15px; right: 10px; cursor:pointer }

    #nav{ 
        flex-wrap: wrap;  
        position: fixed; z-index: 3; width: 300px; padding: 30px  20px; height: 100vh; left:-300px; align-content: flex-start;
        background-color: #fff; border-right: 1px solid rgba(0, 0, 0, 0.1); 
        transition:left 0.3s ease-out; 
    }
    #nav.menuon{ left:0px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); }
    #nav>li{ min-width: 100%; padding: 0.7em 0em; font-size: 1.1em; border-bottom: 1px solid rgba(0, 0, 0, 0.1);  }
    #nav>li>div{ 
        display: none; margin:15px 0px 10px 0px; padding: 0.5em 1em; text-align: left; border:1px solid rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.03); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
    }
    #nav>li>div>a{ display: block; width: 100%; padding: 0.5em 0em; }
    #nav>li>div>a:not(:last-child){ border-bottom: 1px solid rgba(0, 0, 0, 0.1);}

    #btn-nvclose{ background: url(/images/mobile_icoListX_black.svg) no-repeat; width: 20px; height: 20px; display: block; position: absolute; z-index: auto; top: 10px; right: 10px; cursor:pointer }

    #bmask{ position: fixed; z-index: 2; top:0px; left: 0px; width: 100%; height: 100vh; background: black; }

    #conts{ min-height: calc(100vh - 250px - 12rem); padding: 0rem 1em 2em 1em; }
    #location{ padding:1em 0em; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}

    footer{ text-align: center; padding: 1em 2em; min-height: 12rem; }

    @keyframes imageZoom{
        0% { top: 3em }
        50% { top: calc(-50vw + 250px); }
        100% { top: 3em; }
    }
}
/*모바일*/
@media screen and (max-width: 500px) {
    #conts{ padding-top: 3em; }
}