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

@font-face {
    font-family: 'Jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/JalnanGothic.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

/* default layout */
header{ position: fixed; z-index: 100; width: 100%; background-color: transparent; }
.sitetitle{ color:white; }
#topaniwrap{ height: calc(var(--headerH) + var(--aniH));  padding-top: var(--headerH); overflow: hidden; }
#conts{     
    min-height: calc(100vh - var(--footerH) - var(--aniH) - var(--headerH)); 
    font-weight: 400; 
}
footer{     
    min-height: var(--footerH); 
    border-top: 1px solid rgba(0, 0, 0, 0.15); text-align: center;  overflow: hidden;
}
#botx{ display: none; visibility: hidden; }


/* logo */
*:has(>.logo){letter-spacing: -0.03em; font-size: 1.6rem; display: flex; align-items: center; justify-content: center;  }
.logo{ height: 2rem; margin-right: 0.5rem;  }
.logo+span{ font-weight: 500; }
.sitetitle{ height: 5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); width: 100%; display: flex; justify-content: center; }


/* navigattion */
#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.0em; 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; }


/* header */
header{ position: fixed; z-index: 100; width: 100%;}


/* footer 이하 */
#footLink{ width: 100%; height: 3rem; line-height: 3rem; border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
#footLink>a{ display: inline-block; padding: 0em 0.3em; font-weight: 300; }
.logowrap{ display: flex; align-items:flex-start; justify-content: center; width: 100%; padding: 1em 0; }
#footInfo{ 
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 0.5rem;
    font-size: 0.9rem; font-weight: 300; max-width: var(--fullwidth); margin: auto;
}
#footInfo>p:last-child{ opacity: 0.7; width: 100%; padding: 1em 0 2rem 0; }


/* conts */
#conts{ color:rgba(0, 0, 0, 0.6); font-weight: 400; font-size: 17px; line-height: 1.7; }
#location{ display: flex; align-items: center; font-size: 0.9em; color:rgba(0, 0, 0, 0.5); }
#location .material-icons{ font-size: 1em;}
#page-h1{ display: none; } /* 동적 h1 컨트롤 */
#pagetitle{ padding-top: 1rem; font-size: 1.5em; color:black; text-align: center; font-weight: 500; }
#pagetitle::after{ content: ""; display: block; margin-top:1rem; height: 2rem;  border-top: 1px solid rgba(0, 0, 0, 0.15); }
#pagetitle>.h1-desc{ font-family: "Noto Sans KR"; font-size: 1rem; font-weight: 400; opacity: 0.5; padding-top: 5px; width: var(--fullwidth); margin: auto; min-height: 29px; }


:root { --main-color:#7DAE21; --headerH : 129px; --footerH : 16rem; --aniH: 0; }

/*탭 이하*/
@media screen and (max-width: 1024px) {
    :root { --fullwidth: calc(100vw - 2em); --headerH : 3rem; /* --aniH: 150px; */ }

    *:has(>.logo){ font-size: 1.3rem; }

    /* 모바일 메뉴 버튼 */
    #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;
    }
    .sitetitle{ height: var(--headerH); position: fixed; z-index: 0; background-color: #262626; }
    #topmn{display: none;}

    /* navigation 이하 */
    #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-of-type){ border-bottom: 1px solid rgba(0, 0, 0, 0.1);}

    #topmn{display: none;}
    #nav>#topmn{ 
        display: flex; width: 100%; align-items: center; justify-content: center; margin:1.5em 0; padding: 0.7em 0; background-color: var(--main-color); color:white; border-radius: 3px;
    }
    #nav>#topmn>a{ padding: 0 0.5em;}
    #nav>#topmn>a:not(:first-child){ border-left:1px solid rgba(255, 255, 255, 0.5); }

    #bmask{ position:fixed; top:0px; left: 0px; width: 100%; height: 100vh; background: black; opacity: 0; }
    #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 }
    
    /* conts */
    #conts{ padding: 0rem 1rem 2rem 1rem; }
    #location{ padding:1em 0em; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
}

