@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: white; }
header>h1{ height: 5rem; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(0, 0, 0, 0.1); width: 100%;  }
header>h1>a, footer>h2>span{ display: flex; }

.logo{ height: 2.8rem; margin-right: 0.5rem; }
*:has(>.logo){ position: relative; letter-spacing: -0.03em; font-family: 'happyGhM'; font-weight: normal; padding-right: 35px;   }
*:has(>.logo)::after{ 
    content: "농원";
    position: absolute; font-size: 2.5rem; width: 35px;
    display: inline-block; padding-left: 100px; padding-top: 10px;
}

#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; }
#myinfobn{ background-color: var(--main-color); color:white; width: 100%; text-align: center; margin: 2em 0; padding:0.5em 0;  }

#topaniwrap{ overflow: hidden; }
#topani{ 
    width: 100%; position: relative; overflow: hidden; 
    background: linear-gradient(var(--main-color) 0%, #f1f1f1 80%);
}
#topani{ position: relative; opacity: 1; }
#topani>*{ position: absolute;  }
#ani01{     
    --ani-h:calc(100vw * 3/10 + 6rem);
    width: 100%; height: calc(var(--ani-h) ); 
    background: url(/images/ani01.png) no-repeat calc(50% - 200px) 0%; opacity: 0;
    animation: anik01 linear 5s infinite; animation-delay: 0.5s; 
    /* background: url(/images/ani01.png) 50% 100% / cover; width: 100%; height: calc(var(--ani-h) );  */
    
    /* animation: anik01 linear 7s infinite;  */
}
#ani02{ top:0em; left: calc(50% - 50px); animation: anik01 linear 3s infinite; }
#ani03{ top:0em; left: calc(50% - 497px); }
#ani04{ top:0em; left: calc(50% - 570px); }
@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); } */
    0% { opacity: 0; transform: scale(1); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.1); }
}
/* #topani{
    position: relative; opacity: 1; 
}
#topani>*{ position: absolute;  }
#ani01{ 
    background: url(/images/pathern1.svg) repeat-x 0% 100%/123px; width: calc(100% + 123px); height: 130px; opacity: 0.2;
    bottom: -20px; left: -123px;
    animation: anik01 3s linear infinite;  animation-delay: 0s;
}
@keyframes anik01{ 
    100% { left: 0px; } 
}
#ani02{ 
    background: url(/images/cloud.svg) no-repeat 0% 0%/100%; width: 364px; height: 237px; opacity: 0;
    bottom: -30px; left: calc(50% - 600px - 60px);
    animation: anik02 2s linear infinite;  animation-delay: 1s;
}
@keyframes anik02{ 
    50%{ opacity: 0.3;}
    100% { left: calc(50% - 600px - 90px);opacity: 0; } 
}
#ani03{ 
    background: url(/images/cloud.svg) no-repeat 0% 0%/100%; width: 198px; height: 129px; opacity: 0;
    bottom: 30px; left: calc(50% + 600px - 60px);
    animation: anik03 5s linear infinite;  animation-delay: 0.5s;
}
@keyframes anik03{ 
    50%{ opacity: 0.3;}
    100% { left: calc(50% + 600px - 140px); opacity: 0; } 
}
#ani04, #ani06{
    --ani04-p : 70px; opacity: 0;
    font-family: 'Stylish'; font-size: 2.5em; width: var(--fullwidth); text-align: center; 
    left: calc(50% - var(--fullwidth)/2);
    animation: anik04 10s ease infinite;  animation-delay: 0s; 
}
#ani04{animation-delay: 0s; }
#ani06{animation-delay: 5s; }
@keyframes anik04{ 
    0% { bottom: calc(var(--ani04-p) + 10px); opacity: 0; }
    5%{ bottom: var(--ani04-p); opacity: 1; }
    45%{ bottom: var(--ani04-p); opacity: 1; }  
    50% { bottom: calc(var(--ani04-p) + 10px); opacity: 0; } 
}
#ani05{
    --ani05-p : 40px; opacity: 0;
    font-size: 1.15em; width: var(--fullwidth); text-align: center;
    left: calc(50% - var(--fullwidth)/2);
    animation: anik05 5s ease infinite; animation-delay: 0.5s; 
}
@keyframes anik05{ 
    0% { bottom: calc(var(--ani05-p) + 10px); opacity: 0; }
    10%{ bottom: var(--ani05-p); opacity: 0.8; }
    75%{ bottom: var(--ani05-p); opacity: 0.8; }  
    85% { bottom: calc(var(--ani05-p) - 10px); opacity: 0; } 
} */

