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

body{ font-family: "Noto Sans KR"; }
body *{ box-sizing: border-box;}
header{ position: fixed; z-index: 100; width: 100%; top:0; }
/* 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; } */
header>div:first-child{ height: 3rem; display: flex; align-items: center; justify-content: center; width: 100%;  }

.logo{ height: 3.8rem;}
/* *:has(>.logo){ position: relative; letter-spacing: -0.02em; font-weight: 700; font-size: 1.6rem; } */

#topmn{ display: flex; align-items: center; background-color: #262626; color:white; }


#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-color: rgba(0, 0, 0, 0.7);
    position: fixed; z-index: -1; width: 100%; 
    /* position: relative; */ opacity: 1; color: white; height: var(--aniw-h); 
}
#topani>*{ position: absolute;  }
#ani01{
    background: var(--topimg1) 50% 100% / cover;
    /* --ani-h:calc(100vw * 3/10 + 6rem);     */
    width: 100%; height: 100%; 
    animation: anik01 ease 2s forwards; 
}
@keyframes anik01{ 
    0% { transform: scale(1.2); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
#ani02{ 
    font-family: "Rock Salt"; font-size: 3rem; text-align: center; width: 100%; opacity: 0; 
    animation: aniktext ease 1s forwards;  animation-delay: 0.5s;
    --targeth:30%;--orgh:20%;
}
#ani03{ 
    font-weight: 100; font-size: 1.125rem; text-align: center; width: 100%; opacity: 0; 
    animation: aniktext ease 1s forwards;  animation-delay: 1s;
    --targeth:25%;--orgh:35%;
}

@keyframes aniktext{ 
    0% { bottom: var(--orgh); opacity: 0; }
    100% { bottom: var(--targeth); opacity: 1; } 
}


/* #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; } */
/* #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; background-color: white; margin-top: var(--aniw-h); letter-spacing: -0.025em; }
#location .material-icons{ font-size: 1em;}
#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; align-items: center;
    min-height: 17rem; background-color: #262626; column-gap: 2rem;
}
#footInfo{ 
    display: flex; flex-wrap: wrap; 
    font-size: 0.9rem; font-weight: 300; width: calc(var(--fullwidth) - 125px - 3rem) ;  color: rgba(255,255,255,0.5);
}
#footInfo > *{ display: flex;flex-wrap: wrap; column-gap: 0.5rem; }
/* #footInfo > div:first-child{ 
    width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.1); column-gap: 1rem;
    font-size: 1rem; font-weight: 400; color:rgba(255,255,255,0.7); padding: 1em 0; margin-bottom: 1em;
} */
#footInfo > p:last-child{ padding: 1em 0 2em 0;}

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

:root { --main-color: #74b6d5; --main-dark-color: #28AFA5;}

/*탭 이하*/
@media screen and (max-width: 1024px) {
    :root { --fullwidth: calc(100vw - 2em); --headerH : 3rem; }
    
    header>div:first-child{ height: 3rem; position: fixed; background: #262626; }
    .logo{ height: 2rem; }
    *:has(>.logo){ position:static; align-items: center; font-size: 1.3rem; }

    #btn-nvopen{ background: url(/images/mobile_icoList_white.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{ width: 100%; justify-content: center; margin:1.5em 0; padding: 0.7em 0;  border-radius: 3px; display: flex; }
    #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);}
}
/*모바일*/
@media screen and (max-width: 500px) {
    #conts{ min-height: calc(100vh - 21rem - var(--headerH)); }
    footer>.logo{ width: 4rem; padding-top: 2rem; height: auto; }
    footer{ min-height: 21rem;}
    #footInfo{ width: var(--fullwidth); text-align: center; }
    #footInfo>*{ justify-content: center; }
    #footInfo > p:last-child{ width: 100%; }
}

/*탭 이상*/
@media screen and (min-width: 500px) {
    footer>.logo{ width: 125px; padding-left: 1rem; padding-bottom: 2.5rem; height: auto; }
    /* #footInfo > div:first-child > p:not(.xbar)::before{ 
        content: ""; display: inline-block; width: 1rem; height: 0.9rem; vertical-align: baseline;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
    } */
    #footInfo > div:last-of-type > p:not(.xbar)::before{ 
        content: "/"; display: inline-block; padding-right: 0.5rem;
    }
}

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

    /* 스크롤바 세팅 */
    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; transition:all 0.3s ease; }
    header.scroll{ background-color: white; }
    header:not(.scroll):has(.onmenu){ box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.5); }
    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.scroll::after{ border-top: 1px solid rgba(0, 0, 0, 0.1); }
    header:has(.onmenu)::after{ 
        border-top: 1px solid rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        height: 200px; /* 마우스 온일 경우 높이 설정 */
    }

    header>div:first-child{ 
        position: relative; z-index: 2; height: 0; margin: auto; justify-content: left;
        width: var(--fullwidth);
    }
    header>div:first-child>a{ position: absolute; display: block; width: 146px; height: fit-content; top:20px; }

    #topmn{ 
        position: absolute; top:0px; right: 0; justify-content: flex-end; gap: 0.7em; font-size: 0.8em;
        padding: 5px 2.5rem; border-radius: 0 0 4rem 4rem;
    }
    #topmn>a{ top:0px; color: white; }
    #topmn>.material-icons{ font-size: 1.2em; }

    #nav{ margin: auto; width: var(--fullwidth); padding: 0 10px 0 120px; margin-top:calc(100px - 4.5rem - 2px); }
    #nav>li{ position: relative; text-align: center; }
    #nav>li>a{ font-size: 1.2em; font-weight: 500; line-height: 4.5rem; color:rgba(255, 255, 255, 0.9) }
    header.scroll>#nav>li>a{ color:unset; }
    #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: 2em 0.5em; font-weight: 500; 
        color:rgba(255, 255, 255, 0.7); top:2rem; 
        transition:all 0.3s ease; 
    }
    header.scroll>#nav>li>div{ color:unset; }
    #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; }
    #nav>li>div>a.menuoff{ color:unset; opacity: 0.7; }

    #topaniwrap{ min-width: var(--fullwidth); }

    #conts{ min-height: calc(100vh - 17rem - var(--aniw-h)); 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;}
    #location+h1{  margin-left: auto; margin-right: auto; font-size: 1.8rem; /* height: 7rem; */ padding-top: 1.5rem; position: relative; overflow: hidden; min-width: var(--fullwidth); }

    footer{ min-width: var(--fullwidth); }
    
    #conts>*:not(h1, #location, .nav-tab, #popupimage, #rgsbmask, .rgspop, .layersys, .layersys+div)
    { width: var(--fullwidth); margin-left: auto; margin-right: auto; }
}