/*모바일*/
@media screen and (max-width: 500px) {
    :root { --aniH: 0px; }

    /* #pagetitle과 nav-tab  간격 설정*/
    #pagetitle:has(+.nav-tab)::after{ height: 0; }
}

/*탭 이상*/
@media screen and (min-width: 500.02px) {
    /* topani */
    #topani{ 
        width: 100%; height: var(--aniH); position: relative; overflow: hidden;  background-color: var(--main-color);        
    }
    #topani{ position: relative; opacity: 1; }
    #topani>*{ position: absolute;  }
    #ani01{     
        --ani-h:calc(100vw * 3/10 + 6rem);
        /* background: url(/images/topimg.jpg) 50% 100% / cover; width: 100%; height: calc(var(--ani-h) );  */
        animation: anik01 linear 7s infinite; 
    }
    @keyframes anik01{ 
        0% { top: calc( (var(--topani-height) - var(--ani-h))/2 - 4.5rem); }
        50% { top: calc( (var(--topani-height) - var(--ani-h))/2 + 1.5rem); }
        100% { top: calc( (var(--topani-height) - var(--ani-h))/2 - 4.5rem); }
    }
    #ani02{ top:0em; left: calc(50% - 750px); }
    #ani03{ top:0em; left: calc(50% - 520px); }
    #ani04{ bottom:1em; width: 370px; left: calc(50% - 600px); color:rgba(255, 255, 255, 0.8); font-size: 1.29em; letter-spacing: -0.02em; text-align: center; }

    /* #pagetitle과 nav-tab  간격 설정*/
    #pagetitle:has(+.nav-tab)::after{ height: 1em; }
}

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

    /* topmenu */
    #topmn{ 
        position: relative; top:50px; max-width: var(--fullwidth); min-width: 1024px; margin: auto; height: 0px;
        display: flex; justify-content: flex-end; align-items: center; gap: 0.5em; font-size: 0.8em; color: rgba(255, 255, 255, 0.5);
    }
    #topmn>.material-icons{ font-size: 1.2em; color:rgba(255, 255, 255, 0.5) }

    /* header */
    header{ overflow: hidden; background-color: #262626; }
    header:has(.onmenu){ box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.05);  }
    header::after{ 
        content: ""; display: block; width: 100%; height: 0px;
        border-top: 1px solid rgba(0, 0, 0, 0); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        transition:all 0.3s ease; 
    }
    header:has(.onmenu)::after{ 
        border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        height: 300px; /* 마우스 온일 경우 높이 설정 */
    }

    /* navigattion */
    #nav{ margin: auto; max-width: var(--fullwidth); min-width: 1024px; color:rgba(255, 255, 255, 0.8) }
    #nav>li{ position: relative; text-align: center; }
    #nav>li>a{ font-size: 1.2em; font-weight: 500; line-height: 3rem; font-family: "Jalnan";}
    #nav>li>a:after{ 
        content:''; position:absolute; display:block; bottom:0px; left:50%; width:0%; height:2px; background-color:white;
        transition:all 0.2s ease-out; 
    }
    #nav>li>div{ 
        position: absolute; opacity: 0; width: 100%; font-size: 1.05em; padding: 1em 0.5em; font-weight: 500; 
        color:rgba(255, 255, 255, 0.7); top:2rem; 
        transition:all 0.3s ease; 
    }
    #nav>li>a.onmenu{color:var(--main-color); }
    #nav>li>a.onmenu:after{background-color:var(--main-color); left:0%; width:100%; }

    #nav:has(.onmenu)>li>div{ opacity: 1; top:3rem; }

    #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:var(--main-color); transform: scale(1.15); }
    #nav>li>div>a.menuoff{ color:unset; opacity: 0.7; }


    /* conts */
    #conts{ padding-bottom: 2rem; }
    #location{ position: relative; right: 0px; top:70px; height: 0px; justify-content: flex-end; font-size: 1em; }
    #location+#pagetitle{  margin-left: auto; margin-right: auto; font-size: 1.8rem; font-family: "Jalnan"; line-height: normal; padding-top: 2rem; position: relative; overflow: hidden; }

    #conts>.devicefull{ width: var(--fullwidth); min-width: var(--fullwidth); margin-left: auto; margin-right: auto; }
}