#conts{ color:rgba(0, 0, 0, 0.6); font-weight: 400; font-size: 17px; }
#conts>h1{ padding-top: 1rem; font-size: 1.5em; color:black; text-align: center; }
#conts>h1::after{ content: "";display: block; margin-top:1rem; height: 2rem;  border-top: 1px solid rgba(0, 0, 0, 0.15); }
#conts>h1:has(+.nav-tab)::after{ height: 1rem; }
#conts>h1>.h1-desc{ font-size: 1rem; font-weight: 400; opacity: 0.5; padding-top: 5px; width: var(--fullwidth); margin: auto; min-height: 29px; }
#location{ display: flex; align-items: center; font-size: 0.9em; color:rgba(0, 0, 0, 0.5); }

footer{ 
    display: flex; flex-wrap: wrap; justify-content: center; border-top: 1px solid rgba(0, 0, 0, 0.15); 
    text-align: center; min-height: 15rem; 
}
#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; }
footer>h2{ display: flex; align-items: center; justify-content: center; width: 100%;  }
footer *:has(>.logo){ font-weight: 500; }
#footInfo{ 
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 0.5rem;
    font-size: 0.9rem; font-weight: 300; width: var(--fullwidth); 
}
#footInfo>p:last-child{ opacity: 0.7; width: 100%; padding: 1em 0 2rem 0; }

:where(.material-icons){ font-size: inherit; }

:root { --main-color: #87CD9D; --main-dark-color: #6EBD7E;}

/*탭 이하*/
@media screen and (max-width: 1024px) {
    :root { --fullwidth: calc(100vw - 2em); --headerH : 3rem; }
    
    header>h1{ height: 3rem; position: fixed; background: #fff; }
    .logo{ height: 2rem; }
    *:has(>.logo){ position:static; align-items: center; font-size: 1.3rem; }
    *:has(>.logo)::after{ padding-left: 70px; padding-top: 20px; }

    #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-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); }

    #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 - 15rem - 3rem - 150px); padding: 0rem 1em 2em 1em; }
    #location{ padding:1em 0em; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}

    footer>h2{ font-size: 1.3rem; padding: 1.2rem 0 0.5rem 0; }
    #footInfo{ max-width: 700px; }
}
/*모바일*/
@media screen and (max-width: 500px) {
    #conts{ min-height: calc(100vh - 16rem); }
    footer{ min-height: 16rem;}
}

/*탭 이상*/
@media screen and (min-width: 500px) {
}

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

    /* 스크롤바 세팅 */
    html{ overflow: overlay ; }
    html::-webkit-scrollbar { width: 0.5rem; }
    html::-webkit-scrollbar-track { background-color: transparent; }
    html::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 0.5rem; } 
    

    header{ overflow: hidden; }
    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; /* 마우스 온일 경우 높이 설정 */
    } 

    #topmn{ 
        position: relative; top:50px; max-width: 1200px; min-width: 1024px; margin: auto; height: 0px;
        display: flex; justify-content: flex-end; align-items: center; gap: 0.5em; font-size: 0.8em;
    }
    #topmn>.material-icons{ font-size: 1.2em; color:rgba(0, 0, 0, 0.5) }
    #since{
        position: absolute; z-index: auto; width: 130px;
        left : calc(50% - 600px); top : 40px; color:#A4BD7D;
    }
    #since>strong{ color:#4DB762; font-size: 1.3rem; }

    #nav{ margin: auto; max-width: 1200px; min-width: 1024px; }
    #nav>li{ position: relative; text-align: center; }
    #nav>li>a{ font-size: 1.2em; font-weight: 500; line-height: 3rem; }
    #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; opacity: 0; width: 100%; font-size: 1.05em; padding: 1em 0.5em; font-weight: 500; 
        color:rgba(0, 0, 0, 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{ min-height: calc(100vh - 15rem - 299px); padding-bottom: 2rem; }
    #conts>h1:has(+.nav-tab){ margin-bottom:0rem; }
    #location{ position: relative; width: var(--fullwidth); margin: auto; right: 0px; top:80px; height: 0px; justify-content: flex-end; font-size: 1em; }
    #location+h1{  margin-left: auto; margin-right: auto; font-size: 1.8rem; /* height: 7rem; */ padding-top: 1.5rem; position: relative; overflow: hidden; }
    
    #conts>*:not(h1, #location, .nav-tab, #popupimage, #rgsbmask, .rgspop, .layersys, .layersys+div)
    { width: var(--fullwidth); margin-left: auto; margin-right: auto; }
}